/* ============================================================
   TAVLA — Premium ahşap tema (PlayOK / Backgammon Galaxy stili)
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --wood-dark:#2b1a0e;
  --wood-mid:#5b3a1e;
  --wood-light:#8a5a30;
  --felt-dark:#3a2412;
  --gold:#d4a657;
  --gold-2:#f0cd8a;
  --gold-deep:#a9802f;
  --pt-cream:#d9b483;     /* açık üçgen */
  --pt-cream-2:#c79a64;
  --pt-brown:#6b3f22;     /* koyu üçgen */
  --pt-brown-2:#4e2c16;
  --panel:#1c130c;
  --panel-2:#241810;
  --line:#3d2a1a;
  --txt:#f0e3cf;
  --txt-dim:#b59b7a;
  --white-c1:#fdfbf5;
  --white-c2:#cfc6b3;
  --black-c1:#4a4a4a;
  --black-c2:#0c0c0c;
}

html,body{height:100%}
body{
  font-family:"Inter",system-ui,sans-serif;
  color:var(--txt);
  /* Derin ahşap arka plan */
  background:
    radial-gradient(ellipse at 50% 0%, #3a2615 0%, #1a0f07 70%),
    #140c06;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:"Cinzel",serif}

/* Genel düğmeler */
.gold-btn{
  background:linear-gradient(180deg,var(--gold-2),var(--gold) 45%,var(--gold-deep));
  color:#3a2403;border:1px solid #f5dca0;border-radius:12px;
  padding:13px 18px;font-weight:700;font-size:1rem;cursor:pointer;
  box-shadow:0 4px 0 #7a5a1e,0 8px 16px rgba(0,0,0,.45),inset 0 1px 2px rgba(255,255,255,.6);
  transition:transform .07s,box-shadow .15s;font-family:inherit;
}
.gold-btn:hover{filter:brightness(1.04)}
.gold-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #7a5a1e,0 4px 8px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.6)}
.gold-btn:disabled{filter:grayscale(.6) brightness(.7);cursor:not-allowed;box-shadow:0 3px 0 #4a3a1e}
.wood-btn{
  background:linear-gradient(180deg,#6e4622,#4a2c14);
  color:var(--gold-2);border:1px solid #7a4f28;border-radius:12px;
  padding:13px 18px;font-weight:600;cursor:pointer;font-family:inherit;
  box-shadow:0 3px 0 #2e1a0c,0 6px 12px rgba(0,0,0,.4);transition:transform .07s;
}
.wood-btn:active{transform:translateY(2px)}
.full{width:100%;display:block;margin:8px 0}

/* ===================== SHELL / GRID ===================== */
#shell{height:100vh;height:100dvh;display:flex;flex-direction:column;padding:10px;gap:10px}

.topbar,.bottombar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:14px;padding:8px 14px;
  box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
}

.brand{display:flex;flex-direction:column;align-items:center;line-height:1}
.brand h1{font-size:1.5rem;letter-spacing:1px;color:var(--gold-2);
  text-shadow:0 1px 0 #000,0 0 12px rgba(212,166,87,.3)}
.brand .brand-logo{font-size:1.2rem;margin-bottom:2px}
.brand.big{flex-direction:row;gap:10px;justify-content:center;margin-bottom:6px}
.brand.big h1{font-size:2rem}
.conn{font-size:.7rem;color:#9ad29a;background:#1d3a1d;border:1px solid #2f5a2f;
  padding:1px 10px;border-radius:999px;margin-top:3px}
.conn.off{color:#e6a0a0;background:#3a1d1d;border-color:#5a2f2f}

/* Oyuncu chip */
.player-chip{display:flex;align-items:center;gap:10px;min-width:200px}
.player-chip .avatar{
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:1.2rem;
  background:radial-gradient(circle at 35% 30%,#6e4622,#3a2210);border:1px solid var(--gold-deep);
}
.player-chip .pinfo{display:flex;flex-direction:column;gap:2px}
.player-chip .pname{font-weight:700;color:var(--gold-2)}
.player-chip .pseat{font-size:.78rem;color:var(--txt-dim);display:flex;align-items:center;gap:5px}
.player-chip .elo{margin-left:auto;font-size:.85rem;color:var(--gold-2);font-weight:600}
.opp .elo{margin-left:0}

.dot{width:11px;height:11px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.4)}
.dot.white{background:radial-gradient(circle at 35% 30%,#fff,#cdbfa6)}
.dot.black{background:radial-gradient(circle at 35% 30%,#666,#111)}

.top-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:linear-gradient(180deg,#2a1c10,#1a1008);color:var(--gold-2);cursor:pointer;font-size:1rem}
.icon-btn:hover{border-color:var(--gold-deep)}
.leave-btn,.resign-btn{
  background:linear-gradient(180deg,#3a2210,#241408);color:var(--gold-2);
  border:1px solid var(--gold-deep);border-radius:10px;padding:9px 14px;cursor:pointer;font-weight:600;font-family:inherit}
.leave-btn:hover,.resign-btn:hover{filter:brightness(1.1)}

/* ===================== LAYOUT ===================== */
.layout{flex:1;display:grid;grid-template-columns:230px 1fr 230px;gap:10px;min-height:0}

.side{display:flex;flex-direction:column;gap:10px;min-height:0}
.card{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:14px;padding:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
}
.card h3{font-size:1rem;color:var(--gold-2);text-align:center;margin-bottom:12px;
  letter-spacing:.5px;border-bottom:1px solid var(--line);padding-bottom:8px}
.kv,.score-row{display:flex;justify-content:space-between;padding:6px 2px;font-size:.9rem}
.kv span,.score-row span{color:var(--txt-dim)}
.kv b{color:var(--txt)}
.score-row b{color:var(--gold-2);font-size:1.05rem}

.chat-card{margin-top:auto}
.chat-input{display:flex;gap:6px}
.chat-input input{flex:1;background:#140c06;border:1px solid var(--line);border-radius:10px;
  padding:9px;color:var(--txt);font-family:inherit}
.send-btn{background:var(--gold-deep);border:0;border-radius:10px;width:38px;color:#1a1008;cursor:pointer}

.dice-card{text-align:center}
.turn-note{margin-top:10px;font-size:.85rem;color:var(--gold-2)}
.history-card{flex:1;min-height:0}
.history{height:100%;overflow:auto;font-size:.85rem;color:var(--txt-dim);font-family:monospace;line-height:1.6}
.muted{opacity:.5}

/* ===================== BOARD ===================== */
.board-stage{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}
.board-frame{
  /* Ahşap dış çerçeve */
  width:100%;height:100%;max-height:100%;
  aspect-ratio:14/9;max-width:100%;
  padding:clamp(10px,1.6vw,22px);
  border-radius:16px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 3px,transparent 3px 7px),
    linear-gradient(180deg,#7a4e28,#4a2c14 60%,#3a2010);
  box-shadow:
    0 18px 40px rgba(0,0,0,.6),
    inset 0 2px 4px rgba(255,220,160,.25),
    inset 0 -3px 8px rgba(0,0,0,.5);
  border:1px solid #2a1708;
  position:relative;
  display:flex;
}
/* altın iç pervaz */
.board-frame::before{
  content:"";position:absolute;inset:clamp(6px,1vw,14px);border-radius:10px;
  border:2px solid transparent;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-deep)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:.55;
}

.board{
  flex:1;
  display:grid;
  grid-template-columns:repeat(6,1fr) clamp(26px,3vw,44px) repeat(6,1fr);
  grid-template-rows:1fr clamp(24px,3vh,40px) 1fr;
  gap:0;
  border-radius:8px;
  /* keçe / iç ahşap zemin */
  background:
    radial-gradient(ellipse at 50% 50%,#5a3a1e 0%,#3a2412 80%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6),inset 0 0 0 2px #2a1708;
  overflow:hidden;
  position:relative;
}

/* Orta menteşe çizgisi */
.board::after{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.5),transparent);
  pointer-events:none;
}

/* Üçgen nokta */
.point{position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.point.top{grid-row:1;justify-content:flex-start}
.point.bottom{grid-row:3;justify-content:flex-end}

.point .tri{position:absolute;left:50%;transform:translateX(-50%);width:88%;height:100%}
.point.top .tri{
  top:0;
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.point.bottom .tri{
  bottom:0;
  clip-path:polygon(50% 0,0 100%,100% 100%);
}
/* iki ton üçgen + ince ışık */
.point .tri.cream{background:linear-gradient(180deg,var(--pt-cream),var(--pt-cream-2));}
.point .tri.brown{background:linear-gradient(180deg,var(--pt-brown),var(--pt-brown-2));}
.point .tri::after{content:"";position:absolute;inset:0;clip-path:inherit;
  box-shadow:inset 0 0 6px rgba(0,0,0,.35);}

/* seçim/hedef vurgusu */
.point.selectable::before,.point.target::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:88%;height:100%;z-index:1;pointer-events:none;border-radius:4px;
}
.point.selectable::before{box-shadow:inset 0 0 0 2px var(--gold-2),0 0 12px rgba(240,205,138,.5)}
.point.target.top::before,.point.target.bottom::before{
  background:radial-gradient(circle at 50% var(--ty,15%),rgba(120,230,120,.55),transparent 60%);
}

/* Pul (3D) */
.checker{
  --sz:clamp(20px,2.4vw,40px);
  width:var(--sz);height:var(--sz);border-radius:50%;z-index:3;
  margin:1px 0;position:relative;
}
.point.top .checker{margin-top:2px}
.point.bottom .checker{margin-bottom:2px}
.checker.white{
  background:
    radial-gradient(circle at 34% 28%,#ffffff 0%,#f3ecdb 30%,#cbbfa3 70%,#9a8d6e 100%);
  box-shadow:
    0 3px 5px rgba(0,0,0,.5),
    inset 0 -3px 5px rgba(120,100,60,.5),
    inset 0 3px 4px rgba(255,255,255,.9);
  border:1px solid rgba(120,100,60,.4);
}
.checker.black{
  background:
    radial-gradient(circle at 34% 28%,#7a7a7a 0%,#3a3a3a 35%,#161616 75%,#000 100%);
  box-shadow:
    0 3px 5px rgba(0,0,0,.6),
    inset 0 -3px 5px rgba(0,0,0,.7),
    inset 0 3px 4px rgba(255,255,255,.3);
  border:1px solid rgba(0,0,0,.6);
}
/* pul üstü parlak çentik halkası */
.checker::after{content:"";position:absolute;inset:22%;border-radius:50%;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.5),inset 0 -1px 2px rgba(0,0,0,.35)}
.checker.lift{animation:lift .25s ease}
@keyframes lift{from{transform:translateY(-6px) scale(1.08)}to{transform:none}}

/* Uçan (kayan) pul — taşıma animasyonu */
.checker.flying{
  position:fixed;z-index:80;pointer-events:none;
  --sz:clamp(20px,2.4vw,40px);width:var(--sz);height:var(--sz);
  transition:left .4s cubic-bezier(.4,.8,.3,1),top .4s cubic-bezier(.4,.8,.3,1),transform .4s ease;
  transform:scale(1.18);
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.6));
}
.checker.flying.go{transform:scale(1.05)}

.count-badge{position:absolute;z-index:5;font-size:.62rem;font-weight:700;color:#1a1008;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));border-radius:8px;padding:0 5px;
  border:1px solid #f5dca0;top:50%;left:50%;transform:translate(-50%,-50%)}

/* Orta BAR */
.bar-mid{grid-row:1/4;grid-column:7;position:relative;
  background:linear-gradient(90deg,#3a2210,#5a3a1e,#3a2210);
  box-shadow:inset 4px 0 8px rgba(0,0,0,.5),inset -4px 0 8px rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.bar-mid .bar-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);
  font-family:"Cinzel",serif;font-size:.7rem;letter-spacing:3px;color:var(--gold-2);opacity:.5}
.bar-mid .stack{position:absolute;display:flex;flex-direction:column;gap:2px}
.bar-mid .stack.top{top:6%}
.bar-mid .stack.bottom{bottom:6%}
.bar-mid.selectable{box-shadow:inset 0 0 0 2px var(--gold-2)}

/* menteşeler */
.hinge{position:absolute;left:50%;transform:translateX(-50%);width:clamp(10px,1.2vw,16px);
  height:clamp(20px,3vh,34px);border-radius:3px;z-index:6;
  background:linear-gradient(90deg,#caa24e,#8a6a2e,#caa24e);
  box-shadow:0 1px 3px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.5)}
.hinge.h1{top:8%}.hinge.h2{bottom:8%}

/* ===================== ZAR ===================== */
.dice-tray{display:flex;justify-content:center;gap:14px;margin:6px 0 14px}
.die{
  --d:clamp(40px,4vw,58px);
  width:var(--d);height:var(--d);border-radius:14px;position:relative;
  background:linear-gradient(150deg,#fff,#e7e0cf);
  box-shadow:0 4px 8px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.9),inset 0 -3px 5px rgba(120,100,60,.4);
  border:1px solid #d8cdb0;
}
.die .pip{position:absolute;width:18%;height:18%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#555,#0a0a0a);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3)}
.die.rolling{animation:roll .6s ease}
@keyframes roll{
  0%{transform:rotate(0) scale(1)}
  25%{transform:rotate(160deg) scale(1.12)}
  50%{transform:rotate(300deg) scale(.95)}
  75%{transform:rotate(420deg) scale(1.08)}
  100%{transform:rotate(360deg) scale(1)}
}
.die.used{opacity:.4;filter:grayscale(.5)}
.die.dbl{box-shadow:0 0 0 2px var(--gold-2),0 4px 8px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.9)}

/* pip konumları */
.pip.p-c{top:41%;left:41%}
.pip.p-tl{top:18%;left:18%}.pip.p-tr{top:18%;right:18%}
.pip.p-bl{bottom:18%;left:18%}.pip.p-br{bottom:18%;right:18%}
.pip.p-ml{top:41%;left:18%}.pip.p-mr{top:41%;right:18%}

/* ===================== ALT BAR ===================== */
.trays{display:flex;gap:14px;flex:1;justify-content:center}
.tray{background:linear-gradient(180deg,#241810,#1a1008);border:1px solid var(--line);
  border-radius:999px;padding:9px 18px;font-size:.9rem;color:var(--txt-dim);display:flex;align-items:center;gap:8px}
.tray b{color:var(--gold-2)}

/* ===================== MODAL ===================== */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(40,24,12,.85),rgba(8,4,2,.95));backdrop-filter:blur(6px)}
.modal.hidden{display:none}
.modal-card{
  background:linear-gradient(180deg,#2a1c10,#191009);border:1px solid var(--gold-deep);
  border-radius:18px;padding:34px;width:min(92vw,420px);text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
}
.modal-card .sub{color:var(--txt-dim);margin:10px 0 18px}
.divider{display:flex;align-items:center;gap:10px;color:var(--txt-dim);margin:16px 0;font-size:.8rem}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.join-row{display:flex;gap:8px}
.join-row input{flex:1;background:#140c06;border:1px solid var(--line);border-radius:12px;padding:13px;color:var(--txt);font-family:inherit;text-align:center;letter-spacing:1px}
.room-code{font-family:"Cinzel",serif;font-size:2rem;letter-spacing:5px;color:var(--gold-2);
  background:#140c06;border:1px dashed var(--gold-deep);border-radius:12px;padding:14px;margin:14px 0}
.result-emoji{font-size:3.4rem;margin-bottom:8px}
.spinner{width:46px;height:46px;border:4px solid var(--line);border-top-color:var(--gold-2);
  border-radius:50%;margin:0 auto 16px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toast */
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:60;
  background:linear-gradient(180deg,#3a2210,#241408);border:1px solid var(--gold-deep);
  color:var(--gold-2);padding:10px 20px;border-radius:999px;font-weight:600;
  box-shadow:0 8px 20px rgba(0,0,0,.5);transition:opacity .3s}
.toast.hidden{opacity:0;pointer-events:none}

/* ===================== RESPONSIVE ===================== */
@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .side{flex-direction:row;flex-wrap:wrap}
  .left-side{order:3}
  .right-side{order:2}
  .board-stage{order:1}
  .card{flex:1;min-width:140px}
  .chat-card{display:none}
  .history-card{display:none}
  .board-frame{aspect-ratio:13/9}
}
@media (max-width:640px){
  #shell{padding:6px;gap:6px}
  .topbar,.bottombar{flex-wrap:wrap;padding:6px 10px;gap:8px}
  .player-chip{min-width:0;flex:1}
  .brand h1{font-size:1.1rem}
  .trays{order:5;width:100%}
  .side{flex-direction:column}
  .right-side{flex-direction:row}
  .dice-card{flex:1}
  .board-frame{aspect-ratio:10/12;padding:8px}
  .board{grid-template-columns:repeat(6,1fr) clamp(18px,5vw,30px) repeat(6,1fr)}
  .leave-btn span,.resign-btn{font-size:.8rem}
  .elo{display:none}
}


/* ============================================================
   LOBİ / ANA SAYFA — casino-lobi tarzı
   ============================================================ */
.lobby{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}
.lobby.hidden{display:none}

/* Bulanık premium masa arka planı */
.lobby-bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 22% 30%, rgba(212,166,87,.10), transparent 40%),
    radial-gradient(circle at 78% 65%, rgba(120,70,30,.18), transparent 45%),
    radial-gradient(ellipse at 50% 120%, #5a3a1e 0%, #1a0f07 60%),
    linear-gradient(180deg,#140c06,#0c0a08);
}
.lobby-bg::after{content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(115deg,rgba(255,210,140,.03) 0 2px,transparent 2px 9px),
    radial-gradient(circle at 50% 40%, rgba(255,200,120,.06), transparent 55%);
  filter:blur(2px);opacity:.8}

.lobby-top,.lobby-body,.lobby-foot{position:relative;z-index:2}

/* Üst menü */
.lobby-top{display:flex;align-items:center;gap:18px;padding:12px 20px;
  background:linear-gradient(180deg,rgba(26,16,9,.92),rgba(16,10,6,.75));
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:1.3rem;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-deep));color:#2a1a04;
  box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 1px 2px rgba(255,255,255,.5)}
.logo-txt{display:flex;flex-direction:column;line-height:1.15}
.logo-txt strong{font-family:"Cinzel",serif;color:var(--gold-2);letter-spacing:1px;font-size:1.05rem}
.logo-txt span{font-size:.68rem;color:var(--txt-dim)}

.lobby-nav{display:flex;gap:6px;margin:0 auto}
.nav-item{background:transparent;border:1px solid transparent;color:var(--txt-dim);
  padding:9px 15px;border-radius:10px;cursor:pointer;font-family:inherit;font-weight:600;font-size:.9rem;transition:.15s}
.nav-item:hover{color:var(--gold-2)}
.nav-item.active{color:#2a1a04;background:linear-gradient(180deg,var(--gold-2),var(--gold-deep));
  box-shadow:0 3px 8px rgba(0,0,0,.4)}

.user-box{display:flex;align-items:center;gap:10px}
.user-av{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:1.1rem;
  background:radial-gradient(circle at 35% 30%,#6e4622,#3a2210);border:1px solid var(--gold-deep)}
.user-meta{display:flex;flex-direction:column;line-height:1.2}
.user-meta strong{font-size:.85rem;color:var(--txt)}
.user-meta .lvl{font-size:.7rem;color:var(--gold-2)}
.coins{display:flex;align-items:center;gap:6px;background:#140c06;border:1px solid var(--gold-deep);
  border-radius:999px;padding:6px 12px;color:var(--gold-2);font-weight:700;font-size:.9rem}
.coin-add{width:20px;height:20px;border-radius:50%;border:0;background:var(--gold);color:#2a1a04;
  cursor:pointer;font-weight:800;line-height:1}

/* Gövde grid */
.lobby-body{flex:1;display:grid;grid-template-columns:1fr 320px;gap:18px;padding:18px 20px;overflow:auto;min-height:0}
.lobby-main{min-width:0}
.welcome h1{font-family:"Cinzel",serif;font-size:1.7rem;color:var(--gold-2)}
.welcome p{color:var(--txt-dim);margin-top:4px}

.section-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 14px}
.section-head.sub{margin-top:30px;justify-content:center}
.section-head .deco{font-family:"Cinzel",serif;color:var(--gold-2);letter-spacing:2px}
.ghost-pill{background:linear-gradient(180deg,#2a1c10,#1a1008);border:1px solid var(--line);
  color:var(--gold-2);border-radius:10px;padding:8px 14px;cursor:pointer;font-family:inherit;font-weight:600;font-size:.85rem}
.ghost-pill:hover{border-color:var(--gold-deep)}
.ghost-pill.sm{padding:6px 14px;font-size:.8rem;width:100%}

/* Oyun kartları */
.games-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.game-card{position:relative;background:linear-gradient(180deg,#241810,#160e07);
  border:1px solid var(--line);border-radius:16px;padding:14px;text-align:center;cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s;display:flex;flex-direction:column;align-items:center;gap:8px}
.game-card:hover{transform:translateY(-4px);border-color:var(--gold-deep);
  box-shadow:0 12px 26px rgba(0,0,0,.5)}
.game-card.featured{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-deep),0 10px 26px rgba(0,0,0,.5)}
.game-card h3{font-family:"Cinzel",serif;font-size:1.1rem;color:var(--txt)}
.game-card .gc-sub{font-size:.78rem;color:var(--txt-dim)}
.gc-art{width:100%;aspect-ratio:4/3;border-radius:12px;border:1px solid rgba(0,0,0,.4);
  box-shadow:inset 0 0 24px rgba(0,0,0,.5);position:relative;overflow:hidden;background:#160e07}
.gc-art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
.game-card:hover .gc-art img{transform:scale(1.06)}
.gc-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,220,150,.08),transparent 40%,rgba(0,0,0,.25))}

.play-pill{margin-top:auto;width:100%;background:linear-gradient(180deg,var(--gold-2),var(--gold) 50%,var(--gold-deep));
  color:#2a1a04;border:1px solid #f5dca0;border-radius:10px;padding:9px;font-weight:700;cursor:pointer;font-family:inherit;
  box-shadow:0 3px 0 #7a5a1e,inset 0 1px 2px rgba(255,255,255,.6)}
.play-pill:active{transform:translateY(2px);box-shadow:0 1px 0 #7a5a1e}
.play-pill.soon{background:linear-gradient(180deg,#4a3420,#2e2012);color:var(--gold-2);
  border-color:#5a4028;box-shadow:none}

/* Önerilen odalar */
.rooms-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.room-card{background:linear-gradient(180deg,#1f140a,#160e07);border:1px solid var(--line);
  border-radius:14px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.room-card strong{font-size:.92rem;color:var(--txt)}
.room-card span{font-size:.76rem;color:var(--txt-dim)}
.rc-table{width:72px;height:48px;display:grid;place-items:center;overflow:hidden}
.rc-table img{width:100%;height:100%;object-fit:contain;display:block}

/* Sağ kolon */
.lobby-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.r-card{background:linear-gradient(180deg,rgba(36,24,16,.95),rgba(20,12,7,.92));
  border:1px solid var(--line);border-radius:16px;padding:14px;backdrop-filter:blur(6px)}
.r-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
  color:var(--gold-2);font-weight:700;font-size:.95rem}
.mini,.r-head .mini{background:transparent;border:1px solid var(--line);color:var(--gold-2);
  border-radius:8px;padding:4px 10px;cursor:pointer;font-size:.75rem;font-family:inherit}
.quest{margin-bottom:12px}
.q-row{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:5px}
.q-row span{color:var(--txt-dim)}.q-row b{color:var(--gold-2);font-size:.78rem}
.bar{height:7px;border-radius:999px;background:#140c06;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.gold-btn.sm{padding:9px;font-size:.85rem;margin-top:6px}

.announce{display:flex;gap:10px;align-items:center;background:#140c06;border:1px solid var(--line);
  border-radius:12px;padding:10px}
.ann-ico{font-size:1.6rem}
.announce strong{color:var(--gold-2);font-size:.88rem}
.announce p{color:var(--txt-dim);font-size:.76rem;margin-top:2px}

.friend{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid rgba(61,42,26,.5)}
.f-av{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#6e4622,#3a2210);border:1px solid var(--gold-deep);font-size:.85rem}
.friend span{flex:1;font-size:.86rem;color:var(--txt)}
.friend i{font-size:.72rem;font-style:normal}
.friend i.on{color:#7cd17c}.friend i.play{color:var(--gold-2)}

/* Alt bar */
.lobby-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 24px;
  background:linear-gradient(180deg,rgba(20,12,7,.7),rgba(16,10,6,.95));border-top:1px solid var(--line);backdrop-filter:blur(8px)}
.foot-item{display:flex;flex-direction:column;align-items:center;line-height:1.25;color:var(--txt-dim);font-size:.78rem}
.foot-item b{color:var(--gold-2);font-size:.85rem}
.vip-btn{background:linear-gradient(180deg,var(--gold-2),var(--gold) 50%,var(--gold-deep));
  color:#2a1a04;border:1px solid #f5dca0;border-radius:12px;padding:12px 34px;font-weight:800;cursor:pointer;
  font-family:inherit;box-shadow:0 4px 0 #7a5a1e,0 8px 16px rgba(0,0,0,.4)}
.vip-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #7a5a1e}

.modal-close{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:#140c06;color:var(--gold-2);cursor:pointer;font-size:.9rem}
.modal-close:hover{border-color:var(--gold-deep)}
#shell.hidden{display:none}

/* Lobi responsive */
@media (max-width:1100px){
  .games-grid{grid-template-columns:repeat(3,1fr)}
  .rooms-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .lobby-body{grid-template-columns:1fr}
  .lobby-right{flex-direction:row;flex-wrap:wrap}
  .r-card{flex:1;min-width:240px}
  .lobby-nav{display:none}
}
@media (max-width:600px){
  .lobby-top{flex-wrap:wrap;gap:10px;padding:10px}
  .logo-txt span{display:none}
  .games-grid{grid-template-columns:repeat(2,1fr)}
  .welcome h1{font-size:1.3rem}
  .lobby-foot{flex-wrap:wrap;gap:8px;justify-content:center}
  .foot-item{font-size:.7rem}
  .vip-btn{order:-1;width:100%}
  .user-meta{display:none}
}


/* ============================================================
   AUTH / ÜYELİK
   ============================================================ */
.auth{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px}
.auth.hidden{display:none}
.auth-bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 30% 25%, rgba(212,166,87,.12), transparent 45%),
    radial-gradient(ellipse at 50% 120%, #5a3a1e 0%, #120a06 60%),
    #0c0a08}
.auth-bg::after{content:"";position:absolute;inset:0;backdrop-filter:blur(3px);
  background:repeating-linear-gradient(115deg,rgba(255,210,140,.03) 0 2px,transparent 2px 9px)}
.auth-card{position:relative;z-index:1;width:min(94vw,400px);
  background:linear-gradient(180deg,#2a1c10,#191009);border:1px solid var(--gold-deep);
  border-radius:18px;padding:30px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.7)}
.tabs{display:flex;gap:6px;background:#140c06;border:1px solid var(--line);border-radius:12px;padding:5px;margin:16px 0}
.tab{flex:1;background:transparent;border:0;color:var(--txt-dim);padding:10px;border-radius:9px;cursor:pointer;font-family:inherit;font-weight:600}
.tab.active{background:linear-gradient(180deg,var(--gold-2),var(--gold-deep));color:#2a1a04}
.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-form input{background:#140c06;border:1px solid var(--line);border-radius:11px;padding:13px;color:var(--txt);font-family:inherit;text-align:center}
.auth-err{color:#e88;font-size:.82rem;min-height:18px}
.auth-note{color:var(--txt-dim);font-size:.74rem;margin-top:14px}

/* ============================================================
   LOBİ SAYFA SİSTEMİ
   ============================================================ */
.page.hidden{display:none}
.foot-item.btn{cursor:pointer;border-radius:10px;padding:4px 10px;transition:.15s}
.foot-item.btn:hover{background:rgba(212,166,87,.12)}
.nav-item{position:relative}

/* PROFİL */
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.profile-grid .span2{grid-column:1/-1}
.profile-hero{text-align:center}
.ph-avatar{width:90px;height:90px;border-radius:20px;margin:4px auto 10px;display:grid;place-items:center;
  font-size:2.6rem;background:radial-gradient(circle at 35% 30%,#6e4622,#3a2210);border:2px solid var(--gold-deep)}
.ph-name{font-family:"Cinzel",serif;font-size:1.3rem;color:var(--gold-2)}
.ph-badges{margin:6px 0}
.vip-badge{background:linear-gradient(180deg,var(--gold-2),var(--gold-deep));color:#2a1a04;
  border-radius:999px;padding:3px 12px;font-size:.78rem;font-weight:700}
.ph-level{margin:8px 0 6px;color:var(--txt-dim)}.ph-level b{color:var(--gold-2);font-size:1.2rem}
.xpbar{position:relative;height:18px;border-radius:999px;background:#140c06;border:1px solid var(--line);overflow:hidden;margin-bottom:12px}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width .5s}
.xpbar span{position:absolute;inset:0;display:grid;place-items:center;font-size:.72rem;color:#fff;text-shadow:0 1px 2px #000}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:#140c06;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.stat b{display:block;font-size:1.5rem;color:var(--gold-2);font-family:"Cinzel",serif}
.stat span{font-size:.76rem;color:var(--txt-dim)}

.avatar-list,.frame-list{display:flex;flex-wrap:wrap;gap:8px}
.av-opt{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:#140c06;
  font-size:1.4rem;cursor:pointer;display:grid;place-items:center}
.av-opt.sel{border-color:var(--gold-2);box-shadow:0 0 0 2px var(--gold-deep)}
.av-opt.locked{opacity:.4;filter:grayscale(1)}
.frame-opt{padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:#140c06;
  color:var(--txt);cursor:pointer;font-family:inherit;text-transform:capitalize}
.frame-opt.sel{border-color:var(--gold-2)}
.frame-opt.locked{opacity:.5}
/* çerçeve renkleri (avatar) */
.frame-gold{box-shadow:0 0 0 3px var(--gold-2)!important}
.frame-emerald{box-shadow:0 0 0 3px #36c98a!important}
.frame-ruby{box-shadow:0 0 0 3px #d6486a!important}
.frame-royal{box-shadow:0 0 0 3px #7a6cff!important}

.ach-list{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow:auto}
.ach{display:flex;gap:10px;align-items:center;background:#140c06;border:1px solid var(--line);
  border-radius:10px;padding:9px;opacity:.5}
.ach.on{opacity:1;border-color:var(--gold-deep)}
.ach-ico{font-size:1.5rem}
.ach strong{display:block;color:var(--gold-2);font-size:.86rem}
.ach span{font-size:.74rem;color:var(--txt-dim)}

.match-history{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.mh-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;
  background:#140c06;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.82rem}
.mh-row.win{border-left:3px solid #3ec97c}.mh-row.loss{border-left:3px solid #d6486a}
.mh-res{font-weight:700;font-size:.72rem}
.mh-row.win .mh-res{color:#3ec97c}.mh-row.loss .mh-res{color:#d6486a}
.mh-opp{color:var(--txt-dim)}.mh-rew{color:var(--gold-2);font-size:.76rem}.mh-date{color:var(--txt-dim);font-size:.72rem}

/* ARKADAŞLAR */
.add-friend{display:flex;gap:8px}
.add-friend input{flex:1;background:#140c06;border:1px solid var(--line);border-radius:11px;padding:12px;color:var(--txt);font-family:inherit}
.friend-list{display:flex;flex-direction:column;gap:4px}
.friend small{color:var(--txt-dim);font-size:.7rem}
.friend i.off{color:#888}
.mini.full{width:100%;margin-top:4px}

/* SIRALAMALAR */
.lb-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.lb-tab{background:linear-gradient(180deg,#2a1c10,#1a1008);border:1px solid var(--line);
  color:var(--txt-dim);border-radius:10px;padding:10px 16px;cursor:pointer;font-family:inherit;font-weight:600}
.lb-tab.active{color:#2a1a04;background:linear-gradient(180deg,var(--gold-2),var(--gold-deep))}
.lb-list{display:flex;flex-direction:column;gap:6px}
.lb-row{display:grid;grid-template-columns:40px 40px 1fr auto;gap:10px;align-items:center;
  background:#140c06;border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.lb-row.top{border-color:var(--gold-deep);background:linear-gradient(90deg,rgba(212,166,87,.12),#140c06)}
.lb-rank{font-size:1.1rem;font-weight:700;text-align:center;color:var(--gold-2)}
.lb-av{font-size:1.3rem;text-align:center}
.lb-name{color:var(--txt)}.lb-name small{color:var(--txt-dim)}
.lb-score{color:var(--gold-2);font-weight:700}.lb-score small{color:var(--txt-dim);font-weight:400}

/* VIP */
.vip-hero{text-align:center}
.vip-crown{font-size:3rem}
.vip-hero h2{font-family:"Cinzel",serif;color:var(--gold-2);margin:6px 0}
.vip-perks{list-style:none;text-align:left;max-width:420px;margin:14px auto;display:flex;flex-direction:column;gap:8px}
.vip-perks li{background:#140c06;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:.88rem}
.vip-active{background:linear-gradient(180deg,#1d3a1d,#142a14);border:1px solid #2f5a2f;
  border-radius:12px;padding:14px;color:#9ad29a;font-weight:600}
.vip-avatars{margin-top:14px;grid-template-columns:repeat(6,1fr)!important}
.vip-av-card{aspect-ratio:1;display:grid;place-items:center;font-size:2rem;
  background:linear-gradient(180deg,#2a1c10,#160e07);border:1px solid var(--gold-deep);border-radius:14px;
  box-shadow:0 0 14px rgba(212,166,87,.2)}

.reward-line{color:var(--gold-2);font-weight:700;font-size:1.1rem;margin:8px 0}

@media (max-width:900px){
  .profile-grid{grid-template-columns:1fr}
  .vip-avatars{grid-template-columns:repeat(3,1fr)!important}
}


/* ============================================================
   OKEY EKRANI v2 — Okey Plus / Zynga tarzı modern masa
   ============================================================ */
.okey-shell{position:fixed;inset:0;display:flex;flex-direction:column;gap:8px;
  padding:8px;background:radial-gradient(ellipse at 50% 30%,#241810,#0c0a08)}
.okey-shell.hidden{display:none}

/* üst bar */
.okey-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(180deg,#241810,#160e07);border:1px solid var(--line);
  border-radius:12px;padding:7px 14px}
.okey-logo{font-family:"Cinzel",serif;color:var(--gold-2);font-size:1.1rem;display:flex;align-items:center;gap:8px}
.okey-logo .conn{font-size:.66rem}
.okey-roominfo{display:flex;gap:16px;font-size:.8rem;color:var(--txt-dim)}
.okey-roominfo b{color:var(--gold-2)}
.okey-top-actions{display:flex;gap:8px}

/* MASA — ahşap çerçeveli yeşil çuha, kompakt */
.okey-table{flex:1;position:relative;min-height:0;border-radius:120px/80px;
  background:
    radial-gradient(ellipse at 50% 42%, #2f8f54 0%, #1f6238 45%, #14492a 75%, #0e3a20 100%);
  border:14px solid;border-image:linear-gradient(170deg,#8a5a30,#5b3a1e 40%,#3a2210) 1;
  box-shadow:inset 0 0 80px rgba(0,0,0,.6),inset 0 0 0 3px rgba(0,0,0,.3),0 14px 40px rgba(0,0,0,.6)}
.okey-table::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.07),transparent 55%)}

/* oyuncu panelleri — referanstaki kart stili */
.opp-panel,.me-panel{display:flex;align-items:center;gap:9px;
  background:linear-gradient(180deg,rgba(28,18,10,.96),rgba(14,9,5,.96));
  border:1px solid #3d2a1a;border-radius:14px;padding:7px 12px;min-width:170px;
  box-shadow:0 6px 16px rgba(0,0,0,.5);z-index:5}
.opp-panel.active,.me-panel.active{border-color:var(--gold-2);
  box-shadow:0 0 0 1px var(--gold-2),0 0 22px rgba(240,205,138,.55);
  animation:panelGlow 1.4s ease-in-out infinite}
@keyframes panelGlow{0%,100%{box-shadow:0 0 0 1px var(--gold-2),0 0 18px rgba(240,205,138,.45)}
  50%{box-shadow:0 0 0 1px var(--gold-2),0 0 30px rgba(240,205,138,.8)}}
.opp-panel{position:absolute}
.pos-top{top:8px;left:50%;transform:translateX(-50%)}
.pos-left{left:10px;top:34%;transform:translateY(-50%)}
.pos-right{right:10px;top:34%;transform:translateY(-50%)}

.pp-av{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:1.5rem;position:relative;
  background:radial-gradient(circle at 35% 30%,#6e4622,#3a2210);border:1px solid var(--gold-deep);flex-shrink:0}
.pp-vip{position:absolute;top:-7px;right:-7px;font-size:.8rem}
.pp-info{flex:1;min-width:0}
.pp-name{font-weight:700;color:var(--gold-2);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-lvl{font-size:.68rem;color:var(--txt-dim)}
.pp-coin{font-size:.72rem;color:#e8c97a}
.pp-timer{position:relative;width:38px;height:38px;flex-shrink:0;display:grid;place-items:center}
.pp-timer svg{position:absolute;inset:0;transform:rotate(-90deg);width:38px;height:38px}
.pp-timer .t-bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:3}
.pp-timer .t-fg{fill:none;stroke:#3ec97c;stroke-width:3;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .2s linear,stroke .3s}
.pp-count{font-size:.95rem;font-weight:800;color:#fff;z-index:1}

/* rakip ıstaka (sehpa) */
.opp-rack{position:absolute;display:flex;align-items:center;gap:8px;z-index:3}
.opp-tiles{display:flex;gap:1px;padding:5px 6px;border-radius:7px;
  background:linear-gradient(180deg,#8a5a30,#4a2c14);box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,220,160,.3)}
.mini-back{width:8px;height:26px;border-radius:2px;background:linear-gradient(135deg,#6e4622,#3a2210);border:.5px solid #2a1708}
.opp-discard{filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.rack-top{top:74px;left:50%;transform:translateX(-50%)}
.rack-left{left:30px;top:55%;flex-direction:column}
.rack-left .opp-tiles{transform:rotate(90deg)}
.rack-right{right:30px;top:55%;flex-direction:column}
.rack-right .opp-tiles{transform:rotate(90deg)}

/* orta alan — kompakt */
.okey-center{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px}
.center-row{display:flex;gap:16px;align-items:center}
.pile-stack{position:relative;width:54px;height:74px;cursor:default;transition:transform .12s}
.pile-stack .okey-tile.back{width:54px;height:74px}
.pile-stack.drawable{cursor:pointer}
.pile-stack.drawable:hover{transform:translateY(-4px)}
.pile-stack.drawable::after{content:"";position:absolute;inset:-4px;border-radius:10px;
  box-shadow:0 0 16px rgba(240,205,138,.6);pointer-events:none}
.pile-badge{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--gold-2),var(--gold-deep));color:#2a1a04;
  font-size:.66rem;font-weight:800;padding:1px 7px;border-radius:999px;border:1px solid #f5dca0}
.discard-zone{width:58px;height:78px;border:2px dashed rgba(255,255,255,.3);border-radius:10px;
  display:grid;place-items:center;cursor:pointer;transition:.15s}
.discard-zone .dz-empty{color:rgba(255,255,255,.35);font-size:1.4rem}
.discard-zone.active{border-color:var(--gold-2);background:rgba(240,205,138,.1);box-shadow:0 0 16px rgba(240,205,138,.5)}
.indicator-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.ind-label{font-size:.66rem;letter-spacing:2px;color:rgba(255,255,255,.7);font-weight:600}

/* TAŞLAR */
.okey-tile{border-radius:9px;background:linear-gradient(180deg,#fffdf6,#ece2c8);
  border:1px solid #cbbf9e;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.4),inset 0 2px 3px rgba(255,255,255,.9),inset 0 -3px 6px rgba(150,130,90,.45);flex-shrink:0}
.okey-tile .tnum{font-family:"Cinzel",serif;font-weight:700;line-height:1}
.okey-tile .tdot{width:5px;height:5px;border-radius:50%;margin-top:3px}
.okey-tile.mini{width:38px;height:52px}
.okey-tile.mini .tnum{font-size:1.2rem}
.okey-tile.big{width:50px;height:70px}
.okey-tile.big .tnum{font-size:1.7rem}
.okey-tile .tnum.joker{color:#a9802f;font-size:1.6rem}
.okey-mark{position:absolute;top:3px;right:4px;color:#d4a657;font-size:.55rem}
.okey-tile.back{background:linear-gradient(135deg,#6e4622,#4a2c14);border-color:#2a1708;
  box-shadow:0 2px 5px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,220,160,.25)}
.okey-tile.back::after{content:"";position:absolute;inset:6px;border-radius:5px;
  border:1px solid rgba(240,205,138,.3);background:repeating-linear-gradient(45deg,rgba(240,205,138,.08) 0 3px,transparent 3px 6px)}

/* uçan taş animasyonu */
.okey-tile.flying{position:fixed;z-index:90;pointer-events:none;
  transition:left .38s cubic-bezier(.3,.7,.3,1),top .38s cubic-bezier(.3,.7,.3,1),transform .38s,opacity .38s;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.6))}

/* alt alan — kendi ıstaka (slot tabanlı) + panel + aksiyon */
.me-area{display:flex;flex-direction:column;gap:8px}
.rack-board{display:flex;flex-direction:column;gap:6px;padding:10px 12px;
  background:linear-gradient(180deg,#6b4423,#3a2210);border-radius:12px;border:2px solid #2a1708;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.6),0 4px 14px rgba(0,0,0,.4)}
.rack-row{display:flex;gap:3px;justify-content:center;min-height:74px}
.slot{width:52px;height:72px;border-radius:8px;flex-shrink:0;
  background:rgba(0,0,0,.18);box-shadow:inset 0 1px 3px rgba(0,0,0,.4);display:grid;place-items:center}
.slot.slot-hl{background:rgba(240,205,138,.25);box-shadow:inset 0 0 0 2px var(--gold-2)}
.slot .okey-tile.big{width:50px;height:70px}
.okey-tile.big.draggable{cursor:grab;touch-action:none;user-select:none;transition:transform .1s,box-shadow .1s}
.okey-tile.big.draggable:hover{transform:translateY(-4px)}
.okey-tile.big.playable{box-shadow:0 0 0 1px rgba(63,201,124,.55),0 2px 5px rgba(0,0,0,.4),inset 0 2px 3px rgba(255,255,255,.9)}
.okey-tile.big.dragging{opacity:.25}
.okey-tile.drag-ghost{position:fixed;z-index:95;pointer-events:none;cursor:grabbing;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.6));transform:scale(1.05) rotate(-2deg)}

.me-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.me-panel{flex:0 0 auto}
.me-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.me-actions .hint{color:var(--gold-2);font-size:.8rem;max-width:240px}
.act-btn{padding:14px 26px;border:0;border-radius:12px;font-family:inherit;font-weight:800;font-size:1rem;cursor:pointer}
.act-btn.gold{background:linear-gradient(180deg,#3fc97c,#249a5a);color:#06240f;
  border:1px solid #6fe6a0;box-shadow:0 4px 0 #1a6e3e,0 8px 16px rgba(0,0,0,.4)}
.act-btn.gold:active{transform:translateY(3px);box-shadow:0 1px 0 #1a6e3e}
.act-btn.gold.glow{animation:btnGlow 1.3s ease-in-out infinite}
@keyframes btnGlow{0%,100%{box-shadow:0 4px 0 #1a6e3e,0 0 14px rgba(63,201,124,.5)}50%{box-shadow:0 4px 0 #1a6e3e,0 0 26px rgba(63,201,124,.9)}}
.act-btn.gold:disabled{background:linear-gradient(180deg,#4a3420,#2e2012);color:var(--gold-2);border-color:#5a4028;box-shadow:none;cursor:not-allowed;opacity:.8}
.act-btn.wood-sm{padding:12px 16px;font-size:.85rem;background:linear-gradient(180deg,#6e4622,#4a2c14);
  color:var(--gold-2);border:1px solid #7a4f28;box-shadow:0 3px 0 #2e1a0c}
.act-btn.wood-sm:active{transform:translateY(2px);box-shadow:0 1px 0 #2e1a0c}

.seat-preview{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.seat-preview .sp{background:#140c06;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:.85rem}

/* responsive */
@media (max-width:900px){
  .opp-panel,.me-panel{min-width:130px;padding:5px 8px}
  .pp-av{width:34px;height:34px;font-size:1.2rem}
  .pp-name{font-size:.76rem}
  .okey-tile.big{width:42px;height:58px}.okey-tile.big .tnum{font-size:1.4rem}
  .slot{width:44px;height:60px}.slot .okey-tile.big{width:42px;height:58px}
  .rack-left,.rack-right{display:none}
}
@media (max-width:600px){
  .okey-table{border-radius:60px/44px;border-width:10px}
  .opp-panel,.me-panel{min-width:108px;gap:5px;padding:4px 6px}
  .pp-info .pp-coin{display:none}
  .pp-timer{width:30px;height:30px}.pp-timer svg{width:30px;height:30px}
  .okey-tile.big{width:34px;height:48px}.okey-tile.big .tnum{font-size:1.15rem}
  .okey-tile.mini{width:30px;height:42px}
  .slot{width:35px;height:50px}.slot .okey-tile.big{width:34px;height:48px}
  .rack-row{gap:2px}
  .pile-stack,.pile-stack .okey-tile.back{width:42px;height:58px}
  .discard-zone{width:46px;height:62px}
  .act-btn{padding:12px 18px;font-size:.9rem}
  .me-actions .hint{display:none}
  .rack-top{top:62px}
}