* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root{
  --bg:#0e1220;
  --panel:#171d31;
  --panel2:#1f2740;
  --ink:#e8ecf6;
  --sub:#8a93ad;
  --brand:#38e8b0;      /* ネオングリーン */
  --brand2:#3aa0ff;     /* ネオンブルー */
  --accent:#ffb020;     /* ヒント／警告 */
  --bad:#ff5d6c;
  --cell:#2a3350;
}

body {
  font-family:-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN",sans-serif;
  background:radial-gradient(1000px 500px at 50% -10%, #1b2340 0, var(--bg) 60%);
  color:var(--ink); margin:0;
  display:flex; flex-direction:column; align-items:center;
  min-height:100vh; padding:16px; user-select:none;
}

.emoji { font-family:"Noto Emoji", sans-serif; font-weight:700; vertical-align:middle; }

#game { width:100%; display:flex; flex-direction:column; align-items:center; }

/* ===== 問題マス ===== */
#board { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; width:100%; max-width:360px; margin-top:12px; }
.cell { aspect-ratio:1; background:var(--cell); border-radius:10px; transition:background .3s; }
.cell.correct{ background:var(--brand); box-shadow:0 0 12px rgba(56,232,176,.5); }
.cell.missed { background:var(--bad); box-shadow:0 0 12px rgba(255,93,108,.4); }
.cell.current{ outline:3px solid var(--accent); outline-offset:1px; }

/* ===== HUD ===== */
#hud { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:360px; margin:20px 0 4px; }
#timer { font-size:34px; font-weight:800; color:var(--ink); }
#timer small { font-size:16px; color:var(--sub); }
.icon-btn { background:none; border:none; font-size:22px; color:var(--sub); cursor:pointer; padding:8px; }

#timer.warn {
  color:var(--bad);
  display:inline-block; transform-origin:center;
  animation:heartbeat 1s ease-in-out infinite;
  text-shadow:0 0 14px rgba(255,93,108,.6);
}
@keyframes heartbeat {
  0%{transform:scale(1)} 15%{transform:scale(1.18)} 30%{transform:scale(1)}
  45%{transform:scale(1.12)} 60%{transform:scale(1)} 100%{transform:scale(1)}
}

/* ===== 正解表示 ===== */
#answer { min-height:52px; font-size:22px; font-weight:800; letter-spacing:2px; color:var(--brand); margin-top:10px; text-align:center; line-height:1.25; text-shadow:0 0 16px rgba(56,232,176,.35); }
#answer .ja { font-size:14px; color:#7fe6c6; letter-spacing:0; text-shadow:none; }
#answer .intended { font-size:15px; color:var(--brand2); font-weight:700; letter-spacing:0; }
#answer .intended .ja { color:#8fc4ff; }

/* ===== 入力行 ===== */
#typedRow { display:flex; align-items:center; justify-content:center; gap:12px; height:46px; margin-top:6px; }
#typed { font-size:30px; font-weight:800; letter-spacing:6px; color:var(--brand2); min-width:1px; text-shadow:0 0 14px rgba(58,160,255,.5); }
#eraser { display:none; background:none; border:none; cursor:pointer; font-size:22px; color:var(--sub); padding:4px; }
#eraser.show { display:inline; }

#hint { min-height:22px; font-size:15px; color:var(--accent); margin:4px 0; }

/* ===== 文字ボタン ===== */
#letters {
  display:flex; flex-direction:column; align-items:center;
  gap:12px; width:auto; margin:10px auto 0;
  --size: clamp(52px, 18vw, 76px);
  --gap: 12px;
}
.letter-row { display:flex; gap:var(--gap); justify-content:center; }

.letter {
  width:var(--size); height:var(--size);
  border-radius:50%; background:var(--panel2);
  border:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--size) * 0.4); font-weight:800; color:var(--ink); cursor:pointer;
  transition:transform .1s, background .15s, color .15s, box-shadow .15s;
}
.letter:active { transform:scale(.92); }
.letter.used {
  background:linear-gradient(145deg,var(--brand2),#2f7fe0); color:#fff;
  box-shadow:0 0 16px rgba(58,160,255,.55);
}

.letter.enter {
  opacity:0; animation:letterPop .28s ease-out forwards; animation-delay:var(--d, 0s);
}
@keyframes letterPop {
  0%{opacity:0; transform:scale(.4) translateY(8px)} 100%{opacity:1; transform:scale(1) translateY(0)}
}

/* ===== フッター ===== */
#footer { margin-top:22px; text-align:center; }
#skipBtn { padding:8px 16px; border:none; border-radius:8px; background:var(--panel2); color:var(--sub); font-size:14px; cursor:pointer; }
#msg { margin-top:12px; font-size:15px; color:var(--sub); min-height:20px; text-align:center; }

/* ===== リザルト ===== */
#result { display:none; width:100%; max-width:460px; margin-top:10px; flex-direction:column; align-items:center; }
#resultBoard { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; width:100%; max-width:300px; margin:10px 0 4px; }
#resultBoard .cell { aspect-ratio:1; border-radius:8px; }
#scoreLine { font-size:26px; font-weight:900; text-align:center; margin:14px 0 6px; color:var(--ink); }

#resultCode {
  font-size:13px; color:var(--sub); margin:0 0 16px; letter-spacing:1px;
}
#resultCode b { color:var(--brand); font-size:16px; letter-spacing:2px; font-variant-numeric:tabular-nums; }

