:root{
  --bg1:#0d1b33;
  --bg2:#15325a;
  --panel:#16375d;
  --panel2:#1b436e;
  --piece:#0b6075;
  --piece2:#073f57;
  --cyan:#4fd8ef;
  --green:#47db92;
  --red:#ef5869;
  --text:#f4fbff;
  --muted:#91abc0;
  --gold:#f0b35d;
  --gap:5px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;min-height:100%;overflow-x:hidden;background:
radial-gradient(circle at 15% 4%,rgba(79,216,239,.18),transparent 27%),
radial-gradient(circle at 86% 12%,rgba(93,121,255,.14),transparent 30%),
linear-gradient(180deg,var(--bg1),var(--bg2) 70%,#102440);color:var(--text);
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
button,input{font:inherit}
body{display:block}
.app{width:100%;max-width:980px;margin:0 auto;padding:12px 12px 28px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.brand{font-weight:950;font-size:24px;letter-spacing:1px}.brand span{color:var(--cyan)}
.sub{font-size:9px;color:var(--muted);font-weight:800}
.icon-btn{width:44px;height:44px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.05);color:#fff;border-radius:14px;font-weight:950}
.screen{display:none}.screen.active{display:block}
.hero{max-width:760px;margin:0 auto;padding:20px;border-radius:24px;background:linear-gradient(145deg,rgba(79,216,239,.13),rgba(93,121,255,.05));border:1px solid rgba(255,255,255,.07)}
.kicker{font-size:10px;color:var(--cyan);font-weight:950;letter-spacing:1.3px}
.hero h1{font-size:34px;line-height:1.03;margin:7px 0 9px}.hero p{font-size:11px;color:#9cb5c8;line-height:1.55;margin:0 0 16px}
.primary{width:100%;height:52px;border:0;border-radius:16px;background:linear-gradient(145deg,#23a9cc,#4fd8ef);color:#061721;font-weight:950}
.secondary{width:100%;height:48px;border-radius:15px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.05);color:#fff;font-weight:900}
.mode-grid{max-width:760px;margin:10px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mode-card{padding:13px;min-height:116px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.065);cursor:pointer}
.mode-card b{display:block;font-size:14px}.mode-card span{display:block;font-size:9px;color:#87a4b9;line-height:1.45;margin-top:4px}.mode-icon{font-size:24px;margin-bottom:8px}
.back{border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.045);color:#fff;border-radius:12px;padding:8px 10px;font-size:10px;font-weight:900;margin-bottom:8px}
.game-head,.scorebar,.board-wrap,.tray,.hint{max-width:620px;margin-left:auto;margin-right:auto}
.game-head{display:flex;justify-content:space-between;gap:6px;margin-bottom:7px}.chip{padding:6px 8px;border-radius:999px;background:rgba(79,216,239,.07);border:1px solid rgba(79,216,239,.11);font-size:9px;font-weight:900;color:#c9edf4}
.scorebar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:7px}
.score-card{padding:8px 9px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}
.score-label{font-size:7px;color:#7897ad;font-weight:900;letter-spacing:1px}.score-val{font-size:17px;font-weight:950;margin-top:1px}
.board-wrap{position:relative;isolation:isolate}
.board{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);gap:var(--gap);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#183659,#102846);border:1px solid rgba(255,255,255,.055);box-shadow:inset 0 0 24px rgba(0,0,0,.26),0 18px 40px rgba(0,0,0,.24)}
.cell{position:relative;border-radius:6px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.018)}
.cell.filled{background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 25%),linear-gradient(145deg,var(--piece),var(--piece2));border-color:rgba(100,225,245,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 8px rgba(0,0,0,.22)}
.cell.preview{background:linear-gradient(145deg,#3e9fd9,#286faf)!important;border-color:rgba(150,218,255,.8)!important}
.cell.invalid{background:rgba(239,88,105,.36)!important;border-color:rgba(255,130,140,.9)!important}
.cell.invalid::after{content:"×";position:absolute;inset:0;display:grid;place-items:center;color:#ffd6db;font-weight:950;font-size:21px}
.cell.clear{background:linear-gradient(145deg,#48dc92,#23885f)!important;border-color:rgba(160,255,213,.92)!important;box-shadow:0 0 18px rgba(72,220,146,.4)}
.cell.clearing{animation:clear .36s ease forwards}@keyframes clear{45%{transform:scale(1.18);filter:brightness(1.8)}100%{transform:scale(.12);opacity:0}}
.status{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);padding:7px 10px;border-radius:999px;background:rgba(5,13,26,.9);font-size:9px;font-weight:950;opacity:0;z-index:20;white-space:nowrap}.status.show{opacity:1}.status.good{color:#8ff1bd}.status.bad{color:#ff9daa}.status.normal{color:#8ac9f0}
.tray{height:160px;display:grid;grid-template-columns:repeat(3,1fr);align-items:center}.slot{height:146px;display:flex;align-items:center;justify-content:center}
.piece{position:relative;touch-action:none;user-select:none;cursor:grab}.piece.dragging{transform:scale(1.45);z-index:100}.pblock{position:absolute;border-radius:7px;background:linear-gradient(180deg,rgba(255,255,255,.13),transparent 24%),linear-gradient(145deg,var(--piece),var(--piece2));border:1px solid rgba(100,225,245,.15);box-shadow:0 5px 10px rgba(0,0,0,.28)}
.ghost{position:fixed;z-index:2000;pointer-events:none;transform:scale(1.34);filter:drop-shadow(0 20px 26px rgba(0,0,0,.45))}
.hint{text-align:center;font-size:8px;color:#7899b1;margin-top:6px}
.panel{padding:14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}
.level-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.level-btn{aspect-ratio:1;border-radius:13px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.05);color:white;font-weight:900}.level-btn.locked{opacity:.28}
.rank-row{display:grid;grid-template-columns:30px 1fr auto;gap:7px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}.rank-row:last-child{border-bottom:0}.rank-num{color:var(--gold);font-weight:950}.name{font-size:11px;font-weight:900}.meta{font-size:8px;color:#7897ad}.big-score{font-size:13px;font-weight:950}
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:14px;background:rgba(5,13,28,.88);z-index:5000;overflow-y:auto}.overlay.show{display:flex}.modal{width:min(100%,420px);max-height:calc(100dvh - 24px);overflow-y:auto;padding:18px;border-radius:22px;background:linear-gradient(180deg,#1a3b62,#102846);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 70px rgba(0,0,0,.55)}
.range-row{margin-top:13px}.range-head{display:flex;justify-content:space-between;font-size:10px;font-weight:900;margin-bottom:6px}.range-head span:last-child{color:var(--cyan)}input[type=range]{width:100%;accent-color:#36bddc}
.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}.color{aspect-ratio:1;border:2px solid rgba(255,255,255,.08);border-radius:12px;background:var(--c)}.color.active{border-color:#fff;box-shadow:0 0 0 3px rgba(79,216,239,.22)}
.fx{position:absolute;inset:0;pointer-events:none;z-index:15}.particle{position:absolute;width:8px;height:8px;border-radius:3px;background:#53dba0;animation:p .6s ease-out forwards}@keyframes p{to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
@media(max-width:700px){.mode-grid{grid-template-columns:1fr 1fr}.level-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:480px){.app{padding:8px}.brand{font-size:20px}.hero{padding:15px}.hero h1{font-size:28px}.board-wrap,.tray,.game-head,.scorebar,.hint{max-width:none}.board{width:100%}.tray{height:145px}.slot{height:134px}.piece.dragging{transform:scale(1.42)}.ghost{transform:scale(1.30)}.game-head{display:grid;grid-template-columns:1fr 1fr}.game-head .chip:last-child{grid-column:1/-1;text-align:center}.scorebar{grid-template-columns:repeat(3,1fr)}}
@media(max-width:350px){.mode-grid{grid-template-columns:1fr}.scorebar{grid-template-columns:1fr 1fr}.scorebar .score-card:last-child{grid-column:1/-1}.level-grid{grid-template-columns:repeat(3,1fr)}}


/* V23.1 — JUICY FX, SAFE BUILD */

.board.hit{animation:boardHit231 .22s cubic-bezier(.2,.8,.2,1)}
@keyframes boardHit231{0%,100%{transform:scale(1)}45%{transform:scale(.988)}72%{transform:scale(1.006)}}

.board.shake{animation:shake231 .30s ease}
@keyframes shake231{0%,100%{transform:translate(0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(3px,1px)}}

.flash{position:absolute;inset:0;border-radius:18px;pointer-events:none;opacity:0;z-index:14;background:radial-gradient(circle,rgba(117,255,191,.34),rgba(71,219,146,.08),transparent 70%)}
.flash.go{animation:flash231 .58s ease-out}
@keyframes flash231{18%{opacity:1}100%{opacity:0}}

.shock{position:absolute;width:46px;height:46px;border-radius:999px;border:2px solid rgba(135,255,200,.82);transform:translate(-50%,-50%) scale(.18);animation:shock231 .60s ease-out forwards}
@keyframes shock231{to{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}

.spark{position:absolute;width:6px;height:18px;border-radius:999px;background:linear-gradient(180deg,#fff,#5be69e);box-shadow:0 0 10px rgba(91,230,158,.65);animation:spark231 .58s ease-out forwards}
@keyframes spark231{to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.25)}}

.combo-pop{position:absolute;left:50%;top:42%;transform:translate(-50%,8px) scale(.62);z-index:30;font-size:23px;font-weight:950;color:#f4fff9;text-shadow:0 0 18px rgba(85,230,157,.65);white-space:nowrap;animation:combo231 .92s ease-out forwards}
.combo-pop.big{font-size:29px;color:#ffe7a3;text-shadow:0 0 22px rgba(240,179,93,.72)}
@keyframes combo231{0%{opacity:0;transform:translate(-50%,12px) scale(.62)}18%{opacity:1;transform:translate(-50%,0) scale(1.14)}62%{opacity:1;transform:translate(-50%,-18px) scale(1)}100%{opacity:0;transform:translate(-50%,-68px) scale(.92)}}

.line-beam{position:absolute;pointer-events:none;z-index:13;background:linear-gradient(90deg,transparent,rgba(125,255,196,.76),#fff,rgba(125,255,196,.76),transparent);animation:beam231 .38s ease-out forwards}
.line-beam.v{background:linear-gradient(180deg,transparent,rgba(125,255,196,.76),#fff,rgba(125,255,196,.76),transparent)}
@keyframes beam231{0%{opacity:0;transform:scale(.45)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}

.confetti{position:absolute;width:8px;height:8px;border-radius:2px;animation:confetti231 .9s ease-out forwards}
@keyframes confetti231{to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.35)}}

.place-ring{position:absolute;width:32px;height:32px;border-radius:999px;border:2px solid rgba(92,214,255,.68);transform:translate(-50%,-50%) scale(.3);animation:ring231 .42s ease-out forwards}
@keyframes ring231{to{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}


/* =========================================================
   V24 PRO DRAG + FESTIVAL FX
   ========================================================= */

/* Drag sırasında tüm ekran/tahta maviye dönmesin */
.board{
  transition:transform .12s!important;
  box-shadow:inset 0 0 24px rgba(0,0,0,.26),0 18px 40px rgba(0,0,0,.24)!important;
}
.board.state-normal,
.board.state-clear,
.board.state-bad{
  box-shadow:inset 0 0 24px rgba(0,0,0,.26),0 18px 40px rgba(0,0,0,.24)!important;
}

/* sadece hedef hücrelerde renk */
.cell.preview{
  background:linear-gradient(145deg,#397eb9,#265e91)!important;
  border-color:rgba(143,203,248,.78)!important;
  box-shadow:0 0 10px rgba(69,142,201,.22)!important;
}
.cell.invalid{
  background:rgba(239,88,105,.40)!important;
  border-color:rgba(255,133,145,.92)!important;
  box-shadow:0 0 12px rgba(239,88,105,.20)!important;
}
.cell.clear{
  background:linear-gradient(145deg,#49df95,#23885f)!important;
  border-color:rgba(163,255,216,.96)!important;
  box-shadow:0 0 18px rgba(73,223,149,.48),0 0 32px rgba(73,223,149,.24)!important;
}

/* daha doğal büyüme */
.piece.dragging{
  transform:scale(1.50)!important;
  filter:brightness(1.08);
}
.ghost{
  transform:scale(1.36)!important;
  opacity:.94;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.38)) drop-shadow(0 0 10px rgba(79,216,239,.10))!important;
}

/* festival FX */
.fx-flare{
  position:absolute;
  width:10px;height:10px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 18px rgba(255,255,255,.9),0 0 32px rgba(76,229,155,.8);
  animation:flare24 .7s ease-out forwards;
}
@keyframes flare24{
  to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.15)}
}

.starburst{
  position:absolute;
  width:4px;height:34px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff,#74efb1,transparent);
  transform-origin:50% 100%;
  animation:star24 .72s ease-out forwards;
}
@keyframes star24{
  to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.2)}
}

.ripple{
  position:absolute;
  width:42px;height:42px;border-radius:50%;
  border:2px solid rgba(139,255,201,.82);
  transform:translate(-50%,-50%) scale(.12);
  animation:ripple24 .72s ease-out forwards;
}
@keyframes ripple24{
  to{opacity:0;transform:translate(-50%,-50%) scale(3.2)}
}

.combo-banner{
  position:absolute;
  left:50%;top:35%;
  transform:translate(-50%,10px) scale(.6);
  z-index:35;
  padding:8px 14px;
  border-radius:16px;
  background:rgba(7,22,32,.78);
  border:1px solid rgba(127,255,195,.28);
  color:#f6fffb;
  font-size:24px;
  font-weight:950;
  white-space:nowrap;
  text-shadow:0 0 20px rgba(96,235,161,.62);
  animation:comboBanner24 1.05s ease-out forwards;
}
.combo-banner.mega{
  color:#ffe8a3;
  border-color:rgba(240,179,93,.34);
  font-size:30px;
  text-shadow:0 0 24px rgba(240,179,93,.72);
}
@keyframes comboBanner24{
  0%{opacity:0;transform:translate(-50%,14px) scale(.58)}
  16%{opacity:1;transform:translate(-50%,0) scale(1.15)}
  64%{opacity:1;transform:translate(-50%,-22px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-82px) scale(.92)}
}

@media(max-width:480px){
  .piece.dragging{transform:scale(1.56)!important}
  .ghost{transform:scale(1.40)!important}
}


/* V24.1 — iOS/Android oyun alanında seçim/Kopyala menüsünü kapat */
.board,.board *,.tray,.tray *,.piece,.pblock,.ghost,.slot{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-user-drag:none!important;
  touch-action:none!important;
}
.board,.tray{
  -webkit-tap-highlight-color:transparent!important;
}