/* İşlem tahtası artık dış font kullanmaz; sistem fontlarıyla offline çalışır. */
.math-board,
.math-cell,
.result-digit,
.operator,
.carry-circle {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-variant-numeric: lining-nums tabular-nums;
}

:root {
        --blue-900: #0f3c91;
        --blue-800: #1357c8;
        --blue-700: #1769e8;
        --blue-600: #2f80ed;
        --blue-200: #bfdbfe;
        --blue-100: #eaf4ff;
        --green-800: #117334;
        --green-700: #178a3f;
        --green-600: #22a64c;
        --green-200: #bbf7d0;
        --green-100: #edfff4;
        --orange-600: #f59e0b;
        --orange-500: #ffb020;
        --red-600: #dc2626;
        --red-500: #ef4444;
        --slate-900: #0f172a;
        --slate-700: #334155;
        --slate-500: #64748b;
        --slate-300: #cbd5e1;
        --slate-200: #e2e8f0;
        --slate-100: #f1f5f9;
        --white: #ffffff;
        --unit-size: 40px;
        --rod-width: 38px;
        --rod-height: 144px;
        --radius-xl: 26px;
        --shadow-soft: 0 18px 45px rgba(15, 23, 42, .16);
        --shadow-card: 0 12px 30px rgba(15, 23, 42, .12);
        --focus-ring: 0 0 0 4px rgba(47,128,237,.28);
    }

    * { box-sizing: border-box; }

    html, body {
        margin: 0;
        min-height: 100%;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background:
            radial-gradient(circle at 12% 12%, rgba(47,128,237,.18), transparent 28%),
            radial-gradient(circle at 90% 18%, rgba(34,166,76,.16), transparent 26%),
            linear-gradient(135deg, #eef7ff 0%, #f8fbff 52%, #effdf4 100%);
        color: var(--slate-900);
        touch-action: manipulation;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px;
        overflow-x: hidden;
    }

    button, select {
        font-family: inherit;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .simulation-shell {
        width: min(1180px, 100%);
        position: relative;
        isolation: isolate;
    }

    .app {
        position: relative;
        overflow: hidden;
        background: rgba(255,255,255,.96);
        border: 1px solid rgba(148,163,184,.55);
        border-radius: 34px;
        box-shadow: var(--shadow-soft);
    }

    .app::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            radial-gradient(circle at 8% 82%, rgba(47,128,237,.10), transparent 18%),
            radial-gradient(circle at 92% 78%, rgba(245,158,11,.12), transparent 18%),
            linear-gradient(90deg, rgba(15,60,145,.03), transparent 36%, rgba(34,166,76,.04));
        z-index: -1;
    }

    .topbar {
        min-height: 102px;
        padding: 16px 18px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px 18px;
        color: #fff;
        background:
            linear-gradient(135deg, var(--blue-900), var(--blue-700) 58%, #12a6e8);
        position: relative;
        overflow: hidden;
    }

    .topbar::after {
        content: "2+3=5   7-2=5   10 birlik = 1 onluk";
        position: absolute;
        right: 22px;
        bottom: 8px;
        font-weight: 800;
        letter-spacing: .04em;
        opacity: .08;
        font-size: clamp(.95rem, 1.8vw, 1.45rem);
        white-space: nowrap;
        max-width: min(44%, 420px);
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
        padding-right: 8px;
        position: relative;
        z-index: 2;
    }

    .brand-icon {
        width: 66px;
        height: 66px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border-radius: 20px;
        background: linear-gradient(145deg, #fff, #e8f1ff);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 18px rgba(0,0,0,.18);
        position: relative;
    }

    .mini-blocks {
        width: 42px;
        height: 40px;
        position: relative;
    }

    .mini-blocks span {
        position: absolute;
        width: 13px;
        border-radius: 4px;
        box-shadow: inset -2px -2px 0 rgba(0,0,0,.13), inset 2px 2px 0 rgba(255,255,255,.45);
    }

    .mini-blocks span:nth-child(1) { left: 2px; bottom: 0; height: 26px; background: #22c55e; }
    .mini-blocks span:nth-child(2) { left: 16px; bottom: 0; height: 34px; background: #84cc16; }
    .mini-blocks span:nth-child(3) { left: 30px; bottom: 0; height: 22px; background: #2f80ed; }
    .mini-blocks::after {
        content: "";
        position: absolute;
        right: -2px;
        top: 0;
        width: 8px;
        height: 8px;
        background: #2f80ed;
        border-radius: 50%;
        box-shadow: -17px 7px 0 #22c55e;
    }

    .brand h1 {
        margin: 0;
        font-size: clamp(1.55rem, 3.2vw, 2.45rem);
        line-height: 1.04;
        letter-spacing: -.035em;
        text-shadow: 0 2px 0 rgba(0,0,0,.18);
    }

    .brand p {
        margin: 5px 0 0;
        font-size: clamp(.92rem, 1.7vw, 1.18rem);
        font-weight: 700;
        opacity: .94;
    }

    .brand > div:last-child {
        min-width: 0;
    }

    .control-pack {
        display: grid;
        grid-template-columns: minmax(180px, 1.3fr) 118px 128px 104px;
        align-items: center;
        justify-content: end;
        gap: 8px;
        padding: 8px;
        border-radius: 24px;
        background: rgba(255,255,255,.10);
        border: 1px solid rgba(255,255,255,.18);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
        position: relative;
        z-index: 2;
    }

    .pill-btn,
    .speed-select,
    .ghost-btn {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.38);
        padding: 0 16px;
        font-weight: 800;
        font-size: .98rem;
        color: #fff;
        cursor: pointer;
        white-space: nowrap;
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
        box-shadow: 0 8px 18px rgba(0,0,0,.18);
    }

    .pill-btn {
        background: linear-gradient(145deg, #34d399, #0f9f66);
        min-width: 188px;
    }

    .pill-btn.off {
        background: linear-gradient(145deg, #f8fafc, #dbeafe);
        color: var(--blue-900);
        border-color: rgba(15,60,145,.22);
    }

    .speed-select {
        background: rgba(15, 60, 145, .56);
        color: #fff;
        outline: none;
    }

    .speed-select option {
        background: #fff;
        color: var(--slate-900);
    }

    .ghost-btn {
        background: rgba(255,255,255,.16);
        min-width: 100px;
    }

    .pill-btn:focus-visible,
    .speed-select:focus-visible,
    .ghost-btn:focus-visible,
    .primary-action:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring), 0 8px 18px rgba(0,0,0,.18);
    }

    .pill-btn:hover,
    .ghost-btn:hover,
    .primary-action:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
    }

    .content {
        position: relative;
        padding: 20px;
    }

    .stepper {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 14px;
    }

    .step {
        min-height: 42px;
        border-radius: 16px;
        border: 1px solid var(--slate-200);
        background: #fff;
        color: var(--slate-500);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 7px 9px;
        font-size: .84rem;
        font-weight: 850;
        text-align: center;
        box-shadow: 0 4px 10px rgba(15,23,42,.06);
    }

    .step .dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--slate-300);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
        flex: 0 0 auto;
    }

    .step.active {
        color: var(--blue-900);
        border-color: rgba(47,128,237,.45);
        background: linear-gradient(180deg, #fff, #edf6ff);
        box-shadow: 0 7px 18px rgba(47,128,237,.14);
    }

    .step.active .dot {
        background: var(--blue-600);
        box-shadow: 0 0 0 4px rgba(47,128,237,.14);
    }

    .step.done {
        color: var(--green-800);
        border-color: rgba(34,166,76,.34);
        background: #f2fff7;
    }

    .step.done .dot {
        background: var(--green-600);
    }

    .workspace {
        display: grid;
        grid-template-columns: minmax(280px, .9fr) minmax(250px, 1.05fr) minmax(250px, 1.05fr);
        gap: 18px;
        align-items: stretch;
        position: relative;
        min-height: 430px;
    }

    .panel {
        position: relative;
        min-height: 430px;
        border-radius: var(--radius-xl);
        border: 1px solid rgba(148,163,184,.46);
        box-shadow: var(--shadow-card);
        overflow: hidden;
    }

    .math-panel {
        background:
            linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.98)),
            radial-gradient(circle at 50% 12%, rgba(245,158,11,.12), transparent 32%);
        padding: 18px 18px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .panel-title {
        align-self: stretch;
        min-height: 43px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 12px;
        font-weight: 900;
        font-size: 1.05rem;
        letter-spacing: -.01em;
        color: #fff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 18px rgba(15,23,42,.12);
        text-align: center;
    }

    .math-panel .panel-title {
        background: linear-gradient(145deg, var(--blue-700), var(--blue-900));
    }

    .place-panel.tens .panel-title {
        background: linear-gradient(145deg, #34c759, var(--green-800));
    }

    .place-panel.units .panel-title {
        background: linear-gradient(145deg, #38bdf8, var(--blue-800));
    }

    .math-board {
        width: fit-content;
        max-width: 100%;
        margin-top: 18px;
        margin-inline: auto;
        position: relative;
        display: grid;
        grid-template-columns: 52px 92px 92px;
        grid-template-rows: 62px 96px 96px 18px 96px;
        column-gap: 0;
        align-items: center;
        justify-items: center;
        user-select: none;
    }

    .carry-circle {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        width: 62px;
        height: 52px;
        border: 3px solid rgba(239,68,68,.88);
        border-radius: 18px;
        display: grid;
        place-items: center;
        font-size: 2rem;
        line-height: 1;
        color: var(--red-600);
        font-weight: 950;
        background: rgba(255,255,255,.86);
        box-shadow: 0 8px 18px rgba(220,38,38,.12);
        opacity: .55;
        transition: opacity .35s ease, transform .35s ease, background .35s ease;
    }

    .carry-circle.filled {
        opacity: 1;
        transform: scale(1.08);
        background: #fff7ed;
    }

    .math-arrow {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        align-self: end;
        margin-bottom: -16px;
        width: 2px;
        height: 22px;
        border-left: 2px dotted rgba(22,128,61,.62);
        position: relative;
    }

    .math-arrow::after {
        content: "";
        position: absolute;
        bottom: -6px;
        left: -5px;
        border-top: 7px solid rgba(22,128,61,.78);
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
    }

    /* --- Satır çerçevesi: gap=0, orta border yok, tek kutu görünümü --- */
    .digit-t1.row-framed,
    .digit-t2.row-framed {
        background: linear-gradient(180deg, #fff8ea, #ffeecf);
        border-color: rgba(245,158,11,.80);
        border-right-color: transparent;
        border-radius: 18px 0 0 18px;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.90),
            0 8px 18px rgba(217,119,6,.14);
    }
    .digit-u1.row-framed,
    .digit-u2.row-framed {
        background: linear-gradient(180deg, #fff8ea, #ffeecf);
        border-color: rgba(245,158,11,.80);
        border-left-color: transparent;
        border-radius: 0 18px 18px 0;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.90),
            0 8px 18px rgba(217,119,6,.14);
    }

    .math-cell,
    .result-digit {
        position: relative;
        z-index: 2;
        width: 82px;
        min-height: 82px;
        padding-inline: 3px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        font-size: clamp(3.6rem, 7.5vw, 5.4rem);
        line-height: .9;
        font-weight: 950;
        letter-spacing: -.05em;
        border: 2px solid transparent;
        transition: transform .25s ease, filter .25s ease, text-shadow .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    .math-cell.tens,
    .result-digit.tens { color: var(--green-800); }

    .math-cell.units,
    .result-digit.units { color: var(--blue-900); }

    #t1 { color: #15803d; }
    #u1 { color: #1d4ed8; }
    #t2 { color: #d97706; }
    #u2 { color: #16a34a; }

    #resT { color: #0f766e; }
    #resU { color: #1e40af; }

    .math-cell.active-units,
    .math-cell.active-tens {
        transform: scale(1.18);
        filter: saturate(1.35);
        box-shadow: 0 14px 28px rgba(15,23,42,.14);
        text-shadow: 0 5px 10px rgba(15,23,42,.16);
    }

    #u1.active-units {
        background: linear-gradient(180deg, #eef4ff 0%, #dbe9ff 100%);
        border-color: rgba(29,78,216,.36);
        box-shadow:
            0 14px 28px rgba(15,23,42,.14),
            inset 0 1px 0 rgba(255,255,255,.92),
            0 0 0 4px rgba(29,78,216,.12);
    }

    #u2.active-units {
        background: linear-gradient(180deg, #eefdf3 0%, #d8f7e3 100%);
        border-color: rgba(22,163,74,.36);
        box-shadow:
            0 14px 28px rgba(15,23,42,.14),
            inset 0 1px 0 rgba(255,255,255,.92),
            0 0 0 4px rgba(22,163,74,.12);
    }

    #t1.active-tens {
        background: linear-gradient(180deg, #effff4 0%, #d8f8e3 100%);
        border-color: rgba(21,128,61,.34);
        box-shadow:
            0 14px 28px rgba(15,23,42,.14),
            inset 0 1px 0 rgba(255,255,255,.92),
            0 0 0 4px rgba(21,128,61,.12);
    }

    #t2.active-tens {
        background: linear-gradient(180deg, #fff7ea 0%, #ffe7c2 100%);
        border-color: rgba(217,119,6,.34);
        box-shadow:
            0 14px 28px rgba(15,23,42,.14),
            inset 0 1px 0 rgba(255,255,255,.92),
            0 0 0 4px rgba(217,119,6,.12);
    }

    .operator {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        align-self: center;
        justify-self: center;
        font-size: 4.3rem;
        font-weight: 950;
        color: var(--blue-900);
        transform: translateY(5px);
        position: relative;
        z-index: 2;
    }

    .digit-t1 { grid-column: 2 / 3; grid-row: 2 / 3; }
    .digit-u1 { grid-column: 3 / 4; grid-row: 2 / 3; }
    .digit-t2 { grid-column: 2 / 3; grid-row: 3 / 4; }
    .digit-u2 { grid-column: 3 / 4; grid-row: 3 / 4; }

    .divider {
        grid-column: 1 / 4;
        grid-row: 4 / 5;
        width: 100%;
        height: 8px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--blue-900), var(--blue-600));
        box-shadow: 0 4px 8px rgba(47,128,237,.20);
    }

    .result-digit {
        opacity: 0;
        transform: scale(.68);
    }

    .result-digit.show {
        opacity: 1;
        transform: scale(1);
    }

    .result-digit.pulse {
        animation: resultPulse .62s ease;
    }

    .result-t { grid-column: 2 / 3; grid-row: 5 / 6; }
    .result-u { grid-column: 3 / 4; grid-row: 5 / 6; }

    .board-note {
        margin-top: auto;
        width: 100%;
        border-radius: 18px;
        background: #fff7ed;
        border: 1px solid rgba(245,158,11,.35);
        color: #92400e;
        padding: 11px 13px;
        font-weight: 800;
        line-height: 1.35;
        text-align: center;
    }

    .place-panel {
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .place-panel.tens {
        background:
            linear-gradient(180deg, rgba(240,253,244,.96), rgba(255,255,255,.96)),
            radial-gradient(circle at 18% 20%, rgba(34,166,76,.14), transparent 34%);
    }

    .place-panel.units {
        background:
            linear-gradient(180deg, rgba(239,246,255,.98), rgba(255,255,255,.96)),
            radial-gradient(circle at 82% 18%, rgba(47,128,237,.14), transparent 34%);
    }

    .place-body {
        position: relative;
        flex: 1;
        min-height: 292px;
        border-radius: 22px;
        border: 2px dashed rgba(148,163,184,.42);
        background:
            linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.36)),
            repeating-linear-gradient(0deg, rgba(148,163,184,.08), rgba(148,163,184,.08) 1px, transparent 1px, transparent 40px),
            repeating-linear-gradient(90deg, rgba(148,163,184,.08), rgba(148,163,184,.08) 1px, transparent 1px, transparent 40px);
        overflow: hidden;
    }

    .place-body::before {
        content: "";
        position: absolute;
        inset: 14px;
        border-radius: 18px;
        pointer-events: none;
        background: radial-gradient(circle at 22% 15%, rgba(255,255,255,.88), transparent 22%);
    }

    .hint-label {
        position: absolute;
        left: 14px;
        bottom: 14px;
        right: 14px;
        min-height: 44px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        font-weight: 950;
        color: var(--slate-700);
        background: rgba(255,255,255,.82);
        border: 1px solid rgba(148,163,184,.34);
        text-align: center;
        padding: 8px;
    }

    .place-panel.tens .hint-label { color: var(--green-800); }
    .place-panel.units .hint-label { color: var(--blue-900); }

    .carry-path {
        position: absolute;
        pointer-events: none;
        inset: auto 24px 58px auto;
        width: 122px;
        height: 74px;
        border-top: 3px dashed rgba(22,128,61,.52);
        border-radius: 60% 45% 0 0;
        opacity: .0;
        transform: rotate(-6deg);
        transition: opacity .28s ease;
    }

    .carry-path.show { opacity: 1; }

    .carry-path::after {
        content: "";
        position: absolute;
        left: 2px;
        top: -8px;
        border-right: 12px solid rgba(22,128,61,.65);
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        transform: rotate(-14deg);
    }

    .animation-layer {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 40;
        overflow: visible;
    }

    .unit-cube,
    .ten-rod {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transform: translate(-50%, -50%) scale(.2);
        transform-origin: center center;
        will-change: transform, opacity, filter;
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 950;
        text-shadow: 0 1px 2px rgba(0,0,0,.36);
        user-select: none;
    }

    .unit-cube {
        width: var(--unit-size);
        height: var(--unit-size);
        border-radius: 11px;
        background:
            linear-gradient(145deg, #6ec7ff 0%, #2f80ed 46%, #1250b4 100%);
        border: 2px solid rgba(15,60,145,.65);
        box-shadow:
            inset 6px 6px 8px rgba(255,255,255,.40),
            inset -7px -7px 9px rgba(8,47,111,.36),
            0 9px 14px rgba(15, 60, 145, .24);
    }

    .unit-cube::before {
        content: "";
        position: absolute;
        inset: 4px 6px auto 6px;
        height: 9px;
        border-radius: 999px;
        background: rgba(255,255,255,.38);
    }

    .unit-cube.variant-u1 {
        background: linear-gradient(145deg, #6ea8ff 0%, #2563eb 46%, #143c9c 100%);
        border-color: rgba(29,78,216,.72);
        box-shadow: inset 6px 6px 8px rgba(255,255,255,.40), inset -7px -7px 9px rgba(20,60,156,.34), 0 9px 14px rgba(29,78,216,.24);
    }

    .unit-cube.variant-u2 {
        background: linear-gradient(145deg, #86efac 0%, #22c55e 46%, #15803d 100%);
        border-color: rgba(21,128,61,.72);
        box-shadow: inset 6px 6px 8px rgba(255,255,255,.36), inset -7px -7px 9px rgba(21,128,61,.30), 0 9px 14px rgba(21,128,61,.24);
    }

    .unit-cube.packaged {
        background:
            linear-gradient(145deg, #ff8a8a 0%, var(--red-500) 50%, #991b1b 100%);
        border-color: rgba(153,27,27,.70);
        box-shadow:
            inset 6px 6px 8px rgba(255,255,255,.34),
            inset -7px -7px 9px rgba(127,29,29,.35),
            0 9px 14px rgba(220,38,38,.24);
    }

    .ten-rod {
        width: var(--rod-width);
        height: var(--rod-height);
        border-radius: 12px;
        background:
            linear-gradient(145deg, #7ee787 0%, #22c55e 48%, #137a31 100%);
        border: 2px solid rgba(17,115,52,.70);
        box-shadow:
            inset 6px 6px 8px rgba(255,255,255,.33),
            inset -8px -8px 10px rgba(17,115,52,.32),
            0 10px 15px rgba(17,115,52,.22);
        overflow: hidden;
    }

    .ten-rod::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent calc(var(--rod-height) / 10 - 2px),
                rgba(17,115,52,.62) calc(var(--rod-height) / 10 - 2px),
                rgba(17,115,52,.62) calc(var(--rod-height) / 10)
            );
    }

    .ten-rod::after {
        content: "";
        position: absolute;
        inset: 5px auto 5px 6px;
        width: 9px;
        border-radius: 999px;
        background: rgba(255,255,255,.30);
    }

    .ten-rod.variant-t1 {
        background: linear-gradient(145deg, #86efac 0%, #22c55e 48%, #15803d 100%);
        border-color: rgba(21,128,61,.72);
        box-shadow: inset 6px 6px 8px rgba(255,255,255,.33), inset -8px -8px 10px rgba(21,128,61,.32), 0 10px 15px rgba(21,128,61,.22);
    }

    .ten-rod.variant-t1::before {
        background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rod-height) / 10 - 2px), rgba(21,128,61,.62) calc(var(--rod-height) / 10 - 2px), rgba(21,128,61,.62) calc(var(--rod-height) / 10));
    }

    .ten-rod.variant-t2 {
        background: linear-gradient(145deg, #fde68a 0%, #f59e0b 48%, #d97706 100%);
        border-color: rgba(217,119,6,.72);
        box-shadow: inset 6px 6px 8px rgba(255,255,255,.32), inset -8px -8px 10px rgba(180,83,9,.30), 0 10px 15px rgba(217,119,6,.22);
    }

    .ten-rod.variant-t2::before {
        background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rod-height) / 10 - 2px), rgba(180,83,9,.58) calc(var(--rod-height) / 10 - 2px), rgba(180,83,9,.58) calc(var(--rod-height) / 10));
    }

    .ten-rod.variant-carry {
        background: linear-gradient(145deg, #a7f3d0 0%, #10b981 48%, #0f766e 100%);
        border-color: rgba(15,118,110,.70);
        box-shadow: inset 6px 6px 8px rgba(255,255,255,.33), inset -8px -8px 10px rgba(15,118,110,.30), 0 10px 15px rgba(15,118,110,.22);
    }

    .ten-rod.variant-carry::before {
        background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rod-height) / 10 - 2px), rgba(15,118,110,.60) calc(var(--rod-height) / 10 - 2px), rgba(15,118,110,.60) calc(var(--rod-height) / 10));
    }

    .count-badge {
        position: relative;
        z-index: 2;
        min-width: 24px;
        height: 24px;
        padding: 0 6px;
        border-radius: 999px;
        background: rgba(15,23,42,.72);
        border: 1px solid rgba(255,255,255,.55);
        display: inline-grid;
        place-items: center;
        font-size: .88rem;
        line-height: 1;
        opacity: 0;
        transform: scale(.55);
        transition: opacity .22s ease, transform .22s ease, background .22s ease;
    }

    .count-badge.show {
        opacity: 1;
        transform: scale(1);
    }

    .count-badge.flash {
        animation: badgeFlash .42s ease;
    }

    .bottom-area {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 16px;
        align-items: stretch;
        margin-top: 18px;
    }

    .status-card {
        min-height: 94px;
        border-radius: 24px;
        border: 1px solid rgba(245,158,11,.36);
        background:
            linear-gradient(135deg, rgba(255,247,237,.98), rgba(255,255,255,.98)),
            radial-gradient(circle at 4% 20%, rgba(245,158,11,.18), transparent 20%);
        box-shadow: 0 10px 22px rgba(15,23,42,.09);
        padding: 16px 18px;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 14px;
        align-items: center;
    }

    .teacher-mark {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 950;
        font-size: 1.8rem;
        background: linear-gradient(145deg, var(--orange-500), #f97316);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 9px 16px rgba(249,115,22,.24);
    }

    .status-title {
        margin: 0 0 4px;
        font-size: 1rem;
        color: #92400e;
        font-weight: 950;
    }

    .status-text {
        margin: 0;
        font-size: clamp(1.02rem, 2vw, 1.28rem);
        line-height: 1.38;
        color: var(--slate-900);
        font-weight: 800;
    }

    .action-card {
        min-width: 230px;
        display: flex;
        align-items: stretch;
    }

    .primary-action {
        width: 100%;
        min-height: 94px;
        border: 0;
        border-radius: 25px;
        background: linear-gradient(145deg, #ffcf4d, #ff9f1c 56%, #f97316);
        color: #fff;
        font-size: clamp(1.25rem, 2.2vw, 1.7rem);
        font-weight: 950;
        letter-spacing: -.02em;
        cursor: pointer;
        box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 9px 0 #c2410c, 0 18px 24px rgba(249,115,22,.25);
        transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    }

    .primary-action:active {
        transform: translateY(6px);
        box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 3px 0 #c2410c, 0 10px 18px rgba(249,115,22,.22);
    }

    .primary-action[disabled] {
        opacity: .68;
        cursor: wait;
        filter: saturate(.7);
    }

    .screen-reader {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    @keyframes badgeFlash {
        0% { transform: scale(1); background: rgba(15,23,42,.72); }
        40% { transform: scale(1.35); background: #f97316; }
        100% { transform: scale(1); background: rgba(15,23,42,.72); }
    }

    @keyframes resultPulse {
        0% { transform: scale(.70); filter: brightness(1); }
        45% { transform: scale(1.32); filter: brightness(1.15); }
        100% { transform: scale(1); filter: brightness(1); }
    }

    @media (max-width: 980px) {
        body { align-items: flex-start; padding: 10px; }
        .app { border-radius: 26px; }
        .topbar {
            grid-template-columns: 1fr;
            padding: 16px;
        }
        .control-pack { justify-content: flex-start; }
        .content { padding: 14px; }
        .stepper {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .workspace {
            grid-template-columns: 1fr;
            min-height: auto;
        }
        .panel {
            min-height: 365px;
        }
        .place-body {
            min-height: 260px;
        }
        .math-board {
            margin-inline: auto;
            width: min(100%, 310px);
        }
        .bottom-area {
            grid-template-columns: 1fr;
        }
        .action-card {
            min-width: 0;
        }
        .primary-action {
            min-height: 78px;
        }
        :root {
            --unit-size: 35px;
            --rod-width: 35px;
            --rod-height: 124px;
        }
    }

    @media (max-width: 540px) {
        body { padding: 6px; }
        .app { border-radius: 22px; }
        .brand-icon { width: 54px; height: 54px; border-radius: 17px; }
        .control-pack { gap: 8px; grid-template-columns: 1fr 1fr; padding: 7px; }
        .pill-btn, .speed-select, .ghost-btn {
            min-height: 44px;
            font-size: .88rem;
            padding: 0 12px;
        }
        .pill-btn { min-width: 160px; }
        .stepper {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .step {
            font-size: .78rem;
            min-height: 38px;
        }
        .panel {
            min-height: 338px;
            border-radius: 22px;
        }
        .math-panel, .place-panel {
            padding: 14px;
        }
        .place-body {
            min-height: 236px;
        }
        .math-board {
            grid-template-columns: 44px 76px 76px;
            grid-template-rows: 54px 80px 80px 16px 80px;
            width: fit-content;
            max-width: 100%;
        }
        .math-cell, .result-digit {
            width: 68px;
            min-height: 68px;
            font-size: 3.8rem;
            border-radius: 15px;
        }
        
        .carry-circle {
            width: 56px;
            height: 46px;
            border-radius: 16px;
            font-size: 1.75rem;
        }
        .operator { font-size: 3.45rem; }
        .status-card {
            grid-template-columns: 1fr;
            text-align: center;
            justify-items: center;
        }
        .teacher-mark {
            width: 48px;
            height: 48px;
            font-size: 1.45rem;
        }
        :root {
            --unit-size: 31px;
            --rod-width: 31px;
            --rod-height: 112px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .unit-cube,
        .ten-rod,
        .math-cell,
        .result-digit,
        .count-badge,
        .primary-action,
        .pill-btn,
        .ghost-btn {
            transition-duration: .01ms !important;
            animation-duration: .01ms !important;
        }
    }


    /* Ekrana tam sığdırma güncellemesi: üst adım şeridi kaldırıldı, ana sahne tek ekrana sıkıştırıldı. */
    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    body {
        min-height: 100dvh;
        padding: 8px;
        align-items: center;
    }

    .simulation-shell {
        width: min(1180px, calc(100vw - 16px));
        height: calc(100dvh - 16px);
        max-height: 760px;
        min-height: 0;
    }

    .app {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .topbar {
        flex: 0 0 auto;
        min-height: 88px;
        padding: 12px 16px;
    }

    .brand-icon {
        width: 56px;
        height: 56px;
        border-radius: 18px;
    }

    .brand h1 {
        font-size: clamp(1.42rem, 2.6vw, 2.15rem);
    }

    .brand p {
        font-size: clamp(.82rem, 1.45vw, 1.02rem);
        margin-top: 3px;
    }

    .pill-btn,
    .speed-select,
    .ghost-btn {
        min-height: 42px;
        padding-inline: 13px;
        font-size: .9rem;
    }

    .pill-btn { min-width: 0; }

    .stepper { display: none !important; }

    .content {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 14px;
        overflow: hidden;
    }

    .workspace {
        flex: 1 1 auto;
        min-height: 0;
        gap: 14px;
        align-items: stretch;
    }

    .panel {
        min-height: 0;
        height: auto;
    }

    .math-panel,
    .place-panel {
        padding: 14px;
    }

    .panel-title {
        min-height: 38px;
        border-radius: 16px;
        padding: 7px 10px;
        font-size: .98rem;
    }

    .math-board {
        width: min(100%, 274px);
        margin-top: 9px;
        grid-template-columns: 48px 1fr 1fr;
        grid-template-rows: 48px 72px 72px 12px 72px;
        column-gap: 5px;
    }

    .carry-circle {
        width: 54px;
        height: 42px;
        border-radius: 15px;
        font-size: 1.7rem;
    }

    .math-arrow {
        height: 18px;
        margin-bottom: -12px;
    }

    .math-cell,
    .result-digit {
        width: 70px;
        min-height: 70px;
        border-radius: 16px;
        font-size: clamp(3.65rem, 6.3vw, 4.65rem);
    }

    .operator {
        font-size: 3.7rem;
    }

    .divider {
        height: 6px;
    }

    .board-note {
        margin-top: 8px;
        padding: 8px 10px;
        border-radius: 15px;
        font-size: .84rem;
        line-height: 1.22;
    }

    .place-panel {
        gap: 10px;
    }

    .place-body {
        min-height: 0;
        flex: 1 1 auto;
        border-radius: 19px;
    }

    .hint-label {
        left: 10px;
        right: 10px;
        bottom: 10px;
        min-height: 34px;
        border-radius: 13px;
        padding: 6px 8px;
        font-size: .84rem;
    }

    .bottom-area {
        flex: 0 0 auto;
        margin-top: 12px;
        gap: 12px;
    }

    .status-card {
        min-height: 70px;
        border-radius: 20px;
        padding: 10px 14px;
        gap: 11px;
    }

    .teacher-mark {
        width: 46px;
        height: 46px;
        border-radius: 15px;
        font-size: 1.42rem;
    }

    .status-title {
        margin-bottom: 2px;
        font-size: .86rem;
    }

    .status-text {
        font-size: clamp(.9rem, 1.45vw, 1.08rem);
        line-height: 1.26;
    }

    .action-card {
        min-width: 190px;
    }

    .primary-action {
        min-height: 70px;
        border-radius: 21px;
        font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    }

    @media (max-width: 980px) {
        body { padding: 6px; align-items: flex-start; }
        .simulation-shell { width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: none; }
        .topbar { min-height: auto; padding: 10px 12px; gap: 10px; grid-template-columns: 1fr; }
        .topbar::after { display: none; }
        .brand { padding-right: 0; }
        .control-pack { gap: 7px; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .content { padding: 10px; }
        .workspace { gap: 10px; }
        .panel { min-height: 0; }
        .math-panel, .place-panel { padding: 10px; }
        .place-body { min-height: 0; }
        .bottom-area { margin-top: 9px; gap: 9px; }
        .status-card { min-height: 62px; padding: 8px 10px; }
        .primary-action { min-height: 62px; }
    }

    @media (max-width: 740px) {
        .topbar { grid-template-columns: 1fr; }
        .control-pack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .workspace { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
        .math-panel { grid-column: 1 / -1; }
        .bottom-area { grid-template-columns: 1fr; }
        .action-card { min-width: 0; }
    }

    @media (max-height: 660px) and (min-width: 741px) {
        .topbar { min-height: 72px; padding-block: 9px; }
        .topbar::after { bottom: 6px; font-size: .95rem; }
        .control-pack { grid-template-columns: minmax(165px, 1.3fr) 108px 120px 98px; padding: 6px; }
        .brand-icon { width: 50px; height: 50px; }
        .content { padding: 10px 12px; }
        .workspace { gap: 10px; }
        .math-panel, .place-panel { padding: 10px; }
        .math-board { grid-template-rows: 40px 62px 62px 10px 62px; width: 248px; }
        .math-cell, .result-digit { width: 60px; min-height: 60px; font-size: 3.6rem; }
        
        .carry-circle { width: 48px; height: 36px; font-size: 1.45rem; }
        .board-note { font-size: .76rem; padding: 6px 8px; }
        .bottom-area { margin-top: 8px; }
        .status-card, .primary-action { min-height: 56px; }
        .teacher-mark { width: 38px; height: 38px; }
    }

/* ─── Etkileşimli model havuzu modu ─────────────────────────────────────── */
.control-pack {
    grid-template-columns: minmax(170px, 1.25fr) 112px 122px 96px 132px;
}

.mode-toggle {
    background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.10));
}

.app.manual-mode .action-card {
    display: none;
}

.manual-bank[hidden] {
    display: none !important;
}

.manual-bank {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    flex-wrap: wrap;
    min-height: 82px;
    border-radius: 22px;
    border: 1px solid rgba(148,163,184,.42);
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,246,255,.93)),
        radial-gradient(circle at 8% 50%, rgba(47,128,237,.12), transparent 28%),
        radial-gradient(circle at 92% 50%, rgba(34,166,76,.10), transparent 24%);
    box-shadow: 0 12px 28px rgba(15,23,42,.10);
    padding: 10px 12px;
}

.manual-bank-title {
    flex: 0 0 auto;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 0 14px;
    border-radius: 16px;
    color: #fff;
    font-weight: 950;
    background: linear-gradient(145deg, var(--blue-700), var(--blue-900));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 8px 16px rgba(15,23,42,.13);
}

.manual-tools {
    flex: 1 1 560px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.model-token {
    min-height: 43px;
    border: 0;
    border-radius: 16px;
    padding: 0 13px;
    font-weight: 950;
    font-size: .9rem;
    cursor: pointer;
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        0 8px 16px rgba(15,23,42,.13);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.model-token:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.model-token:active {
    transform: translateY(1px) scale(.98);
}

.model-token:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), 0 8px 16px rgba(15,23,42,.13);
}

.unit-token {
    background: linear-gradient(145deg, #38bdf8, #1d4ed8);
}

.ten-token {
    background: linear-gradient(145deg, #34d399, #15803d);
}

.pack-token {
    background: linear-gradient(145deg, #fbbf24, #d97706);
}

.carry-token {
    background: linear-gradient(145deg, #fb7185, #dc2626);
}

.check-token {
    background: linear-gradient(145deg, #a78bfa, #6d28d9);
}

.clear-token {
    color: var(--slate-900);
    background: linear-gradient(145deg, #f8fafc, #dbeafe);
}

.manual-stats {
    flex: 0 1 280px;
    min-height: 43px;
    display: grid;
    place-items: center;
    padding: 7px 12px;
    border-radius: 16px;
    color: var(--slate-700);
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(148,163,184,.34);
    font-size: .84rem;
    line-height: 1.25;
    font-weight: 850;
    text-align: center;
}

.unit-cube.manual-unit:not(.variant-u1):not(.variant-u2) {
    background:
        linear-gradient(145deg, #7dd3fc 0%, #2563eb 48%, #1e3a8a 100%);
}

.ten-rod.manual-ten:not(.variant-t1):not(.variant-t2) {
    background:
        linear-gradient(90deg, rgba(255,255,255,.24), transparent 18%),
        linear-gradient(145deg, #86efac 0%, #16a34a 52%, #166534 100%);
}

.ten-rod.manual-carry {
    background:
        linear-gradient(90deg, rgba(255,255,255,.24), transparent 18%),
        linear-gradient(145deg, #fda4af 0%, #ef4444 52%, #991b1b 100%);
}

.app.manual-mode .units .place-body,
.app.manual-mode .tens .place-body {
    border-style: solid;
    border-color: rgba(47,128,237,.38);
    box-shadow: inset 0 0 0 4px rgba(47,128,237,.06);
}

@media (max-width: 980px) {
    .control-pack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .manual-bank {
        min-height: 78px;
        gap: 8px;
        padding: 8px;
    }
    .manual-bank-title {
        min-height: 40px;
        font-size: .9rem;
    }
    .model-token {
        min-height: 40px;
        font-size: .84rem;
        padding: 0 10px;
    }
    .manual-stats {
        flex-basis: 100%;
        min-height: 34px;
        font-size: .78rem;
    }
}

@media (max-width: 740px) {
    .control-pack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .manual-tools {
        flex-basis: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .manual-bank-title {
        width: 100%;
    }
}

@media (max-height: 660px) and (min-width: 741px) {
    .control-pack {
        grid-template-columns: minmax(150px, 1.15fr) 94px 104px 84px 116px;
        gap: 6px;
    }
    .manual-bank {
        min-height: 62px;
        padding: 7px 9px;
    }
    .manual-bank-title,
    .model-token,
    .manual-stats {
        min-height: 36px;
        border-radius: 13px;
        font-size: .78rem;
    }
    .model-token {
        padding: 0 9px;
    }
}

/* ─── Etkileşimli mod: buton yerleşimi ─── */
.manual-bank {
    grid-column: auto;
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(250px, 1.05fr) minmax(250px, 1.05fr);
    grid-template-areas:
        "title ten unit"
        "stats tools tools";
    align-items: center;
    gap: 10px 14px;
    min-height: 108px;
    margin-top: 12px;
    padding: 12px 14px;
    flex: 0 0 auto;
}

.manual-main-slot {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.manual-info-slot {
    grid-area: title;
    justify-content: flex-start;
}

.manual-info-slot .manual-bank-title {
    width: fit-content;
    min-width: 168px;
}

.manual-tens-slot {
    grid-area: ten;
}

.manual-units-slot {
    grid-area: unit;
}

.manual-tens-slot .ten-token,
.manual-units-slot .unit-token {
    width: min(210px, 100%);
}

.manual-tools {
    grid-area: tools;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
    flex: initial;
}

.manual-tools .model-token {
    width: 100%;
    min-width: 0;
    max-width: 170px;
}

.manual-stats {
    grid-area: stats;
    flex: initial;
    width: 100%;
    min-height: 52px;
    align-self: stretch;
}

@media (max-width: 980px) {
    .manual-bank {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "title title"
            "ten unit"
            "tools tools"
            "stats stats";
        gap: 8px 10px;
        min-height: 0;
        margin-top: 9px;
        padding: 9px;
    }

    .manual-info-slot {
        justify-content: center;
    }

    .manual-info-slot .manual-bank-title {
        min-width: 0;
        width: 100%;
    }

    .manual-tens-slot .ten-token,
    .manual-units-slot .unit-token {
        width: 100%;
        max-width: 240px;
    }

    .manual-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .manual-tools .model-token {
        max-width: none;
    }

    .manual-stats {
        min-height: 42px;
    }
}

@media (max-width: 740px) {
    .manual-bank {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "ten"
            "unit"
            "tools"
            "stats";
    }

    .manual-tens-slot,
    .manual-units-slot,
    .manual-info-slot {
        justify-content: center;
    }

    .manual-tens-slot .ten-token,
    .manual-units-slot .unit-token {
        max-width: 260px;
    }

    .manual-tools {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 660px) and (min-width: 741px) {
    .manual-bank {
        min-height: 88px;
        margin-top: 8px;
        gap: 7px 10px;
        padding: 8px 10px;
    }

    .manual-main-slot {
        min-height: 38px;
    }

    .manual-info-slot .manual-bank-title,
    .manual-tools .model-token,
    .manual-tens-slot .ten-token,
    .manual-units-slot .unit-token,
    .manual-stats {
        min-height: 38px;
        font-size: .8rem;
        border-radius: 14px;
    }

    .manual-tools {
        gap: 8px;
    }
}


/* ─── Etkileşimli mod: referans ekran görüntüsüne sadık buton dizilimi ─── */
.app.manual-mode .manual-info-slot,
.app.manual-mode .manual-stats {
    display: none !important;
}

.app.manual-mode .manual-bank {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-items: start;
    gap: 14px 14px;
    min-height: 154px;
    margin-top: 14px;
    padding: 16px 18px 14px;
}

.app.manual-mode .manual-tens-slot,
.app.manual-mode .manual-units-slot {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app.manual-mode .manual-tens-slot {
    grid-column: 2;
    grid-row: 1;
}

.app.manual-mode .manual-units-slot {
    grid-column: 4;
    grid-row: 1;
}

.app.manual-mode .manual-tens-slot .ten-token,
.app.manual-mode .manual-units-slot .unit-token {
    width: min(230px, 100%);
}

.app.manual-mode .manual-tools {
    display: contents;
}

.app.manual-mode #manualCheckBtn,
.app.manual-mode #packTenBtn,
.app.manual-mode #moveCarryBtn,
.app.manual-mode #manualClearBtn,
.app.manual-mode #addTenBtn,
.app.manual-mode #addUnitBtn {
    justify-self: center;
    align-self: center;
    width: min(230px, 100%);
}

.app.manual-mode #manualCheckBtn {
    grid-column: 1;
    grid-row: 1;
}

.app.manual-mode #addTenBtn {
    grid-column: 2;
    grid-row: 1;
}

.app.manual-mode #packTenBtn {
    grid-column: 3;
    grid-row: 1;
}

.app.manual-mode #addUnitBtn {
    grid-column: 4;
    grid-row: 1;
}

.app.manual-mode #moveCarryBtn {
    grid-column: 3;
    grid-row: 2;
}

.app.manual-mode #manualClearBtn {
    grid-column: 4;
    grid-row: 2;
}

@media (max-width: 980px) {
    .app.manual-mode .manual-bank {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
        gap: 10px;
        min-height: 0;
        padding: 10px;
    }

    .app.manual-mode #manualCheckBtn { grid-column: 1; grid-row: 1; }
    .app.manual-mode #addTenBtn     { grid-column: 2; grid-row: 1; }
    .app.manual-mode #packTenBtn    { grid-column: 1; grid-row: 2; }
    .app.manual-mode #addUnitBtn    { grid-column: 2; grid-row: 2; }
    .app.manual-mode #moveCarryBtn  { grid-column: 1; grid-row: 3; }
    .app.manual-mode #manualClearBtn{ grid-column: 2; grid-row: 3; }
}

@media (max-width: 640px) {
    .app.manual-mode .manual-bank {
        grid-template-columns: 1fr;
    }

    .app.manual-mode #manualCheckBtn,
    .app.manual-mode #addTenBtn,
    .app.manual-mode #packTenBtn,
    .app.manual-mode #addUnitBtn,
    .app.manual-mode #moveCarryBtn,
    .app.manual-mode #manualClearBtn {
        grid-column: 1;
        width: min(280px, 100%);
    }

    .app.manual-mode #manualCheckBtn { grid-row: 1; }
    .app.manual-mode #addTenBtn      { grid-row: 2; }
    .app.manual-mode #packTenBtn     { grid-row: 3; }
    .app.manual-mode #addUnitBtn     { grid-row: 4; }
    .app.manual-mode #moveCarryBtn   { grid-row: 5; }
    .app.manual-mode #manualClearBtn { grid-row: 6; }
}


/* ─── Etkileşimli mod: görünüm düzeltmeleri ─── */
.app.manual-mode .math-panel .board-note {
    display: none !important;
}

.app.manual-mode .workspace {
    min-height: 360px;
}

.app.manual-mode .panel {
    min-height: 350px;
}

.app.manual-mode .math-board {
    margin-top: 8px;
    width: min(100%, 262px);
    grid-template-rows: 42px 68px 68px 10px 68px;
}

.app.manual-mode .math-cell,
.app.manual-mode .result-digit {
    width: 66px;
    min-height: 66px;
    font-size: clamp(3.45rem, 5.8vw, 4.2rem);
}

.app.manual-mode .carry-circle {
    width: 52px;
    height: 40px;
    font-size: 1.6rem;
}

.app.manual-mode .math-arrow {
    height: 16px;
    margin-bottom: -10px;
}

.app.manual-mode .operator {
    font-size: 3.35rem;
}

.app.manual-mode .divider {
    height: 5px;
}

@media (max-width: 980px) {
    .app.manual-mode .workspace {
        min-height: auto;
    }

    .app.manual-mode .panel {
        min-height: 320px;
    }
}


/* ─── Tam sayfa kullanım + daha kompakt üst panel ─── */
body {
    padding: 4px;
}

.simulation-shell {
    width: min(1460px, calc(100vw - 8px));
    height: calc(100dvh - 8px);
    max-height: none;
}

.topbar {
    min-height: 72px;
    padding: 8px 12px;
    gap: 10px 14px;
}

.topbar::after {
    right: 18px;
    bottom: 5px;
    font-size: clamp(.82rem, 1.45vw, 1.18rem);
}

.brand {
    gap: 12px;
}

.brand-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
}

.brand h1 {
    font-size: clamp(1.28rem, 2.2vw, 1.95rem);
    line-height: 1.02;
}

.brand p {
    font-size: clamp(.78rem, 1.18vw, .95rem);
    margin-top: 2px;
}

.control-pack {
    gap: 7px;
    padding: 6px;
    border-radius: 20px;
}

.pill-btn,
.speed-select,
.ghost-btn {
    min-height: 38px;
    padding-inline: 11px;
    font-size: .84rem;
    border-radius: 999px;
}

.content {
    padding: 10px;
}

.workspace {
    gap: 10px;
}

.math-panel,
.place-panel {
    padding: 12px;
}

.bottom-area {
    margin-top: 8px;
    gap: 8px;
}

.status-card {
    min-height: 62px;
    padding: 9px 12px;
}

.primary-action {
    min-height: 62px;
}

.app.manual-mode .manual-bank {
    margin-top: 8px;
    padding: 12px 14px;
}

@media (max-width: 980px) {
    body { padding: 3px; }
    .simulation-shell { width: calc(100vw - 6px); height: calc(100dvh - 6px); }
    .topbar { padding: 8px 10px; gap: 8px; }
    .brand-icon { width: 46px; height: 46px; }
    .brand h1 { font-size: 1.55rem; }
    .brand p { font-size: .88rem; }
    .control-pack { gap: 6px; padding: 5px; }
    .pill-btn, .speed-select, .ghost-btn { min-height: 36px; font-size: .8rem; }
    .content { padding: 8px; }
    .workspace { gap: 8px; }
    .bottom-area { margin-top: 7px; gap: 7px; }
    .app.manual-mode .manual-bank { padding: 9px; }
}

@media (max-height: 660px) and (min-width: 741px) {
    .topbar {
        min-height: 62px;
        padding: 7px 10px;
    }

    .brand-icon {
        width: 44px;
        height: 44px;
    }

    .brand h1 {
        font-size: 1.45rem;
    }

    .brand p {
        font-size: .82rem;
    }

    .pill-btn,
    .speed-select,
    .ghost-btn {
        min-height: 34px;
        font-size: .78rem;
    }
}


/* Elde onluğu taşınmadan önce bıçak yansıması efekti */
.ten-rod .ten-shine {
    position: absolute;
    left: 12%;
    right: 12%;
    top: -42%;
    height: 34%;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    z-index: 3;
    transform: skewY(-14deg);
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(255,255,255,.08) 18%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.18) 72%,
            transparent 100%
        );
    box-shadow:
        0 0 12px rgba(255,255,255,.88),
        0 0 22px rgba(125,211,252,.55);
}

.ten-rod.carry-shine-active {
    filter: brightness(1.08) saturate(1.12);
}

.ten-rod.carry-shine-active .ten-shine {
    animation: carryBladeSweepVertical 1.65s ease-in-out forwards;
}

@keyframes carryBladeSweepVertical {
    0% {
        top: -42%;
        opacity: 0;
    }
    16% {
        opacity: 1;
    }
    58% {
        opacity: 1;
    }
    100% {
        top: 108%;
        opacity: 0;
    }
}


/* Etkileşimli yönlendirme: 10 birliği paketle butonu */
.pack-token.guide-active {
    position: relative;
    isolation: isolate;
    animation: packGuidePulse 1.15s ease-in-out infinite;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        0 0 0 4px rgba(251,191,36,.18),
        0 12px 26px rgba(217,119,6,.28);
    filter: saturate(1.08) brightness(1.04);
}

.pack-token.guide-active::after {
    content: "➜";
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    line-height: 1;
    color: #f59e0b;
    text-shadow: 0 2px 8px rgba(255,255,255,.72), 0 6px 14px rgba(217,119,6,.35);
    animation: packGuideArrow 1s ease-in-out infinite;
}

.pack-token.guide-active::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 20px;
    border: 2px dashed rgba(251,191,36,.68);
    opacity: .95;
    animation: packGuideRing 1.15s ease-in-out infinite;
    z-index: -1;
}

@keyframes packGuidePulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.03); }
}

@keyframes packGuideArrow {
    0%, 100% { transform: translate(-2px, -50%); opacity: .7; }
    50% { transform: translate(8px, -50%); opacity: 1; }
}

@keyframes packGuideRing {
    0%,100% { opacity: .88; transform: scale(1); }
    50% { opacity: .38; transform: scale(1.04); }
}

@media (max-width: 980px) {
    .pack-token.guide-active::after {
        left: 50%;
        top: -24px;
        transform: translateX(-50%) rotate(90deg);
        animation: packGuideArrowMobile 1s ease-in-out infinite;
    }
}

@keyframes packGuideArrowMobile {
    0%,100% { transform: translateX(-50%) translateY(-2px) rotate(90deg); opacity: .7; }
    50% { transform: translateX(-50%) translateY(6px) rotate(90deg); opacity: 1; }
}


/* Güçlendirilmiş yönlendirme: birlikler tamamlanınca 10 birliği paketle butonu */
.app.manual-mode #packTenBtn.guide-active {
    position: relative !important;
    isolation: isolate;
    transform-origin: center;
    animation: packGuideStrongPulse 0.95s ease-in-out infinite !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        0 0 0 5px rgba(251,191,36,.24),
        0 0 0 11px rgba(251,191,36,.10),
        0 18px 34px rgba(217,119,6,.36) !important;
    filter: saturate(1.18) brightness(1.08) !important;
}

.app.manual-mode #packTenBtn.guide-active::after {
    content: "⬇";
    position: absolute;
    left: 50%;
    top: -46px;
    transform: translateX(-50%);
    font-size: 2.05rem;
    line-height: 1;
    color: #f59e0b;
    text-shadow:
        0 2px 0 rgba(255,255,255,.9),
        0 6px 16px rgba(217,119,6,.42);
    animation: packGuideStrongArrow 0.85s ease-in-out infinite;
    z-index: 5;
    pointer-events: none;
}

.app.manual-mode #packTenBtn.guide-active::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 23px;
    border: 3px solid rgba(251,191,36,.82);
    animation: packGuideStrongRing 0.95s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes packGuideStrongPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.055); }
}

