/* Generated from appsettings and style.css. Do not edit. */
:root { --settings-background: #090a0b; --settings-foreground: #f4f4f2; --settings-muted: #b2b5b8; --settings-line: #383b3e; --settings-ball: #FFD700; --settings-grow: #90EE90; --settings-shrink: #FF6B6B; --settings-bomb: #FF6B35; --settings-combined: #A78BFA; --settings-aim: #60A5FA; --settings-pierce: #56D5E8; --settings-electric: #F6D365; --settings-mark: #F28DC5; }
/* MiraFit design system. Edit this source, never the generated CSS. */
/* 1. Foundations — game and cosmetic palettes remain independent. */
:root {
  color-scheme: dark;
  --ds-bg: var(--settings-background);
  --ds-surface: #111315;
  --ds-surface-raised: #191b1e;
  --ds-surface-hover: #24272b;
  --ds-text: var(--settings-foreground);
  --ds-text-muted: var(--settings-muted);
  --ds-border: var(--settings-line);
  --ds-border-strong: #626970;
  --ds-success: #74e8c2;
  --ds-warning: #f3c16e;
  --ds-danger: #ff775d;
  --ds-ink: #101112;
  --ds-font-ui: 'Segoe UI', Arial, sans-serif;
  --ds-font-score: Consolas, monospace;
  --ds-text-xs: .75rem;
  --ds-text-sm: .875rem;
  --ds-text-base: 1rem;
  --ds-text-lg: 1.25rem;
  --ds-text-xl: 1.5rem;
  --ds-text-display: 2rem;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-radius-control: 8px;
  --ds-radius-panel: 12px;
  --ds-radius-dialog: 16px;
  --ds-motion-fast: 120ms ease-out;
  --ds-motion-panel: 180ms ease-out;
  --ds-target: 44px;
  --muted: var(--ds-text-muted);
  --line: var(--ds-border);
  font-family: var(--ds-font-ui);
  color: var(--ds-text);
  background: var(--ds-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Resolve on body: equipment sets --accent on this element. */
body { --ds-accent: var(--accent, var(--ds-text)); }
/* 2. Base controls and application frame */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.ad-frame-catalog { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ad-frame-catalog article { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.ad-frame-catalog button { white-space: normal; }
.player-frame[data-frame="ad-aurora"] { border: 2px solid #75dfbf; border-radius: 12px; background: linear-gradient(135deg,#183b35,#252d47); padding: 4px 10px; }
.player-frame[data-frame="ad-orbit"] { border: 2px double #aabaff; border-radius: 24px; background: #222b45; padding: 4px 10px; }
.player-frame[data-frame="ad-circuit"] { border: 2px dashed #f1bd73; border-radius: 3px; background: #342e20; padding: 4px 10px; }
html { height: 100dvh; overflow: hidden; }
body { margin: 0; min-width: 300px; height: 100%; overflow: hidden; background: var(--ds-bg); }
.sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button, input, select, textarea { font: inherit; }
button { min-height: 44px; min-width: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--ds-radius-control); color: var(--ds-text); background: var(--ds-surface-raised); font-size: var(--ds-text-sm); line-height: 1.3; cursor: pointer; touch-action: manipulation; overflow-wrap: anywhere; }
button:hover:not(:disabled):not([aria-busy="true"]) { background: var(--ds-surface-hover); }
button:disabled { color: var(--ds-text-muted); background: var(--ds-surface); border-color: var(--ds-border); cursor: not-allowed; }
button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 3px; }
p { line-height: 1.5; color: var(--muted); }
.app { width: min(100%, 520px); height: 100%; margin: auto; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; }
.topbar, .hud-dock, .page-footer { width: min(100%, 430px); flex: none; }
.topbar { min-height: 44px; display: grid; grid-template-columns: max-content minmax(0,1fr) 44px; gap: var(--ds-space-2); align-items: center; }
.brand { display: flex; min-width: 0; justify-content: center; align-items: center; gap: 6px; font-size: 24px; font-weight: 700; letter-spacing: -.06em; white-space: nowrap; overflow-wrap: anywhere; }
.brand-mark { font-size: var(--ds-text-lg); color: var(--ds-accent); }
.topbar-controls { justify-self: end; }
.icon-button { width: 44px; height: 44px; padding: 10px; }
.icon-button svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#menu-button { padding-inline: 9px; font-size: var(--ds-text-sm); }
.game-wrap { position: relative; width: min(100%,430px); flex: 1; min-height: 0; margin-top: var(--ds-space-2); overflow: hidden; border: 1px solid #2b2e30; border-radius: var(--ds-radius-panel); background: #0a0b0c; }
.first-aim-guide:not([hidden]) { position: absolute; z-index: 2; left: 50%; bottom: 14%; transform: translateX(-50%); max-width: 85%; padding: 8px 12px; border: 1px solid var(--ds-accent); border-radius: 18px; color: #fff; background: #111d; font-size: var(--ds-text-sm); text-align: center; pointer-events: none; }
.first-aim-guide span { display: inline-block; margin-right: 5px; font-size: var(--ds-text-xl); vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) { .first-aim-guide span { animation: aim-cue 1.4s ease-in-out infinite alternate; } }
@keyframes aim-cue { from { transform: translate(-4px, 4px); } to { transform: translate(4px, -4px); } }
.game-stage { display: contents; }
/* Only viewport changes resize the stage; dynamic HUD/footer content stays in its own tracks. */
body[data-view="play"] { overflow: auto; }
body[data-view="play"] .app { --play-header-height: max(44px, 2.75rem); --play-hud-height: max(88px, 5.5rem); --play-footer-height: max(104px, 6.5rem); --play-field-width: min(100%, 560px, calc((100cqh - var(--play-header-height) - var(--play-hud-height) - var(--play-footer-height) - 24px) * 2 / 3)); width: min(100%, 584px); min-height: max(600px, 37.5rem); padding-right: max(12px, env(safe-area-inset-right)); container-type: size; display: grid; grid-template-rows: var(--play-header-height) var(--play-hud-height) auto var(--play-footer-height); align-content: start; gap: var(--ds-space-2); justify-items: center; }
body[data-view="play"] :is(.topbar,.hud-dock,.game-stage,.page-footer) { width: var(--play-field-width); }
body[data-view="play"] .game-stage { display: grid; aspect-ratio: 2 / 3; min-width: 0; min-height: 0; }
body[data-view="play"] .game-wrap { width: 100%; height: 100%; min-height: 0; margin: 0; }
body[data-view="play"] .topbar { height: 100%; min-height: 0; }
body[data-view="play"] .hud-dock { height: 100%; min-height: 0; margin: 0; }
body[data-view="play"] .page-footer { display: grid; grid-template-rows: max(52px, 3.25rem) max(44px, 2.75rem); gap: var(--ds-space-2); height: 100%; min-width: 0; min-height: 0; }
body[data-view="play"] .power-stat { grid-row: 1; min-height: 0; margin: 0; overflow: auto; }
body[data-view="play"] .power-strip { width: max-content; min-width: 100%; flex-wrap: nowrap; }
body[data-view="play"] .instructions { grid-row: 2; height: 100%; min-height: 0; margin: 0; overflow: auto; }
body:is([data-view="home"],[data-view="pause"]) .app { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: stretch; }
body:is([data-view="home"],[data-view="pause"]) .game-wrap { flex: none; height: 100%; max-height: none; min-height: 0; margin-top: 0; aspect-ratio: auto; }
canvas { width: 100%; height: 100%; display: block; touch-action: none; }
canvas:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.overlay { position: absolute; inset: 0; padding: var(--ds-space-4); overflow-y: auto; z-index: 1; background: #090a0bf5; }
.overlay.hidden { display: none; }
.overlay-card { width: 100%; max-width: 430px; margin: auto; }
body:not([data-view="play"]) .app .hud-dock,
body:not([data-view="play"]) .power-stat { display: none; }
body:not(:is([data-view="play"],[data-view="home"],[data-view="pause"])) .page-footer { display: none; }
body:not([data-view="play"]) .instructions { display: none; }
body:not([data-view="play"]) #field { visibility: hidden; }
body:not([data-view="play"]) .first-aim-guide { display: none; }
body:not([data-view="play"]) .game-wrap { border: 0; background: transparent; }
body:not([data-view="play"]) .overlay { background: transparent; padding: 8px 0 16px; }
body:is([data-view="pause"],[data-view="home"]) .overlay { display: flex; flex-direction: column; justify-content: safe center; }
body:is([data-view="pause"],[data-view="home"]) .overlay-card { flex: none; }
body[data-view="home"] .overlay { padding: var(--ds-space-4) 0; }
body:is([data-view="home"],[data-view="pause"]) .overlay-card { margin: 0 auto; }
body[data-view="home"] .home-heading h1 { margin: 0 0 var(--ds-space-4); }
.home-heading h1, .overlay h1 { font-size: var(--ds-text-display); margin: 6px 0 18px; letter-spacing: -.04em; line-height: 1.15; overflow-wrap: anywhere; }
.home-modes { display: grid; gap: var(--ds-space-3); }
.home-mode-picker { display: none; }
.home-mode-picker button { min-width: 0; }
/* Shared panels and actions */
.mode-card { padding: var(--ds-space-4); border: 1px solid var(--line); border-radius: var(--ds-radius-panel); background: var(--ds-surface); }
.mode-card h2 { margin: 0 0 8px; font-size: var(--ds-text-xl); }
.mode-card p { margin: 8px 0; font-size: var(--ds-text-base); }
.mode-card .mode-progress:empty { display: none; }
.play-button { width: 100%; padding: 13px 16px; min-height: 48px; margin-top: var(--ds-space-3); display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--ds-ink); background: var(--ds-accent); border-color: transparent; font-size: var(--ds-text-base); font-weight: 600; }
.play-button:hover:not(:disabled) { background: color-mix(in srgb, var(--ds-accent), white 15%); }
.play-button:disabled { background: var(--ds-surface-hover); color: var(--ds-text-muted); }
.mode-secondary { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; margin-top: var(--ds-space-2); }
.mode-secondary button { flex: 1; font-size: var(--ds-text-sm); padding: 10px 8px; background: transparent; }
.menu-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--ds-space-2); margin-top: 18px; }
.menu-nav button { display: grid; place-items: center; padding: var(--ds-space-2); }
.menu-nav svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-footer .menu-nav { display: none; margin: 0; }
body:is([data-view="home"],[data-view="pause"]) .page-footer { padding-top: 8px; border-top: 1px solid var(--line); }
body:is([data-view="home"],[data-view="pause"]) .page-footer .menu-nav { display: grid; }
.menu-notice { font-size: var(--ds-text-sm); }
.menu-notice:empty { display: none; }
body:not([data-view="home"]) #mode-continuations,
body:not([data-view="home"]) #mode-history,
body:not([data-view="home"]) #mode-availability-notice { display: none; }
#mode-continuations button, #mode-history button { margin: 0 8px 12px 0; }
#pause-panel { margin: 8px 0 24px; }
#pause-panel > button { width: 100%; margin-top: var(--ds-space-2); }
body[data-view="pause"] .home-heading, body[data-view="pause"] .home-modes, body[data-view="pause"] #result-panel { display: none; }
body[data-view="results"] .home-heading { display: none; }
.result-score { color: var(--ds-accent); display: block; font: 700 var(--ds-text-display) var(--ds-font-score); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin-bottom: 10px; }
#result-panel { margin-bottom: 20px; }
#result-panel p { font-size: var(--ds-text-base); }
#result-panel > button { margin: 4px 4px 4px 0; }
/* Game HUD: score and combo share one hierarchy. */
.hud-dock { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; align-content: center; gap: 12px; min-width: 0; margin-top: 8px; padding: 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-panel); background: var(--ds-surface); }
.hud-dock:focus-visible, .power-stat:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.hud-dock > div { min-width: 0; display: grid; gap: 6px; }
.stat-label { color: var(--ds-text-muted); font-size: var(--ds-text-xs); line-height: 1.2; letter-spacing: .035em; overflow-wrap: anywhere; }
.hud-dock strong { font: 700 var(--ds-text-lg)/1.1 var(--ds-font-score); font-variant-numeric: tabular-nums; }
.score-heading { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.score-stat { container-type: inline-size; --score-max-font-size: var(--ds-text-display); }
.hud-dock .score-value { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; white-space: nowrap; color: var(--ds-accent); font-size: clamp(var(--ds-text-sm), calc(100cqw / (var(--score-characters, 1) * .62)), var(--score-max-font-size)); line-height: 1.25; letter-spacing: -.04em; scrollbar-width: thin; }
.score-value:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.multiplier-stat { display: inline-flex; align-items: center; flex: none; padding: 3px 6px; border-radius: 5px; color: var(--ds-accent); background: color-mix(in srgb, var(--ds-accent) 12%, var(--ds-surface)); }
.hud-dock .multiplier-stat strong { font-size: var(--ds-text-sm); }
.turn-stat, .balls-stat { padding-left: 12px; border-left: 1px solid var(--ds-border); }
.timer-stat { text-align: right; color: var(--ds-success); }
.timer-stat[data-urgent="true"] { color: var(--ds-danger); }
.timer-stat[data-urgent="true"] .stat-label::before { content: '! '; font-weight: 700; color: var(--ds-danger); }
.hud-dock:has(.timer-stat:not([hidden])) { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4px 12px; padding-block: 8px; }
.hud-dock:has(.timer-stat:not([hidden])) .score-stat { grid-column: 1; grid-row: 1; gap: 2px; }
.hud-dock:has(.timer-stat:not([hidden])) .score-stat { --score-max-font-size: var(--ds-text-xl); }
.hud-dock .timer-stat strong { font-size: var(--ds-text-xl); }
.hud-dock:has(.timer-stat:not([hidden])) .timer-stat { grid-column: 2; grid-row: 1; gap: 2px; }
.hud-dock:has(.timer-stat:not([hidden])) :is(.turn-stat,.balls-stat) { display: flex; align-items: baseline; gap: 8px; padding: 0; border: 0; grid-row: 2; }
.hud-dock:has(.timer-stat:not([hidden])) .balls-stat { justify-content: end; }
.hud-dock:has(.timer-stat:not([hidden])) :is(.turn-stat,.balls-stat) strong { font-size: var(--ds-text-sm); }
.danger-status { position: absolute; top: 100%; left: 0; right: 0; z-index: 2; padding: var(--ds-space-2); border-radius: var(--ds-radius-control); color: #ffc2b2; background: #431b16; font-size: var(--ds-text-sm); line-height: 1.4; }
.instructions { display: flex; align-items: center; gap: var(--ds-space-2); height: max(44px,2.8em); margin-top: var(--ds-space-1); color: var(--muted); font-size: var(--ds-text-sm); line-height: 1.4; }
.instructions #hint { flex: 1; min-width: 0; max-height: 100%; overflow-y: auto; overflow-wrap: anywhere; }
.instructions #hint:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.instructions #hint:empty { display: none; }
.recall-button { flex: none; min-height: 44px; }
.recall-button kbd { font: inherit; margin-left: 4px; }
/* Dialogs and secondary areas */
dialog { width: min(600px,calc(100% - 24px)); max-width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: var(--ds-space-4); margin: auto; color: var(--ds-text); background: var(--ds-surface); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-dialog); overflow-y: auto; overflow-wrap: anywhere; }
dialog::backdrop { background: #000c; }
.dialog-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ds-space-3); margin-bottom: var(--ds-space-3); }
.dialog-header h2 { flex: 1 1 12ch; min-width: 0; margin: 0; font-size: var(--ds-text-xl); line-height: 1.2; }
.dialog-header button { flex: none; }
dialog h3 { font-size: var(--ds-text-lg); margin: 24px 0 12px; }
dialog p { font-size: var(--ds-text-base); margin: 12px 0; }
.mode-tabs, .player-tabs, .board-view-tabs { display: flex; gap: 6px; margin: 12px 0; }
.mode-tabs button, .player-tabs button, .board-view-tabs button { flex: 1; min-width: 0; padding-inline: 6px; }
.mode-tabs { flex-wrap: wrap; }
.mode-tabs button { flex-basis: 6em; }
.favored-label { display: block; font-size: var(--ds-text-sm); margin-bottom: 7px; }
.favored-list { display: flex; flex-wrap: wrap; gap: 5px; }
.favored-item { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid #8051a577; border-radius: var(--ds-radius-control); background: #241b2c; font-size: var(--ds-text-xs); color: var(--ds-text); }
.favored-item svg { width: 16px; height: 16px; flex: none; color: #d6a6ff; }
.power-stat { min-width: 0; margin-top: var(--ds-space-2); }
.power-strip { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; align-items: center; }
.power-group { display: inline-grid; grid-template-columns: auto minmax(0,1fr); align-items: baseline; gap: 6px; flex: none; }
.power-items { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.power-group + .power-group { border-left: 1px solid var(--ds-border); padding-left: 12px; }
.power-group-label { font-size: var(--ds-text-xs); color: var(--ds-text-muted); white-space: nowrap; }
.power-chip { display: inline-flex; align-items: baseline; gap: 6px; flex: none; min-height: 30px; padding: 4px 8px; border-radius: var(--ds-radius-control); border: 1px solid color-mix(in srgb, var(--ds-accent) 35%, var(--ds-border)); background: color-mix(in srgb, var(--ds-accent) 7%, var(--ds-surface)); color: var(--ds-text); font-size: var(--ds-text-sm); line-height: 1.2; white-space: nowrap; }
.power-chip svg { align-self: center; width: 16px; height: 16px; flex: none; color: var(--ds-accent); }
.power-chip[data-phase="pending"] { border-style: dashed; border-color: var(--ds-border-strong); background: var(--ds-surface); }
.power-chip[data-phase="pending"] svg { color: var(--ds-text-muted); }
.power-chip strong { font: 700 var(--ds-text-sm)/1 var(--ds-font-score); color: var(--ds-accent); }
.power-chip small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
.chaos-guide { padding-top: 4px; }
.chaos-guide h3 { scroll-margin-top: 78px; }
.chaos-guide h4 { font-size: var(--ds-text-base); margin: 16px 0 8px; }
.guide-grid { display: grid; gap: 7px; }
.guide-entry { display: flex; align-items: flex-start; gap: 10px; padding: 9px; border: 1px solid var(--line); border-radius: var(--ds-radius-control); background: var(--ds-surface-raised); }
.guide-entry strong, .guide-entry small { display: block; }
.guide-entry small { margin-top: 3px; line-height: 1.35; color: var(--muted); }
.guide-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: var(--ds-radius-control); color: #dbadff; background: #2a2033; }
.guide-icon svg { width: 26px; height: 26px; }
.guide-actions, .tutorial-actions { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; margin-top: 14px; }
.guide-actions button, .tutorial-actions button { flex: 1; }
.tutorial-example { display: flex; gap: var(--ds-space-3); align-items: center; padding: 10px; border-radius: var(--ds-radius-panel); background: #211b28; }
.tutorial-example .guide-icon { width: 64px; height: 64px; }
.tutorial-example .guide-icon svg { width: 40px; height: 40px; }
.tutorial-actions .play-button { margin-top: 0; }
#chaos-tutorial::backdrop { background: rgba(0,0,0,.42); }
#pause-chaos-guide { width: 100%; margin-top: var(--ds-space-2); }
@media (max-width: 600px) {
  dialog { width: 100%; max-width: 100%; max-height: min(85dvh, 850px); margin: auto 0 0; padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-radius: var(--ds-radius-dialog) var(--ds-radius-dialog) 0 0; }
  .dialog-header { position: sticky; top: -16px; z-index: 2; padding: 4px 0 10px; background: var(--ds-surface); }
  .page-footer .instructions { min-width: 0; }
}
.player-tabs { flex-wrap: wrap; }
.player-tabs button { flex-basis: 7em; }
button[aria-pressed="true"]:not(.sound-button) { color: var(--ds-accent); border-color: var(--ds-accent); background: var(--ds-surface-hover); box-shadow: inset 0 -2px 0 var(--ds-accent); }
label { display: block; font-size: var(--ds-text-base); margin: 18px 0 8px; }
input, select, textarea { width: 100%; min-height: 44px; padding: 10px; color: #fff; background: var(--ds-bg); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-control); font-size: var(--ds-text-base); }
input[type="range"] { padding: 0; accent-color: var(--ds-accent); }
.analytics-choice { display: flex; align-items: center; gap: var(--ds-space-3); min-height: 44px; }
.analytics-choice input { width: 24px; min-height: 24px; height: 24px; padding: 0; flex-shrink: 0; accent-color: var(--ds-accent); }
dialog output { float: right; color: var(--muted); font-variant-numeric: tabular-nums; }
dialog form > button { width: 100%; margin-top: 18px; }
.difficulty-heading { position: relative; display: flex; align-items: center; gap: 6px; margin: 14px 0 6px; }
.difficulty-heading #difficulty-label { font-size: var(--ds-text-xs); }
.difficulty-heading .difficulty-help { display: grid; place-items: center; flex: none; width: var(--ds-target); min-width: var(--ds-target); height: var(--ds-target); min-height: var(--ds-target); margin: 0; padding: 0; border: 1px solid #777; border-radius: 50%; color: #ccc; font-size: var(--ds-text-xs); line-height: 1; cursor: help; }
.difficulty-heading #difficulty-details { display: none; position: absolute; top: 100%; left: 0; z-index: 2; width: min(280px, 100%); box-sizing: border-box; padding: 10px; border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-control); background: var(--ds-surface-raised); color: #ddd; font-size: var(--ds-text-xs); line-height: 1.4; }
.difficulty-help:is(:hover, :focus) + #difficulty-details, .difficulty-heading #difficulty-details:hover { display: block; }
.difficulty-selector { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: stretch; border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-control); overflow: hidden; background: var(--ds-bg); }
.difficulty-selector button { min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: var(--ds-text-lg); }
.difficulty-selector button:hover, .difficulty-selector button:focus-visible { background: #252627; }
.difficulty-selector output { display: grid; place-items: center; float: none; color: #fff; font-size: var(--ds-text-sm); font-weight: 600; }
details { margin-top: 18px; font-size: var(--ds-text-base); }
summary { cursor: pointer; min-height: 44px; padding-block: 12px; color: var(--ds-text); }
#google-signin { display: grid; justify-content: center; margin: 16px 0; }
#google-signin > div { min-width: 0; max-width: 100%; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--ds-text-sm); }
th, td { text-align: left; padding: 12px 6px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
th:first-child { width: 15%; }
th:nth-child(2) { width: 44%; }
th:last-child, td:last-child { text-align: right; }
table[data-period="time-attack"] { font-size: var(--ds-text-sm); }
table[data-period="time-attack"] th, table[data-period="time-attack"] td { padding: 10px 4px; }
table[data-period="time-attack"] th:nth-child(1) { width: 8%; }
table[data-period="time-attack"] th:nth-child(2) { width: 29%; }
table[data-period="time-attack"] th:nth-child(3) { width: 15%; }
table[data-period="time-attack"] th:nth-child(4) { width: 28%; }
table[data-period="time-attack"] th:nth-child(5) { width: 20%; }
table[data-period="time-attack"] td:nth-child(4) { font-variant-numeric: tabular-nums; }
table caption { font-size: var(--ds-text-sm); text-align: left; margin-bottom: 10px; color: var(--muted); }
.badge { margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--ds-radius-panel); }
.badge progress { width: 100%; accent-color: var(--ds-accent); }
.badge-tier { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.badge-tier p { margin: 4px 0; }
.help-powers { padding: 0 12px; border: 1px solid var(--line); border-radius: var(--ds-radius-control); }
.help-powers summary { font-weight: 600; }
.help-powers ul { list-style: none; padding: 0; margin-top: 0; }
.help-powers li { display: grid; grid-template-columns: minmax(28px,max-content) minmax(0,1fr); gap: var(--ds-space-2); margin: 16px 0; font-size: var(--ds-text-base); line-height: 1.5; color: var(--muted); }
.help-powers li > span:first-child { color: #fff; white-space: nowrap; }
@media (max-width: 380px) { dialog { padding: var(--ds-space-4); } .player-tabs button { font-size: var(--ds-text-sm); } }
@media (max-height: 500px) and (orientation: landscape) {
  body[data-view="play"] .app { min-height: max(300px, 18.75rem); width: min(100%,900px); grid-template-columns: minmax(0,1fr) minmax(0,230px); grid-template-rows: var(--play-header-height) minmax(0,1fr) var(--play-footer-height); }
  body[data-view="play"] .topbar { width: min(100%, 430px); grid-column: 1/-1; justify-self: center; }
  body[data-view="play"] .game-stage { width: min(100%, 560px, calc((100cqh - var(--play-header-height) - 8px) * 2 / 3)); align-self: start; grid-column: 1; grid-row: 2/4; }
  body[data-view="play"] .hud-dock { grid-column: 2; grid-row: 2; width: 100%; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-self: stretch; overflow-y: auto; }
  body[data-view="play"] .hud-dock:not(:has(.timer-stat:not([hidden]))) .score-stat { grid-column: 1/-1; }
  body[data-view="play"] .hud-dock .turn-stat { padding-left: 0; border-left: 0; }
  body[data-view="play"] .hud-dock .score-stat { --score-max-font-size: var(--ds-text-xl); }
  body[data-view="play"] .page-footer { grid-column: 2; grid-row: 3; width: 100%; }
}
.player-label { display: inline-flex; flex-direction: column; gap: var(--ds-space-1); max-width: 100%; }
@media (min-width: 900px) and (height > 500px) {
  body[data-view="play"] .app { --play-footer-height: max(124px, 7.75rem); width: min(100%,744px); }
  body[data-view="play"] .page-footer { width: 100%; grid-template-rows: max(72px, 4.5rem) max(44px, 2.75rem); }
  body[data-view="play"] .power-strip { width: 100%; min-width: 0; flex-wrap: wrap; gap: 6px 12px; align-items: start; }
  body[data-view="play"] .power-group { flex: 1 1 280px; min-width: 0; }
  body[data-view="play"] .power-items { flex-wrap: wrap; }
  body[data-view="play"] .power-stat { overflow-x: hidden; overflow-y: auto; }
}
.player-label strong { font-size: inherit; overflow-wrap: anywhere; }
.player-label small { font-size: var(--ds-text-sm); font-weight: normal; color: #bcc0c4; }
.player-frame { padding: 4px 5px; border: 1px solid var(--frame-color); border-radius: var(--ds-radius-control); }
.player-frame[data-frame="breakthrough-frame"], .player-frame[data-frame="weekly-gold-frame"] { border-width: 3px; border-style: double; }
.player-frame[data-frame="collector-frame"] { border-radius: 12px 2px; }
.cosmetic-preview { display: block; font-size: var(--ds-text-sm); margin-top: 10px; padding: 6px; color: #ddd; }
.cosmetic-preview[data-locked="true"] { opacity: .65; }
.preview-trail { border-bottom: 3px solid var(--frame-color); background: linear-gradient(90deg, transparent, #ffffff08); }
.preview-frame { border: 1px solid var(--frame-color); border-radius: var(--ds-radius-control); }
.preview-title { color: var(--frame-color); }
#profile-dialog { width: min(800px, calc(100% - 28px)); }
#collections-dialog { width: min(570px, calc(100% - 28px)); }
.profile-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.profile-controls { min-width: 0; }
.equipment-preview { position: relative; min-width: 0; height: 215px; overflow: hidden; border: 1px solid var(--preview-accent, var(--line)); border-radius: var(--ds-radius-control); background: #080d11; }
.cosmetic-scene { width: 100%; height: 100%; }
#equipment-preview-label { position: absolute; left: 12px; bottom: 12px; padding: 7px 9px; border-radius: var(--ds-radius-control); background: var(--ds-bg)db; color: var(--preview-accent, #fff); }
#equipment-preview-label .player-label small { color: #dde1e3; }
.cosmetic-selector { margin-top: 13px; }
.selector-label { display: block; margin-bottom: 5px; font-size: var(--ds-text-sm); }
.selector-controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 5px; align-items: stretch; }
.selector-controls button { margin: 0; padding: 0; font-size: var(--ds-text-base); }
.selector-controls output { display: grid; place-items: center; min-height: 44px; padding: 5px 7px; border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-control); background: var(--ds-bg); color: var(--ds-text); font-size: var(--ds-text-sm); text-align: center; overflow-wrap: anywhere; }
.collection-preview { height: clamp(250px, 48svh, 410px); }
.collection-carousel-controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: var(--ds-space-3); margin-top: var(--ds-space-3); }
.collection-carousel-controls button { min-width: 44px; min-height: 44px; margin: 0; padding: 0; font-size: var(--ds-text-lg); }
.collection-carousel-controls #collection-position { text-align: center; color: #ccc; font-size: var(--ds-text-xs); }
#collection-preview { touch-action: pan-y; }
#collections-detail-view h3 { margin: 16px 0 10px; font-size: 17px; }
#collections-back { width: auto; margin-top: 15px; }
#collections-status:empty { display: none; }
@media (max-width: 600px) {
  #profile-dialog { width: 100%; max-width: 100%; margin-inline: 0; }
  #collections-dialog { width: 100%; max-width: 100%; margin-inline: 0; padding: var(--ds-space-4); }
  #collections-back { display: none; }
  .collection-preview { height: clamp(200px, 40svh, 340px); }
  #collections-detail-view h3 { margin-top: 10px; overflow-wrap: anywhere; }
}
@media (min-width: 720px) {
  .profile-editor { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); align-items: start; }
  .profile-editor .equipment-preview { height: 390px; }
}
@media (max-width: 719px) {
  .profile-editor .equipment-preview { height: 180px; }
}
@media (max-width: 380px) {
  dialog { padding: var(--ds-space-4); }
  th, td { padding: 8px 3px; }
}
tr.is-me { color: var(--ds-accent); background: var(--ds-surface-raised); }
tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--ds-accent); }
body[data-accent="cyan"] { --accent: #64dce9; }
body[data-accent="amber"] { --accent: #f3c16e; }
body[data-accent="violet"] { --accent: #c4a0fb; }
#weekly-collections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-2); }
.weekly-collection-preview { display: flex; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1; padding: 6px; border-radius: var(--ds-radius-control); border: 1px solid #ffffff33; cursor: pointer; color: #ddd; }
.weekly-collection-preview span { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #fff; box-shadow: 0 0 5px #fff8; }
.weekly-collection-preview i { width: 9px; height: 9px; background: var(--particle-color); transform: rotate(25deg); }
.weekly-collection-preview { position: relative; overflow: hidden; isolation: isolate; }
.weekly-collection-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; z-index: -1; }
.weekly-collection-preview[aria-pressed="true"] { border-color: #fff; }
.weekly-collection-preview:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.weekly-collection-pages { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; }
.weekly-collection-pages button { width: auto; min-width: 76px; }
.player-label small, .cosmetic-preview[data-locked="true"] { color: #bfc3c7; opacity: 1; }
#profile-summary:empty, #profile-notice:empty, #account-label:empty { display: none; }
#weekly-collection-detail { font-size: var(--ds-text-base); }
.weekly-collection-preview small { position: absolute; bottom: 5px; font-size: var(--ds-text-sm); background: color-mix(in srgb, var(--ds-bg) 90%, transparent); padding: 3px; color: #fff; }
#collections-detail-view h3 { font-size: var(--ds-text-lg); }
.profile-controls { min-width: 0; }
#classic-best strong { font: inherit; color: #fff; }
#time-attack-connection { grid-column: 1/-1; }
#time-attack-panel .mode-secondary { flex-wrap: wrap; }
#time-attack-notice:empty { display: none; }
body[data-view="results"] .home-modes .mode-card { display: none; }
body[data-view="results"][data-result-mode="classic"] #classic-panel,
body[data-view="results"][data-result-mode="daily"] #daily-panel,
body[data-view="results"][data-result-mode="chaos"] #chaos-panel,
body[data-view="results"][data-result-mode="time-attack"] #time-attack-panel { display: block; }
.rank-eligibility { display: block; color: var(--muted); font-size: var(--ds-text-sm); margin-top: 6px; }
body[data-view="pause"] #saved-results-button, body[data-view="results"] #saved-results-button { display: none; }
body[data-view="results"] .mode-card { padding: 0; background: transparent; border: 0; }
body[data-view="results"] .mode-card > h2, body[data-view="results"] .mode-card > p, body[data-view="results"] #skip-menu-button { display: none; }
body[data-view="results"][data-result-mode="classic"] #daily-panel,
body[data-view="results"][data-result-mode="classic"] #chaos-panel,
body[data-view="results"][data-result-mode="daily"] #classic-panel,
body[data-view="results"][data-result-mode="daily"] #chaos-panel,
body[data-view="results"][data-result-mode="chaos"] #classic-panel,
body[data-view="results"][data-result-mode="chaos"] #daily-panel { display: none; }
body[data-view="results"] .home-modes { display: block; }
body[data-view="results"] .menu-nav { display: none; }
body[data-view="results"] #daily-play:disabled { display: none; }
body[data-view="results"] #daily-deadline:not([hidden]) { display: block; }
.play-demo { margin: 18px 0 24px; padding: 14px; border: 1px solid var(--line); border-radius: var(--ds-radius-panel); }
.play-demo h3 { margin-top: 0; }
#demo-field { display: block; width: 100%; height: 260px; background: #090a0b; border-radius: var(--ds-radius-control); }
#demo-field[data-stage="0"] { cursor: crosshair; }
#demo-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--ds-space-2); padding: 0; font-size: var(--ds-text-sm); color: var(--muted); counter-reset: demo-step; }
#demo-steps li { list-style: none; counter-increment: demo-step; }
#demo-steps li::before { content: counter(demo-step) '. '; }
#demo-steps li[aria-current="step"] { color: var(--ds-accent); font-weight: 700; }
#demo-next { width: 100%; margin-top: var(--ds-space-3); }
#creator-dialog { width: min(940px, calc(100% - 24px)); }
#creator-dialog h3 { margin-bottom: var(--ds-space-2); }
#creator-library { display: grid; gap: var(--ds-space-2); margin: 12px 0; }
.creator-library-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: var(--ds-space-2); border: 1px solid var(--line); border-radius: var(--ds-radius-control); }
.creator-library-row span { flex: 1 1 240px; }
#creator-editor { border-top: 1px solid var(--line); margin-top: var(--ds-space-4); padding-top: 16px; }
#creator-preview { display: flex; justify-content: center; background: #080d12; border-radius: var(--ds-radius-control); max-height: 500px; overflow: hidden; }
#creator-preview canvas { display: block; width: auto; height: min(500px, 55vh); max-width: 100%; }
.creator-controls, #creator-highlights { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); align-items: center; margin: 10px 0; }
#creator-timeline, #creator-progress { display: block; width: 100%; margin: 10px 0; }
.creator-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.creator-fields label { display: grid; gap: var(--ds-space-1); }
.creator-fields input:not([type=checkbox]), .creator-fields select { width: 100%; min-width: 0; }
#creator-file { display: block; max-width: 100%; max-height: 460px; margin: 12px auto; }
#creator-file[hidden] { display: none; }
@media (max-width: 600px) { .creator-fields { grid-template-columns: 1fr; } #creator-dialog { width: 100%; max-width: 100%; } }

/* Home scrolls as one surface when enlarged text or a short screen needs more room. */
body[data-view="home"] .app { grid-template-rows: auto minmax(min-content,1fr) auto; overflow-y: auto; }
body[data-view="home"] .game-wrap { height: auto; overflow: visible; }
body[data-view="home"] #field { display: none; }
body[data-view="home"] .overlay { position: relative; inset: auto; min-height: 100%; overflow: visible; }
/* Home composition: one panel on all viewports. CSS visibility permits result reuse. */
body[data-view="home"] .home-mode-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--ds-space-2); margin-bottom: var(--ds-space-4); }
.home-mode-picker button { padding: var(--ds-space-3); }
body[data-view="home"] .home-modes .mode-card { display: none; }
body[data-view="home"] .home-modes[data-active-mode="classic"] #classic-panel,
body[data-view="home"] .home-modes[data-active-mode="daily"] #daily-panel,
body[data-view="home"] .home-modes[data-active-mode="chaos"] #chaos-panel,
body[data-view="home"] .home-modes[data-active-mode="roguelike"] #roguelike-panel,
body[data-view="home"] .home-modes[data-active-mode="time-attack"] #time-attack-panel,
body[data-view="home"] .home-modes[data-active-mode="custom"] #custom-panel { display: block; }
body[data-view="home"] .home-mode-picker button:last-child { grid-column: auto; }
.custom-power-selector { min-width: 0; margin: var(--ds-space-3) 0; border: 1px solid var(--ds-border); padding: var(--ds-space-3); }
.custom-power-layout { container-type: inline-size; }
.custom-power-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--ds-space-2); }
@container (min-width: calc(10em + 8px)) { .custom-power-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@container (min-width: calc(20em + 24px)) { .custom-power-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
.custom-power-selector .custom-power-option { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: start; gap: var(--ds-space-1); min-width: 44px; min-height: 44px; padding: var(--ds-space-2); background: var(--ds-surface); color: var(--ds-text-muted); transition: none; }
.custom-power-selector .custom-power-option[aria-pressed="true"] { border-color: var(--ds-accent); color: var(--ds-accent); background: color-mix(in srgb,var(--ds-accent) 8%,var(--ds-surface)); }
.custom-power-option:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.custom-power-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; }
.custom-power-icon svg { width: 24px; height: 24px; transition: width var(--ds-motion-fast), height var(--ds-motion-fast); }
.custom-power-option[aria-pressed="true"] svg { width: 32px; height: 32px; }
.custom-power-name { max-width: 100%; overflow-wrap: anywhere; }
.custom-power-check { position: absolute; top: 2px; right: 4px; font-size: 12px; visibility: hidden; }
.custom-power-option[aria-pressed="true"] .custom-power-check { visibility: visible; }
.custom-power-description { margin-top: var(--ds-space-3); color: var(--ds-text-muted); overflow-wrap: anywhere; }
.custom-power-description strong { color: var(--ds-text); }
.custom-power-description p { margin: var(--ds-space-1) 0 0; }
.custom-power-help { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .custom-power-icon svg { transition: none; } }
#custom-difficulty { width: 100%; }
#custom-continue { margin-bottom: var(--ds-space-2); }
.power-chip[data-used="true"] { opacity: .65; }
.power-chip[data-permanent="true"] small { display: none; }
.power-chip[data-used="true"] strong::after { content: ' ✓'; }
body[data-view="home"] .mode-card { border-top: 2px solid var(--ds-accent); }
.mode-progress { color: var(--ds-text); font-variant-numeric: tabular-nums; }
.mode-secondary button:not(.ds-button-danger) { color: var(--ds-text-muted); }
.menu-nav button { gap: var(--ds-space-2); background: transparent; border-color: transparent; color: var(--ds-text-muted); }
.menu-nav button:hover { color: var(--ds-text); border-color: var(--ds-border); }
@media (min-width: 860px) {
  body[data-view="home"] .app { width: min(100%, 720px); }
  body[data-view="home"] :is(.topbar,.game-wrap,.page-footer) { width: 100%; }
  body[data-view="home"] .overlay-card { max-width: 640px; }
  body[data-view="home"] .home-mode-picker { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body[data-view="home"] .home-mode-picker button:last-child { grid-column: auto; }
  body[data-view="home"] .mode-card { padding: var(--ds-space-6); }
  body:is([data-view="home"],[data-view="pause"]) .page-footer .menu-nav { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
/* Component states: shared by application and catalogue. */
button { font-weight: 600; transition: background var(--ds-motion-fast), border-color var(--ds-motion-fast), color var(--ds-motion-fast); }
button:active:not(:disabled) { border-color: var(--ds-accent); }
button[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"]::after { content: '…'; margin-inline-start: var(--ds-space-2); }
.ds-button-primary { color: var(--ds-ink); background: var(--ds-accent); border-color: transparent; min-height: 48px; }
.ds-button-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ds-accent), white 15%); }
.ds-button-quiet, .dialog-header button { background: transparent; border-color: transparent; color: var(--ds-text-muted); }
.ds-button-danger { color: var(--ds-danger); border-color: var(--ds-danger); background: transparent; }
.ds-button-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--ds-danger) 12%, var(--ds-bg)); }
input[aria-invalid="true"] { border-color: var(--ds-danger); }
.ds-field-help { margin: var(--ds-space-2) 0; font-size: var(--ds-text-sm); }
.ds-field-error { color: var(--ds-danger); }
input[type="checkbox"] { width: 24px; min-height: 24px; height: 24px; accent-color: var(--ds-accent); }
label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: var(--ds-space-3); min-height: var(--ds-target); }
.ds-notice { padding: var(--ds-space-3); border: 1px solid var(--ds-border); border-inline-start: 3px solid var(--ds-accent); border-radius: var(--ds-radius-control); color: var(--ds-text); background: var(--ds-surface); }
.ds-notice:empty { display: none; }
.ds-notice[data-tone="success"], .ds-status[data-tone="success"] { border-color: var(--ds-success); }
.ds-notice[data-tone="warning"], .ds-status[data-tone="warning"] { border-color: var(--ds-warning); }
.ds-notice[data-tone="danger"], .ds-status[data-tone="danger"] { border-color: var(--ds-danger); }
.ds-status { display: inline-flex; align-items: center; gap: var(--ds-space-2); padding: 4px 8px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-control); font-size: var(--ds-text-sm); color: var(--ds-text); }
.ds-status::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.badge strong { font-size: var(--ds-text-lg); }
.badge-tier strong { font-size: var(--ds-text-base); }
dialog { box-shadow: 0 24px 80px #0008; }
dialog[open] { animation: ds-panel-in var(--ds-motion-panel); }
@keyframes ds-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
th { color: var(--ds-text-muted); font-weight: 600; }
td:last-child { font-variant-numeric: tabular-nums; }
#settings-form > label:not(.analytics-choice) { margin-top: var(--ds-space-6); }
#result-panel .result-score { font-size: var(--ds-text-display); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* Catalogue layout only: examples use the production components above. */
html:has(body.ds-catalog) { height: auto; overflow: auto; }
body.ds-catalog { height: auto; overflow: visible; }
.ds-catalog main { max-width: 1080px; margin: auto; padding: var(--ds-space-6); }
.ds-catalog header { padding-block: var(--ds-space-8); border-bottom: 1px solid var(--ds-border); }
.ds-catalog h1 { font-size: var(--ds-text-display); letter-spacing: -.04em; margin: 12px 0; }
.ds-catalog h2 { font-size: var(--ds-text-xl); }
.ds-catalog h3 { font-size: var(--ds-text-lg); }
.ds-catalog a { color: var(--ds-accent); text-underline-offset: 4px; }
.ds-catalog nav { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-block: var(--ds-space-4); }
.ds-catalog nav a { min-height: var(--ds-target); display: inline-flex; align-items: center; }
.ds-catalog section { margin-block: var(--ds-space-8); scroll-margin-top: var(--ds-space-4); }
.ds-catalog-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: var(--ds-space-4); }
.ds-catalog-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); }
.ds-catalog-sample { padding: var(--ds-space-4); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-panel); background: var(--ds-surface); min-width: 0; }
.ds-swatch { display: block; height: 64px; border-radius: var(--ds-radius-control); background: var(--swatch); border: 1px solid var(--ds-border); }
.ds-catalog code { color: var(--ds-text-muted); font-size: var(--ds-text-sm); overflow-wrap: anywhere; }
.ds-catalog .play-button { width: auto; margin: 0; }
.ds-catalog .hud-dock { width: 100%; }
.ds-catalog output { display: block; margin-top: var(--ds-space-3); color: var(--ds-text-muted); }
.ds-space-sample { height: 12px; width: var(--space); background: var(--ds-accent); margin-block: 8px; }
.ds-catalog select { max-width: 280px; }
@media (max-width: 600px) { .ds-catalog main { padding: var(--ds-space-4); } }

/* Catalogue HUD specimens have intrinsic height, not the adjacent card height. */
.ds-hud-sample { align-self: start; }
.ds-hud-sample h3 { margin: 0 0 16px; }
.ds-hud-sample .hud-dock { margin: 0; }
.ds-hud-sample .power-strip { margin-top: 16px; gap: 10px; }
.ds-hud-sample .power-group { grid-template-columns: minmax(0,1fr); }
.ds-hud-sample .power-items { flex-wrap: wrap; }
.ds-hud-sample .power-group + .power-group { border: 0; padding: 0; }
.ds-hud-sample .power-group-label { width: 100%; }
@media (max-width: 380px) {
  .hud-dock { gap: 8px; padding-inline: 8px; }
  .turn-stat, .balls-stat { padding-left: 8px; }
  .hud-dock .score-stat { --score-max-font-size: 1.75rem; }
}

.rogue-options { display: grid; gap: 12px; margin-block: 16px; }
.rogue-options button { white-space: normal; min-height: 60px; text-align: left; padding: 12px; }
.rogue-hud { font-size: .85rem; overflow-wrap: anywhere; margin: 4px 8px; }
.rogue-icon { width: 24px; height: 24px; flex: none; vertical-align: middle; }
.hud-dock[data-rogue="true"] { display: block; padding: 4px 8px; overflow: auto; }
.hud-dock[data-rogue="true"] > :not(#rogue-hud) { display: none; }
.hud-dock[data-rogue="true"] #rogue-boss-status:not([hidden]) { display: grid; grid-template-columns: auto minmax(24px,1fr) 20px minmax(24px,.6fr); gap: 6px; align-items: center; margin-top: 6px; font-size: var(--ds-text-xs); }
body[data-view="play"][data-rogue-procedural="true"] .app { --play-hud-height: max(120px,7.5rem); }
#rogue-boss-status .rogue-icon { width: 16px; height: 16px; margin-right: 4px; }
#rogue-boss-status progress { width: 100%; height: 8px; accent-color: var(--ds-accent); }
#rogue-boss-status[data-phase="warning"] .rogue-cycle-symbol { border: 1px solid var(--ds-warning); color: var(--ds-warning); }
#rogue-boss-status[data-phase="open"] .rogue-cycle-symbol { outline: 1px dashed var(--ds-success); color: var(--ds-success); }
#rogue-boss-status[data-phase="active"] .rogue-cycle-symbol { border: 2px solid var(--ds-danger); color: var(--ds-danger); }
.rogue-cycle-symbol { text-align: center; border-radius: 3px; }
.hud-dock #rogue-hud { margin: 0; display: grid; gap: 3px; font-size: var(--ds-text-sm); }
.rogue-map { display: flex; gap: 6px; align-items: center; }
.rogue-map .rogue-icon { width: 18px; height: 18px; }
.rogue-map small { margin-left: auto; white-space: nowrap; }
.rogue-resources { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.rogue-aim { white-space: nowrap; font-weight: 600; }
.rogue-shots { display: flex; gap: 5px; align-items: baseline; border: 2px solid transparent; border-radius: var(--ds-radius-control); padding: 1px 3px; }
.rogue-shots strong { font-size: var(--ds-text-xl); color: var(--ds-accent); }
.rogue-shots .rogue-icon { align-self: center; width: 20px; height: 20px; }
.rogue-hud[data-urgent="true"] .rogue-shots { border-color: #ffb56b; }
.rogue-hearts { display: flex; gap: 4px; color: #ff8d9b; }
.rogue-hearts .filled svg { fill: currentColor; }
.rogue-hearts .empty { color: #b4a0a4; }
#rogue-boss-status .rogue-return-notice { grid-column: 1 / -1; color: var(--ds-accent); padding: 2px 0; font: 600 var(--ds-text-sm)/1.3 var(--ds-font-ui); }
.rogue-hearts > span { position: relative; }
.rogue-heart-fragment { position: absolute; inset: 0; color: #ff8d9b; pointer-events: none; }
.rogue-heart-fragment svg { fill: currentColor; }
.rogue-stages { display: flex; gap: 8px; justify-content: center; }
.rogue-stages span { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--ds-border); border-radius: 50%; font-size: 11px; }
.rogue-stages .rogue-icon { width: 15px; height: 15px; }
.rogue-stages .current { outline: 2px solid var(--ds-accent); }
.rogue-stages .past { background: var(--ds-accent); color: #080a0b; }
#rogue-tools:not([hidden]) { display: flex; justify-content: center; gap: 8px; grid-row: 1; overflow: auto; align-items: start; }
#rogue-tools button, #rogue-reroll { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; }
#rogue-choice, #rogue-info { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
#rogue-choice h2, #rogue-info h2 { margin-block: 0 12px; }
.rogue-options { grid-template-columns: minmax(0,1fr); }
.rogue-choice-card { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 4px; align-items: stretch; }
.rogue-choice-card .rogue-acquire { display: flex; gap: 12px; align-items: center; padding: 16px 12px; min-width: 0; }
.rogue-acquire > .rogue-icon { width: 36px; height: 36px; color: var(--ds-accent); }
.rogue-acquire > span { display: grid; gap: 6px; min-width: 0; }
.rogue-acquire strong { font-size: var(--ds-text-base); }
.rogue-acquire span span { font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.rogue-choice-card .rogue-option-info { padding: 0; min-height: 44px; display: grid; place-items: center; }
.rogue-choice-card p { grid-column: 1/-1; margin: 4px 0 8px; padding: 8px; border-left: 2px solid var(--ds-accent); font-size: var(--ds-text-sm); }
.rogue-choice-card p[hidden] { display: none; }
.rogue-rarity { font-size: var(--ds-text-xs); }
.rogue-rarity[data-rarity="common"] { color: var(--ds-text-muted); }
.rogue-rarity[data-rarity="rare"] { color: #89dfff; }
.rogue-rarity[data-rarity="epic"] { color: #e6b2ff; }
.rogue-inventory-row { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--ds-border); }
.rogue-inventory-row .rogue-icon { grid-row: 1/3; }
.rogue-inventory-row p { margin: 0; }
.rogue-inventory-row p:last-child { color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
#rogue-board-list { padding-inline-start: 30px; }
#rogue-board-list li { padding: 8px; overflow-wrap: anywhere; }

/* Elemental Relics: mode-scoped surfaces preserve shared layout reservations. */
body[data-visual-profile="relics"] { --relic-gold: #e9cb91; }
body[data-visual-profile="relics"] .hud-dock,
body[data-visual-profile="classic-relics"] .hud-dock {
  background: linear-gradient(125deg,#263039,#111920 70%); border-color: #53616b;
  box-shadow: inset 0 1px 0 #ffffff0b,0 4px 14px #0003;
}
body[data-visual-profile="relics"] .hud-dock { border-top-color: var(--relic-element,#e9cb91); }
body[data-visual-profile="relics"] .rogue-map { color: #f5edde; }
body[data-visual-profile="relics"] .rogue-map > .rogue-icon { color: var(--relic-element,#e9cb91); }
body[data-visual-profile="relics"] .rogue-shots strong { color:#f1d7a5; }
body[data-visual-profile="relics"] .rogue-stages .current { outline-color:#e9cb91; background:#3e3526; }
body[data-visual-profile="relics"] .rogue-stages .past { background:#e9cb91; color:#171b21; }
body[data-visual-profile="relics"] #rogue-boss-status progress { accent-color:var(--relic-element,#e9cb91); }
body[data-visual-profile="relics"] #rogue-tools button { background:linear-gradient(#222e37,#151e26); border-color:#52616b; color:#eee8de; }
body[data-visual-profile="relics"] .game-wrap { border-color:#78878b; box-shadow:0 10px 30px #0005; }
#rogue-choice,#rogue-info {
  background:radial-gradient(ellipse at top left,#30313a,#131c24 60%);
  border-color:#8d8066; box-shadow:0 24px 80px #000a,inset 0 1px 0 #f5d59420; color:#f5edde;
}
#rogue-choice h2,#rogue-info h2 { color:#f5edde; letter-spacing:-.025em; }
.rogue-choice-card { --relic-rarity:#c6cbd0; position:relative; animation:relic-card-in 220ms ease-out both; animation-delay:calc(var(--relic-order,0) * 25ms); }
.rogue-choice-card[data-rarity="rare"] { --relic-rarity:#89dfff; }
.rogue-choice-card[data-rarity="epic"] { --relic-rarity:#e6b2ff; }
.rogue-choice-card .rogue-acquire {
  border-color:#66727d; border-left:3px solid var(--relic-rarity);
  background:linear-gradient(115deg,#303b45,#1a252f 65%); color:#f5edde;
  box-shadow:inset 0 1px 0 #ffffff0b; transition:background 180ms,border-color 180ms;
}
.rogue-acquire > .rogue-icon {
  box-sizing:content-box; width:32px; height:32px; padding:10px; border:1px solid #a89873;
  border-radius:12px; background:radial-gradient(#65533a,#27313a); color:#f1d7a5;
  box-shadow:inset 0 0 0 3px #17222b; flex:none;
}
.rogue-choice-card .rogue-acquire:hover:not(:disabled),.rogue-choice-card .rogue-acquire:focus-visible { background:linear-gradient(115deg,#45505b,#26323b); border-color:#f1d7a5; }
.rogue-choice-card .rogue-acquire:active:not(:disabled) > .rogue-icon { animation:relic-select 180ms ease-out; }
.rogue-choice-card .rogue-option-info { color:#d8dfe3; border-color:#66727d; background:#1b2832; }
.rogue-acquire span span,#rogue-choice-summary { color:#c9d1d6; }
.rogue-inventory-row { border-color:#53616b; }
.rogue-inventory-row > .rogue-icon { padding:4px; box-sizing:content-box; color:#f1d7a5; background:#34404a; border-radius:8px; }
.rogue-inventory-row p:last-child { color:#c9d1d6; }
@keyframes relic-card-in { from { opacity:.5; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes relic-select { 50% { transform:scale(1.08); } }
.rogue-relic-art { display:grid!important; place-items:center; width:64px; height:64px; flex:none; position:relative; border:1px solid #a89873; border-radius:12px; background:radial-gradient(#4e4b3a,#17232d); box-shadow:inset 0 0 0 3px #17222b; }
.rogue-relic-art img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 3px #0009); }
.rogue-relic-art > .rogue-icon { display:none; }
.rogue-relic-art.art-unavailable > .rogue-icon { display:block; position:static; width:32px; height:32px; border:0; background:none; }
.rogue-boss-portrait { width:36px; height:28px; flex:none; display:grid; place-items:center; position:relative; border-radius:8px; background:radial-gradient(#64707855,#14202b); border:1px solid var(--relic-element,#a89873); }
.rogue-boss-portrait img { width:40px; height:40px; object-fit:contain; position:absolute; bottom:-3px; filter:drop-shadow(0 0 3px #000); }
.rogue-boss-portrait > .rogue-icon { display:none; }
.rogue-boss-portrait.art-unavailable > .rogue-icon { display:block; }
.rogue-boss-portrait[data-phase="2"] { background:radial-gradient(#e8d59b77,#14202b); box-shadow:0 0 7px var(--relic-element,#a89873); }
.rogue-boss-portrait[data-element="iron"] img { filter:saturate(.25) drop-shadow(0 0 3px #b4c9e7); }
.rogue-boss-portrait[data-element="wind"] img { filter:drop-shadow(0 0 3px #9fdcd5); }
.rogue-inventory-row > .rogue-relic-art { grid-row:1/3; width:44px; height:44px; }
.rogue-inventory-row { grid-template-columns:48px minmax(0,1fr); }
.rogue-inventory-row.rogue-recipe-row { grid-template-columns:minmax(0,1fr); }

/* RUI: option-one reward hierarchy; information is a separate non-modal surface. */
#rogue-choice { box-sizing:border-box; width:min(600px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:16px; background:#101a23; color:#f5edde; }
#rogue-choice h2 { font-size:clamp(1.35rem,5vw,1.75rem); margin:12px 0 6px; }
#rogue-choice-summary { margin:0 0 14px; font-size:.875rem; line-height:1.5; }
#rogue-choice-menu { min-height:44px; }
#rogue-options { display:grid; gap:10px; }
.rogue-reward-card { display:block; --relic-accent:#e9cb91; }
.rogue-reward-card[data-power="poison"] { --relic-accent:#8bcba4; }
.rogue-reward-card[data-power="burn"],.rogue-reward-card[data-power="bomb"] { --relic-accent:#ffbc67; }
.rogue-reward-card[data-power="electric"],.rogue-reward-card[data-power="gust"] { --relic-accent:#70c6ff; }
.rogue-reward-card[data-power="frost"],.rogue-reward-card[data-power="pierce"] { --relic-accent:#a6e4fa; }
.rogue-reward-card[data-power="mark"] { --relic-accent:#cf98ff; }
.rogue-reward-card[data-power="damage"] { --relic-accent:#f59a99; }
.rogue-reward-card .rogue-acquire { display:grid; grid-template-columns:112px minmax(0,1fr); gap:14px; width:100%; min-height:172px; padding:10px; text-align:left; border:1px solid var(--relic-accent); border-radius:14px; background:#101d28; color:#f5edde; }
.rogue-reward-card[data-power="expedition"] .rogue-acquire { grid-template-columns:minmax(0,1fr); min-height:116px; }
#rogue-choice[data-choice-view="expedition"] { width:min(760px,calc(100vw - 24px)); max-width:calc(100% - 24px); max-height:calc(100dvh - 24px); margin:auto; padding:24px; border-color:#b49b65; overflow-y:auto; overscroll-behavior:contain; }
#rogue-choice[data-choice-view="expedition"] h2 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.5rem,4vw,2rem); margin-top:22px; }
#rogue-choice[data-choice-view="expedition"] #rogue-choice-summary { margin-bottom:22px; }
#rogue-choice[data-choice-view="expedition"] .rogue-choice-topbar { container-type:inline-size; }
#rogue-choice[data-choice-view="expedition"] .rogue-choice-brand { font-size:2rem; }
#rogue-choice[data-choice-view="expedition"] #rogue-options { grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:16px; }
.rogue-expedition-card { --route-color:#8bcce5; }
.rogue-expedition-card[data-variant="elite"] { --route-color:#f2bf60; }
.rogue-expedition-card[data-variant="sanctuary"] { --route-color:#8bd4a3; }
#rogue-choice .rogue-expedition-card .rogue-acquire { display:flex; flex-direction:column; align-items:stretch; gap:0; height:100%; min-height:0; padding:0; overflow:hidden; border:1px solid #b49b65; border-radius:14px; background:#101d28; }
#rogue-choice .rogue-expedition-card .rogue-acquire:hover:not(:disabled),#rogue-choice .rogue-expedition-card .rogue-acquire:focus-visible { background:#1a2a36; border-color:#f1d7a5; outline:2px solid var(--route-color); outline-offset:3px; }
.rogue-expedition-art { position:relative; display:block; aspect-ratio:1.9; width:100%; background:#1b303b; }
.rogue-expedition-art img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.rogue-expedition-emblem { display:none; align-items:center; justify-content:center; height:100%; color:var(--route-color); }
.rogue-expedition-art.art-unavailable .rogue-expedition-emblem { display:flex; }
.rogue-expedition-emblem .rogue-icon { width:64px; height:64px; }
#rogue-choice .rogue-expedition-card .rogue-offer-copy { padding:16px 18px 20px; gap:10px; }
#rogue-choice .rogue-expedition-card .rogue-offer-name { padding:0; text-align:center; font-size:1.65rem; line-height:1.2; }
.rogue-expedition-meta { display:flex; justify-content:center; }
.rogue-expedition-variant { padding:4px 8px; border:1px solid var(--route-color); border-radius:6px; color:var(--route-color)!important; font:700 .875rem/1.3 Georgia,'Times New Roman',serif; text-transform:uppercase; letter-spacing:.02em; }
.rogue-expedition-benefits { display:grid; gap:10px; margin-top:6px; padding-top:14px; border-top:1px solid #726347; }
.rogue-expedition-card .rogue-expedition-benefit { display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; align-items:center; text-align:left; font:400 1rem/1.4 var(--ds-font-ui); color:#d7dfe4; }
.rogue-expedition-card .rogue-expedition-benefit > span { font-size:inherit; color:inherit; }
.rogue-expedition-benefit > .rogue-icon { width:24px; height:24px; color:#f1d7a5; }
.rogue-expedition-modifiers { display:flex; flex-wrap:wrap; gap:6px 10px; padding-top:4px; }
.rogue-expedition-chip { display:inline-flex; align-items:center; gap:5px; font:400 .75rem/1.4 var(--ds-font-ui); color:#b9c8d1; }
.rogue-expedition-chip > .rogue-icon { flex:none; width:16px; height:16px; }
#rogue-choice .rogue-expedition-card .rogue-option-info { top:8px; right:8px; background:#101a23; border:1px solid #b49b65; }
@media (max-width:420px) { #rogue-choice[data-choice-view="expedition"] { padding:16px; } .rogue-expedition-art { aspect-ratio:2.8; } }
/* RUI-12: one explicit mobile column and intrinsic card heights. Percent heights
   inside an auto-sized scrolling grid can clip cards on mobile layout engines. */
#rogue-choice[data-choice-view="expedition"] :is(.rogue-expedition-card,.rogue-acquire,.rogue-offer-copy,.rogue-expedition-chip) { min-width:0; max-width:100%; }
#rogue-choice[data-choice-view="expedition"] .rogue-choice-brand { min-width:0; overflow-wrap:anywhere; }
.rogue-expedition-chip > span { min-width:0; overflow-wrap:anywhere; }
@media (max-width:600px), (max-height:500px) and (pointer:coarse) {
 #rogue-choice[data-choice-view="expedition"] { padding:16px; touch-action:pan-y; }
 #rogue-choice[data-choice-view="expedition"] #rogue-options { grid-template-columns:minmax(0,1fr); }
 #rogue-choice[data-choice-view="expedition"] .rogue-expedition-card .rogue-acquire { height:auto; }
 #rogue-choice[data-choice-view="expedition"] .rogue-choice-topbar { position:sticky; top:-16px; z-index:2; padding-block:8px; background:#101a23; }
 #rogue-choice[data-choice-view="expedition"] .rogue-choice-brand { font-size:min(2rem,7vw); line-height:1.15; }
 .rogue-expedition-art { aspect-ratio:2.8; }
}
@container (max-width:12rem) { #rogue-choice[data-choice-view="expedition"] .rogue-choice-brand { visibility:hidden; font-size:0; } }
.rogue-reward-card .rogue-acquire:hover:not(:disabled),.rogue-reward-card .rogue-acquire:focus-visible { background:#253744; border-color:#f1d7a5; }
.rogue-reward-card .rogue-acquire > .rogue-relic-art { width:112px; height:148px; border:0; background:transparent; box-shadow:none; }
.rogue-reward-card .rogue-relic-art img { width:calc(100% + 24px); height:calc(100% + 12px); max-width:none; object-fit:contain; }
.rogue-reward-card .rogue-offer-copy { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; min-width:0; overflow-wrap:anywhere; font-weight:400; }
.rogue-reward-card .rogue-offer-name { font-family:Georgia,'Times New Roman',serif; font-size:1.3rem; font-weight:700; line-height:1.2; padding-right:28px; overflow-wrap:anywhere; }
.rogue-reward-card .rogue-offer-meta { font-size:.8125rem; color:var(--relic-rarity); }
.rogue-reward-card .rogue-offer-label { margin-top:4px; font-size:.875rem; color:#d7dfe4; }
.rogue-reward-card .rogue-offer-gain { font-family:Georgia,'Times New Roman',serif; font-size:1.9rem; line-height:1.1; color:var(--relic-accent); }
.rogue-reward-card .rogue-offer-benefit { font-size:.875rem; line-height:1.4; color:#d7dfe4; }
.rogue-reward-card .rogue-offer-synergy { margin-top:5px; padding-top:5px; border-top:1px solid #52616b; color:#cce9b4; font-size:.875rem; line-height:1.35; }
.rogue-reward-card .rogue-option-info { position:absolute; right:4px; top:4px; width:44px; height:44px; border:0; background:transparent; color:#f1d7a5; border-radius:50%; }
.rogue-option-info > .rogue-icon { width:22px; height:22px; }
#rogue-reroll { margin-top:12px; width:100%; }
.rogue-choice-topbar { display:grid; grid-template-columns:auto minmax(0,1fr) 44px; align-items:center; gap:12px; }
.rogue-choice-brand { text-align:center; font-family:Georgia,'Times New Roman',serif; font-size:1.65rem; font-weight:700; color:#f5e5c4; }
#rogue-choice-help { display:grid; place-items:center; width:44px; height:44px; padding:8px; color:#f1d7a5; }
#rogue-choice-help > .rogue-icon { width:24px; height:24px; }
#rogue-choice[data-choice-view="powers"] { width:min(600px,calc(100vw - 24px)); max-width:calc(100% - 24px); height:fit-content; max-height:calc(100dvh - 24px); margin:auto; padding:16px; border-radius:16px; overflow-y:auto; overscroll-behavior:contain; animation:none; }
#rogue-choice[data-choice-view="powers"] > :not(.rogue-popover) { box-sizing:border-box; width:100%; min-width:0; }
#rogue-choice[data-choice-view="powers"] h2 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.35rem,5vw,1.75rem); line-height:1.15; margin-top:16px; margin-bottom:8px; }
#rogue-choice[data-choice-view="powers"] #rogue-choice-summary { font-size:1rem; margin-bottom:18px; }
#rogue-choice[data-choice-view="powers"] .rogue-acquire { border-width:2px; box-shadow:inset 0 0 16px #ffffff04,0 0 10px color-mix(in srgb,var(--relic-accent) 15%,transparent); }
#rogue-choice[data-choice-view="powers"] #rogue-reroll { display:flex; min-height:48px; color:#f1d7a5; border-color:#b49b65; font-size:1rem; }
.rogue-reward-card .rogue-offer-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.rogue-reward-card .rogue-offer-rarity { padding:2px 6px; border:1px solid var(--relic-rarity); border-radius:6px; background:color-mix(in srgb,var(--relic-rarity) 12%,transparent); color:var(--relic-rarity); }
.rogue-reward-card .rogue-offer-benefit:has(.rogue-icon),.rogue-reward-card .rogue-offer-synergy { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:start; gap:7px; }
.rogue-reward-card .rogue-offer-benefit > .rogue-icon,.rogue-reward-card .rogue-offer-synergy > .rogue-icon { width:20px; height:20px; color:var(--relic-accent); }
.rogue-reward-card .rogue-offer-benefit > span,.rogue-reward-card .rogue-offer-synergy > span { color:inherit; font-size:inherit; }
#rogue-info.rogue-popover { box-sizing:border-box; position:fixed; inset:auto; margin:0; width:min(320px,calc(100vw - 24px)); max-height:45dvh; overflow:auto; overscroll-behavior:contain; padding:12px; color:#f5edde; background:#14212c; border:1px solid #b49b65; border-radius:12px; box-shadow:0 4px 16px #0005; font-size:.875rem; line-height:1.5; }
#rogue-info.rogue-popover::backdrop { background:transparent; pointer-events:none; }
#rogue-info.rogue-popover .dialog-header { display:flex; align-items:start; justify-content:space-between; gap:8px; position:sticky; top:-12px; padding:4px 0; background:#14212c; }
#rogue-info.rogue-popover h2 { font-size:1rem; line-height:1.35; margin:8px 0; }
#rogue-info-close { flex:none; min-width:44px; min-height:44px; font-size:.8125rem; }
#rogue-info-content p { margin:8px 0; }
#rogue-info-content summary { cursor:pointer; min-height:44px; padding:10px 0; font-weight:700; }
#rogue-info-content details { border-bottom:1px solid #52616b; }
@media (min-width:768px) { .rogue-reward-card .rogue-acquire { grid-template-columns:144px minmax(0,1fr); min-height:184px; } .rogue-reward-card .rogue-acquire > .rogue-relic-art { width:144px; height:164px; } }
@media (max-width:360px) { .rogue-reward-card .rogue-acquire { grid-template-columns:88px minmax(0,1fr); } .rogue-reward-card .rogue-acquire > .rogue-relic-art { width:88px; } }
.rogue-entry-art { height:140px; position:relative; overflow:hidden; margin-block:12px 16px; border:1px solid #738087; border-radius:12px; background:linear-gradient(120deg,#223e37,#17232d); }
.rogue-entry-scene { position:absolute; inset:0; opacity:0; transition:opacity .8s ease-in-out; }
.rogue-entry-scene.is-active { opacity:1; }
.rogue-entry-background { width:100%; height:100%; object-fit:cover; object-position:center 45%; opacity:.85; }
.rogue-entry-scene::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#07141055,transparent,#07141044); pointer-events:none; }
.rogue-entry-guardian { position:absolute; z-index:1; inset-block:6%; inset-inline-end:4%; width:58%; height:88%; object-fit:contain; object-position:center; }
.rogue-entry-scene[data-side="left"] .rogue-entry-guardian { inset-inline-end:auto; inset-inline-start:4%; }
.rogue-art-credits { font-size:.75rem; color:var(--ds-text-muted); }
.rogue-art-credits a { color:inherit; text-underline-offset:3px; }
#rogue-info .dialog-header { position:sticky; top:-16px; z-index:1; background:#18232c; padding-block:8px; border-bottom:1px solid #53616b; gap:12px; }
#rogue-info .dialog-header h2 { margin:0; }
.ds-realm-art { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; }
.ds-boss-art { width:100%; height:180px; object-fit:contain; background:radial-gradient(#384857,#121b24); border-radius:8px; }
.ds-relic-gallery { display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:360px) { .rogue-acquire > .rogue-icon { padding:6px; width:28px; height:28px; } }
@media (prefers-reduced-motion:reduce) { .rogue-choice-card,.rogue-acquire > .rogue-icon { animation:none!important; } }

/* Arena has its own view and simulation. Legacy canvas remains mounted. */
body[data-view="home"] .home-modes[data-active-mode="arena"] #arena-panel { display:block; }
body.arena-active .game-stage, body.arena-active .hud-dock, body.arena-active .page-footer, body.arena-active .topbar { display:none; }
#arena-stage { width:min(100%,900px); height:100dvh; margin:auto; padding:6px max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); box-sizing:border-box; display:flex; flex-direction:column; gap:4px; background:#000; }
.arena-heading { flex:0 0 auto; }
#arena-room-info { margin:0 0 4px; font-size:.75rem; color:#bdd4d6; }
#arena-status { font-size:.875rem; }
#arena-stats { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.875rem; font-variant-numeric:tabular-nums; }
.arena-hud { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.arena-hud-chip { display:inline-flex; gap:4px; align-items:center; }
.arena-hud-chip svg { width:18px; height:18px; }
.arena-hud-chip[data-kind="combined"] { color:#ffd36a; }
#arena-menu-button,#arena-shoot { min-width:44px; min-height:44px; padding:6px; }
#arena-objective { margin:0; font-size:.8rem; color:#cce8ae; }
.arena-heading { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:space-between; }
#arena-field { display:block; width:100%; flex:1 1 auto; min-height:120px; height:0; border:1px solid #46535b; border-radius:12px; touch-action:none; }
.arena-explanation { font-size:.8rem; color:#bdc9d0; }
#arena-standings { columns:2; list-style:none; padding-left:8px; }
#arena-rewards { font-size:.9rem; }
@media (max-width:600px), (pointer:coarse) { #arena-room-info { display:none; } #arena-objective { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } #arena-standings { columns:1; } }
#arena-menu { max-width:min(32rem,calc(100vw - 24px)); max-height:85dvh; overflow:auto; }
#arena-result { margin:0; font-size:.8rem; }
#arena-connection { margin:0; font-size:.8rem; color:#ffc97b; }
#arena-invite { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
#arena-invite[hidden] { display: none; }
#arena-link { flex: 1 1 12rem; min-width: 0; max-width: 100%; }
#arena-code { max-width: 100%; box-sizing: border-box; }
#arena-preview { max-width: min(30rem, calc(100vw - 3rem)); }

body.arena-active,body.arena-active .app { background:#000; }
body.arena-active .app { display:block; width:min(100%,900px); overflow-y:auto; overflow-x:hidden; padding:0; }

#arena-results { width:min(32rem,calc(100% - 24px)); max-height:calc(100dvh - 24px); margin:auto; }
#arena-results h2 { margin:0 0 12px; }
#arena-final-standings { max-height:35dvh; overflow-y:auto; padding-inline-start:2.5em; }
#arena-final-standings li { padding:6px 4px; }
#arena-final-standings li[aria-current="true"] { color:#ffd88c; font-weight:700; }
#arena-results-leave { min-height:44px; margin-top:12px; }
#arena-personal-result { font-weight:700; }

#arena-xp-bar,#arena-result-xp-bar { width:100%; height:12px; accent-color:#ffd88c; }
#arena-next-reward { color:var(--ds-text-muted); }
#arena-roadmap { width:min(34rem,calc(100% - 24px)); margin:auto; border-radius:var(--ds-radius-dialog); }
#arena-rewards { list-style:none; padding:0; display:grid; gap:12px; }
#arena-rewards li { display:flex; gap:12px; align-items:center; border:1px solid var(--ds-border); border-radius:12px; padding:12px; }
#arena-rewards li[data-state="next"] { border-color:#ffd88c; background:#ffd88c0a; }
#arena-rewards li[data-state="unlocked"] { border-color:#74e8c2; }
.arena-reward-icon { display:block; flex:0 0 48px; width:48px; height:48px; object-fit:contain; }
.arena-reward-copy { min-width:0; display:grid; gap:4px; }
.arena-reward-copy small { color:var(--ds-text-muted); }
#arena-result-progress { margin-block:12px; }
#arena-result-level,#arena-level-up { margin-block:6px; font-size:.875rem; }
#arena-level-up { color:#ffd88c; }

/* Selected Direct Play Hub: setup only; gameplay and dialogs retain their styles. */
.menu-picker-title,.menu-hero-art,.menu-kicker,.menu-summary,.menu-mode-details { display:none; }
.menu-hero,.menu-hero-copy,.menu-primary-actions { display:contents; }
body[data-view="results"] .menu-hero-copy > h2 { display:none; }
body[data-view="home"] .app { width:min(100%,760px); padding-inline:max(12px,env(safe-area-inset-left)); }
body[data-view="home"] .topbar { width:100%; padding-block:4px; }
body[data-view="home"] .brand { font-size:1.75rem; letter-spacing:-.045em; }
body[data-view="home"] #menu-button { background:transparent; border-color:transparent; color:var(--ds-text-muted); }
body[data-view="home"] :is(.game-stage,.game-wrap,.page-footer) { width:100%; }
body[data-view="home"] .overlay-card { max-width:680px; }
body[data-view="home"] .overlay { padding:16px 0 8px; }
body[data-view="home"] .home-heading h1 { margin:0 0 8px; font-size:clamp(1.75rem,8vw,2.375rem); letter-spacing:-.04em; }
body[data-view="home"] .menu-intro { margin:0 0 18px; font-size:0.9375rem; }
body[data-view="home"] .mode-card { padding:0; border:0; background:transparent; }
body[data-view="home"] .menu-hero { display:grid; grid-template-columns:minmax(84px,38%) minmax(0,1fr); gap:12px; align-items:center; padding:16px 12px 12px; border:1px solid #505565; border-radius:14px; background:#111315 url('/assets/modes/hero-backdrop.webp') left center/cover no-repeat; overflow:hidden; }
body[data-view="home"] .menu-hero-art { display:block; width:100%; height:auto; max-height:156px; object-fit:contain; }
body[data-view="home"] .menu-hero-copy { display:block; min-width:0; }
body[data-view="home"] .menu-kicker { display:block; color:#bcc0cc; font-size:0.6875rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 4px; }
body[data-view="home"] .menu-hero h2 { font-size:clamp(1.3125rem,6vw,1.875rem); margin:0 0 6px; }
body[data-view="home"] .menu-summary { display:block; margin:0 0 10px; font-size:0.8125rem; line-height:1.45; color:#c8cbd4; }
body[data-view="home"] .menu-primary-actions { display:flex; flex-direction:column; gap:6px; }
body[data-view="home"] .menu-primary-actions .play-button { min-height:46px; margin:0; padding:10px 8px; border:1px solid #ffdc75; border-radius:9px; background:#ffb51c; color:#171206; font-size:0.875rem; font-weight:750; }
body[data-view="home"] .menu-primary-actions .play-button:hover:not(:disabled) { background:#ffc443; }
body[data-view="home"] .menu-primary-actions .play-button:disabled { background:#343338; color:#b6b3b9; border-color:#535158; }
body[data-view="home"] .menu-room-actions { display:flex; grid-column:1/-1; gap:8px; justify-content:flex-end; margin-top:2px; }
body[data-view="home"] .menu-room-actions > button { flex:1; padding:8px; background:#14171d; border-color:#505565; font-size:0.75rem; }
#menu-invite-field { grid-column:1/-1; }
#menu-invite-field label { display:block; margin-bottom:6px; }
#menu-invite-field input { width:100%; }
body[data-view="home"] .menu-arena-progress { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 10px; align-items:center; padding:10px 12px; margin-top:8px; border:1px solid #3c424e; border-radius:12px; background:#111315; }
body[data-view="home"] #arena-progress { grid-column:1; margin:0; font-size:0.75rem; color:#e5e5e7; line-height:1.35; }
body[data-view="home"] #arena-xp-bar { grid-column:1; height:8px; }
body[data-view="home"] #arena-roadmap-open { grid-column:2; grid-row:1/span 2; border:0; background:transparent; color:#c9cbd5; padding:6px 0; min-width:0; font-size:0.75rem; }
body[data-view="home"] #arena-next-reward { grid-column:1/-1; margin:0; font-size:0.6875rem; }
body[data-view="home"] .menu-mode-details { display:block; margin:8px 0; font-size:0.75rem; }
body[data-view="home"] .menu-mode-details summary { color:#bcc1cd; cursor:pointer; padding-block:8px; }
body[data-view="home"] .menu-mode-details p { font-size:0.8125rem; }
body[data-view="home"] .menu-picker-title { display:block; font-size:1.3125rem; margin:14px 0 10px; letter-spacing:-.02em; }
body[data-view="home"] .home-mode-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:0; }
body[data-view="home"] .home-mode-picker button { position:relative; display:flex; align-items:center; text-align:left; gap:8px; padding:9px 8px; min-height:62px; background:#11151b; border:1px solid #343b47; border-radius:12px; font-size:0.75rem; font-weight:650; }
body[data-view="home"] .home-mode-picker button img { display:block; flex:0 0 48px; width:48px; height:48px; object-fit:contain; }
body[data-view="home"] .home-mode-picker button span { min-width:0; }
body[data-view="home"] .home-mode-picker button[aria-pressed="true"] { border:2px solid var(--menu-accent); padding:5px 7px; background:#211c30; }
body[data-view="home"] .page-footer { border-top:1px solid #303541; margin-top:16px; padding-top:10px; }
body[data-view="home"] .page-footer .menu-nav { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
body[data-view="home"] .page-footer .menu-nav button { min-width:0; padding:5px 2px; font-size:0.625rem; background:transparent; border-color:transparent; }
body[data-view="home"] .page-footer .menu-nav svg { width:24px; height:24px; }
@media (min-width:650px) {
 body[data-view="home"] .app { padding-inline:24px; }
 body[data-view="home"] .menu-hero { padding:24px; gap:20px; }
 body[data-view="home"] .menu-hero-art { max-height:190px; }
 body[data-view="home"] .menu-summary { font-size:1rem; }
 body[data-view="home"] .menu-primary-actions .play-button { min-height:52px; font-size:1rem; }
 body[data-view="home"] .home-mode-picker button { min-height:76px; font-size:0.9375rem; padding:12px; }
 body[data-view="home"] .home-mode-picker button img { width:48px; height:48px; flex-basis:48px; }
 body[data-view="home"] .page-footer .menu-nav button { font-size:0.75rem; }
}

/* Keep navigation available while longer setup forms scroll in the content track. */
body[data-view="home"] .app { grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; }
body[data-view="home"] .game-wrap { height:100%; min-height:0; overflow-y:auto; overflow-x:hidden; }
body[data-view="home"] .overlay { min-height:0; padding-top:8px; }
body[data-view="home"] .menu-intro { margin-bottom:12px; }
body[data-view="home"] .menu-arena-progress { padding:8px 10px; gap:3px 10px; }
body[data-view="home"] .menu-picker-title { margin-top:12px; }
body[data-view="home"] .home-mode-picker button { font-size:0.875rem; min-height:62px; padding-block:6px; }
body[data-view="home"] .page-footer { margin-top:8px; padding-top:8px; }
body[data-view="home"] .page-footer .menu-nav button { font-size:0.75rem; }
.menu-mode-help { display:none; }
body[data-view="home"] .menu-mode-help { display:block; }

body[data-view="home"] .overlay { padding-top:0; }
body[data-view="home"] #arena-roadmap-open { grid-row:1/span 3; }
body[data-view="home"] #arena-next-reward { grid-column:1; }
body[data-view="home"] .menu-summary { font-size:0.875rem; }
body[data-view="home"] .menu-room-actions > button { font-size:0.875rem; }

body[data-view="home"] .menu-picker-title { margin-top:8px; }
#menu-invite-field > button { width:100%; margin-top:8px; }

/* Internal menus extend the approved minimal profile surface. */
:root { --ux-accent:#ffbd35; --ux-surface:#0b0d10; --ux-line:#30343c; }
dialog.ux-panel { width:min(560px,calc(100% - 32px)); max-width:calc(100% - 32px); padding:24px; color:#f4f4f5; background:var(--ux-surface); border:1px solid var(--ux-line); }
.ux-panel .dialog-header { position:sticky; top:-24px; z-index:4; margin:0 0 16px; padding:12px 0; background:var(--ux-surface); flex-wrap:wrap; }
.ux-panel .dialog-header h2 { font-size:clamp(1.35rem,4vw,1.75rem); letter-spacing:-.03em; }
.ux-panel .dialog-header button { min-height:44px; min-width:44px; padding:8px; }
.ux-panel .dialog-header > button, .profile-panel .dialog-header > button { margin-left:auto; }
.ux-panel p { color:#acb2be; font-size:.875rem; line-height:1.55; }
.ux-panel h3 { margin:16px 0; font-size:1rem; }
.ux-panel :is(input,select,textarea) { max-width:100%; min-width:0; }
.ux-panel :is(button,input,select,summary):focus-visible { outline:2px solid var(--ux-accent); outline-offset:2px; }
.ux-panel :is(select,input:not([type="checkbox"]):not([type="range"]),textarea) { background:#101317; border-color:#424852; }
.ux-section { margin-block:0 20px; }
.ux-group { border:0; border-top:1px solid var(--ux-line); border-radius:0; margin:0; padding:0; background:transparent; }
.ux-group > summary { min-height:56px; padding:16px 0; cursor:pointer; color:#f4f4f5; font-size:1rem; font-weight:600; }
.ux-group[open] { padding-bottom:16px; }
.ux-group .ux-group { margin-top:12px; }
.ux-panel :is(.ux-section,.ux-group) > label:not(.analytics-choice) { display:block; margin:16px 0 8px; color:#b6bbc6; font-size:.875rem; }
.ux-panel input[type="range"] { min-height:44px; accent-color:var(--ux-accent); margin-block:0; }
.ux-panel .analytics-choice { margin:8px 0; min-height:44px; align-items:center; }
.ux-panel .analytics-choice input { flex:0 0 24px; }
.ux-panel .ux-caption { font-size:.8125rem; }
/* Action hierarchy and compact information across pause/results and auxiliaries. */
body[data-view="pause"] .page-footer .menu-nav { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
body[data-view="pause"] .page-footer .menu-nav button { background:transparent; border-color:transparent; font-size:.75rem; padding-inline:2px; }
body[data-view="pause"] #daily-notice { border:0; border-left:2px solid var(--ux-accent); border-radius:0; background:transparent; padding:8px 12px; }
body[data-view="pause"] #pause-panel { max-width:420px; margin:0 auto; }
body[data-view="pause"] .overlay-card > #creator-button { width:100%; margin-top:8px; background:transparent; border-color:var(--ux-line); }
body[data-view="pause"] #pause-panel > button:not(.play-button):not(.ds-button-danger) { background:transparent; border-color:var(--ux-line); color:#bcc1cd; }
body[data-view="results"] .app { display:grid; grid-template-rows:auto minmax(0,1fr); width:min(100%,560px); }
body[data-view="results"] .game-wrap { width:100%; height:100%; min-height:0; }
body[data-view="results"] .game-stage { display:contents; }
body[data-view="results"] .overlay { overflow-y:auto; padding:24px 4px; }
body[data-view="results"] .overlay-card { max-width:460px; }
body[data-view="results"] #result-panel h1 { font-size:clamp(1.75rem,6vw,2rem); }
body[data-view="results"] #result-title:focus-visible { outline:2px solid var(--ux-accent); outline-offset:4px; }
body[data-view="results"] #result-panel .result-score { color:var(--ux-accent); font-size:clamp(2rem,8vw,2.75rem); }
body[data-view="results"] #result-panel > button { width:100%; min-height:44px; margin:4px 0; }
body[data-view="results"] #daily-result { border:0; border-left:2px solid var(--ux-accent); border-radius:0; padding:8px 12px; background:transparent; }
body[data-view="results"] #daily-result:empty { display:none; }
body[data-view="results"] :is(.menu-primary-actions .play-button,#result-login) { color:#15110a; background:var(--ux-accent); border-color:var(--ux-accent); font-weight:700; }
body[data-view="results"] :is(.menu-context,.menu-kicker,.menu-summary,.menu-options) { display:none; }
body[data-view="results"] :is(#time-attack-last,#time-attack-board,#chaos-last,#creator-button) { display:none; }
body[data-view="results"] .menu-primary-actions .play-button:disabled { background:#30343c; color:#aeb3bf; border-color:#424852; }
#arena-results.ux-panel #arena-winner { color:#f4f4f5; font-size:1.125rem; font-weight:700; }
#arena-results.ux-panel #arena-final-standings { margin-block:16px; border-block:1px solid var(--ux-line); padding-block:8px; }
#arena-results.ux-panel #arena-final-standings li { padding-block:10px; font-size:.875rem; }
#arena-results.ux-panel #arena-final-standings li[aria-current="true"] { color:var(--ux-accent); }
#arena-results.ux-panel #arena-result-progress { border-top:1px solid var(--ux-line); padding-top:12px; }
#arena-results.ux-panel #arena-results-leave { width:100%; background:transparent; color:#bcc1cd; }
#arena-roadmap.ux-panel #arena-rewards { gap:0; }
#arena-roadmap.ux-panel #arena-rewards li { border:0; border-top:1px solid var(--ux-line); border-radius:0; padding:14px 0; background:transparent; }
#arena-roadmap.ux-panel #arena-rewards li[data-state="next"] { border-left:2px solid var(--ux-accent); padding-left:12px; }
#arena-menu.ux-panel #arena-menu-close { width:100%; color:#15110a; background:var(--ux-accent); font-weight:700; }
#arena-menu.ux-panel #arena-leave { width:100%; margin-top:8px; background:transparent; }
#arena-preview.ux-panel > button, #rogue-cancel-dialog.ux-panel > button { width:100%; margin-top:8px; }
#arena-preview.ux-panel #arena-preview-confirm, #rogue-cancel-dialog.ux-panel #rogue-cancel-back { color:#15110a; background:var(--ux-accent); border-color:var(--ux-accent); font-weight:700; }
#creator-dialog.ux-panel .creator-library-row { border:0; border-top:1px solid var(--ux-line); border-radius:0; padding:12px 0; }
#creator-dialog.ux-panel .creator-controls button { flex:1; }
#creator-dialog.ux-panel .creator-fields { gap:12px 20px; }
#creator-dialog.ux-panel .creator-fields input[type="checkbox"] { width:24px; min-height:24px; }
#creator-dialog.ux-panel .creator-fields label:has(input[type="checkbox"]) { display:flex; align-items:center; min-height:44px; }
#creator-dialog.ux-panel #creator-export { width:100%; min-height:48px; }
#creator-dialog.ux-panel #creator-progress { accent-color:var(--ux-accent); }
#rogue-info.ux-panel .dialog-header { background:var(--ux-surface); border-color:var(--ux-line); }
#rogue-info.ux-panel { background:var(--ux-surface); border-color:var(--ux-line); }
/* Keep the existing fixed gameplay tracks and Canvas dimensions. */
body[data-view="play"] .hud-dock:not([data-rogue="true"]) { background:#0d1013; border-color:#30343c; border-radius:8px; }
body[data-view="play"] :is(#menu-button,#sound-button) { background:transparent; border-color:#30343c; }
body[data-view="play"] .stat-label { color:#b6bbc6; }
body[data-view="play"] .instructions { font-size:.8125rem; color:#b6bbc6; }
body[data-view="play"] #recall-button { min-height:44px; padding:8px 12px; border-color:#6a5733; color:#ffcf70; background:#19150f; }
body[data-view="play"] .first-aim-guide:not([hidden]) { bottom:24%; border-radius:8px; font-size:.8125rem; }
#arena-stats { gap:8px 12px; line-height:1.5; }
.arena-hud-chip { min-height:24px; }
#arena-shoot { border-color:#c49536; color:#15110a; background:var(--ux-accent); min-width:44px; min-height:44px; }
#arena-connection:not([hidden]) { padding:8px 12px; border-left:2px solid var(--ux-accent); background:#19150f; }
@media (max-width:600px) { :is(#arena-roadmap,#arena-results,#arena-menu,#arena-preview,#rogue-info).ux-panel { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; } }
#leaderboard-dialog .mode-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-bottom:1px solid var(--ux-line); margin:0 0 20px; }
#leaderboard-dialog .mode-tabs button { flex:1 1 5.5em; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:#aeb3bf; padding:12px 6px; }
#leaderboard-dialog .mode-tabs button[aria-pressed="true"] { color:#fff; border-bottom-color:var(--ux-accent); box-shadow:none; }
.ux-filter-label { margin-bottom:4px; }
.board-filters { display:flex; flex-wrap:wrap; gap:12px; }
.board-filters > div { flex:1 1 160px; min-width:0; }
.board-filters > div:not(:has(select:not([hidden]))) { display:none; }
.board-filters label { display:block; margin:0 0 8px; font-size:.875rem; color:#aeb3bf; }
#leaderboard-dialog .board-view-tabs { margin:20px 0 12px; gap:0; border-bottom:1px solid var(--ux-line); }
#leaderboard-dialog .board-view-tabs button { background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0; color:#aeb3bf; }
#leaderboard-dialog .board-view-tabs button[aria-pressed="true"] { border-bottom-color:var(--ux-accent); color:#fff; }
#leaderboard-dialog :is(#top-board,#nearby-board) { max-width:100%; overflow:auto; scrollbar-width:thin; }
#leaderboard-dialog table { width:100%; border-collapse:collapse; font-size:.875rem; }
#leaderboard-dialog :is(th,td) { padding:12px 8px; border-bottom:1px solid #252a31; }
#leaderboard-dialog th { color:#aeb3bf; font-size:.75rem; font-weight:500; }
#leaderboard-dialog tr.is-me { background:#ffbd3510; color:#ffcf70; }
#leaderboard-dialog tr.is-me td:first-child { border-left:2px solid var(--ux-accent); }
#leaderboard-dialog .player-label { white-space:normal; overflow-wrap:anywhere; }
#leaderboard-dialog #board-help { border:0; border-top:1px solid var(--ux-line); border-radius:0; margin-top:16px; padding:0; }
#leaderboard-dialog #board-help summary { padding-block:14px; min-height:44px; cursor:pointer; }
body[data-view="home"] .menu-context { margin-top:8px; }
body[data-view="home"] .menu-context p { margin:4px 0; font-size:.8125rem; line-height:1.5; }
body[data-view="home"] .menu-context:empty, body[data-view="home"] .menu-context p:empty { display:none; }
body[data-view="home"] .menu-context .ds-notice { padding:4px 0; border:0; background:transparent; color:#f1ca80; }
body[data-view="home"] .menu-options { margin:16px 0; border:0; border-top:1px solid var(--ux-line); border-bottom:1px solid var(--ux-line); border-radius:0; padding:0 0 8px; }
body[data-view="home"] .menu-options summary { min-height:48px; padding-block:12px; cursor:pointer; font-weight:600; }
body[data-view="home"] .menu-options label { font-size:.875rem; }
body[data-view="home"] .menu-options fieldset { margin:16px 0; padding:0; border:0; }
body[data-view="home"] #custom-powers .custom-power-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
body[data-view="home"] #custom-powers legend { margin-bottom:12px; color:#acb2be; font-size:.875rem; }
body[data-view="home"] #custom-powers button { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; min-height:48px; min-width:0; background:transparent; border-color:#30343c; }
body[data-view="home"] #custom-powers button[aria-pressed="true"] { border-color:var(--ux-accent); background:#ffbd3510; box-shadow:none; color:#ffcf70; }
body[data-view="home"] #custom-powers button svg { width:20px; height:20px; }
body[data-view="home"] #custom-powers .custom-power-icon { width:24px; height:24px; }
body[data-view="home"] .menu-mode-details { border-top:1px solid #252a31; padding-top:4px; }
@media (min-width:600px) { #leaderboard-dialog .mode-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); } }
#help-dialog .play-demo { border:0; border-radius:0; padding:0; background:transparent; }
#help-dialog #demo-field { height:220px; max-height:32dvh; }
#help-dialog .help-powers { border:0; border-top:1px solid var(--ux-line); padding:0; margin-top:16px; }
#help-dialog .help-powers summary { min-height:44px; padding-block:12px; cursor:pointer; }
#help-dialog .chaos-guide { border:0; padding:0; }
#help-dialog #chaos-guide-title { scroll-margin-top:90px; }
.ux-save { position:sticky; z-index:3; bottom:-24px; padding:12px 0; background:var(--ux-surface); }
.ux-save > button { width:100%; min-height:48px; }
.ux-save .ds-notice:empty { display:none; }
.ux-panel .ds-notice { border:0; border-left:2px solid var(--ux-accent); border-radius:0; padding:8px 12px; background:transparent; }
.ux-panel :is(.ds-button-primary,.play-button), #pause-panel #resume-button { color:#15110a; background:var(--ux-accent); border-color:var(--ux-accent); font-weight:700; }
.ux-panel :is(.ds-button-primary,.play-button):hover:not(:disabled), #pause-panel #resume-button:hover { background:#ffca5c; }
.ux-panel :is(.ds-button-primary,.play-button):disabled { color:#aeb3bf; background:#30343c; border-color:#424852; }
@media (max-width:600px) {
 dialog.ux-panel { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; padding:16px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); border:0; border-radius:0; }
 .ux-panel .dialog-header { top:-16px; }
 .ux-save { bottom:calc(-1 * max(16px,env(safe-area-inset-bottom))); padding-bottom:max(12px,env(safe-area-inset-bottom)); }
}

/* Profile option 3: quiet shared surface, flat lists and native selectors. */
:is(#profile-dialog,#mastery-dialog,#collections-dialog).profile-panel { --profile-accent:#ffbd35; width:min(560px,calc(100% - 32px)); max-width:calc(100% - 32px); padding:24px; background:#0b0d10; border-color:#30343c; color:#f4f4f5; }
.profile-panel .dialog-header { position:static; padding:0; margin:0 0 8px; background:#0b0d10; }
.profile-panel .profile-navigation { position:sticky; top:-24px; z-index:3; display:flow-root; background:#0b0d10; }
.profile-panel .dialog-header h2 { font-size:1.75rem; letter-spacing:-.03em; }
.profile-panel .dialog-header button { min-width:44px; min-height:44px; padding:8px; font-size:0.875rem; }
.profile-panel .player-tabs { display:grid; grid-template-columns:repeat(3,minmax(max-content,1fr)); gap:0; margin:0 0 8px; border-bottom:1px solid #30343c; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
.profile-panel .player-tabs button { min-height:44px; padding:8px 4px; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; box-shadow:none; color:#aeb3bf; font-size:0.9375rem; font-weight:600; white-space:nowrap; }
.profile-panel .player-tabs button[aria-pressed="true"] { color:#fff; border-bottom-color:var(--profile-accent); background:transparent; box-shadow:none; }
.profile-panel .player-tabs button:focus-visible { outline:2px solid var(--profile-accent); outline-offset:-3px; }
.profile-panel p { color:#acb2be; line-height:1.5; font-size:0.875rem; }
.profile-panel:has(#profile-form:not([hidden])) #account-label { display:none; }
.profile-panel .profile-editor { display:block; }
.profile-panel .profile-editor > label { margin:0 0 8px; font-size:0.875rem; color:#b6bbc6; }
.profile-panel #nickname { width:100%; min-height:44px; padding:8px 14px; background:transparent; border:1px solid #424852; border-radius:8px; font-size:1.125rem; }
.profile-panel .profile-preview-title { margin:12px 0 8px; }
.profile-panel .profile-editor .equipment-preview { height:142px; border:1px solid #424852; border-radius:8px; }
.profile-panel #equipment-preview-label { bottom:6px; left:8px; padding:3px 5px; font-size:0.6875rem; }
.profile-panel #equipment-preview-label .player-label { font-size:0.75rem; }
.profile-panel #cosmetic-selectors { margin-top:16px; }
.profile-panel .profile-group { margin:0; border-top:1px solid #30343c; }
.profile-panel .profile-group summary { position:relative; cursor:pointer; min-height:64px; padding:10px 24px 10px 4px; }
.profile-panel .profile-group summary strong { font-size:1rem; }
.profile-panel .profile-group summary small { display:block; margin:3px 0 0 16px; color:#aeb3bf; font-size:0.8125rem; }
.profile-panel .profile-group-count { position:absolute; right:24px; top:16px; color:#aeb3bf; font-size:0.75rem; }
.profile-panel .profile-group summary strong { display:inline-block; max-width:calc(100% - max(80px,3rem)); vertical-align:top; }
.profile-panel .cosmetic-selector { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:center; gap:12px; min-height:44px; margin:0; border-top:1px solid #252a31; }
.profile-panel .cosmetic-selector label { margin:0; font-size:0.875rem; font-weight:600; }
.profile-panel .cosmetic-selector select { width:100%; min-width:0; min-height:44px; padding:6px 4px; font-size:0.875rem; text-align:right; color:#c2c7d0; background:transparent; border:0; border-radius:0; text-overflow:ellipsis; }
.profile-panel .cosmetic-selector select option { color:#f4f4f5; background:#14171c; }
.profile-panel .cosmetic-selector select:disabled { opacity:1; color:#949ba7; }
.profile-panel .profile-preview-hint { margin:16px 0 8px; font-size:0.8125rem; }
.profile-panel .profile-save { position:sticky; bottom:-24px; padding:12px 0; background:#0b0d10; z-index:2; }
.profile-panel .profile-save button { width:100%; min-height:48px; padding:10px; font-size:1rem; font-weight:700; background:var(--profile-accent); border-color:var(--profile-accent); color:#15110a; }
.profile-panel .profile-save button:hover:not(:disabled) { background:#ffca5c; color:#15110a; }
.profile-panel .profile-save button:disabled { background:#30343c; border-color:#424852; color:#b6bbc6; }
.profile-panel #profile-notice { margin:0 0 8px; color:#f1ca80; }
.profile-panel:has(#profile-form[hidden]) .profile-save { position:static; padding:0; }
.profile-panel:has(#profile-form[hidden]) .profile-save button { display:none; }
.profile-panel #logout-button { display:block; min-height:44px; margin:4px auto 0; padding:8px 24px; color:#aeb3bf; background:transparent; border-color:transparent; }
.profile-panel #logout-button[hidden] { display:none; }
.profile-panel #badge-list .badge { border:0; border-radius:0; padding:0; margin:24px 0; background:transparent; }
.profile-panel #badge-list .badge > strong { font-size:1.125rem; }
.profile-panel #badge-list .badge-tier { padding:14px 0; margin:0; border-top:1px solid #30343c; background:transparent; }
.profile-panel #badge-list .badge-tier > strong { font-size:0.875rem; }
.profile-panel #badge-list .badge-tier p { margin:5px 0; font-size:0.8125rem; }
.profile-panel #badge-list progress { height:6px; width:100%; accent-color:var(--profile-accent); }
.profile-panel #badge-list .cosmetic-preview { font-size:0.75rem; margin:8px 0 0; }
.profile-panel .mastery-group { margin:0; border-top:1px solid #30343c; }
.profile-panel .mastery-group summary { cursor:pointer; min-height:76px; padding:16px 0; }
.profile-panel .mastery-group-heading { display:inline-flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; width:calc(100% - 20px); }
.profile-panel .mastery-group-heading strong { min-width:0; font-size:1rem; }
.profile-panel .mastery-group-count { flex-shrink:0; color:#aeb3bf; font-size:0.75rem; white-space:nowrap; }
.profile-panel .mastery-group summary small { display:block; margin:6px 0 0 16px; color:#aeb3bf; font-size:0.8125rem; line-height:1.5; }
.profile-panel #collections-status { padding:8px 0; border:0; background:transparent; }
.profile-panel #collection-preview { height:clamp(160px,28dvh,240px); border:1px solid #424852; border-radius:8px; }
.profile-panel #collections-detail-view h3 { font-size:1.125rem; }
.profile-panel #weekly-collection-detail { font-size:0.8125rem; }
.profile-panel .weekly-collection-preview { border-color:#30343c; box-shadow:none; }
@media (max-width:600px) {
 :is(#profile-dialog,#mastery-dialog,#collections-dialog).profile-panel { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; padding:20px max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); border:0; border-radius:0; }
 .profile-panel .profile-save { bottom:-20px; }
 .profile-panel .profile-navigation { top:-20px; }
}
@media (max-width:360px) {
 body[data-view="home"] .home-mode-picker button { gap:5px; font-size:0.8125rem; }
 body[data-view="home"] .home-mode-picker button img { width:40px; height:40px; flex-basis:40px; }
 body[data-view="home"] .page-footer .menu-nav button { font-size:0.625rem; }
 body[data-view="home"] .page-footer .menu-nav button span { white-space:nowrap; }
}

/* Large text keeps mode names whole, while normal 320px retains two columns. */
body[data-view="home"] .overlay-card { container-type:inline-size; }
body:is([data-view="home"],[data-view="pause"]) .page-footer { container-type:inline-size; }
@container (max-width:12rem) {
 body[data-view="home"] .menu-hero { grid-template-columns:minmax(0,1fr); }
 body[data-view="home"] .menu-hero-art { height:100px; }
 body[data-view="home"] .home-mode-picker { grid-template-columns:minmax(0,1fr); }
 body:is([data-view="home"],[data-view="pause"]) .page-footer .menu-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Continuous Roguelike: readable combat feedback and endless ranking. */
/* Reserve the combo track before activation so feedback never resizes the board. */
body[data-view="play"] .app:has(#rogue-tools:not([hidden])) { --play-footer-height:max(184px,11.5rem); min-height:max(680px,42.5rem); }
body[data-view="play"] .page-footer:has(#rogue-tools:not([hidden])) { grid-template-rows:max(72px,4.5rem) max(52px,3.25rem) max(44px,2.75rem); container-type:inline-size; }
body[data-view="play"] .page-footer #rogue-tools:not([hidden]) { grid-row:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; overflow:visible; }
body[data-view="play"] .page-footer:has(#rogue-tools:not([hidden])) .instructions { grid-row:3; overflow:visible; gap:8px; }
body[data-view="play"] #rogue-tools button { min-width:0; padding:8px 4px; border:0; border-radius:0; background:transparent; box-shadow:none; font-size:.875rem; overflow-wrap:normal; word-break:normal; }
body[data-view="play"] #rogue-tools button+button { border-left:1px solid var(--ds-border); }
body[data-view="play"] #rogue-tools .rogue-icon { width:20px; height:20px; }
body[data-view="play"] #rogue-tools button span { min-width:0; }
body[data-view="play"] .page-footer:has(#rogue-tools:not([hidden])) .recall-button { background:#ffbd35; color:var(--ds-ink); border-color:#ffbd35; font-weight:700; }
body:not([data-view="play"]) :is(#rogue-tools,#rogue-combos,#rogue-info),
body:has(.hud-dock[data-rogue="false"]) :is(#rogue-tools,#rogue-combos) { display:none; }
body[data-view="play"] .hud-dock[data-rogue="true"] { background:transparent; border:0; border-radius:0; box-shadow:none; padding:4px 0; container-type:inline-size; }
body[data-view="play"] .rogue-map { padding-bottom:5px; border-bottom:1px solid var(--ds-border); flex-wrap:wrap; }
body[data-view="play"] .rogue-map small { white-space:normal; }
body[data-view="play"] .rogue-resources { flex-wrap:wrap; }
body[data-view="play"] .rogue-shots { flex-shrink:0; white-space:nowrap; }
@media(max-width:380px) {
  body[data-view="play"][data-rogue-procedural="true"] .app:has(#rogue-tools:not([hidden])) { --play-hud-height:max(184px,11.5rem); min-height:max(800px,50rem); }
}
@media (max-height: 500px) and (orientation: landscape) {
  body[data-view="play"] .app:has(#rogue-tools:not([hidden])) { min-height:max(440px,27.5rem); }
}
.rogue-combos { display:grid; grid-template-rows:.875rem minmax(0,1fr); gap:4px; width:100%; min-width:0; min-height:0; grid-row:1; text-align:left; }
.rogue-combos-title { display:flex; align-items:center; gap:8px; color:var(--ds-text-muted); font-size:.7rem; line-height:1; text-transform:uppercase; letter-spacing:.1em; }
.rogue-combos-title::after { content:''; flex:1; border-top:1px solid var(--ds-border); }
.rogue-combo-track { display:flex; align-items:stretch; gap:8px; min-width:0; min-height:0; overflow-x:auto; overflow-y:hidden; padding:2px 2px 5px; scrollbar-width:thin; overscroll-behavior-x:contain; }
.rogue-combo-track:focus-visible { outline:2px solid var(--ds-accent); outline-offset:1px; }
.rogue-combos[hidden] { display:none; }
.rogue-combo-card { display:flex; align-items:center; gap:8px; flex:0 0 auto; max-width:100%; padding:4px 8px; border:1px solid #796c49; border-radius:8px; background:#142027; color:#f5edde; min-width:0; }
.rogue-combo-art { display:flex; flex:none; padding-right:6px; }
.rogue-combo-art .rogue-build-art { width:30px; height:30px; border-radius:7px; }
.rogue-combo-art .rogue-relic-art { width:28px; height:28px; }
.rogue-combo-art .rogue-build-art+.rogue-build-art { margin-left:-10px; transform:translateY(4px); }
.rogue-build-art { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:10px; background:#0b1721; border:1px solid #60766c; }
.rogue-build-art .rogue-relic-art { width:38px; height:38px; border:0; background:none; box-shadow:none; }
.rogue-build-art .rogue-relic-art img { width:100%; height:100%; object-fit:contain; }
.rogue-build-art>.rogue-icon { width:26px; height:26px; }
.rogue-combo-copy { display:grid; gap:2px; min-width:0; overflow-wrap:anywhere; }
.rogue-combo-copy small { color:#bdd9af; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; }
.rogue-combo-copy strong { font-size:.8125rem; line-height:1.2; }
.rogue-combo-count { margin-left:auto; color:#e9d992; font-size:1rem; white-space:nowrap; }
.rogue-combo-card.is-triggered { animation:rogue-combo-pulse .5s ease-out; }
@keyframes rogue-combo-pulse { from { border-color:#e4ffd3; box-shadow:0 0 15px #abe38066; } to { border-color:#aa9a61; box-shadow:none; } }
.rogue-reward-card.is-specialization .rogue-acquire { border-color:#b79be7; background:linear-gradient(115deg,#27203c,#101d28); }
.rogue-reward-card.is-specialization .rogue-offer-rarity { color:#dfc4ff; }
.rogue-power-traits { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.rogue-power-traits span { font-size:.75rem; padding:3px 7px; background:#223c36; border:1px solid #578d79; border-radius:6px; color:#d2f1dc; }
#rogue-board-dialog { width:min(720px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; padding:clamp(16px,4vw,28px); background:#101922; color:#f5edde; border:1px solid #637265; border-radius:18px; }
.rogue-ranking-kicker { color:#d8bd7c; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }
.rogue-ranking-heading h2 { margin:6px 0 10px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.5rem,5vw,2rem); }
#rogue-ranking-help { color:#bdc9d0; font-size:.875rem; line-height:1.5; }
.rogue-ranking-list { list-style:none; padding:0; display:grid; gap:14px; margin:20px 0; }
.rogue-ranking-card { border:1px solid #41535d; border-radius:14px; padding:16px; background:#16242e; }
.rogue-ranking-card[data-mine="true"] { border-color:#d5b777; box-shadow:inset 3px 0 #d5b777; }
.rogue-ranking-player { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.rogue-ranking-position { display:grid; place-items:center; min-width:44px; height:44px; background:#293b40; color:#e3cb92; border-radius:12px; font-size:1.3rem; }
.rogue-ranking-name { display:flex; gap:8px; align-items:center; flex-wrap:wrap; overflow-wrap:anywhere; min-width:0; }
.rogue-ranking-name>strong { font-size:1.05rem; }
.rogue-ranking-you { border-radius:6px; padding:3px 7px; background:#d5b777; color:#17212a; font-size:.75rem; font-weight:700; }
.rogue-ranking-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.rogue-ranking-metric { display:grid; grid-template-columns:22px minmax(0,1fr); gap:6px; align-items:center; padding:10px; background:#0d1922; border-radius:9px; min-width:0; }
.rogue-ranking-metric .rogue-icon { width:20px; height:20px; color:#9ebdcb; }
.rogue-ranking-metric>strong { font-size:1.3rem; overflow-wrap:anywhere; }
.rogue-ranking-metric>span:last-child { grid-column:1/-1; font-size:.75rem; color:#bccbd3; overflow-wrap:anywhere; }
.rogue-ranking-build { margin-top:14px; border-top:1px solid #41535d; padding-top:6px; }
.rogue-ranking-build summary { cursor:pointer; min-height:44px; align-content:center; color:#decb9d; font-size:.875rem; }
.rogue-build-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.rogue-build-chip { display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:8px; align-items:center; min-width:0; padding:7px; border-radius:9px; background:#0d1922; }
.rogue-build-chip>.rogue-build-art { grid-row:span 2; }
.rogue-build-chip>span:not(.rogue-build-art) { font-size:.8rem; overflow-wrap:anywhere; }
.rogue-build-chip>strong { font-size:.7rem; color:#a4c6b2; }
.rogue-ranking-empty { padding:24px; text-align:center; border:1px dashed #60766c; border-radius:12px; }
.rogue-ranking-empty p { color:#bdc9d0; font-size:.9rem; }
#rogue-board-close { width:100%; min-height:44px; }
@media(max-width:380px) { .rogue-ranking-card { padding:12px; } .rogue-ranking-metric { padding:8px; grid-template-columns:1fr; gap:4px; } .rogue-ranking-metric>span:first-child { display:none; } .rogue-build-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .rogue-combo-card.is-triggered { animation:none; } }

.rogue-specialization-tag { justify-self:start; font-size:.7rem; letter-spacing:.03em; text-transform:uppercase; color:#d8c0ff; margin-block:4px; }

.rogue-build-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.rogue-build-chip>strong { overflow-wrap:anywhere; min-width:0; }
.rogue-combo-count { min-width:0; overflow-wrap:anywhere; }
@container (max-width:18rem) {
  #rogue-tools button { gap:4px; padding:4px; font-size:.75rem; line-height:1.2; }
  #rogue-tools button .rogue-icon { width:18px; height:18px; }
  .hud-dock[data-rogue="true"] #rogue-boss-status:not([hidden]) { grid-template-columns:minmax(24px,1fr) 20px minmax(24px,.6fr); }
  #rogue-boss-status > span:first-child { grid-column:1/-1; }
  .rogue-combo-card { gap:5px; padding-inline:6px; }
  .rogue-combo-art { padding-right:0; }
  .rogue-combo-art .rogue-build-art { width:24px; height:24px; }
  .rogue-combo-art .rogue-relic-art { width:22px; height:22px; }
}

/* Account access shares the existing profile surface and native form controls. */
#account-access { margin:16px 0; border-top:1px solid var(--ds-border); padding-top:16px; }
#account-access[hidden], #account-access [hidden] { display:none !important; }
#account-access form { display:grid; gap:10px; min-width:0; margin:12px 0; }
#account-access input, #account-access select { width:100%; min-width:0; box-sizing:border-box; font-size:1rem; }
#account-access button, #account-access input, #account-access select { min-height:44px; }
#account-access button { white-space:normal; overflow-wrap:anywhere; }
#account-access .account-actions { display:flex; flex-wrap:wrap; gap:8px; }
#account-access .account-actions > button { flex:1 1 160px; }
#account-access .account-passkeys { padding:0; list-style:none; }
#account-access .account-passkeys li { border-top:1px solid var(--ds-border); padding:8px 0; }
#account-access [data-account-email] { overflow-wrap:anywhere; }
#account-access [data-account-notice] { margin:10px 0; }
#account-access [data-account-notice]:empty { display:none; }
.profile-panel:has(#account-access:not([hidden]) [data-account-anonymous]:not([hidden])) #account-label { display:none; }
#profile-dialog:has(#account-access:not([hidden]) [data-account-anonymous]:not([hidden])) .dialog-header { margin-bottom:0; }
#account-access:has([data-account-anonymous]:not([hidden])) { margin:8px 0 0; border:0; padding:0; }
#account-access [data-account-anonymous] { max-width:400px; margin-inline:auto; }
#account-access .account-welcome { text-align:center; margin-bottom:12px; }
#account-access .account-welcome h3 { margin:0 0 6px; font-size:1.375rem; line-height:1.2; font-weight:700; letter-spacing:-.025em; text-wrap:balance; }
#account-access .account-welcome p { margin:0; font-size:.875rem; line-height:1.4; text-wrap:balance; }
#account-access .account-signin-methods { display:grid; gap:8px; }
#account-access .account-passkey-login { display:flex; justify-content:center; align-items:center; gap:12px; width:100%; min-height:44px; padding:9px 16px; border:1px solid #ffbd35; border-radius:8px; background:#ffbd35; color:#111318; font-size:1rem; font-weight:700; box-shadow:none; }
#account-access .account-passkey-login:hover { background:#ffca5b; border-color:#ffca5b; }
#account-access .account-passkey-login img { flex:none; width:24px; height:24px; }
#account-access #google-signin { display:grid; place-items:center; min-width:0; min-height:44px; margin:0; }
#account-access #google-signin[hidden] { display:none; }
#account-access .account-signup-prompt { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; column-gap:6px; margin:0; font-size:.9375rem; }
#account-access .account-signup-prompt:has(button[hidden]) { display:none; }
#account-access .account-signup-prompt button { padding:4px; border:0; background:transparent; color:#ffbd35; font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
#account-access .account-secondary-actions { display:grid; gap:8px; padding-top:6px; border-top:1px solid #30343c; }
#account-access .account-secondary-actions button { width:100%; min-height:44px; padding:9px 12px; border:1px solid #30343c; border-radius:8px; background:transparent; color:#d6d8de; font-size:.9375rem; font-weight:600; }
#account-access .account-secondary-actions button:hover { border-color:#707683; background:#171a20; }
#account-access button:focus-visible { outline:2px solid #ffbd35; outline-offset:3px; }
@media(max-width:600px) {
  #profile-dialog:has(#account-access:not([hidden]) [data-account-anonymous]:not([hidden])) { padding-block:12px; }
  #profile-dialog:has(#account-access:not([hidden]) [data-account-anonymous]:not([hidden])) .profile-navigation { top:-12px; }
}
@media(max-width:380px) {
  #account-access .account-welcome h3 { font-size:1.25rem; }
  #account-access .account-welcome { margin-bottom:16px; }
  #account-access .account-passkey-login { gap:8px; padding-inline:10px; }
}