/* ══════════════════════════════════════
   kk-style.css — TÜM STİLLER MODAL KAPSAMI İÇİNDE
   body / html / .wrap gibi global seçici YOK
   Sayfanın kendi dizaynını asla ezmez.
══════════════════════════════════════ */

/* ── Oyun sarmalayıcı (modal içi) ── */
.kk-game-wrap .wrap {
    width: min(900px, 100%);
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 15px;
}

/* ── Sahne ── */
.kk-game-wrap .stage {
    position: relative;
    min-height: 450px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    color: #f0e0c8;
}

/* ── Panel ── */
.kk-game-wrap .panel {
    padding: 15px;
    background: rgba(255,255,255,0.04);
    border-radius: 18px;
    overflow-y: auto;
    color: #f0e0c8;
}

/* ── Çekirdek serisi (JS tarafından #kkBeanRow olarak eklenir) ── */
#kkBeanRow {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    padding: 10px 0 4px;
    margin-bottom: 10px;
}

/* ── HUD ── */
.kk-game-wrap .hud {
    position: absolute;
    top: 15px; left: 15px; right: 15px;
    display: flex;
    justify-content: space-between;
    z-index: 5;
}

.kk-game-wrap .pill {
    background: rgba(0,0,0,0.3);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    color: #f0e0c8;
}