@keyframes packGuideStrongArrow {
    0%, 100% { transform: translateX(-50%) translateY(-7px); opacity: .72; }
    50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

@keyframes packGuideStrongRing {
    0%, 100% { opacity: .96; transform: scale(1); }
    50% { opacity: .42; transform: scale(1.08); }
}


/* Güçlendirilmiş yönlendirme: eldeyi taşı butonu */
.app.manual-mode #moveCarryBtn.guide-active {
    position: relative !important;
    isolation: isolate;
    transform-origin: center;
    animation: carryGuideStrongPulse 0.95s ease-in-out infinite !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        0 0 0 5px rgba(251,113,133,.24),
        0 0 0 11px rgba(251,113,133,.10),
        0 18px 34px rgba(220,38,38,.34) !important;
    filter: saturate(1.18) brightness(1.08) !important;
}

.app.manual-mode #moveCarryBtn.guide-active::after {
    content: "⬇";
    position: absolute;
    left: 50%;
    top: -46px;
    transform: translateX(-50%);
    font-size: 2.05rem;
    line-height: 1;
    color: #ef4444;
    text-shadow:
        0 2px 0 rgba(255,255,255,.9),
        0 6px 16px rgba(220,38,38,.42);
    animation: carryGuideStrongArrow 0.85s ease-in-out infinite;
    z-index: 5;
    pointer-events: none;
}

