:root{color-scheme:dark;--bone:#e9ddbf;--muted:#9c9f90;--rust:#d25035;--brass:#bc9c63;--ink:#111b20;--mono:'Courier New',monospace;--display:Impact,'Arial Narrow','Liberation Sans Narrow',sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--bone)}body{font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #f1d390;outline-offset:5px}button{border:0}button:hover{filter:brightness(1.17)}.hidden{display:none!important}.screen{position:absolute;inset:0}.title-screen{isolation:isolate;overflow:hidden}.cover-art,.cover-shade,.grain{position:absolute;inset:0;pointer-events:none}.cover-art{background:#172226 url('assets/cover.png') 65% 50%/cover no-repeat;z-index:-4}.cover-shade{background:linear-gradient(90deg,rgba(8,16,20,.96) 0%,rgba(8,16,20,.8) 28%,rgba(8,16,20,.24) 60%,rgba(8,16,20,.05) 100%),linear-gradient(0deg,#09141bec 0%,transparent 22%,transparent 80%,#0a151bab);z-index:-3}.grain{opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.35' filter='url(%23n)'/%3E%3C/svg%3E");z-index:5;mix-blend-mode:soft-light}.masthead{height:106px;display:flex;align-items:center;justify-content:space-between;padding:0 5.2%;gap:28px;border-bottom:1px solid #c4c8a917;position:relative;z-index:6}.precinct-mark{display:flex;gap:13px;align-items:center;font:10px/1.65 var(--mono);letter-spacing:1.5px;color:#c5c8b6;text-decoration:none}.precinct-mark b{font-weight:400;color:#808e89}.badge-symbol{font-size:33px;color:var(--brass);border:1px solid #bda7757a;clip-path:polygon(50% 0,100% 20%,90% 75%,50% 100%,10% 75%,0 20%);width:40px;height:47px;text-align:center;line-height:43px;background:#ba9f6e10}.edition{font:10px var(--mono);letter-spacing:1.9px;color:#a8aca0}.edition-dot{display:inline-block;width:3px;height:3px;background:var(--brass);margin:0 14px;vertical-align:middle}.icon-button{font:10px var(--mono);letter-spacing:1px;background:none;padding:12px 0;white-space:nowrap}.icon-button span{color:var(--brass);margin-left:6px}.title-content{position:absolute;top:50%;left:8.3%;width:min(540px,46%);transform:translateY(-47%);z-index:6}.case-label{display:block;font:10px var(--mono);letter-spacing:1.5px;color:var(--brass)}.case-label i{font-style:normal;color:#746f5a;margin:0 9px}.live-dot{width:5px;height:5px;background:var(--rust);display:inline-block;margin:0 8px 2px 0;box-shadow:0 0 10px #cc6b3f55}h1{font:clamp(90px,12vw,176px)/.9 var(--display);font-weight:900;letter-spacing:-5px;margin:25px 0 11px;transform:scaleX(.92);transform-origin:left;color:#d66043;text-shadow:0 2px 0 #ab412c,0 5px 0 #682b22,0 8px 0 #2b2220;white-space:nowrap}.mc{font-size:.73em;letter-spacing:-4px}.title-period{color:var(--bone);font-size:.72em;margin-left:0}.title-subline{font:11px var(--mono);letter-spacing:4.7px;display:flex;align-items:center;gap:24px;color:#d7be93}.small-star{font-size:12px}.tagline{font:clamp(24px,2.8vw,38px)/1.15 var(--display);letter-spacing:.4px;margin:34px 0 15px;color:#e4dcc4}.intro{font-size:13px;line-height:1.8;color:#a5aea4;margin:0 0 30px}.start-button{display:flex;align-items:center;gap:17px;background:var(--rust);height:64px;width:350px;padding:0 22px;font:18px var(--display);letter-spacing:1px;box-shadow:0 4px 0 #863724;position:relative;transition:transform .15s,background .15s}.start-button:hover{transform:translateY(-2px);background:#de6244;filter:none}.start-button:active{transform:translateY(2px)}.start-button svg{width:16px;height:16px}.start-button kbd{margin-left:auto;font:9px var(--mono);border:1px solid #f3d5ae40;color:#f3d8b9;padding:5px 6px}.menu-links{display:flex;align-items:center;gap:16px;margin-top:23px;font:10px var(--mono);color:#858f84}.menu-links button{font:11px var(--mono);padding:5px 0;background:none;color:#c8cdbb}.menu-links>span:not(#best-score){color:#4d5e5a}#best-score{font-size:9px;letter-spacing:.3px}.dog-caption{position:absolute;right:7%;bottom:19%;font:9px/1.9 var(--mono);letter-spacing:1.4px;display:flex;align-items:flex-start;gap:12px;color:#d2d0b4;text-shadow:0 2px 9px #000}.dog-caption b{font-weight:400;font-size:11px;letter-spacing:0;color:#89958d}.caption-line{width:35px;height:1px;background:#b8a57577;margin-top:8px}.title-footer{position:absolute;bottom:0;left:5.2%;right:5.2%;height:76px;border-top:1px solid #c4c8a923;display:flex;align-items:center;justify-content:space-between;font:9px var(--mono);letter-spacing:1px;color:#82928b;gap:16px}.title-footer b{font-weight:400;color:#c1c9b7}.title-footer i{font-style:normal;margin:0 8px;color:#677d75}.title-footer .status-light{display:inline-block;width:5px;height:5px;background:#9ca67c;margin:0 8px 1px 0;border-radius:50%;box-shadow:0 0 10px #9ca67c44}.title-footer button{background:none;font:9px var(--mono);letter-spacing:1px;color:#c1c9b7;padding:10px 0}.game-screen{background:#101b20}#world{display:block;width:100%;height:calc(100% - 125px);image-rendering:pixelated;outline:none;cursor:crosshair;touch-action:none}.scanlines{pointer-events:none;position:absolute;inset:0 0 125px;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#00000013 3px,#00000013 4px)}.game-top{position:absolute;top:0;left:0;right:0;padding:25px 30px;display:flex;align-items:flex-start;gap:25px;background:linear-gradient(#091419b3,transparent);pointer-events:none;text-shadow:0 2px 3px #000}.district-label>span{font:10px var(--mono);letter-spacing:2px;color:#c4b082}.district-label h2{font:26px var(--display);margin:4px 0 0;letter-spacing:.5px}.objective{margin-left:auto;text-align:right;font:10px var(--mono)}.objective>span{display:block;color:#b1b9a5;font-size:9px;letter-spacing:1px;margin-bottom:6px}.objective>b{font:28px var(--display);letter-spacing:2px}.objective small{font:9px var(--mono);letter-spacing:1px}.muted{color:#a4ab95}.pause-button{pointer-events:auto;background:#152126bb;border:1px solid #a0af994d;width:35px;height:35px;font-size:19px}.dispatch{position:absolute;left:30px;top:108px;border-left:2px solid var(--brass);padding:0 15px;max-width:320px;text-shadow:0 2px 3px #111;background:linear-gradient(90deg,#111e22c9,transparent);opacity:0;transform:translateY(-5px);transition:opacity .3s,transform .3s;pointer-events:none}.dispatch.visible{opacity:1;transform:none}.dispatch>span{font:9px var(--mono);letter-spacing:1px;color:var(--brass)}.dispatch p{font:12px/1.7 var(--mono);margin:6px 0 0;color:#e1e0c9}.toast{position:absolute;top:30%;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;font:23px var(--display);letter-spacing:2px;text-shadow:2px 2px #162228;color:#efd29b;opacity:0;transition:opacity .18s;pointer-events:none}.toast.visible{opacity:1}.combo{position:absolute;top:38%;right:6%;font:italic 29px var(--display);color:#e2b77d;text-shadow:3px 3px #713b29;pointer-events:none}.game-bottom{height:97px;position:absolute;bottom:28px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:25px;background:linear-gradient(#273434,#19262b);border-top:3px solid #677267;padding:12px max(28px,5vw);box-shadow:0 -4px 0 #111b20,0 -7px 20px #0004}.hud-label{display:block;font:9px var(--mono);letter-spacing:1.2px;color:#adb4a0;margin-bottom:4px;white-space:nowrap}.hud-health{width:160px}.health-reading{display:flex;align-items:center;gap:10px;height:41px}.health-cross{color:var(--rust);font-size:29px}.health-reading b,.hud-armor b{font:42px/.9 var(--display);letter-spacing:1px}.health-reading small,.hud-armor small{font:16px var(--display);color:#94a390}.meter{height:4px;background:#0f1b21;margin-top:6px}.meter i{display:block;height:100%;background:#bca67b;transition:width .12s}#health-meter{background:#ce6b48}.hud-armor{min-width:50px}.hud-portrait{width:81px;height:83px;align-self:end;position:relative;margin-bottom:-4px;background:radial-gradient(#6e7255,#202e30 70%);border:2px solid #788475;box-shadow:0 0 0 3px #142126;flex-shrink:0}.hud-portrait canvas{width:100%;height:100%;image-rendering:pixelated}.hud-portrait span{position:absolute;bottom:1px;left:0;right:0;text-align:center;font:8px var(--mono);letter-spacing:2px;background:#152429d9}.hud-score{min-width:145px}.hud-score>b{font:33px var(--display);letter-spacing:3px}.stamina-track{display:flex;align-items:center;gap:8px;margin-top:3px;font:7px var(--mono);color:#91a18f}.stamina-track>div{height:3px;background:#101d22;flex:1}.stamina-track i{display:block;height:100%;background:#829a79}.hud-bark{width:130px}.hud-bark>div:not(.meter){display:flex;align-items:center;gap:10px;height:36px}.hud-bark kbd{font:15px var(--mono);border:1px solid #8a9b88;box-shadow:0 2px 0 #0d191e;padding:3px 6px}.hud-bark b{font:24px var(--display);color:#d8c99d}.control-strip{position:absolute;bottom:0;left:0;right:0;height:28px;background:#0d1a20;display:flex;align-items:center;justify-content:center;gap:25px;color:#83958c;font:8px var(--mono);letter-spacing:.5px}.control-strip kbd{color:#c0c9b3;font:inherit;margin-right:4px}.map-panel{position:absolute;right:30px;top:100px;padding:12px;background:#111d23ed;border:1px solid #a6af8155;box-shadow:0 8px 30px #0005}.map-panel>div{display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:1px;color:#d6c798;margin-bottom:12px}.map-panel>div span{font-size:7px;color:#8a9b8c}.map-panel canvas{display:block;image-rendering:pixelated;max-width:100%}.map-panel p{font:7px var(--mono);letter-spacing:.5px;display:flex;align-items:center;gap:7px;margin-bottom:0;color:#b6c0a9}.map-panel i{display:inline-block;width:4px;height:4px;background:#fff0c7}.map-panel i:nth-of-type(2){background:#cf674d}.map-panel i:nth-of-type(3){background:#a4d6b1}.overlay{position:absolute;inset:0;z-index:20;background:#081319d9;backdrop-filter:blur(7px);display:grid;place-items:center;padding:25px;overflow:auto}.overlay-panel{width:min(520px,100%);border-top:3px solid var(--rust);padding:32px;background:linear-gradient(130deg,#243235,#142228);box-shadow:0 20px 100px #0006}.overlay-panel h2{font:49px/1.02 var(--display);letter-spacing:.3px;margin:17px 0;color:#eadfbe}.overlay-panel>p{font:13px/1.7 var(--mono);color:#aeb9a8}.overlay-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px}.action-button{background:#354549;padding:13px 18px;font:12px var(--mono);border:1px solid #7b88724d;flex:1;white-space:nowrap}.action-button.primary{background:var(--rust);border-color:transparent;color:#fff0cf}.control-list{display:grid;grid-template-columns:1fr 1fr;gap:15px 25px;margin:22px 0;font:12px var(--mono);color:#b7c1b0}.control-list>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.control-list kbd{border:1px solid #788570;padding:5px 7px;color:#eddfb9;font:11px var(--mono);white-space:nowrap}.option-row{display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-bottom:1px solid #7a88712b;font:12px var(--mono);gap:20px}.option-row select{padding:9px;background:#132128;border:1px solid #72826b;color:var(--bone);font:12px var(--mono)}.option-row input{accent-color:var(--rust);max-width:150px}.option-row input[type=checkbox]{width:19px;height:19px}.result-stats{display:flex;justify-content:space-between;border-block:1px solid #7a887136;padding:18px 0;margin-top:24px;gap:15px}.result-stats b{display:block;font:32px var(--display);letter-spacing:1px}.result-stats span{font:8px var(--mono);color:#acb8a4;letter-spacing:1px}.tip{font:10px/1.7 var(--mono);color:#bda77d;margin-top:20px}.noscript{position:absolute;inset:0;display:grid;place-items:center;background:#122028;z-index:99}#touch-controls{display:none}
@media(min-width:1600px){.title-content{left:10%;width:580px}.intro{font-size:15px}.tagline{margin-top:40px}.start-button{width:380px;height:70px}.menu-links{gap:20px}}
@media(max-width:1000px){.masthead{height:85px;padding:0 5%}.edition{font-size:8px;letter-spacing:1px}.title-content{left:6%;width:52%}.title-subline{font-size:9px;letter-spacing:2px}.tagline{margin-top:28px}.title-footer{font-size:8px;left:5%;right:5%}.title-footer>span:nth-child(2){display:none}.dog-caption{right:5%;font-size:8px;bottom:17%}.game-bottom{gap:18px;padding-inline:24px}.control-strip{gap:15px}.hud-health{width:130px}.hud-bark{width:115px}}
@media(max-height:720px) and (min-width:701px){.masthead{height:75px}.title-content{transform:translateY(-44%)}h1{font-size:122px;margin-top:15px}.tagline{font-size:29px;margin:24px 0 10px}.intro{margin-bottom:22px;font-size:12px}.start-button{height:54px}.menu-links{margin-top:15px}.title-footer{height:58px}.dog-caption{bottom:20%}}
@media(max-width:700px){.masthead{height:77px;padding:0 6%}.edition{display:none}.precinct-mark{font-size:8px;gap:9px;letter-spacing:1px}.badge-symbol{width:32px;height:37px;font-size:25px;line-height:34px}.cover-art{background-position:84% 45%}.cover-shade{background:linear-gradient(90deg,#081115cc,transparent),linear-gradient(0deg,#09141b 0%,#09141bf0 12%,#09141bc9 38%,#09141b22 86%)}.title-content{width:88%;left:6%;top:auto;bottom:103px;transform:none}.case-label{font-size:8px;letter-spacing:.8px}h1{font-size:clamp(91px,20vw,140px);margin-top:20px;letter-spacing:-4px}.title-subline{font-size:8px;letter-spacing:2.2px;gap:16px}.tagline{font-size:29px;margin:24px 0 10px}.intro{font-size:12px;line-height:1.7;margin-bottom:23px}.start-button{height:58px;width:min(350px,100%);font-size:17px}.menu-links{gap:13px;margin-top:20px}.menu-links button{font-size:10px}#best-score{font-size:8px}.dog-caption{display:none}.title-footer{left:6%;right:6%;height:65px;font-size:7px;letter-spacing:.2px}.title-footer button{font-size:8px}.game-top{padding:17px;gap:12px}.district-label h2{font-size:19px}.district-label>span{font-size:8px}.objective>span{font-size:7px}.objective>b{font-size:23px}.objective small{font-size:7px}.pause-button{width:30px;height:30px}.game-bottom{gap:14px;padding:8px 16px;height:78px;bottom:0}.hud-label{font-size:7px;letter-spacing:.6px}.hud-health{width:95px}.health-reading{height:33px;gap:5px}.health-reading b,.hud-armor b{font-size:32px}.health-cross{font-size:21px}.hud-armor{display:none}.hud-portrait{width:60px;height:65px}.hud-score{min-width:80px}.hud-score>b{font-size:24px;letter-spacing:1px}.hud-bark{width:80px}.hud-bark b{font-size:17px}.hud-bark kbd{display:none}.hud-bark>div:not(.meter){height:29px}.control-strip{display:none}#world{height:calc(100% - 78px)}.scanlines{bottom:78px}.dispatch{top:91px;left:17px;max-width:260px}.dispatch p{font-size:10px}.map-panel{right:17px;top:83px;max-width:75vw}.overlay{padding:18px}.overlay-panel{padding:25px}.overlay-panel h2{font-size:39px}.control-list{gap:12px 16px;font-size:10px}.control-list kbd{font-size:9px}.toast{font-size:20px;white-space:normal;width:90%}}
@media(pointer:coarse){#touch-controls{display:block;pointer-events:none;position:absolute;inset:0;bottom:100px}#joystick{pointer-events:auto;position:absolute;left:24px;bottom:27px;width:108px;height:108px;border-radius:50%;border:1px solid #c9cfad55;background:#0b1c2580;touch-action:none}#joystick-knob{position:absolute;left:34px;top:34px;width:38px;height:38px;background:#b9b99266;border:1px solid #e1d5ae88;border-radius:50%;pointer-events:none}.touch-actions{position:absolute;right:22px;bottom:32px;display:flex;align-items:flex-end;gap:18px;pointer-events:auto}.touch-actions button{touch-action:none;border:1px solid #d1bc8a88;background:#152a31a6;border-radius:50%;font:13px var(--display);width:58px;height:58px}.touch-actions #touch-bite{width:77px;height:77px;background:#a54b33c9;font-size:20px}.touch-hint{position:absolute;right:20px;bottom:122px;font:7px var(--mono);color:#bdc7b699;letter-spacing:1px}.control-strip{display:none}}
@media(max-height:530px){.masthead{height:55px}.title-content{top:83px;bottom:auto;transform:none;width:65%}h1{font-size:85px;margin-top:9px}.title-subline{font-size:8px}.tagline{font-size:22px;margin:16px 0 8px}.tagline br{display:none}.intro{display:none}.start-button{margin-top:18px;height:47px;width:300px}.menu-links{margin-top:12px}.title-footer{height:43px}.dog-caption{display:none}.overlay-panel{margin:auto}.overlay-panel h2{font-size:32px}.game-top{padding:12px 18px}.dispatch{top:77px}.game-bottom{height:74px}.control-strip{height:22px}.hud-portrait{height:64px;width:62px}.hud-label{font-size:7px}.health-reading b,.hud-armor b{font-size:32px}.health-reading{height:30px}.hud-score>b{font-size:26px}.hud-bark>div:not(.meter){height:27px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* Key bindings: every action is a full-size, keyboard-focusable button. */
.overlay-panel{max-height:calc(100dvh - 50px);overflow-y:auto;overscroll-behavior:contain}
.bindings-panel{width:min(700px,100%)}
.bindings-panel h2{margin-bottom:10px}
.binding-message{min-height:48px;padding:12px 14px;margin:17px 0;background:#101f26;border-left:2px solid var(--brass);font:12px/1.6 var(--mono);color:#dbcfaf}
.binding-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px 14px}
.binding-row{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;min-height:49px;padding:9px 12px;background:#18292f;border:1px solid #63776766;font:12px var(--mono)}
.binding-row>span{min-width:0;line-height:1.5}
.binding-row kbd{flex-shrink:0;min-width:38px;max-width:100px;overflow-wrap:anywhere;text-align:center;font:11px var(--mono);color:#f0dfb7;border:1px solid #98a18a;padding:6px 8px;box-shadow:0 2px 0 #101b20}
.binding-row.listening{border-color:var(--rust);background:#683b2d55}
.binding-row.listening kbd{border-color:var(--rust);background:var(--rust);color:#fff1cf}
.binding-row:focus-visible{outline-offset:2px}
.bindings-panel .overlay-actions{position:sticky;bottom:-32px;background:#17262d;margin-inline:-4px;padding:13px 4px 5px;margin-top:13px}
@media(max-width:700px){.overlay-panel{max-height:calc(100dvh - 36px)}.binding-grid{gap:8px}.binding-row{font-size:10px;padding:9px 8px;gap:6px}.binding-row kbd{font-size:9px;min-width:27px;padding:5px;max-width:59px}.binding-message{font-size:10px}.bindings-panel .overlay-actions{bottom:-25px}.control-list{grid-template-columns:1fr}.control-list kbd{max-width:50%;overflow-wrap:anywhere;white-space:normal}}
@media(max-width:380px){.binding-grid{grid-template-columns:1fr}}

/* An optional feline case file, using the same precinct colors as the HUD. */
.cat-tracker{position:absolute;left:30px;bottom:145px;z-index:2;display:grid;gap:6px;text-align:left;padding:10px 14px;background:#101f27df;border:1px solid #bc9c6366;border-left:3px solid var(--brass);font:9px var(--mono);color:#dfd6b7;box-shadow:0 4px 15px #0003}
.cat-tracker-title{font-size:8px;letter-spacing:2px;color:var(--brass)}
.cat-tracker b{font-size:18px;color:#f1dfb3}.cat-tracker i{font-style:normal;color:#718a83;padding:0 7px}
.cat-tracker small{font-size:7px;letter-spacing:.5px;color:#a6b6a6}
.collection-panel{width:min(610px,100%)}
.cat-collection{display:grid;gap:10px;margin-top:24px}
.cat-card{display:flex;align-items:center;gap:14px;padding:10px 14px;background:#101f278c;border:1px solid #778c7540;border-left:3px solid var(--cat-color)}
.cat-card canvas{width:80px;height:64px;image-rendering:pixelated;flex-shrink:0}
.cat-card>div{min-width:0}
.cat-rarity{font:8px var(--mono);letter-spacing:1.5px;color:var(--cat-color)}
.cat-card h3{font:22px var(--display);margin:5px 0;color:#e8ddbf;letter-spacing:.5px}
.cat-card p{font:9px var(--mono);color:#a3b2a6;margin:0}
.cat-card>b{margin-left:auto;flex-shrink:0;font:28px var(--display);color:var(--cat-color)}
.cat-map-legend{justify-content:space-between;color:#dcaa72!important}
.cat-map-legend>span:first-child{color:#d6b0ff}
@media(max-width:700px){.cat-tracker{left:17px;bottom:94px;padding:8px 10px;font-size:8px;gap:4px}.cat-tracker b{font-size:16px}.cat-card{gap:10px;padding:9px}.cat-card canvas{width:60px;height:48px}.cat-card h3{font-size:19px}.cat-card p{font-size:8px}.cat-card>b{font-size:24px}.cat-rarity{font-size:7px;letter-spacing:.8px}.result-stats{flex-wrap:wrap}.result-stats>div{min-width:40%}}
@media(pointer:coarse){.cat-tracker{bottom:255px}}
@media(max-height:530px){.cat-tracker{bottom:140px}.cat-tracker-title,.cat-tracker small{display:none}}
@media(max-width:380px){.game-bottom{gap:8px;padding-inline:10px}}

/* Doom-style district intermission. Stats sit on the art's stone panel, so everything scales in cqw. */
.intermission{position:absolute;inset:0;z-index:25;display:grid;place-items:center;overflow:hidden;background:#070303;outline:none}
.intermission::before{content:'';position:absolute;inset:-40px;background:url('assets/intermission.jpg') center/cover;filter:blur(18px) brightness(.45)}
.intermission::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 110%,#ff4a1424,transparent 60%);animation:hellglow 2.6s ease-in-out infinite alternate}
.intermission-frame{position:relative;z-index:1;width:min(100vw,177.7dvh);aspect-ratio:1672/941;background:url('assets/intermission.jpg') center/100% 100% no-repeat;container-type:inline-size;box-shadow:0 0 80px #000}

.tally{position:absolute;left:27.5%;right:27.5%;top:36%;margin:0}
.tally-row{display:flex;justify-content:space-between;align-items:center;height:5.35cqw;font:4.55cqw/1 var(--display);letter-spacing:.12cqw;opacity:0;--hi:#ffe46b;--lo:#f29a00}
.tally-row[data-stat=score]{--hi:#a6ff7a;--lo:#13b61e}
.tally-row[data-stat=arrests]{--hi:#7fd0ff;--lo:#1559ec}
.tally-row[data-stat=bonus]{--hi:#f7a6ff;--lo:#a414dc}
.tally-row dt,.tally-row dd{margin:0;padding:0 .2cqw;background:linear-gradient(180deg,var(--hi) 18%,var(--lo) 82%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.13cqw #160903;filter:drop-shadow(0 .3cqw 0 #000) drop-shadow(0 0 .7cqw #000d)}
.tally-row dd{font-variant-numeric:tabular-nums}
.tally-row.shown{opacity:1;animation:tallyslam .22s cubic-bezier(.2,1.6,.4,1)}
.intermission-footer{position:absolute;left:27.5%;right:27.5%;top:76.4%;display:flex;align-items:center;gap:1.1cqw}
.intermission-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.case-total{margin-right:auto;font:bold 1.05cqw var(--mono);letter-spacing:.12cqw;text-transform:uppercase;color:#d9c08e;text-shadow:0 .1cqw 0 #000,0 0 .4cqw #000}
.case-total b{display:flex;align-items:baseline;gap:.7cqw;font:2.1cqw var(--display);letter-spacing:.2cqw;color:#efdcb0;margin-top:.35cqw}
.case-total small{font:bold .9cqw var(--mono);letter-spacing:.12cqw;color:#b9a47b}
.intermission-button{white-space:nowrap;padding:.8cqw 1.3cqw;font:1.05cqw var(--mono);letter-spacing:.1cqw;text-transform:uppercase;color:#e6d6b0;background:linear-gradient(#3a2b22,#1c130f);border:.12cqw solid #8a6d4c;box-shadow:0 .25cqw 0 #000,inset 0 .1cqw 0 #ffffff1c;transition:opacity .2s}
.intermission-button.primary{background:linear-gradient(#b8361d,#6f1a0c);border-color:#f08a4a;color:#fff0cf}
.intermission-button kbd{margin-left:.6cqw;padding:.15cqw .4cqw;font:.85cqw var(--mono);border:.1cqw solid #ffd9b377}
.intermission-button:disabled{opacity:0;pointer-events:none}
.intermission.ready .intermission-button.primary{animation:readyblink 1s steps(2,jump-none) infinite}
@keyframes tallyslam{from{transform:scale(1.25);opacity:0}to{transform:none;opacity:1}}
@keyframes hellglow{from{opacity:.55}to{opacity:1}}
@keyframes readyblink{50%{box-shadow:0 .25cqw 0 #000,0 0 1.4cqw #ff5a1f}}
@media(pointer:coarse){.intermission-button{padding:1.1cqw 1.6cqw;font-size:1.3cqw}}
#intermission-district{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.95cqw;letter-spacing:.02cqw}
.case-total{min-width:0}.intermission-button{flex-shrink:0}

/* Menus share the McRuff bone frame: the title sits in the iron plate, content scrolls on the stone. */
#overlay{padding:0;background:#0a0403c4;backdrop-filter:blur(6px)}
#overlay .overlay-panel{position:relative;width:min(100vw,179.2dvh);max-height:none;aspect-ratio:1672/933;padding:0;border:0;overflow:visible;background:url('assets/menu-frame.jpg') center/100% 100% no-repeat;box-shadow:0 0 90px #000;container-type:inline-size}
#overlay #overlay-title{position:absolute;left:23%;right:23%;top:14.6%;height:14.2%;margin:0;display:grid;place-items:center;text-align:center;white-space:nowrap;text-transform:uppercase;font:4.3cqw/1 var(--display);letter-spacing:.15cqw;background:linear-gradient(180deg,#ffd27a 8%,#f0612a 45%,#a3150c 88%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.14cqw #1d0603;filter:drop-shadow(0 .3cqw 0 #000) drop-shadow(0 0 .8cqw #000c)}
.overlay-body{position:absolute;left:24.3%;right:24.3%;top:34.5%;bottom:15.8%;overflow-y:auto;overscroll-behavior:contain;padding:1.4cqw 1.2cqw 1cqw;scrollbar-width:thin;scrollbar-color:#8a6d4c transparent;text-shadow:0 1px 2px #000}
#overlay .case-label{color:#e0b46a;text-align:center}
#overlay .overlay-body>p{text-align:center;color:#d9cbb0;margin:12px auto 0;max-width:78%}
#overlay .overlay-actions{justify-content:center}
#overlay .action-button{flex:0 1 auto;min-width:150px;color:#e6d6b0;background:linear-gradient(#3a2b22,#1c130f);border:1px solid #8a6d4c;box-shadow:0 3px 0 #000,inset 0 1px 0 #ffffff1c;text-transform:uppercase;letter-spacing:1px}
#overlay .action-button.primary{background:linear-gradient(#b8361d,#6f1a0c);border-color:#f08a4a;color:#fff0cf}
#overlay .action-button:focus-visible{outline:2px solid #ffb35c;outline-offset:3px}
#overlay .option-row{border-color:#8a6d4c40;color:#e2d5b8}
#overlay .option-row select{background:#1a100b;border-color:#8a6d4c}
#overlay .control-list{color:#d6c7a8}#overlay .control-list kbd{border-color:#8a6d4c;background:#1a100bb0}
#overlay .binding-message{background:#1a100bd0;border-color:#e0b46a;color:#e8d8b6}
#overlay .binding-row{background:#1a100bc4;border-color:#8a6d4c66;color:#e2d5b8}
#overlay .binding-row kbd{border-color:#a88a63;background:#0e0806}
#overlay .binding-row.listening,#overlay .binding-row.listening kbd{border-color:#f0612a}#overlay .binding-row.listening kbd{background:#b8361d}
#overlay .bindings-panel .overlay-actions,#overlay .overlay-panel.bindings-panel .overlay-actions{position:static;background:none;margin:13px 0 0;padding:0}
#overlay .cat-card{background:#1a100bc4}
#overlay .tip{color:#d8b77c}
@media(max-height:560px){#overlay .overlay-body{left:22.8%;right:22.8%;top:33.5%;bottom:14%;padding:6px}#overlay .action-button{min-width:0;padding:9px 12px;font-size:10px}#overlay .overlay-actions{margin-top:12px;gap:7px}#overlay .overlay-body>p{font-size:11px;line-height:1.5}}
.intermission[data-art=down]::before,.intermission[data-art=down] .intermission-frame{background-image:url('assets/officer-down.jpg')}
.intermission[data-art=down]::after{background:radial-gradient(ellipse at 50% 110%,#ff1a0a33,transparent 65%)}

/* Pause menu: big colored menu items like the tally rows, with a pointer on the selection. */
#overlay .menu-panel .overlay-body>p{display:none}
#overlay .menu-panel .overlay-actions{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0;width:max-content;margin:1.2cqw auto 0;padding-left:3.4cqw}
#overlay .menu-panel .action-button,#overlay .menu-panel .action-button.primary{position:relative;text-shadow:none;min-width:0;padding:0 .3cqw;height:4.6cqw;border:0;box-shadow:none;background:linear-gradient(180deg,var(--hi) 18%,var(--lo) 82%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.12cqw #160903;filter:drop-shadow(0 .28cqw 0 #000) drop-shadow(0 0 .6cqw #000d);font:3.7cqw/1 var(--display);letter-spacing:.12cqw;text-transform:none;--hi:#ffe46b;--lo:#f29a00;transition:transform .12s}
#overlay .menu-panel .action-button:nth-child(2){--hi:#a6ff7a;--lo:#13b61e}
#overlay .menu-panel .action-button:nth-child(3){--hi:#7fd0ff;--lo:#1559ec}
#overlay .menu-panel .action-button:nth-child(4){--hi:#f7a6ff;--lo:#a414dc}
#overlay .menu-panel .action-button:nth-child(5){--hi:#ffb27a;--lo:#c8200e}
#overlay .menu-panel .action-button:is(:hover,:focus){transform:translateX(.6cqw);outline:0;filter:drop-shadow(0 .28cqw 0 #000) drop-shadow(0 0 1cqw #ff7a2a99)}
#overlay .menu-panel .action-button:is(:hover,:focus)::before{content:'';position:absolute;left:-3cqw;top:50%;width:0;height:0;border-block:1.1cqw solid transparent;border-left:1.7cqw solid #e0361a;transform:translateY(-55%);filter:drop-shadow(0 .2cqw 0 #000)}
@media(max-height:560px){#overlay .menu-panel .overlay-actions{margin-top:.6cqw}}

/* Readability on the stone: dark backing plates, larger brighter text. */
#overlay .menu-panel #overlay-kicker{display:none}
#overlay .case-label{font-size:max(11px,.85cqw);letter-spacing:2px;color:#f3c779}
#overlay .overlay-body>p{font-size:max(13px,1.05cqw);line-height:1.55;color:#f2e7cf;background:#0b0604b8;padding:.5cqw 1cqw;border-radius:3px}
#overlay .option-row{padding:.35cqw 1.1cqw;margin-top:.4cqw;background:#0b0604c4;border:1px solid #8a6d4c55;border-radius:3px}
#overlay .option-row>span{display:inline-block;text-shadow:none;font:2.1cqw/1.1 var(--display);letter-spacing:.08cqw;background:linear-gradient(180deg,var(--hi) 18%,var(--lo) 82%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.07cqw #160903;filter:drop-shadow(0 .18cqw 0 #000);--hi:#ffe46b;--lo:#f29a00}
#overlay .option-row:nth-child(2)>span{--hi:#a6ff7a;--lo:#13b61e}
#overlay .option-row:nth-child(3)>span{--hi:#7fd0ff;--lo:#1559ec}
#overlay .option-row:nth-child(4)>span{--hi:#f7a6ff;--lo:#a414dc}
#overlay .option-row select{font-size:max(12px,.95cqw);color:#f2e7cf;padding:.45cqw .6cqw}
#overlay .option-row input[type=range]{width:min(190px,14cqw);max-width:none}
#overlay .option-row input[type=checkbox]{width:max(18px,1.4cqw);height:max(18px,1.4cqw)}
#overlay .binding-message{font-size:max(12px,.95cqw);background:#0b0604d9}
#overlay .binding-row{font-size:max(12px,.95cqw);color:#f2e7cf;background:#0b0604d4;border-color:#8a6d4c88}
#overlay .binding-row kbd,#overlay .control-list kbd{font-size:max(11px,.85cqw);color:#ffe9b8}
#overlay .control-list{font-size:max(12px,.95cqw);color:#f2e7cf;background:#0b0604c4;padding:1cqw;border-radius:3px}
#overlay .tip{font-size:max(11px,.85cqw);color:#f0d29c;background:#0b0604c4;padding:.8cqw 1cqw;border-radius:3px}
#overlay .cat-card{background:#0b0604d4}#overlay .cat-card p{color:#e2d5b8}
@media(max-height:560px){#overlay .option-row>span{font-size:2.6cqw}#overlay .option-row{padding:4px 10px;margin-top:4px}}