.sm-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 9999;
        align-items: flex-start;
        justify-content: center;
        padding: 16px;
        overflow-y: auto;
        animation: smFade .15s ease;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .sm-overlay.is-open { display: flex; }
    @keyframes smFade { from { opacity: 0; } to { opacity: 1; } }

    .sm-modal {
        position: relative;
        width: 100%;
        max-width: 440px;
        background: #fff;
        border-radius: 18px;
        padding: 26px 22px 20px;
        margin: 5vh auto;
        box-shadow: 0 20px 50px rgba(0,0,0,0.25);
        animation: smSlide .18s ease;
    }
    @keyframes smSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

    .sm-close {
        position: absolute;
        top: 12px; right: 14px;
        width: 32px; height: 32px;
        border-radius: 50%;
        border: 0;
        background: #f3f4f6;
        color: #6b7280;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        font-family: inherit;
        transition: background .15s;
    }
    .sm-close:hover { background: #e5e7eb; color: #1f2937; }

    .sm-title {
        margin: 0 0 8px;
        font-size: 19px;
        font-weight: 800;
        color: #2c2c2c;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .sm-title i { color: #c1000f; font-size: 17px; }

    .sm-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 8px;
        font-size: 13px;
        color: #6b7280;
        font-weight: 600;
        margin-bottom: 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid #e5e7eb;
    }
    .sm-tname { color: #92400e; font-weight: 800; }
    .sm-meta-sep { color: #cbd5e1; }
    #smMasa { background: #dcfce7; color: #15803d; padding: 1px 8px; border-radius: 100px; font-weight: 800; font-size: 11.5px; letter-spacing: 0.3px; }
    .sm-mlen { background: #fef3c7; color: #92400e; padding: 1px 8px; border-radius: 100px; font-weight: 800; font-size: 11.5px; display: inline-flex; align-items: center; gap: 4px; }
    .sm-mlen i { font-size: 10px; }

    .sm-form { display: flex; flex-direction: column; gap: 14px; }
    .sm-row { display: flex; flex-direction: column; gap: 6px; }
    .sm-label {
        font-size: 12.5px;
        font-weight: 700;
        color: #374151;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .sm-label i { color: #c1000f; font-size: 13px; }

    .sm-input {
        width: 100%;
        padding: 14px 16px;
        font-size: 22px;
        font-weight: 800;
        text-align: center;
        background: #f9fafb;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        color: #1f2937;
        font-family: inherit;
        outline: none;
        transition: border-color .15s, background .15s, box-shadow .15s;
        -moz-appearance: textfield;
    }
    .sm-input::-webkit-outer-spin-button,
    .sm-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .sm-input:focus {
        border-color: #c1000f;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(193,0,15,0.10);
    }

    .sm-hint {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        padding: 10px 12px;
        background: #fef3c7;
        border: 1px solid #fde68a;
        border-radius: 10px;
        font-size: 12.5px;
        color: #78350f;
        line-height: 1.45;
    }
    .sm-hint i { color: #b45309; font-size: 13px; margin-top: 1px; flex-shrink: 0; }
    .sm-hint strong { color: #92400e; }

    .sm-submit {
        margin-top: 4px;
        padding: 13px 16px;
        background: linear-gradient(135deg, #c1000f, #8b0000);
        color: #fff;
        border: 0;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 800;
        font-family: inherit;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: 0 4px 14px rgba(193,0,15,0.30);
        transition: background .15s, transform .12s;
    }
    .sm-submit:hover { background: linear-gradient(135deg, #a30009, #6e0000); }
    .sm-submit:active { transform: translateY(1px); }
    .sm-submit:disabled { background: #9ca3af; cursor: wait; box-shadow: none; }
    
    
    /* ==== KEYPAD ==== */
    .sm-keypad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 8px;
    }
    .sm-key {
        padding: 18px 0;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        font-size: 22px;
        font-weight: 700;
        color: #1f2937;
        cursor: pointer;
        font-family: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .1s, transform .08s, border-color .1s;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    .sm-key:hover { background: #f3f4f6; }
    .sm-key:active { transform: scale(0.96); background: #e5e7eb; }
    .sm-key.sm-key-back {
        background: #fef3c7;
        border-color: #fde68a;
        color: #92400e;
        font-size: 20px;
    }
    .sm-key.sm-key-back:hover { background: #fde68a; }
    .sm-key.sm-key-ok {
        background: linear-gradient(135deg, #16a34a, #15803d);
        border-color: transparent;
        color: #fff;
        font-size: 22px;
        box-shadow: 0 4px 12px rgba(22,163,74,0.30);
    }
    .sm-key.sm-key-ok:hover { filter: brightness(1.08); }
    .sm-key.sm-key-ok:disabled { background: #9ca3af; box-shadow: none; cursor: wait; }

    /* Input clickable pointer (readonly ama tiklanabilir) */
    .sm-input {
        cursor: pointer;
        caret-color: transparent;
    }
    /* Aktif input — yesil vurgu */
    .sm-input.is-active {
        border-color: #16a34a !important;
        background: #f0fdf4 !important;
        box-shadow: 0 0 0 4px rgba(22,163,74,0.12) !important;
        color: #15803d;
    }
    .sm-input.is-locked {
        cursor: not-allowed;
    }
    
    /* ==== CHOICE BUTONLARI — Kazandim / Kaybettim ==== */
    .sm-choice {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 4px;
    }
    @media (min-width: 480px) {
        .sm-choice { flex-direction: row; }
    }
    .sm-choice-btn {
        flex: 1;
        padding: 22px 16px;
        border: 2px solid transparent;
        border-radius: 14px;
        font-size: 17px;
        font-weight: 800;
        font-family: inherit;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: transform .12s, box-shadow .15s, filter .15s;
        color: #fff;
    }
    .sm-choice-btn i { font-size: 18px; }
    .sm-choice-btn.sm-choice-win {
        background: linear-gradient(135deg, #16a34a, #15803d);
        box-shadow: 0 4px 14px rgba(22,163,74,0.30);
    }
    .sm-choice-btn.sm-choice-win:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .sm-choice-btn.sm-choice-lose {
        background: linear-gradient(135deg, #dc2626, #991b1b);
        box-shadow: 0 4px 14px rgba(220,38,38,0.30);
    }
    .sm-choice-btn.sm-choice-lose:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .sm-choice-btn:active { transform: translateY(1px); }

    /* Inputs wrapper — choice sonrasi acilir */
    .sm-inputs { display: flex; flex-direction: column; gap: 14px; }

    .sm-back-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2px;
    }
    .sm-back {
        background: transparent;
        border: 0;
        color: #6b7280;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        padding: 6px 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: inherit;
    }
    .sm-back:hover { color: #c1000f; }
    .sm-badge {
        padding: 4px 12px;
        border-radius: 100px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.3px;
    }
    .sm-badge.win { background: #dcfce7; color: #15803d; }
    .sm-badge.lose { background: #fee2e2; color: #991b1b; }

    /* Otomatik doldurulmus (readonly) input */
    .sm-input.is-locked {
        background: #f3f4f6;
        color: #6b7280;
        cursor: not-allowed;
    }
    
    
    /* ==== SKOR ÖZETİ KARTI (2026-07-17 UX) ==== */
    .sm-summary {
        margin-top: 12px;
        padding: 16px 14px 12px;
        background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
        border: 1.5px solid #86efac;
        border-radius: 14px;
        text-align: center;
        animation: smSummarySlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes smSummarySlideIn {
        from { transform: translateY(-6px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    .sm-summary-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .sm-summary-side {
        flex: 1;
        min-width: 0;
        text-align: left;
    }
    .sm-summary-side-right { text-align: right; }
    .sm-summary-name {
        font-size: 12px;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sm-summary-scores {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-variant-numeric: tabular-nums;
    }
    .sm-summary-score {
        font-size: 30px;
        font-weight: 800;
        color: #15803d;
        line-height: 1;
        min-width: 32px;
        text-align: center;
    }
    .sm-summary-score.is-loser {
        color: #6b7280;
    }
    .sm-summary-dash {
        font-size: 22px;
        color: #9ca3af;
        font-weight: 400;
    }
    .sm-summary-status {
        margin-top: 8px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #15803d;
    }
    .sm-summary-status.is-loser {
        color: #6b7280;
    }

    /* Keypad wrapper — koşullu görünürlük için */
    .sm-keypad-wrap { display: block; }
    .sm-keypad-wrap[hidden] { display: none !important; }

    /* SKOR GÖNDER butonu — YEŞİL */
    .sm-send-btn {
        background: linear-gradient(135deg, #16a34a, #15803d) !important;
        border: 0 !important;
        color: #fff !important;
        margin-top: 12px !important;
        box-shadow: 0 6px 16px rgba(22,163,74,0.30) !important;
        animation: smSendPulse 0.5s ease-out 0.28s 1;
    }
    .sm-send-btn:hover { filter: brightness(1.08); }
    .sm-send-btn[hidden] { display: none !important; }
    @keyframes smSendPulse {
        0%   { transform: scale(1); box-shadow: 0 6px 16px rgba(22,163,74,0.30); }
        50%  { transform: scale(1.03); box-shadow: 0 10px 24px rgba(22,163,74,0.45); }
        100% { transform: scale(1); box-shadow: 0 6px 16px rgba(22,163,74,0.30); }
    }

    
    /* ==== KİLİTLİ ALAN: input değil, sabit yeşil metin (2026-07-17 v3) ==== */
    .sm-row { position: relative; }
    .sm-input.is-locked {
        background: transparent !important;
        color: #16a34a !important;
        cursor: default !important;
        border: 0 !important;
        padding: 8px 12px !important;
        font-size: 34px !important;
        font-weight: 800 !important;
        text-align: center !important;
        pointer-events: none !important;
        caret-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        -webkit-user-select: none;
        user-select: none;
    }
    .sm-row.is-locked-row .sm-label {
        color: #15803d;
        font-weight: 700;
    }
    .sm-row.is-locked-row .sm-label::after {
        content: " · GALİP";
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.2px;
        color: #15803d;
        background: #dcfce7;
        padding: 2px 8px;
        border-radius: 999px;
        margin-left: 6px;
    }
    
    .swal2-container { z-index: 99999 !important; }