/* Residue — adventure RPG HUD: dark leather panels, gilt trims, Cinzel titles. */
:root {
  --bg: #120e0a;
  --panel: rgba(22, 17, 12, 0.82);
  --panel-2: rgba(36, 28, 20, 0.9);
  --gold: #c9a45c;
  --gold-hi: #f0d28a;
  --gold-lo: #7a6136;
  --ink: #efe3c8;
  --ink-soft: #b9a888;
  --dim-c: #8f8068;
  --hp: #c0392b;
  --hp-hi: #ff7a5c;
  --mp: #2f6fd0;
  --mp-hi: #7fc0ff;
  --good: #8fd06a;
  --warn: #f0c050;
  --bad: #ff6a5a;
  --ley: #7fd8ec;
  --font: "Alegreya Sans", system-ui, sans-serif;
  --title: "Cinzel", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font: 15px/1.35 var(--font); user-select: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui .frame, #ui button, #ui .overlay, #ui .prompt, #ui .touchbar, #ui select, #ui input, #ui .hotbar, #ui canvas { pointer-events: auto; }
.dim { color: var(--dim-c); font-size: 0.82rem; }
.bad { color: var(--bad); } .warn { color: var(--warn); }
.success { color: var(--good); } .weakened { color: var(--warn); } .fizzle, .backlash, .surge { color: var(--bad); }
h2, h3 { font-family: var(--title); font-weight: 700; letter-spacing: 0.06em; margin: 0 0 0.5rem; color: var(--gold-hi); }
h2 { font-size: 1.35rem; } h3 { font-size: 1.05rem; }

/* gilt frame: dark fill, double gold rule, corner studs.
   When `html.ui-skinned` (assets/ui/manifest.json present), panels switch to
   border-image 9-slice via --ui-* custom properties set by applyUiManifest(). */
.frame, .overlay, .prompt, .hotbar, .toast, .card, #loading, .d-bar, .d-modal, .d-settings {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--gold-lo);
  box-shadow: inset 0 0 0 1px rgba(240, 210, 138, 0.12), inset 0 0 0 3px rgba(0, 0, 0, 0.35), inset 0 0 0 4px rgba(201, 164, 92, 0.35), 0 8px 24px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
}
.frame { padding: 0.55rem 0.8rem; position: relative; }
html.ui-skinned .frame.player-frame,
html.ui-skinned .overlay,
html.ui-skinned .prompt,
html.ui-skinned .d-modal,
html.ui-skinned .d-settings {
  background: transparent;
  border-style: solid;
  border-width: var(--ui-panel-width, 12px);
  border-image-source: var(--ui-panel, none);
  border-image-slice: var(--ui-panel-slice, 12) fill;
  border-image-width: var(--ui-panel-width, 12px);
  border-image-repeat: stretch;
  box-shadow: none;
  border-radius: 0;
}
html.ui-skinned .hotbar,
html.ui-skinned .d-bar {
  background: transparent;
  border-style: solid;
  border-width: var(--ui-slot-width, 8px);
  border-image-source: var(--ui-panel-glass, var(--ui-panel, none));
  border-image-slice: var(--ui-panel-glass-slice, var(--ui-panel-slice, 8)) fill;
  border-image-width: var(--ui-slot-width, 8px);
  border-image-repeat: stretch;
  box-shadow: none;
}
html.ui-skinned .slot,
html.ui-skinned .d-slot {
  background: transparent;
  border-style: solid;
  border-width: var(--ui-slot-width, 6px);
  border-image-source: var(--ui-slot-normal, none);
  border-image-slice: var(--ui-slot-normal-slice, 6) fill;
  border-image-width: var(--ui-slot-width, 6px);
  border-image-repeat: stretch;
  box-shadow: none;
  border-radius: 0;
}
html.ui-skinned .slot.sel,
html.ui-skinned .d-slot.sel { border-image-source: var(--ui-slot-selected, var(--ui-slot-normal, none)); }
html.ui-skinned .slot:hover,
html.ui-skinned .d-slot:hover { border-image-source: var(--ui-slot-hover, var(--ui-slot-normal, none)); }
html.ui-skinned .slot.dry,
html.ui-skinned .d-slot.dry { border-image-source: var(--ui-slot-disabled, var(--ui-slot-normal, none)); }
html.ui-skinned .bar {
  border-style: solid;
  border-width: var(--ui-bar-width, 4px);
  border-image-source: var(--ui-bar-frame, none);
  border-image-slice: var(--ui-bar-frame-slice, 4) fill;
  border-image-width: var(--ui-bar-width, 4px);
  background: transparent;
  box-shadow: none;
}
.overlay::before, .prompt::before, .frame.player-frame::before {
  content: ""; position: absolute; inset: 4px; pointer-events: none; border-radius: 3px;
  background:
    radial-gradient(circle at 0 0, var(--gold) 2px, transparent 3px) top left / 10px 10px no-repeat,
    radial-gradient(circle at 100% 0, var(--gold) 2px, transparent 3px) top right / 10px 10px no-repeat,
    radial-gradient(circle at 0 100%, var(--gold) 2px, transparent 3px) bottom left / 10px 10px no-repeat,
    radial-gradient(circle at 100% 100%, var(--gold) 2px, transparent 3px) bottom right / 10px 10px no-repeat;
}

/* ---------- loading ---------- */
#loading { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(26rem, calc(100vw - 2rem)); margin: 0; padding: 1.6rem 1.5rem; white-space: pre-wrap; text-align: center; font: 1rem/1.5 var(--font); color: var(--ink-soft); }
#loading::before { content: "Residue"; display: block; font: 900 2.6rem/1 var(--title); letter-spacing: 0.12em; color: var(--gold-hi); text-shadow: 0 2px 0 #000; margin-bottom: 0.5rem; }
#loading[hidden] { display: none; }

