:root{--ink:#e9e0c5;--paper:#171914;--panel:#22251d;--line:#5c6048;--red:#d54a37;--amber:#e5b84f;--green:#7f9b54}*{box-sizing:border-box}html{overscroll-behavior:none}body{margin:0;background:#0c0d0b;color:var(--ink);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background-image:radial-gradient(#34372a 1px,transparent 1px);background-size:18px 18px}.shell{width:min(1100px,100%);margin:auto;padding:18px}header{display:flex;align-items:end;justify-content:space-between;border-bottom:3px solid var(--line);padding:10px 2px}h1,h2,p{margin-top:0}h1{font-size:clamp(25px,5vw,48px);line-height:.9;letter-spacing:-2px;margin-bottom:8px}.eyebrow{color:var(--amber);font-weight:bold;letter-spacing:2px;font-size:12px}.icon-btn,button{font:inherit;color:var(--ink);background:#292d22;border:2px solid var(--line);padding:10px;cursor:pointer}.game-wrap{position:relative;max-width:768px;margin:22px auto}.hud{display:grid;grid-template-columns:repeat(4,1fr);background:#25281f;border:2px solid var(--line);padding:10px;text-align:center;font-size:12px}.hud b{display:block;color:var(--amber);font-size:18px}canvas{width:100%;height:auto;display:block;background:#11130f;border:2px solid var(--line);image-rendering:pixelated;touch-action:none}.overlay{position:absolute;inset:64px 2px 2px;background:rgba(9,10,8,.82);display:grid;place-items:center;padding:18px}.overlay.hidden{display:none}.panel{max-width:470px;text-align:center;background:#20231b;border:3px solid var(--amber);padding:28px;box-shadow:10px 10px 0 #0a0b09}.panel h2{font-size:32px}.panel input{width:100%;padding:12px;border:2px solid var(--line);background:#10120e;color:#fff;font:inherit;margin:10px 0}.panel button{width:100%;background:var(--red);border-color:#ef765f;font-weight:bold;font-size:18px}.panel small{display:block;margin-top:14px;color:#aaa}.below{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}.brief,.board,.promo{background:var(--panel);border:2px solid var(--line);padding:18px}.legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--amber)}ol{padding-left:26px;margin-bottom:8px}li{padding:4px}.future{color:#949886;font-size:12px}.promo{margin-top:18px;text-align:center}.promo a{color:white;font-weight:bold}.promo-link{display:block;margin-top:12px;padding:12px;background:var(--amber);color:#16180f!important;text-decoration:none}.mobile-controls{display:none;justify-content:space-between;align-items:center;margin-top:10px;padding:0 max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));touch-action:none;user-select:none;-webkit-user-select:none}.mobile-controls button{touch-action:none;-webkit-tap-highlight-color:transparent;font-weight:bold}.mobile-controls button:active{background:var(--amber);color:#111;transform:scale(.94)}.dpad{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,56px);gap:5px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-row:2;grid-column:1}.dpad button:nth-child(3){grid-row:2;grid-column:2}.dpad button:nth-child(4){grid-row:2;grid-column:3}.fire{width:112px;height:112px;border-radius:50%;background:var(--red);border-color:#ef765f}@media(max-width:700px),(pointer:coarse){.shell{padding:6px}.below{grid-template-columns:1fr}.mobile-controls{display:flex}.hud{font-size:9px;padding:6px}.hud b{font-size:14px}.overlay{inset:46px 2px 124px}.panel{padding:14px;max-width:92%}.panel h2{font-size:24px;margin-bottom:8px}.panel p{font-size:13px}.panel small{font-size:10px;margin-top:8px}header{align-items:center}.icon-btn{font-size:10px}.game-wrap{margin:8px auto}.eyebrow{font-size:9px}h1{font-size:24px}.brief,.board,.promo{padding:12px}}
.mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mode-buttons #multiBtn{background:#526b3b;border-color:#8eac64}.board-tabs{display:flex;gap:6px;margin-bottom:6px}.board-tabs button{padding:5px 10px;font-size:11px}@media(max-width:500px){.mode-buttons{grid-template-columns:1fr}}@media(max-width:380px){.dpad{grid-template-columns:repeat(3,49px);grid-template-rows:repeat(2,49px)}.fire{width:98px;height:98px}}
@media(orientation:landscape) and (max-height:560px) and (pointer:coarse){body{overflow:hidden}.shell{height:100dvh;padding:2px}.shell>header,.below,.promo{display:none}.game-wrap{height:100dvh;max-width:none;margin:0;padding-right:180px}.hud{position:absolute;z-index:3;top:2px;left:2px;width:calc(100% - 184px);background:rgba(37,40,31,.9)}canvas{width:auto;height:100dvh;max-width:calc(100vw - 180px);margin:auto}.mobile-controls{position:fixed;z-index:5;right:0;top:0;width:180px;height:100dvh;display:flex;flex-direction:column;justify-content:space-around;padding:env(safe-area-inset-top) max(5px,env(safe-area-inset-right)) env(safe-area-inset-bottom) 5px}.dpad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px)}.fire{width:88px;height:88px}.overlay{right:182px;inset-block:42px 2px;padding:4px}.panel{padding:8px}.panel input{padding:7px;margin:4px 0}.panel small{display:none}}

/* Thumb-first controls shared by mobile browsers and Telegram Mini Apps. */
.move-pad{position:relative;width:138px;height:138px;flex:0 0 auto;border-radius:50%;border:3px solid #73785b;background:radial-gradient(circle,#34382b 0 30%,#22251d 31% 58%,#171914 59%);touch-action:none}.move-pad:before,.move-pad:after{content:'';position:absolute;background:#73785b55;pointer-events:none}.move-pad:before{width:2px;height:100%;left:50%}.move-pad:after{height:2px;width:100%;top:50%}.move-pad span{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font-size:9px;color:#999}.move-stick{position:absolute;z-index:2;width:54px;height:54px;left:39px;top:39px;border-radius:50%;background:#e5b84f;border:3px solid #ffe183;box-shadow:0 4px 12px #0008;pointer-events:none}.fire{width:122px;height:122px;box-shadow:0 5px 0 #70271d}
@media(max-width:700px),(pointer:coarse){body{min-height:100dvh}.mobile-controls{min-height:158px;padding-inline:max(10px,env(safe-area-inset-left));padding-bottom:max(8px,env(safe-area-inset-bottom))}.overlay{bottom:166px}}
@media(max-width:380px){.move-pad{width:118px;height:118px}.move-stick{left:32px;top:32px;width:50px;height:50px}.fire{width:104px;height:104px}}
@media(orientation:landscape) and (max-height:560px) and (pointer:coarse){.game-wrap{padding-right:210px}.hud{width:calc(100% - 214px)}canvas{max-width:calc(100vw - 210px)}.mobile-controls{width:210px;min-height:0}.move-pad{width:116px;height:116px}.move-stick{left:31px;top:31px;width:50px;height:50px}.fire{width:94px;height:94px}.overlay{right:212px}}
