/* Layout: the WebGL canvas fills the window; menus and the HUD are DOM layers on top. Portrait phone first.
   Look: anime / pop — chunky outlined type (big text uses data-t: an ::before copy draws the thick outline behind),
   neon pink + cyan + gold on dark purple glass. */
:root{
  --ink:#fff; --muted:#b7a9d6; --bg:#120a1f; --glass:#1a0f2ecc; --glass2:#21143ae8; --line:#ffffff26; --dark:#1d1028;
  --pink:#ff3bd0; --cyan:#38d6ff; --gold:#ffd34d; --orange:#ff7a1a; --red:#ff3b4e; --blue:#2f7bff; --green:#7cff6b;
  --en:'Bungee','Dela Gothic One',system-ui,sans-serif; --jp:'Dela Gothic One','M PLUS Rounded 1c','Hiragino Kaku Gothic ProN',sans-serif;
  --body:'M PLUS Rounded 1c','Hiragino Maru Gothic ProN','Hiragino Kaku Gothic ProN',system-ui,sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
*{touch-action:manipulation;box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:500;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
#touch{position:fixed;inset:0;z-index:5;touch-action:none}
#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:60;transition:opacity .32s}
#fade.on{opacity:1}

/* Outlined display text: the element draws the thick outline (and drop shadow), ::after lays the gradient fill (--fill) on top. */
[data-t]{position:relative;display:inline-block;isolation:isolate;color:var(--dark);-webkit-text-stroke:.16em var(--dark);text-shadow:.06em .08em 0 var(--dark),.05em .11em 0 var(--pink)}
[data-t]::after{content:attr(data-t);position:absolute;z-index:1;left:0;top:0;right:0;-webkit-text-stroke:0;text-shadow:none;background:var(--fill,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.screen.dim{background:#0a0414c4;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:30}

/* Buttons */
.btn{font:400 16px/1 var(--jp);letter-spacing:.04em;color:var(--ink);background:#ffffff14;border:2px solid #ffffff55;border-radius:999px;
  padding:13px 22px;min-width:120px;cursor:pointer;transition:background .15s,transform .1s;box-shadow:0 4px 0 #0006}
.btn:hover,.btn:focus-visible{background:#ffffff2a;outline:none}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #0006}
.btn.main{background:linear-gradient(#ff8a3d,#ff3b6b);border-color:#fff;color:#fff;text-shadow:0 2px 0 #8a1036;box-shadow:0 4px 0 #8a1036,0 0 22px #ff3b6b88}
.btn.main:active{box-shadow:0 2px 0 #8a1036}
.btn:disabled{opacity:.35;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.col{display:flex;flex-direction:column;gap:10px;align-items:stretch;margin-top:14px}

/* Loading */
.ld{display:grid;gap:12px;justify-items:center;width:min(100%,300px)}
.ld b{font:400 30px var(--en);letter-spacing:.06em;color:var(--gold)}
.ld i{display:block;width:100%;height:6px;border-radius:3px;background:#ffffff1a;overflow:hidden}
.ld u{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink));transition:width .2s}
.ld small{font:400 11px var(--en);letter-spacing:.2em;color:var(--muted)}

/* Title */
#title{justify-content:space-between;padding-top:max(9vh,env(safe-area-inset-top));background:linear-gradient(#0a041488,transparent 35%,transparent 60%,#0a0414dd)}
.tlogo{text-align:center;transform:rotate(-6deg);animation:logoIn .8s cubic-bezier(.2,1.6,.4,1) both}
@keyframes logoIn{from{transform:rotate(-6deg) scale(2.2);opacity:0}}
/* Glows are drop-shadow filters on the whole line, so they always sit behind the letters (no text-shadow blur over the fill). */
.tlogo .kana{margin:0 0 6px;font:400 clamp(18px,5.4vw,30px) var(--jp);letter-spacing:.2em;color:#fff;-webkit-text-stroke:5px var(--dark);paint-order:stroke fill;text-shadow:0 4px 0 var(--pink);filter:drop-shadow(0 0 8px #ff3bd099)}
.tlogo h1{margin:0;font:400 clamp(66px,21vw,150px)/.86 var(--en);display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 0 16px #ff3bd066)}
.tlogo h1 span{--fill:linear-gradient(#fff9c2 15%,#ffd34d 45%,#ff7a1a 80%);-webkit-text-stroke:.14em var(--dark);text-shadow:.04em .07em 0 var(--dark),.06em .11em 0 var(--pink)}
.tlogo h1 span:last-child{margin-left:.5em;--fill:linear-gradient(#ffffff 15%,#9ff0ff 45%,#38d6ff 80%)}
.tlogo .sub{display:inline-block;margin:14px 0 0;padding:4px 14px;font:400 clamp(12px,3.4vw,16px) var(--en);letter-spacing:.2em;color:var(--dark);background:var(--gold);border-radius:4px;transform:skewX(-10deg)}
.tbottom{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.tnav{display:flex;flex-direction:column;gap:12px;align-items:stretch;width:min(100%,280px)}
.tnav .btn.main{font-size:22px;padding:16px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.04)}}
.tnav .btn:not(.main){padding:11px}
.sitelinks{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;font-size:11px}
.sitelinks a{color:var(--muted);text-decoration:none}
.sitelinks a:hover{color:var(--ink);text-decoration:underline}

/* Panels */
.panel{background:var(--glass2);border:2px solid #ffffff30;border-radius:18px;box-shadow:0 20px 60px #000a,inset 0 0 0 1px #ff3bd033;padding:20px 20px;width:min(100%,520px);max-height:100%;overflow:auto}
.panel.mini{width:min(100%,320px);text-align:center}
.ph{margin:0 0 14px;font:400 24px var(--en);letter-spacing:.04em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;color:var(--gold)}
.ph small{font:500 12px var(--body);color:var(--muted)}
.panel.mini .ph{justify-content:center}
.howl{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:13px;line-height:1.65}
.howl li{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:start}
.howl kbd{font:400 13px var(--jp);text-align:center;padding:4px 4px;border-radius:8px;background:var(--pink);color:#fff}
.howl b{color:var(--gold);font-weight:800}
.pnote{margin:12px 0 0;font-size:12px;color:var(--cyan);line-height:1.6}
.optl{display:grid;gap:12px}
.optl label{display:grid;grid-template-columns:84px 1fr;align-items:center;gap:12px;font-size:14px;font-weight:800}
.optl select,.optl input{font:inherit;font-weight:500;color:var(--ink);background:#ffffff12;border:1px solid #ffffff30;border-radius:8px;padding:7px 8px}
.optl select option{background:#21143a}
.optl input[type=range]{padding:0;accent-color:var(--pink)}

/* Section header / footer (entry, bracket) */
.sh{align-self:stretch;display:flex;align-items:baseline;gap:12px;padding:4px 4px 8px;border-bottom:2px solid #ffffff22;flex:none}
.sh b{font:400 clamp(22px,6.4vw,32px) var(--en);color:var(--gold);text-shadow:0 3px 0 var(--dark)}
.sh small{font-size:12px;color:var(--muted)}
.sf{display:flex;gap:10px;justify-content:center;margin-top:10px;flex:none;width:100%}
.sf .btn{flex:1;max-width:220px}

/* Entry */
#entry,#bracket{background:linear-gradient(#0a0414dd,#0a0414c4 40%,#0a0414ee);justify-content:flex-start}
.entry{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:min(100%,420px);min-height:0}
.eface{width:min(52vw,220px);aspect-ratio:200/240;border-radius:22px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#ff3bd0aa,#38d6ff55 60%,#21143a);border:3px solid #fff;box-shadow:0 8px 0 var(--dark),0 0 30px #ff3bd066}
.eface svg{display:block;width:100%;height:100%}
.ename{display:grid;gap:6px;width:100%;text-align:center}
.ename small{font-size:12px;color:var(--muted)}
.ename input{font:400 24px var(--jp);text-align:center;color:var(--dark);background:#fff;border:3px solid var(--pink);border-radius:14px;padding:10px;outline:none;width:100%;user-select:text;-webkit-user-select:text}
.ename input:focus{box-shadow:0 0 0 4px #ff3bd055}
.avatars{display:flex;gap:10px;justify-content:center}
.avatars button{width:62px;height:62px;padding:0;border-radius:50%;overflow:hidden;border:3px solid #ffffff44;background:#2a1b45;cursor:pointer;transition:transform .15s}
.avatars button svg{display:block;width:100%;height:100%}
.avatars button.on{border-color:var(--gold);transform:scale(1.12);box-shadow:0 0 16px var(--gold)}

/* Bracket */
.bkwrap{flex:1;align-self:stretch;position:relative;min-height:0;overflow:hidden;margin-top:4px}
.bk{position:absolute;left:50%;top:0;transform-origin:50% 0}
.chip{position:absolute;left:0;width:128px;height:26px;display:flex;align-items:center;gap:5px;padding:0 6px 0 2px;border-radius:13px;background:#ffffff14;border:1px solid #ffffff22;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden}
.chip i{width:22px;height:22px;border-radius:50%;overflow:hidden;flex:none;background:#2a1b45}
.chip i svg{display:block;width:100%;height:100%}
.chip b{flex:1;overflow:hidden;text-overflow:ellipsis}
.chip small{font:400 9px var(--en);color:var(--muted)}
.chip.me{background:linear-gradient(90deg,#ff7a1a,#ff3b6b);border-color:#fff;color:#fff}
.chip.lost{opacity:.35;filter:grayscale(.8)}
.bkl{position:absolute;left:0;overflow:visible;pointer-events:none}
.ln{fill:none;stroke:#ffffff30;stroke-width:2}
.ln.win{stroke:#cfd8ff;stroke-width:3}
.ln.me{stroke:var(--gold);stroke-width:4;filter:drop-shadow(0 0 4px var(--gold))}
.ln.rv{stroke-dasharray:200;stroke-dashoffset:200;animation:draw .5s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.rl{font:400 12px var(--en);fill:var(--muted);text-anchor:middle}
.rl.cur{fill:var(--gold)}
.champ rect{fill:#ffffff10;stroke:#ffffff40;stroke-width:2}
.champ.on rect{fill:#ffd34d33;stroke:var(--gold)}
.champ .ct{font:400 10px var(--en);fill:var(--gold);text-anchor:middle}
.champ .cn{font:800 14px var(--body);fill:#fff;text-anchor:middle}
.nextcard{flex:none;display:flex;align-items:center;gap:12px;width:min(100%,460px);margin-top:6px;padding:8px 14px 8px 8px;border-radius:16px;
  background:linear-gradient(100deg,#ff3b6b44,#21143aee 50%);border:2px solid #ff3b6b;box-shadow:0 6px 0 #0006}
.nextcard i{width:76px;height:76px;border-radius:50%;overflow:hidden;flex:none;background:radial-gradient(#ff3bd099,#21143a);border:3px solid #fff}
.nextcard i svg{display:block;width:140%;height:auto;margin:-6% 0 0 -20%}
.nextcard div{display:grid;gap:2px;min-width:0}
.nextcard small{font-size:11px;color:var(--gold);font-weight:800}
.nextcard b{font:400 20px var(--jp)}
.nextcard em{font-style:normal;font-size:12px;color:var(--muted)}
.nextcard span{font:400 13px var(--en);color:var(--cyan)}

/* VS */
.vs{padding:0;overflow:hidden;background:#000}
.vsbg{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,#ff3bd022 0 6deg,transparent 6deg 12deg),linear-gradient(115deg,#1f6fe5 0 49.6%,#fff 49.6% 50.4%,#e0243a 50.4%);animation:spin 16s linear infinite}
.vs.boss .vsbg{background:repeating-conic-gradient(from 0deg,#ffd34d22 0 6deg,transparent 6deg 12deg),linear-gradient(115deg,#1f6fe5 0 49.6%,#ffd34d 49.6% 50.4%,#1a0c00 50.4%)}
@keyframes spin{to{transform:rotate(360deg)}}
.vsround{position:absolute;top:max(5vh,env(safe-area-inset-top));left:0;right:0;margin:0;text-align:center;font:400 clamp(26px,8vw,44px) var(--en);color:#fff;text-shadow:0 4px 0 var(--dark);opacity:0}
.vsp{position:absolute;width:min(60%,300px);opacity:0}
.vsp i{display:block;width:100%;filter:drop-shadow(0 0 0 #fff) drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 -5px 0 #fff)}
.vsp i svg{display:block;width:100%;height:auto}
.vsp.l{left:-3%;top:9%}
.vsp.l i{-webkit-mask:linear-gradient(#000 78%,transparent 96%);mask:linear-gradient(#000 78%,transparent 96%)}
.vsp.r{right:-3%;bottom:0}
.vsp b{position:absolute;font:400 clamp(18px,5.6vw,28px) var(--jp);padding:4px 14px;background:var(--dark);border:3px solid #fff;border-radius:10px;transform:skewX(-8deg);white-space:nowrap;z-index:1}
.vsp small{position:absolute;font-size:11px;font-weight:800;background:#fff;color:var(--dark);padding:3px 10px;border-radius:6px;white-space:nowrap;z-index:1}
.vsp.l b{left:84%;top:46%}.vsp.l small{left:86%;top:calc(46% + 46px)}
.vsp.r b{right:84%;top:20%}.vsp.r small{right:86%;top:calc(20% + 46px)}
.vsmark{position:absolute;left:50%;top:50%;font:400 clamp(90px,30vw,170px)/1 var(--en);color:var(--gold);transform:translate(-50%,-50%) rotate(-10deg) scale(4);opacity:0;
  -webkit-text-stroke:6px var(--dark);text-shadow:6px 8px 0 var(--dark),0 0 40px #ff7a1a}
.vsline{position:absolute;left:5%;width:52%;bottom:max(18px,env(safe-area-inset-bottom));margin:0;padding:10px 14px;background:#fff;color:var(--dark);font-weight:800;font-size:14px;border-radius:16px;border:3px solid var(--dark);text-align:center;opacity:0;line-height:1.5}
.vsline::before{content:'';position:absolute;right:-18px;bottom:16px;border:8px solid transparent;border-left:12px solid var(--dark)}
.vs.go .vsround{animation:fadeDown .4s .1s ease-out forwards}
.vs.go .vsp.l{animation:slideL .45s .25s cubic-bezier(.2,1.4,.4,1) forwards}
.vs.go .vsp.r{animation:slideR .45s .45s cubic-bezier(.2,1.4,.4,1) forwards}
.vs.go .vsmark{animation:slam .35s .85s cubic-bezier(.3,1.6,.5,1) forwards,shake .3s 1.2s}
.vs.go .vsline{animation:pop .3s 1.5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes fadeDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
@keyframes slideL{from{opacity:1;transform:translateX(-110%)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:1;transform:translateX(110%)}to{opacity:1;transform:none}}
@keyframes slam{to{opacity:1;transform:translate(-50%,-50%) rotate(-10deg) scale(1)}}
@keyframes shake{25%{margin-left:-8px}50%{margin-left:8px}75%{margin-left:-4px}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* ---------- Match HUD ---------- */
#hud{position:fixed;inset:0;z-index:8;pointer-events:none;font-family:var(--body)}
#hud button{pointer-events:auto}
.hbar{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:stretch;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));max-width:640px;margin:0 auto}
.pc{position:relative;display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:6px;align-items:center;padding:6px 8px 4px 6px;border-radius:14px;
  background:var(--glass);border:2px solid #ffffff2a;transition:transform .2s,border-color .2s,box-shadow .2s;min-width:0}
.pc .pf{width:38px;height:38px;border-radius:50%;overflow:hidden;background:#2a1b45;border:2px solid #fff;grid-row:1}
.pc .pf svg{display:block;width:100%;height:100%}
.pc .pn{display:grid;min-width:0;line-height:1.15}
.pc .nm{font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .st{font:400 9px var(--en);color:var(--muted);white-space:nowrap}
.pc .rem{grid-column:1 / -1;font:400 clamp(30px,10vw,44px)/1 var(--en);text-align:center;color:#cfd8ff;margin-top:2px}
.pc .rem.roll{animation:remPop .35s ease-out}
@keyframes remPop{0%{transform:scale(1.25);color:#fff}}
.pc.on{border-color:var(--gold);box-shadow:0 0 0 2px #ffd34d55,0 0 18px #ffd34d77;transform:scale(1.03)}
.pc.on .rem{color:var(--gold);text-shadow:0 3px 0 var(--dark)}
.pc.on::after{content:'▼';position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--gold);animation:bob .8s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,3px)}}
.rnd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 2px}
.rnd small{font:400 9px var(--en);color:var(--muted)}
.rnd b{font:400 16px var(--en)}
#pauseBtn{margin-top:4px;width:34px;height:30px;border-radius:10px;border:2px solid #ffffff44;background:#0006;color:#fff;font:400 12px var(--en);cursor:pointer}
.darts{position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 104px);left:50%;transform:translateX(-50%);display:flex;gap:5px;align-items:center;
  padding:4px 6px;border-radius:999px;background:var(--glass);border:1px solid #ffffff22}
.darts span{min-width:58px;height:24px;display:grid;place-items:center;border-radius:999px;background:#ffffff10;font:400 12px var(--en);color:#fff}
.darts span:empty::before{content:'';width:18px;height:3px;border-radius:2px;background:#ffffff33}
.darts span.in{animation:pop .25s cubic-bezier(.2,1.6,.4,1)}
.darts .r-T{background:var(--orange)}.darts .r-D{background:var(--blue)}.darts .r-OB,.darts .r-IB{background:var(--red)}.darts .r-OUT{background:#555;color:#bbb}
.darts em{font:400 15px var(--en);font-style:normal;min-width:44px;text-align:center;color:var(--gold)}
.darts.bust em{color:var(--red)}

#aim{position:absolute;left:0;top:0;width:0;height:0;z-index:2}
#aim i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px #0008,inset 0 0 0 2px #0006;animation:aimPulse 1.2s ease-in-out infinite}
#aim i::before,#aim i::after{content:'';position:absolute;background:#fff;box-shadow:0 0 0 1px #0008}
#aim i::before{left:50%;top:-8px;bottom:-8px;width:2px;margin-left:-1px}
#aim i::after{top:50%;left:-8px;right:-8px;height:2px;margin-top:-1px}
@keyframes aimPulse{50%{transform:scale(.82)}}

/* Hit popup */
#pop{position:absolute;left:0;right:0;top:34%;display:flex;justify-content:center;z-index:4}
.hp{position:relative;display:flex;flex-direction:column;align-items:center;animation:hitIn .9s cubic-bezier(.2,1.5,.4,1) forwards}
.hp small{font:400 18px var(--en);letter-spacing:.06em;color:#fff;text-shadow:0 2px 0 var(--dark),0 0 10px #000}
.hp b{font:400 84px/1 var(--en);-webkit-text-stroke:.14em var(--dark)}
.hp em{font:400 16px var(--en);font-style:normal;color:#fff;background:var(--dark);padding:2px 10px;border-radius:6px;margin-top:2px}
.hp.single b{font-size:64px}
.hp.double small{color:#9fd0ff}.hp.double b{--fill:linear-gradient(#fff,#8fc4ff 50%,#2f7bff)}
.hp.triple small{color:#ffd34d}.hp.triple b{font-size:100px;--fill:linear-gradient(#fff6b0,#ffd34d 45%,#ff7a1a)}
.hp.bull small,.hp.dbull small{font-size:34px;color:#fff;background:linear-gradient(#fff,#ffd34d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 var(--dark)) drop-shadow(0 0 8px #ff3b4e)}
.hp.bull b,.hp.dbull b{font-size:110px;--fill:linear-gradient(#fff,#ff8a8a 40%,#e0243a)}
.hp.dbull small{font-size:40px}
.hp.miss b{font-size:52px;--fill:#aaa;animation:shake .3s}
.hp .rays{position:absolute;left:50%;top:55%;width:420px;height:420px;margin:-210px 0 0 -210px;z-index:-2;border-radius:50%;
  background:repeating-conic-gradient(#ffd34d66 0 8deg,transparent 8deg 20deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);animation:spin 3s linear infinite}
.hp.bull .rays,.hp.dbull .rays{background:repeating-conic-gradient(#ff3b4e88 0 8deg,#ffd34d55 8deg 14deg,transparent 14deg 22deg)}
@keyframes hitIn{0%{transform:scale(2.6);opacity:0}18%{transform:scale(.92);opacity:1}28%{transform:scale(1.04)}70%{transform:scale(1);opacity:1}100%{transform:translateY(-30px) scale(.95);opacity:0}}

/* Banners */
#banner{position:absolute;left:0;right:0;top:40%;display:flex;justify-content:center;z-index:5}
.bn{display:flex;flex-direction:column;align-items:center;padding:10px 0;width:100%;background:linear-gradient(90deg,transparent,#1d1028e8 15%,#1d1028e8 85%,transparent);
  border-top:3px solid var(--pink);border-bottom:3px solid var(--cyan);animation:bnIn .35s cubic-bezier(.2,1.4,.4,1)}
.bn b{font:400 clamp(40px,13vw,64px)/1.05 var(--en);--fill:linear-gradient(#fff 30%,#ffd34d)}
.bn small{font-size:14px;font-weight:800;margin-top:4px;color:#fff}
.bn.out{animation:bnOut .25s ease-in forwards}
@keyframes bnIn{from{transform:scaleY(0) skewX(-20deg);opacity:0}}
@keyframes bnOut{to{transform:scaleY(0);opacity:0}}
.bn.bust{border-color:var(--red)}.bn.bust b{--fill:linear-gradient(#fff,#ff6b6b 40%,#c0122a);animation:shake .35s}
.bn.change b{font-size:clamp(30px,9vw,44px);--fill:linear-gradient(#fff,#9ff0ff 40%,#38d6ff)}
.bn.total b{font-size:clamp(52px,16vw,84px)}
.bn.gameshot{border-color:var(--gold);padding:18px 0}.bn.gameshot b{font-size:clamp(44px,14vw,76px);--fill:linear-gradient(#fff,#ffe680 40%,#ff7a1a)}
.bn.gameshot small{font:400 22px var(--en);color:var(--gold)}
.bn.round b{font-size:clamp(36px,11vw,56px)}
.bn.gameon b{--fill:linear-gradient(#fff,#ff9ae6 40%,#ff3bd0)}

/* Award movies */
#award{position:absolute;inset:0;z-index:6}
.aw{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;animation:awIn .2s ease-out}
.aw.out{animation:awOut .3s ease-in forwards}
@keyframes awIn{from{opacity:0}}
@keyframes awOut{to{opacity:0;transform:scale(1.2)}}
.aw .flash{position:absolute;inset:0;background:#fff;animation:flash .5s ease-out forwards}
@keyframes flash{to{opacity:0}}
.aw .burst{position:absolute;left:50%;top:50%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;background:repeating-conic-gradient(var(--c1) 0 7deg,transparent 7deg 15deg);opacity:.55;animation:spin 6s linear infinite}
.aw .band{position:absolute;left:-10%;right:-10%;top:50%;height:150px;margin-top:-75px;background:linear-gradient(90deg,transparent,var(--c2) 20%,var(--c2) 80%,transparent);transform:rotate(-8deg) scaleX(0);animation:band .4s .15s cubic-bezier(.2,1.4,.4,1) forwards;box-shadow:0 0 40px var(--c1)}
@keyframes band{to{transform:rotate(-8deg) scaleX(1)}}
.aw b{position:relative;font:400 clamp(44px,14vw,84px)/1 var(--en);text-align:center;transform:rotate(-8deg) scale(3);opacity:0;animation:awText .45s .3s cubic-bezier(.3,1.7,.5,1) forwards;
  --fill:linear-gradient(#fff 20%,var(--c3));-webkit-text-stroke:.14em var(--dark);text-shadow:.05em .08em 0 var(--dark),0 0 .5em var(--c1);max-width:94vw}
.aw small{position:relative;margin-top:14px;font:400 18px var(--jp);color:#fff;text-shadow:0 2px 0 var(--dark);transform:rotate(-8deg);opacity:0;animation:pop .3s .7s forwards}
@keyframes awText{to{opacity:1;transform:rotate(-8deg) scale(1)}}
.a-LOWTON{--c1:#38d6ff;--c2:#1f4fbf;--c3:#38d6ff}
.a-HIGHTON{--c1:#ff7a1a;--c2:#b8320a;--c3:#ffb347}
.a-HAT{--c1:#ffd34d;--c2:#8a1036;--c3:#ffd34d}
.a-BLACK{--c1:#ffd34d;--c2:#0b0b10;--c3:#ffe680}
.a-TON80{--c1:#ff3bd0;--c2:#3a0a6a;--c3:#ffd34d}
.a-TON80 .burst{background:repeating-conic-gradient(#ff3b4e 0 5deg,#ffd34d 5deg 10deg,#7cff6b 10deg 15deg,#38d6ff 15deg 20deg,#c86bff 20deg 25deg,transparent 25deg 30deg);opacity:.5;animation-duration:3s}
.a-TON80 b{font-size:clamp(70px,24vw,130px)}
.aw .bulls{position:relative;display:flex;gap:14px;margin-bottom:16px;transform:rotate(-8deg)}
.aw .bulls i{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle,#18181c 0 28%,#e0243a 29% 60%,#fff 61% 66%,#18181c 67%);border:3px solid #fff;opacity:0;animation:pop .3s cubic-bezier(.2,1.8,.4,1) forwards}
.a-BLACK .bulls i{background:radial-gradient(circle,#18181c 0 60%,#ffd34d 61% 66%,#18181c 67%)}
.aw .bulls i:nth-child(1){animation-delay:.7s}.aw .bulls i:nth-child(2){animation-delay:.9s}.aw .bulls i:nth-child(3){animation-delay:1.1s}
.aw .t80{position:relative;display:flex;gap:10px;margin-bottom:12px;transform:rotate(-8deg)}
.aw .t80 i{font:400 20px var(--en);font-style:normal;background:var(--orange);color:#fff;padding:4px 10px;border-radius:8px;border:2px solid #fff;opacity:0;animation:pop .25s cubic-bezier(.2,1.8,.4,1) forwards}
.aw .t80 i:nth-child(1){animation-delay:.8s}.aw .t80 i:nth-child(2){animation-delay:1s}.aw .t80 i:nth-child(3){animation-delay:1.2s}

/* NPC cut-in */
#cut{position:absolute;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));z-index:3}
.ci{display:flex;align-items:flex-end;gap:6px;padding:0 10px;animation:slideL .3s cubic-bezier(.2,1.4,.4,1)}
.ci.out{animation:fadeOutL .3s ease-in forwards}
@keyframes fadeOutL{to{transform:translateX(-30px);opacity:0}}
.ci i{width:110px;flex:none;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 -3px 0 #fff)}
.ci i svg{display:block;width:100%;height:auto}
.ci p{position:relative;margin:0 0 70px;padding:10px 14px;background:#fff;color:var(--dark);border:3px solid var(--dark);border-radius:16px;font-weight:800;font-size:15px;line-height:1.4;max-width:calc(100% - 130px)}
.ci.st{opacity:.92}
.ci.st i{width:84px}
.ci.st b{margin:0 0 18px;padding:4px 10px;background:var(--dark);border:2px solid #fff;border-radius:8px;font:400 14px var(--jp)}
.ci.st b small{font:800 11px var(--body);margin-left:4px;color:var(--muted)}
.ci p::before{content:'';position:absolute;left:-16px;bottom:14px;border:8px solid transparent;border-right:12px solid var(--dark)}

/* Finish suggestion, quick-aim chips, power meter, hint */
#arrange{position:absolute;left:50%;bottom:calc(36% + 8px);transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#1d1028dd;border:2px solid var(--green);white-space:nowrap}
#arrange small{font:400 10px var(--en);color:var(--green)}
#arrange b{font:400 15px var(--en)}
#arrange i{font-style:normal;color:var(--muted)}
#chips{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 14px);display:flex;flex-direction:column;gap:8px;z-index:6}
#chips button{min-width:58px;height:34px;border-radius:999px;border:2px solid #fff;background:#1d1028cc;color:#fff;font:400 13px var(--en);cursor:pointer}
#chips button:active{transform:scale(.94)}
#chips #chipArr{background:#1d6b2acc;border-color:var(--green)}
#power{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 30px);width:16px;height:140px;border-radius:8px;background:linear-gradient(#ff3b4e,#ffd34d 30%,#7cff6b 42% 58%,#ffd34d 70%,#38d6ff);border:2px solid #fff;z-index:6}
#power i{position:absolute;left:-4px;right:-4px;top:calc(50% - 10px);height:20px;border:2px dashed #fff;border-radius:4px}
#power u{position:absolute;left:-10px;width:32px;height:6px;margin-bottom:-3px;background:#fff;border:2px solid var(--dark);border-radius:3px;transition:bottom .25s cubic-bezier(.2,1.5,.4,1)}
#power em{position:absolute;right:24px;top:50%;transform:translateY(-50%);font:400 14px var(--jp);font-style:normal;white-space:nowrap;text-shadow:0 2px 0 var(--dark),0 0 6px #000}
#power.good em{color:var(--green)}#power.hi em{color:var(--red)}#power.lo em{color:var(--cyan)}
#hint{position:absolute;left:0;right:0;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 4px);margin:0;text-align:center;font-weight:800;font-size:14px;color:#fff;text-shadow:0 2px 0 var(--dark),0 0 8px #000;animation:pulse2 1.4s ease-in-out infinite}
@keyframes pulse2{50%{opacity:.5}}
#hint.r{text-align:right;padding-right:max(16px,env(safe-area-inset-right))}

/* Result */
.res{text-align:center;width:min(100%,420px)}
.rhead{display:flex;flex-direction:column;align-items:center}
.rhead b{font:400 clamp(52px,16vw,76px)/1 var(--en);--fill:linear-gradient(#fff,#ffe680 40%,#ff7a1a);animation:hitIn2 .6s cubic-bezier(.3,1.6,.5,1)}
#result.lost .rhead b{--fill:linear-gradient(#fff,#9fb3ff 40%,#5a6aa8)}
@keyframes hitIn2{from{transform:scale(2.4) rotate(-8deg);opacity:0}}
.rhead small{font:400 15px var(--jp);margin-top:6px}
.rfaces{display:flex;justify-content:center;gap:10px;margin:10px 0 6px}
.rfaces i{width:96px;height:96px;border-radius:50%;overflow:hidden;background:#2a1b45;border:3px solid #fff}
.rfaces i svg{display:block;width:150%;height:auto;margin:-8% 0 0 -25%}
.rfaces i.w{border-color:var(--gold);box-shadow:0 0 18px var(--gold)}
.rfaces i.l{filter:grayscale(.6) brightness(.8)}
.rstats{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
.rstats th,.rstats td{padding:5px 6px;border-bottom:1px solid #ffffff1a}
.rstats thead th{font-weight:800;color:var(--gold);font-size:13px}
.rstats tbody th{font-weight:500;color:var(--muted);font-size:12px;width:30%}
.rstats td{font:400 16px var(--en)}
.rline{margin:12px 0 0;font-size:13px;color:#fff;font-weight:800}

/* Final */
.final{background:radial-gradient(circle at 50% 40%,#3a1a5ecc,#0a0414f2 70%);justify-content:flex-start;gap:6px;overflow:hidden}
.frays{position:absolute;left:50%;top:38%;width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;background:repeating-conic-gradient(#ffffff10 0 8deg,transparent 8deg 18deg);animation:spin 30s linear infinite;pointer-events:none}
.final.champ .frays{background:repeating-conic-gradient(#ffd34d33 0 8deg,transparent 8deg 18deg)}
.fhead{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:3vh}
.fhead b{font:400 clamp(44px,13vw,70px)/1 var(--en);--fill:linear-gradient(#fff,#ffe680 40%,#ff7a1a);animation:hitIn2 .7s cubic-bezier(.3,1.6,.5,1)}
.fhead small{font:400 14px var(--jp);margin-top:6px}
.trophy{position:relative;z-index:1;width:120px;margin-top:4px;display:none;filter:drop-shadow(0 0 18px #ffd34d88);animation:trophy 1s .3s cubic-bezier(.2,1.6,.4,1) both}
.final.champ .trophy{display:block}
@keyframes trophy{from{transform:translateY(-200px) rotate(-30deg);opacity:0}}
.fface{position:relative;display:flex;flex-direction:column;align-items:center}
.fface i{width:min(48vw,200px);aspect-ratio:200/240;display:block;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)}
.final:not(.champ) .fface i{width:min(36vw,150px)}
.fface svg{display:block;width:100%;height:100%}
.fface p{margin:-24px 0 0;position:relative;font:400 20px var(--jp);background:var(--dark);border:3px solid var(--gold);padding:4px 16px;border-radius:10px}
.frec{position:relative;list-style:none;margin:8px 0 0;padding:10px 16px;display:grid;gap:6px;width:min(100%,320px);background:var(--glass);border-radius:14px;border:2px solid #ffffff22}
.frec li{display:flex;justify-content:space-between;font-size:14px}
.frec b{font:400 15px var(--jp);color:var(--gold)}
.final .sf{position:relative;margin-top:8px}
/* The final screen's content scrolls on short phones so the buttons always stay on screen. */
.fbody{position:relative;flex:1;min-height:0;width:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:6px;touch-action:pan-y}
/* Ending (champion) */
.fend{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;overflow:hidden;
  padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 30%,#4a2370f2,#0a0414fa 75%);animation:awIn .8s ease-out}
.fe1{margin:0;font:400 16px var(--en);letter-spacing:.3em;color:var(--cyan)}
.fe2{font:400 clamp(22px,7.6vw,48px)/1 var(--en);--fill:linear-gradient(#fff,#ffe680 40%,#ff7a1a);animation:hitIn2 .7s .2s cubic-bezier(.3,1.6,.5,1) both}
.feface{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:min(100%,330px);margin:6px 0}
.feface i{display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#2a1b45;border:2px solid #ffffff66;opacity:0;animation:pop .3s cubic-bezier(.2,1.8,.4,1) forwards}
.feface i svg{display:block;width:100%;height:100%}
.feface i.boss{border-color:var(--gold);box-shadow:0 0 10px var(--gold)}
.feline{display:flex;align-items:center;gap:8px;width:min(100%,360px);opacity:0;animation:pop .4s 1.9s forwards}
.feline i{width:76px;height:76px;flex:none;border-radius:50%;overflow:hidden;border:3px solid var(--gold);background:#2a1b45}
.feline i svg{display:block;width:150%;height:auto;margin:-8% 0 0 -25%}
.feline p{position:relative;margin:0;padding:8px 12px;background:#fff;color:var(--dark);border:3px solid var(--dark);border-radius:14px;font-weight:800;font-size:14px;line-height:1.45;text-align:left}
.fe3{margin:4px 0 0;font:400 15px/1.6 var(--jp);opacity:0;animation:pop .4s 2.4s forwards}
.fe4{margin:0;font:400 13px var(--en);letter-spacing:.12em;color:var(--gold);opacity:0;animation:fadeDown .6s 2.9s forwards}
.fend .sf{margin-top:10px}
/* Title: champion crown */
.crown{margin:10px 0 0;font:400 15px var(--jp);color:var(--gold);text-shadow:0 2px 0 var(--dark),0 0 10px #ffd34d88}

/* ---------- Tutorial ---------- */
#tut{position:absolute;left:0;right:0;bottom:calc(36% + 10px);z-index:7;display:flex;justify-content:center;padding:0 12px;pointer-events:none}
#tut .tc{position:relative;width:min(100%,400px);padding:12px 16px 12px;border-radius:16px;background:#fffffff2;color:var(--dark);border:3px solid var(--pink);box-shadow:0 6px 0 #0007;animation:pop .3s cubic-bezier(.2,1.6,.4,1)}
#tut small{display:block;font:400 10px var(--en);color:var(--pink);letter-spacing:.1em}
#tut b{display:block;font:400 18px var(--jp);margin:2px 0 4px}
#tut p{margin:0;font-size:14px;font-weight:800;line-height:1.55}
#tut p em{font-style:normal;color:#d0157e}
#tutOk{display:none;margin:10px auto 0;min-width:140px;padding:11px 20px}
#tut.modal{inset:0;bottom:0;align-items:center;background:#0a0414aa;pointer-events:auto}
#tut.modal #tutOk{display:block}
#finger{position:absolute;left:50%;z-index:7;width:0;height:0;pointer-events:none}
/* Touch marker: a glowing fingertip dot with a ring (no emoji, so it looks the same everywhere). */
#finger::before{content:'';position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;background:#ffffffe6;border:4px solid var(--pink);box-shadow:0 0 0 6px #ff3bd044,0 0 22px #ff3bd0}
#finger::after{content:'';position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:2px solid #fff;opacity:.7;animation:fRing 1s ease-out infinite}
@keyframes fRing{from{transform:scale(.5);opacity:.9}to{transform:scale(1.3);opacity:0}}
#finger.swipe{animation:fSwipe 1.6s cubic-bezier(.5,0,.3,1) infinite}
#finger.drag{animation:fDrag 2.4s ease-in-out infinite}
@keyframes fSwipe{0%{top:90%;opacity:0}12%{top:88%;opacity:1}45%{top:88%}70%{top:58%;opacity:1}85%{top:54%;opacity:0}100%{top:90%;opacity:0}}
@keyframes fDrag{0%{top:44%;margin-left:0;opacity:0}15%{opacity:1}50%{top:28%;margin-left:6px}85%{opacity:1}100%{top:28%;margin-left:6px;opacity:0}}

/* Landscape / desktop: keep the HUD and menus in a phone-like column. */
@media (min-aspect-ratio: 1/1){
  .hbar{max-width:560px}
  #arrange{bottom:calc(30% + 8px)}
  .vsp{width:min(34%,300px)}
  .vsp.l{left:8%;top:auto;bottom:0}.vsp.r{right:8%}
  .vsp.l i{-webkit-mask:none;mask:none}
  .vsp.l b{left:auto;right:-10%;top:24%}.vsp.l small{left:auto;right:-6%;top:calc(24% + 46px)}
  .vsline{left:auto;right:36%;width:min(30%,320px);bottom:auto;top:20%}
}