/* Dolunay Köyü - online sosyal çıkarım oyunu */
.onOyun{background:#070a1c}
.dkKap{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;background:#070a1c;color:#eef1fb}
.dkSol{display:flex;flex-direction:column;flex:0 0 auto;min-height:0}
.dkSahne{position:relative;height:clamp(250px,45vh,420px);overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.dkSahne canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.dkOyunda #onSohbet{display:none}

/* faz başlığı */
.dkFaz{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:5;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2px 9px;min-width:min(300px,78%);
  padding:6px 12px 7px;border-radius:16px;background:linear-gradient(180deg,#141a3ce6,#0b0f28e6);border:1px solid #ffffff22;box-shadow:0 8px 26px #0008, inset 0 1px 0 #ffffff18;pointer-events:none}
.dkFazIkon{font-size:24px;grid-row:span 2;filter:drop-shadow(0 0 8px #fff6)}
.dkFazMetin{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.dkFazMetin b{font:800 17px 'Baloo 2',Nunito,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkFazMetin small{font:700 12px Nunito,sans-serif;color:#b8c2ea}
.dkSayac{font:800 22px 'Baloo 2',Nunito,sans-serif;color:#ffe08a;grid-row:span 2;min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.dkSayac.az{color:#ff7b7b;animation:dkNabiz .6s infinite alternate}
.dkSure{grid-column:1/4;height:4px;border-radius:9px;background:#ffffff1c;overflow:hidden;margin-top:3px}
.dkSure i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8b7dff,#e0a3ff);border-radius:9px;transition:width .25s linear}
.dkFaz.gece .dkSure i{background:linear-gradient(90deg,#4d6bff,#a8b8ff)}
.dkFaz.oy .dkSure i{background:linear-gradient(90deg,#ffb347,#ff6b6b)}
@keyframes dkNabiz{to{transform:scale(1.12)}}

.dkRolBtn{position:absolute;left:8px;top:8px;z-index:6;display:flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:99px;border:1px solid #ffffff30;
  background:#0d1230d9;color:#fff;font:800 13px Nunito,sans-serif;cursor:pointer;box-shadow:0 4px 14px #0007;max-width:42%}
.dkRolBtn span{font-size:20px;line-height:1}
.dkRolBtn b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkGunlukBtn{position:absolute;right:8px;top:8px;z-index:6;width:38px;height:38px;border-radius:50%;border:1px solid #ffffff30;background:#0d1230d9;color:#fff;font-size:18px;cursor:pointer;box-shadow:0 4px 14px #0007}

/* aksiyon çubuğu */
.dkAksiyon{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px 10px;min-height:58px;background:linear-gradient(180deg,#11163a,#0b0f27);border-top:1px solid #2b3570;border-bottom:1px solid #2b3570}
.dkIpucu{font:800 15px Nunito,sans-serif;color:#e8ecff;text-align:center}
.dkIpucu small{display:block;font-weight:700;font-size:12.5px;color:#a9b4de;margin-top:1px}
.dkAksiyon .btn{padding:10px 16px;font-size:15.5px;min-height:44px}
.dkAksiyon .dkEvet{background:linear-gradient(180deg,#3ccf7c,#22995a);color:#fff}
.dkAksiyon .dkHayir{background:linear-gradient(180deg,#f06464,#bd3a3a);color:#fff}
.dkAksiyon .btn.secili{outline:3px solid #ffe08a;outline-offset:2px}
.dkCipler{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;width:100%}
.dkCip{font:800 12px Nunito,sans-serif;padding:2px 9px;border-radius:99px;background:#1f2a5c;border:1px solid #3b4a8c;color:#e8ecff;white-space:nowrap}
.dkCip.v{background:#4a1424;border-color:#c43a55;color:#ffd0d8}
.dkCip.t{background:#123a26;border-color:#2f9a5d;color:#c8f7da}

/* yan panel: sohbet */
.dkYan{flex:1;min-height:150px;display:flex;flex-direction:column;background:#0b1024;position:relative}
.dkSekmeler{display:flex;gap:4px;padding:6px 8px 0;background:#0e1430;border-bottom:1px solid #2b3570;overflow-x:auto;scrollbar-width:none}
.dkSekmeler button{position:relative;flex:0 0 auto;border:1px solid #2b3570;border-bottom:0;background:#141b40;color:#b8c2ea;font:800 13px Nunito,sans-serif;padding:7px 12px;border-radius:10px 10px 0 0;cursor:pointer}
.dkSekmeler button.aktif{background:#1d2656;color:#fff;box-shadow:inset 0 2px 0 var(--vurgu)}
.dkSekmeler button.vamp.aktif{box-shadow:inset 0 2px 0 #e0435b}
.dkSekmeler button.ruh.aktif{box-shadow:inset 0 2px 0 #8fd3ff}
.dkSekmeler i{position:absolute;top:-6px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:#ef4444;color:#fff;font:800 11px/18px Nunito,sans-serif;font-style:normal;padding:0 4px}
.dkMesajlar{flex:1;min-height:0;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin}
.dkMesajlar.vamp{background:radial-gradient(ellipse at top,#2a0c18,#0b1024 70%)}
.dkMesajlar.ruh{background:radial-gradient(ellipse at top,#0f2a3d,#0b1024 70%)}
.dkMsj{align-self:flex-start;max-width:88%;background:#1f2b58;border-radius:12px 12px 12px 4px;padding:5px 10px;display:flex;flex-direction:column;animation:dkGir .25s ease}
.dkMsj.ben{align-self:flex-end;background:#3b2f86;border-radius:12px 12px 4px 12px}
.dkMsj.bot{background:#1a2347}
.dkMsj.vamp{background:#4a1626}.dkMsj.vamp.ben{background:#6b1d33}
.dkMsj.ruh{background:#123349}.dkMsj.ruh.ben{background:#1b4b6b}
.dkMsj b{font-size:12px;color:#a8c4ff}
.dkMsj.ben b{color:#ffe08a}
.dkMsj span{color:#fff;font-size:15px;overflow-wrap:anywhere}
.dkMsj small{align-self:flex-end;font-size:10px;color:#9fb0e0}
.dkMsj small .cvBtn{font-size:11px;background:none;border:0;color:#9fd0ff;cursor:pointer;padding:0 0 0 4px;font-weight:800}
.dkMsj small .skMsjBtn{color:#cfd6f2}
.dkSis{align-self:center;max-width:94%;text-align:center;font:800 12.5px Nunito,sans-serif;color:#d9def7;background:#ffffff10;border:1px solid #ffffff18;border-radius:99px;padding:4px 12px;animation:dkGir .3s ease}
.dkSis.olum{color:#ffd5dc;background:#4a142433;border-color:#c43a5544}
.dkBos{color:#8f9bc4;text-align:center;font-size:13px;margin:auto 0;padding:10px}
.dkYaz{display:flex;gap:6px;padding:6px 8px;border-top:1px solid #2b3570;background:#0e1430;position:relative}
.dkYaz input{flex:1;min-width:0;background:#070b1c;border:1px solid #3b4d8a;color:#fff;border-radius:10px;padding:9px 10px;font:600 16px Nunito,sans-serif}
.dkYaz input:disabled{opacity:.55}
.dkYaz .emDugme{flex:0 0 auto;width:38px;border-radius:10px;border:1px solid #3b4d8a;background:#141b40;font-size:18px;cursor:pointer;color:#fff}
.dkYaz .emDugme.cevrildi{background:#1e3a5f;border-color:#60a5fa}
.dkYaz .btn{padding:6px 14px}
@keyframes dkGir{from{opacity:0;transform:translateY(6px)}}

/* kart katmanı (rol kartı, sabah duyurusu) */
.dkKart{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:10px;background:radial-gradient(ellipse at center,#05071acc,#05071af2);perspective:1100px;cursor:pointer;animation:dkSoluk .35s ease}
@keyframes dkSoluk{from{opacity:0}}
.dkRolKart{width:min(270px,64vw);aspect-ratio:5/7.4;max-height:calc(100% - 16px);position:relative;transform-style:preserve-3d;animation:dkCevir 1.1s cubic-bezier(.3,1.4,.5,1) .15s both}
.dkRolKart.hemen{animation:none;transform:rotateY(180deg)}
@keyframes dkCevir{from{transform:rotateY(0) scale(.7)}60%{transform:rotateY(200deg) scale(1.04)}to{transform:rotateY(180deg) scale(1)}}
.dkRolKart>div{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 20px 50px #000c}
.dkRolArka{background:radial-gradient(circle at 50% 38%,#f8f1d0 0 13%,#e8dca6 14%,transparent 15%),repeating-conic-gradient(from 0deg at 50% 38%,#1c2156 0 10deg,#232a68 10deg 20deg);border:6px solid #c9a95a;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:16%;font:800 18px 'Baloo 2',Nunito,sans-serif;color:#e8dca6;letter-spacing:2px}
.dkRolArka::before,.dkRolOn::before{content:'';position:absolute;inset:8px;border:2px solid #f0d78c88;border-radius:12px;pointer-events:none}
.dkRolOn{transform:rotateY(180deg);background:linear-gradient(170deg,var(--r1),var(--r2));border:6px solid #d9b866;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10% 9% 7%;gap:6px}
.dkRolOn::after{content:'✦';position:absolute;top:12px;left:16px;color:#f0d78c;font-size:14px;text-shadow:calc(min(270px,64vw) - 46px) 0 0 #f0d78c}
.dkRolMadalya{width:38%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(36px,11vw,64px);background:radial-gradient(circle at 40% 35%,#ffffff55,#ffffff10 60%,#0003);border:3px solid #f0d78c;box-shadow:0 0 30px var(--r3),inset 0 0 18px #0006;flex:0 0 auto}
.dkRolOn h3{margin:4px 0 0;font:800 clamp(20px,6vw,26px) 'Baloo 2',Nunito,sans-serif;color:#fff;text-shadow:0 2px 8px #0008}
.dkRolTaraf{font:800 12px Nunito,sans-serif;padding:2px 10px;border-radius:99px;background:#0005;color:#ffe9a8}
.dkRolOn p{margin:2px 0 0;font:700 clamp(11.5px,3.2vw,13.5px)/1.35 Nunito,sans-serif;color:#f4f1ff;flex:0 1 auto;min-height:0;overflow:auto}
.dkRolOn p+p{flex:0 0 auto;font-size:12.5px;color:#ffd0d8}
.dkRolOn .dkKucuk{margin-top:auto;font-size:11px;color:#ffffffaa}
.dkDuyuru{width:min(420px,94%);max-height:calc(100% - 10px);overflow:auto;border-radius:20px;padding:16px 18px 14px;text-align:center;background:linear-gradient(180deg,var(--d1,#2b2f6b),var(--d2,#11143a));border:2px solid #ffffff30;box-shadow:0 24px 60px #000d;animation:dkDuyuru .7s cubic-bezier(.2,1.5,.5,1)}
@keyframes dkDuyuru{from{transform:translateY(-30px) scale(.85);opacity:0}}
.dkDuyuru .ikon{font-size:46px;line-height:1;filter:drop-shadow(0 0 14px #fff8)}
.dkDuyuru h3{margin:6px 0 4px;font:800 22px 'Baloo 2',Nunito,sans-serif;color:#fff}
.dkDuyuru p{margin:4px 0;font:700 15px/1.4 Nunito,sans-serif;color:#eef}
.dkDuyuru .rolEtiket{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 12px;border-radius:99px;background:#0006;border:1px solid #ffffff33;font:800 14px Nunito,sans-serif}
.dkDuyuru small{display:block;margin-top:8px;color:#ffffff99;font-size:11.5px}

/* bekleme ekranı ek ayarlar */
.onBKlar.k6,.onBKlar.k8{grid-template-columns:repeat(4,minmax(0,1fr))}
.onBKlar.k10,.onBKlar.k12,.onBKlar.k16{grid-template-columns:repeat(4,minmax(0,1fr))}
.onBKlar.k10 .onBK,.onBKlar.k12 .onBK,.onBKlar.k16 .onBK{padding:5px 3px}
.onBKlar.k10 .av,.onBKlar.k12 .av,.onBKlar.k16 .av{font-size:20px}
.onBKlar.k10 small,.onBKlar.k12 small,.onBKlar.k16 small{display:none}
@media (max-width:420px){.onBKlar.k6,.onBKlar.k8{grid-template-columns:repeat(3,minmax(0,1fr))}.onBK small{font-size:10.5px}}
.onKoltuklar.k8{grid-template-columns:repeat(4,minmax(0,1fr))}
.dkAyar{margin:4px 0 12px;padding:10px;border-radius:14px;background:#0d1328;border:1px solid var(--cizgi);text-align:left}
.dkAyar h4{margin:0 0 6px;font:800 14px Nunito,sans-serif;color:#d8c8ff}
.dkSatir{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:5px 0}
.dkSatir>span{font:800 12.5px Nunito,sans-serif;color:var(--soluk);min-width:92px}
.dkSatir button{border:1px solid #3b4a8c;background:#141b40;color:#dfe5ff;font:800 13px Nunito,sans-serif;padding:5px 10px;border-radius:9px;cursor:pointer}
.dkSatir button.aktif{background:#5b3fd1;border-color:#b993ff;color:#fff}
.dkSatir button:disabled{cursor:default;opacity:.8}
.dkDagilim{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.dkDagilim span{font:800 12.5px Nunito,sans-serif;background:#1d2450;border:1px solid #34408a;border-radius:99px;padding:3px 9px;color:#fff}
.dkHazirKap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.dkHazirBtn.aktif{background:linear-gradient(180deg,#3ccf7c,#22995a)!important;color:#fff}
.onBK.hazir{border-color:#3ccf7c;box-shadow:0 0 0 1px #3ccf7c inset}
.onBK.hazir .av::after{content:'✓';font-size:13px;color:#3ccf7c;margin-left:2px}

/* sonuç */
.dkSonuc{text-align:center}
.dkSonuc .bas{font:800 24px 'Baloo 2',Nunito,sans-serif;color:#fff;margin:4px 0}
.dkSonucListe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:10px 0;text-align:left}
.dkSonucListe div{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:10px;background:#0d1328;border:1px solid var(--cizgi);font:700 13px Nunito,sans-serif;min-width:0}
.dkSonucListe div.kaz{border-color:#d9b866;background:#2a2410}
.dkSonucListe div.olu{opacity:.72}
.dkSonucListe b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.dkSonucListe em{font-style:normal;color:#ffe08a;font-weight:800}
.dkSonucListe .e{font-size:18px}
.dkSonucOzet{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:6px 0}
.dkSonucOzet div{background:#0d1328;border:1px solid var(--cizgi);border-radius:12px;padding:6px 12px}
.dkSonucOzet small{display:block;color:var(--soluk);font-weight:800;font-size:11px}
.dkSonucOzet b{font:800 20px 'Baloo 2',Nunito,sans-serif;color:var(--vurgu)}
.dkRoller{width:100%;border-collapse:collapse;font-size:13.5px;text-align:left}
.dkRoller td{padding:5px 6px;border-bottom:1px solid #ffffff12;vertical-align:top}
.dkRoller td:first-child{font-size:22px;width:34px;text-align:center}
.dkLog{max-height:38vh;overflow:auto;text-align:left;font-size:13.5px;margin:0;padding-left:18px}
.dkLog li{margin:3px 0}

/* masaüstü: sohbet yanda */
@media (min-width:900px) and (min-height:500px){
  .dkKap{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,28vw,370px)}
  .dkSol{min-height:0;height:100%}
  .dkSahne{flex:1;height:auto;min-height:0}
  .dkYan{border-left:1px solid #2b3570;min-height:0}
  .dkFaz{min-width:320px}
  .dkFazMetin b{font-size:19px}
}
/* yatay telefon */
@media (max-height:500px) and (orientation:landscape){
  .dkKap{display:grid;grid-template-columns:minmax(0,1fr) 300px}
  .dkSol{height:100%}
  .dkSahne{flex:1;height:auto}
  .dkAksiyon{min-height:48px;padding:4px 8px}
}

/* sayfa kabuğu, hazır mesajlar, yardım akışı */
.oAlan>.dkKap{height:100%}
.dkOyunda .onSohbetPanel{display:none!important}
.dkHizli{display:flex;gap:6px;overflow-x:auto;padding:6px 8px;border-top:1px solid #2b3570;background:#0b1024;scrollbar-width:none}
.dkHizli:empty{display:none}
.dkHizli button{flex:0 0 auto;background:#1a2250;border:1px solid #3b4a8c;color:#e8ecff;border-radius:99px;padding:5px 11px;font:800 12.5px Nunito,sans-serif;cursor:pointer;white-space:nowrap}
.dkHizli button:active{transform:scale(.96)}
.dkAkis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;margin:8px 0 4px}
.dkAkis div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;padding:8px 6px;border-radius:12px;background:linear-gradient(180deg,#1b2150,#10143a);border:1px solid #2f3a7a}
.dkAkis span{font-size:26px;line-height:1.1}
.dkAkis b{font:800 13.5px Nunito,sans-serif;color:#fff}
.dkAkis small{font-size:12px;color:#b8c2ea;line-height:1.3}
.dkBekle{width:min(620px,100%)}
.dkBekle h3{margin-bottom:6px}
.dkBekle .onBKlar{margin:6px 0 10px}
.onKoltuklar.k8{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:899px){.dkSahne{height:clamp(260px,50vh,470px)}}
@media (max-width:600px){
  .dkFaz{min-width:0;top:6px;padding:5px 10px 6px}
  .dkFazMetin b{font-size:16px}
  .dkFaz{left:52px;right:52px;width:auto;transform:none}
  .dkRolBtn{width:38px;height:38px;padding:0;justify-content:center;border-width:2px}
  .dkRolBtn b{display:none}
  .dkBekle{padding:12px 10px}
  .dkBekle .onBKlar{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .dkBekle .onBK{padding:5px 2px;border-radius:10px}
  .dkBekle .onBK .av{font-size:20px}
  .dkBekle .onBK b{font-size:12px}
  .dkBekle .onBK small{font-size:10px}
  .dkSatir{gap:4px}
  .dkSatir>span{min-width:74px;font-size:12px}
  .dkSatir button{padding:4px 8px;font-size:12px}
}