:root {
  --bg: #0b0e17;
  --bg2: #131826;
  --panel: #1a2030;
  --line: #2b3350;
  --text: #e7ecf6;
  --dim: #8b95ad;
  --accent: #3ff0d8;
  --accent2: #ff5db1;
  --good: #55e08a;
  --bad: #ff5f6d;
  --gold: #ffd257;
  --mono: "SFMono-Regular", Consolas, "DejaVu Sans Mono", "Roboto Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #1a2440 0%, var(--bg) 60%);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}
.logo { font-size: 1.25rem; letter-spacing: .06em; font-weight: 800; }
.logo-emoji { filter: drop-shadow(0 0 8px var(--accent)); }
.logo-accent { color: var(--accent); text-shadow: 0 0 12px rgba(63, 240, 216, .5); }

.icon-btn {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 1.1rem;
  width: 40px; height: 40px;
  border-radius: 10px;
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); }

.wrap {
  flex: 1;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 26px 18px 40px;
}

/* ===== パネル(スタート/リザルト) ===== */
.panel {
  background: linear-gradient(180deg, var(--bg2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
}
.panel-title { font-size: .95rem; color: var(--dim); margin: 18px 0 10px; letter-spacing: .08em; }
.panel-title:first-child { margin-top: 0; }
.sub-title { font-size: .82rem; color: var(--dim); margin: 14px 0 8px; }

.opt-row { display: flex; gap: 10px; }
.wrap-row { flex-wrap: wrap; }
.opt {
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: .92rem;
  transition: .12s;
}
.opt:hover { border-color: var(--accent); }
.opt.active {
  border-color: var(--accent);
  background: rgba(63, 240, 216, .12);
  box-shadow: 0 0 0 1px var(--accent) inset;
  color: #fff;
}
.opt-desc { color: var(--dim); font-size: .85rem; margin-top: 8px; }
.sub-opt { margin-top: 6px; }

.best-box {
  margin: 20px 0 8px;
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px dashed var(--line);
  border-radius: 10px;
  font-size: .88rem;
  color: var(--dim);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.best-box b { color: var(--gold); }

.start-btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .05em;
  color: #06221d;
  background: linear-gradient(180deg, #57f5df, var(--accent));
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(63, 240, 216, .3);
}
.start-btn:hover { filter: brightness(1.06); }
.result .opt-row { margin-top: 18px; }
.result .start-btn { margin-top: 0; flex: 1; }

.hint { margin-top: 14px; color: var(--dim); font-size: .8rem; line-height: 1.6; }
.hint code, .hint kbd {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: .78rem;
}

/* ===== プレイ ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.stat {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 4px;
  text-align: center;
}
.stat-label { display: block; font-size: .68rem; color: var(--dim); letter-spacing: .04em; }
.stat-val { display: block; font-size: 1.15rem; font-weight: 800; font-family: var(--mono); }
#stCombo { color: var(--accent2); }
.stat.warn #stTime { color: var(--bad); }

.progress-line { height: 6px; background: var(--bg2); border-radius: 4px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .2s; }
.qcount { text-align: center; color: var(--dim); font-size: .8rem; margin: 6px 0 12px; }

.card {
  background: linear-gradient(180deg, var(--bg2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 24px;
  text-align: center;
  margin-bottom: 18px;
}
.card.miss { animation: shake .18s; border-color: var(--bad); }
@keyframes shake {
  25% { transform: translateX(-6px); } 75% { transform: translateX(6px); }
}
.disp { font-size: 1.9rem; font-weight: 800; letter-spacing: .04em; }
.kana { font-size: 1rem; color: var(--dim); margin-top: 8px; letter-spacing: .1em; }
.roma {
  font-family: var(--mono);
  font-size: 1.7rem;
  margin-top: 16px;
  letter-spacing: .06em;
  word-break: break-all;
}
.roma .done { color: var(--dim); }
.roma .cur { color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
.roma .rest { color: var(--text); }

/* ===== キーボード ===== */
.keyboard { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.kb-row { display: flex; gap: 6px; }
.key {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--dim);
  text-transform: uppercase;
}
.key.wide { width: 66px; font-size: .7rem; }
.key.next {
  color: #06221d;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(63, 240, 216, .55);
}
.key.hit { background: var(--accent2); border-color: var(--accent2); color: #fff; }

/* ===== リザルト ===== */
.result { text-align: center; }
.result-cap { color: var(--dim); letter-spacing: .3em; font-size: .8rem; }
.rank {
  font-size: 3rem;
  font-weight: 900;
  margin: 6px 0;
  background: linear-gradient(90deg, var(--accent), var(--gold), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rank-sub { color: var(--dim); font-size: .9rem; margin-bottom: 18px; }
.result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 8px 0 6px;
}
.result-grid > div {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 6px;
}
.result-grid span { display: block; font-size: .72rem; color: var(--dim); }
.result-grid b { font-size: 1.25rem; font-family: var(--mono); }
.newbest { color: var(--gold); font-weight: 800; margin: 16px 0 4px; }

/* ===== マイリスト編集モーダル ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 12, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 50;
}
.modal[hidden] { display: none; }
.modal-box {
  background: linear-gradient(180deg, var(--bg2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  width: 100%;
  max-width: 560px;
}
.list-text {
  width: 100%;
  min-height: 220px;
  margin-top: 10px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--mono);
  font-size: .95rem;
  line-height: 1.7;
  resize: vertical;
}
.list-text:focus { outline: none; border-color: var(--accent); }
.list-status { margin: 10px 0 4px; font-size: .84rem; color: var(--dim); min-height: 20px; }
.list-status.warn { color: var(--gold); }
.list-status.ok { color: var(--good); }

/* ===== ランク(段位)カード ===== */
.rank-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: linear-gradient(120deg, rgba(63,240,216,.10), rgba(255,93,177,.10));
  border: 1px solid var(--line);
  border-radius: 14px;
}
.rank-badge { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 0 10px rgba(63,240,216,.5)); }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-size: 1.15rem; font-weight: 800; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rank-rating { font-size: .78rem; font-weight: 600; color: var(--dim); font-family: var(--mono); }
.rank-prog { height: 6px; background: var(--bg); border-radius: 4px; overflow: hidden; margin: 8px 0 6px; }
.rank-prog-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.rank-foot { font-size: .8rem; color: var(--accent); }
.rank-note { font-size: .76rem; color: var(--dim); margin-top: 2px; }

/* ===== リザルト: レーティング / 世界ランキング登録 ===== */
.rating-row { margin: 10px 0 2px; font-size: .95rem; }
.rating-row b { font-family: var(--mono); font-size: 1.1rem; color: var(--accent); }
.rating-row .dim { color: var(--dim); font-size: .85rem; }
.rankup-msg { margin: 6px 0; font-weight: 800; color: var(--gold); animation: pop .4s; }
@keyframes pop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.submit-box {
  margin: 14px 0 6px;
  padding: 14px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.submit-title { font-size: .9rem; font-weight: 700; margin-bottom: 10px; }
.submit-row { display: flex; gap: 8px; }
#nameInput {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-size: .95rem;
}
#nameInput:focus { outline: none; border-color: var(--accent); }
.submit-note { margin-top: 8px; font-size: .82rem; color: var(--dim); min-height: 18px; }
.submit-note.ok { color: var(--good); }
.submit-note.err { color: var(--bad); }
.wr-note { margin: 12px 0 6px; font-size: .84rem; color: var(--dim); }
.wr-note.ok { color: var(--good); font-weight: 700; }
.wide-btn { display: block; width: 100%; margin: 10px 0 4px; }

/* ===== 世界ランキング一覧 ===== */
.rk-selects { display: flex; gap: 8px; margin: 4px 0 8px; }
.rk-select {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-size: .9rem;
  font-family: inherit;
}
.rk-select:focus { outline: none; border-color: var(--accent); }
.rk-list { max-height: 52vh; overflow-y: auto; margin: 6px 0 4px; }
.rk-row {
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}
.rk-row .pos { font-family: var(--mono); color: var(--dim); text-align: center; }
.rk-row .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row .sc { font-family: var(--mono); font-weight: 800; color: var(--accent); }
.rk-row .kp { font-family: var(--mono); font-size: .74rem; color: var(--dim); }
.rk-row.top1 .pos { color: var(--gold); font-weight: 800; }
.rk-row.top2 .pos { color: #cfd6e6; font-weight: 800; }
.rk-row.top3 .pos { color: #e0a06a; font-weight: 800; }
.rk-row.me { background: rgba(63,240,216,.12); border-radius: 8px; }
.rk-empty { padding: 24px 10px; text-align: center; color: var(--dim); font-size: .88rem; }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 16px;
  text-align: center;
  color: var(--dim);
  font-size: .78rem;
}

/* スマホ用の案内バナー(タッチ端末でのみ表示) */
.touch-note {
  display: none;
  background: var(--accent2);
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: .85rem;
  font-weight: 700;
}
body.touch .touch-note { display: block; }
body.playing .touch-note { display: none; }

/* 画面内キーボードのタップ操作 */
.key {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.key.bad { background: var(--bad); border-color: var(--bad); color: #fff; }

/* プレイ中断ボタン(タッチ端末でのみ表示。PC は Esc) */
.quit-btn {
  display: none;
  width: 100%;
  max-width: 420px;
  margin: 12px auto 0;
  padding: 10px;
  font-size: .82rem;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
body.touch .quit-btn { display: block; }

@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
  .disp { font-size: 1.4rem; }
  .roma { font-size: 1.3rem; }
  .key { width: 30px; height: 34px; font-size: .72rem; }
  .key.wide { width: 44px; }

  /* タッチ端末: プレイ画面を1画面に収め、キーを大きく */
  body.touch.playing { overflow: hidden; height: 100dvh; }
  body.touch.playing .site-header,
  body.touch.playing .site-footer { display: none; }
  body.touch.playing .wrap {
    padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
    height: 100dvh;
    max-width: none;
  }
  body.touch #screen-play { display: flex; flex-direction: column; height: 100%; }
  body.touch #screen-play[hidden] { display: none; }
  body.touch #screen-play .stats { margin-bottom: 8px; }
  body.touch #screen-play .qcount { margin: 5px 0 8px; }
  body.touch #screen-play .card {
    flex: 1;
    margin-bottom: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
  }
  body.touch .keyboard { width: 100%; gap: 5px; }
  body.touch .kb-row { width: 100%; gap: 5px; }
  body.touch .kb-row:nth-child(2) { padding: 0 5%; }
  body.touch .kb-row:nth-child(3) { padding: 0 11%; }
  body.touch .key {
    width: auto;
    flex: 1;
    min-width: 0;
    height: 46px;
    font-size: 1.05rem;
    color: var(--text);
  }
  body.touch .quit-btn { margin-top: 8px; }
}