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

:root {
  --bg: #0a0e17; --bg2: #111827; --surface: #1a2035;
  --border: rgba(56, 189, 248, .15); --border2: rgba(56, 189, 248, .08);
  --text: #e2e8f0; --text-mid: #94a3b8; --text-dim: #64748b;
  --cyan: #38bdf8; --cyan-dim: rgba(56, 189, 248, .12);
  --red: #f43f5e; --red-dim: rgba(244, 63, 94, .12);
  --green: #34d399; --green-dim: rgba(52, 211, 153, .12);
  --amber: #fbbf24; --amber-dim: rgba(251, 191, 36, .12);
  --glow: 0 0 20px rgba(56, 189, 248, .08);
}

body { background: var(--bg); color: var(--text); font-family: 'Noto Sans JP', sans-serif; min-height: 100vh; overflow-x: hidden }
body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(56,189,248,.04) 0%, transparent 60%); pointer-events: none; z-index: 0 }
#app { max-width: 660px; margin: 0 auto; padding: 16px 14px 48px; position: relative; z-index: 1 }

.hdr { text-align: center; padding: 28px 0 20px }
.hdr-logo { display: inline-block; font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: .12em; line-height: 1; text-transform: uppercase }
.hdr-logo span { color: var(--cyan) }
.hdr-sub { font-family: 'Space Mono', monospace; font-size: .65rem; color: var(--text-dim); letter-spacing: .3em; text-transform: uppercase; margin-top: 6px }
.hdr-line { width: 48px; height: 1px; background: var(--cyan); margin: 14px auto 0; box-shadow: 0 0 8px rgba(56,189,248,.3) }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 20px; margin-bottom: 14px; box-shadow: var(--glow); position: relative }
.card::after { display: none }
.card-title { font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif; font-size: .9rem; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 7px; text-transform: uppercase; letter-spacing: .06em; color: var(--text) }
.card-title::before { content: '//'; color: var(--cyan); font-family: 'Space Mono', monospace; font-size: .7rem }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 18px; font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif; font-size: .85rem; font-weight: 600; cursor: pointer; border-radius: 4px; transition: all .15s; border: none; letter-spacing: .06em; text-transform: uppercase }
.btn-ink { background: var(--cyan); color: var(--bg) }
.btn-ink:hover { background: #7dd3fc; transform: translateY(-1px); box-shadow: 0 0 16px rgba(56,189,248,.3) }
.btn-out { background: transparent; color: var(--cyan); border: 1px solid var(--border) }
.btn-out:hover { background: var(--cyan-dim) }
.btn-gold { background: var(--amber); color: var(--bg); font-size: .78rem; padding: 6px 12px }
.btn:disabled { opacity: .3; cursor: not-allowed; transform: none !important }
.btn-full { width: 100%; display: flex }

.fg { margin-bottom: 12px }
.fl { display: block; font-size: .72rem; color: var(--text-dim); margin-bottom: 4px; letter-spacing: .08em; text-transform: uppercase; font-family: 'Space Mono', monospace }
.fi, .fs { width: 100%; padding: 9px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; font-family: 'Noto Sans JP', sans-serif; font-size: .92rem; color: var(--text); outline: none; transition: border-color .2s }
.fi:focus, .fs:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-dim) }
.fs { appearance: none; -webkit-appearance: none }
.fta { width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; font-family: 'Noto Sans JP', sans-serif; font-size: .95rem; color: var(--text); outline: none; resize: vertical; transition: border-color .2s; line-height: 1.85 }
.fta:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-dim) }

.ptag { background: var(--bg); border: 1px solid var(--border2); border-radius: 20px; padding: 4px 11px; font-size: .8rem; display: inline-flex; align-items: center; gap: 4px; color: var(--text-mid) }
.ptag.host { border-color: var(--cyan); color: var(--cyan) }
.ptag.active-turn { border-color: var(--green); background: var(--green-dim); color: var(--green); font-weight: 600 }
.ptag.done-turn { opacity: .4 }

.rid { font-family: 'Space Mono', monospace; font-size: 2rem; font-weight: 700; letter-spacing: .4em; color: var(--cyan); text-align: center; padding: 6px 0; text-shadow: 0 0 12px rgba(56,189,248,.3) }

.ctx { background: rgba(56,189,248,.04); border-left: 2px solid var(--cyan); padding: 12px 14px; margin-bottom: 14px; border-radius: 0 4px 4px 0 }
.ctx-lbl { font-size: .65rem; color: var(--text-dim); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 4px; font-family: 'Space Mono', monospace }
.ctx-ttl { font-size: 1.05rem; font-weight: 700; color: var(--text) }
.ctx-pg { font-size: .9rem; line-height: 1.9; color: var(--text-mid); white-space: pre-wrap; margin-top: 8px }

