@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap";:root{color:#f3f0e8;font-synthesis:none;--gold:#e9ad46;--gold-bright:#ffc967;--panel:#101827;--panel-2:#151f30;--line:#293448;--muted:#8e9aae;background:#080d18;font-family:DM Sans,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 75% 5%,#14223b 0,#0000 32%),#080d18;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #ffd987}button:disabled{cursor:not-allowed;opacity:.45}.logo{color:#fff;letter-spacing:-.5px;align-items:center;gap:10px;font:800 21px Manrope,sans-serif;text-decoration:none;display:inline-flex}.logoMark{color:var(--gold);text-shadow:0 0 18px #e9ad4670;display:inline-block;transform:rotate(45deg)}.eyebrow{color:var(--gold);letter-spacing:2.2px;margin:0 0 10px;font-size:11px;font-weight:800}.landing{place-items:center;min-height:100vh;padding:28px;display:grid;position:relative;overflow:hidden}.ambient{pointer-events:none;border:1px solid #d6a75818;border-radius:24%;position:absolute;transform:rotate(45deg)}.ambientOne{width:380px;height:380px;top:5%;right:-180px}.ambientTwo{width:200px;height:200px;bottom:5%;left:-100px}.hero{text-align:center;z-index:1;width:min(680px,100%);position:relative}.hero .logo{margin-bottom:62px;font-size:25px}.hero h1{letter-spacing:-3px;margin:0;font:800 clamp(42px,7vw,70px)/1.03 Manrope,sans-serif}.hero h1 span{color:var(--gold-bright)}.intro{color:#aeb7c7;max-width:570px;margin:25px auto 38px;font-size:17px;line-height:1.65}.joinCard{text-align:left;background:linear-gradient(145deg,#151e2eeb,#0e1624ed);border:1px solid #2a3548;border-radius:16px;padding:25px;box-shadow:0 25px 60px #0008}.joinCard label,.fieldLabel{color:#c3cad5;letter-spacing:.4px;margin-bottom:9px;font-size:12px;font-weight:700;display:block}.roomInputRow{grid-template-columns:1fr auto;gap:10px;display:grid}input{color:#fff;background:#090f1b;border:1px solid #344057;border-radius:9px;min-width:0;padding:14px 15px;transition:border-color .2s,box-shadow .2s}input:hover{border-color:#516079}input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px #e9ad4620}.primary,.rollButton{color:#171008;background:linear-gradient(135deg,#ffd06d,#dc9636);border:0;border-radius:9px;padding:0 22px;font-weight:800;box-shadow:0 8px 20px #d7953030}.primary:hover,.rollButton:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.primary:active,.rollButton:active:not(:disabled){transform:translateY(1px)}.randomButton{color:#aeb7c7;background:0 0;border:0;margin:17px auto 0;font-size:13px;display:block}.randomButton:hover{color:var(--gold-bright)}.shareNote{color:#758196;margin:26px 0 0;font-size:13px}.shareNote span{color:var(--gold);margin-right:6px}.error{color:#ff9f8e;margin:10px 2px 0;font-size:13px}.roomPage{min-height:100vh}.topbar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:5;background:#090f1bd9;border-bottom:1px solid #242e40;grid-template-columns:1fr auto 1fr;align-items:center;min-height:72px;padding:14px clamp(18px,4vw,54px);display:grid;position:sticky;top:0}.roomIdentity{text-align:center}.roomIdentity span{color:#687489;letter-spacing:2px;font-size:9px;font-weight:800;display:block}.roomIdentity strong{font:700 14px Manrope}.topActions{justify-content:flex-end;align-items:center;gap:18px;display:flex}.status,.live{color:#98a4b6;white-space:nowrap;align-items:center;gap:7px;font-size:12px;display:inline-flex}.status i,.live i{background:#6d7788;border-radius:50%;width:7px;height:7px}.status.connected i,.live i{background:#65d29a;box-shadow:0 0 8px #65d29a80}.status.reconnecting i{background:#f0b957;animation:1s infinite pulse}.copyButton{color:#dce1e9;background:#141d2c;border:1px solid #354057;border-radius:8px;padding:9px 13px;font-size:12px;font-weight:700}.copyButton:hover{border-color:var(--gold);color:var(--gold-bright)}.roomGrid{grid-template-columns:minmax(0,1fr) minmax(340px,.82fr);align-items:start;gap:24px;width:min(1220px,100% - 36px);margin:35px auto;display:grid}.rollerPanel,.historyPanel{background:linear-gradient(145deg,#121b2a,#0e1623);border:1px solid #273246;border-radius:14px;box-shadow:0 18px 50px #0004}.sectionHeading,.historyHeader{justify-content:space-between;align-items:center;display:flex}.sectionHeading h1,.historyHeader h2{letter-spacing:-.7px;margin:0;font:700 25px Manrope}.cap{color:#778399;border:1px solid #303b4e;border-radius:5px;padding:5px 8px;font-size:11px}.nameInput{width:100%;margin-bottom:25px}.diceLabel{margin-top:0}.diceTray{grid-template-columns:repeat(7,1fr);gap:9px;display:grid}.dieButton{color:#dce2ec;background:#151f30;border:1px solid #334057;border-radius:9px;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-width:0;height:86px;transition:transform .15s,border-color .15s,background .15s;display:flex;position:relative}.dieButton:hover:not(:disabled){border-color:var(--gold);color:var(--gold-bright);background:#1d293c;transform:translateY(-3px)}.dieButton strong{font-size:11px}.badge{background:var(--gold);color:#16100a;border-radius:50%;place-items:center;min-width:21px;height:21px;font-size:10px;display:grid;position:absolute;top:-7px;right:-6px;box-shadow:0 2px 8px #0008}.compositionHeader{color:#c5ccd7;justify-content:space-between;margin:28px 0 10px;font-size:12px;font-weight:700;display:flex}.compositionHeader button{color:var(--gold);background:0 0;border:0;font-size:12px}.composition{background:#0b121e;border:1px solid #303c50;border-radius:9px;padding:15px}.composition>strong{color:var(--gold-bright);border-bottom:1px solid #263044;padding-bottom:12px;font:700 16px Manrope;display:block}.selectedRows{flex-wrap:wrap;gap:8px;padding-top:12px;display:flex}.selectedDie{color:#aeb8c8;background:#172132;border-radius:7px;align-items:center;gap:8px;padding:5px 6px 5px 10px;font-size:12px;display:flex}.selectedDie div{align-items:center;gap:5px;display:flex}.selectedDie button{color:#e2e6ec;background:#202c40;border:1px solid #39465b;border-radius:5px;width:25px;height:25px;padding:0}.selectedDie button:hover:not(:disabled){border-color:var(--gold)}.selectedDie .remove{color:#de8b7c;background:0 0;border:0;font-size:17px}.selectedDie b{text-align:center;width:18px}.emptySelection{color:#657186;text-align:left;border:1px dashed #303b4e;border-radius:9px;justify-content:center;align-items:center;gap:15px;min-height:104px;font-size:12px;line-height:1.5;display:flex}.emptySelection span{color:#8a6c3a;font-size:28px}.panelError{margin:13px 0 -5px}.rollButton{width:100%;min-height:57px;margin-top:22px;font-size:16px;transition:all .15s}.rollGlyph{margin-right:10px;display:inline-block}.isRolling .rollGlyph{animation:.6s linear infinite tumble}.historyPanel{min-height:650px;overflow:hidden}.historyHeader{border-bottom:1px solid #273246;padding:25px 27px 20px}.live{color:#65d29a;text-transform:uppercase;letter-spacing:1px;background:#142c29;border:1px solid #294a42;border-radius:20px;padding:5px 9px;font-size:9px;font-weight:800}.connectionNotice{color:#f8d48c;text-align:center;background:#4f3e1f;padding:10px 20px;font-size:12px}.historyList{max-height:calc(100vh - 175px);padding:14px;overflow:auto}.rollCard{background:#151f2f;border:1px solid #2a3548;border-radius:9px;margin-bottom:10px;padding:15px;transition:background .4s,border-color .4s}.rollCard.newRoll{background:#1d2937;border-color:#d5a54b;animation:.55s ease-out arrive}.rollMeta{grid-template-columns:auto 1fr auto;align-items:center;gap:10px;display:grid}.avatar{width:33px;height:33px;color:var(--gold);background:#26354d;border-radius:7px;place-items:center;font-weight:800;display:grid}.rollMeta h3{margin:0 0 2px;font-size:13px}.rollMeta time{color:#747f92;font-size:10px}.total{color:var(--gold-bright);font:800 32px Manrope}.expression{color:#c3cad6;margin:13px 0 8px;font-size:12px}.resultGroups{flex-wrap:wrap;gap:8px;display:flex}.resultGroups>span{color:#8793a6;align-items:center;gap:4px;font-size:10px;display:flex}.resultGroups b{color:#7e899a;margin-right:2px}.resultGroups i{color:#d5dbe4;background:#202c40;border:1px solid #344158;border-radius:4px;place-items:center;min-width:22px;height:22px;padding:0 4px;font-style:normal;display:grid}.historyEmpty{text-align:center;color:#6e7a8d;padding:105px 20px}.emptyRune{color:#8b6b38;border:1px solid #29364a;border-radius:50%;place-items:center;width:70px;height:70px;margin:0 auto 18px;font-size:25px;display:grid;box-shadow:inset 0 0 25px #0005}.historyEmpty h3{color:#9ca7b8;margin:0 0 8px;font:600 14px Manrope}.historyEmpty p{font-size:12px;line-height:1.6}@keyframes tumble{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.35}}@keyframes arrive{0%{opacity:.25;transform:translateY(-10px)}}@media (width<=800px){.topbar{grid-template-columns:1fr auto}.roomIdentity{display:none}.roomGrid{grid-template-columns:1fr;margin-top:20px}.historyPanel{min-height:480px}.historyList{max-height:none}.diceTray{grid-template-columns:repeat(4,1fr)}}@media (width<=520px){.landing{padding:18px}.hero .logo{margin-bottom:42px}.hero h1{letter-spacing:-2px}.roomInputRow{grid-template-columns:1fr}.primary{min-height:50px}.topbar{padding:12px 15px}.topbar .logo{font-size:17px}.status{display:none}.copyButton{padding:9px}.roomGrid{width:calc(100% - 20px)}.rollerPanel{padding:20px 15px}.diceTray{gap:7px}.dieButton{height:76px}.selectedRows{flex-direction:column}.selectedDie{justify-content:space-between}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.dieButton{color:#c2cad7;background:radial-gradient(circle at 50% 32%,#202c3e 0,#162133 58%,#111a28 100%);border-color:#354259;border-radius:11px;gap:0;height:116px;padding:6px 0 8px;transition:transform .17s,border-color .17s,background .17s,box-shadow .17s;overflow:visible}.dieButton strong{z-index:1;color:#aeb9c9;letter-spacing:.25px;margin-top:-2px;font-size:11px;transition:color .17s;position:relative}.polyDie{object-fit:contain;object-position:center;pointer-events:none;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 7px 6px #02060cc7)saturate(.88)contrast(1.05);transform-origin:50% 58%;width:min(76px,100%);height:82px;transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .18s;display:block}.polyDie4{width:min(78px,100%)}.polyDie6,.polyDie8{width:min(73px,100%)}.polyDie10{width:min(74px,100%);height:84px}.polyDie12,.polyDie20{width:min(75px,100%)}.polyDie100{width:min(74px,100%);height:80px}.dieButton:hover:not(:disabled){background:radial-gradient(circle at 50% 30%,#29384a 0,#1a2739 59%,#131d2b 100%);border-color:#71836f;transform:translateY(-3px)scale(1.018);box-shadow:0 10px 22px #0207118a,inset 0 1px #d8e6d812}.dieButton:hover:not(:disabled) .polyDie{filter:drop-shadow(0 10px 7px #01040cdb)saturate(.98)brightness(1.09)contrast(1.06);transform:translateY(-2px)rotate(-1.6deg)scale(1.025)}.dieButton:nth-child(2n):hover:not(:disabled) .polyDie{transform:translateY(-2px)rotate(1.5deg)scale(1.025)}.dieButton:hover:not(:disabled) strong{color:#e0e6df}.dieButton:active:not(:disabled){transition-duration:70ms;transform:translateY(-1px)scale(.975)}.dieButton:active:not(:disabled) .polyDie{transition-duration:70ms;transform:translateY(0)rotate(0)scale(.965)}.dieButton.selected{background:radial-gradient(circle at 50% 30%,#303a3e 0,#1c2a35 58%,#151f2c 100%);border-color:#d7ab59;transform:translateY(-2px);box-shadow:0 8px 22px #0008,0 0 0 1px #d7ab5938,0 0 18px #b7a55a28,inset 0 1px #eef1d41a}.dieButton.selected:after{content:"";background:#d9b766;border-radius:3px;width:18px;height:3px;position:absolute;bottom:5px;box-shadow:0 0 9px #d4b45b9c}.dieButton.selected .polyDie{filter:drop-shadow(0 9px 7px #01040cd1)drop-shadow(0 0 5px #c4b66b66)saturate(1.03)brightness(1.1)contrast(1.06)}.dieButton.selected strong{color:#f0d18a}.dieButton.selected:hover:not(:disabled){border-color:#ebc875;transform:translateY(-4px)scale(1.018)}.dieButton:disabled .polyDie{opacity:.72;filter:grayscale(.28)saturate(.45)brightness(.78)}@media (width<=520px){.dieButton{height:104px;padding:5px 0 7px}.polyDie{width:min(68px,100%);height:72px}.polyDie4{width:min(70px,100%)}.polyDie10{width:min(70px,100%);height:74px}.polyDie12,.polyDie20{width:min(68px,100%)}.polyDie100{width:min(74px,100%);height:70px}}.roomGrid{gap:18px;margin-top:22px;margin-bottom:22px}.nameInput{min-height:44px;margin-bottom:14px;padding:11px 13px}.polyDie,.polyDie4,.polyDie6,.polyDie8,.polyDie10,.polyDie12,.polyDie20,.polyDie100{object-fit:contain;aspect-ratio:auto;width:auto;max-width:74px;height:auto;max-height:66px}.composition{flex-wrap:wrap;align-items:center;gap:9px 12px;padding:10px 12px;display:flex}.composition>strong{border-bottom:0;border-right:1px solid #263044;flex:none;padding:2px 12px 2px 0;font-size:14px}.selectedRows{flex:260px;gap:6px;padding-top:0}.selectedDie{padding-top:4px;padding-bottom:4px}.historyPanel{min-height:0}.historyHeader{padding:16px 18px 14px}.historyHeader .eyebrow{margin-bottom:5px}.historyHeader h2{font-size:19px}.historyList{max-height:calc(100vh - 148px);padding:8px}.rollCard{border-left:3px solid #0000;border-radius:8px;grid-template-columns:auto minmax(0,1fr);gap:6px 9px;margin-bottom:6px;padding:9px 10px;display:grid}.rollCard:last-child{margin-bottom:0}.rollCard.newRoll{border-left-color:var(--gold);box-shadow:inset 3px 0 #e9ad4628,0 3px 12px #0003}.rollMeta{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;min-width:0;display:grid}.avatar{border-radius:6px;width:28px;height:28px;font-size:12px}.rollMeta>div:nth-child(2){align-items:baseline;gap:8px;min-width:0;display:flex}.rollMeta h3{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:12px;overflow:hidden}.rollMeta time{flex:none;font-size:9px}.total{min-width:38px;color:var(--gold-bright);text-align:center;background:#2b251a;border:1px solid #6e5830;border-radius:7px;padding:3px 7px;font:800 18px/1.1 Manrope}.expression{white-space:nowrap;border-right:1px solid #2b3649;align-self:center;margin:0;padding-right:9px;font-size:11px}.resultGroups{align-self:center;gap:5px;min-width:0}.resultGroups>span{gap:3px;font-size:9px}.resultGroups i{min-width:19px;height:19px;padding:0 3px;font-size:9px}.historyEmpty{padding:65px 20px}.emptyRune{width:56px;height:56px;margin-bottom:13px}@media (width<=800px){.roomGrid{gap:14px}.historyPanel{min-height:0}.historyList{max-height:none}}@media (width<=520px){.rollerPanel{padding:17px 15px}.sectionHeading{margin-bottom:12px}.dieButton{height:90px;padding-top:3px;padding-bottom:4px}.polyDie,.polyDie4,.polyDie6,.polyDie8,.polyDie10,.polyDie12,.polyDie20,.polyDie100{width:auto;max-width:68px;height:auto;max-height:61px}.polyDie10{max-width:61px;max-height:64px}.polyDie100{max-width:70px;max-height:56px}.composition{align-items:stretch}.composition>strong{border-bottom:1px solid #263044;border-right:0;flex-basis:100%;padding:0 0 7px}.selectedRows{flex-direction:column;flex-basis:100%}.historyHeader{padding:14px 15px 12px}.historyList{padding:7px}.rollCard{padding:8px 9px}.rollMeta>div:nth-child(2){gap:6px}.expression{padding-right:7px}}.rollerPanel{padding:14px 16px}.sectionHeading{margin-bottom:8px}.sectionHeading .eyebrow{margin-bottom:3px}.sectionHeading h1{font-size:21px}.fieldLabel{margin-bottom:4px}.nameInput{min-height:42px;margin-bottom:8px;padding-top:9px;padding-bottom:9px}.diceLabel{margin-bottom:4px}.dieButton{height:76px;padding-top:2px;padding-bottom:3px}.polyDie,.polyDie4,.polyDie6,.polyDie8,.polyDie10,.polyDie12,.polyDie20,.polyDie100{max-width:64px;max-height:52px}.polyDie10{max-width:54px;max-height:54px}.polyDie100{max-width:66px;max-height:48px}.dieButton strong{margin-top:-4px}.compositionHeader{margin:10px 0 5px}.composition{gap:5px 9px;min-height:42px;padding:5px 9px}.composition>strong{padding-top:0;padding-bottom:0;padding-right:9px;font-size:13px}.selectedRows{gap:4px}.selectedDie{padding:2px 4px 2px 8px}.selectedDie button{width:25px;height:25px}.emptySelection{gap:9px;min-height:50px}.emptySelection span{font-size:20px}.emptySelection p{margin:5px 0}.rollButton{min-height:44px;margin-top:8px;font-size:14px}.panelError{margin-top:6px}@media (width<=520px){.rollerPanel{padding:14px 13px}.sectionHeading{margin-bottom:8px}.dieButton{height:78px}.polyDie,.polyDie4,.polyDie6,.polyDie8,.polyDie10,.polyDie12,.polyDie20,.polyDie100{max-width:62px;max-height:52px}.polyDie10{max-width:53px;max-height:54px}.polyDie100{max-width:66px;max-height:47px}.composition{padding:6px 8px}.composition>strong{padding-bottom:5px}}@media (width<=800px){.roomGrid{gap:10px;margin-top:12px;margin-bottom:14px}.rollerPanel{padding:10px 12px}.sectionHeading{margin-bottom:6px}.sectionHeading .eyebrow{margin-bottom:2px}.sectionHeading h1{font-size:20px}.cap{padding:3px 6px}.fieldLabel{margin-bottom:3px}.nameInput{min-height:40px;margin-bottom:6px;padding:8px 11px}.diceLabel{margin-bottom:3px}.diceTray{gap:5px}.dieButton{border-radius:8px;height:68px;padding:1px 0 2px}.polyDie,.polyDie4,.polyDie6,.polyDie8,.polyDie10,.polyDie12,.polyDie20,.polyDie100{width:auto;max-width:54px;height:auto;max-height:45px}.polyDie10{max-width:46px;max-height:47px}.polyDie100{max-width:57px;max-height:41px}.dieButton strong{margin-top:-4px;font-size:10px}.badge{min-width:19px;height:19px;top:-5px;right:-4px}.compositionHeader{margin:7px 0 4px}.composition{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px 7px;min-height:36px;padding:4px 7px;display:grid}.composition>strong{border-bottom:0;border-right:1px solid #263044;padding:1px 7px 1px 0;font-size:12px}.selectedRows{flex:initial;flex-flow:wrap;gap:3px;min-width:0;padding:0;display:flex}.selectedDie{gap:4px;padding:1px 3px 1px 6px}.selectedDie button{width:24px;height:24px}.emptySelection{gap:7px;min-height:42px}.emptySelection p{margin:2px 0;line-height:1.35}.rollButton{min-height:44px;margin-top:6px}}.compositionHeader button{color:#c8cfda;background:linear-gradient(#202b3b,#182231);border:1px solid #465266;border-radius:7px;min-height:30px;padding:4px 10px;font-weight:700;line-height:1;transition:color .15s,border-color .15s,background .15s,box-shadow .15s,transform 80ms;box-shadow:inset 0 1px #ffffff0a}.compositionHeader button:hover:not(:disabled){color:#ead9ae;background:linear-gradient(#293545,#1d2938);border-color:#8c7a54;box-shadow:inset 0 1px #ffffff10,0 0 10px #b39a5d24}.compositionHeader button:active:not(:disabled){background:#151f2d;border-color:#756746;transform:translateY(1px)scale(.98);box-shadow:inset 0 1px 3px #0007}.compositionHeader button:disabled{color:#697588;opacity:.7;background:#151e2b;border-color:#303a4b}@media (width<=800px){.compositionHeader button{min-height:28px;padding:3px 9px}}.compositionHeader button:not(:disabled){color:#d4dae3;box-shadow:inset 0 1px #ffffff0a,inset 0 -2px #756b50}.compositionHeader button:hover:not(:disabled){color:#ece2c8;box-shadow:inset 0 1px #ffffff10,inset 0 -2px #b49a5e,0 0 10px #b39a5d24}.compositionHeader button:focus-visible:not(:disabled){color:#e7dfca;border-color:#8d805f;box-shadow:inset 0 1px #ffffff0e,inset 0 -2px #c0a667,0 0 0 2px #d1b66d20}.compositionHeader button:active:not(:disabled){color:#d8cfb7;box-shadow:inset 0 2px 4px #0008,inset 0 -2px #8e7a4d}
