/* Vision mode: settings for children with low vision (albinism). Classes are set on <html> by applyVision(). */

/* ---------- always on: map frame, zoom, eye button ---------- */
.map-frame { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.zoom { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 10; }
.zoom button {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--sand-2); background: var(--paper); color: var(--ink);
  font-size: 1.6rem; font-weight: 700; line-height: 1; box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
}
.eye { border: 2px solid var(--sand-2); background: var(--paper); color: var(--ink); border-radius: 50%; width: 44px; height: 44px; flex: none; font-size: 1.3rem; display: grid; place-items: center; padding: 0; }
.plan-head .eye { margin-inline-start: auto; }
.vision-modal .field { text-align: start; }
.vision-modal .seg button { min-height: 48px; }
/* state is never shown by color alone */
.need.ok::after, .cost .ok::after { content: ' ✓'; }
.need.no::after, .cost .no::after { content: ' ✗'; }

/* ---------- read aloud and "where is it?" ---------- */
.say {
  border: 2px solid var(--sand-2); background: var(--paper); color: var(--ink); border-radius: 50%;
  width: 40px; height: 40px; flex: none; font-size: 1.1rem; padding: 0; display: inline-grid; place-items: center; vertical-align: middle;
}
.no-tts .say { display: none; }
.dog-say p { flex: 1; min-width: 0; }
.dog-btns { display: flex; flex-direction: column; gap: 4px; flex: none; }
.find {
  border: 2px solid var(--gold); background: #fff3cf; color: #3b2a1a; border-radius: 14px; padding: 2px 8px;
  font-size: 1.1rem; display: flex; flex-direction: column; align-items: center; line-height: 1.1; min-width: 48px;
}
.find small { font-size: .7rem; font-weight: 700; }
.letter .say { position: absolute; top: 10px; right: 10px; }
.line .say { margin-inline-start: auto; }
.finder { pointer-events: none; display: grid; place-items: center; }
.finder i { width: 150px; height: 150px; border-radius: 50%; border: 8px solid var(--gold); box-shadow: 0 0 0 4px #3b2a1a, 0 0 30px var(--gold); animation: pulse 1s ease-in-out infinite; }
.finder b { position: absolute; top: -40px; font-size: 54px; color: var(--gold); text-shadow: 0 0 4px #3b2a1a, 0 0 4px #3b2a1a; animation: bounce-down .8s ease-in-out infinite; }
@keyframes pulse { 50% { scale: 1.12; } }
@keyframes bounce-down { 50% { translate: 0 12px; } }
.vision .find small { font-size: max(.7rem, 13px); }

/* ---------- text size ---------- */
html.text-2 { font-size: 20px; }
html.text-3 { font-size: 24px; }
.vision small, .vision .tool small, .vision .seed small, .vision .binfo small, .vision .sinfo small, .vision .action small { font-size: max(.8rem, 15px); }
.vision body { line-height: 1.6; letter-spacing: .01em; }
.vision .dog-say p, .vision .modal p, .vision .letter, .vision .jtext { font-weight: 500; }
.vision .hud { flex-wrap: wrap; }
.vision .hud-name b { white-space: normal; overflow: visible; font-size: 1rem; line-height: 1.2; }
.vision .tool small { white-space: normal; line-height: 1.1; text-align: center; }
.vision .sun { width: 90px; }
.vision .res span { font-size: 1.05rem; }
.vision input.word { min-height: 56px; font-size: 1.3rem; }
.vision .bank span { font-size: 1.35rem; padding: 4px 12px; }
.vision .actions { grid-template-columns: repeat(2, 1fr); }
.vision .tools { flex-wrap: wrap; }
.vision .tool { min-width: 60px; }

/* ---------- dimmed art ---------- */
.vision .map, .vision .title-art img, .vision .letter .grandpa { filter: brightness(var(--dim, 1)); }
.vision .farm { background-blend-mode: multiply; }

/* ---------- map badges: big, solid, shaped ---------- */
.vision .tile-spr .badge, .vision .bld .badge {
  font-size: 30px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink);
  border-radius: 999px; padding: 2px 8px; top: -26px;
}
.vision .st-locked .badge { font-size: 18px; border-width: 2px; padding: 0 4px; top: -8px; opacity: .8; }
.vision .badge.secs { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 26px; }
.vision .map-badge .pill { font-size: 24px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); }
.vision .float { font-size: 32px; }
.vision .ev-ring { outline: 5px solid var(--gold); outline-offset: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); }

