/* Kamuterapi Oyun — v0.3.0
   Renk düzeni: yetişkin + çocuk için anlaşılır, neşeli, yüksek kontrast
*/

:root{
  --bg1:#f5f3ff;
  --bg2:#ecfeff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:rgba(15,23,42,.12);

  --primary:#7c3aed; /* mor */
  --primary2:#06b6d4; /* turkuaz */
  --ok:#16a34a;
  --err:#dc2626;
  --warn:#f59e0b;

  --shadow:0 10px 30px rgba(2,6,23,.10);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-weight:400;
  color:var(--text);
  background: radial-gradient(1200px 500px at 10% -10%, rgba(124,58,237,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(6,182,212,.18), transparent 55%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
}

a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}

b,strong{font-weight:400}

.container{
  width:min(1100px, 100% - 32px);
  margin:0 auto;
}

.container--fluid{
  width:100%;
  margin:0;
  padding-left:0;
  padding-right:0;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom:1px solid var(--border);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:14px;
}
.brand:hover{background:rgba(124,58,237,.08); text-decoration:none}
.brand__logo{font-size:22px}
.brand__name{font-weight:400; letter-spacing:.2px}

.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.nav__link{
  padding:8px 10px;
  border-radius:12px;
  color:var(--muted);
  font-weight:400;
}
.nav__link:hover{
  background:rgba(6,182,212,.10);
  color:var(--text);
  text-decoration:none;
}

.userbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.userbar__hello{color:var(--muted); font-size:14px}

/* ===================== SFX Popover (v0.3.62) ===================== */
.sfx-popover{
  position:fixed;
  z-index:10050;
  width:260px;
  max-width:calc(100vw - 16px);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:10px;
}
.sfx-popover__row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.sfx-popover__row--top{justify-content:space-between}
.sfx-popover .sfx-range{flex:1}
.sfx-popover .sfx-pack{
  flex:1;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.75);
}
.sfx-popover__hint{font-size:12px; margin-top:6px}

@media (max-width:520px){
  .sfx-popover{width:calc(100vw - 16px)}
}

main.container{padding:22px 0 40px}
main.container--fluid{padding:0}

.footer{
  border-top:1px solid var(--border);
  background: rgba(255,255,255,.65);
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:16px 0;
  color:var(--muted);
  font-size:14px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}
.subcard{box-shadow:none}
h1,h2,h3{margin:0 0 10px}
h1{font-size:28px; font-weight:400}
h2{font-size:20px; font-weight:400}
p{line-height:1.6}
h3,h4,h5,h6{font-weight:400}
.muted{color:var(--muted); font-weight:300}
hr{border:none; border-top:1px solid var(--border); margin:14px 0}

.grid2{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
@media (min-width:900px){
  .grid2{grid-template-columns: 1fr 1fr}
}

.form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
label>span{display:block; font-weight:400; margin-bottom:6px}
.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  outline:none;
  background:#fff;
  font-size:16px;
}
.input:focus{
  border-color: rgba(124,58,237,.55);
  box-shadow: 0 0 0 4px rgba(124,58,237,.12);
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:400;
  background:rgba(124,58,237,.10);
  color:var(--text);
}
.button:hover{filter:brightness(0.98); text-decoration:none}
.button.primary{
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  color:white;
}
.button.ghost{
  background:transparent;
  border-color:var(--border);
  color:var(--muted);
}
.button.small{padding:8px 10px; border-radius:12px; font-size:14px}

.button.big{padding:16px 20px; border-radius:18px; font-size:18px}

.inline{display:inline}

.toast{
  padding:12px 14px;
  border-radius:14px;
  margin:10px 0;
  font-weight:400;
  border:1px solid var(--border);
}
.toast.ok{background:rgba(22,163,74,.12); color:#14532d}
.toast.err{background:rgba(220,38,38,.10); color:#7f1d1d}

.alert{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  margin:10px 0;
  white-space:pre-line;
  line-height:1.35;
}
.alert.ok{background:rgba(22,163,74,.12)}
.alert.err{background:rgba(220,38,38,.10)}
.alert.warn{background:rgba(245,158,11,.12)}

/* v0.3.78 — Kapatılabilir modal/popup (özellikle Okey “Bitirdim!” uyarıları) */
body.app-modal-open{overflow:hidden}

.app-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:12000;
}
.app-modal.is-open{display:flex}

.app-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.55);
}

.app-modal__dialog{
  position:relative;
  width:min(720px, calc(100% - 24px));
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 16px 40px rgba(2,6,23,.35);
  padding:14px 14px 12px;
  z-index:1;
}

.app-modal.is-err .app-modal__dialog{box-shadow:0 16px 40px rgba(220,38,38,.18)}

.app-modal__close{
  position:absolute;
  top:8px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.85);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.app-modal__title{
  font-weight:400;
  font-size:18px;
  padding-right:42px;
}

.app-modal__body{
  margin-top:10px;
  white-space:pre-line;
  line-height:1.42;
  max-height:min(62vh, 520px);
  overflow:auto;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.70);
}

.app-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(6,182,212,.10);
  border:1px solid rgba(6,182,212,.25);
  font-weight:400;
  font-size:12px;
  color:var(--text);
}

.table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--border);
}
.table th, .table td{
  text-align:left;
  padding:10px 10px;
  border-bottom:1px solid var(--border);
}
.table th{font-size:13px; color:var(--muted)}
.table tr:last-child td{border-bottom:none}

.details{
  border:1px dashed var(--border);
  border-radius:16px;
  padding:12px 12px;
}
.details summary{cursor:pointer}

/* v0.3.88 — Maç geçmişi detay görünümü */
.match-details{background:transparent; border-style:solid;}
.match-details > summary{list-style:none; display:inline-flex; align-items:center; justify-content:center; padding:7px 9px; border-radius:12px; border:1px solid transparent; background:rgba(124,58,237,.10); color:var(--text); cursor:pointer;}
.match-details > summary::-webkit-details-marker{display:none}
.match-details[open] > summary{margin-bottom:8px}


.logbox{
  background:rgba(2,6,23,.04);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 12px;
  white-space:pre-wrap;
  overflow:auto;
  max-height:560px;
  font-size:13px;
  line-height:1.45;
}

/* Game UI */
.gamewrap{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:900px){
  .gamewrap{grid-template-columns: 2fr 1fr}
}
.gamepanel{
  background:rgba(255,255,255,.85);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
}
.tiles{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tile{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:white;
  font-weight:400;
  font-size:14px;
}
.tile.wild{outline: 3px solid rgba(245,158,11,.25)}
.pill{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(124,58,237,.10);
  border:1px solid rgba(124,58,237,.25);
  font-weight:400;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.chatbox{
  height:320px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:white;
}
.chatmsg{margin:0 0 10px}
.chatmsg b{display:inline-block; margin-right:6px}

.button.danger{
  background: rgba(220,38,38,.10);
  border-color: rgba(220,38,38,.25);
  color: #7f1d1d;
}

/* Responsive iframe (oyun embed) */
.iframe-wrap{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  background:white;
}
.iframe-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.badge.ok{background:rgba(22,163,74,.14); border-color:rgba(22,163,74,.25)}
.badge.warn{background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.25)}
.badge.err{background:rgba(220,38,38,.10); border-color:rgba(220,38,38,.25)}


/* Child games grid */
.game-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  margin-top:14px;
}
.game-card{
  background: rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
}
.game-card h2{font-size:18px; margin:0 0 6px}
.inline-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px}
.form-inline{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.hint{color:var(--muted); font-size:14px}

/* ============ Okey UI (etkileşimli) ============ */
.game-app{margin-top:10px}

.game-head{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

.players{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.player{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(124,58,237,.10);
  border:1px solid rgba(124,58,237,.22);
  font-weight:400;
}
.player.turn{box-shadow: 0 0 0 4px rgba(6,182,212,.15)}

.avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-weight:400;
  font-size:13px;
  border:1px solid rgba(255,255,255,.35);
}

.okey-ui{display:flex; flex-direction:column; gap:12px}

.okey-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.okey-table{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:900px){
  .okey-table{grid-template-columns: 1fr 1fr}
}

.okey-piles{display:flex; gap:12px; flex-wrap:wrap}

.okey-pile, .okey-dropzone{
  flex:1;
  min-width:180px;
  border-radius:16px;
  padding:12px;
  background:white;
  border:1px dashed var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:110px;
}
.okey-pile.clickable{cursor:pointer}
.okey-pile.clickable:hover{background:rgba(6,182,212,.06)}

.okey-dropzone.dragover{
  background:rgba(6,182,212,.08);
  border-color:rgba(6,182,212,.35);
}

.okey-rack{
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  display:flex;
  gap:8px;
  /* İstek: taşlar sağlıklı yönetilsin, scroll yerine wrap kullan */
  flex-wrap:wrap;
  overflow:hidden;
  justify-content:center;
  padding:10px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.75);
}

.okey-tile{
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag:none;
  cursor:grab;
  will-change:transform;
  /* Daha büyük ve anlaşılır taş görünümü */
  width: var(--okey-tile-w, 56px);
  height: var(--okey-tile-h, 78px);
  flex:0 0 auto;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,245,245,.92));
  border:2px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:400;
  color: rgba(15,23,42,.96);
  user-select:none;
  cursor:grab;
  position:relative;
  box-shadow:0 10px 20px rgba(0,0,0,.10);
}

.okey-tile .num{font-size:26px; line-height:1}
.okey-tile .mini{display:none}
.okey-tile.selected{box-shadow:0 0 0 4px rgba(6,182,212,.20)}
.okey-tile.wild{outline:3px solid rgba(245,158,11,.25)}
.okey-tile.dragging{opacity:.55}
.okey-tile.drag-over{box-shadow:0 0 0 4px rgba(124,58,237,.20);}

/* v0.3.27 — Okey: daha gerçekçi sürükle-bırak (boş yuva + yumuşak ghost) */
.okey-rack.is-dragging{cursor:grabbing}
.okey-rack.is-dragging .okey-tile{will-change:transform}
.okey-tile.drag-placeholder{
  opacity:0;
  box-shadow:none;
  border:none;
  background:none;
  pointer-events:none;
}
.okey-tile.drag-placeholder .num{opacity:0}

.okey-drag-ghost,
.okey-drag-live{
  opacity:.98;
  transform-origin:0 0;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.40));
}
.okey-drag-ghost.is-over-discard,
.okey-drag-live.is-over-discard{
  filter: drop-shadow(0 18px 26px rgba(220,38,38,.40));
}



/* v0.3.54 — Drag overlay layer (ghost bu layer içinde taşınır) */
.okey-drag-layer{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:none;
}
body.okey-no-scroll{
  overflow:hidden;
  touch-action:none;
}

/* v0.3.59 — Okey: gerçekçi taş dağıtım overlay animasyonu (arka taşlar) */
.okey-deal-layer{
  position:fixed;
  inset:0;
  z-index:99980;
  pointer-events:none;
}
.okey-deal-card{
  position:fixed;
  left:0;
  top:0;
  will-change:transform, opacity;
  transform-origin:0 0;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(.22,1,.36,1), ease;
  transition-duration: 280ms, 220ms;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.35));
}



