/* ============================================================================
   MOBIL KABUK (2026-08-16, kullanici tasarimi).

   IZOLASYON KURALI: bu dosyadaki HER kural body.shell-mobile altinda yasar.
   app.css masaustunun malidir — oraya mobil kural yazilmaz, buraya masaustunu
   etkileyen kural yazilmaz. Paylasilan bilesenler (gunluk, dpad, paneller)
   temel gorunumunu app.css'ten alir; burasi yalniz mobil uzerine-yazmadir.
   Kabuk siniflari m- onekiyle baslar; .shell-mobile sinifini shell.js koyar.
   ============================================================================ */

/* Masaustu cerceve dolgusu mobilde yer yer: ekranin tamami oyunundur. */
.shell-mobile .app-main {
    padding: 0;
    min-height: 100dvh; /* vh degil: mobil adres cubugu hesaba katilir */
}

/* Asagi cekme sayfayi yenilemesin: harita/gunluk kaydirirken kazara
   pull-to-refresh oyunu bastan baslatiyordu (kayit yok — olumcul). */
body.shell-mobile {
    overscroll-behavior: none;
}

/* Dokunus cilasi (Asama 4): cift dokunus zoom'u ve uzun-basinca metin secimi
   dugmelerde kapali; gri dokunus flasi da oyuna yakismiyor. Gunluk/metinler
   secilebilir kalir — kural yalniz dugmelerde. */
.shell-mobile button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* iOS, 16px altindaki girdiye odaklaninca sayfayi kendiliginden yakinlastirir
   (geri de cikmaz) — ad girisinde bunu engelle. */
.shell-mobile .start-input {
    font-size: max(16px, 1.1rem);
}

/* Tus rehberi dugmesi dokunmatikte anlamsiz: gizli. Ses dugmesi kosede kalir. */
.shell-mobile .keybinds-btn {
    display: none;
}

/* Ses kaydiricisi mobilde yok (2026-08-16, kullanici karari): ses zaten telefonun
   kendi tuslarindan ayarlanir; yalniz sustur/ac dugmesi kalir. */
.shell-mobile .audio-volume {
    display: none;
}

/* Harita ekraninda dil/ses cekmecenin dibine tasindi (2026-08-16, kullanici istegi):
   sag ustteki kutu orada tamamen gizli. Diger ekranlarda (koy, dovus...) cekmece
   olmadigi icin kutu simdilik duruyor; :has desteklemeyen eski tarayicida da kutu
   gorunur kalir — zararsiz cift kontrol. */
.shell-mobile:has(.m-screen) .top-controls {
    display: none;
}

/* Paylasilan ekran basligi (baslat/giris/koy...): masaustundeki 13rem sag dolgu
   sabit ses cubugu icindi; mobil kutu kucuk (TR + sustur). 13rem dar ekranda
   "bir kahraman adlandiriliyor" alt basligini alt satira kiriyordu (2026-08-16). */
.shell-mobile .game-header {
    padding-right: 5.5rem;
}

.shell-mobile .game-title {
    font-size: 1.1rem;
    letter-spacing: 0.15em;
}

/* Ekran genisligiyle olceklenir: en uzun alt baslik ("bir kahraman adlandiriliyor")
   375px'te bile baslikla ayni satirda kalir, genis ekranda buyur. */
.shell-mobile .game-subtitle {
    font-size: clamp(0.62rem, 2.6vw, 0.9rem);
}

/* ---------------------------------------------------------------- iskelet */

.shell-mobile .m-screen {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    height: 100dvh;
    /* Centikli cihazlar (viewport-fit=cover): icerik guvenli alanda kalsin. */
    padding: max(0.45rem, env(safe-area-inset-top))
             max(0.45rem, env(safe-area-inset-right))
             max(0.45rem, env(safe-area-inset-bottom))
             max(0.45rem, env(safe-area-inset-left));
    overflow: hidden; /* sayfa kaymaz; harita ve gunluk kendi icinde kayar */
}

/* ---------------------------------------------------------------- ust HUD */

