/* TypeThatBook style.css v3.5.0 */
/* v3.5.0: #modal-body no longer uses justify-content:center, which CLIPS SCROLL
           OVERFLOW AT THE TOP and made the Game Genie's upper controls
           unreachable. flex-start + auto margins on first/last child instead.  */
/* v3.4.0: Classic view contrast INVERTED. Upcoming text is black, typed text is
           grey (--ink-spent). It was #ccc for upcoming and black for typed, which
           is backwards: the words a student is reading ahead of the cursor are the
           ones that need contrast. Adventure mode was fixed this way long ago.    */
/* v3.3.0: condensed book progress bar for books over 40 chapters          */
/* v3.2.0: view-choice splash (#view-splash) — see showViewSplash() in game.js  */
/* v3.1.6: machine-readable version stamp via body::before for build banner */
body::before { content: "v3.3.0"; display: none; }
:root {
    --bg-color: #ffffff;
    --bg: #ffffff;           /* alias used by learn.html */
    --text-color: #333333;
    --carolina-blue: #4B9CD3; 
    --corrected-color: #1976d2; /* lightened from #0047AB — more readable at small sizes */
    --brute-force-color: #D32F2F; 
    --error-bg: #ffcccc; 
    --fixed-bg: #d1e7f7; 
    --accent-grey: #e0e0e0;
    --black: #000000;
    /* Typed-and-correct text in Classic view. Dark enough to re-read, light
       enough to stop competing with what comes next. */
    --ink-spent: #9b968e;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Courier Prime', 'Courier New', monospace;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* --- HUD --- */
#hud {
    height: 60px;
    padding: 0 20px;
    background: var(--black);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    border-bottom: 4px solid var(--carolina-blue);
    flex-shrink: 0; 
    z-index: 10;
    box-sizing: border-box;
}

.hud-section { flex: 1; display: flex; align-items: center; }
.hud-section.left { justify-content: flex-start; }
.hud-section.center { justify-content: center; font-size: 1.1em; }
#streak-display { transition: color 0.3s, text-shadow 0.3s; }
.streak-cold { color: #666; }
.streak-warm { color: #ff9900; }
.streak-hot { color: #ff4400; text-shadow: 0 0 6px rgba(255,68,0,0.4); }
.streak-fire { color: #ff0000; text-shadow: 0 0 10px rgba(255,0,0,0.6); }
.streak-pop { animation: streakPop 0.3s ease-out; }
@keyframes streakPop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }
.hud-section.right { justify-content: flex-end; gap: 15px; font-size: 14px; }

.action-btn {
    background: var(--carolina-blue);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    font-size: 13px;
    transition: background 0.2s;
}
.action-btn:hover { background: #4a90e2; }

.text-btn {
    background: none;
    border: none;
    color: #999;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    padding: 0;
}
.text-btn:hover { color: white; }
#user-name { color: white; margin-right: 5px; }

/* --- GAME AREA --- */
#game-container {
    flex-grow: 1;
    position: relative;
    overflow: hidden; 
    background: #fafafa;
    display: flex;
    justify-content: center;
}

#text-stream {
    position: absolute;
    top: 0; 
    left: 10%;
    width: 80%;
    max-width: none; 
    transition: transform 0.2s ease-out; 
    padding-bottom: 300px; 
}

/* --- Book & Chapter Progress Bars --- */
#chapter-progress-bar {
    position: absolute;
    left: 3.5%;
    top: 20px;
    bottom: 40px;
    width: 8px;
    background: #d0d0d0;
    border-radius: 4px;
    z-index: 5;
}
#chapter-progress-fill {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0%;
    background: #222;
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease-out;
}
#chapter-progress-marker {
    position: absolute;
    left: -4px; right: -4px;
    height: 4px;
    background: var(--carolina-blue, #4B9CD3);
    border-radius: 2px;
    top: 0%;
    transition: top 0.3s ease-out;
    box-shadow: 0 0 8px var(--carolina-blue, #4B9CD3), 0 0 3px var(--carolina-blue, #4B9CD3);
    z-index: 1;
}
#chapter-progress-label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #999;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
}

