/* Surface styling only. Board illustrations, character layers, layouts and
   gameplay animations remain in road.css and road-ui.js. */
:root {
  --bg: #111114;
  --pink: #f347a0;
  --cyan: #a4c8d0;
  --gold: #e8dfcc;
  --muted: #aaaab4;
  --line: #33333b;
  --surface: #1a1a20;
  --raised: #24242c;
  color: #f3f3f5;
}
body { background: var(--bg); }
button, input { border-radius: 6px; }
button { background: var(--raised); border-color: var(--line); }
button:hover:not(:disabled) { background: #303038; }
.primary { background: var(--pink); color: #170c13; border-color: transparent; }
.primary:hover:not(:disabled) { background: #ff70b9; }
.secondary { background: #25252d; color: #f3f3f5; }
.subtle { background: transparent; }
.topbar { background: #111114; border-color: #29292f; }
.logo, .logo span, .welcome h1, .welcome h1 span {
  font-family: 'Arial Narrow', 'Yu Gothic', system-ui, sans-serif;
  font-style: normal;
  font-weight: 800;
}
.logo { letter-spacing: .7px; }
.logo span { color: var(--pink); }
.welcome h1 { letter-spacing: -1px; }
.welcome, .scene-layout, .battle-stage, .restored-combat, .event-art {
  background: #111114 var(--scene) center / cover no-repeat;
}
.welcome:before { background: #11111440; }
.welcome { box-shadow: inset 0 0 0 100vmax #11111426; }
.welcome-copy { background: #111114ec; padding: 22px; border-radius: 8px; }
.splash-person { filter: none; }
.start-panel { background: #19191f; border-color: #38383f; border-radius: 8px; box-shadow: none; }
.start-panel input { background: #111114; border-color: #50505b; }
.welcome h1, .chapter-heading h2 { text-shadow: none; }
.status, .command-card, .party-card, .turn-header,
.shop-item, .dialogue, dialog, .roulette-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}
.status { border-color: #34343c; }
.cash { color: #f3f3f5; }
.command-card { border-color: #3a3a43; }
.party-card { background: transparent; }
.portrait { background: #29292f; border-color: #57525b; }
.meter-track { background: #08080c; border-radius: 3px; }
.meter-fill { background: #f347a0; border-radius: 3px; }
.meter.gauge .meter-fill { background: #81b8c5; }
.meter.enemy .meter-fill { background: #e36571; }
.recovery { background: #202b2a; border: 0; border-radius: 4px; color: #b9d8c8; }
.next-tiles span { background: #24242b; border-radius: 4px; color: #c4c4cb; }
.map-panel { background: #18181d; border-color: #3b3b43; border-radius: 8px; }
.map-panel .map-heading { background: transparent; border: 0; border-radius: 0; }
.map-toggle { background: #24242b; border-color: #44444e; }
.map-panel .map-party { background: transparent; border: 0; border-radius: 0; }
.travel-layout .map-panel .tile[aria-label*="現在地"] { filter: none; }
.restored-route #party-token { filter: none; }
.scene-layout { box-shadow: inset 0 0 0 100vmax #09090d40; }
.chapter-heading { background: #111114e8; padding: 12px 16px; border-left: 3px solid var(--pink); }
.story-reader .chapter-heading { right: auto; max-width: 88%; }
.chapter-heading h2 { margin-bottom: 0; }
.chapter-heading .eyebrow { margin-bottom: 5px; }
.dialogue { background: #15151bf5; border-top: 2px solid var(--pink); }
.story-reader .dialogue footer { border-color: #36363e; }
.story-lines { scrollbar-color: #5b5b67 #19191f; }
.story-replay { background: transparent; border-color: #46464f; color: #d7d7df; }
.event-layout { background: transparent; }
.event-art { border-color: #3b3b43; border-radius: 8px; }
.result-mark { font-family: system-ui, sans-serif; font-size: 52px; font-style: normal; font-weight: 800; opacity: 1; }
.paper-tag { background: #25252d; border-color: #494951; border-radius: 4px; color: #dedee5; }
.shop-item button { color: #f1d0e2; }
.shop-footer { background: #111114f5; border-top: 1px solid #33333b; }
.toast { color: #b9d8c8; }
dialog::backdrop { background: #07070bbf; backdrop-filter: none; }
.turn-header { background: #1c1c23; }
.action-slots i { box-shadow: none; }
.action-slots i.used { background: #44444e; }
.action-tabs button { background: transparent; border-color: #3b3b43; color: #bdbdc7; }
.action-tabs .selected { background: #272029; border-color: var(--pink); color: #fff; }
.action-button { background: #202027; border-color: #37373f; }
.action-button strong { color: #f6f6f8; }
.action-button small { color: #b7b7c2; }
.action-button .cost { color: #d2b8c7; }
.last-actions { border-color: #33333b; }
.restored-combat .enemy-heading { background: #15151de8; border-color: #45454e; border-radius: 6px; }
.enemy-heading h2 { text-shadow: none; }
.restored-combat .enemy-intent { background: #15151df0; border-color: #47474f; border-left: 3px solid var(--pink); border-radius: 5px; }
.enemy-intent strong { color: #f1c0d9; }
.arena-floor { background: #d5c1df0a; border-bottom-color: #d5c1df1c; }
.arena-versus { font-family: system-ui, sans-serif; font-style: normal; font-weight: 800; color: #ffffff50; text-shadow: none; }
.arena-dice span { background: #19191fe8; color: #e7e7ed; border-color: #45454f; border-radius: 4px; }
.combat-cutin { background: #17171eea; border-block-color: #6f3954; border-left: 4px solid var(--pink); }
.combat-cutin strong { text-shadow: none; }
.combat-resolution { background: #17171ef5; border-color: #68505e; border-radius: 6px; }
.combat-victory { font-family: system-ui, sans-serif; font-style: normal; color: #fff0d4; text-shadow: 0 2px 4px #0009; }
#roulette { background: #08080dd6; backdrop-filter: none; }
.roulette-card { background: #19191f; border-color: #55505a; border-radius: 10px; }
.roll-cell { background: #111116; border-color: #41414a; border-radius: 6px; }
.roll-cell.active { background: var(--pink); color: #21101b; border-color: #ffb9dc; box-shadow: none; }
.roll-cell.active .face { color: #21101b; }
.movement-roll .legacy-roll-panel { background: #17171d; border-color: #66505e; border-radius: 10px; box-shadow: 0 15px 40px #0006; }
.physical-die, .legacy-roll-right .physical-die { background: #fff0f7; border-color: #ffe1ef; box-shadow: 0 5px 0 #9b6c87; }
.legacy-roll-right .physical-die .pip { background: #a82b6d; }
.legacy-roll-right #roll-outcome { color: #ff83bd; text-shadow: none; }
.legacy-roll-right #roll-caption { color: #d4d4df; }
@media(max-width:700px) {
  .welcome { background-size: auto 450px; background-position: center top; }
  .welcome-copy { padding: 0; background: transparent; }
  .start-panel { background: #19191ff5; }
  .chapter-heading { padding: 9px 12px; }
  .story-reader .chapter-heading { max-width: 91%; }
  .result-mark { font-size: 38px; }
}