@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--ink:#0b1020;--panel:#172037;--acid:#deff65;--cream:#fcf9e9;--muted:#a9bad1;--line:#ffffff29;font-family:'DM Sans',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--cream);background:radial-gradient(circle at 50% -15%,#304969,#0b1020 55%)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}[hidden]{display:none!important}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--acid);outline-offset:3px}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 clamp(14px,4vw,48px);border-bottom:1px solid var(--line);background:#0b1020dd}.topbar .back,.topbar button{min-height:43px;padding:0 13px;border:1px solid #8da4d75c;border-radius:8px;background:#ffffff0c;color:#e5f1ff;font-size:11px;font-weight:800;letter-spacing:.06em}.brand{text-align:center}.brand>span{display:block;font-size:9px;letter-spacing:.18em;color:var(--acid);font-weight:800}.brand strong{font:900 31px/.9 'Barlow Condensed',Impact,sans-serif;letter-spacing:.015em}.brand strong span{color:var(--acid)}main{max-width:1100px;margin:auto;padding:20px clamp(12px,3vw,32px) 50px}.rules{margin:0 0 18px;padding:18px 22px;background:#1e2c46;border:1px solid #a3b5d264;border-radius:14px}.rules h2{font:900 27px 'Barlow Condensed';margin:0 0 8px}.rules p{margin:0;line-height:1.6;color:#d7e4ef}.lobby{display:grid;grid-template-columns:1fr 1fr;min-height:560px;border:1px solid #bdd2ff53;border-radius:20px;overflow:hidden;background:#152238;box-shadow:0 30px 80px #0008}.hero{position:relative;overflow:hidden;padding:60px clamp(26px,5vw,64px);background:radial-gradient(circle at 75% 67%,#3b567e,#111b32 63%)}.kicker{color:var(--acid);font-size:10px;font-weight:800;letter-spacing:.19em}.hero h1{position:relative;z-index:2;font:900 clamp(75px,10vw,145px)/.75 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.04em;margin:34px 0 24px}.hero h1 em{color:var(--acid);font-style:normal}.hero p{position:relative;z-index:2;max-width:320px;line-height:1.6;color:#e1edee}.hero-cards{position:absolute;right:8%;bottom:1%;width:260px;height:260px;transform:rotate(-13deg)}.hero-cards div{position:absolute;width:110px;height:153px;border-radius:10px;background:linear-gradient(140deg,#fffef8,#e6e5d8);color:#18243b;padding:12px;font:900 40px/.8 'Barlow Condensed';box-shadow:0 12px 25px #0007}.hero-cards div span{display:block;margin-top:7px;font:40px Georgia}.hero-cards div:nth-child(1){left:0;top:40px;transform:rotate(-22deg);color:#be354a}.hero-cards div:nth-child(2){left:72px;top:20px;transform:rotate(1deg)}.hero-cards div:nth-child(3){left:143px;top:40px;transform:rotate(22deg);color:#be354a}.lobby-form{padding:clamp(28px,6vw,72px);align-self:center}.lobby-form h2{font:900 clamp(40px,5vw,64px)/.9 'Barlow Condensed';margin:17px 0}.lobby-form p{color:var(--muted);line-height:1.55}.lobby-form label{display:block;margin:27px 0 8px;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--acid)}input{width:100%;min-height:53px;padding:0 15px;color:var(--cream);background:#0b1427;border:1px solid #afc4e86b;border-radius:9px;outline:0}input::placeholder{color:#95a6c0}.primary{min-height:52px;padding:0 24px;border:0;border-radius:9px;background:var(--acid);color:#152136;font-weight:900;letter-spacing:.04em;box-shadow:0 6px 0 #89a234,0 12px 22px #0006}.primary:not(:disabled):active{transform:translateY(3px);box-shadow:0 3px 0 #89a234}.lobby-form>.primary{margin-top:12px;width:100%}.divider{margin:31px 0 12px;color:#b8c7d9;font-size:10px;font-weight:800;letter-spacing:.16em}.lobby-form form{display:flex}.lobby-form form input{border-radius:9px 0 0 9px;min-width:0}.lobby-form form button{padding:0 20px;border:1px solid #a6bce06b;border-left:0;border-radius:0 9px 9px 0;background:#344968;color:#fff;font-size:12px;font-weight:900}.message{min-height:20px;font-size:12px;color:var(--acid)}.message[data-error=true]{color:#ffb9b9}.room-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:#1b2a44}.room-bar>div{display:flex;align-items:center;gap:12px}.room-bar span,.player-panel>span,.round-tag>span,.hand-heading span{font-size:10px;letter-spacing:.16em;font-weight:800;color:var(--muted)}.room-bar strong{font:900 26px 'Barlow Condensed';letter-spacing:.17em;color:var(--acid)}.room-bar button{min-height:42px;padding:0 14px;border:1px solid #b5c9eb66;border-radius:8px;background:#ffffff10;color:var(--cream);font-size:11px;font-weight:900}.score-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;margin:12px 0}.player-panel,.round-tag{padding:12px 15px;border:1px solid var(--line);border-radius:11px;background:#182741;min-width:0}.player-panel strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 24px 'Barlow Condensed'}.player-panel small,.round-tag small{display:block;font-size:11px;color:#b5c9d9}.player-panel.me{text-align:right}.round-tag{text-align:center;min-width:95px}.round-tag strong{display:block;font:900 25px 'Barlow Condensed';color:var(--acid)}.table{position:relative;min-height:350px;padding:35px 14px 18px;border:11px solid #253047;border-radius:33px;background:radial-gradient(ellipse at 50% 40%,#254c6b,#142c45 65%,#10263d);box-shadow:0 22px 70px #0009,inset 0 0 0 2px #8ba9bf7d,inset 0 0 80px #0005;overflow:hidden;text-align:center}.table:before{content:'';position:absolute;inset:8px;border:1px solid #b9d4e944;border-radius:22px;pointer-events:none}.table-ring{position:absolute;left:50%;top:48%;width:min(70%,550px);height:75%;border:1px solid #d3edff1f;border-radius:50%;transform:translate(-50%,-50%)}.table-top{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:clamp(8px,2vw,28px);min-height:155px}.side-label{display:none}.reserve{display:grid;place-items:center;min-width:51px;min-height:87px;border:1px dashed #d4ebec57;border-radius:7px;color:#d7eeef;font:900 18px 'Barlow Condensed';background:#ffffff0b}.reserve:before{content:'↻';display:block;color:var(--acid);font-size:19px}.pile-wrap{display:grid;place-items:center;min-width:110px;min-height:150px;border:2px dashed #e8fcf2a0;border-radius:14px;background:#ffffff0e;transition:background .12s,transform .12s}.pile-wrap.legal{border-style:solid;border-color:var(--acid);background:#deff652c;box-shadow:0 0 30px #deff6533}.pile-wrap.legal:active{transform:scale(.97)}.pile-wrap button{cursor:pointer}.center-mark{position:relative;margin-top:1px;color:#ecf8ef2b;font:900 45px/.8 'Barlow Condensed';letter-spacing:.08em}.center-mark span{display:block;margin-top:4px;font:800 8px 'DM Sans';letter-spacing:.43em}.flip{position:relative;z-index:2;min-height:43px;margin-top:11px;padding:0 17px;border:1px solid #d7ecb48f;border-radius:8px;background:#deff6521;color:var(--acid);font-size:11px;font-weight:900;letter-spacing:.07em}.flip:disabled{opacity:.38}.table p{position:relative;z-index:2;min-height:22px;margin:12px 0 0;color:#d9eee8;font-size:13px;font-weight:700}.card{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;width:88px;height:123px;padding:9px 11px;border:2px solid #fff9e8;border-radius:10px;background:linear-gradient(140deg,#fffcf5,#e9e7dd);color:#1b2940;text-align:left;box-shadow:0 8px 17px #0007;user-select:none;-webkit-user-select:none;touch-action:manipulation}.card.red{color:#c63b56}.card b{font:900 32px/.8 'Barlow Condensed';letter-spacing:-.02em}.card span{align-self:flex-end;font:37px/.8 Georgia,serif}.card.legal{border-color:var(--acid);box-shadow:0 0 0 3px #deff6588,0 8px 17px #0007}.card.selected{transform:translateY(-13px);border-color:var(--acid);box-shadow:0 0 0 3px #deff65,0 13px 24px #0009}.card:disabled{opacity:1}.hand-area{margin-top:17px}.hand-heading{display:flex;align-items:end;justify-content:space-between;gap:12px}.hand-heading h2{font:900 33px 'Barlow Condensed';margin:3px 0 12px}.hand-heading>strong{font:900 16px 'Barlow Condensed';letter-spacing:.08em;color:var(--acid);margin-bottom:16px}.hand{display:flex;align-items:center;justify-content:center;gap:12px;min-height:156px;padding:15px 5px 20px}.hand .card{width:100px;height:139px}.hand-footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:12px;color:var(--muted);font-size:11px}.hand-footer span:first-child{color:var(--acid);font-weight:800}.result{margin:14px 0;padding:20px;border:1px solid #e0ff7777;border-radius:12px;background:#1d3441}.result>span{font-size:10px;letter-spacing:.17em;color:var(--acid);font-weight:900}.result h2{font:900 40px 'Barlow Condensed';margin:4px 0}.result p{color:#d5e6e8}.result small{display:block;margin-top:13px;color:var(--muted)}
@media(max-width:750px){.lobby{grid-template-columns:1fr}.hero{min-height:300px;padding:32px}.hero h1{font-size:90px;margin:25px 0 12px}.hero-cards{right:5%;bottom:-25%;transform:scale(.7) rotate(-13deg);transform-origin:right bottom}.hero p{max-width:270px}.lobby-form{padding:28px}.table{min-height:320px}.pile-wrap{min-width:85px;min-height:125px}.card{width:71px;height:101px}.hand .card{width:clamp(55px,16vw,85px);height:clamp(87px,25vw,120px)}.hand{gap:clamp(5px,1.5vw,12px)}.hand .card b{font-size:29px}.hand .card span{font-size:31px}}
@media(max-width:440px){.topbar{height:61px;padding:0 9px}.topbar .back,.topbar button{padding:0 8px;font-size:9px;min-height:40px}.brand>span{font-size:7px}.brand strong{font-size:24px}main{padding:12px 9px 38px}.hero{min-height:250px;padding:24px}.hero h1{font-size:76px}.hero p{font-size:13px}.hero-cards{right:-3%;bottom:-29%;transform:scale(.62) rotate(-13deg)}.lobby-form{padding:22px}.room-bar{padding:8px 10px}.room-bar>div{gap:5px;display:grid}.room-bar strong{font-size:21px}.room-bar button{font-size:9px;max-width:113px;line-height:1.2}.score-row{gap:4px}.player-panel,.round-tag{padding:8px}.player-panel strong{font-size:18px}.player-panel small,.round-tag small{font-size:9px}.round-tag{min-width:59px}.round-tag strong{font-size:20px}.table{min-height:265px;padding:23px 5px 12px;border-width:6px;border-radius:18px}.table:before{inset:4px;border-radius:12px}.table-top{gap:5px;min-height:112px}.reserve{min-width:29px;min-height:68px;font-size:14px}.reserve:before{font-size:13px}.pile-wrap{min-width:67px;min-height:105px;border-radius:9px}.pile-wrap .card{width:59px;height:87px;padding:5px 7px}.pile-wrap .card b{font-size:25px}.pile-wrap .card span{font-size:27px}.center-mark{font-size:29px}.flip{margin-top:8px;min-height:38px;font-size:9px}.table p{font-size:11px}.hand-area{margin-top:12px}.hand-heading h2{font-size:26px}.hand-heading>strong{font-size:13px}.hand{gap:5px;min-height:117px;padding:10px 1px 15px}.hand .card{width:calc((100% - 20px)/5);max-width:65px;height:95px;padding:5px 6px;border-radius:7px}.hand .card b{font-size:23px}.hand .card span{font-size:26px}.hand-footer{font-size:9px}}
.flip{min-height:44px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
.header-actions{display:flex;align-items:center;gap:6px}