/* ===================================================================
   101 OKEY · stil
   =================================================================== */
:root{
  --felt:#0b5e3c;
  --felt-dark:#083e29;
  --wood:#5b3a1e;
  --wood-light:#7a4f29;
  --tile:#f5efe1;
  --tile-edge:#d8cdb4;
  --red:#d5232b;
  --yellow:#e6a000;
  --black:#1c1c20;
  --blue:#1763c9;
  --gold:#f3c969;
  --shadow:rgba(0,0,0,.35);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;font-family:var(--font);overflow:hidden;}
body{
  background:radial-gradient(circle at 50% 30%,#11543a,#06291b 80%);
  color:#fff;user-select:none;touch-action:manipulation;
}
.hidden{display:none !important;}
.screen{position:fixed;inset:0;}

/* ---- Butonlar ---- */
.btn{
  font-family:var(--font);font-size:15px;font-weight:600;cursor:pointer;
  border:none;border-radius:10px;padding:11px 18px;color:#fff;
  background:linear-gradient(#2c6e4e,#1c4d36);
  box-shadow:0 2px 0 #123524,0 3px 8px var(--shadow);
  transition:transform .06s,filter .15s;
}
.btn:hover{filter:brightness(1.1);}
.btn:active{transform:translateY(2px);box-shadow:0 0 0 #123524;}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4);}
.btn-primary{background:linear-gradient(#f3c969,#d99b27);color:#3a2606;box-shadow:0 2px 0 #9c6c12,0 3px 10px var(--shadow);}
.btn.small{padding:8px 12px;font-size:13px;border-radius:8px;}
.btn-open{background:linear-gradient(#e0843a,#c25e1d);}
.btn-finish{background:linear-gradient(#39c46e,#1e9b4e);}
.icon-btn{background:rgba(0,0,0,.3);border:none;color:#fff;font-size:20px;width:42px;height:42px;border-radius:10px;cursor:pointer;}

/* ===================================================================
   MENÜ
   =================================================================== */
#menu{display:flex;align-items:center;justify-content:center;}
.menu-card{
  background:linear-gradient(160deg,rgba(14,107,70,.92),rgba(6,41,27,.96));
  border:2px solid rgba(243,201,105,.4);
  border-radius:20px;padding:38px 40px;max-width:380px;width:90%;
  text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
}
.logo{display:flex;justify-content:center;align-items:baseline;gap:8px;}
.logo-101{font-size:64px;font-weight:900;color:var(--gold);text-shadow:0 3px 0 #8a5d10,0 6px 14px rgba(0,0,0,.5);letter-spacing:-2px;}
.logo-okey{font-size:34px;font-weight:800;letter-spacing:6px;color:#fff;}
.tagline{color:#cfe6d8;margin:6px 0 26px;font-size:15px;}
.menu-buttons{display:flex;flex-direction:column;gap:12px;}
.menu-buttons .btn{font-size:17px;padding:14px;}
.menu-opts{margin-top:24px;display:flex;flex-direction:column;gap:12px;text-align:left;}
.opt{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#d7e8df;}
.opt select{background:#0a3a28;color:#fff;border:1px solid #2c6e4e;border-radius:8px;padding:6px 10px;font-family:var(--font);}
.opt-check{justify-content:flex-start;gap:10px;cursor:pointer;}
.opt-check input{width:18px;height:18px;accent-color:var(--gold);}
.credit{margin:26px 0 0;font-size:12px;color:#6f9685;letter-spacing:1px;}

/* ---- Modal (kurallar / el sonu) ---- */
#rules,#roundend{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);}
.modal{
  background:linear-gradient(160deg,#0e6b46,#063a27);
  border:2px solid rgba(243,201,105,.4);border-radius:18px;
  padding:30px;max-width:520px;width:92%;box-shadow:0 20px 60px rgba(0,0,0,.6);
  max-height:88vh;overflow:auto;
}
.modal h2{margin:0 0 16px;color:var(--gold);font-size:24px;text-align:center;}
.rules-body p{line-height:1.55;color:#e3f0e9;font-size:14.5px;margin:0 0 12px;}
.rules-body b{color:var(--gold);}
.modal .btn{display:block;width:100%;margin-top:16px;}
.re-body{font-size:15px;line-height:1.6;}

/* ===================================================================
   OYUN MASASI
   =================================================================== */
#game{display:flex;flex-direction:column;}
.table{
  flex:1;display:flex;flex-direction:column;position:relative;
  padding:8px clamp(8px,2vw,28px) 4px;
  background:
    radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.05),transparent 60%);
}

/* ---- Üst çubuk ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 2px 10px;}
.indicator-box{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.28);padding:6px 14px;border-radius:12px;}
.ind-label,.okey-label{font-size:12px;color:#bcd8c9;}
.okey-label b{color:var(--gold);font-size:14px;}
.pile-info{text-align:center;background:rgba(0,0,0,.28);padding:6px 14px;border-radius:12px;}
.pile-count{display:block;font-size:22px;font-weight:800;color:var(--gold);line-height:1;}
.pile-label{font-size:11px;color:#bcd8c9;}

/* ---- Rakipler ---- */
.opponents{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;}
.sides{display:flex;align-items:stretch;justify-content:center;gap:clamp(10px,3vw,60px);width:100%;}
.opp{
  background:rgba(0,0,0,.22);border-radius:14px;padding:8px 12px;min-width:120px;
  text-align:center;position:relative;transition:box-shadow .25s,background .25s;
}
.opp.active{box-shadow:0 0 0 2px var(--gold),0 0 22px rgba(243,201,105,.55);background:rgba(243,201,105,.12);}
.opp-av{font-size:26px;line-height:1;}
.opp-name{font-weight:700;font-size:14px;margin-top:2px;}
.opp-meta{font-size:12px;color:#bcd8c9;margin-top:2px;}
.opp-open{color:var(--gold);font-weight:700;}
.opp-melds{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-top:6px;max-width:240px;}
.side-left,.side-right{align-self:center;}

/* ---- Orta: deste + atılanlar ---- */
.center{display:flex;align-items:center;gap:clamp(10px,2vw,28px);}
.stack{position:relative;width:54px;height:74px;cursor:pointer;transition:transform .1s;}
.stack:hover{transform:scale(1.06);}
.stack-back{
  position:absolute;width:50px;height:70px;border-radius:8px;
  background:linear-gradient(135deg,#13351f,#0b2716);
  border:2px solid #2c6e4e;box-shadow:0 2px 5px var(--shadow);
}
.stack-back:nth-child(2){top:-3px;left:3px;}
.stack-back:nth-child(3){top:-6px;left:6px;}
.discard-zone{
  min-width:56px;min-height:74px;border-radius:10px;
  border:2px dashed rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;
  position:relative;
}
.discard-zone.takeable{border-color:var(--gold);box-shadow:0 0 16px rgba(243,201,105,.4);cursor:pointer;}

/* ---- Açılan perler (oyuncu) ---- */
.my-melds{flex:1;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;justify-content:center;padding:8px;min-height:0;overflow:auto;}
.meld-group{display:flex;gap:2px;background:rgba(0,0,0,.18);padding:4px;border-radius:8px;border:1px solid rgba(255,255,255,.08);}
.meld-group.addable{outline:2px solid var(--gold);cursor:pointer;}

/* ---- Oyuncu alanı ---- */
.player-area{flex:0 0 auto;margin-top:auto;}
.player-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
.me-info{display:flex;flex-direction:column;}
.me-name{font-weight:800;font-size:15px;}
.me-status{font-size:12px;color:#bcd8c9;}
.me-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.meld-meter{font-size:13px;background:rgba(0,0,0,.3);padding:7px 12px;border-radius:8px;}
.meld-meter b{color:var(--gold);}
.meld-meter.ok b{color:#5be089;}

/* ---- Sehpa (istaka) ---- */
.rack{
  background:linear-gradient(#7a4f29,#5b3a1e);
  border:3px solid #3d2613;border-radius:14px;
  padding:8px;display:grid;
  grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(2,1fr);
  gap:4px;box-shadow:inset 0 6px 14px rgba(0,0,0,.4),0 6px 16px var(--shadow);
}
.rack-slot{
  border-radius:7px;background:rgba(0,0,0,.16);min-height:62px;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.rack-slot.drag-over{background:rgba(243,201,105,.3);}

.discard-hint{text-align:center;font-size:11px;color:#9fc0b0;margin-top:4px;height:14px;}

/* ===================================================================
   TAŞLAR
   =================================================================== */
.tile{
  width:42px;height:58px;border-radius:8px;
  background:linear-gradient(160deg,#fdfaf2,var(--tile) 60%,var(--tile-edge));
  border:1px solid #cfc3a8;
  box-shadow:0 2px 3px rgba(0,0,0,.3),inset 0 1px 0 #fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;cursor:grab;transition:transform .08s,box-shadow .12s;
  font-weight:800;line-height:1;
}
.tile.sm{width:30px;height:42px;border-radius:6px;font-size:12px;}
.rack .tile{width:100%;height:100%;}
.tile:active{cursor:grabbing;}
.tile.selected{transform:translateY(-10px);box-shadow:0 8px 14px rgba(0,0,0,.45),0 0 0 2px var(--gold);}
.tile.dragging{opacity:.4;}
.tile .num{font-size:22px;}
.tile.sm .num{font-size:14px;}
.tile .dot{width:7px;height:7px;border-radius:50%;margin-top:3px;}
.tile.sm .dot{width:5px;height:5px;margin-top:2px;}
.tile.c-red{color:var(--red);}    .tile.c-red .dot{background:var(--red);}
.tile.c-yellow{color:var(--yellow);} .tile.c-yellow .dot{background:var(--yellow);}
.tile.c-black{color:var(--black);}  .tile.c-black .dot{background:var(--black);}
.tile.c-blue{color:var(--blue);}   .tile.c-blue .dot{background:var(--blue);}
/* sahte okey / joker */
.tile.joker{color:#7a4f29;}
.tile.joker .num{font-size:26px;}
.tile.joker::after{content:"★";position:absolute;bottom:3px;font-size:9px;color:var(--gold);}
/* okey olarak kullanılan (gerçek okey taşı) */
.tile.is-okey::before{content:"";position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 4px var(--gold);}
.tile-slot{width:34px;height:46px;}

/* atılan taş yığını */
.discard-zone .tile{position:absolute;}

/* oyuncunun attığı taş bölgesi */
.my-discard{
  position:absolute;right:clamp(8px,2vw,28px);bottom:120px;
  width:60px;height:80px;border-radius:12px;border:2px dashed rgba(243,201,105,.5);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#bcd8c9;
  text-align:center;padding:4px;transition:box-shadow .2s,background .2s;
}
.my-discard.drag-over{background:rgba(243,201,105,.25);box-shadow:0 0 18px rgba(243,201,105,.6);}
.my-discard .tile{position:absolute;}

/* ---- Skor ---- */
.scorebar{display:flex;gap:8px;justify-content:center;padding:6px;font-size:12px;color:#cfe6d8;}
.scorebar .sc{background:rgba(0,0,0,.25);padding:4px 10px;border-radius:8px;}
.scorebar .sc b{color:var(--gold);}

/* ---- Toast ---- */
.toast{
  position:fixed;top:64px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.82);color:#fff;padding:12px 22px;border-radius:30px;
  font-size:15px;font-weight:600;z-index:50;border:1px solid rgba(243,201,105,.5);
  box-shadow:0 6px 20px rgba(0,0,0,.5);transition:opacity .3s,transform .3s;
}
.toast.show{animation:pop .3s;}
@keyframes pop{from{transform:translateX(-50%) scale(.8);opacity:0;}to{transform:translateX(-50%) scale(1);opacity:1;}}

/* animasyon: taş çekme/atma */
@keyframes deal{from{transform:scale(.5);opacity:0;}to{transform:scale(1);opacity:1;}}
.tile.dealt{animation:deal .25s;}

/* ---- Responsive ---- */
@media (max-width:760px){
  .tile{width:34px;height:48px;}
  .tile .num{font-size:18px;}
  .rack{grid-template-columns:repeat(15,1fr);gap:3px;padding:6px;}
  .rack-slot{min-height:46px;}
  .opp{min-width:92px;padding:6px 8px;}
  .logo-101{font-size:52px;}
}
@media (max-width:480px){
  .me-actions .btn.small{padding:7px 9px;font-size:12px;}
  .my-discard{bottom:104px;width:50px;height:68px;}
}