/* ============================================================
   FYRE OKEY SALONU — gerçek okey masası düzeni
   Taşlar SVG ile çizilir; dışarıdan görsel kullanılmaz.
   Botlar oyuncunun ıstakasını göremez (kararlar sunucuda).
   ============================================================ */
:root{
  --k-en:38px; --k-boy:53px;         /* ıstaka taşı */
  --m-en:30px; --m-boy:42px;         /* masadaki taş */
  --cuha:#0d4f45;--ceviz:#3d2317;--ceviz-acik:#5c3722;
  --pirinc:#c9962f;--pirinc-sonuk:#8a6620;
  --fildisi:#f6efe0;--fildisi-golge:#ddd2ba;
  --alev:#ff7a18;--yesil-iyi:#2f9e6b;
  --t-kirmizi:#c0271d;--t-siyah:#20262e;--t-mavi:#1f5f9e;--t-sari:#c98a12;
  --metin:#f3ede1;--metin-sonuk:#a99f8c;
  --cizgi:rgba(201,150,47,.22);--panel:#14201d;--panel-2:#1b2b27;
  --tahta-1:#8a5a33;--tahta-2:#5e3a1f;--tahta-3:#3d2311;
}
*{box-sizing:border-box}
body{
  margin:0;background:radial-gradient(120% 90% at 50% 0%,#123c36 0%,#07231f 55%,#04120f 100%);
  color:var(--metin);font:400 16px/1.5 Karla,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-text-size-adjust:100%;overflow-x:hidden;
}
h1,h2,h3{font-family:"Zilla Slab",Georgia,serif}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--alev);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.sar{max-width:1180px;margin:0 auto;padding-inline:14px;padding-block:14px 26px}
.tepe{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.marka{display:flex;align-items:center;gap:11px;min-width:0}
.marka .fis{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,#e8b84b,#a97c1c 62%,#6d4d0f);
  box-shadow:0 2px 0 #4a3409,0 6px 14px rgba(0,0,0,.45),inset 0 0 0 4px rgba(250,247,240,.16);
  display:grid;place-items:center;font:700 15px/1 "Zilla Slab",serif;color:#3a2905;
}
.marka b{font:600 21px/1.1 "Zilla Slab",serif;display:block}
.marka span{font-size:12px;color:var(--metin-sonuk);letter-spacing:.6px;text-transform:uppercase}
.salon-araclar{display:flex;gap:8px;align-items:center;margin-left:auto;flex:none}
.ikon-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--cizgi);
  background:rgba(6,28,24,.6);color:var(--metin);display:grid;place-items:center;
  font-size:15px;line-height:1;flex:none;transition:border-color .2s,color .2s,opacity .2s;
}
.ikon-btn:hover{border-color:var(--pirinc);color:var(--pirinc)}
.ikon-btn.kapali{color:var(--metin-sonuk);opacity:.5}

.mini-serit{display:none;gap:6px;flex-wrap:wrap;justify-content:center;font-size:11.5px;color:var(--metin-sonuk);margin-bottom:6px}
.mini-serit span{background:rgba(6,28,24,.55);border:1px solid var(--cizgi);border-radius:99px;padding:4px 10px;white-space:nowrap}
.mini-serit b{color:var(--pirinc);font-variant-numeric:tabular-nums}

/* ---------------- masa ---------------- */
.masa-kabuk{
  position:relative;border-radius:24px;padding:11px;
  background:linear-gradient(160deg,var(--ceviz-acik),var(--ceviz) 45%,#2a1710);
  box-shadow:0 22px 52px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,220,160,.18);
}
.masa{
  position:relative;border-radius:14px;height:clamp(360px,60vw,470px);
  background:radial-gradient(120% 100% at 50% 45%,#13685c 0%,#0d4f45 44%,#08382f 76%,#052620 100%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.5),inset 0 0 0 2px rgba(201,150,47,.16);
  overflow:hidden;
}
.masa::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
                   repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);
}

