:root{--paper:#f3f1f8;--ink:#292735;--line:#41404a;--teal:#468b94;--muted:#777283;--selected:#f7df9e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:13px}button,select{font:inherit}button{cursor:pointer;background:#faf9fc;color:var(--ink);border:1.5px solid #66616d;border-radius:7px;transition:background .12s}button:hover{background:#e6e3ef}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #378eae;outline-offset:3px}button:disabled{color:#a8a4ae;border-color:#c5c1cb;cursor:default;box-shadow:none}header{height:63px;display:flex;border-bottom:1px solid #d9d5e2;align-items:center;background:#faf9fc;padding:0 15px;gap:20px}.brand{display:flex;align-items:center;gap:9px;width:321px;flex-shrink:0}.brand a{color:#19181c;text-decoration:none;font-size:25px;font-weight:950;letter-spacing:-1px;position:relative}.logo-o{color:var(--teal)}.magnify{display:inline-block;color:var(--teal);font-size:35px;line-height:15px;margin-left:-2px;transform:rotate(-20deg)}.back{width:30px;height:29px;border-radius:6px;font-size:20px;background:transparent}.header-center{flex:1;text-align:center}.tagline{font-size:11px;letter-spacing:.2px;color:#86808e}.header-tools{display:flex;gap:7px}.header-tools button{font-size:11px;padding:7px 10px}.game-layout{display:grid;grid-template-columns:350px minmax(0,1fr) 100px;min-height:calc(100dvh - 63px)}.suspects-panel{border-right:1px solid #d9d5e2;background:#f8f7fb;padding:13px 10px 14px;max-height:calc(100dvh - 63px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c8c1d3 transparent}.case-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 3px}h1{font-size:13px;line-height:1.4;margin:0;font-weight:800}#timer{font-size:11px;font-weight:bold;color:#52697f;font-variant-numeric:tabular-nums}.case-meta{display:flex;align-items:center;gap:7px;margin:9px 3px 14px;font-size:9px;color:#777283}.case-meta button{font-size:9px;padding:4px 6px;border:1px solid #c6bccc;background:#eae3f2;color:#685274;border-radius:4px}#progress{margin-left:auto}.general-clue{padding:9px 10px;line-height:1.4;font-size:11px;background:#f4f1eb;border:2px solid #615b5a;border-left:4px solid #c6a060;border-radius:6px;box-shadow:2px 2px 0 #ccc6cc;margin:8px 3px;text-align:center}.people-heading{text-align:center;font-size:11px;font-weight:bold;margin:15px 0 5px}.interaction-hint{text-align:center;color:#8a8393;font-size:8px;margin:0 0 13px;line-height:1.5}#people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 7px;align-items:start}#people.compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px 5px}.person-card{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;padding:0;text-align:center;position:relative;min-width:0}.portrait-frame{width:90px;background:#fff;border:3px solid #373536;border-radius:5px;padding:4px 4px 0;box-shadow:3px 3px 0 #b0aaaf;position:relative;z-index:1}.portrait{width:100%;height:77px;display:block}.person-name{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:bold;font-size:15px;display:block;padding:6px 1px 8px;white-space:nowrap}.person-clues{margin-top:-3px;border:2px solid #45414a;box-shadow:2px 3px 0 #c3bdc7;border-radius:8px;background:linear-gradient(155deg,var(--tint),#f7f5fb);width:100%;min-height:78px;padding:12px 7px 9px;font-size:11px;line-height:1.4;display:flex;flex-direction:column;justify-content:center;gap:4px}.person-clues p{margin:0}.person-card:hover{background:transparent}.person-card:hover .portrait-frame{transform:translateY(-2px)}.person-card.selected .portrait-frame{border-color:#2e8faf;box-shadow:0 0 0 3px #a8dbea,3px 4px 0 #aaa}.person-card.selected .person-clues{border-color:#2e8faf;background:linear-gradient(155deg,#d4edf0,#faf8fe)}.person-card.placed .person-name::after{content:' ✓';color:#328267;font-family:Arial;font-size:11px}.person-index{position:absolute;left:-7px;top:-7px;width:19px;height:19px;border-radius:50%;background:#fff;border:1.5px solid #4d4856;color:#72667a;font-size:10px;display:grid;place-items:center;z-index:2}.compact .portrait-frame{width:70px}.compact .portrait{height:59px}.compact .person-name{font-size:12px;padding:4px 1px 6px}.compact .person-clues{font-size:9px;line-height:1.4;padding:11px 5px 8px;min-height:79px}.compact .person-index{width:16px;height:16px;font-size:8px}.panel-footer{margin:22px 3px 0;display:flex;flex-direction:column;gap:11px;text-align:center;font-size:9px;color:var(--muted)}.panel-footer button{padding:7px}.scene-panel{padding:15px 24px 12px;min-width:0;display:flex;flex-direction:column}.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:950px;width:100%;margin:0 auto 13px}#sceneTitle{font-size:11px;color:#86808f}.mode-tabs{display:flex;border:1px solid #bbb5c6;border-radius:6px;padding:2px;background:#faf8fd}.mode-tabs button{border:0;background:transparent;font-size:10px;padding:5px 9px;border-radius:4px}.mode-tabs button.active{background:#e0dce9;font-weight:bold;color:#514163}.board-stage{display:flex;justify-content:center;align-items:center;flex:1;min-height:0}#boardWrap{position:relative;width:min(100%,calc(100dvh - 190px));max-width:980px;aspect-ratio:1;padding:17px 0 0 17px;margin:auto}#board{position:relative;width:100%;height:100%;border:5px solid #252428;background:#e4d8c2;box-shadow:16px 17px 0 #c5c0cb;isolation:isolate}.scene-svg,#scene{display:block;width:100%;height:100%;position:absolute;inset:0;overflow:visible;pointer-events:none}#cells{display:grid;grid-template-columns:repeat(var(--n),1fr);position:absolute;inset:0;z-index:2}.cell{background:transparent;border:0;border-radius:0;position:relative;display:flex;align-items:center;justify-content:center;padding:0;min-width:0;aspect-ratio:1;touch-action:manipulation;user-select:none;-webkit-user-select:none}.cell:hover:not(:disabled){background:#fff4;box-shadow:inset 0 0 0 3px #579fac}.cell:disabled{opacity:1;color:inherit;background:transparent}.cell.excluded::after{content:"";position:absolute;inset:13%;background:linear-gradient(45deg,transparent 43%,#49424beb 43%,#49424beb 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,#49424beb 43%,#49424beb 57%,transparent 57%);pointer-events:none;z-index:4}.cell.conflict{box-shadow:inset 0 0 0 3px #cf6663;background:#ff8c8133}.cell .token{background:var(--person-color);color:#fff;display:grid;place-items:center;line-height:1;width:70%;height:70%;border-radius:50%;font-family:Georgia,serif;font-weight:bold;font-size:var(--token-font,24px);box-shadow:0 2px 0 #0006,inset 0 0 0 2px #fff;border:2px solid #34303a;text-shadow:0 1px 1px #0008;z-index:3}.cell .notes{width:90%;height:85%;display:flex;align-items:center;align-content:center;justify-content:center;flex-wrap:wrap;gap:1px 3px;font-size:var(--board-note-size);font-weight:bold;line-height:1.1;z-index:3}.cell .notes span{background:#fffc;border-radius:3px;padding:1px 2px;text-shadow:0 0 1px #fff;font-weight:800;-webkit-text-stroke:0.2px currentColor}.cell.notes-wrong{outline:2px solid #c07a69;outline-offset:-3px}#colLabels{position:absolute;left:17px;top:0;right:0;display:grid;grid-template-columns:repeat(var(--n),1fr);text-align:center;color:#928b9c;font-size:9px}#rowLabels{position:absolute;left:0;top:17px;bottom:0;display:grid;grid-template-rows:repeat(var(--n),1fr);align-items:center;color:#928b9c;font-size:9px}.board-caption{margin:25px auto 0;width:100%;max-width:950px;display:flex;justify-content:space-between;align-items:center;gap:10px;color:#7a7186;font-size:10px}.board-caption button{border:0;background:transparent;font-size:10px;color:#7a7186;padding:5px}.selected-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;border:1px solid #666}#status{width:100%;max-width:950px;min-height:31px;margin:7px auto 0;text-align:center;font-size:11px;color:#777082;line-height:1.5}#status.error{color:#b7504a}#status.good{color:#347d60}.tool-panel{border-left:1px solid #d9d5e2;background:#f8f7fb;padding:13px 8px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:30px}.tool-title{font-size:9px;color:#726b7c;margin:0 0 7px}.tool{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px;background:#fbfafc;border:2px solid #514d59;box-shadow:2px 2px 0 #bcb6c5;margin-bottom:9px;border-radius:8px;font-size:9px;min-height:52px}.tool-icon{font-size:26px;font-weight:bold;line-height:1}.tool.active{background:#fae8b8;border-color:#c79837}.eraser{color:#55b0c0;font-size:36px;line-height:24px;transform:rotate(-30deg)}.submit{background:#ddf0e8;border-color:#6e9b89}.submit .tool-icon{color:#377862}.small-tool{width:100%;font-size:9px;padding:7px 2px;margin-bottom:7px}.local-note{text-align:center;font-size:8px;color:#aaa1b2;line-height:1.6;margin:6px 0 0}dialog{background:#fbfafd;color:var(--ink);border:2px solid #4d4554;border-radius:12px;max-width:660px;width:calc(100% - 30px);padding:30px;max-height:90dvh;box-shadow:7px 8px 0 #34293844}dialog::backdrop{background:#41394a65;backdrop-filter:blur(4px)}dialog h2{font-family:Georgia,serif;font-size:30px;margin:8px 0 15px;color:#383040}dialog p,dialog li{font-size:13px;line-height:1.7;color:#72677b}dialog ol{padding-left:20px}dialog .close{position:absolute;right:10px;top:9px;font-size:25px;background:transparent;border:0;width:31px;height:31px}.eyebrow{font-size:9px!important;letter-spacing:1.5px;font-weight:bold;color:#57929a!important}.primary{background:#d7ece4;border-color:#79a392;padding:11px 16px;font-weight:bold}.choose-killer{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}.choose-killer button{padding:9px 12px}.catalog-levels{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}.catalog-levels button{font-size:10px;padding:8px 9px;border:1px solid #c7bfce}.catalog-levels button.active{background:#d7ebeb;border-color:#57969b}.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.case-card{position:relative;background:#f0edf5;text-align:left;overflow:hidden;padding:0;border:1px solid #c5bdce}.case-preview{height:127px;background:#dfd8e7;display:flex;align-items:center;justify-content:center;padding:9px}.case-preview svg{height:100%;max-width:100%;box-shadow:5px 5px 0 #ada6b6;border:3px solid #343138}.case-info{padding:12px}.case-info strong{font-size:12px;display:block;margin-bottom:6px}.case-info small{font-size:10px;color:#8b7d98}.case-info em{float:right;color:#4d8d70;font-size:10px}.legend-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.legend-item{text-align:center;font-size:10px;color:#736880;background:#f0edf5;padding:10px 4px;border-radius:6px}.legend-item svg{display:block;width:50px;height:50px;margin:0 auto 6px}.legend-item span{display:block;font-size:8px;color:#978c9f;margin-top:4px}.room-list{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.room-list span{font-size:10px;background:#e8e3ef;border-radius:5px;padding:6px 8px}.fullscreen-board .suspects-panel,.fullscreen-board .tool-panel{display:none}.fullscreen-board .game-layout{grid-template-columns:1fr}.fullscreen-board #boardWrap{width:min(100%,calc(100dvh - 190px))}.fullscreen-board #sceneTitle::after{content:' · Druk op Esc om terug te gaan';font-size:10px}.hide{display:none!important}.result-icon{font-size:45px;color:#5c9a80;margin-bottom:8px}@media(min-width:1800px){.game-layout{grid-template-columns:390px minmax(0,1fr) 116px}.brand{width:361px}.portrait-frame{width:105px}.portrait{height:91px}.person-clues{min-height:88px;font-size:12px}.compact .portrait-frame{width:78px}.compact .portrait{height:67px}.compact .person-clues{font-size:10px}.scene-panel{padding:15px 35px}}@media(max-width:1150px){.game-layout{grid-template-columns:290px minmax(0,1fr) 86px}.brand{width:261px}.scene-panel{padding:15px 15px 10px}.tagline{font-size:9px}.person-clues{font-size:10px}.compact .portrait-frame{width:60px}.compact .portrait{height:48px}.compact .person-clues{font-size:8px}.compact .person-name{font-size:11px}.tool{font-size:8px}}@media(max-width:850px){header{padding:0 10px;height:57px;gap:5px}.brand{width:auto;flex:1}.header-center{display:none}.game-layout{grid-template-columns:240px minmax(0,1fr) 70px;min-height:calc(100dvh - 57px)}.suspects-panel{max-height:calc(100dvh - 57px)}.scene-panel{padding:12px 10px}.portrait-frame{width:76px}.portrait{height:65px}.person-name{font-size:13px}.person-clues{font-size:9px}.compact .portrait-frame{width:53px}.compact .portrait{height:44px}.compact .person-name{font-size:10px}.compact .person-clues{font-size:8px}.board-toolbar{display:block}#sceneTitle{margin-bottom:9px}.mode-tabs{width:max-content}.tool-panel{padding:12px 5px}.tool-icon{font-size:23px}.small-tool{font-size:8px}#board{box-shadow:8px 10px 0 #c5c0cb}.board-caption{font-size:9px;display:block}.board-caption button{padding-left:0;margin-top:4px}.case-preview{height:100px}}@media(max-width:650px){header{height:56px}.brand a{font-size:21px}.magnify{font-size:28px}.header-tools button{font-size:10px;padding:6px 8px}.game-layout{display:flex;flex-direction:column;min-height:0}.scene-panel{order:1;padding:13px 15px 8px}.suspects-panel{order:3;max-height:none;overflow:visible;border:0;border-top:1px solid #d9d5e2;padding:15px 12px}.tool-panel{order:2;border:0;flex-direction:row;padding:8px 12px;gap:8px;border-top:1px solid #d9d5e2;position:sticky;top:0;z-index:5;box-shadow:0 4px 8px #54436312}.tool-panel>div{display:flex;gap:6px;align-items:center}.tool-title,.local-note{display:none}.tool{min-height:42px;margin:0;padding:4px 7px;min-width:43px;width:auto;border-width:1px;font-size:8px}.tool-icon{font-size:18px}.eraser{font-size:25px}.small-tool{width:auto;font-size:8px;padding:7px 4px;margin:0}.lower-tools{flex:1;justify-content:flex-end}.board-toolbar{display:flex;margin:0 auto 10px}.mode-tabs button{font-size:9px;padding:6px 8px}#sceneTitle{margin:0;font-size:10px}#boardWrap{width:100%;max-width:500px;padding:16px 0 0 16px}#board{border-width:4px;box-shadow:8px 9px 0 #c5c0cb}#rowLabels{top:16px}#colLabels{left:16px}.board-caption{display:flex;margin-top:17px;font-size:9px}.board-caption button{font-size:9px;margin:0}.case-heading h1{font-size:14px}.people-heading{margin-top:15px}#people,#people.compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}.portrait-frame,.compact .portrait-frame{width:76px}.portrait,.compact .portrait{height:63px}.person-name,.compact .person-name{font-size:13px;padding:5px 1px 7px}.person-clues,.compact .person-clues{font-size:10px;min-height:88px;padding:12px 6px 9px}.interaction-hint{font-size:9px}.case-meta{font-size:10px}.case-meta button{font-size:10px}.panel-footer{padding:0 30px}.scene-panel #status{font-size:10px;min-height:28px}.case-grid{gap:9px}.case-preview{height:95px}.case-info{padding:9px}.case-info strong{font-size:11px}.case-info small{font-size:9px}.legend-grid{grid-template-columns:repeat(3,1fr)}dialog{padding:25px 20px}.fullscreen-board .suspects-panel,.fullscreen-board .tool-panel{display:none}.fullscreen-board #boardWrap{width:100%}}@media(max-width:360px){.tool-panel{padding:8px 5px}.tool-panel>div{gap:4px}.tool{padding:4px 5px;min-width:38px}#zoom{display:none}.person-clues,.compact .person-clues{font-size:9px}.portrait-frame,.compact .portrait-frame{width:67px}.portrait,.compact .portrait{height:55px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.person-clues,.general-clue{font-weight:600}

/* Account panel */
[hidden]{display:none!important}#accountDialog{width:min(540px,calc(100% - 32px));max-height:85dvh;overflow:auto}#loginForm{display:grid;gap:12px;margin-top:24px}#loginForm label{font-weight:650}#loginEmail{font:inherit;padding:13px;border:1px solid #aaa2b7;border-radius:9px;min-width:0}#accountDialog button{min-height:42px}#accountMessage{line-height:1.6;font-weight:600}#accountEmail{overflow-wrap:anywhere}.account-help{font-size:13px;color:#625b6b;line-height:1.6}.account-actions{display:grid;gap:10px}.sync-conflict{border:1px solid #ba8f5b;background:#fff6e8;padding:14px;border-radius:10px;margin-top:15px}.sync-conflict button{margin:4px}#syncStatus{max-width:230px;line-height:1.5}@media(max-width:650px){.header-tools{gap:4px}.header-tools button{font-size:11px;padding:7px}#syncStatus{max-width:170px}}

/* Readable candidate letters, placement feedback and completed cards. */
.cell{container-type:inline-size}
.cell .notes{position:absolute;inset:5% 5% auto;width:90%;height:90%;display:grid;grid-template-columns:repeat(var(--note-cols,3),minmax(0,1fr));grid-auto-rows:min-content;align-content:start;justify-items:center;align-items:start;gap:0;font-family:Arial,Helvetica,sans-serif;font-size:var(--board-note-size);font-weight:900;line-height:1.02;pointer-events:none}
.cell .notes span,.cell .placed-letter{background:none;border-radius:0;padding:0;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;font-weight:900;-webkit-text-stroke:2.4px #000;paint-order:stroke fill}
.person-card.placed .portrait-frame{filter:grayscale(1) brightness(.88);opacity:.70}
.person-card.placed .person-clues{background:#dedbe2;color:#302c36;border-color:#79717f;box-shadow:2px 3px 0 #c3bdc7;filter:grayscale(1);opacity:.78}
.person-card.placed.selected .portrait-frame{border-color:#2e8faf;box-shadow:0 0 0 3px #a8dbea,3px 4px 0 #aaa}
.person-card.placed.selected .person-clues{border-color:#2e8faf}
#legend{font-weight:750;color:#51465e;text-decoration:underline;text-underline-offset:3px}
.placement-progress{position:absolute;inset:3%;z-index:6;pointer-events:none}
.marker-circle{display:block;width:100%;height:100%;overflow:visible}
.marker-ink{fill:none;stroke:var(--marker-color);stroke-linecap:round;stroke-linejoin:round}
.marker-bleed{stroke-width:14;opacity:.18}
.marker-line{stroke-width:8.8;opacity:.94}
.placement-progress .marker-ink{stroke-dasharray:100;stroke-dashoffset:100;animation:marker-draw var(--draw-duration,240ms) linear forwards}
.cell.cross-enter::after{animation:cross-expand 170ms ease-out both;animation-delay:var(--cross-delay,0ms)}
@keyframes marker-draw{to{stroke-dashoffset:0}}
@keyframes cross-expand{from{transform:scale(.12);opacity:0}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.placement-progress .marker-ink,.cell.cross-enter::after{animation:none!important}.placement-progress .marker-ink{stroke-dashoffset:0}}

/* Crosses: 59.2% of a cell, formerly 74% (20% smaller). */
.cell.excluded::after{inset:20.4%;background:linear-gradient(45deg,transparent 43%,#111 43%,#111 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,#111 43%,#111 57%,transparent 57%)}

/* Placed people retain the same portrait and outlined initial as their card. */
.cell .placed-person{position:absolute;inset:3%;z-index:3;pointer-events:none}
.cell .placed-portrait{position:absolute;left:17.84875%;bottom:15.32%;width:64.3025%;height:69.36%;z-index:1;filter:drop-shadow(0 1px 0 #0009)}
.cell .placed-portrait .portrait{display:block;width:100%;height:100%;overflow:visible}
.cell .placed-letter{position:absolute;top:2%;left:3%;z-index:2;font-family:Arial,Helvetica,sans-serif;font-size:var(--note-font,22px);font-size:clamp(8px,calc(78cqw / var(--note-cols,3)),30px);font-weight:900;line-height:1.13}

/* Moredoku welcome: doku appears first, More drops into the wordmark. */
.welcome{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:70px 22px 45px;overflow:hidden;position:relative;background:radial-gradient(ellipse at 50% 40%,#e3eeeb 0,transparent 58%),#f3f1f8}
.welcome::before{content:'';position:absolute;width:min(74vw,660px);aspect-ratio:1;border:1px solid #468b9412;border-radius:50%;pointer-events:none}
.welcome-kicker{font-size:11px;font-weight:750;letter-spacing:3px;color:#627779;margin:0 0 30px;z-index:1}
.welcome-wordmark{display:flex;align-items:baseline;justify-content:center;margin:0;white-space:nowrap;font-family:Arial,Helvetica,sans-serif;font-size:clamp(56px,14vw,154px);font-weight:900;line-height:1.13;letter-spacing:-.075em;color:#292735;z-index:1}
.welcome-more{display:inline-block;color:#468b94;transform-origin:70% 100%;animation:more-drop 850ms 650ms both}
.welcome-doku{display:inline-block;animation:doku-make-room 480ms 650ms both}
.welcome-description{font-family:Georgia,serif;font-size:clamp(20px,3vw,28px);line-height:1.55;color:#595363;margin:28px 0 30px;z-index:1}
.welcome-button{display:flex;align-items:center;gap:28px;padding:17px 28px;border:2px solid #2d6269;border-radius:12px;background:#468b94;color:#fff;box-shadow:4px 5px 0 #bdd4d3;font-size:16px;font-weight:750;z-index:1}
.welcome-button:hover{background:#34747d}.welcome-button:disabled{background:#e1e6e9;color:#716b78;border-color:#b1b3bd;box-shadow:none}.welcome-button span{font-size:22px;line-height:1}
.welcome-status{min-height:22px;font-size:12px;line-height:1.6;color:#746b7e;margin:16px 0 0;z-index:1}
.welcome-detail{margin:22px 0 0;font-size:11px;letter-spacing:.5px;color:#81788c;z-index:1}.welcome-detail span{padding:0 9px}
.brand .brand-more{color:#468b94}.brand a{letter-spacing:-1.3px}
@keyframes more-drop{0%{transform:translateY(-90vh) rotate(-9deg);opacity:0}8%{opacity:1}62%{transform:translateY(0) rotate(0)}77%{transform:translateY(-18px) rotate(2deg)}90%{transform:translateY(0) rotate(-1deg)}100%{transform:translateY(0) rotate(0);opacity:1}}
@keyframes doku-make-room{from{transform:translateX(-54%)}to{transform:translateX(0)}}
@media(max-width:400px){.welcome-kicker{font-size:9px;letter-spacing:2px}.welcome-button{font-size:15px;padding:15px 23px}.welcome-detail{font-size:10px}.welcome-detail span{padding:0 5px}}
@media(prefers-reduced-motion:reduce){.welcome-more,.welcome-doku{animation:none;transform:none;opacity:1}}

/* Hints are a guided conversation: one deduction per page. */
.hint-heading{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.hint-step-number{font-size:12px;font-weight:750;color:#326f76;background:#e0efed;padding:6px 10px;border-radius:6px}.hint-position{font-size:11px;color:#82788b}.hint-explanation p{color:#51495c;line-height:1.75;margin:12px 0}.hint-action{background:#eaf2ef;border-left:4px solid #468b94;padding:13px 16px;margin:21px 0 12px;border-radius:0 8px 8px 0}.hint-action>strong{font-size:11px;color:#326f76}.hint-action p{margin:5px 0 0;color:#38333f}.hint-reminder{font-size:11px!important;color:#81778a!important}.hint-navigation{display:flex;justify-content:space-between;gap:9px;align-items:center;border-top:1px solid #ddd7e4;padding-top:16px;margin-top:18px}.hint-navigation button{min-height:42px;padding:10px 13px;font-weight:650}#closeHints{border:0;background:transparent;color:#71647c;font-size:11px}#hintStepTitle:focus{outline:none}@media(max-width:420px){.hint-navigation{flex-wrap:wrap}.hint-navigation button{flex:1;white-space:nowrap}#closeHints{order:3;flex-basis:100%}}

/* Unknown occupants are player deductions; they reserve lines without naming a person. */
.cell.unknown-occupied{box-shadow:inset 0 0 0 3px #9d7528;background:#f5cb6426}
.unknown-badge{position:absolute;inset:25%;display:grid;place-items:center;background:#fff5d6;border:2px solid #8a6729;border-radius:50%;color:#684c19;font-size:clamp(12px,40cqw,28px);font-weight:800;z-index:4;pointer-events:none}
.cell .notes{grid-template-rows:repeat(var(--note-rows,3),1fr);grid-auto-rows:1fr}
.cell.unknown-occupied:has(.notes) .unknown-badge{inset:auto 2% 2% auto;width:17%;height:17%;font-size:clamp(7px,13cqw,12px);border-width:1px}

.example-label{display:block;font-size:9px;font-weight:700;color:#36757b;margin-top:7px}
.hint-map{margin:18px auto 20px;width:min(230px,75%)}
.hint-mini-board{position:relative;aspect-ratio:1;border:2px solid #36323b;background:#eee7dd;isolation:isolate}
.hint-map-cells{display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);position:absolute;inset:0;z-index:2;pointer-events:none}
.hint-map-cell{background:#29c9c54d;box-shadow:inset 0 0 0 2px #125b64;display:grid;place-items:center;font-size:18px;font-weight:800;color:#59421a}
.hint-map-cell.anonymous{background:#ffda7bbf;box-shadow:inset 0 0 0 2px #8a6729}
.hint-map figcaption{font-size:10px;line-height:1.5;color:#716779;text-align:center;margin-top:8px}
@media(max-width:650px){.tool-panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.tool-panel>div{display:contents}.tool-panel .tool,.tool-panel .small-tool{width:100%;min-width:0;min-height:42px;margin:0}.tool-panel .tool-title,.tool-panel .local-note{display:none}.hint-map{width:min(190px,75%)}}

.hint-map-cell.source{background:#77b4ca29;box-shadow:none;border:1px dashed #52869c}.catalog-sources{margin-bottom:4px}.catalog-sources button{font-weight:700}

/* Area names float above every board token, without intercepting input. */
#areaLabels{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none;overflow:visible}

/* One shared note grid and font for EVERY cell on this board. Use actual
   note rows, so e.g. twelve people need three rows, not four. */
#board{--board-note-size:min(30px,calc(62cqw / var(--note-rows,3)),calc(69cqw / var(--note-cols,3)));--board-note-height:66%}
.cell .notes,.cell.unknown-occupied .notes,.cell.has-area-label .notes{inset:3% auto auto 5%;width:86%;height:var(--board-note-height);font-size:var(--board-note-size)}
.cell.has-area-label.unknown-occupied:has(.notes) .unknown-badge{bottom:28%}
.cell.highlighted-room{background:#85c8c342;box-shadow:inset 0 0 0 2px #357c83}
.area-key{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;margin:11px auto 0;max-width:950px}
.area-key-title{font-size:9px;color:#716a7a;font-weight:700;margin-right:4px}
.area-key button{border:1px solid #d1cbd7;border-radius:20px;padding:5px 9px;font-size:10px;background:#faf9fc;color:#61576c}
.area-key button[aria-pressed=true]{background:#d8ece8;border-color:#468b94;color:#285e65}
#boardWrap{width:min(100%,calc(100dvh - 225px))}
.fullscreen-board #boardWrap{width:min(100%,calc(100dvh - 225px))}
#soundToggle{white-space:nowrap;font-weight:650;min-height:32px}
#soundToggle[aria-pressed=false]{color:#81778a;background:#eeebf1}
@media(max-width:850px){.header-tools{gap:4px}.header-tools button{padding:7px 6px}#soundToggle{font-size:10px}}
@media(max-width:650px){#boardWrap,.fullscreen-board #boardWrap{width:100%}.brand a{font-size:20px}.header-tools button{font-size:10px;padding:7px 5px}.area-key{gap:4px;margin-top:8px}.area-key button{font-size:10px;padding:5px 8px}}
@media(max-width:380px){.brand a{font-size:18px}.brand{gap:5px}.back{width:25px}.header-tools{gap:2px}.header-tools button{font-size:9px;padding:7px 4px}}

/* A calm dossier cabinet with clear levels and saved progress. */
dialog.catalog-dialog{max-width:1080px;width:calc(100% - 38px);padding:0;border:1px solid #c4bbc9;border-radius:19px;background:#f6f3f8;max-height:92dvh;box-shadow:0 20px 80px #29233255;overflow:auto}
.catalog-dialog>.close{z-index:3;right:15px;top:14px;background:#ffffffb8;border-radius:50%;width:34px;height:34px;color:#4c4256}
.catalog-hero{padding:33px 37px 25px;background:radial-gradient(ellipse at 92% 10%,#bdded3 0,transparent 48%),linear-gradient(125deg,#e1efea,#efedf5);border-bottom:1px solid #d4dedb}
.catalog-hero .eyebrow{margin:0 40px 10px 0;font-size:9px!important;letter-spacing:2px;color:#497d78!important}
.catalog-hero h2{font-size:34px;line-height:1.15;margin:0 35px 12px 0;letter-spacing:-.6px;color:#303c40}
.catalog-hero>p:not(.eyebrow){max-width:520px;margin:0;font-size:12px;line-height:1.6;color:#677274}
.catalog-summary{display:flex;align-items:center;gap:0;margin-top:21px;font-size:11px;color:#606d6e}
.catalog-summary>span{padding:0 14px;border-left:1px solid #a6beb6}
.catalog-summary>span:first-child{padding-left:0;border:0}
.catalog-summary .catalog-completed{color:#397461;font-weight:700}
.catalog-body{padding:22px 30px 15px}
.catalog-sources{background:#e9e5ee;border:1px solid #d7d0df;border-radius:11px;padding:4px;display:flex;width:max-content;max-width:100%;gap:2px;margin:0 0 20px}
.catalog-sources button{background:transparent;border:0;border-radius:7px;padding:10px 14px;font-size:11px;color:#7b7086;font-weight:700;display:flex;align-items:center;gap:9px}
.catalog-sources button.active{background:#fff;border:0;box-shadow:0 2px 5px #29233213;color:#385c5f}
.catalog-sources button>span{font-size:9px;font-weight:700;color:#84788d;border-radius:5px;background:#ddd8e5;padding:2px 5px}
.catalog-sources button.active>span{background:#deede7;color:#4a7869}
.catalog-controls{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-bottom:20px}
.catalog-controls .catalog-levels{margin:0;gap:5px}
.catalog-controls .catalog-levels button{border:1px solid #d4ccd9;background:#fbf9fc;color:#72667e;padding:7px 10px;font-size:10px;border-radius:20px}
.catalog-controls .catalog-levels button.active{background:#393740;color:#fff;border-color:#393740}
.catalog-progress{display:grid;gap:5px;font-size:9px;font-weight:700;color:#81758d;white-space:nowrap}
.catalog-progress select{border:1px solid #d4ccd9;border-radius:7px;background:#fff;padding:7px 25px 7px 9px;color:#655a72;font-size:10px;min-width:119px}
.catalog-resume{display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;width:100%;background:#e7f0eb;border:1px solid #b8cfc5;border-radius:11px;padding:14px 18px;margin-bottom:22px}
.catalog-resume small{display:block;font-size:8px;letter-spacing:1.3px;color:#5a8674;margin-bottom:6px;font-weight:800}
.catalog-resume strong{font-size:12px;color:#3b6356}
.catalog-resume>span:last-child{font-size:10px;color:#72897e;white-space:nowrap}
.catalog-resume b{font-size:20px;font-weight:500;margin-left:12px;color:#3f7b66}
.catalog-group{margin:0 0 27px}
.catalog-group-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;gap:15px}
.catalog-group-heading h3{display:flex;align-items:center;gap:9px;font-size:13px;color:#51485c;margin:0;font-weight:750}
.catalog-group-heading>span{font-size:10px;color:#a091ac}
.level-meter{display:flex;align-items:end;gap:2px;height:13px}
.level-meter i{display:block;width:3px;height:5px;border-radius:2px;background:#ded8e4}
.level-meter i:nth-child(2){height:7px}.level-meter i:nth-child(3){height:9px}.level-meter i:nth-child(4){height:11px}.level-meter i:nth-child(5){height:13px}
.level-meter i.filled{background:#78a895}
.catalog-group[style="--difficulty:2"] .level-meter i.filled{background:#bd9c69}
.catalog-group[style="--difficulty:3"] .level-meter i.filled{background:#b9838f}
.catalog-group[style="--difficulty:4"] .level-meter i.filled{background:#9382af}
.catalog-dialog .case-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.catalog-dialog .case-card{border:1px solid #dcd3e1;border-radius:11px;background:#fff;box-shadow:0 3px 0 #e6dfea;transition:transform .16s,border-color .16s,box-shadow .16s;min-width:0;display:flex;flex-direction:column}
.catalog-dialog .case-card:hover{transform:translateY(-3px);border-color:#80aaa2;box-shadow:0 6px 12px #39303e13}
.catalog-dialog .case-preview{height:158px;width:100%;padding:31px 15px 12px;position:relative;background:radial-gradient(ellipse at 50% 60%,#f7f4fb 0,#eee9f4 80%);overflow:hidden}
.catalog-dialog .case-preview .scene-svg{position:static;inset:auto;width:auto;height:100%;max-width:100%;aspect-ratio:1;flex-shrink:1;box-shadow:3px 4px 0 #b6acbf6b;border:2px solid #514956;transform:rotate(-3deg);border-radius:2px}
.catalog-dialog .case-card:nth-child(even) .case-preview .scene-svg{transform:rotate(3deg)}
.catalog-dialog .case-number{position:absolute;left:11px;top:10px;font-size:8px;font-weight:750;letter-spacing:1px;color:#9a8ba5}
.catalog-dialog .case-status{position:absolute;right:9px;top:8px;font-size:8px;color:#95849e;background:#ffffffa3;border:1px solid #e2dbe7;border-radius:12px;padding:3px 6px;font-weight:700}
.catalog-dialog [data-state=started] .case-status{background:#fff1d4;color:#997241;border-color:#e9d5ac}
.catalog-dialog [data-state=solved] .case-status{background:#deeee6;color:#4e846b;border-color:#b9d6c6}
.catalog-dialog [data-state=solved] .case-preview .scene-svg{filter:none}
.catalog-dialog [data-theme=pirate] .case-preview{background:radial-gradient(ellipse at 50% 50%,#fff3d1,#e7d4b5)}
.catalog-dialog .case-info{padding:13px 12px 12px;display:flex;flex-direction:column;flex:1;width:100%}
.catalog-dialog .case-info small{font-size:9px;font-weight:500;color:#a08fa9;margin-bottom:7px;line-height:1.4}
.catalog-dialog .case-info small>span{margin:0 4px}
.catalog-dialog .case-info strong{font-size:12px;font-weight:750;color:#4e4359;line-height:1.4;min-height:34px;margin:0 0 13px;overflow-wrap:anywhere}
.case-footer{display:flex;justify-content:space-between;align-items:center;gap:7px;border-top:1px solid #eee8f2;padding-top:9px;font-size:9px;color:#a08fa9;margin-top:auto}
.case-open{font-weight:750;color:#537e73}
.case-open>span{font-size:13px;margin-left:4px}
.catalog-note{font-size:10px!important;color:#9a8aa5!important;text-align:center;margin:8px 0 4px!important}
.catalog-empty{text-align:center;padding:25px 10px 35px;border:1px dashed #cfc4d8;border-radius:12px}
.catalog-empty h3{font-family:Georgia,serif;font-size:22px;color:#64546f}
.catalog-empty p{font-size:12px}.catalog-empty button{margin-top:8px}
@media(max-width:900px){.catalog-dialog .case-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-controls{align-items:start}.catalog-body{padding:21px}.catalog-controls .catalog-levels{max-width:520px}.catalog-hero{padding:28px}}
@media(max-width:620px){dialog.catalog-dialog{width:calc(100% - 20px);border-radius:14px}.catalog-hero{padding:26px 20px 20px}.catalog-hero h2{font-size:27px;margin-right:22px}.catalog-hero>p:not(.eyebrow){font-size:11px}.catalog-summary{font-size:10px}.catalog-summary>span{padding:0 10px}.catalog-body{padding:16px 13px}.catalog-sources{width:100%;justify-content:space-between;margin-bottom:15px}.catalog-sources button{padding:9px 8px;font-size:10px;gap:5px}.catalog-controls{flex-wrap:wrap;gap:10px}.catalog-progress{display:flex;align-items:center;gap:8px}.catalog-progress select{min-width:135px}.catalog-dialog .case-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.catalog-dialog .case-preview{height:145px;padding-top:30px}.catalog-dialog .case-info{padding:11px 10px}.catalog-dialog .case-info strong{font-size:12px}.catalog-dialog .case-info small{font-size:8px}.catalog-resume{padding:12px;gap:10px}.catalog-resume>span:last-child{font-size:9px}.catalog-resume b{margin-left:4px}.catalog-note{line-height:1.6!important}}
@media(max-width:370px){.catalog-sources button{font-size:9px;padding:8px 6px}.catalog-sources button>span{padding:2px 4px}.catalog-dialog .case-number{letter-spacing:0;font-size:7px;left:8px}.catalog-dialog .case-status{font-size:7px;right:6px}.catalog-dialog .case-preview{height:132px}.case-footer{font-size:8px}}

/* A short seal and a few soft sparks, only after a correct final answer. */
.case-celebration{position:relative;width:130px;height:130px;margin:0 auto 10px;display:grid;place-items:center}
.solved-seal{width:110px;height:110px;animation:seal-arrive .65s cubic-bezier(.2,.7,.2,1) both}
.seal-ring{stroke-dasharray:100;stroke-dashoffset:0;animation:seal-draw .5s ease-out both}
.seal-check{stroke-dasharray:100;stroke-dashoffset:0;animation:seal-draw .4s .17s ease-out both}
.seal-spark{position:absolute;left:calc(50% - 3px);top:calc(50% - 3px);width:6px;height:6px;border-radius:2px;background:var(--spark-color);opacity:0;pointer-events:none;animation:seal-spark .85s var(--spark-delay) ease-out both}
@keyframes seal-arrive{from{transform:scale(.65) rotate(-8deg);opacity:0}65%{transform:scale(1.04) rotate(1deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes seal-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes seal-spark{0%{transform:rotate(var(--angle)) translateY(-35px) scale(.2);opacity:0}25%{opacity:.8}100%{transform:rotate(var(--angle)) translateY(-77px) scale(.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.solved-seal,.seal-ring,.seal-check,.seal-spark{animation:none!important}.seal-ring,.seal-check{stroke-dashoffset:0}.seal-spark{display:none}.catalog-dialog .case-card{transition:none}.catalog-dialog .case-card:hover{transform:none}}
.welcome-sound-setting{margin-top:20px;background:transparent;border:0;padding:8px;color:#7d7787;font-size:11px;z-index:1}
.catalog-hero{position:relative}
.catalog-sound-setting{position:absolute;right:30px;bottom:21px;font-size:10px;padding:7px 10px;border:1px solid #abc5bb;border-radius:20px;background:#ffffff80;color:#58796d;font-weight:600}
@media(max-width:620px){.catalog-sound-setting{position:static;margin-top:14px;padding:6px 9px;font-size:10px}.catalog-summary{margin-top:14px}}
/* Relative outlines also fit the smaller cells on a phone. */
.cell .notes span,.cell .placed-letter{text-shadow:none;-webkit-text-stroke:min(2.4px,5cqw) #000}
.welcome-sound-setting{color:#675e72}
.catalog-dialog .case-number{color:#7e6d8b}.catalog-dialog .case-status{color:#6b5f75}.catalog-dialog .case-info small,.case-footer{color:#82728c}
.catalog-controls .catalog-levels button,.catalog-progress select{min-height:34px}
@media(max-width:650px){.header-tools #soundToggle{font-size:0;padding:5px 7px;min-width:30px}.header-tools #soundToggle::before{content:'♪';font-size:16px}.header-tools #soundToggle[aria-pressed=false]::before{text-decoration:line-through}.catalog-controls .catalog-levels button,.catalog-progress select{min-height:38px}}

/* A drawn two-tone eraser, with the same outline as the other tools. */
.tool-icon.eraser{display:grid;place-items:center;width:32px;height:30px;transform:none;line-height:1;color:inherit}
.eraser svg{display:block;width:100%;height:100%;overflow:visible}
@media(max-width:650px){.tool-icon.eraser{width:24px;height:23px}}

/* Keep exactly the same marker circle after placing; portraits are another 15% smaller. */
.cell .placed-circle{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Welcome: a real three-step lesson, built from the game's own scene assets. */
.welcome{display:block;text-align:start;min-height:100svh;padding:0 6vw;background:radial-gradient(ellipse at 88% 30%,#e0ece5,transparent 56%),#f7f5ef;overflow:clip;color:#282a32}.welcome::before{display:none}.home-nav{max-width:1280px;margin:auto;min-height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #263a3220}.home-logo{font-size:25px;font-weight:900;letter-spacing:-1.4px;color:#282a32;text-decoration:none}.home-logo>span:first-child{color:#397b73}.home-logo .logo-dot{color:#bf7d64}.language-control{display:inline-flex;align-items:center;gap:9px;color:#48655d}.language-control select{max-width:172px;min-height:40px;background:#ffffffb0;border:1px solid #466c5d40;border-radius:8px;padding:8px 30px 8px 12px;font-size:13px;color:#354c45}.home-main{max-width:1280px;margin:64px auto 56px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,92px);align-items:center}.home-copy{padding-bottom:15px}.welcome-kicker{margin:0 0 12px;letter-spacing:2.5px;font-size:11px;text-transform:uppercase;color:#557069}.welcome-wordmark{font-size:clamp(60px,7.4vw,110px);justify-content:flex-start;line-height:1.15;direction:ltr;width:max-content}.welcome-wordmark .welcome-more{color:#397b73}.home-copy h1{max-width:530px;font-family:Georgia,'Times New Roman',serif;font-size:clamp(28px,3.3vw,44px);font-weight:500;line-height:1.15;letter-spacing:-1.1px;margin:22px 0}.home-intro{max-width:520px;font-size:16px;line-height:1.8;color:#62645f;margin:0 0 27px}.home-actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px}.welcome-button{font-size:15px;gap:18px;background:#397b73;border-color:#397b73;border-radius:8px;box-shadow:0 4px 0 #bdd5c8;padding:15px 23px}.welcome-button span:first-child{font-size:inherit;line-height:1.4}.home-how{font-size:13px;font-weight:650;text-decoration-color:#98b5a6;text-underline-offset:5px;color:#48685b}.welcome-status{font-size:12px;margin:14px 0 0;min-height:0}.welcome-status:empty{display:none}.welcome-detail{font-size:11px;line-height:1.7;color:#7a7d72;letter-spacing:.1px;margin-top:23px}.home-demo{border:1px solid #63786a35;padding:22px;background:#fffdf7;box-shadow:0 20px 65px -35px #183c3360;border-radius:16px;transform:rotate(1deg);scroll-margin-top:20px;min-width:0}.demo-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.demo-heading h2{font-size:13px;font-weight:750;margin:0}.demo-badge{font-size:10px;letter-spacing:1px;color:#9a7154;border:1px solid #c4a17f66;padding:5px 8px;white-space:nowrap;order:2;direction:ltr}.demo-board{position:relative;aspect-ratio:1;width:100%;max-width:430px;margin:auto;border:2px solid #282a2e;background:#ddd;isolation:isolate;direction:ltr}.demo-board>.scene-svg{position:absolute;inset:0;width:100%;height:100%;display:block}.demo-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}.demo-cell{border:0;border-radius:0;background:none;padding:0;position:relative;min-width:0;min-height:0;opacity:1!important;color:#342b37;outline-offset:-5px}.demo-cell:disabled{cursor:default}.demo-cell .placed-person{position:absolute;inset:5% 8% 22%;width:auto;height:auto;pointer-events:none}.demo-cell .placed-letter{font-size:clamp(17px,2vw,28px)}.demo-target{background:#ffffff60;cursor:pointer;box-shadow:inset 0 0 0 3px #397b7390;animation:demo-pulse 2s infinite}.demo-question{font-family:Georgia,serif;font-size:25px;font-weight:800;color:#a73f62}.demo-cross::before,.demo-cross::after{content:'';position:absolute;top:40%;left:29%;width:38%;height:3px;border-radius:4px;background:#29242aca;transform:rotate(45deg);animation:demo-cross-in .35s both}.demo-cross::after{transform:rotate(-45deg)}.demo-reveal{background:#f3cc4933;box-shadow:inset 0 0 0 2px #ad793055}.demo-area-labels{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}.demo-story{min-height:168px}.demo-progress{display:flex;gap:5px;margin-top:19px}.demo-progress i{height:3px;width:24px;border-radius:3px;background:#e0e5dc}.demo-progress i.active{background:#4a8676}.demo-story p{font-size:13px;line-height:1.7;margin:12px 0;color:#505b51;min-height:66px}.demo-next{padding:9px 14px;background:#e7eee6;border:1px solid #397b7340;border-radius:7px;font-size:12px;font-weight:750;color:#346756}.home-rules{display:grid;grid-template-columns:repeat(3,1fr);max-width:1280px;margin:auto;border-block:1px solid #263a3220;padding:23px 0;gap:24px}.home-rules p{display:flex;align-items:center;gap:16px;margin:0;font-size:12px;color:#4e5a51}.home-rules p>span{font-size:11px;color:#a28a70;letter-spacing:1px}.home-rules strong{font-weight:600}.home-footer{display:flex;justify-content:space-between;align-items:center;max-width:1280px;margin:auto;padding:20px 0 24px;color:#889083;font-size:11px}.welcome-sound-setting{margin:0;padding:4px;color:#657367}.game-language select{max-width:119px;font-size:11px;min-height:33px;padding:5px}.header-tools{flex-wrap:wrap}#boardWrap,.hint-mini-board{direction:ltr}.demo-cell .placed-circle svg{overflow:visible}html[dir=rtl] .home-copy,html[dir=rtl] .home-intro,html[dir=rtl] .demo-story{text-align:right}html[dir=rtl] .welcome-wordmark{margin-inline-start:0}html[dir=rtl] .case-info{text-align:right}
@keyframes demo-pulse{50%{box-shadow:inset 0 0 0 3px #397b7330}}@keyframes demo-cross-in{from{opacity:0}to{opacity:1}}
@media(min-width:1400px){.home-main{margin-block:78px}.home-demo{max-width:535px}}
@media(max-width:850px){.welcome{padding-inline:5vw}.home-main{grid-template-columns:1fr;gap:38px;margin-top:34px;max-width:570px}.home-copy{padding-bottom:0}.welcome-wordmark{font-size:90px}.home-copy h1{font-size:36px;max-width:480px}.home-intro{max-width:530px}.home-demo{transform:none;max-width:520px}.demo-board{max-width:440px}.demo-cell .placed-letter{font-size:28px}.home-rules{grid-template-columns:1fr;gap:17px;max-width:570px}.home-nav{min-height:75px}.home-footer{max-width:570px}.home-rules p{font-size:13px}.game-language select{max-width:110px}}
@media(max-width:420px){.welcome-wordmark{font-size:73px}.home-copy h1{font-size:31px}.home-intro{font-size:14px}.home-demo{padding:14px}.demo-story p{font-size:12px;min-height:82px}.home-actions{gap:17px}.welcome-button{padding:13px 18px}.home-how{font-size:12px}.home-copy h1{letter-spacing:-.6px}.demo-cell .placed-letter{font-size:22px}}
@media(prefers-reduced-motion:reduce){.demo-target,.demo-cross::before,.demo-cross::after{animation:none}.home-demo{transform:none}}

.catalog-language{float:inline-end;margin:0 8px 14px 16px}.catalog-language select{max-width:135px;font-size:12px}
.demo-cell .placed-circle{position:absolute;inset:0;z-index:0;pointer-events:none}.demo-cell .placed-portrait{position:absolute;left:17.84875%;bottom:15.32%;width:64.3025%;height:69.36%;z-index:1;filter:drop-shadow(0 1px 0 #0009)}.demo-cell .placed-portrait .portrait{display:block;width:100%;height:100%;overflow:visible}.demo-cell .placed-letter{position:absolute;top:2%;left:3%;z-index:2;font-family:Arial,Helvetica,sans-serif;font-weight:900;line-height:1.13;-webkit-text-stroke:2px #000;paint-order:stroke fill}

/* Mobile play occupies one viewport. Only the clue pane scrolls vertically;
   the scene and tool strip are siblings, outside that scrolling pane.
   Container units size the square board to the actual space left by its UI. */
@media(max-width:650px), (max-width:950px) and (max-height:500px){
 #gameShell{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
 #gameShell>header{flex:0 0 auto;height:auto;min-height:56px;padding:6px 9px;padding-top:max(6px,env(safe-area-inset-top));align-items:center}
 #gameShell .brand{min-width:0;flex:1 0 auto}
 #gameShell .header-tools{justify-content:flex-end;min-width:0}
 #gameShell .game-language select{max-width:98px}
 #gameShell .game-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'scene' 'tools' 'clues';grid-template-rows:minmax(0,1fr) auto minmax(150px,30%);flex:1 1 0;min-height:0;overflow:hidden}
 #gameShell .scene-panel{grid-area:scene;order:initial;min-height:0;min-width:0;padding:6px 12px 4px;overflow:hidden}
 #gameShell .board-toolbar{display:flex;flex:0 0 auto;gap:6px;margin:0 auto 4px;min-height:30px}
 #gameShell #sceneTitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
 #gameShell .mode-tabs{flex-shrink:0}
 #gameShell .mode-tabs button{min-height:30px;padding:5px 7px}
 #gameShell .board-stage{flex:1 1 0;min-height:0;min-width:0;width:100%;container-type:size}
 #gameShell #boardWrap{width:min(100%,calc(100vh - 365px));width:min(100%,calc(100dvh - 365px));max-width:500px;max-height:100%;flex:none;margin:auto;padding:14px 0 0 14px}
 #gameShell #board{box-shadow:4px 4px 0 #c5c0cb}
 #gameShell #rowLabels{top:14px}
 #gameShell #colLabels{left:14px}
 #gameShell .board-caption{display:flex;flex:0 0 auto;margin:5px auto 0;min-height:24px;gap:5px}
 #gameShell #selectedLabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #gameShell .board-caption #legend{flex-shrink:0;max-width:57%;min-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #gameShell .area-key{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-start;width:100%;max-width:100%;margin:2px auto 0;padding:1px 0 3px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
 #gameShell .area-key>*{flex-shrink:0}
 #gameShell .area-key button{white-space:nowrap;padding:4px 8px;min-height:26px}
 #gameShell .scene-panel #status{flex:0 0 auto;font-size:10px;line-height:1.35;min-height:14px;max-height:28px;overflow:auto;margin:2px auto 0;overscroll-behavior:contain}
 #gameShell .tool-panel{grid-area:tools;order:initial;position:static;z-index:auto;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:6px;padding:5px 9px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;border-block:1px solid #d9d5e2;box-shadow:none}
 #gameShell .tool-panel>div{display:contents}
 #gameShell .tool-panel .tool,#gameShell .tool-panel .small-tool{flex:0 0 auto;width:auto;min-width:43px;min-height:42px;margin:0;padding:4px 7px;white-space:nowrap}
 #gameShell .tool-panel .tool-title,#gameShell .tool-panel .local-note{display:none}
 #gameShell #zoom{display:block}
 #gameShell .suspects-panel{grid-area:clues;order:initial;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scroll-padding-block:12px;padding:12px 12px max(18px,env(safe-area-inset-bottom));border:0}
 #gameShell .suspects-panel:focus-visible{outline-offset:-3px}
 #gameShell .person-card{scroll-margin-block:10px}
 #gameShell .panel-footer{padding:0 12px}
 .fullscreen-board #gameShell .game-layout{grid-template-areas:'scene' 'tools';grid-template-rows:minmax(0,1fr) auto}
 .fullscreen-board #gameShell .suspects-panel{display:none}
 .fullscreen-board #gameShell .tool-panel{display:flex}
}
@supports(width:1cqh){
 @media(max-width:650px), (max-width:950px) and (max-height:500px){#gameShell #boardWrap{width:min(100cqw,100cqh)}}
}
/* On a short, wide phone, put the scrollable clues beside the map. */
@media(max-width:650px) and (max-height:500px) and (orientation:landscape), (max-width:950px) and (max-height:500px) and (orientation:landscape){
 #gameShell>header{min-height:44px;padding-block:3px}
 #gameShell .game-layout{grid-template-columns:minmax(0,1fr) minmax(210px,43%);grid-template-areas:'scene clues' 'tools clues';grid-template-rows:minmax(0,1fr) auto}
 #gameShell .suspects-panel{border-inline-start:1px solid #d9d5e2;padding-top:8px}
 #gameShell #people,#gameShell #people.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
 #gameShell .area-key{display:none}
 .fullscreen-board #gameShell .game-layout{grid-template-columns:minmax(0,1fr)}
}

/* Hint overlays mirror the player's board; red marks indicate the certified mistake. */
.hint-board-cross,.hint-board-person,.hint-board-occupied{display:grid;place-items:center;z-index:3;pointer-events:none;min-width:0;min-height:0;font-size:clamp(8px,calc(140px / var(--n)),20px);font-weight:900;line-height:1}
.hint-board-cross{color:#28232b;background:#f3f1f831;font-size:clamp(12px,calc(230px / var(--n)),32px)}
.hint-board-person{background:var(--person-color);color:white;border:1px solid #28232b;border-radius:50%;margin:10%;text-shadow:0 1px 1px #000;box-shadow:0 0 0 1px #fff9}
.hint-board-occupied{color:#322d3a;background:#f5dfaa80;border-radius:20%;margin:15%}
.hint-fault{outline:2px solid #ba3c46!important;outline-offset:-2px;background:#f19b9677!important;color:#8d1726!important}
.hint-context{font-size:11px!important;color:#376e6c!important;border-inline-start:3px solid #468b94;padding-inline-start:10px}
.hint-full{border:1px solid #d3cbdc;background:#f4f1f7;border-radius:8px;padding:10px 13px;margin-top:15px}.hint-full summary{font-size:12px;font-weight:700;cursor:pointer;color:#5b4c6b}.hint-full p{font-size:12px;line-height:1.65}

/* References in the selected clue light up without changing possible positions. */
#clueGlow{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:hidden}
.clue-glow{fill:#77bfff30;stroke:#247ad1b3;stroke-width:3;pointer-events:none}
.clue-glow.object{fill:#48a4ff50;stroke:#1474ce;stroke-width:4}
.clue-glow.person{fill:#8ed7e63b;stroke:#458da3;stroke-dasharray:8 5}
.person-clues .focused-clue{background:#b5dcff70;border-radius:3px;box-shadow:0 0 0 2px #247ac04d}
button.general-clue{display:block;width:calc(100% - 6px);font-weight:600}
button.general-clue[aria-pressed=true]{border-color:#a57b1e;background:#fff2cb}
.board-zoom{display:grid;place-items:center;width:36px;min-width:36px;height:34px;padding:6px;border:1px solid #a9a1b3;border-radius:8px;background:#faf9fc;color:#51465e;flex:none}
.board-zoom svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.board-zoom[aria-pressed=true]{background:#dceee8;border-color:#468b94}
.board-zoom[aria-pressed=true] .zoom-plus{display:none}
.fullscreen-board #sceneTitle::after{content:none}
.board-toolbar{min-height:34px}

@media(max-width:650px), (max-width:950px) and (max-height:500px){
 #gameShell .board-toolbar{margin:0 auto 3px;min-height:34px}
 #gameShell #sceneTitle{flex:1}
 /* Seven visible tools share the available width, including small phones. */
 #gameShell .tool-panel{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;padding:5px 6px;overflow:visible;align-items:stretch;justify-content:normal}
 #gameShell .tool-panel>div{display:contents}
 #gameShell .tool-panel .tool,#gameShell .tool-panel .small-tool{width:100%;min-width:0;min-height:46px;margin:0;padding:4px 1px;white-space:normal;overflow-wrap:anywhere;box-shadow:none;font-size:clamp(7px,2vw,10px);line-height:1.15}
 #gameShell .tool-panel .tool>span:last-child{display:block;width:100%;min-width:0}
 #gameShell .tool-icon{font-size:19px}
 #gameShell .tool-icon.eraser{width:22px;height:22px}
 #gameShell .board-zoom{width:36px;min-height:34px}
 /* Enlarging never removes the clue pane or its independent scroll. */
 .fullscreen-board #gameShell .game-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:'scene' 'tools' 'clues';grid-template-rows:minmax(0,1fr) auto minmax(140px,24%)}
 .fullscreen-board #gameShell .suspects-panel{display:block;min-height:0;overflow-y:auto;overscroll-behavior-y:contain}
 .fullscreen-board #gameShell .tool-panel{display:grid}
 .fullscreen-board #gameShell .board-stage{display:block;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
 .fullscreen-board #gameShell #boardWrap{max-width:none;max-height:none;width:min(125vw,calc(125dvh - 340px));margin:0 auto 5px}
}
@supports(width:1cqh){
 @media(max-width:650px), (max-width:950px) and (max-height:500px){
  .fullscreen-board #gameShell #boardWrap{width:min(125cqw,125cqh)}
 }
}
@media(max-width:650px) and (max-height:500px) and (orientation:landscape), (max-width:950px) and (max-height:500px) and (orientation:landscape){
 .fullscreen-board #gameShell .game-layout{grid-template-columns:minmax(0,1fr) minmax(210px,43%);grid-template-areas:'scene clues' 'tools clues';grid-template-rows:minmax(0,1fr) auto}
}

/* One map title and timer above the grid; zoom lives with the other tools. */
.board-toolbar #sceneTitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-toolbar #timer{margin-inline-start:auto;flex:none}
.game-language{position:relative;display:inline-grid;place-items:center;width:32px;height:30px;flex:none;border:1px solid #c6c0cd;border-radius:6px;background:#faf9fc}
.game-language .language-flag{display:block;font-size:20px;line-height:1;pointer-events:none}
.game-language select{position:absolute;inset:0;width:100%;height:100%;max-width:none!important;min-height:0!important;opacity:0;padding:0!important;cursor:pointer;font-size:16px!important}
.game-language:focus-within{outline:3px solid #378eae;outline-offset:2px}
/* A zoomed desktop board also keeps its zoom-out control reachable. */
.fullscreen-board .tool-panel{display:flex}
.fullscreen-board .game-layout{grid-template-columns:minmax(0,1fr) 100px}

@media(max-width:650px), (max-width:950px) and (max-height:500px){
 #gameShell>header{height:auto;min-height:36px;padding:3px 6px;padding-top:max(3px,env(safe-area-inset-top));gap:5px;justify-content:space-between;flex-wrap:nowrap}
 #gameShell .brand{width:auto;flex:0 0 auto;gap:4px}
 #gameShell .brand a{font-size:17px;letter-spacing:-.7px}
 #gameShell .back{width:24px;min-width:24px;height:25px;padding:0;font-size:18px}
 #gameShell .header-tools{gap:3px;flex:0 1 auto;min-width:0;flex-wrap:nowrap;align-items:center}
 #gameShell .header-tools button{font-size:9px;line-height:1.1;padding:4px 5px;min-width:0;min-height:26px;max-width:75px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #gameShell .header-tools #soundToggle{min-width:23px;height:26px;padding:3px 5px;font-size:0}
 #gameShell .header-tools #soundToggle::before{content:'♪';font-size:14px}
 #gameShell .header-tools #soundToggle[aria-pressed=false]::before{text-decoration:line-through}
 #gameShell .game-language{width:28px;height:26px}
 #gameShell .game-language .language-flag{font-size:19px}
 #gameShell .game-layout{grid-template-rows:minmax(0,1fr) auto minmax(135px,25%)}
 #gameShell .board-toolbar{min-height:17px;max-height:20px;margin:0 auto 1px;gap:8px}
 #gameShell #sceneTitle{font-size:9px;line-height:1.2;flex:1}
 #gameShell .board-toolbar #timer{font-size:10px;line-height:1.2;margin:0}
 #gameShell .scene-panel{padding-top:4px}
 #gameShell #boardWrap{padding:12px 0 0 12px}
 #gameShell #rowLabels{top:12px;font-size:8px}
 #gameShell #colLabels{left:12px;font-size:8px}
 #gameShell .case-heading,#gameShell .case-meta{display:none}
 #gameShell .suspects-panel{padding-top:6px}
 #gameShell .tool-panel{grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;padding:4px 5px}
 #gameShell .tool-panel .tool,#gameShell .tool-panel .small-tool{min-height:42px;padding:3px 1px;font-size:clamp(6.5px,1.9vw,9px);gap:2px}
 #gameShell .tool-icon{font-size:17px}
 #gameShell .tool-icon.eraser{width:20px;height:20px}
 #gameShell .tool-panel .board-zoom{display:grid;place-items:center;width:100%;height:auto;min-width:0;min-height:42px;padding:4px}
 #gameShell .tool-panel .board-zoom svg{width:19px;height:19px}
 .fullscreen-board #gameShell .game-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:'scene' 'tools' 'clues';grid-template-rows:minmax(0,1fr) auto minmax(125px,22%)}
 .fullscreen-board #gameShell .tool-panel{display:grid}
}
@media(max-width:650px) and (max-height:500px) and (orientation:landscape), (max-width:950px) and (max-height:500px) and (orientation:landscape){
 #gameShell .game-layout,.fullscreen-board #gameShell .game-layout{grid-template-columns:minmax(0,1fr) minmax(210px,43%);grid-template-areas:'scene clues' 'tools clues';grid-template-rows:minmax(0,1fr) auto}
}

/* Larger live-board names on phones; other map views retain compact names. */
.area-name-mobile{display:none}
@media(max-width:650px), (max-width:950px) and (max-height:500px){
 #areaLabels .area-name-compact{display:none}
 #areaLabels .area-name-mobile{display:initial}
 #board{--board-note-size:min(30px,calc(50cqw / var(--note-rows,3)),calc(69cqw / var(--note-cols,3)));--board-note-height:54%}
 #cells .cell.has-area-label.unknown-occupied:has(.notes) .unknown-badge{bottom:42%;width:13%;height:13%;font-size:min(10px,12cqw)}
}

/* The anonymous occupancy badge has its own narrow rail beside all note grids. */
#cells .cell.unknown-occupied:has(.notes) .unknown-badge{right:0;width:8%;height:10%;font-size:min(10px,8cqw)}

/* Long translated clues remain readable inside the independently scrolling pane. */
.general-clue,.person-clues{overflow-wrap:anywhere;min-width:0}
/* v41: compact board, accessible display preferences and a brighter case library. */
[hidden]{display:none!important}
.sr-only,#gameShell .scene-panel #status{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;max-height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0}
#gameShell .scene-panel #status.error{position:fixed!important;clip-path:none!important;inset:auto 12px 14px!important;width:auto!important;height:auto!important;max-height:90px!important;margin:0!important;padding:12px!important;background:#fff1ed;border:1px solid #ba5e57;border-radius:9px;z-index:40;white-space:normal;box-shadow:0 3px 16px #0002}
.board-toolbar{display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center;margin-bottom:8px}
.board-toolbar #sceneTitle{flex:1 1 100%;margin:0}
.board-toolbar #selectedLabel{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted)}
.board-toolbar #legend{border:0;background:transparent;font-size:11px;color:var(--ink);padding:5px 2px;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-toolbar #timer{margin:0;font-size:11px}
.home-nav{justify-content:flex-start;gap:12px}.home-nav .language-control{margin-inline-start:auto}.home-nav .settings-open{width:40px;height:40px;font-size:24px;border-color:#58796b50;background:#fffb}.language-flag{font-size:24px;line-height:1;display:inline-flex}.language-flag svg{display:block;width:28px;height:20px;border-radius:3px;box-shadow:0 0 0 1px #7775}
.settings-open{font-size:20px!important;line-height:1!important;padding:5px 9px!important}
#settingsDialog{max-width:530px}#settingsDialog h2{margin-top:0}.settings-controls{border-block:1px solid #8884;margin:18px 0}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;font-size:14px;line-height:1.4;text-align:start}.settings-row+.settings-row{border-top:1px solid #8882}.settings-row span{flex:1;min-width:0}.settings-row input[type=checkbox]{appearance:auto;width:21px;height:21px;accent-color:#397d74;flex:none;cursor:pointer}.settings-row select{max-width:47%;min-height:38px;border:1px solid #aaa2b0;border-radius:7px;padding:6px;background:#fff;color:var(--ink)}.area-setting{display:block}.area-setting span{display:flex;justify-content:space-between}.area-setting input{width:100%;min-height:32px;accent-color:#397d74;margin:8px 0 0}.settings-account h3{margin-bottom:0}.settings-account .primary{width:100%}.newsletter{border:1px solid #aaa5;border-radius:10px;padding:12px;margin-top:22px}.newsletter legend{font-weight:700}.newsletter p{margin:5px 0}.newsletter button{padding:10px 14px}input[type=email]{color:var(--ink)}
body[data-people=list] #gameShell #people{grid-template-columns:minmax(0,1fr);gap:12px}
body[data-people=list] :is(#people,.arrival-person) .person-card{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px;text-align:start;padding:4px}
body[data-people=list] :is(#people,.arrival-person) .portrait-frame{width:64px;padding:3px 3px 0}body[data-people=list] :is(#people,.arrival-person) .portrait{height:51px}body[data-people=list] :is(#people,.arrival-person) .person-name{font-size:12px;text-align:center;padding:4px 0}
body[data-people=list] :is(#people,.arrival-person) .person-clues{margin:0;min-height:74px;padding:10px;font-size:12px;line-height:1.5}
body[data-clues=grid] #generalClues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:4px 3px}
body[data-clues=grid] #generalClues .general-clue{margin:0;width:100%;font-size:11px}
.no-highlights #clueGlow{display:none}.no-highlights .cell.highlighted-room{background:transparent;box-shadow:none}.no-highlights .person-clues .focused-clue{background:transparent;box-shadow:none}

.catalog-dialog .catalog-hero{background:radial-gradient(circle at 92% 15%,#e5c78d70,transparent 36%),radial-gradient(circle at 65% 110%,#a7cfbf90,transparent 50%),#edf2e9;border-bottom:1px solid #708b7540}
.catalog-dialog .catalog-hero h2{color:#243b36;font-size:clamp(27px,4vw,42px);max-width:650px}.catalog-dialog .catalog-hero .eyebrow{color:#427366!important}.catalog-dialog .catalog-body{background:#f7f6f1}.catalog-dialog .case-card{border-radius:13px;border:1px solid #79938150;background:#fffdf7;box-shadow:0 3px 0 #5673611a;transition:transform .18s,box-shadow .18s}.catalog-dialog .case-card:hover{transform:translateY(-4px);box-shadow:0 8px 18px #385b3424}.catalog-dialog .case-card:focus-visible{outline:3px solid #368a7e;outline-offset:3px}.catalog-dialog .case-preview{background:radial-gradient(circle,#e5eadf,#d0ddce);height:172px}.catalog-dialog .case-preview svg{transform:rotate(-3deg);box-shadow:6px 7px 0 #314c3920}.catalog-dialog .case-card:nth-child(even) .case-preview svg{transform:rotate(3deg)}.catalog-dialog .case-info strong{font-family:Georgia,serif;font-size:17px;line-height:1.3;color:#2e403b}.catalog-dialog .case-info{padding:16px}.catalog-dialog .case-open{color:#256354}.catalog-dialog .catalog-group-heading{padding-bottom:9px;border-bottom:1px solid #80918038}.catalog-dialog .catalog-sources button.active,.catalog-dialog .catalog-levels button.active{background:#dcece2;color:#265c49;border-color:#5d917c}.catalog-dialog .catalog-resume{background:#e1eee4;border-color:#7ca58b}.catalog-dialog .catalog-summary{color:#3b665a}
body[data-theme=dark]{color-scheme:dark;--paper:#1a2028;--ink:#edeaf2;--line:#7d8593;--teal:#7fc3be;--muted:#bac1cb;--selected:#856c3f}
body[data-theme=dark] :is(header,.suspects-panel,.tool-panel,dialog){background:#222a35;color:var(--ink);border-color:#59616d}
body[data-theme=dark] :is(button,select,input[type=email]){background:#303a48;color:var(--ink);border-color:#6a7585}
body[data-theme=dark] button:hover{background:#3c4b5d}
body[data-theme=dark] :is(.brand a,.home-logo,dialog h2,.catalog-dialog h3){color:#edf0f3}
body[data-theme=dark] :is(dialog p,dialog li,.case-meta,.interaction-hint,#sceneTitle,#timer,.board-toolbar #selectedLabel,.board-toolbar #legend,.panel-footer,.catalog-note){color:#c3cad5}
body[data-theme=dark] .welcome{background:radial-gradient(ellipse at 85% 25%,#29453e,transparent 60%),#1b242b;color:#edf0ed}
body[data-theme=dark] :is(.home-intro,.home-how,.home-footer,.home-rules,.welcome-kicker,.welcome-detail,.demo-story p,.demo-heading){color:#c5d5cf}
body[data-theme=dark] :is(.home-demo,.demo-story,.demo-heading){background:#27352f;border-color:#5b786c}
body[data-theme=dark] .person-clues{background:#303b49;color:#edf0f4;border-color:#8492a1;box-shadow:2px 3px 0 #1118}
body[data-theme=dark] .person-card.selected .person-clues{background:#304f55;border-color:#8dcad3}
body[data-theme=dark] .portrait-frame{background:#d8e0df;color:#20262a}
body[data-theme=dark] .person-card.placed .person-clues{background:#3c414a;color:#e4e6ed;opacity:.8}
body[data-theme=dark] .general-clue{background:#3d3a32;color:#f1e9d6;border-color:#aaa18c;box-shadow:2px 2px 0 #1118}
body[data-theme=dark] .general-clue[aria-pressed=true]{background:#565039}
body[data-theme=dark] .tool.active{background:#65512c;border-color:#ddba6c}body[data-theme=dark] .primary,body[data-theme=dark] .submit{background:#2f584d;color:#e9fff5}
body[data-theme=dark] .catalog-dialog :is(.catalog-hero,.catalog-body){background:#222e31}body[data-theme=dark] .catalog-dialog .catalog-hero h2{color:#e6f1e9}
body[data-theme=dark] .catalog-dialog .case-card{background:#2b383e;border-color:#65796e}body[data-theme=dark] .catalog-dialog .case-preview{background:#3b4b43}body[data-theme=dark] .catalog-dialog .case-info strong{color:#eef4ef}body[data-theme=dark] .catalog-dialog :is(.case-info small,.case-footer,.catalog-summary){color:#c3d4ca}body[data-theme=dark] .catalog-dialog .case-open{color:#b4e4cc}body[data-theme=dark] .catalog-dialog .catalog-resume{background:#304c40}body[data-theme=dark] :is(.legend-item,.hint-full){background:#303b49;color:#e3e8ef}body[data-theme=dark] .room-list span{background:#38434f}
@media(max-width:650px), (max-width:950px) and (max-height:500px){
 #gameShell .board-toolbar{display:flex;flex-wrap:wrap;max-height:none;min-height:0;gap:2px 9px;margin:0 0 3px}
 #gameShell .board-toolbar #sceneTitle{flex:1 1 100%;font-size:10px;line-height:1.3}
 #gameShell .board-toolbar #selectedLabel{font-size:10px}
 #gameShell .board-toolbar #legend{font-size:10px;min-height:24px;padding:3px 0;max-width:58%}
 #gameShell .board-toolbar #timer{font-size:11px}
 #gameShell .tool-panel{grid-template-columns:repeat(7,minmax(0,1fr))}
 #gameShell .game-layout{grid-template-rows:minmax(0,min(56dvh,calc(100vw + 55px))) auto minmax(0,1fr)}
 #gameShell .scene-panel{padding:4px 12px 7px}
 #gameShell .suspects-panel{padding-top:8px}
 #gameShell .interaction-hint{margin-bottom:12px}
 .fullscreen-board #gameShell .game-layout{grid-template-rows:minmax(0,60%) auto minmax(125px,1fr)}
 #gameShell .header-tools .settings-open{font-size:18px!important;min-width:29px;min-height:28px}
 #settingsDialog{padding:24px 19px}.settings-row{font-size:13px}
 .catalog-dialog .case-preview{height:145px}.catalog-dialog .case-info{padding:12px}.catalog-dialog .case-info strong{font-size:15px}
}
@media(max-width:950px) and (max-height:500px) and (orientation:landscape){
 #gameShell .game-layout,.fullscreen-board #gameShell .game-layout{grid-template-columns:minmax(0,1fr) minmax(210px,43%);grid-template-areas:'scene clues' 'tools clues';grid-template-rows:minmax(0,1fr) auto}
 #gameShell .board-toolbar #sceneTitle{flex:1 1 100%}
}


body[data-theme=dark] #cells .cell,body[data-theme=dark] #cells .cell:disabled{background:transparent}
body[data-theme=dark] #cells .cell:hover:not(:disabled){background:#fff3}
body[data-theme=dark] #cells .cell.conflict{background:#ff8c8133}
body[data-theme=dark] .catalog-dialog .catalog-hero .eyebrow,body[data-theme=dark] .catalog-dialog .catalog-completed{color:#a8d2c2!important}
body[data-theme=dark] .catalog-dialog :is(.case-number,.case-status){color:#d9e7de;background:#30483d}
body[data-theme=dark] .catalog-dialog .catalog-progress{color:#ccd6d3}

#settingsDialog .close{position:sticky;top:0;float:inline-end;z-index:3;background:var(--paper);margin:-12px -8px 0 0}

.home-language{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid #466c5d40;border-radius:8px;background:#fffb}
.home-language select{position:absolute;inset:0;width:100%;height:100%;max-width:none;min-height:0;opacity:0;cursor:pointer;padding:0;font-size:16px}
.home-language:focus-within{outline:3px solid #378eae;outline-offset:2px}
.home-copy,.home-main>*{min-width:0}
@media(max-width:420px){.welcome-wordmark{font-size:clamp(45px,15vw,63px)}.home-nav{gap:8px}.home-nav .home-logo{font-size:22px}.home-nav .settings-open,.home-language{width:36px;height:36px}.home-copy h1{overflow-wrap:anywhere}}
body[data-theme=dark] .demo-cell,body[data-theme=dark] .demo-cell:disabled{background:transparent}
body[data-theme=dark] .demo-cell.demo-target{background:#ffffff50}
body[data-theme=dark] .welcome-wordmark{color:#eef4f0}

/* Compact entry points; the native menu retains flag plus language name. */
.home-account,.catalog-account{min-height:40px;padding:8px 13px;font-weight:600;white-space:normal;overflow-wrap:anywhere}
.home-nav .home-logo{flex-shrink:0}.home-account{max-width:150px}
.catalog-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:0 26px 16px 0;min-width:0}
.catalog-actions .catalog-language{float:none;margin:0;position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid #466c5d60;border-radius:8px;background:#fffb}
.catalog-actions .catalog-language select{position:absolute;inset:0;max-width:none;width:100%;height:100%;min-height:0;padding:0;opacity:0;cursor:pointer;font-size:16px}
.catalog-actions .catalog-language:focus-within{outline:3px solid #378eae;outline-offset:2px}
body[data-theme=dark] .catalog-actions .catalog-language{background:#303a48;border-color:#6a7585}
@media(max-width:420px){.home-nav{flex-wrap:wrap;padding-block:12px;gap:7px}.home-account{font-size:11px;padding:6px 8px;min-height:36px;max-width:110px}.home-nav .home-logo{font-size:21px}.catalog-actions{gap:8px}.catalog-account{max-width:190px;font-size:12px}}

/* Dossier drawers: the paper map lifts out before the case arrives. */
.catalog-dialog .case-grid{gap:14px;padding:14px;background:#bcc7bc;border:1px solid #9aab9c;border-radius:8px;box-shadow:inset 0 2px 6px #30453625}
.catalog-dialog .case-card{position:relative;isolation:isolate;display:block;overflow:visible;padding:44px 0 0;border:1px solid #6e8579;border-radius:5px;background:linear-gradient(#324c41,#657b6b);box-shadow:0 3px 0 #566e5e,0 5px 8px #23382a25;text-align:start;transition:box-shadow .2s;min-width:0}
.catalog-dialog .case-card:hover{transform:none;box-shadow:0 4px 0 #566e5e,0 7px 14px #23382a35}
.drawer-folder{position:absolute;inset:19px 12px auto;height:136px;padding:8px 10px 10px;border:1px solid #b99860;border-radius:2px 7px 0 0;background:#e6c993;box-shadow:0 -2px 8px #17271c40;transform-origin:50% 100%;transition:transform .25s}
.drawer-folder::before{content:'';position:absolute;left:8px;top:-10px;width:42%;height:10px;background:#e6c993;border:1px solid #b99860;border-bottom:0;border-radius:6px 6px 0 0}
.catalog-dialog .drawer-folder .case-preview{height:114px;padding:17px 3px 2px;overflow:hidden;background:#f4e8cc;border-radius:2px}
.catalog-dialog .drawer-folder .case-preview svg,.catalog-dialog .case-card:nth-child(even) .drawer-folder .case-preview svg{height:95px;width:95px;max-width:100%;transform:rotate(-3deg);box-shadow:2px 3px 0 #67553430}
.catalog-dialog .drawer-folder .case-number,.catalog-dialog .drawer-folder .case-status{font-size:8px;top:3px;padding:2px 4px;color:#504633;background:#fff6df}
.catalog-dialog .case-card .drawer-front{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:10px;min-height:190px;padding:15px 13px 11px;border-top:1px solid #b9c8b7;border-radius:4px;background:linear-gradient(115deg,#d4dfd1,#b7c9b8);box-shadow:inset 0 2px 0 #edf2e8,inset 0 -3px 0 #849c8755;transition:transform .25s}
.catalog-dialog .drawer-front small{font-size:9px;line-height:1.5;color:#4d6255;min-height:27px}
.catalog-dialog .drawer-front .drawer-label{display:flex;align-items:center;justify-content:center;text-align:center;min-height:69px;padding:9px 8px;border:3px solid #a3a99c;outline:1px solid #657567;outline-offset:-1px;border-radius:2px;background:#fffbee;color:#293e33;box-shadow:inset 0 1px 4px #71634725,0 1px 0 #edf2e2;font:600 16px/1.3 Georgia,serif;overflow-wrap:anywhere}
.drawer-handle{align-self:center;display:block;width:52px;height:11px;border:3px solid #62796a;border-top-color:#7e9282;border-radius:3px 3px 7px 7px;background:linear-gradient(#a7b7a8,#e5ecdd);box-shadow:0 2px 2px #38513c40}
.catalog-dialog .drawer-front .case-footer{border-top:0;padding-top:0;font-size:9px;gap:6px;color:#4a6050}
.catalog-dialog .drawer-front .case-open{color:#285843}
@media(hover:hover) and (pointer:fine){.catalog-dialog .case-card:hover .drawer-folder{transform:translateY(-112px) rotate(-3deg)}}
.catalog-dialog .case-card:hover,.catalog-dialog .case-card:focus-visible{z-index:4}
.catalog-dialog .case-card:focus-visible .drawer-folder{transform:translateY(-112px) rotate(-3deg)}
.catalog-dialog .case-card:hover .drawer-front{transform:translateY(2px)}
.catalog-dialog .case-card.drawer-opening{z-index:5}
.catalog-dialog .drawer-opening .drawer-front{animation:drawer-pull 680ms ease both}
.catalog-dialog .drawer-opening .drawer-folder{z-index:2;animation:folder-take 680ms cubic-bezier(.2,.7,.2,1) both}
@keyframes drawer-pull{0%{transform:translateY(0)}55%,100%{transform:translateY(14px) scale(1.025);box-shadow:0 -14px 0 #354e3c,0 10px 20px #23382a40}}
@keyframes folder-take{from{transform:translateY(var(--folder-start,0px)) rotate(-3deg)}to{transform:translateY(-175px) rotate(-5deg) scale(1.08)}}
@media(hover:hover) and (pointer:fine){.catalog-dialog .case-card:hover{--folder-start:-112px}}
.catalog-dialog .case-card:focus-visible{--folder-start:-112px}
.placement-tip{text-align:center;max-width:440px;margin:auto}.placement-tip>p{line-height:1.6}
.placement-tip-steps{display:grid;gap:12px;margin:22px 0;text-align:start}
.placement-tip-step{display:flex;align-items:center;gap:14px;padding:15px;border:1px solid #b8cdbf;border-radius:12px;background:#eef5ee}
.placement-tip-symbol{display:grid;place-items:center;flex:0 0 52px;height:52px;background:#fff;border:2px solid #5d9680;border-radius:9px;color:#315e49;font:italic bold 26px Georgia,serif}
.placement-tip-symbol.place{border-radius:50%;background:#d7ebe0;font-style:normal}
.placement-tip-step p{margin:0;line-height:1.55}.placement-tip .primary{width:100%;padding:13px;font-weight:700}
body[data-theme=dark] .placement-tip-step{background:#304b3c;border-color:#678c72}
body[data-theme=dark] .placement-tip-step p{color:#ecf6eb}
body[data-theme=dark] .catalog-dialog .case-grid{background:#1d2b26;border-color:#53685b}
body[data-theme=dark] .catalog-dialog .case-card{background:#182a20;border-color:#5b7463}
body[data-theme=dark] .catalog-dialog .drawer-front{background:linear-gradient(115deg,#475d50,#344e40);border-color:#758e78;box-shadow:inset 0 2px 0 #607662}
body[data-theme=dark] .catalog-dialog .drawer-front .drawer-label{color:#293e33;background:#fffbee}
body[data-theme=dark] .catalog-dialog .drawer-front :is(small,.case-footer,.case-open){color:#deeadc}
body[data-theme=dark] .catalog-dialog .catalog-resume :is(strong,small,span,b){color:#e0eee3}
/* A fixed, inert overlay avoids clipping by the board and scrollable clue panel. */
#caseArrival{position:fixed;inset:0;z-index:1000;pointer-events:none;overflow:hidden}
#caseArrival>.arrival-tile,#caseArrival>.arrival-person{position:absolute;animation:case-arrive 850ms cubic-bezier(.2,.7,.28,1) both;animation-delay:var(--entry-delay);will-change:transform;pointer-events:none}
.arrival-tile{background-color:#e9e0ca;background-repeat:no-repeat;box-shadow:0 2px 5px #26372d25}
.arrival-person .person-card{width:100%;height:100%;margin:0;pointer-events:none}
.case-entering{opacity:0;pointer-events:none}.arrival-hidden{opacity:0}
@keyframes case-arrive{from{transform:translateY(var(--drop-from));opacity:1}to{transform:translateY(0);opacity:1}}
#choosePuzzles{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:15px 17px 15px 25px;border:1px solid #26584a;border-radius:14px;background:linear-gradient(135deg,#397d68,#255a4c);color:#fffcef;box-shadow:0 4px 0 #194738,0 9px 22px #28564022;transition:transform .18s,box-shadow .18s,background .18s}
#choosePuzzles span[data-i18n]{font-size:17px;font-weight:700;line-height:1.3}
#choosePuzzles span[aria-hidden]{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:50%;background:#ffffff20;border:1px solid #ffffff35;font-size:23px}
#choosePuzzles:hover:not(:disabled){background:linear-gradient(135deg,#438a73,#2c6756);transform:translateY(-2px);box-shadow:0 6px 0 #194738,0 12px 25px #28564028}
#choosePuzzles:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #194738}
#choosePuzzles:disabled{background:#dae3da;color:#6a776d;border-color:#a8b8ab;box-shadow:none}
@media(max-width:620px){.catalog-dialog .case-grid{gap:12px;padding:10px}.catalog-dialog .case-card .drawer-front{padding:11px 8px;gap:9px;min-height:189px}.catalog-dialog .drawer-front .drawer-label{font-size:14px;min-height:77px;padding:8px 5px}.catalog-dialog .drawer-front .case-footer{font-size:8px}.drawer-folder{left:8px;right:8px}.catalog-dialog .drawer-folder .case-status{display:none}}
@media(max-width:360px){.catalog-dialog .case-grid{grid-template-columns:1fr}.catalog-dialog .case-card .drawer-front{min-height:165px}.catalog-dialog .drawer-front .drawer-label{min-height:52px;font-size:16px}#choosePuzzles{gap:18px;padding:13px 15px 13px 20px}}
.no-motion .drawer-opening :is(.drawer-front,.drawer-folder){animation:none!important}
@media(prefers-reduced-motion:reduce){#caseArrival{display:none}.case-entering,.arrival-hidden{opacity:1}.catalog-dialog .case-card :is(.drawer-folder,.drawer-front),#choosePuzzles{animation:none!important;transition:none!important;transform:none!important}}

/* Rectangular case: keep square cells and the same geometry for hit testing. */
#boardWrap.rectangular{aspect-ratio:auto;height:auto}
#boardWrap.rectangular #board{aspect-ratio:var(--n)/var(--rows);height:auto}
#boardWrap.rectangular #cells{grid-template-rows:repeat(var(--rows),minmax(0,1fr))}
#boardWrap.rectangular #rowLabels{grid-template-rows:repeat(var(--rows),minmax(0,1fr))}
#boardWrap.rectangular .cell{aspect-ratio:auto;min-height:0;width:100%;height:100%}
#gameShell #boardWrap.rectangular{width:min(100%,calc((100dvh - 190px)*8/9));max-width:780px}
.hint-map-cells{grid-template-rows:repeat(var(--rows,var(--n)),minmax(0,1fr))}
.catalog-dialog .case-preview .scene-svg{aspect-ratio:auto}
@media(max-width:650px),(max-width:950px) and (max-height:500px){
 #gameShell #boardWrap.rectangular{width:min(100cqw,calc((100cqh - 10px)*8/9));max-width:none;max-height:none}
 .fullscreen-board #gameShell #boardWrap.rectangular{width:125cqw;max-width:none;max-height:none}
}

/* Email/password account forms; scoped to the dialog. */
#accountDialog .auth-form{display:grid;gap:12px;margin:20px 0}#accountDialog .auth-field{display:grid;gap:8px}#accountDialog label{font-weight:600}#accountDialog input:not([type=checkbox]){box-sizing:border-box;width:100%;min-width:0;font:inherit;font-size:16px;padding:12px;border:1px solid #8b8398;border-radius:9px;background:var(--paper,#fff);color:var(--ink)}
#accountDialog .auth-switch{display:flex;gap:8px;flex-wrap:wrap}#accountDialog .auth-switch button{flex:1;padding:10px}#accountDialog .auth-switch [aria-pressed=true]{background:#d3eae4;color:#234c47;border:2px solid #397d74}#accountDialog .auth-links{display:grid;gap:6px}#accountDialog .auth-links button,#accountDialog .auth-link{background:transparent;color:inherit;border:0;text-decoration:underline;text-underline-offset:3px;padding:9px;text-align:start}#accountDialog button:disabled{opacity:.6;cursor:wait}#accountDialog :focus-visible{outline:3px solid #269eb8;outline-offset:3px}

/* v50 — detectivebureau. Only the welcome screen and case archive are restyled. */
.welcome{background:repeating-linear-gradient(0deg,transparent,transparent 5px,#4d372902 5px,#4d372902 6px),#eee3ce;color:#302b25;padding-inline:5vw}.home-nav{border-bottom:3px double #ab9476;min-height:90px}.home-logo{color:#302b25;font-family:Georgia,serif;font-size:29px}.home-logo>span:first-child,.home-logo .logo-dot{color:#a55036}.home-main{grid-template-columns:1.1fr 1fr;gap:clamp(35px,6vw,95px);margin:60px auto 50px}.welcome-kicker{color:#936049}.welcome-wordmark{font-size:clamp(48px,5vw,76px);color:#302b25}.welcome-wordmark .welcome-more{color:#a55036}.home-copy h1{font-size:clamp(35px,4vw,57px);line-height:1.12;color:#302b25;max-width:580px;margin:22px 0}.home-intro{color:#6b5c4e;font-size:16px;line-height:1.8}.home-actions .welcome-button{background:#a55036;color:#fff;border-color:#a55036;border-radius:2px;box-shadow:4px 4px 0 #a5503625;padding:16px 24px}.home-actions .welcome-button:hover{background:#8b3e29}.home-how{color:#76523e;text-decoration-color:#b79b7c}.welcome-detail,.home-footer,.welcome-sound-setting{color:#766655}.home-demo{position:relative;border:1px solid #aa8a5a;border-radius:2px;background:#dbc098;transform:rotate(-3deg);padding:27px;box-shadow:7px 9px 0 #5c463a17,18px 26px 30px -18px #4f38234f}.home-demo::before{content:'';position:absolute;inset-inline-start:0;top:-17px;width:45%;height:17px;background:#dbc098;border:1px solid #aa8a5a;border-bottom:0;border-radius:6px 6px 0 0}.demo-board{border:7px solid #fff9eb;outline:1px solid #705e49;box-shadow:4px 5px 0 #5c463a25}.demo-heading{color:#4e3b2a}.demo-badge{color:#914b32;border:1px solid #a5503680;transform:rotate(-4deg)}.demo-story p{color:#503f30}.demo-next{background:#fff5e1;color:#72472f;border-color:#ae8a61}.home-rules{border-top:3px double #ab9476;border-bottom:0}.home-rules strong{color:#5f4e3c}.home-rules p>span{color:#a55036}.home-nav .home-account,.home-language{background:#fff9ee;border-color:#b69a7555;color:#543c2b}
dialog.catalog-dialog{width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;padding:0 max(24px,calc((100vw - 1240px)/2));border:0;border-radius:0;box-shadow:none;background:#eee3ce;color:#302b25;scrollbar-width:thin;overflow-y:auto}dialog.catalog-dialog::backdrop{background:#eee3ce}.catalog-dialog #dialogContent{max-width:1240px;margin:auto}.catalog-dialog>.close{position:fixed;inset-inline-end:13px;top:15px;z-index:20;background:#fff9ee;border:1px solid #c2aa8c;color:#634e39;border-radius:5px;width:32px;height:32px}.archive-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 45px 24px 0;border-bottom:3px double #ab9476}.catalog-dialog .catalog-actions{margin:0;gap:10px}.catalog-dialog .catalog-actions .catalog-language,.catalog-dialog .catalog-account{background:#fff9ee;color:#543c2b;border-color:#b69a7566}.catalog-dialog .catalog-hero{padding:30px 0 23px;background:transparent;border-bottom:3px double #ab9476}.catalog-dialog .catalog-hero .eyebrow{color:#936049!important}.catalog-dialog .catalog-hero h2{font:normal clamp(30px,4vw,48px)/1.12 Georgia,serif;color:#302b25;max-width:none;letter-spacing:-1px;margin:12px 0}.catalog-dialog .catalog-hero>p:not(.eyebrow){font-size:13px;line-height:1.75;color:#6b5c4e;max-width:800px}.catalog-dialog .catalog-summary{margin-top:15px;color:#766655;font-size:11px}.catalog-dialog .catalog-summary>span{border-color:#cbb89b}.catalog-dialog .catalog-completed{color:#65714b}.catalog-dialog .catalog-body{padding:18px 0 40px;background:transparent}.archive-filters{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.catalog-dialog .catalog-sources{margin:0}.catalog-dialog .catalog-sources button{border:0;background:transparent;color:#78654f;padding:8px 10px}.catalog-dialog .catalog-sources button.active{background:#e2d3bb;color:#543b29;border-color:transparent}.catalog-dialog .catalog-sources button>span{background:#fff9ee;color:#78654f}.catalog-dialog .catalog-progress{color:#78654f;font-size:11px}.catalog-dialog .catalog-progress select{background:#fff9ee;color:#543b29;border-color:#cbb89b;max-width:230px}.catalog-dialog .catalog-controls{display:block;border-bottom:1px solid #cbb89b;margin:14px 0 24px}.catalog-dialog .catalog-controls .catalog-levels{max-width:none;gap:0;margin:0}.catalog-dialog .catalog-controls .catalog-levels button{font:15px Georgia,serif;padding:14px 20px;background:transparent;color:#78654f;border:1px solid transparent;border-radius:6px 6px 0 0}.catalog-dialog .catalog-controls .catalog-levels button.active{background:#fff9ee;border-color:#cbb89b;border-bottom-color:#fff9ee;color:#94472e}.catalog-dialog .catalog-group-heading{border-bottom:1px solid #cbb89b;padding-bottom:12px;margin-bottom:22px;gap:18px}.catalog-dialog .catalog-group-heading h3{font:600 21px Georgia,serif;color:#4e3b2a}.catalog-dialog .catalog-group-heading>span{color:#78654f;font-size:11px}.catalog-dialog .catalog-resume{background:#fff5e1;border-color:#cbb89b;color:#6c4932}.catalog-dialog .catalog-resume small{color:#936049}.catalog-dialog .catalog-resume strong{color:#4e3b2a}.catalog-dialog .catalog-note{color:#78654f}.catalog-dialog .case-locked{padding-top:0;background:#9ea99a;cursor:help;box-shadow:0 3px 0 #687668}.catalog-dialog .case-locked .drawer-folder{display:none}.catalog-dialog .case-locked .drawer-front{min-height:234px;background:linear-gradient(115deg,#c9cebf,#b1b9aa);border-top:0;gap:10px}.catalog-dialog .case-locked .drawer-label{background:#eae6d7;border-color:#a6aa98;color:#5e6557}.catalog-dialog .case-locked:hover .drawer-front,.catalog-dialog .case-locked:focus-visible .drawer-front{transform:none}.catalog-dialog .case-locked:hover{box-shadow:0 3px 0 #687668,0 0 0 2px #78654f60}.drawer-lock{display:block;align-self:center;height:28px;color:#665e48}.drawer-lock svg{display:block;height:28px;width:24px;fill:#d0bb8d;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.catalog-dialog .case-locked .case-open{color:#5e6557}.catalog-dialog .case-locked .case-footer{flex-wrap:wrap}.catalog-dialog .case-grid{align-items:stretch}.catalog-dialog .case-card .drawer-front{min-height:190px;height:calc(100% - 0px)}.catalog-dialog .case-locked .drawer-front{min-height:234px}#catalogLockStatus:empty{display:none}#catalogLockStatus{position:sticky;top:8px;z-index:10;background:#fff9ee;border:1px solid #b79a70;border-left:4px solid #a55036;border-radius:5px;padding:13px 16px;color:#65462e;font-size:13px;box-shadow:0 4px 14px #55402a20}
body[data-theme=dark] .welcome,body[data-theme=dark] dialog.catalog-dialog{background:#282723;color:#f1e9dc}body[data-theme=dark] .home-nav,body[data-theme=dark] .archive-nav{border-color:#6c604d}body[data-theme=dark] .home-logo,body[data-theme=dark] .welcome-wordmark,body[data-theme=dark] .home-copy h1{color:#f1e9dc}body[data-theme=dark] .welcome-wordmark .welcome-more,body[data-theme=dark] .home-logo>span:first-child{color:#d58d68}body[data-theme=dark] .home-intro,body[data-theme=dark] .home-how,body[data-theme=dark] .welcome-detail,body[data-theme=dark] .home-rules strong{color:#d0c2ad}body[data-theme=dark] .home-demo{background:#69533b;border-color:#96754d}body[data-theme=dark] .home-demo::before{background:#69533b;border-color:#96754d}body[data-theme=dark] .demo-heading,body[data-theme=dark] .demo-story p{color:#f5e5ca}body[data-theme=dark] .demo-next{background:#403628;color:#f5e5ca;border-color:#957854}body[data-theme=dark] .catalog-dialog :is(.catalog-hero,.catalog-body){background:transparent}body[data-theme=dark] .catalog-dialog .catalog-hero h2,body[data-theme=dark] .catalog-dialog .catalog-group-heading h3{color:#f1e9dc}body[data-theme=dark] .catalog-dialog :is(.catalog-hero>p:not(.eyebrow),.catalog-group-heading>span,.catalog-summary,.catalog-note,.catalog-progress){color:#d0c2ad}body[data-theme=dark] .catalog-dialog .catalog-hero .eyebrow{color:#d8a478!important}body[data-theme=dark] .catalog-dialog :is(.catalog-sources button.active,.catalog-controls .catalog-levels button.active,.catalog-progress select,.catalog-account,.catalog-language),body[data-theme=dark] .home-nav .home-account{background:#453c30;color:#f1dfc7;border-color:#79664d}body[data-theme=dark] .catalog-dialog .catalog-controls .catalog-levels button{color:#d0c2ad}body[data-theme=dark] .catalog-dialog .case-locked .drawer-label{color:#5e6557}body[data-theme=dark] .catalog-dialog .case-locked .case-footer{color:#4a6050}body[data-theme=dark] .catalog-dialog .case-locked .case-open{color:#5e6557}body[data-theme=dark] #catalogLockStatus{background:#453c30;color:#f1dfc7}
@media(max-width:650px){.welcome{padding-inline:21px}.home-nav{min-height:76px}.home-main{grid-template-columns:1fr;gap:45px;margin:32px auto}.home-copy h1{font-size:37px;margin:18px 0}.welcome-wordmark{font-size:53px}.home-intro{font-size:14px}.home-actions{gap:18px}.home-demo{padding:20px;max-width:420px;width:100%;margin:auto;transform:rotate(-1deg)}.home-rules{gap:16px}.home-rules p{font-size:11px}.catalog-dialog .archive-nav{padding:18px 31px 18px 0;gap:10px}.archive-nav .home-logo{font-size:24px}.catalog-dialog .catalog-actions{gap:6px}.catalog-dialog .catalog-account{font-size:11px;padding:7px 9px;max-width:160px}.catalog-dialog .catalog-actions .catalog-language{width:34px;height:34px}.catalog-dialog>.close{inset-inline-end:5px;top:18px;width:27px;height:30px}dialog.catalog-dialog{padding-inline:15px}.catalog-dialog .catalog-hero{padding:24px 0 18px}.catalog-dialog .catalog-hero h2{font-size:33px;margin-right:0}.catalog-dialog .catalog-hero>p:not(.eyebrow){font-size:12px}.catalog-dialog .catalog-summary{font-size:10px;gap:0}.catalog-dialog .catalog-summary>span{padding:0 9px}.catalog-dialog .catalog-summary>span:first-child{padding-inline-start:0}.archive-filters{gap:10px}.catalog-dialog .catalog-sources{width:auto;gap:2px}.catalog-dialog .catalog-sources button{font-size:10px;padding:8px 7px}.catalog-dialog .catalog-progress{font-size:10px}.catalog-dialog .catalog-progress select{min-width:140px;font-size:11px;padding:7px}.catalog-dialog .catalog-controls .catalog-levels{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;max-width:100%}.catalog-dialog .catalog-controls .catalog-levels button{font-size:12px;padding:12px 14px;white-space:nowrap;flex-shrink:0}.catalog-dialog .catalog-group-heading h3{font-size:18px}.catalog-dialog .catalog-group-heading>span{font-size:10px}.catalog-dialog .case-grid{padding:10px;gap:10px}.catalog-dialog .case-card .drawer-front{min-height:195px}.catalog-dialog .case-locked .drawer-front{min-height:239px}.catalog-dialog .drawer-front .drawer-label{font-size:14px}.catalog-dialog .case-locked .case-footer{font-size:8px}.catalog-dialog .catalog-body{padding-bottom:30px}.archive-nav .home-logo{flex-shrink:0}}
@media(max-width:380px){.archive-nav{flex-wrap:wrap}.catalog-dialog .catalog-actions{margin-inline-start:auto}.catalog-dialog .catalog-group-heading{flex-wrap:wrap;gap:8px}.catalog-dialog .case-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px}.catalog-dialog .drawer-front .drawer-label{font-size:12px;min-height:85px}.catalog-dialog .case-card .drawer-front{padding:10px 6px}.catalog-dialog .drawer-front small{font-size:8px}.home-nav .home-logo{font-size:22px}}
html[dir=rtl] .archive-nav{padding-inline:0 45px}html[dir=rtl] .catalog-dialog .catalog-hero h2{margin-inline-end:0}

body:has(dialog.catalog-dialog[open]){overflow:hidden}#welcome #choosePuzzles{background:#a55036;color:#fff;border-color:#a55036;border-radius:3px;box-shadow:4px 4px 0 #a5503625}#welcome #choosePuzzles:hover:not(:disabled){background:#8e402a;box-shadow:4px 6px 0 #a5503630}#welcome #choosePuzzles:active:not(:disabled){box-shadow:1px 1px 0 #a5503625}.catalog-dialog .catalog-sources{background:transparent;border:1px solid #cbb89b;border-radius:6px;padding:3px}.catalog-dialog .level-meter i{background:#d6c6ac}.catalog-dialog .level-meter i.filled{background:#ad7551}body[data-theme=dark] .catalog-dialog .catalog-sources{border-color:#79664d}

html[dir=rtl] .catalog-dialog>.close{right:auto;left:13px}@media(max-width:650px){html[dir=rtl] .catalog-dialog>.close{left:5px}html[dir=rtl] .archive-nav{padding-inline:0 31px}}

body[data-theme=dark] .catalog-dialog .case-locked .drawer-front{background:linear-gradient(115deg,#485549,#39483d)}body[data-theme=dark] .catalog-dialog .case-locked :is(.case-footer,.case-open){color:#e4e4d6}body[data-theme=dark] .catalog-dialog .case-locked .drawer-lock{color:#ebd8aa}

/* v51: guest transfer stays inside the scrollable account dialog. */
.guest-offer,.guest-intro{border:1px solid #4d9d9480;background:#4d9d9415;border-radius:12px;padding:16px;line-height:1.55;text-align:start}.guest-offer{margin:18px 0}.guest-offer h3{margin:0 0 8px}.guest-offer p{margin:8px 0;font-size:14px}.guest-offer button{width:100%;white-space:normal;overflow-wrap:anywhere;padding:12px}.guest-intro,#guestResult{font-size:14px;line-height:1.55}#guestResult:empty{display:none}

/* A solved case keeps its red ink stamp when replayed. */
.catalog-dialog .drawer-front{container-type:inline-size}
.catalog-dialog .drawer-solved-stamp{display:block;align-self:center;position:relative;z-index:2;width:calc(100% - 16px);margin:3px 0 5px;padding:5px 3px;border:4px double currentColor;border-radius:3px;color:#ac242d;background:#fff7e6e8;box-shadow:1px 2px 0 #5d172b18;transform:rotate(-9deg);font:900 clamp(13px,8cqi,25px)/1.15 system-ui,sans-serif;letter-spacing:.025em;text-align:center;text-transform:uppercase;overflow-wrap:anywhere;text-wrap:balance;pointer-events:none}
body[data-theme=dark] .catalog-dialog .drawer-solved-stamp{color:#e34750;background:#243b2ef2;border-color:currentColor}

/* All conclusions stay visible; buttons only select their board overlay. */
.hint-result-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.hint-result-tabs button{min-height:40px;padding:8px 12px}.hint-result-tabs button[aria-pressed="true"]{outline:2px solid #398b9c;outline-offset:1px}.hint-results li{margin:10px 0;line-height:1.6}.hint-results h3{margin-bottom:8px}

/* Play comfort: guided practice, unlocked case, optional fourth-case rating. */
.demo-tools{display:flex;justify-content:center;gap:8px;min-height:28px;margin:8px 0}.demo-tools button{padding:10px 20px;min-height:44px}.demo-tools [aria-pressed=true]{background:#c4e3ed;border-color:#247699}.demo-note{display:grid;place-items:center;background:#f4bed0;color:#8c173b;border:2px solid #bd365d;border-radius:50%;font:bold 20px system-ui;width:28px;height:28px}.demo-cell{touch-action:pan-y}.demo-cell:focus-visible{outline:3px solid #086dcb;outline-offset:-4px}.demo-story #demoNotice{font-size:13px;min-height:1.5em;margin:0}.demo-next[hidden]{display:none}.demo-cross:after{content:'×';font:bold 42px system-ui;color:#24212b}.demo-tools small{line-height:1.4}
.new-case{padding:18px;margin:20px 0;background:linear-gradient(125deg,#e3f1ef,#eef4fb);border:1px solid #73aaa1;border-radius:12px;animation:new-case-appear .65s ease-out}.new-case h3{margin:4px 0 14px}.new-case .eyebrow{margin:0;color:#226458}.case-feedback{border-top:1px solid #aaa2b3;margin:22px 0 4px;padding-top:14px}.case-feedback h3{margin:0 0 6px}.case-feedback p{font-size:14px}.case-feedback fieldset{border:0;padding:0;margin:16px 0;display:flex;gap:8px;flex-wrap:wrap}.case-feedback legend{font-weight:700;margin-bottom:7px}.case-feedback label{display:flex;align-items:center;gap:5px;border:1px solid #aaa2b3;border-radius:8px;padding:10px;font-size:14px;cursor:pointer}.case-feedback label:has(input:checked){background:#d6eaf4;border-color:#277b9e}.feedback-actions{display:flex;gap:8px;flex-wrap:wrap}.feedback-actions button{padding:10px 16px}.case-feedback small{display:block;line-height:1.5;margin-top:12px;color:#676071}.scene-panel{position:relative}.map-overview{position:absolute;z-index:8;top:42px;right:12px;width:108px;padding:0;border:2px solid #167cb3;border-radius:4px;background:#fff;box-shadow:0 2px 12px #0004;overflow:hidden;touch-action:manipulation}.map-overview>svg:first-child{display:block;width:100%;height:auto;pointer-events:none}.map-overview .overview-window{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.overview-window rect{fill:#1977d01c;stroke:#0575dd;stroke-width:3;vector-effect:non-scaling-stroke}.map-overview[hidden]{display:none}
@keyframes new-case-appear{from{transform:translateY(12px);opacity:.1}to{transform:none;opacity:1}}
.no-motion .new-case{animation:none}body[data-theme=dark] .new-case{background:#263e43;color:#edf5f4}body[data-theme=dark] .new-case .eyebrow{color:#a4e2d3}body[data-theme=dark] .case-feedback label:has(input:checked){background:#244b60}body[data-theme=dark] .case-feedback small{color:#c4bccf}
@media(max-width:650px){.map-overview{width:78px;top:32px;right:8px}.fullscreen-board #gameShell #boardWrap{width:max(145cqw,calc(var(--board-cols,16) * 42px));max-width:none;margin:0 90px 12px 0}.fullscreen-board #gameShell .board-stage{padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){.new-case{animation:none}}

.map-overview>svg:first-child{position:relative;inset:auto}.map-overview{top:60px}@media(max-width:650px){.map-overview{top:54px}}

@media(max-width:1000px) and (max-height:520px){.fullscreen-board #gameShell #boardWrap{width:max(145cqw,calc(var(--board-cols,16) * 42px));max-width:none;margin:0 90px 12px 0}.map-overview{width:74px;top:48px}}

/* Account feedback stays above the form, including on small screens. */
#accountNotice{margin:18px 0;padding:16px 18px;border:2px solid #78818b;border-radius:10px;background:#edf1f5;color:#293646;overflow-wrap:anywhere;scroll-margin-block:12px}
#accountNotice[data-tone="success"]{background:#e1f1e9;border-color:#397b68;color:#234f42}
#accountNotice[data-tone="error"]{background:#fff0ed;border-color:#a14437;color:#702e26}
#accountMessageTitle{display:block;font-size:18px;line-height:1.35;margin-bottom:6px}
#accountNotice #accountMessage{margin:0;color:inherit;font-size:14px;line-height:1.6;font-weight:500}
#accountNotice:focus-visible{outline:3px solid #377ca7;outline-offset:3px}

/* Dedicated Dutch rules page, without replacing the approved homepage copy. */
.home-footer{flex-wrap:wrap;gap:16px}.home-footer .home-help{color:inherit;text-underline-offset:4px;line-height:1.5;padding:10px 0}.home-help:focus-visible{outline:3px solid #267a73;outline-offset:5px}