@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Caslon+Display&display=swap');
:root{color-scheme:dark;--gold:#e9bd78;--muted:#999ab1}*{box-sizing:border-box}body{margin:0;background:#101522;color:#eeede9;font-family:'DM Sans',sans-serif;background-image:radial-gradient(ellipse at 20% 35%,#34304666,transparent 55%)}header{height:94px;margin:0 5%;border-bottom:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:2px;color:var(--muted)}.brand{display:flex;gap:16px;align-items:center;color:var(--gold);text-decoration:none;font-size:24px}.brand span{color:#eee;font-family:Georgia,serif;letter-spacing:0}.brand i{color:#999}main{max-width:1160px;margin:auto;padding:50px 30px}.eyebrow,.number{color:var(--gold);font-size:10px;letter-spacing:2px}h1{font-family:'Libre Caslon Display',Georgia,serif;font-size:64px;line-height:1.08;font-weight:400;margin:22px 0}h1 em{color:var(--gold);font-weight:400}p{font-size:14px;color:var(--muted);line-height:1.8}#lobby{text-align:center}.cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:800px;margin:36px auto 12px;text-align:left}article{background:#ffffff03;border:1px solid #ffffff15;padding:28px;border-radius:12px}h2{font-family:Georgia,serif;font-weight:400;font-size:25px;margin:14px 0}article p{font-size:12px;margin-bottom:22px}button,input{font:inherit;border-radius:7px}button{cursor:pointer;color:inherit;border:1px solid #ffffff24;background:#ffffff05;padding:12px 16px}button:hover{filter:brightness(1.2);border-color:#e9bd7880}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.roles{display:flex;gap:10px;margin-bottom:16px}.roles button{flex:1}.selected{color:var(--gold);border-color:var(--gold);background:#e9bd7810}.primary,.secondary{width:100%;display:flex;justify-content:space-between}.primary{background:var(--gold);color:#292234;border:0}.secondary{background:#bebce01a}label{display:block;font-size:9px;color:var(--muted);letter-spacing:2px;margin-bottom:8px}input{width:100%;padding:12px;background:#0b101b;border:1px solid #ffffff20;color:white;letter-spacing:4px;margin-bottom:16px;text-transform:uppercase}.footnote{font-size:9px;letter-spacing:2px;color:#777c96;margin:25px}#error{color:#f5ae99;min-height:24px}.gamebar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.gamebar h2{margin:8px 0}.room{font-size:10px;letter-spacing:1px;color:var(--muted)}#copy{color:var(--gold);margin:0 14px;font-size:16px;letter-spacing:3px}#you{display:block;text-align:right;margin-top:8px}.stage{position:relative;border-radius:14px;border:1px solid #ffffff20;overflow:hidden;box-shadow:0 20px 80px #0004}canvas{display:block;width:100%;background:#151c30}#overlay{position:absolute;inset:0;background:#111728d9;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;pointer-events:none}#overlay button{width:auto;pointer-events:auto}#overlay h2{font-size:35px;color:var(--gold)}.below,footer{display:flex;justify-content:space-between;align-items:center;gap:20px}.below p{max-width:800px;font-size:12px}#stars{white-space:nowrap;color:var(--gold);font-size:12px}footer{border-top:1px solid #ffffff10;padding-top:18px;color:var(--muted);font-size:11px}kbd{padding:4px 6px;border:1px solid #ffffff25;border-radius:4px;margin-right:3px}footer button{font-size:11px} [hidden]{display:none!important}@media(max-width:700px){.tag{display:none}h1{font-size:43px}.cards{grid-template-columns:1fr}main{padding:30px 16px}footer{flex-wrap:wrap}.brand{font-size:19px}header{height:70px}#connection{font-size:8px}}

.navigation{display:flex;gap:22px;align-items:center;margin-bottom:24px}.navigation>button{white-space:nowrap;font-size:12px}#levels{display:flex;gap:10px;flex:1}#levels button{flex:1;font-size:11px;padding:11px 10px}#levels button[aria-current]{border-color:var(--gold);color:var(--gold);background:#e9bd7810}#levels button:disabled{opacity:.4;cursor:not-allowed}#levels button:disabled:hover{filter:none;border-color:#ffffff24}@media(max-width:700px){.navigation{align-items:flex-start;gap:12px}#levels{flex-direction:column}}

#levels{flex-wrap:wrap}#levels button{flex:1 1 27%;min-width:140px}.navigation{align-items:flex-start}
