:root{--ink:#172d35;--night:#102a34;--night2:#174354;--paper:#fff7df;--cream:#f7e5b5;--gold:#f1b84b;--orange:#e66b45;--red:#c84755;--teal:#2c9b91;--blue:#476cc4;--line:#1d4048;--shadow:#0c202899;--cell:64px;--radius:10px;--pixel:drop-shadow(0 4px 0 #0d2530)}
.difficulty-stars{color:#d98d22;letter-spacing:1px;white-space:nowrap}.expected-duration{display:inline-block;margin:7px 0 0;color:#526b65;font-weight:800}.stable-wishlist-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0}.stable-wishlist-search{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:900}.stable-wishlist-search input{min-width:180px;border:2px solid #32545b;background:#fffdf4;padding:7px;color:var(--ink)}@media(max-width:700px){.stable-wishlist-toolbar{align-items:stretch;flex-direction:column}.stable-wishlist-search input{width:100%}}
.mg-deduction-preview{margin:10px 0;padding-left:24px;font-size:12px;line-height:1.45}.mg-deduction-preview li{margin:5px 0}.mg-deduction-preview b{color:var(--orange)}
.splash-screen:has(.splash-skip:focus){opacity:0!important;visibility:hidden!important;pointer-events:none!important}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0b2630;color:var(--ink);font-family:ui-monospace,"SFMono-Regular",Consolas,monospace}body{background-color:#0c2d38;background-image:linear-gradient(45deg,#103744 25%,transparent 25%),linear-gradient(-45deg,#103744 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#103744 75%),linear-gradient(-45deg,transparent 75%,#103744 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}button,input,textarea,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.topbar{height:68px;padding:10px clamp(14px,3vw,36px);display:flex;align-items:center;justify-content:space-between;background:var(--night);border-bottom:4px solid #0a1e26;color:#fff;position:sticky;top:0;z-index:20}.brand{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none}.brand-mark{width:44px;height:44px;display:grid;place-items:center;background:var(--gold);border:3px solid #fff1b8;box-shadow:4px 4px 0 #071c24;color:var(--night);font-weight:1000;font-size:20px}.brand-copy strong{display:block;color:#ffd86f;letter-spacing:3px;font-size:12px}.brand-copy span{font-family:Georgia,serif;font-size:17px}.nav-actions{display:flex;gap:8px;align-items:center}.page{width:min(1220px,100%);margin:auto;padding:clamp(18px,4vw,48px)}.hero{min-height:calc(100vh - 68px);display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center}.hero-copy{color:#fff}.eyebrow{color:#ffd66b;font-size:13px;font-weight:900;letter-spacing:4px}.hero h1{font-family:Georgia,serif;font-size:clamp(54px,10vw,118px);line-height:.8;margin:18px 0;text-shadow:7px 7px 0 #071d25;color:#fff7df}.hero h1 small{display:block;font:900 clamp(15px,2.8vw,29px)/1 ui-monospace,monospace;letter-spacing:clamp(4px,1vw,12px);color:#ffc855;margin-top:28px}.hero p{max-width:620px;font:19px/1.65 Georgia,serif;color:#d9edf0}.hero-scene{height:430px;background:#cfe078;border:8px solid #0a2029;box-shadow:14px 14px 0 #061820;position:relative;overflow:hidden;background-image:linear-gradient(90deg,#bed268 2px,transparent 2px),linear-gradient(#bed268 2px,transparent 2px);background-size:32px 32px}.scene-house{position:absolute;left:12%;top:13%;width:68%;height:68%;background:#d89256;border:8px solid #5d362d;box-shadow:inset 0 0 0 8px #ebba72}.scene-room{position:absolute;border:5px solid #6d3c32;background:#efcf86}.scene-room.one{inset:12px 50% 50% 12px}.scene-room.two{inset:50% 12px 12px 38%}.scene-table{position:absolute;width:100px;height:54px;background:#854c32;border:7px solid #4e2d28;left:23%;top:28%;box-shadow:inset 0 0 0 5px #a86b3d}.scene-fountain{position:absolute;right:5%;bottom:8%;width:80px;height:80px;border-radius:50%;background:#62c5c8;border:9px solid #d7d8a1;box-shadow:inset 0 0 0 9px #2e879c}.scene-person{position:absolute;width:32px;height:40px;background:#d34e64;border:4px solid #502e3a;border-radius:45% 45% 30% 30%;left:55%;top:28%;box-shadow:0 -12px 0 -4px #f1b26e}.scene-person.b{background:#3f82b8;left:36%;top:68%}.scene-tree{position:absolute;width:58px;height:58px;border-radius:42%;background:#3a8a4f;border:7px solid #27633f;right:7%;top:8%;box-shadow:8px 7px 0 #66442b}.card{background:var(--paper);border:4px solid var(--line);box-shadow:8px 8px 0 var(--shadow);border-radius:2px;padding:clamp(18px,3vw,30px)}.card h1,.card h2,.card h3{font-family:Georgia,serif;margin-top:0}.auth-card{width:min(520px,100%);margin:5vh auto}.tabs{display:flex;border-bottom:3px solid var(--line);margin:-10px -10px 24px}.tab{flex:1;padding:14px;border:0;background:transparent;color:#617277;font-weight:900}.tab.active{color:var(--night);box-shadow:inset 0 -5px var(--orange)}.field{display:grid;gap:7px;margin:15px 0}.field label{font-size:12px;font-weight:900;letter-spacing:1px;text-transform:uppercase}.field input,.field textarea,.field select{width:100%;border:3px solid #32545b;background:#fffdf4;padding:12px;min-height:48px;border-radius:2px;color:var(--ink)}.field textarea{min-height:100px;resize:vertical}.check{display:flex;gap:10px;align-items:center;margin:14px 0}.check input{width:20px;height:20px}.btn{min-height:46px;padding:10px 18px}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.small{min-height:38px;padding:6px 10px}.button-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.button-row .wide{flex:1}.menu-head{display:flex;align-items:end;justify-content:space-between;color:#fff;margin-bottom:26px}.menu-head h1{font:clamp(38px,7vw,74px)/1 Georgia,serif;margin:0;text-shadow:5px 5px #071d25}.menu-head p{color:#bddde2}.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.menu-tile{min-height:150px;text-align:left;padding:22px;position:relative}.menu-tile .icon{display:block;font-size:30px;margin-bottom:15px}.menu-tile strong{font:700 21px Georgia,serif}.menu-tile small{display:block;margin-top:7px;color:#617277}.section-title{color:#fff;font:700 clamp(26px,5vw,45px) Georgia,serif}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.level-card{background:var(--paper);border:4px solid var(--line);box-shadow:5px 5px 0 #071d25;padding:18px;display:flex;flex-direction:column;min-height:190px}.level-card .number{color:var(--orange);font-weight:1000;letter-spacing:2px}.level-card h3{font:700 20px Georgia,serif;margin:10px 0}.level-card p{font-size:12px;color:#597077;flex:1}.difficulty{display:inline-block;padding:4px 7px;background:#e7d6a7;font-size:10px;text-transform:uppercase;font-weight:900}.game-layout{width:100%;padding:16px;display:grid;grid-template-columns:minmax(500px,1fr) 390px;gap:16px;align-items:start}.game-top{grid-column:1/-1;background:#112f3a;color:#fff;border:3px solid #071b22;padding:10px 14px;display:flex;gap:14px;align-items:center;justify-content:space-between;position:sticky;top:68px;z-index:15}.case-title{min-width:0}.case-title small{color:#ffc85a}.case-title strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.players{display:flex;gap:7px;flex-wrap:wrap}.player-chip{font-size:10px;padding:5px 7px;border:2px solid currentColor;background:#0c2730}.game-board-wrap{background:#071e27;border:5px solid #071820;padding:12px;overflow:auto;max-height:calc(100vh - 160px);touch-action:pan-x pan-y}.grid{display:grid;gap:2px;width:max-content;margin:auto;background:#132f35;border:5px solid #c08b45;padding:3px}.cell{width:var(--cell);height:var(--cell);border:0;position:relative;color:#102f37;background:#d7b979;image-rendering:pixelated}.cell[data-terrain="grass"]{background:#8eb45a}.cell[data-terrain="stone_floor"],.cell[data-terrain="dungeon_floor"]{background:#8c9690}.cell[data-terrain="sand"]{background:#dcc37a}.cell[data-terrain="water"]{background:#55a8b4}.cell[data-terrain="carpet"]{background:#b45d62}.cell[data-terrain="mud"]{background:#98704e}.cell[data-terrain="bridge"],.cell[data-terrain="wood_floor"]{background:#bd8954}.cell[data-terrain="snow"]{background:#dce7df}.cell[data-terrain="temple_floor"]{background:#c9ba8d}.cell::before{content:"";position:absolute;inset:0;border:1px solid #263f3b28;box-shadow:inset -5px -5px #0000000f}.cell.selected{outline:4px solid #ffdd58;z-index:2}.cell.excluded::after{content:"×";position:absolute;inset:0;display:grid;place-items:center;color:#922e3a;font-size:55px;line-height:1;text-shadow:2px 2px #f7e4b8aa}.cell .coord{position:absolute;left:3px;top:2px;font-size:8px;color:#153f4288}.object{position:absolute;right:3px;bottom:3px;font-size:19px;filter:drop-shadow(2px 2px #28383288)}.suspect-piece{position:absolute;inset:8px 11px 7px;display:grid;place-items:center;border:3px solid #3b2732;background:var(--piece,#e85d75);border-radius:45% 45% 24% 24%;color:#fff;font-weight:1000;font-size:15px;text-shadow:1px 1px #222;z-index:3;box-shadow:0 -5px 0 -1px #f0bc80}.note-pin{position:absolute;right:-3px;top:-3px;z-index:6;background:#ffdd58;border:2px solid #5b4423;width:22px;height:22px;display:grid;place-items:center;font-size:11px}.remote-cursor{position:absolute;left:1px;bottom:1px;z-index:7;font-size:8px;color:#fff;background:#17343d;padding:2px 3px}.side-panel{background:var(--paper);border:4px solid var(--line);box-shadow:6px 6px #061a22;max-height:calc(100vh - 160px);display:flex;flex-direction:column}.side-tabs{display:flex;background:#e9d4a4;border-bottom:3px solid var(--line);overflow:auto}.side-tabs button{min-width:25%;min-height:46px;border:0;border-right:1px solid #ad9b77;background:transparent;font-size:10px;font-weight:900}.side-tabs button.active{background:var(--paper);box-shadow:inset 0 -5px var(--orange)}.panel-content{padding:16px;overflow:auto}.suspect-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.suspect{min-height:57px;border:3px solid #39555b;background:#fff9e7;text-align:left;display:flex;align-items:center;gap:9px;padding:6px}.suspect.active{background:#ffd66b;box-shadow:inset 0 0 0 2px #7c582a}.avatar{width:34px;height:38px;border:3px solid #503441;background:var(--avatar);border-radius:45% 45% 25% 25%;flex:none}.suspect strong{font-size:12px}.suspect small{display:block;color:#63757a;font-size:9px}.clue{display:flex;gap:10px;padding:11px 4px;border-bottom:1px solid #d2bf94;font:14px/1.35 Georgia,serif}.clue input{width:20px;height:20px;flex:none}.clue.done{text-decoration:line-through;color:#788481}.note{border:2px solid #806c47;background:#fffdf4;padding:10px;margin:8px 0}.note header{display:flex;justify-content:space-between;font-size:10px;color:#6a7878}.note p{white-space:pre-wrap;margin:8px 0;font:14px/1.4 Georgia,serif}.activity{font-size:11px;display:grid;gap:8px}.activity div{border-left:3px solid var(--teal);padding-left:8px}.room-code{font-size:32px;letter-spacing:8px;color:var(--orange);font-weight:1000}.lobby{display:grid;grid-template-columns:1fr 1fr;gap:18px}.empty{color:#6c7b7d;text-align:center;padding:28px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);z-index:100;background:#112f39;color:#fff;border:3px solid #f7ca5f;box-shadow:5px 5px #06171d;padding:13px 18px;transition:.25s;max-width:min(90vw,600px)}.toast.show{transform:translate(-50%,0)}.toast.error{border-color:#ef6674}.modal-backdrop{position:fixed;inset:0;background:#07171dcc;z-index:80;display:grid;place-items:center;padding:18px}.modal{width:min(560px,100%);max-height:90vh;overflow:auto}.game-list{display:grid;gap:12px}.game-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:var(--paper);border:4px solid var(--line);box-shadow:4px 4px #071d25;padding:16px}.game-row h3{margin:0 0 6px;font-family:Georgia,serif}.game-row small{color:#617277}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:var(--paper);border:3px solid var(--line);padding:14px}.stat strong{display:block;font-size:26px;color:var(--orange)}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;background:var(--paper)}.table th,.table td{text-align:left;padding:9px;border-bottom:2px solid #dccba6;font-size:11px}.mobile-actions{display:none}.muted{color:#687b7e}.danger{color:#ab3544}.success{color:#247c6f}
@media(max-width:900px){:root{--cell:56px}.hero{grid-template-columns:1fr}.hero-scene{display:none}.hero{min-height:auto;padding-top:12vh}.menu-grid,.level-grid{grid-template-columns:repeat(2,1fr)}.game-layout{grid-template-columns:1fr;padding:8px}.game-top{top:68px}.game-board-wrap{max-height:55vh}.side-panel{max-height:none;min-height:330px}.lobby{grid-template-columns:1fr}.admin-stats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){:root{--cell:49px}.topbar{height:60px;padding:8px 10px}.brand-mark{width:39px;height:39px}.brand-copy{display:none}.page{padding:17px 12px}.hero{min-height:calc(100vh - 60px);padding-top:30px}.hero h1{font-size:72px}.menu-grid{grid-template-columns:1fr 1fr;gap:10px}.menu-tile{min-height:125px;padding:14px}.menu-tile strong{font-size:16px}.level-grid{grid-template-columns:1fr}.game-layout{padding:0;gap:0}.game-top{top:60px;border-width:0 0 3px;padding:8px}.game-top .button-row{gap:3px}.game-top .btn{padding:5px 8px;min-height:38px;font-size:10px}.players{display:none}.game-board-wrap{border-width:0 0 4px;padding:6px;max-height:49vh}.side-panel{border-width:0;box-shadow:none}.panel-content{padding:12px}.suspect-list{grid-template-columns:1fr 1fr}.nav-actions .user-label{display:none}.game-row{grid-template-columns:1fr}.admin-stats{grid-template-columns:1fr 1fr}.room-code{font-size:26px}.mobile-actions{display:flex;position:fixed;left:8px;right:8px;bottom:8px;z-index:25;gap:6px}.mobile-actions .btn{flex:1;font-size:10px;padding:5px}.side-panel{padding-bottom:58px}}
.cell.crime{outline:3px dashed #7c2535;outline-offset:-4px}.victim-marker{position:absolute;left:4px;bottom:3px;z-index:2;color:#5f2031;background:#f1d5b2;border:2px solid #5f2031;width:23px;height:23px;display:grid;place-items:center;font-weight:1000}

/* Vernieuwd onderzoeksbord: originele MG-portretten, dynamische kaarten en dossiers. */
.game-shell{background:radial-gradient(circle at 50% 15%,#254d55 0,#0b2630 62%);min-height:100vh}.game-layout{grid-template-columns:minmax(500px,1fr) minmax(400px,480px);gap:20px;padding:20px;max-width:1600px;margin:auto}.game-top{border-color:#071a21;background:linear-gradient(100deg,#102f3a,#1d4d58);box-shadow:0 6px 0 #07191f;padding:11px 16px}.case-title small{text-transform:uppercase;letter-spacing:2px}.case-title strong{font:700 20px Georgia,serif;color:#fff4d4}.game-board-wrap{position:relative;background:#d9c08b;border:8px solid #261c1b;box-shadow:inset 0 0 0 4px #72513b,12px 14px 0 #07191f;padding:18px;max-height:calc(100vh - 170px);background-image:linear-gradient(90deg,#00000009 1px,transparent 1px),linear-gradient(#00000009 1px,transparent 1px);background-size:18px 18px}.map-caption{display:flex;justify-content:space-between;align-items:center;margin:0 auto 10px;width:min-content;min-width:min(100%,470px);color:#33251e;text-transform:uppercase;letter-spacing:2px;font-size:11px}.map-caption span{font:700 18px Georgia,serif;text-transform:none;letter-spacing:0}.map-caption strong{background:#342824;color:#f6e8c1;padding:5px 8px}.grid{gap:2px;background:transparent;border:6px solid #241c1c;box-shadow:0 0 0 3px #85674a,0 12px 22px #261c1c55;padding:4px}.cell{border-radius:0;overflow:visible;transition:transform .12s,filter .12s;box-shadow:inset 0 0 0 1px #1d302d44}.cell:hover{filter:brightness(1.08);z-index:5}.cell.void{visibility:hidden;pointer-events:none}.cell[data-area="noord"]{box-shadow:inset 0 0 0 2px #6e376d55}.cell[data-area="zuid"]{box-shadow:inset 0 0 0 2px #26717555}.cell[data-area="misdaadplek"]{box-shadow:inset 0 0 0 3px #a43b4c}.cell[data-terrain="grass"]{background-color:#769a55;background-image:radial-gradient(#b3c97a 1px,transparent 2px),linear-gradient(135deg,#ffffff0b 25%,transparent 25%);background-size:13px 13px,18px 18px}.cell[data-terrain="stone_floor"]{background-color:#9e9b88;background-image:linear-gradient(90deg,#65645666 2px,transparent 2px),linear-gradient(#65645655 2px,transparent 2px);background-size:26px 18px}.cell[data-terrain="dungeon_floor"]{background-color:#686b65;background-image:linear-gradient(90deg,#3d403b88 2px,transparent 2px),linear-gradient(#3d403b88 2px,transparent 2px);background-size:25px 18px}.cell[data-terrain="sand"]{background-color:#d7b969;background-image:radial-gradient(#ae8b4a55 1px,transparent 2px);background-size:10px 10px}.cell[data-terrain="wood_floor"]{background-color:#ac7448;background-image:repeating-linear-gradient(90deg,transparent 0 19px,#71462f66 20px 22px),linear-gradient(#e0a76633,#6e432f22)}.cell[data-terrain="carpet"]{background-color:#955368;background-image:repeating-linear-gradient(45deg,#d6a47d22 0 5px,transparent 5px 11px)}.cell[data-terrain="mud"]{background-color:#80624b;background-image:radial-gradient(ellipse at 30% 40%,#4b3a3166 0 5px,transparent 6px)}.cell[data-terrain="bridge"]{background-color:#98704b;background-image:repeating-linear-gradient(0deg,#4e382d44 0 2px,transparent 2px 13px)}.cell[data-terrain="snow"]{background-color:#dce9e5;background-image:radial-gradient(#fff 1px,transparent 2px);background-size:12px 12px}.cell[data-terrain="temple_floor"]{background-color:#c8ae78;background-image:linear-gradient(45deg,#8a774333 25%,transparent 25%,transparent 75%,#8a774433 75%);background-size:18px 18px}.area-label{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);padding:3px 7px;background:#f7e7bd;border:2px solid #352723;box-shadow:2px 2px 0 #352723;color:#352723;font:700 9px/1.1 Georgia,serif;text-transform:uppercase;white-space:nowrap;pointer-events:none}.object{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#f4d99b;border:2px solid #3c3027;right:3px;bottom:3px;font-size:16px;z-index:2}.victim-marker{width:28px;height:28px;border-radius:50%;background:#f2d3cf;box-shadow:2px 2px 0 #492332;z-index:5}.note-pin{border-radius:50%;box-shadow:2px 2px #46391f}.suspect-piece{inset:5px 7px 5px;background-image:url('/assets/mg-portretten-v1.webp');background-size:300% 300%;border:3px solid #f5dda5;border-radius:50%;box-shadow:0 3px 0 #2b1d24,0 0 0 2px #2b1d24;color:transparent}.portrait-0{--portrait-x:0%;--portrait-y:0%}.portrait-1{--portrait-x:50%;--portrait-y:0%}.portrait-2{--portrait-x:100%;--portrait-y:0%}.portrait-3{--portrait-x:0%;--portrait-y:50%}.portrait-4{--portrait-x:50%;--portrait-y:50%}.portrait-5{--portrait-x:100%;--portrait-y:50%}.portrait-6{--portrait-x:0%;--portrait-y:100%}.portrait-7{--portrait-x:50%;--portrait-y:100%}.portrait-8{--portrait-x:100%;--portrait-y:100%}.portrait-0,.portrait-1,.portrait-2,.portrait-3,.portrait-4,.portrait-5,.portrait-6,.portrait-7,.portrait-8{background-position:var(--portrait-x) var(--portrait-y)}.side-panel{border:0;background:#ede2c7;box-shadow:8px 10px 0 #07191f;max-height:calc(100vh - 170px);border-radius:8px;overflow:hidden}.side-tabs{background:#273f43;border-bottom:0;padding:5px;gap:4px}.side-tabs button{min-width:33%;color:#d9e7e2;border:0;border-radius:4px;letter-spacing:1px}.side-tabs button.active{background:#f5e8c8;color:#2b3938;box-shadow:none}.panel-content{padding:18px;background-image:linear-gradient(90deg,#7a62410c 1px,transparent 1px),linear-gradient(#7a62410c 1px,transparent 1px);background-size:16px 16px}.dossier-heading{display:flex;gap:14px;align-items:end;justify-content:space-between;margin-bottom:12px}.dossier-heading h2{margin:3px 0 0;font-size:22px}.dossier-heading p{max-width:170px;margin:0;color:#68736f;font-size:10px}.dossier-heading .eyebrow{color:#9c493e;letter-spacing:2px;font-size:9px}.victim-dossier{display:flex;align-items:center;gap:12px;background:#512b39;color:#fff3dc;border:3px solid #2c1d25;padding:9px;margin-bottom:14px;box-shadow:4px 4px 0 #b49a6f}.victim-seal{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#eac6c1;color:#672d3b;border:3px solid #2c1d25;font-size:25px}.victim-dossier span:last-child{display:grid}.victim-dossier small{font-size:8px;letter-spacing:2px;color:#efb9bb}.victim-dossier strong{font:700 18px Georgia,serif}.victim-dossier em{font-size:9px;color:#dbc9bd}.suspect-list.dossier-list{display:grid;grid-template-columns:1fr;gap:12px}.suspect-dossier{background:#fbf3dc;border:3px solid #594b3b;box-shadow:4px 4px 0 #b8a47c;position:relative;transition:.15s}.suspect-dossier.active{border-color:#bd5d3f;box-shadow:5px 5px 0 #d89a4c;transform:translate(-1px,-1px)}.suspect-dossier.accused::after{content:'VERDACHT';position:absolute;right:5px;top:5px;z-index:5;background:#a23c4d;color:white;padding:3px 5px;font-size:8px;letter-spacing:1px;transform:rotate(3deg)}.suspect.dossier-person{width:100%;min-height:88px;border:0;background:#e7d4a9;padding:8px;display:grid;grid-template-columns:74px 1fr;gap:11px;box-shadow:none}.suspect.dossier-person:hover{background:#efdcae;transform:none}.suspect.dossier-person .avatar{width:74px;height:74px;border-radius:4px;border:3px solid #3d302b;background-image:url('/assets/mg-portretten-v1.webp');background-size:300% 300%;box-shadow:3px 3px 0 #6f5741}.person-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start}.person-copy small{text-transform:uppercase;letter-spacing:1px;color:#765e45;font-size:8px}.person-copy strong{font:700 24px Georgia,serif;color:#352b26;border-bottom:2px solid #a8885b;width:100%;padding-bottom:2px}.person-copy em{font-size:9px;color:#6b776f;margin-top:7px}.person-clues{padding:8px 10px 10px;display:grid;gap:6px}.dossier-clue{display:grid;grid-template-columns:20px 1fr;gap:7px;align-items:start;font:13px/1.35 Georgia,serif;color:#342d28;cursor:pointer}.dossier-clue input{width:18px;height:18px;accent-color:#9a4e3d}.dossier-clue.done span{text-decoration:line-through;color:#87918a}.dossier-actions{position:sticky;bottom:-18px;background:#ede2c7;border-top:2px solid #bbaa83;padding:12px 0 4px;margin-top:15px;z-index:9}.dossier-actions .button-row+.button-row{margin-top:9px}
@media(max-width:1050px){.game-layout{grid-template-columns:1fr}.game-board-wrap{max-height:58vh}.side-panel{max-height:none}.dossier-list{grid-template-columns:repeat(2,1fr)!important}.dossier-actions{position:static}}
@media(max-width:650px){:root{--cell:48px}.game-layout{padding:0;gap:0}.game-board-wrap{padding:11px 5px 14px;border-width:0 0 6px;box-shadow:none;max-height:52vh}.map-caption{padding:0 8px;min-width:100%;margin-bottom:6px}.map-caption span{font-size:14px}.grid{border-width:4px;padding:2px}.side-panel{border-radius:0}.dossier-list{grid-template-columns:1fr!important}.panel-content{padding:13px}.dossier-heading p{display:none}.suspect.dossier-person{grid-template-columns:66px 1fr;min-height:80px}.suspect.dossier-person .avatar{width:66px;height:66px}.person-copy strong{font-size:21px}.area-label{font-size:7px;padding:2px 4px}.object{width:22px;height:22px;font-size:13px}.victim-marker{width:23px;height:23px}.game-top{top:60px}.side-tabs button{min-height:44px}}

/* Originele MG-terreintegels: samenhangende kamers met heldere wandcontouren. */
.cell[data-terrain]{background-image:url('/assets/mg-terreintegels-v1.webp');background-size:400% 300%;background-repeat:no-repeat;background-color:#9bb36a;image-rendering:pixelated;border-style:solid;border-color:#34251f}
.cell[data-terrain="wood_floor"]{background-position:0 0}
.cell[data-terrain="stone_floor"]{background-position:33.333% 0}
.cell[data-terrain="grass"]{background-position:66.666% 0}
.cell[data-terrain="sand"]{background-position:100% 0}
.cell[data-terrain="carpet"]{background-position:0 50%}
.cell[data-terrain="mud"]{background-position:33.333% 50%}
.cell[data-terrain="bridge"]{background-position:66.666% 50%}
.cell[data-terrain="snow"]{background-position:100% 50%}
.cell[data-terrain="dungeon_floor"]{background-position:0 100%}
.cell[data-terrain="temple_floor"]{background-position:33.333% 100%}
.cell[data-terrain="water"]{background-position:66.666% 100%}
.cell[data-terrain="cobblestone"]{background-position:100% 100%}
.cell.wall-n{border-top-width:6px}.cell.wall-e{border-right-width:6px}.cell.wall-s{border-bottom-width:6px}.cell.wall-w{border-left-width:6px}
.cell.wall-n::before{border-top:2px solid #dbc079}.cell.wall-e::before{border-right:2px solid #130d0b}.cell.wall-s::before{border-bottom:2px solid #130d0b}.cell.wall-w::before{border-left:2px solid #dbc079}
.cell.crime{outline:none;filter:saturate(1.12)}
.cell[data-area="misdaadplek"]{border-color:#572c38;box-shadow:inset 0 0 0 3px #d66b75aa}
.area-label{padding:5px 9px;background:linear-gradient(#fff1ca,#e7c98e);border:3px solid #3a2821;box-shadow:3px 3px 0 #1b1210;color:#302019;font-size:10px;letter-spacing:.35px;text-shadow:0 1px #fff8df;max-width:calc(var(--cell)*2.5);white-space:normal;text-align:center}
.cell[data-area="misdaadplek"] .area-label{background:linear-gradient(#f7d6d0,#e9a8aa);border-color:#572c38;color:#572c38}
.coord{background:#f8e8bccc;padding:1px 2px;border-radius:2px;font-weight:900}
.object{border-radius:4px;background:#ffe5a3;box-shadow:2px 2px 0 #261b17;filter:none}
@media(max-width:650px){.cell.wall-n{border-top-width:5px}.cell.wall-e{border-right-width:5px}.cell.wall-s{border-bottom-width:5px}.cell.wall-w{border-left-width:5px}.area-label{font-size:7px;padding:3px 4px;border-width:2px}}

/* Vaste puzzeltafel: verdachten links, raster midden, gereedschap rechts. */
.game-shell{position:fixed;inset:0;overflow:hidden}.game-header{height:60px;position:relative;top:auto}.game-header .case-title{margin-left:auto;margin-right:auto}.game-header .case-title strong{font-size:18px}.fixed-game{height:calc(100dvh - 60px);width:100%;max-width:none;margin:0;padding:10px;display:grid;grid-template-columns:minmax(350px,31vw) minmax(0,1fr) 180px;grid-template-rows:54px minmax(0,1fr);gap:10px;overflow:hidden}.fixed-game .game-top{grid-column:1/-1;grid-row:1;position:relative;top:auto;padding:7px 12px;min-height:0}.case-instruction{display:flex;gap:15px;align-items:center}.case-instruction strong{font:700 17px Georgia,serif;color:#ffdc78}.case-instruction span{font-size:10px;color:#d8e7e3}.fixed-game .side-panel{grid-column:1;grid-row:2;min-height:0;max-height:none;height:100%;box-shadow:5px 6px 0 #07191f}.fixed-game .game-board-wrap{grid-column:2;grid-row:2;min-height:0;max-height:none;height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px}.fixed-game .map-caption{width:min-content;min-width:min(100%,440px);flex:none}.fixed-game .grid{flex:none}.fixed-game .panel-content{padding:10px;min-height:0;overflow:auto}.fixed-game .dossier-heading{margin-bottom:5px;align-items:center}.fixed-game .dossier-heading h2{font-size:16px;margin:0}.fixed-game .dossier-heading p{font-size:8px;max-width:145px}.fixed-game .dossier-heading .eyebrow{display:none}.fixed-game .victim-dossier{min-height:42px;margin-bottom:7px;padding:4px 7px}.fixed-game .victim-seal{width:30px;height:30px;font-size:18px}.fixed-game .victim-dossier strong{font-size:14px}.fixed-game .victim-dossier em,.fixed-game .victim-dossier small{font-size:7px}.fixed-game .dossier-list{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px}.fixed-game .suspect-dossier{box-shadow:2px 2px 0 #b8a47c;min-width:0}.fixed-game .suspect.dossier-person{grid-template-columns:48px minmax(0,1fr);min-height:58px;gap:5px;padding:4px}.fixed-game .suspect.dossier-person .avatar{width:48px;height:48px;border-width:2px;box-shadow:2px 2px 0 #6f5741}.fixed-game .person-copy strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fixed-game .person-copy small,.fixed-game .person-copy em{font-size:6.5px;margin-top:2px}.fixed-game .person-clues{padding:4px 5px 5px;gap:3px}.fixed-game .dossier-clue{grid-template-columns:13px 1fr;gap:3px;font-size:8px;line-height:1.15}.fixed-game .dossier-clue input{width:12px;height:12px;margin:0}.fixed-game .dossier-actions{display:none}.tool-panel{grid-column:3;grid-row:2;min-height:0;background:#f4f3f8;border:3px solid #303039;border-radius:8px;box-shadow:5px 6px 0 #07191f;padding:9px;display:flex;flex-direction:column;gap:8px;color:#272732}.tool-panel h3{margin:0 0 2px;font-size:12px}.tool-modes{display:grid;gap:7px}.tool-button,.tool-wide{min-height:52px}.tool-button{display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr 1fr;text-align:left;align-items:center;padding:4px 7px}.tool-button span{grid-row:1/3;font-size:28px;text-align:center}.tool-button small{font-size:10px}.tool-button em{font-size:6px;color:#777;font-style:normal}.tool-wide{min-height:45px;padding:7px}.tool-wide:disabled{opacity:.42}.tool-wide.help{min-height:36px}.tool-spacer{flex:1}.possibility-stack{position:absolute;z-index:3;inset:7px 6px 5px;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:2px;pointer-events:none}.possibility{display:block;min-width:0;min-height:0;border:1px solid #fff1bd;outline:1px solid #38282d;border-radius:50%;background-image:url('/assets/mg-portretten-v1.webp');background-size:300% 300%;image-rendering:pixelated}.cell.excluded::after{z-index:6;font-size:calc(var(--cell)*.72);font-weight:1000;color:#742836;text-shadow:2px 2px #ffe9b7}.cell.auto-cross::after{color:#27393d99;text-shadow:1px 1px #f8e5b0}.cell{touch-action:none;-webkit-user-select:none;user-select:none}.cell .suspect-piece{z-index:8}
@media(max-height:760px) and (min-width:901px){.fixed-game{grid-template-rows:46px minmax(0,1fr)}.fixed-game .game-top{padding:4px 9px}.fixed-game .victim-dossier{display:none}.fixed-game .suspect.dossier-person{grid-template-columns:40px minmax(0,1fr);min-height:48px}.fixed-game .suspect.dossier-person .avatar{width:40px;height:40px}.fixed-game .dossier-clue{font-size:7px}.tool-button,.tool-wide{min-height:40px}.tool-panel{gap:5px}}
@media(max-width:900px){.game-header{height:54px}.game-header .brand-copy{display:none}.game-header .case-title strong{font-size:13px}.fixed-game{height:calc(100dvh - 54px);padding:5px;grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:42px minmax(0,1fr) minmax(0,1fr);gap:5px;--cell:clamp(26px,var(--mobile-cell),48px)!important}.fixed-game .game-top{grid-column:1/-1;grid-row:1}.case-instruction strong{font-size:12px}.case-instruction span{font-size:7px}.fixed-game .players{display:none}.fixed-game .game-board-wrap{grid-column:1;grid-row:2;padding:4px;border-width:4px}.fixed-game .map-caption{min-width:100%;margin-bottom:3px;padding:0 3px}.fixed-game .map-caption span{font-size:11px}.fixed-game .map-caption strong{font-size:7px}.fixed-game .side-panel{grid-column:1/-1;grid-row:3}.tool-panel{grid-column:2;grid-row:2;padding:4px;gap:4px;box-shadow:none}.tool-panel h3{font-size:8px}.tool-button{min-height:35px;grid-template-columns:28px 1fr;padding:2px}.tool-button span{font-size:20px}.tool-button small{font-size:7px}.tool-button em{font-size:5px}.tool-wide{min-height:31px;padding:3px}.tool-spacer{display:none}.fixed-game .side-tabs button{min-height:30px}.fixed-game .panel-content{padding:5px}.fixed-game .dossier-heading,.fixed-game .victim-dossier{display:none}.fixed-game .dossier-list{gap:4px}.fixed-game .suspect.dossier-person{grid-template-columns:34px minmax(0,1fr);min-height:38px;padding:2px}.fixed-game .suspect.dossier-person .avatar{width:34px;height:34px}.fixed-game .person-copy strong{font-size:11px}.fixed-game .person-copy small,.fixed-game .person-copy em{font-size:5px}.fixed-game .person-clues{padding:2px;gap:1px}.fixed-game .dossier-clue{grid-template-columns:9px 1fr;font-size:6px}.fixed-game .dossier-clue input{width:8px;height:8px}.area-label{font-size:6px}}
.possibility-stack{inset:5px;grid-template-columns:repeat(3,calc(var(--cell)*.21));grid-auto-rows:calc(var(--cell)*.21);align-content:end;justify-content:start}.possibility{width:calc(var(--cell)*.21);height:calc(var(--cell)*.21);min-width:auto;min-height:auto}
@media(max-width:900px){.fixed-game{grid-template-rows:42px minmax(0,4fr) minmax(0,5fr)}.tool-button{min-height:33px}.tool-wide{min-height:29px}.fixed-game .side-tabs{overflow:hidden}.fixed-game .side-tabs button{min-width:0;flex:1}}

/* Grote, herkenbare object-sprites die vrijwel het volledige vak innemen. */
.object{inset:6%;right:auto;bottom:auto;width:88%;height:88%;border:0;border-radius:0;background-color:transparent;background-image:url('/assets/mg-objecten-v2.webp');background-size:400% 300%;background-repeat:no-repeat;box-shadow:none;color:transparent;font-size:0;filter:drop-shadow(1px 2px 1px #1c15104a);image-rendering:auto;mix-blend-mode:multiply;pointer-events:none;z-index:4}
.object-ton{background-position:0 0}.object-tafel{background-position:33.333% 0}.object-kist{background-position:66.666% 0}.object-boekenkast{background-position:100% 0}
.object-plant{background-position:0 50%}.object-bed{background-position:33.333% 50%}.object-werkbank{background-position:66.666% 50%}.object-fontein{background-position:100% 50%}
.object-altaar{background-position:0 100%}.object-stoel{background-position:33.333% 100%}.object-boom{background-position:66.666% 100%}.object-struik{background-position:100% 100%}
.cell .coord{z-index:9}.cell .area-label{z-index:10}.cell .victim-marker{z-index:11}.cell .suspect-piece{z-index:12}.cell .possibility-stack{z-index:8}

/* Letters zijn op het raster sneller te onderscheiden dan portretten. */
.cell .suspect-piece.letter-marker{background-image:none;background:var(--marker,#d35b67);color:#fff;border:3px solid #fff1b9;border-radius:50%;font:1000 calc(var(--cell)*.38)/1 ui-monospace,monospace;text-shadow:2px 2px 0 #33242b;box-shadow:0 3px 0 #2b1d24,0 0 0 2px #2b1d24}
.possibility.letter-marker{background-image:none;background:var(--marker,#d35b67);color:#fff;display:grid;place-items:center;font:1000 calc(var(--cell)*.13)/1 ui-monospace,monospace;font-style:normal;text-shadow:1px 1px #33242b}
.victim-marker{font:1000 calc(var(--cell)*.27)/1 ui-monospace,monospace}
.area-label.boundary-label{left:50%;top:50%;max-width:none;padding:3px 7px;border-width:2px;white-space:nowrap;font-size:8px;line-height:1;box-shadow:2px 2px 0 #1b1210;transform-origin:center;z-index:15}
.area-label.boundary-label.side-n{top:0;transform:translate(-50%,-50%)}
.area-label.boundary-label.side-s{top:100%;transform:translate(-50%,-50%)}
.area-label.boundary-label.side-e{left:100%;transform:translate(-50%,-50%) rotate(-90deg)}
.area-label.boundary-label.side-w{left:0;transform:translate(-50%,-50%) rotate(-90deg)}
@media(max-width:900px){.area-label.boundary-label{font-size:6px;padding:2px 5px}}

/* Fris licht thema: compact, helder en met zachte 16-bit accenten. */
:root{--ink:#243b3b;--night:#f7fbf6;--night2:#dff1e9;--paper:#fffefa;--cream:#f4eccf;--gold:#f2c85b;--orange:#e97b58;--red:#cf6370;--teal:#55a99a;--blue:#668bc2;--line:#41615d;--shadow:#8aa49a55;--radius:7px}
html,body{background-color:#eaf5ee;background-image:linear-gradient(45deg,#dceee4 25%,transparent 25%),linear-gradient(-45deg,#dceee4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dceee4 75%),linear-gradient(-45deg,transparent 75%,#dceee4 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;color:var(--ink)}
.topbar{height:58px;padding:7px clamp(12px,2vw,24px);background:#fffefa;border-bottom:2px solid #8eb3a7;color:#29443f;box-shadow:0 3px 0 #bdd6cd;position:sticky}.brand{gap:9px;color:#29443f}.brand-mark{width:40px;height:40px;border:2px solid #52736c;box-shadow:2px 2px 0 #b2cdc3;background:#f4ce67;font-size:18px}.brand-copy strong{color:#d06b52;font-size:10px}.brand-copy span{font-size:15px}.nav-actions{gap:5px}.page{width:min(1160px,100%);padding:clamp(14px,2.4vw,30px)}
.btn{min-height:39px;padding:7px 13px}.btn.small{min-height:32px;padding:5px 8px}.button-row{gap:8px}
.hero{min-height:calc(100vh - 58px);gap:28px}.hero-copy{color:#29443f}.eyebrow{color:#d7634f;font-size:11px;letter-spacing:3px}.hero h1{font-size:clamp(52px,9vw,100px);margin:13px 0;color:#29443f;text-shadow:4px 4px 0 #c3ddd3}.hero h1 small{color:#c65c49;margin-top:20px}.hero p{font-size:17px;line-height:1.5;color:#4e6b65}.hero-scene{height:350px;border:4px solid #52736c;box-shadow:6px 6px 0 #b4cec4;border-radius:6px}
.card,.menu-tile,.level-card,.game-row,.stat{background:#fffefa;border-width:2px;border-color:#75958e;box-shadow:3px 3px 0 #bcd1c9;border-radius:6px}.card{padding:clamp(15px,2vw,22px)}.auth-card{margin:3vh auto}.tabs{border-bottom-width:2px;margin:-6px -6px 17px}.tab{padding:10px}.field{gap:5px;margin:11px 0}.field input,.field textarea,.field select{border-width:2px;border-color:#779992;padding:9px;min-height:41px;border-radius:5px;background:#fff}.check{margin:10px 0}
.menu-head{color:#29443f;margin-bottom:16px}.menu-head h1{font-size:clamp(34px,6vw,62px);color:#29443f;text-shadow:3px 3px #c3ddd3}.menu-head p{color:#617b75}.menu-grid{gap:11px}.menu-tile{min-height:118px;padding:15px}.menu-tile .icon{font-size:24px;margin-bottom:9px}.menu-tile strong{font-size:18px}.menu-tile small{margin-top:4px}.section-title{color:#29443f;font-size:clamp(26px,4vw,39px)}.level-grid{gap:10px}.level-card{padding:13px;min-height:155px}.level-card h3{font-size:18px;margin:7px 0}.level-card p{margin:5px 0;font-size:11px}.difficulty{background:#e3f0e8;border-radius:3px}.game-list{gap:8px}.game-row{padding:11px}
.game-shell{background:linear-gradient(135deg,#eef8f1,#dcefe8);color:#29443f}.game-header{height:54px;border-bottom-color:#8eb3a7;box-shadow:0 3px 0 #bdd6cd}.game-header .case-title strong{color:#29443f;font-size:16px}.case-title small{color:#d46450}.fixed-game{height:calc(100dvh - 54px);padding:7px;grid-template-columns:minmax(330px,29vw) minmax(0,1fr) 156px;grid-template-rows:44px minmax(0,1fr);gap:7px}.fixed-game .game-top{padding:5px 10px;background:#fffefa;border:2px solid #90aea7;border-radius:6px;box-shadow:2px 2px 0 #bed2cb;color:#29443f}.case-instruction{gap:10px}.case-instruction strong{font-size:15px;color:#c45f4b}.case-instruction span{font-size:8px;color:#617b75}.player-chip{background:#edf7f2}
.fixed-game .side-panel{background:#fffefa;border:2px solid #89a59e;border-radius:6px;box-shadow:3px 3px 0 #b9cdc6}.side-tabs{padding:3px;gap:3px;background:#dceee7;border-bottom:1px solid #abc3ba}.side-tabs button{min-height:35px;color:#49655f;border-radius:4px}.side-tabs button.active{background:#fffefa;color:#29443f;box-shadow:inset 0 -3px #e97b58}.fixed-game .panel-content{padding:7px;background-size:14px 14px}.fixed-game .dossier-heading{margin-bottom:3px}.fixed-game .dossier-heading h2{font-size:14px}.victim-dossier{background:#f8e5e7;color:#633943;border:2px solid #bd7c86;box-shadow:2px 2px 0 #e1c5c4}.victim-seal{border-width:2px;background:#fff8f5}.victim-dossier small{color:#a84f61}.victim-dossier em{color:#76585c}.fixed-game .victim-dossier{min-height:36px;margin-bottom:5px;padding:3px 6px}.fixed-game .victim-seal{width:26px;height:26px;font-size:15px}.fixed-game .dossier-list{gap:5px}.suspect-dossier{background:#fffefa;border:2px solid #9a8a6c;box-shadow:2px 2px 0 #ddd0b3}.suspect-dossier.active{border-color:#de7a55;box-shadow:2px 2px 0 #f1ba72}.suspect.dossier-person{background:#f3ecd6}.suspect.dossier-person:hover{background:#f8f1dd}.fixed-game .suspect.dossier-person{grid-template-columns:44px minmax(0,1fr);min-height:52px;padding:3px}.fixed-game .suspect.dossier-person .avatar{width:44px;height:44px;box-shadow:1px 1px 0 #8d765e}.fixed-game .person-copy strong{font-size:14px}.fixed-game .person-clues{padding:3px 4px 4px;gap:2px}.fixed-game .dossier-clue{font-size:7.5px}.dossier-clue input{accent-color:#55a99a}
.fixed-game .game-board-wrap{padding:7px;background:#f8f4df;border:3px solid #78978f;border-radius:6px;box-shadow:3px 3px 0 #b4c9c1;background-image:linear-gradient(90deg,#6d8e840d 1px,transparent 1px),linear-gradient(#6d8e840d 1px,transparent 1px)}.fixed-game .map-caption{margin-bottom:5px;color:#38534e}.map-caption span{font-size:16px}.map-caption strong{padding:4px 7px;background:#dceee7;color:#395a53;border:1px solid #95b1a8;border-radius:3px}.grid{border:4px solid #4c625e;box-shadow:0 0 0 2px #b5c9c1,0 5px 10px #5d716f33;padding:2px}
.tool-panel{background:#fffefa;border:2px solid #8ba8a1;border-radius:6px;box-shadow:3px 3px 0 #bacdc6;padding:6px;gap:5px;color:#29443f}.tool-panel h3{font-size:10px}.tool-modes{gap:5px}.tool-button,.tool-wide{min-height:43px}.tool-button{grid-template-columns:32px 1fr;padding:3px 5px}.tool-button span{font-size:23px}.tool-button small{font-size:8px}.tool-wide{min-height:37px;padding:5px}.tool-wide.help{min-height:31px}
.toast{background:#fffefa;color:#29443f;border:2px solid #e4b949;box-shadow:3px 3px #aabfb7}.modal-backdrop{background:#d9ebe5dd}.table{background:#fffefa}
@media(max-height:760px) and (min-width:901px){.fixed-game{grid-template-rows:40px minmax(0,1fr)}.tool-button,.tool-wide{min-height:35px}}
@media(max-width:900px){.topbar{height:52px}.game-header{height:50px}.fixed-game{height:calc(100dvh - 50px);padding:4px;grid-template-rows:38px minmax(0,4fr) minmax(0,5fr);gap:4px}.fixed-game .game-board-wrap{padding:3px;border-width:2px}.tool-panel{padding:3px;gap:3px}.fixed-game .side-panel{box-shadow:none}.hero{min-height:calc(100vh - 52px)}}

/* V13: rustige pastelvloeren en eenvoudige emoji-achtige persoonskaarten. */
.cell[data-terrain]{background-image:url('/assets/mg-terreintegels-v2.webp');background-color:#f4f2d8;image-rendering:auto}
.suspect-piece,.possibility,.suspect.dossier-person .avatar{background-image:url('/assets/mg-portretten-v3.webp')}
.fixed-game{grid-template-columns:minmax(390px,33vw) minmax(0,1fr) 150px}
.fixed-game .dossier-heading{display:block;text-align:center;margin-bottom:5px}.fixed-game .dossier-heading h2{font-size:15px}.fixed-game .dossier-heading p{max-width:none;margin:2px auto 0;font-size:7.5px;line-height:1.25;color:#667471}
.fixed-game .dossier-list{gap:7px}.fixed-game .suspect-dossier{border-color:#687570;border-radius:7px;overflow:hidden;background:#f4f5f8;box-shadow:2px 2px 0 #c5cdc9}
.fixed-game .suspect.dossier-person{grid-template-columns:58px minmax(0,1fr);min-height:66px;gap:6px;padding:4px;background:#fff}
.fixed-game .suspect.dossier-person .avatar{width:58px;height:58px;border:3px solid #252b2a;border-radius:7px;box-shadow:none;image-rendering:auto}
.fixed-game .person-copy{justify-content:center}.fixed-game .person-copy small{font-size:7px;color:#66716d}.fixed-game .person-copy strong{font-size:13px;letter-spacing:-.2px;border-bottom:2px solid #c8d0cd;padding-bottom:2px}.fixed-game .person-copy em{font-size:6.5px;color:#7b8582}
.fixed-game .person-clues{padding:6px;background:#f0f1f5;border-top:2px solid #9da7a4;gap:4px;min-height:42px;align-content:center}
.fixed-game .dossier-clue{grid-template-columns:14px 1fr;gap:4px;font:9px/1.22 Arial,sans-serif;color:#202525}.fixed-game .dossier-clue input{width:13px;height:13px;margin:0;accent-color:#55a99a}
.fixed-game .suspect-dossier.active{border-color:#e36f52;box-shadow:0 0 0 3px #ffd67c,2px 2px 0 #c5cdc9}.fixed-game .suspect-dossier.active .dossier-person{background:#fff8d6}
.object{filter:drop-shadow(0 0 2px #fff) drop-shadow(2px 3px 1px #55483b99)}
.cell.excluded::after,.cell.manual-cross::after{color:#111717;text-shadow:0 0 3px #fff,2px 2px 0 #fff;font-weight:1000;-webkit-text-stroke:1px #fff}
.cell.auto-cross::after{color:#4e5b5899;text-shadow:0 0 2px #fff;-webkit-text-stroke:0}
.cell .suspect-piece.letter-marker{box-shadow:0 0 0 3px #fff,0 3px 0 #252b2a;border-color:#fff;color:#fff}
.possibility.letter-marker{outline:2px solid #fff;border-color:#26302e}
@media(max-height:760px) and (min-width:901px){.fixed-game .suspect.dossier-person{grid-template-columns:46px minmax(0,1fr);min-height:52px}.fixed-game .suspect.dossier-person .avatar{width:46px;height:46px}.fixed-game .person-clues{padding:3px;min-height:34px}.fixed-game .dossier-clue{font-size:7.5px}}
@media(max-width:900px){.fixed-game{grid-template-columns:minmax(0,1fr) 112px}.fixed-game .suspect.dossier-person{grid-template-columns:38px minmax(0,1fr);min-height:44px}.fixed-game .suspect.dossier-person .avatar{width:38px;height:38px}.fixed-game .person-clues{padding:3px;min-height:0}.fixed-game .dossier-clue{font-size:6.5px}}

/* V16: groot, helder en direct bedienbaar spelscherm. */
.game-shell,.game-shell button,.game-shell input,.game-shell textarea,.game-shell select{font-family:Arial,Helvetica,sans-serif}
.game-header{height:62px;padding:7px 14px;background:#fff;border-bottom:2px solid #d3d5dc;box-shadow:none}
.game-header .brand-mark{width:46px;height:46px;font-size:20px;box-shadow:none}
.game-header .brand-copy strong{font-size:15px;letter-spacing:2px}.game-header .brand-copy span{font:18px/1 Georgia,serif}
.game-header .case-title small{font:700 12px/1.15 Arial,sans-serif;letter-spacing:1.5px}.game-header .case-title strong{font:800 19px/1.15 Arial,sans-serif}
.game-header .btn{min-height:42px;padding:8px 14px;font-size:12px}
.fixed-game{height:calc(100dvh - 62px);padding:8px;grid-template-columns:clamp(390px,29vw,560px) minmax(0,1fr) 178px;grid-template-rows:minmax(0,1fr);gap:8px;background:#f1f1f6}
.fixed-game .game-top{display:none}
.fixed-game .side-panel{grid-column:1;grid-row:1;border:1px solid #d4d5dc;border-radius:4px;box-shadow:none;background:#fbfbfd}
.fixed-game .game-board-wrap{grid-column:2;grid-row:1;padding:4px;border:0;border-radius:0;box-shadow:none;background:#e7e6ee;overflow:visible}
.fixed-game .map-caption{display:none}
.fixed-game .grid{padding:0;border:6px solid #17181b;box-shadow:0 0 0 1px #fff;background:#fff}
.fixed-game .side-tabs{min-height:44px;padding:3px;background:#f0f0f5;border-bottom:1px solid #d5d5dc}
.fixed-game .side-tabs button{min-height:38px;font-size:12px;font-weight:800;letter-spacing:.2px}
.fixed-game .panel-content{padding:9px;overflow:auto;background:#fbfbfd}
.fixed-game .dossier-heading{margin:0 0 9px;text-align:center}
.fixed-game .dossier-heading h2{font:800 clamp(17px,1.15vw,22px)/1.1 Arial,sans-serif;color:#26272c}
.fixed-game .dossier-heading p{margin-top:5px;font:13px/1.25 Arial,sans-serif;color:#686a72}
.fixed-game .victim-dossier{min-height:54px;margin:12px 0 9px;padding:6px 9px;border:2px solid #75454f;border-radius:6px;box-shadow:none}
.fixed-game .victim-seal{width:39px;height:39px;font-size:22px}.fixed-game .victim-dossier small{font-size:9px}.fixed-game .victim-dossier strong{font-size:16px}.fixed-game .victim-dossier em{font-size:10px}
.fixed-game .dossier-list{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px}
.fixed-game .suspect-dossier{border:3px solid #34363b;border-radius:8px;box-shadow:3px 3px 0 #c3c4ca;background:#f4f4f8}
.fixed-game .suspect.dossier-person{display:flex;flex-direction:column;align-items:center;min-height:0;padding:7px 5px 6px;gap:4px;background:#fff}
.fixed-game .suspect.dossier-person .avatar{flex:none;width:clamp(70px,6vw,108px);height:clamp(70px,6vw,108px);border:3px solid #292b30;border-radius:5px}
.fixed-game .person-copy{display:flex;align-items:center;width:100%;gap:1px;text-align:center}
.fixed-game .person-copy small{font-size:9px;line-height:1.1;text-transform:uppercase;letter-spacing:1px}
.fixed-game .person-copy strong{width:100%;padding:2px 2px 3px;border-bottom:2px solid #d7d8dd;font-size:clamp(15px,1vw,19px);line-height:1.05}
.fixed-game .person-copy em{font-size:9px;line-height:1.1}
.fixed-game .person-clues{min-height:62px;padding:7px 6px;gap:6px;border-top:2px solid #a5a6ac;background:#f2f2f6;align-content:start}
.fixed-game .dossier-clue{grid-template-columns:17px 1fr;gap:5px;font:clamp(9.5px,.65vw,13px)/1.22 Arial,sans-serif;color:#232429}
.fixed-game .dossier-clue input{width:16px;height:16px}
.tool-panel{grid-column:3;grid-row:1;padding:10px;gap:9px;border:1px solid #d1d2d8;border-radius:4px;box-shadow:none;background:#f7f7fa}
.tool-panel h3{font-size:14px;margin:0 0 1px}.tool-modes{gap:9px}
.tool-button{min-height:70px;grid-template-columns:44px 1fr;padding:7px 8px}.tool-button span{font-size:34px}.tool-button small{font-size:13px}.tool-button em{font-size:8px}
.tool-wide{min-height:52px;padding:8px}.tool-wide.help{min-height:44px}
.cell .coord{font:700 calc(var(--cell)*.105)/1 Arial,sans-serif;color:#4b4d4c}.area-label{font:900 calc(var(--cell)*.14)/1 Arial,sans-serif;letter-spacing:-.3px}
@media(max-height:780px) and (min-width:901px){.fixed-game .dossier-heading{margin-bottom:5px}.fixed-game .dossier-heading p{font-size:11px}.fixed-game .victim-dossier{display:none}.fixed-game .dossier-list{gap:6px}.fixed-game .suspect-dossier{border-width:2px}.fixed-game .suspect.dossier-person{padding:4px 3px 3px;gap:2px}.fixed-game .suspect.dossier-person .avatar{width:clamp(60px,5.2vw,82px);height:clamp(60px,5.2vw,82px)}.fixed-game .person-copy small{font-size:7px}.fixed-game .person-copy strong{font-size:14px}.fixed-game .person-copy em{font-size:7px}.fixed-game .person-clues{min-height:48px;padding:4px;gap:3px}.fixed-game .dossier-clue{font-size:9px;grid-template-columns:14px 1fr}.fixed-game .dossier-clue input{width:13px;height:13px}.tool-panel{gap:6px;padding:7px}.tool-modes{gap:6px}.tool-button{min-height:56px}.tool-wide{min-height:43px}}
@media(max-width:900px){.game-header{height:52px;padding:5px 8px}.game-header .brand-mark{width:38px;height:38px}.game-header .brand-copy{display:none}.game-header .case-title small{font-size:8px}.game-header .case-title strong{font-size:13px}.game-header .btn{min-height:36px;padding:5px 8px;font-size:8px}.fixed-game{height:calc(100dvh - 52px);padding:4px;grid-template-columns:minmax(0,1fr) 116px;grid-template-rows:minmax(0,3fr) minmax(0,2fr);gap:4px}.fixed-game .game-board-wrap{grid-column:1;grid-row:1;padding:2px}.tool-panel{grid-column:2;grid-row:1;padding:4px;gap:4px}.fixed-game .side-panel{grid-column:1/-1;grid-row:2}.fixed-game .panel-content{padding:4px}.fixed-game .dossier-heading,.fixed-game .victim-dossier{display:none}.fixed-game .dossier-list{gap:4px}.fixed-game .suspect.dossier-person{display:grid;grid-template-columns:40px minmax(0,1fr);padding:2px}.fixed-game .suspect.dossier-person .avatar{width:40px;height:40px}.fixed-game .person-copy strong{font-size:11px}.fixed-game .person-copy small,.fixed-game .person-copy em{font-size:6px}.fixed-game .person-clues{min-height:0;padding:3px;gap:2px}.fixed-game .dossier-clue{font-size:7px;grid-template-columns:10px 1fr}.fixed-game .dossier-clue input{width:9px;height:9px}.tool-button{min-height:40px;grid-template-columns:28px 1fr;padding:3px}.tool-button span{font-size:21px}.tool-button small{font-size:8px}.tool-button em{font-size:5px}.tool-wide{min-height:32px;padding:4px}.tool-wide.help{min-height:29px}}
@media(max-height:780px) and (min-width:901px){.fixed-game .victim-dossier:not(.victim-compact){display:flex}}
@media(max-width:900px){.fixed-game{--cell:var(--mobile-cell)!important}}
@media(max-width:900px){.fixed-game .suspect.dossier-person{grid-template-columns:48px minmax(0,1fr);min-height:52px}.fixed-game .suspect.dossier-person .avatar{width:48px;height:48px}.fixed-game .person-copy strong{font-size:12px}.fixed-game .person-copy small,.fixed-game .person-copy em{font-size:7px}.fixed-game .person-clues{padding:4px}.fixed-game .dossier-clue{grid-template-columns:12px 1fr;font-size:8.5px}.fixed-game .dossier-clue input{width:11px;height:11px}}
@media(max-width:480px){.fixed-game .suspect.dossier-person{grid-template-columns:36px minmax(0,1fr);min-height:40px}.fixed-game .suspect.dossier-person .avatar{width:36px;height:36px}.fixed-game .person-copy strong{font-size:10px}.fixed-game .person-copy small,.fixed-game .person-copy em{font-size:5.5px}.fixed-game .person-clues{padding:2px}.fixed-game .dossier-clue{grid-template-columns:9px 1fr;font-size:6.5px}.fixed-game .dossier-clue input{width:8px;height:8px}}

/* Objectsporen: alle bijpassende elementen lichten op zodra een aanwijzing wordt bekeken. */
.hint-reference[data-highlight-object-id],.hint-reference[data-highlight-object-types]{border-radius:4px;transition:background .15s,box-shadow .15s;cursor:help}
.hint-reference[data-highlight-object-id]:hover,.hint-reference[data-highlight-object-types]:hover,.hint-reference[data-highlight-object-id]:focus-within,.hint-reference[data-highlight-object-types]:focus-within{background:#fff2aa;box-shadow:0 0 0 2px #e8b83f}
.cell.hint-highlight{z-index:12!important;filter:brightness(1.12);box-shadow:inset 0 0 0 4px #fff,0 0 0 5px #f2a900,0 0 20px #ffd84f!important}
.object.hint-highlight{transform:scale(1.28);background:#fff8b8;border-color:#8d5a00;box-shadow:0 0 0 4px #ffc928,0 0 18px #ffcf33;animation:hint-object-pulse .8s ease-in-out infinite alternate}
@keyframes hint-object-pulse{to{transform:scale(1.42)}}
.object-marktkraam{border-radius:6px;background:linear-gradient(135deg,#fff 0 25%,#ff8b72 25% 50%,#fff 50% 75%,#ff8b72 75%);font-size:21px}
.object-raam,.object-kleed{background:#fff7c9}
.cell[data-terrain="market_stone"]{background-color:#eadfc9;background-image:linear-gradient(30deg,#b7a98e44 12%,transparent 12.5%,transparent 87%,#b7a98e44 87.5%),linear-gradient(150deg,#b7a98e44 12%,transparent 12.5%,transparent 87%,#b7a98e44 87.5%);background-size:24px 16px}
@media(max-width:900px){.dossier-list.count-7 .suspect.dossier-person,.dossier-list.count-8 .suspect.dossier-person,.dossier-list.count-9 .suspect.dossier-person{grid-template-columns:42px minmax(0,1fr);min-height:46px}.dossier-list.count-7 .suspect.dossier-person .avatar,.dossier-list.count-8 .suspect.dossier-person .avatar,.dossier-list.count-9 .suspect.dossier-person .avatar{width:42px;height:42px}.dossier-list.count-7 .person-copy strong,.dossier-list.count-8 .person-copy strong,.dossier-list.count-9 .person-copy strong{font-size:11px}.dossier-list.count-7 .person-clues,.dossier-list.count-8 .person-clues,.dossier-list.count-9 .person-clues{padding:3px;gap:2px}.dossier-list.count-7 .dossier-clue,.dossier-list.count-8 .dossier-clue,.dossier-list.count-9 .dossier-clue{font-size:7.5px}}

/* V22: plaatsbaar slachtoffer, object-footprints en duidelijke blokkades. */
.blocked-cell{cursor:not-allowed}.blocked-cell::before{content:"";position:absolute;inset:3px;border:2px dashed #3d454966;border-radius:4px;z-index:2;pointer-events:none}.blocked-cell:hover{filter:brightness(.97)}
.object-kast,.object-bank,.object-rots,.object-vijver,.object-prullenbak{background-image:none!important;display:grid;place-items:center;font-size:calc(var(--cell)*.62)!important;line-height:1;color:initial!important;text-shadow:none;filter:drop-shadow(1px 2px 1px #20302b55)}
.object-multi{inset:3%;width:94%;height:94%;font-size:calc(var(--cell)*.7)!important}.victim-piece{--marker:#a85b67!important}
.fixed-game .person-initial{display:grid!important;place-items:center;background:var(--person-color,#5b8f8a)!important;color:#fff!important;font:900 clamp(28px,2.5vw,42px)/1 Arial,sans-serif!important;text-shadow:0 2px 0 #263c3a66;box-shadow:inset 0 0 0 3px #ffffff55}
.fixed-game .person-emoji{display:grid!important;place-items:center;background:color-mix(in srgb,var(--person-color,#5b8f8a) 24%,#fff)!important;background-image:none!important;color:initial!important;font:normal clamp(31px,3vw,48px)/1 "Apple Color Emoji","Segoe UI Emoji",sans-serif!important;text-shadow:none;box-shadow:inset 0 0 0 3px #ffffff99}
.fixed-game .victim-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:25px}
.fixed-game .object{display:grid!important;place-items:center!important;background-image:none!important;background-color:transparent!important;color:initial!important;font:normal calc(var(--cell)*.6)/1 "Apple Color Emoji","Segoe UI Emoji",sans-serif!important;text-shadow:none!important;mix-blend-mode:normal!important;filter:drop-shadow(0 1px 1px #fff) drop-shadow(2px 3px 1px #55483b66)!important}
.selectable-victim{display:block;height:auto!important;padding:0!important;overflow:hidden}.selectable-victim>button{display:flex;width:100%;align-items:center;gap:8px;padding:6px 9px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.selectable-victim>button>span:last-child{display:flex;flex-direction:column}.selectable-victim.active{outline:4px solid #ffd36a;border-color:#d6634d}.selectable-victim .person-clues{border-top:1px solid #b97783;background:#fff7f7}
.culprit-evidence{margin:0 0 9px;padding:7px 9px;border:2px solid #8a6840;border-radius:6px;background:#fff7d6;color:#3e3428}.culprit-evidence strong{display:block;font-size:12px;margin-bottom:3px}.culprit-evidence p{margin:2px 0;font:10px/1.25 Arial,sans-serif}
/* V108: Vernieuwde, compacte en gecategoriseerde speluitleg met zoekfunctie en knoppengids */
.help-guide{max-width:980px;margin:0 auto 40px;padding:16px 20px}
.help-hero{margin-bottom:16px}
.help-hero h1{margin:4px 0 8px;font-family:Georgia,serif;font-size:clamp(22px,3.5vw,30px);color:var(--ink,#1e2923)}
.help-hero p{font-size:14.5px;line-height:1.5;color:var(--muted,#495f55);margin:0}
.help-sticky-toolbar{position:sticky;top:0;z-index:30;background:var(--paper,#fff);border-bottom:2px solid var(--line,#ccd8d3);padding:10px 0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px}
.help-search-wrap{display:flex;align-items:center;gap:8px;background:#f2f7f4;border:2px solid #b7cec3;border-radius:8px;padding:6px 12px;position:relative;transition:border-color .15s,box-shadow .15s}
.help-search-wrap:focus-within{border-color:#2e8b57;box-shadow:0 0 0 2px #a8dbc2;background:#fff}
.help-search-icon{font-size:15px;opacity:.7;line-height:1;user-select:none}
.help-search-input{flex:1;border:0;background:transparent;font-size:14px;font-family:inherit;color:inherit;outline:none;padding:2px 0}
.help-search-clear{border:0;background:#dbe7e0;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;color:#335245;line-height:1;padding:0}
.help-search-clear:hover{background:#cadbd1}
.help-search-count{font-size:11px;font-weight:700;color:#2b6647;white-space:nowrap;padding:2px 6px;background:#def0e4;border-radius:10px}
.help-nav{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.help-nav::-webkit-scrollbar{display:none}
.help-nav-btn{border:1.5px solid #c9d8d1;background:#fff;border-radius:6px;padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;color:var(--ink,#22362e);transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.help-nav-btn:hover,.help-nav-btn.active{background:#e5f4ec;border-color:#4fa377;color:#185034}
.help-section{margin-bottom:28px;scroll-margin-top:125px}
.help-section.hidden{display:none!important}
.help-section-title{display:flex;align-items:center;gap:8px;font-family:Georgia,serif;font-size:19px;color:var(--ink,#1e2923);margin:0 0 10px;padding-bottom:6px;border-bottom:1.5px solid #e1ece6}
.help-section-lead{font-size:13.5px;line-height:1.5;color:#455d52;margin:0 0 12px}
.help-rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-bottom:12px}
.help-rule-card{background:#fafdF9;border:1.5px solid #d4e2db;border-radius:8px;padding:10px 12px}
.help-rule-card h4{margin:0 0 4px;font-size:13.5px;color:#1d3a2c;display:flex;align-items:center;gap:6px}
.help-rule-card p{margin:0;font-size:12.5px;line-height:1.45;color:#41574d}
.help-buttons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:9px}
.help-button-card{display:flex;flex-direction:column;background:#fff;border:1.5px solid #d4e2db;border-radius:8px;padding:9px 12px;box-shadow:0 1px 2px rgba(0,0,0,0.03);transition:border-color .15s}
.help-button-card.hidden{display:none!important}
.help-button-card:hover{border-color:#74ae91}
.help-button-header{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:5px}
.help-button-title-wrap{display:flex;align-items:center;gap:7px}
.help-button-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:2px 7px;border-radius:5px;font-size:11.5px;font-weight:800;border:1.5px solid #ccd8d3;background:#f4f8f5;color:#1e2923;white-space:nowrap}
.help-button-badge.char-badge{background:#5b8f8a;color:#fff;border-color:#436e6a}
.help-button-badge.victim-badge{background:#a85b67;color:#fff;border-color:#8c414d}
.help-button-badge.red-badge{background:#c63d2f;color:#fff;border-color:#a82e22}
.help-button-badge.green-badge{background:#2e8b57;color:#fff;border-color:#246d44}
.help-button-badge.yellow-badge{background:#ffd36a;color:#4a3808;border-color:#d6a836}
.help-button-action{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;padding:2px 6px;border-radius:4px;background:#edf4f0;color:#3f584e}
.help-button-card h4{margin:0;font-size:13px;color:#1b2e26}
.help-button-card p{margin:0;font-size:12px;line-height:1.4;color:#465d53}
.help-elements-toolbar{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.help-filter-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.help-filter-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#5a766a;margin-right:2px}
.help-pill{border:1.5px solid #c8d8d0;background:#fff;border-radius:14px;padding:3px 9px;font-size:11.5px;font-weight:600;cursor:pointer;color:#284036;transition:all .15s}
.help-pill:hover{border-color:#5ba37e;background:#f3faf6}
.help-pill.active{background:#24643a;border-color:#24643a;color:#fff}
.help-pill.placeable-only.active{background:#1e6b3c;border-color:#1e6b3c;color:#fff}
.help-pill.blocking-only.active{background:#9e342d;border-color:#9e342d;color:#fff}
.element-guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.element-card.compact{display:grid;grid-template-columns:40px 1fr;gap:9px;align-items:start;padding:7px 9px;border:1.5px solid #d4e2db;border-radius:8px;background:#fff;transition:border-color .15s}
.element-card.compact.hidden{display:none!important}
.element-card.compact:hover{border-color:#6fa58a}
.element-card.compact .element-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:6px;background:#f1f7f2;position:relative;font-size:24px;border:1px solid #d4e2da;box-sizing:border-box}
.element-card.compact .element-icon i{position:absolute;right:-4px;bottom:-4px;width:15px;height:15px;font-size:9.5px;font-style:normal;border-radius:50%;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,0.15)}
.element-card.placeable-element .element-icon i{background:#24643a;color:#fff}
.element-card.blocking-element .element-icon i{background:#ab362e;color:#fff}
.element-card.compact h4{margin:0 0 2px;font-size:13px;text-transform:capitalize;color:#1e2923;display:flex;align-items:center;justify-content:space-between}
.element-card.compact p{margin:0 0 4px!important;font-size:11.5px!important;line-height:1.35!important;color:#465d53}
.element-card.compact small{display:inline-block;padding:2px 5px;border-radius:3px;font-size:9.5px;font-weight:800;letter-spacing:0.3px}
.element-card.compact small.placeable{background:#e4f5e7;color:#1e6336}
.element-card.compact small.blocking{background:#fee7e3;color:#962f28}
.help-empty-results{display:none;text-align:center;padding:24px 16px;background:#f8fbf9;border:2px dashed #b9d1c5;border-radius:10px;margin:16px 0}
.help-empty-results.visible{display:block}
.help-empty-results h3{margin:0 0 6px;font-family:Georgia,serif;color:#1e2923}
.help-empty-results p{margin:0 0 12px;font-size:13px;color:#526b60}
@media(max-width:700px){.help-guide{padding:12px 14px}.help-buttons-grid,.element-guide-grid{grid-template-columns:1fr}.help-rules-grid{grid-template-columns:1fr}}
@media(max-height:780px) and (min-width:901px){.selectable-victim{display:block!important}.selectable-victim .person-clues{display:none}.culprit-evidence{padding:4px 6px;margin-bottom:5px}.culprit-evidence p{font-size:8px;display:inline;margin-right:8px}}
@media(max-width:900px){.selectable-victim{display:flex!important}.selectable-victim .person-clues{display:none}.selectable-victim>button{padding:3px}.selectable-victim .victim-seal{width:32px;height:32px}.culprit-evidence{padding:3px 5px;margin:0 0 4px}.culprit-evidence strong{font-size:8px}.culprit-evidence p{display:inline;font-size:7px;margin-right:6px}}
@media(max-width:700px){.element-guide-grid{grid-template-columns:1fr}.element-card{grid-template-columns:48px 1fr}.element-icon{width:44px;height:44px;font-size:29px}}
.element-card small.blocking{background:#fee6e2;color:#9b302a}
@media(max-height:780px) and (min-width:901px){.fixed-game .suspect.dossier-person{min-height:58px;padding:3px}.fixed-game .suspect.dossier-person .avatar{width:54px;height:54px}.fixed-game .person-copy strong{font-size:13px}.fixed-game .person-clues{min-height:0;padding:3px;gap:2px}.fixed-game .dossier-clue{grid-template-columns:12px 1fr;font-size:7.5px}.fixed-game .dossier-clue input{width:11px;height:11px}}
@media(max-height:780px) and (min-width:901px){.fixed-game .dossier-list.count-7 .suspect.dossier-person,.fixed-game .dossier-list.count-8 .suspect.dossier-person{display:grid;grid-template-columns:38px minmax(0,1fr);min-height:42px;align-items:center}.fixed-game .dossier-list.count-7 .suspect.dossier-person .avatar,.fixed-game .dossier-list.count-8 .suspect.dossier-person .avatar{width:38px;height:38px;font-size:23px!important}.fixed-game .dossier-list.count-7 .person-copy strong,.fixed-game .dossier-list.count-8 .person-copy strong{font-size:11px}.fixed-game .dossier-list.count-7 .person-clues,.fixed-game .dossier-list.count-8 .person-clues{padding:2px;gap:1px}.fixed-game .dossier-list.count-7 .dossier-clue,.fixed-game .dossier-list.count-8 .dossier-clue{font-size:6.8px;line-height:1.08;grid-template-columns:10px 1fr}.fixed-game .dossier-list.count-7 .dossier-clue input,.fixed-game .dossier-list.count-8 .dossier-clue input{width:9px;height:9px}}

/* Long-press SVG Ring, Connection Banner, Accessibility & Tutorial Overlay */
.hold-ring{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;transform:rotate(-90deg)}
.hold-ring circle.ring-bg{fill:none;stroke:rgba(255,255,255,0.4);stroke-width:4}
.hold-ring circle.ring-fill{fill:none;stroke:#ea805e;stroke-width:4;stroke-dasharray:94.2;stroke-dashoffset:94.2;animation:ring-progress 520ms linear forwards}
@keyframes ring-progress{to{stroke-dashoffset:0}}

.conn-status{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:bold;padding:2px 7px;border-radius:12px;text-transform:uppercase}
.conn-status.online{background:#dcfce7;color:#166534;border:1px solid #86efac}
.conn-status.herverbinden{background:#fef3c7;color:#92400e;border:1px solid #fcd34d;animation:pulse 1s infinite}
.conn-status.offline{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
@keyframes pulse{50%{opacity:.6}}

.cell:focus-visible,.btn:focus-visible,.tool-button:focus-visible,.tool-wide:focus-visible,.tab:focus-visible,.suspect-dossier:focus-within{outline:3px solid #2563eb!important;outline-offset:2px!important;z-index:25!important}
.skip-link{position:absolute;top:-100px;left:10px;background:#102f3a;color:#fff;padding:8px 12px;z-index:1000;border-radius:4px;border:2px solid #ea805e;text-decoration:none;font-weight:bold}
.skip-link:focus{top:10px}

.tutorial-backdrop{position:fixed;inset:0;background:rgba(7,23,29,0.85);z-index:150;display:grid;place-items:center;padding:16px}
.tutorial-card{background:#fff;border:3px solid #34363b;border-radius:12px;width:min(480px,95vw);padding:24px;box-shadow:0 12px 32px rgba(0,0,0,0.3)}
.tutorial-card h2{margin-top:0;font-family:Georgia,serif;color:#1e2923;font-size:22px}
.tutorial-card p{font-size:14px;line-height:1.5;color:#4b5563;margin:12px 0 20px}
.tutorial-step-indicator{display:flex;gap:6px;margin-bottom:16px}
.tutorial-dot{width:10px;height:10px;border-radius:50%;background:#e5e7eb}
.tutorial-dot.active{background:#ea805e}

/* V29: eigen bovenaanzicht-objecten, grensramen en directe bewoonbaarheidslezing. */
.fixed-game .object,.element-icon .object{
  display:block!important;position:absolute;color:transparent!important;font-size:0!important;
  background-color:transparent!important;background-image:var(--object-image)!important;
  background-size:var(--object-bg-size)!important;background-position:var(--object-bg-x) var(--object-bg-y)!important;
  background-repeat:no-repeat!important;mix-blend-mode:normal!important;pointer-events:none;
  filter:drop-shadow(0 1px 0 #fff8) drop-shadow(1px 2px 1px #233c4166)!important;
}
.fixed-game .object{inset:5%;width:90%;height:90%;z-index:4}
.fixed-game .object-multi{inset:1%;width:98%;height:98%}
.object-occupancy{position:absolute;right:2px;bottom:2px;z-index:7;display:grid;place-items:center;width:clamp(10px,calc(var(--cell)*.22),18px);height:clamp(10px,calc(var(--cell)*.22),18px);border:1px solid #fff;border-radius:50%;color:#fff;font:900 clamp(7px,calc(var(--cell)*.13),11px)/1 Arial,sans-serif;box-shadow:0 1px 2px #24343b88;pointer-events:none}
.object-occupancy.placeable{background:#248d68}.object-occupancy.blocking{background:#bd5348}
.blocked-cell::before{inset:4px;border:2px solid #a94e4666;border-radius:6px;background:linear-gradient(135deg,transparent 47%,#b3524a28 48% 52%,transparent 53%);z-index:2}
.window-cell::after{content:"";position:absolute;inset:12%;z-index:1;border:2px dashed #2b967188;border-radius:7px;background:#bff0db24;pointer-events:none}
.fixed-game .object-raam,.element-icon .object-raam{inset:auto;width:92%;height:92%;left:4%;top:-46%;z-index:8;transform:rotate(0deg);transform-origin:center}
.fixed-game .object-raam.window-side-e{left:auto;right:-46%;top:4%;transform:rotate(90deg)}
.fixed-game .object-raam.window-side-s{left:4%;top:auto;bottom:-46%;transform:rotate(180deg)}
.fixed-game .object-raam.window-side-w{left:-46%;top:4%;transform:rotate(-90deg)}
.fixed-game .object.hint-highlight{background-color:#fff8b8!important;box-shadow:0 0 0 4px #ffc928,0 0 18px #ffcf33;animation:hint-object-pulse-v29 .8s ease-in-out infinite alternate}
.fixed-game .object-raam.hint-highlight{animation:hint-window-pulse-v29 .8s ease-in-out infinite alternate}
@keyframes hint-object-pulse-v29{to{transform:scale(1.24)}}
@keyframes hint-window-pulse-v29{to{filter:drop-shadow(0 0 7px #ffd33d) drop-shadow(0 0 3px #fff)!important}}
.element-card{border-left-width:7px}.element-card.placeable-element{border-left-color:#50ae82}.element-card.blocking-element{border-left-color:#d56d62}
.element-icon{position:relative;overflow:hidden;border:2px solid #d3ded9;background:#f5fbf7}
.element-icon .object{inset:5%;width:90%;height:90%;z-index:1}
.element-icon .object-raam{inset:auto;width:90%;height:90%;left:5%;top:-35%}
.element-icon>i{position:absolute;right:2px;bottom:2px;z-index:3;display:grid;place-items:center;width:17px;height:17px;border:2px solid #fff;border-radius:50%;background:#bd5348;color:#fff;font:900 10px/1 Arial,sans-serif;box-shadow:0 1px 2px #24343b55}
.placeable-element .element-icon>i{background:#248d68}
.element-icon.window-preview{overflow:visible;background:linear-gradient(#dff4e9 0 50%,#f5fbf7 50%)}
@media(max-width:900px){.object-occupancy{right:1px;bottom:1px}.fixed-game .object{inset:4%;width:92%;height:92%}.fixed-game .object-raam{left:4%;top:-46%}}

/* V30: Over-venster en lokale geluidsvoorkeur. */
.about-backdrop{background:#10272dcc;backdrop-filter:blur(3px)}
.about-modal{position:relative;width:min(680px,100%);padding:30px;border-radius:12px;border:3px solid #315259;box-shadow:10px 12px 0 #071b22;overflow:hidden}
.about-close{position:absolute;right:14px;top:12px;width:40px;height:40px;border:2px solid #315259;border-radius:50%;background:#fff9e8;color:#263f43;font:900 25px/1 Arial,sans-serif;box-shadow:2px 2px 0 #b9a97f}
.about-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#ffe08a;color:#603d2d;font-size:10px;font-weight:1000;letter-spacing:1.5px}
.about-modal h1{margin:14px 48px 4px 0;font-size:38px}.about-modal h2{margin:22px 0 10px;font-size:20px}.about-modal>p{font:16px/1.5 Arial,sans-serif}.about-maker{margin:0;color:#a54d3f}.about-maker strong{color:#63382f}
.changelog-list{display:grid;gap:9px;max-height:min(42vh,390px);margin-bottom:18px;overflow:auto;padding-right:5px}
.changelog-entry{border:2px solid #c7d5d1;border-left:7px solid #55a582;border-radius:8px;background:#f7fbf8;padding:10px 12px}.changelog-entry header{display:flex;align-items:baseline;gap:10px}.changelog-entry header strong{color:#9f493b;font-size:12px;text-transform:uppercase;letter-spacing:1px}.changelog-entry header span{font:700 17px Georgia,serif}.changelog-entry ul{margin:7px 0 0;padding-left:20px;font:13px/1.45 Arial,sans-serif;color:#45585a}
.setting-option{display:flex;align-items:center;gap:14px;padding:14px;border:3px solid #b9cbc5;border-radius:10px;background:#f5faf6;cursor:pointer}.setting-option input{width:24px;height:24px;accent-color:#248d68;flex:none}.setting-option span{display:flex;flex-direction:column;gap:3px}.setting-option strong{font:700 17px Georgia,serif}.setting-option small{color:#627473;line-height:1.35}
@media(max-width:600px){.about-backdrop{padding:10px}.about-modal{padding:22px 18px;max-height:94dvh}.about-modal h1{font-size:30px}.about-modal>p{font-size:14px}.changelog-list{max-height:46vh}.changelog-entry header{display:grid;gap:2px}.changelog-entry ul{font-size:12px}}

/* Buy Me a Coffee modal en About-koppeling */
.coffee-backdrop{background:#10272dcc;backdrop-filter:blur(3px)}
.coffee-modal{position:relative;width:min(500px,100%);padding:28px 24px;border-radius:14px;border:3px solid #315259;box-shadow:10px 12px 0 #071b22;text-align:center;overflow:hidden;background:#fffefa}
.coffee-badge{display:inline-block;padding:6px 12px;border-radius:999px;background:#ffd86f;color:#603d2d;font-size:10px;font-weight:900;letter-spacing:1.5px;margin-bottom:8px}
.coffee-header-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#ffecc2;border:3px solid #db994b;margin:0 auto 12px;color:#854418;box-shadow:3px 3px 0 #85441840}
.coffee-header-icon svg{width:34px;height:34px}
.coffee-modal h1{margin:0 0 10px;font-size:26px;color:#20372d}
.coffee-modal p{font:15px/1.5 Arial,sans-serif;color:#354e42;margin:0 0 16px}
.coffee-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:10px;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;background:#ffd86f;color:#452814;border:2px solid #a3651d;box-shadow:3px 3px 0 #6e410f;transition:transform .1s,box-shadow .1s}
.coffee-btn:hover{background:#ffe38d;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #6e410f}
.coffee-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #6e410f}
.coffee-thank-you{display:none;margin-top:16px;padding:14px;border-radius:10px;background:#f0faf3;border:2px solid #63b38c;color:#185736;font-size:14px;font-weight:600}
.coffee-thank-you.is-visible{display:block;animation:modalSlide .25s ease}
.about-coffee-box{margin:14px 0 18px;padding:12px;border-radius:10px;background:#fef9ee;border:2px dashed #dbb270;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.about-coffee-box p{margin:0;font-size:13px;color:#5a3f24;flex:1;min-width:180px;text-align:left}
@media(max-width:600px){
  .coffee-modal{padding:20px 16px}
  .coffee-modal h1{font-size:22px}
  .about-coffee-box{flex-direction:column;align-items:stretch;text-align:center}
  .about-coffee-box p{text-align:center}
}

/* V32: avatars, presence, gezamenlijke tijd, compact logboek en beheereditor. */
.profile-avatar{display:inline-grid;place-items:center;width:46px;height:46px;flex:none;border:3px solid color-mix(in srgb,var(--avatar-color) 70%,#263b42);border-radius:12px;background:color-mix(in srgb,var(--avatar-color) 25%,#fff);font:28px/1 "Apple Color Emoji","Segoe UI Emoji",sans-serif;box-shadow:2px 2px 0 #20343b33}.profile-avatar.small{width:25px;height:25px;border-width:2px;border-radius:7px;font-size:15px;box-shadow:none}.user-profile-button{display:flex;align-items:center;gap:7px;min-height:44px;border:0;background:transparent;color:inherit;font-weight:900}.online-summary,.conn-status{min-height:44px;border:1px solid #86efac;cursor:pointer}.online-summary{padding:8px 13px;border-radius:999px;background:#dcfce7;color:#166534;font-weight:900}.online-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.online-list li{display:flex;align-items:center;gap:12px;padding:10px;border:2px solid #c6d7d0;border-radius:9px;background:#f8fcf9}.online-list span{display:grid}.online-list small{color:#24805a}.lobby-player,.player-chip{display:inline-flex;align-items:center;gap:5px}.profile-page{max-width:980px}.profile-card{width:100%}.profile-heading{display:flex;align-items:center;gap:15px}.profile-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0}.avatar-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;border:0;padding:0;margin:24px 0}.avatar-picker legend{grid-column:1/-1;font:700 19px Georgia,serif;margin-bottom:8px}.avatar-choice{display:grid;place-items:center;gap:4px;min-height:92px;padding:8px;border:3px solid #c6d4cf;border-radius:10px;background:#f7faf8;cursor:pointer;text-align:center}.avatar-choice input{position:absolute;opacity:0}.avatar-choice span{display:grid;place-items:center;width:45px;height:45px;border-radius:10px;background:color-mix(in srgb,var(--avatar-color) 28%,#fff);font-size:28px}.avatar-choice.selected{border-color:#db795e;background:#fff2cf;box-shadow:inset 0 0 0 2px #f1bb54}.partner-list{display:grid;gap:7px}.partner-row{display:flex;align-items:center;gap:11px;padding:9px;border-bottom:1px solid #d6dfdc}.partner-row span:last-child{display:grid}.character-player{display:flex!important;align-items:center;gap:3px;max-width:100%;margin-top:2px;color:var(--player-color);font:800 8px/1 Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.victim-last{margin-top:7px}.side-tabs button{min-width:50%}.journal-filters{display:flex;gap:5px;margin-bottom:8px}.journal-filters .active,.preview-modes .active{background:#ffd86f}.journal-form{padding:8px;border:2px solid #c5d5ce;border-radius:8px;background:#f6faf7}.journal-form .field{margin:6px 0}.journal-form textarea{min-height:64px}.journal-list{display:grid;gap:7px;margin-top:8px}.activity-entry{display:flex;gap:7px;padding:8px;border-left:4px solid var(--teal);background:#f6faf8;font-size:11px}.confetti-layer{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}.confetti-layer i{position:absolute;left:var(--x);top:-20px;width:10px;height:18px;background:var(--color);animation:confetti-fall 2.2s cubic-bezier(.2,.7,.4,1) var(--delay) forwards}@keyframes confetti-fall{to{transform:translateY(110vh) rotate(var(--spin));opacity:.2}}@media(prefers-reduced-motion:reduce){.confetti-layer{display:none!important}}
.fixed-game .cell{border-color:#b9bbbf!important}.fixed-game .cell::before{border-color:#aeb1b555!important}.fixed-game .cell.wall-n{border-top-color:#73777d!important}.fixed-game .cell.wall-e{border-right-color:#73777d!important}.fixed-game .cell.wall-s{border-bottom-color:#73777d!important}.fixed-game .cell.wall-w{border-left-color:#73777d!important}
.hero-scene{display:grid;place-items:center;padding:20px;background:#dcefe8}.landing-board{width:min(100%,410px);padding:14px;border:5px solid #253d43;background:#f8f4df;box-shadow:9px 9px 0 #173138}.landing-board .grid{display:grid;width:100%;aspect-ratio:var(--preview-cols)/var(--preview-rows);padding:2px;border:3px solid #8a7562}.landing-board .cell{width:auto;height:auto;min-width:0;aspect-ratio:1}.landing-board .object{inset:5%;width:90%;height:90%;font-size:0;background-image:var(--object-image);background-size:var(--object-bg-size);background-position:var(--object-bg-x) var(--object-bg-y)}.landing-board .area-label{font-size:7px}.landing-board>small{display:block;margin-top:9px;text-align:center;color:#516768}
.admin-actions{margin:-10px 0 18px}.editor-page{height:calc(100dvh - 68px);padding:10px;overflow:hidden;background:#e7f2ed}.editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:2px solid #809b94;background:#fffefa}.editor-toolbar h1{margin:3px 0;font:700 20px Georgia,serif}.editor-workspace{height:calc(100% - 82px);display:grid;grid-template-columns:380px minmax(330px,1fr);grid-template-rows:1fr auto;gap:8px;margin-top:8px}.editor-inspector{grid-column:1;grid-row:1;min-height:0;overflow:auto;padding:10px;border:2px solid #9bb0aa;background:#fffefa}.editor-canvas{grid-column:2;grid-row:1;min-height:0;overflow:auto;padding:10px;border:2px solid #9bb0aa;background:#fffefa}.editor-json{grid-column:1 / -1;grid-row:2;min-height:0;padding:10px;border:2px solid #9bb0aa;background:#fffefa}.editor-inspector h2,.editor-json h2{margin-top:0}.editor-json{display:flex;flex-direction:column}.editor-json textarea{flex:1;min-height:300px;resize:none;padding:10px;border:2px solid #587069;background:#162b31;color:#e6f3ec;font:11px/1.45 ui-monospace,monospace}.preview-modes{display:flex;gap:5px;margin-bottom:8px}.editor-preview{margin:auto;padding:12px;border:8px solid #263d43;border-radius:8px;background:#e8efe9;transition:width .2s}.editor-preview.desktop{width:100%}.editor-preview.tablet{width:min(700px,86%)}.editor-preview.phone{width:min(360px,70%)}.editor-grid{display:grid;grid-template-columns:repeat(var(--editor-cols),1fr);aspect-ratio:var(--editor-cols)/var(--editor-rows);border:3px solid #7b817e}.editor-cell{position:relative;min-width:0;min-height:36px;border:1px solid #aeb1b5;background:color-mix(in hsl,hsl(var(--area-hue) 35% 80%) 50%,#ece5ca);cursor:crosshair}.editor-cell small{position:absolute;left:2px;top:1px;font-size:7px}.editor-cell span{font-size:20px}.editor-cell.void{background:#cbd2cf;opacity:.4}.validation-list{padding-left:18px;color:#9d3540;font-size:11px}.editor-list .level-card{min-height:170px}
@media(max-width:900px){.profile-stats{grid-template-columns:repeat(2,1fr)}.avatar-picker{grid-template-columns:repeat(2,1fr)}.editor-page{height:auto;min-height:calc(100dvh - 52px);overflow:auto}.editor-toolbar{align-items:flex-start;flex-direction:column}.editor-workspace{height:calc(100% - 82px);display:grid;grid-template-columns:380px minmax(330px,1fr);grid-template-rows:1fr auto;gap:8px;margin-top:8px}.editor-inspector{grid-column:1;grid-row:1;min-height:0;overflow:auto;padding:10px;border:2px solid #9bb0aa;background:#fffefa}.editor-canvas{grid-column:2;grid-row:1;min-height:0;overflow:auto;padding:10px;border:2px solid #9bb0aa;background:#fffefa}.editor-json{grid-column:1 / -1;grid-row:2;min-height:0;padding:10px;border:2px solid #9bb0aa;background:#fffefa}.editor-json textarea{min-height:55dvh}.game-header .user-profile-button span:last-child{display:none}}
@media(max-width:560px){.nav-actions{gap:3px}.user-profile-button span:last-child{display:none}.game-header [data-game-settings]{font-size:0;width:44px}.game-header [data-game-settings]::first-letter{font-size:18px}.profile-stats{grid-template-columns:1fr 1fr}.hero-scene{height:auto;min-height:330px;padding:10px}.online-modal{max-height:88dvh}.fixed-game{padding-bottom:env(safe-area-inset-bottom)}.modal-backdrop{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}}
@media(max-width:480px){.fixed-game{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,3fr) min-content minmax(0,2fr);--mobile-cell:min(calc((100vw - 40px)/var(--grid-cols)),calc((48dvh - 28px)/var(--grid-rows)),92px)!important}.fixed-game .game-board-wrap{grid-column:1;grid-row:1}.fixed-game .tool-panel{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:3px;padding:3px;overflow:visible}.fixed-game .tool-panel h3,.fixed-game .tool-spacer{display:none}.fixed-game .tool-modes{display:contents}.fixed-game .tool-button,.fixed-game .tool-wide{min-height:44px;height:44px;margin:0;padding:3px;display:flex;align-items:center;justify-content:center;gap:3px}.fixed-game .tool-button span{font-size:18px}.fixed-game .tool-button small,.fixed-game .tool-wide{font-size:7px}.fixed-game .tool-button em{display:none}.fixed-game .side-panel{grid-column:1;grid-row:3}.fixed-game .side-tabs button{min-height:44px}}

/* V36: server-authoritative tijd, toegankelijke thema's en veilige paneelvolgorde. */
html[data-theme="warm-goud"]{--ink:#3d3023;--paper:#fffaf0;--orange:#c86838;--teal:#7b9362;--line:#6f5a3e}html[data-theme="warm-goud"] body{background-color:#6b5537;background-image:linear-gradient(135deg,#f6e6bd,#dbc48f)}
html[data-theme="koel-mint"]{--ink:#173f42;--paper:#f7fffc;--orange:#3d8791;--teal:#248d78;--line:#315e61}html[data-theme="koel-mint"] body{background-color:#285f63;background-image:linear-gradient(135deg,#dff6ef,#b9e1dc)}
.settings-card{width:min(680px,100%);margin:0 auto}.settings-card h3{margin-top:26px}.settings-card .field small{display:block;margin-top:5px}
@media(min-width:901px){.fixed-game{grid-template-columns:var(--col-1) var(--col-2) var(--col-3)}.fixed-game .side-panel{grid-column:var(--dossiers-col)}.fixed-game .game-board-wrap{grid-column:var(--bord-col)}.fixed-game .tool-panel{grid-column:var(--gereedschap-col)}}
.fixed-game .cell[data-floor]{background-position:calc(var(--cell-col)*-17px) calc(var(--cell-row)*-13px)}
.fixed-game .cell[data-floor="stone_floor"],.fixed-game .cell[data-floor="dungeon_floor"]{background-color:#aaa99f;background-image:radial-gradient(circle at 30% 35%,#7f827d55 0 1px,transparent 2px),radial-gradient(circle at 75% 70%,#f1eee155 0 1px,transparent 2px);background-size:19px 17px,23px 21px}
.fixed-game .cell[data-floor="wood_floor"]{background-size:26px 100%,100% 100%}.fixed-game .cell[data-floor="carpet"]{background-size:22px 22px}.fixed-game .cell[data-floor="temple_floor"]{background-size:24px 24px}
.fixed-game .cell[data-floor="planken-licht"]{background-color:#d9bd88;background-image:repeating-linear-gradient(90deg,transparent 0 22px,#8b6d4555 23px 25px);background-size:25px 100%}
.fixed-game .cell[data-floor="terrazzo"]{background-color:#ddd7c6;background-image:radial-gradient(#7f928d66 1px,transparent 2px),radial-gradient(#c77b6655 1px,transparent 2px);background-size:17px 19px,23px 21px}
.fixed-game .cell[data-floor="tapijt-goud"]{background-color:#c8a85f;background-image:repeating-linear-gradient(45deg,#fff3bd2e 0 4px,transparent 4px 10px);background-size:22px 22px}
.fixed-game .cell[data-floor="mozaiek"]{background-color:#9fc8bd;background-image:radial-gradient(circle,#f4ebcf66 0 2px,transparent 3px);background-size:16px 16px}
.fixed-game .cell[data-floor="visgraat"]{background-color:#b8895f;background-image:linear-gradient(135deg,#6f4c3544 25%,transparent 25%),linear-gradient(45deg,#f1cf9f33 25%,transparent 25%);background-size:20px 20px}
.fixed-game .cell[data-floor="linnen"]{background-color:#d8c9b4;background-image:linear-gradient(90deg,#fff6e322 1px,transparent 1px),linear-gradient(#745f4a16 1px,transparent 1px);background-size:9px 9px}
.fixed-game .cell[data-floor="leisteen"]{background-color:#87918e;background-image:radial-gradient(ellipse at 35% 40%,#59625f55 0 2px,transparent 3px);background-size:21px 17px}
.fixed-game .cell[data-floor="kurk"]{background-color:#bd9a6d;background-image:radial-gradient(#6e523b55 1px,transparent 2px);background-size:13px 11px}
.fixed-game .cell[data-floor="gras-zacht"]{background-color:#8fba79;background-image:radial-gradient(#d8e8a055 1px,transparent 2px);background-size:14px 17px}
.fixed-game .cell[data-floor="zand-fijn"]{background-color:#dcc78e;background-image:radial-gradient(#92794d44 1px,transparent 2px);background-size:11px 13px}
.fixed-game .cell[data-floor="tuinsteen"]{background-color:#b7b9ad;background-image:radial-gradient(#747a7255 1px,transparent 2px);background-size:19px 15px}
.fixed-game .cell[data-floor="bloemenveld"]{background-color:#83ad70;background-image:radial-gradient(#f4d879aa 1px,transparent 2px),radial-gradient(#e9a8ba88 1px,transparent 2px);background-size:19px 21px,27px 25px}
.fixed-game .cell[data-floor="steigerhout"]{background-color:#a67c58;background-image:repeating-linear-gradient(0deg,transparent 0 15px,#5e443455 16px 18px);background-size:100% 18px}
.fixed-game .cell[data-floor="water-rimpel"]{background-color:#69b4c0;background-image:radial-gradient(ellipse at center,transparent 45%,#d9f7f544 48% 52%,transparent 55%);background-size:28px 16px}
.confetti-layer i{animation-duration:5s}.character-player .profile-avatar{display:none!important}
.settings-layout-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.layout-preview{display:flex;align-items:center;gap:7px;margin:10px 0 18px;padding:10px;border:2px solid #b8c9c2;background:#f6faf7}.layout-preview span{display:grid;place-items:center;min-height:46px;padding:7px;border:2px solid #526d66;border-radius:6px;font-size:10px;font-weight:900}.layout-preview .layout-bord{flex:1;background:#dbe9e3}.layout-preview .layout-dossiers{flex:1.3;background:#fff7dc}.layout-preview .layout-gereedschap{flex:.7;background:#ececf2}.layout-preview b{color:#72827d}
@media(max-width:600px){.settings-layout-grid{grid-template-columns:1fr}}
@media(max-width:480px){.fixed-game .game-board-wrap{grid-row:var(--bord-row)}.fixed-game .tool-panel{grid-row:var(--gereedschap-row)}.fixed-game .side-panel{grid-row:var(--dossiers-row)}}
.fixed-game .area-label.boundary-label{z-index:5!important}.fixed-game .cell .object{z-index:4}.fixed-game .cell .possibility-stack{z-index:8}.fixed-game .cell .suspect-piece{z-index:12}

/* V35: A3 Kleuronafhankelijkheid, U3 Gereedschap, U4 Scanbare clues, G4 Micro-animaties, N1 Oplossingssamenvatting, N2 Voortgang & P2/P3 UX */
.possibility.letter-marker {
  outline: 2px dashed #26302e;
  border: 1px solid #fff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7);
  font-weight: 900;
}
.cell .suspect-piece.letter-marker {
  box-shadow: 0 0 0 3px #fff, 0 3px 0 #252b2a, 0 0 0 5px #252b2a;
  border-radius: 50%;
  font-weight: 1000;
}
.cell .suspect-piece.letter-marker.victim-piece {
  border-radius: 6px;
  box-shadow: 0 0 0 3px #fff, 0 3px 0 #60252b, 0 0 0 5px #60252b;
}
.tool-button:disabled, .tool-wide:disabled {opacity: 0.45!important;filter: grayscale(0.6)!important;cursor: not-allowed!important}
.tool-active-help {
  display: block;
  padding: 4px 6px;
  margin-top: 2px;
  border-radius: 4px;
  background: #f0f4f2;
  border: 1px solid #c8d6d0;
  font: 700 9px/1.2 Arial, sans-serif;
  color: #3b4e47;
  text-align: center;
}

.clue-tag {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 700;
}
.clue-tag.clue-person {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}
.clue-tag.clue-object {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.clue-tag.clue-area {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}
.dossier-clue.done {
  opacity: 0.65;
  background: #eaeaea!important;
}
.dossier-clue.done span {
  text-decoration: line-through;
  color: #64748b;
}

.recap-modal {
  max-width: 580px;
}
.recap-culprit-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 2px solid #b91c1c;
  border-radius: 10px;
  background: #fef2f2;
  margin: 12px 0;
}
.recap-culprit-avatar {
  font-size: 38px;
  line-height: 1;
}
.recap-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.recap-stat-box {
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  text-align: center;
}
.recap-stat-box strong {
  display: block;
  font-size: 18px;
  color: #0f172a;
}
.recap-steps {
  max-height: 160px;
  overflow-y: auto;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  margin-bottom: 16px;
}
.recap-steps p {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.35;
}

.level-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font: 800 10px/1.2 Arial, sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.level-badge.solved {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.level-badge.in-progress {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.level-stats-meta {
  margin-top: 4px;
  font-size: 11px;
  color: #475569;
}
.level-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}
.level-card-header .level-badge {
  margin-bottom: 0;
}
.badge-emblem {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font: 800 10px/1.2 Arial, sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.badge-emblem.badge-ai {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
}
.badge-emblem.badge-user {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #7dd3fc;
}

@keyframes placePulse {
  0% { transform: scale(0.85); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.cell .suspect-piece {
  animation: placePulse 0.25s ease-out;
}
.cell .possibility {
  transition: transform 0.15s ease, opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cell .suspect-piece {
    animation: none!important;
  }
  .cell .possibility {
    transition: none!important;
  }
}

/* Editor Tabs & Visuele Tools */
.editor-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 2px solid #aeb1b5; padding-bottom: 8px; }
.editor-tabs button { flex: 1; padding: 6px; font-size: 11px; font-weight: bold; background: #f0f0f5; border: 2px solid #aeb1b5; border-radius: 4px; cursor: pointer; color: #26272c; }
.editor-tabs button.active { background: #263d43; color: white; border-color: #263d43; }
.editor-tab-content { display: none; flex-direction: column; gap: 10px; }
.editor-tab-content.active { display: flex; }

.editor-list-container { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; padding-right: 4px; }
.editor-list-item { display: flex; gap: 4px; align-items: center; background: white; padding: 4px; border: 2px solid #aeb1b5; border-radius: 4px; }
.editor-list-item input, .editor-list-item select { flex: 1; border: none; font-size: 13px; font-family: inherit; background: transparent; padding: 4px; }
.editor-list-item input { border-bottom: 1px dashed #aeb1b5; }
.clue-item select { max-width: 90px; }

.tools-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.tool-btn { padding: 4px 8px; font-size: 12px; background: white; border: 2px solid #aeb1b5; border-radius: 4px; cursor: pointer; font-weight: bold; }
.tool-btn.active { background: #e3f2fd; border-color: #1e88e5; }

.fixed-game .suspect.dossier-person .avatar, .fixed-game .victim-emoji {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fixed-game .person-face { font-size: clamp(28px, 4vw, 52px); line-height: 1; }
.fixed-game .person-name-avatar { font-size: clamp(12px, 1.5vw, 16px); font-weight: 700; margin-top: 4px; color: #111; text-shadow: none; }
.fixed-game .person-name-mobile { display: none; }

@media(max-width:900px) {
  .fixed-game .person-face { font-size: 20px; }
  .fixed-game .person-name-avatar { display: none; }
  .fixed-game .person-name-mobile { display: block; font-size: 13px !important; margin-bottom: 2px; }
}
/* Editor Context Menu */
#editor-context-menu {
  position: fixed;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  padding: 15px;
  z-index: 10000;
  width: 250px;
  max-height: 400px;
  overflow-y: auto;
}
#editor-context-menu.hidden {
  display: none;
}
#editor-context-menu .tools-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#editor-context-menu .tool-btn {
  padding: 5px 8px;
  font-size: 12px;
  flex: 1 1 45%;
  text-align: left;
}

/* --- Accessibility Settings --- */
html[data-animations='false'] * {
  transition: none !important;
  animation: none !important;
}
html[data-high-contrast='true'] {
  --text-primary: #000;
  --bg-primary: #fff;
}
html[data-high-contrast='true'] .cell {
  border: 1px solid #000 !important;
  box-shadow: none !important;
}

/* V65: begeleide visuele levelbouwer */
.mg-editor-page{height:calc(100dvh - 68px);display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;padding:10px;background:#e7f1ec;color:#263d43;overflow:hidden}
.mg-editor-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 12px;border:2px solid #8ba69e;border-radius:10px;background:#fffefa;box-shadow:0 3px 0 #aec5bd}
.mg-editor-header h1{margin:2px 0;font-size:clamp(18px,2vw,27px)}.mg-editor-header small{display:block}.mg-editor-header .button-row{justify-content:flex-end}
.mg-editor-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.mg-editor-steps button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;min-width:0;padding:7px;border:2px solid #a8bcb5;border-radius:8px;background:#f9fbf9;color:#41534e;cursor:pointer;text-align:left}.mg-editor-steps button>span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#dfeae5;font-weight:900}.mg-editor-steps button strong{overflow:hidden;text-overflow:ellipsis}.mg-editor-steps button i{font-style:normal;color:#8e9b97}.mg-editor-steps button i.done{color:#168467}.mg-editor-steps button.active{border-color:#e56f42;background:#fff5e9;box-shadow:inset 0 -3px #f2c59e}
.mg-editor-workspace{min-height:0;display:grid;grid-template-columns:minmax(250px,330px) minmax(410px,1fr) minmax(220px,290px);gap:8px}.mg-editor-panel,.mg-editor-stage,.mg-editor-findings{min-height:0;border:2px solid #9bb0aa;border-radius:9px;background:#fffefa;overflow:auto}.mg-editor-panel,.mg-editor-findings{padding:12px}.mg-editor-panel h2,.mg-editor-findings h2{margin:0 0 6px}.mg-editor-panel h3{margin:16px 0 7px}.mg-editor-stage{display:grid;grid-template-rows:auto minmax(0,1fr);padding:8px;background:#d9e8e2}.mg-editor-stagebar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.mg-editor-board{display:grid;place-items:center;min-height:0;overflow:auto;padding:18px;border-radius:7px;background:repeating-linear-gradient(45deg,#eef5f1,#eef5f1 12px,#e8f0eb 12px,#e8f0eb 24px)}.mg-editor-board .editor-grid{touch-action:none;user-select:none}.mg-editor-board [data-editor-cell]{cursor:crosshair}.mg-editor-board .mg-editor-highlight{animation:mg-editor-pulse .7s ease-in-out 3;outline:5px solid #e6533c;z-index:30}@keyframes mg-editor-pulse{50%{outline-offset:5px}}
.mg-tool-row{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:10px 0}.mg-room-list{display:grid;gap:5px;margin:10px 0}.mg-room-card{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:7px;padding:6px;border:2px solid #bdc9c5;border-radius:6px;background:#fff;text-align:left;cursor:pointer}.mg-room-card>span{width:24px;height:24px;border-radius:4px;background:var(--room-color)}.mg-room-card small{color:#687975}.mg-room-card.active{border-color:#e56f42;background:#fff3e7}.mg-room-editor{margin-top:12px;padding-top:4px;border-top:2px dashed #c5d1cd}
.mg-object-options{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-bottom:8px}.mg-object-options label{display:flex;align-items:center;gap:5px}.mg-object-palette{display:grid;grid-template-columns:1fr 1fr;gap:5px}.mg-object-card{display:grid;grid-template-columns:31px 1fr;grid-template-rows:auto auto;align-items:center;min-width:0;padding:6px;border:2px solid #c2cfcb;border-radius:6px;background:#fff;text-align:left;cursor:pointer}.mg-object-card b{grid-row:1/3;font-size:24px;text-align:center}.mg-object-card span{font-weight:800;overflow:hidden;text-overflow:ellipsis}.mg-object-card i{font-size:9px;font-style:normal;color:#61736d}.mg-object-card.active{border-color:#248d78;background:#e7f8f1}.mg-person-list{display:grid;gap:5px;margin:10px 0}.mg-person{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:7px;padding:6px;border:2px solid #bdc9c5;border-radius:6px;background:#fff;text-align:left;cursor:pointer}.mg-person b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--person);color:#fff}.mg-person i{font-size:9px;font-style:normal;color:#60706c}.mg-person.active{border-color:var(--person);background:#f4faf7}
.mg-clue-builder{padding:9px;border:2px solid #b7c9c2;border-radius:7px;background:#f1f8f4}.mg-clue-list{display:grid;gap:6px}.mg-clue-list article{display:grid;grid-template-columns:23px 1fr auto;align-items:start;gap:5px}.mg-clue-list article>span{display:grid;place-items:center;height:24px;border-radius:50%;background:#263d43;color:white;font-weight:bold}.mg-clue-list textarea{min-height:54px;resize:vertical}.mg-proof{padding:8px;border-radius:6px;background:#e7f8f1;color:#176d59}.mg-check-summary{display:grid;gap:3px;margin:14px 0;padding:12px;border:2px solid #a7bbb4;border-radius:7px;background:#f1f8f4}.mg-findings{display:grid;gap:6px}.mg-findings button{display:grid;grid-template-columns:24px 1fr;gap:5px;padding:7px;border:2px solid #d7a5a5;border-radius:6px;background:#fff4f3;text-align:left;cursor:pointer}.mg-findings button.warning{border-color:#e2c184;background:#fff9e9}.mg-findings button b{grid-row:1/3;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#9d3540;color:#fff}.mg-findings button.warning b{background:#bd791f}.mg-findings button small{color:#6c7774}.mg-editor-advanced{position:fixed;right:12px;bottom:8px;z-index:50;width:min(520px,calc(100vw - 24px));padding:6px 9px;border:2px solid #849a93;border-radius:7px;background:#fffefa;box-shadow:0 5px 20px #263d4340}.mg-editor-advanced textarea{width:100%;height:42dvh;margin:7px 0;font:11px/1.45 monospace}.mg-editor-wizard{margin:12px 0}.mg-form-grid{display:grid;grid-template-columns:2fr 1.4fr repeat(3,1fr);gap:8px}.mg-editor-home .menu-head{align-items:flex-end}
@media(max-width:1050px){.mg-editor-page{height:auto;min-height:calc(100dvh - 60px);overflow:auto}.mg-editor-workspace{grid-template-columns:minmax(250px,330px) minmax(390px,1fr);grid-template-rows:minmax(580px,1fr) auto}.mg-editor-findings{grid-column:1/-1;max-height:250px}.mg-editor-steps button{grid-template-columns:auto 1fr}.mg-editor-steps button i{display:none}.mg-form-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.mg-editor-header{align-items:flex-start;flex-direction:column}.mg-editor-header .button-row{justify-content:flex-start}.mg-editor-steps{display:flex;overflow-x:auto}.mg-editor-steps button{flex:0 0 auto}.mg-editor-workspace{display:flex;flex-direction:column}.mg-editor-panel{max-height:none}.mg-editor-stage{min-height:560px;order:-1}.mg-editor-findings{max-height:none}.mg-object-palette{grid-template-columns:repeat(3,1fr)}.mg-form-grid{grid-template-columns:1fr}.mg-editor-home .menu-head{align-items:flex-start}.mg-editor-board{padding:8px}}
@media(max-width:480px){.mg-object-palette{grid-template-columns:1fr 1fr}.mg-editor-steps button strong{display:none}.mg-editor-stage{min-height:460px}.mg-editor-header .btn{font-size:10px;padding:6px}.mg-editor-page{padding:5px}}
html[data-high-contrast='true'] .object, html[data-high-contrast='true'] .suspect-piece {
  filter: contrast(1.5) saturate(1.2);
}
html[data-high-contrast='true'] .area-label {
  border-width: 3px;
  background: #fff;
  color: #000;
}
html[data-large-text='true'] {
  font-size: 110%;
}
html[data-large-text='true'] .person-copy strong { font-size: 28px; }
html[data-large-text='true'] .dossier-clue { font-size: 15px; }
html[data-large-text='true'] .area-label { font-size: 12px; }

/* --- Focus Mode --- */
.focus-mode .fixed-game {
  grid-template-columns: 1fr !important;
}
.focus-mode .side-panel,
.focus-mode .tool-panel {
  display: none !important;
}
.focus-mode .game-board-wrap {
  grid-column: 1 / -1 !important;
}

.victim-dossier[data-remote-focus] {
  border-color: #e8754e;
  box-shadow: 0 0 0 2px #e8754e;
  position: relative;
}
.victim-dossier[data-remote-focus]::before {
  content: attr(data-remote-focus);
  position: absolute;
  top: -10px; right: -5px;
  background: #e8754e; color: white;
  padding: 2px 5px; font-size: 9px; border-radius: 4px;
  z-index: 6; font-weight: bold;
}

/* V77: beheerfilters en categorieën. */
.admin-section-head,.admin-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px}.admin-section-head h2{margin-bottom:4px}.admin-section-head .muted{margin:0}.wishlist-add-row{display:grid;grid-template-columns:1fr 2fr minmax(130px,.6fr) auto;gap:10px;margin:12px 0}.wishlist-add-row input,.wishlist-add-row select{min-width:0;border:2px solid #32545b;background:#fffdf4;padding:8px;color:var(--ink)}.table th{vertical-align:top;background:#edf5e9;min-width:105px}.table-sort{display:block;width:100%;border:0;background:transparent;padding:0 0 6px;text-align:left;color:var(--ink);font:inherit;font-weight:1000;white-space:nowrap}.table-sort:hover,.table-sort:focus-visible{color:var(--orange);text-decoration:underline}.table-filter{width:100%;min-width:70px;border:1px solid #9eb4ae;background:#fff;padding:5px;font:inherit;font-size:10px;color:var(--ink)}.admin-pagination{margin-top:10px}@media(max-width:700px){.admin-section-head{align-items:flex-start;flex-direction:column}.wishlist-add-row{grid-template-columns:1fr}.wishlist-add-row .btn{width:100%}}

/* V79: mobiele bediening: bord eerst, extra acties op verzoek. */
.tool-more{display:none}.more-actions-modal{width:min(420px,100%);padding:22px}.more-actions-modal h2{margin:0 42px 6px 0;font-size:25px}.more-actions-modal .muted{margin:0 0 16px;font-size:14px;line-height:1.4}.more-actions-list{display:grid;gap:9px}.more-actions-list .btn{width:100%;min-height:48px;text-align:left}.more-actions-list .btn.ghost{border-color:#91a7a1;background:#f5faf6}.tool-active-help{font-size:10px;line-height:1.3;color:#526965}
@media(max-width:900px){.fixed-game .tool-panel{grid-template-rows:auto auto auto 1fr;align-content:start}.fixed-game .tool-active-help{display:none}.fixed-game .tool-secondary{display:none}.fixed-game .tool-more{display:flex;align-items:center;justify-content:center;background:#e8f3ef}.fixed-game .tool-panel .tool-modes{gap:5px}.fixed-game .tool-button,.fixed-game .tool-wide{font-size:9px}.fixed-game .tool-button small{font-size:9px}.fixed-game .tool-wide{min-height:42px}.fixed-game .tool-button{min-height:44px}.fixed-game .side-panel .person-copy strong{font-size:12px}.fixed-game .side-panel .person-copy em{font-size:9px}.fixed-game .side-panel .dossier-clue{font-size:10px;line-height:1.25}.fixed-game .side-panel .dossier-clue input{width:14px;height:14px}}
@media(max-width:480px){.fixed-game .tool-panel{display:flex;flex-flow:row wrap;gap:4px;align-content:start;align-self:start;padding:4px;overflow:visible}.fixed-game .tool-panel h3,.fixed-game .tool-panel .tool-spacer,.fixed-game .tool-panel .tool-active-help{display:none}.fixed-game .tool-panel .tool-modes{display:contents}.fixed-game .tool-panel .tool-button,.fixed-game .tool-panel .tool-wide,.fixed-game .tool-panel .tool-help{flex:1 1 0;min-width:50px;min-height:50px;height:auto;margin:0;padding:3px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:8px;line-height:1.05}.fixed-game .tool-panel .tool-button span,.fixed-game .tool-panel .tool-wide span,.fixed-game .tool-panel .tool-help span{font-size:21px;line-height:1}.fixed-game .tool-panel .tool-button small,.fixed-game .tool-panel .tool-wide small{font-size:8px;font-weight:900;text-transform:uppercase}.fixed-game .tool-panel .tool-button em,.fixed-game .tool-panel .tool-help small,.fixed-game .tool-panel .tool-more small{display:none}.fixed-game .tool-panel .tool-more{background:#e8f3ef}.fixed-game .tool-panel .tool-help{background:#eef6f2;color:#2f5c52}.fixed-game .side-panel .panel-content{padding:8px}.fixed-game .side-panel .person-copy strong{font-size:13px}.fixed-game .side-panel .person-copy em{font-size:10px}.fixed-game .side-panel .dossier-clue{font-size:11px;line-height:1.3}.fixed-game .side-panel .dossier-clue input{width:16px;height:16px}.more-actions-modal{max-height:88dvh;overflow:auto}}

/* V82: geplaatste personen, volledige spelinstellingen en duidelijke profielsaves. */
.suspect-dossier.placed .dossier-person{opacity:.46;filter:grayscale(.72)}.suspect-dossier.placed.active .dossier-person{opacity:.72;filter:grayscale(.32)}.profile-card #password-form{margin-top:22px;padding-top:18px;border-top:2px dashed #b7cbc3}.game-settings-modal{max-height:min(86dvh,760px);overflow:auto}.game-settings-modal h3{margin:18px 0 8px}
.wishlist-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0}.wishlist-toolbar select{min-width:0;border:2px solid #32545b;background:#fffdf4;padding:7px;color:var(--ink)}@media(max-width:700px){.wishlist-toolbar{align-items:stretch;flex-direction:column}.wishlist-toolbar .button-row{width:100%}.wishlist-toolbar select,.wishlist-toolbar .btn{flex:1}}
.table tr.level-row-inactive td{opacity:.5}.table tr.level-row-inactive td:first-child{opacity:1}
.clue-type-icon{display:inline-block;margin-right:.35em;font-size:.95em;font-style:normal;line-height:1;vertical-align:baseline}

/* V84: markeringen blijven zonder kleur goed onderscheidbaar. */
.possibility.letter-marker{border:2px dashed #1b2828!important;outline:2px solid #fff6cf;background-image:repeating-linear-gradient(135deg,#ffffff3d 0 3px,transparent 3px 6px)!important}.cell .suspect-piece.letter-marker::after{content:'✓';position:absolute;right:-.18em;bottom:-.2em;display:grid;place-items:center;width:.68em;height:.68em;border:2px solid #192727;border-radius:50%;background:#fff6cf;color:#192727;font:1000 calc(var(--cell)*.16)/1 ui-monospace,monospace;text-shadow:none}.cell.manual-cross::after{font-family:ui-monospace,monospace;font-weight:1000}.cell.auto-cross::after{font-family:ui-monospace,monospace;font-weight:1000;opacity:.82}

/* V87: persoonlijke bordzoom, avondmodus en vrijspeelbare profielcosmetica. */
.board-zoom-control{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.board-zoom-control output{min-width:52px;padding:8px 9px;border:2px solid var(--line);border-radius:6px;background:var(--paper);font-weight:900;text-align:center}.avatar-choice.locked{opacity:.7;filter:grayscale(.25)}.avatar-choice .avatar-lock{display:block;font-size:9px;color:var(--ink)}
.fixed-game .game-board-wrap{overflow:auto;overscroll-behavior:contain}.fixed-game .grid{transform-origin:center;image-rendering:pixelated}.fixed-game .object{image-rendering:pixelated}
html[data-theme="avond"]{--ink:#edf6ef;--paper:#182927;--orange:#ffad68;--teal:#76d5b1;--line:#a8c6ba;color-scheme:dark}html[data-theme="avond"] body{background-color:#101c1b;background-image:radial-gradient(circle at 20% 0,#294744,#101c1b 70%)}html[data-theme="avond"] .topbar,html[data-theme="avond"] .card,html[data-theme="avond"] .side-panel,html[data-theme="avond"] .tool-panel,html[data-theme="avond"] .modal,html[data-theme="avond"] .game-board-wrap{background-color:#182927;color:var(--ink)}html[data-theme="avond"] input,html[data-theme="avond"] select,html[data-theme="avond"] textarea,html[data-theme="avond"] .table-filter{background:#10201e;color:var(--ink);border-color:#8aaba0}html[data-theme="avond"] .btn.ghost,html[data-theme="avond"] .tool-button,html[data-theme="avond"] .tool-wide{background:#213a36;color:var(--ink);border-color:#a4c6ba}html[data-theme="avond"] .dossier-clue,html[data-theme="avond"] .activity-entry,html[data-theme="avond"] .note{background:#203530;color:var(--ink)}html[data-theme="avond"] .area-label{background:#f0d188;color:#1f2a25;border-color:#fff0bd}html[data-theme="avond"] .table th{background:#27433e;color:var(--ink)}html[data-theme="avond"] .muted{color:#c0d2ca}@media(max-width:480px){.board-zoom-control .btn{min-height:44px}.fixed-game .game-board-wrap{max-width:100%;scrollbar-width:thin}}
html[data-theme="avond"][data-high-contrast="true"]{--ink:#fff;--paper:#000;--line:#fff}html[data-theme="avond"][data-high-contrast="true"] .cell{filter:brightness(1.2) contrast(1.25)}

/* V88: rustige, kleuronafhankelijke spelstatus en tijdelijke teamsignalen. */
.timer-status{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border:1px solid #8da7a0;border-radius:12px;background:#eff7f1;color:#245946;font:800 10px/1 ui-monospace,monospace;white-space:nowrap}.timer-status.inactive{background:#f7f0df;color:#785a22}.timer-status.stopped{background:#edf0ef;color:#52605d}.team-ping-mark{position:absolute;right:2px;top:2px;z-index:18;display:grid;place-items:center;width:18px;height:18px;border:2px solid #1d2d2a;border-radius:50%;background:#fff6a7;color:#1d2d2a;font:900 14px/1 ui-monospace,monospace;box-shadow:0 1px 0 #fff}.cell.team-ping{box-shadow:inset 0 0 0 3px #1d2d2a,0 0 0 2px #fff6a7!important}@media(prefers-reduced-motion:reduce){.team-ping-mark{transition:none!important}}

/* V90: korte, spelachtige startintro. */
.splash-screen{position:fixed;inset:0;z-index:500;display:grid;place-items:center;overflow:hidden;background:#102f38;color:#fff7de;isolation:isolate;transition:opacity .42s ease,visibility .42s step-end;animation:splash-auto-dismiss 0s linear 2s forwards}.splash-screen::before,.splash-screen::after{content:"";position:absolute;inset:-16%;z-index:-2;background:linear-gradient(45deg,#183e45 25%,transparent 25% 75%,#183e45 75%),linear-gradient(-45deg,#183e45 25%,transparent 25% 75%,#183e45 75%);background-size:32px 32px;background-position:0 0,16px 16px;animation:splash-drift 3s linear infinite}.splash-screen::after{inset:0;z-index:-1;background:radial-gradient(circle at 50% 44%,#315d58 0 15%,#163a40cc 42%,#0a2029 78%)}.splash-screen.is-leaving{opacity:0;visibility:hidden;pointer-events:none}.splash-content{position:relative;display:grid;justify-items:center;width:min(420px,calc(100vw - 32px));padding:24px 20px 18px;border:3px solid #f4d376;background:#173c43;box-shadow:0 0 0 5px #0b252e,8px 8px 0 #081c23;text-align:center}.splash-case-number{font:900 10px/1 ui-monospace,monospace;letter-spacing:3px;color:#f2c96a;animation:splash-enter .32s both}.splash-emblem{position:relative;display:grid;place-items:center;width:85px;height:85px;margin:17px 0 13px;border:5px solid #fff0b6;border-radius:50%;background:#e27859;box-shadow:inset 0 0 0 6px #a94c44,4px 4px 0 #092831;animation:splash-pop .52s cubic-bezier(.2,.9,.25,1.25) .12s both}.splash-emblem span{font:1000 27px/1 Georgia,serif;letter-spacing:-2px;color:#fff8df;text-shadow:2px 2px #7b383b}.splash-emblem i{position:absolute;width:36px;height:12px;right:-25px;bottom:1px;border:5px solid #fff0b6;border-left:0;border-radius:0 12px 12px 0;transform:rotate(43deg);transform-origin:left center}.splash-title{display:grid;gap:1px;font-family:Georgia,serif;line-height:.78;text-shadow:3px 3px #092831;animation:splash-enter .45s .22s both}.splash-title strong{font-size:clamp(31px,9vw,46px);letter-spacing:2px}.splash-title b{font:900 clamp(20px,6vw,29px)/1 ui-monospace,monospace;letter-spacing:10px;color:#f7ca61}.splash-board{display:grid;grid-template-columns:repeat(3,22px);gap:3px;margin:23px 0 16px;padding:5px;border:3px solid #b8d6b6;background:#244d48;box-shadow:3px 3px 0 #0b252e;animation:splash-enter .45s .32s both}.splash-board i{display:grid;place-items:center;width:22px;height:22px;background:#8fc179;box-shadow:inset -3px -3px #669c68,inset 2px 2px #c9e69c;font:900 14px/1 ui-monospace,monospace;color:#193a3f}.splash-board .splash-piece{border:2px solid #263b3b;box-shadow:inset -2px -2px #814349,inset 2px 2px #f4a17e;color:#fff;background:#db6b62}.splash-board .splash-piece-s{background:#5f91b9;animation:splash-target .7s ease-in-out .65s infinite alternate}.splash-loading{display:flex;align-items:center;gap:8px;margin:0;color:#d8ebe2;font:800 11px/1 ui-monospace,monospace;letter-spacing:1px}.splash-loading span{width:10px;height:10px;border-radius:50%;background:#f4ce67;box-shadow:0 0 0 3px #f4ce6733;animation:splash-blink .65s steps(2,end) infinite}.splash-skip{margin-top:15px;padding:4px 7px;border:0;border-bottom:1px solid #aacfc5;background:transparent;color:#d8ebe2;font:700 10px/1 ui-monospace,monospace;text-decoration:underline;text-underline-offset:3px}.splash-skip:hover,.splash-skip:focus-visible{color:#fff6be}.splash-scanlines{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.12;background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 3px 4px)}@keyframes splash-auto-dismiss{to{opacity:0;visibility:hidden;pointer-events:none}}@keyframes splash-drift{to{background-position:32px 32px,48px 48px}}@keyframes splash-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes splash-pop{from{opacity:0;transform:scale(.45) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes splash-target{to{transform:scale(1.16);filter:brightness(1.18)}}@keyframes splash-blink{50%{opacity:.3}}@media(max-width:480px){.splash-content{padding:20px 16px 15px}.splash-emblem{width:70px;height:70px;margin:14px 0 11px}.splash-board{margin:18px 0 14px}}@media(prefers-reduced-motion:reduce){.splash-screen,.splash-screen *{animation:none!important;transition:none!important}.splash-screen{animation:splash-auto-dismiss 0s linear 2s forwards!important}.splash-screen::before{background-position:0 0,16px 16px}}

.dossier-clue.conflict{background:#fbe4de;box-shadow:inset 4px 0 #c0392b,2px 2px 0 #e2b3aa;border-radius:4px;padding:4px 6px;margin:-2px -4px;animation:clue-conflict-pulse .5s ease 2}.dossier-clue.conflict span{color:#8f2d24;font-weight:700}.dossier-clue.conflict.done span{text-decoration:line-through;color:#b98a84}@keyframes clue-conflict-pulse{50%{box-shadow:inset 4px 0 #c0392b,0 0 0 3px #e78d80}}@media(prefers-reduced-motion:reduce){.dossier-clue.conflict{animation:none}}

.tool-wide{display:flex;align-items:center;justify-content:center;gap:6px}.tool-wide>small{font-size:inherit;font-weight:inherit;text-transform:inherit;line-height:inherit;color:inherit}
/* Personal inbox: independent scrolling leaves the puzzle viewport intact. */
.comm-dialog{padding:0;border:1px solid #a3c9b0;border-radius:16px;width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px);height:min(800px,calc(100dvh - 24px));color:#1e2923;background:#fafdF9;box-shadow:0 18px 60px #12342540;overflow:hidden}
.comm-dialog[open]{display:flex;flex-direction:column}.comm-dialog::backdrop{background:#16352b66;backdrop-filter:blur(2px)}
.comm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #a3c9b0;flex-shrink:0}.comm-head h1{font:700 25px Georgia,serif;margin:0}
.comm-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px;flex-shrink:0;border-bottom:1px solid #a3c9b0}.comm-tabs [aria-pressed=true]{background:#d0f0df;border-color:#2e8b57}
.comm-body{padding:16px 20px;overflow:auto;overscroll-behavior:contain;min-height:0;flex:1}.comm-body h2{font:700 21px Georgia,serif;margin:16px 0 10px}.comm-body h3{font:700 18px Georgia,serif;margin:16px 0 10px}
.comm-card{background:#fff;border:1px solid #cadcd0;border-radius:10px;padding:12px;margin:10px 0;overflow-wrap:anywhere}.comm-card small{display:block;color:#526e5e;margin:5px 0}.comm-card p{margin:8px 0}.comm-card .button-row{margin-top:8px;flex-wrap:wrap}.comm-own{margin-left:24px;background:#eaf8f0}
.comm-field{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-size:14px}.comm-field input,.comm-field textarea,.comm-field select{box-sizing:border-box;width:100%;min-width:0;background:#fff;color:#1e2923;border:1px solid #96b49f;border-radius:7px;padding:10px;font:inherit}.comm-field textarea{resize:vertical;min-height:70px;max-height:180px}
.comm-body .check{display:flex;align-items:center;gap:8px;margin:12px 0}.comm-body .check input{width:auto}.comm-text{white-space:pre-wrap;overflow-wrap:anywhere}.comm-help,.comm-empty{font-size:13px;line-height:1.6;color:#526e5e}.comm-code{font-family:monospace;overflow-wrap:anywhere;background:#e1f1e6;border-radius:8px;padding:12px;user-select:all}.comm-contact-list{display:flex;flex-wrap:wrap;gap:8px}.comm-official{font-size:12px;font-weight:bold;color:#236744}.comm-warning,.comm-news.critical{border-left:4px solid #af303f;padding-left:12px}.comm-news.important{border-left:4px solid #aa6400}
.comm-bell{min-width:38px;white-space:nowrap}.comm-dialog button:focus-visible,.comm-dialog input:focus-visible,.comm-dialog select:focus-visible,.comm-dialog textarea:focus-visible{outline:3px solid #287b55;outline-offset:2px}.comm-critical{position:fixed;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:min(600px,90vw);z-index:900;border:1px solid #b95145;border-radius:8px;padding:7px 12px;color:#672b24;background:#fff4e9;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comm-trophy{width:48px;height:48px;float:left;margin-right:10px}
/* Keep inbox, timer, settings and exit reachable together on narrow boards. */
@media(max-width:560px){
  .game-header{gap:4px}.game-header .brand{flex:0 0 34px}.game-header .brand-mark{width:34px;height:36px}
  .game-header .case-title,.game-header [data-toggle-focus]{display:none}
  .game-header .nav-actions{min-width:0;flex:1;justify-content:flex-end;gap:3px}
  .game-header .timer-status{max-width:80px;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:8px;padding:3px 4px}
  .game-header .conn-status{width:46px;min-width:0;font-size:9px;padding:4px}
  .game-header [data-game-settings]{width:34px;min-width:34px;padding:4px}
  .game-header [data-nav="spellen"]{width:54px;min-width:54px;padding:4px;font-size:8px;white-space:normal}
  .game-header .comm-bell{width:30px;min-width:30px;padding:3px;font-size:11px;flex-shrink:0}
}
@media(max-width:480px){.comm-dialog{width:100vw;height:100dvh;max-height:100dvh;max-width:100vw;border:0;border-radius:0;margin:0}.comm-head{padding:12px}.comm-tabs{padding:8px;gap:4px}.comm-tabs .btn{font-size:11px;padding:7px}.comm-body{padding:10px 12px}.comm-own{margin-left:12px}.game-header .comm-bell{padding:4px;min-width:30px;font-size:12px}.comm-critical{max-width:75vw;font-size:11px}}
[data-theme="avond"] .comm-dialog{background:#20312b;color:#eef8f1}[data-theme="avond"] .comm-card{background:#293e35;color:#eef8f1}[data-theme="avond"] .comm-card small,[data-theme="avond"] .comm-help,[data-theme="avond"] .comm-empty{color:#c4d6cb}[data-theme="avond"] .comm-own{background:#314b3c}[data-theme="avond"] .comm-code{color:#1e2923}[data-theme="avond"] .comm-official{color:#a4e0bd}[data-theme="avond"] .comm-tabs [aria-pressed=true]{color:#1e2923}
html[data-theme="avond"] .help-sticky-toolbar{background:#182927;border-bottom-color:#36534b}
html[data-theme="avond"] .help-search-wrap{background:#10201e;border-color:#36534b}
html[data-theme="avond"] .help-search-clear{background:#203530;color:#c0d2ca}
html[data-theme="avond"] .help-search-count{background:#1d4334;color:#a4e0bd}
html[data-theme="avond"] .help-nav-btn{background:#1c312d;border-color:#38584f;color:#d5e5dc}
html[data-theme="avond"] .help-nav-btn:hover,html[data-theme="avond"] .help-nav-btn.active{background:#25483f;border-color:#5aa17b;color:#a4e0bd}
html[data-theme="avond"] .help-rule-card{background:#1c312d;border-color:#38584f}
html[data-theme="avond"] .help-rule-card h4{color:#bfe3d0}
html[data-theme="avond"] .help-rule-card p{color:#cadad1}
html[data-theme="avond"] .help-section-title{color:#edf6ef;border-bottom-color:#2a443c}
html[data-theme="avond"] .help-section-lead{color:#b8ccc2}
html[data-theme="avond"] .help-button-card{background:#1c312d;border-color:#38584f}
html[data-theme="avond"] .help-button-card h4{color:#edf6ef}
html[data-theme="avond"] .help-button-card p{color:#b8ccc2}
html[data-theme="avond"] .help-button-badge{background:#162723;border-color:#345248;color:#edf6ef}
html[data-theme="avond"] .help-button-action{background:#142421;color:#a8c7b8}
html[data-theme="avond"] .help-pill{background:#1c312d;border-color:#38584f;color:#d5e5dc}
html[data-theme="avond"] .help-pill:hover{background:#25483f;border-color:#5aa17b}
html[data-theme="avond"] .element-card.compact{background:#1c312d;border-color:#38584f}
html[data-theme="avond"] .element-card.compact h4{color:#edf6ef}
html[data-theme="avond"] .element-card.compact p{color:#b8ccc2}
html[data-theme="avond"] .element-card.compact .element-icon{background:#162723;border-color:#345248}
html[data-theme="avond"] .help-empty-results{background:#162723;border-color:#38584f}
html[data-theme="avond"] .help-empty-results h3{color:#edf6ef}
html[data-theme="avond"] .help-empty-results p{color:#b8ccc2}

.tool-help{display:inline-flex;align-items:center;justify-content:center;gap:5px}.tool-help>small{font-size:inherit;font-weight:inherit;text-transform:none;color:inherit}

/* Vergrendelde 'Maak een zaak'-tegel: grijs, met slot en leesbare voortgangstekst. */
.menu-tile.locked{opacity:.85;filter:grayscale(.65);cursor:not-allowed}
.menu-tile.locked .icon{opacity:.75}

/* Reviewstatus: banner in de maker-editor en badges in Mijn zaken / beoordelingslijst. */
.mg-review-banner{padding:10px 16px;font-weight:700;border-bottom:3px solid #0000001a}
.mg-review-banner.status-wacht_op_goedkeuring{background:#fff3cf;color:#6b5300}
.mg-review-banner.status-aanpassing_gevraagd{background:#ffe0c2;color:#7a3b00}
.mg-review-banner.status-afgewezen{background:#ffd4d4;color:#8a1f1f}
.mg-review-banner.status-goedgekeurd{background:#d3f0dd;color:#1c6b3f}
.mg-review-banner.status-ingetrokken{background:#ececec;color:#555}
.difficulty.review-wacht_op_goedkeuring{background:#ffe08a}
.difficulty.review-aanpassing_gevraagd{background:#ffbf87}
.difficulty.review-afgewezen{background:#ffb0b0}
.difficulty.review-goedgekeurd{background:#a9e5c0}
.difficulty.review-ingetrokken{background:#dddddd}

/* Kwaliteitshulp: diagnose bij meerdere/geen oplossingen en herstelvoorstellen. */
.mg-diagnosis{margin:14px 0;padding:12px 14px;border:2px solid #c9a13b;background:#fff6df;border-radius:6px}
.mg-diagnosis.none{border-color:#c76a6a;background:#fff0f0}
.mg-diagnosis h3{margin:0 0 6px}
.mg-diagnosis ul{margin:6px 0;padding-left:18px}
.mg-suggestion{display:flex;gap:10px;align-items:center;justify-content:space-between;background:#fffdf4;border:2px solid #b9cfc7;padding:8px 10px;margin:6px 0;border-radius:5px}
.mg-suggestion span{font:14px/1.35 Georgia,serif}

/* Begeleide eerste-keer-rondleiding in de makerseditor. */
.mg-coach{position:fixed;right:16px;bottom:16px;z-index:60;width:min(340px,calc(100vw - 32px));background:#fffdf4;border:3px solid #17313a;box-shadow:6px 6px 0 #0a2029;border-radius:8px}
.mg-coach-inner{padding:14px 16px}
.mg-coach-inner h3{margin:6px 0 6px;font-family:Georgia,serif}
.mg-coach-inner p{margin:0 0 12px;font:14px/1.4 Georgia,serif;color:#33474a}
.mg-coach-progress{font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:#b04d37}
.mg-coach-inner .button-row{justify-content:flex-end}
.mg-editor-steps [data-step].coach-target{outline:3px solid #ffb454;outline-offset:2px;border-radius:4px}
@media(max-width:560px){.mg-coach{right:8px;left:8px;bottom:8px;width:auto}}

/* Editorpalet gebruikt dezelfde objectafbeelding als bord en uitleg. */
.mg-object-card{grid-template-columns:42px 1fr}
.mg-object-card .element-icon{grid-row:1/3;width:38px;height:38px}

/* Elementen Editor (Admin) */
.element-editor-page{max-width:1400px;margin:0 auto;padding:16px}
.element-filter-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.elements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px}
.element-editor-card{background:var(--surface,#fff);border:2px solid var(--border,#d4dfdb);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s,box-shadow .15s;position:relative}
.element-editor-card:hover{border-color:var(--accent,#247a6b);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.element-editor-card.is-overridden{border-color:#e09f3e;background:linear-gradient(to bottom,rgba(224,159,62,.04),transparent)}
.element-editor-card.is-custom{border-color:#3a86ff;background:linear-gradient(to bottom,rgba(58,134,255,.04),transparent)}
.element-card-head{display:flex;gap:14px;align-items:flex-start}
.element-preview-tile{width:64px;height:64px;border-radius:8px;border:2px solid var(--border,#ccc);overflow:hidden;position:relative;background-size:cover;background-position:center;flex-shrink:0;image-rendering:pixelated;image-rendering:crisp-edges}
.element-card-title-group{flex:1;min-width:0}
.element-type-badge{display:inline-block;font-family:monospace;font-size:11px;background:#eef3f1;color:#2b4a42;padding:2px 6px;border-radius:4px;margin-bottom:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.element-card-title{font-size:16px;font-weight:700;margin:0 0 2px;color:var(--text,#1e2d2a);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.element-card-subtitle{font-size:13px;color:var(--muted,#668078);font-style:italic;margin:0 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.element-badges-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.element-category-badge{font-size:11px;padding:2px 6px;border-radius:4px;background:#e0ede7;color:#185a4e;font-weight:600}
.element-status-pill{font-size:10px;padding:2px 5px;border-radius:4px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.element-status-pill.builtin{background:#e8eceb;color:#4a635d}
.element-status-pill.overridden{background:#ffeac2;color:#925800}
.element-status-pill.custom{background:#d8e8ff;color:#0b51c5}
.element-card-body{flex:1;display:flex;flex-direction:column;gap:8px}
.element-description{font-size:13px;color:var(--text-soft,#3c544e);line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.element-meta-list{display:flex;flex-direction:column;gap:4px;font-size:12px;background:rgba(0,0,0,.02);border-radius:6px;padding:8px}
.element-meta-row{display:flex;justify-content:space-between;color:var(--muted,#557068)}
.element-meta-row strong{color:var(--text,#222)}
.element-usage-badge{padding:1px 6px;border-radius:10px;font-weight:700;font-size:11px}
.element-usage-badge.in-use{background:#d4f3e3;color:#0e6a39}
.element-usage-badge.unused{background:#f0f2f1;color:#7a8a86}
.element-levels-preview{font-size:11px;color:var(--muted,#668078);background:#fafcfb;border:1px dashed var(--border,#d4dfdb);border-radius:6px;padding:6px 8px;line-height:1.3}
.element-card-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:8px;border-top:1px solid var(--border-soft,#e5edea)}
.element-card-actions .btn{padding:5px 10px;font-size:12px}

/* Modal styles for element editor */
.element-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(3px);z-index:1100;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.element-modal-dialog{background:var(--surface,#fff);border-radius:16px;box-shadow:0 12px 36px rgba(0,0,0,.25);width:100%;max-width:880px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;animation:modalSlide .2s ease-out}
@keyframes modalSlide{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.element-modal-head{padding:18px 24px;border-bottom:1px solid var(--border,#d4dfdb);display:flex;justify-content:space-between;align-items:flex-start;background:var(--surface-alt,#f7faf9)}
.element-modal-body{padding:24px;overflow-y:auto;flex:1;display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:860px){.element-modal-body{grid-template-columns:1fr}}
.element-modal-preview-col,.element-modal-form-col{min-width:0}
.element-modal-preview-col>h3:first-child{margin-top:0}
.element-modal-dialog input.is-readonly{background:var(--surface-alt,#f4f5f8);color:var(--muted,#4a635d);cursor:not-allowed}
.element-modal-tile-box{padding:14px;background:var(--surface-alt,#f7faf9);border:1px solid var(--border,#d4dfdb);border-radius:12px;text-align:center}
.element-modal-tile-box .floor-selector{flex-wrap:wrap}
.element-image-upload-box{border:1px solid var(--border,#d4dfdb);border-radius:12px;box-shadow:none;background:var(--surface,#fff)}
.element-usage-box{border-radius:12px}
.element-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:768px){.element-form-grid{grid-template-columns:1fr}}
.element-preview-box{display:flex;gap:18px;align-items:center;padding:16px;background:var(--surface-alt,#f7faf9);border:1px solid var(--border,#d4dfdb);border-radius:12px;margin-bottom:18px}
.upload-dropzone{border:2px dashed var(--border,#b8ccc5);border-radius:10px;padding:20px;text-align:center;cursor:pointer;background:#fafcfb;transition:border-color .15s,background .15s}
.upload-dropzone:hover,.upload-dropzone.dragover{border-color:var(--accent,#247a6b);background:#eef6f3}
.floor-switcher-btn{width:28px;height:28px;border-radius:6px;border:2px solid transparent;cursor:pointer;background-size:cover;padding:0;transition:transform .1s,border-color .15s}
.floor-switcher-btn:hover{transform:scale(1.1)}
.floor-switcher-btn.active{border-color:var(--accent,#247a6b);box-shadow:0 0 0 2px rgba(36,122,107,.3)}

/* Avondthema ondersteuning */
html[data-theme="avond"] .element-editor-card{background:#1c312d;border-color:#38584f}
html[data-theme="avond"] .element-editor-card.is-overridden{border-color:#d49234;background:linear-gradient(to bottom,rgba(212,146,52,.08),#1c312d)}
html[data-theme="avond"] .element-editor-card.is-custom{border-color:#3878dd;background:linear-gradient(to bottom,rgba(56,120,221,.08),#1c312d)}
html[data-theme="avond"] .element-type-badge{background:#152824;color:#9ec2b6}
html[data-theme="avond"] .element-card-title{color:#edf6ef}
html[data-theme="avond"] .element-card-subtitle{color:#9cb5ac}
html[data-theme="avond"] .element-category-badge{background:#23443c;color:#a8e0cb}
html[data-theme="avond"] .element-description{color:#cadad1}
html[data-theme="avond"] .element-meta-list{background:#152723}
html[data-theme="avond"] .element-meta-row{color:#9cb5ac}
html[data-theme="avond"] .element-meta-row strong{color:#edf6ef}
html[data-theme="avond"] .element-levels-preview{background:#152723;border-color:#38584f;color:#9cb5ac}
html[data-theme="avond"] .element-card-actions{border-top-color:#2a443c}
html[data-theme="avond"] .element-modal-dialog{background:#182b27;color:#edf6ef}
html[data-theme="avond"] .element-modal-head{background:#142421;border-bottom-color:#2e4b42}
html[data-theme="avond"] .element-modal-tile-box{background:#142421;border-color:#2e4b42}
html[data-theme="avond"] .element-image-upload-box{background:#182b27;border-color:#2e4b42}
html[data-theme="avond"] .element-modal-dialog input.is-readonly{background:#0d1c19;color:#9cb5ac}
html[data-theme="avond"] .element-preview-box{background:#142421;border-color:#2e4b42}
html[data-theme="avond"] .upload-dropzone{background:#152723;border-color:#38584f}
html[data-theme="avond"] .upload-dropzone:hover{background:#1b332d;border-color:#4fa384}

/* Hoofdmenu secties en feedback module */
.menu-sections{display:flex;flex-direction:column;gap:22px}
.menu-section{display:flex;flex-direction:column;gap:10px}
.menu-section-title{font:700 clamp(16px,2.5vw,20px) Georgia,serif;color:#29443f;margin:0;display:flex;align-items:center;gap:8px}
html[data-theme="avond"] .menu-section-title{color:#edf6ef}
.admin-menu-section{border-top:2px dashed #32545b44;padding-top:16px}
html[data-theme="avond"] .admin-menu-section{border-top-color:#38584f}
.feedback-modal{max-width:540px}

/* Rustige header: knoppen in het hoofdmenu zonder rand/schaduw */
.topbar:not(.game-header) .nav-actions .btn{border-color:transparent;box-shadow:none;background:transparent}
.topbar:not(.game-header) .nav-actions .btn:hover,.topbar:not(.game-header) .nav-actions .btn:focus-visible{background:color-mix(in srgb,currentColor 12%,transparent);box-shadow:none;transform:none}
html[data-theme="avond"] .topbar:not(.game-header) .nav-actions .btn:hover,html[data-theme="avond"] .topbar:not(.game-header) .nav-actions .btn:focus-visible{background:color-mix(in srgb,#fff 14%,transparent)}

/* Profielmenu (uitloggen als submenu onder profiel) */
.profile-menu{position:relative}
.profile-menu>summary{list-style:none;cursor:pointer}
.profile-menu>summary::-webkit-details-marker{display:none}
.profile-menu>summary::marker{content:""}
.profile-menu .profile-caret{font-size:11px;opacity:.7;transition:transform .15s}
.profile-menu[open] .profile-caret{transform:rotate(180deg)}
.profile-menu-panel{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;display:flex;flex-direction:column;padding:6px;background:var(--paper,#fffefa);border:2px solid var(--line,#75958e);border-radius:8px;box-shadow:3px 4px 0 #071c2433;z-index:60}
.profile-menu-item{border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:6px;font-weight:800;color:inherit;min-height:42px}
.profile-menu-item:hover,.profile-menu-item:focus-visible{background:color-mix(in srgb,currentColor 12%,transparent);outline:none}
html[data-theme="avond"] .profile-menu-panel{background:#182927;border-color:#a8c6ba}

/* Belicon voor het notificatiesysteem */
.comm-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0}
.comm-bell .comm-bell-icon{font-size:18px;line-height:1}
.comm-bell.has-unread .comm-bell-icon{animation:comm-bell-ring 1.6s ease-in-out 1}
.comm-bell .comm-bell-count{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center;font:800 10px/1 ui-monospace,monospace;color:#fff;background:var(--red,#dc2626);border-radius:999px;box-shadow:0 0 0 2px var(--paper,#fffefa)}
html[data-theme="avond"] .comm-bell .comm-bell-count{box-shadow:0 0 0 2px #182927}
@keyframes comm-bell-ring{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(6deg)}80%{transform:rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.comm-bell.has-unread .comm-bell-icon{animation:none}}


/* Shared compact navigation actions, with full accessible names. */
.btn.header-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;font-size:22px;line-height:1}

.btn.header-icon>span{display:inline}
@media(max-width:480px){.game-header [data-toggle-focus].header-icon{display:none}}

/* Flat icon actions across menu and game headers. */
.btn.header-icon,.topbar .nav-actions .comm-bell{border:0;box-shadow:none;background:transparent;border-radius:50%;transform:none}
.btn.header-icon:hover,.btn.header-icon:focus-visible,.topbar .nav-actions .comm-bell:hover,.topbar .nav-actions .comm-bell:focus-visible{background:color-mix(in srgb,currentColor 10%,transparent);box-shadow:none;transform:none}

.about-close,.collection-header [data-collection-close]{border:0;box-shadow:none;background:transparent}

/* Compacter speelscherm: aanwijzingen zonder icoon of checkbox, en het slachtoffer als laatste,
   kleurloze kaart in de verdachtenlijst in plaats van een aparte, gekleurde dossierkaart. */
.dossier-clue{display:block!important}
.dossier-clue>span{display:block}
.fixed-game .victim-in-list .person-clues{border-top:2px solid #a5a6ac;background:#f2f2f6}
.fixed-game .victim-in-list .person-copy em{color:#6b7370}

/* Illustrated how-to guide: keep these styles scoped away from the game board. */
.help-page .help-guide{max-width:1080px;padding:clamp(16px,3vw,32px);border:1px solid #a3c9b0;border-radius:12px;box-shadow:0 3px 12px #1e29230a}
.help-page .help-hero{max-width:760px;margin-bottom:24px}.help-return{display:inline-block;margin-top:12px;color:#2e6c49;font-weight:700;text-underline-offset:3px}
.help-page .help-sticky-toolbar{position:static;border-bottom:1px solid #a3c9b0;background:transparent;margin-bottom:24px}
.help-page .help-search-input{min-width:0;min-height:32px}.help-page .help-search-clear{flex:none;min-width:32px;min-height:32px}
.help-page .help-nav{flex-wrap:wrap;overflow:visible}.help-page .help-nav-btn{min-height:40px}.help-page .help-pill{min-height:36px}
.help-page .help-section{scroll-margin-top:84px}.help-walkthrough{display:grid;gap:18px}
.help-page .help-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;padding:22px;background:#f6faf5;border:1px solid #c6dccc;border-radius:12px}
.help-step-copy{min-width:0}.help-step-number{display:grid;place-items:center;width:32px;height:32px;background:#2e8b57;color:#fff;border-radius:6px;font-weight:900;margin-bottom:12px}
.help-step h3{font:700 23px/1.2 Georgia,serif;margin:0 0 12px;color:#1e2923}.help-page .help-step p{font:15px/1.65 ui-monospace,monospace;color:#3c5747}
.help-step figure{margin:0;min-width:0}.help-shot{display:block;width:100%;padding:8px;background:#e5eee7;border:1px solid #a3c9b0;border-radius:8px;cursor:zoom-in}
.help-shot img{display:block;max-width:100%;width:auto;height:auto;max-height:340px;margin:auto;object-fit:contain}
.help-step figcaption{margin-top:8px;font:11px/1.4 ui-monospace,monospace;color:#526e5e}.help-step figcaption span{float:right}
.help-page button:focus-visible,.help-return:focus-visible{outline:3px solid #2e8b57;outline-offset:3px}
.help-page .help-button-header,.help-page .help-button-title-wrap,.help-page .element-card h4{flex-wrap:wrap}.help-page .help-button-card,.help-page .element-card,.help-page .help-rule-card{min-width:0}
.help-image-dialog{position:fixed;width:max-content;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:12px;border:1px solid #a3c9b0;border-radius:12px;background:#fafdf9;color:#1e2923;overflow:auto}
.help-image-dialog::backdrop{background:#102a34cc}.help-image-dialog>button{display:block;margin:0 0 12px auto}.help-image-dialog img{display:block;max-width:100%;max-height:calc(100dvh - 110px);width:auto;height:auto;object-fit:contain}
.tutorial-card{max-height:calc(100dvh - 32px);overflow:auto}.tutorial-screenshot{display:block;max-width:100%;width:auto;height:auto;max-height:220px;margin:0 auto 16px;border:1px solid #a3c9b0;border-radius:6px;object-fit:contain}.tutorial-example{display:block;margin-bottom:16px;color:inherit}.tutorial-card .button-row{flex-wrap:wrap}
html[data-theme="avond"] .help-page .help-step,html[data-theme="avond"] .help-page .help-rule-card,html[data-theme="avond"] .help-page .help-button-card,html[data-theme="avond"] .help-page .element-card,html[data-theme="avond"] .help-image-dialog{background:#18363e;border-color:#2a525d;color:#f3faf7}
html[data-theme="avond"] .help-page h3,html[data-theme="avond"] .help-page h4,html[data-theme="avond"] .help-page p,html[data-theme="avond"] .help-page .help-section-lead,html[data-theme="avond"] .help-page figcaption,html[data-theme="avond"] .help-return{color:#e0eee5}
html[data-theme="avond"] .help-page .help-search-wrap,html[data-theme="avond"] .help-page .help-shot,html[data-theme="avond"] .help-page .help-nav-btn,html[data-theme="avond"] .help-page .help-pill{background:#23454d;color:#f3faf7;border-color:#517880}
html[data-theme="avond"] .help-page .help-nav-btn.active,html[data-theme="avond"] .help-page .help-pill.active{background:#ffd66b;color:#1e2923}
@media(max-width:700px){.help-page .help-step{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px}.help-step h3{font-size:21px}.help-page .help-search-count{position:absolute;right:4px;bottom:-18px;font-size:9px}.help-page .help-nav{margin-top:12px}.help-page .help-rule-card{overflow-wrap:anywhere}.help-shot img{max-height:360px}.help-page .help-nav-btn{font-size:11px}.help-page .help-buttons-grid,.help-page .element-guide-grid,.help-page .help-rules-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-height:600px){.tutorial-screenshot{max-height:130px}.tutorial-card{padding:16px}}

/* Zaakkiezer: categorietabs, sorteren op moeilijkheid/serie en verbergen van opgeloste zaken. */
.level-tabs{display:flex;gap:6px;margin:0 0 12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.level-tabs::-webkit-scrollbar{height:5px}
.level-tabs::-webkit-scrollbar-thumb{background:#a3c9b0;border-radius:3px}
.tab-btn{flex:none;min-height:34px;padding:7px 14px;white-space:nowrap}
.level-controls{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;margin:0 0 16px;padding:10px 12px;background:#fffefa;border:2px solid #75958e;border-radius:6px;box-shadow:3px 3px 0 #bcd1c9}
.filter-toggle{display:flex;align-items:center;gap:8px;font:800 11px/1.2 ui-monospace,monospace;color:#385851;cursor:pointer}
.filter-toggle input{width:18px;height:18px;accent-color:var(--teal,#55a99a);cursor:pointer}
.sort-buttons{display:flex;align-items:center;gap:6px}
.sort-label{font:800 10px/1 ui-monospace,monospace;color:#687b7e;text-transform:uppercase;letter-spacing:1px}
.sort-btn{min-height:32px;padding:6px 12px}
.level-section-header{display:flex;align-items:center;gap:9px;margin:22px 0 10px;font:700 19px Georgia,serif;color:#29443f}
.level-grid+.level-section-header{margin-top:26px}
.level-section-count{padding:2px 8px;border-radius:999px;background:#dceee7;border:1px solid #95b1a8;font:800 10px/1.6 ui-monospace,monospace;color:#395a53}
[data-level-browser][aria-busy="true"]{opacity:.55;transition:opacity .12s}
html[data-theme="avond"] .tab-btn,html[data-theme="avond"] .sort-btn,html[data-theme="avond"] .level-controls{background:#18363e;border-color:#2a525d;color:#f3faf7;box-shadow:2px 2px 0 #102a2f}
html[data-theme="avond"] .tab-btn:hover,html[data-theme="avond"] .sort-btn:hover{background:#23454d}
html[data-theme="avond"] .tab-btn.active{background:#ffd66b;border-color:#ffd66b;color:#1e2923}
html[data-theme="avond"] .sort-btn.active{background:var(--orange,#e97b58);border-color:#e97b58;color:#fff}
html[data-theme="avond"] .filter-toggle,html[data-theme="avond"] .level-section-header{color:#f3faf7}
html[data-theme="avond"] .sort-label{color:#a8c6ba}
html[data-theme="avond"] .level-section-count{background:#23454d;border-color:#517880;color:#e0eee5}
@media(max-width:900px){.level-controls{justify-content:flex-start}}
@media(max-width:560px){.level-tabs{gap:5px;margin-bottom:10px}.tab-btn{padding:6px 11px}.level-controls{flex-direction:column;align-items:stretch;gap:10px}.sort-buttons{flex-wrap:wrap}.sort-btn{flex:1}.level-section-header{font-size:17px;margin-top:18px}}
@media(prefers-reduced-motion:reduce){[data-level-browser][aria-busy="true"]{transition:none}}

/* --- Plaatsings- en themaovergangen (wishlist 18) --- */
@keyframes mg-place-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.14);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes mg-mark-fade{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.cell .suspect-piece.letter-marker.is-new{animation:mg-place-pop .26s cubic-bezier(.34,1.56,.64,1) both}
.cell .possibility.letter-marker.is-new{animation:mg-mark-fade .16s ease-out both}
.cell.is-new-cross::after{animation:mg-mark-fade .18s ease-out both}
html,body,.app-shell,.card,.tool-panel,.side-panel,.game-board-wrap,.cell{transition:background-color .32s ease,border-color .32s ease,color .32s ease}

/* --- Toetsenbordbediening van het bord (wishlist 23) --- */
.cell:focus-visible{outline:3px solid #1d6fd6;outline-offset:-3px;z-index:20;box-shadow:0 0 0 3px #fff,0 0 0 6px #1d6fd6}
html[data-theme="avond"] .cell:focus-visible{outline-color:#ffd66b;box-shadow:0 0 0 3px #12242a,0 0 0 6px #ffd66b}
.board-key-help{margin-top:6px;font:700 9px/1.5 ui-monospace,monospace;color:#5c7370;text-transform:uppercase;letter-spacing:.4px}
html[data-theme="avond"] .board-key-help{color:#9fbdb2}

/* --- Deelresultaat (wishlist 16) --- */
[data-solved-share]{white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  .cell .suspect-piece.letter-marker.is-new,.cell .possibility.letter-marker.is-new,
  .cell.is-new-cross::after{animation:none!important}
  html,body,.app-shell,.card,.tool-panel,.side-panel,.game-board-wrap,.cell{transition:none!important}
}

/* Onboarding CSS */
.onb-backdrop{position:fixed;inset:0;background:rgba(7,23,29,0.88);z-index:150;display:grid;place-items:center;padding:16px}
.onb-card{background:var(--paper,#fffdf4);border:4px solid var(--line,#17313a);box-shadow:8px 8px 0 var(--shadow,#071c24);border-radius:12px;width:min(720px,96vw);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;overflow:hidden;padding:0}
.onb-head{padding:16px 20px 12px;display:flex;align-items:start;justify-content:space-between;border-bottom:3px solid var(--border-color,#a3c9b0);background:color-mix(in srgb,var(--paper,#fffdf4) 92%,var(--gold,#ffd86f))}
.onb-eyebrow{font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--orange,#d97706);display:block;margin-bottom:2px}
.onb-head h2{margin:0;font-family:Georgia,serif;font-size:clamp(18px,4vw,22px);color:var(--ink,#1e2923)}
.onb-body{display:grid;grid-template-columns:1fr 280px;gap:0;overflow:auto}
.onb-play{padding:16px;display:flex;flex-direction:column;gap:12px;align-items:center;background:color-mix(in srgb,var(--paper,#fffdf4) 96%,var(--night,#0b2630))}
.onb-dossiers{display:flex;gap:8px;justify-content:center;width:100%}
.onb-dossier{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#fff;border:3px solid #594b3b;border-radius:6px;box-shadow:3px 3px 0 #b8a47c;cursor:pointer;transition:transform .1s,border-color .1s;min-width:110px}
.onb-dossier:hover{transform:translate(-1px,-1px)}
.onb-dossier.active{border-color:var(--orange,#d97706);box-shadow:4px 4px 0 var(--gold,#ffd86f);background:#fffdf4}
.onb-dossier.victim{border-color:#512b39;background:#fbf2f4}
.onb-dossier.accused{border-color:var(--red,#dc2626);box-shadow:4px 4px 0 #fee2e2}
.onb-dossier-letter{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:14px;color:#fff}
.onb-dossier-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.onb-dossier-copy strong{font-size:13px;font-family:Georgia,serif}
.onb-dossier-copy em{font-size:9px;color:var(--muted,#526e5e);font-style:normal}
.onb-boardwrap{display:flex;flex-direction:column;align-items:center;gap:6px;--onb-cell:clamp(38px,8vw,52px)}
.onb-arealabels{display:flex;justify-content:space-between;width:calc(var(--onb-cell)*4);padding:0 4px;font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--muted,#526e5e)}
.onb-grid{display:grid;gap:2px;padding:6px;background:#34251f;border:4px solid #1a120e;border-radius:6px;box-shadow:4px 4px 0 #0a1e26}
.onb-cell{width:var(--onb-cell);height:var(--onb-cell);position:relative;display:grid;place-items:center;padding:0;border:1px solid #2d1e18;border-radius:2px;cursor:pointer}
.onb-tools{display:flex;gap:8px;width:100%;justify-content:center}
.onb-tool{min-height:36px;padding:6px 12px;border:3px solid #173943;background:#fff;border-radius:6px;font-weight:900;font-size:12px;box-shadow:2px 2px 0 #102a33;cursor:pointer}
.onb-tool.active{background:var(--gold,#ffd86f);border-color:#102a33}
.onb-tool.accuse{background:var(--red,#dc2626);color:#fff;border-color:#512b39}
.onb-coach{padding:20px;background:#fffdf4;border-left:3px solid var(--border-color,#a3c9b0);display:flex;flex-direction:column;gap:12px;justify-content:space-between}
.onb-coach-text{margin:0;font-family:Georgia,serif;font-size:14px;line-height:1.5;color:var(--ink,#1e2923)}
.onb-coach-hint{margin:0;font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--orange,#d97706)}
.onb-coach.nudge{animation:onb-shake .3s ease-in-out}
@keyframes onb-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

[data-onb-target]{outline:4px solid var(--orange,#d97706)!important;outline-offset:2px!important;z-index:5!important;animation:onb-pulse 1.2s ease-in-out infinite!important}
@keyframes onb-pulse{0%,100%{outline-color:var(--orange,#d97706);box-shadow:0 0 0 0 rgba(217,119,6,.4)}50%{outline-color:#fbbf24;box-shadow:0 0 0 8px rgba(251,191,36,0)}}

.onb-done{padding:36px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.onb-done-mark{font-size:54px}
.onb-done h2{margin:0;font-family:Georgia,serif;font-size:26px}
.onb-done p{margin:0;max-width:480px;font-family:Georgia,serif;font-size:15px;line-height:1.6;color:var(--muted,#526e5e)}

@media(max-width:640px){
  .onb-card{width:96vw;max-height:calc(100dvh - 16px)}
  .onb-body{grid-template-columns:1fr;grid-template-rows:auto auto}
  .onb-coach{border-left:0;border-top:3px solid var(--border-color,#a3c9b0);padding:14px}
  .onb-play{padding:12px}
  .onb-dossiers{flex-wrap:wrap}
  .onb-dossier{min-width:0;flex:1}
}
@media(prefers-reduced-motion:reduce){
  [data-onb-target]{animation:none!important;outline-color:var(--orange,#d97706)!important}
  .onb-coach.nudge{animation:none!important}
}

/* Pauzescherm: dekt bord en dossiers af zodat pauze geen gratis denktijd wordt. */
.pause-overlay{position:fixed;inset:0;z-index:860;display:grid;place-items:center;padding:16px;background:#123425d9;backdrop-filter:blur(3px)}
.pause-card{width:min(360px,100%);padding:22px 20px;border:3px solid #f4d376;border-radius:10px;background:#173c43;color:#fff7de;box-shadow:0 0 0 5px #0b252e,8px 8px 0 #081c23;text-align:center}
.pause-mark{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 12px;border:4px solid #fff0b6;border-radius:50%;background:#e27859;font-size:24px;line-height:1}
.pause-card h2{margin:0 0 6px;font:700 22px Georgia,serif}
.pause-time{margin:0 0 8px;font:900 30px/1 ui-monospace,monospace;color:#f7ca61}
.pause-help{margin:0 0 14px;font-size:13px;line-height:1.5;color:#d8ebe2}
.pause-card .button-row{justify-content:center;flex-wrap:wrap;gap:8px}
.pause-card .btn.ghost{background:#20505a;color:#fff7de;border-color:#aacfc5}
.pause-card .btn.ghost:hover,.pause-card .btn.ghost:focus-visible{background:#2b6873;color:#fff}
.pause-card .btn:focus-visible{outline:3px solid #f4d376;outline-offset:2px}
.timer-status.paused{background:#f7e4df;color:#8a3b2c}
@media(prefers-reduced-motion:reduce){.pause-overlay{backdrop-filter:none}}
@media(max-width:560px){
  .pause-card{padding:18px 14px}.pause-time{font-size:26px}
  /* De pauzeknop is essentieel en blijft ook op een krappe header zichtbaar. */
  .game-header [data-toggle-pause].header-icon{display:inline-flex;flex:0 0 34px;width:34px;min-width:34px;height:34px;min-height:34px;font-size:16px}
  /* Op een krappe header telt alleen de tijd; kleur en pauzeknop dragen de status. */
  .game-header .timer-status .timer-word{display:none}
  .game-header .timer-status{max-width:none;width:auto}
}

/* Invite Friends Promo & Modal styling */






.invite-friends-dialog{max-width:680px;height:auto!important;max-height:90vh;overflow-y:auto}
.invite-modal-body{display:flex;flex-direction:column;gap:18px;padding:18px}
.invite-banner-card{background:#eaf4ed;border:2px solid #a4cbb3;border-radius:8px;padding:14px}
.invite-trophy-preview{display:flex;align-items:center;gap:16px}
.invite-trophy-text strong{display:block;font-size:16px;color:#1e382b;margin-bottom:4px}
.invite-trophy-text p{margin:0 0 8px;font-size:12px;color:#456755}
.invite-progress-bar{display:flex;align-items:center;gap:10px}
.invite-progress-bar progress{flex:1;height:12px;border-radius:6px;accent-color:var(--orange,#d97706)}
.invite-progress-bar span{font-weight:bold;font-size:12px;white-space:nowrap}

.invite-section{background:#fff;border:1px solid #c9dcd0;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:8px}
.invite-section h3{margin:0;font-size:15px;color:#1e352a}
.invite-share-row{display:flex;gap:8px}
.invite-url-input{flex:1;border:2px solid #84a896;padding:8px 10px;border-radius:4px;font-family:monospace;font-size:13px;background:#f7fbf8}
.whatsapp-share-btn{background:#25d366!important;color:#fff!important;border-color:#128c7e!important}
.invite-input-group{display:flex;gap:8px}
.invite-input-group input{flex:1;border:2px solid #84a896;padding:8px 10px;border-radius:4px}

[data-theme="avond"] .invite-banner-card{background:#253c33;border-color:#3d5e50}
[data-theme="avond"] .invite-trophy-text strong{color:#e2f2e9}
[data-theme="avond"] .invite-trophy-text p{color:#b3d1c2}
[data-theme="avond"] .invite-section{background:#1d2e27;border-color:#375246}
[data-theme="avond"] .invite-section h3{color:#e2f2e9}
[data-theme="avond"] .invite-url-input{background:#15241e;color:#eef8f1;border-color:#375246}

@media(max-width:560px){
  
  .invite-share-row,.invite-input-group{flex-direction:column}
}

/* Materialized 16-bit SVG Icons & UI Enhancements */
.mg-icon {
  display: inline-block;
  vertical-align: middle;
  width: 1.15em;
  height: 1.15em;
  stroke-width: 2.2;
  flex-shrink: 0;
}
.btn .mg-icon {
  margin-right: 6px;
}
.btn.header-icon .mg-icon {margin-right: 0;width: 20px;height: 20px}
.about-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.about-close .mg-icon {
  width: 22px;
  height: 22px;
}


/* MG Material components — canonical appearance. Board geometry stays above. */
:root{
  --ui-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ui-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ui-bg:#eef8f1;--ui-surface:#fffefa;--ui-container:#e2efe6;--ui-hover:#d5e7dc;
  --ui-text:#20372d;--ui-muted:#52685b;--ui-primary:#246b4b;--ui-on-primary:#fff;
  --ui-border:#b8cec0;--ui-danger:#a82b3d;--ui-danger-bg:#fff0f1;
  --ui-radius:16px;--ui-control-radius:12px;--ui-shadow:0 2px 8px #193b2810;
  --ui-shadow-raised:0 6px 20px #193b2818;--ui-space-1:4px;--ui-space-2:8px;--ui-space-3:12px;--ui-space-4:16px;--ui-space-6:24px;
}
html[data-theme="warm-goud"]{--ui-bg:#faf4e6;--ui-surface:#fffaf0;--ui-container:#f2e7ce;--ui-hover:#eadab8;--ui-text:#3d3023;--ui-muted:#716045;--ui-primary:#78551d;--ui-border:#d3c3a5}
html[data-theme="koel-mint"]{--ui-bg:#ecf8f6;--ui-surface:#fafffd;--ui-container:#d9eeea;--ui-hover:#c9e3df;--ui-text:#1a3d3a;--ui-muted:#4f6c68;--ui-primary:#17695f;--ui-border:#accdc6}
html[data-theme="avond"]{--ui-bg:#10221f;--ui-surface:#192f2a;--ui-container:#263f36;--ui-hover:#345346;--ui-text:#edf6ef;--ui-muted:#b5cbbd;--ui-primary:#a9dfbd;--ui-on-primary:#123b27;--ui-border:#526f61;--ui-danger:#ffb2bc;--ui-danger-bg:#4c2830;--ui-shadow:0 2px 8px #0002;--ui-shadow-raised:0 6px 20px #0003}
html[data-high-contrast="true"]{--ui-border:var(--ui-text);--ui-muted:var(--ui-text)}
html body,html .game-shell{background:var(--ui-bg);color:var(--ui-text);font-family:var(--ui-font)}
:root :is(button,input,select,textarea,.game-shell button,.game-shell input,.game-shell textarea,.game-shell select){font-family:var(--ui-font)}
:root :is(.coord,.letter-marker,.room-code,.pause-time,.timer-value){font-family:var(--ui-mono)}
:root :is(.muted,.empty,.menu-head p,.level-card p,.game-row small,.filter-toggle,.sort-label){color:var(--ui-muted)}
:root :is(.section-title,.menu-section-title,.menu-head h1,.level-section-header){color:var(--ui-text);text-shadow:none}
:root .topbar{background:var(--ui-surface);color:var(--ui-text);border-bottom:1px solid var(--ui-border);box-shadow:none}
:root .brand{color:var(--ui-text)}
:root .brand-mark{background:none;border:0;box-shadow:none;padding:0;overflow:hidden;border-radius:12px}
.brand-mark img{display:block;width:100%;height:100%}
:root :is(.card,.level-card,.game-row,.stat,.level-controls,.my-case-card,.review-actions-box,.mg-editor-panel,.mg-editor-wizard,.mg-editor-stage,.element-filter-bar,.element-card,.comm-dialog,.comm-card,.comm-compose,.invite-section,.onb-card,.achievement-dialog,.achievement-card,.profile-menu-panel){background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow)}
:root :is(.modal,.comm-dialog,.profile-menu-panel,.onb-card,.achievement-dialog){box-shadow:var(--ui-shadow-raised)}
:root :is(.level-controls,.comm-tabs,.comm-head,.onb-head,.onb-coach,.onb-play,.mg-editor-stagebar,.mg-editor-steps){background:var(--ui-container);color:var(--ui-text);border-color:var(--ui-border)}
:root :is(.comm-field,.comm-help,.comm-text,.comm-empty){color:var(--ui-muted)}
:root :is(.table th,.table td){border-color:var(--ui-border);font-family:var(--ui-font);font-size:13px}
:root .table th{background:var(--ui-container);color:var(--ui-text)}
:root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){border:1px solid var(--ui-border);border-radius:var(--ui-control-radius);background:var(--ui-surface);color:var(--ui-text);box-shadow:none}
:root :is(.field input,.field select,.comm-field input,.comm-field select){min-height:44px}
:root :is(input[type=checkbox],input[type=radio],progress){accent-color:var(--ui-primary)}
:root :is(.btn,.tab-btn,.sort-btn,.tool-button,.tool-wide,.onb-tool,.help-nav-btn,.help-pill){
  border:1px solid var(--ui-border);border-radius:var(--ui-control-radius);background:var(--ui-surface);color:var(--ui-primary);
  font-family:var(--ui-font);font-weight:650;letter-spacing:0;text-transform:none;text-shadow:none;box-shadow:none;
  transition:background-color .16s ease,box-shadow .16s ease;transform:none;
}
:root .btn{min-height:44px;padding:10px 18px;font-size:14px;line-height:1.25;display:inline-flex;justify-content:center;align-items:center;gap:6px}
:root .btn.small{min-height:36px;padding:7px 12px;font-size:12px}
:root :is(.btn.primary,.btn.teal,.btn.green,.tool-wide.submit){background:var(--ui-primary);border-color:transparent;color:var(--ui-on-primary);box-shadow:var(--ui-shadow)}
:root :is(.btn.secondary,.btn.tonal,.btn.orange,.tool-wide.hint){background:var(--ui-container);border-color:transparent;color:var(--ui-primary)}
:root :is(.btn.ghost,.btn.text){background:transparent;color:var(--ui-primary);border-color:transparent;box-shadow:none}
:root .btn.outlined{background:transparent;border-color:var(--ui-border)}
:root :is(.btn.red,.btn.danger){background:var(--ui-danger);color:var(--ui-surface);border-color:transparent}
:root :is(.btn.red.ghost,.tool-wide.murderer){background:var(--ui-danger-bg);color:var(--ui-danger);border-color:transparent}
:root :is(.btn,.tab-btn,.sort-btn,.tool-button,.tool-wide,.onb-tool,.help-nav-btn,.help-pill):hover:not(:disabled){box-shadow:inset 0 0 0 100px #647c6818;transform:none}
:root :is(.btn,.tab-btn,.sort-btn,.tool-button,.tool-wide,.onb-tool):active:not(:disabled){box-shadow:inset 0 0 0 100px #647c682e;transform:none}
:root :is(.tab-btn.active,.sort-btn.active,.tool-button.active,.tool-wide.active,.onb-tool.active,.help-nav-btn.active,.help-pill.active,.btn[aria-pressed="true"],.btn.active){background:var(--ui-container);color:var(--ui-primary);border-color:var(--ui-primary);box-shadow:inset 0 -3px var(--ui-primary)}
:root :is(.tab-btn,.sort-btn){font-size:12px;line-height:1.3;min-height:40px;padding:8px 14px}
:root :is(.tool-button,.tool-wide){font-size:12px}
:root .tool-button small{font-size:12px}
:root .tool-button em{color:var(--ui-muted);font-size:9px}
:root :is(.btn,.tool-button,.tool-wide,.tab-btn,.sort-btn):disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:none;transform:none}
:root [aria-busy="true"]{cursor:progress}
:root .btn[aria-busy="true"]::after{content:"";width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-loading .8s linear infinite}
@keyframes ui-loading{to{transform:rotate(360deg)}}
:root :is(button,a,summary,input,select,textarea):focus-visible{outline:3px solid var(--ui-primary);outline-offset:3px}
:root .cell:focus-visible{outline-offset:-3px}
:root .profile-menu-panel{min-width:210px;padding:8px;border-radius:16px}
:root .profile-menu-item{font-size:14px;font-weight:550;color:var(--ui-text);min-height:44px}
:root .profile-menu-item[data-logout]{color:var(--ui-danger);border-top:1px solid var(--ui-border);border-radius:0 0 8px 8px;margin-top:4px}
:root .user-profile-button{background:transparent;color:var(--ui-text);border:0;box-shadow:none;font-family:var(--ui-font);border-radius:24px}
:root .btn.header-icon{min-width:40px;width:40px;height:40px;min-height:40px;padding:8px;border-radius:50%;border:0;box-shadow:none;background:transparent;color:var(--ui-primary)}
:root .btn .mg-icon{margin:0}
:root .comm-bell{color:var(--ui-primary)}
:root .comm-bell-icon .mg-icon{width:22px;height:22px}
:root .modal-backdrop{backdrop-filter:blur(4px)}
:root .menu-page{max-width:1120px;padding-top:32px;padding-bottom:40px}
:root .menu-head{margin-bottom:24px;align-items:center;gap:16px}
:root .menu-head h1{font:700 clamp(28px,4vw,40px)/1.15 Georgia,serif;letter-spacing:-.8px}
:root .menu-head p{font-size:14px;margin:0 0 8px}
:root .online-summary{display:flex;align-items:center;gap:8px;flex:none;background:var(--ui-surface);color:var(--ui-primary);border:1px solid var(--ui-border);border-radius:24px;padding:10px 14px;font:600 12px var(--ui-font);box-shadow:none;min-height:40px}
.presence-dot{width:7px;height:7px;background:var(--ui-primary);border-radius:50%}
.menu-play{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin-bottom:32px}
:root .menu-tile{min-height:112px;padding:20px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius);color:var(--ui-text);box-shadow:var(--ui-shadow);text-align:left;transition:background-color .16s,box-shadow .16s;transform:none}
:root .menu-tile:hover{background:var(--ui-container);box-shadow:var(--ui-shadow-raised);transform:none}
:root .menu-tile:active{box-shadow:inset 0 0 0 2px var(--ui-primary)}
:root .menu-page .menu-tile{display:flex;align-items:center;gap:14px;min-width:0}
:root .menu-tile .icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:var(--ui-container);color:var(--ui-primary);font-size:24px;margin:0 0 12px}
:root .menu-page .menu-tile .icon{margin:0}
:root .menu-tile .icon .mg-icon{width:24px;height:24px}
:root .menu-tile strong{display:block;font:650 15px/1.3 var(--ui-font)}
:root .menu-tile small{font:400 12px/1.45 var(--ui-font);color:var(--ui-muted);margin-top:5px}
.menu-tile-copy{flex:1;min-width:0}
.menu-arrow{display:flex;color:var(--ui-primary);opacity:.7}
.menu-arrow .mg-icon{width:18px;height:18px}
:root .menu-play .menu-tile{min-height:144px;padding:24px}
:root .menu-play .menu-tile strong{font-size:22px}
:root .menu-play .menu-tile small{font-size:14px}
:root .menu-play .menu-resume{background:var(--ui-primary);color:var(--ui-on-primary);border-color:transparent}
:root .menu-resume :is(.icon,.menu-arrow){background:transparent;color:var(--ui-on-primary)}
:root .menu-resume small{color:var(--ui-on-primary);opacity:.85}
:root .menu-play .menu-new{background:var(--ui-container);border-color:transparent}
:root .menu-play .menu-tile:hover{box-shadow:inset 0 0 0 100px #ffffff12,var(--ui-shadow-raised)}
:root .menu-sections{gap:28px}
:root .menu-section{gap:12px}
:root .menu-section-title{font:650 14px/1.3 var(--ui-font);letter-spacing:.2px;margin:0}
:root .menu-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
:root .menu-help .menu-tile,:root .admin-menu-section .menu-tile{min-height:88px;background:transparent;box-shadow:none}
:root .admin-menu-section{border-top:1px solid var(--ui-border);padding-top:24px}
:root .admin-menu-section .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
:root .fixed-game :is(.tool-panel,.side-panel){border:1px solid var(--ui-border);background:var(--ui-surface);box-shadow:var(--ui-shadow);border-radius:12px}
:root .fixed-game .side-tabs{background:var(--ui-container);border-color:var(--ui-border)}
:root .fixed-game .side-tabs button{font-family:var(--ui-font);color:var(--ui-muted);letter-spacing:0;text-transform:none}
:root .fixed-game .side-tabs button.active{background:var(--ui-surface);color:var(--ui-primary);box-shadow:inset 0 -3px var(--ui-primary)}
:root .fixed-game .suspect-dossier{border-color:var(--ui-border);border-width:1px;box-shadow:none;border-radius:10px;background:var(--ui-surface);transform:none}
:root .fixed-game .suspect-dossier.active{border-color:var(--ui-primary);box-shadow:inset 3px 0 var(--ui-primary)}
:root .fixed-game .suspect.dossier-person{background:transparent;border-radius:10px;color:var(--ui-text)}
:root .fixed-game .person-copy strong{color:var(--ui-text)}
:root .pause-card{border:1px solid var(--ui-border);border-radius:20px;background:var(--ui-surface);color:var(--ui-text);box-shadow:var(--ui-shadow-raised)}
:root .pause-help{color:var(--ui-muted)}
:root .pause-time{color:var(--ui-primary)}
:root .pause-card .btn.ghost{background:var(--ui-container);color:var(--ui-primary)}
@media(max-width:900px){
  :root .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root .menu-play .menu-tile{padding:20px}
  :root .tool-button small{font-size:10px}
  :root .tool-button em{font-size:8px}
  :root .tool-wide{font-size:10px}
}
@media(max-width:560px){
  :root .menu-page{padding:24px 16px 32px}
  :root .menu-head{align-items:flex-start;gap:10px}
  :root .menu-head h1{font-size:28px}
  :root .menu-head p{font-size:13px}
  :root .online-summary{padding:8px 10px;font-size:11px}
  .menu-play{grid-template-columns:1fr;gap:12px;margin-bottom:28px}
  :root .menu-play .menu-tile{min-height:112px;padding:20px}
  :root .menu-play .menu-tile strong{font-size:20px}
  :root .menu-grid,:root .admin-menu-section .menu-grid{grid-template-columns:1fr;gap:10px}
  :root .menu-tile{min-height:88px;padding:16px}
  :root .menu-sections{gap:24px}
  :root .btn.small{min-height:40px}
  :root .game-header .btn.header-icon{width:34px;min-width:34px;height:34px;min-height:34px;padding:6px;flex:0 0 34px}
  :root .game-header .nav-actions{gap:3px}
  :root .tool-button small{font-size:10px}
  :root .tool-wide{font-size:10px}
}
@media(max-width:480px){:root .fixed-game .tool-panel{border-radius:10px}}
html[data-large-text="true"] :is(.btn,.menu-tile strong,.field,.comm-field){font-size:1rem}
html[data-large-text="true"] .menu-tile small{font-size:.9rem}
@media(prefers-reduced-motion:reduce){:root :is(.btn,.menu-tile,.tab-btn,.sort-btn,.tool-button,.tool-wide){transition:none}:root .btn[aria-busy="true"]::after{animation:none}}
html[data-animations="false"] :is(.btn,.menu-tile,.tab-btn,.sort-btn,.tool-button,.tool-wide){transition:none}
html[data-animations="false"] .btn[aria-busy="true"]::after{animation:none}
:root .setting-option{border:1px solid var(--ui-border);background:var(--ui-surface);padding:16px;gap:14px}
:root .setting-option+ .setting-option{margin-top:10px}
:root .setting-option strong{font:650 15px/1.4 var(--ui-font);color:var(--ui-text)}
:root .setting-option small{color:var(--ui-muted)}
:root :is(.filter-toggle,.sort-label,.level-section-count,.field label,.table-filter,.help-page .help-step p,.help-step figcaption){font-family:var(--ui-font)}
:root .field label{letter-spacing:.3px;text-transform:none}
:root :is(.mg-editor-header,.mg-editor-findings,.mg-editor-advanced){border:1px solid var(--ui-border);background:var(--ui-surface);color:var(--ui-text);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow)}
:root .mg-editor-steps{background:transparent}
:root .mg-editor-steps button{background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:var(--ui-control-radius);min-height:44px}
:root .mg-editor-steps button.active{background:var(--ui-container);border-color:var(--ui-primary);box-shadow:inset 0 -3px var(--ui-primary)}
:root .mg-editor-steps button>span{background:var(--ui-container);color:var(--ui-primary)}
:root .mg-editor-steps button i.done{color:var(--ui-primary)}
:root .collection-dialog,:root .profile-trophy-showcase{--collection-bg:var(--ui-surface);--collection-ink:var(--ui-text);--collection-muted:var(--ui-muted);--collection-soft:var(--ui-container)}
:root :is(.collection-dialog,.trophy-card,.trophy-summary,.trophy-detail,.trophy-featured){border-color:var(--ui-border);border-radius:var(--ui-radius)}
:root .collection-dialog{box-shadow:var(--ui-shadow-raised)}
:root .trophy-card.is-unlocked{border-color:var(--ui-primary)}
:root .trophy-status{font-family:var(--ui-font)}
@media(max-width:560px){:root .comm-dialog{border:0;border-radius:0;outline:none}:root .comm-body{min-width:0}:root .comm-field input{min-width:0}}

:root .game-header .case-title strong{color:var(--ui-text)}
:root .fixed-game .panel-content{background:var(--ui-surface)}
:root .fixed-game .tool-active-help{background:var(--ui-container);color:var(--ui-muted);border-color:var(--ui-border)}
:root .tool-secondary{gap:8px}
@media(min-width:901px){:root .tool-secondary{display:grid}}
:root .tool-secondary .tool-wide{width:100%}