.app.manual-mode #moveCarryBtn.guide-active::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 23px;
    border: 3px solid rgba(251,113,133,.82);
    animation: carryGuideStrongRing 0.95s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes carryGuideStrongPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.055); }
}

@keyframes carryGuideStrongArrow {
    0%, 100% { transform: translateX(-50%) translateY(-7px); opacity: .72; }
    50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

@keyframes carryGuideStrongRing {
    0%, 100% { opacity: .96; transform: scale(1); }
    50% { opacity: .42; transform: scale(1.08); }
}


/* Aşama rehberleri: sıradaki butonu sürekli işaret et */
.app.manual-mode #addUnitBtn.guide-active,
.app.manual-mode #addTenBtn.guide-active,
.app.manual-mode #manualCheckBtn.guide-active {
    position: relative !important;
    isolation: isolate;
    transform-origin: center;
    animation: stageGuidePulse 0.95s ease-in-out infinite !important;
    filter: saturate(1.16) brightness(1.08) !important;
}

.app.manual-mode #addUnitBtn.guide-active {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        0 0 0 5px rgba(56,189,248,.22),
        0 0 0 11px rgba(29,78,216,.10),
        0 18px 34px rgba(29,78,216,.34) !important;
}

.app.manual-mode #addTenBtn.guide-active {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        0 0 0 5px rgba(52,211,153,.22),
        0 0 0 11px rgba(21,128,61,.10),
        0 18px 34px rgba(21,128,61,.34) !important;
}

