/* Alap Bet - glass cards under a quiet sky. Dark: a lo-fi night (the palette of My First Night in
   Tokyo) with letters that glow like small neon signs. Light: the same sky at dawn, ink on paper.
   Phone first; one column that gets roomier when wider. */

@font-face { font-family: Fredoka; src: url('../assets/fonts/fredoka-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Fredoka; src: url('../assets/fonts/fredoka-latin-ext.woff2') format('woff2'); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF; }
/* the Eastern (Madnhaya) style the schools teach; only ever used for Syriac letters */
/* no unicode-range and no swap: Syriac text waits for this font and is never drawn, even for a moment, in the device's own Syriac font */
@font-face { font-family: 'Noto Sans Syriac Eastern'; src: url('../assets/fonts/noto-sans-syriac-eastern.woff2') format('woff2'); font-weight: 100 900; font-display: block; }

:root {
  --sky: linear-gradient(#070a24 0%, #14205f 45%, #2a2670 78%, #3d3184 100%);
  --base: #0b0d26;
  --stars: .8;
  --glow-a: rgba(255, 106, 184, .22);
  --glow-b: rgba(95, 240, 230, .16);
  --glass: rgba(18, 22, 58, .78);
  --glass-2: rgba(36, 44, 96, .62);
  --panel: rgba(16, 20, 54, .97);
  --veil: rgba(5, 7, 26, .62);
  --line: rgba(150, 170, 255, .32);
  --text: #eef1ff;
  --soft: #a9b3e0;
  --accent: #5ff0e6;
  --magenta: #ff6ab8;
  --warm: #ffc070;
  --good: #7dffb0;
  --bad: #ff8a8a;
  --glyph: #eafffd;
  --glyph-glow: 0 0 12px rgba(95, 240, 230, .55);
  --glyph-glow-big: 0 0 14px rgba(95, 240, 230, .8), 0 0 34px rgba(95, 240, 230, .4);
  --done-glow: 0 0 12px rgba(255, 192, 112, .7);
  --tile: radial-gradient(circle at 50% 40%, rgba(95, 240, 230, .16), rgba(8, 10, 34, .7) 75%);
  --primary: linear-gradient(180deg, #6ff5ec, #2fbdb6);
  --primary-text: #06262b;
  --guide: rgba(200, 215, 255, .3);
  --ink: #5ff0e6;
  --demo: #ffc070;
  --progress-bg: rgba(255,192,112,.12);
  --progress-line: rgba(255,192,112,.45);
  --progress-track: rgba(0,0,0,.35);
  --radius: 16px;
  --syriac: 'Noto Sans Syriac Eastern', serif;
}
:root[data-theme='light'] {
  --sky: linear-gradient(#e9e6fb 0%, #f6e3ee 50%, #fdf1e4 100%);
  --base: #fdf1e4;
  --stars: 0;
  --glow-a: rgba(255, 140, 190, .22);
  --glow-b: rgba(90, 200, 200, .2);
  --glass: rgba(255, 255, 255, .7);
  --glass-2: rgba(255, 255, 255, .78);
  --panel: #fffaf4;
  --veil: rgba(60, 50, 110, .38);
  --line: rgba(70, 60, 140, .24);
  --text: #231f45;
  --soft: #625c8c;
  --accent: #0e8f8a;
  --magenta: #d02f86;
  --warm: #c67a12;
  --good: #14805a;
  --bad: #c2453d;
  --glyph: #2a2370;
  --glyph-glow: none;
  --glyph-glow-big: none;
  --done-glow: none;
  --tile: linear-gradient(180deg, #fff, #f1ecff);
  --primary: linear-gradient(180deg, #2fc2ba, #159b95);
  --primary-text: #fff;
  --guide: rgba(42, 35, 112, .22);
  --ink: #0e8f8a;
  --demo: #d02f86;
  --progress-bg: rgba(255,170,60,.18);
  --progress-line: rgba(200,120,20,.45);
  --progress-track: rgba(60,40,90,.15);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--base); }
body {
  margin: 0; min-height: 100dvh; color: var(--text); background: var(--sky) fixed;
  font: 400 17px/1.45 Fredoka, system-ui, sans-serif; -webkit-tap-highlight-color: transparent;
}
/* stars, and a soft glow low on the horizon */
body::before, body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  opacity: var(--stars);
  background-image:
    radial-gradient(1.2px 1.2px at 12% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 31% 19%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 54% 6%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 14%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 88% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 8% 31%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 44% 27%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 66% 35%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 93% 29%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 47%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 79% 52%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 37% 61%, #cfd8ff 50%, transparent 51%);
}
body::after { background: radial-gradient(60% 34% at 12% 104%, var(--glow-a), transparent 70%), radial-gradient(70% 38% at 92% 106%, var(--glow-b), transparent 70%); }

/* light <-> dark: the whole page cross-fades like a slow dissolve (View Transitions); browsers
   without it ease each colour instead */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .9s; animation-timing-function: ease-in-out; }
.set, .letter, .icon-button, .button, .activity, .shape, .panel, .progress-bar, .letter-big, .choice, .glyph, .muted, .lede, .name, .kicker, body {
  transition: background-color .7s ease, border-color .7s ease, color .7s ease, text-shadow .7s ease;
}

h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
/* focus rings: never from a tap or a click; only when someone is moving about with the keyboard (Tab) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button, a, canvas { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.syr { font-family: var(--syriac); font-weight: 400; line-height: 1.6; }
.muted { color: var(--soft); }
.small { font-size: 14px; }
.kicker { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.neon { color: var(--glyph); text-shadow: var(--glyph-glow-big); }

#app { max-width: 640px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); }

.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.top h1 { font-size: 34px; line-height: 1.15; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; }
.top h1 .syr { font-size: 32px; }
.lede { margin-top: 6px; color: var(--soft); }

.icon-button {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.top-buttons { display: flex; gap: 8px; flex: none; }
.icon-button svg { width: 22px; height: 22px; }

.progress { display: flex; align-items: center; gap: 12px; margin: 20px 0 8px; padding: 12px 16px; border-radius: 99px; background: var(--progress-bg); border: 1px solid var(--progress-line); }
.progress-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--progress-track); overflow: hidden; }
#progress-fill { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--warm), var(--magenta)); transition: width .4s ease; }
#progress-text { flex: none; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); }
#progress-text svg { width: 16px; height: 16px; color: var(--warm); }

.part { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 30px; }
.part:first-child { margin-top: 18px; }
.part h2 { font-size: 26px; font-weight: 700; line-height: 1.2; }
.part .muted { margin-top: 2px; font-size: 15px; }
.set { margin-top: 12px; padding: 14px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.set-head { margin-bottom: 10px; }
.set-head h3 { font-size: 17px; font-weight: 600; }

/* letters run right to left, as they do on the page */
.letters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; direction: rtl; }
.letter {
  direction: ltr; display: grid; justify-items: center; align-content: start; padding: 4px 2px 8px; min-height: 98px;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 14px;
}
.letter .glyph { font-family: var(--syriac); font-size: 36px; line-height: 1.6; color: var(--glyph); text-shadow: var(--glyph-glow); }
.letter .name { font-size: 12.5px; font-weight: 500; line-height: 1.2; text-align: center; color: var(--soft); padding: 0 2px 4px; }
.letter .stars { margin-top: auto; }
.letter.is-done { border-color: var(--warm); }
.letter.is-done .glyph { text-shadow: var(--done-glow); }
.letter:active { transform: scale(.97); }
@media (hover: hover) { .letter:hover, .activity:not(:disabled):hover { border-color: var(--accent); } }

.stars { display: inline-flex; gap: 1px; }
.stars svg { width: 11px; height: 11px; fill: none; stroke: var(--soft); stroke-width: 2; opacity: .65; }
.stars svg.is-on { fill: var(--warm); stroke: var(--warm); opacity: 1; }

.foot { margin-top: 26px; font-size: 13px; color: var(--soft); text-align: center; }
a { color: var(--accent); text-underline-offset: 2px; }

/* the sheet: from the bottom on a phone, centred on anything wider */
.overlay {
  position: fixed; inset: 0; z-index: 10; display: grid; align-items: end;
  padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
  background: var(--veil); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
/* a card floating above the bottom edge: the same border and corners all the way round */
.panel {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; margin: 0 auto;
  padding: 22px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px; animation: rise .22s ease-out;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
@keyframes rise { from { transform: translateY(24px); } }
@media (min-width: 640px) { .overlay { align-items: center; padding: 24px; } }
.panel .close { position: absolute; top: 14px; right: 14px; z-index: 1; }
.panel h3 { margin-top: 20px; font-size: 16px; font-weight: 600; }
.pane > h2 { margin-top: 4px; padding-right: 52px; font-size: 24px; line-height: 1.2; }

.letter-head { display: flex; align-items: center; gap: 16px; padding-right: 52px; }
.letter-big {
  flex: none; width: 112px; height: 112px; display: grid; place-items: center; font-size: 60px; line-height: 1;
  color: var(--glyph); text-shadow: var(--glyph-glow-big); background: var(--tile); border: 1px solid var(--accent); border-radius: 20px;
}
.letter-big.centre { margin: 18px auto 4px; width: 140px; height: 140px; font-size: 76px; }
.letter-head h2 { font-size: 28px; font-weight: 700; line-height: 1.1; }

.button {
  width: 100%; min-height: 52px; margin-top: 14px; padding: 10px 16px; display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  font-weight: 600; border: 1px solid var(--line); border-radius: 14px; background: var(--glass-2);
}
.button svg { width: 20px; height: 20px; flex: none; }
.button.primary { background: var(--primary); border-color: transparent; color: var(--primary-text); }
.button.ghost:disabled { color: var(--soft); border-style: dashed; background: none; cursor: default; }
.button.danger { color: var(--bad); border-color: var(--bad); background: none; }
.button.danger.solid { background: var(--bad); color: var(--panel); }
.confirm { margin-top: 14px; padding: 14px; border: 1px solid var(--bad); border-radius: 14px; }
.confirm p { font-weight: 600; }
.button.compact svg { width: 18px; height: 18px; }
.button.compact { width: auto; min-height: 40px; margin-top: 0; padding: 6px 14px; font-size: 15px; flex: none; }
#quiz-listen { margin-top: 12px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* the four stars of one letter */
.activities { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.activity {
  min-height: 56px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; text-align: left; font-weight: 600;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 14px;
}
.activity > svg:first-child { width: 22px; height: 22px; flex: none; color: var(--accent); }
.activity span { flex: 1; line-height: 1.15; }
.activity small { display: block; font-size: 12px; font-weight: 400; color: var(--soft); }
.activity > svg:last-child { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--soft); stroke-width: 2; opacity: .7; }
.activity.is-earned { border-color: var(--warm); }
.activity.is-earned > svg:last-child { fill: var(--warm); stroke: var(--warm); opacity: 1; }
.activity:disabled { border-style: dashed; color: var(--soft); cursor: default; }
.activity:disabled > svg:first-child { color: var(--soft); }

/* learn it: one row for each shape that really looks different, with a word that shows it */
.variants { display: grid; gap: 8px; margin: 10px 0 18px; }
.variant { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 4px 14px; padding: 8px 12px 8px 8px; background: var(--glass-2); border: 1px solid var(--line); border-radius: 14px; }
.variant .glyph { grid-row: span 2; display: grid; place-items: center; height: 84px; font-family: var(--syriac); font-size: 44px; line-height: 1.6; color: var(--glyph); text-shadow: var(--glyph-glow); background: var(--tile); border: 1px solid var(--line); border-radius: 10px; }
.variant .label { align-self: end; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.variant .example { align-self: start; display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; }
.variant .word { font-size: 34px; }
.variant .none { font-size: 14px; color: var(--soft); }
#learn-sound { margin-top: 4px; font-size: 18px; }
#learn .button { margin-top: 10px; }
.activity.is-wide { grid-column: 1 / -1; }

.shapes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 8px; }
.shape { direction: ltr; display: grid; justify-items: center; padding: 2px 2px 8px; background: var(--glass-2); border: 1px solid var(--line); border-radius: 12px; }
.shape .glyph { font-family: var(--syriac); font-size: 38px; line-height: 1.6; color: var(--glyph); }
.shape .label { font-size: 13px; color: var(--soft); }

.word-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.word { display: inline-flex; font-size: 44px; color: var(--glyph); }
.word .tile { padding: 0; background: none; border: 0; border-radius: 8px; font: inherit; color: inherit; line-height: 1.6; }
.word .tile.is-this { color: var(--magenta); }
.word.big { display: flex; justify-content: center; margin: 18px 0 6px; font-size: 70px; }
.word.big .tile { min-width: 44px; padding: 0 1px; border-bottom: 3px solid transparent; }
.word.big .tile.is-found { color: var(--good); border-bottom-color: var(--good); }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.choice {
  min-height: 104px; font-family: var(--syriac); font-size: 54px; line-height: 1.5; color: var(--glyph); text-shadow: var(--glyph-glow);
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 16px;
}
.choice.is-right { border-color: var(--good); box-shadow: inset 0 0 0 2px var(--good); }
.is-wrong { animation: shake .3s; }
.choice.is-wrong { border-color: var(--bad); }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.feedback { min-height: 26px; margin-top: 12px; text-align: center; font-weight: 600; color: var(--good); }
.feedback.is-hint { color: var(--warm); }

.feedback { min-height: 26px; }
#write .feedback { margin-top: 8px; }
#write .button { margin-top: 10px; }
.write-canvas {
  display: block; width: min(100%, 300px); aspect-ratio: 1; height: auto; margin: 14px auto 0; touch-action: none; cursor: crosshair;
  background: var(--tile); border: 1px solid var(--accent); border-radius: 20px;
}
#summary-list { margin-top: 14px; }

#help > .muted { margin-top: 12px; }
#help strong { color: var(--text); font-weight: 600; }
.help-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.help-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: var(--glass-2); border: 1px solid var(--line); border-radius: 14px; color: var(--soft); line-height: 1.35; }
.help-list svg { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--accent); }
.help-list strong { display: block; }

@media (min-width: 640px) {
  #app { padding-top: 40px; }
  .top h1 { font-size: 42px; }
  .letter { min-height: 114px; }
  .letter .glyph { font-size: 44px; }
  .stars svg { width: 13px; height: 13px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- the opening: a ring fills while the fonts arrive, the first letter lands in it, then the page rises in ---- */
.splash { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 22px; cursor: pointer; -webkit-tap-highlight-color: transparent; background: var(--sky); transition: opacity .45s ease, visibility 0s .45s; }
.splash-mark { position: relative; width: 132px; height: 132px; display: grid; place-items: center; transition: transform .45s ease; }
.splash-title { font-size: 40px; font-weight: 700; line-height: 1.1; }
.splash-hint { min-height: 1.5em; font-size: 15px; color: var(--soft); transition: opacity .35s ease; }
.splash.is-ready .splash-hint { color: var(--text); animation: splash-hint 2.2s ease-in-out .4s infinite; }
/* no focus ring: the script focuses the splash itself, and any key or tap anywhere lets you in */
.splash, .splash:focus, .splash:focus-visible { outline: none; }
@keyframes splash-hint { 50% { opacity: .45; } }
.splash-mark svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.splash-mark circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.splash-track { stroke: var(--line); }
.splash-fill { stroke: var(--accent); stroke-dasharray: 276.5; stroke-dashoffset: 276.5; animation: splash-fill 2.4s cubic-bezier(.2, .7, .3, 1) forwards; transition: stroke-dashoffset .35s ease; }
.splash-mark .syr { font-size: 64px; line-height: 1; color: var(--glyph); text-shadow: var(--glyph-glow-big); opacity: 0; transform: scale(.6); transition: opacity .35s ease, transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.splash.is-ready .splash-fill { animation: none; stroke-dashoffset: 0; }
.splash.is-ready .syr { opacity: 1; transform: none; }
.splash.is-leaving { opacity: 0; visibility: hidden; }
.splash.is-leaving .splash-mark { transform: scale(1.25); }
@keyframes splash-fill { to { stroke-dashoffset: 70; } }
#app { transition: opacity .5s ease, transform .5s ease; }
body.is-loading #app { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) { .splash, .splash-mark, .splash-mark .syr, #app { transition-duration: .01s; } .splash.is-ready .splash-hint { animation: none; } .splash-fill { animation-duration: .01s; } body.is-loading #app { transform: none; } }