:root{--fg:#f6f1ea;--mute:#b9aeb0;--ink:#140d10;--red:#ff4a2e;--gold:#ffc83d;--green:#5fe08a;--panel:rgba(18,12,16,.72);--line:rgba(255,255,255,.14);--blur:blur(10px);--disp:"Dela Gothic One",system-ui,sans-serif;--body:"Zen Kaku Gothic New",system-ui,sans-serif}
html,body{margin:0;height:100%;background:#120c10;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font:500 14px/1.5 var(--body);color:var(--fg)}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
#ver{position:fixed;right:max(8px,env(safe-area-inset-right));bottom:calc(4px + env(safe-area-inset-bottom));z-index:6;pointer-events:none;font:700 10px var(--body);color:rgba(255,255,255,.55)}
#stat{display:none;position:fixed;left:8px;bottom:8px;z-index:6;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.6);font:12px monospace;color:#9f9}
body.debug #stat{display:block}
#err{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#120c10;color:#fbb;padding:24px;text-align:center;z-index:20}
#load{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:15;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font:700 13px var(--body);transition:opacity .4s}
#load.done{opacity:0;pointer-events:none}
#load i{width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:2px solid var(--gold);border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* screens */
#hud,#tools,#tipBar,#title,#result{display:none}
body[data-st="play"] #hud,body[data-st="play"] #tools,body[data-st="play"] #tipBar{display:flex}
body[data-st="title"] #title{display:block}
body[data-st="result"] #result{display:block}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at center,transparent 55%,rgba(10,0,0,.55));transition:background .5s}
body.danger[data-st="play"]::after{background:radial-gradient(ellipse at center,transparent 40%,rgba(160,0,0,.45));animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.6}}

/* HUD */
#hud{position:fixed;left:0;right:0;top:calc(8px + env(safe-area-inset-top));z-index:3;flex-direction:column;gap:6px;align-items:center;pointer-events:none;padding:0 10px}
.hrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.pill{padding:4px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);font-variant-numeric:tabular-nums;white-space:nowrap}
.pill b{font:400 18px var(--disp)}
.pill.wave{background:var(--red);border-color:transparent}
.pill.money b{color:var(--gold)}
.lbl{font:700 11px var(--body);color:var(--mute)}
.pill.wave .lbl{color:#fff}
#menuBtn{pointer-events:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:900 13px var(--body)}
.barbox{display:flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.bar{width:min(180px,34vw);height:10px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--green);transition:width .2s}
.barbox b{font:400 14px var(--disp);min-width:3em;text-align:right;font-variant-numeric:tabular-nums}
.left{padding:4px 12px;border-radius:999px;background:rgba(0,0,0,.45);font:700 13px var(--body);color:#ffd9c9;font-variant-numeric:tabular-nums}

/* toolbar */
#tools{position:fixed;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));z-index:3;justify-content:center;gap:6px;padding:0 8px}
#tools button{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;height:58px;padding:0 8px;border-radius:14px;border:2px solid var(--line);background:var(--panel);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);color:var(--fg);touch-action:manipulation}
#tools button b{position:relative;font:900 13px var(--body);white-space:nowrap}
#tools button small{position:relative;font:700 11px var(--body);color:var(--gold)}
#tools button[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 18px rgba(255,200,61,.45);background:rgba(70,48,10,.8)}
#tools button.poor small{color:#ff8a7a}
#tools button.poor:not([aria-pressed="true"]){opacity:.7}
#repair small{color:var(--green)!important}
#airBtn{min-width:84px!important;border-color:rgba(255,74,46,.6)!important}
#airFill{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(255,74,46,.35)}
#airBtn.ready{background:rgba(160,30,10,.85)!important;animation:glow 1s ease-in-out infinite}
#airBtn small{color:#fff!important}
@keyframes glow{50%{box-shadow:0 0 22px rgba(255,74,46,.9)}}
#tipBar{position:fixed;left:0;right:0;bottom:calc(74px + env(safe-area-inset-bottom));z-index:2;justify-content:center;pointer-events:none;font:700 11px var(--body);color:rgba(255,255,255,.7);text-shadow:0 1px 4px #000}

/* airstrike preview */
#swipe{position:fixed;z-index:2;height:6px;margin-top:-3px;transform-origin:0 50%;pointer-events:none;border-radius:3px;background:repeating-linear-gradient(90deg,#ff4a2e 0 14px,transparent 14px 22px);box-shadow:0 0 14px rgba(255,74,46,.9)}
#swipe.off{background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 8px,transparent 8px 16px);box-shadow:none}

/* turret panel */
#panel{position:fixed;z-index:6;width:200px;padding:10px 12px;border-radius:14px;background:rgba(18,12,16,.92);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.ph{display:flex;justify-content:space-between;align-items:center}
.ph b{font:400 15px var(--disp)}
#pClose{border:0;background:none;color:var(--mute);font-size:20px;line-height:1}
#pStat{margin:6px 0 8px;font:500 12px/1.6 var(--body);color:var(--mute)}
#pStat .nx{color:var(--green)}
.pb{display:flex;gap:6px}
.pb button{flex:1;padding:8px 0;border-radius:10px;border:0;font:900 13px var(--body)}
#pUp{background:var(--gold);color:var(--ink)} #pUp:disabled{opacity:.4}
#pSell{background:rgba(255,255,255,.12);color:var(--fg)}

/* banners, toasts */
#banner{position:fixed;left:0;right:0;top:30%;z-index:4;text-align:center;pointer-events:none;opacity:0}
#banner b{display:block;font:400 clamp(40px,11vw,96px)/1.05 var(--disp);color:#fff;text-shadow:0 0 30px rgba(255,74,46,.8),0 5px 0 rgba(0,0,0,.6);letter-spacing:.02em}
#banner small{display:inline-block;margin-top:8px;padding:4px 14px;border-radius:999px;background:rgba(0,0,0,.6);font:700 14px var(--body)}
#banner.on{animation:ban 2.6s ease-out forwards}
@keyframes ban{0%{opacity:0;transform:scale(1.6)}8%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}
#toasts{position:fixed;left:0;right:0;top:calc(96px + env(safe-area-inset-top));z-index:4;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.toast{padding:5px 14px;border-radius:999px;background:rgba(255,200,61,.92);color:var(--ink);font:900 13px var(--body);animation:toast 2.8s ease-out forwards}
.toast.warn{background:rgba(255,74,46,.92);color:#fff}
@keyframes toast{0%{opacity:0;transform:translateY(-6px)}10%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}

/* title */
#title{position:fixed;left:max(20px,5vw);bottom:calc(6vh + env(safe-area-inset-bottom));z-index:4;width:min(560px,calc(100vw - 40px))}
.eyebrow{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font:700 10px var(--body);letter-spacing:.2em;color:var(--mute)}
#title h1{margin:10px 0 0;white-space:nowrap;font:400 clamp(40px,11vw,84px)/1 var(--disp);text-shadow:0 6px 30px rgba(0,0,0,.6)}
#title h1 em{font-style:normal;color:var(--red)}
#title h1 span{display:block;font-size:.5em;letter-spacing:.3em;color:var(--gold)}
#title p{margin:14px 0 18px;font:500 15px/1.7 var(--body);text-shadow:0 2px 12px rgba(0,0,0,.9)}
#startBtn{padding:16px 40px;border:0;border-radius:999px;background:var(--red);color:#fff;font:400 22px var(--disp);letter-spacing:.08em;box-shadow:0 10px 30px rgba(255,74,46,.45);animation:glow 1.6s ease-in-out infinite}
.trow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.trow button{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);color:var(--fg);font:700 13px var(--body)}
#shopBtn{border-color:rgba(255,200,61,.6);color:var(--gold)}
#tBoard{display:flex;flex-direction:column;gap:8px;margin:0 0 16px;max-width:min(100%,460px)}
#tBoard>div{padding:10px 14px;border-radius:16px;border:1px solid #ffcf4a44;background:linear-gradient(135deg,#1c1012cc,#2a1608cc);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 6px 24px #0008}
#tBoard .bl{font:800 12px var(--body);color:#ffe9a8;letter-spacing:.04em}
#tBoard .bn{font:400 26px/1.1 var(--disp);color:#fff;text-shadow:0 0 18px #ff6a0099}
#tBoard .bn.big{font-size:clamp(30px,9vw,40px);color:#ffcf4a}
#tBoard .bn small{font:800 13px var(--body);margin-left:4px;color:#ffe9a8}
#tBoard .bg{font:700 11px var(--body);color:var(--mute)}
#tMine{display:block}#tMine .wbar{height:4px;border-radius:2px;background:#fff2;overflow:hidden;margin-top:4px}#tMine .wbar i{display:block;height:100%;background:linear-gradient(90deg,#ff4a2e,#ffcf4a)}
.srow{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
#contBtn{margin:0!important;padding:8px 18px;border-radius:999px;border:1px solid #fff6;background:#f4efe8;color:#120c10;font:800 14px/1.3 var(--body);text-align:left}
#contBtn small{display:block;font:700 11px var(--body);color:#555}
#tBest{margin-top:12px;font:700 12px var(--body);color:var(--mute);text-shadow:0 1px 6px #000}
#tBest b{color:var(--fg);font-weight:900}
#tWorld{margin-top:6px;font:700 12px var(--body);color:var(--mute);text-shadow:0 1px 6px #000}
#repair.emg{background:linear-gradient(#7a1a10,#3a0c08);border-color:#ff6a3a}
#repair.emg small{color:#ffcf4a!important}
#tWorld b{color:#ffcf4a;font-weight:900}#tWorld small{font-size:10px}
#tWorld{max-width:min(92vw,460px);margin-left:auto;margin-right:auto}
#tWorld .wtl{margin:3px 0;font:900 13px var(--body);color:#ffcf4a;letter-spacing:.04em}
#tWorld .wbs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:5px 0}
#tWorld .wb{padding:2px 7px;border-radius:999px;border:1px solid #fff2;background:#0008;font:700 10px var(--body);color:#fff6}
#tWorld .wb.on{border-color:#ffcf4a;background:linear-gradient(#ffcf4a33,#ff6a0033);color:#ffe9a8;box-shadow:0 0 8px #ffcf4a55}
#tWorld .wbar{height:4px;border-radius:2px;background:#fff2;overflow:hidden;margin:4px 0 2px}
#tWorld .wbar i{display:block;height:100%;background:linear-gradient(90deg,#ff6a00,#ffcf4a)}
.tprog{margin-top:6px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;max-width:420px}
.tprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--gold))}

