:root{
  --rose-0:#fff7fb;
  --rose-1:#ffe7f0;
  --rose-2:#ffd7e7;
  --rose-3:#f7bed8;
  --rose-4:#ee9fc3;
  --rose-5:#da74a5;
  --rose-6:#bc4f82;
  --rose-7:#8b345e;
  --rose-8:#5d1c3b;
  --board-gap: 14px;
}

html.touch-lock-page,
body.touch-lock-page{
  overflow:hidden;
  overscroll-behavior:none;
  height:100%;
}

.page-2048 .board-card,
.page-2048 .board-shell,
.page-2048 .board-shell *{
  touch-action:none;
  -ms-touch-action:none;
}

body{
  background:
    radial-gradient(1200px 900px at 10% 10%, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(1000px 800px at 90% 0%, rgba(255,255,255,.5), transparent 52%),
    linear-gradient(180deg, #f9d5d3 0%, #f7dce3 35%, #f4cad7 100%);
}

.page-2048{ max-width: 1240px; }
.game-shell{
  position: relative;
  overflow: hidden;
  margin: 24px auto 44px;
  padding: 28px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.46);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 36px 90px rgba(88, 36, 62, .16), inset 0 1px 0 rgba(255,255,255,.55);
}

.glass-orb{
  position:absolute; border-radius:50%; filter: blur(6px); opacity:.75; pointer-events:none;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.2) 35%, rgba(206,103,152,.2) 55%, rgba(122,36,82,.1) 75%, transparent 78%);
}
.orb-a{ width:240px; height:240px; top:-90px; right:-60px; }
.orb-b{ width:180px; height:180px; left:-40px; bottom:120px; }
.orb-c{ width:140px; height:140px; right:28%; bottom:-20px; }

.game-hero{
  position:relative;
  z-index:1;
  display:flex; justify-content:space-between; align-items:flex-start; gap:18px;
  margin-bottom: 20px;
}
.game-hero h1{
  margin:10px 0 8px;
  font-size: clamp(40px, 7vw, 74px);
  line-height: .95;
  letter-spacing: -1px;
  color:#4f1936;
}
.hero-copy{
  max-width: 660px;
  margin:0;
  font-size: 16px;
  line-height: 1.65;
  color:#6e4560;
}
.hero-actions{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end;
}

.lux-btn{
  border:none; cursor:pointer;
  border-radius: 16px;
  padding: 14px 18px;
  font: inherit;
  font-weight: 800;
  color:#fff;
  background: linear-gradient(180deg, #5b223f, #351121);
  box-shadow: 0 18px 38px rgba(69, 18, 43, .28), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .16s ease, filter .2s ease, box-shadow .2s ease;
}
.lux-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 22px 44px rgba(69,18,43,.32), inset 0 1px 0 rgba(255,255,255,.16); }
.lux-btn.ghost{ background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.5); color:#fff; box-shadow:none; }

.lock-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.6);
  color:#6f3555;
  font-weight:800;
  border:1px solid rgba(255,255,255,.55);
  box-shadow: 0 12px 28px rgba(122, 54, 90, .12);
}
.lock-chip::before{
  content:'';
  width:10px; height:10px; border-radius:50%; background:#e779a7;
  box-shadow:0 0 0 6px rgba(231,121,167,.12);
}
.lock-chip.unlocked::before{ background:#6dca9b; box-shadow:0 0 0 6px rgba(109,202,155,.14); }

.hud-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px;
  margin-bottom: 20px;
}
.hud-card{
  padding:18px 18px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.6);
  box-shadow: 0 18px 34px rgba(120,54,85,.08);
}
.hud-card span{ display:block; font-size:13px; color:#8c6780; margin-bottom:6px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.hud-card strong{ font-size: clamp(24px, 4vw, 34px); color:#4d1834; }

.game-layout{
  position:relative; z-index:1;
  display:grid; grid-template-columns: minmax(0, 1fr) 320px; gap:20px;
}
.board-card,
.side-card{
  border-radius: 28px;
  background: rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.58);
  box-shadow: 0 24px 56px rgba(98, 32, 64, .12);
}
.board-card{ padding: 18px; }
.side-card{ padding: 22px; display:flex; flex-direction:column; gap:22px; }

.board-topline{
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:16px;
}
.board-topline small{ display:block; color:#9a7389; font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; }
.board-topline strong{ font-size:22px; color:#4a1732; }
.board-inline-note{ color:#6e4660; font-weight:700; font-size:14px; text-align:right; }

.board-shell{
  position:relative;
  width:min(100%, 620px);
  aspect-ratio:1;
  margin:0 auto;
  padding: var(--board-gap);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(117,31,70,.22), rgba(94,20,52,.18)),
    rgba(103, 30, 60, .2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -30px 60px rgba(80, 12, 39, .18),
    0 26px 70px rgba(80, 12, 39, .2);
  overflow:hidden;
  touch-action:none;
  overscroll-behavior:contain;
  -webkit-user-select:none;
  user-select:none;
}
.board-shell.locked::after{
  content:'Soru çözülmeden hamle yapılamaz';
  position:absolute; inset:auto 20px 20px 20px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.7);
  color:#67354e;
  font-weight:800;
  text-align:center;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(79,17,44,.12);
}
.board-shell.unlocked::after{ display:none; }

.board-grid{
  height:100%;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--board-gap);
}
.board-grid div{
  border-radius: 20px;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.08), inset 0 -8px 20px rgba(73, 8, 33, .08);
}

