/* FBI Issue 04 — bespoke comic-book polish and multi-stage detective gameplay */
:root{--print-yellow:#ffd16f;--print-ink:#101324;--print-lilac:#b69bff;--print-pink:#f57aa7}
body{background:#10111f}
.paper-grain{opacity:.48}
.workspace{background-image:radial-gradient(circle at 18% 30%,rgba(255,185,85,.022) 0 1px,transparent 1.2px),linear-gradient(140deg,rgba(147,104,159,.03),transparent 42%);background-size:11px 11px,auto}
.utility-row{color:#c7baca;border-bottom:1px dashed #52455f;padding-bottom:9px;margin-bottom:15px}
.utility-row .tiny-square{transform:rotate(45deg)}
.topbar{background:#101224}
.navitem:hover{color:#ffdf82}
.sideitem{transition:background .18s,transform .18s}
.sideitem:hover{transform:translateX(3px)}
.brand-copy small{letter-spacing:.75px}
.hero-grid{border-color:#ffd16f}
.hero-copy h1{line-height:.91}
.hero-copy h1 em{background:#ffcd64}
.hero-grid:after{background-image:radial-gradient(circle at center,#fbbf6680 0 1px,transparent 1.4px);background-size:12px 12px;opacity:.11}
.hero-art-img{animation:heroDrift 10s ease-in-out infinite alternate;filter:saturate(1.19) contrast(1.08)}
.hero-art:before{background:linear-gradient(90deg,#121628,#442f53);box-shadow:8px 0 #ffcb64}
.hero-art-label{border:3px solid #ffd06e;background:rgba(10,12,26,.86);transform:rotate(-1.5deg)}
.agent-speech{border-radius:0 8px 8px 8px;box-shadow:5px 6px #0b0c19}
.screen-heading .overline{color:#f9b9ce}
.screen-heading h2{line-height:.88}
.screen-heading h2 em{color:#ffce75}
.arcade-choice{position:relative}
.arcade-choice.active{box-shadow:inset 0 -4px #ffcd6c}
.arcade-choice span{padding:2px 5px;background:#fc76a2;color:#131421;font-size:10px;transform:rotate(-5deg);display:inline-block;margin-left:6px}
.issue-four-banner{position:relative;margin-top:16px;margin-bottom:17px;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:17px 21px;background:linear-gradient(105deg,#f8c660 0%,#ffd996 55%,#f3ba5c 100%);border:3px solid #0b0c1e;color:#18172a;box-shadow:7px 7px 0 #080b15;overflow:hidden}
.issue-four-banner:before{content:'04';position:absolute;font:900 185px/.8 Impact,sans-serif;right:21%;top:-27px;opacity:.08;transform:rotate(13deg);pointer-events:none}
.issue-four-banner>div{position:relative}
.issue-four-banner span{font:900 12px var(--fonthead);letter-spacing:1.5px;color:#8d3e5d}
.issue-four-banner h3{font:900 clamp(20px,2.8vw,37px)/.9 var(--fonthead);margin:4px 0 7px}
.issue-four-banner p{font:600 12px/1.4 var(--fontbody);margin:0;max-width:660px}
.issue-four-actions{display:flex;flex-shrink:0;gap:9px}
.issue-four-actions button{background:#141b30;color:#ffe6af;border:2px solid #090a18;box-shadow:4px 4px 0 #a36b40;padding:12px 14px;font:900 15px var(--fonthead);white-space:nowrap}
.issue-four-actions button:last-child{background:#7d385f}
.issue-four-actions button:hover{transform:translateY(-2px)}
.field-progress-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;background:#28223a;border:2px solid #a47a85;position:relative;margin:0 0 10px;flex-wrap:wrap}
.field-progress-banner span{font:900 10px var(--fontbody);color:#e4b0cc;letter-spacing:.7px}
.field-progress-banner strong{font:900 16px var(--fonthead);color:#ffd27d}
.field-missions{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.field-mission{padding:12px 10px;min-height:126px;background:linear-gradient(143deg,#2e2642,#1d223a);transition:transform .18s,border-color .18s;box-shadow:4px 4px #090b18}
.field-mission strong{font-size:clamp(19px,1.65vw,28px)}
.field-mission b{font-size:10px;align-items:flex-start}
.field-mission i{font-size:8px;white-space:normal;text-align:right}
.field-mission small{font-size:9px}
.field-mission.selected{background:linear-gradient(140deg,#44344f,#2b263e);border-color:#ffcd7a;transform:translateY(-2px)}
.field-topbar{background:#ffc964}
.field-dossier{border-color:#ca80a3}
.field-conversation{background:#ffedc1;border:3px solid #141628}
.field-conversation b{color:#984b72}
.field-clues{gap:8px}
.field-clue.done{background:#263e3d;border-color:#8ddbb2}
.field-clue.done b{color:#c6f9db}
.field-clue small{line-height:1.4}
.field-timeline{margin:11px 0;padding:13px;border:3px solid #f2bd5b;background:linear-gradient(145deg,#2f2946,#181b30);box-shadow:5px 5px 0 #0e0d1b}
.field-timeline>b{display:block;font:900 22px/.98 var(--fonthead);color:#ffdc89}
.field-timeline>small{display:block;margin-top:4px;color:#bcb1cd;font-size:11px}
.timeline-slots{display:grid;gap:5px;margin:13px 0}
.timeline-slot{display:block;border:1px dashed #887993;background:#161b2b;min-height:32px;padding:7px 10px;font:900 12px var(--fonthead);color:#9c90ae}
.timeline-slot.filled{border:1px solid #ffcb75;color:#ffcf79;background:#342943}
.timeline-options{display:grid;gap:7px}
.timeline-options button{padding:9px;text-align:left;background:#4c385a;border:2px solid #886f94;color:#fff1db;font:900 12px var(--fonthead)}
.timeline-options button:hover:not(:disabled){border-color:#ffe1a0;transform:translateX(2px)}
.timeline-options button:disabled{opacity:.35}
.timeline-complete{background:#174635;color:#aaf7d0;border:1px solid #67ce9d;padding:10px;font:900 12px var(--fonthead)}
#timelineReset{margin-top:8px;background:none;border:0;color:#ffd27f;text-decoration:underline;font:900 12px var(--fonthead)}
/* caseboard: tactile paper cards, detective strings, true game state */
.boardgame-shell{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px;align-items:start;margin-top:18px}
.boardgame-intro{position:relative;border:5px solid #e6b66a;background:#292138;box-shadow:7px 7px #0d0b1c;overflow:hidden}
.boardgame-cover{padding:21px 18px 18px;background:radial-gradient(circle at 82% 13%,#593352,#261c39);color:#f9ecdc}
.boardgame-cover span{font:900 10px var(--fontbody);letter-spacing:1.5px;color:#ffcd82}
.boardgame-cover h3{font:900 42px/.83 var(--fonthead);margin:17px 0 17px;transform:skew(-2deg)}
.boardgame-cover h3 em{font-style:normal;color:#ffc662}
.boardgame-cover p{font-size:12px;line-height:1.55;color:#d0c5d8}
.boardgame-tiny{font:900 11px var(--fonthead);color:#ff8ead;margin-top:20px}
.boardgame-intro img{width:100%;height:220px;display:block;object-fit:cover;object-position:center;filter:saturate(1.14) contrast(1.08)}
.boardgame-play{min-width:0;background:#201d31;border:5px solid #855b7c;box-shadow:8px 8px #090b16}
.boardgame-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 17px;background:linear-gradient(95deg,#342b44,#25243a);border-bottom:4px solid #c88a79}
.boardgame-top small{font:900 11px var(--fontbody);letter-spacing:1px;color:#f8c168}
.boardgame-top h3{font:900 clamp(27px,3vw,42px)/.91 var(--fonthead);color:#fff0db;margin:7px 0}
.boardgame-top p{font:600 12px/1.5 var(--fontbody);color:#c7bbcb;margin:0}
.boardgame-state{text-align:right;min-width:60px}.boardgame-state b{display:block;font:900 35px var(--fonthead);color:#ffcf76}.boardgame-state small{font-size:8px}
.evidence-board{position:relative;padding:23px 24px;background:#6b4e4d;background-image:radial-gradient(circle at 2px 2px,#342c36 1px,transparent 1.4px),repeating-linear-gradient(27deg,#765953,#765953 10px,#74554f 10px,#74554f 20px);background-size:12px 12px,auto;min-height:340px;isolation:isolate}
.evidence-board:before{content:'';position:absolute;inset:12px;border:2px solid #ceb08f;opacity:.35;pointer-events:none}
.evidence-threads{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;filter:drop-shadow(1px 1px 0 #372329)}
.evidence-board-cards{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 16px}
.evidence-note{position:relative;display:flex;flex-direction:column;text-align:left;min-width:0;min-height:138px;padding:16px 13px 12px;border:3px solid #fff4dc;background:linear-gradient(167deg,#fff1d5,#efcf9d);box-shadow:5px 5px 0 #231b28;color:#191624;transform:rotate(-.8deg);transition:transform .15s,border-color .15s;cursor:pointer}
.evidence-note:nth-child(2n){transform:rotate(1.5deg)}
.evidence-note:hover{transform:rotate(0) translateY(-2px)}
.evidence-note.selected{border-color:#ff7899;background:#ffe9c9;box-shadow:0 0 0 3px #ff7aa0,5px 5px 0 #241b25;transform:rotate(0)}
.evidence-note.correct{border-color:#6ebc7d;box-shadow:0 0 0 2px #9ee7a1,5px 5px #241b25}
.evidence-pin{position:absolute;top:4px;left:50%;color:#d44260;text-shadow:1px 2px 0 #633c44;font-size:18px}
.evidence-glyph{display:block;width:max-content;background:#27223c;color:#fdd08b;font:900 12px var(--fonthead);letter-spacing:.5px;padding:5px 7px;margin:4px 0 7px;transform:rotate(-4deg)}
.evidence-note b{font:900 19px/.98 var(--fonthead)}
.evidence-note small{margin-top:6px;font:650 10px/1.32 var(--fontbody);color:#4a3a4b}
.evidence-index{position:absolute;right:8px;top:6px;font:800 10px var(--fontbody);color:#958170}
.boardgame-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:15px 17px;background:#282339}
.boardgame-controls button{font-size:12px;padding:10px 12px}
.boardgame-controls span{font:800 11px/1.35 var(--fontbody);color:#ffd3a3;flex:1 1 170px}
.boardgame-controls button:disabled{opacity:.5;cursor:not-allowed}
.board-shake{animation:boardShake .28s ease-in-out}
@keyframes boardShake{0%,100%{transform:translateX(0)}25%{transform:translateX(5px)}75%{transform:translateX(-5px)}}
.v4-achievement-wrap{background:#1c1f33;border:2px solid #685a6d;padding:17px}
.v4-achievement-wrap h3{display:flex;justify-content:space-between;gap:8px;align-items:center;font:900 22px var(--fonthead);color:#ffcd70}
.v4-achievement-wrap h3 small{font-size:10px;color:#9f94a8}
.v4-patches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:13px}
.v4-patch{display:flex;align-items:center;flex-direction:column;gap:6px;text-align:center;padding:10px 7px;min-height:115px;background:#27283e;border:2px dashed #51485e;opacity:.5}
.v4-patch.unlocked{opacity:1;border-style:solid;border-color:#f3c473;background:linear-gradient(160deg,#4f3d4e,#302838)}
.v4-patch>span{font-size:27px;color:#ffcf69}
.v4-patch b{font:900 13px/.95 var(--fonthead);color:#fff2d8}
.v4-patch small{font:650 10px/1.2 var(--fontbody);color:#b8adbf}
.footer-line::before{content:'ISSUE 04'!important}
@media(max-width:1520px){.field-missions{grid-template-columns:repeat(3,minmax(0,1fr))}.field-mission strong{font-size:26px}.field-mission:last-child{grid-column:auto}}
@media(max-width:1250px){.boardgame-shell{grid-template-columns:1fr}.boardgame-intro{display:grid;grid-template-columns:1fr 230px}.boardgame-intro img{height:100%;max-height:300px}.issue-four-banner{align-items:flex-start}.issue-four-actions{flex-direction:column}.v4-patches{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:870px){.field-missions{grid-template-columns:repeat(2,minmax(0,1fr))}.field-mission strong{font-size:22px}.issue-four-banner{display:block}.issue-four-actions{flex-direction:row;margin-top:13px;flex-wrap:wrap}.boardgame-cover h3{font-size:43px}}
@media(max-width:640px){.field-missions{grid-template-columns:1fr 1fr}.field-mission:last-child{grid-column:auto}.field-progress-banner{gap:7px}.field-progress-banner span:last-child{width:100%}.issue-four-actions button{font-size:12px;padding:10px}.boardgame-intro{grid-template-columns:1fr 130px}.boardgame-cover{padding:13px}.boardgame-cover h3{font-size:32px}.boardgame-cover p{font-size:10px}.boardgame-intro img{height:100%;min-height:205px}.boardgame-top{padding:12px}.boardgame-top h3{font-size:28px}.evidence-board{padding:15px 11px}.evidence-board-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}.evidence-note{min-height:140px;padding:14px 9px 10px}.evidence-note b{font-size:17px}.evidence-note small{font-size:9px}.boardgame-controls{padding:12px;gap:7px}.boardgame-controls button{font-size:11px;padding:10px 9px}.v4-patches{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:390px){.boardgame-intro{display:block}.boardgame-intro img{display:none}.field-missions{grid-template-columns:1fr}.field-mission{min-height:72px}}
@media(prefers-reduced-motion:reduce){.hero-art-img,.board-shake{animation:none!important}.field-mission,.evidence-note,.issue-card{transition:none!important}}

/* Issue cover cards: artwork is part of the actual HTML cards, not a page-size background. */
.field-mission{overflow:hidden;padding-top:0}
.field-mission-thumb{display:block;position:relative;height:78px;margin:0 -10px 11px;overflow:hidden;background:#322740;border-bottom:2px solid #d6a06a}
.field-mission-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(1.25) contrast(1.1)}
.field-mission-thumb:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#221c34bb,transparent 65%)}
.field-mission-thumb>span{position:absolute;z-index:1;right:7px;bottom:5px;font:900 36px/.8 var(--fonthead);color:#ffdb87;text-shadow:2px 2px 0 #111227}
.field-mission.selected .field-mission-thumb{border-bottom-color:#ffce71}
.field-mission:hover .field-mission-thumb img{transform:scale(1.055);transition:transform .22s}
.field-mission strong{min-height:2em}
.boardgame-cover h3{overflow-wrap:anywhere}
@media(max-width:640px){.field-mission-thumb{height:63px}.field-mission strong{min-height:0}}

/* Panel microinteractions: character reacts to cursor position and click. */
.hero-art{--hero-x:55%;--hero-y:42%}
.hero-reactive-glint{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 170px 220px at var(--hero-x) var(--hero-y),rgba(255,237,157,.21),transparent 76%);mix-blend-mode:screen;opacity:.35;transition:opacity .3s}
.hero-art:hover .hero-reactive-glint{opacity:.76}
.hero-art.hero-react .agent-speech{animation:speechPunch .4s ease}
@keyframes speechPunch{0%{transform:rotate(-4deg) scale(.89)}65%{transform:rotate(1deg) scale(1.035)}100%{transform:rotate(-4deg) scale(1)}}
.screen.active.fresh-screen{animation:panelIn .28s ease-out}
@keyframes panelIn{from{opacity:.92;filter:brightness(.84);transform:translateY(5px)}to{opacity:1;filter:brightness(1);transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.screen.active.fresh-screen,.hero-art.hero-react .agent-speech{animation:none}}