.app.manual-mode #manualCheckBtn.guide-active {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        0 0 0 5px rgba(167,139,250,.22),
        0 0 0 11px rgba(109,40,217,.10),
        0 18px 34px rgba(109,40,217,.34) !important;
}

.app.manual-mode #addUnitBtn.guide-active::after,
.app.manual-mode #addTenBtn.guide-active::after,
.app.manual-mode #manualCheckBtn.guide-active::after {
    content: "⬇";
    position: absolute;
    left: 50%;
    top: -46px;
    transform: translateX(-50%);
    font-size: 2.05rem;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(255,255,255,.9), 0 6px 16px rgba(15,23,42,.24);
    animation: stageGuideArrow 0.85s ease-in-out infinite;
    z-index: 5;
    pointer-events: none;
}

.app.manual-mode #addUnitBtn.guide-active::after { color: #1d4ed8; }
.app.manual-mode #addTenBtn.guide-active::after { color: #16a34a; }
.app.manual-mode #manualCheckBtn.guide-active::after { color: #7c3aed; }

.app.manual-mode #addUnitBtn.guide-active::before,
.app.manual-mode #addTenBtn.guide-active::before,
.app.manual-mode #manualCheckBtn.guide-active::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 23px;
    z-index: -1;
    pointer-events: none;
    animation: stageGuideRing 0.95s ease-in-out infinite;
}

.app.manual-mode #addUnitBtn.guide-active::before { border: 3px solid rgba(56,189,248,.82); }
.app.manual-mode #addTenBtn.guide-active::before { border: 3px solid rgba(52,211,153,.82); }
.app.manual-mode #manualCheckBtn.guide-active::before { border: 3px solid rgba(167,139,250,.82); }

@keyframes stageGuidePulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.055); }
}

@keyframes stageGuideArrow {
    0%, 100% { transform: translateX(-50%) translateY(-7px); opacity: .72; }
    50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

@keyframes stageGuideRing {
    0%, 100% { opacity: .96; transform: scale(1); }
    50% { opacity: .42; transform: scale(1.08); }
}


/* Etkileşimli mod: Kontrol et butonu kaldırıldıktan sonra buton yerleşimi */
.app.manual-mode #manualCheckBtn {
    display: none !important;
}

.app.manual-mode .manual-bank {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app.manual-mode #addTenBtn {
    grid-column: 1;
    grid-row: 1;
}

.app.manual-mode #packTenBtn {
    grid-column: 2;
    grid-row: 1;
}

.app.manual-mode #addUnitBtn {
    grid-column: 3;
    grid-row: 1;
}

.app.manual-mode #moveCarryBtn {
    grid-column: 2;
    grid-row: 2;
}

.app.manual-mode #manualClearBtn {
    grid-column: 3;
    grid-row: 2;
}

@media (max-width: 980px) {
    .app.manual-mode .manual-bank {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app.manual-mode #addTenBtn      { grid-column: 1; grid-row: 1; }
    .app.manual-mode #addUnitBtn     { grid-column: 2; grid-row: 1; }
    .app.manual-mode #packTenBtn     { grid-column: 1; grid-row: 2; }
    .app.manual-mode #moveCarryBtn   { grid-column: 2; grid-row: 2; }
    .app.manual-mode #manualClearBtn { grid-column: 1 / -1; grid-row: 3; width: min(230px, 100%); }
}

@media (max-width: 640px) {
    .app.manual-mode .manual-bank {
        grid-template-columns: 1fr;
    }

    .app.manual-mode #addUnitBtn,
    .app.manual-mode #addTenBtn,
    .app.manual-mode #packTenBtn,
    .app.manual-mode #moveCarryBtn,
    .app.manual-mode #manualClearBtn {
        grid-column: 1;
        width: min(280px, 100%);
    }

    .app.manual-mode #addUnitBtn     { grid-row: 1; }
    .app.manual-mode #packTenBtn     { grid-row: 2; }
    .app.manual-mode #addTenBtn      { grid-row: 3; }
    .app.manual-mode #moveCarryBtn   { grid-row: 4; }
    .app.manual-mode #manualClearBtn { grid-row: 5; }
}


/* Etkileşimli mod: butonları eski yerleşime geri al, sadece Kontrol et gizli kalsın */
.app.manual-mode #manualCheckBtn {
    display: none !important;
}

.app.manual-mode .manual-bank {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.app.manual-mode #addTenBtn {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.app.manual-mode #packTenBtn {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

.app.manual-mode #addUnitBtn {
    grid-column: 4 !important;
    grid-row: 1 !important;
}

.app.manual-mode #moveCarryBtn {
    grid-column: 3 !important;
    grid-row: 2 !important;
}

.app.manual-mode #manualClearBtn {
    grid-column: 4 !important;
    grid-row: 2 !important;
}

@media (max-width: 980px) {
    .app.manual-mode .manual-bank {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .app.manual-mode #addTenBtn      { grid-column: 2 !important; grid-row: 1 !important; }
    .app.manual-mode #packTenBtn     { grid-column: 3 !important; grid-row: 1 !important; }
    .app.manual-mode #addUnitBtn     { grid-column: 4 !important; grid-row: 1 !important; }
    .app.manual-mode #moveCarryBtn   { grid-column: 3 !important; grid-row: 2 !important; }
    .app.manual-mode #manualClearBtn { grid-column: 4 !important; grid-row: 2 !important; width: min(230px, 100%) !important; }
}

@media (max-width: 640px) {
    .app.manual-mode .manual-bank {
        grid-template-columns: 1fr !important;
    }

    .app.manual-mode #addTenBtn,
    .app.manual-mode #packTenBtn,
    .app.manual-mode #addUnitBtn,
    .app.manual-mode #moveCarryBtn,
    .app.manual-mode #manualClearBtn {
        grid-column: 1 !important;
        width: min(280px, 100%) !important;
    }

    .app.manual-mode #addTenBtn      { grid-row: 1 !important; }
    .app.manual-mode #packTenBtn     { grid-row: 2 !important; }
    .app.manual-mode #addUnitBtn     { grid-row: 3 !important; }
    .app.manual-mode #moveCarryBtn   { grid-row: 4 !important; }
    .app.manual-mode #manualClearBtn { grid-row: 5 !important; }
}


/* Eldeyi taşı butonuna basınca gecikme hissini azaltmak için anında sönükleşsin */
.app.manual-mode #moveCarryBtn.is-waiting,
.app.manual-mode #moveCarryBtn:disabled {
    opacity: .58 !important;
    filter: grayscale(.12) saturate(.82) brightness(.96) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 16px rgba(15,23,42,.10) !important;
    transform: scale(.985) !important;
    cursor: wait !important;
    pointer-events: none !important;
}

.app.manual-mode #moveCarryBtn.is-waiting::before,
.app.manual-mode #moveCarryBtn:disabled::before,
.app.manual-mode #moveCarryBtn.is-waiting::after,
.app.manual-mode #moveCarryBtn:disabled::after {
    animation-play-state: paused !important;
}


/* Üst panel profesyonel görünüm + renkli kontrol butonları */
.topbar {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.18), transparent 28%),
        linear-gradient(90deg, #1f4fb4 0%, #2366d1 38%, #1f8ce8 72%, #27a7ef 100%) !important;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 18px 30px rgba(17,24,39,.14);
}

.topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 44%);
    border-radius: inherit;
}

.brand h1 {
    letter-spacing: -.02em;
    text-shadow: 0 2px 8px rgba(15,23,42,.20);
}

.brand p {
    color: rgba(255,255,255,.96);
    text-shadow: 0 1px 4px rgba(15,23,42,.16);
}

.brand-icon {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 12px 18px rgba(17,24,39,.18);
}

.control-pack {
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 10px 18px rgba(17,24,39,.12);
    backdrop-filter: blur(10px);
}

.pill-btn,
.speed-select,
.ghost-btn {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    font-weight: 800;
    letter-spacing: -.01em;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        0 8px 14px rgba(17,24,39,.12);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}

.pill-btn:hover,
.speed-select:hover,
.ghost-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.36),
        0 12px 20px rgba(17,24,39,.16);
}

#soundToggle {
    background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%) !important;
    color: #153e91 !important;
}

#soundToggle.off {
    background: linear-gradient(180deg, #f8fafc 0%, #e5edf9 100%) !important;
    color: #1e3a8a !important;
}

#speedSelect {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.24);
}

#newProblemBtn {
    background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%) !important;
    color: #fff !important;
}

#resetBtn {
    background: linear-gradient(180deg, #7dc6ff 0%, #58aef1 100%) !important;
    color: #fff !important;
}

#modeToggle {
    color: #fff !important;
    isolation: isolate;
}

.app.manual-mode #modeToggle {
    background: linear-gradient(180deg, #f59e0b 0%, #f97316 100%) !important;
    border-color: rgba(255,255,255,.30);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        0 10px 18px rgba(249,115,22,.26);
}

.app:not(.manual-mode) #modeToggle {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
    border-color: rgba(255,255,255,.30);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        0 10px 18px rgba(22,163,74,.24);
}

/* Etkileşim / Animasyon modu butonunda aktif bıçak yansıması */
#modeToggle::after {
    content: "";
    position: absolute;
    top: -25%;
    left: -38%;
    width: 34%;
    height: 150%;
    pointer-events: none;
    transform: skewX(-22deg);
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.16) 30%,
        rgba(255,255,255,.95) 52%,
        rgba(255,255,255,.18) 70%,
        rgba(255,255,255,0) 100%);
    box-shadow: 0 0 14px rgba(255,255,255,.40);
    mix-blend-mode: screen;
    animation: modeBladeSweep 2.7s ease-in-out infinite;
    z-index: 1;
}