/* v0.3.60 — Dağıtım sırasında küçük bilgi/skip ipucu */
.okey-deal-hint{
  position:absolute;
  top:12px;
  left:50%;
  transform: translateX(-50%);
  z-index:6;
  font-size:13px;
  font-weight:400;
  letter-spacing:.2px;
  color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  padding:6px 10px;
  border-radius:999px;
  pointer-events:none;
  backdrop-filter: blur(6px);
}

/* Dağıtım sırasında etkileşimi kilitle + el taşlarını gizle (flash yapmasın) */
body.page-game--immersive.game-okey .game-app.is-dealing .okey-table3d{
  pointer-events:none;
}
body.page-game--immersive.game-okey .okey-rack .okey-tile{
  transition: opacity 160ms ease, transform 160ms ease;
}
body.page-game--immersive.game-okey .game-app.is-dealing .okey-rack .okey-tile{
  opacity:0;
  transform: translateY(6px) scale(.985);
}

/* v0.3.65 — Deal sırasında eldeki taşlar sırayla görünür (is-revealed) */
body.page-game--immersive.game-okey .game-app.is-dealing .okey-rack .okey-tile.is-revealed{
  opacity:1;
  transform: translateY(0) scale(1);
}
body.page-game--immersive.game-okey .game-app.is-dealing .okey-rack .okey-tile.reveal-in{
  animation: okeyRevealIn .38s ease both;
}
@keyframes okeyRevealIn{
  from{opacity:0; transform: translateY(16px) scale(.94)}
  to{opacity:1; transform: translateY(0) scale(1)}
}


/* v0.3.28 — Okey: başlangıçta taş dağıtım animasyonu (tek seferlik) */
.okey-tile.deal-in{
  animation: okeyDealIn .42s ease both;
  animation-delay: calc(var(--i, 0) * 18ms);
}
@keyframes okeyDealIn{
  from{opacity:0; transform:translate(var(--dx, 0px), var(--dy, 18px)) scale(.94) rotate(-1deg)}
  to{opacity:1; transform:translate(0, 0) scale(1) rotate(0)}
}



.okey-tile.c-R{border-color:rgba(220,38,38,.55)}
.okey-tile.c-B{border-color:rgba(37,99,235,.55)}
.okey-tile.c-Y{border-color:rgba(245,158,11,.70)}
.okey-tile.c-K{border-color:rgba(15,23,42,.50)}
.okey-tile.c-J{border-color:rgba(124,58,237,.55)}

.okey-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.smalltxt{font-size:13px; color:var(--muted)}

/* ============ Tavla UI (etkileşimli) ============ */
.tavla-ui{display:flex; flex-direction:column; gap:12px}

.dice{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.die{
  width:44px;
  height:44px;
  border-radius:14px;
  background:white;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:400;
  font-size:18px;
}
.die.used{opacity:.45}

.tavla-board{
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.75);
  padding:10px;
}

.tavla-row{
  display:grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap:6px;
}
.tavla-row + .tavla-row{margin-top:6px}

.tavla-point{
  background:white;
  border:1px solid var(--border);
  border-radius:12px;
  min-height:110px;
  padding:6px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  position:relative;
}
.tavla-row.bottom .tavla-point{flex-direction:column-reverse}

.tavla-point.selectable{cursor:pointer}
.tavla-point.selectable:hover{background:rgba(6,182,212,.06)}

.tavla-point.selected{box-shadow:0 0 0 4px rgba(6,182,212,.18)}
.tavla-point.can-drop{box-shadow:0 0 0 4px rgba(124,58,237,.14)}

.pnum{
  position:absolute;
  top:6px;
  right:6px;
  font-size:10px;
  font-weight:400;
  color:var(--muted);
}
.tavla-row.bottom .pnum{top:auto; bottom:6px}

.checker{
  width:26px;
  height:26px;
  border-radius:50%;
  border:2px solid var(--border);
  margin:2px 0;
}
.checker.W{background:#fff}
.checker.B{background:#0f172a; border-color:rgba(255,255,255,.28)}
.checker.more{
  width:auto;
  height:auto;
  border:none;
  background:transparent;
  font-weight:400;
  color:var(--muted);
  margin:2px 0;
}

.tavla-bar{
  background:rgba(124,58,237,.08);
  border:1px solid rgba(124,58,237,.25);
  border-radius:12px;
  min-height:110px;
  padding:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:400;
  gap:6px;
}
.tavla-bar.selectable{cursor:pointer}
.tavla-bar.selectable:hover{background:rgba(6,182,212,.06)}
.tavla-bar.selected{box-shadow:0 0 0 4px rgba(6,182,212,.18)}

.tavla-off{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:stretch;
}
.offbox{
  flex:1;
  min-width:180px;
  border-radius:16px;
  background:white;
  border:1px dashed var(--border);
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.offbox.selectable{cursor:pointer}
.offbox.selectable:hover{background:rgba(6,182,212,.06)}
.offbox.can-drop{box-shadow:0 0 0 4px rgba(124,58,237,.14)}

/* ==========================================================
   Oyun Sahnesi (full width) + Popup
   ========================================================== */

.popupbar{
  position:sticky;
  top:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(10px);
}
.popupbar__left{display:flex; gap:10px; align-items:baseline}
.popupbar__right{display:flex; gap:8px; align-items:center}

.game-shell{width:100%; padding:0}

.game-shell__top{
  position:sticky;
  top:56px;
  z-index:40;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background:rgba(255,255,255,.72);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(10px);
}
body.is-popup .game-shell__top{top:0}

.game-title{margin:0; font-size:22px}
.game-sub{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.game-shell__actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}

.game-stage{width:100%; padding:10px 0 0}
.game-app--stage{width:100%}

.chat-drawer{
  width:min(1100px, 100% - 32px);
  margin:18px auto 0;
  background:rgba(255,255,255,.82);
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 12px;
  box-shadow: var(--shadow);
}
.chat-drawer > summary{cursor:pointer; list-style:none}
.chat-drawer > summary::-webkit-details-marker{display:none}

/* ==========================================================
   v0.3.18 — Immersive oyun sahnesi + sağ chat paneli
   - Header/Footer gizli (room sayfası)
   - Oyun + sohbet aynı sahnede (grid)
   ========================================================== */

body.page-game--immersive .game-shell__top{top:0}
body.page-game--immersive .game-stage{padding:0}

/* v0.3.28 — OKEY: Arkaplan görseli kapalı (istek: BG görseli kaldır) */
body.page-game--immersive.game-okey{
  background:
    radial-gradient(1200px 520px at 12% -10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(6,182,212,.18), transparent 55%),
    radial-gradient(1100px 620px at 50% 12%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, #0b1220, #090f1a);
}

.game-layout{
  width:min(1700px, calc(100% - 16px));
  margin:0 auto;
  display:grid;
  /* v0.3.29 — Chat dock sisteminde kullanılan ölçüler */
  --chat-w: 360px;
  --chat-h: 300px;
  --chat-tab-w: 56px;
  --chat-tab-h: 44px;

  grid-template-columns: 1fr var(--chat-w);
  grid-template-rows: 1fr;
  gap:12px;
  align-items:start;
  padding:12px 8px 0;
}
.game-layout__main{min-width:0}

/* v0.3.34 — Bot oyunları: WAITING ekranında ortada "Başlat" alanı */
.game-prestart{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 0;
}
.game-prestart__card{
  width:min(520px, 100%);
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  padding:18px;
  color:rgba(255,255,255,.92);
  box-shadow:0 18px 50px rgba(0,0,0,.30);
  text-align:center;
}
.game-prestart__card h2{color:white;}
.game-prestart__card .muted{color:rgba(255,255,255,.72);}


/* ==========================================================
   v0.3.29 — Chat paneli: sürükle + 4 kenara yapış (dock)
   - data-chat-dock: right|left|top|bottom
   - data-chat-open: 1|0 (drawer kapalıyken alanı küçült)
   ========================================================== */

.game-layout[data-chat-dock="left"]{ grid-template-columns: var(--chat-w) 1fr; }
.game-layout[data-chat-dock="top"]{ grid-template-columns: 1fr; grid-template-rows: var(--chat-h) 1fr; }
.game-layout[data-chat-dock="bottom"]{ grid-template-columns: 1fr; grid-template-rows: 1fr var(--chat-h); }

.game-layout[data-chat-open="0"][data-chat-dock="right"]{ grid-template-columns: 1fr var(--chat-tab-w); }
.game-layout[data-chat-open="0"][data-chat-dock="left"]{ grid-template-columns: var(--chat-tab-w) 1fr; }
.game-layout[data-chat-open="0"][data-chat-dock="top"]{ grid-template-rows: var(--chat-tab-h) 1fr; }
.game-layout[data-chat-open="0"][data-chat-dock="bottom"]{ grid-template-rows: 1fr var(--chat-tab-h); }

.game-layout[data-chat-dock="right"] .game-layout__main{ grid-column:1; grid-row:1; }
.game-layout[data-chat-dock="right"] .chat-drawer{ grid-column:2; grid-row:1; }

.game-layout[data-chat-dock="left"] .chat-drawer{ grid-column:1; grid-row:1; }
.game-layout[data-chat-dock="left"] .game-layout__main{ grid-column:2; grid-row:1; }

.game-layout[data-chat-dock="top"] .chat-drawer{ grid-column:1; grid-row:1; }
.game-layout[data-chat-dock="top"] .game-layout__main{ grid-column:1; grid-row:2; }

.game-layout[data-chat-dock="bottom"] .game-layout__main{ grid-column:1; grid-row:1; }
.game-layout[data-chat-dock="bottom"] .chat-drawer{ grid-column:1; grid-row:2; }

body.chat-dragging .game-layout{ outline:2px dashed rgba(255,255,255,.18); outline-offset:-8px; }

.chat-drawer.chat-drawer--side{ height:100%; }
.chat-drawer.chat-drawer--side > summary.chat-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.14);
  user-select:none;
  cursor:grab;
}
.chat-drawer.chat-drawer--side.is-dragging > summary.chat-summary{ cursor:grabbing; }
.chat-summary__hint{font-size:12px; opacity:.85; white-space:nowrap;}

/* Kapalıyken (tab) yan dock: dikey etiket gibi */
.game-layout[data-chat-open="0"][data-chat-dock="right"] .chat-drawer.chat-drawer--side > summary.chat-summary,
.game-layout[data-chat-open="0"][data-chat-dock="left"] .chat-drawer.chat-drawer--side > summary.chat-summary{
  height:100%;
  border-bottom:none;
  justify-content:center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.game-layout[data-chat-open="0"][data-chat-dock="right"] .chat-drawer.chat-drawer--side > summary.chat-summary{ transform: rotate(180deg); }
.game-layout[data-chat-open="0"][data-chat-dock="left"] .chat-summary__hint{display:none;}
.game-layout[data-chat-open="0"][data-chat-dock="right"] .chat-summary__hint{display:none;}

/* Kapalıyken (tab) üst/alt dock */
.game-layout[data-chat-open="0"][data-chat-dock="top"] .chat-summary__hint,
.game-layout[data-chat-open="0"][data-chat-dock="bottom"] .chat-summary__hint{display:none;}

/* v0.3.24 — Oyun (PLAYING) sahnesi: tam ekran (scroll yok) */
body.page-game--immersive .game-layout.game-layout--playing{
  width:100%;
  margin:0;
  padding:0;
  min-height:100vh;
  height:100vh;
  /* v0.3.80 — Mobil viewport (address bar) kaynaklı kırpılma riskini azalt */
  min-height:100dvh;
  height:100dvh;
}
body.page-game--immersive .game-layout.game-layout--playing .game-layout__main{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
}
body.page-game--immersive .game-layout.game-layout--playing .game-app--stage{
  flex:1;
  min-height:0;
}
body.page-game--immersive .game-layout.game-layout--playing .okey-scene,
body.page-game--immersive .game-layout.game-layout--playing .tavla-scene{
  height:100%;
  min-height:100%;
}
body.page-game--immersive .game-layout.game-layout--playing .chat-drawer.chat-drawer--side{
  position:relative;
  top:auto;
  height:100%;
}

/* Oyun sahnesinde sohbet panelini temaya uydur */
body.page-game--immersive .chat-drawer.chat-drawer--side{
  background:rgba(0,0,0,.36);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.94);
}
body.page-game--immersive .chat-drawer.chat-drawer--side .muted{color:rgba(255,255,255,.72)}
body.page-game--immersive .chat-drawer.chat-drawer--side .chatmsg{color:rgba(255,255,255,.92)}
body.page-game--immersive .chat-drawer.chat-drawer--side .input{
  background:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.22);
}
/* v0.3.28 — Chat okunabilirlik: beyaz yazı + koyu chatbox (white-on-white fix) */
body.page-game--immersive .chat-drawer.chat-drawer--side .chatbox{
  background: rgba(0,0,0,.24);
  border-color: rgba(255,255,255,.18);
}
body.page-game--immersive .chat-drawer.chat-drawer--side .chatmsg b{color:rgba(255,255,255,.96)}
body.page-game--immersive .chat-drawer.chat-drawer--side form .button.primary{width:100%}
/* v0.3.28 — Chat araç butonları koyu zeminde okunaklı */
body.page-game--immersive .chat-drawer.chat-drawer--side .button{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}
body.page-game--immersive .chat-drawer.chat-drawer--side .button.ghost{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
}
body.page-game--immersive .chat-drawer.chat-drawer--side .button.danger{
  background: rgba(220,38,38,.22);
  border-color: rgba(220,38,38,.35);
  color: rgba(255,255,255,.92);
}

/* Alt meta barı PLAYING sahnesinde gizle (butonlar oyun içi HUD + chat panelinden yönetilecek) */
body.page-game--immersive .game-bottombar.game-bottombar--incol{display:none;}

/* Alt bilgi barı artık ana kolon içinde tam genişlik */
.game-bottombar.game-bottombar--incol{
  width:100%;
  margin:12px 0 0;
}

/* Sağ chat paneli */
.chat-drawer.chat-drawer--side{
  width:100%;
  margin:0;
}


.chat-tools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin:10px 0 8px;
}
.chat-tools .button{padding:8px 10px; font-size:13px}
.chat-tools form{display:inline}

