:root{color-scheme:dark;--ink:#f4f1e7;--muted:#a7b9b3;--felt:#0b2b25;--felt2:#071b18;--lime:#d9ff68;--coral:#ff7e66;--line:rgba(255,255,255,.13);font-family:Inter,ui-rounded,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 35%,#16493d 0,var(--felt) 38%,var(--felt2) 100%);color:var(--ink)}
button,select{font:inherit}button{border:0;cursor:pointer}.shell{min-height:100vh;padding:clamp(16px,3vw,34px);max-width:1280px;margin:auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.bubble-mark{width:34px;height:34px;border:2px solid var(--lime);border-radius:50%;box-shadow:10px -7px 0 -5px var(--coral),-7px 8px 0 -5px #76d7ff}.pill{border:1px solid var(--line);border-radius:99px;padding:9px 14px;background:rgba(0,0,0,.18);color:var(--muted)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;min-height:calc(100vh - 100px)}h1{font-size:clamp(4.5rem,14vw,10rem);line-height:.75;margin:0 0 28px;letter-spacing:-.075em}.accent{color:var(--lime)}.lead{font-size:clamp(1.05rem,2vw,1.4rem);line-height:1.55;color:var(--muted);max-width:600px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.primary,.secondary,.danger{padding:15px 22px;border-radius:14px;font-weight:800}.primary{background:var(--lime);color:#102015;box-shadow:0 8px 26px rgba(217,255,104,.18)}.secondary{background:#fff;color:#0e211d}.danger{background:var(--coral);color:#25100d}.primary:disabled,.secondary:disabled{opacity:.35;cursor:not-allowed}
.preview{position:relative;height:480px}.card{width:92px;height:128px;background:#f7f3e7;color:#14201d;border-radius:13px;padding:10px;display:flex;flex-direction:column;justify-content:space-between;font-weight:900;box-shadow:0 14px 30px rgba(0,0,0,.28);border:3px solid transparent;user-select:none}.card.red{color:#c43c36}.card .rank{font-size:1.55rem}.card .suit{font-size:2rem;align-self:center}.preview .card{position:absolute;left:50%;top:48%;transform-origin:50% 150%;transform:translate(-50%,-50%) rotate(var(--r)) translateY(-80px);animation:float 6s ease-in-out infinite alternate}.preview .card:nth-child(2){--r:-32deg}.preview .card:nth-child(3){--r:-16deg}.preview .card:nth-child(4){--r:0deg}.preview .card:nth-child(5){--r:16deg}.preview .card:nth-child(6){--r:32deg}
.game{display:grid;grid-template-rows:auto 1fr auto;min-height:calc(100vh - 68px);gap:14px}.status{text-align:center}.status h2{margin:5px 0;font-size:clamp(1.4rem,4vw,2.5rem)}.status p{margin:0;color:var(--muted)}
.opponents{display:flex;justify-content:center;gap:clamp(12px,4vw,50px);flex-wrap:wrap}.opponent{text-align:center;min-width:130px}.avatar{width:64px;height:64px;margin:auto;border-radius:50%;background:linear-gradient(135deg,#5ed8d1,#236b61);display:grid;place-items:center;font-weight:900;border:3px solid transparent;object-fit:cover}.opponent.active .avatar{border-color:var(--lime);box-shadow:0 0 0 4px rgba(217,255,104,.15)}.opponent.finished{opacity:.5}.tiny{font-size:.8rem;color:var(--muted);margin-top:5px}
.face-up-row{display:flex;justify-content:center;margin-top:8px;min-height:45px}.mini-card{width:31px;height:43px;margin-left:-6px;border-radius:5px;background:#f7f3e7;color:#14201d;border:1px solid #c9c3b5;display:grid;place-items:center;font-size:.72rem;font-weight:900;box-shadow:0 3px 8px #0005}.mini-card:first-child{margin-left:0}.mini-card.red{color:#c43c36}.mini-card.down{background:repeating-linear-gradient(45deg,#17483e,#17483e 4px,#1e5a4d 4px,#1e5a4d 8px);color:transparent;border-color:#d9d4c9}
.table{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;gap:16px;min-height:245px}.pile{position:relative;width:104px;height:142px}.pile .card{position:absolute}.back{background:repeating-linear-gradient(45deg,#17483e,#17483e 8px,#1e5a4d 8px,#1e5a4d 16px);border:4px solid #e9e1cd;color:transparent}.pile-count{position:absolute;bottom:-28px;width:100%;text-align:center;color:var(--muted);font-size:.82rem}.log{justify-self:start;width:min(220px,100%);font-size:.82rem;color:var(--muted);max-height:150px;overflow:auto}.log b{color:var(--ink)}
.player-zone{border-top:1px solid var(--line);padding-top:16px}.your-table{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:.78rem}.hand{display:flex;justify-content:center;min-height:138px;padding:8px 0 0}.hand .card{margin-left:-20px;transition:.15s transform,.15s border-color}.hand .card:first-child{margin-left:0}.hand button{background:none;padding:0}.hand button:hover .card,.hand button:focus-visible .card{transform:translateY(-8px)}.hand button.selected .card{transform:translateY(-16px);border-color:var(--lime)}.controls{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}.rules{max-width:760px;margin:40px auto}.rules h2{font-size:3rem}.rules li{margin:.75rem 0;color:var(--muted)}.setup{max-width:580px;margin:13vh auto 0;background:rgba(0,0,0,.22);border:1px solid var(--line);padding:30px;border-radius:24px}.setup h1{font-size:4rem;line-height:1}.field{display:grid;gap:8px;margin:22px 0}.field select,.field input{padding:14px;border:1px solid var(--line);background:#0a211d;color:var(--ink);border-radius:12px}
.account-card{max-width:620px;margin:9vh auto 0;background:rgba(0,0,0,.25);border:1px solid var(--line);padding:34px;border-radius:26px}.account-card h1{font-size:clamp(3rem,9vw,6rem);line-height:.85}.account-note{padding:14px;border:1px solid var(--line);border-radius:14px;color:var(--muted);margin:18px 0}.profile{display:flex;align-items:center;gap:9px}.profile-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:#25100d;font-weight:900}
.required{position:absolute;top:-32px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--lime);color:#102015;padding:5px 9px;border-radius:99px;font-size:.72rem;font-weight:900}.transparent-card{transform:translate(13px,-10px) rotate(6deg)}.play-flight{position:fixed;z-index:30;left:50%;top:50%;display:flex;pointer-events:none;animation:play-from-bottom .65s cubic-bezier(.16,.9,.35,1) both}.play-flight.ai{animation-name:play-from-top}.play-flight .card{margin-left:-58px}.play-flight .card:first-child{margin-left:0}@keyframes play-from-bottom{0%{transform:translate(-50%,55vh) scale(.75);opacity:0}65%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}@keyframes play-from-top{0%{transform:translate(-50%,-55vh) scale(.75);opacity:0}65%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#fff;color:#14201d;padding:12px 18px;border-radius:99px;font-weight:800;box-shadow:0 10px 30px #0008}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes float{to{margin-top:-12px}}@media(max-width:760px){.hero{grid-template-columns:1fr}.preview{display:none}.shell{padding:14px}.pill{font-size:.78rem}.table{grid-template-columns:1fr 1fr}.log{display:none}.table .pile:first-of-type{grid-column:1}.card{width:70px;height:100px;padding:7px}.card .rank{font-size:1.2rem}.card .suit{font-size:1.5rem}.pile{width:78px;height:108px}.hand{overflow-x:auto;justify-content:flex-start;padding-left:24px}.hand .card{margin-left:-14px}.opponents{gap:8px}.avatar{width:48px;height:48px}.opponent{min-width:92px}.controls .primary,.controls .secondary,.controls .danger{padding:12px 14px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}