#modeToggle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 46%);
    pointer-events: none;
}

@keyframes modeBladeSweep {
    0%, 18% { left: -40%; opacity: 0; }
    26% { opacity: .9; }
    55% { opacity: .92; }
    74% { left: 112%; opacity: 0; }
    100% { left: 112%; opacity: 0; }
}

@media (max-width: 980px) {
    .topbar {
        padding: 9px 11px !important;
        gap: 8px 10px !important;
    }

    .control-pack {
        padding: 5px !important;
    }
}


/* Yeni İşlem butonu: alt sağdaki başlat butonunun soluna taşındı */
.action-card {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.secondary-action {
    min-height: 70px;
    border: 0;
    border-radius: 21px;
    padding: 0 22px;
    font-weight: 950;
    font-size: clamp(1rem, 1.45vw, 1.22rem);
    color: #fff;
    cursor: pointer;
    background: linear-gradient(145deg, #60a5fa, #2563eb);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 12px 24px rgba(37,99,235,.22);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.secondary-action:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        0 15px 28px rgba(37,99,235,.28);
}

.secondary-action:active {
    transform: translateY(1px) scale(.99);
}

.secondary-action:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), 0 12px 24px rgba(37,99,235,.22);
}

/* Etkileşimli modda Başla gizlenir; Yeni İşlem görünür kalır */
.app.manual-mode .action-card {
    display: flex !important;
}

.app.manual-mode #startBtn {
    display: none !important;
}

@media (max-width: 980px) {
    .action-card {
        gap: 8px;
    }

    .secondary-action,
    .primary-action {
        min-height: 62px;
    }

    .secondary-action {
        padding-inline: 16px;
        font-size: 1rem;
    }
}

@media (max-width: 540px) {
    .action-card {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .secondary-action,
    .primary-action {
        width: 100%;
    }
}


/* Buton hizalama düzeltmesi: üst panel ve alt sağ eylem alanı */
.control-pack {
    grid-template-columns: minmax(190px, auto) 122px 128px 170px !important;
    align-items: center !important;
    justify-content: end !important;
    width: auto !important;
    max-width: 100% !important;
}

#modeToggle {
    min-width: 164px !important;
    white-space: nowrap !important;
    text-align: center !important;
}

#resetBtn {
    min-width: 116px !important;
}

#speedSelect {
    min-width: 112px !important;
}

#soundToggle {
    min-width: 184px !important;
    white-space: nowrap !important;
}

/* Alt sağdaki Yeni İşlem + Başla/Tekrar İzle hizası */
.bottom-area {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: 10px !important;
}

.action-card {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    min-width: 360px !important;
    height: 100% !important;
}

.secondary-action,
.primary-action {
    height: 100% !important;
    min-height: 76px !important;
    align-self: stretch !important;
    display: inline-grid !important;
    place-items: center !important;
    white-space: nowrap !important;
    line-height: 1.05 !important;
    text-align: center !important;
}

.secondary-action {
    min-width: 164px !important;
    padding-inline: 20px !important;
}

.primary-action {
    min-width: 170px !important;
    padding-inline: 24px !important;
}

/* Etkileşimli modda sadece Başla gizli kalır; Yeni İşlem aynı hizada durur */
.app.manual-mode .action-card {
    display: flex !important;
    min-width: 164px !important;
}

.app.manual-mode #startBtn {
    display: none !important;
}

.app.manual-mode .secondary-action {
    min-width: 164px !important;
    height: 100% !important;
}

@media (max-width: 980px) {
    .control-pack {
        grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
        width: 100% !important;
    }

    #soundToggle,
    #speedSelect,
    #resetBtn,
    #modeToggle {
        min-width: 0 !important;
        width: 100% !important;
    }

    .bottom-area {
        grid-template-columns: 1fr !important;
    }

    .action-card {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: stretch !important;
    }

    .secondary-action,
    .primary-action {
        min-height: 62px !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 540px) {
    .action-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}


/* Varsayılan sesli başlangıç için üst buton görünümü */
#soundToggle {
    min-width: 188px !important;
}

#soundToggle.off {
    filter: saturate(.9) brightness(.98);
}

/* Etkileşimli/Animasyon modu butonu diğerlerinden daha belirgin renkli olsun */
#modeToggle {
    min-width: 196px !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
}

.app.manual-mode #modeToggle {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        0 12px 22px rgba(22,163,74,.28) !important;
}

.app:not(.manual-mode) #modeToggle {
    background: linear-gradient(180deg, #f59e0b 0%, #f97316 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        0 12px 22px rgba(249,115,22,.28) !important;
}

/* Başlat düğmesi animasyon sırasında Durdur görünümüne dönüşsün */
.primary-action.stop-state {
    background: linear-gradient(145deg, #ef4444, #dc2626) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        0 14px 24px rgba(220,38,38,.26) !important;
}

.primary-action.stop-state:hover {
    filter: brightness(1.03);
}

/* Alt sağ butonların hizasını ve yüksekliğini eşitle */
.bottom-area {
    align-items: stretch !important;
}

.action-card {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    min-width: 390px !important;
    align-self: stretch !important;
}

.secondary-action,
.primary-action {
    min-height: 78px !important;
    height: auto !important;
    align-self: stretch !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    border-radius: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.secondary-action {
    min-width: 194px !important;
}

.primary-action {
    min-width: 194px !important;
}

@media (max-width: 980px) {
    .action-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .secondary-action,
    .primary-action {
        min-height: 64px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    #modeToggle {
        min-width: 0 !important;
    }
}


/* WordPress iframe kullanımında aracın üstten başlaması ve mobilde daha rahat sığması için küçük kapsayıcı düzeltmeleri. */
html, body { min-height: 100%; height: auto; }
body {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 10px !important;
    overflow-x: hidden !important;
}
.simulation-shell { margin: 0 auto !important; }
@media (max-width: 740px) {
    body { padding: 6px !important; }
    .app { border-radius: 22px !important; }
}
@media (max-width: 900px) and (orientation: landscape) {
    body { padding: 6px !important; }
}


/* =========================================================
   V7 LOGO + ALT BUTON KOMPAKT DÜZELTME
   - Sol üst logo gerçek İlkokul Dijital logosu ile değiştirildi.
   - Yeni İşlem ve Başla butonları küçültüldü, eşitlendi.
   ========================================================= */
.brand {
    gap: 12px !important;
}

.brand-logo-wrap {
    width: 76px !important;
    height: 76px !important;
    flex: 0 0 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,.26), transparent 62%),
        linear-gradient(145deg, rgba(8,47,73,.28), rgba(255,255,255,.12)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 10px 20px rgba(0,0,0,.16) !important;
    overflow: visible !important;
}

.brand-logo-img {
    display: block !important;
    width: 84px !important;
    max-width: 84px !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 5px 8px rgba(0,0,0,.22)) !important;
}

.brand-icon,
.mini-blocks {
    display: none !important;
}

/* Alt eylem butonları: daha küçük, aynı boy ve daha dengeli */
.bottom-area {
    gap: 10px !important;
}

.action-card {
    min-width: 320px !important;
    gap: 10px !important;
    align-items: center !important;
    align-self: center !important;
    height: auto !important;
}

.secondary-action,
.primary-action {
    width: 155px !important;
    min-width: 155px !important;
    max-width: 155px !important;
    min-height: 56px !important;
    height: 56px !important;
    max-height: 56px !important;
    border-radius: 18px !important;
    padding: 0 14px !important;
    font-size: clamp(.95rem, 1.16vw, 1.08rem) !important;
    line-height: 1.05 !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.primary-action {
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.42),
        0 6px 0 #c2410c,
        0 12px 18px rgba(249,115,22,.20) !important;
}

.primary-action:active {
    transform: translateY(4px) !important;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.42),
        0 2px 0 #c2410c,
        0 8px 14px rgba(249,115,22,.18) !important;
}

.secondary-action {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 8px 16px rgba(37,99,235,.18) !important;
}

.primary-action.stop-state {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        0 8px 16px rgba(220,38,38,.20) !important;
}

.app.manual-mode .action-card {
    min-width: 155px !important;
}

.app.manual-mode .secondary-action {
    width: 155px !important;
    min-width: 155px !important;
    max-width: 155px !important;
    height: 56px !important;
    min-height: 56px !important;
}

@media (max-width: 980px) {
    .brand-logo-wrap {
        width: 68px !important;
        height: 68px !important;
        flex-basis: 68px !important;
    }

    .brand-logo-img {
        width: 76px !important;
        max-width: 76px !important;
    }

    .action-card {
        min-width: 0 !important;
        width: 100% !important;
        justify-content: stretch !important;
    }

    .secondary-action,
    .primary-action {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        border-radius: 17px !important;
    }
}

@media (max-width: 540px) {
    .brand-logo-wrap {
        width: 58px !important;
        height: 58px !important;
        flex-basis: 58px !important;
        border-radius: 16px !important;
    }

    .brand-logo-img {
        width: 66px !important;
        max-width: 66px !important;
    }

    .action-card {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .secondary-action,
    .primary-action {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        font-size: .96rem !important;
    }
}

/* =========================================================
   V8 UST PANEL YUKSEKLIK DENGELEME
   - Alt alan tasmasin diye ust panel kompaktlastirildi.
   ========================================================= */
.topbar {
    min-height: 88px !important;
    padding: 10px 16px !important;
    gap: 10px 16px !important;
}

.topbar::after {
    bottom: 5px !important;
    font-size: clamp(.82rem, 1.45vw, 1.16rem) !important;
    max-width: min(40%, 360px) !important;
}

.brand {
    gap: 10px !important;
}

.brand-logo-wrap {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
}

.brand-logo-img {
    width: 72px !important;
    max-width: 72px !important;
}

.brand h1 {
    font-size: clamp(1.34rem, 2.75vw, 2.1rem) !important;
    line-height: 1.02 !important;
}

.brand p {
    margin-top: 2px !important;
    font-size: clamp(.84rem, 1.28vw, 1rem) !important;
    line-height: 1.2 !important;
}

.control-pack {
    grid-template-columns: minmax(168px, 1.15fr) 112px 120px 188px !important;
    gap: 7px !important;
    padding: 6px !important;
    border-radius: 20px !important;
}

.pill-btn,
.speed-select,
.ghost-btn {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 14px !important;
    font-size: .92rem !important;
}

#modeToggle {
    min-width: 0 !important;
}

.content {
    padding-top: 16px !important;
}

@media (max-width: 980px) {
    .topbar {
        min-height: 84px !important;
        padding: 10px 12px !important;
    }

    .brand-logo-wrap {
        width: 58px !important;
        height: 58px !important;
        flex-basis: 58px !important;
    }

    .brand-logo-img {
        width: 64px !important;
        max-width: 64px !important;
    }

    .control-pack {
        padding: 5px !important;
    }

    .pill-btn,
    .speed-select,
    .ghost-btn {
        min-height: 40px !important;
        height: 40px !important;
        font-size: .89rem !important;
    }
}

@media (max-width: 740px) {
    .topbar {
        min-height: auto !important;
        padding: 10px !important;
    }

    .brand h1 {
        font-size: 1.2rem !important;
    }

    .brand p {
        font-size: .82rem !important;
    }

    .topbar::after {
        display: none !important;
    }
}

/* =========================================================
   V9 ALT BUTON TAM HIZA + ESIT BOY
   - Yeni Islem ve Basla ayni hizada gorunur.
   - Boyutlari birebir esitlendi.
   ========================================================= */
.bottom-area {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    gap: 12px !important;
}

.action-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    min-width: 376px !important;
    height: auto !important;
    align-self: stretch !important;
}

.secondary-action,
.primary-action {
    width: 172px !important;
    min-width: 172px !important;
    max-width: 172px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 20px !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-end !important;
    vertical-align: bottom !important;
    transform: none !important;
}

.secondary-action {
    background: linear-gradient(145deg, #60a5fa, #2563eb) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.36),
        0 6px 0 #1d4ed8,
        0 12px 18px rgba(37,99,235,.20) !important;
}

.primary-action {
    background: linear-gradient(145deg, #ffcf4d, #ff9f1c 56%, #f97316) !important;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.42),
        0 6px 0 #c2410c,
        0 12px 18px rgba(249,115,22,.20) !important;
}

.secondary-action:hover,
.primary-action:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.03) !important;
}

.secondary-action:active,
.primary-action:active {
    transform: translateY(4px) !important;
}

.secondary-action:active {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.36),
        0 2px 0 #1d4ed8,
        0 8px 12px rgba(37,99,235,.18) !important;
}

.primary-action:active {
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.42),
        0 2px 0 #c2410c,
        0 8px 12px rgba(249,115,22,.18) !important;
}

.app.manual-mode .action-card {
    min-width: 172px !important;
}

.app.manual-mode .secondary-action {
    width: 172px !important;
    min-width: 172px !important;
    max-width: 172px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
}

@media (max-width: 980px) {
    .action-card {
        min-width: 0 !important;
        width: 100% !important;
    }

    .secondary-action,
    .primary-action {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        border-radius: 18px !important;
    }
}

