/* 日本列島ダーツdeクイズ（2026-10-29）。舞台は夜のバー「ダーツびーバー」: 紺の壁と琥珀のランプ、コルクの的に紙の日本地図。
   ほかの見た目（入力欄・札・結果）は game.css のまま。色は site.css の札の色に合わせ、夜の色だけをここに足す */
:root {
  --bar: #1B2440;        /* 壁の紺 */
  --sea: #78B4D6;        /* 的の海（水色。2026-10-29 オーナーの指示「海はもう少し水色に近い方が」）。darts.js の C.sea と同じ */
  --amber: #F2B45A;      /* ランプの琥珀 */
  --cork: #9B7448;       /* 的のふち */
  --green-paint: #7FB685;
  --gold-paint: #E2B547;
}

.stage.darts {
  aspect-ratio: 1 / 1;
  background: var(--bar);
  border-color: var(--ink);
  overflow: clip;  /* hidden だと、中のボタンへのフォーカスなどで枠の中がずれて上の札が隠れる（2026-10-29 に見つけた） */
}
/* 的の上の引っ張りを、拡大やスクロールに取られない。遊んでいる間だけ（紹介ページでは的の上をなぞってもスクロールできるように。2026-10-29 の点検） */
body.playing .stage.darts { touch-action: none; }
.stage.darts canvas { cursor: crosshair; }
/* プレイ中（スマホ）: キーボードを閉じているときは的を大きく、開いたら見える高さに縮める */
@media (max-width: 699px) {
  body.playing .stage.darts { aspect-ratio: auto; height: min(calc(var(--vvh, 100svh) - 128px), 150vw); }
}
/* 横向きのスマホ（幅はあるが背が低い）: 入力欄が画面の外へ出ないよう、高さを見えている高さに合わせる */
@media (min-width: 700px) and (max-height: 560px) {
  body.playing .stage.darts { aspect-ratio: auto; height: calc(var(--vvh, 100svh) - 128px); min-height: 200px; }
}