.shell-mobile .m-hud {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shell-mobile .m-menu-btn {
    flex: 0 0 auto;
    width: 2.75rem;  /* 44px dokunma hedefi */
    height: 2.75rem;
    font-size: 1.25rem;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--text);
}

/* Rozetler sarilmaz, tasarsa yana kayar: HUD tek satir kalir, harita yer kaybetmez. */
.shell-mobile .m-hud-strip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none; /* ince seritte cubuk gurultu olur */
    font-size: 0.9rem;     /* masaustu HUD 0.72rem'di; mobilde okunur boy */
    line-height: 1.7;
}

.shell-mobile .m-hud-strip::-webkit-scrollbar {
    display: none;
}

.shell-mobile .m-hud-strip .hud-item {
    flex: 0 0 auto;
}

/* ----------------------------------------------------------------- harita */

.shell-mobile .m-map-frame {
    position: relative;
    flex: 1 1 0;   /* kalan dikey alanin buyuk payi haritanin */
    min-height: 0;
}

/* MapGrid koku: cerceveyi doldurur. Temel gorunum (zemin, kenar, overflow)
   app.css'teki .map-scroll'dan gelir; burada yalniz boyut. */
.shell-mobile .m-map-frame .map-scroll {
    width: 100%;
    height: 100%;
}

/* Kahramani ortala: sag ust, HUD'in hemen altindaki yuzen dugme. */
.shell-mobile .m-center-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 6;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(19, 24, 38, 0.6);
    border: 1px solid rgba(38, 48, 71, 0.9);
    color: var(--text);
    font-size: 1.35rem;
    line-height: 1;
}

/* ---------------------------------------------------- alt bant: ped + statlar */

/* Ped + stat kutusu yan yana sabit bant (2026-08-16, kullanici duzeni: gunluk
   haritanin altina cikti, pedin yani statlarin). pos-right pedi saga alir. */
.shell-mobile .m-bottom {
    flex: 0 0 auto;
    display: flex;
    gap: 0.45rem;
    align-items: stretch;
}

/* Stat kutusu: pedin yanindaki esnek kolon — HP/XP barlari + sayi izgarasi +
   kutsama satiri. Icerik yukari toplu (2026-08-17: space-around HP ile XP'yi
   ayirip yer israf ediyordu); kazanilan satir bufflarin. */
.shell-mobile .m-stats {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.35rem;
    padding: 0.4rem 0.55rem;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
}

/* xp-bar masaustunde satir icinde "flex: 1" (yatay esner); dikey kutumuzda ayni
   kural onu dikeyde sisiriyordu. Sabit ince bant. */
.shell-mobile .m-stats .xp-bar {
    flex: 0 0 auto;
    height: 1rem;
}

.shell-mobile .m-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 0.5rem;
    font-size: 0.9rem;
}

/* Gecici kutsamalar: izgaranin altinda kendi satiri, vurgu renkli. */
.shell-mobile .m-buffs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.7rem;
    color: var(--accent);
    font-size: 0.88rem;
}

.shell-mobile .m-bottom.pos-right .m-dpad {
    order: 2;
}