@media (max-width: 540px) {
    .action-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* =========================================================
   V10 ETKILESIMLI MOD TASMA DUZELTME
   - Sadece .manual-mode aktifken devreye girer.
   - Animasyon modu arayüzüne dokunmaz.
   ========================================================= */
.app.manual-mode .content {
    padding: 14px 18px 10px !important;
}

.app.manual-mode .workspace {
    min-height: 372px !important;
    gap: 12px !important;
}

.app.manual-mode .panel {
    min-height: 372px !important;
}

.app.manual-mode .math-panel {
    padding: 14px 14px 16px !important;
}

.app.manual-mode .panel-title {
    min-height: 38px !important;
    border-radius: 16px !important;
    padding: 6px 10px !important;
    font-size: .98rem !important;
}

.app.manual-mode .place-panel {
    padding: 14px !important;
}

.app.manual-mode .place-body {
    min-height: 238px !important;
    border-radius: 20px !important;
}

.app.manual-mode .hint-label {
    min-height: 36px !important;
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    border-radius: 14px !important;
    font-size: .88rem !important;
}

.app.manual-mode .manual-bank {
    min-height: 0 !important;
    padding: 8px 10px !important;
    gap: 8px 10px !important;
    border-radius: 20px !important;
}

.app.manual-mode .manual-bank-title,
.app.manual-mode .manual-main-slot {
    min-height: 38px !important;
}

.app.manual-mode .manual-info-slot .manual-bank-title {
    min-width: 150px !important;
}

.app.manual-mode .model-token {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    padding: 0 12px !important;
    font-size: .84rem !important;
}

.app.manual-mode .manual-tools {
    gap: 8px !important;
}

.app.manual-mode .manual-tools .model-token {
    max-width: 154px !important;
}

.app.manual-mode .manual-stats {
    min-height: 38px !important;
    padding: 6px 10px !important;
    border-radius: 14px !important;
    font-size: .8rem !important;
}

.app.manual-mode .bottom-area {
    margin-top: 10px !important;
    gap: 10px !important;
    align-items: stretch !important;
}

.app.manual-mode .status-card {
    min-height: 64px !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    border-radius: 18px !important;
}

.app.manual-mode .teacher-mark {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    font-size: 1.35rem !important;
}

.app.manual-mode .status-title {
    font-size: .86rem !important;
    margin-bottom: 2px !important;
}

.app.manual-mode .status-text {
    font-size: clamp(.88rem, 1.35vw, 1.02rem) !important;
    line-height: 1.28 !important;
}

.app.manual-mode .action-card {
    align-self: center !important;
}

.app.manual-mode .secondary-action,
.app.manual-mode .primary-action {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    border-radius: 17px !important;
    font-size: .96rem !important;
}

@media (max-width: 980px) {
    .app.manual-mode .workspace {
        min-height: auto !important;
        gap: 10px !important;
    }

    .app.manual-mode .panel {
        min-height: 300px !important;
    }

    .app.manual-mode .place-body {
        min-height: 210px !important;
    }

    .app.manual-mode .manual-bank {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .app.manual-mode .bottom-area {
        grid-template-columns: 1fr !important;
    }

    .app.manual-mode .status-card {
        min-height: 60px !important;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .app.manual-mode .topbar {
        min-height: 72px !important;
        padding: 7px 10px !important;
    }

    .app.manual-mode .content {
        padding: 8px !important;
    }

    .app.manual-mode .workspace {
        gap: 8px !important;
    }

    .app.manual-mode .panel {
        min-height: 250px !important;
    }

    .app.manual-mode .place-body {
        min-height: 165px !important;
    }

    .app.manual-mode .manual-bank {
        padding: 6px 8px !important;
    }

    .app.manual-mode .model-token {
        height: 34px !important;
        min-height: 34px !important;
        font-size: .78rem !important;
    }

    .app.manual-mode .bottom-area {
        margin-top: 7px !important;
    }

    .app.manual-mode .status-card {
        min-height: 52px !important;
        padding: 8px 10px !important;
    }

    .app.manual-mode .teacher-mark {
        width: 38px !important;
        height: 38px !important;
    }

    .app.manual-mode .secondary-action,
    .app.manual-mode .primary-action {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
}

/* =========================================================
   V11 BIRLIK KUTUSUNDAKI BELIRSIZ YAY/OK GOSTERGESINI KALDIR
   ========================================================= */
.carry-path,
.carry-path::before,
.carry-path::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* =========================================================
   V12 ALT TARAFA NEFES PAYI
   - Hem Animasyon hem Etkilesimli mod icin alt ic bosluk artirildi.
   ========================================================= */
.content {
    padding: 20px 20px 28px !important;
}

.bottom-area {
    margin-top: 18px !important;
    margin-bottom: 10px !important;
}

@media (max-width: 980px) {
    .content {
        padding: 14px 14px 22px !important;
    }

    .bottom-area {
        margin-bottom: 8px !important;
    }
}

@media (max-width: 540px) {
    .content {
        padding: 12px 12px 18px !important;
    }

    .bottom-area {
        margin-bottom: 6px !important;
    }
}

/* =========================================================
   V14 TELEFON ARAYÜZÜ — KAPSAMLI MOBİL YENİDEN DÜZEN
   Masaüstü kilitli: Bu kurallar yalnızca telefon/tablet dar ekranlarda çalışır.
   ========================================================= */

/* Telefon ortak temel */
@media (max-width: 820px) {
    :root {
        --unit-size: 26px;
        --rod-width: 24px;
        --rod-height: 88px;
        --radius-xl: 18px;
    }

    html,
    body {
        width: 100% !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
    }

    body {
        padding: 5px !important;
        align-items: flex-start !important;
        justify-content: center !important;
        background:
            radial-gradient(circle at 12% 12%, rgba(47,128,237,.12), transparent 26%),
            radial-gradient(circle at 90% 18%, rgba(34,166,76,.10), transparent 24%),
            linear-gradient(135deg, #eef7ff 0%, #f8fbff 52%, #effdf4 100%) !important;
    }

    .simulation-shell {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .app {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .topbar::after,
    .carry-path,
    .carry-path::before,
    .carry-path::after {
        display: none !important;
    }

    .content {
        padding: 7px 7px 12px !important;
    }

    .panel {
        border-radius: 16px !important;
    }

    .panel-title {
        min-height: 32px !important;
        border-radius: 13px !important;
        padding: 5px 8px !important;
        font-size: .82rem !important;
        line-height: 1.05 !important;
    }

    .hint-label {
        min-height: 28px !important;
        left: 6px !important;
        right: 6px !important;
        bottom: 6px !important;
        border-radius: 10px !important;
        padding: 4px 6px !important;
        font-size: .66rem !important;
        line-height: 1.15 !important;
    }

    .board-note {
        border-radius: 11px !important;
        padding: 7px 8px !important;
        font-size: .68rem !important;
        line-height: 1.18 !important;
    }

    .status-card {
        min-height: 46px !important;
        padding: 6px 8px !important;
        border-radius: 14px !important;
        gap: 7px !important;
    }

    .teacher-mark {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
        font-size: 1rem !important;
    }

    .status-title {
        font-size: .68rem !important;
        margin-bottom: 0 !important;
    }

    .status-text {
        font-size: .72rem !important;
        line-height: 1.16 !important;
    }

    .secondary-action,
    .primary-action {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        border-radius: 13px !important;
        font-size: .76rem !important;
        padding: 0 7px !important;
    }

    .model-token {
        height: 32px !important;
        min-height: 32px !important;
        border-radius: 10px !important;
        padding: 0 6px !important;
        font-size: .62rem !important;
        line-height: 1.05 !important;
    }

    .manual-stats {
        min-height: 30px !important;
        padding: 4px 6px !important;
        border-radius: 10px !important;
        font-size: .6rem !important;
        line-height: 1.12 !important;
    }

    .manual-bank-title {
        min-height: 30px !important;
        border-radius: 10px !important;
        padding: 0 8px !important;
        font-size: .66rem !important;
    }

    .manual-main-slot {
        min-height: 30px !important;
    }
}

/* DİKEY TELEFON: Kullanılabilir tek ekran mantığı
   İşlem tahtası üstte, Onlar/Birler yan yana. */
@media (max-width: 820px) and (orientation: portrait) {
    :root {
        --unit-size: 24px;
        --rod-width: 22px;
        --rod-height: 78px;
    }

    body {
        padding: 6px !important;
    }

    .topbar {
        min-height: auto !important;
        padding: 7px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .brand {
        gap: 7px !important;
        padding-right: 0 !important;
        align-items: center !important;
    }

    .brand-logo-wrap {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        border-radius: 13px !important;
    }

    .brand-logo-img {
        width: 52px !important;
        max-width: 52px !important;
    }

    .brand h1 {
        font-size: clamp(1.05rem, 6.3vw, 1.45rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -.03em !important;
    }

    .brand p {
        margin-top: 1px !important;
        font-size: clamp(.64rem, 3.25vw, .82rem) !important;
        line-height: 1.12 !important;
    }

    .control-pack {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
        padding: 5px !important;
        border-radius: 14px !important;
    }

    #soundToggle,
    #speedSelect,
    #resetBtn,
    #modeToggle {
        grid-column: auto !important;
        min-width: 0 !important;
        width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        border-radius: 11px !important;
        padding: 0 6px !important;
        font-size: .68rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    #modeToggle {
        grid-column: 1 / -1 !important;
    }

    .workspace {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "math math"
            "tens units" !important;
        gap: 7px !important;
        min-height: auto !important;
        align-items: stretch !important;
    }

    .math-panel {
        grid-area: math !important;
        min-height: 250px !important;
        padding: 8px 8px 9px !important;
    }

    .place-panel.tens {
        grid-area: tens !important;
    }

    .place-panel.units {
        grid-area: units !important;
    }

    .place-panel {
        min-height: 180px !important;
        padding: 7px !important;
    }

    .place-body {
        min-height: 130px !important;
        border-radius: 13px !important;
    }

    .math-board {
        width: min(100%, 246px) !important;
        margin: 2px auto 0 !important;
        transform: scale(.74) !important;
        transform-origin: top center !important;
    }

    .board-note {
        margin-top: -22px !important;
        max-width: 100% !important;
    }

    .bottom-area {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        margin-top: 7px !important;
        margin-bottom: 5px !important;
    }

    .action-card {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        align-items: stretch !important;
    }

    .secondary-action,
    .primary-action {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .manual-bank {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "title title"
            "ten unit"
            "tools tools"
            "stats stats" !important;
        gap: 5px !important;
        padding: 6px !important;
        border-radius: 14px !important;
        min-height: 0 !important;
    }

    .manual-info-slot .manual-bank-title {
        width: 100% !important;
        min-width: 0 !important;
    }

    .manual-tens-slot .ten-token,
    .manual-units-slot .unit-token {
        width: 100% !important;
        max-width: none !important;
    }

    .manual-tools {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 5px !important;
        width: 100% !important;
    }

    .manual-tools .model-token {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Etkileşimli mod dikeyde biraz daha kısa */
    .app.manual-mode .math-panel {
        min-height: 232px !important;
    }

    .app.manual-mode .place-panel {
        min-height: 166px !important;
    }

    .app.manual-mode .place-body {
        min-height: 118px !important;
    }

    .app.manual-mode .board-note {
        margin-top: -28px !important;
    }

    .app.manual-mode .status-card {
        min-height: 42px !important;
    }

    .app.manual-mode .secondary-action,
    .app.manual-mode .primary-action {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }
}

/* DİKEY ÇOK DAR TELEFONLAR */
@media (max-width: 380px) and (orientation: portrait) {
    :root {
        --unit-size: 22px;
        --rod-width: 20px;
        --rod-height: 70px;
    }

    body {
        padding: 4px !important;
    }

    .brand-logo-wrap {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }

    .brand-logo-img {
        width: 48px !important;
        max-width: 48px !important;
    }

    .brand h1 {
        font-size: 1.02rem !important;
    }

    .brand p {
        font-size: .6rem !important;
    }

    #soundToggle,
    #speedSelect,
    #resetBtn,
    #modeToggle {
        height: 31px !important;
        min-height: 31px !important;
        max-height: 31px !important;
        font-size: .61rem !important;
    }

    .math-panel {
        min-height: 230px !important;
    }

    .place-panel {
        min-height: 160px !important;
    }

    .place-body {
        min-height: 112px !important;
    }

    .math-board {
        transform: scale(.68) !important;
    }

    .board-note {
        margin-top: -38px !important;
        font-size: .61rem !important;
    }
}

/* YATAY TELEFON: tek ekranda kullanılabilir kompakt üçlü düzen */
@media (max-width: 940px) and (orientation: landscape) {
    :root {
        --unit-size: 21px;
        --rod-width: 20px;
        --rod-height: 68px;
        --radius-xl: 13px;
    }

    html,
    body {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
    }

    body {
        padding: 4px !important;
    }

    .app {
        border-radius: 14px !important;
    }

    .topbar {
        min-height: 52px !important;
        padding: 5px 7px !important;
        display: grid !important;
        grid-template-columns: minmax(0, .88fr) minmax(350px, 1.35fr) !important;
        align-items: center !important;
        gap: 7px !important;
    }

    .brand {
        gap: 6px !important;
        min-width: 0 !important;
        padding-right: 0 !important;
    }

    .brand-logo-wrap {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
        border-radius: 11px !important;
    }

    .brand-logo-img {
        width: 44px !important;
        max-width: 44px !important;
    }

    .brand h1 {
        font-size: clamp(.92rem, 3.1vw, 1.16rem) !important;
        line-height: 1 !important;
        letter-spacing: -.025em !important;
    }

    .brand p {
        margin-top: 1px !important;
        font-size: clamp(.52rem, 1.72vw, .66rem) !important;
        line-height: 1.05 !important;
        max-width: 100% !important;
    }

    .control-pack {
        display: grid !important;
        grid-template-columns: minmax(112px, 1.15fr) 76px 76px 122px !important;
        gap: 4px !important;
        padding: 4px !important;
        border-radius: 12px !important;
        min-width: 0 !important;
    }

    #soundToggle,
    #speedSelect,
    #resetBtn,
    #modeToggle {
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        border-radius: 10px !important;
        padding: 0 5px !important;
        font-size: .58rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .content {
        padding: 5px 5px 8px !important;
    }

    .workspace {
        display: grid !important;
        grid-template-columns: minmax(168px, .82fr) minmax(168px, 1fr) minmax(168px, 1fr) !important;
        gap: 5px !important;
        min-height: auto !important;
        align-items: stretch !important;
    }

    .panel {
        min-height: 178px !important;
        border-radius: 13px !important;
    }

    .panel-title {
        min-height: 25px !important;
        padding: 3px 6px !important;
        border-radius: 10px !important;
        font-size: .62rem !important;
    }

    .math-panel {
        min-height: 178px !important;
        padding: 5px !important;
    }

    .place-panel {
        min-height: 178px !important;
        padding: 5px !important;
    }

    .place-body {
        min-height: 132px !important;
        border-radius: 10px !important;
    }

    .hint-label {
        min-height: 22px !important;
        left: 4px !important;
        right: 4px !important;
        bottom: 4px !important;
        border-radius: 8px !important;
        padding: 3px 4px !important;
        font-size: .5rem !important;
    }

    .math-board {
        width: min(100%, 178px) !important;
        margin: 0 auto !important;
        transform: scale(.52) !important;
        transform-origin: top center !important;
    }

    .board-note {
        margin-top: -58px !important;
        padding: 4px 5px !important;
        border-radius: 8px !important;
        font-size: .48rem !important;
        line-height: 1.08 !important;
    }

    .manual-bank {
        display: grid !important;
        grid-template-columns: .7fr .82fr .82fr 1.65fr .85fr !important;
        grid-template-areas: "title ten unit tools stats" !important;
        gap: 4px !important;
        padding: 5px !important;
        border-radius: 12px !important;
        min-height: 40px !important;
    }

    .manual-info-slot .manual-bank-title {
        width: 100% !important;
        min-width: 0 !important;
    }

    .manual-tools {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
    }

    .manual-tools .model-token,
    .manual-tens-slot .ten-token,
    .manual-units-slot .unit-token {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .model-token {
        height: 27px !important;
        min-height: 27px !important;
        border-radius: 8px !important;
        padding: 0 4px !important;
        font-size: .48rem !important;
    }

    .manual-bank-title,
    .manual-main-slot {
        min-height: 27px !important;
    }

    .manual-stats {
        min-height: 27px !important;
        padding: 3px 4px !important;
        border-radius: 8px !important;
        font-size: .46rem !important;
    }

    .bottom-area {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 5px !important;
        margin-top: 5px !important;
        margin-bottom: 4px !important;
        align-items: stretch !important;
    }

    .status-card {
        min-height: 38px !important;
        padding: 5px 6px !important;
        gap: 5px !important;
        border-radius: 11px !important;
    }

    .teacher-mark {
        width: 26px !important;
        height: 26px !important;
        border-radius: 8px !important;
        font-size: .84rem !important;
    }

    .status-title {
        font-size: .52rem !important;
        margin-bottom: 0 !important;
    }

    .status-text {
        font-size: .56rem !important;
        line-height: 1.08 !important;
    }

    .action-card {
        width: auto !important;
        min-width: 204px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
        align-items: stretch !important;
    }

    .secondary-action,
    .primary-action {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        border-radius: 10px !important;
        font-size: .6rem !important;
        padding: 0 4px !important;
    }

    .app.manual-mode .workspace,
    .app.manual-mode .panel,
    .app.manual-mode .math-panel,
    .app.manual-mode .place-panel {
        min-height: 164px !important;
    }

    .app.manual-mode .place-body {
        min-height: 118px !important;
    }

    .app.manual-mode .math-board {
        transform: scale(.48) !important;
    }

    .app.manual-mode .board-note {
        margin-top: -66px !important;
    }

    .app.manual-mode .bottom-area {
        margin-top: 4px !important;
    }
}

/* Daha küçük yatay telefonlarda kullanılabilirliği koru */
@media (max-width: 760px) and (orientation: landscape) {
    :root {
        --unit-size: 19px;
        --rod-width: 18px;
        --rod-height: 60px;
    }

    .topbar {
        grid-template-columns: minmax(0, .75fr) minmax(312px, 1.35fr) !important;
    }

    .brand-logo-wrap {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
    }

    .brand-logo-img {
        width: 40px !important;
        max-width: 40px !important;
    }

    .brand h1 {
        font-size: .86rem !important;
    }

    .brand p {
        font-size: .47rem !important;
    }

    .control-pack {
        grid-template-columns: minmax(98px, 1fr) 68px 68px 108px !important;
    }

    #soundToggle,
    #speedSelect,
    #resetBtn,
    #modeToggle {
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        font-size: .5rem !important;
    }

    .workspace {
        grid-template-columns: minmax(144px, .78fr) minmax(144px, 1fr) minmax(144px, 1fr) !important;
    }

    .panel,
    .math-panel,
    .place-panel {
        min-height: 150px !important;
    }

    .place-body {
        min-height: 108px !important;
    }

    .math-board {
        transform: scale(.43) !important;
        width: min(100%, 160px) !important;
    }

    .board-note {
        margin-top: -78px !important;
        font-size: .43rem !important;
    }

    .status-card {
        min-height: 34px !important;
    }

    .secondary-action,
    .primary-action {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }
}

/* =========================================================
   V15 TELEFON İNCE AYAR
   - Masaüstü kilitli kalır.
   - Dikeyde üst panel ciddi biçimde kısaltıldı.
   - Yatayda alt taşma azaltıldı.
   ========================================================= */

/* DİKEY TELEFON: üst paneli 3 satırdan 2 satıra sıkıştır */
@media (max-width: 820px) and (orientation: portrait) {
    body {
        padding: 4px !important;
    }

    .app {
        border-radius: 15px !important;
    }

    .topbar {
        padding: 5px 6px !important;
        gap: 5px !important;
        border-radius: 0 !important;
    }

    .brand {
        gap: 6px !important;
        min-height: 40px !important;
    }

    .brand-logo-wrap {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        border-radius: 11px !important;
    }

    .brand-logo-img {
        width: 46px !important;
        max-width: 46px !important;
    }

    .brand h1 {
        font-size: clamp(.98rem, 5.6vw, 1.26rem) !important;
        line-height: .98 !important;
    }

    .brand p {
        margin-top: 0 !important;
        font-size: clamp(.56rem, 2.85vw, .72rem) !important;
        line-height: 1.05 !important;
    }

    .control-pack {
        grid-template-columns: 1.05fr .82fr .78fr !important;
        gap: 4px !important;
        padding: 4px !important;
        border-radius: 12px !important;
    }

    #soundToggle,
    #speedSelect,
    #resetBtn,
    #modeToggle {
        height: 29px !important;
        min-height: 29px !important;
        max-height: 29px !important;
        border-radius: 10px !important;
        padding: 0 4px !important;
        font-size: .58rem !important;
        line-height: 1 !important;
    }

    #soundToggle {
        grid-column: 1 / 2 !important;
    }

    #speedSelect {
        grid-column: 2 / 3 !important;
    }

    #resetBtn {
        grid-column: 3 / 4 !important;
    }

    #modeToggle {
        grid-column: 1 / -1 !important;
        height: 31px !important;
        min-height: 31px !important;
        max-height: 31px !important;
        font-size: .64rem !important;
    }

    .content {
        padding: 6px 6px 10px !important;
    }

    .workspace {
        gap: 6px !important;
    }

    .math-panel {
        min-height: 224px !important;
        padding: 7px !important;
    }

    .math-board {
        width: min(100%, 232px) !important;
        transform: scale(.66) !important;
        margin-top: 0 !important;
    }

    .board-note {
        margin-top: -42px !important;
        padding: 6px 7px !important;
        font-size: .6rem !important;
        line-height: 1.12 !important;
    }

    .place-panel {
        min-height: 150px !important;
        padding: 6px !important;
    }

    .place-body {
        min-height: 104px !important;
    }

    .hint-label {
        min-height: 24px !important;
        font-size: .58rem !important;
        left: 5px !important;
        right: 5px !important;
        bottom: 5px !important;
    }

    .status-card {
        min-height: 40px !important;
        padding: 5px 7px !important;
    }

    .teacher-mark {
        width: 28px !important;
        height: 28px !important;
        border-radius: 9px !important;
        font-size: .9rem !important;
    }

    .status-title {
        font-size: .6rem !important;
    }

    .status-text {
        font-size: .64rem !important;
        line-height: 1.1 !important;
    }

    .secondary-action,
    .primary-action {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        font-size: .72rem !important;
        border-radius: 12px !important;
    }

    .manual-bank {
        padding: 5px !important;
        gap: 4px !important;
    }

    .model-token {
        height: 30px !important;
        min-height: 30px !important;
        font-size: .56rem !important;
    }

    .manual-stats {
        min-height: 28px !important;
        font-size: .54rem !important;
    }

    .app.manual-mode .math-panel {
        min-height: 210px !important;
    }

    .app.manual-mode .place-panel {
        min-height: 142px !important;
    }

    .app.manual-mode .place-body {
        min-height: 96px !important;
    }

    .app.manual-mode .board-note {
        margin-top: -48px !important;
    }
}

/* Çok dar dikey telefonlarda daha fazla sıkıştır */
@media (max-width: 380px) and (orientation: portrait) {
    .brand-logo-wrap {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }

    .brand-logo-img {
        width: 42px !important;
        max-width: 42px !important;
    }

    .brand h1 {
        font-size: .9rem !important;
    }

    .brand p {
        font-size: .52rem !important;
    }

    #soundToggle,
    #speedSelect,
    #resetBtn {
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        font-size: .52rem !important;
    }

    #modeToggle {
        height: 29px !important;
        min-height: 29px !important;
        max-height: 29px !important;
        font-size: .58rem !important;
    }

    .math-panel {
        min-height: 206px !important;
    }

    .math-board {
        transform: scale(.6) !important;
    }

    .board-note {
        margin-top: -58px !important;
        font-size: .54rem !important;
    }

    .place-panel {
        min-height: 136px !important;
    }

    .place-body {
        min-height: 88px !important;
    }
}

/* YATAY TELEFON: alttaki taşmayı birkaç seviye azalt */
@media (max-width: 940px) and (orientation: landscape) {
    body {
        padding: 2px !important;
    }

    .topbar {
        min-height: 46px !important;
        padding: 4px 6px !important;
        gap: 5px !important;
        grid-template-columns: minmax(0, .78fr) minmax(340px, 1.4fr) !important;
    }

    .brand-logo-wrap {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
    }

    .brand-logo-img {
        width: 40px !important;
        max-width: 40px !important;
    }

    .brand h1 {
        font-size: clamp(.78rem, 2.65vw, 1.02rem) !important;
    }

    .brand p {
        font-size: clamp(.43rem, 1.45vw, .58rem) !important;
    }

    .control-pack {
        grid-template-columns: minmax(104px, 1.1fr) 70px 70px 112px !important;
        gap: 3px !important;
        padding: 3px !important;
        border-radius: 11px !important;
    }

    #soundToggle,
    #speedSelect,
    #resetBtn,
    #modeToggle {
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        border-radius: 9px !important;
        font-size: .5rem !important;
        padding: 0 4px !important;
    }

    .content {
        padding: 4px 4px 6px !important;
    }

    .workspace {
        gap: 4px !important;
    }

    .panel,
    .math-panel,
    .place-panel {
        min-height: 138px !important;
    }

    .panel-title {
        min-height: 22px !important;
        padding: 2px 5px !important;
        border-radius: 9px !important;
        font-size: .55rem !important;
    }

    .math-panel,
    .place-panel {
        padding: 4px !important;
    }

    .place-body {
        min-height: 98px !important;
    }

    .math-board {
        width: min(100%, 150px) !important;
        transform: scale(.39) !important;
    }

    .board-note {
        margin-top: -84px !important;
        padding: 3px 4px !important;
        font-size: .4rem !important;
        line-height: 1.03 !important;
    }

    .hint-label {
        min-height: 18px !important;
        font-size: .42rem !important;
        left: 3px !important;
        right: 3px !important;
        bottom: 3px !important;
        border-radius: 7px !important;
    }

    .bottom-area {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
        gap: 4px !important;
    }

    .status-card {
        min-height: 30px !important;
        padding: 3px 5px !important;
        gap: 4px !important;
        border-radius: 10px !important;
    }

    .teacher-mark {
        width: 22px !important;
        height: 22px !important;
        border-radius: 7px !important;
        font-size: .72rem !important;
    }

    .status-title {
        font-size: .46rem !important;
    }

    .status-text {
        font-size: .48rem !important;
        line-height: 1.04 !important;
    }

    .action-card {
        min-width: 184px !important;
        gap: 4px !important;
    }

    .secondary-action,
    .primary-action {
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        border-radius: 9px !important;
        font-size: .52rem !important;
    }

    .manual-bank {
        min-height: 32px !important;
        padding: 3px !important;
        gap: 3px !important;
        border-radius: 9px !important;
    }

    .model-token {
        height: 24px !important;
        min-height: 24px !important;
        font-size: .42rem !important;
        border-radius: 7px !important;
    }

    .manual-bank-title,
    .manual-main-slot,
    .manual-stats {
        min-height: 24px !important;
        font-size: .42rem !important;
        border-radius: 7px !important;
    }
}

/* Daha küçük yatay telefon */
@media (max-width: 760px) and (orientation: landscape) {
    .topbar {
        min-height: 42px !important;
        grid-template-columns: minmax(0, .68fr) minmax(294px, 1.42fr) !important;
    }

    .brand-logo-wrap {
        width: 28px !important;
        height: 28px !important;
        flex-basis: 28px !important;
    }

    .brand-logo-img {
        width: 36px !important;
        max-width: 36px !important;
    }

    .brand h1 {
        font-size: .72rem !important;
    }

    .brand p {
        font-size: .38rem !important;
    }

    .control-pack {
        grid-template-columns: minmax(90px, 1fr) 62px 62px 98px !important;
    }

    #soundToggle,
    #speedSelect,
    #resetBtn,
    #modeToggle {
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        font-size: .44rem !important;
    }

    .panel,
    .math-panel,
    .place-panel {
        min-height: 124px !important;
    }

    .place-body {
        min-height: 86px !important;
    }

    .math-board {
        transform: scale(.34) !important;
        width: min(100%, 136px) !important;
    }

    .board-note {
        margin-top: -98px !important;
        font-size: .36rem !important;
    }

    .status-card {
        min-height: 28px !important;
    }

    .secondary-action,
    .primary-action {
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
    }
}