/* v0.3.92 — Oda kontrolü panelini sohbet alanına bağla (Oyunu Sonlandır / oylama) */
.chat-room-controls{ margin:8px 0 10px; }
.chat-room-controls:empty{ display:none; }

@media (min-width:1101px){
  .chat-drawer.chat-drawer--side{
    position:sticky;
    top:12px;
    height: calc(100vh - 24px);
    display:flex;
    flex-direction:column;
  }

  /* Oda WAITING ekranında üst bilgi bloğu var; chat stickiness'i kapat */
  .game-layout.game-layout--waiting .chat-drawer.chat-drawer--side{
    position:static;
    height:auto;
  }

  /* v0.3.28 — PLAYING'de sohbet aç/kapat kullanılabilsin (istek) */
  .chat-drawer.chat-drawer--side > summary{pointer-events:auto; cursor:pointer;}
  .chat-drawer.chat-drawer--side .chatbox{
    flex:1;
    height:auto;
    min-height:220px;
  }
  .chat-drawer.chat-drawer--side form{margin-top:10px}
}

@media (max-width:1100px){
  .game-layout{grid-template-columns: 1fr}
  .chat-drawer.chat-drawer--side .chatbox{height:220px}
  .chat-drawer.chat-drawer--side > summary{pointer-events:auto}
}

/* v0.3.75 — Mobil yatayda chat yüksekliği ıstakayı gizlemesin */
@media (max-width:1100px) and (max-height:520px) and (orientation: landscape){
  .game-layout{ --chat-h: 140px; }
}

/* ==========================================================
   v0.3.82 — OKEY (mobil): HUD bilgileri ayrı aç/kapa panel (sohbetten bağımsız)
   - Oda / Gösterge / Okey / Kalan / Yerde / Sıra
   ========================================================== */

.hud-drawer{ display:none; }
.hud-drawer > summary{cursor:pointer; list-style:none}
.hud-drawer > summary::-webkit-details-marker{display:none}

@media (max-width:1100px){
  body.page-game--immersive.game-okey .hud-drawer.hud-drawer--mobile{
    display:block;
    position:absolute;
    top: calc(10px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left));
    width: min(420px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    z-index:8;
  }
  body.page-game--immersive.game-okey .hud-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:16px;
    background: rgba(0,0,0,.36);
    border:1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.94);
    user-select:none;
  }
  body.page-game--immersive.game-okey .hud-summary__hint{
    font-size:12px;
    opacity:.85;
    white-space:nowrap;
  }
  body.page-game--immersive.game-okey .hudbox{ margin-top:10px; }
  body.page-game--immersive.game-okey .hudbox .okey-hudpanel{
    max-width:100%;
    width:100%;
  }
}

/* ==========================================================
   OKEY — Masa Konsepti (üst/sol/sağ rakip ıstakaları)
   ========================================================== */

.okey-scene{
  width:100%;
  min-height: calc(100vh - 170px);
  padding:14px 0 24px;
  /* Okey: masa konsepti artık ahşap/gerçek masa görünümüne yakın */
  background:
    radial-gradient(1100px 620px at 50% 22%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(900px 700px at 10% 10%, rgba(0,0,0,.06), transparent 62%),
    radial-gradient(900px 700px at 90% 10%, rgba(0,0,0,.06), transparent 62%),
    linear-gradient(180deg, #f4efe6 0%, #e6d8c4 52%, #d8c2a6 100%);
}


/* v0.3.24 — Okey foto arkaplan modunda sahne şeffaf + tam yükseklik */
body.page-game--immersive.game-okey .okey-scene,
.okey-scene--realbg{
  min-height:100vh;
  /* v0.3.80 — Mobil viewport (dvh) uyumu: yatayda alt ıstaka kırpılmasın */
  min-height:100dvh;
  padding:0;
  background:none;
}
body.page-game--immersive.game-okey .okey-scene{position:relative;isolation:isolate;}
body.page-game--immersive.game-okey .okey-scene::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 50% 30%, rgba(0,0,0,.18), transparent 60%),
    radial-gradient(900px 720px at 50% 110%, rgba(0,0,0,.28), transparent 65%);
  pointer-events:none;
  z-index:0;
}
body.page-game--immersive.game-okey .seat-hands{display:none;}

body.page-game--immersive.game-okey .okey-table3d{
  width:100%;
  margin:0;
  position:absolute;
  z-index:1;
  inset:0;
  padding:0;
}
body.page-game--immersive.game-okey .okey-felt{
  height:100%;
  min-height:0;
  border:none;
  box-shadow:none;
  border-radius:0;
  background:transparent;
  overflow:hidden;
}


/* v0.3.36 — Okey: masa grid yerleşimi */
body.page-game--immersive.game-okey .okey-felt{
  --okey-side-w: clamp(170px, 18vw, 360px);
  --okey-top-h: clamp(76px, 12vh, 120px);
  --okey-stage-pad: clamp(10px, 2vw, 22px);
  --okey-center-min-h: 220px;

  display:grid;
  grid-template-columns: var(--okey-side-w) 1fr var(--okey-side-w);
  grid-template-rows: var(--okey-top-h) minmax(var(--okey-center-min-h), 1fr) auto;
  padding: var(--okey-stage-pad);
  align-items:center;
  justify-items:center;
  column-gap: 12px;
  row-gap: 12px;
}

/* v0.3.76 — Desktop: ıstaka/tüm taşlar ekrana sığsın diye merkez minimum yüksekliği biraz düşür */
@media (min-width: 1001px){
  body.page-game--immersive.game-okey .okey-felt{
    --okey-center-min-h: 200px;
  }
}
/* v0.3.76 — Kısa ekranlı masaüstü (örn 1366×768): ıstaka taşmasın */
@media (min-width: 1001px) and (max-height: 820px){
  body.page-game--immersive.game-okey .okey-felt{
    --okey-center-min-h: 150px;
    row-gap: 10px;
  }
}

/* v0.3.80 — Mobil yatay (düşük yükseklik): ıstaka/merkez/kontroller aynı anda görünür olsun */
@media (max-width: 1100px) and (max-height: 520px) and (orientation: landscape){
  body.page-game--immersive.game-okey .okey-felt{
    /* Rakip kartları ve merkez alanı daha kompakt */
    --okey-side-w: clamp(120px, 18vw, 240px);
    --okey-top-h: clamp(44px, 10vh, 68px);
    --okey-stage-pad: 6px;
    --okey-center-min-h: 90px;

    grid-template-rows: var(--okey-top-h) minmax(var(--okey-center-min-h), 1fr) auto;
    row-gap: 6px;
    column-gap: 8px;
  }

  /* Alt ıstaka: biraz yukarı al + badge aksiyonlar yer kaplamasın */
  body.page-game--immersive.game-okey .okey-seat--bottom{
    top: -10px;
  }
  body.page-game--immersive.game-okey .okey-seat--bottom.okey-seat--me .seat-badge{
    display:none;
  }
  body.page-game--immersive.game-okey .okey-actionsbox{
    position:absolute;
    top: 4px;
    right: 4px;
    margin:0;
    padding:6px 8px;
    gap:6px;
    z-index: 5;
  }
  body.page-game--immersive.game-okey .okey-actionsbox .button.tiny{
    padding:6px 8px;
    font-size:12px;
    border-radius:12px;
  }

  /* Orta alan: pile/discard biraz küçülsün */
  body.page-game--immersive.game-okey .okey-pile3d,
  body.page-game--immersive.game-okey .okey-discard3d{
    width:110px;
    height:110px;
    border-radius:18px;
  }
  body.page-game--immersive.game-okey .okey-discard3d{
    width:120px;
    height:120px;
  }

  body.page-game--immersive.game-okey .game-hud-bottom{
    bottom: clamp(110px, 14vh, 160px);
  }
}


body.page-game--immersive.game-okey .okey-seat{
  position:relative;
  top:auto; left:auto; right:auto; bottom:auto;
  transform:none !important;
  width:100%;
  max-width: var(--okey-side-w);
}