/* ---------- player frame ---------- */
.player-frame { position: absolute; top: 0.9rem; left: 0.9rem; display: flex; gap: 0.7rem; align-items: center; width: 22rem; max-width: calc(100vw - 1.8rem); padding: 0.6rem 0.9rem 0.6rem 0.6rem; }
.portrait { width: 4.4rem; height: 4.4rem; flex: none; filter: drop-shadow(0 2px 4px #000); }
.frame-body { flex: 1; min-width: 0; }
.pname { font: 700 1.05rem var(--title); letter-spacing: 0.06em; color: var(--gold-hi); }
.ptitle { font-size: 0.78rem; color: var(--ink-soft); text-transform: capitalize; margin-bottom: 0.25rem; }
.bar { position: relative; height: 0.95rem; background: #0a0705; border: 1px solid #000; box-shadow: inset 0 1px 3px #000, 0 0 0 1px var(--gold-lo); border-radius: 2px; margin: 0.22rem 0; overflow: hidden; }
.bar .chip { position: absolute; inset: 0 auto 0 0; width: 100%; background: rgba(255, 210, 180, 0.45); transition: none; pointer-events: none; z-index: 0; }
.bar.pool .chip { background: rgba(140, 190, 255, 0.4); }
.bar.xp .chip { background: rgba(240, 210, 138, 0.35); }
.bar .fill { position: absolute; inset: 0 auto 0 0; transition: width 0.12s ease; z-index: 1; }
.bar .fill::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent); }
.bar.hp .fill { background: linear-gradient(90deg, #6a1410, var(--hp), var(--hp-hi)); }
.bar.pool .fill { background: linear-gradient(90deg, #102a6a, var(--mp), var(--mp-hi)); }
.bar span { position: relative; z-index: 2; display: block; text-align: center; font: 800 0.7rem/0.95rem var(--font); letter-spacing: 0.04em; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; font-variant-numeric: tabular-nums; }
.bar.shake { animation: barShake 0.32s ease-out; }
@keyframes barShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.ward { color: var(--gold-hi); font-size: 0.75rem; font-weight: 700; }
.inv { display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem; font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.15rem; }
.inv .taint { color: #c9a0e8; }

/* ---------- zone banner ---------- */
.zone-banner { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; transition: opacity 0.4s; }
.zname { white-space: nowrap; font: 900 clamp(1.4rem, 3.2vw, 2.6rem)/1 var(--title); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 2px 0 #000, 0 0 18px rgba(0,0,0,0.8); }
.zname::before, .zname::after { content: ""; display: inline-block; width: 3.5rem; height: 1px; margin: 0 1rem; vertical-align: middle; background: linear-gradient(90deg, transparent, var(--gold)); }
.zname::after { background: linear-gradient(90deg, var(--gold), transparent); }
.zsub { margin-top: 0.4rem; font: 500 0.95rem var(--title); letter-spacing: 0.2em; color: var(--ink); text-shadow: 0 1px 3px #000; }

/* ---------- target frame ---------- */
.target-frame { position: absolute; top: 0.9rem; left: 50%; transform: translateX(-50%); width: 17rem; text-align: center; padding: 0.4rem 0.8rem 0.5rem; }
.tname { font: 700 0.95rem var(--title); letter-spacing: 0.05em; color: var(--ink); }
.tname.hostile { color: var(--bad); }
.tsub { font-size: 0.72rem; color: var(--dim-c); text-transform: capitalize; }

/* ---------- minimap cluster ---------- */
.map-box { position: absolute; top: 0.9rem; right: 0.9rem; width: 13.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.minimap { width: 11.9rem; height: 11.9rem; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 0 2px #000, 0 0 0 5px var(--gold-lo), 0 8px 20px #000; background: #1a140e; }
.compass { position: absolute; top: 0; left: 50%; width: 11.9rem; height: 11.9rem; margin-left: -5.95rem; pointer-events: none; }
.compass span { position: absolute; font: 700 0.75rem var(--title); color: var(--gold-hi); text-shadow: 0 1px 2px #000; width: 1.2rem; height: 1.2rem; line-height: 1.2rem; text-align: center; border-radius: 50%; background: #1a120c; border: 1px solid var(--gold-lo); }
.compass .c-N { top: 2px; left: 50%; } .compass .c-S { bottom: -16px; left: 50%; }
.compass .c-E { top: 50%; right: -16px; } .compass .c-W { top: 50%; left: 2px; }
.status { width: 100%; text-align: center; padding: 0.35rem 0.6rem; font-size: 0.78rem; }
.status .date { font: 700 0.8rem var(--title); letter-spacing: 0.06em; color: var(--gold-hi); }
.banner { margin-top: 0.3rem; color: var(--ley); font-size: 0.75rem; }
.w-gauge { width: 100%; }
.g-track { position: relative; height: 0.5rem; background: #0a0705; border: 1px solid var(--gold-lo); border-radius: 2px; overflow: hidden; }
.g-track i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(240,210,138,0.6); z-index: 2; }
.g-fill { position: absolute; inset: 0 auto 0 0; transition: width 0.3s; }
.g-label { text-align: center; font-size: 0.78rem; margin-top: 0.15rem; text-shadow: 0 1px 2px #000; }
.g-label b { font-family: var(--title); color: var(--ink); }

/* ---------- quest tracker ---------- */
.goals { position: absolute; top: 21.2rem; right: 0.9rem; width: 15rem; padding: 0.5rem 0.75rem; background: linear-gradient(90deg, transparent, rgba(18,14,10,0.75) 20%); border: none; box-shadow: none; text-align: right; }
.ghead { font: 700 0.85rem var(--title); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--gold-lo); padding-bottom: 0.2rem; margin-bottom: 0.3rem; }
.quest { margin-bottom: 0.35rem; }
.qtitle { font: 700 0.85rem var(--title); color: var(--gold-hi); text-shadow: 0 1px 2px #000; }
.qstep { font-size: 0.78rem; color: var(--ink); text-shadow: 0 1px 2px #000; }

/* ---------- skill bar ---------- */
.hotbar { position: absolute; left: 50%; bottom: 0.9rem; transform: translateX(-50%); display: flex; gap: 0.3rem; padding: 0.45rem 0.55rem; max-width: calc(100vw - 1rem); overflow-x: auto; }
.slot { position: relative; width: 3.6rem; height: 3.6rem; flex: none; padding: 0; cursor: pointer; border-radius: 4px; background: #0d0a07; border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--gold-lo), inset 0 0 12px #000; overflow: hidden; transition: transform 0.1s; }
.slot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.slot:hover { transform: translateY(-2px); }
.slot.press { transform: scale(0.86); }
.slot.sel { box-shadow: inset 0 0 0 2px var(--gold-hi), 0 0 12px rgba(240, 210, 138, 0.55); }
.slot .cd {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: conic-gradient(from -90deg, rgba(0, 0, 0, 0.72) calc(var(--cd, 0) * 1%), transparent 0);
}
.slot.dry svg { filter: grayscale(0.8) brightness(0.5); }
.slot.empty { opacity: 0.5; }
.slot .key { position: absolute; top: 1px; left: 3px; font: 800 0.72rem var(--title); color: var(--gold-hi); text-shadow: 0 1px 2px #000; }
.slot .cost { position: absolute; bottom: 1px; right: 3px; font: 800 0.72rem var(--font); color: var(--mp-hi); text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.slot .pip { position: absolute; bottom: 4px; left: 4px; width: 0.45rem; height: 0.45rem; border-radius: 50%; box-shadow: 0 0 4px currentColor; background: currentColor; }
.pip.success { color: var(--good); } .pip.weakened { color: var(--warn); } .pip.fizzle, .pip.backlash, .pip.surge { color: var(--bad); } .pip.none { color: #555; }
.slot-tip { position: absolute; left: 50%; bottom: 5.4rem; transform: translateX(-50%); font-size: 0.8rem; padding: 0.3rem 0.8rem; text-align: center; white-space: nowrap; max-width: calc(100vw - 1rem); overflow: hidden; text-overflow: ellipsis; }
.slot-tip b { font-family: var(--title); color: var(--gold-hi); }
.castbar { position: absolute; left: 50%; bottom: 10.3rem; transform: translateX(-50%); width: min(22rem, 80vw); height: 1.1rem; background: #0a0705; border: 1px solid var(--gold-lo); box-shadow: 0 0 0 1px #000, 0 4px 12px #000; border-radius: 2px; }
.castbar .cfill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3a6ad0, #8fd0ff); }
.castbar.is-haste .cfill { background: linear-gradient(90deg, #8a2a1a, #ff7a4a); }
.castbar.is-ritual .cfill { background: linear-gradient(90deg, #a07a20, #ffe08a); box-shadow: 0 0 12px #ffe08a; }
.castbar .cmark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--gold-hi); }
.castbar span { position: absolute; inset: 0; text-align: center; font: 800 0.72rem/1.1rem var(--font); color: #fff; text-shadow: 0 1px 2px #000; }
.hint { position: absolute; left: 50%; bottom: 8.5rem; transform: translateX(-50%); white-space: nowrap; font: 700 0.8rem var(--title); letter-spacing: 0.04em; color: var(--ink); text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.hint.act { color: var(--gold-hi); }
.hint.act::before { content: "F"; display: inline-block; width: 1.3rem; height: 1.3rem; margin-right: 0.4rem; line-height: 1.3rem; text-align: center; border: 1px solid var(--gold); border-radius: 3px; background: #1a120c; }

/* ---------- the sum ---------- */
.calc { position: absolute; left: 0.9rem; bottom: 6rem; margin: 0; max-width: min(36rem, calc(100vw - 2rem)); white-space: pre-wrap; font: 0.76rem/1.55 var(--mono); color: var(--ink); background: var(--panel); border: 1px solid var(--gold-lo); padding: 0.6rem 0.8rem; border-radius: 4px; }

/* ---------- toasts: a log feed, left ---------- */
.toasts { position: absolute; left: 0.9rem; top: 9.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; max-width: 24rem; }
.toast { background: rgba(18, 14, 10, 0.72); border: none; box-shadow: none; border-left: 2px solid var(--gold); border-radius: 0; padding: 0.15rem 0.6rem; font-size: 0.82rem; color: var(--ink); text-shadow: 0 1px 2px #000; }
.toast.place { font: 700 0.95rem var(--title); color: var(--gold-hi); }
.toast.warn { border-left-color: var(--warn); color: var(--warn); } .toast.bad { border-left-color: var(--bad); color: #ffb0a6; }

/* ---------- dialogs ---------- */
.prompt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(28rem, calc(100vw - 2rem)); max-height: min(80vh, 40rem); overflow-y: auto; padding: 1.1rem 1.3rem 1.2rem; }
.prompt { box-shadow: 0 0 0 100vmax rgba(0,0,0,0.45), inset 0 0 0 1px rgba(240,210,138,0.12), inset 0 0 0 4px rgba(201,164,92,0.35), 0 8px 24px #000; }
.prompt h3 { text-align: center; border-bottom: 1px solid var(--gold-lo); padding-bottom: 0.4rem; }
.prompt p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; }
.choice { display: block; width: 100%; text-align: left; margin-top: 0.4rem; padding: 0.5rem 0.9rem; border-radius: 3px; border: 1px solid var(--gold-lo); background: linear-gradient(180deg, #2c2218, #1a140e); color: var(--ink); font: 700 0.92rem var(--font); cursor: pointer; transition: border-color 0.1s, background 0.1s; }
.choice:hover { border-color: var(--gold-hi); background: linear-gradient(180deg, #3a2c1e, #241a12); }
.choice.act { border-color: var(--gold); color: var(--gold-hi); }
.choice.bad { color: #ffb0a6; }
.choice.dim { color: var(--dim-c); background: transparent; }
.choice:disabled { opacity: 0.4; cursor: not-allowed; }
.note { font-size: 0.8rem; color: var(--dim-c); padding: 0.15rem 0.9rem 0; }
.note.today { color: var(--ley); }
.buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; } .buttons .choice { width: auto; }
.bark { position: absolute; left: 50%; bottom: 11.2rem; transform: translateX(-50%); width: min(30rem, calc(100vw - 2rem)); font-size: 0.86rem; }
.bark b { font-family: var(--title); color: var(--gold-hi); }

/* ---------- full overlays ---------- */
.overlay { position: absolute; inset: 6vh 8vw; overflow: auto; padding: 1.3rem 1.6rem; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.55), inset 0 0 0 1px rgba(240,210,138,0.12), inset 0 0 0 4px rgba(201,164,92,0.35), 0 8px 24px #000; }
.overlay h2 { text-align: center; border-bottom: 1px solid var(--gold-lo); padding-bottom: 0.5rem; }
.overlay p { color: var(--ink-soft); line-height: 1.5; }
.overlay table { border-collapse: collapse; }
.overlay td, .overlay th { padding: 0.25rem 0.9rem 0.25rem 0; text-align: left; vertical-align: top; }
.overlay th { color: var(--gold); font: 700 0.8rem var(--title); }
.overlay td.key { color: var(--gold-hi); font-weight: 800; white-space: nowrap; }
.overlay tr.me td { color: var(--ley); } .overlay tr.nearest td { font-weight: 800; color: var(--gold-hi); }
.bigmap { width: 100%; max-width: 56rem; height: auto; border: 2px solid var(--gold-lo); cursor: pointer; display: block; margin: 0 auto; }
.events { font: 0.78rem/1.55 var(--mono); color: var(--ink-soft); }

/* ---------- book ---------- */
.book-head { display: flex; align-items: center; justify-content: center; position: relative; }
.book-head h2 { border: none; }
.book-close { position: absolute; right: 0; top: 0; width: auto; margin: 0; padding: 0.2rem 0.7rem; }
.tab-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; margin: 0.2rem 0 0.9rem; border-bottom: 1px solid var(--gold-lo); }
.tab-btn { font: 700 0.85rem var(--title); letter-spacing: 0.05em; cursor: pointer; border: 1px solid var(--gold-lo); border-bottom: none; background: #1a140e; color: var(--ink-soft); border-radius: 4px 4px 0 0; padding: 0.35rem 1rem; white-space: nowrap; }
.tab-btn[aria-selected='true'] { background: linear-gradient(180deg, #4a3820, #2a2016); color: var(--gold-hi); border-color: var(--gold); }
.card .tab-btn { border-bottom: 1px solid var(--gold-lo); border-radius: 3px; padding: 0.2rem 0.7rem; font-size: 0.75rem; margin-top: 0.35rem; }
.card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.55rem; }
.card { padding: 0.6rem 0.85rem; font-size: 0.85rem; border-radius: 4px; }
.card.is-locked { opacity: 0.55; filter: grayscale(0.5); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-bottom: 0.2rem; }
.card-head b { font: 700 0.95rem var(--title); color: var(--gold-hi); margin-right: 0.2rem; }
.chip { font-size: 0.68rem; font-weight: 800; padding: 0.02rem 0.5rem; border-radius: 2px; background: #2a2016; border: 1px solid var(--gold-lo); color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.chip.on { background: var(--gold-lo); color: #fff; }
.chip.el-fire { color: #ffb070; } .chip.el-water { color: #8ac8ff; } .chip.el-earth { color: #e0c08a; } .chip.el-air { color: #c8f4ff; }
.chip.el-light { color: #ffe98a; } .chip.el-shadow { color: #c8b0f0; } .chip.el-mind { color: #ffb0e0; }
.wform { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.7rem 1rem; margin: 0.8rem 0; }
.wform label { display: flex; flex-direction: column; gap: 0.3rem; color: var(--gold); font: 700 0.75rem var(--title); letter-spacing: 0.04em; }
.wform input, .wform select { background: #0d0a07; color: var(--ink); border: 1px solid var(--gold-lo); border-radius: 3px; padding: 0.35rem 0.6rem; font: 600 0.9rem var(--font); }
.checks { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.checks label { flex-direction: row; align-items: center; color: var(--ink); font: 600 0.85rem var(--font); }
.wout { position: static !important; max-width: none !important; margin: 0.6rem 0; padding: 0.7rem 1rem; background: #0d0a07; border: 1px solid var(--gold-lo); border-radius: 3px; font: 0.78rem/1.55 var(--mono); white-space: pre-wrap; color: var(--ink); }
.newgame { inset: 4vh 10vw; }
.look-picker { margin: 0.8rem 0 0.4rem; }
.look-preview {
  display: block; width: 192px; height: 192px; margin: 0.6rem 0 0;
  image-rendering: pixelated; background: #0d121c; border: 1px solid var(--gold-lo); border-radius: 4px;
}
.bag-look { margin-bottom: 0.8rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--gold-lo); }

/* ---------- world labels & numbers ---------- */
.floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.float { position: absolute; transform: translate(-50%, -50%); font: 900 1.05rem var(--title); text-shadow: 0 2px 0 #000, 0 0 6px #000; font-variant-numeric: tabular-nums; }
.float.hit { color: var(--gold-hi); } .float.hurt { color: var(--bad); } .float.heal { color: var(--good); }
.label { position: absolute; transform: translate(-50%, -100%); padding: 0 0.4rem; font: 700 0.75rem var(--title); color: var(--ink); text-shadow: 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; }
.label.hunt, .label.blight { color: var(--bad); }
.label i { display: block; height: 3px; margin-top: 1px; background: var(--hp); box-shadow: 0 0 0 1px #000; }

/* ---------- touch ---------- */
.stick { position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(18,14,10,0.4); pointer-events: none; }
.touchbar { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.35rem; }
.touchbar button { min-width: 3.4rem; padding: 0.4rem 0.5rem; border-radius: 4px; border: 1px solid var(--gold-lo); background: var(--panel); color: var(--gold-hi); font: 700 0.75rem var(--title); }

button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--gold-lo); border-radius: 4px; } ::-webkit-scrollbar-track { background: #0d0a07; }

@media (max-width: 760px) {
  .player-frame { width: calc(100vw - 1.8rem); }
  .map-box, .goals, .target-frame, .hint, .slot-tip { display: none; }
  .zone-banner { top: 22%; }
  .slot { width: 3rem; height: 3rem; }
  .toasts { top: 7.6rem; }
  .overlay { inset: 2vh 3vw; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ======================= Delve (dungeon) ======================= */
.delve-ui { font-family: var(--font); }
.delve-ui button, .delve-ui .d-slot, .delve-ui .d-modal, .delve-ui .d-title { pointer-events: auto; }
.d-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; padding: 1rem; background: radial-gradient(ellipse at 50% 40%, #2a1e14 0%, #0a0807 70%); overflow: auto; }
.d-title h1 { margin: 0; font: 900 clamp(2.6rem, 7vw, 4.6rem)/1 var(--title); letter-spacing: 0.2em; color: var(--gold-hi); text-shadow: 0 3px 0 #000, 0 0 30px rgba(255, 150, 60, 0.35); }
.d-title .tag { font: 500 1rem var(--title); letter-spacing: 0.35em; text-transform: uppercase; color: var(--ink-soft); }
.d-title h3 { margin-top: 1rem; }
.d-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem; width: min(64rem, 100%); }
.d-class { text-align: left; padding: 0.8rem 1rem; cursor: pointer; color: var(--ink); background: linear-gradient(180deg, #2c2218, #16110c); border: 1px solid var(--gold-lo); border-radius: 6px; box-shadow: inset 0 0 0 3px rgba(0,0,0,0.35), inset 0 0 0 4px rgba(201,164,92,0.25); transition: transform 0.12s, border-color 0.12s; font: inherit; }
.d-class:hover { transform: translateY(-3px); border-color: var(--gold-hi); box-shadow: 0 0 18px rgba(240,210,138,0.25), inset 0 0 0 4px rgba(201,164,92,0.4); }
.d-class b { display: block; font: 700 1.15rem var(--title); color: var(--gold-hi); letter-spacing: 0.06em; }
.d-class span { display: block; font-size: 0.86rem; margin: 0.2rem 0; }
.d-class em { display: block; font-size: 0.75rem; color: var(--dim-c); font-style: normal; }
.d-class em.warn { color: var(--warn); }
.d-class.on { border-color: var(--gold-hi); box-shadow: 0 0 14px rgba(240,210,138,0.35), inset 0 0 0 4px rgba(201,164,92,0.45); }
.d-class:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.d-hire-purse { font: 700 1rem var(--title); color: var(--gold); letter-spacing: 0.06em; }
.d-hire-roster { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; max-width: 40rem; font-size: 0.85rem; color: var(--ink-soft); }
.d-hire-roster b { color: var(--gold-hi); margin-right: 0.4rem; }
.d-hire .buttons { margin-top: 0.6rem; }
.d-party { position: absolute; top: 0.9rem; left: 16.5rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 11rem; pointer-events: none; }
.d-mate { position: relative; padding: 0.35rem 0.55rem 0.45rem; background: rgba(10,8,6,0.65); border: 1px solid var(--gold-lo); border-radius: 4px; text-shadow: 0 1px 2px #000; overflow: hidden; }
.d-mate b { display: block; font: 700 0.85rem var(--title); color: var(--gold-hi); }
.d-mate span { display: block; font-size: 0.7rem; color: var(--ink-soft); margin-bottom: 0.2rem; }
.d-mate i { display: block; height: 4px; background: linear-gradient(90deg, #5ad070, #c8f090); border-radius: 1px; box-shadow: 0 0 6px #5ad070; }
.d-mate.down { opacity: 0.45; } .d-mate.down i { background: #664; box-shadow: none; }
.d-title .keys { margin-top: 0.8rem; font-size: 0.78rem; color: var(--dim-c); text-align: center; }

.d-top { position: absolute; top: 0.9rem; left: 0.9rem; width: 15rem; }
.d-depth { font: 900 1.4rem var(--title); letter-spacing: 0.1em; color: var(--gold-hi); text-shadow: 0 2px 0 #000; }
.d-air { height: 0.4rem; margin: 0.3rem 0 0.15rem; background: #0a0705; border: 1px solid var(--gold-lo); border-radius: 2px; overflow: hidden; }
.d-air span { display: block; height: 100%; box-shadow: 0 0 10px currentColor; transition: width 0.4s; }
.d-airname { font: 700 0.85rem var(--title); letter-spacing: 0.08em; text-shadow: 0 1px 2px #000; }
.d-coins { font-size: 0.85rem; color: var(--gold); margin-top: 0.15rem; text-shadow: 0 1px 2px #000; }
.d-map { position: absolute; top: 0.9rem; right: 0.9rem; width: 11rem; height: 11rem; background: rgba(10,8,6,0.6); border: 1px solid var(--gold-lo); border-radius: 6px; }
.d-map.open { width: 20rem; height: 20rem; z-index: 12; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.45); }
.d-door-icon { position: absolute; transform: translate(-50%, -120%); font: 700 1.35rem/1 Georgia, serif; color: #f0d28a; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,0.8); pointer-events: none; white-space: nowrap; }

.d-banner { position: absolute; top: 10%; left: 50%; transform: translate(-50%, -10px) scale(0.96); opacity: 0; pointer-events: none; white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; font: 900 clamp(1.1rem, 2.4vw, 1.7rem) var(--title); letter-spacing: 0.12em; color: var(--gold-hi); text-shadow: 0 3px 0 #000, 0 0 24px rgba(0,0,0,0.9); transition: opacity 0.25s, transform 0.25s; }
.d-banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.d-banner.big { font-size: clamp(1.4rem, 3.2vw, 2.2rem); }
.d-banner.bad { color: #ff7a6a; } .d-banner.good { color: #b8f08a; }
.d-feed { position: absolute; left: 0.9rem; top: 7rem; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--ink); text-shadow: 0 1px 2px #000; }

.d-bottom { position: absolute; left: 50%; bottom: 0.8rem; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 1rem; }
.orb { position: relative; width: 6.6rem; height: 6.6rem; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #2a2018, #0a0705); border: 3px solid var(--gold); box-shadow: 0 0 0 2px #000, 0 0 0 5px var(--gold-lo), 0 6px 18px #000, inset 0 -10px 20px #000; }
.orb .chip { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255, 200, 170, 0.4); z-index: 0; pointer-events: none; }
.orb.mp .chip { background: rgba(140, 190, 255, 0.35); }
.orb i.fill { position: absolute; left: 0; right: 0; bottom: 0; transition: height 0.12s ease-out; z-index: 1; }
.orb.hp i.fill { background: radial-gradient(circle at 40% 30%, #ff8a6a, #b0201a 45%, #4a0806); }
.orb.mp i.fill { background: radial-gradient(circle at 40% 30%, #9ad8ff, #2050c0 45%, #08143a); }
.orb::after { content: ""; position: absolute; inset: 8% 18% 55% 18%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.45), transparent); z-index: 2; pointer-events: none; }
.orb.low { animation: pulse 0.7s infinite alternate; }
.orb.ward { box-shadow: 0 0 0 2px #000, 0 0 0 5px #e8c870, 0 0 22px #ffd870; }
.orb.shake { animation: barShake 0.32s ease-out; }
@keyframes pulse { to { box-shadow: 0 0 0 2px #000, 0 0 0 5px #ff3020, 0 0 26px #ff3020; } }
.d-bar { display: flex; gap: 0.35rem; padding: 0.4rem 0.5rem; margin-bottom: 0.6rem; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--gold-lo); border-radius: 6px; box-shadow: inset 0 0 0 4px rgba(201,164,92,0.3), 0 8px 20px #000; }
.d-slot { position: relative; width: 3.7rem; height: 3.7rem; border-radius: 4px; overflow: hidden; background: #0d0a07; border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--gold-lo), inset 0 0 12px #000; cursor: pointer; transition: transform 0.1s; }
.d-slot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.d-slot.press { transform: scale(0.86); }
.d-slot.sel { box-shadow: inset 0 0 0 2px var(--gold-hi), 0 0 12px rgba(240,210,138,0.5); }
.d-slot.dry svg, .d-slot.dry b { filter: grayscale(0.9) brightness(0.45); }
.d-slot.empty { opacity: 0.45; }
.d-slot .k { position: absolute; top: 1px; left: 4px; z-index: 2; font: 800 0.7rem var(--title); color: var(--gold-hi); text-shadow: 0 1px 2px #000; }
.d-slot .mana { position: absolute; bottom: 2px; right: 3px; z-index: 2; font-size: 0.5rem; letter-spacing: 1px; color: #7fc0ff; text-shadow: 0 0 3px #000; }
.d-slot b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; color: var(--gold-hi); }
.d-slot em { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 0.5rem; color: #8ad0ff; }
.d-slot .cd {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: conic-gradient(from -90deg, rgba(0, 0, 0, 0.72) calc(var(--cd, 0) * 1%), transparent 0);
}
.d-slot.basic, .d-slot.dash, .d-slot.pot { width: 3rem; height: 3rem; align-self: flex-end; }
.d-xp { position: absolute; left: 50%; bottom: 0.25rem; transform: translateX(-50%); width: min(30rem, 70vw); height: 0.25rem; background: #0a0705; border-radius: 2px; overflow: hidden; }
.d-xp i { display: block; height: 100%; background: linear-gradient(90deg, #a07a20, #ffe08a); box-shadow: 0 0 8px #ffe08a; transition: width 0.3s; }
.d-sum { position: absolute; left: 0.9rem; bottom: 8.5rem; margin: 0; font: 0.75rem/1.5 var(--mono); color: var(--ink); background: var(--panel); border: 1px solid var(--gold-lo); padding: 0.5rem 0.7rem; border-radius: 4px; white-space: pre-wrap; max-width: 30rem; }
.d-labels { position: absolute; inset: 0; pointer-events: none; }
.d-label { position: absolute; transform: translate(-50%, -100%); width: 3.4rem; text-align: center; }
.d-label b { display: block; font: 700 0.72rem var(--title); color: #ffd060; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.d-label.boss { width: 9rem; } .d-label.boss b { font-size: 0.9rem; color: #ff8a6a; }
.d-label i { display: block; height: 4px; background: linear-gradient(90deg, #ff5040, #ff9a6a); box-shadow: 0 0 0 1px #000; border-radius: 1px; }
.d-modal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(40rem, calc(100vw - 2rem)); max-height: 86vh; overflow: auto; padding: 1.3rem 1.5rem; text-align: center; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--gold-lo); border-radius: 6px; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.55), inset 0 0 0 4px rgba(201,164,92,0.35), 0 10px 30px #000; }
.d-modal p { color: var(--ink-soft); }
.d-modal .d-event-text { font-size: 1.05rem; line-height: 1.45; color: var(--ink); margin: 0.4rem 0 0.8rem; }
.d-modal .d-recap { text-align: left; white-space: pre-wrap; font: 0.92rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink-soft); background: rgba(0,0,0,0.25); padding: 0.75rem 1rem; border-radius: 4px; border: 1px solid rgba(201,164,92,0.25); }
.d-cards { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
/* opacity:1 default — never rely on animation fill (headless / reduced-motion leave `backwards` stuck at 0) */
.d-card { position: relative; width: 11rem; min-height: 8rem; padding: 1rem 0.8rem; cursor: pointer; color: var(--ink); background: linear-gradient(180deg, #3a2c1c, #16110c); border: 1px solid var(--gold); border-radius: 6px; box-shadow: inset 0 0 0 3px rgba(0,0,0,0.35), 0 0 0 1px #000; transition: transform 0.12s, box-shadow 0.12s; font: inherit; opacity: 1; animation: cardIn 0.35s ease-out both; }
.d-card:nth-child(2) { animation-delay: 0.08s; } .d-card:nth-child(3) { animation-delay: 0.16s; }
.d-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 0 24px rgba(240,210,138,0.45); }
.d-card b { display: block; font: 700 1.05rem var(--title); color: var(--gold-hi); margin-bottom: 0.35rem; }
.d-card .kind { display: block; font: 600 0.72rem var(--title); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-lo); margin-bottom: 0.35rem; }
.d-card span { display: block; font-size: 0.85rem; line-height: 1.35; color: var(--ink-soft, #c8b8a0); }
.d-card .cost { display: block; margin-top: 0.55rem; font: 700 0.8rem var(--title); color: var(--gold-hi); }
.d-card em { position: absolute; top: 4px; left: 8px; font: 800 0.75rem var(--title); color: var(--gold-lo); font-style: normal; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .d-card { animation: none; opacity: 1; transform: none; }
}
.d-runes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; margin: 0.5rem 0; }
.d-rune { min-width: 5.2rem; padding: 0.4rem 0.6rem; cursor: pointer; color: var(--ink); background: #1a140e; border: 1px solid var(--gold-lo); border-radius: 4px; font: 700 0.82rem var(--title); text-transform: capitalize; }
.d-rune em { display: block; font-style: normal; font-size: 0.55rem; color: var(--gold); min-height: 0.7rem; }
.d-rune.on { border-color: var(--gold-hi); background: #3a2c1c; box-shadow: 0 0 10px rgba(240,210,138,0.4); }
.d-rune.none { opacity: 0.35; cursor: not-allowed; }
.d-preview { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 0.6rem 0; }
.d-preview svg { width: 3.4rem; height: 3.4rem; border: 1px solid var(--gold); border-radius: 4px; background: #0d0a07; }
.d-preview b { display: block; font: 700 1.05rem var(--title); color: var(--gold-hi); text-transform: capitalize; }
.d-preview span { font-size: 0.85rem; color: var(--ink-soft); }
.d-go { margin: 0.6rem 0.3rem 0; padding: 0.55rem 1.4rem; cursor: pointer; font: 700 0.95rem var(--title); letter-spacing: 0.06em; color: #1a120c; background: linear-gradient(180deg, #ffe08a, #c9a45c); border: 1px solid #000; border-radius: 4px; box-shadow: 0 0 14px rgba(240,210,138,0.35); }
.d-go.ghost { color: var(--gold-hi); background: transparent; border-color: var(--gold-lo); box-shadow: none; }
.d-go:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 760px) { .d-map { width: 7rem; height: 7rem; } .orb { width: 4.6rem; height: 4.6rem; } .d-slot { width: 2.9rem; height: 2.9rem; } .d-bottom { gap: 0.4rem; } }

/* --- action layer: practice bar, dash, rifts, boons --- */
.bar.xp { height: 0.8rem; }
.bar.xp .fill { background: linear-gradient(90deg, #4a3410, #c9a24a, #f0d28a); }
.bar.xp span { font-size: 0.62rem; line-height: 0.8rem; }
.slot.dash-pip { cursor: default; opacity: 0.55; }
.slot.dash-pip.ready { opacity: 1; box-shadow: inset 0 0 0 1px var(--gold), 0 0 10px rgba(160, 230, 255, 0.45); }
.slot.dash-pip:hover { transform: none; }
.slot.dash-pip .cd { opacity: 0.85; }
.slot.dash-pip b { position: absolute; left: 0; right: 0; bottom: 0.25rem; text-align: center; font: 800 0.68rem var(--title); letter-spacing: 0.05em; color: #dff6ff; text-shadow: 0 1px 2px #000; }
.rift-banner { position: absolute; top: 5.6rem; left: 50%; transform: translateX(-50%); padding: 0.25rem 1rem; white-space: nowrap; max-width: calc(100vw - 1rem); font: 700 0.9rem var(--title); letter-spacing: 0.05em; color: #e2c8ff; background: rgba(24, 12, 34, 0.78); border: 1px solid #7a4ab0; border-radius: 3px; text-shadow: 0 1px 2px #000; pointer-events: none; }
.rift-banner.live { color: #ffd0e0; border-color: #ff4a8a; box-shadow: 0 0 14px rgba(255, 74, 138, 0.45); }
.float.mana { color: var(--mp-hi); }
.float.big { font-size: 1.7rem; letter-spacing: 0.12em; }
.label.elite { font-size: 0.9rem; color: #ff9ab8; }
@media (max-width: 640px) { .rift-banner { top: 7.2rem; font-size: 0.75rem; } .slot.dash-pip { display: none; } }

/* --- delve: rune scripts, bag, creature labels --- */
.d-script { width: 100%; box-sizing: border-box; background: #0c0907; color: #f0e6cc; border: 1px solid var(--gold-lo); border-radius: 3px; padding: 0.5rem 0.7rem; font: 0.9rem/1.35 ui-monospace, Menlo, Consolas, monospace; tab-size: 2; resize: vertical; }
.d-script-status { margin: 0.4rem 0; padding: 0.3rem 0.6rem; font: 0.8rem/1.4 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; text-align: left; border-left: 2px solid var(--gold); }
.d-script-status.ok { color: var(--good); border-left-color: var(--good); } .d-script-status.bad { color: #ffb0a6; border-left-color: var(--bad); }
.d-vocab { font: 0.74rem/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--ink-soft); text-align: left; margin: 0.3rem 0 0.5rem; }
.d-vocab b { color: var(--gold-hi); display: inline-block; min-width: 5.2rem; }
.d-item { display: block; width: 100%; margin: 0.2rem 0; padding: 0.35rem 0.6rem; text-align: left; background: #17110c; color: var(--ink); border: 1px solid var(--gold-lo); border-radius: 3px; cursor: pointer; font: 0.82rem var(--font); }
.d-item:hover { border-color: var(--gold-hi); }
.d-modal { max-height: 88vh; overflow-y: auto; }
.d-label span { display: block; font: 600 0.62rem var(--font); color: var(--ink-soft); letter-spacing: 0.04em; }
.d-label.calm b { color: #a8e6b4; }
.d-feed div { max-width: 30rem; }

/* --- delve: purifying the mana (Audition row: dance + Space on the beat) --- */
.d-purify { position: absolute; left: 50%; bottom: 9.2rem; transform: translateX(-50%); padding: 0.55rem 0.9rem 0.5rem; text-align: center; background: rgba(12, 9, 7, 0.86); border: 1px solid var(--gold); border-radius: 5px; box-shadow: 0 0 22px rgba(120, 200, 255, 0.25); pointer-events: none; min-width: 16rem; }
.pu-name { font: 700 0.78rem var(--title); letter-spacing: 0.08em; color: var(--gold-hi); margin-bottom: 0.35rem; }
.pu-row { display: flex; gap: 0.3rem; justify-content: center; }
.pu-row b { width: 2.3rem; height: 2.3rem; line-height: 2.3rem; font: 900 1.4rem/2.3rem var(--font); color: #8a8072; background: #17110c; border: 1px solid #3a2e22; border-radius: 4px; transition: background 0.1s; }
.pu-row b.now { color: #fff; border-color: #9fdcff; box-shadow: 0 0 12px rgba(159, 220, 255, 0.8); }
.pu-row b.ok { color: #0c1a10; background: #7fe0a0; border-color: #7fe0a0; }
.pu-row b.miss { color: #2a0a08; background: #c060d8; border-color: #e08aff; box-shadow: 0 0 10px rgba(200, 100, 255, 0.55); }
.pu-row b.dance.wait, .pu-row b.dance.now {
  animation: puDance 0.55s ease-in-out infinite;
  animation-delay: calc(var(--bob, 0) * -0.55s);
}
.pu-row b.now.dance { animation-name: puDanceNow; }
@keyframes puDance {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-0.28rem) scale(1.06); }
}
@keyframes puDanceNow {
  0%, 100% { transform: translateY(0) scale(1.12); }
  50% { transform: translateY(-0.34rem) scale(1.22); }
}
.pu-time { height: 5px; margin-top: 0.45rem; background: #0a0705; border-radius: 3px; overflow: hidden; }
.pu-time i { display: block; height: 100%; background: linear-gradient(90deg, #e06a5a, #f0d28a, #9fdcff); }
.pu-beat { position: relative; height: 0.7rem; margin: 0.55rem 0.2rem 0.2rem; }
.pu-track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: #1a1410; border: 1px solid #3a2e22; border-radius: 2px; }
.pu-cursor { position: absolute; top: 50%; width: 0.55rem; height: 0.55rem; margin: -0.28rem 0 0 -0.28rem; border-radius: 50%; background: #9fdcff; box-shadow: 0 0 10px #9fdcff, 0 0 2px #fff; }
.pu-mark { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: linear-gradient(180deg, #ffe08a, #c9a45c); box-shadow: 0 0 8px rgba(255, 220, 120, 0.7); border-radius: 1px; }
.pu-mark::after { content: "␣"; position: absolute; top: -1.1rem; left: 50%; transform: translateX(-50%); font: 700 0.65rem var(--title); color: var(--gold-hi); text-shadow: 0 1px 2px #000; }
.pu-hint { margin-top: 0.3rem; font-size: 0.66rem; color: var(--ink-soft); }
.d-purify.result { border: none; background: none; box-shadow: none; }
.pu-grade { font: 900 1.6rem var(--title); letter-spacing: 0.12em; text-shadow: 0 2px 0 #000, 0 0 14px currentColor; }
.pu-grade span { font-size: 1rem; }
.pu-timing { font: 900 clamp(1.8rem, 5vw, 3rem) var(--title); letter-spacing: 0.14em; text-shadow: 0 3px 0 #000, 0 0 24px currentColor; animation: puPop 0.55s cubic-bezier(0.2, 1.4, 0.3, 1) both; }
.pu-timing.perfect { color: #9fe8ff; } .pu-timing.great { color: #b8f08a; }
.pu-timing.cool { color: #f0d28a; } .pu-timing.bad { color: #ffb07a; } .pu-timing.miss { color: #ff8a7a; }
.pu-grade { animation: puPop 0.45s 0.08s cubic-bezier(0.2, 1.35, 0.3, 1) both; }
@keyframes puPop {
  0% { opacity: 0; transform: scale(0.35) translateY(18px); filter: blur(2px); }
  60% { opacity: 1; transform: scale(1.12) translateY(-2px); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
.d-purify.pure { color: #9fe8ff; } .d-purify.clean { color: #9fe0a8; } .d-purify.rough { color: #f0d28a; } .d-purify.raw { color: #ff8a7a; }

/* --- GAME_JUICE §7: low-Vitality vignette, level-up banner --- */
.ui-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(120, 8, 16, var(--vig, 0)) 100%);
  opacity: 0; transition: opacity 0.2s;
}
.ui-vignette.on { opacity: 1; }
.ui-levelup {
  position: absolute; left: 50%; top: 18%; transform: translate(-50%, -12px) scale(0.9);
  opacity: 0; pointer-events: none; z-index: 5; text-align: center;
  font: 900 clamp(1.6rem, 4vw, 3rem) var(--title); letter-spacing: 0.18em;
  color: #ffe08a; text-shadow: 0 3px 0 #000, 0 0 28px rgba(255, 220, 120, 0.7);
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.2, 1.4, 0.3, 1);
}
.ui-levelup.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ui-levelup em { display: block; margin-top: 0.35rem; font: 600 0.95rem var(--title); letter-spacing: 0.12em; color: var(--ink); font-style: normal; text-shadow: 0 1px 3px #000; }
.d-settings { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; padding: 1.2rem 1.4rem; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--gold-lo); border-radius: 6px; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.55), inset 0 0 0 4px rgba(201,164,92,0.35); text-align: center; pointer-events: auto; }
.d-settings h3 { margin: 0 0 0.4rem; color: var(--gold-hi); font: 700 1.2rem var(--title); }
.d-settings .d-go.on { border-color: var(--gold-hi); box-shadow: 0 0 12px rgba(240,210,138,0.4); }

/* --- delve: character sheet, class skill, mastery --- */
.d-build { width: min(62rem, calc(100vw - 2rem)); pointer-events: auto; text-align: left; }
.d-build h3 { text-align: center; } .b-hint { color: var(--ink-soft); font-size: 0.85rem; text-align: center; margin: 0.2rem 0 0.8rem; }
.b-grid { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.6fr); gap: 1.4rem; }
@media (max-width: 760px) { .b-grid { grid-template-columns: 1fr; } }
.b-row { display: block; margin: 0.5rem 0; font-size: 0.85rem; color: var(--ink); }
.b-row span { display: block; margin-bottom: 0.15rem; } .b-row b { color: var(--gold-hi); font-size: 1.05rem; } .b-row em { color: var(--ink-soft); font-style: normal; font-size: 0.75rem; }
.b-row input[type=range] { width: 100%; accent-color: #d8b050; } .b-row select { width: 100%; background: #17110c; color: var(--ink); border: 1px solid var(--gold-lo); padding: 0.3rem; border-radius: 3px; }
.b-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem 0.8rem; margin-bottom: 0.7rem; }
.b-stats span { font-size: 0.8rem; color: var(--ink); } .b-stats b { display: block; font: 800 1.35rem var(--title); color: var(--gold-hi); font-variant-numeric: tabular-nums; } .b-stats em { display: block; font-style: normal; font-size: 0.68rem; color: var(--ink-soft); }
.b-tiers { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.b-tiers th { text-align: left; font-weight: 600; color: var(--ink-soft); padding: 0.15rem 0.4rem; border-bottom: 1px solid var(--gold-lo); }
.b-tiers td { padding: 0.18rem 0.4rem; border-bottom: 1px solid rgba(120, 96, 60, 0.25); }
.b-tiers tr.success td:nth-child(4) { color: var(--good); } .b-tiers tr.weakened td:nth-child(4) { color: var(--warn); } .b-tiers tr.fizzle td:nth-child(4), .b-tiers tr.backlash td:nth-child(4), .b-tiers tr.surge td:nth-child(4) { color: #ff9a8a; }
.b-skill { margin-top: 0.5rem; font-size: 0.82rem; color: var(--ink); } .b-skill b { color: var(--gold-hi); margin-right: 0.3rem; } .b-skill em { color: var(--ink-soft); font-style: normal; }
.d-slot .mast { position: absolute; top: 1px; right: 3px; font: 800 0.66rem var(--font); color: #9fdcff; text-shadow: 0 1px 2px #000; }
.d-slot .mast.done { color: #ffe08a; font-size: 0.8rem; }
.d-slot.skill b { color: #9fdcff; }

/* --- delve: the turbine, the dry run, scrolls --- */
.pu-row.wheel b { border-radius: 50%; }
.d-try-title { margin-top: 0.7rem; font: 700 0.74rem var(--title); letter-spacing: 0.06em; color: var(--gold-hi); text-align: left; }
.d-try { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.3rem 0; }
.d-try .d-rune { padding: 0.15rem 0.5rem; font-size: 0.72rem; }
.d-try-out { font: 0.8rem ui-monospace, Menlo, Consolas, monospace; color: #9fdcff; text-align: left; min-height: 1.1rem; }