/* じゃんけんルーレット固有の見た目（共通は ../common/base.css） */
.board-wrap { position: relative; max-width: 520px; margin: 0 auto; }
#board { display: block; width: 100%; height: auto; }
.status .sub { font-weight: 400; color: var(--ink-sub); font-size: .9rem; margin-left: 4px; }
.status .chips { display: inline-flex; gap: 4px; margin-left: 2px; }
.status .chip { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: var(--p-yellow); }
.status .chip.off { background: transparent; opacity: .45; }

/* 表示窓（アンバーの点灯文字） */
.disp { font: 800 40px var(--font); fill: #FFC247; letter-spacing: 1px; }
.disp[data-tone="win"] { fill: #FFD76E; }
.disp[data-tone="lose"] { fill: #FF8A6E; }
.disp.beat { animation: dispop .16s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes dispop { from { scale: .82; } to { scale: 1; } }

/* ランプの輪 */
.lamp-lit { fill: #FFC73A; stroke: #D68A12; stroke-width: 2; opacity: 0; }
.lamp.on .lamp-lit { opacity: 1; }
.lamp.hit .lamp-lit { opacity: 1; fill: #FFE07A; stroke: #C2410C; stroke-width: 4; }
.lamp-num { font: 800 24px var(--font); fill: #3B2A20; }
.lamp-num.two { font-size: 21px; letter-spacing: -1px; }

/* 顔（画面の中の点灯パターン） */
.face-line { stroke: #FFC247; }
.face-fill { fill: #FFC247; }

/* ゲーム機の手の窓 */
.hwin-bg { fill: #1D242C; transition: fill var(--dur); }
.hwin-img { opacity: .16; transition: opacity var(--dur); }
.hwin.on .hwin-bg { fill: #FFD56B; }
.hwin.on .hwin-img { opacity: 1; }
.hwin.flick .hwin-bg { fill: #6B5A2E; }
.hwin.flick .hwin-img { opacity: .6; }

/* 札（あなた・きかい） */
.tag rect { fill: #FFFDF8; stroke: #3B2A20; stroke-width: 2.5; }
.tag text { font: 800 22px var(--font); fill: #3B2A20; }
.tag.you rect { stroke: #2F5D8A; } .tag.you text { fill: #2F5D8A; }

/* 筐体のボタン（HTMLのボタンを画像の位置に重ねる） */
.mbtns { position: absolute; inset: 0; pointer-events: none; }
.mbtn { position: absolute; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; pointer-events: auto;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.mbtn img { position: absolute; pointer-events: none; }
.mbtn .cap { inset: 0; width: 100%; height: 100%; filter: var(--shadow-piece); transition: transform 80ms, filter 80ms; }
.mbtn .ic { left: 26%; top: 22%; width: 48%; height: 52%; object-fit: contain; transition: transform 80ms; }
.mbtn:active .cap, .mbtn.down .cap, .mbtn:active .ic, .mbtn.down .ic { transform: translateY(3px); }
.mbtn:active .cap, .mbtn.down .cap { filter: none; }
.mbtn:focus-visible { outline: 3px solid var(--warn); outline-offset: 3px; }
.mbtns.open .mbtn { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.mbtns.open .mbtn::after { content: ""; position: absolute; inset: -7px; border: 3px solid #2F5D8A; border-radius: 50%; pointer-events: none; }
.mbtn.chosen::after { content: ""; position: absolute; inset: -8px; border: 4px solid #2F5D8A; border-radius: 50%; pointer-events: none; }
.mbtn.chosen::before { content: "あなた"; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); z-index: 1;
  background: #FFFDF8; color: #2F5D8A; border: 2.5px solid #2F5D8A; border-radius: 999px; padding: 0 10px; font: 800 14px/22px var(--font); white-space: nowrap; }
:root:lang(en) .mbtn.chosen::before { content: "You"; } /* 英語のページの札 */
.mbtns.locked .mbtn { cursor: default; }
.mbtns.locked .mbtn:not(.chosen) .ic { opacity: .55; }

/* ボタンの下の名前 */
.labels { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 520px; margin: 2px auto 0; padding: 0 9%; text-align: center; font-weight: 700; font-size: 15px; }
.labels span { display: flex; align-items: center; justify-content: center; gap: 6px; }
.labels kbd { font: 14px var(--font); color: var(--ink-sub); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }

.result-box .score-line { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.result-box { inset: 18% 6% auto; z-index: 10; } /* 押したボタンの「あなた」の札より上に出す（スマホ幅で結果と重なっていた。連絡帳 No.32） */

@media (max-width: 480px) {
  .game-lead { display: none; }
  .labels { font-size: 14px; }
  .disp { font-size: 46px; }
  .lamp-num { font-size: 28px; } .lamp-num.two { font-size: 28px; letter-spacing: -2px; } /* 画面で12px以上 */
}
@media (prefers-reduced-motion: reduce) { .disp.beat { animation: none; } .mbtn .cap, .mbtn .ic { transition: none; } }

.credit { color: var(--ink-sub); font-size: 14px; margin-top: 24px; }
.howto img { max-width: 100%; height: auto; }
/* 上のバーの高さを一定に（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: 1; --tb-st-lines: 1; } }
:root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 2; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1; } }
/* 上のバーの高さ ここまで */