body.agent-game { background:#edf5f1; color:#405c65; }
body.agent-game .site-header,body.agent-game > footer { display:none; }
body.agent-game #app { width:min(1100px,calc(100% - 28px)); max-width:1100px; padding:0; margin:0 auto; }
.ag-shell { min-height:100dvh; padding:7px 0 18px; }.ag-shell * { box-sizing:border-box; letter-spacing:0; }.ag-shell h1,.ag-shell h2,.ag-shell h3,.ag-shell p { margin-top:0; }.ag-shell h2:focus { outline:none; }
.ag-shell button,.ag-shell .button,.ag-shell summary { min-width:48px; min-height:48px; font:inherit; line-height:1.35; border-radius:6px; }.ag-shell button { cursor:pointer; }.ag-shell button:disabled { cursor:default; }.ag-shell button:focus-visible,.ag-shell input:focus-visible,.ag-shell a:focus-visible,.ag-shell summary:focus-visible { outline:3px solid #a58abd; outline-offset:3px; }
.ag-shell .ag-primary { padding:10px 16px; background:#4b9395; color:white; border:2px solid #397d82; box-shadow:0 3px 0 #386b76; font-size:18px; font-weight:750; }.ag-primary:hover { background:#3d8086; }.ag-primary:disabled { opacity:.55; box-shadow:none; }
.ag-shell .ag-secondary { padding:9px 13px; color:#54747c; background:#fffdf1; border:2px solid #becfc2; font-size:16px; }.ag-secondary:disabled { opacity:.55; }
.ag-toolbar { display:grid; grid-template-columns:auto 1fr auto 48px auto; gap:10px; align-items:center; min-height:65px; padding-bottom:7px; }.ag-toolbar h1 { font-family:inherit; font-size:18px; line-height:1.25; margin:0 0 3px; }.ag-toolbar span { font-size:13px; }.ag-toolbar .ag-back { font-size:14px; color:#79384b; padding:8px; white-space:nowrap; }.ag-toolbar .ag-sound { padding:0; font-size:23px; }.ag-motion { display:flex; align-items:center; gap:5px; min-width:48px; min-height:48px; font-size:13px; }.ag-motion input { width:22px; height:22px; accent-color:#4b9395; }
.ag-intro { text-align:center; }.ag-intro > span { display:block; font-weight:700; color:#a48b62; margin:15px 0 9px; }.ag-intro h2 { font-size:33px; color:#56818c; margin:0 0 12px; }.ag-intro p { font-size:19px; line-height:1.5; max-width:840px; margin:0 auto 17px; }.ag-cover-image { display:block; width:100%; height:auto; }.ag-intro > .ag-cover-image { max-height:420px; object-fit:contain; margin:20px auto 12px; }.card-art .ag-cover-image { width:100%; height:100%; object-fit:cover; background:#e1e7ce; }.ag-intro .ag-intro-note { font-size:15px; }
.ag-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:36px; padding:4px 0; }.ag-heading > span { font-size:16px; font-weight:750; color:#9c8b69; }.ag-heading h2 { font-family:inherit; font-size:23px; color:#56818c; margin:0; }.ag-instruction { font-family:inherit; font-size:20px; line-height:1.3; min-height:26px; margin:4px 0 10px; }
.ag-layout { display:grid; grid-template-columns:minmax(0,1fr) 205px; gap:17px; align-items:start; min-height:320px; }.ag-paper { position:relative; min-width:0; padding:12px 17px 8px; background:#fffdf2; border:2px solid #d2ceb9; border-top:8px solid #c4b3d1; border-radius:6px; box-shadow:0 4px 0 #dbdccb; }.ag-paper-top { display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:24px; margin-bottom:8px; }.ag-paper-top > span { font-size:12px; color:#9d927e; }.ag-paper-top ol { list-style:none; display:flex; gap:13px; padding:0; margin:0; font-size:12px; color:#a6a49a; }.ag-current-step { color:#658a8e; font-weight:750; text-decoration:underline; text-underline-offset:4px; }
.ag-facts { display:grid; gap:7px; min-height:151px; align-content:start; }.ag-shell .ag-fact { display:block; width:100%; min-height:46px; padding:8px 11px; text-align:left; font-size:18px; line-height:1.35; border:2px solid #e0decf; border-radius:5px; background:#fffdf2; color:#405c65; }.ag-fact:disabled { opacity:1; }.ag-fact:not(:disabled):hover { border-color:#a4bfc0; }.ag-shell .ag-fact-selected { border-color:#619ba4; outline:2px solid #8db6bd; outline-offset:1px; }.ag-known-fact { background:#f2f3e4!important; border-color:#b9c5ad!important; }
.ag-question { margin-top:9px; padding:8px 11px; min-height:64px; border-left:4px solid #d8c389; border-radius:4px; background:#faf1d6; }.ag-question > span { display:block; font-size:11px; color:#a08d69; line-height:1.25; margin-bottom:3px; }.ag-question strong { display:block; font-size:19px; line-height:1.35; color:#556e75; }.ag-note-slot { min-height:66px; padding-top:7px; }.ag-pocket,.ag-witness-answer { border:1px dashed #b4c8bf; border-radius:4px; padding:6px 9px; background:#eef5ee99; }.ag-pocket > span,.ag-witness-answer > span { display:block; font-size:11px; line-height:1.25; font-weight:750; color:#7f9b90; margin-bottom:3px; }.ag-pocket p,.ag-witness-answer p { font-size:15px; line-height:1.3; margin:0; }.ag-witness-answer { border:1px solid #aac9bf; background:#e8f4ea; }.ag-witness-answer p { font-size:17px; }
.ag-stamp { position:absolute; right:24px; top:16px; padding:7px 12px; border:3px double #72a48f; border-radius:4px; color:#608d7b; background:#f9fcf0f5; font-size:20px; transform:rotate(-7deg); }
.ag-sidebar { min-width:0; position:relative; }.ag-agent-portrait { height:170px; display:flex; align-items:end; justify-content:center; }.ag-agent-portrait > .ag-character { width:140px; height:170px; position:relative; z-index:1; }.ag-office { position:absolute; top:120px; left:0; width:100%; height:55px; pointer-events:none; }.ag-radio { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; margin:2px 0 9px; color:#839993; font-size:12px; }.ag-radio svg { width:29px; height:40px; }.ag-radio-on { color:#56888c; font-weight:750; }.ag-missing-note { font-size:13px; line-height:1.35; color:#849886; margin:0 0 9px; }.ag-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:8px; border:2px solid #d0bba0; border-radius:5px; background:#ead8ba; }.ag-photo { position:relative; min-width:0; height:48px; display:flex; align-items:center; justify-content:center; border:2px solid #faf6e5; border-radius:2px; background:#f1ebda; color:#b2a990; font-size:11px; }.ag-photo-done { background:#ecf2df; }.ag-photo .ag-character { width:100%; height:100%; }.ag-photo-done > span { position:absolute; bottom:-1px; right:1px; font-size:8px; color:#9a947c; background:#fff9e7; padding:0 2px; }
.ag-feedback { display:flex; flex-direction:column; justify-content:center; min-height:94px; margin:10px 0 9px; padding:9px 13px; border-left:4px solid #c6b5d0; border-radius:4px; background:#f8f7fb; font-size:18px; line-height:1.4; }.ag-feedback strong { font-size:13px; margin-bottom:4px; color:#9a83aa; }.ag-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; min-height:76px; }.ag-main-controls { display:flex; align-items:center; gap:12px; min-width:0; flex-wrap:wrap; }.ag-tools { display:flex; gap:8px; justify-content:end; flex-wrap:wrap; max-width:220px; }.ag-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; width:100%; }.ag-shell .ag-choice { min-height:70px; padding:10px 11px; border:2px solid #aac6c4; background:#fffdf2; color:#4d767b; font-size:18px; font-weight:750; }.ag-choice:hover { background:#ecf4e9; }.ag-wait { font-size:18px; color:#7e988c; }
.ag-solver { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin:0; }.ag-number { font-size:29px; font-weight:750; line-height:1.2; min-width:30px; text-align:center; }.ag-equals { font-size:27px; line-height:1.2; }.ag-signs { display:flex; gap:5px; }.ag-shell .ag-sign { width:48px; height:50px; padding:0; border:2px solid #b6c8c6; background:#fffdf2; color:#557d85; font-size:29px; }.ag-shell .ag-sign-selected { border-color:#619ba4; background:#e1eee7; box-shadow:0 0 0 2px #acd0c6; }.ag-sign:disabled { opacity:1; }.ag-answer-label { display:flex; flex-direction:column; align-items:center; position:relative; }.ag-answer-label > span { position:absolute; font-size:10px; color:#97a59b; top:-17px; line-height:1.2; }.ag-answer-label input { width:74px; height:52px; border:2px solid #8bafb3; border-radius:5px; background:white; text-align:center; font:inherit; font-size:28px; font-weight:750; color:#53777e; }.ag-solved-number { min-width:74px; min-height:52px; display:flex; align-items:center; justify-content:center; font-size:29px; font-weight:750; color:#5d957c; background:#e8f2df; border:2px solid #afc5a4; border-radius:5px; }.ag-solver .ag-primary { font-size:17px; padding:10px 12px; }
.ag-help { width:min(660px,calc(100% - 28px)); max-height:90dvh; border:2px solid #aec5bd; border-radius:8px; padding:22px; background:#fffdf2; color:#405c65; font-size:18px; line-height:1.5; }.ag-help::backdrop { background:#405c6555; }.ag-help h2 { font-size:25px; }
.ag-finish { text-align:center; }.ag-finish h2 { font-size:31px; margin:16px 0 10px; color:#5b8d87; }.ag-finish > p { font-size:19px; }.ag-finish-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; max-width:840px; margin:20px auto; padding:18px; border:5px solid #c2aa8a; border-radius:7px; background:#e5cfa9; }.ag-resident-photo { display:flex; flex-direction:column; align-items:center; min-width:0; padding:8px; background:#fff9e8; border:2px solid #f9f1d9; box-shadow:0 2px 0 #bca78a; }.ag-resident-photo .ag-character { width:100%; height:125px; }.ag-resident-photo > span { font-size:11px; color:#a69c81; margin:4px 0; }.ag-resident-photo > strong { font-size:14px; color:#6c8e88; line-height:1.3; }.ag-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }.ag-stats > div { display:flex; flex-direction:column; gap:5px; padding:12px; border:1px solid #cad5c5; border-radius:6px; background:#fffdf2; }.ag-stats strong { font-size:28px; color:#659992; }.ag-stats span { font-size:14px; }.ag-finish-actions { display:flex; justify-content:center; gap:12px; margin:17px 0; }.ag-finish details { border-top:1px solid #c4d2c0; padding:9px 0; text-align:left; font-size:18px; line-height:1.5; }.ag-finish summary { padding:10px 0; font-weight:750; cursor:pointer; }.ag-bonus-options { display:flex; gap:10px; }.ag-bonus-feedback { min-height:54px; margin:10px 0; }
@keyframes ag-stamp-in { from { opacity:.1; transform:rotate(-12deg) scale(1.08); } to { opacity:1; transform:rotate(-7deg) scale(1); } }
@keyframes ag-cheer { 45% { transform:translateY(-5px); } }
.phase-stamp .ag-stamp { animation:ag-stamp-in .45s ease both; }.phase-stamp .ag-agent-portrait .ag-character { animation:ag-cheer .8s ease both; }.ag-paused * { animation:none!important; transition:none!important; }
@media (min-width:901px) and (max-height:760px) { .ag-shell { padding-top:3px; }.ag-toolbar { min-height:60px; }.ag-layout { min-height:310px; }.ag-feedback { min-height:88px; margin-top:8px; }.ag-paper { padding-top:9px; }.ag-agent-portrait { height:160px; }.ag-agent-portrait > .ag-character { height:158px; } }
@media (max-width:1000px) { .ag-toolbar { grid-template-columns:auto 1fr auto 48px; }.ag-motion { grid-column:1/-1; justify-self:end; }.ag-layout { grid-template-columns:minmax(0,1fr) 160px; gap:12px; }.ag-board { gap:3px; padding:5px; }.ag-photo { height:42px; }.ag-paper { padding-left:12px; padding-right:12px; }.ag-paper-top > span { font-size:11px; }.ag-paper-top ol { font-size:11px; gap:8px; }.ag-radio { font-size:11px; }.ag-shell .ag-choice { font-size:17px; padding:9px 8px; }.ag-controls { grid-template-columns:1fr; }.ag-tools { justify-content:start; max-width:none; } }
@media (max-width:760px) { .ag-play { display:flex; flex-direction:column; }.ag-heading { order:0; flex-direction:column; align-items:start; gap:4px; }.ag-heading h2 { font-size:23px; }.ag-heading > span { font-size:14px; }.ag-instruction { order:1; font-size:19px; min-height:50px; margin:5px 0 8px; }.ag-layout { display:contents; }.ag-paper { order:2; }.ag-feedback { order:3; min-height:130px; }.ag-controls { order:4; }.ag-sidebar { order:5; display:grid; grid-template-columns:130px 1fr; gap:8px 12px; align-items:center; margin-top:20px; }.ag-agent-portrait { grid-row:1/3; height:165px; }.ag-agent-portrait > .ag-character { height:160px; width:125px; }.ag-office { display:none; }.ag-radio { grid-column:2; margin:0; justify-content:start; }.ag-board { grid-column:2; grid-template-columns:repeat(4,minmax(0,1fr)); }.ag-missing-note { grid-column:1/-1; }.ag-facts { min-height:0; }.ag-note-slot { min-height:65px; }.ag-stamp { top:8px; right:12px; font-size:18px; } }
@media (max-width:600px) { body.agent-game #app { width:calc(100% - 14px); }.ag-toolbar { grid-template-columns:1fr auto 48px; gap:7px; min-height:0; }.ag-toolbar > div { grid-row:1; grid-column:1/3; }.ag-toolbar h1 { font-size:17px; }.ag-toolbar span { font-size:12px; }.ag-toolbar .ag-back { grid-row:2; }.ag-toolbar [data-ag-action="help"] { grid-row:2; grid-column:2; }.ag-toolbar .ag-sound { grid-row:2; grid-column:3; }.ag-motion { grid-row:1; grid-column:3; justify-self:center; justify-content:center; flex-direction:column; margin:0; font-size:10px; }.ag-motion input { width:26px; height:26px; }.ag-heading h2 { font-size:22px; }.ag-paper { padding:9px 8px 7px; }.ag-paper-top { flex-direction:column; align-items:start; gap:5px; margin-bottom:9px; }.ag-paper-top ol { gap:14px; font-size:11px; }.ag-shell .ag-fact { font-size:17px; padding:8px; }.ag-question { padding:8px; }.ag-question strong { font-size:18px; }.ag-question > span { font-size:10px; }.ag-note-slot { min-height:70px; }.ag-pocket p { font-size:15px; }.ag-witness-answer p { font-size:17px; }.ag-feedback { min-height:150px; padding:9px; font-size:17px; }.ag-choices { grid-template-columns:1fr; gap:8px; }.ag-shell .ag-choice { min-height:52px; font-size:17px; }.ag-controls { gap:12px; }.ag-main-controls { display:flex; flex-direction:column; align-items:stretch; }.ag-main-controls > .ag-primary { width:100%; }.ag-solver { gap:9px; justify-content:center; }.ag-number { font-size:27px; min-width:27px; }.ag-equals { font-size:25px; }.ag-signs { gap:4px; }.ag-shell .ag-sign { width:48px; }.ag-answer-label input { width:65px; }.ag-solver > .ag-primary { width:100%; margin-top:5px; }.ag-sidebar { grid-template-columns:100px 1fr; gap:8px; }.ag-agent-portrait { height:140px; }.ag-agent-portrait > .ag-character { width:100px; height:135px; }.ag-photo { height:45px; }.ag-intro h2 { font-size:28px; }.ag-intro p { font-size:17px; }.ag-intro .ag-intro-note { font-size:14px; }.ag-finish h2 { font-size:28px; }.ag-finish > p { font-size:17px; }.ag-finish-board { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:10px; border-width:4px; }.ag-resident-photo { padding:6px; }.ag-resident-photo .ag-character { height:115px; }.ag-resident-photo > strong { font-size:13px; }.ag-stats { grid-template-columns:1fr; gap:7px; }.ag-stats > div { flex-direction:row; align-items:center; gap:12px; text-align:left; }.ag-stats strong { min-width:35px; }.ag-finish-actions { flex-direction:column; }.ag-finish details { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { .ag-shell * { animation:none!important; transition:none!important; } }
.ag-stamp { top:auto; bottom:14px; right:18px; }.phase-stamp .ag-note-slot,.phase-ready .ag-note-slot { padding-right:160px; }
.ag-shell .ag-fact { min-height:48px; }
@media (max-width:600px) { .ag-stamp { position:static; display:inline-block; margin:5px 0 3px; }.phase-stamp .ag-note-slot,.phase-ready .ag-note-slot { padding-right:0; } }