/* ===== Suijaku Dark UI (Player/GM/Tool Common) v20251010-final-peek-fix ===== */
:root {
  --brand: #6B8F71; --brand-600: #5E7F64; --brand-700: #4F6E56;
  --bg: #0b0f14; --surface: #131a23; --surface-2: #0f161e; --surface-3: #1b2431;
  --line: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.18);
  --ink: #e8edf4; --ink-weak: #a9b3c3; --link: #9BD1FF;
  --pulse-color: rgba(255,226,122,.85);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color-scheme: dark;
}
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; background: var(--bg); }

/* ===== 共通コンポーネント ===== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.title, .header .item { font-size: 18px; font-weight: 800; color: var(--ink) !important; }
.badge, .ui.label {
  background: var(--surface-3) !important; color: var(--ink-weak) !important;
  padding: 4px 10px; border-radius: 999px !important;
  font-size: 12px !important; font-weight: 700 !important;
  border: 1px solid var(--line) !important;
}
.panel, .history details, .ui.segment {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important; padding: 14px;
  margin-top: 16px; color: var(--ink) !important;
}
.panel .h1, .history summary, .ui.small.header {
  font-weight: 900 !important; margin-bottom: 10px; color: var(--ink) !important;
  display: block !important; text-align: left !important;
  list-style: none; padding: 0 !important; border: 0 !important;
}
.history summary { cursor: pointer; }
.history summary::-webkit-details-marker { display: none; }
.actions { display: flex; gap: 10px; }

/* ===== プレイヤー画面：最新ヒント ===== */
.latest-wrap { margin-top: 1rem; }
.latest-card { transition: box-shadow 300ms ease; }
.latest-head { font-size: 12px; color: var(--ink-weak); margin-bottom: 6px; }
.latest-body { font-size: 1.2rem; line-height: 1.7; color: #fff; font-weight: 700; }
.latest-card.is-pulse { animation: pulse 900ms ease-out; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--pulse-color); }
  100% { box-shadow: 0 0 0 20px transparent; }
}

/* ===== プレイヤー画面：ヒント履歴 ===== */
.hints { display: grid; gap: 8px; margin-top: 10px; }
.hint-item, .hint-row {
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; color: var(--ink);
}
.hint-item .id, .hint-row .tag { font-size: 11px; color: var(--ink-weak); margin-bottom: 4px; }

/* ===== プレイヤー画面：下部ツールバー ===== */
.toolbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: rgba(15, 22, 30, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 12px 14px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.45);
}
.status-text { font-size: 13px; font-weight: 700; color: var(--ink-weak); text-align: center; height: 18px; transition: color 300ms ease; }
.btn, .ui.button {
  flex-grow: 1; border-radius: 14px !important; min-height: 52px; padding: 12px 16px !important;
  font-weight: 800 !important; letter-spacing: .02em; border: 1px solid var(--line-strong) !important;
  color: var(--ink) !important; background: var(--surface-3) !important;
  transition: all 150ms ease; touch-action: manipulation;
}
.actions .btn.accent { flex-grow: 2.5; font-size: 1rem !important; }
.btn.accent, .ui.primary.button { background: var(--brand) !important; color: #fff !important; border-color: transparent !important; }
.btn:not(:disabled):active, .ui.button:not(:disabled):active { transform: translateY(1px); }
.btn:disabled, .ui.button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== 手番バナー ===== */
.turn-banner { display: none; }
body.is-my-turn .turn-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 800; padding: 8px 12px; border-radius: 999px;
  background: rgba(255,226,122,.12); border: 1px solid rgba(255,226,122,.35); color: #fff;
}
.turn-indicator {
  width: 8px; height: 8px; border-radius: 50%; background-color: #ffe27a;
  box-shadow: 0 0 8px rgba(255,226,122,.9); animation: turn-pulse 1.5s infinite;
}
@keyframes turn-pulse { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } }

