:root{--ink: #e8dcc4;--dim: #9a8b72;--blood: #c43b3b;--gold: #e0b15a;--hp: #d4534a;--xp: #7ec8d4;--panel: rgba(8, 7, 12, .78)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#07060a;color:var(--ink);font-family:IM Fell English,serif;user-select:none;touch-action:none}#view,#view canvas{position:fixed;inset:0;width:100%;height:100%;display:block}#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.62) 100%),linear-gradient(180deg,rgba(0,0,0,.28),transparent 18%,transparent 78%,rgba(0,0,0,.4));z-index:2}#hud{position:fixed;inset:0;z-index:4;pointer-events:none;padding:calc(12px + env(safe-area-inset-top)) 16px 16px}.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.bars{width:min(360px,56vw)}.bar{height:10px;background:#0000008c;border:1px solid rgba(224,177,90,.28);position:relative;overflow:hidden}.bar+.bar{margin-top:5px}.bar i{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(1)}.bar.hp i{background:linear-gradient(90deg,#7a1d1d,var(--hp))}.bar.xp i{height:7px;background:linear-gradient(90deg,#2a6a74,var(--xp))}.bar.boss{height:12px;border-color:#c43b3b80}.bar.boss i{background:linear-gradient(90deg,#4a0d18,#e25a4a)}.meta{display:flex;gap:14px;margin-top:6px;font-family:Cinzel,serif;font-size:11px;letter-spacing:.14em;color:var(--dim)}.meta b{color:var(--gold);font-weight:600}.clock{text-align:right}#timer{font-family:Cinzel,serif;font-size:28px;letter-spacing:.08em;color:var(--gold);text-shadow:0 0 18px rgba(224,177,90,.35)}#clock-sub{font-family:Cinzel,serif;font-size:9px;letter-spacing:.22em;color:var(--dim)}#loadout{position:absolute;left:16px;top:86px;display:flex;flex-direction:column;gap:6px}.chip{display:flex;align-items:center;gap:8px;font-family:Cinzel,serif;font-size:11px;letter-spacing:.06em;color:var(--ink)}.chip .dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 8px currentColor}#boss-wrap{position:absolute;left:50%;top:72px;transform:translate(-50%);width:min(420px,70vw);text-align:center}#boss-name{font-family:Cinzel,serif;font-size:11px;letter-spacing:.28em;color:#f0a0a0;margin-bottom:6px}#hint{position:absolute;left:50%;bottom:14px;transform:translate(-50%);font-family:Cinzel,serif;font-size:10px;letter-spacing:.16em;color:#e8dcc473;white-space:nowrap}#overlay,#pause{position:fixed;inset:0;z-index:8;display:grid;place-items:center;background:radial-gradient(ellipse at center,#08060a38,#040306b8)}#overlay[hidden],#pause[hidden],#cards[hidden],#hud[hidden],#boss-wrap[hidden],#pulse-btn[hidden],#stick[hidden]{display:none}.overlay-inner{width:min(560px,92vw);text-align:center;padding:24px 16px 40px}.eyebrow{font-family:Cinzel,serif;letter-spacing:.38em;font-size:11px;color:var(--gold);margin:0 0 10px}h1{font-family:Cinzel Decorative,Cinzel,serif;font-size:clamp(44px,10vw,78px);line-height:.88;margin:0 0 18px;color:#f3e6c8;text-shadow:0 0 40px rgba(224,177,90,.25)}.lede,#pause p,.fine{color:var(--dim);line-height:1.45}.lede{margin:0 auto 18px;max-width:42ch}.how{list-style:none;padding:0;margin:0 auto 22px;text-align:left;width:fit-content;color:var(--ink);line-height:1.7}.how li:before{content:"† ";color:var(--gold)}button{font-family:Cinzel,serif;letter-spacing:.18em;background:transparent;color:var(--gold);border:1px solid var(--gold);padding:14px 28px;cursor:pointer;pointer-events:auto}button:hover,button:focus-visible{background:#e0b15a1f}.fine{font-size:13px;margin-top:16px}#pause h2{font-family:Cinzel Decorative,serif;margin:0 0 8px;letter-spacing:.2em}#cards{position:fixed;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:14px;padding:20px;background:#0403068c;flex-wrap:wrap}.card{width:min(220px,90vw);min-height:250px;background:var(--panel);border:1px solid rgba(224,177,90,.35);padding:18px 16px 16px;text-align:center;cursor:pointer;pointer-events:auto;transition:transform .12s ease,border-color .12s ease}.card:hover{transform:translateY(-4px);border-color:var(--gold)}.card-kind{font-family:Cinzel,serif;font-size:10px;letter-spacing:.22em;color:var(--gold)}.card-icon{width:54px;height:54px;margin:14px auto;border-radius:50%;border:1px solid currentColor;background:radial-gradient(circle at 40% 35%,currentColor,transparent 68%);box-shadow:0 0 16px color-mix(in srgb,currentColor 50%,transparent);opacity:.95}.card-name{font-family:Cinzel,serif;font-size:16px;margin-bottom:6px}.card-lvl{font-size:12px;color:var(--gold);margin-bottom:8px}.card-blurb{color:var(--dim);font-size:14px;line-height:1.35}.card.pact{border-color:#c43b3b8c}.card.evo{border-color:#d4e8ff}#toast{position:fixed;top:22%;left:50%;transform:translate(-50%,-20px);z-index:6;font-family:Cinzel,serif;letter-spacing:.32em;font-size:clamp(18px,4vw,32px);color:#f3e6c8;text-shadow:0 0 22px rgba(196,59,59,.65);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;text-align:center;width:90%}#toast.show{opacity:1;transform:translate(-50%)}#floats{position:fixed;inset:0;pointer-events:none;z-index:5}.float{position:absolute;font-family:Cinzel,serif;font-size:13px;color:#f2e2b6;transform:translate(-50%,-50%);opacity:0;animation:floatUp .7s ease-out forwards;text-shadow:0 1px 2px #000}.float.xp{color:var(--xp)}.float.crit{color:#fff3c4;font-size:16px}@keyframes floatUp{0%{opacity:1;transform:translate(-50%,-40%)}to{opacity:0;transform:translate(-50%,-140%)}}#pulse-btn{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:5;width:78px;height:78px;border-radius:50%;padding:0;overflow:hidden}#pulse-cd{position:absolute;inset:0;background:conic-gradient(rgba(0,0,0,.7) var(--p, 0%),transparent 0);pointer-events:none}#stick{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));z-index:5;width:126px;height:126px;border:1px solid rgba(224,177,90,.3);border-radius:50%;pointer-events:auto}#stick-knob{position:absolute;width:52px;height:52px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#e0b15a59;border:1px solid var(--gold)}body.touch #hint{display:none}#overlay.over h1{font-size:clamp(36px,8vw,60px)}.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;width:min(320px,80vw);margin:12px auto 22px;text-align:center;font-family:Cinzel,serif;font-size:12px;letter-spacing:.1em;color:var(--dim)}.statgrid b{display:block;color:var(--gold);font-size:16px;margin-top:3px}
