:root{--cream:#f7f1e5;--ink:#17352f;--green:#174f42;--felt:#176550;--red:#c43d45;--gold:#ddb65c}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.4 system-ui,-apple-system,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.welcome{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.brand{background:var(--green);color:white;padding:10vw;display:flex;flex-direction:column;justify-content:center}
.brand>span{font-size:6rem;color:#ed6671}
.brand h1{font:700 clamp(3.5rem,8vw,7rem)/.82 Georgia;margin:0}
.brand p{letter-spacing:.12em;text-transform:uppercase}
.panel{max-width:480px;width:86%;margin:auto}
.panel h2,.action h2{font:2.2rem Georgia;margin-bottom:1rem}
label{display:block;font-weight:700;margin:1rem 0}
input{display:block;width:100%;padding:.85rem;border:1px solid #aaa;border-radius:8px;margin-top:.35rem;background:#fff}
.tabs{display:flex;border-bottom:1px solid #bbb;margin-top:1.5rem}
.tabs button{flex:1;border:0;background:none;padding:.8rem}
.tabs .active{border-bottom:3px solid var(--red);font-weight:bold}
.primary{border:0;border-radius:9px;padding:.9rem 1.3rem;background:var(--red);color:white;font-weight:800;box-shadow:0 3px 0 #8e2830}
.primary:disabled{opacity:.45;cursor:not-allowed}
.error{color:var(--red)}
header{height:64px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #ddd}
header button{border:0;background:none;padding:.7rem}
.mini{color:var(--red);font-size:1.25rem}
.mini b{color:var(--ink)}
.lobby{text-align:center;max-width:760px;margin:5vh auto;padding:1rem}
.eyebrow{font-size:.75rem;letter-spacing:.18em;font-weight:800}
.code{display:block;border:0;background:none;font:700 clamp(3rem,10vw,6rem) Georgia;letter-spacing:.12em;color:var(--green);margin:auto}
.seats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:3rem 0}
.seats div{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.seats span{display:grid;place-items:center;width:74px;height:74px;background:var(--gold);border-radius:50%;font:2rem Georgia}
.seats small{color:var(--red);font-weight:bold}
.seats .empty{opacity:.45}
.scorebar{display:grid;grid-template-columns:repeat(4,1fr);background:white;text-align:center}
.scorebar div{padding:.65rem;border-bottom:3px solid transparent}
.scorebar .turn{border-color:var(--red);background:#fff8e8}
.scorebar span,.scorebar small{display:block}
.scorebar small{opacity:.6}
.turn-banner{background:#fff0bd;color:#6c3900;padding:.7rem 1rem;text-align:center;font-weight:900;letter-spacing:.03em;border-bottom:2px solid var(--gold)}
.felt{min-height:310px;background:radial-gradient(circle,#247b63,var(--green));color:white;padding:1rem;text-align:center}
.round{opacity:.8;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}
.trick{height:210px;display:flex;align-items:center;justify-content:center;gap:1rem}
.trick>div{display:flex;flex-direction:column}
.trick small{max-width:80px;overflow:hidden}
.card{width:58px;height:84px;border:0;border-radius:7px;background:#fff;color:#151515;box-shadow:0 3px 8px #0004;display:inline-flex;flex-direction:column;align-items:flex-start;padding:7px;margin:3px;transition:.15s}
.card b{font-size:1rem}
.card i{font-size:1.5rem;font-style:normal}
.card.red{color:var(--red)}
.hand{padding:1rem 2vw 2rem;display:flex;justify-content:center;align-items:end;min-height:130px;overflow-x:auto}
.hand .card{margin-left:-14px;flex:0 0 auto}
.hand .card:first-child{margin-left:0}
.hand .card:hover:not(:disabled),.hand .card.selected{transform:translateY(-14px);box-shadow:0 8px 12px #0004}
.hand .card:disabled{cursor:default}
.action{text-align:center;padding:1rem}
.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:5}
.modal>div{background:var(--cream);padding:2.5rem;border-radius:16px;text-align:center;max-width:400px}
.modal button{display:block;width:100%;margin:.7rem 0;padding:.8rem}
.bigheart{font-size:4rem;color:var(--red)}
#chat{position:fixed;right:-360px;top:64px;bottom:0;width:350px;max-width:95vw;background:#fff;box-shadow:-8px 0 25px #0002;padding:1rem;transition:.25s;z-index:4;display:flex;flex-direction:column}
#chat.open{right:0}
.messages{flex:1;overflow:auto}
.messages p{padding:.5rem;border-bottom:1px solid #eee}
.messages b{display:block;color:var(--red);font-size:.8rem}
#chatForm{display:flex;gap:.4rem}
#chatForm input{margin:0}
#chatForm button{border:0;background:var(--green);color:white;border-radius:7px}
.muted{opacity:.5}
@media(max-width:700px){.welcome{grid-template-columns:1fr}
.brand{padding:2rem;min-height:33vh}
.brand h1{font-size:3.3rem}
.brand>span{font-size:3rem}
.panel{padding:2rem 0}
.seats{grid-template-columns:1fr 1fr;margin:2rem 0}
.scorebar b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.scorebar small{display:none}
.felt{min-height:250px}
.trick{height:170px;gap:0}
.card{width:50px;height:73px}
.hand{justify-content:flex-start;padding-left:18px}
.code{font-size:3rem}
}
.room-details{display:flex;align-items:end;justify-content:center;gap:3rem}
.room-details>div{min-width:13rem}
.eyebrow{display:block}
.password{display:block;font:700 2rem Georgia;color:var(--green);overflow-wrap:anywhere;margin:.5rem 0}
.secondary{display:block;margin:1.25rem auto;border:1px solid #9aaaa6;border-radius:9px;padding:.7rem 1rem;background:transparent;color:var(--ink);font-weight:700}
.seats .offline{opacity:.45}
#connection{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:10;background:#202b29;color:white;border-radius:99px;padding:.65rem 1rem;box-shadow:0 3px 12px #0005;white-space:nowrap}
@media(max-width:700px){.room-details{align-items:center;flex-direction:column;gap:1rem}}