.kk-game-wrap .timer-pill b { color: #f7c948; }

.kk-game-wrap .timer-pill.danger {
    background: rgba(220,40,40,0.4);
    animation: kkTimerPulse 0.5s ease-in-out infinite;
}
.kk-game-wrap .timer-pill.danger b { color: #fff; }

@keyframes kkTimerPulse {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

/* ── Büyük geri bildirim ── */
.kk-game-wrap .big-feedback {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(0.5);
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
    transition: none;
    white-space: nowrap;
}
.kk-game-wrap .big-feedback.show { animation: kkBigFeedbackPop 1.1s ease-out forwards; }
.kk-game-wrap .big-feedback.win  { color: #7fff7f; }
.kk-game-wrap .big-feedback.lose { color: #ff6b6b; }
.kk-game-wrap .big-feedback.burn { color: #ff3d00; }

@keyframes kkBigFeedbackPop {
    0%   { opacity:0; transform: translate(-50%,-50%) scale(0.5); }
    15%  { opacity:1; transform: translate(-50%,-50%) scale(1.15); }
    30%  { transform: translate(-50%,-50%) scale(1); }
    75%  { opacity:1; transform: translate(-50%,-50%) scale(1); }
    100% { opacity:0; transform: translate(-50%,-90%) scale(0.95); }
}

/* ── Çekirdek alanı ── */
.kk-game-wrap .beanArea {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 28px;   /* çekirdeği biraz yukarı çeker, üstte geri sayım için yer açar */
}

.kk-game-wrap .bean {
    position: relative;
    z-index: 2;          /* ateş canvas z-index:1'in önünde */
    width: 220px; height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
    user-select: none;
    cursor: pointer;
}

.kk-game-wrap .bean-img {
    position: absolute;
    width: 220px; height: 260px;
    object-fit: contain;
    transition: opacity 0.6s ease;
    opacity: 0;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.kk-game-wrap .bean-img.active { opacity: 1; }

/* ── Sipariş geri sayımı (çekirdeğin üstünde, bean'e göre konumlanır) ── */
.kk-game-wrap .kk-order-countdown {
    position: absolute;
    top: -28px; left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    font-size: 30px;
    font-weight: 900;
    color: #f7c948;
    text-shadow: 0 3px 10px rgba(0,0,0,0.6);
    pointer-events: none;
    transition: color 0.2s;
}
.kk-game-wrap .kk-order-countdown.danger {
    color: #ff3d00;
    animation: kkHeartbeat 0.9s ease-in-out infinite;
}
@keyframes kkHeartbeat {
    0%, 100% { transform: translateX(-50%) scale(1); }
    15%      { transform: translateX(-50%) scale(1.22); }
    30%      { transform: translateX(-50%) scale(1); }
    45%      { transform: translateX(-50%) scale(1.14); }
    60%      { transform: translateX(-50%) scale(1); }
}

/* ── Titreşim ── */
.kk-game-wrap .bean.shaking { animation: kkBeanShake 0.08s linear infinite; }
@keyframes kkBeanShake {
    0%   { transform: translate(0,0) rotate(0deg); }
    25%  { transform: translate(-1.5px,1px) rotate(-0.4deg); }
    50%  { transform: translate(1.5px,-1px) rotate(0.4deg); }
    75%  { transform: translate(-1px,-1px) rotate(-0.2deg); }
    100% { transform: translate(1px,1px) rotate(0.2deg); }
}

/* ── Ateş — artık fire.png canvas kullanıyor, div gizli ── */
.kk-game-wrap .flame { display: none !important; }
.kk-game-wrap .fx { pointer-events: none; }

/* ── Duman ── */
.kk-game-wrap .smoke {
    position: absolute;
    left: 50%; top: -20px;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.kk-game-wrap .smoke span {
    width: 18px; height: 18px;
    position: absolute;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    animation: kkRise 2s linear infinite;
}
@keyframes kkRise {
    0%   { transform: translateY(0); opacity: 0; }
    20%  { opacity: 0.4; }
    100% { transform: translate(-50px,-150px) scale(2); opacity: 0; }
}

/* ── Kül ── */
.kk-game-wrap .ash-container { position:absolute; inset:0; pointer-events:none; }
.kk-game-wrap .ash-piece {
    position: absolute;
    width: 10px; height: 10px;
    background: #2a2a2a;
    border-radius: 40%;
    opacity: 0.9;
}
@keyframes kkAshFall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(220px) rotate(360deg); opacity: 0; }
}

/* ── Panel: sipariş bilgisi ── */
.kk-game-wrap .order-info {
    background: linear-gradient(145deg, rgba(247,201,72,0.12), rgba(247,201,72,0.04));
    border: 1px solid rgba(247,201,72,0.3);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 14px;
}
.kk-game-wrap .order-info-label {
    font-size: 10px; letter-spacing: 0.15em; opacity: 0.6; margin-bottom: 4px;
}
.kk-game-wrap .order-info-customer {
    font-size: 15px; font-weight: bold; color: #f7c948; margin-bottom: 4px;
}
.kk-game-wrap .order-info-target { font-size: 18px; display: flex; align-items: center; gap: 6px; }
.kk-game-wrap .order-info-target b { color: #ffd966; font-size: 22px; }
.kk-game-wrap .order-info-zone-img { height: 26px; width: auto; object-fit: contain; vertical-align: middle; }

/* ── Kavrulma durumu ── */
.kk-game-wrap .roast-state-big {
    font-size: 20px; font-weight: bold;
    margin-bottom: 8px; text-align: center;
    letter-spacing: 0.03em;
    padding: 6px 10px; border-radius: 8px;
    transition: color 0.4s, background 0.4s;
    color: #f0e0c8;
}
.kk-game-wrap .roast-state-big.state-ham   { color: #a8d060; }
.kk-game-wrap .roast-state-big.state-acik  { color: #e0c090; }
.kk-game-wrap .roast-state-big.state-orta  { color: #c89060; }
.kk-game-wrap .roast-state-big.state-koyu  { color: #8a5535; }
.kk-game-wrap .roast-state-big.state-yanik { color: #ff3d00; background: rgba(255,61,0,0.1); }

.kk-game-wrap .roast-state-img {
    height: 56px; width: auto;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}

/* ── Meter gizli ── */
.kk-game-wrap .meter       { display: none !important; }
.kk-game-wrap .meter-hint  { display: none !important; }

/* ── Ateş şiddeti kontrolü ── */
.kk-game-wrap .heat-control-wrap { margin: 14px 0; }
.kk-game-wrap .heat-label {
    font-size: 15px; font-weight: 700; opacity: 0.95; margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: #f7c948;
}
.kk-game-wrap .heat-track {
    position: relative;
    height: 120px; width: 44px;
    background: #1a1a1a;
    border-radius: 22px;
    margin: 0 auto;
    cursor: pointer;
    touch-action: none;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}
.kk-game-wrap .heat-fill {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 0%;
    background: linear-gradient(0deg, #ff3d00, #ff8f00, #ffd54f);
    transition: height 0.05s linear;
}
.kk-game-wrap .heat-knob {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translate(-50%, 50%);
    width: 36px; height: 36px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    pointer-events: none;
}
.kk-game-wrap .heat-hint {
    font-size: 10px; opacity: 0.4; text-align: center; margin-top: 6px;
    color: #f0e0c8;
}

/* ── Teslim ipucu ── */
.kk-game-wrap .deliver-hint {
    font-size: 11px; opacity: 0.55; text-align: center;
    margin-top: 12px; padding: 8px;
    background: rgba(247,201,72,0.1);
    border-radius: 8px;
    border: 1px solid rgba(247,201,72,0.2);
    color: #f0e0c8;
}

/* ── Butonlar (sadece modal içinde) ── */
.kk-game-wrap button,
#kkModal button {
    width: 100%; margin-top: 10px; padding: 10px;
    border: none; border-radius: 10px; cursor: pointer;
    background: #c59b33; color: #1a0d09;
    font-weight: bold; font-size: 15px;
}

/* ── Status ── */
.kk-game-wrap #status {
    margin-top: 12px; font-size: 15px; font-weight: bold;
    opacity: 0.95; min-height: 20px; text-align: center;
    padding: 8px; background: rgba(255,255,255,0.05);
    border-radius: 8px; color: #f0e0c8;
}

/* ══════════════════════════════════════
   POP-UP'LAR (position:fixed — modal içi)
══════════════════════════════════════ */

/* ── Tanıtım ── */
#kkModal .intro-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex; justify-content: center; align-items: center;
    z-index: 100010; padding: 20px; overflow-y: auto;
}
#kkModal .intro-overlay.hide { display: none; }

#kkModal .intro-card {
    background: linear-gradient(145deg, #2a1c14, #160e09);
    border: 1px solid rgba(255,200,100,0.25);
    border-radius: 22px; padding: 32px 26px;
    max-width: 420px; width: 100%; text-align: center;
    animation: kkOrderPop 0.4s cubic-bezier(0.18,0.89,0.32,1.28);
    color: #f0e0c8;
}
#kkModal .intro-icon  { font-size: 44px; margin-bottom: 8px; }
#kkModal .intro-title { font-size: 26px; margin: 0 0 6px; color: #f7c948; }
#kkModal .intro-sub   { font-size: 14px; opacity: 0.7; margin: 0 0 22px; }
#kkModal .intro-rules { text-align: left; margin-bottom: 24px; }
#kkModal .rule-row {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 13.5px; line-height: 1.45; margin-bottom: 13px;
    opacity: 0.92; color: #f0e0c8;
}
#kkModal .rule-row b   { color: #f7c948; }
#kkModal .rule-emoji   { font-size: 20px; flex-shrink: 0; width: 24px; text-align: center; }

/* ── Müşteri siparişi ── */
#kkModal .order-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    display: none; justify-content: center; align-items: center;
    z-index: 100005; padding: 20px;
}
#kkModal .order-overlay.show { display: flex; }

#kkModal .order-card {
    background: linear-gradient(145deg, #2a1c14, #1a110c);
    border: 1px solid rgba(255,200,100,0.2);
    border-radius: 20px; padding: 28px 24px;
    max-width: 340px; width: 100%; text-align: center;
    animation: kkOrderPop 0.35s cubic-bezier(0.18,0.89,0.32,1.28);
    color: #f0e0c8;
}
#kkModal .order-card.urgent {
    border-color: rgba(255,80,80,0.6);
    animation: kkOrderPop 0.35s cubic-bezier(0.18,0.89,0.32,1.28),
               kkUrgentPulse 0.8s ease-in-out infinite 0.4s;
}
@keyframes kkOrderPop {
    0%   { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}
@keyframes kkUrgentPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,60,60,0.4); }
    50%     { box-shadow: 0 0 0 12px rgba(255,60,60,0); }
}
#kkModal .order-avatar { font-size: 48px; margin-bottom: 10px; }
#kkModal .order-name   { font-size: 18px; font-weight: bold; margin-bottom: 12px; color: #f7c948; }
#kkModal .order-text   { font-size: 15px; line-height: 1.5; opacity: 0.9; margin-bottom: 20px; }
#kkModal .order-card.urgent .order-text { color: #ff8a80; font-weight: bold; }

/* ── Tutorial başlangıç ibaresi ── */
#kkModal .kk-tut-banner {
    font-size: 12px;
    font-weight: 700;
    color: #1a0d09;
    background: linear-gradient(135deg, #f7c948, #c59b33);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 14px;
    display: inline-block;
}

/* ── Konfeti ── */
#kkModal .confetti-container {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; display: none;
    z-index: 100020; overflow: hidden;
}
#kkModal .confetti-piece {
    position: absolute; top: -12px;
    width: 10px; height: 10px;
    border-radius: 2px;
    animation: kkConfettiFall linear forwards;
}
@keyframes kkConfettiFall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ══════════════════════════════════════
   TEMA İZOLASYONU — genel override
══════════════════════════════════════ */
#kkModal { color: #f0e0c8 !important; }

#kkModal p,
#kkModal span:not(.kk-play-icon),
#kkModal label { color: #f0e0c8 !important; }

#kkModal b, #kkModal strong { color: #f7c948 !important; }

#kkModal h1,#kkModal h2,#kkModal h3,#kkModal h4 {
    color: #f7c948 !important; margin: 0 0 8px 0;
}

/* big-feedback renk koruması */
#kkModal .big-feedback.win  { color: #7fff7f !important; }
#kkModal .big-feedback.lose { color: #ff6b6b !important; }
#kkModal .big-feedback.burn { color: #ff3d00 !important; }

#kkModal .timer-pill b         { color: #f7c948 !important; }
#kkModal .timer-pill.danger b  { color: #fff !important; }
#kkModal .order-info-target b  { color: #ffd966 !important; }

/* Kavrulma renkleri */
#kkModal .roast-state-big.state-ham   { color: #a8d060 !important; }
#kkModal .roast-state-big.state-acik  { color: #e0c090 !important; }
#kkModal .roast-state-big.state-orta  { color: #c89060 !important; }
#kkModal .roast-state-big.state-koyu  { color: #8a5535 !important; }
#kkModal .roast-state-big.state-yanik { color: #ff3d00 !important; background: rgba(255,61,0,0.1) !important; }

/* Çekirdek bean row */
#kkModal #kkBeanRow span  { color: rgba(245,230,200,0.4) !important; }
#kkModal #kkBeanRow img   {
    background: transparent !important;
    border: none !important; box-shadow: none !important; outline: none !important;
}

/* PNG şeffaflık */
#kkModal img, #kkModal .bean-img {
    background: transparent !important;
    border: none !important; box-shadow: none !important;
    outline: none !important; padding: 0 !important; margin: 0 !important;
}

