.sound-toggle{background:var(--btn,#00000040);width:36px;min-width:36px;height:36px;color:var(--ink,#fff);cursor:pointer;border:0;border-radius:50%;place-items:center;padding:0;display:inline-grid}.sound-toggle svg{width:20px;height:20px}.sound-toggle[aria-pressed=true]{opacity:.7}.sound-toggle:focus-visible{outline:3px solid var(--focus,#ffd54a);outline-offset:2px}:root{--lamp:radial-gradient(ellipse 70% 50% at 50% 42%, #fffae121, transparent 70%);--vignette:radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, #00000080)}.card{width:var(--cw);height:var(--ch);border-radius:calc(var(--cw) * .08);border:1px solid var(--card-edge,#c9cfc6);background:var(--card,#fdfdfb);font:inherit;padding:0;position:relative;overflow:hidden;box-shadow:0 1px 2px #00000059,0 5px 12px #00000038}button.card{cursor:pointer}.card:not(.back){background-image:repeating-linear-gradient(0deg,#00000005 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#00000004 0 1px,#0000 1px 3px)}.card:after{content:"";border-radius:inherit;pointer-events:none;z-index:2;background:linear-gradient(155deg,#fff3,#fff0 28%),linear-gradient(#0000 88%,#0000000f);position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff80}.card.back:after{box-shadow:none;background:linear-gradient(155deg,#ffffff47,#fff0 38%)}.card{container-type:inline-size}.card .face{pointer-events:none;background:50%/100% 100% no-repeat;display:none;position:absolute;inset:0}@container (width>=72px){.card .face{display:block}.card .corner,.card .pip{display:none}}@container (width>=44px) and (width<=71.99px){.card .face.court{background-position:50% 58%;background-size:150% 142%;border-radius:4px;display:block;inset:30% 7% 5%;box-shadow:inset 0 0 0 1px #0000001f}.card .face.court~.pip{display:none}.card .pip:has(~.face.court){display:none}}.card.red{color:var(--red,#c0262d)}.card.black{color:var(--black,#16181a)}.card .corner{letter-spacing:-.02em;font-weight:700;line-height:1;font-size:calc(var(--cw) * .24);position:absolute;top:3%;left:6%}.card .pip{font-size:calc(var(--cw) * .5);line-height:1;position:absolute;bottom:4%;right:8%}.card.back{background:var(--card-back-image,repeating-linear-gradient(45deg, var(--back-a,#2d4f9e) 0 6px, var(--back-b,#22407f) 6px 12px)) center / 100% 100% no-repeat;border:2px solid var(--card,#fdfdfb)}.card:focus-visible{outline:3px solid var(--focus,#ffd54a);outline-offset:1px}:root{--felt-a:#1e6b4f;--felt-b:#0d3a2a;--rail:#4a2c14;--ink:#f4f7f2;--gold:#ffd54a;--btn:#0000004d;--focus:#ffd54a;--dialog:#fdfdfb;--dialog-ink:#16181a;--dialog-line:#0000001f;--t-yellow:#d99a00;--t-blue:#1565c0;--t-black:#1d1d1f;--t-red:#c62828;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--dialog:#1f2622;--dialog-ink:#eef2ec;--dialog-line:#ffffff24}}:root[data-theme=dark]{--dialog:#1f2622;--dialog-ink:#eef2ec;--dialog-line:#ffffff24}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--lamp), var(--vignette), var(--felt-texture,none), radial-gradient(ellipse at 50% 40%, var(--felt-a), var(--felt-b));color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font:14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app.okey{--tw:clamp(20px, min(5.8vw, 5.2vh), 46px);--th:calc(var(--tw) * 1.49);height:100dvh;box-shadow:inset 0 0 0 clamp(6px, 1.6vw, 14px) var(--rail), inset 0 0 0 calc(clamp(6px, 1.6vw, 14px) + 2px) #00000073;grid-template-rows:auto auto 1fr auto auto auto;grid-template-columns:minmax(0,1fr);gap:4px;padding:8px;display:grid}.okey-bar{justify-content:center;align-items:center;gap:6px;padding-top:4px;display:flex}.btn{font:inherit;color:var(--ink);background:var(--btn);cursor:pointer;border:0;border-radius:9px;min-height:34px;padding:7px 12px;box-shadow:inset 0 1px #ffffff1f,0 2px 6px #0000004d}.btn:disabled{opacity:.45;cursor:default}.btn:focus-visible{outline:3px solid var(--focus);outline-offset:1px}.btn.primary{color:#fff;background:#1d6b3c;font-weight:700}.btn.primary.ready:not(:disabled){animation:1s ease-in-out infinite alternate okey-glow}.btn.gold{background:var(--gold);color:#2b2100;font-weight:700}.btn[aria-pressed=true]{background:var(--gold);color:#2b2100;font-weight:700;box-shadow:inset 0 -2px #00000040,0 2px 6px #0000004d}@keyframes okey-glow{to{box-shadow:0 0 0 3px #ffd54acc,0 0 16px #ffd54ab3}}.sound-toggle{width:34px;height:34px}.okey-score{flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;font-size:13px;display:flex}.okey-score .chip{background:#0000004d;border-radius:10px;gap:5px;padding:2px 9px;display:inline-flex}.okey-score .chip.on{background:var(--gold);color:#2b2100}.okey-score .round{opacity:.8;margin-left:4px}.okey-msg{text-align:center;text-shadow:0 1px 2px #0009;min-height:1.3em;margin:0;font-size:13px;font-weight:600}.card.tile{width:var(--tw);height:var(--th);border-radius:calc(var(--tw) * .13);padding:0 0 calc(var(--th) * .1);background:var(--tile-img,linear-gradient(180deg, #fffdf6, #f3ead2 70%, #e5d8b5)) center / 100% 100% no-repeat;color:var(--c,#222);border:0;flex-direction:column;justify-content:center;align-items:center;gap:6%;font-family:Segoe UI,system-ui,sans-serif;display:flex;overflow:hidden;box-shadow:0 3px 6px #00000061;container-type:normal}button.card.tile{cursor:grab}.card.tile .num{font-weight:900;font-size:calc(var(--tw) * .62);letter-spacing:-.03em;text-shadow:0 1px #ffffffbf,0 -.5px #00000059;line-height:1}.card.tile .dot{width:calc(var(--tw) * .2);height:calc(var(--tw) * .2);opacity:.9;background:currentColor;border-radius:50%;box-shadow:inset 0 1px 1px #00000059,0 1px #ffffffb3}.card.tile.yellow{--c:var(--t-yellow)}.card.tile.blue{--c:var(--t-blue)}.card.tile.black{--c:var(--t-black)}.card.tile.red{--c:var(--t-red)}.card.tile.false-joker .sym{font-size:calc(var(--tw) * .7);color:#2e7d32;line-height:1}.card.tile.wild{box-shadow:0 3px 6px #00000061,inset 0 0 0 2px #ffc400cc}.card.tile.wild:after{content:"★";font-size:calc(var(--tw) * .3);color:#e0a800;position:absolute;top:2%;right:6%}.card.back.tile-back{width:var(--tw);height:var(--th);border-radius:calc(var(--tw) * .13);background:var(--tile-img,linear-gradient(180deg, #f6efd9, #e1d2a8)) center / 100% 100% no-repeat;border:0;box-shadow:0 2px 4px #00000052}.okey-table{grid-template:"tl top tr""left center right"minmax(0,1fr)"bl bottom br"/auto minmax(0,1fr) auto;gap:4px;min-width:0;min-height:0;display:grid;position:relative}.okey-seat{flex-direction:column;justify-content:center;align-items:center;gap:3px;min-width:0;display:flex}.okey-seat.top{grid-area:top}.okey-seat.left{grid-area:left}.okey-seat.right{grid-area:right}.okey-seat.bottom{grid-area:bottom}.okey-name{background:#00000052;border-radius:10px;align-items:center;gap:5px;padding:2px 8px;font-size:12px;font-weight:700;display:flex}.okey-name .dealer{color:#222;background:#ffffffd9;border-radius:6px;padding:0 5px;font-size:10px}.okey-seat.active .okey-name{background:var(--gold);color:#2b2100;box-shadow:0 0 12px #ffd54a99}.mini-rack{--tw:min(3.6vw, 3vh, 20px);--th:calc(var(--tw) * 1.49);padding:calc(var(--th) * .12) calc(var(--tw) * .32) calc(var(--th) * .22);background:var(--rack-mini,linear-gradient(#6b4220, #4a2c14)) center / 100% 100% no-repeat;border-radius:4px;display:flex;box-shadow:0 3px 6px #0006}.mini-rack .card{margin-left:calc(var(--tw) * -.45)}.mini-rack .card:first-child{margin-left:0}.okey-seat.left .mini-rack,.okey-seat.right .mini-rack{padding:calc(var(--tw) * .32) calc(var(--tw) * .24) calc(var(--tw) * .32) calc(var(--tw) * .1);background-image:var(--rack-mini-left,linear-gradient(#6b4220, #4a2c14));flex-direction:column}.okey-seat.right .mini-rack{padding:calc(var(--tw) * .32) calc(var(--tw) * .1) calc(var(--tw) * .32) calc(var(--tw) * .24);background-image:var(--rack-mini-right,linear-gradient(#6b4220, #4a2c14))}.okey-seat.left .mini-rack .card,.okey-seat.right .mini-rack .card{margin-left:0;margin-top:calc(var(--th) * -.62)}.okey-seat.left .mini-rack .card:first-child,.okey-seat.right .mini-rack .card:first-child{margin-top:0}.okey-discard{width:calc(var(--tw) * 1.6);height:calc(var(--th) * 1.3);font:inherit;color:inherit;background:#0000002e;border:0;border-radius:8px;outline:1px dashed #fff3;place-self:center;place-items:center;padding:0;display:grid;position:relative}.okey-discard.tl{grid-area:tl}.okey-discard.tr{grid-area:tr}.okey-discard.bl{grid-area:bl}.okey-discard.br{grid-area:br}.okey-discard .under{width:var(--tw);height:var(--th);border-radius:calc(var(--tw) * .14);background:#e7dcbc;position:absolute;transform:translate(-3px,3px)rotate(-4deg);box-shadow:0 2px 4px #0000004d}.okey-discard .n,.okey-pile .n{z-index:2;text-align:center;background:#000000b8;border-radius:10px;min-width:22px;padding:1px 5px;font-size:11px;position:absolute;bottom:-6px;right:-6px}.okey-discard.can-take,.okey-pile.can-take{cursor:pointer;animation:.9s ease-in-out infinite alternate okey-pulse}.okey-discard.can-drop{cursor:pointer;outline:2px solid var(--gold)}@keyframes okey-pulse{to{box-shadow:0 0 0 3px #ffd54ad9,0 0 18px #ffd54a99}}.okey-center{justify-content:center;align-items:center;gap:calc(var(--tw) * 1.2);grid-area:center;min-height:0;display:flex}.okey-pile{font:inherit;color:inherit;background:#0000002e;border:0;border-radius:10px;padding:6px;position:relative}.okey-pile .card{box-shadow:0 -3px 0 -1px #d9c9a0,0 -6px 0 -2px #c9b88c,0 8px 14px #00000073}.okey-indicator{flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:700;display:flex}.okey-indicator .card{transform:rotate(-6deg)}.okey-indicator .cap{opacity:.85}.okey-indicator .okey-is{white-space:nowrap;background:#00000059;border-radius:8px;padding:1px 7px}.okey-controls{flex-wrap:wrap;justify-content:center;gap:5px;display:flex}.okey-controls .btn{min-height:32px;padding:6px 10px;font-size:13px}.okey-rack{grid-template-columns:repeat(15, var(--tw));grid-auto-rows:calc(var(--th) * 1.2);padding:calc(var(--th) * .12) calc(var(--tw) * .3) calc(var(--th) * .04);background:var(--rack-img,linear-gradient(180deg, #8a5a2b, #6b4220 60%, #4f2f14)) center / 100% 100% no-repeat;border-radius:8px;justify-content:center;justify-self:center;gap:0 1px;max-width:100%;display:grid;box-shadow:0 8px 14px #00000073}.okey-rack .slot{padding-bottom:calc(var(--th) * .16);border-radius:4px;place-items:end center;display:grid}.okey-rack .slot.drop:empty{background:#ffffff12}.okey-rack .tile.selected{box-shadow:0 0 0 2px var(--gold), 0 6px 12px #00000073;transform:translateY(-14%)}.okey-rack .tile.finisher{box-shadow:0 0 0 2px #66e08a,0 0 12px #66e08acc}.okey-rack .tile.dragging{z-index:30;cursor:grabbing;transition:none;position:relative;box-shadow:0 12px 22px #00000080}.overlay{z-index:40;background:#00000073;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.overlay[hidden]{display:none}.dialog{background:var(--dialog);color:var(--dialog-ink);text-align:center;border-radius:14px;flex-direction:column;gap:10px;width:100%;max-width:420px;padding:16px 18px;animation:.3s ease-out both okey-in;display:flex;box-shadow:0 10px 40px #00000073}@keyframes okey-in{0%{opacity:0;transform:translateY(12px)scale(.97)}}.dialog h2{margin:0;font-size:20px}.dialog p{margin:0}.dialog .melds{--tw:26px;--th:39px;flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.dialog .meld{gap:1px;display:flex}.okey-sum{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.okey-sum .row{background:#0000000d;border-radius:8px;flex-direction:column;padding:4px;display:flex}.okey-sum .row.winner{background:#ffd54a59}.okey-result{font-size:20px;font-weight:800}@media (max-height:480px){#app.okey{--tw:clamp(18px, min(3.8vw, 7vh), 32px);gap:2px;padding:4px 8px}.okey-bar{z-index:2;padding:0;position:absolute;top:4px;right:12px}.okey-score{justify-content:flex-start;min-height:30px;padding-left:8px}.okey-score .round,.okey-msg{display:none}.btn{min-height:26px;padding:4px 9px}.okey-controls .btn{min-height:26px;padding:3px 8px;font-size:12px}.mini-rack{--tw:min(2.4vw, 3.6vh, 14px)}.okey-indicator .cap{display:none}}@media (max-width:360px){.okey-score{gap:3px;font-size:12px}.okey-score .chip{padding:2px 6px}.okey-score .round{display:none}.okey-name{padding:2px 6px;font-size:11px}}@media (prefers-reduced-motion:reduce){.dialog,.okey-discard.can-take,.okey-pile.can-take,.btn.primary.ready{animation:none}}#app.okey101{--tw:clamp(18px, min(5.4vw, 4.6vh), 42px);grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto auto}.okey101 .okey-center.o101{padding:4px;display:block;overflow:auto}.okey101 .melds-area{--tw:clamp(14px, min(4.4vw, 3.2vh), 30px);--th:calc(var(--tw) * 1.49);flex-wrap:wrap;place-content:flex-start center;gap:6px;display:flex}.okey101 .melds-area .empty{opacity:.6;margin:0;font-size:12px}.okey101 .meld{font:inherit;background:#00000038;border:0;border-radius:6px;gap:1px;padding:3px;display:flex}.okey101 .meld.owner-bottom{box-shadow:inset 0 0 0 1.5px #ffffff59}.okey101 .meld.addable{cursor:pointer;animation:.9s ease-in-out infinite alternate okey-pulse;box-shadow:0 0 0 2px #66e08a,0 0 12px #66e08ab3}.okey101 .mid-row{justify-content:center;align-items:center;gap:18px;display:flex}.okey101 .mid-row .okey-indicator{flex-direction:row;gap:8px}.okey101 .staging{--tw:clamp(16px, min(4.6vw, 3.4vh), 32px);--th:calc(var(--tw) * 1.49);flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.okey101 .staging[hidden]{display:none}.okey101 .staging .total{color:var(--gold);font-size:12px}.okey101 .meld.staged{box-shadow:inset 0 0 0 1.5px var(--gold)}.okey101 .okey-rack.r101{grid-template-columns:repeat(16, var(--tw))}.okey101 .okey-rack .tile.must{box-shadow:0 0 0 2px #ff9f43,0 0 10px #ff9f43cc}.okey101 .okey-name .opened{color:#9cf0b0;font-size:10px}.okey101 .okey-sum .row small{opacity:.7}@media (max-height:480px){#app.okey101{--tw:clamp(14px, min(3.3vw, 5.4vh), 26px);grid-template:"score bar""table mid""table staging""table controls""table msg"minmax(0,1fr)"rack rack"/minmax(0,1fr) auto}.okey101 .okey-score{grid-area:score;justify-content:flex-start}.okey101 .okey-bar{grid-area:bar;position:static}.okey101 .okey-bar .group-label{display:none}.okey101 .okey-table{grid-area:table}.okey101 .mid-row{grid-area:mid;gap:8px}.okey101 .mid-row .okey-is{display:none}.okey101 .staging{--tw:14px;grid-area:staging;max-width:180px}.okey101 .okey-controls{flex-direction:column;grid-area:controls;align-items:stretch}.okey101 .okey-rack{grid-area:rack}.okey101 .okey-msg{text-align:left;grid-area:msg;align-self:start;max-width:200px;font-size:10px;display:block}.okey101 .melds-area{--tw:clamp(10px, min(2.6vw, 4.6vh), 20px)}}.cards51{--t-black:#1d1d1f;--t-red:#c62828}.cards51 .card.tile.playing{background:linear-gradient(#fff,#f1efe8);border:1px solid #cfcab8;gap:0;padding:0}.cards51 .card.tile.playing .num{font-size:calc(var(--tw) * .5);letter-spacing:-.06em}.cards51 .card.tile.playing .suit{font-size:calc(var(--tw) * .52);color:var(--c);line-height:1}.cards51 .card.tile.joker51 .sym{font-size:calc(var(--tw) * .55);color:#7b2cbf;line-height:1}.cards51 .card.tile.joker51 .jk{font-size:calc(var(--tw) * .2);color:#7b2cbf;letter-spacing:.02em;font-weight:900}.cards51 .card.back.tile-back{background:repeating-linear-gradient(45deg,#2b5cab 0 3px,#1f3f78 3px 6px);border:1px solid #0f2a55;box-shadow:inset 0 0 0 2px #f4f7f2,0 3px 5px #0000004d}.okey-indicator[hidden]{display:none}.okey-score .chip.pot{color:var(--gold);background:#ffd54a33;font-weight:800}.dialog .pot-won{color:#b8860b;font-weight:800}