:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#f5f0dc;background:#071c1b;color-scheme:dark;--gold:#d3b276;--muted:#b2c9bc;--mint:#aff6d4;--ink:#091e1b}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #59776a;border-radius:12px;background:#13362f;color:#f5f0dc;padding:12px 18px;min-height:44px;font-weight:650}button:hover:enabled{background:#215143}button:disabled{opacity:.45;cursor:default}.primary{background:var(--mint);color:#092b21;border-color:var(--mint)}.primary:hover:enabled{background:#d0ffe6}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffd891;outline-offset:3px}input,select{width:100%;border:1px solid #48695d;border-radius:10px;padding:12px;background:#082821;color:#fff;min-height:44px;font-size:16px}label{display:grid;gap:7px;font-size:14px;font-weight:600}p{line-height:1.55}h1,h2,p{margin-top:0}[hidden]{display:none!important}.muted{color:var(--muted)}
.welcome{min-height:100dvh;display:grid;grid-template-columns:1fr 420px;gap:70px;max-width:1150px;margin:auto;padding:50px 40px;align-items:center;background:radial-gradient(ellipse at 30% 45%,#1e503347,transparent 65%)}.intro{position:relative}.brand{width:135px;max-height:58px;object-fit:contain;object-position:left center}.eyebrow{color:var(--gold);font-size:12px;letter-spacing:.18em;margin:30px 0 15px}.intro h1{font-size:clamp(40px,6vw,76px);letter-spacing:-.06em;margin-bottom:12px}.subtitle{font-size:20px;color:#c0d9c8}.hero{display:block;height:clamp(160px,35vh,300px);max-width:90%;object-fit:contain;object-position:left center}.intro-note{font-size:14px;color:var(--gold);margin:15px 0 0}.join-panel{background:#0d2b24;border:1px solid #3e5742;border-radius:22px;padding:28px;box-shadow:0 25px 60px #0004}.join-panel h2{font-size:26px;letter-spacing:-.03em;margin-bottom:10px}.join-panel label{margin:14px 0}.join-panel button{width:100%;margin-top:6px}.divider{text-align:center;font-size:12px;color:var(--muted);margin:19px 0 4px}.notice{color:#ffdb98;font-size:14px;margin:12px 0}.build{font-size:11px;color:#9aaea1;margin:20px 0 0}details{margin-top:16px;font-size:13px;color:var(--muted)}summary{cursor:pointer;min-height:30px}details p{margin:10px 0}
.play{height:100dvh;min-height:280px;display:grid;grid-template-rows:56px auto minmax(0,1fr) auto auto;padding:max(0px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));max-width:1500px;margin:auto;background:radial-gradient(ellipse at 5% 35%,#935b2226,transparent 42%),radial-gradient(ellipse at 95% 35%,#65409d24,transparent 42%)}.game-header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:8px}.game-header strong{font-size:17px}.game-header span{display:inline-block;margin-left:15px;font-size:12px;color:var(--gold)}.header-actions{display:flex;gap:8px}.header-actions button{padding:8px 16px;min-height:40px;font-size:13px}.network{background:#633e12;padding:6px 12px;text-align:center;font-size:13px}.table-area{position:relative;min-height:0;outline:none;isolation:isolate;max-width:1250px;width:100%;margin:auto;height:100%}.felt{position:absolute;inset:8% 5% 11%;border-radius:48%;border:clamp(10px,2.3vw,26px) solid #493527;box-shadow:0 0 0 2px #b18b55,inset 0 0 0 2px #bc9d67,inset 0 0 70px #001b12,0 18px 36px #0007;background:radial-gradient(ellipse,#215c43,#0d382c);z-index:-1}.felt:after{content:'FESTLY';position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);font-size:clamp(20px,5vw,64px);letter-spacing:.15em;color:#cfb26612;font-weight:850}
.seat{position:absolute;transform:translate(-50%,-50%);text-align:center;width:clamp(90px,13vw,150px);z-index:2;transition:opacity .15s}.slot-0{left:50%;top:89%}.slot-1{left:16%;top:68%}.slot-2{left:17%;top:24%}.slot-3{left:50%;top:11%}.slot-4{left:83%;top:24%}.slot-5{left:84%;top:68%}.avatar{height:65px;width:65px;border:2px solid #66816b;border-radius:50%;background:#e5dfc4;margin:auto;overflow:hidden}.avatar img{width:100%;height:160%;object-fit:cover;object-position:50% 0%;display:block}.seat-label{background:#08251fec;border:1px solid #7e7650;border-radius:10px;padding:6px 8px;max-width:100%;margin-top:-2px;position:relative}.seat strong{display:block;font-size:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.stack{color:#f8d98a;font-weight:700;font-size:15px}.seat small{display:block;min-height:12px;font-size:10px;color:#c5d8cc}.active .avatar{border-color:#c3ffdc;box-shadow:0 0 0 3px #6de8a74d}.active .seat-label{border-color:#c3ffdc}.folded{opacity:.55}.empty{font-size:12px;color:#b6c7b4}.empty-avatar{height:44px;width:44px;border:1px dashed #9da98188;background:#133a2c;color:#cfcaac;border-radius:50%;display:grid;place-items:center;margin:0 auto 6px;font-size:22px}.dealer{position:absolute;right:-4px;top:45%;border-radius:50%;background:#f6ecd0;color:#263a2b;border:2px solid #ad9257;width:24px;height:24px;font-size:12px;display:grid;place-items:center;font-weight:800}.bet{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);color:#f6d084;font-size:12px;background:#183b2b;padding:3px 10px;border-radius:12px}.opponent-cards{display:flex;justify-content:center;position:absolute;top:22px;left:calc(50% + 28px);transform:rotate(7deg);gap:2px}.opponent-cards .card{width:24px;height:34px;border-radius:4px;font-size:10px}.opponent-cards .card i{font-size:14px}.opponent-cards .card small{display:none}.opponent-cards .card b{font-size:10px}
.community{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);text-align:center;z-index:1}.pot{display:flex;gap:10px;align-items:center;justify-content:center;color:#cad7c4;font-size:12px;letter-spacing:.1em;margin:0 0 13px}.pot strong{color:#f4e4b3;font-size:22px;letter-spacing:0}.board{display:flex;gap:7px}.card{display:inline-flex;position:relative;flex-shrink:0;vertical-align:middle;width:clamp(44px,6vw,70px);height:clamp(62px,8.4vw,98px);background:#fff8e7;border:1px solid #e4d9be;border-radius:7px;color:#13241f;box-shadow:0 3px 7px #0003;align-items:center;justify-content:center}.card b{position:absolute;top:4px;left:5px;font:750 clamp(16px,2vw,25px)/1 system-ui}.card i{font-size:clamp(26px,3.5vw,43px);font-style:normal}.card small{position:absolute;bottom:4px;right:5px;font-size:11px;transform:rotate(180deg);font-weight:700}.card.red{color:#be2924}.card.back{background:repeating-linear-gradient(45deg,#23384b 0px,#23384b 5px,#34475a 5px,#34475a 7px);color:#e7cc90;border:2px solid #ded3b5}.card.back span{font-size:18px}.card.undealt{background:#0b302728;border:1px solid #aba16b88;box-shadow:none}.street{text-transform:uppercase;font-size:11px;letter-spacing:.15em;color:#c6ccb0;margin:12px 0 0}.your-cards{position:absolute;display:flex;gap:6px;left:50%;top:69%;transform:translate(-50%,-50%);z-index:3}.your-cards .card{width:54px;height:76px}.your-cards .card:first-child{transform:rotate(-5deg)}.your-cards .card:last-child{transform:rotate(5deg)}.self .avatar{display:none}.self .seat-label{min-width:140px}.waiting-copy{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);text-align:center;width:48%}.waiting-copy h2{font-size:clamp(18px,2.5vw,30px);margin-bottom:10px}.waiting-copy p{font-size:14px;color:#c0d8c5}.waiting-copy span{color:var(--gold);font-size:13px}.result{position:absolute;top:57%;left:50%;transform:translateX(-50%);z-index:5;font-size:12px;text-align:center;max-width:70%;background:#08291fec;border:1px solid #7c9f79;border-radius:8px;padding:6px 12px}.result span{display:block}.result b{color:#d6fdb7}
.actions{width:100%;max-width:1050px;margin:auto;display:flex;gap:14px;align-items:center;justify-content:center;background:#0d2823;border:1px solid #345745;border-radius:15px;padding:13px 18px;min-height:84px}.turn-copy{flex:1;min-width:90px}.turn-copy strong,.turn-copy span{display:block}.turn-copy strong{font-size:16px}.turn-copy span{color:#b8d1be;font-size:12px;max-width:500px}.bet-buttons{display:flex;gap:8px;flex:2}.bet-buttons button{flex:1;white-space:nowrap;font-size:14px}.raise-input{width:85px;gap:3px;font-size:11px}.raise-input input{min-height:40px;padding:7px;font-size:16px}.action-status{margin:0;text-align:center;color:#ffdd96;font-size:12px;min-height:20px;padding:2px 0}.action-status:empty{min-height:8px;padding:0}
dialog{background:#102e27;color:#f1eedb;border:1px solid #6b805c;border-radius:18px;padding:26px;width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 20px 100px #000a}dialog::backdrop{background:#001812aa;backdrop-filter:blur(5px)}dialog h2{font-size:26px}dialog p{font-size:14px}dialog label{margin:12px 0}dialog .close{position:absolute;right:10px;top:8px;font-size:24px;padding:0;width:40px;min-height:40px;border:0;background:transparent}.menu-stack{display:grid;gap:8px}
@media(max-width:750px){.welcome{grid-template-columns:1fr;gap:20px;padding:26px 18px;max-width:500px}.intro h1{font-size:40px}.brand{width:110px}.eyebrow{margin-top:14px}.hero{height:140px;position:absolute;right:0;bottom:0;max-width:38%;opacity:.85}.intro{min-height:205px}.intro h1,.subtitle,.intro-note{max-width:70%}.subtitle{font-size:15px}.intro-note{font-size:11px}.join-panel{padding:22px}.game-header{padding:0 4px}.game-header span{display:block;margin:2px 0 0;font-size:10px}.header-actions button{padding:8px 12px}.seat{width:84px}.avatar{height:48px;width:48px}.seat-label{padding:4px}.seat strong{font-size:10px}.stack{font-size:12px}.seat small{font-size:9px;min-height:10px}.dealer{width:20px;height:20px;font-size:10px;right:-4px}.opponent-cards{left:calc(50% + 16px);top:11px}.opponent-cards .card{width:19px;height:27px}.bet{font-size:10px;bottom:-19px}.actions{gap:8px;padding:9px;flex-wrap:wrap;min-height:92px}.turn-copy{flex-basis:calc(100% - 86px)}.turn-copy strong{font-size:13px}.turn-copy span{font-size:11px}.bet-buttons{order:3;flex-basis:100%}.bet-buttons button{font-size:12px;padding:10px 6px;min-height:44px}.raise-input{width:76px;display:flex;align-items:center;gap:4px;font-size:10px}.raise-input input{width:55px;padding:5px;min-height:36px}.result{font-size:10px;max-width:85%}.pot strong{font-size:18px}.pot{font-size:10px;gap:5px;margin-bottom:8px}.board{gap:4px}.card{width:38px;height:54px;border-radius:5px}.card b{font-size:17px;top:3px;left:4px}.card i{font-size:26px}.card small{font-size:8px;right:3px;bottom:3px}.your-cards .card{width:42px;height:60px}.street{margin-top:8px;font-size:9px}.empty-avatar{height:32px;width:32px}.empty{font-size:10px}.self .seat-label{min-width:110px}.waiting-copy{width:55%}.waiting-copy p{font-size:12px}.waiting-copy h2{font-size:18px}}
@media(max-width:480px) and (min-height:451px){.felt{inset:8% 4% 8%;border-radius:46%;border-width:10px}.slot-0{top:88%}.slot-1{left:15%;top:64%}.slot-2{left:15%;top:25%}.slot-3{top:10%}.slot-4{left:85%;top:25%}.slot-5{left:85%;top:64%}.community{top:43%}.your-cards{top:70%}.result{top:54%}.seat{width:77px}.board .card{width:34px;height:49px}.waiting-copy{top:45%;width:61%}}
@media(max-height:450px){.play{grid-template-rows:38px auto minmax(0,1fr) auto auto;padding-bottom:3px}.game-header strong{font-size:13px}.game-header span{display:inline;margin-left:8px;font-size:10px}.header-actions button{min-height:30px;padding:5px 12px;font-size:11px}.felt{inset:9% 6% 8%;border-width:9px}.seat{width:85px}.avatar{height:28px;width:28px}.seat-label{padding:2px 4px}.seat strong{font-size:10px}.stack{font-size:11px}.seat small{font-size:8px;min-height:8px}.slot-0{left:28%;top:84%}.slot-1{left:14%;top:65%}.slot-2{left:17%;top:22%}.slot-3{left:50%;top:12%}.slot-4{left:83%;top:22%}.slot-5{left:86%;top:65%}.self .seat-label{min-width:90px}.community{top:45%}.pot{font-size:9px;margin-bottom:5px}.pot strong{font-size:14px}.board .card{width:31px;height:43px}.card b{font-size:13px;top:2px;left:3px}.card i{font-size:21px}.card small{font-size:7px;bottom:2px;right:2px}.board{gap:4px}.street{font-size:8px;margin-top:4px}.your-cards{left:53%;top:82%;gap:5px}.your-cards .card{width:30px;height:42px}.opponent-cards{top:0;left:calc(50% + 12px)}.opponent-cards .card{width:14px;height:20px}.opponent-cards .card span{font-size:10px}.empty-avatar{height:22px;width:22px;font-size:16px}.empty{font-size:9px}.bet{font-size:9px;bottom:-13px;padding:1px 5px}.dealer{height:16px;width:16px;font-size:8px;right:0}.actions{min-height:55px;padding:5px 9px;gap:6px;flex-wrap:nowrap;border-radius:10px}.turn-copy{flex:1;min-width:85px;max-width:180px}.turn-copy strong{font-size:11px}.turn-copy span{font-size:10px;max-height:29px;overflow:hidden}.bet-buttons{order:0;flex:3}.bet-buttons button{font-size:11px;min-height:44px;padding:7px 5px}.raise-input{width:69px;flex-shrink:0}.raise-input input{width:49px;min-height:40px;font-size:16px}.actions>button{font-size:12px;padding:8px}.waiting-copy{top:51%;width:48%}.waiting-copy h2{font-size:18px;margin-bottom:4px}.waiting-copy p{font-size:11px;margin-bottom:2px}.waiting-copy span{font-size:10px}.result{left:50%;top:62%;font-size:9px;padding:3px 8px;max-width:70%}.action-status{font-size:10px;min-height:0}.welcome{min-height:100dvh}.hero{height:140px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.game-header{grid-row:1}.network{grid-row:2}.table-area{grid-row:3}.actions{grid-row:4}.action-status{grid-row:5}
.avatar{position:relative}.avatar img{position:absolute;max-width:none;object-fit:fill;display:block}
.header-actions button,.raise-input input{min-height:44px}
@media(max-height:450px){.play{grid-template-rows:48px auto minmax(0,1fr) auto auto}.header-actions button{min-height:44px}}
.slot-4 .opponent-cards,.slot-5 .opponent-cards{left:auto;right:calc(50% + 16px);transform:rotate(-7deg)}
.result{max-height:48px;overflow:auto}
@media(max-height:450px){.slot-3 .opponent-cards{top:2px!important;left:-34px!important}.slot-3 .bet{left:calc(100% + 10px);bottom:auto;top:15px;transform:none}}
@media(max-height:450px){.seat strong{line-height:12px}.seat .stack{display:block;line-height:13px}.seat small{line-height:10px}.slot-3{display:flex;align-items:center;gap:4px;width:122px;top:13%}.slot-3 .avatar{margin:0;flex-shrink:0}.slot-3 .seat-label{flex:1;margin:0}.slot-3 .opponent-cards{top:40px;left:15px}.result{max-height:30px}}