body.page-game--immersive.game-okey .okey-seat--top{
  grid-row:1;
  grid-column:2;
  justify-self:center;
  align-self:start;
  width:auto;
  max-width: min(560px, calc(100% - 12px));
}

body.page-game--immersive.game-okey .okey-seat--left{
  grid-row:2;
  grid-column:1;
  justify-self:start;
  align-self:center;
}

body.page-game--immersive.game-okey .okey-seat--right{
  grid-row:2;
  grid-column:3;
  justify-self:end;
  align-self:center;
}

body.page-game--immersive.game-okey .okey-seat--bottom{
  grid-row:3;
  grid-column:1 / span 3;
  justify-self:center;
  align-self:end;
  /* v0.3.41 — 2 kat ıstaka görselinin doğal genişliğine daha yakın */
  width:min(1560px, 100%);
  max-width:none;
}

/* v0.3.76 — Masaüstü: ıstaka sayfa dışına taşımasın diye komple alanı biraz yukarı al */
@media (min-width: 1001px){
  body.page-game--immersive.game-okey .okey-seat--bottom{
    top: -18px;
  }
}
@media (min-width: 1001px) and (max-height: 820px){
  body.page-game--immersive.game-okey .okey-seat--bottom{
    top: -28px;
  }
}

body.page-game--immersive.game-okey .okey-seat--icon{
  display:flex;
  align-items:center;
  justify-content:center;
}
body.page-game--immersive.game-okey .okey-seat--icon.okey-seat--left{justify-content:flex-start;}
body.page-game--immersive.game-okey .okey-seat--icon.okey-seat--right{justify-content:flex-end;}

body.page-game--immersive.game-okey .okey-seat--me .seat-badge{
  margin: 0 auto 10px;
  width: fit-content;
}

body.page-game--immersive.game-okey .okey-center{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  grid-row:2;
  grid-column:2;
  z-index:2;
}

body.page-game--immersive.game-okey .okey-discard3d{
  margin-left: 8px;
}

/* v0.3.28 — Okey: bildirimler (hata/uyarı) sahnenin üst-orta bölgesinde */
body.page-game--immersive.game-okey .okey-noticewrap{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:min(900px, calc(100% - 24px));
  z-index:70;
}
body.page-game--immersive.game-okey .okey-noticewrap .alert{margin:0}

body.page-game--immersive.game-okey .okey-hud{
  position:absolute;
  top:12px;
  left:12px;
  right:auto;
  width:auto;
  margin:0;
  padding:0;
  z-index:6;
}
body.page-game--immersive.game-okey .okey-hudpanel{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
  max-width:min(420px, calc(100vw - 24px));
  background: rgba(0,0,0,.36);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:0 22px 52px rgba(0,0,0,.28);
}
body.page-game--immersive.game-okey .okey-hudpanel .badge--hud{
  width:100%;
  justify-content:space-between;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}
body.page-game--immersive.game-okey .okey-hudpanel .badge--hud b{color:rgba(255,255,255,.98)}
body.page-game--immersive.game-okey .okey-hudpanel .badge--status{background: rgba(255,255,255,.12)}
body.page-game--immersive.game-okey .game-hud-bottom{
  position:absolute;
  left:12px;
  right:12px;
  /* ıstaka alanına çakışmaması için yukarı al */
  bottom: clamp(190px, 18vh, 270px);
  width:auto;
  margin:0;
  padding:0;
  z-index:6;
}

/* v0.3.37 — Okey: mobil yerleşim (dar ekranda sahne daha okunur) */
@media (max-width: 820px){
  body.page-game--immersive.game-okey .okey-felt{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    --okey-side-w: auto;
    --okey-top-h: auto;
    padding:10px;
    column-gap:10px;
    row-gap:10px;
  }
  body.page-game--immersive.game-okey .okey-seat{max-width:none;}
  body.page-game--immersive.game-okey .okey-seat--top{grid-row:1; grid-column:1 / span 2;}
  body.page-game--immersive.game-okey .okey-seat--left{grid-row:2; grid-column:1; justify-self:start; align-self:start;}
  body.page-game--immersive.game-okey .okey-seat--right{grid-row:2; grid-column:2; justify-self:end; align-self:start;}
  body.page-game--immersive.game-okey .okey-center{grid-row:3; grid-column:1 / span 2; justify-self:center;}
  body.page-game--immersive.game-okey .okey-seat--bottom{grid-row:4; grid-column:1 / span 2;}

  body.page-game--immersive.game-okey .okey-pile3d,
  body.page-game--immersive.game-okey .okey-discard3d{
    width:110px;
    height:110px;
    border-radius:20px;
  }
  body.page-game--immersive.game-okey .okey-pile-stack{width:64px; height:80px;}
  body.page-game--immersive.game-okey .tile-back.tile-back--pile{width:54px; height:78px; border-radius:16px;}
}

/* v0.3.42 — Masaüstünde ıstaka daha geniş: taşlar büyüsün (chat açıkken de) */
body.page-game--immersive.game-okey .okey-seat--bottom.okey-seat--me{
  width:min(1900px, calc(100% - 24px));
}

body.page-game--immersive.game-okey .okey-rack3d{
  /* v0.3.32 — Kullanıcı ıstaka görselini bozmadan göster (stretch kaldırıldı) */
  background: var(--img-okey-istaka) center bottom/contain no-repeat;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.40));
}

body.page-game--immersive.game-okey .okey-rack.okey-rack--double{
  background:transparent;
  border:none;
}

.okey-table3d{
  width:min(1500px, 100%);
  margin:0 auto;
  padding:18px 16px 22px;
  position:relative;
}

.okey-felt{
  position:relative;
  border-radius:28px;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
  background:
    radial-gradient(900px 520px at 50% 40%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(900px 720px at 50% 110%, rgba(0,0,0,.12), transparent 65%),
    linear-gradient(180deg, #d9c5a9 0%, #c7ab89 55%, #b8956e 100%);
  overflow:hidden;
  min-height:520px;
}

.okey-seat{
  position:absolute;
  z-index:3;
  /* Not: min() içinde calc kullanılmalı (aksi halde bazı tarayıcılarda width geçersiz olur) */
  width:min(520px, calc(100% - 24px));
}
.okey-seat--top{top:12px; left:50%; transform:translateX(-50%)}
.okey-seat--bottom{bottom:12px; left:50%; transform:translateX(-50%)}
.okey-seat--left{left:12px; top:50%; transform:translateY(-50%) rotate(-90deg)}
.okey-seat--right{right:12px; top:50%; transform:translateY(-50%) rotate(90deg)}

/* v0.3.24 — Rakip simgeleri (ıstaka yok) */
.okey-seat--icon{width:auto;}
.okey-seat--icon.okey-seat--left{transform:translateY(-50%);}
.okey-seat--icon.okey-seat--right{transform:translateY(-50%);}
.okey-seat--icon.okey-seat--top{transform:translateX(-50%);}
.okey-opp{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  color:rgba(255,255,255,.92);
  max-width:320px;
}
.okey-opp.is-empty{opacity:.62}
.okey-opp.is-turn{box-shadow:0 0 0 5px rgba(34,197,94,.22), 0 18px 40px rgba(0,0,0,.25)}
.okey-opp__pic{
  width:38px;
  height:38px;
  border-radius:50%;
  background-image: var(--img-okey-rakip);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  border:1px solid rgba(255,255,255,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.okey-opp__initials{font-weight:400; font-size:13px; letter-spacing:.02em; color:white; text-shadow:0 10px 20px rgba(0,0,0,.35);}
.okey-opp__text{min-width:0}
.okey-opp__name{font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px}
.okey-opp__meta{font-size:12px; opacity:.92}

.seat-badge{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.16);
  color:white;
  max-width:520px;
}

.seat-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-weight:400;
  font-size:13px;
  border:1px solid rgba(255,255,255,.35);
}
.seat-text{min-width:0}
.seat-name{font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px}
.seat-mini{font-size:12px; opacity:.9}
.seat-turn{box-shadow:0 0 0 4px rgba(34,197,94,.22)}

.rack-wrap{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

/* v0.3.28 — Okey aksiyon kutusu: ıstakanın üstünde sağda, çakışma yok */
.okey-actionsbox{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  align-self:flex-end;
  padding:9px 10px;
  border-radius:14px;
  background: rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.94);
  box-shadow:0 16px 38px rgba(0,0,0,.22);
  margin:0 0 6px;
}
.okey-actionsbox .smalltxt{font-size:11px; color:rgba(255,255,255,.86)}
.okey-actionsbox .button.tiny{padding:7px 9px; font-size:12px; border-radius:12px}

/* v0.3.81 — Okey aksiyon butonları: modern ikon + oran (Bitirdim + sessiz mod) */
.okey-actionbtn{ border-radius:999px !important; letter-spacing:.01em; }
.okey-actionbtn__ico{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.okey-actionbtn__ico svg{ width:18px; height:18px; display:block; }
.okey-actionbtn__label{ display:inline-block; }
.okey-actionbtn--mute{ min-width:42px; padding-left:10px; padding-right:10px; }
.okey-actionbtn--win{ min-width:120px; }
.okey-actionsbox .okey-actionbtn:disabled{ opacity:.45; cursor:not-allowed; filter:saturate(.75); }
.okey-actionbtn--mute[aria-pressed="true"]{ background:rgba(220,38,38,.22) !important; border-color:rgba(220,38,38,.35) !important; color:rgba(255,255,255,.92) !important; }
body.page-game--immersive .okey-actionbtn--mute[aria-pressed="false"]{ background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.18) !important; color:rgba(255,255,255,.92) !important; }
@media (max-width:1100px){
  body.page-game--immersive.game-okey .okey-actionbtn--mute .okey-actionbtn__label{ display:none; }
  body.page-game--immersive.game-okey .okey-actionbtn--win{ min-width:0; }
}

.seat-hands{
  position:absolute;
  left:50%;
  top:-10px;
  transform:translateX(-50%);
  width:200px;
  height:44px;
  pointer-events:none;
}
.seat-hands::before,
.seat-hands::after{
  content:"";
  position:absolute;
  top:0;
  width:92px;
  height:44px;
  background:
    radial-gradient(55px 30px at 60% 40%, rgba(255,238,216,.95), rgba(207,152,110,.88));
  border-radius: 30px 30px 22px 22px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
  opacity:.92;
}
.seat-hands::before{left:0; transform:rotate(-6deg)}
.seat-hands::after{right:0; transform:rotate(6deg)}

.okey-rack3d{
  position:relative;
  margin-top:18px;
  /* Ahşap ıstaka görseli ile taşların 2 sıra rahat dizilebilmesi için */
  padding:38px 46px 34px;
  border-radius:24px;
  background:transparent;
  border:none;
  backdrop-filter:none;
}

.okey-rack3d::before{display:none}

.okey-rack3d .okey-rack{
  border:none;
  background:transparent;
  padding:0;
}

/* v0.3.40 — Okey: slot tabanlı ıstaka (masaüstü büyük / mobil küçük) */
.okey-rack.okey-rack--double{
  /* JS render sırasında --okey-cols inline set edilir (fallback 14) */
  --okey-cols: 14;
  --okey-slot-gap: clamp(2px, 0.5vw, 6px);
  /* v0.3.46 — Taşlar "minicik" kalmasın: desktop alt sınırı yükseltildi.
     Not: Mobilde media query ile tekrar düşürülüyor. */
  --okey-tile-w-min: 44px;
  /* v0.3.46 — Çok büyük ekranlarda bile 2 kat satır çakışmasını önlemek için üst sınır yumuşatıldı */
  --okey-tile-w-max: 130px;
  /* Kullanıcı taş görselleri (400×449) oranı ~1.12 */
  --okey-tile-h-ratio: 1.12;
    /* v0.3.66 — Masaüstü taş ebat ayarı (JS okur) */
  --okey-tile-w-scale: 1;
/* fallback (row içinde override edilir) */
  --okey-tile-w: var(--okey-tile-w-max);
  --okey-tile-h: calc(var(--okey-tile-w) * var(--okey-tile-h-ratio));

  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  /* v0.3.45 — Masaüstünde taşlar küçük kalmasın: rack genişliği üst sınırı arttırıldı */
  max-width:1900px;
  margin:0 auto;
  padding:8px 10px;
}

.okey-rack-row{
  /* satır genişliğine göre tile boyutu */
  --okey-tile-w: var(--okey-tile-w-explicit, clamp(
    var(--okey-tile-w-min),
    /* v0.3.46 — CSS calc: uzunluk * sayı sırası doğru olmalı (aksi halde ifade geçersiz olup min'e düşer) */
    calc((100% - (var(--okey-slot-gap) * (var(--okey-cols) - 1))) / var(--okey-cols)),
    var(--okey-tile-w-max)
  ));
  --okey-tile-h: calc(var(--okey-tile-w) * var(--okey-tile-h-ratio));
  display:grid;
  grid-template-columns: repeat(var(--okey-cols), var(--okey-tile-w));
  gap: var(--okey-slot-gap);
  justify-content:center;
  align-items:end;
}

.okey-slot{
  width: var(--okey-tile-w);
  height: var(--okey-tile-h);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  position:relative;
  border-radius:12px;
}

.okey-slot::before{
  content:'';
  position:absolute;
  inset:2px;
  border-radius:12px;
  background: rgba(0,0,0,.10);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55);
  opacity:0;
  transition: opacity 120ms ease, box-shadow 120ms ease;
  pointer-events:none;
}

.okey-rack.is-dragging .okey-slot::before{
  opacity:.18;
}

/* v0.3.39 — Drag sırasında hedef slot (hover) geri bildirimi */
.okey-slot.is-hover::before{
  /* v0.3.57 — Hover'ı daha belirgin yap (özellikle geniş ekranlarda) */
  opacity:.36;
  box-shadow: inset 0 0 0 2px rgba(6,182,212,.28), inset 0 1px 3px rgba(0,0,0,.65);
}

.okey-slot.is-hole::before{
  opacity:.32;
  box-shadow: inset 0 0 0 2px rgba(6,182,212,.28), inset 0 1px 3px rgba(0,0,0,.65);
}

@keyframes okeySlotPulse{
  0%,100%{opacity:.32}
  50%{opacity:.50}
}
.okey-rack.is-dragging .okey-slot.is-hole::before{
  animation: okeySlotPulse .9s ease-in-out infinite;
}

@media (max-width: 640px){
  .okey-rack.okey-rack--double{
    /* v0.3.40 — Mobilde taşlar daha küçük, overflow/clipping yapmasın */
    --okey-tile-w-min: 28px;
    --okey-tile-w-max: 64px;
    --okey-slot-gap: 4px;
    padding:6px 6px;
  }
  .okey-tile .num{font-size:18px}
}

@media (min-width: 1001px){
  /* v0.3.75 — Masaüstü taş oranı: yüksekliği +%40 (kullanıcı isteği)
     Not: Gerçek px yüksekliği JS sizer tarafından ıstaka "safe" alanına göre sınırlandırılabilir. */
  body.page-game--immersive.game-okey .okey-rack.okey-rack--double{
    /* Genişlik ölçeği (JS okur) — büyütme perRow azaltımı ile sağlanır */
    --okey-tile-w-scale: 0.95; /* v0.3.76 — Desktop: tüm taşları %5 küçült */
    /* v0.3.72'de kısaltılmış oran (0.896) üzerinden +%40: 0.896 * 1.40 = 1.2544 */
    --okey-tile-h-ratio: 1.2544;
    /* Büyük ekranlarda üst sınırı büyüt (JS + CSS clamp bunu kullanır) */
    --okey-tile-w-max: 220px;
    /* Desktop alt sınırı biraz yükselt (çok küçük kalmasın) */
    --okey-tile-w-min: 56px;
  }
}

@media (max-width: 1000px) and (orientation: portrait){
  /* v0.3.75 — Mobil (dikey): taş yüksekliği +%50 */
  body.page-game--immersive.game-okey .okey-rack.okey-rack--double{
    /* Taş görsel oranı ~1.12 → +%50: 1.12 * 1.50 = 1.68 */
    --okey-tile-h-ratio: 1.68;
  }
}


.tile-back{
  width:16px;
  height:26px;
  border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.25));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

