/* ============================================================
   RAR PHYSIOLOGY · LVC Calculation Game — the only styles unique to
   this game. Everything else reuses the CAV pharm game classes
   (cav-pharm-game__* / pgc-*) loaded globally, so the shell looks
   identical. Here: the numeric-entry field (the pharm game has none)
   + the two mode tags.
   ============================================================ */

.lvc-calc-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lvc-calc-input {
    flex: 1 1 170px;
    min-width: 120px;
    padding: 12px 14px;
    border: 1.5px solid rgba(15, 23, 42, 0.16);
    border-radius: 12px;
    background: #fff;
    color: var(--text, #111318);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.lvc-calc-input::placeholder { color: #9aa3b2; font-weight: 500; }
.lvc-calc-input:focus {
    outline: none;
    border-color: var(--accent, #0a84ff);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}
.lvc-calc-input.is-correct { border-color: #1f8f43; background: rgba(52, 199, 89, 0.08); color: #1f8f43; }
.lvc-calc-input.is-wrong { border-color: var(--danger, #ff453a); background: rgba(255, 69, 58, 0.07); color: var(--danger, #ff453a); }
.lvc-calc-submit { flex: 0 0 auto; }

/* stacked given values (Fix 2): full name (abbr) left, value right,
   aligned + compact; target on its own line under a divider. */
.lvc-calc-stack { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.lvc-calc-stack[hidden] { display: none; }
[data-pgc-game] .cav-pharm-game__card-vignette[hidden] { display: none; }
.lvc-calc-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 3px 0;
    font-size: 15px;
    line-height: 1.4;
}
.lvc-calc-name { color: var(--text, #111318); font-weight: 600; }
.lvc-calc-val { color: var(--text, #111318); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lvc-calc-row--target {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1.5px solid rgba(15, 23, 42, 0.16);
}
.lvc-calc-row--target .lvc-calc-name { font-weight: 800; }
.lvc-calc-row--target .lvc-calc-val { color: var(--accent-strong, #0066cc); font-size: 16px; }

/* mode tag on the card (calc vs identify) */
.cav-pharm-game__card-typetag[data-type="calc"],
.cav-pharm-game__card-typetag[data-type="identify"] {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.cav-pharm-game__card-typetag[data-type="calc"] { background: rgba(18, 179, 166, 0.14); color: #0e9488; }
.cav-pharm-game__card-typetag[data-type="identify"] { background: rgba(10, 132, 255, 0.12); color: var(--accent-strong, #0066cc); }

/* ------------------------------------------------------------
   Replicated from the pharm engine's injectStyles() — those rules
   are injected only when a pharm game mounts, which never happens on
   this page. Copying them here (NOT modifying the engine) so the
   reused shell is fully styled and hides correctly. Keep in sync if
   the pharm game's injected styles ever change.
   ------------------------------------------------------------ */
[data-pgc-game] { --cav-pharm-practice: #0a7a73; --cav-pharm-practice-soft: rgba(20, 160, 152, 0.08); min-height: auto; padding: 22px; }
.pgc-header { margin-bottom: 4px; }
.pgc-actionbar { display: flex; justify-content: flex-end; margin-top: 4px; }
.pgc-actionbar[hidden] { display: none; }
[data-pgc-game] .cav-pharm-game__feedback[hidden] { display: none; }
.pgc-next-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border: none; border-radius: 999px;
    background: var(--cav-pharm-practice, #0a7a73); color: #fff;
    font-size: 13.5px; font-weight: 800; cursor: pointer;
    font-family: inherit; transition: filter 0.15s ease, transform 0.1s ease;
}
.pgc-next-btn:hover { filter: brightness(1.06); }
.pgc-next-btn:active { transform: translateY(1px); }
.pgc-next-btn[disabled] { opacity: 0.5; cursor: default; }
[data-pgc-game] .cav-pharm-game__card-vignette { font-size: 18.5px; line-height: 1.55; color: var(--text); font-weight: 600; }
[data-pgc-game] .cav-pharm-game__feedback-text { font-size: 15px; color: var(--text); font-weight: 500; }
[data-pgc-game] .cav-pharm-game__feedback-consequence { color: var(--text); }
[data-pgc-game] .cav-pharm-game__screen--start { padding: 28px 24px; gap: 12px; }
[data-pgc-game] .cav-pharm-game__start-icon { font-size: 44px; }
[data-pgc-game] .cav-pharm-game__card-stage { min-height: auto; margin-bottom: 16px; }
[data-pgc-game] .cav-pharm-game__reason-btn { font-size: 15.5px; line-height: 1.5; padding: 13px 16px; }

/* ============================================================
   Foundations calc game — pill fill + card polish.
   Mirrors the Determinants direction drill so both games match.
   Scoped to #lvc-calc-game-mount; shared shell untouched.
   ------------------------------------------------------------ */
/* teal for the "Practice & Retrieval" pill (the shared rule reads
   var(--cav-pharm-practice), only defined inside [data-pgc-game]; the
   pill sits above it in .pgc-header) */
#lvc-calc-game-mount { --cav-pharm-practice: #0a7a73; --cav-pharm-practice-soft: rgba(20, 160, 152, 0.08); }

/* card: drop the tall empty center, warm the bland white with a soft
   teal wash + a hovering glow that matches the Start button */
#lvc-calc-game-mount .cav-pharm-game {
    min-height: 0;
    border-color: rgba(20, 160, 152, 0.28);
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(20, 160, 152, 0.07), rgba(255, 255, 255, 0) 60%),
        #ffffff;
    box-shadow: 0 10px 28px rgba(20, 160, 152, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
}
#lvc-calc-game-mount .cav-pharm-game__screen--start { padding: 30px 24px; gap: 11px; }