@font-face{font-family:Arcade;src:local('Consolas');font-display:swap}
:root{--paper:#f4f1e8;--ink:#292c28;--red:#dc3433;--line:#d8d5cd;--blue:#235dd1;--mono:Arcade,'Courier New',monospace;--sans:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans)}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,.canvas-wrap:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button:disabled{cursor:default;opacity:.45}[hidden]{display:none!important}
.arcade{max-width:1200px;margin:auto;padding:30px 42px 20px}.heading{text-align:center;margin-bottom:30px}.edition{display:flex;justify-content:center;align-items:center;gap:9px;font:700 11px var(--mono);letter-spacing:1.4px}.edition>span:last-child{color:#7a7c74;margin-left:16px}.live-dot{height:7px;width:7px;background:var(--red);display:inline-block}.heading h1{font:900 clamp(28px,3.4vw,43px)/1.08 var(--mono);letter-spacing:-1.6px;margin:19px 0 12px}.heading h1>span{color:var(--red)}.heading>p{font-size:13px;color:#73756d;margin:0}
.game-layout{display:grid;grid-template-columns:minmax(0,760px) 280px;gap:30px;align-items:start}.game-column{min-width:0}.scoreboard{height:64px;background:var(--ink);color:var(--paper);display:flex;align-items:center;padding:10px 18px;gap:22px;border:2px solid var(--ink);border-bottom:0}.board-state{display:flex;gap:7px;align-items:center;font:700 9px var(--mono);letter-spacing:.5px;flex:1}.status-dot{width:6px;height:6px;background:#a3a897}.status-dot.running{background:#abe382}.status-dot.won{background:#eec74a}.score,.pl-count{display:flex;flex-direction:column;gap:2px}.score>span,.pl-count>span{font:10px var(--mono);color:#abaea4;letter-spacing:.7px}.score strong,.pl-count strong{font:700 23px var(--mono);line-height:1}.pl-count{padding-left:20px;border-left:1px solid #575b51}.pl-count b{color:#a9caff}.pl-count i{font-style:normal;color:#707568;margin:0 5px}.canvas-wrap{position:relative;border:3px solid var(--ink);background:#e4e4df;isolation:isolate;line-height:0;overflow:hidden}#board{width:100%;height:auto;display:block;image-rendering:pixelated;aspect-ratio:10/9}.board-footer{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border:1px solid var(--line);border-top:0;font:700 9px var(--mono);letter-spacing:.45px;color:#6c7067}.board-footer>span:last-child{font-size:8px;font-weight:400}.lock-icon{margin-right:5px}.board-footer .open{color:#31753b}
.side-panel{border-top:2px solid var(--ink);padding-top:19px}.section-label{font:700 10px var(--mono);letter-spacing:1px;display:flex;gap:10px;align-items:center}.section-label>span{color:#96988c;font-size:9px}.mission h2{font-size:24px;line-height:1.13;letter-spacing:-.5px;margin:19px 0 11px}.mission>p{font-size:12px;line-height:1.7;color:#76796e;max-width:252px;margin:0 0 19px}.legend{list-style:none;padding:0;margin:0}.legend li{display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line);padding:14px 0}.flag{position:relative;display:grid;place-items:center;width:37px;height:26px;border:2px solid var(--ink);font:900 13px var(--mono);flex-shrink:0;box-shadow:-3px 3px 0 var(--ink);color:white}.pl{background:#235dd1}.pt{background:#e53b36;font-size:9px}.mdb{background:#f487ce;color:#302034;font-size:10px}.legend li>div{flex:1}.legend strong{display:block;font:700 9px var(--mono);letter-spacing:.05px}.legend small{display:block;color:#74776d;font-size:10px;margin-top:5px;line-height:1.3}.legend li>b{font:700 15px var(--mono)}.exit-tip{display:flex;gap:12px;align-items:center;margin:17px 0 24px}.final-flag{color:#ffda56;background:#d83832;border:2px solid var(--ink);padding:0 6px;font-size:23px}.exit-tip p{font-size:11px;line-height:1.65;color:#77786f;margin:0}.exit-tip strong{font:700 9px var(--mono);color:var(--ink)}.controls-section{border-top:1px solid var(--line);padding-top:17px}.dpad{display:grid;grid-template-columns:49px 49px 49px;grid-template-rows:49px 49px 49px;gap:5px;justify-content:center;margin:19px 0 13px;user-select:none}.dpad button{background:#e9e6dd;border:1px solid #bcbeb1;border-bottom:3px solid #989d8d;border-radius:3px;color:#404638;font-size:19px;touch-action:none;-webkit-tap-highlight-color:transparent}.dpad button:hover{background:#dcdacf}.dpad button:active{transform:translateY(2px);border-bottom-width:1px;background:#c8cebd}.dpad button[data-direction=up]{grid-area:1/2}.dpad button[data-direction=left]{grid-area:2/1}.dpad button[data-direction=right]{grid-area:2/3}.dpad button[data-direction=down]{grid-area:3/2}.dpad-center{grid-area:2/2;display:grid;place-items:center;color:#969d8d;font-size:24px}.control-hint{text-align:center;font:8px var(--mono);color:#777c70;letter-spacing:.3px;margin:0 0 17px}.control-hint span{margin:0 4px}.actions{display:flex;gap:8px}.button{border:2px solid var(--ink);font:700 10px var(--mono);letter-spacing:.4px;padding:13px 14px;min-height:44px;line-height:1.2;border-radius:0}.button:hover{filter:brightness(.94)}.button.primary{background:var(--red);color:#fff;box-shadow:3px 3px 0 var(--ink);border-color:var(--ink)}.primary span{margin-left:16px;font-size:17px}.secondary{background:transparent;font-size:9px;padding:10px 9px;flex:1}.speed-label{display:flex;align-items:center;justify-content:space-between;font:8px var(--mono);letter-spacing:.3px;margin-top:14px;color:#777c70}.speed-label select{padding:7px 6px;border:1px solid #bbbeb1;background:transparent;color:var(--ink);font:10px var(--mono);max-width:130px}.rule-note{font-size:10px;color:#7d8076;line-height:1.7;display:flex;gap:9px;margin-top:21px}.rule-note>span{font:700 15px var(--mono);color:#a1a496}.page-footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px;margin-top:25px;font:8px var(--mono);letter-spacing:.8px;color:#929588}
.overlay{position:absolute;inset:0;background:#f4f1e880;display:grid;place-items:center;line-height:normal;backdrop-filter:blur(1px);z-index:2}.overlay-card{padding:27px 31px;text-align:center;background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 #292c2826;width:min(85%,360px)}.card-eyebrow{font:700 9px var(--mono);color:#898e7d;letter-spacing:1px}.overlay h2{font:900 32px var(--mono);letter-spacing:-1px;color:var(--red);margin:18px 0 11px}.overlay p{font-size:12px;line-height:1.8;margin:0 0 22px}.card-hint{display:block;font:8px var(--mono);letter-spacing:.4px;color:#8a8d81;margin-top:20px}.overlay.lost{background:#e3313033}.overlay.lost .overlay-card{box-shadow:6px 6px 0 #dc343388}.overlay.lost h2{animation:shake .3s linear 2}.notice{position:absolute;top:12px;left:12px;right:12px;z-index:3;width:fit-content;max-width:calc(100% - 24px);padding:10px 13px;background:#dc3433;color:white;border:2px solid var(--ink);box-shadow:3px 3px 0 #292c2840;font:700 11px/1.45 var(--mono);pointer-events:none}.notice.MDB{background:#f487ce;color:#302034}.notice.open{background:#d6e7b7;color:#344632}#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}.canvas-wrap.hit{animation:shake .28s linear 2}@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.game-column>.controls-section{margin-top:22px;display:grid;grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr);column-gap:15px}.game-column>.controls-section>.section-label{grid-column:1/4}.game-column>.controls-section>.dpad{grid-column:2;grid-row:2/5;margin:15px 0}.game-column>.controls-section>.actions{grid-column:3;grid-row:2}.game-column>.controls-section>.speed-label{grid-column:3;grid-row:3;flex-wrap:wrap;gap:7px;margin-top:0}.game-column>.controls-section>.control-hint{grid-column:1;grid-row:2/5;line-height:1.8;margin:0;text-align:left}
@media(min-width:1450px){.arcade{padding-top:42px}.heading{margin-bottom:36px}.game-layout{gap:38px}}
@media(max-width:850px){.arcade{padding:24px}.game-layout{grid-template-columns:minmax(0,1fr) 245px;gap:20px}.board-state{font-size:8px}.scoreboard{gap:12px;padding:10px 12px}.score strong,.pl-count strong{font-size:20px}.pl-count{padding-left:12px}.score>span,.pl-count>span{font-size:8px}.heading h1{font-size:32px}.mission h2{font-size:23px}}
@media(max-width:680px){.arcade{padding:22px 14px 15px}.heading{margin-bottom:22px}.heading h1{font-size:clamp(24px,6vw,35px);margin-top:17px;letter-spacing:-1px}.heading>p{font-size:11px}.edition{font-size:9px}.game-layout{display:flex;flex-direction:column;gap:25px}.game-column,.side-panel{width:100%}.scoreboard{height:58px}.board-state{font-size:8px;max-width:125px}.scoreboard{justify-content:space-between}.board-footer{padding:10px 8px;font-size:8px}.board-footer>span:last-child{font-size:7px;letter-spacing:0}.side-panel{display:flex;flex-direction:column;border-top:0;padding-top:0}.controls-section{order:-1;border-top:0;padding-top:0;position:relative}.controls-section>.section-label{justify-content:center}.dpad{grid-template-columns:55px 55px 55px;grid-template-rows:49px 49px 49px;margin-top:13px;margin-bottom:12px}.actions{max-width:350px;margin:auto}.speed-label{max-width:350px;margin:13px auto 0;font-size:9px}.mission{margin-top:27px;border-top:1px solid var(--line);padding-top:20px}.mission h2{font-size:23px;margin:13px 0 9px}.mission h2 br{display:none}.mission>p{max-width:none}.legend li{gap:14px}.legend strong{font-size:10px}.legend small{font-size:11px}.legend li>b{font-size:18px}.exit-tip{margin-bottom:0}.rule-note{margin-top:12px}.page-footer{font-size:7px;line-height:1.6;gap:12px}.page-footer>span:last-child{text-align:right}.overlay-card{padding:20px 15px;max-width:320px}.overlay h2{font-size:27px;margin:12px 0 10px}.overlay p{font-size:11px;margin-bottom:16px}.card-eyebrow,.card-hint{font-size:8px}.card-hint{margin-top:15px}.notice{font-size:9px;padding:8px;top:8px;left:8px;right:8px}.button{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:680px){.game-column>.controls-section{display:block;margin-top:22px}.game-column>.controls-section>.dpad{margin:13px 0}.game-column>.controls-section>.control-hint{text-align:center;margin:0 0 15px}.game-column>.controls-section>.speed-label{margin:13px auto 0}.mission{margin-top:0}.side-panel{border-top:1px solid var(--line);padding-top:0}}

.notice-area{min-height:70px;display:flex;align-items:center;padding:0 0 12px}.notice-area>.notice{position:static;inset:auto;max-width:100%;margin:0;padding:9px 12px;line-height:1.45}.legend img.flag{width:42px;height:36px;object-fit:contain;border:0;box-shadow:none;background:none}.exit-tip img.final-flag{width:40px;height:40px;object-fit:contain;border:0;padding:0;background:none}@media(max-width:680px){.notice-area{min-height:78px;padding-bottom:10px}.notice-area>.notice{font-size:10px;padding:8px 10px}}

.title-row{display:flex;align-items:center;justify-content:center;gap:18px;margin:19px 0 12px}.heading .title-row h1{margin:0}.title-head{width:78px;height:78px;object-fit:contain;flex-shrink:0;clip-path:inset(2.6% 2.8% 0 4.9%)}.legend img.flag{width:52.5px;height:45px}.exit-tip img.final-flag{width:50px;height:50px}@media(max-width:680px){.title-row{gap:10px;margin-top:17px}.title-head{width:54px;height:54px}.heading .title-row h1{font-size:clamp(20px,5.5vw,32px);letter-spacing:-1px}}

/* Keep the complete play area and touch controls in the first mobile screen.
   svh budgets for the browser toolbar; the logical board stays 40 × 36. */
@media(max-width:680px){
  .arcade{padding:8px 10px 12px}
  .heading{margin-bottom:5px}
  .edition{font-size:8px;line-height:10px;letter-spacing:1px}
  .title-row{gap:8px;margin:5px 0 3px}
  .title-head{width:40px;height:40px}
  .heading .title-row h1{font-size:clamp(18px,5vw,23px);line-height:1.06;letter-spacing:-.8px}
  .heading>p{font-size:9px;line-height:12px}
  .notice-area{height:32px;min-height:0;padding:0 0 3px;align-items:center}
  .notice-area>.notice{width:100%;font-size:8px;line-height:10px;padding:3px 6px;box-shadow:none}
  .scoreboard{height:40px;padding:5px 10px;gap:8px}
  .board-state{font-size:7px;max-width:115px;letter-spacing:0}
  .score>span,.pl-count>span{font-size:7px;letter-spacing:.3px}
  .score strong,.pl-count strong{font-size:20px}
  .pl-count{padding-left:10px}
  .canvas-wrap{width:min(100%,calc((100svh - 300px)*10/9));margin-inline:auto}
  .board-footer{min-height:18px;padding:3px 6px;font-size:7px}
  .board-footer>span:last-child{font-size:6px}
  .game-column>.controls-section{display:grid;grid-template-columns:140px minmax(0,1fr);grid-template-rows:44px 44px;gap:4px 8px;margin-top:8px;padding:0;border:0}
  .game-column>.controls-section>.section-label,.game-column>.controls-section>.control-hint{display:none}
  .game-column>.controls-section>.dpad{grid-column:1;grid-row:1/3;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:4px;margin:0;justify-content:start}
  .dpad button{font-size:17px;min-width:44px;min-height:44px}
  .dpad button[data-direction=up]{grid-area:1/2}
  .dpad button[data-direction=left]{grid-area:2/1}
  .dpad button[data-direction=down]{grid-area:2/2}
  .dpad button[data-direction=right]{grid-area:2/3}
  .dpad-center{display:none}
  .game-column>.controls-section>.actions{grid-column:2;grid-row:1;width:100%;margin:0;gap:4px}
  .actions .button{min-height:44px;padding:5px 3px;font-size:8px;letter-spacing:0;min-width:0}
  .game-column>.controls-section>.speed-label{grid-column:2;grid-row:2;width:100%;margin:0;flex-wrap:nowrap;gap:4px;font-size:7px;letter-spacing:0}
  .speed-label select{height:44px;width:88px;min-width:0;padding:5px 2px;font-size:9px;flex-shrink:0}
  .game-layout{gap:16px}
  .side-panel{margin-top:4px}
  .mission{padding-top:14px}
  .overlay-card{padding:10px 12px;max-width:290px}
  .overlay h2{font-size:22px;margin:8px 0}
  .overlay p{font-size:10px;line-height:1.4;margin-bottom:10px}
  .card-eyebrow{font-size:7px;letter-spacing:.5px}
  .card-hint{display:none}
  .overlay .button{padding:8px 12px;font-size:9px}
}

.game-column>.controls-section>.mobile-pad{display:none}
@media(max-width:680px){
  .canvas-wrap{width:min(100%,calc((100svh - 384px)*10/9))}
  .game-column>.controls-section{grid-template-columns:92px minmax(88px,1fr) 92px;grid-template-rows:44px 44px 44px;gap:4px}
  .game-column>.controls-section>.desktop-pad{display:none}
  .game-column>.controls-section>.mobile-pad{display:grid;grid-template-columns:44px 44px;grid-template-rows:44px 44px;gap:4px;margin:0}
  .game-column>.controls-section>.mobile-pad-left{grid-column:1;grid-row:1/3}
  .game-column>.controls-section>.mobile-pad-right{grid-column:3;grid-row:1/3}
  .mobile-pad-left button[data-direction=up]{grid-area:1/2}
  .mobile-pad-left button[data-direction=left]{grid-area:2/1}
  .mobile-pad-left button[data-direction=down]{grid-area:2/2}
  .mobile-pad-right button[data-direction=up]{grid-area:1/1}
  .mobile-pad-right button[data-direction=down]{grid-area:2/1}
  .mobile-pad-right button[data-direction=right]{grid-area:2/2}
  .game-column>.controls-section>.actions{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;margin:0;width:100%;gap:4px}
  .actions .button{height:44px;flex:1;font-size:8px;padding:4px 2px}
  .game-column>.controls-section>.speed-label{grid-column:1/4;grid-row:3;max-width:none;justify-content:flex-end;gap:8px;font-size:8px}
}

.title-head{width:156px;height:156px;clip-path:inset(0 3.8% 2.3% 4.8%)}
@media(max-width:680px){.title-head{width:80px;height:80px}}

/* Larger, readable flag legend at both desktop and mobile breakpoints. */
.legend li>div{min-width:0}
.legend strong{font-size:18px;line-height:1.3;letter-spacing:-.5px;overflow-wrap:anywhere}
.legend small{font-size:20px;line-height:1.4}
.legend li>b{font-size:30px;flex-shrink:0}
.exit-tip p{font-size:22px;line-height:1.5;min-width:0}
.exit-tip strong{font-size:18px;line-height:1.3;overflow-wrap:anywhere}
.rule-note{font-size:20px;line-height:1.5}
.rule-note>span{font-size:30px}
@media(max-width:680px){
  .legend strong{font-size:20px}
  .legend small{font-size:22px}
  .legend li>b{font-size:36px}
}

.legend small,.exit-tip p,.overlay p{font-family:var(--mono)}
.legend small,.exit-tip p{letter-spacing:-.5px}
.game-column>.controls-section>.control-options{grid-column:3;grid-row:3/5;display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0}
.keyboard-hint{margin:0;font:10px/1.4 var(--mono);color:#74776d}
.control-options>.speed-label{margin:0;gap:6px}
@media(max-width:680px){
  .game-column>.controls-section>.control-options{grid-column:1/4;grid-row:3;flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
  .keyboard-hint{font-size:9px;line-height:1.3;min-width:0;flex:1}
  .control-options>.speed-label{font-size:8px;gap:6px;flex-shrink:0;width:146px;max-width:none}
}