/* 夕焼け一騎打ち固有の見た目（共通は ../common/base.css） */
@font-face {
  font-family: 'MikiriBrush';
  src: url('fonts/brush.woff2') format('woff2');
  font-display: swap;
}
.board-wrap { position: relative; max-width: 640px; margin: 0 auto; }
#board { display: block; width: 100%; height: auto; border-radius: var(--radius); touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
.turnbar .status { gap: 8px; }
.turnbar .status .spacer { flex: 1; }
.lives { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.life { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; }
.life.on { background: var(--p-red); }

/* 筆文字 */
.brush { font-family: 'MikiriBrush', var(--font); fill: #FFFFFF; paint-order: stroke; stroke: #0B0A0F; stroke-width: 7px; stroke-linejoin: round; }
.brush.title { fill: #0B0A0F; stroke: #FFF4DE; stroke-width: 6px; }
.brush.intro { fill: #0B0A0F; stroke: #FFF4DE; stroke-width: 5px; animation: fadein .35s ease-out; }
.brush.intro.line { stroke-width: 4px; }
.brush.ready { fill: #0B0A0F; stroke: #FFF4DE; stroke-width: 6px; }
.brush.out { transition: opacity .3s; opacity: 0; }
.brush.signal { fill: #FFFFFF; stroke: #B5232E; stroke-width: 10px; animation: signal .09s ease-out; transform-box: fill-box; transform-origin: center; }
.brush.fakeq { fill: #0B0A0F; stroke: #FFF4DE; stroke-width: 6px; }
.brush.verdict { stroke-width: 8px; animation: fadein .2s ease-out; }
.brush.verdict.good { fill: #FFFFFF; stroke: #0B0A0F; }
.brush.verdict.bad { fill: #0B0A0F; stroke: #FFF4DE; }
.detail { font: 700 20px var(--font); fill: #FFFFFF; paint-order: stroke; stroke: #0B0A0F; stroke-width: 5px; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes signal { from { scale: 1.5; opacity: .3; } to { scale: 1; opacity: 1; } }
.brush-h { font-family: 'MikiriBrush', var(--font); font-weight: 400; font-size: 2.2rem; }

/* 斬撃・流れる線・フェイント */
.slash-line.draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw .12s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.slash.fade { transition: opacity .5s; opacity: 0; }
.streaks { animation: streak .45s ease-out forwards; }
@keyframes streak { from { opacity: 1; } to { opacity: 0; } }
.fake.bird.fly { animation: fly 1.6s linear forwards; }
@keyframes fly { from { transform: translate(-60px, 150px); } to { transform: translate(660px, 60px); } }
.fake.leaf.fall { animation: fall 1.8s ease-in forwards; }
@keyframes fall { 0% { transform: translate(330px, 60px) rotate(0deg); } 50% { transform: translate(280px, 170px) rotate(160deg); } 100% { transform: translate(310px, 300px) rotate(330deg); opacity: 0; } }
.twitch { animation: twitch .22s ease-out; }
@keyframes twitch { 30% { translate: -5px 2px; } 60% { translate: 3px 0; } }
.dash-right { animation: dashR .18s ease-out; }
.dash-left { animation: dashL .18s ease-out; }
@keyframes dashR { from { translate: -120px 0; } }
@keyframes dashL { from { translate: 120px 0; } }
@media (prefers-reduced-motion: reduce) {
  .brush, .twitch, .dash-right, .dash-left, .streaks { animation: none !important; }
  .fake.bird.fly { animation-duration: 1.6s; }
}

/* 大きな「斬る」ボタン（盤のすぐ下。タップしやすく） */
.cut { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 640px; margin: 10px auto 0; min-height: 76px; gap: 0; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.cut .label { font-family: 'MikiriBrush', var(--font); font-weight: 400; font-size: 30px; line-height: 1.1; }
.cut kbd { font: 14px var(--font); opacity: .9; background: none; border: 0; box-shadow: none; padding: 0; color: inherit; }
.cut[data-mode="off"] kbd, .cut[data-mode="next"] kbd { visibility: hidden; }
.cut[data-mode="armed"] { background: #2B1E1A; border-color: #2B1E1A; color: #FFF4DE; }


.result-box { inset: 10% 8% auto; }
.result-box .score-line { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.result-box h2.good { color: var(--ng); }

@media (max-width: 480px) {
  .game-lead { display: none; }
  .turnbar .status .of { display: none; }
  .turnbar .status { font-size: 1rem; }
  .result-box { inset: 4% 3% auto; padding: 16px; }
  .brush-h { font-size: 1.8rem; }
}

/* 英語のページ（index.en.html）: 筆文字は英字だけの fonts/brush-en.woff2 */
@font-face {
  font-family: 'MikiriBrushEn';
  src: url('fonts/brush-en.woff2') format('woff2');
  font-display: swap;
}
:root:lang(en) .brush, :root:lang(en) .brush-h, :root:lang(en) .cut .label { font-family: 'MikiriBrushEn', var(--font); }
/* 英語: スマホ幅では結果の枠が盤より長くなるので、下の「Draw」ボタンより手前に出す */
:root:lang(en) .result-box { z-index: 2; }
@media (max-width: 480px) {
  :root:lang(en) .result-box .score-line { font-size: 1.05rem; }
  :root:lang(en) .result-box .note { font-size: .85rem; }
}
/* 上のバーの高さを一定に（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; } }
/* 上のバーの高さ ここまで */