/* result */
#result{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:min(520px,calc(100vw - 28px));max-height:calc(100vh - 40px);overflow:auto;box-sizing:border-box;padding:22px;border-radius:20px;background:rgba(18,12,16,.85);border:1px solid var(--line);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);text-align:center}
.stamp{display:inline-block;padding:4px 20px;border-radius:6px;background:var(--red);font:400 26px var(--disp);transform:rotate(-3deg);animation:stamp .4s cubic-bezier(.2,1.8,.4,1)}
@keyframes stamp{from{transform:rotate(-3deg) scale(2.4);opacity:0}}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 10px}
.rgrid div{padding:10px 4px;border-radius:12px;background:rgba(255,255,255,.06)}
.rgrid span{display:block;font:700 11px var(--body);color:var(--mute)}
.rgrid b{display:block;white-space:nowrap;font:400 clamp(16px,4.6vw,28px) var(--disp);font-variant-numeric:tabular-nums}
.rgrid em{font-style:normal}
.rgrid i{display:block;font:900 11px var(--body);color:var(--gold);font-style:normal}
.rgrid .med{color:var(--gold)}
#rTotal{margin:4px 0;font:700 12px var(--body);color:var(--mute)}
#rAch{list-style:none;margin:8px 0;padding:0;text-align:left}
#rAch li{padding:6px 10px;margin-top:4px;border-radius:10px;background:rgba(255,200,61,.12);font-size:13px}
#rAch small{color:var(--mute)} #rAch em{float:right;font-style:normal;color:var(--gold);font-weight:900}
.rbtn{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.rbtn button{padding:12px 22px;border-radius:999px;border:0;font:900 15px var(--body)}
.rbtn button:first-child{background:var(--red);color:#fff}
.rbtn button:last-child{background:rgba(255,255,255,.12);color:var(--fg)}

/* dialogs */
.dlg{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:14px;background:rgba(5,3,4,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.card{width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;box-sizing:border-box;padding:20px;border-radius:20px;background:#1c1418;border:1px solid var(--line)}
.card.small{width:min(380px,100%);text-align:center}
.card h2{margin:0;font:400 22px var(--disp)}
.note{margin:6px 0 12px;font-size:13px;color:var(--mute)}
.note b{color:var(--gold)}
.close{display:block;margin:16px auto 0;padding:10px 30px;border:0;border-radius:999px;background:var(--fg);color:var(--ink);font:900 14px var(--body)}
.up,.ach{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:10px;margin-top:6px;border-radius:12px;background:rgba(255,255,255,.05)}
.up .ic,.ach>span{font-size:24px;text-align:center}
.up b,.ach b{display:block;font:900 14px var(--body)}
.up small,.ach small{display:block;font-size:12px;color:var(--mute)}
.pips{display:flex;gap:3px;margin-top:4px}
.pips i{width:16px;height:5px;border-radius:2px;background:rgba(255,255,255,.15)}
.pips i.on{background:var(--gold)}
.up button{padding:8px 12px;border-radius:10px;border:0;background:var(--gold);color:var(--ink);font:900 13px var(--body);white-space:nowrap}
.up button:disabled{opacity:.35;cursor:default}
.ach{opacity:.55}
.ach.ok{opacity:1;background:rgba(255,200,61,.1)}
.ach em{font-style:normal;color:var(--gold);font-weight:900;font-size:12px}
ol.how{margin:0;padding-left:1.3em;font-size:13px;line-height:1.7}
ol.how li{margin-top:8px}
ol.how b{display:block;font:900 14px var(--body)}

@media (max-width:520px){
  #tools{gap:4px}
  #tools button{min-width:0;flex:1;height:54px;padding:0 4px}
  #tools button b{font-size:12px}
  #airBtn{min-width:0!important;flex:1.3!important}
  .pill{padding:3px 9px} .pill b{font-size:15px}
  #title p{font-size:13px}
}

/* tutorial */
#tut{pointer-events:none;position:fixed;left:50%;top:calc(128px + env(safe-area-inset-top));transform:translateX(-50%);z-index:5;width:min(420px,calc(100% - 32px));padding:10px 14px;border-radius:14px;background:rgba(18,12,16,.92);border:2px solid var(--gold,#ffc83d);box-shadow:0 6px 24px rgba(0,0,0,.6);font:500 14px/1.5 var(--body);color:#fff}
#tut[hidden]{display:none}
#tut .th{display:flex;align-items:center;gap:8px}
#tut .th b{flex:1;font:900 16px var(--body);color:#ffc83d}
#tutN{font:700 11px var(--body);opacity:.6}
#tutSkip{pointer-events:auto;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;padding:2px 10px;font:700 11px var(--body);cursor:pointer}
#tut p{margin:4px 0 0}
#tut p b{color:#ffc83d}
.tutHi{animation:tutHi 1s ease-in-out infinite;position:relative;z-index:6}
@keyframes tutHi{50%{box-shadow:0 0 0 4px #ffc83d,0 0 22px #ffc83d}}

/* juice */
#kpops{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.kpop{position:absolute;transform:translate(-50%,-50%);font:400 24px var(--disp);color:#fff;text-shadow:0 0 12px #ff4a2e,0 3px 0 #000;animation:kpop 1.2s ease-out forwards;white-space:nowrap}
@keyframes kpop{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-160%) scale(.9)}}
#combo{--k:0;position:fixed;right:14px;top:calc(130px + env(safe-area-inset-top));z-index:3;pointer-events:none;text-align:right;opacity:0;transition:opacity .3s}
#combo.on{opacity:1}
#combo b{display:block;font:400 calc(34px + 40px * var(--k))/1 var(--disp);color:hsl(calc(50 - 50 * var(--k)),100%,60%);text-shadow:0 0 calc(10px + 24px * var(--k)) rgba(255,74,46,.9),0 4px 0 rgba(0,0,0,.7)}
#combo span{font:900 13px var(--body);letter-spacing:.3em;color:#fff;text-shadow:0 2px 4px #000}
#combo.bump b{animation:cbump .18s ease-out}
@keyframes cbump{0%{transform:scale(1.25)}100%{transform:scale(1)}}
body[data-st="play"] #tut:not([hidden])~#combo{top:calc(220px + env(safe-area-inset-top))}

/* cinematic wave intro */
#lbox i{position:fixed;left:0;right:0;height:11vh;background:#000;z-index:6;pointer-events:none;transition:transform .7s cubic-bezier(.6,0,.2,1)}
#lbox i:first-child{top:0;transform:translateY(-100%)}
#lbox i:last-child{bottom:0;transform:translateY(100%)}
body.cine #lbox i{transform:none}
body.cine #hud,body.cine #tipBar,body.cine #combo{opacity:0;transition:opacity .4s}
#hud,#tipBar{transition:opacity .4s}
#waveIntro{position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);z-index:7;text-align:center;pointer-events:none;opacity:0;color:#fff}
#waveIntro .wl{display:block;font:900 clamp(13px,3.4vw,20px) var(--body);letter-spacing:.9em;padding-left:.9em;color:#ffc83d;text-shadow:0 2px 8px #000}
#waveIntro b{display:block;font:400 clamp(90px,26vw,200px)/.95 var(--disp);text-shadow:0 0 40px rgba(255,74,46,.85),0 8px 0 rgba(0,0,0,.6)}
#waveIntro i{display:block;height:2px;margin:10px auto;width:0;background:linear-gradient(90deg,transparent,#ff4a2e,transparent)}
#waveIntro small{font:700 clamp(13px,3.6vw,18px) var(--body);text-shadow:0 2px 6px #000}
#waveIntro em{font-style:normal;color:#ff6a4e}
#waveIntro.on{animation:wiFade 4s ease forwards}
#waveIntro.on .wl{animation:wiSpace 4s cubic-bezier(.2,.7,.2,1) forwards}
#waveIntro.on b{animation:wiNum 4s cubic-bezier(.2,.7,.2,1) forwards}
#waveIntro.on i{animation:wiLine 4s ease forwards}
@keyframes wiFade{0%,8%{opacity:0}18%,82%{opacity:1}100%{opacity:0}}
@keyframes wiSpace{0%{letter-spacing:2.2em;opacity:0}25%{opacity:1}100%{letter-spacing:.7em}}
@keyframes wiNum{0%,10%{transform:scale(1.5);filter:blur(12px)}28%{transform:scale(1);filter:blur(0)}100%{transform:scale(.94)}}
@keyframes wiLine{0%,20%{width:0}45%,100%{width:min(520px,80vw)}}

/* tutorial marker */
#tutMark{position:fixed;z-index:4;pointer-events:none;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;animation:tmBob 1s ease-in-out infinite}
#tutMark[hidden]{display:none}
#tutMark span{padding:4px 12px;border-radius:999px;background:#ffc83d;color:#120c10;font:900 13px var(--body);white-space:nowrap;box-shadow:0 3px 12px rgba(0,0,0,.6)}
#tutMark i{width:0;height:0;margin-top:2px;border:12px solid transparent;border-top:16px solid #ffc83d;border-bottom:0;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
#tutMark::after{content:"";position:absolute;left:50%;top:100%;width:46px;height:46px;margin:-6px 0 0 -23px;border:3px solid #ffc83d;border-radius:50%;transform:scaleY(.45);animation:tmRing 1s ease-out infinite}
#tutMark.swipe::after{width:120px;margin-left:-60px;border-radius:12px;border-style:dashed}
@keyframes tmBob{50%{margin-top:-8px}}
@keyframes tmRing{0%{opacity:1}100%{opacity:0;transform:scaleY(.45) scale(1.5)}}
body.cine #tut,body.cine #tutMark{opacity:0}
#tut,#tutMark{transition:opacity .4s}

/* ranking */
.nameIn{display:flex;align-items:center;gap:8px;margin:12px 0 0;font:700 13px var(--body);color:rgba(255,255,255,.8)}
.nameIn input,.rsend input{flex:1;min-width:0;max-width:240px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.5);color:#fff;font:700 14px var(--body)}
.rsend{display:flex;gap:8px;justify-content:center;margin:10px 0 4px}
.rsend button{padding:8px 14px;border-radius:999px;border:0;background:#ffc83d;color:#120c10;font:900 13px var(--body);cursor:pointer}
.rsend button:disabled{opacity:.5}
#rRank{margin:4px 0 8px;font:700 14px var(--body);text-align:center;min-height:1.2em}
#rRank b{color:#ffc83d;font-size:1.15em}#rRank em{font-style:normal;color:#ff6a4e}
#rankTabs,#rankTabs2{display:flex;gap:6px;justify-content:center;margin:8px 0}
#rankTabs button,#rankTabs2 button{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;font:700 12px var(--body);cursor:pointer}
#rankTabs button[aria-pressed="true"],#rankTabs2 button[aria-pressed="true"]{background:#ffc83d;color:#120c10;border-color:#ffc83d}
.rk{list-style:none;margin:8px 0;padding:0;display:grid;gap:4px}
.rk li{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,.07);font:700 14px var(--body)}
.rk li.me{background:rgba(255,200,61,.25)}
.rk i{width:1.8em;font:400 16px var(--disp);color:#ffc83d;font-style:normal;text-align:center}
.rk li:nth-child(-n+3) i{font-size:20px}
.rk span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk b{font-variant-numeric:tabular-nums}.rk small{opacity:.6;font-weight:700;margin-left:4px}

.nameBig{display:block;width:100%;box-sizing:border-box;margin:12px 0;padding:12px 16px;border-radius:12px;border:2px solid #ffc83d;background:rgba(0,0,0,.5);color:#fff;font:900 20px var(--body);text-align:center}
.setRow{display:flex;align-items:center;gap:10px;margin:14px 0;font:700 14px var(--body)}
.setRow b{flex:1;color:#ffc83d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setRow button{padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;font:700 13px var(--body);cursor:pointer}
#nameDlg{z-index:20}

/* game speed */
#speedBtn{pointer-events:auto;min-width:44px;height:34px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:900 13px var(--body);cursor:pointer}
#speedBtn.fast{background:#ffc83d;color:#120c10;border-color:#ffc83d;box-shadow:0 0 12px rgba(255,200,61,.6)}

/* supply crates and turret health */
#crates,#tbars{position:fixed;inset:0;pointer-events:none;z-index:6}
.crate{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:2px solid #ffcf4a;background:radial-gradient(#5a3a10,#2a1a06);font-size:22px;line-height:40px;padding:0;pointer-events:auto;box-shadow:0 0 14px #ffcf4a99;animation:cratePulse 1s ease-in-out infinite}
.crate.edge{width:36px;height:36px;left:-18px;top:-18px;font-size:16px;line-height:32px;opacity:.85;border-style:dashed}
.crate.soon{animation-duration:.35s}
@keyframes cratePulse{50%{box-shadow:0 0 26px #ffcf4a;scale:1.08}}
.tbar{position:absolute;left:-16px;top:-3px;width:32px;height:5px;border-radius:3px;background:#000a;border:1px solid #fff3;overflow:hidden;opacity:.55}
.tbar i{display:block;height:100%;background:#4ade80}
.tbar.hurt{opacity:1}.tbar.hurt i{background:#facc15}.tbar.low i{background:#ef4444}
.tbar.hit{outline:2px solid #ff6a3a}
.rk .ver{margin-left:6px;font:600 10px var(--body);color:var(--mute);opacity:.8}
#newsBody{text-align:left;max-height:55vh;overflow:auto}#newsBody h3{margin:10px 0 4px;font:900 13px var(--body);color:#ffcf4a}#newsBody ul{margin:0;padding-left:1.1em;font:600 12px/1.6 var(--body)}
#updBar{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);z-index:40;padding:8px 10px 8px 14px;border-radius:999px;background:#1d1416ee;border:1px solid #ffcf4a;font:700 12px var(--body);color:#fff;white-space:nowrap;box-shadow:0 4px 18px #000a}#updBar b{color:#ffcf4a}#updBar button{margin-left:8px;padding:5px 12px;border-radius:999px;border:0;background:#ff4a2a;color:#fff;font:900 12px var(--body)}
.liteHint{margin:-4px 0 8px;font:600 11px/1.4 var(--body);color:#bbb;text-align:center}
#tBoard #tWorld{max-width:none;margin:0}
#tMine .bl,#tMine .bn{display:inline-block;vertical-align:baseline}#tMine .bn{margin-left:8px;font-size:22px}
@media (max-height:760px){#title .eyebrow,#title p{display:none}#title h1{font-size:clamp(34px,10vw,60px)}#tBoard{margin-bottom:10px}#tBoard>div{padding:8px 12px}#tWorld .wbs{margin:3px 0}.trow{margin-top:10px}.trow button{padding:6px 13px}}
#dailyBtn{margin:0;padding:8px 18px;border-radius:999px;border:1px solid #ffcf4a;background:linear-gradient(135deg,#3a2408e6,#5a3208e6);color:#ffe9a8;font:800 14px/1.3 var(--body);text-align:left;box-shadow:0 0 14px #ffcf4a44}
#dailyBtn small{display:block;font:700 11px var(--body);color:#ffcf4a}
#tWorld .wtd{margin:2px 0;font:800 12px var(--body);color:#ffb070}#tWorld .wtd b{color:#ff8a3a}
#tools .ban,#repair.ban,#airBtn.ban{opacity:.35;filter:grayscale(1)}
#liteAsk{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top));transform:translateX(-50%);z-index:30;width:min(340px,calc(100vw - 32px));padding:12px 14px;border-radius:16px;background:#1c1012f2;border:1px solid #ffcf4a88;box-shadow:0 8px 30px #000a;text-align:center;font:600 12px var(--body);color:var(--mute)}
#liteAsk b{display:block;font:900 14px var(--body);color:#ffe9a8}#liteAsk div{display:flex;gap:8px;justify-content:center;margin-top:8px}
#liteAsk button{padding:7px 16px;border-radius:999px;border:1px solid var(--line);background:#333;color:#fff;font:800 13px var(--body)}#liteAsk #liteYes{background:#ffcf4a;color:#120c10;border-color:#ffcf4a}
#rankTabs{flex-wrap:wrap;justify-content:center}#rankTabs button{white-space:nowrap;padding:6px 11px;font-size:12px}
.rgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.rgrid b{font-size:clamp(13px,3.8vw,26px)!important;white-space:nowrap}
#legendBtn{margin:0;padding:8px 18px;border-radius:999px;border:1px solid #fff2a8;background:linear-gradient(135deg,#5a2a8ce6,#2a0f4ae6);color:#fff2c8;font:800 14px/1.3 var(--body);text-align:left;box-shadow:0 0 16px #b47cffaa}
#legendBtn small{display:block;font:700 11px var(--body);color:#e8cfff}
.rk span{display:flex;align-items:baseline;min-width:0;gap:6px}.rk .nm{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.rk .ver{flex:none;margin-left:0}
.rk .crown{text-decoration:none;margin-right:3px;font-size:12px;color:#ffcf4a}
#tBoard .bn{white-space:nowrap}#tBoard .bn.big{font-size:clamp(26px,8.2vw,40px)}
@media (max-height:900px){#title .eyebrow,#title p{display:none}#tBoard{margin-bottom:12px}}
.rk span{flex-direction:column;align-items:flex-start;gap:0}.rk .nm{max-width:100%}.rk .ver{font-size:9px;line-height:1.1}
.rk b{text-align:right;flex:none}.rk b small{display:block;margin:0;font-size:11px}
#result .rtime{margin:-4px 0 6px;font:700 12px var(--body);color:var(--mute)}

/* ---- title: stylish lower half ---- */
#title .srow{display:flex;gap:10px;flex-wrap:nowrap;align-items:stretch}
#title #startBtn{flex:1;min-width:0;padding:15px 20px;border-radius:16px;background:linear-gradient(135deg,#ff5a36,#e8321c);box-shadow:0 10px 30px rgba(255,74,46,.45),inset 0 1px 0 #ffffff55}
#title #contBtn{flex:none;border-radius:16px;padding:8px 14px;background:#f4efe8f2}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.modes .mode{position:relative;margin:0;min-width:0;padding:10px 12px 10px 14px;border-radius:16px;text-align:left;cursor:pointer;overflow:hidden;box-shadow:none;font:800 14px/1.25 var(--body)}
.modes .mode:only-child,.modes .mode:first-child:nth-last-child(2):has(+ [hidden]){grid-column:1 / -1}
.modes .mode::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:currentColor}
.modes .mode em{display:block;font:900 9px/1 var(--body);letter-spacing:.18em;font-style:normal;opacity:.75;margin-bottom:4px}
.modes .mode b{display:block;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modes .mode small{display:block;margin-top:3px;font:600 10.5px/1.35 var(--body);opacity:.8}
#dailyBtn.mode{border:1px solid #ffcf4a66;background:linear-gradient(160deg,#2c1d0cee,#170f08ee);color:#ffcf4a}
#dailyBtn.mode b{color:#fff4d6}#dailyBtn.mode small{color:#ffdf94}
#legendBtn.mode{border:1px solid #c79bff77;background:linear-gradient(160deg,#2b1446ee,#140a24ee);color:#d8b4ff;box-shadow:0 0 18px #9a5cff33}
#legendBtn.mode b{color:#fff}#legendBtn.mode small{color:#e3ccff}
#title .trow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
#title .trow .tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 7px;border-radius:14px;border:1px solid #ffffff1c;background:#140e12b8;color:#efe8e2;font:700 10.5px var(--body);letter-spacing:.02em}
#title .trow .tile:active{transform:scale(.96)}
#title .tile i{display:block;width:22px;height:22px}
#title .tile svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#title .tile .badge{position:absolute;top:4px;right:5px;padding:1px 5px;border-radius:999px;background:#ffcf4a;color:#1a1208;font:900 9px/1.4 var(--body)}
#title #shopBtn{color:#ffcf4a;border-color:#ffcf4a55}
#title #muteBtn.off{opacity:.45}
#title #muteBtn.off i{position:relative}#title #muteBtn.off i::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:2px;background:currentColor;transform:rotate(-40deg)}
#tBest{margin-top:10px;font:700 11px var(--body);letter-spacing:.03em}
#dailyBtn.mode,#legendBtn.mode{border-radius:16px;padding:10px 12px 10px 14px}
#title #startBtn,#title #contBtn,#dailyBtn.mode,#legendBtn.mode{border-radius:10px}#title .trow .tile{border-radius:8px}#tBoard>div{border-radius:10px}#title .tile .badge{border-radius:4px}
/* ---- in-game HUD: match the title's squarer style ---- */
.pill,.barbox,#speedBtn,#menuBtn{border-radius:8px}
.pill{padding:4px 10px;background:#140e12c8;border-color:#ffffff1c}
.pill.wave{background:linear-gradient(135deg,#ff5a36,#e8321c)}
#menuBtn{width:34px}
.barbox{background:#140e12c8;border-color:#ffffff1c}.barbox .bar{border-radius:3px}.barbox .bar i{border-radius:3px}
.left{border-radius:6px}
#speedBtn.locked{opacity:.45}#speedBtn.locked::after{content:"";display:inline-block;width:7px;height:7px;margin-left:4px;border:1.6px solid currentColor;border-radius:2px;vertical-align:1px}
#tools button{border-radius:10px;border-width:1px;background:#140e12d0;border-color:#ffffff22}
#tools button[aria-pressed="true"]{border-width:2px}
#airBtn small{white-space:nowrap;font-size:10px!important}
#tut{border-radius:10px;border-width:1px}
#tut .skip,#tut button{border-radius:6px}
body[data-st="play"] #ver{display:none}
#speedBtn.locked::after{content:none}
/* ---- unified look: squarer corners everywhere, no browser-default button colours ---- */
button{color:inherit}
.card,#result{border-radius:14px}
.rbtn{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.rbtn button{border-radius:10px;padding:12px 20px;flex:1 1 40%;max-width:220px}
.rbtn button:not(:first-child):not(:last-child){background:#f4efe8;color:#120c10}
.close{border-radius:10px}
.rsend button{border-radius:8px}.nameIn input,.rsend input{border-radius:8px}
#rankTabs button,#rankTabs2 button,.setRow button{border-radius:8px}
#liteAsk,#updBar{border-radius:10px}#liteAsk button{border-radius:8px}
#tutSkip{border-radius:6px}#tutMark span,.toast,#banner small{border-radius:8px}
.eyebrow,#tWorld .wb{border-radius:6px}#load{border-radius:10px}
.pb button{border-radius:8px}
#speedBtn.locked{opacity:.6}
.rbtn button{white-space:nowrap;font-size:14px;padding:12px 14px}
#credit{display:none;position:fixed;right:max(8px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:6;pointer-events:none;font:700 10px var(--body);letter-spacing:.06em;color:rgba(255,255,255,.6);text-shadow:0 1px 4px #000}
body[data-st="title"] #credit{display:block}
.modes .mode small .ln{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-height:760px){
  #tWorld .wbs,#tWorld>small,#tMine .bg{display:none}
  #tBoard{gap:6px;margin-bottom:8px}#tBoard .bn.big{font-size:clamp(24px,7vw,32px)}
  .modes{margin-top:8px}.modes .mode{padding:8px 10px 8px 12px}
  #title .trow{margin-top:8px}#title .trow .tile{padding:7px 2px 5px}
}

/* ---- title fits: sit lower, never cut the logo (scroll as a last resort) ---- */
#title{bottom:calc(12px + env(safe-area-inset-bottom));max-height:calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
#title::-webkit-scrollbar{display:none}
#tBest{margin-top:8px}
/* ---- legend players: a crown on the logo, a violet sky, a shimmering card ---- */
.lgBadge{display:inline-block;margin-bottom:4px;padding:4px 10px;border-radius:6px;border:1px solid #ffe29a;background:linear-gradient(135deg,#ffcf4a,#b47cff);color:#1a0c24;font:900 11px var(--body);letter-spacing:.14em;box-shadow:0 0 18px #b47cff88}
body.legend[data-st="title"]::before{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 60% at 50% 0%,#7a3cff40,transparent 70%),linear-gradient(#2a104430,transparent 40%)}
body.legend #title h1 span{background:linear-gradient(90deg,#ffcf4a,#e3b6ff,#ffcf4a);-webkit-background-clip:text;background-clip:text;color:transparent}
body.legend #title .eyebrow{display:none}
#legendBtn.mode::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff2e 50%,transparent 65%);transform:translateX(-120%);animation:lgShine 3.2s ease-in-out infinite}
@keyframes lgShine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
#legendBtn.mode{border-color:#e3b6ffaa;box-shadow:0 0 22px #9a5cff55,inset 0 0 0 1px #ffcf4a22}
#title h1{margin-bottom:6px}body.legend #title h1 span{background:linear-gradient(90deg,#ffd75a,#f3d2ff 50%,#ffd75a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 8px #000a)}