/* Page-specific styles for osu-recent */
/* Scope a local accent (link) color for the osu-recent subsite. This keeps the
   main site's blue accent unchanged while making osu-recent use a lime/cyan
   accent as requested. The variables are defined on the .recent-root element
   so descendant elements can inherit them. */
.recent-root{
  --card-bg: rgba(255,255,255,0.03);
  --muted: rgba(255,255,255,0.65);
  --link: #00FFD1;      /* lime/cyan accent for osu-recent */
  --link-hover: #00CCAA; /* slightly darker hover for contrast */
}
/* Increase container and right column so detail/session cards have more room for exact numbers */
.container{max-width:1100px}
.recent-main{display:flex;gap:1rem;align-items:stretch;justify-content:space-between;margin-top:0.6rem}
.recent-main .left{flex:1 1 56%;max-width:56%}
.recent-main .right{flex:0 0 42%;max-width:42%}

/* reduce vertical spacing between the Recent scores header and the list */
#scores{margin-top:0.35rem}

.scores-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.6rem}
/* Constrain the list height and allow internal scrolling when there are many items.
   This keeps the layout stable and provides a natural scrollable area for recent
   scores without causing the entire page to overflow (root hides page overflow). */
.scores-list{
  max-height: calc(68vh); /* slightly taller so recent scores show more items */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px; /* leave room for scrollbar so content doesn't jump */
}
.scores-list{transition:opacity .42s cubic-bezier(.18,.9,.22,1), transform .42s cubic-bezier(.18,.9,.22,1)}
.scores-list.fade-out{opacity:0;transform:translateY(-4px) scale(.997)}
.scores-list.fade-in{opacity:1;transform:translateY(0) scale(1)}
.scores-list li{background:var(--card-bg);padding:0.6rem;border-radius:8px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border:1px solid rgba(255,255,255,0.04)}
.scores-list li:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.45)}
.score-meta{display:flex;flex-direction:column;align-items:flex-start}
.score-title{font-weight:600}
.score-sub{font-size:0.9rem;color:var(--muted)}
.score-pp{font-weight:700;color:var(--link)}

.card{background:var(--card-bg);padding:0.8rem;border-radius:8px;margin-bottom:0.8rem;border:1px solid rgba(255,255,255,0.04)}
.session-stats{display:flex;flex-direction:column;gap:0.4rem;color:var(--muted)}

/* Make the right column split evenly and match the left column height.
  Right-side cards will share the vertical space and scroll internally if needed. */
.recent-main .right{display:flex;flex-direction:column;gap:0.4rem}
/* Make the session stats smaller so it never needs to scroll, reduce its
  top spacing (h3 margin and padding), and let the detail card expand; the
  detail card is non-scrollable (overflow:visible) so its content flows
  naturally within the column height. */
.recent-main .right .session-card{flex:0 0 120px;min-height:110px;overflow:visible;padding:0.35rem 0.5rem 0.5rem 0.5rem;margin-bottom:0}
.recent-main .right .session-card h3{margin:0 0 0.35rem;font-size:1rem}
.recent-main .right .detail-card{flex:1 1 0;overflow:visible;padding:0.6rem;margin-bottom:0}

/* Settings button/menu in header */
.settings-btn{appearance:none;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);padding:0.3rem 0.5rem;border-radius:6px;cursor:pointer;font-size:1rem}
.settings-btn:focus{outline:none;box-shadow:0 6px 16px rgba(0,0,0,0.45);transform:translateY(-1px)}
.settings-menu{position:absolute;right:0;background:rgba(10,10,12,0.92);border:1px solid rgba(255,255,255,0.06);padding:0.6rem;border-radius:8px;min-width:180px;z-index:100;box-shadow:0 10px 40px rgba(0,0,0,0.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* animation-friendly menu: start invisible and use .open to show */
.settings-menu{opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .18s ease, transform .22s cubic-bezier(.18,.9,.22,1)}
.settings-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.settings-row{display:flex;align-items:center;gap:0.5rem;color:var(--muted);user-select:none}
.settings input[type="checkbox"]{width:1.05rem;height:1.05rem}

/* header actions (back, external link, account) - keep uniform sizing */
.recent-root .header-actions{display:flex;gap:0.5rem;align-items:center}
.recent-root .header-actions .action{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.35rem 0.8rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:var(--card-bg);min-width:160px;color:var(--text);text-decoration:none;min-height:44px;line-height:1}
.recent-root .header-actions .action:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.35)}
.recent-root .header-actions .action:active{transform:translateY(0)}
.recent-root .header-actions .user-btn{padding:0.18rem 0.38rem;display:inline-flex;align-items:center;justify-content:center;/* keep same button height but make the icon smaller visually */font-size:0.95rem;line-height:1;min-width:0}

