/* Early Brailler — styles. Colours/fonts/sizes are driven by CSS variables
   set from teacher settings (js/settings.js). */
:root {
  --fg: #1a1030;
  --bg: #fff8ee;
  --dot: #7c3aed;
  --accent: #ff5da2;
  --font: 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif;
  --font-scale: 1;
  --ui-scale: 1;
  --cell-scale: 1;
  /* Card surface follows the theme so text stays legible in every colour scheme
     (including high-contrast white-on-black / yellow-on-black). */
  --card: color-mix(in srgb, var(--fg) 7%, var(--bg));
  --shadow: 0 6px 0 rgba(0,0,0,.12), 0 12px 26px rgba(0,0,0,.14);
}

* { box-sizing: border-box; }

/* Screen-reader-only content (announcements, hidden labels). */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
/* Clear keyboard focus indicator everywhere. */
:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.game-title:focus { outline: none; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--fg);
  background: var(--bg);
  font-size: calc(18px * var(--font-scale));
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
#app { height: 100%; }

button { font-family: inherit; cursor: pointer; }
.btn {
  border: none; border-radius: 16px; padding: .7em 1.2em;
  font-size: 1.05em; font-weight: 700; color: #fff; background: var(--accent);
  box-shadow: 0 4px 0 rgba(0,0,0,.18); transition: transform .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: none; border: 2px solid color-mix(in srgb, var(--fg) 30%, transparent); }
.btn.primary { background: var(--accent); }

.icon-btn {
  border: none; background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg); width: calc(46px * var(--ui-scale)); height: calc(46px * var(--ui-scale));
  border-radius: 50%; display: grid; place-items: center; transition: transform .1s, background .1s;
  flex: 0 0 auto;
}
.icon-btn svg { width: 58%; height: 58%; }
.icon-btn:hover { background: color-mix(in srgb, var(--fg) 16%, transparent); }
.icon-btn:active { transform: scale(.92); }

/* ---- screens ---- */
.screen { display: none; height: 100%; flex-direction: column; }
.screen.active { display: flex; }

/* ---- home ---- */
.home-header, .game-header {
  display: flex; align-items: center; gap: 12px;
  padding: calc(7px * var(--ui-scale)) calc(16px * var(--ui-scale));
  flex: 0 0 auto;   /* the header is a fixed strip; the stage below gets all remaining height */
}
.app-title {
  margin: 0; font-size: calc(1.8em * var(--ui-scale)); flex: 1;
  display: flex; align-items: center; gap: .3em;
}
.sah-logo { height: calc(2.4em * var(--ui-scale)); width: auto; flex: 0 0 auto; display: block; }
.title-dot { color: var(--dot); }
.settings-btn { flex: 0 0 auto; }

.game-grid {
  flex: 1; min-height: 0; overflow: hidden; display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: calc(12px * var(--ui-scale));
  /* Top padding matches the sides so the first-row focus outline isn't clipped
     by overflow:hidden. */
  padding: calc(11px * var(--ui-scale)) calc(16px * var(--ui-scale)) calc(10px * var(--ui-scale));
}
.game-card {
  background: var(--card); border: none; border-radius: 22px;
  box-shadow: var(--shadow); padding: 10px 12px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: transform .1s; position: relative; color: var(--fg);
  border: 3px solid transparent;
  min-width: 0; min-height: 0; overflow: hidden;   /* stretch to fill the 5x4 cell */
}
.game-card:hover { transform: translateY(-4px) scale(1.02); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.game-card:active { transform: translateY(0) scale(.99); }
.game-card:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }
.card-badge {
  position: absolute; top: 10px; left: 10px; width: 34px; height: 51px;
}
.card-emoji { font-size: calc(3.2em * var(--ui-scale)); line-height: 1; margin-top: 6px; }
.card-title { font-weight: 800; font-size: 1.05em; }
.card-sub { font-size: .78em; opacity: .7; }

.home-foot { text-align: center; opacity: .6; font-size: .85em; margin: 4px 0 10px; }

