*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --p1:#3fd0ff; --p2:#ff4a5e; --gold:#ffc93c;
  --line:rgba(255,255,255,.13); --txt:#eaf0ff; --dim:#8b9ab8;
  --panel:rgba(9,13,24,.88);
}
html,body{height:100%;overflow:hidden;background:#070a12;color:var(--txt);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
body{position:fixed;inset:0}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

.screen{position:fixed;inset:0;z-index:2;display:none;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.screen.active{display:flex}
.screen.solid{background:radial-gradient(120% 80% at 50% -10%,#18233f 0%,transparent 62%),linear-gradient(180deg,#0a0f1e,#06080f)}
.screen.veil{background:linear-gradient(180deg,rgba(6,9,18,.55) 0%,rgba(6,9,18,.86) 55%)}
.screen:not(.solid):not(.veil){pointer-events:none}
.screen:not(.solid):not(.veil) button,
.screen:not(.solid):not(.veil) .battle-ui,
.screen:not(.solid):not(.veil) .round-over{pointer-events:auto}

/* 角を落とした装甲パネル。角丸より機械的で、本家の意匠に近い */
:root{ --cut: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); }

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.primary{position:relative;display:block;width:100%;padding:17px;margin-top:12px;
  font-weight:900;font-size:16px;letter-spacing:.14em;font-style:italic;
  clip-path:var(--cut);
  background:linear-gradient(100deg,#1f6dff 0%,#54e0ff 55%,#9df0ff 100%);color:#04101f;
  box-shadow:0 8px 26px rgba(63,208,255,.34)}
.primary::after{content:'';position:absolute;inset:2px;clip-path:var(--cut);
  border:1px solid rgba(255,255,255,.45);pointer-events:none}
.primary:active{transform:translateY(1px);filter:brightness(1.14)}
.primary:disabled{filter:grayscale(.7) brightness(.6)}
.ghost{display:block;width:100%;padding:14px;margin-top:9px;clip-path:var(--cut);
  border:1px solid var(--line);color:var(--dim);font-size:14px;letter-spacing:.1em;
  background:rgba(255,255,255,.035)}
.mini{margin-left:auto;padding:9px 15px;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  border:1px solid var(--line);font-size:12px;color:var(--dim);background:rgba(255,255,255,.04)}
.bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
.bar h2{font-size:15px;letter-spacing:.14em;font-weight:800}
.back{font-size:28px;line-height:1;width:36px;text-align:left;color:var(--dim)}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;min-height:0}
.pad{padding:14px}
.center-wrap{margin:auto;padding:26px;width:100%;max-width:420px;text-align:center}
.spacer{flex:1;min-height:0}

/* ---------- title ---------- */
.title-sub{font-size:10px;letter-spacing:.5em;color:var(--dim);margin-bottom:10px}
/* 金属板を斜めから見たようなグラデ。単色より一段「重い」印象になる */
.logo{font-size:clamp(44px,15vw,76px);line-height:.90;font-weight:900;font-style:italic;letter-spacing:-.03em;
  background:linear-gradient(172deg,#ffffff 0%,#a8dcff 26%,#2f7bff 46%,#123a8a 52%,#6fc4ff 62%,#ffffff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 rgba(10,30,70,.85)) drop-shadow(0 8px 26px rgba(63,123,255,.6))}
.logo span{display:block;
  background:linear-gradient(172deg,#fff6e0 0%,#ffd27a 24%,#ff7a2f 46%,#8c1f10 52%,#ff9a4a 62%,#fff2d8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 rgba(70,12,10,.85)) drop-shadow(0 8px 26px rgba(255,90,40,.55))}
.title-jp{font-size:11px;letter-spacing:.42em;color:var(--dim);margin:13px 0 30px}

/* ---------- howto ---------- */
.card-note{padding:15px;margin-bottom:11px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid var(--line)}
.card-note.hot{border-color:rgba(255,201,60,.45);background:rgba(255,201,60,.07)}
.card-note b{display:block;color:var(--p1);font-size:14px;margin-bottom:7px;letter-spacing:.06em}
.card-note.hot b{color:var(--gold)}
.card-note p{font-size:13.5px;line-height:1.85;color:#c5d0e6}
.tri{width:100%;margin:10px 0;border-collapse:collapse;font-size:12.5px}
.tri td{padding:6px 4px;border-bottom:1px solid var(--line)}
.tri .k{font-weight:800;white-space:nowrap}
.tri .k.c{color:var(--gold)} .tri .k.p{color:var(--p1)} .tri .k.b{color:#b9c6de}
.tri-note{font-size:12px !important;color:var(--dim) !important}
.pt{display:inline-block;width:20px;height:20px;line-height:20px;margin-right:7px;border-radius:6px;
  background:var(--gold);color:#221800;font-weight:800;font-size:12px;text-align:center}

/* ---------- garage ---------- */
.deck-tabs{display:flex;gap:8px;padding:10px 14px;flex:0 0 auto}
.deck-tab{flex:1;padding:10px 6px;border:1px solid var(--line);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  font-size:11px;text-align:center;line-height:1.4;background:rgba(0,0,0,.42)}
.deck-tab.on{border-color:var(--p1);background:linear-gradient(160deg,rgba(63,208,255,.26),rgba(63,208,255,.08));
  box-shadow:0 0 18px rgba(63,208,255,.25)}
.deck-tab b{display:block;font-size:10px;letter-spacing:.1em;color:var(--dim);margin-bottom:2px}
.deck-tab.on b{color:var(--p1)}
.deck-tab span{font-size:11px;font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.garage-panel{flex:0 0 auto;max-height:62vh;display:flex;flex-direction:column;
  background:var(--panel);border-top:1px solid var(--line);
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));backdrop-filter:blur(8px)}
.build-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;flex:0 0 auto}
.build-name{font-size:14px;font-weight:800;line-height:1.35}
.build-style{font-size:11px;letter-spacing:.1em;margin-top:3px}
.routes{margin-left:auto;text-align:right;font-size:10px;color:var(--dim);line-height:1.7;white-space:nowrap}
.routes b{color:var(--txt);font-size:12px;margin-left:4px}

.pgroup{margin-bottom:12px}
.pgroup h3{font-size:10px;letter-spacing:.24em;color:var(--dim);margin:0 0 7px}
.prow{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;touch-action:pan-x;scrollbar-width:none}
.prow::-webkit-scrollbar{display:none}
.pcard{flex:0 0 auto;width:112px;padding:10px;text-align:left;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.pcard.on{border-color:var(--p1);
  background:linear-gradient(160deg,rgba(63,208,255,.26),rgba(63,208,255,.06));
  box-shadow:0 0 0 1px var(--p1) inset,0 0 18px rgba(63,208,255,.28)}
.pcard .cn{font-size:12px;font-weight:700;line-height:1.3;margin-bottom:5px}
.pcard .cs{font-size:9.5px;color:var(--dim);line-height:1.6}
.pcard .cs u{text-decoration:none;color:#b9c6de}

/* ---------- round select ---------- */
.sel-wrap{margin:auto;padding:22px;width:100%;max-width:460px;text-align:center}
.sel-round{font-size:11px;letter-spacing:.3em;color:var(--dim)}
.sel-score{font-size:34px;font-weight:900;font-style:italic;letter-spacing:.08em;margin:4px 0 14px}
.sel-title{font-size:19px;font-weight:800;letter-spacing:.06em}
.sel-note{font-size:11px;color:var(--dim);margin:5px 0 16px;letter-spacing:.08em}
.sel-cards{display:flex;flex-direction:column;gap:9px}
.selcard{padding:13px;border-radius:13px;border:1px solid var(--line);
  background:rgba(255,255,255,.045);text-align:left;display:flex;align-items:center;gap:11px}
.selcard:active{border-color:var(--p1);background:rgba(63,208,255,.16)}
.selcard .sc-style{flex:0 0 auto;width:52px;font-size:10px;font-weight:800;text-align:center;
  padding:5px 0;border-radius:7px;line-height:1.3}
.selcard .sc-main{flex:1;min-width:0}
.selcard .sc-name{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selcard .sc-route{font-size:10px;color:var(--dim);margin-top:3px}
.sel-log{margin-top:18px;font-size:11px;line-height:1.9;color:var(--dim)}

/* ---------- battle hud ---------- */
.hud-top{display:flex;align-items:flex-start;gap:10px;padding:calc(9px + env(safe-area-inset-top)) 13px 0}
.fighter{flex:1;min-width:0}
.f-row{display:flex;align-items:baseline;gap:7px;margin-bottom:4px}
.fighter.right .f-row{justify-content:flex-end}
.f-name{font-size:11px;font-weight:800;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 2px 6px #000}
.fighter .f-name{color:#bfe8ff}
.fighter.right .f-name{color:#ffc2c8}
.f-pts{font-size:23px;font-weight:900;font-style:italic;line-height:.9;color:var(--gold);
  text-shadow:0 2px 8px #000,0 0 16px rgba(255,201,60,.6)}
.hud-vs{font-size:11px;font-weight:900;font-style:italic;color:var(--dim);padding-top:4px;text-shadow:0 2px 6px #000}
/* ゲージは平行四辺形に寝かせる。水平の帯より速度感が出る */
.gauge{height:9px;background:rgba(0,0,0,.66);overflow:hidden;border:1px solid rgba(255,255,255,.18);
  transform:skewX(-22deg)}
.gauge i{display:block;height:100%;width:100%;transform-origin:left center}
.gauge.r i{transform-origin:right center;margin-left:auto}
.gauge.spin i{background:linear-gradient(90deg,#1f6dff,#5ce6ff 70%,#c8f4ff)}
.fighter.right .gauge.spin i{background:linear-gradient(90deg,#ff8a3c,#ff3f5e 70%,#ffb0b8)}
.gauge.burst{height:4px;margin-top:4px}
.gauge.burst i{background:linear-gradient(90deg,#ffd93c,#ff3f5e);width:0%}

.announce{position:absolute;top:30%;left:0;right:0;text-align:center;font-size:clamp(24px,8.5vw,44px);
  font-weight:900;font-style:italic;opacity:0;pointer-events:none;
  text-shadow:0 4px 26px #000,0 0 44px currentColor}
.announce.show{animation:pop 1.1s ease-out}
@keyframes pop{0%{opacity:0;transform:scale(.6) skewX(-8deg)}16%{opacity:1;transform:scale(1.09) skewX(-8deg)}
  74%{opacity:1;transform:scale(1) skewX(-8deg)}100%{opacity:0;transform:scale(1.04) skewX(-8deg)}}

.judge-pop{position:absolute;top:44%;left:0;right:0;text-align:center;font-size:22px;
  font-weight:900;font-style:italic;opacity:0;pointer-events:none;letter-spacing:.08em;
  text-shadow:0 2px 14px #000}
.judge-pop.show{animation:jp .62s ease-out}
@keyframes jp{0%{opacity:0;transform:translateY(12px) scale(.8)}22%{opacity:1;transform:translateY(0) scale(1.1)}
  100%{opacity:0;transform:translateY(-18px) scale(1)}}

.cutin{position:absolute;inset:0;display:none;align-items:center;pointer-events:none;overflow:hidden}
.cutin.show{display:flex;animation:cutfade 1.2s ease-out forwards}
.cutin-inner{width:140%;margin-left:-20%;padding:15px 0;text-align:center;transform:skewY(-6deg);
  background:linear-gradient(90deg,transparent,rgba(255,201,60,.18) 12%,rgba(255,63,94,.38) 50%,rgba(255,201,60,.18) 88%,transparent);
  border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);
  animation:cutslide 1.2s cubic-bezier(.15,.9,.2,1) forwards}
.cutin-inner span{display:inline-block;font-size:clamp(21px,7vw,36px);font-weight:900;font-style:italic;
  letter-spacing:.06em;transform:skewY(6deg);text-shadow:0 0 26px rgba(255,201,60,.95),0 3px 0 #7a1020}
@keyframes cutslide{0%{transform:skewY(-6deg) translateX(-30%);opacity:0}
  14%{transform:skewY(-6deg) translateX(0);opacity:1}
  76%{transform:skewY(-6deg) translateX(0);opacity:1}
  100%{transform:skewY(-6deg) translateX(24%);opacity:0}}
@keyframes cutfade{0%,99%{opacity:1}100%{opacity:0}}

.launch-ui{position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom));
  padding:0 24px;text-align:center;display:none}
.launch-ui.show{display:block}
.launch-hint{font-size:12.5px;letter-spacing:.1em;color:#d3e2ff;margin-bottom:9px;text-shadow:0 2px 8px #000}
.power-bar{position:relative;height:15px;border-radius:8px;background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.22);overflow:hidden}
.power-bar i{display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#3fd0ff,#ffd93c 70%,#ff3f5e)}
.power-bar .sweet{position:absolute;top:0;bottom:0;left:80%;width:16%;
  background:rgba(255,255,255,.18);border-left:1px solid var(--gold);border-right:1px solid var(--gold)}
.angle-hint{font-size:10.5px;letter-spacing:.16em;color:var(--dim);margin-top:7px}

.battle-ui{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));
  display:none;align-items:center;justify-content:space-between;padding:0 16px;gap:13px}
.battle-ui.show{display:flex}
.ctrl-gauge{position:relative;flex:1;height:26px;background:rgba(0,0,0,.66);
  clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);
  border:1px solid rgba(255,255,255,.18);overflow:hidden}
.ctrl-gauge i{position:absolute;inset:0;width:100%;transform-origin:left;
  background:linear-gradient(90deg,#1f8fff,#5ce6ff);opacity:.85}
.ctrl-gauge span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:800;letter-spacing:.24em;color:#04101f}
.special{position:relative;width:76px;height:76px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);
  font-size:10px;font-weight:800;color:var(--dim);
  display:flex;align-items:center;justify-content:center;padding:7px;overflow:hidden}
.special em{font-style:normal;line-height:1.25;text-align:center;position:relative;z-index:2}
.special s{position:absolute;left:0;right:0;bottom:0;height:0%;
  background:linear-gradient(0deg,#ff3f5e,#ffd93c);opacity:.5;text-decoration:none}
.special:not([disabled]){color:#fff;border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(255,201,60,.2),0 0 30px rgba(255,201,60,.65);
  animation:sp 1s ease-in-out infinite alternate}
@keyframes sp{to{box-shadow:0 0 0 9px rgba(255,201,60,.08),0 0 46px rgba(255,201,60,.9)}}
.special:not([disabled]):active{transform:scale(.93)}

.round-over{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(4,7,14,.82);text-align:center;padding:26px}
.round-over.show{display:flex}
.ro-type{font-size:clamp(24px,8vw,40px);font-weight:900;font-style:italic;color:var(--gold);
  text-shadow:0 0 30px rgba(255,201,60,.6)}
.ro-pts{font-size:15px;color:var(--dim);margin:10px 0 24px;letter-spacing:.1em}
.round-over .primary{max-width:300px}

.quit{position:absolute;top:calc(6px + env(safe-area-inset-top));right:6px;
  width:34px;height:34px;font-size:19px;color:var(--dim);opacity:.45}

/* ---------- result ---------- */
.result-title{font-size:clamp(32px,11vw,54px);font-weight:900;font-style:italic;line-height:1}
.result-title.win{background:linear-gradient(100deg,#fff,#5ce6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.result-title.lose{background:linear-gradient(100deg,#8b9ab8,#ff5e6e);-webkit-background-clip:text;background-clip:text;color:transparent}
.result-score{font-size:28px;font-weight:900;font-style:italic;margin:12px 0 8px;letter-spacing:.08em}
.result-log{font-size:11.5px;line-height:2;color:var(--dim);margin-bottom:22px;min-height:2em}

/* ---------- 起動中 ---------- */
#boot{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:26px;text-align:center;
  background:radial-gradient(120% 80% at 50% 30%,#18233f 0%,#06080f 70%)}
#boot.gone{opacity:0;pointer-events:none;transition:opacity .45s ease}
.boot-logo{font-size:clamp(34px,11vw,58px);line-height:.92;font-weight:900;font-style:italic;
  background:linear-gradient(100deg,#fff 10%,#7fd8ff 45%,#3f7bff 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.boot-logo span{display:block;background:linear-gradient(100deg,#ffb03c,#ff3f5e);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.boot-bar{width:min(240px,60vw);height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.boot-bar i{display:block;width:40%;height:100%;border-radius:2px;
  background:linear-gradient(90deg,#2f7bff,#5ce6ff);animation:bootslide 1.1s ease-in-out infinite}
@keyframes bootslide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.boot-msg{font-size:11.5px;letter-spacing:.08em;color:var(--dim);line-height:1.7;max-width:300px}

#boot-error{display:none;position:fixed;left:0;right:0;bottom:0;z-index:99;
  background:#3a0d14;color:#ffd7dc;font:12px/1.6 monospace;padding:12px;white-space:pre-wrap;max-height:45vh;overflow:auto}