/* App-wide polish, loaded after every other stylesheet: one spacing scale, opaque themed surfaces,
   calm hover states and theme-aware scrollbars. */
:root{
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;
  --card-pad:20px;--card-gap:16px;--tile-pad:14px;--tile-gap:10px;--btn-pad:10px 18px;--btn-gap:8px;
  --scroll-thumb:color-mix(in srgb,var(--muted) 45%,var(--bg));--scroll-thumb-hover:color-mix(in srgb,var(--accent) 70%,var(--bg));--scroll-track:var(--track)
}
@media(max-width:780px){:root{--card-pad:16px;--card-gap:12px;--tile-pad:12px;--tile-gap:8px}}

/* ---------- Themes: opaque, readable surfaces ---------- */
html[data-ui-theme] .topbar,html[data-ui-theme] .primary-nav,html[data-ui-theme] .chat-form,html[data-ui-theme] .file-chip,
html[data-ui-theme] .gc-stats span,html[data-ui-theme] .msg.system span,html[data-ui-theme] .photo-nav,html[data-ui-theme] .stamp{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-ui-theme] .panel,html[data-ui-theme] .sidebar,html[data-ui-theme] .radio-panel,html[data-ui-theme] .pomo-panel,html[data-ui-theme] .w-panel{background:var(--bg)}
/* The page gap between cards shows the theme sky; a soft wash keeps it from fighting card text. */
html[data-ui-theme] main{background:color-mix(in srgb,var(--bg) 78%,transparent);border-radius:var(--radius)}