/* ---- game screen ---- */
.game-title { margin: 0; flex: 1; text-align: center; font-size: calc(1.5em * var(--ui-scale)); }
.game-stage { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 16px; }
/* Full-bleed canvas for VisualStage sensory activities. */
.visual-wrap { position: absolute; inset: 0; width: 100%; height: 100%; }
.visual-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.visual-wrap + .status-line, .visual-wrap ~ .status-line { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; z-index: 2; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
/* The old bottom toolbar is gone — per-activity options now live in the gear
   (Teacher settings) panel, giving the full screen to the braille dots. */
.game-toolbar { display: none; }
.toolbar-check { display: inline-flex; align-items: center; gap: 8px; font-size: .95em; font-weight: 600; background: color-mix(in srgb, var(--fg) 6%, transparent); padding: 8px 14px; border-radius: 999px; }
.toolbar-check input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ---- braille cell (SVG) ---- */
.brl-cell { width: 100%; height: 100%; display: block; }
/* fill + fill-opacity (NOT color-mix) so the faint "empty dot" ghosts still
   render on older iPad Safari — color-mix needs Safari 16.2+, and without the
   ghosts a child loses the empty-cell reference that braille learning needs. */
.brl-cell .brl-dot { fill: var(--fg); fill-opacity: .10; transition: fill .06s, fill-opacity .06s, transform .1s;
  transform-box: fill-box; transform-origin: center; }   /* scale/pop grow from each dot's own centre, not the SVG corner */
.brl-cell.no-ghosts .brl-dot { fill-opacity: 0; }
.brl-cell .brl-dot.on { fill: var(--dot); fill-opacity: 1; }
.brl-cell .brl-dot.pop { animation: dotpop .28s ease; }
@keyframes dotpop { 0%{ transform: scale(.4); } 60%{ transform: scale(1.25); } 100%{ transform: scale(1); } }

.big-cell-wrap {
  width: min(58vh, 88vw); height: min(87vh, 132vw);
  max-height: min(82vh, 100%);   /* never taller than the stage (short landscape screens) */
  /* The cell is as big as possible, but MUST yield to its siblings: in games
     that also show a scoreboard, prompt bar and Start button it shrinks to fit
     instead of pushing them off the (overflow:hidden) stage. */
  flex: 0 1 auto; min-height: 0;
  transform: scale(var(--cell-scale)); transform-origin: center;
  display: grid; place-items: center;
}

.brl-mini-wrap { display: inline-block; width: 34px; }
.brl-mini { width: 100%; height: auto; }
.brl-mini .brl-dot { fill: var(--fg); fill-opacity: .16; }
.brl-mini .brl-dot.on { fill: var(--dot); fill-opacity: 1; }

/* ---- picture display ---- */
.pic-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; height: 100%; min-height: 0; justify-content: center; }
/* flex:0 1 auto + min-height:0 so on short (landscape) screens the whole row
   shrinks to fit the stage instead of overflowing up under the header. */
.pic-row { display: flex; align-items: center; justify-content: center; gap: 4vw; width: 100%; flex-wrap: nowrap; flex: 0 1 auto; min-height: 0; max-height: 100%; }
.pic-cell-holder { flex: 0 1 auto; min-height: 0; width: min(52vh, 42vw); height: min(78vh, 63vw); max-height: 100%; }
.pic-img-holder {
  width: min(46vh, 56vw); height: min(46vh, 56vw);
  min-height: 0; max-height: 100%; flex: 0 1 auto;
  display: grid; place-items: center;
}
/* Scale the picture UP to fill the box (keeping its aspect) — the source SVGs
   are only ~300px wide, and max-width alone would leave them tiny on screen. */
.pic-img-holder img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
[data-image-style="contrast"] .pic-img-holder img { filter: grayscale(1) contrast(2.2) brightness(.9) drop-shadow(0 0 2px var(--fg)); }
.pic-letter { font-size: min(16vh, 24vw); font-weight: 900; line-height: 1; color: var(--accent); flex: 0 0 auto; }
.pic-word { font-size: calc(1.6em * var(--ui-scale)); font-weight: 800; text-transform: capitalize; }
.wb-letters { display: flex; gap: min(2vw, 14px); flex-wrap: wrap; justify-content: center; margin-bottom: 6px; }
.wb-slot { font-size: min(11vh, 13vw); font-weight: 900; line-height: 1; color: var(--fg); opacity: .3; transition: opacity .15s, color .15s, transform .15s; }
.wb-slot.done { opacity: 1; color: var(--accent); transform: translateY(-4px); }
/* Two to Tango legend — deliberately stays visible even when other on-screen
   text is hidden, so a partner/teacher can see who owns which keys. */
.tango-legend { text-align: center; font-weight: 800; font-size: 1.05em; opacity: .9; margin: 2px 0 6px; }
.pop-in { animation: popin .4s cubic-bezier(.2,1.4,.5,1); }
@keyframes popin { 0%{ transform: scale(0); opacity: 0; } 100%{ transform: scale(1); opacity: 1; } }