/* ===== 盤面スタイル ===== */
.grid { display: grid; grid-template-columns: 28px repeat(5, 1fr); grid-template-rows: 28px repeat(5, 1fr); gap: 6px; }
.colhdr, .rowhdr, .hdr-empty { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; background: var(--surface-3); border-radius: 6px; color: var(--ink-weak); }
.cell {
  position: relative; aspect-ratio: 1 / 1; background: var(--surface-3); border-radius: 10px;
  transition: all 200ms ease; cursor: pointer;
}
.chip {
  position: absolute; inset: 4px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 12px; font-weight: 900; color: #fff;
  border: 2px solid rgba(0,0,0,.3); text-shadow: 0 1px 2px rgba(0,0,0,.5);
  transition: all 200ms ease;
}
@keyframes blink-selection {
  0%   { box-shadow: 0 0 16px 8px var(--pulse-color); }
  50%  { box-shadow: 0 0  6px 2px var(--pulse-color); }
  100% { box-shadow: 0 0 16px 8px var(--pulse-color); }
}
.cell.is-move-src { transform: scale(1.05); animation: blink-selection 1.2s infinite; }
.chip.p1 { background: #c84041; } .chip.p2 { background: #2f72c2; }
.chip.p3 { background: #d5a539; } .chip.p4 { background: #4a9d52; }
.correct-cell::after {
  content: ""; position: absolute; inset: -3px; border: 3px solid #ef4444;
  border-radius: 12px; pointer-events: none;
}

/* ===== GM画面専用スタイル ===== */
body:not(.player-view) { padding-top: 60px; }
body:not(.player-view) .ui.container { padding: 1rem 14px; }
#setupArea .field > label.ui.header {
    position: static !important; display: block !important; text-align: left !important;
    color: var(--ink-weak) !important; font-size: 14px !important;
    padding: 0 0 8px 0 !important; margin: 0 !important;
    background: none !important; border: none !important; letter-spacing: normal !important;
}
select, .ui.dropdown, input[type="text"] {
  width: 100%; background: var(--surface-3) !important; color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important; border-radius: 12px !important;
  min-height: 52px; padding: 12px 16px !important; font-size: 1rem !important;
}
#qrWrap { display: flex; flex-wrap: wrap; gap: 16px; }
.qr-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr-item img { border-radius: 12px; }
.tutorial { margin-top: 1rem; }
.tutorial summary { cursor: pointer; color: var(--link); font-weight: 700; }
.tutorial .content { margin-top: 0.5rem; padding: 1rem; background: var(--surface); border-radius: 12px; border: 1px solid var(--line); }

/* ===== 結果表示スタイル（GM/Player共通） ===== */
.result-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.answer-info { margin-top: 12px; color: var(--ink-weak); font-size: 14px; }

/* ===== ヒント生成ツール専用スタイル ===== */
.generator-view .description { color: var(--ink-weak); margin-bottom: 1.5rem; }
.generator-view .field { margin-bottom: 1rem; }
.generator-view .field label { color: var(--ink-weak); font-size: 14px; font-weight: 700; margin-bottom: 8px; display: block; }
.share-url { margin-top: 0.5rem; font-size: 12px; word-break: break-all; }
.share-url a { color: var(--link); }

/* ★★★ 正解を見るスライダー & モーダル ★★★ */
#peekPanel {
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 12px;
  background: var(--surface-3) !important;
}
#peekPanel summary {
  cursor: pointer;
  color: var(--link);
  font-size: 1rem;
  font-weight: 700;
  list-style: none;
  padding: 4px;
}
#peekPanel summary::-webkit-details-marker { display: none; }
.slide-to-reveal {
  position: relative; width: 100%; height: 52px;
  background: var(--surface); border-radius: 999px; margin-top: 8px;
  display: flex; align-items: center; overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
.slide-handle {
  position: absolute; top: 0; left: 0;
  width: 52px; height: 100%;
  background: var(--brand); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  cursor: grab; touch-action: none;
  transition: transform 150ms ease-out;
}
.slide-handle:active { cursor: grabbing; }
.slide-text {
  width: 100%; text-align: center; color: var(--ink-weak);
  font-weight: 700; pointer-events: none;
}
.modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  z-index: 200;
  align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.5rem;
  max-width: 400px; width: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.modal-card .h1 { margin-top: 0; }
.answer-display {
  background: var(--bg); padding: 1rem; border-radius: 12px;
  text-align: center; font-size: 1.2rem; font-weight: 700; letter-spacing: .1em;
}