/* grandMA3 Trainer - dark, high contrast, echoing the console UI.
   Phone-first: everything is sized for a thumb, then relaxes on wider screens. */

:root {
    --bg:        #0d0d0d;
    --panel:     #191919;
    --panel-2:   #212121;
    --line:      #333333;
    --line-soft: #282828;
    --text:      #e9e9e9;
    --muted:     #8d8d8d;

    --ma-blue:   #1e7fd0;   /* selection blue of the console UI */
    --ma-cyan:   #33c9d6;
    --ma-yellow: #f2c31a;   /* command line text */
    --ma-green:  #2fa84f;
    --ma-red:    #cf3a2f;

    --radius: 6px;
    --tap: 52px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* The app hides things with the hidden attribute; any rule that sets display
   would otherwise win over the browser default and show them anyway. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    overscroll-behavior-y: contain;
}

body { padding-bottom: var(--safe-bottom); }

h1, h2 { font-weight: 600; letter-spacing: .01em; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }

.muted { color: var(--muted); }
.small { font-size: .82rem; }
.mono, .cmd {
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, "Consolas", monospace;
    font-variant-ligatures: none;
}

/* ------------------------------------------------------------------ lock */

.lock {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}
.lock__panel {
    width: min(420px, 100%);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    text-align: center;
}
.lock__mark {
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--ma-yellow);
    font-size: .8rem;
    margin-bottom: .8rem;
}
.lock h1 { font-size: 1.25rem; margin: 0 0 .35rem; }
.lock__sub { color: var(--muted); margin: 0 0 1.25rem; font-size: .9rem; }
.lock input {
    width: 100%;
    height: var(--tap);
    background: #0a0a0a;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    padding: 0 .9rem;
    font-size: 1rem;
    margin-bottom: .75rem;
}
.lock input:focus { outline: 2px solid var(--ma-blue); outline-offset: -1px; }
.lock__error { color: var(--ma-red); font-size: .88rem; }

/* ---------------------------------------------------------------- topbar */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: calc(var(--safe-top) + .5rem) .8rem .5rem;
    background: linear-gradient(#111 70%, #111000);
    border-bottom: 1px solid var(--line);
}
.topbar__home, .topbar__menu {
    height: 34px;
    min-width: 44px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ma-yellow);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .12em;
}
.topbar__menu { color: var(--muted); font-size: 1rem; letter-spacing: 0; }
.topbar__back {
    color: var(--muted);
    font-size: .78rem;
    text-decoration: none;
    padding: .3rem .1rem;
}
.topbar__back:hover { color: var(--ma-yellow); }
.topbar__xp { flex: 1; }

.xp { display: flex; align-items: center; gap: .5rem; }
.xp__level {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--ma-blue);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}
.xp__bar {
    flex: 1;
    height: 8px;
    background: #000;
    border: 1px solid var(--line);
    border-radius: 99px;
    overflow: hidden;
}
.xp__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--ma-blue), var(--ma-cyan));
    transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.xp__points { font-size: .8rem; color: var(--ma-cyan); font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; }

/* ----------------------------------------------------------------- shell */

main#app { padding: .9rem .8rem 2rem; max-width: 720px; margin: 0 auto; }
.screen[hidden] { display: none; }
.screen { animation: rise .18s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ categories */

.cats { display: grid; gap: .6rem; margin-bottom: 1rem; }
.cat {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .8rem;
    padding: .8rem .9rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: var(--radius);
    text-align: left;
    color: var(--text);
    width: 100%;
    min-height: 62px;
}
.cat[aria-pressed="true"] { border-left-color: var(--ma-blue); background: var(--panel-2); }
.cat__box {
    width: 20px; height: 20px;
    border: 1px solid var(--line);
    border-radius: 3px;
    display: grid; place-items: center;
    color: #fff; font-size: .8rem;
}
.cat[aria-pressed="true"] .cat__box { background: var(--ma-blue); border-color: var(--ma-blue); }
.cat__name { font-weight: 600; }
.cat__meta { color: var(--muted); font-size: .78rem; }
.cat__level {
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--ma-cyan);
    border: 1px solid #234;
    background: #0e1a20;
    padding: .2rem .45rem;
    border-radius: 99px;
    white-space: nowrap;
}

.opts { display: grid; gap: .35rem; margin-bottom: 1rem; }
.opt { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .9rem; min-height: 34px; }
.opt input { width: 18px; height: 18px; accent-color: var(--ma-blue); }

/* --------------------------------------------------------------- buttons */