/* ---- prompt / challenge ---- */
.prompt-bar {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 20px;
  padding: 12px 22px; margin-bottom: 10px; flex-wrap: wrap;
}
.prompt-label { font-size: 1.2em; font-weight: 800; }
.prompt-target { font-size: 2.4em; font-weight: 900; color: var(--accent); }
.replay-btn { background: var(--dot); color:#fff; }

.status-line { font-size: 1.3em; font-weight: 800; min-height: 1.4em; text-align: center; margin-top: 8px; }
.status-line.good { color: #16a34a; }
.status-line.bad { color: #dc2626; }

.scoreboard { display: flex; gap: 18px; justify-content: center; font-weight: 800; margin-bottom: 6px; }
.scoreboard .pill { background: color-mix(in srgb, var(--fg) 8%, transparent); border-radius: 999px; padding: 6px 16px; }

/* ---- Simon lights ---- */
.simon-cell-big { width: min(40vh, 60vw); height: min(60vh, 90vw); max-height: min(56vh, 100%); }
.simon-flash .brl-dot.on { filter: drop-shadow(0 0 16px var(--dot)); }

/* ---- key hints ---- */
.key-hints { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
[data-hints="off"] .key-hints { display: none; }
/* Hide on-screen instructional/status text to maximise the dot & effect area for
   low vision — but keep it in the DOM (clipped) so screen readers still announce it. */
[data-text="off"] .status-line,
[data-text="off"] .prompt-label {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.key-hint { background: color-mix(in srgb, var(--fg) 8%, transparent); border-radius: 12px; padding: 6px 10px; font-weight: 700; font-size: .8em; text-align: center; min-width: 46px; }
.key-hint b { display: block; font-size: 1.3em; color: var(--dot); }
.key-hint.active { background: var(--dot); color: #fff; }
.key-hint.active b { color: #fff; }

/* ---- settings overlay ---- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.overlay[hidden] { display: none; }
.settings-dialog { background: var(--bg); color: var(--fg); width: min(560px, 100%); max-height: 90vh; border-radius: 22px; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.settings-head { display: flex; align-items: center; padding: 16px 20px; border-bottom: 2px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.settings-head h2 { margin: 0; flex: 1; }
.settings-body { overflow-y: auto; padding: 12px 20px; display: flex; flex-direction: column; gap: 18px; }
.settings-actions { display: flex; gap: 12px; justify-content: flex-end; padding: 14px 20px; border-top: 2px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.set-group { display: flex; flex-direction: column; gap: 8px; }
.set-group > label { font-weight: 800; font-size: .95em; }
.set-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.set-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.set-row input[type="color"] { width: 46px; height: 40px; border: none; border-radius: 8px; background: none; }
.set-row select { padding: 8px 10px; border-radius: 10px; font-size: 1em; font-family: inherit; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-swatch { border: 2px solid rgba(0,0,0,.15); border-radius: 12px; padding: 8px 10px; font-size: .8em; font-weight: 700; cursor: pointer; }
.color-fields { display: flex; gap: 16px; flex-wrap: wrap; }
.color-fields label { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .78em; font-weight: 700; }

/* ---- braille input field (teacher brailles the target cells) ---- */
.bfield { display: flex; flex-direction: column; gap: 6px; }
.bfield-row { display: flex; align-items: stretch; gap: 10px; }
.bfield-box { flex: 1; min-height: 56px; padding: 8px 12px; border-radius: 12px;
  border: 3px solid color-mix(in srgb, var(--fg) 30%, transparent); background: color-mix(in srgb, var(--fg) 5%, var(--bg));
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; cursor: text; }
.bfield-box.focused { border-color: var(--accent); }
.bfield-box:focus-visible { outline: none; border-color: var(--accent); }
.bfield-hint { opacity: .6; font-size: .9em; }
.bfield-cells { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.bfield-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bfield-chip .brl-mini-wrap { width: 20px; }
.bfield-chip-lab { font-size: .8em; font-weight: 700; }
.bfield-clear { align-self: center; }

/* ---- help panel ---- */
.help-dialog { width: min(720px, 100%); }
.help-body { gap: 22px; }
.help-section { display: flex; flex-direction: column; gap: 10px; }
.help-h { margin: 0; font-size: 1.15em; font-weight: 800; color: var(--accent); }
.help-p { margin: 0; line-height: 1.45; }
.help-cell-diagram { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 48px; justify-content: center; padding: 6px 0; }
.help-keycell { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.help-dotnum { width: 52px; height: 52px; border-radius: 50%; background: var(--dot); color: var(--bg); display: grid; place-items: center; font-size: 1.5em; font-weight: 900; }
.help-keylab { font-size: .8em; font-weight: 700; opacity: .85; }
.help-example { display: flex; align-items: center; gap: 16px; }
.help-example-cell { flex: 0 0 auto; }
.help-example-cell .brl-mini-wrap { width: 52px; }
.help-example-txt { line-height: 1.4; }
.help-game { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.help-game:last-child { border-bottom: none; }
.help-game-badge { flex: 0 0 auto; }
.help-game-badge .brl-mini-wrap { width: 26px; }
.help-game-emoji { font-size: 1.7em; flex: 0 0 auto; width: 1.5em; text-align: center; }
.help-game-txt { flex: 1; min-width: 0; }
.help-game-title { font-weight: 800; }
.help-game-desc { font-size: .85em; opacity: .8; line-height: 1.35; }
.help-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; line-height: 1.4; }

/* ---- fireworks ---- */
.fireworks-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 80; opacity: 0; transition: opacity .2s; }
.fireworks-canvas.active { opacity: 1; }

/* big celebratory word */
.celebrate-word { position: fixed; inset: 0; display: grid; place-items: center; z-index: 81; pointer-events: none; }
.celebrate-word span { font-size: min(18vw, 160px); font-weight: 900; color: var(--accent); text-shadow: 0 4px 0 #fff, 0 8px 20px rgba(0,0,0,.3); animation: celebratepop .6s cubic-bezier(.2,1.5,.4,1); }
@keyframes celebratepop { 0%{ transform: scale(0) rotate(-12deg); } 70%{ transform: scale(1.15) rotate(4deg); } 100%{ transform: scale(1) rotate(0); } }

@media (max-width: 520px) {
  .app-title { font-size: 1.4em; }
  .prompt-target { font-size: 1.8em; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}