@charset "utf-8";

:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  color: #e6dccb;
  --gold: #d9b77c;
  --pale: #f7e7c8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  display: grid;
  grid-template-rows: 66px minmax(0, 1fr) 112px 96px;
  background: radial-gradient(ellipse at 50% 20%, #30222b 0, #17141d 38%, #0b0d13 86%);
}
button, select, input { font: inherit; }
button {
  min-height: 44px;
  font-weight: 700;
  color: #e9d9bd;
  cursor: pointer;
  border: 1px solid #655341;
  border-radius: 3px;
  background: linear-gradient(156deg, #433329 0%, #261f23 49%, #171920 100%);
  box-shadow: inset 0 1px 0 #b9976952, inset 0 -1px 0 #050609, 0 2px 8px #05050699;
  transition: border-color .15s, color .15s, background .15s, transform .15s;
}
button:hover:not(:disabled) { border-color: #d9b77c; color: #fff2d6; background: linear-gradient(160deg, #594332, #34272a 58%, #1e1e26); }
button:active:not(:disabled):not(.village-service) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, select:focus-visible, input:focus-visible, canvas:focus-visible { outline: 2px solid #e2bd80; outline-offset: 2px; }
select, input[type="number"], input[type="text"] {
  min-height: 44px; padding: 8px 12px; color: #f0ddbd;
  border: 1px solid #71604a; border-radius: 3px;
  background: #15161e;
}
input[type="checkbox"], input[type="range"] { accent-color: #c39355; }
input[type="range"] { min-height: 36px; cursor: pointer; }

.topbar {
  min-width: 0; display: grid; grid-template-columns: minmax(220px, .75fr) minmax(225px, .85fr) minmax(495px, 1.35fr);
  align-items: center; padding: 0 17px; gap: 12px;
  border-bottom: 1px solid #8c6a475c;
  background: linear-gradient(180deg, #27212a, #191820 54%, #100f17);
  box-shadow: inset 0 1px 0 #b5a07624, 0 5px 20px #050409a8;
  z-index: 2;
}
.brand { display: inline-flex; width: max-content; max-width: 100%; align-items: center; gap: 10px; text-decoration: none; color: var(--pale); }
.brand img { width: 42px; height: 42px; filter: drop-shadow(0 0 9px #c59c6055); }
.brand strong { display: block; font: 700 20px/1.1 Georgia, serif; letter-spacing: .18em; text-shadow: 0 1px 10px #d9a76c55; }
.brand small { display: block; margin-top: 3px; color: #c8b08f; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.character-line { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; overflow: hidden; color: #c4b6a3; letter-spacing: .05em; }
#character-name { overflow: hidden; text-overflow: ellipsis; color: #f2dcb7; font: 18px Georgia, serif; }
#character-level { color: var(--gold); font-weight: 700; }
.separator { color: #806952; }
.top-actions { display: flex; justify-content: end; gap: 6px; min-width: 0; }
.top-actions button { min-width: 0; flex: 1 1 0; max-width: 100px; padding: 0 6px; font-size: 15px; letter-spacing: .01em; }

.layout { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px 10px; }
.panel {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  padding: 12px; overflow: hidden;
  border: 1px solid #756044a6;
  background: radial-gradient(ellipse at 50% 0%, #3930376b, transparent 55%),
    linear-gradient(165deg, #1c1d27, #14141d 51%, #111218);
  box-shadow: inset 0 0 0 1px #111116, inset 0 0 30px #83553116, 0 6px 20px #0009;
}
.panel::before, .panel::after { content: ""; position: absolute; width: 28px; height: 28px; pointer-events: none; z-index: 1; }
.panel::before { top: 4px; left: 4px; border-top: 1px solid #bb9460; border-left: 1px solid #bb9460; }
.panel::after { right: 4px; bottom: 4px; border-right: 1px solid #bb9460; border-bottom: 1px solid #bb9460; }
.eyebrow { color: #d8b582; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.skill-panel { display: flex; flex-direction: row; align-items: stretch; gap: 8px; padding: 7px 12px; z-index: 2; border-inline: 0; }
.hero-summary { flex: 0 0 86px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.portrait { flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border: 1px solid #b7955e8a; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #58434e, #191a26 68%); box-shadow: 0 0 0 2px #1a1920, 0 0 12px #b9734640; }
.portrait img { width: 96%; height: 96%; object-fit: contain; filter: drop-shadow(0 5px 8px #000a); }
.class-name { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; color: var(--pale); font-size: 14px; font-weight: 700; }
.skills { min-width: 0; flex: 1 1 auto; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.skill-button { position: relative; min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 3px 3px 18px; font-size: 14px; line-height: 1.15; }
.skill-icon { display: block; flex: none; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 1px 5px #d4ab6966); }
.skill-key { position: absolute; top: 2px; left: 3px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 2px; border: 1px solid #9f774a; border-radius: 2px; color: #efd2a1; background: #171922e8; font-size: 12px; font-weight: 700; }
.skill-name { flex: none; display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.skill-button:disabled { opacity: .58; }
.skill-cost { position: absolute; bottom: 2px; right: 3px; left: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #d5c5ad; font-size: 13px; text-align: center; }
.skill-cooldown:not(:empty) { position: absolute; top: 2px; right: 3px; padding: 2px; border-radius: 2px; color: #f2d4a4; background: #19131cd9; font-size: 13px; }
.hero-actions { flex: 0 0 150px; min-width: 0; display: flex; flex-direction: column; }
.passives { flex: 1 1 auto; min-height: 0; margin-bottom: 4px; display: flex; }
.growth-button { width: 100%; min-height: 44px; padding: 0 5px; font-size: 14px; }
.passive-label { margin-bottom: 3px; color: #c6a881; }
.stat-button { min-height: 44px; min-width: 44px; padding: 0 5px; margin: 2px; font-size: 14px; }
#town-button { flex: none; min-height: 44px; width: 100%; padding: 0 6px; font-size: 14px; }
.subtle { border-color: #474048; background: linear-gradient(#27242b, #181820); }

.viewport {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  border: 1px solid #8b674486;
  background: radial-gradient(ellipse at 50% 45%, #383037, #171820 75%);
  box-shadow: inset 0 0 0 1px #141019, 0 6px 20px #000a;
}
.viewport::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; box-shadow: inset 0 0 50px 15px #09090dbb, inset 0 0 0 2px #1c1b24; }
#game { display: block; width: 100%; height: 100%; outline-offset: -5px; }
.village-scene { position: absolute; inset: 0; overflow: hidden; background: #14151c; }
.village-art { width: 100%; height: 100%; object-fit: fill; display: block; }
.village-hero { position: absolute; left: 50%; top: 68%; width: 90px; height: 90px; transform: translate(-50%, -100%); filter: drop-shadow(0 7px 5px #000b); pointer-events: none; }
.village-service { position: absolute; z-index: 2; top: 62%; min-width: 112px; transform: translateX(-50%); border-color: #cfaa6f; box-shadow: 0 5px 15px #000b, 0 0 12px #d1a76844; }
.village-merchant { left: 25%; }
.village-forge { left: 75%; }
.village-actions { position: absolute; z-index: 2; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; }
.village-actions button { width: 185px; min-width: 185px; margin: 0; }
.oath-close { position: absolute; top: 8px; right: 8px; width: 44px; padding: 0; font-size: 22px; }
.title-screen { position: fixed; z-index: 15; inset: 0; display: flex; align-items: center; background: linear-gradient(90deg, #080c17f2 0%, #0b1024a6 40%, #0c101522 75%), url("../assets/scenes/title-scene.svg?v=3abe38ae392f963d") center / cover no-repeat; }
.title-content { width: 650px; max-height: 100%; padding: 35px 60px 35px 8vw; text-shadow: 0 3px 15px #000; }
.title-eyebrow { color: #cfbc9f; font: 700 14px Georgia, serif; letter-spacing: .2em; }
#title-logo { margin: 18px 0 14px; color: #ead2aa; font: normal 64px/1 Georgia, serif; letter-spacing: .055em; text-shadow: 0 2px 0 #47333a, 0 0 36px #cf97602e; }
.title-tagline { margin: 0 0 34px; color: #baafad; font: 16px/1.6 Georgia, serif; }
.title-menu { width: 280px; display: grid; gap: 10px; }
.title-menu button { min-height: 50px; font-size: 18px; letter-spacing: .04em; background: linear-gradient(110deg, #282635eb, #141927d9); }
.title-menu .primary { background: linear-gradient(110deg, #74523ce8, #342b35e8); border-color: #c99c65; color: #f6dfb5; }
.title-footnote { margin: 28px 0 0; color: #b9afb9; font: italic 14px/1.5 Georgia, serif; }
.title-source { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.title-source a { color: #cdb8a0; }
.update-button { position: fixed; z-index: 16; right: 18px; bottom: 18px; max-width: calc(100% - 36px); border-color: #d1a76c; box-shadow: 0 4px 24px #000c; }
.world-heading { position: absolute; z-index: 2; top: 14px; left: 18px; max-width: 55%; pointer-events: none; text-shadow: 0 2px 6px #050507, 0 0 12px #050507; }
#area-kicker { color: #e3bc83; font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.world-heading h1 { margin: 2px 0; font: normal 25px/1.1 Georgia, serif; color: #f9e9cf; }
#area-progress { color: #dbccba; font-size: 14px; font-weight: 600; }
.notifications { position: absolute; z-index: 4; top: 12px; right: 12px; width: min(300px, 43%); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.notifications > * { padding: 10px 12px; border: 1px solid #a9875e; border-left: 3px solid #d7ad6d; background: linear-gradient(110deg, #29242de8, #12131de8); color: #f5e4ca; box-shadow: 0 6px 20px #000a; font-size: 15px; font-weight: 600; line-height: 1.4; }
.sanctuary {
  position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(630px, calc(100% - 34px)); max-height: calc(100% - 28px); overflow: auto;
  padding: 17px 23px 19px; text-align: center;
  border: 1px solid #a77f508c;
  background: radial-gradient(ellipse at 50% 4%, #553d4080, transparent 50%), linear-gradient(165deg, #272027ed, #11121aeF 72%);
  box-shadow: inset 0 0 0 2px #1b1922, inset 0 0 30px #bb844b20, 0 20px 55px #000d;
  scrollbar-width: thin; scrollbar-color: #826143 transparent;
}
.sanctuary::before { content: ""; position: absolute; z-index: -1; top: 6px; right: 10px; width: 160px; height: 160px; opacity: .11; background: url("../assets/icons/icon.svg?v=650283723d2cc24b") center / contain no-repeat; pointer-events: none; }
.sanctuary h2 { margin: 5px 0; font: normal 28px/1.1 Georgia, serif; color: #f5e4c7; }
.sanctuary p { margin: 4px 0 12px; color: #d4c5b8; font-size: 14px; }
.class-select { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin: 10px 0 12px; }
.class-card { min-width: 0; min-height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 5px 3px; font-size: 14px; }
.class-select img { width: 68px; height: 68px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 4px 7px #000b); }
.class-card[aria-pressed="true"] { color: #ffedc8; border-color: #efca86; box-shadow: inset 0 0 16px #aa723646, 0 0 14px #dba25c4a; }
.class-card strong { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.travel-options { display: flex; justify-content: center; align-items: center; gap: 12px; color: #dfc39c; font-size: 14px; font-weight: 600; }
.travel-options select { min-width: 155px; max-width: 70%; }
.primary { min-width: 185px; margin-top: 12px; padding: 0 17px; border-color: #ad7843; color: #fff0cb; font-weight: 700; letter-spacing: .06em; background: linear-gradient(165deg, #835338, #59312b 55%, #31212a); }
.primary span { margin-left: 8px; color: #f4d393; }
.travel-actions { position: absolute; z-index: 3; left: 50%; bottom: 17px; transform: translateX(-50%); display: flex; justify-content: center; gap: 7px; max-width: calc(100% - 25px); }
.travel-actions button { flex: 0 1 auto; padding: 0 10px; white-space: nowrap; font-size: 14px; }
.pause-overlay { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; background: #09090cc5; backdrop-filter: blur(3px); }
.pause-overlay button { min-width: 150px; }

#inventory-panel {
  position: fixed;
  z-index: 8;
  top: 74px;
  right: 10px;
  bottom: 18px;
  width: min(760px, calc(100vw - 20px));
  padding: 12px;
  border-color: #af8552;
  background: radial-gradient(ellipse at 45% 12%, #4b34387a, transparent 65%),
    linear-gradient(155deg, #22212a, #15151e 65%, #100f16);
  box-shadow: inset 0 0 0 1px #111116, inset 0 0 36px #a76d3830, 0 12px 55px #000e;
}
.inventory-header { flex: none; display: flex; gap: 8px; }
.inventory-header .tabs { flex: 1 1 auto; margin: 0; }
.inventory-tools { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.inventory-tools button { min-width: 0; padding: 0 6px; font-size: 14px; }
#equip-best { border-color: #ad7843; color: #fff0cb; background: linear-gradient(165deg, #674631, #39252c); }
#sale-filter-button[data-auto-sell="true"] { border-color: #d9b77c; color: #ffdf9a; }
#inventory-close { flex: none; width: 44px; padding: 0; font-size: 22px; }
.inventory-content { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.inventory-browser, .inventory-inspector { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.inventory-browser { border: 1px solid #765c444e; background: radial-gradient(ellipse at 50% 25%, #3c303555, transparent 70%), #11131b; }
.inventory-inspector .item-detail { font-size: 15px; line-height: 1.5; padding: 12px; }
.inventory-inspector .affix-row { padding: 7px 0; }
.inventory-browser .items { flex: 1 1 auto; min-height: 0; max-height: none; grid-auto-rows: 72px; padding: 8px; }
.inventory-browser .items button { max-height: none; font-size: 14px; }
.inventory-browser .pagination { padding: 0 0 4px; }
.equipment-body {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 43%, #57493d40, transparent 45%),
    radial-gradient(ellipse at 50% 78%, #713b3940, transparent 46%);
}
.equipment-body::after { content: ""; position: absolute; inset: 12px; border: 1px solid #ab865521; border-radius: 48% 48% 33% 33%; pointer-events: none; }
.equipment-silhouette { position: absolute; inset: 2% 5%; width: 90%; height: 96%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 18px #9f664443); }
.equipment-body .equipment-slot {
  position: absolute; z-index: 1; display: grid; grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: 19px minmax(0, 1fr); align-items: center; width: 132px; height: 60px; min-height: 44px;
  padding: 3px 5px; text-align: left; overflow: hidden; border-color: #846948;
  background: linear-gradient(130deg, #3b3031ec, #1a1b24f5 70%);
  box-shadow: inset 0 1px #e0b98325, 0 2px 12px #000c;
}
.equipment-slot .slot-icon {
  grid-column: 1; grid-row: 1 / 3; width: 28px; height: 28px;
  object-fit: contain; filter: drop-shadow(0 0 3px #d4ad6a87);
}
.equipment-slot .slot-label { grid-column: 2; grid-row: 1; align-self: end; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #d5bf9d; font-size: 13px; }
.equipment-slot .item-name { grid-column: 2; grid-row: 2; align-self: start; font-size: 14px; line-height: 1.4; }
.equipment-slot.empty-slot { color: #a79a8a; border-style: dashed; border-color: #625447; background: #171821e3; }
.equipment-slot.empty-slot .slot-icon { opacity: .55; filter: grayscale(.8) brightness(.7); }
.equipment-slot[aria-pressed="true"] { z-index: 2; border-color: #e2bc82; box-shadow: inset 0 0 0 1px #b18250, 0 0 15px #cf965c7d; }
.equipment-slot[data-slot="head"] { top: 2%; left: 50%; transform: translateX(-50%); }
.equipment-slot[data-slot="amulet"] { top: 16%; right: 0; }
.equipment-slot[data-slot="chest"] { top: 27%; left: 0; }
.equipment-slot[data-slot="hands"] { top: 35%; right: 0; }
.equipment-slot[data-slot="weapon"] { top: 40%; left: 0; }
.equipment-slot[data-slot="ring1"] { top: 52%; left: 0; }
.equipment-slot[data-slot="ring2"] { top: 52%; right: 0; }
.equipment-slot[data-slot="belt"] { top: 65%; left: 50%; transform: translateX(-50%); }
.equipment-slot[data-slot="feet"] { bottom: 2%; left: 50%; transform: translateX(-50%); }
.equipment-slot[data-slot="head"]:active:not(:disabled),
.equipment-slot[data-slot="belt"]:active:not(:disabled),
.equipment-slot[data-slot="feet"]:active:not(:disabled) { transform: translate(-50%, 1px); }

.tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 8px; }
.tabs button { min-width: 0; padding: 0 5px; color: #d0bdac; font-size: 16px; }
.tabs button[aria-selected="true"] { color: #ffe0a5; border-color: #bb905c; background: linear-gradient(160deg, #514034, #2a2327); box-shadow: inset 0 -2px #d8ab68, inset 0 1px #f2d59b38; }
.wealth { flex: none; display: flex; justify-content: space-between; gap: 4px; margin-bottom: 8px; color: #e0c599; font-size: 14px; font-weight: 700; white-space: nowrap; }
.wealth span { overflow: hidden; text-overflow: ellipsis; }
.items { flex: none; min-height: 160px; max-height: 210px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(45px, 1fr); align-content: start; gap: 5px; overflow: hidden; }
.items button { min-width: 0; min-height: 45px; max-height: 66px; padding: 5px 6px; overflow: hidden; text-align: left; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.items .item-button { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; }
.items .slot-icon { flex: none; width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 0 4px #b88b5688); }
.items .item-copy { min-width: 0; }
.item-name, .item-meta { display: block; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.item-name { font-weight: 700; }
.items .item-name { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.item-meta { color: #d3c2ad; font-size: 13px; font-weight: 600; }
.empty-slot { display: grid; place-items: center; border: 1px dashed #645447; color: #9b8f84; background: #11121899; }
.item-button[aria-pressed="true"] { border-color: #d7b37b; box-shadow: inset 0 0 0 1px #9f784b, inset 0 0 15px #ba83403d; }
[data-rarity="common"] { color: #e6dfd4; }
[data-rarity="magic"] { color: #87b8ff; }
[data-rarity="rare"] { color: #f6cf74; }
[data-rarity="legendary"] { color: #f3a05e; }
.pagination { flex: none; display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; color: #d5c6b4; font-size: 14px; font-weight: 700; }
.pagination button { min-height: 44px; width: 44px; padding: 0; font-size: 19px; line-height: 1; }
.item-detail { flex: 1 1 auto; min-height: 45px; padding: 9px 8px; overflow: auto; border: 1px solid #65513e74; background: linear-gradient(145deg, #211e23, #15161d); color: #e0d3bf; font-size: 15px; line-height: 1.4; scrollbar-width: thin; scrollbar-color: #765d45 transparent; }
.detail-icon { float: left; width: 48px; height: 48px; margin: 0 10px 7px 0; object-fit: contain; filter: drop-shadow(0 0 7px #b58c6366); }
.item-detail .affix-row:first-of-type { clear: both; }
.item-detail h3 { margin: 3px 0 5px; color: #e9c689; font-size: 18px; font-weight: 700; }
.item-detail p { margin: 4px 0; }
.detail-name { overflow-wrap: anywhere; }
.detail-meta { color: #d1bfaa; }
.affix-row { padding: 3px 0; border-top: 1px solid #6250436b; color: #e7dac5; font-weight: 600; }
.item-actions { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 7px 0 0; }
.item-actions:empty { display: none; }
.item-actions button { min-width: 0; padding: 0 4px; font-size: 14px; }
.bottom-actions { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.bottom-actions button { min-width: 0; }

.hud {
  min-width: 0; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(280px, 1.4fr) 50px 50px;
  gap: 15px; align-items: center; padding: 10px 18px;
  border-top: 1px solid #946e485e;
  background: linear-gradient(180deg, #18171e, #232029 42%, #11121a);
  box-shadow: inset 0 1px 0 #b68d5740, 0 -6px 18px #08070a9c;
  z-index: 2;
}
.vital, .experience { min-width: 0; }
.vital > span, .experience > span { display: inline-block; margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: #e0c39a; }
.meter { position: relative; height: 23px; overflow: hidden; border: 1px solid #8f705170; border-radius: 2px; background: linear-gradient(#161219, #28202a); box-shadow: inset 0 1px 5px #000b, 0 1px 0 #b08e6640; }
.meter i { display: block; width: 100%; height: 100%; transition: width .15s; }
.meter.health i { background: linear-gradient(180deg, #df7d72, #9c333b 44%, #521725); box-shadow: inset 0 1px #ffc3ad86, 0 0 10px #d22e3873; }
.meter.resource i { background: linear-gradient(180deg, #b0b0e7, #5559a4 48%, #30376f); box-shadow: inset 0 1px #d9d9ff96, 0 0 10px #535ab873; }
.meter.xp { height: 10px; }
.meter.xp i { background: linear-gradient(180deg, #f2d598, #b88a50 55%, #654824); box-shadow: inset 0 1px #ffecc2; }
.meter strong { position: absolute; inset: 0; display: grid; place-items: center; color: #fff7e9; font-size: 14px; text-shadow: 0 1px 3px #000; }
.experience small { display: block; margin-top: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #cdbda9; font-size: 13px; font-weight: 600; }
.potion { position: relative; width: 50px; height: 50px; padding: 0; border-radius: 50%; color: #f4dfb9; font: bold 18px Georgia, serif; background: radial-gradient(circle at 34% 25%, #ad6b68, #722c36 43%, #211b28 75%); }
#resource-potion { background: radial-gradient(circle at 34% 25%, #8995c7, #3b5088 43%, #1b1c2d 75%); }
.potion span { position: absolute; right: -5px; bottom: -5px; min-width: 22px; padding: 2px; border: 1px solid #94704c; border-radius: 50%; background: #1d1a21; font-size: 14px; font-weight: 700; }

#modal { width: min(620px, calc(100vw - 50px)); max-height: calc(100vh - 50px); margin: auto; padding: 0; overflow: hidden; border: 1px solid #b08a58; border-radius: 3px; color: #ebdfce; background: radial-gradient(ellipse at 50% 0%, #483239, #232027 42%, #12131b); box-shadow: inset 0 0 0 3px #24212a, 0 25px 90px #000e; }
#modal::backdrop { background: #08080cdb; backdrop-filter: blur(4px); }
.modal-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 63px; padding: 9px 14px 9px 20px; border-bottom: 1px solid #8565448c; background: linear-gradient(180deg, #332b31, #221d23); }
.modal-heading h2 { margin: 0; font: normal 23px Georgia, serif; color: #f4dbb4; }
#modal-close { min-width: 44px; padding: 0; font-size: 23px; }
#modal-content { max-height: calc(100vh - 115px); padding: 18px 20px 20px; overflow: auto; scrollbar-width: thin; scrollbar-color: #876a4a transparent; line-height: 1.5; }
#modal-content h3 { margin: 4px 0 10px; color: #e9c994; font: normal 17px Georgia, serif; }
#modal-content p { margin: 5px 0 12px; color: #c1b4a5; }
#modal-content button { padding: 0 12px; }
#modal-content label { color: #ddc5a6; font-weight: 700; }
#modal-content select { max-width: 100%; }
#modal-content .modal-row, #modal-content .setting-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; padding: 9px; border: 1px solid #6b533f80; background: #17182099; }
#modal-content .modal-row > *, #modal-content .setting-row > * { min-width: 0; }
#modal-content .modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
#modal-content .modal-grid > * { min-width: 0; }
#modal.confirmation-modal { width: min(520px, calc(100vw - 50px)); border-color: #b89764; }
#modal.confirmation-modal #modal-content { padding: 0; overflow: hidden; }
.return-destination { position: relative; height: 190px; overflow: hidden; border-bottom: 1px solid #94704480; background: radial-gradient(ellipse at center, #49342f, #14151e); }
.return-art { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.return-caption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 20px 24px; background: linear-gradient(transparent 20%, #11121bd9 80%, #11121b); }
.return-kicker { color: #c8ab7e; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.return-caption strong { color: #f5dfbb; font: normal 24px Georgia, serif; text-shadow: 0 2px 12px #000; }
#modal-content .return-description { margin: 0; padding: 22px 24px; color: #d8cabb; font-size: 16px; line-height: 1.7; }
.return-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 0 24px 24px; }
.return-actions button { min-width: 110px; }
.return-confirm { border-color: #bb965c; background: linear-gradient(#765039, #3e2c27); box-shadow: inset 0 1px #eaca8740, 0 3px 12px #0005; }
#death-screen { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #ead9c9; overflow: hidden; text-align: center; }
#death-screen::backdrop { background: radial-gradient(ellipse at 50% 40%, #09060b55, #10050cce 75%, #050408ed); }
.death-heading { position: absolute; top: 10%; left: 15%; right: 15%; text-shadow: 0 3px 18px #000; }
#death-title { margin: 0 0 16px; color: #d79d91; font: normal 44px Georgia, serif; letter-spacing: .18em; }
#death-description { margin: auto; max-width: 620px; line-height: 1.8; color: #d0bdb3; }
#death-return { position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%); min-width: 240px; min-height: 52px; border-color: #ad7f65; background: linear-gradient(#553433, #251b23); box-shadow: 0 0 32px #aa454526; }
#modal-content .setting-row { min-height: 52px; }
#modal-content .setting-toggle { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 16px; font-weight: 700; }
#modal-content .setting-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#modal-content .setting-track { position: relative; flex: none; width: 50px; height: 27px; border: 1px solid #745d45; border-radius: 20px; background: linear-gradient(180deg, #101118, #25232a); box-shadow: inset 0 2px 5px #0009, 0 1px 0 #a8855240; transition: border-color .2s, background .2s, box-shadow .2s; pointer-events: none; }
#modal-content .setting-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: linear-gradient(145deg, #c7b8a0, #716a66); box-shadow: 0 2px 4px #000b, inset 0 1px 0 #fff6; transition: transform .2s, background .2s; }
#modal-content .setting-toggle input:checked + .setting-track { border-color: #dcad69; background: linear-gradient(135deg, #9b6939, #5f432d); box-shadow: inset 0 1px 5px #21160b, 0 0 12px #daa25966; }
#modal-content .setting-toggle input:checked + .setting-track::after { transform: translateX(23px); background: linear-gradient(145deg, #ffedc8, #d6a760); }
#modal-content .setting-toggle input:focus-visible + .setting-track { outline: 2px solid #f7d49a; outline-offset: 3px; }
#modal-content .setting-caption { pointer-events: none; }
#modal-content .item-choice-icon { width: 30px; height: 30px; margin-right: 8px; vertical-align: middle; object-fit: contain; }
#modal-content .affix-choice { display: block; width: 100%; margin-bottom: 6px; text-align: left; white-space: normal; }
#modal-content .affix-choice[aria-pressed="true"] { border-color: #e4ba77; color: #fff0d2; box-shadow: inset 0 0 15px #9f693b68; }
#modal-content .actions, #modal-content .modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#modal-content .actions button, #modal-content .modal-actions button { flex: 1 1 auto; }
#modal-content input[type="range"] { width: min(210px, 100%); }
#modal:has(.shop-layout) { width: min(870px, calc(100vw - 50px)); }
#modal-content:has(.shop-layout) { overflow: hidden; padding: 14px 16px 16px; }
.shop-layout { display: grid; grid-template-columns: minmax(0, 235px) minmax(0, 1fr); gap: 14px; min-height: 0; }
.shop-controls { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#modal-content .shop-controls .modal-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 2px 8px; margin: 0; padding: 7px 8px; }
.shop-controls .modal-row strong { grid-column: 1; font-size: 14px; line-height: 1.2; }
.shop-controls .modal-row small { grid-column: 1; color: #d2b888; font-size: 13px; line-height: 1.25; }
.shop-controls .modal-row button { grid-column: 2; grid-row: 1 / 3; min-width: 44px; padding: 0; }
.shop-gold { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid #977146; color: #f9d994; background: linear-gradient(120deg, #3a2a22, #211d23 70%); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.shop-status { min-height: 50px; padding: 8px 10px; border-left: 2px solid #bd9864; background: linear-gradient(90deg, #4030267d, #191920); color: #f3e1c3; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.gamble-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding: 12px; border: 1px solid #74563d; background: radial-gradient(ellipse at 50% 20%, #5943325c, transparent 57%), linear-gradient(160deg, #292126, #12151c 65%); box-shadow: inset 0 0 0 1px #c5a06d20, inset 0 14px 35px #130e13; }
.gamble-panel > p { margin: 0; text-align: center; font: 17px/1.5 Georgia, serif; color: #d5bb99; }
.gamble-card {
  --relic-glow: #e0ddd092; --relic-edge: #bfb6a2; --relic-flare: #e0ddd044;
  --gamble-reveal-duration: 0s;
  position: relative; isolation: isolate; min-width: 0; overflow: hidden; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px;
  padding: 16px; border: 1px solid var(--relic-edge); border-radius: 4px;
  background: radial-gradient(ellipse at 17% 28%, var(--relic-flare), transparent 50%), linear-gradient(135deg, #28252a, #171922 78%);
  box-shadow: inset 0 0 0 1px #ffffff15, 0 0 23px var(--relic-flare), 0 12px 24px #0009;
  transition: border-color var(--gamble-reveal-duration), box-shadow var(--gamble-reveal-duration), background var(--gamble-reveal-duration);
}
.gamble-card::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .8; background: radial-gradient(ellipse at 18% 38%, var(--relic-glow), transparent 25%); transition: opacity var(--gamble-reveal-duration); }
.gamble-card[data-rarity="magic"] { --relic-glow: #4590dbab; --relic-edge: #7aa9df; --relic-flare: #416ca466; }
.gamble-card[data-rarity="rare"] { --relic-glow: #e5ad55bb; --relic-edge: #e5c178; --relic-flare: #a87a376b; }
.gamble-card[data-rarity="legendary"] { --relic-glow: #ec7934c7; --relic-edge: #f8ad67; --relic-flare: #b7512d8f; }
.gamble-icon { display: block; width: 90px; height: 90px; align-self: start; object-fit: contain; filter: drop-shadow(0 0 12px var(--relic-glow)); transition: filter var(--gamble-reveal-duration), opacity var(--gamble-reveal-duration), transform var(--gamble-reveal-duration); }
.gamble-details { min-width: 0; opacity: 1; transform: translateY(0); transition: opacity var(--gamble-reveal-duration), transform var(--gamble-reveal-duration); overflow-wrap: anywhere; }
.gamble-details .gamble-rarity { display: block; margin: 0 0 3px; color: var(--relic-edge); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
#modal-content .gamble-details h3 { margin: 0 0 5px; color: #fff0d5; font: 20px/1.2 Georgia, serif; text-shadow: 0 1px 10px #000; }
#modal-content .gamble-details .detail-meta { margin: 0 0 8px; font-size: 13px; line-height: 1.35; }
.gamble-details .affix-row { padding: 5px 0; font-size: 14px; line-height: 1.3; }
#modal-content .gamble-no-affixes { margin: 8px 0 0; font-size: 14px; }
.gamble-card.gamble-revealing { border-color: #65594f; background: linear-gradient(135deg, #26232a, #15171e 78%); box-shadow: inset 0 0 0 1px #ffffff0b, 0 12px 24px #0009; }
.gamble-card.gamble-revealing::before { opacity: 0; }
.gamble-card.gamble-revealing .gamble-icon { filter: grayscale(1) brightness(.13) drop-shadow(0 2px 8px #000); transform: scale(.88); }
.gamble-card.gamble-revealing .gamble-details { opacity: 0; transform: translateY(6px); }
.gamble-repeat { align-self: stretch; min-height: 44px; border-color: #c8975a; color: #ffdfad; background: linear-gradient(135deg, #69412c, #33242a 62%, #1b1c25); }
@media (prefers-reduced-motion: reduce) {
  .gamble-card, .gamble-card::before, .gamble-icon, .gamble-details { transition: none; }
  .gamble-card.gamble-revealing .gamble-icon, .gamble-card.gamble-revealing .gamble-details { transform: none; }
}
.sale-group { margin: 0 0 10px; padding: 5px 8px 8px; border: 1px solid #826345; border-radius: 3px; }
.sale-group legend { padding: 0 6px; color: #f1d7ac; font-weight: 700; }
.sale-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
#modal-content .sale-choice { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 6px; font-size: 14px; line-height: 1.25; cursor: pointer; border: 1px solid #66513e; border-radius: 3px; background: linear-gradient(145deg, #30252b, #181a23); }
.sale-choice input { flex: none; width: 18px; height: 18px; margin: 0; }
.sale-choice:has(input:checked) { border-color: #cfa76b; box-shadow: inset 0 0 12px #b6894522; }
.sale-level { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sale-level input { width: 120px; }
.sale-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#modal-content .sale-help { font-size: 14px; line-height: 1.4; margin: 10px 0; }
#modal-content .sale-summary { min-height: 48px; margin: 10px 0; padding: 8px 10px; color: #f8dfb4; font-weight: 700; background: linear-gradient(110deg, #47352d, #231e26); border: 1px solid #886943; border-radius: 3px; }
#auto-sell-toggle[aria-pressed="true"] { border-color: #e2b575; color: #ffe0a4; background: linear-gradient(150deg, #6b482d, #33242c); }
#desktop-warning { display: none; }
#desktop-warning:not(:empty) { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #f4deb5; background: #11121a; font: 23px Georgia, serif; }
.growth-choice { min-width: 0; }
.growth-choice .stat-button { width: 100%; height: 100%; }
.growth-tooltip { position: fixed; z-index: 2; width: min(340px, calc(100vw - 16px)); padding: 12px 15px; border: 1px solid #c5a16a; border-radius: 5px; background: linear-gradient(135deg, #352933, #141620); color: #f5dfba; box-shadow: 0 8px 24px #000b; font-size: 14px; line-height: 1.5; white-space: pre-line; pointer-events: none; }