.tile-layer,
.particle-layer{
  position:absolute;
  inset: var(--board-gap);
}
.tile{
  position:absolute;
  width: calc((100% - (var(--board-gap) * 3)) / 4);
  height: calc((100% - (var(--board-gap) * 3)) / 4);
  left: calc(var(--x) * (((100% - (var(--board-gap) * 3)) / 4) + var(--board-gap)));
  top: calc(var(--y) * (((100% - (var(--board-gap) * 3)) / 4) + var(--board-gap)));
  border-radius: 22px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  letter-spacing: -.04em;
  text-shadow: 0 2px 12px rgba(255,255,255,.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -14px 20px rgba(70, 9, 33, .12),
    0 16px 28px rgba(87, 17, 45, .22);
  transition: left .13s cubic-bezier(.2,.9,.22,1), top .13s cubic-bezier(.2,.9,.22,1), transform .18s cubic-bezier(.24,.95,.32,1), filter .2s ease;
  user-select:none;
}
.tile span{ transform: translateY(2px); }
.tile.new{ animation: tilePop .18s ease; }
.tile.merged{ animation: tileMerge .24s ease; }
@keyframes tilePop{
  0%{ transform: scale(.76); }
  100%{ transform: scale(1); }
}
@keyframes tileMerge{
  0%{ transform: scale(.92); }
  55%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}

.tile.value-2 span,
.tile.value-4 span,
.tile.value-8 span,
.tile.value-16 span{ font-size: clamp(32px, 5vw, 58px); }
.tile.value-32 span,
.tile.value-64 span,
.tile.value-128 span{ font-size: clamp(28px, 4.6vw, 52px); }
.tile.value-256 span,
.tile.value-512 span,
.tile.value-1024 span{ font-size: clamp(24px, 4vw, 44px); }
.tile.value-2048 span,
.tile.value-4096 span,
.tile.value-8192 span{ font-size: clamp(22px, 3.6vw, 40px); }

.particle-layer{ pointer-events:none; overflow:hidden; }
.particle{
  position:absolute;
  width: var(--size); height: var(--size); border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,255,255,.65) 35%, rgba(235,114,171,.7) 60%, rgba(149,44,96,.25) 100%);
  left: var(--left); top: var(--top);
  transform: translate(-50%, -50%);
  animation: particleBurst .55s ease forwards;
  opacity:.95;
}
@keyframes particleBurst{
  to{
    opacity:0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.35);
  }
}

