/* The look: a walnut boardroom with brass nameplates, and on top of it the cheerful software the company makes everyone use.
   Design system (the kit is law; screens.css derives from the same tokens):
   - Surfaces: walnut panels, near-black, with a 1px brass2 line (HUD plates) or a brass line plus an inner black line (windows, cards).
   - Type: Cinzel for anything engraved (titles, names, numbers that matter); Alegreya Sans for reading; the system face only for the company's own software (banner, calendar, toasts, spreadsheet).
   - Colour law: bright red is only the player; green is ours; pink-purple is enemy attacks; yellow-and-black marks elites. Rarity colours are the six below and nothing else.
   - Spacing: 4 / 8 / 12 / 20. Motion: 120ms taps, 250ms panels, 500ms moments; every flash and sweep is off under .reduced-flash and prefers-reduced-motion. */
@font-face{font-family:Cinzel;src:url(fonts/Cinzel.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Alegreya Sans';src:url(fonts/AlegreyaSans-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Alegreya Sans';src:url(fonts/AlegreyaSans-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
:root{color-scheme:dark;--ink:#efe6d2;--dim:#a99c84;--faint:#6f6553;--brass:#c9a45c;--brass-hi:#f3dfb2;--brass2:#8a6d38;--walnut:#1c140d;--walnut2:#2a1d12;--walnut3:#34231a;--panel:rgba(22,15,9,.92);--red:#8e2a22;--red2:#c23a2c;--ok:#3fd16a;--warn:#e0a81e;--bad:#e0493a;--enemy:#ff5af0;--corp:#1f4e8c;
 --r-common:#b9b4a8;--r-uncommon:#7fd27f;--r-rare:#5aa9ff;--r-epic:#c07bff;--r-legendary:#ffb13c;--r-mythic:#ff6f59;
 --s1:4px;--s2:8px;--s3:12px;--s4:20px;--fast:.12s;--mid:.25s;--slow:.5s;
 --display:Cinzel,Georgia,serif;--body:'Alegreya Sans',Georgia,serif;--sys:-apple-system,"Segoe UI",Arial,sans-serif;--scale:1;
 --brass-text:linear-gradient(180deg,#fff0cf 0%,#e4c57e 45%,#c9a45c 60%,#8a6d38 100%);
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .65 0 0 0 0 .4 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0e0c0a;overflow:hidden;font:15px/1.3 var(--body);color:var(--ink);user-select:none}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block}#ui{position:fixed;inset:0;pointer-events:none;z-index:2}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}.hud{position:absolute;inset:0;transform-origin:0 0}
.lowkey canvas#c{filter:grayscale(1) contrast(.86) brightness(1.15)}
.brasstext{background:var(--brass-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.plate{background:var(--panel);border:1px solid var(--brass2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,230,180,.06),0 2px 8px rgba(0,0,0,.5);border-radius:2px}
/* --- top banner: company comms --- */
#banner{position:absolute;left:0;right:0;top:0;height:32px;background:var(--corp);color:#fff;font:600 14px/32px var(--sys);padding:0 14px;display:flex;gap:10px;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.4);transition:transform var(--mid)}#banner .tag{background:#fff;color:var(--corp);font-size:11px;line-height:1;padding:4px 7px;border-radius:3px;letter-spacing:.04em;white-space:nowrap}#banner .bk{font:500 11px/1 var(--sys);opacity:.85;white-space:nowrap;margin-left:auto}#banner .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* --- player plate: the brass nameplate on the desk --- */
#me{position:absolute;left:10px;top:42px;width:304px;padding:9px 10px 8px;display:grid;grid-template-columns:58px 1fr;gap:4px 10px}
#me .face{grid-row:span 3;width:58px;height:58px;border:1px solid var(--brass);outline:1px solid #000;outline-offset:-3px;background:radial-gradient(circle at 50% 30%,#2a1d12,#120c07 75%);display:grid;place-items:center;font:700 22px var(--display);color:var(--brass-hi);position:relative;text-shadow:0 1px 0 #000}
#me .lvl{position:absolute;right:-7px;bottom:-7px;font:700 11px/20px var(--display);min-width:20px;height:20px;padding:0 3px;text-align:center;background:linear-gradient(#a23327,#6f1f18);border:1px solid var(--brass);color:#fff4dc;border-radius:50%;box-shadow:0 1px 3px #000}
#me .nm{font:700 15px/1.1 var(--display);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--brass-hi)}#me .nm small{font:12.5px var(--body);color:var(--dim);margin-left:6px;letter-spacing:0}
.bar{height:14px;background:#120c07;border:1px solid #000;box-shadow:inset 0 0 0 1px rgba(201,164,92,.18);position:relative;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(#59e07f,#279c49);width:100%;position:relative;z-index:1}.bar b{position:absolute;inset:0;z-index:3;text-align:center;font:600 10px/13px var(--sys);text-shadow:0 1px 2px #000,0 0 2px #000}.bar .sh{position:absolute;left:0;top:0;bottom:0;z-index:2;background:rgba(150,200,255,.55)}
.bar .gh{position:absolute;left:0;top:0;bottom:0;background:#c23a2c;transition:width var(--slow) ease .3s}
#me .row{grid-column:1/3;display:flex;gap:14px;font-size:13px;color:var(--dim);margin-top:3px}#me .row b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
#me .status{display:inline-flex;align-items:center;gap:5px;font:600 12px var(--sys);color:#d6ccb8}#me .status i{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 1px #000,0 0 5px var(--ok)}#me .status.away i{background:var(--warn);box-shadow:0 0 0 1px #000,0 0 5px var(--warn)}#me .status.offline i{background:#6f6553;box-shadow:0 0 0 1px #000}#me .status.offline{color:var(--dim)}
/* --- right column --- */
#rcol{position:absolute;right:10px;top:42px;width:164px;display:flex;flex-direction:column;gap:6px;align-items:center}
#mini{width:164px;height:164px;display:block;background:#120c07;border:1px solid var(--brass2);border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.5)}
#cal{width:100%;background:#fff;color:#222;font:12px/1.25 var(--sys);border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.4);overflow:hidden}#cal .h{background:#eef2f7;padding:5px 8px;font-weight:600;display:flex;justify-content:space-between}#cal .e{margin:3px 5px;padding:3px 6px;border-left:3px solid var(--corp);background:#dbe7f6;border-radius:2px;display:flex;justify-content:space-between;gap:6px}#cal .e.x{border-color:#c0392b;background:#f8dedb}#cal .e.d{opacity:.45;text-decoration:line-through}#cal .e span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
#clock{width:100%;text-align:center;font:700 24px/1 var(--display);padding:6px 5px 5px;font-variant-numeric:tabular-nums;color:var(--brass-hi)}#clock small{display:block;font:12.5px var(--body);color:var(--dim);margin-top:3px}
/* --- boss --- */
#boss{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:min(600px,calc(100vw - 500px));min-width:280px;padding:6px 12px 7px;text-align:center;display:none;animation:bossin var(--slow) cubic-bezier(.2,.8,.2,1) backwards}#boss .n{font:700 15px var(--display);letter-spacing:.04em;color:#ffd9d4;text-shadow:0 1px 2px #000}#boss .n small{display:block;font:12.5px var(--body);color:#f2e6c9;letter-spacing:0}#boss.shut .bar i{background:linear-gradient(#8d939c,#565b63)}#boss.open .bar i{background:linear-gradient(#ffe08a,#e39a2a)}#boss.thermo .bar i{background:linear-gradient(#ff8a3c,#d8341c)}.slot.kw{box-shadow:0 0 0 2px #3fd16a,0 0 8px #3fd16a}#dark{position:absolute;inset:0;background:rgba(2,3,8,.55);pointer-events:none;display:none}#boss .bar{height:15px;margin-top:4px;box-shadow:inset 0 0 0 1px rgba(201,164,92,.25)}#boss .bar i{background:linear-gradient(#e0493a,#8e2a22);transition:width .2s}
@keyframes bossin{from{opacity:0;transform:translate(-50%,-14px)}}
/* --- bottom: slots + xp --- */
#bottom{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:min(820px,calc(100vw - 20px))}
#slots{display:flex;gap:6px;justify-content:center;align-items:flex-end;margin-bottom:6px}.sgroup{display:flex;gap:4px;padding:4px;background:rgba(10,7,4,.6);border:1px solid rgba(201,164,92,.28);border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.sgroup.items,.sgroup.perks{display:grid;grid-template-columns:repeat(3,auto)}.sgroup.items{grid-auto-flow:row}
.slot{width:50px;height:50px;background:radial-gradient(circle at 50% 35%,#231810,#120c07 75%);border:1px solid var(--brass2);box-shadow:inset 0 0 0 1px #000;position:relative;overflow:hidden;display:grid;place-items:center;font:700 13px var(--display);color:var(--ink)}.slot.empty{opacity:.3}.slot.small{width:32px;height:32px}
.slot .gl{width:32px;height:32px;position:relative;z-index:1;filter:drop-shadow(0 0 3px rgba(0,0,0,.9)) drop-shadow(0 0 5px currentColor)}.slot.small .gl{width:21px;height:21px;filter:drop-shadow(0 0 2px rgba(0,0,0,.9)) drop-shadow(0 0 3px currentColor)}
.slot .cd{position:absolute;left:0;right:0;bottom:0;z-index:2;background:rgba(0,0,0,.7)}.slot .rk{position:absolute;right:2px;bottom:-1px;z-index:3;font:700 9px var(--sys);color:var(--brass);text-shadow:0 1px 1px #000}
.pips{position:absolute;left:0;right:0;bottom:3px;z-index:3;display:flex;gap:2px;justify-content:center}.pips i{width:6px;height:3px;background:#3a2c1a;box-shadow:0 0 0 1px #000}.pips i.on{background:var(--brass)}
.slot.evolved{border-color:var(--brass);box-shadow:inset 0 0 0 1px #000,0 0 8px rgba(255,214,130,.35)}
.slot.item{--rc:var(--r-common);border-color:var(--rc);background:radial-gradient(circle at 50% 120%,color-mix(in srgb,var(--rc) 28%,#120c07),#120c07 70%)}.slot.item.uncommon{--rc:var(--r-uncommon)}.slot.item.rare{--rc:var(--r-rare)}.slot.item.epic{--rc:var(--r-epic)}.slot.item.legendary{--rc:var(--r-legendary)}.slot.item.mythic{--rc:var(--r-mythic)}
#exec{width:58px;height:58px;border-color:var(--brass);background:linear-gradient(#a23327,#6f1f18);pointer-events:auto;box-shadow:inset 0 0 0 1px #000,0 0 10px rgba(194,58,44,.35)}#exec.cool{background:#2a1a12;box-shadow:inset 0 0 0 1px #000}#exec .gl{width:34px;height:34px}#exec .k,#uil .k{position:absolute;left:0;right:0;top:2px;z-index:3;text-align:center;font:700 8px/1 var(--sys);letter-spacing:.08em;color:#fffa}
#uil{pointer-events:auto;width:40px;height:58px;border-color:#2f7a45;background:radial-gradient(circle at 50% 35%,#1b2e1c,#0d140d 75%);box-shadow:inset 0 0 0 1px #000,0 0 8px rgba(63,209,106,.2)}#uil .gl{width:24px;height:24px;margin-top:8px}#uil:hover:not(.used){filter:brightness(1.25)}#uil.used{opacity:.35;cursor:default;border-color:var(--brass2);background:#120c07}#uil.used .gl{filter:grayscale(1)}
#xp{height:14px;background:#120c07;border:1px solid var(--brass2);box-shadow:inset 0 0 0 1px #000;position:relative}#xp i{display:block;height:100%;background:linear-gradient(#ffe082,#c9a45c);width:0;transition:width .15s linear}#xp b{position:absolute;inset:0;text-align:center;font:600 10px/12px var(--sys);color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
/* --- log and chat --- */
#log{position:absolute;left:10px;bottom:10px;width:290px;font-size:13.5px;line-height:1.25;text-shadow:0 1px 2px #000,0 0 3px #000;display:flex;flex-direction:column;justify-content:flex-end;height:130px;overflow:hidden;color:#d6ccb8;mask-image:linear-gradient(transparent,#000 30%)}#log .boss{color:#ff9d90;font-weight:700}#log .elite{color:#ffd76a}#log .item{color:#8fc8ff}
#toasts{position:absolute;right:10px;bottom:10px;width:262px;display:flex;flex-direction:column;gap:6px;align-items:stretch}.toast{background:#fff;color:#222;font:13px/1.3 var(--sys);padding:8px 10px 8px 12px;border-radius:6px;border-left:3px solid var(--corp);box-shadow:0 3px 12px rgba(0,0,0,.45);animation:tin var(--mid) cubic-bezier(.2,.8,.2,1);transition:opacity .3s}.toast b{display:block;font-size:12px;color:var(--corp)}@keyframes tin{from{opacity:0;transform:translateY(10px)}}
#float{position:absolute;inset:0;overflow:hidden}.fl{position:absolute;font:700 15px var(--body);color:#fff;text-shadow:0 1px 3px #000,0 0 6px #000;white-space:nowrap;transform:translate(-50%,-50%);animation:fl 1.5s forwards}@keyframes fl{to{opacity:0;margin-top:-34px}}
#big{position:absolute;left:50%;top:22%;transform:translateX(-50%);text-align:center;pointer-events:none;width:90%}#big div{font:800 42px var(--display);letter-spacing:.03em;color:#ffe2a6;text-shadow:0 3px 14px #000,0 0 2px #000;animation:bigin 2.6s forwards;opacity:0}#big small{display:block;font:italic 18px var(--body);color:#fff;text-shadow:0 2px 8px #000;margin-top:2px;letter-spacing:0}@keyframes bigin{10%{opacity:1}75%{opacity:1}100%{opacity:0}}
#flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 58%,rgba(255,222,150,.55),rgba(255,200,110,.18) 35%,transparent 65%)}#flash.on{animation:lvflash .7s ease-out}@keyframes lvflash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.nameplate{position:absolute;left:0;top:0;font:700 11px/1.1 var(--sys);color:#e6ddcc;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap;will-change:transform}.nameplate.elite{color:#ffd76a;font-size:12px}.nameplate.special{color:#7fd3ff}
.prep{position:absolute;left:50%;bottom:108px;transform:translateX(-50%);pointer-events:auto;width:min(620px,calc(100vw - 20px))}.prep .win{padding:10px 14px;max-width:none}.prep p{margin:4px 0 8px}.prep .ph{display:flex;justify-content:space-between;font:700 16px var(--display);color:#ffe2a6}.prep kbd{font:700 12px var(--sys);padding:1px 5px;border:1px solid var(--brass2);background:#120c07}.prep .cardbtns{margin-top:0}.card .lock{position:absolute;right:8px;bottom:6px;font:700 11px var(--sys);padding:2px 6px;border:1px solid var(--brass2);background:#120c07}
/* --- level-up: time stops, the light comes in --- */
.over{position:absolute;inset:0;background:rgba(6,4,2,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;z-index:5;text-align:center;padding:16px;overflow:hidden}
.over.cards{background:radial-gradient(ellipse at 50% 45%,rgba(60,40,16,.55),rgba(6,4,2,.86) 70%)}
#rays,#rays2{position:absolute;left:50%;top:50%;width:170vmax;height:170vmax;margin:-85vmax;pointer-events:none}
#rays{background:repeating-conic-gradient(rgba(255,214,130,.1) 0 7deg,transparent 7deg 21deg);animation:spin 48s linear infinite;mask-image:radial-gradient(closest-side,#000 8%,transparent 56%)}
#rays2{background:repeating-conic-gradient(rgba(255,236,190,.07) 0 4deg,transparent 4deg 30deg);animation:spin 70s linear infinite reverse;mask-image:radial-gradient(closest-side,#000 5%,transparent 55%)}
@keyframes spin{to{transform:rotate(360deg)}}
.lvhead{position:relative;animation:lvpop var(--slow) cubic-bezier(.2,.9,.2,1) backwards}.lvhead small{display:block;font:700 12px var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin-bottom:2px}
.cards h2{position:relative;font:900 46px/1 var(--display);margin:0 0 6px;letter-spacing:.04em;background:var(--brass-text);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #000) drop-shadow(0 3px 12px rgba(0,0,0,.8))}.cards .sub{position:relative;color:var(--dim);margin-bottom:16px;font-size:15px}
@keyframes lvpop{from{opacity:0;transform:scale(.8) translateY(10px)}}
.cardrow{position:relative;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.card{width:244px;min-height:300px;padding:12px 14px 10px;text-align:left;background:linear-gradient(#2d1f13,#160f09 70%,#120c07);border:1px solid var(--r);box-shadow:inset 0 0 0 1px #000,inset 0 3px 0 var(--r),0 8px 24px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:5px;position:relative;transition:transform var(--fast),box-shadow var(--fast);--r:var(--r-common);animation:cardin .4s cubic-bezier(.2,.8,.2,1) backwards}
.card::before{content:'';position:absolute;inset:0;background:var(--grain);opacity:.06;pointer-events:none;mix-blend-mode:screen}
.card:hover,.card:focus-visible{transform:translateY(-8px);box-shadow:inset 0 0 0 1px #000,inset 0 3px 0 var(--r),0 0 0 1px var(--r),0 0 26px color-mix(in srgb,var(--r) 55%,transparent),0 12px 28px rgba(0,0,0,.6);outline:0}@keyframes cardin{from{opacity:0;transform:translateY(22px) scale(.95)}}
.card.uncommon{--r:var(--r-uncommon)}.card.rare{--r:var(--r-rare)}.card.epic{--r:var(--r-epic)}.card.legendary{--r:var(--r-legendary)}.card.mythic{--r:var(--r-mythic)}
.card .kind{font:700 11px var(--sys);letter-spacing:.08em;text-transform:uppercase;color:var(--r)}
.card .pic{height:64px;display:grid;place-items:center;margin:2px 0 0;background:radial-gradient(circle,color-mix(in srgb,var(--r) 22%,transparent),transparent 65%)}.card .pic .gl{width:46px;height:46px;filter:drop-shadow(0 0 4px rgba(0,0,0,.9)) drop-shadow(0 0 8px currentColor)}
.card .name{font:700 19px/1.1 var(--display);color:var(--brass-hi)}.card .tags{font-size:12px;color:var(--dim)}.card .desc{font-size:14px}.card .joke{font-style:italic;color:var(--dim);font-size:13px;margin-top:auto;padding-top:6px;border-top:1px solid rgba(201,164,92,.18)}.card ul{list-style:none;margin:0;padding:0;font:13px/1.5 var(--sys)}.card ul b{color:#9df2b4;font-weight:600;float:right;font-variant-numeric:tabular-nums}.card ul b.minus{color:#ff9d90}.card .key{position:absolute;right:8px;top:7px;width:20px;height:20px;line-height:18px;text-align:center;font:700 12px/18px var(--sys);color:var(--r);border:1px solid var(--r);border-radius:2px;opacity:.9}
.cardbtns{position:relative;display:flex;gap:10px;margin-top:16px}
.btn{padding:8px 18px;background:linear-gradient(#a23327,#6f1f18);border:1px solid var(--brass);box-shadow:inset 0 1px 0 rgba(255,230,180,.18),inset 0 0 0 1px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);font:700 15px var(--display);letter-spacing:.03em;color:#fff4dc;text-shadow:0 1px 1px #000;pointer-events:auto;transition:filter var(--fast),transform var(--fast)}.btn:hover:not(:disabled){filter:brightness(1.18)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:default}.btn.alt{background:linear-gradient(#3a2a1a,#21160c);border-color:var(--brass2)}.btn.big{font-size:22px;padding:12px 40px}
/* --- windows --- */
.win{background:var(--walnut);border:1px solid var(--brass);box-shadow:inset 0 0 0 1px #000,0 8px 30px rgba(0,0,0,.6);padding:16px 20px;max-width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;text-align:left}.win h2{font:700 24px var(--display);margin:0 0 8px;color:#ffe2a6}
#quiz{position:absolute;left:50%;top:26%;transform:translateX(-50%);padding:12px 18px;text-align:center;pointer-events:none}#quiz h3{margin:0;font:700 17px var(--display);color:#ffe2a6}#quiz .keys{display:flex;gap:6px;justify-content:center;margin:8px 0;font:700 20px var(--sys)}#quiz .keys span{width:36px;height:36px;line-height:34px;border:1px solid var(--brass);background:#120c07}#quiz .keys span.ok{background:#1f6b39;color:#fff}#quiz .bar i{background:var(--warn)}
#perf{position:absolute;left:10px;top:170px;font:11px var(--sys);color:#fffa;text-shadow:0 1px 1px #000;display:none}
/* --- loading: the sepia boardroom --- */
#loading{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#5a4227,#20150b 70%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:8vh;pointer-events:auto;z-index:20;text-align:center}
#loading .art{position:absolute;inset:0;background:center/cover;opacity:.9;filter:sepia(.45) contrast(1.05)}
#loading::before{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 35%,transparent 30%,rgba(14,9,4,.55) 75%,rgba(8,5,2,.9)),linear-gradient(transparent 55%,rgba(10,6,3,.85));pointer-events:none}
#loading::after{content:'';position:absolute;inset:0;z-index:1;background:var(--grain);opacity:.07;mix-blend-mode:overlay;pointer-events:none}
#loading h1{position:relative;z-index:2;font:900 64px/1 var(--display);margin:0 0 4px;letter-spacing:.08em;background:var(--brass-text);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #1a1208) drop-shadow(0 4px 18px rgba(0,0,0,.9))}
#loading h1::after{content:'';display:block;height:1px;margin:10px auto 0;width:60%;background:linear-gradient(90deg,transparent,var(--brass),transparent)}
#loading .tip{position:relative;z-index:2;max-width:620px;margin:10px 16px 16px;padding:8px 18px;font:italic 17px/1.35 var(--body);color:#f3e7cd;text-shadow:0 1px 6px #000;min-height:48px;background:rgba(16,10,5,.55);border:1px solid rgba(201,164,92,.35)}
#loading .pb{position:relative;z-index:2;width:min(520px,76vw);height:12px;border:1px solid var(--brass);background:#120c07;box-shadow:0 0 0 3px #120c07,0 0 0 4px var(--brass2),0 4px 12px rgba(0,0,0,.6)}
#loading .pb::before,#loading .pb::after{content:'';position:absolute;top:50%;width:9px;height:9px;background:var(--brass);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 0 2px #120c07}#loading .pb::before{left:-7px}#loading .pb::after{left:calc(100% + 7px)}
#loading .pb i{display:block;height:100%;width:0;background:linear-gradient(#ffe6a8,#c9a45c 55%,#a97f35);transition:width .2s}#loading .st{position:relative;z-index:2;margin-top:10px;color:var(--dim);font:13px var(--body);letter-spacing:.04em;text-transform:uppercase}
/* --- boss key --- */
#sheet{position:fixed;inset:0;z-index:50;background:#fff;color:#222;font:12px/20px Arial,sans-serif;pointer-events:auto;overflow:hidden}#sheet .ribbon{background:#217346;color:#fff;padding:5px 10px;font-size:13px}#sheet .bar2{background:#f3f3f3;padding:4px 10px;border-bottom:1px solid #ccc;color:#555}#sheet table{border-collapse:collapse;width:100%}#sheet td,#sheet th{border:1px solid #d4d4d4;padding:0 5px;white-space:nowrap;min-width:72px;text-align:right}#sheet th{background:#f3f3f3;font-weight:400;text-align:center}#sheet td:first-child,#sheet th:first-child{background:#f3f3f3;min-width:28px;text-align:center}
/* --- motion off: Reduced flash in Options, or the system setting. Base states are the full design. --- */
.reduced-flash #rays,.reduced-flash #rays2,.reduced-flash .card,.reduced-flash .lvhead,.reduced-flash #flash.on,.reduced-flash #boss{animation:none}.reduced-flash .bar .gh{transition:none}
@media(prefers-reduced-motion:reduce){#rays,#rays2,.card,.lvhead,#flash.on,#boss,.toast{animation:none}.bar .gh,.card,.btn{transition:none}}
/* --- small laptops: the same HUD, a notch tighter --- */
@media(max-width:1400px){.slot{width:44px;height:44px}.slot .gl{width:28px;height:28px}.slot.small{width:30px;height:30px}.slot.small .gl{width:19px;height:19px}#exec{width:52px;height:52px}#exec .gl{width:30px;height:30px}#me{width:290px}#cal .e{margin:2px 4px}}
@media(max-width:800px){#log,#perf{display:none}#me{width:210px}#rcol{width:110px}#mini{width:110px;height:110px}.slot{width:30px;height:30px}.slot .gl{width:20px;height:20px}#cal{display:none}.card{width:calc(100vw - 40px);min-height:0}#boss{min-width:0;width:calc(100vw - 340px)}}

/* Hurt: a red edge that fades, and a slow pulse while you're Away. */
.vign{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 120px 30px rgba(190,20,10,.75)}.vign.hit{animation:vign .38s ease-out}@keyframes vign{0%{opacity:1}100%{opacity:0}}
.lowhp{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 160px 50px rgba(190,20,10,.55);transition:opacity .3s}.lowhp.on{animation:lowhp 1.1s ease-in-out infinite}@keyframes lowhp{50%{opacity:.75}0%,100%{opacity:.25}}
.reduced-flash .lowhp.on{animation:none;opacity:.35}
@media(min-width:1600px){.card{width:286px;min-height:340px;font-size:16px}.card .name{font-size:22px}}

@media(max-width:800px){.over.cards{overflow:auto;justify-content:flex-start}.over.cards #rays{position:fixed}}

/* Names under the main icons, and a tooltip for everything on the bar. */
.sk{display:flex;flex-direction:column;align-items:center;gap:2px}.sk .lbl{font:600 10.5px/1.05 var(--sys);color:#e6ddcc;text-align:center;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.sgroup.skills{padding-bottom:2px}.slot[data-tip]{pointer-events:auto;cursor:help}.slot[data-tip]:hover{border-color:#ffe2a6;filter:brightness(1.2)}

.tip{position:absolute;display:none;transform:translate(-50%,-100%);width:280px;padding:9px 12px;z-index:6;pointer-events:none;text-align:left;font-size:14px;line-height:1.3}.tip h4{margin:0;font:700 16px var(--display);color:#ffe2a6}.tip .tk{font:600 11px var(--sys);color:var(--brass);margin:1px 0 5px}.tip p{margin:4px 0}.tip ul{list-style:none;margin:4px 0;padding:0;font:13px/1.45 var(--sys)}.tip ul b{float:right;color:#9df2b4;font-weight:600}.tip .te{color:#ffd76a;font-size:13px}.tip .tj{font-style:italic;color:var(--dim);font-size:13px}
.howto{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 24px));padding:14px 18px;z-index:6;pointer-events:none}.howto.start{top:12%;transform:translateX(-50%);width:min(430px,calc(100vw - 24px));padding:10px 14px}.howto h3{margin:0 0 6px;font:700 20px var(--display);color:#ffe2a6}.howto .hgo{margin:8px 0 0;font:700 15px var(--display);color:#9df2b4;text-align:center}
.ctrl{border-collapse:collapse;width:100%;font-size:14px;line-height:1.25}.ctrl td{padding:3px 6px;vertical-align:top}.ctrl td:first-child{white-space:nowrap;text-align:right;width:1%}.ctrl kbd{font:700 11px var(--sys);padding:2px 6px;border:1px solid var(--brass2);background:#120c07;color:#ffe2a6;border-radius:2px}.ctrl b{color:#ffe2a6}
@media(max-width:800px){.sk .lbl,#banner .bk{display:none}}

/* Loot: small labels on rare things, and a short label when you pick something up. */
.nameplate.loot{color:#ffe08a;font-size:11px}
.pk{position:absolute;transform:translate(-50%,-50%);font:700 13px var(--sys);color:#ffe08a;text-shadow:0 1px 3px #000,0 0 5px #000;white-space:nowrap;animation:pk 1.4s ease-out forwards;pointer-events:none}.pk.big{font:700 18px var(--display);color:#fff4d0}.pk.rare{color:var(--r-rare)}.pk.epic{color:var(--r-epic)}.pk.legendary{color:var(--r-legendary)}@keyframes pk{0%{opacity:0;margin-top:6px}12%{opacity:1;margin-top:0}70%{opacity:1}100%{opacity:0;margin-top:-30px}}

.nameplate.loot.spot{color:#9df2b4;font-size:13px}