/* Projekt: Ninabella | https://nina3c.dk/
 * Brugsvilkår: LICENSE.md / /brugsvilkaar/ | Kilder: SOURCES.md
 * Projekt-credit angiver ikke verificeret ophav til alle bidrag.
 */
/*
 * Ninabella | https://nina3c.dk/
 * Spil: Kasseapparatet
 * Fil: css/kasseapparat.css
 * Version registreret: 2026-10-04T18:54:41+02:00 (Europe/Copenhagen)
 * Filens oprettelsesdato: 2026-10-02T02:19:27+02:00
 * Observeret seneste filændring før registrering: 2026-10-03T20:31:03+02:00
 * Fildatoer kan ændres ved kopiering og dokumenterer ikke første udviklingsdato.
 * Registreringen daterer denne version; oprindelig udviklingsdato er ikke verificeret.
 */
.cash-game-content .game {
            position: relative;
            overflow: hidden;
            width: 100%;
            min-width: 0;
            height: max(760px, calc(100dvh - var(--site-header-height) - 98px));
            max-width: none;
            margin: auto;
            padding: clamp(16px, 2.4vw, 30px);
            display: grid;
            grid-template-rows: auto minmax(0, 1fr) auto;
            gap: 16px;
            border: 4px solid #5c6f9a;
            border-radius: 32px 32px 22px 22px;
            background:
                linear-gradient(
                    145deg,
                    #536b9f 0%,
                    #26365e 10%,
                    #172443 52%,
                    #0c1530 100%
                );
            box-shadow:
                inset 0 2px 0 rgba(255,255,255,.24),
                inset 0 -16px 0 rgba(4,9,24,.5),
                0 22px 55px rgba(0,0,0,.48),
                0 0 34px rgba(37,215,255,.16);
}
.cash-game-content .game::before {
            content: "NINABELLA · KASSE 01";
            position: absolute;
            right: 25px;
            bottom: 10px;
            color: rgba(193,220,255,.54);
            font: 900 10px/1 "Courier New", monospace;
            letter-spacing: .12em;
}
.cash-game-content .game::after {
            content: "";
            position: absolute;
            left: 28%;
            right: 28%;
            bottom: 13px;
            height: 14px;
            border: 2px solid rgba(7,12,29,.92);
            border-radius: 4px 4px 9px 9px;
            background:
                linear-gradient(
                    #8799bf,
                    #435578
                );
            box-shadow:
                inset 0 3px 0 rgba(255,255,255,.18);
}
.cash-game-content .game > header {
            display: flex;
            justify-content: space-between;
            align-items: center;
}
.cash-game-content .game > header {
            position: relative;
            z-index: 1;
            padding: 10px 14px;
            border: 2px solid rgba(154,194,255,.45);
            border-radius: 16px;
            background:
                linear-gradient(
                    90deg,
                    rgba(7,14,34,.82),
                    rgba(20,36,72,.72)
                );
}
.cash-game-content .game > header h1 {
            margin: 0;
            color: #ffd75e;
            font-size:
                clamp(
                    1.8rem,
                    4vw,
                    3.4rem
                );
            text-shadow:
                0 2px 0 #8e551e,
                0 0 16px rgba(255,215,94,.28);
}
.cash-game-content .stats {
            display: flex;
            gap: 18px;
            color: #9eb3dc;
            text-align: center;
            font-weight: 800;
}
.cash-game-content .stats span:not(.ninabella-audio-icon) {
            padding: 5px 10px;
            border: 1px solid rgba(113,246,255,.34);
            border-radius: 9px;
            background:
                rgba(2,10,26,.68);
}
.cash-game-content .stats b {
            display: block;
            color: #71f6ff;
            font-size: 1.3rem;
}
.cash-game-content .checkout {
            position: relative;
            z-index: 1;
            min-height: 0;
            display: grid;
            grid-template-columns:
                minmax(0, 1fr)
                minmax(260px, .52fr);
            gap: 28px;
            align-items: center;
            padding:
                clamp(
                    12px,
                    2vw,
                    22px
                );
            border: 3px solid rgba(7,14,34,.72);
            border-radius: 22px;
            background:
                linear-gradient(
                    145deg,
                    #344c7c,
                    #172846 58%,
                    #223660
                );
            box-shadow:
                inset 0 2px 0 rgba(255,255,255,.16),
                0 8px 0 rgba(6,11,28,.5);
}
.cash-game-content .scan-station {
            min-width: 0;
            min-height: 0;
            display: grid;
            grid-template-columns:
                clamp(170px, 20vw, 230px)
                minmax(0, 1fr);
            grid-template-rows:
                auto
                minmax(0, 1fr);
            gap: 12px;
            align-items: stretch;
}
.cash-game-content .shelf {
            grid-column: 1;
            grid-row: 1;
}
.cash-game-content .scanner {
            grid-column: 1;
            grid-row: 2;
}
.cash-game-content .receipt-panel {
            grid-column: 2;
            grid-row: 1 / 3;
            min-width: 0;
            min-height: 0;
}
.cash-game-content .shelf,
.cash-game-content .receipt-panel {
            padding: 13px;
            border: 2px solid rgba(198,221,255,.36);
            border-radius: 16px;
            background:
                linear-gradient(
                    155deg,
                    #27436f,
                    #172947
                );
}
.cash-game-content .shelf h2,
.cash-game-content .receipt-panel h2 {
            margin: 0;
            color: #fff4b6;
            font: 900 1rem "Courier New", monospace;
}
.cash-game-content .shelf p {
            margin: 5px 0 12px;
            color: #bdd0f2;
            font-size: .8rem;
}
.cash-game-content .product-shelf {
            display: grid;
            gap: 9px;
}
.cash-game-content .product {
            display: grid;
            place-items: center;
            min-height: 58px;
            padding: 9px 10px;
            border: 2px solid #b99a60;
            border-radius: 10px;
            background:
                linear-gradient(
                    #d7bd83,
                    #aa8045
                );
            color: #25233a;
            font: 900 .88rem "Courier New", monospace;
            cursor: grab;
            box-shadow:
                0 3px #9a7133;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
            -webkit-user-drag: none;
}
.cash-game-content .product:active {
            cursor: grabbing;
}
.cash-game-content .product.scanned {
            opacity: .25;
            pointer-events: none;
            filter: grayscale(1);
}
.cash-game-content .product-icon {
            display: inline-grid;
            place-items: center;
            min-width: 34px;
            font-size: 1.55rem;
            line-height: 1;
            filter:
                drop-shadow(
                    0 2px 0
                    rgba(68,39,10,.22)
                );
}
.cash-game-content .drag-ghost {
            position: fixed !important;
            z-index: 9999;
            pointer-events: none;
            transform:
                translate(-50%, -50%)
                rotate(-5deg);
            opacity: .92;
            box-shadow:
                0 12px 25px
                rgba(0,0,0,.45) !important;
}
.cash-game-content .scanner {
            min-width: 0;
            min-height: 0;
            display: block;
            padding: 0;
            border: 0;
            background: none;
            box-shadow: none;
}
.cash-game-content .scan-drop {
            width: 100%;
            height: 100%;
            min-height: 210px;
            display: grid;
            place-items: center;
            align-content: center;
            gap: 7px;
            padding: 12px 10px;
            border: 3px dashed #71f6ff;
            border-radius: 18px;
            background:
                repeating-linear-gradient(
                    90deg,
                    rgba(61, 104, 173, .26) 0 11px,
                    rgba(18, 42, 84, .26) 11px 22px
                ),
                linear-gradient(
                    180deg,
                    #18305a,
                    #112244
                );
            color: #d8fbff;
            text-align: center;
            transition:
                background .15s,
                border-color .15s,
                transform .15s,
                box-shadow .15s;
}
.cash-game-content .scanner-icon {
            display: block;
            font-size: 2rem;
            line-height: 1;
}
.cash-game-content .scan-drop strong {
            display: block;
            font: 900 .9rem "Courier New", monospace;
            letter-spacing: .08em;
}
.cash-game-content .scanner-help {
            display: block;
            font: 800 .76rem "Courier New", monospace;
            line-height: 1.2;
}
.cash-game-content .scan-drop.over {
            border-color: #fff4b6;
            background:
                repeating-linear-gradient(
                    90deg,
                    rgba(79, 196, 196, .34) 0 11px,
                    rgba(29, 102, 119, .34) 11px 22px
                ),
                #1e6577;
            color: #fff;
            transform: scale(1.02);
            box-shadow:
                0 0 18px rgba(113, 246, 255, .22);
}
.cash-game-content .receipt-panel {
            display: flex;
            flex-direction: column;
            min-width: 0;
}
.cash-game-content .receipt-paper {
            position: relative;
            flex: 1;
            margin-top: 10px;
            min-height: 230px;
            padding: 16px 15px;
            border-radius: 5px 5px 12px 12px;
            color: #26324c;
            background:
                repeating-linear-gradient(
                    0deg,
                    transparent 0 27px,
                    rgba(37,52,78,.06) 28px 29px
                ),
                #fff9e9;
            box-shadow:
                0 6px 0 #b9ad8e,
                0 12px 18px rgba(3,9,23,.3);
            font-family:
                "Courier New",
                monospace;
}
.cash-game-content .receipt-paper::before {
            content: "NINABELLA BUTIK";
            display: block;
            margin-bottom: 14px;
            color: #35466b;
            text-align: center;
            font-size: .75rem;
            font-weight: 900;
            letter-spacing: .08em;
}
.cash-game-content .receipt-items {
            display: grid;
            gap: 7px;
}
.cash-game-content .receipt-line {
            display: grid;
            grid-template-columns:
                auto
                minmax(0, 1fr)
                auto;
            align-items: center;
            gap: 7px;
            min-height: 32px;
            padding: 4px 0;
            font-size: .86rem;
}
.cash-game-content .receipt-line .product-icon {
            min-width: 22px;
            font-size: 1.1rem;
}
.cash-game-content .receipt-name {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-weight: 700;
}
.cash-game-content .receipt-price {
            color: #a62d68;
            font-weight: 900;
            white-space: nowrap;
}
.cash-game-content .receipt-calculation {
            display: none;
            margin-top: 13px;
            padding-top: 14px;
            border-top: 2px dashed #61739c;
            text-align: center;
}
.cash-game-content .receipt-calculation.show {
            display: block;
}
.cash-game-content .calculation-label {
            margin-bottom: 7px;
            color: #4f607d;
            font-size: .72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .05em;
}
.cash-game-content .calculation {
            color: #14284f;
            font-size:
                clamp(
                    1.35rem,
                    2.3vw,
                    2.15rem
                );
            font-weight: 900;
            line-height: 1.25;
            overflow-wrap: anywhere;
}
.cash-game-content .receipt-instruction {
            display: none;
            margin-top: 10px;
            padding: 8px;
            border: 2px solid #f3c642;
            border-radius: 8px;
            background: #fff2a6;
            color: #273757;
            text-align: center;
            font-size: .76rem;
            font-weight: 900;
}
.cash-game-content .receipt-instruction.show {
            display: block;
}
.cash-game-content .scan-progress {
            margin-top: auto;
            padding-top: 10px;
            color: #d5e9ff;
            text-align: center;
            font-size: .76rem;
            font-weight: 800;
}
.cash-game-content .keypad {
            align-self: stretch;
            padding: 15px;
            display: grid;
            grid-template-columns:
                repeat(3, 1fr);
            gap: 10px;
            border: 3px solid #111c38;
            border-radius: 20px;
            background:
                linear-gradient(
                    145deg,
                    #0b132b,
                    #1b2d55
                );
            touch-action: manipulation;
            box-shadow:
                inset 0 2px 0 rgba(255,255,255,.12),
                inset 0 -6px 0 rgba(0,0,0,.28);
}
.cash-game-content .display {
            position: relative;
            grid-column: 1 / -1;
            min-height: 72px;
            padding: 10px;
            border: 3px solid #315c4b;
            border-radius: 8px;
            color: #b9ffd0;
            background:
                repeating-linear-gradient(
                    90deg,
                    rgba(130,255,164,.04)
                    0 2px,
                    transparent
                    2px 6px
                ),
                #061d18;
            box-shadow:
                inset 0 0 22px rgba(67,255,153,.24),
                0 0 10px rgba(67,255,153,.16);
            text-align: right;
            font: 900 2rem "Courier New", monospace;
            letter-spacing: .06em;
}
.cash-game-content .display::before {
            content: "TOTAL";
            position: absolute;
            top: 7px;
            left: 10px;
            color:
                rgba(
                    185,
                    255,
                    208,
                    .62
                );
            font: 700 9px "Courier New", monospace;
            letter-spacing: .12em;
}
.cash-game-content .key {
            min-height: 54px;
            border: 2px solid #c1c9e1;
            border-radius: 10px;
            background:
                linear-gradient(
                    #edf1fa,
                    #aebbd7
                );
            color: #16203c;
            font: inherit;
            font-size: 1.8rem;
            font-weight: 900;
            cursor: pointer;
            box-shadow:
                0 4px #566581;
            touch-action: manipulation;
}
.cash-game-content .key:hover {
            filter:
                brightness(1.08);
}
.cash-game-content .key:active {
            transform:
                translateY(3px);
            box-shadow:
                0 1px #566581;
}
.cash-game-content .key.action {
            background:
                linear-gradient(
                    #72f6ff,
                    #2db6ca
                );
            border-color: #b8ffff;
            box-shadow:
                0 4px #177d90;
}
.cash-game-content .key.clear {
            background:
                linear-gradient(
                    #ff87df,
                    #db4aa8
                );
            border-color: #ffd0f1;
            box-shadow:
                0 4px #8d2d6b;
}
.cash-game-content .hint {
            margin: 0;
            text-align: center;
            color: #9af5b5;
            font-weight: 700;
}
.cash-game-content .overlay {
            position: fixed;
            inset: 0;
            z-index: 3000;
            display: grid;
            place-items: center;
            padding: 20px;
            background: #050b1bcc;
            text-align: center;
}
.cash-game-content .card {
            max-width: 450px;
            padding: 30px;
            border: 2px solid #ff63da;
            border-radius: 24px;
            background: #101a3cf5;
}
.cash-game-content .card h2 {
            margin: 0 0 10px;
            color: #71f6ff;
}
.cash-game-content .card p {
            line-height: 1.5;
            color: #c8d4ed;
}
.cash-game-content .start {
            border: 0;
            border-radius: 16px;
            padding: 14px 28px;
            background: #2fcbd5;
            color: #061326;
            font: inherit;
            font-weight: 900;
            cursor: pointer;
}
.cash-game-content .hidden {
            display: none;
}
@media (max-height: 500px) and (orientation: landscape) {
.cash-game-content .cash-register-box {
                padding: 4px;
                border-radius: 18px;
}
.cash-game-content .game {
                height: calc(100dvh - 16px);
                padding: 10px;
                gap: 6px;
                grid-template-rows:
                    auto
                    minmax(0, 1fr)
                    auto;
}
.cash-game-content .game::after,
.cash-game-content .game::before {
                display: none;
}
.cash-game-content .game > header {
                padding: 5px 9px;
}
.cash-game-content .game > header h1 {
                font-size: 1.35rem;
}
.cash-game-content .stats {
                gap: 5px;
                font-size: .7rem;
}
.cash-game-content .stats b {
                font-size: .9rem;
}
.cash-game-content .checkout {
                min-height: 0;
                height: 100%;
                display: grid;
                grid-template-columns:
                    minmax(0, 1fr)
                    clamp(155px, 23vw, 175px);
                gap: 7px;
                padding: 6px;
                align-items: stretch;
}
.cash-game-content .scan-station {
                min-width: 0;
                min-height: 0;
                height: 100%;
                display: grid;
                grid-template-columns:
                    clamp(160px, 29vw, 185px)
                    minmax(0, 1fr);
                grid-template-rows:
                    auto
                    minmax(0, 1fr);
                gap: 6px;
}
.cash-game-content .shelf {
                grid-column: 1;
                grid-row: 1;
                min-width: 0;
                padding: 6px;
}
.cash-game-content .shelf p {
                margin: 3px 0 5px;
                font-size: .62rem;
}
.cash-game-content .product-shelf {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
                gap: 4px;
}
.cash-game-content .product {
                min-height: 34px;
                padding: 3px;
}
.cash-game-content .product-icon {
                font-size: 1.05rem;
}
.cash-game-content .scanner {
                grid-column: 1;
                grid-row: 2;
                min-width: 0;
                min-height: 0;
                height: 100%;
}
.cash-game-content .scan-drop {
                width: 100%;
                height: 100%;
                min-height: 0;
                padding: 5px;
                gap: 3px;
                border-width: 2px;
                border-radius: 13px;
}
.cash-game-content .scanner-icon {
                font-size: 1.25rem;
}
.cash-game-content .scan-drop strong {
                font-size: .62rem;
}
.cash-game-content .scanner-help {
                font-size: .55rem;
                line-height: 1.1;
}
.cash-game-content .receipt-panel {
                grid-column: 2;
                grid-row: 1 / 3;
                min-width: 0;
                min-height: 0;
                padding: 6px;
}
.cash-game-content .receipt-paper {
                min-height: 0;
                height: 100%;
                margin-top: 5px;
                padding: 8px;
                overflow-y: auto;
}
.cash-game-content .receipt-paper::before {
                margin-bottom: 6px;
                font-size: .55rem;
}
.cash-game-content .receipt-items {
                gap: 2px;
}
.cash-game-content .receipt-line {
                min-height: 22px;
                padding: 1px 0;
                font-size: .62rem;
}
.cash-game-content .receipt-line .product-icon {
                font-size: .85rem;
}
.cash-game-content .receipt-calculation {
                margin-top: 6px;
                padding-top: 7px;
}
.cash-game-content .calculation-label {
                margin-bottom: 3px;
                font-size: .5rem;
}
.cash-game-content .calculation {
                font-size: 1rem;
}
.cash-game-content .receipt-instruction {
                margin-top: 5px;
                padding: 4px;
                font-size: .55rem;
}
.cash-game-content .scan-progress {
                padding-top: 4px;
                font-size: .56rem;
}
.cash-game-content .keypad {
                height: 100%;
                min-height: 0;
                padding: 5px;
                gap: 4px;
}
.cash-game-content .display {
                min-height: 36px;
                padding: 5px 7px;
                font-size: 1.05rem;
}
.cash-game-content .key {
                min-height: 0;
                padding: 2px;
                font-size: .9rem;
                border-radius: 8px;
}
.cash-game-content .hint {
                margin: 0;
                padding: 2px 6px;
                position: relative;
                z-index: 2;
                font-size: .72rem;
                line-height: 1.15;
}
.cash-game-content .game {
                height: calc(100dvh - var(--site-header-height) - 24px);
}
}

