/* ════════════════════════════════════════════════════════════════════ grammar-lessons.css — SymposiON Obsidian + Mediterranean reskin for EVERY lyo-format grammar game. The grammar games (lyo, klisi-rimaton, eimi, pathitiko, afwnolekta, aoristos-b, rimata-mi, synirimmena, anwmala-rimata, paratheta, epitheta, ousiastika, noun-fill, antonymies, lat-*) all share one markup vocabulary generated by games/shared-engine.js and originally styled by games/lyo/game.css. This file overrides that vocabulary, so linking it ONCE (after games/lyo/game.css) reskins all of them. Loads after: theme-obsidian.css, mediterranean.css, games/lyo/game.css ════════════════════════════════════════════════════════════════════ */ :root, body, .theme-obsidian { /* ── Grammar games FOLLOW THE ACTIVE SITE THEME ────────────────────── NB: defined on `body` (not just :root) because the theme classes — and thus --sym-* — live on ; at :root those vars aren't in scope yet, so a plain var(--sym-x) there would fall back to the dark literal. On they resolve to the active theme's real values. Surfaces + body text bind straight to --sym-*, so they flip with the theme (dark on dark themes, light on light ones like Alabaster). The accent / status / parsing-tag "coloured text" tokens are mixed toward --sym-fg: on a DARK theme --sym-fg is cream → the colour stays light & vivid; on a LIGHT theme --sym-fg is ink → the same colour darkens to stay legible on the light card. No per-theme list needed. */ /* home accent (per-game overridable) + gold lustre */ --gl-ac: var(--sym-sage, #7E9560); --gl-ac-lt: color-mix(in srgb, var(--gl-ac) 58%, var(--sym-fg, #EFE9DC)); --gl-gold: var(--sym-gold, #C4A448); --gl-gold-lt: color-mix(in srgb, var(--gl-gold) 68%, var(--sym-fg, #EFE9DC)); /* surfaces + text — straight from the site theme so they flip with it */ --gl-panel: var(--sym-bg-panel, #0E0C09); --gl-inset: color-mix(in srgb, var(--sym-bg-panel, #0E0C09) 82%, var(--sym-ink, #0A0805)); --gl-line: var(--sym-hairline, color-mix(in srgb, var(--gl-gold) 22%, transparent)); --gl-line-hi: color-mix(in srgb, var(--gl-gold) 42%, transparent); --gl-cream: var(--sym-fg, #EFE9DC); --gl-bone: var(--sym-fg, #E8DBB7); --gl-stone: color-mix(in srgb, var(--sym-fg, #EFE9DC) 62%, transparent); --gl-fog: color-mix(in srgb, var(--sym-fg, #EFE9DC) 42%, transparent); /* status semantics — base hue drives borders/fills; *-lt is the text variant */ --gl-ok: #6FA45C; --gl-ok-lt: color-mix(in srgb, var(--gl-ok) 56%, var(--sym-fg, #EFE9DC)); --gl-bad: #C84630; --gl-bad-lt: color-mix(in srgb, var(--gl-bad) 60%, var(--sym-fg, #EFE9DC)); --gl-warn: #C68A22; /* parsing-tag categories (voice / tense / mood / person·gender / form) — hue mixed toward --sym-fg so the coloured TEXT stays legible on either surface while keeping its category identity */ --gl-voice: color-mix(in srgb, #6F9A54 60%, var(--sym-fg, #EFE9DC)); /* φωνή — sage */ --gl-tense: color-mix(in srgb, #B08E22 60%, var(--sym-fg, #EFE9DC)); /* χρόνος — gold */ --gl-mood: color-mix(in srgb, #4D9EAE 60%, var(--sym-fg, #EFE9DC)); /* έγκλιση — aegean*/ --gl-person: color-mix(in srgb, #D86F4A 60%, var(--sym-fg, #EFE9DC)); /* πρόσωπο — terra */ --gl-form: color-mix(in srgb, #B06A92 60%, var(--sym-fg, #EFE9DC)); /* τύπος — wine-rose */ } /* On LIGHT themes the mid `--sym-gold` is reserved for FILLS (e.g. the selected time/lives segment, where dark ink sits on it). Gold used AS TEXT needs the theme's deeper gold to stay legible on the pale card — so re-point --gl-gold (which drives all gold TEXT + the gold-derived emphasis tokens) to it. Dark themes are untouched. */ body.theme-alabaster, body.theme-alabaster-asphodel, body.theme-alabaster-noel, body.theme-alabaster-anastasi, body.theme-alabaster-apokries, body.theme-elysium { --gl-gold: var(--sym-gold-dk, #8A6E1E); } /* ────────────────────────────────────────────────────────────────── SHELL — screen + card ────────────────────────────────────────────────────────────────── */ .lyo-screen { padding: 22px 20px; color: var(--gl-cream); } /* picker rows inside a grammar screen inherit the theme-adaptive body text */ .lyo-screen .gpx-pick .gpx-desc, .lyo-screen .gpx-pick .gpx-row { color: var(--gl-cream); } .lyo-screen .lcard { background: linear-gradient(180deg, color-mix(in srgb, var(--gl-ac) 5%, transparent), transparent 38%), var(--gl-panel); border: 1px solid var(--gl-line); border-radius: 0; /* squared, museum-card feel */ box-shadow: 0 24px 70px rgba(0,0,0,.55); position: relative; overflow: hidden; } /* hairline lustre along the top edge */ .lyo-screen .lcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gl-gold), transparent); opacity: .55; } .lyo-screen .lcard h1 { font-family: var(--sym-font-serif, 'Cormorant Garamond', Georgia, serif); font-weight: 500; font-size: 2.1rem; letter-spacing: -.01em; color: var(--gl-bone); text-align: center; } .lyo-screen .lcard h1 em, .lyo-screen .lcard h1 .ob-gold { color: var(--gl-gold); font-style: italic; } .lyo-screen .lcard h2 { font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); font-weight: 600; font-size: 1.35rem; color: var(--gl-bone); } .lyo-screen .lcard h3 { font-family: var(--sym-font-mono, 'JetBrains Mono', monospace); font-size: .64rem; letter-spacing: .2em; color: var(--gl-stone); } .lsubtitle { font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); font-style: italic; font-size: 1.05rem; color: var(--gl-stone); } .ldivider { border-top: 1px solid var(--gl-line); } /* ────────────────────────────────────────────────────────────────── BUTTONS ────────────────────────────────────────────────────────────────── */ .lyo-screen .lbtn { border-radius: 0; font-family: var(--sym-font-sans, 'Inter', sans-serif); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; font-size: .76rem; } .lyo-screen .lbtn-primary { background: var(--gl-ac); color: var(--sym-ink, #0A0805); font-weight: 700; box-shadow: 0 6px 22px color-mix(in srgb, var(--gl-ac) 32%, transparent); } .lyo-screen .lbtn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); } .lyo-screen .lbtn-secondary { background: transparent; color: var(--gl-gold); border: 1px solid color-mix(in srgb, var(--gl-gold) 40%, transparent); } .lyo-screen .lbtn-secondary:hover { border-color: var(--gl-gold); background: color-mix(in srgb, var(--gl-gold) 10%, transparent); color: var(--gl-gold-lt); } .lback-link { font-family: var(--sym-font-mono, monospace); font-size: .72rem; letter-spacing: .06em; } .lback-link:hover { color: var(--gl-gold); } /* teacher "share with class" chips → aegean */ .game-share-btn, .lsett-qr-btn { border-radius: 0 !important; font-family: var(--sym-font-mono, monospace) !important; font-size: .68rem !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--gl-mood) !important; border: 1px solid color-mix(in srgb, var(--gl-mood) 40%, transparent) !important; background: color-mix(in srgb, var(--gl-mood) 7%, transparent) !important; } .game-share-btn:hover, .lsett-qr-btn:hover { background: color-mix(in srgb, var(--gl-mood) 14%, transparent) !important; } /* ────────────────────────────────────────────────────────────────── LEVEL SELECT — mood sections + scrolling level rows ────────────────────────────────────────────────────────────────── */ .lmood-hd { font-family: var(--sym-font-mono, monospace); font-size: .66rem; letter-spacing: .24em; color: var(--gl-ac-lt); } .lmood-hd::before { background: var(--gl-ac); width: 3px; border-radius: 0; } .lmood-hd::after { background: var(--gl-line); } /* level chip */ .lyo-screen .lvl-card { background: var(--gl-panel); border: 1px solid var(--gl-line); border-left: 3px solid var(--gl-ac); border-radius: 0; min-width: 150px; max-width: 230px; padding: 12px 15px; transition: transform .18s, box-shadow .18s, border-color .18s; } .lyo-screen .lvl-card:hover { border-color: var(--gl-line-hi); border-left-color: var(--gl-ac); transform: translateY(-3px); box-shadow: 0 10px 28px color-mix(in srgb, var(--gl-ac) 18%, transparent); } .lvl-card .lnum { font-family: var(--sym-font-mono, monospace); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--gl-ac) 90%, var(--gl-cream)); } .lvl-card .ldesc { font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); font-size: .95rem; line-height: 1.3; color: var(--gl-bone); } /* the four mood / difficulty variants → refined Mediterranean accents */ .lyo-screen .lvl-card.lgreen { border-left-color: var(--gl-ac); --gl-ac: #7E9560; } .lyo-screen .lvl-card.lyellow { border-left-color: var(--gl-gold); } .lyo-screen .lvl-card.lred { border-left-color: var(--gl-person); } .lyo-screen .lvl-card.lpurple { border-left-color: #9C6E86; } .lyo-screen .lvl-card.ous-sel { background: color-mix(in srgb, var(--gl-ac) 9%, transparent); border-color: var(--gl-line-hi); } /* progress badge */ .lvl-badge { border-radius: 0; font-family: var(--sym-font-mono, monospace); font-size: .58rem; letter-spacing: .08em; background: color-mix(in srgb, var(--gl-gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gl-gold) 30%, transparent); color: var(--gl-stone); } .lvl-badge.lvl-badge-done { background: color-mix(in srgb, var(--gl-ok) 12%, transparent); border-color: color-mix(in srgb, var(--gl-ok) 40%, transparent); color: var(--gl-ok-lt); } /* scrollbar */ .lvl-grid { scrollbar-color: var(--gl-line) transparent; } .lvl-grid::-webkit-scrollbar-thumb { background: var(--gl-line); border-radius: 0; } /* ────────────────────────────────────────────────────────────────── MODE SELECT (settings screen) ────────────────────────────────────────────────────────────────── */ .lyo-screen .lmode-btn { background: var(--gl-panel); border: 1px solid var(--gl-line); border-radius: 0; color: var(--gl-stone); font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); font-size: 1.02rem; letter-spacing: 0; text-transform: none; padding: 18px 12px; position: relative; transition: all .18s; } .lyo-screen .lmode-btn::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gl-ac), transparent); opacity: .35; transition: opacity .18s; } .lyo-screen .lmode-btn:hover { border-color: color-mix(in srgb, var(--gl-ac) 55%, transparent); color: var(--gl-bone); } .lyo-screen .lmode-btn.selected { border-color: color-mix(in srgb, var(--gl-ac) 60%, transparent); background: color-mix(in srgb, var(--gl-ac) 9%, transparent); color: var(--gl-ac-lt); box-shadow: 0 8px 26px color-mix(in srgb, var(--gl-ac) 16%, transparent); } .lyo-screen .lmode-btn.selected::before { opacity: .9; } .lmode-btn .lm-icon { color: var(--gl-ac); filter: saturate(.9); } .lmode-btn .lm-hint { font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); font-style: italic; color: var(--gl-stone); } /* setting labels + selects */ .lfield label { font-family: var(--sym-font-mono, monospace); font-size: .62rem; letter-spacing: .16em; color: var(--gl-stone); } #lyo-wrap select, #par-wrap select, #ant-wrap select, #ous-wrap select, #ept-wrap select, #rmi-wrap select, #eimi-wrap select, #kr-wrap select, .lyo-screen select { background: var(--gl-inset) !important; border: 1px solid var(--gl-line) !important; border-radius: 0 !important; color: var(--gl-bone) !important; font-family: var(--sym-font-sans, 'Inter', sans-serif) !important; } .lyo-screen select:focus { border-color: var(--gl-line-hi) !important; } /* ────────────────────────────────────────────────────────────────── SETTINGS — matched to the new two-pane picker (gpx-*). Rounded gold cards + SVG mode icons + segmented time/lives, driven by --sym-* (falling back to the grammar-screen --gl-* palette, then a literal). ────────────────────────────────────────────────────────────────── */ .lyo-screen #ant-wrap, .lyo-screen { --gpx-ac: var(--sym-gold, var(--gl-ac, #C4A448)); --gpx-ac-lt: var(--gl-gold-lt); } .lyo-screen .lmode-sel { gap: 10px; } .lyo-screen .lmode-btn { border-radius: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 15px; } .lyo-screen .lmode-btn::before { display: none; } /* drop the sharp top accent bar */ .lyo-screen .lmode-btn:hover { border-color: color-mix(in srgb, var(--sym-gold, var(--gl-ac)) 55%, transparent); } .lyo-screen .lmode-btn.selected { border-color: var(--sym-gold, var(--gl-ac)); background: color-mix(in srgb, var(--sym-gold, var(--gl-ac)) 10%, transparent); color: var(--gl-gold-lt); } .lyo-screen .lmode-btn .lm-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--gl-line); color: var(--sym-gold, var(--gl-ac)); filter: none; background: color-mix(in srgb, currentColor 4%, transparent); } .lyo-screen .lmode-btn.selected .lm-icon { color: var(--gl-gold-lt); border-color: color-mix(in srgb, var(--sym-gold, var(--gl-ac)) 45%, transparent); background: color-mix(in srgb, var(--sym-gold, var(--gl-ac)) 12%, transparent); } /* segmented controls (replace the time/lives dropdowns) */ .lyo-screen .gpx-seg { display: flex; flex-wrap: wrap; gap: 7px; } .lyo-screen .gpx-segbtn { cursor: pointer; min-width: 44px; text-align: center; padding: 8px 13px; border-radius: 9px; background: var(--gl-inset, color-mix(in srgb, currentColor 5%, transparent)); border: 1px solid var(--gl-line); color: var(--gl-stone, inherit); font-family: var(--sym-font-sans, 'Inter', sans-serif); font-size: .9rem; transition: all .14s; } .lyo-screen .gpx-segbtn:hover { color: var(--gl-bone, inherit); border-color: color-mix(in srgb, var(--sym-gold, var(--gl-ac)) 45%, transparent); } .lyo-screen .gpx-segbtn.on { color: var(--sym-ink, #11150c); font-weight: 600; border-color: transparent; background: var(--sym-gold, var(--gl-ac, #C4A448)); } .lyo-screen .lfield select[hidden] { display: none !important; } @media (prefers-reduced-motion: reduce){ .lyo-screen .gpx-segbtn { transition: none; } } /* mode-selection PAGE (multi-select games) — a full page, NOT a popup. Two-pane like the level picker: rail of quiz modes + arcade games, controls on the side. */ .gram-qs-page { position: fixed; inset: 0; z-index: 1500; display: none; overflow: auto; background: var(--sym-bg, var(--gl-bg, #14100b)); color: var(--sym-fg, var(--gl-bone, #efe6d4)); padding: 30px 22px 52px; } .gram-qs-page.active { display: block; } .gram-qs-page .gram-qs-inner { max-width: 1120px; margin: 0 auto; } .gram-qs-page .gram-qs-inner > h2 { margin: 10px 0 2px; font-size: 1.7rem; color: var(--gl-gold-lt); } .gram-qs-page .gpx-body { margin-top: 16px; min-height: 58vh; } .gram-qs-page .gpx-rail { width: 290px; } .gram-qs-page .gpx-railitem { padding: 11px 12px; } .gram-qs-page .gpx-railitem .nm { font-size: .94rem; } .gram-qs-page .gpx-detail { padding: 20px 26px; } .gram-qs-page .gram-qs-desc { color: var(--sym-fg-muted, var(--gl-stone, #9a8c70)); font-style: italic; margin: 2px 0 18px; font-size: 1.02rem; } .gram-qs-page .gram-qs-fieldlbl { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sym-fg-muted, var(--gl-stone, #9a8c70)); margin: 8px 0 10px; } .gram-qs-page .lmode-sel { display: grid; gap: 11px; margin: 0 0 18px; } .gram-qs-page .lmode-btn { padding: 16px 16px; } .gram-qs-page .gram-qs-eng-ic { display: flex; align-items: center; justify-content: center; width: 22px; color: var(--gpx-gold); } .gram-qs-page .gram-qs-railfav { margin-left: auto; flex-shrink: 0; } .gram-qs-page .gram-qs-go { margin-top: 20px; } .gram-qs-page .gram-qs-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .gram-qs-page .gram-qs-home { background: none; border: none; cursor: pointer; font-family: 'Cinzel', serif; font-size: 1.05rem; letter-spacing: .03em; color: var(--gl-gold-lt); } .gram-qs-page .gram-qs-home b { color: var(--gpx-gold-lt, var(--gl-gold-lt)); font-weight: 700; } .gram-qs-page .gram-qs-home:hover { filter: brightness(1.12); } /* combinatorial-config check pills */ .lcheck-pill { border: 1px solid var(--gl-line); border-radius: 0; color: var(--gl-cream); font-family: var(--sym-font-sans, 'Inter', sans-serif); font-size: .8rem; } .lcheck-pill:hover { border-color: color-mix(in srgb, var(--gl-ac) 50%, transparent); } .lcheck-pill.checked { background: color-mix(in srgb, var(--gl-ac) 12%, transparent); border-color: color-mix(in srgb, var(--gl-ac) 60%, transparent); color: var(--gl-ac-lt); } /* ────────────────────────────────────────────────────────────────── IN-PLAY — HUD ────────────────────────────────────────────────────────────────── */ .lgame-hdr { border-bottom: 1px solid var(--gl-line); } .lstat-lbl { font-family: var(--sym-font-mono, monospace); font-size: .58rem; letter-spacing: .18em; color: var(--gl-fog); } .lstat-val { font-family: var(--sym-font-display, 'Cinzel', serif); font-weight: 900; font-size: 1.3rem; color: var(--gl-gold); } .ltimer-warn { color: var(--gl-bad) !important; } .ltimer-caut { color: var(--gl-warn) !important; } .llives-row { color: #D86A6A; } /* hearts */ /* question box */ .lyo-screen .lqbox { background: var(--gl-panel); border: 1px solid var(--gl-line); border-radius: 0; position: relative; } .lyo-screen .lqbox::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gl-gold), transparent); opacity: .5; } .lqbox .lq-main { font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); font-size: 1.3rem; line-height: 1.45; color: var(--gl-bone); text-align: center; } .lqbox .lq-main em { color: var(--gl-gold); font-weight: 600; font-style: italic; } /* parsing tags — colour-coded by grammatical category */ .lq-tag { border-radius: 0; font-family: var(--sym-font-mono, monospace); font-size: .68rem; letter-spacing: .03em; font-weight: 500; background: var(--gl-inset); border: 1px solid var(--gl-line); color: var(--gl-stone); } .lq-tag.voice { color: var(--gl-voice); border-color: color-mix(in srgb, var(--gl-voice) 40%, transparent); background: color-mix(in srgb, var(--gl-voice) 12%, transparent); } .lq-tag.tense { color: var(--gl-tense); border-color: color-mix(in srgb, var(--gl-tense) 40%, transparent); background: color-mix(in srgb, var(--gl-tense) 12%, transparent); } .lq-tag.mood { color: var(--gl-mood); border-color: color-mix(in srgb, var(--gl-mood) 40%, transparent); background: color-mix(in srgb, var(--gl-mood) 12%, transparent); } .lq-tag.gender { color: var(--gl-person); border-color: color-mix(in srgb, var(--gl-person) 40%, transparent); background: color-mix(in srgb, var(--gl-person) 12%, transparent); } .lq-tag.form { color: var(--gl-form); border-color: color-mix(in srgb, var(--gl-form) 40%, transparent); background: color-mix(in srgb, var(--gl-form) 12%, transparent); } /* ── Multiple choice ── */ .lyo-screen .lopt-btn { background: color-mix(in srgb, var(--gl-cream) 2.5%, transparent); border: 1.5px solid var(--gl-line); border-radius: 0; font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); font-size: 1.45rem; color: var(--gl-cream); transition: all .15s; } .lyo-screen .lopt-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--gl-ac) 60%, transparent); background: color-mix(in srgb, var(--gl-ac) 10%, transparent); transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in srgb, var(--gl-ac) 22%, transparent); } .lyo-screen .lopt-btn.lcorrect { background: color-mix(in srgb, var(--gl-ok) 18%, transparent); border-color: var(--gl-ok); color: var(--gl-ok-lt); box-shadow: 0 0 18px color-mix(in srgb, var(--gl-ok) 40%, transparent); } .lyo-screen .lopt-btn.lwrong { background: color-mix(in srgb, var(--gl-bad) 14%, transparent); border-color: var(--gl-bad); color: var(--gl-bad-lt); } /* ── Fill-in & whole-form ── */ .lstem-part { background: var(--gl-inset); border: 1px solid var(--gl-line); border-right: none; border-radius: 0; color: var(--gl-bone); font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); font-size: 2.1rem; } #lyo-fi-input, .lfi-inp-wrap input[type="text"], .lyo-screen .lfi-wrap input[type="text"] { background: var(--gl-inset) !important; border: 2px solid color-mix(in srgb, var(--gl-ac) 55%, transparent) !important; border-radius: 0 !important; color: var(--gl-ac-lt) !important; font-family: var(--sym-font-serif, 'Cormorant Garamond', serif) !important; font-size: 2.1rem !important; caret-color: var(--gl-ac) !important; } #lyo-fi-input:focus, .lyo-screen .lfi-wrap input[type="text"]:focus { border-color: var(--gl-ac) !important; box-shadow: 0 6px 24px color-mix(in srgb, var(--gl-ac) 18%, transparent); } #lyo-fi-input.lcorrect, .lyo-screen .lfi-wrap input.lcorrect { border-color: var(--gl-ok) !important; color: var(--gl-ok-lt) !important; background: color-mix(in srgb, var(--gl-ok) 10%, transparent) !important; } #lyo-fi-input.lwrong, .lyo-screen .lfi-wrap input.lwrong { border-color: var(--gl-bad) !important; color: var(--gl-bad-lt) !important; background: color-mix(in srgb, var(--gl-bad) 10%, transparent) !important; } .lfi-submit { background: var(--gl-ac) !important; color: var(--sym-ink, #0A0805) !important; border-radius: 0 !important; font-family: var(--sym-font-sans, 'Inter', sans-serif) !important; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; } .lfi-submit:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); } /* polytonic keyboard */ .lpoly-kb { background: var(--gl-panel); border: 1px solid var(--gl-line); border-radius: 0; } .lpoly-toggle { font-family: var(--sym-font-mono, monospace); font-size: .6rem; letter-spacing: .16em; } .lpoly-toggle:hover, .lpoly-toggle.open { color: var(--gl-ac-lt); } .lpoly-dkey, .lpoly-vkey { background: var(--gl-inset); border: 1px solid var(--gl-line); border-radius: 0; font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); color: var(--gl-bone); } .lpoly-dkey:hover, .lpoly-vkey:hover { border-color: color-mix(in srgb, var(--gl-ac) 50%, transparent); background: color-mix(in srgb, var(--gl-ac) 10%, transparent); } .lpoly-dkey.ldkey-active { border-color: var(--gl-ac); background: color-mix(in srgb, var(--gl-ac) 20%, transparent); color: var(--gl-ac-lt); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gl-ac) 30%, transparent); } /* feedback line */ .lfeedback { font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); font-style: italic; color: var(--gl-stone); } .lfeedback.lok { color: var(--gl-ok-lt); } .lfeedback.lerr { color: var(--gl-bad-lt); } /* ── Matching ── */ .lq-tag, .lcheck-pill, .lvl-badge { } /* (kept above) */ /* ── Chrono (tense replacement) table ── */ .lyo-chrono-tense { font-family: var(--sym-font-mono, monospace); letter-spacing: .1em; color: var(--gl-person); } .lyo-chrono-given-row { background: color-mix(in srgb, var(--gl-gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gl-gold) 30%, transparent); border-left: 3px solid var(--gl-gold); border-radius: 0; } .lyo-chrono-given-row .lyo-chrono-tense { color: var(--gl-gold); } .lyo-chrono-stem { background: var(--gl-inset); border: 1px solid var(--gl-line); border-right: none; border-radius: 0; color: var(--gl-bone); font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); } .lyo-chrono-given-stem { color: var(--gl-gold-lt); background: color-mix(in srgb, var(--gl-gold) 6%, transparent); border-color: color-mix(in srgb, var(--gl-gold) 30%, transparent); } .lyo-chrono-given-val { color: var(--gl-gold-lt); background: color-mix(in srgb, var(--gl-gold) 6%, transparent); border: 1px solid color-mix(in srgb, var(--gl-gold) 30%, transparent); border-radius: 0; font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); } .lyo-chrono-inp { background: var(--gl-inset); border: 2px solid color-mix(in srgb, var(--gl-form) 55%, transparent); border-radius: 0; color: var(--gl-bone); caret-color: var(--gl-form); font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); } .lyo-chrono-inp:focus { border-color: var(--gl-form); } .lyo-chrono-inp.lcorrect { border-color: var(--gl-ok); color: var(--gl-ok-lt); background: color-mix(in srgb, var(--gl-ok) 10%, transparent); } .lyo-chrono-inp.lwrong { border-color: var(--gl-bad); color: var(--gl-bad-lt); background: color-mix(in srgb, var(--gl-bad) 10%, transparent); } /* ────────────────────────────────────────────────────────────────── RESULT (end screen) ────────────────────────────────────────────────────────────────── */ .lend-screen h2 { font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); font-weight: 500; font-size: 2.6rem; color: var(--gl-bone); } .lbig-score { font-family: var(--sym-font-display, 'Cinzel', serif); font-weight: 900; font-size: 4rem; color: var(--gl-gold); text-shadow: 0 0 24px color-mix(in srgb, var(--gl-gold) 30%, transparent); } .lmistakes-hdr { font-family: var(--sym-font-mono, monospace); letter-spacing: .14em; color: var(--gl-stone); } .lmistake-row { background: var(--gl-panel); border: 1px solid var(--gl-line); border-left: 3px solid var(--gl-bad); border-radius: 0; } .lm-q { font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); font-style: italic; color: var(--gl-stone); } .lm-ans { font-family: var(--sym-font-serif, 'Cormorant Garamond', serif); } .lm-wrong { color: var(--gl-bad-lt); } .lm-correct { color: var(--gl-ok-lt); } /* ────────────────────────────────────────────────────────────────── PER-SUBJECT ACCENT OVERRIDES (optional) Each grammar wrap can carry its own home accent; default stays sage. Set on the overlay-frame: e.g.
or just rely on these wrap-id rules. ────────────────────────────────────────────────────────────────── */ /* Each wrap sets only its home --gl-ac; --gl-ac-lt is derived adaptively above. */ #ant-wrap .lyo-screen { --gl-ac: #6FB0BE; } /* antonyms → aegean */ #ept-wrap .lyo-screen, #late-wrap .lyo-screen { --gl-ac: #C58BAE; } /* adjectives → wine-rose */ #par-wrap .lyo-screen { --gl-ac: #C4A448; } /* degrees → gold */ #ous-wrap .lyo-screen, #latn-wrap .lyo-screen { --gl-ac: #7E9560; } /* nouns → sage */ /* ────────────────────────────────────────────────────────────────── Reduced-motion ────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .lyo-screen, .lyo-screen * { animation: none !important; transition: none !important; } } /* ────────────────────────────────────────────────────────────────── LEVEL-SELECT SIZE BOOST Card 70 % wider (720 → ~1224 px) + larger typography throughout. Overrides game.css; no JS touched. ────────────────────────────────────────────────────────────────── */ /* ── Card container ── */ .lyo-screen .lcard { max-width: 1224px !important; /* 720 × 1.7 */ } /* The levels-screen card also has a separate max-height rule — keep it */ .lscreen-levels .lcard { max-width: 1224px !important; } /* ── Card headings ── */ .lyo-screen .lcard h1 { font-size: 2.4rem !important; } /* was 1.8 */ .lyo-screen .lcard h2 { font-size: 1.55rem !important; } /* was 1.15 */ .lyo-screen .lcard h3 { font-size: 0.88rem !important; } /* was 0.64/0.7 */ /* ── Mood section headers ── */ .lmood-hd { font-size: 0.84rem !important; letter-spacing: .22em !important; } /* ── Level chips — wider + larger text ── */ .lyo-screen .lvl-card { min-width: 220px !important; /* was 130 */ max-width: 360px !important; /* was 210 */ padding: 14px 18px !important; } .lvl-card .lnum { font-size: 0.75rem !important; } /* was 0.58–0.6 */ .lvl-card .ldesc { font-size: 1.05rem !important; } /* was 0.78–0.95 */ /* ── Progress badge ── */ .lvl-badge { font-size: 0.78rem !important; padding: 3px 10px !important; } /* ── Level-grid gap to breathe at the new size ── */ .lvl-grid { gap: 12px !important; padding-bottom: 10px !important; }