/* ブロックパズル 固有の見た目（共通は ../common/base.css）
   紙の盤に藍色のタイル。色は1色だけ（形の種類で色を変えない）。消える列は黄色の太い枠 */
[hidden] { display: none !important; }
:root { --tile: #2F5D8A; --tile-in: #3F6F9E; --tile-edge: #244A6E; --hole: #ECE8DE; --paper: #F9F7F1; --paper-edge: #D9D6CE; --line-hi: #D9A21B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #E9E6DD; --hole: #D8D3C7; --paper-edge: #8D8878; } }
:root[data-theme="dark"] { --paper: #E9E6DD; --hole: #D8D3C7; --paper-edge: #8D8878; }

.board-wrap { position: relative; max-width: 520px; margin: 0 auto; }
.board-box { aspect-ratio: 1 / 1; }
svg.bp-board { display: block; width: 100%; height: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; cursor: pointer; }
svg.bp-board .paper { fill: var(--paper); stroke: var(--paper-edge); stroke-width: 3; }
svg.bp-board .hole { fill: var(--hole); }
svg.bp-board .box-lines line { stroke: #8D8878; stroke-width: 6; stroke-linecap: round; }

/* タイル（盤の上・手持ち・ドラッグ中で同じ形） */
.tile .t-body { fill: var(--tile); stroke: var(--tile-edge); stroke-width: 3; }
.tile .t-in { fill: none; stroke: var(--tile-in); stroke-width: 5; }
svg.bp-board .piece-tile { filter: var(--shadow-piece); }
svg.bp-board .piece-tile .tb { transform-box: fill-box; transform-origin: center; }
svg.bp-board .piece-tile.pop .tb { animation: tpop .18s ease-out; }
@keyframes tpop { from { transform: scale(.82); } to { transform: scale(1); } }
svg.bp-board .piece-tile.clearing .tb { animation: tclear .28s ease-in forwards; }
@keyframes tclear { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(.2); opacity: 0; } }
svg.bp-board .piece-tile.will-clear .t-body { fill: #4B78A6; }
svg.bp-board .piece-tile.will-clear .t-in { stroke: #F3D27A; }

/* 置く前の予告 */
svg.bp-board .ghost .t-body { fill: #A9C0D8; stroke: var(--tile); stroke-width: 5; stroke-dasharray: 12 8; }
svg.bp-board .ghost .t-in { stroke: none; }
svg.bp-board .ghost.will-clear .t-body { fill: #7FA0C4; }
svg.bp-board .ghost.bad .t-body { fill: rgba(178, 58, 58, .5); stroke: #B23A3A; stroke-width: 7; }
svg.bp-board .ghost-out { fill: none; }
svg.bp-board .line-band { fill: rgba(217, 162, 27, .22); }
svg.bp-board .line-frame { fill: none; stroke: var(--line-hi); stroke-width: 9; }
svg.bp-board .cursor { fill: none; stroke: #E5A23A; stroke-width: 7; stroke-dasharray: 16 8; }
svg.bp-board .ghosts, svg.bp-board .line-top, svg.bp-board .over, svg.bp-board .line-marks { pointer-events: none; }

/* 手持ちの3つ */
.tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 520px; margin: 10px auto 0; }
.slot {
  appearance: none; font: inherit; position: relative; aspect-ratio: 1 / .78; min-height: 64px; padding: 6px;
  background: var(--paper); border: 2px solid var(--line-strong); border-radius: var(--radius); cursor: grab; /* 盤と同じ紙の地（ダークでも藍のタイルが見えるように） */
  display: flex; align-items: center; justify-content: center; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  transition: border-color var(--dur), background-color var(--dur), opacity var(--dur);
}
.slot svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.slot .piece { filter: var(--shadow-piece); }
.slot:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.slot.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--paper)); }
.slot.selected .piece { filter: var(--shadow-lift); transform: translateY(-3px); }
.slot.lifted svg { opacity: .25; }
.slot.empty { cursor: default; border-style: dashed; background: transparent; }
.slot.cant svg { opacity: .3; }
.slot.cant, .slot.turn { border-style: dashed; }
.slot-tag { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-size: 14px; font-weight: 700; line-height: 1.3; padding: 0 6px; border-radius: 999px; background: var(--surface); color: var(--ng); border: 1.5px solid currentColor; white-space: nowrap; pointer-events: none; }
.slot.turn .slot-tag { color: var(--warn); }
.slot.deal { animation: deal .26s ease-out both; }
@keyframes deal { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.slot.spin svg { animation: spin .18s ease-out; }
@keyframes spin { from { transform: rotate(-90deg); } to { transform: none; } }

/* ドラッグ中のピース（指の少し上に出す） */
.drag-float { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; opacity: .92; }
.drag-float svg { display: block; overflow: visible; }
.drag-float .piece { filter: var(--shadow-lift); }

/* 手番のバー: 盤・得点・ベスト */
.status { flex-wrap: wrap; column-gap: 12px; row-gap: 0; }
.st-name { white-space: nowrap; }
.st-name small { font-size: 14px; color: var(--ink-sub); margin-left: 2px; }
.counter { font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter b { font-size: 1.25em; }
.best { margin-left: auto; color: var(--ink-sub); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 連続（消した手が続いているとき）。消さない手が1回あると点線の枠（次で消さないと切れる） */
.chain { white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--warn); font-variant-numeric: tabular-nums; padding: 0 6px; border: 1.5px solid transparent; border-radius: 6px; }
.chain.warn { border-style: dashed; border-color: var(--ng); color: var(--ng); }
.chain[hidden] { display: none; }
.lv { display: inline-block; white-space: nowrap; font-size: 14px; font-weight: 700; padding: 0 8px; border-radius: 999px; border: 1.5px solid currentColor; margin-left: 6px; vertical-align: middle; color: var(--accent); }

fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }

/* 結果は盤の下に出す（最後の盤を隠さない） */
.result-box { position: static; margin: 10px auto 0; padding: 16px 20px; max-width: 520px; }
.result-box h2 { font-size: 1.4rem; margin-bottom: 4px; }
.result-box .big { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.result-box ul { list-style: none; padding: 0; margin: 0 0 8px; }
.callout { z-index: 3; }
#tools { max-width: 520px; margin-left: auto; margin-right: auto; }

@media (max-width: 420px) {
  .stage { padding: 8px; }
  .turnbar { margin-bottom: 6px; }
  .tray { gap: 8px; margin-top: 8px; }
  .slot { aspect-ratio: 1 / .72; }
  .controls .btn.icon { padding: 0 9px; }
  .result-box { padding: 12px; }
  .result-box h2 { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  svg.bp-board .piece-tile.pop .tb, .slot.deal, .slot.spin svg { animation: none; }
  svg.bp-board .piece-tile.clearing .tb { animation: none; opacity: 0; }
}
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 1.25; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1.25; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1.25; } }
:root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 2; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 2; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1.25; } }
/* 上のバーの高さ ここまで */