/* ---------- HUD ---------- */
.d-round, .d-wind, .d-ghost { position: absolute; background: var(--card); border: var(--lw) solid var(--ink); font-family: var(--f-num); font-weight: 700; }
.d-round { left: 8px; top: 8px; display: flex; align-items: center; gap: 5px; padding: 4px 8px; font-size: .85rem; }
.d-round i { width: 8px; height: 8px; border-radius: 50%; border: var(--lw) solid var(--ink); }
.d-round i.done { background: var(--ink); }
.d-round i.now { background: var(--accent); border-color: var(--accent); }
.d-wind { left: 50%; top: 8px; translate: -50% 0; display: flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: .78rem; }
.d-wind svg { width: 16px; height: 16px; color: var(--accent); }
.d-score { top: 44px; bottom: auto; }  /* 左下は投げるビーバーの場所なので、合計点は左上へ */
.d-score b { font-size: 1.15rem; }
.d-ghost { left: 8px; top: 80px; padding: 3px 8px; font-size: .75rem; color: var(--muted); }
/* 刺さったあとの拡大・縮小のボタン（左下。右下は全体図の隅の地図） */
.d-zoom { position: absolute; left: 8px; bottom: 8px; display: grid; gap: 6px; pointer-events: auto; }
.d-zoom .icon-btn { width: 40px; height: 40px; background: var(--card); }
.d-zoom[hidden] { display: none; }
/* ダーツびーバーの二人: 左下に投げる自分（後ろ姿）、右下に蝶ネクタイのマスター。的の操作は邪魔しない */
.d-player, .d-master { position: absolute; bottom: 0; z-index: 1; pointer-events: none; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.d-player { left: 50%; bottom: var(--player-b, 0); translate: -50% 0; height: var(--player-h, 30%); width: auto; filter: none; }  /* 高さは darts.js（台の下の空き。v0.4 で手前に大きく） */
.d-player { transition: transform .25s cubic-bezier(.2, 0, 0, 1), opacity .2s ease; }
.d-player.away { transform: translateY(70%); opacity: 0; }  /* 引っ張って離すので、左右に同じだけ引けるよう下の真ん中（v0.3） */
.d-master { right: 2%; width: min(20%, 108px); transition: transform .28s cubic-bezier(.2, 0, 0, 1), opacity .2s ease; }
.d-master.away { transform: translateY(70%); opacity: 0; }
.d-master.call { animation: master-call .5s cubic-bezier(.2, 0, 0, 1); }
@keyframes master-call { 0% { transform: translateY(30%); } 60% { transform: translateY(-6%); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .d-master, .d-master.call, .d-player { transition: none; animation: none; } }
.d-step { font-family: var(--f-num); font-weight: 700; font-size: .78rem; color: var(--on-accent); background: var(--accent); padding: 1px 6px; }
.d-step:empty { display: none; }

/* ---------- 到着・結果 ---------- */
.course.ghost-course { background: var(--bar); color: #FFFFFF; }
.course.ghost-course::before { background: var(--amber); border-color: var(--amber); }
.course.ghost-course .course-meter, .course.ghost-course .course-best { color: var(--amber); }
.paintbox { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: center; }
.paint { width: 132px; height: 132px; display: block; border: var(--lw) solid var(--ink); background: var(--sea); }
.paint-note { margin: 0; display: grid; gap: 6px; font-size: .85rem; font-weight: 700; }
.paint-note span { display: flex; align-items: center; gap: 6px; }
.paint-note b { font-family: var(--f-num); font-size: 1rem; }
.paint-note .sw { width: 12px; height: 12px; border: var(--lw) solid var(--ink); }
.paint-note .sw.green { background: var(--green-paint); }
.paint-note .sw.gold { background: var(--gold-paint); }
.paint-note .of { color: var(--muted); font-size: .75rem; font-weight: 400; }
.records { margin: 0; display: flex; gap: 16px; font-family: var(--f-num); font-size: .78rem; letter-spacing: .08em; }
.records b { font-size: 1rem; margin-left: 4px; letter-spacing: 0; }
.rppd { font-family: var(--f-num); font-weight: 700; font-size: .78rem; }
.rppd b { font-size: 1rem; }
.log .fl { font-family: var(--f-num); font-weight: 700; font-size: .85rem; }

/* ---------- 図で見るあそびかた（紹介ページ、shared/darts_howto.js。設計書 §16） ---------- */
.howto { margin-top: 8px; }
.howto-grid { display: grid; gap: 14px; }  /* 紹介ページの幅は狭いので、パソコンでも1列 */
.howto-card { display: grid; gap: 10px; padding: 14px 14px 16px 30px; align-content: start; color: var(--ink); }
.howto-card.tag::before { top: 22px; }  /* 札の留め穴は見出しの高さに */
.howto-card h3 { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.howto-no { margin: 0; font-family: var(--f-num); font-weight: 700; font-size: .72rem; letter-spacing: .14em; color: var(--accent); }
.howto-no::before { content: "STEP "; }
.howto-points { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: .86rem; line-height: 1.55; }
.howto-fig { position: relative; width: 100%; aspect-ratio: 1 / 1; border: var(--lw) solid var(--ink); background: var(--sea); overflow: hidden; }
.howto-fig canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hw-beaver { position: absolute; left: 50%; bottom: 4%; height: 36%; width: auto; translate: -50% 0; }  /* 図の座標で手は (159, 193)、足は y 285（shared/darts_howto.js） */
.hw-over { position: absolute; inset: 0; width: 100%; height: 100%; }
.hw-tag { position: absolute; margin: 0; padding: 3px 8px; background: var(--card); border: var(--lw) solid var(--ink); font-size: .74rem; line-height: 1.3; }
.hw-tag b { color: var(--accent); }
.hw-a { left: 4px; top: 70%; }
.hw-b { right: 4px; top: 22%; }
.howto-steps { display: grid; gap: 6px; }
.hw-step { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n q x" "n a x"; gap: 2px 10px; align-items: center; padding: 8px 10px; background: var(--card); border: var(--lw) solid var(--ink); }
.hw-n { grid-area: n; font-family: var(--f-num); font-weight: 700; font-size: .72rem; color: var(--on-accent); background: var(--accent); padding: 2px 6px; }
.hw-q { grid-area: q; font-size: .78rem; color: var(--muted); }
.hw-ans { grid-area: a; font-weight: 700; font-size: 1.05rem; }
.hw-x { grid-area: x; font-family: var(--f-num); font-weight: 700; font-size: 1.3rem; }
.hw-x.x2 { color: #2E7D5B; }
.hw-x.x3 { color: #B8860B; }
.hw-arrow { text-align: center; font-size: .78rem; color: var(--muted); }
.howto-row { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .howto-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; } }
.howto-choro { aspect-ratio: 1 / 1; }
.howto-side { display: grid; gap: 8px; }
.hw-legend { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-family: var(--f-num); font-weight: 700; font-size: .8rem; }
.hw-legend i { height: 12px; border: var(--lw) solid var(--ink); background: linear-gradient(90deg, rgb(244, 236, 214), rgb(176, 58, 46)); }
.hw-legend-sub { margin: 0; font-size: .8rem; color: var(--muted); }
.hw-formulas { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-family: var(--f-num); font-size: .95rem; }
.hw-formulas b { font-family: var(--f-body); display: inline-block; min-width: 4.2em; }
.hw-formulas em { font-style: normal; font-weight: 700; color: var(--accent); }
.hw-note { margin: 0; font-size: .8rem; line-height: 1.5; }
.howto-icons { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.howto-icons li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; font-size: .86rem; line-height: 1.5; }
.howto-icons svg { width: 40px; height: 40px; }
body.playing .howto { display: none !important; }
/* パスは字で書く（▶| の印だけだと、押すと答えが空で出ると分かりにくい。2026-10-29 オーナーの指摘「回答してないのに回答したことになる」） */
.console .d-pass { width: auto; padding: 0 12px; font-weight: 700; font-size: .85rem; }