:root {
  --bg: #0b0c15;
  --fg: #e8e8e8;
  --line: rgba(232, 232, 232, 0.8);
  --dim: rgba(232, 232, 232, 0.4);
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Telegram fullscreen puts its own controls at the top: respect both safe areas */
  --safe-t: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg);
  font: 11px/1.3 var(--mono); touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#fx { pointer-events: none; }
button { font: inherit; color: var(--fg); cursor: pointer; }

#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button, #bag, #altar, #quests { pointer-events: auto; }
.panel { background: rgba(0, 0, 0, 0.74); border: 1px solid var(--line); }

#top { position: absolute; left: 8px; right: 8px; top: calc(var(--safe-t) + 8px); display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
#hud.has-boss #top { top: calc(var(--safe-t) + 26px); }
#me { display: flex; gap: 7px; padding: 4px 8px 5px 5px; }
.portrait { margin: 0; padding-top: 2px; font: 700 9px/0.95 var(--mono); color: #8e97aa; }
#me b { font-size: 11px; }
.row { display: flex; align-items: center; gap: 5px; height: 12px; }
.row span { width: 15px; color: #cfcfcf; }
.row em { font-style: normal; color: #d8d8d8; min-width: 58px; }
.bar { position: relative; display: inline-block; width: 92px; height: 8px; border: 1px solid #c8c8c8; background: #070707; }
.bar u { position: absolute; left: 1px; top: 1px; bottom: 1px; max-width: calc(100% - 2px); background: repeating-linear-gradient(90deg, #dcdcdc 0 2px, transparent 2px 3px); }
#me-lv { margin-top: 1px; color: #d8d8d8; }
#right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#fps { color: #7dff7a; font-size: 10px; text-shadow: 0 0 3px #000; }
#target { padding: 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 140px; white-space: nowrap; }
#target .bar { width: 100%; }

#boss { position: absolute; left: 8px; right: 8px; top: calc(var(--safe-t) + 6px); --seg: 50%; }
.bbar { position: relative; height: 12px; background: #2a0c0a; border: 1px solid #9a9a9a; }
.bbar u { position: absolute; left: 1px; top: 1px; bottom: 1px; max-width: calc(100% - 2px); background: linear-gradient(#e2462f, #a5241a); }
.bbar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(var(--seg) - 1px), #0b0b0b calc(var(--seg) - 1px) var(--seg)); }
#boss-name { position: absolute; left: 0; right: 0; top: 0; text-align: center; font: 700 9px/12px var(--mono); color: #f4f4f4; text-shadow: 0 0 3px #000; }

#wave { position: absolute; left: 10px; top: calc(var(--safe-t) + 74px); color: #c9cfdc; font-size: 10px; letter-spacing: 0.06em; text-shadow: 0 0 3px #000, 0 0 2px #000; }
#hud.has-boss #wave { top: calc(var(--safe-t) + 92px); }

#banner { position: absolute; left: 0; right: 0; top: 28%; text-align: center; opacity: 0; }
#banner b { display: block; font: 700 22px/1.2 var(--mono); letter-spacing: 0.18em; color: #f4f4f4; text-shadow: 0 0 12px rgba(0, 0, 0, 0.95); }
#banner span { display: block; margin-top: 4px; color: #b9c2d6; font-size: 11px; letter-spacing: 0.08em; text-shadow: 0 0 6px #000; }
#banner.show { animation: banner 2.6s ease forwards; }
@keyframes banner { 0% { opacity: 0; transform: translateY(6px); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }

#toast { position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 112px); text-align: center; font-weight: 700; opacity: 0; text-shadow: 0 0 4px #000, 0 0 2px #000; }
#toast.show { animation: toast 2.2s ease forwards; }
@keyframes toast { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

#hurt { position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(210, 25, 10, 0.55); opacity: 0; }
#hurt.show { animation: hurt 0.45s ease-out; }
@keyframes hurt { 0% { opacity: 1; } 100% { opacity: 0; } }

#bottom { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 8px); width: min(calc(100vw - 16px), 520px); }
#xp { position: relative; height: 13px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.78); margin-bottom: 2px; }
#xp u { position: absolute; left: 1px; top: 1px; bottom: 1px; max-width: calc(100% - 2px); background: repeating-linear-gradient(90deg, #c9a23a 0 3px, #6e5517 3px 4px); }
#xp span { position: relative; display: block; text-align: center; font: 700 9px/11px var(--mono); color: #f2f2f2; text-shadow: 0 0 3px #000, 0 0 2px #000; }
#hotbar { display: grid; grid-template-columns: repeat(10, 1fr); border: 1px solid var(--line); background: rgba(0, 0, 0, 0.78); }
.slot { position: relative; height: 48px; padding: 0; border: 0; border-left: 1px solid var(--dim); background: transparent; overflow: hidden; touch-action: none; }
.slot:first-child { border-left: 0; }
.slot b { position: absolute; top: 0; left: 0; right: 0; height: 14px; border-bottom: 1px solid var(--dim); font-size: 10px; line-height: 13px; text-align: center; }
.slot .ico { position: absolute; top: 15px; left: 0; right: 0; bottom: 0; display: grid; place-items: center; font: 700 19px/1 var(--mono); }
.slot .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0, 0, 0, 0.65); }
.slot em { position: absolute; right: 2px; bottom: 2px; font: 700 8px/1 var(--mono); font-style: normal; color: #bdbdbd; }
.slot.locked .ico { opacity: 0.18; }
.slot.nomp .ico { color: #5d6c96 !important; }
.slot.on { box-shadow: inset 0 0 14px rgba(255, 120, 40, 0.8); }
.slot:active { background: rgba(255, 255, 255, 0.08); }

#side { position: absolute; right: 8px; bottom: calc(var(--safe-b) + 80px); display: flex; flex-direction: column; gap: 6px; }
#side button { position: relative; width: 36px; height: 36px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.75); font: 700 13px var(--mono); }
#btn-bag::after { content: ""; display: var(--dot, none); position: absolute; right: 3px; top: 3px; width: 5px; height: 5px; background: #ffd36b; }

#dead { position: absolute; inset: 0; display: grid; place-items: center; font: 700 15px var(--mono); letter-spacing: 0.05em; color: #f0f0f0; text-shadow: 0 0 10px #000; }
#tip { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 80px); width: min(calc(100vw - 24px), 360px); padding: 7px 9px; white-space: pre-line; line-height: 1.45; }

#bag, #altar { position: absolute; left: 8px; right: 8px; top: calc(var(--safe-t) + 8px); bottom: calc(var(--safe-b) + 8px); max-width: 560px; margin: 0 auto; padding: 8px; overflow-y: auto; touch-action: pan-y; background: rgba(3, 4, 8, 0.95); }
#bag header, #altar header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--dim); letter-spacing: 0.12em; }
#bag button, #altar button { border: 1px solid var(--line); background: #000; padding: 5px 9px; }
#equip, #grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; }
.cell { height: 44px; border: 1px solid var(--dim); background: #050508; display: grid; place-items: center; align-content: center; gap: 1px; }
.cell i { font: 700 16px/1 var(--mono); font-style: normal; }
.cell small { font-size: 8px; color: #8a8a8a; }
.cell.r1 { border-color: #7ea6ff; } .cell.r1 i { color: #7ea6ff; }
.cell.r2 { border-color: #ffd36b; } .cell.r2 i { color: #ffd36b; }
.cell.empty { opacity: 0.35; }
#stats { margin: 9px 0; color: #cfcfcf; line-height: 1.55; word-spacing: 2px; }
.sub { display: flex; justify-content: space-between; margin: 9px 0 5px; color: #9a9a9a; letter-spacing: 0.08em; }
#detail { margin-top: 8px; padding: 8px; border: 1px solid var(--dim); }
#detail pre { margin: 6px 0; font: inherit; color: #cfcfcf; }
#detail .row { gap: 6px; height: auto; }
.sk { display: flex; gap: 9px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); line-height: 1.45; }
.sk i { width: 18px; font: 700 18px/1 var(--mono); font-style: normal; }
.sk span { color: #9a9a9a; }
.sk.locked { opacity: 0.45; }

#title {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(11, 12, 21, 0.62), rgba(11, 12, 21, 0.94) 72%);
}
#logo { margin: 0; font: 700 13px/1.05 var(--mono); color: #eef1f8; text-shadow: 0 0 16px rgba(140, 170, 255, 0.4); }
.realm { padding-left: 0.6em; font-weight: 700; letter-spacing: 0.6em; color: #b7c3dd; }
#title p { margin: 0; color: #8f9ab0; }
#begin { margin-top: 18px; padding: 11px 24px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.6); font: 700 13px var(--mono); letter-spacing: 0.15em; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }
#title .how { position: absolute; bottom: calc(var(--safe-b) + 24px); left: 16px; right: 16px; font-size: 10px; }

/* retention HUD */
#buffs { position: absolute; left: 10px; top: calc(var(--safe-t) + 88px); color: #c9d6ff; font-size: 9px; letter-spacing: 0.06em; text-shadow: 0 0 3px #000; }
#quests { position: absolute; left: 10px; top: calc(var(--safe-t) + 102px); white-space: pre; color: #d8dce6; font-size: 9px; line-height: 1.5; text-shadow: 0 0 3px #000, 0 0 2px #000; }
#hud.has-boss #buffs { top: calc(var(--safe-t) + 106px); }
#hud.has-boss #quests { top: calc(var(--safe-t) + 120px); }
#btn-altar { color: #c9d6ff; }
#btn-altar::after { content: ""; display: var(--dot, none); position: absolute; right: 3px; top: 3px; width: 5px; height: 5px; background: #7dff7a; }

/* moon altar */
#altar button:disabled { opacity: 0.45; }
#altar button.primary { border-color: #c9d6ff; color: #fff; background: #10142a; }
#altar button.wide { display: block; width: 100%; margin-top: 8px; padding: 9px; }
#altar a { color: #c9d6ff; }
#altar .dim { color: #8a90a0; }
#altar .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; height: auto; margin-top: 6px; }
.wallet { padding: 2px 0 6px; line-height: 1.6; }
.buff { color: #c9d6ff; border: 1px solid #c9d6ff66; padding: 2px 6px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.day { border: 1px solid var(--dim); padding: 4px 0; display: grid; place-items: center; gap: 2px; background: #050508; }
.day b { font-size: 8px; color: #8a8a8a; }
.day span { font-size: 9px; }
.day i { font: 700 14px/1 var(--mono); font-style: normal; color: #ffd36b; }
.day.got { opacity: 0.4; }
.day.now { border-color: #ffd36b; box-shadow: inset 0 0 10px rgba(255, 211, 107, 0.35); }
.quest { display: grid; grid-template-columns: 1fr 70px 52px auto; align-items: center; gap: 6px; padding: 4px 0; }
.quest .bar { width: 100%; }
.quest em { font-style: normal; color: #cfcfcf; text-align: right; }
.quest.claimed { opacity: 0.45; }
.relics { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
.relic { border: 1px solid var(--dim); background: #050508; padding: 6px 4px; display: grid; justify-items: center; gap: 2px; text-align: center; }
.relic i { font: 700 22px/1.1 var(--mono); font-style: normal; color: #3a3f4c; }
.relic b { font-size: 9px; }
.relic small { font-size: 8px; color: #8a8a8a; }
.relic.ready { border-color: #ffd36b; box-shadow: inset 0 0 12px rgba(255, 211, 107, 0.25); }
.relic.owned { border-color: #7ea6ff; }
.board div { display: grid; grid-template-columns: 34px 1fr auto; padding: 3px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.board em { font-style: normal; color: #cfcfcf; }
.board .me { color: #ffd36b; }
#altar .row span { width: auto; }

/* ---------- souls layer ---------- */
:root { --serif: "Cinzel", "Times New Roman", serif; }
#wave { top: calc(var(--safe-t) + 88px); }
#hud.has-boss #wave { top: calc(var(--safe-t) + 106px); }
#buffs { top: calc(var(--safe-t) + 102px); }
#quests { top: calc(var(--safe-t) + 116px); }
#hud.has-boss #buffs { top: calc(var(--safe-t) + 120px); }
#hud.has-boss #quests { top: calc(var(--safe-t) + 134px); }
#hud #rest { pointer-events: auto; }
.bar.st u { background: repeating-linear-gradient(90deg, #8ee08a 0 2px, transparent 2px 3px); }
#btn-roll { position: absolute; right: 52px; bottom: calc(var(--safe-b) + 80px); width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--line); background: radial-gradient(circle, rgba(40, 46, 64, 0.85), rgba(0, 0, 0, 0.85)); font: 700 11px var(--mono); letter-spacing: 0.1em; }
#btn-roll:active { transform: scale(0.94); background: rgba(80, 90, 120, 0.9); }
#btn-act { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 150px); padding: 10px 18px;
  border: 1px solid #ffb060; background: rgba(30, 14, 4, 0.85); color: #ffd9a0; font: 700 12px var(--serif); letter-spacing: 0.12em;
  box-shadow: 0 0 22px rgba(255, 140, 40, 0.35); animation: pulse 1.8s ease-in-out infinite; }
#note { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 196px); width: min(calc(100vw - 40px), 340px);
  padding: 10px 14px; text-align: center; font: italic 500 13px/1.45 var(--serif); color: #ffd6a0;
  background: linear-gradient(rgba(40, 22, 8, 0.88), rgba(20, 10, 4, 0.9)); border: 1px solid rgba(255, 160, 70, 0.5); box-shadow: 0 0 20px rgba(255, 120, 30, 0.25); }
#rest { position: absolute; left: 8px; right: 8px; top: calc(var(--safe-t) + 60px); max-width: 420px; margin: 0 auto; padding: 10px; max-height: 70vh; overflow-y: auto; background: rgba(8, 5, 2, 0.95); border-color: rgba(255, 176, 96, 0.6); }
#rest header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--dim); font: 600 14px var(--serif); letter-spacing: 0.1em; color: #ffd9a0; }
#rest button { border: 1px solid var(--line); background: #000; padding: 5px 9px; }
#rest .dim { color: #a89a86; font: italic 12px var(--serif); }
#rest-list { display: grid; gap: 6px; }
#rest-list button { text-align: left; padding: 9px 10px; font: 600 12px var(--serif); letter-spacing: 0.06em; }
#rest-list button.here { border-color: #ffb060; color: #ffd9a0; }

#cine { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none; opacity: 0; }
#cine .band { width: 100%; padding: 26px 16px; text-align: center; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.78) 18%, rgba(0, 0, 0, 0.78) 82%, transparent); }
#cine b { display: block; font: 500 clamp(30px, 9vw, 64px)/1.05 var(--serif); letter-spacing: 0.08em; }
#cine span { display: block; margin-top: 10px; font: 500 14px var(--serif); letter-spacing: 0.2em; color: #d8d2c4; }
#cine em { display: block; max-width: 520px; margin: 14px auto 0; font: italic 500 13px/1.5 var(--serif); color: #a8a29a; }
#cine.died { background: radial-gradient(ellipse, rgba(60, 0, 0, 0.25), rgba(0, 0, 0, 0.55)); }
#cine.died b { color: #a8231d; text-shadow: 0 0 28px rgba(160, 20, 10, 0.6); }
#cine.felled b, #cine.ending b { color: #e8c46a; text-shadow: 0 0 26px rgba(232, 180, 80, 0.55); }
#cine.lit b { color: #ffb45a; text-shadow: 0 0 26px rgba(255, 140, 40, 0.6); }
#cine.chapter b { color: #eef1f8; font-size: clamp(22px, 6vw, 40px); }
#cine.chapter span { font-size: clamp(18px, 5vw, 28px); color: #e8c46a; letter-spacing: 0.12em; }
@keyframes cine { 0% { opacity: 0; } 15% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cineIn { 0% { opacity: 0; } 100% { opacity: 1; } }

/* ---------- boot loader ---------- */
#boot { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(ellipse at 50% 40%, #12142a, #05060b 70%); transition: opacity 0.8s ease; }
#boot.done { opacity: 0; pointer-events: none; }
#boot-moon { margin: 0; font: 700 clamp(7px, 2.1vw, 12px)/1 var(--mono); color: #dfe6f5; text-shadow: 0 0 18px rgba(170, 195, 255, 0.45); }
.boot-title { font: 500 clamp(22px, 7vw, 38px) var(--serif); letter-spacing: 0.32em; padding-left: 0.32em; color: #eef1f8; text-shadow: 0 0 22px rgba(140, 170, 255, 0.35); }
#boot-bar { font: 700 11px var(--mono); color: #c9d6ff; letter-spacing: 0.05em; white-space: pre; }
#boot-label { font: 11px var(--mono); color: #8f9ab0; letter-spacing: 0.1em; }
#boot-tip { position: absolute; bottom: calc(var(--safe-b) + 36px); left: 20px; right: 20px; margin: 0; text-align: center; font: italic 500 13px var(--serif); color: #b7aa90; }
#boot-tip.in { animation: tipIn 2.6s ease; }
@keyframes tipIn { 0% { opacity: 0; transform: translateY(4px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- title ---------- */
#title .lore { font: italic 500 13px var(--serif); color: #a99f8c; }
.realm { font-family: var(--serif); font-size: 15px; }
.modes { display: grid; gap: 10px; margin-top: 18px; width: min(300px, calc(100vw - 48px)); }
.modes button { padding: 12px 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.62); text-align: left; display: grid; gap: 4px; }
.modes button b { font: 700 16px var(--serif); letter-spacing: 0.16em; color: #eef1f8; }
.modes button span { font-size: 10px; color: #a8b0c4; }
#play-story { border-color: #e8c46a; box-shadow: 0 0 24px rgba(232, 196, 106, 0.18); }
#play-story b { color: #f1d488; }

/* ---------- inventory ---------- */
#bag .doll { display: grid; grid-template-columns: 64px 1fr 64px; gap: 8px; align-items: center; margin-bottom: 10px; }
#bag .col { display: grid; gap: 8px; }
#bag .figure { display: grid; justify-items: center; gap: 6px; }
#bag .figure pre { margin: 0; font: 700 12px/1.05 var(--mono); color: #8e97aa; text-shadow: 0 0 14px rgba(160, 180, 255, 0.25); }
#doll-b .cell { width: 64px; }
#power { font: 600 12px var(--serif); letter-spacing: 0.12em; color: #e8c46a; }
#bag .cell { position: relative; height: 64px; padding: 0; border: 1px solid rgba(232, 232, 232, 0.25); background: #06070c; display: grid; place-items: center; overflow: hidden; }
#bag .cell img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
#bag .cell small { position: absolute; left: 0; right: 0; bottom: 1px; font-size: 7px; color: #6a7080; text-align: center; letter-spacing: 0.06em; }
#bag .cell:not(.empty) small { display: none; }
#bag .cell.empty i { font: 700 20px var(--mono); color: #2a2e3a; font-style: normal; }
#bag .cell.r1 { border-color: rgba(126, 166, 255, 0.8); box-shadow: inset 0 0 12px rgba(110, 150, 255, 0.25); }
#bag .cell.r2 { border-color: rgba(255, 211, 107, 0.9); box-shadow: inset 0 0 14px rgba(255, 200, 90, 0.3), 0 0 10px rgba(255, 200, 90, 0.15); }
#bag .cell .up { position: absolute; top: 2px; right: 3px; color: #7dff7a; font-size: 10px; text-shadow: 0 0 4px #000; }
#grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important; gap: 6px !important; }
#grid .cell { height: auto !important; aspect-ratio: 1; }
.chips { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px; }
.chip { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 4px; padding: 5px 7px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.025); }
.chip i { font-style: normal; text-align: center; }
.chip span { color: #8a90a0; font-size: 10px; }
.chip b { font-size: 11px; color: #eef1f8; }
.tabs { display: flex; gap: 4px; }
.tabs button { padding: 3px 7px !important; font-size: 10px; opacity: 0.6; }
.tabs button.on { opacity: 1; border-color: #e8c46a !important; color: #f1d488; }
#detail { position: sticky; bottom: 0; background: rgba(4, 5, 10, 0.97); border: 1px solid rgba(232, 196, 106, 0.4) !important; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6); }
#detail .dhead { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
#detail .dhead img { width: 84px; height: 84px; image-rendering: pixelated; border: 1px solid rgba(255, 255, 255, 0.15); }
#detail .dhead b { display: block; font: 600 15px var(--serif); }
#detail .dhead span { font-size: 10px; color: #8a90a0; }
#detail .stat { display: flex; justify-content: space-between; padding: 2px 0; color: #cfcfcf; }
#detail .stat em { font-style: normal; font-weight: 700; }
#detail .up { color: #7dff7a; }
#detail .down { color: #ff6a5a; }
#detail button.primary { border-color: #e8c46a !important; color: #f1d488; }
.sk { align-items: center; }
.sk i { font-size: 26px !important; width: 30px !important; text-align: center; }
.sk b { font-family: var(--serif); font-size: 13px; }
.sk small { color: #8a90a0; }
.sk .bar { display: block; width: 100%; margin: 4px 0; height: 5px; }
.sk .bar u { background: linear-gradient(90deg, #6a7aa8, #c9d6ff); }

/* ---------- combat feel & hub ---------- */
#lowhp { position: fixed; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 70px rgba(170, 10, 10, 0.55); transition: opacity 0.4s; }
#lowhp.on { animation: beat 0.85s ease-in-out infinite; }
@keyframes beat { 0%, 100% { opacity: 0.35; } 18% { opacity: 1; } 40% { opacity: 0.55; } 55% { opacity: 0.9; } }
#boss-name { font-family: var(--serif) !important; font-size: 11px !important; letter-spacing: 0.14em; }
.pbar { position: relative; height: 3px; margin-top: 2px; background: rgba(0, 0, 0, 0.6); }
.pbar u { position: absolute; left: 0; top: 0; bottom: 0; background: #e8c46a; box-shadow: 0 0 6px #e8c46a; }
#boons-hud { position: absolute; right: 10px; top: calc(var(--safe-t) + 58px); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 120px; }
#hud.has-boss #boons-hud { top: calc(var(--safe-t) + 76px); }
#boons-hud i { font: 700 13px var(--mono); font-style: normal; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.6); }
#boonpick { position: absolute; inset: 0; z-index: 20; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: radial-gradient(ellipse, rgba(20, 16, 40, 0.75), rgba(0, 0, 0, 0.9)); }
#boonpick > b { font: 500 20px var(--serif); letter-spacing: 0.14em; color: #e8c46a; text-align: center; }
#boonpick > span { font: italic 12px var(--serif); color: #a8a29a; }
#boon-cards { display: grid; gap: 10px; margin-top: 12px; width: min(340px, calc(100vw - 32px)); }
.boon { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 12px; border: 1px solid var(--c); background: rgba(0, 0, 0, 0.7); box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.04); animation: rise 0.4s ease backwards; }
.boon:nth-child(2) { animation-delay: 0.08s; } .boon:nth-child(3) { animation-delay: 0.16s; }
.boon i { grid-row: span 2; font: 700 30px var(--mono); font-style: normal; text-align: center; }
.boon b { font: 600 14px var(--serif); letter-spacing: 0.08em; color: #eef1f8; }
.boon span { font-size: 10px; color: #b8bcc8; }
.boon:active { transform: scale(0.98); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
#keeper { position: absolute; left: 8px; right: 8px; top: calc(var(--safe-t) + 60px); max-width: 440px; margin: 0 auto; padding: 10px; max-height: 76vh; overflow-y: auto; pointer-events: auto;
  background: rgba(6, 7, 14, 0.96); border-color: rgba(201, 214, 255, 0.5); }
#keeper header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--dim); font: 600 14px var(--serif); letter-spacing: 0.12em; color: #c9d6ff; }
#keeper-line { font: italic 500 13px/1.55 var(--serif); color: #d8d2c4; margin: 10px 2px; }
#keeper button { display: block; width: 100%; text-align: left; margin: 4px 0; padding: 8px 10px; border: 1px solid var(--line); background: #000; }
#keeper button.primary { border-color: #ff9a9a; color: #ffc8c8; }
#keeper button:disabled { opacity: 0.45; }
#keeper header button { display: inline-block; width: auto; margin: 0; padding: 5px 9px; }
#btn-act { white-space: nowrap; }

/* ---------- medieval UI skin: menus are gilded leather, only the world stays ASCII ---------- */
:root {
  --ui: "Alegreya Sans", system-ui, sans-serif;
  --gold: #d9b45a; --gold-hi: #f3d98c; --gold-lo: #7a5a22;
  --ink: #e9dfc8; --ink-dim: #a99a7c;
  --leather: linear-gradient(180deg, rgba(34, 25, 18, 0.96), rgba(16, 11, 8, 0.97));
  --frame: 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(243, 217, 140, 0.12), inset 0 1px 0 rgba(255, 230, 170, 0.18), 0 10px 32px rgba(0, 0, 0, 0.6);
}
html, body { font: 13px/1.35 var(--ui); color: var(--ink); }
.panel, #keeper, #rest, #altar, #bag {
  background: var(--leather); border: 1px solid var(--gold-lo); border-radius: 12px; box-shadow: var(--frame);
}
#bag, #altar { padding: 14px; scrollbar-width: thin; scrollbar-color: var(--gold-lo) transparent; }
#bag header, #altar header, #keeper header, #rest header {
  font: 700 15px var(--serif); letter-spacing: 0.12em; color: var(--gold-hi); text-shadow: 0 1px 0 #000, 0 0 14px rgba(217, 180, 90, 0.25);
  border-bottom: 0; padding-bottom: 10px; margin-bottom: 12px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent) bottom / 100% 1px no-repeat;
}
.sub { margin: 16px 0 8px; font: 700 12px var(--serif); letter-spacing: 0.1em; color: var(--gold); }
.sub span:last-child { font: 500 12px var(--ui); letter-spacing: 0; color: var(--ink-dim); }
.dim, #altar .dim { color: var(--ink-dim); }
#altar a { color: var(--gold-hi); }

/* buttons */
#bag button, #altar button, #rest button, #keeper button, .modes button {
  border: 1px solid var(--gold-lo); border-radius: 8px; color: var(--ink);
  background: linear-gradient(180deg, #3a2a1c, #1e150e); box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.15), 0 2px 6px rgba(0, 0, 0, 0.5);
  font: 600 12px var(--ui); letter-spacing: 0.04em; transition: filter 0.15s, transform 0.1s;
}
#bag button:hover, #altar button:hover, #rest button:hover, #keeper button:hover, .modes button:hover { filter: brightness(1.2); }
#bag button:active, #altar button:active, #rest button:active, #keeper button:active { transform: translateY(1px); }
#altar button.primary, #detail button.primary, #keeper button.primary {
  border-color: var(--gold) !important; color: #2a1b08 !important; font-weight: 700;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #a8802e);
}
.tabs button { border-radius: 999px !important; padding: 3px 10px !important; }
.tabs button.on { background: linear-gradient(180deg, #4a3620, #2a1d10); border-color: var(--gold) !important; color: var(--gold-hi); }

/* tiles */
#bag .cell, .day, .relic, .chip, #detail {
  border: 1px solid rgba(217, 180, 90, 0.18); border-radius: 10px;
  background: radial-gradient(circle at 50% 30%, rgba(80, 60, 40, 0.35), rgba(10, 7, 5, 0.85));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
#bag .cell.empty { opacity: 0.75; }
#bag .cell.empty i { color: #5e4d36; font-family: var(--serif); }
#bag .cell small { font: 500 9px var(--ui); color: #6f6250; text-transform: capitalize; }
#bag .cell.r1 { border-color: rgba(126, 166, 255, 0.7); }
#bag .cell.r2 { border-color: var(--gold); }
#bag .figure pre { color: #b9a78a; text-shadow: 0 0 14px rgba(217, 180, 90, 0.2); }
#power { font-size: 14px; color: var(--gold-hi); }
.chip { padding: 8px 10px; }
.chip span { font-size: 12px; color: var(--ink-dim); }
.chip b { font-size: 13px; color: var(--ink); }
#detail { background: linear-gradient(180deg, rgba(40, 29, 20, 0.98), rgba(18, 12, 8, 0.99)); border-color: var(--gold-lo) !important; }
#detail .dhead img { border-radius: 8px; border-color: var(--gold-lo); }
.sk { padding: 10px 0; border-top: 1px solid rgba(217, 180, 90, 0.12); }
.sk b { color: var(--gold-hi); font-size: 14px; }
.sk span, .sk small { color: var(--ink-dim); }

/* altar */
.cal { gap: 6px; }
.day { padding: 8px 0; gap: 3px; }
.day b { font: 700 10px var(--serif); color: var(--ink-dim); }
.day span { font-size: 12px; }
.day.now { border-color: var(--gold); box-shadow: inset 0 0 14px rgba(217, 180, 90, 0.35), 0 0 12px rgba(217, 180, 90, 0.2); }
.buff { border-radius: 999px; border-color: rgba(217, 180, 90, 0.5); color: var(--gold-hi); padding: 2px 10px; }
.quest { grid-template-columns: 1fr 90px 52px auto; padding: 6px 0; }
.relics { gap: 6px; }
.relic { padding: 10px 6px; gap: 4px; }
.relic b { font: 700 11px var(--serif); letter-spacing: 0.04em; }
.relic small { font-size: 10px; color: var(--ink-dim); }
.relic.owned { border-color: var(--gold); box-shadow: inset 0 0 16px rgba(217, 180, 90, 0.25); }
.relic.ready { border-color: #9fd6a0; }
.board div { padding: 6px 2px; border-top: 1px solid rgba(217, 180, 90, 0.1); }
.board b { font-family: var(--serif); color: var(--gold); }

/* bars: smooth and rounded instead of terminal dashes */
.bar, .bbar, #xp { border: 1px solid rgba(0, 0, 0, 0.9); border-radius: 999px; background: rgba(0, 0, 0, 0.65); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(217, 180, 90, 0.35); overflow: hidden; }
.bar u, .bbar u, #xp u { left: 0; top: 0; bottom: 0; max-width: 100%; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.bar u { background: linear-gradient(180deg, #e9d9b4, #9c8a66); }
#hp-fill, #t-fill { background: linear-gradient(180deg, #ff6b5a, #b3221a) !important; }
#mp-fill { background: linear-gradient(180deg, #7fb2ff, #2f5fc4) !important; }
.bar.st u { background: linear-gradient(180deg, #a6ec9a, #3f9a3a); }
.quest .bar u, .sk .bar u { background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); }
.bar { height: 9px; }
.bbar { height: 14px; }
.bbar::after { opacity: 0.5; }
#xp { height: 16px; margin-bottom: 6px; }
#xp u { background: linear-gradient(180deg, var(--gold-hi), #a8802e); }
#xp span, #boss-name { font: 700 10px/14px var(--serif) !important; letter-spacing: 0.1em; color: #fff7e0; }

/* top-left status */
#me { padding: 6px 10px 7px 8px; gap: 9px; }
#me b { font: 700 12px var(--serif); color: var(--gold-hi); letter-spacing: 0.06em; }
.row { height: 15px; }
.row span { font: 700 10px var(--serif); color: var(--gold); }
.row em { font-size: 11px; color: var(--ink); }
#me-lv { font-size: 11px; color: var(--ink-dim); }
.portrait { position: static; flex: none; width: 48px; height: 56px; padding: 0; image-rendering: pixelated; border: 1px solid var(--gold-lo); border-radius: 8px; background: radial-gradient(circle at 50% 40%, #2a2016, #0a0705); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8); }
#target { border-radius: 10px; padding: 6px 12px; font-family: var(--serif); color: #ffd8cc; }
#buffs, #quests { font-family: var(--ui); font-size: 11px; color: var(--ink); }
#wave { font: 700 12px var(--serif); color: var(--gold-hi); }
#tip { border-radius: 10px; font-size: 13px; }

/* hotbar: separate gilded sockets */
#hotbar { gap: 4px; border: 0; background: none; }
.slot { height: 52px; border: 1px solid var(--gold-lo) !important; border-radius: 10px;
  background: radial-gradient(circle at 50% 35%, rgba(70, 52, 34, 0.9), rgba(12, 8, 6, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.15), 0 3px 8px rgba(0, 0, 0, 0.55); }
.slot b { top: 3px; left: 5px; right: auto; height: auto; border: 0; font: 700 9px var(--serif); color: var(--ink-dim); }
.slot .ico { top: 0; font-size: 22px; }
.slot em { font: 700 9px var(--ui); color: var(--ink-dim); }
.slot.on { border-color: #ff9a40 !important; box-shadow: inset 0 0 16px rgba(255, 120, 40, 0.7), 0 0 10px rgba(255, 120, 40, 0.35); }
.slot .cd { border-radius: 0 0 10px 10px; }

/* side medallions */
#side button, #btn-roll { border: 1px solid var(--gold) !important; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #4a3622, #140d08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.25), 0 0 0 2px rgba(0, 0, 0, 0.7), 0 4px 10px rgba(0, 0, 0, 0.6); color: var(--gold-hi); }
#side button { width: 42px; height: 42px; font: 700 15px var(--serif); }
#btn-roll { font: 700 12px var(--serif); letter-spacing: 0.12em; }
#boons-hud i { border-radius: 6px; border-color: var(--gold-lo); }

/* title & dialogs */
.modes button { padding: 14px 16px; border-radius: 12px; }
.modes button span { font-size: 12px; color: var(--ink-dim); }
.boon { border-radius: 12px; background: var(--leather); }
.boon span { font-size: 12px; color: var(--ink-dim); }
#note { border-radius: 12px; }
#rest-list button, #keeper button { font-family: var(--ui); font-size: 13px; }

/* svg icons */
.ic { display: block; width: 1em; height: 1em; overflow: visible; filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 45%, transparent)); }
.slot .ico { font-size: 28px; }
.slot.locked .ico { opacity: 0.25; filter: grayscale(1); }
.sk i { font-size: 30px !important; display: grid; place-items: center; }
.sk.locked i { filter: grayscale(1); }
.chip i { font-size: 16px; display: grid; place-items: center; }
#bag .cell.empty i { font-size: 30px; color: #5e4d36; }
#bag .cell.empty .ic { filter: none; opacity: 0.7; }
.relic i { font-size: 34px; height: 36px; display: grid; place-items: center; }
.relic.locked .ic { filter: grayscale(1) brightness(0.6); opacity: 0.5; }
.day i { font-size: 20px; }
.day.got .ic { filter: grayscale(0.6); }
.boon i { font-size: 38px; display: grid; place-items: center; }
#boons-hud i { font-size: 15px; }
#side button { display: grid; place-items: center; font-size: 20px; }

/* responsive: wide desktops, narrow phones, and short landscape screens */
#bag, #altar { width: min(100% - 16px, 640px); max-width: none; }
#fps { white-space: nowrap; }
@media (min-width: 900px) {
  #bottom { width: min(calc(100vw - 32px), 640px); }
  .slot { height: 60px; }
  .slot .ico { font-size: 32px; }
  #side { right: 16px; }
  #side button { width: 48px; height: 48px; font-size: 24px; }
  #btn-roll { width: 76px; height: 76px; right: 76px; }
}
@media (max-width: 360px) {
  .slot { height: 44px; border-radius: 8px; }
  .slot .ico { font-size: 22px; }
  .slot b { font-size: 8px; }
  .bar { width: 72px; }
  #me { padding: 5px 7px; gap: 6px; }
  .portrait { width: 38px; height: 44px; }
  .cal { gap: 3px; }
  .day span { font-size: 10px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #bottom { width: min(calc(100vw - 290px), 560px); }
  .slot { height: 40px; }
  .slot .ico { font-size: 20px; }
  #xp { height: 13px; margin-bottom: 3px; }
  #side { flex-direction: row; bottom: calc(var(--safe-b) + 8px); right: 8px; }
  #side button { width: 36px; height: 36px; font-size: 17px; }
  #btn-roll { width: 54px; height: 54px; right: 8px; bottom: calc(var(--safe-b) + 52px); }
  #bag, #altar { top: calc(var(--safe-t) + 4px); bottom: calc(var(--safe-b) + 4px); }
  #bag .doll { grid-template-columns: 56px 1fr 56px; }
  #bag .cell { height: 56px; }
  #btn-act { bottom: calc(var(--safe-b) + 66px); }
  #note { bottom: calc(var(--safe-b) + 110px); }
}