.tbar { width: 100%; height: 3px; background: var(--border2); border-radius: 2px; margin-bottom: 14px; overflow: hidden }
.tfill { height: 100%; background: var(--cyan); transition: width 1s linear; border-radius: 2px; box-shadow: 0 0 8px rgba(56,189,248,.4) }
.ttxt { text-align: right; font-size: .72rem; color: var(--text-dim); margin-bottom: 6px; font-variant-numeric: tabular-nums; font-family: 'Space Mono', monospace }

.badge-ok { display: inline-flex; align-items: center; gap: 4px; background: var(--green); color: var(--bg); padding: 3px 9px; border-radius: 4px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em }
.badge-wait { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; padding: 3px 9px; border-radius: 4px; background: var(--cyan-dim); color: var(--cyan); font-family: 'Space Mono', monospace }
.sdot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; box-shadow: 0 0 6px rgba(52,211,153,.5) }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

/* 五十音表 — タッチパネル風・縦書き（右=あ行、左=わ行） */
.gojuon { display: grid; grid-template-rows: repeat(5, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin-bottom: 14px; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px }
.gojuon-cell { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: var(--surface); border: 1px solid var(--border2); border-radius: 4px; font-family: 'Noto Sans JP', sans-serif; color: var(--text); transition: all .2s; cursor: default }
.gojuon-cell.used { background: var(--red-dim); color: var(--red); border-color: rgba(244,63,94,.25); position: relative }
.gojuon-cell.used::after { content: '×'; position: absolute; font-size: .6rem; top: 2px; right: 3px; color: var(--red); font-family: 'Space Mono', monospace }
.gojuon-cell.empty { border-color: transparent; background: transparent }

/* ターン表示 */
.turn-order { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px }
.turn-chip { padding: 5px 12px; border-radius: 4px; font-size: .75rem; background: var(--bg); border: 1px solid var(--border2); color: var(--text-mid); font-family: 'Space Grotesk', 'Noto Sans JP', sans-serif }
.turn-chip.current { background: var(--cyan); color: var(--bg); font-weight: 700; border-color: var(--cyan); box-shadow: 0 0 10px rgba(56,189,248,.3) }
.turn-chip.finished { opacity: .35 }

/* 結果・履歴チェーン */
.history-chain { margin-bottom: 18px }
.history-item { padding: 12px 16px; border-left: 2px solid var(--border); margin-bottom: 6px; background: var(--surface); border-radius: 0 4px 4px 0 }
.history-item.timeout { border-left-color: var(--amber); background: var(--amber-dim) }
.history-item .h-player { font-size: .68rem; color: var(--text-dim); margin-bottom: 4px; font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .06em }
.history-item .h-text { font-size: .95rem; line-height: 1.8 }
.history-arrow { text-align: center; color: var(--text-dim); font-size: .7rem; margin: 2px 0; font-family: 'Space Mono', monospace }

.similarity { text-align: center; margin: 24px 0 }
.similarity-score { font-family: 'Space Mono', monospace; font-size: 3rem; font-weight: 700; color: var(--cyan); text-shadow: 0 0 20px rgba(56,189,248,.3) }
.similarity-label { font-size: .72rem; color: var(--text-dim); margin-top: 6px; text-transform: uppercase; letter-spacing: .15em; font-family: 'Space Mono', monospace }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.tc { text-align: center }
.sm { font-size: .82rem }
.muted { color: var(--text-dim) }
.mt8 { margin-top: 8px }
.mt12 { margin-top: 12px }
.mb8 { margin-bottom: 8px }
.mb12 { margin-bottom: 12px }

/* DELETE WHACK ミニゲーム */
.whack-wrap { text-align: center }
.whack-score { font-family: 'Space Mono', monospace; font-size: .72rem; color: var(--cyan); letter-spacing: .1em; margin-bottom: 8px }
.whack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 240px; margin: 0 auto }
.whack-cell { aspect-ratio: 1; background: var(--bg); border: 1px solid var(--border2); border-radius: 6px; cursor: pointer; transition: all .1s; display: flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-size: .6rem; color: transparent; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation }
.whack-cell.lit { background: var(--cyan-dim); border-color: var(--cyan); box-shadow: 0 0 14px rgba(56,189,248,.35); color: var(--cyan); animation: whack-pulse .3s ease }
.whack-cell.hit { background: var(--green-dim); border-color: var(--green); color: var(--green); box-shadow: 0 0 14px rgba(52,211,153,.35) }
.whack-cell.miss { background: var(--red-dim); border-color: var(--red); box-shadow: 0 0 8px rgba(244,63,94,.2) }
@keyframes whack-pulse { 0% { transform: scale(.92) } 50% { transform: scale(1.04) } 100% { transform: scale(1) } }

#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--cyan); color: var(--bg); padding: 9px 18px; border-radius: 4px; font-size: .82rem; font-weight: 600; transition: transform .28s ease; z-index: 1000; white-space: nowrap; pointer-events: none; box-shadow: 0 0 16px rgba(56,189,248,.3) }
#toast.show { transform: translateX(-50%) translateY(0) }