.shell-mobile .m-dpad {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* 10.2rem / 3 sutun ≈ 52px'lik tuslar (44px hedefin ustunde). */
.shell-mobile .m-dpad .dpad {
    width: 10.2rem;
    max-width: none;
    gap: 0.3rem;
}

.shell-mobile .m-dpad .dpad-btn {
    font-size: 1.5rem;
    background: var(--panel);
    border-color: var(--panel-border);
    /* Cift dokunusla yakinlastirmayi kapat: hizli ard arda adim atilabilsin. */
    touch-action: manipulation;
}

.shell-mobile .m-dpad .dpad-btn:active {
    background: #1a2136;
    border-color: var(--accent);
    color: var(--accent);
}

/* Ortadaki ✦ mobilde bir dugme: pedi gunlugun soluna/sagina alir. */
.shell-mobile .m-dpad .dpad-move {
    background: transparent;
    border: 1px dashed var(--panel-border);
    border-radius: 6px;
    color: var(--dim);
    font-size: 1rem;
    touch-action: manipulation;
}

/* ------------------------------------------------------------- koy eylemleri */

/* Ayni .map-actions overlay'i (app.css); kompakt kalsin — Asama 1'deki buyutme
   fazla geldi (2026-08-16 iPhone raporu), dokunma hedefi yine 40px+ tutuluyor.
   Konum sol alt (kullanici istegi): ortada kahramanin ustunu kapatiyordu. */
.shell-mobile .m-map-frame .map-actions {
    left: 0.6rem;
    top: auto;
    bottom: 0.6rem;
    transform: none;
    min-width: 9rem;
    padding: 0.4rem;
}

.shell-mobile .m-map-frame .map-actions .action {
    min-height: 2.5rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.95rem;
}

/* ------------------------------------------------------------------ gunluk */

/* Gunluk haritanin altinda tam genislik sabit bant; kendi icinde kayar.
   (2026-08-16: 8.5 -> 10.5rem, kullanici ayari — harita biraz daha kisaldi.) */
.shell-mobile .m-log {
    flex: 0 0 10.5rem;
    overflow-y: auto;
    font-size: 0.88rem;
}

/* ------------------------------------------------- en iyi deneyim karti */

.shell-mobile .m-tips-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1500; /* cekmecenin de ustunde */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
}

.shell-mobile .m-tips-card {
    max-width: 26rem;
    max-height: 88dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    background: var(--panel);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 0.9rem 1rem;
}

.shell-mobile .m-tips-title {
    font-weight: bold;
    color: var(--accent);
    font-size: 1.05rem;
}

.shell-mobile .m-tips-item {
    font-size: 0.92rem;
    line-height: 1.45;
}

/* ---------------------------------------------------------------- cekmece */

.shell-mobile .m-backdrop {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgba(0, 0, 0, 0.55);
}

.shell-mobile .m-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1000;
    width: min(88vw, 23rem);
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.7rem;
    padding-top: 3rem; /* kapat dugmesine yer */
    background: var(--bg);
    border-right: 1px solid var(--panel-border);
}

.shell-mobile .m-drawer.open {
    transform: translateX(0);
}

/* Cekmece basligi: iki sekme + kapat, tek satir. Sekmeler esit pay alir. */
.shell-mobile .m-drawer-head {
    display: flex;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.shell-mobile .m-tab {
    flex: 1 1 0;
    min-height: 2.75rem; /* 44px dokunma hedefi */
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--dim);
    font-size: 0.95rem;
}

.shell-mobile .m-tab.active {
    border-color: var(--accent);
    color: var(--accent);
}

.shell-mobile .m-drawer-close {
    flex: 0 0 auto;
    width: 2.75rem;
    min-height: 2.75rem;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--text);
    font-size: 1.1rem;
}

/* ============================================================================
   ASAMA 3 (2026-08-16): paylasilan ekranlarin (dovus, olay, koy, baslangic,
   giris, kosu-sonu) mobil buyutmeleri. Bilesenler ortak, yalniz stil degisir.
   ============================================================================ */

/* Web'e ozel klavye ipuclari dokunmatikte anlamsiz (kullanici istegi):
   dovusteki tus rehberi satiri + gunlukteki yon-tusu ipucu satiri gizli. */
.shell-mobile .keys-help,
.shell-mobile .log-line.log-hint {
    display: none;
}

/* Ekran kabuklari: 640px kutu yerine tam genislik + ince kenar dolgusu.
   Bolumler arasi bosluk mobilde dar (masaustu 0.9rem dikeyde pahali). */
.shell-mobile .game-shell {
    max-width: 100%;
    padding: 0 0.45rem 0.6rem;
    gap: 0.5rem;
}

/* Sag ustteki dil/ses kutusu mobilde su ekranlarda gizli (2026-08-16, kullanici
   istegi): dovus, koy, karakter secimi + giris anlatisi (ikisi de .start-screen).
   Dil/ses ayarlarina haritadaki cekmeceden ulasiliyor — yani ilk acilista dil
   degistirmek icin once oyuna girmek gerekir (bilincli tercih). */
