/* カルキュレーション固有の見た目（共通は ../common/base.css）。もとは games/klondike/style.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.found rect, .slot.stock rect, .slot.hand rect { stroke-dasharray: none; stroke: rgba(255, 248, 234, .3); }
.slot-a { fill: rgba(255, 248, 234, .45); }
.pile-num { fill: rgba(255, 248, 234, .35); }
.area-label { fill: #F2EEE3; }
.f-head { fill: rgba(255, 248, 234, .85); }
.f-next { fill: #FFE7A3; }
.f-next.done { fill: #BFE3C9; }
.f-calc { fill: rgba(255, 248, 234, .8); font-variant-numeric: tabular-nums; }
.ghost { fill: rgba(255, 248, 234, .06); stroke: rgba(255, 248, 234, .4); stroke-width: 1.5; stroke-dasharray: 4 4; pointer-events: none; }
.ghost.rec { fill: rgba(255, 231, 163, .22); stroke: #FFE7A3; stroke-width: 3; stroke-dasharray: none; }
.ghost.hint { fill: rgba(255, 255, 255, .18); stroke: #FFFFFF; stroke-width: 3; stroke-dasharray: 6 4; }
.rec-label { fill: #FFE7A3; }

/* 札 */
.card .back { display: none; }
.card.down .back { display: inline; }
.card.down .face { display: none; }
.card .lift { transition: transform var(--dur); }
.sel-ring { fill: none; stroke: none; stroke-width: 4; }
.card.drag .piece { filter: var(--shadow-lift); }
.card.drag { pointer-events: none; }
.piece { filter: var(--shadow-piece); }

/* 枠（台札に出せる札・選んだ札・ヒント・ドラッグで落とせる所） */
.target { fill: none; stroke: #FFE7A3; stroke-width: 3; stroke-dasharray: 7 4; pointer-events: none; }
.target.partner { fill: rgba(255, 231, 163, .18); stroke: #FFE7A3; stroke-width: 3; stroke-dasharray: none; animation: glow 1.1s ease-in-out infinite alternate; }
.target.sel { stroke: var(--p-yellow); stroke-width: 4; stroke-dasharray: none; }
.target.rec { stroke: #FFE7A3; stroke-width: 4; stroke-dasharray: none; fill: rgba(255, 231, 163, .2); }
.target.hint { stroke: #FFFFFF; stroke-width: 4; }
.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; }
.status { flex-wrap: wrap; row-gap: 0; }
.status .score { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; white-space: nowrap; margin-left: auto; }
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; }
#seq-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* ヒント・順番の表 */
.think, .seq { 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; }
.seq { padding: 6px; overflow-x: auto; }
.seq table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.seq th, .seq td { text-align: center; padding: 3px 2px; font-size: 15px; border: 1px solid var(--line); }
.seq th { white-space: nowrap; font-size: 14px; padding: 3px 6px; }
.seq td { font-weight: 700; min-width: 1.6em; }
.seq td.done { color: var(--ink-sub); font-weight: 400; text-decoration: line-through; }
.seq td.next { outline: 3px solid var(--accent); outline-offset: -3px; color: var(--accent); }
.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.easy { color: var(--ok); } .lv.normal { color: var(--accent); } .lv.hard { color: var(--ng); }
.result-box { inset: 30% 5% auto; z-index: 2; padding: 12px 18px; max-height: 68%; overflow-y: auto; }
.result-box h2 { margin-bottom: 4px; font-size: 1.4rem; }
.result-box .big { font-size: 1.2rem; font-weight: 700; margin: 0 0 6px; }
.result-box ul { list-style: none; padding: 0; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.result-box li { padding: 1px 0; }
.result-box .note { margin: 4px 0 0; }
.result-box .controls { margin-top: 8px; }
/* 盤の上の知らせは、台札・場札の列にかからない下のほう（左の手札の列の下）に出す */
.callout { z-index: 3; top: 88%; left: 50%; }

/* スマホ: 盤を横いっぱいに */
@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; }
  .seq th, .seq td { font-size: 13px; padding: 2px 1px; }
  .result-box { position: relative; inset: auto; max-height: none; margin-top: 8px; }
}
.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: 4; --tb-st-lines: 1; --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; } }
/* 上のバーの高さ ここまで */