@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  font-family: "DM Sans", system-ui, sans-serif;
  color: #e6e9e8;
  background: #0b131b;
  --gold: #e2c180;
  --muted: #7e939b;
  --attack: #edaa88;
  --guard: #8bbad7;
  --mend: #83c8a2;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(ellipse at 50% 0, #1c3038 0, #101b24 38%, #0b131b 80%); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
button { color: inherit; }
button, a { touch-action: manipulation; }
[hidden] { display: none !important; }
body:not([data-screen="game"]) .app, body:not([data-screen="game"]) .overlay:not(#reset-overlay) { display: none !important; }
body[data-screen="game"] { padding-bottom: 65px; }
.menu-screen { min-height: 100svh; position: relative; display: flex; align-items: center; overflow: hidden; isolation: isolate; padding: 85px max(7vw, 24px) 120px; }
.menu-scene, .menu-shade { position: absolute; inset: 0; z-index: -2; }
.menu-scene svg { width: 100%; height: 100%; object-fit: cover; opacity: .65; }
.menu-shade { z-index: -1; background: linear-gradient(90deg, #09131bee 0%, #09131bb5 50%, #09131b40), linear-gradient(0deg, #09131b 0%, transparent 40%); }
.menu-content { max-width: 620px; }
.menu-emblem { margin: 20px 0; filter: drop-shadow(0 0 25px #e2c18040); }
.menu-content h1 { font-size: clamp(46px, 7.5vw, 98px); line-height: 1; letter-spacing: -3px; }
.menu-content h1 span { display: block; color: var(--gold); }
.menu-tagline { font: 500 clamp(20px, 2.5vw, 30px)/1.5 "Cinzel", Georgia, serif; color: #dce7e0; margin: 25px 0 14px; }
.menu-description { color: #abc0c2; max-width: 400px; line-height: 1.8; font-size: 14px; }
.menu-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 30px 0 25px; }
.menu-actions .primary-button, .menu-actions .secondary-button { min-width: 260px; text-align: center; justify-content: center; }
.menu-actions .reset-button { padding: 10px 0; }
.menu-progress { color: var(--gold); font-size: 12px; line-height: 1.8; }
.menu-save-note { color: var(--muted); font-size: 11px; }
.menu-hero { position: absolute; width: clamp(230px, 35vw, 520px); right: 8%; bottom: 17%; filter: drop-shadow(0 0 65px #afd9c81a); pointer-events: none; z-index: -1; }
.menu-hero svg { width: 100%; display: block; }
.menu-features { position: absolute; left: max(7vw, 24px); right: 24px; bottom: 35px; display: flex; flex-wrap: wrap; gap: 28px; color: #a9c2bb; font-size: 10px; letter-spacing: 2px; }
.collection-screen { max-width: 1300px; margin: auto; padding: 25px 48px 65px; }
.collection-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 35px; }
.collection-top .eyebrow { margin: 0; text-align: center; }
.collection-screen > h1 { font-size: clamp(28px, 4vw, 46px); }
.collection-intro { max-width: 740px; color: #a2b5bb; font-size: 13px; line-height: 1.8; margin: 16px 0 24px; }
.collection-tabs { flex-wrap: wrap; }
.collection-count { color: var(--muted); font-size: 11px; margin: 20px 0; }
.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.collection-card { padding: 25px; border-radius: 14px; border: 1px solid #8bacbe27; background: linear-gradient(135deg, #20313c85, #14212c); display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.collection-card.owned-entry { border-color: #e2c18070; background: linear-gradient(135deg, #65523824, #16262f); }
.collection-card.locked-entry { border-style: dashed; }
.collection-icon { font-size: 35px; color: var(--gold); margin-bottom: 18px; }
.collection-card .shop-card-kind { line-height: 1.7; }
.collection-card h2 { font: 600 18px/1.5 "Cinzel", Georgia, serif; margin: 10px 0; color: #e7e5d7; }
.collection-card p { color: #a7b9bf; font-size: 12px; line-height: 1.9; margin: 0 0 20px; }
.collection-card small { margin-top: auto; color: #d3bd8b; font-size: 10px; line-height: 1.8; }
.collection-portrait { height: 160px; width: 100%; text-align: center; margin-bottom: 15px; }
.collection-portrait svg { height: 100%; width: 160px; }
.game-navigation { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; background: #0b171ff2; padding: 8px; border: 1px solid #c9b78530; border-radius: 12px; box-shadow: 0 4px 20px #0005; white-space: nowrap; }
.game-navigation button { font-size: 10px; padding: 9px 14px; }
.shop-navigation { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.shop-navigation .secondary-button { font-size: 10px; }
.relic-card { background: radial-gradient(ellipse at top, #69523733, #162530); border-color: #ceac7359; }
.relic-card .relic-factor { display: block; font: 700 32px "Cinzel", Georgia, serif; color: var(--gold); margin: 5px 0 18px; }
#reward-menu, #end-menu { margin-top: 16px; }
@media (max-width: 900px) {
  .menu-hero { right: -5%; opacity: .55; width: 45vw; }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-screen { padding-inline: 24px; }
  .collection-top > .eyebrow { display: none; }
}
@media (max-width: 540px) {
  .menu-screen { padding: 40px 24px 115px; }
  .menu-content > .eyebrow { font-size: 8px; letter-spacing: 1.2px; }
  .menu-content h1 { font-size: 55px; }
  .menu-hero { right: -90px; bottom: 110px; width: 310px; opacity: .18; }
  .menu-emblem { width: 56px; height: 56px; margin: 18px 0; }
  .menu-features { gap: 12px; font-size: 8px; letter-spacing: 1px; }
  .menu-actions .primary-button, .menu-actions .secondary-button { min-width: 240px; }
  .collection-screen { padding: 18px 15px 45px; }
  .collection-top { gap: 8px; }
  .collection-top button { padding: 11px; font-size: 10px; }
  .collection-grid { grid-template-columns: 1fr; gap: 12px; }
  .collection-card { padding: 22px; }
}
.app { max-width: 1300px; margin: auto; padding: 0 48px; }
.topbar { height: 104px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ffffff0c; }
.brand { display: flex; align-items: center; gap: 12px; color: #f1e7d0; text-decoration: none; font-family: "Cinzel", Georgia, serif; font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.brand img { filter: drop-shadow(0 0 12px #e2c18016); }
.brand-accent { color: var(--gold); margin-left: 5px; }
.brand small { font: 500 8px "DM Sans", sans-serif; letter-spacing: 3.5px; color: var(--muted); display: block; margin-top: 4px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.record { font-size: 9px; letter-spacing: 1.8px; color: #81939a; margin-right: 22px; }
.record b { color: var(--gold); font-size: 12px; margin-left: 8px; }
.icon-button { width: 35px; height: 35px; border: 1px solid #ffffff18; border-radius: 50%; background: #ffffff03; color: #b0bfc3; font-size: 17px; transition: .2s; }
.icon-button:hover { border-color: var(--gold); color: var(--gold); background: #e2c1800a; }
.icon-button[aria-pressed="true"] { color: var(--gold); border-color: #e2c18070; }
.expedition-header { display: flex; gap: 30px; align-items: center; justify-content: space-between; padding: 30px 0 24px; }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 9px; letter-spacing: 2.3px; font-weight: 700; }
.tiny-diamond { display: inline-block; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); margin: 0 8px 1px 1px; }
h1 { font: 600 clamp(20px, 2.5vw, 28px) "Cinzel", Georgia, serif; margin: 0; letter-spacing: -.6px; color: #ebe8dc; }
.route { display: flex; align-items: center; gap: 0; margin-left: auto; }
.route-node { width: 24px; height: 24px; border: 1px solid #687e823c; border-radius: 50%; display: grid; place-items: center; color: #536970; font-size: 10px; position: relative; }
.route-node.boss { border-radius: 6px; transform: rotate(45deg); }
.route-node.boss span { transform: rotate(-45deg); }
.route-node.current { border-color: var(--gold); background: #e2c18018; color: var(--gold); box-shadow: 0 0 18px #e2c18018; }
.route-node.done { border-color: #67ad9270; background: #67ad9215; color: #8ac9ac; }
.route-line { width: 18px; height: 1px; background: #8ba5a323; }
.expedition-header { flex-wrap: wrap; }
.route { width: 100%; order: 3; flex-wrap: wrap; gap: 10px; }
.route-chapter { display: flex; align-items: center; flex-shrink: 0; }
.route-node.shop-node { border-radius: 5px; color: #99d9bd; border-color: #74b79765; background: #74b7970b; }
.encounter-count { display: flex; align-items: center; gap: 9px; padding-left: 24px; border-left: 1px solid #ffffff12; }
.encounter-count > span:first-child { font: 500 32px "Cinzel", Georgia, serif; color: var(--gold); }
.encounter-count > span:last-child { font-size: 8px; letter-spacing: 1.3px; color: #82949b; line-height: 1.7; }
.arena { height: 392px; overflow: hidden; border-radius: 14px; border: 1px solid #7eaba63a; position: relative; background: #172e2c; box-shadow: 0 25px 70px #0004, inset 0 0 80px #0005; --scene-glow: #78cba2; }
.arena.crypt { background: #212937; border-color: #8b9abd35; --scene-glow: #8aacf7; }
.arena.inferno { background: #3a2225; border-color: #ca886740; --scene-glow: #f3975f; }
.arena.frostlands { background: #1d3446; border-color: #8acddb50; --scene-glow: #a7e8ef; }
.arena.sunken { background: #163b40; border-color: #70bfac50; --scene-glow: #8fdcc5; }
.arena.astral { background: #30213f; border-color: #bb97d350; --scene-glow: #ceadf6; }
.scene-art, .scene-art > svg, .scene-vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-art > svg { object-fit: cover; }
.scene-vignette { background: linear-gradient(90deg, #081b2190, transparent 40%, #08151938), linear-gradient(0deg, #08151fe8, transparent 35%, #081b2150); pointer-events: none; }
.inferno .scene-vignette { background: linear-gradient(90deg, #23152180, transparent 45%, #190f1830), linear-gradient(0deg, #170f1de8, transparent 45%, #22121b40); }
.arena-top { position: absolute; top: 20px; left: 25px; right: 25px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.area-label { font-size: 9px; letter-spacing: 2px; color: #c5d8cebb; }
.battle-badge { border: 1px solid #b6d5c035; background: #10262290; padding: 7px 11px; border-radius: 5px; font-size: 9px; letter-spacing: 1.5px; color: #c5d7ca; backdrop-filter: blur(8px); }
.battle-badge span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #9ed8ae; box-shadow: 0 0 8px #9ed8ae88; margin-right: 7px; }
.combatants { position: relative; display: grid; grid-template-columns: 1fr 70px 1fr; align-items: start; height: 100%; max-width: 940px; margin: auto; padding: 68px 40px 0; z-index: 1; }
.fighter { min-width: 0; }
.fighter-heading { display: flex; align-items: center; gap: 10px; }
.portrait-icon { width: 32px; height: 32px; border: 1px solid #dbcb9770; color: var(--gold); background: #18353090; border-radius: 9px; display: grid; place-items: center; font-size: 20px; }
.enemy-icon { color: #e3b49d; border-color: #e3b49d60; background: #3e282790; font: 600 15px "Cinzel", Georgia, serif; }
.fighter-role { display: block; font-size: 7px; color: #bdcfc3a0; letter-spacing: 1.6px; }
.fighter-heading h2 { margin: 2px 0 0; font: 600 18px "Cinzel", Georgia, serif; color: #f1efe2; }
.hp-number { margin-left: auto; font-size: 15px; font-weight: 700; color: #e6efe6; white-space: nowrap; }
.hp-number small { font-size: 10px; font-weight: 500; color: #adbbab; }
.hero-shield { color: #a8d8f0; font-size: .8em; }
.hero-shield b { font-size: 1.2em; }
.health-track { height: 6px; margin-top: 11px; border-radius: 4px; background: #040f1466; overflow: hidden; box-shadow: 0 0 0 1px #e3ffe612; }
.health-fill { height: 100%; width: 100%; transition: width .5s cubic-bezier(.2,.8,.2,1); border-radius: inherit; position: relative; }
.health-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, transparent, #ffffff40); }
.hero-health { background: linear-gradient(90deg, #4b947d, #b2d1a0); box-shadow: 0 0 12px #90bf8d60; }
.enemy-health { background: linear-gradient(90deg, #be736b, #e4ac86); box-shadow: 0 0 12px #edac8960; }
.character-stage { height: 210px; position: relative; display: flex; justify-content: center; align-items: flex-end; }
.character-art { position: relative; width: 215px; height: 218px; filter: drop-shadow(0 8px 8px #0005); transform-origin: bottom center; animation: idle 3.6s ease-in-out infinite; z-index: 2; }
.character-art > svg { width: 100%; height: 100%; overflow: visible; }
.enemy-fighter .character-art { animation-delay: -1.5s; }
.character-art.slime { width: 205px; height: 178px; animation: slime-idle 2.6s ease-in-out infinite; }
.character-art.demon { width: 253px; height: 232px; }
.character-art.boss { width: 255px; height: 230px; }
.character-art.boss.demon { width: 290px; height: 250px; }
.ground-shadow { position: absolute; bottom: -2px; height: 25px; width: 165px; background: radial-gradient(ellipse, #0009, transparent 70%); border-radius: 50%; }
.hero-caption { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 7px; font-size: 10px; color: #d2dcc8bb; }
.mini-icon { color: var(--gold); font-size: 13px; }
.caption-divider { height: 8px; width: 1px; margin: 0 4px; background: #ffffff30; }
.versus { align-self: center; margin-bottom: 35px; display: flex; flex-direction: column; align-items: center; gap: 12px; font: 500 14px "Cinzel", Georgia, serif; color: #d8e6d64a; }
.versus span { width: 1px; height: 30px; background: linear-gradient(0deg, #d8e6d635, transparent); }
.versus span:last-child { transform: rotate(180deg); }
.intent { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 11px; color: #ecc4a5; padding-top: 5px; }
.intent-icon { font-size: 15px; }
.intent strong { font-size: 12px; color: #ffdab5; }
.arena-bottom { position: absolute; left: 25px; right: 25px; bottom: 15px; display: flex; justify-content: space-between; gap: 15px; z-index: 2; }
#flavor-text { font: italic 11px Georgia, serif; color: #b9cfbb80; }
.turn-counter { font-size: 8px; color: #c3d3c090; letter-spacing: 1.5px; white-space: nowrap; }
.battle-console { margin-top: 24px; padding: 25px 27px 21px; border: 1px solid #9bafb323; border-radius: 12px; background: linear-gradient(120deg, #21323a70, #17263080); box-shadow: 0 12px 30px #0001; }
.console-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.console-heading .eyebrow { font-size: 8px; color: #a3b49b; letter-spacing: 1.8px; margin-bottom: 7px; }
.console-heading h2 { font: 600 21px "Cinzel", Georgia, serif; margin: 0; color: #e7e5d9; }
.phase-instruction { font-size: 12px; line-height: 1.6; color: #a6b9bf; margin: 0; max-width: 280px; text-align: right; }
.controls-layout { display: grid; grid-template-columns: minmax(245px, .85fr) minmax(0, 1.6fr); gap: 28px; margin-top: 25px; }
.dice-panel { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #aabcc015; padding-right: 25px; }
.dice-tray { display: flex; gap: 17px; justify-content: center; align-items: center; padding: 0 0 16px; min-height: 91px; perspective: 500px; }
.die { width: 70px; height: 70px; flex-shrink: 0; border-radius: 13px; border: 1px solid #f9e8b9; background: linear-gradient(145deg, #fff7dd, #ebd7a6 65%, #c7ac76); box-shadow: inset 0 2px 2px #fff, inset -3px -4px 0 #b9976055, 0 7px 0 var(--die-edge, #85704c), 0 10px 12px #0006; position: relative; padding: 11px; transform: rotate(-6deg); transition: transform .2s, box-shadow .2s, opacity .2s; color: #302b23; }
.die:nth-child(2) { transform: rotate(4deg); }
.die:nth-child(3) { transform: rotate(-3deg); }
.die:hover:not(:disabled) { transform: translateY(-5px) rotate(0); }
.die.selected { transform: translateY(-8px) rotate(0); box-shadow: inset 0 2px 2px #fff, inset -3px -4px 0 #b9976055, 0 7px 0 var(--die-edge, #85704c), 0 10px 12px #0006, 0 0 0 4px #1c2c33, 0 0 0 5px var(--gold), 0 0 26px #e2c18040; }
.die.unrolled { opacity: .4; }
.die.rolling { animation: dice-roll .18s linear infinite; }
.die-face { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); height: 100%; gap: 4px; }
.pip { border-radius: 50%; background: #34423b; box-shadow: inset 0 1px 2px #0008; }
.die[data-value="6"] .pip { background: #88613a; }
.die-assignment { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; background: #192933; width: 23px; height: 23px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; z-index: 3; }
.die-assignment.attack { color: var(--attack); }
.die-assignment.guard { color: var(--guard); }
.die-assignment.mend { color: var(--mend); }
.dice-tools { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px 10px; text-align: center; margin-top: 4px; }
#dice-caption { color: #9cafaa; font-size: 8px; letter-spacing: 1.2px; width: 100%; }
.reroll-button { border: 0; padding: 5px 0; background: transparent; font-size: 11px; color: #c2cfcf; }
.reroll-button span { font-size: 8px; padding: 2px 5px; border: 1px solid #82959535; border-radius: 3px; margin-left: 4px; color: var(--gold); }
.reroll-button:disabled { opacity: .35; }
.reroll-button:hover:not(:disabled) { color: var(--gold); }
.action-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.assignment-panel { min-width: 0; }
.action-slot { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; text-align: left; padding: 14px 12px 9px; border: 1px solid #ffffff12; border-radius: 7px; background: #0f1d2560; transition: .2s; --action-color: var(--attack); }
.action-slot.guard { --action-color: var(--guard); }
.action-slot.mend { --action-color: var(--mend); }
.action-symbol { font-size: 20px; color: var(--action-color); }
.action-copy strong { display: block; font-size: 13px; font-weight: 600; }
.action-copy small { display: block; font-size: 9px; color: #a1b5ba; margin-top: 4px; white-space: nowrap; }
.action-value { color: var(--action-color); font-size: 19px; font-weight: 600; }
.slot-dice { grid-column: 1 / -1; border-top: 1px solid #ffffff0b; padding-top: 8px; margin-top: 5px; font-size: 9px; letter-spacing: .6px; color: #91a8b0; min-height: 21px; }
.slot-dice.has-dice { color: var(--action-color); }
.action-slot.active { border-color: color-mix(in srgb, var(--action-color) 50%, transparent); background: color-mix(in srgb, var(--action-color) 7%, #0f1d25); box-shadow: 0 0 20px color-mix(in srgb, var(--action-color) 5%, transparent); }
.commit-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 14px; }
#combat-preview { font-size: 11px; line-height: 1.6; color: #a3b6bc; max-width: 250px; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 44px; border: 1px solid #ecd099; border-radius: 5px; padding: 11px 19px; background: linear-gradient(130deg, #eed398, #cba564); color: #2a2c26; font-weight: 700; font-size: 11px; box-shadow: 0 3px 12px #0002, inset 0 1px #fff7; white-space: nowrap; transition: transform .2s, filter .2s, opacity .2s; }
.primary-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 4px 20px #cba56422; }
.primary-button:active:not(:disabled) { transform: translateY(1px); }
.primary-button:disabled { opacity: .4; }
.button-arrow { font-size: 19px; font-weight: 400; }
.journal { margin: 19px 0 0; display: flex; gap: 25px; padding: 0 3px; align-items: flex-start; min-height: 47px; }
.journal-label { font-size: 7px; letter-spacing: 1.5px; color: #647e87; white-space: nowrap; margin-top: 4px; }
#battle-log { display: flex; flex-direction: column-reverse; gap: 5px; font-size: 10px; color: #8ba0a6; line-height: 1.4; }
#battle-log p { margin: 0; }
#battle-log p:last-child { color: #c3d0cb; }
.log-mark { color: var(--gold); margin-right: 7px; font-size: 9px; }
footer { display: flex; justify-content: space-between; gap: 10px; padding: 22px 0 25px; margin-top: 7px; border-top: 1px solid #ffffff08; font-size: 7px; letter-spacing: 1.6px; color: #4f6873; }
.footer-dot { color: #bc985b; padding: 0 5px; }
.ward-aura { position: absolute; bottom: 1px; height: 195px; width: 165px; border-radius: 48% 48% 40% 40%; border: 2px solid #9fccff00; opacity: 0; z-index: 3; pointer-events: none; transition: .3s; }
.ward-aura.visible { opacity: 1; border-color: #9fccff80; background: radial-gradient(ellipse at center, transparent 50%, #82b4ff20); box-shadow: 0 0 30px #72b6ff25, inset 0 0 20px #72b6ff20; }
.floating-effects { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: flex; justify-content: center; }
.floating-number { position: absolute; top: 75px; font: 800 37px "Cinzel", Georgia, serif; color: #fff2cf; text-shadow: 0 3px 0 #7e382b, 0 0 20px #ec875a; animation: float-up 1.2s ease-out forwards; }
.floating-number.heal { color: #c7ffca; text-shadow: 0 3px 0 #306a50, 0 0 20px #6cec9e; }
.floating-number.block { color: #c2e5ff; font-size: 25px; text-shadow: 0 3px 0 #385274, 0 0 20px #7fbeec; }
.floating-number.critical { font-size: 46px; color: #ffd18c; }
.floating-number small { display: block; text-align: center; font: 700 9px "DM Sans", sans-serif; letter-spacing: 2px; }
.character-art.strike { animation: hero-strike .55s ease-in-out; }
.character-art.enemy-strike { animation: enemy-strike .55s ease-in-out; }
.character-art.hit { animation: hit .45s ease-out; }
.character-art.defeated { animation: defeated .75s ease-out forwards; }
.arena.impact { animation: impact .35s ease-in-out; }
.overlay { position: fixed; inset: 0; background: #060d16c9; backdrop-filter: blur(12px); z-index: 20; display: flex; justify-content: center; align-items: center; padding: 24px; overflow-y: auto; }
.modal { position: relative; max-width: 780px; width: 100%; padding: 35px 40px; text-align: center; border-radius: 15px; border: 1px solid #dbc18c40; background: radial-gradient(ellipse at 50% 0, #30433e, #17252f 50%, #111d27); box-shadow: 0 30px 100px #0008; animation: modal-in .4s ease-out; }
.modal-emblem { color: var(--gold); font-size: 44px; line-height: 1; padding: 0 0 22px; text-shadow: 0 0 30px #e2c18050; }
.modal h2 { font: 600 clamp(23px, 4vw, 32px) "Cinzel", Georgia, serif; color: #eee6d2; margin: 12px 0; }
.modal-description { font-size: 12px; color: #a1b5b6; line-height: 1.7; }
.reward-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 27px 0 20px; }
.reward-card { padding: 22px 16px; border: 1px solid #879d9d40; border-radius: 9px; background: #0c182548; color: #c7d2cb; min-height: 197px; transition: .2s; display: flex; flex-direction: column; align-items: center; }
.reward-card:hover { transform: translateY(-5px); border-color: var(--gold); background: #e2c18008; box-shadow: 0 6px 30px #e2c1800b; }
.reward-icon { font-size: 34px; color: var(--gold); margin-bottom: 17px; }
.reward-card h3 { font: 600 16px "Cinzel", Georgia, serif; margin: 0 0 10px; color: #f0e5d0; }
.reward-card p { font-size: 11px; line-height: 1.7; margin: 0; color: #98b2b2; }
.reward-card .reward-tag { font-size: 7px; letter-spacing: 1.7px; color: var(--gold); margin-top: auto; padding-top: 17px; }
.modal-footnote { font-size: 10px; line-height: 1.6; color: #728e98; margin: 14px 0 0; }
.end-modal { max-width: 550px; }
.end-modal .primary-button, .help-modal .primary-button { margin: 25px auto 0; }
.run-stats { display: flex; justify-content: center; gap: 30px; margin: 27px 0; }
.run-stat strong { display: block; font: 600 28px "Cinzel", Georgia, serif; color: var(--gold); }
.run-stat span { display: block; font-size: 8px; letter-spacing: 1px; margin-top: 7px; color: #8ca4a8; }
.help-modal { max-width: 650px; max-height: calc(100dvh - 48px); overflow-y: auto; scrollbar-color: #637a79 #16262e; }
.close-button { position: absolute; right: 17px; top: 15px; }
.help-steps { text-align: left; margin-top: 25px; }
.help-steps p { font-size: 12px; line-height: 1.8; color: #96aeb3; padding-bottom: 13px; border-bottom: 1px solid #ffffff0b; }
.help-steps b { display: block; font-size: 10px; color: var(--gold); margin-bottom: 3px; }
.help-steps strong { font-size: 13px; color: #e0e5db; margin-left: 12px; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 30; max-width: calc(100vw - 32px); padding: 12px 20px; background: #23383c; border: 1px solid var(--gold); border-radius: 6px; color: #eee0c2; font-size: 12px; pointer-events: none; }
.spark { animation: sparkle 3s ease-in-out infinite alternate; }
.monster-eye { animation: blink 5s infinite; transform-box: fill-box; transform-origin: center; }
.gold-counter { color: var(--gold); border: 1px solid #dfbc7435; background: #e2c18008; padding: 8px 12px; border-radius: 5px; font-size: 13px; white-space: nowrap; }
.gold-counter b { margin-left: 4px; }
.reset-button, .secondary-button { color: #b7c6c6; background: #ffffff04; border: 1px solid #8caaaa35; border-radius: 5px; padding: 9px 12px; font-size: 11px; }
.reset-button:hover:not(:disabled), .secondary-button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.reset-button:disabled, .secondary-button:disabled { opacity: .4; cursor: default; }
.run-note { margin: 8px 0 0; font-size: 9px; color: #91aaa9; line-height: 1.7; max-width: 390px; }
.route { flex-shrink: 0; }
.route-node { width: 20px; height: 20px; }
.route-line { width: 10px; }
.collection-heading { display: flex; justify-content: space-between; gap: 10px; color: #8da9ac; letter-spacing: 1.6px; font-size: 8px; margin-bottom: 20px; }
.collection-heading b { color: var(--gold); letter-spacing: .5px; }
.dice-tray { flex-wrap: wrap; gap: 44px 17px; padding-bottom: 39px; min-height: 115px; }
.dice-tools { margin-top: 6px; }
.die-type-label { position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); font-size: 7px; letter-spacing: 1.1px; color: var(--die-ink, var(--gold)); white-space: nowrap; }
.die-description { font-size: 10px; line-height: 1.7; color: #93adaf; text-align: center; margin: 9px 0 0; min-height: 33px; }
.die { --die-light: #f7d6b7; --die-dark: #b68561; --die-ink: #edb690; background: linear-gradient(145deg, var(--die-light), color-mix(in srgb, var(--die-light) 75%, var(--die-dark)) 65%, var(--die-dark)); border-color: var(--die-light); }
.type-guard { --die-light: #c1dfef; --die-dark: #688da7; --die-ink: #99c9eb; }
.type-mend { --die-light: #cae8be; --die-dark: #6b9b7a; --die-ink: #99d6a8; }
.type-venom { --die-light: #d9c0ed; --die-dark: #8a65a6; --die-ink: #c79bdf; }
.type-flame { --die-light: #ffd68b; --die-dark: #c2774c; --die-ink: #f4b76e; }
.type-blood { --die-light: #efbed0; --die-dark: #ad6585; --die-ink: #e8a2bf; }
.type-fortune { --die-light: #f6e3a3; --die-dark: #b39448; --die-ink: #f4d383; }
.type-frost { --die-light: #d2f5fa; --die-dark: #539bb3; --die-ink: #93e0ec; }
.type-lightning { --die-light: #e5d1ff; --die-dark: #8b70c9; --die-ink: #c6a7ff; }
.type-bloom { --die-light: #e2f4c7; --die-dark: #8dab67; --die-ink: #c2e89d; }
.die-assignment { color: var(--die-ink); }
.die .pip, .die[data-value="6"] .pip { background: color-mix(in srgb, var(--die-dark) 25%, #263132); }
.die.tier-gold { --die-light: #fff0b3; --die-dark: #c08b32; --die-edge: #a57230; background: linear-gradient(135deg, #fff4c6, #f2cf6e 35%, #eab74e 65%, #c08b32); border-color: #ffe7a7; }
.die.tier-diamond { --die-light: #e9fbff; --die-dark: #6da5bf; --die-edge: #527e9a; background: linear-gradient(125deg, #effdff, #bce7ee 37%, #e4f6fc 38%, #c0e0f4 62%, #96c8e0 63%, #81accb); border-color: #ddfaff; }
.die.tier-ruby { --die-light: #fcb6c9; --die-dark: #a2385e; --die-edge: #6f254b; background: linear-gradient(125deg, #ffd7de, #eb779b 37%, #f7a8c0 38%, #d85c87 62%, #b2446b 63%, #8e315a); border-color: #ffb7d0; }
.die.tier-emerald { --die-light: #b7f7d5; --die-dark: #328869; --die-edge: #226553; background: linear-gradient(125deg, #dbffdf, #85dbaf 37%, #b1efd0 38%, #6ecb9c 62%, #3b9f80 63%, #28765c); border-color: #b2f8d7; }
.die.tier-obsidian { --die-light: #bd9bea; --die-dark: #433264; --die-edge: #30233f; background: linear-gradient(125deg, #9c7fc1, #47345e 37%, #685383 38%, #392942 62%, #604677 63%, #2a2036); border-color: #ac88d4; }
.die.tier-obsidian .pip, .die.tier-obsidian[data-value="6"] .pip { background: #f0dfff; box-shadow: 0 0 5px #d9b1ff35; }
.die.tier-sapphire { --die-dark: #487bcd; --die-edge: #28528b; background: linear-gradient(125deg, #d9eeff, #69a3ef 37%, #aed7ff 38%, #4e86d7 65%, #2d5494); border-color: #9dd6ff; }
.die.tier-sunstone { --die-dark: #cc7b3f; --die-edge: #93612e; background: linear-gradient(125deg, #fff4c5, #efaf55 37%, #ffe4a1 38%, #d9863f 65%, #a9582f); border-color: #ffe1a1; }
.die.tier-mythril { --die-dark: #558c95; --die-edge: #3d657b; background: linear-gradient(125deg, #ecffff, #9fc5d7 37%, #dafaf1 38%, #73a8b1 65%, #476e8c); border-color: #d0ffff; }
.die.tier-celestial { --die-dark: #9378b3; --die-edge: #625385; background: linear-gradient(125deg, #fff1db, #c5ade9 25%, #b9e6ed 40%, #edc7e0 60%, #a999d8 85%, #8076b2); border-color: #f9e8ff; box-shadow: 0 0 22px #c6b1ee35; }
.tier-sapphire .die-tier-mark { color: #b9dfff; background-color: #29466c; border-color: #77b6ee; }
.tier-sunstone .die-tier-mark { color: #ffe3a3; background-color: #654522; border-color: #eac082; }
.tier-mythril .die-tier-mark { color: #d1fbf8; background-color: #2d525e; border-color: #a9d6df; }
.tier-celestial .die-tier-mark { color: #f0daff; background-color: #504367; border-color: #cdb1ed; }
.die:not(.tier-base)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 40%, #ffffff50 41%, #ffffff15 56%, transparent 57%); pointer-events: none; }
.die-tier-mark { position: absolute; top: -9px; right: -9px; width: 27px; height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #49371e; border: 1px solid #e8c668; border-radius: 6px; font-size: 12px; color: #ffe39a; box-shadow: 0 2px 8px #0005; z-index: 3; }
.die-tier-mark small { font-size: 7px; line-height: 1; margin-top: 1px; font-weight: 700; }
.tier-diamond .die-tier-mark { color: #d4f6ff; background: #203a4c; border-color: #9ed8f0; }
.tier-ruby .die-tier-mark { color: #ffc6d9; background: #54273d; border-color: #e990b1; }
.tier-emerald .die-tier-mark { color: #b5f7d2; background: #193d32; border-color: #79d6ab; }
.tier-obsidian .die-tier-mark { color: #e5c7ff; background: #342441; border-color: #b38bd7; }
.die-type-label small { display: block; margin-top: 3px; font-size: 6px; letter-spacing: .9px; color: #95a8ac; }
.tier-gold .die-type-label small { color: #e2c180; }
.tier-diamond .die-type-label small { color: #acd8f1; }
.tier-ruby .die-type-label small { color: #f6a7c1; }
.tier-emerald .die-type-label small { color: #8edfb5; }
.tier-obsidian .die-type-label small { color: #cba9ef; }
.dice-tray { row-gap: 56px; padding-bottom: 50px; }
.special-effects { display: flex; gap: 9px; flex-wrap: wrap; color: #d5b6d9; font-size: 10px; padding: 10px 0 0; }
.special-effects:empty { display: none; }
.special-effects span { background: #c7a1cd0a; border: 1px solid #c7a1cd25; border-radius: 4px; padding: 4px 7px; }
.ability-heading { font-size: 8px; letter-spacing: 1.6px; color: #c3ba9c; margin: 18px 0 8px; display: flex; justify-content: space-between; gap: 10px; }
.ability-heading span { font-size: 7px; color: #7e969f; letter-spacing: 1px; }
.ability-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.empty-abilities { font-size: 10px; line-height: 1.7; color: #819da4; margin: 0; }
.ability-button { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; padding: 9px 10px; border: 1px solid #d3bce035; border-radius: 5px; background: #9c7cad08; min-height: 43px; }
.ability-button > span { color: #d4b9e2; font-size: 17px; }
.ability-button strong { font-size: 10px; font-weight: 600; }
.ability-button small { font-size: 7px; color: #c1b58f; }
.ability-button:disabled { opacity: .4; }
.ability-button:hover:not(:disabled) { border-color: #c9aadd; background: #9c7cad18; }
.skill-list { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 9px; font-size: 8px; color: #a8bdad; }
.skill-list:empty { display: none; }
.shop-modal { max-width: 880px; max-height: calc(100dvh - 48px); overflow-y: auto; text-align: left; scrollbar-color: #637a79 #16262e; }
.shop-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.shop-heading h2 { font-size: clamp(21px, 3vw, 29px); margin-bottom: 0; }
.shop-purse { color: var(--gold); font: 600 29px "Cinzel", Georgia, serif; text-align: right; white-space: nowrap; }
.shop-purse small { display: block; font: 600 7px "DM Sans", sans-serif; letter-spacing: 1.6px; margin-top: 3px; }
.shop-status { padding: 10px 13px; background: #7a9e840c; border: 1px solid #99b69f23; border-radius: 5px; font-size: 11px; color: #b4ccb8; margin: 16px 0; }
.shop-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 14px; }
.shop-tabs button { border: 1px solid #99afb225; border-radius: 5px; background: transparent; padding: 8px 12px; font-size: 11px; color: #9cb2b7; }
.shop-tabs button[aria-pressed="true"] { color: var(--gold); border-color: #d0b37570; background: #d0b3750a; }
.shop-stock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.shop-card { text-align: left; padding: 17px 14px 12px; border: 1px solid #9ab1ac30; border-radius: 8px; background: #07131f38; display: flex; flex-direction: column; min-height: 189px; transition: .2s; }
.shop-card:hover:not(:disabled) { border-color: var(--die-ink, var(--gold)); transform: translateY(-3px); background: #9ab1ac09; }
.shop-card:disabled { cursor: default; opacity: .5; }
.shop-card.purchased { border-color: #89be8f50; }
.shop-card-icon { font-size: 24px; color: var(--die-ink, var(--gold)); margin-bottom: 12px; }
.shop-card-kind { color: #8fa5a8; font-size: 6px; letter-spacing: 1px; line-height: 1.7; }
.shop-card h3 { font: 600 15px "Cinzel", Georgia, serif; color: #e8e5d4; margin: 8px 0; }
.shop-card p { font-size: 10px; line-height: 1.7; margin: 0 0 12px; color: #a3babc; }
.shop-price { border-top: 1px solid #ffffff0b; padding-top: 10px; margin-top: auto; font-size: 9px; font-weight: 600; letter-spacing: .5px; color: var(--die-ink, var(--gold)); }
.dice-shop-card { cursor: default; }
.dice-shop-card:hover { transform: none !important; }
.variant-options { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.variant-buy { display: flex; align-items: center; gap: 7px; text-align: left; padding: 8px; min-height: 45px; border: 1px solid #a6b1a62e; border-radius: 5px; background: #ffffff04; color: #c3d0cb; transition: background .2s, border-color .2s; }
.variant-buy:hover:not(:disabled) { background: #ffffff0a; border-color: #c6d9c9; }
.variant-buy:disabled { opacity: .4; cursor: default; }
.variant-gold { color: #edd19a; border-color: #c39c4b50; background: #d1a4580a; }
.variant-gold:hover:not(:disabled) { border-color: #edd19a; background: #d1a45818; }
.variant-diamond { color: #b8e1f3; border-color: #81b7da50; background: #8abde30b; }
.variant-diamond:hover:not(:disabled) { border-color: #b8e1f3; background: #8abde31b; }
.variant-ruby { color: #f3adc5; border-color: #da739650; background: #db65970b; }
.variant-ruby:hover:not(:disabled) { border-color: #f3adc5; background: #db65971b; }
.variant-emerald { color: #a0e2bf; border-color: #65ba9250; background: #65ba920b; }
.variant-emerald:hover:not(:disabled) { border-color: #a0e2bf; background: #65ba921b; }
.variant-obsidian { color: #d5b5f5; border-color: #a080c950; background: #a080c90b; }
.variant-obsidian:hover:not(:disabled) { border-color: #d5b5f5; background: #a080c91b; }
.variant-sapphire { color: #b9dfff; border-color: #77b6ee70; background: #77b6ee0b; }
.variant-sapphire:hover:not(:disabled) { border-color: #b9dfff; background: #77b6ee1b; }
.variant-sunstone { color: #ffe3a3; border-color: #eac08270; background: #eac0820b; }
.variant-sunstone:hover:not(:disabled) { border-color: #ffe3a3; background: #eac0821b; }
.variant-mythril { color: #d1fbf8; border-color: #a9d6df70; background: #a9d6df0b; }
.variant-mythril:hover:not(:disabled) { border-color: #d1fbf8; background: #a9d6df1b; }
.variant-celestial { color: #f0daff; border-color: #cdb1ed70; background: #cdb1ed0b; }
.variant-celestial:hover:not(:disabled) { border-color: #f0daff; background: #cdb1ed1b; }
.variant-icon { font-size: 15px; }
.variant-copy { flex: 1; min-width: 0; }
.variant-copy strong { display: block; font-size: 10px; font-weight: 600; }
.variant-copy small { display: block; font-size: 7px; color: #8ea6ac; margin-top: 3px; line-height: 1.5; }
.variant-price { font-size: 10px; font-weight: 600; white-space: nowrap; }
.repeat-purchase-note { font-size: 6px; letter-spacing: .6px; color: #8ca6a5; text-align: center; margin-top: 10px; line-height: 1.7; }
.rare-materials { margin-top: 9px; border-top: 1px solid #b993df25; padding-top: 9px; }
.rare-materials summary { color: #ccb0e8; font-size: 10px; cursor: pointer; line-height: 1.6; }
.rare-materials summary small { display: block; font-size: 7px; color: #9b8eae; margin-top: 2px; }
.rare-materials[open] .variant-options { margin-top: 9px; }
.rare-materials summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
.owned-gem { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #a6b1a62e; border-radius: 12px; font-size: 30px; margin-bottom: 15px; }
.owned-gem small { position: absolute; right: -7px; bottom: -5px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 6px; border: 1px solid var(--die-ink, var(--gold)); background: #1a2932; color: var(--die-ink, var(--gold)); font-size: 12px; }
.owned-material { border: 1px solid #ffffff15; border-radius: 4px; padding: 5px 7px; font-size: 9px; margin-top: auto; }
.owned-cost { font-size: 9px; line-height: 1.6; color: #98acae; margin: 12px 0; }
.owned-restriction { color: #9da7b7; font-size: 9px; line-height: 1.6; margin-top: 7px; }
.sell-button { color: var(--gold); border-color: #d0b37555; }
.sell-modal { z-index: 1; }
.spoils-modal { max-width: 510px; overflow: hidden; background: radial-gradient(ellipse at 50% 10%, #53604755, transparent 60%), linear-gradient(155deg, #233b3b, #121d2a); }
.treasure-scene { position: relative; width: 220px; height: 155px; margin: -8px auto 12px; }
.treasure-halo { position: absolute; inset: -30px; background: radial-gradient(ellipse, #ffe7a433, transparent 65%); animation: treasure-glow 1s ease-out both; }
.treasure-chest { position: absolute; left: 20px; top: 16px; width: 180px; height: 140px; animation: chest-arrive .6s cubic-bezier(.2,.8,.3,1.2) both; }
.chest-lid { transform-origin: 30px 74px; animation: chest-open .6s .2s ease-out both; }
.treasure-spark { position: absolute; left: calc(20px + var(--i) * 34px); top: 76px; color: #f5d68c; font-size: 19px; animation: treasure-burst 1s calc(.15s + var(--i) * .06s) ease-out both; }
.spoils-rewards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.spoils-item { border: 1px solid #dec18040; background: #e2c18008; border-radius: 10px; padding: 17px 10px; animation: reward-arrive .45s .3s ease-out both; }
.spoils-item > span { display: block; font-size: 23px; color: var(--gold); }
.spoils-item strong { display: block; font: 700 32px "Cinzel", Georgia, serif; color: #f0d89f; margin: 5px 0; }
.spoils-item small { display: block; font-size: 8px; letter-spacing: 1px; color: #beae8b; }
.spoils-item p { font-size: 9px; color: #9bc0ac; margin: 8px 0 0; }
.health-spoils { border-color: #94ceab40; background: #94ceab08; animation-delay: .45s; }
.health-spoils > span, .health-spoils strong { color: #b9e4c4; }
.health-spoils small { color: #9abdac; }
.spoils-modal .primary-button { margin: 20px auto 0; }
.tutorial-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; font-size: 10px; color: #9fb6b6; }
.save-status { flex-basis: 100%; color: #97bea6; font-size: 8px; letter-spacing: .6px; }
.tutorial-invite button { padding: 6px 10px; color: var(--gold); }
.tutorial-modal { max-width: 680px; max-height: calc(100dvh - 48px); overflow-y: auto; padding: 26px 20px; scrollbar-color: #637a79 #16262e; }
.tutorial-modal > .eyebrow { padding-right: 60px; font-size: 8px; }
.tutorial-modal h2 { font-size: clamp(19px, 4vw, 27px); margin: 12px 0; }
.tutorial-progress { display: flex; gap: 5px; margin: 17px 0; }
.tutorial-progress span { flex: 1; height: 4px; border-radius: 3px; background: #819da033; }
.tutorial-progress .complete { background: #83c8a2; }
.tutorial-progress .current { background: var(--gold); box-shadow: 0 0 8px #e2c18044; }
.tutorial-instruction { min-height: 60px; color: #b1c7c8; font-size: 12px; line-height: 1.8; }
.practice-arena { display: grid; grid-template-columns: minmax(0, 1fr) 25px minmax(0, 1fr); position: relative; overflow: hidden; min-height: 190px; padding: 14px 8px 26px; border: 1px solid #91b8a340; border-radius: 10px; background: #162c32; }
.practice-scene, .practice-scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.practice-scene { opacity: .65; }
.practice-fighter, .practice-versus, #practice-intent { z-index: 1; }
.practice-fighter { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.practice-fighter > strong { color: #e9e2c8; font: 600 13px "Cinzel", Georgia, serif; }
.practice-fighter > span { color: #b2d5cf; font-size: 10px; margin-top: 6px; line-height: 1.6; }
.practice-versus { align-self: center; color: #c0d0c277; font-size: 10px; }
.practice-avatar { width: 120px; height: 116px; margin-top: 4px; }
.practice-avatar > svg { width: 100%; height: 100%; }
#practice-intent { position: absolute; bottom: 7px; left: 0; right: 0; margin: 0; font-size: 8px; color: #e7c9a6; letter-spacing: .7px; }
.practice-motion #practice-enemy-art { animation: hit .5s ease-out; }
.practice-dice { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; padding: 22px 0 51px; min-height: 143px; }
.practice-dice .die { width: 60px; height: 60px; padding: 10px; }
.tutorial-target { outline: 2px solid var(--gold); outline-offset: 5px; box-shadow: 0 0 23px #e2c18033; }
.tutorial-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; position: sticky; bottom: -26px; padding: 15px 0 8px; margin-top: 10px; border-top: 1px solid #99afb225; background: #14232df5; backdrop-filter: blur(8px); }
.tutorial-actions > span { font-size: 9px; line-height: 1.7; color: #91aaa9; text-align: left; }
.practice-shop { border: 1px solid #95b99d30; border-radius: 10px; padding: 18px; background: #0c1a2255; margin-top: 16px; }
.practice-shop .shop-card { width: 100%; min-height: 0; margin: 16px auto 0; }
#practice-purse { color: var(--gold); font-size: 13px; }
@keyframes chest-arrive { from { opacity: 0; transform: translateY(24px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes chest-open { from { transform: rotate(0); } to { transform: translateY(-14px) rotate(-14deg); } }
@keyframes treasure-glow { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1.1); } }
@keyframes treasure-burst { 0% { opacity: 0; transform: translateY(35px) scale(.3); } 40% { opacity: 1; } 100% { opacity: .7; transform: translateY(calc(-25px - var(--i) * 5px)) rotate(15deg); } }
@keyframes reward-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.shop-utilities { display: flex; gap: 10px; margin: 18px 0 0; }
.shop-footer { display: flex; justify-content: space-between; gap: 14px; align-items: center; position: sticky; bottom: -35px; padding: 18px 0 8px; margin-top: 10px; background: #14232df5; border-top: 1px solid #9ab1ac20; backdrop-filter: blur(8px); }
.shop-footer p { margin: 0; font-size: 9px; color: #8da5ae; line-height: 1.6; }
.reset-actions { display: flex; justify-content: center; gap: 12px; margin-top: 25px; }
.empty-stock { font-size: 12px; color: #98b1b8; grid-column: 1 / -1; }
@keyframes idle { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes slime-idle { 0%,100% { transform: scale(1.03,.97); } 50% { transform: scale(.96,1.04) translateY(-4px); } }
@keyframes dice-roll { 0% { transform: translateY(-6px) rotate(-10deg) rotateY(-18deg); } 50% { transform: translateY(-13px) rotate(12deg) rotateY(18deg); } 100% { transform: translateY(-6px) rotate(-10deg) rotateY(-18deg); } }
@keyframes hero-strike { 0%,100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(-15px) rotate(-8deg); } 65% { transform: translateX(50px) rotate(10deg); } }
@keyframes enemy-strike { 0%,100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(15px) rotate(8deg); } 65% { transform: translateX(-50px) rotate(-10deg); } }
@keyframes hit { 0%,40% { filter: brightness(2.5) drop-shadow(0 0 10px #ffbfa6); transform: translateX(8px); } 20%,60% { transform: translateX(-8px); } 100% { transform: translateX(0); } }
@keyframes defeated { 0% { opacity: 1; } 100% { transform: translateY(20px) scale(.8); opacity: 0; filter: brightness(2); } }
@keyframes float-up { 0% { opacity: 0; transform: translateY(15px) scale(.7); } 20% { opacity: 1; transform: translateY(-5px) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-80px); } }
@keyframes impact { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sparkle { from { opacity: .15; } to { opacity: .8; } }
@keyframes blink { 0%,43%,47%,100% { transform: scaleY(1); } 45% { transform: scaleY(.1); } }
@media (min-width: 1450px) { .app { padding-top: 12px; } .arena { height: 425px; } .combatants { padding-top: 73px; } .character-stage { height: 235px; } .character-art { height: 240px; width: 235px; } .character-art.slime { height: 197px; width: 225px; } .character-art.demon { height: 250px; } .character-art.boss { height: 252px; } }
@media (max-width: 1100px) {
  .app { padding: 0 28px; }
  .controls-layout { gap: 19px; grid-template-columns: minmax(220px,.7fr) minmax(0,1.5fr); }
  .dice-panel { padding-right: 18px; }
  .dice-tray { gap: 13px; }
  .die { width: 60px; height: 60px; padding: 10px; }
  .action-slot { grid-template-columns: 1fr auto; padding: 12px 10px 8px; }
  .action-symbol { display: none; }
  .action-copy small { font-size: 7px; }
  .route-line { width: 12px; }
  .expedition-header { flex-wrap: wrap; }
  .route { order: 3; width: 100%; margin: 0; }
}
@media (max-width: 800px) {
  .app { padding: 0 20px; }
  .topbar { height: 82px; }
  .brand { font-size: 19px; }
  .brand img { width: 36px; height: 36px; }
  .record { font-size: 7px; margin-right: 5px; letter-spacing: 1px; }
  .expedition-header { gap: 15px; padding-top: 23px; }
  .route-node { width: 19px; height: 19px; font-size: 8px; }
  .route-line { width: 9px; }
  .encounter-count { display: none; }
  .combatants { padding: 66px 30px 0; grid-template-columns: 1fr 40px 1fr; }
  .arena { height: 400px; }
  .fighter-heading h2 { font-size: 16px; }
  .portrait-icon { display: none; }
  .character-art { width: 198px; }
  .character-art.demon { width: 215px; }
  .character-art.boss { width: 215px; }
  .character-art.boss.demon { width: 245px; }
  .hero-caption { font-size: 9px; gap: 5px; }
  .battle-console { padding: 22px; margin-top: 18px; }
  .controls-layout { grid-template-columns: minmax(0, 1fr); margin-top: 21px; gap: 23px; }
  .dice-panel { border: 0; padding: 0; }
  .dice-tray { gap: 24px; }
  .die { width: 66px; height: 66px; }
  .dice-tools { flex-wrap: nowrap; align-items: center; }
  #dice-caption { width: auto; margin-right: 12px; }
  .action-slot { grid-template-columns: auto 1fr auto; padding: 14px 12px 9px; }
  .action-symbol { display: block; }
  .action-copy small { font-size: 9px; }
  .console-heading h2 { font-size: 20px; }
  .phase-instruction { max-width: 220px; }
  .collection-heading { max-width: 310px; margin: 0 auto 18px; width: 100%; }
  .dice-tray { max-width: 310px; margin: auto; gap: 45px 24px; }
  .dice-tray { row-gap: 56px; }
  .die-description { max-width: 410px; margin: 9px auto 0; min-height: 0; }
  .shop-stock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .app { padding: 0 12px; }
  .topbar { height: 72px; }
  .brand { font-size: 16px; gap: 8px; }
  .brand small { font-size: 6px; letter-spacing: 2.8px; }
  .brand img { width: 32px; height: 32px; }
  .top-actions { gap: 7px; }
  .icon-button { width: 31px; height: 31px; }
  .record { display: none; }
  .expedition-header { flex-wrap: wrap; padding: 21px 4px 18px; gap: 14px; }
  .expedition-header h1 { font-size: 21px; }
  .route { margin: 0; width: 100%; gap: 6px; }
  .route-node { width: 19px; height: 19px; }
  .route-line { width: 15px; }
  .eyebrow { font-size: 8px; }
  .arena { height: 380px; border-radius: 10px; }
  .arena-top { top: 15px; left: 15px; right: 15px; }
  .area-label { font-size: 7px; letter-spacing: 1.3px; }
  .battle-badge { font-size: 7px; padding: 6px 8px; }
  .combatants { padding: 56px 15px 0; grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr); }
  .fighter-heading { gap: 4px; flex-wrap: wrap; }
  .fighter-heading > div { width: 100%; min-height: 44px; }
  .fighter-heading h2 { font-size: 14px; }
  .fighter-role { font-size: 6px; letter-spacing: 1.1px; }
  .hp-number { margin: 4px 0 0; font-size: 11px; }
  .hp-number small { font-size: 8px; }
  .health-track { margin-top: 6px; height: 5px; }
  .character-stage { height: 153px; }
  .character-art { width: 146px; height: 161px; flex-shrink: 0; }
  .character-art.slime { width: 145px; height: 130px; }
  .character-art.demon { width: 169px; height: 180px; }
  .character-art.boss { width: 172px; height: 165px; }
  .character-art.boss.demon { width: 181px; height: 185px; }
  .hero-caption { font-size: 7px; gap: 3px; white-space: nowrap; }
  .mini-icon { font-size: 10px; }
  .caption-divider { margin: 0 2px; }
  .intent { font-size: 8px; gap: 4px; margin-top: 1px; }
  .intent strong { font-size: 10px; }
  .intent-icon { font-size: 12px; }
  .versus { font-size: 10px; }
  .versus span { height: 20px; }
  .arena-bottom { left: 15px; right: 15px; bottom: 12px; }
  #flavor-text { font-size: 9px; max-width: 220px; }
  .turn-counter { font-size: 7px; }
  .battle-console { margin-top: 13px; padding: 18px 14px 15px; }
  .console-heading { flex-direction: column; align-items: flex-start; gap: 8px; }
  .console-heading h2 { font-size: 20px; }
  .phase-instruction { font-size: 11px; text-align: left; max-width: none; }
  .controls-layout { margin-top: 20px; gap: 17px; }
  .die { width: 63px; height: 63px; }
  .dice-tray { gap: 27px; }
  #dice-caption { font-size: 7px; letter-spacing: .5px; margin-right: 3px; }
  .reroll-button { font-size: 10px; }
  .action-slots { gap: 7px; }
  .action-slot { grid-template-columns: minmax(0, 1fr); padding: 11px 8px 7px; }
  .action-symbol { display: none; }
  .action-copy strong { font-size: 12px; }
  .action-copy small { font-size: 8px; letter-spacing: -.2px; white-space: normal; }
  .action-value { font-size: 22px; }
  .slot-dice { font-size: 8px; letter-spacing: .2px; }
  .commit-row { gap: 12px; }
  #combat-preview { font-size: 10px; max-width: 160px; }
  .primary-button { padding: 10px 13px; font-size: 10px; gap: 12px; }
  .journal { flex-direction: column; gap: 8px; margin: 15px 4px; }
  #battle-log { font-size: 9px; }
  footer { font-size: 6px; letter-spacing: .8px; }
  .overlay { padding: 15px; }
  .modal { padding: 26px 20px; max-height: calc(100dvh - 30px); overflow-y: auto; }
  .modal .eyebrow { font-size: 7px; }
  .modal-emblem { padding-bottom: 15px; font-size: 35px; }
  .reward-cards { grid-template-columns: 1fr; gap: 9px; margin: 20px 0 15px; }
  .reward-card { min-height: 0; display: grid; grid-template-columns: 36px 1fr; text-align: left; gap: 0 14px; padding: 14px; }
  .reward-icon { grid-row: 1 / 4; font-size: 27px; margin: 0; }
  .reward-card h3 { font-size: 14px; margin: 0 0 5px; }
  .reward-card p { font-size: 10px; }
  .reward-card .reward-tag { padding-top: 7px; font-size: 6px; }
  .help-steps p { font-size: 11px; }
  .run-stats { gap: 24px; }
  .run-stat strong { font-size: 24px; }
  .run-stat span { font-size: 7px; }
  .ward-aura { height: 140px; width: 110px; }
  .brand { font-size: 14px; gap: 7px; }
  .brand img { width: 28px; height: 28px; }
  .brand-accent { margin-left: 3px; }
  .top-actions { gap: 5px; }
  .top-actions .icon-button { width: 28px; height: 30px; }
  .top-actions .reset-button { width: 29px; height: 30px; padding: 4px; font-size: 15px; }
  .top-actions .reset-button span { display: none; }
  .gold-counter { font-size: 11px; padding: 7px; }
  .gold-counter b { margin-left: 2px; }
  .run-note { font-size: 8px; max-width: 100%; }
  .route-node { width: 14px; height: 14px; font-size: 7px; }
  .route-line { width: 4px; }
  .dice-tray { gap: 44px 20px; max-width: 260px; }
  .dice-tray { row-gap: 56px; }
  .dice-tools { flex-wrap: wrap; }
  #dice-caption { width: 100%; font-size: 8px; }
  .collection-heading { max-width: 260px; }
  .ability-heading span { font-size: 6px; letter-spacing: .6px; }
  .ability-button { flex: 1; justify-content: center; }
  .shop-modal { padding: 23px 16px; }
  .shop-heading { gap: 13px; }
  .shop-heading h2 { font-size: 20px; }
  .shop-purse { font-size: 22px; }
  .shop-purse small { font-size: 6px; letter-spacing: .5px; }
  .shop-status { font-size: 10px; line-height: 1.8; }
  .shop-tabs { gap: 4px; }
  .shop-tabs button { padding: 8px 9px; font-size: 10px; }
  .shop-stock { gap: 8px; }
  .shop-card { padding: 13px 10px 10px; min-height: 209px; }
  .shop-card h3 { font-size: 13px; }
  .shop-card-kind { font-size: 6px; letter-spacing: .4px; }
  .shop-card p { font-size: 10px; }
  .shop-price { font-size: 8px; letter-spacing: .2px; }
  .variant-buy { gap: 4px; padding: 8px 6px; }
  .variant-icon { font-size: 12px; }
  .variant-copy strong { font-size: 10px; }
  .variant-copy small { font-size: 6px; }
  .variant-price { font-size: 9px; }
  .repeat-purchase-note { font-size: 5px; letter-spacing: .4px; }
  .shop-utilities { gap: 7px; }
  .shop-utilities .secondary-button { flex: 1; font-size: 9px; padding: 10px 6px; }
  .shop-footer { bottom: -26px; gap: 8px; padding: 14px 0 10px; }
  .shop-footer p { display: none; }
  .shop-footer .reset-button { font-size: 10px; padding: 10px 9px; }
  .reset-actions { gap: 9px; }
  .reset-actions .secondary-button { font-size: 10px; padding: 10px; }
}
.formation-bar { display: grid; grid-template-columns: 1fr; margin: 20px 0; }
.formation-bar > div { min-width: 0; }
.formation-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.formation-heading h2 { margin: 0; font-size: 8px; letter-spacing: 1.5px; color: #b9cbbf; }
.formation-heading > span { font-size: 9px; color: #8fa6ad; }
.enemy-roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.enemy-card:hover:not(:disabled) { border-color: var(--gold); }
.member-health { height: 3px; background: #080f1880; display: block; border-radius: 3px; overflow: hidden; margin-top: 5px; }
.member-health i { height: 100%; display: block; background: linear-gradient(90deg, #4c947e, #b2d1a0); transition: width .3s; }
.enemy-card { min-width: 0; border: 1px solid #b17d6a40; border-radius: 8px; padding: 8px 9px; background: linear-gradient(145deg, #50343425, #16232d); display: grid; text-align: center; align-content: center; gap: 4px; }
.enemy-card.targeted { border-color: #e2c180b0; box-shadow: inset 0 0 25px #e2c1800b; }
.enemy-card strong { font: 600 10px "Cinzel", Georgia, serif; color: #e2cbb7; overflow-wrap: anywhere; }
.enemy-card small { font-size: 8px; line-height: 1.5; color: #b6b1ad; }
.enemy-portrait { display: block; height: 52px; }
.enemy-portrait svg { width: 100%; height: 100%; }
.enemy-health-track i { background: linear-gradient(90deg, #ad6d6b, #e1ab83); }
.fallen-enemy { opacity: .4; filter: grayscale(1); }
.enemy-roster:has(.enemy-card:only-child) { grid-template-columns: 1fr; }
.enemy-roster:has(.enemy-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.enemy-card:only-child { grid-template-columns: 65px 1fr; text-align: left; align-items: center; }
.enemy-card:only-child .enemy-portrait { grid-row: 1 / span 4; height: 75px; }
.practice-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.practice-choices button { min-height: 95px; }
.stage-panel { margin-top: 22px; padding: 15px 18px; border: 1px solid #bfa77635; border-radius: 10px; background: linear-gradient(120deg, #3b463425, #18293580); }
.stage-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.stage-heading strong { color: var(--gold); font-size: 10px; letter-spacing: 1px; }
.stage-heading > span { color: #a2b7bd; font-size: 10px; }
.stage-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.stage-node { display: flex; align-items: center; gap: 9px; min-width: 0; opacity: .4; }
.stage-node > strong { flex-shrink: 0; width: 28px; height: 28px; border: 1px solid #9ab6b170; border-radius: 50%; display: grid; place-items: center; color: #d4e3dd; font-size: 11px; }
.stage-node > span { font: 600 9px "Cinzel", Georgia, serif; color: #cad6ca; }
.stage-node small { display: block; font: 500 6px "DM Sans", sans-serif; color: #9cabb0; margin-top: 5px; letter-spacing: .6px; }
.current-stage, .completed-stage { opacity: 1; }
.current-stage > strong { border-color: var(--gold); background: #aa8b3930; color: var(--gold); box-shadow: 0 0 15px #dfbf6220; }
.completed-stage > strong { border-color: #88c3a1; color: #b0dbb8; }
.stage-intro { font-size: 11px; line-height: 1.7; color: #b6cfc4; margin: 13px 0 0; }
.weapon-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 15px 0; padding: 12px; border: 1px solid #a5c5cd30; border-radius: 8px; background: #19314080; }
.weapon-controls > span { font-size: 8px; letter-spacing: 1px; color: #aac8cf; margin-right: 3px; }
.weapon-controls .secondary-button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: #927b3820; }
.weapon-controls small { color: #9fbdc2; font-size: 10px; line-height: 1.6; }
.target-warning { border-left: 2px solid #97d5ed; padding: 8px 10px; background: #38627a20; color: #b3dfef; font-size: 11px; line-height: 1.6; }
.shop-tabs .trading-tab { border-color: #aaceaa70; color: #b6ddb6; }
.character-art.flying > svg { animation: flight-hover 2s ease-in-out infinite; }
@keyframes flight-hover { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(-17px); } }
@media (max-width: 540px) {
  .topbar { height: auto; min-height: 72px; flex-wrap: wrap; gap: 10px; padding: 14px 0; }
  .top-actions { margin-left: auto; flex-wrap: wrap; }
  .formation-bar { grid-template-columns: 1fr; gap: 16px; margin: 17px 2px; }
  .formation-heading > span { font-size: 8px; }
  .enemy-card strong { font-size: 9px; }
  .enemy-card small { font-size: 7px; }
  .enemy-portrait { height: 47px; }
  .stage-panel { padding: 12px; margin-top: 15px; }
  .stage-path { gap: 5px; }
  .stage-node { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .stage-node > span { font-size: 7px; overflow-wrap: anywhere; }
  .stage-node small { display: none; }
  .stage-intro { font-size: 10px; }
  .stage-heading strong { font-size: 8px; }
  .stage-heading > span { font-size: 8px; }
  .weapon-controls { padding: 10px; gap: 8px; }
  .weapon-controls small { flex-basis: 100%; }
  .run-stats { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}