/* rpg.bsn.services — design system. Dark fantasy, gold leaf, parchment cards. */
:root {
  --bg: #0b0a10; --bg-2: #14121c; --bg-3: #1d1a27; --panel: #17141f; --panel-2: #211c2b;
  --ink: #ece4d2; --ink-2: #b8ad96; --ink-3: #7f7566; --parch: #e9dcc0; --parch-2: #d8c9a6; --parch-ink: #2a2118;
  --gold: #d4af37; --gold-2: #f2d675; --gold-3: #8c6d1f; --crimson: #a4161a; --crimson-2: #d93b3f; --ember: #ff7a2f;
  --green: #4fa36b; --blue: #3f7fc4; --violet: #8a5cf6; --teal: #2ea3a6;
  --hp: #c8322f; --mana: #3f7fc4; --xp: #d4af37;
  --shadow: 0 10px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.5);
  --radius: 14px; --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif; --font-body: 'Crimson Pro', 'EB Garamond', Georgia, serif; --font-ui: 'Cinzel', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 18px; line-height: 1.5; min-height: 100%; }
body { background-image: radial-gradient(1200px 600px at 50% -10%, rgba(212,175,55,.08), transparent 60%), radial-gradient(800px 500px at 100% 100%, rgba(164,22,26,.10), transparent 60%); }
a { color: var(--gold-2); text-decoration: none; } a:hover { color: #fff; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; margin: 0 0 .4em; color: var(--ink); }
h1 { font-size: clamp(1.8rem, 4vw, 3rem); } h2 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); } h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.muted { color: var(--ink-2); } .dim { color: var(--ink-3); } .gold { color: var(--gold-2); } .crimson { color: var(--crimson-2); } .green { color: var(--green); }
.small { font-size: .85rem; } .tiny { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; font-family: var(--font-ui); }
.hidden { display: none !important; }
img.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- layout ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.topbar { position: sticky; top: 0; z-index: 50; background: linear-gradient(to bottom, rgba(11,10,16,.98), rgba(11,10,16,.9)); border-bottom: 1px solid rgba(212,175,55,.25); backdrop-filter: blur(8px); }
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 62px; }
.brand { font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; letter-spacing: .08em; color: var(--gold-2); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand .ic { width: 26px; height: 26px; }
.nav { display: flex; gap: 6px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a, .nav button { font-family: var(--font-ui); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 8px 12px; border-radius: 8px; background: none; border: 1px solid transparent; cursor: pointer; }
.nav a:hover, .nav button:hover, .nav a.active { color: var(--gold-2); border-color: rgba(212,175,55,.35); background: rgba(212,175,55,.06); }
main { padding: 28px 0 80px; }
.footer { border-top: 1px solid rgba(255,255,255,.06); padding: 30px 0; color: var(--ink-3); font-size: .85rem; }
.footer a { color: var(--ink-2); }
.grid { display: grid; gap: 18px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .row.between { justify-content: space-between; } .spacer { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* ---------- icons ---------- */
.ic { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.25em; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; flex: 0 0 auto; }
.ic.lg { width: 2em; height: 2em; } .ic.xl { width: 3.2em; height: 3.2em; }
.ic-gold { background: linear-gradient(160deg, #fff2b3, var(--gold) 45%, #8a6a1c); }

/* ---------- buttons ---------- */
.btn { font-family: var(--font-ui); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: linear-gradient(180deg, #2b2536, #1a1622); border: 1px solid rgba(212,175,55,.45); padding: 11px 18px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: transform .12s, box-shadow .2s, border-color .2s; position: relative; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212,175,55,.18); border-color: var(--gold-2); color: #fff; }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #e0be4e, #a9821e); color: #1a1408; border-color: #f2d675; text-shadow: 0 1px 0 rgba(255,255,255,.3); font-weight: 700; }
.btn.primary:hover:not(:disabled) { box-shadow: 0 8px 26px rgba(212,175,55,.4); color: #000; }
.btn.danger { border-color: rgba(217,59,63,.6); } .btn.danger:hover:not(:disabled) { border-color: var(--crimson-2); box-shadow: 0 6px 18px rgba(164,22,26,.3); }
.btn.ghost { background: none; border-color: rgba(255,255,255,.15); } .btn.sm { padding: 7px 12px; font-size: .72rem; } .btn.lg { padding: 15px 28px; font-size: .95rem; }
.btn.block { width: 100%; justify-content: center; }

/* ---------- panels + parchment ---------- */
.panel { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid rgba(212,175,55,.22); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); position: relative; }
.panel.tight { padding: 14px; }
.parchment { background: linear-gradient(180deg, #efe3c8, #dfd0ad); color: var(--parch-ink); border-radius: 10px; padding: 22px 26px; position: relative; box-shadow: inset 0 0 60px rgba(120,80,20,.18), 0 8px 30px rgba(0,0,0,.5); border: 1px solid #b89c62; }
.parchment::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(120,80,20,.35); border-radius: 6px; pointer-events: none; }
.parchment h1, .parchment h2, .parchment h3 { color: #3b2a12; }
.parchment .muted { color: #6d5a3a; }
.parchment p { font-size: 1.12rem; line-height: 1.6; }
.parchment p:last-child { margin-bottom: 0; }
.parchment em { color: #6b3a1c; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,.6), transparent); margin: 16px 0; }
.ornament { text-align: center; color: var(--gold); font-size: .8rem; letter-spacing: .5em; margin: 8px 0; }

/* ---------- cards (the core visual) ---------- */
.card { --pal-a: #2a2340; --pal-b: #0f0c18; position: relative; border-radius: 14px; background: linear-gradient(180deg, #2a2436, #171320); border: 1px solid rgba(212,175,55,.35); box-shadow: 0 2px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.55); overflow: hidden; transition: transform .16s, box-shadow .2s, border-color .2s; cursor: pointer; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.7), 0 0 0 1px var(--gold), 0 0 30px rgba(212,175,55,.22); border-color: var(--gold-2); }
.card.static { cursor: default; } .card.static:hover { transform: none; box-shadow: 0 10px 30px rgba(0,0,0,.55); border-color: rgba(212,175,55,.35); }
.card.selected { border-color: var(--gold-2); box-shadow: 0 0 0 2px var(--gold), 0 0 40px rgba(212,175,55,.35); }
.card.disabled { opacity: .5; filter: saturate(.4); cursor: not-allowed; } .card.disabled:hover { transform: none; }
.card .art { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(120% 90% at 50% 30%, var(--pal-a), var(--pal-b) 80%); overflow: hidden; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(212,175,55,.3); }
.card .art.tall { aspect-ratio: 3 / 4; } .card .art.wide { aspect-ratio: 16 / 9; } .card .art.square { aspect-ratio: 1; }
.card .art img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .art img.sprite { position: relative; width: 60%; height: 80%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 8px 10px rgba(0,0,0,.6)); z-index: 2; transition: transform .2s; }
.card:hover .art img.sprite { transform: scale(1.06) translateY(-3px); }
.card .art .glyph { position: relative; width: 58%; height: 58%; z-index: 2; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.card .art .rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.05) 0 6deg, transparent 6deg 14deg); animation: spin 60s linear infinite; opacity: .6; }
.card .art .vignette { position: absolute; inset: 0; background: radial-gradient(80% 80% at 50% 45%, transparent 50%, rgba(0,0,0,.6)); z-index: 3; pointer-events: none; }
.card .art .badge { position: absolute; top: 8px; left: 8px; z-index: 4; }
.card .art .corner { position: absolute; top: 8px; right: 8px; z-index: 4; }
.card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card .title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); line-height: 1.2; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.card .sub { font-size: .78rem; color: var(--gold); font-family: var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.card .desc { font-size: .95rem; color: var(--ink-2); line-height: 1.4; }
.card .foot { margin-top: auto; display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--ink-2); flex-wrap: wrap; }
.card.rarity-uncommon { border-color: rgba(79,163,107,.6); } .card.rarity-rare { border-color: rgba(63,127,196,.7); } .card.rarity-very-rare { border-color: rgba(138,92,246,.7); } .card.rarity-legendary, .card.rarity-quest { border-color: var(--gold-2); }
.card.rarity-rare::after, .card.rarity-very-rare::after, .card.rarity-legendary::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.12) 45%, transparent 60%); background-size: 250% 100%; animation: sheen 4s ease-in-out infinite; }
@keyframes sheen { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
.badge { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.6); border: 1px solid rgba(212,175,55,.5); color: var(--gold-2); backdrop-filter: blur(4px); }
.badge.red { border-color: var(--crimson-2); color: #ff9a9c; } .badge.green { border-color: var(--green); color: #8fe0a8; } .badge.blue { border-color: var(--blue); color: #9cc6f2; } .badge.violet { border-color: var(--violet); color: #c3aefc; }

/* palettes for art backgrounds */
.pal-ember { --pal-a: #6b2a12; --pal-b: #1a0a06; } .pal-abyss { --pal-a: #1f3b52; --pal-b: #060a12; } .pal-forest { --pal-a: #2d4a2a; --pal-b: #0a1208; }
.pal-bone { --pal-a: #4d4360; --pal-b: #120f18; } .pal-gold { --pal-a: #7a5b16; --pal-b: #1c1305; } .pal-frost { --pal-a: #2a5c78; --pal-b: #071019; }
.pal-shadow { --pal-a: #3a1f5c; --pal-b: #0a0612; } .pal-holy { --pal-a: #8a7340; --pal-b: #2a2210; } .pal-dusk { --pal-a: #5a3358; --pal-b: #120a14; } .pal-moon { --pal-a: #2c3a66; --pal-b: #070a14; }
.pal-blood { --pal-a: #6a1216; --pal-b: #130506; } .pal-undead { --pal-a: #2f4f3f; --pal-b: #08100c; }

/* ---------- bars ---------- */
.bar { position: relative; height: 12px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width .5s cubic-bezier(.2,.8,.2,1); background: linear-gradient(180deg, #e0524f, #9c1f1c); }
.bar.hp > i { background: linear-gradient(180deg, #ef6b67, #a4161a); } .bar.xp > i { background: linear-gradient(180deg, #f2d675, #a9821e); } .bar.mana > i { background: linear-gradient(180deg, #7ab3ef, #2a5f9e); } .bar.temp > b { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,.35); }
.bar.thin { height: 8px; } .bar.thick { height: 16px; }
.bar-label { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }

/* ---------- forms ---------- */
input, select, textarea { font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: rgba(0,0,0,.45); border: 1px solid rgba(212,175,55,.35); border-radius: 8px; padding: 10px 12px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(212,175,55,.15); }
label.field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-ui); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.error { color: #ff9a9c; font-size: .95rem; }

/* ---------- modal ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(4,3,8,.8); backdrop-filter: blur(6px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade .2s; }
.modal { width: min(720px, 100%); max-height: 92vh; overflow: auto; animation: rise .25s cubic-bezier(.2,.8,.2,1); }
.modal.wide { width: min(980px, 100%); }
@keyframes fade { from { opacity: 0; } } @keyframes rise { from { transform: translateY(20px); opacity: 0; } }

/* ---------- toast ---------- */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--panel-2); border: 1px solid rgba(212,175,55,.4); color: var(--ink); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); animation: rise .2s; max-width: 340px; }
.toast.err { border-color: var(--crimson-2); }

/* ---------- storefront ---------- */
.hero-banner { position: relative; border-radius: 20px; overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; border: 1px solid rgba(212,175,55,.35); box-shadow: var(--shadow); background: radial-gradient(90% 100% at 30% 20%, #4a1a1c, #0d0a12 70%); }
.hero-banner img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .95; }
.hero-banner .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,6,12,.96) 10%, rgba(8,6,12,.3) 55%, transparent); }
.hero-banner .content { position: relative; padding: 40px; max-width: 720px; }
.hero-banner h1 { font-size: clamp(2rem, 5vw, 3.6rem); text-shadow: 0 4px 20px rgba(0,0,0,.8); }
.hero-banner .tag { font-size: 1.3rem; color: var(--parch); margin-bottom: 18px; }
.kicker { font-family: var(--font-ui); letter-spacing: .3em; text-transform: uppercase; font-size: .72rem; color: var(--gold); margin-bottom: 8px; }
.stat-row { display: flex; gap: 22px; flex-wrap: wrap; color: var(--ink-2); font-size: .9rem; margin-top: 14px; }
.stat-row b { color: var(--gold-2); font-family: var(--font-ui); }
.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature .ic { width: 2.2em; height: 2.2em; color: var(--gold); flex: none; }
.section-title { display: flex; align-items: baseline; gap: 14px; margin: 34px 0 16px; }
.section-title h2 { margin: 0; } .section-title .line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(212,175,55,.5), transparent); }

/* ---------- play screen ---------- */
.play { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .play { grid-template-columns: 1fr; } .play .side { order: -1; } }
.scene-art { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 21 / 9; min-height: 220px; background: radial-gradient(90% 100% at 50% 20%, var(--pal-a), var(--pal-b) 80%); border: 1px solid rgba(212,175,55,.4); box-shadow: var(--shadow); }
.scene-art img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 30s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }
.scene-art .glyph { position: absolute; left: 50%; top: 50%; width: 28%; max-width: 220px; aspect-ratio: 1; transform: translate(-50%, -55%); filter: drop-shadow(0 10px 30px rgba(0,0,0,.7)); opacity: .9; }
.scene-art .fog { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,14,.95), rgba(10,8,14,.15) 45%, transparent); }
.scene-art .caption { position: absolute; left: 22px; right: 22px; bottom: 16px; z-index: 3; }
.scene-art .caption h2 { margin: 0; text-shadow: 0 3px 12px rgba(0,0,0,.9); font-size: clamp(1.3rem, 2.8vw, 2rem); }
.scene-art .caption .where { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); text-shadow: 0 2px 6px #000; }
.scene-art .particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.scene-art .particles i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-2); opacity: 0; animation: drift 9s linear infinite; box-shadow: 0 0 8px var(--gold-2); }
@keyframes drift { 0% { transform: translateY(0) translateX(0); opacity: 0; } 15% { opacity: .8; } 85% { opacity: .5; } 100% { transform: translateY(-260px) translateX(40px); opacity: 0; } }
.narrative { margin-top: 14px; }
.narrative p { animation: fade .6s both; }
.narrative p:nth-child(2) { animation-delay: .25s; } .narrative p:nth-child(3) { animation-delay: .5s; } .narrative p:nth-child(4) { animation-delay: .75s; }

/* hand of action cards */
.hand { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; align-items: stretch; }
.hand .acard { flex: 1 1 200px; max-width: 320px; min-width: 190px; }
.acard { --pal-a: #2a2340; --pal-b: #0f0c18; position: relative; border-radius: 12px; background: linear-gradient(180deg, #2b2438, #15111d); border: 1px solid rgba(212,175,55,.4); padding: 12px 12px 12px 58px; cursor: pointer; min-height: 72px; transition: transform .14s, box-shadow .2s, border-color .2s; display: flex; flex-direction: column; justify-content: center; gap: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.5); text-align: left; color: var(--ink); font-family: var(--font-body); }
.acard:hover:not(.disabled) { transform: translateY(-4px) rotate(-.4deg); border-color: var(--gold-2); box-shadow: 0 14px 30px rgba(0,0,0,.65), 0 0 24px rgba(212,175,55,.25); }
.acard .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; color: var(--gold-2); }
.acard .name { font-family: var(--font-display); font-weight: 700; font-size: .98rem; line-height: 1.15; }
.acard .detail { font-size: .82rem; color: var(--ink-2); line-height: 1.3; }
.acard .cost { position: absolute; top: 6px; right: 8px; font-family: var(--font-ui); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.acard .cost.quick { color: var(--teal); } .acard .cost.free { color: var(--green); }
.acard.disabled { opacity: .45; cursor: not-allowed; filter: saturate(.3); }
.acard.danger { border-color: rgba(217,59,63,.6); } .acard.danger .ic { color: #ff7d80; }
.acard.check { border-color: rgba(63,127,196,.55); } .acard.check .ic { color: #8fbdf2; }
.acard.spell { border-color: rgba(138,92,246,.6); } .acard.spell .ic { color: #c3aefc; }
.acard.item { border-color: rgba(79,163,107,.55); } .acard.item .ic { color: #8fe0a8; }
.acard.feature { border-color: rgba(212,175,55,.6); }
.acard.armed { box-shadow: 0 0 0 2px var(--gold-2), 0 0 24px rgba(212,175,55,.4); }
.acard .dc { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .06em; color: #8fbdf2; text-transform: uppercase; }

/* combat board */
.board { display: grid; grid-template-columns: 1fr; gap: 14px; }
.board .enemies, .board .party { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.combatant { position: relative; width: 150px; border-radius: 12px; background: linear-gradient(180deg, #221c2e, #130f1a); border: 1px solid rgba(255,255,255,.12); padding: 10px 10px 8px; text-align: center; cursor: pointer; transition: transform .15s, box-shadow .2s, border-color .2s; }
.combatant.enemy { border-color: rgba(217,59,63,.35); } .combatant.party { border-color: rgba(212,175,55,.35); }
.combatant.active { box-shadow: 0 0 0 2px var(--gold-2), 0 0 30px rgba(212,175,55,.35); transform: translateY(-4px); }
.combatant.targetable:hover { border-color: var(--crimson-2); box-shadow: 0 0 0 2px var(--crimson-2), 0 0 24px rgba(217,59,63,.4); transform: translateY(-3px); }
.combatant.target { box-shadow: 0 0 0 2px var(--crimson-2), 0 0 30px rgba(217,59,63,.5); }
.combatant.dead { opacity: .35; filter: grayscale(1); } .combatant.dead .sprite { transform: rotate(80deg) translateY(10px); }
.combatant .sprite-wrap { height: 110px; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.combatant .sprite { max-height: 108px; max-width: 128px; image-rendering: pixelated; filter: drop-shadow(0 6px 8px rgba(0,0,0,.7)); transition: transform .25s; }
.combatant.enemy .sprite { transform: scaleX(-1); } .combatant.enemy.dead .sprite { transform: scaleX(-1) rotate(-80deg) translateY(10px); }
.combatant.boss { width: 190px; } .combatant.boss .sprite-wrap { height: 150px; } .combatant.boss .sprite { max-height: 148px; max-width: 170px; }
.combatant .name { font-family: var(--font-display); font-size: .82rem; font-weight: 700; margin-top: 6px; line-height: 1.15; }
.combatant .meta { font-size: .72rem; color: var(--ink-3); font-family: var(--font-ui); letter-spacing: .04em; }
.combatant .conds { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; margin-top: 4px; min-height: 16px; }
.combatant .conds .ic { width: 14px; height: 14px; color: var(--gold-2); }
.combatant.shake { animation: shake .4s; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
.combatant.lunge { animation: lunge .35s; } @keyframes lunge { 30% { transform: translateY(-16px) scale(1.06); } }
.combatant.enemy.lunge { animation: lungeE .35s; } @keyframes lungeE { 30% { transform: translateY(14px) scale(1.06); } }
.combatant.flash-heal { animation: healflash .6s; } @keyframes healflash { 30% { box-shadow: 0 0 0 3px var(--green), 0 0 40px var(--green); } }
.float { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; color: #fff; text-shadow: 0 2px 6px #000, 0 0 12px currentColor; animation: floatup 1.1s ease-out forwards; pointer-events: none; z-index: 10; white-space: nowrap; }
.float.dmg { color: #ff6b6b; } .float.crit { color: #ffd166; font-size: 2rem; } .float.heal { color: #7ce08f; } .float.miss { color: #cfcfcf; font-size: 1.1rem; }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(1); } }
.initiative { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.initiative .chip { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.12); font-size: .72rem; font-family: var(--font-ui); letter-spacing: .04em; }
.initiative .chip img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.initiative .chip.now { border-color: var(--gold-2); background: rgba(212,175,55,.15); }
.initiative .chip.enemy { border-color: rgba(217,59,63,.4); }
.initiative .chip.dead { opacity: .35; text-decoration: line-through; }

/* dice */
.dice-tray { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 90; pointer-events: none; display: flex; gap: 14px; }
.die { width: 92px; height: 92px; position: relative; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: #1a1408; animation: dieIn .25s, dieOut .4s 1.5s forwards; filter: drop-shadow(0 8px 16px rgba(0,0,0,.7)); }
.die svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.die span { position: relative; z-index: 2; animation: tumble .55s steps(8); }
.die.crit span { color: #7a1b00; } .die.crit { animation: dieIn .25s, dieOut .5s 1.8s forwards, critglow .6s .5s 2; }
.die.fumble svg path { fill: #4a4a4a; }
.die .lbl { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: .68rem; font-family: var(--font-ui); color: var(--ink); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 2px 4px #000; }
@keyframes tumble { from { transform: rotate(-30deg) scale(.6); } to { transform: rotate(0) scale(1); } }
@keyframes dieIn { from { transform: scale(.3) rotate(-90deg); opacity: 0; } } @keyframes dieOut { to { transform: translateY(-30px) scale(.8); opacity: 0; } }
@keyframes critglow { 50% { filter: drop-shadow(0 0 30px #ffd166) brightness(1.3); } }

/* log */
.log { max-height: 320px; overflow: auto; font-size: .9rem; display: flex; flex-direction: column-reverse; gap: 4px; padding: 4px 2px; scrollbar-width: thin; }
.log .line { padding: 3px 8px; border-left: 2px solid rgba(255,255,255,.08); color: var(--ink-2); animation: fade .3s; }
.log .line.narrate { color: var(--parch); border-color: var(--gold-3); font-style: italic; } .log .line.roll { color: #a9c7ea; border-color: var(--blue); } .log .line.damage { color: #ff9a9c; border-color: var(--crimson); }
.log .line.heal, .log .line.loot, .log .line.xp, .log .line.gold { color: #9fe3b0; border-color: var(--green); } .log .line.crit { color: #ffd166; border-color: var(--gold); font-weight: 700; }
.log .line.death, .log .line.end, .log .line.combat-start { color: var(--gold-2); border-color: var(--gold-2); font-family: var(--font-display); }
.log .line.choice { color: var(--ink-3); font-style: italic; }

/* hero side panel */
.hero-panel .portrait { position: relative; height: 150px; border-radius: 12px; background: radial-gradient(80% 90% at 50% 30%, var(--pal-a), var(--pal-b)); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border: 1px solid rgba(212,175,55,.35); }
.hero-panel .portrait img { max-height: 140px; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0,0,0,.7)); }
.hero-panel .portrait .lvl { position: absolute; top: 8px; left: 8px; }
.stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; text-align: center; }
.stats-grid .ab { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 6px 2px; }
.stats-grid .ab b { display: block; font-family: var(--font-ui); font-size: .62rem; letter-spacing: .08em; color: var(--ink-3); }
.stats-grid .ab span { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.stats-grid .ab small { display: block; color: var(--gold-2); font-size: .72rem; }
.party-row { display: flex; gap: 8px; }
.party-row .mini { flex: 1; background: rgba(0,0,0,.35); border-radius: 10px; padding: 6px; text-align: center; border: 1px solid rgba(255,255,255,.08); }
.party-row .mini img { height: 48px; image-rendering: pixelated; }
.party-row .mini .nm { font-size: .72rem; font-family: var(--font-ui); }
.slots { display: flex; gap: 4px; flex-wrap: wrap; } .slots .pip { width: 12px; height: 12px; border-radius: 50%; background: var(--mana); box-shadow: 0 0 6px var(--mana); } .slots .pip.used { background: rgba(255,255,255,.1); box-shadow: none; }
.slots .lvl { font-family: var(--font-ui); font-size: .62rem; color: var(--ink-3); margin-right: 4px; }
.cond-chips { display: flex; gap: 4px; flex-wrap: wrap; } .cond-chips .badge { font-size: .6rem; padding: 2px 7px; }

/* inventory */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.slot-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.slot { background: rgba(0,0,0,.35); border: 1px dashed rgba(212,175,55,.3); border-radius: 10px; padding: 8px 10px; min-height: 58px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.slot .ic { width: 26px; height: 26px; color: var(--gold); } .slot .lbl { font-family: var(--font-ui); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .slot .nm { font-size: .88rem; }
.slot.filled { border-style: solid; }

/* creation */
.steps { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.steps .step { flex: 1; text-align: center; font-family: var(--font-ui); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: 8px; border-bottom: 2px solid rgba(255,255,255,.1); color: var(--ink-3); }
.steps .step.on { color: var(--gold-2); border-color: var(--gold-2); } .steps .step.done { color: var(--ink-2); border-color: var(--gold-3); }
.ability-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ability-picker .ab { background: rgba(0,0,0,.35); border: 1px solid rgba(212,175,55,.3); border-radius: 12px; padding: 12px; text-align: center; }
.ability-picker .ab b { font-family: var(--font-ui); letter-spacing: .1em; font-size: .72rem; color: var(--gold); display: block; }
.ability-picker .ab .val { font-family: var(--font-display); font-size: 1.9rem; font-weight: 900; }
.ability-picker .ab .mod { color: var(--gold-2); font-size: .85rem; }
.pool { display: flex; gap: 8px; flex-wrap: wrap; } .pool .chip { font-family: var(--font-display); font-weight: 700; padding: 6px 14px; border-radius: 999px; background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.5); cursor: grab; }
.pool .chip.used { opacity: .25; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; } .chips .chip { font-size: .85rem; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.3); cursor: pointer; }
.chips .chip.on { border-color: var(--gold-2); background: rgba(212,175,55,.15); color: var(--gold-2); } .chips .chip.disabled { opacity: .4; cursor: not-allowed; }
.sprite-pick { display: flex; gap: 10px; flex-wrap: wrap; } .sprite-pick .opt { width: 96px; height: 110px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: flex-end; justify-content: center; cursor: pointer; padding-bottom: 6px; }
.sprite-pick .opt img { max-height: 96px; max-width: 86px; image-rendering: pixelated; } .sprite-pick .opt.on { border-color: var(--gold-2); box-shadow: 0 0 20px rgba(212,175,55,.3); }

/* misc */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .92rem; } .kv b { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); align-self: center; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; } .table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.06); } .table th { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; }
.tabs button { background: none; border: none; color: var(--ink-2); font-family: var(--font-ui); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--gold-2); border-color: var(--gold-2); }
.empty { text-align: center; padding: 40px 20px; color: var(--ink-3); }
.pulse { animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(212,175,55,.25), 0 0 30px rgba(212,175,55,.35); } }
.levelup-banner { text-align: center; padding: 20px; background: radial-gradient(60% 100% at 50% 0%, rgba(212,175,55,.25), transparent); }
.levelup-banner h2 { font-size: 2.2rem; color: var(--gold-2); text-shadow: 0 0 30px rgba(212,175,55,.6); }
.victory-banner { text-align: center; padding: 26px 20px; }
.victory-banner h2 { font-size: 2.4rem; color: var(--gold-2); text-shadow: 0 0 30px rgba(212,175,55,.6); letter-spacing: .1em; }
.victory-banner.defeat h2 { color: var(--crimson-2); text-shadow: 0 0 30px rgba(164,22,26,.6); }
.loot-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.loot-row .card { width: 150px; animation: flip .6s both; } .loot-row .card:nth-child(2) { animation-delay: .2s; } .loot-row .card:nth-child(3) { animation-delay: .4s; } .loot-row .card:nth-child(4) { animation-delay: .6s; }
@keyframes flip { from { transform: rotateY(90deg) scale(.8); opacity: 0; } }
.sound-toggle { font-size: 1rem; }
@media (max-width: 640px) { body { font-size: 16px; } .topbar .wrap { gap: 8px; } .nav a, .nav button { padding: 6px 8px; font-size: .7rem; } .hero-banner .content { padding: 22px; } .hand .acard { min-width: 150px; } .combatant { width: 120px; } .combatant .sprite-wrap { height: 88px; } .combatant .sprite { max-height: 86px; } .scene-art { aspect-ratio: 16 / 10; } }