@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
:root{--ink:#183d34;--cream:#f6f3eb;--muted:#777e72;--gold:#bd9250;--line:#dcded2;--red:#b14940}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #c49953;outline-offset:4px}[hidden]{display:none!important}header{height:110px;padding:0 5.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}a{color:inherit;text-decoration:none}.brand{display:flex;gap:15px;align-items:center;font-weight:700;letter-spacing:2px;font-size:17px}.brand small{display:block;font-size:8px;letter-spacing:1.8px;margin-top:7px;color:var(--muted)}.brand-icon{font-family:Georgia,serif;background:var(--ink);color:var(--cream);font-size:25px;width:47px;height:56px;border-radius:7px;display:grid;place-content:center;position:relative;letter-spacing:-2px;transform:rotate(-5deg)}.brand-icon>span{position:absolute;font-size:12px;right:6px;bottom:3px}.header-right{display:flex;gap:28px;align-items:center}.connection{font-size:11px;color:var(--muted)}.connection:before{content:'';display:inline-block;width:6px;height:6px;background:#719275;border-radius:50%;margin-right:8px}.quiet{border:1px solid var(--line);background:transparent;border-radius:7px;padding:11px 15px;color:var(--ink);font-size:12px}.quiet:hover{background:#eaece1}main{max-width:1360px;margin:auto;padding:0 5.5%}.home{min-height:710px;display:grid;grid-template-columns:1.3fr 1fr;gap:8%;align-items:center;padding:65px 0}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2.1px;color:#7b866e}.intro>.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:var(--gold)}h1,h2,h3,p{margin-top:0}h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(38px,4.3vw,62px);font-weight:500;line-height:1.16;letter-spacing:-1.8px;margin:22px 0}h1 em{color:#67846a}p{line-height:1.8;color:var(--muted)}.intro>p{font-size:14px}.hero-cards{position:relative;height:246px;margin-top:28px;margin-left:23px}.hero-card{position:absolute;background:#fffdf7;width:132px;height:183px;top:24px;border:1px solid #e2ded1;border-radius:10px;box-shadow:0 14px 22px #20372b18;display:grid;place-content:center;font-family:Georgia,serif}.hero-card b{position:absolute;top:12px;left:12px;font-weight:400;font-size:25px;line-height:1}.hero-card b small{display:block;font-size:17px;text-align:center;margin-top:4px}.hero-card>span{font-size:80px}.hc-one{left:7px;transform:rotate(-19deg);color:var(--red)}.hc-two{left:104px;top:5px;transform:rotate(-3deg);z-index:2}.hc-two i{position:absolute;bottom:13px;width:100%;text-align:center;font-size:6px;font-family:Arial,sans-serif;letter-spacing:2px}.hc-three{left:210px;transform:rotate(15deg);color:var(--red)}.seal{position:absolute;left:340px;top:125px;width:91px;height:91px;border:1px solid #c4b48e;border-radius:50%;color:#98783e;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:6px;letter-spacing:1px;transform:rotate(13deg)}.seal strong{font-family:Georgia,serif;font-size:30px;font-weight:400;line-height:1}.intro-foot{color:var(--muted);font-size:11px;letter-spacing:.3px;margin-top:12px}.intro-foot span{margin:0 12px;color:var(--gold)}.play-panel{background:#fffdf7;border:1px solid #e2e1d7;border-radius:15px;padding:35px;box-shadow:0 12px 45px #273e2710}.play-panel h2{font-size:38px;margin:12px 0 28px}h2{font-family:'Playfair Display',Georgia,serif;font-size:32px;font-weight:500;letter-spacing:-.7px}label{display:block;font-size:11px;margin-bottom:9px;color:#5f6d5d}input{width:100%;background:#f9f8f2;border:1px solid #dcded2;border-radius:6px;padding:13px;color:var(--ink)}.mode{width:100%;display:flex;align-items:center;text-align:left;gap:15px;padding:19px 14px;background:var(--ink);border:0;border-radius:8px;color:#fffdf7;margin-top:20px;transition:transform .2s}.mode:hover{transform:translateY(-2px)}.mode+.mode{margin-top:12px;background:#eef0e6;color:var(--ink)}.mode-icon{font-size:30px;min-width:28px}.mode strong{display:block;font-size:14px;font-weight:600}.mode small{display:block;font-size:10px;opacity:.7;margin-top:5px}.arrow{margin-left:auto;font-size:20px}.divider{border-top:1px solid var(--line);text-align:center;height:20px;margin-top:32px}.divider span{background:#fffdf7;position:relative;top:-8px;padding:0 12px;font-size:8px;letter-spacing:1.5px;color:var(--muted)}#join-form{display:flex;gap:8px}#room-code{letter-spacing:3px;font-size:11px;text-transform:uppercase;min-width:0}.primary{background:var(--ink);color:#fffdf7;padding:13px 17px;border:0;border-radius:6px;white-space:nowrap;font-size:12px}.primary:hover{background:#285447}.panel-note{text-align:center;font-size:9px;margin:20px 0 0}.text-button{border:0;background:none;color:var(--ink);padding:10px 0;width:100%;font-size:12px}footer{max-width:1360px;margin:auto;border-top:1px solid var(--line);padding:24px 5.5%;display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}footer>span+span{font-size:8px;letter-spacing:1px}.footer-suit{margin-left:18px;color:var(--gold)}.room-heading{display:flex;align-items:center;justify-content:space-between;margin:35px 0 25px;gap:12px}.room-heading h2{margin:9px 0 0;font-size:28px}.room-tools{display:flex;gap:8px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px;margin-bottom:35px}.table-wrap{background:#edece3;border:1px solid #d8dccf;border-radius:16px;overflow:hidden}.table-top{padding:14px 20px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px}.felt{height:405px;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#296354,#163f36);color:#fff8e5;border:8px solid #34493b;box-shadow:inset 0 0 60px #071d1a55}.felt-ring{position:absolute;inset:48px 70px;border:1px solid #b7b89524;border-radius:48%}.table-wordmark{position:absolute;bottom:72px;width:100%;text-align:center;font-size:9px;letter-spacing:5px;opacity:.2;pointer-events:none}.table-wordmark span{display:block;font-size:21px;margin-top:6px}.seat{position:absolute;text-align:center;z-index:3;min-width:90px;font-size:11px}.seat.top{top:13px;left:50%;transform:translateX(-50%)}.seat.bottom{bottom:13px;left:50%;transform:translateX(-50%)}.seat.left{left:14px;top:44%}.seat.right{right:14px;top:44%}.avatar{background:#e9e2cb;color:var(--ink);width:37px;height:37px;border-radius:50%;margin:0 auto 6px;display:grid;place-content:center;font-family:Georgia,serif;font-size:18px;border:2px solid transparent}.seat.active .avatar{outline:2px solid #d4b77c;outline-offset:4px}.seat small{display:block;font-size:8px;color:#adc0af;margin-top:4px}.seat.active small{color:#e7ca89}.center{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:65%;text-align:center;z-index:1}.center h3{font-family:Georgia,serif;font-weight:400;font-size:22px;margin-bottom:10px}.center p{font-size:11px;color:#c3cebd;line-height:1.6}.center .primary{background:#e4c894;color:#183d34}.played{position:absolute;inset:70px 80px;pointer-events:none;z-index:2}.played .card{position:absolute;width:64px;height:90px;font-size:19px;cursor:default;margin:0}.played .card .pip{font-size:30px}.played .p0{bottom:20px;left:calc(50% - 32px);transform:rotate(-5deg)}.played .p1{left:calc(50% - 100px);top:calc(50% - 45px);transform:rotate(-15deg)}.played .p2{top:0;left:calc(50% - 32px);transform:rotate(5deg)}.played .p3{right:calc(50% - 100px);top:calc(50% - 45px);transform:rotate(13deg)}.hand-section{padding:17px 20px 7px;min-height:158px}.hand-heading{display:flex;justify-content:space-between;gap:8px;font-size:8px;letter-spacing:1.5px;margin-bottom:15px;color:#71806c}#hint{letter-spacing:0;text-align:right}.hand{display:flex;justify-content:center;padding:0 8px}.card{position:relative;flex:0 0 68px;height:102px;border:1px solid #d8d7ca;background:#fffdf6;color:#183d34;border-radius:6px;box-shadow:0 4px 8px #183d3412;padding:7px;font-family:Georgia,serif;font-size:21px;text-align:left;margin-left:-5px;transition:transform .16s;overflow:hidden}.card small{display:block;font-size:16px;line-height:1}.card .pip{position:absolute;bottom:12px;right:9px;font-size:35px}.card.red{color:#b34d43}.card:disabled{opacity:.65}.card:not(:disabled):hover{transform:translateY(-10px)}.card.legal{border-color:#97aa7d;box-shadow:0 0 0 1px #97aa7d}.controls{padding:12px 18px 18px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:67px;flex-wrap:wrap}.controls input{width:75px;padding:10px}.controls .quiet{background:#f6f3eb}.status-label{font-size:11px;color:var(--muted)}.score-panel,.activity-panel{background:#fffdf7;border:1px solid var(--line);border-radius:12px;padding:22px}.team-score{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid #e9e9df}.team-score span{font-size:13px}.team-score small{display:block;font-size:9px;color:var(--muted);margin-top:5px;line-height:1.5}.team-score b{font-family:Georgia,serif;font-size:30px;font-weight:400}.score-note{font-size:9px;color:var(--muted);padding-top:13px}.contract{font-size:11px;line-height:1.9;margin-top:15px;background:#eff0e6;padding:12px;border-radius:6px}.contract:empty{display:none}.activity-panel{margin-top:16px}#activity{list-style:none;padding:0;margin:15px 0 0;max-height:220px;overflow:auto}#activity li{font-size:10px;line-height:1.6;padding:8px 0;border-bottom:1px solid #eeeee5;color:#71806c}#activity li:first-child{color:var(--ink)}.tip{display:flex;gap:12px;margin:20px 8px}.tip>span{font-size:23px;color:var(--gold)}.tip p{font-size:10px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:14px 20px;border-radius:8px;z-index:10;box-shadow:0 5px 20px #0003;max-width:90%;font-size:12px}dialog{border:1px solid var(--line);border-radius:16px;background:var(--cream);color:var(--ink);padding:35px;max-width:560px;width:92%;max-height:85vh}dialog::backdrop{background:#0a241cc7;backdrop-filter:blur(4px)}dialog h2{margin-top:15px}dialog h3{font-size:14px;margin:20px 0 5px}dialog p{font-size:12px}.close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:26px;color:var(--ink)}
@media(min-width:1500px){.home{min-height:780px}}@media(max-width:1050px){.game-layout{grid-template-columns:minmax(0,1fr) 210px;gap:14px}.score-panel,.activity-panel{padding:16px}.home{gap:5%}.play-panel{padding:26px}.seal{left:280px;top:150px}.hero-cards{margin-left:0}.hc-three{left:190px}.hero-card{width:120px}.header-right{gap:12px}.card{flex-basis:60px}.felt-ring{inset:55px 30px}}@media(max-width:780px){header{height:86px;padding:0 5%}.brand{font-size:13px;gap:10px}.brand small{font-size:6px}.brand-icon{width:38px;height:47px;font-size:22px}.connection{display:none}.home{grid-template-columns:1fr;gap:30px;padding:40px 0}.intro{text-align:center}.intro>.eyebrow{justify-content:center}h1{font-size:42px;letter-spacing:-1px}.hero-cards{width:340px;margin:20px auto 0;height:230px}.seal{left:265px}.intro-foot{margin-top:0}.play-panel{max-width:460px;width:100%;margin:auto;padding:28px}.game-layout{grid-template-columns:1fr}.game-layout aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.activity-panel{margin-top:0}.tip{display:none}.room-heading{align-items:flex-start}.room-heading h2{font-size:22px}.room-tools{flex-direction:column}.room-tools .quiet{padding:8px;font-size:10px}.felt{height:370px}.card{flex-basis:65px}footer{gap:15px;line-height:1.7}footer>span+span{text-align:right}.footer-suit{display:block;margin:0}}@media(max-width:430px){.hero-cards{transform:scale(.9);transform-origin:center;height:215px}h1{font-size:36px}.seat.left{left:6px}.seat.right{right:6px}.seat{min-width:64px;max-width:90px;overflow-wrap:anywhere;font-size:10px}.felt{height:340px;border-width:5px}.felt-ring{inset:50px 15px}.played{inset:65px 35px}.hand-section{padding:16px 10px 7px}.card{flex-basis:44px;height:84px;padding:5px;font-size:18px;margin-left:-3px}.card .pip{font-size:25px;right:6px}.card small{font-size:13px}.hand-heading{font-size:7px}.game-layout aside{gap:8px}.score-panel,.activity-panel{padding:14px}.center h3{font-size:18px}.center p{font-size:10px}.center{width:60%}.played .card{width:55px;height:79px}.header-right .quiet{font-size:10px;padding:10px}.controls{gap:5px;padding:10px}.eyebrow{font-size:8px}.room-heading .eyebrow{font-size:7px}}