*{box-sizing:border-box}body{margin:0;background:#f5faf7;color:#123e2d;font-family:Arial,sans-serif}button,input{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{cursor:default}header{margin:0 6%;height:105px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #cce2d5}header a{color:inherit;text-decoration:none;font-size:12px;letter-spacing:4px;line-height:1.2}header b{font:900 25px Georgia;letter-spacing:-1px}header b span{color:#008751;margin-left:6px}.tag,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:bold}header button{border:1px solid #a5cbbb;border-radius:30px;background:none;padding:10px 18px;font-size:12px}main{max-width:1250px;margin:auto;padding:0 5%}#home{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;min-height:660px}.pitch{padding:45px 0}.eyebrow{color:#08794c;font-size:9px}h1{font:normal clamp(44px,5vw,68px)/1.05 Georgia;letter-spacing:-3px;margin:24px 0}h1 em{color:#008751}.pitch p{font-size:14px;line-height:1.8;color:#537264}label{display:block;font-size:11px;margin:20px 0 12px;max-width:350px}input{padding:14px;background:#ffffff;border:1px solid #a5cbbb;border-radius:7px;color:#123e2d;min-width:0}label>input:not([type=checkbox]){display:block;width:100%;margin-top:7px}.primary,.secondary{padding:15px 20px;border-radius:7px;display:flex;justify-content:space-between;gap:12px;font-weight:bold;font-size:13px}.primary{background:#008751;border:1px solid #008751;color:#ffffff}.secondary{background:transparent;border:1px solid #8bb8a1;color:#145337}.pitch>.primary,.pitch>.secondary{width:100%;max-width:350px;margin-bottom:10px}.join{display:flex;max-width:350px;gap:8px}.join input{width:100%;letter-spacing:2px;font-size:11px}.join button{min-width:90px;background:#00643c;color:#ffffff;border:0;border-radius:7px}.check{display:flex;align-items:center;gap:10px;color:#537264}.check input{width:18px;height:18px;accent-color:#008751}.art{height:560px;background:#00643c;border-radius:220px 220px 18px 18px;position:relative;overflow:hidden;background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,#ffffff03 10px,#ffffff03 11px)}.poster-card{position:absolute;width:150px;height:226px;background:#ffffff;border-radius:12px;color:#08794c;box-shadow:0 12px 20px #001e2444;padding:18px;display:flex;flex-direction:column;justify-content:space-between}.poster-card b{font:36px Georgia}.poster-card span{font:95px Georgia;text-align:center}.poster-card small{font-size:9px;letter-spacing:1px;text-align:center}.one{left:30px;top:177px;transform:rotate(-23deg)}.two{left:150px;top:137px;transform:rotate(7deg);z-index:1}.three{right:5px;top:216px;transform:rotate(25deg);background:#ccebdc;color:#005a36}.stamp{position:absolute;left:50px;top:65px;color:#ffffff;font-size:9px;letter-spacing:2px;line-height:1.5;transform:rotate(-12deg)}.art-caption{position:absolute;bottom:30px;text-align:center;width:100%;color:#ffffff;font-size:20px}.art-caption p{font-size:8px;letter-spacing:2px}footer{margin:35px 6%;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#537264}.tablebar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:20px 0}.tablebar button{font-size:11px}.tablebar span{font-size:9px;letter-spacing:1px}#sound{border:1px solid #8bb8a1;border-radius:50%;background:none;width:44px}#opponents{display:flex;justify-content:center;gap:22px;margin:20px 0}.opponent{display:grid;grid-template-columns:36px auto;gap:4px 10px;padding:9px 14px;border:1px solid transparent;border-radius:30px}.opponent.current{border-color:#008751;background:#e0f3e8}.avatar{grid-row:span 2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#008751;color:white;font-family:Georgia}.opponent b{font-size:12px}.opponent span{font-size:10px;color:#537264}#felt{border:9px solid #d4eade;outline:1px solid #a5cbbb;border-radius:170px;background:radial-gradient(ellipse,#008751,#00482c);height:340px;position:relative;box-shadow:inset 0 0 40px #062a29;display:flex;align-items:center;justify-content:center;color:#ffffff}.felt-mark{position:absolute;top:24px;font-size:9px;letter-spacing:4px;opacity:.4}#playarea{text-align:center;z-index:1}#turn{font-size:11px;font-weight:bold;letter-spacing:2px;margin-bottom:15px}.piles{display:flex;gap:25px;justify-content:center}.card{width:94px;height:137px;flex-shrink:0;border-radius:9px;background:#ffffff;border:1px solid #b6d8c5;color:#00643c;position:relative;box-shadow:0 3px 0 #a5cbbb,0 6px 10px #001e2220;padding:9px;text-align:left}.card b{font:22px Georgia}.card>span{display:block;text-align:center;font:49px Georgia;line-height:1}.card small{display:block;text-align:center;font-size:7px;letter-spacing:.4px;margin-top:5px}.card i{position:absolute;bottom:7px;right:8px;font:16px Georgia;transform:rotate(180deg)}.card.wild{background:#dbf3e6;color:#005a36}.card.back{background:repeating-linear-gradient(45deg,#008751,#008751 5px,#006d41 5px,#006d41 7px);border:5px solid #ffffff;color:#ffffff;text-align:center}.card.back span{font:bold 25px Georgia;margin:20px 0}.card.back small{font-size:7px}#draw:disabled{opacity:.7}#called{font-size:10px;letter-spacing:2px;margin-top:13px}#announcement{position:absolute;bottom:22px;left:15px;right:15px;text-align:center;font-size:12px}.hand-heading{display:flex;justify-content:space-between;margin:30px 0 18px;font-size:10px;letter-spacing:1px}.hand-heading b{background:#d4eade;padding:4px 8px;border-radius:10px;margin-left:5px}#hint{letter-spacing:0;color:#537264}#hand{display:flex;gap:11px;overflow-x:auto;padding:10px 5px 22px;min-height:168px}.card:disabled{opacity:.48}.card.playable{outline:2px solid #008751;outline-offset:2px;transform:translateY(-4px)}.card.playable:hover{transform:translateY(-10px)}#waiting{text-align:center}h2{font:28px Georgia}#waiting p{font-size:12px}#waiting button{margin:auto}#rematch{margin:15px auto}dialog{border:1px solid #b6d8c5;border-radius:16px;background:#ffffff;color:#123e2d;max-width:440px;width:90%;padding:28px}dialog::backdrop{background:#05261dc9}dialog p,dd{font-size:12px;line-height:1.6}dt{font-weight:bold;font-size:12px;margin-top:10px}dd{margin-left:0}#shapes{display:flex;gap:7px;margin-bottom:20px}#shapes button{background:#e0f3e8;border:1px solid #a5cbbb;border-radius:8px;flex:1;font-size:25px;color:#00643c}#cancel-shape{background:none;border:0;color:#123e2d}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#172f27;color:#ffffff;padding:15px 22px;border-radius:9px;max-width:90%;width:max-content;font-size:12px;z-index:5}#toast:empty{display:none}[hidden]{display:none!important}:focus-visible{outline:3px solid #008751;outline-offset:3px}@media(max-width:650px){header{height:85px}.tag{display:none}header button{font-size:10px}main{padding:0 5%}#home{grid-template-columns:1fr;gap:0}.pitch{padding:30px 0 10px}h1{font-size:51px}.pitch>.primary,.pitch>.secondary,.join,label{max-width:none}.art{height:370px;margin:15px 0}.poster-card{width:110px;height:165px;padding:12px}.poster-card span{font-size:65px}.poster-card b{font-size:25px}.poster-card small{font-size:6px}.one{top:105px;left:22px}.two{top:75px;left:120px}.three{top:140px;right:7px}.stamp{top:25px;left:40px;font-size:7px}.art-caption{bottom:12px}.tablebar{margin:16px 0}.tablebar .secondary{padding:11px}.tablebar span{font-size:8px}#opponents{gap:2px;margin:15px 0}.opponent{padding:6px;gap:3px 5px;grid-template-columns:26px auto}.avatar{width:26px;height:26px;font-size:12px}.opponent b{font-size:10px}.opponent span{font-size:8px}#felt{height:330px;border-width:6px;border-radius:75px}.felt-mark{font-size:8px;letter-spacing:2px}.hand-heading{font-size:9px;margin-top:25px}#hint{font-size:9px}#hand{gap:10px}footer{font-size:7px;letter-spacing:1px}.card{width:83px;height:124px}.card>span{font-size:43px}#announcement{font-size:11px;bottom:25px}}
#music{white-space:nowrap}#music[aria-pressed=true]{background:#00643c;color:#ffffff}#rule-dialog a{color:#00643c}@media(max-width:650px){header{gap:8px}header a{margin-right:auto}#music{font-size:10px;padding:8px 10px}header #rules{padding:8px 10px}header #rules span{display:none}}
.socialbar,.reactions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.socialbar button,.reactions button,#agreement button,#challenge button,#invite-dialog button{border:1px solid #a5cbbb;border-radius:9px;background:#ffffff;color:#123e2d;padding:10px 12px;font-size:12px}.socialbar button[aria-pressed=true]{background:#00643c;color:white}#agreement,#challenge,#history-panel{font-size:12px;line-height:1.6;background:#e9f5ee;border-radius:10px;padding:12px;margin:12px 0}#agreement:empty,#challenge:empty{display:none}#agreement button,#challenge button{margin:5px}#history-panel h3{font:22px Georgia}#invite-url{width:100%;margin:10px 0}#whatsapp{display:block;color:#00643c;margin:16px 0}#reaction{font-size:12px;text-align:center;min-height:18px;margin-top:10px}.opponent.partner{box-shadow:inset 0 -3px #008751}#table.dealing .card{animation:deal-in .45s both}#table.slapping #top{animation:slap .25s ease-out}.card{transition:transform .16s,opacity .16s}#hand .card:nth-child(2){animation-delay:.05s}#hand .card:nth-child(3){animation-delay:.1s}#hand .card:nth-child(4){animation-delay:.15s}#hand .card:nth-child(5){animation-delay:.2s}@keyframes deal-in{from{transform:translateY(-35px) rotate(-10deg);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slap{from{transform:scale(1.15) rotate(7deg)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}@media(max-width:650px){.socialbar{gap:5px}.socialbar button{font-size:10px;padding:8px}#agreement{font-size:11px}.opponent{min-width:0}.opponent b{overflow-wrap:anywhere}}
@media(max-width:650px){#felt{height:250px}.felt-mark{top:12px}#turn{margin-bottom:10px}#announcement{bottom:12px;font-size:10px}#called{margin-top:9px}#opponents{margin:10px 0}.hand-heading{margin:12px 0}#reaction{margin-top:4px}.reactions{margin:5px 0}.socialbar{margin:8px 0}#agreement{margin:8px 0;padding:9px}#hand{padding-top:7px}}
#help{margin:24px 0;background:#e9f5ee;border:1px solid #b6d8c5;border-radius:10px;padding:14px;color:#123e2d;font-size:13px}summary{cursor:pointer;min-height:32px;padding:7px 0;font-weight:bold}.help-content details{border-top:1px solid #cce2d5;padding:6px 0}.help-content p{font-size:12px;line-height:1.6;max-width:65ch}.flying-card{position:fixed;z-index:50;pointer-events:none}#shuffle-deck{position:absolute;left:50%;top:50%;width:0;height:0;z-index:3;pointer-events:none;perspective:600px}#shuffle-deck i{position:absolute;left:-42px;top:-60px;width:84px;height:120px;border:3px solid #ffffff;border-radius:7px;background:repeating-linear-gradient(45deg,#008751,#008751 5px,#006d41 5px,#006d41 7px);color:#ffffff;display:grid;place-items:center;font:bold 22px Georgia;box-shadow:0 2px 2px #0004;animation:riffle 1s both;animation-delay:var(--delay)}@keyframes riffle{0%{transform:translateY(calc(var(--layer)*-2px))}25%{transform:translate(calc(var(--side)*65px),-15px) rotate(calc(var(--side)*-14deg)) rotateY(calc(var(--side)*-20deg))}65%{transform:translate(calc(var(--side)*8px),calc(var(--layer)*-2px)) rotate(0)}100%{transform:translate(0,calc(var(--layer)*-1px));opacity:0}}@media(prefers-reduced-motion:reduce){#shuffle-deck,.flying-card{display:none}}

/* A complete screen: content reflows first, then layout.js fits short viewports. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
#screen{position:absolute;transform-origin:top left;display:flow-root}
header{height:64px;margin:0 4%}main{width:100%;padding:0 4%}
footer{margin:12px 4%;line-height:1.4}
#home{min-height:0;gap:24px}.pitch{padding:18px 0 8px}
h1{font-size:clamp(36px,4.5vw,58px);margin:12px 0;letter-spacing:-2px}
.pitch p{margin:10px 0;line-height:1.5}label{margin:10px 0 8px}
.check{margin:8px 0}.pitch>.primary,.pitch>.secondary{padding:11px 16px;margin-bottom:8px}
input{padding:11px}.art{height:440px}
.tablebar{margin:8px 0}.tablebar .secondary{padding:8px 12px}
.socialbar{margin:5px 0;gap:5px}.socialbar button,.reactions button{padding:6px 10px;min-height:36px}
#agreement,#challenge,#history-panel{padding:8px;margin:6px 0}
#opponents{margin:6px 0;gap:8px}.opponent{min-width:0}.opponent b,.opponent span{overflow-wrap:anywhere}
#felt{height:240px}.felt-mark{top:12px}#announcement{bottom:12px}
#reaction{margin-top:4px}.reactions{margin:4px 0}
.hand-heading{margin:10px 0 6px;gap:8px}
#hand{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px;overflow:visible;min-height:0;padding:8px 5px 12px}
#hand .card{width:100%;max-width:94px;height:120px;justify-self:center;padding:6px}
#hand .card>span{font-size:39px}#hand .card small{font-size:6px}
#hand .card.playable:hover{transform:translateY(-4px)}
#rematch{margin:6px auto}#help{margin:8px 0;padding:6px 12px}
#history-panel h3{margin:4px 0}#history-panel p{margin:6px 0}
dialog{position:fixed;inset:0;margin:auto;max-height:none;overflow:visible;transform-origin:center;}
@media(max-width:650px){
 header{height:58px}header b{font-size:21px}header a{font-size:9px}
 #home{grid-template-columns:1fr;gap:0}.pitch{padding:12px 0 4px}
 .eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:38px;margin:10px 0}
 .pitch p{font-size:12px;line-height:1.4}.art{display:none}
 .check{font-size:10px;margin:7px 0}label{margin:8px 0}
 #felt{height:215px;border-radius:65px}#turn{letter-spacing:1px}
 #opponents{gap:2px}.opponent{padding:5px 3px;grid-template-columns:22px auto;gap:3px}
 .avatar{width:22px;height:22px}.opponent span{font-size:8px}
 #hand{grid-template-columns:repeat(auto-fit,minmax(53px,1fr));gap:6px}
 #hand .card{height:98px}#hand .card b{font-size:18px}#hand .card>span{font-size:30px}
 #hand .card i{font-size:13px;bottom:4px;right:5px}#hand .card small{letter-spacing:0;font-size:5px}
 footer{margin:8px 4%}#help{font-size:11px}#agreement{font-size:10px}
}
/* Leave clear space above and below the piles for the table labels. */
#felt{height:270px}
@media(max-width:650px){#felt{height:245px}}
/* iOS keeps the input at its current zoom when its font is at least 16px. */
@media(max-width:650px){input:not([type=checkbox]),.join input{font-size:16px}}

/* Nigerian flag identity: green, white, green, with a soft cloth wave. */
header a{white-space:nowrap}
header .brand-flag{display:inline-block;width:31px;height:21px;margin-left:7px;vertical-align:middle;transform-origin:left center;animation:flag-wave 3s ease-in-out infinite;filter:drop-shadow(0 2px 2px #00482c20)}
@keyframes flag-wave{0%,100%{transform:perspective(80px) rotateY(-12deg) skewY(-3deg)}50%{transform:perspective(80px) rotateY(14deg) skewY(3deg)}}
.card.back,#shuffle-deck i{background:linear-gradient(90deg,#008751 0 33.333%,#ffffff 33.333% 66.666%,#008751 66.666%);color:#00482c}
.card.back span{background:#ffffffed;border-radius:5px;padding:5px 0;font-size:22px}
.card.back small{background:#ffffffed;border-radius:3px;padding:3px 0;font-weight:bold}
#shuffle-deck i{font-size:18px;text-shadow:0 1px 0 white}
.opponent.partner{box-shadow:inset 0 -3px #008751}.opponent.partner .avatar{background:#ffffff;color:#00643c;border:1px solid #008751}
.card.wild{border:2px solid #008751}
.primary:hover,.join button:hover{background:#00643c}
@media(max-width:650px){header .brand-flag{width:25px;height:17px;margin-left:5px}}
/* Supporter pack: premium decoration shared by the table's host. */
#supporter-status{font-size:10px;color:#00643c;white-space:nowrap}
#supporter-dialog h2{margin:12px 0}#supporter-dialog button{border:1px solid #a5cbbb;border-radius:8px;padding:9px 12px;background:white;color:#123e2d;font-size:12px;margin:5px 0;width:100%}
#supporter-dialog .primary{background:#008751;color:white;justify-content:center}
#supporter-email{width:100%;margin:8px 0;font-size:16px}
#supporter-note{color:#537264;font-size:11px}#supporter-message:empty{display:none}
.bundle-art{display:flex;align-items:center;justify-content:center;gap:18px;padding:20px 12px;background:radial-gradient(ellipse at top,#008751,#002f20);color:white;border-radius:12px;border:3px double #9bd3b5}
.bundle-card{border:2px solid #ccebdc;border-radius:8px;padding:12px;background:repeating-linear-gradient(45deg,#00643c 0 8px,#008751 8px 10px);font:bold 24px Georgia;transform:rotate(-8deg)}.bundle-card img{width:36px;height:24px;display:block;margin-top:8px}.bundle-art>span{font-size:30px}.bundle-art>div:last-child{font-size:11px;letter-spacing:2px}.bundle-art small{font-size:7px;letter-spacing:1px}
.independence #felt,.supporter-preview #felt{background:radial-gradient(ellipse at top,#008751,#002f20);border-color:#9bd3b5;outline:2px solid #00643c;box-shadow:inset 0 0 40px #001f18,0 0 0 4px #e1f5e9}
.independence #felt::after,.supporter-preview #felt::after{content:'✦';position:absolute;right:24px;top:18px;color:#d7f4e2;font-size:24px}
.independence .card.back,.independence #shuffle-deck i,.supporter-preview .card.back{background:repeating-linear-gradient(45deg,#00643c 0 8px,#008751 8px 10px);border-color:#ccebdc;color:#005a36}
.independence .card.back span::after,.supporter-preview .card.back span::after{content:'';display:block;width:30px;height:20px;margin:5px auto 0;background:linear-gradient(90deg,#008751 33.333%,white 33.333% 66.666%,#008751 66.666%);border:1px solid #a5cbbb}
.opponent .supporter-badge{color:#00643c;font-size:12px}
@media(max-width:650px){header{gap:5px}header .tag,#supporter-status{display:none}#supporter-open{padding:8px 10px;font-size:10px}#supporter-open span{display:none}}
/* Player appearance is independent of the host's supporter cosmetics. */
:root{--page:#0b1311;--surface:#14221c;--panel:#1a2b23;--ink:#edf6ef;--muted:#a9c0b2;--line:#355143;--accent:#48d58d;--button:#008751;--field:#111e18}
:root[data-theme=white]{--page:#f5faf7;--surface:#ffffff;--panel:#e9f5ee;--ink:#123e2d;--muted:#537264;--line:#a5cbbb;--accent:#00643c;--button:#008751;--field:#ffffff}
body{background:var(--page);color:var(--ink)}
header{gap:8px;border-color:var(--line)}header button, #sound{color:var(--ink);border-color:var(--line)}
#theme-toggle{white-space:nowrap}
.eyebrow,h1 em{color:var(--accent)}.pitch p,.check,footer,#hint,.opponent span,#supporter-note{color:var(--muted)}
input{background:var(--field);color:var(--ink);border-color:var(--line)}input::placeholder{color:var(--muted)}
.check input{accent-color:var(--button)}
.secondary,#cancel-shape{color:var(--ink);border-color:var(--line)}
.primary,.join button{background:var(--button);color:white;border-color:var(--button)}
.socialbar button,.reactions button,#agreement button,#challenge button,#invite-dialog button,#supporter-dialog button{background:var(--surface);color:var(--ink);border-color:var(--line)}
.socialbar button[aria-pressed=true],#music[aria-pressed=true]{background:var(--button);color:white}
#agreement,#challenge,#history-panel,#help{background:var(--panel);color:var(--ink);border-color:var(--line)}
.help-content details{border-color:var(--line)}
.opponent.current{border-color:var(--accent);background:var(--panel)}
.hand-heading b{background:var(--panel)}
dialog{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:0 20px 80px #0007}
dialog::backdrop{background:#030a07c9}
#shapes button{background:var(--panel);color:var(--accent);border-color:var(--line)}
#rule-dialog a,#whatsapp,#supporter-status,.opponent .supporter-badge{color:var(--accent)}
#supporter-dialog .primary{background:var(--button);color:white}
:focus-visible{outline-color:var(--accent)}
.card.playable{outline-color:var(--accent)}
#felt{border-color:#486656;outline-color:#648974;box-shadow:inset 0 0 40px #001d14,0 14px 35px #0003}
:root[data-theme=white] #felt{border-color:#d4eade;outline-color:#a5cbbb}
.lounge-art{height:460px;border-radius:24px;isolation:isolate;background:#0b1311;box-shadow:0 12px 40px #0003;border:1px solid var(--line)}
.lounge-art>img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 40%}
.lounge-art::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#03140fed,transparent 65%);z-index:0}
.lounge-caption{position:absolute;bottom:28px;left:28px;right:28px;z-index:1;color:white;display:grid;gap:12px}
.lounge-caption>span{font-size:9px;letter-spacing:2px;color:#8ce6b4}.lounge-caption>b{font:normal 34px/1.08 Georgia}.lounge-caption>small{font-size:15px;color:#a5dfbd;letter-spacing:5px}
@media(max-width:650px){
 header{gap:4px}header button{padding:8px}#theme-toggle{padding:8px 10px;font-size:12px}#theme-toggle span{display:none}
 .lounge-art{display:block;order:-1;height:145px;margin:12px 0 0;border-radius:14px}
 .lounge-art>img{object-position:50% 38%}.lounge-caption{bottom:12px;left:14px;gap:5px}.lounge-caption>b{font-size:22px}.lounge-caption>small{display:none}.lounge-caption>span{font-size:7px}
 h1{font-size:34px}.pitch{padding-top:12px}.tag{display:none}
}
@media(max-width:360px){header b{font-size:18px}header a{letter-spacing:2px}#music{padding:8px;font-size:9px}header .brand-flag{width:21px;height:14px;margin-left:4px}}
.rules-options{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.rules-options label{margin:5px 0;font-size:11px}.rules-options select{background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:7px;margin-left:7px}#rules-edit-note,#rules-feedback{font-size:11px}#rules-feedback:empty{display:none}#rules-form .primary{margin:8px 0;padding:10px 14px}.rules-options input:disabled{opacity:.6}

/* Quiet games-room lobby: secondary controls appear only on request. */
header .tag{margin-right:auto;margin-left:24px}header #menu-open{margin-left:auto}
.pitch{max-width:430px}.pitch>.primary,.pitch>.secondary,.join,.pitch>label{max-width:430px}
.game-label{color:var(--accent);font-weight:bold;letter-spacing:2px}
#table-options{margin:12px 0;color:var(--muted);font-size:12px}
#table-options summary,#table-rules summary{font-size:11px;color:var(--muted);font-weight:normal}
#table-rules{margin:4px 0}#agreement{margin:0}
.socialbar{justify-content:flex-end}.menu-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.menu-controls button{border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);padding:10px;font-size:12px;width:auto!important}
#menu-dialog .reactions{margin:16px 0}#menu-close{width:100%;justify-content:center}
#reaction:empty{display:none}footer{display:none}
#felt{border-radius:150px;border-width:7px}#home{padding:28px 0}.lounge-art{height:420px}
@media(max-width:650px){
 #home{padding:8px 0}.lounge-art{height:125px;margin:4px 0 8px}.pitch{max-width:none;padding:6px 0}
 h1{font-size:36px;margin:6px 0}.pitch p{margin:8px 0 14px}header #menu-open span{display:none}
 #felt{border-radius:90px}header .tag{display:none}
}

.game-selector{display:flex;gap:10px;margin:18px 0}.game-selector>*{flex:1;border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:bold}.game-selector [aria-current]{border-color:var(--accent);background:var(--panel)}.game-selector small{display:block;font-weight:normal;font-size:10px;margin-top:5px;color:var(--muted)}.game-selector a:hover{border-color:var(--accent)}

/* A held V-shaped fan; extra fans expose every corner in a large hand. */
.card .corner-shape{display:none}
#hand{display:block;position:relative;overflow:visible;padding:0;isolation:isolate;min-height:0}
#hand .card{position:absolute;left:var(--fan-x,0px);top:var(--fan-y,0px);width:var(--fan-width,64px);max-width:none;height:var(--fan-height,102px);padding:5px;transform:rotate(var(--fan-angle,0deg));transform-origin:center bottom;z-index:var(--fan-layer,1);animation:none!important;transition:transform .15s;box-shadow:0 2px 4px #0005}
#hand .card b{display:block;font:bold 17px/1 Georgia;position:absolute;left:5px;top:5px}
#hand .card .corner-shape{display:block;position:absolute;top:24px;left:5px;font-size:15px;line-height:1;margin:0;text-align:left}
#hand .card>span:not(.corner-shape){font-size:30px;margin-top:34px}
#hand .card small{display:none}#hand .card i{font-size:12px}
#hand .card:disabled{opacity:1;background:#dae3da;color:#617b68}
#hand .card.playable{transform:rotate(var(--fan-angle));outline:2px solid var(--accent);outline-offset:0}
#hand .card.playable:hover,#hand .card.playable:focus-visible{transform:translateY(-18px) rotate(var(--fan-angle));z-index:100}
#hand .card:hover,#hand .card:focus-visible{transform:translateY(-18px) rotate(var(--fan-angle));z-index:100}
#hand .card:hover small,#hand .card:focus-visible small{display:block;position:absolute;left:3px;right:3px;bottom:20px;margin:0;padding:3px 0;background:#ffffffef;color:#00643c;font-size:7px;line-height:1.2;letter-spacing:0;font-weight:bold}
#hand .card:hover small:empty,#hand .card:focus-visible small:empty{display:none}
#hand.has-cards::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:160px;height:63px;z-index:101;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 63'%3E%3Cpath d='M35 63L32 43Q14 31 19 24Q22 19 29 25L49 37L43 12Q42 4 48 4Q54 4 56 13L61 30L62 7Q62 0 69 1Q75 2 75 10L76 30L82 10Q84 3 90 6Q95 8 92 17L88 34L98 20Q102 14 108 18Q112 21 108 28L99 47L95 63Z' fill='%23835037' stroke='%23573021' stroke-width='2'/%3E%3Cpath d='M53 42Q68 35 84 42M44 55Q65 48 88 54' fill='none' stroke='%236c3d29' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
#auth-dialog input{width:100%;font-size:16px}#auth-dialog button{border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:var(--panel);color:var(--ink);margin:6px 0}#auth-dialog .primary{background:var(--button);color:white;width:100%;justify-content:center}#auth-google{width:100%;justify-content:center}#auth-dialog label{max-width:none}#auth-dialog p{font-size:12px}#auth-message:empty{display:none}
/* Keep both email steps inside small-phone dialogs without zooming inputs. */
#auth-dialog{padding:20px}#auth-dialog h2{font-size:25px;margin:8px 0 12px}#auth-dialog p{margin:8px 0}#auth-dialog label{margin:8px 0}#auth-dialog button{margin:4px 0}
#community-counts{font-size:10px!important;color:var(--muted);margin:8px 0!important}
.theme-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.theme-fields label{margin:0;min-width:0}.theme-fields label:nth-child(-n+2){grid-column:1/-1}.theme-fields input{width:100%;font-size:16px;padding:6px}.theme-fields input[type=color]{height:30px;padding:2px}#custom-preview{height:70px;border:3px solid;border-radius:40px;display:flex;align-items:center;justify-content:center;gap:20px;margin:10px 0}#custom-preview span{padding:12px;border:1px solid;border-radius:6px}#theme-builder-dialog{padding:16px}#theme-builder-dialog h2{font-size:22px;margin:4px 0 10px}#theme-builder-dialog p,#leaderboard-dialog p{font-size:11px;margin:8px 0}#theme-builder-dialog label{font-size:11px}#theme-builder-dialog button,#leaderboard-dialog button{padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}#theme-builder-dialog select{max-width:100%;font-size:16px}#theme-builder-dialog .primary{background:var(--button);color:white}#theme-message:empty{display:none}#leaderboard-list{padding-left:20px;font-size:12px}#leaderboard-list li{margin:8px 0}
body.custom-table #felt{background:var(--custom-felt);border-color:var(--custom-accent);color:var(--custom-ink)}body.custom-table .felt-mark{color:var(--custom-ink);opacity:.5}body.custom-table .card.back{background:var(--custom-cardBack);color:var(--custom-back-ink);border-color:var(--custom-accent)}
#theme-builder-dialog label>input{margin-top:3px}#theme-builder-dialog>label{margin:10px 0 6px}#theme-builder-dialog #custom-preview{height:60px;margin:8px 0}
#leaderboard-status:empty{display:none}

/* Presence stays beside the brand, with a dedicated row on phones. */
header #community-counts{font-size:11px!important;line-height:1.4;white-space:nowrap;margin:0!important;display:flex;align-items:center;gap:7px;color:var(--muted)}
header #community-counts::before{content:'';width:7px;height:7px;flex:none;border-radius:50%;background:var(--accent)}
header .tag{margin-left:16px;margin-right:8px}
@media(max-width:1100px){header .tag{display:none}}
@media(max-width:650px){header{flex-wrap:wrap;height:auto;min-height:88px;padding:9px 0 7px;row-gap:7px}header #community-counts{order:5;flex-basis:100%;font-size:10px!important;white-space:normal;justify-content:center}header #menu-open{margin-left:auto}}
#exit-table-direct{white-space:nowrap;padding:10px 12px;font-size:11px}#exit-dialog button{margin:8px 0;width:100%;justify-content:center}@media(max-width:650px){#exit-table-direct{padding:8px;font-size:10px}.tablebar{gap:5px}.tablebar #variant{letter-spacing:0}}
.computer-level{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0;max-width:350px;color:var(--muted)}.computer-level select{font-size:16px;padding:5px 10px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:7px}@media(max-width:650px){.computer-level{max-width:none}.tablebar #variant{font-size:8px;max-width:100px;text-align:center}}
#screen header #wallet-open{margin-left:8px;white-space:nowrap;color:var(--accent);padding:8px 12px}#wallet-dialog button{display:block;width:100%;padding:10px;margin:8px 0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}#wallet-dialog .primary{background:var(--button);color:white}#wallet-balance{font-size:22px;font-weight:bold;color:var(--accent)}@media(max-width:650px){#screen header #wallet-open{margin-left:auto;padding:8px}header #menu-open{margin-left:0}}
.gallery-link{color:var(--accent);font-size:11px;text-decoration:none;letter-spacing:0}.pitch p .gallery-link{margin-left:8px}.menu-controls .gallery-link{padding:10px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center}
a.lounge-art{display:block;text-decoration:none;color:inherit;cursor:pointer}a.lounge-art:hover,a.lounge-art:focus-visible{border-color:var(--accent)}.lounge-caption>small{font:600 12px Arial,sans-serif;letter-spacing:.5px}@media(max-width:650px){.lounge-caption>small{display:block;font-size:10px}.lounge-caption>b{font-size:21px}}