/* CORE RICOCHET Ver.1.9 — UI redesign
   tokens: hull #070c1a / steel #93a4be / ion (you) #38c6ff / ember (cpu) #ff3354 / core gold #ffc34d / ink #eaf2ff
   shape language: chamfered steel frames taken from the block & button art (no rounded cards) */
:root{
 --hull:#070c1a;--hull2:#0d1630;--steel:#93a4be;--steelHi:#d5deea;--ion:#38c6ff;--ember:#ff3354;--gold:#ffc34d;--ink:#eaf2ff;--mute:#9aaac2;
 --jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP",system-ui,sans-serif;
 --c:10px;
 --chamfer:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
 --titleBg:url('assets/runtime/titleBg.webp');
 --menuBg:url('assets/runtime/menuBg.webp');
 --battleBg:url('assets/runtime/battleBg.webp');
 --logoBanner:url('assets/runtime/logoBanner.webp');
 --btnStart:url('assets/runtime/btnStart.webp');
 --btnRetry:url('assets/runtime/btnRetry.webp');
 --btnSave:url('assets/runtime/btnSave.webp');
 --btnResume:url('assets/runtime/btnResume.webp');
 --btnHome:url('assets/runtime/btnHome.webp');
 --btnOption:url('assets/runtime/btnOption.webp');
 --roundShot:url('assets/runtime/roundShot.webp');
 --roundSp:url('assets/runtime/roundSp.webp');
 --roundPause:url('assets/runtime/roundPause.webp');
 --bannerWin:url('assets/runtime/bannerWin.webp');
 --bannerLose:url('assets/runtime/bannerLose.webp');
 --bannerDraw:url('assets/runtime/bannerDraw.webp');
 --btnOnline:url('assets/runtime/btnOnline.webp');
 --paddleBlue:url('assets/runtime/paddleBlue.webp');
 --paddlePurple:url('assets/runtime/paddlePurple.webp');
 --paddleGold:url('assets/runtime/paddleGold.webp');
 --coreBlue:url('assets/runtime/coreBlue.webp');
 --coreRed:url('assets/runtime/coreRed.webp');
 --blkNormal:url('assets/runtime/playerNormalFull.webp');
 --blkArmor:url('assets/runtime/playerArmorFull.webp');
 --enemyNormal:url('assets/runtime/enemyNormalFull.webp');
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#03060e;color:var(--ink);font-family:var(--jp);touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid var(--ion);outline-offset:2px}
#app{width:100%;height:100%;height:100dvh;display:flex;justify-content:center;background:radial-gradient(ellipse at center,#0d1730 0%,#03060e 70%)}
#shell{width:min(100%,460px);height:100%;position:relative;overflow:hidden;background:var(--hull);isolation:isolate}
canvas{width:100%;height:100%;display:block;touch-action:none}
[hidden]{display:none!important}

/* ---------- shared pieces ---------- */
.frame,.panel,.console,.chip,.resultCard,.tools .tool,.seg,.arrow{position:relative;clip-path:var(--chamfer)}
.panel::before,.console::before,.chip::before,.resultCard::before,.seg::before{content:'';position:absolute;inset:0;clip-path:var(--chamfer);background:linear-gradient(160deg,#c6d2e2 0%,#56647c 35%,#2a3348 60%,#8796ae 100%);z-index:-2}
.panel::after,.console::after,.chip::after,.resultCard::after,.seg::after{content:'';position:absolute;inset:1.5px;clip-path:var(--chamfer);background:linear-gradient(180deg,rgba(13,22,48,.94),rgba(6,11,26,.96));z-index:-1}
.panel,.console,.chip,.resultCard,.seg{isolation:isolate}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 14px;border:0;background:transparent;font-size:13px;font-weight:700;letter-spacing:.02em;cursor:pointer;color:var(--ink)}
.chip:active::after{background:linear-gradient(180deg,#16305a,#0b1a36)}
.chip.block{display:flex;width:100%;margin-top:10px}

.artBtn{display:block;border:0;padding:0;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain;color:transparent;font-size:0;cursor:pointer;margin:0 auto;transition:transform .08s,filter .08s}
.artBtn:active{transform:scale(.97);filter:brightness(1.2)}
.artBtn.wide{width:100%;max-width:400px;height:76px}
.artBtn.mid{width:220px;height:80px}
.artBtn.small{width:132px;height:50px}
#startButton{background-image:var(--btnStart)}
.artBtn.retry{background-image:var(--btnRetry)}
.artBtn.save{background-image:var(--btnSave)}
.artBtn.resume{background-image:var(--btnResume)}
.artBtn.home{background-image:var(--btnHome)}
#openOptions{background-image:var(--btnOption)}

#overlay{position:absolute;inset:0;z-index:9;display:flex;justify-content:center;align-items:stretch;padding:calc(10px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom));overflow-y:auto;touch-action:pan-y;background:#050912 var(--menuBg) center/cover no-repeat}
#overlay::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,6,14,.55),rgba(3,6,14,.78));pointer-events:none}
#overlay.title{background-image:var(--titleBg)}
#overlay.dim{background:rgba(3,6,14,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#overlay.dim::before{background:radial-gradient(ellipse at center,rgba(3,6,14,.2),rgba(3,6,14,.75))}
#overlay.title::before{background:linear-gradient(180deg,rgba(3,6,14,.10) 0%,rgba(3,6,14,0) 28%,rgba(3,6,14,.55) 52%,rgba(3,6,14,.86) 100%)}
.screen{position:relative;width:100%;max-width:420px;margin:auto;max-height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.screen.enter{animation:screenIn .22s ease-out}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- title ---------- */
/* v1.10.1: fixed-frame title layout. Pinned to the overlay edges with explicit grid rows so iOS Safari
   cannot re-resolve percentage min-heights when the screen is shown again (logo collapsed / console stretched bug). */
#menuScreen{position:absolute;top:calc(10px + env(safe-area-inset-top));bottom:calc(10px + env(safe-area-inset-bottom));left:0;right:0;width:auto;max-width:420px;max-height:none;margin:0 auto;padding:0 14px 4px;
 display:grid;grid-template-rows:auto minmax(8px,1fr) auto auto auto auto auto auto auto;grid-template-columns:minmax(0,1fr);overflow-y:auto}
#menuScreen>*{min-width:0}
#menuScreen .spacer{min-height:8px}
.titleLogo{height:clamp(120px,27vh,230px);height:clamp(120px,27dvh,230px);background:var(--logoBanner) center/contain no-repeat;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 58% 62% at 50% 50%,#000 72%,transparent 100%);filter:drop-shadow(0 10px 24px rgba(0,0,0,.6));margin-top:clamp(0px,2dvh,18px);animation:logoIn .7s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes logoIn{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:none}}
.tagline{margin:4px 0 0;text-align:center;font-size:13px;font-weight:700;letter-spacing:.32em;color:#cfe0f5;text-shadow:0 2px 8px #000}
.console{padding:8px 8px 9px;display:grid;gap:6px;align-content:start;grid-auto-rows:auto}
.dial{display:grid;grid-template-columns:44px 34px 1fr 34px;align-items:center;gap:6px;min-height:62px;padding:2px 0}
.dial+.dial{border-top:1px solid rgba(147,164,190,.18);padding-top:8px}
.dLabel{font-size:11px;font-weight:700;color:var(--mute);writing-mode:horizontal-tb;text-align:center;line-height:1.2}
.arrow{height:46px;border:0;background:linear-gradient(180deg,#26324a,#141c30);cursor:pointer;--c:6px}
.arrow::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;border:solid var(--steelHi);border-width:0 2.5px 2.5px 0;transform:translate(-30%,-50%) rotate(135deg)}
.arrow.next::after{transform:translate(-70%,-50%) rotate(-45deg)}
.arrow:active{background:linear-gradient(180deg,#2d5a86,#173556)}
.dVal{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}
.dVal.tick-next{animation:tickNext .18s ease-out}.dVal.tick-prev{animation:tickPrev .18s ease-out}
@keyframes tickNext{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes tickPrev{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.dIco{flex:none;width:56px;height:44px;background:center/contain no-repeat;position:relative}
.dTxt{min-width:0}
.dTxt b{display:block;font-size:17px;font-weight:900;font-style:italic;letter-spacing:.01em;line-height:1.1;white-space:nowrap}
.dTxt b em{font-style:normal;font-size:11px;font-weight:700;color:var(--mute);margin-left:6px;letter-spacing:0}
.dTxt small{display:block;font-size:11px;color:#b3c3d8;line-height:1.35;margin-top:3px}
.dIco.m-core{background-image:var(--coreRed);background-size:100% auto}
.dIco.m-all{background:var(--enemyNormal) 0 6px/22px auto no-repeat,var(--enemyNormal) 22px 6px/22px auto no-repeat,var(--enemyNormal) 0 18px/22px auto no-repeat,var(--enemyNormal) 22px 18px/22px auto no-repeat,var(--enemyNormal) 11px 30px/22px auto no-repeat}
.dIco.c-wide,.dIco.c-laser,.dIco.c-split{width:56px;background-size:100% auto;filter:drop-shadow(0 0 6px rgba(120,200,255,.35))}
.dIco.c-wide{background-image:var(--paddleBlue)}.dIco.c-laser{background-image:var(--paddlePurple)}.dIco.c-split{background-image:var(--paddleGold)}
.dIco.d-easy,.dIco.d-normal,.dIco.d-hard{display:flex;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:8px}
.dIco .bar{width:8px;background:#2a3550;clip-path:polygon(0 3px,3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%)}
.dIco .bar:nth-child(1){height:12px}.dIco .bar:nth-child(2){height:20px}.dIco .bar:nth-child(3){height:28px}
.dIco .bar.on{background:linear-gradient(180deg,#ff8c9f,var(--ember));box-shadow:0 0 8px var(--ember)}
#startButton{margin-top:10px}
.subRow{display:grid;grid-template-columns:1fr 124px 1fr;gap:8px;align-items:center;margin-top:6px}
.subRow .chip{padding:0 6px;font-size:12px;gap:5px;white-space:nowrap}
.ver{text-align:right;font-size:10px;color:#7f90aa;margin-top:6px}

/* ---------- generic panels ---------- */
.panel{padding:16px 16px 18px}
.panel.narrow{max-width:320px}
.pHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.pHead.center{justify-content:center}
.pHead h2{margin:0;font-size:21px;font-weight:900;letter-spacing:.04em}
.pNote{font-size:11px;color:var(--mute)}
.pText{font-size:12px;line-height:1.7;color:#b8c7da;margin:6px 0}
.pText.center{text-align:center}
.pText.msg{min-height:20px}
.panel .artBtn.home{margin-top:14px}

/* editor */
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 8px}
.tools .tool{--c:6px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 6px;border:0;background:#121c33;color:#cfdced;font-size:11px;font-weight:700;cursor:pointer}
.tools .tool.selected{background:linear-gradient(180deg,#1f4a74,#12294a);color:#fff;box-shadow:inset 0 -2px 0 var(--ion)}
.tIco{width:30px;height:12px;background:center/100% 215% no-repeat}
.t-normal{background-image:var(--blkNormal)}.t-armor{background-image:var(--blkArmor)}.t-core{background-image:var(--coreBlue);background-size:100% auto}
.t-erase{background:none;border:1.5px dashed #6c7d99;border-radius:2px}
.editorGrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;padding:8px;background:#060c1c;border:1px solid #2a3a58;touch-action:manipulation}
.slot{min-width:0;aspect-ratio:1.5;padding:0;border:1px dashed #2b3c5a;border-radius:2px;background:#0b1428;cursor:pointer;position:relative}
.slot.normal,.slot.armor,.slot.core{border:0;background-repeat:no-repeat;background-position:center}
.slot.normal{background-image:var(--blkNormal);background-size:104% 215%}
.slot.armor{background-image:var(--blkArmor);background-size:104% 215%}
.slot.core{background-image:var(--coreBlue);background-size:100% 100%;filter:drop-shadow(0 0 4px rgba(255,195,77,.85))}
.slot.core::after{content:'';position:absolute;inset:-2px;border:1.5px solid var(--gold);clip-path:polygon(0 0,30% 0,30% 2px,2px 2px,2px 30%,0 30%,0 70%,2px 70%,2px calc(100% - 2px),30% calc(100% - 2px),30% 100%,0 100%,0 0,100% 0,100% 30%,calc(100% - 2px) 30%,calc(100% - 2px) 2px,70% 2px,70% 0,100% 0,100% 100%,70% 100%,70% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 70%,100% 70%,100% 100%)}
.meter{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px;font-weight:700;color:#b8c7da;font-variant-numeric:tabular-nums}
.meter span.ok{color:#8ee9b0}
.meter.warning span:not(.ok){color:#ffcf7a}
.btnPair{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;align-items:center;margin-top:4px}
.btnPair .artBtn.wide{height:64px}
#editorSave.disabled{filter:grayscale(.85) brightness(.6)}

/* options */
.optRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid rgba(147,164,190,.16);font-size:14px;font-weight:700}
.optRow small{display:block;font-size:11px;font-weight:500;color:var(--mute);margin-top:2px}
.seg{--c:7px;display:flex;flex:none}
.seg button{position:relative;z-index:1;border:0;background:transparent;padding:9px 13px;font-size:13px;font-weight:700;color:#aebcd0;cursor:pointer}
.seg button.selected{color:#fff;background:linear-gradient(180deg,#2a6aa0,#16385f);box-shadow:inset 0 -2px 0 var(--ion)}

/* help */
.howto{margin:8px 0 0;padding:0;list-style:none;counter-reset:h}
.howto li{position:relative;padding:10px 0 10px 40px;border-bottom:1px solid rgba(147,164,190,.14);font-size:12px;line-height:1.65;color:#b8c7da}
.howto li::before{counter-increment:h;content:counter(h);position:absolute;left:0;top:11px;width:28px;height:28px;display:grid;place-items:center;font-weight:900;font-style:italic;color:#fff;background:linear-gradient(180deg,#2a6aa0,#16385f);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.howto b{display:block;font-size:14px;color:var(--ink);margin-bottom:2px}
.keys{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px;font-size:11px;color:var(--mute)}
kbd{display:inline-block;min-width:20px;padding:1px 5px;margin-right:2px;border:1px solid #4a5a76;border-bottom-width:2px;border-radius:3px;font:700 10px var(--jp);color:#dfe8f5;text-align:center}

/* pause */
#pauseScreen .artBtn.resume{margin-top:10px}

/* result */
#resultScreen{display:flex;flex-direction:column;justify-content:center;gap:4px}
.banner{height:clamp(86px,15dvh,120px);background:center/contain no-repeat;animation:bannerIn .5s cubic-bezier(.2,.9,.3,1.3) both}
.banner.win{background-image:var(--bannerWin)}.banner.lose{background-image:var(--bannerLose)}
.banner.draw{display:grid;place-items:center;font-size:44px;font-weight:900;font-style:italic;letter-spacing:.06em;color:#ffe2a1;text-shadow:0 0 18px rgba(255,195,77,.6),0 3px 0 #6a4a10}
@keyframes bannerIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.resultReason{text-align:center;margin:0 0 6px;font-size:13px;font-weight:700;color:#cfe0f5}
.resultCard{padding:12px 14px 10px;margin-bottom:8px}
.rs{width:100%;border-collapse:collapse;font-size:12px}
.rs th{font-size:11px;font-weight:900;font-style:italic;padding:0 4px 6px}
.rs th.y{color:var(--ion)}.rs th.c{color:#ff7d93}
.rs td{padding:6px 4px;border-top:1px solid rgba(147,164,190,.14);text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.rs td:first-child{text-align:left;color:#aebcd0;font-weight:500}
.rs .lead td{font-size:15px}
.rs .better{color:#fff;text-shadow:0 0 8px rgba(56,198,255,.7)}
#resultScreen .artBtn.home{margin-top:4px}

/* ---------- battle HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:6}
#scoreBar{position:absolute;top:calc(5px + env(safe-area-inset-top));left:6px;right:48px;height:42px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.side{min-width:0;overflow:hidden;height:34px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 12px;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.side.you{clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);background:linear-gradient(90deg,rgba(18,86,150,.92),rgba(10,38,78,.85));box-shadow:inset 0 2px 0 rgba(140,220,255,.6);align-items:flex-start;padding-right:16px}
.side.cpu{clip-path:polygon(0 0,100% 0,100% 100%,12px 100%);background:linear-gradient(270deg,rgba(150,22,48,.92),rgba(72,10,26,.85));box-shadow:inset 0 2px 0 rgba(255,150,170,.6);align-items:flex-end;padding-left:16px}
.who{display:flex;align-items:baseline;gap:6px;font-size:10px;font-weight:900;font-style:italic;letter-spacing:.06em;line-height:1;white-space:nowrap}
.who em{font-size:9px;font-weight:700;opacity:.62;letter-spacing:.08em}
.stat{display:flex;align-items:center;gap:2px;height:16px}
.side.cpu .stat{flex-direction:row-reverse}
@keyframes hpLost{0%{transform:scale(1.6);filter:brightness(3)}100%{transform:scale(.8)}}
.bricks{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:900;font-style:italic;font-variant-numeric:tabular-nums}
.side.cpu .bricks{flex-direction:row-reverse}
.bricks .bar{width:68px;height:6px;background:rgba(0,0,0,.45);clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%);overflow:hidden}
.bricks .bar span{display:block;height:100%;transition:width .2s}
.side.you .bar span{background:linear-gradient(90deg,#7fe3ff,var(--ion))}
.side.cpu .bar span{background:linear-gradient(270deg,#ff97a8,var(--ember));margin-left:auto}
.clock{position:relative;width:96px;margin:0 -6px;display:flex;flex-direction:column;align-items:center;z-index:1}
.clock::before{content:'';position:absolute;top:0;left:0;right:0;height:38px;clip-path:polygon(14% 0,86% 0,100% 50%,86% 100%,14% 100%,0 50%);background:linear-gradient(160deg,#c6d2e2,#3c4860 45%,#8796ae)}
.clock::after{content:'';position:absolute;top:1.5px;left:2px;right:2px;height:35px;clip-path:polygon(14% 0,86% 0,100% 50%,86% 100%,14% 100%,0 50%);background:linear-gradient(180deg,#0d1630,#050a18)}
#timerSvg{position:relative;z-index:1;width:70px;height:23px;margin-top:7px}
#timerSvg .off{fill:rgba(147,164,190,.12)}#timerSvg .on{fill:#eaf6ff;filter:drop-shadow(0 0 2px rgba(120,210,255,.9))}
#timerSvg.low .on{fill:#ff8fa3;filter:drop-shadow(0 0 3px rgba(255,60,90,.9))}
#timerSvg.low{animation:lowPulse .8s ease-in-out infinite}
@keyframes lowPulse{50%{transform:scale(1.08)}}
#modeLabel{position:relative;z-index:1;margin-top:9px;font-size:8px;font-weight:900;font-style:italic;letter-spacing:.12em;color:#c7d4e6;text-shadow:0 1px 3px #000;white-space:nowrap}
#pauseButton{position:absolute;top:calc(5px + env(safe-area-inset-top));right:5px;width:40px;height:40px;border:0;padding:0;background:var(--roundPause) center/contain no-repeat;pointer-events:auto;opacity:.85;cursor:pointer}
#pauseButton:active{opacity:1;transform:scale(.94)}

/* controls */
#controls{position:absolute;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));height:96px;z-index:5;pointer-events:none;display:flex;align-items:flex-end;justify-content:space-between}
#moveArea{pointer-events:auto;touch-action:none;width:50%;height:70px;position:relative;cursor:grab;clip-path:var(--chamfer);--c:12px;background:linear-gradient(180deg,rgba(40,90,140,.22),rgba(10,30,60,.34));box-shadow:inset 0 0 0 1px rgba(170,190,215,.30),inset 0 2px 0 rgba(200,230,255,.18);opacity:.75;transition:opacity .12s}
#moveArea.active{opacity:1;background:linear-gradient(180deg,rgba(56,198,255,.22),rgba(10,40,80,.32))}
#moveArea .rail{position:absolute;left:16px;right:16px;top:50%;height:4px;margin-top:-2px;background:rgba(147,164,190,.35);clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%)}
#moveArea .thumb{position:absolute;top:-6px;width:26%;height:16px;margin-left:-13%;left:50%;background:linear-gradient(180deg,#bff0ff,var(--ion));clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%);box-shadow:0 0 12px var(--ion)}
#moveArea .hint{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-size:10px;font-weight:700;color:#cfe6f7;letter-spacing:.06em;transition:opacity .4s}
#moveArea .hint.gone{opacity:0}
#attackButtons{display:flex;align-items:flex-end;gap:8px}
.action{pointer-events:auto;touch-action:none;position:relative;overflow:hidden;border:0;padding:0;border-radius:50%;background:transparent center/contain no-repeat;cursor:pointer;opacity:.62;transition:opacity .12s,transform .1s,filter .12s}
.action:active{opacity:.95;transform:scale(.94)}
#shoot{width:78px;height:78px;background-image:var(--roundShot)}
#special{width:56px;height:56px;margin-bottom:30px;background-image:var(--roundSp)}
.action .cool{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(3,7,18,.66);pointer-events:none}
#special .cdText{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;font-style:italic;color:#fff;text-shadow:0 0 6px #000,0 1px 2px #000;z-index:2;font-variant-numeric:tabular-nums}
#special.ready{opacity:.9;animation:spReady 1.1s ease-in-out infinite}
@keyframes spReady{50%{filter:drop-shadow(0 0 10px #d7a8ff) brightness(1.25)}}
#shoot.blocked{filter:grayscale(.75) brightness(.7)}

@media (max-height:700px){
 .titleLogo{height:clamp(96px,21vh,150px);height:clamp(96px,21dvh,150px);margin-top:0}
 .tagline{font-size:12px;margin-top:10px}
 .dial{min-height:52px;grid-template-columns:40px 32px 1fr 32px}
 .arrow{height:40px}
 .dIco{width:50px;height:38px}
 .dTxt b{font-size:15px}.dTxt small{font-size:10px}
 .artBtn.wide{height:64px}
 .chip{min-height:40px}
 .artBtn.small{height:44px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.stat .slots{display:flex;gap:2px;margin:0 5px}
.stat .slots i{width:6px;height:6px;transform:rotate(45deg);border:1px solid rgba(220,230,245,.55)}
.side.you .slots i.on{background:#bdf0ff;border-color:#bdf0ff;box-shadow:0 0 5px var(--ion)}
.side.cpu .slots i.on{background:#ffc2cd;border-color:#ffc2cd;box-shadow:0 0 5px var(--ember)}

/* v1.10: core gauge (replaces hearts) */
.gauge{display:flex;gap:3px}
.gauge i{width:17px;height:9px;transform:skewX(-24deg);transition:background .2s,opacity .2s}
.side.cpu .gauge{flex-direction:row-reverse}.side.cpu .gauge i{transform:skewX(24deg)}
.side.you .gauge i{background:linear-gradient(180deg,#d9f6ff,#38c6ff);box-shadow:0 0 6px rgba(56,198,255,.8)}
.side.cpu .gauge i{background:linear-gradient(180deg,#ffd6dd,#ff3354);box-shadow:0 0 6px rgba(255,51,84,.8)}
.gauge i.lost{background:rgba(0,0,0,.45)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)!important}
.gauge i.crit{animation:gCrit .6s ease-in-out infinite}
.gauge i.hit{animation:gHit .5s ease-out}
@keyframes gCrit{50%{background:#fff;box-shadow:0 0 10px #fff}}
@keyframes gHit{0%{background:#fff;box-shadow:0 0 14px #fff}100%{}}
/* v1.10: cooldown as a clock wipe */
.action .cool{inset:0;height:auto!important;border-radius:50%;background:conic-gradient(rgba(3,7,18,.72) var(--p,0%),transparent 0)}

/* v1.11 overdrive */
#hud.od #modeLabel{color:#ffb15c;text-shadow:0 0 6px rgba(255,120,30,.9)}
#hud.od .clock::before{background:linear-gradient(160deg,#ffd2a0,#7a3a10 45%,#ff9a3c)}
#hud.od #timerSvg .on{fill:#ffe2c0;filter:drop-shadow(0 0 3px rgba(255,140,40,.95))}
#hud #timerSvg.low .on{fill:#ff8fa3;filter:drop-shadow(0 0 3px rgba(255,60,90,.9))}

/* v1.11 CPU type icons (pure geometry) */
.dIco.s-attack,.dIco.s-balance,.dIco.s-defense{display:grid;place-items:center}
.dIco.s-attack::before{content:'';width:34px;height:22px;background:linear-gradient(180deg,#ff8c9f,#ff3354);clip-path:polygon(0 0,30% 0,60% 50%,30% 100%,0 100%,30% 50%,0 0,40% 0,70% 0,100% 50%,70% 100%,40% 100%,70% 50%,40% 0);filter:drop-shadow(0 0 6px #ff3354)}
.dIco.s-balance::before{content:'';width:18px;height:18px;transform:rotate(45deg);border:2.5px solid #ffb4c0;box-shadow:0 0 8px rgba(255,51,84,.6),inset 0 0 0 4px rgba(255,51,84,.35)}
.dIco.s-defense::before{content:'';width:30px;height:28px;background:linear-gradient(180deg,#ffb4c0,#a3203c);clip-path:polygon(50% 0,100% 18%,100% 55%,50% 100%,0 55%,0 18%);filter:drop-shadow(0 0 6px #ff3354)}
.dial{min-height:56px}

/* v1.11 editor: presets + mirror toggle */
.presets{display:grid;grid-template-columns:auto repeat(4,1fr);gap:6px;align-items:center;margin:4px 0 6px}
.presets .pLabel{font-size:11px;font-weight:700;color:var(--mute);padding-right:2px}
.presets .chip{min-height:38px;padding:0 4px;font-size:12px}
#editorSave{height:66px;margin-top:4px}
.toggle{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;font-size:12px;font-weight:700;color:#b8c7da;cursor:pointer;padding:6px 0}
.toggle .knob{width:34px;height:18px;position:relative;background:#1b2740;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);transition:background .15s}
.toggle .knob::after{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;background:#8a9ab3;transition:transform .15s,background .15s}
.toggle.on{color:#fff}.toggle.on .knob{background:#1d5a8c}.toggle.on .knob::after{transform:translateX(16px);background:#bff0ff;box-shadow:0 0 6px var(--ion)}

/* v1.11 records */
.recordLine{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:11px;color:#a9b9cf;font-variant-numeric:tabular-nums}
.recordLine b{color:#fff;font-size:13px;font-weight:800}
.recordLine .rl{font-style:italic;font-weight:800;color:#7fd8ff;letter-spacing:.04em}
.pSub{margin:16px 0 6px;font-size:14px;font-weight:900}
.recTable{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.recTable th{font-size:11px;color:var(--mute);font-weight:700;padding:4px}
.recTable td{padding:6px 4px;border-top:1px solid rgba(147,164,190,.14);text-align:center;font-weight:700}
.recTable td:first-child{text-align:left;font-style:italic;color:#cfe0f5}

/* v1.11 result record line */
.resultRecord{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 0 8px}
.resultRecord .pb{font-size:13px;font-weight:900;font-style:italic;letter-spacing:.04em;color:#1a1200;background:linear-gradient(90deg,#ffd27a,#ffc34d);padding:4px 14px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);animation:pbIn .5s .3s both}
@keyframes pbIn{from{opacity:0;transform:scale(1.4)}to{opacity:1;transform:none}}
.resultRecord .tot{font-size:11px;color:#a9b9cf;font-variant-numeric:tabular-nums}

/* v1.11 guided practice */
#hud.tut .clock{visibility:hidden}
#coach{position:absolute;left:50%;top:44%;width:min(88%,340px);transform:translate(-50%,-50%);padding:10px 14px 12px;pointer-events:none;
 clip-path:var(--chamfer);--c:10px;background:linear-gradient(180deg,rgba(13,30,60,.92),rgba(6,12,28,.92));box-shadow:inset 0 0 0 1px rgba(120,200,255,.35)}
#coach.pop{animation:coachIn .25s ease-out}
@keyframes coachIn{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}
#coach.ok{background:linear-gradient(180deg,rgba(18,70,60,.94),rgba(6,24,24,.94));box-shadow:inset 0 0 0 1px rgba(120,255,200,.45)}
.cHead{display:flex;align-items:center;gap:10px}
.cTitle{font-size:11px;font-weight:900;color:#7fd8ff;letter-spacing:.08em}
.cDots{display:flex;gap:4px;flex:1}.cDots i{width:14px;height:4px;background:rgba(255,255,255,.18)}.cDots i.done{background:#5fd0ff}.cDots i.now{background:#fff;box-shadow:0 0 6px #7fd8ff}
#coachSkip{pointer-events:auto;border:0;background:transparent;color:#9fb3cc;font-size:11px;font-weight:700;padding:6px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#coachText{margin:8px 0 0;font-size:14px;font-weight:800;line-height:1.55;color:#fff}

/* v1.11 online */
.onlineBtn{width:100%;margin-top:8px;min-height:44px;font-size:14px;letter-spacing:.06em}
.onlineBtn::after{background:linear-gradient(180deg,#14325a,#0a1a36)}
.chip.big{min-height:54px;font-size:15px}
.joinRow{display:grid;grid-template-columns:1fr 110px;gap:8px;margin-top:12px}
#olCode{min-width:0;height:48px;border:0;padding:0 14px;font:800 22px var(--jp);letter-spacing:.4em;text-align:center;color:#fff;background:#0b1428;box-shadow:inset 0 0 0 1px #3a5070;clip-path:var(--chamfer);--c:8px;outline:none;user-select:text;-webkit-user-select:text}
#olCode:focus{box-shadow:inset 0 0 0 2px var(--ion)}
.roomCode{text-align:center;font-size:52px;font-weight:900;font-style:italic;letter-spacing:.25em;color:#eaf6ff;text-shadow:0 0 18px rgba(56,198,255,.8);margin:6px 0 4px;user-select:text;-webkit-user-select:text}
.wait{animation:waitBlink 1.4s ease-in-out infinite}
@keyframes waitBlink{50%{opacity:.4}}
.olStatus{min-height:20px;font-size:12px;line-height:1.6;color:#9fd8f0;margin:10px 0 0;text-align:center}
.olStatus.err{color:#ffb0bd}

/* v1.11.1 hi-res buttons/banners */
.artBtn.online{width:100%;height:54px;margin-top:6px;background-image:var(--btnOnline)}
.banner.draw{background-image:var(--bannerDraw);font-size:0;color:transparent;text-shadow:none}
.artBtn.small{width:140px;height:52px}
.subRow{grid-template-columns:1fr 140px 1fr}
@media (max-height:700px){.artBtn.online{height:46px}.artBtn.small{height:46px}}

/* v1.12 left-handed layout */
#controls.left{flex-direction:row-reverse}
#controls.left #attackButtons{flex-direction:row-reverse}

.olLink{font-size:10px;color:#7f93ad;text-align:center;word-break:break-all;margin:6px 0 0;user-select:text;-webkit-user-select:text}
#rematchButton:disabled{opacity:.5}
#rmStatus{margin:6px 0 2px}

/* v1.13 */
#overlay.arena{background-image:var(--battleBg);background-position:center 44%}
#overlay.arena::before{background:linear-gradient(180deg,rgba(3,6,14,.50),rgba(3,6,14,.70))}
.nameRow{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;margin:10px 0 2px;font-size:13px;font-weight:700;color:#cfe0f5}
#olName{min-width:0;height:44px;border:0;padding:0 12px;font:800 17px var(--jp);color:#fff;background:#0b1428;box-shadow:inset 0 0 0 1px #3a5070;clip-path:var(--chamfer);--c:8px;outline:none;user-select:text;-webkit-user-select:text}
#olName:focus{box-shadow:inset 0 0 0 2px var(--ion)}
.pText.small{font-size:11px;margin:4px 0 10px;color:#8ea2bb}