#resultList { width:100%; }
.res-row { display:flex; align-items:baseline; justify-content:space-between; padding:12px 4px; border-bottom:1px solid rgba(255,255,255,.06); }
.res-row .word { font-size:18px; font-weight:800; color:var(--ink); }
.res-row .word .intended { font-size:15px; color:var(--brand2); font-weight:700; margin-left:6px; }
.res-row .ja { display:block; font-size:12px; color:var(--sub); margin-top:2px; font-weight:400; }
.res-row .sec { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
.res-row .sec.ng { color:var(--bad); }

#resultBoard .cell.reveal {
  opacity:0; animation:cellReveal .3s ease-out forwards; animation-delay:var(--d, 0s);
}
@keyframes cellReveal { 0%{opacity:0; transform:scale(.5)} 100%{opacity:1; transform:scale(1)} }

#scoreLine.floatUp, #resultCode.floatUp, #resultList .res-row.floatUp {
  opacity:0; animation:floatUp .45s ease-out forwards; animation-delay:var(--d, 0s);
}
@keyframes floatUp { 0%{opacity:0; transform:translateY(24px)} 100%{opacity:1; transform:translateY(0)} }

#resultBtns { display:flex; gap:12px; margin:24px auto; }
#resultBtns button { padding:12px 22px; border:none; border-radius:24px; font-size:15px; font-weight:800; cursor:pointer; }
#homeBtn { background:var(--panel2); color:var(--ink); }
#restartBtn { background:linear-gradient(145deg,var(--brand),#22c79a); color:#04231a; box-shadow:0 6px 18px rgba(56,232,176,.35); }
#resultBtns button:active { transform:scale(.95); }

#loading { margin-top:40px; color:var(--sub); font-size:16px; text-align:center; line-height:1.6; }

/* ===== ホーム ===== */
#home {
  width:100%; max-width:380px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; margin-top:6vh;
  animation:floatUp .5s ease-out both;
}
#homeTitle {
  font-size:52px; font-weight:900; line-height:1; margin:0;
  letter-spacing:2px; color:var(--ink);
}
#homeTitle span {
  display:block; color:var(--brand);
  text-shadow:0 0 22px rgba(56,232,176,.55);
}
#homeDesc { font-size:14px; color:var(--sub); line-height:1.8; margin:16px 0 24px; }

.section-label { font-size:11px; letter-spacing:3px; color:var(--sub); margin-bottom:10px; font-weight:700; }

#modeSection { width:100%; margin-bottom:24px; }
#modeList { display:flex; flex-direction:column; gap:8px; width:100%; }
.mode-btn {
  padding:14px 16px; border:1px solid rgba(255,255,255,.08); border-radius:12px;
  background:var(--panel); color:var(--ink); font-size:15px; font-weight:700;
  cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  transition:background .15s, border-color .15s, transform .1s;
}
.mode-btn:active { transform:scale(.98); }
.mode-btn .count { font-size:12px; color:var(--sub); font-weight:600; }
.mode-btn.selected {
  background:var(--panel2); border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand), 0 0 16px rgba(56,232,176,.25) inset;
}
.mode-btn.selected .count { color:var(--brand); }
.mode-btn.empty { opacity:.4; cursor:not-allowed; }

#startBtn {
  padding:16px 56px; border:none; border-radius:28px;
  background:linear-gradient(145deg,var(--brand),#22c79a); color:#04231a;
  font-size:20px; font-weight:900; letter-spacing:1px; cursor:pointer;
  box-shadow:0 8px 22px rgba(56,232,176,.4); transition:transform .12s, opacity .2s;
}
#startBtn:active:not(:disabled){ transform:scale(.95); }
#startBtn:disabled{ background:#3a4260; color:#7b83a0; box-shadow:none; cursor:default; }

#codeSection { width:100%; margin-top:28px; padding-top:24px; border-top:1px solid rgba(255,255,255,.07); }
#codeRow { display:flex; gap:8px; width:100%; }
#codeInput {
  flex:1; padding:12px 14px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12); background:var(--panel);
  color:var(--ink); font-size:16px; letter-spacing:2px; text-align:center; text-transform:uppercase;
}
#codeInput::placeholder { color:#5a627e; letter-spacing:1px; text-transform:none; }
#codeInput:focus { outline:none; border-color:var(--brand2); box-shadow:0 0 12px rgba(58,160,255,.3); }
#codeBtn {
  padding:12px 20px; border:none; border-radius:10px;
  background:var(--brand2); color:#fff; font-size:15px; font-weight:800; cursor:pointer;
}
#codeBtn:active { transform:scale(.95); }
#codeMsg { min-height:18px; font-size:13px; color:var(--bad); margin-top:8px; }