*{box-sizing:border-box;margin:0;padding:0}
:root{
  color-scheme:dark;
  --bg-0:#070911;
  --panel:rgba(22,28,44,.66);
  --border:rgba(255,255,255,.09);
  --border-soft:rgba(255,255,255,.06);
  --text:#eef1fb;
  --text-dim:#8b95ad;
  --text-dim2:#6c7690;
  --accent:#5b8cff;
  --accent-2:#8c6bff;
  --accent-grad:linear-gradient(135deg,#5b8cff,#8c6bff);
  --gold:#ffc94d;
  --good:#3ddc97;
  --bad:#ff5d75;
  --radius:16px;
  --radius-sm:11px;
  --shadow-lg:0 24px 60px rgba(0,0,0,.5);
  --shadow-md:0 10px 28px rgba(0,0,0,.38);
}
html,body{
  background:
    radial-gradient(1100px 640px at 12% -8%, rgba(91,140,255,.12), transparent 60%),
    radial-gradient(900px 560px at 104% 4%, rgba(140,107,255,.10), transparent 55%),
    var(--bg-0);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Space Grotesk',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}
body{-webkit-user-select:none;user-select:none;overflow-x:hidden}
#app{max-width:1300px;margin:0 auto;padding:14px 14px 28px}

#hud{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:11px 16px;margin-bottom:12px;
  background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}
#hud .brand{
  font-weight:700;letter-spacing:.15em;font-size:16px;
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
#hud .brand::before{content:"🚇 ";-webkit-text-fill-color:initial;filter:none}
#hud .stat{display:flex;flex-direction:column;line-height:1.15;gap:2px}
#hud .stat .k{font-size:9.5px;color:var(--text-dim);letter-spacing:.09em;text-transform:uppercase}
#hud .stat b{font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
#hud .sp{flex:1}
#hud button{
  background:rgba(255,255,255,.045);border:1px solid var(--border);color:var(--text);
  border-radius:10px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
#hud button:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);transform:translateY(-1px)}
#hud button:active{transform:translateY(0)}
.speedgrp{display:flex;gap:2px;background:rgba(255,255,255,.045);border:1px solid var(--border);border-radius:10px;padding:2px}
.spd{background:transparent;border:0;color:var(--text-dim);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s ease,color .15s ease}
.spd:hover{color:var(--text)}
.spd.on{background:var(--accent-grad);color:#fff}

#chapterBar{
  position:relative;overflow:hidden;
  background:var(--panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:9px 14px 9px 17px;font-size:12px;color:var(--text-dim);
  margin:0 0 12px;max-width:960px;
}
#chapterBar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-grad)}
#chapterBar[hidden]{display:none}
#chapterBar b{color:#bfd2ff;margin-right:9px;font-weight:700}

#eventBar{
  position:relative;overflow:hidden;
  background:var(--panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,201,77,.35);border-radius:var(--radius-sm);
  padding:9px 14px 9px 17px;font-size:12px;color:var(--text-dim);
  margin:0 0 12px;max-width:960px;animation:popIn .25s cubic-bezier(.16,1,.3,1);
}
#eventBar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold),#ff8c42)}
#eventBar[hidden]{display:none}
#eventBar b{color:var(--gold);margin-right:9px;font-weight:700}

#main{display:flex;gap:16px;align-items:flex-start}
#stage{flex:1;min-width:0;position:relative}

#tut{position:absolute;left:10px;right:10px;top:10px;z-index:20;display:flex;justify-content:center;pointer-events:none}
#tut[hidden],#tut [hidden]{display:none}
#tut .tut-body{
  pointer-events:auto;
  background:linear-gradient(180deg,rgba(27,33,52,.97),rgba(17,22,36,.97));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:14px;padding:12px 16px;
  max-width:560px;box-shadow:var(--shadow-lg);
  animation:popIn .25s cubic-bezier(.16,1,.3,1);
}
#tut .tut-step{font-size:10px;color:var(--text-dim2);letter-spacing:.12em;font-weight:700}
#tut p{font-size:13px;line-height:1.6;margin:5px 0 11px;color:var(--text)}
#tut .tut-btns{display:flex;gap:8px;justify-content:flex-end}
#tut button{border:0;border-radius:8px;padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .15s ease,filter .15s ease}
#tut button:hover{transform:translateY(-1px)}
#tutSkip{background:rgba(255,255,255,.07);color:var(--text-dim)}
#tutNext{background:var(--accent-grad);color:#fff;box-shadow:0 4px 16px rgba(91,140,255,.32)}
#side.tut-glow{box-shadow:0 0 0 2px var(--gold),0 0 30px rgba(255,201,77,.35)}

