:root {
  --koyu: #1d1b3a; --beyaz: #fff; --sari: #ffc93c; --mavi: #3fa7ff; --yesil: #4cd964; --pembe: #ff6fae; --kirmizi: #ff5a5f; --mor: #8b6cff; --turuncu: #ff9f43;
  --golge: 0 6px 0 var(--koyu);
  --sol: env(safe-area-inset-left, 0px); --sag: env(safe-area-inset-right, 0px); --ust: env(safe-area-inset-top, 0px); --alt: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd3ff; font-family: 'Baloo 2', system-ui, sans-serif; color: var(--koyu); user-select: none; -webkit-user-select: none; touch-action: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.gizli { display: none !important; }
button { font-family: inherit; cursor: pointer; color: inherit; }
input { font-family: inherit; }

/* ---------- ortak parçalar ---------- */
.kart { background: var(--beyaz); border: 4px solid var(--koyu); border-radius: 24px; box-shadow: var(--golge); padding: 18px; }
.btn { font-weight: 800; font-size: 18px; border: 3px solid var(--koyu); border-radius: 16px; box-shadow: 0 5px 0 var(--koyu); padding: 10px 18px; background: var(--beyaz); transition: transform .06s, box-shadow .06s, filter .15s; white-space: nowrap; }
.btn:hover { filter: brightness(1.06); }
.btn:active, .btn.basili { transform: translateY(4px); box-shadow: 0 1px 0 var(--koyu); }
.btn:disabled { filter: grayscale(.8) opacity(.6); cursor: not-allowed; transform: none; box-shadow: 0 5px 0 var(--koyu); }
.btn.sari { background: var(--sari); } .btn.mavi { background: var(--mavi); color: #fff; } .btn.yesil { background: var(--yesil); } .btn.pembe { background: var(--pembe); color: #fff; } .btn.kirmizi { background: var(--kirmizi); color: #fff; } .btn.mor { background: var(--mor); color: #fff; } .btn.turuncu { background: var(--turuncu); }
.btn.buyuk { font-size: 24px; padding: 12px 22px; width: 100%; }
.btn.kucukbtn { font-size: 15px; padding: 6px 12px; box-shadow: 0 3px 0 var(--koyu); border-radius: 12px; }
.btn.kucukbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--koyu); }
.girdi { width: 100%; font-size: 20px; font-weight: 700; border: 3px solid var(--koyu); border-radius: 14px; padding: 8px 12px; outline: none; background: #f6f4ff; color: var(--koyu); user-select: text; -webkit-user-select: text; }
.girdi:focus { background: #fff; box-shadow: 0 0 0 4px #ffd84d88; }
.etiket { font-weight: 800; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; opacity: .7; margin: 10px 0 4px; display: block; }
.kucuk { font-size: 12px; font-weight: 800; letter-spacing: 1px; opacity: .6; }
.renkler { display: flex; gap: 8px; flex-wrap: wrap; }
.renk { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--koyu); box-shadow: 0 3px 0 var(--koyu); padding: 0; position: relative; }
.renk.secili { outline: 4px solid #ffd84d; outline-offset: 2px; transform: scale(1.1); }
.renk:disabled { opacity: .25; cursor: not-allowed; }
.sapkalar { display: flex; gap: 5px; flex-wrap: wrap; }
.sapka { width: 40px; height: 40px; font-size: 22px; border: 3px solid var(--koyu); border-radius: 12px; background: #f6f4ff; box-shadow: 0 3px 0 var(--koyu); padding: 0; }
.sapka.secili { background: var(--sari); }
.ikonbtn { width: 46px; height: 46px; font-size: 22px; border: 3px solid var(--koyu); border-radius: 50%; background: #fff; box-shadow: 0 4px 0 var(--koyu); padding: 0; }
.ikonbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--koyu); }

/* ---------- logo ---------- */
.logo { margin: 0; font-size: clamp(54px, 11vw, 96px); font-weight: 800; line-height: .95; letter-spacing: 2px; text-align: center; }
.logo span { display: inline-block; -webkit-text-stroke: 4px var(--koyu); paint-order: stroke fill; text-shadow: 0 7px 0 var(--koyu); animation: zipla 2.4s ease-in-out infinite; }
.logo span:nth-child(1) { color: var(--kirmizi); animation-delay: 0s; transform: rotate(-6deg); } .logo span:nth-child(2) { color: var(--sari); animation-delay: .12s; }
.logo span:nth-child(3) { color: var(--yesil); animation-delay: .24s; } .logo span:nth-child(4) { color: var(--mavi); animation-delay: .36s; }
.logo span:nth-child(5) { color: var(--mor); animation-delay: .48s; } .logo span:nth-child(6) { color: var(--pembe); animation-delay: .6s; }
@keyframes zipla { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 0 -10px; } 90% { translate: 0 2px; } }
.slogan { text-align: center; font-weight: 700; font-size: 18px; margin: 4px 0 14px; color: #fff; -webkit-text-stroke: 5px var(--koyu); paint-order: stroke fill; }

/* ---------- giriş ---------- */
.ekran { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.ekran > * { pointer-events: auto; }
#giris { justify-content: flex-start; padding: calc(16px + var(--ust)) 16px calc(16px + var(--alt)) calc(5vw + var(--sol)); }
.giris-panel { width: min(420px, 100%); max-height: 100%; overflow-y: auto; scrollbar-width: none; }
.giris-panel .kart { display: flex; flex-direction: column; }
#kurBtn { margin-top: 16px; }
.katil-satir { display: flex; gap: 8px; margin-top: 12px; }
.girdi.kod { text-transform: uppercase; letter-spacing: 6px; text-align: center; font-size: 24px; }
.davet { margin-top: 14px; background: #fff6d6; border: 3px dashed var(--koyu); border-radius: 14px; padding: 8px 12px; font-weight: 700; text-align: center; }
.davet .btn { margin-top: 6px; width: 100%; }
.acik-odalar { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.acik-oda { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border: 3px solid var(--koyu); border-radius: 14px; background: #eef9ff; font-weight: 700; }
.acik-oda b { letter-spacing: 3px; } .acik-oda span { flex: 1; font-size: 14px; opacity: .75; }

/* ---------- lobi ---------- */
#lobi { justify-content: flex-start; padding: calc(16px + var(--ust)) 16px calc(16px + var(--alt)) calc(3vw + var(--sol)); }
.lobi-panel { width: min(430px, 100%); max-height: 100%; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 12px; }
.oda-kod-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oda-kod { font-size: 44px; font-weight: 800; letter-spacing: 8px; line-height: 1; color: var(--mor); }
.lobi-oyuncular { display: flex; flex-direction: column; gap: 6px; }
.lo { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border: 3px solid var(--koyu); border-radius: 14px; background: #f6f4ff; font-weight: 700; font-size: 18px; }
.lo.ben { background: #fff6d6; }
.lo .nokta { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--koyu); display: grid; place-items: center; font-size: 13px; flex: none; }
.lo .ad { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo .rozet { font-size: 13px; background: var(--koyu); color: #fff; border-radius: 8px; padding: 0 6px; }
.lo .at { border: none; background: none; font-size: 18px; padding: 0 4px; opacity: .5; } .lo .at:hover { opacity: 1; }
.lo.bos { opacity: .45; border-style: dashed; justify-content: center; font-size: 15px; }
.gorunum summary { font-weight: 800; cursor: pointer; padding: 4px 0; }
.gorunum[open] { display: flex; flex-direction: column; gap: 8px; }
.ev-ayar { display: flex; flex-direction: column; gap: 8px; }
.ayar-satir { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; }
.segment { display: flex; border: 3px solid var(--koyu); border-radius: 12px; overflow: hidden; }
.segment button { border: none; background: #fff; font-weight: 800; padding: 4px 10px; font-size: 15px; border-left: 2px solid var(--koyu); }
.segment button:first-child { border-left: none; }
.segment button.secili { background: var(--sari); }
.mod-aciklama { font-size: 14px; font-weight: 600; opacity: .7; margin-top: -4px; }
.lobi-alt { display: flex; flex-direction: column; gap: 8px; position: sticky; bottom: -18px; background: #fff; padding: 8px 0 12px; margin-bottom: -12px; z-index: 2; box-shadow: 0 -8px 10px -6px rgba(29,27,58,.18); }
.lobi-alt:empty { display: none; }
.bekle-yazi { text-align: center; font-weight: 700; opacity: .7; padding: 6px; }
.cik { align-self: flex-start; }

/* ---------- tahta HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.ust-serit { position: absolute; top: calc(10px + var(--ust)); left: calc(10px + var(--sol)); right: calc(10px + var(--sag)); display: flex; gap: 8px; align-items: flex-start; pointer-events: none; }
.tur-rozet { flex: none; background: var(--koyu); color: #fff; font-weight: 800; font-size: 18px; padding: 6px 14px; border-radius: 14px; box-shadow: 0 4px 0 rgba(0,0,0,.25); pointer-events: auto; }
.tur-rozet.son { background: var(--kirmizi); animation: nabiz 1s infinite; }
@keyframes nabiz { 50% { transform: scale(1.06); } }
.oyuncu-kartlar { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; justify-content: center; }
.ok-kart { display: flex; align-items: center; gap: 6px; background: #fff; border: 3px solid var(--koyu); border-radius: 14px; padding: 2px 10px 2px 3px; font-weight: 800; font-size: 15px; box-shadow: 0 3px 0 var(--koyu); transition: transform .2s; position: relative; }
.ok-kart .nokta { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--koyu); display: grid; place-items: center; font-size: 14px; }
.ok-kart .ad { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-kart .sayi { display: flex; gap: 6px; font-size: 15px; }
.ok-kart.aktif { transform: translateY(4px) scale(1.06); background: #fff6d6; outline: 3px solid #ffd84d; }
.ok-kart.ben .ad { text-decoration: underline 3px #ffd84d; }
.ok-kart.kopuk { opacity: .55; }
.ok-kart .yer { position: absolute; top: -9px; left: -7px; background: var(--koyu); color: #fff; font-size: 11px; border-radius: 8px; padding: 0 5px; }
.mesaj-kart { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); max-width: min(560px, 92vw); text-align: center; font-weight: 800; font-size: 22px; padding: 12px 20px; animation: girisKart .35s cubic-bezier(.3,1.6,.6,1); }
.mesaj-kart.olay { background: #e6ffe9; } .mesaj-kart.kotu { background: #ffe6e6; } .mesaj-kart.yildiz { background: #fff3c2; }
.mesaj-kart .olay-baslik { font-size: 30px; display: block; }
@keyframes girisKart { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
.eylem-alan { position: absolute; left: 50%; bottom: calc(18px + var(--alt)); transform: translateX(-50%); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; width: max-content; max-width: 94vw; }
.eylem-alan .btn { font-size: 26px; padding: 12px 26px; }
.eylem-alan .bilgi { background: rgba(29,27,58,.82); color: #fff; font-weight: 800; font-size: 18px; padding: 8px 18px; border-radius: 16px; }
.zar-btn { animation: davet 1s ease-in-out infinite; }
@keyframes davet { 50% { transform: translateY(-5px) scale(1.04); } }
.ipucu { display: block; font-size: 12px; opacity: .7; font-weight: 700; }

/* ---------- mini oyun HUD ---------- */
.mg-ust { position: absolute; top: calc(10px + var(--ust)); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; pointer-events: none; }
.mg-ad { background: #fff; border: 3px solid var(--koyu); border-radius: 14px; padding: 4px 14px; font-weight: 800; font-size: 18px; box-shadow: 0 3px 0 var(--koyu); white-space: nowrap; }
.mg-sure { background: var(--koyu); color: #fff; font-weight: 800; font-size: 26px; min-width: 64px; text-align: center; border-radius: 14px; padding: 0 12px; }
.mg-sure.az { background: var(--kirmizi); animation: nabiz .5s infinite; }
.mg-ipucu { position: absolute; top: calc(58px + var(--ust)); left: 50%; transform: translateX(-50%); background: var(--koyu); color: #fff; font-weight: 800; font-size: 26px; padding: 2px 18px; border-radius: 14px; border: 3px solid var(--koyu); box-shadow: 0 4px 0 rgba(0,0,0,.25); white-space: nowrap; pointer-events: none; }
.mg-tablo { position: absolute; top: calc(64px + var(--ust)); right: calc(10px + var(--sag)); display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.mg-satir { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.92); border: 3px solid var(--koyu); border-radius: 12px; padding: 1px 10px 1px 3px; font-weight: 800; font-size: 15px; min-width: 120px; transition: transform .2s; }
.mg-satir .nokta { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--koyu); }
.mg-satir .ad { flex: 1; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-satir.ben { background: #fff6d6; }
.mg-satir.elendi { opacity: .45; text-decoration: line-through; }
.mg-durum { position: absolute; top: calc(64px + var(--ust)); left: 50%; transform: translateX(-50%); background: rgba(29,27,58,.85); color: #fff; font-weight: 800; font-size: 18px; padding: 8px 20px; border-radius: 16px; text-align: center; pointer-events: none; }

/* ---------- banner & orta kart ---------- */
.banner { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-weight: 800; font-size: clamp(60px, 14vw, 130px); color: #fff; -webkit-text-stroke: 7px var(--koyu); paint-order: stroke fill; text-shadow: 0 8px 0 var(--koyu); pointer-events: none; opacity: 0; line-height: 1; }
.banner.goster { animation: banner 1.1s cubic-bezier(.3,1.5,.6,1) forwards; }
.banner.kalici { animation: bannerKal .45s cubic-bezier(.3,1.5,.6,1) forwards; }
.banner small { display: block; font-size: .28em; -webkit-text-stroke: 4px var(--koyu); margin-top: 8px; }
@keyframes banner { 0% { opacity: 0; transform: scale(2.2); } 25% { opacity: 1; transform: scale(1); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.85); } }
@keyframes bannerKal { 0% { opacity: 0; transform: scale(2.2); } 100% { opacity: 1; transform: scale(1); } }
.orta-kart { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 94vw); max-height: 88vh; overflow-y: auto; scrollbar-width: none; }
.orta-kart .kart { animation: kartGir .4s cubic-bezier(.3,1.5,.6,1); }
@keyframes kartGir { from { transform: scale(.5); opacity: 0; } }
.mg-tanit { text-align: center; }
.mg-tanit .ikon { font-size: 72px; line-height: 1.1; display: block; animation: davet 1.2s infinite; }
.mg-tanit h2 { margin: 0; font-size: 36px; line-height: 1.1; }
.mg-tanit p { font-size: 18px; font-weight: 600; margin: 8px 0 12px; }
.kontroller { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.kontrol { background: #f0edff; border: 3px solid var(--koyu); border-radius: 14px; padding: 4px 12px; font-weight: 700; font-size: 15px; }
.kontrol b { display: block; font-size: 12px; opacity: .6; letter-spacing: 1px; }
kbd { display: inline-block; background: #fff; border: 2px solid var(--koyu); border-bottom-width: 4px; border-radius: 7px; padding: 0 6px; font-family: inherit; font-weight: 800; font-size: 14px; }
.hazir-liste { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.hazir-cip { display: flex; align-items: center; gap: 4px; border: 3px solid var(--koyu); border-radius: 12px; padding: 0 8px 0 3px; font-weight: 800; font-size: 14px; background: #fff; opacity: .5; }
.hazir-cip.tamam { opacity: 1; background: #e6ffe9; }
.hazir-cip .nokta { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--koyu); }
.sure-cubuk { height: 8px; background: #eee; border: 2px solid var(--koyu); border-radius: 6px; overflow: hidden; margin-top: 10px; }
.sure-cubuk div { height: 100%; background: var(--sari); transition: width .25s linear; }
.rulet { text-align: center; }
.rulet .yuva { font-size: 40px; font-weight: 800; height: 64px; overflow: hidden; border: 4px solid var(--koyu); border-radius: 18px; background: #fff6d6; margin: 10px 0; display: grid; place-items: center; }
.rulet .yuva.durdu { background: var(--sari); animation: nabiz .4s 3; }
.sonuc-liste { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.sonuc-satir { display: flex; align-items: center; gap: 10px; border: 3px solid var(--koyu); border-radius: 14px; padding: 4px 12px; font-weight: 800; font-size: 18px; background: #f6f4ff; animation: kartGir .4s backwards; }
.sonuc-satir.ben { background: #fff6d6; }
.sonuc-satir .madalya { width: 34px; text-align: center; font-size: 22px; }
.sonuc-satir .nokta { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--koyu); flex: none; }
.sonuc-satir .ad { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sonuc-satir .odul { color: #c98a00; }
.baslik { text-align: center; margin: 0 0 4px; font-size: 32px; }
.bonus { text-align: center; }
.bonus .yildizbuyuk { font-size: 80px; display: block; animation: davet 1s infinite; }
.bonus h2 { margin: 0; font-size: 34px; } .bonus p { margin: 2px 0 10px; font-weight: 700; font-size: 18px; }
.bonus .kazanan { font-size: 26px; font-weight: 800; }
.dugmeler { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.orta-kart.son-kart { left: auto; right: calc(3vw + var(--sag)); top: 50%; transform: translateY(-50%); width: min(430px, 94vw); }
@media (max-width: 760px) { .orta-kart.son-kart { right: auto; left: 50%; top: auto; bottom: calc(10px + var(--alt)); transform: translateX(-50%); max-height: 58vh; } .son-kart .sonuc-satir { padding: 2px 10px; font-size: 16px; } }

/* ---------- dokunmatik ---------- */
.dokun { position: absolute; inset: 0; pointer-events: none; }
.dokun .joyAlan { position: absolute; left: 0; top: 30%; bottom: 0; width: 58%; pointer-events: auto; touch-action: none; }
.dokun .joy { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 4px solid rgba(255,255,255,.8); background: rgba(29,27,58,.25); display: none; pointer-events: none; }
.dokun .joy.acik { display: block; }
.dokun .topuz { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: #fff; border: 4px solid var(--koyu); }
.dokun .eylem { position: absolute; right: calc(26px + var(--sag)); bottom: calc(34px + var(--alt)); width: 104px; height: 104px; border-radius: 50%; border: 5px solid var(--koyu); background: var(--sari); box-shadow: 0 7px 0 var(--koyu); font-size: 30px; font-weight: 800; pointer-events: auto; touch-action: none; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.dokun .eylem small { font-size: 15px; margin-top: 2px; }
.dokun .eylem.basili { transform: translateY(5px); box-shadow: 0 2px 0 var(--koyu); background: #ffb703; }

/* ---------- köşe, bildirim ---------- */
.kose { position: absolute; left: calc(10px + var(--sol)); bottom: calc(14px + var(--alt)); display: flex; gap: 8px; align-items: center; }
.emojiler { position: absolute; bottom: 56px; left: 0; display: grid; grid-template-columns: repeat(4, 46px); gap: 6px; background: #fff; border: 3px solid var(--koyu); border-radius: 16px; padding: 8px; box-shadow: var(--golge); }
.emojiler button { font-size: 26px; border: none; background: none; padding: 0; height: 42px; border-radius: 10px; }
.emojiler button:hover { background: #f0edff; }
.bildirim { position: absolute; top: calc(70px + var(--ust)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.bildirim div { background: var(--koyu); color: #fff; font-weight: 700; padding: 6px 16px; border-radius: 12px; animation: kartGir .3s; }
.baglanti { position: absolute; top: 0; left: 0; right: 0; background: var(--kirmizi); color: #fff; text-align: center; font-weight: 800; padding: calc(4px + var(--ust)) 8px 4px; }

/* ---------- dar ekran (telefon) ---------- */
@media (max-width: 760px) {
  #giris, #lobi { align-items: flex-end; justify-content: center; padding-left: calc(10px + var(--sol)); padding-right: calc(10px + var(--sag)); }
  .giris-panel { max-height: 64%; }
  .logo { font-size: 58px; }
  .slogan { font-size: 15px; margin-bottom: 8px; }
  .kart { padding: 14px; border-radius: 20px; }
  .lobi-panel { max-height: 60%; }
  .oda-kod { font-size: 34px; }
  .ok-kart { padding: 1px 6px 1px 2px; font-size: 13px; gap: 4px; }
  .ok-kart .nokta { width: 22px; height: 22px; font-size: 11px; }
  .ok-kart .ad { max-width: 52px; }
  .ok-kart .sayi { font-size: 13px; gap: 3px; }
  .tur-rozet { font-size: 14px; padding: 4px 9px; }
  .eylem-alan .btn { font-size: 22px; padding: 10px 18px; }
  /* telefonda skorlar üstte tek sıra küçük rozet: oyun alanını kapatmasın */
  .mg-tablo { top: calc(54px + var(--ust)); right: auto; left: 50%; transform: translateX(-50%); flex-direction: row; flex-wrap: wrap; justify-content: center; width: 96vw; gap: 3px; }
  .mg-satir { min-width: 0; font-size: 13px; padding: 0 5px 0 2px; border-width: 2px; border-radius: 10px; gap: 3px; }
  .mg-satir .ad { display: none; }
  .mg-satir.ben { outline: 2px solid #ffd84d; }
  .mg-ipucu { top: calc(108px + var(--ust)); font-size: 20px; }
  .mg-durum { top: calc(110px + var(--ust)); }
  .mesaj-kart { font-size: 18px; top: 18%; }
  .kose { flex-direction: column-reverse; bottom: calc(14px + var(--alt)); }
  .kose .ikonbtn { width: 40px; height: 40px; font-size: 19px; }
  .emojiler { bottom: 0; left: 50px; }
  .renk { width: 33px; height: 33px; } .renkler { gap: 6px; }
  .sapka { width: 36px; height: 36px; font-size: 19px; } .sapkalar { gap: 4px; }
  .ok-kart .ad { display: none; }
  .mg-ad { font-size: 15px; padding: 3px 10px; } .mg-sure { font-size: 22px; min-width: 52px; }
  .ok-kart { padding-right: 7px; }
  .eylem-alan { bottom: calc(14px + var(--alt)); max-width: calc(100vw - 120px); }
}
@media (max-width: 760px) and (orientation: portrait) {
  .ust-serit { flex-direction: column; align-items: center; gap: 6px; }
  .oyuncu-kartlar { justify-content: center; gap: 5px; }
}

/* ---------- dokunmatik kaydırma: gövdede kapalı (oyun sırasında sayfa kaymasın), panellerde açık ---------- */
.giris-panel, .lobi-panel, .orta-kart { touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ---------- kısa ekran (yatay telefon) ---------- */
@media (max-height: 500px) {
  #giris, #lobi { padding-top: calc(8px + var(--ust)); padding-bottom: calc(8px + var(--alt)); }
  .logo { font-size: 40px; } .logo span { -webkit-text-stroke: 3px var(--koyu); text-shadow: 0 4px 0 var(--koyu); }
  .slogan { display: none; }
  .kart { padding: 12px; border-radius: 18px; }
  .etiket { margin: 6px 0 3px; }
  .girdi { font-size: 17px; padding: 5px 10px; }
  #kurBtn { margin-top: 10px; }
  .btn.buyuk { font-size: 20px; padding: 8px 16px; }
  .lobi-panel { gap: 8px; } .lo { font-size: 16px; padding: 3px 6px; } .oda-kod { font-size: 32px; }
  .tur-rozet { font-size: 14px; padding: 4px 9px; }
  .ok-kart { padding: 1px 7px 1px 2px; font-size: 13px; gap: 4px; } .ok-kart .ad { display: none; }
  .ok-kart .nokta { width: 22px; height: 22px; font-size: 11px; } .ok-kart .sayi { font-size: 13px; gap: 3px; }
  .mesaj-kart { font-size: 17px; top: 16%; padding: 8px 14px; } .mesaj-kart .olay-baslik { font-size: 22px; }
  .eylem-alan { bottom: calc(10px + var(--alt)); } .eylem-alan .btn { font-size: 20px; padding: 8px 18px; }
  .orta-kart { max-height: 94vh; }
  .mg-tanit .ikon { font-size: 40px; } .mg-tanit h2 { font-size: 26px; } .mg-tanit p { font-size: 15px; margin: 4px 0 8px; }
  .kontroller, .hazir-liste { margin-bottom: 8px; }
  .baslik { font-size: 24px; } .sonuc-liste { gap: 4px; margin: 6px 0; } .sonuc-satir { padding: 1px 10px; font-size: 15px; }
  .bonus .yildizbuyuk { font-size: 50px; } .bonus h2 { font-size: 26px; }
  .orta-kart.son-kart { width: min(400px, 50vw); max-height: 92vh; }
  .mg-tablo { top: calc(52px + var(--ust)); gap: 2px; } .mg-satir { font-size: 13px; padding: 0 6px 0 2px; border-width: 2px; }
  .mg-ust { top: calc(6px + var(--ust)); } .mg-sure { font-size: 22px; }
  .mg-ipucu { top: calc(46px + var(--ust)); font-size: 19px; }
  .banner { font-size: 64px; }
  .dokun .eylem { width: 92px; height: 92px; bottom: calc(22px + var(--alt)); }
}

@media (max-width: 760px) and (max-height: 500px) { .mg-ipucu { top: calc(84px + var(--ust)); } }

/* ---------- ayarlar ---------- */
.ayar-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, 92vw); z-index: 20; display: flex; flex-direction: column; gap: 8px; }
.ayar-panel .segment button { flex: 1; padding: 6px 4px; }
.ayar-not { font-size: 14px; font-weight: 600; opacity: .75; }
.ayar-satir2 { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ayar-satir2 input { width: 20px; height: 20px; }
.giris-ayar { margin-top: 10px; align-self: center; }
.fps { position: absolute; right: calc(8px + var(--sag)); bottom: calc(6px + var(--alt)); background: rgba(29,27,58,.75); color: #fff; font: 700 12px system-ui, sans-serif; padding: 2px 8px; border-radius: 8px; pointer-events: none; z-index: 30; }

/* ---------- kostüm mağazası ---------- */
.magaza-btn { width: 100%; margin-top: 12px; font-size: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.magaza-btn small { font-size: 13px; background: rgba(255,255,255,.3); border-radius: 8px; padding: 0 7px; }
#lobiMagaza { margin-top: 0; }
.lo .kopya { opacity: .7; font-size: 17px; }
#ui > .magaza { position: absolute; inset: 0; pointer-events: none; display: flex; justify-content: flex-end; padding: calc(12px + var(--ust)) calc(12px + var(--sag)) calc(12px + var(--alt)) 12px; z-index: 5; }
.magaza > * { pointer-events: auto; }
.mz-panel { width: min(600px, 52vw); height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; position: relative; overflow: hidden; }
.mz-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mz-sekmeler { display: flex; gap: 4px; background: #efeaff; border: 3px solid var(--koyu); border-radius: 16px; padding: 3px; }
.mz-sekmeler button { border: none; background: none; font-weight: 800; font-size: 17px; padding: 4px 14px; border-radius: 12px; }
.mz-sekmeler button.secili { background: var(--sari); box-shadow: 0 2px 0 var(--koyu); }
.mz-govde { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; scrollbar-width: thin; touch-action: pan-y; overscroll-behavior: contain; padding: 2px 2px 6px; }
.mz-cipler { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; padding: 2px 2px 6px; touch-action: pan-x; }
.mz-cip { flex: none; border: 3px solid var(--koyu); border-radius: 14px; background: #fff; font-weight: 800; font-size: 14px; padding: 3px 10px 3px 6px; display: flex; align-items: center; gap: 4px; box-shadow: 0 3px 0 var(--koyu); position: relative; }
.mz-cip span { font-size: 18px; }
.mz-cip.secili { background: var(--mor); color: #fff; }
.mz-cip.dolu::after { content: ''; position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--yesil); border: 2px solid var(--koyu); }
.mz-palet { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-weight: 800; font-size: 13px; flex: none; }
.mz-palet span { opacity: .7; margin-right: 4px; text-transform: uppercase; letter-spacing: .5px; }
.mz-renk { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--koyu); padding: 0; }
.mz-renk.secili { outline: 3px solid #ffd84d; outline-offset: 2px; transform: scale(1.12); }
.mz-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mz-esya { border: 3px solid var(--koyu); border-radius: 16px; background: linear-gradient(#f6f4ff, #e7e1ff); padding: 4px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 3px 0 var(--koyu); transition: transform .08s; min-width: 0; }
.mz-esya:hover { transform: translateY(-2px); }
.mz-esya.nadir { background: linear-gradient(#e9f6ff, #bfe3ff); }
.mz-esya.efsane { background: linear-gradient(#fff6d6, #ffd27a); }
.mz-esya.secili { background: var(--sari); outline: 4px solid var(--yesil); outline-offset: 1px; }
.mz-resim { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; overflow: hidden; }
.mz-resim img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mz-resim i { font-style: normal; font-size: 34px; opacity: .55; }
.mz-ad { font-weight: 800; font-size: 13px; line-height: 1.1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.mz-govderenk { display: flex; flex-wrap: wrap; gap: 10px; }
.mz-govderenk .renk { width: 52px; height: 52px; }
.mz-not { font-weight: 700; font-size: 14px; opacity: .75; text-align: center; padding: 6px; }
.mz-alt { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; position: sticky; bottom: -6px; background: #fff; padding: 8px 0 2px; margin-top: auto; box-shadow: 0 -8px 10px -6px rgba(29,27,58,.18); }
.mz-ara { font-size: 16px; padding: 6px 12px; flex: none; }
.mz-kombinler { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mz-kombin { border: 3px solid var(--koyu); border-radius: 18px; background: linear-gradient(#fff, #f1ecff); padding: 6px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 4px 0 var(--koyu); min-width: 0; }
.mz-resim.buyuk { background: radial-gradient(#fff 30%, #dff1ff); }
.mz-kad { font-weight: 800; font-size: 15px; line-height: 1.15; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-yazar { font-size: 12px; font-weight: 700; opacity: .6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-sayac { display: flex; gap: 10px; font-size: 13px; font-weight: 800; }
.mz-kbtn { display: flex; gap: 5px; margin-top: 4px; }
.mz-kbtn .btn { padding: 3px 10px; }
.mz-kbtn .begen.evet { background: #ffe0ea; }
.mz-daha { align-self: center; }
.mz-paylas { position: absolute; inset: 0; background: rgba(29,27,58,.45); display: grid; place-items: center; padding: 16px; z-index: 3; }
.mz-paylas .kart { width: min(380px, 100%); display: flex; flex-direction: column; gap: 8px; animation: kartGir .3s cubic-bezier(.3,1.5,.6,1); }
.mz-paylas h3 { margin: 0; font-size: 22px; } .mz-paylas p { margin: 0; font-weight: 600; opacity: .75; font-size: 14px; }
.mz-paybtn { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 760px) {
  #ui > .magaza { align-items: flex-end; padding: 8px calc(8px + var(--sag)) calc(8px + var(--alt)) calc(8px + var(--sol)); }
  .mz-panel { width: 100%; height: 60%; padding: 10px; border-radius: 20px; }
  .mz-sekmeler button { font-size: 15px; padding: 3px 10px; }
  .mz-izgara { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
  .mz-kombinler { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
  .mz-ad { font-size: 12px; }
  .mz-govderenk .renk { width: 44px; height: 44px; }
}
@media (max-height: 500px) {
  .mz-panel { width: min(560px, 58vw); }
  #ui > .magaza { align-items: stretch; }
  .mz-izgara { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}
@media (max-width: 760px) and (max-height: 500px) { .mz-panel { height: 100%; width: min(520px, 60vw); } #ui > .magaza { align-items: stretch; } }