.shell-mobile:has(.combat-screen) .top-controls,
.shell-mobile:has(.village-wide) .top-controls,
.shell-mobile:has(.start-screen) .top-controls {
    display: none;
}

/* Dovus gunlugu en cok ~7 satir gosterir, gerisi kayar (kullanici ayari:
   5'ti, +2 satir 2026-08-17). Haritadaki gunluk (.m-log) etkilenmez. */
.shell-mobile .combat-screen .combat-log {
    flex: 0 0 auto;
    max-height: 9.2rem;
    overflow-y: auto;
}

/* Zar yerlestirme rehberi mobilde metin olarak degil ! dugmesiyle (2026-08-17,
   kullanici istegi): metin dikeyde pahaliydi. Dugme eylem alaninin sag ustunde,
   dokununca ayni rehber acilir kutuda. Sersemleme notu (stunned-note) etkilenmez. */
.shell-mobile .place-help {
    display: none;
}

.shell-mobile .combat-screen .action-area {
    position: relative;
}

.shell-mobile .m-hint-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 8;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    color: var(--accent);
    font-weight: bold;
    font-size: 1rem;
}

.shell-mobile .m-hint-pop {
    display: block;
    position: absolute;
    top: 2.4rem;
    right: 0;
    z-index: 8;
    max-width: 19rem;
    background: rgba(10, 13, 19, 0.97);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Dusman karti sikisik izgara: statlar baslik satirinin sagina cikar, kart bir
   satir kisalir; dolgu ve ikon da kuculur. */
.shell-mobile .enemy-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "header stats"
        "hp hp"
        "intent intent";
    gap: 0.3rem 0.5rem;
    padding: 0.45rem 0.6rem;
}

.shell-mobile .enemy-card .enemy-header {
    grid-area: header;
    min-width: 0;
}

.shell-mobile .enemy-card .enemy-header .enemy-emoji {
    font-size: 1.25rem;
}

.shell-mobile .enemy-card .hp-bar {
    grid-area: hp;
}

.shell-mobile .enemy-card .enemy-stats {
    grid-area: stats;
    align-self: center;
    font-size: 0.78rem;
    white-space: nowrap;
}

.shell-mobile .enemy-card .enemy-intent {
    grid-area: intent;
    font-size: 0.85rem;
}

/* Ana eylem dugmeleri parmak boyu (Zar At, Turu Onayla, Kac, olay secimleri...). */
.shell-mobile .action {
    min-height: 2.75rem;
    font-size: 1rem;
    padding: 0.6rem 1rem;
}

/* Dovus: 6 zar tek satira sigsin (6 x 3.4rem + bosluklar ≈ 345px < 360px). */
.shell-mobile .dice-tray {
    gap: 0.45rem;
}

.shell-mobile .die {
    width: 3.4rem;
}

/* Yuvalar mobilde yatay dizilime gecer (2026-08-16 iPhone raporu): masaustunun
   4 katli dikey istifi (ikon/etiket/zar/ipucu) dikeyde pahaliydi. Ikon+etiket+zar
   tek satir, ipucu altinda — yuva ~%55 kisalir. Satirda iki yuva. */
.shell-mobile .slots {
    flex-wrap: wrap;
    gap: 0.45rem;
}

.shell-mobile .slot {
    flex: 1 1 45%;
    min-width: 45%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "icon label die"
        "hint hint hint";
    align-items: center;
    justify-items: start;
    gap: 0.1rem 0.4rem;
    padding: 0.35rem 0.55rem;
}

.shell-mobile .slot .slot-icon {
    grid-area: icon;
    font-size: 1.1rem;
}

.shell-mobile .slot .slot-label {
    grid-area: label;
    font-size: 0.8rem;
}

.shell-mobile .slot .slot-die {
    grid-area: die;
    font-size: 1.15rem;
    min-height: 0;
}

.shell-mobile .slot .slot-hint {
    grid-area: hint;
    font-size: 0.7rem;
}

