@import url('/slave/assets/fonts.css');
:root{color-scheme:dark;--ink:#0d1230;--navy:#151947;--violet:#35216d;--purple:#6a3e9f;--cream:#fff7dc;--gold:#ffdd75;--mango:#ffc85c;--mint:#79ead2;--pink:#f582b1;--line:#ffffff31;font-family:'Chakra Petch',system-ui,sans-serif;background:#10143a;color:var(--cream)}*{box-sizing:border-box}body{min-width:320px;margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -8%,#743f9b 0%,#21215a 36%,#101435 72%)}button,input,select{font:inherit}button{cursor:pointer}.arcade-page::before{content:'';position:fixed;inset:0;z-index:-1;opacity:.25;background:repeating-radial-gradient(ellipse at center,#fff0 0 45px,#eee6ff1a 46px 48px);pointer-events:none}.app-shell{width:min(1180px,calc(100% - 32px));margin:auto;padding:24px 0 42px}.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.brand-mark{display:grid;place-items:center;width:45px;height:45px;border:2px solid #ffe8a8;border-radius:13px;color:#ffdc77;background:linear-gradient(145deg,#743e92,#26356a);box-shadow:0 4px 0 #0d1030,0 0 20px #f9d76d55;font-size:27px}.brand b{display:block;color:#fff8dc;font-size:28px;line-height:.83}.brand small{display:block;margin-top:6px;color:#bcd7ff;font:7px 'Press Start 2P';letter-spacing:.5px;white-space:nowrap}.top-copy{display:flex;flex-direction:column;gap:4px;color:#b9ccff;font-size:13px}.top-copy span,.eyebrow{color:#ffdc7b;font:8px 'Press Start 2P';letter-spacing:.4px}.top-copy b{font-size:14px}.site-nav{display:flex;justify-content:flex-end;gap:5px}.site-nav a{display:grid;min-width:54px;padding:6px 5px;border:1px solid transparent;border-radius:10px;color:#bcd0ff;text-decoration:none;text-align:center;transition:.15s}.site-nav a:hover,.site-nav a[aria-current=page]{border-color:#ffe7a071;color:#fff5cb;background:#ffffff12}.site-nav span{font-size:18px;line-height:18px}.site-nav small{margin-top:3px;font:5px 'Press Start 2P'}
.lobby-hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:36px;min-height:320px;margin:28px 0 22px;padding:34px 48px;border:1px solid #ffffff36;border-radius:26px;background:linear-gradient(120deg,#1b245dda,#4d2a75b8),url('/slave/assets/table-background.png') center/cover;box-shadow:inset 0 1px #ffffff2b,0 16px 40px #05072255}.lobby-hero h1{margin:13px 0 12px;color:#fff7d8;font:clamp(34px,6vw,68px)/.88 'Press Start 2P';letter-spacing:-3px;text-shadow:4px 5px #33154c}.lobby-hero h1 em{color:#ffda79;font-style:normal}.lobby-hero p{max-width:520px;margin:0;color:#e8e5ff;font-size:18px;line-height:1.45}.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:19px}.hero-tags span,.rank-chip{padding:7px 9px;border:1px solid #ffffff45;border-radius:8px;color:#d9f8ee;background:#182355ae;font:6px 'Press Start 2P'}.hero-court{position:relative;display:grid;place-items:center;min-height:220px;overflow:hidden}.hero-court::before,.hero-court::after{content:'';position:absolute;border:2px dashed #ffde8b77;border-radius:50%}.hero-court::before{width:220px;height:220px}.hero-court::after{width:154px;height:154px;border-color:#82eadc77}.hero-court i{position:absolute;z-index:1;display:grid;place-items:center;width:75px;height:75px;border:2px solid #ffeaac;border-radius:50%;color:#ffdd79;background:#3d2968;box-shadow:0 0 24px #ffdc7a66;font-size:38px;font-style:normal}.hero-court i:nth-child(1){top:11px;left:18%}.hero-court i:nth-child(2){right:13%;bottom:19px;color:#ffc2e3}.hero-court i:nth-child(3){bottom:6%;left:11%;color:#baf4df}.hero-court i:nth-child(4){top:15%;right:6%;color:#ffaac5}.hero-court b{z-index:2;color:#fff7dc;font:24px 'Press Start 2P';text-shadow:0 3px #281642}.lobby-grid{display:grid;grid-template-columns:1fr 1fr .7fr;gap:16px}.surface{min-width:0;padding:23px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#28336dd9,#192253e8);box-shadow:inset 0 1px #ffffff1b,0 8px 22px #09102b55}.surface h2{margin:10px 0 18px;color:#fff3cf;font:16px 'Press Start 2P';line-height:1.5}.surface p{color:#d8e2ff;font-size:16px;line-height:1.45}.surface label{display:block;margin:14px 0;color:#dce7ff;font-size:13px;font-weight:600}.surface input,.surface select{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid #ffffff38;border-radius:10px;outline:0;color:#fff8df;background:#111a45}.surface input:focus,.surface select:focus{border-color:#ffdc75;box-shadow:0 0 0 3px #ffdc7533}.check-row{display:flex!important;align-items:center;gap:9px}.check-row input{display:inline;width:auto;margin:0;accent-color:#ffce65}.primary-button,.secondary-button,.text-button{border:0;border-radius:11px;font-weight:700}.primary-button{width:100%;margin-top:13px;padding:13px 15px;color:#583b40;background:linear-gradient(135deg,#ffed9b,#f5bd5d);box-shadow:0 4px #b9793e}.primary-button:disabled,.secondary-button:disabled{cursor:not-allowed;opacity:.45}.secondary-button{padding:10px 13px;color:#eafff7;background:linear-gradient(135deg,#417e9c,#2b4e83);box-shadow:0 3px #172d5d}.text-button{padding:3px 0;color:#ffe18c;background:transparent;font-size:11px}.status-line{display:block;min-height:27px;margin-top:13px;color:#bdeee4;font:10px 'Press Start 2P';line-height:1.55}.join-code-row{display:flex;gap:8px}.join-code-row input{margin:0;min-width:0;font-family:'Press Start 2P';letter-spacing:2px}.lobby-divider{display:grid;place-items:center;margin:20px 0;border-bottom:1px solid #ffffff2a;line-height:0}.lobby-divider span{padding:0 9px;color:#aebfe9;background:#202b61;font:7px 'Press Start 2P'}.open-rooms-head{display:flex;justify-content:space-between;align-items:center;color:#e7efff;font:8px 'Press Start 2P'}.room-list{max-height:240px;margin:0;padding:0;overflow:auto;list-style:none}.room-list li{display:flex;justify-content:space-between;gap:9px;align-items:center;padding:12px 0;border-top:1px solid #ffffff20}.room-list b,.room-list small{display:block}.room-list b{color:#fff3cf}.room-list small{margin-top:3px;color:#bcd1fa;font-size:12px}.network-card{display:flex;flex-direction:column}.network-light{display:flex;align-items:center;gap:8px;margin:16px 0 4px;color:#bff7e8;font:10px 'Press Start 2P'}.network-light i{width:12px;height:12px;border-radius:50%;background:#63edcf;box-shadow:0 0 12px #63edcf}.network-card dl{margin:auto 0 13px}.network-card dl div{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid #ffffff20}.network-card dt{color:#b6c8f3;font:7px 'Press Start 2P'}.network-card dd{margin:0;color:#ffe192;font:8px 'Press Start 2P'}.inline-link{color:#ffe18a;font:9px 'Press Start 2P';text-decoration:none}.footer-bar{display:flex;justify-content:space-between;gap:16px;margin-top:19px;color:#adc3ee;font:7px 'Press Start 2P'}
.content-page{max-width:850px;margin:42px auto}.page-card{padding:31px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#29366edb,#171e4ddd);box-shadow:0 15px 35px #080c2d77}.page-card h1{margin:11px 0 10px;color:#fff1bf;font:25px 'Press Start 2P';line-height:1.45}.page-card p{color:#dce7ff;font-size:17px;line-height:1.5}.profile-grid,.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.stat{padding:16px;border:1px solid #ffffff26;border-radius:13px;background:#131a47aa;text-align:center}.stat b{display:block;color:#ffde81;font:18px 'Press Start 2P'}.stat small{display:block;margin-top:8px;color:#b5c9f5;font:7px 'Press Start 2P'}.leaderboard-list{margin:20px 0 0;padding:0;list-style:none}.leaderboard-list li{display:grid;grid-template-columns:40px 1fr 92px 70px;gap:12px;align-items:center;padding:14px;border-bottom:1px solid #ffffff24}.leaderboard-list li:nth-child(1) b:first-child{color:#ffe27b}.leaderboard-list small{color:#b9cdf6}.leaderboard-list strong{color:#fff4c7;text-align:right}.rules-list{display:grid;gap:10px;margin:20px 0;padding:0;list-style:none}.rules-list li{padding:15px;border:1px solid #ffffff2a;border-radius:12px;background:#131c4caa;color:#dce7ff;line-height:1.5}.rules-list b{display:block;margin-bottom:5px;color:#ffdf88}.form-row{display:flex;gap:10px;align-items:end}.form-row input{flex:1}
.game-shell{width:min(1180px,calc(100% - 26px));margin:auto;padding:20px 0 38px}.game-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}.room-head{color:#c7d8ff;text-align:center}.room-head b{display:block;color:#ffdf87;font:12px 'Press Start 2P'}.room-head small{display:block;margin-top:7px;font:7px 'Press Start 2P'}.room-head small span{display:inline-block;white-space:nowrap}.game-actions{display:flex;gap:7px}.game-actions button{padding:8px 10px;border:1px solid #ffffff37;border-radius:9px;color:#fff7d9;background:#273568;font:7px 'Press Start 2P'}.game-table{position:relative;min-height:480px;margin-top:20px;overflow:visible;border:1px solid #ffffff35;border-radius:28px;background:radial-gradient(ellipse at center,#392d7bb8,#14204ddd 64%,#0d1237ee),url('/slave/assets/table-background.png') center/cover;box-shadow:inset 0 1px #ffffff24,0 18px 35px #05082477}.game-table::before{content:'';position:absolute;inset:14px;border:1px dashed #78ede177;border-radius:50%;pointer-events:none}.table-status{position:absolute;z-index:5;top:16px;left:50%;width:min(520px,88%);padding:10px 16px;transform:translateX(-50%);border:1px solid #ffffff45;border-radius:13px;color:#fff9e8;background:#18265bdc;text-align:center;font-weight:700;box-shadow:0 4px 13px #07102a88}.seats{position:absolute;inset:0}.seat{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 0 #0b143266)}.seat[data-slot="1"]{top:29%;left:15%}.seat[data-slot="2"]{top:17%;left:50%}.seat[data-slot="3"]{top:29%;left:85%}.seat[data-slot="4"]{top:55%;left:93%}.seat[data-slot="5"]{top:55%;left:7%}.seat-stack{position:relative;min-width:58px;height:78px}.card-back{position:absolute;width:52px;height:74px;border:2px solid #f9e6b7;border-radius:7px;background:linear-gradient(135deg,#d66b9c,#604b9e);box-shadow:2px 3px #0d183c}.card-back::after{content:'✦';position:absolute;inset:6px;border:1px solid #ffe0a1;border-radius:4px;color:#ffe0a1;font-size:25px;line-height:54px;text-align:center}.stack-count{position:absolute;z-index:2;top:-5px;left:50%;padding:3px 6px;transform:translateX(-50%);border-radius:8px;color:#4d3544;background:#ffce69;font:8px 'Press Start 2P';box-shadow:0 2px #b8763a}.seat-name{max-width:120px;color:#fff8df;font-weight:700;text-shadow:0 2px #10194a}.seat-name small{display:block;margin-top:2px;color:#b9d2ff;font:6px 'Press Start 2P';white-space:nowrap}.seat.current .seat-stack{filter:drop-shadow(0 0 6px #ffe478) drop-shadow(0 0 16px #ffe478)}.seat.current .seat-name{color:#ffec9b}.seat.you{display:none}.pile-zone{position:absolute;z-index:4;top:54%;left:50%;width:310px;min-height:182px;transform:translate(-50%,-50%);text-align:center}.turn-arrow{color:#83f1e4;font-size:29px;text-shadow:0 0 13px #33dbd4}.pile-label{margin:4px 0;color:#fff5d6;font:7px 'Press Start 2P'}.pile{display:flex;justify-content:center;align-items:center;min-height:116px}.pile-card{width:79px;height:111px;margin-right:-45px;filter:drop-shadow(2px 4px 5px #070c26a8)}.pile-card:last-child{margin-right:0}.empty-pile{display:grid;place-items:center;width:94px;height:116px;border:2px dashed #ffe6acaa;border-radius:12px;color:#fff0ca;background:#1a2b5dbb;font:7px 'Press Start 2P';line-height:1.7}.pile-detail{margin:5px 0;color:#d5e4ff;font-size:14px}.flight-layer{position:absolute;z-index:8;inset:0;pointer-events:none}.flight-card{position:absolute;top:53%;left:50%;width:62px;height:88px;border:2px solid #f9e6b7;border-radius:7px;opacity:0;background:linear-gradient(135deg,#d66b9c,#604b9e);box-shadow:0 4px 12px #060a25;animation:table-flight .7s cubic-bezier(.2,.75,.2,1) forwards}.flight-card::after{content:'✦';position:absolute;inset:6px;border:1px solid #ffe0a1;border-radius:4px;color:#ffe0a1;font-size:24px;line-height:64px;text-align:center}@keyframes table-flight{0%{opacity:0;transform:translate(calc(-50% + var(--from-x)),calc(-50% + var(--from-y))) scale(.66)}12%{opacity:1}100%{opacity:.15;transform:translate(calc(-50% + var(--to-x)),calc(-50% + var(--to-y))) scale(.78)}}.player-area{margin-top:17px;padding:15px;border:1px solid #ffffff34;border-radius:20px;background:#182253d1;box-shadow:inset 0 1px #ffffff20}.player-meta{display:flex;justify-content:center;align-items:center;gap:10px;color:#dbe8ff}.player-meta b{color:#fff4d9;font-size:18px}.role-badge{padding:5px 7px;border-radius:7px;color:#47345b;background:#ffdc80;font:6px 'Press Start 2P'}.hand{display:flex;justify-content:center;align-items:flex-end;min-height:151px;padding:12px;overflow:visible}.card{flex:0 0 79px;height:111px;margin-right:-36px;padding:0;overflow:visible;border:0;border-radius:9px;background:transparent;filter:drop-shadow(0 4px 5px #07112a88);transition:transform .15s,filter .15s}.card:last-child{margin-right:0}.card img,.card canvas{display:block;width:100%;height:100%;border-radius:9px}.card.selectable:hover,.card.selected{transform:translateY(-20px);filter:drop-shadow(0 0 8px #ffe378) drop-shadow(0 6px 6px #07112a88)}.card.selected{outline:3px solid #f5c85e;border-radius:9px}.controls{display:flex;justify-content:center;gap:10px}.controls button{padding:13px 22px;border:0;border-radius:12px;color:#fff8e6;font:8px 'Press Start 2P';box-shadow:0 4px #08112e}.controls .play{background:linear-gradient(135deg,#e36591,#b9467c)}.controls .pass{background:linear-gradient(135deg,#4e719f,#344b7c)}.controls .boo{background:linear-gradient(135deg,#e6a23c,#c2761f)}.controls .icon-button{display:grid;place-items:center;min-width:0;padding:13px 16px;font-size:18px;line-height:1}.controls .mute{background:linear-gradient(135deg,#3d4f7d,#2a3559)}.comfort-play .controls .icon-button{min-width:56px;font:18px/1 'Chakra Petch',sans-serif}.controls button:disabled{cursor:not-allowed;opacity:.42;filter:grayscale(.7)}.exchange-panel,.table-lobby{position:absolute;z-index:9;top:50%;left:50%;width:min(480px,92%);padding:22px;transform:translate(-50%,-50%);border:2px solid #ffe29a;border-radius:20px;color:#fff8dd;background:linear-gradient(135deg,#28174edf,#583073e8);box-shadow:0 0 0 5px #69449966,0 15px 38px #070a27cc;text-align:center}.exchange-panel h2,.table-lobby h2{margin:5px 0 9px;color:#ffdf85;font:14px 'Press Start 2P';line-height:1.6}.exchange-panel p,.table-lobby p{color:#dbeaff}.exchange-cards{display:flex;justify-content:center;gap:7px;margin:12px 0}.exchange-cards img,.exchange-cards canvas{display:block;width:55px;height:78px;border-radius:7px}.exchange-panel .primary-button{max-width:270px}.toast{position:fixed;z-index:22;bottom:18px;left:50%;padding:11px 17px;transform:translate(-50%,15px);opacity:0;border-radius:14px;color:#533745;background:#ffe08a;box-shadow:0 5px #b9793d,0 10px 22px #02052177;font-weight:700;transition:.2s}.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:850px){.topbar{grid-template-columns:1fr auto}.top-copy{display:none}.site-nav{grid-column:1/-1;justify-content:space-between}.site-nav a{flex:1}.lobby-hero{grid-template-columns:1fr;padding:30px;min-height:0}.hero-court{display:none}.lobby-grid{grid-template-columns:1fr}.network-card{display:none}.game-table{min-height:440px}.seat[data-slot="1"]{top:32%;left:15%}.seat[data-slot="2"]{top:20%;left:50%}.seat[data-slot="3"]{top:32%;left:85%}.seat[data-slot="4"]{top:57%;left:89%}.seat[data-slot="5"]{top:57%;left:11%}.seat{gap:3px}.seat-name{max-width:74px;font-size:12px}.seat-stack{transform:scale(.82)}.pile-zone{transform:translate(-50%,-50%) scale(.84)}.game-head{grid-template-columns:1fr auto}.game-head .room-head{display:none}.footer-bar{font-size:5px}.leaderboard-list li{grid-template-columns:28px 1fr 60px}.leaderboard-list li small:last-child{display:none}}
@media(max-width:480px){.app-shell,.game-shell{width:calc(100% - 16px);padding-top:14px}.brand b{font-size:23px}.site-nav small{font-size:4px}.site-nav a{min-width:0}.lobby-hero{padding:24px}.lobby-hero h1{font-size:35px}.page-card{padding:20px}.profile-grid,.stat-grid{grid-template-columns:1fr}.game-table{margin-top:12px;border-radius:18px}.seat-stack{transform:scale(.65)}.seat-name{display:none}.pile-zone{transform:translate(-50%,-50%) scale(.72)}.card{flex-basis:62px;height:88px;margin-right:-30px}.hand{min-height:124px}.controls button{padding:12px 14px;font-size:6px}.game-actions button{font-size:6px}.exchange-panel{padding:16px}}

.mode-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:20px}.mode-actions a{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;min-width:196px;padding:12px 15px;border:1px solid #fff3bb99;border-radius:13px;color:#3e3045;font:10px 'Press Start 2P';text-decoration:none;box-shadow:0 4px #a86d3c;transition:transform .15s,filter .15s}.mode-actions a:hover{transform:translateY(-2px);filter:brightness(1.08)}.mode-actions a:focus-visible{outline:3px solid #b6fff4;outline-offset:3px}.mode-actions a span{grid-row:1/3;font-size:24px}.mode-actions small{grid-column:2;margin-top:5px;color:#684e62;font:5px 'Press Start 2P'}.play-now{background:linear-gradient(135deg,#ffeda7,#f2bd5b)}.create-online{background:linear-gradient(135deg,#aaf1df,#6bc7d6)}

/* Each non-table page receives its own fixed arcade scene. The play table keeps its existing background. */
body.lobby-page{background:radial-gradient(ellipse at 50% -14%,#ffbd6c60 0 17%,#b2468a42 32%,transparent 55%),radial-gradient(circle at 8% 27%,#7df5df27 0 2px,transparent 3px),radial-gradient(circle at 91% 19%,#ffe7983b 0 2px,transparent 3px),linear-gradient(155deg,#191245 0%,#352066 47%,#102a52 100%);background-attachment:fixed}body.lobby-page::before{opacity:.55;background:linear-gradient(135deg,transparent 0 47%,#ffd98312 47% 49%,transparent 49% 100%),repeating-linear-gradient(90deg,transparent 0 88px,#ffe6ab0b 89px 91px),repeating-linear-gradient(0deg,transparent 0 88px,#ffe6ab0a 89px 91px)}body.lobby-page .surface{background:linear-gradient(145deg,#342667e8,#17275ae8);border-color:#ffe4aa42}body.lobby-page .lobby-hero{box-shadow:inset 0 1px #fff3d64a,0 18px 42px #070c3488,0 0 60px #f28d8840}
body.profile-page{background:radial-gradient(ellipse at 20% 2%,#83e7d645 0 16%,transparent 43%),radial-gradient(ellipse at 88% 79%,#f6bd7a2a 0 12%,transparent 44%),linear-gradient(148deg,#0f3456 0%,#193d67 40%,#36235f 100%);background-attachment:fixed}body.profile-page::before{opacity:.48;background:repeating-linear-gradient(125deg,transparent 0 37px,#bffce50b 38px 40px),repeating-linear-gradient(55deg,transparent 0 78px,#ffe2a10c 79px 80px)}body.profile-page .page-card{border-color:#96f5df5c;background:linear-gradient(145deg,#1c536cd9,#1c2857ec);box-shadow:inset 0 1px #d8fff83d,0 18px 42px #071d3880,0 0 55px #64d7ca1c}body.profile-page .stat{background:linear-gradient(145deg,#173f61c9,#182656d9);border-color:#9cf2df40}
body.leaderboard-page{background:radial-gradient(ellipse at 50% -10%,#ffce6e58 0 18%,transparent 49%),radial-gradient(circle at 17% 30%,#fff5b828 0 2px,transparent 3px),radial-gradient(circle at 77% 19%,#fff5b81d 0 2px,transparent 3px),linear-gradient(160deg,#201344 0%,#4a2769 49%,#27134f 100%);background-attachment:fixed}body.leaderboard-page::before{opacity:.58;background:repeating-radial-gradient(ellipse at 50% 24%,transparent 0 70px,#ffd9780c 71px 73px,transparent 74px 142px),linear-gradient(90deg,transparent 0 10%,#fbe2960a 10.2% 10.4%,transparent 10.6% 89.4%,#fbe2960a 89.6% 89.8%,transparent 90%)}body.leaderboard-page .page-card{border-color:#ffe39d73;background:linear-gradient(145deg,#4d2d70df,#1c1b51ee);box-shadow:inset 0 1px #fff4c348,0 18px 43px #1005228a,0 0 68px #f4bf6726}body.leaderboard-page .leaderboard-list li{border-bottom-color:#ffe4a92e;background:linear-gradient(90deg,#fff0b707,transparent 68%)}
body.rules-page{background:radial-gradient(ellipse at 6% 8%,#e0a36532 0 13%,transparent 43%),radial-gradient(ellipse at 94% 90%,#a97dd842 0 15%,transparent 45%),linear-gradient(145deg,#201333 0%,#342047 47%,#17264a 100%);background-attachment:fixed}body.rules-page::before{opacity:.53;background:repeating-linear-gradient(0deg,transparent 0 48px,#ffe9bf09 49px 50px),repeating-linear-gradient(90deg,transparent 0 48px,#cf92e30a 49px 50px),linear-gradient(45deg,transparent 0 49%,#ffe1a10a 50% 51%,transparent 52% 100%)}body.rules-page .page-card{border-color:#e9c8916b;background:linear-gradient(145deg,#3c2854e8,#1c3157ec);box-shadow:inset 0 1px #ffeccd3b,0 18px 43px #09091f86,0 0 65px #cb83ce26}body.rules-page .rules-list li{border-color:#f5d59a38;background:linear-gradient(145deg,#44315aac,#20365aaa)}

/* The throw/pass/boo row belongs under the player's cards. play-comfort.css
   moves .controls into a 180px column beside the hand at >=701px; the table
   reads better with one row at the bottom of the stack, boo last. */
@media(min-width:701px){
 body.comfort-play .player-area{grid-template-columns:minmax(0,1fr)}
 body.comfort-play .player-area .controls{grid-column:1;grid-row:4;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;width:100%;margin-top:4px}
}
/* On a phone play-comfort.css pins the controls to the bottom edge in a
   two-column grid built for two buttons.  Four of them wrapped onto a second
   row, doubling the bar to 133px and hiding the hand behind it.  One row:
   the two labelled buttons share the space, the two icons stay square. */
@media(max-width:700px){
 body.comfort-play .player-area .controls{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto auto;gap:8px}
 body.comfort-play .player-area .controls button{min-width:0;flex:none;padding-inline:8px;white-space:nowrap;font-size:15px}
 body.comfort-play .player-area .controls .icon-button{min-width:48px;padding:10px;font-size:17px}
 /* …and the table gives back the height the hand needs to clear that bar. */
 body.comfort-play .game-table{height:clamp(228px,32svh,300px);min-height:228px}
}

/* Three things that made the table read badly, all measured on a 6-seat game:
   1. The hand sat hard left in a 1150px row while the cards spanned 474px,
      because #hand is start-aligned so it can scroll. "safe center" centres
      it while it fits and reverts to start once it overflows, so no card
      becomes unreachable behind the scroll origin.
   2. The status banner (top 102-146) sat on top of the centre seat (111-189),
      hiding whoever sat there.
   3. A stack of eight fanned card backs is 73px wide inside a 58px seat-stack,
      so it spilled over the name beside it — hence "amma" and "lpha". */
@media(min-width:701px){body.comfort-play .player-area #hand{justify-content:center}}
/* The status line used to live inside the table at top:16px, sitting on the
   centre seat and hiding whoever was in it.  Dodging it by pushing that seat
   down flattened the three seats into a straight line and broke the arc they
   are meant to form around the pile.  It now sits above the table, where it
   collides with nothing at any width, and the seats keep their arc. */
.table-status{position:static;top:auto;left:auto;transform:none;width:min(560px,94%);margin:0 auto 10px}
.seat-stack{min-width:76px}
/* The hint and the clear button were pushed to opposite ends of a 950px row,
   reading as two unrelated things floating over the felt.  Centred together,
   they sit as one caption over the cards they describe. */
body.comfort-play .player-area .hand-tools{justify-content:center;gap:18px}

/* The settings popup's chips are the shared component's (web/site-menu/play-menu.css).
   Only what it does not know is styled here: a chip a non-host cannot press,
   and the note that says so, which takes a row of its own. */
.game-actions .gm-setting{flex-wrap:wrap}.game-actions .gm-setting button:disabled{opacity:.45;cursor:not-allowed}.game-actions .gm-setting .bot-level-note{flex-basis:100%;text-align:center;color:#b9ccff;font-weight:500}