@font-face{font-family:"Cinzel";font-weight:500;font-display:swap;src:url(fonts/cinzel-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-weight:600;font-display:swap;src:url(fonts/cinzel-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-weight:700;font-display:swap;src:url(fonts/cinzel-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-weight:600;font-display:swap;src:url(fonts/eb-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-italic.woff2) format("woff2")}
:root{--ink:#0c0a08;--emerald:#0f2a22;--claret:#4a1220;--gold:#c9a14a;--gold-hi:#f3dc9a;--gold-lo:#8a6a28;--ivory:#f4ead5;--muted:#bfae8c;--line:rgba(201,161,74,.3);
--leaf:linear-gradient(180deg,#f6e3a6,#d8b05a 45%,#a37a2c);--cinzel:"Cinzel",Georgia,serif;--corm:"Cormorant Garamond",Georgia,serif;--body:"EB Garamond",Georgia,serif}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(70% 50% at 50% 0%,rgba(243,220,154,.12),transparent 70%),var(--ink);color:var(--ivory);font:17px/1.5 var(--body);min-height:100vh}
button{font:inherit;color:inherit}
.gilt{background:var(--leaf);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;font:600 13px/1 var(--cinzel);letter-spacing:.16em;text-transform:uppercase;padding:14px 22px;border-radius:2px;transition:filter .15s,transform .15s}
.btn-gold{background:var(--leaf);color:#2a1a06;box-shadow:0 8px 22px -10px rgba(201,161,74,.8)}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--gold)}
.btn-ghost:hover{background:rgba(201,161,74,.1)}
.btn.on{background:var(--claret);box-shadow:inset 0 0 0 1px var(--gold-hi);color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font:700 18px/1 var(--cinzel);letter-spacing:.14em;text-transform:uppercase}
.logo svg{width:26px;height:26px}
.conn{font:500 11px/1 var(--cinzel);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.conn i{width:8px;height:8px;border-radius:50%;background:#7a6040}
.conn.ok i{background:#5fbf7f;box-shadow:0 0 8px #5fbf7f}
.wrap{max-width:1240px;margin:0 auto;padding:18px}
.stats{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:center;padding:4px 0 16px;font:500 12px/1 var(--cinzel);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.stats b{color:var(--gold-hi);font-weight:600;margin-left:6px}
.game{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}
.hall{position:relative;aspect-ratio:2/1;border-radius:6px;overflow:hidden;background:radial-gradient(70% 70% at 50% 50%,#163a2f,#0f2a22 60%,#081a14)}
.longtable{position:absolute;left:27%;right:5%;top:31%;bottom:31%;border-radius:10px;background:linear-gradient(180deg,#4a2a17,#2e180c 55%,#24130a);box-shadow:0 0 0 2px var(--gold-lo),0 0 0 4px #1a0e07,0 18px 40px rgba(0,0,0,.6)}
.runner{position:absolute;left:3%;right:3%;top:34%;bottom:34%;background:linear-gradient(180deg,#5a1626,#3c0d18);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.placard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;padding:8px 22px 12px;min-width:190px;background:var(--ivory);color:#2a1a06;box-shadow:0 0 0 3px var(--ivory),0 0 0 4px var(--gold),0 8px 20px rgba(0,0,0,.5)}
.placard .phase{font:700 12px/1 var(--cinzel);letter-spacing:.2em;text-transform:uppercase;color:var(--claret)}
.placard .pot{font:700 28px/1.15 var(--cinzel)}
.placard .meta{font:italic 500 14px/1.2 var(--corm);color:#5a4630}
.placard .clock{font:600 12px/1 var(--cinzel);letter-spacing:.1em;margin-top:4px;color:#5a4630}
.timer{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:rgba(0,0,0,.12)}
.timer i{display:block;height:100%;background:var(--claret);transform-origin:left}
.seat{position:absolute;transform:translate(-50%,-50%);width:13%;text-align:center;background:none;border:0;padding:0;cursor:default}
.seat .med{position:relative;width:44px;height:44px;margin:0 auto 4px;border-radius:50%;display:grid;place-items:center;font:700 17px/1 var(--cinzel);color:var(--gold-hi);background:radial-gradient(circle at 35% 30%,#3a2a1c,#170f09);box-shadow:0 0 0 2px var(--gold-lo),0 0 0 4px #0c0a08;transition:.2s}
.seat .nm{display:block;font:600 12px/1.15 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000}
.seat.top .nm{position:absolute;left:0;right:0;bottom:calc(100% + 2px)}
.seat .votes{position:absolute;top:-6px;right:-9px;min-width:21px;height:21px;border-radius:50%;background:var(--claret);border:1px solid var(--gold);font:700 11px/19px var(--cinzel);color:var(--gold-hi);opacity:0;transform:scale(.4);transition:.2s}
.seat .votes.on{opacity:1;transform:scale(1)}
.seat.me .med{background:var(--leaf);color:#2a1a06;font-size:11px}
.seat.safe .med{box-shadow:0 0 0 2px var(--gold-hi),0 0 0 4px #0c0a08,0 0 20px 6px rgba(243,220,154,.5)}
.seat.out{opacity:.25}
.seat.click{cursor:pointer}
.seat.click .med{animation:bob 1.1s ease-in-out infinite}
.seat.click:hover .med,.seat.picked .med{box-shadow:0 0 0 2px #e05563,0 0 0 4px #0c0a08,0 0 16px 4px rgba(224,85,99,.5)}
.seat.wsel .med{box-shadow:0 0 0 2px #8fb7ff,0 0 0 4px #0c0a08,0 0 16px 4px rgba(143,183,255,.5)}
@keyframes bob{50%{transform:translateY(-3px)}}
.side{display:flex;flex-direction:column;border-left:1px solid var(--line);min-height:0}
.side h4{margin:0;padding:10px 14px;gap:10px;white-space:nowrap;letter-spacing:.16em!important;font:600 11px/1 var(--cinzel);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid rgba(201,161,74,.18);display:flex;justify-content:space-between}
.feed{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.38;min-height:300px;max-height:470px}
.msg b{color:var(--gold-hi);font-weight:600}
.msg.mine b{color:#f0a3ad}
.msg.sys{color:var(--muted);font-style:italic}
.msg.host{font-style:italic;border-left:2px solid var(--gold);padding-left:9px}
.msg.host b{font:600 11px/1 var(--cinzel);font-style:normal;letter-spacing:.12em;color:var(--gold)}
.msg.wh{color:#bcd1ff;font-style:italic}
.msg.wh b{color:#8fb7ff}
.compose{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(201,161,74,.18)}
.compose input{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line);background:#15100c;color:var(--ivory);font:400 16px var(--body);border-radius:2px}
.compose input:focus{outline:none;border-color:var(--gold)}
.wto{padding:6px 14px;font:italic 500 15px/1.3 var(--corm);color:#bcd1ff;display:none}
.wto.on{display:block}
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;min-height:62px;margin-top:14px;font:italic 500 19px/1.3 var(--corm);color:var(--muted);text-align:center}
.actions b{font-style:normal;color:var(--gold-hi)}
.center-card{max-width:560px;margin:8vh auto;text-align:center;padding:40px 30px;border:1px solid var(--line);background:rgba(12,10,8,.6)}
.center-card h1{font:700 clamp(30px,5vw,46px)/1.1 var(--cinzel);letter-spacing:.06em;margin:10px 0 14px}
.eyebrow{font:600 12px/1 var(--cinzel);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.lede{font:italic 500 20px/1.45 var(--corm);color:var(--muted)}
.field{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.field input{padding:14px 16px;border:1px solid var(--line);background:#15100c;color:var(--ivory);font:600 18px var(--cinzel);letter-spacing:.2em;text-transform:uppercase;width:200px;text-align:center}
.fine{margin-top:18px;font:italic 400 14px/1.4 var(--corm);color:var(--muted)}
.result{margin-top:12px;font:600 15px/1.5 var(--cinzel);letter-spacing:.06em}
@media (max-width:900px){.game{grid-template-columns:1fr}.side{border-left:0;border-top:1px solid var(--line)}.feed{min-height:180px;max-height:260px}}
@media (max-width:620px){.hall{aspect-ratio:1.25/1}.longtable{left:3%;right:3%;top:30%;bottom:30%}.seat{width:16%}.seat .med{width:30px;height:30px;font-size:13px}.seat.me .med{font-size:8px}.seat .nm{font-size:9.5px}.seat.top .nm{position:static}
.placard{min-width:0;padding:5px 10px 8px}.placard .pot{font-size:20px}.placard .phase{font-size:9.5px}.placard .meta{font-size:12px}.stats{gap:6px 16px;font-size:10.5px}.logo{font-size:14px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* hall decor and hosts */
.hall{background:radial-gradient(50% 40% at 50% 0%,rgba(243,220,154,.22),transparent 70%),radial-gradient(70% 70% at 50% 55%,#163a2f,#0f2a22 60%,#081a14)}
.drape{position:absolute;top:0;bottom:0;width:4%;background:repeating-linear-gradient(90deg,#3c0d18 0 6px,#5a1626 6px 12px);box-shadow:inset -6px 0 12px rgba(0,0,0,.5);z-index:0}
.drape.l{left:0;border-right:1px solid var(--gold-lo)}.drape.r{right:0;border-left:1px solid var(--gold-lo);box-shadow:inset 6px 0 12px rgba(0,0,0,.5)}
.glow{position:absolute;left:58%;top:-30px;width:180px;height:60px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(243,220,154,.45),transparent);pointer-events:none}
.candle{position:absolute;top:50%;width:22px;height:34px;transform:translate(-50%,-62%)}
.candle .flame{animation:flicker 2.2s ease-in-out infinite;transform-origin:center bottom;transform-box:fill-box}
@keyframes flicker{50%{opacity:.7;transform:scaleY(.85)}}
.host-fig{position:absolute;bottom:22%;width:11%;z-index:2;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6));transition:filter .4s}
.host-fig svg{display:block;width:100%;height:auto;aspect-ratio:120/200;overflow:visible}
.host-fig.charles{left:5%}
.host-fig.fortuna{left:14.5%;width:12.5%;bottom:21%}
.host-fig.fortuna svg{aspect-ratio:150/200}
.host-fig .tag{display:block;text-align:center;font:600 9.5px/1 var(--cinzel);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.host-fig.fortuna.active{filter:drop-shadow(0 0 18px rgba(243,220,154,.85)) drop-shadow(0 10px 14px rgba(0,0,0,.6))}
.host-fig.fortuna.active .wheel{animation:spin 1.6s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.host-fig.charles.talk{animation:nod .6s ease-in-out 2}
@keyframes nod{50%{transform:translateY(-3px)}}
.bubble{position:absolute;left:4%;top:5%;max-width:28%;z-index:3;padding:9px 12px 10px;background:var(--ivory);color:#2a1a06;font:italic 500 14px/1.3 var(--corm);box-shadow:0 0 0 2px var(--ivory),0 0 0 3px var(--gold),0 10px 20px rgba(0,0,0,.5);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.bubble.on{opacity:1;transform:none}
.bubble b{display:block;font:700 9.5px/1 var(--cinzel);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--claret);margin-bottom:4px}
.bubble::after{content:"";position:absolute;left:24px;bottom:-9px;border:8px solid transparent;border-top-color:var(--ivory);border-bottom:0}
.setting{position:absolute;width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fbf6ea 0 52%,#e9dcc0 53% 62%,#c9a14a 63% 70%,#f4ead5 71%);box-shadow:0 2px 4px rgba(0,0,0,.4);z-index:1}
.setting.gone{opacity:.25}
.setting::after{content:"";position:absolute;right:-9px;top:-6px;width:6px;height:10px;border-radius:2px 2px 3px 3px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(201,161,74,.5))}
.seat{z-index:2}
.bubble{display:none!important}
.mobile-host{display:flex;gap:12px;align-items:center;margin-bottom:12px;padding:8px 14px;min-height:64px;background:var(--ivory);color:#2a1a06;box-shadow:0 0 0 1px var(--gold),0 0 0 4px var(--ink),0 0 0 5px rgba(201,161,74,.4)}
.mobile-host svg{width:30px;height:50px;flex:0 0 auto}
.mobile-host p{margin:0;font:italic 500 18px/1.3 var(--corm)}
.mobile-host p::before{content:"Charles";display:block;font:700 9.5px/1 var(--cinzel);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--claret);margin-bottom:3px}
@media (max-width:620px){
  .host-fig,.bubble,.drape,.candle{display:none}
  .longtable{left:3%!important;right:3%!important}
  .mobile-host{display:flex;gap:10px;align-items:center;margin-bottom:10px;padding:8px 10px;background:var(--ivory);color:#2a1a06;box-shadow:0 0 0 1px var(--gold)}
  .mobile-host svg{width:34px;height:56px;flex:0 0 auto}
  .mobile-host p{margin:0;font:italic 500 15px/1.3 var(--corm)}
  .setting{width:14px;height:14px}.setting::after{display:none}
}

/* marks, gallery, prediction, header */
.hdr-right{display:flex;align-items:center;gap:22px}
.lb-link{font:600 11px/1 var(--cinzel);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.lb-link:hover{color:var(--gold-hi)}
.seat .mark{display:block;min-height:12px;margin-top:2px;font:600 9px/1.2 var(--cinzel);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.seat.prot .med{box-shadow:0 0 0 2px var(--gold-hi),0 0 0 4px #0c0a08,0 0 0 6px var(--gold)}
.seat.prot .mark{color:var(--gold-hi)}
.seat.risk .med{box-shadow:0 0 0 2px #e05563,0 0 0 4px #0c0a08;animation:risk 1s ease-in-out infinite}
.seat.risk .mark{color:#f0a3ad}
@keyframes risk{50%{box-shadow:0 0 0 2px #e05563,0 0 0 4px #0c0a08,0 0 16px 4px rgba(224,85,99,.6)}}
.seat.predicted .med{box-shadow:0 0 0 2px #b78cff,0 0 0 4px #0c0a08,0 0 16px 4px rgba(183,140,255,.5)}
.msg.gal{color:#d9c9ef}
.msg.gal b{color:#c4a8f5}
@media (max-width:620px){.seat .mark{font-size:7.5px;letter-spacing:.06em}.hdr-right{gap:12px}.lb-link{font-size:9.5px}}
[hidden]{display:none!important}
a.btn{text-decoration:none}

.nudge{margin:12px auto 0;max-width:560px;text-align:center;padding:10px 16px;background:#4a1220;border:1px solid #e05563;color:#ffe3e7;font:600 14px/1.3 var(--cinzel);letter-spacing:.08em;text-transform:uppercase;animation:risk 1s ease-in-out infinite}
.nudge[hidden]{display:none}
.msg.nudge{color:#f0a3ad;font-weight:600}
.msg.fortuna{color:var(--gold-hi);font-style:italic;border-left:2px solid var(--gold-hi);padding-left:9px}
.msg.fortuna b{font:600 11px/1 var(--cinzel);font-style:normal;letter-spacing:.12em;color:var(--gold-hi)}
.seat.safe .mark{color:var(--gold-hi)}
.seat.blessed .med{box-shadow:0 0 0 2px var(--gold-hi),0 0 0 4px #0c0a08,0 0 30px 10px rgba(243,220,154,.75)}

.msg .rx{display:inline-flex;gap:6px;margin-left:8px;vertical-align:middle;font-style:normal}
.rxb{border:1px solid rgba(201,161,74,.3);background:transparent;color:var(--muted);border-radius:12px;padding:1px 7px;font:500 11px/1.4 var(--body);cursor:default}
button.rxb{cursor:pointer}
button.rxb:hover{border-color:var(--gold);color:var(--ivory)}
.rxb i{font-style:normal}
.rxb.on.up{background:rgba(201,161,74,.25);border-color:var(--gold-hi);color:var(--gold-hi)}
.rxb.on.down{background:rgba(224,85,99,.2);border-color:#e05563;color:#f0a3ad}
.msg.liked{border-left:2px solid var(--gold-hi);padding-left:8px}
.msg.buried{opacity:.35}
.msg.buried:hover{opacity:.8}

.slowcd{position:relative;padding:7px 12px;font:600 11px/1.3 var(--cinzel);letter-spacing:.1em;text-transform:uppercase;color:#d9c9ef;border-top:1px solid rgba(201,161,74,.18);overflow:hidden}
.slowcd::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,100%);background:rgba(196,168,245,.14);transition:width .25s linear}
.slowcd[hidden]{display:none}
.compose button:disabled{opacity:.55;cursor:not-allowed;min-width:64px}

.seat.chosen .med{box-shadow:0 0 0 2px var(--gold-hi),0 0 0 4px #4a1220,0 0 0 6px var(--gold-hi),0 0 22px 6px rgba(243,220,154,.45)}
.seat.chosen .mark{color:var(--gold-hi)}

.race{display:block;margin:10px auto 2px;max-width:620px;padding:10px 14px;border:1px solid rgba(243,220,154,.45);background:linear-gradient(180deg,rgba(74,18,32,.55),rgba(43,10,18,.35));font:500 15px/1.5 var(--body);font-style:normal;color:var(--ivory)}
.race-h{display:block;font:700 11px/1 var(--cinzel);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:6px}
.race-me{font:italic 500 15px/1.4 var(--corm);color:var(--muted)}

.seat.ringed .med{outline:3px solid var(--ring);outline-offset:3px;box-shadow:0 0 14px 2px var(--ring)}

/* avatars in the medallion */
.seat .med{width:54px;height:54px;background:#0c0a08;padding:0}
.seat .med .ava{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.seat.me .med{background:#0c0a08}
.seat .youtag{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);font:700 8px/1 var(--cinzel);letter-spacing:.1em;padding:2px 5px;border-radius:6px;background:var(--leaf);color:#2a1a06;z-index:2}
.seat.out .med .ava{filter:grayscale(1) brightness(.6)}
.seat .votes{z-index:3}
.crest{vertical-align:-2px;margin-right:3px}
.shilling{vertical-align:-3px}
@media (max-width:620px){.seat .med{width:36px;height:36px}.seat .youtag{font-size:6.5px;bottom:-6px}}