/* Buton rengi koruması */
#kkModal button { color: #1a0d09 !important; }
#kkModal .kk-coach-skip { color: rgba(245,230,200,0.5) !important; }

/* ══════════════════════════════════════
   MOBİL LAYOUT — 600px ve altı
   Strateji: tek sayfa, scroll yok.
   Üst: HUD + çekirdek (stage, sabit yükseklik)
   Alt: sipariş bilgisi | kavrum + ateş kontrolü
══════════════════════════════════════ */
@media (max-width: 600px) {

    /* ── Modal tam ekran ── */
    .kk-modal-wrap {
        padding: 0;
        align-items: stretch;
    }
    .kk-modal-box {
        border-radius: 0;
        height: 100dvh;          /* dynamic viewport — adres çubuğunu hariç tutar */
        max-height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Kapat butonu */
    #kkCloseBtn.kk-close {
        top: 8px !important;
        right: 8px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
        line-height: 30px !important;
    }

    /* ── Oyun sarmalayıcı ── */
    .kk-game-wrap {
        flex: 1;
        min-height: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    /* ── Wrap: dikey iki bölüm ── */
    .kk-game-wrap .wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex: 1;
        min-height: 0;
        gap: 0;
    }

    /* ════════════════════════
       ÜSTTE: STAGE (çekirdek)
       Sabit yükseklik — çekirdeğe bak, tıkla
    ════════════════════════ */
    .kk-game-wrap .stage {
        position: relative;
        flex: 0 0 clamp(100px, 19vh, 150px);   /* alttan kısaltıldı — kısa ekranlarda daha da küçülür */
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        overflow: hidden;
    }

    /* HUD küçük */
    .kk-game-wrap .hud {
        top: 6px; left: 6px; right: 6px;
        gap: 4px;
    }
    .kk-game-wrap .pill {
        font-size: 10px;
        padding: 4px 7px;
    }

    .kk-game-wrap .kk-order-countdown {
        top: -70px;
        font-size: 18px;
    }

    /* Çekirdek küçült — ateş artık beanArea'da, ayrıca ölçeklenir */
    .kk-game-wrap .bean {
        width: 90px;
        height: 115px;
    }

    .kk-game-wrap .beanArea {
        padding-bottom: 10px;   /* mobilde daha az boşluk, ama yine çekirdeği yukarı çeker */
    }


    /* ════════════════════════
       ALTTA: PANEL
       Kalan yükseklik — scroll yok, sığdır
    ════════════════════════ */
    .kk-game-wrap .panel {
        flex: 1;
        min-height: 0;
        overflow-y: auto;             /* taşarsa kırpma yerine kaydır — hiçbir kısım gizlenmesin */
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
        padding: 6px 12px 8px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    /* Bean row gizle */
    #kkBeanRow { display: none !important; }

    /* Sipariş bilgisi — kompakt, etiket+isim yan yana */
    .kk-game-wrap .order-info {
        flex-shrink: 0;
        padding: 5px 10px;
        margin-bottom: 0;
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0;
    }
    .kk-game-wrap .order-info-label    { font-size: 11px; opacity: 0.75; margin-bottom: 0; margin-right: 4px; }
    .kk-game-wrap .order-info-customer { font-size: 13px; margin-bottom: 0; }
    .kk-game-wrap .order-info-target   { font-size: 13px; width: 100%; }
    .kk-game-wrap .order-info-target b { font-size: 16px; }
    .kk-game-wrap .order-info-zone-img { height: 20px; }

    /* Kavrum durumu — mobilde kaldırıldı (hedef çekirdek artık "Hedef:" satırında) */
    .kk-game-wrap .roast-state-big {
        display: none;
    }

    /* ── Ateş kontrolü — YATAY çubuk ── */
    .kk-game-wrap .heat-control-wrap {
        flex-shrink: 0;
        margin: 1px 0;
    }
    .kk-game-wrap .heat-label {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 4px;
        opacity: 0.95;
        color: #f7c948;
    }
    .kk-game-wrap .heat-track {
        width: 100%;
        height: clamp(36px, 8vh, 48px);
        border-radius: 24px;
        margin: 0;
        overflow: hidden;
    }

    /* Yatay dolum: soldan sağa */
    .kk-game-wrap .heat-fill {
        top: 0; bottom: 0; left: 0; right: auto;
        width: 0%;
        height: 100%;
        transition: width 0.05s linear;
    }

    /* Yatay knob */
    .kk-game-wrap .heat-knob {
        top: 50%; bottom: auto;
        left: 0%;
        transform: translate(-50%, -50%);
        width: clamp(30px, 7vh, 44px); height: clamp(30px, 7vh, 44px);
    }

    .kk-game-wrap .heat-hint {
        font-size: 9px;
        margin-top: 3px;
        opacity: 0.35;
    }

    /* Teslim ipucu — mobilde kaldırıldı (yer tasarrufu) */
    .kk-game-wrap .deliver-hint {
        display: none;
    }

    /* Status — JS ile stage içine, HUD ile geri sayım arasına taşınır */
    .kk-game-wrap .stage #status {
        position: absolute;
        top: 30px; left: 6px; right: 6px;
        z-index: 4;
        flex-shrink: 0;
        font-size: 10px;
        font-weight: 700;
        padding: 3px 6px;
        margin-top: 0;
        min-height: 0;
        text-align: center;
        background: rgba(255,255,255,0.08);
        border-radius: 6px;
    }

    /* Butonlar */
    .kk-game-wrap button,
    #kkModal button {
        font-size: 13px;
        padding: 8px;
        margin-top: 4px;
        flex-shrink: 0;
    }

    /* Big feedback konumu */
    .kk-game-wrap .big-feedback {
        font-size: 26px;
    }
}

/* ══════════════════════════════════════
   EK: Kahve paketi görseli (müşteri avatarı)
══════════════════════════════════════ */
#kkModal .order-avatar {
    font-size: 0;
    margin-bottom: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#kkModal .kk-pkg-img {
    width: 192px;
    height: auto;
    max-height: 260px;
    object-fit: contain;
    border-radius: 10px;
    background: transparent !important;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.65));
    animation: kkPkgFloat 3s ease-in-out infinite;
}
@keyframes kkPkgFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-6px); }
}
#kkModal .order-card.urgent .kk-pkg-img {
    filter: drop-shadow(0 10px 24px rgba(255,60,60,0.45));
}

/* Çekirdek illüstrasyonu canvas — büyürken taşmasın */
/* ════════════════════════════════════════
   BİTİŞ EKRANI (OYUN SONU)
════════════════════════════════════════ */
.kk-end-overlay {
    position: absolute;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8,4,2,0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow-y: auto;            /* mobilde içerik uzunsa kaydırılabilir */
    -webkit-overflow-scrolling: touch;
}
.kk-end-overlay.show {
    display: flex;
    animation: kkModalIn 0.25s ease;
}
.kk-end-card {
    width: 100%;
    max-width: 360px;
    margin: auto;                /* dikeyde ortalar, taşarsa scroll */
    background: linear-gradient(160deg, #2a1c14, #160e09);
    border: 1.5px solid rgba(247,201,72,0.4);
    border-radius: 18px;
    padding: 26px 22px 22px;
    text-align: center;
    color: #f5e6c8;
    box-shadow: 0 24px 60px rgba(0,0,0,0.7);
    animation: kkModalUp 0.3s cubic-bezier(0.18,0.89,0.32,1.1);
}
.kk-end-icon { font-size: 40px; margin-bottom: 6px; }
.kk-end-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px; font-weight: 900;
    color: #f7c948; margin-bottom: 4px;
}
.kk-end-score {
    font-size: 14px; color: rgba(245,230,200,0.7);
    margin-bottom: 18px;
}
.kk-end-rows {
    display: flex; flex-direction: column; gap: 1px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(197,155,51,0.2);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}