/* make the account button narrow while preserving header action height */
.recent-root .header-actions .user-btn{width:44px;max-width:44px;min-width:44px;padding-left:0.35rem;padding-right:0.35rem}

/* Make header-only settings and account buttons square and consistent. This
   keeps the small inline settings button (e.g. the one next to "Recent scores")
   unchanged because it is outside of .header-actions. */
.recent-root .header-actions .settings-btn,
.recent-root .header-actions .user-btn{width:44px;height:44px;min-width:44px;max-width:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:8px}

/* position menus relative to their buttons so they appear in the right place */
.settings{position:relative}
.user{position:relative}

/* position the left-column settings menu to open below the button */
.settings > .settings-menu{right:0;top:calc(100% + 8px);transform-origin:top right}

/* position the header user menu to the top-right of its button */
.user > .settings-menu{right:0;top:calc(100% + 8px);transform-origin:top right}

/* smaller icon sizing for emoji/text or inline SVG inside header buttons */
.recent-root .header-actions .settings-btn .icon,
.recent-root .header-actions .settings-btn svg,
.recent-root .header-actions .user-btn .icon,
.recent-root .header-actions .user-btn svg{width:18px;height:18px;font-size:18px;display:inline-flex;align-items:center;justify-content:center}

.detail-key{font-weight:600;margin-right:0.6rem;flex:0 0 28%;max-width:28%;box-sizing:border-box}
.detail-row{display:flex;gap:0.6rem;align-items:center;margin:0.45rem 0}
.detail-value{flex:1 1 0;text-align:right;color:var(--muted);min-width:0}

/* detail body transitions when switching scores */
/* smoother softer detail transitions */
#detail-body{transition:opacity .52s cubic-bezier(.18,.9,.22,1), transform .52s cubic-bezier(.18,.9,.22,1)}
.detail-fade-out{opacity:0;transform:translateY(-4px) scale(.997)}
.detail-fade-in{opacity:1;transform:translateY(0) scale(1)}

@media (prefers-reduced-motion: reduce){
  .scores-list,.hits,.card,#detail-body{transition:none}
}

@media (max-width:860px){
  .recent-main{flex-direction:column}
  .recent-main .left,.recent-main .right{max-width:100%;flex-basis:100%}
}

/* Footer fade-out: after 5s delay, fade and slide down smoothly. Respects prefers-reduced-motion. */
.footer{
  animation: footerFade 2s ease-in-out 5s forwards;
}

@keyframes footerFade{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(8px)}
}

@media (prefers-reduced-motion: reduce){
  .footer{animation:none}
}

/* Hits / badges */
.hits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.12rem;justify-items:end;align-items:center;flex:1 1 0;max-width:100%;transition:transform .46s cubic-bezier(.18,.9,.22,1)}
.hits .hit-pill{justify-content:space-between;min-width:0;overflow:visible;transition:width .5s cubic-bezier(.18,.9,.22,1),transform .46s cubic-bezier(.18,.9,.22,1),margin .24s ease;will-change:width,transform}
.hit-pill{display:inline-flex;align-items:center;gap:0.45rem;padding:0.18rem 0.5rem;border-radius:999px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);font-weight:600;font-size:0.9rem;min-width:0}
.hit-pill .hit-type{font-weight:700;opacity:0.9}
.hit-pill .hit-num{opacity:0.95}
.hit-300{background:linear-gradient(180deg, rgba(159,209,255,0.06), rgba(159,209,255,0.03));color:var(--link)}
.hit-100{background:linear-gradient(180deg, rgba(200,200,200,0.03), rgba(200,200,200,0.02));color:rgba(255,255,255,0.95)}
.hit-50{background:linear-gradient(180deg, rgba(255,220,120,0.04), rgba(255,220,120,0.02));color:rgba(255,240,200,0.98)}
.hit-miss{background:linear-gradient(180deg, rgba(255,120,120,0.04), rgba(255,120,120,0.02));color:rgba(255,180,180,0.98);border-color:rgba(255,80,80,0.06)}