:root{font-family:Inter,"Segoe UI","Malgun Gothic",sans-serif;color:#e8eeeb;background:#101b20;font-synthesis:none;font-weight:400;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 0%,#20373566,transparent 55%);min-height:100dvh}button,input,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,summary:focus-visible,canvas:focus-visible{outline:2px solid #bafa9c;outline-offset:4px}.app{width:min(100%,480px);margin:auto;padding:28px 22px 22px}.masthead{display:flex;align-items:center;justify-content:space-between}.brand{font-size:13px;letter-spacing:2.2px;font-weight:750;display:flex;align-items:center;gap:9px}.brand-symbol{font-size:27px;line-height:1;color:#c1ed9c}.version{font-size:9px;color:#8a9b9e;letter-spacing:1px;border:1px solid #384548;border-radius:5px;padding:5px 7px}.intro{display:flex;align-items:flex-end;justify-content:space-between;padding:27px 0 24px}.eyebrow{font-size:9px;color:#a7c48c;letter-spacing:2.4px;margin:0 0 10px}h1{font-size:28px;line-height:1.38;font-weight:600;letter-spacing:-1.2px;margin:0}.grid-badge{font-size:27px;letter-spacing:1px;color:#9cafad;font-weight:300;padding-bottom:3px}.grid-badge span{font-size:18px;color:#5d7275}.grid-badge small{display:block;font-size:8px;letter-spacing:1.6px;text-align:right;margin-top:6px;color:#6f8589}.field-panel{background:#19282d;border:1px solid #344549;border-radius:15px;overflow:hidden;box-shadow:0 16px 40px #0002}.field-heading{display:flex;justify-content:space-between;align-items:center;padding:14px 15px;font-size:11px}.field-heading small{margin-left:7px;font-size:10px;color:#8b9d9f}.live-dot{display:inline-block;width:5px;height:5px;background:#bced9a;border-radius:50%;margin-right:7px}#phase{font-size:9px;color:#bfe69e;background:#b2ed9710;padding:5px 8px;border-radius:4px}.board-wrap{padding:0 10px}canvas{width:100%;aspect-ratio:1;display:block;touch-action:none;border-radius:6px}.field-footer{padding:12px 15px 14px;display:flex;justify-content:space-between;color:#82979a;font-size:10px}.field-footer b{font-weight:600;color:#cfdbd9;margin-left:7px}.divider{margin:0 5px;color:#526a70}.forecast-dot{display:inline-block;width:5px;height:5px;border:1px solid #d8bd8d;margin-left:7px;transform:rotate(45deg)}.legend{display:flex;justify-content:center;gap:18px;padding:13px 0 24px;font-size:9px;color:#90a2a4}.legend span{display:flex;align-items:center;gap:5px}.legend i{display:inline-block;width:8px;height:8px;border-radius:2px}.legend-pollution{background:#925e83}.legend-core{background:#ef9bbf;transform:rotate(45deg)}.legend-wall{background:#667879}.legend-forecast{border:1px dashed #e2c992}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}h2{font-size:13px;font-weight:600;margin:0}.section-heading>span{font-size:10px;color:#8ca0a3}.section-heading b{color:#c8d4d2;font-weight:500}.characters{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.character{position:relative;display:flex;align-items:center;gap:8px;background:#1a292e;border:1px solid #354549;border-radius:10px;padding:12px 10px;text-align:left;min-height:61px;color:#a3b3b4}.character[aria-pressed=true]{border-color:var(--character-color);background:color-mix(in srgb,var(--character-color) 9%,#18272c);color:#eaf2ed}.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--character-color);color:#19252a;font-size:12px;font-weight:750;flex-shrink:0}.character-name{font-size:11px;font-weight:600}.character small{display:block;font-size:9px;font-weight:400;color:#8ba0a3;margin-top:5px}.character[aria-pressed=true]::after{content:"";position:absolute;right:7px;top:7px;width:4px;height:4px;background:var(--character-color);border-radius:50%}.path-status{display:flex;justify-content:space-between;align-items:center;padding-top:14px;font-size:11px;color:#c0cecd}.text-button{background:none;border:0;color:#99a9aa;font-size:10px;padding:6px 0 6px 10px}.hint{font-size:10px;line-height:1.6;color:#889e9f;margin:7px 0 17px;min-height:16px}.actions{display:grid;grid-template-columns:1.12fr 1fr;gap:9px}.actions button{border-radius:9px;min-height:47px;font-size:12px;font-weight:650}.actions span{margin-right:8px;font-size:13px}.primary{background:#c6eca4;color:#1c3323;border:1px solid #c6eca4}.secondary{border:1px solid #405458;background:#203137;color:#d6e1dd}.secondary small{margin-left:4px;font-size:9px;color:#90a5a7}.debug{margin-top:22px;border-top:1px solid #2c3d42;border-bottom:1px solid #2c3d42;font-size:11px}summary{cursor:pointer;display:flex;justify-content:space-between;padding:16px 0;color:#a1b2b3;list-style:none}summary::-webkit-details-marker{display:none}.summary-hint{font-size:9px;color:#6f898d}.summary-hint::after{content:" +";margin-left:10px}.debug[open] .summary-hint::after{content:" −"}.debug-body{padding-bottom:15px}.debug-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}.debug-actions label{display:flex;align-items:center;font-size:10px}.debug-actions input{accent-color:#c6eca4}.debug-actions button{border:1px solid #4c6367;border-radius:5px;background:#26393f;color:#e5eeeb;padding:8px;font-size:10px}.debug p{font-size:10px;color:#839a9e;line-height:1.7}.debug ol{max-height:150px;overflow:auto;font-family:monospace;font-size:10px;line-height:1.9;margin-bottom:0;padding-left:25px;color:#b5c6c4}.page-footer{display:flex;justify-content:space-between;padding-top:18px;color:#59747a;font-size:8px;letter-spacing:1px}@media(min-width:700px){.app{padding-top:40px;padding-bottom:35px}}@media(max-width:360px){.app{padding:18px 14px}.intro{padding:20px 0}h1{font-size:25px}.legend{gap:12px}.character{padding:11px 8px;gap:6px}.field-heading small{margin-left:4px}.avatar{width:25px;height:25px}}
.skill-info{margin-top:12px;padding:12px;border:1px solid #344549;border-radius:8px;background:#1a292e;font-size:11px}.skill-info strong{font-weight:600;color:#d7eac6}.skill-info p{margin:6px 0;line-height:1.65;color:#b5c7c7}.skill-info>span{font-size:10px;color:#94afb4}.legend{gap:12px;flex-wrap:wrap}#skill-feedback{margin:9px 0 0;min-height:32px}
.round-status{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#91a8a9}.round-status strong{color:#c6eca4;letter-spacing:1px;font-size:12px}#objective{margin:8px 0 14px}.turn-actions{grid-template-columns:1fr}#preview-note{padding:9px 10px;border-left:2px solid #789c9d;line-height:1.7;margin:10px 0;color:#a2b7b8}#phase[data-phase=EXECUTING]{color:#f2bc73}#phase[data-phase=SPREADING]{color:#ef9bbf}dialog{width:calc(100% - 40px);max-width:370px;border:1px solid #53695e;border-radius:16px;padding:26px;background:#192b2e;color:#e8eeeb;box-shadow:0 15px 60px #0008}dialog::backdrop{background:#091316ce}dialog h2{font-size:25px;margin:12px 0}#result-detail{font-size:12px;line-height:1.9;white-space:pre-line;color:#bdceca}dialog button{width:100%;min-height:46px;border-radius:8px;margin-top:14px}

.map-picker{display:flex;align-items:center;gap:7px;color:#91a8a9}.map-picker select{min-height:40px;max-width:142px;padding:0 9px;border:1px solid #4b6265;border-radius:8px;background:#203137;color:#e8eeeb;font:inherit;font-size:11px}.map-picker select:focus-visible{outline:2px solid #bafa9c;outline-offset:2px}canvas{overscroll-behavior:contain}#preview-note{margin:7px 0;padding:7px 9px}.legend{padding-bottom:15px}@media(max-width:480px){.app{padding-top:14px}.intro{padding:13px 0 14px}.eyebrow{margin-bottom:5px}.field-heading{padding:10px 12px}.field-footer{padding:9px 12px}.legend{padding:9px 0 13px}.section-heading{margin-bottom:8px}.skill-info{margin-top:8px;padding:9px}#skill-feedback{margin-top:6px;min-height:20px}.hint{margin-bottom:9px}.path-status{padding-top:8px}}
[hidden]{display:none!important}.mode-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}.mode-controls button{min-height:44px;padding:0 14px;border-radius:8px;font-size:11px}.character .cooldown{font-size:8px;color:#edc692}#phase[data-phase=RUNNING]{color:#c6eca4}#phase[data-phase=PAUSED]{color:#f2bc73}.text-button{min-height:44px}@media(max-width:480px){.intro{padding:10px 0}.intro h1{font-size:22px}.intro .eyebrow{display:none}.mode-controls{margin-bottom:4px}}
.mode-controls{flex-wrap:wrap;gap:6px}#setup-actions{margin-top:8px}.direction-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 8px}.direction-controls button{min-height:44px;border:1px solid #48605f;border-radius:8px;background:#203137;color:#dcebcf;font-size:19px}.map-picker select{min-height:44px}.turn-actions{margin-top:8px}@media(max-width:480px){.app{padding:12px 8px}.board-wrap{padding:0 2px}.intro{padding:8px 0}.intro h1{font-size:16px}.grid-badge small{display:none}.field-heading{padding:8px}.field-footer{padding:8px}.field-footer b{margin-left:4px}.legend{padding:8px 0}.mode-controls #pause{margin-left:auto}}
.test-settings{margin:0 0 8px;border-bottom:1px solid #344549;font-size:11px}.test-settings summary{min-height:44px;align-items:center;padding:8px 0;gap:8px}.test-settings[open] .summary-hint::after{content:" −"}.settings-body{display:grid;gap:6px;padding-bottom:8px}.settings-body .map-picker{justify-content:space-between}.settings-body select{max-width:190px;min-width:160px}.settings-body .hint{margin:3px 0}#contribution,#result-performance{white-space:pre-line}#result-performance{font-size:11px;line-height:1.9;color:#b9d4c1}

.camera-controls{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px 0}.camera-controls button{min-width:44px;min-height:44px;border:1px solid #48605f;border-radius:8px;background:#203137;color:#dcebcf;font-size:14px}.camera-controls #zoom-reset{padding:0 12px;font-size:11px}.camera-controls output{min-width:44px;text-align:center;font-size:11px;font-variant-numeric:tabular-nums}.camera-hint{font-size:9px;color:#90a2a4;text-align:center;margin:5px 0;line-height:1.5}

.stage-tools{display:flex;align-items:center;gap:8px;margin-bottom:4px}.stage-tools p{flex:1;min-width:0;font-size:10px;line-height:1.6;color:#c6eca4;margin:0}.stage-tools button{flex-shrink:0;min-height:44px;padding:0 12px;border-radius:8px;font-size:11px}.record-help{font-size:9px;line-height:1.6;color:#8da3a4;margin:3px 0 10px}#result-record{white-space:pre-line;font-size:12px;line-height:1.8;color:#c6eca4}

.turn-banner{display:flex;align-items:center;flex-wrap:wrap;gap:5px 12px;padding:12px 12px 0;color:#c6eca4}.turn-banner strong{display:inline-block;font-size:22px;transform-origin:left center;font-variant-numeric:tabular-nums}.turn-banner #round{font-size:11px;color:#a8bbba}.turn-banner.turn-warning{color:#ffbe76}#last-turn{font-size:12px;font-weight:700;width:100%;min-height:0}#last-turn:empty{display:none}

#objective{white-space:pre-line;line-height:1.7}
/* Start preparation: keep the existing action directly below the board, never over it. */
#start-slot #setup-actions,#start-slot #turn-actions{margin:8px;padding:0 0 env(safe-area-inset-bottom,0px)}
#setup-actions.fixed-start{grid-template-columns:1fr}
.turn-layout .turn-actions{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
@media(max-width:480px){
  .turn-layout .masthead,.turn-layout .intro{display:none}
  .turn-layout .app{padding-top:max(8px,env(safe-area-inset-top,0px))}
  .turn-layout .board-wrap{width:min(100%,calc(100dvh - 340px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)));margin-inline:auto}
  .turn-layout .turn-banner{padding-top:8px}
}
/* Reactions are part of the result, not hidden behind its backdrop. */
#victory-reaction{height:84px;aspect-ratio:auto;pointer-events:none}
#result{padding:16px;max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto}
#result h2{font-size:22px;margin:8px 0}
#result-detail,#result-performance,#result-record{margin:6px 0;line-height:1.55}
#result button{margin-top:8px}

#result-advance{min-height:52px;font-weight:700}#result #restart.secondary{min-height:44px}
/* Field help stays above the mobile board and never traps focus or input. */
#field-info{position:fixed;z-index:20;top:max(8px,env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:370px;max-height:180px;overflow:auto;box-sizing:border-box;padding:12px 14px;border:1px solid #947388;border-radius:12px;background:#192b2ef5;box-shadow:0 4px 18px #0006;font-size:13px;line-height:1.6}
#field-info strong{display:block;padding-right:40px;color:#efd0e0}#field-info p{margin:5px 0 0}#field-info-close{float:right;width:44px;height:44px;margin:-8px -8px 0 0;background:transparent;color:#dcebcf;font-size:22px;border:0}
#core-lesson{margin:8px 10px;padding:8px;border-left:2px solid #c980a6;line-height:1.6;font-size:12px}
/* Playtest forms remain separate from the result's progression buttons. */
.test-form{max-height:calc(100dvh - 24px);overflow:auto;padding:18px}
.test-form h2{font-size:20px}.test-form p{font-size:12px;line-height:1.6}
.test-form label{display:block;font-size:13px;margin:12px 0}
.test-form input,.test-form select,.test-form textarea{display:block;width:100%;min-height:44px;margin-top:6px;padding:10px;border:1px solid #53695e;border-radius:6px;background:#101b20;color:#e8eeeb;font:inherit}
.test-form textarea{resize:vertical}.collection-notice{color:#b9d4c1}
#result .text-button{font-size:12px;margin-top:2px;padding:4px;min-height:44px}
#feedback-tools{margin-top:10px}#feedback-status:empty{display:none}
.admin{padding:28px;max-width:1500px;margin:auto}.admin section{margin:28px 0}.admin h2{font-size:19px;margin:20px 0 12px}.admin p{font-size:13px;line-height:1.7}.admin button,.admin input,.admin select{font:inherit;min-height:44px;padding:8px;margin:4px;border-radius:6px;border:1px solid #53695e;background:#203137;color:#e8eeeb}.table-scroll{overflow-x:auto;margin:12px 0}.admin table{border-collapse:collapse;font-size:12px;width:100%}.admin th,.admin td{border:1px solid #405458;padding:10px;text-align:left;vertical-align:top;white-space:pre-wrap;overflow-wrap:anywhere;min-width:75px}.admin th{background:#203137}.admin td{max-width:360px}

/* Player-facing information: keep goals/actions visible, details available on demand. */
#play-help{border-top:1px solid #344549;margin-top:8px}
#play-help summary{align-items:center;min-height:44px;font-size:13px;padding:10px 0}
#play-help[open] .summary-hint::after{content:" −"}
#play-help .camera-hint{font-size:13px;line-height:1.6;text-align:left}
#play-help .hint,#play-help .skill-info{font-size:13px}
#play-help .legend{font-size:11px}
#tutorial{max-width:340px;padding:18px;max-height:calc(100dvh - 32px);overflow:auto}
#tutorial h2{font-size:19px;line-height:1.4;margin:0 0 12px}
#tutorial-copy p{font-size:15px;line-height:1.65;margin:8px 0}
#tutorial button{margin-top:10px;min-height:48px;font-size:15px}
.play-layout .round-status{gap:8px;margin-bottom:6px}
.play-layout .map-picker{flex:1;min-width:0;font-size:12px}
.play-layout .map-picker select{max-width:none;min-width:0;flex:1}
.play-layout #tutorial-help{font-size:12px;padding:0 8px;flex-shrink:0}
.play-layout .field-panel{position:relative}
.play-layout .field-heading{position:absolute;right:10px;top:10px;padding:0}
.play-layout .field-heading>span:first-child{display:none}
.play-layout .turn-banner{min-height:44px;padding:8px 70px 8px 10px;gap:3px 10px}
.play-layout .turn-banner strong{font-size:20px}
.play-layout #last-turn{position:absolute;right:10px;top:35px;width:auto;font-size:11px}
.play-layout #objective{font-size:12px;margin:8px 0;line-height:1.6}
.play-layout #stage-info{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px}
.play-layout .stage-tools{justify-content:flex-end;margin:0}
.play-layout .planning{margin-top:8px}
.play-layout .character-name{font-size:12px}
.play-layout .character small{font-size:11px}
.play-layout #message{font-size:12px;margin:4px 0 8px}
.play-layout .path-status{padding-top:2px}
.play-layout #feedback-tools{margin-top:0}
.play-layout #send-feedback{font-size:12px;padding-left:0}
.play-layout #feedback-status{font-size:11px;margin:0;min-height:0}
@media(max-width:480px){
  .play-layout .direction-controls{display:none}
  .play-layout.turn-layout .board-wrap{width:100%}
}