/* Compact navigation uses the existing themes and game controls. */
html[data-first-help=show] #first-help[hidden]{display:block!important}
/* A header identity is a compact control; full banner previews belong in Profile. */
.compact-navigation header :is(#account-button,#pixel-profile) .identity-banner{width:auto;min-width:0;min-height:0;padding:0;border:0;background:none;color:#eee8f2;font-size:13px}
.compact-navigation header :is(#account-button,#pixel-profile) .identity-banner>strong{color:#eee8f2!important;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compact-navigation header :is(#account-button,#pixel-profile) :is(.badge-image,.companion-orbit,.frame-detail,small){display:none}
.compact-navigation header #pixel-profile .profile-avatar{width:32px;height:32px}
@media(max-width:700px){
 .compact-navigation:not([data-game=deep-cuts]) header{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(44px,auto) minmax(44px,auto);gap:10px 12px;min-height:124px;box-sizing:border-box}
 .compact-navigation:not([data-game=deep-cuts]) header>.brand{grid-column:1;grid-row:1;justify-self:start}
 .compact-navigation:not([data-game=deep-cuts]) header>:is(#theme-toggle,.display-settings){grid-column:2;grid-row:1;justify-self:end}
 .compact-navigation:not([data-game=deep-cuts]) header nav{grid-column:1/-1;grid-row:2;margin-left:0}
}
.challenge-notice{display:flex;align-items:baseline;gap:6px 20px;flex-wrap:wrap;border-left:4px solid var(--accent);padding:10px 14px;margin:0 0 18px;background:var(--panel);color:var(--ink);text-align:left}
.challenge-notice a{font-weight:800;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.challenge-notice span{font-size:12px;color:var(--muted)}
.challenge-notice select{font:inherit;font-size:16px;min-height:44px;padding:0 10px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:0}
.deep-event{border-bottom:2px solid var(--accent);padding-bottom:16px;margin-bottom:16px}
.deep-event>strong{font-size:18px}.deep-event p{font-size:13px;line-height:1.5}
.deep-event-standings{list-style:none;padding:0;max-height:180px;overflow:auto;font-size:13px}
.deep-event-standings li{padding:6px 0;border-top:1px solid var(--line)}
#events-menu .nav-popover{max-height: min(660px,75vh);overflow-y:auto}
@media(max-width:700px){html[data-game=deep-cuts] header nav>.quiet{white-space:nowrap}}
.compact-navigation header{display:flex!important;height:auto;min-height:82px;padding:14px 5%;gap:16px;flex-wrap:wrap}
.compact-navigation header nav{display:flex;align-items:center;justify-content:flex-end;gap:18px;width:auto;margin-left:auto;flex-wrap:wrap}
.compact-navigation header nav > .quiet{font-size:14px}
.compact-navigation header > #theme-toggle{position:static;display:flex;align-items:center;gap:6px;flex-shrink:0;min-height:44px;padding:7px 10px;border:1px solid #80728b;background:transparent;color:#eee8f2;font-size:12px;white-space:nowrap}
.compact-navigation header > #theme-toggle:focus-visible{outline:2px solid #c7a0df;outline-offset:4px}
.compact-navigation header .nav-disclosure > summary{color:#eee8f2;border-color:#80728b}
.compact-navigation header .nav-disclosure[open] > summary{color:#c7a0df;border-color:#c7a0df}
.compact-navigation main{display:block;padding-top:28px;max-width:1030px}
.compact-navigation .intro{position:relative;margin:0 0 18px}
.compact-navigation .intro h1{font-size:clamp(30px,4vw,44px);line-height:1.08;margin:10px 0}
.compact-navigation .intro .series-label{font-size:11px}
.compact-navigation .intro > p:not(.series-label){font-size:14px;line-height:1.5}
.compact-navigation .mode-switch{margin-top:0;max-width:480px}
.compact-navigation .mode-switch button{padding:10px 14px}
.compact-navigation .mode-switch small{display:none}
.compact-navigation .pixel-top:empty{display:none}
.compact-navigation .pixel-intro-row{display:block;margin-bottom:16px}
.compact-navigation .pixel-game-switch{margin-bottom:18px}
.compact-navigation .player-strip{margin-bottom:16px}
.nav-disclosure{position:relative;font-size:14px;text-transform:none;letter-spacing:normal}
.nav-disclosure > summary{list-style:none;cursor:pointer;padding:9px 12px;border:1px solid var(--line);border-radius:3px;white-space:nowrap;font:600 14px/1.4 'DM Sans',sans-serif}
.nav-disclosure > summary::-webkit-details-marker{display:none}
.nav-disclosure > summary::after{content:'⌄';margin-left:10px}
.nav-disclosure[open] > summary{border-color:var(--accent);color:var(--accent)}
.nav-disclosure > summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.nav-popover{position:absolute;z-index:60;right:0;top:calc(100% + 8px);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-top:3px solid var(--accent);padding:16px;width:320px;max-width:calc(100vw - 32px);max-height:75dvh;overflow:auto;overscroll-behavior:contain;text-align:left}
.nav-panel-head{position:sticky;top:-16px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-16px -16px 12px;padding:4px 8px 4px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.nav-panel-head strong{font-size:14px;color:var(--ink)}
.nav-close{display:grid;place-items:center;flex:none;width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--ink);font:24px/1 sans-serif;cursor:pointer}
.nav-close:hover{background:var(--bg)}
/* Long native dialogs keep their existing close control within reach. */
dialog>.close{position:sticky;top:0;right:auto;float:right;z-index:3;min-width:44px;min-height:44px;line-height:1;background:var(--panel)}
.mode-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.below-game-stats{margin:14px 0}
#more-menu .nav-popover{display:flex;flex-direction:column;gap:0;padding:8px}
#more-menu .nav-panel-head{top:-8px;margin:-8px -8px 4px}
#more-menu .nav-popover>:is(button,a){display:block;flex:none;box-sizing:border-box;width:100%;max-width:none;min-height:48px;margin:0;padding:12px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;font:600 14px/1.4 'DM Sans',sans-serif}
#more-menu .nav-popover>:is(button,a):last-child{border-bottom:0}
#more-menu .nav-popover>:is(button,a):hover{background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
#more-menu:not([open]) .nav-popover{display:none}
.first-help>summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:14px}
.first-help:not([open]){padding:10px 12px;margin:10px 0}
.first-help[open]>summary{margin-bottom:12px}
.first-help>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.current-mode{font-size:13px;color:var(--muted)}
#mode-menu{position:relative}
#mode-menu > summary,#mode-menu[open] > summary{padding:12px 18px;min-height:46px;background:var(--accent);border:2px solid var(--accent);color:var(--bg);font-size:15px;font-weight:800}
#mode-menu > summary:hover{filter:brightness(1.12)}
#mode-menu .nav-popover{width:440px;left:0;right:auto}
.arrival-status{color:var(--muted);font-size:13px;min-height:20px}
.arrival-status[hidden],.current-mode[hidden]{display:none!important}
html.compact-navigation:not(.nav-mounted) .game-selector,html.compact-navigation:not(.nav-mounted) .sbr-release,html.compact-navigation:not(.nav-mounted) .sbr-challenge,html.compact-navigation:not(.nav-mounted) .invite-notice{display:none}
html.compact-navigation:not(.nav-mounted) header nav,html.compact-navigation:not(.nav-mounted) .display-settings{visibility:hidden}
html.compact-navigation:not(.nav-mounted) main::before{content:'';display:block;height:66px}
.compact-navigation .game-selector{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0;padding:0;border:0;width:100%;max-width:none}
.compact-navigation .game-selector .mode-group{min-width:0}
.compact-navigation .game-selector button,.compact-navigation .game-selector a{display:block;text-align:left;width:100%;padding:10px;border:0;border-left:3px solid transparent;background:transparent;color:var(--ink);font:600 14px/1.4 'DM Sans',sans-serif;text-decoration:none;min-height:40px}
.compact-navigation .game-selector [aria-pressed=true],.compact-navigation .game-selector [aria-current=page]{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--ink)}
.compact-navigation .game-selector small{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:3px}
.compact-navigation .game-selector button:disabled{opacity:.55;cursor:default}
.nav-group-label{margin:0 0 8px!important;font-size:11px!important;letter-spacing:1px;text-transform:uppercase;color:var(--muted)!important}
#more-menu .nav-popover{width:270px}
#more-menu .quiet{color:var(--ink);padding:10px 0;width:100%;text-align:left}
#events-menu .nav-popover{width:380px}
#events-menu .sbr-challenge,#events-menu .invite-notice{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0;padding:14px 0;max-width:none;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink)}
#events-menu span,#events-menu p{font-size:13px;line-height:1.5}
#events-menu strong{color:var(--accent)}
.weekly-record{padding:0 0 14px;margin-bottom:12px;border-bottom:1px solid var(--line)}.weekly-record p{margin:7px 0 10px}.weekly-record-inline{padding-left:10px;border-left:3px solid var(--accent);color:var(--ink)}
#account-dialog .sbr-release{margin:22px 0 0;padding:16px 0;border:0;border-top:1px solid var(--line);max-width:none;background:transparent;color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.compact-navigation header #account-button .player-identity{gap:8px;max-width:190px}
.compact-navigation header #account-button .profile-avatar{width:32px;height:32px}
.compact-navigation header #account-button .player-identity small,.compact-navigation header #account-button .player-badge,.compact-navigation header #account-button .companion-image{display:none}
.mode-loading .game,.pixel-layout[aria-busy=true]{opacity:1}
/* The single gradient is the requested loading sheen, never page decoration. */
:is(.content-skeleton,html.page-preparing main :is(.search-area,.round-label,#counter,thead th,#empty p,.image-frame,#su-settings fieldset,#su-settings > button,#su-reward,.su-art,#su-answers button)){position:relative!important;overflow:hidden!important;color:transparent!important;pointer-events:none}
:is(.content-skeleton,html.page-preparing main :is(.search-area,.round-label,#counter,thead th,#empty p,.image-frame,#su-settings fieldset,#su-settings > button,#su-reward,.su-art,#su-answers button)) > *{visibility:hidden!important}
:is(.content-skeleton,html.page-preparing main :is(.search-area,.round-label,#counter,thead th,#empty p,.image-frame,#su-settings fieldset,#su-settings > button,#su-reward,.su-art,#su-answers button))::before{content:'';position:absolute;inset:0;background:var(--line);z-index:20;border-radius:3px}
:is(.content-skeleton,html.page-preparing main :is(.search-area,.round-label,#counter,thead th,#empty p,.image-frame,#su-settings fieldset,#su-settings > button,#su-reward,.su-art,#su-answers button))::after{content:'';position:absolute;inset:0;z-index:21;background:linear-gradient(100deg,transparent 15%,var(--panel) 50%,transparent 85%);opacity:.5;transform:translateX(-110%);animation:loading-sheen 2.8s ease-in-out infinite;pointer-events:none}
#su-parts{min-height:44px}
#su-settings > button{min-width:190px}
html.page-preparing main :is(.game,#su-settings,#su-game){pointer-events:none}
@keyframes loading-sheen{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
button:not(:disabled):active,summary:active,.tool-button:active{filter:brightness(.88)}
@media(prefers-reduced-motion:no-preference){
 button,.tool-button,.nav-disclosure > summary{transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease,translate 100ms ease}
 button:not(:disabled):active,summary:active,.tool-button:active{translate:0 1px}
 .nav-disclosure[open] > .nav-popover{animation:nav-open 160ms ease-out both}
 @keyframes nav-open{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}
}
.ui-page-hidden .content-skeleton::after,html.ui-page-hidden.page-preparing main ::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.content-skeleton::after,html.page-preparing main ::after{animation:none!important;display:none}}
@media(max-width:650px){
 .compact-navigation header{padding:12px 18px;gap:10px}
 .compact-navigation header nav{width:100%;justify-content:space-between;gap:6px}
 .compact-navigation header > .brand{order:1;font-size:26px;gap:5px}.compact-navigation header > #theme-toggle{order:2;margin-left:auto;font-size:11px;padding:7px 8px}.compact-navigation header nav{order:3}
 .compact-navigation header nav > .quiet,.nav-disclosure > summary{font-size:12px}
 .compact-navigation header nav > .quiet,.nav-disclosure > summary{min-height:44px}
 .compact-navigation main{padding:22px 18px 0}
 .compact-navigation .intro h1{font-size:32px}
 #mode-menu .nav-popover{width:min(440px,calc(100vw - 36px))}
 #events-menu .nav-popover{left:0;right:auto}
 .compact-navigation .game-selector{gap:10px}
 .compact-navigation .game-selector button,.compact-navigation .game-selector a{min-height:44px;padding:10px 6px;font-size:13px}
}

@media(max-width:370px){.compact-navigation header > .brand{font-size:22px}.compact-navigation .brand .pixel-wordmark{width:100px;height:18px}.compact-navigation .brand .brand-user{width:56px;height:28px}}

/* Menus stay below their trigger and within the visible phone viewport. */
@media(max-width:700px){
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .compact-navigation header nav>*{min-width:0}
 html.compact-navigation .nav-disclosure:is(#mode-menu,#events-menu,#more-menu) .nav-popover{position:fixed;top:var(--nav-top,132px);left:12px;right:12px;width:auto;max-width:none;max-height:var(--nav-space,calc(100dvh - 150px));margin:0;box-sizing:border-box;animation:none}
}
.install-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px auto;max-width:1060px;padding:8px 12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:14px;line-height:1.5}
.install-bar button{flex:0 0 auto;color:inherit;font-size:14px;min-height:44px;white-space:nowrap}
.install-bar[hidden],.install-bar [hidden]{display:none}
.install-bar span{flex:1 1 220px}

@media(max-width:520px){.challenge-notice{padding:8px 12px;margin-bottom:10px;gap:2px 12px}.challenge-notice a{font-size:15px;line-height:1.25}}

@media(max-width:520px){#events-menu .new-challenge{font-size:0}.new-challenge::after{content:" •";font-size:14px}}
@media(max-width:700px){
 .compact-navigation:not([data-game=deep-cuts]) header nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:6px}
 .compact-navigation header :is(#account-button,#pixel-profile){font-size:0;padding:6px;min-width:0}
 .compact-navigation header :is(#account-button,#pixel-profile)::after{content:'Profile';font:600 12px/1.4 'DM Sans',sans-serif}
 html[lang=es].compact-navigation header :is(#account-button,#pixel-profile)::after{content:'Perfil'}
 .compact-navigation header :is(#account-button,#pixel-profile) .player-identity{display:none}
 .compact-navigation:not([data-game=deep-cuts]) main{padding-top:14px}
 .compact-navigation:not([data-game=deep-cuts]) .mode-toolbar{margin-bottom:10px}
 .compact-navigation:not([data-game=deep-cuts]) .intro{margin-bottom:10px}
 .compact-navigation:not([data-game=deep-cuts]) .intro h1{font-size:28px;margin:6px 0;line-height:1.1}
 .compact-navigation:not([data-game=deep-cuts]) .intro .series-label{display:none}
 .compact-navigation:not([data-game=deep-cuts]) .intro-description{margin:6px 0;font-size:13px;line-height:1.45}
 .compact-navigation .mode-note{font-size:12px;line-height:1.45;margin:8px 0}
 .compact-navigation .player-strip{margin:0 0 10px;font-size:12px}
 .compact-navigation .player-strip p{margin:0}
}
.pixel-event-reward{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:center;margin:14px 0;padding:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:14px;line-height:1.45}
.pixel-event-reward p{margin:6px 0}.pixel-event-reward strong{color:var(--ink)}.pixel-event-reward .fine-print{color:var(--muted);font-size:12px}
.pixel-event-art{position:relative;overflow:hidden;border:1px solid #d8bd71;aspect-ratio:374/211;background:#152d46}
.pixel-event-art picture,.pixel-event-art img{display:block;width:100%;height:100%;object-fit:cover}
.pixel-event-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:url('/banners/golden-ratio-pattern.svg') center/100% 100% no-repeat}
#events-menu .pixel-event-reward{grid-template-columns:1fr}
@media(max-width:520px){.pixel-event-reward{grid-template-columns:1fr;gap:10px}.pixel-event-art{max-height:150px;width:100%}}

/* A short, dismissible tour. The native modal keeps keyboard focus in its controls. */
#nav-tour{position:fixed;inset:0;margin:0;padding:0;width:100%;height:100%;max-width:none;max-height:none;border:0;background:transparent;overflow:hidden;color:var(--ink)}
#nav-tour::backdrop{background:#0009;backdrop-filter:none}
#nav-tour[open]{animation:none!important}
.tour-focus-ring{position:absolute;border:3px solid #e6c5ff;border-radius:999px;pointer-events:none}
.tour-card{position:absolute;box-sizing:border-box;background:var(--panel);color:var(--ink);border:2px solid var(--accent);padding:16px;max-height:calc(100dvh - 160px);overflow:visible}
.tour-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}
.tour-head .nav-close{margin:-8px -8px -4px 0}
.tour-card h2{font-size:26px;line-height:1.15;margin:12px 0}
.tour-card p{font-size:15px;line-height:1.5;margin:0 0 18px}
.tour-actions{display:flex;align-items:center;gap:8px}
.tour-actions button{min-height:44px;font-size:14px}.tour-actions .quiet{margin-right:auto}.tour-actions [hidden]{display:none}
.tour-actions .primary{margin:0;width:auto;min-width:90px}
.tour-arrow{position:absolute;top:-32px;color:#e6c5ff;font:30px/1 sans-serif}
@media(max-height:440px){.tour-card{max-height:calc(100dvh - 24px);overflow:auto}.tour-card h2{font-size:20px;margin:6px 0}.tour-card p{font-size:13px;margin-bottom:8px}}

/* Choice lists stay within the visible keyboard viewport. */
#suggestions{overscroll-behavior:contain;scroll-behavior:auto;touch-action:pan-y}
#suggestions[data-placement=above]{top:auto;bottom:calc(100% + 4px)}
#suggestions[data-placement=below]{bottom:auto}
.clue-detail .clue-state{display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px;line-height:1.2;margin-bottom:5px;font-weight:700}
.clue-state b{font:700 16px/1 sans-serif}.clue-detail .cell-value{font-weight:600}
.legend .swatch{display:inline-grid;place-items:center;width:20px;height:20px;font-style:normal;font-weight:700}
.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.result-actions>button{min-height:44px}
.result-extras{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}.result-extras>summary{cursor:pointer;font-size:13px;font-weight:600;padding:6px 0}
.result-secondary{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.result-secondary>button,.result-secondary>a{min-height:44px}
.result-extras .fact{margin-top:14px}.share-status:empty{display:none}
#result-title:focus{outline:2px solid var(--accent);outline-offset:4px}
#pixel-result.is-complete{margin:16px 0;padding:16px;border:1px solid var(--line);border-top:4px solid var(--accent);background:var(--panel);color:var(--ink)}
#pixel-result h2{font:800 28px/1.1 'Barlow Condensed',sans-serif;margin:0 0 10px}#pixel-result #status{margin:8px 0}
#pixel-result-actions:has(>button:not([hidden])){margin:12px 0}#pixel-result-actions:not(:has(>button:not([hidden]))){margin:0}
@media(max-width:520px){.result-actions{display:grid;grid-template-columns:1fr}.result-actions>button{width:100%;justify-content:center;margin:0} .result-secondary .tool-button{font-size:12px}}