.okey-center{
  position:absolute;
  z-index:2;
  left:54%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  gap:14px;
  align-items:center;
}

.okey-pile3d, .okey-discard3d{
  /* v0.3.71 — Taş ebatı büyüyünce merkez objeler de orantılı büyüsün (min değerler korunur) */
  width:max(140px, calc(var(--okey-tile-w, 80px) * 1.65));
  height:max(140px, calc(var(--okey-tile-h, 110px) * 1.15));
  border-radius:22px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.okey-pile3d.clickable{cursor:pointer}
.okey-pile3d.clickable:hover{background:rgba(0,0,0,.34)}

.okey-discard3d.clickable{cursor:pointer}
.okey-discard3d.clickable:hover{background:rgba(0,0,0,.34)}

.okey-discard3d{
  width:max(160px, calc(var(--okey-tile-w, 80px) * 1.85));
  height:max(160px, calc(var(--okey-tile-h, 110px) * 1.25));
  transition: box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}

/* v0.3.39 — Drag sırasında discard alanı "drop target" vurgusu */
.okey-discard3d.is-drop-target{
  box-shadow:0 0 0 4px rgba(6,182,212,.18), 0 18px 40px rgba(0,0,0,.25);
  border-color: rgba(6,182,212,.26);
}
.okey-discard3d.dragover{box-shadow:0 0 0 6px rgba(6,182,212,.26), 0 18px 40px rgba(0,0,0,.25)}

/* v0.3.57 — Drag sırasında discard hedefi daha rahat görülmeli */
@keyframes okeyDropPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(6,182,212,.18), 0 18px 40px rgba(0,0,0,.25); }
  50%{ box-shadow:0 0 0 7px rgba(6,182,212,.24), 0 18px 40px rgba(0,0,0,.25); }
}
.game-app.is-dragging .okey-discard3d.is-drop-target{
  animation: okeyDropPulse 1.1s ease-in-out infinite;
}

.okey-hud{
  width:min(1500px, 100%);
  margin:0 auto;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.okey-hud__left, .okey-hud__right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.okey-hud .badge{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); color:white}
.okey-hud .smalltxt{color:rgba(255,255,255,.85)}

.okey-actions.compact .button{padding:9px 12px; font-size:13px}

.game-hud-bottom{
  width:min(1500px, 100%);
  margin:0 auto;
  padding:14px 16px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.game-hud-bottom .alert{margin:0}

/* ==========================================================
   TAVLA — daha gerçekçi tahta + zar animasyonu
   ========================================================== */

.tavla-scene{
  width:100%;
  min-height: calc(100vh - 170px);
  padding:14px 0 24px;
  background:
    radial-gradient(1200px 600px at 50% 30%, rgba(245,158,11,.10), transparent 60%),
    radial-gradient(900px 600px at 20% 10%, rgba(6,182,212,.10), transparent 55%),
    radial-gradient(900px 600px at 80% 0%, rgba(124,58,237,.10), transparent 55%),
    linear-gradient(180deg, #2a1b09 0%, #1f1407 60%, #0f0a04 100%);
}

.tavla-table3d{
  width:min(1500px, 100%);
  margin:0 auto;
  padding:18px 16px 22px;
}

.tavla-seat-row{
  display:flex;
  justify-content:center;
  padding:10px 0;
}
.tavla-seat-row--top{padding-top:0}
.tavla-seat-row--bottom{padding-bottom:0}

.tavla-board3d{
  position:relative;
  border-radius:24px;
  padding:16px;
  background:
    linear-gradient(90deg, rgba(92,58,32,.95), rgba(55,33,18,.95));
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
}


/* Dokunmatik: tavlada sürükleme/tıklama çakışmasını azalt */
.tavla-board3d, .tavla-point, .tavla-bar, .offbox{
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}

.tavla-felt{
  border-radius:18px;
  padding:12px;
  background:
    radial-gradient(900px 500px at 50% 45%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(30,41,59,.65), rgba(15,23,42,.72));
  border:1px solid rgba(255,255,255,.10);
}

.tavla-grid{
  display:grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap:8px;
}

.tavla-point{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)}
.tavla-point .pnum{color:rgba(255,255,255,.72)}

.tavla-point::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:72px solid rgba(245,158,11,.22);
  opacity:.95;
}
.tavla-row.bottom .tavla-point::after{
  top:auto;
  bottom:10px;
  border-top:none;
  border-bottom:72px solid rgba(6,182,212,.18);
}
.tavla-row.top .tavla-point::after{top:10px}

.tavla-bar{background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12); color:white}

.die{position:relative; background:rgba(255,255,255,.92)}
.die.rolling{animation: dieShake .55s linear infinite}

@keyframes dieShake{
  0%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-2px) rotate(-2deg)}
  50%{transform:translateY(0) rotate(2deg)}
  75%{transform:translateY(2px) rotate(-1deg)}
  100%{transform:translateY(0) rotate(0)}
}

.tavla-hud{
  width:min(1500px, 100%);
  margin:0 auto;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.tavla-hud .badge{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); color:white}


/* ==========================================================
   v0.3.6 — UI Düzeltmeleri
   - Okey ıstaka: tam genişlik + scroll yok
   - Tavla: gerçekçi bölünmüş tahta + BAR ortada
   - Oyun bilgisi: üstten altta mini bar
   ========================================================== */

/* Okey: masa genişliğini artır ve ıstakayı scroll'suz yap */
.okey-table3d,
.okey-hud,
.game-hud-bottom,
.tavla-table3d,
.tavla-hud{
  width:min(1700px, 100%);
}

.okey-seat{
  width:min(1100px, calc(100% - 24px));
}
.okey-seat--left,
.okey-seat--right{
  width:min(520px, calc(100% - 24px));
}

.okey-rack{
  flex-wrap:wrap;
  overflow:hidden;
  justify-content:center;
}

/* Oyun alt bilgi barı */
.game-bottombar{
  width:min(1200px, calc(100% - 32px));
  margin:14px auto 0;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.game-bottombar__info{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:13px;
}
.game-bottombar__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.gmeta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(124,58,237,.08);
  border:1px solid rgba(124,58,237,.18);
  font-size:12px;
  font-weight:400;
}

