/* ══ Türk Oyun Salonu — full-screen game table (all games) ══════════════════ */
body.in-game{overflow:hidden}
body.in-game header{display:none}
.game-screen.active{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;gap:.35rem;padding:calc(env(safe-area-inset-top) + .3rem) .35rem calc(env(safe-area-inset-bottom) + .35rem);background:radial-gradient(ellipse at 50% 0%,#1a2347,#050914 70%);overflow:hidden}
.gs-top{display:flex;align-items:center;gap:.35rem;min-height:40px}
.gs-top button{min-height:38px;min-width:40px;padding:.3rem .55rem;border-radius:12px;position:relative;font-size:1rem}
.gs-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.gs-info b{font:800 .95rem Orbitron,Inter,sans-serif;color:var(--gold);letter-spacing:1px}
#table-info{font-size:.7rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#conn{font-size:.68rem;white-space:nowrap}
#chat-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;border-radius:9px;background:var(--red);font:800 .6rem/16px Inter,sans-serif;font-style:normal;padding:0 3px;box-shadow:0 0 0 2px #050914}

/* the cloth */
.game-screen .felt{flex:1;min-height:0;display:block;position:relative;padding:0;margin:0;border-radius:22px;
  background:radial-gradient(ellipse at 50% 45%,#2e8a5a 0%,#1b6440 45%,#0d3b25 100%);
  box-shadow:inset 0 0 0 6px #3a2410,inset 0 0 0 9px #c8932f,inset 0 0 0 11px #2a1808,inset 0 0 80px #000b,0 14px 34px #000c}
.game-screen .felt::before{content:"";position:absolute;inset:11px;border-radius:14px;pointer-events:none;opacity:.22;background:repeating-linear-gradient(45deg,#fff1 0 2px,#0000 2px 6px)}
.game-screen .felt[data-game="batak"]{background:radial-gradient(ellipse at 50% 45%,#8a1f2b 0%,#5e1220 50%,#2a060d 100%)}
.game-screen .felt[data-game="pisti"]{background:radial-gradient(ellipse at 50% 45%,#1f6f8a 0%,#124b5e 50%,#06222b 100%)}
.game-screen .felt[data-game="tavla"]{background:radial-gradient(ellipse at 50% 45%,#3b2a1a,#1c1006 90%)}
.game-screen .felt[data-game="bilardo"]{background:radial-gradient(ellipse at 50% 45%,#16233f,#070b17 90%);box-shadow:inset 0 0 60px #000b}

/* seats */
.game-screen .seat{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;gap:.12rem;min-width:0;max-width:120px;pointer-events:auto}
.game-screen .seat.top{top:14px;left:50%;transform:translateX(-50%)}
.game-screen .seat.left{left:14px;top:50%;transform:translateY(-62%)}
.game-screen .seat.right{right:14px;top:50%;transform:translateY(-62%)}
.game-screen .seat.bottom{bottom:12px;left:50%;transform:translateX(-50%)}
.game-screen .seat .avatar{width:46px;height:46px;font-size:.95rem}
.game-screen .sname{font-size:.72rem;font-weight:700;max-width:96px;text-shadow:0 1px 3px #000}
.game-screen .sscore{font-size:.68rem;background:#0008;border-radius:999px;padding:0 .45rem;white-space:nowrap}
.game-screen .seat .mini-rack{display:flex;gap:1px;margin-top:2px}
.game-screen .seat .mini-rack i{width:5px;height:8px;border-radius:1px;background:linear-gradient(#fffaf0,#d9cba5);box-shadow:0 1px 0 #0006}
.game-screen .seat .badge{font-size:.62rem;background:#000a;border:1px solid #f3c96977;color:var(--gold);border-radius:999px;padding:0 .4rem;white-space:nowrap}
.game-screen .felt.two .seat.left,.game-screen .felt.two .seat.right{display:none}

/* turn ring timer */
.avatar .ring{position:absolute;inset:-6px;border-radius:50%;pointer-events:none;background:conic-gradient(var(--ringc,#39e58c) calc(var(--p,1)*360deg),#0000 0);-webkit-mask:radial-gradient(circle,#0000 calc(50% - 4px),#000 calc(50% - 3px));mask:radial-gradient(circle,#0000 calc(50% - 4px),#000 calc(50% - 3px))}

.game-screen .center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1rem;pointer-events:none}
.game-screen .center>*{pointer-events:auto}

/* ── OKEY: corners, pile, indicator ── */
.ok-corner{position:absolute;z-index:3;width:var(--ftw);height:var(--fth);border-radius:8px;box-shadow:inset 0 0 0 2px #ffffff22;display:none}
.felt[data-game="okey"] .ok-corner{display:block}
.felt{--ftw:40px;--fth:56px}
.ok-corner[data-corner="0"]{right:16px;bottom:16px}
.ok-corner[data-corner="1"]{right:16px;top:16px}
.ok-corner[data-corner="2"]{left:16px;top:16px}
.ok-corner[data-corner="3"]{left:16px;bottom:16px}
.ok-corner .tile{position:absolute;inset:0;width:100%;height:100%;font-size:calc(var(--ftw)*.52)}
.ok-corner .tile.under{transform:translate(3px,-3px) rotate(4deg);filter:brightness(.85)}
.ok-corner.hot{box-shadow:0 0 0 3px #39e58c,0 0 18px #39e58c;cursor:pointer;animation:pulse 1.1s infinite}
.ok-corner.drop{box-shadow:0 0 0 3px #22e6ff,0 0 18px #22e6ff;animation:pulse 1.1s infinite}
.ok-corner.over,.pile.over{box-shadow:0 0 0 4px #fff,0 0 26px #fff}
.ok-corner b{position:absolute;bottom:-15px;left:0;right:0;text-align:center;font-size:.6rem;color:#fff9;white-space:nowrap}
#center-okey{gap:.9rem}
#center-okey .pile{width:var(--ftw);height:var(--fth)}
#center-okey .pile .back{border-radius:7px;background:linear-gradient(160deg,#fffaf0,#d9cba5);border:0;box-shadow:0 2px 0 #c7b98f,0 4px 0 #b8a87d,0 6px 0 #a8976b,0 8px 0 #98875c,0 10px 14px #000a}
#center-okey .pile .back::after{content:"";position:absolute;inset:6px;border-radius:5px;background:url('/img/logo.jpg') center/cover;opacity:.55}
#center-okey .pile.hot .back{box-shadow:0 2px 0 #c7b98f,0 4px 0 #b8a87d,0 6px 0 #a8976b,0 8px 0 #98875c,0 0 0 3px #39e58c,0 0 22px #39e58c}
#center-okey .pile.finish .back{box-shadow:0 2px 0 #c7b98f,0 4px 0 #b8a87d,0 0 0 3px var(--gold),0 0 26px var(--gold)}
#center-okey .pile .cntp{bottom:auto;top:-1.35rem;font-weight:700;color:#fff;text-shadow:0 1px 2px #000}
#center-okey .disc{min-width:var(--ftw);min-height:var(--fth)}
#center-okey .disc .tile{width:var(--ftw);height:var(--fth);font-size:calc(var(--ftw)*.52);transform:rotate(-8deg)}
#center-okey .disc::after{content:"GÖSTERGE";position:absolute;top:-1.3rem;font-size:.55rem;letter-spacing:1px;color:#fffc;text-shadow:0 1px 2px #000}
.okey-info{position:absolute;top:calc(50% + 48px);left:50%;transform:translateX(-50%);font-size:.66rem;color:#fff;background:#0007;border-radius:999px;padding:.1rem .55rem;white-space:nowrap;z-index:2}

/* tiles (shared look) */
.tile{font-family:"Arial Black",Inter,system-ui,sans-serif;font-weight:900;letter-spacing:-1px}
.tile .dot{width:22%;height:auto;aspect-ratio:1;margin-top:6%;border-radius:50%}
.tile.c0{color:#d01c2b}.tile.c1{color:#15151f}.tile.c2{color:#1258c4}.tile.c3{color:#e08a00}
.tile.fake::after{content:"✿";font-size:1.15em;color:#2b8a3e}
.tile.okey::before{content:"★";position:absolute;top:2px;right:3px;font-size:.38em;color:var(--gold);text-shadow:0 0 2px #000}

/* ── the dock: rack + buttons ── */
.dock{display:flex;flex-direction:column;gap:.3rem;flex:none}
.game-screen .rack{padding:0;background:none;box-shadow:none;border:0}
.game-screen .rack-tiles{min-height:0;padding:0;gap:0}
.game-screen .rack-tools{display:flex;gap:.3rem;justify-content:center;flex-wrap:nowrap;overflow-x:auto;margin:0;scrollbar-width:none}
.game-screen .rack-tools button{min-height:34px;padding:.25rem .6rem;font-size:.78rem;white-space:nowrap;border-radius:10px;background:#0b1430cc}
.game-screen .actions{margin:0;gap:.35rem;flex-wrap:nowrap;overflow-x:auto;justify-content:center;scrollbar-width:none}
.game-screen .actions button,.game-screen .actions select{min-height:42px;padding:.45rem .8rem;font-size:.86rem;white-space:nowrap;border-radius:12px}

/* ıstaka — wooden rack with 2×15 slots */
.game-screen .rack.istaka{container-type:inline-size;width:100%;max-width:860px;margin:0 auto;padding:6px 6px 0;border-radius:12px 12px 6px 6px;
  background:linear-gradient(180deg,#0000,#0004),url('/img/tavla-wood.jpg') center/cover,#6b4423;
  box-shadow:inset 0 1px 0 #ffd9a055,inset 0 0 0 1px #2a1606,0 10px 24px #000c}
.istaka .rack-tiles{display:block}
.rrow{display:grid;grid-template-columns:repeat(15,1fr);gap:2px;padding:0 2px 5px;margin-bottom:6px;position:relative}
.rrow::after{content:"";position:absolute;left:-6px;right:-6px;bottom:-6px;height:9px;border-radius:3px;background:linear-gradient(180deg,#a8763f,#5c3a17 60%,#2e1c09);box-shadow:0 3px 5px #0009}
.slot{position:relative;aspect-ratio:.7;border-radius:5px}
.slot.empty{background:#0000001a}
.slot.target{background:#22e6ff33;box-shadow:inset 0 0 0 2px #22e6ff}
.slot .tile{position:absolute;inset:0;width:100%;height:100%;font-size:min(5cqw,32px);border-radius:min(1cqw,7px);touch-action:none;cursor:grab;transition:transform .12s,box-shadow .12s}
.slot .tile.sel{transform:translateY(-22%);box-shadow:0 0 0 3px var(--cyan),0 8px 14px #000a;z-index:2}
.slot .tile.can{box-shadow:0 0 0 2px var(--ok),0 0 10px #39e58c}
.slot .tile.new{animation:newtile 1.2s}
@keyframes newtile{0%{transform:translateY(-60%);box-shadow:0 0 0 3px var(--gold),0 0 20px var(--gold)}100%{transform:none}}
.tile.ghost{position:fixed;z-index:80;pointer-events:none;transform:translate(-50%,-60%) scale(1.08);box-shadow:0 14px 28px #000c,0 0 0 2px var(--cyan);opacity:.95}
.slot .tile.lifted{opacity:.25}

/* card hands (batak/pişti): one overlapping fan */
.rack-tiles.cards{display:flex;justify-content:center;align-items:flex-end;padding:.6rem 0 .1rem;min-height:96px}
.rack-tiles.cards .pcard{width:64px;height:92px;font-size:1.25rem;margin-left:var(--ov,-18px);box-shadow:-2px 0 6px #0007;transition:transform .14s}
.rack-tiles.cards .pcard:first-child{margin-left:0}
.rack-tiles.cards .pcard .s{font-size:1.8rem}
.rack-tiles.cards .pcard.legal{transform:translateY(-10px);box-shadow:0 0 0 2px #39e58c,-2px 0 6px #0007}
.rack-tiles.cards .pcard.legal:hover,.rack-tiles.cards .pcard.legal:focus-visible{transform:translateY(-22px)}
.rack-tiles.cards .pcard.illegal{opacity:1;filter:brightness(.62)}

/* batak trick: pos 1 = right (next player), pos 3 = left */
.game-screen #center-batak:not([hidden]){display:grid!important;grid-template-columns:auto auto auto;grid-template-rows:auto auto auto;place-content:center;gap:.2rem}
.game-screen .tslot[data-pos="2"]{grid-column:2;grid-row:1}.game-screen .tslot[data-pos="3"]{grid-column:1;grid-row:2}.game-screen .tslot[data-pos="1"]{grid-column:3;grid-row:2}.game-screen .tslot[data-pos="0"]{grid-column:2;grid-row:3}
.game-screen .tslot .pcard{width:56px;height:80px;font-size:1.1rem}
.game-screen .tslot[data-pos="1"] .pcard{transform:rotate(8deg)}.game-screen .tslot[data-pos="3"] .pcard{transform:rotate(-8deg)}
.game-screen .tslot .pcard.win{box-shadow:0 0 0 3px var(--gold),0 0 18px var(--gold)}

/* pişti / tavla / bilardo centres */
.game-screen #center-pisti .pcard{width:62px;height:88px;font-size:1.2rem}
.game-screen #center-tavla{inset:58px 6px 58px}
.game-screen #center-tavla .tv-frame{width:min(100%,calc((100% - 0px)));max-width:min(100%,680px)}
.game-screen .felt[data-game="tavla"] .seat{flex-direction:row;gap:.45rem;max-width:none}
.game-screen .felt[data-game="tavla"] .seat.top{top:8px}.game-screen .felt[data-game="tavla"] .seat.bottom{bottom:8px}
.game-screen .felt[data-game="tavla"] .seat .avatar{width:38px;height:38px}
.game-screen #center-bilardo{inset:54px 4px 54px}
.game-screen .felt[data-game="bilardo"] .seat{flex-direction:row;gap:.45rem;max-width:none}
.game-screen .felt[data-game="bilardo"] .seat.top{top:6px}.game-screen .felt[data-game="bilardo"] .seat.bottom{bottom:6px}
.game-screen .felt[data-game="bilardo"] .seat .avatar{width:36px;height:36px}
#pool{display:block;max-width:100%;max-height:100%;touch-action:none;border-radius:14px}

/* news ticker on the cloth */
.ticker{position:absolute;left:50%;bottom:82px;transform:translateX(-50%);z-index:5;pointer-events:none;font-size:.75rem;font-weight:600;background:#000a;color:#fff;border-radius:999px;padding:.2rem .7rem;white-space:nowrap;max-width:80%;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .3s}
.ticker.show{opacity:1}
.felt[data-game="tavla"] .ticker,.felt[data-game="bilardo"] .ticker{bottom:auto;top:50%}

/* chat drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(360px,92vw);z-index:45;background:#0a1124f2;backdrop-filter:blur(12px);box-shadow:-10px 0 30px #000c;padding:calc(env(safe-area-inset-top) + .7rem) .8rem .8rem;display:flex;flex-direction:column;gap:.5rem;transform:translateX(105%);transition:transform .25s}
.drawer.open{transform:none}
.drawer .chatbox{flex:1;max-height:none}
.drawer .log{max-height:110px;margin:0}

/* scoreboard */
.scoretable{width:100%;border-collapse:collapse;font-size:.9rem}.scoretable td,.scoretable th{padding:.4rem .3rem;border-bottom:1px solid #ffffff14;text-align:left}.scoretable th{color:var(--gold);font-size:.75rem}

@media (min-width:700px){
  .felt{--ftw:48px;--fth:68px}
  .game-screen .seat .avatar{width:56px;height:56px}
  .game-screen .sname{font-size:.82rem;max-width:140px}
  .game-screen .felt{margin:0 auto;width:100%;max-width:1100px}
  .dock{width:100%;max-width:1100px;margin:0 auto}
  .ticker{bottom:100px}
}
@media (max-height:520px) and (orientation:landscape){
  .gs-top{min-height:32px}.gs-top button{min-height:32px}
  .game-screen .rack.istaka{max-width:640px}
  .game-screen .seat .avatar{width:38px;height:38px}
  .rack-tiles.cards .pcard{width:52px;height:74px}
}
@media (prefers-reduced-motion: reduce){.drawer{transition:none}.slot .tile.new{animation:none}}

/* ══ "Salon" look — matches the front-page artwork: black glass, cyan hologram, gold neon ══ */
.game-screen.active{background:radial-gradient(ellipse at 50% -10%,#16234a 0%,#070b18 55%,#03050c 100%)}
.game-screen .felt[data-game="okey"]{background:#050914 url('/img/felt-okey-l.jpg') center/100% 100% no-repeat;box-shadow:0 0 0 1px #f3c96955,0 0 40px #22e6ff22,0 18px 40px #000d}
@media (orientation:portrait){.game-screen .felt[data-game="okey"]{background-image:url('/img/felt-okey-p.jpg')}}
.game-screen .felt[data-game="okey"]::before{display:none}
.game-screen .felt[data-game="batak"]{background:#14040a url('/img/felt-batak2.jpg') center/cover;box-shadow:inset 0 0 0 2px #f3c96988,inset 0 0 50px #000c,0 0 34px #f3c96922,0 18px 40px #000d}
.game-screen .felt[data-game="pisti"]{background:#031114 url('/img/felt-pisti2.jpg') center/cover;box-shadow:inset 0 0 0 2px #22e6ff88,inset 0 0 50px #000c,0 0 34px #22e6ff22,0 18px 40px #000d}
.game-screen .felt[data-game="batak"]::before,.game-screen .felt[data-game="pisti"]::before{display:none}
/* crystal tiles: frosted glass face, coloured numbers with a soft neon glow */
.tile{background:linear-gradient(165deg,#ffffff 0%,#eef5ff 55%,#d5e3f5 100%);box-shadow:0 0 0 1px #bfefff,inset 0 0 0 1px #ffffffcc,inset 0 -3px 0 #a9c3e2,0 3px 7px #000b,0 0 10px #22e6ff33}
.tile.c0{color:#e0102a;text-shadow:0 0 6px #ff4d5e55}.tile.c1{color:#0d1020;text-shadow:0 0 5px #4d6bff33}.tile.c2{color:#0a5ce0;text-shadow:0 0 6px #3d8bff55}.tile.c3{color:#e88a00;text-shadow:0 0 6px #ffb20066}
.tile.okey{box-shadow:0 0 0 2px var(--gold),inset 0 -3px 0 #a9c3e2,0 3px 7px #000b,0 0 14px #f3c969aa}
/* black-glass rack with gold trim and a cyan under-glow, like the racks in the artwork */
.game-screen .rack.istaka{background:linear-gradient(180deg,#141a2b 0%,#070a12 60%,#020308 100%);border-radius:14px 14px 8px 8px;padding:7px 7px 0;box-shadow:inset 0 1px 0 #f3c96999,inset 0 0 0 1px #f3c96944,0 0 0 1px #000,0 8px 22px #000d,0 0 26px #22e6ff2e}
.rrow::after{background:linear-gradient(180deg,#f8e3a0 0%,#c8932f 35%,#5a3b0c 100%);height:6px;bottom:-5px;box-shadow:0 0 10px #f3c96977,0 3px 6px #000c}
.slot.empty{background:#ffffff08;box-shadow:inset 0 0 0 1px #22e6ff14}
#center-okey .pile .back{background:linear-gradient(165deg,#ffffff,#d5e3f5);box-shadow:0 2px 0 #b9cde6,0 4px 0 #a2b8d6,0 6px 0 #8ea6c8,0 8px 0 #7b93b8,0 10px 16px #000c,0 0 16px #22e6ff55}
.ok-corner{box-shadow:inset 0 0 0 1px #22e6ff55,0 0 12px #22e6ff22;background:#22e6ff0d}
.game-screen .sscore{background:#000b;box-shadow:0 0 0 1px #f3c96955;color:var(--gold)}
.game-screen .seat .avatar{box-shadow:0 0 0 2px #f3c969aa,0 0 16px #22e6ff44,0 6px 14px #000c}
.okey-info{background:#000c;box-shadow:0 0 0 1px #22e6ff55;color:#bff6ff}
.felt[data-game="okey"] .ok-corner[data-corner="0"]{right:6%;bottom:7%}.felt[data-game="okey"] .ok-corner[data-corner="1"]{right:6%;top:7%}
.felt[data-game="okey"] .ok-corner[data-corner="2"]{left:6%;top:7%}.felt[data-game="okey"] .ok-corner[data-corner="3"]{left:6%;bottom:7%}
.felt[data-game="okey"] .seat.top{top:5%}.felt[data-game="okey"] .seat.bottom{bottom:5%}
.felt[data-game="okey"] .seat.left{left:4%}.felt[data-game="okey"] .seat.right{right:4%}
#center-okey{gap:1.5rem}
.ticker{bottom:24%}
/* bilardo controls */
.rack-tiles.pool-ctl{display:flex;align-items:center;justify-content:center;gap:.9rem;padding:.2rem .4rem}
.pc-power{display:flex;align-items:center;gap:.5rem;flex:1;max-width:420px;font-size:.78rem;color:var(--dim)}
.pc-power input{flex:1;accent-color:#f3c969;height:28px}
.pc-power b{min-width:42px;color:var(--gold);font-size:.85rem}
.pc-spin{position:relative;width:52px;height:52px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e9e9e4 55%,#b9b9b0);box-shadow:0 0 0 2px #f3c969,0 0 14px #22e6ff55;cursor:crosshair;touch-action:none}
.pc-spin::before,.pc-spin::after{content:"";position:absolute;background:#0002}.pc-spin::before{left:50%;top:8%;bottom:8%;width:1px}.pc-spin::after{top:50%;left:8%;right:8%;height:1px}
.pc-spin i{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#e0102a;box-shadow:0 0 6px #ff4d5e}
.mini-balls{display:flex;gap:2px;flex-wrap:wrap;max-width:130px}
.mini-balls i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 -1px 2px #0006}
.mini-balls i.st{box-shadow:inset 0 0 0 2px #f8f8f2,inset 0 -1px 2px #0006}
.game-screen .felt[data-game="bilardo"] .seat{align-items:center}
.game-screen .felt[data-game="bilardo"]{background:radial-gradient(ellipse at 50% 40%,#13204a,#050914 85%);box-shadow:inset 0 0 0 1px #f3c96944,0 18px 40px #000d}
.game-screen .felt[data-game="bilardo"]::before{display:none}
#center-bilardo{align-items:center;justify-content:center}
/* 101 okey: corners + melds board */
.felt[data-game="okey101"] .ok-corner{display:block}
.game-screen .felt[data-game="okey101"]{background:#050914 url('/img/felt-okey-l.jpg') center/100% 100% no-repeat;box-shadow:0 0 0 1px #f3c96955,0 0 40px #22e6ff22,0 18px 40px #000d}
@media (orientation:portrait){.game-screen .felt[data-game="okey101"]{background-image:url('/img/felt-okey-p.jpg')}}
.game-screen .felt[data-game="okey101"]::before{display:none}
.felt[data-game="okey101"] .ok-corner[data-corner="0"]{right:6%;bottom:7%}.felt[data-game="okey101"] .ok-corner[data-corner="1"]{right:6%;top:7%}
.felt[data-game="okey101"] .ok-corner[data-corner="2"]{left:6%;top:7%}.felt[data-game="okey101"] .ok-corner[data-corner="3"]{left:6%;bottom:7%}
.felt[data-game="okey101"] .seat.top{top:4%}.felt[data-game="okey101"] .seat.bottom{bottom:4%}
.felt[data-game="okey101"] .seat.left{left:3%}.felt[data-game="okey101"] .seat.right{right:3%}
.game-screen .felt[data-game="okey101"] #center-okey{inset:auto;left:50%;bottom:24%;transform:translateX(-50%);gap:1.4rem}
.game-screen .felt[data-game="okey101"] #center-okey .disc .tile,.game-screen .felt[data-game="okey101"] #center-okey .pile{--ftw:34px;--fth:48px}
.felt[data-game="okey101"] .okey-info{top:auto;bottom:calc(24% - 26px)}
.game-screen #center-101:not([hidden]){display:block;inset:21% 23% 38% 23%;overflow:auto;pointer-events:auto;scrollbar-width:thin}
.melds{display:flex;flex-wrap:wrap;gap:6px 8px;align-content:flex-start;justify-content:center;padding:4px}
.melds-empty{color:#bff6ffaa;font-size:.75rem;text-align:center;margin-top:20%}
.meld{display:flex;gap:1px;padding:3px;border-radius:7px;background:#00000066;box-shadow:inset 0 0 0 1px #22e6ff33}
.meld .tile{width:20px;height:28px;font-size:.78rem;border-radius:4px;letter-spacing:-.5px}
.meld .tile .dot{display:none}
.meld .tile[data-as]::after{content:attr(data-as);position:absolute;bottom:-1px;right:1px;font-size:.5rem;color:#f3c969}
.meld.own0{box-shadow:inset 0 0 0 1px #22e6ff66}.meld.own1{box-shadow:inset 0 0 0 1px #f3c96966}.meld.own2{box-shadow:inset 0 0 0 1px #39e58c66}.meld.own3{box-shadow:inset 0 0 0 1px #ff4d5e66}
.meld.can{cursor:pointer;box-shadow:0 0 0 2px #39e58c,0 0 14px #39e58c88;animation:pulse 1.2s infinite}
@media (min-width:700px){.meld .tile{width:26px;height:36px;font-size:1rem}.game-screen #center-101:not([hidden]){inset:20% 20% 36% 20%}}
.slot .tile.risky::after{content:"!";position:absolute;top:1px;left:3px;font-size:.45em;color:#ff4d5e;text-shadow:none}
.slot .tile.risky{box-shadow:0 0 0 2px #ff8a3d,inset 0 -3px 0 #a9c3e2,0 3px 7px #000b}
.felt[data-game="okey101"] .ticker{bottom:auto;top:19%}
.rack-tiles.dice-row{display:flex;justify-content:center;align-items:center;gap:.6rem;min-height:64px}
.pcard .r{display:flex;flex-direction:column;align-items:center;line-height:.95}
.pcard .r i{font-style:normal;font-size:.8em;line-height:1}
.game-screen #center-tavla:not([hidden]){display:flex;align-items:center;justify-content:center}
.game-screen #center-tavla .tv-frame{width:100%}
/* ── short landscape phones: rack in the middle, tools on the left, buttons on the right ── */
@media (max-height:520px) and (orientation:landscape){
  .game-screen.active{gap:.2rem;padding-top:calc(env(safe-area-inset-top) + .15rem)}
  .gs-top{min-height:30px}.gs-top button{min-height:30px;min-width:34px;padding:.15rem .45rem}
  .gs-info b{font-size:.8rem}
  .dock{flex-direction:row;align-items:flex-end;justify-content:center;gap:.4rem}
  .game-screen .rack-tools{flex-direction:column;overflow:visible;align-self:center}
  .game-screen .rack-tools button{min-height:28px;padding:.15rem .45rem;font-size:.7rem}
  .game-screen .actions{flex-direction:column;flex-wrap:nowrap;align-self:center;max-height:150px;overflow-y:auto}
  .game-screen .actions button,.game-screen .actions select{min-height:34px;padding:.3rem .6rem;font-size:.76rem}
  .game-screen .rack{flex:1;min-width:0}
  .game-screen .rack.istaka{max-width:min(600px,128vh);flex:1}
  .game-screen .seat .avatar{width:34px;height:34px;font-size:.8rem}
  .game-screen .felt .seat.top{flex-direction:row;gap:.3rem;top:4px}
  .game-screen .felt .seat.bottom{flex-direction:row;gap:.3rem;bottom:4px}
  .game-screen .seat .mini-rack{display:none}
  .felt{--ftw:30px;--fth:42px}
  .felt[data-game="okey"] .ok-corner,.felt[data-game="okey101"] .ok-corner{--ftw:30px}
  .game-screen .tslot .pcard{width:38px;height:54px;font-size:.8rem}
  .rack-tiles.cards{min-height:70px;padding-top:.4rem}
  .rack-tiles.cards .pcard{width:46px;height:66px;font-size:.95rem}
  .rack-tiles.cards .pcard .s{font-size:1.2rem}
  .game-screen #center-bilardo{inset:4px 150px}
  .game-screen .felt[data-game="bilardo"] .seat.top{top:10px;left:10px;transform:none;flex-direction:column}
  .game-screen .felt[data-game="bilardo"] .seat.bottom{bottom:10px;left:auto;right:10px;transform:none;flex-direction:column}
  .game-screen #center-tavla{inset:4px 130px}
  .game-screen .felt[data-game="tavla"] .seat.top{top:10px;left:10px;transform:none;flex-direction:column}
  .game-screen .felt[data-game="tavla"] .seat.bottom{bottom:10px;left:auto;right:10px;transform:none;flex-direction:column}
  .rack-tiles.pool-ctl{flex-direction:column;gap:.3rem}.pc-spin{width:42px;height:42px}
  .game-screen #center-101:not([hidden]){inset:16% 22% 34% 22%}
  .ticker{bottom:30%}
  .okey-info{display:none}
}
.game-screen #center-tavla:not([hidden]){container-type:size}
.game-screen #center-tavla .tv-frame{width:min(100cqw,calc(100cqh * 1.25));max-width:none}
.rack-tiles.cards{flex-wrap:nowrap}
.game-screen #center-tavla .tv-frame{margin:auto;flex:none}
.game-screen #center-tavla{width:auto}
/* VIP */
.vipcard{padding:.9rem;border-radius:14px;background:linear-gradient(160deg,#3a2a08cc,#0a0f1c);box-shadow:inset 0 0 0 1px #f3c96999,0 0 24px #f3c96922}
.vipcard.on{box-shadow:inset 0 0 0 2px #f3c969,0 0 26px #f3c96955}
.vipcard ul{margin:.5rem 0 .7rem;padding-left:1.1rem;line-height:1.6}
.vipcard .price{font:800 1.15rem Orbitron,Inter,sans-serif;color:var(--gold)}
.vipbadge{display:inline-block;margin-left:.2rem;font-size:.75em;filter:drop-shadow(0 0 4px #f3c969)}
.game-screen .seat.vip .avatar{box-shadow:0 0 0 2px #f3c969,0 0 18px #f3c969aa,0 6px 14px #000c}
.avatar.vip{box-shadow:0 0 0 2px #f3c969,0 0 18px #f3c969aa,0 6px 14px #000c!important}
.vipcrown{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:.9rem;filter:drop-shadow(0 0 4px #f3c969);pointer-events:none}

/* ═══ Board games: Dama · Mangala · Kızma Birader ═══ */
.game-screen .felt[data-game="dama"]{background:radial-gradient(ellipse at 50% 45%,#2a1d12,#0d0804 92%);box-shadow:inset 0 0 0 2px #f3c96966,inset 0 0 60px #000c,0 18px 40px #000d}
.game-screen .felt[data-game="mangala"]{background:radial-gradient(ellipse at 50% 45%,#10343a,#03100f 92%);box-shadow:inset 0 0 0 2px #22e6ff55,inset 0 0 60px #000c,0 18px 40px #000d}
.game-screen .felt[data-game="kizma"]{background:radial-gradient(ellipse at 50% 45%,#141b33,#04060d 92%);box-shadow:inset 0 0 0 2px #f3c96955,inset 0 0 60px #000c,0 18px 40px #000d}
.felt[data-game="dama"]::before,.felt[data-game="mangala"]::before,.felt[data-game="kizma"]::before{display:none}
.felt[data-game="dama"] .seat,.felt[data-game="mangala"] .seat,.felt[data-game="kizma"] .seat{flex-direction:row;gap:.45rem;max-width:none;align-items:center}
.felt[data-game="dama"] .seat .avatar,.felt[data-game="mangala"] .seat .avatar,.felt[data-game="kizma"] .seat .avatar{width:38px;height:38px}
.felt[data-game="dama"] .seat.top,.felt[data-game="mangala"] .seat.top{top:8px}.felt[data-game="dama"] .seat.bottom,.felt[data-game="mangala"] .seat.bottom{bottom:8px}
.seat .sinfo{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;min-width:0}
.felt[data-game="dama"] .ticker,.felt[data-game="mangala"] .ticker,.felt[data-game="kizma"] .ticker{bottom:62px;top:auto}
.felt[data-game="mangala"] .ticker{bottom:auto;top:calc(50% + var(--mgh, 120px) / 2 + 14px)}
@media (orientation:landscape){
  .felt[data-game="dama"] .seat.top,.felt[data-game="mangala"] .seat.top{left:12px;top:12px;transform:none}
  .felt[data-game="dama"] .seat.bottom,.felt[data-game="mangala"] .seat.bottom{left:12px;bottom:12px;transform:none}
  .felt[data-game="dama"] .ticker,.felt[data-game="kizma"] .ticker{left:12px;bottom:auto;top:50%;transform:translateY(-50%);max-width:calc((100% - var(--bs, 400px)) / 2 - 20px);white-space:normal;border-radius:12px}
}
.bg-hint{font-size:.86rem;color:#dfe6ff;text-align:center;padding:.2rem .4rem}.bg-hint .warn{color:#ffb547}
/* Dama */
.dm-board{--bs:340px;width:var(--bs);height:var(--bs);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:10px;overflow:hidden;
  box-shadow:0 0 0 6px #3a2413,0 0 0 8px #f3c969aa,0 0 30px #f3c96933,0 18px 40px #000e}
.dm-sq{position:relative;display:grid;place-items:center;cursor:default}
.dm-sq.lt{background:linear-gradient(135deg,#f1dfbd,#dcc396)}.dm-sq.dk{background:linear-gradient(135deg,#8a5a34,#6b4224)}
.dm-sq.last::after{content:"";position:absolute;inset:0;background:#22e6ff2e;box-shadow:inset 0 0 0 2px #22e6ff88;pointer-events:none}
.dm-sq.via::after{content:"";position:absolute;inset:38%;border-radius:50%;background:#22e6ff66;pointer-events:none}
.dm-sq.can{cursor:pointer}.dm-sq.can .dm-pc{box-shadow:0 0 0 3px #39e58c,0 0 14px #39e58c99,0 4px 8px #000a}
.dm-sq.sel .dm-pc{box-shadow:0 0 0 3px #f3c969,0 0 18px #f3c969,0 4px 8px #000a;transform:translateY(-3px) scale(1.06)}
.dm-sq.dest{cursor:pointer}.dm-sq.dest::before{content:"";position:absolute;width:32%;height:32%;border-radius:50%;background:#39e58ccc;box-shadow:0 0 12px #39e58c;animation:pulse 1.2s infinite}
.dm-sq.dest.cap::before{background:#ff5a5acc;box-shadow:0 0 12px #ff5a5a}
.dm-pc{position:relative;width:78%;height:78%;border-radius:50%;display:grid;place-items:center;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 8px #000a}
.dm-pc.w{background:radial-gradient(circle at 35% 30%,#fffdf6,#e9dcc0 55%,#bfae8c);border:2px solid #fff8}
.dm-pc.b{background:radial-gradient(circle at 35% 30%,#555b66,#1a1d24 60%,#050608);border:2px solid #000a}
.dm-pc::before{content:"";width:62%;height:62%;border-radius:50%;border:2px solid #0002}
.dm-pc.b::before{border-color:#fff2}
.dm-pc.king::after{content:"👑";position:absolute;font-size:calc(var(--bs) / 8 * .36);filter:drop-shadow(0 1px 1px #000)}
.dm-pc.arrive{animation:dmIn .35s ease-out}
.dm-pc.ghost{opacity:0;animation:dmOut .6s ease-out}
@keyframes dmIn{from{transform:scale(1.35);filter:brightness(1.6)}to{transform:none}}
@keyframes dmOut{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.6) rotate(25deg)}}
/* Mangala */
.mg-board{--pit:74px;display:flex;align-items:stretch;gap:.5rem;padding:.7rem;border-radius:22px;
  background:linear-gradient(180deg,#5b3a20,#3b2312 60%,#2a170b);box-shadow:inset 0 2px 0 #ffffff22,inset 0 -3px 0 #0006,0 0 0 2px #f3c96988,0 0 30px #22e6ff22,0 18px 40px #000e}
.mg-mid{display:flex;flex-direction:column;gap:.5rem}
.mg-row{display:flex;gap:.45rem}
.mg-pit,.mg-store{position:relative;border-radius:50%;background:radial-gradient(circle at 50% 40%,#1b0f07,#2c1a0d 60%,#4a2d17);box-shadow:inset 0 6px 12px #000c,inset 0 -2px 0 #ffffff14}
.mg-pit{width:var(--pit);height:var(--pit)}
.mg-store{width:calc(var(--pit) * .95);border-radius:999px}
.mg-pit.can{cursor:pointer;box-shadow:inset 0 6px 12px #000c,0 0 0 3px #39e58c,0 0 16px #39e58c88}
.mg-pit.can:hover{transform:translateY(-2px)}
.mg-row.op .mg-pit{opacity:.95}
.mg-pit.captured,.mg-store.captured{animation:mgCap .7s ease-out}
.mg-pit.drop,.mg-store.drop{animation:mgDrop .25s ease-out}
@keyframes mgDrop{0%{box-shadow:inset 0 6px 12px #000c,0 0 0 3px #f3c969,0 0 18px #f3c969}100%{}}
@keyframes mgCap{0%{box-shadow:0 0 0 4px #ff5a5a,0 0 26px #ff5a5a}100%{}}
.mg-stones{position:absolute;inset:0;pointer-events:none}
.mg-stones i{position:absolute;width:20%;height:20%;max-width:18px;max-height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,hsl(var(--h) 85% 62%) 40%,hsl(var(--h) 80% 30%));box-shadow:0 1px 2px #000b}
.mg-store .mg-stones i{width:22%;height:auto;aspect-ratio:1}
.mg-n{position:absolute;bottom:-2px;right:-2px;min-width:1.4em;padding:0 .3em;border-radius:999px;background:#000c;color:var(--gold);font-size:.78rem;text-align:center;box-shadow:0 0 0 1px #f3c96966}
.mg-store .mg-n{bottom:50%;right:50%;transform:translate(50%,50%);font-size:1.05rem;padding:.1em .45em}
/* Kızma Birader */
.kb-board{--bs:340px;width:var(--bs);height:var(--bs);display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);gap:2px;padding:6px;border-radius:18px;
  background:linear-gradient(145deg,#0d1226,#060914);box-shadow:0 0 0 2px #f3c969aa,0 0 30px #22e6ff2a,0 18px 40px #000e}
.kb-sq{border-radius:50%;background:radial-gradient(circle at 40% 35%,#f4f1e8,#c9c3b2);box-shadow:inset 0 -2px 0 #0003,0 1px 3px #0009;margin:7%}
.kb-sq.start{background:radial-gradient(circle at 40% 35%,#fff,var(--c));box-shadow:0 0 0 2px var(--c),0 0 10px var(--c)}
.kb-sq.home{background:radial-gradient(circle at 40% 35%,#fff8,var(--c) 70%);opacity:.85}
.kb-sq.yard{background:radial-gradient(circle at 40% 35%,#0006,#0000 70%);box-shadow:0 0 0 2px var(--c),inset 0 0 8px #000a;opacity:.9}
.kb-core{margin:4%;border-radius:50%;background:conic-gradient(#ef4a3c 0 25%,#3b82f6 0 50%,#22c55e 0 75%,#facc15 0);opacity:.35;pointer-events:none}
.kb-pawn{z-index:2;margin:10%;padding:0;min-height:0;border:0;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 38% 28%,#fff,var(--c) 45%,#000 140%);
  box-shadow:0 3px 6px #000c,inset 0 -3px 4px #0006;cursor:default;transition:transform .18s}
.kb-pawn.can{cursor:pointer;box-shadow:0 0 0 3px #fff,0 0 14px var(--c),0 3px 6px #000c;animation:kbBob .9s ease-in-out infinite}
.kb-pawn.arrive{animation:kbArrive .4s ease-out}
.kb-dest{z-index:1;margin:22%;padding:0;min-height:0;border:2px dashed var(--c);border-radius:50%;background:#fff3;cursor:pointer;animation:pulse 1.2s infinite}
@keyframes kbBob{50%{transform:translateY(-12%)}}
@keyframes kbArrive{from{transform:scale(1.5);filter:brightness(1.8)}to{transform:none}}
.kb-dot{width:14px;height:14px;padding:0!important;border-radius:50%!important}
.kb-dot.c0{background:#ef4a3c!important}.kb-dot.c1{background:#3b82f6!important}.kb-dot.c2{background:#22c55e!important}.kb-dot.c3{background:#facc15!important}
/* Kızma seats sit in the board's corners: you bottom-left, then clockwise */
.felt[data-game="kizma"] .seat.bottom{left:8px;bottom:8px;transform:none}
.felt[data-game="kizma"] .seat.left{left:8px;top:8px;transform:none}
.felt[data-game="kizma"] .seat.top{right:8px;left:auto;top:8px;transform:none;flex-direction:row-reverse}
.felt[data-game="kizma"] .seat.right{right:8px;bottom:8px;top:auto;transform:none;flex-direction:row-reverse}
.felt[data-game="kizma"] .seat.top .sinfo,.felt[data-game="kizma"] .seat.right .sinfo{align-items:flex-end}
@media (prefers-reduced-motion: reduce){.kb-pawn.can,.dm-sq.dest::before,.kb-dest{animation:none}}
@media (orientation:landscape) and (max-height:560px){
  .felt[data-game="dama"] .seat.top,.felt[data-game="mangala"] .seat.top{left:10px;top:10px;transform:none}
  .felt[data-game="dama"] .seat.bottom,.felt[data-game="mangala"] .seat.bottom{left:10px;bottom:10px;transform:none}
}
.dice-row .die.past{opacity:.75;transform:scale(.8);animation:none}
/* Mangala on a tall phone: the board stands up — your pits on the left (top→bottom), your hazine at the bottom */
.mg-board.vert{flex-direction:column;align-items:stretch}
.mg-board.vert .mg-mid{flex-direction:row-reverse}
.mg-board.vert .mg-row{flex-direction:column}
.mg-board.vert .mg-store{width:auto;height:calc(var(--pit) * .95)}
.felt.mg-vert[data-game="mangala"] .ticker{top:auto;bottom:62px}
.mg-pit.lastdrop,.mg-store.lastdrop{box-shadow:inset 0 6px 12px #000c,0 0 0 2px #22e6ff,0 0 14px #22e6ff88}
.lvl-sel{min-height:40px;border-radius:10px;padding:.3rem .5rem;background:#0b1430;color:#fff;border:1px solid #f3c96966}
/* 💡 hint highlight + personal record line */
.pcard.hint,.rack-tiles.cards .pcard.hint{transform:translateY(-18px);box-shadow:0 0 0 3px #ffd75a,0 0 22px #ffd75a,-2px 0 6px #0007!important;animation:hintPulse 1s ease-in-out infinite}
.bidrow button.hint{box-shadow:0 0 0 3px #fff,0 0 18px #ffd75a}
.pt.hint::after{content:"";position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 0 3px #ffd75a,0 0 16px #ffd75a;pointer-events:none;animation:hintPulse 1s ease-in-out infinite}
@keyframes hintPulse{50%{filter:brightness(1.25)}}
.stats-line{margin:.8rem auto 0;padding:.45rem .7rem;border-radius:10px;background:#0b1430;box-shadow:0 0 0 1px #f3c96955;font-size:.86rem;color:#e8edff;max-width:420px}
@media (prefers-reduced-motion: reduce){.pcard.hint,.pt.hint::after{animation:none}}
/* action bar: wrap onto two neat rows on phones instead of running off the screen */
.game-screen .actions{flex-wrap:wrap;justify-content:center;overflow:visible;row-gap:.3rem}
.game-screen .actions .bidrow{flex-basis:100%}
.game-screen .actions .lvl-sel{max-width:118px;padding:.3rem .4rem}
@media (max-width:480px){.game-screen .actions button[disabled]{padding:.45rem .6rem;font-size:.8rem;opacity:.75}}