@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');
:root{--ink:#132724;--green:#143b36;--felt:#1d5149;--red:#c74435;--paper:#f4efe4;--gold:#d5a84b;--line:#d8d0c0}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,input,select{font:inherit}button{cursor:pointer}header{height:82px;padding:0 clamp(24px,5vw,80px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#f7f3e9}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none}.brandmark{width:43px;height:43px;display:grid;place-items:center;background:var(--red);color:#fff;border-radius:50%;font-size:25px}.brand b{font-family:'Playfair Display';font-size:22px;letter-spacing:5px;display:block}.brand small{font-size:8px;letter-spacing:2px}.room-tag{font-size:11px;letter-spacing:2px;border:1px solid var(--line);padding:8px 10px 8px 15px;border-radius:30px}.room-tag b{font-size:14px;margin-left:5px}.room-tag button{border:0;background:var(--green);color:white;border-radius:50%;width:30px;height:30px}.hidden{display:none!important}.landing{min-height:calc(100vh - 82px);position:relative;overflow:hidden;padding:10vh max(6vw,30px) 120px;background:linear-gradient(105deg,#f7f3e9 0 58%,#eadfca 58%)}.hero{max-width:670px;position:relative;z-index:2}.eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;color:var(--red)}h1{font:700 clamp(48px,6vw,82px)/.98 'Playfair Display';margin:25px 0}h1 em{color:var(--red)}.lead{font:18px/1.6 'DM Sans';max-width:570px;color:#52625e}form{margin-top:45px;max-width:590px}label{font-size:10px;font-weight:700;letter-spacing:2px;display:block}input,form select{width:100%;margin-top:9px;padding:15px 17px;border:1px solid var(--line);background:#fffdf8;border-radius:3px;outline:none}input:focus{border-color:var(--green)}.join-row{display:grid;grid-template-columns:.8fr 1fr 1.1fr;gap:12px;margin-top:15px;align-items:end}.primary{height:49px;padding:0 20px;border:0;border-radius:3px;background:var(--red);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:space-between}.primary:hover{filter:brightness(.93)}.primary:disabled{opacity:.4;cursor:not-allowed}.art{position:absolute;left:63%;top:12%;width:32vw;height:68%;}.moon{position:absolute;width:350px;height:350px;border-radius:50%;background:#d7c49e;opacity:.5;top:10%;left:2%}.card{position:absolute;top:12%;left:18%;width:230px;height:330px;background:#fffdf9;border:8px solid #fff;box-shadow:0 20px 40px #263d3630;display:grid;place-items:center;font:80px 'Playfair Display';color:var(--red);background-image:radial-gradient(#d2b36c 1px,transparent 1px);background-size:9px 9px}.fan-one{transform:rotate(-10deg)}.fan-two{transform:translate(110px,40px) rotate(13deg);background-color:var(--green);color:#f5d78e}.seal{position:absolute;right:0;bottom:2%;width:85px;height:85px;border:3px solid var(--red);color:var(--red);display:grid;place-items:center;font-size:50px;transform:rotate(-8deg)}.steps{position:absolute;bottom:0;left:0;right:0;height:90px;background:var(--green);color:white;display:flex;align-items:center;justify-content:center;gap:35px;font-size:13px}.steps b{color:#e3bd6d;margin-right:10px}.steps i{width:8vw;height:1px;background:#ffffff33}.lobby{min-height:calc(100vh - 82px);padding:55px 8vw;text-align:center}.section-title h2{font:700 45px 'Playfair Display';margin:10px}.section-title>p:last-child,.muted{color:#71807c}.seats{width:min(700px,90vw);height:460px;margin:25px auto;position:relative;background:radial-gradient(ellipse,var(--felt) 0 54%,var(--green) 55% 60%,transparent 61%);}.seat{position:absolute;width:170px;padding:15px;border:1px solid var(--line);border-radius:6px;background:#fffdf8;text-align:left}.seat:nth-child(1){bottom:0;left:calc(50% - 85px)}.seat:nth-child(2){right:0;top:calc(50% - 40px)}.seat:nth-child(3){top:0;left:calc(50% - 85px)}.seat:nth-child(4){left:0;top:calc(50% - 40px)}.seat b{display:block}.seat small{color:#85918e}.seat.free{border-style:dashed;color:var(--red);text-align:center}.lobby>.primary{width:230px;margin:auto}.game{min-height:calc(100vh - 82px);background:#eae4d8;padding-bottom:230px}.scorebar{height:68px;background:#fffaf0;display:flex;align-items:center;justify-content:center;gap:10vw;border-bottom:1px solid var(--line)}.scorebar>div{display:flex;gap:15px;align-items:center}.scorebar strong{font:28px 'Playfair Display';color:var(--red)}.scorebar small{font-size:9px;letter-spacing:2px}.scorebar .round{border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 35px;flex-direction:column;gap:3px;font-size:10px;letter-spacing:2px}.scorebar .round span:last-child{color:var(--red);font-weight:bold}.table-wrap{max-width:1000px;margin:20px auto;position:relative}.opponents{display:flex;justify-content:space-around;margin-bottom:12px}.player-chip{background:#fffaf0;border:1px solid var(--line);border-radius:5px;padding:9px 15px;min-width:150px;text-align:center;position:relative}.player-chip.active{outline:2px solid var(--gold)}.player-chip b{display:block;font-size:13px}.player-chip small{font-size:10px;color:#71807c}.felt{height:360px;margin:0 30px;border:10px solid #143a35;border-radius:45%/18%;background:radial-gradient(circle at center,#286259,var(--felt));box-shadow:0 16px 30px #182d2825,inset 0 0 60px #102e29;display:flex;align-items:center;justify-content:center;position:relative}.pile{min-width:160px;min-height:110px;display:flex;justify-content:center;align-items:center;position:relative}.pile p{color:#ffffff75;font-size:12px}.mini-card{width:64px;height:91px;background:#fffdf6;border-radius:5px;border:1px solid #bbb;box-shadow:0 4px 8px #0004;margin-left:-40px;padding:5px;color:#1b302c;font-weight:700;position:relative}.mini-card:first-child{margin-left:0}.mini-card.red{color:#b9362b}.mini-card.special{background:#f5dba0;color:#8d2822;font-size:10px}.wish{position:absolute;top:25px;background:#f5d78e;padding:7px 14px;border-radius:20px;font-size:11px;font-weight:bold}.turn-text{position:absolute;bottom:25px;color:white;font-size:12px}.log{position:fixed;right:12px;top:165px;width:210px;background:#fffaf0dd;padding:12px;border-radius:6px;max-height:250px;overflow:auto;font-size:10px;z-index:3}.log p{margin:6px 0;border-bottom:1px solid #ddd;padding-bottom:5px}.controls{position:fixed;bottom:0;left:0;right:0;background:#f8f3e9;border-top:1px solid var(--line);padding:8px 20px 12px;z-index:5}.hand{height:145px;display:flex;align-items:flex-end;justify-content:center;overflow-x:auto;padding:0 20px}.playing-card{flex:0 0 82px;height:125px;margin-left:-24px;border:1px solid #c9c0b2;border-radius:7px;background:#fffdf8;box-shadow:0 3px 7px #162d2730;padding:7px;text-align:left;transition:.15s;position:relative}.playing-card:first-child{margin-left:0}.playing-card:hover{transform:translateY(-8px)}.playing-card.selected{transform:translateY(-18px);border:2px solid var(--red)}.playing-card .rank{font:700 20px 'Playfair Display'}.playing-card .symbol{position:absolute;inset:25px 5px 5px;display:grid;place-items:center;font-size:30px}.playing-card.red{color:var(--red)}.playing-card.special{background:#f0dfba;color:#9c342c}.actions{display:flex;justify-content:center;gap:8px;height:42px}.actions button{border:1px solid var(--line);background:#fff;padding:0 18px;border-radius:3px;font-weight:600}.actions button.primary{background:var(--red);border:0}.actions select{border:1px solid var(--line);background:white;padding:0 10px}.toast{position:fixed;top:95px;left:50%;transform:translateX(-50%) translateY(-20px);background:#9e3027;color:white;padding:12px 20px;border-radius:4px;opacity:0;pointer-events:none;transition:.2s;z-index:20}.toast.show{opacity:1;transform:translateX(-50%)}#notice{text-align:center;font-size:11px;color:var(--red);min-height:16px}
@media(max-width:750px){.landing{background:#f7f3e9;padding-top:7vh}.art{display:none}.steps{gap:10px;font-size:10px}.steps i{width:3vw}.join-row{grid-template-columns:1fr}.seats{height:390px}.seat{width:140px;font-size:12px}.log{display:none}.felt{margin:0 8px;height:285px}.game{padding-bottom:205px}.opponents{gap:4px}.player-chip{min-width:0;padding:7px;font-size:10px}.playing-card{flex-basis:68px;height:108px;margin-left:-28px}.hand{height:125px}.scorebar{gap:4vw}.scorebar .round{padding:0 15px}}
.seat .bot-button{display:block;margin:9px auto 0;border:1px solid var(--line);background:#f7f3e9;border-radius:3px;padding:5px 8px;font-size:10px;color:var(--ink)}