.button.tiny{
  padding:7px 9px;
  font-size:13px;
  border-radius:12px;
}

/* Tavla: BAR ortada (6 + BAR + 6) */
.tavla-board-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) 110px repeat(6, minmax(0, 1fr));
  gap:10px;
  align-items:stretch;
}

.tavla-board-grid .tavla-bar{
  grid-column:7;
  grid-row:1 / span 2;
  min-height:360px;
  padding:10px 8px;
  justify-content:space-between;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.14);
  color:white;
}

.tavla-board-grid .tavla-bar .bar-title{
  font-size:12px;
  letter-spacing:.14em;
  opacity:.85;
}

.tavla-point{
  min-height:170px;
}

.tavla-point.is-bottom{
  flex-direction:column-reverse;
}

.tavla-point.is-bottom .pnum{
  top:auto;
  bottom:6px;
}

.tavla-point.is-bottom::after{
  top:auto;
  bottom:10px;
  border-top:none;
  border-bottom:72px solid rgba(6,182,212,.18);
}

/* Zar animasyonunun layout'u etkilemesini azalt */
.die{will-change: transform;}
.tavla-board-grid .tavla-bar .bar-side{display:flex; flex-direction:column; align-items:center; gap:6px;}
.tavla-board-grid .tavla-bar b{font-size:12px; opacity:.9;}

/* ==========================================================
   v0.3.19 — WebP Oyun Asset Seti (Okey/Tavla)
   - Taş/ıstaka/tahta/zar/pul gibi objeler WebP görsellerle gerçekçi hale getirildi.
   - Not: Görsel yoksa eski gradient stiller fallback olarak kalır.
   ========================================================== */

:root{
  --img-okey-masa: url('gorseller/okey_masa.webp');
  /* v0.3.32 — cache bust + kullanıcı asset seti */
  --img-okey-istaka: url('gorseller/okey_istaka_2kat.webp?v=064');
  --img-okey-istaka-solbas: url('gorseller/okey_istaka_parca_solbas.webp?v=001');
  --img-okey-istaka-sagbas: url('gorseller/okey_istaka_parca_sagbas.webp?v=001');
  --img-okey-istaka-orta-ust: url('gorseller/okey_istaka_parca_orta_ust.webp?v=001');
  --img-okey-istaka-orta-bar: url('gorseller/okey_istaka_parca_orta_bar.webp?v=001');
  --img-okey-istaka-orta-alt: url('gorseller/okey_istaka_parca_orta_alt.webp?v=001');
  --img-okey-istaka-orta-zemin: url('gorseller/okey_istaka_parca_orta_zemin.webp?v=001');
  --img-okey-istaka-svg: url('gorseller/okey_istaka_2kat.svg');
  --img-okey-arka: url('gorseller/okey_tas_arka.webp?v=032');
  --img-okey-deste: url('gorseller/okey_destesi.webp');
  --img-okey-kirmizi: url('gorseller/okey_tas_kirmizi.webp?v=032');
  --img-okey-mavi: url('gorseller/okey_tas_mavi.webp?v=032');
  --img-okey-sari: url('gorseller/okey_tas_sari.webp?v=032');
  --img-okey-siyah: url('gorseller/okey_tas_siyah.webp?v=032');
  /* v0.3.37 — Joker güncellendi (cache bust) */
  --img-okey-joker: url('gorseller/okey_tas_joker.webp?v=037');
  --img-okey-bg-real: url('gorseller/okey_bg_real.webp');
  --img-okey-rakip: url('gorseller/okey_rakip.webp');
  --img-okey-rakip-svg: url('gorseller/okey_rakip.svg');

  --img-tavla-cerceve: url('gorseller/tavla_cerceve.webp');
  --img-tavla-felt: url('gorseller/tavla_felt.webp');
  --img-tavla-tri-acik: url('gorseller/tavla_ucgen_acik.webp');
  --img-tavla-tri-koyu: url('gorseller/tavla_ucgen_koyu.webp');
  --img-tavla-pul-w: url('gorseller/tavla_pul_beyaz.webp');
  --img-tavla-pul-b: url('gorseller/tavla_pul_siyah.webp');
  --img-tavla-bar: url('gorseller/tavla_bar.webp');

  --img-zar-1: url('gorseller/zar_1.webp');
  --img-zar-2: url('gorseller/zar_2.webp');
  --img-zar-3: url('gorseller/zar_3.webp');
  --img-zar-4: url('gorseller/zar_4.webp');
  --img-zar-5: url('gorseller/zar_5.webp');
  --img-zar-6: url('gorseller/zar_6.webp');

  /* v0.3.20 — Ana sayfa görselleri */
  --img-home-hero: url('gorseller/anasayfa_hero.webp');

  /* v0.3.97 — Okey ıstaka parça grid oranları (default set) */
  --okey-istaka-grid-cols: 278fr 1501fr 269fr;
  --okey-istaka-grid-rows: 316fr 83fr 284fr 175fr;
  --okey-istaka-aspect: 2048 / 629;
}

/* -------- OKEY: masa + ıstaka + taşlar -------- */

.okey-felt{
  background:
    var(--img-okey-masa) center/cover no-repeat,
    radial-gradient(900px 520px at 50% 38%, rgba(255,255,255,.16), transparent 62%),
    radial-gradient(900px 700px at 20% 30%, rgba(0,0,0,.06), transparent 64%);
}

.okey-rack3d{
  /* v0.3.33 — Kullanıcı ıstaka görseli (foto) + satır hizalama */
  position:relative;
  margin: 10px auto 0;
  width: 100%;
  /* v0.3.45 — Okey ıstaka görseli 1536px: masaüstünde biraz daha büyük render edilsin */
  max-width: 1900px;

  /* Görseli bozmadan göster (desktop) */
  background: var(--img-okey-istaka) center bottom/contain no-repeat;
  border:none;
  background-color: transparent;

  /* Foto ıstaka oranı (2048×629) */
  aspect-ratio: var(--okey-istaka-aspect, 2048 / 629);

  /* İçerik artık absolute yerleşiyor (padding yok) */
  padding: 0;
  display:block;
  overflow: hidden;
}
.okey-rack3d::before{display:none}

/* v0.3.33 — İstaka içi taş satırı koordinatları (desktop) */
body.page-game--immersive.game-okey .okey-rack3d{
  /* v0.3.41 — Masaüstünde taşlara biraz daha geniş alan */
  /* v0.3.43 — Taşlar küçük kalmasın: yatay inset biraz azaltıldı */
  /* v0.3.48 — Yatay inset arttı: taşlar görsel sınırlar içinde kalır */
  --rack-inset-x: 9.5%; /* v0.3.64 — Yeni 2 kat ıstaka: yan kolonları taşmaması için */
  /* v0.3.37 — 2 kat satır arası boşluk + görsele hizalama */
  --rack-row-top: 37%; /* v0.3.66 — top raf alt çizgi (taşlar %30 yukarı) */
  /* v0.3.43 — Büyük taşlarda alt sıranın taşları taşmaması için biraz yukarı alındı */
  --rack-row-bottom: 58%; /* v0.3.66 — alt raf üst çizgi (taşlar %30 yukarı) */
  --rack-safe-top: 13%;
  --rack-safe-bottom: 8%;
}

/* Dar ekranda: iki satır taş sığsın diye yükseklik serbest + görseli esnet */
@media (max-width: 1000px){
  body.page-game--immersive.game-okey .okey-rack3d{
    aspect-ratio: auto;
    min-height: 260px;
    background-size: 100% 100%;
    --rack-inset-x: 9.0%;
    --rack-row-top: 37%; /* v0.3.66 — top raf alt çizgi (taşlar %30 yukarı) */
    --rack-row-bottom: 58%; /* v0.3.66 — alt raf üst çizgi (taşlar %30 yukarı) */
    --rack-safe-top: 14%;
    --rack-safe-bottom: 10%;
  }
}

/* v0.3.80 — Mobil yatay (düşük yükseklik): ıstaka kaybolmasın, sayfaya sığsın */
@media (max-width: 1100px) and (max-height: 520px) and (orientation: landscape){
  body.page-game--immersive.game-okey .okey-rack3d{
    /* Foto oranı yerine esnek yükseklik: oyun sahnesi taşmasın */
    aspect-ratio: auto;
    background-size: 100% 100%;
    margin-top: 0;
    min-height: clamp(150px, 44vh, 180px);
  }
}


/* v0.3.75 — Masaüstü: taş yüksekliği arttığı için ıstaka içi dikey "safe" kısıtı gevşetildi */
@media (min-width: 1001px){
  body.page-game--immersive.game-okey .okey-rack3d{
    /* v0.3.76 — Desktop: sağ/sol taşmayı bitirmek için yatay yerleşim alanını daralt */
    --rack-inset-x: 13.5%; /* v0.3.76 — Desktop: yerleşim alanını sağ/sol %5 daralt */
    /* v0.3.75 — Kullanıcı isteği: masaüstünde taş yüksekliği büyüsün (JS max-height hesabına izin ver) */
    --rack-safe-top: 10%;
    --rack-safe-bottom: 4%;
  }
}

@media (min-width: 1600px){
  body.page-game--immersive.game-okey .okey-rack3d{
    /* Çok geniş ekranda daha da ferah */
    --rack-inset-x: 13.0%; /* v0.3.76 — Desktop: yerleşim alanını sağ/sol %5 daralt */
    --rack-safe-top: 10%;
    --rack-safe-bottom: 4%;
  }
}

/* Istaka içinde taşlar: görsel satırlarına otursun (absolute) */
body.page-game--immersive.game-okey .okey-rack3d .okey-rack.okey-rack--double{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  padding:0;
  margin:0;
  display:block;
}

/* Satırlar: üst desenli + alt düz satır */
body.page-game--immersive.game-okey .okey-rack3d .okey-rack-row{
  position:absolute;
  /* v0.3.75 — Yatay taşmayı bitirmek için dinamik ekstra inset (JS: --rack-inset-extra = 0.5 * tileW) */
  left: calc(var(--rack-inset-x) + var(--rack-inset-extra, 0px));
  right: calc(var(--rack-inset-x) + var(--rack-inset-extra, 0px));
  width:auto;
}
body.page-game--immersive.game-okey .okey-rack3d .okey-rack-row--top{ top: calc(var(--rack-row-top) - var(--okey-tile-h)); }
body.page-game--immersive.game-okey .okey-rack3d .okey-rack-row--bottom{ top: var(--rack-row-bottom); }

/* v0.3.76 — Masaüstü: alt sıra taşlar aşağı taşıyorsa, satırı %40 (tile yüksekliği bazında) yukarı al */
@media (min-width: 1001px){
  body.page-game--immersive.game-okey .okey-rack3d .okey-rack-row--bottom{
    transform: translateY(calc(var(--okey-tile-h) * -0.20));
  }
}


