:root{--n1:#0c0b2b;--n2:#131241;--n3:#1c1b58;--lav:#8B7CF6;--lav2:#A99BFF;--amb:#F6B860;--txt:#F3F1FF;--sub:#a6a3d6;--dim:#8F8BC9;--glass:rgba(255,255,255,.07);--line:rgba(255,255,255,.09)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--n1)}
body{font-family:'Manrope',system-ui,sans-serif;color:var(--txt);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
 background:radial-gradient(1.5px 1.5px at 12% 9%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 33% 42%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 78% 6%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 88% 30%,#fff6 50%,transparent 51%),radial-gradient(1.2px 1.2px at 91% 78%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 16% 66%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 55% 88%,#fff5 50%,transparent 51%),radial-gradient(ellipse 120% 60% at 70% 0%,#2a2778 0%,transparent 70%),linear-gradient(var(--n3) 0%,var(--n2) 40%,var(--n1) 100%);background-attachment:fixed}
button,input,select{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;touch-action:manipulation}
#app{max-width:440px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.pad{padding:calc(22px + env(safe-area-inset-top)) 22px calc(26px + env(safe-area-inset-bottom));display:flex;flex-direction:column;flex:1}
.eb{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
h1{font-size:54px;font-weight:800;line-height:.96;letter-spacing:-.045em;margin-top:12px}
h1 em,h2 em,h4 em{font-style:normal;font-weight:500;color:var(--lav2)}
h2{font-size:34px;font-weight:800;line-height:1.02;letter-spacing:-.035em;margin-top:10px}
h3{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:30px 0 10px}
.lede{font-size:16px;line-height:1.5;color:#c9c6f0;margin-top:12px}
.sm{font-size:13px;line-height:1.45;color:var(--dim);margin-top:12px;text-align:center}
.err{color:#ffb4a0;font-size:13px;font-weight:600;margin-top:10px;min-height:18px;text-align:center}

/* hero art on the landing page */
.heroart{position:relative;height:150px;margin:-6px -22px 0}
.heroart svg{position:absolute;right:-6px;top:-18px;width:250px;height:auto;overflow:visible}

.pot{margin-top:20px;border-radius:22px;padding:16px 18px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 12px;color:#2a1a00;background:linear-gradient(135deg,#FFE0A6,#F3A94A);box-shadow:0 14px 34px rgba(246,184,96,.3),inset 0 1px 0 rgba(255,255,255,.6)}
.pot span{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.pot em{font-style:normal;font-size:13px;font-weight:600;color:#6a4300;line-height:1.35;margin-top:3px}
.pot b{grid-row:1/3;grid-column:2;font-size:50px;font-weight:800;letter-spacing:-.05em;line-height:1}

label.f{display:block;font-size:13px;font-weight:600;color:var(--sub);margin-top:16px}
.in{display:block;width:100%;margin-top:7px;height:52px;border-radius:16px;padding:0 16px;font-size:16px;font-weight:600;color:var(--txt);background:var(--glass);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);outline:0;-webkit-appearance:none;appearance:none}
.in:focus{border-color:var(--lav2);box-shadow:0 0 0 4px rgba(139,124,246,.25)}
.in::placeholder{color:#7773b3;font-weight:500}
.in.bad{border-color:#ff9c85;animation:shake .35s}
select.in{background-image:linear-gradient(45deg,transparent 50%,#a6a3d6 50%),linear-gradient(135deg,#a6a3d6 50%,transparent 50%);background-position:calc(100% - 20px) 23px,calc(100% - 14px) 23px;background-size:6px 6px;background-repeat:no-repeat;padding-right:34px}
select.in option{color:#111}
input[type=date].in,input[type=time].in{min-width:0;color-scheme:dark}
.chk{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:14px;line-height:1.4;color:#d5d2f5;cursor:pointer}
.chk input{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;border-radius:9px;background:var(--glass);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;margin-top:-2px}
.chk input:checked{background:linear-gradient(180deg,#FFE0A6,#F3A94A);border-color:transparent}
.chk input:checked::after{content:"";width:11px;height:6px;border-left:2.5px solid #2a1a00;border-bottom:2.5px solid #2a1a00;transform:rotate(-45deg) translate(1px,-1px)}
.chk.bad{animation:shake .35s;color:#ffb4a0}

.btn{display:flex;align-items:center;justify-content:center;width:100%;height:54px;border-radius:27px;font-weight:800;font-size:16px;color:#fff;margin-top:20px;background:linear-gradient(180deg,#B3A6FF,#7260EE);box-shadow:0 12px 30px rgba(124,108,240,.55),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .12s,opacity .2s}
.btn:active{transform:scale(.97)}
.btn.amb{color:#2a1a00;background:linear-gradient(180deg,#FFE0A6,#F3A94A);box-shadow:0 12px 30px rgba(246,184,96,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.btn.ghost{background:var(--glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-weight:700}
.btn.sm2{height:44px;font-size:14px;margin-top:10px}
.btn[disabled]{opacity:.35;box-shadow:none;pointer-events:none}
.link{display:block;margin:16px auto 0;font-size:14px;font-weight:700;color:var(--lav2);text-align:center}
.push{margin-top:auto}

details.how{margin-top:22px;border-radius:18px;background:var(--glass);border:1px solid var(--line)}
details.how summary{list-style:none;padding:15px 18px;font-weight:700;font-size:14px;display:flex;justify-content:space-between;cursor:pointer}
details.how summary::-webkit-details-marker{display:none}
details.how summary::after{content:"+";color:var(--lav2);font-size:18px;line-height:1}
details.how[open] summary::after{content:"\2212"}
.rules{padding:0 18px 16px}
.rules div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.rules span{color:var(--sub);text-align:right}
.rules p{font-size:13px;color:var(--sub);line-height:1.5;padding-top:10px;border-top:1px solid var(--line)}

/* ---------- game screen ---------- */
.gp{flex:1;display:flex;flex-direction:column;height:100dvh;padding:calc(14px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom));user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.hud{padding:0 22px}
.top{display:flex;align-items:center;gap:12px}
.back{width:34px;height:34px;border-radius:50%;background:var(--glass);font-size:18px;font-weight:700;display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.dots{display:flex;gap:5px;flex:1}.dots i{height:4px;flex:1;border-radius:2px;background:rgba(255,255,255,.12)}.dots i.dn{background:#7C6CF0}.dots i.on{background:#F6B860;box-shadow:0 0 10px rgba(246,184,96,.8)}
.cnt{font-size:12px;font-weight:700;color:var(--dim);flex:none}
.gp h4{font-size:28px;font-weight:800;letter-spacing:-.035em;margin-top:14px;line-height:1.05}
.hint{font-size:13.5px;color:var(--sub);margin-top:5px;line-height:1.35;min-height:18px}
.scene{flex:1;min-height:120px;display:grid;place-items:center;margin-top:4px;overflow:visible}
.stage{position:relative;touch-action:none}
.gsv{display:block;width:100%;height:100%;overflow:visible}
.fly{position:absolute;inset:0;pointer-events:none;will-change:transform}
.fly .gsv{position:absolute;inset:0}
.tile{cursor:pointer}
#needle{transform-box:view-box;transform-origin:150px 218px;transition:transform .6s cubic-bezier(.3,1.7,.5,1)}
#top{transition:transform .25s cubic-bezier(.3,1.7,.5,1)}
.it{cursor:pointer;animation:plop .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes plop{from{transform:translateY(-26px);opacity:0}}
#knob{transition:transform .22s ease-in}
#knob.down{transform:translateY(92px)}
#lever{cursor:pointer}
.bulb.a{fill:#F9BE66}.bulb.b{fill:#fff;opacity:.45}
.spin .bulb.a{animation:blink .24s steps(1) infinite}.spin .bulb.b{animation:blink .24s steps(1) infinite reverse}
@keyframes blink{0%{fill:#F9BE66;opacity:1}50%{fill:#fff;opacity:.45}}
.win #marq{animation:pulse .5s 3}
@keyframes pulse{50%{transform:scale(1.06)}}#marq{transform-box:fill-box;transform-origin:center}
.extra{padding:0 20px;display:flex;gap:8px;justify-content:center}
.chip{flex:1;height:46px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:13px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;transition:transform .1s}
.chip small{font-size:10.5px;font-weight:600;color:var(--dim)}
.chip:active{transform:scale(.94);background:rgba(255,255,255,.14)}
.extra .in{margin-top:0;text-align:center;font-size:18px;font-weight:800;user-select:text;-webkit-user-select:text}
.ro{text-align:center;margin-top:10px}
.ro span{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ro b{display:block;font-size:36px;font-weight:800;letter-spacing:-.04em;line-height:1.12}
.ro b.pop{animation:pop .3s}
@keyframes pop{40%{transform:scale(1.12)}}
.ctl{display:flex;align-items:center;gap:10px;padding:0 20px;margin-top:12px}
.rb{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:16px;font-weight:800;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:transform .1s}
.rb:active{transform:scale(.9)}
.rb[hidden]{display:none}
.ctl .btn{margin-top:0;height:52px;flex:1}
.below{padding:0 20px}.below .btn{margin-top:10px;height:50px}
.btn.hold{position:relative;touch-action:none}
.btn.hold.on{transform:scale(.96);box-shadow:0 0 0 8px rgba(246,184,96,.2),0 0 0 18px rgba(246,184,96,.08),0 12px 30px rgba(246,184,96,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.btn.hold i{width:12px;height:12px;border-radius:50%;background:#2a1a00;margin-right:10px}
.btn.hold.on i{animation:blinkdot .4s infinite}
@keyframes blinkdot{50%{opacity:.2}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.shake{animation:shake .35s}

/* ---------- baby card ---------- */
.bcard{margin-top:20px;border-radius:26px;padding:20px;border:2px solid transparent;background:linear-gradient(#1b1a55,#15143f) padding-box,linear-gradient(140deg,#F6B860,#8B7CF6 55%,#F792B8) border-box;box-shadow:0 20px 50px rgba(124,108,240,.35)}
.bh{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.bn{font-size:52px;font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--amb);margin-top:4px;overflow-wrap:anywhere}
.bn.long{font-size:38px}
.bg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.bg>*{background:rgba(255,255,255,.06);border-radius:14px;padding:10px 12px;text-align:left;display:block}
.bg .w{grid-column:1/3}
.bg span{display:block;font-size:11px;font-weight:600;color:var(--sub)}.bg b{font-size:17px;font-weight:800}
.bg .q b{color:#6f6ca8}
.bg button{position:relative}.bg button::after{content:"Edit";position:absolute;right:12px;top:10px;font-size:10px;font-weight:700;color:var(--lav2);letter-spacing:.08em;text-transform:uppercase}

/* ---------- home, spread, board ---------- */
.tag{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:15px;font-size:12px;font-weight:700;background:rgba(127,227,184,.14);color:#9fefc9;align-self:flex-start}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tag.amb{background:rgba(246,184,96,.16);color:#ffd08a}
.box{border-radius:20px;background:var(--glass);border:1px solid var(--line);padding:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.tl{position:relative;height:46px;margin:22px 6px 0}
.tl::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:rgba(255,255,255,.14);border-radius:1px}
.tl i{position:absolute;top:14px;width:18px;height:18px;border-radius:50%;margin-left:-9px;background:linear-gradient(180deg,#C9BFFF,#7C6CF0);border:2px solid #17164a;box-shadow:0 0 12px rgba(139,124,246,.7)}
.tl .due{position:absolute;top:-14px;bottom:0;border-left:2px dashed var(--amb);font-size:9.5px;font-weight:800;letter-spacing:.1em;color:var(--amb);padding-left:5px;white-space:nowrap}
.tl .due.r{border-left:0;border-right:2px dashed var(--amb);padding:0 5px 0 0;transform:translateX(-100%)}
.tlx{display:flex;justify-content:space-between;font-size:11px;font-weight:600;color:var(--dim);margin-top:4px}
.bars{display:flex;gap:6px;align-items:flex-end;height:96px;margin-top:6px}
.bars div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;font-size:10.5px;font-weight:700;color:var(--dim);gap:5px}
.bars u{display:block;width:100%;border-radius:7px 7px 3px 3px;background:linear-gradient(#B3A6FF,#7260EE);min-height:3px;text-decoration:none}
.bars u.z{background:rgba(255,255,255,.1)}
.names{display:flex;flex-wrap:wrap;gap:7px}
.names span{background:rgba(255,255,255,.08);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700}
.names span small{color:var(--dim);font-size:11px;margin-left:5px}
.names span:first-child{background:linear-gradient(180deg,#FFE0A6,#F3A94A);color:#2a1a00}.names span:first-child small{color:#6a4300}
.bdg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bdg div{border-radius:18px;background:var(--glass);border:1px solid var(--line);padding:13px}
.bdg span{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.bdg b{display:block;font-size:17px;font-weight:800;margin-top:6px;overflow-wrap:anywhere}.bdg em{font-style:normal;font-size:12px;color:var(--sub)}
.bdg div:nth-child(1) span{color:#ffb4a0}.bdg div:nth-child(2) span{color:#8fe0b4}.bdg div:nth-child(3) span{color:#a9c8ff}.bdg div:nth-child(4) span{color:var(--amb)}
.lb{display:flex;flex-direction:column;gap:7px}
.lr{display:flex;align-items:center;gap:11px;background:var(--glass);border-radius:17px;padding:10px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.lr .pos{font-size:12px;font-weight:700;color:var(--dim);width:16px;text-align:center}
.lr i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:15px;color:#1d1840;flex:none}
.lr .who{flex:1;min-width:0}.lr b{display:block;font-size:16px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr .who span{display:block;font-size:10.5px;color:var(--sub);margin-top:1px;line-height:1.3}
.lr em{font-style:normal;font-weight:800;font-size:24px;letter-spacing:-.03em}
.lr.me{box-shadow:inset 0 0 0 1.5px var(--lav2)}
.lr.win{background:linear-gradient(135deg,#FFE0A6,#F3A94A);color:#2a1a00}.lr.win .pos,.lr.win .who span{color:#6a4300}
.winner{margin-top:20px;border-radius:26px;padding:22px;text-align:center;color:#2a1a00;background:linear-gradient(160deg,#FFE9BF,#F3A94A);box-shadow:0 20px 60px rgba(246,184,96,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.winner span{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.winner b{display:block;font-size:46px;font-weight:800;letter-spacing:-.04em;line-height:1.05;margin-top:6px;overflow-wrap:anywhere}
.winner em{display:block;font-style:normal;font-weight:700;font-size:15px;margin-top:6px;color:#5a3600}

/* ---------- Chloe's screen ---------- */
.hostpage #app{max-width:560px;overflow:visible}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
.ent{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.ent:first-child{border-top:0}
.ent div{flex:1;min-width:0}.ent b{display:block}.ent span{display:block;font-size:12px;color:var(--sub);overflow:hidden;text-overflow:ellipsis}
.mini{height:34px;padding:0 14px;border-radius:17px;font-size:12px;font-weight:700;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);flex:none!important;white-space:nowrap}
.mini.warn{color:#ffb4a0}.mini.go{background:linear-gradient(180deg,#B3A6FF,#7260EE);box-shadow:none}
.res{padding:14px 0;border-top:1px solid var(--line)}.res:first-child{border-top:0;padding-top:0}
.res .hd{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;color:var(--sub)}
.res .hd b{color:var(--amb);font-size:15px}
.res .row{margin-top:8px;align-items:center}.res .in{margin-top:0;height:46px}
.copy{display:flex;gap:10px;align-items:center;margin-top:10px}.copy code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px ui-monospace,monospace;color:var(--lav2);background:rgba(0,0,0,.25);border-radius:12px;padding:11px 12px}
.note{font-size:13px;line-height:1.5;color:var(--sub);margin-top:10px}