@font-face{font-family:Geist;src:url('../fonts/geist-sans.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('../fonts/geist-mono.woff2') format('woff2');font-weight:100 900;font-display:swap}
body.guess-person-page{--paper:#181818;--person-surface:#202020;--person-inset:#1b1b1b;--person-control:#2b2b2b;--person-press:70ms;--person-feedback:180ms;--person-enter:240ms;--sans:Geist,'PingFang SC','Microsoft YaHei',system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;font-family:var(--sans);font-synthesis:none}
.guess-person-page .shell{margin:0 auto;padding:0 24px;width:100%;max-width:1200px;min-width:0}
.guess-person-page main{padding:18px 0 40px}
.person-game{max-width:1000px;margin:auto;background:var(--paper);border-radius:20px}
.person-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px}
.person-toolbar h1{margin:0;font:500 24px/1.3 var(--sans);letter-spacing:-.035em}
.person-game button{min-height:44px;border:0;border-radius:11px;padding:10px 16px;font:500 14px/1.4 var(--sans);transition:background-color var(--person-feedback),transform var(--person-press);touch-action:manipulation}
.person-game button:active:enabled{transform:translateY(1px)}
.person-game button:disabled{opacity:.4;cursor:default}
.person-game :is(button,input):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.person-secondary{background:var(--person-control);color:var(--ink);box-shadow:var(--graphite-lift)}
.person-game .person-primary{background:var(--accent);color:var(--paper);box-shadow:0 2px 0 #858585;white-space:nowrap}
.person-game .person-primary:hover:enabled{background:var(--ink)}
.person-game .person-text-button{background:transparent;color:var(--mute);padding:8px;box-shadow:none}
.person-game .person-text-button:hover:enabled{color:var(--ink)}
.person-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);gap:12px;min-height:600px}
.person-dossier{display:flex;flex-direction:column;align-items:center;min-width:0;padding:24px;border-radius:18px;background:var(--person-surface);text-align:center}
.person-case{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;color:var(--mute);font:400 14px/1.5 var(--mono)}
.person-case>span:last-child{color:var(--soft)}
.person-portrait{width:min(200px,80%);margin:26px auto 10px}
.person-portrait svg{display:block;width:100%;height:auto}
.person-kicker{color:var(--mute);font:400 14px/1.5 var(--mono);letter-spacing:.04em;margin:12px 0 8px}
.person-dossier h2{font:450 clamp(24px,2.2vw,34px)/1.2 var(--sans);letter-spacing:-.04em;margin:0;overflow-wrap:anywhere}
.person-description{font-size:14px;line-height:1.7;color:var(--mute);margin:12px 0 22px;max-width:270px}
.person-meters{display:grid;grid-template-columns:1fr 1fr;width:100%;margin:30px 0 16px;padding:20px 0 0;border-top:1px solid var(--line);gap:20px}
.person-meters dt{font-size:14px;color:var(--mute);margin:0 0 10px}
.person-meters dd{font:400 25px/1 var(--mono);margin:0}
.person-meters dd>span+span{font-size:16px;color:var(--soft)}
.person-bank{color:var(--mute);font-size:14px;line-height:1.5;margin:auto 0 2px;padding-top:14px}
.person-investigation{display:flex;flex-direction:column;min-width:0;border-radius:18px;background:var(--person-inset);padding:24px}
.person-clues-heading{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line)}
.person-clues-heading h2{font-size:16px;font-weight:500;margin:0}
.person-clues-heading>span{font:14px var(--mono);color:var(--soft)}
.person-history{height:300px;min-height:240px;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:8px 0 16px;flex:1}
.person-history::-webkit-scrollbar{display:none}
.person-history:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.person-empty{display:flex;height:100%;min-height:240px;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;color:var(--mute)}
.person-empty .person-empty-mark{display:grid;place-items:center;width:46px;height:46px;background:var(--person-control);border-radius:14px;font:22px var(--mono);color:var(--ink);margin-bottom:8px}
.person-empty p{font-size:16px;line-height:1.5;margin:0}
.person-empty>span:last-child{font-size:14px;line-height:1.7;max-width:250px}
.person-clue{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line);animation:person-in var(--person-enter) ease-out both}
.person-clue>span{font:14px/1.6 var(--mono);color:var(--soft)}
.person-clue p{font-size:15px;line-height:1.6;margin:0;overflow-wrap:anywhere}
.person-clue strong{padding:3px 9px;border-radius:6px;background:var(--person-control);font-size:14px;font-weight:500;line-height:1.5;max-width:130px}
.person-clue[data-answer=no] strong,.person-clue[data-answer=incorrect] strong{background:#383838;color:var(--mute)}
.person-clue[data-answer=yes] strong,.person-clue[data-answer=correct] strong{background:#cecece;color:#242424}
.person-clue[data-answer=invalid],.person-clue[data-answer=unknown]{grid-template-columns:28px minmax(0,1fr)}
.person-clue:is([data-answer=invalid],[data-answer=unknown]) strong{grid-column:2;max-width:none;background:transparent;padding:0;color:var(--mute);font-weight:400}
.person-feedback{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px;line-height:1.5;color:var(--mute);padding-top:8px}
.person-feedback #game-status{margin:0;flex:1}
.person-feedback #game-status[data-error=true]{color:#f0aaa4}
.person-feedback #cancel-request{margin-left:auto;flex:none}
.person-mode{display:flex;gap:4px;background:var(--person-surface);border-radius:12px;padding:4px;margin:8px 0 18px}
.person-mode button{flex:1;background:transparent;color:var(--mute)}
.person-mode button[aria-pressed=true]{background:#353535;color:var(--ink);box-shadow:0 1px 2px #0003}
.person-composer label{display:block;font-size:14px;margin:0 0 10px;color:var(--ink)}
.person-input-row{display:flex;align-items:stretch;gap:8px}
.person-input-row input{font:16px/1.4 var(--sans);background:var(--person-control);color:var(--ink);width:100%;min-width:0;border:0;border-radius:12px;padding:14px}
.person-input-row input::placeholder{color:var(--soft);opacity:1}
.person-input-row input:disabled{opacity:.5}
.person-composer>p{font-size:14px;line-height:1.7;color:var(--mute);margin:12px 0}
.person-suggestions{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.person-suggestions button{min-height:36px;background:var(--person-surface);padding:8px 10px;color:var(--mute)}
.person-suggestions button:hover:enabled{background:var(--person-control);color:var(--ink)}
/* The shared loader owns pending, cancellation, error and completion. Product variables style its small tile mark. */
#request-loader .ap-loader-content,#request-loader .ap-loader-status,#request-loader progress{display:none}
#request-loader .ap-loader-mark{display:grid;width:20px;height:20px;grid-template-columns:repeat(2,1fr);gap:3px}
#request-loader .ap-loader-mark i{border-radius:2px;background:var(--mute)}
#request-loader[data-state=pending] .ap-loader-mark i{animation:person-loader 1200ms ease-in-out infinite;animation-delay:calc(var(--cell) * 150ms)}
#request-loader .ap-loader-visual{display:flex;align-items:center}
@keyframes person-loader{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes person-in{from{opacity:0;transform:translateY(4px)}}
body.game-aside-beside.guess-person-page>.shell{padding-left:24px;padding-right:0}
@media(max-width:1100px){.person-layout{grid-template-columns:minmax(210px,.75fr) minmax(0,1.25fr)}.person-dossier,.person-investigation{padding:20px}.person-case{flex-direction:column;gap:4px}.person-portrait{width:160px}.person-input-row{flex-wrap:wrap}.person-input-row input{flex:1 1 180px}.person-input-row button{flex:1}}
@media(max-width:760px){.guess-person-page .shell{padding:0 16px}.guess-person-page main{padding:10px 0 32px}.person-toolbar{margin-bottom:12px}.person-toolbar h1{font-size:22px}.person-layout{grid-template-columns:1fr;gap:12px;min-height:0}.person-dossier{display:grid;grid-template-columns:84px 1fr;gap:0 16px;padding:18px;text-align:left;align-items:center}.person-case{grid-column:1/-1;flex-direction:row;margin-bottom:16px}.person-portrait{grid-column:1;grid-row:2/5;width:84px;margin:0}.person-kicker{grid-column:2;margin:0 0 6px}.person-dossier h2{grid-column:2;font-size:26px}.person-description{grid-column:2;margin:8px 0;max-width:none}.person-dossier>#start-round{grid-column:1/-1;margin-top:16px}.person-meters{grid-column:1/-1;display:flex;gap:24px;margin:18px 0 0;padding-top:16px}.person-meters>div{display:flex;align-items:baseline;gap:10px}.person-meters dt{margin:0}.person-meters dd{font-size:20px}.person-bank{grid-column:1/-1;padding-top:16px;margin:0}.person-dossier>#reveal{grid-column:1/-1;justify-self:start;margin:4px 0 -6px;padding-left:0}.person-investigation{padding:18px}.person-history{height:250px;flex:none}.person-empty{min-height:220px}.person-clue{gap:6px}.person-clue strong{max-width:108px}.person-input-row{flex-wrap:nowrap}.person-input-row input{flex:1 1 0}.person-input-row button{flex:none}.person-suggestions{margin-top:12px}.person-case>span:last-child{font-size:14px}}
@media(prefers-reduced-motion:reduce){.person-game *{animation:none!important;transition:none!important}}
@media(forced-colors:active){.person-game :is(button,input,.person-dossier,.person-investigation,.person-clue strong){border:1px solid CanvasText}.person-portrait svg{forced-color-adjust:none}.person-mode button[aria-pressed=true]{outline:2px solid Highlight}}

/* Keep the question within reach on phones; the clue log scrolls inside its own area. */
@media(max-width:760px){
 .person-dossier{grid-template-columns:60px minmax(0,1fr);gap:0 12px;padding:16px}
 .person-case{margin-bottom:12px}
 .person-portrait{width:60px}
 .person-dossier h2{font-size:24px;line-height:1.25}
 .person-description{margin:6px 0;font-size:14px}
 .person-game[data-phase=playing] .person-description{display:none}
 .person-meters{margin-top:14px;padding-top:14px}
 .person-bank{padding-top:12px}
 .person-investigation{padding:16px}
 .person-history{height:150px;min-height:100px}
 .person-empty{min-height:126px;gap:8px}
 .person-empty .person-empty-mark{display:none}
 .person-feedback{min-height:32px}
 .person-mode{margin:4px 0 12px}
 .person-composer>p{margin:10px 0 0}
 .person-suggestions{margin-top:10px}
}