/* ============================================================
   KELİME OYUNU — stüdyo görünümü
   ============================================================ */
:root{
  --blue-0:#02122f;
  --blue-1:#062a63;
  --blue-2:#0b4394;
  --gold-1:#ffe27a;
  --gold-2:#e0a527;
  --red-1:#e01b24;
  --red-2:#8d0d12;
  --ink:#0a1e3d;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}
body{
  font-family:"Trebuchet MS","Segoe UI",Tahoma,sans-serif;
  background:#000;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
}

/* ---------------- Sahne / arka plan ---------------- */
.stage{
  position:relative;
  width:min(100vw, calc(var(--vh, 100vh) * 16 / 9));
  height:min(var(--vh, 100vh), calc(100vw * 9 / 16));
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(30,110,220,.55) 0%, rgba(4,20,52,.92) 60%, #010a1c 100%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.00) 0px,
      rgba(120,180,255,.10) 14px,
      rgba(255,255,255,.00) 30px,
      rgba(10,40,90,.55) 46px,
      rgba(255,255,255,.00) 62px),
    linear-gradient(180deg,var(--blue-2),var(--blue-0));
  container-type:size;
}
.stage::after{ /* vinyet */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 65% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* ---------------- Ses düğmesi ---------------- */
.soundbtn{
  position:absolute; right:2.2%; top:2.5%; z-index:8;
  width:5cqh;height:5cqh;padding:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(2,12,32,.6);
  color:#fff;font-size:2.3cqh;line-height:1;
  cursor:pointer;
  transition:background .15s ease, opacity .15s ease;
}
.soundbtn:hover{background:rgba(20,60,130,.85)}
.soundbtn.muted{opacity:.5}

/* ---------------- Skor paneli ---------------- */
.scorebox{
  position:absolute; left:2.5%; top:9%;
  display:flex;flex-direction:column;gap:.35cqh;
  z-index:4;
}
.chev{
  position:relative;
  min-width:15cqw;
  padding:.6cqh 3.2cqw .6cqh 1.6cqw;
  clip-path:polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%, 12% 50%);
  text-align:center;
  font-weight:bold;
  line-height:1;
  filter:drop-shadow(0 .4cqh .6cqh rgba(0,0,0,.5));
}
.chev span{display:inline-block}
.chev-gold{
  background:linear-gradient(180deg,#fff3c4,var(--gold-2));
  color:#2a1a00; font-size:5.4cqh;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.chev-silver{
  background:linear-gradient(180deg,#ffffff,#b9c3d4);
  color:#0d2246; font-size:3.6cqh;
}

/* ---------------- Tur bilgisi ---------------- */
.roundinfo{
  position:absolute; right:2.5%; top:9%;
  text-align:right; z-index:4;
  text-shadow:0 2px 6px rgba(0,0,0,.7);
}
.roundinfo-len{
  font-size:4cqh;font-weight:bold;letter-spacing:.08em;
  color:var(--gold-1);
}
.roundinfo-sub{
  font-size:2.2cqh;letter-spacing:.18em;color:#cfe0ff;margin-top:.4cqh;
}

/* ---------------- Harf alanı ---------------- */
.board{
  position:absolute; left:0; right:0; top:30%;
  display:flex;flex-direction:column;align-items:center;gap:2.5cqh;
  z-index:3;
}
.hexrow{
  display:flex;justify-content:center;align-items:center;
  gap:.9cqw;
  padding:0 3cqw;
}
.hex{
  --size:9.5cqh;
  position:relative;
  width:calc(var(--size) * .92);
  height:var(--size);
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#ffffff 0%,#d9e2ef 100%);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  filter:drop-shadow(0 .6cqh .8cqh rgba(0,0,0,.45));
  font-size:calc(var(--size) * .52);
  font-weight:bold;
  color:var(--ink);
  transition:transform .15s ease, filter .15s ease;
}
.hex.empty{ background:linear-gradient(180deg,#f7fafe 0%,#c9d5e6 100%); }

/* HARF ALAYIM ile acilan harf */
.hex.revealed{
  background:linear-gradient(180deg,#fff0bd 0%,#e8b53a 100%);
  color:#2b1c00;
}
/* Klavyeden yazilan harf */
.hex.typed{
  background:linear-gradient(180deg,#ffffff 0%,#9fc0ee 100%);
  color:#062a63;
}
.hex.caret{
  filter:drop-shadow(0 0 1.2cqh rgba(255,226,122,.95));
  transform:translateY(-.6cqh);
}
.hex.correct{
  background:linear-gradient(180deg,#d5ffce 0%,#39ad4a 100%);
  color:#062d0c;
}
.hex.wrong{
  background:linear-gradient(180deg,#ffd4d4 0%,#c62828 100%);
  color:#fff;
}
.hex.correct,.hex.wrong{ animation:flipIn .42s ease both; }
@keyframes flipIn{
  0%{transform:rotateX(90deg) scale(.75);opacity:0}
  60%{transform:rotateX(-12deg) scale(1.07);opacity:1}
  100%{transform:rotateX(0) scale(1);opacity:1}
}

/* --- slot makinesi: harf dönerken --- */
.hex.spinning{
  background:linear-gradient(180deg,#ffffff 0%,#ffd98a 100%);
  color:#3a2a00;
  filter:drop-shadow(0 0 1.6cqh rgba(255,205,80,.95));
  animation:spinPulse .16s linear infinite;
}
@keyframes spinPulse{
  0%  {transform:translateY(-.45cqh) scale(1.05)}
  50% {transform:translateY(.45cqh)  scale(.97)}
  100%{transform:translateY(-.45cqh) scale(1.05)}
}
/* --- harf yerine oturunca --- */
.hex.landed{ animation:landFlash .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes landFlash{
  0%  {transform:scale(1.4);  filter:drop-shadow(0 0 2.6cqh rgba(255,226,122,1))}
  55% {transform:scale(.94)}
  100%{transform:scale(1);    filter:drop-shadow(0 .6cqh .8cqh rgba(0,0,0,.45))}
}

.hexrow.shake{animation:shake .4s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-1.4cqw)}
  40%{transform:translateX(1.4cqw)}
  60%{transform:translateX(-.9cqw)}
  80%{transform:translateX(.9cqw)}
}

.feedback{
  min-height:3.4cqh;
  font-size:2.6cqh;letter-spacing:.06em;font-weight:bold;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
  text-align:center;padding:0 3cqw;
}
.feedback.ok{color:#7dff8f}
.feedback.no{color:#ff8a8a}
.feedback.info{color:#ffe27a}

/* ---------------- Süre ---------------- */
.timerwrap{
  position:absolute; left:3%; bottom:26.5%;
  display:flex;align-items:center;gap:1.6cqw;
  z-index:4;
}
.timer{
  background:linear-gradient(180deg,#c4161c,#7d0a0f);
  color:#fff;
  font-size:4.2cqh;font-weight:bold;letter-spacing:.04em;
  padding:.5cqh 3cqw .5cqh 2cqw;
  clip-path:polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  border-top:2px solid rgba(255,255,255,.5);
  filter:drop-shadow(0 .4cqh .6cqh rgba(0,0,0,.55));
}
.timer.warn{animation:pulse .9s infinite}
@keyframes pulse{50%{filter:drop-shadow(0 0 1.4cqh rgba(255,70,70,.95))}}

.answer-timer{
  background:rgba(2,12,32,.75);
  border:1px solid rgba(255,226,122,.55);
  border-radius:.8cqh;
  padding:.5cqh 1.4cqw;
  text-align:center;
  min-width:13cqw;
}
.answer-timer[hidden]{display:none}
.answer-timer.urgent{border-color:#ff5a5a;animation:pulse .6s infinite}
.answer-timer.urgent .answer-timer-num{color:#ff8a8a}
.answer-timer-label{font-size:1.5cqh;letter-spacing:.16em;color:#ffe27a}
.answer-timer-num{font-size:3.2cqh;font-weight:bold;line-height:1.1}
.answer-timer-bar{
  height:.7cqh;background:rgba(255,255,255,.2);border-radius:99px;overflow:hidden;margin-top:.3cqh;
}
.answer-timer-bar i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,#ffe27a,#e01b24);
  transition:width .25s linear;
}

/* ---------------- Soru bandı ---------------- */
.questionbar{
  position:absolute; left:0; right:0; bottom:16%;
  background:linear-gradient(180deg,#e21d24 0%,#9c0d12 100%);
  border-top:.35cqh solid rgba(255,255,255,.75);
  box-shadow:0 -.5cqh 2cqh rgba(0,0,0,.55);
  padding:1.4cqh 4cqw;
  min-height:8cqh;
  display:flex;align-items:center;
  z-index:3;
}
.questionbar-text{
  font-size:2.9cqh;
  font-weight:bold;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-shadow:0 2px 4px rgba(0,0,0,.55);
  line-height:1.25;
}

/* ---------------- Butonlar ---------------- */
.controls{
  position:absolute; left:0; right:0; bottom:1.2%;
  display:grid;
  grid-template-columns:1fr auto 1fr;   /* sol | orta (yuvarlak) | sag */
  align-items:center;
  gap:2cqw;
  padding:0 5cqw;
  z-index:5;
}
.controls .btn-hint{justify-self:end}
.controls .btn-next{justify-self:start}

.btn{
  font-family:inherit;font-weight:bold;
  font-size:2.4cqh;letter-spacing:.08em;
  padding:1.1cqh 2.6cqw;
  border:none;border-radius:.9cqh;
  cursor:pointer;
  color:#fff;
  text-transform:uppercase;
  box-shadow:0 .5cqh 0 rgba(0,0,0,.35), 0 .8cqh 1.6cqh rgba(0,0,0,.4);
  transition:transform .08s ease, filter .15s ease;
}
.btn:hover:not(:disabled){filter:brightness(1.12)}
.btn:active:not(:disabled){transform:translateY(.35cqh);box-shadow:0 .2cqh 0 rgba(0,0,0,.35)}
.btn:disabled{
  background:linear-gradient(180deg,#8a93a3,#5a616e) !important;
  color:#d5d9e0 !important;
  cursor:not-allowed;
  opacity:.75;
  box-shadow:0 .3cqh 0 rgba(0,0,0,.3);
}
.btn-hint{background:linear-gradient(180deg,#ffd75e,#c98a10);color:#2a1a00}
.btn-next{background:linear-gradient(180deg,#3aa0ff,#0f4f9e)}

/* CEVAPLA: yuvarlak, kabartmalı buton */
.btn-answer{
  width:13cqh;height:13cqh;
  padding:0;
  border-radius:50%;
  font-size:1.95cqh;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  background:radial-gradient(circle at 50% 30%, #ff7a80 0%, #ef2a31 45%, #9c0f15 100%);
  border:.5cqh solid rgba(255,255,255,.9);
  text-shadow:0 2px 3px rgba(0,0,0,.55);
  box-shadow:
    0 1cqh 0 #650a0e,
    0 1.6cqh 2.2cqh rgba(0,0,0,.55),
    inset 0 .6cqh 1cqh rgba(255,255,255,.4),
    inset 0 -.7cqh 1.2cqh rgba(0,0,0,.4);
}
.btn-answer:active:not(:disabled){
  transform:translateY(.7cqh);
  box-shadow:
    0 .3cqh 0 #650a0e,
    0 .5cqh 1cqh rgba(0,0,0,.5),
    inset 0 .6cqh 1cqh rgba(255,255,255,.3),
    inset 0 -.7cqh 1.2cqh rgba(0,0,0,.45);
}
.btn-answer:disabled{
  border-color:rgba(255,255,255,.35);
  box-shadow:0 .6cqh 0 rgba(0,0,0,.35), 0 1cqh 1.6cqh rgba(0,0,0,.4);
}

.btn-start{
  background:linear-gradient(180deg,#ffd75e,#c98a10);color:#2a1a00;
  font-size:3cqh;padding:1.6cqh 4cqw;margin-top:2.5cqh;
}
/* harf alayım butonu gizlenirken düzen kaymasın */
.btn.invisible{visibility:hidden;pointer-events:none}

/* ---------------- Görünmez klavye alanı ---------------- */
.ghost-input{
  position:absolute;opacity:0;
  left:50%;bottom:35%;width:1px;height:1px;
  border:none;outline:none;font-size:16px;   /* iOS'ta otomatik zoom olmasın */
}

/* ---------------- Overlay ekranlar ---------------- */
.overlay{
  position:absolute;inset:0;z-index:20;
  background:rgba(2,10,28,.88);
  backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
}
.overlay[hidden]{display:none}
.overlay-card{
  width:76%;max-height:88%;overflow:auto;
  text-align:center;
  padding:3cqh 3cqw;
  background:linear-gradient(180deg,rgba(10,40,95,.9),rgba(3,14,38,.95));
  border:1px solid rgba(255,226,122,.4);
  border-radius:1.6cqh;
  box-shadow:0 2cqh 5cqh rgba(0,0,0,.6);
}
.overlay-card h1{
  font-size:7cqh;letter-spacing:.06em;line-height:1;
  color:var(--gold-1);text-shadow:0 .5cqh 1cqh rgba(0,0,0,.6);
}
.overlay-card h1 span{display:block;color:#fff;font-size:5cqh;letter-spacing:.3em}
.overlay-card h2{font-size:4.4cqh;color:var(--gold-1);letter-spacing:.08em}
.rules{
  list-style:none;margin:3cqh auto 0;max-width:60cqw;text-align:left;
  font-size:2.2cqh;line-height:1.7;color:#dbe7ff;
}
.rules li{margin-bottom:.6cqh;padding-left:1.6cqw;position:relative}
.rules li::before{content:"\25B8";position:absolute;left:0;color:var(--gold-1)}
.rules b{color:#fff}
.startmeta{margin-top:1.8cqh;font-size:1.7cqh;color:#9fc0ee;letter-spacing:.04em}
.startmeta a{color:var(--gold-1);text-decoration:none;border-bottom:1px dotted}
.startmeta a:hover{color:#fff}
.finalscore{margin:2cqh 0 1cqh;font-size:9cqh;font-weight:bold;color:#fff;line-height:1}
.finalscore small{display:block;font-size:2.2cqh;letter-spacing:.35em;color:#9fc0ee}
.summary{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.5cqh 2cqw;
  font-size:2cqh;text-align:left;margin-top:1.5cqh;
}
.summary div{
  display:flex;justify-content:space-between;gap:1cqw;
  padding:.4cqh .8cqw;border-radius:.4cqh;background:rgba(255,255,255,.06);
}
.summary .w{color:#dbe7ff}
.summary .p{font-weight:bold}
.summary .p.zero{color:#ff8a8a}
.summary .p.win{color:#7dff8f}

/* ============================================================
   MOBİL / DAR EKRAN
   Sahne tüm ekranı kaplar; yükseklik görünen alandan (--vh)
   gelir, böylece klavye açılınca her şey orantılı küçülür.
   ============================================================ */
@media (max-width:820px){
  .stage{width:100vw;height:var(--vh, 100vh)}

  .soundbtn{width:8cqw;height:8cqw;font-size:4cqw;right:3%;top:1.5%}

  .scorebox{top:7%;left:3%}
  .chev{min-width:30cqw;padding:.5cqh 6cqw .5cqh 3cqw}
  .chev-gold{font-size:max(3.2cqh, 17px)}
  .chev-silver{font-size:max(2.2cqh, 12px)}

  .roundinfo{top:7%;right:3%}
  .roundinfo-len{font-size:max(2.4cqh, 13px)}
  .roundinfo-sub{font-size:max(1.4cqh, 9px)}

  .board{top:34%;gap:1.6cqh}
  .hexrow{gap:1.4cqw;padding:0 2cqw}
  .feedback{font-size:max(1.8cqh, 12px);min-height:max(2.4cqh, 16px)}

  .timerwrap{bottom:29%;left:4%;gap:3cqw}
  .timer{font-size:max(3cqh, 17px);padding:.5cqh 6cqw .5cqh 4cqw}
  .answer-timer{min-width:28cqw;padding:.5cqh 3cqw}
  .answer-timer-label{font-size:max(1.2cqh, 8px)}
  .answer-timer-num{font-size:max(2.4cqh, 14px)}

  .questionbar{bottom:18%;padding:1.4cqh 5cqw;min-height:7cqh}
  .questionbar-text{font-size:max(2cqh, 13px)}

  .controls{padding:0 3cqw;gap:2cqw;bottom:2%}
  .btn{font-size:max(1.6cqh, 11px);padding:1cqh 3cqw;letter-spacing:.03em}
  .btn-answer{width:max(11cqh, 62px);height:max(11cqh, 62px);font-size:max(1.5cqh, 10px)}

  .overlay-card{width:94%;padding:3cqh 5cqw}
  .overlay-card h1{font-size:5.5cqh}
  .overlay-card h1 span{font-size:3.6cqh}
  .rules{max-width:none;font-size:1.8cqh;margin-top:2cqh}
  .rules li{padding-left:4cqw}
  .summary{grid-template-columns:1fr;font-size:1.8cqh}
  .finalscore{font-size:7cqh}
}

/* Klavye açıkken: üst bilgi şeridi küçülsün, harfler ve soru öne çıksın */
body.kb-open .scorebox{opacity:.5;transform:scale(.8);transform-origin:left top}
body.kb-open .roundinfo{opacity:.5}
body.kb-open .board{top:22%}

@media (max-width:820px){
  /* dar ekranda klavye yerin yarısını yiyor: harfleri yukarı çek, araları sıkıştır */
  body.kb-open .board{top:16%;gap:.8cqh}
  body.kb-open .timerwrap{bottom:36%}
  body.kb-open .questionbar{bottom:20%;min-height:0;padding:1cqh 4cqw}
  body.kb-open .controls{bottom:2%}
}

/* sürüm etiketi (başlangıç ekranı) */
.startmeta .ver{
  color:var(--gold-1);font-weight:bold;letter-spacing:.08em;
}