:root {
  --bg:        #FAF7F2;
  --bg2:       #F0EDE6;
  --text:      #1A1A2E;
  --muted:     #888;
  --correct:   #4A7C59;
  --present:   #C49A3C;
  --absent:    #9E9E9E;
  --key-bg:    #DDD8D0;
  --key-mod:   #C4BFB8;
  --accent:    #2C3E7A;
  --red:       #8B1A1A;
  --radius:    8px;
  --unit:      clamp(4px, 1vw, 6px);
  --kb-height: calc(var(--unit) * 70 + 26px);
  --header-h:  44px;
  --cell-size: clamp(32px, 10vw, 52px);
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
}
@media (min-width: 560px) {
  body { max-width: 900px; }
}

.hidden { display: none !important; }

/* ── Home ── */
#screen-home {
  width: 100%;
  padding: 32px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.home-title {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--accent);
}
.home-sub {
  font-size: .85rem;
  color: var(--muted);
  letter-spacing: .15em;
  margin-top: -18px;
}

.streak-bar {
  background: var(--bg2);
  border-radius: 999px;
  padding: 8px 24px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--accent);
}

.level-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.lvl-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  font-family: inherit;
}
.lvl-btn > div:first-child { text-align: center; }
.lvl-btn:active { transform: scale(.98); }
.lvl-btn.daily        { background: var(--red); }
.lvl-btn.daily5       { background: #5A3A8C; }
.lvl-btn.genre-food   { background: #C25E00; }
.lvl-btn.genre-animal { background: #2E6B3A; }
.lvl-btn.genre-place  { background: #1A4B8C; }

.lvl-name { font-size: 1.15rem; font-weight: 700; letter-spacing: .08em; }
.lvl-sub  { font-size: .72rem; opacity: .8; margin-top: 2px; }
.lvl-right {
  position: absolute;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.lvl-info   { font-size: .8rem; opacity: .85; }
.lvl-status { font-size: .75rem; opacity: .9; }

/* ── Home header row ── */
.home-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.help-btn {
  background: var(--bg2);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.help-btn:active { opacity: .7; }

/* ── Rules modal ── */
.rules-box { align-items: flex-start; }
.rules-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
  align-self: center;
  margin-bottom: 4px;
}
.rules-desc {
  font-size: .9rem;
  line-height: 1.7;
  text-align: center;
  width: 100%;
}
.rules-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.rules-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .88rem;
  line-height: 1.6;
  text-align: left;
}
.rules-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  margin-top: 2px;
}
.rules-colors {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  background: var(--bg2);
  border-radius: 10px;
  padding: 12px 14px;
}
.rules-color-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .86rem;
  text-align: left;
}
.rules-cell {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}
.rules-cell.kbs-correct { background: var(--correct); }
.rules-cell.kbs-present { background: var(--present); }
.rules-cell.kbs-absent  { background: var(--absent); }
.rules-example {
  width: 100%;
  background: var(--bg2);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left;
}
.rules-example-label {
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.rules-example-row {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}
.rules-example-hint {
  font-size: .8rem;
  color: var(--text);
  line-height: 1.5;
}

/* ── Home footer ── */
.home-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.footer-link {
  background: none;
  border: none;
  color: var(--muted);
  font-size: .75rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 2px;
}
.footer-link:hover { color: var(--text); }
.footer-sep { color: var(--muted); font-size: .75rem; }

/* ── Privacy policy modal ── */
.policy-box { align-items: flex-start; }
.policy-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
  align-self: center;
  margin-bottom: 4px;
}
.policy-body {
  font-size: .82rem;
  line-height: 1.75;
  color: var(--text);
  text-align: left;
  width: 100%;
}
.policy-body h3 {
  font-size: .85rem;
  font-weight: 700;
  margin: 12px 0 4px;
  color: var(--accent);
}
.policy-body p { margin-bottom: 4px; }

/* ── Contact (Google Form embed) ── */
.contact-box {
  max-width: 660px;
  padding: 20px 16px 16px;
}
.contact-iframe {
  width: 100%;
  height: 580px;
  border: none;
  border-radius: 8px;
}

/* ── Game screen ── */
#screen-game {
  display: flex;
  flex-direction: column;
  width: 100%;
  --max-rows: 6;
  --avail-h: calc(100dvh - var(--header-h) - var(--kb-height) - 22px);
  --cell-fit: calc((var(--avail-h) - (var(--max-rows) - 1) * 5px) / var(--max-rows));
  --cell-max-width: 9999px;
  --cell-size: min(calc(var(--unit) * 9), var(--cell-fit), var(--cell-max-width));
}

/* ── Bottom bar（keyboard + type input） ── */
#bottom-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-top: 1px solid var(--bg2);
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bg2);
  flex-shrink: 0;
}
.game-header-center { text-align: center; }
#game-mode-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
#game-mode  { font-weight: 700; font-size: 1rem; }
#candidate-count {
  font-size: .7rem; font-weight: 600;
  color: var(--accent);
  background: var(--bg2);
  border-radius: 999px;
  padding: 2px 8px;
}
#game-count { font-size: .78rem; color: var(--muted); }

