@font-face{font-family:"D-DIN";src:url("fonts/D-DIN.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"D-DIN";src:url("fonts/D-DIN-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{--app-h:100svh;--sheet:#E7E0C8;--ink:#26281F;--muted:#655E48;--sand:#DBD1BA;--yellow:#FBAE17;--yellow-edge:#C48A12;--brown:#7A4630;--brown-hover:#643a28;--red:#B3261E;--red-edge:#8E1E18;--sans:"D-DIN",Arial,Helvetica,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--sheet);color:var(--ink);font:15px/1.5 var(--sans)}button{-webkit-tap-highlight-color:transparent;font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.5}button:focus-visible{outline:3px solid var(--brown);outline-offset:4px}[hidden]{display:none!important}
main{min-height:var(--app-h);padding:16px 8px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));display:grid;place-items:center;outline:none;overflow:clip}
main[data-view=game][data-phase=report]{overflow:auto;align-content:start;place-items:start center}
.primary{min-height:48px;width:100%;border:0;border-bottom:5px solid var(--yellow-edge);padding:12px 22px;background:var(--yellow);color:var(--ink);letter-spacing:.08em;font-size:12px;font-weight:700}
.splash{width:min(220px,100%)}.round{width:100%;max-width:440px;display:flex;flex-direction:column;gap:16px}.specimen{margin:0}.specimen figcaption{font:10px/1.5 monospace;letter-spacing:.08em;text-align:center;padding-top:10px}
.game-face{position:relative;aspect-ratio:320/420;width:100%;background:#FAFAF7;outline:none;isolation:isolate;user-select:none;-webkit-user-select:none}
.game-face.interactive{background:transparent}.game-face.interactive{touch-action:none;cursor:grab;overflow:visible}.game-face.dragging{cursor:grabbing}.face-sheet{position:absolute;inset:0;pointer-events:none;transform-origin:50% 52%;z-index:1}.face-sheet img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;object-fit:contain;opacity:1;-webkit-user-drag:none}.game-face.interactive .face-sheet img{opacity:.6;filter:grayscale(1)}.game-face.interactive .face-sheet.active{z-index:5}.game-face.interactive .face-sheet.active img,.face-sheet.ghost img{opacity:1;filter:brightness(0)}.face-sheet img[data-part=chin]{transform-origin:50% 0}.face-sheet img.cover{opacity:1!important;filter:none!important}.face-sheet.ghost{z-index:9;pointer-events:none}
.game-face.interactive::before,.game-face.interactive .face-sheet::before{content:"";position:absolute;inset:15px 11px 17px;border:1px solid var(--sand);border-radius:2px;pointer-events:none}
.game-face.interactive::before{z-index:0;background:#FAFAF7}
.face-sheet.ghost::before{background:rgba(250,250,247,.7)}
.game-face.dragging .face-sheet.active::before,.face-sheet.ghost::before{box-shadow:4px 8px 16px rgba(38,40,31,.12)}
.timer{font:28px/1 monospace;text-align:center;color:var(--ink);font-variant-numeric:tabular-nums}
.report{width:100%;max-width:520px;text-align:center}.score{font:36px/1 monospace;margin:24px 0}.report>.primary{max-width:440px}
.save-error{position:fixed;z-index:30;bottom:16px;left:16px;right:16px;max-width:620px;margin:auto;background:var(--sheet);border:2px solid var(--brown);padding:18px}.save-error p{margin:0 0 16px}.save-error button{min-height:44px;background:var(--brown);color:var(--sheet);border:0;padding:8px 14px;margin-right:8px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
:root{--ink:#26281F;--muted:#655E48;--red:#7A4630}
body{font-size:14px}button{border-radius:0}h1,h2,p{margin-top:0}h1{width:100%;margin:0 0 22px;font:700 clamp(36px,10vw,56px)/1.05 var(--sans);letter-spacing:.04em;text-transform:uppercase;text-align:center}h2{font-size:11px;letter-spacing:.12em;margin:32px 0 12px}p{margin-bottom:20px}.muted{color:var(--muted)}.small{font-size:11px;line-height:1.6}.eyebrow{font:10px/1.4 monospace;letter-spacing:.1em}.wide{width:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.secondary{min-height:48px;width:100%;background:var(--brown);border:0;color:var(--sheet);padding:12px 22px;font-size:12px;letter-spacing:.08em;font-weight:700}.danger{min-height:48px;width:100%;background:var(--red);border:0;border-bottom:5px solid var(--red-edge);color:#fff;padding:12px 22px;font-size:12px;letter-spacing:.08em;font-weight:700}.tertiary{min-height:48px;width:100%;padding:12px 22px;background:var(--sand);border:0;color:var(--ink);letter-spacing:.08em;font-size:12px;font-weight:700}.text-button{background:none;border:0;padding:12px 4px;min-height:44px;font-size:10px;font-weight:700;letter-spacing:.08em;text-underline-offset:5px;color:var(--ink)}.text-button:hover{text-decoration:underline}.primary:hover{background:#e09c14}.secondary:hover{background:var(--brown-hover)}.danger:hover{background:#9c211a}.tertiary:hover{background:#d0c6b0}.icon-button:hover{background:var(--brown-hover)}button[data-unavailable]{cursor:default;opacity:.32}
.menu-card{width:100%;max-width:480px;padding:32px 8px}.main-menu{text-align:center;padding:16px}.main-menu .game-brand{display:block;width:100%;height:auto;margin:0 0 16px}.career-line{display:flex;justify-content:space-between;gap:12px;font:10px/1.5 monospace;letter-spacing:.025em;text-align:left}.xp-track{height:3px;background:var(--sand);margin:10px 0 26px;overflow:hidden}.xp-track>span{height:100%;display:block;background:var(--ink)}.menu-actions{display:grid;gap:10px;margin:24px 0}.main-menu .menu-actions{margin:0}.menu-actions .primary span,.menu-actions .secondary span{display:block;font:9px monospace;margin-top:3px;color:var(--muted)}.main-menu .menu-actions .secondary span{color:var(--sheet)}.menu-links{display:flex;justify-content:space-between;gap:12px}.icon-button{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;background:var(--brown);color:var(--sheet);border:0}.game-hud{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;text-align:left}.hud-xp{font:10px/1.4 monospace;color:var(--muted);margin-top:3px}.round{gap:12px;max-width:440px}.round .game-face{width:min(100%,calc((var(--app-h) - 225px)*.7619));margin:auto}.round:has(.first-hint) .game-face{width:min(100%,calc((var(--app-h) - 290px)*.7619))}.round.memorize .game-face{width:min(100%,calc((var(--app-h) - 215px)*.7619))}.part-caption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:min(100%,calc((var(--app-h) - 225px)*.7619));margin:6px auto 0;font:11px/1.4 monospace;letter-spacing:.08em;color:var(--ink)}.part-caption span:last-child{color:var(--muted)}.round.reconstruct{position:relative;padding:56px 0 72px;width:100%;gap:0}.editor-pause{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));z-index:5;display:grid;place-items:center;width:56px;height:56px;padding:0;background:none;border:0;color:var(--ink)}.editor-submit{position:fixed;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));width:auto;z-index:5}.timer{color:var(--ink);font-size:24px}.ready{align-self:stretch;max-height:740px;min-height:min(520px,calc(var(--app-h) - 32px))}.ready-body{display:flex;flex:1;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px}.ready-body h1{margin:12px 0}.ready-body .primary{max-width:300px;margin-top:24px}.ready-body>.muted{font-size:11px}
.help-simple{font:18px/1.5 var(--sans);color:var(--ink);text-align:center}.help-simple p{margin:0 0 24px}.help-swipes{display:grid;gap:32px;margin:0 0 24px}.help-swipe p{margin:0}.help-swipe-visual{display:grid;place-items:center;margin:0 0 12px;color:var(--ink)}.help-swipe-icon{display:block;width:min(100%,160px);height:auto}.record-stats{display:grid;grid-template-columns:1fr 1fr;gap:26px 16px;margin:30px 0}.record-stats dt{font:9px monospace;color:var(--muted);margin-bottom:6px}.record-stats dd{font:28px/1 monospace;margin:0}.history details{border-top:1px solid var(--sand);padding:16px 0}.history summary{display:flex;justify-content:space-between;gap:10px;cursor:pointer;font:10px/1.5 monospace}.history-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.history-pair figure{margin:0}.history-pair img{display:block;width:100%}.history-pair figcaption{font:8px monospace;text-align:center;padding-top:12px}.history details>p{margin:10px 0 0}
main[data-view=start],main[data-view=intro]{background:#000;padding:0;min-height:var(--app-h)}
main[data-view=start]{place-items:stretch}
.start-gate{position:relative;display:grid;place-items:center;width:100%;height:var(--app-h);overflow:hidden}
.start-poster,.start-gate .game-brand,.start-play{grid-area:1/1}
.start-poster{width:100%;height:100%;object-fit:cover;pointer-events:none}
.start-gate .game-brand{display:block;width:min(100%,560px);padding:0 6%;box-sizing:border-box;height:auto;pointer-events:none;z-index:1}
.start-play{z-index:2;display:grid;place-items:center;width:96px;height:96px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(26,27,22,.55);color:#FBAE17;box-shadow:none}
.start-play:hover{background:rgba(26,27,22,.72)}
.start-play svg{display:block;margin-left:6px}main[data-view=menu]{background:var(--sheet);padding:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);place-items:start center}.intro{position:relative;width:100%;height:var(--app-h);background:#000}.intro video{width:100%;height:100%;object-fit:cover;display:block}.intro-controls{position:absolute;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;gap:16px}.intro-button{min-height:44px;background:var(--yellow);color:var(--ink);border:0;font:10px monospace;padding:10px 14px;letter-spacing:.1em;font-weight:700}.sound-toggle{display:grid;place-items:center;width:56px;height:56px;padding:0;background:none;color:#fff;border:0;box-shadow:none;flex-shrink:0}.main-menu .sound-toggle{position:fixed;left:max(8px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));z-index:2;color:var(--ink)}.intro-play{position:absolute;width:auto;left:50%;top:50%;transform:translate(-50%,-50%)}
.report.fax{max-width:440px;padding:56px 0 12px;padding-bottom:calc(108px + env(safe-area-inset-bottom));overflow:visible;width:100%;box-sizing:border-box}.fax-viewport{overflow:hidden;width:100%}.fax-sheet{position:relative;background:#fff;color:var(--ink);padding:16px 14px 32px;text-align:left;transform:translate3d(0,100%,0);transition:transform 4.2s linear}.fax-viewport.is-feeding .fax-sheet{transform:translate3d(0,0,0)}.fax-viewport.is-instant .fax-sheet{transition:none;transform:none}.fax-banner{font:10px/1.4 monospace;letter-spacing:.06em;text-align:center;margin:0 0 10px;color:var(--muted)}.fax-head{display:flex;justify-content:space-between;gap:12px;font:10px/1.4 monospace;letter-spacing:.08em;border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:14px}.fax-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.fax-pair .specimen{margin:0}.fax-pair .game-face{width:100%;background:transparent}.fax-pair figcaption{font:9px/1.4 monospace;letter-spacing:.1em;padding-top:8px;text-align:center}.fax-section{font:10px/1.4 monospace;letter-spacing:.1em;margin:0 0 8px;color:var(--muted);text-align:center}.fax-rows{display:grid;gap:6px;margin-bottom:22px}.fax-row{display:flex;justify-content:space-between;gap:12px;font:11px/1.4 monospace;border-bottom:1px dotted #ddd;padding-bottom:4px}.fax-row.fax-total{font-weight:700;border-bottom-color:#bbb}.fax-foot{margin:28px 0 0;font:9px/1.4 monospace;letter-spacing:.08em;color:var(--muted);text-align:center}.fax-stamp{position:absolute;left:50%;top:50%;z-index:4;min-width:min(78%,260px);padding:18px 22px;border:5px solid var(--brown);color:var(--brown);font:700 clamp(28px,8vw,42px)/1 var(--sans);letter-spacing:.06em;text-align:center;transform:translate(-50%,-50%) rotate(-12deg) scale(1.35);opacity:0;pointer-events:none}.fax-stamp.is-on{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1);transition:opacity .12s ease,transform .4s cubic-bezier(.15,1.5,.3,1)}.fax-stamp.is-open{border-color:var(--muted);color:var(--muted)}.report.fax .next-case{position:fixed;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));width:auto;max-width:none;z-index:5;margin:0}.report.fax>[data-ui=skip-report]{display:block;margin:12px auto 0;position:relative;z-index:2}.report.reward{min-height:min(520px,calc(var(--app-h) - 32px));display:flex;align-items:center;justify-content:center;padding:56px 8px 24px}.reward-stack{display:grid;gap:28px;width:min(100%,320px);text-align:center}.reward-beat{opacity:0;transform:translateY(14px) scale(.96)}.reward-beat.is-on{opacity:1;transform:none;transition:opacity .45s ease,transform .55s cubic-bezier(.16,1.1,.3,1)}.reward-beat .eyebrow{display:block;margin-bottom:8px}.reward-beat strong{display:block;font:700 clamp(32px,9vw,48px)/1.1 var(--sans);letter-spacing:.02em}
@media(min-width:700px){.report.fax{padding-top:10px}.menu-card{padding:44px 8px}.main-menu{padding:16px}}
@media(max-width:350px){main{padding:12px 6px}.menu-card{padding:24px 4px}.main-menu{padding:16px}.fax-pair{gap:10px}.round .game-face{width:min(100%,calc((var(--app-h) - 210px)*.7619))}.round:has(.first-hint) .game-face{width:min(100%,calc((var(--app-h) - 275px)*.7619))}}
.main-menu .menu-actions .primary span{color:var(--ink)}
/* Police lineup: full-bleed white rail, neighbors peek beside the active face. */
.recognition-file{max-width:560px;min-height:min(640px,calc(var(--app-h) - 48px));padding:64px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}.recognition-file .eyebrow{display:block}.recognition-file h1{font-size:clamp(32px,9vw,48px);overflow-wrap:anywhere;margin:18px 0 26px;text-align:center}.recognition-file .case-narrative{text-align:center;max-width:28em}.recognition-file .primary{max-width:300px}.case-narrative{font-size:18px;line-height:1.65;white-space:pre-line;margin-bottom:30px}.recognition-brief{padding-top:60px}.recognition-brief h1{font-size:clamp(34px,9vw,52px);overflow-wrap:anywhere}.recognition-brief .case-narrative{max-width:420px;font-size:16px;margin:12px auto 16px}.recognition-hint{max-width:340px;font-size:16px;line-height:1.5}main[data-kind=recognition]{background:#1A1B16;color:#E7E0C8}
main[data-kind=recognition][data-phase=lineup]{padding-left:0;padding-right:0}
main[data-kind=recognition] .eyebrow{color:#A39B82}
main[data-kind=recognition] .muted{color:#A39B82}
main[data-kind=recognition] .editor-pause{color:#E7E0C8}
main[data-kind=recognition] .recognition-heading{color:#E7E0C8}
main[data-kind=recognition] .recognition-heading .eyebrow{color:#A39B82}
main[data-kind=recognition] .menu-card{color:#E7E0C8}
main[data-kind=recognition] .case-narrative{color:#E7E0C8}
main[data-kind=recognition] .recognition-hint{color:#D5CCB4}
main[data-kind=recognition] .recognition-admin-back{color:#E7E0C8}
main[data-kind=recognition] .bonus-points{color:#FBAE17}
main[data-kind=recognition] .tertiary{background:#2E2F28;color:#E7E0C8}
main[data-kind=recognition] .tertiary:hover{background:#3A3B33}
main[data-kind=recognition] .record-stats dt,main[data-kind=recognition] .career-line,main[data-kind=recognition] .small.muted{color:#A39B82}
main[data-kind=recognition] .xp-track{background:#2E2F28}
main[data-kind=recognition] .xp-track>span{background:#E7E0C8}
main[data-kind=recognition] .history details{border-top-color:#3A3B33}.recognition-round{width:100%;max-width:none;min-height:var(--app-h);padding:56px 0 96px;display:grid;grid-template-rows:auto auto;gap:20px;align-content:center;justify-items:stretch;align-self:stretch;box-sizing:border-box}.recognition-heading{text-align:center;margin:0;padding:0 16px}.recognition-heading h1{font-size:clamp(22px,7vw,34px);line-height:1.1;margin:8px 0}.recognition-heading .eyebrow{font-size:9px}.recognition-rail{display:flex;align-items:flex-start;gap:14px;width:100%;height:auto;padding:0 max(12px,calc((100% - min(72%,340px)) / 2));overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:max(12px,calc((100% - min(72%,340px)) / 2));-webkit-overflow-scrolling:touch;touch-action:pan-x;background:#fff;scrollbar-width:none}.recognition-rail::-webkit-scrollbar{display:none}.recognition-slide{flex:0 0 min(72%,340px);scroll-snap-align:center;scroll-snap-stop:always;background:transparent;user-select:none;-webkit-user-select:none}.recognition-slide img{display:block;width:100%;aspect-ratio:512/680;object-fit:contain;pointer-events:none;-webkit-user-drag:none;background:transparent}.recognition-submit{position:fixed;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));width:auto;z-index:5}.recognition-result{text-align:center;padding-top:60px}.recognition-result h1{font-size:clamp(30px,8vw,44px);margin:14px 0 24px}.recognition-answer{width:min(100%,230px);margin:0 auto 20px}.recognition-answer img{display:block;width:100%;background:white}.recognition-answer strong{display:block;font-size:18px;margin-top:12px}.bonus-points{font-size:40px;font-weight:700;margin:20px 0}.recognition-result>.primary{margin-top:16px}.recognition-admin-back{display:block;margin-top:22px;color:inherit;font-size:12px}@media(max-width:350px){.recognition-rail{gap:10px}}
/* Preferences belong to the device; progress has an explicit separate reset. */
.settings-list{display:grid;gap:0;margin:12px 0 30px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--sand);font-weight:700;letter-spacing:.06em;font-size:12px}.setting-switch{min-width:72px;min-height:44px;padding:10px 16px;background:var(--brown);color:var(--sheet);border:0;font-weight:700;letter-spacing:.08em}.setting-switch[aria-checked=false]{background:var(--sand);color:var(--ink)}.reset-section{margin:36px 0 26px}.reset-section p{margin:10px 0 0;text-align:center}

/* First-play gesture coach: animated hand over the reconstruct face. */
#reconstruction{position:relative}
.coach-gesture{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;pointer-events:none;z-index:4;text-align:center;padding:12px}
.coach-hand{width:min(38%,132px);height:auto;display:block;animation:coach-swipe-y 1.35s ease-in-out infinite}
.coach-gesture[data-axis=x] .coach-hand{animation-name:coach-swipe-x}
.coach-gesture p{margin:0;max-width:220px;font:700 14px/1.35 var(--sans);letter-spacing:.02em;color:var(--ink);text-shadow:0 0 6px #fff,0 0 2px #fff}
.coach-gesture strong{font-weight:700}
@keyframes coach-swipe-y{0%,100%{transform:translate3d(0,22px,0)}50%{transform:translate3d(0,-22px,0)}}
@keyframes coach-swipe-x{0%,100%{transform:translate3d(-26px,0,0)}50%{transform:translate3d(26px,0,0)}}
@media(prefers-reduced-motion:reduce){.coach-hand{animation:none}}
.editor-pause .menu-coffee{display:block;width:40px;height:40px}

/* Levels pace learning; promotions mark longer stretches of service. */
.career-title{font:700 24px/1.2 var(--sans);text-transform:uppercase;margin-bottom:12px}
.promotion-goal{display:grid;gap:5px;margin:18px 0 26px;text-align:left}
.promotion-goal>strong{font-size:18px;line-height:1.3}
.rank-track{height:3px;background:var(--sand);overflow:hidden;margin-top:6px}
.rank-track>span{display:block;height:100%;background:var(--brown)}
.career-line+.xp-track{margin-bottom:16px}
.service-continues{margin-top:20px}
.reward-level>strong{font-size:32px}
.promotion-card{width:100%;max-width:440px;text-align:center;padding:64px 16px 24px}
.promotion-card>.eyebrow{display:block}
.promotion-stamp{display:table;margin:32px auto;border:5px double var(--brown);padding:14px 18px;color:var(--brown);font:700 clamp(28px,9vw,40px)/1 var(--sans);letter-spacing:.08em;transform:rotate(-7deg);animation:promotion-stamp .5s cubic-bezier(.15,1.35,.3,1) both}
.promotion-card h1{font-size:clamp(32px,9vw,48px);margin:10px 0 18px;overflow-wrap:anywhere}
.promotion-card>p.small{margin-bottom:8px}
.promotion-card .promotion-goal{border-top:1px solid var(--sand);padding-top:18px;margin:28px 0}
.promotion-card>.primary{margin-top:12px}
@keyframes promotion-stamp{from{opacity:0;transform:rotate(-11deg) scale(1.45)}to{opacity:1;transform:rotate(-7deg) scale(1)}}
@media(max-height:650px){.promotion-card{padding-top:56px}.promotion-stamp{margin:22px auto}.promotion-card .promotion-goal{margin:18px 0}}


/* Desktop: keep the game at a phone-like width. */
.phone-shell,.phone-screen{min-height:var(--app-h)}
.phone-screen{position:relative}
@media(min-width:560px){
body{display:flex;justify-content:center}
.phone-shell{width:100%;max-width:500px;min-height:var(--app-h);background:var(--sheet);transform:translateZ(0)}
.phone-screen{width:100%;min-height:var(--app-h)}
.save-error{left:0;right:0;max-width:500px}
}