/* ピラミッド固有の見た目（共通は ../common/base.css） */
#table { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none; }
#table text { pointer-events: none; }
.board-wrap { max-width: 640px; }

/* 置き場 */
.slot > rect { fill: rgba(0, 0, 0, .14); stroke: rgba(255, 248, 234, .5); stroke-width: 1.5; stroke-dasharray: 5 4; }
.slot.done > rect { stroke-dasharray: none; stroke: rgba(255, 248, 234, .35); }
.area-label { fill: #F2EEE3; }
.area-hint { fill: rgba(255, 248, 234, .75); }
.area-hint.sub { fill: rgba(255, 248, 234, .6); }
.redo path { stroke: #FFE7A3; }
.redo .head { fill: #FFE7A3; stroke: none; }
.redo.off path { stroke: rgba(255, 248, 234, .3); }
.redo.off .head { fill: rgba(255, 248, 234, .3); }
.redo-text { fill: #FFE7A3; }
.deck { cursor: pointer; }

/* 札 */
.card .lift { transition: transform var(--dur); }
.card.sel .lift { transform: translateY(-5px); }
.card.sel .piece { filter: var(--shadow-lift); }
.sel-ring { fill: none; stroke: none; stroke-width: 4; }
.card.sel .sel-ring { stroke: var(--p-yellow); }
.card.hint .sel-ring { stroke: #FFFFFF; stroke-dasharray: 6 4; }
.card.partner .sel-ring { stroke: #FFE7A3; }
.card.drag .piece, .card.merge .piece { filter: var(--shadow-lift); }
.card.drag { pointer-events: none; }
.piece { filter: var(--shadow-piece); }

.card.blocked .face-base { fill: #ECE9E2; }

/* 枠（相手の札・ヒント・キーボードで選んでいる札・ドラッグで落とせる所） */
.target { fill: none; stroke: #FFE7A3; stroke-width: 3; stroke-dasharray: 7 4; pointer-events: none; }
.target.partner { fill: rgba(255, 231, 163, .22); stroke: #FFE7A3; stroke-width: 4; stroke-dasharray: none; animation: glow 1.1s ease-in-out infinite alternate; }
.target.hint { stroke: #FFFFFF; stroke-width: 4; }
.target.kfocus { stroke: #FFFFFF; stroke-width: 3; stroke-dasharray: 3 3; }
.target.hot { fill: rgba(255, 231, 163, .38); stroke: #FFFFFF; stroke-dasharray: none; }
@keyframes glow { from { stroke-opacity: .55; } to { stroke-opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .target.partner { animation: none; } }
.hint-arrow path { stroke: #FFFFFF; }
.hint-arrow .head { fill: #FFFFFF; stroke: none; }
.hint-arrow { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .5)); }

/* 操作 */
.main-row .btn { flex: 1 1 auto; }
.timer { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 17px; margin-left: auto; white-space: nowrap; }
.status .moves { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--ink-sub); white-space: nowrap; margin-left: 8px; }
.num-input { font: inherit; font-size: 18px; width: 9em; min-height: var(--tap); padding: 0 10px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.num-input:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
details.rules-more { margin: 8px 0 0; }
details.rules-more summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-weight: 700; color: var(--accent); }
details.rules-more .field { margin-top: 4px; }

/* ヒント・記録 */
.think { margin: 10px auto 0; max-width: 640px; border: 2px solid var(--line); border-radius: var(--radius); padding: 10px 14px; background: var(--surface); }
.think h3 { margin: 0 0 4px; font-size: 16px; }
.think p { margin: 0 0 6px; }
.think p:last-child { margin-bottom: 0; }
.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; }
.lv.relaxed { color: var(--ok); } .lv.normal { color: var(--accent); } .lv.strict { color: var(--ng); } .lv.custom { color: var(--ink-sub); }
.result-box { inset: 8% 5% auto; z-index: 2; }
.result-box .big { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.result-box ul { list-style: none; padding: 0; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
/* 盤の上の知らせは、ピラミッドにも山札・捨て札にも重ならない下の真ん中（捨て札と取った札の間）に出す */
.callout { z-index: 3; left: 62%; top: 86%; }

/* スマホ: 盤を横いっぱいに */
@media (max-width: 480px) {
  .stage { padding: 6px; margin: 0 -10px; }
  .turnbar { margin-bottom: 6px; padding: 4px 10px; }
  .controls { gap: 6px; margin-top: 8px; }
  .controls .btn.icon { padding: 0 9px; font-size: 14px; }
  .main-row .btn { padding: 0 10px; font-size: 16px; }
  .article th, .article td { padding: 6px; font-size: 14px; }
}
.howto img.narrow { max-width: 560px; }
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
: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: 1; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */