/* Görev: /daily OYUN yüzeyi — slot tahtası (3 katmanlı tile + grup numarası kuyusu), ekran
   klavyesi (candy cap + 2 nav tuşu + durum sözlüğü), can gem'leri, ipucu rafı.
   Kaynak parite: scripts/templates/playable/{style-board,style-keyboard}.css ← oyunun
   CryptogramViewStyles + KeyboardViewStyles + TopBarMistakes bileşenleri. Renkler
   scripts/lib/playable-brand.js'ten BİREBİR (o da oyunun token dosyalarının aynası).
   Bağımlılıklar: daily.css (sayfa token'ları) ÖNCE yüklenir. */

:root {
  /* Marka (playable-brand.js birebir) */
  --p2: #A99BD4; --p3: #7B6DB5; --p4: #5A4D8D;
  --gold: #F2C94C; --gold-mid: #D4A830; --gold-deep: #A8841F;
  --green: #8BBF4A; --err-red: #D45B5B;
  /* Slot tile (PuzzleTokens) */
  --tile-top: #FFFBF4; --tile-bot: #F3E7D5; --tile-ring: #D9B96A;
  --well-top: #F1E2CC; --well-bot: #E9D6BB; --well-num: #9A7B4E;
  --sel-top: #F4EEFC; --sel-bot: #E6DEF6; --sel-glow: rgba(123, 109, 181, .6);
  --hl-top: #EFE9F8; --hl-bot: #E2D9F3; --hl-ring: #B0A2DC; --hl-lip: #B7A9DE;
  --hl-foot-top: #C4B7E4; --hl-foot-border: #9080C6;
  --rev-bot: #F6EFE2; --rev-foot-top: #F2E6D3; --rev-foot-bot: #EADBC4; --rev-num: #B7A48A;
  --rev-ch: #5A4D8D;
  --solved-top: #FFF6D8; --solved-bot: #FCE9A8; --solved-ch: #7A5A12; --slot-border-gold: #C99A2E;
  --word-pill-bot: #FBF4EA; --word-pill-rim: #FFE9A8; --word-pill-lip: #E8D8C2;
  /* Klavye (KeyboardTokens) */
  --kb-bg-top: #EFE0CC; --kb-bg-bot: #EAD9C6;
  --key-top: #FFFDF8; --key-mid: #FBF2E2; --key-bot: #F3E6D1;
  --key-ring: rgba(168, 132, 31, .22); --key-text: #5A4A8C; --key-lip: #E0CAA0;
  --key-used-top: #DFD2BE; --key-used-bot: #CDBCA2; --key-used-text: #A89274;
  --key-wrong-top: #EC9A9A; --key-wrong-mid: #D85555; --key-wrong-bot: #B33B3B; --key-wrong-lip: #8C2424;
  --key-revealed-text: #7B6DB5; --key-nav-lip: #3A3070;
  /* Can gem'i (TopBarTokens MISTAKE_X_*) */
  --gem-light: #FF8A7A; --gem-mid: #E0584F; --gem-dark: #A8322B;
  --gem-used-light: #8A7A64; --gem-used-mid: #6E5C46; --gem-used-dark: #4E3E2C;
  /* Ölçüler: tile ~ oyunun 412px cihaz ölçüsüne oturur, 320-430 arası oranla taşınır */
  --tw: clamp(24px, 6.8vw, 34px);
  --face-h: calc(var(--tw) * 1.08);
  --foot-h: calc(var(--tw) * .46);
  --th: calc(var(--face-h) + var(--foot-h));
  --kh: clamp(44px, 11.5vw, 54px);
}

