:root{--ink-0:#0a0805;--ink-1:#14100a;--panel-0:#1b160e;--panel-1:#120e08;--raised:#241d12;--gold:#f3c34a;--gold-bright:#ffe39a;--gold-deep:#b9882c;--bronze:#7d5c2c;--bronze-dark:#432f15;--text-h:#f6edd8;--text:#cdbf9d;--text-dim:#8e8062;--good:#5cc46a;--bad:#d6463c;--neutral:#b0a079;--arcane:#b389ff;--keystone:#43e0cf;--epic:#a335ee;--legendary:#ff8a1f;--alliance:#3f7fd6;--horde:#c0392b;--frame:var(--bronze);--display:"Cinzel", "Trajan Pro", Georgia, serif;--ornate:"Cinzel Decorative", var(--display);--body:"EB Garamond", "Iowan Old Style", Georgia, serif;font:17px/1.6 var(--body);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-height:100svh;color:var(--text);background:radial-gradient(1200px 680px at 50% -12%, #3a2f1a 0%, #3a2f1a00 55%), radial-gradient(900px 600px at 50% 120%, #221a2e 0%, #221a2e00 60%), linear-gradient(180deg, var(--ink-1) 0%, var(--ink-0) 100%);background-attachment:fixed;margin:0}body:before{content:"";pointer-events:none;z-index:0;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}#root{z-index:1;max-width:1040px;margin:0 auto;padding:28px 16px 72px;position:relative}h1,h2,h3{color:var(--text-h);font-family:var(--display);letter-spacing:.04em;margin:0;font-weight:700}button{font-family:var(--display)}::selection{color:var(--text-h);background:#f3c34a4d}.app{flex-direction:column;gap:22px;display:flex}.topbar{text-align:center;padding-top:6px}.topbar h1{font-family:var(--ornate);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-bright);background:linear-gradient(180deg, #fff3cf 0%, var(--gold) 45%, var(--gold-deep) 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 1px #0009)drop-shadow(0 0 22px #f3c34a47);-webkit-background-clip:text;background-clip:text;font-size:clamp(34px,6vw,54px);font-weight:900;line-height:1.05}.topbar h1 .accent{letter-spacing:.34em;margin-top:2px;font-size:.62em;display:block}.topbar-rule{max-width:420px;color:var(--gold-deep);justify-content:center;align-items:center;gap:14px;margin:14px auto 4px;display:flex}.topbar-rule:before,.topbar-rule:after{content:"";background:linear-gradient(90deg, transparent, var(--bronze) 30%, var(--gold-deep));flex:1;height:1px}.topbar-rule:after{transform:scaleX(-1)}.rule-gem{color:var(--gold);filter:drop-shadow(0 0 6px #f3c34a99);font-size:12px}.tagline{color:var(--text-dim);margin-top:10px;font-size:16px;font-style:italic}.panel{background:linear-gradient(180deg, #ffe39a0a, transparent 120px), linear-gradient(180deg, var(--panel-0), var(--panel-1));border:1px solid var(--frame);border-radius:4px;flex-direction:column;gap:20px;padding:26px 24px;display:flex;position:relative;box-shadow:0 0 0 1px #0009,inset 0 0 0 1px #f3c34a1f,inset 0 1px #ffe39a1a,0 22px 50px #0000008c}.panel:before,.panel:after{content:"";border:2px solid var(--gold-deep);opacity:.8;width:16px;height:16px;position:absolute}.panel:before{border-bottom:none;border-right:none;top:6px;left:6px}.panel:after{border-top:none;border-left:none;bottom:6px;right:6px}.banner{text-align:center;font-family:var(--display);letter-spacing:.02em;border-radius:4px;padding:11px 16px}.banner-error{color:#f0a39c;background:#d6463c24;border:1px solid #d6463c80}.intro{text-align:center;align-items:center}.intro h2{color:var(--gold);font-size:28px}.rules{text-align:left;max-width:520px;color:var(--text);margin:4px 0;padding:0;line-height:1.85;list-style:none}.rules li{padding-left:26px;position:relative}.rules li:before{content:"◆";color:var(--gold-deep);font-size:11px;position:absolute;top:.45em;left:4px}.rules strong{color:var(--gold);font-weight:600}.btn{border:1px solid var(--bronze);background:linear-gradient(180deg, var(--raised), #16110a);color:var(--text-h);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border-radius:3px;padding:11px 20px;font-size:15px;font-weight:600;transition:transform 80ms,border-color .15s,box-shadow .15s,filter .15s;position:relative;box-shadow:inset 0 1px #ffe39a1f,0 2px #00000080}.btn:hover:not(:disabled){border-color:var(--gold);transform:translateY(-1px);box-shadow:inset 0 1px #ffe39a2e,0 0 16px #f3c34a40}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 42%, var(--gold-deep) 100%);color:#2a1c05;border-color:var(--gold-bright);text-shadow:0 1px #fff5d280;box-shadow:inset 0 1px #ffffff8c,inset 0 -2px 6px #78500a80,0 3px #5e4310,0 6px 16px #00000080}.btn-primary:hover:not(:disabled){filter:brightness(1.08);border-color:#fff;box-shadow:inset 0 1px #fff9,inset 0 -2px 6px #78500a80,0 3px #5e4310,0 0 26px #f3c34a80}.btn-big{padding:15px 30px;font-size:17px}.btn-roll .rolls{color:var(--text-dim);text-transform:none;letter-spacing:0;margin-left:6px;font-size:12px}.team{grid-template-columns:repeat(5,1fr);gap:12px;display:grid}.slot{border:1px solid var(--bronze-dark);background:linear-gradient(180deg, #ffe39a08, transparent), var(--panel-1);border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:9px;min-height:104px;padding:14px 8px;display:flex;position:relative}.slot-filled{border-color:var(--bronze);box-shadow:inset 0 0 18px #00000080,inset 0 0 0 1px #f3c34a14}.slot-avatar{background:var(--ink-1);border:2px solid var(--gold-deep);border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:20px;display:flex;overflow:hidden;box-shadow:0 0 0 1px #0009,inset 0 2px 4px #fff3,inset 0 -3px 6px #00000059}.slot-avatar img{object-fit:cover;object-position:top center;width:100%;height:100%;display:block}.slot-fallback{width:100%;height:100%;font-family:var(--display);color:#0c0e14;justify-content:center;align-items:center;font-size:16px;font-weight:700;display:flex}.slot-empty{color:var(--text-dim);border-color:var(--bronze-dark);box-shadow:inset 0 0 8px #0009;background:var(--ink-1)!important}.slot-name{text-align:center;color:var(--text-h);font-size:12.5px;line-height:1.25;font-family:var(--display)}.slot-placeholder{color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em;font-size:11px}.team-compact .slot{min-height:76px;padding:9px 4px}.team-compact .slot-avatar{width:38px;height:38px;font-size:13px}.draft-head{justify-content:space-between;align-items:center;gap:14px;display:flex}.draft-head h2{color:var(--gold);font-size:22px}.series{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.card{background:linear-gradient(180deg, var(--raised), var(--panel-1));border:1px solid var(--bronze);cursor:pointer;color:var(--text);border-radius:4px;flex-direction:column;align-items:center;gap:9px;padding:16px 12px 18px;transition:transform .12s,box-shadow .18s,border-color .18s;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #f3c34a14,0 6px 16px #0006}.card:before{content:"";background:var(--role-color);height:3px;box-shadow:0 0 12px var(--role-color);position:absolute;top:0;left:0;right:0}.card:hover:not(:disabled){border-color:var(--gold);transform:translateY(-4px);box-shadow:inset 0 0 0 1px #f3c34a2e,0 14px 30px #0000008c,0 0 24px #f3c34a33}.card:disabled{cursor:default}.card-role{letter-spacing:.06em;text-transform:uppercase;color:#0c0e14;border:1px solid #00000059;border-radius:2px;align-self:flex-start;padding:2px 9px;font-size:10.5px;font-weight:700}.portrait{aspect-ratio:4/5;background:radial-gradient(circle at 50% 25%, #2a2415, var(--ink-0));border:2px solid var(--gold-deep);border-radius:4px;justify-content:center;align-items:center;width:100%;margin-top:2px;display:flex;overflow:hidden;box-shadow:0 0 0 1px #0009,inset 0 0 0 1px #f3c34a2e,inset 0 -24px 40px #0000008c,0 6px 14px #00000080}.portrait img{object-fit:cover;object-position:top center;width:100%;height:100%;display:block}.portrait-fallback{width:100%;height:100%;font-family:var(--display);color:#0c0e14;justify-content:center;align-items:center;font-size:30px;font-weight:800;display:flex}.card-name{font-family:var(--display);color:var(--text-h);text-align:center;font-size:16px;font-weight:700;line-height:1.2}.card-title{color:var(--text-dim);text-align:center;font-size:13px;font-style:italic}.card-faction{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-family:var(--display);font-weight:600}.draft-done{text-align:center;flex-direction:column;align-items:center;gap:16px;display:flex}.draft-done p{color:var(--text-h);font-size:18px}.keys-frieze{justify-content:center;align-items:flex-start;margin:2px 0 20px;display:flex}.frieze-cell{align-items:flex-start;display:flex}.frieze-link{background:repeating-linear-gradient(90deg, var(--bronze-dark) 0 5px, transparent 5px 9px);border-radius:2px;width:46px;height:3px;margin-top:25px}.frieze-link.link-done{background:linear-gradient(90deg, var(--gold-deep), var(--gold));box-shadow:0 0 8px #f3c34a66}.frieze-node{flex-direction:column;align-items:center;gap:5px;width:104px;display:flex}.node-badge{width:54px;height:54px;font-family:var(--display);border:2px solid var(--bronze);background:linear-gradient(180deg, var(--raised), var(--panel-1));color:var(--text-dim);clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);justify-content:center;align-items:center;font-size:17px;font-weight:800;display:flex}.node-key{font-family:var(--display);letter-spacing:.05em;color:var(--text-dim);font-size:12px;font-weight:700}.node-dungeon{color:var(--text-dim);text-align:center;min-height:30px;font-size:12px;line-height:1.25}.node-cleared .node-badge{border-color:var(--gold);color:#2a1c05;background:linear-gradient(180deg, var(--gold-bright), var(--gold-deep));box-shadow:0 0 14px #f3c34a73}.node-cleared .node-key,.node-cleared .node-dungeon{color:var(--text)}.node-failed .node-badge{border-color:var(--bad);color:var(--bad);background:linear-gradient(#2a1513,#1a0d0c)}.node-failed .node-key{color:var(--bad)}.node-current .node-badge{border-color:var(--keystone);color:var(--keystone);background:radial-gradient(circle at 50% 40%, #43e0cf40, var(--panel-1));animation:1.6s ease-in-out infinite keystone;box-shadow:0 0 18px #43e0cf8c,inset 0 0 12px #b389ff66}.node-current .node-key,.node-current .node-dungeon{color:var(--keystone)}@keyframes keystone{0%,to{box-shadow:0 0 14px #43e0cf73,inset 0 0 10px #b389ff4d}50%{box-shadow:0 0 26px #43e0cfcc,inset 0 0 16px #b389ff8c}}.dungeon-intro{background:var(--ink-0);border:1px solid var(--bronze);border-radius:6px;justify-content:center;align-items:center;min-height:270px;animation:.45s both introFade;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #f3c34a26,0 10px 30px #0000008c}.dungeon-intro:before{content:"";background:var(--dungeon-bg) center / cover no-repeat;transform-origin:50%;z-index:0;animation:3s ease-out both kenburns;position:absolute;inset:0}.dungeon-intro:after{content:"";z-index:1;background:radial-gradient(125% 125% at 50% 42%,#0806041a,#080604d1 100%);position:absolute;inset:0}.dungeon-intro-content{z-index:2;text-align:center;flex-direction:column;align-items:center;gap:12px;padding:16px;display:flex;position:relative}.intro-key{width:64px;height:64px;font-family:var(--display);color:var(--keystone);border:2px solid var(--keystone);clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);text-shadow:0 1px 4px #000c;background:radial-gradient(circle at 50% 40%,#43e0cf4d,#08060480);justify-content:center;align-items:center;font-size:20px;font-weight:800;animation:.6s .1s both introRise,1.6s ease-in-out .7s infinite keystone;display:flex}.intro-name{font-family:var(--display);letter-spacing:.04em;color:var(--gold-bright);text-shadow:0 2px 5px #000000d9,0 0 26px #f3c34a66;font-size:clamp(28px,5vw,44px);font-weight:700;animation:.7s .25s both introRise}.intro-sub{font-family:var(--display);text-transform:uppercase;letter-spacing:.28em;color:var(--gold-deep);font-size:12px;animation:.7s .42s both introRise}@keyframes introFade{0%{opacity:0}to{opacity:1}}@keyframes kenburns{0%{transform:scale(1.16)}to{transform:scale(1)}}@keyframes introRise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.intro-key.auto-key{color:#2a1c05;border-color:var(--gold-bright);background:linear-gradient(180deg, var(--gold-bright), var(--gold-deep));animation:.6s .1s both introRise;box-shadow:0 0 24px #f3c34a99}.intro-key.failed-key{color:var(--bad);border-color:var(--bad);background:radial-gradient(circle at 50% 40%,#d6463c4d,#08060480);box-shadow:0 0 24px #d6463c8c}.intro-stamp.stamp-fail{color:#e88880;text-shadow:0 2px 5px #000000d9,0 0 16px #d6463c80}.intro-stamp{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--gold-bright);text-shadow:0 2px 5px #000000d9,0 0 18px #f3c34a8c;margin-top:2px;font-size:15px;font-weight:800;animation:.5s 1s both stampIn}@keyframes stampIn{0%{opacity:0;transform:scale(1.7)}55%{opacity:1}to{opacity:1;transform:scale(1)}}.dungeon-stage{flex-direction:column;gap:16px;min-height:240px;display:flex}.dungeon-now{flex-direction:column;gap:6px;display:flex}.dungeon-now.has-bg{background:var(--panel-1);border:1px solid var(--bronze);border-radius:6px;padding:20px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #f3c34a26,0 10px 30px #0000008c}.dungeon-now.has-bg:before{content:"";background:linear-gradient(180deg, #08060466 0%, #080604a8 58%, var(--panel-1) 100%), var(--dungeon-bg) center 28% / cover no-repeat;z-index:0;height:360px;position:absolute;top:0;left:0;right:0}.dungeon-now.has-bg>*{z-index:1;position:relative}.dungeon-now.has-bg .dungeon-title h2,.dungeon-now.has-bg .event,.dungeon-now.has-bg .phase-head,.dungeon-now.has-bg .tl-name,.dungeon-now.has-bg .cleared-line,.dungeon-now.has-bg .depleted,.dungeon-now.has-bg .run-rolling{text-shadow:0 1px 4px #000000e6}.dungeon-title{align-items:center;gap:14px;display:flex}.dungeon-title h2{color:var(--gold);font-size:28px}.key-badge{font-family:var(--display);background:linear-gradient(180deg, var(--raised), var(--panel-1));border:1px solid var(--gold-deep);color:var(--gold);text-align:center;border-radius:3px;min-width:50px;padding:4px 12px;font-weight:800;box-shadow:inset 0 0 8px #f3c34a26}.run-rolling{color:var(--text-dim);font-style:italic}.timer{align-items:center;gap:12px;margin:12px 0 6px;display:flex}.timer-track{background:var(--ink-0);border:1px solid var(--bronze);border-radius:2px;flex:1;height:14px;overflow:hidden;box-shadow:inset 0 1px 4px #000000b3}.timer-fill{height:100%;transition:width .5s,background .5s;box-shadow:0 0 10px}.timer-ok{background:linear-gradient(90deg, #2f8f4f, var(--good));color:var(--good)}.timer-warn{background:linear-gradient(90deg, var(--gold-deep), var(--gold));color:var(--gold)}.timer-crit{background:linear-gradient(90deg, #8f2a22, var(--bad));color:var(--bad)}.timer-label{font-family:var(--display);font-variant-numeric:tabular-nums;color:var(--text-h);text-align:right;letter-spacing:.03em;min-width:64px;font-weight:700}.timeline{margin:14px 0 6px;position:relative}.tl-track{align-items:stretch;gap:7px;display:flex}.tl-phase{border:1px solid var(--bronze-dark);background:var(--panel-1);opacity:.4;border-radius:4px;flex-direction:column;flex:1 1 0;gap:5px;min-width:62px;min-height:56px;padding:7px;transition:opacity .3s,border-color .3s,box-shadow .3s;display:flex}.tl-phase.tl-active{opacity:1}.tl-boss{background:linear-gradient(180deg, #f3c34a1a, var(--panel-1));border-color:var(--bronze)}.tl-boss.tl-active{border-color:var(--gold-deep)}.tl-here.tl-active{box-shadow:0 0 0 1px var(--gold) inset, 0 0 16px #f3c34a40}.tl-kind{max-width:100%;font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;border-radius:2px;align-self:flex-start;padding:2px 6px;font-size:9px;font-weight:700}.tl-trash .tl-kind{color:var(--text-dim);border:1px solid var(--bronze-dark);background:#ffffff0a}.tl-boss .tl-kind{color:#2a1c05;background:linear-gradient(180deg, var(--gold-bright), var(--gold-deep))}.tl-name{font-family:var(--display);color:var(--gold-bright);overflow-wrap:anywhere;font-size:11.5px;font-weight:600;line-height:1.2}.tl-dots{flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:2px;display:flex}.tl-dot{background:var(--ink-0);border:1px solid var(--bronze-dark);border-radius:50%;width:9px;height:9px}.tl-dot.dot-good{background:var(--good);border-color:var(--good);box-shadow:0 0 6px #5cc46a99}.tl-dot.dot-bad{background:var(--bad);border-color:var(--bad);box-shadow:0 0 6px #d6463c99}.event-log{flex-direction:column;gap:4px;margin-top:16px;display:flex}.phase-head{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);border-bottom:1px solid var(--bronze-dark);align-items:center;gap:7px;margin-top:8px;padding-bottom:3px;font-size:12px;display:flex}.phase-head.is-boss{color:var(--gold);border-bottom-color:var(--gold-deep)}.phase-icon{opacity:.85}.event{padding-left:18px;font-size:15px;position:relative}.event:before{content:"•";opacity:.6;position:absolute;left:4px}.event-good{color:var(--good)}.event-bad{color:#e88880}.event-cost{color:var(--bad);font-family:var(--display);font-variant-numeric:tabular-nums;margin-left:6px;font-size:12px}.depleted{color:var(--bad);font-family:var(--display);letter-spacing:.03em;margin-top:10px;font-weight:700}.cleared-line{color:var(--good);font-family:var(--display);letter-spacing:.03em;text-align:center;margin-top:10px;font-weight:700}.next-key{justify-content:center;padding:12px 0;display:flex}.outcome{text-align:center;border-radius:4px;flex-direction:column;align-items:center;gap:16px;padding:26px 20px;display:flex}.outcome-win{border:1px solid var(--legendary);background:radial-gradient(circle at 50% 0,#ff8a1f29,#0000 70%),#f3c34a0f;box-shadow:inset 0 0 40px #ff8a1f1f,0 0 30px #ff8a1f33}.outcome-lose{background:#d6463c12;border:1px solid #d6463c66}.outcome-text{font-family:var(--display);color:var(--text-h);font-size:20px;font-weight:700;line-height:1.4}.outcome-win .outcome-text{color:var(--legendary);text-shadow:0 0 18px #ff8a1f66}.fade-in{animation:.4s both fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){.team{grid-template-columns:repeat(2,1fr)}.series{grid-template-columns:1fr}.frieze-node{width:74px}.frieze-link{width:24px}}