:root {
  --sea-deep: #04121f; --sea: #0a2e44; --sea-mid: #0f4a5c; --teal: #1e7f7a; --foam: #bdf1e6;
  --gold: #f0c65a; --gold-deep: #c99a2e; --paper: #fbf5e6; --paper-line: #e6dcc3; --ink: #22302f; --ink-soft: #5d6b69;
  --glass: rgba(8, 36, 54, .72); --glass-line: rgba(189, 241, 230, .22);
  --yes: #3fb27f; --no: #e2574c; --na: #8aa0a6; --half: #f0a53a;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--sea-deep); color: #eaf7f4; font-family: "Zen Maru Gothic", system-ui, "Hiragino Sans", "Yu Gothic UI", sans-serif; overflow: hidden; }
button, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }

/* ---- 深海の背景 ---- */
#sea { position: fixed; inset: 0; overflow: hidden; background:
    radial-gradient(ellipse 70% 55% at 30% 0%, rgba(120, 220, 210, .28), transparent 70%),
    linear-gradient(180deg, #145c6c 0%, var(--sea-mid) 28%, var(--sea) 60%, var(--sea-deep) 100%); }
#sea .ray { position: absolute; top: -10%; width: 16%; height: 90%; background: linear-gradient(180deg, rgba(210, 255, 245, .16), transparent);
  transform-origin: top center; filter: blur(8px); animation: sway 9s ease-in-out infinite alternate; }
#sea .bubble { position: absolute; bottom: -40px; border-radius: 50%; border: 1.5px solid rgba(210, 255, 245, .45);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .05) 60%); animation: rise linear infinite; }
@keyframes sway { from { transform: rotate(-8deg); opacity: .6; } to { transform: rotate(6deg); opacity: 1; } }
@keyframes rise { to { transform: translate(var(--drift), -115vh); } }

#app { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto minmax(0, 1fr); height: 100vh; }

/* ---- ヘッダー ---- */
header { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 20px; }
.logo { display: flex; align-items: baseline; gap: 10px; }
.logo b { white-space: nowrap; font-size: 22px; font-weight: 900; letter-spacing: .06em; color: #fff; text-shadow: 0 2px 0 var(--teal), 0 0 18px rgba(189, 241, 230, .5); }
.logo small { font-size: 13px; color: var(--foam); opacity: .85; }
header .spacer { flex: 1; }
.hud-btn { white-space: nowrap; border: 1px solid var(--glass-line); background: var(--glass); color: #eaf7f4; border-radius: 999px; padding: 8px 16px; font-weight: 700; backdrop-filter: blur(6px); }
.hud-btn:hover { border-color: var(--foam); }
#stopBtn { display: none; }
body.running #stopBtn { display: inline-block; }

/* ---- ステージ(キャラクター) ---- */
#stage { position: relative; min-height: 0; overflow: hidden; }
#stage2d { position: absolute; inset: 0; }
#puppet { position: absolute; left: 50%; bottom: -3%; height: 100%; aspect-ratio: 1086 / 1448; transform-origin: 50% 100%;
  filter: drop-shadow(0 0 24px rgba(120, 230, 215, .25)); }
#puppet img { position: absolute; display: block; user-select: none; pointer-events: none; }
#puppet .base { inset: 0; width: 100%; height: 100%; }
#puppet .part { visibility: hidden; }
#puppet .expr { opacity: 0; transition: opacity .15s; }
#puppet .expr.on { opacity: 1; }

/* ---- 会話ウィンドウ(ノベルゲーム風) ---- */
#talk { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(760px, calc(100% - 32px)); }
#box { position: relative; background: linear-gradient(180deg, rgba(8, 40, 58, .9), rgba(4, 22, 36, .94)); border: 2px solid rgba(240, 198, 90, .55);
  border-radius: 18px; padding: 22px 22px 16px; min-height: 104px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 0 0 4px rgba(4, 22, 36, .6); }
#nameplate { position: absolute; top: -15px; left: 20px; background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #3a2a06;
  font-weight: 900; font-size: 14px; padding: 3px 16px; border-radius: 999px; letter-spacing: .1em; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