#book-progress-bar {
    position: absolute;
    right: 2%;
    top: 20px;
    bottom: 40px;
    width: 34px;
    z-index: 5;
}
#book-progress-track {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    background: #e0e0e0;
    border-radius: 5px;
}
.book-chap-seg {
    position: absolute;
    left: 0; right: 0;
    background: #d8d8d8;
    transition: background 0.3s;
}
.book-chap-seg.completed {
    background: #222;
}
.book-chap-seg.current {
    background: #d0d0d0;
    box-shadow: 0 0 6px var(--carolina-blue, #4B9CD3);
    outline: 1.5px solid var(--carolina-blue, #4B9CD3);
    z-index: 1;
}
.book-chap-seg.future {
    background: #d8d8d8;
}
.chap-inner-fill {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0%;
    background: #222;
    transition: height 0.3s ease-out;
}
.chap-inner-marker {
    position: absolute;
    left: -3px; right: -3px;
    height: 3px;
    background: var(--carolina-blue, #4B9CD3);
    box-shadow: 0 0 6px var(--carolina-blue, #4B9CD3);
    top: 0%;
    transition: top 0.3s ease-out;
    z-index: 2;
}
.book-chap-divider {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: #bbb;
    z-index: 3;
}
.book-chap-label {
    position: absolute;
    right: 14px;
    transform: translateY(-50%);
    font-size: 9px;
    color: #bbb;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    pointer-events: none;
    text-align: right;
}
.book-chap-label.active-label {
    color: var(--carolina-blue, #4B9CD3);
    font-weight: bold;
    font-size: 10px;
}
#book-progress-label {
    position: absolute;
    bottom: -20px;
    right: 0;
    font-size: 9px;
    color: #999;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    text-align: right;
}

#image-panel { display: none !important; }

.word { display: inline-block; white-space: pre; line-height: 2.5em; font-size: 24px; color: #ccc; }

/* ⚠️ UPCOMING TEXT IS BLACK; TYPED TEXT IS GREY. (v3.4.0)
   It used to be the other way round: #ccc for what you are about to type and
   black for what you had already typed. That is backwards for the only reader who
   matters. The text a student is READING AHEAD of the cursor needs full contrast
   — #ccc at reading size is close to invisible for a struggling eleven-year-old —
   and the text behind the cursor has already done its job and should recede.
   Adventure mode was fixed this way some time ago; Classic never was. */
.letter {
    display: inline-block; vertical-align: bottom; min-width: 14.4px;
    line-height: 2.0em; padding: 0 1px; position: relative;
    color: var(--black); border-radius: 3px;
}

.letter.space { min-width: 14.4px; border-bottom: none !important; text-decoration: none !important; }

.letter.tab {
    /* Guide was #ddd, chosen to sit beside #ccc text. Against black it vanished. */
    width: 50px; text-align: center; border-bottom: 1px dotted #b8b2a8; color: transparent; 
}
.letter.tab::before {
    content: '→'; font-size: 32px; font-weight: 800; color: #999; 
    position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); opacity: 0.5;
}
.letter.tab.done-perfect, .letter.tab.done-fixed { border-bottom: none; }
.letter.tab.done-perfect::before, .letter.tab.done-fixed::before { opacity: 0.1; }

.letter.enter {
    width: 24px; text-align: center; margin-left: 2px; color: transparent; 
}
.letter.enter::before {
    content: '↵'; font-size: 28px; font-weight: 800; color: #999;
    position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); opacity: 0.5;
}
.letter.enter.done-perfect::before { opacity: 0.1; }

.letter.active { background-color: var(--carolina-blue); color: white !important; z-index: 2; }
.letter.active.error-state { background-color: var(--error-bg); color: black !important; }

.letter.tab.active::before,
.letter.enter.active::before { color: white; opacity: 1; }

/* Typed and correct: present, legible if you look back, but out of the way.
   done-fixed (blue) and done-dirty stay loud on purpose — those are diagnostics. */
.letter.done-perfect { color: var(--ink-spent); } 
.letter.done-fixed { color: var(--corrected-color); font-weight: bold; } 
.letter.done-dirty { color: var(--brute-force-color); } 
.letter.space.done-perfect { background: transparent; }
.letter.space.done-fixed { background-color: var(--fixed-bg); }
.letter.space.done-dirty { background-color: var(--error-bg); }

/* --- KEYBOARD --- */
#caps-warning {
    background: #D32F2F; color: white; text-align: center;
    padding: 6px; font-weight: bold; font-size: 0.85rem;
    letter-spacing: 1px; flex-shrink: 0;
    animation: capsFlash 1.5s ease-in-out infinite;
}
@keyframes capsFlash { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }

/* --- BOOK INFO BAR --- */
#book-info-bar {
    flex-shrink: 0;
    padding: 4px 16px;
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    font-size: 0.78rem;
    color: #888;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#book-info-bar:empty { display: none; }
#book-info-bar .bib-title { color: #555; font-weight: bold; }
#book-info-bar .bib-sep { color: #ccc; margin: 0 6px; }
#book-info-bar .bib-chap { color: #888; }

#virtual-keyboard {
    height: 305px; background: var(--accent-grey);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; border-top: 4px solid var(--black); padding: 10px 0; flex-shrink: 0;
}
.kb-row { display: flex; gap: 5px; }
.key {
    min-width: 40px; height: 40px; background: white; border: 1px solid #999;
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 16px; color: var(--black);
}
.key.target { background-color: var(--carolina-blue); color: white; transform: translateY(2px); position: relative; z-index: 5; }
.key.space { width: 300px; }
.key.wide { min-width: 72px; font-size: 12px; }
.key.key-num {
    position: relative; font-size: 14px;
}
.num-digit {
    position: absolute; bottom: 3px; left: 6px;
    font-size: 16px; font-weight: bold; color: var(--black);
}
.num-symbol {
    position: absolute; top: 2px; right: 5px;
    font-size: 11px; font-weight: normal; color: #777;
}
.key.shift-active { background-color: #ffd700; color: black; } 

/* --- MODAL (in-flow panel, replaces keyboard) --- */
#modal {
    background: white;
    border-top: 4px solid var(--carolina-blue);
    flex-shrink: 0;
    display: flex; flex-direction: column;
    box-sizing: border-box;
    height: 329px; /* matches keyboard total height */
    padding: 12px 30px;
    animation: slideUp 0.2s ease-out;
}
#modal-title-bar { text-align: center; font-weight: bold; font-size: 0.95rem; color: var(--black); padding-bottom: 8px; }
#modal-title-bar.no-title { display: none; }
/* ⚠️ NOT justify-content: center. THAT IS WHY THE GAME GENIE'S TOP WAS
   UNREACHABLE. (v3.5.0)

   `justify-content: center` on a scrollable flex container clips the overflow at
   the START, and the clipped part cannot be scrolled to. The scrollbar appears and
   works, but the region above the scroll origin is simply gone — which is exactly
   what Jake hit: "scroll is there, but not there enough to utilize", with the
   Game Genie title appearing to cover the chapter picker it was actually sitting
   above. The Genie panel is the tallest thing that ever goes in this modal, so it
   is the only one that overflows far enough to lose content.

   flex-start plus auto margins on the first and last child gives both behaviours
   with no @supports and no browser caveats: short content still centres, tall
   content pins to the top and every pixel stays reachable. */
#modal-body {
    flex: 1; display: flex; flex-direction: column;
    justify-content: flex-start;
    text-align: center; overflow-y: auto; overflow-x: hidden;
    min-height: 0; scrollbar-width: thin;
}
#modal-body > :first-child { margin-top: auto; }
#modal-body > :last-child  { margin-bottom: auto; }
#modal-footer { text-align: center; padding-top: 8px; flex-shrink: 0; }

