:root{color-scheme:dark;--ink:#101c27;--muted:#a9b4b8;--cream:#f4e1bb;--gold:#ffbd36;--teal:#65d0c6;--paper:#efd9ad;font-family:'Segoe UI',system-ui,sans-serif;background:var(--ink);color:var(--cream)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 40% 5%,#263a43 0,transparent 60%),#101c27;min-height:100vh}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,canvas:focus-visible{outline:3px solid var(--teal);outline-offset:4px}button:disabled{opacity:.45;cursor:default}.shell{max-width:1370px;margin:auto;padding:30px 42px 16px}.masthead{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:20px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--muted);margin:0 0 7px}h1{font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:clamp(34px,5vw,72px);letter-spacing:1px;line-height:1;margin:0}h1 span{color:var(--gold)}.header-tools{display:flex;gap:8px}.quiet{background:#20303b;border:1px solid #40505a;color:var(--cream);border-radius:7px;padding:9px 13px;font-size:12px;font-weight:650;white-space:nowrap}.quiet:hover:not(:disabled){background:#31434c}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:25px;align-items:start}.yard{min-width:0}.yard-top{display:flex;justify-content:space-between;align-items:center;padding:0 5px 12px}.yard-top h2{font-size:21px;margin:0;font-weight:650}.move-counter{display:flex;align-items:center;gap:12px}.move-counter span{font-size:10px;letter-spacing:1.5px;color:var(--muted);font-weight:800}.move-counter strong{font-family:Impact,'Arial Narrow',sans-serif;font-size:36px;line-height:1;background:#0b1720;border:2px solid #354c59;min-width:67px;text-align:center;padding:5px 8px;border-radius:9px}.board-wrap{position:relative;border:10px solid #3d4547;border-radius:15px;overflow:hidden;background:#827566;box-shadow:0 13px 0 #071119,0 22px 34px #0005}.board-wrap:before,.board-wrap:after{content:'';height:7px;width:45px;background:repeating-linear-gradient(120deg,#2a3335 0 8px,#e6a628 8px 16px);position:absolute;z-index:2;pointer-events:none;bottom:0;left:12%}.board-wrap:after{left:auto;right:12%}canvas{display:block;width:100%;height:auto;aspect-ratio:11/9;touch-action:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:25px;background:#0a1822cb;backdrop-filter:blur(4px);z-index:3}.overlay[hidden]{display:none}.overlay-inner{max-width:420px;text-align:center}.overlay h2{font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:clamp(30px,4vw,50px);line-height:1.05;color:var(--cream);margin:12px 0}.overlay p:not(.eyebrow){font-size:16px;line-height:1.65;color:#d9dddc;white-space:pre-line;margin:12px 0 22px}.overlay .eyebrow{color:var(--teal)}.primary{display:block;min-width:220px;max-width:100%;margin:0 auto;background:var(--gold);border:0;border-bottom:4px solid #a8710b;border-radius:9px;padding:14px 23px;color:#13212c;font-size:16px;font-weight:800;box-shadow:0 5px 15px #0003}.primary:hover:not(:disabled){background:#ffcc60;transform:translateY(-1px)}.secondary{display:block;margin:13px auto 0;background:none;border:0;border-bottom:1px solid #768b95;color:var(--cream);font-size:13px;padding:6px}.secondary[hidden]{display:none}.board-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px;min-height:46px}.board-footer p{font-size:12px;line-height:1.4;color:var(--teal);margin:0;max-width:48%;min-height:32px}.board-footer>div{display:flex;gap:5px}.level-nav{display:flex;gap:7px;margin-top:12px}.level-nav button{flex:1;min-width:0;border:1px solid #394951;background:#1c2b34;color:#aab9bd;padding:8px 2px;border-radius:6px;font-size:12px;font-weight:700}.level-nav button[aria-current=true]{background:var(--gold);color:#17232b;border-color:var(--gold)}.level-nav button.done:not([aria-current=true]){color:var(--teal);border-color:#4e8581}.dispatch{position:relative;margin-top:4px;background:var(--paper);color:#17242b;border-radius:5px;padding:24px 23px 18px;box-shadow:0 6px 0 #9f8d6e,0 20px 32px #0003;background-image:radial-gradient(#856e3a1a .6px,transparent .6px);background-size:5px 5px}.dispatch:before,.dispatch:after{content:'';position:absolute;top:11px;left:11px;width:7px;height:7px;border-radius:50%;background:#626665;box-shadow:inset 0 1px 2px #0009}.dispatch:after{left:auto;right:11px}.dispatch .eyebrow{color:#78644a}.dispatch>h2{font-family:Impact,'Arial Narrow',sans-serif;font-size:31px;letter-spacing:.5px;font-weight:400;line-height:1.12;margin:11px 0}.intro{font-size:13px;line-height:1.5;color:#5e5549;margin:0 0 19px}.player{padding:17px 0;border-top:1px solid #99896b66}.player-title{display:flex;align-items:center;gap:8px}.player-title h3{font-size:16px;margin:0 0 2px;color:#257b77}.player-two h3{color:#996713}.player-title span:not(.robot-icon){font-size:11px;color:#625b50}.robot-icon{display:block;width:52px;height:52px;flex-shrink:0;background-image:url('./assets/sprites.png');background-size:156px 104px;background-position:0 0}.robot-icon.gold{background-position:-52px 0}.dpad{display:grid;grid-template-columns:repeat(3,44px);gap:5px;justify-content:center;margin-top:12px}.dpad button{border:1px solid #131f25;border-bottom:4px solid #16232b;border-radius:7px;background:#35434a;color:#fff0cf;height:43px;font-size:19px;font-weight:800;line-height:1}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.dpad button:hover,.dpad button.pressed{background:#4b6269;border-bottom-width:1px;transform:translateY(2px)}.player-two .dpad button{font-size:24px}.dispatch-note{border-top:1px dashed #99896b;padding-top:17px;margin-top:5px}.dispatch-note>span{font-size:10px;font-weight:900;letter-spacing:1.8px;color:#8b662c}.dispatch-note p{font-size:13px;line-height:1.55;margin:7px 0}.local-note{font-size:10px;line-height:1.5;color:#7b705d;margin:18px 0 0}footer{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#74858b;letter-spacing:.4px;padding-top:24px}button,canvas{-webkit-tap-highlight-color:transparent}@media(min-width:1500px){.shell{padding-top:40px}}@media(max-width:1000px){.shell{padding:22px}.play-layout{grid-template-columns:minmax(0,1fr) 220px;gap:18px}.dispatch{padding:23px 15px 16px}.dispatch>h2{font-size:27px}.board-footer{flex-direction:column;align-items:stretch}.board-footer p{max-width:none;min-height:17px}.board-footer>div{justify-content:flex-end}}@media(max-width:760px){.shell{padding:17px 13px}.masthead{margin-bottom:20px;align-items:flex-start;gap:8px}.masthead .eyebrow{font-size:8px;letter-spacing:1.2px}h1{font-size:34px;max-width:255px}.header-tools{flex-direction:column;gap:5px}.header-tools button{font-size:10px;padding:5px 8px}.play-layout{grid-template-columns:1fr;gap:20px}.yard-top h2{font-size:17px}.move-counter strong{font-size:29px;min-width:51px}.move-counter span{font-size:9px}.board-wrap{border-width:6px;border-radius:10px}.overlay{padding:15px}.overlay h2{font-size:33px}.overlay p:not(.eyebrow){font-size:13px;line-height:1.45;margin:10px 0 16px}.overlay .eyebrow{font-size:9px}.primary{font-size:14px;min-width:180px;padding:11px 16px}.board-footer{margin-top:18px;gap:8px}.board-footer>div{justify-content:space-between}.board-footer .quiet{padding:8px 10px}.level-nav{margin-top:10px}.dispatch{display:grid;grid-template-columns:1fr 1fr;gap:0 15px;padding:20px 19px}.dispatch>.eyebrow,.dispatch>h2,.intro{display:none}.player{border:0;padding:0}.player-title{justify-content:center}.player-title h3{font-size:14px}.robot-icon{width:42px;height:42px;background-size:126px 84px}.robot-icon.gold{background-position:-42px 0}.dpad{grid-template-columns:repeat(3,43px);gap:5px}.dpad button{height:43px}.dispatch-note,.local-note{grid-column:1/-1}.dispatch-note{margin-top:17px;padding-top:13px}.dispatch-note p{margin-bottom:0}.local-note{margin-top:9px}.level-nav button{padding:8px 1px}footer{font-size:9px;line-height:1.5;padding-top:20px}footer span:first-child{max-width:210px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(min-width:761px){.shell{max-width:min(1370px,calc((100dvh - 300px)*1.2222 + 340px));padding:18px 28px 12px;min-width:760px}.masthead{margin-bottom:18px}h1{font-size:clamp(34px,3.8vw,56px)}.play-layout{grid-template-columns:minmax(0,1fr) 240px;gap:20px}.dispatch{padding:20px 18px 14px}.dispatch>h2{font-size:28px}.player{padding:12px 0}.intro{margin-bottom:12px}.dispatch-note{padding-top:12px}.local-note{margin-top:12px}.board-footer{margin-top:18px}.board-footer>div{gap:4px}.board-footer .quiet{padding:8px 10px}footer{padding-top:17px}}
@media(min-width:761px){.dispatch .robot-icon{width:42px;height:42px;background-size:126px 84px}.dispatch .robot-icon.gold{background-position:-42px 0}.dispatch .dpad{grid-template-columns:repeat(3,35px);margin-top:8px;gap:4px}.dispatch .dpad button{height:34px;font-size:16px}.dispatch .player-two .dpad button{font-size:21px}.dispatch .player{padding:10px 0}.dispatch .intro{font-size:12px;line-height:1.4;margin-bottom:9px}.dispatch .dispatch-note p{font-size:12px;line-height:1.4}.dispatch .local-note{font-size:9px;margin-top:9px}.dispatch>h2{font-size:26px}}
footer a{color:#b3c4c7;text-decoration:underline;text-underline-offset:3px}footer{flex-wrap:wrap}
/* Компактное игровое окно: поле и управление обоих игроков остаются в кадре. */
@media (min-width:761px) and (max-height:650px){
  .shell{padding:8px 18px 12px}
  .masthead{margin-bottom:6px}
  .masthead .eyebrow{margin-bottom:2px}
  h1{font-size:32px}
  .play-layout{grid-template-columns:minmax(0,1fr) 224px;gap:14px}
  .yard-top{padding-bottom:4px}
  .yard-top h2{font-size:16px}
  .move-counter strong{font-size:25px;padding:3px 6px}
  .board-wrap{width:min(100%,calc((100dvh - 230px)*11/9));margin-inline:auto;border-width:6px}
  .overlay{padding:8px}
  .overlay-inner{max-height:100%;overflow:auto}
  .overlay h2{font-size:29px;margin:5px 0}
  .overlay p:not(.eyebrow){font-size:12px;line-height:1.3;margin:5px 0 8px}
  .primary{font-size:13px;padding:8px 14px}
  .secondary{margin-top:4px;padding:3px}
  .board-footer{margin-top:8px;gap:4px}
  .board-footer .quiet{padding:5px 7px}
  .level-nav{margin-top:5px}
  .level-nav button{padding:5px 2px}
  .dispatch{display:grid;grid-template-columns:1fr 1fr;gap:0 6px;padding:16px 8px 10px;margin-top:0}
  .dispatch>.eyebrow,.dispatch>h2,.dispatch>.intro{display:none}
  .dispatch .player{padding:0;border:0;min-width:0}
  .player-title{gap:3px;min-height:52px}
  .player-title h3{font-size:12px}
  .player-title span:not(.robot-icon){font-size:9px}
  .dispatch .robot-icon{width:28px;height:28px;background-size:84px 56px}
  .dispatch .robot-icon.gold{background-position:-28px 0}
  .dispatch .dpad{grid-template-columns:repeat(3,32px);gap:3px;margin-top:7px}
  .dispatch .dpad button{height:32px;font-size:14px}
  .dispatch .player-two .dpad button{font-size:18px}
  .dispatch-note,.local-note{grid-column:1/-1}
  .dispatch-note{margin-top:10px;padding-top:8px}
  footer{padding-top:8px}
}