:root{--ink:#173638;--deep:#083c3d;--sea:#0b6663;--foam:#eef8f4;--sand:#f3e6c9;--gold:#d29a36;--red:#b52d38;--white:#fff}[hidden]{display:none!important}*{box-sizing:border-box}body{margin:0;color:var(--ink);font:16px/1.45 ui-rounded,"Avenir Next",system-ui,sans-serif;background:linear-gradient(165deg,#f7fbf7,#d9efe9);min-height:100vh}.shell{max-width:1120px;margin:auto;padding:0 20px 50px}header{height:84px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:11px;align-items:center;color:var(--deep);text-decoration:none}.brand b{font-size:1.2rem}.brand small{display:block;letter-spacing:.08em}.mark{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--deep);color:white;font:bold 20px Georgia}.landing{display:grid;grid-template-columns:1.25fr .8fr;gap:44px;align-items:center;min-height:70vh}.hero h1{font:700 clamp(3rem,7vw,6rem)/.92 Georgia,serif;margin:.2em 0}.hero em{color:var(--sea);font-style:normal}.hero>p:last-child{font-size:1.15rem;max-width:610px}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:.75rem;font-weight:800;color:var(--sea)}.panel{background:rgba(255,255,255,.88);border:1px solid rgba(8,60,61,.15);border-radius:24px;padding:26px;box-shadow:0 18px 50px rgba(8,60,61,.1)}label{display:block;font-weight:700;margin:12px 0}input{display:block;width:100%;padding:14px;border:1px solid #9bb7af;border-radius:12px;font:inherit;margin-top:7px}button,.secondary{border:0;border-radius:999px;padding:12px 18px;font:700 1rem inherit;cursor:pointer;text-decoration:none;text-align:center}.primary{display:block;width:100%;background:var(--deep);color:white;margin:12px 0}.secondary{display:block;background:var(--sand);color:var(--ink);margin:10px 0}.ghost{background:transparent;color:var(--deep);border:1px solid #a7c0bb}.error{color:var(--red);min-height:1.5em}.invite{display:flex;gap:8px}.invite input{margin:0}.waiting{max-width:700px;margin:8vh auto;text-align:center}.waiting #waitingPlayers{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px}.waiting #waitingPlayers span{background:var(--foam);padding:8px 13px;border-radius:99px}.hint{color:#557}.statusbar{position:sticky;top:8px;z-index:5;display:flex;justify-content:space-between;gap:12px;background:rgba(255,255,255,.94);border:1px solid #bed3cd;border-radius:16px;padding:12px 16px;box-shadow:0 8px 30px #083c3d18}.badge{display:inline-block;background:var(--gold);border-radius:99px;padding:4px 9px;margin-right:8px;font-size:.8rem}.players{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px;margin:16px 0}.player{background:#fff;border-radius:16px;padding:12px;border:2px solid transparent}.player.turn{border-color:var(--gold)}.player.eliminated{opacity:.5}.lives{letter-spacing:2px;color:var(--red)}.floating{color:var(--sea);font-weight:800}.table{min-height:230px;background:radial-gradient(circle at 50% 40%,#187970,#07504f);border-radius:32px;display:flex;justify-content:center;align-items:center;gap:clamp(18px,8vw,80px);position:relative;padding:25px;box-shadow:inset 0 0 0 6px #d9bd7e}.pile{width:112px;height:156px;border-radius:13px;border:4px solid white;box-shadow:0 9px 16px #0028;display:flex;flex-direction:column;align-items:center;justify-content:center}.pile:disabled{opacity:1;cursor:default}.stock{background:repeating-linear-gradient(45deg,#0c4b4c,#0c4b4c 7px,#d2ad5c 8px,#d2ad5c 10px);color:#fff}.stock span{font:700 44px Georgia;text-shadow:0 2px 2px #000}.discard{width:136px;height:184px;justify-content:space-between;padding:11px 10px 13px;background:#fff;color:#172326;border:5px solid #fff;outline:3px solid #d9bd7e;box-shadow:0 12px 24px #002b,0 0 0 7px #073f3f66;transition:transform .18s ease,box-shadow .18s ease}.discard.red{color:var(--red)}.discard.black{color:#172326}.discard[data-actionable="true"]{cursor:pointer;box-shadow:0 15px 28px #002c,0 0 0 7px var(--gold)}.discard[data-actionable="true"]:hover,.discard[data-actionable="true"]:focus-visible{transform:translateY(-6px) scale(1.025);outline-color:#fff}.pile-label,.pile-action{font-family:Sora,ui-rounded,"Avenir Next",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.14em;font-weight:800}.pile-label{font-size:.7rem;color:var(--deep)}.pile-action{min-height:1.25em;font-size:.66rem;color:var(--sea)}.discard[data-actionable="true"] .pile-action{color:var(--deep);background:var(--sand);border-radius:999px;padding:3px 8px}.discard-face{display:grid;place-items:center;line-height:.8}.discard-rank{font:bold clamp(2.65rem,6vw,3.65rem)/.85 Georgia,serif}.discard-suit{font:2.65rem/1 Georgia,serif}.discard:disabled .discard-face,.discard:disabled .pile-label,.discard:disabled .pile-action{opacity:1}.prompt{position:absolute;bottom:8px;color:#fff;font-weight:800;text-align:center}.hand-wrap{margin-top:18px}.hand-head{display:flex;justify-content:space-between;align-items:center}.hand{display:flex;gap:12px;overflow-x:auto;padding:10px 3px 20px;scroll-snap-type:x proximity}.card{flex:0 0 150px;height:210px;border-radius:14px;background:#fff;border:2px solid #d6d8d3;box-shadow:0 8px 20px #17363822;padding:12px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;scroll-snap-align:center}.card.red{color:var(--red)}.card.black{color:#172326}.card .rank{font:bold 32px Georgia}.card .suit{font-size:64px;text-align:center}.card.selectable:hover,.card.selectable:focus{transform:translateY(-7px);border-color:var(--gold)}.actions{display:flex;gap:10px;flex-wrap:wrap}.actions button{width:auto}.result{margin-top:16px}.result h2{margin-top:0}.result-row{display:flex;justify-content:space-between;border-top:1px solid #ddd;padding:8px 0}.close{float:right;background:transparent;font-size:26px}dialog{max-width:650px;border:0;border-radius:22px;padding:25px}dialog::backdrop{background:#002b2b99}.outcome{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px;pointer-events:none;background:radial-gradient(circle at center,#f3e6c933 0,transparent 58%)}.outcome-card{position:relative;display:grid;gap:5px;min-width:min(360px,88vw);max-width:520px;padding:28px 34px;text-align:center;color:#fff;background:linear-gradient(145deg,#0b6663,#083c3d);border:2px solid #f3d99f;border-radius:26px;box-shadow:0 24px 70px #002f2f88,0 0 0 8px #ffffff2b;transform-origin:center}.outcome-card strong{font-family:"Blair DMK",Sora,sans-serif;font-size:clamp(1.75rem,6vw,3.1rem);line-height:1.02;letter-spacing:.02em}.outcome-kicker{color:#f6d993;font-size:.72rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase}.outcome[data-role="round-loss"] .outcome-card,.outcome[data-role="eliminated"] .outcome-card{background:linear-gradient(145deg,#7e2732,#3e1720);border-color:#efb0a6}.outcome[data-role="spectator"] .outcome-card{background:linear-gradient(145deg,#55736d,#294744);border-color:#c8ddd5}.outcome-particles{position:absolute;inset:0;overflow:hidden}.outcome-particles i{position:absolute;left:50%;top:50%;width:11px;height:20px;border-radius:3px;background:var(--gold);opacity:0}.outcome-particles i:nth-child(2n){background:#fff}.outcome-particles i:nth-child(3n){background:#78c8b9}.outcome.is-active .outcome-card{animation:outcome-card 4.2s cubic-bezier(.2,.8,.2,1) both}.outcome.is-active .outcome-particles i{animation:outcome-burst 1.45s ease-out both}.outcome.is-active .outcome-particles i:nth-child(2){--x:170px;--y:-190px;animation-delay:.05s}.outcome.is-active .outcome-particles i:nth-child(3){--x:-190px;--y:-130px;animation-delay:.1s}.outcome.is-active .outcome-particles i:nth-child(4){--x:220px;--y:20px;animation-delay:.14s}.outcome.is-active .outcome-particles i:nth-child(5){--x:-210px;--y:65px;animation-delay:.18s}.outcome.is-active .outcome-particles i:nth-child(6){--x:125px;--y:175px;animation-delay:.22s}.outcome.is-active .outcome-particles i:nth-child(7){--x:-110px;--y:190px;animation-delay:.26s}.outcome.is-active .outcome-particles i:nth-child(8){--x:20px;--y:-220px;animation-delay:.3s}.outcome[data-role="round-loss"].is-active .outcome-card,.outcome[data-role="eliminated"].is-active .outcome-card{animation-name:outcome-loss}.outcome[data-role="round-loss"] .outcome-particles i,.outcome[data-role="eliminated"] .outcome-particles i{background:#ef9c91}@keyframes outcome-card{0%{opacity:0;transform:translateY(32px) scale(.72) rotate(-2deg)}12%{opacity:1;transform:translateY(0) scale(1.06) rotate(1deg)}19%,82%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:translateY(-16px) scale(.96)}}@keyframes outcome-loss{0%{opacity:0;transform:translateY(-22px) scale(.86)}10%{opacity:1;transform:translateX(-7px) scale(1.03)}14%{transform:translateX(7px) scale(1.03)}18%,82%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:0;transform:translateY(16px) scale(.96)}}@keyframes outcome-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x,-150px)),calc(-50% + var(--y,-170px))) scale(1) rotate(260deg)}}.knock-banner{margin:-4px 0 14px;padding:10px 16px;border:1px solid #d29a36;border-radius:0 0 16px 16px;background:#fff5d8;color:var(--deep);font-weight:800;text-align:center;box-shadow:0 8px 22px #083c3d12}.knock-notice{width:min(460px,calc(100vw - 30px));text-align:center;color:var(--ink);background:linear-gradient(165deg,#fff,#eef8f4);border:2px solid #d9bd7e;border-radius:28px;box-shadow:0 30px 90px #002f2f99}.knock-notice[open]{animation:knock-notice-in .3s cubic-bezier(.2,.8,.2,1)}.knock-notice::backdrop{background:#032d2dcc;backdrop-filter:blur(3px)}.knock-notice h2{margin:.2em 0;font-family:"Blair DMK",Sora,sans-serif;font-size:clamp(1.7rem,7vw,2.7rem);color:var(--deep)}.knock-notice p:not(.eyebrow){font-size:1.1rem}.knock-notice .primary{min-height:54px;margin-top:22px}.knock-icon{display:grid;place-items:center;width:58px;height:58px;margin:-4px auto 8px;border-radius:50%;color:#fff;background:var(--sea);font-size:1.8rem;box-shadow:0 0 0 7px #0b666322}@keyframes knock-notice-in{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}#toast{position:fixed;right:18px;bottom:18px;background:#172f30;color:#fff;padding:12px 18px;border-radius:12px;opacity:0;transition:.2s}#toast.show{opacity:1}.game-list button{width:100%;margin:5px 0;background:var(--foam)}
@media(max-width:720px){.shell{padding:0 10px 34px}header{height:68px}.landing{display:block;min-height:auto}.hero{padding:30px 5px}.hero h1{font-size:3.4rem}.panel{padding:18px}.statusbar{font-size:.85rem}.table{min-height:210px;border-radius:22px;padding:21px 16px;gap:22px}.pile{width:92px;height:132px}.discard{width:118px;height:164px}.discard-rank{font-size:2.8rem}.discard-suit{font-size:2.35rem}.card{flex-basis:128px;height:180px}.card .suit{font-size:52px}.players{grid-template-columns:repeat(2,1fr)}.actions{background:#eef8f4e8;padding:8px;border-radius:14px}.brand small{font-size:.65rem}.outcome-card{min-width:min(330px,88vw);padding:24px 20px}.knock-banner{font-size:.9rem}}
@media(min-width:721px) and (max-width:900px){.landing{grid-template-columns:1fr 1fr;gap:24px}.hero h1{font-size:4.5rem}.card{flex-basis:145px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.discard,.card,#toast{transition:none!important}.outcome.is-active .outcome-card,.outcome.is-active .outcome-particles i,.knock-notice[open]{animation:none!important}.outcome-particles{display:none}}