@charset "UTF-8";
:root {
  color-scheme:dark;
  --bg:#0c0e18;
  --panel:#161927;
  --panel2:#1b2031;
  --ink:#eee9df;
  --muted:#9b9aab;
  --gold:#d9b77a;
  --gold2:#f0d9ac;
  --line:#ffffff17;
  --purple:#ab91e8;
  --blue:#7cace9;
  --green:#88c7b2;
  --red:#e38683;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  min-height:100vh
}
button,input,select {
  font:inherit
}
button {
  cursor:pointer;
  color:inherit
}
button:disabled {
  cursor:default;
  opacity:.4
}
button:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--gold2);
  outline-offset:4px
}
button {
  touch-action:manipulation
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  line-height:1.3
}
button {
  border:0;
  background:none
}
input,select {
  min-width:0
}
::selection {
  background:#92734788
}
small {
  font-size:13px
}
a {
  color:var(--gold)
}
.ambient {
  position:fixed;
  inset:0;
  background:radial-gradient(ellipse at 50% 20%,#3b2d6238,transparent 65%),linear-gradient(#0c0e18dc,#0c0e18f7),url('../assets/tower.png') center/cover;
  z-index:-2;
  pointer-events:none
}
.is-menu .ambient {
  background:linear-gradient(90deg,#0b101bca,#0e1019a0 50%,#11101c5a),url('../assets/tower.png') center/cover
}
.ambient:after {
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(1px 1px at 12% 29%,#dfc38c99 99%,transparent),radial-gradient(2px 2px at 80% 60%,#dfc38c66 99%,transparent),radial-gradient(1px 1px at 65% 21%,#dfc38c99 99%,transparent),radial-gradient(2px 2px at 29% 75%,#dfc38c55 99%,transparent);
  background-size:700px 550px;
  animation:drift 30s linear infinite
}
.topbar {
  height:76px;
  padding:0 4%;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#0d101cc0
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  letter-spacing:.13em;
  font-family:var(--serif);
  font-size:17px;
  white-space:nowrap
}
.brand b {
  font-weight:400;
  color:var(--gold)
}
.brand-mark {
  font-size:35px;
  color:var(--gold);
  line-height:1
}
.topbar nav {
  display:flex;
  gap:9px;
  align-items:center
}
.btn {
  min-height:42px;
  padding:9px 17px;
  border-radius:5px;
  border:1px solid var(--line);
  font-size:14px;
  font-weight:600;
  transition:background .18s,border-color .18s,transform .18s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px
}
.btn:not(:disabled):hover {
  background:#ffffff0d;
  border-color:#d9b77a88
}
.btn.primary {
  color:#20180f;
  background:linear-gradient(120deg,#e9ce9b,#bfa06c);
  border-color:#eacb96;
  box-shadow:0 5px 22px #06040744
}
.btn.primary:hover:not(:disabled) {
  background:linear-gradient(120deg,#f6dfb6,#d4b580);
  transform:translateY(-1px)
}
.btn.secondary {
  background:#302838bb;
  border-color:#91755c80;
  color:var(--gold2)
}
.btn.ghost {
  border-color:transparent;
  color:#c2bdcc
}
.btn.text-btn {
  padding:0;
  min-height:28px;
  font-size:13px;
  color:var(--gold);
  border:0
}
.btn.danger {
  color:#eea7a1;
  border-color:#a65d5d66
}
.btn.icon-btn {
  font-size:13px;
  color:#bbb7c5
}
.eyebrow {
  font-size:12px;
  letter-spacing:.2em;
  color:var(--gold);
  display:block;
  font-weight:600
}
.small-label {
  font-size:12px;
  letter-spacing:.07em;
  color:var(--muted)
}
.muted {
  color:var(--muted)
}
.gold-text {
  color:var(--gold)
}
.hp-text {
  color:#e1a5a5
}
.menu-screen {
  max-width:1280px;
  margin:auto;
  padding:32px 40px 24px
}
.menu-title {
  text-align:center;
  margin-bottom:31px
}
.menu-title .eyebrow {
  font-size:11px;
  letter-spacing:.3em;
  margin-bottom:8px
}
.menu-title h1 {
  font:46px/1.2 var(--serif);
  font-weight:400;
  letter-spacing:.12em;
  color:#f2e7d4
}
.menu-title h1 span {
  color:var(--gold)
}
.menu-title p {
  font-size:14px;
  color:#c4bbcf;
  margin-top:10px
}
.selection-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  color:#a2a0af;
  font-size:13px
}
.selection-heading b {
  font-weight:500;
  color:#e2dce6;
  margin-left:10px;
  font-size:14px
}
.hero-selection {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) 1.18fr;
  gap:17px;
  align-items:stretch
}
.hero-card {
  position:relative;
  height:347px;
  border:1px solid #aaa0c34d;
  border-radius:9px;
  overflow:hidden;
  background-image:url('../assets/heroes.png');
  background-size:300% auto;
  background-repeat:no-repeat;
  text-align:left;
  box-shadow:0 16px 40px #0005;
  transition:transform .25s,border-color .25s;
  isolation:isolate
}
.portrait-0 {
  background-position:0 10%
}
.portrait-1 {
  background-position:50% 10%
}
.portrait-2 {
  background-position:100% 10%
}
.hero-card:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 20%,#09101b22 42%,#080c18e8 75%,#080c18 100%);
  z-index:-1
}
.hero-card.chosen {
  border-color:var(--gold);
  box-shadow:0 0 0 2px #dab67e22,0 15px 40px #0008
}
.hero-card:hover {
  transform:translateY(-5px);
  border-color:#d2b992
}
.hero-selection-mark {
  position:absolute;
  top:13px;
  right:13px;
  width:24px;
  height:24px;
  border:1px solid #d8bb86aa;
  border-radius:50%;
  color:#211c14;
  background:#dfc28a;
  display:grid;
  place-items:center;
  font-size:14px
}
.hero-card:not(.chosen) .hero-selection-mark {
  background:#10132166;
  border-color:#ffffff40
}
.hero-copy {
  position:absolute;
  bottom:20px;
  left:20px;
  right:12px;
  display:flex;
  flex-direction:column;
  gap:3px
}
.hero-role {
  font-size:12px;
  letter-spacing:.07em;
  color:var(--gold);
  margin-bottom:3px
}
.hero-copy strong {
  font-size:30px;
  letter-spacing:.04em
}
.hero-copy>span:not(.hero-role) {
  font-size:14px;
  color:#c4becc
}
.hero-copy small {
  color:#e7b4b2;
  margin-top:13px;
  font-size:14px
}
.hero-copy i {
  font-style:normal;
  font-size:12px;
  color:#a4a0b3;
  margin-left:8px
}
.hero-detail {
  padding:12px 0 0 12px
}
.hero-detail .eyebrow {
  letter-spacing:.04em;
  font-size:13px
}
.hero-detail h2 {
  font-size:30px;
  margin:7px 0
}
.hero-story {
  color:#b6afc2;
  font-size:14px;
  margin:6px 0 15px;
  line-height:1.7
}
.passive-box {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:12px 0
}
.passive-box p {
  font-size:14px;
  color:#e2d5c3;
  margin-top:5px;
  line-height:1.7
}
.starter-label {
  display:flex;
  justify-content:space-between;
  margin-top:12px
}
.starter-list {
  font-size:13px;
  margin-top:4px
}
.starter-list>div {
  display:flex;
  align-items:center;
  gap:8px;
  margin:3px 0;
  color:#c9c5d0
}
.starter-list small {
  margin-left:auto;
  color:#8f8c9e
}
.tiny-cost {
  display:grid;
  place-items:center;
  width:19px;
  height:20px;
  border:1px solid #668dba44;
  border-radius:4px;
  background:#19345788;
  color:#aaccee;
  font-size:12px
}
.launch-panel {
  display:flex;
  gap:28px;
  align-items:center;
  margin-top:28px;
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.launch-panel label {
  display:block;
  font-size:13px;
  color:#ddd6e2;
  margin-bottom:6px
}
.launch-panel label span {
  font-size:12px;
  color:#8f8b9e;
  margin-left:5px
}
.seed-field {
  width:240px
}
.launch-panel input,.launch-panel select {
  width:100%;
  height:43px;
  border:1px solid #ffffff22;
  background:#111723dd;
  border-radius:5px;
  color:#e7dfd4;
  padding:0 12px;
  font-size:14px
}
.launch-panel input::placeholder {
  color:#76788b
}
.difficulty-field {
  width:165px;
  position:relative
}
.difficulty-field small {
  position:absolute;
  top:75px;
  font-size:11px;
  white-space:nowrap;
  color:#91879d
}
.launch-actions {
  margin-left:auto;
  display:flex;
  gap:12px;
  align-items:center
}
.start-btn {
  width:210px;
  height:62px;
  font-size:17px
}
.start-btn span {
  font-size:23px;
  margin-left:auto
}
.resume-btn {
  height:62px;
  flex-direction:column;
  gap:2px
}
.resume-btn span {
  font-size:11px;
  font-weight:400
}
.menu-footer {
  display:flex;
  gap:27px;
  align-items:center;
  margin-top:25px;
  font-size:12px;
  color:#8c889d
}
.menu-footer b {
  color:var(--gold);
  margin:0 5px
}
.menu-footer button {
  margin-left:auto;
  font-size:12px;
  color:#b8a894
}
.xp-track {
  display:inline-block;
  width:64px;
  height:3px;
  background:#fff2;
  vertical-align:middle
}
.xp-track i {
  height:100%;
  display:block;
  background:var(--gold)
}
.save-warning {
  color:#efb58d;
  text-align:center;
  font-size:14px;
  margin-top:10px
}
.runbar {
  display:flex;
  gap:27px;
  align-items:center;
  max-width:1360px;
  padding:13px 36px;
  margin:auto;
  min-height:74px
}
.run-identity {
  display:flex;
  gap:10px;
  align-items:center
}
.mini-portrait {
  width:39px;
  height:39px;
  background-image:url('../assets/heroes.png');
  background-size:300%;
  border-radius:50%;
  border:1px solid #d4b78566
}
.run-identity b {
  font-size:15px
}
.run-identity small {
  display:block;
  font-size:11px;
  color:var(--muted)
}
.run-stat {
  font-size:17px;
  font-weight:600;
  white-space:nowrap
}
.run-stat span {
  color:var(--muted);
  font-size:12px;
  font-weight:400
}
.run-location {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:13px;
  font-size:14px
}
.run-location>span {
  font-size:11px;
  letter-spacing:.12em;
  color:var(--gold)
}
.relic-bar {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:0 36px 9px;
  max-width:1360px;
  margin:auto;
  border-bottom:1px solid var(--line);
  font-size:12px;
  flex-wrap:wrap
}
.relic-bar button {
  font-size:23px;
  color:var(--gold);
  line-height:1;
  width:27px;
  min-height:27px
}
.relic-bar button:hover {
  transform:translateY(-2px);
  color:#fff0c9
}
.ascension-tag {
  margin-left:auto;
  font-size:12px;
  color:#baadd3
}
.map-screen {
  max-width:1220px;
  padding:28px 36px 34px;
  margin:auto
}
.section-heading {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center
}
.section-heading h1 {
  font-size:27px;
  margin-top:7px
}
.section-heading h1>span {
  font:23px var(--serif);
  color:var(--gold);
  margin-right:12px
}
.section-heading p {
  font-size:14px;
  color:#aca5b9;
  margin-top:6px
}
.floor-count {
  font-size:27px;
  color:var(--gold)
}
.floor-count span {
  font-size:13px;
  color:var(--muted)
}
.map-layout {
  display:grid;
  grid-template-columns:1fr 280px;
  gap:42px;
  margin-top:20px
}
.map-paper {
  position:relative;
  border:1px solid #b4a2d21c;
  border-radius:9px;
  background:radial-gradient(ellipse at 50% 50%,#43365422,transparent 75%),#10121eb0
}
.map-hint {
  text-align:center;
  color:#a89bbf;
  font-size:13px;
  padding:12px 10px 0
}
.route-map {
  width:100%;
  aspect-ratio:660/680;
  position:relative;
  max-height:650px
}
.route-map svg {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  overflow:visible
}
.route-map path {
  fill:none;
  stroke:#80728e39;
  stroke-width:1.7;
  stroke-dasharray:4 6
}
.route-map path.travelled {
  stroke:#ceb284a0;
  stroke-dasharray:none;
  stroke-width:2.2
}
.route-map path.available-line {
  stroke:#e6c88b;
  stroke-dasharray:4 4
}
.map-node {
  position:absolute;
  transform:translate(-50%,-50%);
  width:42px;
  height:42px;
  border:1px solid #7c708660;
  border-radius:50%;
  background:#181b29;
  opacity:.62!important;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:box-shadow .2s,border .2s;
  color:#b8afc4
}
.map-node>span {
  font-size:20px
}
.map-node small {
  position:absolute;
  top:calc(100% + 2px);
  font-size:11px;
  white-space:nowrap;
  font-weight:400;
  color:#92889f
}
.map-node.reachable {
  color:#efd8ad;
  background:#312b30;
  border-color:#d8b681;
  opacity:1!important;
  box-shadow:0 0 0 5px #d8b6810b,0 0 22px #d8b68122;
  animation:node-glow 3s ease-in-out infinite
}
.map-node.reachable small {
  color:#e2c69c
}
.map-node.reachable:hover {
  border-color:#fff0cb;
  box-shadow:0 0 0 6px #d8b68122,0 0 30px #d8b68144
}
.map-node.visited {
  color:#c6bcab;
  background:#2b2930;
  border-color:#a5907066;
  opacity:.9!important
}
.node-boss {
  width:57px;
  height:57px;
  border-radius:13px;
  box-shadow:0 0 30px #b499e41a;
  color:#d5b888;
  border-color:#bda47580
}
.node-boss>span {
  font-size:29px
}
.node-elite {
  color:#ce8d8d;
  border-color:#bc747644
}
.node-rest {
  color:#dab184
}
.node-treasure {
  color:#bc9be0
}
.node-shop {
  color:#d6c4a5
}
.map-start-label {
  position:absolute;
  bottom:1.5%;
  left:0;
  right:0;
  text-align:center;
  font-size:10px;
  letter-spacing:.3em;
  color:#776a80
}
.boss-preview {
  border:1px solid #ac97c136;
  border-radius:7px;
  overflow:hidden;
  background:#171827
}
.boss-preview-art {
  height:128px;
  opacity:.85
}
.boss-preview>div:last-child {
  padding:18px
}
.boss-preview .eyebrow {
  font-size:11px;
  letter-spacing:.08em
}
.boss-preview h2 {
  font-size:21px;
  margin:7px 0
}
.boss-preview p {
  font-size:13px;
  color:#a59bb4;
  line-height:1.8
}
.boss-hp {
  font-size:13px;
  display:inline-block;
  color:#d4a3a7;
  margin-top:12px
}
.map-legend {
  margin-top:24px
}
.map-legend>div {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
  font-size:13px;
  color:#c6becf
}
.map-legend b {
  font-size:20px;
  width:24px;
  color:var(--gold);
  text-align:center
}
.map-legend small {
  margin-left:auto;
  font-size:11px;
  color:#8d849b
}
.map-note {
  border-top:1px solid var(--line);
  margin-top:23px;
  padding-top:16px
}
.map-note b {
  font-size:13px;
  font-weight:500;
  color:#c7bcce
}
.map-note p {
  font-size:13px;
  color:#8f859c;
  line-height:1.85;
  margin-top:7px
}
.seed-note {
  font-size:11px;
  letter-spacing:.09em;
  color:#7f758f;
  margin-top:22px;
  overflow-wrap:anywhere
}
.seed-note span {
  margin-left:8px;
  color:#9e93aa
}
.spell-art {
  background-image:url('../assets/spells.png');
  background-size:500% auto;
  background-repeat:no-repeat;
  background-position-y:42%;
  background-color:#121624
}
.art-burn {
  background-position-x:0
}
.art-summon {
  background-position-x:25%
}
.art-control {
  background-position-x:50%
}
.art-combo {
  background-position-x:75%
}
.art-sacrifice {
  background-position-x:100%
}
.art-neutral {
  background-position-x:75%;
  filter:saturate(.45)
}
.card {
  --rarity:#817f93;
  position:relative;
  width:180px;
  min-width:0;
  height:306px;
  border:1px solid var(--rarity);
  border-radius:9px;
  background:linear-gradient(145deg,#292b3b,#181b29);
  box-shadow:0 10px 24px #0006,inset 0 0 0 3px #0b0d1866;
  text-align:left;
  padding:6px;
  display:flex;
  flex-direction:column;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  isolation:isolate;
  vertical-align:top;
  color:#e5e0d8
}
.rarity-rare {
  --rarity:#4a86bf
}
.rarity-epic {
  --rarity:#9972c7
}
.rarity-legendary {
  --rarity:#cfaa62
}
.card:hover:not(:disabled) {
  transform:translateY(-8px) scale(1.035);
  box-shadow:0 16px 38px #0009,0 0 15px color-mix(in srgb,var(--rarity) 30%,transparent);
  z-index:9
}
.card-head {
  position:absolute;
  top:8px;
  left:8px;
  right:10px;
  display:flex;
  justify-content:space-between;
  align-items:start;
  z-index:1;
  pointer-events:none
}
.cost {
  width:30px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid #b6d8f6aa;
  background:linear-gradient(#4f86af,#194368);
  border-radius:8px 8px 12px 12px;
  color:#fff;
  font:23px/1 var(--serif);
  box-shadow:0 2px 8px #0006;
  text-shadow:0 1px 3px #0008
}
.rarity-mark {
  font-size:10px;
  letter-spacing:.04em;
  padding:2px 5px;
  border-radius:3px;
  background:#0b1020b8;
  color:#e1cde1;
  margin-top:2px
}
.card-art {
  height:95px;
  flex-shrink:0;
  border-radius:5px 5px 0 0;
  border-bottom:1px solid var(--rarity);
  box-shadow:inset 0 -10px 20px #0c102e44
}
.card-body {
  padding:8px 6px 0;
  flex:1
}
.card-name {
  display:block;
  font-size:15px;
  line-height:1.3;
  color:#f1e7dc;
  font-weight:650;
  word-break:keep-all
}
.upgraded .card-name {
  color:#b6dbba
}
.card-type {
  font-size:11px;
  color:var(--rarity);
  margin-top:3px;
  padding-bottom:5px;
  border-bottom:1px solid #ffffff0b
}
.card-type span {
  color:#9c95ab
}
.card-description {
  font-size:14px;
  line-height:1.55;
  color:#cfc9d4;
  padding-top:7px;
  overflow-wrap:anywhere
}
.keyword {
  color:#e3cca9;
  text-decoration:underline dotted #d3bd9433;
  text-underline-offset:3px
}
.card-foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:21px;
  padding:2px 7px;
  font-size:14px
}
.attack-stat {
  color:#ebc78a
}
.health-stat {
  color:#f0a4a5
}
.card-sigil {
  width:100%;
  text-align:center;
  font-size:10px;
  color:#a795b4;
  letter-spacing:.07em
}
.card.selected {
  outline:2px solid #dcbaf2;
  transform:translateY(-12px);
  box-shadow:0 0 30px #9a68cc66;
  z-index:7
}
.valid-target {
  outline:2px solid #f1d294!important;
  box-shadow:0 0 22px #d8b16c55!important;
  cursor:crosshair!important
}
.card.unaffordable {
  filter:saturate(.5);
  opacity:.66
}
.card.valid-target {
  opacity:1;
  filter:none
}
.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(172px,1fr));
  gap:22px 17px;
  padding:10px 0
}
.card-grid .card {
  width:100%;
  height:327px
}
.battle-screen {
  max-width:1260px;
  margin:auto;
  padding:16px 32px 22px
}
.battle-heading {
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:12px;
  color:#8e829f;
  font-size:12px
}
.battle-heading .eyebrow {
  font-size:10px
}
.turn-counter {
  margin-left:auto;
  font-size:11px;
  letter-spacing:.1em
}
.turn-counter b {
  font:21px var(--serif);
  color:#dcc8a6;
  margin-left:6px
}
.enemy-overview {
  display:flex;
  align-items:stretch;
  gap:20px;
  max-width:1050px;
  margin:0 auto 15px
}
.enemy-hero {
  position:relative;
  display:flex;
  gap:15px;
  padding:10px 17px 10px 10px;
  border:1px solid #98829b38;
  background:linear-gradient(110deg,#241c2bc7,#191b2bc0);
  border-radius:8px;
  width:53%;
  align-items:center;
  text-align:left
}
.enemy-portrait {
  width:77px;
  height:82px;
  flex-shrink:0;
  border-radius:8px;
  border:1px solid #caaaad55
}
.enemy-hero>div:nth-child(2) {
  flex:1;
  min-width:0
}
.enemy-hero h1 {
  font-size:22px;
  margin:3px 0 8px
}
.enemy-hero .small-label {
  font-size:10px
}
.hp-track {
  height:19px;
  border:1px solid #9a656866;
  border-radius:4px;
  overflow:hidden;
  background:#261c25;
  position:relative;
  min-width:100px
}
.hp-track>span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#753b4c,#b7646d);
  transition:width .25s
}
.hp-track b {
  position:absolute;
  left:0;
  right:0;
  top:0;
  text-align:center;
  font-size:12px;
  line-height:17px;
  color:#ffede5;
  text-shadow:0 1px 3px #0009;
  letter-spacing:.03em
}
.block-badge {
  align-self:flex-end;
  white-space:nowrap;
  font-size:17px;
  color:#afc9e7;
  background:#273951;
  border:1px solid #7898c577;
  border-radius:7px;
  padding:7px 8px
}
.intent {
  flex:1;
  background:#1c1a2bcc;
  border:1px solid #a18aba26;
  border-left:2px solid #bb99c18c;
  border-radius:5px;
  padding:12px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.intent .small-label {
  font-size:10px;
  color:#b89ec7
}
.intent strong {
  font-size:16px;
  margin-top:3px
}
.intent p {
  font-size:14px;
  color:#dda8a5;
  line-height:1.6;
  margin-top:3px
}
.intent small {
  font-size:11px;
  color:#8b7f9a;
  margin-top:5px
}
.intent .freeze-note {
  color:#8ed5e5
}
.battlefield {
  border:1px solid #ae92bd22;
  border-radius:12px;
  background:radial-gradient(ellipse at 50% 40%,#46345728,transparent 80%),linear-gradient(135deg,#151a26,#1c172a99);
  padding:13px 30px;
  box-shadow:inset 0 0 80px #0c0d1899
}
.board-row {
  display:flex;
  gap:16px;
  align-items:center;
  position:relative
}
.lane-label {
  width:47px;
  flex-shrink:0;
  font-size:9px;
  letter-spacing:.1em;
  color:#7f778f;
  text-align:center;
  line-height:1.8
}
.lane-label b {
  font-size:11px;
  letter-spacing:0;
  font-weight:400;
  color:#aaa0b9
}
.unit-slots {
  display:flex;
  justify-content:center;
  gap:18px;
  flex:1
}
.empty-slot {
  width:129px;
  height:116px;
  border:1px dashed #aca2c320;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#080b1219
}
.empty-slot span {
  color:#8f82942c;
  font-size:24px
}
.board-divider {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:17px;
  margin:9px 0;
  font-size:11px;
  letter-spacing:.08em;
  color:#89758f
}
.board-divider:before,.board-divider:after {
  content:'';
  height:1px;
  background:linear-gradient(90deg,transparent,#a397af29);
  flex:1
}
.board-divider:after {
  transform:scaleX(-1)
}
.board-divider>span:first-child,.board-divider>span:last-child {
  color:#b6a27a75;
  font-size:13px
}
.unit {
  width:129px;
  height:116px;
  border:1px solid #8a83aa70;
  border-radius:12px;
  position:relative;
  background:#191b28;
  padding:4px;
  isolation:isolate;
  transition:transform .16s;
  flex-shrink:1;
  min-width:0;
  box-shadow:0 3px 12px #0005
}
.unit:hover {
  transform:translateY(-3px);
  z-index:3
}
.unit-art {
  position:absolute;
  inset:4px;
  border-radius:8px;
  z-index:-2;
  opacity:.73
}
.unit:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(transparent,#0f10247a 30%,#0b0c17dd 78%);
  z-index:-1;
  border-radius:12px
}
.unit-name {
  display:block;
  font-size:12px;
  text-align:center;
  margin-top:30px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 5px #000
}
.unit-stats {
  display:flex;
  justify-content:space-between;
  padding:1px 7px;
  font-size:15px
}
.unit-keywords {
  position:absolute;
  top:3px;
  left:4px;
  right:4px;
  display:flex;
  gap:3px;
  justify-content:center;
  font-size:12px;
  color:#d9c298;
  flex-wrap:wrap
}
.unit-keywords i {
  font-style:normal;
  text-shadow:0 1px 4px #000;
  background:#17142d88;
  padding:0 2px;
  border-radius:3px
}
.unit-readiness {
  font-size:10px;
  display:block;
  color:#9686a8;
  text-align:center;
  line-height:1.3
}
.unit.ready {
  border-color:#75bbae;
  box-shadow:0 0 0 2px #67ae9a15,0 0 15px #6ed1ac0d
}
.unit.ready .unit-readiness {
  color:#9fdac1
}
.unit.hostile {
  border-color:#a46f8270
}
.taunt-unit {
  border-radius:11px 11px 25px 25px;
  border-width:2px
}
.shield-unit {
  box-shadow:0 0 0 3px #76bade35,inset 0 0 15px #89c6ff55
}
.unit.selected {
  outline:2px solid #f3d9a3;
  transform:translateY(-3px)
}
.player-console {
  display:flex;
  align-items:center;
  gap:17px;
  padding:14px 8px
}
.player-avatar {
  width:57px;
  height:62px;
  flex-shrink:0;
  background-image:url('../assets/heroes.png');
  background-size:300%;
  border:1px solid #d1ad7588;
  border-radius:11px;
  box-shadow:0 0 25px #b4946320
}
.player-vitals {
  width:210px;
  min-width:100px
}
.player-vitals>b {
  font-size:13px;
  display:flex;
  justify-content:space-between;
  margin-bottom:5px
}
.player-vitals>b span {
  font-size:12px;
  font-weight:400;
  color:#a6bde0
}
.status-list {
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-top:4px
}
.status {
  font-size:10px;
  color:#d9c6b2;
  padding:1px 4px;
  border:1px solid #bba1c028;
  border-radius:3px;
  background:#25233255;
  white-space:nowrap
}
.status-burn {
  color:#eeaa8d
}
.status-weak,.status-vulnerable {
  color:#d49aa9
}
.status-freeze {
  color:#9bbfea
}
.status-shield {
  color:#95c9e5
}
.mana-display {
  display:flex;
  gap:10px;
  align-items:center;
  margin-left:8px
}
.mana-orb {
  height:51px;
  width:48px;
  border:1px solid #83b0ea88;
  background:radial-gradient(circle at 30% 20%,#43769f,#152d49 70%);
  border-radius:14px;
  display:grid;
  place-items:center;
  font:30px var(--serif);
  color:#ddecff;
  box-shadow:0 0 25px #338bc31c,inset 0 0 12px #6791ba30
}
.mana-display>div {
  display:flex;
  flex-direction:column;
  gap:1px;
  font-size:12px;
  color:#c9c3d8
}
.mana-display>div span {
  color:#8a80a0;
  font-size:12px
}
.pile-buttons {
  margin-left:auto;
  display:flex;
  gap:6px
}
.btn.pile-btn {
  flex-direction:column;
  gap:0;
  padding:5px 10px;
  background:#171a29bb;
  color:#cec3e0;
  min-width:65px;
  font-size:16px;
  line-height:1.4
}
.pile-btn small {
  font-size:10px;
  color:#8e839f;
  white-space:nowrap
}
.end-turn {
  min-width:151px;
  height:53px
}
.end-turn span {
  font-size:21px
}
.hand-heading {
  border-top:1px solid var(--line);
  padding-top:9px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:11px;
  color:#9a8ea9
}
.hand-heading b {
  font-size:11px;
  font-weight:400;
  color:#cab6d1;
  margin-left:4px
}
.target-message {
  color:#b5a6c4;
  font-size:12px
}
.hand-heading .text-btn {
  font-size:11px
}
.hand {
  display:flex;
  justify-content:center;
  align-items:start;
  gap:10px;
  min-height:287px;
  padding-top:17px;
  padding-bottom:8px
}
.hand .card {
  width:166px;
  height:288px;
  flex:0 1 166px
}
.hand .card-art {
  height:78px
}
.hand .card-name {
  font-size:14px
}
.hand .card-description {
  font-size:13px;
  line-height:1.55;
  padding-top:5px
}
.hand .card-body {
  padding:8px 4px 0
}
.hand .card-head .cost {
  width:27px;
  height:30px;
  font-size:22px
}
.hand:has(.card:nth-child(8)) {
  gap:0
}
.hand:has(.card:nth-child(8)) .card {
  min-width:143px;
  margin-left:-21px
}
.hand:has(.card:nth-child(8)) .card:first-child {
  margin-left:0
}
.empty-hand {
  padding-top:80px;
  color:#84768f;
  font-size:14px
}
.battle-shortcuts {
  text-align:center;
  color:#71687f;
  font-size:10px;
  letter-spacing:.04em;
  margin-top:7px
}
.battle-shortcuts span {
  padding:0 12px
}
.room-screen {
  max-width:1180px;
  margin:auto;
  padding:36px 35px 50px;
  text-align:center
}
.room-heading h1 {
  font-size:32px;
  margin:12px 0
}
.room-heading p {
  font-size:15px;
  color:#aa9fb8;
  line-height:1.8
}
.room-heading .eyebrow {
  font-size:11px
}
.reward-cards {
  display:flex;
  justify-content:center;
  gap:28px;
  margin:34px 0 23px
}
.reward-cards .card {
  width:215px;
  height:348px;
  animation:card-arrive .5s ease both
}
.reward-cards .card:nth-child(2) {
  animation-delay:.1s
}
.reward-cards .card:nth-child(3) {
  animation-delay:.2s
}
.reward-cards .card-art {
  height:124px
}
.reward-cards .card-description {
  font-size:15px
}
.reward-cards .card-name {
  font-size:18px
}
.reward-cards .card-type {
  font-size:12px
}
.room-footer {
  margin-top:29px;
  display:flex;
  justify-content:center;
  gap:13px
}
.room-footer .primary {
  min-width:190px;
  min-height:48px;
  font-size:15px
}
.relic-tile {
  display:flex;
  align-items:center;
  gap:15px;
  border:1px solid #bfa06c35;
  background:linear-gradient(120deg,#272238cc,#171928cc);
  padding:15px 17px;
  border-radius:6px;
  transition:border-color .18s,transform .18s;
  text-align:left;
  width:100%;
  min-height:87px
}
.relic-tile:hover {
  border-color:#d7b57b99;
  transform:translateY(-2px)
}
.relic-icon {
  width:46px;
  height:46px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  font-size:34px;
  color:var(--gold);
  text-shadow:0 0 20px #d8b77444
}
.relic-tile strong {
  display:block;
  font-size:15px;
  color:#e1d0b6
}
.relic-tile small {
  display:block;
  color:#a89ab6;
  font-size:13px;
  line-height:1.75;
  margin-top:4px
}
.reward-relic {
  max-width:420px;
  margin:23px auto 0
}
.reward-relic>.small-label {
  display:block;
  margin-bottom:7px
}
.choice-confirmed {
  margin:35px 0;
  color:#bcccae
}
.boss-relic-choice {
  margin-top:28px
}
.boss-relic-choice h2 {
  font-size:19px;
  color:#d2c2db;
  margin-bottom:18px
}
.relic-choice-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px
}
.shop-balance {
  font-size:16px;
  color:var(--gold);
  margin-top:15px
}
.shop-cards {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
  margin-top:27px
}
.shop-cards .card {
  width:100%;
  height:332px
}
.shop-buy {
  margin-top:12px;
  width:100%;
  border-color:#b79a6755;
  background:#292432;
  color:#e3c796
}
.shop-bottom {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:35px;
  text-align:left;
  border-top:1px solid var(--line);
  margin-top:30px;
  padding-top:22px
}
.shop-bottom h2 {
  font-size:16px;
  color:#c9bad4;
  margin-bottom:15px
}
.shop-relics {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
.shop-relics .relic-tile {
  padding:12px 9px;
  align-items:start;
  gap:4px;
  min-height:114px
}
.shop-relics .relic-icon {
  width:35px;
  font-size:27px
}
.shop-services>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  gap:8px
}
.shop-services b {
  font-size:14px;
  font-weight:500
}
.shop-services small {
  display:block;
  font-size:12px;
  color:#9f8daf;
  margin-top:4px
}
.rest-screen {
  max-width:990px
}
.rest-emblem,.treasure-emblem {
  font-size:85px;
  color:var(--gold);
  text-shadow:0 0 55px #deb4705a;
  margin:19px 0
}
.rest-choices {
  display:flex;
  justify-content:center;
  gap:23px;
  margin-top:12px
}
.choice-card {
  width:310px;
  min-height:208px;
  border:1px solid #a693b83a;
  border-radius:9px;
  background:linear-gradient(135deg,#2b253acc,#161b2ccc);
  padding:24px;
  transition:transform .2s,border-color .2s
}
.choice-card:hover:not(:disabled) {
  border-color:#dec088;
  transform:translateY(-4px)
}
.choice-card>span {
  font-size:32px;
  color:var(--gold)
}
.choice-card h2 {
  font-size:19px;
  margin-top:12px
}
.choice-card p {
  font-size:14px;
  color:#cab6ce;
  margin-top:7px
}
.choice-card small {
  font-size:12px;
  color:#94859f;
  display:block;
  margin-top:12px
}
.event-screen {
  display:grid;
  grid-template-columns:35% 1fr;
  gap:48px;
  max-width:1120px;
  align-items:center;
  text-align:left;
  padding-top:55px
}
.event-illustration {
  height:454px;
  border:1px solid #b697d236;
  border-radius:120px 120px 12px 12px;
  overflow:hidden;
  box-shadow:0 20px 60px #0005;
  position:relative
}
.event-illustration>.spell-art {
  width:100%;
  height:100%;
  background-size:500% 100%
}
.event-illustration:after {
  content:'';
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 60px #0c0f2488;
  background:linear-gradient(transparent 60%,#10121be0)
}
.event-content .room-heading h1 {
  font-size:31px
}
.event-content .room-heading p {
  line-height:1.9;
  max-width:520px
}
.event-choices {
  margin-top:26px;
  display:flex;
  flex-direction:column;
  gap:12px
}
.event-choices button {
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px;
  border:1px solid #b99abd36;
  border-radius:6px;
  text-align:left;
  background:#1d1c2dba;
  transition:background .2s,border-color .2s
}
.event-choices button:hover:not(:disabled) {
  background:#30283e;
  border-color:#dbbf8c99
}
.choice-number {
  font:20px var(--serif);
  color:#bfa075
}
.event-choices strong {
  display:block;
  font-size:15px
}
.event-choices small {
  display:block;
  font-size:13px;
  color:#a798b5;
  margin-top:4px
}
.event-choices button>b {
  margin-left:auto;
  color:var(--gold);
  font-size:20px
}
.event-result {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:21px 0;
  margin:23px 0;
  color:#d2b79b;
  line-height:2
}
.event-result p {
  font-size:15px
}
.treasure-screen>.relic-tile {
  max-width:440px;
  margin:18px auto
}
.treasure-screen>.gold-text {
  margin-top:20px
}
.picker-screen .card-grid {
  text-align:left;
  margin-top:24px
}
.result-screen {
  max-width:900px
}
.result-emblem {
  font-size:83px;
  color:var(--gold);
  line-height:1.2;
  text-shadow:0 0 60px #d6af7244
}
.result-score {
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:20px auto 25px
}
.result-score span {
  font-size:13px;
  color:#b5a4bb
}
.result-score strong {
  font:61px var(--serif);
  color:var(--gold2);
  letter-spacing:.04em
}
.result-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:23px 0;
  gap:15px
}
.result-stats b {
  display:block;
  font-size:24px;
  font-weight:500;
  color:#d4c8dc
}
.result-stats span {
  font-size:12px;
  color:#9786a7;
  margin-top:5px;
  display:block
}
.progress-result {
  margin-top:25px;
  font-size:14px;
  line-height:1.9;
  color:#b8a8c3
}
.progress-result>b {
  color:#d8bc8c;
  margin-right:22px
}
.progress-result p {
  font-size:13px;
  color:#a28eae
}
.result-screen .room-footer {
  margin-top:23px
}
dialog {
  color:var(--ink);
  background:linear-gradient(135deg,#212135,#121522);
  border:1px solid #a58fbb5c;
  border-radius:12px;
  width:min(94vw,670px);
  max-height:90vh;
  padding:0;
  box-shadow:0 30px 100px #000a
}
dialog.wide {
  width:min(94vw,1100px)
}
dialog::backdrop {
  background:#050814cf;
  backdrop-filter:blur(6px)
}
.modal-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:20px 24px;
  position:sticky;
  top:0;
  z-index:15;
  background:#1b1c2e
}
.modal-heading h2 {
  font-size:20px;
  color:#e3d4c3
}
.close-modal {
  font-size:29px;
  width:34px;
  height:34px;
  line-height:1;
  color:#bdafc8;
  border-radius:4px
}
.close-modal:hover {
  background:#ffffff10
}
.modal-body {
  padding:22px 26px;
  overflow-y:auto
}
.modal-body>p {
  font-size:15px;
  color:#b9afc6;
  line-height:1.9
}
.modal-body h3 {
  font-size:17px;
  margin-top:20px;
  margin-bottom:8px
}
.modal-actions {
  display:flex;
  gap:14px;
  justify-content:flex-end;
  margin-top:24px
}
.pause-actions {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:20px
}
.guide {
  color:#c4bace;
  font-size:15px;
  line-height:1.9
}
.guide p {
  margin:12px 0
}
.guide ol {
  padding-left:24px
}
.guide li {
  padding-left:4px;
  margin:8px 0
}
.guide b {
  color:#e5d8c5
}
.guide h3 {
  color:var(--gold)
}
.keyword-guide {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px;
  margin-top:24px
}
.keyword-guide>div {
  border:1px solid var(--line);
  border-radius:5px;
  padding:15px
}
.keyword-guide b {
  font-size:15px
}
.keyword-guide small {
  font-size:11px;
  color:#85778e;
  margin-left:8px
}
.keyword-guide p {
  font-size:13px;
  line-height:1.85;
  margin:5px 0 0
}
.card-comparison {
  display:flex;
  gap:28px;
  justify-content:center;
  padding:6px
}
.card-comparison>div>p {
  text-align:center;
  color:#b9a5c4;
  font-size:14px;
  margin-bottom:15px
}
.card-comparison .card {
  width:215px;
  height:350px;
  cursor:default
}
.card-comparison .card-art {
  height:110px
}
.card-comparison .card:hover {
  transform:none
}
.unlock-list {
  padding:17px;
  background:#121623;
  border-radius:6px;
  border:1px solid var(--line);
  margin:15px 0;
  font-size:14px;
  color:#cab6c8;
  line-height:2.1
}
.codex-tabs {
  display:flex;
  gap:7px;
  border-bottom:1px solid var(--line);
  padding-bottom:15px
}
.arch-filters {
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin:18px 0 12px
}
.arch-filters .btn {
  min-height:32px;
  font-size:12px;
  padding:5px 12px
}
.selected-filter {
  background:#4d3d5755;
  border-color:#b293be66;
  color:#e1c5df
}
.codex-card-wrap {
  position:relative
}
.locked-label,.exclusive-label {
  font-size:11px;
  text-align:center;
  margin-top:6px;
  color:#aa92bb
}
.locked-label {
  color:#e0b883
}
.codex-card-wrap .card {
  height:333px
}
.relic-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-top:20px
}
.enemy-codex {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:20px
}
.enemy-codex article {
  display:flex;
  align-items:center;
  gap:13px;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  padding-right:10px;
  background:#151827
}
.enemy-codex .spell-art {
  width:83px;
  height:110px;
  flex-shrink:0
}
.enemy-codex h3 {
  font-size:16px;
  margin:3px 0 5px
}
.enemy-codex small {
  font-size:11px;
  color:#a18dac
}
.enemy-codex p {
  font-size:12px;
  color:#c2b0cb;
  line-height:1.6
}
.combat-log {
  font-size:14px;
  color:#b9a9c6;
  line-height:2.1;
  padding-left:20px
}
.combat-log li {
  padding-left:6px;
  border-bottom:1px solid #ffffff07
}
#toast {
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translate(-50%,15px);
  background:#292334f2;
  border:1px solid #ba987466;
  border-radius:7px;
  padding:13px 22px;
  box-shadow:0 10px 30px #0007;
  color:#f3e2c9;
  font-size:14px;
  opacity:0;
  transition:.2s;
  pointer-events:none;
  z-index:1000;
  text-align:center;
  max-width:90vw
}
#toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
#effects {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:800;
  overflow:hidden
}
.floating-number {
  position:absolute;
  font-size:25px;
  font-weight:700;
  color:#fca8a1;
  text-shadow:0 2px 4px #000,0 0 20px #e4605544;
  animation:float-up 1.15s ease-out forwards;
  white-space:nowrap;
  transform:translate(-50%,-50%)
}
.fx-heal {
  color:#92d7ac
}
.fx-block,.fx-shield {
  color:#a0c9f4;
  font-size:19px
}
.fx-status {
  font-size:15px;
  color:#e7ba99
}
.fx-phase,.fx-relic {
  font-size:26px;
  color:#eacd95
}
.newly-summoned {
  animation:summon .45s ease-out
}
.shake {
  animation:shake .3s linear
}
.reduced-motion * {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}
@keyframes drift {
  from {
    transform:translateY(0)
  }
  to {
    transform:translateY(-90px)
  }
}
@keyframes node-glow {
  50% {
    box-shadow:0 0 0 5px #d8b6810f,0 0 28px #d8b68130
  }
}
@keyframes card-arrive {
  from {
    opacity:0;
    transform:translateY(25px) scale(.94)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes summon {
  from {
    opacity:0;
    transform:scale(.65);
    filter:brightness(3)
  }
  to {
    opacity:1;
    transform:scale(1);
    filter:none
  }
}
@keyframes float-up {
  0% {
    opacity:1;
    transform:translate(-50%,-20%) scale(.7)
  }
  18% {
    transform:translate(-50%,-60%) scale(1.1)
  }
  100% {
    opacity:0;
    transform:translate(-50%,-200%) scale(1)
  }
}
@keyframes shake {
  25% {
    transform:translateX(-3px)
  }
  50% {
    transform:translateX(3px)
  }
  75% {
    transform:translateX(-2px)
  }
}
@media(min-width:1500px) {
  .menu-screen {
    padding-top:47px
  }
  .menu-title {
    margin-bottom:38px
  }
  .hero-card {
    height:380px
  }
  .launch-panel {
    margin-top:33px
  }
  .hero-detail {
    padding-top:18px
  }
  .hero-story {
    margin-bottom:20px
  }
}
@media(max-width:1100px) {
  .menu-screen {
    padding:26px
  }
  .hero-selection {
    gap:12px;
    grid-template-columns:repeat(3,1fr) 1.15fr
  }
  .hero-card {
    height:320px
  }
  .hero-copy {
    left:13px
  }
  .hero-detail {
    padding-left:5px;
    padding-top:0
  }
  .hero-detail h2 {
    font-size:25px
  }
  .hero-story {
    font-size:13px;
    margin-bottom:10px
  }
  .passive-box {
    padding:9px 0
  }
  .passive-box p {
    font-size:13px
  }
  .starter-list>div:nth-child(n+5) {
    display:none
  }
  .launch-panel {
    gap:17px
  }
  .seed-field {
    width:205px
  }
  .start-btn {
    width:176px
  }
  .runbar {
    gap:16px;
    padding-left:24px;
    padding-right:24px
  }
  .relic-bar {
    padding-left:24px;
    padding-right:24px
  }
  .map-screen {
    padding:25px
  }
  .map-layout {
    gap:25px;
    grid-template-columns:1fr 250px
  }
  .battle-screen {
    padding:14px 22px
  }
  .unit-slots {
    gap:12px
  }
  .battlefield {
    padding:13px 20px
  }
  .unit,.empty-slot {
    width:118px;
    height:111px
  }
  .player-console {
    gap:12px
  }
  .player-vitals {
    width:180px
  }
  .end-turn {
    min-width:130px
  }
  .hand {
    gap:7px
  }
  .hand:has(.card:nth-child(8)) .card {
    margin-left:-36px
  }
  .shop-cards {
    gap:12px
  }
  .shop-cards .card {
    height:355px
  }
  .shop-bottom {
    gap:23px
  }
  .shop-services small {
    font-size:11px
  }
  .shop-relics .relic-tile {
    min-height:133px;
    display:block
  }
  .shop-relics .relic-icon {
    height:32px
  }
  .event-screen {
    gap:33px
  }
  .event-illustration {
    height:410px
  }
}
@media(max-width:800px) {
  .topbar {
    height:65px;
    padding:0 18px
  }
  .brand {
    font-size:14px;
    gap:7px;
    letter-spacing:.06em
  }
  .brand-mark {
    font-size:27px
  }
  .topbar nav {
    gap:2px
  }
  .topbar .btn {
    font-size:12px;
    padding:7px 9px
  }
  .menu-screen {
    padding:26px 22px
  }
  .menu-title h1 {
    font-size:38px
  }
  .menu-title {
    margin-bottom:25px
  }
  .hero-selection {
    grid-template-columns:repeat(3,1fr)
  }
  .hero-card {
    height:320px
  }
  .hero-detail {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:4px 20px;
    padding:13px 0 0
  }
  .hero-detail>.eyebrow,.hero-detail>h2 {
    display:none
  }
  .hero-story {
    font-size:14px;
    grid-column:1;
    grid-row:1;
    align-self:center;
    margin:0
  }
  .passive-box {
    grid-column:2;
    grid-row:1;
    padding:0 0 0 20px;
    border:0;
    border-left:1px solid var(--line)
  }
  .passive-box p {
    font-size:14px
  }
  .starter-label {
    grid-column:1/-1;
    justify-content:start;
    gap:14px
  }
  .starter-list {
    display:none
  }
  .launch-panel {
    flex-wrap:wrap;
    gap:17px;
    margin-top:21px
  }
  .seed-field {
    width:calc(60% - 9px)
  }
  .difficulty-field {
    width:calc(40% - 9px)
  }
  .launch-actions {
    width:100%;
    margin-top:9px
  }
  .launch-actions .start-btn {
    flex:1
  }
  .launch-actions .resume-btn {
    flex:1
  }
  .difficulty-field small {
    display:none
  }
  .menu-footer {
    flex-wrap:wrap;
    gap:12px 22px;
    margin-top:17px
  }
  .menu-footer button {
    margin-left:0
  }
  .runbar {
    padding:10px 18px;
    gap:13px;
    flex-wrap:wrap
  }
  .run-identity small {
    display:none
  }
  .run-location {
    font-size:12px;
    gap:6px
  }
  .run-location>span {
    font-size:10px
  }
  .runbar>.btn {
    font-size:12px;
    min-height:32px;
    padding:6px
  }
  .run-stat {
    font-size:15px
  }
  .run-stat span {
    font-size:11px
  }
  .relic-bar {
    padding:0 18px 8px;
    gap:8px
  }
  .map-screen {
    padding:24px 20px
  }
  .map-layout {
    grid-template-columns:1fr;
    gap:24px
  }
  .map-sidebar {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
  }
  .boss-preview {
    grid-row:span 2
  }
  .map-legend {
    margin-top:0
  }
  .map-note {
    margin:0;
    padding:0;
    border:0
  }
  .seed-note {
    grid-column:1/-1;
    margin:0
  }
  .route-map {
    max-height:none
  }
  .map-paper {
    max-width:600px;
    width:100%;
    margin:auto
  }
  .section-heading h1 {
    font-size:23px
  }
  .section-heading p {
    font-size:13px
  }
  .enemy-overview {
    gap:10px
  }
  .enemy-hero {
    width:52%;
    padding:9px;
    gap:9px
  }
  .enemy-portrait {
    width:54px;
    height:72px
  }
  .enemy-hero h1 {
    font-size:17px
  }
  .intent {
    padding:10px
  }
  .intent p {
    font-size:12px
  }
  .intent strong {
    font-size:14px
  }
  .intent small {
    font-size:10px
  }
  .status {
    font-size:9px
  }
  .battlefield {
    padding:13px 12px
  }
  .board-row {
    gap:8px
  }
  .lane-label {
    width:32px;
    font-size:8px
  }
  .unit-slots {
    gap:9px
  }
  .unit,.empty-slot {
    width:calc((100% - 36px)/5);
    height:103px
  }
  .unit-name {
    font-size:11px;
    margin-top:26px
  }
  .unit-stats {
    padding:2px;
    font-size:13px
  }
  .unit-readiness {
    font-size:9px
  }
  .unit-keywords {
    font-size:10px
  }
  .player-console {
    gap:10px;
    flex-wrap:wrap;
    padding:12px 2px
  }
  .player-avatar {
    width:43px;
    height:48px
  }
  .player-vitals {
    flex:1;
    width:auto
  }
  .mana-display {
    margin-left:0
  }
  .mana-orb {
    width:39px;
    height:43px;
    font-size:26px
  }
  .mana-display>div {
    display:none
  }
  .pile-buttons {
    margin-left:0;
    gap:5px;
    order:5;
    flex:1
  }
  .pile-buttons .pile-btn {
    flex-direction:row;
    gap:6px;
    min-height:31px;
    font-size:13px;
    padding:5px 8px
  }
  .end-turn {
    height:44px;
    min-width:120px;
    padding:8px 12px;
    font-size:13px
  }
  .hand {
    justify-content:flex-start;
    overflow-x:auto;
    padding:18px 4px 18px;
    gap:10px;
    scroll-snap-type:x proximity;
    min-height:301px
  }
  .hand .card {
    flex:0 0 167px;
    scroll-snap-align:center
  }
  .hand:has(.card:nth-child(8)) .card {
    margin-left:0;
    min-width:167px
  }
  .hand:has(.card:nth-child(8)) {
    gap:10px
  }
  .target-message {
    font-size:11px;
    max-width:58%;
    text-align:center
  }
  .hand-heading .text-btn {
    font-size:10px;
    white-space:nowrap
  }
  .hand .card:hover:not(:disabled) {
    transform:translateY(-5px)
  }
  .room-screen {
    padding:29px 22px 36px
  }
  .room-heading h1 {
    font-size:27px
  }
  .room-heading p {
    font-size:14px
  }
  .reward-cards {
    gap:16px
  }
  .reward-cards .card {
    width:calc((100% - 32px)/3);
    height:340px
  }
  .reward-cards .card-art {
    height:102px
  }
  .reward-cards .card-description {
    font-size:14px
  }
  .reward-cards .card-name {
    font-size:16px
  }
  .relic-choice-grid {
    grid-template-columns:1fr
  }
  .shop-cards {
    grid-template-columns:repeat(3,1fr);
    gap:24px 15px
  }
  .shop-cards .card {
    height:330px
  }
  .shop-bottom {
    grid-template-columns:1fr
  }
  .shop-relics .relic-tile {
    min-height:94px;
    display:flex;
    align-items:center;
    gap:8px
  }
  .shop-services small {
    font-size:12px
  }
  .event-screen {
    grid-template-columns:1fr;
    gap:25px
  }
  .event-illustration {
    height:150px;
    width:100%;
    border-radius:10px
  }
  .event-illustration>.spell-art {
    background-size:500% auto;
    background-position-y:43%
  }
  .event-content .room-heading h1 {
    font-size:27px
  }
  .result-stats {
    grid-template-columns:repeat(2,1fr);
    gap:20px
  }
  .room-footer {
    flex-wrap:wrap
  }
  .card-grid {
    grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
    gap:20px 14px
  }
  .card-grid .card {
    height:341px
  }
  .modal-body {
    padding:20px
  }
  .enemy-codex {
    grid-template-columns:1fr
  }
  .keyword-guide {
    grid-template-columns:1fr
  }
  .card-comparison .card {
    width:200px
  }
  .rest-choices {
    gap:13px
  }
  .choice-card {
    padding:20px 14px
  }
  .choice-card h2 {
    font-size:17px
  }
}
@media(max-width:500px) {
  .brand {
    font-size:12px;
    gap:5px;
    letter-spacing:.025em
  }
  .brand-mark {
    font-size:26px
  }
  .topbar {
    padding:0 12px;
    gap:4px
  }
  .topbar nav {
    gap:0
  }
  .topbar .btn {
    font-size:11px;
    padding:6px;
    min-height:36px
  }
  .menu-screen {
    padding:22px 16px
  }
  .menu-title h1 {
    font-size:30px;
    letter-spacing:.08em
  }
  .menu-title .eyebrow {
    font-size:9px;
    letter-spacing:.18em
  }
  .menu-title p {
    font-size:12px;
    margin-top:8px
  }
  .selection-heading {
    font-size:10px
  }
  .selection-heading b {
    font-size:12px;
    margin-left:6px
  }
  .hero-selection {
    gap:8px
  }
  .hero-card {
    height:239px;
    border-radius:6px;
    background-size:300% 100%
  }
  .hero-copy {
    left:10px;
    bottom:12px;
    right:4px
  }
  .hero-copy strong {
    font-size:25px
  }
  .hero-copy>span:not(.hero-role) {
    font-size:11px;
    word-break:keep-all
  }
  .hero-role {
    font-size:9px;
    letter-spacing:0
  }
  .hero-copy small {
    font-size:12px;
    margin-top:8px
  }
  .hero-copy i {
    display:none
  }
  .hero-selection-mark {
    width:19px;
    height:19px;
    top:8px;
    right:8px;
    font-size:12px
  }
  .hero-detail {
    grid-template-columns:1fr;
    gap:9px;
    padding-top:12px
  }
  .hero-story {
    font-size:12px;
    text-align:center
  }
  .passive-box {
    grid-column:1;
    grid-row:2;
    padding:10px 12px;
    background:#1a192aa8;
    border:1px solid var(--line);
    border-radius:5px
  }
  .passive-box .small-label {
    font-size:10px
  }
  .passive-box p {
    font-size:13px
  }
  .starter-label {
    margin-top:0;
    justify-content:space-between
  }
  .launch-panel {
    margin-top:16px;
    padding:17px 0;
    gap:12px
  }
  .seed-field {
    width:calc(60% - 6px)
  }
  .difficulty-field {
    width:calc(40% - 6px)
  }
  .launch-panel label {
    font-size:11px
  }
  .launch-panel label span {
    font-size:10px
  }
  .launch-panel input,.launch-panel select {
    font-size:12px;
    padding:0 9px
  }
  .launch-actions {
    margin-top:0;
    gap:9px
  }
  .start-btn {
    font-size:15px;
    height:54px
  }
  .resume-btn {
    font-size:13px;
    height:54px;
    padding:5px 9px
  }
  .resume-btn span {
    font-size:10px
  }
  .menu-footer {
    font-size:10px;
    gap:9px 17px
  }
  .menu-footer button {
    font-size:10px
  }
  .xp-track {
    width:36px
  }
  .runbar {
    gap:9px;
    padding:10px 13px
  }
  .mini-portrait {
    width:28px;
    height:31px
  }
  .run-identity {
    gap:6px
  }
  .run-identity b {
    font-size:12px
  }
  .run-stat {
    font-size:14px
  }
  .run-stat span {
    font-size:10px
  }
  .runbar>.btn {
    font-size:11px;
    padding:5px;
    min-height:28px
  }
  .run-location {
    order:9;
    width:100%;
    justify-content:center;
    margin-top:-1px;
    gap:10px;
    font-size:11px
  }
  .runbar>.btn:last-child {
    margin-left:auto
  }
  .relic-bar {
    padding:0 13px 8px;
    gap:6px;
    font-size:10px
  }
  .relic-bar .small-label {
    font-size:10px
  }
  .relic-bar button {
    font-size:20px;
    width:22px;
    min-height:22px
  }
  .ascension-tag {
    font-size:10px
  }
  .map-screen {
    padding:19px 14px
  }
  .section-heading .eyebrow {
    font-size:10px
  }
  .section-heading h1 {
    font-size:21px
  }
  .section-heading h1>span {
    font-size:19px;
    margin-right:6px
  }
  .section-heading p {
    font-size:12px
  }
  .floor-count {
    font-size:20px
  }
  .floor-count span {
    display:block;
    font-size:10px
  }
  .map-layout {
    margin-top:18px
  }
  .map-hint {
    font-size:11px
  }
  .map-node {
    width:31px;
    height:31px
  }
  .map-node>span {
    font-size:16px
  }
  .map-node small {
    font-size:9px;
    top:calc(100% + 1px)
  }
  .node-boss {
    width:41px;
    height:41px
  }
  .node-boss>span {
    font-size:23px
  }
  .map-start-label {
    font-size:8px;
    bottom:0
  }
  .map-sidebar {
    gap:15px;
    grid-template-columns:1fr 1.1fr
  }
  .boss-preview-art {
    height:83px
  }
  .boss-preview>div:last-child {
    padding:12px
  }
  .boss-preview .eyebrow {
    font-size:9px
  }
  .boss-preview h2 {
    font-size:16px
  }
  .boss-preview p {
    font-size:11px
  }
  .boss-hp {
    font-size:11px
  }
  .map-legend .small-label {
    font-size:10px
  }
  .map-legend>div {
    gap:7px;
    font-size:11px;
    margin-top:7px
  }
  .map-legend b {
    font-size:17px;
    width:19px
  }
  .map-legend small {
    font-size:9px
  }
  .map-note p {
    font-size:11px
  }
  .map-note b {
    font-size:11px
  }
  .battle-screen {
    padding:12px 10px 18px
  }
  .battle-heading {
    gap:8px;
    font-size:10px;
    margin-bottom:9px
  }
  .battle-heading .eyebrow {
    font-size:9px;
    letter-spacing:.06em
  }
  .enemy-overview {
    flex-direction:column;
    gap:8px;
    margin-bottom:10px
  }
  .enemy-hero {
    width:100%;
    padding:9px 12px;
    gap:12px
  }
  .enemy-portrait {
    height:62px;
    width:56px
  }
  .enemy-hero h1 {
    font-size:18px;
    margin:2px 0 6px
  }
  .enemy-hero .status-list {
    margin-top:3px
  }
  .intent {
    padding:8px 12px;
    display:block
  }
  .intent .small-label {
    font-size:9px;
    display:inline;
    margin-right:12px
  }
  .intent strong {
    font-size:13px
  }
  .intent p {
    font-size:12px;
    margin-top:2px
  }
  .intent small {
    font-size:9px;
    display:block;
    margin-top:2px
  }
  .battlefield {
    padding:10px 7px;
    border-radius:8px
  }
  .lane-label {
    display:none
  }
  .board-row {
    gap:0
  }
  .unit-slots {
    gap:6px
  }
  .unit,.empty-slot {
    width:calc((100% - 24px)/5);
    height:99px;
    border-radius:9px
  }
  .unit-name {
    font-size:10px;
    margin-top:33px;
    letter-spacing:-.03em
  }
  .unit-stats {
    font-size:11px;
    padding:1px
  }
  .unit-keywords {
    font-size:10px;
    gap:1px;
    top:4px;
    left:2px;
    right:2px
  }
  .unit-keywords i {
    padding:0 1px
  }
  .unit-readiness {
    font-size:8px
  }
  .board-divider {
    font-size:9px;
    margin:7px 0;
    gap:10px
  }
  .empty-slot span {
    font-size:20px
  }
  .player-console {
    gap:7px
  }
  .player-vitals {
    min-width:100px;
    flex:1
  }
  .player-vitals>b {
    font-size:11px
  }
  .player-vitals>b span {
    font-size:10px
  }
  .player-avatar {
    width:36px;
    height:43px;
    border-radius:8px
  }
  .mana-orb {
    height:41px;
    width:33px;
    font-size:24px;
    border-radius:9px
  }
  .hp-track {
    min-width:80px;
    height:17px
  }
  .hp-track b {
    font-size:10px;
    line-height:15px
  }
  .end-turn {
    min-width:87px;
    height:42px;
    font-size:12px;
    gap:6px;
    padding:7px 10px
  }
  .end-turn span {
    font-size:15px
  }
  .pile-buttons {
    justify-content:center
  }
  .pile-buttons .pile-btn {
    flex:1;
    gap:4px;
    padding:5px 7px;
    font-size:12px;
    min-width:0
  }
  .pile-btn small {
    font-size:9px
  }
  .hand-heading {
    font-size:10px;
    gap:5px
  }
  .hand-heading b {
    font-size:10px
  }
  .target-message {
    font-size:10px;
    max-width:55%;
    line-height:1.5
  }
  .hand-heading .text-btn {
    font-size:9px
  }
  .hand .card {
    flex-basis:159px;
    height:285px
  }
  .hand {
    gap:9px;
    min-height:304px
  }
  .hand:has(.card:nth-child(8)) .card {
    min-width:159px
  }
  .battle-shortcuts {
    font-size:9px
  }
  .battle-shortcuts span {
    padding:0 4px
  }
  .room-screen {
    padding:27px 16px 34px
  }
  .room-heading h1 {
    font-size:24px
  }
  .room-heading .eyebrow {
    font-size:10px;
    letter-spacing:.13em
  }
  .room-heading p {
    font-size:13px
  }
  .reward-cards {
    flex-wrap:wrap;
    gap:18px;
    margin:25px 0
  }
  .reward-cards .card {
    width:calc((100% - 18px)/2);
    height:331px
  }
  .reward-cards .card-art {
    height:85px
  }
  .reward-cards .card-name {
    font-size:15px
  }
  .reward-cards .card-description {
    font-size:14px;
    line-height:1.55
  }
  .reward-cards .card-type {
    font-size:10px
  }
  .reward-cards .card:nth-child(3) {
    margin-left:auto;
    margin-right:auto
  }
  .shop-cards {
    grid-template-columns:repeat(2,1fr);
    gap:24px 13px
  }
  .shop-cards .card {
    height:339px
  }
  .shop-cards .card-art {
    height:81px
  }
  .shop-cards .card-description {
    font-size:14px
  }
  .shop-relics {
    grid-template-columns:1fr
  }
  .shop-relics .relic-tile {
    min-height:80px
  }
  .shop-bottom {
    gap:28px
  }
  .shop-services small {
    font-size:11px
  }
  .shop-services .btn {
    font-size:12px;
    padding:6px 12px
  }
  .rest-choices {
    flex-direction:column;
    gap:14px
  }
  .choice-card {
    width:100%;
    min-height:163px;
    padding:19px
  }
  .choice-card>span {
    font-size:26px
  }
  .choice-card h2 {
    margin-top:5px
  }
  .choice-card small {
    margin-top:9px
  }
  .rest-emblem,.treasure-emblem {
    font-size:60px;
    margin:20px 0
  }
  .event-screen {
    gap:20px
  }
  .event-illustration {
    height:120px
  }
  .event-content .room-heading h1 {
    font-size:25px
  }
  .event-choices button {
    padding:14px;
    gap:12px
  }
  .event-choices strong {
    font-size:14px
  }
  .event-choices small {
    font-size:12px;
    line-height:1.75
  }
  .result-score strong {
    font-size:52px
  }
  .result-stats b {
    font-size:21px
  }
  .result-stats span {
    font-size:11px
  }
  .result-emblem {
    font-size:65px
  }
  .room-footer .btn {
    font-size:13px;
    min-width:0
  }
  .modal-heading {
    padding:16px
  }
  .modal-heading h2 {
    font-size:17px
  }
  .modal-body {
    padding:17px 14px
  }
  .card-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:19px 13px
  }
  .card-grid .card {
    height:345px
  }
  .card-grid .card-art {
    height:77px
  }
  .card-grid .card-name {
    font-size:14px
  }
  .card-grid .card-description {
    font-size:14px
  }
  .card-grid .card-type {
    font-size:10px
  }
  .card-comparison {
    gap:13px;
    padding:0
  }
  .card-comparison>div {
    width:calc((100% - 13px)/2)
  }
  .card-comparison .card {
    width:100%;
    height:356px
  }
  .card-comparison .card-art {
    height:86px
  }
  .card-comparison .card-name {
    font-size:14px
  }
  .card-comparison .card-description {
    font-size:14px
  }
  .card-comparison .card-type {
    font-size:10px
  }
  .codex-tabs .btn {
    font-size:12px;
    padding:7px 11px
  }
  .arch-filters {
    gap:2px
  }
  .arch-filters .btn {
    font-size:11px;
    padding:5px 8px
  }
  .relic-grid {
    grid-template-columns:1fr
  }
  .relic-tile {
    padding:13px;
    gap:12px
  }
  .relic-tile strong {
    font-size:14px
  }
  .relic-tile small {
    font-size:12px
  }
  .guide {
    font-size:14px
  }
  .modal-actions {
    gap:9px;
    flex-wrap:wrap
  }
  .modal-actions .btn {
    font-size:12px
  }
  .progress-result {
    font-size:13px
  }
  .progress-result p {
    font-size:12px
  }
  .unlock-list {
    font-size:12px;
    padding:12px
  }
  .floating-number {
    font-size:20px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}
.newly-drawn {
  animation:card-arrive .32s ease-out
}
.cast-flash {
  animation:cast-glow .45s ease-out
}
.death-echo {
  position:absolute;
  animation:death-fade .48s ease-in forwards;
  pointer-events:none
}
.death-echo .unit {
  width:100%;
  height:100%;
  margin:0
}
@keyframes cast-glow {
  35% {
    filter:brightness(1.9);
    box-shadow:0 0 35px #bd9edb66
  }
  100% {
    filter:none
  }
}
@keyframes death-fade {
  to {
    opacity:0;
    transform:translateY(-20px) scale(.7);
    filter:brightness(2) blur(5px)
  }
}