:root {
  --bg:#07090f; --bg2:#0e1424; --panel:#121a2e; --panel2:#18223b; --line:#27324f; --text:#eef1f8; --muted:#8f9bb8;
  --gold:#f2c14e; --gold2:#b98a1f; --accent:#f2c14e; --good:#2fbf71; --bad:#e5484d; --warn:#f2a93b;
  --felt1:#1f8a57; --felt2:#0d4a2f; --wood:#4a2c17; --wood2:#2c190c;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--text); font:15px/1.45 'Segoe UI',system-ui,Roboto,sans-serif; min-height:100vh;
  background:radial-gradient(900px 500px at 50% -120px,#26325c 0%,transparent 70%),radial-gradient(600px 400px at 100% 100%,#2a1a3f 0%,transparent 70%),var(--bg);
  perspective:1400px; }

/* Üst çubuk */
.topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 22px; position:sticky; top:0; z-index:5; flex-wrap:wrap; gap:10px;
  background:linear-gradient(180deg,rgba(7,9,15,.96),rgba(14,20,36,.9)); border-bottom:1px solid var(--gold2); box-shadow:0 2px 18px rgba(0,0,0,.5); }
body.in-game .topbar { min-height:46px; padding:2px 14px; flex-wrap:nowrap; gap:8px; }
body.in-game .brand { gap:7px; font-size:17px; }
body.in-game .brand .logo { width:30px; height:30px; font-size:17px; }
body.in-game .userbox { gap:6px; flex-wrap:nowrap; }
body.in-game .bal { padding:2px 8px 2px 3px; font-size:11px; }
body.in-game .bal .coin { width:20px; height:20px; font-size:11px; }
body.in-game .userbox .btn { padding:5px 9px; font-size:11px; }
body.in-game .userbox .pill { padding:2px 8px 2px 3px; font-size:11px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:21px; letter-spacing:.5px; }
.brand .logo { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:20px; color:#1a1204;
  background:radial-gradient(circle at 30% 30%,#ffe9a8,var(--gold) 55%,var(--gold2)); box-shadow:0 0 0 2px #1a1204 inset,0 0 14px rgba(242,193,78,.5); }
.brand b { background:linear-gradient(90deg,#ffe9a8,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand span { color:var(--muted); margin:0 5px; font-weight:400; }
.userbox { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.balances { display:flex; gap:6px; flex-wrap:wrap; }
.bal { display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:3px 12px 3px 4px; font-size:13px; font-weight:600; }
.pill { display:inline-flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:3px 12px 3px 4px; font-size:13px; }

main { max-width:1040px; margin:0 auto; padding:22px; }

/* Giriş */
.hero { text-align:center; padding:54px 10px; }
.hero .suits { font-size:34px; letter-spacing:10px; color:var(--gold); text-shadow:0 0 18px rgba(242,193,78,.5); margin-bottom:6px; }
.hero h1 { font-size:34px; margin:0 0 10px; background:linear-gradient(90deg,#fff,#ffe9a8,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { color:var(--muted); max-width:580px; margin:0 auto 26px; }
.wallet-list { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Kartlar ve düğmeler */
.card { background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:0 10px 28px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.04) inset; transform:translateZ(0) rotateX(1deg); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-bottom:16px; }
.game { cursor:pointer; transition:.18s; display:flex; align-items:center; gap:16px; }
.game .gicon { width:64px; height:64px; border-radius:16px; display:grid; place-items:center; font-size:34px; background:radial-gradient(circle at 30% 25%,#2d3a63,#10172b); border:1px solid var(--line); flex:none; }
.game h2 { margin:0 0 4px; } .game p { margin:0; color:var(--muted); font-size:14px; }
.game:hover { transform:translateY(-2px); border-color:var(--gold2); }
.game.sel { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset,0 0 24px rgba(242,193,78,.25); }
.field { margin-bottom:14px; } .field label { display:block; color:var(--muted); font-size:12px; letter-spacing:.8px; text-transform:uppercase; margin-bottom:7px; }
.seg { display:flex; gap:8px; flex-wrap:wrap; }
.seg button { display:inline-flex; align-items:center; gap:8px; background:#0b1120; color:var(--text); border:1px solid var(--line); border-radius:12px; padding:9px 18px; cursor:pointer; font-weight:600; transition:.15s; }
.seg button:hover { border-color:var(--gold2); }
.seg button.on { background:linear-gradient(180deg,#ffd878,var(--gold2)); border-color:var(--gold); color:#1a1204; box-shadow:0 0 14px rgba(242,193,78,.35); }
.seg .stake-btn { font-size:17px; padding:10px 22px; }
.btn { background:#1c2640; color:var(--text); border:1px solid var(--line); border-radius:12px; padding:9px 18px; cursor:pointer; font-size:14px; font-weight:600; transition:.15s; }
.btn:hover:not(:disabled) { filter:brightness(1.2); transform:translateY(-1px); } .btn:disabled { opacity:.35; cursor:not-allowed; }
.btn.primary { background:linear-gradient(180deg,#ffd878,var(--gold2)); border-color:var(--gold); color:#1a1204; box-shadow:0 4px 14px rgba(242,193,78,.3); }
.btn.danger { background:linear-gradient(180deg,#f0595e,#a82a2e); border-color:#f0595e; }
.btn.warn { background:linear-gradient(180deg,#ffb54d,#c2761a); color:#1a1204; border-color:#ffb54d; }
.btn.ghost { background:transparent; }
.btn.wallet { display:inline-flex; align-items:center; gap:10px; padding:11px 20px; } .btn.wallet img { width:22px; height:22px; }
.btn.demo { background:linear-gradient(180deg,#2b3a66,#18223f); border-color:var(--gold2); }
.btn.demo .avatar { width:28px; height:28px; font-size:16px; }
.muted { color:var(--muted); font-size:13px; }
.quote { margin:2px 0 14px; padding:10px 14px; border-radius:10px; background:#0b1120; border:1px dashed var(--line); }
.toast.note { background:#14623f; border:1px solid #55c88a; }
.toast { position:fixed; top:70px; left:50%; transform:translateX(-50%); background:var(--bad); padding:9px 18px; border-radius:12px; z-index:20; font-weight:600; box-shadow:0 6px 20px rgba(0,0,0,.5); }

/* Avatar, coin, fiş */
.avatar { --hue:200; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:20px; position:relative; flex:none;
  background:radial-gradient(circle at 30% 25%,hsl(var(--hue) 70% 62%),hsl(calc(var(--hue) + 40) 60% 28%)); border:2px solid var(--gold); box-shadow:0 2px 8px rgba(0,0,0,.5); }
.avatar.big { width:52px; height:52px; font-size:28px; }
.avatar.ghost { background:#0b1120; border:2px dashed var(--line); color:var(--muted); font-size:20px; box-shadow:none; }
.dealer-btn { position:absolute; right:-6px; bottom:-6px; width:20px; height:20px; border-radius:50%; background:#fff; color:#111; font:800 11px/20px system-ui; text-align:center; font-style:normal; border:2px solid #111; }
.coin { width:26px; height:26px; border-radius:50%; display:inline-grid; place-items:center; color:#fff; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.25) inset; }
.coin svg { display:block; width:68%; height:68%; fill:currentColor; }
.coin-USDT { background:#26a17b; } .coin-BTC { background:#f7931a; } .coin-ETH { background:linear-gradient(145deg,#8b9cff,#4956a8); } .coin-BNB { background:#f3ba2f; color:#171717; } .coin-CHIP { background:radial-gradient(circle at 35% 30%,#e0584a,#a3241a); }
.coin.sm { width:18px; height:18px; font-size:10px; }
.chip { display:inline-flex; align-items:center; gap:7px; font-weight:800; }
.chip i { width:22px; height:22px; border-radius:50%; flex:none; position:relative; background:radial-gradient(circle,#c0392b 0 38%,transparent 39%),repeating-conic-gradient(#fff 0 12deg,#c0392b 12deg 30deg);
  border:2px solid #7d1d14; box-shadow:0 2px 3px rgba(0,0,0,.5),0 0 0 1px #fff3 inset; }
.chip.gold i { background:radial-gradient(circle,#d19a1c 0 38%,transparent 39%),repeating-conic-gradient(#fff 0 12deg,#d19a1c 12deg 30deg); border-color:#7a5710; }
.chip.blue i { background:radial-gradient(circle,#2c6fd1 0 38%,transparent 39%),repeating-conic-gradient(#fff 0 12deg,#2c6fd1 12deg 30deg); border-color:#17408a; }
.stack i { margin-left:-12px; } .stack i:first-child { margin-left:0; }

/* Masa üst çubuğu */
.tablebar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.infos { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tag { background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:13px; font-weight:600; }
.tag.gold { border-color:var(--gold2); color:var(--gold); }
.timer { font-weight:800; font-size:20px; color:var(--warn); min-width:54px; text-align:center; background:#0b1120; border:2px solid var(--gold2); border-radius:50%; width:54px; height:54px; display:grid; place-items:center; }
.timer:empty { visibility:hidden; }

/* Koltuklar */
.seats { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:14px; }
.seat { position:relative; background:linear-gradient(180deg,#18223b,#0f1730); border:1px solid var(--line); border-radius:16px; padding:12px; transition:.2s; }
.seat.turn { border-color:var(--good); box-shadow:0 0 0 1px var(--good) inset,0 0 20px rgba(47,191,113,.55); animation:pulse 1.4s infinite; }
.seat.out, .seat.folded { opacity:.5; filter:grayscale(.5); }
.seat.empty { display:flex; align-items:center; gap:12px; border-style:dashed; background:transparent; }
.seat-top { display:flex; align-items:center; gap:12px; }
.who b { display:block; font-size:15px; } .sub { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin-top:2px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--good); } .dot.off { background:var(--bad); }
.seat-info { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.drink-profile { cursor:pointer; }
.drink-profile:hover { filter:brightness(1.12); }
.drink-profile:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.drink-menu-open { z-index:20 !important; }
.drink-menu { position:fixed; z-index:10000; width:min(258px,calc(100vw - 16px)); display:grid; gap:6px; padding:8px; border:1px solid rgba(255,224,138,.42); border-radius:14px; background:linear-gradient(145deg,rgba(24,39,58,.88),rgba(8,18,29,.82)); -webkit-backdrop-filter:blur(16px) saturate(145%); backdrop-filter:blur(16px) saturate(145%); box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.13); color:#fff; font-size:11px; text-align:center; }
.drink-menu[hidden] { display:none; }
.gift-menu-header { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:0 3px 4px; border-bottom:1px solid rgba(255,255,255,.12); }
.gift-menu-header strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.gift-menu-caption { color:#b8c5d5; font-size:9px; font-weight:700; letter-spacing:.8px; white-space:nowrap; }
.drink-actions { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
.drink-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:0; min-height:47px; padding:4px 1px; border:1px solid rgba(255,255,255,.17); border-radius:10px; background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035)); color:#fff; cursor:pointer; white-space:nowrap; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.drink-button span:first-child { font-size:21px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.drink-button span:last-child { font-size:9px; line-height:1.1; }
.drink-button:hover:not(:disabled) { border-color:var(--gold); background:rgba(25,60,44,.95); transform:translateY(-1px); }
.drink-button:disabled { opacity:.4; cursor:not-allowed; }
.drink-badge { position:absolute; z-index:2; right:-8px; bottom:-9px; padding:3px 6px; border:1px solid rgba(255,224,138,.65); border-radius:999px; background:#101a2b; color:#fff4d1; box-shadow:0 2px 7px rgba(0,0,0,.55); font-size:10px; font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; }
.drink-badge[hidden] { display:none; }
.drink-menu-status { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:3px 6px; padding:4px 6px; border:1px solid rgba(255,224,138,.42); border-radius:8px; background:rgba(0,0,0,.4); color:#fff4d1; font-size:10px; }
.drink-icon { font-size:16px; }
.drink-caption { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drink-remaining { font-variant-numeric:tabular-nums; color:#ffe08a; }
.drink-progress { grid-column:1 / -1; height:3px; overflow:hidden; border-radius:4px; background:rgba(255,255,255,.2); }
.drink-progress-bar { display:block; height:100%; width:100%; border-radius:inherit; background:linear-gradient(90deg,#f6c453,#78d6a0); }
.gift-fx-layer { position:fixed; z-index:11000; inset:0; overflow:clip; pointer-events:none; }
.gift-flight { position:fixed; z-index:2; display:grid; width:38px; height:38px; place-items:center; margin:-19px 0 0 -19px; border:1px solid rgba(255,255,255,.32); border-radius:50%; background:linear-gradient(145deg,rgba(255,255,255,.25),rgba(15,27,42,.48)); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 6px 18px rgba(0,0,0,.32); font-size:24px; animation:gift-flight .72s cubic-bezier(.2,.72,.3,1) both; }
.gift-reaction { position:fixed; z-index:3; display:flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid rgba(255,224,138,.48); border-radius:999px; background:linear-gradient(145deg,rgba(27,43,61,.9),rgba(8,17,28,.86)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 7px 22px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.12); color:#fff; white-space:nowrap; animation:gift-reaction 3.2s ease both; }
.gift-reaction-icon { font-size:19px; }
.gift-reaction-label { font-size:11px; font-weight:700; }
.avatar-frame.gift-arrived .avatar { animation:gift-arrival .85s ease-out; }
@keyframes gift-flight {
  0% { opacity:0; transform:translate(0,0) scale(.5) rotate(-18deg); }
  14% { opacity:1; transform:translate(0,0) scale(1.12) rotate(0); }
  100% { opacity:1; transform:translate(var(--gift-dx),var(--gift-dy)) scale(.78) rotate(340deg); }
}
@keyframes gift-reaction {
  0% { opacity:0; transform:translateY(9px) scale(.84); }
  9%,72% { opacity:1; transform:translateY(0) scale(1); }
  100% { opacity:0; transform:translateY(-12px) scale(.94); }
}
@keyframes gift-arrival {
  0%,100% { box-shadow:0 2px 8px rgba(0,0,0,.5); }
  35% { box-shadow:0 0 0 5px rgba(255,224,138,.58),0 0 25px rgba(255,224,138,.85); }
}
@media (prefers-reduced-motion: reduce) {
  .gift-flight { animation-duration:.15s; }
  .gift-reaction { animation-duration:1.2s; }
}
.badge { font-size:11px; font-weight:800; padding:2px 9px; border-radius:999px; background:#0b1120; border:1px solid var(--line); letter-spacing:.5px; }
.badge.allin { background:var(--bad); border-color:var(--bad); } .badge.fold { color:var(--muted); }
.betchip { margin-left:auto; background:rgba(0,0,0,.45); border-radius:999px; padding:3px 10px 3px 4px; }
@keyframes pulse { 50% { box-shadow:0 0 0 1px var(--good) inset,0 0 30px rgba(47,191,113,.8); } }

/* Okey */
.okey-actions { display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap; } .check { color:var(--muted); }
.rack { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:4px; padding:5px 8px 7px; position:relative; isolation:isolate; min-height:0; }
.rack-row { display:flex; align-items:flex-end; justify-content:flex-start; gap:3px; min-height:0; height:48px; width:100%; overflow-x:auto; overflow-y:hidden; position:relative; z-index:1; scrollbar-width:thin; scrollbar-color:rgba(255,224,138,.6) rgba(21,14,9,.5); overscroll-behavior-x:contain; }
.rack-slot { display:flex; flex:0 0 36px; align-items:flex-end; justify-content:center; width:36px; height:43px; border:1px dashed transparent; border-radius:4px; }
.rack-slot:empty { border-color:rgba(255,224,138,.2); background:rgba(22,14,9,.12); }
.rack-slot:empty:hover { border-color:rgba(255,224,138,.48); background:rgba(22,14,9,.24); }
.rack-slot.drop-target { border-color:#fff3c4; background:rgba(255,243,196,.24); box-shadow:0 0 10px rgba(255,243,196,.45); }
.rack-row::-webkit-scrollbar,.discard-tiles::-webkit-scrollbar { height:6px; }
.rack-row::-webkit-scrollbar-track,.discard-tiles::-webkit-scrollbar-track { background:rgba(21,14,9,.5); border-radius:8px; }
.rack-row::-webkit-scrollbar-thumb,.discard-tiles::-webkit-scrollbar-thumb { background:rgba(255,224,138,.6); border-radius:8px; }
.tile { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; overflow:hidden; background:linear-gradient(150deg,#fffefa 0%,#f7f0df 58%,#e8dcc3 100%); border:1px solid #d5c7a8; border-radius:9px; width:44px; height:62px; padding:3px 2px 5px; font:850 24px/1 Georgia,serif; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; box-shadow:0 7px 0 #a99a78,0 11px 16px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.95),inset 0 -2px rgba(128,110,81,.2); transition:transform .14s ease,box-shadow .14s ease,filter .14s ease; transform:perspective(900px) rotateX(8deg) rotateY(-5deg); }
.rack .tile { flex:0 0 38px; width:38px; min-width:38px; max-width:none; height:50px; margin:0; border-radius:6px; font-size:20px; box-shadow:0 4px 0 #a99a78,0 7px 11px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.95),inset 0 -2px rgba(128,110,81,.2); }
.rack .tile:hover { transform:perspective(900px) rotateX(5deg) rotateY(-3deg) translateY(-3px); }
.tile-number { position:relative; z-index:1; text-shadow:0 1px 0 rgba(255,255,255,.65); }
.tile-symbol { position:absolute; right:5px; bottom:4px; font:700 10px/1 system-ui,sans-serif; opacity:.72; }
.tile::before { content:""; position:absolute; inset:2px 2px auto 2px; height:10px; border-radius:8px 8px 0 0; background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0)); }
.tile:hover { z-index:3; transform:perspective(900px) rotateX(7deg) rotateY(-3deg) translateY(-4px); filter:brightness(1.03); }
.tile:active { cursor:grabbing; }
.tile.wild { outline:2px solid #27a767; outline-offset:-4px; box-shadow:0 7px 0 #6f9c7d,0 11px 16px rgba(0,0,0,.38),0 0 0 2px rgba(47,191,113,.25) inset; }
.tile.selected { transform:perspective(900px) rotateX(3deg) rotateY(0) translateY(-9px); outline:3px solid #ffe08a; outline-offset:1px; box-shadow:0 3px 0 #a99a78,0 14px 22px rgba(0,0,0,.45),0 0 18px rgba(255,224,138,.5); }
.tile.dragging { opacity:.28; cursor:grabbing; transform:scale(.94); box-shadow:0 4px 0 #b8ab8c,0 7px 12px rgba(0,0,0,.24); }
.tile-drag-ghost { position:fixed; z-index:1000; margin:0; pointer-events:none; cursor:grabbing; opacity:.98; transform:perspective(900px) rotateX(0deg) rotateY(0deg) rotate(-3deg) scale(1.08); box-shadow:0 16px 28px rgba(0,0,0,.48),0 0 0 2px rgba(255,255,255,.36),0 0 24px rgba(255,224,138,.25); transition:transform .1s ease-out!important; }
.tile-land { animation:tile-land .24s cubic-bezier(.2,.8,.25,1.25); }
@keyframes tile-land { 50% { transform:translateY(-5px) scale(1.06); } }
.tile.drop-target { position:relative; outline:2px solid #fff3c4; outline-offset:3px; background:linear-gradient(155deg,#fffef8,#f5e1ac); box-shadow:0 8px 0 #c9b37f,0 12px 18px rgba(0,0,0,.38),0 0 0 5px rgba(255,243,196,.16); transform:translateY(-5px); }
.tile.drop-before::after,.tile.drop-after::after { content:""; position:absolute; z-index:2; top:5px; bottom:5px; width:3px; border-radius:3px; background:#fff3c4; box-shadow:0 0 10px rgba(255,243,196,.85); }
.tile.drop-before::after { left:-7px; }
.tile.drop-after::after { right:-7px; }
.rack { width:100%; max-width:none; user-select:none; -webkit-user-select:none; border:1px solid rgba(67,40,17,.8); border-bottom:5px solid #392514; border-radius:2px; background:linear-gradient(180deg,#d49a53 0%,#c88a43 47%,#bd7f37 50%,#b47432 100%); box-shadow:0 3px 8px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,227,181,.2),inset 0 -5px 10px rgba(60,35,13,.24); transform:none; }
.rack::before { content:""; position:absolute; z-index:-1; inset:7px 9px 9px; border:1px solid rgba(227,190,139,.2); border-radius:7px; background:linear-gradient(180deg,rgba(30,18,10,.4),rgba(22,14,9,.22)); box-shadow:inset 0 2px 8px rgba(0,0,0,.3),inset 0 -1px rgba(255,255,255,.06); pointer-events:none; }
.rack::after { content:""; position:absolute; z-index:0; left:12px; right:12px; top:50%; height:3px; border-radius:3px; background:linear-gradient(180deg,#8b6540,#302015); box-shadow:0 1px 2px rgba(0,0,0,.55); transform:translateY(-50%); pointer-events:none; }
#hand { position:relative; z-index:1; }
#hand.is-dragging .tile:not(.dragging) { transition:transform .08s ease; }
.rack-row.drop-end::after { content:""; position:absolute; right:0; top:5px; bottom:5px; width:3px; border-radius:3px; background:#fff3c4; box-shadow:0 0 10px rgba(255,243,196,.85); }
.discard-pile { display:flex; flex-direction:row; align-items:center; gap:4px; width:100%; min-width:0; overflow:hidden; padding:3px 5px; border:1px solid rgba(255,255,255,.16); border-radius:3px; background:rgba(0,0,0,.28); }
.discard-label { flex:none; color:#f1d8a4; font-size:9px; font-weight:800; letter-spacing:.4px; white-space:nowrap; }
.discard-empty { color:rgba(239,231,207,.55); font-size:10px; white-space:nowrap; }
.discard-tiles { display:flex; align-items:flex-end; gap:3px; min-width:0; max-height:36px; overflow-x:auto; padding:2px 3px 5px; scrollbar-width:thin; overscroll-behavior-x:contain; }
.discard-tiles .tile.discard-tile { flex:0 0 25px; width:25px; min-width:25px; height:34px; padding:2px; border-radius:4px; font-size:14px; cursor:default; opacity:.86; box-shadow:0 2px 0 #a99a78,0 3px 5px rgba(0,0,0,.28); transform:none; }
.discard-tiles .tile.discard-tile .tile-symbol { right:2px; bottom:2px; font-size:6px; }
.discard-tiles .tile.discard-tile.last-discard { opacity:1; outline:2px solid #ffe08a; outline-offset:1px; }
.rack-heading { display:flex; justify-content:space-between; align-items:center; margin:0 3px 10px; color:#f8dfaf; font-size:12px; font-weight:800; letter-spacing:1px; }
.rack-tip { color:#c3a77f; font-size:10px; letter-spacing:.35px; }
.melds { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px; max-width:100%; margin:0 0 12px; }
.meld-row { display:flex; gap:3px; align-items:center; padding:7px; border:1px solid rgba(255,255,255,.22); border-radius:10px; background:rgba(3,34,23,.5); cursor:default; transition:.15s; }
.meld-row .tile { width:32px; height:44px; border-radius:6px; font-size:18px; cursor:default; box-shadow:0 3px 0 #a99a78,0 5px 8px rgba(0,0,0,.3); transform:none; }
.meld-row .tile-symbol { right:3px; bottom:2px; font-size:8px; }
.meld-row.can-layoff { cursor:pointer; border-color:#ffe08a; box-shadow:0 0 14px rgba(255,224,138,.2); }
.meld-row.can-layoff:hover { transform:translateY(-2px); background:rgba(17,79,51,.72); }

/* Okey masası */
.playing-table { max-width:1100px; width:90%; height:calc(92vh - 48px); height:calc(92dvh - 48px); min-height:0; overflow:hidden; padding:4px 12px 8px; margin:0 auto; display:flex; flex-direction:column; }
.playing-table .tablebar { flex:0 0 auto; gap:4px; margin:0 0 4px; }
.playing-table .infos { gap:4px; }
.playing-table .tag { padding:2px 7px; font-size:10px; }
.playing-table .timer { width:36px; height:36px; min-width:36px; font-size:14px; }
#table:not([hidden]) { display:flex; flex:1; min-height:0; flex-direction:column; }
#okeyView:not([hidden]) { display:grid; flex:1; min-height:0; grid-template-rows:minmax(0,1fr) auto auto; gap:5px; }
.okey-arena { --table-light:#08704a; --table-mid:#07583c; --table-dark:#06432f; --table-trim-rgb:226,188,119; --table-rim:#bd8b45; position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(132px,.8fr) minmax(220px,1.6fr) minmax(132px,.8fr); grid-template-rows:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,.8fr); grid-template-areas:"blank top blank2" "left center right" "blank3 bottom blank4"; gap:6px; height:100%; min-height:0; padding:10px 16px; border:6px solid #6b451e; border-radius:5px; overflow:hidden; background:radial-gradient(ellipse at 50% 45%,#08794f 0%,var(--table-light) 40%,var(--table-mid) 78%,var(--table-dark) 100%); box-shadow:0 5px 13px rgba(0,0,0,.36),inset 0 0 0 2px rgba(235,195,126,.38),inset 0 0 55px rgba(0,0,0,.2); transform:none; }
.playing-table[data-stake="50"] .okey-arena { --table-light:#4e91b5; --table-mid:#286280; --table-dark:#17384f; --table-trim-rgb:168,215,232; --table-rim:#536f91; }
.playing-table[data-stake="100"] .okey-arena { --table-light:#7953a6; --table-mid:#523477; --table-dark:#321e50; --table-trim-rgb:225,196,255; --table-rim:#b98a1f; }
.okey-arena::before { content:""; position:absolute; z-index:-1; inset:8px; border:1px solid rgba(var(--table-trim-rgb),.12); pointer-events:none; }
.okey-arena::after { content:""; position:absolute; z-index:-1; inset:0; opacity:.12; pointer-events:none; background:linear-gradient(30deg,transparent 24%,rgba(255,255,255,.11) 25%,rgba(255,255,255,.11) 26%,transparent 27%,transparent 74%,rgba(255,255,255,.11) 75%,rgba(255,255,255,.11) 76%,transparent 77%),linear-gradient(150deg,transparent 24%,rgba(255,255,255,.11) 25%,rgba(255,255,255,.11) 26%,transparent 27%,transparent 74%,rgba(255,255,255,.11) 75%,rgba(255,255,255,.11) 76%,transparent 77%); background-size:34px 58px; }
.okey-seats { display:contents; }
.okey-seat { z-index:1; position:relative; align-self:center; justify-self:center; display:flex; flex-direction:column; gap:3px; width:min(100%,210px); min-width:0; max-height:100%; overflow:visible; padding:0; border:0; border-radius:0; background:none; box-shadow:none; transform:none; }
.okey-profile { min-width:0; max-height:100%; overflow:hidden; padding:5px 7px; border:1px solid rgba(255,255,255,.32); border-radius:3px; background:linear-gradient(145deg,rgba(4,44,31,.94),rgba(3,34,25,.92)); box-shadow:0 3px 9px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.07); }
.okey-seat .avatar.big { width:34px; height:34px; font-size:19px; }
.okey-seat .seat-top { gap:7px; }
.okey-seat .who b { color:#fff; }
.okey-seat .sub { font-size:9px; }
.okey-seat .seat-info { margin-top:4px; }
.okey-seat .tag { padding:2px 6px; font-size:10px; background:rgba(0,0,0,.22); }
.okey-seat.position-left,.okey-seat.position-right { width:min(100%,170px); }
.okey-seat.position-top { align-self:start; }
.okey-seat.position-bottom { align-self:end; }
.okey-seat.turn .okey-profile { border-color:#ffe08a; box-shadow:0 0 0 1px rgba(255,224,138,.7),0 0 28px rgba(255,211,95,.45); animation:seatGlow 1.8s ease-in-out infinite; }
.okey-seat.turn .okey-empty-profile { border-color:#ffe08a; box-shadow:0 0 0 1px rgba(255,224,138,.7),0 0 28px rgba(255,211,95,.45); }
.okey-seat.position-top { grid-area:top; }
.okey-seat.position-left { grid-area:left; }
.okey-seat.position-right { grid-area:right; }
.okey-seat.position-bottom { grid-area:bottom; }
.okey-empty-profile { min-height:80px; display:flex; align-items:center; justify-content:center; gap:12px; padding:8px; border:1px dashed rgba(255,255,255,.32); border-radius:3px; background:rgba(3,34,25,.45); }
.okey-center { grid-area:center; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff8df; text-shadow:0 2px 6px rgba(0,0,0,.35); }
.table-mark { display:flex; align-items:center; gap:9px; font-size:18px; font-weight:900; letter-spacing:4px; color:#f7dca3; }
.table-mark-icon { color:#fff0c1; font-size:21px; }
.table-mark-sub { font-size:9px; letter-spacing:2px; opacity:.68; }
.center-tiles { display:flex; align-items:center; justify-content:center; gap:22px; margin:13px 0; }
.deck-stack { display:grid; grid-template-columns:auto auto; column-gap:6px; align-items:center; padding:9px 12px; color:#f6e8c5; border:1px solid rgba(255,255,255,.19); border-radius:12px; background:rgba(5,35,25,.35); }
.deck-mark { grid-row:span 2; font-size:28px; color:#f6d990; }
.deck-stack b { font-size:18px; line-height:1; }
.deck-stack small,.indicator-wrap>small { font-size:9px; letter-spacing:1.5px; opacity:.72; }
.indicator-wrap { display:flex; align-items:center; gap:7px; }
.indicator-wrap .tile { width:34px; height:46px; border-radius:6px; font-size:21px; cursor:default; box-shadow:0 3px 0 #b8ab8c; }
.indicator-status { min-height:18px; color:#ffe08a; font-size:11px; font-weight:700; }
.table-status { min-height:31px; padding:7px 14px; border:1px solid rgba(255,236,190,.25); border-radius:999px; background:rgba(4,33,23,.4); font-size:12px; font-weight:700; color:#fff1c8; }
@keyframes seatGlow { 50% { box-shadow:0 0 0 1px rgba(255,224,138,.9),0 0 34px rgba(255,211,95,.65); } }
.okey-actions { justify-content:center; gap:6px; min-height:36px; margin:0; padding:3px 6px; border:1px solid var(--line); border-radius:5px; background:linear-gradient(180deg,#151e31,#101727); }
.okey-actions .btn { min-width:0; padding:5px 10px; font-size:11px; }
.okey-actions .btn:not(:disabled) { border-color:rgba(242,193,78,.45); }
.okey-actions .check { margin-left:8px; font-size:13px; }
.rack-panel { width:100%; max-width:none; margin:0 auto; padding:5px 9px 7px; border:4px solid #714a22; border-radius:4px; background:linear-gradient(180deg,#bd8543 0%,#a86d30 48%,#805020 100%); box-shadow:0 5px 13px rgba(0,0,0,.4),inset 0 1px rgba(255,232,193,.3),inset 0 -5px 10px rgba(0,0,0,.22); }
.rack-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:0 2px 4px; color:#f4dfae; font-size:10px; font-weight:800; letter-spacing:.8px; }
.rack-tip { color:#b9c9a6; font-weight:500; letter-spacing:.3px; }
.hand-count { flex-shrink:0; color:#b6dfd0; font-weight:600; letter-spacing:0; white-space:nowrap; }
.rack-row .tile { z-index:1; flex:0 0 36px; width:36px; min-width:36px; max-width:none; height:43px; margin:0; border:2px solid #d5d4cb; border-radius:4px; background:#fff; font:800 20px/1 'Segoe UI',system-ui,sans-serif; box-shadow:0 2px 0 #99978d,0 4px 7px rgba(0,0,0,.28); }
.discard-tiles .tile { z-index:1; }
.rack-row .tile { transform:none; transition:transform .12s ease,box-shadow .12s ease,filter .12s ease; }
.rack-row .tile:hover { transform:translateY(-4px); filter:brightness(1.04); }
.rack-row .tile.selected { transform:translateY(-7px); }
.rack-row .tile-number { text-shadow:none; }
.rack-row .tile-symbol { right:auto; left:50%; bottom:3px; transform:translateX(-50%); font-size:9px; opacity:.9; }

/* Poker masası */
.felt { position:relative; border-radius:150px/110px; padding:26px; min-height:360px; border:12px solid var(--wood);
  background:radial-gradient(ellipse at center,var(--felt1),var(--felt2) 75%); box-shadow:0 0 0 3px var(--gold2),0 0 0 7px var(--wood2),0 24px 50px rgba(0,0,0,.65),inset 0 0 70px rgba(0,0,0,.55); }
.felt::after { content:'♠ ♥ ♦ ♣'; position:absolute; left:0; right:0; top:48%; text-align:center; color:rgba(255,255,255,.05); font-size:60px; letter-spacing:20px; pointer-events:none; }
.pseats { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; position:relative; z-index:1; } .pseats .seat { background:rgba(5,15,10,.72); border-color:rgba(255,255,255,.14); }
.center { text-align:center; margin:14px 0; position:relative; z-index:1; }
.board, .hole { display:flex; gap:9px; justify-content:center; min-height:76px; margin:8px 0; }
.hole { margin-top:16px; }
.pot { display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; background:rgba(0,0,0,.5); border:1px solid var(--gold2); border-radius:999px; padding:6px 18px; font-weight:700; }
.pcard { width:52px; height:74px; background:linear-gradient(180deg,#fff,#eee); color:#111; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:800; box-shadow:0 3px 8px rgba(0,0,0,.5); line-height:1.05; animation:deal .3s ease-out; }
.pcard span:first-child { font-size:20px; } .pcard span:last-child { font-size:26px; }
.pcard.red { color:#d02a2a; }
.pcard.back { background:repeating-linear-gradient(45deg,#8a1c2b,#8a1c2b 5px,#5e1019 5px,#5e1019 10px); border:3px solid #f5f1e4; }
.pcard.small { width:32px; height:46px; } .pcard.small span:first-child { font-size:12px; } .pcard.small span:last-child { font-size:15px; }
@keyframes deal { from { transform:translateY(-14px) scale(.9); opacity:0; } }
.mycards { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; }
.mycards .hole { margin:0; }
.controls { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:14px; padding:12px; border-radius:14px; background:rgba(0,0,0,.35); border:1px solid var(--line); }
.controls input[type=number] { width:96px; padding:9px; background:#0b1120; color:var(--text); border:1px solid var(--line); border-radius:10px; }
.controls input[type=range] { accent-color:var(--gold); }
.result, .txs { background:#0b1120; border:1px solid var(--line); border-radius:12px; padding:12px; white-space:pre-wrap; font-size:13px; }
.result { border-color:var(--gold2); color:var(--gold); font-weight:600; }
.result:empty, .lasthand:empty { display:none; }
.lasthand { margin-top:10px; }

/* Cüzdan penceresi */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:30; }
.modal[hidden], [hidden] { display:none !important; } .modal-body { width:min(540px,94vw); }
.row { display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; } .row input, .row select { background:#0b1120; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:9px; }
@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  body.in-game .topbar { min-height:0; height:auto; flex-wrap:wrap; }
  body.in-game .userbox { flex-wrap:wrap; }
  .playing-table { width:auto; height:auto; min-height:0; overflow:visible; padding:8px 12px; }
  #table:not([hidden]) { display:block; flex:none; }
  #okeyView:not([hidden]) { display:block; }
  .okey-arena { height:auto; min-height:360px; }
  .rack-panel { max-height:none; }
  .playing-table { padding:14px; }
  .playing-table .tablebar { margin-bottom:2px; }
  .playing-table .infos .tag:nth-child(3),.playing-table .infos .tag:nth-child(4),.playing-table .infos .tag:nth-child(n+6) { display:none; }
  .playing-table .tag { padding:1px 5px; font-size:9px; }
  .playing-table .timer { width:30px; height:30px; min-width:30px; font-size:12px; }
  .okey-arena { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto auto auto; grid-template-areas:"top top" "left right" "center center" "bottom bottom"; gap:4px; min-height:0; padding:8px; border-radius:16px; }
  .okey-arena::before { inset:12px 2%; border-radius:34% / 28%; }
  .okey-seat { width:100%; max-width:245px; padding:0; }
  .okey-profile { padding:4px; }
  .okey-seat .avatar.big { width:28px; height:28px; font-size:16px; }
  .okey-seat .seat-info { gap:3px; margin-top:2px; }
  .okey-seat .tag { padding:1px 4px; font-size:9px; }
  .okey-seat .who b { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
  .okey-seat .sub { gap:4px; font-size:10px; }
  .okey-seat.position-top,.okey-seat.position-bottom { grid-column:1 / -1; width:100%; max-width:none; flex-direction:row; align-items:center; }
  .okey-seat.position-top .okey-profile,.okey-seat.position-bottom .okey-profile { flex:0 0 42%; }
  .okey-seat.position-top .discard-pile,.okey-seat.position-bottom .discard-pile { flex:1; }
  .okey-seat.position-left { grid-area:left; justify-self:end; }
  .okey-seat.position-right { grid-area:right; justify-self:start; }
  .okey-center { padding:4px 0; }
  .table-mark { gap:5px; font-size:14px; letter-spacing:2px; }
  .center-tiles { gap:8px; margin:6px 0; }
  .deck-stack { padding:5px 7px; column-gap:4px; }
  .deck-mark { font-size:20px; }
  .indicator-wrap .tile { width:28px; height:38px; }
  .indicator-status { min-height:12px; }
  .table-status { min-height:0; padding:4px 8px; font-size:10px; }
  .discard-pile { gap:2px; padding:1px 3px; }
  .discard-tiles { max-height:28px; padding:0 2px 2px; }
  .discard-tiles .tile.discard-tile { flex-basis:20px; width:20px; min-width:20px; height:24px; font-size:11px; }
  .okey-actions { gap:5px; }
  .okey-actions .btn { min-width:0; flex:1; padding:5px 6px; font-size:10px; }
  .okey-actions .check { flex-basis:100%; margin-left:0; text-align:center; font-size:11px; }
  .rack-panel { width:100%; }
  .rack-panel { padding:4px; }
  .rack-heading { margin-bottom:3px; font-size:9px; }
  .rack { gap:3px; margin:0 auto; padding:3px 4px 5px; border-bottom-width:3px; min-height:0; }
  .rack-row { gap:2px; height:34px; min-height:34px; }
  .rack-slot { flex-basis:clamp(28px,7vw,34px); width:clamp(28px,7vw,34px); height:32px; }
  .rack-row .tile { flex-basis:clamp(28px,7vw,34px); width:clamp(28px,7vw,34px); min-width:28px; max-width:none; margin:0; height:32px; border-radius:5px; font-size:clamp(12px,3.8vw,16px); }
  .discard-tiles .tile.discard-tile { flex:0 0 20px; width:20px; min-width:20px; height:24px; font-size:11px; }
  #hand[data-mode="101"] .tile,#hand[data-mode="team-101"] .tile,#hand[data-mode="101-stacked"] .tile { height:32px; font-size:clamp(12px,3.8vw,15px); }
  .rack-heading { gap:5px; font-size:10px; letter-spacing:.6px; }
  .rack-tip { font-size:9px; }
  .hero h1 { font-size:26px; }
}
@media (max-width:420px) {
  .okey-seat { max-width:100%; }
  .okey-seat .seat-info .tag { padding:2px 5px; font-size:10px; }
  .table-mark { font-size:15px; }
  .table-mark-sub { font-size:8px; }
  .center-tiles { gap:13px; }
  .rack-row .tile { font-size:clamp(12px,4vw,17px); }
}

/* Okey table layout */
body.in-game {
  background:radial-gradient(ellipse at 50% 100%,#1d211b 0%,#10120f 52%,#090a09 100%);
}
body.in-game .topbar {
  min-height:54px;
  padding:6px clamp(12px,2.4vw,34px);
  background:linear-gradient(180deg,#121411,#090a09);
  border-bottom:1px solid rgba(226,188,119,.34);
  box-shadow:0 6px 24px rgba(0,0,0,.32);
}
body.in-game .brand .logo { box-shadow:0 0 0 2px #1a1204 inset,0 0 12px rgba(242,193,78,.28); }
body.in-game .bal { background:#171a16; border-color:#30342c; }
body.in-game .pill { background:#171a16; border-color:#30342c; }
body.in-game .userbox .btn.ghost { border-color:#35382f; background:#141612; }
body.in-game main.playing-table {
  width:100%;
  max-width:1480px;
  height:calc(100dvh - 54px);
  margin:0 auto;
  padding:8px clamp(10px,2vw,28px) 12px;
}
.playing-table .tablebar {
  min-height:40px;
  margin:0 0 7px;
  padding:4px 10px;
  border:1px solid #252820;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(24,27,22,.95),rgba(15,17,14,.96));
  box-shadow:0 3px 12px rgba(0,0,0,.2);
}
.playing-table .infos { gap:6px; }
.playing-table .tag {
  padding:4px 10px;
  border-color:#34372e;
  border-radius:999px;
  background:#1b1e18;
  color:#d5d4ca;
  font-size:11px;
}
.playing-table .tag.gold {
  border-color:rgba(222,181,96,.55);
  background:rgba(111,79,26,.22);
  color:#f3d48f;
}
.playing-table .timer {
  width:34px;
  height:34px;
  min-width:34px;
  border:1px solid rgba(226,188,119,.46);
  background:#171913;
  font-size:13px;
}
#okeyView:not([hidden]) { gap:8px; }
.okey-arena {
  --table-light:#116743;
  --table-mid:#0c5538;
  --table-dark:#073b2a;
  --table-trim-rgb:226,188,119;
  position:relative;
  grid-template-columns:minmax(145px,.8fr) minmax(260px,1.7fr) minmax(145px,.8fr);
  grid-template-rows:minmax(64px,.72fr) minmax(130px,1.55fr) minmax(64px,.72fr);
  gap:8px;
  padding:12px 20px;
  border:9px solid #55361b;
  border-radius:30px;
  background:
    radial-gradient(ellipse at 50% 45%,#16764e 0%,#0d5c3c 47%,#08442f 100%);
  box-shadow:
    0 0 0 2px #a97835,
    0 8px 18px rgba(0,0,0,.38),
    inset 0 0 0 2px rgba(236,199,136,.28),
    inset 0 0 65px rgba(0,0,0,.2);
}
.okey-arena::before {
  inset:8px;
  border:1px solid rgba(244,220,174,.16);
  border-radius:22px;
}
.okey-arena::after {
  opacity:.08;
  background-size:42px 72px;
}
.okey-seat { width:min(100%,225px); gap:5px; }
.okey-seat.position-left,.okey-seat.position-right { width:min(100%,185px); }
.okey-profile {
  padding:7px 9px;
  border-color:rgba(232,218,180,.28);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(20,35,27,.94),rgba(12,25,19,.94));
  box-shadow:0 5px 14px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.07);
}
.okey-seat .seat-info { margin-top:5px; }
.okey-seat .tag { border-radius:999px; }
.okey-empty-profile {
  min-height:65px;
  border-color:rgba(231,221,192,.27);
  border-radius:12px;
  background:rgba(7,31,22,.38);
}
.okey-center { gap:5px; }
.table-mark { color:#f5e2b9; text-shadow:0 2px 12px rgba(0,0,0,.38); }
.center-tiles { gap:clamp(12px,2.6vw,34px); margin:8px 0; }
.deck-wrap,.last-discard-wrap,.indicator-wrap {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:68px;
}
.deck-wrap>small,.last-discard-wrap>small,.indicator-wrap>small {
  color:#e4d8b8;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.2px;
}
.deck-stack {
  position:relative;
  min-width:72px;
  min-height:75px;
  padding:11px 12px;
  border:1px solid rgba(245,224,176,.38);
  border-radius:9px;
  background:linear-gradient(145deg,#355b4a,#142f25);
  box-shadow:0 4px 0 #442e1c,0 7px 12px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.12);
}
.deck-mark { color:#f2d89d; text-shadow:0 2px 4px rgba(0,0,0,.5); }
.deck-stack b { color:#fff5da; }
.deck-stack small { color:#d7c8a4; }
.last-discard-tile {
  display:grid;
  min-width:50px;
  min-height:69px;
  place-items:center;
}
.last-discard-tile .tile {
  width:46px;
  height:64px;
  border-radius:7px;
  cursor:default;
  box-shadow:0 3px 0 #a99a78,0 6px 12px rgba(0,0,0,.32);
}
.last-discard-tile .tile.last-discard {
  outline:2px solid #f5d686;
  outline-offset:2px;
}
.discard-placeholder { color:rgba(246,232,196,.48); font-size:24px; }
.indicator-wrap { flex-direction:column; gap:6px; }
.indicator-wrap .tile { width:46px; height:64px; border-radius:7px; }
.indicator-status { min-height:14px; color:#f4d88e; }
.table-status {
  min-height:28px;
  padding:5px 13px;
  border-color:rgba(238,220,177,.25);
  border-radius:999px;
  background:rgba(5,31,21,.58);
  box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.discard-pile {
  gap:7px;
  padding:4px 7px;
  border-color:rgba(232,218,180,.2);
  border-radius:8px;
  background:rgba(4,24,17,.4);
}
.discard-label { color:#e9d8b0; }
.okey-actions {
  min-height:48px;
  gap:8px;
  padding:6px 10px;
  border-color:#2b3028;
  border-radius:12px;
  background:linear-gradient(180deg,#1d211a,#141711);
  box-shadow:0 4px 12px rgba(0,0,0,.17);
}
.okey-actions .btn {
  min-height:36px;
  padding:7px 16px;
  border-color:#404338;
  border-radius:9px;
  font-size:12px;
}
.okey-actions #drawStack { min-width:148px; }
.okey-actions #drawDiscard { min-width:142px; }
.okey-actions .btn:not(:disabled) { border-color:rgba(222,181,96,.5); }
.okey-actions .btn.primary {
  background:linear-gradient(180deg,#e9ca82,#b98a3b);
  border-color:#e4c47d;
}
.okey-actions .check { font-size:12px; }
.rack-panel {
  width:fit-content;
  max-width:100%;
  justify-self:center;
  padding:3px 8px 8px;
  border:0;
  background:none;
  box-shadow:none;
}
.rack-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"title count controls";
  align-items:center;
  gap:10px;
  margin:0 2px 6px;
  color:#fff0cd;
}
.rack-title { grid-area:title; font-size:11px; font-weight:900; letter-spacing:1.3px; }
.rack-tip { color:#f0d7a8; font-size:9px; }
.hand-count { grid-area:count; color:#fff0cd; font-size:11px; }
.rack-sort-controls { grid-area:controls; display:flex; gap:6px; }
.sort-btn {
  min-height:31px;
  padding:4px 13px;
  border-color:rgba(255,237,196,.42);
  border-radius:8px;
  background:linear-gradient(180deg,#3b6248,#24432f);
  color:#f5edda;
  font-size:11px;
  font-weight:800;
}
.sort-btn:hover:not(:disabled) { border-color:#f1d58f; background:linear-gradient(180deg,#4c7858,#2c523b); }
.rack {
  width:max-content;
  max-width:100%;
  align-items:center;
  gap:4px;
  min-height:0;
  padding:8px 10px 12px;
  border:2px solid #513016;
  border-top:5px solid #d5a361;
  border-bottom:9px solid #412613;
  border-radius:8px 8px 13px 13px;
  background:
    linear-gradient(90deg,rgba(255,221,164,.16),transparent 13%,rgba(73,40,17,.14) 50%,transparent 87%,rgba(255,221,164,.12)),
    linear-gradient(180deg,#bd8543 0%,#a86d30 48%,#805020 100%);
  box-shadow:
    0 8px 14px rgba(0,0,0,.38),
    0 2px 0 #d9a964 inset,
    0 -3px 0 rgba(43,25,12,.65) inset,
    0 0 0 1px rgba(255,222,167,.18);
}
.rack::before {
  z-index:0;
  inset:8px 9px 10px;
  border:1px solid rgba(226,177,111,.34);
  border-radius:5px;
  background:linear-gradient(180deg,#3b2618,#4d301b 45%,#352114);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.5),inset 0 1px rgba(255,230,187,.12);
}
.rack::after {
  z-index:2;
  left:8px;
  right:8px;
  height:6px;
  border:1px solid #70451f;
  background:linear-gradient(180deg,#e1b46e 0%,#a66d32 40%,#603a1d 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.55),0 1px rgba(255,232,193,.3) inset;
}
.rack-row {
  position:relative;
  width:max-content;
  max-width:100%;
  justify-content:center;
  height:49px;
  gap:4px;
  padding:3px 4px 5px;
  border:1px solid rgba(212,166,100,.32);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(18,13,9,.48),rgba(67,43,25,.35));
  box-shadow:inset 0 2px 5px rgba(0,0,0,.36),inset 0 -1px rgba(255,221,168,.08);
}
.rack-slot { flex-basis:40px; width:40px; height:45px; }
.rack-row .tile {
  flex-basis:40px;
  width:40px;
  min-width:40px;
  height:45px;
  border-radius:5px;
  font-size:21px;
}

@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  body.in-game main.playing-table {
    width:100%;
    height:auto;
    min-height:calc(100dvh - 54px);
    padding:8px 10px 14px;
    box-sizing:border-box;
  }
  #table:not([hidden]),#okeyView:not([hidden]) { width:100%; min-width:0; box-sizing:border-box; }
  .playing-table .tablebar { padding:4px 6px; }
  .playing-table .infos { max-width:calc(100% - 38px); }
  .playing-table .infos .tag:nth-child(4) { display:none; }
  .okey-arena {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
    grid-template-areas:"top top" "left right" "center center" "bottom bottom";
    min-height:0;
    padding:8px;
    border-width:6px;
    border-radius:20px;
  }
  .okey-arena::before { inset:7px; border-radius:15px; }
  .okey-seat { max-width:230px; }
  .okey-seat.position-left,.okey-seat.position-right { width:min(100%,185px); }
  .okey-seat.position-top,.okey-seat.position-bottom {
    grid-column:1 / -1;
    width:100%;
    max-width:none;
    flex-direction:row;
    align-items:center;
  }
  .okey-seat.position-top .okey-profile,.okey-seat.position-bottom .okey-profile { flex:0 0 42%; }
  .okey-seat.position-top .discard-pile,.okey-seat.position-bottom .discard-pile { flex:1; }
  .okey-center { padding:4px 0; }
  .center-tiles { gap:clamp(6px,3vw,16px); margin:5px 0; }
  .deck-wrap,.last-discard-wrap,.indicator-wrap { min-width:58px; gap:3px; }
  .deck-wrap>small,.last-discard-wrap>small,.indicator-wrap>small { font-size:8px; letter-spacing:.6px; }
  .deck-stack { min-width:58px; min-height:58px; padding:7px; }
  .deck-mark { font-size:20px; }
  .deck-stack b { font-size:15px; }
  .last-discard-tile { min-width:42px; min-height:57px; }
  .last-discard-tile .tile,.indicator-wrap .tile { width:39px; height:54px; font-size:18px; }
  .okey-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:6px; }
  .okey-actions .btn { min-width:0!important; width:100%; min-height:38px; padding:5px 6px; font-size:10px; }
  .okey-actions .check { grid-column:1 / -1; margin:0; text-align:center; }
  .rack-panel { width:100%; min-width:0; max-width:100%; box-sizing:border-box; padding:3px 5px 7px; border:0; border-radius:0; }
  .rack-heading {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title count" "controls controls";
    gap:5px;
    margin-bottom:5px;
  }
  .rack-title { font-size:10px; }
  .rack-tip { display:none; }
  .rack-sort-controls { justify-self:end; }
  .sort-btn { min-height:30px; padding:4px 12px; font-size:10px; }
  .rack { width:max-content; min-height:0; gap:3px; padding:7px 7px 9px; border-top-width:4px; border-bottom-width:7px; }
  .rack-row { width:max-content; height:36px; min-height:36px; gap:2px; padding:2px 3px 4px; }
  .rack-slot { flex-basis:clamp(28px,7vw,34px); width:clamp(28px,7vw,34px); height:32px; }
  .rack-row .tile {
    flex-basis:clamp(28px,7vw,34px);
    width:clamp(28px,7vw,34px);
    min-width:28px;
    height:32px;
    font-size:clamp(12px,3.8vw,16px);
  }
}
@media (max-width:420px) {
  body.in-game .topbar { padding:5px 8px; }
  body.in-game .brand { gap:5px; font-size:14px; }
  body.in-game .brand .logo { width:26px; height:26px; font-size:14px; }
  body.in-game .userbox { gap:4px; }
  body.in-game .userbox .btn { padding:4px 6px; }
  body.in-game .balances { gap:3px; }
  body.in-game .bal { padding:2px 5px 2px 2px; font-size:9px; }
  body.in-game .bal .coin { width:17px; height:17px; font-size:9px; }
  body.in-game .userbox .pill { gap:4px; padding:2px 5px 2px 2px; font-size:9px; }
  .playing-table .infos .tag { padding:2px 5px; font-size:9px; }
  .okey-seat.position-top .okey-profile,.okey-seat.position-bottom .okey-profile { flex-basis:45%; }
  .okey-seat .who b { max-width:105px; }
  .center-tiles { gap:5px; }
}

/* Refined Okey table composition */
.okey-arena {
  grid-template-columns:minmax(175px,.78fr) minmax(300px,1.44fr) minmax(175px,.78fr);
  grid-template-rows:minmax(105px,.72fr) minmax(170px,1.35fr) minmax(105px,.72fr);
  grid-template-areas:"top top top" "left center right" "bottom bottom bottom";
  gap:4px;
  padding:15px 20px;
}
.okey-seat {
  align-self:center;
  justify-self:center;
  width:min(100%,205px);
  gap:7px;
}
.okey-seat.position-top,.okey-seat.position-bottom {
  align-self:center;
  justify-self:center;
  flex-direction:row;
  align-items:center;
  width:min(100%,520px);
  max-width:100%;
}
.okey-seat.position-top .okey-profile,.okey-seat.position-bottom .okey-profile {
  flex:0 0 min(40%,205px);
}
.okey-seat.position-top .discard-pile,.okey-seat.position-bottom .discard-pile {
  flex:1 1 0;
  min-width:0;
}
.okey-seat.position-left,.okey-seat.position-right {
  width:min(100%,190px);
}
.okey-seat.position-left { justify-self:start; }
.okey-seat.position-right { justify-self:end; }
.okey-seat.position-left .discard-pile,.okey-seat.position-right .discard-pile {
  min-height:40px;
}
.okey-profile {
  padding:8px 10px;
  border-color:rgba(235,224,193,.26);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(18,39,29,.94),rgba(8,27,19,.93));
  box-shadow:0 5px 14px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.07);
}
.okey-seat .avatar.big { width:38px; height:38px; font-size:21px; }
.okey-seat .seat-top { gap:9px; }
.okey-seat .who b { font-size:13px; }
.okey-seat .sub { font-size:10px; }
.okey-seat .seat-info { margin-top:5px; }
.okey-seat .tag { padding:2px 7px; font-size:10px; }
.discard-pile {
  min-height:42px;
  gap:7px;
  padding:5px 7px;
  border-color:rgba(229,219,192,.2);
  border-radius:8px;
  background:rgba(5,24,17,.42);
}
.discard-label { font-size:9px; letter-spacing:.35px; }
.discard-empty { font-size:10px; }
.discard-tiles { gap:3px; max-height:40px; padding:2px 3px 5px; }
.discard-tiles .tile.discard-tile {
  flex-basis:24px;
  width:24px;
  min-width:24px;
  height:32px;
  border-radius:4px;
  font-size:13px;
  box-shadow:0 2px 0 #a99a78,0 3px 5px rgba(0,0,0,.24);
}
.okey-center {
  width:min(100%,620px);
  justify-self:center;
  gap:7px;
}
.table-mark { font-size:15px; letter-spacing:2.5px; }
.center-tiles {
  gap:0;
  margin:7px 0;
  padding:7px 0;
  border:1px solid rgba(226,211,172,.15);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(4,38,26,.28),rgba(5,31,22,.15));
  box-shadow:0 8px 20px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.04);
}
.deck-wrap,.last-discard-wrap,.indicator-wrap {
  position:relative;
  flex:1 1 0;
  min-width:95px;
  min-height:100px;
  gap:8px;
  padding:5px 12px;
}
.deck-wrap + .last-discard-wrap,
.last-discard-wrap + .indicator-wrap {
  border-left:1px solid rgba(226,211,172,.17);
}
.deck-wrap>small,.last-discard-wrap>small,.indicator-wrap>small {
  color:#e7d8b5;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.05px;
}
.deck-stack {
  grid-template-columns:auto auto;
  min-width:69px;
  min-height:67px;
  padding:9px 11px;
  border:1px solid rgba(242,218,165,.28);
  border-radius:8px;
  background:linear-gradient(145deg,#294b3a,#142f25);
  box-shadow:0 3px 0 #372615,0 5px 9px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.1);
}
.deck-mark { font-size:24px; }
.deck-stack b { font-size:17px; }
.last-discard-tile { min-width:48px; min-height:67px; }
.last-discard-tile .tile,.indicator-wrap .tile {
  width:43px;
  height:59px;
  border-radius:6px;
  font-size:20px;
}
.indicator-wrap { flex-direction:column; gap:8px; }
.table-status {
  min-height:27px;
  padding:5px 12px;
  font-size:11px;
}
.indicator-status { min-height:13px; font-size:10px; }
.melds { max-height:90px; overflow:auto; margin:0 0 2px; }
.meld-row { padding:4px 6px; border-radius:8px; }
.okey-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  min-height:0;
  padding:8px 10px;
  border:1px solid rgba(229,218,190,.11);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(24,28,22,.94),rgba(15,18,14,.96));
  box-shadow:0 5px 16px rgba(0,0,0,.18);
}
.action-group {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:4px;
  border:1px solid rgba(229,218,190,.13);
  border-radius:10px;
  background:rgba(8,11,8,.35);
}
.action-group[hidden] { display:none; }
.okey-actions .btn {
  min-height:38px;
  padding:7px 15px;
  border:1px solid #44473c;
  border-radius:8px;
  background:linear-gradient(180deg,#292d25,#1d211a);
  color:#f0eee6;
  font-size:12px;
  font-weight:700;
  box-shadow:inset 0 1px rgba(255,255,255,.05);
}
.okey-actions .btn:not(:disabled):hover { filter:brightness(1.12); }
.okey-actions #drawStack {
  min-width:146px;
  border-color:#4c7154;
  background:linear-gradient(180deg,#47704e,#2e5136);
  color:#fff;
}
.okey-actions #drawDiscard {
  min-width:146px;
  border-color:#555846;
  background:linear-gradient(180deg,#363a2e,#26291f);
}
.okey-actions #openMeld {
  border-color:#d2ae66;
  background:linear-gradient(180deg,#e1c47f,#b38a47);
  color:#261b0c;
}
.okey-actions #discardSelected {
  border-color:#8c4a43;
  background:linear-gradient(180deg,#8b4b42,#63352f);
}
.okey-actions .check {
  margin:0;
  padding:0 8px;
  color:#d5d3c9;
  font-size:11px;
}
.rack-heading { margin-bottom:5px; }
.rack-row .tile {
  flex-basis:38px;
  width:38px;
  min-width:38px;
  height:49px;
  border:1px solid #d5c7a8;
  border-radius:5px;
  background:linear-gradient(150deg,#fffefa 0%,#f7f0df 58%,#e8dcc3 100%);
  font-size:21px;
  box-shadow:0 3px 0 #a99a78,0 5px 8px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.95);
}
.rack-row .tile.selected { transform:translateY(-5px); }
.rack-row .tile-symbol { bottom:4px; font-size:9px; }

@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  .okey-arena {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto minmax(150px,auto) auto;
    grid-template-areas:"top top" "left right" "center center" "bottom bottom";
    gap:7px;
    padding:9px;
  }
  .okey-seat.position-top,.okey-seat.position-bottom {
    grid-column:1 / -1;
    width:min(100%,540px);
  }
  .okey-seat.position-top .okey-profile,.okey-seat.position-bottom .okey-profile { flex-basis:40%; }
  .okey-seat.position-left,.okey-seat.position-right {
    width:min(100%,190px);
    max-width:100%;
  }
  .okey-seat.position-left { justify-self:start; }
  .okey-seat.position-right { justify-self:end; }
  .okey-seat .avatar.big { width:32px; height:32px; font-size:18px; }
  .okey-seat .who b { max-width:120px; }
  .okey-center { width:min(100%,560px); }
  .center-tiles { width:min(100%,450px); }
  .deck-wrap,.last-discard-wrap,.indicator-wrap {
    min-width:0;
    min-height:90px;
    padding:4px 6px;
  }
  .deck-wrap>small,.last-discard-wrap>small,.indicator-wrap>small { font-size:8px; letter-spacing:.55px; }
  .deck-stack { min-width:60px; min-height:60px; padding:7px; }
  .last-discard-tile { min-width:40px; min-height:57px; }
  .last-discard-tile .tile,.indicator-wrap .tile { width:37px; height:51px; font-size:18px; }
  .okey-actions { gap:6px; padding:6px; }
  .action-group { gap:4px; padding:3px; }
  .draw-actions { flex:0 1 auto; }
  .turn-actions { flex-wrap:wrap; }
  .okey-actions .btn { min-height:36px; padding:6px 10px; font-size:11px; }
  .okey-actions #drawStack,.okey-actions #drawDiscard { min-width:120px; }
  .rack-panel { width:fit-content; max-width:100%; }
  .rack-row .tile {
    flex-basis:clamp(31px,6.2vw,38px);
    width:clamp(31px,6.2vw,38px);
    min-width:31px;
    height:43px;
    font-size:clamp(16px,3.8vw,20px);
  }
  .rack-slot {
    flex-basis:clamp(31px,6.2vw,38px);
    width:clamp(31px,6.2vw,38px);
    height:39px;
  }
}
@media (max-width:480px) {
  .okey-arena { gap:5px; padding:7px; border-radius:16px; }
  .okey-seat { gap:4px; }
  .okey-seat.position-left,.okey-seat.position-right { width:min(100%,160px); }
  .okey-seat .avatar.big { width:28px; height:28px; font-size:16px; }
  .okey-seat .seat-top { gap:6px; }
  .okey-seat .who b { max-width:94px; font-size:11px; }
  .okey-seat .sub { gap:3px; font-size:9px; }
  .okey-seat .seat-info { margin-top:3px; }
  .okey-seat .tag { padding:1px 5px; font-size:9px; }
  .discard-pile { min-height:34px; gap:4px; padding:3px 4px; }
  .discard-tiles { gap:2px; max-height:32px; }
  .discard-tiles .tile.discard-tile { flex-basis:20px; width:20px; min-width:20px; height:27px; font-size:11px; }
  .discard-label { font-size:8px; }
  .center-tiles { width:100%; }
  .deck-wrap,.last-discard-wrap,.indicator-wrap { min-height:80px; padding:3px; }
  .deck-wrap>small,.last-discard-wrap>small,.indicator-wrap>small { font-size:7px; letter-spacing:.3px; }
  .deck-stack { min-width:51px; min-height:53px; column-gap:3px; padding:5px; }
  .deck-mark { font-size:18px; }
  .deck-stack b { font-size:14px; }
  .deck-stack small { font-size:8px; }
  .last-discard-tile { min-width:34px; min-height:49px; }
  .last-discard-tile .tile,.indicator-wrap .tile { width:33px; height:46px; font-size:16px; }
  .table-status { padding:4px 8px; font-size:10px; }
  .okey-actions { flex-direction:column; align-items:stretch; }
  .action-group { width:100%; }
  .draw-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .turn-actions { display:flex; flex-wrap:wrap; }
  .okey-actions .btn { flex:1 1 auto; min-width:0!important; padding:6px 7px; font-size:10px; }
  .okey-actions #drawStack,.okey-actions #drawDiscard { min-width:0; width:100%; }
  .okey-actions .check { flex:1 0 100%; text-align:center; }
  .rack-heading { grid-template-columns:minmax(0,1fr) auto; }
  .rack-row .tile {
    flex-basis:clamp(28px,8.2vw,34px);
    width:clamp(28px,8.2vw,34px);
    min-width:28px;
    height:38px;
    font-size:clamp(14px,4vw,17px);
  }
  .rack-slot {
    flex-basis:clamp(28px,8.2vw,34px);
    width:clamp(28px,8.2vw,34px);
    height:34px;
  }
}

/* Finish: vivid felt and a true wooden rack with the controls on its rim. */
.playing-table[data-stake] .okey-arena,
.playing-table[data-stake="50"] .okey-arena,
.playing-table[data-stake="100"] .okey-arena {
  --table-light:#14935d;
  --table-mid:#08754a;
  --table-dark:#043c25;
  --table-trim-rgb:244,209,139;
  background:
    radial-gradient(ellipse at 50% 40%,#15945d 0%,#0b7549 43%,#06452d 76%,#032a1b 100%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px);
  box-shadow:
    0 0 0 2px #c18b43,
    0 10px 24px rgba(0,0,0,.4),
    inset 0 0 0 2px rgba(255,223,164,.3),
    inset 0 0 70px rgba(0,0,0,.16);
}
#okeyView:not([hidden]) { grid-template-rows:minmax(0,1fr) auto; gap:7px; }
.rack-panel {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  width:fit-content;
  max-width:100%;
  padding:7px 9px 9px;
  border:2px solid #3d2414;
  border-top:4px solid #a9753e;
  border-radius:10px;
  background:linear-gradient(180deg,#95612f 0%,#764a26 48%,#603b20 100%);
  box-shadow:0 -4px 18px rgba(0,0,0,.36),inset 0 1px rgba(255,224,175,.22);
}
.rack-panel .okey-actions {
  position:relative;
  z-index:4;
  align-self:center;
  width:fit-content;
  max-width:100%;
  flex-wrap:wrap;
  gap:4px;
  margin:0 auto 6px;
  padding:4px;
  border:1px solid rgba(255,229,185,.24);
  border-radius:9px;
  background:rgba(38,25,14,.62);
  box-shadow:0 2px 6px rgba(28,16,8,.2);
  backdrop-filter:blur(4px);
}
.rack-panel .action-group { width:auto; padding:0; border:0; background:transparent; }
.rack-panel .okey-actions .btn {
  min-height:33px;
  padding:5px 12px;
  border-radius:7px;
  font-size:11px;
}
.rack-panel .okey-actions #drawStack {
  min-width:126px;
  border-color:#72a66b;
  background:linear-gradient(180deg,#498d51,#28643a);
}
.rack-panel .okey-actions #drawDiscard {
  min-width:126px;
  border-color:#c49b58;
  background:linear-gradient(180deg,#a87835,#785122);
  color:#fff9ed;
}
.rack-panel .okey-actions #openMeld {
  border-color:#f0d18a;
  background:linear-gradient(180deg,#f1d78f,#c49b50);
  color:#261b0c;
}
.rack-panel .okey-actions #discardSelected {
  border-color:#f08d78;
  background:linear-gradient(180deg,#c44b43,#8d2f32);
  color:#fff;
}
.rack-panel .okey-actions .check { margin:0; padding:0 5px; font-size:10px; }
.rack-row {
  height:55px;
  min-height:55px;
  align-items:center;
  overflow-x:auto;
  overflow-y:hidden;
  padding:7px 4px 4px;
}
.rack-slot { height:42px; align-items:center; }
.rack-row .tile {
  flex-basis:37px;
  width:37px;
  min-width:37px;
  height:43px;
  padding:2px 2px 5px;
  overflow:hidden;
  font:800 21px/1 Georgia,serif;
  box-shadow:0 2px 0 #a99a78,0 3px 6px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.95);
}
.rack-row .tile-number,.center-tiles .tile-number { font-size:1em; line-height:1; white-space:nowrap; }
.rack-row .tile-symbol,.center-tiles .tile-symbol { bottom:3px; font-size:9px; }
.rack-row .tile:hover { transform:translateY(-2px); }
.rack-row .tile.selected { transform:translateY(-3px); }
.center-tiles .tile {
  flex:0 0 38px;
  width:38px;
  min-width:38px;
  height:53px;
  padding:2px 2px 5px;
  border-radius:5px;
  font-size:19px;
  box-shadow:0 2px 0 #a99a78,0 4px 8px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.95);
}
.center-tiles .tile-symbol { font-size:8px; }

@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  body.in-game main.playing-table {
    height:auto;
    min-height:calc(100dvh - 110px);
    overflow:visible;
  }
  #table:not([hidden]) { flex:1; min-height:0; }
  #okeyView:not([hidden]) {
    grid-template-rows:minmax(360px,1fr) auto;
    gap:6px;
    overflow:visible;
  }
  .okey-arena { min-height:360px; }
  .okey-center { top:55%; }
  .okey-seat.position-left,.okey-seat.position-right { top:23%; width:min(135px,38vw); }
  .okey-seat.position-top { top:7px; }
  .okey-seat.position-bottom { bottom:7px; }
  .rack-panel { width:fit-content; max-width:100%; padding:5px 6px 7px; }
  .rack-panel .rack-heading {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title controls" "count controls";
    min-height:0;
    gap:2px 6px;
    margin-bottom:4px;
  }
  .rack-panel .okey-actions { width:fit-content; max-width:100%; gap:3px; margin-bottom:5px; padding:3px; }
  .rack-panel .okey-actions .btn { min-height:30px; padding:4px 8px; font-size:10px; }
  .rack-panel .okey-actions #drawStack,.rack-panel .okey-actions #drawDiscard { min-width:108px; }
  .rack-row { height:47px; min-height:47px; gap:2px; padding:6px 3px 3px; }
  .rack-slot { flex-basis:clamp(29px,6.8vw,36px); width:clamp(29px,6.8vw,36px); height:36px; }
  .rack-row .tile {
    flex-basis:clamp(29px,6.8vw,36px);
    width:clamp(29px,6.8vw,36px);
    min-width:29px;
    height:37px;
    font-size:clamp(16px,3.8vw,19px);
  }
}
@media (max-width:480px) {
  body.in-game main.playing-table { min-height:calc(100dvh - 150px); }
  #okeyView:not([hidden]) { grid-template-rows:minmax(360px,1fr) auto; }
  .okey-arena { min-height:360px; }
  .okey-seat.position-left { left:3px; }
  .okey-seat.position-right { right:3px; }
  .okey-seat.position-top,.okey-seat.position-bottom { width:min(340px,86vw); }
  .okey-seat.position-top .okey-profile,.okey-seat.position-bottom .okey-profile { flex:0 1 43%; }
  .okey-center { top:55%; max-width:76%; }
  .center-tiles { width:max-content; max-width:100%; gap:0; padding:3px; }
  .deck-wrap,.last-discard-wrap,.indicator-wrap {
    flex:0 1 auto;
    min-width:49px;
    min-height:60px;
    padding:2px;
  }
  .deck-wrap>small,.last-discard-wrap>small,.indicator-wrap>small { font-size:6px; letter-spacing:.2px; }
  .deck-stack { min-width:41px; min-height:43px; padding:3px 4px; }
  .last-discard-tile { min-width:27px; min-height:39px; }
  .center-tiles .tile,.last-discard-tile .tile,.indicator-wrap .tile {
    flex-basis:27px;
    width:27px;
    min-width:27px;
    height:38px;
    font-size:14px;
  }
  .rack-panel { width:fit-content; max-width:100%; }
  .rack-panel .okey-actions { width:100%; flex-direction:column; align-items:stretch; }
  .rack-panel .draw-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rack-panel .turn-actions { display:flex; flex-wrap:wrap; }
  .rack-panel .okey-actions .btn { flex:1 1 auto; min-width:0!important; padding:4px 6px; font-size:9px; }
  .rack-panel .okey-actions #drawStack,.rack-panel .okey-actions #drawDiscard { min-width:0; }
}

/* Reference-style central meld grid with a dedicated discard lane per seat. */
.meld-board {
  inset:18% auto 18% 18%;
  width:43%;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  grid-template-areas:"bottom right" "top left";
  gap:1px;
  border:1px solid rgba(238,248,232,.88);
  background:rgba(238,248,232,.8);
}
.meld-zone,
.meld-zone-top,
.meld-zone-left,
.meld-zone-right,
.meld-zone-bottom {
  min-width:0;
  min-height:0;
  gap:2px;
  padding:3px;
  overflow:hidden;
  border:0;
  border-radius:0;
  background-color:rgba(1,54,34,.88);
  background-image:
    repeating-linear-gradient(90deg,transparent 0 17px,rgba(233,247,224,.13) 17px 18px),
    repeating-linear-gradient(0deg,transparent 0 17px,rgba(233,247,224,.13) 17px 18px);
  box-shadow:none;
}
.meld-zone-bottom-left { grid-area:bottom; }
.meld-zone-top-right { grid-area:right; }
.meld-zone-bottom-right { grid-area:top; }
.meld-zone-top-left { grid-area:left; }
.meld-zone-heading {
  order:2;
  align-self:center;
  max-width:92%;
  padding:1px 5px;
  border-radius:1px;
  background:rgba(223,237,222,.78);
  color:#254232;
  font-size:clamp(7px,.68vw,10px);
  line-height:1.25;
}
.meld-zone.is-me .meld-zone-heading {
  background:rgba(223,237,222,.78);
  color:#254232;
}
.meld-zone-content {
  order:1;
  flex:1;
  min-height:0;
  align-content:flex-end;
  align-items:flex-end;
  gap:2px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(230,238,213,.38) transparent;
}
.meld-zone .meld-row {
  gap:1px;
  padding:1px;
  border:0;
  border-radius:1px;
  background:transparent;
}
.meld-zone .meld-row .tile {
  width:clamp(16px,2.1vw,27px);
  min-width:0;
  height:clamp(22px,2.8vw,36px);
  border-radius:2px;
  font-size:clamp(11px,1.3vw,16px);
}
.meld-zone .meld-row .tile-symbol { bottom:1px; font-size:6px; }
.discard-board {
  position:absolute;
  z-index:0;
  top:18%;
  bottom:18%;
  left:70%;
  width:14%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  border:1px solid rgba(238,248,232,.88);
  background:rgba(238,248,232,.8);
}
.discard-column {
  display:flex;
  min-width:0;
  min-height:0;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  background-color:rgba(1,54,34,.88);
  background-image:
    repeating-linear-gradient(0deg,transparent 0 17px,rgba(233,247,224,.13) 17px 18px);
}
.discard-column-tiles {
  display:flex;
  width:100%;
  min-height:0;
  flex:1;
  flex-direction:column;
  align-items:center;
  gap:2px;
  overflow-y:auto;
  padding:3px 1px 1px;
  scrollbar-width:thin;
  scrollbar-color:rgba(230,238,213,.38) transparent;
}
.discard-column .tile.discard-tile {
  flex:0 0 auto;
  width:clamp(17px,2vw,25px);
  min-width:0;
  height:clamp(24px,2.8vw,35px);
  padding:1px 0 4px;
  border:1px solid #d5cdbb;
  border-radius:2px;
  background:linear-gradient(145deg,#fffefa,#e8e0cd);
  font:800 clamp(10px,1.2vw,15px)/1 Georgia,serif;
  opacity:.96;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.discard-column .tile.discard-tile .tile-symbol {
  right:auto;
  bottom:1px;
  left:50%;
  font-size:6px;
  transform:translateX(-50%);
}
.discard-column .tile.discard-tile.last-discard {
  outline:1px solid #f5d477;
  outline-offset:0;
  box-shadow:0 0 5px rgba(255,218,122,.5);
}
.discard-player-label {
  flex:none;
  max-height:40%;
  overflow:hidden;
  padding:2px 1px;
  color:rgba(247,248,229,.8);
  font-size:clamp(6px,.65vw,9px);
  font-weight:800;
  line-height:1;
  text-overflow:ellipsis;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  white-space:nowrap;
}
.discard-column.is-me .discard-player-label { color:#bdf1a5; }
.okey-center {
  position:absolute;
  z-index:3;
  top:50%;
  left:61%;
  width:9%;
  max-width:none;
  gap:0;
  transform:translateY(-50%);
}
.okey-center .table-mark,
.okey-center .indicator-status,
.okey-center .table-status,
.center-tiles .last-discard-wrap,
.center-tiles .deck-wrap>small,
.center-tiles .deck-mark,
.center-tiles .deck-stack small { display:none; }
.center-tiles {
  width:100%;
  flex-direction:column;
  gap:10px;
  margin:0;
}
.indicator-wrap {
  flex-direction:column;
  gap:2px;
}
.indicator-wrap>small {
  font-size:clamp(6px,.58vw,8px);
  letter-spacing:.3px;
}
.indicator-wrap .tile {
  width:clamp(27px,3.8vw,38px);
  height:clamp(36px,5vw,49px);
  border-radius:3px;
  font-size:clamp(16px,2.3vw,23px);
}
.deck-stack {
  position:relative;
  display:block;
  width:clamp(34px,5.2vw,52px);
  height:clamp(48px,7vw,68px);
  padding:0;
  border:1px solid rgba(231,244,226,.78);
  border-radius:2px;
  background:rgba(1,35,25,.86);
  box-shadow:0 2px 4px rgba(0,0,0,.35);
}
.deck-stack b {
  position:absolute;
  top:-9px;
  right:-10px;
  display:grid;
  width:23px;
  height:23px;
  place-items:center;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:#18211e;
  color:#fff;
  font-size:11px;
  text-shadow:none;
}
@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  .meld-board {
    inset:23% auto 23% 4%;
    width:58%;
    gap:1px;
  }
  .meld-zone,
  .meld-zone-top,
  .meld-zone-left,
  .meld-zone-right,
  .meld-zone-bottom { padding:2px; }
  .meld-zone-heading { padding:1px 2px; font-size:6px; }
  .meld-zone .meld-row { gap:0; padding:0; }
  .meld-zone .meld-row .tile {
    width:clamp(13px,4vw,23px);
    height:clamp(19px,5.5vw,30px);
    font-size:clamp(9px,2.8vw,14px);
  }
  .discard-board {
    top:23%;
    bottom:23%;
    left:77%;
    width:19%;
    gap:1px;
  }
  .discard-column-tiles { gap:1px; padding:2px 0 1px; }
  .discard-column .tile.discard-tile {
    width:clamp(12px,4vw,20px);
    height:clamp(18px,5vw,27px);
    padding-bottom:3px;
    font-size:clamp(8px,2.5vw,12px);
  }
  .discard-column .tile.discard-tile .tile-symbol { font-size:5px; }
  .discard-player-label { padding:1px 0; font-size:6px; }
  .okey-center {
    top:50%;
    left:62%;
    width:14%;
  }
  .center-tiles { gap:6px; }
  .indicator-wrap>small { font-size:5px; }
  .indicator-wrap .tile {
    width:clamp(21px,7vw,31px);
    height:clamp(30px,9vw,40px);
    font-size:clamp(13px,4vw,19px);
  }
  .deck-stack {
    width:clamp(27px,8vw,36px);
    height:clamp(38px,11vw,49px);
  }
  .deck-stack b {
    top:-7px;
    right:-8px;
    width:18px;
    height:18px;
    font-size:9px;
  }
}
@media (max-width:480px) {
  .meld-board {
    inset:25% auto 25% 3%;
    width:59%;
  }
  .discard-board {
    top:25%;
    bottom:25%;
    left:77%;
    width:20%;
  }
  .meld-zone .meld-row .tile {
    width:clamp(12px,4.2vw,17px);
    height:clamp(17px,5.5vw,23px);
    font-size:clamp(8px,2.8vw,11px);
  }
  .discard-column .tile.discard-tile {
    width:clamp(11px,3.5vw,15px);
    height:clamp(16px,4.8vw,20px);
    font-size:clamp(7px,2.2vw,9px);
  }
  .okey-center { left:62%; width:14%; }
  .rack-panel .okey-actions .check { flex:1 0 100%; text-align:center; }
  .rack-row { height:41px; min-height:41px; gap:1px; padding:5px 2px 2px; }
  .rack-slot { flex-basis:clamp(26px,7vw,29px); width:clamp(26px,7vw,29px); height:32px; }
  .rack-row .tile {
    flex-basis:clamp(26px,7vw,29px);
    width:clamp(26px,7vw,29px);
    min-width:26px;
    height:33px;
    font-size:clamp(14px,3.7vw,16px);
  }
}

/* Keep the play actions attached to the rack and the table center compact. */
#okeyView:not([hidden]) {
  grid-template-rows:minmax(0,1fr) auto;
  gap:7px;
}
.okey-arena {
  grid-template-rows:minmax(90px,.68fr) minmax(140px,1fr) minmax(90px,.68fr);
  grid-template-areas:"top top top" "left center right" "bottom bottom bottom";
}
.okey-seat.position-top,.okey-seat.position-bottom {
  width:min(100%,560px);
}
.okey-seat.position-top { align-self:start; }
.okey-seat.position-bottom { align-self:end; }
.okey-seat.position-left { justify-self:start; }
.okey-seat.position-right { justify-self:end; }
.okey-center {
  width:max-content;
  max-width:100%;
}
.center-tiles {
  width:max-content;
  max-width:100%;
  flex:0 1 auto;
  gap:4px;
  padding:6px;
  border-radius:12px;
}
.deck-wrap,.last-discard-wrap,.indicator-wrap {
  flex:0 0 auto;
  min-width:82px;
  min-height:86px;
  gap:6px;
  padding:4px 8px;
}
.deck-wrap + .last-discard-wrap,
.last-discard-wrap + .indicator-wrap {
  border-left:1px solid rgba(226,211,172,.17);
}
.rack-panel {
  width:fit-content;
  max-width:100%;
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
}
.rack-heading {
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"title count controls";
  min-height:34px;
  margin:0 2px 5px;
}
.rack-sort-controls { justify-self:end; }
.okey-actions {
  width:max-content;
  max-width:100%;
  align-self:center;
  flex-wrap:wrap;
  gap:5px;
  margin:0 auto 6px;
  padding:4px;
  border:1px solid rgba(229,218,190,.18);
  border-radius:9px;
  background:rgba(15,18,14,.82);
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.action-group {
  min-width:0;
  flex-wrap:wrap;
  padding:2px;
  border:0;
  border-radius:7px;
  background:transparent;
}
.okey-actions .btn {
  min-height:34px;
  padding:6px 12px;
  font-size:11px;
}
.okey-actions #drawStack,.okey-actions #drawDiscard { min-width:128px; }
.rack {
  max-width:min(100%,900px);
  padding:7px 9px 11px;
}
.rack-row {
  max-width:100%;
  overflow-x:auto;
  justify-content:flex-start;
  scrollbar-width:thin;
  scrollbar-color:rgba(226,188,119,.5) rgba(21,14,9,.5);
}
.rack-row .tile {
  flex-basis:36px;
  width:36px;
  min-width:36px;
  height:46px;
  font-size:20px;
}

@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  #okeyView:not([hidden]) { grid-template-rows:auto auto; }
  .okey-arena {
    grid-template-rows:auto auto minmax(140px,auto) auto;
    grid-template-areas:"top top" "left right" "center center" "bottom bottom";
  }
  .okey-seat.position-top { align-self:start; }
  .okey-seat.position-bottom { align-self:end; }
  .okey-center { width:min(100%,560px); }
  .center-tiles { width:max-content; max-width:100%; gap:2px; padding:4px; }
  .deck-wrap,.last-discard-wrap,.indicator-wrap {
    min-width:68px;
    min-height:78px;
    padding:3px 5px;
  }
  .rack-panel { width:fit-content; max-width:100%; }
  .rack-heading {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title count" "controls controls";
  }
  .rack-sort-controls { justify-self:end; }
  .okey-actions {
    width:fit-content;
    max-width:100%;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:5px;
  }
  .action-group { width:auto; }
  .draw-actions { display:flex; }
  .turn-actions { display:flex; flex-wrap:wrap; }
  .okey-actions .btn { flex:0 1 auto; min-width:0!important; }
  .okey-actions #drawStack,.okey-actions #drawDiscard { min-width:112px; }
  .rack { max-width:min(100%,900px); }
  .rack-row { max-width:100%; }
}

/* Full-screen Okey Plus layout: table, action bar, and rack occupy fixed bands. */
#table:not([hidden]) { min-height:0; }
#okeyView:not([hidden]) {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto auto;
  gap:7px;
  min-height:0;
  overflow:hidden;
}
.okey-arena {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  border-radius:28px;
  background:radial-gradient(circle,#0f4c3a 0%,#0b3c2d 58%,#062319 100%);
}
.okey-seats { display:contents; }
.okey-seat {
  position:absolute;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  width:min(190px,22vw);
  max-width:none;
  max-height:38%;
  overflow:hidden;
  transform:none;
}
.okey-seat.position-top {
  top:12px;
  left:50%;
  align-self:auto;
  justify-self:auto;
  transform:translateX(-50%);
}
.okey-seat.position-left {
  top:45%;
  left:14px;
  width:min(180px,20vw);
  align-self:auto;
  justify-self:auto;
  transform:translateY(-50%);
}
.okey-seat.position-right {
  top:45%;
  right:14px;
  width:min(180px,20vw);
  align-self:auto;
  justify-self:auto;
  transform:translateY(-50%);
}
.okey-seat.position-bottom {
  bottom:14px;
  left:50%;
  align-self:auto;
  justify-self:auto;
  transform:translateX(-50%);
}
.okey-profile {
  width:100%;
  padding:6px 9px;
  border-radius:10px;
}
.okey-seat.position-top,.okey-seat.position-bottom {
  flex-direction:row;
  justify-content:center;
  width:min(480px,48vw);
}
.okey-seat.position-top .okey-profile,.okey-seat.position-bottom .okey-profile {
  flex:0 1 190px;
}
.okey-seat.position-top .discard-pile,.okey-seat.position-bottom .discard-pile {
  flex:1 1 0;
  min-width:0;
}
.okey-seat.position-left .discard-pile,.okey-seat.position-right .discard-pile {
  width:100%;
}
.okey-center {
  position:absolute;
  z-index:1;
  top:42%;
  left:50%;
  width:max-content;
  max-width:min(58%,560px);
  gap:4px;
  transform:translate(-50%,-50%);
}
.table-mark { font-size:13px; letter-spacing:2px; }
.center-tiles {
  display:flex;
  width:max-content;
  max-width:100%;
  flex:0 1 auto;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:2px 0;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  background:rgba(0,0,0,.3);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}
.deck-wrap,.last-discard-wrap,.indicator-wrap {
  position:relative;
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:68px;
  min-height:78px;
  padding:2px 4px;
}
.deck-wrap + .last-discard-wrap,.last-discard-wrap + .indicator-wrap {
  border-left:1px solid rgba(255,255,255,.13);
}
.deck-wrap>small,.last-discard-wrap>small,.indicator-wrap>small {
  color:#e7d8b5;
  font-size:8px;
  font-weight:800;
  letter-spacing:.55px;
}
.deck-stack {
  grid-template-columns:auto auto;
  min-width:54px;
  min-height:57px;
  padding:6px 8px;
  border-radius:8px;
  background:linear-gradient(145deg,#294b3a,#142f25);
}
.deck-mark { font-size:20px; }
.deck-stack b { font-size:15px; }
.last-discard-tile { min-width:39px; min-height:55px; }
.last-discard-tile .tile,.indicator-wrap .tile {
  width:38px;
  height:53px;
  border-radius:5px;
  font-size:18px;
}
.indicator-wrap { flex-direction:column; gap:5px; }
.okey-center .table-status {
  min-height:25px;
  padding:4px 11px;
  font-size:10px;
}
.okey-center .indicator-status { min-height:11px; font-size:9px; }
.okey-center .melds { max-height:64px; overflow:auto; margin:0; }
.okey-actions {
  position:relative;
  z-index:5;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  width:fit-content;
  max-width:100%;
  gap:7px;
  margin:0 auto;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:rgba(12,15,12,.82);
  box-shadow:0 5px 16px rgba(0,0,0,.3);
  backdrop-filter:blur(8px);
}
.action-group {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
  border:0;
  background:transparent;
}
.action-group[hidden] { display:none; }
.okey-actions .btn {
  min-height:34px;
  padding:6px 13px;
  border-radius:8px;
  font-size:11px;
}
.okey-actions #drawStack {
  min-width:126px;
  border-color:#4c7154;
  background:linear-gradient(180deg,#47704e,#2e5136);
  color:#fff;
}
.okey-actions #drawDiscard {
  min-width:126px;
  border-color:#555846;
  background:linear-gradient(180deg,#363a2e,#26291f);
}
.okey-actions #openMeld {
  border-color:#d2ae66;
  background:linear-gradient(180deg,#e1c47f,#b38a47);
  color:#261b0c;
}
.okey-actions #discardSelected {
  border-color:#8c4a43;
  background:linear-gradient(180deg,#8b4b42,#63352f);
}
.okey-actions .check { margin:0; padding:0 6px; font-size:10px; }
.rack-panel {
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  width:fit-content;
  max-width:100%;
  justify-self:center;
  padding:7px 9px 10px;
  border:2px solid #3d2414;
  border-top:4px solid #a9753e;
  border-radius:10px;
  background:linear-gradient(180deg,#8b5a2b 0%,#704724 48%,#5c3a21 100%);
  box-shadow:0 -4px 18px rgba(0,0,0,.36),inset 0 1px rgba(255,224,175,.22);
}
.rack-heading {
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"title count controls";
  align-items:center;
  min-height:29px;
  margin:0 2px 5px;
  color:#fff0cd;
}
.rack-title { font-size:10px; letter-spacing:1px; }
.rack-tip { color:#e2c18f; font-size:8px; }
.hand-count { font-size:10px; }
.rack-sort-controls {
  display:flex;
  justify-self:end;
  gap:4px;
}
.sort-btn {
  min-height:28px;
  padding:3px 10px;
  border-radius:7px;
  font-size:10px;
}
.rack {
  width:max-content;
  max-width:100%;
  min-height:0;
  gap:3px;
  padding:6px 8px 9px;
  border-top:3px solid #c08b50;
  border-bottom:7px solid #412613;
  border-radius:6px 6px 10px 10px;
}
.rack::before { inset:7px 8px 9px; }
.rack::after { left:7px; right:7px; height:5px; }
.rack-row {
  width:max-content;
  max-width:100%;
  height:46px;
  gap:3px;
  padding:2px 3px 4px;
}
.rack-slot { flex-basis:37px; width:37px; height:42px; }
.rack-row .tile {
  flex-basis:37px;
  width:37px;
  min-width:37px;
  height:44px;
  border-radius:5px;
  font-size:20px;
  box-shadow:0 2px 0 #a99a78,0 4px 7px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.95);
}

@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  body.in-game main.playing-table {
    height:calc(100dvh - 54px);
    min-height:0;
    overflow:hidden;
    padding:7px 9px 9px;
  }
  #table:not([hidden]) { display:flex; flex:1; min-height:0; }
  #okeyView:not([hidden]) {
    display:grid;
    flex:1;
    grid-template-rows:minmax(0,1fr) auto auto;
    gap:6px;
  }
  .okey-arena { min-height:0; border-width:5px; border-radius:18px; }
  .okey-seat {
    width:min(160px,42vw);
    max-height:34%;
    gap:3px;
  }
  .okey-seat.position-top,.okey-seat.position-bottom { width:min(380px,78vw); }
  .okey-seat.position-left {
    top:32%;
    left:6px;
    width:min(145px,40vw);
  }
  .okey-seat.position-right {
    top:32%;
    right:6px;
    width:min(145px,40vw);
  }
  .okey-seat.position-bottom { bottom:7px; }
  .okey-seat .avatar.big { width:28px; height:28px; font-size:16px; }
  .okey-seat .seat-top { gap:5px; }
  .okey-seat .who b { max-width:100px; font-size:11px; }
  .okey-seat .sub { gap:3px; font-size:9px; }
  .okey-seat .seat-info { margin-top:2px; }
  .okey-seat .tag { padding:1px 5px; font-size:9px; }
  .okey-profile { padding:5px 6px; border-radius:8px; }
  .discard-pile { min-height:30px; gap:3px; padding:2px 4px; border-radius:6px; }
  .discard-label { font-size:7px; }
  .discard-empty { font-size:8px; }
  .discard-tiles { gap:2px; max-height:26px; padding:1px 2px 3px; }
  .discard-tiles .tile.discard-tile {
    flex-basis:18px;
    width:18px;
    min-width:18px;
    height:24px;
    font-size:10px;
  }
  .okey-center { top:49%; max-width:76%; }
  .center-tiles { gap:2px; margin:1px 0; padding:4px; border-radius:10px; }
  .deck-wrap,.last-discard-wrap,.indicator-wrap { min-width:58px; min-height:67px; gap:3px; padding:2px 4px; }
  .deck-wrap>small,.last-discard-wrap>small,.indicator-wrap>small { font-size:7px; letter-spacing:.25px; }
  .deck-stack { min-width:47px; min-height:49px; column-gap:3px; padding:4px 6px; }
  .deck-mark { font-size:16px; }
  .deck-stack b { font-size:13px; }
  .deck-stack small { font-size:7px; }
  .last-discard-tile { min-width:32px; min-height:45px; }
  .last-discard-tile .tile,.indicator-wrap .tile { width:30px; height:42px; font-size:15px; }
  .okey-center .table-mark { font-size:11px; letter-spacing:1px; }
  .okey-center .table-mark-icon { font-size:14px; }
  .okey-center .table-status { min-height:20px; padding:3px 7px; font-size:9px; }
  .okey-actions { gap:4px; padding:4px 6px; }
  .action-group { gap:3px; }
  .okey-actions .btn { min-height:31px; padding:5px 8px; font-size:10px; }
  .okey-actions #drawStack,.okey-actions #drawDiscard { min-width:104px; }
  .okey-actions .check { font-size:9px; }
  .rack-panel { width:fit-content; max-width:100%; padding:5px 6px 8px; }
  .rack-heading {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title controls" "count controls";
    min-height:0;
    gap:2px 6px;
    margin-bottom:4px;
  }
  .rack-title { font-size:9px; }
  .rack-tip { display:none; }
  .hand-count { font-size:9px; }
  .sort-btn { min-height:26px; padding:3px 8px; font-size:9px; }
  .rack { gap:2px; padding:5px 5px 7px; }
  .rack-row { height:36px; min-height:36px; gap:2px; padding:1px 2px 3px; }
  .rack-slot {
    flex-basis:clamp(28px,6.8vw,36px);
    width:clamp(28px,6.8vw,36px);
    height:33px;
  }
  .rack-row .tile {
    flex-basis:clamp(28px,6.8vw,36px);
    width:clamp(28px,6.8vw,36px);
    min-width:28px;
    height:35px;
    font-size:clamp(14px,3.8vw,19px);
  }
}
@media (max-width:480px) {
  body.in-game main.playing-table { height:calc(100dvh - 112px); }
  .playing-table .tablebar { margin-bottom:3px; padding:3px 5px; }
  .playing-table .infos { gap:3px; }
  .playing-table .infos .tag { padding:2px 4px; font-size:8px; }
  #okeyView:not([hidden]) { gap:4px; }
  .okey-arena { border-radius:14px; }
  .okey-seat.position-top,.okey-seat.position-bottom { width:min(340px,86vw); }
  .okey-seat.position-left { top:31%; left:4px; width:min(130px,38vw); }
  .okey-seat.position-right { top:31%; right:4px; width:min(130px,38vw); }
  .okey-seat.position-bottom { bottom:5px; }
  .okey-profile { padding:4px; }
  .okey-seat .who b { max-width:86px; font-size:10px; }
  .okey-seat .sub { font-size:8px; }
  .discard-pile { min-height:26px; gap:2px; padding:2px 3px; }
  .discard-tiles .tile.discard-tile { flex-basis:16px; width:16px; min-width:16px; height:21px; font-size:9px; }
  .okey-center { top:50%; max-width:80%; }
  .center-tiles { gap:0; padding:3px; }
  .deck-wrap,.last-discard-wrap,.indicator-wrap { min-width:52px; min-height:60px; padding:2px; }
  .deck-wrap>small,.last-discard-wrap>small,.indicator-wrap>small { font-size:6px; }
  .deck-stack { min-width:42px; min-height:43px; padding:3px 4px; }
  .deck-mark { font-size:14px; }
  .deck-stack b { font-size:12px; }
  .last-discard-tile { min-width:27px; min-height:39px; }
  .last-discard-tile .tile,.indicator-wrap .tile { width:26px; height:37px; font-size:13px; }
  .okey-actions {
    width:100%;
    flex-wrap:wrap;
    gap:3px;
    padding:3px;
    border-radius:9px;
  }
  .action-group { gap:2px; }
  .okey-actions .btn { min-height:29px; padding:4px 6px; font-size:9px; }
  .okey-actions #drawStack,.okey-actions #drawDiscard { min-width:0; }
  .okey-actions .check { padding:0 3px; font-size:8px; }
  .rack-panel { padding:4px 4px 6px; }
  .rack-title { font-size:8px; }
  .sort-btn { min-height:24px; padding:2px 6px; font-size:8px; }
  .rack { padding:4px 4px 6px; }
  .rack-row { height:32px; min-height:32px; gap:1px; padding:1px; }
  .rack-slot {
    flex-basis:clamp(25px,7vw,29px);
    width:clamp(25px,7vw,29px);
    height:29px;
  }
  .rack-row .tile {
    flex-basis:clamp(25px,7vw,29px);
    width:clamp(25px,7vw,29px);
    min-width:25px;
    height:30px;
    font-size:clamp(12px,3.6vw,15px);
  }
}
@media (max-width:480px) {
  .center-tiles { width:100%; justify-content:center; gap:0; }
  .deck-wrap,.last-discard-wrap,.indicator-wrap {
    flex:1 1 0;
    min-width:0;
    padding:3px 2px;
  }
  .okey-actions {
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .action-group { width:100%; }
  .draw-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .turn-actions { display:flex; flex-wrap:wrap; }
  .okey-actions #drawStack,.okey-actions #drawDiscard { min-width:0; }
  .rack { max-width:100%; }
  .rack-row { max-width:100%; }
}

/* Saturated felt, fully visible tiles, and controls fixed to the wooden rack. */
.playing-table[data-stake] .okey-arena {
  --table-light:#118a56;
  --table-mid:#087047;
  --table-dark:#043c25;
  --table-trim-rgb:239,204,133;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(27,155,94,.88) 0%,rgba(13,111,68,.76) 42%,rgba(4,51,31,.96) 100%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px),
    #075335;
  box-shadow:
    0 0 0 2px #c18b43,
    0 10px 24px rgba(0,0,0,.4),
    inset 0 0 0 2px rgba(255,223,164,.3),
    inset 0 0 70px rgba(0,0,0,.16);
}
.playing-table[data-stake="50"] .okey-arena,
.playing-table[data-stake="100"] .okey-arena {
  --table-light:#118a56;
  --table-mid:#087047;
  --table-dark:#043c25;
  --table-trim-rgb:239,204,133;
}
body.in-game {
  background:radial-gradient(ellipse at 50% 0%,#153b2a 0%,#0d1a12 52%,#080b08 100%);
}
#okeyView:not([hidden]) {
  grid-template-rows:minmax(0,1fr) auto;
  gap:7px;
  overflow:visible;
}
.rack-panel {
  width:fit-content;
  max-width:100%;
  padding:7px 9px 9px;
  gap:0;
  border-color:#3d2414;
  background:linear-gradient(180deg,#95612f 0%,#764a26 48%,#603b20 100%);
  box-shadow:0 -4px 18px rgba(0,0,0,.36),inset 0 1px rgba(255,224,175,.22);
}
.rack-panel .okey-actions {
  position:relative;
  z-index:4;
  align-self:center;
  width:fit-content;
  max-width:100%;
  margin:0 auto 6px;
  padding:4px;
  border:1px solid rgba(255,229,185,.24);
  border-radius:9px;
  background:rgba(38,25,14,.62);
  box-shadow:0 2px 6px rgba(28,16,8,.2);
  backdrop-filter:blur(4px);
}
.rack-panel .action-group { width:auto; }
.rack-panel .okey-actions .btn {
  min-height:33px;
  padding:5px 12px;
  border-radius:7px;
  font-size:11px;
}
.rack-panel .okey-actions #drawStack {
  border-color:#72a66b;
  background:linear-gradient(180deg,#498d51,#28643a);
}
.rack-panel .okey-actions #drawDiscard {
  border-color:#c49b58;
  background:linear-gradient(180deg,#a87835,#785122);
  color:#fff9ed;
}
.rack-panel .okey-actions #openMeld {
  border-color:#f0d18a;
  background:linear-gradient(180deg,#f1d78f,#c49b50);
}
.rack-panel .okey-actions #discardSelected {
  border-color:#f08d78;
  background:linear-gradient(180deg,#c44b43,#8d2f32);
  color:#fff;
}
.rack-row {
  height:55px;
  min-height:55px;
  align-items:center;
  overflow-x:auto;
  overflow-y:hidden;
  padding:7px 4px 4px;
}
.rack-slot {
  height:42px;
  align-items:center;
}
.rack-row .tile {
  flex-basis:37px;
  width:37px;
  min-width:37px;
  height:43px;
  padding:2px 2px 5px;
  overflow:hidden;
  color:inherit;
  font:800 21px/1 Georgia,serif;
  box-shadow:0 2px 0 #a99a78,0 3px 6px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.95);
}
.rack-row .tile:hover { transform:translateY(-2px); }
.rack-row .tile.selected { transform:translateY(-3px); }
.rack-row .tile-number {
  font-size:1em;
  line-height:1;
  white-space:nowrap;
}
.rack-row .tile-symbol { bottom:3px; font-size:9px; }
.center-tiles .tile {
  flex:0 0 38px;
  width:38px;
  min-width:38px;
  height:53px;
  padding:2px 2px 5px;
  border-radius:5px;
  font-size:19px;
  box-shadow:0 2px 0 #a99a78,0 4px 8px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.95);
}
.center-tiles .tile-number {
  font-size:1em;
  line-height:1;
  white-space:nowrap;
}
.center-tiles .tile-symbol { bottom:3px; font-size:8px; }
.tile.wild { outline-offset:-3px; }

@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  body.in-game main.playing-table {
    height:auto;
    min-height:calc(100dvh - 110px);
    overflow:visible;
  }
  #table:not([hidden]) { flex:1; min-height:0; }
  #okeyView:not([hidden]) {
    grid-template-rows:minmax(360px,1fr) auto;
    gap:6px;
    overflow:visible;
  }
  .okey-arena { min-height:360px; }
  .okey-center { top:55%; }
  .okey-seat.position-left,.okey-seat.position-right {
    top:26%;
    width:min(135px,38vw);
    flex-direction:row;
    align-items:center;
    gap:3px;
  }
  .okey-seat.position-left .okey-profile,.okey-seat.position-right .okey-profile {
    flex:1 1 0;
    min-width:0;
    padding:4px;
  }
  .okey-seat.position-left .avatar.big,.okey-seat.position-right .avatar.big {
    width:25px;
    height:25px;
    font-size:14px;
  }
  .okey-seat.position-left .who b,.okey-seat.position-right .who b {
    max-width:52px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .okey-seat.position-left .seat-info,.okey-seat.position-right .seat-info,
  .okey-seat.position-left .sub,.okey-seat.position-right .sub,
  .okey-center .table-mark {
    display:none;
  }
  .okey-seat.position-left .discard-pile,.okey-seat.position-right .discard-pile {
    flex:0 0 34px;
    width:34px;
    min-height:0;
    padding:2px;
  }
  .okey-seat.position-left .discard-label,.okey-seat.position-right .discard-label,
  .okey-seat.position-left .discard-tile:not(.last-discard),
  .okey-seat.position-right .discard-tile:not(.last-discard) {
    display:none;
  }
  .okey-seat.position-left .discard-tiles,.okey-seat.position-right .discard-tiles {
    max-height:none;
    padding:0;
  }
  .okey-seat.position-left .discard-tiles .tile.discard-tile,
  .okey-seat.position-right .discard-tiles .tile.discard-tile {
    flex-basis:26px;
    width:26px;
    min-width:26px;
    height:35px;
    font-size:14px;
  }
  .okey-center .melds { max-height:30px; }
  .okey-seat.position-top { top:7px; }
  .okey-seat.position-bottom { bottom:7px; }
  .rack-panel { width:fit-content; max-width:100%; padding:5px 6px 7px; }
  .rack-panel .rack-heading {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title controls" "count controls";
    min-height:0;
    gap:2px 6px;
    margin-bottom:4px;
  }
  .rack-panel .okey-actions {
    width:fit-content;
    max-width:100%;
    flex-wrap:wrap;
    gap:3px;
    margin-bottom:5px;
    padding:3px;
  }
  .rack-panel .okey-actions .btn { min-height:30px; padding:4px 8px; font-size:10px; }
  .rack-panel .okey-actions #drawStack,.rack-panel .okey-actions #drawDiscard { min-width:108px; }
  .rack-row { height:47px; min-height:47px; padding:6px 3px 3px; gap:2px; }
  .rack-slot { flex-basis:clamp(29px,6.8vw,36px); width:clamp(29px,6.8vw,36px); height:36px; }
  .rack-row .tile {
    flex-basis:clamp(29px,6.8vw,36px);
    width:clamp(29px,6.8vw,36px);
    min-width:29px;
    height:37px;
    font-size:clamp(16px,3.8vw,19px);
  }
}
@media (max-width:480px) {
  body.in-game main.playing-table { min-height:calc(100dvh - 150px); }
  #okeyView:not([hidden]) { grid-template-rows:minmax(360px,1fr) auto; }
  .okey-arena { min-height:360px; }
  .okey-seat.position-left { left:3px; }
  .okey-seat.position-right { right:3px; }
  .okey-seat.position-top,.okey-seat.position-bottom { width:min(340px,86vw); }
  .okey-seat.position-top .okey-profile,.okey-seat.position-bottom .okey-profile { flex:0 1 43%; }
  .okey-center { top:55%; max-width:76%; }
  .center-tiles { width:max-content; max-width:100%; gap:0; padding:3px; }
  .deck-wrap,.last-discard-wrap,.indicator-wrap {
    flex:0 1 auto;
    min-width:49px;
    min-height:60px;
    padding:2px;
  }
  .deck-wrap>small,.last-discard-wrap>small,.indicator-wrap>small { font-size:6px; letter-spacing:.2px; }
  .deck-stack { min-width:41px; min-height:43px; padding:3px 4px; }
  .last-discard-tile { min-width:27px; min-height:39px; }
  .center-tiles .tile,.last-discard-tile .tile,.indicator-wrap .tile {
    flex-basis:27px;
    width:27px;
    min-width:27px;
    height:38px;
    font-size:14px;
  }
  .rack-panel { width:fit-content; max-width:100%; }
  .rack-panel .okey-actions { width:100%; flex-direction:column; align-items:stretch; }
  .rack-panel .draw-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rack-panel .turn-actions { display:flex; flex-wrap:wrap; }
  .rack-panel .okey-actions .btn { flex:1 1 auto; min-width:0!important; padding:4px 6px; font-size:9px; }
  .rack-panel .okey-actions #drawStack,.rack-panel .okey-actions #drawDiscard { min-width:0; }
  .rack-panel .okey-actions .check { flex:1 0 100%; text-align:center; }
  .rack-row { height:41px; min-height:41px; padding:5px 2px 2px; gap:1px; }
  .rack-slot { flex-basis:clamp(26px,7vw,29px); width:clamp(26px,7vw,29px); height:32px; }
  .rack-row .tile {
    flex-basis:clamp(26px,7vw,29px);
    width:clamp(26px,7vw,29px);
    min-width:26px;
    height:33px;
    font-size:clamp(14px,3.7vw,16px);
  }
}
@media (max-width:360px) {
  .rack-row { height:36px; min-height:36px; gap:0; padding:4px 1px 2px; }
  .rack-slot,.rack-row .tile {
    flex-basis:clamp(20px,6.6vw,22px);
    width:clamp(20px,6.6vw,22px);
    min-width:20px;
  }
  .rack-slot { height:29px; }
  .rack-row .tile {
    height:29px;
    padding:2px 1px 4px;
    font-size:clamp(12px,4vw,14px);
  }
  .rack-row .tile-symbol { bottom:2px; font-size:7px; }
}

/* Compact edge-player treatment inspired by the supplied Okey table layout. */
@media (min-width: 761px), (orientation: landscape) and (max-height: 520px) {
  .okey-seat.position-left,.okey-seat.position-right {
    flex-direction:row;
    align-items:center;
    gap:6px;
    width:min(100%,205px);
  }
  .okey-seat.position-left .okey-profile,.okey-seat.position-right .okey-profile {
    flex:1 1 0;
    min-width:0;
    padding:7px;
  }
  .okey-seat.position-left .avatar.big,.okey-seat.position-right .avatar.big {
    width:42px;
    height:42px;
    font-size:23px;
  }
  .okey-seat.position-left .discard-pile,.okey-seat.position-right .discard-pile {
    flex:0 0 38px;
    width:38px;
    min-height:0;
    padding:3px;
  }
  .okey-seat.position-left .discard-label,.okey-seat.position-right .discard-label,
  .okey-seat.position-left .discard-tile:not(.last-discard),
  .okey-seat.position-right .discard-tile:not(.last-discard) {
    display:none;
  }
  .okey-seat.position-left .discard-tiles,.okey-seat.position-right .discard-tiles {
    max-height:none;
    padding:0;
  }
  .okey-seat.position-left .discard-tiles .tile.discard-tile,
  .okey-seat.position-right .discard-tiles .tile.discard-tile {
    flex-basis:28px;
    width:28px;
    min-width:28px;
    height:39px;
    font-size:15px;
  }
}

/* Okey table recreation: burgundy surround, oval felt and a full-width wooden rack. */
@media (min-width: 761px), (orientation: landscape) and (max-height: 520px) {
  body.in-game {
    overflow:hidden;
    background:radial-gradient(ellipse at 50% 30%,#3a1009 0%,#240804 58%,#160402 100%);
    perspective:none;
  }
  body.in-game .topbar {
    position:relative;
    height:46px;
    min-height:46px;
    padding:5px 12px;
    border:0;
    background:linear-gradient(180deg,#2c0906,#1b0503);
    box-shadow:0 2px 6px rgba(0,0,0,.3);
  }
  body.in-game .brand { display:none; }
  body.in-game .userbox {
    width:100%;
    justify-content:space-between;
    gap:10px;
  }
  body.in-game .balances { gap:8px; }
  body.in-game .bal {
    min-height:30px;
    padding:2px 9px 2px 4px;
    border:2px solid #77501a;
    border-radius:7px;
    background:linear-gradient(180deg,#17833e,#075021);
    box-shadow:0 2px 4px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.2);
    color:#fff9e9;
    font-size:13px;
    font-weight:800;
  }
  body.in-game .bal .coin {
    width:21px;
    height:21px;
    box-shadow:0 0 0 1px #f4d36a inset,0 1px 3px rgba(0,0,0,.5);
  }
  body.in-game .userbox .btn.ghost {
    min-width:38px;
    min-height:34px;
    padding:4px 9px;
    border:1px solid #80613a;
    border-radius:8px;
    background:linear-gradient(180deg,#303030,#111);
    color:#fff;
  }
  body.in-game .userbox .pill { border-color:#674d2c; background:#15110f; }
  body.in-game main.playing-table {
    width:100%;
    max-width:none;
    height:calc(100dvh - 46px);
    min-height:0;
    margin:0;
    padding:0 12px 8px;
    overflow:hidden;
  }
  .playing-table .tablebar {
    min-height:18px;
    height:18px;
    margin:0 0 2px;
    padding:0 6px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .playing-table .infos { gap:5px; }
  .playing-table .infos .tag {
    display:inline-flex;
    align-items:center;
    height:18px;
    padding:0 7px;
    border-color:rgba(255,224,175,.22);
    background:rgba(19,8,5,.62);
    font-size:9px;
  }
  .playing-table .timer {
    width:18px;
    height:18px;
    min-width:18px;
    font-size:10px;
    border-color:#906b36;
    border-radius:8px;
    background:#17110e;
  }
  .playing-table .tablebar #leave,
  .playing-table .tablebar #stand {
    height:18px;
    min-height:18px;
    padding:0 7px;
    border-radius:5px;
    font-size:9px;
  }
  #okeyView:not([hidden]) {
    grid-template-rows:minmax(0,1fr) clamp(190px,33.6dvh,204px);
    gap:0;
  }
  .okey-arena {
    grid-template-columns:minmax(220px,27%) minmax(260px,1fr) minmax(220px,27%);
    grid-template-rows:minmax(88px,1fr) minmax(95px,1.05fr) minmax(88px,1fr);
    gap:0;
    min-height:0;
    padding:8px 18px;
    overflow:visible;
    border:12px solid #64452e;
    border-radius:155px / 68px;
    background:
      radial-gradient(ellipse at 48% 38%,rgba(81,139,92,.42),transparent 66%),
      radial-gradient(ellipse at 50% 50%,#174d35 0%,#123f2d 58%,#0d3526 100%);
    box-shadow:
      0 0 0 3px #805a37,
      0 8px 16px rgba(0,0,0,.55),
      inset 0 0 0 3px rgba(217,184,128,.3),
      inset 0 0 42px rgba(0,0,0,.24);
  }
  .okey-arena::before {
    inset:9px;
    border:1px solid rgba(224,205,158,.18);
    border-radius:140px / 56px;
  }
  .okey-arena::after {
    opacity:.08;
    background:
      repeating-linear-gradient(35deg,rgba(226,215,181,.09) 0 1px,transparent 1px 4px),
      repeating-linear-gradient(145deg,rgba(0,0,0,.1) 0 1px,transparent 1px 5px);
    background-size:auto;
  }
  .okey-seat {
    z-index:2;
    gap:0;
    width:min(100%,218px);
  }
  .okey-profile {
    width:100%;
    min-height:104px;
    padding:4px;
    border:2px solid #5b7b32;
    border-radius:6px;
    background:linear-gradient(100deg,#152015,#030704 68%);
    box-shadow:0 4px 8px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.12);
  }
  .okey-seat .seat-top { height:100%; gap:9px; }
  .okey-seat .avatar.big {
    width:52px;
    height:52px;
    border:1px solid #b9a36e;
    border-radius:50%;
    background:radial-gradient(circle at 50% 35%,hsl(var(--hue) 52% 67%),hsl(var(--hue) 48% 31%));
    box-shadow:inset 0 0 12px rgba(0,0,0,.18);
    font-size:28px;
  }
  .okey-seat .who { min-width:0; }
  .okey-seat .who b {
    display:block;
    max-width:110px;
    overflow:hidden;
    color:#f7f3e8;
    font-size:15px;
    font-weight:600;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .okey-seat .sub {
    display:flex;
    align-items:center;
    gap:3px;
    margin-top:3px;
    color:#8dd349;
    font-size:12px;
    font-weight:800;
  }
  .okey-seat .sub .dot { display:none; }
  .okey-seat .sub .coin { width:14px; height:14px; font-size:8px; }
  .okey-seat .seat-info { display:none; }
  .okey-seat.turn .okey-profile {
    border:3px solid #b6a36f;
    box-shadow:0 0 0 2px rgba(210,190,135,.2),0 0 12px rgba(179,154,99,.25);
    animation:none;
  }
  .okey-seat.position-top {
    top:6px;
    left:50%;
    align-self:auto;
    transform:translateX(-50%);
  }
  .okey-seat.position-top,.okey-seat.position-bottom {
    width:min(100%,218px);
    justify-self:center;
    flex-direction:column;
  }
  .okey-seat.position-top .okey-profile,.okey-seat.position-bottom .okey-profile {
    flex:0 0 auto;
    width:100%;
  }
  .okey-seat.position-bottom {
    bottom:1px;
    left:50%;
    align-self:auto;
    transform:translateX(-50%);
  }
  .okey-seat.position-left,.okey-seat.position-right {
    flex-direction:row;
    align-items:center;
    width:min(100%,218px);
  }
  .okey-seat.position-left {
    top:53.5%;
    left:14px;
    transform:translate(12px,-50%);
  }
  .okey-seat.position-right {
    top:53.5%;
    right:12px;
    transform:translateY(-50%);
  }
  .okey-seat.position-left .okey-profile,.okey-seat.position-right .okey-profile {
    flex:1 1 0;
    min-width:0;
  }
  .okey-seat.position-left .avatar.big,.okey-seat.position-right .avatar.big {
    width:52px;
    height:52px;
    border-radius:50%;
    font-size:28px;
  }
  .okey-seat.position-left .discard-pile,
  .okey-seat.position-right .discard-pile,
  .okey-seat.position-top .discard-pile,
  .okey-seat.position-bottom .discard-pile {
    position:absolute;
    z-index:3;
    display:grid;
    width:55px;
    min-height:75px;
    place-items:center;
    padding:3px;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
  }
  .okey-seat.position-left .discard-pile { left:calc(100% - 61px); top:-92px; }
  .okey-seat.position-right .discard-pile { right:calc(100% - 27px); top:-92px; }
  .okey-seat.position-top .discard-pile { left:-184px; top:78px; }
  .okey-seat.position-bottom .discard-pile { left:-184px; top:31px; }
  .okey-seat .discard-label,
  .okey-seat .discard-empty,
  .okey-seat .discard-tile:not(.last-discard) { display:none; }
  .okey-seat .discard-tiles {
    width:100%;
    max-height:none;
    justify-content:center;
    overflow:visible;
    padding:0;
  }
  .okey-seat .discard-tiles .tile.discard-tile {
    flex:0 0 52px;
    width:52px;
    min-width:52px;
    height:72px;
    border:2px solid #d5cdbb;
    border-radius:7px;
    background:linear-gradient(145deg,#f8f5e9,#e8e0cd);
    font-size:27px;
    opacity:1;
    box-shadow:0 2px 0 #aaa28e,0 5px 8px rgba(0,0,0,.35);
  }
  .okey-seat.position-left .discard-tiles .tile.discard-tile,
  .okey-seat.position-right .discard-tiles .tile.discard-tile {
    flex-basis:52px;
    width:52px;
    min-width:52px;
    height:72px;
    font-size:27px;
  }
  .okey-seat .discard-tiles .tile.discard-tile .tile-symbol {
    right:auto;
    bottom:7px;
    left:50%;
    font-size:12px;
    transform:translateX(-50%);
  }
  .okey-center { width:min(100%,250px); gap:0; }
  .okey-center .table-mark,
  .okey-center .table-status,
  .okey-center .indicator-status { display:none; }
  .center-tiles {
    gap:10px;
    margin:0;
    padding:4px 7px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .center-tiles .last-discard-wrap { display:none; }
  .center-tiles .deck-wrap,.center-tiles .indicator-wrap {
    flex:0 0 64px;
    min-width:64px;
    min-height:78px;
    gap:4px;
    padding:2px;
  }
  .center-tiles .deck-wrap>small,.center-tiles .indicator-wrap>small {
    color:#f3edda;
    font-size:9px;
    letter-spacing:.4px;
    text-shadow:0 1px 2px #1a2517;
  }
  .center-tiles .deck-stack {
    display:flex;
    min-width:52px;
    min-height:69px;
    flex-direction:column;
    justify-content:center;
    gap:1px;
    padding:4px;
    border:2px solid #5b4b28;
    border-radius:5px;
    background:linear-gradient(145deg,#f9f8ef,#dedbcf);
    color:#263342;
    box-shadow:0 2px 0 #8b8068,0 4px 7px rgba(0,0,0,.32);
    text-shadow:none;
  }
  .center-tiles .deck-mark { display:none; }
  .center-tiles .deck-stack b { color:#263342; font-size:16px; }
  .center-tiles .deck-stack small { color:#566071; font-size:8px; }
  .center-tiles .indicator-wrap .tile {
    flex:0 0 52px;
    width:52px;
    height:70px;
    border:2px solid #ddd8c9;
    border-radius:5px;
    font-size:29px;
    box-shadow:0 2px 0 #aaa28e,0 5px 8px rgba(0,0,0,.35);
  }
  .rack-panel {
    position:relative;
    width:100%;
    max-width:none;
    height:100%;
    padding:0 12px 7px;
    overflow:visible;
    border:2px solid #573719;
    border-top:5px solid #9a6b3b;
    border-bottom:7px solid #4d301b;
    border-radius:8px;
    background:
      repeating-linear-gradient(2deg,rgba(246,218,170,.035) 0 1px,transparent 1px 5px),
      repeating-linear-gradient(178deg,rgba(64,39,19,.07) 0 1px,transparent 1px 11px),
      linear-gradient(180deg,#9a7046 0%,#815a37 46%,#704a2d 51%,#5f3d25 100%);
    box-shadow:0 -3px 7px rgba(0,0,0,.3),inset 0 2px rgba(255,238,210,.16),inset 0 -6px 9px rgba(46,27,13,.3);
  }
  .rack-panel .rack-heading {
    position:absolute;
    z-index:5;
    top:-35px;
    right:10px;
    left:10px;
    height:30px;
    margin:0;
    pointer-events:none;
  }
  .rack-panel .rack-title,.rack-panel .hand-count { display:none; }
  .rack-panel .rack-sort-controls { pointer-events:auto; }
  .rack-panel .sort-btn {
    min-height:28px;
    padding:3px 11px;
    border-color:rgba(255,232,174,.65);
    border-radius:5px;
    background:linear-gradient(180deg,#5b3715,#38200c);
    box-shadow:0 2px 4px rgba(0,0,0,.34);
    color:#fff2d4;
  }
  .rack-panel .okey-actions {
    position:absolute;
    z-index:5;
    top:-38px;
    left:10px;
    align-self:auto;
    width:fit-content;
    margin:0;
    padding:2px;
    border:0;
    border-radius:5px;
    background:rgba(25,13,5,.72);
    box-shadow:none;
    backdrop-filter:none;
  }
  .rack-panel .okey-actions .btn {
    min-height:28px;
    padding:3px 9px;
    border-radius:5px;
    font-size:10px;
  }
  .rack-panel .okey-actions .check { color:#fff1d2; }
  #hand.rack {
    position:absolute;
    top:-1px;
    right:10px;
    bottom:-1px;
    left:10px;
    width:auto;
    max-width:none;
    height:auto;
    min-height:0;
    justify-content:center;
    gap:3px;
    padding:0 8px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .rack-row {
    width:100%;
    height:calc((100% - 3px) / 2);
    min-height:0;
    justify-content:stretch;
    gap:clamp(2px,.35vw,5px);
    padding:0 2px;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .rack-slot {
    flex:1 1 0;
    width:auto;
    min-width:0;
    height:100%;
    align-items:center;
    border-color:transparent;
    background:transparent;
  }
  .rack-slot:empty,
  .rack-slot:empty:hover {
    border-color:transparent;
    background:transparent;
  }
  .rack-row .tile {
    flex:0 0 100%;
    width:100%;
    min-width:0;
    height:100%;
    padding:4px 2px 12px;
    border:2px solid #d2c8b3;
    border-radius:7px;
    background:
      linear-gradient(115deg,rgba(255,255,255,.62),transparent 42%),
      linear-gradient(145deg,#f5f0e2 0%,#eee7d6 58%,#ded4bf 100%);
    color:#222;
    font:800 clamp(23px,3.8vw,40px)/1 Georgia,serif;
    box-shadow:0 2px 0 #a99d85,0 4px 6px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.9),inset 0 -2px rgba(129,111,82,.12);
    transform:none;
  }
  .rack-row .tile:hover { transform:translateY(-3px); }
  .rack-row .tile.selected { transform:translateY(-6px); }
  .rack-row .tile-symbol {
    bottom:7px;
    font-size:clamp(9px,1.2vw,13px);
  }
}

.screen-size-controls {
  display:flex;
  align-items:center;
  gap:2px;
  padding:2px;
  border:1px solid rgba(220,198,161,.3);
  border-radius:6px;
  background:rgba(20,14,10,.72);
}
body.in-game .avatar.big {
  position:relative;
  isolation:isolate;
  overflow:visible;
  border-radius:50%;
}
body.in-game .avatar.big img {
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  object-fit:cover;
}
.avatar-frame {
  position:relative;
  display:grid;
  place-items:center;
  flex:none;
  padding:7px;
  isolation:isolate;
  overflow:visible;
}
.avatar-frame.turn-countdown .turn-ring {
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  transform:rotate(-90deg);
  pointer-events:none;
}
.turn-ring-track {
  fill:none;
  stroke:rgba(255,239,197,.88);
  stroke-width:4;
}
.turn-ring-progress {
  fill:none;
  stroke-width:5.2;
  stroke-linecap:round;
  transition:stroke-dashoffset .2s linear,stroke .2s linear;
}
.avatar-frame.turn-countdown > .avatar {
  position:relative;
  z-index:2;
}
body.table-active #logout { display:none; }
.playing-table .tablebar {
  height:auto;
  min-height:28px;
}
.screen-size-controls[hidden] { display:none; }
.playing-table .screen-size-controls .btn {
  min-height:20px;
  padding:2px 7px;
  border-color:transparent;
  border-radius:4px;
  background:transparent;
  color:#e7dfd1;
  font-size:9px;
  line-height:1;
  white-space:nowrap;
}
.playing-table .screen-size-controls .btn[aria-pressed="true"] {
  border-color:#90764e;
  background:linear-gradient(180deg,#766044,#51402c);
  color:#fff5e3;
  box-shadow:inset 0 1px rgba(255,255,255,.15);
}

body.screen-size-full main.playing-table {
  width:100%;
  max-width:none;
  height:calc(100dvh - 46px);
  min-height:0;
  margin:0;
  padding:0 12px 8px;
  overflow:hidden;
}
body.screen-size-medium main.playing-table {
  width:min(94vw,1250px);
  max-width:1250px;
  height:calc(86dvh - 46px);
  min-height:0;
  margin:2dvh auto;
  padding:4px 12px 8px;
  overflow:hidden;
}
body.screen-size-small main.playing-table {
  width:min(82vw,980px);
  max-width:980px;
  height:calc(72dvh - 46px);
  min-height:0;
  margin:5dvh auto;
  padding:4px 12px 8px;
  overflow:hidden;
}
body.screen-size-small #okeyView:not([hidden]) {
  grid-template-rows:minmax(0,1fr) clamp(150px,31dvh,184px);
  gap:0;
}
/* Four player-owned meld areas around the shared center of the Okey table. */
.meld-board {
  position:absolute;
  z-index:0;
  inset:7% 5%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(112px,.7fr) minmax(0,1fr);
  grid-template-rows:minmax(44px,.7fr) minmax(50px,1fr) minmax(50px,1fr) minmax(44px,.7fr);
  grid-template-areas:"top top top" "left center right" "left center right" "bottom bottom bottom";
  gap:5px;
  pointer-events:none;
}
.meld-zone {
  display:flex;
  min-width:0;
  min-height:0;
  flex-direction:column;
  gap:3px;
  padding:4px;
  overflow:auto;
  border:1px solid rgba(232,246,224,.66);
  border-radius:5px;
  background-color:rgba(2,47,30,.19);
  background-image:
    repeating-linear-gradient(90deg,transparent 0 24px,rgba(233,247,224,.15) 24px 25px),
    repeating-linear-gradient(0deg,transparent 0 24px,rgba(233,247,224,.15) 24px 25px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  scrollbar-width:thin;
  scrollbar-color:rgba(230,238,213,.42) transparent;
}
.meld-zone-top { grid-area:top; }
.meld-zone-left { grid-area:left; }
.meld-zone-right { grid-area:right; }
.meld-zone-bottom { grid-area:bottom; }
.meld-zone-heading {
  flex:none;
  width:fit-content;
  max-width:100%;
  padding:1px 5px;
  overflow:hidden;
  border-radius:3px;
  background:rgba(225,239,222,.76);
  color:#183e2b;
  font-size:clamp(7px,.7vw,10px);
  font-weight:800;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.meld-zone.is-me .meld-zone-heading {
  background:rgba(190,245,143,.9);
  color:#173b1b;
}
.meld-zone-content {
  display:flex;
  min-width:0;
  min-height:0;
  flex:1;
  align-content:flex-start;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:3px;
}
.meld-zone-discard {
  display:flex;
  min-width:0;
  flex:none;
  align-items:flex-end;
  gap:4px;
  padding-top:2px;
  border-top:1px solid rgba(238,245,219,.28);
}
.meld-zone-discard[hidden] { display:none; }
.meld-discard-heading {
  flex:none;
  align-self:center;
  color:rgba(248,246,225,.82);
  font-size:clamp(6px,.56vw,8px);
  font-weight:800;
  letter-spacing:.25px;
  white-space:nowrap;
}
.meld-discard-tiles {
  display:flex;
  min-width:0;
  align-items:flex-end;
  gap:2px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(230,238,213,.42) transparent;
}
.meld-discard-tiles .tile.discard-tile {
  flex:0 0 23px;
  width:23px;
  min-width:23px;
  height:32px;
  padding:2px 1px 5px;
  border:1px solid #d5cdbb;
  border-radius:3px;
  background:linear-gradient(145deg,#fffefa,#e8e0cd);
  font:800 15px/1 Georgia,serif;
  opacity:.88;
  box-shadow:0 1px 0 #aaa28e,0 2px 4px rgba(0,0,0,.24);
  transform:none;
}
.meld-discard-tiles .tile.discard-tile .tile-symbol {
  right:auto;
  bottom:2px;
  left:50%;
  font-size:7px;
  transform:translateX(-50%);
}
.meld-discard-tiles .tile.discard-tile.last-discard {
  flex-basis:30px;
  width:30px;
  min-width:30px;
  height:42px;
  border:2px solid #fff0bd;
  opacity:1;
  outline:1px solid rgba(19,31,20,.8);
  outline-offset:1px;
  font-size:19px;
  box-shadow:0 2px 0 #a99a78,0 4px 7px rgba(0,0,0,.32);
}
.meld-discard-tiles .tile.discard-tile.last-discard .tile-symbol {
  bottom:4px;
  font-size:8px;
}
.meld-zone .meld-row {
  gap:2px;
  padding:2px;
  border-color:rgba(255,255,255,.4);
  border-radius:3px;
  background:rgba(0,0,0,.28);
  pointer-events:auto;
}
.meld-zone .meld-row .tile {
  width:clamp(22px,2.4vw,32px);
  min-width:0;
  height:clamp(30px,3.3vw,44px);
  border-radius:3px;
  font-size:clamp(13px,1.5vw,18px);
}
.meld-zone .meld-row .tile-symbol { bottom:2px; font-size:7px; }
.meld-zone .meld-row.can-layoff { border-color:#ffe08a; }
.okey-center { z-index:3; }
@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  .meld-board {
    inset:16% 3%;
    grid-template-columns:minmax(0,1fr) minmax(80px,.65fr) minmax(0,1fr);
    grid-template-rows:minmax(36px,.7fr) minmax(44px,1fr) minmax(44px,1fr) minmax(36px,.7fr);
    gap:3px;
  }
  .meld-zone { gap:2px; padding:3px; border-radius:4px; }
  .meld-zone-heading { padding:1px 3px; font-size:7px; }
  .meld-zone .meld-row { gap:1px; padding:1px; }
  .meld-discard-heading { font-size:6px; }
  .meld-discard-tiles .tile.discard-tile {
    flex-basis:19px;
    width:19px;
    min-width:19px;
    height:27px;
    font-size:12px;
  }
  .meld-discard-tiles .tile.discard-tile.last-discard {
    flex-basis:25px;
    width:25px;
    min-width:25px;
    height:35px;
    font-size:16px;
  }
  .meld-zone .meld-row .tile {
    width:clamp(16px,4vw,25px);
    height:clamp(23px,5.5vw,34px);
    font-size:clamp(10px,2.8vw,15px);
  }
}
@media (max-width:480px) {
  .meld-board {
    inset:19% 2%;
    grid-template-columns:minmax(0,1fr) minmax(58px,.55fr) minmax(0,1fr);
    grid-template-rows:minmax(32px,.65fr) minmax(38px,1fr) minmax(38px,1fr) minmax(32px,.65fr);
    gap:2px;
  }
  .meld-zone { padding:2px; }
  .meld-zone-heading { font-size:6px; }
  .meld-zone-discard { gap:2px; }
  .meld-discard-heading { font-size:5px; }
  .meld-discard-tiles .tile.discard-tile {
    flex-basis:16px;
    width:16px;
    min-width:16px;
    height:23px;
    padding-bottom:4px;
    font-size:10px;
  }
  .meld-discard-tiles .tile.discard-tile.last-discard {
    flex-basis:22px;
    width:22px;
    min-width:22px;
    height:30px;
    font-size:14px;
  }
}
@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  .playing-table .tablebar {
    height:auto;
    min-height:26px;
    flex-wrap:nowrap;
    gap:4px;
  }
  .screen-size-controls { flex:none; }
  .playing-table .screen-size-controls .btn {
    min-height:25px;
    padding:3px 6px;
    font-size:10px;
  }
  body.screen-size-full main.playing-table,
  body.screen-size-medium main.playing-table {
    width:100%;
    height:auto;
    max-width:none;
    min-height:calc(100dvh - 46px);
    margin:0;
    padding:6px;
    overflow:visible;
  }
  body.screen-size-small main.playing-table {
    width:94vw;
    height:auto;
    max-width:none;
    min-height:0;
    margin:3dvh auto;
    padding:6px;
    overflow:visible;
  }
  body.screen-size-small #okeyView:not([hidden]) {
    grid-template-rows:auto auto;
  }
  body.screen-size-small .okey-arena,
  body.screen-size-small .rack-panel {
    width:100%;
  }
}

  /* Final reference layout overrides: 2x2 meld field, central draw area, discard columns. */
  .meld-board {
    inset:18% auto 18% 18%;
    width:43%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    grid-template-areas:"bottom right" "top left";
    gap:1px;
    border:1px solid rgba(238,248,232,.88);
    background:rgba(238,248,232,.8);
  }
  .meld-zone {
    min-width:0;
    min-height:0;
    gap:2px;
    padding:3px;
    overflow:hidden;
    border:0;
    border-radius:0;
    background-color:rgba(1,54,34,.88);
    background-image:
      repeating-linear-gradient(90deg,transparent 0 17px,rgba(233,247,224,.13) 17px 18px),
      repeating-linear-gradient(0deg,transparent 0 17px,rgba(233,247,224,.13) 17px 18px);
    box-shadow:none;
  }
  .meld-zone-bottom-left { grid-area:bottom; }
  .meld-zone-top-right { grid-area:right; }
  .meld-zone-bottom-right { grid-area:top; }
  .meld-zone-top-left { grid-area:left; }
  .meld-zone-heading {
    order:2;
    align-self:center;
    max-width:92%;
    padding:1px 5px;
    border-radius:1px;
    background:rgba(223,237,222,.78);
    color:#254232;
    font-size:clamp(7px,.68vw,10px);
    line-height:1.25;
  }
  .meld-zone.is-me .meld-zone-heading { background:rgba(223,237,222,.78); color:#254232; }
  .meld-zone-content {
    order:1;
    flex:1;
    min-height:0;
    align-content:flex-end;
    align-items:flex-end;
    gap:2px;
    overflow:auto;
  }
  .meld-zone .meld-row { gap:1px; padding:1px; border:0; border-radius:1px; background:transparent; }
  .meld-zone .meld-row .tile {
    width:clamp(16px,2.1vw,27px);
    min-width:0;
    height:clamp(22px,2.8vw,36px);
    border-radius:2px;
    font-size:clamp(11px,1.3vw,16px);
  }
  .meld-zone .meld-row .tile-symbol { bottom:1px; font-size:6px; }
  .discard-board {
    position:absolute;
    z-index:0;
    top:18%;
    bottom:18%;
    left:70%;
    width:14%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1px;
    border:1px solid rgba(238,248,232,.88);
    background:rgba(238,248,232,.8);
  }
  .discard-column {
    display:flex;
    min-width:0;
    min-height:0;
    flex-direction:column;
    align-items:center;
    overflow:hidden;
    background-color:rgba(1,54,34,.88);
    background-image:repeating-linear-gradient(0deg,transparent 0 17px,rgba(233,247,224,.13) 17px 18px);
  }
  .discard-column-tiles {
    display:flex;
    width:100%;
    min-height:0;
    flex:1;
    flex-direction:column;
    align-items:center;
    gap:2px;
    overflow-y:auto;
    padding:3px 1px 1px;
  }
  .discard-column .tile.discard-tile {
    flex:0 0 auto;
    width:clamp(17px,2vw,25px);
    min-width:0;
    height:clamp(24px,2.8vw,35px);
    padding:1px 0 4px;
    border:1px solid #d5cdbb;
    border-radius:2px;
    background:linear-gradient(145deg,#fffefa,#e8e0cd);
    font:800 clamp(10px,1.2vw,15px)/1 Georgia,serif;
    opacity:.96;
    box-shadow:0 1px 2px rgba(0,0,0,.3);
  }
  .discard-column .tile.discard-tile .tile-symbol {
    right:auto;
    bottom:1px;
    left:50%;
    font-size:6px;
    transform:translateX(-50%);
  }
  .discard-column .tile.discard-tile.last-discard {
    outline:1px solid #f5d477;
    outline-offset:0;
    box-shadow:0 0 5px rgba(255,218,122,.5);
  }
  .discard-player-label {
    flex:none;
    max-height:40%;
    overflow:hidden;
    padding:2px 1px;
    color:rgba(247,248,229,.8);
    font-size:clamp(6px,.65vw,9px);
    font-weight:800;
    line-height:1;
    text-overflow:ellipsis;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    white-space:nowrap;
  }
  .discard-column.is-me .discard-player-label { color:#bdf1a5; }
  .okey-center {
    position:absolute;
    z-index:3;
    top:50%;
    left:61%;
    width:9%;
    max-width:none;
    gap:0;
    transform:translateY(-50%);
  }
  .okey-center .table-mark,
  .okey-center .indicator-status,
  .okey-center .table-status,
  .center-tiles .last-discard-wrap,
  .center-tiles .deck-wrap>small,
  .center-tiles .deck-mark,
  .center-tiles .deck-stack small { display:none; }
  .center-tiles { width:100%; flex-direction:column; gap:10px; margin:0; }
  .indicator-wrap { flex-direction:column; gap:2px; }
  .indicator-wrap>small { font-size:clamp(6px,.58vw,8px); letter-spacing:.3px; }
  .indicator-wrap .tile {
    width:clamp(27px,3.8vw,38px);
    height:clamp(36px,5vw,49px);
    border-radius:3px;
    font-size:clamp(16px,2.3vw,23px);
  }
  .deck-stack {
    position:relative;
    display:block;
    width:clamp(34px,5.2vw,52px);
    height:clamp(48px,7vw,68px);
    padding:0;
    border:1px solid rgba(231,244,226,.78);
    border-radius:2px;
    background:rgba(1,35,25,.86);
    box-shadow:0 2px 4px rgba(0,0,0,.35);
  }
  .deck-stack b {
    position:absolute;
    top:-9px;
    right:-10px;
    display:grid;
    width:23px;
    height:23px;
    place-items:center;
    border:1px solid rgba(255,255,255,.55);
    border-radius:50%;
    background:#18211e;
    color:#fff;
    font-size:11px;
    text-shadow:none;
  }
  @media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
    .meld-board { inset:23% auto 23% 4%; width:58%; gap:1px; }
    .meld-zone { padding:2px; }
    .meld-zone-heading { padding:1px 2px; font-size:6px; }
    .meld-zone .meld-row { gap:0; padding:0; }
    .meld-zone .meld-row .tile {
      width:clamp(13px,4vw,23px);
      height:clamp(19px,5.5vw,30px);
      font-size:clamp(9px,2.8vw,14px);
    }
    .discard-board { top:23%; bottom:23%; left:77%; width:19%; gap:1px; }
    .discard-column-tiles { gap:1px; padding:2px 0 1px; }
    .discard-column .tile.discard-tile {
      width:clamp(12px,4vw,20px);
      height:clamp(18px,5vw,27px);
      padding-bottom:3px;
      font-size:clamp(8px,2.5vw,12px);
    }
    .discard-column .tile.discard-tile .tile-symbol { font-size:5px; }
    .discard-player-label { padding:1px 0; font-size:6px; }
    .okey-center { left:62%; width:14%; }
    .center-tiles { gap:6px; }
    .indicator-wrap>small { font-size:5px; }
    .indicator-wrap .tile {
      width:clamp(21px,7vw,31px);
      height:clamp(30px,9vw,40px);
      font-size:clamp(13px,4vw,19px);
    }
    .deck-stack { width:clamp(27px,8vw,36px); height:clamp(38px,11vw,49px); }
    .deck-stack b { top:-7px; right:-8px; width:18px; height:18px; font-size:9px; }
  }
  @media (max-width:480px) {
    .meld-board { inset:25% auto 25% 3%; width:59%; }
    .discard-board { top:25%; bottom:25%; left:77%; width:20%; }
    .meld-zone .meld-row .tile {
      width:clamp(12px,4.2vw,17px);
      height:clamp(17px,5.5vw,23px);
      font-size:clamp(8px,2.8vw,11px);
    }
    .discard-column .tile.discard-tile {
      width:clamp(11px,3.5vw,15px);
      height:clamp(16px,4.8vw,20px);
      font-size:clamp(7px,2.2vw,9px);
    }
  }
}

/* Keep the left and right player panels compact and horizontal. */
.okey-seat.position-left,
.okey-seat.position-right {
  display:flex;
  flex-direction:row;
  align-items:center;
  width:min(190px,100%);
  min-width:0;
}
.okey-seat.position-left .okey-profile,
.okey-seat.position-right .okey-profile {
  width:100%;
  min-width:0;
  padding:4px 6px;
}
.okey-seat.position-left .seat-top,
.okey-seat.position-right .seat-top {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
  min-width:0;
}
.okey-seat.position-left .avatar-frame,
.okey-seat.position-right .avatar-frame { flex:none; }
.okey-seat.position-left .avatar.big,
.okey-seat.position-right .avatar.big {
  width:36px;
  height:36px;
  font-size:19px;
}
.okey-seat.position-left .who,
.okey-seat.position-right .who { min-width:0; }
.okey-seat.position-left .who b,
.okey-seat.position-right .who b {
  display:block;
  max-width:110px;
  overflow:hidden;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.okey-seat.position-left .sub,
.okey-seat.position-right .sub { overflow:hidden; font-size:9px; white-space:nowrap; }
.okey-seat.position-left .seat-info,
.okey-seat.position-right .seat-info { display:none; }
@media (max-width:760px) and (orientation: portrait), (max-width:760px) and (min-height: 521px) {
  .okey-seat.position-left,
  .okey-seat.position-right {
    width:min(132px,36vw);
  }
  .okey-seat.position-left .okey-profile,
  .okey-seat.position-right .okey-profile { padding:3px 4px; }
  .okey-seat.position-left .seat-top,
  .okey-seat.position-right .seat-top { gap:4px; }
  .okey-seat.position-left .avatar.big,
  .okey-seat.position-right .avatar.big {
    width:28px;
    height:28px;
    font-size:15px;
  }
  .okey-seat.position-left .who b,
  .okey-seat.position-right .who b { max-width:68px; font-size:10px; }
  .okey-seat.position-left .sub,
  .okey-seat.position-right .sub { display:none; }