/* v0.3.77 — Mobil (dikey): ıstaka çok uzun görünmesin + iki sıra aralığı/konum kalibrasyonu */
@media (max-width: 1000px) and (orientation: portrait){
  body.page-game--immersive.game-okey .okey-rack3d{
    /* v0.3.77 — Önceki min-height: 260px → %40 azalt (0.60) */
    min-height: 156px;

    /* v0.3.77 — Dikey yerleşim: satırlar sıkılaşsın, taşlar yine okunur kalsın */
    --rack-row-top: 35%;
    --rack-row-bottom: 51.25%;
    --rack-safe-top: 10%;
    --rack-safe-bottom: 4%;
  }

  /* Üst satır: taş yüksekliği kadar aşağı */
  body.page-game--immersive.game-okey .okey-rack3d .okey-rack-row--top{
    /* v0.3.83 — Mobil: üst satırı 1 taş yüksekliği kadar yukarı al */
    top: calc(var(--rack-row-top) - var(--okey-tile-h));
  }

  /* Alt satır: taş yüksekliğinin %50'si kadar aşağı */
  body.page-game--immersive.game-okey .okey-rack3d .okey-rack-row--bottom{
    /* v0.3.83 — Mobil: alt satırı yukarı al + satırlar arası 0.5 taş boşluk */
    top: calc(var(--rack-row-top) + (var(--okey-tile-h) * 0.50));
  }
}


/* taşlar (WebP taban) */
.okey-tile{
  background: transparent;
  background-repeat:no-repeat;
  background-position:center;
  background-size: 100% 100%;
  border:none;
  box-shadow:0 14px 26px rgba(0,0,0,.18);
}
.okey-tile{display:block;}
.okey-tile .num{
  position:absolute;
  left:50%;
  /* v0.3.37 — Numara: üst alana yakın + tile boyuna göre ölçeklenir */
  top: clamp(6px, calc(var(--okey-tile-h) * 0.14), 16px);
  transform:translateX(-50%);
  font-size: clamp(16px, calc(var(--okey-tile-w) * 0.47), 46px);
  font-weight:400;
  line-height:1;
  letter-spacing:-0.02em;
  pointer-events:none;
  text-shadow: 0 2px 0 rgba(255,255,255,.85), 0 12px 26px rgba(0,0,0,.30);
}
.okey-tile.c-R .num{color:#b91c1c;}
.okey-tile.c-B .num{color:#1d4ed8;}
.okey-tile.c-Y .num{color:#b45309;}
.okey-tile.c-K .num{color:#111827;}
.okey-tile.c-J .num{
  color:#7c3aed;
  /* Joker: "J" harfi görselin ortasına yakın ama biraz daha aşağıda */
  top: calc(var(--okey-tile-h) * 0.58);
  transform: translate(-50%, -50%);
  font-size: clamp(18px, calc(var(--okey-tile-w) * 0.54), 52px);
}
.okey-tile .mini{ display:none; }

.okey-tile.c-R{ background-image: var(--img-okey-kirmizi); }
.okey-tile.c-B{ background-image: var(--img-okey-mavi); }
.okey-tile.c-Y{ background-image: var(--img-okey-sari); }
.okey-tile.c-K{ background-image: var(--img-okey-siyah); }
.okey-tile.c-J{ background-image: var(--img-okey-joker); }

.okey-tile.selected{ box-shadow:0 0 0 4px rgba(6,182,212,.22), 0 18px 30px rgba(0,0,0,.22); }
.okey-tile.drag-over{ box-shadow:0 0 0 4px rgba(124,58,237,.22), 0 18px 30px rgba(0,0,0,.22); }
.okey-tile.wild{ outline:4px solid rgba(245,158,11,.22); }

/* Not: mobil ölçek artık clamp ile otomatik ayarlanıyor */

/* kapalı taş / deste */
.tile-back{
  width:18px;
  height:28px;
  border-radius:7px;
  border:none;
  background: var(--img-okey-arka) center/100% 100% no-repeat;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}

/* v0.3.32 — Okey: merkez destede üst üste taş arka yüz görünümü */
.okey-pile-stack{
  position:relative;
  width:78px;
  height:98px;
}

.tile-back.tile-back--pile{
  position:absolute;
  left:0;
  top:0;
  pointer-events:none;
  width:64px;
  height:92px;
  border-radius:18px;
  background: var(--img-okey-arka) center/cover no-repeat;
  transform: translate(calc(var(--i, 0) * 3px), calc(var(--i, 0) * -2px));
  box-shadow:0 14px 24px rgba(0,0,0,.24);
}

.okey-pile-meta{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:rgba(255,255,255,.92);
  font-size:12px;
}
.okey-pile-title{ font-weight:400; letter-spacing:.02em; }
.okey-pile-count{
  font-weight:400;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.18);
}

/* v0.3.55 — Okey: discard sayacı + UI lock */
#game-app.okey-ui-locked .okey-pile3d,
#game-app.okey-ui-locked .okey-discard3d,
#game-app.okey-ui-locked .okey-rack3d{
  pointer-events:none;
  opacity:.86;
}

.okey-discard3d{ position:relative; }
.okey-discard-meta{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:rgba(255,255,255,.92);
  font-size:12px;
  pointer-events:none;
}
.okey-discard-title{ font-weight:400; letter-spacing:.02em; }
.okey-discard-count{
  font-weight:400;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.18);
}


.okey-pile3d{
  /* v0.3.32 — Deste: taş arka yüz (stack) render edildiği için arka plan sade */
  background: rgba(0,0,0,.20);
  flex-direction:column;
  gap:10px;
  padding:12px;
  justify-content:center;
}

/* -------- TAVLA: tahta + pul + zar -------- */

.tavla-board3d{
  background:
    var(--img-tavla-cerceve) center/cover no-repeat,
    linear-gradient(90deg, rgba(92,58,32,.95), rgba(55,33,18,.95));
}

.tavla-felt{
  background:
    var(--img-tavla-felt) center/cover no-repeat,
    radial-gradient(900px 500px at 50% 45%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(30,41,59,.65), rgba(15,23,42,.72));
}

/* Üçgenler: point cell içine WebP */
.tavla-point{ position:relative; overflow:hidden; }
.tavla-point::after{
  content:"";
  position:absolute;
  left:50%;
  top:10px;
  transform:translateX(-50%);
  width:34px;
  height:150px;
  background: var(--img-tavla-tri-acik) center/contain no-repeat;
  border:none;
  opacity:1;
  pointer-events:none;
}
.tavla-point.tri-b::after{ background-image: var(--img-tavla-tri-koyu); }
.tavla-point.is-bottom::after{
  top:auto;
  bottom:10px;
  transform:translateX(-50%) rotate(180deg);
}

/* BAR */
.tavla-board-grid .tavla-bar{
  background:
    var(--img-tavla-bar) center/cover no-repeat,
    rgba(0,0,0,.25);
}

/* Pullar */
.checker{
  width:28px;
  height:28px;
  border:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size: 100% 100%;
}
.checker.W{ background-image: var(--img-tavla-pul-w); }
.checker.B{ background-image: var(--img-tavla-pul-b); }

/* Zarlar */
.die{
  border:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size: 100% 100%;
  color:transparent; /* metin fallback; görsel varsa gizle */
  text-shadow:none;
}
.die[data-val="1"]{ background-image: var(--img-zar-1); }
.die[data-val="2"]{ background-image: var(--img-zar-2); }
.die[data-val="3"]{ background-image: var(--img-zar-3); }
.die[data-val="4"]{ background-image: var(--img-zar-4); }
.die[data-val="5"]{ background-image: var(--img-zar-5); }
.die[data-val="6"]{ background-image: var(--img-zar-6); }


/* Zar: henüz atılmadıysa '?' metnini göster */
.die[data-val="0"]{
  background-image:none;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.92);
}

/* ==========================================================
   v0.3.20 — Ana Sayfa (Profesyonel görünüm + oyun arama)
   - Sistem bilgileri / kurulum linkleri ana sayfadan kaldırıldı.
   - Hero + arama + öne çıkan oyunlar.
   ========================================================== */

.page-home main.container--fluid{ padding:0; }

.home-hero{
  position:relative;
  overflow:hidden;
  padding:34px 0 18px;
}

.home-hero__bg{
  position:absolute;
  inset:0;
  background:
    var(--img-home-hero) center/cover no-repeat,
    radial-gradient(900px 520px at 18% 28%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(900px 520px at 86% 18%, rgba(6,182,212,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12));
  filter:saturate(1.05);
  transform:scale(1.02);
}

.home-hero__inner{
  position:relative;
  width:min(1100px, 100% - 32px);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}

@media (min-width: 980px){
  .home-hero__inner{ grid-template-columns: 1.1fr .9fr; align-items:stretch; }
}

.home-hero__copy{
  padding:18px 0;
}

.home-hero__title{
  font-size:38px;
  line-height:1.1;
  margin:10px 0 10px;
}

.home-hero__desc{
  color:rgba(15,23,42,.85);
  font-weight:400;
  line-height:1.6;
  max-width: 58ch;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.65);
  padding:12px;
  border-radius:18px;
}

.home-search{
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.66);
}

.home-search__label{ display:block; font-weight:400; margin-bottom:8px; }
.home-search__row{ display:flex; gap:10px; flex-wrap:wrap; }
.home-search__input{ flex: 1 1 260px; }

.home-hero__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

.home-hello{
  margin-top:12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(6,182,212,.10);
}

.home-hero__cards{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

.home-card{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:12px;
  align-items:stretch;
  border-radius:20px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.82);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.home-card:hover{ text-decoration:none; filter:brightness(.99); }

.home-card__img{
  min-height:110px;
  background:center/cover no-repeat;
}

.home-card__body{ padding:12px 12px 12px 0; }
.home-card__title{ font-weight:400; }
.home-card__desc{ color:var(--muted); font-size:14px; line-height:1.45; margin-top:4px; }
.home-card__note{ margin-top:8px; font-size:12px; font-weight:400; color:#7f1d1d; }

.home-wrap{
  width:min(1100px, 100% - 32px);
  margin:0 auto;
  padding:14px 0 40px;
}

.home-section{ margin-top:14px; }

.home-results{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

@media (min-width: 900px){
  .home-results{ grid-template-columns: 1fr 1fr; }
}

.home-result{
  display:grid;
  grid-template-columns: 88px 1fr;
  gap:12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:#fff;
  overflow:hidden;
}
.home-result:hover{ text-decoration:none; filter:brightness(.99); }

.home-result__img{
  background:center/cover no-repeat;
  min-height:88px;
}
.home-result__img--game{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  background: rgba(124,58,237,.08);
}

.home-result__body{ padding:10px 10px 10px 0; }
.home-result__title{ font-weight:400; }
.home-result__desc{ color:var(--muted); font-size:14px; margin-top:4px; }
.home-result__meta{ color:var(--muted); font-size:12px; margin-top:6px; font-weight:400; }

.home-featured{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
@media (min-width: 900px){
  .home-featured{ grid-template-columns: 1fr 1fr; }
}

.home-feature{
  border-radius:18px;
  border:1px solid var(--border);
  background:#fff;
  padding:12px;
}
.home-feature:hover{ text-decoration:none; filter:brightness(.99); }
.home-feature__title{ font-weight:400; }
.home-feature__desc{ color:var(--muted); font-size:14px; margin-top:4px; line-height:1.45; }
.home-feature__meta{ color:var(--muted); font-size:12px; margin-top:8px; font-weight:400; }

.home-agechips{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0 0; }

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  font-weight:400;
  font-size:13px;
  box-shadow:0 8px 16px rgba(2,6,23,.06);
}
.chip:hover{ text-decoration:none; filter:brightness(.98); }
.chip.is-active{ background:var(--primary); color:#fff; border-color:rgba(255,255,255,.18); }
.chip.is-active .muted{ color:rgba(255,255,255,.85); }


/* ==========================================================
   v0.3.33 — OKEY: Kazanan overlay + havai fişekler efekti
   ========================================================== */

.okey-win-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(0,0,0,.46);
  backdrop-filter: blur(2px);
}
.okey-win-card{
  position:relative;
  width:min(520px, 92vw);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.52);
  color: rgba(255,255,255,.96);
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  padding:18px 18px 16px;
  text-align:center;
}
.okey-win-card h2{
  margin:0;
  font-size:26px;
  letter-spacing:-0.02em;
}
.okey-win-card p{margin:8px 0 0}
.okey-win-card .muted{opacity:.86}


.okey-win-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:400;
  letter-spacing:.02em;
  margin:0 auto 10px;
  width:fit-content;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
}
.okey-win-badge.is-me{
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.28);
}