/* Tuketilebilir seridi: dugmeler dokunma boyu, tasan sarilir. */
.shell-mobile .consumable-bar {
    flex-wrap: wrap;
}

.shell-mobile .consumable-btn {
    min-height: 2.4rem;
    font-size: 0.9rem;
}

/* Baslangic ekrani: ad girisi ve kahraman secenekleri buyuk.
   (Yazi boyu dosyanin basindaki iOS odak-zoom kuralinda: max(16px, 1.1rem).) */
.shell-mobile .start-input {
    min-height: 2.75rem;
}

.shell-mobile .hero-option {
    min-height: 3rem;
}

/* Kosu-sonu istatistik izgarasi dar ekranda sikisik bosluklarla. */
.shell-mobile .runover-stats {
    gap: 0.5rem 0.8rem;
}

/* Koy: dukkan yazilari (1rem miras) ile karakter paneli (0.85rem) orantisizdi
   (2026-08-17) — ikisi de ~0.9rem bandinda bulusur. */
.shell-mobile .vendor {
    font-size: 0.9rem;
}

.shell-mobile .village-wide .character-panel,
.shell-mobile .village-wide .skills-panel {
    font-size: 0.92rem;
}

/* ============================================================================
   KISA EKRAN "ZOOM OUT" (2026-08-16, iPhone 13 raporu): Safari'nin ust/alt
   cubuklari dikey alani ~660px'e dusuruyor. Kok yazi boyu 15 -> 13px inince
   rem tabanli HER olcu (HUD, ped, statlar, cekmece, dugmeler) ~%13 kuculur;
   sabit bantlar da kisalir ki harita nefes alsin. Karo boyu px oldugu icin
   etkilenmez — harita zaten kaydirmali. html:has(body.shell-mobile) kancasi
   kurali mobil kabukla sinirlar (masaustune sizmaz; :has iOS 15.4+ / Chrome
   105+ mevcut, desteklemeyen eski tarayici sadece buyuk halde kalir).
   ============================================================================ */
@media (max-height: 720px) {
    html:has(body.shell-mobile) {
        font-size: 13px;
    }

    .shell-mobile .m-log {
        flex-basis: 7.5rem;
    }

    .shell-mobile .m-hud-strip {
        font-size: 0.85rem;
    }
}

/* Cok kisa (yatay tutulan telefon vb. degil, kucuk eski cihazlar): bir kademe daha. */
@media (max-height: 600px) {
    html:has(body.shell-mobile) {
        font-size: 12px;
    }
}

/* ============================================================================
   YATAY TELEFON (2026-08-16, kullanici istegi): dikey istif 340-390px boyda
   haritayi cucelestiriyordu. Yatayda ayni DOM, grid ile yeniden dizilir:
   harita solda tam boy; sagda dar serit — HUD, gunluk, ped. Stat sayilari
   (STR/DEF...) yatayda gizli (dikey serite sigmiyor; cekmecede duruyorlar),
   HP/XP barlari kalir. Dikey duzen bu bloktan etkilenmez.
   ============================================================================ */