/* isim tabelaları — ahşap */
.tabela{
  position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(178deg,var(--tahta-1),var(--tahta-2) 55%,var(--tahta-3));
  border-radius:9px;box-shadow:0 4px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,214,160,.3),inset 0 -3px 6px rgba(0,0,0,.35);
  color:#f6e6cf;font:700 13px/1 "Zilla Slab",serif;letter-spacing:.4px;
  transition:box-shadow .25s;
}
.tabela .sayi{font:500 10.5px/1 Karla,sans-serif;color:#e0c69c;opacity:.85;white-space:nowrap}
.tabela.sirasi{box-shadow:0 0 0 2px var(--pirinc),0 0 20px rgba(201,150,47,.5),inset 0 1px 0 rgba(255,214,160,.3)}
.tabela.ust{top:8px;left:50%;transform:translateX(-50%);min-width:150px;padding:7px 16px;flex-direction:row}
.tabela.sol,.tabela.sag{top:50%;min-height:150px;padding:16px 7px;flex-direction:column}
.tabela.sol{left:8px;transform:translateY(-50%)}
.tabela.sag{right:8px;transform:translateY(-50%)}
.tabela.sol .ad,.tabela.sag .ad,.tabela.sol .sayi,.tabela.sag .sayi{writing-mode:vertical-rl}
.tabela.sag .ad,.tabela.sag .sayi{transform:rotate(180deg)}

/* atılan taşlar — her oyuncunun son 2 taşı */
.atilan-alan{position:absolute;z-index:2;display:flex;gap:7px;align-items:center;justify-content:center}
.atilan-alan.ust{top:56px;left:50%;transform:translateX(-50%);flex-direction:row}
.atilan-alan.sol{left:70px;top:50%;transform:translateY(-50%);flex-direction:column}
.atilan-alan.sag{right:70px;top:50%;transform:translateY(-50%);flex-direction:column}
.atilan-alan.benim{bottom:8px;left:50%;transform:translateX(-50%);flex-direction:row;padding:6px 10px;border-radius:12px}
.atilan-alan.benim.at-hedef{outline:2px dashed rgba(255,122,24,.85);outline-offset:0;background:rgba(255,122,24,.10)}
.atilan-alan .cekilir{cursor:grab}
.atilan-alan .cekilir::after{
  content:"";position:absolute;inset:-4px;border-radius:8px;
  border:2px solid rgba(201,150,47,.9);animation:nabiz 1.5s ease-in-out infinite;pointer-events:none;
}
@keyframes nabiz{0%,100%{opacity:.35}50%{opacity:.95}}
.atma-etiket{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:1;
  font:700 9.5px/1 Karla,sans-serif;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(246,239,224,.34);border:1px dashed rgba(246,239,224,.22);
  border-radius:10px;padding:16px 26px;pointer-events:none;
}

/* merkez: deste + gösterge */
.merkez{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:flex;align-items:center;gap:20px;
}
.deste-yigin{position:relative;width:var(--m-en);height:var(--m-boy);flex:none}
.deste-yigin .tas{position:absolute;left:0;top:0}
.deste-yigin.cekilir{cursor:grab}
.deste-sayi{
  position:absolute;left:-5px;bottom:-10px;z-index:5;
  background:#fff;color:var(--t-kirmizi);border-radius:99px;padding:2px 8px;
  font:700 12px/1 Karla,sans-serif;font-variant-numeric:tabular-nums;
  box-shadow:0 2px 5px rgba(0,0,0,.4);
}
.gosterge-yuva{position:relative;width:var(--m-en);height:var(--m-boy);flex:none;
  border-radius:6px;box-shadow:0 0 0 2px rgba(201,150,47,.55),0 0 16px rgba(201,150,47,.28)}
.merkez-araclar{
  position:absolute;right:10px;bottom:9px;z-index:4;display:flex;gap:9px;
}
.yuvarlak{
  width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;
  background:linear-gradient(160deg,#20404a,#12262c);color:#dfe9ea;font-size:15px;
  box-shadow:0 3px 0 #0a1518,0 6px 14px rgba(0,0,0,.4);
}
.yuvarlak.altin{background:linear-gradient(160deg,#e8c76a,var(--pirinc) 55%,#9c7016);color:#33240a;box-shadow:0 3px 0 #66490d}
.yuvarlak:disabled{opacity:.4;cursor:not-allowed}
.masa-durum{
  position:absolute;left:11px;bottom:9px;z-index:4;max-width:40%;
  font-size:12.5px;color:var(--metin-sonuk);text-align:left;line-height:1.3;
}
.masa-durum b{color:var(--pirinc)}

/* ---------------- taş ---------------- */
.tas{
  width:var(--k-en);height:var(--k-boy);border-radius:6px;position:relative;flex:none;
  background:linear-gradient(160deg,#fffcf3,var(--fildisi) 45%,var(--fildisi-golge));
  box-shadow:0 1px 0 #b9ad93,0 2px 3px rgba(0,0,0,.32),0 6px 12px rgba(0,0,0,.26),
             inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 3px rgba(0,0,0,.10);
  user-select:none;touch-action:none;
}
.tas svg{display:block;width:100%;height:100%}
.tas.arka{background:linear-gradient(160deg,#2a5f55,#0f3b34);box-shadow:0 1px 0 #062119,0 5px 11px rgba(0,0,0,.4)}
.tas.masa-tas{width:var(--m-en);height:var(--m-boy)}
.tas.secili{box-shadow:0 0 0 2px var(--alev),0 8px 18px rgba(255,122,24,.35);transform:translateY(-7px)}
.tas.tiklanir{cursor:grab;transition:transform .13s,box-shadow .13s}
.tas.tiklanir:hover{transform:translateY(-5px)}
.tas.sonuncu{box-shadow:0 0 0 2px rgba(255,122,24,.55),0 6px 12px rgba(0,0,0,.3)}

/* ---------------- ıstaka ---------------- */
.istaka-kabuk{margin-top:14px}
.istaka{
  width:fit-content;max-width:100%;margin-inline:auto;
  background:linear-gradient(178deg,#8a5a33,#5e3a1f 32%,#3d2311);
  border-radius:10px 10px 14px 14px;padding:9px 10px 13px;
  box-shadow:0 16px 30px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,214,160,.26),inset 0 -8px 14px rgba(0,0,0,.42);
  display:flex;flex-direction:column;gap:7px;
}
.raf{
  display:flex;gap:2px;padding:4px 5px 6px;border-radius:6px;
  background:linear-gradient(180deg,rgba(0,0,0,.36),rgba(0,0,0,.14));
  box-shadow:inset 0 3px 6px rgba(0,0,0,.5);align-items:flex-end;justify-content:center;
}
.yuva{
  width:var(--k-en);height:var(--k-boy);flex:none;border-radius:5px;
  display:flex;align-items:flex-end;justify-content:center;
}
.yuva.bos{background:rgba(0,0,0,.16);box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.yuva.hedef{background:rgba(255,122,24,.22);box-shadow:inset 0 0 0 2px rgba(255,122,24,.7)}

.surukle{
  position:fixed;z-index:90;pointer-events:none;
  transform:translate(-50%,-50%) scale(1.08) rotate(-2deg);
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.6));
}
.tutuluyor{opacity:.25}

.dugmeler{display:flex;gap:9px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:13px}
.btn{
  border:0;border-radius:11px;padding:11px 19px;font-weight:700;font-size:15px;
  background:linear-gradient(160deg,#ff9040,var(--alev) 55%,#e2551a);color:#fff;
  box-shadow:0 3px 0 #a83c10,0 10px 22px rgba(226,85,26,.32);transition:transform .12s,box-shadow .12s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #a83c10}
.btn.sakin{background:linear-gradient(160deg,#33463f,#1e2d28);box-shadow:0 3px 0 #0d1714;color:var(--metin)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

.alt{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.pano{background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--cizgi);border-radius:16px;padding:15px 17px}
.pano h2{margin:0 0 12px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.pano h2::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--pirinc);transform:rotate(45deg)}
.gunluk{height:150px;overflow-y:auto;display:flex;flex-direction:column-reverse;gap:6px;font-size:13px;color:var(--metin-sonuk)}
.gunluk div{padding:5px 9px;background:rgba(250,247,240,.045);border-radius:7px;border-left:2px solid var(--cizgi)}
.gunluk div.iyi{border-left-color:var(--yesil-iyi);color:#cfe9dc}
.gunluk div.onemli{border-left-color:var(--pirinc);color:#f0dcae;font-weight:700}
.skor{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.skor th{text-align:left;font:700 10.5px/1 Karla,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--metin-sonuk);padding:0 8px 8px;border-bottom:1px solid var(--cizgi)}
.skor td{padding:8px;border-bottom:1px solid rgba(250,247,240,.07)}
.skor .num{text-align:right}
.skor .biz td{color:var(--pirinc);font-weight:700}

.perde{position:fixed;inset:0;background:rgba(3,14,12,.78);backdrop-filter:blur(5px);display:grid;place-items:center;z-index:80;padding:18px}
.perde[hidden]{display:none}
[hidden]{display:none!important}
.kutu{max-width:460px;width:100%;background:linear-gradient(165deg,#20312c,#0f1b18);border:1px solid rgba(201,150,47,.4);border-radius:20px;padding:24px 22px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.kutu h3{margin:0 0 6px;font:600 26px/1.2 "Zilla Slab",serif;color:var(--pirinc)}
.kutu p{margin:0 0 4px;color:var(--metin-sonuk);font-size:14.5px}
.kutu .dokum{margin:14px 0 6px;text-align:left;font-size:13.5px}
.kutu .dokum div{display:flex;justify-content:space-between;gap:12px;padding:6px 2px;border-bottom:1px solid rgba(250,247,240,.08)}
.kutu .dokum span:last-child{font-variant-numeric:tabular-nums;font-weight:700;color:var(--metin);text-align:right}

.dip{margin-top:20px;font-size:12.5px;color:var(--metin-sonuk);line-height:1.65;border-top:1px solid var(--cizgi);padding-top:14px}
.dip b{color:var(--metin)}

/* ---------------- dar ekran (dikey telefon) ---------------- */
@media (max-width:900px){.alt{grid-template-columns:1fr}}
@media (max-width:780px){
  :root{--k-en:32px;--k-boy:45px;--m-en:27px;--m-boy:38px}
  .masa{height:clamp(340px,74vw,440px)}
  .tabela.ust{min-width:120px;padding:6px 12px;font-size:12px}
  .tabela.sol,.tabela.sag{min-height:120px;padding:12px 6px;font-size:12px}
  .atilan-alan.sol{left:52px}
  .atilan-alan.sag{right:52px}
  .raf{gap:1px;padding:3px 3px 5px}
  .yuva{border-radius:4px}
}
@media (max-width:430px){
  :root{--k-en:26px;--k-boy:37px;--m-en:23px;--m-boy:32px}
  .sar{padding-inline:8px}
  .tabela.ust{min-width:98px;font-size:11px}
  .tabela.sol,.tabela.sag{min-height:98px;font-size:11px}
  .tabela .sayi{font-size:9.5px}
  .atilan-alan.sol{left:40px}
  .atilan-alan.sag{right:40px}
  .merkez{gap:10px}
  .masa-durum{font-size:11.5px}
}

/* ---------------- YATAY EKRAN ---------------- */
body.yatay{overflow:hidden}
body.yatay .sar{height:100dvh;max-width:none;display:flex;flex-direction:column;gap:4px;padding-block:6px}
body.yatay .tepe{flex:none;margin-bottom:0;gap:8px;flex-wrap:nowrap}
body.yatay .marka b{font-size:15px}
body.yatay .marka span{display:none}
body.yatay .marka .fis{width:28px;height:28px;font-size:12px}
body.yatay .mini-serit{display:flex;flex:none;margin-bottom:0}
body.yatay .masa-kabuk{flex:1 1 auto;min-height:0;padding:7px;border-radius:16px}
body.yatay .masa{height:100%!important;border-radius:11px}
body.yatay:not(.detay) .alt,
body.yatay:not(.detay) .dip{display:none}
body.yatay .istaka-kabuk{flex:none;margin-top:5px}
body.yatay .istaka{padding:6px 7px 9px;gap:4px;border-radius:9px}
body.yatay .raf{padding:3px 4px 5px}
/* yatayda düğmeler başlık şeridinin boşluğuna taşınır; masaya yer kalır */
body.yatay .sar{position:relative}
body.yatay .dugmeler{position:absolute;top:5px;right:92px;margin:0;gap:7px;z-index:20;flex-wrap:nowrap}
body.yatay .btn{padding:6px 12px;font-size:12.5px;border-radius:9px}
body.yatay .istaka-kabuk{margin-top:4px}
/* kısa masada öğeler üst üste binmesin */
body.yatay .masa-durum{left:calc(var(--m-en) + 22px);bottom:7px;max-width:34%}
body.yatay .atilan-alan.ust{top:31px}
body.yatay .atilan-alan.benim{bottom:5px}
body.yatay .atilan-alan.sol{left:calc(var(--m-en) + 22px)}
body.yatay .atilan-alan.sag{right:calc(var(--m-en) + 22px)}
body.yatay .merkez-araclar{right:calc(var(--m-en) + 20px);bottom:5px}
body.yatay .tabela.ust{top:5px}
body.yatay .tabela.sol{left:5px}
body.yatay .tabela.sag{right:5px}
body.yatay.detay{overflow:auto}
body.yatay.detay .sar{height:auto}
@media (orientation:landscape) and (max-height:520px){
  body.yatay{--k-en:30px;--k-boy:42px;--m-en:25px;--m-boy:35px}
  body.yatay .tabela.ust{min-width:112px;padding:5px 11px;font-size:11.5px}
  body.yatay .tabela.sol,body.yatay .tabela.sag{min-height:104px;padding:11px 5px;font-size:11.5px}
  body.yatay .atilan-alan.sol{left:46px}
  body.yatay .atilan-alan.sag{right:46px}
  body.yatay .btn{padding:6px 11px;font-size:12px}
  body.yatay .masa-durum{font-size:11.5px}
}
@media (orientation:landscape) and (max-height:420px){
  body.yatay{--k-en:26px;--k-boy:37px;--m-en:22px;--m-boy:31px}
  body.yatay .yuvarlak{width:32px;height:32px;font-size:13px}
  body.yatay .yuvarlak{width:32px;height:32px;font-size:13px}
}