html,body{margin:0;padding:0}body{overflow-x:hidden}#root{width:100%;min-height:100vh}:root{--tile-w:clamp(26px, 4.2vw, 56px);--tile-h:clamp(36px, 5.8vw, 76px);--tile-radius:clamp(3px, .36vw, 5px);--tile-font:clamp(20px, 2.7vw, 37px);--tile-hole:clamp(7px, 1vw, 13px);--gap-rack:clamp(1px, .18vw, 2px);--felt:radial-gradient(ellipse at 50% 36%, #2f9d63 0%, #157a40 52%, #0c5b2f 100%);--felt-glow:radial-gradient(ellipse at 50% 0%, #78ffd229 0%, transparent 60%);--felt-grid:#b4ffdc0b;--wood:linear-gradient(180deg, #b77a35 0%, #8c5724 47%, #5b3517 100%);--wood-edge:#3f230d;--tile-bg:linear-gradient(175deg, #fff 0%, #f5f1e7 58%, #e7ddc8 100%);--c-red:#e0232f;--c-black:#1b1b2c;--c-blue:#0c79c8;--c-yellow:#e0930f;--accent:#5ad1c4}.okey-tile{width:var(--tile-w);height:var(--tile-h);border-radius:var(--tile-radius);font-family:Arial Black,Arial Rounded MT Bold,Trebuchet MS,system-ui,sans-serif;font-weight:900;font-size:var(--tile-font);letter-spacing:-1px;cursor:grab;-webkit-user-select:none;user-select:none;isolation:isolate;background:radial-gradient(115% 78% at 70% 14%,#fffffff5 0%,#fffcf1d1 34%,#fff0 56%),linear-gradient(148deg,#fffefa 0%,#f7f0e1 52%,#e4d6bd 100%);border:1px solid #705c3a8c;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:clamp(3px,.5vw,7px);line-height:1;transition:box-shadow .12s,transform .1s;display:flex;position:relative;overflow:hidden;box-shadow:0 2px #a89675e6,-1px 5px 8px #261a0857,inset -1.5px 1.5px #ffffffd9,inset 2px -3px 5px #805f3033,inset 0 -9px 14px #7e5e2d14}.okey-tile:before{content:"";border-radius:calc(var(--tile-radius) - 1px);pointer-events:none;z-index:0;background:linear-gradient(132deg,#ffffff6b,#ffffff0d 48%,#6e4c230f 100%);position:absolute;inset:2px 3px 18%}.okey-tile:after{content:"";border-radius:inherit;pointer-events:none;z-index:1;position:absolute;inset:0;box-shadow:inset 1px 0 #ffffff73,inset -1px 0 #664a2626,inset 0 -2px #664a262e}.okey-tile.sm{cursor:default;width:36px;height:48px;padding-top:5px;font-size:19px}.okey-tile.sm .hole{width:9px;height:9px;bottom:5px}.okey-tile.sm .rep-value{font-size:8px;top:2px;right:3px}.okey-tile>span:first-child{text-shadow:0 1px #ffffffb3,0 -1px 1px #0000000f;z-index:1}.okey-tile:hover{z-index:10;transform:translateY(-2px);box-shadow:0 2px #a89675e6,-2px 8px 14px #261a0875,inset -1.5px 1.5px #ffffffd9,inset 2px -3px 5px #805f3033}.okey-tile.sel{outline:3px solid var(--accent);outline-offset:-1px;z-index:20;transform:translateY(-8px);box-shadow:-2px 10px 18px #261a0880,0 0 10px 2px #5ad1c48c,inset -1.4px 1.4px #fffc}.okey-tile .hole{width:calc(var(--tile-hole) * 1.75);height:calc(var(--tile-hole) * 1.75);z-index:3;background:radial-gradient(circle at 50% 36%,#b3a37e 0%,#c7b793 52%,#ddd0b4 100%);border:1px solid #78603a29;border-radius:50%;position:absolute;bottom:clamp(3px,.5vw,6px);box-shadow:inset 0 2px 3px #3a2a1275}.okey-tile .hole.islek{background:radial-gradient(circle at 50% 36%,#a01d16 0%,#c9342d 52%,#e8615a 100%);box-shadow:inset 0 2px 3px #0006,0 0 7px 2px #ff3b30b3}.okey-tile.sm .hole.islek{box-shadow:inset 0 1px 1px #0006,0 0 4px 1px #ff3b30cc}.okey-tile[aria-label=sahte\ okey]{background:radial-gradient(115% 78% at 70% 14%,#ffffffeb 0%,#fffacfd1 38%,#fff0 58%),linear-gradient(148deg,#fffdee 0%,#f7edbc 52%,#e4cc69 100%);border-color:#bea03c99;box-shadow:0 2px #aa8c3ae6,-1px 5px 8px #3c2d0857,inset -1.4px 1.4px #ffffffbf,inset 2px -3px 5px #aa873238}.okey-tile.plain{background:radial-gradient(115% 78% at 70% 14%,#fffffff5 0%,#fffcf1d1 34%,#fff0 56%),linear-gradient(148deg,#fffefa 0%,#f7f0e1 52%,#e4d6bd 100%)!important;border-color:#78684c73!important;box-shadow:0 2px #a89675e6,-1px 5px 8px #261a0857,inset -1.5px 1.5px #ffffffd9,inset 2px -3px 5px #805f3033,inset 0 -9px 14px #7e5e2d14!important}.okey-tile.back{cursor:grab}.okey-tile.back:before{background:linear-gradient(132deg,#ffffff80,#ffffff14 52%,#6e4c230d 100%)}.okey-tile.back .okey-rep-badge{z-index:2;pointer-events:none;font-family:Arial,Trebuchet MS,system-ui,sans-serif;font-size:9px;font-weight:900;line-height:1;position:absolute;top:2px;right:3px}.okey-tile.back.sm .okey-rep-badge{font-size:8px;top:2px;right:2px}.okey-tile .cb-glyph{opacity:.85;margin-top:1px}.okey-tile .rep-value{color:#7a6a3a}.okey-tile .tile-edge{display:none}.okey-rack-outer{border-radius:14px;align-items:stretch;max-width:100%;display:inline-flex;overflow-x:auto;box-shadow:0 12px 28px #00000085,0 2px #301a09b8}.okey-rack-pegs{background:linear-gradient(90deg,#ffda9629,#0000 42%),repeating-linear-gradient(0deg,#3d1f0a59 0 1px,#0000 1px 7px),linear-gradient(90deg,#4b2a10,#81511f 50%,#3f240e);border:1px solid #00000040;flex-direction:column;justify-content:space-evenly;align-items:center;width:13px;padding:10px 0;display:flex}.okey-rack-pegs.left{border-right:none;border-radius:12px 0 0 12px}.okey-rack-pegs.right{border-left:none;border-radius:0 12px 12px 0}.okey-rack-pegs i{background:radial-gradient(circle at 30% 30%,#4a3010,#2a1a08);border-radius:50%;width:6px;height:6px;box-shadow:inset 0 1px 2px #00000080}.okey-rack-surface{background:radial-gradient(90% 130% at 18% 18%, #ffd3862e 0%, transparent 48%), radial-gradient(70% 120% at 82% 70%, #29130638 0%, transparent 58%), repeating-linear-gradient(0deg, #3f1f0a3d 0 1px, #ffe2a00d 1px 2px, transparent 2px 8px), repeating-linear-gradient(91deg, #2e180924 0 1px, transparent 1px 18px), linear-gradient(180deg, #ffdea521 0%, #00000014 52%, #0000002e 100%), var(--wood);flex-direction:column;gap:5px;padding:10px 12px 12px;display:inline-flex;position:relative;overflow:hidden;box-shadow:inset 0 2px #ffebbe3d,inset 0 -5px 12px #1f100575,inset 0 0 0 1px #371c0961}.okey-rack-surface:before{content:"";opacity:.82;pointer-events:none;z-index:0;background:radial-gradient(40px 12px at 12% 28%,#351a0838,#0000 70%),radial-gradient(54px 10px at 44% 60%,#ffde901a,#0000 68%),radial-gradient(48px 14px at 76% 32%,#32180833,#0000 70%),repeating-linear-gradient(2deg,#26140829 0 1px,#0000 1px 12px);position:absolute;inset:0}.okey-rack-wm{pointer-events:none;z-index:0;letter-spacing:4px;text-align:center;color:#5a370a29;text-transform:uppercase;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-weight:900;line-height:.95;display:flex;position:absolute;inset:0}.okey-rack-wm b{font-size:1.35rem}.okey-rack-wm small{letter-spacing:5px;color:#5a370a1f;font-size:.62rem}.okey-rack-groove{z-index:2;background:linear-gradient(#28180652 0%,#fff4d724 100%);height:3px;margin:0 2px}.okey-rack-row{gap:var(--gap-rack);z-index:1;background:linear-gradient(#23120629,#ffd2810d 42%,#1f10051a);border-radius:6px;padding:3px 6px 6px;display:flex;position:relative;box-shadow:inset 0 1px 2px #1e100547,inset 0 -1px #ffe5ad1f}.okey-rack-row:after{content:"";pointer-events:none;z-index:5;background:repeating-linear-gradient(91deg,#43230d2e 0 1px,#0000 1px 9px),linear-gradient(#c48d45 0%,#9d6329 48%,#623714 100%);border-radius:2px;height:5px;position:absolute;bottom:0;left:2px;right:2px;box-shadow:0 -1px 2px #00000052,inset 0 1px #ffdea573,0 1px 1px #0000004d}.okey-slot{width:var(--tile-w);height:var(--tile-h);box-sizing:border-box;border-radius:5px;transition:background .1s,box-shadow .1s;position:relative}.okey-slot.empty{background:linear-gradient(#2c160726,#ffd99108 52%,#2614072e);box-shadow:inset 0 1px 2px #1f100552,inset 0 -1px #ffe1a612}.okey-slot.over{background:#5ad1c42e;box-shadow:inset 0 0 0 2px #5ad1c499}.okey-tile-drag{transform-origin:50%}.okey-tile-drag.lifting .okey-tile{cursor:grabbing;transform:scale(1.12)rotate(2deg);box-shadow:0 2px #9a8e78,0 14px 26px #0000008c,inset 0 1px #fffffff2}.okey-rack{background:var(--wood);border-top:3px solid #d9a45e;border-radius:10px;width:max-content;margin:0 auto;padding:10px}.okey-tier{gap:4px;display:flex}.okey-tier+.okey-tier{margin-top:6px}.felt{background:var(--felt);min-height:100vh;position:relative}.felt:before{content:"";background:var(--felt-glow);pointer-events:none;z-index:0;position:absolute;inset:0}.felt:after{content:"";background-image:linear-gradient(var(--felt-grid) 1px, transparent 1px), linear-gradient(90deg, var(--felt-grid) 1px, transparent 1px);pointer-events:none;z-index:0;background-size:42px 42px;position:absolute;inset:0}.felt>*{z-index:1;position:relative}.center-well{background:radial-gradient(at 50% 40%,#00000047,#0000001f);border-radius:16px;align-items:center;gap:14px;padding:10px 16px;display:flex;box-shadow:inset 0 0 0 1px #ffffff0f,inset 0 2px 10px #00000059}.facedown{width:var(--tile-w);height:var(--tile-h);border-radius:var(--tile-radius);box-sizing:border-box;background:linear-gradient(160deg,#3a2e1a 0%,#1e1508 100%);border:1px solid #5a4020;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;box-shadow:0 2px 6px #0009,inset 0 1px #ffffff0f}.facedown:before{content:"";border:1px solid #ffffff14;border-radius:4px;position:absolute;inset:4px}.facedown span{color:#e8c87a;z-index:1;text-shadow:0 1px 2px #0009;font-size:15px;font-weight:900}.stock-deste{width:var(--tile-w);height:var(--tile-h);border-radius:var(--tile-radius);background:var(--tile-bg);box-sizing:border-box;border:1px solid #c9c0b0;border-bottom:3px solid #b0a48e;position:relative;box-shadow:0 2px #9a8e78,0 3px 7px #0000006b,inset 0 1px #ffffffe6}.stock-deste:before,.stock-deste:after{content:"";border-radius:inherit;background:var(--tile-bg);z-index:-1;border:1px solid #c9c0b0;border-bottom:2px solid #b0a48e;position:absolute;inset:0}.stock-deste:before{transform:translate(-3px,-3px)}.stock-deste:after{opacity:.8;transform:translate(-6px,-6px)}.stock-deste .count{color:#3a2400;background:#ffffffc7;border-radius:4px;padding:0 3px;font-size:11px;font-weight:900;line-height:1.25;position:absolute;bottom:1px;right:2px}.menu{background:var(--felt);color:#fff;flex-direction:column;justify-content:center;align-items:center;gap:24px;min-height:100vh;font-family:system-ui;display:flex;position:relative}.menu h1{letter-spacing:3px;text-shadow:0 2px 8px #0006;font-size:40px}.menu button{color:#3a2400;cursor:pointer;background:linear-gradient(#f0b53e,#d2811a);border:none;border-radius:12px;padding:12px 32px;font-size:18px;font-weight:900;transition:transform .1s,box-shadow .1s;box-shadow:0 4px #9a5e12,0 6px 14px #00000059}.menu button:hover{transform:translateY(-1px)}.menu button:active{transform:translateY(2px);box-shadow:0 2px #9a5e12,0 3px 8px #00000059}.variant-cards{flex-wrap:wrap;justify-content:center;gap:18px;display:flex}.variant-card{flex-direction:column;align-items:stretch;gap:8px;display:flex}.menu .variant-start{flex-direction:column;align-items:center;gap:2px;min-width:150px;padding:16px 26px;display:flex}.menu .variant-start strong{letter-spacing:1px;font-size:22px}.variant-sub{color:#5a3a10;opacity:.85;font-size:12px;font-weight:700}.variant-cta{opacity:.9;margin-top:4px;font-size:12px;font-weight:800}.menu .variant-resume{color:#07210a;background:linear-gradient(#6db36d,#3f7a3f);padding:8px 16px;font-size:14px;box-shadow:0 3px #2c5a2c,0 5px 12px #0000004d}.act button:not(.okey-tile),.action-bar button:not(.okey-tile){color:#3a2400;cursor:pointer;white-space:nowrap;background:linear-gradient(#f0b53e,#d2811a);border:none;border-radius:9px;padding:clamp(5px,.6vw,7px) clamp(9px,1.2vw,15px);font-size:clamp(11px,1.1vw,12px);font-weight:800;transition:transform .1s,box-shadow .1s;box-shadow:0 3px #9a5e12,0 4px 8px #0000004d}.act button:not(.okey-tile):hover:not(:disabled),.action-bar button:not(.okey-tile):hover:not(:disabled){transform:translateY(-1px)}.act button:not(.okey-tile):active:not(:disabled),.action-bar button:not(.okey-tile):active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #9a5e12}.act button:not(.okey-tile):disabled,.action-bar button:not(.okey-tile):disabled{opacity:.45;cursor:default;filter:grayscale(.4);box-shadow:0 2px #8a7340}.action-bar{flex-wrap:wrap;row-gap:8px}@media (width<=480px){.okey-rack-wm{display:none}}@keyframes seat-glow{0%,to{box-shadow:0 0 10px 1px #5ad1c48c,0 2px 4px #0006}50%{box-shadow:0 0 18px 4px #5ad1c4d9,0 2px 4px #0006}}.seat.turn{animation:1.6s ease-in-out infinite seat-glow}@keyframes open-pulse{0%,to{box-shadow:0 0 #7be38b00}50%{box-shadow:0 0 12px 2px #7be38bbf}}.open-ready{animation:1.1s ease-in-out infinite open-pulse}@keyframes blink-dot{0%,to{opacity:1}50%{opacity:.35}}.active-dot{background:var(--accent);width:8px;height:8px;box-shadow:0 0 6px var(--accent);border-radius:50%;animation:1s ease-in-out infinite blink-dot}.discard-target{width:var(--tile-w);height:var(--tile-h);letter-spacing:1px;-webkit-user-select:none;user-select:none;color:#ffffff80;background:#00000038;border:2px dashed #ffffff52;border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:800;transition:all .14s;display:flex}.discard-target.active{color:#ffe066;background:#ffdc002e;border-color:#ffe066;transform:scale(1.05);box-shadow:0 0 14px 3px #ffdc0080}.hud-btn{color:#ffe9c2;cursor:pointer;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:linear-gradient(#22180cdb,#140e07e6);border:1px solid #ffdc9647;border-radius:11px;justify-content:center;align-items:center;width:38px;height:38px;font-size:17px;line-height:1;transition:transform .12s,box-shadow .12s,border-color .12s;display:inline-flex;box-shadow:0 3px 9px #00000080,inset 0 1px #fff0cd33}.hud-btn:hover{border-color:#ffdc9699;transform:translateY(-1px);box-shadow:0 5px 14px #0000008c,inset 0 1px #fff0cd47}.hud-btn:active{transform:translateY(1px)}.modal-overlay{z-index:320;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:radial-gradient(at 50% 30%,#082818d1,#000000d1);justify-content:center;align-items:flex-start;padding:28px 14px;display:flex;position:fixed;inset:0;overflow-y:auto}.modal-card{color:#f3ead7;background:linear-gradient(#1b4329 0%,#123420 100%);border:1px solid #ffdc9638;border-radius:16px;width:100%;padding:20px 24px;font-family:system-ui;box-shadow:0 18px 50px #0009,inset 0 1px #fff0cd1f}.modal-head{border-bottom:1px solid #ffdc9629;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding-bottom:12px;display:flex}.modal-head h2{letter-spacing:.3px;color:#ffe9c2;margin:0;font-size:19px;font-weight:800}.modal-close{color:#f3ead7;cursor:pointer;background:#ffffff14;border:1px solid #ffffff2e;border-radius:9px;padding:6px 14px;font-size:13px;font-weight:700;transition:background .12s}.modal-close:hover{background:#ffffff29}.settings-panel{border:1px solid #ffdc9638;box-shadow:0 14px 40px #0009,inset 0 1px #fff0cd1f;background:linear-gradient(#1b4329 0%,#123420 100%)!important;border-radius:14px!important}.settings-panel select,.settings-panel input[type=checkbox]{accent-color:#5ad1c4;cursor:pointer}.settings-panel select{color:#f3ead7;background:#00000059;border:1px solid #fff3;border-radius:7px;padding:3px 6px}.help-content{text-align:left}.help-content h2{color:#ffd27a;letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid #ffd27a33;margin:16px 0 5px;padding-bottom:4px;font-size:13px;font-weight:800}.help-content h2:first-child{margin-top:0}.help-content p{color:#e8dcc4;margin:4px 0;font-size:13.5px;line-height:1.6}.help-content strong{color:#fff7e9;font-weight:700}.help-content em{color:#9fe6da;font-style:normal;font-weight:600}body[data-theme=gece]{--felt:radial-gradient(ellipse at 50% 36%, #1c2647 0%, #141a30 55%, #0d1120 100%);--felt-glow:radial-gradient(ellipse at 50% 0%, #6e96ff24 0%, transparent 60%);--felt-grid:#7896ff0d;--wood:linear-gradient(180deg, #6a5a44 0%, #4c4030 48%, #352c20 100%);--wood-edge:#241d14;--accent:#7aa2ff}body[data-theme=gece] .menu h1{color:#c8d4f0;text-shadow:0 0 12px #648cff73}body[data-theme=gece] .menu button,body[data-theme=gece] .act button{color:#eaf0ff;background:linear-gradient(#5b76c8,#34457f);box-shadow:0 3px #222c52,0 4px 10px #00000073}body[data-theme=gece] .okey-rack-pegs{background:linear-gradient(90deg,#463b2a,#5c4d38 50%,#463b2a)}body[data-theme=gece] .okey-rack-wm{color:#c8d4f01f}body[data-theme=gece] .okey-rack-wm small{color:#c8d4f017}