/* ---------- Hover: a gentle lift and tint, no wiggles, jumps or zooms ---------- */
.button:hover:not(:disabled){transform:none;filter:brightness(1.04)}
.launch-next:hover,.launch-tile:hover,.map-tile:hover,.mode-card:hover,.q-option:hover:not([aria-disabled]),.preset:hover,.group-card:hover{transform:translateY(-1px)}
.launch-tile:hover .tile-icon,.mode-card:hover .mode-icon{animation:none}
.swatch:hover,.bubble:hover{transform:none;filter:brightness(1.08)}
.pp-pick button:hover{transform:translateY(-1px)}
.feat-photo:hover img{transform:none}
.launch-tile,.map-tile,.mode-card,.q-option,.preset,.group-card,.launch-next{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
@media(hover:hover){
  .launch-tile:hover,.map-tile:hover,.mode-card:hover,.group-card:hover,.launch-next:hover{box-shadow:var(--raise-sm)}
  .q-option:hover:not([aria-disabled]){box-shadow:var(--raise-xs),0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
}
@media(prefers-reduced-motion:reduce){.launch-next:hover,.launch-tile:hover,.map-tile:hover,.mode-card:hover,.q-option:hover,.preset:hover,.group-card:hover,.pp-pick button:hover{transform:none}}

/* ---------- Spacing: cards, tiles, buttons and their content ---------- */
.panel,.profile-card,.league-panel,.notice-card,.lib-card,.subject-card,.group-card,.set-card,.boss-card,.job-card,.tour-card,.peek-card,.w-panel,.cl-item{padding:var(--card-pad)}
.mode-card,.item-card,.review-card,.badge-card,.result-card,.invite-card,.more-tile,.carousel-card{padding:var(--tile-pad)}
.panel,.profile-card,.league-panel,.lib-card,.subject-card,.group-card,.set-card,.boss-card,.item-card,.mode-card,.review-card,.badge-card{row-gap:var(--tile-gap)}
.panel>:last-child,.profile-card>:last-child,.lib-card>:last-child,.subject-card>:last-child,.group-card>:last-child,.set-card>:last-child,.item-card>:last-child,.mode-card>:last-child,.boss-card>:last-child,.notice-card>:last-child,.cl-item>:last-child{margin-bottom:0}
.panel>h2:first-child,.panel>h3:first-child,.profile-card>h2:first-child,.lib-card>h2:first-child,.group-card>h3:first-child,.set-card>h3:first-child{margin-top:0}
.panel>h2,.profile-card>h2,.lib-card>h2,.league-panel>h2{margin-bottom:var(--s3)}
.panel p,.lib-card p,.group-card p,.set-card p,.item-card p{margin-bottom:var(--s3)}
.mode-grid,.item-grid,.badge-grid,.group-grid,.launch-grid,.result-grid,.achievement-grid{gap:var(--card-gap)}
.metric-grid,.preset-grid,.more-grid,.diff-grid,.medal-grid{gap:var(--tile-gap)}
.button,.text-button{padding:var(--btn-pad);gap:var(--btn-gap)}
.button.small{padding:6px 12px;gap:6px}
.button-row,.card-actions{gap:var(--s2)}

/* ---------- Scrollbars that follow the current theme (horizontal and vertical) ---------- */
html{scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
*{scrollbar-color:var(--scroll-thumb) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-track{background:var(--scroll-track)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:99px;border:3px solid transparent;background-clip:padding-box;min-height:36px;min-width:36px}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover);background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:var(--accent);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
/* Swipe rows stay clean: a thin bar on pointer devices only. */
@media(hover:hover) and (pointer:fine){
  .chip-row,.carousel,.quest-strip,.focus-row,.result-tabs,.players-strip,.review-people,.mode-grid{scrollbar-width:thin}
  .chip-row::-webkit-scrollbar,.carousel::-webkit-scrollbar,.quest-strip::-webkit-scrollbar{display:block;height:8px}
  .chip-row::-webkit-scrollbar-thumb,.carousel::-webkit-scrollbar-thumb,.quest-strip::-webkit-scrollbar-thumb{border-width:2px}
}

/* ---------- Icons: duotone (tinted body + rounded outline) ---------- */
.ico{stroke-width:1.9}
.ico .du{fill:currentColor;stroke:none;opacity:.16}
.nav-item.active .ico .du,.nav-item[aria-current] .ico .du,.button .ico .du,.tile-icon .ico .du,.mode-icon .ico .du{opacity:.28}
.star.on .ico .du,.heart:not(.lost) .ico .du{opacity:1}
@media(hover:hover){.nav-item:hover .ico .du,.icon-button:hover .ico .du{opacity:.26}}
.ico .du{transition:opacity .18s ease}

/* ---------- Badges, fame and the trophy case ---------- */
.badge-art{position:relative;display:inline-grid;place-items:center;width:var(--bs,56px);height:var(--bs,56px);flex-shrink:0;filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}
.badge-art svg{position:absolute;inset:0;width:100%;height:100%}
.badge-art .badge-emblem{position:relative;width:40%;height:40%;color:#fff;stroke-width:2.2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.badge-art .badge-emblem .du{opacity:.35}
.badge-art.locked{filter:grayscale(1) opacity(.45)}
.badge-pips{position:absolute;bottom:-3px;left:50%;translate:-50% 0;display:flex;gap:2px}
.badge-pips i{width:5px;height:5px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 0 1.5px var(--bg)}
.tier-4 .badge-pips i{background:linear-gradient(135deg,#ff9fe8,#9fe6ff)}
.badge-art.tier-4:not(.locked){animation:prismGlow 4s ease-in-out infinite}
@keyframes prismGlow{50%{filter:drop-shadow(0 3px 8px rgba(160,120,255,.55))}}
.badge-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.badge-card{position:relative;align-items:center;text-align:left;border:0;background:var(--bg);color:var(--ink);font:inherit;width:100%;padding:var(--tile-pad,12px);gap:var(--s3,12px)}
button.badge-card{cursor:pointer}
button.badge-card:focus-visible{outline:3px solid var(--gold)}
.badge-card.famed{box-shadow:var(--raise-xs),0 0 0 2px var(--gold)}
.fame-mark{position:absolute;top:8px;right:8px;color:var(--gold)}
.fame-mark .ico{width:16px;height:16px;fill:currentColor}
.badge-count{display:block;margin-top:4px;font-size:11px;color:var(--faint);font-weight:700}
.badge-tier{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:2px 8px;border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.3px;background:var(--track);color:var(--muted)}
.badge-tier b{color:var(--ink)}
.badge-tier.t1{background:color-mix(in srgb,#c98a5a 22%,var(--bg));color:color-mix(in srgb,#8a4f28 70%,var(--ink))}
.badge-tier.t2{background:color-mix(in srgb,#9aa6b5 25%,var(--bg))}
.badge-tier.t3{background:color-mix(in srgb,var(--gold-2) 28%,var(--bg));color:color-mix(in srgb,var(--gold) 70%,var(--ink))}
.badge-tier.t4{background:linear-gradient(90deg,color-mix(in srgb,#ff9fe8 30%,var(--bg)),color-mix(in srgb,#9fe6ff 30%,var(--bg)));color:var(--ink)}
.trophy-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3,12px);margin-top:var(--s2,8px)}
.trophy-count{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 8px;min-width:180px;flex:1}
.trophy-count strong{font-size:28px;line-height:1}
.trophy-count small{color:var(--muted);font-weight:700}
.trophy-count .bar{grid-column:1/-1;height:8px;margin-top:6px}
.tier-chips{display:flex;flex-wrap:wrap;gap:6px}
.tier-chips .badge-tier{margin:0}
.fame-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2,8px);margin-top:var(--s3,12px)}
.fame-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3,12px)}
.fame-slot{display:grid;justify-items:center;gap:4px;padding:var(--s3,12px) var(--s2,8px);border-radius:18px;background:var(--bg);box-shadow:var(--inset-sm);text-align:center;min-width:0}
.fame-slot.filled{box-shadow:var(--raise-xs);background:linear-gradient(180deg,color-mix(in srgb,var(--gold-2) 14%,var(--bg)),var(--bg))}
.fame-slot strong{font-size:12.5px;line-height:1.25;overflow-wrap:anywhere}
.fame-slot small{font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.fame-slot.empty{border:2px dashed color-mix(in srgb,var(--muted) 35%,transparent);color:var(--muted);font:inherit;cursor:pointer;align-content:center;min-height:112px}
.fame-slot.empty .ico{width:26px;height:26px}
.profile-hero[class*=" pc-"] .fame-slot{background:var(--pc-chip);box-shadow:none;border-color:var(--pc-line)}
@media(max-width:520px){.fame-slot .badge-art{--bs:48px!important}.fame-slot strong{font-size:11.5px}}
/* Trophies page */
.achievement .badge-art{margin:-2px 0}
@media(prefers-reduced-motion:reduce){.badge-art.tier-4{animation:none}}

/* ---------- Rankings: many boards, one scrollable tab strip ---------- */
.league-page>*{min-width:0}
.rank-me{margin:0 0 var(--s2,8px);padding:var(--s2,8px) var(--s3,12px);border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,var(--bg));font-size:13px;font-weight:700}

/* Page tiles carry badge art like the profile's achievements. */
.tile-icon:has(.badge-art),.mode-icon:has(.badge-art),.more-icon:has(.badge-art){width:auto;height:auto;background:none;box-shadow:none;border-radius:0;animation:none}
.tile-icon .badge-art,.mode-icon .badge-art,.more-icon .badge-art{filter:drop-shadow(0 3px 4px rgba(0,0,0,.28))}
.tile-icon .badge-emblem,.mode-icon .badge-emblem,.more-icon .badge-emblem{width:50%;height:50%;stroke-width:2.4}
.tile-icon .badge-pips,.mode-icon .badge-pips,.more-icon .badge-pips{display:none}
.launch-tile:hover .badge-art,.mode-card:hover .badge-art,.more-tile:hover .badge-art{translate:0 -2px;transition:translate .18s ease}

/* Rankings: boards are grouped (no tab row to scroll); results sit in columns on wide screens. */
#view-rankings .league-page{max-width:1180px}
.rank-nav{display:grid;gap:8px;margin-bottom:10px}
.rank-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rank-groups button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:8px 10px;border:0;border-radius:16px;background:var(--bg);color:var(--muted);font:inherit;font-weight:800;font-size:13.5px;box-shadow:var(--raise-xs);cursor:pointer;transition:box-shadow .15s,color .15s}
.rank-groups button .ico{width:20px;height:20px;flex:none}
.rank-groups button.on{box-shadow:var(--inset-sm);color:var(--accent)}
#view-rankings .rank-subs{display:flex;flex-wrap:wrap;gap:6px;padding:6px;margin:0;overflow:visible}
#view-rankings .rank-subs button{flex:1 1 auto;min-width:0;min-height:38px;padding:6px 14px;white-space:normal;line-height:1.15}
#view-rankings .rank-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:8px 14px;padding:0;margin:0;list-style:none}
#view-rankings .rank-list>li{margin:0;min-width:0}
@media (max-width:640px){
  .rank-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rank-groups button{min-height:42px;font-size:13px}
}

/* Compact layout: pages use the full content width instead of a narrow centred column, with tighter vertical rhythm. */
.arena-page,.workshop-page,.groups-page,.library-page,.profile-page,.changelog-page,.dm-page{max-width:none;gap:14px;padding-bottom:16px}
.league-page{gap:14px}
.page-intro{margin:2px 0 12px}
.page-intro.compact{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px}
.page-intro.compact>.eyebrow{flex:0 0 100%;margin:0}
.page-intro.compact>h1{margin:0}
.page-intro.compact>p{flex:1 1 320px;margin:0;max-width:none}
.changelog-page{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));align-items:start}
@media (min-width:1100px){main{padding-inline:28px}}
@media (max-width:780px){main{padding-inline:12px}.page-intro.compact>p{flex-basis:100%}}

/* No sideways scrolling rows: tab and chip rows wrap instead. */
.workshop-tabs,.focus-row{display:flex;flex-wrap:wrap;overflow:visible!important;gap:6px}
.workshop-tabs button{flex:1 1 auto;white-space:normal}
.quest-strip{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));overflow:visible!important;gap:8px}
.quest-strip .quest-chip{min-width:0}
@media (max-width:780px){.quest-strip{grid-template-columns:1fr 1fr}.workshop-tabs button{padding-inline:10px}}

/* ---------- Profile hero: identity, actions, stats and badges never overlap ---------- */
.profile-hero{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s4) var(--s6);padding:var(--s6)}
.profile-hero .hero-id{min-width:0;gap:var(--s4)}
.profile-hero .hero-id h2{overflow-wrap:anywhere}
.profile-hero .hero-sub{overflow-wrap:anywhere}
.profile-hero .hero-actions{align-self:center}
.profile-hero .hero-actions .button{min-height:44px;white-space:nowrap}
/* With a banner the whole identity row sits below the artwork, so the name can never touch the banner edge. */
.profile-hero.banner{--banner-h:72px;padding-top:calc(var(--banner-h) + var(--s4))}
.profile-hero.banner .hero-id{padding-top:0;margin-top:0;align-items:center}
.profile-hero.banner .hero-actions{align-self:center}
@media(max-width:900px){.profile-hero{padding:var(--s5)}.profile-hero .hero-id>div:last-child{flex:1 1 0}}
@media(max-width:780px){
  .profile-hero,.profile-hero.banner{grid-template-columns:minmax(0,1fr);padding:var(--s4);gap:var(--s3)}
  .profile-hero.banner{padding-top:calc(var(--banner-h) + var(--s3))}
  .profile-hero .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);justify-content:stretch;align-self:stretch}
  .profile-hero .hero-actions .button{width:100%;justify-content:center}
  .profile-hero .hero-id h2{font-size:21px}
  .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:360px){.profile-hero .hero-actions{grid-template-columns:minmax(0,1fr)}.profile-hero .hero-id{gap:var(--s3)}}

