:root {
  color-scheme: dark;
  --ink: #0a0d0d;
  --night: #0d1110;
  --panel: #151917;
  --panel-raised: #1b201d;
  --panel-soft: #202420;
  --line: #465047;
  --line-muted: #2c352f;
  --text: #eee8db;
  --muted: #aaa99a;
  --muted-2: #777f73;
  --gold: #d6b36f;
  --gold-soft: #a98b50;
  --blood: #a94347;
  --blood-dark: #60282d;
  --green: #86a084;
  --teal: #749b94;
  --shadow: 0 12px 38px #0008;
}
* { box-sizing: border-box; }
html { background: #080a09; scroll-behavior: smooth; }
body { margin: 0; min-height: 100dvh; color: var(--text); background: radial-gradient(ellipse at 50% -10%, #27312b 0, #0b100e 44%, #070908 100%); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .42; filter: grayscale(.35); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.app-shell { width: min(100%, 800px); min-height: 100dvh; margin: 0 auto; padding: 0 14px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #0e1311f2, #0b0e0df7); border-inline: 1px solid #242e27; box-shadow: 0 0 70px #0007; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 15px 3px 13px; border-bottom:1px solid #334037; }
.brand { display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark { display:grid; place-items:center; width:39px; height:39px; flex:0 0 39px; color:var(--gold); border:1px solid #756342; background:linear-gradient(145deg,#202620,#101411); clip-path: polygon(50% 0,92% 24%,92% 76%,50% 100%,8% 76%,8% 24%); font-size:25px; text-shadow:0 0 14px #d5a65b77; }
.brand-title { font:700 13px/1.1 Georgia, 'Times New Roman', serif; letter-spacing:.23em; color:#f1e4ca; }
.brand-subtitle { color:#8e9a8b; font-size:10px; margin-top:5px; letter-spacing:.025em; }
.icon-button { width:42px; height:42px; border:1px solid #526055; color:#e9dfce; background:linear-gradient(145deg,#242b25,#141a16); border-radius:7px; font-size:21px; }
#screen { min-height:60vh; padding:14px 0 10px; }
.footer { display:flex; justify-content:space-between; gap:10px; padding:12px 3px 2px; border-top:1px solid #263029; color:#657066; font-size:9px; letter-spacing:.16em; }
.footer span:last-child { letter-spacing:.02em; text-transform:lowercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family: Georgia, 'Times New Roman', serif; font-weight:600; }
h1 { font-size:clamp(28px,5.6vw,42px); letter-spacing:-.035em; line-height:1.02; margin-bottom:10px; }
h2 { font-size:clamp(21px,4vw,27px); line-height:1.08; margin-bottom:9px; }
h3 { font-size:18px; line-height:1.15; margin-bottom:7px; }
p { line-height:1.54; }
.gold-text { color:var(--gold)!important; }
.muted-copy, .muted { color:var(--muted); }
.section-stack { display:flex; flex-direction:column; gap:15px; padding-bottom:8px; }
.eyebrow { display:flex; align-items:center; gap:8px; width:max-content; max-width:100%; color:var(--gold); font-size:9px; font-weight:750; letter-spacing:.19em; line-height:1.4; }
.eyebrow span { display:block; width:16px; height:1px; background:var(--gold-soft); }
.section-kicker { color:var(--gold); font-size:9px; font-weight:750; letter-spacing:.18em; text-transform:uppercase; line-height:1.4; }
.section-heading, .route-heading, .hand-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:4px 2px 0; }
.section-heading h2, .route-heading h2, .hand-heading h2 { margin:5px 0 0; }
.location-coordinate { color:#778377; font:11px ui-monospace, monospace; letter-spacing:.14em; }
.count-pill { border:1px solid #495347; background:#131914; color:#c5b78b; padding:5px 9px; border-radius:4px; font-size:10px; white-space:nowrap; }
.gold-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 9px #d4ae5f77; flex:0 0 6px; }
/* Character creation */
.creation-layout { display:grid; grid-template-columns: .93fr 1.07fr; min-height:670px; border:1px solid #4d564a; background:#111613; box-shadow:var(--shadow); }
.creation-backdrop { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; min-height:610px; padding:23px 18px; background:linear-gradient(180deg,#07110c22 0%,#090e0ddd 88%),url('/assets/babiy-forest.svg') center/cover; border-right:1px solid #39443a; }
.creation-backdrop::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#07100d22,#07100d88),linear-gradient(0deg,#090d0b 0%,transparent 65%); }
.creation-overline, .creation-title, .creation-seal { position:relative; z-index:1; }
.creation-overline .eyebrow { font-size:8px; }
.brand-word { margin-bottom:7px; color:var(--gold); font:22px Georgia,serif; letter-spacing:.24em; }
.creation-title { margin-top:auto; }
.creation-title h1 { font-size:clamp(27px,4vw,39px); text-shadow:0 3px 18px #000; }
.creation-title p:last-child { color:#c5cbbd; max-width:29ch; font:15px/1.6 Georgia,serif; }
.creation-seal { align-self:flex-end; display:grid; place-items:center; width:55px; height:55px; border:1px solid #bd9a5f; border-radius:50%; color:#e5c57e; font:14px Georgia,serif; letter-spacing:.08em; box-shadow:inset 0 0 0 4px #d7b46b15,0 0 24px #d6b36f18; }
.creation-sheet { display:flex; flex-direction:column; justify-content:center; padding:23px 21px; }
.field { display:flex; flex-direction:column; gap:7px; color:#9ca395; font-size:11px; letter-spacing:.09em; text-transform:uppercase; min-width:0; }
.field input,.field select { width:100%; min-height:44px; padding:10px 11px; border:1px solid #4c594c; border-radius:4px; background:#090e0b; color:var(--text); font-size:14px; letter-spacing:0; text-transform:none; }
.field-wide { margin-bottom:18px; }
.choice-group { margin-bottom:17px; }
.field-label { color:#9ca395; font-size:11px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:8px; }
.race-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.race-choice { position:relative; display:flex; flex-direction:column; gap:4px; min-height:90px; padding:9px; border:1px solid #39463c; background:#0d130f; cursor:pointer; transition:border-color .15s,background .15s; }
.race-choice input { position:absolute; opacity:0; width:1px; height:1px; }
.race-choice:has(input:checked) { border-color:var(--gold); background:linear-gradient(135deg,#54442a55,#111812); box-shadow:inset 0 0 0 1px #d6b36f28; }
.race-choice input:focus-visible + .race-sigil { outline:2px solid var(--gold); }
.race-sigil { font-size:21px; color:var(--gold); line-height:1; }
.race-choice strong { font:15px Georgia,serif; color:#e5dece; }
.race-choice small { color:#7f897c; font-size:9px; line-height:1.35; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:13px; }
.rule-note { border-left:2px solid var(--gold); padding:10px 12px; margin:4px 0 14px; color:#a9b0a2; font-size:11px; line-height:1.5; background:linear-gradient(90deg,#d6b36f10,transparent); }
.rule-note strong { color:#e3d1a7; }
.button { min-height:43px; border:1px solid #746143; border-radius:4px; padding:11px 13px; color:#f5ebd8; background:#232922; display:inline-flex; align-items:center; justify-content:center; gap:11px; font-weight:650; font-size:12px; transition:filter .15s,transform .15s,border-color .15s; }
.button:hover:not(:disabled) { filter:brightness(1.16); border-color:var(--gold); }
.button:active:not(:disabled) { transform:translateY(1px); }
.button b { font-size:16px; font-weight:400; }
.full { width:100%; }
.primary-button { background:linear-gradient(180deg,#8f3b40,#5e262b); border-color:#a35b55; box-shadow:inset 0 1px #e5b3a225,0 5px 16px #0004; }
.outline-button { background:transparent; border-color:#576358; color:#c7d0c2; }
.subtle-button { background:#171d18; border-color:#384239; color:#aab5a8; }
.danger-choice { border-color:#90514c!important; background:linear-gradient(100deg,#59282d,#251719)!important; }
.creation-footnote { display:flex; gap:8px; align-items:flex-start; margin-top:16px; color:#788479; font-size:10px; line-height:1.5; }
/* Scene artwork */
.scene-art { position:relative; min-height:230px; overflow:hidden; border:1px solid #465247; background-position:center; background-size:cover; box-shadow:var(--shadow); isolation:isolate; }
.scene-art::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#070d0bd9 0%,#09100e5c 58%,#090d0c40 100%),linear-gradient(0deg,#060909f2 0%,transparent 76%); }
.forest-scene { background-image:url('/assets/babiy-forest.svg'); }
.tavern-scene { background-image:url('/assets/mushroom-tavern.svg'); }
.city-scene { background-image:url('/assets/maralind-city.svg'); }
.scene-vignette { position:absolute; inset:0; box-shadow:inset 0 0 50px #0008; pointer-events:none; }
.scene-location-label { position:absolute; top:12px; left:13px; color:#deca99; border:1px solid #c7a6686e; background:#0c110ecc; padding:6px 8px; font-size:8px; letter-spacing:.18em; }
.scene-caption { position:absolute; left:17px; bottom:22px; right:15px; z-index:1; max-width:570px; }
.scene-caption h1 { margin-bottom:5px; font-size:clamp(28px,5vw,39px); text-shadow:0 3px 17px #000; }
.scene-caption p { margin:0; color:#c7cec1; font:14px/1.45 Georgia,serif; max-width:38ch; text-shadow:0 2px 8px #000; }
.scene-credit { position:absolute; bottom:6px; right:10px; color:#c5ba9a77; font-size:7px; letter-spacing:.22em; }
/* HUD and journals */
.hud-strip { display:grid; grid-template-columns:1.35fr .78fr 1fr; gap:7px; margin-bottom:14px; }
.hud-health,.hud-stat { min-width:0; display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid #344238; background:linear-gradient(130deg,#182019,#101512); }
.hud-icon { display:grid; place-items:center; width:31px; height:31px; flex:0 0 31px; border:1px solid #866c48; color:#e1bd73; font-size:19px; }
.hud-health-copy { min-width:0; flex:1; }
.hud-label,.hud-stat small { display:block; color:#8a9686; font-size:8px; letter-spacing:.11em; line-height:1.3; }
.hud-health-copy strong,.hud-stat strong { display:block; color:#e7e0d2; font:18px Georgia,serif; margin-top:2px; white-space:nowrap; }
.hud-stat { flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; }
.hud-stat strong { font-size:18px; }
.hud-stat strong span { color:var(--gold); }
.hud-stat strong i { color:#6c786c; font-style:normal; }
.hpbar { width:100%; height:5px; margin-top:5px; overflow:hidden; border:1px solid #502e31; background:#0b0d0b; }
.hpbar span { display:block; height:100%; background:linear-gradient(90deg,#722a30,#cb4d4e); transition:width .2s; }
.journal-card,.story-card,.city-intro,.draft-intro,.party-rule,.guild-quote { border:1px solid #39453b; background:linear-gradient(145deg,#171e19,#111612); padding:17px; position:relative; }
.journal-card { padding-left:46px; }
.journal-mark { position:absolute; left:13px; top:11px; color:#9b7e4c; font:45px/1 Georgia,serif; }
.journal-card p { color:#c4c7b9; font:15px/1.55 Georgia,serif; margin:0 0 15px; }
.warning-callout { display:flex; align-items:flex-start; gap:10px; padding:11px; border:1px solid #77613d; background:#2a271c8c; margin:12px 0; }
.warning-callout > span { display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border:1px solid #b5965c; color:#e3c785; font-weight:800; }
.warning-callout strong { display:block; color:#dfc992; font-size:11px; margin-bottom:3px; }
.warning-callout small { display:block; color:#a8ab9c; font-size:10px; line-height:1.4; }
.warning-callout.uncertain { border-color:#5f6955; background:#242a2085; }
.warning-callout.uncertain strong { color:#c6c5a0; }
.warning-callout.quiet { border-color:#333d34; background:#101612; }
.warning-callout.quiet > span { color:#8b9586; border-color:#566054; }
.route-list { display:flex; flex-direction:column; gap:8px; }
.route-button { width:100%; min-width:0; display:grid; grid-template-columns:41px minmax(0,1fr) 19px; align-items:center; gap:11px; text-align:left; padding:11px; color:var(--text); border:1px solid #354239; background:linear-gradient(110deg,#18201a,#101512); border-radius:3px; }
.route-button.current { border-color:var(--gold-soft); background:linear-gradient(110deg,#2b2a1c,#141a15); }
.route-symbol { display:grid; place-items:center; width:39px; height:39px; border:1px solid #66725d; background:#0d130f; color:#d6b975; font:23px Georgia,serif; }
.route-copy { min-width:0; }
.route-copy strong { display:block; font:17px Georgia,serif; margin-bottom:3px; }
.route-copy small { display:block; color:#9ba295; font-size:10px; line-height:1.4; }
.route-copy i { display:block; color:#c2a465; font-size:8px; font-style:normal; letter-spacing:.1em; margin-top:5px; }
.route-button > b { color:#bfa76e; font-size:17px; font-weight:400; }
.focus-location { padding:15px; border:1px solid #6f6043; background:#24251a; }
.focus-location h3 { margin:5px 0; }
.focus-location p { color:#aeb0a0; font-size:12px; margin-bottom:12px; }
.small-legend { display:flex; align-items:flex-start; gap:8px; color:#778173; font-size:10px; line-height:1.5; padding:2px 3px; }
.small-legend .gold-dot { margin-top:5px; }
/* Tavern dialogue */
.story-card > p { color:#c4c5b9; font:15px/1.58 Georgia,serif; margin:10px 0; }
.story-card blockquote,.guild-quote blockquote { border-left:2px solid var(--gold-soft); padding:10px 13px; margin:14px 0; background:#d5b5720c; color:#e0cda4; font:14px/1.5 Georgia,serif; }
.scene-progress { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px; margin-bottom:15px; border-bottom:1px solid #333e34; color:#8d9888; font-size:8px; letter-spacing:.15em; }
.scene-progress > div { display:flex; gap:4px; }
.scene-progress i { display:block; width:18px; height:3px; background:#354137; }
.scene-progress i.on { background:var(--gold); box-shadow:0 0 8px #d5b36e55; }
.tavern-story h2 { margin-top:6px; }
.choice-list { display:flex; flex-direction:column; gap:7px; margin-top:17px; }
.choice-button { display:grid; grid-template-columns:28px minmax(0,1fr) 20px; align-items:center; gap:9px; width:100%; min-height:52px; padding:10px 12px; text-align:left; color:#eee6d9; background:linear-gradient(110deg,#222923,#151b17); border:1px solid #425044; }
.choice-button > span { display:grid; place-items:center; height:27px; width:27px; border:1px solid #6e654a; color:#d8ba7b; }
.choice-button strong { font:14px Georgia,serif; }
.choice-button b { color:#9d9e8c; font-size:20px; font-weight:400; }
.choice-button:hover { border-color:var(--gold); background:#282b20; }
/* Random card draft */
.draft-intro p,.city-intro p { color:#adb3a7; font:14px/1.58 Georgia,serif; margin:8px 0 14px; }
.draft-banner { display:flex; align-items:center; gap:11px; padding:12px; border:1px solid #645640; background:#25251c; }
.draft-banner strong { display:block; font-size:12px; }
.draft-banner small { display:block; color:#a7ab9e; font-size:10px; line-height:1.45; margin-top:4px; }
.dice-mark { display:grid; place-items:center; width:43px; height:43px; flex:0 0 43px; border:1px solid #a78b55; background:#181d17; color:#e2bf75; font:13px Georgia,serif; }
.team-heading { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #414c40; padding:0 2px 8px; font-size:9px; font-weight:800; letter-spacing:.16em; }
.team-heading b { font-weight:600; letter-spacing:.04em; color:#849183; }
.player-heading { color:#8fb497; }
.enemy-heading { color:#d0857e; margin-top:6px; }
.draft-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.member-card { min-width:0; display:flex; flex-direction:column; border:1px solid #435044; background:#111713; overflow:hidden; position:relative; }
.member-card.enemy-card { border-color:#604142; }
.member-card.active-member { border-color:#97804f; }
.member-art { position:relative; min-height:100px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(ellipse at 55% 30%,#46564a,#152019 70%); border-bottom:1px solid #39453a; }
.member-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,#0c100df2 100%); pointer-events:none; }
.enemy-card .member-art { background:radial-gradient(ellipse at 55% 30%,#65403e,#211719 75%); }
.member-art.fighter { background:radial-gradient(ellipse at 53% 32%,#73524b,#1d1a19 75%); }
.member-art.occult { background:radial-gradient(ellipse at 53% 32%,#514b77,#181722 75%); }
.member-art.scout { background:radial-gradient(ellipse at 53% 32%,#45685b,#151e19 75%); }
.member-art.duelist { background:radial-gradient(ellipse at 53% 32%,#706343,#1e1c15 75%); }
.member-art.rogue { background:radial-gradient(ellipse at 53% 32%,#59615e,#141817 75%); }
.member-art.heretic { background:radial-gradient(ellipse at 53% 32%,#774e55,#1c151b 75%); }
.portrait { position:relative; display:grid; place-items:center; width:54px; height:62px; flex:0 0 54px; color:#eadcc0; border:1px solid #b69a68; background:linear-gradient(145deg,#4c5c4e,#161c18); clip-path:polygon(50% 0,92% 16%,88% 75%,50% 100%,12% 75%,8% 16%); box-shadow:0 7px 18px #0009; z-index:1; }
.portrait span { font:18px Georgia,serif; letter-spacing:-.04em; text-shadow:0 2px 6px #000; }
.portrait i { position:absolute; inset:5px; border:1px solid #dfca9e33; clip-path:polygon(50% 0,92% 16%,88% 75%,50% 100%,12% 75%,8% 16%); }
.portrait.fighter { background:linear-gradient(145deg,#8b4b45,#241414); }
.portrait.occult { background:linear-gradient(145deg,#70629a,#201627); }
.portrait.scout { background:linear-gradient(145deg,#4d8373,#18241d); }
.portrait.duelist { background:linear-gradient(145deg,#937b4c,#2c2114); }
.portrait.rogue { background:linear-gradient(145deg,#647a7b,#182023); }
.portrait.heretic { background:linear-gradient(145deg,#914e69,#291420); }
.rarity-tag { position:absolute; z-index:2; bottom:7px; left:7px; padding:3px 5px; font-size:7px; letter-spacing:.09em; text-transform:uppercase; background:#0d110dd9; border:1px solid #68725a; color:#c6d3b2; }
.rarity-tag.uncommon { color:#a6dbc3; border-color:#4b9c7d; }
.rarity-tag.rare { color:#a8bde9; border-color:#687db4; }
.rarity-tag.epic { color:#d4a0ee; border-color:#9864ac; }
.rarity-tag.legendary { color:#efca7c; border-color:#b58b3a; }
.rarity-tag.mystery { color:#e8a9c7; border-color:#9b516b; }
.member-info { padding:10px; min-width:0; }
.member-name { font:17px/1.08 Georgia,serif; color:#eee5d5; overflow-wrap:anywhere; }
.member-role { color:#899586; font-size:9px; line-height:1.4; margin-top:5px; min-height:23px; }
.member-description { margin:8px 0; color:#a4ac9f; font-size:10px; line-height:1.4; }
.mini-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; margin-top:9px; }
.mini-stats span { display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 0; border:1px solid #2e392f; color:#e0dbcc; font-size:11px; font-weight:700; }
.mini-stats small { color:#839081; font-size:7px; font-weight:700; letter-spacing:.02em; }
.card-tag { margin-top:8px; padding:5px 6px; border:1px solid #4a6c55; color:#a2c7a9; background:#1c3323; font-size:7px; line-height:1.4; letter-spacing:.09em; }
.enemy-tag { border-color:#7f4846; color:#d9a09b; background:#321d20; }
.member-card.compact .member-art { min-height:83px; }
.member-card.compact .portrait { width:45px; height:53px; flex-basis:45px; }
.member-card.compact .portrait span { font-size:15px; }
.member-card.compact .member-info { padding:8px; }
.member-card.compact .member-name { font-size:15px; }
.member-card.compact .member-role { min-height:26px; font-size:8px; }
.member-card.compact .mini-stats { gap:2px; margin-top:7px; }
.member-card.compact .mini-stats span { font-size:9px; }
.member-card.compact .mini-stats small { font-size:6px; }
/* city */
.city-intro h2 { margin-top:5px; }
.city-status,.collection-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:13px; }
.city-status > div,.collection-stats > div { padding:10px; border:1px solid #39453b; background:#101612; }
.city-status small,.collection-stats small { display:block; color:#8a9687; font-size:8px; letter-spacing:.13em; line-height:1.35; }
.city-status strong,.collection-stats strong { display:block; color:#e6d8b5; font:22px Georgia,serif; margin-top:4px; }
.guild-promo { display:grid; grid-template-columns:55px minmax(0,1fr); gap:13px; padding:15px; border:1px solid #75613f; background:linear-gradient(120deg,#2a281b,#171c16); }
.guild-icon { display:grid; place-items:center; align-self:start; width:54px; height:54px; border:1px solid #b18e55; background:#141913; font-size:26px; color:var(--gold); }
.guild-promo h3 { margin:4px 0; }
.guild-promo p { margin:0; color:#a8ab9d; font:12px/1.45 Georgia,serif; }
.guild-promo .button { grid-column:1/-1; }
.city-panels { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.city-tile { display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-height:139px; padding:13px; text-align:left; color:#eee4d2; background:linear-gradient(140deg,#1c251d,#111713); border:1px solid #3a483b; }
.city-tile > span { color:#d3b571; font-size:23px; }
.city-tile strong { font:17px Georgia,serif; }
.city-tile small { color:#929e8f; font-size:10px; line-height:1.4; }
.city-tile b { color:#bea365; font-size:8px; letter-spacing:.1em; margin-top:auto; }
.party-preview { display:flex; flex-direction:column; gap:7px; }
.party-preview-member { display:flex; align-items:center; gap:11px; border:1px solid #334036; background:#121815; padding:8px; }
.party-preview-member .portrait { width:40px; height:47px; flex-basis:40px; }
.party-preview-member .portrait span { font-size:13px; }
.party-preview-member div:nth-child(2) { flex:1; min-width:0; }
.party-preview-member strong { display:block; font:16px Georgia,serif; }
.party-preview-member small { display:block; color:#8d9889; margin-top:3px; font-size:9px; }
.party-preview-member > i { font-style:normal; color:#c0a66b; font-size:7px; letter-spacing:.1em; }
.text-link { border:0; background:transparent; color:#d2b978; font-size:11px; padding:5px 0; }
/* Party and collection */
.party-rule { display:flex; align-items:center; gap:12px; padding:12px; }
.party-rule p { margin:0; color:#a6ada0; font-size:11px; line-height:1.45; }
.party-rule .dice-mark { width:39px; height:39px; flex:0 0 39px; }
.formation-list { display:flex; flex-direction:column; gap:10px; }
.formation-slot { position:relative; padding:12px; border:1px solid #3a473d; background:#141a15; }
.formation-slot.locked-hero { border-color:#89734b; }
.slot-number { display:inline-block; margin-bottom:8px; color:#8c9889; font:10px ui-monospace,monospace; letter-spacing:.14em; }
.slot-note { display:block; margin-top:7px; color:#857c60; font-size:8px; letter-spacing:.1em; }
.formation-slot .member-card { display:grid; grid-template-columns:100px minmax(0,1fr); }
.formation-slot .member-art { min-height:100%; border-bottom:0; border-right:1px solid #39453a; }
.formation-slot .member-info { padding:10px; }
.empty-slot { display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:17px; border:1px dashed #435043; background:#101511; }
.empty-slot span { display:grid; place-items:center; width:30px; height:30px; border:1px solid #596750; color:#c7af78; font:14px Georgia,serif; }
.empty-slot strong { font:16px Georgia,serif; }
.empty-slot small { color:#7d897d; font-size:10px; }
.roster-row { padding:10px; background:#101511; border:1px solid #39453b; }
.roster-row .member-card { display:grid; grid-template-columns:100px minmax(0,1fr); border:0; }
.roster-row .member-art { min-height:100%; }
.collection-stats { margin-bottom:0; }
.collection-note { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid #4b5140; background:#1d2119; }
.collection-note > span { display:grid; place-items:center; width:22px; height:22px; border:1px solid #9a8556; color:#d7bc7c; font:14px Georgia,serif; flex:0 0 22px; }
.collection-note p { margin:0; color:#a5ad9c; font-size:10px; line-height:1.45; }
.collection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.collection-card { display:flex; flex-direction:column; min-width:0; border:1px solid #343f35; background:#111713; padding:6px; }
.collection-kind { padding:7px 3px 2px; text-align:center; color:#9eac99; font-size:8px; letter-spacing:.12em; }
.hero-collection { border-color:#8e7447; }
/* Contracts */
.guild-quote { border-left:2px solid #a58b52; }
.guild-quote blockquote { margin:7px 0 0; font-size:16px; }
.contract-card { display:grid; grid-template-columns:48px minmax(0,1fr); gap:12px; padding:13px; border:1px solid #3b473c; background:linear-gradient(120deg,#171f19,#111613); }
.contract-card + .contract-card { margin-top:9px; }
.contract-card.contract-done { opacity:.65; }
.contract-symbol { display:grid; place-items:center; width:46px; height:54px; border:1px solid #746243; background:#171d17; color:#d7b672; font:24px Georgia,serif; }
.contract-content { min-width:0; }
.contract-meta { display:flex; flex-wrap:wrap; gap:8px; color:#9caa97; font-size:7px; letter-spacing:.12em; }
.contract-meta span:first-child { color:#c8ab6b; }
.contract-content h3 { margin:7px 0; font-size:18px; }
.contract-content p { color:#98a193; font-size:11px; line-height:1.45; margin-bottom:9px; }
.contract-reward { display:flex; justify-content:space-between; align-items:center; color:#9ba594; font-size:10px; margin-bottom:9px; }
.contract-reward strong { color:#e2c47e; font:18px Georgia,serif; }
.empty-state { padding:24px 17px; border:1px dashed #3d4a3e; color:#879282; text-align:center; font:15px/1.5 Georgia,serif; }
/* Battle: board, cards, dice and logs */
.battle-screen { display:flex; flex-direction:column; gap:11px; padding-bottom:20px; }
.battle-hero-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 2px 1px; }
.battle-hero-head h1 { font-size:clamp(27px,5vw,38px); margin:5px 0; }
.battle-hero-head p { margin:0; color:#929d8d; font-size:11px; }
.round-seal { display:flex; flex-direction:column; justify-content:center; align-items:center; width:55px; height:61px; flex:0 0 55px; border:1px solid #876d43; background:#191e17; color:#e2c27d; font:25px Georgia,serif; clip-path:polygon(50% 0,94% 20%,94% 80%,50% 100%,6% 80%,6% 20%); }
.round-seal small { color:#8b9a85; font:6px system-ui,sans-serif; letter-spacing:.12em; margin-top:3px; }
.battle-morale { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.battle-morale > div { padding:9px; border:1px solid #414a3d; background:#121814; }
.battle-morale span { display:block; color:#93a08f; font-size:7px; letter-spacing:.14em; }
.battle-morale strong { display:block; margin-top:3px; color:#e7dfcf; font:20px Georgia,serif; }
.battle-morale .hpbar { height:6px; margin-top:5px; }
.battle-morale .enemy-hp { border-color:#58383a; }
.battle-morale .enemy-hp i { display:block; height:100%; background:linear-gradient(90deg,#7c3239,#d56b60); }
.battle-board { border:1px solid #495344; background:#101511; padding:8px; box-shadow:inset 0 0 30px #0005; }
.board-legend { display:flex; justify-content:space-between; align-items:center; gap:9px; padding:2px 3px 8px; color:#8d9c8a; font-size:7px; letter-spacing:.13em; }
.board-legend i { display:block; width:20px; height:1px; background:#82704a; }
.lane-row { display:block; width:100%; padding:0; margin:0 0 5px; border:1px solid #29362c; background:linear-gradient(90deg,#1b2b20 0%,#20251c 50%,#321b1d 100%); text-align:left; color:var(--text); }
.lane-row:last-child { margin-bottom:0; }
.lane-row.lane-selected { border-color:#bd9d5f; box-shadow:0 0 0 1px #c39e5d29; }
.lane-name { display:block; padding:5px 7px; color:#a3af9c; font-size:7px; letter-spacing:.13em; background:#090e0b7a; border-bottom:1px solid #263127; }
.lane-track { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); min-height:68px; }
.lane-cell { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:3px 1px; border-right:1px dashed #b5ac7c1f; }
.lane-cell:last-child { border-right:0; }
.lane-cell.home-cell { background:#aec19b08; }
.lane-cell.enemy-home-cell { background:#d27d7d08; }
.unit-chip { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; max-width:57px; min-height:39px; padding:3px 2px; border:1px solid #6c8066; background:#17241a; overflow:hidden; }
.unit-chip.hostile-unit { border-color:#8d5551; background:#2d1c1d; }
.unit-glyph { display:grid; place-items:center; width:22px; height:22px; border:1px solid #9a9f7a; border-radius:50%; color:#e7dabd; font:9px Georgia,serif; }
.hostile-unit .unit-glyph { border-color:#bc7770; }
.unit-label { display:block; max-width:100%; color:#d8dccc; font-size:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.unit-hp { display:block; width:88%; height:3px; margin-top:2px; background:#080b08; }
.unit-hp i { display:block; height:100%; background:#8ca67f; }
.hostile-unit .unit-hp i { background:#c55e5a; }
.unit-chip em { position:absolute; top:0; right:2px; color:#c3c9e4; font-size:7px; font-style:normal; }
.fallen-unit { opacity:.3; filter:grayscale(1); }
.lane-play { display:block; padding:4px 7px; text-align:right; color:#bba66f; font-size:7px; letter-spacing:.14em; background:#0b100c7a; }
.lane-help { display:flex; justify-content:space-between; align-items:center; gap:9px; padding:10px 11px; border-left:2px solid #92774a; background:#1b2119; }
.lane-help strong { color:#e0c98f; font:14px Georgia,serif; }
.lane-help span { color:#9aa493; font-size:9px; text-align:right; }
.energy-bar { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px; border:1px solid #3d4a3c; background:linear-gradient(100deg,#20251b,#111713); }
.energy-copy span { display:block; color:#95a18f; font-size:7px; letter-spacing:.16em; }
.energy-copy strong { display:block; margin-top:2px; color:#e4c579; font:22px Georgia,serif; }
.energy-copy small { color:#788771; font:10px system-ui,sans-serif; }
.energy-pips { display:flex; gap:3px; min-width:0; }
.energy-pips i { display:block; height:15px; flex:1; background:#273229; border:1px solid #354437; }
.energy-pips i.charged { background:linear-gradient(180deg,#e3c16d,#96703e); border-color:#b9965d; box-shadow:0 0 9px #c69f5740; }
.end-turn-button { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:7px 9px; border:1px solid #906052; background:#552b2b; color:#f0e2cf; font-size:10px; white-space:nowrap; }
.end-turn-button b { font-weight:400; font-size:15px; }
.hand-heading { align-items:end; margin:4px 1px 0; }
.hand-heading small { color:#8a9787; font-size:9px; }
.battle-hand { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.battle-card { position:relative; min-width:0; display:flex; flex-direction:column; align-items:stretch; padding:8px 6px 7px; min-height:174px; text-align:left; color:#ede3d1; border:1px solid #5f6549; background:linear-gradient(180deg,#283127,#121813); box-shadow:inset 0 0 0 1px #d0b06911; }
.battle-card.card-selected { border-color:#e0bc70; box-shadow:0 0 0 2px #dfbb6c29,0 0 18px #d3ac5a1a; transform:translateY(-2px); }
.battle-card.card-used { opacity:.38; filter:grayscale(.85); }
.battle-card:disabled:not(.card-used) { opacity:.5; }
.energy-cost { position:absolute; z-index:2; top:5px; left:5px; display:grid; place-items:center; width:20px; height:20px; border:1px solid #b9a46c; border-radius:50%; background:#0e1410; color:#ead392; font:11px Georgia,serif; }
.card-art { display:grid; place-items:center; min-height:48px; margin-bottom:5px; border-bottom:1px solid #46513f; padding-bottom:5px; }
.card-art .portrait { width:39px; height:45px; flex-basis:39px; }
.card-art .portrait span { font-size:12px; }
.tactic-glyph { display:grid; place-items:center; height:45px; width:42px; color:#e5c479; font:29px Georgia,serif; border:1px solid #7a6845; background:#24251a; }
.battle-card-name { display:block; font:13px/1.07 Georgia,serif; min-height:28px; overflow-wrap:anywhere; }
.battle-card-role { display:block; margin-top:4px; color:#929d8e; font-size:8px; line-height:1.3; }
.battle-card .mini-stats { gap:2px; margin-top:auto; }
.battle-card .mini-stats span { padding:4px 0; font-size:8px; }
.battle-card .mini-stats small { font-size:6px; }
.tactic-description { min-height:52px; margin:6px 0 0; color:#98a295; font-size:9px; line-height:1.4; }
.battle-card-footer { display:block; margin-top:7px; padding-top:6px; border-top:1px solid #425040; color:#c7ae70; font-size:7px; letter-spacing:.12em; text-align:center; }
.battle-log { border:1px solid #323d33; background:#0f1411; }
.battle-log summary { display:flex; justify-content:space-between; gap:10px; list-style:none; padding:10px 11px; cursor:pointer; color:#dbc48f; font:15px Georgia,serif; }
.battle-log summary::-webkit-details-marker { display:none; }
.battle-log summary small { color:#798574; font:8px system-ui,sans-serif; letter-spacing:.08em; }
.battle-log ul { list-style:none; padding:0 11px 10px; margin:0; display:flex; flex-direction:column; gap:5px; }
.battle-log li { padding-left:8px; border-left:2px solid #4d5c48; color:#a4aea0; font-size:9px; line-height:1.4; }
.battle-disclaimer { margin:0; color:#667466; font-size:9px; line-height:1.5; }
/* Empty and nav */
.empty-state { padding:20px 15px; border:1px dashed #3d4a3e; color:#879282; text-align:center; font:15px/1.5 Georgia,serif; }
.bottom-nav { position:sticky; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; margin:16px -2px 0; padding:7px 5px calc(7px + env(safe-area-inset-bottom)); border:1px solid #3a453a; background:#0b100ef2; box-shadow:0 -7px 25px #0005; backdrop-filter:blur(10px); }
.nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; min-height:47px; padding:5px 1px; color:#7e8b7d; border:1px solid transparent; background:transparent; }
.nav-item > span { font:20px Georgia,serif; line-height:1; }
.nav-item small { font-size:8px; letter-spacing:.03em; white-space:nowrap; }
.nav-item.selected { color:#e1c47b; border-color:#5e593b; background:linear-gradient(180deg,#28291e,#131813); }
.nav-item.selected > span { text-shadow:0 0 12px #d7b46a55; }
.modal { width:min(92vw,430px); border:1px solid #53604f; border-radius:5px; background:#151a16; color:var(--text); padding:17px; box-shadow:var(--shadow); }
.modal::backdrop { background:#000c; backdrop-filter:blur(4px); }
.modal-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.modal-top h2 { margin:0; }
.modal .button { margin:6px 0; }
/* Responsive */
@media (max-width: 640px) {
  .app-shell { padding-inline:10px; }
  .creation-layout { grid-template-columns:1fr; }
  .creation-backdrop { min-height:265px; padding:17px; border-right:0; border-bottom:1px solid #39443a; background-position:center 48%; }
  .creation-overline .eyebrow { font-size:7px; }
  .creation-title { margin-top:42px; }
  .brand-word { font-size:16px; }
  .creation-title h1 { font-size:31px; }
  .creation-title p:last-child { max-width:34ch; font-size:12px; margin-bottom:0; }
  .creation-seal { position:absolute; right:15px; top:58px; width:43px; height:43px; font-size:11px; }
  .creation-sheet { padding:17px 14px; }
  .race-choice { min-height:86px; }
  .hud-strip { gap:5px; }
  .hud-health,.hud-stat { padding:7px 6px; }
  .hud-icon { display:none; }
  .hud-label,.hud-stat small { font-size:7px; }
  .hud-health-copy strong,.hud-stat strong { font-size:16px; }
  .scene-art { min-height:218px; }
  .scene-caption { left:13px; bottom:19px; }
  .scene-caption h1 { font-size:32px; }
  .scene-caption p { font-size:12px; }
  .journal-card,.story-card,.city-intro,.draft-intro { padding:13px; }
  .journal-card { padding-left:38px; }
  .journal-card p,.story-card > p { font-size:14px; }
  .route-copy strong { font-size:16px; }
  .draft-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .member-card.compact .member-art { min-height:75px; }
  .member-card.compact .member-info { padding:7px 6px; }
  .member-card.compact .member-name { font-size:14px; }
  .member-card.compact .member-role { font-size:7px; }
  .mini-stats span { font-size:9px; }
  .mini-stats small { font-size:6px; }
  .city-status > div,.collection-stats > div { padding:8px; }
  .city-status small,.collection-stats small { font-size:7px; }
  .city-status strong,.collection-stats strong { font-size:19px; }
  .guild-promo { grid-template-columns:43px minmax(0,1fr); padding:11px; gap:10px; }
  .guild-icon { width:42px; height:45px; font-size:21px; }
  .city-panels { gap:7px; }
  .city-tile { padding:10px; min-height:136px; }
  .city-tile strong { font-size:15px; }
  .formation-slot .member-card,.roster-row .member-card { grid-template-columns:80px minmax(0,1fr); }
  .formation-slot .member-art { min-width:0; }
  .battle-hero-head h1 { font-size:29px; }
  .round-seal { width:47px; height:52px; flex-basis:47px; font-size:21px; }
  .battle-board { padding:5px; }
  .lane-track { min-height:62px; }
  .lane-name { font-size:6px; }
  .unit-chip { min-height:34px; padding:2px 0; }
  .unit-glyph { width:19px; height:19px; }
  .unit-label { font-size:6px; }
  .energy-bar { grid-template-columns:54px minmax(0,1fr); gap:7px; }
  .end-turn-button { grid-column:1/-1; width:100%; justify-content:center; }
  .energy-pips { gap:2px; }
  .energy-pips i { height:12px; }
  .battle-hand { gap:5px; }
  .battle-card { padding:7px 4px 6px; min-height:166px; }
  .battle-card-name { font-size:12px; }
  .battle-card-role { font-size:7px; }
  .battle-card .mini-stats span { font-size:7px; }
  .tactic-description { font-size:8px; }
  .bottom-nav { margin-top:12px; }
  .nav-item small { font-size:7px; }
}
@media (max-width: 380px) {
  .app-shell { padding-inline:7px; }
  .hud-strip { grid-template-columns:1.2fr .7fr .9fr; }
  .hud-stat strong { font-size:14px; }
  .hud-health-copy strong { font-size:14px; }
  .draft-cards { gap:5px; }
  .member-card.compact .mini-stats span { font-size:8px; }
  .battle-card { min-height:160px; }
  .energy-pips i:nth-child(n+8) { display:none; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }
/* Original locally stored bust illustrations. No remote asset requests. */
.portrait { background-size:cover; background-position:center; }
.portrait > span { opacity:0; }
.portrait.fighter { background-image:url('/assets/portraits/fighter.svg'); }
.portrait.duelist { background-image:url('/assets/portraits/duelist.svg'); }
.portrait.occult { background-image:url('/assets/portraits/occult.svg'); }
.portrait.scout { background-image:url('/assets/portraits/scout.svg'); }
.portrait.rogue { background-image:url('/assets/portraits/rogue.svg'); }
.portrait.heretic { background-image:url('/assets/portraits/heretic.svg'); }

/* Visible, player-directed D20 character creation */
.roll-workbench { margin:8px 0 13px; padding:12px; border:1px solid #5b624b; background:radial-gradient(ellipse at 50% 0%,#4c41231f,transparent 70%),#0b100d; box-shadow:inset 0 0 24px #0005; }
.roll-workbench-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.roll-workbench-head h2 { margin:4px 0 0; font:21px/1.1 Georgia,serif; color:#eee4cf; }
.roll-progress { display:grid; place-items:center; min-width:37px; height:37px; border:1px solid #a98a4e; border-radius:50%; color:#e7c67b; font:14px Georgia,serif; }
.roll-instruction { color:#9ca697; font-size:11px; line-height:1.5; margin:9px 0 11px; }
.stat-roll-choices { display:grid; gap:5px; }
.stat-roll-choice { display:flex; align-items:center; gap:9px; width:100%; min-height:49px; padding:7px 8px; text-align:left; border:1px solid #374339; background:#121914; color:#e8e0d0; }
.stat-roll-choice.chosen { border-color:#d2ad62; background:linear-gradient(90deg,#6b512b3b,#171d16); box-shadow:inset 3px 0 #d6b36f; }
.stat-roll-choice.rolled { border-color:#405e48; background:#101c14; opacity:.86; }
.stat-roll-choice:disabled { cursor:default; }
.stat-roll-icon { display:grid; place-items:center; width:31px; height:31px; flex:0 0 31px; border:1px solid #74623e; color:#d6b36f; font-size:17px; }
.stat-roll-copy { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.stat-roll-copy strong { font:15px Georgia,serif; }
.stat-roll-copy small { color:#8c9888; font-size:9px; line-height:1.3; }
.stat-roll-value { min-width:28px; text-align:center; color:#e5c578; font:23px Georgia,serif; }
.dice-stage { display:flex; align-items:center; gap:13px; margin:11px 0; padding:12px; border:1px solid #3d483b; background:linear-gradient(100deg,#191f17,#0c100d); }
.d20-die { display:grid; place-items:center; width:62px; height:62px; flex:0 0 62px; color:#f3d995; font:20px Georgia,serif; background:#332a1a; border:2px solid #c5a15d; clip-path:polygon(50% 0%,89% 20%,100% 65%,70% 100%,27% 100%,0 62%,10% 20%); filter:drop-shadow(0 0 8px #d6b36f24); }
.d20-die span { display:grid; place-items:center; width:47px; height:47px; border:1px solid #d3b46b77; clip-path:polygon(50% 0%,89% 20%,100% 65%,70% 100%,27% 100%,0 62%,10% 20%); }
.dice-pop { animation:dicePop .48s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dicePop { 0%{transform:rotate(-24deg) scale(.55);filter:brightness(2)} 55%{transform:rotate(12deg) scale(1.13)} 100%{transform:rotate(0) scale(1);filter:brightness(1)} }
.dice-result-copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
.dice-result-copy small { color:#c3a66c; font-size:8px; letter-spacing:.13em; }
.dice-result-copy strong { color:#f0e4cc; font:19px Georgia,serif; }
.dice-result-copy span { color:#929d8e; font-size:10px; line-height:1.4; }
.roll-stat-button { margin-bottom:9px; min-height:49px; font-size:13px; }
.roll-stat-button:disabled,.create-hero-button:disabled { opacity:.45; filter:grayscale(.45); cursor:not-allowed; }
.rolled-stat-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
.rolled-stat-summary span { padding:6px 2px; border:1px solid #29342b; background:#0d120e; text-align:center; }
.rolled-stat-summary span.done { border-color:#6a805b; background:#142016; }
.rolled-stat-summary small { display:block; color:#8c9786; font-size:7px; line-height:1.2; }
.rolled-stat-summary strong { display:block; margin-top:3px; color:#e5c579; font:19px Georgia,serif; }
.create-hero-button { margin-top:2px; min-height:49px; }
.roll-outcome { display:flex; align-items:center; gap:12px; margin:13px 0; padding:12px; border:1px solid #7d714e; background:linear-gradient(100deg,#2b291b,#151a14); }
.roll-outcome.roll-success { border-color:#607c57; }
.roll-outcome.roll-failure { border-color:#89514c; }
.outcome-die { display:grid; place-items:center; width:54px; height:54px; flex:0 0 54px; border:2px solid #c3a15d; color:#f0d58f; background:#302819; clip-path:polygon(50% 0%,89% 20%,100% 65%,70% 100%,27% 100%,0 62%,10% 20%); font:24px Georgia,serif; animation:dicePop .45s ease-out both; }
.roll-outcome > div:last-child { display:flex; flex-direction:column; gap:4px; }
.roll-outcome small { color:#c5a66b; font-size:8px; letter-spacing:.1em; }
.roll-outcome strong { font:19px Georgia,serif; color:#eee2ca; }
.roll-outcome span { color:#a0aa9a; font-size:10px; }
@media(max-width:640px) { .roll-workbench { padding:10px; } .roll-workbench-head h2 { font-size:19px; } .stat-roll-choice { min-height:46px; } .stat-roll-copy small { font-size:8px; } .dice-stage { padding:9px; gap:10px; } .d20-die { width:54px; height:54px; flex-basis:54px; } .d20-die span { width:41px; height:41px; } }
.battle-dice-result { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid #a68b54; background:radial-gradient(ellipse at 0 50%,#b18c3b22,transparent 70%),linear-gradient(100deg,#24251b,#111713); box-shadow:inset 0 0 20px #0005; }
.battle-d20-face { display:grid; place-items:center; width:56px; height:56px; flex:0 0 56px; background:#332a1a; border:2px solid #c7a45e; color:#f3d995; clip-path:polygon(50% 0%,89% 20%,100% 65%,70% 100%,27% 100%,0 62%,10% 20%); animation:dicePop .48s ease-out both; }
.battle-d20-face span { display:grid; place-items:center; width:43px; height:43px; border:1px solid #d3b46b77; clip-path:polygon(50% 0%,89% 20%,100% 65%,70% 100%,27% 100%,0 62%,10% 20%); font:25px Georgia,serif; }
.battle-dice-result > div:last-child,.battle-dice-hint > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.battle-dice-result small { color:#c5a66b; font-size:8px; letter-spacing:.13em; }
.battle-dice-result strong { color:#eee2ca; font:17px Georgia,serif; }
.battle-dice-result span { color:#a0aa9a; font-size:10px; line-height:1.4; overflow-wrap:anywhere; }
.battle-dice-hint { display:flex; align-items:center; gap:10px; padding:10px; border:1px dashed #756440; background:#151a14; }
.battle-dice-hint strong { color:#d9c38f; font:14px Georgia,serif; }
.battle-dice-hint small { color:#8f9b8c; font-size:10px; line-height:1.4; }