/* Detective notebook / tabletop. All design tokens are scoped to the game. */ #mg-app,#mg-notice{--mg-color-paper:#fff5dc;--mg-color-canvas:#5c3522;--mg-color-ink:#253e34;--mg-color-deep-green:#174c3b;--mg-color-muted:#65746d;--mg-color-border:#ded5c3;--mg-color-gold:#c99a32;--mg-color-danger:#a14438;--mg-color-blue:#235d80;--mg-shadow-panel:0 3px 12px #493e2510,0 1px 0 #fff inset;--mg-shadow-stage:0 10px 28px #284c3214,0 2px 0 #c9b681;--mg-radius-panel:8px;--mg-deep-green-dark:#0a3027;--mg-shadow-paper:2px 3px 0 #c3a06a,0 5px 9px #24150740;--mg-shadow-board:0 3px 0 #896027,0 8px 15px #21160d55;--mg-green:var(--mg-color-deep-green);--mg-paper:var(--mg-color-paper);font-family:system-ui,'Yu Gothic','Meiryo',sans-serif;font-synthesis:none;color:var(--mg-color-ink)} body.mg-page{margin:0;min-height:100vh} #mg-app,#mg-app *,#mg-app *::before,#mg-app *::after,#mg-notice{box-sizing:border-box} #mg-app{max-width:1600px;margin:auto;padding:14px 12px 24px;overflow-wrap:anywhere;line-height:1.6} #mg-app [hidden]{display:none!important} #mg-app :is(button,input,select){font:inherit}#mg-app button{cursor:pointer;touch-action:manipulation}#mg-app button:disabled{opacity:.5;cursor:not-allowed} #mg-app :is(button,input,select,summary,[tabindex]):focus-visible{outline:3px solid var(--mg-color-blue);outline-offset:4px} #mg-app :is(button,summary,[tabindex]){scroll-margin-block:20px} #mg-app :is(h1,h2,h3){color:var(--mg-green);line-height:1.4;letter-spacing:.015em} #mg-app h2{font-size:20px;margin:0 0 16px}#mg-app h3{font-size:15px}#mg-app p{line-height:1.75} #mg-app .mg-muted{font-size:13px;color:var(--mg-color-muted);line-height:1.65} #mg-app .mg-kicker{font-size:11px;font-weight:750;letter-spacing:.13em;color:var(--mg-color-muted)} /* Paper surfaces and case-file entry screens. */ #mg-app .mg-card{min-width:0;padding:24px;border:1px solid var(--mg-color-border);border-radius:3px 9px 3px 5px;background:linear-gradient(120deg,#fffaf0,#fff0cf);box-shadow:0 3px 0 #ae8650,0 6px 12px #20140844} #mg-app .mg-welcome{position:relative;max-width:780px;margin:48px auto;padding:48px 32px 56px;text-align:center;background:linear-gradient(90deg,transparent 24px,#bc675e23 24px,#bc675e23 25px,transparent 25px),var(--mg-paper);border:1px solid var(--mg-color-border);border-top:5px solid var(--mg-green);border-radius:8px;box-shadow:var(--mg-shadow-stage)} #mg-app .mg-welcome::before{content:'探偵ノート';display:block;width:max-content;margin:0 auto 28px;padding:5px 15px;color:var(--mg-green);border:1px solid var(--mg-color-gold);font-size:11px;font-weight:800;letter-spacing:.2em;transform:rotate(-3deg)} #mg-app .mg-welcome h1{font-size:clamp(30px,4.5vw,50px);letter-spacing:.08em;margin:16px 0}#mg-app .mg-welcome .mg-button{min-width:240px;margin-top:24px} #mg-app .mg-hero{position:relative;width:44px;height:44px;margin:24px auto;border:3px solid var(--mg-green);border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff,#dfebdf)} #mg-app .mg-hero::after{content:'';position:absolute;width:22px;height:7px;right:-18px;bottom:-7px;background:var(--mg-green);border-radius:3px;transform:rotate(45deg)} #mg-app .mg-entry{max-width:600px;margin:40px auto;border-top:4px solid var(--mg-green)}#mg-app .mg-entry h1{font-size:26px;margin:6px 0 20px} #mg-app .mg-entry>.mg-button,#mg-app .mg-entry form>.mg-button{width:100%} #mg-app form{display:grid;gap:10px;margin-top:20px}#mg-app label{font-size:14px;font-weight:700} #mg-app :is(input,select){width:100%;min-width:0;min-height:48px;padding:12px;border:1px solid #aaa994;border-radius:6px;background:#fffefa;color:var(--mg-color-ink)} #mg-app hr{border:0;border-top:1px solid var(--mg-color-border);margin:24px 0} #mg-app .mg-room-code{text-align:center;font-size:clamp(28px,6vw,40px);letter-spacing:.16em;font-weight:800;color:var(--mg-green);padding:16px;background:#f2eedf;border:1px dashed #b7a87c;border-radius:5px;font-variant-numeric:tabular-nums} #mg-app .mg-room-speed,#mg-app .mg-round-progress{font-weight:700;color:var(--mg-green)} #mg-app .mg-players{list-style:none;padding:0;margin:18px 0;display:grid;gap:8px} #mg-app .mg-players li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:2px 10px;padding:10px 12px;background:#f5f2e8;border:1px solid #e8e0d0;border-radius:5px;min-width:0} #mg-app .mg-players .mg-dot{align-self:center}#mg-app .mg-players small{grid-column:2;font-size:11px;color:var(--mg-color-muted);overflow-wrap:anywhere} #mg-app .mg-dot{width:12px;height:12px;flex:none;border-radius:50%;box-shadow:0 1px 0 #fff9 inset,0 1px 2px #0002} /* Primary / secondary / final buttons. */ #mg-app .mg-button{min-height:48px;padding:12px 20px;margin:10px 0;border:1px solid #b49753;border-radius:6px;background:var(--mg-green);color:#fffdf2;font-weight:750;box-shadow:0 2px 0 #102f27;transition:background .15s,box-shadow .15s,transform .15s} #mg-app .mg-button:hover:not(:disabled){background:#24604c;box-shadow:0 3px 0 #102f27,0 3px 10px #174c3b24;transform:translateY(-1px)} #mg-app .mg-button:active:not(:disabled){transform:translateY(1px);box-shadow:none} #mg-app .mg-secondary,#mg-app .mg-text,#mg-app .mg-rematch-actions>button:last-child{background:#faf7ec;color:var(--mg-green);border-color:#91a18d;box-shadow:0 2px 0 #ded8c6} #mg-app :is(.mg-secondary,.mg-text):hover:not(:disabled),#mg-app .mg-rematch-actions>button:last-child:hover:not(:disabled){background:#edf0e3;color:var(--mg-green);box-shadow:0 2px 0 #c6cfb9} #mg-app .mg-final-button,#mg-app .mg-final-submit{background:var(--mg-color-danger);border-color:#bb8270;box-shadow:0 2px 0 #6e3129} #mg-app :is(.mg-final-button,.mg-final-submit):hover:not(:disabled){background:#8d392f;box-shadow:0 3px 0 #6e3129} #mg-app .mg-danger-text{color:var(--mg-color-danger);border-color:#d1aca0;background:#fff8f0} #mg-app .mg-button:disabled{transform:none;box-shadow:none;background:#d9ddd2;color:#586257;border-color:#b9c2b4;opacity:.8} /* Case file masthead and roster are shared across both game columns. */ #mg-app .mg-stage-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,340px);grid-template-areas:'main side';gap:24px;align-items:start} #mg-app .mg-stage-layout>*,#mg-app .mg-main-panel>*{min-width:0} #mg-app .mg-main-panel{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:16px} #mg-app .mg-stage-side{grid-area:side;display:flex;flex-direction:column;gap:18px;min-width:0} #mg-app .mg-game-header{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:center;margin:0 0 8px} #mg-app .mg-case-title{position:relative;min-width:0;padding:12px;color:#402a1b} #mg-app .mg-case-title .mg-kicker{color:#705222;font-size:11px;letter-spacing:.15em} #mg-app .mg-case-title h1{color:#542419;font-family:'Yu Mincho','YuMincho',serif;font-size:clamp(28px,3.8vw,52px);font-weight:900;margin:3px 0;letter-spacing:.045em} #mg-app .mg-case-title p{font-size:12px;margin:0;font-weight:700;color:#655237} #mg-app .mg-timer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border:1px solid #ae883f;background:#fff3d8;font-size:12px;color:#3c3020;line-height:1.4} #mg-app :is(.mg-game-header,.mg-roster)>.mg-timer::before{content:'TIMER';font-weight:800;letter-spacing:.15em;font-size:14px} #mg-app :is(.mg-game-header,.mg-roster)>.mg-timer>span:first-child{font-size:10px;order:2} #mg-app .mg-timer-remaining{font-size:16px;font-weight:850;font-variant-numeric:tabular-nums} #mg-app :is(.mg-game-header,.mg-roster) .mg-timer-remaining{font-family:Georgia,'Yu Mincho',serif;font-size:clamp(22px,2.6vw,36px);line-height:1.15} #mg-app .mg-timer.mg-timer-urgent{background:#ffe4cc;color:#9d3023;border-color:#943c28} #mg-app .mg-roster{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;align-items:stretch;margin-bottom:14px} #mg-app .mg-game-status{min-width:0;position:relative;display:flex;align-items:center;gap:6px;padding:22px 14px 20px 27%;min-height:110px;background:transparent;color:#263b2f} #mg-app .mg-status-info{min-width:0;flex:1;display:grid;gap:12px} #mg-app .mg-turn-identity{display:flex;align-items:center;font-size:17px;font-weight:850;min-width:0} #mg-app .mg-turn-identity .mg-dot{position:absolute;left:15%;top:42%;width:22px;height:27px;transform:translate(-50%,-50%);border-radius:50% 50% 30% 30%;border:1px solid #fff4bd;box-shadow:inset 3px 0 4px #fff7,1px 2px 2px #0005} #mg-app .mg-status-title{display:block;font-size:10px;line-height:1.3;color:#fff4d4;letter-spacing:0;white-space:normal} #mg-app .mg-status-instruction,#mg-app .mg-status-location{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #mg-app .mg-status-action{position:relative;flex:none;min-height:44px;padding:4px;border:1px solid #bc9b53;border-radius:3px;background:#fff0cd;color:#174c3b;font-size:10px;cursor:pointer} #mg-app .mg-status-action:focus-visible{opacity:1;background:#fff3d8;color:#174c3b;outline:3px solid #235d80} #mg-app .mg-turn-identity .mg-player-name{position:relative;z-index:1} #mg-app .mg-team{min-width:0;padding:25px 24px 23px;background:transparent} #mg-app .mg-team>h2{font-size:10px;line-height:1.2;margin:0 0 6px;color:#fff4d4} #mg-app .mg-compact-players{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;list-style:none;margin:0;padding:0} #mg-app .mg-compact-players li{min-width:0;display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:5px 2px;border:1px solid transparent;border-radius:4px;background:#fff9e766;font-size:12px} #mg-app .mg-player-name{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #mg-app .mg-compact-players .mg-player-name{flex:1;font-size:clamp(11px,1.04vw,14px);color:#263d34;font-weight:750} #mg-app .mg-compact-players .mg-dot{position:relative;width:12px;height:18px;border-radius:45% 45% 25% 25%;box-shadow:inset 2px 0 3px #fff7,0 1px 2px #30201088} #mg-app .mg-compact-players small{font-size:9px;color:#655637;flex-basis:100%} #mg-app .mg-compact-players .mg-current-player{border-color:#b44831;background:#fff0d5;box-shadow:inset 0 -2px #d5ac51;font-weight:800} #mg-app .mg-action-area{position:relative;min-width:0;min-height:220px;padding:0 14px 16px;border:9px solid #164836;outline:1px solid #d2a94c;outline-offset:-4px;border-radius:4px;background:linear-gradient(120deg,#fff9e9,#fff1d2);box-shadow:var(--mg-shadow-board)} #mg-app .mg-stage-caption{display:flex;align-items:center;gap:8px;min-height:30px;padding:5px 12px;margin:0 -14px 8px;border-bottom:1px solid #c5a264;background:var(--mg-deep-green-dark);color:#fff0cc;font-size:10px;letter-spacing:.1em;font-weight:800} #mg-app .mg-stage-caption::before{content:'✦';color:#af792c} #mg-app .mg-action-area h2{font-family:'Yu Mincho','YuMincho',serif;font-size:clamp(22px,2.65vw,36px);font-weight:900;color:#302d21} #mg-app .mg-action-area>.mg-card{border:0;border-radius:0;box-shadow:none;padding:0;background:transparent;margin:0} #mg-app .mg-controls{align-self:start;max-width:100%;margin:0;padding:0;background:#f5e6c7;border:1px solid #a98347;box-shadow:0 2px 3px #21170f44;border-radius:2px}#mg-app .mg-controls>summary{min-height:44px;padding:10px 16px;cursor:pointer;color:#3c4934;font-size:12px;font-weight:750}#mg-app .mg-controls[open]{align-self:stretch;padding:0 16px 12px}#mg-app .mg-controls[open]>summary{margin-inline:-16px;border-bottom:1px solid #c7ad7a}#mg-app .mg-controls>h2{font-size:15px}#mg-app .mg-controls>p{font-size:12px;color:var(--mg-color-muted)} #mg-app .mg-away{border-left:4px solid #b98a41}#mg-app .mg-help{margin:14px 0 0}#mg-app .mg-help>summary{min-height:44px;padding:10px 0;cursor:pointer;font-size:13px;font-weight:700;color:var(--mg-green)} #mg-app .mg-stage-tools:empty{display:none} /* The private hand is supporting evidence, not an additional action stage. */ #mg-app .mg-hand-tray{min-width:0;box-shadow:none} #mg-app .mg-hand-tray-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:12px} #mg-app .mg-hand-tray-heading h2{margin:0;font-size:16px;color:#173e32}#mg-app .mg-hand-tray-heading>span{padding:2px 12px;background:#174c3b;color:#fff0c9;border:1px solid #c09a53;font-size:12px} #mg-app .mg-hand-carousel{display:flex;gap:10px;list-style:none;margin:0;padding:3px 3px 8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scroll-snap-type:x proximity} #mg-app .mg-tray-card{flex:0 0 calc((100% - 50px)/6);min-width:0;scroll-snap-align:start;font-size:12px;font-weight:700} /* Complete cards: no crop, tint or filter. Semantic text doubles as fallback. */ #mg-app .mg-asset{object-fit:contain;object-position:center;max-width:100%;pointer-events:none}#mg-app .mg-asset-logo{display:block;width:min(100%,420px);max-height:160px;margin:0 auto 18px} #mg-app .mg-complete-card{position:relative;padding:5px;min-width:0;border:1px solid #d9cfb7;border-radius:6px;background:#f4eedf;color:var(--mg-color-ink);text-align:center} #mg-app .mg-complete-card>.mg-asset{display:block;width:100%;height:auto;max-width:200px;max-height:none;aspect-ratio:3 / 4;object-fit:contain;border-radius:0;margin:0 auto;user-select:none} #mg-app .mg-card-loaded{background:transparent;border-color:transparent;box-shadow:none;padding:3px} #mg-app .mg-card-loaded>.mg-card-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} #mg-app button.mg-card-loaded{transition:transform .15s,background .15s,box-shadow .15s;box-shadow:0 2px 6px #46381e12;border-radius:5px} #mg-app button.mg-card-loaded:hover:not(:disabled){background:#f9f0ce;box-shadow:0 4px 10px #433b2529;transform:translateY(-3px);outline:1px solid #a78944;outline-offset:1px} #mg-app button.mg-card-loaded:focus-visible{outline:3px solid var(--mg-color-blue);outline-offset:3px;background:#faf1d2}#mg-app button.mg-card-loaded:active:not(:disabled){transform:translateY(0)} #mg-app .mg-inference-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}#mg-app .mg-inference-options>.mg-button{min-width:0;min-height:58px;margin:0;padding:3px} #mg-app .mg-confirmation-cards,#mg-app .mg-solution-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:760px;margin:20px auto} #mg-app .mg-evidence-label,#mg-app .mg-solution-card>small{display:block;font-size:11px;font-weight:800;color:#6d6246;letter-spacing:.07em;margin-top:8px;text-align:center} #mg-app .mg-inference-confirm{padding:12px 16px;border-left:3px solid var(--mg-color-gold);background:#f6f0dc;white-space:pre-line;font-size:14px;font-weight:700;line-height:1.8} #mg-app .mg-inference>.mg-button{margin-right:10px}#mg-app .mg-inference>.mg-button:last-child{margin-right:0} #mg-app .mg-inference-call{border-left:3px solid #b2a272;padding:10px 14px;margin:18px 0;background:#f5f0e3;font-size:13px}#mg-app .mg-inference-call>h2{font-size:16px;margin-bottom:8px}#mg-app .mg-inference-call p{margin:0} #mg-app .mg-selection-wait,#mg-app .mg-inference-outcome{padding:24px 16px;background:#eef2e6;border:1px dashed #aeb79c;border-radius:5px;font-weight:700;text-align:center} #mg-app .mg-result{text-align:center}#mg-app .mg-revealed-card{max-width:246px;margin:24px auto;padding:18px;font-weight:700;font-size:20px;background:#f5efd9;border:1px solid #c4ad6e;border-radius:7px} #mg-app .mg-revealed-card>.mg-asset{max-width:240px}#mg-app .mg-result>.mg-muted{font-size:12px}#mg-app .mg-result>.mg-button{min-width:180px} /* One uninterrupted movement reveal -> effect -> next-action column. */ #mg-app .mg-movement-reveal{display:grid;justify-items:center;gap:8px;max-width:320px;margin:0 auto;text-align:center} #mg-app .mg-current-movement{width:240px;max-width:100%;margin:0;padding:0;min-height:0;box-shadow:0 5px 14px #45361a1a}#mg-app .mg-current-movement>.mg-asset{max-width:240px} #mg-app .mg-movement-name{font-size:20px;margin:0;line-height:1.25}#mg-app .mg-movement-effect{font-size:14px;margin:0;line-height:1.45} #mg-app .mg-movement-next{width:100%;min-height:52px;margin:4px 0 0;font-weight:800} #mg-app .mg-movement>h2{text-align:center;margin:0 0 12px;scroll-margin-top:160px}#mg-app .mg-movement>.mg-muted{font-size:12px;margin:10px 0 0;text-align:center}#mg-app .mg-movement-status{font-weight:700} /* Map coordinates and hit geometry stay in constants.js. Decorative shells never change them. */ #mg-app .mg-map-panel>h2{margin-bottom:6px}#mg-app .mg-map-panel>h2+.mg-muted{margin:0 0 12px} #mg-app .mg-map-choice{padding:9px 12px;margin:12px 0 6px;background:#edf1df;border-left:3px solid #a28943;font-size:13px;font-weight:750}#mg-app .mg-map-self{font-size:12px;font-weight:650;margin:6px 0 12px} #mg-app .mg-town-map{position:relative;isolation:isolate;width:100%;aspect-ratio:4 / 3;min-height:0;margin-top:10px;border:0;border-radius:0;box-shadow:0 0 0 2px #49634a,0 0 0 6px #f0ead6,0 5px 14px #29413220;background:radial-gradient(ellipse at 20% 22%,#cfdfae 0 12%,transparent 13%),radial-gradient(ellipse at 78% 29%,#e6dfb6 0 15%,transparent 16%),linear-gradient(155deg,#e8edd4 65%,#c2dedd 66% 79%,#dbe7bf 80%)} #mg-app .mg-town-map>.mg-asset-map{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:0;z-index:0} #mg-app .mg-town-map>.mg-location{position:absolute;transform:translate(-50%,-50%);min-width:44px;min-height:44px;max-width:none;padding:0;border:0;border-radius:9px;background:transparent;box-shadow:none;display:block;opacity:1;z-index:1;outline:none} #mg-app .mg-town-map>.mg-location:focus-visible{outline:3px solid var(--mg-color-blue);outline-offset:2px;box-shadow:0 0 0 4px #fff} /* Candidates use only readable labels and a checkmark: no artwork haze. */ #mg-app .mg-map-label{position:absolute;transform:translate(-50%,-50%) rotate(var(--mg-label-angle,-1deg));z-index:3;display:flex;align-items:center;gap:3px;padding:7px 12px 7px 7px;border:0;border-radius:0;color:#263b2f;background:transparent;font-size:16px;line-height:1.2;font-weight:850;white-space:nowrap;cursor:pointer} #mg-app .mg-location-icon{font-size:.85em;line-height:1;min-width:18px;margin-right:3px;text-align:center;pointer-events:none}#mg-app .mg-location-name{pointer-events:none} #mg-app .mg-location-tag[data-location-id="school"],#mg-app .mg-location-tag[data-location-id="shops"],#mg-app .mg-location-tag[data-location-id="river"]{--mg-label-angle:1deg} #mg-app .mg-map-label.mg-selectable{color:#104d30;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;filter:drop-shadow(0 1px 1px #123d3266)} #mg-app .mg-map-label.mg-selectable::before{content:'✓';pointer-events:none;position:absolute;right:-2px;top:-5px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid #fff0b3;background:#174c3b;font-weight:900;color:#fff0b3;font-size:11px}#mg-app .mg-map-label.mg-unavailable{opacity:.8;cursor:default} #mg-app .mg-map-label.mg-label-current{text-decoration:none}#mg-app .mg-map-label .mg-place-choice{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #mg-app .mg-town-map>.mg-pawn{position:absolute;transform:translate(-50%,-50%);z-index:4;width:12px;height:16px;border:1px solid #fff8d9;border-radius:45% 45% 30% 30%;background-image:linear-gradient(100deg,#fff7,transparent 45%,#0003);box-shadow:0 1px 0 #44341e,1px 3px 3px #273f3566;pointer-events:none;transition:left .55s ease,top .55s ease} #mg-app .mg-pawn::before{content:"";position:absolute;left:15%;top:-5px;width:70%;height:8px;border:1px solid #fff9df;border-radius:50%;background:inherit;box-shadow:inset 1px 0 2px #fff7} #mg-app .mg-pawn:focus-visible{outline:2px solid #fff;outline-offset:3px} #mg-app .mg-town-map>.mg-pawn-self{box-shadow:0 0 0 1px white,0 0 0 2px #173e37}#mg-app .mg-withdrawn{opacity:.45} #mg-app .mg-map-panel>.mg-map-self,#mg-app .mg-map-panel>.mg-muted:last-child{display:inline-block;margin:10px 8px 0 0;font-size:11px} /* Personal notebook and investigation records are supporting paper surfaces. */ #mg-app .mg-notebook-shell{--mg-notebook-paper:url('../assets/optimized/ui/detective/deduction-note-pc-1086.webp');} #mg-app .mg-notes{position:relative;min-width:0;display:block;overflow:visible;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} #mg-app .mg-notebook-page{position:absolute;left:15%;right:11%;top:26%;bottom:9%;display:flex;flex-direction:column;min-height:0;min-width:0;padding:4px;background:#fff7e955} #mg-app .mg-sheet-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;padding-right:4px} #mg-app .mg-notes>h2{position:absolute;left:24%;right:13%;top:10%;margin:0;font-size:23px;font-weight:900;font-family:"Yu Mincho",serif}#mg-app .mg-sheet-legend{display:grid;grid-template-columns:1fr 1fr;gap:3px 6px;margin:0;font-size:10px;line-height:1.5;color:var(--mg-color-muted)} #mg-app .mg-legend-item{display:flex;gap:6px;align-items:baseline}#mg-app .mg-sheet-group{margin-top:0;border-top:0} #mg-app .mg-sheet-group h3{padding:4px;background:#dfcda733;font-size:12px;margin:0 0 4px}#mg-app .mg-sheet-list{list-style:none;margin:0;padding:0} #mg-app .mg-sheet-row{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:3px;min-height:48px;padding:2px 0;border-bottom:1px solid #cfb888;font-size:12px;line-height:1.5} #mg-app .mg-sheet-status{display:flex;align-items:center;gap:6px;width:100%;min-width:0;min-height:44px;padding:4px;text-align:left;border:0;border-radius:4px;background:transparent;color:inherit} #mg-app .mg-sheet-status:not(:disabled):not(.mg-sheet-confirmed):hover{background:#e9eedc}#mg-app .mg-sheet-confirmed{cursor:default} #mg-app .mg-sheet-status:disabled{opacity:1;cursor:default} #mg-app .mg-sheet-mark{flex:0 0 22px;text-align:center;font-size:21px;line-height:1.2}#mg-app .mg-sheet-name{flex:1;min-width:0}#mg-app .mg-sheet-label{max-width:38%;white-space:pre-line;color:var(--mg-color-muted);font-size:9px} #mg-app .mg-own-mark,#mg-app .mg-sheet-own .mg-sheet-label{color:#ad3035;font-weight:850}#mg-app .mg-shown-mark{color:#222;font-weight:850}#mg-app .mg-excluded-mark{color:#645575;font-weight:850}#mg-app .mg-suspected-mark{color:#775210;font-weight:850} #mg-app .mg-sheet-own{background:#fbefea}#mg-app .mg-sheet-shown{background:#edf0e8}#mg-app .mg-sheet-excluded{background:#f1edf4}#mg-app .mg-sheet-suspected{background:#fff3d4} #mg-app .mg-sheet-memo{min-height:44px;padding:5px;border:1px solid #c8c2af;border-radius:4px;background:#fcf9f0;color:var(--mg-green);font-size:11px}#mg-app .mg-sheet-memo[aria-expanded=true]{background:#e4ebd7;border-color:#7a8d63} #mg-app .mg-owner-summary{grid-column:1/-1;margin:0 4px;font-size:11px;color:#59694f;line-height:1.5}#mg-app .mg-owner-editor{grid-column:1/-1;min-width:0;padding:4px 8px 12px;border:1px dashed #bcb89b;border-radius:4px;background:#fffdf5} #mg-app .mg-owner-tags{display:flex;flex-wrap:wrap;gap:7px}#mg-app .mg-owner-tag{max-width:100%;min-height:44px;padding:8px 10px;border:1px solid #a8b299;border-radius:4px;background:#faf8ec;color:#314e36;font-size:12px;overflow-wrap:anywhere} #mg-app .mg-owner-tag[aria-pressed=true]{background:#e3ecd5;border:2px solid #547246;padding:7px 9px}#mg-app .mg-owner-tag[aria-pressed=true]::before{content:'✓ ';font-weight:800} #mg-app .mg-log>h2{font-size:20px;margin:-16px -16px 8px;padding:8px 14px;background:#174c3b;color:#fff3d1;border:1px solid #b9924a;font-family:"Yu Mincho",serif}#mg-app .mg-log{min-width:0;border-top:3px solid #a79c79;position:relative;padding:16px;border-radius:1px 6px 2px 4px;box-shadow:var(--mg-shadow-paper);background:repeating-linear-gradient(0deg,#fff5df 0 28px,#e5d4b4 29px)} #mg-app .mg-log-tabs{display:flex;gap:6px;margin:12px 0 0;border-bottom:1px solid #aaa788}#mg-app .mg-log-tab{flex:1;min-width:0;min-height:48px;padding:9px 6px;border:1px solid #c8c1ac;border-bottom:0;border-radius:5px 5px 0 0;background:#f2eedf;color:var(--mg-green);font-size:12px;font-weight:750} #mg-app .mg-log-tab[aria-selected=true]{background:var(--mg-green);color:#fffdf2;border-color:var(--mg-green)} #mg-app .mg-public-log,#mg-app .mg-secret-log{list-style:none;max-height:180px;min-height:70px;overflow:auto;overflow-anchor:none;overscroll-behavior:contain;scrollbar-gutter:stable;margin:0;padding:0;background:#faf7ed;border:1px solid #ded5c3;border-top:0;font-size:12px;line-height:1.7} #mg-app .mg-secret-log{background:#f1f5f5;border-color:#c8d5d4}#mg-app :is(.mg-public-log,.mg-secret-log) li{display:flex;align-items:baseline;gap:9px;padding:12px 10px;border-bottom:1px solid #ded5c380}#mg-app :is(.mg-public-log,.mg-secret-log) li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#a34b3b;align-self:baseline;margin-top:6px}#mg-app .mg-secret-log li::before{background:#35635c}#mg-app .mg-log-time{flex:none;font-size:11px;font-variant-numeric:tabular-nums;color:#637063} #mg-app .mg-sheet-tabs{position:absolute;left:15%;right:11%;top:18.8%;height:6%;display:flex;gap:4%;margin:0;padding:0;z-index:1} #mg-app .mg-sheet-tab{flex:1;min-width:0;min-height:44px;border:1px solid transparent;border-radius:12px;background:transparent;color:white;font-weight:800;padding:0;font-size:13px} #mg-app .mg-sheet-tab[aria-selected=true]{border-color:#fff5b0;box-shadow:inset 0 -3px 0 #ebc66a;text-shadow:0 1px #0008} #mg-app .mg-sheet-group[role=tabpanel]{padding-top:4px} #mg-app .mg-action-area .mg-stage-title{position:relative;padding:9px 14px;margin:0 0 8px;background:linear-gradient(110deg,#fffbed,#f4dfb8);border:1px solid #c2a15e;border-left:4px solid #c09a47;box-shadow:2px 2px 0 #dec390,0 4px 4px #65442020;text-align:center} #mg-app .mg-action-area .mg-stage-title::after{content:'✧';font-family:serif;color:#a77a2c;font-size:18px;position:absolute;right:7px;top:4px} #mg-app .mg-turn-identity .mg-dot::before,#mg-app .mg-compact-players .mg-dot::before{content:'';position:absolute;left:15%;top:-4px;width:70%;height:45%;border-radius:50%;background:inherit;border:1px solid #ffffff99;box-shadow:inset 2px 0 2px #fff7} /* Desktop stage shares a calm footprint; content may grow instead of clipping. */ @media(min-width:701px){ #mg-app .mg-tray-card{max-width:130px} #mg-app .mg-action-area .mg-stage-title::after{content:none} #mg-app .mg-stage-caption{margin:0 0 4px;padding:0;border:0;min-height:20px;background:transparent;color:#24513d;font-size:9px} #mg-app .mg-town-map{max-width:500px;margin:10px auto 0;--mg-pawn-spacing:1.5px} #mg-app .mg-inference-options>.mg-complete-card>.mg-asset{max-width:130px} #mg-app .mg-action-area h2{font-size:28px} } /* Hand review, final answer and round-end share the file language. */ #mg-app .mg-hand-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}#mg-app .mg-hand-group{min-width:0;padding:8px;background:#f5eedf;border-top:2px solid #b58961;border-radius:4px} #mg-app .mg-category-location{border-color:#7b9a69;background:#edf1e3}#mg-app .mg-category-action{border-color:#7e9ea8;background:#ecf1f0}#mg-app .mg-hand-group h3{margin:4px 0 10px} #mg-app .mg-hand-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}#mg-app .mg-hand-card{font-size:13px;font-weight:700} #mg-app .mg-review-footer{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:12px}#mg-app .mg-review-progress{font-weight:750;color:var(--mg-green)}#mg-app .mg-confirm-hand{min-width:140px} #mg-app .mg-turn-choices{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}#mg-app .mg-turn-choices button{flex:1;min-width:110px;min-height:72px;margin:0;font-size:17px} #mg-app .mg-final-warning,#mg-app .mg-cooldown{padding:12px 14px;background:#fcf0e5;border-left:3px solid #b27057;font-size:13px;line-height:1.7}#mg-app .mg-final-selection{font-weight:700;font-size:14px} #mg-app .mg-final-result{padding:12px;border-left:3px solid #a7835f;background:#f6f0e2}#mg-app .mg-final-submit{min-height:56px;width:100%} #mg-app .mg-victory{text-align:center}#mg-app .mg-victory>.mg-kicker{display:inline-block;padding:5px 16px;border:1px solid #ac8633;color:#745819;transform:rotate(-3deg);margin:12px 0 20px} #mg-app .mg-victory h2{font-size:clamp(28px,4vw,38px)}#mg-app .mg-winner{font-weight:750} #mg-app .mg-solution-card{display:flex;flex-direction:column;justify-content:start;font-size:15px;font-weight:700}#mg-app .mg-solution-card.mg-card-loaded>strong{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #mg-app .mg-rematch{margin-top:20px}#mg-app .mg-rematch-actions{display:flex;flex-wrap:wrap;gap:16px}#mg-app .mg-rematch-actions>.mg-button{margin:0;flex:1;min-width:180px} #mg-app .mg-sheet-dialog .mg-notes::before,#mg-app .mg-sheet-dialog .mg-notes::after{display:none} /* Native dialogs retain focus trapping, Escape and focus return in View. */ #mg-app .mg-sheet-peek,#mg-app .mg-log-peek{display:none} #mg-app .mg-sheet-dialog{width:min(96vw,560px);height:88dvh;max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:12px;border:2px solid var(--mg-green);border-top:5px solid var(--mg-green);border-radius:8px;background:var(--mg-paper);color:var(--mg-color-ink);box-shadow:0 16px 50px #183c3555} #mg-app .mg-sheet-dialog[open]{display:flex;flex-direction:column;gap:8px;overflow:hidden}#mg-app .mg-sheet-dialog::backdrop{background:rgb(29 45 35 / .58)} #mg-app .mg-sheet-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;border-bottom:1px solid var(--mg-color-border);padding-bottom:6px} #mg-app .mg-sheet-dialog h2{font-size:20px;margin:0}#mg-app .mg-sheet-dialog-header button{margin:0;min-height:44px;padding:8px 14px} #mg-app .mg-sheet-dialog>.mg-muted{font-size:12px;line-height:1.45;margin:0;flex:none}#mg-app .mg-sheet-dialog>.mg-timer{padding:6px 8px;font-size:12px;line-height:1.4;flex:none}#mg-app .mg-sheet-dialog>.mg-timer>span:first-child{flex:1;min-width:0} #mg-app .mg-sheet-dialog .mg-notes,#mg-app .mg-sheet-dialog .mg-log{flex:1;min-width:0;min-height:0;max-height:none;overflow:hidden;overscroll-behavior:contain;margin:0;padding:8px;border:0;box-shadow:none} #mg-app .mg-sheet-dialog .mg-notes>.mg-kicker,#mg-app .mg-sheet-dialog .mg-notes>h2{display:none}#mg-app .mg-sheet-dialog .mg-sheet-legend{margin:0 0 6px;gap:3px 6px;line-height:1.4}#mg-app .mg-sheet-dialog .mg-notes>.mg-muted{font-size:11px;line-height:1.4;margin:6px 0}#mg-app .mg-sheet-dialog .mg-sheet-group h3{margin:8px 0 4px} #mg-app .mg-log-dialog :is(.mg-public-log,.mg-secret-log){max-height:60dvh}#mg-app .mg-sheet-dialog :is(button,summary,[tabindex]){scroll-margin-block:8px} #mg-app .mg-log-dialog .mg-log>h2{display:none} html:has(#mg-sheet-dialog[open]),html:has(#mg-log-dialog[open]){overflow:hidden;overscroll-behavior:none} #mg-notice{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:25;max-width:90%;width:max-content;padding:12px 20px;border:1px solid #b6a270;border-radius:6px;background:#243e32;color:#fffdf4;font-size:13px;box-shadow:0 4px 15px #172d2929}#mg-notice:empty{display:none} @media(min-width:701px) and (max-width:1000px){ #mg-app .mg-stage-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:'main' 'side'} } @media(max-width:700px){ #mg-app{padding:12px 8px 24px} #mg-app .mg-welcome{margin:22px 0;padding:30px 16px 38px}#mg-app .mg-welcome .mg-button{min-width:0;width:100%}#mg-app .mg-card{padding:16px}#mg-app .mg-entry{margin:24px auto}#mg-app .mg-entry h1{font-size:23px} #mg-app .mg-stage-layout{display:block}#mg-app .mg-main-panel{gap:12px}#mg-app .mg-stage-side{gap:16px} #mg-app .mg-game-header{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}#mg-app .mg-case-title{padding:10px 14px}#mg-app .mg-case-title h1{font-size:clamp(22px,5.5vw,34px);letter-spacing:.01em}#mg-app .mg-case-title p{font-size:10px}#mg-app .mg-case-title .mg-kicker{font-size:9px} #mg-app .mg-roster{display:flex;flex-direction:column-reverse;gap:8px;margin-bottom:12px}#mg-app .mg-team{padding:7px 8px;background:#fff3dfeb;border:1px solid #b8914b}#mg-app .mg-team>h2{font-size:11px;color:#514025} #mg-app .mg-compact-players{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}#mg-app .mg-compact-players li{padding:6px 4px;gap:4px}#mg-app .mg-compact-players .mg-player-name{font-size:10px}#mg-app .mg-compact-players .mg-dot{width:8px;height:12px} #mg-app .mg-game-status{min-height:108px;padding:20px 15px 18px 27%;border:0}#mg-app .mg-status-info{display:grid;gap:12px}#mg-app .mg-turn-identity{font-size:14px;gap:6px}#mg-app .mg-status-title{font-size:10px}#mg-app .mg-status-instruction,#mg-app .mg-status-location{display:none} #mg-app .mg-action-area{padding:0 10px 16px;border-width:4px}#mg-app .mg-action-area .mg-stage-title{padding:8px 9px;font-size:19px}#mg-app .mg-stage-caption{min-height:28px;padding:5px 8px;margin:0 -10px 10px;font-size:10px}#mg-app .mg-action-area h2{font-size:20px} #mg-app .mg-action-area[data-stage='map']{padding-inline:0} #mg-app .mg-action-area[data-stage='map']>.mg-stage-caption{margin-inline:0}#mg-app .mg-map-panel>:is(h2,p){margin-inline:8px} #mg-app .mg-movement-reveal .mg-current-movement{width:clamp(130px,32vw,180px)}#mg-app .mg-movement-name{font-size:18px}#mg-app .mg-movement-effect{font-size:12px}#mg-app .mg-movement>h2{font-size:19px;margin-bottom:12px;scroll-margin-top:15px}#mg-app .mg-movement>.mg-muted{font-size:11px;margin-top:8px} #mg-app .mg-map-panel>h2+.mg-muted{font-size:11px;margin-bottom:6px}#mg-app .mg-map-choice{font-size:11px;padding:6px;margin:6px 0;line-height:1.4}#mg-app .mg-map-self{font-size:10px;margin:4px 0}#mg-app .mg-town-map{margin-top:8px;box-shadow:0 0 0 1px #49634a}#mg-app .mg-map-panel>.mg-muted{font-size:10px} #mg-app .mg-map-label{font-size:clamp(10px,2.8vw,13px);padding:2px 6px;gap:2px;--mg-label-angle:0deg;transform:translate(-50%,-50%)} #mg-app .mg-town-map>.mg-pawn{width:10px;height:10px}#mg-app .mg-pawn::before{top:-4px;height:6px} #mg-app .mg-notebook-page{padding-left:3px} #mg-app .mg-stage-tools{display:grid;grid-template-columns:1fr 1fr;gap:12px} #mg-app .mg-hand-tray{padding:10px}#mg-app .mg-hand-tray-heading h2{font-size:15px}#mg-app .mg-tray-card{flex-basis:38%;min-width:105px;max-width:155px} #mg-app .mg-inference-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px} #mg-app .mg-confirmation-cards,#mg-app .mg-solution-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}#mg-app :is(.mg-confirmation-cards,.mg-solution-cards)>:last-child:nth-child(3){grid-column:1/-1;width:calc(50% - 4px);justify-self:center} #mg-app .mg-hand-groups{grid-template-columns:1fr;gap:12px}#mg-app .mg-hand-list{grid-template-columns:repeat(2,minmax(0,1fr))}#mg-app .mg-notes{height:auto;min-height:0;max-height:none} #mg-app .mg-rematch-actions{flex-direction:column}#mg-app .mg-rematch-actions>.mg-button{min-width:0;width:100%} #mg-app .mg-sheet-peek,#mg-app .mg-log-peek{display:flex;align-items:center;justify-content:center;gap:7px;position:static;width:100%;min-height:64px;margin:0;padding:12px 4px;font-size:17px;font-family:'Yu Mincho',serif;border:3px double #b79345;box-shadow:0 3px 0 #a67b39,0 5px 8px #20120844;background:#174c3b;color:#fff2d0} #mg-app .mg-log-peek{background:linear-gradient(125deg,#fff9e9,#f1d5a3);color:#3f3222}#mg-app .mg-stage-tools>.mg-button{position:relative;outline:1px solid #dbc68f;outline-offset:-7px;border-radius:2px 7px 3px 5px}#mg-app .mg-stage-tools>.mg-button::after{content:"›";position:absolute;right:7px;color:#af8740;font-size:25px}#mg-app .mg-sheet-icon{width:20px;height:20px;flex:none}#mg-app .mg-sheet-dialog{width:calc(100vw - 20px);padding:10px} #mg-notice{bottom:calc(12px + env(safe-area-inset-bottom));font-size:12px;padding:10px 14px} } /* Measured PNG geometry. Percentages refer to the complete original canvas, including transparency; artwork is always contain, never nine-sliced. */ html:has(body.mg-page){scrollbar-gutter:stable} body.mg-page{isolation:isolate;background:#68422b} body.mg-page::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('../assets/optimized/ui/detective/background-pc-1672.webp') center / cover no-repeat} #mg-app .mg-game-header{grid-template-columns:minmax(0,792px) minmax(0,420px);justify-content:space-between;gap:24px;min-height:0;margin-top:-24px;margin-bottom:-28px} #mg-app .mg-case-title{width:100%;max-width:792px;padding:0} #mg-app .mg-main-logo{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none} #mg-app .mg-case-title.mg-logo-ready{aspect-ratio:2048/682;padding:0} #mg-app .mg-logo-ready>:is(h1,.mg-kicker,.mg-hero){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #mg-app .mg-case-title.mg-logo-ready>p{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #mg-app .mg-welcome>.mg-main-logo{max-width:440px;margin:auto} #mg-app .mg-welcome.mg-logo-ready::before{content:none} /* Timer: title x38..77 y17..31; time x37..91 y38..64; phase y65..79. */ #mg-app :is(.mg-game-header,.mg-roster)>.mg-timer{position:relative;width:100%;max-width:420px;aspect-ratio:2048/682;min-height:0;padding:0;border:0;outline:0;box-shadow:none;display:block;background:transparent url('../assets/optimized/ui/detective/timer-frame-1920.webp') center/contain no-repeat;color:#2e3528;text-align:center} #mg-app :is(.mg-game-header,.mg-roster)>.mg-timer::before{position:absolute;left:38%;right:23%;top:17%;height:14%;font-size:10px;letter-spacing:0;display:grid;place-items:center} #mg-app :is(.mg-game-header,.mg-roster)>.mg-timer .mg-timer-remaining{position:absolute;left:37%;right:9%;top:38%;height:26%;display:grid;place-items:center;font-size:clamp(20px,2.2vw,28px);line-height:1} #mg-app :is(.mg-game-header,.mg-roster)>.mg-timer>span:first-child{position:absolute;left:37%;right:9%;top:65%;height:14%;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Turn: round icon (15%,49%); name x30..80 y27..48; status x30..81 y58..72; real action button x83..97 y36..77. */ #mg-app .mg-roster{grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:center;gap:16px;margin-bottom:12px} #mg-app .mg-game-status{display:block;width:100%;max-width:380px;aspect-ratio:2048/682;min-height:0;padding:0;background:transparent url('../assets/optimized/ui/detective/turn-other-1920.webp') center/contain no-repeat} #mg-app .mg-game-status[data-turn='self']{background-image:url('../assets/optimized/ui/detective/turn-self-1920.webp')} #mg-app .mg-status-info{display:contents} #mg-app .mg-turn-identity .mg-dot{left:15%;top:49%;width:20px;height:25px} #mg-app .mg-turn-identity .mg-player-name{position:absolute;left:30%;right:9%;top:27%;height:21%;font-size:15px;display:block;line-height:1.5} #mg-app .mg-status-title{position:absolute;left:30%;right:9%;top:58%;height:14%;font-size:10px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #mg-app .mg-status-action{position:absolute;left:83%;right:3%;top:36%;min-height:44px;padding:2px;font-size:9px} /* Participant paper is content-sized, with six equal desktop columns. */ #mg-app .mg-team{position:relative;width:100%;max-width:calc(var(--mg-player-count,6)*150px + 24px);padding:10px 12px;border:1px solid #c8ad7e;border-radius:5px;background:#fff3df;box-shadow:0 2px 6px #20140822} #mg-app .mg-team>h2{position:static;margin:0 0 6px;color:#514025;font-size:12px} #mg-app .mg-compact-players{position:static;grid-template-columns:repeat(var(--mg-player-count,6),minmax(0,1fr));align-items:stretch;gap:5px} #mg-app .mg-compact-players li{padding:7px 4px;overflow-wrap:anywhere} /* Notes: shell is 1086:1448, with fixed header/tabs and an independent list. Header x24..87 y7..16; tabs x15..89 y19..24; page x15..89 y26..91. */ #mg-app .mg-notes{width:100%;max-width:none;aspect-ratio:1086/1448;height:auto;min-height:0;max-height:none;align-self:start;transform:none;transition:none;background:transparent url('../assets/optimized/ui/detective/deduction-note-pc-1086.webp') center/contain no-repeat} #mg-app .mg-notes>.mg-kicker{position:absolute;left:24%;right:12%;top:7%;font-size:8px;letter-spacing:.05em} #mg-app .mg-notes>h2{font-size:21px} #mg-app .mg-sheet-tabs{top:calc(21.5% - 22px);height:44px} #mg-app .mg-notebook-guide{flex:none;font-size:10px}#mg-app .mg-notebook-guide>.mg-muted{font-size:9px;line-height:1.4;margin:5px 0} #mg-app .mg-sheet-legend{font-size:9px;gap:2px 4px} #mg-app .mg-notebook-page{overflow:hidden;background:#fff3dc} #mg-app .mg-sheet-scroll{scrollbar-gutter:stable;overflow-anchor:none} /* Reserve card space during image decoding after a state redraw. Otherwise the shorter temporary page clamps scrollY while an open notebook is being edited. */ #mg-app .mg-complete-card{aspect-ratio:3/4} /* CSS labels encode availability without tinting the map or changing its hit areas. */ #mg-app .mg-map-label{width:auto;max-width:125px;aspect-ratio:auto;padding:5px 7px;border:1px solid #826640;border-radius:4px;background:#fff5de;color:#3d392c;pointer-events:none;font-size:13px;gap:3px;filter:none;text-decoration:none;--mg-label-angle:0deg} #mg-app .mg-location-icon{position:static;width:auto;min-width:0;margin:0;font-size:11px;text-align:center} #mg-app .mg-location-name{position:static;text-align:center;pointer-events:auto;line-height:1.3} #mg-app .mg-map-label.mg-selectable{background:#1c6048;color:#fffbea;border-color:#fff4c2;filter:none;text-decoration:none} #mg-app .mg-map-label.mg-selectable::before{right:-5px;top:-8px;pointer-events:none} #mg-app .mg-map-label.mg-label-current{box-shadow:0 0 0 3px #e6b545} #mg-app .mg-map-label.mg-unavailable{opacity:1;background:#f1e8d6;color:#625b4c} /* Natural document flow: primary controls cannot be clipped inside a PNG viewport. */ #mg-app .mg-action-area{width:100%;aspect-ratio:auto;min-height:0;margin:0;padding:0 18px 18px;border:1px solid #c5ab7b;border-radius:6px;outline:0;box-shadow:0 3px 10px #20140833;background:#fff5e2} #mg-app .mg-stage-body{display:block;position:static;overflow:visible;min-width:0;padding:0} #mg-app .mg-stage-body>.mg-card{padding:0;margin:0;border:0;box-shadow:none;background:transparent} /* Independent 2048:682 plaque; text safe region x19..86, y34..67. */ #mg-app .mg-action-area>.mg-stage-title{position:relative;z-index:2;left:auto;top:auto;transform:none;width:min(100%,440px);aspect-ratio:2048/682;min-height:0;margin:-18px auto -20px;padding:0;display:block;background:transparent url('../assets/optimized/ui/detective/stage-header-1920.webp') center/contain no-repeat;border:0;box-shadow:none;font-size:clamp(14px,1.5vw,20px);line-height:1.35} #mg-app .mg-action-area>.mg-stage-title::after{content:none} #mg-app .mg-stage-heading-text{position:absolute;left:19%;right:14%;top:34%;bottom:33%;display:flex;align-items:center;justify-content:center;overflow:auto;scrollbar-width:thin} #mg-app .mg-stage-caption{margin:0 0 6px;font-size:10px;min-height:18px;padding:0;border:0;background:transparent;color:#24513d} #mg-app .mg-stage-caption::before{content:none} #mg-app .mg-town-map{max-width:none;margin:12px auto 4px} #mg-app .mg-hand-tray{position:relative;width:100%;aspect-ratio:auto;min-height:0;padding:12px;border:1px solid #c8ad7e;border-radius:5px;background:#fff3df} #mg-app .mg-hand-tray-heading{position:static;margin:0 0 8px} #mg-app .mg-hand-carousel{position:static;align-items:start;overflow-x:auto;scrollbar-gutter:stable} #mg-app .mg-tray-card{max-width:130px} #mg-app .mg-primary-submit,#mg-app .mg-final-submit{min-width:180px;margin:6px 0 12px} @media(min-width:701px){ #mg-app .mg-stage-layout{grid-template-columns:minmax(0,1fr) minmax(380px,440px)} #mg-app .mg-turn-choices{margin:8px 0} #mg-app .mg-turn-choices button{min-height:56px} #mg-app .mg-inference-options{gap:12px;margin-top:8px} #mg-app .mg-inference-options>.mg-complete-card>.mg-asset{max-width:150px} #mg-app .mg-inference-options>.mg-complete-card{aspect-ratio:auto;min-height:208px} } @media(min-width:701px) and (max-width:1000px){#mg-app .mg-stage-layout{grid-template-columns:minmax(0,1fr)}#mg-app .mg-notes{width:100%;max-width:440px;justify-self:center;align-self:center}} @media(max-width:700px){ body.mg-page::before{background-image:url('../assets/optimized/ui/detective/background-mobile-841.webp')} #mg-app .mg-game-header{min-height:0;gap:0;margin-top:-12px;margin-bottom:-8px;align-items:center} #mg-app .mg-case-title{max-width:360px;flex:none} #mg-app .mg-roster{gap:4px;align-items:center} #mg-app .mg-team{aspect-ratio:auto;max-width:none;padding:8px;border:1px solid #b8914b;background:#fff3dfeb} #mg-app .mg-team>h2{position:static;display:block;font-size:11px;margin:0 0 6px;color:#514025} #mg-app .mg-compact-players{position:static;gap:5px} #mg-app .mg-compact-players li{padding:6px 4px;overflow:visible} #mg-app :is(.mg-game-header,.mg-roster)>.mg-timer{max-width:300px;flex:none} #mg-app :is(.mg-game-header,.mg-roster)>.mg-timer::before{font-size:10px} #mg-app :is(.mg-game-header,.mg-roster)>.mg-timer .mg-timer-remaining{font-size:22px} #mg-app :is(.mg-game-header,.mg-roster)>.mg-timer>span:first-child{font-size:9px} #mg-app .mg-game-status{flex:none} #mg-app .mg-turn-identity .mg-player-name{font-size:13px} #mg-app .mg-status-title{font-size:9px} #mg-app .mg-map-label{max-width:86px;padding:4px;font-size:10px;--mg-label-angle:0deg} #mg-app .mg-location-icon{font-size:9px} #mg-app .mg-hand-tray{padding:12px;border:1px solid #b8914b;background:#fff3df} #mg-app .mg-stage-body>.mg-card{padding:0;margin:0;border:0;box-shadow:none;background:transparent} #mg-app .mg-action-area>.mg-stage-title{margin:-10px auto -12px;font-size:14px} #mg-app .mg-action-area{display:flex;flex-direction:column} #mg-app .mg-action-area .mg-stage-caption{order:-1} /* Mobile notebook is a readable paper dialog, with its list scrolling. */ #mg-app .mg-sheet-dialog:not(.mg-log-dialog){width:calc(100vw - 16px);max-width:520px;height:min(88dvh,760px);min-height:0;aspect-ratio:auto;padding:12px;background:#fff3dc;border:2px solid #285440;transform:none;transition:none} #mg-app .mg-sheet-dialog .mg-notes{position:relative;inset:auto;width:100%;max-width:none;height:auto;aspect-ratio:auto;padding:0;background:none;display:flex;flex-direction:column;overflow:hidden} #mg-app .mg-sheet-dialog .mg-sheet-tabs{position:static;flex:none;width:100%;height:44px;margin:0 0 8px;gap:6px} #mg-app .mg-sheet-dialog .mg-sheet-tab{background:#e9ddc4;color:#263d34} #mg-app .mg-sheet-dialog .mg-sheet-tab[aria-selected=true]{background:#24553e;color:#fff8e7;outline:2px solid #b38937} #mg-app .mg-sheet-dialog .mg-notebook-page{position:static;flex:1;min-height:0;padding:0} #mg-app .mg-sheet-dialog .mg-notebook-guide>.mg-muted{display:none} } /* Missing decoration keeps HTML controls legible without extra paper layers. */ #mg-app .mg-ui-missing{background-color:#fff3da!important;background-image:none!important;border-image:none!important;border-color:#857044!important;color:#302d21} #mg-app .mg-ui-missing .mg-sheet-tab{background:#285e4b;color:#fff9e8} #mg-app .mg-ui-missing .mg-sheet-tab[aria-selected="true"]{outline:3px solid #b48922;outline-offset:-3px} #mg-app .mg-game-status.mg-ui-missing .mg-status-title,#mg-app .mg-team.mg-ui-missing>h2{color:#302d21} @media(max-width:700px){#mg-app .mg-sheet-dialog .mg-notes.mg-ui-missing{background:transparent!important}} @media(prefers-reduced-motion:reduce){ #mg-app *,#mg-app *::before,#mg-app *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} #mg-app .mg-button:hover:not(:disabled),#mg-app .mg-button:active:not(:disabled),#mg-app button.mg-card-loaded:hover:not(:disabled),#mg-app button.mg-card-loaded:active:not(:disabled){transform:none} } /* Stage19-E measured new artwork. No original PNG is cropped or stretched. Wide title canvas 2172:724; visible paint y24..72%, text x19..84 y39..60%. Negative block margins consume transparent canvas space only. */ @media(min-width:701px){ #mg-app .mg-action-area{container-type:inline-size} #mg-app .mg-action-area>.mg-stage-title{width:94%;max-width:900px;aspect-ratio:2172/724;margin:-6.5% auto -7%;background-image:url('../assets/optimized/ui/detective/stage-heading-wide-1920.webp');font-size:clamp(15px,2.4cqi,23px);pointer-events:none} #mg-app .mg-stage-heading-text{left:19%;right:16%;top:39%;bottom:40%;white-space:nowrap;overflow:visible} #mg-app .mg-stage-title.mg-long-heading{font-size:clamp(10px,1.9cqi,18px)} #mg-app .mg-stage-side{width:100%} #mg-app .mg-stage-side>.mg-log{width:100%} #mg-app .mg-stage-side>.mg-notes{width:100%;max-width:none} #mg-app .mg-sheet-name{font-size:13px;color:#263b30} #mg-app .mg-sheet-label,#mg-app .mg-sheet-legend,#mg-app .mg-owner-summary{color:#465342} #mg-app .mg-sheet-own .mg-sheet-label{color:#ad3035} #mg-app .mg-sheet-shown .mg-sheet-label{color:#222} } @media(min-width:701px) and (max-width:1000px){#mg-app .mg-stage-side{max-width:440px;justify-self:center}} @media(max-width:700px){ #mg-app .mg-team{max-width:none} #mg-app .mg-compact-players{grid-template-columns:repeat(3,minmax(0,1fr))} #mg-app .mg-team[data-count='2'] .mg-compact-players{grid-template-columns:repeat(2,minmax(0,1fr))} #mg-app .mg-action-area>.mg-stage-title{width:100%;aspect-ratio:auto;margin:0 0 10px;padding:10px 0;border-bottom:1px solid #c8ad7e;background:none;font-size:20px} #mg-app .mg-stage-heading-text{position:static;display:block;white-space:normal;overflow:visible} } /* A square transparent image sits inside each reserved square slot. */ #mg-app .mg-pawn-art{position:relative;aspect-ratio:1;border-radius:50%;flex:none} #mg-app .mg-pawn-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none} #mg-app .mg-pawn-ready{background:transparent!important;border:0!important;box-shadow:none!important} #mg-app .mg-pawn-ready::before{content:none!important} #mg-app .mg-initial-hand{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;padding:0;margin:12px 0} #mg-app .mg-initial-hand>li{flex:0 1 120px;min-width:0;width:120px} #mg-app .mg-confirmation-cards{display:flex;justify-content:center;gap:16px;width:fit-content;max-width:100%;margin:12px auto} #mg-app .mg-confirmation-cards>div,#mg-app .mg-confirmation-cards>:last-child:nth-child(3){flex:0 1 140px;width:140px;min-width:0;grid-column:auto} #mg-app .mg-inference-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin:12px 0} #mg-app .mg-inference-controls .mg-primary-submit{margin:0;min-width:120px} #mg-app .mg-presentation-trace{padding:10px 10px 10px 32px;border-left:3px solid #927337;background:#edeedb;color:#263b30;font-size:14px;line-height:1.7} #mg-app .mg-compact-players .mg-dot{width:32px;height:32px;border:0;box-shadow:none} #mg-app .mg-turn-identity .mg-dot{position:absolute;left:15%;top:49%;width:56px;height:56px} #mg-app .mg-town-map>.mg-pawn{width:30px;height:30px} #mg-app .mg-map-label.mg-selectable:hover{background:#347658;outline:2px solid #e7c45a} #mg-app .mg-town-map:has(.mg-location:focus-visible) .mg-map-label{transition:none} @media(max-width:700px){ #mg-app .mg-compact-players .mg-dot{width:25px;height:25px} #mg-app .mg-turn-identity .mg-dot{width:48px;height:48px} #mg-app .mg-town-map>.mg-pawn{width:22px;height:22px} } /* Stage19-F: normal-flow columns and safe areas measured on the 890x1478 note. Note title x12..88 y5..12; tabs x4..96 y14..19; paper x7..93 y22..92. Decoration keeps its native ratio; only the paper list may scroll. */ #mg-app .mg-case-title.mg-logo-ready{aspect-ratio:1999/471} #mg-app :is(.mg-game-header,.mg-roster)>.mg-timer{aspect-ratio:2038/656} #mg-app .mg-game-status{aspect-ratio:1992/583} #mg-app .mg-game-status[data-turn='self']{aspect-ratio:1967/557} @media(min-width:701px){ #mg-app .mg-stage-layout{grid-template-columns:minmax(0,1fr) clamp(360px,25vw,440px);gap:28px;align-items:start} #mg-app .mg-main-panel{gap:12px;min-width:0} #mg-app .mg-game-header{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:12px;margin:0;align-items:center} #mg-app .mg-roster{grid-template-columns:minmax(230px,.36fr) minmax(0,.64fr);gap:12px;margin:0} #mg-app .mg-team{justify-self:end;max-width:calc(var(--mg-player-count)*125px + 16px);padding:8px} #mg-app .mg-team>h2{font-size:11px;margin:0 0 4px} #mg-app .mg-compact-players{grid-template-columns:repeat(var(--mg-player-count),minmax(0,1fr));gap:3px} #mg-app .mg-compact-players li{padding:4px 2px;gap:2px;justify-content:center} #mg-app .mg-compact-players .mg-player-name{font-size:11px;text-align:center;flex-basis:100%} #mg-app .mg-compact-players small{font-size:8px;text-align:center} #mg-app .mg-game-status{width:100%;max-width:380px} #mg-app .mg-turn-identity .mg-player-name{font-size:clamp(10px,1vw,14px)} #mg-app .mg-status-title{font-size:clamp(8px,.7vw,10px)} #mg-app .mg-stage-side{gap:18px;width:100%;max-width:none} #mg-app .mg-stage-side>.mg-notes{width:100%;aspect-ratio:890/1478;background-image:url('../assets/optimized/ui/detective/deduction-note-pc-wide-890.webp');height:auto} #mg-app .mg-notes>.mg-kicker{left:12%;right:12%;top:4%;font-size:8px;text-align:center;color:#263b30} #mg-app .mg-notes>h2{left:12%;right:12%;top:7%;font-size:24px;text-align:center;color:#203e31} #mg-app .mg-notes>.mg-sheet-tabs{left:4%;right:4%;top:14%;height:5.5%;gap:3%} #mg-app .mg-sheet-tab{min-height:30px;border-radius:4px} #mg-app .mg-notebook-page{left:7%;right:7%;top:22%;bottom:8%;padding:0;background:#fff3dc} #mg-app .mg-notebook-guide>.mg-muted{margin:5px 0;font-size:10px;line-height:1.4;color:#344635} #mg-app .mg-sheet-name{font-size:13px;color:#203d30} #mg-app .mg-sheet-label,#mg-app .mg-sheet-legend,#mg-app .mg-owner-summary{color:#344635} #mg-app .mg-sheet-row{position:relative;border-color:#99855f} #mg-app .mg-sheet-row:has(.mg-owner-summary) .mg-sheet-status{padding-bottom:14px} #mg-app .mg-owner-summary{position:absolute;left:30px;right:48px;bottom:1px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;line-height:12px} #mg-app .mg-sheet-row:has(.mg-owner-editor:not([hidden])) .mg-owner-summary{position:static;white-space:normal} #mg-app .mg-action-area{padding:0 12px 14px} #mg-app .mg-stage-heading-zone{background:#153e29;margin:0 -12px 12px;display:flow-root;border-bottom:2px solid #af8c40} #mg-app .mg-stage-heading-zone>.mg-stage-title{position:relative;display:block;width:94%;max-width:900px;aspect-ratio:2172/724;margin:-6.5% auto -7%;padding:0;border:0;box-shadow:none;background:transparent url('../assets/optimized/ui/detective/stage-heading-wide-1920.webp') center/contain no-repeat;font-size:clamp(14px,2.4cqi,23px);pointer-events:none} #mg-app .mg-stage-heading-zone>.mg-stage-title.mg-long-heading{font-size:clamp(10px,1.8cqi,18px)} #mg-app .mg-stage-heading-zone>.mg-stage-title::after{content:none} #mg-app .mg-town-map{--mg-pawn-spacing:2.2px} #mg-app .mg-town-map>.mg-pawn{width:42px;height:42px} #mg-app .mg-town-map .mg-pawn-image{filter:drop-shadow(1px 0 #fff) drop-shadow(-1px 0 #fff) drop-shadow(0 1px #fff) drop-shadow(0 -1px #fff) drop-shadow(0 2px 2px #24312380)} #mg-app .mg-map-label{max-width:190px;font-size:24px;padding:7px 10px;border-width:2px} #mg-app .mg-location-icon{font-size:16px} } @media(min-width:701px) and (max-width:1000px){ #mg-app .mg-stage-layout{grid-template-columns:minmax(0,1fr)} #mg-app .mg-stage-side{width:440px;max-width:100%;justify-self:center} } @media(max-width:374px){#mg-app .mg-inference-controls{flex-direction:column}#mg-app .mg-inference-controls>.mg-primary-submit{order:-1}} @media(min-width:375px) and (max-width:700px){ #mg-app .mg-inference-controls{flex-wrap:nowrap;gap:10px} #mg-app .mg-inference-controls>.mg-secondary{flex:1;min-width:0;padding:12px 6px;font-size:12px} #mg-app .mg-inference-controls>.mg-primary-submit{min-width:96px;padding:12px} } /* Stage19-F.1: supplied transparent-margin-trimmed assets, no image edits. Timer canvas 2038x656; turn self 1967x557 / other 1992x583. Keep text in the same painted safe areas after the canvas-height change. */ #mg-app :is(.mg-game-header,.mg-roster)>.mg-timer::before{top:17.7%;height:14.5%} #mg-app :is(.mg-game-header,.mg-roster)>.mg-timer .mg-timer-remaining{top:39.5%;height:27%} #mg-app :is(.mg-game-header,.mg-roster)>.mg-timer>span:first-child{top:67.6%;height:14.5%} #mg-app .mg-turn-identity .mg-player-name{top:25%;height:25%} #mg-app .mg-game-status[data-turn='self'] .mg-player-name{top:23%;height:26%} #mg-app .mg-status-title{top:61%;height:17%} #mg-app .mg-turn-identity .mg-dot{top:50%} #mg-app .mg-inference-controls .mg-primary-submit{font-weight:850;border:2px solid #bd9850;box-shadow:0 2px 0 #153e29} #mg-app .mg-inference-controls .mg-primary-submit:hover:not(:disabled){background:#246048} #mg-app .mg-inference-controls .mg-primary-submit:focus-visible{outline:3px solid #226c9a;outline-offset:3px} @media(min-width:701px){ #mg-app .mg-game-header{padding-top:8px;margin-bottom:-4px} #mg-app .mg-stage-side{padding-top:8px} } /* Stage19-G: PC composition; mobile presentation remains separate. */ @media(min-width:701px){ #mg-app{--mg-book-font:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;font-family:var(--mg-book-font)} #mg-app :is(h1,h2,h3,.mg-button,.mg-sheet-name,.mg-stage-heading-text){font-weight:800} #mg-app .mg-game-header{column-gap:8px} #mg-app .mg-turn-team-panel{min-width:0;width:100%;background:#fff5df;border:1px solid #cfb981} #mg-app .mg-current-turn-heading{margin:0;padding:16px 14px;background:#133c22;color:#fffbed;font-size:clamp(20px,1.8vw,30px);line-height:1.4;overflow-wrap:anywhere} #mg-app .mg-turn-team-panel .mg-team{width:100%;max-width:none;padding:8px;border:0;background:none} #mg-app .mg-turn-team-panel .mg-team h2{font-size:12px;margin:0 0 6px} #mg-app .mg-turn-team-panel .mg-compact-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} #mg-app .mg-turn-team-panel .mg-compact-players li{min-width:0;min-height:46px;display:flex;flex-wrap:wrap;gap:4px;padding:5px} #mg-app .mg-turn-team-panel .mg-compact-players .mg-player-name{font-size:13px;line-height:1.4;white-space:normal;overflow-wrap:anywhere;min-width:0} #mg-app .mg-notebook-page{top:21%;bottom:7%} #mg-app .mg-notes>.mg-kicker{display:none} #mg-app .mg-timer-remaining{font-weight:900} } @media(min-width:701px){ #mg-app .mg-current-turn-heading{font-size:clamp(20px,1.4vw,24px)} #mg-app .mg-turn-team-panel .mg-compact-players li{display:grid;grid-template-columns:28px minmax(0,1fr);justify-content:start;align-items:center} #mg-app .mg-turn-team-panel .mg-compact-players .mg-player-name{flex-basis:auto;text-align:left;font-weight:700} #mg-app .mg-turn-team-panel .mg-compact-players small{grid-column:2;text-align:left} #mg-app .mg-stage-heading-text{font-family:var(--mg-book-font);font-weight:900} } @media(min-width:701px){ #mg-app :is(.mg-stage-heading-text,.mg-current-turn-heading,.mg-timer-remaining,.mg-sheet-name,.mg-player-name,.mg-button,.mg-log>h2){font-synthesis:weight} #mg-app .mg-stage-heading-zone>.mg-stage-title:not(.mg-long-heading){font-size:clamp(20px,3cqi,32px)} } /* Stage19-H: titled PC notebook; mobile composition uses the same semantic turn panel, with its own map anchors, heading scale and fixed tools. */ @media(min-width:701px){ #mg-app .mg-stage-side>.mg-notes{aspect-ratio:841/1396;background-image:url('../assets/optimized/ui/detective/deduction-note-pc-titled-841.webp')} #mg-app .mg-notes>h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #mg-app .mg-notes.mg-ui-missing>h2{width:auto;height:auto;margin:0;clip-path:none;white-space:normal} #mg-app .mg-notes>.mg-sheet-tabs{left:3.5%;right:3.5%;top:14.3%;height:4.2%;gap:2.5%} #mg-app .mg-notebook-page{left:7%;right:6.5%;top:21%;bottom:6.5%} } @media(max-width:700px){ #mg-app{--mg-book-font:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;font-family:var(--mg-book-font)} #mg-app :is(h2,h3,.mg-button,.mg-player-name,.mg-sheet-name,.mg-map-label,.mg-timer-remaining){font-weight:800;font-synthesis:weight} #mg-app:has(.mg-stage-tools:not(:empty)){padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))} #mg-app .mg-game-header{gap:8px;margin:0;min-height:0;padding:0} #mg-app .mg-case-title{width:100%;max-width:500px;padding:0} #mg-app .mg-game-header>.mg-timer{width:88%;max-width:380px;margin:0} #mg-app .mg-game-header>.mg-timer .mg-timer-remaining{font-size:clamp(20px,6vw,28px);font-weight:900} #mg-app .mg-game-header>.mg-timer::before{font-weight:800} #mg-app .mg-main-panel{gap:12px} #mg-app .mg-turn-team-panel{width:100%;min-width:0;background:#fff5df;border:1px solid #cfb981} #mg-app .mg-current-turn-heading{margin:0;padding:12px 10px;background:#133c22;color:#fffbed;font-size:clamp(18px,4.8vw,24px);line-height:1.4;overflow-wrap:anywhere} #mg-app .mg-turn-team-panel .mg-team{width:100%;max-width:none;border:0;padding:7px;background:none} #mg-app .mg-turn-team-panel .mg-compact-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px} #mg-app .mg-turn-team-panel .mg-compact-players li{min-width:0;min-height:44px;padding:4px;display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px;align-items:center} #mg-app .mg-turn-team-panel .mg-player-name{font-size:12px;white-space:normal;overflow-wrap:anywhere;text-align:left;min-width:0} #mg-app .mg-turn-team-panel .mg-compact-players small{grid-column:2;font-size:10px} #mg-app .mg-stage-heading-zone{display:flow-root;background:#153e29;margin:0 -10px 10px;border-bottom:1px solid #b79751} #mg-app .mg-action-area[data-stage='map']>.mg-stage-heading-zone{margin-inline:0} #mg-app .mg-stage-heading-zone>.mg-stage-title{display:block;position:relative;width:100%;aspect-ratio:2172/724;margin:-7% auto -7%;padding:0;border:0;box-shadow:none;background:transparent url('../assets/optimized/ui/detective/stage-heading-wide-1920.webp') center/contain no-repeat;font-size:clamp(13px,4vw,19px);font-weight:900;line-height:1.25;pointer-events:none} #mg-app .mg-stage-heading-zone>.mg-stage-title.mg-long-heading{font-size:clamp(10px,2.8vw,13px)} #mg-app .mg-stage-heading-zone>.mg-stage-title::after{content:none} #mg-app .mg-stage-heading-text{font-family:var(--mg-book-font);font-weight:900;font-synthesis:weight;white-space:normal} #mg-app .mg-map-choice{font-size:12px;font-weight:700} #mg-app .mg-map-label{font-size:11px;font-weight:800;padding:2px 3px;max-width:88px;line-height:1.4;pointer-events:auto;z-index:3} #mg-app .mg-town-map>.mg-pawn{width:20px;height:20px} #mg-app .mg-town-map .mg-pawn-image{filter:drop-shadow(1px 0 #fff) drop-shadow(-1px 0 #fff) drop-shadow(0 1px #fff) drop-shadow(0 -1px #fff)} #mg-app .mg-stage-tools:not(:empty){position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:20;display:grid;grid-template-columns:1fr 1fr;gap:8px} #mg-app .mg-stage-tools>.mg-button{min-height:64px;font-size:clamp(15px,4.3vw,19px);padding:10px 15px 10px 7px} #mg-app:has(dialog[open]) .mg-stage-tools{visibility:hidden} #mg-app .mg-sheet-dialog .mg-notebook-page{padding:0} #mg-app .mg-sheet-dialog .mg-sheet-name{font-size:13px} #mg-notice{bottom:calc(84px + env(safe-area-inset-bottom,0px))} } @media(max-width:700px){ #mg-app .mg-stage-heading-text{position:absolute;display:flex;left:19%;right:16%;top:39%;bottom:40%;align-items:center;justify-content:center;overflow:visible} } @media(max-width:700px){ #mg-app .mg-stage-heading-text{top:36%;bottom:36%} #mg-app .mg-stage-heading-zone>.mg-stage-title.mg-mobile-long-heading{font-size:clamp(10px,3vw,14px);line-height:1.15} } /* Stage19-H.1: only the entry screen changes; in-game geometry is untouched. */ #mg-app .mg-welcome{max-width:720px;margin:clamp(20px,7vh,64px) auto;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:24px;border:0;background:none;box-shadow:none;border-radius:0} #mg-app .mg-welcome::before{content:none} #mg-app .mg-welcome>.mg-main-logo{width:100%;max-width:640px;margin:0} #mg-app .mg-welcome>.mg-button{margin:0;min-height:56px;width:min(100%,320px);font-size:18px;font-weight:800} #mg-app .mg-welcome:not(.mg-logo-ready)>h1{color:#fff5dc;text-shadow:0 2px 3px #23180d} @media(max-width:700px){#mg-app .mg-welcome{margin:20px auto;padding:12px 0;gap:24px}#mg-app .mg-welcome>.mg-button{width:min(90%,320px)}} .mg-audio-tools { display:flex; justify-content:center; padding:12px; margin:0 auto 20px; } .mg-bgm-settings { border-top:1px solid #c9b987; margin-top:12px; padding-top:12px; } .mg-bgm-settings label[for="mg-bgm-volume"] { display:block; margin-top:12px; } .mg-audio-tools .mg-button,.mg-audio-dialog .mg-button { min-height:44px; padding:10px 18px; border:1px solid #94783e; border-radius:6px; background:#1c503e; color:#fff5df; font:600 16px/1.4 sans-serif; cursor:pointer; } .mg-audio-dialog { box-sizing:border-box; width:min(360px,calc(100% - 32px)); max-height:calc(100dvh - 48px); overflow:auto; padding:22px; border:2px solid #94783e; border-radius:12px; background:#fff5df; color:#193c2f; } .mg-audio-dialog::backdrop { background:#13291ecc; } .mg-audio-dialog label[for="mg-audio-volume"] { display:block; margin-top:20px; } .mg-audio-dialog input[type="range"] { width:100%; min-height:44px; accent-color:#205942; } .mg-audio-dialog input[type="checkbox"] { width:22px; height:22px; margin:10px 12px 10px 0; vertical-align:middle; } .mg-audio-dialog output { display:block; margin-bottom:20px; } .mg-audio-dialog :focus-visible,.mg-audio-tools :focus-visible { outline:3px solid #bd631d; outline-offset:3px; } @media(max-width:700px) { .mg-audio-tools { padding-bottom:calc(92px + env(safe-area-inset-bottom,0px)); } } /* Stage19-K: public observer content; saturation affects artwork only. */ .mg-town-map>.mg-asset-map,.mg-observer-map-image{filter:saturate(.72)} .mg-observer{min-width:0} .mg-observer-movement{display:grid;grid-template-columns:minmax(70px,120px) minmax(0,1fr);gap:16px;align-items:center} .mg-observer-card .mg-asset{display:block;width:100%;height:auto} .mg-observer-route{font-size:clamp(14px,1.4vw,20px);overflow-wrap:anywhere;font-weight:700} .mg-observer-map{grid-column:1/-1;position:relative;aspect-ratio:2/1;max-width:720px;width:100%;margin:auto} .mg-observer-map-image{display:block;width:100%;height:100%;object-fit:contain} .mg-route-marker{position:absolute;transform:translate(-50%,-50%);padding:3px 6px;background:#fff8df;border:2px solid #205844;border-radius:6px;color:#163f2f;font-size:clamp(10px,1vw,15px);font-weight:700;white-space:nowrap} .mg-public-inference-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(5px,1vw,16px);width:100%;max-width:760px;margin:14px auto} .mg-public-inference-cards>div{min-width:0} .mg-public-inference-cards .mg-asset{width:100%;height:auto;max-height:none;object-fit:contain} .mg-selection-wait,.mg-presentation-trace{font-size:clamp(14px,1.2vw,18px);line-height:1.7} @media(max-width:700px){.mg-observer-movement{gap:10px;grid-template-columns:75px minmax(0,1fr)}} /* Public triples use the full available stage width, overriding old confirm sizing. */ #mg-app .mg-public-inference-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:760px;gap:clamp(5px,1vw,16px);margin:14px auto} #mg-app .mg-public-inference-cards>div,#mg-app .mg-public-inference-cards>:last-child:nth-child(3){width:auto;min-width:0;grid-column:auto} @media(max-width:700px){#mg-app .mg-inference-call:has(.mg-public-inference-cards){padding:8px 4px;border-left:0}} #mg-app .mg-public-inference-cards>div,#mg-app .mg-public-inference-cards>:last-child:nth-child(3){width:100%;max-width:100%;justify-self:stretch} /* Public observer pawns share the official artwork, without speculative movement. */ #mg-app .mg-observer-map{--mg-observer-spacing:2.4px} #mg-app .mg-observer-map>.mg-observer-pawn{width:28px;height:28px;position:absolute;transform:translate(-50%,-50%);transition:none;z-index:2} #mg-app .mg-observer-pawn.mg-observer-active{outline:2px solid #fff;outline-offset:2px;border-radius:50%} #mg-app .mg-observer-pawn:focus-visible{outline:3px solid #226c9a;outline-offset:3px} #mg-app .mg-observer-map .mg-route-marker{transform:translate(-50%,40px);z-index:3;pointer-events:none} #mg-app .mg-observer-legend{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 16px;padding:0;list-style:none;margin:4px 0} #mg-app .mg-observer-legend li{display:flex;align-items:center;gap:5px;font-size:12px;overflow-wrap:anywhere} #mg-app .mg-observer-legend-pawn{display:inline-block;position:relative;width:18px;height:22px;flex:0 0 18px} #mg-app .mg-final-controls{display:flex;justify-content:center;align-items:stretch;gap:12px;margin:12px 0} #mg-app .mg-final-controls>button{margin:0;min-width:0;white-space:normal} #mg-app .mg-final-controls .mg-final-submit{font-weight:850;border:2px solid #bd9850} #mg-app .mg-final-controls .mg-final-submit:focus-visible{outline:3px solid #226c9a;outline-offset:3px} @media(max-width:700px){#mg-app .mg-observer-map{--mg-observer-spacing:1.55px}#mg-app .mg-observer-map>.mg-observer-pawn{width:19px;height:19px}#mg-app .mg-final-controls{gap:8px}#mg-app .mg-final-controls>button{flex:1;padding:10px 5px;font-size:12px}#mg-app .mg-observer-map .mg-route-marker{transform:translate(-50%,28px)}} /* 19-K.1: compact confirmation and public pawn nameplates. */ #mg-app .mg-final-controls{align-items:center} #mg-app .mg-final-controls>button{flex:0 1 auto;width:auto;min-height:44px;padding:10px 14px} #mg-app .mg-final-controls>.mg-final-submit{min-width:120px;width:auto;min-height:44px} #mg-app .mg-town-map{--mg-pawn-spacing:4.3px} #mg-app .mg-observer-map{--mg-observer-spacing:4.3px} #mg-app .mg-town-map>.mg-pawn{width:44px;height:44px} #mg-app .mg-observer-map>.mg-observer-pawn{width:32px;height:32px;pointer-events:none} #mg-app :is(.mg-town-map,.mg-observer-map) .mg-pawn-image{filter:drop-shadow(1px 0 #fff) drop-shadow(-1px 0 #fff) drop-shadow(0 1px #fff) drop-shadow(0 -1px #fff) drop-shadow(0 2px 2px #173e37)} #mg-app .mg-pawn-name{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:56px;box-sizing:border-box;padding:1px 2px;border:1px solid #7a735b;border-radius:3px;background:#fffbea;color:#183d30;font:600 11px/1.35 sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none} #mg-app .mg-pawn:focus-visible{z-index:8} #mg-app .mg-pawn:focus-visible .mg-pawn-name{width:max-content;max-width:120px;white-space:normal} #mg-app .mg-town-map>.mg-observer-active{outline:2px solid white;outline-offset:2px} #mg-app .mg-observer-map .mg-route-marker{transform:translate(-50%,64px)} @media(max-width:700px){ #mg-app .mg-final-controls>button{flex:0 1 auto;padding:10px 6px;font-size:12px} #mg-app .mg-final-controls>.mg-final-submit{min-width:98px} #mg-app .mg-town-map{--mg-pawn-spacing:3px} #mg-app .mg-observer-map{--mg-observer-spacing:3px} #mg-app .mg-town-map>.mg-pawn,#mg-app .mg-observer-map>.mg-observer-pawn{width:24px;height:24px} #mg-app .mg-pawn-name{width:40px;font-size:10px} #mg-app .mg-observer-map .mg-route-marker{transform:translate(-50%,48px)} } #mg-app .mg-town-map,#mg-app .mg-observer-map{--mg-pawn-row-spacing:5.5px} #mg-app .mg-pawn-name{white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip} @media(max-width:700px){#mg-app .mg-town-map{--mg-pawn-spacing:3.5px}#mg-app .mg-observer-map{--mg-observer-spacing:3.5px}#mg-app .mg-town-map,#mg-app .mg-observer-map{--mg-pawn-row-spacing:4px}#mg-app .mg-pawn-name{width:46px}#mg-app .mg-observer-map .mg-route-marker{transform:translate(-50%,66px)}} #mg-app .mg-controls-body>p{font-size:12px;color:var(--mg-color-muted)} /* Stage20: compact in-game frame. The PC header keeps title, turn, team and timer in one row; the hand tray and log share a dock under the stage. A hidden timer keeps its slot so the header never reflows between phases. */ @media(min-width:701px){ #mg-app .mg-stage-layout{grid-template-areas:'head head' 'main side'} #mg-app .mg-game-header{grid-area:head;display:flex;align-items:center;gap:12px;min-height:0;margin:0;padding:0} #mg-app .mg-game-header>.mg-case-title.mg-logo-ready{flex:none;width:auto;height:72px;max-width:none;aspect-ratio:1999/471} #mg-app .mg-game-header .mg-main-logo{width:auto;height:100%} #mg-app .mg-game-header>.mg-timer{flex:none;width:auto;height:72px;max-width:none;aspect-ratio:2038/656} #mg-app .mg-game-header>.mg-timer[hidden]{display:block!important;visibility:hidden} #mg-app .mg-game-header>.mg-timer .mg-timer-remaining{font-size:19px} #mg-app .mg-game-header>.mg-timer::before{font-size:9px} #mg-app .mg-game-header>.mg-timer>span:first-child{font-size:9px} #mg-app .mg-game-header>.mg-turn-team-panel{flex:1 1 0;min-width:0;align-self:stretch;display:flex;height:72px;overflow:hidden} #mg-app .mg-game-header .mg-current-turn-heading{flex:0 1 auto;width:clamp(170px,17vw,280px);display:flex;align-items:center;padding:4px 14px;font-size:clamp(15px,1.25vw,20px);line-height:1.3} #mg-app .mg-game-header .mg-turn-team-panel .mg-team{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:3px 8px} #mg-app .mg-game-header .mg-turn-team-panel .mg-team>h2{font-size:10px;line-height:1.2;margin:0 0 2px} #mg-app .mg-game-header .mg-turn-team-panel .mg-compact-players{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 4px} #mg-app .mg-game-header .mg-turn-team-panel .mg-team[data-count='2'] .mg-compact-players{grid-template-columns:repeat(2,minmax(0,1fr))} #mg-app .mg-game-header .mg-turn-team-panel .mg-compact-players li{min-height:0;padding:1px 4px;grid-template-columns:20px minmax(0,1fr);gap:0 4px} #mg-app .mg-game-header .mg-turn-team-panel .mg-compact-players .mg-dot{width:20px;height:20px} #mg-app .mg-game-header .mg-turn-team-panel .mg-compact-players .mg-player-name{font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #mg-app .mg-game-header .mg-turn-team-panel .mg-compact-players small{font-size:9px;line-height:1.1} #mg-app .mg-game-header>.mg-controls{flex:none;position:relative;align-self:center} #mg-app .mg-game-header>.mg-controls[open]{padding:0;align-self:center} #mg-app .mg-game-header>.mg-controls[open]>summary{margin:0;border-bottom:0} #mg-app .mg-game-header>.mg-controls>summary{min-height:40px;padding:9px 12px;white-space:nowrap} #mg-app .mg-game-header .mg-controls-body{position:absolute;right:0;top:calc(100% + 4px);z-index:30;width:min(320px,80vw);padding:12px 14px;background:#f5e6c7;border:1px solid #a98347;box-shadow:0 6px 16px #21170f66} #mg-app .mg-game-header .mg-controls-body .mg-button{width:100%;margin:0} #mg-app .mg-stage-dock{display:grid;grid-template-columns:auto minmax(260px,1fr);gap:10px;align-items:stretch;min-width:0} #mg-app .mg-stage-dock>.mg-log:only-child{grid-column:1/-1} #mg-app .mg-stage-dock>.mg-hand-tray{min-width:0;max-width:min(100%,820px)} #mg-app .mg-stage-dock .mg-tray-card{flex:0 0 96px;max-width:none} #mg-app .mg-stage-dock>.mg-log{margin:0} } @media(min-width:701px) and (max-width:1000px){ #mg-app .mg-stage-layout{grid-template-areas:'head' 'main' 'side'} #mg-app .mg-game-header{flex-wrap:wrap} #mg-app .mg-game-header>.mg-turn-team-panel{order:3;flex-basis:100%} #mg-app .mg-stage-dock{grid-template-columns:minmax(0,1fr)} } /* PC: the sound button sits in the portal bar on every screen, so entering or leaving a match never moves the bar or the page top. */ @media(min-width:1001px){ body.mg-page{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:start} body.mg-page>.mg-portal-nav{grid-column:1;grid-row:1} body.mg-page>.mg-audio-tools{grid-column:2;grid-row:1;margin:0;padding:0 12px;display:flex;align-items:center;background:#fff9ee} body.mg-page>.mg-audio-tools .mg-button{min-height:32px;padding:3px 12px;font-size:13px} body.mg-page>#mg-app{grid-column:1/-1;grid-row:2;width:100%} } /* PC fit: the play area takes the viewport below the portal bar. Its size never depends on the phase. Card widths derive from the stage's own height (cqh); if a phase still needs more room, only that panel scrolls and controls stay pinned. */ @media(min-width:1001px) and (min-height:600px){ body.mg-in-game{height:100vh;height:100dvh;grid-template-rows:auto minmax(0,1fr)} body.mg-in-game>#mg-app{width:100%;min-height:0;margin:0 auto;padding:8px 12px 10px} body.mg-in-game #mg-app .mg-stage-layout{height:100%;grid-template-columns:minmax(0,1fr) clamp(300px,calc((100dvh - 150px)*.6),420px);grid-template-rows:auto minmax(0,1fr);gap:8px 14px;align-items:stretch} body.mg-in-game #mg-app .mg-main-panel{min-height:0;display:flex;flex-direction:column;gap:8px} body.mg-in-game #mg-app .mg-main-panel>*{flex:none} body.mg-in-game #mg-app .mg-action-area{flex:1 1 0;min-height:0;display:flex;flex-direction:column;padding:0 12px 8px} /* Plaque: 2172:724 canvas, paint y24..72%, text x19..84 y39..60%. */ body.mg-in-game #mg-app .mg-stage-heading-zone{flex:none;margin:0 -12px 6px} body.mg-in-game #mg-app .mg-stage-heading-zone>.mg-stage-title{--mg-plaque:min(94cqi,560px);width:var(--mg-plaque);margin:calc(var(--mg-plaque)*-.08) auto calc(var(--mg-plaque)*-.0933);font-size:20px} body.mg-in-game #mg-app .mg-stage-heading-zone>.mg-stage-title.mg-mobile-long-heading{font-size:16px} body.mg-in-game #mg-app .mg-stage-heading-zone>.mg-stage-title.mg-long-heading{font-size:13px} body.mg-in-game #mg-app .mg-stage-body{flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain;container-type:size;--mg-reserve:120px;--mg-card-w:clamp(60px,calc((100cqh - var(--mg-reserve))*.75),160px)} body.mg-in-game #mg-app .mg-stage-body :is(h2,h3){margin:4px 0 6px} body.mg-in-game #mg-app .mg-stage-body p{margin:4px 0;line-height:1.55} body.mg-in-game #mg-app .mg-stage-body .mg-button{margin:4px 0} /* Primary controls stay visible when a phase scrolls inside the stage. */ body.mg-in-game #mg-app :is(.mg-review-footer,.mg-inference-controls,.mg-final-controls,.mg-turn-choices){position:sticky;bottom:0;z-index:2;margin:6px 0 0;padding:4px 0;background:#fff5e2} body.mg-in-game #mg-app .mg-stage-dock{height:clamp(140px,21dvh,230px);container-type:size} body.mg-in-game #mg-app .mg-stage-dock .mg-tray-card{flex:0 0 clamp(56px,calc((100cqh - 54px)*.75),130px)} body.mg-in-game #mg-app .mg-stage-dock>.mg-hand-tray{display:flex;flex-direction:column;min-height:0;padding:6px 10px} body.mg-in-game #mg-app .mg-stage-dock .mg-hand-tray-heading{margin:0 0 4px} body.mg-in-game #mg-app .mg-stage-dock .mg-hand-tray-heading h2{font-size:14px} body.mg-in-game #mg-app .mg-stage-dock .mg-hand-carousel{flex:1;min-height:0;padding:2px 2px 4px} body.mg-in-game #mg-app .mg-stage-dock>.mg-log{display:flex;flex-direction:column;min-height:0;padding:0 10px 8px} body.mg-in-game #mg-app .mg-stage-dock>.mg-log>h2{flex:none;margin:0 -10px;padding:4px 10px;font-size:15px} body.mg-in-game #mg-app .mg-stage-dock>.mg-log>.mg-muted{position:absolute;right:10px;top:5px;margin:0;font-size:10px;line-height:1.6;color:#f5e3bb} body.mg-in-game #mg-app .mg-stage-dock .mg-log-streams{flex:1;min-height:0;display:flex;flex-direction:column} body.mg-in-game #mg-app .mg-stage-dock .mg-log-tabs{flex:none;margin-top:6px} body.mg-in-game #mg-app .mg-stage-dock .mg-log-tab{min-height:30px;padding:4px 6px} body.mg-in-game #mg-app .mg-stage-dock :is(.mg-public-log,.mg-secret-log){flex:1;min-height:0;max-height:none} body.mg-in-game #mg-app .mg-stage-dock :is(.mg-public-log,.mg-secret-log) li{padding:5px 8px} body.mg-in-game #mg-app .mg-stage-side{min-height:0;padding:0;container-type:size} body.mg-in-game #mg-app .mg-stage-side>.mg-notes{width:min(100cqi,calc(100cqh*841/1396));margin-inline:auto} body.mg-in-game #mg-app .mg-notes .mg-sheet-row{min-height:38px;grid-template-columns:minmax(0,1fr) 40px} body.mg-in-game #mg-app .mg-notes .mg-sheet-status{min-height:36px;padding:2px 4px} body.mg-in-game #mg-app .mg-notes .mg-sheet-memo{min-height:34px;padding:2px} body.mg-in-game #mg-app .mg-notes .mg-sheet-group h3{font-size:11px;padding:2px 4px;margin:0 0 2px} /* Phase content, sized from the remaining stage height. */ body.mg-in-game #mg-app .mg-initial-hand{margin:6px 0;gap:10px} body.mg-in-game #mg-app .mg-stage-body:has(.mg-hand-panel){--mg-reserve:170px} body.mg-in-game #mg-app .mg-initial-hand>li{flex:0 1 var(--mg-card-w);width:var(--mg-card-w)} body.mg-in-game #mg-app .mg-hand-panel>.mg-kicker{display:none} body.mg-in-game #mg-app .mg-review-footer{margin-top:4px} body.mg-in-game #mg-app .mg-stage-body:has(.mg-inference-option){--mg-reserve:60px} body.mg-in-game #mg-app .mg-stage-body:has(.mg-inference-controls){--mg-reserve:120px} body.mg-in-game #mg-app .mg-inference-options{display:flex;flex-wrap:nowrap;justify-content:center;gap:10px;margin:6px 0} body.mg-in-game #mg-app .mg-inference-options>.mg-button{flex:0 1 var(--mg-card-w);width:var(--mg-card-w);min-width:0;min-height:0;aspect-ratio:3/4;margin:0;padding:3px} body.mg-in-game #mg-app .mg-inference-options>.mg-complete-card>.mg-asset{max-width:100%} body.mg-in-game #mg-app .mg-inference-confirm{padding:6px 12px;line-height:1.5} body.mg-in-game #mg-app :is(.mg-confirmation-cards,.mg-solution-cards,.mg-public-inference-cards){display:flex;justify-content:center;gap:12px;width:auto;max-width:100%;margin:6px auto} body.mg-in-game #mg-app :is(.mg-confirmation-cards,.mg-solution-cards,.mg-public-inference-cards)>:is(*,:last-child:nth-child(3)){flex:0 1 var(--mg-card-w);width:var(--mg-card-w);max-width:none;min-width:0} body.mg-in-game #mg-app .mg-evidence-label{margin-top:2px} /* Calls with a presentation or a result use two columns, so two card rows never stack. */ body.mg-in-game #mg-app .mg-inference:is(:has(.mg-present-card),:has(>.mg-result)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-items:start} body.mg-in-game #mg-app .mg-inference:is(:has(.mg-present-card),:has(>.mg-result))>*{grid-column:2} body.mg-in-game #mg-app .mg-inference:has(.mg-present-card)>.mg-presentation-trace{grid-column:1 / -1} body.mg-in-game #mg-app .mg-inference:has(.mg-present-card)>.mg-inference-call,body.mg-in-game #mg-app .mg-inference:has(>.mg-result)>.mg-result{grid-column:1;grid-row:span 3} body.mg-in-game #mg-app .mg-stage-body:has(.mg-present-card),body.mg-in-game #mg-app .mg-stage-body:has(.mg-result){--mg-reserve:125px} body.mg-in-game #mg-app .mg-inference-call{margin:4px 0;padding:6px 10px} body.mg-in-game #mg-app .mg-stage-body:has(.mg-selection-wait,.mg-inference-outcome){--mg-reserve:150px} body.mg-in-game #mg-app :is(.mg-selection-wait,.mg-inference-outcome){padding:10px 12px} body.mg-in-game #mg-app .mg-revealed-card{width:var(--mg-card-w);max-width:none;margin:6px auto;padding:6px} body.mg-in-game #mg-app .mg-result>.mg-button{margin:6px 0 0} /* Movement: card beside its name, effect and button. */ body.mg-in-game #mg-app .mg-stage-body:has(.mg-movement){--mg-reserve:70px} body.mg-in-game #mg-app .mg-movement-reveal{grid-template-columns:var(--mg-card-w) minmax(180px,260px);grid-template-rows:auto auto 1fr;justify-content:center;align-items:start;max-width:none;column-gap:20px;text-align:left} body.mg-in-game #mg-app .mg-movement-reveal>.mg-current-movement{grid-row:1 / span 3;width:var(--mg-card-w)} body.mg-in-game #mg-app .mg-movement-reveal>.mg-current-movement>.mg-asset{max-width:100%} body.mg-in-game #mg-app .mg-movement>.mg-muted{margin:6px 0 0} /* Map and public observer map scale with the stage height. */ body.mg-in-game #mg-app .mg-stage-body:has(.mg-town-map){--mg-reserve:115px} body.mg-in-game #mg-app .mg-town-map{width:min(80%,calc((100cqh - var(--mg-reserve))*1.7));margin:6px auto 2px;container-type:inline-size} body.mg-in-game #mg-app .mg-town-map .mg-map-label{font-size:clamp(12px,4cqi,22px);padding:clamp(2px,.8cqi,7px) clamp(3px,1.2cqi,10px);max-width:none} body.mg-in-game #mg-app .mg-town-map .mg-location-icon{font-size:clamp(9px,2.4cqi,16px)} body.mg-in-game #mg-app .mg-map-choice{margin:4px 0;padding:5px 10px} body.mg-in-game #mg-app .mg-map-panel>.mg-map-self,body.mg-in-game #mg-app .mg-map-panel>.mg-muted:last-child{margin:4px 8px 0 0} body.mg-in-game #mg-app .mg-observer-movement{grid-template-columns:minmax(150px,220px) minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:6px 16px;align-items:start} body.mg-in-game #mg-app .mg-observer-card{width:min(100%,calc((100cqh - 120px)*.45))} body.mg-in-game #mg-app .mg-observer-route{grid-column:1;margin:0} body.mg-in-game #mg-app .mg-observer-legend{grid-column:1;margin:0;flex-direction:column;gap:4px} body.mg-in-game #mg-app .mg-observer-map{grid-column:2;grid-row:1 / span 3;width:min(100%,calc((100cqh - 60px)*2));margin:0 auto} /* Final answer and round end. */ body.mg-in-game #mg-app .mg-stage-body:has(.mg-final){--mg-reserve:150px} body.mg-in-game #mg-app .mg-final>.mg-kicker{display:none} body.mg-in-game #mg-app .mg-final-warning,body.mg-in-game #mg-app .mg-cooldown{padding:5px 10px;font-size:12px;line-height:1.5} body.mg-in-game #mg-app .mg-turn-choices{margin:6px 0} body.mg-in-game #mg-app .mg-stage-body:has(.mg-victory:not([hidden])){display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0 18px;align-items:start;--mg-reserve:120px} body.mg-in-game #mg-app .mg-victory>.mg-kicker{margin:4px 0} body.mg-in-game #mg-app .mg-rematch{margin:0} } /* Mobile game header: title and timer share one sticky row, so the timer stays in view while the stacked page scrolls. The turn panel is tightened, not removed. */ @media(max-width:700px){ body.mg-in-game #mg-app .mg-game-header{position:sticky;top:0;z-index:15;flex-direction:row;align-items:center;justify-content:space-between;gap:6px;margin:0 -8px;padding:4px 8px;background:#3d2416ee;box-shadow:0 2px 6px #0000004d} body.mg-in-game #mg-app .mg-game-header>.mg-case-title{flex:1 1 0;width:auto;min-width:0;max-width:240px} body.mg-in-game #mg-app .mg-game-header>.mg-timer{flex:1 1 0;width:auto;min-width:0;max-width:210px;margin:0} body.mg-in-game #mg-app .mg-game-header>.mg-timer[hidden]{display:block!important;visibility:hidden} body.mg-in-game #mg-app .mg-game-header>.mg-timer .mg-timer-remaining{font-size:clamp(14px,4.4vw,18px)} body.mg-in-game #mg-app .mg-game-header>.mg-timer::before{font-size:8px} body.mg-in-game #mg-app .mg-game-header>.mg-timer>span:first-child{font-size:8px} body.mg-in-game #mg-app :is(h2,h3,button,summary,[tabindex]){scroll-margin-top:76px} body.mg-in-game #mg-app .mg-current-turn-heading{padding:8px 10px;font-size:clamp(16px,4.4vw,20px)} body.mg-in-game #mg-app .mg-turn-team-panel .mg-team>h2{margin:0 0 4px} body.mg-in-game #mg-app .mg-turn-team-panel .mg-compact-players{grid-template-columns:repeat(3,minmax(0,1fr))} body.mg-in-game #mg-app .mg-turn-team-panel .mg-team[data-count='2'] .mg-compact-players{grid-template-columns:repeat(2,minmax(0,1fr))} body.mg-in-game #mg-app .mg-turn-team-panel .mg-compact-players li{min-height:36px;grid-template-columns:22px minmax(0,1fr)} body.mg-in-game #mg-app .mg-turn-team-panel .mg-compact-players .mg-dot{width:22px;height:22px} } /* A complete card reserves its artwork box before decoding; the name sits over it. */ #mg-app .mg-asset-pending{opacity:0} #mg-app .mg-card-loaded:has(>.mg-asset-pending)>.mg-card-label{position:absolute;inset:0;z-index:1;width:auto;height:auto;margin:0;padding:8px;clip-path:none;overflow:hidden;white-space:normal;display:grid;place-items:center;text-align:center} /* Room menu (info, settings, leave). PC: header dropdown; mobile: under the turn panel. */ #mg-app .mg-controls>summary{font-weight:800;color:#3c4934} #mg-app .mg-controls-body>h3{margin:10px 0 4px;font-size:13px;color:var(--mg-green)} #mg-app .mg-controls-body>h3:first-child{margin-top:0} #mg-app .mg-room-info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;margin:0;font-size:13px} #mg-app .mg-room-info dt{color:var(--mg-color-muted)} #mg-app .mg-room-info dd{margin:0;font-weight:700;overflow-wrap:anywhere} #mg-app .mg-controls-body>.mg-button{width:100%;margin:4px 0} @media(min-width:701px){ #mg-app .mg-game-header>.mg-controls>summary{background:#174c3b;color:#fff3d1;border:1px solid #b9924a} #mg-app .mg-game-header>.mg-controls[open]>summary{background:#24604c} } /* Map pawns: names are listed under the map. On the destination map a group forms one row between the place-label rows, scaled to the map, so it never covers a label. */ #mg-app :is(.mg-town-map,.mg-observer-map){container-type:inline-size;--mg-pawn-size:clamp(18px,4.8cqi,30px);--mg-pawn-spacing:calc(var(--mg-pawn-size)/13);--mg-observer-spacing:var(--mg-pawn-spacing);--mg-pawn-row-spacing:var(--mg-pawn-spacing)} #mg-app :is(.mg-town-map,.mg-observer-map)>.mg-pawn{width:var(--mg-pawn-size);height:var(--mg-pawn-size)} #mg-app :is(.mg-town-map,.mg-observer-map) .mg-pawn-name{display:none} #mg-app .mg-map-legend{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:6px 0 0;padding:0} #mg-app .mg-map-legend li{display:flex;align-items:center;gap:5px;font-size:12px;overflow-wrap:anywhere} @media(max-width:700px){#mg-app .mg-public-inference-cards .mg-evidence-label{font-size:10px;letter-spacing:0}} #mg-app .mg-observer-map .mg-route-marker{transform:translate(-50%,6px)} /* With more players, "had no card" lines grow; they are tightened and the card row shrinks to match, so the public cards stay fully on screen at six players. */ @media(min-width:1001px) and (min-height:600px){ body.mg-in-game #mg-app .mg-presentation-trace{margin:4px 0;padding:4px 8px 4px 26px;font-size:12px;line-height:1.45} body.mg-in-game #mg-app .mg-stage-body:has(.mg-presentation-trace li:nth-child(2)){--mg-reserve:155px} body.mg-in-game #mg-app .mg-stage-body:has(.mg-presentation-trace li:nth-child(4)){--mg-reserve:185px} }