/* Harf Tahtası */
.oAlan{background:radial-gradient(900px 640px at 30% -10%,#1f5e6b 0%,#0e2a33 45%,#071419 100%)}
:root{--tas1:#fff7e0;--tas2:#f2d38e;--tasY:#3a2610;--k3K:#a4133c;--k2K:#ff758f;--k3H:#3a56d4;--k2H:#3fc1c9}
.htKap{position:absolute;inset:0;display:grid;max-width:620px;margin:0 auto;gap:6px;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"oy" "tahta" "yan";
  padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px))}
.htKap button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-family:inherit}
.htKap.kilitli .htRaf,.htKap.kilitli .htDugmeler{pointer-events:none;opacity:.75}
.gizli{display:none!important}

/* ------------------------------------------------ oyuncular */
.htOyuncular{grid-area:oy;display:flex;gap:6px;min-width:0}
.htOy{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:6px;align-items:center;
  padding:4px 8px 3px 4px;border-radius:14px;background:linear-gradient(160deg,#ffffff16,#ffffff08);border:2px solid #ffffff1a;transition:transform .25s,box-shadow .25s,border-color .25s}
.htOy .av{grid-row:1/3;position:relative;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#0b2229;font-size:20px}
.htOy .av em{font-style:normal;line-height:1}
.htOy .ad{font:800 12px Nunito,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d6f3f6}
.htOy .ad small{display:block;font-size:9.5px;color:#9fc6cc;font-weight:700;margin-top:-2px}
.htOy .pn{grid-row:1/3;grid-column:3;font:900 22px 'Baloo 2',Nunito,sans-serif;color:#fff;min-width:28px;text-align:right}
.htOy .rn{font-size:11px;letter-spacing:1px;color:#ffd166;line-height:1;height:10px;overflow:hidden}
.htOy.aktif{border-color:#ffd166;box-shadow:0 0 0 1px #ffd16688,0 0 18px #ffd16655;transform:translateY(-1px);background:linear-gradient(160deg,#ffd16630,#ffd1660d)}
.htOy.ben .ad::after{content:' ★';color:#ffd166}
.htOy.soluk{opacity:.6}
.htSaat{position:absolute;inset:-3px;width:42px;height:42px;transform:rotate(-90deg)}
.htSaat circle{fill:none;stroke:#ffffff1c;stroke-width:3}
.htSaat .h{stroke:#5ee08a;stroke-dasharray:100.5;stroke-linecap:round;transition:stroke-dashoffset .25s linear,stroke .3s}
.htSaat.kritik .h{stroke:#ff5d5d}
.htOyuncular.n4 .htOy{padding-right:5px}.htOyuncular.n4 .htOy .pn{font-size:18px}.htOyuncular.n4 .htOy .av{width:30px;height:30px;font-size:17px}
.htOyuncular.n4 .htSaat{width:36px;height:36px}
@media (max-width:480px){.htOyuncular.n3 .htOy .ad small,.htOyuncular.n4 .htOy .ad small{display:none}.htOyuncular.n4 .htOy{grid-template-columns:auto minmax(0,1fr);}.htOyuncular.n4 .htOy .pn{grid-column:2;grid-row:2;text-align:left;font-size:16px;line-height:1}.htOyuncular.n4 .htOy .rn{display:none}}

/* ------------------------------------------------ tahta */
.htTahtaKap{grid-area:tahta;position:relative;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;container-type:size;touch-action:none;border-radius:16px}
.htTahtaCer{--h:calc(min(100cqw,100cqh) / 15);width:min(100cqw,100cqh);height:min(100cqw,100cqh);transform-origin:0 0;position:relative;flex:0 0 auto}
.htTahta{width:100%;height:100%;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);gap:max(1px,calc(var(--h)*.07));padding:calc(var(--h)*.14);
  border-radius:calc(var(--h)*.45);background:linear-gradient(145deg,#174652,#0c2a31);box-shadow:0 10px 30px #0008,inset 0 0 0 1px #ffffff14,inset 0 2px 0 #ffffff12}
.htK{position:relative;border-radius:calc(var(--h)*.16);background:linear-gradient(160deg,#235a66,#1b4b55);display:grid;place-items:center;overflow:visible;min-width:0;min-height:0;
  box-shadow:inset 0 -1px 0 #0003}
.htK .et{font:900 calc(var(--h)*.28) Nunito,sans-serif;color:#ffffffe0;letter-spacing:-.3px;line-height:1;text-shadow:0 1px 1px #0005;pointer-events:none;white-space:nowrap}
.htK.k3K{background:linear-gradient(145deg,#d6336c,var(--k3K))}
.htK.k2K{background:linear-gradient(145deg,#ffa3b5,var(--k2K))}
.htK.k3H{background:linear-gradient(145deg,#5c7cfa,var(--k3H))}
.htK.k2H{background:linear-gradient(145deg,#7fe3e8,var(--k2H))}
.htK.k2K .et,.htK.k2H .et{color:#10303a;text-shadow:none}
.htK.orta{background:radial-gradient(circle at 50% 45%,#ffe08a,#ffb703 60%,#e08600)}
.htK .yildiz{font-size:calc(var(--h)*.7);color:#fff;text-shadow:0 1px 3px #b35c00;line-height:1;animation:htParla 2.4s ease-in-out infinite}
@keyframes htParla{50%{transform:scale(1.12) rotate(8deg)}}
.htK.hedef{box-shadow:0 0 0 2px #fff,0 0 12px #fff}
.htK.imlec{box-shadow:inset 0 0 0 2px #ffd166}
.htK.imlec::after{content:'↓';position:absolute;font:900 calc(var(--h)*.55) Nunito,sans-serif;color:#ffd166;animation:htYanip .9s steps(2) infinite}
.htK.imlec.yatay::after{content:'→'}
@keyframes htYanip{50%{opacity:.25}}
.htK.ipucu .htTas{box-shadow:0 0 0 2px #00f5d4,0 0 14px #00f5d4!important}
.htTahta.salla{animation:htSalla .4s}
@keyframes htSalla{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.htTahtaKap.yakin{box-shadow:inset 0 0 0 2px #ffd16644}
.htZoom{position:absolute;right:8px;bottom:8px;z-index:6;border:0;border-radius:12px;padding:8px 12px;font:800 14px Nunito,sans-serif;color:#10303a;background:#ffd166;box-shadow:0 4px 12px #0007}

/* ------------------------------------------------ taşlar */
.htTas{position:relative;display:grid;place-items:center;border-radius:18%;color:var(--tasY);
  background:linear-gradient(160deg,var(--tas1) 0%,var(--tas2) 100%);box-shadow:inset 0 -3px 0 #c8963f,inset 0 1px 0 #fff,0 2px 4px #0006}
.htTas b{font:900 1em 'Baloo 2',Nunito,sans-serif;line-height:1;margin-top:.08em}
.htTas i{position:absolute;right:.12em;bottom:.04em;font:800 .4em Nunito,sans-serif;font-style:normal;opacity:.85}
.htTas.joker b{color:#7b2cbf}
.htK .htTas{position:absolute;inset:0;font-size:calc(var(--h)*.6);border-radius:calc(var(--h)*.16)}
.htK .htTas.bekle{background:linear-gradient(160deg,#fffbe9,#ffe08a);box-shadow:0 0 0 2px #ffd166,0 0 10px #ffd166aa,inset 0 -3px 0 #d6a43c}
.htK .htTas.bekle.kon{animation:htKon .22s ease-out}
.htK .htTas.son{box-shadow:inset 0 -3px 0 #c8963f,inset 0 1px 0 #fff,0 0 0 2px #5ee08a}
.htK .htTas.dus{animation:htDus .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--g,0s)}
.htK .htTas.secili{transform:scale(1.08)}
@keyframes htKon{from{transform:scale(1.3)}}
@keyframes htDus{from{transform:translateY(-60%) scale(1.6);opacity:0}}
.htTas.mini{width:30px;height:30px;font-size:19px;display:inline-grid;margin:2px}

/* ------------------------------------------------ alt bölüm: bilgi, raf, düğmeler */
.htYan{grid-area:yan;display:flex;flex-direction:column;gap:6px;min-width:0}
.htBilgi{display:flex;align-items:center;gap:8px;min-height:30px;padding:3px 6px 3px 10px;border-radius:12px;background:#ffffff0d;font:700 13px Nunito,sans-serif;color:#d6f3f6}
.htBilgi .sol{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.htBilgi .sag{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.htBilgi .torba{font-weight:800;color:#ffd166}
.htBilgi .saatYazi{font-weight:800;font-variant-numeric:tabular-nums}.htBilgi .saatYazi.kritik{color:#ff7b7b;animation:htYanip .6s steps(2) infinite}
.htBilgi .w{display:inline-block;padding:0 5px;border-radius:6px;font-weight:800;font-size:12px}
.htBilgi .w.iyi{background:#2f9e4433;color:#9cf0b5}.htBilgi .w.kotu,.htBilgi .kotu{background:#e0313133;color:#ffb3b3}
.htBilgi .top{color:#ffd166}
.htMenuBtn{border:0;background:#ffffff1a;color:#fff;border-radius:9px;width:32px;height:28px;font-size:16px;cursor:pointer}
.dusun i{font-style:normal;animation:htNokta 1.2s infinite}.dusun i:nth-child(2){animation-delay:.2s}.dusun i:nth-child(3){animation-delay:.4s}
@keyframes htNokta{0%,60%,100%{opacity:.2}30%{opacity:1}}
.htGecmis{display:none}
.htRaf{display:flex;justify-content:center;gap:min(1vw,5px);padding:7px 4px;border-radius:16px;min-height:62px;touch-action:none;
  background:linear-gradient(180deg,#8a5a2b,#5e3a17);box-shadow:inset 0 2px 0 #ffffff2e,inset 0 -4px 0 #3b2208,0 6px 14px #0007}
.htRaf .htTas,.htRafBos{width:min(12vw,52px);height:min(12vw,52px);flex:0 0 auto}
.htRaf .htTas{font-size:min(7.6vw,32px);cursor:grab;transition:transform .15s}
.htRaf .htTas.secili{transform:translateY(-8px);box-shadow:0 0 0 3px #00f5d4,0 8px 14px #0008,inset 0 -3px 0 #c8963f}
.htRaf .htTas.tasiniyor{opacity:.25}
.htRaf .htTas.yeni{animation:htYeni .45s cubic-bezier(.3,1.6,.5,1) both}
.htRaf .htTas.karis{animation:htKaris .35s ease-out both;animation-delay:var(--g,0s)}
@keyframes htYeni{from{transform:translateY(-30px) scale(.4);opacity:0}}
@keyframes htKaris{40%{transform:translateY(-10px) rotate(-8deg)}}
.htRafBos{border-radius:18%;background:#00000026;box-shadow:inset 0 2px 4px #0005}
.htRaf.pasif .htTas{filter:saturate(.75) brightness(.92)}
.htGhost{position:fixed;left:0;top:0;width:54px;height:54px;font-size:33px;z-index:9999;pointer-events:none;box-shadow:0 12px 24px #000a,inset 0 -3px 0 #c8963f}
.htDugmeler{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.5fr);gap:5px}
.htDug{border:0;border-radius:13px;padding:5px 2px 4px;background:linear-gradient(180deg,#2c6b78,#1d4d57);color:#e8fbfd;box-shadow:inset 0 -3px 0 #0f3138,0 3px 8px #0006;
  display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;min-height:50px;transition:transform .1s,filter .2s}
.htDug i{font-style:normal;font-size:19px;line-height:1.1}
.htDug span{font:800 11px Nunito,sans-serif;white-space:nowrap}
.htDug:active{transform:translateY(2px)}
.htDug:disabled{filter:grayscale(.8) brightness(.7);cursor:default}
.htDug[hidden]{display:none}
.htDug.htOyna{grid-column:-2/-1;background:linear-gradient(180deg,#5ee08a,#24a35a);color:#073318;box-shadow:inset 0 -4px 0 #157a3f,0 4px 12px #24a35a66}
.htDug.htOyna i{font-size:22px;font-weight:900}.htDug.htOyna span{font-size:14px;letter-spacing:.5px}
.htDug#htIpucu{background:linear-gradient(180deg,#ffd166,#e8a317);color:#4a2f00;box-shadow:inset 0 -3px 0 #a86f00,0 3px 8px #0006}

/* ------------------------------------------------ önizleme, efektler */
.htOnizle{position:absolute;z-index:5;pointer-events:none;padding:2px 8px;border-radius:999px;font:900 14px 'Baloo 2',Nunito,sans-serif;box-shadow:0 3px 8px #0007;transform:translateY(-4px)}
.htOnizle.iyi{background:#5ee08a;color:#073318}.htOnizle.kotu{background:#ff6b6b;color:#fff}
.htUcan{position:absolute;z-index:40;pointer-events:none;transform:translate(-50%,-50%);font:900 34px 'Baloo 2',Nunito,sans-serif;color:#7dffb0;text-shadow:0 3px 0 #0008,0 0 18px currentColor;animation:htUc 1.4s ease-out forwards}
@keyframes htUc{0%{transform:translate(-50%,-30%) scale(.4);opacity:0}20%{transform:translate(-50%,-60%) scale(1.15);opacity:1}100%{transform:translate(-50%,-180%) scale(1);opacity:0}}
.htPar{position:absolute;z-index:39;width:8px;height:8px;border-radius:2px;pointer-events:none;animation:htPar .9s ease-out forwards}
@keyframes htPar{to{transform:translate(var(--x),var(--y)) rotate(400deg);opacity:0}}

/* ------------------------------------------------ menü / perde */
.htMenu{position:absolute;inset:0;z-index:20;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:14px 12px calc(14px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(700px 500px at 50% 0%,#1f5e6bf2,#071419f7)}
.htMenu[hidden]{display:none}
.htMenuKutu{width:100%;max-width:520px;display:flex;flex-direction:column;gap:12px;margin:auto 0}
.htLogo{display:flex;justify-content:center;flex-wrap:wrap;gap:2px;padding-top:6px}
.htLogo .htTas{width:34px;height:38px;font-size:24px;transform:rotate(var(--a));animation:htLogo .6s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--g)}
.htLogo{column-gap:14px;row-gap:4px}.htLogo .kelime{display:flex;gap:2px}
@keyframes htLogo{from{transform:translateY(-40px) rotate(0) scale(.3);opacity:0}}
.htAltBaslik{text-align:center;margin:0;color:#cdeef2;font-weight:700;font-size:14px}
.htOzet{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.htOzet div{background:#ffffff10;border-radius:12px;padding:6px 4px;text-align:center}
.htOzet small{display:block;font-size:11px;color:#9fc6cc;font-weight:800}.htOzet b{font:900 20px 'Baloo 2',Nunito,sans-serif}
.htModlar{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.htMod{border:2px solid #ffffff1f;border-radius:16px;background:linear-gradient(160deg,#ffffff14,#ffffff06);color:#fff;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;font:800 14px Nunito,sans-serif;transition:transform .15s,border-color .2s}
.htMod i{font-style:normal;font-size:26px}.htMod small{font-size:11px;color:#9fc6cc}
.htMod.aktif{border-color:#ffd166;background:linear-gradient(160deg,#ffd16633,#ffd1660a);box-shadow:0 0 16px #ffd16644}
.htMod:active{transform:scale(.97)}
.htAyar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.htAyar>span{font:800 13px Nunito,sans-serif;color:#cdeef2;min-width:70px}
.htAyar.dikey{flex-direction:column;align-items:stretch}
.htSec{display:flex;gap:5px;flex:1;flex-wrap:wrap}
.htSec button{flex:1;border:2px solid #ffffff22;border-radius:11px;background:#ffffff0d;color:#fff;padding:7px 6px;font:800 13px Nunito,sans-serif;cursor:pointer;white-space:nowrap}
.htSec button.aktif{border-color:#5ee08a;background:#5ee08a2b}
.htSec.kilitli button{cursor:default}.htSec.kilitli button:not(.aktif){opacity:.55}
.htAdlar{display:flex;flex-direction:column;gap:6px}
.htAdlar div{display:flex;gap:6px}
.htAdlar input{flex:1;min-width:0;border:2px solid #ffffff24;border-radius:10px;background:#0b2229;color:#fff;padding:8px 10px;font:700 15px Nunito,sans-serif;user-select:text;-webkit-user-select:text}
.htAdlar button{border:0;border-radius:10px;background:#ffffff18;color:#fff;width:40px;cursor:pointer}
.htEkle{border:2px dashed #ffffff33!important;background:transparent!important;width:auto!important;padding:8px;font:800 13px Nunito,sans-serif;color:#cdeef2!important}
.htBasla{font-size:20px!important;padding:13px!important;background:linear-gradient(180deg,#5ee08a,#24a35a)!important;color:#073318!important;box-shadow:0 6px 18px #24a35a55}
.htDevam{display:flex;flex-direction:column;gap:0;background:linear-gradient(180deg,#ffd166,#e8a317)!important;color:#4a2f00!important}
.htDevam small{font-size:12px;opacity:.8}
.htMenuAlt{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.htMenuAlt .btn{flex:1;min-width:120px;font-size:13px;padding:8px}
.ok{color:#7dffb0;font-weight:800}
.htPerde{position:absolute;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;background:#05111599;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.htPerdeKutu{text-align:center;background:#0e2a33;border:2px solid #ffd16655;border-radius:20px;padding:22px 26px;max-width:320px;box-shadow:0 20px 40px #000a}
.htPerdeKutu .av{font-size:54px}.htPerdeKutu h3{margin:4px 0;font:900 26px 'Baloo 2',Nunito,sans-serif}

/* ------------------------------------------------ pencereler */
.htJoker{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;margin:10px 0}
.htJoker button{height:42px;border:0;border-radius:9px;background:linear-gradient(160deg,var(--tas1,#fff7e0),var(--tas2,#f2d38e));color:#7b2cbf;font:900 22px 'Baloo 2',Nunito,sans-serif;cursor:pointer;box-shadow:inset 0 -3px 0 #c8963f}
.htDegis{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.htDegis .htTas{width:46px;height:46px;font-size:28px;border:0;cursor:pointer;--tas1:#fff7e0;--tas2:#f2d38e;--tasY:#3a2610;transition:transform .15s}
.htDegis .htTas.secili{transform:translateY(-6px);box-shadow:0 0 0 3px #ff6b6b,0 6px 12px #0007}
.htBedava{margin-top:10px;text-align:center}
.htMenuListe{display:flex;flex-direction:column;gap:8px}
.htSonuc{width:100%;border-collapse:collapse;margin:8px 0}
.htSonuc td{padding:6px 6px;border-bottom:1px solid #ffffff14;font-size:15px}
.htSonuc tr.ben td{background:#ffd1661c}
.htSonuc td:nth-child(3){text-align:right;font-size:18px}
.htSonuc small{font-size:11px;opacity:.75}
.htPuanRozet{background:#5ee08a;color:#073318;border-radius:999px;padding:1px 8px;font-weight:900;font-size:13px}
.htKazanc{text-align:center;font:800 17px Nunito,sans-serif;color:#ffd166}
.htGunSkor{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.htGunSkor div{background:#ffffff10;border-radius:12px;padding:8px}
.htGunSkor small{display:block;font-size:11px;color:#9fc6cc}.htGunSkor b{font:900 26px 'Baloo 2',Nunito,sans-serif}
.htYardim{text-align:left;padding-left:4px;list-style:none;display:flex;flex-direction:column;gap:7px;font-size:14px;line-height:1.4;margin:6px 0}
.htKareler{display:flex;flex-direction:column;gap:6px;font-size:14px}
.htKareler>div{display:flex;align-items:center;gap:10px}
.htKareler .htK{--h:34px;width:34px;height:34px;flex:0 0 auto}
.htHarfTablo{display:flex;flex-wrap:wrap;justify-content:center;--tas1:#fff7e0;--tas2:#f2d38e;--tasY:#3a2610}
.htBekle .htAyarlar{display:flex;flex-direction:column;gap:7px;margin:10px 0;text-align:left}
.htBekle .htSonuc td{font-size:14px}

/* ------------------------------------------------ geniş ekran: tahta solda, panel sağda */
@media (min-width:900px) and (min-aspect-ratio:5/4){
  .htKap{max-width:1240px;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"tahta oy" "tahta yan";gap:10px 14px;padding:10px 14px}
  .htOyuncular{flex-direction:column}
  .htOy{padding:6px 12px 6px 6px}.htOy .av{width:42px;height:42px;font-size:24px}.htSaat{width:48px;height:48px}
  .htOy .ad{font-size:14px}.htOy .pn{font-size:26px}
  .htOyuncular.n4 .htOy .pn{font-size:24px}.htOyuncular.n4 .htOy .av{width:38px;height:38px}
  .htYan{min-height:0}
  .htGecmis{display:block;flex:1;min-height:0;overflow:auto;margin:0;padding:6px 10px;list-style:none;border-radius:12px;background:#00000026;font-size:13px}
  .htGecmis li{padding:3px 0;border-bottom:1px solid #ffffff0d;color:#cdeef2}
  .htGecmis li b{color:#fff}.htGecmis .w{font-weight:900;color:#ffd166;letter-spacing:.5px}.htGecmis em{font-style:normal;font-weight:900;color:#7dffb0}
  .htRaf .htTas,.htRafBos{width:42px;height:42px}.htRaf .htTas{font-size:26px}
  .htRaf{min-height:56px;gap:4px}
  .htDugmeler{grid-template-columns:repeat(3,1fr)}
  .htDug{flex-direction:row;justify-content:center;gap:6px;min-height:42px}
  .htDug.htOyna{grid-column:1/-1;min-height:50px}
  .htMenuKutu{max-width:560px}
  .htModlar{grid-template-columns:repeat(4,1fr)}
}
@media (max-height:640px) and (max-width:899px){.htRaf .htTas,.htRafBos{width:min(11vw,44px);height:min(11vw,44px)}.htRaf{min-height:52px;padding:4px}.htDug{min-height:42px}.htDug span{font-size:10px}}