/* セリフ欄は2行分で固定し、長いときは最新の2行が見えるように送る */
#lineText { margin: 0; font-size: 19px; line-height: 1.7; height: 3.4em; overflow: hidden; color: #f4fbf9; }
#lineText:empty::before { content: "……"; color: rgba(234, 247, 244, .4); }
#boxFoot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
#indicator { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--foam); }
#indicator i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #5d7a80; }
#indicator.listening i { background: var(--yes); }
#indicator.hearing i { background: var(--yes); box-shadow: 0 0 0 6px rgba(63, 178, 127, .3); }
#indicator.thinking i { background: var(--gold); animation: blink 1s infinite; }
#indicator.speaking i { background: #6cc4ff; animation: blink .6s infinite; }
#indicator.connecting i { background: var(--gold); }
#indicator.muted i { background: var(--no); }
#micBtn { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--foam); padding: 2px 4px; font-size: 13px; font-weight: 700; }
#micBtn svg { width: 16px; height: 16px; }
#micBtn .slash { display: none; }
#micBtn .track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--yes); transition: background .2s;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
#micBtn .knob { position: absolute; top: 3px; left: 21px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: left .2s; }
#micBtn .state { min-width: 2.2em; text-align: left; }
#micBtn[aria-checked="false"] { color: #ffb4ad; }
#micBtn[aria-checked="false"] .slash { display: inline; }
#micBtn[aria-checked="false"] .track { background: rgba(255, 255, 255, .22); }
#micBtn[aria-checked="false"] .knob { left: 3px; }
#micBtn:focus-visible .track { outline: 2px solid var(--foam); outline-offset: 2px; }
@keyframes blink { 50% { opacity: .3; } }
#boxFoot .spacer { flex: 1; }
#giveup { border: 1px solid rgba(226, 87, 76, .6); background: rgba(226, 87, 76, .12); color: #ffb4ad; border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 700; }
#giveup:disabled { opacity: .35; }

#toast { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 700;
  padding: 8px 18px; border-radius: 12px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: calc(100% - 32px); z-index: 20; }
#toast.show { opacity: 1; }
#toast.err { background: var(--no); color: #fff; }

/* ---- 右パネル ---- */
#side { display: flex; flex-direction: column; gap: 14px; padding: 4px 20px 20px 4px; min-height: 0; }
#side > * { flex-shrink: 0; }

/* 問題カード: 出題されるまでは伏せておく */
#card { position: relative; perspective: 1200px; }
#card .inner { display: grid; transition: transform .8s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; }
#card.revealed .inner { transform: rotateY(180deg); }
/* 出題の前後で大きさが変わらないよう、高さを固定する。長い問題文はカードの中だけスクロールする */
#card .face { grid-area: 1 / 1; height: 220px; backface-visibility: hidden; border-radius: 18px; padding: 18px 20px; }
#card .back { overflow-y: auto; }
#card .front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  background: repeating-linear-gradient(45deg, rgba(240, 198, 90, .08) 0 12px, transparent 12px 24px), linear-gradient(160deg, #134a5a, #0a2c40);
  border: 2px solid rgba(240, 198, 90, .6); }
#card .front .q { font-size: 64px; font-weight: 900; color: var(--gold); line-height: 1; text-shadow: 0 0 20px rgba(240, 198, 90, .5); animation: bob 2.4s ease-in-out infinite; }
#card .front .label { font-size: 13px; letter-spacing: .12em; color: var(--foam); }
#card .front .wait { font-size: 14px; color: rgba(234, 247, 244, .7); }
.gold-btn { border: 0; border-radius: 999px; padding: 10px 26px; font-size: 16px; font-weight: 900; letter-spacing: .08em; color: #3a2a06; white-space: nowrap;
  background: linear-gradient(180deg, #ffe08a, var(--gold) 45%, var(--gold-deep)); box-shadow: 0 4px 0 #8a6618, 0 8px 16px rgba(0, 0, 0, .35); transition: filter .15s; }
.gold-btn:hover { filter: brightness(1.06); }
.gold-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a6618; }
#presentBtn { margin-top: 4px; }
header .gold-btn { padding: 8px 22px; }
@keyframes bob { 50% { transform: translateY(-6px); } }
#card .back { transform: rotateY(180deg); background: var(--paper); color: var(--ink); border: 2px solid var(--gold-deep);
  box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--paper-line); }
