/* ============================================================
   美股七崩賢：暗盤格鬥 — UI styles
   Internal stage: 1280 x 720, scaled as one frame.
   ============================================================ */
:root{
  --bg:#06070a;
  --bg2:#0b0d13;
  --panel:#10131b;
  --panel2:#151923;
  --ink:#f3efe4;
  --muted:#9a9488;
  --dim:#6d695f;
  --gold:#d6b168;
  --gold-bright:#f7e6ad;
  --gold-deep:#8a6a2f;
  --red:#c33a24;
  --red-bright:#ff5c3c;
  --red-deep:#6f150d;
  --green:#79c24a;
  --line:rgba(214,177,104,.26);
  --line-soft:rgba(214,177,104,.13);
  --serif:"Noto Serif TC","Songti TC","STSong","SimSun","PMingLiU",Georgia,"Times New Roman",serif;
  --sans:"Noto Sans TC","Microsoft JhengHei","PingFang TC","Heiti TC",system-ui,-apple-system,sans-serif;
  --mono:"Cascadia Mono","Consolas","SFMono-Regular","Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;background:#000;overflow:hidden;}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;user-select:none;}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;}
canvas{display:block;}
kbd{font-family:var(--mono);font-size:.82em;line-height:1;border:1px solid rgba(255,255,255,.28);border-bottom-color:rgba(255,255,255,.45);border-radius:3px;padding:4px 6px 3px;background:rgba(255,255,255,.07);box-shadow:0 1px 0 rgba(255,255,255,.12) inset;color:#fff;display:inline-flex;align-items:center;justify-content:center;min-width:24px;}
::selection{background:var(--red);color:white;}

#app{position:fixed;inset:0;background:#000;overflow:hidden;}
#frame{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;background:var(--bg);overflow:hidden;}
#game{position:absolute;inset:0;width:1280px;height:720px;background:#05060a;}
#ui{position:absolute;inset:0;pointer-events:none;}
#ui section,#ui .screen{pointer-events:none;}

.screen{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s ease;overflow:hidden;background:var(--bg);}
.screen.active{opacity:1;visibility:visible;}
#ui section.active,#ui .screen.active{pointer-events:auto;}
#screen-fight{background:transparent;}
#screen-fight.active{pointer-events:none;}
.hidden{display:none!important;}

.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.32em;color:var(--gold);text-transform:uppercase;display:flex;align-items:center;gap:14px;}
.kicker::before{content:"";width:28px;height:1px;background:var(--gold);opacity:.7;}
.kicker.center{justify-content:center;}
.kicker.center::after{content:"";width:28px;height:1px;background:var(--gold);opacity:.7;}

/* ---------- generic buttons ---------- */
.solid-btn,.ghost-btn{font-family:var(--sans);font-size:14px;letter-spacing:.14em;padding:13px 26px;border:1px solid var(--gold);color:var(--gold-bright);background:linear-gradient(180deg,rgba(214,177,104,.16),rgba(214,177,104,.04));position:relative;transition:.2s;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);}
.solid-btn{background:linear-gradient(180deg,#e7cd8d,#b98f45);color:#1a1305;font-weight:700;border-color:#f4e3b0;text-shadow:0 1px 0 rgba(255,255,255,.35);}
.solid-btn:hover,.ghost-btn:hover{filter:brightness(1.16);transform:translateY(-1px);box-shadow:0 8px 26px rgba(214,177,104,.18);}
.solid-btn:active,.ghost-btn:active{transform:translateY(0);}
.ghost-btn{background:rgba(8,9,13,.55);}
.back-btn{position:absolute;left:46px;top:38px;z-index:6;}

/* ============================================================
   LOADING
   ============================================================ */
#screen-loading{background:radial-gradient(ellipse at 50% 45%,#121015 0%,#06070a 62%);}
.loading-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:520px;}
.loading-logo{font-family:var(--serif);font-weight:900;font-size:64px;letter-spacing:.1em;color:var(--gold-bright);text-shadow:0 0 42px rgba(214,177,104,.2);margin:22px 0 34px;background:linear-gradient(180deg,#fff6d8,#d6b168 55%,#8a6a2f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.loading-bar{height:2px;background:rgba(255,255,255,.09);position:relative;overflow:hidden;}
.loading-fill{position:absolute;inset:0;width:0%;background:linear-gradient(90deg,var(--red),var(--gold));box-shadow:0 0 12px rgba(214,177,104,.6);transition:width .2s;}
.loading-hint{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--dim);}

/* ============================================================
   TITLE
   ============================================================ */
#screen-title{background:#05060a;}
.title-bg{position:absolute;inset:0;background:url("../assets/roster.jpg") center center/cover no-repeat;filter:saturate(1.12) contrast(1.04) brightness(1);transform:scale(1.02);animation:slowPan 26s ease-in-out infinite alternate;}
@keyframes slowPan{from{transform:scale(1.02) translate3d(0,0,0);}to{transform:scale(1.075) translate3d(-14px,-6px,0);}}
.title-veil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(3,4,7,.975) 0%,rgba(3,4,7,.93) 26%,rgba(3,4,7,.64) 48%,rgba(3,4,7,.18) 74%,rgba(3,4,7,.5) 100%),
  linear-gradient(0deg,rgba(3,4,7,.92) 0%,rgba(3,4,7,.2) 26%,transparent 55%,rgba(3,4,7,.55) 100%),
  radial-gradient(ellipse at 70% 40%,transparent 20%,rgba(2,3,5,.45) 100%);}