/* ---------- Mobile: floating panels and dialogs become bottom sheets ---------- */
@media(max-width:780px){
  .notify-panel,.pomo-panel,.radio-panel{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-width:none!important;max-height:min(82vh,calc(var(--vh,100vh) - 24px))!important;border-radius:24px 24px 0 0!important;padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom))!important;z-index:96!important;transform:none!important}
  .alarm-dialog[open],.help-dialog[open]{position:fixed;inset:auto 0 0 0;margin:0;width:100%!important;max-width:none!important;max-height:min(88vh,calc(var(--vh,100vh) - 16px))!important;border-radius:24px 24px 0 0;padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom))}
  .pp-close,.dialog-close{min-width:40px;min-height:40px;width:40px;height:40px}
  .pomo-panel button,.pomo-panel [role=tab],.alarm-dialog summary,.pill,.focus-row .pill{min-height:40px}
  .alarm-dialog summary{display:flex;align-items:center}
}
@media(max-width:780px){
  .help-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .help-actions .button{width:100%;justify-content:center;min-height:44px}
  .help-pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s2)}
  .help-pagination .button{width:100%;justify-content:center;min-height:44px}
}
.social-card:empty,.profile-card:empty{display:none}

/* ---------- Touch: every tap target reaches 44px (hit area grows, layout stays) ---------- */
@media(pointer:coarse){
  html .topbar-brand{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  html .hud-level,html .icon-button,html .topbar-tool,html .avatar-button{min-width:44px;min-height:44px!important}
  html .icon-button,html .topbar-tool{width:44px;height:44px}
  html .pill,html .chip-btn,html .acc-chip,html .board-tabs button,html #rankGroups button,html #rankSubs button,html .badge-more summary,html .result-tabs .pill,html .focus-row .pill{min-height:44px!important}
  html .pill{min-width:44px;justify-content:center}
  .version-link::before,.sidebar-toggle::before{content:"";position:absolute;inset:-12px -4px}
  .sidebar-toggle{position:relative}
}