*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #12141c;--panel: #1c2030;--panel-2: #252b40;--text: #e8eaf2;--muted: #8a90a6;--accent: #7c5cff;--accent-2: #ffb84c;--hit: #2ecc71}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow-x:hidden}.game{display:flex;flex-direction:column;min-height:100%}.topbar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--panel);position:sticky;top:0;z-index:5}.brand{font-weight:700;font-size:16px}.pot{color:var(--accent-2);font-size:13px;flex:1;text-align:center}.btn{border:0;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .15s,opacity .15s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-ghost{background:var(--panel-2);color:var(--text)}.center-note{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px;text-align:center;min-height:60vh}.center-note p{color:var(--muted)}.spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--panel-2);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.flash{position:fixed;top:64px;left:50%;transform:translate(-50%);background:var(--accent-2);color:#1a1304;font-weight:700;padding:10px 22px;border-radius:999px;z-index:10;animation:pop .25s ease-out}@keyframes pop{0%{transform:translate(-50%) scale(.7);opacity:0}}.lobby,.results{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}.lobby-actions{display:flex;gap:12px}.muted{color:var(--muted)}.small{font-size:12px}.board{flex:1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px}.drawpanel{display:flex;flex-direction:column;align-items:center;gap:8px}.lastnum{width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#9d83ff,var(--accent));display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;box-shadow:0 6px 24px #7c5cff73}.recent{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}.ball{width:32px;height:32px;border-radius:50%;background:var(--panel-2);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}.card{background:var(--panel);border-radius:12px;padding:10px}.card-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:13px}.card table{border-collapse:separate;border-spacing:3px}.card td{width:30px;height:30px;text-align:center;border-radius:6px;background:var(--panel-2);font-size:12px;font-weight:600;transition:background .3s}.card td.empty{background:transparent}.card td.hit{background:var(--hit);color:#06270f}.card-big td{width:38px;height:38px;font-size:15px}.others{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.others .card{opacity:.85}.others .card td{width:20px;height:20px;font-size:9px}.results ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:16px}.results .winner{font-size:20px;color:var(--accent-2)}.playerbar{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px;background:var(--panel);position:sticky;bottom:0}.chip{background:var(--panel-2);border-radius:999px;padding:4px 12px;font-size:12px}.chip-off{opacity:.45;text-decoration:line-through}.chip-spec{background:transparent;color:var(--muted)}@media(max-width:480px){.card-big td{width:30px;height:30px;font-size:12px}.lastnum{width:72px;height:72px;font-size:32px}}.game.okey{--felt-1: #1e6048;--felt-2: #14483a;--felt-3: #0b2f26;--wood-1: #7a5230;--wood-2: #5b3c22;--wood-3: #432c18;--bone-1: #fdfaf1;--bone-2: #f1e9d4;--bone-3: #e3d6b6;--bone-edge: #c8b88c;--gold: #d9b25c;--gold-bright: #f0cf8a;--ink: #1d1407;font-family:Manrope,Segoe UI,sans-serif;background:radial-gradient(140% 90% at 50% 18%,var(--felt-1) 0%,var(--felt-2) 52%,var(--felt-3) 100%);position:relative}.game.okey:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");box-shadow:inset 0 0 220px #0009}.game.okey>*{position:relative;z-index:1}.game.okey .topbar{background:linear-gradient(180deg,var(--wood-1),var(--wood-2) 70%,var(--wood-3));border-bottom:1px solid rgba(217,178,92,.55);box-shadow:0 6px 18px #00000073}.game.okey .brand{font-family:Cinzel,serif;font-weight:700;letter-spacing:.06em;font-size:17px;color:var(--gold-bright);text-shadow:0 1px 0 rgba(0,0,0,.6)}.game.okey .pot{color:#f3e6c4}.game.okey .btn-ghost{background:#0000004d;border:1px solid rgba(240,207,138,.35);color:#f3e6c4}.game.okey .btn-ghost:hover:not(:disabled){border-color:var(--gold-bright)}.game.okey .btn-primary{background:linear-gradient(180deg,var(--gold-bright),var(--gold) 60%,#b8924a);color:var(--ink);box-shadow:0 3px #8a6c33,0 6px 14px #0006;text-shadow:0 1px 0 rgba(255,255,255,.35)}.game.okey .btn-primary:hover:not(:disabled){filter:brightness(1.06)}.game.okey .btn{border-radius:999px}.game.okey .flash{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--ink);box-shadow:0 10px 28px #0000008c}.game.okey .lobby h1,.game.okey .results h1{font-family:Cinzel,serif;color:var(--gold-bright);letter-spacing:.04em}.game.okey .muted{color:#ecf5ee99}.okey-opponents{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:14px 14px 4px}.opp{display:flex;flex-direction:column;align-items:center;gap:5px;background:linear-gradient(180deg,#00000059,#00000038);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 16px 9px;min-width:118px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:border-color .25s,box-shadow .25s,transform .25s}.opp-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 28%,#3a7d62,#1d4a39);border:1px solid rgba(240,207,138,.35);font-weight:800;font-size:15px;color:#eef5ee}.opp-turn{border-color:var(--gold);transform:translateY(-2px);animation:turnGlow 1.6s ease-in-out infinite}@keyframes turnGlow{0%,to{box-shadow:0 0 0 1px #d9b25c80,0 0 18px #d9b25c38}50%{box-shadow:0 0 0 1px #f0cf8acc,0 0 32px #d9b25c6b}}.opp-off{opacity:.4;filter:grayscale(.6)}.opp-name{font-size:13px;font-weight:700;color:#eef5ee}.opp-meta{font-size:11px;color:#ecf5ee8c}.opp-meta em{color:var(--gold-bright);font-style:normal;font-weight:700}.okey-table{flex:1;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;justify-content:center;padding:14px;min-height:96px}.meld{display:inline-flex;gap:3px;align-items:flex-end;background:linear-gradient(180deg,#00000052,#0000002e);border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:7px 9px 8px;box-shadow:inset 0 2px 6px #00000059}button.meld{cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}.meld-target{border-color:var(--gold);box-shadow:inset 0 2px 6px #00000059,0 0 16px #d9b25c59}button.meld-target:hover{transform:translateY(-3px)}.okey-actions{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:0 auto;padding:9px 16px;width:fit-content;max-width:96%;background:#081a15b8;border:1px solid rgba(240,207,138,.22);border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 28px #0006}.okey-actions:empty{display:none}.take-box{display:inline-flex;align-items:center;gap:8px;background:#0000004d;border:1px dashed rgba(240,207,138,.4);border-radius:12px;padding:5px 9px}.okey-staged{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin:10px auto 0;padding:8px 14px;width:fit-content;max-width:96%;background:#d9b25c1a;border:1px solid rgba(217,178,92,.3);border-radius:14px}.okey-rack{margin-top:10px;padding:10px 12px 12px;background:repeating-linear-gradient(92deg,rgba(0,0,0,.07) 0 2px,transparent 2px 9px),linear-gradient(180deg,var(--wood-1) 0%,var(--wood-2) 55%,var(--wood-3) 100%);border-top:2px solid rgba(240,207,138,.5);box-shadow:0 -10px 30px #00000080,inset 0 1px #ffffff1f}.rack-tools{display:flex;gap:8px;justify-content:center;margin-bottom:10px}.rack-tools .btn{padding:6px 14px;font-size:12px}.rack{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:760px;margin:0 auto;padding:8px 10px 4px;background:linear-gradient(180deg,#00000047,#0000001f);border-radius:12px;box-shadow:inset 0 3px 8px #0006}.okey-tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;width:44px;height:60px;border-radius:8px;background:linear-gradient(180deg,#fff,#fdfdfd 60%,#efefef);font-family:"Baloo 2",Segoe UI,sans-serif;font-size:24px;font-weight:800;line-height:1;padding-top:7px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;box-shadow:inset 0 1.5px #fff,inset 0 -2px 4px #00000014,0 3px #cfcfcf,0 7px 12px #00000073;transition:transform .14s ease,box-shadow .14s ease,filter .1s ease}.okey-tile.tile-grab:active{filter:brightness(1.07) saturate(1.1)}.okey-tile:after{content:"";position:absolute;bottom:8px;left:50%;transform:translate(-50%);width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fafafa,#dedede 55%,#c2c2c2);box-shadow:inset 0 1px 2px #00000047,0 1px #ffffffe6}.okey-tile.tile-fake:after{width:12px;height:12px;background:radial-gradient(circle,#d6332c 0 22%,#ffffff 22% 44%,#d6332c 44% 64%,transparent 64%);box-shadow:none}.okey-tile.c-red{color:#d6332c}.okey-tile.c-yellow{color:#e2a800}.okey-tile.c-black{color:#1d1f24}.okey-tile.c-blue{color:#2b9fd8}@media(hover:hover){.rslot .okey-tile.tile-grab:hover:not(.tile-selected):not(.tile-dragging){transform:translateY(-3px)}}.tile-pop{animation:tilePop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes tilePop{0%{transform:scale(.55) translateY(-8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.okey-tile.tile-sm{width:30px;height:41px;font-size:15px;padding-top:5px;border-radius:6px;cursor:default;box-shadow:inset 0 1px #ffffffe6,inset 0 -2px 3px #8c6e3c47,0 2px 0 var(--bone-edge),0 4px 7px #0006}.okey-tile.tile-sm:after{width:5px;height:5px;bottom:6px}.okey-tile.tile-inline{width:24px;height:33px;font-size:12.5px;padding-top:4px;vertical-align:middle;margin:0 3px;border-radius:5px}.okey-tile.tile-inline:after{width:4px;height:4px;bottom:4px}.tile-selected{transform:translateY(-7px);box-shadow:0 0 0 2px var(--gold),inset 0 1.5px #fffffff2,inset 0 -3px 5px #8c6e3c4d,0 3px 0 var(--bone-edge),0 12px 18px #00000080}.tile-new{animation:tileDraw .45s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 0 2px #58c98a,inset 0 1.5px #fffffff2,inset 0 -3px 5px #8c6e3c4d,0 3px 0 var(--bone-edge),0 7px 12px #00000073}@keyframes tileDraw{0%{transform:translateY(-26px) scale(.7) rotate(-7deg);opacity:0}to{transform:translateY(0) scale(1) rotate(0);opacity:1}}.tile-joker{transform:rotate(90deg) scale(.88)}.tile-joker:after{display:none}.tile-joker.tile-selected{transform:rotate(90deg) scale(.95);box-shadow:0 0 0 2px var(--gold),inset 0 1.5px #fff,inset 0 -2px 4px #00000014,0 3px #cfcfcf,0 10px 16px #00000080}.game.okey .chip{background:#00000052;border:1px solid rgba(255,255,255,.08);color:#dfe9e2}.game.okey .chip-turn{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--ink);border-color:transparent;font-weight:700}.game.okey .playerbar{background:linear-gradient(0deg,var(--wood-3),var(--wood-2));border-top:1px solid rgba(240,207,138,.3)}.game.okey{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}.rack-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-top:18px;margin-top:-18px}.rack-grid{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:5px 3px;max-width:780px;min-width:540px;margin:0 auto;padding:12px 10px 8px;background:linear-gradient(180deg,#00000047,#0000001f);border-radius:12px;box-shadow:inset 0 3px 8px #0006}.rslot{position:relative;border-radius:8px;aspect-ratio:11 / 16;display:flex;align-items:stretch;justify-content:center;background:#ffffff09;box-shadow:inset 0 1px 3px #00000059;transition:background .12s,box-shadow .12s;cursor:pointer}.rslot-hover{background:#d9b25c38;box-shadow:inset 0 0 0 2px var(--gold),inset 0 1px 3px #00000059}.rslot .okey-tile{width:100%;height:100%;padding-top:0;justify-content:center;align-items:center;font-size:clamp(13px,3.6vw,21px)}.rslot .okey-tile:after{bottom:12%}.block-badge{position:absolute;top:-9px;left:2px;z-index:2;font-size:10px;font-weight:800;line-height:1;padding:2px 6px;border-radius:999px;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--ink);box-shadow:0 2px 5px #0006;pointer-events:none;white-space:nowrap}.badge-pair{background:linear-gradient(180deg,#9ad8b4,#58c98a)}.tile-in-block{box-shadow:0 0 0 2px #d9b25c8c,inset 0 1.5px #fffffff2,inset 0 -3px 5px #8c6e3c4d,0 3px 0 var(--bone-edge),0 7px 12px #00000073}.tile-grab{touch-action:none}.tile-dragging{opacity:.25;filter:grayscale(.4)}.tile-ghosted{opacity:.7;outline:2px dashed var(--gold);outline-offset:-2px}.game.okey>.drag-ghost,.drag-ghost{position:fixed!important;left:0;top:0;z-index:50;pointer-events:none;will-change:transform;filter:drop-shadow(0 14px 18px rgba(0,0,0,.55));visibility:hidden}.drag-ghost .okey-tile{width:44px;height:60px}.discard-zone{display:inline-flex;align-items:center;justify-content:center;min-width:150px;min-height:38px;padding:6px 14px;border:2px dashed rgba(240,207,138,.45);border-radius:12px;color:#f3e6c4;font-size:12.5px;font-weight:700;letter-spacing:.02em;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s,transform .15s}.discard-zone.drop-hover,.discard-zone:hover,.discard-zone.discard-armed{background:#c0392b4d;border-color:#e07b6d;transform:scale(1.04)}.discard-zone.discard-armed{animation:readyPulse 1.4s ease-in-out infinite}.take-label{font-size:11.5px;font-weight:700;color:#f3e6c4cc}.meld.drop-hover{border-color:var(--gold-bright);transform:translateY(-3px) scale(1.03)}.open-meter{display:inline-flex;align-items:center;padding:5px 13px;border-radius:999px;font-size:12.5px;font-weight:800;background:#00000059;color:#ecf5eea6;border:1px solid rgba(255,255,255,.12);transition:background .3s,color .3s}.open-meter.open-ready{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--ink);border-color:transparent;animation:readyPulse 1.4s ease-in-out infinite}.btn-ready{animation:readyPulse 1.4s ease-in-out infinite}@keyframes readyPulse{0%,to{box-shadow:0 0 #f0cf8a80}50%{box-shadow:0 0 0 7px #f0cf8a00}}.rotate-hint{display:none;margin:4px auto 0;padding:4px 12px;width:fit-content;font-size:11px;font-weight:700;border-radius:999px;background:#00000059;color:#f3e6c4d9;border:1px solid rgba(240,207,138,.25)}@media(max-width:640px){.game.okey .topbar{flex-wrap:wrap;gap:6px;padding:8px 10px}.game.okey .pot{font-size:11px;order:3;flex-basis:100%}.game.okey .brand{font-size:15px}.okey-tile{width:36px;height:50px;font-size:18px;padding-top:6px}.okey-tile:after{width:6px;height:6px;bottom:7px}.rack-grid{gap:4px 3px;padding:9px 6px 6px}.rslot{border-radius:6px}.rslot .okey-tile{font-size:16px}.opp{min-width:86px;padding:7px 9px}.opp-avatar{width:28px;height:28px;font-size:13px}.okey-actions{gap:7px;padding:8px 10px;border-radius:18px}.okey-actions .btn{padding:8px 13px;font-size:12.5px}.discard-zone{min-width:104px;min-height:34px;font-size:11px}.block-badge{font-size:9px;padding:1px 5px;top:-8px}.okey-table{min-height:60px;padding:8px;gap:6px}.meld{padding:4px 5px 5px;gap:2px}.okey-tile.tile-sm{width:24px;height:33px;font-size:12px}}@media(max-width:640px)and (orientation:portrait){.rotate-hint{display:block}}@media(max-height:480px){.okey-opponents{padding:6px 10px 2px;gap:8px}.opp{padding:4px 10px 5px;min-width:80px;gap:2px}.opp-avatar{display:none}.okey-table{min-height:44px;padding:6px 8px}.okey-actions{padding:6px 10px}.rack-grid{padding:7px 8px 5px;gap:3px 2px}.rack-tools{margin-bottom:5px}}