#cv{
  display:block;width:100%;height:auto;max-width:960px;margin:0 auto;
  background:#0a0d16;border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shadow-lg);touch-action:none;
}
#camCtrl{position:absolute;right:22px;bottom:16px;display:flex;flex-direction:column;gap:6px;z-index:15}
#camCtrl button{
  width:34px;height:34px;border-radius:10px;background:rgba(15,19,30,.75);backdrop-filter:blur(10px);
  border:1px solid var(--border);color:var(--text);font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:background .15s ease,transform .15s ease;
}
#camCtrl button:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}

#linectrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px auto 0;max-width:960px}
.quick-actions{display:flex;gap:8px;flex-wrap:wrap;flex-basis:100%}
.quick-actions button{
  background:linear-gradient(135deg,rgba(61,220,151,.16),rgba(91,140,255,.14));
  border:1px solid rgba(61,220,151,.32);color:var(--text);
  border-radius:9px;padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:transform .15s ease,filter .15s ease;
}
.quick-actions button:hover{transform:translateY(-1px);filter:brightness(1.12)}
#linectrl .lslot{
  display:flex;align-items:center;gap:8px;
  background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);color:var(--text-dim);
  border-radius:999px;padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
#linectrl .lslot:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.2)}
#linectrl .lslot .dot{
  width:10px;height:10px;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent),0 0 10px color-mix(in srgb,var(--c) 65%,transparent);
}
#linectrl .lslot small{color:var(--text-dim2);font-weight:500}
#linectrl .lslot.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 16%,#121829);color:var(--text)}
#linectrl button:not(.lslot){
  background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text);
  border-radius:9px;padding:7px 13px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:background .15s ease,transform .15s ease;
}
#linectrl button:not(.lslot):hover{background:rgba(255,255,255,.11);transform:translateY(-1px)}
#linectrl .ehint{font-size:11px;color:var(--text-dim2);flex-basis:100%}
#linectrl .palette{display:flex;gap:7px;flex-basis:100%;flex-wrap:wrap}
#linectrl .swatch{
  width:22px;height:22px;border-radius:50%;padding:0;cursor:pointer;
  background:var(--c);border:2px solid rgba(255,255,255,.25);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent);
  transition:transform .15s ease;
}
#linectrl .swatch:hover{transform:scale(1.15)}

#side{
  width:280px;flex-shrink:0;
  background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:var(--radius);padding:16px;
  box-shadow:var(--shadow-md);
  position:sticky;top:14px;max-height:calc(100vh - 28px);overflow-y:auto;
}
#side::-webkit-scrollbar{width:6px}
#side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
#side h3{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:0;font-weight:700}
.up-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.buymode{display:flex;gap:2px;background:rgba(255,255,255,.045);border:1px solid var(--border);border-radius:9px;padding:2px;flex-shrink:0}
.buymode .bm{background:transparent;border:0;color:var(--text-dim);border-radius:7px;padding:4px 8px;font-size:10.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s ease,color .15s ease}
.buymode .bm:hover{color:var(--text)}
.buymode .bm.on{background:var(--accent-grad);color:#fff}
.upcat{font-size:10.5px;letter-spacing:.1em;color:var(--text-dim2);margin:16px 0 8px;font-weight:700}
.upcat:first-of-type{margin-top:0}
.uprow{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.025);border:1px solid var(--border-soft);border-radius:12px;
  padding:10px 12px 10px 15px;margin-bottom:10px;
  transition:border-color .15s ease,background .15s ease;
}
.uprow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-grad);opacity:.75}
.uprow:hover{border-color:rgba(255,255,255,.17);background:rgba(255,255,255,.04)}
.uptop{display:flex;justify-content:space-between;align-items:baseline}
.uptop b{font-size:13px;font-weight:700}
.uplv{font-size:10px;color:var(--text-dim2);font-variant-numeric:tabular-nums}
.updesc{font-size:11.5px;color:var(--text-dim);margin:4px 0 9px;line-height:1.5}
.upbtn{
  width:100%;border:0;color:#fff;border-radius:9px;padding:8px;
  font-size:12px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums;font-family:inherit;
  background:var(--accent-grad);box-shadow:0 4px 16px rgba(91,140,255,.3);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.upbtn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}
.upbtn:disabled{background:rgba(255,255,255,.05);color:var(--text-dim2);box-shadow:none;cursor:not-allowed}
#side .help{font-size:11px;color:var(--text-dim2);line-height:1.6;margin-top:8px;padding-top:11px;border-top:1px solid var(--border-soft)}