/* Keep overlay behavior for admin wizard only */
#warning-modal, #error-wizard-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex; flex-direction: column; justify-content: flex-end; 
    z-index: 100; pointer-events: none; 
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* --- Compact modal content classes --- */
.modal-header-compact { display: none; } /* legacy - info now in book-info-bar */
.mh-book { } .mh-sep { margin: 0 4px; } .mh-chap { color: #555; font-weight: bold; }

.stats-title { font-size: 1.2em; font-weight: bold; color: var(--carolina-blue); margin: 6px 0; }

.stats-inline { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 10px 0; font-size: 1.6em; font-weight: bold; }

/* Goal achievement badges — shown left and right of sprint stats */
.goal-badge {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: bold; flex-shrink: 0;
    border: 2px solid; vertical-align: middle;
}
.goal-blue { background: #e3f2fd; color: #1565c0; border-color: #1565c0; }
/* legacy aliases kept for any cached HTML */
.goal-daily  { background: #e3f2fd; color: #1565c0; border-color: #1565c0; }
.goal-weekly { background: #e3f2fd; color: #1565c0; border-color: #1565c0; }
.si-val small { font-size: 0.6em; font-weight: normal; color: #777; }
.si-dot { color: #ccc; font-weight: normal; }

.cumulative-row { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 0.88em; color: #666; margin: 6px 0; flex-wrap: wrap; }
.cumulative-sep { color: #ccc; font-weight: normal; padding: 0 2px; }

.goal-progress-row { display: flex; justify-content: center; gap: 20px; margin: 8px 0; font-size: 0.8rem; }
.goal-item { display: flex; align-items: center; gap: 6px; }
.goal-label { white-space: nowrap; }
.goal-bar { width: 60px; height: 6px; background: #e0e0e0; border-radius: 3px; }
.goal-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.goal-pct { min-width: 32px; }

.start-hint { font-size: 0.75rem; color: #999; margin-top: 4px; }
.start-controls select.modal-select { margin-bottom: 4px; }

.menu-table { display: table; width: 70%; margin: 0 auto; border-spacing: 0 8px; }
.menu-row { display: table-row; }
.menu-label-cell { display: table-cell; text-align: right; vertical-align: middle; padding-right: 12px; color: #888; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }
.menu-value-cell { display: table-cell; vertical-align: middle; }
.menu-value-cell select.modal-select { margin: 0; width: 100%; min-width: 0; }

.menu-3col { display: flex; gap: 16px; text-align: left; align-items: flex-start; flex-wrap: wrap; }
.menu-col { flex: 1; min-width: 0; }
.menu-col select.modal-select { margin: 4px 0 0 0; width: 100%; min-width: 0; }
.menu-col .menu-label { margin-bottom: 0; }
.menu-col-initials { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.menu-col-guide { flex: 0 0 auto; min-width: 90px; }

/* Hand Guide - capsule fingers on keyboard */
#hand-guide-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 3;
}
#hand-guide-overlay.hidden { display: none; }
#hg-svg { position: absolute; top: 0; left: 0; }

/* Resting state: circles on home row */
.hg-finger-group .hg-home {
    fill: var(--fc); fill-opacity: 0.35;
    stroke: var(--fc); stroke-width: 1.5; stroke-opacity: 0.3;
}
.hg-finger-group .hg-body {
    stroke: var(--fc); stroke-opacity: 0;
}
.hg-finger-group .hg-tip {
    fill: var(--fc); fill-opacity: 0;
    stroke: var(--fc); stroke-width: 0; stroke-opacity: 0;
}

/* Active: finger reaching to target */
.hg-finger-group.hg-active .hg-home {
    fill-opacity: 0.5; stroke-opacity: 0.5;
}
.hg-finger-group.hg-active .hg-body {
    stroke-opacity: 0.3;
}
.hg-finger-group.hg-active .hg-tip {
    fill-opacity: 0.15; stroke-width: 3; stroke-opacity: 0.9;
    filter: drop-shadow(0 0 5px var(--fc));
}

/* Shift pinky reaching */
.hg-finger-group.hg-shift-active .hg-home { fill-opacity: 0.4; stroke-opacity: 0.4; }
.hg-finger-group.hg-shift-active .hg-body { stroke-opacity: 0.2; }
.hg-finger-group.hg-shift-active .hg-tip { fill-opacity: 0.5; stroke-width: 1.5; stroke-opacity: 0.5; }

/* Pressed flash */
.hg-finger-group.hg-pressed .hg-home,
.hg-finger-group.hg-pressed .hg-tip {
    fill: #fff !important; fill-opacity: 1 !important;
    filter: drop-shadow(0 0 8px #fff) !important;
}
.hg-finger-group.hg-pressed .hg-body {
    stroke: #fff !important; stroke-opacity: 0.6 !important;
}

/* Space bar thumb circles via CSS pseudo-elements */
.key.space { position: relative; overflow: visible; }
.key.space::before, .key.space::after {
    content: ''; position: absolute; top: 50%; width: 16px; height: 16px;
    border-radius: 50%; transform: translateY(-50%);
    background: white; opacity: 0; transition: opacity 0.1s;
    pointer-events: none; z-index: 1;
}
.key.space::before { left: calc(50% - 38px); }
.key.space::after { right: calc(50% - 38px); }

/* Space target: show thumb circles */
.key.space.space-active::before, .key.space.space-active::after {
    opacity: 0.9;
    box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

/* Space pressed: whole bar flashes white */
.key.space.space-pressed {
    background: #fff !important;
    box-shadow: 0 0 12px rgba(255,255,255,0.9) !important;
    border-color: #ccc;
}
.key.space.space-pressed::before, .key.space.space-pressed::after { opacity: 0; }
.initials-box-settings {
    width: 72px; background: #222; color: #FFD700;
    border: 2px solid #444; padding: 10px 8px;
    font-family: 'Courier Prime', monospace;
    font-size: 1.3rem; font-weight: bold; border-radius: 4px;
    text-align: center; text-transform: uppercase; letter-spacing: 4px;
    margin-top: 4px; outline: none;
}
.initials-box-settings:focus { border-color: #FFD700; box-shadow: 0 0 8px rgba(255,215,0,0.3); }

/* Legacy grid kept for backward compat */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; text-align: left; }
.menu-grid .menu-section { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.menu-grid .menu-section select.modal-select { margin: 4px 0 0 0; }

.modal-footer-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.modal-select-sm { display: inline-block !important; width: auto !important; min-width: 120px !important; margin: 0 !important; padding: 8px 28px 8px 12px !important; font-size: 0.85rem !important; }

.stat-row { display: flex; justify-content: center; gap: 40px; margin: 20px 0; font-size: 1.2em; color: #333; }
.stat-item span { display: block; font-size: 2em; font-weight: bold; color: var(--black); }

/* Legacy class kept for stat subtext */
.stat-subtext { margin-top: 15px; font-size: 0.9em; color: #666; text-align: center; line-height: 1.5; }
.stat-subtext span.highlight { color: var(--carolina-blue); font-weight: bold; border-bottom: 1px solid #ccc; }

.modal-hint-text { font-size: 0.8em; color: #888; margin-top: 5px; font-weight: bold; text-transform: uppercase; }

.modal-btn {
    padding: 15px 40px; background: var(--carolina-blue); color: white; 
    border: none; font-size: 18px; font-weight: bold; cursor: pointer;
    border-radius: 4px; box-shadow: 0 4px 0 #2b7ca8;
    transition: opacity 0.2s, background 0.2s;
}
.modal-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #2b7ca8; }
.modal-btn:disabled { background: #999; cursor: not-allowed; box-shadow: none; }

select.modal-select {
    width: auto; min-width: 150px; max-width: 100%; display: block; margin: 5px auto 20px auto; 
    background-color: #222; color: #eee; border: 1px solid #444; padding: 10px 30px 10px 15px; 
    border-radius: 4px; font-family: inherit; font-size: 1rem; outline: none; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300ff41%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: right 10px top 50%; background-size: 10px auto;
}
.menu-section select.modal-select { margin: 0; flex-grow: 1; min-width: 0; }

.hidden { display: none !important; }
footer { position: fixed; bottom: 5px; right: 10px; font-size: 0.7em; color: #666; background: rgba(255,255,255,0.8); z-index: 101; padding: 2px 5px; border-radius: 3px; }

.stat-subtext { margin-top: 15px; font-size: 0.9em; color: #666; text-align: center; line-height: 1.5; }
.stat-subtext span.highlight { color: var(--carolina-blue); font-weight: bold; border-bottom: 1px solid #ccc; }

#menu-btn { position: absolute; top: 20px; right: 20px; background: transparent; border: none; color: #555; font-size: 1.5rem; cursor: pointer; z-index: 1000; padding: 10px; }
#menu-btn:hover { color: #00ff41; }

/* --- GAME GENIE (admin only) --- */
#genie-btn {
    position: fixed; bottom: 8px; left: 8px;
    background: #1a0a00; border: 1.5px solid #ff6600;
    color: #ff6600; cursor: pointer; z-index: 1000;
    padding: 3px 6px; border-radius: 3px;
    font-family: 'Courier Prime', monospace;
    font-size: 0.6rem; font-weight: bold; letter-spacing: 1px;
    text-shadow: 0 0 4px #ff4400, 0 0 8px #ff2200;
    box-shadow: 0 0 6px rgba(255,102,0,0.3), inset 0 0 4px rgba(255,68,0,0.1);
    image-rendering: pixelated;
    animation: genieGlow 2s ease-in-out infinite;
    line-height: 1.2;
}
#genie-btn:hover {
    background: #2a0a00;
    border-color: #ff8800;
    text-shadow: 0 0 8px #ff6600, 0 0 14px #ff4400, 0 0 20px #ff2200;
    box-shadow: 0 0 12px rgba(255,102,0,0.5), inset 0 0 8px rgba(255,68,0,0.2);
}
.gg-fire {
    display: inline-block;
    animation: ggFlicker 0.3s steps(2) infinite;
}
.gg-fire2 { animation-delay: 0.15s; }
.gg-flame { font-size: 0.65em; display: inline-block; animation: ggFlameWave 0.6s steps(3) infinite alternate; }
@keyframes genieGlow {
    0%, 100% { border-color: #ff6600; }
    50% { border-color: #ff3300; }
}
@keyframes ggFlicker {
    0% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}
@keyframes ggFlameWave {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-2px) scale(1.1); }
}

.menu-section { margin-bottom: 25px; text-align: left; border-bottom: 1px solid #333; padding-bottom: 20px; }
.menu-section:last-child { border-bottom: none; }
.menu-label { color: #888; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; display: block; }

button.danger-btn { background-color: #2a0a0a; border: 1px solid #551111; color: #ff9999; margin-top: 10px; width: 100%; font-size: 0.9rem; padding: 10px; }
button.danger-btn:hover { background-color: #441111; border-color: #ff3333; color: #fff; }
button.secondary-btn { background-color: transparent; border: 1px solid #444; color: #aaa; margin-top: 10px; width: 100%; }
button.secondary-btn:hover { border-color: #888; color: #fff; }

/* ERROR WIZARD STYLES */
.error-wizard-content {
    pointer-events: auto;
    background: #151515; border: 2px solid #ffaa00; padding: 25px;
    max-width: 800px; width: 90%; text-align: left; color: #eee;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 0 20px rgba(255, 170, 0, 0.2);
    /* Center it */
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.bad-char-highlight {
    background-color: #ff0000;
    color: white;
    font-weight: bold;
    padding: 0 4px;
    border-radius: 2px;
}

/* Initials boxes */
.initials-box {
    width: 44px; height: 52px;
    background: #111; color: #FFD700;
    border: 2px solid #444; border-radius: 4px;
    font-family: 'Courier Prime', monospace;
    font-size: 1.6rem; font-weight: bold;
    text-align: center; text-transform: uppercase;
    outline: none; caret-color: #FFD700;
}
.initials-box:focus { border-color: #FFD700; box-shadow: 0 0 8px rgba(255,215,0,0.3); }

/* Leaderboard */
.stats-with-trophies { display: flex; gap: 0; align-items: stretch; min-height: 0; flex: 1; }
.stats-balance { flex: 0 0 auto; width: 80px; margin-right: 10px; } /* invisible left spacer to center stats */
.stats-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.trophy-panel {
    flex: 0 0 auto; width: 80px;
    background: #111; border-radius: 6px;
    margin-left: 10px;
    padding: 8px 8px;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center;
    gap: 4px;
}
.trophy-header { font-size: 1.4em; margin-bottom: 2px; }
.trophy-row { display: flex; flex-direction: column; align-items: center; gap: 0; }
.trophy-icon { font-size: 1.1em; line-height: 1.2; }
.trophy-label { font-size: 0.55rem; font-weight: bold; letter-spacing: 0.5px; text-align: center; white-space: nowrap; }

.lb-container { display: flex; flex-direction: column; height: 100%; }
.lb-tabs { display: flex; gap: 4px; justify-content: center; margin-bottom: 6px; flex-wrap: wrap; }
.lb-tab {
    background: #f0f0f0; border: 1px solid #ddd; border-radius: 3px;
    padding: 3px 8px; cursor: pointer; font-family: inherit; font-size: 0.7rem;
    color: #666; transition: all 0.15s;
}
.lb-tab:hover { background: #e0e0e0; }
.lb-tab-active { background: var(--carolina-blue); color: white; border-color: var(--carolina-blue); }
.lb-list { flex: 1; overflow-y: auto; min-height: 0; }
.lb-entry {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px; font-size: 0.85em;
    border-bottom: 1px solid #f0f0f0;
}
.lb-entry:last-child { border-bottom: none; }
.lb-me { background: #fffce8; font-weight: bold; }
.lb-initials { font-weight: bold; color: var(--black); min-width: 3em; letter-spacing: 2px; }
.lb-val { margin-left: auto; color: var(--carolina-blue); font-weight: bold; }

/* Practice Mode */
.practice-btn {
    display: inline-block; vertical-align: middle;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; border: none; border-radius: 3px;
    padding: 2px 8px; margin-left: 6px;
    font-family: inherit; font-size: 0.85em; font-weight: bold;
    cursor: pointer; transition: opacity 0.15s;
}
.practice-btn:hover { opacity: 0.85; }
.practice-active {
    background: linear-gradient(90deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%) !important;
    border-top: 2px solid #667eea !important;
}
.practice-active .bib-title,
.practice-active .bib-chap { color: #c4b5fd !important; }
.practice-active .bib-sep { color: #667eea !important; }

/* --- PROGRESS BARS --- */
#chapter-progress-bar, #book-progress-bar {
    position: absolute;
    top: 16px; bottom: 16px;
    width: 6px;
    z-index: 5;
    pointer-events: none;
}
#chapter-progress-bar {
    left: calc(5% - 3px);
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}
#chapter-progress-fill {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0%;
    background: var(--carolina-blue);
    border-radius: 3px;
    transition: height 0.25s ease-out;
}
#chapter-progress-label {
    position: absolute;
    bottom: -20px; left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: #999;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
}

#book-progress-bar {
    right: calc(5% - 3px);
    background: #e0e0e0;
    border-radius: 3px;
    overflow: visible;
}
#book-progress-track {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 3px;
    overflow: hidden;
}
.book-chap-seg {
    position: absolute;
    left: 0; right: 0;
    transition: background-color 0.3s;
}
.book-chap-seg.completed { background: var(--carolina-blue); }
.book-chap-seg.current { background: #e0e0e0; overflow: hidden; }
.book-chap-seg .chap-inner-fill {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: var(--carolina-blue);
    opacity: 0.6;
    transition: height 0.25s ease-out;
}
.book-chap-seg.future { background: #e8e8e8; }
.book-chap-divider {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: #ccc;
    z-index: 1;
}
.book-chap-label {
    position: absolute;
    right: 10px;
    font-size: 0.55rem;
    color: #bbb;
    font-family: 'Courier New', monospace;
    transform: translateY(-50%);
    pointer-events: none;
    white-space: nowrap;
}
.book-chap-label.active-label { color: var(--carolina-blue); font-weight: bold; font-size: 0.65rem; }
#book-progress-label {
    position: absolute;
    bottom: -20px; left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: #999;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
}

/* ═══════════════════════════════════════════════════════════════════
   SCHOOL (learn.html) STYLES
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layout ── */
#learn-container { display: flex; flex-direction: column; height: calc(100vh - 46px); }

/* ── Map view ── */
#map-view { flex: 1; overflow-y: auto; padding: 24px 16px 60px; background: var(--bg); }
#map-view.hidden { display: none; }

.map-unit-header {
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px;
    color: #bbb; margin: 24px 0 10px;
    display: flex; align-items: center; gap: 10px;
}
.map-unit-header::after { content: ''; flex: 1; height: 1px; background: #333; }

.map-lesson-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

.map-lesson-card {
    background: #1a1a1a; border: 1px solid #333; border-radius: 6px;
    padding: 12px 14px; cursor: pointer; transition: all 0.15s;
    min-width: 160px; flex: 1; max-width: 220px; position: relative;
}
.map-lesson-card:hover:not(.locked) { border-color: var(--carolina-blue); transform: translateY(-2px); }
.map-lesson-card.locked  { opacity: 0.45; cursor: default; }
.map-lesson-card.completed   { border-color: #2a5c2a; }
.map-lesson-card.active-next { border-color: var(--carolina-blue); box-shadow: 0 0 12px rgba(75,156,211,0.25); }

.mlc-keys  { font-family: 'Courier Prime', monospace; font-size: 0.75rem; color: var(--carolina-blue); margin-bottom: 4px; letter-spacing: 1px; }
.mlc-title { font-size: 0.85rem; font-weight: bold; color: #eee; line-height: 1.2; }
.mlc-meta  { font-size: 0.7rem; color: #555; margin-top: 4px; font-family: 'Courier Prime', monospace; }
.mlc-stars { position: absolute; top: 8px; right: 10px; font-size: 0.8rem; letter-spacing: 1px; }
.mlc-lock  { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 1.1rem; opacity: 0.4; }

.map-graduate-btn {
    display: block; width: 100%; max-width: 400px; margin: 32px auto 0;
    padding: 14px; background: var(--carolina-blue); color: white;
    border: none; border-radius: 6px; font-size: 1rem; font-weight: bold;
    font-family: 'Courier Prime', monospace; cursor: pointer;
    text-align: center; text-decoration: none; letter-spacing: 1px; transition: background 0.2s;
}
.map-graduate-btn:hover { background: #3a8ec0; }

/* ── Drill view ── */
#drill-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
#drill-view.hidden { display: none; }

/* Intro panel */
#intro-panel {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 20px; background: var(--bg); overflow-y: auto;
}
#intro-panel.hidden { display: none; }

.intro-card {
    background: #1a1a1a; border: 1px solid #333; border-radius: 8px;
    padding: 28px 32px; max-width: 700px; width: 100%;
}
.intro-new-keys { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
.intro-key-badge {
    font-family: 'Courier Prime', monospace; font-size: 1.6rem; font-weight: bold;
    background: #111; border: 2px solid var(--carolina-blue); border-radius: 6px;
    padding: 6px 18px; color: var(--carolina-blue); min-width: 54px; text-align: center;
}
.intro-title { font-size: 1.1rem; font-weight: bold; color: #eee; text-align: center; margin-bottom: 8px; }
.intro-text  { color: #aaa; font-size: 0.9rem; line-height: 1.6; text-align: center; margin-bottom: 20px; }

/* Intro keyboard — no transform:scale (breaks SVG coordinate math) */
#intro-keyboard-wrap { width: 100%; overflow-x: auto; margin: 0 auto 20px; }
#intro-keyboard {
    height: 305px; background: var(--accent-grey);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; border-top: 4px solid var(--black); padding: 10px 0; min-width: 600px;
}

.intro-start-btn {
    display: block; width: 100%; padding: 12px;
    background: var(--carolina-blue); color: white; border: none;
    border-radius: 4px; font-size: 1rem; font-weight: bold;
    font-family: 'Courier Prime', monospace; cursor: pointer;
    letter-spacing: 1px; transition: background 0.2s; margin-top: 8px;
}
.intro-start-btn:hover { background: #3a8ec0; }

/* Active drill */
#active-drill { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
#active-drill.hidden { display: none; }

/* Step progress pips */
#step-progress-bar { display: flex; gap: 6px; padding: 10px 16px; background: #111; border-bottom: 1px solid #222; flex-shrink: 0; }
.step-pip { flex: 1; height: 4px; border-radius: 2px; background: #333; transition: background 0.3s; }
.step-pip.done   { background: var(--carolina-blue); }
.step-pip.active { background: #888; }

/* Step label */
#step-label {
    text-align: center; font-size: 0.75rem; color: #555;
    font-family: 'Courier Prime', monospace; padding: 4px 0;
    flex-shrink: 0; letter-spacing: 1px; text-transform: uppercase;
}

/* Drill text */
#drill-text-area { flex: 1; position: relative; overflow: hidden; padding: 0; }
#drill-text {
    font-family: 'Courier Prime', monospace; font-size: 1.4rem; line-height: 2.0em;
    max-width: 700px; width: 100%; text-align: left;
    position: absolute;
    left: 50%; transform: translateX(-50%);
    padding: 0 24px; box-sizing: border-box;
    transition: top 0.15s ease-out;
}
/* per-character sizing now on .dt-char — see below */
/* Drill text — base character class mirrors .letter from book/game exactly.
   State classes change color only, never dimensions, so every character
   (including space) is always the same width. */
.dt-char     { display: inline-block; vertical-align: bottom; min-width: 14.4px;
               line-height: 2.0em; padding: 0 1px; position: relative; border-radius: 3px; }
.dt-upcoming { color: #ccc; }
.dt-done     { color: var(--black); }                /* typed cleanly — solid black, same as book done-perfect */
.dt-fixed    { color: var(--corrected-color); font-weight: bold; } /* backspaced & retyped — blue, same as book done-fixed */
.dt-dirty    { color: var(--brute-force-color); font-weight: bold; }
.dt-current  { background-color: var(--carolina-blue); color: white !important; }
.dt-error    { background-color: var(--error-bg); color: var(--black) !important; }
/* Space-specific done states — text is invisible so we use background tints (mirrors book) */
.dt-char.dt-done  + .dt-char:empty,  /* keep selectors simple — use data attribute instead */
.dt-space-perfect { background: transparent; }
.dt-space-fixed   { background-color: var(--fixed-bg); border-radius: 2px; }
.dt-space-dirty   { background-color: var(--error-bg); border-radius: 2px; }

/* Drill keyboard wrap — fixed height matches keyboard so swapping
   keyboard↔modal never changes the height of the slot, preventing text jump */
#drill-keyboard-wrap { flex-shrink: 0; height: 309px; overflow: hidden; }

/* Drill modal */
#drill-modal {
    background: white; border-top: 4px solid var(--carolina-blue);
    flex-shrink: 0; display: flex; flex-direction: column; justify-content: center;
    box-sizing: border-box;
    height: 309px; overflow-y: auto;
    padding: 12px 30px; animation: slideUp 0.2s ease-out;
}
#drill-modal.hidden { display: none; }
.dm-title  { font-size: 1.1rem; font-weight: bold; text-align: center; margin-bottom: 8px; }
.dm-stats  { display: flex; justify-content: center; align-items: center; gap: 30px; margin: 8px 0; }
.dm-stat   { text-align: center; }
.dm-val    { font-size: 1.8rem; font-weight: bold; color: var(--carolina-blue); font-family: 'Courier Prime', monospace; }
.dm-label  { font-size: 0.7rem; color: #999; text-transform: uppercase; letter-spacing: 1px; }
.dm-stars  { font-size: 1.4rem; text-align: center; margin: 4px 0; }
.grade-badge {
    display: inline-block;
    font-size: 1.6rem; font-weight: bold; font-family: 'Courier Prime', monospace;
    padding: 4px 18px; border-radius: 6px;
    border: 2px solid currentColor;
    letter-spacing: 2px;
}
.dm-msg    { text-align: center; color: #555; font-size: 0.85rem; margin: 6px 0; }
.dm-btns   { display: flex; gap: 12px; margin-top: 12px; flex-shrink: 0; }
.dm-btns button   { flex: 1; padding: 12px; border: none; border-radius: 4px; font-family: inherit; font-weight: bold; cursor: pointer; font-size: 0.9rem; }
.dm-btn-primary   { background: var(--carolina-blue); color: white; }
.dm-btn-secondary { background: #eee; color: #555; }
.dm-btn-primary:hover   { background: #3a8ec0; }
.dm-btn-secondary:hover { background: #ddd; }
.dm-remediation { font-size: 0.78rem; color: #e65100; text-align: center; margin-top: 6px; }
.dm-remediation a { color: #e65100; }
.dm-graduation  { font-size: 2rem; text-align: center; margin: 8px 0; }

/* ─── View-choice splash (v3.2.0) ──────────────────────────────────────────
   Full-screen because two side-by-side previews don't fit in the 329px
   bottom-sheet modal, and because covering the screen means the view swap
   underneath is invisible. Sits above #modal (z-index 10 on #hud, 100 on the
   admin wizard overlay) at 200.

   The overlay deliberately does NOT set isModalOpen / isInputBlocked — see
   showViewSplash() in game.js. It stops keys in the capture phase instead. */
#view-splash {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(20, 18, 16, 0.72);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; box-sizing: border-box;
    animation: vsFade 0.22s ease-out;
    overflow-y: auto;
}
#view-splash.vs-closing { animation: vsFadeOut 0.18s ease-in forwards; }
@keyframes vsFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes vsFadeOut { from { opacity: 1; } to { opacity: 0; } }

.vs-panel {
    background: #fff; border-radius: 10px; border-top: 5px solid var(--carolina-blue);
    max-width: 760px; width: 100%;
    padding: 18px 20px 16px; box-sizing: border-box;
    box-shadow: 0 18px 50px rgba(0,0,0,0.45);
    animation: vsRise 0.26s cubic-bezier(.2,.8,.3,1);
}
@keyframes vsRise { from { transform: translateY(18px) scale(.985); } to { transform: none; } }

.vs-head { text-align: center; margin-bottom: 14px; }
.vs-title {
    font-family: 'Courier Prime', monospace; font-weight: bold;
    font-size: 1.15rem; color: var(--black);
}
.vs-sub {
    font-family: 'Courier Prime', monospace; font-size: 0.78rem;
    color: #777; margin-top: 5px; line-height: 1.45;
    max-width: 540px; margin-left: auto; margin-right: auto;
}

.vs-cards { display: flex; gap: 14px; align-items: stretch; }

.vs-card {
    flex: 1 1 0; min-width: 0; position: relative;
    background: #fafafa; border: 2px solid #e0e0e0; border-radius: 8px;
    padding: 10px 10px 12px; cursor: pointer; text-align: left;
    font-family: 'Courier Prime', monospace;
    transition: border-color .16s, box-shadow .16s, transform .16s, background .16s;
}
.vs-card:hover { border-color: #bcd9ee; transform: translateY(-2px); }
.vs-card.is-picked {
    border-color: var(--carolina-blue); background: #fff;
    box-shadow: 0 0 0 3px rgba(75,156,211,.18);
}
.vs-card:focus-visible { outline: 3px solid var(--carolina-blue); outline-offset: 2px; }

.vs-art-wrap {
    border-radius: 5px; overflow: hidden; border: 1px solid #e4e4e4;
    line-height: 0; background: #fff;
}
.vs-art { display: block; width: 100%; height: auto; }

.vs-name { font-weight: bold; font-size: 1rem; color: var(--black); margin: 9px 0 3px; }
.vs-desc { font-size: 0.74rem; color: #777; line-height: 1.5; }

.vs-badge {
    position: absolute; top: 8px; right: 8px;
    background: var(--carolina-blue); color: #fff;
    font-size: 0.6rem; font-weight: bold; letter-spacing: .5px; text-transform: uppercase;
    padding: 3px 7px; border-radius: 3px;
    opacity: 0; transform: scale(.85); transition: opacity .16s, transform .16s;
}
.vs-card.is-picked .vs-badge { opacity: 1; transform: none; }

.vs-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 14px; flex-wrap: wrap;
}
.vs-remember {
    display: flex; align-items: center; gap: 7px; cursor: pointer;
    font-family: 'Courier Prime', monospace; font-size: 0.76rem; color: #777;
}
.vs-remember input { cursor: pointer; }
.vs-go {
    background: var(--carolina-blue); color: #fff; border: none;
    padding: 10px 22px; border-radius: 5px; cursor: pointer;
    font-family: 'Courier Prime', monospace; font-weight: bold; font-size: 0.92rem;
    transition: background .16s;
}
.vs-go:hover { background: #4a90e2; }

/* The figure breathes and the active key pulses. Motion is what sells the
   difference between the two cards at a glance — a still parchment rectangle
   reads as "greyed out" to a sixth grader. */
.vs-figure { animation: vsBob 1.9s ease-in-out infinite; transform-origin: 100px 89px; }
@keyframes vsBob {
    0%,100% { transform: translateY(0)     rotate(-1.2deg); }
    50%     { transform: translateY(-2.5px) rotate(1.2deg); }
}
.vs-key-hot { animation: vsKeyPulse 1.4s ease-in-out infinite; }
@keyframes vsKeyPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.vs-map circle:nth-of-type(3) { animation: vsPulse 1.8s ease-in-out infinite; transform-origin: 286px 82px; }
@keyframes vsPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } }

@media (prefers-reduced-motion: reduce) {
    .vs-figure, .vs-key-hot, .vs-map circle, #view-splash, .vs-panel { animation: none !important; }
}

/* Chromebooks in portrait / small windows: stack the cards. */
@media (max-width: 620px) {
    .vs-cards { flex-direction: column; }
    .vs-foot  { justify-content: center; }
    .vs-go    { width: 100%; }
}

/* ─── Condensed book progress bar (v3.3.0) ────────────────────────────────
   Used above BOOK_BAR_MAX_SEGMENTS chapters. Aesop's Fables is 286: at one
   sub-pixel segment each, the per-chapter bar rendered as a grey smear, and
   updating it cost 1,144 getElementById calls per keystroke. Three nodes now,
   flat cost, and the chapter count moves to the label where it's readable. */
.book-condensed-fill {
    position: absolute; left: 0; right: 0; top: 0;
    background: #222; height: 0;
    transition: height 0.15s linear;
}
.book-condensed-marker {
    position: absolute; left: -2px; right: -2px; top: 0;
    height: 2px; background: var(--carolina-blue);
    box-shadow: 0 0 5px var(--carolina-blue);
    transition: top 0.15s linear;
}