: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}body:has(.table) .brand-link{width:44px;height:44px;padding:0;display:grid;place-items:center;font-size:0;letter-spacing:0}body:has(.table) .brand-link:after{content:"K";font-size:14px;font-weight:1000;letter-spacing:.2px}.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;--card-w: 92px;--card-h: 128px;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--gameover{display:grid;place-items:center}.gameover-card{position:relative;width:min(520px,92%);border-radius:22px;padding:22px 18px 18px;background:radial-gradient(900px 600px at 50% 10%,rgba(56,189,248,.18),transparent 60%),radial-gradient(900px 600px at 20% 70%,rgba(34,197,94,.14),transparent 60%),#00000038;border:1px solid rgba(255,255,255,.14);box-shadow:0 38px 120px #0009,inset 0 1px #ffffff1f;text-align:center;overflow:hidden}.gameover-burst{position:absolute;top:-40%;right:-40%;bottom:-40%;left:-40%;background:conic-gradient(from 180deg,#38bdf800,#38bdf838,#22c55e2e,#f8717129,#38bdf800);filter:blur(10px);opacity:.7;animation:gameover-spin 8s linear infinite;pointer-events:none}@keyframes gameover-spin{to{transform:rotate(360deg)}}.gameover-title{position:relative;z-index:1;font-weight:900;letter-spacing:1px;text-transform:uppercase;font-size:22px}.gameover-subtitle{position:relative;z-index:1;margin-top:6px;color:#e8eef9e0;font-weight:800}.gameover-winner{display:inline-block;padding:2px 10px;border-radius:999px;background:#ffffff1a;border:1px solid rgba(255,255,255,.14)}.gameover-trophy{position:relative;z-index:1;margin:16px auto 10px;color:#ffd700f2;filter:drop-shadow(0 16px 34px rgba(0,0,0,.55))}.gameover-hint{position:relative;z-index:1;margin-top:10px;font-size:12px;color:#e8eef9bf}.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:34px}.opponents{position:relative;min-height:122px;padding-top:14px}.opponent{position:absolute;display:grid;gap:6px;justify-items:center}@keyframes turn-glow-pulse{0%{opacity:.65;transform:scale(1);filter:blur(0px)}55%{opacity:1;transform:scale(1.04);filter:blur(.2px)}to{opacity:.65;transform:scale(1);filter:blur(0px)}}.game-avatar{display:grid;justify-items:center;gap:12px;-webkit-user-select:none;user-select:none}.game-avatar--not-active-turn{opacity:.7}.game-avatar__circle{position:relative;width:42px;height:42px;border-radius:999px;background:radial-gradient(140% 140% at 30% 20%,rgba(56,189,248,.26),transparent 60%),radial-gradient(160% 160% at 70% 80%,rgba(168,85,247,.18),transparent 62%),#0000004d;border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 22px #00000052,inset 0 1px #ffffff1a,inset 0 -6px 14px #00000085;display:grid;place-items:center}.game-avatar--active-turn .game-avatar__circle:after{content:"";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px;border-radius:999px;border:3px solid rgba(255,215,0,.95);box-shadow:0 0 22px #ffd70073,0 0 46px #ffffff29;animation:turn-glow-pulse 1.25s ease-in-out infinite;pointer-events:none}.game-avatar__glyph{font-weight:1000;letter-spacing:.6px;text-transform:uppercase;font-size:15px;color:#e8eef9f2;text-shadow:0 10px 22px rgba(0,0,0,.55);font-family:ui-rounded,SF Pro Rounded,Nunito,Trebuchet MS,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}.game-avatar__name{max-width:160px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:1000;letter-spacing:.25px;font-size:12px;color:#e8eef9e0;font-family:ui-rounded,SF Pro Rounded,Nunito,Trebuchet MS,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}.game-avatar__fan{position:relative;height:66px;width:156px;display:grid;place-items:end center}.game-avatar__mini-card{position:absolute;bottom:0;left:50%;width:46px;height:64px;border-radius:9px;background:radial-gradient(12px 12px at 20% 30%,rgba(255,255,255,.14),transparent 60%),radial-gradient(10px 10px at 70% 60%,rgba(255,255,255,.1),transparent 60%),linear-gradient(135deg,#38bdf87a,#a855f747),#111827eb;border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 18px #0000004d,inset 0 1px #ffffff24;transform-origin:50% 100%;transform:translate(calc(-50% + (var(--rel, 0) * var(--step, 18px)))) rotate(calc(var(--ang, 0) * 1deg)) translateY(calc(var(--lift, 0) * -2px));filter:saturate(1.06) contrast(1.06)}.game-avatar__mini-card:after{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:8px;border:1px dashed rgba(255,255,255,.26);opacity:.65}.game-avatar__more{position:absolute;right:-6px;bottom:-6px;min-width:26px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:1000;color:#e8eef9eb;background:#0000005c;border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 22px #00000059,inset 0 1px #ffffff1a}.hand-zone{position:relative;padding-top:58px}.hand-zone--not-active-turn{opacity:.7}.self-banner{position:absolute;left:50%;top:6px;transform:translate(-50%);z-index:90;pointer-events:none}.self-banner .game-avatar__circle{width:44px;height:44px}.self-banner .game-avatar__glyph{font-size:13px}.self-banner .game-avatar__name{max-width:140px}.opponents--2 .opponent--1{top:10px;left:50%;transform:translate(-50%)}.opponents--3 .opponent--1{top:10px;left:18%;transform:translate(-50%)}.opponents--3 .opponent--2{top:10px;left:82%;transform:translate(-50%)}.opponents--4 .opponent--1{top:10px;left:50%;transform:translate(-50%)}.opponents--4 .opponent--2{top:20px;left:8px;transform:none;justify-items:start}.opponents--4 .opponent--3{top:20px;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:center;justify-items:center;padding:34px 0 18px}.zone--pile{justify-self:end}.zone--discard{justify-self:center;position:relative}.zone--spacer{width:min(320px,100%)}.zone--spacer{position:relative;justify-self:end;display:flex;align-items:center;justify-content:flex-end}.action-hud{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-right:10px;padding-top:6px}.action-hud--spacer{position:static;padding:0;gap:12px}.action-hud__btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.14);background:radial-gradient(120% 160% at 30% 20%,rgba(56,189,248,.18),transparent 55%),#0003;color:#e8eef9eb;width:52px;height:44px;border-radius:16px;display:grid;place-items:center;cursor:pointer;box-shadow:0 18px 40px #0006,inset 0 1px #ffffff1a;transition:transform .12s ease,border-color .12s ease,background .12s ease,box-shadow .12s ease,filter .12s ease}.action-hud__btn:hover{transform:translateY(-1px);border-color:#ffffff3d;background:radial-gradient(120% 160% at 30% 20%,rgba(56,189,248,.22),transparent 55%),#00000042;box-shadow:0 22px 52px #00000073,inset 0 1px #ffffff1f}.action-hud__btn:active{transform:translateY(0);filter:brightness(.98)}.action-hud__btn:focus-visible{outline:3px solid rgba(56,189,248,.75);outline-offset:3px}.action-hud__btn--k{font-weight:1000;font-size:16px;letter-spacing:.6px;font-family:ui-rounded,SF Pro Rounded,Nunito,Trebuchet MS,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(120% 160% at 30% 20%,rgba(255,215,0,.16),transparent 55%),radial-gradient(140% 160% at 70% 80%,rgba(56,189,248,.18),transparent 60%),#0003}.action-hud__btn--pass{width:44px;border-radius:999px}.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:26px}.hand-zone{padding-top:54px}.center-zones{gap:8px;padding:22px 0 0}.center-zones{padding-bottom:14px}.table{--card-w: clamp(78px, 20vw, 92px);--card-h: clamp(108px, 28vw, 128px)}.zone--spacer{width:var(--card-w, 108px)}.action-hud{padding-right:2px;gap:8px}.action-hud__btn{width:46px;height:40px;border-radius:14px}.action-hud__btn--pass{width:40px}.action-hud--spacer{gap:10px}.opponents{min-height:102px;display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:10px 12px;padding:12px 56px 0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.opponent{position:relative;flex:0 0 auto;scroll-snap-align:center;top:auto;left:auto;right:auto;transform:none}.opponents::-webkit-scrollbar{height:0}.opponents{scrollbar-width:none}.game-avatar__circle{width:40px;height:40px}.game-avatar__name{max-width:120px;font-size:11px;letter-spacing:.2px}.game-avatar__fan{width:148px;height:62px}.game-avatar__mini-card{width:44px;height:60px;border-radius:8px}.opponents--2 .opponent--1,.opponents--3 .opponent--1,.opponents--3 .opponent--2,.opponents--4 .opponent--1,.opponents--4 .opponent--2,.opponents--4 .opponent--3{top:auto;left:auto;right:auto;transform:none;justify-items:center}.self-banner{top:-12px}.self-banner .game-avatar__circle{width:40px;height:40px}.self-banner .game-avatar__name{max-width:124px;font-size:11px}.hand-hint{padding-left:66px;padding-right:66px}.action-hud--discard{gap:10px}.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:112px;height:156px}.playing-card__face{font-size:44px}}.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}