/* Blok Bulmaca — rekoroyun.com (2026-11-12). Tahta ve bloklar canvas'ta; üst bant, menü ve pencereler HTML/CSS. Tema = body sınıfı. */
:root {
  --z1: #6b4426; --z2: #2a170b; --kart1: rgba(70, 42, 22, .97); --kart2: rgba(40, 23, 11, .97); --kart-kenar: rgba(255, 214, 140, .32);
  --sari: #ffd25a; --metin: #fff6ea; --soluk: #e2c9a8; --bant1: rgba(48, 28, 13, .94); --bant2: rgba(36, 20, 9, .9);
  --ust: 56px; --ui: 16px;
}
body.tema-mucevher { --z1: #2b2f73; --z2: #0d0f2e; --kart1: rgba(30, 34, 92, .97); --kart2: rgba(14, 16, 50, .97); --kart-kenar: rgba(160, 190, 255, .3); --soluk: #b9c3f0; --bant1: rgba(18, 20, 60, .94); --bant2: rgba(12, 14, 44, .9); }
body.tema-neon { --z1: #1b1035; --z2: #05030d; --kart1: rgba(24, 14, 48, .97); --kart2: rgba(8, 5, 20, .97); --kart-kenar: rgba(120, 255, 240, .35); --soluk: #b4a8de; --bant1: rgba(14, 8, 30, .94); --bant2: rgba(8, 5, 18, .9); }
body.tema-pastel { --z1: #f3c9d4; --z2: #b98fb6; --kart1: rgba(255, 246, 250, .97); --kart2: rgba(246, 230, 242, .97); --kart-kenar: rgba(170, 110, 160, .35); --metin: #4a2b46; --soluk: #8c6a88; --bant1: rgba(255, 240, 246, .9); --bant2: rgba(250, 228, 240, .86); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(ellipse at 50% 30%, var(--z1), var(--z2) 80%);
  color: var(--metin); font-family: "Fredoka", "Trebuchet MS", Arial, sans-serif; font-weight: 500;
  user-select: none; -webkit-user-select: none; overscroll-behavior: none; transition: background .4s;
}
button { font-family: inherit; cursor: pointer; border: 0; color: inherit; }
svg { display: block; }

#kap { position: absolute; inset: 0; display: flex; flex-direction: column; touch-action: none; }
body.menude #kap { visibility: hidden; }
/* ---- üst bant ---- */
#ust {
  flex: 0 0 var(--ust); height: var(--ust); display: flex; align-items: center; gap: calc(var(--ust) * .14);
  padding: 0 calc(var(--ust) * .16); background: linear-gradient(var(--bant1), var(--bant2)); border-bottom: 1px solid var(--kart-kenar);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); position: relative; z-index: 3;
}
.ikon {
  width: calc(var(--ust) * .74); height: calc(var(--ust) * .74); flex: 0 0 auto; border-radius: 30%;
  background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 0 rgba(0, 0, 0, .25);
  display: flex; align-items: center; justify-content: center; transition: background .15s, transform .1s;
}
.ikon:hover { background: rgba(255, 255, 255, .2); }
.ikon:active { transform: scale(.92); }
.ikon svg { width: 60%; height: 60%; fill: none; stroke: var(--metin); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#b-ses .carpi { display: none; }
#b-ses.kapali .dalga { display: none; }
#b-ses.kapali .carpi { display: block; stroke: #ff7a6b; }
.rekor-dugme svg { stroke: var(--sari) !important; }
body.tema-pastel .rekor-dugme svg { stroke: #c27a00 !important; }
.cip {
  display: flex; align-items: center; gap: calc(var(--ust) * .1); min-width: 0; height: calc(var(--ust) * .7);
  padding: 0 calc(var(--ust) * .2) 0 calc(var(--ust) * .08); border-radius: 999px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
body.tema-pastel .cip { background: rgba(120, 60, 110, .12); }
.cip .ci { flex: 0 0 auto; width: calc(var(--ust) * .52); height: calc(var(--ust) * .52); border-radius: 50%; background: rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; }
.cip .ci svg { width: 78%; height: 78%; }
.cip > span { display: flex; flex-direction: column; line-height: 1; }
.cip small { font-size: calc(var(--ust) * .17); letter-spacing: .1em; color: var(--soluk); font-weight: 600; white-space: nowrap; }
.cip b { font-size: calc(var(--ust) * .34); font-weight: 700; color: var(--sari); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.tema-pastel .cip b { color: #c27a00; }
.puan-kutu { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; line-height: 1; min-width: 0; }
#puan { font-size: calc(var(--ust) * .58); font-weight: 700; color: var(--metin); font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
#puan.zipla { animation: zipla .3s ease-out; }
@keyframes zipla { 40% { transform: scale(1.18); } }
#mod-etiket { font-size: calc(var(--ust) * .19); color: var(--soluk); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sag { display: flex; gap: calc(var(--ust) * .12); }

#alan { position: relative; flex: 1 1 auto; min-height: 0; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
/* seri rozeti (tahtanın sol üstü; JS konumlar) */
#seri-kap { position: absolute; display: flex; align-items: center; gap: 6px; opacity: 0; transform: scale(.7); transform-origin: left center; transition: opacity .2s, transform .25s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; z-index: 2; }
#seri-kap.acik { opacity: 1; transform: scale(1); }
#seri { display: flex; align-items: center; gap: 2px; font-weight: 700; font-size: calc(var(--ui) * 1.25); color: #ffb13b; text-shadow: 0 2px 0 #7a3600, 0 0 10px rgba(255, 140, 30, .5); line-height: 1; }
#seri svg { width: 1.2em; height: 1.2em; }
#seri-bar { display: flex; gap: 3px; }
#seri-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ffb13b; box-shadow: 0 0 6px #ff8a1f; transition: opacity .2s, transform .2s; }
#seri-bar i.sondu { opacity: .2; transform: scale(.7); box-shadow: none; }

/* ---- pencereler ---- */
.pencere { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 10px; background: rgba(10, 5, 2, .55); backdrop-filter: blur(2px); }
.pencere.acik { display: flex; animation: belir .22s ease-out; }
.pencere.saydam { background: rgba(10, 5, 2, .45); backdrop-filter: none; }
@keyframes belir { from { opacity: 0; } }
.kart {
  position: relative; background: linear-gradient(var(--kart1), var(--kart2)); border: 1.5px solid var(--kart-kenar); border-radius: 24px;
  padding: calc(var(--ui) * 1.1); width: min(94vw, 440px); max-height: 100%; overflow: auto; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 50px rgba(0, 0, 0, .55); animation: kartGel .3s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes kartGel { from { transform: translateY(18px) scale(.94); opacity: 0; } }
.kart h2 { margin: 0 0 .4em; font-size: calc(var(--ui) * 1.7); font-weight: 700; letter-spacing: .02em; }
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; border-radius: 16px; padding: .55em 1.1em;
  font-size: calc(var(--ui) * 1.02); font-weight: 600; transition: transform .1s, filter .15s; line-height: 1.1;
}
.dugme:active { transform: scale(.95); }
.dugme:hover { filter: brightness(1.08); }
.dugme.ana { background: linear-gradient(#ffdd6b, #ff9f22); color: #4a2400; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 #b55d00, 0 6px 14px rgba(0, 0, 0, .3); }
.dugme.ikincil { background: rgba(255, 255, 255, .1); color: var(--metin); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); }
body.tema-pastel .dugme.ikincil { background: rgba(120, 60, 110, .08); box-shadow: inset 0 0 0 1.5px rgba(120, 60, 110, .22); }
.dugme.buyuk { font-size: calc(var(--ui) * 1.45); padding: .5em 1.6em; width: 100%; margin: .45em 0 12px; font-weight: 700; letter-spacing: .04em; }
.dugme.tam { width: 100%; margin: .2em 0; }
.satir { display: flex; gap: .5em; justify-content: center; flex-wrap: wrap; }
.satir .dugme { flex: 1 1 0; }
.not { color: var(--soluk); font-size: calc(var(--ui) * .82); min-height: 1em; margin: .3em 0; }

/* ---- menü ---- */
.pencere.menu-p { background: transparent; backdrop-filter: none; padding: 14px; }
.menu-sahne { display: flex; flex-direction: column; gap: calc(var(--ui) * .75); width: min(94vw, 420px); max-height: 100%; overflow: auto; padding: 4px; animation: kartGel .35s cubic-bezier(.2, 1.4, .4, 1); }
.logo { display: flex; justify-content: center; }
#logo-cv { width: min(100%, 340px); height: auto; aspect-ratio: 36 / 13; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45)); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 18px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08); }
body.tema-pastel .seg { background: rgba(120, 60, 110, .12); }
.seg-b { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 4px; border-radius: 14px; background: transparent; color: var(--soluk); font-size: calc(var(--ui) * .95); font-weight: 600; transition: background .15s, color .15s; min-width: 0; }
.seg-b span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-b svg { flex: 0 0 auto; width: calc(var(--ui) * 1.3); height: calc(var(--ui) * 1.3); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seg-b.secili { background: var(--sari); color: #4a2400; box-shadow: 0 3px 0 #b55d00; }
.seg-b em { font-style: normal; font-size: .75em; opacity: .8; }
.oyna {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--ui) * .6); width: 100%; padding: calc(var(--ui) * .5) calc(var(--ui) * 1);
  border-radius: 999px; background: linear-gradient(#ffe070, #ff9a1f); color: #4a2400; margin-bottom: 8px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), 0 6px 0 #b55d00, 0 10px 22px rgba(0, 0, 0, .4); transition: transform .1s; animation: oynaNabiz 2.2s ease-in-out infinite;
}
.oyna:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), 0 3px 0 #b55d00, 0 6px 14px rgba(0, 0, 0, .4); }
@keyframes oynaNabiz { 50% { filter: brightness(1.07); } }
.oyna svg { width: calc(var(--ui) * 2); height: calc(var(--ui) * 2); fill: #4a2400; flex: 0 0 auto; }
.o-y { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.o-y b { font-size: calc(var(--ui) * 1.75); font-weight: 700; letter-spacing: .06em; }
.o-y small { font-size: calc(var(--ui) * .78); font-weight: 600; opacity: .75; }
.yeni-dugme { display: none; align-self: center; padding: .4em 1.4em; font-size: calc(var(--ui) * .9); }
.yeni-dugme.acik { display: inline-flex; }
.m-ikonlar { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--ui) * .45); }
.mi-b {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: calc(var(--ui) * .55) 4px; border-radius: 14px;
  background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); font-size: calc(var(--ui) * .95); min-width: 0;
}
body.tema-pastel .mi-b { background: rgba(120, 60, 110, .1); }
.mi-b:active { transform: scale(.95); }
.mi-b svg { width: calc(var(--ui) * 1.4); height: calc(var(--ui) * 1.4); fill: none; stroke: var(--metin); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- ayarlar ---- */
.a-bolum { margin-bottom: .7em; }
.a-baslik { font-size: calc(var(--ui) * .78); letter-spacing: .12em; color: var(--soluk); margin-bottom: .4em; font-weight: 600; }
.temalar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tema-b { position: relative; padding: 6px 6px 8px; border-radius: 14px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tema-b canvas { width: 100%; height: auto; aspect-ratio: 2 / 1; border-radius: 8px; display: block; }
.tema-b b { font-size: calc(var(--ui) * .9); }
.tema-b small { font-size: calc(var(--ui) * .7); color: var(--soluk); min-height: 1em; }
.tema-b.secili { box-shadow: inset 0 0 0 2.5px var(--sari), 0 0 14px rgba(255, 210, 90, .25); }
.tema-b.kilitli canvas { filter: grayscale(.9) brightness(.7); }
.tema-b.kilitli small { color: var(--sari); }
.a-satir { display: flex; gap: .5em; margin-bottom: .4em; }
.a-satir .dugme { flex: 1 1 0; min-height: calc(var(--ui) * 2.6); }

/* ---- nasıl ---- */
.nasil { list-style: none; padding: 0; margin: 0 0 .8em; text-align: left; }
.nasil li { display: flex; gap: .7em; align-items: center; padding: .4em 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: calc(var(--ui) * .92); line-height: 1.3; }
.nasil i { flex: 0 0 calc(var(--ui) * 2.1); height: calc(var(--ui) * 2.1); border-radius: 30%; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: calc(var(--ui) * .95); color: #4a2400; background: linear-gradient(#ffdd6b, #ff9f22); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 2px 0 #b55d00; }
.nasil i::after { content: attr(class); }
.n-1::after { content: "1" !important; } .n-2::after { content: "2" !important; } .n-3::after { content: "×5" !important; }
.n-4::after { content: "+300" !important; font-size: .7em; } .n-5::after { content: "!" !important; } .n-6::after { content: "⌨" !important; }

/* ---- oyun sonu ---- */
.sonuc-kart { overflow: visible; padding-top: calc(var(--ui) * 1.3); }
.serit {
  display: none; position: absolute; left: 50%; top: calc(var(--ui) * -1.1); transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(#ff5d73, #d9234a); color: #fff; font-weight: 700; padding: .25em 1.1em; border-radius: 10px;
  font-size: calc(var(--ui) * 1.15); letter-spacing: .06em; box-shadow: 0 4px 0 #8d0f2b, 0 8px 18px rgba(0, 0, 0, .35); white-space: nowrap; animation: serit 1s ease-in-out infinite alternate;
}
.sonuc-kart.rekor .serit { display: block; }
@keyframes serit { to { transform: translateX(-50%) rotate(3deg) scale(1.05); } }
.s-puan { font-size: calc(var(--ui) * 3.4); font-weight: 700; line-height: 1; color: var(--sari); text-shadow: 0 4px 0 rgba(90, 50, 0, .8); font-variant-numeric: tabular-nums; }
body.tema-pastel .s-puan { color: #e08a00; text-shadow: 0 3px 0 rgba(140, 80, 0, .35); }
.s-bilgi { display: flex; justify-content: center; flex-wrap: wrap; gap: .4em; margin: .5em 0 .2em; color: var(--soluk); font-size: calc(var(--ui) * .86); }
.s-bilgi span { background: rgba(0, 0, 0, .25); padding: .2em .6em; border-radius: 999px; }
body.tema-pastel .s-bilgi span { background: rgba(120, 60, 110, .1); }
.s-bilgi b { color: var(--metin); }
.canlan {
  width: 100%; margin: .5em 0 12px; display: none; flex-wrap: wrap; justify-content: center; column-gap: .45em;
  background: linear-gradient(#6be887, #23a649); color: #06321a; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 #136b2c, 0 6px 14px rgba(0, 0, 0, .3);
  font-size: calc(var(--ui) * 1.2); font-weight: 700;
}
.canlan.acik { display: inline-flex; animation: nabizK 1.4s ease-in-out infinite; }
@keyframes nabizK { 50% { transform: scale(1.025); filter: brightness(1.08); } }
.canlan svg { width: 1em; height: 1em; fill: #06321a; }
.canlan small { flex: 0 0 100%; font-size: .6em; font-weight: 600; opacity: .8; }
.rekor-form { display: none; margin: .5em 0 .2em; padding: .6em; border-radius: 14px; background: rgba(0, 0, 0, .22); }
body.tema-pastel .rekor-form { background: rgba(120, 60, 110, .08); }
.rekor-form.acik { display: block; }
.rf-baslik { font-size: calc(var(--ui) * .85); color: var(--soluk); margin-bottom: .35em; }
.rf-satir { display: flex; gap: .4em; }
.rf-satir .dugme.ana { margin-bottom: 4px; }
.rf-satir input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: calc(var(--ui) * 1.05); padding: .45em .7em; border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .3); color: #fff; outline: none; user-select: text; -webkit-user-select: text;
}
body.tema-pastel .rf-satir input { background: #fff; color: #4a2b46; border-color: rgba(120, 60, 110, .3); }
.rf-satir input:focus { border-color: var(--sari); }
.rf-durum { font-size: calc(var(--ui) * .82); min-height: 1.2em; margin-top: .3em; color: var(--soluk); }
.rf-durum.hata { color: #ff8a7a; }
.rf-durum.tamam { color: #7df08d; }
body.tema-pastel .rf-durum.tamam { color: #1d8a3a; }
body.tema-pastel .rf-durum.hata { color: #c4302b; }

/* rekor tablosu (ortak servisin HTML'i) */
#rekor-kap { position: fixed; inset: 0; z-index: 1000; background: #f5f5f5; overflow: hidden; }
#rekor-kap .rekor-yukleniyor { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font-size: 18px; line-height: 1.6; color: #555; }
#rekor-kap .rekor-yukleniyor button { margin-top: 10px; background: #2e7d4f; color: #fff; border-radius: 8px; padding: 0 1.2em; height: 40px; }

/* geniş ve alçak ekran: menü iki sütun */
@media (min-aspect-ratio: 5/4) and (max-height: 560px) {
  .menu-sahne { display: grid; grid-template-columns: 1fr 1fr; width: min(96vw, 780px); align-items: center; column-gap: calc(var(--ui) * 1.2); }
  .menu-sahne .logo { grid-row: 1 / span 4; }
}
/* alçak ekran (yatay telefon): sıkışık */
@media (max-height: 440px) {
  .kart { padding: .55em .8em; }
  .kart h2 { font-size: calc(var(--ui) * 1.3); margin-bottom: .2em; }
  .s-puan { font-size: calc(var(--ui) * 2.4); }
  .dugme.buyuk { font-size: calc(var(--ui) * 1.2); margin: .25em 0 11px; padding: .35em 1em; }
  .canlan { margin: .3em 0 11px; padding: .35em 1em; }
  .rekor-form { margin: .3em 0 .1em; padding: .4em; }
  .nasil li { padding: .2em 0; font-size: calc(var(--ui) * .82); }
  .oyna { padding: calc(var(--ui) * .3) calc(var(--ui) * 1); }
  .oyna svg { width: calc(var(--ui) * 1.5); height: calc(var(--ui) * 1.5); }
  .o-y b { font-size: calc(var(--ui) * 1.35); }
  .menu-sahne { gap: calc(var(--ui) * .5); }
  .sonuc-kart { width: min(94vw, 560px); }
  .s-bilgi { margin: .3em 0 .1em; }
}