/* ══════════ SLOT TAHTASI ══════════ */
.board {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 10px 18px; max-width: 100%; margin: 12px 0 4px; min-height: var(--th);
}
.board.shake { animation: boardShake .36s cubic-bezier(.36, .07, .19, .97); }
@keyframes boardShake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); }
}
.word {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  border-radius: 13px; transition: gap .26s ease, background .3s ease, box-shadow .3s ease;
}
/* Kelime tamamlanınca tek parça "pill" olur (prod .word.solved) */
.word.solved {
  gap: 0; background: linear-gradient(180deg, #fff, var(--word-pill-bot));
  box-shadow: 0 0 0 1.5px var(--word-pill-rim), 0 0 0 2.5px rgba(168, 132, 31, .18),
              inset 0 2px 0 rgba(255, 255, 255, .9), 0 3px 0 var(--word-pill-lip),
              0 6px 12px rgba(74, 52, 38, .16);
}
.word.solved .tile { background: transparent !important; box-shadow: none !important; }
.word.solved .foot { flex-basis: 0 !important; opacity: 0; }
.word.solved .tile.highlighted-solved .foot {
  flex-basis: var(--foot-h) !important; opacity: 1;
  background: linear-gradient(180deg, var(--gold), var(--gold-mid));
  border-top-color: var(--slot-border-gold);
}
.word.solved .tile.highlighted-solved .foot .n { color: #fff; text-shadow: 0 1px 2px rgba(120, 75, 8, .5); }

.slot { height: var(--th); display: flex; align-items: center; cursor: pointer; }
.tile {
  width: var(--tw); border-radius: calc(var(--tw) * .26); overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--tile-top), var(--tile-bot));
  box-shadow: 0 0 0 1.5px var(--gold-deep), inset 0 1.5px 0 rgba(255, 255, 255, .9),
              0 3px 0 var(--tile-ring), 0 4px 6px rgba(74, 52, 38, .14);
  transition: box-shadow .16s, background .16s, transform .12s;
}
/* Harf rengi .ch üzerinde, .face ŞEFFAF — prod CryptogramViewStyles kuralı (özgüllük savaşı) */
.face {
  position: relative; overflow: hidden; flex: 0 0 var(--face-h);
  display: grid; place-items: center;
  font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800;
  font-size: calc(var(--tw) * .68); color: transparent; line-height: 1;
}
/* Cap'in üst yarısındaki cam parlaması — oyunun kabarık hissinin ana katmanı */
.face::before {
  content: ""; position: absolute; top: 3px; left: 5px; right: 5px; height: 42%;
  border-radius: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent);
  pointer-events: none; z-index: 0;
}
.face .ch { position: relative; z-index: 1; }
.foot {
  flex: 0 0 var(--foot-h); overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--well-top), var(--well-bot));
  border-top: 1px solid rgba(168, 132, 31, .28);
  box-shadow: inset 0 2px 3px rgba(120, 75, 8, .14);
  transition: flex-basis .26s ease, opacity .26s ease, box-shadow .2s;
}
.foot .n { font-size: calc(var(--tw) * .355); font-weight: 800; color: var(--well-num); line-height: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }

