:root{
    --bg:#0b0d11; --card:#17191f; --card2:#20232b; --line:#383d48;
    --txt:#f5f2ed; --dim:#a9adb7; --acc:#62a7ff; --acc2:#53d3ad;
    --warn:#ffc857; --bad:#ff6f61; --good:#62d69c; --p2:#ff6f61;
  }
  *{box-sizing:border-box; margin:0; padding:0; letter-spacing:0;}
  html{width:100%; min-height:100%; background:var(--bg);}
  body{background:var(--bg); color:var(--txt); font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
       display:flex; flex-direction:column; align-items:center; min-height:100dvh; padding:10px 14px 14px;
       overflow-x:hidden; overscroll-behavior:none; touch-action:manipulation;}
  body.sonic-arena{background:radial-gradient(ellipse at 20% 18%,rgba(20,130,112,.34),transparent 43%),
       radial-gradient(ellipse at 85% 80%,rgba(210,143,41,.18),transparent 46%),#09151a;}
  button,input,select{font:inherit;}
  button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--warn); outline-offset:2px;}
  h1{font-size:23px; line-height:1.2; color:#fff1da; text-shadow:0 2px 10px rgba(0,0,0,.55);}
  .sub{color:var(--dim); font-size:12px; margin:3px 0 9px;}
  .game-language-control{position:fixed; top:10px; right:12px; z-index:80; display:flex; align-items:center; gap:6px;
       min-height:34px; padding:4px 6px 4px 9px; border:1px solid var(--line); border-radius:6px;
       background:rgba(15,17,22,.96); color:var(--txt); box-shadow:0 6px 20px rgba(0,0,0,.28);}
  .game-language-label{font-size:11px; color:var(--dim);}
  .game-language-control select{max-width:150px; border:0; border-left:1px solid var(--line); border-radius:0;
       padding:3px 22px 3px 7px; color:var(--txt); background:#0f1116; font-size:11px; cursor:pointer;}
  html[dir=rtl] .game-language-control{right:auto; left:12px;}
  #hud{display:flex; width:min(900px,100%); gap:12px; background:var(--card); border:1px solid var(--line);
       border-radius:8px; padding:7px 12px; margin-bottom:9px; font-size:13px; flex-wrap:wrap;
       justify-content:center; align-items:center; min-height:46px;}
  #hud b{color:var(--warn); font-family:Consolas,monospace;}
  #hud .stat{display:inline-flex; align-items:center; gap:4px; white-space:nowrap;}
  #hCampaign{padding-left:10px; border-left:1px solid var(--line);}
  #hLevelName{color:var(--txt); font-weight:700;}
  #hCampaignTheme,#hEndlessTheme{color:var(--acc2); font-size:11px; font-weight:800;}
  #hSupply{color:var(--dim); font-size:11px;}
  #hTimer b{min-width:5ch; text-align:right;}
  #hTimer.danger b{color:var(--bad);}
  #hBoss b{color:#ff9c94;}
  #vsBox{background:#0f1116; border:1px solid var(--line); border-radius:6px; padding:4px 10px;
         font-size:15px; white-space:nowrap;}
  #vsBox .me{color:var(--acc); font-weight:700;}
  #vsBox .foe{color:var(--p2); font-weight:700;}
  #hMute{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--line);
         border-radius:6px; color:var(--txt); background:#0f1116; cursor:pointer; line-height:1;}
  #hMute:hover{border-color:var(--warn); background:var(--card2);}
  #strategyDock{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px;
       width:min(900px,100%); margin-bottom:8px; position:relative;}
  .strategy-card{display:grid; grid-template-columns:52px minmax(0,1fr) 32px; align-items:center; gap:7px;
       min-width:0; min-height:64px; padding:5px 6px; border:1px solid var(--line); border-radius:8px;
       background:#12151b; box-shadow:0 7px 18px rgba(0,0,0,.2); transition:border-color .16s,background .16s;}
  .strategy-card.armed{border-color:var(--warn); background:#211c12; box-shadow:0 0 0 1px rgba(255,200,87,.18);}
  .strategy-card img{display:block; width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.38));}
  .strategy-meta{display:flex; flex-direction:column; min-width:0; line-height:1.2;}
  .strategy-meta strong{font-size:13px; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .strategy-meta span{margin-top:4px; color:var(--dim); font-size:10px; white-space:nowrap;}
  .strategy-meta b{color:var(--warn); font-family:Consolas,monospace;}
  .strategy-actions{display:flex; flex-direction:column; gap:4px;}
  .strategy-actions button{display:inline-flex; align-items:center; justify-content:center; width:30px; height:25px;
       border:1px solid var(--line); border-radius:6px; color:var(--txt); background:#20242d; cursor:pointer;
       font-weight:900; line-height:1; transition:background .14s,border-color .14s,transform .14s;}
  .strategy-actions button[data-action=buy]{color:var(--good);}
  .strategy-actions button[data-action=use]{color:var(--warn);}
  .strategy-actions button:hover:not(:disabled){background:#2b303b; border-color:var(--acc); transform:translateY(-1px);}
  .strategy-actions button:disabled{opacity:.3; cursor:not-allowed;}
  #strategyStatus{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
       clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  #stage{--board-ratio:15 / 11; position:relative; flex:0 0 auto; width:min(900px,100%);
         aspect-ratio:var(--board-ratio); overflow:hidden; border:1px solid var(--line); border-radius:8px;
         background:#101318; box-shadow:0 18px 50px rgba(0,0,0,.3);}
  body.sonic-arena #stage{border-color:rgba(109,224,190,.68); background:#09252a;
       box-shadow:0 20px 58px rgba(0,0,0,.48),0 0 34px rgba(38,201,162,.16),0 0 60px rgba(234,169,69,.1);}
  body.terrain-dungeon #stage{border-color:rgba(224,166,94,.6); box-shadow:0 18px 50px rgba(0,0,0,.3),0 0 28px rgba(177,108,53,.1);}
  body.terrain-forest #stage{border-color:rgba(159,221,118,.62); box-shadow:0 18px 50px rgba(0,0,0,.3),0 0 28px rgba(63,157,77,.16);}
  body.terrain-frozen #stage{border-color:rgba(185,244,255,.75); box-shadow:0 18px 50px rgba(0,0,0,.3),0 0 32px rgba(69,198,255,.2);}
  body.terrain-lava #stage{border-color:rgba(255,157,55,.72); box-shadow:0 18px 50px rgba(0,0,0,.3),0 0 34px rgba(255,75,18,.2);}
  body.sonic-arena #hud{border-color:rgba(102,220,185,.35); background:linear-gradient(100deg,rgba(13,51,55,.96),rgba(28,38,32,.94));}
  canvas{display:block; width:100%; height:100%; background:#101318; touch-action:none; image-rendering:auto;}
  .overlay{position:absolute; inset:0; background:rgba(11,13,17,.94); display:flex; flex-direction:column;
           align-items:center; justify-content:center; gap:12px; text-align:center; z-index:5; padding:20px;
           overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable;}
  .overlay>*{flex-shrink:0; max-width:100%; overflow-wrap:anywhere;}
  .overlay h2{font-size:25px; line-height:1.25;}
  .overlay p{color:var(--dim); font-size:14px; line-height:1.7;}
  .overlay .big{font-size:36px; line-height:1;}
  .game-loading-overlay{z-index:20; gap:14px; background:#0b0d11; overflow:hidden;}
  .game-loading-mark{position:relative; width:58px; height:58px; border:1px solid #3c4653; border-radius:50%;
       background:#151a21; box-shadow:0 0 0 8px rgba(255,200,87,.035);}
  .game-loading-mark::before,.game-loading-mark::after{content:''; position:absolute; left:50%; background:var(--warn); transform:translateX(-50%);}
  .game-loading-mark::before{top:14px; width:20px; height:20px; border-radius:50%; box-shadow:0 0 18px rgba(255,200,87,.35);}
  .game-loading-mark::after{top:31px; width:5px; height:14px; border-radius:3px;}
  .game-loading-mark span{position:absolute; inset:-5px; border:2px solid transparent; border-top-color:var(--warn); border-right-color:#657486;
       border-radius:50%; animation:game-loading-spin .9s linear infinite;}
  .game-loading-progress{width:min(360px,82vw); height:8px; overflow:hidden; border:1px solid #343b45; border-radius:4px; background:#171b21;}
  .game-loading-progress span{display:block; width:0; height:100%; background:linear-gradient(90deg,var(--warn),#ff8a4c); transition:width .18s ease;}
  .game-loading-copy{display:flex; align-items:center; justify-content:center; gap:10px; min-height:22px; color:var(--dim); font-size:12px;}
  .game-loading-copy strong{min-width:4ch; color:var(--warn); font:700 14px Consolas,monospace; text-align:right;}
  .game-loading-actions{display:flex; gap:9px; flex-wrap:wrap; justify-content:center;}
  .game-loading-actions .btn{min-height:38px; padding:7px 15px; font-size:13px;}
  @keyframes game-loading-spin{to{transform:rotate(360deg);}}
  .overlay .slider-captcha{color:var(--txt); text-align:left;}
  .overlay .slider-captcha-head b{color:var(--dim);}
  .overlay .slider-captcha-track{border-color:var(--line); background:repeating-linear-gradient(135deg,#20252d 0,#20252d 10px,#181c22 10px,#181c22 20px);}
  .overlay .slider-captcha-target{border-color:var(--warn); background:#3a3018;}
  .overlay .slider-captcha-row>button{border-color:var(--line); color:var(--txt); background:#181c22;}
  .overlay .slider-captcha-row>button:hover{background:#252b34;}
  .overlay .slider-captcha[data-state=passed] .slider-captcha-track{border-color:var(--good); background:#173328;}
  .overlay .slider-captcha[data-state=passed] .slider-captcha-head b{color:var(--good);}
  .overlay .slider-captcha[data-state=error] .slider-captcha-head b{color:var(--bad);}
  #ovBossInvite{padding:0; gap:0; justify-content:stretch; text-align:left;
       background:linear-gradient(rgba(9,12,17,.88),rgba(9,12,17,.97)),url('../web/hero.webp') center/cover;}
  .boss-invite-header{display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:12px;
       width:100%; padding:12px 16px; border-bottom:1px solid var(--line); background:rgba(12,15,21,.92);}
  .boss-invite-header h2{margin:2px 0 3px; font-size:22px;}
  .boss-invite-header p{margin:0; max-width:760px; font-size:12px; line-height:1.45;}
  .boss-invite-kicker{color:var(--warn); font-size:10px; font-weight:800;}
  .boss-invite-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px;
       width:100%; padding:12px 16px; overflow-y:auto; min-height:0; flex:1 1 auto; align-content:start;}
  .boss-invite-card{display:grid; grid-template-rows:98px auto auto 1fr; min-width:0; min-height:188px;
       padding:0 0 9px; overflow:hidden; border:1px solid #3a414d; border-radius:7px; background:#151920;
       color:var(--txt); text-align:left; cursor:pointer; transition:border-color .16s,background .16s,transform .16s;}
  .boss-invite-card:hover{border-color:#6d7f96; background:#1a2029; transform:translateY(-1px);}
  .boss-invite-card.selected{border-color:var(--warn); background:#211d15; box-shadow:0 0 0 2px rgba(255,200,87,.18);}
  .boss-invite-card img{display:block; width:100%; height:98px; padding:5px; object-fit:contain;
       background:linear-gradient(145deg,#222a34,#10141a);}
  .boss-invite-card.no-boss{grid-template-rows:98px auto 1fr;}
  .boss-invite-card.no-boss .boss-invite-empty{display:flex; align-items:center; justify-content:center;
       height:98px; background:linear-gradient(145deg,#252b32,#12161b); color:#8f99a7; font-size:38px;}
  .boss-invite-card strong{display:block; padding:8px 9px 0; font-size:13px; line-height:1.25;}
  .boss-invite-card small{display:block; padding:3px 9px 0; color:var(--warn); font-size:10px; line-height:1.3;}
  .boss-invite-card span{display:block; padding:5px 9px 0; color:var(--dim); font-size:10.5px; line-height:1.4;}
  .boss-invite-footer{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
       min-height:68px; padding:10px 16px; border-top:1px solid var(--line); background:rgba(12,15,21,.96);}
  .boss-invite-selection{display:flex; flex-direction:column; min-width:0; gap:2px;}
  .boss-invite-selection span{color:var(--dim); font-size:10px;}
  .boss-invite-selection strong{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  #btnBossInviteStart{flex:0 0 auto; min-width:210px;}
  .btn{display:inline-flex; align-items:center; justify-content:center; min-height:42px; background:var(--warn);
       color:#171106; border:1px solid transparent; border-radius:8px; padding:9px 22px; font-size:15px;
       font-weight:800; cursor:pointer; transition:background .16s,border-color .16s,transform .16s;}
  .btn:hover{background:#ffd675; transform:translateY(-1px);}
  .btn.ghost{background:transparent; color:var(--txt); border:1px solid var(--line);}
  .btn.ghost:hover{background:var(--card2); border-color:var(--acc2);}
  input[type=text],input[type=email]{background:#0a0e18; border:1px solid var(--line); color:var(--txt); border-radius:8px;
       padding:9px 12px; font-size:15px; width:160px; text-align:center;}
  select{background:#0a0e18; border:1px solid var(--line); color:var(--txt); border-radius:8px;
       padding:9px 10px; font-size:14px;}
  .keys{color:var(--dim); font-size:12px; margin-top:8px; text-align:center;}
  kbd{background:#0a0e18; border:1px solid var(--line); border-radius:4px; padding:1px 7px; font-size:12px; color:var(--txt);}
  .hidden{display:none !important;}
  body.campaign-map-state>h1,body.campaign-map-state>.sub,body.campaign-map-state #hud,
  body.campaign-map-state #strategyDock,body.campaign-map-state>.keys{display:none;}
  body.campaign-map-state #stage{width:min(1000px,100%); height:auto; aspect-ratio:3 / 2;}
  #ovCampaignMap{padding:0; gap:0; justify-content:stretch; background:#0c1117; overflow:hidden;}
  .campaign-map-header{display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px;
       width:100%; min-height:68px; padding:10px 14px; color:var(--txt); text-align:left;
       background:rgba(10,13,18,.94); border-bottom:1px solid var(--line); z-index:3;}
  .campaign-map-header h2{margin:1px 0 0; font-size:20px; line-height:1.15; letter-spacing:0;}
  .campaign-map-kicker{display:block; color:var(--warn); font-size:10px; font-weight:800; letter-spacing:0;}
  .map-icon-button{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
       border:1px solid var(--line); border-radius:6px; background:#181d25; color:var(--txt); font-size:22px;
       cursor:pointer; transition:background .16s,border-color .16s,transform .16s;}
  .map-icon-button:hover{background:#242b36; border-color:var(--acc); transform:translateX(-1px);}
  .campaign-save-state{color:var(--dim); font-size:12px; text-align:right; white-space:nowrap;}
  .campaign-save-state.synced{color:var(--good);}
  .campaign-map-canvas{position:relative; display:flex; align-items:center; width:100%; flex:1 1 auto;
       min-height:0; overflow:hidden; isolation:isolate; background:#192026;}
  .campaign-map-surface{position:relative; flex:0 0 auto; width:100%; height:100%; overflow:hidden;}
  .campaign-map-art{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
  .campaign-map-canvas::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
       background:linear-gradient(180deg,rgba(7,9,12,.04),rgba(7,9,12,.15));}
  .campaign-route{position:absolute; inset:0; width:100%; height:100%; z-index:2; overflow:visible; pointer-events:none;}
  #campaignRouteShadow,#campaignRouteLine{fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
  #campaignRouteShadow{stroke:rgba(10,8,5,.72); stroke-width:8;}
  #campaignRouteLine{stroke:rgba(255,210,92,.92); stroke-width:3; stroke-dasharray:7 8;
       filter:drop-shadow(0 0 5px rgba(255,164,53,.9));}
  .campaign-nodes{position:absolute; inset:0; z-index:4; pointer-events:none;}
  .campaign-node{position:absolute; display:flex; align-items:center; justify-content:center;
       width:32px; height:32px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:auto;
       border:2px solid #424955; background:#171b22; color:#a6acb7; font:800 12px/1 Consolas,monospace;
       box-shadow:0 3px 10px rgba(0,0,0,.5); cursor:pointer; transition:transform .16s,border-color .16s,background .16s;}
  .campaign-node:hover:not(:disabled),.campaign-node.selected{transform:translate(-50%,-50%) scale(1.16);}
  .campaign-node.completed{border-color:#7adea8; background:#163c2d; color:#d7ffea;}
  .campaign-node.completed::after{content:'✓'; position:absolute; right:-5px; top:-6px; display:flex;
       align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%;
       color:#0b2218; background:#7adea8; font:900 10px/1 sans-serif;}
  .campaign-node.current{border-color:var(--warn); background:#493717; color:#fff5cc;
       box-shadow:0 0 0 4px rgba(255,197,83,.2),0 3px 12px rgba(0,0,0,.55); animation:campaignNodePulse 1.5s ease-in-out infinite;}
  .campaign-node.selected{border-color:#fff; box-shadow:0 0 0 4px rgba(98,167,255,.35),0 3px 12px rgba(0,0,0,.55);}
  .campaign-node:disabled{opacity:.58; cursor:not-allowed; filter:grayscale(.8);}
  .campaign-walker{position:absolute; z-index:6; width:48px; height:56px; object-fit:contain;
       transform:translate(-50%,-82%); filter:drop-shadow(0 5px 5px rgba(0,0,0,.65)); pointer-events:none;
       transition:left .95s cubic-bezier(.22,.72,.22,1),top .95s cubic-bezier(.22,.72,.22,1);}
  .campaign-walker.walking{animation:campaignWalkerStep .24s ease-in-out infinite alternate;}
  .campaign-map-footer{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
       min-height:72px; padding:10px 14px; text-align:left; background:rgba(10,13,18,.96);
       border-top:1px solid var(--line); z-index:3;}
  .campaign-selection{display:flex; flex-direction:column; min-width:0; gap:3px;}
  .campaign-selection strong{font-size:15px; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .campaign-selection span{font-size:11px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  #btnCampaignStart{min-width:152px; flex:0 0 auto;}
  .campaign-clear-overlay{padding:0; overflow:hidden; background:#101318; justify-content:center;}
  .clear-poster-image{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
  .clear-poster-shade{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,8,12,.08),rgba(8,8,12,.2) 42%,rgba(8,8,12,.8));}
  .clear-poster-content{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
       justify-content:flex-end; gap:10px; width:100%; height:100%; padding:20px 20px 24px;}
  .clear-eyebrow{margin-top:auto; padding:5px 10px; border:1px solid rgba(255,255,255,.3); border-radius:6px;
       color:#fff; background:rgba(9,12,18,.66); font-size:12px; font-weight:800;}
  .clear-stamp{margin:0; color:#fff7cf; font-size:clamp(54px,9vh,92px) !important; line-height:.95 !important;
       letter-spacing:0; text-shadow:0 4px 0 #7a2a1d,0 8px 20px rgba(0,0,0,.85),0 0 22px rgba(255,177,58,.8);}
  .clear-poster-content p{margin:0; max-width:760px; padding:6px 12px; color:#f5f7fb; font-size:13px;
       line-height:1.45; background:rgba(9,12,18,.7); border-radius:6px;}
  @keyframes campaignNodePulse{50%{box-shadow:0 0 0 7px rgba(255,197,83,.08),0 3px 12px rgba(0,0,0,.55);}}
  @keyframes campaignWalkerStep{to{transform:translate(-50%,-86%) rotate(2deg);}}
  #netStatus{font-size:13px; min-height:20px;}
  #netStatus.ok{color:var(--good);} #netStatus.err{color:var(--bad);} #netStatus.wait{color:var(--warn);}
  .mode-badge{font-size:11px; border-radius:6px; padding:1px 7px; margin-left:6px;}
  .mode-1v1{background:#173358; color:#8cc0ff;}
  .mode-team{background:#123b2d; color:#75dfb8;}
  .mode-ffa{background:#4a2027; color:#ff9c94;}
  body.menu-state #hud{display:none;}
  body.menu-state #stage{height:min(700px,calc(100dvh - 76px)); min-height:580px; aspect-ratio:auto;}
  #ovMenu>.btn{width:min(310px,100%);}
  #roomList{width:100%;}
  #ovSave>div,#ovAccount>div{border-radius:8px !important;}
  .acc-records-heading{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%;padding-top:4px;color:var(--dim);font-size:11px;}
  .acc-records-heading strong{color:var(--txt);font-size:13px;}
  .acc-records-heading a{color:var(--acc);font-weight:700;text-decoration:none;}
  .acc-records-heading a:hover{text-decoration:underline;}
  .acc-records{min-width:300px;width:100%;font-size:13px;border-top:1px solid var(--line);}
  .acc-record-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:9px;min-height:34px;padding:3px 4px;border-bottom:1px solid var(--line);}
  .acc-record-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .acc-record-row b{color:var(--warn);white-space:nowrap;}
  .acc-record-row time{color:var(--dim);font-size:11px;white-space:nowrap;}

  #touchUI{display:none; position:fixed; left:0; right:0; bottom:0; z-index:40;
           justify-content:space-between; align-items:flex-end; gap:22px;
           padding:0 max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
           pointer-events:none; user-select:none; -webkit-user-select:none;}
  body.touch.game-active #touchUI{display:flex;}
  body.touch.game-active.spectating #touchUI{display:none;}
  #stick{width:116px; height:116px; border-radius:50%; pointer-events:auto; touch-action:none;
         background:rgba(23,25,31,.68); border:1.5px solid rgba(98,167,255,.58);
         position:relative; backdrop-filter:blur(5px); box-shadow:0 8px 24px rgba(0,0,0,.28);}
  #stick::before,#stick::after{content:''; position:absolute; background:rgba(98,167,255,.28);}
  #stick::before{left:50%; top:8%; bottom:8%; width:2px; transform:translateX(-50%);}
  #stick::after{top:50%; left:8%; right:8%; height:2px; transform:translateY(-50%);}
  #stickKnob{position:absolute; left:50%; top:50%; width:50px; height:50px; border-radius:50%;
         background:#6e9ee8; border:2px solid rgba(255,255,255,.5); transform:translate(-50%,-50%);
         box-shadow:0 4px 14px rgba(0,0,0,.4); pointer-events:none;}
  #btnBombTouch{width:78px; height:78px; border-radius:50%; font-size:32px; pointer-events:auto; color:var(--txt);
        background:rgba(92,27,33,.86); border:2px solid rgba(255,111,97,.8);
        display:flex; align-items:center; justify-content:center; touch-action:none; backdrop-filter:blur(4px);}
  #btnBombTouch.on{background:rgba(255,111,97,.9); transform:scale(.96);}
  #btnPauseTouch{position:fixed; top:max(8px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right));
        z-index:41; width:40px; height:40px; border-radius:8px; background:rgba(23,25,31,.88);
        border:1px solid var(--line); color:var(--txt); font-size:18px;
        display:none; align-items:center; justify-content:center; touch-action:manipulation;}
  body.touch.game-active #btnPauseTouch{display:flex;}

  @media (max-width:640px){
    body{padding:7px 8px 10px;}
    h1{font-size:18px;}
    .sub{display:none;}
    body.game-active h1{display:none;}
    #hud{gap:6px; padding:5px 6px; margin-bottom:6px; min-height:42px; flex-wrap:wrap; justify-content:center;}
    body.touch.game-active #hud{padding-right:48px; gap:4px;}
    #hud .stat{gap:2px; font-size:12px;}
    #hud .stat-label{display:none;}
    #hCampaign{padding-left:0; border-left:0;}
    #hLevelName,#hSupply{display:none;}
    #hTimer b{min-width:auto;}
    #vsBox{font-size:12px; padding:4px 6px; min-width:86px; overflow:hidden; text-overflow:ellipsis;}
    #hModeWrap{max-width:70px; overflow:hidden; text-overflow:ellipsis;}
    #hMute{width:30px; height:30px;}
    #strategyDock{grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin-bottom:5px;}
    .strategy-card{grid-template-columns:1fr; grid-template-rows:32px 24px 34px; justify-items:center; gap:1px;
                   min-height:93px; padding:3px 2px;}
    .strategy-card img{width:32px; height:32px;}
    .strategy-meta{align-items:center; width:100%;}
    .strategy-meta strong{font-size:10px; max-width:100%;}
    .strategy-meta span{font-size:8.5px; margin-top:1px;}
    .strategy-actions{flex-direction:row; gap:3px;}
    .strategy-actions button{width:clamp(34px,10vw,40px); height:32px; font-size:14px;}
    #stage{width:100%; border-radius:7px;}
    body.menu-state #stage{height:calc(100dvh - 42px); min-height:620px;}
    .keys{display:none;}
    .overlay{padding:14px; gap:9px; scrollbar-gutter:auto;}
    .overlay h2{font-size:21px;}
    .overlay p{font-size:12.5px; line-height:1.55;}
    .overlay .big{font-size:30px;}
    #ovMenu{justify-content:flex-start; padding-top:18px;}
    #ovMenu .big{display:none;}
    #ovMenu h2{font-size:25px;}
    #ovMenu>.btn{width:min(320px,100%); min-height:44px; padding:8px 14px;}
    .boss-invite-header{padding:9px 10px; grid-template-columns:36px minmax(0,1fr); gap:8px;}
    .boss-invite-header h2{font-size:18px;}
    .boss-invite-header p{font-size:10.5px;}
    .boss-invite-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:9px 10px;}
    .boss-invite-card{grid-template-rows:78px auto auto 1fr; min-height:169px;}
    .boss-invite-card img,.boss-invite-card.no-boss .boss-invite-empty{height:78px;}
    .boss-invite-card strong{font-size:12px;}
    .boss-invite-card span{font-size:9.5px;}
    .boss-invite-footer{padding:8px 10px; min-height:62px;}
    #btnBossInviteStart{min-width:0; padding:8px 12px; font-size:12px;}
    #roomList{min-width:0 !important; max-height:46dvh !important;}
    #ovLobby>div,#ovLogin>div,#ovSave>div,#ovAccount>div{max-width:100%;}
    #ovLobby>div:has(input),#loginStep1,#loginStep2>div,#saveStep1>div,#saveStep2>div{flex-wrap:wrap !important; justify-content:center;}
    #ovSave,#ovAccount{justify-content:flex-start; padding:10px;}
    #ovSave>div,#ovAccount>div{width:100%; min-width:0 !important; padding:16px !important;}
    #saveBoard,#accRecords{min-width:0 !important; width:100% !important;}
    .acc-record-row{grid-template-columns:minmax(0,1fr) auto;}
    .acc-record-row time{grid-column:1;grid-row:2;}
    #saveStep1,#saveStep2{width:100%;}
    #saveStep1 .btn,#saveStep2 .btn{max-width:100%;}
    input[type=text],input[type=email],select{max-width:100%;}
    body.campaign-map-state{padding:0;}
    body.campaign-map-state #stage{width:100%; height:100dvh; border:0; border-radius:0; aspect-ratio:auto;}
    .campaign-map-header{grid-template-columns:36px minmax(0,1fr); min-height:58px; padding:7px 9px; gap:8px;}
    .campaign-map-header h2{font-size:17px;}
    .campaign-save-state{grid-column:2; margin-top:-5px; text-align:left; font-size:10px;}
    .map-icon-button{width:34px; height:34px; grid-row:1 / span 2;}
    .campaign-map-canvas{min-height:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;
                         scrollbar-color:rgba(255,199,87,.7) rgba(8,10,14,.45);}
    .campaign-map-surface{width:auto; height:100%; aspect-ratio:3 / 2;}
    .campaign-map-art{object-position:center;}
    .campaign-node{width:25px; height:25px; border-width:1.5px; font-size:9px;}
    .campaign-node.completed::after{width:12px; height:12px; right:-4px; top:-4px; font-size:8px;}
    .campaign-walker{width:36px; height:44px;}
    .campaign-map-footer{min-height:68px; padding:8px 9px; gap:8px;}
    .campaign-selection strong{font-size:12px;}
    .campaign-selection span{font-size:9.5px;}
    #btnCampaignStart{min-width:128px; min-height:40px; padding:7px 10px; font-size:12px;}
    .clear-poster-content{padding:14px 12px 18px; gap:8px;}
    .clear-stamp{font-size:clamp(48px,12vw,70px) !important;}
    .clear-poster-content p{font-size:11px; max-width:95%;}
  }
  .clear-poster-content .clear-story{max-width:720px; padding:8px 14px; border-left:3px solid var(--warn); background:rgba(8,11,18,.72); color:#fff3c4; line-height:1.5;}
  .clear-reward{padding:7px 12px; border:1px solid rgba(255,211,104,.7); border-radius:6px; background:rgba(43,31,10,.82); color:#ffe49a; font-size:12px; font-weight:800;}
  @media (max-width:340px){
    body.touch.game-active #hModeWrap{display:none;}
    body.touch.game-active #vsBox{min-width:78px;}
    .strategy-actions button{width:32px;}
  }
  @media (max-width:620px){
    .game-language-control{top:6px; right:7px; padding-left:6px;}
    html[dir=rtl] .game-language-control{right:auto; left:7px;}
    .game-language-label{display:none;}
    .game-language-control select{max-width:112px;}
    body.menu-state{padding-top:46px;}
    body.menu-state h1{padding-right:122px; font-size:20px; align-self:flex-start;}
    html[dir=rtl] body.menu-state h1{padding-right:0; padding-left:162px; align-self:flex-end;}
    body.touch.game-active .game-language-control{right:auto; left:7px;}
  }
  @media (max-height:520px) and (orientation:landscape){
    body.game-active h1,body.game-active .sub{display:none;}
    body.game-active #hud{width:100%; gap:7px; padding:4px 52px 4px 8px; margin-bottom:5px;
                          font-size:11px; min-height:36px; flex-wrap:nowrap;}
    body.game-active #hud .stat-label{display:none;}
    body.game-active #vsBox{font-size:12px; padding:3px 6px;}
    #strategyDock{gap:3px; margin-bottom:4px;}
    .strategy-card{grid-template-columns:30px minmax(0,1fr) 67px; grid-template-rows:1fr; justify-items:stretch;
                   min-height:50px; padding:2px 3px; gap:3px;}
    .strategy-card img{width:30px; height:30px; align-self:center;}
    .strategy-meta{align-items:flex-start; align-self:center;}
    .strategy-meta strong{font-size:9px;}
    .strategy-meta span{font-size:7.5px;}
    .strategy-actions{flex-direction:row; align-items:center; gap:3px;}
    .strategy-actions button{width:32px; height:32px; font-size:12px;}
    #stick{width:88px; height:88px;}
    #stickKnob{width:40px; height:40px;}
    #btnBombTouch{width:64px; height:64px; font-size:26px;}
    #touchUI{padding-bottom:8px;}
    body.menu-state #stage{min-height:420px;}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important; transition:none !important;}
  }