/* 007 — ABC Adventure: map/lesson shell built over replaceable art assets. */
.abc-game-shell { color: var(--ink); font-family: "Nunito", system-ui, sans-serif; }
.abc-map-page {
  width: min(1660px, calc(100vw - 20px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.abc-gamebar {
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 9px 28px rgba(45,60,90,.14);
  backdrop-filter: blur(12px);
}
.abc-gamebar--overlay { position: relative; z-index: 6; margin: 12px; }
.abc-gamebar-title { min-width: 0; display: grid; gap: 1px; }
.abc-gamebar-title strong { font: 800 clamp(19px,2.5vw,28px)/1 "Baloo 2",cursive; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abc-gamebar-title span { color: var(--muted); font-size: 12px; font-weight: 800; }
.abc-gamebar-score {
  padding: 9px 13px;
  border-radius: 999px;
  background: #fff6c9;
  color: #a87605;
  font-weight: 900;
  white-space: nowrap;
}
.abc-icon-button,.abc-pill-button,.abc-map-controls button,.abc-primary-button,.abc-secondary-button,.abc-hear-button {
  border: 0;
  cursor: pointer;
  font-weight: 900;
  font-family: inherit;
}
.abc-icon-button {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--ink); box-shadow: 0 5px 14px rgba(45,60,90,.13); font-size: 24px;
}
.abc-pill-button { min-height: 40px; padding: 0 14px; border-radius: 999px; background: #edf3ff; color: var(--blue-dark); }

.abc-map-frame {
  position: relative;
  height: clamp(610px, 76vh, 930px);
  overflow: hidden;
  border-radius: 30px;
  background: #cbefff;
  box-shadow: 0 18px 46px rgba(38,54,80,.2);
  border: 4px solid rgba(255,255,255,.8);
}
.abc-map-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; outline: none; }
.abc-map-viewport.is-dragging { cursor: grabbing; }
.abc-map-stage {
  position: absolute;
  left: 0; top: 0;
  width: 1254px; height: 1254px;
  transform-origin: 0 0;
  will-change: transform;
  background: linear-gradient(145deg,#a9dcff,#9bd277);
}
.abc-map-stage.is-map-animating { transition: transform .62s cubic-bezier(.2,.75,.2,1); }
.abc-map-image { display: block; width: 1254px; height: 1254px; user-select: none; pointer-events: none; }
.abc-map-image.is-missing { display: none; }
.abc-map-missing {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  color: rgba(39,51,74,.64); font-weight: 900; background: radial-gradient(circle at 50% 30%,#e8f8ff,#b8df8b 65%,#8ec9ff);
}
.abc-map-image:not(.is-missing) + .abc-map-missing { display: none; }
.abc-map-missing code { display: inline-block; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.7); }

.abc-map-node {
  position: absolute;
  z-index: 4;
  transform: translate(-50%,-50%);
  width: 64px; height: 46px;
  border-radius: 50%;
  border: 3px solid #df9b28;
  background: rgba(255,249,219,.95);
  color: #6f4016;
  box-shadow: 0 4px 0 rgba(123,75,23,.24), 0 8px 16px rgba(58,60,60,.18);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, background .16s ease;
}
.abc-map-node strong { font: 900 24px/1 "Baloo 2",cursive; }
.abc-map-node:hover:not(:disabled),.abc-map-node:focus-visible { transform: translate(-50%,-50%) scale(1.13); z-index: 8; }
.abc-map-node.is-active {
  background: #fff3a7; border-color: #f4b718;
  box-shadow: 0 0 0 8px rgba(255,219,78,.35), 0 7px 0 rgba(165,104,19,.2), 0 12px 24px rgba(70,50,20,.24);
  animation: abcNodePulse 1.55s ease-in-out infinite;
}
.abc-map-node.is-available { background: #fff8d2; }
.abc-map-node.is-locked { filter: grayscale(1); opacity: .64; cursor: default; background: #d7d9dc; border-color: #aeb3ba; }
.abc-map-node.is-complete { background: #c9cdd1; border-color: #8e949b; color: #666c73; filter: grayscale(.75); }
.abc-map-node.is-browser-pad { width: 70px; height: 52px; box-shadow: inset 0 0 0 4px rgba(255,255,255,.45), 0 5px 0 rgba(123,75,23,.22), 0 9px 18px rgba(58,60,60,.2); }
.abc-node-replay {
  position: absolute; right: -10px; top: -11px; width: 25px; height: 25px; display: grid; place-items: center;
  border-radius: 50%; background: #4d8fe9; color: white; border: 2px solid white; font-size: 15px;
}
.abc-node-stars { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); color: #ffbd17; font-size: 11px; letter-spacing: -1px; white-space: nowrap; text-shadow: 0 1px 2px rgba(65,45,0,.35); }
.abc-node-name {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%);
  display: none; white-space: nowrap; padding: 4px 8px; border-radius: 999px;
  background: rgba(255,255,255,.95); color: #39445b; font-size: 10px; font-weight: 900; box-shadow: 0 3px 10px rgba(30,40,60,.18);
}
.abc-map-node:hover .abc-node-name,.abc-map-node:focus-visible .abc-node-name,.abc-map-node.is-active .abc-node-name { display: block; }
@keyframes abcNodePulse { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.08)} }

.abc-gate {
  position: absolute; z-index: 5; transform: translate(-50%,-50%);
  width: 82px; min-height: 48px; border-radius: 22px; border: 3px solid white; cursor: pointer;
  background: linear-gradient(#ffd864,#e89c16); color: #633b08; box-shadow: 0 7px 18px rgba(50,40,15,.28);
  display: grid; place-items: center; padding: 3px;
}
.abc-gate span { font-size: 18px; line-height: 1; }
.abc-gate small { font-size: 8px; font-weight: 1000; }
.abc-gate.is-locked { filter: grayscale(1); opacity: .72; cursor: default; }

.abc-map-companion {
  position: absolute; z-index: 7; transform: translate(-50%,-104%);
  width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 4px solid white;
  background: #fff; box-shadow: 0 7px 18px rgba(42,47,65,.28); pointer-events: none;
}
.abc-map-companion.is-travelling { transition: left 1.05s ease-in-out, top 1.05s ease-in-out; animation: abcHop .35s ease-in-out 3; }
.abc-companion-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abc-companion-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; background: white; }
@keyframes abcHop { 0%,100%{margin-top:0} 50%{margin-top:-9px} }

.abc-map-controls { position: absolute; z-index: 12; right: 14px; bottom: 18px; display: grid; gap: 7px; }
.abc-map-controls button { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.94); color: #36435b; font-size: 23px; box-shadow: 0 5px 13px rgba(30,40,60,.2); }
.abc-compass {
  position: absolute; z-index: 11; right: 14px; top: 14px; width: 82px; height: 82px; border-radius: 50%;
  background: radial-gradient(circle,#fff8dd 0 43%,#dca737 44% 48%,#76501e 49% 51%,#f3c766 52% 100%);
  box-shadow: 0 6px 17px rgba(35,40,55,.24); color: #482d13; font-family: Georgia,serif; font-style: normal;
}
.abc-compass b,.abc-compass i,.abc-compass em,.abc-compass span { position: absolute; font-style: normal; font-size: 12px; font-weight: 900; }
.abc-compass b{left:50%;top:5px;transform:translateX(-50%)} .abc-compass em{left:50%;bottom:5px;transform:translateX(-50%)}
.abc-compass i{right:7px;top:50%;transform:translateY(-50%)} .abc-compass span{left:7px;top:50%;transform:translateY(-50%)}
.abc-compass u { position:absolute; left:50%; top:50%; width:8px; height:31px; transform:translate(-50%,-74%); clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%); background:#d95039; text-decoration:none; }
.abc-minimap {
  position: absolute; z-index: 11; left: 14px; bottom: 14px; width: 170px; aspect-ratio: 1/1;
  padding: 0; overflow: hidden; border-radius: 16px; border: 3px solid rgba(255,255,255,.94); background: #e6c887; cursor: crosshair;
  box-shadow: 0 8px 20px rgba(35,42,55,.25);
}
.abc-minimap img { width: 100%; height: 100%; display:block; object-fit: cover; }
.abc-minimap-fallback { position:absolute; inset:0; display:grid; place-items:center; font-weight:900; color:#7c5b25; background:#eed7a4; }
.abc-minimap img:not([hidden]) + .abc-minimap-fallback { display:none; }
.abc-minimap-window { position:absolute; left:0; top:0; width:30%; height:30%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(20,40,70,.65),0 0 0 999px rgba(20,40,70,.05); border-radius:4px; pointer-events:none; }
.abc-map-mission {
  position:absolute; z-index:12; left:50%; top:14px; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; padding:8px 13px; max-width:min(72%,420px);
  border-radius:999px; background:rgba(255,255,255,.94); color:#38455d;
  box-shadow:0 6px 18px rgba(35,45,60,.16); pointer-events:none; white-space:nowrap;
}
.abc-map-mission strong { font:900 15px/1 "Baloo 2",cursive; color:#d27622; }
.abc-map-mission span { overflow:hidden; text-overflow:ellipsis; font-size:11px; font-weight:900; color:#68748a; }
.abc-map-hint { position:absolute; z-index:10; left:50%; bottom:14px; transform:translateX(-50%); padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.9); font-size:11px; font-weight:900; color:#59657a; pointer-events:none; }

.abc-companion-modal,.abc-gate-modal {
  position: fixed; inset: 0; z-index: 100; display:grid; place-items:center; padding:20px; background:rgba(27,35,50,.48); backdrop-filter:blur(7px);
}
.abc-companion-card,.abc-gate-modal>div { width:min(650px,calc(100vw - 34px)); background:white; border-radius:30px; padding:30px; text-align:center; box-shadow:0 28px 80px rgba(20,28,42,.34); }
.abc-companion-card h2,.abc-gate-modal h2 { font:800 clamp(30px,5vw,48px)/1 "Baloo 2",cursive; margin:5px 0 20px; }
.abc-kicker { color:var(--blue); font-size:11px; font-weight:1000; letter-spacing:.16em; }
.abc-companion-options { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.abc-companion-options button { border:2px solid #e3e8f1; background:#f9fbff; border-radius:24px; padding:14px; cursor:pointer; color:var(--ink); }
.abc-companion-options button:hover { border-color:var(--blue); transform:translateY(-2px); }
.abc-pick-art { position:relative; display:block; width:150px; height:150px; border-radius:24px; overflow:hidden; margin:0 auto 10px; background:#fff; }
.abc-companion-options strong,.abc-companion-options small { display:block; } .abc-companion-options strong{font:800 27px "Baloo 2"}.abc-companion-options small{color:var(--muted);font-weight:800}

/* Location lesson scene */
.abc-lesson-page {
  position: fixed; inset: 0; z-index: 45; overflow: hidden; background:#bfe8ff;
}
.abc-scene-picture,.abc-scene-fallback { position:absolute; inset:0; z-index:0; }
.abc-scene-picture img { width:100%; height:100%; object-fit:cover; display:block; }
.abc-scene-picture.is-missing { display:none; }
.abc-scene-fallback { background:linear-gradient(150deg,#b6e8ff,#d7efae 58%,#ffd7a0); }
.abc-lesson-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(rgba(25,50,80,.05),rgba(20,40,55,.12)); pointer-events:none; }
.abc-lesson-center {
  position:relative; z-index:4; width:min(780px,calc(100vw - 30px)); height:calc(100vh - 105px); height:calc(100dvh - 105px);
  margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:14px 0 80px;
}
.abc-companion-bubble { display:flex; align-items:center; gap:10px; max-width:min(650px,92vw); padding:8px 16px 8px 8px; border-radius:999px; background:rgba(255,255,255,.94); box-shadow:0 8px 26px rgba(35,45,60,.18); }
.abc-mini-companion { position:relative; flex:0 0 58px; width:58px; height:58px; overflow:hidden; border-radius:50%; background:white; }
.abc-companion-bubble p { margin:0; font-weight:900; color:#34425b; font-size:clamp(14px,2vw,19px); }
.abc-word-challenge {
  width:min(650px,94vw); min-height:300px; display:grid; grid-template-columns:130px 1fr; grid-template-rows:auto auto auto; align-items:center;
  gap:10px 18px; padding:22px 28px; border-radius:34px; background:rgba(255,255,255,.93); box-shadow:0 18px 52px rgba(38,49,70,.2); backdrop-filter:blur(7px);
}
.abc-vocab-visual { grid-row:1/4; width:130px; height:130px; display:grid; place-items:center; border-radius:30px; background:#f7f9fd; }
.abc-vocab-visual span { font-size:86px; line-height:1; }.abc-vocab-visual img{max-width:100%;max-height:100%;object-fit:contain}
.abc-target-letter { align-self:end; font:900 56px/1 "Baloo 2",cursive; color:rgba(92,131,230,.25); }
.abc-word-slots { display:flex; align-items:center; gap:8px; min-height:74px; }
.abc-word-slots span { width:58px; height:66px; display:grid; place-items:center; border-radius:16px; border:3px solid #cfd9e8; background:white; box-shadow:0 5px 0 #e5eaf1; font:900 38px/1 "Baloo 2"; }
.abc-word-slots span.is-filled { border-color:#5c83e6; background:#edf3ff; }.abc-word-slots span.is-punctuation{width:24px;border:0;box-shadow:none;background:transparent}
.abc-word-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.abc-hear-button { justify-self:start; padding:8px 12px; border-radius:999px; background:#edf3ff; color:var(--blue-dark); }
.abc-hear-button:disabled { opacity:.5; cursor:wait; }
.abc-next-word-button {
  border:0; border-radius:999px; padding:9px 15px; font:900 13px/1 "Nunito",system-ui,sans-serif;
  background:#dfe6f1; color:#7a8495; cursor:not-allowed; box-shadow:0 3px 0 rgba(60,75,95,.12);
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}
.abc-next-word-button[hidden] { display:none; }
.abc-next-word-button.is-ready:not(:disabled) {
  background:var(--green); color:#fff; cursor:pointer; box-shadow:0 4px 0 var(--green-dark);
}
.abc-next-word-button.is-ready:not(:disabled):hover,
.abc-next-word-button.is-ready:not(:disabled):focus-visible { transform:translateY(-1px) scale(1.04); }
.abc-word-challenge.is-oops { animation:abcOops .38s ease; }.abc-word-challenge.is-correct{animation:abcCorrect .55s ease}
@keyframes abcOops{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes abcCorrect{50%{transform:scale(1.025);box-shadow:0 18px 60px rgba(70,180,120,.28)}}
.abc-input-mode { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:center; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.9); color:#43516a; font-size:12px; box-shadow:0 5px 15px rgba(35,45,60,.12); }
.abc-input-mode span{color:#69758b;font-weight:800}
.abc-oops-counter { position:absolute; z-index:6; right:18px; bottom:18px; padding:8px 13px; border-radius:999px; background:rgba(255,255,255,.94); font-weight:900; color:#7b5661; box-shadow:0 6px 18px rgba(35,45,60,.15); }

.abc-touch-keyboard { width:min(720px,96vw); padding:8px; border-radius:22px; background:rgba(228,235,246,.88); box-shadow:0 8px 25px rgba(35,45,60,.15); }
.abc-touch-keyboard[hidden]{display:none}.abc-touch-keyboard>div{display:flex;justify-content:center;gap:5px;margin:5px 0}.abc-touch-keyboard button{min-width:42px;height:42px;border:0;border-radius:10px;background:white;box-shadow:0 3px 0 #c8d0de;font-weight:900;color:#33415a;cursor:pointer}.abc-touch-keyboard .abc-touch-backspace{display:block;margin:6px auto 0;min-width:75px}

.abc-result-card { grid-column:1/-1; text-align:center; display:grid; justify-items:center; gap:9px; }
.abc-result-stars { font-size:36px; letter-spacing:6px; }.abc-result-stars span{color:#d8dde6}.abc-result-stars span.is-earned{color:#ffbd17;text-shadow:0 2px 0 #d48b06}
.abc-result-card h2{font:800 42px/1 "Baloo 2";margin:0}.abc-result-card p{margin:0;color:var(--muted);font-weight:900}
.abc-result-reward{display:grid;gap:2px;padding:9px 15px;border-radius:16px;background:#fff7cf}.abc-result-reward span{font-size:12px;color:#756734}
.abc-result-actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:6px}
.abc-primary-button,.abc-secondary-button{padding:11px 17px;border-radius:999px}.abc-primary-button{background:var(--green);color:white;box-shadow:0 5px 0 var(--green-dark)}.abc-primary-button:disabled{filter:grayscale(1);opacity:.45;cursor:not-allowed}.abc-secondary-button{background:#edf1f8;color:#44516a}
.abc-gate-modal p{color:var(--muted);line-height:1.55}

@media (max-width:900px){
  .abc-map-page{width:calc(100vw - 12px)}
  .abc-map-frame{height:calc(100dvh - 160px);min-height:520px;border-radius:22px}
  .abc-minimap{width:125px}.abc-compass{width:68px;height:68px}.abc-map-hint{display:none}
  .abc-gamebar{grid-template-columns:auto minmax(0,1fr) auto}.abc-gamebar>.abc-pill-button{grid-column:2/4;justify-self:end;margin-top:-3px}.abc-gamebar-score{font-size:12px}
  .abc-word-challenge{grid-template-columns:105px 1fr;min-height:250px;padding:18px}.abc-vocab-visual{width:105px;height:105px}.abc-vocab-visual span{font-size:68px}
}
@media (max-width:640px){
  .abc-map-page{width:100vw}.abc-map-frame{height:calc(100dvh - 155px);border-radius:0;border-left:0;border-right:0}.abc-gamebar{border-radius:0;margin-bottom:0}.abc-minimap{width:98px;left:8px;bottom:8px}.abc-map-controls{right:8px;bottom:8px}.abc-compass{right:8px;top:8px;width:60px;height:60px}.abc-node-name{display:none!important}
  .abc-gamebar--overlay{margin:8px;border-radius:18px;grid-template-columns:auto auto minmax(0,1fr) auto}.abc-gamebar--overlay .abc-gamebar-title span{display:none}.abc-gamebar--overlay .abc-pill-button{grid-column:auto;margin:0;padding:0 9px}
  .abc-lesson-center{width:100%;height:calc(100dvh - 84px);justify-content:flex-end;padding:0 10px 58px}.abc-companion-bubble{max-width:96vw}.abc-mini-companion{width:48px;height:48px;flex-basis:48px}
  .abc-word-challenge{width:100%;min-height:225px;grid-template-columns:82px 1fr;padding:14px;border-radius:25px}.abc-vocab-visual{width:82px;height:82px;border-radius:20px}.abc-vocab-visual span{font-size:54px}.abc-target-letter{font-size:44px}.abc-word-slots{gap:5px}.abc-word-slots span{width:clamp(36px,11vw,50px);height:55px;font-size:31px;border-radius:13px}.abc-hear-button{font-size:12px}.abc-input-mode{font-size:10px;max-width:94vw}.abc-oops-counter{right:8px;bottom:8px;font-size:11px}
  .abc-touch-keyboard button{min-width:29px;height:36px;font-size:12px}.abc-companion-options{grid-template-columns:1fr}.abc-pick-art{width:115px;height:115px}
}

/* Intro portal, letter hints, idle reminders and settings (2026-10-08) */
.abc-gamebar--overlay { grid-template-columns: auto auto minmax(0,1fr) auto auto; }
.abc-settings-button { font-size: 21px; }

.abc-intro[hidden], .abc-lesson-play[hidden] { display: none; }
.abc-intro { width: min(640px, 94vw); }
.abc-intro-card {
  position: relative; display: grid; justify-items: center; gap: 12px; text-align: center;
  padding: 58px 28px 26px; border-radius: 34px; background: rgba(255,255,255,.95);
  box-shadow: 0 18px 52px rgba(38,49,70,.22); backdrop-filter: blur(7px);
}
.abc-intro-companion {
  position: absolute; top: -44px; width: 92px; height: 92px; border-radius: 50%; overflow: hidden;
  border: 5px solid white; background: white; box-shadow: 0 10px 24px rgba(42,47,65,.25);
}
.abc-kicker { color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: .16em; }
.abc-intro-ready { margin: 0; font: 800 clamp(34px, 5vw, 48px)/1 "Baloo 2", cursive; color: #2f3d57; }
.abc-intro-line { margin: 0; max-width: 520px; color: #4a5872; font-size: clamp(16px, 2vw, 19px); font-weight: 800; line-height: 1.45; }
.abc-intro-challenges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 4px 0; }
.abc-intro-challenges span, .abc-challenge-strip > span {
  display: grid; place-items: center; border-radius: 18px; background: #f3f6fb; box-shadow: inset 0 0 0 2px #e3e9f3;
}
.abc-intro-challenges > span { width: 74px; height: 74px; font-size: 44px; }
.abc-intro-challenges span span, .abc-challenge-strip span span { line-height: 1; }
.abc-intro-challenges img, .abc-challenge-strip img { max-width: 80%; max-height: 80%; object-fit: contain; }
.abc-intro-actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.abc-go-button {
  border: 0; border-radius: 999px; padding: 16px 58px; cursor: pointer;
  font: 900 clamp(30px, 4vw, 40px)/1 "Baloo 2", cursive; letter-spacing: .04em;
  background: var(--green); color: white; box-shadow: 0 7px 0 var(--green-dark), 0 14px 28px rgba(53,153,106,.35);
  transition: transform .15s ease;
}
.abc-go-button:hover, .abc-go-button:focus-visible { transform: translateY(-2px) scale(1.04); }

.abc-lesson-play { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.abc-challenge-strip { display: flex; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 5px 15px rgba(35,45,60,.12); }
.abc-challenge-strip > span { position: relative; width: 42px; height: 42px; font-size: 26px; opacity: .6; }
.abc-challenge-strip > span.is-current { opacity: 1; box-shadow: inset 0 0 0 3px var(--blue); background: #fff; }
.abc-challenge-strip > span.is-done { opacity: 1; }
.abc-challenge-strip > span.is-done::after {
  content: "✓"; position: absolute; right: -5px; top: -5px; width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green); color: white; font-size: 11px; font-weight: 900;
}

.abc-word-stack { display: grid; gap: 2px; }
.abc-hint-row { display: flex; align-items: flex-end; gap: 8px; min-height: 34px; }
.abc-hint-row span {
  width: 58px; display: grid; place-items: center; font: 900 30px/1 "Baloo 2", cursive; color: #f0a91b;
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease;
}
.abc-hint-row span.is-punctuation { width: 24px; }
.abc-hint-row span.is-shown { opacity: 1; transform: none; text-shadow: 0 2px 0 rgba(160,100,0,.18); }
.abc-hint-row span.is-shown.is-fading { opacity: 0; transition: opacity .6s ease; }
.abc-word-slots span.is-next { border-color: #9fb6ee; }
.abc-hint-button { padding: 8px 12px; border: 0; border-radius: 999px; background: #fff3c4; color: #8a6200; font-weight: 900; cursor: pointer; font-family: inherit; }
.abc-hint-button[hidden] { display: none; }

.abc-touch-keyboard button { transition: transform .12s ease, background .12s ease, box-shadow .12s ease; }
.abc-touch-keyboard button.is-demo { background: #ffc93c; color: #4b3600; transform: translateY(-4px); box-shadow: 0 6px 0 #d89a10, 0 0 0 4px rgba(255,201,60,.35); }
.abc-touch-keyboard button.is-pressed { animation: abcKeyPress .18s ease; }
.abc-keyboard-tools { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 6px 4px 0 !important; }
.abc-keyboard-tools .abc-touch-backspace { margin: 0 !important; }
.abc-hint-key { justify-self: end; min-width: 92px !important; background: #fff3c4 !important; color: #8a6200 !important; box-shadow: 0 3px 0 #e2c35c !important; }
.abc-hint-key[hidden] { display: none; }
.abc-hint-key:disabled, .abc-hint-button:disabled { opacity: .45; cursor: default; }
@keyframes abcKeyPress { 50% { transform: translateY(3px); box-shadow: 0 1px 0 #c8d0de; } }

/* Idle reminders */
.is-nudge { animation: abcNudge 1s ease-in-out 3; }
.abc-touch-keyboard button.is-nudge, .abc-word-slots span.is-nudge { box-shadow: 0 0 0 4px rgba(92,131,230,.55), 0 3px 0 #c8d0de; }
@keyframes abcNudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); filter: brightness(1.08); } }
.abc-map-node.is-nudge, .abc-gate.is-nudge { animation: abcNudgeNode 1s ease-in-out 3; }
@keyframes abcNudgeNode { 0%, 100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.25); } }

/* Settings */
.abc-settings-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(25,35,55,.45); }
.abc-settings-card { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; display: grid; gap: 12px; padding: 24px; border-radius: 28px; background: white; box-shadow: 0 24px 60px rgba(20,30,50,.3); }
.abc-settings-card h2 { margin: 0 0 4px; font: 800 30px/1.1 "Baloo 2", cursive; }
.abc-setting { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.abc-setting legend { padding: 0; margin-bottom: 6px; font-weight: 900; color: #3a4760; }
.abc-setting > div { display: flex; flex-wrap: wrap; gap: 6px; }
.abc-setting button { border: 2px solid #dfe6f2; border-radius: 999px; padding: 8px 13px; background: white; color: #4a5770; font: 800 14px/1.2 "Nunito", system-ui, sans-serif; cursor: pointer; }
.abc-setting button[aria-pressed="true"] { border-color: var(--blue); background: #edf3ff; color: var(--blue-dark); }
.abc-settings-card .abc-primary-button { justify-self: end; margin-top: 4px; }

@media (max-width: 640px) {
  .abc-gamebar--overlay { grid-template-columns: auto auto minmax(0,1fr) auto auto; }
  .abc-gamebar--overlay .abc-pill-button { font-size: 0; padding: 0 12px; }
  .abc-gamebar--overlay .abc-pill-button::before { content: "←"; font-size: 18px; }
  .abc-intro-card { padding: 50px 16px 18px; border-radius: 26px; }
  .abc-intro-companion { width: 78px; height: 78px; top: -38px; }
  .abc-intro-challenges > span { width: 58px; height: 58px; font-size: 34px; }
  .abc-go-button { padding: 14px 44px; }
  .abc-hint-row { gap: 5px; min-height: 28px; }
  .abc-hint-row span { width: clamp(36px, 11vw, 50px); font-size: 24px; }
  .abc-challenge-strip > span { width: 34px; height: 34px; font-size: 20px; }
  .abc-hint-key { min-width: 70px !important; }
}
.abc-input-mode[hidden] { display: none; }