.cash-game-content { position: relative; font-family: Arial,sans-serif; color: #f5f7ff; }
.cash-game-content .game { height: 650px; max-height: 75vh; }
.cash-game-content .overlay { position: absolute; z-index: 25; border-radius: 22px; }
.cash-register-page.game-mode-active .cash-game-content,
.cash-register-page.game-mode-active .game { height: 100%; max-height: none; min-height: 0; }
.cash-register-page.game-mode-active .game > header { padding-right: 52px; }
.cash-register-page.game-mode-active .ninabella-game-panel { padding: 6px; }
@media (orientation: landscape) and (min-height: 600px) {
 .cash-register-page.game-mode-active .ninabella-game-page { place-items: center; }
 .cash-register-page.game-mode-active .ninabella-game-layout { width: min(1100px,100%); height: min(700px,100%); }
}
@media (orientation: landscape) and (max-height: 599px) {
 .cash-game-content .game { padding: 8px; gap: 5px; }
 .cash-game-content .game > header { padding: 4px 8px; }
 .cash-game-content .game > header h1 { font-size: 1.2rem; }
}

/* =========================================================
   KASSEAPPARAT – LYD EFTER POINT
   KUNDE | POINT | LYD
========================================================= */

.cash-register-page .cash-game-content .stats {
    display: flex;
    align-items: center;
}

/* Den fælles lydknap bliver en del af stats-rækken */
.cash-register-page
.cash-game-content
.stats
.game-audio-button {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;

    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;

    margin: 0 !important;
    padding: 8px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    transform: none !important;
    z-index: auto !important;
}

/* Lille landscape – mobil */
@media (max-height: 500px) and (orientation: landscape) {

    .cash-register-page
    .cash-game-content
    .stats
    .game-audio-button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;

        padding: 6px;

        flex-basis: 34px;
    }
}
/* =========================================================
   KASSEAPPARAT – DREJ SKÆRM / PORTRAIT
   Hold hele beskeden inden for mobilens viewport
========================================================= */

