/* ============================================================
   2048 KURT EVRİMİ — oyun sayfası stilleri
   ============================================================ */
#w2 { --bs: min(440px, 92vw, calc(100dvh - 330px)); --gap: calc(var(--bs) * 0.028); --cell: calc((var(--bs) - var(--gap) * 5) / 4); }
#w2 { --bs: max(260px, min(440px, 92vw, calc(100dvh - 330px))); }

.w2-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: var(--bs); margin-top: 14px; }
.w2-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 7px 6px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line);
  font-family: "Fredoka", sans-serif; min-height: 58px;
}
.w2-box small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.w2-box b { font-size: 22px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
#w2-top { display: flex; align-items: center; gap: 4px; }
#w2-top img { width: 28px; height: 28px; object-fit: contain; }
#w2-top span { font-size: 17px; font-weight: 600; color: #ffcc33; }
.w2-tools { display: flex; gap: 8px; margin: 10px 0 12px; }
#w2-undo i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 99px; background: var(--violet); color: #fff; font-size: 11.5px; }

/* Tahta */
#w2-board {
  position: relative; width: var(--bs); height: var(--bs);
  padding: var(--gap); border-radius: calc(var(--bs) * 0.05);
  background: linear-gradient(160deg, #2a1d5c, #1a1238);
  border: 1px solid rgba(166, 123, 251, 0.35);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.03);
  touch-action: none; cursor: grab;
}
.w2-cells { position: absolute; inset: var(--gap); display: grid; grid-template-columns: repeat(4, var(--cell)); gap: var(--gap); }
.w2-cells i { width: var(--cell); height: var(--cell); border-radius: calc(var(--cell) * 0.16); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25); }
#w2-tiles { position: absolute; inset: var(--gap); }
.w2-tile {
  position: absolute; left: 0; top: 0;
  width: var(--cell); height: var(--cell);
  /* Konum "translate" ile, zıplama "transform: scale" ile: ikisi birbirini etkilemesin */
  translate: calc(var(--c) * (var(--cell) + var(--gap))) calc(var(--r) * (var(--cell) + var(--gap)));
  transition: translate 0.11s ease-out;
  will-change: translate;
}
.w2-tile::before {
  content: ""; position: absolute; inset: 0; border-radius: calc(var(--cell) * 0.16);
  background: radial-gradient(circle at 50% 35%, #fff 0%, color-mix(in srgb, var(--bg) 55%, #fff) 45%, var(--bg) 100%);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.16), 0 4px 10px rgba(0, 0, 0, 0.3);
}
.w2-tile img { position: absolute; left: 8%; top: 4%; width: 84%; height: 84%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)); }
.w2-tile b {
  position: absolute; right: 6%; bottom: 4%;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: calc(var(--cell) * 0.17); line-height: 1;
  padding: 2px 6px; border-radius: 99px; background: rgba(42, 26, 94, 0.82); color: #fff;
}
.w2-tile.legend::before { box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.16), 0 0 0 2px #ffcc33, 0 0 18px rgba(255, 204, 51, 0.55); }
.w2-tile[data-lv="11"]::before, .w2-tile.beyond::before {
  background: radial-gradient(circle at 50% 35%, #6c4bd8 0%, #2a1f6b 60%, #120c33 100%);
  animation: w2-cosmic 2.4s ease-in-out infinite;
}
@keyframes w2-cosmic { 50% { box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #ffcc33, 0 0 28px rgba(255, 204, 51, 0.8); } }
.w2-tile.new { animation: w2-new 0.2s ease-out 0.08s both; }
@keyframes w2-new { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
.w2-tile.pop { animation: w2-pop 0.25s cubic-bezier(.34,1.56,.64,1); }
@keyframes w2-pop { 0% { transform: scale(1); } 45% { transform: scale(1.2); } 100% { transform: scale(1); } }
#w2-board.nudge[data-nudge="left"] { animation: w2-nl 0.2s ease; }
#w2-board.nudge[data-nudge="right"] { animation: w2-nr 0.2s ease; }
#w2-board.nudge[data-nudge="up"] { animation: w2-nu 0.2s ease; }
#w2-board.nudge[data-nudge="down"] { animation: w2-nd 0.2s ease; }
@keyframes w2-nl { 50% { translate: -5px 0; } }
@keyframes w2-nr { 50% { translate: 5px 0; } }
@keyframes w2-nu { 50% { translate: 0 -5px; } }
@keyframes w2-nd { 50% { translate: 0 5px; } }

/* Evrim koleksiyonu */
.w2-evo-wrap { width: var(--bs); margin-top: 14px; text-align: center; padding: 9px 10px 11px; border-radius: 18px; background: linear-gradient(180deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.05)); border: 1px solid rgba(166, 123, 251, 0.3); box-sizing: border-box; }
.w2-evo-wrap > small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.w2-evo { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; margin-top: 6px; }
.w2-evo-i { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 9px; background: rgba(255, 255, 255, 0.05); cursor: pointer; }
.w2-evo-i img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(0.25); opacity: 0.5; }
.w2-evo-i small { display: none; }
.w2-evo-i.got { background: var(--bg); }
.w2-evo-i.got img { filter: none; opacity: 1; }
.w2-evo-i.flash { animation: w2-pop 0.6s cubic-bezier(.34,1.56,.64,1) 2; box-shadow: 0 0 0 2px #ffcc33; }
.w2-evo-h { grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 14px; }
.w2-evo-h .w2-evo-i small { display: block; position: absolute; bottom: 2px; right: 4px; font-family: "Fredoka", sans-serif; font-size: 10px; color: #2a1a5e; }

/* Pencereler */
.w2-end-tile { width: 96px; height: 96px; margin: 0 auto; border-radius: 22px; background: radial-gradient(circle at 50% 35%, #fff, var(--bg)); box-shadow: 0 0 0 3px #ffcc33, 0 0 30px rgba(255, 204, 51, 0.5); display: flex; align-items: center; justify-content: center; animation: w2-pop 0.6s cubic-bezier(.34,1.56,.64,1) 0.3s both; }
.w2-end-tile img { width: 88%; height: 88%; object-fit: contain; }
.w2-demo { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0; font-family: "Fredoka", sans-serif; font-size: 22px; color: var(--ink-dim); }
.w2-demo i { font-style: normal; }
.w2-demo span { width: 54px; height: 54px; border-radius: 14px; background: radial-gradient(circle at 50% 35%, #fff, var(--bg)); display: flex; align-items: center; justify-content: center; }
.w2-demo span.big { width: 66px; height: 66px; box-shadow: 0 0 0 2px #ffcc33; animation: w2-pop 1.2s ease-in-out infinite; }
.w2-demo img { width: 88%; height: 88%; object-fit: contain; }
.g-row-main img[style] { padding: 2px; }

@media (max-width: 640px) {
  #w2 { --bs: max(260px, min(440px, calc(100vw - 32px), calc(100dvh - 300px))); }
  .w2-box { min-height: 52px; }
  .w2-box b { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .w2-tile { transition: none; } .w2-tile.new, .w2-tile.pop { animation: none; } }