/* =========================================================
   V16 TELEFON SON DOKUNUS
   - Dikey modda kaydirma serbest.
   - Yatay modda Etkilesimli Mod daha da kompakt.
   ========================================================= */

/* Dikey telefonda kaydirmaya izin ver */
@media (max-width: 820px) and (orientation: portrait) {
    html,
    body {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body {
        display: block !important;
        padding: 4px !important;
    }

    .simulation-shell {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .app {
        overflow: hidden !important;
    }

    .content {
        padding-bottom: 16px !important;
    }
}

/* Yatay telefonda genel olarak da dikey kaydirma serbest olsun */
@media (max-width: 940px) and (orientation: landscape) {
    html,
    body {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body {
        display: block !important;
        padding: 2px !important;
    }

    .simulation-shell {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}

/* Yatay telefonda özellikle Etkileşimli Mod'u daha da sıkıştır */
@media (max-width: 940px) and (orientation: landscape) {
    .app.manual-mode .topbar {
        min-height: 40px !important;
        padding: 3px 5px !important;
        gap: 4px !important;
    }

    .app.manual-mode .brand-logo-wrap {
        width: 28px !important;
        height: 28px !important;
        flex-basis: 28px !important;
    }

    .app.manual-mode .brand-logo-img {
        width: 34px !important;
        max-width: 34px !important;
    }

    .app.manual-mode .brand h1 {
        font-size: .68rem !important;
    }

    .app.manual-mode .brand p {
        font-size: .35rem !important;
        line-height: 1.02 !important;
    }

    .app.manual-mode .control-pack {
        grid-template-columns: minmax(86px, 1fr) 58px 58px 92px !important;
        gap: 3px !important;
        padding: 3px !important;
    }

    .app.manual-mode #soundToggle,
    .app.manual-mode #speedSelect,
    .app.manual-mode #resetBtn,
    .app.manual-mode #modeToggle {
        height: 23px !important;
        min-height: 23px !important;
        max-height: 23px !important;
        font-size: .42rem !important;
        padding: 0 3px !important;
    }

    .app.manual-mode .content {
        padding: 3px 3px 5px !important;
    }

    .app.manual-mode .workspace {
        grid-template-columns: minmax(132px, .78fr) minmax(132px, 1fr) minmax(132px, 1fr) !important;
        gap: 3px !important;
    }

    .app.manual-mode .panel,
    .app.manual-mode .math-panel,
    .app.manual-mode .place-panel {
        min-height: 118px !important;
        padding: 3px !important;
    }

    .app.manual-mode .panel-title {
        min-height: 20px !important;
        font-size: .5rem !important;
        border-radius: 8px !important;
        padding: 2px 4px !important;
    }

    .app.manual-mode .place-body {
        min-height: 78px !important;
        border-radius: 8px !important;
    }

    .app.manual-mode .hint-label {
        min-height: 16px !important;
        font-size: .36rem !important;
        border-radius: 6px !important;
        left: 2px !important;
        right: 2px !important;
        bottom: 2px !important;
    }

    .app.manual-mode .math-board {
        width: min(100%, 124px) !important;
        transform: scale(.29) !important;
        margin-top: -2px !important;
    }

    .app.manual-mode .board-note {
        margin-top: -112px !important;
        padding: 2px 3px !important;
        font-size: .3rem !important;
        line-height: 1 !important;
        border-radius: 6px !important;
    }

    .app.manual-mode .manual-bank {
        grid-template-columns: .64fr .8fr .8fr 1.55fr .8fr !important;
        grid-template-areas: "title ten unit tools stats" !important;
        min-height: 26px !important;
        padding: 2px !important;
        gap: 2px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 10px rgba(15,23,42,.08) !important;
    }

    .app.manual-mode .manual-info-slot .manual-bank-title,
    .app.manual-mode .manual-main-slot,
    .app.manual-mode .manual-stats {
        min-height: 20px !important;
        height: 20px !important;
        font-size: .34rem !important;
        padding: 2px 3px !important;
        border-radius: 6px !important;
        line-height: 1 !important;
    }

    .app.manual-mode .manual-tools {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 2px !important;
    }

    .app.manual-mode .model-token,
    .app.manual-mode .manual-tens-slot .ten-token,
    .app.manual-mode .manual-units-slot .unit-token {
        min-height: 20px !important;
        height: 20px !important;
        font-size: .34rem !important;
        padding: 0 2px !important;
        border-radius: 6px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .app.manual-mode .bottom-area {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        gap: 3px !important;
        grid-template-columns: minmax(0,1fr) auto !important;
    }

    .app.manual-mode .status-card {
        min-height: 24px !important;
        padding: 2px 4px !important;
        gap: 3px !important;
        border-radius: 8px !important;
    }

    .app.manual-mode .teacher-mark {
        width: 18px !important;
        height: 18px !important;
        border-radius: 5px !important;
        font-size: .56rem !important;
    }

    .app.manual-mode .status-title {
        font-size: .34rem !important;
    }

    .app.manual-mode .status-text {
        font-size: .35rem !important;
        line-height: 1 !important;
    }

    .app.manual-mode .action-card {
        min-width: 164px !important;
        gap: 3px !important;
    }

    .app.manual-mode .secondary-action,
    .app.manual-mode .primary-action {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        font-size: .4rem !important;
        border-radius: 7px !important;
        padding: 0 2px !important;
    }
}

/* =========================================================
   V17 TELEFON ODAKLI KESKIN DUZELTME
   - Dikey modda kaydirma kesin acik.
   - Islem tahtasi kutusu sert bicimde kisaltildi.
   - Yatay modda da kaydirma acik kalir.
   ========================================================= */

@media (max-width: 820px) and (orientation: portrait) {
    html,
    body {
        height: auto !important;
        min-height: 100svh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body {
        display: block !important;
        padding: 3px !important;
        align-items: initial !important;
        justify-content: initial !important;
    }

    .simulation-shell {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .app {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .topbar {
        padding: 4px 5px !important;
        gap: 4px !important;
    }

    .brand {
        gap: 5px !important;
        min-height: 34px !important;
    }

    .brand-logo-wrap {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        border-radius: 10px !important;
    }

    .brand-logo-img {
        width: 41px !important;
        max-width: 41px !important;
    }

    .brand h1 {
        font-size: .9rem !important;
        line-height: .98 !important;
    }

    .brand p {
        margin-top: 0 !important;
        font-size: .5rem !important;
        line-height: 1.02 !important;
    }

    .control-pack {
        grid-template-columns: 1.04fr .76fr .76fr !important;
        gap: 3px !important;
        padding: 3px !important;
        border-radius: 11px !important;
    }

    #soundToggle,
    #speedSelect,
    #resetBtn {
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        border-radius: 9px !important;
        padding: 0 4px !important;
        font-size: .5rem !important;
        line-height: 1 !important;
    }

    #modeToggle {
        grid-column: 1 / -1 !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        border-radius: 9px !important;
        padding: 0 4px !important;
        font-size: .56rem !important;
        line-height: 1 !important;
    }

    .content {
        padding: 5px 5px 14px !important;
    }

    .workspace {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "math math"
            "tens units" !important;
        gap: 5px !important;
        min-height: auto !important;
        align-items: stretch !important;
    }

    .panel-title {
        min-height: 27px !important;
        border-radius: 10px !important;
        padding: 4px 6px !important;
        font-size: .72rem !important;
        line-height: 1.04 !important;
    }

    /* ISLEM TAHTASI: sadece islem alani kadar yukseklik */
    .math-panel {
        grid-area: math !important;
        min-height: 182px !important;
        padding: 6px !important;
        border-radius: 14px !important;
    }

    .math-board {
        width: min(100%, 205px) !important;
        margin: -8px auto 0 !important;
        transform: scale(.54) !important;
        transform-origin: top center !important;
    }

    .board-note {
        margin-top: -96px !important;
        padding: 4px 6px !important;
        border-radius: 9px !important;
        font-size: .5rem !important;
        line-height: 1.05 !important;
        max-width: 96% !important;
    }

    .place-panel.tens {
        grid-area: tens !important;
    }

    .place-panel.units {
        grid-area: units !important;
    }

    .place-panel {
        min-height: 138px !important;
        padding: 5px !important;
        border-radius: 14px !important;
    }

    .place-body {
        min-height: 98px !important;
        border-radius: 10px !important;
    }

    .hint-label {
        min-height: 22px !important;
        font-size: .5rem !important;
        border-radius: 8px !important;
        left: 4px !important;
        right: 4px !important;
        bottom: 4px !important;
        padding: 3px 4px !important;
        line-height: 1.04 !important;
    }

    .bottom-area {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        margin-top: 5px !important;
        margin-bottom: 4px !important;
    }

    .status-card {
        min-height: 36px !important;
        padding: 4px 6px !important;
        border-radius: 10px !important;
        gap: 4px !important;
    }

    .teacher-mark {
        width: 24px !important;
        height: 24px !important;
        border-radius: 7px !important;
        font-size: .72rem !important;
    }

    .status-title {
        font-size: .5rem !important;
        margin-bottom: 0 !important;
    }

    .status-text {
        font-size: .54rem !important;
        line-height: 1.02 !important;
    }

    .action-card {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
    }

    .secondary-action,
    .primary-action {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        border-radius: 10px !important;
        font-size: .62rem !important;
        padding: 0 4px !important;
    }

    /* Etkilesimli mod da ayni mantikla daha da kisa */
    .app.manual-mode .math-panel {
        min-height: 168px !important;
    }

    .app.manual-mode .math-board {
        transform: scale(.5) !important;
        margin-top: -12px !important;
    }

    .app.manual-mode .board-note {
        margin-top: -110px !important;
        font-size: .46rem !important;
    }

    .app.manual-mode .place-panel {
        min-height: 128px !important;
    }

    .app.manual-mode .place-body {
        min-height: 90px !important;
    }

    .app.manual-mode .manual-bank {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "title title"
            "ten unit"
            "tools tools"
            "stats stats" !important;
        gap: 4px !important;
        padding: 4px !important;
        min-height: 0 !important;
        border-radius: 10px !important;
    }

    .app.manual-mode .manual-tools {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 4px !important;
    }

    .app.manual-mode .model-token,
    .app.manual-mode .manual-tens-slot .ten-token,
    .app.manual-mode .manual-units-slot .unit-token {
        min-height: 26px !important;
        height: 26px !important;
        font-size: .48rem !important;
        border-radius: 8px !important;
        padding: 0 3px !important;
        width: 100% !important;
        max-width: none !important;
    }

    .app.manual-mode .manual-bank-title,
    .app.manual-mode .manual-main-slot,
    .app.manual-mode .manual-stats {
        min-height: 24px !important;
        font-size: .48rem !important;
        border-radius: 8px !important;
        padding: 2px 4px !important;
    }
}

/* Cok dar dikey telefon */
@media (max-width: 380px) and (orientation: portrait) {
    .math-panel {
        min-height: 170px !important;
    }

    .math-board {
        width: min(100%, 192px) !important;
        transform: scale(.5) !important;
    }

    .board-note {
        margin-top: -108px !important;
        font-size: .46rem !important;
    }

    .place-panel {
        min-height: 128px !important;
    }

    .place-body {
        min-height: 90px !important;
    }
}

/* Yatay telefonda da kaydirma serbest olsun */
@media (max-width: 940px) and (orientation: landscape) {
    html,
    body {
        height: auto !important;
        min-height: 100svh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body {
        display: block !important;
    }
}

/* =========================================================
   V18 DIKEY TELEFON: ISLEM TAHTASI DAHA DA KISA
   - Alt butonlar daha erken gorunsun diye yalnizca islem tahtasi alani kisaltildi.
   ========================================================= */
@media (max-width: 820px) and (orientation: portrait) {
    .math-panel {
        min-height: 148px !important;
        padding: 5px !important;
    }

    .panel-title {
        min-height: 25px !important;
        padding: 3px 6px !important;
        font-size: .68rem !important;
    }

    .math-board {
        width: min(100%, 184px) !important;
        margin: -16px auto 0 !important;
        transform: scale(.46) !important;
        transform-origin: top center !important;
    }

    .board-note {
        margin-top: -132px !important;
        padding: 3px 5px !important;
        font-size: .46rem !important;
        line-height: 1.02 !important;
        max-width: 95% !important;
    }

    .place-panel {
        min-height: 132px !important;
    }

    .place-body {
        min-height: 94px !important;
    }

    .app.manual-mode .math-panel {
        min-height: 140px !important;
    }

    .app.manual-mode .math-board {
        width: min(100%, 176px) !important;
        margin: -18px auto 0 !important;
        transform: scale(.43) !important;
    }

    .app.manual-mode .board-note {
        margin-top: -140px !important;
        font-size: .42rem !important;
    }

    .app.manual-mode .place-panel {
        min-height: 122px !important;
    }

    .app.manual-mode .place-body {
        min-height: 86px !important;
    }
}

@media (max-width: 380px) and (orientation: portrait) {
    .math-panel {
        min-height: 140px !important;
    }

    .math-board {
        width: min(100%, 174px) !important;
        transform: scale(.43) !important;
    }

    .board-note {
        margin-top: -142px !important;
        font-size: .42rem !important;
    }

    .app.manual-mode .math-panel {
        min-height: 132px !important;
    }
}

/* =========================================================
   V19 ETKILESIMLI MOD - DIKEY TELEFONDA ISLEM TAHTASI DAHA KISA
   - Alt butonlar daha erken gorunsun diye sadece manual-mode math panel kisaltildi.
   ========================================================= */
@media (max-width: 820px) and (orientation: portrait) {
    .app.manual-mode .math-panel {
        min-height: 118px !important;
        padding: 4px !important;
    }

    .app.manual-mode .panel-title {
        min-height: 22px !important;
        padding: 2px 5px !important;
        font-size: .62rem !important;
        border-radius: 8px !important;
    }

    .app.manual-mode .math-board {
        width: min(100%, 154px) !important;
        margin: -24px auto 0 !important;
        transform: scale(.34) !important;
        transform-origin: top center !important;
    }

    .app.manual-mode .board-note {
        margin-top: -176px !important;
        padding: 2px 4px !important;
        font-size: .36rem !important;
        line-height: 1 !important;
        max-width: 94% !important;
        border-radius: 7px !important;
    }

    .app.manual-mode .place-panel {
        min-height: 116px !important;
    }

    .app.manual-mode .place-body {
        min-height: 80px !important;
    }

    .app.manual-mode .hint-label {
        min-height: 18px !important;
        font-size: .42rem !important;
        line-height: 1 !important;
        border-radius: 6px !important;
        left: 3px !important;
        right: 3px !important;
        bottom: 3px !important;
        padding: 2px 3px !important;
    }

    .app.manual-mode .bottom-area {
        margin-top: 4px !important;
        gap: 4px !important;
    }

    .app.manual-mode .status-card {
        min-height: 32px !important;
        padding: 3px 5px !important;
        border-radius: 8px !important;
        gap: 3px !important;
    }

    .app.manual-mode .teacher-mark {
        width: 20px !important;
        height: 20px !important;
        border-radius: 6px !important;
        font-size: .62rem !important;
    }

    .app.manual-mode .status-title {
        font-size: .42rem !important;
    }

    .app.manual-mode .status-text {
        font-size: .44rem !important;
        line-height: 1 !important;
    }

    .app.manual-mode .manual-bank {
        gap: 3px !important;
        padding: 3px !important;
        border-radius: 8px !important;
    }

    .app.manual-mode .model-token,
    .app.manual-mode .manual-tens-slot .ten-token,
    .app.manual-mode .manual-units-slot .unit-token {
        min-height: 22px !important;
        height: 22px !important;
        font-size: .4rem !important;
        border-radius: 6px !important;
        padding: 0 2px !important;
    }

    .app.manual-mode .manual-bank-title,
    .app.manual-mode .manual-main-slot,
    .app.manual-mode .manual-stats {
        min-height: 20px !important;
        font-size: .4rem !important;
        border-radius: 6px !important;
        padding: 2px 3px !important;
    }

    .app.manual-mode .secondary-action,
    .app.manual-mode .primary-action {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: .52rem !important;
        border-radius: 8px !important;
    }
}

@media (max-width: 380px) and (orientation: portrait) {
    .app.manual-mode .math-panel {
        min-height: 110px !important;
    }

    .app.manual-mode .math-board {
        width: min(100%, 146px) !important;
        transform: scale(.31) !important;
    }

    .app.manual-mode .board-note {
        margin-top: -184px !important;
        font-size: .34rem !important;
    }
}

/* =========================================================
   V20 ETKILESIMLI MOD - DIKEY TELEFONDA ISLEM TAHTASI DUZGUN HIZA
   - Ustten bozulan yerlesim geri dengelendi.
   - Islem yukarida dogal dursun, alttaki gereksiz bosluk azalsin.
   ========================================================= */
@media (max-width: 820px) and (orientation: portrait) {
    .app.manual-mode .math-panel {
        min-height: 126px !important;
        padding: 4px 4px 3px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    .app.manual-mode .panel-title {
        min-height: 22px !important;
        padding: 2px 5px !important;
        font-size: .62rem !important;
        border-radius: 8px !important;
        margin-bottom: 0 !important;
    }

    .app.manual-mode .math-board {
        width: min(100%, 166px) !important;
        margin: -4px auto 0 !important;
        transform: scale(.37) !important;
        transform-origin: top center !important;
    }

    .app.manual-mode .board-note {
        margin-top: -150px !important;
        padding: 2px 4px !important;
        font-size: .38rem !important;
        line-height: 1.02 !important;
        max-width: 94% !important;
        border-radius: 7px !important;
    }

    .app.manual-mode .place-panel {
        min-height: 114px !important;
    }

    .app.manual-mode .place-body {
        min-height: 78px !important;
    }

    .app.manual-mode .hint-label {
        min-height: 18px !important;
        font-size: .42rem !important;
        line-height: 1 !important;
        border-radius: 6px !important;
        left: 3px !important;
        right: 3px !important;
        bottom: 3px !important;
        padding: 2px 3px !important;
    }

    .app.manual-mode .bottom-area {
        margin-top: 3px !important;
        gap: 4px !important;
    }

    .app.manual-mode .status-card {
        min-height: 30px !important;
        padding: 3px 5px !important;
        border-radius: 8px !important;
        gap: 3px !important;
    }

    .app.manual-mode .teacher-mark {
        width: 20px !important;
        height: 20px !important;
        border-radius: 6px !important;
        font-size: .62rem !important;
    }

    .app.manual-mode .status-title {
        font-size: .42rem !important;
    }

    .app.manual-mode .status-text {
        font-size: .44rem !important;
        line-height: 1 !important;
    }

    .app.manual-mode .manual-bank {
        gap: 3px !important;
        padding: 3px !important;
        border-radius: 8px !important;
    }

    .app.manual-mode .model-token,
    .app.manual-mode .manual-tens-slot .ten-token,
    .app.manual-mode .manual-units-slot .unit-token {
        min-height: 22px !important;
        height: 22px !important;
        font-size: .4rem !important;
        border-radius: 6px !important;
        padding: 0 2px !important;
    }

    .app.manual-mode .manual-bank-title,
    .app.manual-mode .manual-main-slot,
    .app.manual-mode .manual-stats {
        min-height: 20px !important;
        font-size: .4rem !important;
        border-radius: 6px !important;
        padding: 2px 3px !important;
    }

    .app.manual-mode .secondary-action,
    .app.manual-mode .primary-action {
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        font-size: .52rem !important;
        border-radius: 8px !important;
    }
}

@media (max-width: 380px) and (orientation: portrait) {
    .app.manual-mode .math-panel {
        min-height: 120px !important;
    }

    .app.manual-mode .math-board {
        width: min(100%, 158px) !important;
        transform: scale(.35) !important;
        margin-top: -5px !important;
    }

    .app.manual-mode .board-note {
        margin-top: -158px !important;
        font-size: .36rem !important;
    }
}

/* =========================================================
   V21 TELEFON ERISIM ENGELI
   - Telefon acilisinda uygulama kullanima kapatilir.
   - Masaustu arayuz korunur.
   ========================================================= */
body.ild-mobile-blocked {
    display: block !important;
    min-height: 100svh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 18% 10%, rgba(56,189,248,.18), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(249,115,22,.16), transparent 32%),
        linear-gradient(135deg, #e0f2fe 0%, #f8fbff 54%, #fff7ed 100%) !important;
}

body.ild-mobile-blocked .simulation-shell {
    display: none !important;
}

.ild-mobile-blocker {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background:
        radial-gradient(circle at 20% 12%, rgba(56,189,248,.26), transparent 34%),
        radial-gradient(circle at 86% 20%, rgba(249,115,22,.18), transparent 34%),
        linear-gradient(135deg, #e0f2fe 0%, #f8fbff 54%, #fff7ed 100%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.ild-mobile-blocked .ild-mobile-blocker {
    display: flex !important;
}

.ild-mobile-blocker-card {
    width: min(94vw, 460px);
    border-radius: 28px;
    padding: 28px 22px;
    text-align: center;
    background: rgba(255,255,255,.96);
    border: 2px solid rgba(3,105,161,.18);
    box-shadow:
        0 22px 55px rgba(15,23,42,.18),
        inset 0 1px 0 rgba(255,255,255,.85);
}

.ild-mobile-blocker-logo {
    width: 86px;
    height: auto;
    margin: 0 auto 14px;
    display: block;
    filter: drop-shadow(0 10px 14px rgba(15,23,42,.18));
}

.ild-mobile-blocker-title {
    margin: 0 0 12px;
    color: #0f3c91;
    font-size: clamp(1.35rem, 6vw, 1.85rem);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: -.035em;
}

.ild-mobile-blocker-text {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1rem, 4.4vw, 1.18rem);
    line-height: 1.5;
    font-weight: 800;
}

.ild-mobile-blocker-note {
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 16px;
    color: #92400e;
    background: #fff7ed;
    border: 1px solid rgba(245,158,11,.35);
    font-size: .9rem;
    line-height: 1.35;
    font-weight: 750;
}