@media (orientation: portrait) and (max-width: 1100px) {

    body.cash-register-page .rotate-message {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        max-width: 100vw !important;

        height: 100dvh !important;
        max-height: 100dvh !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        padding:
            max(24px, env(safe-area-inset-top))
            max(20px, env(safe-area-inset-right))
            max(24px, env(safe-area-inset-bottom))
            max(20px, env(safe-area-inset-left)) !important;

        display: grid !important;
        place-content: center !important;
        justify-items: center !important;

        overflow: hidden !important;

        text-align: center !important;
    }


    body.cash-register-page .rotate-message > * {
        box-sizing: border-box;
        max-width: calc(100vw - 40px);
    }


    body.cash-register-page .rotate-message h1,
    body.cash-register-page .rotate-message h2 {
        width: 100%;
        margin: 0 !important;

        font-size: clamp(
            1.6rem,
            7vw,
            2.2rem
        ) !important;

        line-height: 1.1;
        text-align: center;
    }


    body.cash-register-page .rotate-message p {
        width: min(
            100%,
            320px
        );

        max-width: calc(100vw - 40px) !important;

        margin: 0 auto !important;

        font-size: clamp(
            .9rem,
            4vw,
            1rem
        ) !important;

        line-height: 1.4;
        text-align: center;
    }


    body.cash-register-page .rotate-message svg,
    body.cash-register-page .rotate-message img {
        width: clamp(
            64px,
            20vw,
            90px
        ) !important;

        height: clamp(
            64px,
            20vw,
            90px
        ) !important;

        margin-inline: auto;
    }
}


