:root{--gold:#e8c06a;--ink:#ece7ff;--dim:rgba(220,214,245,.72);--bd:rgba(150,130,230,.2)}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:#06050f;color:var(--ink);font-family:system-ui,sans-serif;overflow:hidden}#app{position:fixed;inset:0}canvas{display:block}.ui{position:fixed;inset:0;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}.ui .pointer{pointer-events:auto}.deco{font-family:Cinzel Decorative,serif}.cinzel{font-family:Cinzel,serif}.spectral{font-family:Spectral,serif}.top{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 18px}.brand h1{font-family:Cinzel Decorative,serif;font-size:clamp(20px,4vw,34px);margin:0;text-shadow:0 0 30px rgba(150,120,255,.4)}.brand p{margin:2px 0 0;font-family:Cinzel,serif;font-size:11px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}.hud{display:flex;gap:8px}.hud .b{background:#0c091ea8;border:1px solid var(--bd);border-radius:12px;padding:7px 11px;backdrop-filter:blur(8px);min-width:84px}.hud .b small{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}.hud .b b{font-family:Cinzel,serif;color:var(--gold);font-size:13px}.xp{height:4px;border-radius:3px;background:#ffffff1f;margin-top:4px;overflow:hidden}.xp i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9bcdff,#be9bff);transition:width .5s}.bottom{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 16px 26px}.caption{max-width:560px;text-align:center;min-height:62px}.caption .tag{font-family:Cinzel,serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}.caption .rar{font-family:Cinzel,serif;font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:1px 8px;border:1px solid currentColor;border-radius:999px;margin-left:8px;color:#9fb0d8}.caption .ans{margin:8px 0 0;font-family:Spectral,serif;font-style:italic;font-size:clamp(15px,2.6vw,20px);line-height:1.45;min-height:28px}.panel{pointer-events:auto;width:min(94vw,560px);display:flex;flex-direction:column;gap:10px}.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.cat{all:unset;cursor:pointer;text-align:center;padding:9px 4px;border-radius:11px;font-family:Cinzel,serif;font-size:12px;color:var(--ink);background:#1410308c;border:1px solid var(--bd);transition:.2s}.cat:hover{border-color:#9682e699}.cat.on{border-color:var(--gold);color:var(--gold);background:#e8c06a1f}.row{display:flex;gap:8px}.row input{flex:1;min-width:0;padding:12px 14px;border-radius:11px;border:1px solid var(--bd);background:#0c091e99;color:#eee;font-family:Spectral,serif;font-size:15px;outline:none}.btn{all:unset;cursor:pointer;padding:12px 20px;border-radius:11px;text-align:center;border:1px solid rgba(232,192,106,.6);background:linear-gradient(180deg,#e8c06a38,#b48c3c24);color:var(--gold);font-family:Cinzel,serif;font-weight:700;font-size:13px;transition:.2s}.btn:hover{border-color:var(--gold)}.btn[disabled]{opacity:.5;cursor:wait}.moods{display:flex;justify-content:center;gap:5px}.moods button{all:unset;cursor:pointer;padding:6px 14px;border-radius:9px;font-family:Cinzel,serif;font-size:12px;color:var(--dim);border:1px solid var(--bd)}.moods button.on{color:var(--gold);border-color:var(--gold);background:#e8c06a1a}.hidden{display:none!important}.wheel-btn{all:unset;cursor:pointer;margin-top:8px;padding:6px 14px;border-radius:999px;font-family:Cinzel,serif;font-size:11px;letter-spacing:.06em;color:var(--gold);border:1px solid rgba(232,192,106,.5);background:#e8c06a14}.wheel-btn:hover{border-color:var(--gold)}.wheel-btn.hidden{display:none}.wheel-overlay{position:fixed;inset:0;z-index:30;background:#06050fe0;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);pointer-events:auto}.wheel-overlay.show{display:flex}.wheel-overlay svg{width:min(88vw,560px);height:auto;filter:drop-shadow(0 0 40px rgba(150,120,255,.35))}.wheel-close{position:absolute;top:16px;right:20px;all:unset;cursor:pointer;color:#cfc8e8;font-size:26px;font-family:Cinzel,serif}.wheel-overlay{align-items:flex-start;overflow-y:auto;padding:24px 12px}#wheel-host{position:relative;width:100%;display:flex;justify-content:center}.grim{width:min(96vw,980px);background:radial-gradient(120% 80% at 50% 0%,#3a2a7a80,#0d0a1ff0);border:1px solid rgba(232,192,106,.45);border-radius:18px;padding:22px 22px 28px;color:#e9e4ff;box-shadow:0 0 60px #785adc59,inset 0 0 40px #5032a033}.grim-head{text-align:center;margin-bottom:14px}.grim h2{font-family:Cinzel,serif;color:#e8c06a;margin:0;font-size:22px;letter-spacing:.04em}.grim-sub{color:#b9b0e0;font-size:12px;margin-top:4px}.grim h3{font-family:Cinzel,serif;color:#cdb6ff;font-size:13px;letter-spacing:.07em;margin:0 0 10px;text-transform:uppercase}.grim-main{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;justify-content:center}.grim-wheel{flex:1 1 360px;max-width:480px;min-width:300px;position:relative}.grim-wheel svg{width:100%;height:auto;filter:drop-shadow(0 0 30px rgba(150,120,255,.35))}.grim-wheel .hint{text-align:center;color:#8f86bb;font-size:11px;margin-top:6px}.grim-panel{flex:1 1 320px;min-width:280px;max-width:440px}.tcard{background:#281c5073;border:1px solid rgba(180,150,255,.25);border-radius:12px;padding:10px 12px;margin-bottom:10px}.tcard-h{display:flex;align-items:center;gap:8px;color:#f0ecff}.tcard .tg{font-size:18px;color:#ffd98a}.tcard .role{margin:6px 0 2px;color:#c9c2ec;font-size:13px}.tcard .kw{margin:0;color:#9a91c4;font-size:12px;font-style:italic}.tcard.note{color:#cbb6ff;font-size:12.5px}.domel{margin:6px 0 12px;color:#ecd9a8;font-size:13px;background:#e8c06a14;border:1px solid rgba(232,192,106,.25);border-radius:10px;padding:8px 10px}.gloss{color:#c4bce6;font-size:12.5px}.gloss summary{cursor:pointer;color:#cdb6ff;margin-bottom:6px}.gloss p{margin:4px 0}.grim-cultures{margin-top:22px;border-top:1px solid rgba(232,192,106,.2);padding-top:16px}.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.ccard{display:flex;gap:10px;background:#281c5066;border:1px solid rgba(180,150,255,.22);border-radius:12px;padding:12px}.ccard.wide{grid-column:1/-1}.cglyph{font-size:30px;line-height:1}.csys{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:#9b92c6;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.csign{font-family:Cinzel,serif;color:#ffe1a6;font-size:15px;margin:2px 0}.cone{color:#c9c2ec;font-size:12.5px}.cnote{margin-top:6px;color:#b3a9d6;font-size:11.5px;font-style:italic;border-left:2px solid rgba(232,192,106,.4);padding-left:8px}.pill{font-size:9.5px;text-transform:none;letter-spacing:0;background:#e8c06a24;color:#e8c06a;border:1px solid rgba(232,192,106,.3);border-radius:999px;padding:1px 7px}.grim-tip{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;background:#0d0a1ff5;border:1px solid rgba(232,192,106,.5);color:#ece7ff;font-size:12px;padding:6px 10px;border-radius:8px;max-width:240px;z-index:40;box-shadow:0 4px 20px #00000080}.grim-share{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0 2px}.sbtn{all:unset;cursor:pointer;font-family:Cinzel,serif;font-size:12px;letter-spacing:.04em;color:#e9e4ff;border:1px solid rgba(232,192,106,.45);background:#e8c06a14;border-radius:999px;padding:7px 14px}.sbtn:hover{border-color:#e8c06a;background:#e8c06a29}.sbtn:disabled{opacity:.5;cursor:default}.grim-toast{position:absolute;left:50%;bottom:18px;transform:translate(-50%);background:#0d0a1ff5;border:1px solid rgba(232,192,106,.5);color:#ece7ff;font-size:13px;padding:8px 16px;border-radius:999px;opacity:0;transition:opacity .2s;z-index:50;pointer-events:none}