:root{color-scheme:dark;--bg:#102d29;--panel:#183e36;--gold:#efca83;--cream:#f8f3e6;--muted:#a6bbb0;--line:#ffffff1c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--cream);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;min-height:100dvh;background-image:radial-gradient(ellipse at 75% 38%,#23574488,transparent 65%)}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.35;cursor:default}button{border:0}#app{max-width:900px;margin:auto;padding:0 24px}header{height:90px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{color:var(--cream);display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;letter-spacing:2px;font-size:17px}.brand small{display:block;font-size:8px;font-weight:500;letter-spacing:2px;margin-top:5px;color:var(--muted)}.brand-mark{font-size:34px;color:var(--gold)}.icon-btn{border:1px solid #ffffff30;border-radius:50%;background:transparent;color:var(--cream);width:34px;height:34px}#home{position:relative;padding-top:45px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:650;color:var(--gold)}.eyebrow>span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:7px}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(44px,7vw,70px);line-height:1.09;letter-spacing:-2px;margin:24px 0 18px}h1 em{color:var(--gold);font-weight:400}.intro{font-size:14px;color:var(--muted);line-height:1.85;margin-bottom:0}.hero-cards{position:relative;height:230px;max-width:370px;margin:5px auto 20px}.hero-card{position:absolute;top:35px;left:calc(50% - 57px);width:114px;height:158px;border-radius:12px;background:#faf5e9;box-shadow:0 12px 28px #0005;border:1px solid #c5bead;color:#172e2a}.hero-card b{position:absolute;left:12px;top:8px;font-family:Georgia,serif;font-size:27px;line-height:1}.hero-card small{display:block;font-size:20px;text-align:center}.hero-card>span{position:absolute;inset:0;display:grid;place-items:center;font-size:70px}.hero-card.c1{transform:translateX(-67px) rotate(-19deg);top:48px}.hero-card.c2{transform:rotate(-2deg);z-index:2;color:#bf493e}.hero-card.c3{transform:translateX(72px) rotate(18deg);top:51px}.home-actions{max-width:410px;margin:0 auto}.primary,.secondary{border-radius:12px;padding:16px 20px;font-weight:700;font-size:14px;min-height:50px}.primary{background:var(--gold);color:#26392e;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 5px 16px #0001}.secondary{border:1px solid #ffffff27;background:#ffffff06;color:var(--cream)}.home-actions button{width:100%;margin-bottom:10px}.features{display:flex;justify-content:center;gap:25px;color:var(--muted);font-size:10px;margin:16px 0 30px}footer{text-align:center;font-size:8px;letter-spacing:1.7px;color:#91a89a;border-top:1px solid var(--line);padding:20px 0}footer small{display:block;letter-spacing:.5px;margin-top:9px;font-size:9px;opacity:.65}.hidden{display:none!important}.text-btn{padding:10px 0;background:transparent;color:var(--muted);font-size:12px}.table-top{display:flex;align-items:center;justify-content:space-between;height:60px}.pill{border:1px solid #d9be7e40;color:var(--gold);font-size:9px;letter-spacing:1px;padding:7px 10px;border-radius:20px}.arena{position:relative;height:360px;margin:0 -12px;isolation:isolate}.table-ring{position:absolute;inset:50px 22px 6px;border:6px solid #0c2624;outline:1px solid #b09b6240;border-radius:46%;background:radial-gradient(ellipse,#35705566,#1c493a55);box-shadow:inset 0 0 35px #0003,0 12px 30px #0002;z-index:-1}.opponent{position:absolute;width:80px;text-align:center;font-size:11px;z-index:2}.opponent.top{top:0;left:calc(50% - 40px)}.opponent.left{top:130px;left:-6px}.opponent.right{top:130px;right:-6px}.avatar{width:42px;height:42px;margin:auto auto 5px;border-radius:50%;display:grid;place-items:center;background:#30574a;border:2px solid #547363;color:var(--gold);font-size:19px;font-weight:700;position:relative}.opponent.active .avatar{border-color:var(--gold);box-shadow:0 0 0 4px #efca831c}.opponent small{display:block;color:var(--muted);margin-top:3px;font-size:9px}.card-backs{margin:5px auto 0;height:24px;position:relative;width:35px}.card-backs:before,.card-backs:after{content:'';display:block;position:absolute;width:16px;height:23px;background:repeating-linear-gradient(45deg,#365c51 0px,#365c51 3px,#52796a 3px,#52796a 4px);border:1px solid #c6c4a7;border-radius:3px;left:6px;transform:rotate(-12deg)}.card-backs:after{left:14px;transform:rotate(8deg)}.center{position:absolute;inset:100px 68px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center}.table-watermark{font-size:50px;color:#bed4b317;text-align:center;position:absolute;top:40px;z-index:-1}.table-watermark small{display:block;font-size:8px;letter-spacing:2px;white-space:nowrap}#gameMessage{font-size:11px;text-align:center;line-height:1.7;min-height:40px;color:#dce5d2;max-width:240px;margin:15px 0 0}.pile{display:flex;justify-content:center;max-width:100%;padding:8px 8px 0 0;min-height:90px}.card{position:relative;flex-shrink:0;width:54px;height:78px;border:1px solid #d8d2c1;border-radius:7px;background:#faf6e9;color:#182d2b;box-shadow:1px 3px 6px #0004;font-family:Georgia,'Times New Roman',serif;padding:0;transition:transform .15s,border-color .15s}.card.red{color:#bd403b}.card .rank{position:absolute;top:5px;left:6px;font-size:19px;font-weight:bold;line-height:1}.card .rank small{display:block;font-size:15px;line-height:1.1}.card .suit{position:absolute;right:7px;bottom:7px;font-size:28px}.pile .card{margin-left:-27px;width:48px;height:69px}.pile .card:first-child{margin-left:0}.hand-heading{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-top:14px}.hand-heading small{font-size:10px;color:var(--muted);margin-left:8px}.you-dot{display:inline-block;background:var(--gold);width:6px;height:6px;border-radius:50%;margin-right:4px}#turnText{font-size:10px;color:var(--gold)}.hand{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;height:126px;padding:25px 4px 10px;scrollbar-width:thin;scrollbar-color:#638778 transparent;overscroll-behavior-x:contain}.hand .card{margin-left:-30px;width:58px;height:86px}.hand .card:first-child{margin-left:0}.hand .card.selected{transform:translateY(-19px);border:2px solid var(--gold);background:#fff9de;box-shadow:0 0 0 2px #efca8355}.controls{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:8px}.controls button{font-size:12px;padding:13px 8px;white-space:nowrap}.selection-label{text-align:center;font-size:10px;color:var(--muted);margin:12px 0 20px}dialog{background:#193c33;color:var(--cream);border:1px solid #ffffff22;border-radius:20px;padding:24px;width:calc(100% - 32px);max-width:430px;box-shadow:0 20px 100px #0007;max-height:90dvh;overflow:auto}dialog::backdrop{background:#031811c9;backdrop-filter:blur(5px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}.close{background:transparent;color:var(--muted);font-size:27px;padding:0 0 0 15px}h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:32px;letter-spacing:-.7px;margin:17px 0 12px}dialog p{font-size:12px;color:var(--muted);line-height:1.8}label{display:block;font-size:12px;margin:19px 0 0}label small{color:var(--muted);font-size:10px}input{width:100%;margin-top:8px;padding:13px;border:1px solid #ffffff26;background:#0d2c26;border-radius:9px;color:var(--cream);font-size:14px;outline:none}input:focus{border-color:var(--gold)}.field-note{font-size:10px;line-height:1.7;color:var(--muted);display:block;margin-top:8px}dialog .primary{width:100%;margin-top:20px}.error{font-size:12px;color:#ffac96;margin-top:10px;line-height:1.6}.rules-content{max-height:54dvh;overflow-y:auto;padding-right:6px}.rules-content b{color:var(--cream)}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);background:#f8f3e6;color:#223c30;box-shadow:0 5px 20px #0004;padding:12px 18px;border-radius:10px;z-index:100;font-size:12px;max-width:90%;width:max-content;transition:transform .2s}#toast.show{transform:translateX(-50%) translateY(0)}#lobby{text-align:center;width:100%;font-size:12px}#lobby .code{font-size:28px;color:var(--gold);letter-spacing:5px;font-weight:700;margin:5px 0 12px}#lobby button{margin:8px auto;font-size:12px;padding:11px 14px}.result-symbol{text-align:center;font-size:64px;color:var(--gold)}#resultDialog{text-align:center}#resultDialog .eyebrow{margin-top:10px}#resultDialog .text-btn{margin-top:10px}.score-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.score-row b{color:var(--gold)}.score-row small{font-size:10px;color:var(--muted)}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}@media(min-width:650px){#app{padding:0 42px}#home{min-height:720px;padding-top:70px}.hero-cards{position:absolute;top:150px;right:0;width:310px;transform:scale(1.25)}.home-actions{margin:40px 0 45px;width:310px}h1{font-size:68px}.arena{height:390px;max-width:650px;margin:auto}.hand{justify-content:center}.hand .card{margin-left:-8px;width:62px;height:90px}.hand .card:first-child{margin-left:0}.controls{max-width:480px;margin:auto}.hand-heading{max-width:650px;margin:20px auto 0}.opponent.left{left:0}.opponent.right{right:0}}@media(max-height:740px) and (max-width:649px){header{height:70px}#home{padding-top:28px}.hero-cards{height:190px;transform:scale(.88);margin-top:-5px;margin-bottom:0}.features{margin:8px 0 20px}.arena{height:290px}.opponent.left,.opponent.right{top:115px}.center{inset:85px 60px 0}.table-ring{inset:45px 18px 0}.hand{height:120px}.table-top{height:50px}.hand-heading{margin-top:8px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Welcome and account page, matched to the supplied reference. */
body:not(.in-game){background:#102d29;background-image:radial-gradient(ellipse at 18% 45%,#285f4666,transparent 62%)}
body:not(.in-game) #app{max-width:1200px;width:100%;margin:auto;padding:0 40px}
body:not(.in-game) header{position:static;height:100px;border-bottom:1px solid #ffffff19;display:flex;align-items:center;justify-content:space-between}
body:not(.in-game) .brand{gap:13px;letter-spacing:normal}
body:not(.in-game) .brand strong{font-size:19px;letter-spacing:2.5px;font-weight:750}
body:not(.in-game) .brand small{font-size:9px;letter-spacing:2.1px;color:#a5bcb0;margin-top:5px;font-weight:400}
body:not(.in-game) .brand-mark{width:43px;height:48px;display:grid;place-items:center;font-size:38px;color:#efca83}
.preview-badge{border:1px solid #efca8338;border-radius:25px;color:#efca83;background:transparent;padding:7px 13px;font-size:10px;letter-spacing:1px;white-space:nowrap}
.preview-badge:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#efca83;margin-right:7px;vertical-align:middle}
#home.login-page{display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:center;min-height:740px;padding:48px 0 55px}
.welcome-hero{position:relative;min-width:0}
.welcome-hero .eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:700;color:#efca83}
.welcome-hero h1{font:400 clamp(45px,5.2vw,66px)/1.13 Georgia,'Times New Roman',serif;letter-spacing:-2px;margin:22px 0 18px;text-align:left;color:#f8f3e6;text-shadow:none}
.welcome-hero h1 em{font-weight:400;color:#efca83}
.welcome-hero>p{color:#a5bcb0;font-size:14px;line-height:1.9;margin:0}
.welcome-deck{height:265px;position:relative;max-width:340px;margin:12px 0 20px}
.welcome-card{position:absolute;width:126px;height:177px;left:105px;top:27px;border-radius:12px;background:linear-gradient(145deg,#fffcf1,#e9e3d3);box-shadow:0 18px 35px #0004;border:1px solid #cfc5ad;color:#19382e}
.welcome-card b{position:absolute;top:11px;left:12px;font:700 28px/1 Georgia,serif}
.welcome-card b small{display:block;font-size:20px;text-align:center;margin-top:3px}
.welcome-card>span{position:absolute;inset:0;display:grid;place-items:center;font-size:78px}
.welcome-card.one{transform:translateX(-74px) rotate(-20deg);top:49px}
.welcome-card.two{color:#b8493c;transform:rotate(-3deg);z-index:2}
.welcome-card.three{transform:translateX(75px) rotate(19deg);top:51px}
.welcome-deck:after{content:'✦';position:absolute;right:-10px;top:27px;color:#efca83;font-size:25px}
.hero-features{display:flex;gap:23px;color:#bdcfc0;font-size:11px}
.hero-features span:first-letter{color:#efca83}
.auth-card{background:linear-gradient(145deg,#21453a,#173b32);padding:30px;border-radius:22px;border:1px solid #ffffff20;box-shadow:0 20px 50px #0002;max-width:430px;width:100%;justify-self:end;min-width:0}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #ffffff22;margin-bottom:27px}
.auth-tabs button{background:transparent;color:#a5bcb0;border:0;border-bottom:2px solid transparent;padding:0 10px 15px;font-size:13px;font-weight:650}
.auth-tabs button[aria-selected=true]{color:#efca83;border-color:#efca83}
.auth-card h2{font:400 31px/1.25 Georgia,'Times New Roman',serif;letter-spacing:-.5px;margin:0 0 8px;color:#f8f3e6;overflow-wrap:anywhere}
.welcome-copy{font-size:12px;color:#a5bcb0;line-height:1.8;margin:0 0 24px}
.social-login{background:#faf9f5;border:1px solid #e6e1d5;min-height:47px;color:#293a32;border-radius:10px;width:100%;display:flex;gap:12px;align-items:center;justify-content:center;font-size:13px;font-weight:600;padding:10px}
.social-login svg{width:19px;height:19px;flex-shrink:0}
.auth-separator{display:flex;align-items:center;gap:13px;color:#8ca799;font-size:10px;margin:22px 0}
.auth-separator:before,.auth-separator:after{content:'';flex:1;height:1px;background:#ffffff19}
.auth-card label{display:block;font-size:11px;font-weight:600;margin:0 0 8px}
.auth-field{margin-bottom:17px}
.auth-card input{width:100%;border:1px solid #ffffff25;background:#102e27;color:#f8f3e6;padding:13px 14px;min-height:47px;border-radius:9px;font-size:13px;outline:none;margin:0}
.auth-card input::placeholder{color:#77988a}
.auth-card input:focus{border-color:#efca83aa}
.auth-card input:focus-visible{outline:2px solid #efca83;outline-offset:3px}
.auth-card .password-wrap{position:relative}
.auth-card #accountPassword{padding-right:65px}
.auth-card #showPassword{position:absolute;right:7px;top:5px;height:37px;min-height:37px;min-width:0;padding:0 8px;background:transparent;border:0;color:#a5bcb0;font-size:10px}
.auth-card .auth-options{display:flex;align-items:center;justify-content:space-between;margin:5px 0 21px;gap:8px;font-size:11px}
.remember-note{display:flex;align-items:center;gap:7px;color:#a5bcb0;font-size:10px}
.remember-note>span{display:grid;place-items:center;flex-shrink:0;width:14px;height:14px;border-radius:2px;background:#efca83;color:#263c30;font-size:11px;font-weight:800}
.auth-card #forgotPhone{background:transparent;border:0;padding:3px 0;color:#efca83;font-size:11px;white-space:nowrap}
.auth-submit{display:flex;align-items:center;justify-content:space-between;width:100%;background:#efca83;color:#253c2e;border:0;border-radius:10px;padding:14px 17px;min-height:49px;font-size:13px;font-weight:750}
.auth-submit>span:last-child{font-size:19px;font-family:Arial,sans-serif}
.register-note{color:#a5bcb0;font-size:10px;line-height:1.8;margin:15px 0 0}
.auth-card .field-note{font-size:10px;color:#a5bcb0;line-height:1.7;margin:7px 0 0}
.guest-link{display:block;width:100%;text-align:center;font-size:12px;color:#efca83;background:transparent;margin-top:20px;padding:20px 0 10px;border-top:1px solid #ffffff19;line-height:1.8}
.room-link{display:block;width:100%;text-align:center;font-size:11px;color:#bdcfc0;background:transparent;padding:7px 0;line-height:1.8}
.auth-card .guest-hint{color:#8eac9b;font-size:9px;line-height:1.7;text-align:center;margin:6px 0 0;overflow-wrap:anywhere}
.auth-card .prototype-note{font-size:10px;line-height:1.7;color:#8eac9b;text-align:center;margin:12px 0 0}
.auth-phone-status:empty{display:none}
.auth-phone-status{margin:15px 0 0;font-size:12px;line-height:1.7;background:#efca8312;border:1px solid #efca8330;border-radius:9px;padding:11px 13px;color:#f2d59e;overflow-wrap:anywhere}
.auth-card #logoutBtn{display:block;margin:10px auto 0;padding:8px 12px;color:#efca83}
#homeFooter{border-top:1px solid #ffffff19;padding:21px 0;display:flex;gap:15px;justify-content:space-between;color:#86a391;font-size:9px;letter-spacing:.7px;text-align:left;line-height:1.7}
body.in-game #homeFooter{display:none}
body.in-game #app{max-width:460px;padding:0 22px;overflow:hidden}
body.in-game header{height:72px}
body.in-game .brand strong{font-size:14px;letter-spacing:1px}
body.in-game .brand small{font-size:7px;letter-spacing:.8px}
body.in-game .brand-mark{font-size:31px}
body.in-game .preview-badge{font-size:8px;padding:7px}
body.in-game .hand{justify-content:flex-start}
body.in-game .hand .card{width:58px;height:86px;margin-left:-30px}
body.in-game .hand .card:first-child{margin-left:0}
body.in-game .arena{height:310px}
body.in-game .opponent.left{left:-6px;top:115px}
body.in-game .opponent.right{right:-6px;top:115px}
body.in-game .hand-heading{margin-top:10px}
body.in-game .controls{max-width:none}
@media(max-width:900px){
 body:not(.in-game) #app{padding:0 24px}
 #home.login-page{gap:35px}
 .auth-card{padding:25px}
 .hero-features{gap:12px;flex-wrap:wrap;font-size:10px}
 .welcome-hero h1{font-size:49px}
 .welcome-deck{transform:scale(.9);transform-origin:left center;max-width:310px}
}
@media(max-width:680px){
 body:not(.in-game) #app{padding:0 20px}
 body:not(.in-game) header{height:78px}
 body:not(.in-game) .brand strong{font-size:15px;letter-spacing:1.5px}
 body:not(.in-game) .brand small{font-size:8px;letter-spacing:1.5px}
 body:not(.in-game) .brand-mark{font-size:32px;width:30px}
 .preview-badge{font-size:8px;padding:6px 9px;letter-spacing:0}
 #home.login-page{grid-template-columns:1fr;gap:25px;min-height:auto;padding:30px 0}
 .welcome-hero .eyebrow,.welcome-hero>p,.welcome-deck,.hero-features{display:none}
 .welcome-hero h1{font-size:35px;letter-spacing:-1px;line-height:1.15;margin:0;text-align:center}
 .welcome-hero h1 br{display:none}
 .welcome-hero h1 em{display:block}
 .auth-card{justify-self:center;max-width:420px;padding:25px 23px}
 .auth-card h2{font-size:29px}
 .auth-tabs{margin-bottom:22px}
 .welcome-copy{margin-bottom:20px}
 .auth-card input{font-size:16px}
 #homeFooter{font-size:8px;flex-direction:column;gap:4px;text-align:center;padding:17px 0}
}
@media(max-width:360px){
 body:not(.in-game) #app{padding:0 16px}
 body:not(.in-game) .brand{gap:8px}
 body:not(.in-game) .brand strong{font-size:12px;letter-spacing:1px}
 body:not(.in-game) .brand small{font-size:6px;letter-spacing:1px}
 body:not(.in-game) .brand-mark{width:24px;font-size:28px}
 .preview-badge{font-size:7px;padding:6px 7px}
 .auth-card{padding:23px 19px}
 .welcome-hero h1{font-size:30px}
 .auth-card .auth-options{align-items:flex-start}
 .remember-note,.auth-card #forgotPhone{font-size:9px}
}
#toast:empty{display:none}
body.in-game{background:#071f1b;background-image:radial-gradient(ellipse at 50% 36%,#2c6659 0%,#123f34 32%,#081f1b 75%)}
@media(min-width:681px){.welcome-hero{align-self:start;padding-top:60px}}

/* One transparent brand image, also used underneath the playing area. */
.brand-logo{display:block;width:164px;height:auto;max-height:86px;object-fit:contain}
.table-watermark{position:absolute;left:50%;top:calc(50% + 20px);width:min(60%,230px);transform:translate(-50%,-50%);font-size:0;line-height:0;opacity:.11;pointer-events:none;user-select:none;z-index:-1}
.table-watermark img{display:block;width:100%;height:auto}
body.in-game .brand-logo{width:120px;max-height:64px}
@media(max-width:680px){body:not(.in-game) .brand-logo{width:132px;max-height:70px}}


/* Compact account actions and the persistent Guest entry point. */
.auth-action-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.auth-action-row .auth-submit{font-size:12px;padding:12px;gap:6px;min-width:0}
.google-login{display:flex;align-items:center;justify-content:center;gap:8px;min-height:49px;min-width:0;padding:10px;border:1px solid #e6e1d5;border-radius:10px;background:#faf9f5;color:#293a32;font-size:12px;font-weight:650;line-height:1.35}
.google-login svg{width:18px;height:18px;flex-shrink:0}
.play-now-button{display:block;width:100%;min-height:54px;margin:14px 0 0;padding:14px;border:1px solid #efca8370;border-radius:10px;background:linear-gradient(#34775c,#20563e);color:#ffe2a0;font-size:17px;font-weight:800;letter-spacing:1px;box-shadow:inset 0 1px #ffffff15}
.play-now-button:hover{background:linear-gradient(#3d8467,#286449)}
.auth-card #upgradeGuestBtn{display:block;margin:8px auto 0;padding:8px 12px;color:#efca83;text-align:center}
@media(max-width:360px){.auth-action-row{gap:8px}.auth-action-row .auth-submit,.google-login{font-size:11px}.google-login{gap:6px;padding:8px}}