/* Çiz ve Bil */
.oAlan{background:radial-gradient(1100px 600px at 50% -10%,#3a2f86 0%,#1d1a52 45%,#0f1033 100%)}
.cbKap{position:absolute;inset:0;display:grid;max-width:1280px;margin:0 auto;padding:6px 10px 6px;gap:6px;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
  grid-template-areas:"ust" "oy" "tuval" "arac" "akis" "form";padding-bottom:calc(6px + var(--klavye,0px));--mod:dikey}
.cbKap input{user-select:text;-webkit-user-select:text}

/* üst: tur - kelime / ipucu - saat */
.cbUst{grid-area:ust;display:flex;align-items:center;gap:8px;min-width:0}
.cbTur{min-width:56px;text-align:center;background:#ffffff10;border:1px solid #ffffff22;border-radius:12px;padding:2px 6px;line-height:1.1}
.cbTur small{display:block;font-size:10px;letter-spacing:1.5px;color:var(--soluk);font-weight:800}
.cbTur b{font:800 19px 'Baloo 2',Nunito,sans-serif;white-space:nowrap}
.cbKelime{flex:1;min-width:0;text-align:center;background:linear-gradient(180deg,#fffdf4,#f4ecd2);color:#2b2140;border-radius:14px;padding:3px 8px 4px;box-shadow:0 3px 0 #0006;line-height:1.05}
.cbKelime small{display:block;font:800 11px Nunito,sans-serif;color:#7a6a9a;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbKelime b{display:block;font:800 23px 'Baloo 2',Nunito,monospace;letter-spacing:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbKelime b .h{display:inline-block;width:.72em;height:1.05em;vertical-align:bottom;text-align:center;border-bottom:3px solid #2b2140;margin:0 2px;line-height:1.05}
.cbKelime b .h.acik{color:#d2380f;border-color:#d2380f}
.cbKelime b .bos{display:inline-block;width:.5em}
.cbKelime b small{display:inline;font-size:13px;letter-spacing:0;color:#7a6a9a}
.cbKelime.uzun b{font-size:18px;letter-spacing:1px}
.cbKelime.cizen{background:linear-gradient(180deg,#fff3c4,#ffd76a)}
.cbKelime.bildi{background:linear-gradient(180deg,#e6ffef,#9df0bf)}
.cbKelime.bildi b{color:#11743c}
.cbSaat{position:relative;width:52px;height:52px;flex:0 0 auto}
.cbSaat svg{width:100%;height:100%;transform:rotate(-90deg)}
.cbSaatZemin{fill:#0b0d26;stroke:#ffffff1c;stroke-width:4}
.cbSaatHalka{fill:none;stroke:#4fd17a;stroke-width:4;stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear,stroke .3s}
.cbSaat b{position:absolute;inset:0;display:grid;place-items:center;font:800 18px 'Baloo 2',Nunito,sans-serif}
.cbSaat.uyari .cbSaatHalka{stroke:#ffb020}
.cbSaat.kritik .cbSaatHalka{stroke:#ff4d4d}
.cbSaat.kritik b{color:#ff8080;animation:cbNabiz .5s ease-in-out infinite alternate}
@keyframes cbNabiz{to{transform:scale(1.15)}}

/* oyuncular */
.cbOyuncular{grid-area:oy;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0}
.cbOyuncular::-webkit-scrollbar{display:none}
.cbOyuncular:empty{display:none}
.cbOy{flex:0 0 auto;display:flex;align-items:center;gap:6px;background:#ffffff12;border:1px solid #ffffff20;border-radius:999px;padding:2px 10px 2px 3px;font-size:13px;white-space:nowrap;position:relative}
.cbOy i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#ffffff1a;font-size:14px}
.cbOy b{max-width:96px;overflow:hidden;text-overflow:ellipsis}
.cbOy em{font-style:normal;font-weight:800;color:#ffd866}
.cbOy .art{font-size:11px;font-weight:800;color:#7dffb0}
.cbOy.ben{border-color:#ffd866;background:#ffd86622}
.cbOy.cizen{border-color:#ff9f1c;background:#ff9f1c26}
.cbOy.bildi{border-color:#4fd17a;background:#4fd17a22}
.cbOy.ayrildi{opacity:.45}

/* tuval */
.cbTuvalYuva{grid-area:tuval;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center}
.cbCerceve{position:relative;width:100%;aspect-ratio:4/3;border-radius:14px;background:#fff;box-shadow:0 0 0 3px #ffffff26,0 10px 30px #0008;overflow:hidden;flex:0 0 auto}
.cbCerceve canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:default}
.cbCerceve.cizer canvas{cursor:crosshair}
.cbCerceve.kova canvas{cursor:cell}
.cbKatman{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px;text-align:center;
  background:radial-gradient(circle at 50% 40%,#2c2470f2,#14123cf5);color:#fff;animation:cbBelir .25s ease-out;overflow:auto}
@keyframes cbBelir{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.cbKatman:has(.cbSonucKatman){background:linear-gradient(180deg,#14123c99,#14123ce6 45%)}
.cbSonucKatman{display:none}
.cbKatman h3{margin:0;font:800 22px 'Baloo 2',Nunito,sans-serif;color:#ffd866}
.cbKatman p{margin:0;color:#d9d4ff;font-weight:700}
.cbKatman .buyukKelime{font:900 34px 'Baloo 2',Nunito,sans-serif;letter-spacing:2px;color:#fff;text-shadow:0 3px 0 #0006}
.cbSecenek{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cbSecenek button{min-width:110px;border:0;border-radius:14px;padding:10px 14px;font:800 18px 'Baloo 2',Nunito,sans-serif;cursor:pointer;color:#2b2140;
  background:linear-gradient(180deg,#fff,#e9e2ff);box-shadow:0 4px 0 #0007;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.cbSecenek button small{font:800 11px Nunito,sans-serif;letter-spacing:1px;margin-top:3px;padding:1px 8px;border-radius:99px;color:#fff}
.cbSecenek button[data-z="0"] small{background:#3aa860}.cbSecenek button[data-z="1"] small{background:#e08a12}.cbSecenek button[data-z="2"] small{background:#d23c3c}
.cbSecenek button:active{transform:translateY(3px);box-shadow:0 1px 0 #0007}
.cbSonucListe{width:min(100%,360px);display:flex;flex-direction:column;gap:3px;font-size:14px}
.cbSonucListe div{display:flex;align-items:center;gap:8px;background:#ffffff12;border-radius:10px;padding:3px 10px}
.cbSonucListe div b{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbSonucListe div em{font-style:normal;font-weight:800;color:#7dffb0;min-width:40px;text-align:right}
.cbSonucListe div span{font-weight:800;color:#ffd866;min-width:42px;text-align:right}
.cbSonucListe div.ben{background:#ffd86630}
.cbTuvalDug{position:absolute;left:8px;bottom:8px;display:flex;gap:6px;z-index:2}
.cbTuvalDug button{border:1px solid #0002;border-radius:10px;padding:6px 10px;font:800 13px Nunito,sans-serif;cursor:pointer;background:#ffffffe0;color:#2b2140;box-shadow:0 2px 6px #0003}
.cbTuvalDug button.btnReklam{background:linear-gradient(180deg,#9b85ff,#6a46e0);color:#fff}
.cbRapor{position:absolute;right:6px;top:6px;width:34px;height:34px;border-radius:10px;border:1px solid #0002;background:#ffffffd9;font-size:16px;cursor:pointer;z-index:2}
.cbBekleCiz{font-size:52px;animation:cbSalla 1s ease-in-out infinite alternate}
@keyframes cbSalla{from{transform:rotate(-12deg)}to{transform:rotate(12deg) translateY(-4px)}}

/* araç çubuğu (yalnız çizen) */
.cbArac{grid-area:arac;display:flex;flex-direction:column;gap:5px;align-items:center;min-width:0}
.cbAraclar,.cbPalet{display:flex;gap:4px;flex-wrap:nowrap;justify-content:center;max-width:100%}
.cbAraclar button{width:38px;height:36px;border-radius:10px;border:2px solid #ffffff26;background:#ffffff14;color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center;padding:0}
.cbAraclar button.aktif{border-color:#ffd866;background:#ffd86633}
.cbAraclar button i{display:block;width:var(--b);height:var(--b);border-radius:50%;background:var(--secili,#fff);box-shadow:0 0 0 1px #0006}
.cbAyrac{width:1px;align-self:stretch;background:#ffffff26;margin:0 2px}
.cbSilgiIkon{display:block;width:20px;height:12px;border-radius:3px;background:linear-gradient(90deg,#ff8fb0 0 55%,#fff 55%);transform:rotate(-30deg);box-shadow:0 0 0 1px #0007}
.cbPalet button{width:28px;height:28px;border-radius:50%;border:2px solid #ffffff40;background:var(--c);cursor:pointer;padding:0;flex:0 0 auto}
.cbPalet button.aktif{border-color:#fff;box-shadow:0 0 0 3px #ffd866;transform:scale(1.08)}

/* tahmin akışı ve kutusu */
.cbAkis{grid-area:akis;min-height:0;overflow-y:auto;background:#0b0d2699;border:1px solid #ffffff1a;border-radius:12px;padding:6px 8px;font-size:14px;display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth}
.cbAkis .s{line-height:1.3;word-break:break-word}
.cbAkis .s b{color:#c9c2ff}
.cbAkis .s.dogru{color:#7dffb0;font-weight:800}
.cbAkis .s.yakin{color:#ffcf5a;font-weight:800}
.cbAkis .s.sis{color:#9aa5c9;font-style:italic;font-size:13px}
.cbAkis .s.ben b{color:#ffd866}
.cbAkis .s.yanlis{color:#ff9a9a}
.cbForm{grid-area:form;display:flex;gap:6px}
.cbForm input{flex:1;min-width:0;font:700 17px Nunito,sans-serif;padding:9px 12px;border-radius:12px;border:2px solid #ffffff30;background:#fff;color:#1d1d1f;outline:none}
.cbForm input:focus{border-color:#ffd866}
.cbForm input:disabled{background:#d8d6e8;color:#666}
.cbForm .btn{min-width:52px;font-size:18px}
.cbForm.gizli{display:none}
.cbForm.salla{animation:cbTitre .35s}
@keyframes cbTitre{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* tek oyunculu menü */
.cbMenu{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:12px;overflow:auto;background:radial-gradient(900px 500px at 50% 0,#3a2f86 0%,#1d1a52 55%,#0f1033 100%)}
.cbMenuKutu{width:min(100%,520px);text-align:center;display:flex;flex-direction:column;gap:12px;margin:auto}
.cbLogo{font:900 44px/1 'Baloo 2',Nunito,sans-serif;color:#fff;text-shadow:0 4px 0 #0007;display:flex;justify-content:center;gap:2px;flex-wrap:wrap}
.cbLogo span{display:inline-block;transform:rotate(var(--a));animation:cbZipla 2.4s ease-in-out var(--d) infinite}
.cbLogo span:nth-child(3n+1){color:#ffd866}.cbLogo span:nth-child(3n+2){color:#7dd9ff}.cbLogo span:nth-child(3n){color:#ff8fb0}
.cbLogo .bosluk{width:12px}
@keyframes cbZipla{0%,80%,100%{transform:rotate(var(--a)) translateY(0)}40%{transform:rotate(var(--a)) translateY(-6px)}}
.cbAltBaslik{color:#d9d4ff;font-weight:700;margin:0}
.cbOzet{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cbOzet div{background:#ffffff12;border:1px solid #ffffff1c;border-radius:12px;padding:6px 4px}
.cbOzet small{display:block;color:var(--soluk);font-size:11px;font-weight:800}
.cbOzet b{font:800 20px 'Baloo 2',Nunito,sans-serif}
.cbModlar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cbMod{border:2px solid #ffffff26;background:#ffffff12;color:#fff;border-radius:16px;padding:10px 6px;cursor:pointer;font:800 15px Nunito,sans-serif;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.15}
.cbMod i{font-style:normal;font-size:28px}
.cbMod small{color:var(--soluk);font-size:11px;font-weight:700}
.cbMod.aktif{border-color:#ffd866;background:#ffd86622}
.cbOyna{font-size:20px;padding:14px}
.cbMenuAlt{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.cbMenuAlt .btn{flex:1;min-width:120px}
.cbBasarimlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;text-align:left}
.cbBasarimlar div{background:#ffffff10;border:1px solid #ffffff1c;border-radius:12px;padding:8px;opacity:.5}
.cbBasarimlar div.var{opacity:1;border-color:#ffd866;background:#ffd8661c}
.cbBasarimlar i{font-style:normal;font-size:24px}
.cbBasarimlar b{display:block;font-size:14px}
.cbBasarimlar small{color:var(--soluk);font-size:12px}
.cbSerbestAlt{display:flex;gap:6px;justify-content:center;grid-area:form}
.cbSerbestAlt .btn{flex:1;max-width:220px;white-space:nowrap;padding:10px 12px}

/* online bekleme ekranı */
.onBKlar.cbK8{grid-template-columns:repeat(4,minmax(0,1fr))}
.onBKlar.cbK8 .onBK{padding:6px 4px}.onBKlar.cbK8 .onBK .av{font-size:22px}
.cbAyar{text-align:left;margin:8px 0}
.cbGrup{background:#ffffff0c;border:1px solid #ffffff1a;border-radius:14px;padding:8px 10px;margin-bottom:6px}
.cbGrup>small{display:block;font-weight:800;font-size:11px;letter-spacing:1px;color:var(--soluk);margin-bottom:5px}
.cbSec{display:flex;gap:6px;flex-wrap:wrap}
.cbSec button{flex:1;min-width:64px;border:2px solid #ffffff26;background:#ffffff10;color:#fff;font:800 14px Nunito,sans-serif;padding:8px 8px;border-radius:11px;cursor:pointer}
.cbSec button.aktif{border-color:#ffd866;background:#ffd86630}
.cbSec button:disabled{opacity:.55;cursor:default}
@media (max-width:420px){.onBKlar.cbK8 .onBK b{font-size:12px}}

/* sonuç penceresi */
.cbSonucTablo{width:100%;border-collapse:collapse;margin:6px 0;font-size:14px}
.cbSonucTablo td{padding:5px 6px;border-bottom:1px solid #ffffff14;text-align:left}
.cbSonucTablo td:last-child,.cbSonucTablo td:nth-child(3){text-align:right;font-weight:800}
.cbSonucTablo tr.ben{background:#ffd8661f}
.cbKelimeler{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:6px 0}
.cbKelimeler span{background:#ffffff14;border-radius:99px;padding:2px 9px;font-size:13px;font-weight:700}
.cbKelimeler span.ok{background:#4fd17a33;color:#9dffc4}
.cbKelimeler span.no{background:#ff6b6b26;color:#ffb3b3}

/* ---------- geniş ekran (masaüstü / tablet yatay): oyuncular solda, tuval ortada, akış sağda */
@media (min-width:900px) and (min-height:521px){
  .cbKap{grid-template-columns:200px minmax(0,1fr) 280px;grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"oy ust akis" "oy tuval akis" "oy arac form";padding:10px 14px;gap:8px 12px;--mod:genis}
  .cbOyuncular{flex-direction:column;overflow-x:hidden;overflow-y:auto;align-self:start;max-height:100%}
  .cbOyuncular:empty{display:flex}
  .cbOy{border-radius:12px;padding:6px 10px 6px 6px}
  .cbOy b{max-width:none;flex:1}
  .cbKelime b{font-size:28px}
  .cbArac{flex-direction:row;justify-content:center;flex-wrap:wrap}
  .cbAraclar button{width:40px;height:40px}
  .cbPalet button{width:30px;height:30px}
  .cbAkis{font-size:15px}
}
/* ---------- yatay telefon: araçlar solda (dikey ızgara), tuval ortada, sağda kelime/saat + oyuncular + akış */
@media (orientation:landscape) and (max-height:520px){
  .cbKap{grid-template-columns:auto minmax(0,1fr) minmax(210px,36%);grid-template-rows:auto auto minmax(0,1fr) auto;
    grid-template-areas:"arac tuval ust" "arac tuval oy" "arac tuval akis" "arac tuval form";padding:4px 8px;gap:4px 8px;--mod:yatay}
  .cbKap.yanSol{padding-left:max(8px,env(safe-area-inset-left))}
  .cbSaat{width:40px;height:40px}.cbSaat b{font-size:15px}
  .cbTur{min-width:44px;padding:1px 4px}.cbTur b{font-size:15px}.cbTur small{font-size:9px}
  .cbKelime b{font-size:18px;letter-spacing:3px}.cbKelime small{font-size:10px}
  .cbOy{font-size:12px;padding:1px 8px 1px 2px}.cbOy i{width:20px;height:20px;font-size:12px}
  .cbArac{flex-direction:column;justify-content:center;gap:6px}
  .cbAraclar,.cbPalet{display:grid;grid-template-columns:repeat(4,28px);gap:4px}
  .cbAraclar .cbAyrac{display:none}
  .cbAraclar button{width:28px;height:28px;font-size:14px;border-radius:8px}
  .cbAraclar button i{transform:scale(.8)}
  .cbPalet button{width:28px;height:28px}
  .cbAkis{font-size:13px;padding:4px 6px}
  .cbForm input{padding:6px 10px;font-size:16px}
  .cbForm .btn{padding:6px 10px;min-width:44px}
  .cbKatman{padding:8px;gap:6px}.cbKatman:has(.cbSonucKatman){background:linear-gradient(180deg,#14123c99,#14123ce6 45%)}
.cbSonucKatman{display:none}
.cbKatman h3{font-size:17px}.cbKatman .buyukKelime{font-size:24px}
  .cbSecenek button{min-width:84px;font-size:15px;padding:6px 10px}
  .cbLogo{font-size:32px}.cbMenuKutu{gap:8px}.cbMod{padding:6px 4px}.cbMod i{font-size:22px}.cbOyna{padding:10px}
}
@media (orientation:landscape) and (max-height:520px){
  .onBKlar.cbK8{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin:6px 0}
  .onBKlar.cbK8 .onBK{padding:4px 2px}.onBKlar.cbK8 .onBK .av{font-size:18px}.onBKlar.cbK8 .onBK b{font-size:12px}
  .cbAyar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:4px 0}
  .cbGrup{margin:0;padding:6px}.cbSec button{min-width:0;padding:5px 4px;font-size:13px}
}
@media (orientation:landscape) and (max-height:420px){
  .cbAltBaslik{display:none}
  .cbOzet b{font-size:16px}.cbOzet div{padding:3px}
  .cbLogo{font-size:28px}
  .cbMod{flex-direction:row;justify-content:center;gap:6px;padding:6px}.cbMod i{font-size:20px}.cbMod small{display:none}
  .cbSerbestAlt .btn{font-size:14px;padding:8px 10px}
}
@media (max-width:420px){.cbPalet{gap:3px}.cbPalet button{width:27px;height:27px}}
@media (max-width:380px){.cbPalet button{width:25px;height:25px}.cbAraclar button{width:34px}}
/* alt kenara yapışmasın: iPhone ana çubuğu + parmak payı (tüm yerleşimlerde) */
.cbKap{padding-bottom:calc(max(12px, 4px + env(safe-area-inset-bottom)) + var(--klavye,0px))}