.icon-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.2rem; padding: 4px 8px; color: var(--text);
}
.header-btns {
  display: flex;
  gap: 6px;
  align-items: center;
}
#btn-hint {
  background: var(--accent); color: #fff;
  border: none; border-radius: 6px;
  padding: 6px 12px; font-size: .82rem;
  cursor: pointer; font-family: inherit;
}
#btn-surrender {
  background: none; color: var(--muted);
  border: 1px solid var(--muted); border-radius: 6px;
  padding: 6px 10px; font-size: .82rem;
  cursor: pointer; font-family: inherit;
}

/* ── Type bar（PC専用のセル入力欄） ── */
#type-bar {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  border-left: 1px solid var(--bg2);
}
#type-cells {
  display: flex;
  gap: 5px;
}
#type-submit {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 20px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* ── Board ── */
#board-wrap {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  padding: 10px 8px;
}

#board {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  border: 2px solid #CCC;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell-size) * .5);
  font-weight: 700;
  transition: border-color .1s;
}
.cell-filled  { border-color: var(--text); }
.cell-current { border-color: var(--accent); border-width: 2px; }
.cell-current.cell-filled { border-color: var(--accent); }
.cell-revealed { border-color: transparent; color: #fff; }
.cell-cursor { border-color: var(--red) !important; border-width: 3px !important; cursor: pointer; }
.cell-current { cursor: pointer; }

.kbs-correct { background: var(--correct); }
.kbs-present { background: var(--present); }
.kbs-absent  { background: var(--absent); }

.cell-flip {
  animation: flip .75s ease forwards;
}
@keyframes flip {
  0%   { transform: scaleY(1); }
  50%  { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

.cell-shake {
  animation: shake .4s ease;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

/* ── Keyboard ── */
#kb-wrap {
  flex-shrink: 0;
  padding: 2px 3px 8px;
  background: var(--bg);
  --kb-key: calc(var(--unit) * 7);
}

#kb-label {
  font-size: .9rem;
  color: var(--muted);
  text-align: center;
  padding: 4px 0 2px;
  letter-spacing: .08em;
}

#keyboard {
  padding: 0 2px;
}

/* 10列×10行グリッド */
.kb-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
}

/* セクション区切り線（五十音 / 濁音） */
.kb-sep {
  height: 1px;
  background: var(--bg2);
  margin: 1px 0;
}

/* 各行：中央揃えで固定幅キーを並べる */
.kb-row10 {
  display: flex;
  gap: 1px;
  justify-content: center;
  width: 100%;
}

/* 基本キー（正方形） */
.kb-key {
  flex: none;
  width: var(--kb-key);
  height: var(--kb-key);
  background: var(--key-bg);
  border: none;
  border-radius: 3px;
  font-size: clamp(9px, 1.8vw, 13px);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: filter .1s;
  padding: 0;
}
.kb-key:active { filter: brightness(.82); }

/* スペーサー（正方形と同幅） */
.kb-spacer {
  flex: none;
  width: var(--kb-key);
  height: var(--kb-key);
  background: transparent;
  pointer-events: none;
}