@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.ov{
  position:fixed;inset:0;background:rgba(4,6,12,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;
}
.ov.hidden{display:none}
.ov .card{
  background:linear-gradient(180deg,rgba(29,35,54,.94),rgba(17,22,36,.94));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:20px;padding:24px;
  max-width:440px;width:100%;box-shadow:var(--shadow-lg);
  animation:popIn .28s cubic-bezier(.16,1,.3,1);
}
.ov .card.wide{max-width:700px}
.ov .card h2{font-size:20px;margin-bottom:10px;font-weight:700}
.ov .card p{color:var(--text-dim);margin-bottom:12px;font-size:13px;line-height:1.6}
.ov .card ul{margin:0 0 14px 18px;font-size:12.5px;line-height:1.75;color:#c4cddd}
.ov .card ul li{margin-bottom:6px}
.ov .card ul li b{color:var(--text)}
.ov .card button{
  background:var(--accent-grad);border:0;color:#fff;border-radius:11px;
  padding:11px 20px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
  box-shadow:0 6px 22px rgba(91,140,255,.32);
  transition:transform .15s ease,filter .15s ease;
}
.ov .card button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.clear-btns{display:flex;gap:8px;flex-wrap:wrap}
.clear-btns button{flex:1;min-width:160px}
.ov .card button.secondary{background:rgba(255,255,255,.06);color:var(--text-dim);box-shadow:none}
#help .card button+button{margin-left:8px}
#prestige .card{border-color:rgba(255,201,77,.3)}
#prestige .card h2{color:var(--gold)}
#prestigeStats{margin-bottom:14px;line-height:1.8}
#prestigeStats b{color:var(--gold)}
#rebirthBox{margin-bottom:6px}
.prestige-btn{width:100%;background:linear-gradient(135deg,#ffc94d,#ff8c42)!important;box-shadow:0 6px 22px rgba(255,201,77,.32)!important}
#rebirthConfirm{background:rgba(255,201,77,.06);border:1px solid rgba(255,201,77,.3);border-radius:10px;padding:12px;margin-top:10px}
#rebirthConfirm p{margin-bottom:10px;color:#f0dcb0;font-size:12.5px}
.ptree-title{font-size:12px;letter-spacing:.08em;color:var(--text-dim);margin:16px 0 10px;font-weight:700}

.setting-row{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.02);border:1px solid var(--border-soft);border-radius:12px;padding:13px;margin-bottom:16px}
.setting-info{flex:1}
.setting-info b{font-size:13px;display:block;margin-bottom:4px}
.setting-info p{font-size:11.5px;color:var(--text-dim);line-height:1.55;margin:0}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch-slider{position:absolute;inset:0;background:rgba(255,255,255,.12);border:1px solid var(--border);border-radius:999px;cursor:pointer;transition:background .15s ease}
.switch-slider::before{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .15s ease;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.switch input:checked+.switch-slider{background:var(--accent-grad);border-color:transparent}
.switch input:checked+.switch-slider::before{transform:translateX(20px)}
#over .card{border-color:rgba(255,93,117,.25)}
#over .card h2{color:var(--bad)}
#over .card button{background:linear-gradient(135deg,#ff5d75,#d63a58);box-shadow:0 6px 22px rgba(255,93,117,.3)}
#clear .card{background:linear-gradient(180deg,rgba(22,42,36,.94),rgba(14,24,21,.94));border-color:rgba(61,220,151,.28)}
#clear .card h2{color:var(--good)}
#clear .card button{background:linear-gradient(135deg,#3ddc97,#22b39f);box-shadow:0 6px 22px rgba(61,220,151,.32)}
#overstats,#clearstats{
  font-size:13px;line-height:1.9;color:#dde3f5;margin-bottom:16px;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.035);border:1px solid var(--border-soft);border-radius:12px;padding:11px 15px;
}
.rank-submit{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.rank-submit input{
  flex:1;min-width:140px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);
  border-radius:9px;padding:10px 12px;font-size:13px;font-family:inherit;
}
.rank-submit input:focus{outline:none;border-color:var(--good)}
.rank-submit button{white-space:nowrap}
#clearSubmitMsg{margin-bottom:14px;font-size:12px;min-height:1em}
#changelog{font-size:11px;color:var(--text-dim2);line-height:1.6;margin:10px 0 16px;max-height:160px;overflow:auto;padding-right:4px}
#changelog::-webkit-scrollbar{width:6px}
#changelog::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
#changelog h4{color:var(--text-dim);font-size:12px;margin:6px 0 3px}

.mode-tabs{display:flex;gap:8px;margin-bottom:12px}
.mtab{
  flex:1;background:rgba(255,255,255,.03);border:1px solid var(--border);color:var(--text-dim);
  border-radius:10px;padding:10px 12px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.mtab:hover{background:rgba(255,255,255,.07)}
.mtab.on{border-color:var(--accent);background:linear-gradient(135deg,rgba(91,140,255,.2),rgba(140,107,255,.14));color:#fff}
.mode-desc{font-size:12px;color:var(--text-dim);line-height:1.65;margin-bottom:14px}
.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.slot-card{
  background:rgba(255,255,255,.022);border:1px solid var(--border-soft);border-radius:13px;
  padding:13px;display:flex;flex-direction:column;gap:8px;
  transition:border-color .15s ease,transform .15s ease;
}
.slot-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.16)}
.slot-card.active{border-color:var(--good);box-shadow:0 0 0 1px rgba(61,220,151,.22) inset}
.slot-card b{font-size:12.5px;font-weight:700}
.slot-card p{font-size:11px;color:#c4cddd;margin:0;line-height:1.55}
.slot-card p.slot-empty{color:var(--text-dim2)}
.slot-btns{display:flex;gap:6px;flex-wrap:wrap}
.slot-card .slot-btns button{
  flex:1;min-width:0;background:var(--accent-grad);border:0;color:#fff;border-radius:8px;
  padding:8px 6px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:transform .15s ease,filter .15s ease;
}
.slot-card .slot-btns button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.slot-card .slotReset{background:rgba(255,93,117,.14);color:#ffb0bd;box-shadow:none}
.slot-confirm{background:rgba(255,93,117,.06);border:1px solid rgba(255,93,117,.3);border-radius:10px;padding:10px}
.slot-confirm p{font-size:10.5px;color:#f0b8c2;margin-bottom:8px;line-height:1.5}
.slot-confirm code{background:rgba(255,93,117,.16);padding:2px 6px;border-radius:5px;color:#ffb0bd;font-family:'Space Grotesk',monospace}
.slot-confirm-input{
  width:100%;background:#0a0d15;border:1px solid rgba(255,93,117,.32);color:var(--text);
  border-radius:8px;padding:8px 9px;font-size:11px;margin-bottom:8px;font-family:inherit;
}
.slot-confirm-input:focus{outline:none;border-color:#ff5d75}
.slot-confirm .slotDelete{background:linear-gradient(135deg,#ff5d75,#d63a58)}
.slot-confirm .slotDelete:disabled{background:rgba(255,255,255,.05);color:var(--text-dim2);cursor:not-allowed}
.slot-confirm .slotCancel{background:rgba(255,255,255,.07);color:var(--text-dim)}

.skin-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.skin-sw{
  background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text-dim);
  border-radius:9px;padding:9px 13px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:all .15s ease;
}
.skin-sw:hover:not(.locked){background:rgba(255,255,255,.08)}
.skin-sw.on{border-color:var(--accent);color:#fff;background:linear-gradient(135deg,rgba(91,140,255,.22),rgba(140,107,255,.16))}
.skin-sw.locked,.skin-sw:disabled{opacity:.4;cursor:not-allowed}

.ach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;max-height:400px;overflow-y:auto;padding-right:4px;margin-bottom:6px}
.ach-grid::-webkit-scrollbar{width:6px}
.ach-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.ach-cat{grid-column:1/-1;margin:10px 0 2px}
.ach-cat:first-child{margin-top:0}
.ach-card{background:rgba(255,255,255,.02);border:1px solid var(--border-soft);border-radius:10px;padding:9px 11px;opacity:.55;transition:opacity .15s ease}
.ach-card.done{opacity:1;border-color:rgba(255,201,77,.4);background:rgba(255,201,77,.06)}
.ach-card b{font-size:12px;display:block}
.ach-card p{font-size:10.5px;color:var(--text-dim);margin-top:3px;line-height:1.4}

.rank-list{max-height:360px;overflow-y:auto;margin-bottom:14px}
.rank-list::-webkit-scrollbar{width:6px}
.rank-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.rank-row{display:grid;grid-template-columns:34px 1fr 80px 48px 60px;gap:6px;align-items:center;padding:8px 6px;font-size:12px;color:#dde3f5;border-bottom:1px solid var(--border-soft)}
.rank-row span:first-child{color:var(--text-dim2);font-variant-numeric:tabular-nums}
.rank-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-head{color:var(--text-dim);font-weight:700;font-size:10px;text-transform:uppercase;border-bottom:1px solid var(--border)}
.rank-head span:first-child{color:var(--text-dim)}

@media(max-width:920px){
  #main{flex-direction:column}
  #side{width:100%;position:static;max-height:none}
}
@media(max-width:640px){
  .slot-grid{grid-template-columns:1fr}
  .mode-tabs{flex-direction:column}
  .ach-grid{grid-template-columns:1fr}
  .rank-row{grid-template-columns:28px 1fr 70px 40px 50px;font-size:11px}
}