.game-message{
  min-height: 28px;
  padding-top:14px;
  text-align:center;
  font-weight:700;
  color:#6f4660;
}
.game-message.win{ color:#4a1834; }
.game-message.over{ color:#8b244f; }

.side-section h2{ margin:6px 0 10px; font-size: 28px; color:#4b1632; }
.side-section p{ margin:0; color:#6f4a61; line-height:1.7; }
.side-section.compact p{ font-size:14px; }
.side-label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:900; color:#9b6e86;
}
.side-label::before{
  content:''; width:8px; height:8px; border-radius:50%; background:#e783ae;
}
.target-list{ display:grid; gap:12px; }
.target-pill{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.64);
  color:#5d2742;
  font-weight:900;
}
.target-pill span{ color:#926c82; font-size:13px; font-weight:700; }
.target-pill.danger{ background: linear-gradient(180deg, rgba(116,23,58,.9), rgba(74,10,32,.95)); color:#fff; }
.target-pill.danger span{ color: rgba(255,255,255,.78); }

.quiz-overlay{
  position:fixed; inset:0; z-index:120000;
  display:grid; place-items:center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(254,244,248,.42), rgba(244,203,220,.58));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: opacity .34s ease, visibility .34s ease;
}
.quiz-overlay.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.quiz-card{
  width:min(700px, 94vw);
  padding: 26px;
  border-radius: 30px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.7);
  box-shadow: 0 36px 90px rgba(92, 26, 54, .18), inset 0 1px 0 rgba(255,255,255,.62);
}
.quiz-badge{
  display:inline-flex; padding:8px 12px; border-radius:999px;
  background:#fff0f7; color:#a64d78; font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:12px;
}
.quiz-card h2{ margin:14px 0 8px; font-size:clamp(28px, 5vw, 40px); color:#4d1734; }
.quiz-stage.hidden{ display:none; }
.player-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px;
  margin-top: 18px;
}
.player-option{
  position:relative;
  min-height: 190px;
  padding: 20px;
  border-radius: 24px;
  border:1px solid rgba(230, 187, 207, .78);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,239,246,.92));
  box-shadow: 0 22px 44px rgba(122, 52, 87, .1), inset 0 1px 0 rgba(255,255,255,.92);
  text-align:left;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.player-option:hover{
  transform: translateY(-2px);
  border-color: rgba(182, 75, 122, .44);
  box-shadow: 0 28px 52px rgba(122, 52, 87, .16), inset 0 1px 0 rgba(255,255,255,.96);
}
.player-option:focus-visible{ outline: 2px solid rgba(139,52,94,.48); outline-offset: 2px; }
.player-option strong{
  display:block;
  margin-top: 10px;
  font-size: clamp(28px, 5vw, 40px);
  color:#4b1733;
}
.player-option b{
  display:block;
  margin-top: 10px;
  font-size: clamp(34px, 6vw, 52px);
  line-height:1;
  color:#8b345e;
}
.player-kicker,
.player-meta{
  display:block;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.player-kicker{ color:#a46a87; font-size:12px; }
.player-meta{ margin-top: 18px; color:#8e6780; font-size:11px; }
.quiz-player{
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,240,246,.95);
  border:1px solid rgba(227, 185, 204, .7);
  color:#8b345e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.quiz-copy{ margin:0; color:#7b566d; line-height:1.7; }
.quiz-meta{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  margin: 18px 0 14px;
  color:#8c6680; font-weight:800;
}
.quiz-question{
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,239,246,.95));
  border: 1px solid rgba(234,186,209,.68);
  color:#4f1834;
  font-size: clamp(18px, 3vw, 24px);
  line-height:1.55;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.quiz-options{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px;
  margin-top: 16px;
}
.quiz-option{
  min-height: 70px;
  display:flex; align-items:center; justify-content:flex-start;
  padding: 16px 18px;
  border-radius: 18px;
  border:1px solid rgba(221, 180, 200, .75);
  background: rgba(255,255,255,.85);
  color:#57203d;
  font: inherit;
  font-weight:800;
  cursor:pointer;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 14px 30px rgba(122, 52, 87, .08);
}
.quiz-option:hover{ transform: translateY(-1px); box-shadow: 0 18px 36px rgba(122,52,87,.14); }
.quiz-option.correct{ background: linear-gradient(180deg, #def8ea, #c8f0d9); border-color:#8fd0af; color:#226246; }
.quiz-option.wrong{ background: linear-gradient(180deg, #ffe3ec, #ffd0df); border-color:#f1a2bc; color:#8d3559; }
.quiz-feedback{
  min-height: 26px;
  margin-top: 16px;
  font-weight:800;
  color:#7a4d66;
}
.quiz-feedback.ok{ color:#2f7d57; }
.quiz-feedback.no{ color:#a13c64; }

.jumpscare-overlay{
  position:fixed; inset:0; z-index:140000;
  display:grid; place-items:center;
  background:#000;
}
.jumpscare-overlay.hidden{ display:none; }
.jumpscare-media{
  width:min(92vw, 980px);
  max-height: 88vh;
  object-fit:contain;
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 40px 80px rgba(0,0,0,.65);
  animation: scarePulse .22s steps(2) 6 alternate;
}
.jumpscare-flash{
  position:absolute; inset:0;
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,.15) 35%, rgba(0,0,0,.95) 68%);
  mix-blend-mode:screen;
  animation: flashCut .45s ease-out forwards;
}
@keyframes flashCut{
  from{ opacity:1; }
  to{ opacity:0; }
}
@keyframes scarePulse{
  from{ transform:scale(.98); filter:contrast(1.1) saturate(1.05); }
  to{ transform:scale(1.03); filter:contrast(1.28) saturate(1.2); }
}
.jumpscare-controls{
  position:absolute; right:24px; bottom:24px;
}

@media (max-width: 1040px){
  .game-layout{ grid-template-columns: 1fr; }
  .side-card{ order:-1; }
}
@media (max-width: 820px){
  .game-shell{ padding:20px; border-radius:28px; }
  .game-hero{ flex-direction:column; }
  .hud-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .player-grid{ grid-template-columns: 1fr; }
  .page-2048{ padding:0 10px; }
  .game-shell{ margin: 16px auto 28px; padding:16px; }
  .hud-grid{ grid-template-columns: 1fr 1fr; gap:10px; }
  .board-card{ padding: 14px; }
  .side-card{ padding:16px; }
  .quiz-card{ padding: 18px; border-radius: 24px; }
  .quiz-options{ grid-template-columns: 1fr; }
  .board-topline{ flex-direction:column; align-items:flex-start; }
  .board-inline-note{ text-align:left; }
  .jumpscare-controls{ left:16px; right:16px; bottom:16px; }
  .jumpscare-controls .lux-btn{ width:100%; }
}