:root{--mini:clamp(12px,3.7vw,20px);--gold:#ffd75e;--green:#3ee08a}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background-color:#0e1120;
  background-image:radial-gradient(900px 620px at 50% -8%,#262d55 0%,rgba(14,17,32,0) 62%);
  color:#e8ecff;display:flex;justify-content:center;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  overflow-x:hidden;overscroll-behavior:none;
}
#app{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 8px calc(14px + env(safe-area-inset-bottom));width:100%;max-width:1000px}
#layout{display:flex;gap:16px;align-items:flex-start;justify-content:center;width:100%}
#gameCol{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;max-width:520px}

/* ---------- Başlık ---------- */
header{width:100%;max-width:500px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.title-wrap{line-height:1.05}
h1{font-size:clamp(24px,6vw,32px);letter-spacing:1px;font-weight:900;font-style:italic}
h1 .g{background:linear-gradient(180deg,#ffe27a,#ffb14d);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 .b{background:linear-gradient(180deg,#ff9a5c,#ff5c7a);-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{font-size:11px;color:#8b93b8;letter-spacing:.6px;margin-top:2px}
.chips{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.chip{background:#1a1f36;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:5px 12px 6px;min-width:76px;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.chip .lbl{display:block;font-size:9px;letter-spacing:1.2px;color:#7d85ad;font-weight:700}
.chip span:not(.lbl){font-size:17px;font-weight:800}
.chip.small{min-width:62px}
.chip.bump{animation:bumpA .3s}
@keyframes bumpA{40%{transform:scale(1.12)}}
.btns{display:flex;gap:6px}
.icon-btn{width:36px;height:36px;border-radius:11px;background:#1a1f36;border:1px solid rgba(255,255,255,.09);color:#dfe3ff;font-size:16px;cursor:pointer;transition:.15s}
.icon-btn:hover{background:#262c4d;transform:translateY(-1px)}
.icon-btn.lang{width:auto;min-width:36px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:12.5px;font-weight:800;letter-spacing:.5px}
.lang-wrap{position:relative;display:inline-flex}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:90;display:flex;flex-direction:column;gap:2px;min-width:170px;padding:6px;background:#1a1f36;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.lang-menu button{display:flex;align-items:center;gap:9px;background:transparent;border:none;color:#e8ecff;font-family:inherit;font-size:13.5px;font-weight:700;text-align:left;padding:8px 10px;border-radius:9px;cursor:pointer;transition:.12s}
.lang-menu button:hover{background:#262c4d}
.lang-menu button.active{background:#262c4d;color:#ffe27a}
.lang-menu button.active::after{content:'✓';margin-left:auto;font-weight:900}

/* ---------- Tahta ---------- */
#boardWrap{position:relative;width:min(94vw,calc(100vh - 350px),500px);width:min(94vw,calc(100dvh - 350px),500px);min-width:264px}
#board{
  position:relative;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  gap:6px;padding:8px;aspect-ratio:1;width:100%;
  background:linear-gradient(180deg,#1c2138,#141828);border-radius:16px;
  box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.05);
  touch-action:none;
}
#board.danger{animation:dangerA 1.1s ease-in-out infinite}
@keyframes dangerA{0%,100%{box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 0 1px rgba(255,80,80,0)}50%{box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 22px 2px rgba(255,80,80,.45)}}
#board.shake{animation:shakeA .38s}
@keyframes shakeA{20%{transform:translate(3px,-3px)}40%{transform:translate(-3px,2px)}60%{transform:translate(2px,2px)}80%{transform:translate(-2px,-1px)}}
.cell{position:relative;border-radius:20%;background:rgba(255,255,255,.055);box-shadow:inset 0 1px 2px rgba(0,0,0,.25);transition:background .15s}
.cell.line-flash{background:rgba(255,215,94,.55)}

/* ---------- Bloklar ---------- */
.blk{
  display:flex;align-items:center;justify-content:center;
  font-weight:800;border-radius:18%;line-height:1;
  background:#3a4059;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.28);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.32),inset 0 -3px 0 rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.35);
}
#board .blk{position:absolute;inset:1px}
.blk[data-v="2"]{background:linear-gradient(180deg,#f4ecdd,#e5d8bf);color:#5a4f3e;text-shadow:none}
.blk[data-v="4"]{background:linear-gradient(180deg,#f2e2c0,#e2cda0);color:#5a4f3e;text-shadow:none}
.blk[data-v="8"]{background:linear-gradient(180deg,#f6b27e,#ef9a5c)}
.blk[data-v="16"]{background:linear-gradient(180deg,#f79a67,#f08048)}
.blk[data-v="32"]{background:linear-gradient(180deg,#f87c5f,#f2603f)}
.blk[data-v="64"]{background:linear-gradient(180deg,#f65e3d,#e04a2a)}
.blk[data-v="128"]{background:linear-gradient(180deg,#ffd970,#f6c14a)}
.blk[data-v="256"]{background:linear-gradient(180deg,#ffd35a,#f2b53a)}
.blk[data-v="512"]{background:linear-gradient(180deg,#ffc93c,#eeaa28)}
.blk[data-v="1024"]{background:linear-gradient(180deg,#ffb52e,#e8951c)}
.blk[data-v="2048"]{background:linear-gradient(180deg,#ffc41f,#ef9d0a);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.2),0 0 18px rgba(255,196,31,.55)}
.blk[data-v="4096"]{background:linear-gradient(180deg,#8f6bff,#6a44ee)}
.blk[data-v="8192"]{background:linear-gradient(180deg,#ff6bb0,#ef3f92)}
.blk.vmax{background:linear-gradient(135deg,#ff4d4d,#ffd24d,#4dff88,#4dc3ff,#b04dff);animation:rainbowA 2s linear infinite}
@keyframes rainbowA{50%{filter:hue-rotate(45deg) brightness(1.15)}}

.blk.pop{animation:popA .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes popA{0%{transform:scale(.25);opacity:.4}60%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}
.blk.merge-pop{animation:mpA .34s cubic-bezier(.34,1.56,.64,1)}
@keyframes mpA{0%{transform:scale(.9)}45%{transform:scale(1.32);filter:brightness(1.7)}100%{transform:scale(1)}}
.blk.blast{animation:blA .3s ease-in forwards}
.blk.blast-gold{animation:blA .32s ease-in forwards;filter:brightness(1.6) saturate(1.5)}
@keyframes blA{100%{transform:scale(0) rotate(25deg);opacity:0}}
.blk.will-merge{outline:3px solid var(--green);outline-offset:-3px;box-shadow:0 0 14px rgba(62,224,138,.75);animation:pulseA .4s infinite alternate}
@keyframes pulseA{to{transform:scale(1.07)}}
.blk.will-clear{outline:3px solid var(--gold);outline-offset:-3px;box-shadow:0 0 16px rgba(255,215,94,.85)}

/* ---------- Parça tepsisi ---------- */
#tray{display:flex;gap:10px;width:100%;max-width:500px;justify-content:center}
.slot{flex:1;max-width:158px;height:calc(var(--mini)*5 + 14px);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05);border-radius:14px;transition:.15s}
.slot.empty::after{content:'';width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.08)}
.slot.sel{border-color:rgba(255,215,94,.7);box-shadow:0 0 0 2px rgba(255,215,94,.25)}
.slot.dim .piece{opacity:.35}
.slot.dead .piece{opacity:.35;filter:grayscale(.8)}
.piece{display:grid;gap:2px;touch-action:none;cursor:grab}
.piece .blk{border-radius:24%;font-size:calc(var(--mini)*.5)}
.piece .blk[data-len="3"]{font-size:calc(var(--mini)*.4)}
.piece .blk[data-len="4"]{font-size:calc(var(--mini)*.33)}
.piece .blk[data-len="5"]{font-size:calc(var(--mini)*.27)}

/* ---------- Sürükleme hayaleti ---------- */
#ghost{position:fixed;left:0;top:0;z-index:80;pointer-events:none;filter:drop-shadow(0 8px 16px rgba(0,0,0,.45));will-change:transform;transform-origin:0 0}
.gblock{position:absolute;border-radius:18%;opacity:.88}
#ghost.invalid .gblock{opacity:.45;outline:2px solid rgba(255,82,82,.9);outline-offset:-2px;filter:grayscale(.65)}
.gblock.gmerged{outline:3px solid var(--green);outline-offset:-3px;box-shadow:0 0 14px rgba(62,224,138,.8);opacity:1}
.gpoints{position:absolute;right:-14px;top:-16px;font-size:17px;font-weight:900;color:var(--green);text-shadow:0 2px 6px rgba(0,0,0,.7);white-space:nowrap}

/* ---------- Efektler ---------- */
#fx{position:absolute;inset:0;pointer-events:none;z-index:30}
.ftext{position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:19px;color:#ffe27a;text-shadow:0 2px 6px rgba(0,0,0,.65);animation:ftA .95s ease-out forwards;white-space:nowrap}
.ftext.ft-big{font-size:26px;color:var(--green)}
.ftext.ft-line{font-size:24px;color:var(--gold)}
@keyframes ftA{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1;transform:translate(-50%,-60%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-160%) scale(1)}}
.banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-size:clamp(22px,6vw,34px);font-weight:900;letter-spacing:1px;color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.7),0 0 24px rgba(255,215,94,.5);animation:bannerA 1.55s ease forwards;white-space:nowrap;z-index:35}
.banner.combo{color:var(--green)}
.banner.gold{color:var(--gold)}
@keyframes bannerA{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}30%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-64%) scale(1)}}
.shard{position:absolute;width:8px;height:8px;border-radius:2px;pointer-events:none}
.shard.confetti{width:9px;height:14px;border-radius:3px}

/* ---------- Kaplama & modal ---------- */
.hidden{display:none!important}
#overlay{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(8,10,18,.74);backdrop-filter:blur(5px);border-radius:16px}
.card{background:linear-gradient(180deg,#20264a,#181c36);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px 24px;max-width:410px;width:calc(100% - 32px);text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.55);max-height:calc(100% - 20px);overflow:auto}
.card-title{font-size:22px;font-weight:900;letter-spacing:2px;margin-bottom:12px}
.record{color:var(--gold);font-weight:900;margin-bottom:10px;animation:bumpA .6s infinite alternate}
.stats{display:flex;gap:10px;justify-content:center;margin:14px 0 18px;flex-wrap:wrap}
.stats>div{background:rgba(255,255,255,.05);border-radius:12px;padding:8px 14px;min-width:86px}
.stats .lbl{display:block;font-size:9px;letter-spacing:1px;color:#7d85ad;font-weight:700;margin-bottom:3px}
.stats b{font-size:18px}
.primary{background:linear-gradient(180deg,#ffd75e,#f0a12d);border:none;color:#4a3208;font-weight:900;font-size:15px;letter-spacing:1px;padding:12px 26px;border-radius:13px;cursor:pointer;box-shadow:0 6px 16px rgba(240,161,45,.35);transition:.15s}
.primary:hover{transform:translateY(-2px);filter:brightness(1.06)}
.modal{position:fixed;inset:0;z-index:100;background:rgba(8,10,18,.7);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:16px}
.rules{list-style:none;text-align:left;display:flex;flex-direction:column;gap:11px;margin:6px 0 18px;font-size:13.5px;line-height:1.45;color:#cdd3f2}
.rules b{color:#ffe27a}
button{touch-action:manipulation}

/* ---------- Skor kaydı (oyun sonu) ---------- */
.savescore{margin-top:14px;display:flex;flex-direction:column;gap:8px}
#nameInput{width:100%;padding:10px 12px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:#12152a;color:#e8ecff;font-size:16px;text-align:center;outline:none;font-family:inherit}
#nameInput:focus{border-color:rgba(255,215,94,.6)}
#saveBox .primary{width:100%}
#btnAgain{width:100%;margin-top:12px}
.save-status{font-size:12.5px;min-height:16px;text-align:center;color:#8b93b8}
.save-status.ok{color:var(--green);font-weight:800}
.save-status.err{color:#ff7a7a;font-weight:700}

/* ---------- Skor tablosu ---------- */
.lb-list{list-style:none;text-align:left;display:flex;flex-direction:column;gap:6px;margin:6px 0 16px;max-height:min(46vh,340px);overflow:auto;padding-right:2px}
.lb-list li{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.045);border-radius:10px;padding:8px 12px;font-size:13.5px}
.lb-list li.top1{background:rgba(255,215,94,.16);border:1px solid rgba(255,215,94,.5)}
.lb-list li.top2{background:rgba(203,209,233,.1);border:1px solid rgba(203,209,233,.32)}
.lb-list li.top3{background:rgba(240,128,80,.12);border:1px solid rgba(240,128,80,.4)}
.lb-rank{font-weight:900;color:#8b93b8;min-width:26px}
.lb-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.lb-meta{font-size:10.5px;color:#8b93b8;white-space:nowrap}
.lb-score{font-weight:900;color:var(--gold)}
.lb-list li.lb-note{justify-content:center;color:#8b93b8}
#btnCloseBoard{width:100%}

/* ---------- Alt bilgi (footer) ---------- */
#footer{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:#8b93b8;letter-spacing:.4px;margin-top:6px;padding:0 8px;text-align:center}
.f-dot{opacity:.5}
.footer-link{background:none;border:none;color:#8b93b8;font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:.4px;cursor:pointer;padding:2px 4px;border-radius:6px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(139,147,184,.45);transition:color .15s}
.footer-link:hover{color:#ffe27a;text-decoration-color:rgba(255,226,122,.6)}

/* ---------- Gizlilik penceresi ---------- */
.privacy-card{text-align:left;max-width:470px}
.privacy-text{display:flex;flex-direction:column;gap:11px;font-size:13px;line-height:1.55;color:#cdd3f2;margin:4px 0 18px}
.privacy-text p{padding-left:12px;border-left:2px solid rgba(255,215,94,.35)}
#btnClosePrivacy{width:100%}

/* ---------- Yan bilgi paneli (katlanır) ---------- */
#sideInfo{flex:0 0 285px;width:285px;position:sticky;top:12px;display:flex;flex-direction:column;gap:10px}
#sideInfo.collapsed{flex:0 0 auto;width:auto}
.side-toggle{display:flex;align-items:center;gap:8px;width:100%;background:linear-gradient(180deg,#1b2036,#161a2c);border:1px solid rgba(255,255,255,.1);border-radius:14px;color:#e8ecff;font-family:inherit;font-weight:800;font-size:12.5px;letter-spacing:1.2px;padding:12px 14px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:.15s}
.side-toggle:hover{border-color:rgba(255,215,94,.5);transform:translateY(-1px)}
.st-icon{font-size:15px;line-height:1}
.st-arrow{margin-left:auto;color:var(--gold);font-size:11px;transition:transform .2s}
#sideInfo:not(.collapsed) .st-arrow{transform:rotate(90deg)}
.info-card{background:linear-gradient(180deg,#1b2036,#161a2c);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px 16px 14px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.info-card h2{font-size:13.5px;letter-spacing:1.2px;color:var(--gold);margin:2px 0 8px}
.info-card h3{font-size:11.5px;letter-spacing:.8px;color:#c9d0f5;margin:13px 0 6px}
.info-card p{font-size:12.5px;line-height:1.55;color:#aeb6dd}
.info-card ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.info-card li{font-size:12px;line-height:1.5;color:#aeb6dd;padding-left:13px;position:relative}
.info-card li::before{content:'▸';position:absolute;left:0;color:var(--gold);font-size:10px;top:2px}
.info-card b{color:#ffe27a}
.info-tip{margin-top:12px;background:rgba(255,215,94,.08);border:1px solid rgba(255,215,94,.25);border-radius:10px;padding:9px 11px;font-size:11.5px;line-height:1.5;color:#e8d9a8}

/* ---------- Değiştirme düğmesi (tepsi altı) ---------- */
#swapRow{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:500px}
.swap-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(180deg,#2a3054,#1c2138);border:1px solid rgba(255,255,255,.14);color:#e8ecff;font-family:inherit;font-weight:800;font-size:13px;letter-spacing:1px;padding:11px 22px;border-radius:13px;cursor:pointer;transition:.15s;touch-action:manipulation}
.swap-btn:hover{transform:translateY(-1px);border-color:rgba(255,215,94,.55)}
.swap-btn.active{background:linear-gradient(180deg,#ffd75e,#f0a12d);color:#4a3208;border-color:transparent;box-shadow:0 4px 16px rgba(240,161,45,.45)}
.swap-btn.off{opacity:.4;cursor:not-allowed}
.swap-btn.off:hover{transform:none;border-color:rgba(255,255,255,.14)}
.swap-count{background:rgba(255,255,255,.14);border-radius:8px;padding:2px 9px;font-size:13px;min-width:20px;text-align:center}
.swap-btn.active .swap-count{background:rgba(0,0,0,.18)}
.swap-status{font-size:11.5px;color:#8b93b8;text-align:center;min-height:15px}
#tray.swapmode .piece{cursor:pointer;animation:pulseA .55s infinite alternate}
.piece.swap-in{animation:swapInA .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes swapInA{0%{transform:scale(.3) rotate(-8deg);opacity:.2}70%{transform:scale(1.12) rotate(2deg)}100%{transform:scale(1) rotate(0deg)}}

/* ---------- Mobil / dar ekran ---------- */
@media (max-width:1080px){
  #layout{flex-direction:column;align-items:center}
  #sideInfo{flex:none;width:min(94vw,520px);position:static;order:2}
  #sideInfo.collapsed{width:auto}
  #gameCol{order:1}
}
@media (max-width:420px){
  header{gap:6px}
  .chip{min-width:64px;padding:4px 9px 5px}
  .chip span:not(.lbl){font-size:15px}
  .icon-btn{width:34px;height:34px;font-size:15px}
  .swap-btn{width:100%;max-width:340px}
  #boardWrap{min-width:0}
  #board{gap:4px;padding:6px}
  #tray{gap:7px}
}