:root{font-family:Comic Sans MS,Comic Sans,Trebuchet MS,Segoe UI,system-ui,-apple-system,Roboto,Arial,sans-serif;line-height:1.5;font-weight:400}body{margin:0;background:radial-gradient(1200px 700px at 50% 20%,rgba(34,197,94,.15),transparent 60%),radial-gradient(900px 600px at 20% 70%,rgba(56,189,248,.08),transparent 55%),radial-gradient(900px 600px at 80% 80%,rgba(248,113,113,.06),transparent 60%),#05070c;color:#e8eef9}body:has(.table){overflow:hidden}.app{max-width:1040px;margin:0 auto;padding:.75rem}.game-title{margin:.5rem 0 .25rem;font-size:18px;letter-spacing:.6px;text-transform:uppercase}.brand-link{position:fixed;top:10px;left:10px;z-index:60;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.14);background:#00000038;color:#e8eef9f0;border-radius:999px;padding:10px 14px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;box-shadow:0 18px 40px #0000006b,inset 0 1px #ffffff1a;transition:transform .12s ease,border-color .12s ease,background .12s ease}.brand-link:hover{transform:translateY(-1px);border-color:#ffffff3d;background:#0000004d}.brand-link:focus-visible{outline:3px solid rgba(56,189,248,.75);outline-offset:3px}.create-screen{min-height:calc(100vh - 1.5rem);display:grid;align-content:center;justify-items:center;gap:14px}.create-screen .game-title{margin:0;font-size:22px;letter-spacing:1px}.create-card{width:min(520px,100%);border-radius:18px;padding:1.1rem 1.05rem;box-shadow:0 28px 80px #0000008c,inset 0 1px #ffffff1f}.create-card__title{font-weight:900;letter-spacing:.6px;text-transform:uppercase;opacity:.95;margin-bottom:10px}.create-form{display:grid;gap:12px}.field{display:grid;gap:6px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field__label{font-size:12px;font-weight:900;letter-spacing:.4px;opacity:.85}.field__control{width:100%;box-sizing:border-box;border-radius:14px;padding:12px;background:#00000038;border:1px solid rgba(255,255,255,.14);color:#e8eef9f5;outline:none;box-shadow:inset 0 1px #ffffff14}.field__control:focus-visible{outline:3px solid rgba(56,189,248,.75);outline-offset:2px}.primary-button{width:100%;border:0;border-radius:16px;padding:12px 14px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:#041018;background:linear-gradient(180deg,#38bdf8,#22c55e);box-shadow:0 18px 40px #00000073;transition:transform .12s ease,filter .12s ease,opacity .12s ease}.primary-button:hover{transform:translateY(-1px);filter:brightness(1.05)}.primary-button:disabled{opacity:.65;cursor:not-allowed}.panel{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:1rem;margin:.75rem 0}.hint{opacity:.85}input,select,button{font:inherit}button{cursor:pointer}.hand{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;list-style:none}.ui-grid{display:grid;gap:12px}.ui-grid--actions{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:12px 0 16px}.ui-grid--hand{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}.ui-section-title{margin:14px 0 10px}.ui-hint{color:#e8eef9b3;font-size:12px;margin-left:8px}.ui-card{background:linear-gradient(180deg,#ffffff1a,#ffffff0f);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:10px;cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:0 12px 26px #00000059,inset 0 1px #ffffff1f;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;color:#eef5ff}.ui-card:focus-visible{outline:2px solid rgba(56,189,248,.8);outline-offset:2px}.ui-card:hover{transform:translateY(-2px);border-color:#ffffff47;box-shadow:0 18px 40px #0000006b,inset 0 1px #ffffff24}.ui-card--danger{border-color:#f8717159}.ui-card--danger:hover{border-color:#f87171b3}.ui-card--disabled,.ui-card--disabled:hover{opacity:.45;cursor:not-allowed;transform:none;box-shadow:0 12px 26px #00000059,inset 0 1px #ffffff1f;border-color:#ffffff29}.ui-card__label{display:inline-flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;font-size:13px}.ui-card__icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:10px;background:#0003;border:1px solid rgba(255,255,255,.14)}.ui-card__desc{margin-top:6px;font-size:11px;color:#e8eef9b3;line-height:1.2}.table{position:relative;height:calc(100svh - 1.5rem);min-height:0;border-radius:26px;padding:10px;background:radial-gradient(900px 600px at 50% 20%,rgba(34,197,94,.2),transparent 65%),radial-gradient(1100px 700px at 50% 110%,rgba(16,185,129,.14),transparent 65%),linear-gradient(180deg,#ffffff0f,#ffffff08);border:1px solid rgba(255,255,255,.14);box-shadow:0 28px 80px #0000008c,inset 0 1px #ffffff1f;overflow:hidden}.table:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.12),transparent 60%),radial-gradient(2px 2px at 70% 60%,rgba(255,255,255,.08),transparent 60%),radial-gradient(2px 2px at 45% 80%,rgba(255,255,255,.06),transparent 60%);opacity:.35;pointer-events:none}.table__top{position:relative;z-index:1;display:grid;gap:14px}.table__bottom{position:relative;z-index:1;margin-top:10px}.opponents{position:relative;min-height:44px}.opponent{position:absolute;display:grid;gap:6px;justify-items:center}.opponent__label{font-size:11px;font-weight:900;letter-spacing:.4px;color:#e8eef9b8;background:#0003;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:3px 8px}.opponent__hand{display:flex;align-items:center;gap:4px}.mini-card-back{width:22px;height:32px;border-radius:8px;background:radial-gradient(10px 10px at 30% 30%,rgba(255,255,255,.1),transparent 60%),linear-gradient(135deg,#38bdf838,#22c55e24),#111827c7;border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 24px #00000059,inset 0 1px #ffffff1a}.opponent__more{font-size:11px;font-weight:900;color:#e8eef9db;padding:2px 6px;border-radius:999px;background:#0000003d;border:1px solid rgba(255,255,255,.12)}.opponents--2 .opponent--1{top:0;left:50%;transform:translate(-50%)}.opponents--3 .opponent--1{top:0;left:18%;transform:translate(-50%)}.opponents--3 .opponent--2{top:0;left:82%;transform:translate(-50%)}.opponents--4 .opponent--1{top:0;left:50%;transform:translate(-50%)}.opponents--4 .opponent--2{top:10px;left:8px;transform:none;justify-items:start}.opponents--4 .opponent--3{top:10px;right:8px;left:auto;transform:none;justify-items:end}.hud{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.hud__title{font-weight:900;letter-spacing:.6px;font-size:18px;text-transform:uppercase;opacity:.95}.center-zones{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start;justify-items:center;padding:6px 0 2px}.zone--pile{justify-self:end}.zone--discard{justify-self:center}.zone--spacer{width:min(320px,100%)}.zone{width:min(320px,100%);display:grid;gap:8px;justify-items:center}.zone__label{font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:#e8eef9bf}.card-stack{position:relative;width:var(--card-w, 108px);height:var(--card-h, 152px)}.card-stack__count{position:absolute;bottom:10px;right:10px;padding:4px 10px;border-radius:999px;background:#00000073;border:1px solid rgba(255,255,255,.18);font-weight:700;font-size:12px}.card-back{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:18px;background:radial-gradient(12px 12px at 20% 30%,rgba(255,255,255,.1),transparent 60%),radial-gradient(10px 10px at 70% 60%,rgba(255,255,255,.08),transparent 60%),linear-gradient(135deg,#38bdf859,#22c55e33),#111827d9;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 45px #00000080,inset 0 1px #ffffff2e;transform:none}.card-back:after{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:14px;border:1px dashed rgba(255,255,255,.28);opacity:.8}.is-clickable{cursor:pointer;pointer-events:auto}.card-back.is-clickable{transform:rotate(-2deg)}.is-clickable:hover{filter:drop-shadow(0 0 26px rgba(56,189,248,.26));transform:translateY(-2px) rotate(-2deg)}.playing-card.is-clickable:hover{transform:rotate(1.5deg) translateY(-3px);box-shadow:0 26px 70px #0000008c,inset 0 1px #ffffffb3}.is-not-clickable{cursor:default;pointer-events:none}.card-back.is-not-clickable{filter:none;box-shadow:0 18px 45px #00000080,inset 0 1px #ffffff2e}.playing-card.is-not-clickable{box-shadow:0 18px 50px #00000073,inset 0 1px #ffffffb3;transform:rotate(1.5deg)}.playing-card.is-not-clickable:after{content:none}.card-back:focus-visible,.playing-card:focus-visible{outline:3px solid rgba(56,189,248,.75);outline-offset:3px}.card-slot{width:var(--card-w, 108px);height:var(--card-h, 152px);border-radius:18px;background:#0000002e;border:1px dashed rgba(255,255,255,.18);display:grid;place-items:center}.card-slot__empty{font-size:12px;color:#e8eef9a6}.action-row{display:flex;justify-content:center;gap:10px;margin-top:4px}.playing-card{width:var(--card-w, 108px);height:var(--card-h, 152px);border-radius:18px;background:radial-gradient(120px 80px at 50% 40%,rgba(0,0,0,.04),transparent 60%),linear-gradient(180deg,#fff,#f4f7ff);color:#0b1020;border:1px solid rgba(15,23,42,.2);box-shadow:0 18px 50px #00000073,inset 0 1px #ffffffb3;position:relative;-webkit-user-select:none;user-select:none}.playing-card__face{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:clamp(30px,calc(var(--card-w, 108px) * .34),40px);font-weight:900;letter-spacing:1px}.playing-card__corner{position:absolute;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:11px;font-weight:800;opacity:.85;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playing-card__corner--tl{top:10px;left:10px}.playing-card__corner--br{bottom:10px;right:10px;transform:rotate(180deg)}.playing-card__ribbon{position:absolute;top:12px;right:-6px;background:#38bdf8f2;color:#031018;font-weight:900;letter-spacing:.6px;font-size:10px;padding:6px 10px;border-radius:999px;box-shadow:0 10px 22px #00000040}.playing-card--top{transform:rotate(1.5deg)}.playing-card--hand{cursor:pointer;position:relative;z-index:var(--hand-z, 0);transform:rotate(var(--rot, 0deg)) translateY(var(--lift, 0px));transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}.playing-card--hand:hover{z-index:50;transform:rotate(var(--rot, 0deg)) translateY(calc(var(--lift, 0px) - 10px)) scale(1.02);box-shadow:0 28px 70px #0000008c,inset 0 1px #ffffffb3}.playing-card--hand:focus-visible,.playing-card--hand:active{z-index:50;transform:rotate(var(--rot, 0deg)) translateY(calc(var(--lift, 0px) - 12px)) scale(1.03);box-shadow:0 32px 82px #0000009e,inset 0 1px #ffffffb3}.playing-card--highlight{filter:drop-shadow(0 0 22px rgba(56,189,248,.35));border-color:#38bdf873}.playing-card--disabled,.playing-card--disabled:hover{cursor:not-allowed;transform:rotate(var(--rot, 0deg)) translateY(var(--lift, 0px));filter:none}.playing-card:focus-visible{outline:3px solid rgba(56,189,248,.75);outline-offset:3px}.hand-hint{display:flex;justify-content:center;gap:10px;margin:6px 0 8px;flex-wrap:wrap}.hand-hint__pill{font-size:12px;padding:6px 10px;border-radius:999px;background:#00000040;border:1px solid rgba(255,255,255,.14);color:#e8eef9db}.hand-fan{display:flex;justify-content:center;align-items:flex-end;gap:0;padding:6px 0 0;flex-wrap:nowrap;overflow:visible}.playing-card--hand{margin-left:-26px}.playing-card--hand:first-child{margin-left:0}.playing-card--dragging{z-index:80;transition:none;cursor:grabbing}.playing-card--selected{z-index:70;transform:rotate(var(--rot, 0deg)) translateY(calc(var(--lift, 0px) - 14px)) scale(1.03);box-shadow:0 34px 86px #000000a8,inset 0 1px #ffffffb3;outline:3px solid rgba(56,189,248,.55);outline-offset:3px}@media(max-width:520px){.app{padding:.35rem}.table{height:calc(100svh - .7rem);padding:8px;border-radius:18px}.table__top{gap:8px}.table__bottom{margin-top:6px}.center-zones{gap:8px;padding:4px 0 0}.table{--card-w: clamp(86px, 22vw, 104px);--card-h: clamp(122px, 31vw, 148px)}.zone--spacer{width:min(180px,40vw)}.opponents{min-height:38px}.mini-card-back{width:18px;height:26px;border-radius:7px}.playing-card--hand{margin-left:-34px}}@media(min-width:680px){.app{padding:1.25rem}.table{height:auto;min-height:70vh;padding:18px}.center-zones{grid-template-columns:1fr auto 1fr}.action-row{justify-content:flex-end}.playing-card,.card-stack,.card-slot{width:130px;height:180px}.playing-card__face{font-size:44px}.mini-card-back{width:24px;height:34px}}.icon-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.14);background:#0000003d;color:#e8eef9eb;border-radius:999px;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;box-shadow:0 18px 40px #0000006b,inset 0 1px #ffffff1a;transition:transform .12s ease,border-color .12s ease,background .12s ease}.icon-button:hover{transform:translateY(-1px);border-color:#ffffff3d;background:#0000004d}.icon-button:focus-visible{outline:3px solid rgba(56,189,248,.75);outline-offset:3px}.icon-button--leave{position:fixed;top:10px;right:10px;z-index:50}