/* style.css — v6.2 */
:root{
  --bg:#0f1724;
  --card:#0b1220;
  --card-solid:#0b1220;
  --muted:#9aa4b2;
  --accent:#7c5cff;
  --accent-2:#00d4ff;
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.02);
  --success: #4ade80;
}
*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #071021 0%, #071427 60%);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:12px;
}
.hidden{display:none !important}
.app{max-width:1100px;margin:0 auto}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.topbar h1{margin:0;font-size:20px;letter-spacing:1px}
.topbar nav{display:flex;gap:8px;align-items:center}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;color:var(--muted);cursor:pointer}
.btn.small{padding:6px 8px;font-size:13px}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;color:#051026;font-weight:700}
.btn.big{padding:16px 22px;border-radius:14px;font-weight:700;font-size:18px}
.btn.icon{width:36px;height:36px;border-radius:12px;font-weight:800}
.card{background:linear-gradient(180deg,var(--glass),var(--glass-2));border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 6px 24px rgba(0,0,0,0.5);}
.card.solid{background:var(--card-solid);}
.content{display:grid;grid-template-columns: 380px 1fr;gap:18px}
.left{display:flex;flex-direction:column}
.right{display:flex;flex-direction:column}
.mode-card label{font-size:13px;color:var(--muted);margin-bottom:6px;display:block}
.mode-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.modes{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.mode{padding:8px 12px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);cursor:pointer}
.mode.active{background:rgba(255,255,255,0.03);color:white;border-color:rgba(255,255,255,0.06)}
input[type="number"], input[type="text"]{width:100%;padding:8px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit;margin-bottom:10px}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.practice.hidden{display:none}
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px;align-items:stretch}
.label{font-size:12px;color:var(--muted);margin-bottom:6px}
.big{font-size:28px;font-weight:700}
.timer-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:8px}
.timer{
  font-size:48px;font-weight:800;letter-spacing:2px;transition:transform .12s cubic-bezier(.2,.9,.2,1);
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: 'tnum' 1;
  font-feature-settings: 'tnum' 1;
}
.timer.hidden{visibility:hidden;opacity:0}
.countdown-label{font-size:14px;color:var(--muted)}
.game-controls{display:flex;gap:12px;margin:12px 0;justify-content:center}
.result{margin-top:10px;text-align:center}
.result-text{font-weight:700;margin-bottom:8px}
.result-actions{display:flex;gap:8px;justify-content:center}
.tabs{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tab-modes{display:flex;gap:6px;flex-wrap:wrap}
.tab{padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--muted);cursor:pointer}
.tab.active{background:rgba(255,255,255,0.04);color:white}
.tab-source{display:flex;gap:6px}
.chip{padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--muted);cursor:pointer}
.chip.active{background:rgba(255,255,255,0.08);color:white}
.ranking-card ol{padding-left:16px;margin:0;max-height:420px;overflow:auto}
.ranking-card li{padding:8px;border-radius:8px;margin-bottom:6px;background:rgba(255,255,255,0.02);display:flex;justify-content:space-between;align-items:center}
.ranking-actions{display:flex;justify-content:center;margin-top:6px}
.confetti{position:relative;width:100%;height:120px;pointer-events:none}
.modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,0.6);padding:20px;z-index:50}
.modal.hidden{display:none}
.modal .modal-content{max-width:720px;width:100%}
.modal-actions{display:flex;justify-content:flex-end;margin-top:10px}
.modal-actions.gap{gap:8px;justify-content:flex-start}
.result-summary{margin:6px 0 8px 0}
.total-row{font-size:18px;font-weight:800}
.rank-row{margin-top:4px}
.history-list{padding-left:18px}
.history-list li{margin:4px 0}
@media (max-width:900px){
  .content{grid-template-columns:1fr;gap:12px}
  .topbar h1{font-size:18px}
  .timer{font-size:40px}
  .hud .big{font-size:24px}
  #rightColumn{order:1}
  #leftColumn{order:2}
}
.btn:active{transform:translateY(1px)}