/* Colors, typography and motion. Geometry is owned by layout.css. */
:root { --ink: #fff2d6; --muted: #c2c6b2; --gold: #f8d387; --line: #736244; --panel: #202f2c; --wood: #493427; --parchment: #f2e4bf; }
body { background: radial-gradient(ellipse at center, #384d43, #111c22 76%); }
button { border: 1px solid #8e7650; border-bottom-width: 3px; border-radius: 7px; background: linear-gradient(#3c5147, #263b35); box-shadow: inset 0 1px #ffffff18, 0 2px 5px #0004; transition: filter .15s, box-shadow .15s, translate .1s; }
button:hover:not(:disabled) { filter: brightness(1.17); border-color: #f5d994; background: linear-gradient(#4b6756, #2c493b); box-shadow: inset 0 1px #fff4, 0 0 14px #f8d38732; }
button:active:not(:disabled) { translate: 0 2px; box-shadow: inset 0 2px 5px #0007; border-bottom-width: 1px; }
button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid #ffe5a4; outline-offset: 3px; }
button.primary { color: #35271a; background: linear-gradient(#ffe5a2, #dba75d); border-color: #d0a761; border-bottom-color: #9b683d; font-weight: 900; text-shadow: 0 1px #fff8; }
button.primary:hover:not(:disabled) { color: #24170d; background: linear-gradient(#fff0bc, #edc27b); }
.game { border: 5px solid #654c35; border-radius: 16px; background: #172a29; box-shadow: inset 0 0 0 1px #ba9963, 0 18px 70px #0008, 0 0 0 2px #241c19; }
.masthead { border-bottom: 1px solid #8a735248; }
.masthead .eyebrow { font-size: .75rem; letter-spacing: .16em; }
h1 { font-size: clamp(1.1rem, 1.8vw, 1.6rem); }
.expedition-tools { font-size: .8rem; }
.clear-count { color: #e0d0a7; white-space: nowrap; }
.gold { font-size: .88rem; background: #342e22; border: 1px solid #b29a60; }
#journey { scrollbar-color: #9a8258 #1a2a28; }
.game footer { font-size: .75rem; }
.adventure-notice { color: #eeffca; border: 1px solid #789363; background: #2e4935; border-radius: 7px; font-size: .85rem; }
.journey-panel { border: 2px solid #8e7550; box-shadow: inset 0 0 0 2px #1a2824, inset 0 0 25px #0002, 0 5px 12px #0003; border-radius: 10px; background: linear-gradient(135deg, #304236, #1e302d); }
.command-panel { border: 2px solid #8e7550; box-shadow: inset 0 0 0 2px #1a2824, inset 0 0 25px #0002, 0 5px 12px #0003; border-radius: 10px; background: linear-gradient(135deg, #304236, #1e302d); }
.arena { border: 2px solid #8e7550; box-shadow: inset 0 0 0 2px #1a2824, inset 0 0 25px #0002, 0 5px 12px #0003; border-radius: 10px; background: linear-gradient(135deg, #304236, #1e302d); }
.journey-panel h2 { font-size: clamp(1.1rem, 2vw, 1.65rem); }
.town-stage { border: 2px solid #9d8053; border-radius: 10px; background: #74816c; isolation: isolate; box-shadow: inset 0 0 70px #182c2744; }
.town-stage::before, .town-stage::after { content: ''; background: linear-gradient(#84917b, #a6a6b6); }
.town-stage::after { background: linear-gradient(#c2b87e, #68785e); }
.town-caption { border-left: 3px solid #e5ca8a; background: #20372fdd; box-shadow: 0 4px 15px #24372c44; border-radius: 0 8px 8px 0; }
.town-caption h2 { font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 600; }
.building-hotspot { background: transparent; border: 2px solid transparent; border-radius: 42% 42% 12% 12%; box-shadow: none; }
.building-hotspot:hover:not(:disabled), .building-hotspot:focus-visible { background: #ffe9a025; border-color: #ffe3a278; box-shadow: 0 0 24px #fff0bd88, inset 0 0 35px #ffe9a044; }
.building-label { background: #463627f2; border: 1px solid #e2bf7d; border-bottom: 3px solid #95734d; border-radius: 5px; white-space: nowrap; color: #fff1cc; text-shadow: 0 1px #000; font-size: .9rem; }
.building-hint { background: #20352eea; color: #fff4d4; border-radius: 4px; font-size: .75rem; white-space: nowrap; opacity: 0; }
.building-hotspot:hover .building-hint, .building-hotspot:focus-visible .building-hint { opacity: 1; }
.depart-button { font-size: clamp(1.05rem, 1.5vw, 1.4rem); letter-spacing: .03em; }
.secondary { background: #263c32ee; }
.village-effects { pointer-events: none; }
.lantern-glow { background: radial-gradient(#ffdd8a99, #ffb45044 30%, transparent 70%); animation: lantern 2.7s ease-in-out infinite alternate; mix-blend-mode: screen; }
.chimney-smoke { background: #f7e5ce77; filter: blur(5px); border-radius: 50%; animation: smoke 4s ease-out infinite; }
.smoke-two { animation-delay: -2s; }
.firefly { background: #fff2bb; border-radius: 50%; box-shadow: 0 0 9px 3px #fce8a56e; animation: firefly 5s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -.7s); }
.travel-party .member { border-color: #8c7952; border-radius: 8px; background: linear-gradient(#394537, #23382f); }
.travel-party .member-head strong { font-size: .88rem; white-space: nowrap; }
.portrait { border-radius: 50%; border: 2px solid #ead39b; background: radial-gradient(circle at 33% 25%, #ffffff88, transparent 50%), var(--unit-color, #9fbab0); box-shadow: 0 2px 0 #142823, inset 0 -6px 10px #0002; color: #20312d; font-weight: 900; font-size: 1rem; animation: breathe 3s ease-in-out infinite alternate; }
.portrait img { object-fit: cover; }
.portrait-face { text-shadow: 0 1px #fff5; }
.portrait-large { font-size: 2.8rem; border-width: 4px; }
.travel-party .travel-vitals { font-size: .75rem; }
.travel-party progress { border-radius: 4px; accent-color: #a5cf88; }
.travel-party .mp-progress { accent-color: #87bce3; }
.item-icon { font-size: 1.05rem; font-weight: 900; color: #fff4d3; border: 2px solid #b5b994; border-radius: 7px; background: linear-gradient(135deg, #ffffff33, transparent 60%), color-mix(in srgb, var(--item-color, #779578) 32%, #1d342e); box-shadow: inset 0 0 0 2px #20342b88, inset 0 -7px 12px #0004; }
.item-icon[data-tier='3'], .item-icon[data-tier='4'], .item-icon[data-tier='5'] { border-color: #8bd0e6; }
.item-icon[data-tier='6'], .item-icon[data-tier='7'] { border-color: #dab1ee; }
.item-icon[data-tier='8'], .item-icon[data-tier='9'] { border-color: #f5cf7b; box-shadow: 0 0 7px #f1d28644, inset 0 -7px 12px #0004; }
.party-gear .item-icon { font-size: .75rem; border-width: 1px; }
.upgrade-badge { color: #deef9c; font-size: .75rem; }
.game-modal, .confirmation, .equipment-dialog { border: 4px solid #96764d; border-radius: 12px; color: var(--ink); background: linear-gradient(135deg, #354535, #1c302c); box-shadow: inset 0 0 0 1px #c9ad75, 0 25px 90px #000b; scrollbar-color: #b59a66 #263b31; }
.game-modal::backdrop, .confirmation::backdrop, .equipment-dialog::backdrop { background: #081713b8; backdrop-filter: blur(4px); }
.game-modal[open], .confirmation[open], .equipment-dialog[open] { animation: modal-in .2s ease-out; }
.modal-heading { border-bottom: 1px solid #a0895d66; }
.modal-heading h2 { font-size: 1.4rem; color: #ffe4a5; }
.shop-balance { text-align: right; color: #ffe4a5; font-variant-numeric: tabular-nums; }
.shop-tabs [aria-selected='true'] { background: #d5b77c; color: #2a2d22; border-color: #fae4ab; }
.item-tile { background: #20372fea; }
.item-tile b { font-size: .85rem; line-height: 1.45; word-break: keep-all; }
.item-tile .price { color: #ffe0a1; font-size: .85rem; }
.item-tile small { font-size: .75rem; }
.item-tile[aria-pressed='true'], .gear-slot-card[data-selected='true'] { border-color: #ffdc91; background: #4b4e32; box-shadow: 0 0 0 1px #ffe6a2, inset 0 0 22px #e4c27b22; }
.item-tile[data-locked='true'] { background: #26322d; color: #bdc7b7; }
.item-tile[data-locked='true'] .item-icon { filter: grayscale(.8); opacity: .7; }
.lock-label { color: #e5cba2; font-size: .75rem; line-height: 1.5; }
.lock-label::before { content: '▣ '; }
.item-image { object-fit: contain; }
.shop-detail { border: 2px solid #9e8e61; border-radius: 9px; background: #172e28; line-height: 1.65; }
.shop-detail h3 { font-size: 1.2rem; }
.bag-count { color: #d8dfbf; }
.shop-member-compare { border-top: 1px solid #67734c; font-size: .85rem; }
.shop-member-compare summary { cursor: pointer; }
.roster-choice { text-align: left; font-size: .85rem; }
.roster-choice small { font-size: .75rem; white-space: nowrap; }
.roster-choice[aria-pressed='true'] { border-color: #ffdf97; background: #535237; }
.member-profile { text-align: center; border: 1px solid #8a8058; border-radius: 8px; background: #1b332a; }
.member-profile h3 { font-size: 1.3rem; }
.role-label { color: #e0d6b4; font-size: .85rem; }
.profile-stats > div { background: #3a4b38; border: 1px solid #717550; border-radius: 4px; }
.profile-stats dt { font-size: .75rem; color: #cbd1b7; }
.profile-stats dd { font-weight: 800; }
.gear-slot b { font-size: .8rem; }
.gear-slot small { font-size: .75rem; line-height: 1.45; }
.unequip { font-size: .8rem; }
.member-skills h3, .equipment-bag h3 { color: #ffe0a1; font-size: .95rem; }
.skill-entry { border-left: 3px solid #d4be82; background: #172e27; border-radius: 3px; }
.skill-entry h4 { font-size: .9rem; }
.skill-entry small { color: #efd8a9; font-size: .75rem; }
.skill-entry p { color: #cdd3bc; font-size: .78rem; line-height: 1.55; }
.skill-entry.locked { border-left-color: #64705b; background: #25362e; }
.equipment-preview { background: #172d27; border: 1px solid #91805a; border-radius: 8px; }
.equipment-preview h3 { font-size: .95rem; }
.equipment-preview p { color: #d1d7bc; line-height: 1.6; font-size: .85rem; }
.stat-comparison { font-size: .9rem; }
.stat-comparison > div { border: 1px solid #78956566; border-radius: 5px; background: #253e30; }
.stat-comparison dt { color: #e6ddbe; }
.stat-comparison dd { font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-comparison [data-change='up'] dd { color: #b7f3a6; }
.stat-comparison [data-change='down'] dd { color: #ffb5a4; }
.unchanged-stats { color: var(--muted); font-size: .75rem; font-weight: 400; }
.empty-bag { color: #d4d9c2; font-size: .85rem; line-height: 1.6; }
.setting-row { border-bottom: 1px solid #8b85533d; }
.setting-row input { accent-color: #e6c981; }
.danger { color: #ffc5ae; border-color: #a8735f; }
.inn-modal { text-align: center; }
.inn-sign { font-size: 5rem; color: #ffd98b; text-shadow: 0 0 25px #ffd98b55; }
.bestiary-list { font-size: .85rem; }
.bestiary-modal summary { cursor: pointer; }
.world-heading { color: #e8d7ab; }
.world-map { background: radial-gradient(ellipse at 20% 25%, #71845d80, transparent 36%), radial-gradient(ellipse at 75% 70%, #81908488, transparent 42%), repeating-linear-gradient(20deg, #263e3444 0 3px, transparent 3px 55px), #354f3f; border: 3px solid #947b50; border-radius: 10px; box-shadow: inset 0 0 60px #0e261b88; }
.world-map path { fill: none; stroke: #c1b38a; stroke-width: 5; stroke-dasharray: 8 8; vector-effect: non-scaling-stroke; }
.world-map path.unlocked { stroke: #fbe3a0; stroke-dasharray: 8 8; filter: drop-shadow(0 0 3px #ffe9a1); }
.world-node { transform: translate(-50%, -50%); border-radius: 42% 42% 8px 8px; background: #233d30; }
.world-node img { object-fit: cover; border-radius: 40% 40% 3px 3px; }
.world-node b { font-size: .82rem; }
.world-node small { font-size: .75rem; color: #ffe3a4; }
.world-node[data-locked='true'] img { filter: brightness(.5) saturate(.3); }
.world-node[aria-pressed='true'] { border-color: #fff0b1; box-shadow: 0 0 20px #f5d68c77; }
.region-detail { background: var(--parchment); color: #433621; border: 3px solid #b69a66; border-radius: 9px; line-height: 1.7; }
.region-preview { object-fit: cover; border-radius: 5px; }
.region-detail .eyebrow { color: #71592c; }
.region-detail h2 { font-size: 1.4rem; }
.region-detail p { font-size: .85rem; }
.recommended-level { font-weight: 800; }
.first-reward { border-block: 1px solid #bdad83; }
.route-map > h2 { font-size: 1.1rem; }
.route-map > .journey-copy { font-size: .8rem; }
.route-board { border: 2px solid #d4c28e; }
.route-board .route, .route-board.vertical-route .route { border-radius: 50%; border-width: 3px; background: #f4eddb; box-shadow: 0 3px 0 #333b27; }
.route .route-kind, .route .route-state { clip-path: inset(50%); }
.route > strong { font-size: .75rem; color: #fff5d7; background: #25372af0; border: 1px solid #bcba8e; border-radius: 4px; line-height: 1.4; pointer-events: none; opacity: 0; }
.route:hover > strong, .route:focus-visible > strong { opacity: 1; }
.route-board .route[data-state='open'] { background: #fff4c8; border-color: #b27a1f; outline: 2px solid #ffe292; animation: route-glow 1.1s ease-in-out infinite alternate; }
.route-board .route[data-state='current'] { background: #c6e6b3; border-color: #397b43; outline: 3px solid #b8ef9d; opacity: 1; }
.route-board .route[data-state='passed'] { background: #b4c29e; opacity: .8; }
.route-board .route[data-state='locked'] { opacity: .5; filter: saturate(.3); }
.route-board path.locked { opacity: .22; stroke-width: 1.5; }
.route-board path.passed { opacity: .35; stroke-width: 2; }
.route-board path.open { stroke: #fff3ac; stroke-width: 5; stroke-dasharray: none; filter: drop-shadow(0 1px 2px #392a14); }
.route-tooltip { border: 2px solid #cbb37a; border-radius: 7px; background: #18372ff5; color: #fff3d0; font-size: .8rem; line-height: 1.55; box-shadow: 0 4px 20px #0008; pointer-events: none; }
.route-info { color: #e6d9b9; font-size: .78rem; }
.route-info summary { cursor: pointer; }
.game[data-phase='title'] .expedition-tools { visibility: hidden; }
.initiative h2 { font-size: .75rem; }
.turn { background: transparent; border: 0; border-radius: 50%; }
.turn .portrait { font-size: .75rem; }
.turn > b { clip-path: inset(50%); }
.turn > small { clip-path: inset(50%); }
.turn[aria-current='step'] { background: transparent; }
.turn[aria-current='step'] .portrait { border-color: #fff1a5; box-shadow: 0 0 10px #ffe2a66e; }
.combat .member { border-color: #77714a; background: #253b30; }
.combat .member-head .portrait { font-size: .8rem; }
.combat .member[data-current='true'] { border-color: #ffe4a4; box-shadow: inset 0 0 18px #e4c88122; }
.meter progress::-webkit-progress-value { transition: width .25s ease-out; }
.active-member { color: #ffdfa1; background: #172e26; font-weight: 800; }
.active-member small { font-size: .75rem; color: #d2d7bd; }
.battle-record { font-size: .75rem; background: #122920; }
.battle-record > summary { cursor: pointer; color: #d1caab; }
.battle-line { line-height: 1.5; }
.moon-status { font-size: .75rem; }
.armor-help { font-size: .75rem; }
.poison-help { font-size: .75rem; }
.wave-guide { font-size: .75rem; }
.heat-guide { font-size: .75rem; }
.flee-help { font-size: .75rem; }
.result-card { background: linear-gradient(#f6eac8, #e7d3a4); border: 4px solid #b8a16c; border-image: none; border-radius: 10px; color: #473a24; }
.result-card > h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
.result-banner { color: #76551f; font-weight: 900; letter-spacing: .16em; font-size: clamp(1.5rem, 3vw, 2.5rem); }
.result-card[data-outcome='defeat'] .result-banner { color: #943e39; }
.result-card .member-dialogue { text-align: left; }
.result-card .journey-tags span { border-width: 2px; }
.result-card .item-icon { color: #fff3cb; }
.result-xp { font-size: .8rem; }
.xp-track { border: 1px solid #8e8055; background: #c1b18b; border-radius: 5px; }
.xp-fill { background: linear-gradient(90deg, #7d9f69, #c6d78c); animation: xp-fill .6s ease-out; }
.level-up { isolation: isolate; color: #725221; font-weight: 800; border: 1px solid #bda268; border-radius: 7px; background: #fff1bd; }
.level-up::before { content: ''; background: linear-gradient(90deg, transparent, #fffbe3, transparent); animation: level-pillar .6s ease-out; }
.level-up::after { content: 'LEVEL UP!'; color: #6c4d17; font-size: .85rem; letter-spacing: .15em; }
.loot-chest { filter: drop-shadow(0 0 12px #f6d58d55); }
.chest-base { border: 3px solid #d4ab62; background: repeating-linear-gradient(90deg, #7c5839 0 13px, #4d3827 14px 16px); border-radius: 3px; }
.chest-lid { border: 3px solid #d4ab62; border-radius: 7px 7px 0 0; background: #8b613f; transform-origin: 50% 100%; animation: chest-open .5s ease-out both; }
.equipment-dialog h2 { color: #ffe1a6; }
.equipment-dialog .new-equipment { border: 1px solid #bda16b; background: #3f4d33; }
.dialogue-bubble { transform: translateX(-50%); background: #172e28f2; border: 2px solid #d0b77a; box-shadow: inset 0 0 0 2px #394b32, 0 6px 25px #0006; border-radius: 8px; pointer-events: none; font-size: .85rem; }
.dialogue-name { color: #f7d58c; font-size: .8rem; }
.game[data-phase='battle'] .dialogue-bubble { font-size: .75rem; }
.member-dialogue { border: 1px solid #a9a074; border-left: 4px solid #e3c17b; border-radius: 6px; font-size: .85rem; }
.scene-enter { animation: scene-enter .22s ease-out; }
.value-pulse { animation: value-pulse .35s ease-out; }
.coin-gain { animation: value-pulse .45s ease-out; }
.coin-gain::after { content: '● ● ●'; color: #ffdd81; animation: coin-in .5s ease-out both; pointer-events: none; }
@keyframes breathe { to { transform: translateY(-2px) scale(1.025); } }
@keyframes lantern { to { opacity: .4; transform: scale(.85); } }
@keyframes smoke { from { transform: translate(0,0) scale(.4); opacity: 0; } }
@keyframes smoke { 20% { opacity: .6; } }
@keyframes smoke { to { transform: translate(-20px,-70px) scale(2); opacity: 0; } }
@keyframes firefly { from { transform: translate(-8px,3px); opacity: .2; } }
@keyframes firefly { to { transform: translate(10px,-15px); opacity: .8; } }
@keyframes route-glow { to { box-shadow: 0 0 0 6px #ffe49488, 0 0 22px 5px #ffe494aa; } }
@keyframes scene-enter { from { opacity: .3; transform: translateY(5px); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes value-pulse { 40% { filter: brightness(1.6); scale: 1.03; } }
@keyframes coin-in { from { opacity: 1; transform: translate(-10px,35px); } }
@keyframes coin-in { to { opacity: 0; transform: translate(15px,-5px); } }
@keyframes chest-open { to { transform: perspective(150px) rotateX(-65deg); translate: 0 -6px; } }
@keyframes level-pillar { from { opacity: 1; transform: scaleY(.05); } }
@keyframes level-pillar { 45% { transform: scaleY(1.5); } }
@keyframes level-pillar { to { opacity: 0; } }
@keyframes xp-fill { from { width: var(--xp-before, 0%); } }
@keyframes hit-shake { 20%, 60% { transform: translateX(var(--shake, 2px)); } }
@keyframes hit-shake { 40%, 80% { transform: translateX(calc(-1 * var(--shake, 2px))); } }
.travel-party progress { appearance: none; border: 0; background: #334b3c; }
.game-modal .modal-heading { background: #293e31; box-shadow: 0 5px 8px #293e31; }
.game > .dialogue-bubble { transform: none; }
.game[data-phase='battle'] > .dialogue-bubble { transform: none; }
.level-up-grid .level-up { font-size: .85rem; }
.game[data-phase='result'] #scene { border-radius: 10px; background: linear-gradient(#112e2777, #112e27bb), var(--scene-art) center / cover; }
.result-card .journey-copy { word-break: keep-all; }
.commands button { white-space: nowrap; }
.result-dialogue { text-align: left; }
.result-dialogue summary { cursor: pointer; font-size: .8rem; }
.stat-comparison [data-change='up'] dd, .stat-comparison [data-change='down'] dd { animation: value-pulse .35s ease-out; }
.travel-party progress::-webkit-progress-bar { background: #334b3c; }
.travel-party progress::-webkit-progress-value { background: #a7cf87; border-radius: 4px; transition: width .25s; }
.travel-party .mp-progress::-webkit-progress-value { background: #83bce6; }
.travel-party progress::-moz-progress-bar { background: #a7cf87; }
.travel-party .mp-progress::-moz-progress-bar { background: #83bce6; }
html[data-quick='true'] :not(.title-sprite):not(.title-skin), html[data-quick='true'] *::before, html[data-quick='true'] *::after { animation-duration: .1s !important; transition-duration: .1s !important; }
html[data-quick='true'] .village-effects *, html[data-quick='true'] .portrait, html[data-quick='true'] .route:not(:disabled) { animation: none !important; }
.shop-grid, .shop-detail { scrollbar-gutter: stable; }
.shop-grid .item-tile { border: 2px solid var(--tier-color, #aaad80); border-bottom-width: 4px; }
.shop-tabs [aria-selected='true']:hover { background: #e7cb91; color: #2a2d22; }
.item-tile[data-tier] { --tier-color: #b3c78f; }
.item-tile[data-tier='2'], .item-tile[data-tier='3'], .item-tile[data-tier='4'] { --tier-color: #88ceee; }
.item-tile[data-tier='5'], .item-tile[data-tier='6'], .item-tile[data-tier='7'] { --tier-color: #d5a4f5; }
.item-tile[data-tier='8'], .item-tile[data-tier='9'] { --tier-color: #ffce72; }
.shop-grid .item-tile[data-locked='false'][data-tier] { background: linear-gradient(140deg, color-mix(in srgb, var(--item-color) 32%, #193128), #193128); box-shadow: inset 0 0 12px #fff1, 0 0 5px color-mix(in srgb, var(--tier-color) 40%, transparent); }
.shop-grid .item-tile[data-locked='false'] .item-icon { border-color: var(--tier-color); background-color: var(--item-color); }
.shop-grid .item-tile[data-locked='true'] { border-color: #606c63; background: #202d28; color: #97a297; }
.shop-grid .item-tile[data-locked='true'] .item-icon { opacity: .25; filter: grayscale(1); }
.shop-grid .item-tile[data-locked='true'] .price { color: #9aa59a; }
.shop-grid .item-tile[data-locked='true']::before { content: ''; border: 4px solid #d9cba8; border-radius: 12px 12px 0 0; }
.shop-grid .item-tile[data-locked='true']::after { content: ''; border: 2px solid #d9cba8; border-radius: 4px; background: radial-gradient(circle at 50% 40%, #25382c 0 3px, transparent 3px), #b5a67e; }
.lock-label::before { content: none; }
.route-actions button { font-size: .8rem; }
.village-landscape { background: linear-gradient(#85978a, #a4a17b); }
.artwork-loading { translate: -50% 0; border: 1px solid #cdbb83; border-radius: 20px; background: #19352feb; color: #f8e7b7; font-size: .78rem; white-space: nowrap; pointer-events: none; }
.monster-portrait { background-repeat: no-repeat; background-color: #46594b; animation: none; }
.combat .stage > .dialogue-bubble { font-size: .75rem; line-height: 1.2; }
.combat .active-member { font-size: .8rem; background: #172e26dd; pointer-events: none; }
.combat .battle-record { background: #122920ed; }
.combat .moon-status { background: #172e26ed; border-radius: 5px; }
.combat .member-head small { text-overflow: ellipsis; white-space: nowrap; }
.command-back { font-size: .75rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.adventure-notice { translate: -50% 0; pointer-events: none; }
.turn-inspect { border: 0; border-radius: 8px; background: transparent; box-shadow: none; translate: none; }
.turn-inspect:hover:not(:disabled) { border: 0; border-radius: 8px; background: transparent; box-shadow: none; translate: none; }
.turn-inspect:active:not(:disabled) { border: 0; border-radius: 8px; background: transparent; box-shadow: none; translate: none; }
.turn-inspect[aria-expanded='true'] { box-shadow: inset 0 0 0 2px #ffe292; }
.turn-detail { color: #ffebbc; background: #213a31; border-radius: 6px; font-size: .75rem; }
.setting-row.volume-row { font-size: .8rem; }
.volume-row label { white-space: nowrap; }
.volume-row output { text-align: right; font-variant-numeric: tabular-nums; }
.speaker-icon::before { content: ''; background: currentColor; clip-path: polygon(0 32%, 35% 32%, 100% 0, 100% 100%, 35% 68%, 0 68%); }
.speaker-icon::after { content: ''; border-right: 2px solid currentColor; border-radius: 50%; }
.speaker-toggle[data-muted='true'] .speaker-icon::after { border: 0; border-radius: 0; background: currentColor; transform: rotate(-45deg); box-shadow: 0 -2px 0 #233d30; }
.combat .commands button { white-space: normal; }
.combat .choices > button { white-space: normal; }
.combat .choices small { font-size: .75rem; }
.combat .member-head small { text-overflow: clip; white-space: normal; }

/* Step 71: the text grade remains readable without relying on color. */
.game .blessing-tag { background: #242735; color: #fff; border-radius: 6px; white-space: normal; }
.game .blessing-tag[data-grade="common"] { color: #fff; }
.game .blessing-tag[data-grade="rare"] { color: #8cc9ff; }
.game .blessing-tag[data-grade="epic"] { color: #ddacff; }
.game .blessing-tag[data-grade="legendary"] { color: #ffdb70; }
.game .blessing-placeholder { border: 1px solid currentColor; border-radius: 50%; }