.play-mode { display: flex; padding: 4px; border: 1px solid #dce2cd; border-radius: 24px; background: #eeefe3; }
.play-mode button { padding: 8px 17px; border-radius: 20px; font: 600 12px var(--sans); color: #768367; letter-spacing: 0; }
.play-mode button[aria-pressed='true'] { color: #fffdf5; background: #60774d; box-shadow: 0 2px 4px #485c361c; }
.play-mode button:focus-visible { outline: 2px solid #c97845; outline-offset: 3px; }
#adventure-panel[data-mode='score-attack'] .scene { height: clamp(200px, 27vh, 270px); }
#adventure-panel[data-mode='score-attack'] .practice-panel { padding-top: 8px; }
#adventure-panel[data-mode='score-attack'] .typing-area { padding: 4px 0 5px; }
#adventure-panel[data-mode='score-attack'] #typing-instruction { margin-bottom: 2px; }
#adventure-panel[data-mode='score-attack'] .word-reading { margin: 0; line-height: 1.5; }
#adventure-panel[data-mode='score-attack'] .token-line { height: 58px; }
.score-hud { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 20px; padding: 10px 24px 13px; background: #fbfbf3; align-items: end; }
.score-label { display: block; font: 600 10px var(--sans); letter-spacing: .07em; color: #667752; margin-bottom: 3px; }
.score-hud strong { font: 500 30px/1.15 var(--mono); letter-spacing: -.06em; color: #536b41; }
.score-hud .score-main > strong { font-size: 32px; color: #c57643; }
.score-hud small { font: 500 12px var(--sans); letter-spacing: 0; margin-left: 6px; }
.score-main { position: relative; }
.score-gain { display: inline-block; margin-left: 12px; color: #be703c; font: 600 12px var(--sans); letter-spacing: 0; }
.score-spark { color: #bb9d5b; font-size: 25px; margin-left: 12px; }
.charge-meter { display: inline-flex; gap: 4px; margin-left: 12px; vertical-align: middle; }
.charge-meter i { width: 9px; height: 9px; border-radius: 50%; background: #e2e5d3; border: 1px solid #c9cfb4; transition: background .2s, transform .2s; }
.charge-meter[data-charge="1"] i:nth-child(-n+1), .charge-meter[data-charge="2"] i:nth-child(-n+2), .charge-meter[data-charge="3"] i:nth-child(-n+3), .charge-meter[data-charge="4"] i:nth-child(-n+4), .charge-meter[data-charge="5"] i:nth-child(-n+5) { background: #e48a54; border-color: #c5713f; }
.charge-meter.ready i { transform: scale(1.15); box-shadow: 0 0 6px rgba(228, 138, 84, .7); }
.charge-meter[hidden] { display: none; }
.is-charged { filter: drop-shadow(0 0 3px rgba(255, 120, 60, .9)) drop-shadow(0 0 7px rgba(255, 160, 90, .6)); }
@media (prefers-reduced-motion: reduce) { .charge-meter i { transition: none; } .is-charged { filter: none; } }
.score-time-track { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: #e8eddb; }
#score-time-bar { width: 100%; height: 100%; background: #96ae70; transition: width .1s linear; }
.time-low .score-clock strong { color: #b66338; }
.time-low #score-time-bar { background: #d6965e; }
.score-record { display: grid; justify-items: end; text-align: right; color: #6f7f5a; font: 500 10px/1.6 var(--sans); }
.score-record strong { margin-left: 6px; font-family: var(--mono); font-size: 13px; }
#score-bonus { color: #8c754d; }
.score-hint { color: #828875; }
[data-mode='score-attack'] .cozy-badge { color: #96703f; }
#adventure-panel[data-game='meadow'][data-mode='score-attack'] .cozy-badge { display: none; }
.result-actions { display: flex; flex-direction: column; align-items: center; }
[data-mode='score-attack'] .result-card { max-width: 500px; }
[data-mode='score-attack'] .result-card .primary-button { min-width: 0; width: 100%; max-width: 260px; }
[data-mode='score-attack'] .result-card > h2 { margin: 10px 0 12px; }
.score-result > span { display: block; color: #798665; font: 500 11px var(--sans); letter-spacing: .06em; }
.score-result > strong { display: block; font: 500 56px/1.2 var(--mono); color: #c57643; letter-spacing: -.06em; }
.score-result small { font: 500 16px var(--sans); margin-left: 8px; }
.score-result > p { margin: 4px 0; font: 600 14px/1.7 var(--sans); color: #697b4d; }
.score-result #score-result-status { margin: 6px auto 10px; font-size: 11px; font-weight: 500; color: #828875; max-width: 340px; }
[data-mode='score-attack'] .result-card > p:first-of-type { display: none; }
[data-mode='score-attack'] .result-stats { padding: 10px 0; margin: 12px 0 0; }
[data-mode='score-attack'] .result-card .result-tip { margin: 6px 0 14px; }
#adventure-panel[data-game='kitchen'][data-mode='score-attack'] .result-tip { white-space: pre-line; }
[data-mode='score-attack'] .result-actions .text-button { margin-top: 8px; }
.result-hint { margin-top: 10px; font: 500 11px/1.6 var(--sans); color: #828875; }
html[lang='ja'] .score-label { letter-spacing: .02em; }
html[lang='ja'] .play-mode button { font-weight: 700; }
@media (max-width: 800px) {
  #adventure-panel[data-mode='score-attack'] .journey-panel { display: none; }
  .score-hud { grid-template-columns: 1.5fr 1fr 1fr; }
  .score-record { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: left; gap: 2px 14px; margin-top: -6px; padding-top: 6px; border-top: 1px solid #e7eada; }
  #score-bonus { margin-left: auto; }
}
@media (max-width: 520px) {
  .adventure-toolbar { flex-wrap: wrap; gap: 12px; }
  .play-mode { flex: 1 1 auto; }
  .play-mode button { flex: 1; padding: 8px 10px; font-size: 12px; }
  #adventure-panel[data-mode='score-attack'] .scene { height: 205px; }
  #adventure-panel[data-game='meadow'][data-mode='score-attack'] .scene-message { left: 18px; transform: none; max-width: calc(100% - 110px); }
  .score-hud { padding: 12px 17px 14px; gap: 12px 14px; grid-template-columns: 1.2fr 1fr 1fr; }
  .score-label { font-size: 10px; }
  .score-hud strong { font-size: 29px; }
  .score-hud .score-main > strong { font-size: 33px; }
  .score-spark { font-size: 18px; margin-left: 5px; }
  .charge-meter { margin-left: 6px; }
  .charge-meter i { width: 7px; height: 7px; }
  .score-gain { position: absolute; bottom: -13px; left: 0; margin: 0; font-size: 9px; white-space: nowrap; }
  #score-bonus { margin-left: 0; width: 100%; }
  [data-mode='score-attack'] .result-layer { padding: 12px; }
  [data-mode='score-attack'] .result-card { padding: 18px; }
  .score-result > strong { font-size: 54px; }
  .score-result #score-result-status { font-size: 10px; margin-bottom: 8px; }
}
@media (max-width: 380px) {
  .score-hud { grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; padding-inline: 14px; }
  .score-label { font-size: 9px; white-space: nowrap; }
  .score-hud strong { font-size: 25px; }
  .score-hud .score-main > strong { font-size: 28px; }
  .score-hud small { font-size: 10px; margin-left: 3px; }
  .score-spark { display: none; }
  .score-result > strong { font-size: 44px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  #score-time-bar { transition: none; }
}