.kk-end-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 14px;
    font-size: 13px;
    color: rgba(245,230,200,0.85);
    background: rgba(255,255,255,0.02);
}
.kk-end-row b { font-size: 15px; font-weight: 700; }
.kk-end-row span { opacity: 0.8; }
#kkEndSpent { color: #e08a8a; }
#kkEndEarned { color: #7fd17f; }
.kk-end-net-row {
    border-top: 1px solid rgba(197,155,51,0.25);
    background: rgba(247,201,72,0.06);
}
.kk-end-net-row span { font-weight: 700; opacity: 1; }
.kk-end-net-row b { font-size: 17px; }
.kk-end-balance-row {
    border-top: 1px solid rgba(197,155,51,0.15);
}
.kk-end-balance-row b { color: #f7c948; }

.kk-end-replay {
    width: 100% !important;
    padding: 14px !important;
    background: linear-gradient(135deg, #c59b33, #a07820) !important;
    color: #1a0d09 !important;
    font-size: 15px !important; font-weight: 700 !important;
    letter-spacing: 0.03em;
    border: none !important; border-radius: 12px !important;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(197,155,51,0.35);
    transition: transform 0.15s, filter 0.15s;
    margin: 0 0 8px 0 !important;
}
.kk-end-replay:hover { transform: translateY(-2px); filter: brightness(1.08); }
.kk-end-close-btn {
    display: block !important;
    width: 100% !important;
    padding: 9px !important;
    background: rgba(255,255,255,0.08) !important;
    color: #d4bfa0 !important;
    font-size: 13px !important; font-weight: 500 !important;
    border: 1px solid rgba(245,230,200,0.30) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    margin: 0 !important;
    text-align: center !important;
    letter-spacing: 0.02em;
}
.kk-end-close-btn:hover {
    background: rgba(255,255,255,0.14) !important;
    color: #f5e6c8 !important;
}


/* Mobil: bitiş kartı ekrana otursun, buton her zaman erişilebilir */
@media (max-width: 600px) {
    .kk-end-overlay { padding: 14px; align-items: flex-start; }
    .kk-end-card { max-width: 100%; padding: 22px 18px 18px; margin-top: 8px; }
    .kk-end-title { font-size: 23px; }
    .kk-end-icon { font-size: 34px; }
}

/* ════════════════════════════════════════
   SİPARİŞ SÜRESİ DOLDU EKRANI
════════════════════════════════════════ */
.kk-timeout-overlay {
    position: absolute;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8,4,2,0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.kk-timeout-overlay.show {
    display: flex;
    animation: kkModalIn 0.25s ease;
}
.kk-timeout-card {
    width: 100%;
    max-width: 320px;
    margin: auto;
    background: linear-gradient(160deg, #2a1c14, #160e09);
    border: 1.5px solid rgba(255,80,80,0.4);
    border-radius: 18px;
    padding: 26px 22px 22px;
    text-align: center;
    color: #f5e6c8;
    box-shadow: 0 24px 60px rgba(0,0,0,0.7);
    animation: kkModalUp 0.3s cubic-bezier(0.18,0.89,0.32,1.1);
}
.kk-timeout-icon { font-size: 40px; margin-bottom: 10px; }
.kk-timeout-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px; font-weight: 900;
    color: #ff6b6b !important; margin-bottom: 20px;
    line-height: 1.3;
}
/* Doğru teslim sonucu — yeşil/altın vurgu */
.kk-timeout-overlay.result-win .kk-timeout-card { border-color: rgba(127,209,127,0.45); }
.kk-timeout-overlay.result-win .kk-timeout-title { color: #7fd17f !important; }
.kk-timeout-next {
    width: 100% !important;
    padding: 14px !important;
    background: linear-gradient(135deg, #c59b33, #a07820) !important;
    color: #1a0d09 !important;
    font-size: 15px !important; font-weight: 700 !important;
    letter-spacing: 0.03em;
    border: none !important; border-radius: 12px !important;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(197,155,51,0.35);
    transition: transform 0.15s, filter 0.15s;
    margin: 0 !important;
}
.kk-timeout-next:hover { transform: translateY(-2px); filter: brightness(1.08); }

@media (max-width: 600px) {
    .kk-timeout-overlay { padding: 14px; }
    .kk-timeout-card { max-width: 100%; padding: 22px 18px 18px; }
    .kk-timeout-title { font-size: 19px; }
    .kk-timeout-icon { font-size: 32px; }
}

/* ════════════════════════════════════════
   MOBİL: TUTORIAL — taşma/kayma olmadan
   sığsın. Sipariş kartı (1. adım coachmark'ı
   barındırır) ve coachmark baloncuğu küçülür.
════════════════════════════════════════ */
@media (max-width: 600px) {
    #kkModal .order-overlay {
        padding: 10px;
    }
    #kkModal .order-card {
        padding: 16px 16px;
        max-height: calc(100dvh - 32px);
        overflow: hidden;          /* güvenlik ağı — normalde devreye girmemeli */
    }
    #kkModal .order-avatar { margin-bottom: 8px; }
    #kkModal .kk-pkg-img { width: 112px; max-height: 140px; }
    #kkModal .order-name { font-size: 15px; margin-bottom: 6px; }
    #kkModal .order-text { font-size: 13px; line-height: 1.4; margin-bottom: 12px; }

    .kk-coachmark {
        width: min(240px, 84vw);
        padding: 12px 14px;
    }
    .kk-coach-title { font-size: 14px; margin-bottom: 5px; }
    .kk-coach-text  { font-size: 12px; line-height: 1.4; margin-bottom: 10px; }
}