@font-face{font-family:Bangers;src:url(lib/bangers.woff2) format('woff2');font-display:block}
@font-face{font-family:'Dela Gothic One';src:url(lib/dela.woff2) format('woff2');font-display:block}
@font-face{font-family:Kosugi;src:url(lib/kosugi.woff2) format('woff2')}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{width:100%;height:100%;background:#05040a;overflow:hidden;touch-action:none}
#game{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#ui{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform-origin:center;pointer-events:none;font-family:Kosugi,sans-serif;color:#fff}
#ui>*{pointer-events:auto}
.screen{position:absolute;inset:0;display:none}
.screen.on{display:block;animation:fade .5s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.btn{font-family:Bangers;letter-spacing:2px;font-size:30px;color:#fff;background:linear-gradient(180deg,#2a1e3a,#140c20);border:2px solid #d9b44a;padding:8px 28px;cursor:pointer;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:transform .12s,background .12s,color .12s;display:block;min-width:260px;margin:8px 0}
.btn:hover{transform:translateX(8px) scale(1.04);background:linear-gradient(180deg,#d9b44a,#a8832a);color:#120a1e}
.btn.big{font-size:42px;background:linear-gradient(180deg,#d8333b,#7a1420);border-color:#ffd34d;box-shadow:0 0 30px rgba(255,80,60,.4)}
.btn.big:hover{background:linear-gradient(180deg,#ffd34d,#e88a2a)}
.btn.small{font-size:22px;min-width:0;padding:4px 20px}
/* title */
#scr-title{background:linear-gradient(90deg,rgba(5,4,14,.85) 0%,rgba(5,4,14,.35) 38%,rgba(0,0,0,0) 60%)}
.logo-wrap{position:absolute;left:70px;top:50px}
.jp{font-family:'Dela Gothic One';font-size:30px;color:#ffd34d;letter-spacing:10px;text-shadow:0 0 20px rgba(255,200,80,.6);animation:rise .8s .1s both}
.logo{font-family:Bangers;line-height:.82;margin-top:6px;filter:drop-shadow(0 8px 0 #000) drop-shadow(0 0 30px rgba(255,90,60,.45))}
.logo span{display:block;animation:rise .8s both}
.logo .a{font-size:128px;background:linear-gradient(180deg,#fff 30%,#ffd34d 70%,#e8702a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #2a0a0a;animation-delay:.2s}
.logo .b{font-size:60px;color:#ff4a5a;margin-left:12px;animation-delay:.3s}
.logo .c{font-size:170px;background:linear-gradient(180deg,#ffffff,#ff8a5a 60%,#c8333b);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px #2a0a0a;animation-delay:.4s;margin-top:-10px}
@keyframes rise{from{opacity:0;transform:translateY(30px) skewX(-8deg)}to{opacity:1;transform:none}}
.tag{font-size:18px;color:#e8d8c8;margin-top:8px;letter-spacing:1px;animation:rise .8s .5s both;text-shadow:0 2px 4px #000}
.menu{position:absolute;left:70px;bottom:34px;animation:rise .8s .6s both}
.best{font-family:'Dela Gothic One';color:#d9b44a;font-size:16px;margin-top:10px;letter-spacing:2px}
/* select */
#scr-select{background:radial-gradient(ellipse at 70% 60%,rgba(40,20,60,.3),rgba(5,4,12,.92) 70%)}
.sel-head{position:absolute;left:30px;top:20px;display:flex;align-items:center;gap:24px}
.sel-head h2{font-family:Bangers;font-size:54px;letter-spacing:3px;text-shadow:0 4px 0 #000,0 0 20px rgba(255,200,80,.4)}
#grid{position:absolute;left:30px;top:110px;width:640px;display:grid;grid-template-columns:repeat(4,150px);gap:12px}
.card{width:150px;height:210px;position:relative;cursor:pointer;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.5));border:2px solid rgba(255,255,255,.12);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);transition:transform .15s,border-color .15s;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 70%,var(--c),transparent 65%);opacity:.25}
.card canvas{position:absolute;left:0;top:0}
.card:hover{transform:translateY(-6px);border-color:var(--c)}
.card.sel{border-color:var(--c);box-shadow:inset 0 0 30px var(--c);transform:translateY(-6px)}
.card.sel::before{opacity:.6}
.cn{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-family:Bangers;font-size:24px;letter-spacing:2px;text-shadow:0 2px 0 #000}
.card.locked{filter:grayscale(.6);cursor:not-allowed}
.lk{position:absolute;top:8px;left:0;right:0;text-align:center;font-family:'Dela Gothic One';font-size:13px;color:#ffd34d}
.sel-info{position:absolute;left:680px;top:60px;width:580px;height:640px}
#sel-big{position:absolute;left:-60px;top:40px;filter:drop-shadow(0 0 40px var(--c))}
.sel-text{position:absolute;right:0;top:40px;width:300px;text-align:right}
.sjp{font-family:'Dela Gothic One';color:#ffd34d;font-size:20px;letter-spacing:6px}
.sname{font-family:Bangers;font-size:44px;line-height:1;text-shadow:0 4px 0 #000}
.stitle{color:#c8b8d8;font-size:15px;margin-bottom:8px}
#sel-desc{font-size:14px;line-height:1.4;color:#e8e0f0;margin-bottom:10px}
.stats div{font-family:'Dela Gothic One';font-size:12px;display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:3px 0;color:#c8b8d8}
.stats span{width:140px;height:8px;background:rgba(255,255,255,.1);display:block}
.stats i{display:block;height:100%;background:linear-gradient(90deg,#ffd34d,#ff5a3a)}
.moves{margin:10px 0;font-size:13px}
.moves div{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.moves b{font-family:'Dela Gothic One';color:#ffd34d;font-weight:normal}
.moves .sup{color:#ff8aa0}
.sel-text .btn{margin-left:auto;min-width:280px;font-size:30px}
.sel-text .btn.big{font-size:36px}
/* over */
#scr-over{background:radial-gradient(ellipse at center,rgba(60,0,10,.75),rgba(0,0,0,.95))}
.over-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:900px}
.ov-k{font-family:'Dela Gothic One';font-size:90px;color:#c8333b;opacity:.9;text-shadow:0 0 40px rgba(255,40,60,.6)}
.ov-t{font-family:Bangers;font-size:40px;letter-spacing:4px}
.ov-f{font-family:Bangers;font-size:170px;line-height:.9;color:#ffd34d;text-shadow:0 8px 0 #000}
.ov-s{color:#d8c8c8;margin-bottom:20px}
.ov-stats{display:flex;justify-content:center;gap:34px;margin-bottom:26px}
.ov-stats div{font-size:13px;color:#c8b8d8}
.ov-stats b{display:block;font-family:Bangers;font-size:42px;color:#fff}
.ov-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ov-btns .btn{margin:0;min-width:200px}
/* modals */
.modal{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(5,3,10,.86);backdrop-filter:blur(4px);text-align:center}
.modal.on{display:flex;animation:fade .3s}
.ph{font-family:Bangers;font-size:64px;letter-spacing:3px;text-shadow:0 5px 0 #000,0 0 30px rgba(255,200,80,.5)}
.ph2{font-family:'Dela Gothic One';color:#ffd34d;letter-spacing:4px;margin-bottom:16px}
.cards{display:flex;gap:26px;margin-top:10px}
.pcard{width:250px;height:330px;cursor:pointer;background:linear-gradient(180deg,#2a1a3a,#120a1e);border:2px solid #d9b44a;padding:24px 18px;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);animation:deal .45s both;transition:transform .15s}
.pcard:hover{transform:translateY(-12px) scale(1.04);border-color:#fff;background:linear-gradient(180deg,#4a2a3a,#1e0e1e)}
@keyframes deal{from{opacity:0;transform:translateY(80px) rotate(6deg)}to{opacity:1;transform:none}}
.pi{font-family:'Dela Gothic One';font-size:92px;color:#ffd34d;text-shadow:0 0 30px rgba(255,200,80,.6);line-height:1.2}
.pn{font-family:Bangers;font-size:34px;margin:10px 0}
.pd{font-size:16px;color:#e8d8f0;line-height:1.4}
.po{margin-top:12px;font-size:12px;color:#a898b8}
#victory .vp{max-width:640px;font-size:18px;line-height:1.6;margin:16px 0 26px;color:#f0e0d0}
#records .list{width:640px;margin:20px 0}
.rr{display:flex;gap:20px;align-items:center;padding:10px 16px;background:rgba(255,255,255,.05);margin:4px 0;font-size:16px}
.rr span{font-family:Bangers;font-size:26px;color:#d9b44a;width:40px}.rr b{flex:1;text-align:left;font-family:Bangers;font-size:24px;letter-spacing:1px;font-weight:normal}.rr em{font-style:normal;font-family:Bangers;font-size:26px}.rr small{color:#988;width:90px}
.howgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;width:820px;margin:16px 0;text-align:left;font-size:15px}
.howgrid b{display:block;font-family:Bangers;font-size:24px;color:#ffd34d;font-weight:normal;letter-spacing:1px}
.hp{width:820px;font-size:15px;line-height:1.6;color:#e0d0e8;margin-bottom:20px;text-align:left}
.mute{position:absolute;right:14px;bottom:12px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:22px;width:44px;height:44px;border-radius:50%;cursor:pointer;z-index:5}
/* touch */
#touch{position:absolute;inset:0;display:none;pointer-events:none}
#touch.on{display:block}
#touch b{position:absolute;pointer-events:auto;display:flex;align-items:center;justify-content:center;font-family:Bangers;font-size:30px;color:#fff;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);border-radius:50%;backdrop-filter:blur(2px)}
#touch b.dn{background:rgba(255,211,77,.5)}
.dpad{position:absolute;left:40px;bottom:90px;width:250px;height:250px}
.dpad b{width:90px;height:90px}
.dpad .u{left:80px;top:0}.dpad .d{left:80px;bottom:0}.dpad .l{left:0;top:80px}.dpad .r{right:0;top:80px}
.abtn{position:absolute;right:40px;bottom:90px;width:330px;height:260px}
.abtn b{width:100px;height:100px}
.abtn .bl{left:0;bottom:0}.abtn .bh{left:115px;bottom:30px}.abtn .bs{left:230px;bottom:60px;background:rgba(255,90,90,.25)}
.abtn .bx{left:150px;top:0;width:120px;height:80px;border-radius:20px;font-size:24px;background:rgba(255,211,77,.25)}.abtn .bd{left:10px;top:40px;width:110px;height:70px;border-radius:20px;font-size:24px}

/* ===== v2 turn-based UI */
.sigh{font-family:'Dela Gothic One';font-size:12px;color:#d9b44a;letter-spacing:3px;margin:6px 0 4px}
#sel-moves{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-bottom:12px}
#sel-moves .hcard{width:310px;height:56px;padding:6px 10px 6px 50px;animation:none;text-align:left}
#sel-moves .hcard:hover{transform:none}
#sel-moves .hcard .ic{position:absolute;left:10px;top:11px;width:30px;height:30px}
#sel-moves .hcard .nm{font-size:19px;margin-top:2px}#sel-moves .hcard .ds{display:none}
#sel-moves .hcard .dmg{font-size:28px;top:8px;right:12px}
#sel-moves .hcard .cost{right:60px;bottom:8px}
.sel-text{top:10px!important}
#hand{position:absolute;left:0;right:0;bottom:0;height:178px;display:none;justify-content:center;align-items:flex-end;gap:14px;padding-bottom:12px;background:linear-gradient(180deg,rgba(5,3,10,0),rgba(5,3,10,.88) 38%);pointer-events:auto}
#hand.on{display:flex}
.hcard{position:relative;width:150px;height:158px;padding:8px 10px;cursor:pointer;color:#fff;background:linear-gradient(170deg,#241a34,#0e0a16 70%);border:2px solid var(--c);border-radius:6px;box-shadow:0 6px 0 #000,0 0 0 1px #000,inset 0 0 22px rgba(0,0,0,.6);transition:transform .12s,box-shadow .12s;animation:deal .32s both}
#hand .hcard:nth-child(2){animation-delay:.05s}#hand .hcard:nth-child(3){animation-delay:.1s}#hand .hcard:nth-child(4){animation-delay:.15s}#hand .hcard:nth-child(5){animation-delay:.2s}
.hcard::before{content:'';position:absolute;left:0;right:0;top:0;height:40px;background:linear-gradient(90deg,var(--c),transparent);opacity:.28}
.hcard:hover,.hcard.hl{transform:translateY(-16px) rotate(-1deg);box-shadow:0 10px 0 #000,0 0 26px var(--c)}
.hcard.sig{background:linear-gradient(170deg,#3a2a14,#140c08 70%)}
.hcard.k-super{background:linear-gradient(170deg,#5a3a08,#1a0e04 70%);box-shadow:0 6px 0 #000,0 0 30px rgba(255,211,77,.6);animation:deal .32s both,glowp 1s infinite alternate}
@keyframes glowp{to{box-shadow:0 6px 0 #000,0 0 46px rgba(255,211,77,.95)}}
.hcard .ic{width:34px;height:34px;position:relative}
.hcard .ic svg{width:100%;height:100%}
.hcard .nm{font-family:Bangers;font-size:20px;letter-spacing:1px;line-height:1;margin-top:3px;text-shadow:0 2px 0 #000;position:relative}
.hcard .kd{font-family:'Dela Gothic One';font-size:10px;color:var(--c);letter-spacing:2px;margin-top:2px}
.hcard .spd{font-style:normal;color:#fff;letter-spacing:0}
.hcard .dmg{position:absolute;right:10px;top:8px;font-family:Bangers;font-size:32px;font-weight:normal;color:#fff;text-shadow:0 3px 0 #000}
.hcard .ds{font-size:11px;line-height:1.25;color:#d8cce4;margin-top:5px}
.hcard .key{position:absolute;left:-8px;top:-10px;width:24px;height:24px;border-radius:50%;background:#ffd34d;color:#120a1e;font-family:Bangers;font-size:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 #000}
.hcard .cost,.hcard .gain{position:absolute;right:8px;bottom:6px;font-family:'Dela Gothic One';font-size:10px;color:#5ad0ff}
.hcard .gain{color:#7cff9a}
.hcard .mtag{position:absolute;left:50%;top:-30px;transform:translateX(-50%);font-family:Bangers;font-size:17px;letter-spacing:1px;padding:1px 10px;border-radius:3px;white-space:nowrap;box-shadow:0 2px 0 #000}
.mtag.win{background:#2fae5a}.mtag.lose{background:#b8303a}.mtag.mid{background:#5a5070}
.hcard.dis{filter:grayscale(.8) brightness(.6);cursor:not-allowed}
.hcard.frozen{filter:none;background:linear-gradient(170deg,#9fd8ff,#3a6a9a);}
.hcard .ice{position:absolute;inset:40% 0 auto;text-align:center;font-family:Bangers;font-size:26px;color:#fff;text-shadow:0 0 10px #5ad0ff,0 2px 0 #000;transform:rotate(-8deg)}
.hcard.hint{animation:deal .32s both,hintp .7s infinite alternate}
@keyframes hintp{to{transform:translateY(-14px);box-shadow:0 10px 0 #000,0 0 40px #ffd34d}}
.hcard.played{transform:translateY(-200px) scale(1.15)!important;opacity:0;transition:all .26s}
#hand.leaving .hcard:not(.played){transform:translateY(120px);opacity:0;transition:all .22s}
.hcard.shk{animation:shk .3s}
@keyframes shk{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
#tip{position:absolute;left:18px;top:80px;width:380px;display:none;background:rgba(10,6,18,.92);border:2px solid #ffd34d;border-radius:6px;padding:12px 18px 14px;font-size:16px;line-height:1.45;box-shadow:0 6px 0 #000;pointer-events:auto}
#tip.on{display:block;animation:fade .3s}
#tip b{color:#ffd34d}#tip em{font-style:normal;font-family:Bangers;font-size:19px;letter-spacing:1px}
#tip small{color:#ff9aa8}
.k-atk{color:#ff5a4a}.k-guard{color:#4ab8ff}.k-feint{color:#c08aff}.k-break{color:#ffb347}.k-focus{color:#7cff9a}.k-super{color:#ffd34d}
kbd{font-family:Bangers;background:#ffd34d;color:#120a1e;padding:0 6px;border-radius:3px}
#tip .skip{position:absolute;right:8px;bottom:-30px;font-family:Bangers;font-size:15px;background:#120a1e;color:#bdb3cc;border:1px solid #5a5070;padding:2px 10px;cursor:pointer}
#qtezone{position:absolute;inset:0;display:none}
.howcols{display:flex;gap:30px;width:1100px;margin:14px 0 20px;text-align:left}
.howcols>div:first-child{flex:1;font-size:14.5px;line-height:1.5;color:#e0d0e8}
.howcols p{margin-bottom:9px}.howcols b{color:#ffd34d}.howcols em{color:#c08aff;font-style:normal}
table.mx{border-collapse:collapse;font-family:Bangers;font-size:17px;letter-spacing:1px}
.mx th,.mx td{padding:7px 9px;text-align:center;border:1px solid rgba(255,255,255,.12)}
.mx th{font-weight:normal;font-size:16px}
.mx td.win{background:rgba(47,174,90,.45)}.mx td.lose{background:rgba(184,48,58,.45)}.mx td.mid{background:rgba(90,80,112,.4)}
.pi svg{width:96px;height:96px;filter:drop-shadow(0 0 16px rgba(255,200,80,.6))}
.ov-k.gold{color:#ffd34d;font-family:Bangers;letter-spacing:6px}
.ov-k{font-family:Bangers!important;letter-spacing:8px}
.mute svg{width:24px;height:24px}
#sel-moves .hcard .kd{display:none}