.btn {
    display: block;
    width: 100%;
    min-height: var(--tap);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    padding: .7rem 1rem;
}
.btn:active { transform: translateY(1px); }
.btn--go { background: var(--ma-blue); border-color: #2b93e6; color: #fff; }
.btn--big { min-height: 58px; font-size: 1.05rem; }
.btn--ghost { background: transparent; color: var(--muted); margin-top: .6rem; }

.linkish {
    background: none;
    border: 0;
    color: var(--ma-cyan);
    font: inherit;
    font-size: .85rem;
    padding: .3rem 0;
    text-decoration: none;
}
.home__meta { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font-size: .85rem; flex-wrap: wrap; }
.home__meta .dot { color: var(--line); }

/* ----------------------------------------------------------------- drill */

.drill__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; min-height: 24px; }
.pips { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.pip { width: 14px; height: 5px; border-radius: 2px; background: #2a2a2a; }
.pip--done { background: var(--ma-green); }
.pip--miss { background: var(--ma-red); }
.pip--now  { background: var(--ma-yellow); }
.pip--shown { background: var(--ma-cyan); opacity: .55; }

.drill__timer { font-variant-numeric: tabular-nums; color: var(--ma-yellow); font-weight: 600; }
.combo {
    color: var(--ma-yellow);
    font-weight: 700;
    font-size: .85rem;
    animation: pop .3s ease-out;
}
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: .9rem;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
}
.card__tag {
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.card__ask { color: var(--muted); font-size: .85rem; }
.card__stem { font-size: 1.15rem; font-weight: 600; word-break: break-word; }
.card__stem.cmd { color: var(--ma-yellow); font-size: 1.2rem; }

.answers { display: grid; gap: .5rem; }

/* Deliberately quiet: an easy way out should be available, not tempting. */
.dunno { display: flex; justify-content: center; margin-top: .8rem; }
.dunno__btn { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.dunno__btn:disabled { opacity: .4; }
.answer {
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    padding: .85rem .9rem;
    min-height: var(--tap);
    font-size: .95rem;
    width: 100%;
}
.answer:active { background: var(--panel-2); }
.answer--right { border-color: var(--ma-green); background: #12250f; }
.answer--wrong { border-color: var(--ma-red); background: #260f0d; }
.answer.cmd { color: var(--ma-yellow); }

/* command line + keypad (build mode) */
.cmdline {
    background: #000;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .7rem .8rem;
    min-height: 52px;
    color: var(--ma-yellow);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
    word-break: break-word;
}
.cmdline__caret { width: 9px; height: 1.15em; background: var(--ma-yellow); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cmdline__empty { color: #5a5a5a; font-style: italic; }

.keypad { display: flex; flex-wrap: wrap; gap: .4rem; }
.key {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-bottom-width: 3px;
    border-radius: 5px;
    color: var(--text);
    padding: .6rem .7rem;
    min-height: 46px;
    font-size: .92rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    flex: 0 0 auto;
}
.key:active { border-bottom-width: 1px; transform: translateY(2px); }
.key--util { color: var(--muted); }
.key--go { background: var(--ma-blue); border-color: #2b93e6; color: #fff; font-weight: 700; }

.typebox {
    width: 100%;
    min-height: var(--tap);
    background: #000;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ma-yellow);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 1rem;
    padding: .7rem .8rem;
    margin-bottom: .6rem;
}
.typebox:focus { outline: 2px solid var(--ma-blue); outline-offset: -1px; }

/* -------------------------------------------------------------- feedback */

.feedback {
    margin-top: .9rem;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    animation: rise .16s ease-out;
}
.feedback--right { border-color: #2c5c33; background: #101a11; }
.feedback--learn { border-color: #235c63; background: #0e1a1c; }
.feedback--wrong { border-color: #6a2b25; background: #1a100f; }
.feedback__verdict { font-weight: 700; margin-bottom: .35rem; display: flex; align-items: baseline; gap: .5rem; }
.feedback__verdict .pts { color: var(--ma-cyan); font-size: .9rem; }
.feedback__answer { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--ma-yellow); word-break: break-word; }
.feedback__answer--prose { font-family: inherit; color: var(--text); font-weight: 600; }
.feedback__note { color: var(--muted); font-size: .82rem; margin-top: .35rem; }
.feedback__row { display: flex; justify-content: space-between; align-items: center; margin: .6rem 0 .4rem; }

/* --------------------------------------------------------------- summary */

.summary__title { text-align: center; }
.summary__points {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    color: var(--ma-cyan);
    margin: .3rem 0 1rem;
    animation: pop .35s cubic-bezier(.2,1.4,.4,1);
}
.summary__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.stat {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .7rem .5rem;
    text-align: center;
}
.stat__value { font-size: 1.3rem; font-weight: 700; }
.stat__label { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.summary__levels { margin-bottom: 1rem; display: grid; gap: .4rem; }
.levelup {
    border: 1px solid #3d5f22;
    background: #16200f;
    color: #b6e77a;
    border-radius: var(--radius);
    padding: .6rem .8rem;
    font-size: .9rem;
}

/* ----------------------------------------------------------------- stats */

.stats { display: grid; gap: .8rem; margin-bottom: 1rem; }
.bars { display: flex; align-items: flex-end; justify-content: flex-start; gap: 3px; height: 70px; }
.bars__day { flex: 1 1 0; max-width: 16px; background: var(--ma-blue); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .85rem;
}
.panel h3 { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.row { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.row:last-child { border-bottom: 0; }
.row__a { color: var(--ma-yellow); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .85rem; text-align: right; }

/* ---------------------------------------------------------------- review */

.review { display: grid; gap: .6rem; margin: .8rem 0 1rem; }
.review__card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; }
.review__prompt { font-size: .92rem; margin-bottom: .3rem; }
.review__answer { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--ma-yellow); font-size: .9rem; }
.review__actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.chip {
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--muted);
    border-radius: 99px;
    padding: .35rem .8rem;
    font-size: .8rem;
    min-height: 34px;
}
.chip--on { border-color: var(--ma-blue); color: #fff; background: #12283a; }
.badge {
    display: inline-block;
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: .15rem .4rem;
    margin-bottom: .4rem;
}
.badge--unverified { background: #3a2a06; color: var(--ma-yellow); border: 1px solid #6a4d0d; }
.badge--flagged { background: #331312; color: #ff8d80; border: 1px solid #6a2b25; }
.badge--ok { background: #12250f; color: #8fd67a; border: 1px solid #2c5c33; }

/* ----------------------------------------------------------------- toast */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(1.2rem + var(--safe-bottom));
    transform: translateX(-50%);
    background: #000;
    border: 1px solid var(--line);
    color: var(--text);
    padding: .6rem 1rem;
    border-radius: 99px;
    font-size: .85rem;
    z-index: 40;
    animation: rise .2s ease-out;
}

@media (min-width: 640px) {
    .answers { grid-template-columns: 1fr 1fr; }
    .summary__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- lookup */

.lookup__q { margin-bottom: .8rem; }
.lookup { display: grid; gap: .5rem; margin-bottom: 1rem; }
.lookup__card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .75rem .85rem;
}
.lookup__answer {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    color: var(--ma-yellow);
    font-size: .95rem;
    word-break: break-word;
    margin-bottom: .2rem;
}
.lookup__prompt { color: var(--text); font-size: .88rem; }
.lookup__meta { display: flex; align-items: center; gap: .6rem; margin-top: .55rem; flex-wrap: wrap; }
.lookup__tag {
    font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: .12rem .45rem;
}
.lookup__empty { color: var(--muted); font-size: .88rem; padding: .5rem 0; }

/* --------------------------------------------------------------- keyboard */

/* Only drawn where there is a real keyboard; on a phone the answers keep the
   full width and no hint is shown. */
.answer { position: relative; }
.answer__key {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-right: .55rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .72rem;
    vertical-align: 1px;
}
.answer:hover .answer__key { border-color: var(--ma-blue); color: var(--text); }
.keyhint { color: var(--muted); font-size: .75rem; margin-top: .6rem; display: none; }
body.has-keyboard .keyhint { display: block; }
.keyhint kbd {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: 0 .3rem;
    color: var(--text);
    font-size: .72rem;
}

/* ------------------------------------------------------- round-end recap */

.missed { display: grid; gap: .5rem; margin-bottom: 1.1rem; text-align: left; }
.missed__title {
    margin: .2rem 0 .1rem;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 600;
}
.missed__card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid #6a2b25;
    border-radius: var(--radius);
    padding: .7rem .8rem;
}
.missed__answer {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    color: var(--ma-yellow);
    font-size: .95rem;
    word-break: break-word;
}
.missed__prompt { color: var(--text); font-size: .86rem; margin-top: .15rem; }
.missed__meta { display: flex; align-items: center; gap: .6rem; margin-top: .45rem; flex-wrap: wrap; }
.missed__tag {
    font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: .1rem .45rem;
}

.lookup__drill { margin-bottom: .3rem; }

/* ------------------------------------------------------------------ diff */

.diff { margin-top: .55rem; display: grid; gap: .2rem; }
.diff__row { display: flex; gap: .5rem; align-items: baseline; }
.diff__label {
    font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); min-width: 2.6em;
}
.diff__code {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .85rem;
    display: flex; flex-wrap: wrap; gap: .3rem;
}
.diff__tok { color: var(--muted); }
.diff__tok--bad  { color: #ff9d92; text-decoration: line-through; text-decoration-color: #6a2b25; }
.diff__tok--good { color: var(--ma-yellow); font-weight: 600; }

/* --------------------------------------------------------- round length */

.lengths { display: flex; gap: .4rem; margin-bottom: .8rem; }
.length {
    flex: 1;
    min-height: 40px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: .88rem;
}
.length[aria-pressed="true"] {
    border-color: var(--ma-blue);
    background: var(--panel-2);
    color: var(--text);
    font-weight: 600;
}

.backup__row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }

.pace__figure { display: inline-flex; align-items: baseline; gap: .45rem; font-variant-numeric: tabular-nums; }
.pace__delta { font-size: .75rem; color: var(--muted); }
.pace__delta--good { color: #8fd67a; }