:root{
  --milk:#F2F1F7;
  --panel:#FFFFFF;
  --line:#E2E0EE;
  --ink:#191531;
  --fog:#8B87AB;
  --orbit:#5A48F5;
  --orbit-soft:#EDEAFE;
  --glow:#FFD44A;
  --void:#16122B;
  --void2:#221C42;
  --serif:'Zen Old Mincho',serif;
  --sans:'Zen Kaku Gothic New',sans-serif;
  --latin:'Space Grotesk',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--milk);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--glow);color:var(--ink)}
.wrap{max-width:940px;margin:0 auto;padding:0 20px}

/* ===== TOP HUD ===== */
.top{background:var(--void);color:#fff;position:relative;overflow:hidden}
.top .ring{
  position:absolute;right:-8vw;top:50%;transform:translateY(-50%);
  width:38vw;height:38vw;max-width:340px;max-height:340px;
  border:2px solid rgba(255,255,255,.10);border-radius:50%;pointer-events:none
}
.top .ring::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--glow);
  filter:drop-shadow(0 0 14px rgba(255,212,74,.45));
  animation:spin 11s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.top-in{position:relative;z-index:2;padding:34px 20px 30px}
.brand{
  font-family:var(--latin);font-size:clamp(26px,5.4vw,42px);
  font-weight:700;letter-spacing:.22em;color:#fff;line-height:1
}
.hud{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap}
.hud-cell{display:flex;flex-direction:column;gap:3px}
.hl{font-family:var(--latin);font-size:10px;letter-spacing:.26em;color:#8B87AB;font-weight:500}
.hv{font-family:var(--latin);font-size:27px;font-weight:700;color:var(--glow);line-height:1}

/* ===== CORE 5 ===== */
.band{display:flex;align-items:center;gap:12px;margin:38px 0 16px}
.band .lbl{font-family:var(--latin);font-size:10.5px;letter-spacing:.28em;color:var(--orbit);font-weight:700}
.band .bar{flex:1;height:1px;background:var(--line)}

.core{display:grid;gap:12px}
.tile-wrap{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px 18px;transition:border-color .15s,box-shadow .15s
}
.tile-wrap:hover{border-color:#CFCADF}
.tile{
  display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;text-decoration:none;color:var(--ink);position:relative;
  transition:border-color .15s,transform .15s,box-shadow .15s
}
.tile:hover{border-color:var(--orbit);transform:translateY(-2px);box-shadow:0 8px 22px rgba(90,72,245,.11)}
.tile:focus-visible{outline:3px solid var(--orbit);outline-offset:3px}
.tile.locked{
  pointer-events:none;background:transparent;border:1px dashed var(--line);
  border-radius:16px;padding:20px 22px;opacity:.45
}

.tile-wrap .tile{
  background:transparent;border:none;border-radius:0;padding:0;
  transform:none!important;box-shadow:none!important
}
.t-row{display:flex;align-items:center;gap:14px}
.t-lat{font-family:var(--latin);font-size:10px;letter-spacing:.24em;color:var(--fog);font-weight:600;width:74px;flex:none}
.t-name{font-family:var(--serif);font-weight:900;font-size:23px;letter-spacing:.05em;flex:none}
.t-score{margin-left:auto;display:flex;align-items:baseline;gap:6px;font-family:var(--latin)}
.t-score .num{font-size:24px;font-weight:700;color:var(--ink);line-height:1}
.t-score .den{font-size:12px;color:var(--fog)}
.t-score.zero .num{color:var(--fog)}

.t-bar{height:4px;background:var(--milk);border-radius:99px;margin-top:14px;overflow:hidden}
.t-bar i{display:block;height:100%;background:var(--orbit);border-radius:99px}
.tile:hover .t-bar i{background:var(--glow)}

/* ===== EXTRA 4 (2x2) ===== */
.extra{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini{
  display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:15px 16px;text-decoration:none;color:var(--ink);
  transition:border-color .15s,transform .15s
}
.mini:hover{border-color:var(--orbit);transform:translateY(-1px)}
.mini:focus-visible{outline:3px solid var(--orbit);outline-offset:3px}
.mini.locked{pointer-events:none;background:transparent;border-style:dashed;opacity:.42}
.m-lat{font-family:var(--latin);font-size:9px;letter-spacing:.22em;color:var(--fog);font-weight:600}
.m-row{display:flex;align-items:baseline;gap:8px;margin-top:5px}
.m-name{font-family:var(--serif);font-weight:900;font-size:16px;letter-spacing:.04em}
.m-num{margin-left:auto;font-family:var(--latin);font-size:15px;font-weight:700;color:var(--ink)}
.m-num.zero{color:var(--fog);font-size:13px}

/* ===== STAGE LIST (展開) ===== */
.stages{margin-top:16px;display:grid;gap:6px}
.st{
  display:flex;align-items:center;gap:12px;
  background:var(--milk);border:1px solid transparent;border-radius:11px;
  padding:12px 14px;text-decoration:none;color:var(--ink);
  transition:background .15s,border-color .15s,transform .15s
}
.st:hover{background:var(--orbit-soft);border-color:var(--orbit);transform:translateX(3px)}
.st:focus-visible{outline:3px solid var(--orbit);outline-offset:2px}
.st .dot{width:18px;height:18px;border:2.5px solid var(--orbit);border-radius:50%;flex:none;transition:background .15s,border-color .15s}
.st:hover .dot{background:var(--glow);border-color:var(--glow)}
.st .nm{font-weight:700;font-size:15px}
.st .bt{
  font-family:var(--latin);font-size:9px;font-weight:700;letter-spacing:.14em;
  color:var(--orbit);border:1.5px solid var(--orbit);border-radius:99px;
  padding:1px 7px;flex:none
}
.st .rt{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:var(--latin);font-size:11px;color:var(--fog);letter-spacing:.06em}
.st .best{color:var(--ink);font-weight:700;font-size:13px}
.st .best.none{color:var(--fog);font-weight:500}
.st.wip{pointer-events:none;opacity:.42;border-style:dashed}

.loading{padding:70px 0;text-align:center;color:var(--fog);font-family:var(--latin);font-size:12px;letter-spacing:.3em}
.err{padding:60px 0;text-align:center;color:var(--ink);font-size:14px}

/* ===== FOOT ===== */
.foot{margin-top:60px;border-top:1px solid var(--line);padding:20px 0 40px}
.foot .wrap{display:flex;justify-content:center;gap:18px;font-family:var(--latin);font-size:10px;letter-spacing:.22em;color:var(--fog)}

@media(max-width:560px){
  .top-in{padding:26px 20px 24px}
  .hud{gap:22px}
  .hv{font-size:23px}
  .t-lat{display:none}
  .t-name{font-size:20px}
  .band{margin:30px 0 14px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}