@media (orientation: landscape) and (max-height: 620px) {
    .shell-mobile .m-screen {
        position: relative; /* HUD overlay'inin capasi */
        display: grid;
        /* Yan serit cift sutun genisliginde (2026-08-16, kullanici ayari: "sigmiyor"):
           gunluk tam bandi kaplar, altinda ped + statlar yan yana. Harita daralir. */
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 23rem);
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-areas:
            "map log"
            "map bottom";
        gap: 0.4rem;
    }

    /* HUD haritanin ustune yari saydam sabitlenir (2026-08-16, kullanici istegi:
       webdeki .map-hud gibi). Yan seritten cikinca gunluge tam boy kalir. */
    .shell-mobile .m-hud {
        position: absolute;
        z-index: 6;
        top: max(0.7rem, env(safe-area-inset-top));
        left: max(0.7rem, env(safe-area-inset-left));
        max-width: 55%;
        background: rgba(11, 14, 20, 0.55);
        border: 1px solid rgba(38, 48, 71, 0.7);
        border-radius: 5px;
        padding: 0.2rem 0.45rem;
    }

    /* Rozetler dar kutuda sarilir (dikeydeki tek-satir yatay kaydirma yerine). */
    .shell-mobile .m-hud-strip {
        flex-wrap: wrap;
        white-space: normal;
        overflow-x: visible;
    }

    .shell-mobile .m-map-frame {
        grid-area: map;
        min-height: 0;
    }

    /* Yukseklik satirdan gelsin: app.css tabanindaki sabit 13rem, grid'in
       "uzat" davranisini eziyordu (2026-08-16 bosluk raporu). */
    .shell-mobile .m-log {
        grid-area: log;
        min-height: 0;
        height: auto;
    }

    /* Ped + stat kutusu yan yana (dikeydeki gibi); genis seritte ikisi de sigar,
       stat sayilari da geri geldi. */
    .shell-mobile .m-bottom {
        grid-area: bottom;
    }

    /* Cekmece yatayda genis (2026-08-16, kullanici ayari): dikeyin 23rem'i genis
       ekranda dar kaliyordu; esya satirlari ve yetenek kartlari rahat etsin. */
    .shell-mobile .m-drawer {
        width: min(65vw, 36rem);
    }

    /* Koy yatayda iki sutun (2026-08-17, kullanici istegi): app.css'in 900px
       kirilimi yatay telefonu da tek sutuna dusuruyordu, genislik bosa gidiyordu. */
    .shell-mobile .village-columns {
        grid-template-columns: 1fr 1fr;
    }

    /* Karakter secimi yatayda tek ekrana sigar (2026-08-17, kullanici istegi):
       8 kahraman 2x4 yerine tek sira (genislik bol, yukseklik kit), kart
       dolgulari ve secenek boylari kisildi. */
    .shell-mobile .start-screen .start-card {
        padding: 0.7rem 1rem;
        gap: 0.5rem;
        max-width: 47rem; /* app.css'in 34rem tavani 8'li siraya dar (tasma, 2026-08-17) */
    }

    .shell-mobile .start-screen .hero-grid {
        /* minmax(0,1fr): kolon, icerigin min genisliginin altina inebilsin — 1fr
           tek basina "Barbarian" gibi adlarda kirilip kartin disina tasiyordu. */
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .shell-mobile .start-screen .hero-option {
        min-height: 0;
        min-width: 0;
        padding: 0.35rem 0.1rem;
        font-size: 0.7rem;
        overflow: hidden;
    }

    .shell-mobile .start-screen .start-input {
        min-height: 2.4rem;
    }

    /* Giris anlatisi yatayda kaydirmadan sigar (2026-08-17, kullanici istegi):
       metin solda dar puntoyla akar, Devam dugmesi sagda dikey ortali. */
    .shell-mobile .intro-card {
        max-width: 47rem;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.25rem 1.1rem;
        padding: 0.6rem 0.9rem;
    }

    .shell-mobile .intro-card .intro-line {
        grid-column: 1;
        margin: 0.15rem 0;
        /* 2026-08-17: iki kademe buyudu (0.68 -> 0.85 -> 0.98rem, kullanici ayari). */
        font-size: clamp(0.98rem, 3.1vh, 1.1rem);
        line-height: 1.4;
    }

    .shell-mobile .intro-card .action-buttons {
        grid-column: 2;
        grid-row: 1 / span 5; /* bes paragrafin yanina, dikey ortali */
    }

    /* Dovus yatayda iki sutun (2026-08-17, kullanici duzeni): solda dusman +
       gunluk + kahraman, sagda zarlar/yuvalar/eylemler. Sarmalayicilar gercek
       sutun olur (masaustunde display:contents) — sutunlar BAGIMSIZ akar,
       sag uzayinca soldaki kartlar esnemez (satir paylasimi hatasi, 2026-08-17). */
    .shell-mobile .combat-screen {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.5rem;
        align-items: start;
        /* Kritik: varsayilan (stretch) fazla dikey boslugu satirlara dagitip
           icerigi ortaliyordu — sag sutun buyuyunce sol yukari kayiyordu. */
        align-content: start;
    }

    .shell-mobile .combat-screen > .game-header {
        grid-column: 1 / -1;
    }

    .shell-mobile .combat-screen > .combat-left,
    .shell-mobile .combat-screen > .combat-right {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        min-width: 0;
    }

    .shell-mobile .combat-screen > .combat-left { grid-column: 1; }
    .shell-mobile .combat-screen > .combat-right { grid-column: 2; }

    /* Yuvalar yatayda 3 sutun (2026-08-17, kullanici ayari): cift silah + cift
       kalkan + ⚡ = 5 yuva, 2'serli dizilimde 3 satira tasip kaydiriyordu.
       3'lu dizilim: varsayilan 3 yuva tek satir, 5 yuva 2 satir. */
    .shell-mobile .combat-screen .slot {
        flex: 1 1 30%;
        min-width: 30%;
    }
}