.tile.selected {
  background: linear-gradient(180deg, var(--sel-top), var(--sel-bot));
  box-shadow: 0 0 0 2.5px var(--gold), 0 0 0 4px var(--gold-deep),
              inset 0 1.5px 0 rgba(255, 255, 255, .95), 0 3px 0 var(--p4), 0 0 18px 3px var(--sel-glow);
}
.tile.selected .foot {
  background: linear-gradient(180deg, var(--p2), var(--p3) 55%, var(--p4));
  border-top-color: var(--p4);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .28), inset 0 -1px 0 rgba(255, 255, 255, .18);
}
.tile.selected .foot .n { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.tile.highlighted {
  background: linear-gradient(180deg, var(--hl-top), var(--hl-bot));
  box-shadow: 0 0 0 1.5px var(--hl-ring), inset 0 1.5px 0 rgba(255, 255, 255, .9),
              0 3px 0 var(--hl-lip), 0 4px 6px rgba(74, 52, 38, .14);
}
.tile.highlighted .foot {
  background: linear-gradient(180deg, var(--hl-foot-top), var(--p2));
  border-top-color: var(--hl-foot-border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .20), inset 0 -1px 0 rgba(255, 255, 255, .2);
}
.tile.highlighted .foot .n { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.tile.revealed { background: linear-gradient(180deg, #fff, var(--rev-bot)); }
.tile.revealed .foot {
  background: linear-gradient(180deg, var(--rev-foot-top), var(--rev-foot-bot));
  border-top-color: rgba(168, 132, 31, .16);
  box-shadow: inset 0 1px 2px rgba(120, 75, 8, .10);
}
.tile.revealed .foot .n { color: var(--rev-num); text-shadow: none; }
.tile.revealed .face .ch { color: var(--rev-ch); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); animation: chPop .3s cubic-bezier(.2, 1.5, .5, 1); }
@keyframes chPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.tile.revealed.highlighted-solved {
  background: linear-gradient(180deg, var(--solved-top), var(--solved-bot)) !important;
  box-shadow: 0 0 0 2.5px var(--gold), 0 0 0 4px var(--gold-deep),
              inset 0 1.5px 0 rgba(255, 255, 255, .95), 0 0 18px 3px rgba(242, 201, 76, .85) !important;
}
.tile.revealed.highlighted-solved .face .ch { color: var(--solved-ch); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.tile.err {
  animation: tileShake .36s cubic-bezier(.36, .07, .19, .97);
  box-shadow: 0 0 0 2.5px var(--err-red), 0 0 0 4px rgba(212, 91, 91, .4), 0 3px 0 var(--key-wrong-lip) !important;
}
@keyframes tileShake {
  10%, 90% { transform: translateX(-1px) rotate(-1deg); } 20%, 80% { transform: translateX(2px) rotate(1.5deg); }
  30%, 50%, 70% { transform: translateX(-4px) rotate(-2deg); } 40%, 60% { transform: translateX(4px) rotate(2deg); }
}

/* ══════════ CAN GEM'LERİ (header) ══════════ */
.gems-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.gems-label {
  font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: 8px;
  letter-spacing: .08em; text-transform: uppercase; color: #9A7B4E; line-height: 1;
}
.gems { display: inline-flex; gap: 4px; }
.gems .x { width: 22px; height: 22px; display: inline-block; }
.gems .x svg { width: 100%; height: 100%; display: block; }
.gems .x .x-ring { fill: #fff; }
.gems .x .x-gloss { fill: rgba(255, 255, 255, .35); }
.gems .x .x-mark { stroke: #fff; stroke-width: 3; stroke-linecap: round; fill: none; }
.gems .x.active .g-light { stop-color: var(--gem-light); }
.gems .x.active .g-mid { stop-color: var(--gem-mid); }
.gems .x.active .g-dark { stop-color: var(--gem-dark); }
.gems .x.used .x-ring { fill: rgba(255, 255, 255, .4); }
.gems .x.used .g-light { stop-color: var(--gem-used-light); }
.gems .x.used .g-mid { stop-color: var(--gem-used-mid); }
.gems .x.used .g-dark { stop-color: var(--gem-used-dark); }
.gems .x.lost { animation: gemPop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes gemPop { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }
.gems .x.danger { animation: gemDanger 1.1s ease-in-out infinite; }
@keyframes gemDanger { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* ══════════ İPUCU RAFI ══════════ */
.dhintbar { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.hbtn {
  font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: .92rem;
  border: 0; cursor: pointer; border-radius: 999px; padding: 10px 16px;
  transition: transform .12s, opacity .2s;
}
.hbtn:active { transform: translateY(2px); }
.hbtn[disabled] { opacity: .4; cursor: default; transform: none; }
.hbtn--sentence { background: var(--gold); color: #4A3426; box-shadow: 0 3px 0 var(--gold-mid); }
.hbtn--letter { background: var(--green); color: #fff; box-shadow: 0 3px 0 #6FA033; }
.hbtn--letter b { font-weight: 800; opacity: .85; }

/* ══════════ EKRAN KLAVYESİ ══════════
   .key = DOKUNMA alanı (aralıksız, flex:1) · .key-letter = GÖRÜNEN cap (prod KeyboardView DOM'u).
   Üç satırın tuş genişliği pitch denklemiyle eşit: üst 10 · orta 9 + %5 pad · alt 2 nav(1.5)+7. */
.kb {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  margin: 0 auto; max-width: 560px;
  background: linear-gradient(180deg, var(--kb-bg-top) 0%, var(--kb-bg-bot) 100%);
  border-top: 4px solid var(--gold);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -1.5px 0 var(--gold-deep), inset 0 3px 0 rgba(255, 255, 255, .4), 0 -4px 14px rgba(74, 52, 38, .16);
  padding: clamp(9px, 3.4vw, 14px) clamp(5px, 2vw, 10px)
           max(clamp(12px, 3.6vw, 16px), env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
body.is-done .kb { display: none; }
.kb.locked { opacity: .55; pointer-events: none; }
.kb-row { display: flex; gap: 0; margin-bottom: clamp(6px, 2.4vw, 10px); }
.kb-row:last-child { margin-bottom: 0; }
.kb-row:nth-of-type(2) { padding: 0 5%; }

.key {
  position: relative; flex: 1 1 0; height: var(--kh);
  border: none; background: none; padding: 0; cursor: pointer;
  display: flex; align-items: stretch; transition: transform .07s;
}
.key > .key-letter {
  position: relative; flex: 1; margin: 0 clamp(2px, .75vw, 4px);
  border-radius: clamp(4px, 1.3vw, 7px);
  display: grid; place-items: center; overflow: hidden;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: clamp(16px, 5.1vw, 23px); font-weight: 900; color: var(--key-text);
  background: linear-gradient(180deg, var(--key-top) 0%, var(--key-mid) 55%, var(--key-bot) 100%);
  box-shadow: 0 0 0 1px var(--key-ring), inset 0 1px 0 rgba(255, 255, 255, .7),
              0 1.5px 0 var(--key-lip), 0 2px 5px rgba(74, 52, 38, .16);
  transition: background .14s, color .14s, box-shadow .09s, transform .06s, filter .09s;
}
.key > .key-letter::before {
  content: ""; position: absolute; top: 1px; left: 2px; right: 2px; height: 38%;
  border-radius: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .03));
  pointer-events: none; z-index: 0;
}
.key:active > .key-letter {
  transform: translateY(1.5px) scale(.965); filter: brightness(.95);
  box-shadow: 0 0 0 1px var(--key-ring), inset 0 2px 5px rgba(120, 75, 8, .26),
              inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 var(--key-lip), 0 1px 2px rgba(74, 52, 38, .12);
}
/* "Kaç tane kaldı" rozeti — sağ alt, yeşil (oyun SUCCESS_GREEN) */
.key > .key-count {
  position: absolute; right: clamp(3px, 1.2vw, 6px); bottom: 2px; z-index: 2;
  font-family: 'Nunito', sans-serif; font-size: clamp(7.5px, 2.2vw, 10px); font-weight: 600;
  color: var(--green); text-shadow: 0 1px 1px rgba(255, 255, 255, .6); line-height: 1;
}
/* Durum sözlüğü (otorite: KeyboardViewStyles.js) */
.key.revealed-key > .key-letter { color: var(--key-revealed-text); }
.key.used-key { cursor: default; pointer-events: none; }
.key.used-key > .key-letter {
  background: linear-gradient(180deg, var(--key-used-top), var(--key-used-bot));
  color: var(--key-used-text);
  box-shadow: inset 0 3px 6px rgba(120, 75, 8, .32), inset 0 -1px 0 rgba(255, 255, 255, .18), 0 1px 0 rgba(255, 255, 255, .25);
  text-shadow: none; animation: none;
}
.key.used-key > .key-letter::before { display: none; }
.key.wrong > .key-letter {
  background: linear-gradient(180deg, var(--key-wrong-top), var(--key-wrong-mid) 55%, var(--key-wrong-bot));
  color: #fff;
  box-shadow: 0 0 0 1px var(--key-wrong-lip), inset 0 2px 1px rgba(255, 255, 255, .4),
              0 1.5px 0 var(--key-wrong-lip), 0 2px 5px rgba(74, 52, 38, .22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4); animation: none;
}
.key.wrong-locked { pointer-events: none; cursor: not-allowed; }
.key.wrong-locked > .key-letter {
  background: linear-gradient(180deg, var(--key-used-top), var(--key-used-bot));
  color: var(--key-used-text); opacity: .45; filter: grayscale(1);
  box-shadow: inset 0 3px 6px rgba(120, 75, 8, .32), 0 1px 0 rgba(255, 255, 255, .25);
  text-shadow: none;
}
.key.wrong-locked > .key-letter::before { display: none; }
.key.correct-glow > .key-letter { animation: keyGlow .35s ease-out; }
@keyframes keyGlow {
  0% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
  45% { box-shadow: 0 0 14px 2px rgba(255, 200, 80, .9); transform: scale(1.12); }
  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}
/* Nav tuşları — flex 1.5 (pitch matematiği), mor cap + altın halka */
.key-nav { flex: 1.5 1 0; }
.key-nav > .key-letter {
  color: #fff;
  background: linear-gradient(180deg, var(--p2) 0%, var(--p3) 55%, var(--p4) 100%);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 0 2px var(--gold),
              inset 0 1.5px 0 rgba(255, 255, 255, .35), 0 1.5px 0 var(--key-nav-lip), 0 2px 5px rgba(74, 52, 38, .22);
}
.key-nav > .key-letter::before { background: linear-gradient(180deg, rgba(255, 255, 255, .4), transparent); }
.key-nav:active > .key-letter {
  transform: scale(.95);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 0 2px var(--gold), inset 0 2px 4px rgba(0, 0, 0, .3);
}
.navico { position: relative; z-index: 1; width: clamp(20px, 6.4vw, 30px); height: auto; display: block; }