:root {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #162033;
    background: #eef3f8;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    min-width: 320px;
    margin: 0;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(35, 103, 208, 0.08), transparent 34rem), #eef3f8;
}

[x-cloak] { display: none !important; }
button, input { font: inherit; }
button { cursor: pointer; }

.accounting-game-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
    padding: 8px 10px;
    overflow: hidden;
}

.game-hud {
    display: grid;
    grid-template-columns: minmax(240px, 1.7fr) repeat(4, minmax(90px, .65fr));
    flex: 0 0 auto;
    gap: 8px;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto 8px;
}

.brand-lockup, .hud-stat {
    min-height: 56px;
    padding: 8px 13px;
    background: #fff;
    border: 1px solid #d6dee9;
    border-radius: 14px;
    box-shadow: 0 7px 24px rgba(37,55,81,.06);
}

.brand-lockup { display: flex; flex-direction: column; justify-content: center; }

.brand-kicker, .hud-stat span, .eyebrow, .ledger-heading span, .transaction-strip > span,
.console-copy span, .falling-block > span, .transaction-complete > span, .accounts-heading > span,
.typing-tutor-label {
    color: #627087;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.brand-lockup strong { margin-top: 3px; color: #101827; font-size: 1.1rem; }
.hud-stat { display: grid; place-items: center; align-content: center; text-align: center; }
.hud-stat strong { margin-top: 3px; color: #17233a; font-size: 1.25rem; }
.hud-stat .lives { color: #d93b4a; letter-spacing: .1em; }

.game-board {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(220px, .72fr) minmax(440px, 1.45fr) minmax(360px, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 1600px;
    min-height: 0;
    margin: 0 auto;
    overflow: hidden;
}

.accounts-panel, .ledger-card, .play-lane, .game-over-panel {
    background: #fff;
    border: 1px solid #d7e0ea;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(38,55,78,.08);
}

.accounts-panel {
    min-width: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.accounts-heading { padding: 11px 12px; border-bottom: 1px solid #e1e7ef; }
.accounts-heading h2 { margin: 3px 0 5px; color: #13213a; font-size: 1.2rem; }
.accounts-heading p { margin: 0; color: #718096; font-size: .76rem; line-height: 1.4; }

.accounts-list {
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
    scrollbar-width: thin;
}

.account-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 32px;
    padding: 6px 8px;
    margin-bottom: 5px;
    color: #34445d;
    font-size: .82rem;
    font-weight: 700;
    background: #f8fafc;
    border: 1px solid #e5ebf2;
    border-radius: 9px;
}


.account-search-empty, .account-locked {
    display: grid;
    gap: 7px;
    padding: 14px 12px;
    color: #53627a;
    font-size: .76rem;
    line-height: 1.4;
    background: #f7f9fc;
    border: 1px dashed #cdd8e7;
    border-radius: 10px;
}
.account-search-empty strong, .account-locked strong { color: #17325c; font-size: .86rem; }
.account-search-empty b { color: #1f62c5; }
.account-search-empty.no-match { color: #8d4850; background: #fff6f7; border-color: #edc5ca; }
.account-locked span { color: #667891; font-size: .62rem; font-weight: 850; letter-spacing: .09em; }
.account-locked small { color: #79879a; font-size: .7rem; }

.account-letter {
    white-space: pre;
    border-radius: 3px;
    transition: background .08s ease, color .08s ease, transform .08s ease;
}

.account-letter.typed-match {
    color: #0d5d37;
    background: #bff0d2;
    box-shadow: inset 0 -2px 0 #45a66f;
    transform: translateY(-1px);
}

.account-letter.typed-wrong {
    color: #a42c38;
    background: #ffd9de;
    box-shadow: inset 0 -2px 0 #db6672;
}

.play-lane {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    overflow: hidden;
    background:
        linear-gradient(rgba(26,64,118,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,64,118,.035) 1px, transparent 1px),
        #fff;
    background-size: 28px 28px;
}

.transaction-strip {
    z-index: 4;
    display: grid;
    gap: 2px;
    padding: 8px 14px;
    text-align: center;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid #dfe6ef;
}

.transaction-strip strong { color: #12203a; font-size: clamp(.9rem,1.35vw,1.12rem); line-height: 1.25; }
.transaction-strip b { color: #1e62c9; font-size: .92rem; }

.fall-track { position: relative; min-height: 0; overflow: hidden; }

.fall-track::before {
    position: absolute;
    top: 34px;
    bottom: 48px;
    left: 50%;
    width: 3px;
    content: "";
    background: linear-gradient(#a8bad4, #d9e2ee 70%, transparent);
    transform: translateX(-50%);
}

.fall-guide {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 50%;
    padding: 5px 9px;
    color: #7e8b9e;
    font-size: .63rem;
    font-weight: 850;
    letter-spacing: .08em;
    white-space: nowrap;
    background: rgba(255,255,255,.9);
    border-radius: 99px;
    transform: translateX(-50%);
}

.falling-block {
    position: absolute;
    z-index: 3;
    top: 30px;
    left: 50%;
    display: grid;
    gap: 8px;
    width: min(72%, 330px);
    padding: 11px 13px;
    text-align: center;
    background: #fff;
    border: 2px solid #2867c5;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(40,103,197,.17);
    transform: translateX(-50%);
    animation: falling-to-ground var(--fall-duration, 23s) linear forwards;
    will-change: top, transform;
}

.falling-block strong { color: #163563; font-size: clamp(1rem,2vw,1.33rem); overflow-wrap: anywhere; }
.block-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.block-tags b { padding: 5px 8px; color: #52627a; font-size: .66rem; background: #f4f7fb; border: 1px solid #dce4ee; border-radius: 999px; }

.fall-ground {
    position: absolute;
    z-index: 2;
    right: 5%;
    bottom: 8px;
    left: 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 37px;
    padding: 0 14px;
    color: #8b3c43;
    background: repeating-linear-gradient(-45deg, #fff2f3, #fff2f3 10px, #ffe3e6 10px, #ffe3e6 20px);
    border: 2px solid #e2a1a8;
    border-radius: 9px;
    box-shadow: 0 5px 12px rgba(139,60,67,.08);
}

.fall-ground span, .fall-ground b { font-size: .68rem; letter-spacing: .08em; }

.answer-console {
    z-index: 5;
    padding: 8px 13px 10px;
    background: rgba(255,255,255,.985);
    border-top: 1px solid #dce5ef;
    box-shadow: 0 -10px 35px rgba(43,57,78,.05);
}

.step-progress { display: flex; gap: 6px; margin-bottom: 4px; }
.step-progress span { display: grid; width: 20px; height: 20px; place-items: center; color: #8a96a8; font-size: .7rem; font-weight: 800; background: #f0f3f7; border-radius: 999px; }
.step-progress span.active { color: #fff; background: #2768cc; }
.step-progress span.done { color: #206843; background: #dff4e9; }

.console-copy h1 { margin: 1px 0 5px; color: #101d33; font-size: clamp(1rem,1.5vw,1.28rem); }

.typing-tutor {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 9px;
    align-items: center;
    min-height: 36px;
    padding: 5px 8px;
    margin-bottom: 5px;
    background: #f5f8fc;
    border: 1px solid #dce5f0;
    border-radius: 10px;
}

.typed-letters { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.typed-key {
    display: grid;
    min-width: 23px;
    height: 24px;
    place-items: center;
    padding: 0 6px;
    color: #103f86;
    font-size: .82rem;
    font-weight: 900;
    background: #dbeafe;
    border: 1px solid #9fc2f4;
    border-bottom-width: 3px;
    border-radius: 6px;
    animation: key-pop .08s ease-out both;
}
.typing-empty { color: #9aa5b5; font-size: .78rem; font-style: italic; }

.typing-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.typing-form input { min-width: 0; padding: 8px 11px; color: #17243a; font-size: 1rem; font-weight: 700; background: #fbfcfe; border: 2px solid #b9c7da; border-radius: 10px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.typing-form input:focus { border-color: #2768cc; box-shadow: 0 0 0 4px rgba(39,104,204,.12); }

.typing-form button, .primary-button { padding: 8px 13px; color: #fff; font-size: .82rem; font-weight: 850; letter-spacing: .04em; background: #2868cc; border: 0; border-radius: 10px; box-shadow: 0 7px 17px rgba(40,104,204,.2); }
.typing-form button:hover, .primary-button:hover { background: #1d59b2; }
.typing-form button:disabled { opacity: .6; cursor: wait; }

.shortcut-guide { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; color: #7a8799; font-size: .72rem; }
.feedback { margin-top: 5px; padding: 6px 9px; color: #1f6944; font-size: .78rem; font-weight: 700; background: #eef9f3; border: 1px solid #ccebd9; border-radius: 9px; }
.feedback.is-bad { color: #9c3340; background: #fff1f3; border-color: #f0c7ce; }

.final-accounts-stack {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.ledger-card { display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; min-height: 0; }
.ledger-heading { padding: 7px 10px 6px; border-bottom: 1px solid #e1e7ef; }
.ledger-heading h2 { margin: 2px 0 0; color: #13213a; font-size: clamp(.98rem,1.4vw,1.23rem); }
.ledger-columns { display: grid; min-height: 0; height: auto; }
.two-col, .balance-cols { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ledger-side { display: grid; grid-template-rows: auto minmax(0,1fr); min-width: 0; min-height: 0; }
.ledger-side + .ledger-side { border-left: 1px solid #e0e6ef; }
.ledger-side h3 { margin: 0; padding: 5px 5px; color: #50617b; font-size: .68rem; letter-spacing: .07em; text-align: center; background: #f7f9fc; border-bottom: 1px solid #e2e8f0; }
.ledger-dropzone { min-height: 0; max-height: none; overflow-y: auto; padding: 5px; }
.empty-slot { display: grid; min-height: 38px; place-items: center; padding: 8px; color: #95a0b1; font-size: .69rem; text-align: center; border: 1px dashed #cfd8e4; border-radius: 8px; }
.placed-block { display: grid; gap: 3px; padding: 7px 8px; margin-bottom: 6px; color: #15305d; background: #edf4ff; border: 1px solid #bad2f8; border-radius: 8px; animation: placed-pop .28s ease-out both; }
.placed-block strong { overflow-wrap: anywhere; font-size: .75rem; }
.placed-block span { color: #3e5f92; font-size: .68rem; font-weight: 700; }

.transaction-complete { grid-row: 2 / span 2; display: grid; place-items: center; align-content: center; padding: 32px; text-align: center; }
.transaction-complete h1, .game-over-panel h1 { margin: 8px 0; color: #10203a; font-size: clamp(1.8rem,4vw,3rem); }
.transaction-complete p, .game-over-panel p { max-width: 520px; margin: 0 0 22px; color: #68758a; }
.game-over-panel { max-width: 760px; padding: 50px 30px; margin: 8vh auto 0; text-align: center; }

@keyframes falling-to-ground {
    0% { top: 30px; opacity: .2; transform: translateX(-50%) scale(.96); }
    4% { opacity: 1; transform: translateX(-50%) scale(1); }
    88% { top: calc(100% - 148px); transform: translateX(-50%) rotate(0deg); }
    92% { top: calc(100% - 137px); transform: translateX(-50%) rotate(-1.4deg); }
    96% { top: calc(100% - 137px); transform: translateX(-50%) rotate(1.4deg); }
    100% { top: calc(100% - 137px); opacity: .9; transform: translateX(-50%) rotate(0deg) scale(.985); }
}

@keyframes placed-pop { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes key-pop { from { transform: translateY(2px) scale(.92); } to { transform: translateY(0) scale(1); } }

@media (max-width: 1180px) and (min-width: 901px) {
    .game-board { grid-template-columns: minmax(190px,.62fr) minmax(390px,1.35fr) minmax(300px,.95fr); gap: 7px; }
    .accounts-heading p, .shortcut-guide { font-size: .66rem; }
    .ledger-heading h2 { font-size: .9rem; }
}

@media (max-width: 900px) {
    html, body { height: auto; overflow: auto; }
    .accounting-game-shell { height: auto; min-height: 100vh; overflow: visible; padding: 8px; }
    .game-hud { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .brand-lockup { grid-column: 1 / -1; }
    .game-board { display: grid; grid-template-columns: 1fr; overflow: visible; }
    .accounts-panel { min-height: 210px; max-height: 300px; }
    .play-lane { min-height: 650px; }
    .final-accounts-stack { grid-column: auto; grid-template-columns: 1fr; overflow: visible; }
    .ledger-card { min-height: 200px; }
    .typing-form { grid-template-columns: 1fr; }
    .typing-form button { width: 100%; }
}


/* ===== Patch v3: continuous play, prominent transaction, progressive fall speed ===== */
.transaction-strip {
    position: relative;
    z-index: 7;
    display: grid;
    grid-template-columns: minmax(150px, .38fr) minmax(0, 1.62fr);
    gap: 14px;
    align-items: center;
    min-height: 88px;
    padding: 10px 18px;
    text-align: left;
    background: linear-gradient(135deg, #f7fbff 0%, #ffffff 48%, #eef5ff 100%);
    border-bottom: 2px solid #9fc1f3;
    box-shadow: 0 8px 24px rgba(28, 82, 159, .10);
}

.transaction-label {
    display: grid;
    gap: 4px;
    align-content: center;
    padding-right: 14px;
    border-right: 1px solid #cbdaf0;
}

.transaction-label span {
    color: #205bb0;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.transaction-label em {
    color: #718198;
    font-size: .7rem;
    font-style: normal;
    line-height: 1.3;
}

.transaction-requirement {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.transaction-requirement strong {
    min-width: 0;
    color: #0d1d38;
    font-size: clamp(1.08rem, 1.65vw, 1.45rem);
    font-weight: 850;
    line-height: 1.28;
    text-wrap: balance;
}

.transaction-requirement b {
    flex: 0 0 auto;
    padding: 7px 11px;
    color: #114f9e;
    font-size: clamp(.86rem, 1.1vw, 1rem);
    font-weight: 900;
    white-space: nowrap;
    background: #e7f0ff;
    border: 1px solid #b6cff5;
    border-radius: 999px;
}

/* Make level 1 intentionally slow. Blade reduces --fall-duration by 4s per level:
   L1 42s, L2 38s, L3 34s, L4 30s, L5 26s, L6 22s, L7 18s, L8 14s. */
.falling-block {
    animation-timing-function: linear;
}

.shortcut-guide span:last-child {
    color: #47617f;
    font-weight: 800;
}

@media (max-width: 1180px) and (min-width: 901px) {
    .transaction-strip {
        grid-template-columns: minmax(120px, .34fr) minmax(0, 1.66fr);
        gap: 10px;
        min-height: 78px;
        padding: 8px 12px;
    }
    .transaction-label em { display: none; }
    .transaction-requirement strong { font-size: clamp(1rem, 1.45vw, 1.22rem); }
}

@media (max-width: 900px) {
    .transaction-strip {
        grid-template-columns: 1fr;
        gap: 6px;
        min-height: auto;
        padding: 10px 12px;
        text-align: center;
    }
    .transaction-label {
        padding-right: 0;
        border-right: 0;
    }
    .transaction-label em { display: none; }
    .transaction-requirement {
        display: grid;
        justify-items: center;
        gap: 7px;
    }
}

/* ===== Patch v4: question-led blocks + short success/retry animations ===== */
.transaction-strip {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    min-height: 90px;
    padding: 12px 24px;
    text-align: center;
    background: linear-gradient(135deg, #f7fbff 0%, #ffffff 48%, #eef5ff 100%);
    border-bottom: 2px solid #9fc1f3;
}

.transaction-question {
    width: min(100%, 820px);
    color: #0d1d38;
    font-size: clamp(1.18rem, 1.85vw, 1.58rem);
    font-weight: 900;
    line-height: 1.25;
    text-wrap: balance;
}

.falling-block {
    gap: 9px;
    width: min(78%, 370px);
    padding: 13px 16px;
}

.falling-block > span {
    color: #708099;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.falling-block > strong {
    color: #12366d;
    font-size: clamp(1.18rem, 2.25vw, 1.62rem);
    font-weight: 950;
    line-height: 1.12;
}

.block-context {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.block-context b {
    padding: 5px 9px;
    color: #3f5878;
    font-size: .7rem;
    font-weight: 850;
    background: #f2f6fc;
    border: 1px solid #d7e2f0;
    border-radius: 999px;
}

.console-copy h1 {
    color: #12366d;
    font-size: clamp(1.05rem, 1.7vw, 1.4rem);
}

.try-again-animation {
    position: absolute;
    z-index: 12;
    top: 42%;
    left: 50%;
    display: grid;
    gap: 2px;
    min-width: 210px;
    place-items: center;
    padding: 14px 24px;
    color: #8d4d12;
    text-align: center;
    pointer-events: none;
    background: rgba(255, 248, 225, .97);
    border: 2px solid #f1bd5b;
    border-radius: 18px;
    box-shadow: 0 16px 42px rgba(132, 83, 16, .18);
    transform: translate(-50%, -50%);
}

.try-again-animation > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 950;
    background: #e6a32d;
    border-radius: 999px;
    animation: try-again-spin .65s ease-out both;
}

.try-again-animation > strong {
    font-size: 1.15rem;
    font-weight: 950;
    letter-spacing: .06em;
}

.try-again-animation > small {
    color: #9d6a2e;
    font-size: .72rem;
    font-weight: 700;
}

.try-again-enter,
.try-again-leave {
    transition: opacity .18s ease, transform .18s ease;
}

.try-again-enter-start,
.try-again-leave-end {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.76);
}

.try-again-enter-end,
.try-again-leave-start {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.celebration-stage {
    position: relative;
    z-index: 8;
    grid-row: 2 / span 2;
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(221, 250, 233, .92) 0 19%, rgba(244, 253, 248, .74) 42%, rgba(255,255,255,.25) 72%),
        transparent;
}

.celebration-card {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 5px;
    min-width: min(78%, 330px);
    place-items: center;
    padding: 22px 28px;
    color: #135b3b;
    text-align: center;
    background: rgba(250, 255, 252, .97);
    border: 2px solid #7cd7a3;
    border-radius: 22px;
    box-shadow: 0 22px 55px rgba(29, 125, 75, .19);
    animation: celebration-pop 1.02s ease both;
}

.celebration-check {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #fff;
    font-size: 2rem;
    font-weight: 950;
    background: #24a865;
    border-radius: 999px;
    box-shadow: 0 0 0 10px rgba(36, 168, 101, .10);
    animation: celebration-check .55s cubic-bezier(.2,.9,.2,1.25) both;
}

.celebration-card strong {
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-weight: 950;
    letter-spacing: .06em;
}

.celebration-card small {
    color: #5c7c6a;
    font-size: .82rem;
    font-weight: 750;
}

.celebration-burst {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
}

.celebration-burst i {
    --angle: 0deg;
    --distance: 150px;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 18px;
    background: #34b978;
    border-radius: 3px;
    animation: celebration-confetti .88s cubic-bezier(.2,.75,.25,1) both;
}

.celebration-burst i:nth-child(1) { --angle: 0deg;   --distance: 180px; }
.celebration-burst i:nth-child(2) { --angle: 45deg;  --distance: 160px; background: #e5ac34; }
.celebration-burst i:nth-child(3) { --angle: 90deg;  --distance: 175px; background: #4f87df; }
.celebration-burst i:nth-child(4) { --angle: 135deg; --distance: 155px; background: #da657c; }
.celebration-burst i:nth-child(5) { --angle: 180deg; --distance: 180px; background: #34b978; }
.celebration-burst i:nth-child(6) { --angle: 225deg; --distance: 160px; background: #e5ac34; }
.celebration-burst i:nth-child(7) { --angle: 270deg; --distance: 175px; background: #4f87df; }
.celebration-burst i:nth-child(8) { --angle: 315deg; --distance: 155px; background: #da657c; }

@keyframes try-again-spin {
    0% { transform: rotate(-150deg) scale(.7); opacity: .25; }
    70% { transform: rotate(18deg) scale(1.08); opacity: 1; }
    100% { transform: rotate(0deg) scale(1); opacity: 1; }
}

@keyframes celebration-pop {
    0% { opacity: 0; transform: scale(.72) translateY(12px); }
    28% { opacity: 1; transform: scale(1.05) translateY(0); }
    74% { opacity: 1; transform: scale(1); }
    100% { opacity: .96; transform: scale(.98); }
}

@keyframes celebration-check {
    0% { opacity: 0; transform: scale(.25) rotate(-25deg); }
    70% { opacity: 1; transform: scale(1.14) rotate(4deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes celebration-confetti {
    0% {
        opacity: 0;
        transform: rotate(var(--angle)) translateX(20px) rotate(0deg) scale(.45);
    }
    20% { opacity: 1; }
    100% {
        opacity: 0;
        transform: rotate(var(--angle)) translateX(var(--distance)) rotate(220deg) scale(1);
    }
}

@media (max-width: 1180px) and (min-width: 901px) {
    .transaction-strip {
        grid-template-columns: 1fr;
        min-height: 78px;
        padding: 10px 16px;
    }
    .transaction-question { font-size: clamp(1.02rem, 1.5vw, 1.28rem); }
}

@media (max-width: 900px) {
    .transaction-strip {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 12px;
    }
    .transaction-question { font-size: 1.08rem; }
    .celebration-card { min-width: min(88%, 330px); }
}


/* ===== Answer-result patch: show success/failure + submitted/correct answers ===== */
.result-paused .falling-block {
    animation-play-state: paused !important;
}

.posting-capsules {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
}

.posting-capsules b {
    display: grid;
    min-width: 46px;
    height: 30px;
    padding: 0 10px;
    place-items: center;
    color: #174f99;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .04em;
    background: #eef5ff;
    border: 1px solid #b9cff0;
    border-radius: 999px;
    box-shadow: inset 0 -2px 0 rgba(36, 103, 200, .08);
}

.answer-result-overlay {
    position: absolute;
    z-index: 40;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    pointer-events: none;
    background: rgba(242, 247, 253, .76);
    backdrop-filter: blur(2px);
}

.answer-result-card {
    display: grid;
    gap: 10px;
    width: min(92%, 510px);
    padding: 20px;
    text-align: center;
    background: rgba(255,255,255,.98);
    border: 2px solid #b9c9dc;
    border-radius: 20px;
    box-shadow: 0 24px 65px rgba(23, 48, 82, .22);
    animation: answer-result-pop .45s cubic-bezier(.2,.9,.2,1.15) both;
}

.answer-result-overlay.is-success .answer-result-card {
    border-color: #68c795;
    box-shadow: 0 24px 65px rgba(24, 126, 73, .20);
}

.answer-result-overlay.is-failure .answer-result-card {
    border-color: #efad67;
    box-shadow: 0 24px 65px rgba(174, 94, 25, .20);
    animation: answer-result-shake .48s ease both;
}

.result-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin: 0 auto;
    place-items: center;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 950;
    background: #1da365;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(29,163,101,.24);
}

.is-failure .result-icon {
    background: #e69235;
    box-shadow: 0 8px 20px rgba(230,146,53,.24);
}

.result-title {
    color: #17345f;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 950;
    letter-spacing: .04em;
}

.result-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: left;
}

.result-comparison > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 11px 12px;
    background: #f7f9fc;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
}

.result-comparison > div:first-child {
    background: #fff8f2;
    border-color: #f0d6bd;
}

.is-success .result-comparison > div:first-child {
    background: #f3fbf6;
    border-color: #c4ead4;
}

.result-comparison > div:last-child {
    background: #effaf4;
    border-color: #bce5cd;
}

.result-comparison span {
    color: #728199;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.result-comparison b {
    color: #17345f;
    font-size: .9rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.answer-result-card > small {
    color: #5e708a;
    font-size: .76rem;
    font-weight: 750;
    line-height: 1.4;
}

@keyframes answer-result-pop {
    0% { opacity: 0; transform: translateY(14px) scale(.78); }
    65% { opacity: 1; transform: translateY(0) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes answer-result-shake {
    0% { opacity: 0; transform: scale(.82) translateX(0); }
    35% { opacity: 1; transform: scale(1.02) translateX(-8px); }
    52% { transform: scale(1.02) translateX(7px); }
    70% { transform: scale(1.01) translateX(-4px); }
    100% { opacity: 1; transform: scale(1) translateX(0); }
}

@media (max-width: 720px) {
    .answer-result-card {
        width: min(96%, 430px);
        padding: 15px;
    }

    .result-comparison {
        grid-template-columns: 1fr;
    }

    .posting-capsules b {
        min-width: 42px;
        height: 28px;
    }
}
/* ===== Question-in-block patch: no separate transaction strip, minimal answer bar ===== */
.question-only-lane {
    grid-template-rows: minmax(0, 1fr) auto;
}

.question-only-lane .fall-track {
    grid-row: 1;
}

.question-only-lane .falling-block {
    width: min(86%, 520px);
    gap: 9px;
    padding: 15px 18px 16px;
}

.question-only-lane .falling-block > span {
    margin-bottom: 1px;
}

.block-transaction {
    width: 100%;
    margin: 0;
    padding: 0 4px 10px;
    color: #182944;
    font-size: clamp(.82rem, 1.15vw, 1rem);
    font-weight: 800;
    line-height: 1.32;
    text-align: center;
    text-wrap: balance;
    border-bottom: 1px solid #dbe5f1;
}

.question-only-lane .falling-block > strong {
    padding-top: 1px;
    font-size: clamp(1.16rem, 2vw, 1.55rem);
    line-height: 1.12;
    text-wrap: balance;
}

.minimal-answer-console {
    grid-row: 2;
    padding: 10px 12px 11px;
    background: rgba(255, 255, 255, .99);
    border-top: 1px solid #dce5ef;
    box-shadow: 0 -9px 28px rgba(43, 57, 78, .045);
}

.minimal-answer-console .minimal-typing-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    margin: 0;
}

.minimal-answer-console .minimal-typing-form input {
    min-height: 45px;
    padding: 10px 13px;
    font-size: 1rem;
}

.minimal-answer-console .minimal-typing-form button {
    min-width: 92px;
    min-height: 45px;
    padding: 10px 16px;
}

.minimal-answer-console input:disabled,
.minimal-answer-console button:disabled {
    cursor: wait;
    opacity: .68;
}

/* The result overlay and end-of-transaction celebration should cover the whole middle lane. */
.question-only-lane .celebration-stage {
    grid-row: 1 / -1;
}

/* The question block is taller because it now contains the transaction itself. Stop it above the ground. */
@keyframes falling-to-ground {
    0% {
        top: 30px;
        opacity: .2;
        transform: translateX(-50%) scale(.96);
    }
    4% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    88% {
        top: calc(100% - 220px);
        transform: translateX(-50%) rotate(0deg);
    }
    92% {
        top: calc(100% - 208px);
        transform: translateX(-50%) rotate(-1.4deg);
    }
    96% {
        top: calc(100% - 208px);
        transform: translateX(-50%) rotate(1.4deg);
    }
    100% {
        top: calc(100% - 208px);
        opacity: .9;
        transform: translateX(-50%) rotate(0deg) scale(.985);
    }
}

@media (max-width: 900px) {
    .question-only-lane {
        min-height: 650px;
    }

    .question-only-lane .falling-block {
        width: min(92%, 520px);
    }

    .minimal-answer-console .minimal-typing-form {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .minimal-answer-console .minimal-typing-form button {
        width: auto;
    }
}

@media (max-width: 560px) {
    .minimal-answer-console .minimal-typing-form {
        grid-template-columns: 1fr;
    }

    .minimal-answer-console .minimal-typing-form button {
        width: 100%;
    }
}

/* ===== Non-blocking answer toast + continuous typing patch ===== */
.answer-result-overlay {
    position: absolute !important;
    z-index: 18 !important;
    inset: 12px 12px auto auto !important;
    display: block !important;
    width: min(430px, calc(100% - 24px)) !important;
    padding: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

.answer-result-card {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 5px 10px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    text-align: left !important;
    background: rgba(255, 255, 255, .94) !important;
    border-width: 1px !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(23, 48, 82, .16) !important;
    backdrop-filter: blur(7px);
    animation: answer-toast-in .26s ease-out both !important;
}

.answer-result-overlay.is-success .answer-result-card {
    background: rgba(241, 252, 246, .94) !important;
    border-color: #72c99b !important;
    box-shadow: 0 12px 30px rgba(24, 126, 73, .14) !important;
}

.answer-result-overlay.is-failure .answer-result-card {
    background: rgba(255, 248, 240, .95) !important;
    border-color: #efb273 !important;
    box-shadow: 0 12px 30px rgba(174, 94, 25, .14) !important;
    animation: answer-toast-shake .34s ease-out both !important;
}

.answer-result-card .result-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    align-self: start;
    font-size: 1.15rem !important;
    box-shadow: none !important;
}

.answer-result-card .result-title,
.answer-result-card .result-comparison,
.answer-result-card > small {
    grid-column: 2 !important;
}

.answer-result-card .result-title {
    font-size: .95rem !important;
    line-height: 1.15 !important;
}

.answer-result-card .result-comparison {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
}

.answer-result-card .result-comparison > div {
    gap: 2px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
}

.answer-result-card .result-comparison span {
    font-size: .52rem !important;
}

.answer-result-card .result-comparison b {
    font-size: .74rem !important;
}

.answer-result-card > small {
    font-size: .67rem !important;
    line-height: 1.3 !important;
}

/* The toast is informational only. The new question, falling timer and textbox stay live. */
.result-paused .falling-block {
    animation-play-state: running !important;
}

.minimal-answer-console input,
.minimal-answer-console button {
    opacity: 1;
}

@keyframes answer-toast-in {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes answer-toast-shake {
    0%   { opacity: 0; transform: translateY(-8px) translateX(0); }
    45%  { opacity: 1; transform: translateY(0) translateX(-4px); }
    70%  { transform: translateY(0) translateX(3px); }
    100% { opacity: 1; transform: translateY(0) translateX(0); }
}

@media (max-width: 720px) {
    .answer-result-overlay {
        inset: 8px 8px auto 8px !important;
        width: auto !important;
    }

    .answer-result-card .result-comparison {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* ===== Full-height board + bottom-left stats patch ===== */
.accounting-game-shell {
    padding: 8px 10px;
}

/* No top HUD: the 3-column board now owns the entire usable viewport. */
.game-board {
    flex: 1 1 100%;
    height: 100%;
    min-height: 0;
    margin-top: 0;
}

/* Account Finder occupies the complete left column, with status cards anchored at the bottom. */
.accounts-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
}

.accounts-list {
    min-height: 0;
}

.sidebar-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 9px;
    background: linear-gradient(180deg, rgba(247,250,253,.96), #fff);
    border-top: 1px solid #dfe6ef;
}

.sidebar-stat {
    display: grid;
    min-width: 0;
    min-height: 58px;
    place-items: center;
    align-content: center;
    padding: 7px 6px;
    text-align: center;
    background: #fff;
    border: 1px solid #d6dee9;
    border-radius: 11px;
    box-shadow: 0 5px 14px rgba(37,55,81,.055);
}

.sidebar-stat span {
    color: #627087;
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .11em;
}

.sidebar-stat strong {
    margin-top: 3px;
    color: #17233a;
    font-size: 1.05rem;
    line-height: 1;
}

.sidebar-stat .lives {
    color: #d93b4a;
    font-size: .96rem;
    letter-spacing: .06em;
}

.play-lane,
.final-accounts-stack,
.accounts-panel {
    height: 100%;
}

@media (max-width: 900px) {
    .game-board {
        height: auto;
    }

    .accounts-panel {
        height: auto;
        max-height: none;
    }

    .sidebar-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sidebar-stat {
        min-height: 52px;
    }
}

@media (max-width: 560px) {
    .sidebar-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== Journal-entry falling block patch ===== */
.journal-play-lane {
    grid-template-rows: minmax(0, 1fr) !important;
}

.journal-fall-track {
    height: 100%;
    min-height: 0;
}

.journal-falling-block {
    top: 34px;
    width: min(94%, 720px) !important;
    max-height: calc(100% - 82px);
    padding: 0 !important;
    text-align: left !important;
    overflow: auto;
    background: rgba(255,255,255,.985) !important;
    border: 2px solid #2469d8 !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 34px rgba(31, 87, 174, .18) !important;
    animation-name: journal-falling-to-ground !important;
    animation-duration: var(--fall-duration, 52s) !important;
    animation-timing-function: linear !important;
    animation-fill-mode: forwards !important;
    will-change: top, transform;
}

.journal-entry-form {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.journal-question-block {
    display: grid;
    gap: 4px;
    padding: 4px 3px 9px;
    border-bottom: 2px solid #d7e3f5;
}

.journal-question-block > span {
    color: #687a94;
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .12em;
}

.journal-question-block > strong {
    color: #10213d;
    font-size: clamp(.95rem, 1.45vw, 1.18rem) !important;
    font-weight: 900;
    line-height: 1.28;
    text-wrap: balance;
}

.journal-question-block > small {
    color: #63738b;
    font-size: .68rem;
    line-height: 1.3;
}

.journal-sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(92px, .3fr) minmax(92px, .3fr);
    overflow: hidden;
    border: 1px solid #b9c8dc;
    border-radius: 10px;
    background: #fff;
}

.journal-head {
    padding: 6px 7px;
    color: #fff;
    font-size: .64rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-align: center;
    background: #0ca653;
    border-right: 1px solid rgba(255,255,255,.38);
}

.journal-head:last-of-type { border-right: 0; }
.journal-particular-head { text-align: left; }

.journal-section-label {
    grid-column: 1 / -1;
    padding: 5px 8px;
    color: #315078;
    font-size: .58rem;
    font-weight: 950;
    letter-spacing: .11em;
    background: #edf4fd;
    border-top: 1px solid #cbd8e9;
    border-bottom: 1px solid #d9e3ef;
}

.journal-credit-label {
    color: #6f4a2a;
    background: #fff7ed;
}

.journal-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(92px, .3fr) minmax(92px, .3fr);
    min-width: 0;
    border-bottom: 1px solid #dce4ee;
}

.journal-row:last-child { border-bottom: 0; }

.journal-particular-cell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    min-width: 0;
    padding: 5px 6px;
    border-right: 1px solid #dce4ee;
}

.journal-side-tag,
.journal-to-tag {
    min-width: 25px;
    color: #214f90;
    font-size: .68rem;
    font-weight: 950;
    text-align: center;
}

.journal-to-tag {
    min-width: 30px;
    color: #8a5728;
}

.journal-credit-particular {
    padding-left: 18px;
}

.journal-input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 5px 8px;
    color: #10213a;
    font-size: .78rem;
    font-weight: 800;
    background: #fbfdff;
    border: 1.5px solid #b9c7d9;
    border-radius: 7px;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.journal-input:focus {
    background: #fff;
    border-color: #2469d8;
    box-shadow: 0 0 0 3px rgba(36,105,216,.12);
}

.journal-input.is-wrong {
    color: #8c2632;
    background: #fff2f4;
    border-color: #e56d79;
    box-shadow: 0 0 0 2px rgba(229,109,121,.1);
}

.journal-amount-input {
    align-self: center;
    width: calc(100% - 10px);
    margin: 5px;
    text-align: right;
}

.journal-empty-credit,
.journal-empty-debit {
    display: grid;
    place-items: center;
    color: #c0c9d5;
    font-size: .72rem;
    background: #fafbfd;
}

.journal-empty-debit { border-right: 1px solid #dce4ee; }

.journal-action-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.journal-action-row small {
    color: #6b7890;
    font-size: .64rem;
    line-height: 1.25;
}

.journal-action-row button {
    flex: 0 0 auto;
    padding: 8px 12px;
    color: #fff;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .04em;
    background: #2368d1;
    border: 0;
    border-radius: 9px;
    box-shadow: 0 7px 16px rgba(35,104,209,.2);
}

.journal-action-row button:hover { background: #1858b7; }
.journal-action-row button:disabled { opacity: .6; }

.journal-result-card {
    grid-template-columns: 38px minmax(0,1fr) !important;
}

.journal-result-comparison {
    grid-template-columns: 1fr 1fr !important;
}

.journal-result-text,
.journal-result-detail {
    white-space: pre-line;
}

.journal-result-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1.35;
}

.journal-result-detail {
    max-height: 78px;
    overflow: auto;
}

@keyframes journal-falling-to-ground {
    0% {
        top: 34px;
        opacity: .25;
        transform: translateX(-50%) scale(.985);
    }
    3% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    90% {
        top: max(42px, calc(100% - var(--journal-block-height, 292px) - 55px));
        transform: translateX(-50%) rotate(0deg);
    }
    94% {
        top: max(42px, calc(100% - var(--journal-block-height, 292px) - 48px));
        transform: translateX(-50%) rotate(-.7deg);
    }
    97% {
        top: max(42px, calc(100% - var(--journal-block-height, 292px) - 48px));
        transform: translateX(-50%) rotate(.7deg);
    }
    100% {
        top: max(42px, calc(100% - var(--journal-block-height, 292px) - 48px));
        opacity: .92;
        transform: translateX(-50%) rotate(0deg) scale(.992);
    }
}

@media (max-width: 1180px) and (min-width: 901px) {
    .journal-falling-block { width: min(96%, 650px) !important; }
    .journal-sheet,
    .journal-row {
        grid-template-columns: minmax(0,1fr) minmax(82px,.28fr) minmax(82px,.28fr);
    }
    .journal-input { font-size: .72rem; }
}

@media (max-width: 900px) {
    .journal-play-lane { min-height: 760px !important; }
    .journal-falling-block {
        width: min(96%, 680px) !important;
        max-height: calc(100% - 86px);
    }
    .journal-fall-track { min-height: 740px; }
}

@media (max-width: 620px) {
    .journal-sheet,
    .journal-row {
        grid-template-columns: minmax(0,1fr) 82px 82px;
    }
    .journal-credit-particular { padding-left: 8px; }
    .journal-side-tag, .journal-to-tag { display: none; }
    .journal-particular-cell { grid-template-columns: 1fr; }
    .journal-input { font-size: .68rem; padding: 5px; }
    .journal-action-row { align-items: stretch; flex-direction: column; }
    .journal-action-row button { width: 100%; }
    .journal-result-comparison { grid-template-columns: 1fr !important; }
}



/* ===== Game startup / Alpine HTML-safety hotfix ===== */
[x-cloak] { display: none !important; }
.journal-fall-track .journal-falling-block {
    display: block !important;
    visibility: visible !important;
    animation-iteration-count: 1 !important;
}
/* ===== Timer status bar patch: replaces ground/crash presentation ===== */
.journal-timed-track {
    padding-bottom: 78px;
}

.journal-timed-track::after {
    display: none !important;
}

.journal-timed-track .journal-falling-block {
    max-height: calc(100% - 124px) !important;
    animation-name: journal-timed-descent !important;
    animation-duration: var(--fall-duration, 52s) !important;
    animation-timing-function: linear !important;
    animation-fill-mode: forwards !important;
}

@keyframes journal-timed-descent {
    from {
        top: 34px;
        transform: translateX(-50%);
    }
    to {
        top: max(42px, calc(100% - var(--journal-block-height, 292px) - 105px));
        transform: translateX(-50%);
    }
}

.journal-time-status {
    position: absolute;
    z-index: 8;
    right: 22px;
    bottom: 15px;
    left: 22px;
    padding: 10px 12px 11px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid #d7e1ed;
    border-radius: 12px;
    box-shadow: 0 7px 22px rgba(23, 49, 82, .10);
    backdrop-filter: blur(6px);
}

.journal-time-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    color: #43546d;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.journal-time-heading strong {
    min-width: 58px;
    color: #173f75;
    font-size: .78rem;
    text-align: right;
}

.journal-time-bar {
    height: 12px;
    overflow: hidden;
    background: #e8eef6;
    border: 1px solid #d6e0ec;
    border-radius: 999px;
}

.journal-time-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #1fa86a, #35bd79);
    border-radius: inherit;
    transition: width .10s linear, background .2s ease;
}

.journal-time-fill.is-warning {
    background: linear-gradient(90deg, #e6a11d, #f1b640);
}

.journal-time-fill.is-danger {
    background: linear-gradient(90deg, #d94343, #ef6262);
}

@media (max-width: 900px) {
    .journal-time-status {
        right: 12px;
        bottom: 10px;
        left: 12px;
    }
}


/* ===== Fixed journal block: timer runs, card does not fall ===== */
.journal-timed-track .journal-falling-block,
.journal-fall-track .journal-falling-block {
    top: clamp(105px, 20vh, 190px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
}

/* The time bar remains live at the bottom; only the journal card is stationary. */
.journal-timed-track .journal-falling-block:hover,
.journal-timed-track .journal-falling-block:focus-within {
    transform: translateX(-50%) !important;
}

@media (max-width: 900px) {
    .journal-timed-track .journal-falling-block,
    .journal-fall-track .journal-falling-block {
        top: 72px !important;
    }
}
/* ===== End fixed journal block ===== */

/* ===== BEGIN COMPACT STACK PATCH ===== */

/*
 * Static/compact game layout:
 * - Account Finder content and status cards stack together.
 * - Result, journal entry and timer stack vertically.
 * - Removes the artificial falling-lane whitespace.
 */

/* ---------- LEFT COLUMN ---------- */

@media (min-width: 901px) {
    .accounts-panel {
        display: flex !important;
        flex-direction: column !important;

        /* Do not stretch the panel just to fill the screen. */
        height: auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
        align-self: start !important;
    }

    .accounts-heading {
        flex: 0 0 auto;
    }

    .accounts-list {
        flex: 0 1 auto !important;
        min-height: 0 !important;

        /*
         * When many matching accounts appear they scroll,
         * but when only the helper is visible the stats sit
         * immediately below it instead of at screen bottom.
         */
        max-height: calc(100dvh - 300px);
        overflow-y: auto !important;
    }

    .sidebar-stats {
        flex: 0 0 auto !important;
        margin-top: 0 !important;
    }
}


/* ---------- MIDDLE COLUMN ---------- */

/* The middle card now sizes to its actual contents. */
.journal-play-lane {
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-self: start !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/*
 * Put the correct/wrong answer notification into normal document flow.
 * When Alpine hides it, it takes no space.
 */
.journal-play-lane > .answer-result-overlay {
    position: relative !important;

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

    width: min(94%, 720px) !important;
    margin: 8px auto 0 !important;

    background: transparent !important;
    backdrop-filter: none !important;
}


/* Main journal area becomes a normal vertical stack. */
.journal-fall-track,
.journal-timed-track {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;

    height: auto !important;
    min-height: 0 !important;

    padding: 8px 10px 10px !important;

    overflow: visible !important;
}


/* Remove reserved bottom space formerly needed by absolute timer. */
.journal-timed-track {
    padding-bottom: 10px !important;
}


/* Remove the decorative vertical falling line. */
.journal-fall-track::before,
.journal-timed-track::before {
    display: none !important;
}


/* Small instruction pill stays directly above the question. */
.journal-fall-track .fall-guide {
    position: relative !important;

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

    align-self: center !important;

    margin: 0 auto !important;

    transform: none !important;
}


/*
 * The journal card is no longer absolutely positioned.
 * This removes the large blank area above and below it.
 */
.journal-fall-track .journal-falling-block,
.journal-timed-track .journal-falling-block {
    position: relative !important;

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

    flex: 0 0 auto !important;

    width: min(94%, 720px) !important;
    max-height: none !important;

    margin: 0 auto !important;

    overflow: visible !important;

    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
}


/* Prevent the older hover rule from restoring translateX(-50%). */
.journal-timed-track .journal-falling-block:hover,
.journal-timed-track .journal-falling-block:focus-within,
.journal-fall-track .journal-falling-block:hover,
.journal-fall-track .journal-falling-block:focus-within {
    transform: none !important;
}


/*
 * Timer follows immediately after the journal card instead
 * of being pinned to the bottom of the full-height lane.
 */
.journal-fall-track .journal-time-status,
.journal-timed-track .journal-time-status {
    position: relative !important;

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

    flex: 0 0 auto !important;

    width: min(94%, 720px) !important;

    margin: 0 auto !important;
}


/* ---------- MOBILE ---------- */

@media (max-width: 900px) {
    .journal-play-lane {
        min-height: 0 !important;
        height: auto !important;
    }

    .journal-fall-track,
    .journal-timed-track {
        min-height: 0 !important;
        height: auto !important;
    }

    .journal-fall-track .journal-falling-block,
    .journal-timed-track .journal-falling-block,
    .journal-fall-track .journal-time-status,
    .journal-timed-track .journal-time-status {
        width: 96% !important;
    }

    .accounts-panel {
        height: auto !important;
    }
}

/* ===== END COMPACT STACK PATCH ===== */

/* ===== BEGIN POSTING TAG + AUTO BALANCE PATCH ===== */

/*
 * PARTICULARS:
 *
 * [ T / P/L / BS ] [ Dr / To ] [ Account textbox ]
 */
.journal-particular-cell {
    grid-template-columns:
        34px
        auto
        minmax(0, 1fr) !important;
}


/* Posting destination badge */
.journal-post-tag {
    display: inline-grid;
    place-items: center;

    min-width: 30px;
    height: 26px;
    padding: 0 4px;

    color: #173b6e;

    font-size: .61rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .02em;

    background: #eaf2ff;

    border: 1px solid #a9c4ee;
    border-radius: 6px;

    white-space: nowrap;
}


/*
 * Automatic final Amount field.
 * Green appearance makes it clear that the game filled it.
 */
.journal-amount-input.is-auto-balance {
    color: #0b5b35 !important;
    background: #eefaf4 !important;
    border-color: #8bcdae !important;

    font-weight: 900;
    cursor: default;
}

.journal-amount-input.is-auto-balance:focus {
    background: #eefaf4 !important;
    border-color: #8bcdae !important;
    box-shadow: none !important;
}


/*
 * On small screens Dr/To is already hidden by the existing CSS,
 * so retain the posting badge beside the account textbox.
 */
@media (max-width: 620px) {
    .journal-particular-cell {
        grid-template-columns:
            32px
            minmax(0, 1fr) !important;
    }

    .journal-post-tag {
        min-width: 28px;
        padding: 0 3px;
        font-size: .57rem;
    }
}

/* ===== END POSTING TAG + AUTO BALANCE PATCH ===== */

/* ===== BEGIN LEARNING POSTING INPUT V2 ===== */

/*
 * The player now types the final-account posting destination.
 * Visual position stays where the old T / P/L / BS answer badge was.
 * Keyboard order is Account -> Amount -> Posting.
 */
.journal-particular-cell {
    grid-template-columns: 48px auto minmax(0, 1fr) !important;
}

.journal-post-input {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding: 0 4px !important;
    text-align: center !important;
    text-transform: uppercase;
    font-size: .70rem !important;
    font-weight: 900 !important;
    letter-spacing: .01em;
    color: #173b6e;
    background: #fff !important;
    border-color: #9db8df !important;
}

.journal-post-input::placeholder {
    text-transform: none;
    font-size: .58rem;
    font-weight: 700;
    color: #7b8da8;
    opacity: 1;
}

.journal-post-input:focus {
    border-color: #2f72df !important;
    box-shadow: 0 0 0 2px rgba(47, 114, 223, .13) !important;
}

.journal-post-input.is-wrong {
    border-color: #dc3545 !important;
    background: #fff1f2 !important;
}

@media (max-width: 620px) {
    .journal-particular-cell {
        grid-template-columns: 44px minmax(0, 1fr) !important;
    }

    .journal-post-input {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }
}

/* ===== END LEARNING POSTING INPUT V2 ===== */

/* ===== BEGIN LEARNING LAYOUT V3 ===== */

/*
 * Normal top state: Score / Level / Lives / Combo above the question.
 * Feedback replaces this row only while feedback is active.
 */
.accounts-panel {
    grid-template-rows: auto minmax(0, 1fr) !important;
}

.journal-stats {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    width: min(94%, 720px);
    margin: 8px auto 0;
    padding: 0;
}

.journal-stats .sidebar-stat {
    min-height: 56px;
    padding: 6px 5px;
}

.journal-stats .sidebar-stat span {
    font-size: .57rem;
}

.journal-stats .sidebar-stat strong {
    font-size: 1rem;
}

/*
 * Important: an older toast rule used display:block !important,
 * which overrode Alpine x-show. Respect Alpine's hidden state.
 */
.journal-play-lane > .answer-result-overlay[style*="display: none"] {
    display: none !important;
}

.journal-play-lane > .answer-result-overlay {
    flex: 0 0 auto;
    width: min(94%, 720px) !important;
    margin: 8px auto 0 !important;
}

/* Journal gets a fourth, narrow POST column on the far right. */
.journal-sheet,
.journal-row {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(88px, .28fr)
        minmax(88px, .28fr)
        62px !important;
}

.journal-post-head {
    padding-inline: 3px;
    font-size: .55rem;
    letter-spacing: .04em;
}

/* Posting is no longer inside PARTICULARS. */
.journal-particular-cell {
    grid-template-columns: auto minmax(0, 1fr) !important;
}

.journal-post-cell {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 4px;
    background: #fbfcfe;
    border-left: 1px solid #dce4ee;
}

.journal-post-cell .journal-post-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    text-align: center !important;
    font-size: .67rem !important;
}

.journal-post-cell .journal-post-input::placeholder {
    font-size: .54rem;
}

@media (max-width: 1180px) and (min-width: 901px) {
    .journal-sheet,
    .journal-row {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(78px, .27fr)
            minmax(78px, .27fr)
            58px !important;
    }
}

@media (max-width: 620px) {
    .journal-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journal-sheet,
    .journal-row {
        grid-template-columns: minmax(0, 1fr) 76px 76px 54px !important;
    }

    .journal-particular-cell {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .journal-post-cell {
        padding: 3px;
    }

    .journal-post-cell .journal-post-input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 1px !important;
        font-size: .62rem !important;
    }
}

/* ===== END LEARNING LAYOUT V3 ===== */

/* ===== BEGIN INLINE ACCOUNT FINDER V4 ===== */

/*
 * The old left Account Finder panel is gone.
 * Desktop now uses the available width for the journal + final accounts.
 */
@media (min-width: 901px) {
    .game-board {
        grid-template-columns: minmax(560px, 1.58fr) minmax(360px, 1fr) !important;
        gap: 10px !important;
        max-width: 1500px !important;
    }

    .journal-play-lane {
        grid-column: 1 !important;
    }

    .final-accounts-stack {
        grid-column: 2 !important;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .game-board {
        grid-template-columns: minmax(500px, 1.5fr) minmax(310px, .95fr) !important;
    }
}

/* The account input owns a small reference dropdown immediately below it. */
.journal-account-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
}

.journal-account-wrap:focus-within {
    z-index: 80;
}

.journal-account-wrap > .journal-account-input {
    width: 100% !important;
    min-width: 0 !important;
}

.journal-inline-matches {
    position: absolute;
    z-index: 90;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    max-height: 188px;
    overflow-y: auto;
    padding: 5px;
    background: rgba(255, 255, 255, .99);
    border: 1px solid #b9c9df;
    border-radius: 9px;
    box-shadow: 0 12px 28px rgba(32, 67, 113, .18);
    scrollbar-width: thin;
}

.journal-inline-account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 31px;
    padding: 6px 7px;
    margin: 0 0 4px;
    color: #34445d;
    font-size: .76rem;
    font-weight: 750;
    line-height: 1.2;
    background: #f8fafc;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
}

.journal-inline-account:last-child {
    margin-bottom: 0;
}

/*
 * The old sheet used overflow:hidden for rounded corners, which would clip
 * a dropdown positioned under an account input. Keep the outline rounded,
 * but allow the active reference list to extend over the row below.
 */
.journal-sheet {
    overflow: visible !important;
}

.journal-particular-head {
    border-radius: 9px 0 0 0;
}

.journal-post-head {
    border-radius: 0 9px 0 0;
}

/* Keep the dropdown usable inside the compact journal card. */
.journal-falling-block,
.journal-entry-form,
.journal-row,
.journal-particular-cell {
    overflow: visible;
}

@media (max-width: 620px) {
    .journal-inline-matches {
        min-width: 210px;
        max-height: 160px;
    }

    .journal-inline-account {
        font-size: .70rem;
    }
}

/* ===== END INLINE ACCOUNT FINDER V4 ===== */

/* ===== BEGIN FOCUS PREVIEW SHARE V5 ===== */

/* Permanent final-account side column removed: the journal now owns the board. */
.game-board {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 1180px !important;
    gap: 0 !important;
}

.journal-play-lane {
    grid-column: 1 !important;
    width: 100% !important;
}

/* Give the learning journal more usable horizontal room. */
.journal-stats,
.journal-play-lane > .answer-result-overlay,
.journal-fall-track .journal-falling-block,
.journal-timed-track .journal-falling-block,
.journal-fall-track .journal-time-status,
.journal-timed-track .journal-time-status {
    width: min(96%, 980px) !important;
}

/* Question actions: eye preview + share. */
.journal-question-block {
    position: relative;
}

.journal-question-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.journal-question-topline > span {
    color: #687a94;
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .12em;
}

.journal-question-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.question-share-wrap {
    position: relative;
}

.question-tool-button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    color: #315b93;
    background: #f7faff;
    border: 1px solid #b9cae2;
    border-radius: 9px;
    box-shadow: 0 4px 12px rgba(39, 82, 139, .08);
}

.question-tool-button:hover,
.question-tool-button:focus-visible {
    color: #164f9c;
    background: #edf5ff;
    border-color: #7fa7dd;
    outline: none;
}

.question-tool-button svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.game-share-menu {
    position: absolute;
    z-index: 170;
    top: calc(100% + 7px);
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(112px, 1fr));
    gap: 6px;
    width: 260px;
    padding: 9px;
    background: rgba(255, 255, 255, .99);
    border: 1px solid #c9d6e6;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(28, 54, 89, .20);
}

.game-share-menu > strong {
    grid-column: 1 / -1;
    padding: 2px 3px 5px;
    color: #203858;
    font-size: .72rem;
}

.game-share-menu button {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 8px;
    color: #2e415d;
    font-size: .7rem;
    font-weight: 800;
    text-align: left;
    background: #f8fafc;
    border: 1px solid #e0e7f0;
    border-radius: 8px;
}

.game-share-menu button:hover {
    background: #eef5ff;
    border-color: #b9cde8;
}

.game-share-menu button span {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    flex: 0 0 auto;
    color: #244d85;
    font-size: .66rem;
    font-weight: 950;
    background: #e7f0fd;
    border-radius: 6px;
}

.game-share-notice {
    position: absolute;
    z-index: 171;
    top: 39px;
    right: 0;
    max-width: 280px;
    padding: 7px 9px;
    color: #245d3d;
    font-size: .66rem;
    font-weight: 750;
    background: #eefaf3;
    border: 1px solid #b9e3ca;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(33, 79, 53, .10);
}

/* Eye preview opens all three final accounts only when requested. */
.posting-preview-backdrop {
    position: fixed;
    z-index: 300;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(20, 34, 54, .46);
    backdrop-filter: blur(3px);
}

.posting-preview-dialog {
    width: min(1120px, 96vw);
    max-height: 90vh;
    overflow: auto;
    padding: 12px;
    background: #f7faff;
    border: 1px solid #c5d4e7;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(17, 39, 68, .30);
}

.posting-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 6px 12px;
}

.posting-preview-header span {
    color: #6c7d95;
    font-size: .61rem;
    font-weight: 950;
    letter-spacing: .12em;
}

.posting-preview-header h2 {
    margin: 3px 0 3px;
    color: #132542;
    font-size: 1.16rem;
}

.posting-preview-header p {
    margin: 0;
    color: #65758d;
    font-size: .74rem;
}

.posting-preview-header > button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    color: #455b78;
    font-size: 1.25rem;
    line-height: 1;
    background: #fff;
    border: 1px solid #ccd8e7;
    border-radius: 9px;
}

.posting-preview-ledgers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.preview-ledger-card {
    min-height: 260px;
    box-shadow: 0 8px 24px rgba(34, 57, 88, .08);
}

.preview-ledger-card .ledger-dropzone {
    min-height: 150px;
    max-height: 300px;
}

/* The current-question answer preview should look instructional, not permanent. */
.preview-ledger-card .placed-block {
    border-width: 2px;
}

@media (max-width: 900px) {
    .game-board {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }

    .journal-stats,
    .journal-play-lane > .answer-result-overlay,
    .journal-fall-track .journal-falling-block,
    .journal-timed-track .journal-falling-block,
    .journal-fall-track .journal-time-status,
    .journal-timed-track .journal-time-status {
        width: 98% !important;
    }

    .posting-preview-ledgers {
        grid-template-columns: 1fr;
    }

    .preview-ledger-card {
        min-height: 220px;
    }
}

@media (max-width: 520px) {
    .game-share-menu {
        right: -4px;
        grid-template-columns: 1fr;
        width: 190px;
    }

    .question-tool-button {
        width: 31px;
        height: 31px;
    }
}

/* ===== END FOCUS PREVIEW SHARE V5 ===== */

/* ===== BEGIN GAME FLOW + GAME OVER SHARE V6 ===== */

/* One eye tool remains on the play screen; sharing is reserved for Game Over. */
.journal-question-tools {
    min-width: 34px;
}

/* Make the submit button the natural destination after the last POST field. */
.journal-action-row [data-check-entry]:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .24);
    outline-offset: 3px;
}

/* Game-over result card: strong replay motivation + factual run statistics. */
.game-over-panel.game-over-results {
    position: relative;
    width: min(900px, calc(100% - 28px));
    max-width: 900px;
    margin: 5vh auto 0;
    padding: 34px;
    text-align: left;
    overflow: visible;
}

.game-over-hero {
    text-align: center;
}

.game-over-results .game-over-message {
    max-width: 680px;
    margin: 8px auto 24px;
    color: #617087;
    font-size: .92rem;
    line-height: 1.55;
}

.game-over-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0 20px;
}

.game-over-stat {
    min-width: 0;
    padding: 16px 12px;
    text-align: center;
    background: #f8fbff;
    border: 1px solid #d4dfed;
    border-radius: 13px;
    box-shadow: 0 6px 18px rgba(31, 63, 103, .06);
}

.game-over-stat span {
    display: block;
    margin-bottom: 6px;
    color: #687990;
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.game-over-stat strong {
    color: #102744;
    font-size: 1.42rem;
    line-height: 1;
}

.game-over-stat strong small {
    margin-left: 2px;
    color: #708097;
    font-size: .68rem;
    font-weight: 800;
}

.game-over-progress {
    padding: 12px 14px 14px;
    background: #fbfcfe;
    border: 1px solid #d8e1ec;
    border-radius: 12px;
}

.game-over-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: #5d6f88;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.game-over-progress-heading strong {
    color: #173b69;
    font-size: .76rem;
}

.game-over-progress-track {
    height: 10px;
    overflow: hidden;
    background: #e6edf6;
    border-radius: 999px;
}

.game-over-progress-track > span {
    display: block;
    height: 100%;
    background: #27ae6f;
    border-radius: inherit;
}

.game-over-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.game-over-actions .primary-button,
.game-over-share-button {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .03em;
}

.game-over-share-wrap {
    position: relative;
}

.game-over-share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #1f4f88;
    background: #f5f9ff;
    border: 1px solid #9ebbe0;
}

.game-over-share-button:hover,
.game-over-share-button:focus-visible {
    background: #eaf3ff;
    border-color: #6894ca;
    outline: none;
}

.game-over-share-button svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.game-over-share-wrap .game-share-menu {
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
}

.game-over-results .game-over-share-notice {
    position: static;
    width: fit-content;
    max-width: min(100%, 420px);
    margin: 12px auto 0;
    text-align: center;
}

@media (max-width: 720px) {
    .game-over-panel.game-over-results {
        width: min(96%, 900px);
        margin-top: 3vh;
        padding: 24px 16px;
    }

    .game-over-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .game-over-stats {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .game-over-stat {
        padding: 13px 8px;
    }

    .game-over-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .game-over-share-wrap,
    .game-over-share-button,
    .game-over-actions .primary-button {
        width: 100%;
    }

    .game-over-share-wrap .game-share-menu {
        right: 0;
        left: 0;
        width: 100%;
    }
}

/* ===== END GAME FLOW + GAME OVER SHARE V6 ===== */

/* ===== BEGIN EXPLANATION + FLAG + EARLY EXIT V7 ===== */

/* Four compact question controls: flag, explanation, posting preview and exit. */
.journal-question-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.question-tool-button,
.question-exit-button {
    flex: 0 0 auto;
}

.question-flag-button:hover,
.question-flag-button:focus-visible {
    color: #b42318;
    background: #fff3f1;
    border-color: #f0aaa3;
}

.question-flag-button.is-flagged,
.question-flag-button:disabled {
    color: #9a3412;
    background: #fff7ed;
    border-color: #fdba74;
    opacity: 1;
    cursor: default;
}

.question-explanation-button:hover,
.question-explanation-button:focus-visible {
    color: #175cd3;
    background: #eff8ff;
    border-color: #84adff;
}

.question-exit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 32px;
    padding: 5px 9px;
    color: #7a271a;
    background: #fff7f5;
    border: 1px solid #f4b8ad;
    border-radius: 9px;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .05em;
}

.question-exit-button:hover,
.question-exit-button:focus-visible {
    color: #912018;
    background: #fee4e2;
    border-color: #fda29b;
    outline: none;
}

.question-exit-button svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.question-flag-notice {
    width: fit-content;
    max-width: 100%;
    margin: 3px 0 6px auto;
    padding: 5px 9px;
    color: #7a2e0e;
    background: #fff8eb;
    border: 1px solid #f5c56d;
    border-radius: 8px;
    font-size: .66rem;
    font-weight: 800;
}

/* Explanation modal. */
.question-explanation-backdrop {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 31, 52, .48);
    backdrop-filter: blur(3px);
}

.question-explanation-dialog {
    width: min(760px, 96vw);
    max-height: min(82vh, 760px);
    overflow: auto;
    background: #fff;
    border: 1px solid #cbd8e8;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(20, 45, 78, .24);
}

.question-explanation-header {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 15px;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid #dce5ef;
}

.question-explanation-header span {
    display: block;
    margin-bottom: 4px;
    color: #2f6eb5;
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .09em;
}

.question-explanation-header h2 {
    margin: 0;
    color: #102744;
    font-size: 1.15rem;
}

.question-explanation-header p {
    margin: 5px 0 0;
    color: #617087;
    font-size: .76rem;
    line-height: 1.45;
}

.question-explanation-header > button {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    color: #4a5f79;
    background: #f6f9fc;
    border: 1px solid #d3deeb;
    border-radius: 9px;
    font-size: 1.3rem;
    line-height: 1;
}

.question-explanation-copy {
    padding: 18px 20px 6px;
    color: #344762;
    white-space: pre-line;
    font-size: .83rem;
    line-height: 1.65;
}

.question-explanation-journal {
    margin: 12px 20px 20px;
    overflow: hidden;
    border: 1px solid #d7e1ec;
    border-radius: 12px;
}

.question-explanation-journal h3 {
    margin: 0;
    padding: 10px 12px;
    color: #27415f;
    background: #f5f8fc;
    border-bottom: 1px solid #d7e1ec;
    font-size: .72rem;
    letter-spacing: .03em;
}

.explanation-journal-line {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 120px 46px;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid #e6edf5;
    font-size: .75rem;
}

.explanation-journal-line:last-child {
    border-bottom: 0;
}

.explanation-journal-line > span {
    color: #5c708b;
    font-weight: 900;
}

.explanation-journal-line > strong {
    min-width: 0;
    color: #183653;
}

.explanation-journal-line > b {
    color: #183653;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.explanation-journal-line > em {
    justify-self: end;
    min-width: 38px;
    padding: 4px 6px;
    color: #155a3c;
    background: #edf9f3;
    border: 1px solid #a9d9bf;
    border-radius: 6px;
    text-align: center;
    font-style: normal;
    font-weight: 950;
}

@media (max-width: 640px) {
    .journal-question-topline {
        align-items: flex-start;
    }

    .journal-question-tools {
        flex-wrap: wrap;
        gap: 4px;
    }

    .question-exit-button span {
        display: none;
    }

    .question-exit-button {
        width: 32px;
        padding: 5px;
    }

    .question-explanation-backdrop {
        padding: 10px;
    }

    .question-explanation-dialog {
        width: 100%;
        max-height: 90vh;
        border-radius: 14px;
    }

    .explanation-journal-line {
        grid-template-columns: 34px minmax(0, 1fr) auto 42px;
        gap: 5px;
        padding: 8px;
        font-size: .69rem;
    }
}

/* ===== END EXPLANATION + FLAG + EARLY EXIT V7 ===== */