/* ひっくりかえるのがみえるリバーシ — スマホを先に考えたレイアウト */

:root {
  --bg: #eef6ea;
  --bg2: #d7ead0;
  --ink: #1f2a1c;
  --muted: #5f7458;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-line: rgba(40, 90, 45, 0.22);
  --board: #2f9a57;
  --board2: #23824a;
  --line: #14532d;
  --p0: #2563eb;
  --p1: #dc2626;
  --p0-soft: rgba(37, 99, 235, 0.12);
  --p1-soft: rgba(220, 38, 38, 0.12);
  --ok: #16a34a;
  --warn: #f59e0b;
  --look: rgba(249, 115, 22, 0.38);
  --lib: #16a34a;
  --sel: rgba(253, 224, 71, 0.75);
  --hint: #0ea5e9;
  --gutter: 12px;
  --rank-w: 20px;
  --n: 8;
  --bw: clamp(240px, min(calc(100vw - 2 * var(--gutter) - var(--rank-w)), calc(100vh - 320px)), 560px);
  --cell: calc(var(--bw) / var(--n));
  color-scheme: light;
}
@supports (height: 100dvh) {
  :root { --bw: clamp(240px, min(calc(100vw - 2 * var(--gutter) - var(--rank-w)), calc(100dvh - 320px)), 560px); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121a14;
    --bg2: #1b261d;
    --ink: #e8f2e4;
    --muted: #9db896;
    --panel: rgba(255, 255, 255, 0.07);
    --panel-line: rgba(200, 240, 200, 0.16);
    --p0: #4f8cff;
    --p1: #ff5a5a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121a14; --bg2: #1b261d; --ink: #e8f2e4; --muted: #9db896;
  --panel: rgba(255, 255, 255, 0.07); --panel-line: rgba(200, 240, 200, 0.16);
  --p0: #4f8cff; --p1: #ff5a5a; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg2); }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%) no-repeat, var(--bg2);
  color: var(--ink);
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  font-weight: 500;
  line-height: 1.5;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: 0.45; }

/* ---------- 上のバー ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px var(--gutter) 4px;
  max-width: 980px; margin: 0 auto;
}
.title { margin: 0; white-space: nowrap; display: flex; align-items: baseline; gap: 4px; line-height: 1.1; }
.t-sub { font-size: 13px; font-weight: 700; color: var(--muted); }
.t-main { font-family: 'Noto Serif JP', serif; font-weight: 900; font-size: 24px; letter-spacing: 0.06em; }
.top-actions { display: flex; gap: 6px; }
.chip {
  border: 2px solid var(--panel-line); background: var(--panel);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.chip:active { transform: scale(0.96); }

/* ---------- 全体の並び ---------- */
.layout {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0 var(--gutter) 24px;
}
.game { display: flex; flex-direction: column; gap: 6px; width: calc(var(--bw) + var(--rank-w)); }
.side { width: calc(var(--bw) + var(--rank-w)); display: flex; flex-direction: column; gap: 10px; }

/* ---------- 状態表示 ---------- */
.status {
  min-height: 46px; padding: 6px 12px; border-radius: 14px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--panel); border: 2px solid var(--panel-line);
  font-size: 15px; font-weight: 700; line-height: 1.35;
}
.status.s0 { border-color: color-mix(in srgb, var(--p0) 45%, transparent); }
.status.s1 { border-color: color-mix(in srgb, var(--p1) 45%, transparent); }
.status .lastmv { font-size: 11px; color: var(--muted); font-weight: 500; }
.status small { display: block; font-size: 11px; color: var(--muted); }
.status.check { background: #fee2e2; border-color: var(--p1); color: #991b1b; animation: shake 0.45s; }
.status.hint { background: #e0f2fe; border-color: var(--hint); color: #075985; }
.status.end { background: #fef3c7; border-color: var(--warn); color: #78350f; }
.status.check .lastmv, .status.hint .lastmv, .status.end .lastmv { color: inherit; opacity: 0.7; }
.status .dots i {
  display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%;
  background: currentColor; animation: blink 1.2s infinite;
}
.status .dots i:nth-child(2) { animation-delay: 0.2s; }
.status .dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }


/* ---------- プレイヤーと取った石 ---------- */
.player {
  display: flex; align-items: center; gap: 8px;
  min-height: 52px;
  padding: 4px 10px; border-radius: 14px;
  background: var(--panel); border: 2px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.player.active.s0 { border-color: var(--p0); box-shadow: 0 0 0 3px var(--p0-soft); }
.player.active.s1 { border-color: var(--p1); box-shadow: 0 0 0 3px var(--p1-soft); }
.pname { display: flex; flex-direction: column; align-items: flex-start; min-width: 64px; flex: none; line-height: 1.15; white-space: nowrap; }
.pname b { font-size: 14px; display: flex; align-items: center; gap: 5px; }
.pname small { font-size: 10px; color: var(--muted); }
.pstone { width: 16px; height: 16px; border-radius: 50%; display: inline-block; flex: none; }
.pstone.s0, .lg-black, .stone .face.f1 { background: radial-gradient(circle at 35% 30%, #6b6b6b 0%, #1d1d1d 45%, #000 100%); }
.pstone.s1, .lg-white, .stone .face.f2 { background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f1efe9 50%, #c9c4b8 100%); }
.caps { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap; }
.caps .lbl { font-size: 12px; color: var(--muted); font-weight: 700; }
.caps .num { font-size: 22px; font-weight: 900; line-height: 1; }
.caps .goal { font-size: 12px; color: var(--muted); font-weight: 700; }
.capbar { display: flex; gap: 3px; flex-wrap: wrap; }
.capbar i { width: 14px; height: 14px; border-radius: 50%; display: block; box-shadow: 0 1px 1px rgba(0,0,0,0.3); }
.capbar i.empty { background: none; box-shadow: inset 0 0 0 2px var(--panel-line); }
.ratio { flex: 1; min-width: 40px; height: 10px; border-radius: 6px; overflow: hidden; display: block; background: color-mix(in srgb, var(--panel-line) 70%, transparent); }
.ratio i.pstone { display: block; height: 100%; border-radius: 0; transition: width 0.4s; }
.pextra { font-size: 12px; color: var(--muted); font-weight: 700; margin-left: auto; text-align: right; line-height: 1.2; }

/* ---------- 盤 ---------- */
.board-wrap { align-self: flex-start; }
.files { display: grid; grid-template-columns: repeat(var(--n), var(--cell)); width: var(--bw); margin-left: var(--rank-w); font-size: 12px; color: var(--muted); text-align: center; line-height: 16px; font-weight: 700; }
.board-row { display: flex; }
.ranks { display: grid; grid-template-rows: repeat(var(--n), var(--cell)); width: var(--rank-w); font-size: 11px; color: var(--muted); align-items: center; text-align: center; font-weight: 700; line-height: 1; }
.board {
  position: relative;
  width: var(--bw); height: var(--bw);
  display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr);
  background: linear-gradient(160deg, var(--board) 0%, var(--board2) 100%);
  border-radius: 6px; outline: 3px solid #14532d;
  box-shadow: 0 6px 18px rgba(10, 50, 20, 0.3), inset 0 0 30px rgba(0, 40, 10, 0.25);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.board > svg.grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.grid .ln { stroke: rgba(8, 40, 18, 0.75); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.grid .dot { fill: rgba(8, 40, 18, 0.9); }
.pt { position: relative; cursor: pointer; z-index: 1; perspective: 300px; }
.stone {
  position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; border-radius: 50%;
  z-index: 2; pointer-events: none;
  transform-style: preserve-3d;
  transition: transform 0.18s cubic-bezier(.3, .7, .3, 1.4), opacity 0.2s;
}
.stone .face {
  position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 1px 2px 3px rgba(0, 20, 5, 0.5);
}
.stone .face.f2 { box-shadow: 1px 2px 3px rgba(0, 20, 5, 0.45), inset 0 0 0 0.5px rgba(0, 0, 0, 0.2); }
.stone .face.back { transform: rotateY(180deg); }
.stone.drop { animation: drop 0.22s cubic-bezier(.3, .7, .3, 1.4); }
.stone.flip { animation: flip 0.5s ease-in-out both; }
.stone.ghost .face { opacity: 0.7; box-shadow: none; }
.stone.ghost { outline: 2px dashed rgba(255, 255, 255, 0.9); outline-offset: 1px; animation: ghostPulse 1.2s infinite; }
@keyframes ghostPulse { 50% { transform: scale(0.92); } }
.stone.last::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; transform: translate(-50%, -50%) translateZ(1px);
  border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.8);
}
.stone.stable::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%, -50%) translateZ(1px);
  border-radius: 3px; border: 2px solid #f59e0b; box-sizing: border-box; z-index: 1;
}
.stone.last.stable::before { width: 46%; height: 46%; }
.pt.sel .stone { transform: scale(1.06); }
.pt.sel .stone .face { box-shadow: 0 0 0 3px #facc15, 1px 2px 3px rgba(0, 20, 5, 0.5); }
/* ひっくりかえる 石 */
.pt.willflip .stone { animation: wobble 0.9s infinite; }
.pt.willflip::after {
  content: ''; position: absolute; inset: 4%; border-radius: 50%; z-index: 3; pointer-events: none;
  border: 3px solid #facc15; box-shadow: 0 0 10px rgba(250, 204, 21, 0.85);
  animation: capPulse 1s infinite;
}
.pt.anchor .stone .face { box-shadow: 0 0 0 2px #facc15, 1px 2px 3px rgba(0, 20, 5, 0.5); }
/* おける ところ */
.pt.can::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 24%; height: 24%;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: 3; pointer-events: none;
  background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 2px rgba(0, 40, 10, 0.25);
}
.pt.can.me0::before { background: rgba(0, 0, 0, 0.45); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.pt .cnt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none;
  font-size: calc(var(--cell) * 0.4); font-weight: 900; font-family: system-ui, sans-serif; color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.pt.me0 .cnt { color: #111; text-shadow: 0 0 3px rgba(255, 255, 255, 0.8); }
.pt.cnt-on::before { display: none; }
.pt.corner-ok::after {
  content: ''; position: absolute; inset: 8%; border-radius: 50%; z-index: 3; pointer-events: none;
  border: 3px dashed #facc15; animation: spin 6s linear infinite;
}
.pt.preview .cnt, .pt.preview::before { display: none; }
.pt.hint-to::after {
  content: ''; position: absolute; inset: 4%; border-radius: 50%; z-index: 4; pointer-events: none;
  box-shadow: 0 0 0 3px var(--hint); animation: hintPulse 1s infinite; border: none;
}
.pt.nope::after {
  content: '×'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 4;
  color: #fecaca; font-weight: 900; font-size: calc(var(--cell) * 0.6); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  animation: fadeOut 1.2s forwards; pointer-events: none;
}
.badge {
  position: absolute; top: 0; right: 0; z-index: 5;
  min-width: 15px; height: 15px; border-radius: 8px; padding: 0 3px;
  font-size: 11px; font-weight: 900; line-height: 15px; text-align: center; color: #fff;
  box-shadow: 0 0 0 1.5px #fff; pointer-events: none;
}
.badge.warn { background: var(--warn); color: #3b2a1a; }
body.small-cells .badge { min-width: 11px; height: 11px; font-size: 8px; line-height: 11px; border-radius: 6px; padding: 0 2px; }
@keyframes capPulse { 50% { transform: scale(0.9); } }
@keyframes hintPulse { 50% { box-shadow: 0 0 0 5px var(--hint), 0 0 12px var(--hint); } }
@keyframes drop { from { transform: scale(1.35); opacity: 0.4; } }
@keyframes flip { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } }
@keyframes wobble { 25% { transform: rotateY(25deg); } 75% { transform: rotateY(-25deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeOut { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 下のボタン ---------- */
.controls { display: flex; gap: 10px; margin-top: 2px; }
.big {
  flex: 1; min-height: 50px; border-radius: 16px; border: 2px solid var(--panel-line);
  background: var(--panel); font-size: 17px; font-weight: 900;
  box-shadow: 0 3px 0 var(--panel-line);
}
.big:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--panel-line); }
.big.hint { background: #e0f2fe; border-color: #7dd3fc; color: #075985; box-shadow: 0 3px 0 #7dd3fc; }
.big.busy { animation: blink 1s infinite; }
.big.primary { background: var(--p0); border-color: var(--p0); color: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--p0) 60%, #000); }
.pz-controls { display: none; }
body.puzzle-mode .pz-controls { display: flex; }


/* ---------- 説明カード ---------- */
.info { background: var(--panel); border: 2px solid var(--panel-line); border-radius: 16px; padding: 10px 12px; min-height: 110px; }
.card { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.card-head b { font-size: 19px; font-weight: 900; }
.card-head .pstone { width: 20px; height: 20px; }
.owner { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: #fff; }
.owner.s0 { background: #222; }
.owner.s1 { background: #fff; color: #222; box-shadow: inset 0 0 0 1px #999; }
.where { font-size: 11px; color: var(--muted); }
.desc { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; }
.desc b.bad { color: #b91c1c; }
.desc b.good { color: #15803d; }
.note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.tips .tip-main { margin: 0 0 6px; font-weight: 700; font-size: 14px; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12.5px; }
.legend li { display: flex; align-items: center; gap: 6px; }

/* 凡例のしるし */
.lg { display: inline-block; vertical-align: middle; flex: none; }
.lg-dot { width: 16px; height: 16px; border-radius: 3px; background: #2f9a57 radial-gradient(circle, rgba(0, 0, 0, 0.5) 0 3px, transparent 3.5px); }
.lg-flip { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #facc15; box-shadow: 0 0 6px rgba(250, 204, 21, 0.8); }
.lg-corner { width: 16px; height: 16px; border-radius: 50%; border: 3px dashed #eab308; }
.lg-warn { width: 16px; height: 16px; border-radius: 50%; background: var(--warn); color: #3b2a1a; font-size: 11px; font-weight: 900; text-align: center; line-height: 16px; }
.lg-black, .lg-white { width: 16px; height: 16px; border-radius: 50%; }
.lg-white { box-shadow: inset 0 0 0 1px #999; }
.lg-stable { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, transparent 0 2px, #f59e0b 2px 4px, transparent 4px), #1d1d1d; }
.howto .lg { margin: 0 2px; }

/* 小さな図 */
.mini .mb { fill: #2f9a57; }
.mini .ml { stroke: rgba(8, 40, 18, 0.7); stroke-width: 0.8; }
.mini .s1 { fill: #1d1d1d; }
.mini .s2 { fill: #f7f5ef; stroke: #8a8370; stroke-width: 0.6; }
.mini .gh { opacity: 0.5; }
.mini .fl { fill: none; stroke: #facc15; stroke-width: 2; }
.mini .dot { fill: rgba(0, 0, 0, 0.45); }
.mini .x { stroke: #fecaca; stroke-width: 2.5; stroke-linecap: round; }
.mini .cn { fill: none; stroke: #facc15; stroke-width: 2; stroke-dasharray: 3 2; }
.mini .wn { fill: #f59e0b; }
.mini .tx { font-size: 9px; font-weight: 900; text-anchor: middle; dominant-baseline: central; fill: #3b2a1a; }

/* 棋譜 */
.kifu-box { background: var(--panel); border: 2px solid var(--panel-line); border-radius: 16px; padding: 8px 12px; }
.kifu-box summary { font-weight: 700; font-size: 14px; cursor: pointer; }
#kifu { margin: 6px 0 0; padding-left: 2.6em; max-height: 200px; overflow: auto; font-size: 13px; columns: 2; column-gap: 16px; }

/* ---------- ダイアログ ---------- */
dialog {
  border: none; border-radius: 22px; padding: 0;
  width: min(92vw, 480px); max-height: 88vh;
  background: var(--bg); color: var(--ink);
  box-shadow: 0 20px 60px rgba(40, 20, 0, 0.4);
}
dialog::backdrop { background: rgba(30, 18, 5, 0.5); }
dialog[open] { animation: dlgIn 0.22s ease-out; }
@keyframes dlgIn { from { transform: translateY(16px) scale(0.97); opacity: 0; } }
.dlg { padding: 18px 18px 16px; max-height: 88vh; overflow: auto; }
.dlg.wide { }
dialog:has(.wide) { width: min(94vw, 780px); }
.dlg h2 { margin: 0 0 10px; font-size: 21px; font-weight: 900; }
.dlg h3 { margin: 14px 0 4px; font-size: 16px; font-weight: 900; }
.dlg p { margin: 4px 0; font-size: 14.5px; }
.dlg ul, .dlg ol { margin: 4px 0; padding-left: 1.4em; font-size: 14.5px; }
.dlg li { margin: 3px 0; }
.dlg fieldset { border: none; margin: 0 0 12px; padding: 0; }
.dlg legend { font-weight: 900; font-size: 14px; margin-bottom: 6px; padding: 0; }
.dlg fieldset[hidden] { display: none; }
.welcome { background: #fef3c7; border-radius: 12px; padding: 8px 12px !important; color: #78350f; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { flex: 1 1 auto; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block; text-align: center; padding: 10px 10px; border-radius: 12px;
  border: 2px solid var(--panel-line); background: var(--panel); font-weight: 700; font-size: 14.5px; cursor: pointer;
}
.seg input:checked + span { border-color: var(--p0); background: var(--p0); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--hint); }
.dlg select {
  width: 100%; font: inherit; font-size: 15px; padding: 10px; border-radius: 12px;
  border: 2px solid var(--panel-line); background: var(--panel); color: var(--ink);
}
.dlg-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.dlg-buttons button, .menu button {
  min-height: 46px; padding: 8px 18px; border-radius: 14px; border: 2px solid var(--panel-line);
  background: var(--panel); font-weight: 900; font-size: 15px;
}
.dlg-buttons button[hidden] { display: none; }
button.primary { background: var(--p0); border-color: var(--p0); color: #fff; }
button.danger { color: var(--p1); border-color: color-mix(in srgb, var(--p1) 40%, transparent); }
.menu { display: flex; flex-direction: column; gap: 8px; }
.menu button { width: 100%; font-size: 16px; }
.toggle { display: flex; align-items: center; gap: 10px; padding: 10px 4px; font-size: 15px; font-weight: 700; border-bottom: 1px solid var(--panel-line); }
.toggle input { width: 24px; height: 24px; accent-color: var(--p0); flex: none; }
.legend-line { font-size: 13px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.legend-line .lg { margin-left: 6px; }
.howto .lg { margin: 0 2px; }


.seg span small { display: block; font-size: 11px; font-weight: 700; opacity: 0.8; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.g-item { display: flex; gap: 10px; align-items: flex-start; background: var(--panel); border: 2px solid var(--panel-line); border-radius: 14px; padding: 8px; }
.g-item > svg { width: 92px; height: 92px; flex: none; border-radius: 6px; }
.g-body { flex: 1; min-width: 0; }
.g-body b { font-size: 16px; font-weight: 900; }
.g-body p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; }

.result { text-align: center; }
.result h2 { font-size: 26px; }
.result h2.win { color: #b45309; }
.result h2.lose { color: var(--muted); }
.result .dlg-buttons { justify-content: center; }
.score-table { margin: 10px auto 0; border-collapse: collapse; font-size: 14px; }
.score-table th, .score-table td { padding: 4px 8px; border-bottom: 1px solid var(--panel-line); text-align: right; }
.score-table th:first-child, .score-table td:first-child { text-align: left; }
.score-table tr.total td { font-weight: 900; font-size: 17px; border-bottom: none; }
.score-table .pstone { vertical-align: -3px; margin-right: 4px; }

/* ---------- さいごの もんだい ---------- */
.big.small { min-height: 42px; font-size: 15px; }
.puzzle-chip { background: #fef3c7; border-color: #fbbf24; color: #3b2a1a; }
body.puzzle-mode .puzzle-chip { background: var(--warn); color: #3b2a1a; }
.pz-count { font-size: 15px !important; }
.pz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.pz-btn {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 6px 8px; min-height: 54px; border-radius: 12px; text-align: left;
  border: 2px solid var(--panel-line); background: var(--panel);
}
.pz-btn b { font-size: 17px; font-weight: 900; line-height: 1.1; }
.pz-btn small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.pz-btn i { position: absolute; top: 4px; right: 6px; font-style: normal; color: #f59e0b; font-size: 16px; }
.pz-btn.done { background: #fef3c7; border-color: #fbbf24; color: #3b2a1a; }
.pz-btn.cur { outline: 3px solid var(--p0); }
.pz-result h2 { text-align: center; font-size: 24px; }
.pz-result h2.win { color: #b45309; }
.pz-result h2.lose { color: var(--muted); }
.pz-sub { text-align: center; color: var(--muted); font-size: 13px !important; }
.pz-answer { margin: 10px 0 6px; padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 2px solid var(--panel-line); font-weight: 900; font-size: 16px; }
.pz-text { line-height: 1.7 !important; }
.pz-traps { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: #fff7ed; color: #3b2a1a; font-size: 13.5px; }
.pz-traps ul { margin: 4px 0 0; }
.pz-answer .s1, .pz-traps .s1 { color: #6b7280; }


/* ---------- トースト・紙吹雪 ---------- */
.toast {
  position: fixed; left: 50%; top: 38%; z-index: 50; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.6); opacity: 0;
  padding: 12px 22px; border-radius: 18px; font-size: 20px; font-weight: 900;
  background: rgba(255, 255, 255, 0.95); color: #24170a; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, opacity 0.2s; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast.check { background: #dc2626; color: #fff; font-size: 30px; }
.toast.cap { background: #fff7ed; }
.toast.promo { background: #fef3c7; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: fall 2s linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }


/* ---------- 広い画面（タブレット横・パソコン） ---------- */
@media (min-width: 880px) and (min-height: 560px) {
  :root { --bw: clamp(300px, calc(100vh - 330px), 640px); }
  .layout { flex-direction: row; align-items: flex-start; justify-content: center; gap: 20px; }
  .side { width: 340px; margin-top: 52px; }
  #kifu { max-height: 320px; }
}
@media (max-width: 480px) {
  .t-sub, .chip .long { display: none; }
  .chip { padding: 6px 9px; font-size: 12px; }
}
@media (max-width: 370px) {
  .chip { padding: 5px 7px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}