/* SVG-motiver på vareknapper og kvittering. */
.cash-game-content .product-icon img { width: 48px; height: 48px; object-fit: contain; pointer-events: none; }
.cash-game-content .receipt-line .product-icon img { width: 24px; height: 24px; }
@media (max-width: 640px), (max-height: 600px) {
  .cash-game-content .product-icon img { width: 34px; height: 34px; }
}

/* Lad alle områder bruge den tilgængelige højde inden for spilrammen. */
.cash-game-content .game, .cash-game-content .game * { box-sizing: border-box; }
.cash-game-content .checkout { align-items: stretch; min-height: 0; }
.cash-game-content .scan-station { height: 100%; min-height: 0; grid-template-rows: minmax(0, 3fr) minmax(0, 1fr); }
.cash-game-content .shelf { min-height: 0; display: flex; flex-direction: column; }
.cash-game-content .shelf h2, .cash-game-content .shelf p { flex-shrink: 0; }
.cash-game-content .product-shelf { flex: 1; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.cash-game-content .product { min-height: 0; padding: 3px; overflow: hidden; }
.cash-game-content .product-icon { min-width: 0; min-height: 0; }
.cash-game-content .product-icon img { max-width: 100%; max-height: 100%; }
.cash-game-content .scanner, .cash-game-content .scan-drop { min-height: 0; }
.cash-game-content .scan-drop { height: 100%; padding: 5px; gap: 3px; }
.cash-game-content .receipt-panel { height: 100%; min-height: 0; }
.cash-game-content .receipt-paper { flex: 1 1 0; height: auto; min-height: 0; overflow-y: auto; }
.cash-game-content .receipt-panel h2, .cash-game-content .scan-progress { flex-shrink: 0; }
.cash-game-content .keypad { min-height: 0; grid-template-rows: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); }
.cash-game-content .display, .cash-game-content .key { min-height: 0; }