/* Sekme icerigi: kaydirma cekmecenin kendisinde degil burada — baslik sabit kalir.
   Sag dolgu: kaydirma cubugu altin sayacinin ustune biniyordu (2026-08-16). */
.shell-mobile .m-drawer-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.7rem;
}

/* Salt-ikon sekme (⚙): yazili sekmeler esner, bu sabit kare kalir. */
.shell-mobile .m-tab-icon {
    flex: 0 0 2.75rem;
    font-size: 1.1rem;
}

/* Ayarlar sekmesi: her satirda solda etiket, sagda kontrol. */
.shell-mobile .m-settings {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 0.3rem;
}

.shell-mobile .m-set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-height: 2.75rem;
}

.shell-mobile .m-set-label {
    color: var(--dim);
}

.shell-mobile .m-set-btn {
    min-height: 2.75rem;
    min-width: 8.5rem; /* dugmeler alt alta ayni hizada dursun */
    padding: 0.3rem 0.8rem;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.95rem;
}

.shell-mobile .m-set-slider {
    width: 8.5rem; /* dugmelerle ayni kolon genisligi */
    accent-color: var(--accent);
}

/* Paylasilan paneller cekmecede dokunmatik boya buyur. Temel gorunum app.css'ten;
   burada yalniz boyutlar. Panel zaten cekmece kutusunda: kendi cercevesi gereksiz. */
.shell-mobile .m-drawer-body .character-panel,
.shell-mobile .m-drawer-body .skills-panel {
    border: none;
    background: transparent;
    padding: 0.2rem 0;
    font-size: 0.95rem;
    gap: 0.5rem;
}

/* Dugmeler: masaustunun 0.75rem mini dugmeleri parmaga kucuk. Kural kabuk geneli —
   ayni dugme koy dukkaninda ve dovus panelinde de var (Asama 3). */
.shell-mobile .mini-btn {
    min-height: 2.4rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
    border-radius: 6px;
}

/* Satirlar nefes alsin: esya ve yetenek kalemleri arasi bosluk. */
.shell-mobile .m-drawer-body .backpack-items,
.shell-mobile .m-drawer-body .skills {
    gap: 0.5rem;
}

.shell-mobile .m-drawer-body .pack-item {
    /* Dar seritte ad + dugmeler tek satira sigmayabilir: ad ustte, eylemler altta. */
    flex-wrap: wrap;
}

.shell-mobile .m-drawer-body .skill-item {
    padding: 0.45rem 0.55rem;
}

.shell-mobile .m-drawer-body .equip-slot {
    min-height: 2.2rem;
}

/* ✕ (cikar) dugmesi genel mini-btn buyutmesinden muaf (2026-08-17): satir
   yuksekligini gecmesin — satiri o degil, esya adi belirlesin. */
.shell-mobile .equip-slot .mini-btn {
    min-height: 0;
    padding: 0.05rem 0.5rem;
    font-size: 0.8rem;
}

.shell-mobile .m-drawer-body .equip-label {
    width: 5.6rem; /* dar seritte 6.5rem etiket esyanin yerini yiyordu */
}