body {
    background: linear-gradient(135deg, #ffe7a3, #d4f0ff)
}

h1 {
    font-weight: 800;
    letter-spacing: .5px
}

.card-glow {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    border: 0;
    border-radius: 18px
}

.big {
    font-size: 1.25rem
}

.q {
    font-size: 2rem;
    font-weight: 800
}

.btn-opt {
    font-size: 1.15rem;
    border-width: 2px
}

.pulse {
    animation: pulse .6s ease
}

.shake {
    animation: shake .4s
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.06)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes shake {

    10%,
    90% {
        transform: translateX(-2px)
    }

    20%,
    80% {
        transform: translateX(4px)
    }

    30%,
    50%,
    70% {
        transform: translateX(-6px)
    }

    40%,
    60% {
        transform: translateX(6px)
    }
}

.badge-coin {
    background: #ffe066;
    color: #7a5a00;
    border: 2px solid #ffce3a;
    border-radius: 999px
}

.clock {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: #fff;
    border: 6px solid #ffd166;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800
}

/* Answer feedback */
.correct-glow {
    animation: correctPop .6s ease;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .25) inset
}

.wrong-shake {
    animation: shake .4s;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .2) inset
}

@keyframes correctPop {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.04)
    }

    100% {
        transform: scale(1)
    }
}

/* Number pad */
#numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem
}

#numpad .btn {
    font-size: 1.25rem;
    padding: .65rem 0
}

/* Report look & feel */
#reportArea .report-card {
    border-radius: 16px;
    border: 1px solid #e6e9ef;
    background: #fff;
    padding: 18px 18px 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .06)
}

#reportArea h4 {
    font-weight: 800;
    margin: 0 0 .25rem
}

#reportArea h5 {
    font-weight: 700;
    margin: 1rem 0 .5rem
}

#reportArea .muted {
    color: #6b7280
}

#reportArea .pill {
    display: inline-block;
    background: #eef2f7;
    color: #374151;
    border: 1px solid #dfe5ec;
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .85rem
}

#reportArea .stat {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    background: #f9fafb;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: .6rem .8rem
}

#reportArea .stat b {
    font-size: 1.25rem
}

#reportArea .table {
    font-size: .95rem
}

#reportArea .table th {
    background: #f6f7fb;
    font-weight: 700
}

#reportArea .table thead th {
    position: sticky;
    top: 0;
    z-index: 1
}

#reportArea .badge-soft {
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    color: #111827;
    border-radius: 8px;
    padding: .2rem .5rem
}

#reportArea .badge-good {
    background: #e7f7ee;
    color: #1a7f37;
    border: 1px solid #c7eed8
}

#reportArea .badge-warn {
    background: #fff4e5;
    color: #a15c00;
    border: 1px solid #ffe2b7
}

#reportArea .badge-bad {
    background: #fdeeee;
    color: #b42318;
    border: 1px solid #f6c4c0
}

#reportArea .delta {
    font-weight: 700
}

#reportArea .delta.pos {
    color: #1a7f37
}

#reportArea .delta.neg {
    color: #b42318
}

#reportArea .progress {
    height: 10px;
    border-radius: 999px;
    background: #eceff3
}

#reportArea .progress-bar {
    background: #60a5fa;
    border-radius: 999px
}

/* Print overrides */
@media print {

    html,
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact
    }

    #reportArea .report-card {
        box-shadow: none;
        border-color: #bbb
    }

    #reportArea .table thead th {
        position: static
    }

    .no-print,
    #start,
    #hintBtn,
    #nextBtn,
    #showOptsBtn,
    #stopBtn,
    header,
    nav,
    footer,
    .input-group,
    .form-select,
    .form-control {
        display: none !important
    }

    #reportArea {
        display: block !important
    }

    body {
        background: #fff !important
    }
}

/* Skip button styling */
#nextBtn {
    background: #6b7280;
    border-color: #6b7280
}

#nextBtn:hover {
    background: #4b5563;
    border-color: #4b5563
}

/* Vertical question styling */
.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}






/* --- Fix vertical alignment for subtraction layout --- */
.q .vert-prob {
    display: inline-grid;
    grid-template-columns: auto minmax(5ch, auto);
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
}

.q .top-num {
    grid-row: 1;
    grid-column: 2;
}

.q .op {
    padding-left: 600px;
    grid-row: 2;
    /* place operator between the numbers */
    grid-column: 1 / 3;
    /* center horizontally under top, above bottom */
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 700;
    justify-self: baseline;
    align-self: center;
    transform: translateY(-0.15em);
    /* fine vertical tweak */
}

.q .bot-num {
    grid-row: 3;
    grid-column: 2;
}

.q .hline {
    grid-row: 3;
    grid-column: 2;
    border-bottom: 2px solid currentColor;
    width: 100%;
    height: 0;
    transform: translateY(0.6em);
}
/* --- Fix vertical math alignment (top number, operator, bottom number) --- */
.row.r-top,
.row.r-bot {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 12px;
    font-family: inherit;
}

.row.r-top span,
.row.r-bot span {
    display: inline-block;
    text-align: right;
}

/* Ensure consistent width and alignment */
span.op {
    display: inline-block;
    min-width: 1.5ch;
    text-align: center;
    font-weight: 700;
    line-height: 1;
    transform: translateY(2px);
    /* fine-tune vertical centering */
}

span.lhs,
span.rhs {
    display: inline-block;
    min-width: 4ch;
    font-weight: 700;
    text-align: right;
    line-height: 1.1;
}

/* Optional: align subtraction layout vertically better */
.row.r-top {
    margin-bottom: 4px;
}

.row.r-bot {
    border-top: 2px solid currentColor;
    padding-top: 6px;
    margin-top: 2px;
}


/* ================================
   LONG DIVISION (standalone)
   ================================ */

/* Container */
.ld {
    display: inline-flex;
    align-items: flex-start;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* Divisor */
.ld-divisor {
    font-weight: 600;
}

.ld-divisor {
    font-size: clamp(28px, 5vw, 44px);
}

.ld-divisor {
    margin-right: 0.25em;
}

.ld-divisor {
    transform: translateY(0.04em);
}

/* Vinculum (container for SVG “house”) */
.ld-vinculum {
    display: inline-block;
}

/* .ld-vinculum {
    line-height: 0;
} */

.ld-vinculum {
    height: var(--ld-h, 1.1em);
}

.ld-vinculum {
    width: var(--ld-w, 1.6em);
}

.ld-vinculum {
    margin: 0 0.15em 0 0.15em;
}

.ld-vinculum {
    vertical-align: top;
}

/* SVG inside vinculum */
.ld-vinculum svg {
    width: 100%;
}

.ld-vinculum svg {
    height: 100%;
}

.ld-vinculum svg {
    display: block;
}

/* Path inside SVG */
.ld-vinculum path {
    stroke: currentColor;
}

.ld-vinculum path {
    vector-effect: non-scaling-stroke;
}

/* Dividend */
.ld-dividend {
    font-weight: 600;
}

.ld-dividend {
    font-size: clamp(28px, 5vw, 44px);
}

.ld-dividend {
    transform: translateY(0.04em);
}