/* Bevar det pink pixelplus synligt under traek med mus. */
@media (hover: hover) and (pointer: fine) {
 .cash-game-content .drag-ghost::after { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%) rotate(5deg); background: url('/assets/icons/ninabella-cursor-active.svg') center / contain no-repeat; pointer-events: none; }
}

/* Choose multiplication practice and reveal help only when requested. */
.cash-game-content [hidden]{display:none!important}
.cash-game-content .cash-task-choice{display:grid;gap:8px;text-align:left;margin:16px 0;color:#f6f7ff;font-size:16px}
.cash-game-content .cash-task-choice select{width:100%;min-height:44px;padding:8px;font:inherit;border:1px solid #b968ff;border-radius:8px;background:#111526;color:#fff}
.cash-game-content .cash-help-toggle{min-height:44px;padding:8px 14px;margin-top:10px;border:1px solid #b968ff;border-radius:8px;background:#111526;color:#fff;font:700 15px Nunito,system-ui,sans-serif;touch-action:manipulation}
.cash-game-content .cash-help-toggle:focus-visible{outline:3px solid #ffe66d;outline-offset:3px}
.cash-game-content .cash-help{max-height:180px;overflow:auto;padding:10px;margin-top:8px;border-left:3px solid #b968ff;color:#f6f7ff;background:#111526;font-size:14px;line-height:1.5}
.cash-game-content .cash-help p{margin:5px 0}.cash-game-content .cash-help section+section{margin-top:12px}
.cash-game-content .cash-help-items{display:flex;flex-wrap:wrap;gap:8px}.cash-game-content .cash-help-items img{width:30px;height:30px;object-fit:contain}

.cash-game-content .product:has(.cash-quantity){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.cash-game-content .cash-quantity{font:800 clamp(13px,1.5vw,19px) Nunito,system-ui,sans-serif;color:#fff;white-space:nowrap}

/* Keep only the outer top-right exit control during play. */
.cash-register-page.game-mode-active .game-close-button{display:none!important}

/* Keep both sound-on and muted icons legible in the dark stats bar. */
.cash-register-page .cash-game-content .stats .game-audio-button,
.cash-register-page .cash-game-content .stats .game-audio-button .ninabella-audio-icon{color:#fff}

/* Pair the quantity with its item and unit price. */
.cash-game-content .cash-product-description{font:800 clamp(14px,1.6vw,21px) Nunito,system-ui,sans-serif;color:#fff;text-align:center}
.cash-game-content .cash-unit-price{font:700 clamp(12px,1.2vw,16px) Nunito,system-ui,sans-serif;color:#fff;text-align:center}
.cash-game-content .cash-group-expression{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;vertical-align:middle}
.cash-game-content .cash-group-expression img{display:inline-block;width:1.6em;height:1.6em;object-fit:contain;flex:0 0 auto;pointer-events:none}
.cash-game-content .calculation:has(.cash-group-expression){display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:clamp(18px,2vw,27px)}

.cash-game-content .cash-discount-line{display:flex;justify-content:space-between;gap:12px;color:#a62070;font-weight:800;border-top:1px dashed #667798;padding-top:8px}
.cash-game-content .cash-offer-product{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.cash-game-content .cash-offer-label{font:800 clamp(12px,1.2vw,16px) Nunito,system-ui,sans-serif;color:#14203a;background:#ffe66d;padding:4px 8px;border-radius:5px}

/* Optional working belongs to the child; only the final answer is scored. */
.cash-game-content .cash-visual-choice{display:flex;align-items:center;gap:10px;text-align:left;margin:12px 0;font-size:15px;color:#f6f7ff}
.cash-game-content .cash-visual-choice input{width:22px;height:22px;accent-color:#b968ff;flex:0 0 auto}
.cash-game-content .cash-work{padding:12px 0;border-top:1px dashed #667798;margin-top:12px;color:#14203a;font-family:Nunito,system-ui,sans-serif;font-size:15px}
.cash-game-content .cash-work h3{font-size:17px;margin:0 0 8px}.cash-game-content .cash-work p{margin:8px 0;line-height:1.4}
.cash-game-content .cash-work-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0}
.cash-game-content .cash-work-field,.cash-game-content .cash-work-total{min-height:44px;border:2px solid #596b89;border-radius:7px;background:#fff;color:#14203a;padding:7px 12px;font:800 17px Nunito,system-ui,sans-serif;touch-action:manipulation}
.cash-game-content .cash-work-field{min-width:72px}.cash-game-content .cash-work button[aria-pressed="true"]{border-color:#8d32c6;box-shadow:0 0 0 2px #8d32c6}
.cash-game-content .cash-work button:focus-visible{outline:3px solid #8d32c6;outline-offset:4px}
.cash-game-content .cash-work-summary{font-weight:800}.cash-game-content .cash-group-product{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.cash-game-content .cash-product-picture{width:38px;height:38px;object-fit:contain}

.cash-game-content .cash-work>p{font-size:13px;margin:6px 0}.cash-game-content .cash-work-row{margin:8px 0}

/* Give the receipt more width while keeping comfortable keypad targets. */
@media(min-height:501px){
 .cash-game-content .checkout{grid-template-columns:minmax(0,1fr) minmax(210px,.38fr);gap:20px}
 .cash-game-content .keypad{padding:12px;gap:8px}
 .cash-game-content .key{min-width:44px;min-height:44px}
}

/* Use the available height for the receipt instead of the cabinet's padding. */
@media(orientation:landscape) and (min-height:501px){
 .cash-game-content .game{padding-block:10px 22px;gap:10px}
 .cash-game-content .game>header{padding-block:6px}
 .cash-game-content .checkout{padding-block:10px}
 .cash-register-page.game-mode-active .ninabella-game-layout{height:min(720px,100%)}
}

@media(orientation:landscape) and (min-height:501px){.cash-game-content .game>.hint{padding-bottom:8px}}

.cash-game-content .cash-strategy{margin-top:10px;border-top:1px solid #59647e;padding-top:4px}
.cash-game-content .cash-strategy summary{min-height:44px;display:list-item;align-content:center;color:#ffe66d;font-weight:800;cursor:pointer;touch-action:manipulation}
.cash-game-content .cash-strategy summary:focus-visible{outline:2px solid #ffe66d;outline-offset:2px}

.cash-game-content .shelf .cash-order-discount{flex-shrink:0;margin:4px 0 8px;padding:6px 8px;background:#ffe66d;color:#14203a;border-radius:5px;font:800 clamp(11px,1.1vw,15px)/1.35 Nunito,system-ui,sans-serif}