.okey-win-tiles{
  --okey-tile-w:46px;
  --okey-tile-h:64px;
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}
.okey-win-tiles .okey-tile{
  pointer-events:none;
  cursor:default;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}

.okey-win-actions{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

@media (max-width:480px){
  .okey-win-card{ padding:16px 14px 14px; }
  .okey-win-card h2{ font-size:22px; }
  .okey-win-tiles{
    --okey-tile-w:38px;
    --okey-tile-h:52px;
    padding:10px;
    gap:5px;
  }
}

.okey-winfx{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.okey-winfx .fx-burst{
  position:absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width:10px;
  height:10px;
  transform: translate(-50%,-50%);
  color: hsl(var(--h, 210) 90% 60%);
  opacity:0;
}
.okey-winfx .fx-burst::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  box-shadow:
    0 -26px 0 currentColor,
    18px -18px 0 currentColor,
    26px 0 0 currentColor,
    18px 18px 0 currentColor,
    0 26px 0 currentColor,
    -18px 18px 0 currentColor,
    -26px 0 0 currentColor,
    -18px -18px 0 currentColor,
    10px -22px 0 rgba(255,255,255,.9),
    -10px 22px 0 rgba(255,255,255,.85);
  transform: scale(.2);
  opacity:0;
  animation: okeyFirework 1.25s ease-out var(--d, 0s) infinite;
}
@keyframes okeyFirework{
  0%{ transform: scale(.15); opacity:0; }
  10%{ opacity:1; }
  55%{ transform: scale(1); opacity:1; }
  100%{ transform: scale(1.12); opacity:0; }
}



/* ==========================================================
   v0.3.33 — Chat paneli: oyun HUD alanı (Sohbet ile birlikte sürüklenir)
   ========================================================== */
.chat-extra-panels{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.14);
}
body.page-game--immersive .chat-extra-panels{
  border-top-color: rgba(255,255,255,.14);
}
body.page-game--immersive .chat-extra-panels .okey-hudpanel{
  max-width:100%;
  width:100%;
}
body.page-game--immersive .chat-extra-panels .badge--hud{
  font-size:13px;
}



/* ==========================================================
   v0.3.86 — Oda Sonlandırma Oylaması Paneli
   ========================================================== */
.room-endvote-panel{
  position:fixed;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 24px);
  max-width:560px;
  z-index:9999;
  pointer-events:none;
}

/* v0.3.92 — Panel sohbet içindeyken fixed değil, normal akışta görünsün */
.chat-room-controls .room-endvote-panel{
  position:static;
  top:auto;
  left:auto;
  right:auto;
  transform:none;
  width:100%;
  max-width:none;
  z-index:auto;
  pointer-events:auto;
}

/* Popup modunda (sohbet yok): panel üst-orta yerine köşeye kayarak rakibi kapatmasın */
body.is-popup .room-endvote-panel{
  left:12px;
  right:auto;
  transform:none;
  max-width:420px;
}
.room-endvote-card{
  pointer-events:auto;
  border-radius:16px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(15,23,42,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  color:#fff;
}
.room-endvote-card--idle{
  padding:10px 12px;
  background:rgba(2,6,23,.55);
}
.room-endvote-title{
  font-size:14px;
  font-weight:400;
  letter-spacing:.2px;
}
.room-endvote-text{
  margin-top:6px;
  font-size:14px;
}
.room-endvote-meta{
  margin-top:6px;
  font-size:13px;
  opacity:.92;
}
.room-endvote-meta.muted{
  opacity:.78;
}
.room-endvote-list{
  margin-top:6px;
  font-size:13px;
  opacity:.92;
}
.room-endvote-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* v0.3.87 — Çoklu kart (replacement + oylama) ve yönetici devretme UI */
.room-endvote-card + .room-endvote-card{ margin-top:10px; }
.room-endvote-card--replace{
  background:rgba(17,24,39,.78);
  border-color:rgba(255,255,255,.18);
}
.room-endvote-delegate{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.room-endvote-label{
  font-size:13px;
  opacity:.92;
}
.room-endvote-panel .input.input--compact{
  padding:8px 10px;
  border-radius:12px;
  font-size:14px;
}
.room-endvote-panel select.input{
  max-width:260px;
}

@media (max-width: 520px){
  .room-endvote-panel{ top:10px; width:calc(100% - 18px); }
  .room-endvote-card{ padding:10px 12px; }
  .room-endvote-actions{ gap:6px; }
}



/* v0.3.95 — Okey: Istaka parça sistemi (grid) + taş satırlarını dilimlere kilitle */
body.page-game--immersive.game-okey .okey-rack3d{
  background: transparent !important;
  aspect-ratio: var(--okey-istaka-aspect, 2048 / 629);
  overflow: visible;
}

/* Istaka parça art (arka katman) */
body.page-game--immersive.game-okey .okey-rack3d .okey-rack-art{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: var(--okey-istaka-grid-cols, 278fr 1501fr 269fr);
  grid-template-rows: var(--okey-istaka-grid-rows, 316fr 83fr 284fr 175fr);
  z-index:1;
  pointer-events:none;
}

body.page-game--immersive.game-okey .okey-rack3d .okey-rack-art > div{
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}

body.page-game--immersive.game-okey .okey-rack3d .okey-rack-art__sol{
  grid-column:1;
  grid-row:1 / 5;
  background-image: var(--img-okey-istaka-solbas);
}

body.page-game--immersive.game-okey .okey-rack3d .okey-rack-art__sag{
  grid-column:3;
  grid-row:1 / 5;
  background-image: var(--img-okey-istaka-sagbas);
}

body.page-game--immersive.game-okey .okey-rack3d .okey-rack-art__orta-ust{
  grid-column:2;
  grid-row:1;
  background-image: var(--img-okey-istaka-orta-ust);
}

body.page-game--immersive.game-okey .okey-rack3d .okey-rack-art__orta-bar{
  grid-column:2;
  grid-row:2;
  background-image: var(--img-okey-istaka-orta-bar);
}

body.page-game--immersive.game-okey .okey-rack3d .okey-rack-art__orta-alt{
  grid-column:2;
  grid-row:3;
  background-image: var(--img-okey-istaka-orta-alt);
}

body.page-game--immersive.game-okey .okey-rack3d .okey-rack-art__orta-zemin{
  grid-column:2;
  grid-row:4;
  background-image: var(--img-okey-istaka-orta-zemin);
}

/* Taş katmanı: art ile aynı grid; satırlar otomatik oturur */
body.page-game--immersive.game-okey .okey-rack3d .okey-rack.okey-rack--double{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: var(--okey-istaka-grid-cols, 278fr 1501fr 269fr);
  grid-template-rows: var(--okey-istaka-grid-rows, 316fr 83fr 284fr 175fr);
  z-index:2;
  background:transparent;
  border:none;
  padding:0;
  margin:0;
  --okey-slot-gap: 0px;
}

/* Satırlar artık absolute değil: grid hücrelerine oturur */
body.page-game--immersive.game-okey .okey-rack3d .okey-rack-row{
  position:relative;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
  width:100%;
  grid-column:2;
  justify-self:stretch;
  align-self:end;
  padding:0;
  overflow:visible;
}

body.page-game--immersive.game-okey .okey-rack3d .okey-rack-row--top{ grid-row:1; }
body.page-game--immersive.game-okey .okey-rack3d .okey-rack-row--bottom{ grid-row:3; }


/* v0.3.96 — Admin: Okey ıstaka önizleme (okey-rack3d--preview) */
.okey-rack3d--preview{
  position:relative;
  width:100%;
  aspect-ratio: var(--okey-istaka-aspect, 2048 / 629);
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  overflow:hidden;
}

/* Admin önizleme: istaka parça art */
.okey-rack3d--preview .okey-rack-art{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: var(--okey-istaka-grid-cols, 278fr 1501fr 269fr);
  grid-template-rows: var(--okey-istaka-grid-rows, 316fr 83fr 284fr 175fr);
  z-index:1;
  pointer-events:none;
}

.okey-rack3d--preview .okey-rack-art > div{
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}

.okey-rack3d--preview .okey-rack-art__sol{
  grid-column:1;
  grid-row:1 / 5;
  background-image: var(--img-okey-istaka-solbas);
}

.okey-rack3d--preview .okey-rack-art__sag{
  grid-column:3;
  grid-row:1 / 5;
  background-image: var(--img-okey-istaka-sagbas);
}

.okey-rack3d--preview .okey-rack-art__orta-ust{
  grid-column:2;
  grid-row:1;
  background-image: var(--img-okey-istaka-orta-ust);
}

.okey-rack3d--preview .okey-rack-art__orta-bar{
  grid-column:2;
  grid-row:2;
  background-image: var(--img-okey-istaka-orta-bar);
}

.okey-rack3d--preview .okey-rack-art__orta-alt{
  grid-column:2;
  grid-row:3;
  background-image: var(--img-okey-istaka-orta-alt);
}

.okey-rack3d--preview .okey-rack-art__orta-zemin{
  grid-column:2;
  grid-row:4;
  background-image: var(--img-okey-istaka-orta-zemin);
}

/* Admin önizleme: taş katmanı grid */
.okey-rack3d--preview .okey-rack.okey-rack--double{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: var(--okey-istaka-grid-cols, 278fr 1501fr 269fr);
  grid-template-rows: var(--okey-istaka-grid-rows, 316fr 83fr 284fr 175fr);
  z-index:2;
  background:transparent;
  border:none;
  padding:0;
  margin:0;
  --okey-slot-gap: 0px;
}

.okey-rack3d--preview .okey-rack-row{
  position:relative;
  width:100%;
  grid-column:2;
  justify-self:stretch;
  align-self:end;
  padding:0;
  overflow:visible;
}

.okey-rack3d--preview .okey-rack-row--top{ grid-row:1; }
.okey-rack3d--preview .okey-rack-row--bottom{ grid-row:3; }