#card .no { font-size: 12px; font-weight: 900; letter-spacing: .15em; color: var(--teal); }
#card h2 { margin: 2px 0 10px; font-size: 19px; font-weight: 900; }
#card .text { margin: 0; font-size: 15px; line-height: 1.85; }

.panel { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 18px; padding: 14px 16px; backdrop-filter: blur(6px); }
.panel h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .12em; color: var(--foam); font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
.panel h3 .right { margin-left: auto; letter-spacing: 0; font-size: 13px; color: #fff; }
.panel h3 .right b { font-size: 22px; color: var(--gold); margin: 0 2px; }
#remain.warn b { color: var(--no); }

/* 残り回数: デフォルメしたカメが1匹ずつ眠っていく(色が抜けて小さくなる) */
#pips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px 6px; }
#pips svg { display: block; width: 100%; height: auto; overflow: visible; transition: opacity .4s, filter .4s, transform .4s; }
#pips svg.used { opacity: .28; filter: grayscale(1); transform: scale(.82) translateY(2px); }
#pips svg.next { animation: nod 2.4s ease-in-out infinite; }
@keyframes nod { 50% { transform: rotate(-4deg); } }

#historyBtn { position: relative; display: block; width: 100%; text-align: left; color: inherit; font: inherit; padding-right: 38px; transition: border-color .2s, background .2s; }
#historyBtn:hover { border-color: var(--foam); background: rgba(12, 52, 74, .8); }
#historyBtn h3 { margin-bottom: 8px; }
/* 押すと記録の一覧が開くことを示す印 */
#historyBtn .chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 26px; line-height: 1; color: var(--gold); }
/* 記録が増えたとき: 枠がふわっと光り、件数が跳ねる */
#historyBtn.flash { animation: flash 1.2s ease-out; }
#historyBtn.flash #historyCount { animation: hop .5s ease-out; }
@keyframes flash { 0% { border-color: var(--gold); box-shadow: 0 0 0 0 rgba(240, 198, 90, .6), 0 0 18px rgba(240, 198, 90, .55); } 100% { box-shadow: 0 0 0 10px rgba(240, 198, 90, 0), 0 0 0 rgba(240, 198, 90, 0); } }
@keyframes hop { 40% { transform: translateY(-5px) scale(1.2); } }
#historyCount { background: rgba(255, 255, 255, .12); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; letter-spacing: 0; }
#latest { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: 14px; line-height: 1.45; min-height: 26px; }
#latest .q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#latest .empty { color: rgba(234, 247, 244, .55); }

.game-dialog { border: 1px solid var(--glass-line); border-radius: 20px; padding: 0; width: min(560px, calc(100% - 32px)); max-height: min(640px, calc(100vh - 48px));
  background: linear-gradient(180deg, #0c3a50, #06202f); color: #eaf7f4; box-shadow: 0 16px 50px rgba(0, 0, 0, .6); }
.game-dialog[open] { display: flex; flex-direction: column; }
.game-dialog::backdrop { background: rgba(4, 18, 31, .65); backdrop-filter: blur(2px); }
.game-dialog .head { display: flex; align-items: center; gap: 10px; padding: 16px 20px 12px; border-bottom: 1px solid var(--glass-line); }
.game-dialog h2 { margin: 0; font-size: 18px; font-weight: 900; }
.game-dialog .close { margin-left: auto; border: 0; background: rgba(255, 255, 255, .1); color: #fff; border-radius: 999px; width: 34px; height: 34px; font-size: 18px; }
.game-dialog .body { padding: 14px 20px 20px; overflow-y: auto; }
#restartDialog { width: min(400px, calc(100% - 32px)); }
.confirm { padding: 26px 24px 22px; text-align: center; }
.confirm-text { margin: 0 0 22px; font-size: 17px; font-weight: 700; line-height: 1.7; }
.confirm-actions { display: flex; justify-content: center; gap: 14px; }
.confirm-actions .hud-btn { padding: 10px 26px; font-size: 16px; }
.howto { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.howto li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.7; }
.howto .num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 900; color: #3a2a06;
  background: linear-gradient(180deg, #ffe08a, var(--gold-deep)); }
.howto b { color: var(--gold); }
.howto li { align-items: center; font-size: 16px; }
.howto-lead { margin: 0 0 16px; font-size: 16px; line-height: 1.8; }
.howto-lead b { color: var(--gold); }
/* 遊び方の文中に置く、マイクのスイッチの見本(押せない) */
.mini-switch { display: inline-flex; align-items: center; gap: 5px; margin: 0 6px; padding: 2px 8px; vertical-align: -5px;
  border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--foam); }
.mini-switch svg { width: 15px; height: 15px; }
.mini-switch .track { position: relative; width: 34px; height: 19px; border-radius: 999px; background: var(--yes); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
.mini-switch .knob { position: absolute; top: 2.5px; left: 17.5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.howto-note { margin: 16px 0 0; font-size: 14px; color: rgba(234, 247, 244, .7); }
.title-links { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 22px; }
.title-links .sub-btn { margin-top: 0; }
#history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#history li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-size: 14px; line-height: 1.45;
  background: rgba(255, 255, 255, .06); border-radius: 10px; padding: 6px 8px; animation: pop .3s ease-out; }
#history .n { font-size: 12px; color: var(--foam); opacity: .7; text-align: right; font-variant-numeric: tabular-nums; }
#history .stamp, #latest .stamp { font-size: 12px; font-weight: 900; padding: 3px 9px; border-radius: 999px; white-space: nowrap; color: #fff; }
.stamp.yes { background: var(--yes); } .stamp.no { background: var(--no); } .stamp.na { background: var(--na); } .stamp.half { background: var(--half); }
#history li.attempt { border: 1px dashed rgba(240, 198, 90, .5); }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }
#historyEmpty { margin: 0; font-size: 14px; color: rgba(234, 247, 244, .55); }

/* ---- タイトル画面・結果画面 ---- */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; z-index: 10; background: radial-gradient(ellipse at center, rgba(4, 18, 31, .55), rgba(4, 18, 31, .88));
  backdrop-filter: blur(3px); animation: fade .3s; }
.overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.sheet { text-align: center; padding: 28px 24px; max-width: min(560px, calc(100% - 32px)); }
.title-sub { font-size: 15px; letter-spacing: .3em; color: var(--foam); margin: 0 0 6px; }
.title-main { margin: 0; font-size: clamp(40px, 7vw, 72px); font-weight: 900; line-height: 1.1; color: #fff; letter-spacing: .04em;
  text-shadow: 0 4px 0 var(--teal), 0 8px 0 rgba(4, 18, 31, .6), 0 0 40px rgba(189, 241, 230, .45); }
.title-by { margin: 14px 0 30px; font-size: 15px; color: #eaf7f4; }
.title-by b { color: var(--gold); }
.sound-note { margin: 18px 0 0; font-size: 13px; color: rgba(234, 247, 244, .75); }
.big-btn { border: 0; border-radius: 999px; padding: 16px 44px; font-size: 20px; font-weight: 900; letter-spacing: .1em; color: #3a2a06;
  background: linear-gradient(180deg, #ffe08a, var(--gold) 45%, var(--gold-deep)); box-shadow: 0 6px 0 #8a6618, 0 12px 24px rgba(0, 0, 0, .4); transition: transform .1s; }
.big-btn:hover { transform: translateY(-2px); }
.big-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #8a6618, 0 6px 12px rgba(0, 0, 0, .4); }
.sub-btn { margin-top: 18px; background: none; border: 0; color: var(--foam); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.rules { margin: 22px auto 0; font-size: 13px; line-height: 1.9; color: rgba(234, 247, 244, .75); }

#resultTitle { margin: 0; font-size: clamp(44px, 8vw, 80px); font-weight: 900; color: var(--gold); text-shadow: 0 4px 0 #8a6618, 0 0 40px rgba(240, 198, 90, .5); }
#resultTitle.lose { color: #fff; text-shadow: 0 4px 0 var(--teal); }
#resultStats { margin: 10px 0 18px; font-size: 16px; color: var(--foam); }
#resultAnswer { background: var(--paper); color: var(--ink); border-radius: 16px; padding: 14px 18px; font-size: 15px; line-height: 1.85; text-align: left; margin: 0 0 24px; }
#resultAnswer::before { content: "答え"; display: block; font-size: 12px; font-weight: 900; letter-spacing: .15em; color: var(--teal); margin-bottom: 4px; }
#resultAnswer:empty { display: none; }

/* ---- 開発者向けの記録(画面には出さない。試験のときに読む) ---- */
#dev { display: none; }

@media (max-height: 760px) and (min-width: 901px) {
  #card .face { height: 190px; padding: 14px 18px; }
  #card .front .q { font-size: 48px; }
  #card h2 { margin-bottom: 6px; font-size: 17px; }
  #card .text { font-size: 14px; line-height: 1.7; }
  #pips { gap: 2px 4px; }
  .panel { padding: 10px 14px; }
}
@media (max-width: 900px) {
  body { overflow-x: hidden; overflow-y: auto; }
  header { padding: 10px 16px; gap: 8px; }
  .logo b { font-size: 18px; }
  .hud-btn { padding: 6px 12px; font-size: 14px; }
  header .gold-btn { padding: 6px 14px; font-size: 14px; }
  #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 64vh auto; height: auto; min-height: 100vh; }
  #side { padding: 4px 16px 20px; }
  .logo small { display: none; }
  #lineText { font-size: 16px; }
  #box { padding: 20px 16px 12px; min-height: 90px; }
}

/* ---- スマホ(縦長): スクロールせずに1画面に収める ----
   上から ヘッダー / 問題カード / 残り回数と質問の記録 / キャラクターと会話ウィンドウ */
@media (max-width: 600px) {
  body { overflow: hidden; }
  #app { grid-template-rows: auto auto minmax(0, 1fr); height: 100vh; height: 100dvh; min-height: 0; }
  header { padding: 8px 12px; gap: 6px; }
  .logo b { font-size: 16px; letter-spacing: .02em; }
  .hud-btn { padding: 5px 10px; font-size: 13px; }
  header .gold-btn { padding: 5px 12px; font-size: 13px; box-shadow: 0 3px 0 #8a6618; }

  #side { grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 0 12px 8px; }
  #gameSide { grid-column: 1 / -1; }
  #stage { grid-row: 3; }

  /* 問題カード: 出題前は1行の帯、出題後は問題文だけを小さめに */
  #card .face { height: 142px; padding: 10px 14px; border-radius: 14px; }
  #card .front { flex-direction: row; justify-content: flex-start; gap: 10px; text-align: left; }
  #card .front .q { font-size: 30px; animation: none; }
  #card .front .label { display: none; }
  #card .front .wait { flex: 1; font-size: 13px; }
  #card .front:has(#presentBtn:not([hidden])) .wait { display: none; }
  #card .front:has(#presentBtn:not([hidden])) { justify-content: space-between; }
  #presentBtn { margin: 0; padding: 8px 16px; font-size: 14px; }
  #card h2 { margin: 0 0 4px; font-size: 15px; }
  #card .text { font-size: 14px; line-height: 1.65; }

  .panel { padding: 8px 10px; border-radius: 14px; }
  .panel h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: .04em; gap: 4px; }
  .panel h3 .right { font-size: 11px; }
  .panel h3 .right b { font-size: 16px; }
  #pips { gap: 0 2px; }
  #historyBtn h3 { margin-bottom: 6px; }
  #historyBtn { padding-right: 30px; }
  #historyBtn .chev { right: 9px; font-size: 22px; }
  #latest { font-size: 12px; min-height: 20px; gap: 4px; }
  #latest .stamp { font-size: 11px; padding: 2px 7px; }

  /* キャラクターは上半身を大きく見せ、会話ウィンドウを下に重ねる */
  #puppet { height: 128%; bottom: auto; top: 0; }
  #talk { bottom: 10px; width: calc(100% - 20px); }
  #box { padding: 16px 14px 10px; min-height: 0; border-radius: 16px; }
  #nameplate { font-size: 12px; top: -12px; left: 14px; padding: 2px 12px; }
  #lineText { font-size: 15px; }
  #boxFoot { gap: 8px; margin-top: 6px; }
  #micBtn { gap: 6px; font-size: 12px; }
  #indicator { font-size: 12px; gap: 6px; }
  #giveup { padding: 5px 12px; font-size: 12px; }
}

/* とても狭いスマホでは、問題文が4行以上になるので、カードを少し高くする */
@media (max-width: 340px) {
  #card .face { height: 162px; }
}