/* ← と 確定：通常キー2個分＋1gapの幅で統一 */
.kb-mod    { background: var(--key-mod); width: calc(var(--kb-key) * 2 + 1px); }
.kb-submit { background: var(--accent); color: #fff; width: calc(var(--kb-key) * 2 + 1px); }

.kb-key.kbs-correct { background: var(--correct); color: #fff; }
.kb-key.kbs-present { background: var(--present); color: #fff; }
.kb-key.kbs-absent  { background: var(--absent);  color: #fff; }

/* ── Modals ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-box {
  background: var(--bg);
  border-radius: 14px;
  padding: 28px 24px;
  width: 100%; max-width: 360px;
  max-height: 88vh;
  overflow-y: auto;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}

/* Result */
#res-emoji  { font-size: 2.8rem; }
#res-status { font-size: 1.4rem; font-weight: 800; }
#res-answer { font-size: 1.6rem; font-weight: 700; letter-spacing: .1em; color: var(--accent); }
#res-score  { font-size: .9rem; color: var(--muted); }

.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

.btn-primary {
  background: var(--accent); color: #fff;
  border: none; border-radius: 8px;
  padding: 10px 22px; font-size: .95rem;
  font-family: inherit; font-weight: 600;
  cursor: pointer;
}
.btn-secondary {
  background: var(--bg2); color: var(--text);
  border: none; border-radius: 8px;
  padding: 10px 22px; font-size: .95rem;
  font-family: inherit; font-weight: 600;
  cursor: pointer;
}
.btn-share {
  background: #1DA1F2; color: #fff;
  border: none; border-radius: 8px;
  padding: 10px 22px; font-size: .95rem;
  font-family: inherit; font-weight: 600;
  cursor: pointer;
}

/* Trivia */
#res-trivia-wrap {
  background: linear-gradient(135deg, #EEF2FF 0%, #E8F4EB 100%);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 12px 16px;
  width: 100%;
  text-align: left;
}
.trivia-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .06em;
  margin-bottom: 6px;
}
#res-trivia {
  font-size: .88rem;
  line-height: 1.8;
  color: var(--text);
  min-height: 3em;
  text-align: left;
}
#res-trivia.loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-style: italic;
  min-height: 3em;
}
#res-trivia.loading::before {
  content: '';
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 2.5px solid #DDD;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: triviaSpinner .8s linear infinite;
}
.trivia-fadein {
  animation: triviaFadeIn .5s ease;
}
.trivia-empty {
  color: var(--muted);
  font-style: italic;
}
@keyframes triviaSpinner {
  to { transform: rotate(360deg); }
}
@keyframes triviaFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hint modal */
#ad-box {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  width: 100%;
}
.ad-mock {
  width: 100%; height: 140px;
  background: #E0E0E0;
  border-radius: 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: var(--muted); font-size: .9rem;
}
#ad-countdown {
  font-size: 2rem; font-weight: 800; color: var(--text);
}
#btn-skip {
  background: none; border: 1px solid var(--muted);
  border-radius: 6px; padding: 4px 14px;
  font-size: .8rem; cursor: pointer; font-family: inherit;
}

#hint-box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hint-label { font-size: .8rem; color: var(--muted); letter-spacing: .05em; }
#hint-text {
  font-size: 1.1rem; font-weight: 700;
  background: var(--bg2); border-radius: 8px;
  padding: 16px 20px; width: 100%;
}

/* ── Banner ad ── */
#banner-ad {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: #E8E8E8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  color: var(--muted);
  z-index: 50;
  border-top: 1px solid #CCC;
}
#banner-ad::before {
  content: '広告';
  position: absolute;
  top: 2px; left: 6px;
  font-size: .6rem;
  color: #AAA;
}

/* Toast */
#toast {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%);
  background: rgba(26,26,46,.88);
  color: #fff; border-radius: 999px;
  padding: 8px 22px; font-size: .9rem;
  pointer-events: none; z-index: 200;
  white-space: nowrap;
}

/* ── スマホ専用調整 ── */
@media (max-width: 559px) {
  :root {
    --kb-height: calc(clamp(300px, 95vw, 420px) + 26px);
  }
  #screen-game {
    --cell-size: min(calc(var(--unit) * 7.5), var(--cell-fit), var(--cell-max-width));
  }
  #kb-wrap {
    width: 100%;
    --kb-key: clamp(30px, 9.5vw, 42px);
  }
  .kb-key {
    font-size: calc(var(--kb-key) * 0.42);
  }
  .kb-mod {
    background: #D98080;
    color: #fff;
  }
}

/* ── PC layout（基本スタイルより後に置くこと） ── */
@media (min-width: 560px) {
  #kb-wrap {
    width: calc(var(--kb-key) * 10 + 21px);
    padding: 8px 4px;
    border-right: 1px solid var(--bg2);
  }
  #type-bar { display: flex; flex: 1; }
  .kb-row10 { justify-content: flex-start; }
}