/* Ali Bul — zümrüt yeşili ve altın; telefon ve masaüstü için tek düzen */
:root {
  --bg: #04130f; --bg2: #072a21; --card: rgb(255 255 255 / .06); --line: rgb(255 255 255 / .12);
  --ink: #f4f1e6; --muted: #a9bdb4; --gold: #f5c542; --gold2: #ffdf7e; --green: #22c55e; --red: #ef4444; --emerald: #0f766e;
  --r: 18px; --f-d: "Baloo 2", system-ui, sans-serif; --f-b: "Nunito", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; color: var(--ink); background: var(--bg); font: 16px/1.45 var(--f-b); overflow-x: hidden; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
img { -webkit-user-drag: none; }

/* hareketli zemin */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 80% at 50% -10%, #0d4a3b 0%, var(--bg2) 40%, var(--bg) 100%); }
.bg span { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(70px); opacity: .35; animation: drift 22s ease-in-out infinite alternate; }
.bg span:nth-child(1) { background: #10b981; left: -20vmax; top: -10vmax; }
.bg span:nth-child(2) { background: #f5c542; right: -25vmax; top: 30vh; opacity: .16; animation-duration: 28s; }
.bg span:nth-child(3) { background: #0e7490; left: 10vw; bottom: -30vmax; opacity: .25; animation-duration: 34s; }
@keyframes drift { to { transform: translate(8vmax, -6vmax) scale(1.15); } }

.screen { min-height: 100%; max-width: 980px; margin: 0 auto; padding: calc(14px + var(--safe-t)) 16px calc(20px + var(--safe-b)); display: flex; flex-direction: column; gap: 16px; }

/* ---------- ana ekran ---------- */
.home-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lvl { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.lvl b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 17px var(--f-d); color: #3b2600; background: linear-gradient(140deg, var(--gold2), var(--gold)); }
.lvl small { display: block; font-weight: 800; font-size: 13px; color: var(--gold2); }
.lvl i { display: block; width: 120px; height: 6px; border-radius: 6px; background: rgb(255 255 255 / .12); overflow: hidden; margin-top: 3px; }
.lvl i span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--green)); transition: width .6s; }
.icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--card); border: 1px solid var(--line); backdrop-filter: blur(10px); transition: transform .15s; }
.icon:active { transform: scale(.92); }

.hero { text-align: center; display: grid; justify-items: center; gap: 2px; padding-top: 6px; }
.hero h1 { margin: 8px 0 0; font: 800 clamp(44px, 11vw, 76px)/1 var(--f-d); letter-spacing: -.01em; text-shadow: 0 6px 30px rgb(0 0 0 / .4); }
.hero h1 span { color: var(--gold); }
.hero p { margin: 4px 0 0; color: var(--muted); font-weight: 700; }
.fan { position: relative; width: 260px; height: 170px; }
.fan img { position: absolute; left: 50%; bottom: 0; width: 96px; height: 128px; object-fit: cover; border-radius: 14px; border: 3px solid rgb(255 255 255 / .85);
  box-shadow: 0 12px 30px rgb(0 0 0 / .45); transform-origin: 50% 120%; animation: fanIn .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes fanIn { from { transform: translateX(-50%) rotate(0) translateY(40px); opacity: 0; } }
.fan img.mid { z-index: 2; width: 110px; height: 146px; animation: fanIn .9s cubic-bezier(.2, 1.4, .4, 1) both, bob 3.2s ease-in-out 1s infinite; }
@keyframes bob { 50% { transform: translateX(-50%) translateY(-8px) rotate(0); } }

.modes { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .modes { grid-template-columns: repeat(3, 1fr); } }
.mode { position: relative; display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; border-radius: var(--r); background: linear-gradient(160deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03));
  border: 1px solid var(--line); backdrop-filter: blur(12px); transition: transform .18s, border-color .18s, box-shadow .18s; overflow: hidden; }
.mode:hover { border-color: rgb(245 197 66 / .6); box-shadow: 0 10px 30px rgb(0 0 0 / .3); transform: translateY(-2px); }
.mode:active { transform: scale(.98); }
@media (min-width: 760px) { .mode { flex-direction: column; align-items: flex-start; min-height: 190px; } }
.m-ic { font-size: 30px; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgb(0 0 0 / .25); flex: none; }
.m-tx b { display: block; font: 800 22px/1.1 var(--f-d); }
.m-tx small { display: block; color: var(--muted); font-weight: 600; margin-top: 3px; }
.m-best { position: absolute; top: 10px; right: 12px; font: 800 12px var(--f-d); color: var(--gold2); }

