* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #0c0a14; }
body { font-family: 'Segoe UI', system-ui, sans-serif; color: #e8e2d0; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

/* ---------- HUD ---------- */
#hud > div { position: fixed; z-index: 10; pointer-events: none; }
#topbar { top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 24px; font-size: 15px; letter-spacing: 2px; }
#biome { color: #b8a86a; text-shadow: 0 0 8px #000; }
#gold { color: #f0c040; }
#hearts { top: 10px; left: 12px; font-size: 22px; }
#hearts .h { color: #e03050; text-shadow: 0 0 6px #500; }
#hearts .h.empty { color: #45333a; }
#hearts .curse { font-size: 13px; color: #c060e0; border: 1px solid #c060e0; padding: 1px 6px; border-radius: 4px; margin-left: 8px; vertical-align: middle; }
#statuses { top: 40px; left: 14px; font-size: 15px; }
#statuses span { margin-right: 7px; text-shadow: 0 0 6px #000; }
#statuses .tf { color: #ffd050; font-size: 12px; border: 1px solid #806020; padding: 1px 4px; border-radius: 3px; }
#manabar { bottom: 76px; left: 50%; transform: translateX(-50%); width: 260px; height: 9px; background: #191527; border: 1px solid #3a3355; border-radius: 5px; overflow: hidden; }
#manafill { height: 100%; width: 100%; background: linear-gradient(90deg, #4060d0, #60a0f0); transition: width .1s; }
#manafill.recharging { background: repeating-linear-gradient(45deg, #705020, #705020 6px, #907030 6px, #907030 12px); }
#wands { bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.wslot { background: #16121fdd; border: 1px solid #3a3355; border-radius: 6px; padding: 5px 10px; font-size: 12px; min-width: 110px; position: relative; }
.wslot.active { border-color: #b8a86a; box-shadow: 0 0 10px #b8a86a44; }
.wslot b { color: #b8a86a; margin-right: 4px; }
.wslot .ac { color: #b060ff; }
.wslot .deck { margin-top: 3px; display: flex; gap: 2px; }
.wslot .deck i { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
.wslot .rch { position: absolute; right: 6px; top: 4px; color: #e0a030; animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
#chain { top: 22%; right: 5%; font-size: 30px; font-weight: 900; color: #ffd050; text-shadow: 0 0 14px #a06000, 2px 2px 0 #000; opacity: 0; transition: opacity .4s; letter-spacing: 2px; }
#chain.pop { animation: chainpop .25s ease-out; }
@keyframes chainpop { 0% { transform: scale(1.7); } 100% { transform: scale(1); } }
#bossbar { top: 46px; left: 50%; transform: translateX(-50%); width: 420px; text-align: center; }
#bossname { font-size: 13px; letter-spacing: 3px; color: #ff7040; text-shadow: 0 0 8px #000; }
.bframe { margin-top: 3px; height: 10px; background: #1a1220; border: 1px solid #703030; border-radius: 5px; overflow: hidden; }
#bossfill { height: 100%; background: linear-gradient(90deg, #a02020, #ff6030); transition: width .15s; }
#toasts { bottom: 120px; left: 12px; display: flex; flex-direction: column-reverse; gap: 5px; max-width: 380px; }
.toast { background: #16121fee; border-left: 3px solid #b8a86a; padding: 6px 10px; font-size: 13px; border-radius: 0 5px 5px 0; animation: tin .25s ease-out; }
.toast.discover { border-color: #ffd050; color: #ffd050; font-weight: 700; }
.toast.transform { border-color: #ff9030; color: #ffb050; font-weight: 800; font-size: 15px; }
.toast.curse { border-color: #c060e0; color: #d090f0; }
.toast.good { border-color: #50c070; color: #90e0a0; }
.toast.warn { border-color: #d0a030; color: #e0c070; }
.toast.card { border-color: #6080e0; }
.toast.biome { border-color: #b8a86a; color: #d8c890; font-weight: 700; letter-spacing: 2px; }
.toast.boss { border-color: #ff5030; color: #ff9070; font-style: italic; }
.toast.mural { border-color: #88a0ff; color: #b0c0ff; font-style: italic; }
.toast.out { opacity: 0; transition: opacity .5s; }
@keyframes tin { from { transform: translateX(-16px); opacity: 0; } }
#interact-hint { bottom: 150px; left: 50%; transform: translateX(-50%); background: #16121fee; border: 1px solid #b8a86a; padding: 5px 14px; border-radius: 5px; font-size: 14px; color: #e8d8a0; }

/* floating combat text */
#floats { position: fixed; inset: 0; pointer-events: none; z-index: 9; overflow: hidden; }
.float { position: absolute; transform: translate(-50%, -100%); font-weight: 800; font-size: 15px; color: #fff; text-shadow: 1px 1px 0 #000, 0 0 6px #000; }
.float.dmg { color: #ffd0a0; }
.float.pdmg { color: #ff5050; font-size: 18px; }
.float.fizzle { color: #8090a0; font-size: 12px; font-weight: 400; }
.float.reaction { font-size: 19px; letter-spacing: 2px; color: #ffe080; text-shadow: 0 0 12px #c07000, 1px 1px 0 #000; }

/* ---------- editor ---------- */
#editor { position: fixed; inset: 4% 6%; z-index: 20; background: #100d1af2; border: 2px solid #b8a86a; border-radius: 10px; padding: 18px; overflow-y: auto; }
.ed-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ed-head h2 { color: #b8a86a; letter-spacing: 3px; font-size: 20px; }
.ed-close { cursor: pointer; color: #888; border: 1px solid #444; padding: 3px 10px; border-radius: 4px; pointer-events: auto; }
.ed-close:hover { color: #fff; }
.ed-cols { display: flex; gap: 18px; }
.ed-left { flex: 1.4; }
.ed-right { flex: 1; }
.ed-wand { border: 1px solid #3a3355; border-radius: 8px; padding: 10px; margin-bottom: 12px; background: #14101f; }
.ed-wand.active { border-color: #b8a86a; }
.ed-wandname { font-weight: 700; color: #d8c890; margin-bottom: 2px; }
.ed-wandname .ac { color: #b060ff; font-size: 12px; margin-left: 8px; }
.ed-wandname .shuf { font-size: 12px; }
.ed-stats { font-size: 11px; color: #8a84a0; margin-bottom: 7px; }
.ed-deck, .ed-inv { display: flex; flex-wrap: wrap; gap: 6px; }
.card { width: 108px; height: 40px; background: #1c1830; border: 1px solid #443f66; border-radius: 5px; display: flex; align-items: center; gap: 5px; padding: 0 7px; cursor: pointer; font-size: 11px; position: relative; pointer-events: auto; }
.card:hover { border-color: #b8a86a; }
.card.sel { border-color: #ffd050; box-shadow: 0 0 10px #ffd05066; }
.card.empty { justify-content: center; color: #555; background: #14111f; border-style: dashed; }
.card .ctype { font-size: 15px; }
.card .cname { flex: 1; overflow: hidden; white-space: nowrap; }
.card .cmana { color: #60a0f0; font-size: 10px; }
.card.t3 { border-color: #5560a0; } .card.t4 { border-color: #8050b0; } .card.t5 { border-color: #c0a030; }
.ed-preview { margin-top: 8px; font-size: 11px; }
.pv-pull { background: #0d0b16; border-radius: 5px; padding: 5px 8px; margin-top: 4px; }
.pv-pull pre { color: #a8d0a8; margin-top: 3px; font-size: 11px; line-height: 1.5; font-family: 'Consolas', monospace; }
.pv-pull i { color: #776; }
.ed-help { margin-top: 12px; font-size: 12px; color: #8a84a0; line-height: 1.7; }
.ed-right h3 { color: #b8a86a; font-size: 13px; letter-spacing: 2px; margin-bottom: 8px; }
.dim { color: #665f80; }

/* ---------- overlays ---------- */
#overlay { position: fixed; inset: 0; z-index: 30; background: #08060fd8; display: flex; align-items: center; justify-content: center; }
.panel { background: #100d1a; border: 2px solid #b8a86a; border-radius: 12px; padding: 30px 40px; max-width: 720px; max-height: 88vh; overflow-y: auto; text-align: center; box-shadow: 0 0 60px #000; }
.panel h1 { font-size: 44px; letter-spacing: 10px; color: #ffd050; text-shadow: 0 0 24px #806000; margin-bottom: 8px; }
.panel h2 { font-size: 24px; letter-spacing: 4px; color: #e8d8a0; margin-bottom: 12px; }
.panel h3 { font-size: 13px; letter-spacing: 2px; color: #b8a86a; margin: 14px 0 6px; }
.panel .sub { color: #9a90b8; margin-bottom: 18px; }
.menurow { display: flex; gap: 10px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.menurow input { background: #1c1830; border: 1px solid #443f66; color: #e8e2d0; padding: 10px 14px; border-radius: 6px; font-size: 15px; width: 240px; }
button { background: #2a2244; color: #ffd050; border: 1px solid #b8a86a; padding: 10px 22px; border-radius: 6px; font-size: 15px; cursor: pointer; letter-spacing: 1px; font-weight: 700; }
button:hover { background: #3a2f5c; box-shadow: 0 0 12px #b8a86a55; }
.offer-row { display: flex; gap: 14px; justify-content: center; }
.offer { flex: 1; background: #1c1830; border: 2px solid #443f66; border-radius: 8px; padding: 18px 12px; cursor: pointer; min-width: 150px; }
.offer:hover { border-color: #ffd050; transform: translateY(-3px); }
.offer.cursed { border-color: #8040a0; }
.offer.cursed:hover { border-color: #c060e0; box-shadow: 0 0 16px #a040d066; }
.offer h3 { margin: 0 0 8px; font-size: 16px; color: #e8d8a0; }
.offer p { font-size: 12px; color: #9a90b8; }
.death h2 { color: #ff6050; }
.death .self { color: #c060e0; font-style: italic; margin-bottom: 8px; }
.dc-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin: 14px 0; font-size: 14px; color: #9a90b8; }
.dc-stats b { color: #ffd050; }
.dc-stats .good { color: #70e090; font-weight: 700; }
.dc-wands { text-align: left; margin: 10px 0; }
.dc-wand { background: #16121f; border-radius: 6px; padding: 8px 12px; margin: 5px 0; font-size: 13px; }
.dc-unlocks { text-align: left; background: #1a1626; border: 1px solid #806020; border-radius: 8px; padding: 10px 14px; margin: 12px 0; font-size: 14px; }
.dc-unlocks h3 { color: #ffd050; margin-top: 0; }
code { background: #1c1830; padding: 2px 8px; border-radius: 4px; color: #90c0f0; }
.cx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.cx-cell { border: 1px solid #33304a; border-radius: 6px; padding: 12px 6px; color: #555; font-size: 13px; letter-spacing: 1px; }
.cx-cell.known { color: #e8d8a0; font-weight: 700; background: #1a1626; }
.cx-cards { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 8px 0; }
.cx-card { background: #1c1830; border: 1px solid #443f66; border-radius: 4px; padding: 2px 8px; font-size: 11px; }
.cx-card.locked { color: #554f6a; border-style: dashed; }
.keys { margin: 0 auto; border-collapse: collapse; font-size: 14px; text-align: left; }
.keys td { padding: 4px 14px; }
.keys td:nth-child(odd) { color: #ffd050; font-weight: 700; text-align: right; }
.help p { text-align: left; font-size: 14px; line-height: 1.7; color: #b8b0cc; margin: 6px 0; }
.help b { color: #e8d8a0; }