/* 旗揚げゲーム固有の見た目（共通は ../common/base.css） */
.board-wrap { position: relative; max-width: 640px; margin: 0 auto; }
#board { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.status { flex-wrap: wrap; column-gap: 16px; row-gap: 0; }
.status .sub { font-weight: 400; color: var(--ink-sub); font-size: .95rem; }
.status .streak b { font-size: 1.25rem; color: var(--accent); }
.lives { display: inline-flex; gap: 6px; align-items: center; }
.lives i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); display: inline-block; }
.lives i.on { background: var(--p-yellow); }

/* 指示役の画像の差し替え（短いフェードと小さな弾み） */
.sprite.swap { animation: swap .16s ease-out; }
@keyframes swap { from { opacity: .5; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }

/* 手前の手と旗（腕ごと回して上げ下げ） */
.hand .arm { transition: transform .16s ease-out; transform-box: view-box; }
.hands.still .arm { transition: none; }
@media (prefers-reduced-motion: reduce) { .sprite.swap { animation: none; } .hand .arm { transition: none; } }

/* 指示の帯（大きな文字） */
.order-bg { fill: #FFFDF8; stroke: #5A3A28; stroke-width: 3; }
#order { font: 800 52px var(--font); fill: #3B2A20; white-space: pre; }
#order[data-tone="ok"] { fill: #2E7D4F; }
#order[data-tone="ng"] { fill: #B23A3A; }
#order.beat { animation: orderpop .14s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes orderpop { from { scale: .92; } to { scale: 1; } }
@media (prefers-reduced-motion: reduce) { #order.beat { animation: none; } }
.time-bg { fill: rgba(90, 58, 40, .15); }
.time-fill { fill: #2F5D8A; }

/* 答え合わせ */
.detail-bg { fill: #FFFDF8; stroke: #B23A3A; stroke-width: 3; }
.detail-t { font: 700 24px var(--font); fill: #3B2A20; }

.me-tag rect { fill: #FFFDF8; stroke: #5A3A28; stroke-width: 2.5; }
.me-tag text { font: 800 18px var(--font); fill: #2F6DB5; }

/* 操作ボタン（大きく。左に赤、右に白） */
.pad { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; margin-left: auto; margin-right: auto; }
.pad-col { display: grid; gap: 10px; }
.padbtn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 72px; padding: 4px 10px; background: var(--surface); color: var(--ink); border-width: 3px; border-color: var(--line); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.pad-col.red .padbtn { border-color: #C8453B; }
.pad-col.white .padbtn { border-color: #8C8578; }
.padbtn svg { width: 40px; height: 40px; flex: none; }
.padbtn span { font-size: 19px; line-height: 1.2; display: flex; flex-direction: column; align-items: flex-start; }
.padbtn kbd { font: 14px var(--font); color: var(--ink-sub); }
.pad.open .padbtn { background: var(--accent-soft); }

.result-box .score-line { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.result-box { inset: 22% 8% auto; }

@media (max-width: 480px) {
  .game-lead { display: none; }
  .padbtn { height: 64px; gap: 6px; }
  .padbtn svg { width: 32px; height: 32px; }
  .padbtn span { font-size: 18px; }
  #order { font-size: 56px; }
  .me-tag text { font-size: 22px; } /* 画面で12px以上 */
}
.padbtn .tri { fill: currentColor; }
/* 上のバーの高さを一定に（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; } }
/* 上のバーの高さ ここまで */