.title-grain{position:absolute;inset:0;opacity:.24;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);mix-blend-mode:overlay;pointer-events:none;}
.title-inner{position:absolute;left:92px;top:98px;width:620px;}
.title-kicker{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.4em;color:var(--gold);margin-bottom:26px;}
.title-kicker span{width:34px;height:1px;background:var(--gold);opacity:.6;}
.title-main{font-family:var(--serif);font-weight:900;font-size:124px;line-height:.9;letter-spacing:.03em;color:#f4e9cd;text-shadow:0 10px 40px rgba(0,0,0,.7);}
.title-main em{font-style:normal;background:linear-gradient(180deg,#fff8dd 0%,#f0d69a 34%,#d6b168 58%,#9b7432 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 24px rgba(214,177,104,.22));}
.title-subline{display:flex;align-items:center;gap:18px;margin:26px 0 20px;width:440px;}
.title-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--gold),transparent);}
.title-subline .title-rule:last-child{background:linear-gradient(90deg,transparent,var(--gold));}
.title-mode{font-family:var(--serif);font-size:22px;letter-spacing:.5em;color:var(--gold-bright);padding-left:.5em;text-shadow:0 0 22px rgba(214,177,104,.3);}
.title-tagline{font-family:var(--serif);font-size:21px;line-height:1.85;letter-spacing:.18em;color:#c9c2b2;margin-bottom:46px;}
.press-start{display:inline-flex;align-items:center;gap:12px;font-size:15px;letter-spacing:.22em;color:#efe7d4;border-left:2px solid var(--red);padding:8px 0 8px 16px;animation:blinkSoft 2.2s ease-in-out infinite;}
.press-start kbd{font-size:12px;letter-spacing:.08em;border-color:rgba(214,177,104,.5);background:rgba(214,177,104,.1);color:var(--gold-bright);}
@keyframes blinkSoft{0%,100%{opacity:1;}50%{opacity:.38;}}
.title-foot{position:absolute;left:94px;bottom:58px;font-family:var(--mono);font-size:9px;letter-spacing:.34em;color:rgba(255,255,255,.3);}
.title-seal{position:absolute;right:92px;bottom:150px;writing-mode:vertical-rl;font-family:var(--serif);font-size:26px;font-weight:900;letter-spacing:.28em;color:#e6c6a0;border:3px solid #8f2a1a;padding:16px 8px;background:rgba(80,12,8,.55);box-shadow:0 0 0 1px rgba(230,198,160,.25) inset,0 12px 40px rgba(0,0,0,.6);transform:rotate(3deg);opacity:.92;}
.ticker-bar{position:absolute;left:0;right:0;bottom:0;height:38px;background:rgba(3,4,7,.86);border-top:1px solid rgba(195,58,36,.5);overflow:hidden;display:flex;align-items:center;}
.ticker-track{display:flex;white-space:nowrap;gap:46px;padding-left:20px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#cf5a43;animation:marquee 46s linear infinite;}
.ticker-track span:nth-child(3n){color:#8b9a6a;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============================================================
   MAIN MENU
   ============================================================ */
#screen-menu{background:#07080c;}
.menu-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse at 18% 0%,rgba(120,26,16,.22),transparent 52%),
  radial-gradient(ellipse at 82% 100%,rgba(214,177,104,.1),transparent 48%),
  repeating-linear-gradient(90deg,transparent 0 126px,rgba(255,255,255,.018) 126px 127px),
  repeating-linear-gradient(0deg,transparent 0 90px,rgba(255,255,255,.014) 90px 91px),
  linear-gradient(160deg,#0b0c11,#06070a 62%);}
.menu-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.6) 100%);}
.menu-veil{position:absolute;right:-80px;top:-10px;width:760px;height:740px;background:url("../assets/roster.jpg") center/cover no-repeat;opacity:.11;filter:grayscale(.4) blur(2px);mask-image:radial-gradient(ellipse at 55% 45%,#000 0%,transparent 70%);}
.menu-wrap{position:absolute;inset:0;padding:64px 88px 86px;display:grid;grid-template-columns:minmax(0,1fr) 390px;grid-template-rows:auto 1fr;gap:18px 54px;}
.menu-head{grid-column:1;grid-row:1;}
.menu-list{grid-column:1;grid-row:2;align-self:start;}
.menu-board{grid-column:2;grid-row:1 / span 2;align-self:start;margin-top:6px;}
.menu-head .kicker{margin-bottom:18px;}
.menu-head h2{font-family:var(--serif);font-size:54px;letter-spacing:.1em;font-weight:900;background:linear-gradient(180deg,#fff7e2,#cdb27a 70%,#9f7c3f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px;}
.menu-head p{color:var(--muted);font-size:14px;letter-spacing:.1em;line-height:1.8;margin-bottom:26px;}
.menu-list{display:flex;flex-direction:column;gap:4px;}
.menu-item{display:grid;grid-template-columns:52px 1fr 30px;align-items:center;text-align:left;padding:11px 18px;border:1px solid transparent;border-left:1px solid rgba(214,177,104,.14);background:linear-gradient(90deg,rgba(255,255,255,.025),transparent);transition:.22s;position:relative;}
.menu-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);transform:scaleY(0);transition:.22s;transform-origin:top;}
.menu-item:hover,.menu-item.focus{background:linear-gradient(90deg,rgba(214,177,104,.13),rgba(214,177,104,.02) 60%,transparent);border-color:rgba(214,177,104,.2);transform:translateX(8px);}
.menu-item:hover::before,.menu-item.focus::before{transform:scaleY(1);}
.mi-idx{font-family:var(--mono);font-size:11px;color:var(--gold);opacity:.7;letter-spacing:.1em;}
.mi-body b{display:block;font-family:var(--serif);font-size:22px;letter-spacing:.14em;font-weight:700;color:#efe9db;}
.mi-body small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--dim);margin-top:4px;}
.mi-arrow{font-size:18px;color:var(--gold);opacity:0;transform:translateX(-8px);transition:.22s;}
.menu-item:hover .mi-arrow,.menu-item.focus .mi-arrow{opacity:1;transform:none;}
.menu-board{border:1px solid rgba(214,177,104,.16);background:linear-gradient(180deg,rgba(15,17,23,.82),rgba(7,8,12,.9));padding:20px 20px 14px;align-self:start;position:relative;}
.menu-board::before{content:"";position:absolute;left:-1px;top:-1px;width:22px;height:22px;border-left:2px solid var(--gold);border-top:2px solid var(--gold);}
.menu-board::after{content:"";position:absolute;right:-1px;bottom:-1px;width:22px;height:22px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);}
.board-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--gold);border-bottom:1px solid rgba(214,177,104,.18);padding-bottom:12px;}
.board-live{color:var(--red-bright);animation:blinkSoft 1.8s infinite;}
.board-list{list-style:none;margin-top:6px;}
.board-row{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid rgba(255,255,255,.045);font-size:13px;}
.board-row canvas{width:28px;height:34px;object-fit:cover;border:1px solid rgba(214,177,104,.22);background:#0a0b0f;}
.board-row .bname{flex:1;letter-spacing:.08em;color:#cfc8b8;font-size:12px;}
.board-row .btick{font-family:var(--mono);font-size:10px;color:var(--dim);}
.board-row .bpct{font-family:var(--mono);font-size:11px;color:var(--red-bright);letter-spacing:.04em;}
.board-row .bpct.up{color:var(--green);}
.board-foot{font-size:9px;letter-spacing:.14em;color:#55514a;margin-top:14px;line-height:1.8;font-family:var(--mono);}
.menu-hint{position:absolute;left:88px;bottom:10px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:#5f5a51;}

/* ============================================================
   SELECT
   ============================================================ */
#screen-select{background:
  radial-gradient(ellipse at 50% -10%,rgba(120,26,16,.28),transparent 55%),
  radial-gradient(ellipse at 90% 100%,rgba(214,177,104,.08),transparent 45%),
  linear-gradient(180deg,#0b0c11,#06070a);}
.select-bg{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0 154px,rgba(255,255,255,.02) 154px 155px);opacity:.8;}
.select-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.55) 100%);}
.select-head{position:absolute;left:46px;right:46px;top:30px;height:74px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(214,177,104,.16);z-index:3;}
.select-head .ghost-btn{position:static;padding:10px 18px;font-size:12px;}
.select-titles{text-align:center;flex:1;}
.select-titles .kicker{justify-content:center;margin-bottom:6px;font-size:9px;}
.select-titles h2{font-family:var(--serif);font-size:25px;letter-spacing:.24em;color:#f1e8d5;font-weight:700;}
.difficulty{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--dim);}
.diff-label{font-family:var(--mono);letter-spacing:.16em;margin-right:6px;}
.difficulty button{font-size:11px;letter-spacing:.12em;padding:7px 12px;border:1px solid rgba(255,255,255,.12);color:#a7a193;transition:.18s;}
.difficulty button.on{border-color:var(--gold);color:#171105;background:linear-gradient(180deg,#e8cf90,#b98f45);font-weight:700;}
.difficulty button:hover{border-color:var(--gold);color:var(--gold-bright);}
.difficulty button.on:hover{color:#171105;}
.select-body{position:absolute;left:46px;right:46px;top:120px;bottom:92px;display:grid;grid-template-columns:1fr 350px;gap:28px;z-index:2;}
.roster{display:flex;align-items:center;justify-content:center;gap:9px;min-width:0;}
.roster-card{position:relative;flex:1 1 0;max-width:116px;aspect-ratio:155/460;min-width:70px;border:1px solid rgba(214,177,104,.16);background:#0a0b0f;overflow:hidden;padding:0;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s;filter:saturate(.82) brightness(.78);}
.roster-card canvas{width:100%;height:100%;display:block;transition:filter .2s;}
.roster-card .rc-veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,4,7,.82) 0%,transparent 24%,transparent 76%,rgba(3,4,7,.5) 100%);}
.roster-card .rc-tag{position:absolute;left:6px;bottom:7px;right:6px;font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:#e9dfc7;text-shadow:0 1px 4px #000;display:flex;justify-content:space-between;}
.roster-card .rc-mark{position:absolute;top:6px;left:6px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;padding:2px 5px;background:rgba(0,0,0,.62);border:1px solid currentColor;opacity:0;}
.roster-card:hover,.roster-card.focus{transform:translateY(-10px);filter:saturate(1.05) brightness(1);border-color:rgba(214,177,104,.65);box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 0 1px rgba(214,177,104,.2) inset;}
.roster-card.selected{border-color:var(--gold-bright);filter:saturate(1.12) brightness(1.02);box-shadow:0 0 0 1px var(--gold-bright),0 20px 50px rgba(0,0,0,.6);transform:translateY(-10px);}
.roster-card.selected .rc-mark,.roster-card.marked .rc-mark{opacity:1;}
.roster-card.marked{outline:2px solid var(--p2color,#2b6cff);outline-offset:-2px;}
.roster-card .rc-mark.p1{color:#ff6b52;background:rgba(80,12,8,.8);}
.roster-card .rc-mark.p2{color:#7fa4ff;background:rgba(8,26,72,.8);}
.roster-card.dim{opacity:.38;filter:grayscale(.5) brightness(.55);}
.char-panel{display:flex;flex-direction:column;border:1px solid var(--line);background:linear-gradient(180deg,rgba(14,16,22,.9),rgba(7,8,12,.94));position:relative;min-height:0;}
.char-panel::before{content:"";position:absolute;left:-1px;top:-1px;width:26px;height:26px;border-left:2px solid var(--gold);border-top:2px solid var(--gold);z-index:2;}
.char-art-wrap{position:relative;height:288px;overflow:hidden;flex:none;}
#selectArt{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05) brightness(.92);}
.char-art-veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,7,10,.98) 0%,rgba(6,7,10,.3) 36%,transparent 64%),linear-gradient(90deg,rgba(6,7,10,.3),transparent 30%,transparent 70%,rgba(6,7,10,.3));}
.char-meta{position:absolute;left:18px;right:18px;bottom:12px;}
.char-title{font-family:var(--serif);font-size:12px;letter-spacing:.16em;color:var(--gold);margin-bottom:2px;}
.char-name{font-family:var(--serif);font-weight:900;font-size:31px;letter-spacing:.04em;line-height:1;color:#fff7e5;text-shadow:0 2px 18px rgba(0,0,0,.7);}
.char-arch{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:#b9b1a0;margin-top:6px;}
.char-mark{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;padding:4px 7px;border:1px solid var(--gold);color:var(--gold-bright);background:rgba(0,0,0,.5);}
.char-info{padding:12px 16px 14px;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;}
.stat{display:flex;align-items:center;gap:7px;}
.stat span{font-size:9px;letter-spacing:.1em;color:var(--dim);width:26px;flex:none;}
.stat i{flex:1;height:4px;background:rgba(255,255,255,.07);position:relative;overflow:hidden;}
.stat i b{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));width:0;transition:width .35s;}
.stat:nth-child(2) i b{background:linear-gradient(90deg,#7d2b1d,#e0644a);}
.stat:nth-child(3) i b{background:linear-gradient(90deg,#27524f,#63bfae);}
.stat:nth-child(4) i b{background:linear-gradient(90deg,#3b3a6b,#8e8dd6);}
.moves{display:flex;flex-direction:column;gap:3px;border-top:1px solid rgba(255,255,255,.06);padding-top:9px;}
.move-row{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.03em;color:#c9c2b3;line-height:1.3;}
.move-row kbd{font-size:8px;padding:2px 4px;min-width:18px;border-color:rgba(214,177,104,.32);background:rgba(214,177,104,.07);color:var(--gold-bright);flex:none;}
.move-row .mv-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.move-row .mv-en{font-family:var(--mono);font-size:7px;letter-spacing:.08em;color:#66625a;white-space:nowrap;}
.move-row.super .mv-name{color:var(--gold-bright);}
.move-row.super kbd{border-color:var(--red);background:rgba(195,58,36,.13);color:#ff9b84;}
.move-row.passive .mv-name{color:#7fa4a0;}
.char-desc{font-size:10px;line-height:1.7;color:#8b857a;letter-spacing:.03em;min-height:34px;}
.select-foot{position:absolute;left:46px;right:46px;bottom:24px;height:46px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.06);z-index:3;}
.select-hint{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:#625d54;}
.select-actions{display:flex;gap:10px;}
.select-actions button{padding:9px 18px;font-size:11px;}

/* ============================================================
   VS
   ============================================================ */
#screen-vs{background:#040507;}
.vs-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 42%,rgba(160,40,24,.22),transparent 50%),
  repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.022) 3px 4px),
  radial-gradient(ellipse at center,#0e0a0b,#040507 72%);}
.vs-half{position:absolute;top:0;bottom:0;width:47%;overflow:hidden;}
.vs-left{left:0;clip-path:polygon(0 0,100% 0,calc(100% - 120px) 100%,0 100%);}
.vs-right{right:0;clip-path:polygon(120px 0,100% 0,100% 100%,0 100%);}
.vs-art{position:absolute;top:0;height:100%;width:100%;object-fit:cover;filter:saturate(1.15) contrast(1.08) brightness(.86);}
.vs-left .vs-art{object-position:center top;}
.vs-right .vs-art{object-position:center top;}
.vs-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,4,7,.98) 0%,rgba(3,4,7,.35) 42%,rgba(3,4,7,.15) 100%);}
.vs-right .vs-shade{background:linear-gradient(0deg,rgba(3,4,7,.98) 0%,rgba(3,4,7,.35) 42%,rgba(3,4,7,.15) 100%);}
.vs-caption{position:absolute;bottom:104px;z-index:3;}
.vs-left .vs-caption{left:80px;text-align:left;}
.vs-right .vs-caption{right:80px;text-align:right;}
.vs-player{font-family:var(--mono);font-size:10px;letter-spacing:.32em;color:var(--gold);margin-bottom:10px;}
.vs-name{font-family:var(--serif);font-weight:900;font-size:72px;line-height:.9;letter-spacing:.02em;color:#fbf3df;text-shadow:0 6px 40px rgba(0,0,0,.7);}
.vs-title{font-family:var(--serif);font-size:16px;letter-spacing:.2em;color:#c8b98f;margin-top:12px;}
.vs-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:5;}
.vs-mark{font-family:var(--serif);font-weight:900;font-size:128px;font-style:italic;letter-spacing:-.02em;color:var(--gold-bright);text-shadow:0 0 60px rgba(195,58,36,.7),0 8px 0 rgba(80,12,8,.6);transform:skewX(-6deg);position:relative;}
.vs-mark::after{content:"VS";position:absolute;left:3px;top:3px;color:rgba(195,58,36,.4);z-index:-1;}
.vs-stage{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:#9a8f78;margin-top:8px;background:rgba(3,4,7,.6);padding:5px 10px;border:1px solid rgba(214,177,104,.2);display:inline-block;}
.vs-skip{position:absolute;right:48px;bottom:34px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:#6d685e;z-index:6;}
#screen-vs.active .vs-left{animation:vsInL .6s cubic-bezier(.16,.84,.24,1) both;}
#screen-vs.active .vs-right{animation:vsInR .6s cubic-bezier(.16,.84,.24,1) both;}
#screen-vs.active .vs-caption{animation:capIn .7s .18s cubic-bezier(.16,.84,.24,1) both;}
#screen-vs.active .vs-mark{animation:vsPulse 2.6s .1s ease-in-out infinite;}
@keyframes vsInL{from{transform:translateX(-100%);}to{transform:none;}}
@keyframes vsInR{from{transform:translateX(100%);}to{transform:none;}}
@keyframes capIn{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
@keyframes vsPulse{0%,100%{transform:skewX(-6deg) scale(1);}50%{transform:skewX(-6deg) scale(1.04);}}

/* ============================================================
   FIGHT HUD
   ============================================================ */
.hud{position:absolute;left:0;right:0;top:0;padding:22px 34px 0;display:grid;grid-template-columns:1fr 156px 1fr;align-items:start;gap:12px;}
.hud-player{display:flex;align-items:flex-start;gap:10px;min-width:0;}
.hud-player.p2{justify-content:flex-end;}
.portrait-box{width:92px;height:92px;position:relative;flex:none;border:1px solid rgba(214,177,104,.6);background:#0a0b0e;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);}
.portrait-box canvas{width:100%;height:100%;display:block;filter:saturate(1.05) contrast(1.06);}
.portrait-ring{position:absolute;inset:-4px;border:1px solid var(--accent,var(--gold));opacity:.35;pointer-events:none;}
.hud-player.p2 .portrait-box{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));}
.hud-data{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;padding-top:2px;}
.hud-player.p2 .hud-data{align-items:flex-end;}
.hud-name-row{display:flex;align-items:baseline;gap:9px;line-height:1;white-space:nowrap;overflow:hidden;}
.hud-name{font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:.08em;color:#faf2df;text-shadow:0 2px 10px rgba(0,0,0,.8);}
.hud-title{font-family:var(--serif);font-size:9px;letter-spacing:.12em;color:var(--gold);opacity:.85;overflow:hidden;text-overflow:ellipsis;}
.hud-player.p2 .hud-name-row{flex-direction:row-reverse;}
.hp-shell{position:relative;width:100%;height:23px;background:linear-gradient(180deg,#171310,#0a0908);border:1px solid rgba(214,177,104,.35);overflow:hidden;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);}
.hud-player.p2 .hp-shell{clip-path:polygon(0 0,100% 0,100% 100%,12px 100%);}
.hp-chip{position:absolute;left:0;top:0;bottom:0;width:100%;background:rgba(238,226,198,.55);transition:width .55s cubic-bezier(.2,.7,.2,1) .15s;}
.hp-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(180deg,#f0c96e 0%,#d29331 42%,#b34322 100%);box-shadow:0 0 16px rgba(214,120,40,.35) inset;transition:width .14s linear;}
.hp-fill.low{background:linear-gradient(180deg,#ff8b5d,#d43318 50%,#7d0f05);animation:lowPulse 1s infinite;}
.hp-shine{position:absolute;left:0;right:0;top:0;height:43%;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);pointer-events:none;}
.hud-player.p2 .hp-chip,.hud-player.p2 .hp-fill{left:auto;right:0;}
.hud-player.p2 .hp-fill.low{animation:lowPulse 1s infinite;}
@keyframes lowPulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.35);}}
.meter-row{display:flex;align-items:center;gap:6px;width:100%;}
.hud-player.p2 .meter-row{flex-direction:row-reverse;}
.meter-shell{position:relative;flex:1;height:8px;background:rgba(0,0,0,.6);border:1px solid rgba(214,177,104,.24);overflow:hidden;}
.meter-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,#4d3f8f,#8b6fd6 50%,#d3b8ff);transition:width .12s linear;box-shadow:0 0 10px rgba(160,120,255,.5);}
.hud-player.p2 .meter-fill{left:auto;right:0;background:linear-gradient(270deg,#4d3f8f,#8b6fd6 50%,#d3b8ff);}
.meter-shell.max .meter-fill{background:linear-gradient(90deg,#8f2a1a,#e05832 50%,#ffc27a);box-shadow:0 0 16px rgba(255,120,60,.75);animation:meterMax .7s infinite alternate;}
.hud-player.p2 .meter-shell.max .meter-fill{background:linear-gradient(270deg,#8f2a1a,#e05832 50%,#ffc27a);}
@keyframes meterMax{from{filter:brightness(1);}to{filter:brightness(1.5);}}
.meter-ticks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),rgba(0,0,0,.5) calc(20% - 1px) 20%);pointer-events:none;}
.meter-label{font-family:var(--mono);font-size:7px;letter-spacing:.14em;color:#77716a;flex:none;}
.meter-shell.max + .meter-label,.hud-player.p2 .meter-row .meter-shell.max + .meter-label{color:var(--gold-bright);}
.round-pips{display:flex;flex-direction:column;gap:5px;padding-top:4px;flex:none;}
.hud-player.p2 .round-pips{align-items:flex-end;}
.round-pips i{width:10px;height:10px;transform:rotate(45deg);border:1px solid rgba(214,177,104,.4);background:rgba(0,0,0,.3);display:block;transition:.25s;}
.round-pips i.win{background:linear-gradient(135deg,#f1d99b,#b98f45);border-color:#f1d99b;box-shadow:0 0 12px rgba(214,177,104,.55);}
.hud-center{text-align:center;padding-top:4px;}
.timer{font-family:var(--serif);font-weight:900;font-size:48px;line-height:1;color:#f7edda;text-shadow:0 3px 18px rgba(0,0,0,.9);letter-spacing:.06em;font-variant-numeric:tabular-nums;}
.timer.urgent{color:#ff7e5f;animation:lowPulse .6s infinite;}
.round-label{font-family:var(--mono);font-size:8px;letter-spacing:.24em;color:var(--gold);margin-top:5px;text-shadow:0 1px 6px #000;}
.combo{position:absolute;top:190px;text-align:center;opacity:0;transform:translateY(14px) scale(.92);transition:opacity .16s,transform .16s;pointer-events:none;}
.combo.show{opacity:1;transform:none;}
.combo1{left:120px;}
.combo2{right:120px;}
.combo b{display:block;font-family:var(--serif);font-weight:900;font-size:54px;line-height:1;color:#ffe7ae;text-shadow:0 0 24px rgba(195,58,36,.7),0 4px 0 #6f150d;font-variant-numeric:tabular-nums;}
.combo span{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:#d8c9a8;}
.announce{position:absolute;left:0;right:0;top:41%;text-align:center;font-family:var(--serif);font-weight:900;font-size:88px;letter-spacing:.14em;color:#fdf2d6;opacity:0;transform:scale(1.12);text-shadow:0 0 40px rgba(195,58,36,.55),0 8px 0 rgba(80,12,8,.75),0 16px 60px #000;pointer-events:none;white-space:nowrap;}
.announce.show{animation:annPop 1.1s cubic-bezier(.16,.84,.24,1) both;}
.announce.ko{font-size:108px;letter-spacing:.08em;color:#ffd9c9;text-shadow:0 0 70px rgba(255,60,20,.8),0 10px 0 #6f150d,0 20px 80px #000;}
.announce.small{font-size:48px;letter-spacing:.3em;}
@keyframes annPop{0%{opacity:0;transform:scale(1.6);filter:blur(6px);}18%{opacity:1;transform:scale(.96);filter:blur(0);}24%{transform:scale(1);}78%{opacity:1;}100%{opacity:0;transform:scale(1.03);}}
.super-banner{position:absolute;left:0;right:0;top:31%;text-align:center;opacity:0;pointer-events:none;transform:skewX(-8deg);}
.super-banner.show{animation:sbIn 1.7s cubic-bezier(.16,.84,.24,1) both;}
.super-banner .sb-name{display:block;font-family:var(--serif);font-weight:900;font-size:52px;letter-spacing:.16em;color:#fff3d4;background:linear-gradient(90deg,transparent,rgba(195,58,36,.92) 18%,rgba(111,21,13,.95) 50%,rgba(195,58,36,.92) 82%,transparent);padding:12px 0;text-shadow:0 4px 0 #400a05,0 0 40px rgba(255,140,80,.6);}
.super-banner .sb-en{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.5em;color:var(--gold-bright);}
@keyframes sbIn{0%{opacity:0;transform:skewX(-8deg) translateX(-60px);}10%{opacity:1;transform:skewX(-8deg) translateX(0);}80%{opacity:1;}100%{opacity:0;transform:skewX(-8deg) translateX(40px);}}
.fight-hint{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:9px;letter-spacing:.06em;color:#a39b8c;transition:opacity .8s;text-shadow:0 1px 4px #000;}
.fight-hint.hide{opacity:0;}
.fight-hint span{display:flex;align-items:center;gap:4px;}
.fight-hint kbd{font-size:8px;padding:2px 4px;min-width:16px;border-color:rgba(255,255,255,.2);}
.pause-overlay{position:absolute;inset:0;background:rgba(3,4,7,.82);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;pointer-events:auto;z-index:20;}
.pause-card{width:660px;border:1px solid rgba(214,177,104,.3);background:linear-gradient(180deg,rgba(16,18,25,.98),rgba(7,8,12,.98));padding:30px 34px;position:relative;box-shadow:0 30px 100px rgba(0,0,0,.8);}
.pause-card::before,.pause-card::after{content:"";position:absolute;width:24px;height:24px;border-color:var(--gold);}
.pause-card::before{left:-1px;top:-1px;border-left:2px solid;border-top:2px solid;}
.pause-card::after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid;}
.pause-card .kicker{justify-content:center;}
.pause-card h2{font-family:var(--serif);text-align:center;font-size:38px;letter-spacing:.3em;color:var(--gold-bright);margin:6px 0 16px;}
.pause-stats{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#8e887c;margin-bottom:14px;}
.pause-moves{border:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.22);padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin-bottom:16px;max-height:224px;overflow:auto;}
.pause-moves .pm-col{display:flex;flex-direction:column;gap:5px;min-width:0;}
.pause-moves .pm-col + .pm-col{border-left:1px solid rgba(255,255,255,.07);padding-left:22px;}
.pause-moves .pm-head{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--gold);margin-bottom:4px;padding-bottom:6px;border-bottom:1px solid rgba(214,177,104,.14);}
.pause-moves .move-row{font-size:10px;gap:6px;}
.pause-moves .move-row .mv-en{font-size:7px;}
.pause-actions{display:flex;gap:10px;justify-content:center;}
.pause-actions button{padding:11px 20px;font-size:12px;}
.pause-toggles{display:flex;gap:16px;justify-content:center;margin-top:16px;font-size:10px;color:#8c867a;}
.pause-toggles label{display:flex;align-items:center;gap:6px;cursor:pointer;}
.pause-toggles input{accent-color:#c33a24;}

/* ============================================================
   RESULTS
   ============================================================ */
#screen-results{background:#05060a;}
.result-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse at 30% 45%,rgba(120,24,14,.26),transparent 55%),
  repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.02) 3px 4px),
  linear-gradient(120deg,#0b0c11,#05060a 65%);}
.result-portrait{position:absolute;left:0;top:0;bottom:0;width:46%;overflow:hidden;clip-path:polygon(0 0,100% 0,84% 100%,0 100%);}
#resultArt{width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.06) brightness(.9);}
.result-veil{position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,rgba(5,6,10,.92) 100%),linear-gradient(0deg,rgba(5,6,10,.95),transparent 40%);}
.result-main{position:absolute;left:52%;right:80px;top:50%;transform:translateY(-50%);}
.result-main .kicker{margin-bottom:18px;}
.result-main h2{font-family:var(--serif);font-weight:900;font-size:74px;line-height:1;color:#fdf2d6;text-shadow:0 6px 40px rgba(0,0,0,.8);margin-bottom:8px;}
.result-main h2 em{font-style:normal;color:var(--gold-bright);}
.result-sub{font-family:var(--serif);font-size:16px;letter-spacing:.18em;color:var(--gold);margin-bottom:22px;}
.result-main blockquote{font-family:var(--serif);font-size:17px;line-height:1.9;letter-spacing:.08em;color:#cbc3b2;border-left:2px solid var(--red);padding-left:16px;margin-bottom:24px;max-width:520px;}
.result-stats{display:flex;gap:28px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:12px 0;margin-bottom:24px;}
.rstat b{display:block;font-family:var(--serif);font-size:24px;color:#f0e5cc;font-variant-numeric:tabular-nums;}
.rstat span{font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:#6f6a61;}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* ============================================================
   ENDING
   ============================================================ */
#screen-ending{background:#040507;}
.ending-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 30%,rgba(150,36,22,.16),transparent 55%),
  radial-gradient(ellipse at 50% 110%,rgba(214,177,104,.12),transparent 50%),
  repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.02) 3px 4px),
  #06070a;}
.ending-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:760px;padding:48px 58px;border:1px solid rgba(214,177,104,.24);background:linear-gradient(180deg,rgba(14,16,22,.95),rgba(7,8,11,.97));text-align:center;}
.ending-card::before,.ending-card::after{content:"";position:absolute;width:30px;height:30px;border-color:var(--gold);}
.ending-card::before{left:-1px;top:-1px;border-left:2px solid;border-top:2px solid;}
.ending-card::after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid;}
.ending-card .kicker{justify-content:center;}
.ending-card h2{font-family:var(--serif);font-weight:900;font-size:46px;letter-spacing:.1em;color:var(--gold-bright);margin:16px 0 6px;}
.ending-rule{width:90px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:14px auto 22px;}
.ending-text{font-family:var(--serif);font-size:16px;line-height:2.1;letter-spacing:.07em;color:#cfc7b6;text-align:justify;margin-bottom:22px;}
.ending-ticker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--green);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:10px 0;margin-bottom:26px;}
.ending-seal{position:absolute;right:44px;top:42px;writing-mode:vertical-rl;font-family:var(--serif);font-size:18px;font-weight:900;letter-spacing:.24em;color:#e6c6a0;border:2px solid #8f2a1a;padding:10px 5px;background:rgba(80,12,8,.4);transform:rotate(3deg);}

/* ============================================================
   HELP & SETTINGS
   ============================================================ */
#screen-help,#screen-settings{background:
  radial-gradient(ellipse at 20% 0%,rgba(120,26,16,.16),transparent 55%),
  linear-gradient(160deg,#0a0b10,#06070a);}
.page-bg{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 126px,rgba(255,255,255,.018) 126px 127px);pointer-events:none;}
.page-wrap{position:absolute;left:80px;right:80px;top:92px;bottom:38px;overflow:auto;}
.page-wrap.narrow{left:180px;right:180px;top:112px;}
.page-wrap::-webkit-scrollbar,.roster::-webkit-scrollbar{width:6px;height:6px;}
.page-wrap::-webkit-scrollbar-thumb{background:rgba(214,177,104,.25);}
.page-wrap .kicker{margin-bottom:14px;}
.page-wrap h2{font-family:var(--serif);font-size:42px;letter-spacing:.14em;color:#f2e8d3;margin-bottom:22px;}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.help-card{border:1px solid rgba(214,177,104,.16);background:linear-gradient(180deg,rgba(16,18,25,.86),rgba(8,9,13,.9));padding:16px 20px;}
.help-card.wide{grid-column:1/-1;}
.help-card h3{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--gold);border-bottom:1px solid rgba(214,177,104,.16);padding-bottom:8px;margin-bottom:8px;}
.key-row{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:11px;color:#b6ae9f;}
.key-row span{margin-left:8px;letter-spacing:.06em;}
.key-row kbd{min-width:26px;font-size:10px;padding:5px 7px;}
.help-card p{font-size:12px;line-height:1.75;color:#b3ab9c;letter-spacing:.03em;margin-bottom:6px;}
.help-note{font-size:10px!important;color:#7d776c!important;border-left:2px solid rgba(195,58,36,.6);padding-left:12px;margin-top:8px!important;}
.settings-list{border-top:1px solid rgba(255,255,255,.08);}
.setting-row{display:grid;grid-template-columns:1fr 260px 54px;align-items:center;gap:24px;padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.07);}
.setting-row b{display:block;font-family:var(--serif);font-size:17px;letter-spacing:.1em;color:#e8dfcc;font-weight:600;}
.setting-row small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#6d685e;margin-top:5px;}
.setting-val{font-family:var(--mono);font-size:12px;color:var(--gold);text-align:right;}
.setting-row input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:rgba(255,255,255,.14);outline:none;}
.setting-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;transform:rotate(45deg);background:var(--gold);border:1px solid #f7e6ad;cursor:pointer;box-shadow:0 0 14px rgba(214,177,104,.5);}
.toggle{font-family:var(--mono);font-size:10px;letter-spacing:.14em;padding:8px 16px;border:1px solid rgba(255,255,255,.18);color:#8e887c;background:rgba(0,0,0,.25);justify-self:start;}
.toggle.on{border-color:var(--gold);color:var(--gold-bright);background:rgba(214,177,104,.1);}
.settings-note{margin-top:16px;font-size:10px;line-height:1.8;color:#5f5a51;letter-spacing:.06em;}

/* focus visibility */
button:focus-visible{outline:1px solid var(--gold-bright);outline-offset:3px;}

/* ============================================================
   MOBILE / DESKTOP MODES
   ============================================================ */
body{overscroll-behavior:none;}
.title-mode-btn{position:absolute;right:44px;top:32px;z-index:7;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--gold-bright);border:1px solid rgba(214,177,104,.45);background:rgba(5,6,10,.55);padding:9px 14px;cursor:pointer;transition:.2s;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);}
.title-mode-btn:hover{border-color:var(--gold-bright);background:rgba(214,177,104,.12);}

.mode-seg{display:flex;gap:6px;}
.mode-seg button{padding:9px 16px;border:1px solid rgba(255,255,255,.15);font-size:11px;letter-spacing:.1em;color:#8f887c;background:rgba(0,0,0,.2);transition:.18s;}
.mode-seg button.on{border-color:var(--gold);color:#171105;background:linear-gradient(180deg,#e8cf90,#b98f45);font-weight:700;}

.menu-item.disabled{opacity:.5;}
.menu-item.disabled:hover{transform:none;border-color:rgba(255,255,255,.08);background:linear-gradient(90deg,rgba(255,255,255,.02),transparent);}
.menu-item.disabled .mi-arrow{opacity:0;}

.toast{position:fixed;left:50%;bottom:42px;transform:translate(-50%,14px);opacity:0;pointer-events:none;z-index:10001;background:rgba(8,10,16,.94);border:1px solid rgba(214,177,104,.6);padding:12px 22px;color:var(--gold-bright);font-size:13px;letter-spacing:.1em;box-shadow:0 12px 40px rgba(0,0,0,.6);transition:opacity .22s,transform .22s;font-family:var(--sans);}
.toast.show{opacity:1;transform:translate(-50%,0);}

.rotate-overlay{display:none;position:fixed;inset:0;z-index:10000;background:radial-gradient(ellipse at center,#121014,#05060a 72%);flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;color:var(--ink);padding:28px;}
.rotate-overlay .rotate-icon{font-size:64px;color:var(--gold-bright);animation:rotateHint 2.6s ease-in-out infinite;}
.rotate-overlay h2{font-family:var(--serif);font-size:28px;letter-spacing:.16em;color:var(--gold-bright);}
.rotate-overlay p{font-size:13px;line-height:1.9;color:#a39b8c;letter-spacing:.08em;}
.rotate-overlay button{margin-top:16px;font-size:12px;letter-spacing:.1em;padding:10px 18px;border:1px solid rgba(214,177,104,.4);color:var(--gold);background:rgba(0,0,0,.3);}
@keyframes rotateHint{0%,100%{transform:rotate(0deg);}50%{transform:rotate(180deg);}}
@media (orientation: portrait){ body.mobile-mode .rotate-overlay{display:flex;} }

/* touch controls (mobile mode only) */
.touch-controls{position:absolute;inset:0;z-index:12;display:none;pointer-events:none;}
body.mobile-mode .touch-controls{display:block;}
.tbtn,.touch-pause{position:absolute;display:flex;align-items:center;justify-content:center;border:2px solid rgba(214,177,104,.55);background:rgba(7,9,14,.6);color:#f4ead6;font-family:var(--serif);font-weight:700;box-shadow:0 4px 0 rgba(0,0,0,.35),inset 0 0 24px rgba(214,177,104,.08);-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;pointer-events:auto;transition:transform .06s,background .06s,border-color .06s;backdrop-filter:blur(5px);}
.tbtn:active,.tbtn.pressed,.touch-pause:active{background:rgba(195,58,36,.42);border-color:#ffeab8;transform:scale(.94);}
.touch-dpad{position:absolute;left:20px;bottom:14px;width:230px;height:208px;}
.tbtn.dpad{width:86px;height:86px;border-radius:50%;font-size:26px;color:#e6d8ba;}
.tbtn.dpad.up{left:72px;top:0;}
.tbtn.dpad.down{left:72px;top:122px;}
.tbtn.dpad.left{left:0;top:61px;}
.tbtn.dpad.right{left:144px;top:61px;}
.touch-actions{position:absolute;right:18px;bottom:14px;width:306px;height:228px;}
.tbtn.sp{width:94px;height:60px;border-radius:15px;flex-direction:column;gap:0;font-size:12px;line-height:1.05;letter-spacing:.08em;background:rgba(10,10,16,.66);}
.tbtn.sp b{font-size:12px;font-weight:700;letter-spacing:.14em;}
.tbtn.sp span{font-size:12px;color:var(--gold);}
.tbtn.sp.sp1{left:0;top:0;}
.tbtn.sp.sp2{left:106px;top:0;}
.tbtn.sp.sp3{left:212px;top:0;}
.tbtn.atk{width:88px;height:88px;border-radius:50%;font-size:27px;top:78px;}
.tbtn.atk.light{left:0;}
.tbtn.atk.heavy{left:109px;}
.tbtn.atk.kick{left:218px;}
.tbtn.super{left:0;top:172px;width:306px;height:56px;border-radius:16px;font-size:18px;letter-spacing:.16em;border-color:rgba(195,58,36,.8);background:linear-gradient(180deg,rgba(30,12,10,.7),rgba(8,6,8,.75));}
.tbtn.super.ready{background:linear-gradient(180deg,rgba(195,58,36,.8),rgba(111,21,13,.88));border-color:#ffd9a0;box-shadow:0 0 30px rgba(255,90,40,.5),inset 0 0 24px rgba(255,180,100,.2);animation:lowPulse 1s infinite;}
.touch-pause{left:50%;bottom:20px;transform:translateX(-50%);width:64px;height:64px;border-radius:50%;font-family:var(--mono);font-size:18px;letter-spacing:0;color:var(--gold-bright);opacity:.7;}
.touch-pause:active{transform:translateX(-50%) scale(.94);}

/* mobile-tuned game UI */
body.mobile-mode .fight-hint{display:none;}
body.mobile-mode .hud{padding:12px 16px 0;grid-template-columns:1fr 118px 1fr;gap:6px;}
body.mobile-mode .portrait-box{width:68px;height:68px;}
body.mobile-mode .hud-name{font-size:21px;}
body.mobile-mode .hud-title{font-size:8px;}
body.mobile-mode .hp-shell{height:18px;}
body.mobile-mode .timer{font-size:40px;}
body.mobile-mode .round-label{font-size:7px;}
body.mobile-mode .combo{top:150px;}
body.mobile-mode .combo1{left:70px;}
body.mobile-mode .combo2{right:70px;}
body.mobile-mode .combo b{font-size:42px;}
body.mobile-mode .announce{font-size:70px;}
body.mobile-mode .announce.ko{font-size:86px;}
body.mobile-mode .announce.small{font-size:40px;}
body.mobile-mode .super-banner .sb-name{font-size:38px;letter-spacing:.1em;}
body.mobile-mode .super-banner .sb-en{font-size:8px;}
body.mobile-mode .pause-card{width:78%;padding:22px 26px;}
body.mobile-mode .pause-card h2{font-size:30px;}
body.mobile-mode .pause-stats{font-size:12px;}
body.mobile-mode .pause-actions button{padding:15px 22px;font-size:14px;}
body.mobile-mode .pause-moves{max-height:200px;}
body.mobile-mode .menu-item{padding:13px 18px;}
body.mobile-mode .mi-body b{font-size:24px;}
body.mobile-mode .menu-hint{font-size:14px;}
body.mobile-mode .select-head{left:22px;right:22px;top:14px;height:66px;}
body.mobile-mode .select-head .ghost-btn{padding:12px 16px;font-size:13px;}
body.mobile-mode .select-titles h2{font-size:22px;}
body.mobile-mode .difficulty button{padding:10px 14px;font-size:12px;}
body.mobile-mode .select-body{left:22px;right:22px;top:94px;bottom:80px;grid-template-columns:1fr 300px;gap:14px;}
body.mobile-mode .roster{gap:6px;}
body.mobile-mode .select-foot{left:22px;right:22px;bottom:10px;height:58px;}
body.mobile-mode .select-actions button{padding:14px 22px;font-size:14px;}
body.mobile-mode .select-hint{font-size:10px;}
body.mobile-mode .difficulty .diff-label{font-size:9px;}
body.mobile-mode .char-info{padding:10px 14px 12px;}
body.mobile-mode .result-main h2{font-size:58px;}
body.mobile-mode .result-actions button{padding:15px 24px;font-size:14px;}
body.mobile-mode .setting-row{padding:12px 4px;}
body.mobile-mode .mode-seg button{padding:11px 18px;font-size:13px;}
body.mobile-mode .title-mode-btn{font-size:12px;padding:11px 16px;}
body.mobile-mode .press-start{font-size:20px;}
body.mobile-mode .press-start kbd{display:none;}

/* mobile select readability */
body.mobile-mode .char-title{font-size:14px;}
body.mobile-mode .char-name{font-size:35px;}
body.mobile-mode .char-arch{font-size:10px;}
body.mobile-mode .stats{gap:8px 14px;}
body.mobile-mode .stat span{font-size:10px;width:30px;}
body.mobile-mode .move-row{font-size:14px;line-height:1.4;}
body.mobile-mode .move-row kbd{font-size:9px;min-width:22px;padding:3px 4px;}
body.mobile-mode .move-row .mv-en{display:none;}
body.mobile-mode .char-desc{font-size:11px;line-height:1.6;min-height:0;}
body.mobile-mode .difficulty button{padding:12px 16px;font-size:13px;}
body.mobile-mode .select-actions button{padding:17px 26px;font-size:16px;}
body.mobile-mode .select-hint{font-size:11px;}
body.mobile-mode .select-head .ghost-btn{min-height:40px;}

/* larger mobile menu targets */
body.mobile-mode .select-head{top:10px;height:74px;}
body.mobile-mode .select-head .ghost-btn{padding:16px 20px;font-size:14px;min-height:54px;}
body.mobile-mode .difficulty button{padding:15px 17px;font-size:14px;min-height:52px;}
body.mobile-mode .select-body{top:100px;bottom:96px;}
body.mobile-mode .select-foot{height:74px;bottom:6px;}
body.mobile-mode .select-actions button{padding:20px 28px;font-size:17px;}
body.mobile-mode .touch-pause{width:72px;height:72px;font-size:20px;bottom:16px;}
body.mobile-mode .pause-actions button{padding:18px 24px;font-size:15px;}
body.mobile-mode .result-actions button{padding:18px 26px;font-size:16px;}
body.mobile-mode .mode-seg button{padding:14px 20px;font-size:15px;}
body.mobile-mode .toggle{padding:12px 18px;font-size:12px;}
body.mobile-mode .setting-row input[type=range]{height:6px;}
body.mobile-mode .setting-row input[type=range]::-webkit-slider-thumb{width:26px;height:26px;}
body.mobile-mode .setting-value{font-size:14px;}