:root {
  --ink: #203048;
  --muted: #61718b;
  --blue: #4967d6;
  --purple: #7758cf;
  --orange: #f28b49;
  --line: #e2e7f2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 10% 5%, rgba(255, 211, 139, .35), transparent 22rem),
    radial-gradient(circle at 90% 0%, rgba(169, 186, 255, .28), transparent 25rem),
    #f7f8fc;
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

button, a { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(119, 88, 207, .34);
  outline-offset: 3px;
}

.topbar {
  max-width: 1220px; margin: 0 auto; padding: 20px 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark {
  width: 48px; height: 48px; display: grid; place-items: center; color: white;
  font: 800 25px Georgia; border-radius: 15px 15px 15px 5px;
  background: linear-gradient(145deg, var(--purple), var(--blue));
  box-shadow: 0 8px 18px rgba(85, 84, 190, .22);
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.stage-badge {
  border: 1px solid #dcd5fb; color: #654fb2; background: #f1edff;
  padding: 9px 14px; border-radius: 99px; font-size: 12px; font-weight: 900; letter-spacing: .09em;
}
.topbar-actions { display:flex; align-items:center; gap:9px; }
.catalog-link {
  padding:9px 12px; border:1px solid var(--line); border-radius:99px; background:white;
  color:#52627a; text-decoration:none; font-size:11px; font-weight:800;
}
.catalog-link:hover { border-color:#b9ade4; color:var(--purple); }

.hero {
  max-width: 1164px; margin: 12px auto 24px; padding: 0 28px;
  display: flex; justify-content: space-between; align-items: end; gap: 30px;
}
.eyebrow { color: var(--orange)!important; font-size: 12px!important; font-weight: 900; letter-spacing: .13em; }
.hero h1 { margin: 7px 0 8px; font: 800 clamp(35px, 5vw, 58px)/1.02 Georgia, serif; letter-spacing: -.04em; }
.hero h1 em { color: var(--purple); font-style: normal; }
.hero p { margin: 0; color: var(--muted); font-size: 17px; max-width: 630px; line-height: 1.55; }
.inline-language-help {
  display:inline-flex; align-items:flex-start; gap:8px; margin-top:8px; color:#66758b;
  font-size:11px; line-height:1.45;
}
.inline-language-help summary {
  display:grid; flex:0 0 auto; width:27px; height:25px; place-items:center; border:1px solid #ded8f1;
  border-radius:8px; background:#f5f2fd; color:#6c58b4; cursor:pointer;
  font-size:9px; font-weight:900; list-style:none;
}
.inline-language-help summary::-webkit-details-marker { display:none; }
.inline-language-help span { padding-top:4px; }
.hero-path {
  max-width: 410px; padding: 15px 17px; border: 1px solid #e4def9; border-radius: 18px;
  background: rgba(255,255,255,.75); color: #71809a; font-size: 12px; line-height: 1.8;
}
.hero-path b { color: #c1b6e9; margin: 0 4px; }
.hero-path strong { color: var(--purple); }

.game-shell {
  max-width: 1164px; margin: 0 auto; background: white; border: 1px solid var(--line);
  border-radius: 26px; box-shadow: 0 20px 55px rgba(48, 61, 95, .11); overflow: hidden;
}
.learning-bridge {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px;
  padding:17px 24px; border-bottom:1px solid #e6e1f3;
  background:linear-gradient(110deg,#f5f1ff,#fff 62%,#fff7e9);
}
.learning-bridge-copy { min-width:0; }
.learning-bridge-copy > span,
.learning-bridge-copy > strong,
.learning-bridge-copy > small { display:block; }
.learning-bridge-copy > span {
  margin-bottom:4px; color:#d66f31; font-size:9px; font-weight:900; letter-spacing:.13em;
}
.learning-bridge-copy > strong { color:#3c4e68; font-size:14px; line-height:1.45; }
.learning-bridge-copy > small { margin-top:3px; color:#78859a; font-size:11px; line-height:1.45; }
.learning-bridge-copy > a {
  display:inline-flex; margin-top:8px; color:#684fb8; font-size:10px; font-weight:900; text-decoration:none;
}
.learning-bridge-images { display:flex; gap:7px; }
.learning-bridge-images button {
  width:64px; height:64px; padding:0; overflow:hidden; border:3px solid white; border-radius:15px;
  background:#eee9fd; cursor:zoom-in; box-shadow:0 5px 14px rgba(57,47,103,.13);
}
.learning-bridge-images img { display:block; width:100%; height:100%; object-fit:cover; }
.mission {
  display: flex; align-items: center; gap: 16px; padding: 20px 25px;
  background: linear-gradient(90deg, #fff7e9, #fffdfa 60%, #f5f1ff);
  border-bottom: 1px solid #eee8dc;
}
.mission-icon {
  width: 54px; height: 54px; display: grid; place-items: center; font-size: 28px;
  background: white; border: 1px solid #f5dfbd; border-radius: 17px; box-shadow: 0 7px 18px #f0dfc5;
}
.mission span { color: #d66f31; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.mission h2 { display: inline; margin: 0 14px 0 0; font-size: 19px; }
.mission p { display: inline; margin: 0; color: #52627a; }
.mission-language-help { display:flex; width:max-content; max-width:100%; margin-top:6px; }
.mission .mission-language-help span {
  padding-top:4px; color:#738096; font-size:10px; font-weight:500; letter-spacing:0;
}
.mission-copy h2 { display:block; margin:0 0 5px; }
.mission-copy p { display:block; margin:0; line-height:1.45; }
.mission > div:nth-child(2) { min-width:0; }
.mission-goals {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-left:auto;
  min-width:310px;
}
.mission-goals span {
  display:flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid #eadfcf;
  border-radius:9px; background:rgba(255,255,255,.76); color:#6b7180;
  font-size:11px; font-weight:800; letter-spacing:0;
}
.mission-goals b { color:#c7612c; font-size:12px; }

.progress-wrap { padding: 20px 32px 12px; }
.progress-labels { display: flex; justify-content: space-between; position: relative; }
.progress-labels button {
  display: flex; flex-direction: column; gap: 5px; align-items: center; color: #a1aaba;
  min-width:55px; padding:0; border:0; background:transparent;
  cursor:pointer; font-size:12px; font-weight:700;
}
.progress-labels i {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: #edf0f6; color: #9099aa; font-style: normal; font-size: 11px; border: 3px solid white;
}
.progress-labels button:disabled { cursor:not-allowed; }
.progress-labels button.active { color: var(--purple); }
.progress-labels button.active i { background: var(--purple); color: white; }
.progress-labels button.current i {
  box-shadow:0 0 0 4px rgba(119,88,207,.16);
  transform:scale(1.08);
}
.progress-track { height: 5px; margin: -44px 26px 38px; background: #edf0f6; border-radius: 10px; overflow: hidden; }
.progress-track div { height: 100%; background: linear-gradient(90deg, var(--orange), var(--purple)); transition: width .5s ease; }

.workspace { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr); min-height: 520px; }
.scene-card { padding: 18px 18px 24px 28px; background: #f5f6fa; border-top: 1px solid var(--line); }
.scene {
  height: 390px; position: relative; border-radius: 22px; overflow: hidden;
  background: linear-gradient(#dde9fa 0 62%, #cad7e5 62%);
  border: 8px solid white; box-shadow: 0 12px 30px rgba(58,76,110,.13);
}
.scene-story-image {
  position:absolute; inset:0; z-index:20; display:block; width:100%; height:100%;
  object-fit:cover; opacity:0; transform:scale(1.018);
  transition:opacity .38s ease, transform .65s ease;
}
.scene-story-image.is-visible { opacity:1; transform:scale(1); }
.scene.kitchen {
  background:#d6a56e url("../../images/stage4/card1-kitchen-v2.webp") center center / cover no-repeat;
}
.scene.kitchen .scene-window,
.scene.kitchen .shelf,
.scene.kitchen .counter,
.scene.kitchen .fridge,
.scene.kitchen .busra { display:none; }
.scene.kitchen .table {
  left:26%; bottom:25%; width:59%; height:23%;
  border:0; background:transparent; box-shadow:none;
}
.scene-window {
  position: absolute; left: 7%; top: 9%; width: 28%; height: 38%; border: 8px solid white;
  background: linear-gradient(#9fd6f7 65%, #aad899 65%); box-shadow: 0 4px 0 #d6c0a4;
}
.scene-window:before, .scene-window:after { content:""; position:absolute; background:white; }
.scene-window:before { width: 6px; height:100%; left:48%; }
.scene-window:after { height:6px; width:100%; top:48%; }
.scene-window span { position: absolute; left: 12%; top: 8%; font-size: 28px; }
.shelf { position:absolute; right:7%; top:11%; width:35%; border-bottom:10px solid #b77f55; display:flex; justify-content:space-around; font-size:31px; padding-bottom:3px; }
.counter { position:absolute; right:0; top:36%; width:45%; height:25%; background:#bdd5cf; border-top:15px solid #f9f3e5; border-bottom:6px solid #93afa7; }
.counter span { position:absolute; right:8%; top:-50px; font-size:40px; }
.fridge { position:absolute; right:3%; top:43%; width:18%; height:39%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#6f9db3; background:#eaf4f6; border:6px solid #d2e4e8; border-radius:12px 12px 5px 5px; box-shadow:inset -7px 0 #c5dce1; font-size:25px; }
.fridge:after { content:""; position:absolute; left:8px; top:51%; width:9px; height:3px; background:#8eafb7; border-radius:4px; }
.fridge small { margin-top:5px; font-size:7px; font-weight:900; letter-spacing:.12em; }
.table { position:absolute; left:23%; bottom:15%; width:59%; height:23%; background:#d58d55; border-radius:50%; border:7px solid #ae6f41; box-shadow:0 50px 0 -22px #a76b43; }
.table span { position:absolute; font-size:31px; filter:drop-shadow(0 5px 3px rgba(0,0,0,.15)); animation:pop .35s ease both; }
.table .bread { left:8%; top:3px; }.table .cup { left:35%; top:7px; }.table .tea { right:3%; top:-10px; }
.table .cheese { left:21%; bottom:-2px; }.table .egg { left:48%; bottom:-8px; }.table .tomato { right:20%; bottom:-1px; }.table .olives { right:8%; bottom:10px; font-size:25px; }
.busra { position:absolute; left:4%; bottom:5%; display:flex; flex-direction:column; align-items:center; animation:pop .4s ease both; }
.busra span { font-size:112px; filter:drop-shadow(0 8px 4px rgba(0,0,0,.15)); }
.busra small { color:white; background:#6d59c5; border-radius:30px; padding:4px 12px; margin-top:-12px; font-weight:800; }
.empty-scene { position:absolute; left:50%; bottom:20%; transform:translateX(-50%); width:70%; text-align:center; color:#71819a; background:rgba(255,255,255,.75); padding:13px; border-radius:99px; }
.scene-caption { display:flex; align-items:center; gap:10px; margin:13px 7px 0; padding:12px 16px; background:white; border:1px solid var(--line); border-radius:14px; }
.scene-caption span { font-size:20px; }
.scene-caption strong { color:#40516b; font-size:15px; }
.prep-tray {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 14px; align-items:center;
  margin:11px 7px 0; padding:11px 13px; border:1px solid #ddd6ef; border-radius:14px;
  background:linear-gradient(135deg,#fff,#f4f1fc);
}
.prep-tray > div:first-child span,
.prep-tray > div:first-child small { display:block; }
.prep-tray > div:first-child span { color:#604aa8; font-size:9px; font-weight:900; letter-spacing:.08em; }
.prep-tray > div:first-child small { margin-top:2px; color:#8892a3; font-size:9px; }
.prep-tray-items { display:flex; flex-wrap:wrap; gap:6px; min-height:35px; }
.prep-tray-item {
  display:flex; align-items:center; gap:5px; padding:5px 7px; border:1px solid #e2dbee;
  border-radius:9px; background:white; animation:pop .25s ease both;
}
.prep-tray-item b { font-size:18px; line-height:1; }
.prep-tray-item small { color:#4e5d73; font-size:9px; font-weight:900; }
.prep-tray-item.prep-tray-clue {
  border-color:#d7bc79; background:linear-gradient(135deg,#fffdf5,#fff4ca);
  box-shadow:0 3px 9px rgba(120,88,29,.09);
}
.prep-tray-item.prep-tray-clue small { color:#76551c; }
.prep-tray > p {
  grid-column:2; margin:-8px 0 0; color:#8a94a4; font-size:10px; line-height:1.35;
}

.choices { padding: 26px 28px; border-top: 1px solid var(--line); display:flex; flex-direction:column; }
#choiceArea { flex: 1; }
.choice-heading { display:flex; justify-content:space-between; align-items:start; gap:10px; margin-bottom:17px; }
.choice-heading h3 { margin:0 0 5px; font-size:24px; }
.choice-heading p { margin:0; color:var(--muted); font-size:15px; line-height:1.45; }
.choice-note { background:#f0edfb; color:#7665b9; padding:7px 10px; border-radius:8px; font-size:11px; font-weight:800; white-space:nowrap; }
.learning-legend {
  display:flex; flex-wrap:wrap; gap:7px; margin:-5px 0 14px; padding:9px 10px;
  border:1px solid #e6e1f3; border-radius:11px; background:#faf9fd;
}
.learning-legend > span {
  display:flex; align-items:center; gap:5px; padding-right:8px; border-right:1px solid #e3deef;
}
.learning-legend > span:last-child { padding-right:0; border-right:0; }
.learning-legend b { color:#59459f; font-size:12px; }
.learning-legend small { color:#778398; font-size:12px; }
.choice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.choice-grid.compact { grid-template-columns:repeat(2,1fr); }
.choice-card {
  min-height:116px; position:relative; display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  border:2px solid var(--line); border-radius:17px; background:white; color:var(--ink);
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.choice-card:hover { transform:translateY(-3px); border-color:#ad9de8; box-shadow:0 9px 20px rgba(79,68,143,.11); }
.choice-select {
  display:flex; flex:1; min-height:82px; flex-direction:column; align-items:center; justify-content:center;
  width:100%; padding:10px 6px 5px; border:0; border-radius:15px 15px 7px 7px;
  background:transparent; color:inherit; cursor:pointer;
}
.choice-select:focus-visible { outline:3px solid rgba(119,88,207,.3); outline-offset:-3px; }
.choice-select:active { transform:scale(.97); }
.choice-card.selected { background:#f2f8ef; border-color:#7cb96a; }
.choice-card.wrong { background:#fff1ed; border-color:#dc725a; animation:shake .35s ease; }
.choice-card.wrong .check { background:#d65d49; }
.choice-icon { font-size:34px; margin-bottom:5px; filter:drop-shadow(0 3px 2px rgba(0,0,0,.08)); }
.visual-image-wrap { position:relative; display:block; overflow:hidden; background:#ece8f7; }
.visual-image-wrap > img { display:block; width:100%; height:100%; object-fit:cover; }
.visual-image-wrap .visual-zoom {
  position:absolute; right:5px; top:5px; display:grid; width:25px; height:25px; place-items:center;
  padding:0; border:1px solid rgba(255,255,255,.88); border-radius:8px; background:rgba(34,45,65,.72);
  color:white; cursor:zoom-in; box-shadow:0 3px 8px rgba(0,0,0,.18); font-size:17px; line-height:1;
}
.choice-icon.visual-image-wrap {
  width:100%; height:92px; margin:0 0 7px; border-radius:12px;
  filter:none; box-shadow:0 4px 12px rgba(48,61,95,.12);
}
.choice-icon.visual-image-wrap > img { object-fit:cover; background:#f3f0f8; }
.choice-card.selected .choice-icon .visual-zoom { right:31px; }
.choice-icon.visual-emoji { display:block; }
.choice-card strong { font-size:16px; line-height:1.25; }
.check { position:absolute; right:7px; top:7px; width:21px; height:21px; display:grid; place-items:center; color:white; background:#67aa55; border-radius:50%; font-style:normal; font-size:11px; }
.order-number { position:absolute; left:7px; top:7px; width:22px; height:22px; display:grid; place-items:center; color:white; background:var(--purple); border-radius:7px; font-size:11px; }
.learning-tools {
  display:grid; grid-template-columns:repeat(3,34px); justify-content:center;
  gap:5px; width:auto; padding:5px 7px 8px;
}
.learning-tools button {
  display:grid; width:34px; height:32px; place-items:center; padding:0;
  border:1px solid #ded8ef; border-radius:9px; background:#f6f4fb;
  color:#6653ae; cursor:pointer; font-size:10px; font-weight:900;
}
.learning-tools button span { font-size:13px; line-height:1; }
.learning-tools button b { font-size:10px; }
.learning-tools button:hover, .learning-tools button[aria-expanded="true"] {
  border-color:#a997e2; background:#eee9fd; color:#4f399d;
}
.choice-card > .choice-select {
  min-height:104px;
  padding:10px 8px 10px 46px;
}
.choice-card > .learning-tools {
  position:absolute; top:8px; left:8px; z-index:5;
  grid-template-columns:30px; grid-template-rows:repeat(3,28px);
  gap:4px; padding:0;
}
.choice-card > .learning-tools button {
  width:30px; height:28px; border-radius:7px;
}
.choice-card > .learning-details {
  padding:0 8px 8px;
}
.choice-card > .learning-details span {
  margin-top:-4px;
}
.learning-details { min-height:0; padding:0 7px 6px; text-align:center; }
.learning-details span {
  display:block; padding:4px 5px; border-radius:6px; background:rgba(255,255,255,.78);
  color:#67748a; font-size:12px; line-height:1.35;
}
.learning-details .pronunciation {
  color:#5e49a8; font-family:"Trebuchet MS","Segoe UI",sans-serif;
  font-weight:900; letter-spacing:.025em;
}
.learning-menu {
  position:relative; z-index:4; width:36px; margin:4px 7px 8px;
}
.learning-menu[open] { z-index:20; }
.learning-menu summary {
  display:grid; width:36px; height:36px; place-items:center; padding:0;
  border:1px solid #d8d0ef; border-radius:50%; background:#f5f2fd;
  color:#5e49a7; cursor:pointer; font:900 16px/1 Georgia,serif; list-style:none;
  box-shadow:0 3px 8px rgba(78,59,145,.08);
}
.learning-menu summary::-webkit-details-marker { display:none; }
.learning-menu summary:hover,
.learning-menu[open] summary { border-color:#9f8bd9; background:#ede8fb; color:#4d3798; }
.learning-menu-list {
  position:absolute; top:calc(100% + 5px); left:0; z-index:30; width:196px;
  display:grid; gap:5px; padding:7px; border:1px solid #d9d1ef; border-radius:11px;
  background:white; box-shadow:0 14px 30px rgba(56,45,106,.18);
}
.learning-menu-list button {
  display:flex; align-items:center; justify-content:space-between; gap:7px; min-height:38px;
  padding:7px 9px; border:1px solid #e6e1f2; border-radius:8px; background:#faf9fd;
  color:#554493; cursor:pointer; text-align:left;
}
.learning-menu-list button:hover,
.learning-menu-list button[aria-expanded="true"] { border-color:#aa9ade; background:#f0ecfb; }
.learning-menu-list button b { font-size:12px; }
.learning-menu-list button small { color:#7b8495; font-size:11px; }
.choice-card > .learning-menu {
  position:absolute; top:7px; left:7px; margin:0;
}
.choice-card:nth-child(even) > .learning-menu .learning-menu-list {
  right:0; left:auto;
}
.feedback { margin-top:16px; display:flex; align-items:center; gap:10px; padding:13px 14px; border-radius:13px; font-size:14px; line-height:1.48; }
.feedback p { margin:0; }
.feedback-copy { min-width:0; flex:1; }
.feedback-translation { margin-top:4px!important; padding-top:4px; border-top:1px solid currentColor; opacity:.78; }
.feedback-help-button {
  display:grid; flex:0 0 auto; width:31px; height:29px; place-items:center; padding:0;
  border:1px solid currentColor; border-radius:8px; background:rgba(255,255,255,.58);
  color:inherit; cursor:pointer; font-size:9px; font-weight:900;
}
.feedback.info { color:#405f85; background:#edf5ff; border:1px solid #d9e9fb; }
.feedback.good { color:#40743c; background:#eef8eb; border:1px solid #d8ecd3; }
.feedback.hint { color:#8a5925; background:#fff5df; border:1px solid #f2dfb6; animation:shake .35s ease; }

.choice-actions {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px;
  padding-top:13px; border-top:1px solid var(--line);
}
.choice-actions small { max-width:240px; color:#768298; font-size:10px; line-height:1.4; }
.instruction-copy { display:flex; max-width:270px; flex-direction:column; align-items:flex-start; gap:7px; }
.instruction-copy small {
  max-width:none; color:#596980; font-size:14px; font-weight:700; line-height:1.45;
}
.instruction-listen {
  min-height:34px; padding:6px 10px; border:1px solid #d9d2ed; border-radius:9px;
  background:#f7f4fd; color:#5c48a6; cursor:pointer; font-size:11px; font-weight:900;
}
.check-answer {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px;
  padding:13px 19px; border:0; border-radius:13px; background:linear-gradient(135deg,var(--purple),var(--blue));
  color:white; cursor:pointer; box-shadow:0 9px 21px rgba(81,81,180,.2); font-size:15px; font-weight:900;
}
.check-answer:disabled { background:#d8dce5; color:#8b93a2; cursor:not-allowed; box-shadow:none; }
.check-answer span { font-size:16px; }

.event-panel .choice-heading { margin-bottom:12px; }
.event-sorter {
  display:grid; gap:9px; max-height:520px; margin:0; padding:1px 6px 1px 1px;
  overflow-y:auto; list-style:none; scrollbar-width:thin;
}
.event-row {
  display:grid; grid-template-columns:20px 30px 40px minmax(0,1fr) 35px; gap:9px; align-items:center;
  min-height:112px; padding:10px; border:2px solid var(--line); border-radius:15px;
  background:white; cursor:default; transition:border-color .16s, transform .16s, box-shadow .16s;
}
.event-row:hover { border-color:#b9ade4; }
.event-row.previewing { border-color:#8b74d7; background:#f7f4ff; box-shadow:0 0 0 3px rgba(119,88,207,.1); }
.event-row.dragging { opacity:.48; transform:scale(.98); }
.event-row.drag-over { border-color:var(--purple); box-shadow:0 0 0 3px rgba(119,88,207,.12); }
.event-row.wrong { border-color:#dd7a59; background:#fff6ed; animation:shake .35s ease; }
.event-grip { color:#8f99aa; cursor:grab; font-size:22px; line-height:1; user-select:none; }
.event-grip:active { cursor:grabbing; }
.event-number {
  display:grid; width:27px; height:27px; place-items:center; border-radius:8px;
  background:#eeeafd; color:var(--purple); font-size:10px;
}
.event-icon { font-size:24px; text-align:center; }
.event-icon.visual-image-wrap {
  width:40px; height:40px; border-radius:11px; box-shadow:0 4px 10px rgba(48,61,95,.12);
}
.event-icon .visual-zoom { right:2px; top:2px; width:19px; height:19px; border-radius:6px; font-size:13px; }
.event-copy { min-width:0; }
.event-copy strong, .event-copy em { display:block; }
.event-copy strong { color:#273a56; font-size:16px; line-height:1.3; }
.event-copy em { margin-top:4px; color:#6e57bd; font-size:13px; line-height:1.4; font-style:normal; font-weight:800; }
.event-copy .learning-tools { max-width:230px; padding:8px 0 0; }
.event-copy .learning-tools button b { font-size:11px; }
.event-copy .learning-details { padding:3px 0 0; text-align:left; }
.event-copy .learning-details span { font-size:10px; }
.event-copy .learning-tools { justify-content:start; padding:7px 0 0; }
.event-buttons { display:grid; gap:3px; }
.event-buttons button {
  display:grid; width:34px; height:34px; place-items:center; padding:0; border:1px solid #d7d0ec;
  border-radius:9px; background:#f3effd; color:#5f49ad; cursor:pointer; font-size:18px; font-weight:900; line-height:1;
}
.event-buttons button:disabled { opacity:.28; cursor:not-allowed; }

.action-panel { animation:pop .28s ease both; }
.action-heading { align-items:flex-start; }
.action-kicker {
  display:block; margin-bottom:7px; color:#7258bd; font-size:10px; font-weight:900;
  letter-spacing:.12em;
}
.action-heading h3 { max-width:620px; margin-bottom:5px; }
.action-translation { color:#68758b; font-size:12px; }
.action-translation summary {
  display:inline-flex; min-width:36px; min-height:29px; align-items:center; justify-content:center;
  margin-right:7px; border:1px solid #ddd6f4; border-radius:9px; background:#f6f3ff;
  color:#684fba; cursor:pointer; font-size:11px; font-weight:900; list-style:none;
}
.action-translation summary::-webkit-details-marker { display:none; }
.action-translation[open] { display:flex; align-items:center; gap:5px; }
.action-listen {
  flex:0 0 auto; width:43px; height:43px; border:1px solid #ddd6f4; border-radius:12px;
  background:#f5f2ff; cursor:pointer; font-size:18px;
}
.action-choice-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px;
}
.action-choice-wrap { position:relative; display:flex; min-width:0; flex-direction:column; }
.action-choice {
  position:relative; display:flex; width:100%; min-height:152px; flex:1; align-items:center; justify-content:center;
  flex-direction:column; gap:8px; padding:15px 12px; border:2px solid #e2e6f1;
  border-radius:18px; background:#fff; color:#203752; cursor:pointer;
  box-shadow:0 7px 16px rgba(50,61,92,.06); transition:.2s;
}
.action-choice:hover {
  border-color:#9a85df; background:#faf8ff; transform:translateY(-2px);
  box-shadow:0 11px 23px rgba(74,57,132,.12);
}
.action-choice > span { font-size:38px; }
.action-choice > .action-character-picture {
  display:block; width:76px; height:76px; overflow:hidden; border:3px solid #fff;
  border-radius:50%; background:#eeeaf8; box-shadow:0 5px 13px rgba(41,50,77,.18);
}
.action-choice > .action-character-picture.wide { width:116px; border-radius:15px; }
.action-character-picture img {
  display:block; width:100%; height:100%; object-fit:cover;
}
.action-choice strong { font-size:15px; line-height:1.35; text-align:center; }
.action-option-tr {
  position:absolute; z-index:2; top:9px; right:9px; display:grid; width:34px; height:30px;
  place-items:center; padding:0; border:1px solid #ddd6f4; border-radius:9px;
  background:#f6f3ff; color:#684fba; cursor:pointer; font-size:10px; font-weight:900;
}
.action-option-tr[aria-expanded="true"] { background:#6c55bd; color:#fff; }
.action-option-translation {
  margin-top:6px; padding:8px 9px; border-radius:9px; background:#f5f3fb;
  color:#6f7890; font-size:11px; font-weight:650; line-height:1.35; text-align:center;
}
.action-choice.wrong, .recap-choice.wrong {
  border-color:#e78b8b; background:#fff3f3; animation:shake .25s ease;
}
.action-note {
  margin:15px 0 0; padding:11px 13px; border-radius:11px; background:#f5f3fb;
  color:#6f7890; font-size:12px; text-align:center;
}
.direct-status {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px;
  padding:10px 12px; border:1px solid #e4def5; border-radius:12px; background:#faf8ff;
  color:#4f5e74; font-size:12px;
}
.direct-status strong { font-size:13px; line-height:1.4; }
.direct-status span {
  flex:0 0 auto; min-width:48px; padding:6px 9px; border-radius:99px; background:#6d56bd;
  color:#fff; font-size:11px; font-weight:900; text-align:center;
}
.direct-match-board { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:14px; margin-top:13px; }
.direct-piece-bank, .direct-target-grid { display:grid; gap:9px; }
.direct-piece-bank { align-content:start; grid-template-columns:repeat(2,minmax(0,1fr)); }
.direct-target-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.direct-piece, .direct-target {
  position:relative; display:flex; min-width:0; min-height:84px; align-items:center; justify-content:center;
  flex-direction:column; gap:3px; padding:10px; border:2px solid #e1e5ef; border-radius:14px;
  background:#fff; color:#263b55; cursor:pointer; box-shadow:0 5px 13px rgba(47,59,88,.06);
  transition:border-color .18s, background .18s, transform .18s, opacity .18s;
}
.direct-piece:hover, .direct-piece.is-selected {
  border-color:#8c75d5; background:#f8f5ff; transform:translateY(-2px);
}
.direct-piece.is-dragging { opacity:.45; }
.direct-piece.is-placed { border-color:#aad6b5; background:#f1fbf4; opacity:.64; cursor:default; }
.direct-piece > span, .direct-target-icon { font-size:27px; line-height:1; }
.direct-piece strong, .direct-target strong { font-size:12px; line-height:1.25; text-align:center; }
.direct-piece small, .direct-target > small { color:#8791a2; font-size:9px; text-align:center; }
.direct-piece > b { position:absolute; right:6px; top:5px; color:#31915d; font-size:13px; }
.direct-target {
  min-height:118px; border-style:dashed; border-color:#c7bce8; background:#f9f7ff;
}
.direct-target:hover, .direct-target.is-over {
  border-color:#6f58bd; background:#eee9ff; transform:translateY(-2px);
}
.direct-target.has-piece { border-style:solid; border-color:#85c89b; background:#f2fbf5; }
.direct-target.wrong { border-color:#e88b8b; background:#fff1f1; animation:shake .25s ease; }
.direct-target-pieces { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:4px; }
.direct-target-pieces b {
  display:inline-flex; align-items:center; gap:3px; max-width:100%; padding:4px 6px; border-radius:7px;
  background:#fff; color:#347250; font-size:9px; line-height:1.2; box-shadow:0 2px 6px rgba(39,95,64,.09);
}
.direct-target-pieces i { font-style:normal; }
.direct-sequence { margin-top:13px; }
.direct-sequence-track { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.direct-sequence-track > span {
  display:flex; min-width:0; min-height:72px; align-items:center; justify-content:center; flex-direction:column;
  gap:3px; padding:7px; border:2px dashed #d9d2ea; border-radius:12px; background:#faf9fd;
  color:#8d94a2; text-align:center;
}
.direct-sequence-track > span.is-complete { border-style:solid; border-color:#94cda5; background:#f1faf4; color:#32724c; }
.direct-sequence-track b {
  display:grid; width:20px; height:20px; place-items:center; border-radius:50%; background:#e9e5f5;
  color:#6a57aa; font-size:9px;
}
.direct-sequence-track i { font-style:normal; font-size:21px; }
.direct-sequence-track small { max-width:100%; font-size:9px; line-height:1.2; overflow-wrap:anywhere; }
.direct-sequence-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:10px; }
.direct-sequence-options button {
  display:flex; min-width:0; min-height:94px; align-items:center; justify-content:center; flex-direction:column;
  gap:3px; padding:9px 7px; border:2px solid #e1e5ef; border-radius:13px; background:#fff;
  color:#263b55; cursor:pointer; transition:.18s;
}
.direct-sequence-options button:hover { border-color:#8c75d5; background:#f8f5ff; transform:translateY(-2px); }
.direct-sequence-options button.is-used { border-color:#a9d4b5; background:#f2faf4; opacity:.55; cursor:default; }
.direct-sequence-options button.wrong { border-color:#e88b8b; background:#fff1f1; animation:shake .25s ease; }
.direct-sequence-options span { font-size:29px; }
.direct-sequence-options strong { font-size:11px; line-height:1.25; text-align:center; }
.direct-sequence-options small { color:#8791a2; font-size:9px; line-height:1.2; text-align:center; }
.hotspot-stage {
  position:relative; min-height:330px; margin-top:13px; overflow:hidden; border:5px solid #fff;
  border-radius:17px; background-position:center; background-size:cover;
  box-shadow:0 8px 24px rgba(35,49,77,.18);
}
.hotspot {
  position:absolute; display:grid; place-items:center; padding:0; border:3px dashed rgba(255,255,255,.96);
  border-radius:18px; background:rgba(75,56,151,.25); color:#fff; cursor:pointer;
  box-shadow:0 0 0 3px rgba(86,63,172,.35),0 6px 20px rgba(27,36,61,.22); transition:.18s;
}
.hotspot:hover, .hotspot:focus-visible { background:rgba(255,170,57,.5); transform:scale(1.04); outline:none; }
.hotspot > span {
  display:grid; width:30px; height:30px; place-items:center; border-radius:50%; background:#684fba;
  color:#fff; font-size:12px; font-weight:900; box-shadow:0 4px 10px rgba(32,26,72,.28);
}
.hotspot.is-found { border-style:solid; border-color:#c4f4d1; background:rgba(43,151,85,.42); cursor:default; }
.hotspot.is-found > span { background:#2f9b5b; }
.hotspot.wrong { border-color:#ffd1d1; background:rgba(201,51,51,.48); animation:shake .25s ease; }
.scan-stage {
  --scan-x:50%; --scan-y:50%; position:relative; min-height:330px; margin-top:13px; overflow:hidden;
  border:5px solid #fff; border-radius:17px; background-position:center; background-size:cover;
  cursor:crosshair; touch-action:none; box-shadow:0 8px 24px rgba(35,49,77,.24);
}
.scan-stage:focus-visible { outline:4px solid #e8bd57; outline-offset:2px; }
.scan-stage.wrong { animation:shake .25s ease; }
.scan-darkness {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle 92px at var(--scan-x) var(--scan-y),transparent 0 56%,rgba(9,12,31,.18) 72%,rgba(5,7,22,.87) 100%);
}
.scan-cursor {
  position:absolute; left:var(--scan-x); top:var(--scan-y); pointer-events:none;
  transform:translate(-50%,-50%); font-size:25px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));
}
.voice-meter {
  --voice-level:75%; display:grid; gap:12px; margin-top:14px; padding:18px;
  border:1px solid #e2ddf1; border-radius:17px; background:linear-gradient(145deg,#fff,#f8f5ff);
}
.voice-meter-labels { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; color:#68768a; font-size:10px; font-weight:850; text-align:center; }
.voice-meter-labels span:nth-child(2) { color:#318157; }
.voice-meter input[type="range"] { width:100%; accent-color:#6c55bd; cursor:pointer; }
.voice-meter-scale { display:grid; grid-template-columns:35fr 25fr 40fr; height:12px; overflow:hidden; border-radius:99px; }
.voice-meter-scale i:nth-child(1) { background:#75a7dc; }
.voice-meter-scale i:nth-child(2) { background:#65bd7d; }
.voice-meter-scale i:nth-child(3) { background:#e78372; }
.voice-meter output {
  justify-self:center; min-width:62px; padding:7px 10px; border-radius:99px; background:#6751b5;
  color:#fff; font-size:12px; font-weight:900; text-align:center;
}
.voice-meter .check-answer { justify-self:center; min-width:190px; }
.recap-progress {
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin:17px 0 13px;
}
.recap-progress span {
  display:flex; min-height:57px; align-items:center; justify-content:center; gap:6px;
  padding:7px; border:1px dashed #d8ddeb; border-radius:11px; background:#fafbfe;
  color:#a1a8b5; font-size:10px; font-weight:800; text-align:center;
}
.recap-progress b {
  display:grid; width:21px; height:21px; flex:0 0 auto; place-items:center;
  border-radius:50%; background:#e8eaf1; font-size:9px;
}
.recap-progress span.complete {
  border-style:solid; border-color:#87c679; background:#f1f9ee; color:#477443;
}
.recap-progress span.complete b { background:#62b65a; color:#fff; }
.recap-progress span.current {
  border:2px solid #8b73d6; background:#f5f1ff; color:#624cad;
  box-shadow:0 0 0 4px rgba(123,97,199,.09);
}
.recap-progress span.current b { background:#7259c3; color:#fff; }
.recap-help { margin-top:8px; color:#69758a; font-size:12px; }
.recap-help summary {
  display:inline-grid; min-width:36px; min-height:29px; place-items:center;
  border:1px solid #ddd6f4; border-radius:9px; background:#f6f3ff;
  color:#684fba; cursor:pointer; font-size:10px; font-weight:900; list-style:none;
}
.recap-help summary::-webkit-details-marker { display:none; }
.recap-help[open] { display:flex; align-items:center; gap:9px; }
.recap-complete-actions { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:9px; margin-top:15px; }
.recap-retry {
  min-height:52px; padding:11px 13px; border:1px solid #dcd5ef; border-radius:12px;
  background:#f2effa; color:#6651ad; cursor:pointer; font-size:12px; font-weight:850;
}
.recap-choice-grid {
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px;
}
.recap-choice {
  display:flex; min-height:98px; align-items:center; justify-content:center; flex-direction:column;
  gap:7px; padding:9px 6px; border:2px solid #e0e4ee; border-radius:14px;
  background:#fff; color:#263c57; cursor:pointer; transition:.2s;
}
.recap-choice:hover { border-color:#9b87dc; transform:translateY(-1px); }
.recap-choice > span { font-size:27px; }
.recap-choice strong { font-size:11px; line-height:1.3; text-align:center; }
.recap-choice.complete {
  border-color:#73bd68; background:#eff8ec; color:#4c8147; opacity:.72;
}
.action-continue { width:100%; margin-top:15px; }
.recap-complete-actions .action-continue { margin-top:0; }
.progressive-hints {
  margin-top:12px; padding:11px; border:1px solid #e4ddf7; border-radius:13px;
  background:#faf8ff;
}
.progressive-hints-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.progressive-hints-head > span { color:#554593; font-size:14px; font-weight:900; }
.progressive-hints-head > span b { margin-right:5px; }
.progressive-hints-head > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.progressive-hints-head button {
  min-height:36px; padding:7px 11px; border:1px solid #d6cdef; border-radius:9px;
  background:white; color:#5c48a5; cursor:pointer; font-size:11px; font-weight:900;
}
.progressive-hints-head button:disabled { opacity:.55; cursor:default; }
.progressive-hints-head .hint-listen { background:#f1ecfd; }
.progressive-hints ol { display:grid; gap:7px; margin:9px 0 0; padding:0; list-style:none; }
.progressive-hints li {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px; padding:9px;
  border-radius:9px; background:white; color:#46556d; font-size:13px; line-height:1.5;
}
.progressive-hints li > span { display:flex; gap:7px; }
.progressive-hints li > span b {
  display:grid; flex:0 0 auto; width:20px; height:20px; place-items:center; border-radius:6px;
  background:#ece7fb; color:#6854b2; font-size:9px;
}
.hint-placeholder {
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px;
  padding:8px 9px; border-radius:9px; background:white; color:#647187;
}
.hint-placeholder p { margin:0; font-size:13px; font-weight:700; line-height:1.4; }
.hint-placeholder button, .hint-tools > button {
  min-height:32px; padding:5px 9px; border:1px solid #d9d2ed; border-radius:8px;
  background:#f5f1fd; color:#5d48a7; cursor:pointer; font-size:10px; font-weight:900;
}
.hint-tools { display:flex; flex:0 0 auto; align-items:flex-start; gap:5px; }
.hint-tools button { min-width:44px; }
.hint-translation-text {
  grid-column:1 / -1; width:100%; min-width:0; margin:0; padding:9px 11px;
  border:1px solid #e5def6; border-radius:8px; background:#f5f2fd; color:#5f6d83;
  font-size:13px; line-height:1.5; overflow-wrap:anywhere;
}
.sentence-hint {
  display:flex; align-items:center; gap:9px; margin-top:10px; padding:10px 12px;
  border-radius:10px; background:#f4f1fc; color:#6556a5; font-size:11px;
}
.sentence-hint b { text-transform:uppercase; letter-spacing:.06em; }
.sentence-hint span { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.sentence-hint i { padding:3px 5px; border-radius:5px; background:white; font-style:normal; font-weight:800; }

.sentence-builder-heading { margin-bottom:12px; }
.sentence-build-progress {
  display:flex; align-items:center; gap:12px; margin-bottom:11px; padding:10px 12px;
  border:1px solid #e2dcef; border-radius:11px; background:#faf9fd;
}
.sentence-build-progress span { flex:0 0 auto; color:#6655a7; font-size:11px; font-weight:800; }
.sentence-build-progress span b { font-size:14px; }
.sentence-build-progress > div {
  flex:1; height:7px; overflow:hidden; border-radius:99px; background:#e9e5f2;
}
.sentence-build-progress i {
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,var(--orange),var(--purple)); transition:width .3s ease;
}
.built-sentence-list {
  display:grid; gap:5px; max-height:134px; margin-bottom:11px; overflow:auto;
  padding:8px; border-radius:11px; background:#f5faf3;
}
.built-sentence-list p {
  display:grid; grid-template-columns:20px 20px minmax(0,1fr); gap:6px; align-items:center;
  margin:0; padding:5px 7px; border-radius:7px; background:white; color:#52617a;
  font-size:11px; line-height:1.4;
}
.built-sentence-list p span {
  display:grid; width:20px; height:20px; place-items:center; border-radius:50%;
  background:#e4f3df; color:#4d8a43; font-size:10px; font-weight:900;
}
.built-sentence-list p b { color:#7867b8; font-size:10px; }
.sentence-workbench {
  padding:14px; border:2px solid #ddd6ef; border-radius:16px; background:#fff;
  box-shadow:0 10px 24px rgba(52,45,86,.06);
}
.sentence-workbench.wrong { border-color:#dc795c; background:#fff9f4; animation:shake .35s ease; }
.sentence-workbench > header {
  display:grid; grid-template-columns:48px minmax(0,1fr) 118px; gap:10px; align-items:center;
  padding-bottom:12px; border-bottom:1px solid #ece8f3;
}
.sentence-visual {
  display:grid; width:48px; height:48px; place-items:center; border-radius:14px;
  background:#f1edfc; font-size:28px;
}
.sentence-visual.visual-image-wrap { box-shadow:0 4px 11px rgba(48,61,95,.13); }
.sentence-visual .visual-zoom { right:2px; top:2px; width:20px; height:20px; border-radius:6px; font-size:13px; }
.sentence-workbench header small,
.sentence-workbench header strong { display:block; }
.sentence-workbench header small { margin-bottom:3px; color:#907fca; font-size:10px; font-weight:900; text-transform:uppercase; }
.sentence-workbench header strong { color:#394b66; font-size:13px; line-height:1.35; }
.sentence-workbench header .learning-tools { justify-content:end; padding:0; }
.sentence-workbench header .learning-details {
  display:flex; grid-column:1 / -1; width:100%; min-width:0; flex-direction:column;
  gap:6px; padding:8px 0 0; text-align:left;
}
.sentence-workbench header .learning-details span {
  width:100%; margin:0; padding:8px 10px; box-sizing:border-box;
  overflow-wrap:normal; word-break:normal; white-space:normal;
}
.sentence-draft {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:86px; margin-top:13px;
  padding:12px; border:2px dashed #cfc6e8; border-radius:13px; background:#faf8ff;
}
.sentence-draft p { width:100%; margin:0; color:#9299a8; font-size:13px; text-align:center; }
.sentence-draft button {
  min-height:40px; padding:8px 11px; border:1px solid #9d8dd5; border-radius:10px;
  background:#ede8fc; color:#46377e; cursor:pointer; font-size:13px; font-weight:900;
}
.sentence-draft button::after { content:" ×"; color:#9a6e76; }
.sentence-bank {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; padding:10px;
  border:1px solid #e5e1ed; border-radius:12px; background:#fff;
}
.sentence-bank::before {
  content:"WORD BLOCKS"; width:100%; color:#8b7db9; font-size:9px; font-weight:900; letter-spacing:.08em;
}
.sentence-bank button {
  min-height:42px; padding:9px 12px; border:1px solid #d8d1ea; border-radius:10px;
  background:#fff; color:#34465f; cursor:pointer; font-size:13px; font-weight:800;
  box-shadow:0 4px 10px rgba(58,48,103,.06);
}
.sentence-bank button:hover { border-color:#9d8bd8; background:#f7f4fd; transform:translateY(-1px); }
.sentence-builder-actions {
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:13px;
}
.sentence-builder-review .built-sentence-list { max-height:none; }
.review-next-step { width:100%; margin-top:13px; }
.sentence-reset {
  min-height:46px; padding:10px 15px; border:1px solid #ddd7e9; border-radius:11px;
  background:#f4f2f7; color:#6d7481; cursor:pointer; font-size:12px; font-weight:900;
}
.sentence-reset:disabled { opacity:.45; cursor:not-allowed; }

.story-result { text-align:center; animation:pop .5s ease both; }
.success-badge { display:inline-block; color:#8b6622; background:#fff3cb; padding:7px 15px; border-radius:30px; font-size:10px; font-weight:900; letter-spacing:.1em; }
.story-result h2 { margin:12px 0 0; font:800 29px Georgia; color:#5d49ad; }
.result-tr { margin:3px 0 14px; color:#9299a8; font-size:12px; }
.story-lines { text-align:left; padding:13px; border-radius:17px; background:#f7f6fc; }
.story-lines p {
  display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:9px; align-items:center;
  margin:2px 0; padding:5px 8px; border-radius:8px; color:#46556d; font-size:12px; transition:.2s;
}
.story-lines p > span:first-child { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#e5e1f5; color:#7565b1; font-size:9px; font-weight:800; }
.story-lines p strong { font-size:14px; font-weight:600; line-height:1.4; }
.story-line-tools { display:flex; gap:4px; }
.story-line-tools button {
  display:grid; width:27px; height:27px; place-items:center; padding:0; border:0; border-radius:8px;
  background:#e9e5f7; color:#6b57b4; cursor:pointer; font-size:9px;
}
.story-line-translation {
  grid-column:2 / -1; padding:5px 7px; border-radius:7px; background:#fff;
  color:#748096; font-size:10px; font-weight:500;
}
.story-lines p.speaking { color:#8c481d; background:#ffdfbd; transform:scale(1.02); font-weight:800; }
.story-lines p.speaking > span:first-child { background:var(--orange); color:white; }
.story-lines p.speaking .story-line-tools button { background:var(--orange); color:white; }
.story-line {
  display:grid; grid-template-columns:24px minmax(0,1fr) 112px; gap:9px; align-items:center;
  margin:3px 0; padding:8px; border-radius:10px; color:#46556d; transition:.2s;
}
.story-line.has-image { grid-template-columns:24px 54px minmax(0,1fr) 112px; }
.story-line[data-story-scene] { cursor:pointer; }
.story-line > span:first-child {
  display:grid; width:23px; height:23px; place-items:center; border-radius:50%;
  background:#e5e1f5; color:#7565b1; font-size:9px; font-weight:900;
}
.story-line > strong { padding-top:3px; font-size:13px; line-height:1.45; font-weight:600; }
.story-line-image {
  width:54px; height:54px; padding:0; overflow:hidden; border:0; border-radius:11px;
  background:#ece8f7; cursor:zoom-in; box-shadow:0 4px 10px rgba(48,61,95,.12);
}
.story-line-image img { display:block; width:100%; height:100%; object-fit:cover; }
.story-line > .learning-tools { justify-content:end; padding:0; }
.story-line > .learning-details { grid-column:2 / -1; padding:0; text-align:left; }
.story-line.has-image > .learning-details { grid-column:3 / -1; }
.story-line.speaking { color:#8c481d; background:#ffdfbd; transform:scale(1.01); font-weight:800; }
.story-line.speaking > span:first-child { background:var(--orange); color:white; }
.result-actions { display:flex; gap:9px; margin-top:14px; }
.result-actions button { flex:1; border:0; border-radius:12px; padding:12px; cursor:pointer; font-size:12px; font-weight:800; }
.listen { color:white; background:linear-gradient(135deg,var(--purple),var(--blue)); box-shadow:0 8px 18px rgba(81,81,180,.22); }
.stop { color:#8b512b; background:#fff0e5; }
.again { color:#6352a6; background:#ece9f8; }
.catalog-result-link {
  display:inline-flex; margin-top:13px; color:#7363b1; font-size:10px; font-weight:800; text-decoration:none;
}

body.image-modal-open { overflow:hidden; }
.stage4-image-modal {
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px;
}
.stage4-image-modal-backdrop {
  position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(20,25,38,.78);
  cursor:zoom-out; backdrop-filter:blur(4px);
}
.stage4-image-modal figure {
  position:relative; z-index:1; width:min(520px,92vw); margin:0; padding:12px;
  border-radius:22px; background:white; box-shadow:0 25px 70px rgba(0,0,0,.38);
}
.stage4-image-modal figure > img {
  display:block; width:100%; max-height:72vh; aspect-ratio:1; object-fit:cover; border-radius:15px;
}
.stage4-image-modal figcaption {
  padding:11px 8px 3px; color:#40516b; font-size:15px; font-weight:900; text-align:center;
}
.stage4-image-modal-close {
  position:absolute; right:-9px; top:-9px; z-index:2; display:grid; width:38px; height:38px;
  place-items:center; padding:0; border:3px solid white; border-radius:50%; background:#6751b5;
  color:white; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.25); font-size:24px; line-height:1;
}

footer { max-width:1164px; margin:15px auto 30px; padding:0 10px; display:flex; justify-content:center; gap:14px; color:#7c8799; font-size:12px; }
footer strong { color:#6654ae; }

.choice-heading h3,
.choice-heading p,
.choice-card strong,
.event-copy strong,
.event-copy em,
.progressive-hints,
.instruction-copy small,
.story-lines p strong {
  -webkit-user-select:text;
  user-select:text;
}

@keyframes pop { from { opacity:0; transform:scale(.75); } to { opacity:1; transform:scale(1); } }
@keyframes shake { 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }

@media (max-width: 850px) {
  .hero { display:block; }.hero-path { margin-top:16px; max-width:none; }
  .game-shell { margin:0 12px; }
  .learning-bridge { grid-template-columns:1fr; }
  .learning-bridge-images { justify-content:flex-start; }
  .workspace { grid-template-columns:1fr; }
  .scene-card { padding:15px; }
  .scene { height:330px; }
  .choices { min-height:400px; padding:22px 19px; }
  .mission h2, .mission p { display:block; }.mission p { margin-top:5px; }
  .mission { flex-wrap:wrap; }
  .mission-goals { flex:1 1 100%; margin-left:70px; min-width:0; }
}

@media (max-width: 560px) {
  html, body { max-width:100%; overflow-x:hidden; }
  .topbar { width:100%; min-width:0; padding:14px 16px; overflow:hidden; }
  .brand { min-width:0; }
  .brand small { display:none; }.brand strong { font-size:15px; white-space:nowrap; }
  .brand-mark { width:41px; height:41px; }.stage-badge { font-size:10px; padding:8px 10px; }
  .stage-badge { flex:0 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .catalog-link { display:none; }
  .hero { width:100%; min-width:0; max-width:100%; padding:0 17px; margin-top:7px; overflow:hidden; }
  .hero h1 { max-width:100%; font-size:39px; overflow-wrap:anywhere; }
  .hero p { max-width:100%; font-size:14px; overflow-wrap:anywhere; }
  .hero-path { width:100%; max-width:100%; min-width:0; font-size:10px; padding:11px 13px; overflow:hidden; overflow-wrap:anywhere; }
  .game-shell { width:calc(100% - 24px); max-width:calc(100% - 24px); }
  .workspace, .scene-card, .choices { min-width:0; max-width:100%; }
  .mission { padding:15px; align-items:flex-start; }.mission-icon { width:44px; height:44px; font-size:23px; flex:0 0 auto; }
  .mission > div:nth-child(2), .mission h2, .mission p { min-width:0; overflow-wrap:anywhere; }
  .learning-bridge { gap:12px; padding:14px 15px; }
  .learning-bridge-copy > strong,
  .learning-bridge-copy > small { max-width:100%; font-size:13px; overflow-wrap:anywhere; }
  .learning-bridge-copy > small { font-size:11px; }
  .learning-bridge-images button { width:58px; height:58px; }
  .mission h2 { font-size:16px; }.mission p { font-size:12px; }
  .mission-goals { grid-template-columns:repeat(2,minmax(0,1fr)); margin-left:0; }
  .mission-goals span { min-width:0; overflow-wrap:anywhere; }
  .progress-wrap { padding:17px 10px 10px; }.progress-labels button { min-width:45px; font-size:9px; }
  .progress-labels i { width:23px; height:23px; }.progress-track { margin:-40px 20px 34px; }
  .scene { height:270px; border-width:5px; }.busra span { font-size:86px; }.table { left:28%; width:60%; }
  .prep-tray { grid-template-columns:1fr; }
  .prep-tray > p { grid-column:1; margin:-4px 0 0; }
  .table span { font-size:24px; }.table .olives { font-size:20px; }.scene-caption { padding:10px 12px; }
  .choice-grid.compact { grid-template-columns:repeat(2,1fr); }
  .choice-card { min-height:146px; }.choice-icon { font-size:32px; }
  .choice-icon.visual-image-wrap { height:92px; }
  .choice-card strong { font-size:15px; }
  .learning-tools { grid-template-columns:repeat(3,36px); gap:5px; padding-inline:4px; }
  .learning-tools button { width:36px; height:36px; padding:0; }
  .learning-tools button span { font-size:14px; }
  .learning-tools button b { font-size:11px; }
  .choice-card > .choice-select { min-height:124px; padding-left:44px; }
  .choice-card > .learning-tools {
    grid-template-columns:30px; grid-template-rows:repeat(3,30px);
    gap:4px; padding:0;
  }
  .choice-card > .learning-tools button { width:30px; height:30px; }
  .learning-legend { gap:5px; }
  .learning-legend b, .learning-legend small { font-size:10px; }
  .learning-menu summary { width:38px; height:38px; font-size:17px; }
  .learning-menu-list button { min-height:42px; }
  .learning-menu-list button b { font-size:13px; }
  .learning-menu-list button small { font-size:12px; }
  .choice-note { display:none; }
  .choice-actions { align-items:stretch; flex-direction:column; }
  .instruction-copy { max-width:none; }
  .instruction-copy small { max-width:none; font-size:14px; }
  .instruction-listen { min-height:39px; font-size:12px; }
  .check-answer { width:100%; min-height:58px; padding:15px 17px; font-size:15px; }
  .event-sorter { max-height:none; overflow:visible; }
  .event-row { grid-template-columns:14px 27px 35px minmax(0,1fr) 36px; gap:6px; min-height:126px; padding:9px 7px; }
  .event-grip { font-size:17px; }
  .event-number { width:27px; height:27px; }
  .event-icon { font-size:26px; }
  .event-copy strong { font-size:15px; white-space:normal; }
  .event-copy em { font-size:13px; }
  .event-copy .learning-tools { max-width:128px; }
  .event-copy .learning-tools button { width:36px; height:36px; }
  .event-copy .learning-tools button b { font-size:11px; }
  .event-buttons button { width:35px; height:35px; font-size:18px; }
  .action-choice-grid { grid-template-columns:1fr; gap:8px; }
  .action-choice {
    min-height:90px; display:grid; grid-template-columns:48px minmax(0,1fr);
    justify-items:start; text-align:left;
  }
  .action-choice > span { grid-row:1 / 3; align-self:center; font-size:34px; }
  .action-choice > .action-character-picture {
    width:48px; height:48px; grid-row:1 / 3; align-self:center;
  }
  .action-choice > .action-character-picture.wide { width:64px; }
  .action-choice strong { padding-right:32px; text-align:left; }
  .action-option-translation { text-align:left; }
  .direct-match-board { grid-template-columns:1fr; }
  .direct-piece-bank { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .direct-target-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .direct-piece, .direct-target { min-height:86px; }
  .direct-sequence-track, .direct-sequence-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hotspot-stage { min-height:250px; }
  .scan-stage { min-height:250px; }
  .scan-darkness {
    background:radial-gradient(circle 70px at var(--scan-x) var(--scan-y),transparent 0 56%,rgba(9,12,31,.18) 72%,rgba(5,7,22,.87) 100%);
  }
  .voice-meter { padding:14px 11px; }
  .voice-meter-labels { font-size:9px; }
  .recap-progress { grid-template-columns:1fr; }
  .recap-progress span { min-height:42px; justify-content:flex-start; text-align:left; }
  .recap-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .recap-complete-actions { grid-template-columns:1fr; }
  .progressive-hints-head { align-items:flex-start; flex-direction:column; }
  .progressive-hints-head > span { font-size:14px; }
  .progressive-hints-head > div { width:100%; justify-content:flex-start; }
  .progressive-hints-head button { min-height:40px; font-size:12px; }
  .progressive-hints li { grid-template-columns:minmax(0,1fr) auto; align-items:start; font-size:13px; }
  .hint-tools { justify-content:flex-start; }
  .hint-translation-text { font-size:13px; }
  .hint-placeholder { align-items:flex-start; flex-direction:column; }
  .hint-placeholder p { font-size:13px; }
  .sentence-hint { align-items:flex-start; flex-direction:column; font-size:10px; }
  .sentence-workbench { padding:11px; }
  .sentence-workbench > header {
    grid-template-columns:44px minmax(0,1fr); gap:8px;
  }
  .sentence-visual { width:44px; height:44px; font-size:25px; }
  .sentence-workbench header .learning-tools {
    grid-column:1 / -1; justify-self:end; margin-top:4px; padding:0;
  }
  .sentence-draft { min-height:78px; padding:10px; }
  .sentence-draft button,
  .sentence-bank button { min-height:44px; font-size:13px; }
  .sentence-builder-actions { align-items:stretch; flex-direction:column; }
  .sentence-reset, .sentence-builder-actions .check-answer { width:100%; }
  .story-line {
    grid-template-columns:23px minmax(0,1fr); gap:8px; padding:8px 5px;
  }
  .story-line.has-image { grid-template-columns:23px 48px minmax(0,1fr); }
  .story-line-image { width:48px; height:48px; }
  .story-line > strong { font-size:13px; }
  .story-line > .learning-tools {
    grid-column:2; justify-self:end; margin-top:3px; padding:0;
  }
  .story-line.has-image > .learning-tools { grid-column:3; }
  .story-line > .learning-details { grid-column:2; }
  .story-line.has-image > .learning-details { grid-column:3; }
  .result-actions { display:grid; grid-template-columns:1fr 1fr; }
  .result-actions .listen { grid-column:1 / -1; }
  footer { flex-direction:column; text-align:center; gap:3px; padding:0 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}