.badges h2 { font: 800 20px var(--f-d); margin: 4px 0 8px; display: flex; gap: 8px; align-items: baseline; }
.badges h2 small { color: var(--muted); font: 700 13px var(--f-b); }
.badge-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.badge { padding: 10px 6px; border-radius: 14px; text-align: center; background: var(--card); border: 1px solid var(--line); filter: grayscale(1); opacity: .45; }
.badge.on { filter: none; opacity: 1; border-color: rgb(245 197 66 / .5); background: linear-gradient(160deg, rgb(245 197 66 / .18), rgb(255 255 255 / .04)); }
.badge span { font-size: 26px; display: block; }
.badge b { display: block; font: 700 12.5px/1.15 var(--f-b); margin-top: 4px; }

/* ---------- oyun ekranı ---------- */
#game { gap: 10px; height: 100%; min-height: 100dvh; }
.hud { display: flex; align-items: center; gap: 12px; }
.hud-mid { flex: 1; min-width: 0; }
.hud-mid b { display: block; font: 800 22px/1.1 var(--f-d); }
.hud-mid small { color: var(--muted); font-weight: 700; }
.score { text-align: right; }
.score small { display: block; color: var(--muted); font-weight: 700; font-size: 12px; }
.score b { font: 800 26px/1 var(--f-d); color: var(--gold); font-variant-numeric: tabular-nums; }
.score b.bump { animation: bump .45s; }
@keyframes bump { 40% { transform: scale(1.35); color: var(--gold2); } }
.hud2 { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.lives { display: flex; gap: 4px; font-size: 22px; }
.lives .h { transition: transform .3s, filter .3s, opacity .3s; }
.lives .h.lost { filter: grayscale(1); opacity: .3; transform: scale(.8); }
.lives .h.pop { animation: heartPop .5s; }
@keyframes heartPop { 40% { transform: scale(1.6) rotate(-12deg); } }
.combo { margin-left: auto; font: 800 15px var(--f-d); padding: 3px 12px; border-radius: 999px; color: #3b2600; background: linear-gradient(140deg, var(--gold2), var(--gold)); animation: bump .4s; }
.moves { margin-left: auto; font: 800 15px var(--f-d); color: var(--muted); }
.timer { height: 8px; border-radius: 8px; background: rgb(255 255 255 / .1); overflow: hidden; }
.timer i { display: block; height: 100%; width: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--green), var(--gold)); transform-origin: left; }
.timer i.low { background: linear-gradient(90deg, var(--red), #f97316); }
.hint { margin: 0; text-align: center; font: 700 17px var(--f-d); color: var(--gold2); min-height: 26px; }

.board { position: relative; flex: 1; min-height: 320px; }
.card { position: absolute; left: 0; top: 0; perspective: 900px; transition: transform var(--td, .55s) cubic-bezier(.45, 0, .2, 1), opacity .3s; will-change: transform; }
.card.fast { transition-duration: var(--sd, .4s); }
.card .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform var(--fd, .5s) cubic-bezier(.3, 1.3, .5, 1); }
.card.up .in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: 0 8px 22px rgb(0 0 0 / .35); }
.face.front { transform: rotateY(180deg); background: #111; border: 3px solid rgb(255 255 255 / .9); }
.face.front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face.back { display: grid; place-items: center; border: 2px solid rgb(245 197 66 / .55);
  background: radial-gradient(circle at 30% 20%, rgb(255 255 255 / .18), transparent 40%), repeating-linear-gradient(45deg, #0b4b3c 0 10px, #0a3f33 10px 20px); }
.face.back::after { content: "?"; font: 800 clamp(26px, 6vw, 44px) var(--f-d); color: var(--gold); text-shadow: 0 2px 0 #3b2600; }
.card.tap .in { cursor: pointer; }
.card.good .face.front { border-color: var(--green); box-shadow: 0 0 0 4px rgb(34 197 94 / .55), 0 0 40px rgb(34 197 94 / .6); }
.card.bad { animation: shake .45s; }
.card.bad .face.front { border-color: var(--red); box-shadow: 0 0 0 4px rgb(239 68 68 / .5); }
.card.done { opacity: .9; }
.card.match .in { animation: matchPop .5s; }
@keyframes matchPop { 50% { transform: rotateY(180deg) scale(1.12); } }
@keyframes shake { 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 8px 0; } }
.card.lift { z-index: 5; }

/* ---------- pencereler ---------- */
.sheet, .modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / .55); backdrop-filter: blur(6px); animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.sheet-card, .modal-card { width: 100%; max-width: 380px; display: grid; gap: 10px; padding: 22px; border-radius: 24px; text-align: center;
  background: linear-gradient(170deg, #0d3a2f, #061c16); border: 1px solid rgb(245 197 66 / .35); box-shadow: 0 30px 80px rgb(0 0 0 / .6); animation: pop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.7) translateY(30px); opacity: 0; } }
.sheet-card h2, .modal-card h2 { margin: 0; font: 800 30px/1.1 var(--f-d); }
.diff { padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-align: left; }
.diff b { display: block; font: 800 19px var(--f-d); }
.diff small { color: var(--muted); font-weight: 700; }
.diff:hover { border-color: var(--gold); }
.ghost { padding: 12px; border-radius: 14px; color: var(--muted); font-weight: 800; }
.primary { padding: 14px; border-radius: 16px; font: 800 19px var(--f-d); color: #3b2600; background: linear-gradient(140deg, var(--gold2), var(--gold)); box-shadow: 0 8px 22px rgb(245 197 66 / .35); }
.primary:active { transform: scale(.97); }
.m-img img { width: min(240px, 70vw); max-height: 42vh; object-fit: cover; border-radius: 18px; border: 4px solid #fff; box-shadow: 0 16px 40px rgb(0 0 0 / .5); }
.modal.win .m-img img { animation: winSpin .9s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes winSpin { from { transform: rotate(-12deg) scale(.4); } }
.modal.lose .m-img img { animation: loseDrop .7s cubic-bezier(.2, 1.3, .4, 1); filter: saturate(.85); }
@keyframes loseDrop { from { transform: translateY(-60px) rotate(8deg); opacity: 0; } }
.m-img .trophy { font-size: 84px; display: block; animation: winSpin .9s cubic-bezier(.2, 1.4, .4, 1); }
.modal-card p { margin: 0; color: var(--muted); font-weight: 700; }
.modal.win h2 { color: var(--gold); }
.modal.lose h2 { color: #fca5a5; }
.stars { font-size: 34px; letter-spacing: 4px; min-height: 0; }
.stars span { display: inline-block; animation: starIn .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.stars span.off { filter: grayscale(1); opacity: .3; }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } }
.m-stats { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.m-stats div { padding: 8px 12px; border-radius: 12px; background: rgb(0 0 0 / .25); }
.m-stats small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.m-stats b { font: 800 20px var(--f-d); }
.m-stats .rec { color: var(--gold); }
.m-btns { display: grid; gap: 6px; margin-top: 4px; }

/* bulunca / yanılınca kısa gösterim */
.flash { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none; }
.flash img { width: min(170px, 44vw); aspect-ratio: 4/5; object-fit: cover; border-radius: 18px; border: 4px solid #fff; box-shadow: 0 20px 50px rgb(0 0 0 / .55); animation: flashIn var(--fl, .9s) cubic-bezier(.2, 1.4, .4, 1) both; grid-area: 1/1; }
.flash b { grid-area: 1/1; align-self: end; margin-bottom: 18vh; font: 800 clamp(30px, 8vw, 48px) var(--f-d); color: var(--gold); text-shadow: 0 4px 20px rgb(0 0 0 / .6); animation: flashIn var(--fl, .9s) cubic-bezier(.2, 1.4, .4, 1) .05s both; }
.flash.bad b { color: #fca5a5; }
@keyframes flashIn { 0% { transform: scale(.3) rotate(-10deg); opacity: 0; } 15% { transform: scale(1.08); opacity: 1; } 88% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }

.toasts { position: fixed; left: 50%; top: calc(12px + var(--safe-t)); transform: translateX(-50%); z-index: 50; display: grid; gap: 8px; width: min(360px, 92vw); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(140deg, #3b2a05, #1b1302); border: 1px solid var(--gold); box-shadow: 0 12px 30px rgb(0 0 0 / .5); animation: toastIn 3.2s both; font-weight: 800; }
.toast span { font-size: 26px; }
.toast small { display: block; color: var(--gold2); font-size: 12px; }
@keyframes toastIn { 0% { transform: translateY(-30px); opacity: 0; } 10%, 85% { transform: none; opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }

#confetti { position: fixed; inset: 0; z-index: 45; pointer-events: none; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; } }
.timer i { transition: transform .06s linear; }

/* yanlışta bekleyen pencere ve kaybetme görseli: geniş */
.modal.lose .m-img img { width: min(420px, 88vw); max-height: 56vh; height: auto; object-fit: contain; background: #000; }
.modal.lose .modal-card, .modal.quiz .modal-card { max-width: 460px; }
/* soru */
.qopts { display: grid; gap: 8px; margin-top: 4px; }
.qopt { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-weight: 700; transition: background .2s, border-color .2s, opacity .2s; }
.qopt i { font-style: normal; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: rgb(0 0 0 / .3); font: 800 15px var(--f-d); color: var(--gold2); }
.qopt:hover { border-color: rgb(255 255 255 / .35); }
.qopt.right { background: rgb(34 197 94 / .25); border-color: var(--green); }
.qopt.wrong { background: rgb(239 68 68 / .25); border-color: var(--red); animation: shake .45s; }
.qopt.dim { opacity: .45; }
.modal.quiz #mText { color: var(--ink); font: 700 18px/1.35 var(--f-b); }

/* ===================== v3: kaydırmasız tam ekran oyun düzeni ===================== */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
body { position: fixed; inset: 0; }
.screen { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; gap: clamp(8px, 1.6vh, 16px);
  padding: calc(10px + var(--safe-t)) 16px calc(12px + var(--safe-b)); }
#home { justify-content: space-between; }
.hero { flex: 1 1 auto; min-height: 0; align-content: center; padding-top: 0; }
.fan { width: 260px; height: clamp(90px, 21vh, 170px); }
.fan img { width: clamp(62px, 12vh, 96px); height: auto; aspect-ratio: 3/4; }
.fan img.mid { width: clamp(72px, 14vh, 110px); height: auto; }
.hero h1 { font-size: clamp(36px, min(11vw, 8vh), 76px); margin-top: 4px; }
.hero p { font-size: clamp(13px, 1.9vh, 16px); }
.modes { gap: clamp(6px, 1.2vh, 12px); flex: none; }
.mode { padding: clamp(9px, 1.6vh, 16px) 14px; }
.m-ic { width: clamp(42px, 6.5vh, 56px); height: clamp(42px, 6.5vh, 56px); font-size: clamp(22px, 3.4vh, 30px); }
.m-tx b { font-size: clamp(18px, 2.7vh, 22px); }
@media (max-height: 700px) { .m-tx small { display: none; } }
@media (max-height: 560px) { .hero p { display: none; } .fan { height: 76px; } }
@media (min-width: 760px) { .mode { min-height: 0; } }

.lvl { color: inherit; text-align: left; cursor: pointer; }
.lvl:active { transform: scale(.97); }
.top-r { display: flex; gap: 8px; }

/* canlar */
.hearts-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; flex: none; }
.hearts, .lives { display: flex; gap: 3px; font-size: clamp(20px, 3.2vh, 26px); line-height: 1; }
.hearts .h, .lives .h { transition: transform .3s, filter .3s, opacity .3s; }
.hearts .h.lost, .lives .h.lost { filter: grayscale(1); opacity: .28; transform: scale(.8); }
.lives .h.pop { animation: heartPop .5s; }
.earn { padding: 7px 14px; border-radius: 999px; font: 800 14px var(--f-d); color: #3b2600; background: linear-gradient(140deg, var(--gold2), var(--gold)); box-shadow: 0 6px 18px rgb(245 197 66 / .3); animation: bump 1.6s 1s infinite; }
.earn:active { transform: scale(.96); }

.badges-btn { flex: none; align-self: center; padding: 9px 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font: 800 16px var(--f-d); backdrop-filter: blur(10px); }
.badges-btn small { color: var(--muted); font: 700 13px var(--f-b); margin-left: 4px; }

/* pencereler ekrana sığsın, içleri kaysın */
.sheet-card, .modal-card { max-height: calc(100dvh - 32px - var(--safe-t) - var(--safe-b)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet-card .sub { margin: -4px 0 0; color: var(--muted); font-weight: 700; font-size: 14px; }
#badgeSheet .sheet-card, #lvlSheet .sheet-card { max-width: 460px; }
.badge-row { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.badge small { display: block; color: var(--muted); font-size: 11px; line-height: 1.2; margin-top: 3px; }
.badge em { display: block; font: 800 12px var(--f-d); font-style: normal; color: var(--gold2); margin-top: 4px; }
.lvl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.lvl-list li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 4px 10px; padding: 9px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.lvl-list li span { font-size: 22px; text-align: center; }
.lvl-list li b { font: 800 16px var(--f-d); }
.lvl-list li small { color: var(--muted); font-weight: 700; font-size: 12px; }
.lvl-list li.lock { opacity: .5; }
.lvl-list li.done b::after { content: " ✓"; color: var(--green); }
.lvl-list li.cur { border-color: var(--gold); background: linear-gradient(160deg, rgb(245 197 66 / .2), rgb(255 255 255 / .04)); }
.lvl-list li i { grid-column: 2 / 4; display: block; height: 6px; border-radius: 6px; background: rgb(255 255 255 / .12); overflow: hidden; }
.lvl-list li i em { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--green)); }

/* oyun ekranı: tahta kalan alanı doldurur */
#game { height: 100vh; height: 100dvh; min-height: 0; gap: clamp(6px, 1.2vh, 10px); }
.hud, .hud2, .timer, .hint { flex: none; }
.board { min-height: 0; }
.modal.lose .m-img img { max-height: 42vh; }
@media (max-height: 640px) { .modal.lose .m-img img { max-height: 32vh; } .modal-card h2, .sheet-card h2 { font-size: 24px; } }

/* ===================== 2048 ===================== */
.modes { grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .modes { grid-template-columns: repeat(4, 1fr); } }
.mode { flex-direction: column; align-items: flex-start; gap: 8px; }
.m-tx small { font-size: 12.5px; line-height: 1.3; }
@media (max-height: 760px) { .m-tx small { display: none; } }

.w2k { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.ladder { display: flex; gap: clamp(2px, 1vw, 6px); justify-content: center; max-width: 100%; flex: none; }
.ladder span { display: grid; justify-items: center; gap: 1px; opacity: .35; filter: grayscale(.85); transition: opacity .3s, filter .3s, transform .3s; }
.ladder img { width: clamp(24px, 7.4vw, 38px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 2px solid rgb(255 255 255 / .5); display: block; }
.ladder span:last-child img { border-color: var(--gold); }
.ladder b { font: 800 10px var(--f-d); color: var(--muted); }
.ladder span.on { opacity: 1; filter: none; }
.ladder span.top { transform: translateY(-3px) scale(1.12); }
.ladder span.top img { border-color: var(--gold); box-shadow: 0 0 14px rgb(245 197 66 / .75); }
.ladder span.top b { color: var(--gold2); }

.g2k { --gap: clamp(6px, 2vw, 12px); position: relative; flex: none; width: var(--S, 320px); height: var(--S, 320px); padding: var(--gap); border-radius: 22px;
  background: rgb(0 0 0 / .3); border: 1px solid var(--line); box-shadow: inset 0 2px 20px rgb(0 0 0 / .35); touch-action: none; }
.g2k .cells { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: var(--gap); width: 100%; height: 100%; }
.g2k .cells i { border-radius: 14px; background: rgb(255 255 255 / .06); }
.g2k .tiles { position: absolute; inset: var(--gap); }
.t2k { --lv: 1; position: absolute; left: 0; top: 0; z-index: 2; display: grid; place-items: center; border-radius: 14px;
  width: calc((100% - 3 * var(--gap)) / 4); height: calc((100% - 3 * var(--gap)) / 4);
  transform: translate(calc(var(--x) * (100% + var(--gap))), calc(var(--y) * (100% + var(--gap))));
  transition: transform .12s ease-out;
  background: radial-gradient(circle at 50% 35%, hsl(calc(160 - var(--lv) * 11) 60% calc(30% + var(--lv) * 2%)), hsl(calc(160 - var(--lv) * 11) 65% calc(14% + var(--lv) * 1.5%)));
  box-shadow: 0 4px 12px rgb(0 0 0 / .35); }
.t2k.gone { z-index: 1; }
.t2k .hd { width: min(100%, calc(38% + var(--lv) * 5.7%)); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid rgb(255 255 255 / .85);
  box-shadow: 0 3px 10px rgb(0 0 0 / .45); transition: width .2s; }
.t2k .hd img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; pointer-events: none; }
.t2k b { position: absolute; right: 4px; bottom: 3px; padding: 0 6px; border-radius: 8px; background: rgb(0 0 0 / .6); color: var(--gold2); font: 800 clamp(10px, 2.8vw, 14px)/1.45 var(--f-d); }
.t2k[data-l="11"] .hd, .t2k[data-l="12"] .hd { border-radius: 14px; border: 3px solid var(--gold); }
.t2k[data-l="11"], .t2k[data-l="12"] { box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgb(245 197 66 / .7); }
.t2k[data-l="12"] { animation: glow 1.6s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 0 3px var(--gold2), 0 0 40px rgb(245 197 66 / .95); } }
.t2k.new { animation: t2kIn .18s ease-out; }
.t2k.pop { animation: t2kPop .22s ease-out; }
@keyframes t2kIn { from { scale: 0; } }
@keyframes t2kPop { 50% { scale: 1.18; } }

/* ===================== v4 ===================== */
/* yatay kaydırma hiçbir yerde olmasın */
html, body, .screen, .board, .sheet, .modal, .sheet-card, .modal-card, .scroll, .w2k { overflow-x: hidden; max-width: 100vw; }
img { max-width: 100%; }
.ladder { min-width: 0; }
.ladder span { min-width: 0; flex: 0 1 auto; }

/* uzun pencereler: başlık ve Kapat sabit, ortası kayar */
.sheet-card.tall { position: relative; display: flex; flex-direction: column; overflow: hidden; height: auto; max-height: calc(100dvh - 32px - var(--safe-t) - var(--safe-b)); }
.sheet-card.tall > * { flex: none; }
.sheet-card.tall .scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px; }
.sheet-card .x { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; font-weight: 800;
  color: var(--ink); background: rgb(255 255 255 / .1); border: 1px solid var(--line); z-index: 2; }
.sheet-card.tall .ghost { border: 1px solid var(--line); }
.lvl-list li { padding: 7px 12px; }

/* can kalmadı: dar ve sade */
.modal.nohearts .modal-card { max-width: 340px; }
.modal.nohearts h2 { color: #fca5a5; }
.modal.nohearts .trophy { font-size: 64px; }
.hearts-note { width: 100%; text-align: center; color: var(--muted); font-weight: 700; font-size: 12px; margin-top: -4px; }
.modal.compact .modal-card { max-width: 340px; }
.modal.compact .m-img img { width: min(200px, 56vw); max-height: 28vh; }

/* ad girişi */
.gate { z-index: 60; background: rgb(2 12 9 / .82); }
.gate .sheet-card { max-width: 360px; }
.gate .wave { font-size: 54px; line-height: 1; display: block; animation: wave 1.6s ease-in-out infinite; transform-origin: 70% 80%; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 15%, 45% { transform: rotate(16deg); } 30% { transform: rotate(-8deg); } }
#nameInput { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid rgb(245 197 66 / .45); background: rgb(0 0 0 / .3); color: var(--ink);
  font: 800 20px var(--f-d); text-align: center; outline: none; user-select: text; -webkit-user-select: text; }
#nameInput:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(245 197 66 / .25); }
#nameInput::placeholder { color: var(--muted); font-weight: 700; }
.gate .err { color: #fca5a5; font-weight: 800; font-size: 13px; margin-top: -4px; }
.who { display: inline; padding: 0; font: inherit; font-weight: 800; color: var(--gold2); text-decoration: underline dotted rgb(255 223 126 / .5); text-underline-offset: 3px; max-width: 100%; overflow-wrap: anywhere; }