:root{color-scheme:dark;--ink: #0e0a07;--deep: #1a130d;--panel: #251b12;--line: #6b4f28;--gilt: #c9a04a;--foam: #f1e6cc;--mist: #bfae8e;--brass: #e2b65a;--coral: #e2604f;--kelp: #6fcf86;--parch: #ead9b2;--parch-ink: #2b1d10;--class: var(--brass);--display: "IM Fell English SC", "Iowan Old Style", Georgia, serif;--prose: "IM Fell English", "Iowan Old Style", Georgia, serif;--body: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--r: 4px;--frame: inset 0 0 0 1px #0b0805, inset 0 0 0 3px rgba(201, 160, 74, .16), 0 10px 28px rgba(0, 0, 0, .55);--leather: linear-gradient(180deg, #2b2016 0%, #1b140d 100%)}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background-color:var(--ink);background-image:radial-gradient(ellipse 90% 60% at 50% -10%,rgba(226,182,90,.16),transparent 70%),radial-gradient(ellipse 120% 80% at 50% 120%,rgba(0,0,0,.85),transparent 60%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.4 0 0 0 0 0.25 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-attachment:fixed;color:var(--foam);font:400 1.0625rem/1.5 var(--body)}h1,h2,p,ul,fieldset{margin:0;padding:0}ul{list-style:none}fieldset{border:0;min-width:0}h1{font:400 clamp(1.7rem,4vw,2.4rem) / 1.1 var(--display);letter-spacing:.03em;text-wrap:balance;background:linear-gradient(180deg,#fbe7ad,#d9a647 55%,#a8772a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.7))}h2{font:400 1.3rem/1.2 var(--display);letter-spacing:.05em;color:var(--brass)}.eyebrow{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}.muted,.small,.status{color:var(--mist)}.small{font-size:.85rem;line-height:1.3}.row{display:flex;gap:8px}label,legend{font-size:.9rem;color:var(--mist)}input[type=text],input:not([type]),select{flex:1;min-width:0;min-height:44px;padding:10px 12px;background:#0b0805;color:var(--foam);border:1px solid var(--line);border-radius:var(--r);box-shadow:inset 0 2px 6px #0009;font:inherit}button{min-height:44px;font:500 1rem/1.2 var(--body);color:var(--foam);background:linear-gradient(180deg,#3a2c1e,#241a11);border:1px solid var(--line);border-radius:var(--r);box-shadow:inset 0 1px #ffe6b41f,0 2px #070504;padding:10px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}button:hover:not(:disabled){border-color:var(--gilt);box-shadow:inset 0 1px #ffe6b42e,0 2px #070504,0 0 14px #e2b65a4d}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:linear-gradient(180deg,#f6d68a,#d6a446 45%,#a8772a);border-color:#fbe7ad;color:#2a1a08;font:400 1.25rem/1.1 var(--display);letter-spacing:.04em;text-shadow:0 1px 0 rgba(255,240,200,.55);padding:13px 22px;box-shadow:inset 0 1px #fffae699,inset 0 -2px #5a370a66,0 3px #3a2508,0 8px 20px #00000080}button.primary:hover:not(:disabled){background:linear-gradient(180deg,#fde3a0,#e2b458 45%,#b8862e);box-shadow:inset 0 1px #fffae699,0 3px #3a2508,0 0 22px #f0be5a8c}button.quiet{background:transparent;box-shadow:none;color:var(--mist);padding:8px 14px;font-size:.95rem}:focus-visible{outline:2px solid var(--brass);outline-offset:2px}.chip{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:1px 7px;border:1px solid var(--line);border-radius:99px;color:var(--mist);background:#0000004d}.chip.turn{border-color:var(--brass);color:#1a1206;background:var(--brass)}.chip.warn{border-color:var(--coral);color:var(--coral)}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%);max-width:calc(100% - 32px);background:var(--coral);border-color:var(--coral);color:#1d0d0a;font-weight:700;z-index:10}.portrait{display:block;flex:none;border-radius:50%;border:2px solid var(--class);box-shadow:0 0 0 2px #0b0805,0 0 0 3px #c9a04a80,0 4px 10px #0009;background:#0d0907}.home{max-width:34rem;margin:0 auto;padding:clamp(24px,5vh,56px) 16px 40px;display:flex;flex-direction:column;gap:12px;text-align:center}.home h1{font-size:clamp(3.8rem,17vw,6.5rem);line-height:.9;filter:drop-shadow(0 3px 0 rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(226,160,60,.35))}.subtitle{font:italic 400 1.6rem/1.2 var(--prose);color:var(--parch)}.subtitle:after{content:"";display:block;width:min(260px,70%);height:12px;margin:14px auto 0;background:radial-gradient(circle,var(--gilt) 3px,transparent 3.5px) center / 12px 12px no-repeat,linear-gradient(90deg,transparent,var(--gilt) 30%,var(--gilt) 70%,transparent) center / 100% 1px no-repeat}.lede{font:400 1.18rem/1.55 var(--prose);color:#dccdab;margin-top:6px}.home-actions{display:flex;flex-direction:column;gap:20px;margin-top:22px;text-align:left}.join{display:flex;flex-direction:column;gap:6px}.join input{font:400 1.4rem/1 var(--display);letter-spacing:.3em;text-align:center}.lobby{max-width:68rem;margin:0 auto;padding:24px 16px 48px;display:flex;flex-direction:column;gap:28px}.lobby-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-bottom:20px;border-bottom:1px solid var(--line)}.code{font:400 3.2rem/1 var(--display);letter-spacing:.18em;background:linear-gradient(180deg,#fbe7ad,#b8862e);-webkit-background-clip:text;background-clip:text;color:transparent}.share{flex:1 1 16rem;color:var(--mist);font-size:.95rem}.link{color:var(--foam);overflow-wrap:anywhere}.lobby-body{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:36px}.lobby-body section{display:flex;flex-direction:column;gap:14px}.hero-form{display:flex;flex-direction:column;gap:10px}.class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px}.class-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--leather);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--frame);cursor:pointer;color:var(--foam);transition:border-color .15s,box-shadow .15s}.class-card:hover{border-color:var(--gilt)}.class-card input{position:absolute;opacity:0}.class-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}.class-head>span{display:flex;flex-direction:column;gap:2px}.class-card strong{font:400 1.3rem/1.1 var(--display);letter-spacing:.04em;color:var(--class)}.class-card .blurb{font:italic 400 1rem/1.3 var(--prose)}.class-card .stats,.class-card .ability{font-size:.85rem;line-height:1.3;color:var(--mist)}.class-card .ability b{color:var(--foam)}.class-card.picked{background:linear-gradient(180deg,#3a2a1a,#221810);border-color:var(--class);box-shadow:var(--frame),0 0 0 1px var(--class),0 0 22px color-mix(in srgb,var(--class) 35%,transparent)}.class-card:has(input:focus-visible){outline:2px solid var(--brass);outline-offset:2px}.seats{display:flex;flex-direction:column;gap:8px}.seats li{display:flex;align-items:center;gap:10px}.seats em{color:var(--mist);font-style:normal;font-size:.9rem}.pip{width:12px;height:12px;border-radius:50%;background:var(--class);box-shadow:0 0 8px var(--class);flex:none}.gm-pick{display:flex;flex-direction:column;gap:8px;margin-top:8px}.gm-pick label{display:flex;gap:10px;align-items:baseline;color:var(--foam);font-size:.98rem}.gm-pick label.off{color:var(--mist)}.table{max-width:84rem;margin:0 auto;padding:14px 16px 24px;min-height:100%;display:flex;flex-direction:column;gap:14px}.table-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}.head-actions{display:flex;gap:6px;flex:none}.sound-toggle{display:inline-flex;align-items:center;gap:6px}.sound-toggle svg{width:20px;height:20px}.sound-toggle[aria-pressed=true]{color:var(--brass)}.table-body{flex:1;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:22px;min-height:0}.stage,.story{display:flex;flex-direction:column;gap:12px;min-height:0}.board{display:block;width:100%;height:auto;aspect-ratio:800 / 470;border:2px solid #8a6a32;border-radius:var(--r);background:var(--deep);box-shadow:0 0 0 4px #120d09,0 0 0 5px #5a4326,0 16px 40px #000000a6}.board-wrap{position:relative;margin:5px 0 8px}.dice-overlay{--die-hi: #b8322a;--die-lo: #4a0c0a;--die-face: #9a2420;--die-edge: #f2c66b;position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;border-radius:var(--r);background:radial-gradient(circle at 50% 50%,#0a060359,#0a0603d1 75%);cursor:pointer;animation:dice-in .25s ease-out}.dice-who{font:italic 400 clamp(1rem,2.6vw,1.3rem) / 1.2 var(--prose);color:var(--parch);text-shadow:0 2px 4px #000}.d20{position:relative;width:clamp(96px,24%,170px);aspect-ratio:1}.d20.spinning{animation:dice-throw 1.25s cubic-bezier(.3,.7,.4,1) both}.d20.spinning .d20-body{animation:dice-tumble .42s linear infinite}.d20.landed{animation:dice-land .55s cubic-bezier(.2,1.8,.4,1)}.d20-body{position:absolute;top:0;right:0;bottom:0;left:0}.d20 svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 18px rgba(0,0,0,.75))}.d20-face{position:absolute;top:18%;right:0;bottom:0;left:0;display:grid;place-items:center;font:400 clamp(1.7rem,5.5vw,2.9rem) / 1 var(--display);color:#fff4d6;text-shadow:0 2px 0 rgba(0,0,0,.7);font-variant-numeric:tabular-nums}.dice-result{min-height:3.6em;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.dice-verdict{font:400 clamp(1.8rem,6vw,3.2rem) / 1 var(--display);letter-spacing:.06em;text-shadow:0 3px 0 #000,0 0 24px currentColor;animation:verdict-pop .45s cubic-bezier(.2,1.8,.4,1)}.dice-math{font-size:clamp(.9rem,2.2vw,1.05rem);color:var(--parch);font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000}.dice-overlay.ok{--die-hi: #3fae62;--die-lo: #0f3d20;--die-face: #2a8a4a}.dice-overlay.ok .dice-verdict{color:#8ff0a4}.dice-overlay.bad .dice-verdict{color:#ff8a70}.dice-overlay.bad .d20{filter:saturate(.6) brightness(.85)}.dice-overlay.crit{--die-hi: #fbe7ad;--die-lo: #a8772a;--die-face: #e2b458;--die-edge: #fffbe8}.dice-overlay.crit .d20-face{color:#3a2508;text-shadow:0 1px 0 rgba(255,250,230,.7)}.dice-overlay.crit .dice-verdict{color:#ffd86b}.dice-overlay.crit:before{content:"";position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;translate:-50% -50%;z-index:-1;background:repeating-conic-gradient(rgba(255,210,110,.32) 0deg 7deg,transparent 7deg 20deg);mask:radial-gradient(circle,#000 8%,transparent 55%);animation:rays 6s linear infinite,dice-in .4s ease-out}.dice-overlay.fumble{--die-hi: #3a3a3e;--die-lo: #0d0d10;--die-face: #26262b;--die-edge: #b8322a;animation:shake .45s}.dice-overlay.fumble .dice-verdict{color:#ff5a48}@keyframes dice-in{0%{opacity:0}}@keyframes dice-throw{0%{transform:translate(-160%,-90%) scale(.5)}55%{transform:translate(18%,6%) scale(1.05)}75%{transform:translate(-6%,-10%) scale(.98)}to{transform:none}}@keyframes dice-tumble{0%{transform:rotate(0) scale(1)}25%{transform:rotate(90deg) scale(.86,1.06)}50%{transform:rotate(180deg) scale(1)}75%{transform:rotate(270deg) scale(1.06,.86)}to{transform:rotate(360deg) scale(1)}}@keyframes dice-land{0%{transform:scale(1.45)}to{transform:scale(1)}}@keyframes verdict-pop{0%{opacity:0;transform:scale(2.2)}to{opacity:1;transform:scale(1)}}@keyframes rays{to{rotate:360deg}}@keyframes shake{0%,to{transform:none}20%{transform:translate(-8px,3px)}40%{transform:translate(7px,-4px)}60%{transform:translate(-5px,2px)}80%{transform:translate(3px,-1px)}}.foes,.party{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}.foe{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px;background:linear-gradient(180deg,#34181a,#1c0d0e);border-color:#6a2e2e;--class: #a8402f}.foe-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.foe.picked{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral),0 0 16px #e2604f73}.foe-name{font:400 1.05rem/1.15 var(--display);letter-spacing:.03em}.hero{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--leather);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--frame)}.hero-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.hero-info strong{font:400 1.1rem/1.1 var(--display);letter-spacing:.03em}.hero.active{border-color:var(--brass);box-shadow:var(--frame),0 0 0 1px var(--brass),0 0 20px #e2b65a59}.hero.down{opacity:.55;filter:grayscale(.7)}.hero-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.items{font-style:italic}.bar{display:block;height:9px;background:#0b0604;border:1px solid #3a2a18;border-radius:99px;overflow:hidden;box-shadow:inset 0 1px 3px #000c}.bar span{display:block;height:100%;background:linear-gradient(180deg,#a6f5b6,#3e9e5a);border-radius:99px;transition:width .4s ease}.bar.low span,.bar.tone-foe span{background:linear-gradient(180deg,#ff9a80,#a8291c)}.chronicle{flex:1 1 260px;min-height:220px;max-height:58vh;overflow-y:auto;padding:20px 22px;color:var(--parch-ink);background-color:var(--parch);background-image:radial-gradient(ellipse at 15% 10%,rgba(140,90,30,.18),transparent 40%),radial-gradient(ellipse at 85% 80%,rgba(140,90,30,.2),transparent 45%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.3 0 0 0 0 0.12 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");border:1px solid #8a6a32;border-radius:var(--r);box-shadow:inset 0 0 50px #6e461480,0 0 0 4px #120d09,0 0 0 5px #5a4326,0 14px 36px #0009;display:flex;flex-direction:column;gap:9px;scrollbar-color:#8a6a32 transparent}.chronicle:focus-visible{outline-color:#7a2418}.chronicle h2{color:#7a2418;margin-top:12px;padding-top:14px;border-top:1px solid rgba(90,60,30,.35)}.chronicle h2:first-child{margin-top:0;padding-top:0;border-top:0}.entry{display:flex;gap:10px;align-items:flex-start;max-width:65ch}.entry.gm{font:400 1.14rem/1.55 var(--prose)}.entry.action{padding-left:10px;border-left:3px solid var(--class);font-weight:700}.entry.roll,.entry.combat{font-size:.97rem;color:#4a3420}.entry.system{font-size:.92rem;color:#6b5232;font-style:italic}.die{flex:none;width:32px;height:34px;display:grid;place-items:center;font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.7);clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);background:linear-gradient(160deg,#6fd08a,#237a43)}.die.bad{background:linear-gradient(160deg,#ef7a62,#8e2316)}.actions{padding:16px 18px;background:var(--leather);border:1px solid #8a6a32;border-radius:var(--r);box-shadow:var(--frame)}.actions>.explore,.actions>.combat,.actions>.ended,.actions>.waiting{display:flex;flex-direction:column;gap:10px}.prompt{font:italic 400 1.12rem/1.35 var(--prose)}.prompt strong,.waiting strong{color:var(--brass);font-style:normal;font-family:var(--display)}.options{display:flex;flex-direction:column;gap:8px}.moves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.option{display:flex;flex-direction:column;gap:3px;text-align:left;padding:11px 14px 11px 16px;border-left:3px solid var(--gilt)}.option:hover:not(:disabled){transform:translate(2px)}.odds{font-size:.84rem;color:var(--mist);font-variant-numeric:tabular-nums}.freeform,.ally-pick{display:flex;flex-direction:column;gap:6px}.freeform select{flex:0 1 8rem}.verdict{font:italic 400 1.5rem/1.3 var(--prose);color:var(--brass)}.late summary{cursor:pointer;margin-bottom:10px}@media (max-width: 860px){.lobby-body,.table-body{grid-template-columns:minmax(0,1fr)}.chronicle{max-height:46vh}}@media (max-width: 460px){.class-grid,.moves{grid-template-columns:minmax(0,1fr)}.freeform .row{flex-wrap:wrap}.foes{grid-template-columns:repeat(2,minmax(0,1fr))}.sound-label,.foe .portrait{display:none}.party{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion: reduce){.bar span,button{transition:none}.dice-overlay,.dice-overlay:before,.d20,.d20-body,.dice-verdict{animation:none!important}}