/* ---------- strong outlines ---------- */
.hc .btn, .hc .tool, .hc .seed, .hc .action, .hc .chip, .hc .brow, .hc .srow, .hc .recipe, .hc .order, .hc .eye, .hc .zoom button, .hc .seg button {
  border: 3px solid var(--ink) !important;
}
.hc .btn { box-shadow: none; }
.hc .dog-say, .hc .card, .hc .sentence, .hc .modal { border: 3px solid var(--ink); }
.hc .hint { color: var(--ink); font-weight: 700; background: var(--warn-bg, #ffe1d6); border-radius: 8px; padding: 4px 8px; }
.hc .deco.tappable, .hc .bld:not(.ghost) > img:first-child, .hc .critter-ev img {
  filter: brightness(var(--dim, 1)) drop-shadow(2px 0 0 #1d140c) drop-shadow(-2px 0 0 #1d140c) drop-shadow(0 2px 0 #1d140c) drop-shadow(0 -2px 0 #1d140c);
}
.hc .ground polygon { stroke-width: 3; }

/* ---------- calm screen: no bouncing, no confetti ---------- */
.calm *, .calm *::before, .calm *::after { animation: none !important; transition: none !important; }
.calm .rain { display: none; }

/* ---------- evening palette: dark warm ground, cream text (not pure white, to limit halation) ---------- */
html.theme-evening {
  --sand: #241b13;
  --sand-2: #4a3b2b;
  --paper: #33271c;
  --ink: #f2e4c4;
  --ink-2: #d3c19c;
  --green: #4f8a35;
  --green-d: #2f5a1e;
  --gold: #e8b83a;
  --terra: #f0a37e;
  --red: #ff8a7a;
  --warn-bg: #5a2f22;
  color-scheme: dark;
}
.theme-evening body { background: var(--sand); color: var(--ink); }
.theme-evening .farm { background: url(assets/hills.jpg) top center / 100% auto no-repeat, var(--sand); }
.theme-evening .farm::before { content: ''; position: fixed; inset: 0; background: rgba(20, 14, 9, .45); pointer-events: none; z-index: 0; }
.theme-evening .farm > * { position: relative; z-index: 1; }
.theme-evening .farm .bottom { background: var(--sand); }
.theme-evening .hud { background: rgba(36, 27, 19, .92); }
.theme-evening .res span, .theme-evening .pill { background: var(--paper); color: var(--ink); }
.theme-evening .res .plan-chips, .theme-evening .bank, .theme-evening .action.on, .theme-evening .order.special, .theme-evening .note { background: #3d3020; color: var(--ink); }
.theme-evening .bank span, .theme-evening .chip, .theme-evening .brow, .theme-evening .recipe, .theme-evening .srow, .theme-evening .unlocks li,
.theme-evening .order, .theme-evening input.word, .theme-evening .field input, .theme-evening input.pin, .theme-evening .seg button { background: var(--paper); color: var(--ink); }
.theme-evening .bank span, .theme-evening .filled { color: #b6e39a; }
.theme-evening .sentence.done, .theme-evening .seed.on, .theme-evening .filled, .theme-evening .blank.ok input.word { background: #2d4221; color: var(--ink); }
.theme-evening .seg button.on { background: var(--gold); color: #241b13; }
.theme-evening .letter, .theme-evening .journal { background: #3a2e20; color: var(--ink); background-image: none; }
.theme-evening .need { background: #4a3b2b; }
.theme-evening .ok { color: #9fdc7f; }
.theme-evening .no { color: var(--red); }
.theme-evening .levelup, .theme-evening .sunset { background: var(--paper); }
.theme-evening .evening { background: linear-gradient(#3b2a3f, #1f1626); }
.theme-evening .start h1 { color: var(--ink); }
.theme-evening .title-art::after { background: linear-gradient(transparent, var(--sand)); }