@font-face {
  font-family: "Gogo Vietnamese";
  src: url("./assets/NotoSansVietnamese-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --cream: #fff8e9;
  --paper: #fffdf6;
  --ink: #173f3a;
  --muted: #6e7c70;
  --green: #14715e;
  --green-dark: #0a5144;
  --mint: #d7eee2;
  --red: #e5523f;
  --yellow: #f8bd43;
  --orange: #f47a45;
  --line: rgba(23, 63, 58, 0.16);
  --shadow: 0 18px 48px rgba(59, 72, 49, 0.14);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--cream); }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 10%, rgba(248, 189, 67, 0.16) 0 3px, transparent 4px) 0 0 / 42px 42px,
    linear-gradient(145deg, #fffaf0 0%, #f9f0da 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", sans-serif;
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
[hidden] { display: none !important; }

.sun-glow {
  position: fixed;
  z-index: -1;
  width: 42vw;
  aspect-ratio: 1;
  right: -14vw;
  top: -23vw;
  border-radius: 50%;
  border: 1px solid rgba(229, 82, 63, 0.16);
  box-shadow: 0 0 0 55px rgba(248, 189, 67, 0.04), 0 0 0 110px rgba(229, 82, 63, 0.025);
}

.site-header {
  width: min(1180px, calc(100% - 40px));
  min-height: 92px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); pointer-events: none; user-select: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 52px;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 50% 50% 48% 52%;
  font: 700 19px/1 "Noto Sans", sans-serif;
  transform: rotate(-7deg);
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--ink);
}
.brand-name { font: 400 13px/1.05 "Noto Sans", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.brand-name b { color: var(--red); font-size: 17px; }
.header-actions { display: flex; gap: 8px; }
.icon-button, .back-button {
  border: 1px solid var(--line);
  background: rgba(255, 253, 246, 0.72);
  border-radius: 999px;
  min-height: 42px;
  padding: 0 16px;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}
.icon-button span:first-child { margin-right: 6px; font-weight: 700; color: var(--red); }
.icon-button:hover, .back-button:hover { transform: translateY(-2px); background: #fff; }

main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.start-screen {
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  gap: 56px 5vw;
  padding: 72px 0 48px;
}
.hero-copy { align-self: center; padding-left: 3vw; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.eyebrow span { width: 28px; height: 1px; background: currentColor; }
h1 { margin: 0; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.15; letter-spacing: -0.055em; }
h1 > span, h1 > em { display: block; white-space: nowrap; }
h1 em { color: var(--red); font-style: normal; }
.lead { margin: 24px 0 32px; color: #52665c; font-size: 16px; line-height: 2; }

.mode-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.5);
}
.mode-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
  padding: 10px 13px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.mode-option.active { color: white; background: var(--green); box-shadow: 0 4px 12px rgba(20, 113, 94, 0.25); }
.mode-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 9px; font: 700 17px "Noto Sans", sans-serif; }
.mode-option b, .mode-option small { display: block; }
.mode-option b { font-size: 13px; }
.mode-option small { margin-top: 2px; opacity: 0.7; font-size: 10px; }
.game-rule-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; width: min(520px, 100%); margin-top: 12px; padding: 5px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.5); }
.game-rule-option { min-height: 48px; padding: 7px 8px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; }
.game-rule-option b, .game-rule-option small { display: block; }
.game-rule-option b { color: var(--ink); font-size: 11px; }
.game-rule-option small { margin-top: 2px; font-size: 8px; }
.game-rule-option.active { color: white; background: var(--red); box-shadow: 0 4px 10px rgba(229,82,63,.22); }
.game-rule-option.active b { color: white; }
.game-rule-note { width: min(520px, 100%); margin: 5px 0 0; color: var(--muted); text-align: center; font-size: 8px; }
.review-entry {
  width: 100%; margin-top: 12px; min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 14px;
  border: 1px solid rgba(20,113,94,.28); border-radius: 12px; color: var(--green-dark); background: #edf8f2; cursor: pointer;
}
.review-entry span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: white; background: var(--green); }
.review-entry b { font-size: 12px; }
.review-entry small { margin-left: auto; color: var(--red); font-weight: 700; }

.hero-visual {
  position: relative;
  min-height: 400px;
  display: grid;
  place-items: center;
  border-radius: 48% 52% 44% 56% / 48% 45% 55% 52%;
  background: var(--green);
  box-shadow: 18px 22px 0 rgba(248, 189, 67, 0.6), var(--shadow);
  overflow: hidden;
  isolation: isolate;
}
.hero-visual::before, .hero-visual::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.hero-visual::before { width: 340px; aspect-ratio: 1; }
.hero-visual::after { width: 420px; aspect-ratio: 1; }
.bowl {
  position: relative;
  z-index: 3;
  width: min(300px, 70%);
  height: 150px;
  margin-top: 50px;
  border-radius: 15px 15px 145px 145px;
  background: #fff7df;
  border: 5px solid var(--ink);
  box-shadow: inset 0 -16px 0 #f1deba, 0 16px 0 rgba(4, 39, 32, 0.27);
}
.bowl::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -13px;
  right: -13px;
  top: -22px;
  height: 68px;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.76) 0 20%, transparent 55%),
    linear-gradient(180deg, rgba(255, 253, 235, .95), rgba(236, 215, 161, .68));
  box-shadow: inset 0 0 0 7px rgba(255, 249, 222, .72), inset 0 -8px 12px rgba(166, 119, 50, .1);
}
.bowl-label { position: absolute; z-index: 3; inset: 63px 0 auto; text-align: center; color: var(--red); font: 700 35px "Noto Sans", sans-serif; letter-spacing: .12em; }
.bowl-toppings {
  position: absolute;
  z-index: 2;
  left: -8px;
  right: -8px;
  top: -20px;
  height: 69px;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
}
.bowl-noodle {
  position: absolute;
  z-index: 1;
  height: 13px;
  border: 5px solid #fffdf3;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  filter: drop-shadow(0 2px 0 rgba(159, 126, 76, .26));
}
.noodle-one { top: 11px; left: 6%; width: 108px; transform: rotate(7deg); }
.noodle-two { top: 26px; left: 18%; width: 118px; transform: rotate(-2deg); }
.noodle-three { top: 10px; right: 5%; width: 104px; transform: rotate(-7deg); }
.noodle-four { top: 40px; right: 9%; width: 100px; transform: rotate(6deg); }
.noodle-five { top: 49px; left: 31%; width: 92px; transform: rotate(-9deg); }
.bowl-sprout {
  position: absolute;
  z-index: 3;
  width: 36px;
  height: 13px;
  border-top: 2px solid #fff9dd;
  border-radius: 50%;
  filter: drop-shadow(0 1px rgba(111, 86, 48, .16));
}
.bowl-sprout::after { content: ""; position: absolute; right: -1px; top: -3px; width: 4px; height: 4px; border-radius: 50% 50% 45% 55%; background: #e0bd58; }
.sprout-one { left: 10%; top: 39px; transform: rotate(7deg); }
.sprout-two { left: 25%; top: 53px; transform: rotate(-13deg); }
.sprout-three { right: 10%; top: 27px; transform: rotate(16deg); }
.sprout-four { right: 24%; top: 51px; transform: rotate(-5deg); }
.bowl-beef {
  position: absolute;
  z-index: 4;
  width: 52px;
  height: 13px;
  overflow: hidden;
  border: 1.5px solid #8e6352;
  border-radius: 42% 58% 36% 64% / 58% 44% 56% 42%;
  background: linear-gradient(155deg, #e5b798 0 22%, #b98169 23% 62%, #d9a083 63% 100%);
  box-shadow: inset 0 2px rgba(255, 222, 191, .55), 0 1px 1px rgba(91, 52, 37, .18);
}
.bowl-beef::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 18px;
  height: 3px;
  border-top: 2px solid rgba(255, 221, 190, .82);
  border-radius: 50%;
  transform: rotate(-9deg);
  box-shadow: 21px 4px 0 -1px rgba(255, 221, 190, .72), 34px -1px 0 -1px rgba(255, 228, 202, .68);
}
.bowl-beef::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 8px;
  width: 10px;
  height: 1.5px;
  border-radius: 50%;
  background: rgba(139, 75, 60, .52);
  transform: rotate(7deg);
  box-shadow: 17px -4px rgba(139, 75, 60, .45), 30px 0 rgba(139, 75, 60, .38);
}
.beef-one { left: 39%; top: 11px; transform: rotate(-8deg) skewX(-5deg); }
.beef-two { right: 17%; top: 31px; width: 48px; transform: rotate(10deg) skewX(4deg); }
.beef-three { left: 47%; top: 47px; width: 45px; height: 11px; transform: rotate(3deg) skewX(-3deg); }
.bowl-herb {
  position: absolute;
  z-index: 5;
  width: 20px;
  height: 13px;
  border-radius: 72% 18% 68% 20%;
  background: #3f8b46;
  filter: drop-shadow(0 1px rgba(24, 77, 42, .25));
}
.bowl-herb::before, .bowl-herb::after { content: ""; position: absolute; width: 15px; height: 10px; border-radius: 70% 18% 68% 20%; background: inherit; }
.bowl-herb::before { left: -8px; top: 6px; transform: rotate(-36deg); }
.bowl-herb::after { right: -8px; top: 5px; transform: rotate(54deg); }
.herb-one { left: 15%; top: 8px; transform: rotate(18deg); }
.herb-two { left: 23%; top: 29px; background: #65a84f; transform: rotate(-22deg); }
.herb-three { right: 8%; top: 11px; background: #4b9950; transform: rotate(117deg); }
.herb-four { right: 28%; top: 47px; width: 17px; height: 11px; background: #2f7d3c; transform: rotate(63deg); }
.bowl-onion { position: absolute; z-index: 3; width: 34px; height: 11px; border: 2px solid rgba(135, 76, 105, .68); border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; }
.onion-one { top: 12px; right: 23%; transform: rotate(12deg); }
.onion-two { top: 42px; left: 27%; width: 28px; transform: rotate(-13deg); }
.bowl-scallion { position: absolute; z-index: 6; width: 8px; height: 5px; border-radius: 2px; background: #327b3c; box-shadow: 19px 8px #75a94c, 43px -3px #327b3c, 67px 7px #75a94c; transform: rotate(10deg); }
.scallion-one { left: 29%; top: 18px; }
.scallion-two { right: 28%; top: 47px; transform: rotate(-12deg); }
.bowl-lime {
  position: absolute;
  z-index: 6;
  left: 6%;
  top: 23px;
  width: 36px;
  height: 27px;
  background: linear-gradient(150deg, #f4efab 0 68%, #78a942 69% 84%, #4f8735 85% 100%);
  clip-path: polygon(10% 100%, 100% 76%, 23% 0);
  transform: rotate(-13deg);
  filter: drop-shadow(0 1px rgba(39, 91, 37, .25));
}
.bowl-lime::before { content: ""; position: absolute; left: 11px; top: 6px; width: 1.5px; height: 20px; background: rgba(255,255,235,.88); transform: rotate(-19deg); box-shadow: 8px 3px rgba(255,255,235,.72); }
.chopsticks { position: absolute; z-index: 5; width: 280px; height: 8px; background: var(--yellow); border: 3px solid var(--ink); border-radius: 10px; transform: translate(38px, -108px) rotate(-10deg); box-shadow: 0 14px 0 -2px var(--yellow), 0 14px 0 1px var(--ink); }
.lantern {
  position: absolute;
  z-index: 1;
  width: 64px;
  height: 120px;
  filter: drop-shadow(0 5px 3px rgba(4, 39, 32, .18));
}
.lantern::before { content: ""; position: absolute; top: 0; left: calc(50% - 1px); width: 2px; height: 31px; background: #f5c66b; box-shadow: 0 0 0 1px rgba(4, 39, 32, .45); }
.lantern::after {
  content: "";
  position: absolute;
  top: 96px;
  left: calc(50% - 7px);
  width: 14px;
  height: 23px;
  border-top: 5px solid #f5c66b;
  background: repeating-linear-gradient(90deg, #f5c66b 0 2px, transparent 2px 4px);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 62% 54%, 50% 100%, 35% 55%, 12% 100%);
}
.lantern-body {
  position: absolute;
  top: 27px;
  left: 0;
  width: 64px;
  height: 72px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 214, 116, .88) 0 19%, rgba(242, 94, 68, .72) 54%, #cf3e35 100%),
    #e8523f;
  clip-path: polygon(50% 0, 75% 13%, 100% 50%, 75% 87%, 50% 100%, 25% 87%, 0 50%, 25% 13%);
}
.lantern-body::before {
  content: "";
  position: absolute;
  inset: 6px 10px;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(104, 33, 29, .42) 9px 11px);
  clip-path: polygon(50% 0, 78% 14%, 100% 50%, 78% 86%, 50% 100%, 22% 86%, 0 50%, 22% 14%);
}
.lantern-body::after { content: ""; position: absolute; left: calc(50% - 9px); top: 2px; width: 18px; height: 5px; border-radius: 50%; background: #f5c66b; box-shadow: 0 63px #f5c66b; }
.lantern-one { left: 8%; top: 23%; transform: rotate(-3deg); }
.lantern-two { right: 7%; top: 17%; transform: scale(.82) rotate(4deg); transform-origin: top center; }
.steam { position: absolute; z-index: 4; top: 16%; color: white; font: 700 80px/1 serif; opacity: .65; transform: rotate(80deg); animation: float 2.2s ease-in-out infinite; }
.steam-one { left: 42%; } .steam-two { left: 53%; top: 20%; animation-delay: -1.1s; font-size: 60px; }
.scooter { position: absolute; right: 4%; bottom: 5%; color: var(--yellow); font-size: 22px; }
@keyframes float { 50% { transform: translateY(-12px) rotate(80deg); opacity: .35; } }

.course-section { grid-column: 1 / -1; padding-top: 10px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.section-heading span { color: var(--red); font: 700 10px "Noto Sans", sans-serif; letter-spacing: .22em; }
.section-heading h2 { margin: 0; font-size: 23px; }
.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.course-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "label label" "icon name" "icon desc" "meta meta";
  gap: 4px 15px;
  min-height: 190px;
  padding: 22px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 18px;
  color: var(--ink);
  background: rgba(255, 253, 246, .88);
  box-shadow: 0 8px 30px rgba(37, 65, 53, .08);
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.course-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.course-card.selected { border-color: var(--red); background: #fff; }
.course-card.practice-card { background: linear-gradient(145deg, #eef9f3, #fffdf6); }
.course-card.practice-card.selected { border-color: var(--green); }
.course-label { grid-area: label; color: var(--green); font: 700 10px "Noto Sans", sans-serif; letter-spacing: .18em; }
.course-icon { grid-area: icon; align-self: center; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--mint); font-size: 26px; }
.course-card strong { grid-area: name; align-self: end; font-size: 17px; }
.course-description { grid-area: desc; color: var(--muted); font-size: 12px; }
.course-meta { grid-area: meta; display: flex; align-items: baseline; gap: 4px; padding-top: 14px; margin-top: auto; border-top: 1px dashed var(--line); color: var(--muted); font-size: 11px; }
.course-meta b { color: var(--red); font: 700 28px "Noto Sans", sans-serif; }
.course-meta i { margin-left: auto; color: var(--yellow); font-style: normal; letter-spacing: 3px; }
.selected-check { position: absolute; right: 14px; top: 13px; display: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--red); font-size: 13px; }
.selected .selected-check { display: grid; }
.primary-button, .secondary-button {
  min-height: 58px;
  padding: 0 24px;
  border-radius: 14px;
  border: 0;
  font-weight: 700;
  cursor: pointer;
}
.primary-button { display: flex; align-items: center; justify-content: space-between; color: #fff; background: var(--red); box-shadow: 0 7px 0 #ad382d; transition: transform 150ms ease, box-shadow 150ms ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 9px 0 #ad382d; }
.primary-button:active { transform: translateY(5px); box-shadow: 0 2px 0 #ad382d; }
.course-section > .primary-button { width: min(340px, 100%); margin: 26px auto 0; }
.arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.17); }
.keyboard-hint { margin: 13px 0 0; color: var(--muted); text-align: center; font-size: 10px; }
kbd { padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px; background: #fff; box-shadow: 0 2px 0 var(--line); }

.site-footer { width: min(1180px, calc(100% - 40px)); margin: 20px auto 0; padding: 22px 0 30px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .08em; }

/* Game */
.playing { height: 100dvh; overflow: hidden; background: #f5ecd8; }
.playing .site-header, .playing .site-footer { display: none; }
.playing main { width: 100%; }
.game-screen { height: 100dvh; display: grid; grid-template-rows: 58px 48px minmax(170px, 1fr) auto; overflow: hidden; }
.game-topbar { min-height: 58px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 max(24px, calc((100vw - 1100px) / 2)); border-bottom: 1px solid var(--line); background: rgba(255,253,246,.92); }
.back-button { justify-self: start; }
.game-course { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.game-course span { font-size: 22px; }
.game-course small { padding: 3px 6px; border-radius: 999px; color: var(--green-dark); background: var(--mint); font-size: 7px; font-weight: 700; }
.timer { justify-self: end; display: flex; align-items: baseline; gap: 5px; color: var(--red); }
.timer span { font: 700 31px "Gogo Vietnamese", sans-serif; font-variant-numeric: tabular-nums; }
.timer small { font: 700 9px "Noto Sans", sans-serif; letter-spacing: .12em; }
.score-strip { width: min(680px, calc(100% - 40px)); height: 40px; margin: 4px auto; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 12px; background: var(--ink); color: white; box-shadow: 0 5px 16px rgba(23, 63, 58, .18); }
.score-strip > div { padding: 4px 18px; display: flex; align-items: baseline; justify-content: center; gap: 8px; border-right: 1px solid rgba(255,255,255,.12); }
.score-strip > div:last-child { border: 0; }
.score-strip small { color: #9bc1b1; font: 700 8px "Noto Sans", sans-serif; letter-spacing: .16em; }
.score-strip strong { font: 700 20px "Gogo Vietnamese", sans-serif; }
.score-strip i { margin-left: 3px; color: var(--yellow); font-size: 11px; font-style: normal; }
.street-stage { position: relative; min-height: 0; overflow: hidden; border-top: 1px solid rgba(23,63,58,.1); border-bottom: 1px solid rgba(23,63,58,.2); background: linear-gradient(#bee2d9 0 48%, #efb769 48% 72%, #e8914f 72%); }
.stage-skyline { position: absolute; inset: auto 0 51%; height: 100px; display: flex; align-items: end; justify-content: space-around; color: rgba(23,63,58,.34); font: 700 13px "Noto Sans"; letter-spacing: .1em; }
.stage-skyline::before, .stage-skyline::after { content: ""; width: 18%; height: 75px; background: rgba(23,63,58,.15); clip-path: polygon(0 30%, 12% 30%, 12% 0, 18% 0, 18% 30%, 37% 30%, 37% 12%, 44% 12%, 44% 30%, 100% 30%, 100% 100%, 0 100%); }
.stage-skyline i { width: 2px; height: 68px; background: rgba(23,63,58,.18); }
.teacher-tip { position: absolute; z-index: 6; left: max(16px, calc((100vw - 1120px) / 2)); top: 20px; display: flex; align-items: center; max-width: min(370px, calc(100vw - 32px)); filter: drop-shadow(0 7px 15px rgba(23,63,58,.14)); }
.teacher-tip img { position: relative; z-index: 2; flex: none; width: 64px; height: 64px; border-radius: 50%; border: 3px solid white; background: var(--green); object-fit: cover; }
.teacher-speech { position: relative; min-width: 175px; max-width: 285px; margin-left: 8px; padding: 8px 13px 9px; border: 1px solid rgba(23,63,58,.12); border-radius: 13px; background: white; }
.teacher-speech::before { content: ""; position: absolute; left: -9px; top: 50%; width: 16px; height: 16px; border-left: 1px solid rgba(23,63,58,.12); border-bottom: 1px solid rgba(23,63,58,.12); background: white; transform: translateY(-50%) rotate(45deg); }
.teacher-speech strong, .teacher-speech p { position: relative; z-index: 1; }
.teacher-speech strong { display: block; color: var(--red); font-size: 9px; letter-spacing: .05em; }
.teacher-speech p { display: -webkit-box; margin: 2px 0 0; overflow: hidden; font-size: 12px; font-weight: 700; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.order-track { position: absolute; z-index: 5; left: 50%; bottom: 52px; width: min(900px, 96vw); height: min(192px, calc(100% - 58px)); transform: translateX(-50%); }
.order-card { position: absolute; left: 50%; bottom: 0; width: min(286px, 76vw); height: min(176px, calc(100% - 6px)); min-height: 128px; padding: 11px 20px 0; border: 3px solid var(--ink); border-radius: 21px; background: var(--paper); box-shadow: 8px 10px 0 rgba(23,63,58,.22); text-align: center; transform: translateX(-50%); transition: width 180ms ease; }
.order-card.dish-enter { animation: dish-enter 320ms cubic-bezier(.2,.78,.28,1); }
.order-card.dish-exit { animation: dish-exit 340ms cubic-bezier(.55,.08,.8,.28) both; }
.order-card.dish-missed { filter: grayscale(1); }
@keyframes dish-enter {
  from { opacity: .25; transform: translateX(calc(-50% + min(72vw, 700px))) rotate(1.5deg); }
  to { opacity: 1; transform: translateX(-50%); }
}
@keyframes dish-exit {
  from { opacity: 1; transform: translateX(-50%); }
  to { opacity: .2; transform: translateX(calc(-50% - min(72vw, 700px))) rotate(-2deg); }
}
.dish-icon { position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--red); background: #fae5d0; font-size: 18px; font-weight: 700; }
.japanese { max-width: calc(100% - 48px); margin: 2px auto 4px; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.vietnamese { display: -webkit-box; max-width: 100%; max-height: 2.4em; margin: 0 auto; overflow: hidden; color: var(--green-dark); font: 700 clamp(27px, 4vw, 40px)/1.2 "Gogo Vietnamese", sans-serif; overflow-wrap: normal; word-break: keep-all; text-wrap: balance; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.target-short .vietnamese { white-space: nowrap; }
.order-card.target-medium { width: min(304px, 80vw); }
.target-medium .vietnamese { font-size: clamp(26px, 3.3vw, 32px); }
.order-card.target-long { width: min(330px, 84vw); }
.target-long .vietnamese { font-size: clamp(22px, 2.7vw, 25px); line-height: 1.14; }
.target-long .dish-icon { left: 12px; top: 10px; width: 31px; height: 31px; font-size: 15px; }
.order-card.target-xlong { width: min(390px, 90vw); padding-top: 8px; }
.target-xlong .japanese { font-size: 11px; }
.target-xlong .vietnamese { max-height: 3.18em; font-size: clamp(17px, 2.1vw, 20px); line-height: 1.06; -webkit-line-clamp: 3; }
.target-xlong .dish-icon { left: 10px; top: 8px; width: 29px; height: 29px; font-size: 14px; }
.order-card.audio-prompt .vietnamese { color: var(--red); font-size: clamp(18px, 2.4vw, 23px); white-space: nowrap; -webkit-line-clamp: 1; }
.order-card.audio-prompt .pronunciation { display: none; }
.order-card.audio-prompt .pronunciation-button { width: 38px; height: 38px; border: 2px solid var(--green); }
.pronunciation-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; }
.pronunciation { display: inline-block; margin: 0; padding: 3px 10px; border-radius: 999px; color: var(--red); background: #fff0df; font-size: 10px; }
.pronunciation-button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; color: var(--green); background: white; cursor: pointer; }
.pronunciation-button.playing { color: white; background: var(--green); animation: key-pulse 900ms ease-in-out infinite; }
.dish-plate { position: absolute; left: 10%; right: 10%; bottom: -23px; height: 31px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); box-shadow: inset 0 0 0 6px #ffeab4; }
.conveyor { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 64px; overflow: hidden; pointer-events: none; user-select: none; border-top: 5px solid var(--ink); background: #efe9d7; box-shadow: inset 0 12px rgba(255,255,255,.65); }
.belt-direction { position: absolute; z-index: 2; right: 18px; top: 7px; color: var(--green-dark); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.belt-dots { height: 100%; background: radial-gradient(circle, var(--ink) 0 8px, transparent 9px) 0 0 / 68px 68px; animation: belt 3s linear infinite paused; }
.street-stage.dish-transitioning .belt-dots { animation-play-state: running; }
@keyframes belt { to { background-position: 68px 0; } }
.typing-panel { width: min(820px, calc(100% - 40px)); margin: 0 auto; padding: 7px 0 max(8px, env(safe-area-inset-bottom)); }
.typing-panel label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.typing-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 7px; }
.typing-heading label { margin: 0; }
.keyboard-tabs { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.62); }
.keyboard-tab { min-width: 68px; min-height: 29px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.keyboard-tab.active { color: white; background: var(--green); }
.practice-rule { min-height: 38px; display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin-bottom: 4px; padding: 3px 7px; border: 1px solid rgba(20,113,94,.2); border-radius: 9px; color: var(--muted); background: #f1f8f2; font-size: 9px; }
.practice-rule span { white-space: nowrap; }
.practice-rule b { color: var(--green); }
.practice-rule button { flex: none; min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 0; border-radius: 8px; color: white; background: var(--red); box-shadow: 0 3px 0 #ad382d; font-size: 11px; font-weight: 700; cursor: pointer; }
.practice-rule button > span:first-child { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--red); background: white; font-size: 11px; line-height: 1; }
.practice-rule button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.practice-rule button:active { box-shadow: 0 1px 0 #ad382d; transform: translateY(2px); }
.practice-rule button:focus-visible { outline: 3px solid rgba(229,82,63,.28); outline-offset: 3px; }
.lesson-breakdown { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 5px; padding: 5px 8px; border-radius: 11px; background: #fff7df; }
.lesson-syllable { flex: none; padding: 3px 6px; border-radius: 999px; color: var(--green); background: var(--mint); font-size: 8px; font-weight: 700; }
.lesson-step { min-width: 90px; padding: 3px 8px; border: 1px solid transparent; border-radius: 8px; text-align: center; }
.lesson-step small, .lesson-step strong { display: block; }
.lesson-step small { color: var(--muted); font-size: 7px; }
.lesson-step strong { color: var(--ink); font: 700 13px "Gogo Vietnamese", sans-serif; }
.lesson-step.current { border-color: var(--red); background: white; box-shadow: 0 2px 0 rgba(229,82,63,.18); }
.lesson-step.current strong { color: var(--red); }
.lesson-plus, .lesson-arrow { color: var(--red); font-weight: 700; }
.lesson-specials { display: flex; justify-content: center; gap: 4px; margin: -2px 0 4px; }
.lesson-specials:empty { display: none; }
.lesson-specials span { max-width: 100%; padding: 3px 7px; border-radius: 6px; color: var(--green-dark); background: #e4f3e8; font-size: 8px; font-weight: 700; line-height: 1.35; text-align: center; white-space: normal; }
.lesson-specials kbd { padding: 1px 3px; }
.telex-guide { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 5px; padding: 4px 12px; border-radius: 10px; color: var(--green-dark); background: #e9f4ed; }
.guide-label { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.telex-guide strong { font: 700 18px "Noto Sans", sans-serif; letter-spacing: .04em; }
.guide-arrow { color: var(--red); }
.guide-preview { min-width: 80px; color: var(--red); font: 700 15px "Noto Sans", sans-serif; }
.input-shell { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; border: 2px solid var(--green); border-radius: 12px; background: white; box-shadow: 0 6px 18px rgba(23,63,58,.09); transition: border-color 150ms ease, transform 150ms ease; }
.input-marker { color: var(--red); font: 700 32px/1 "Noto Sans"; }
.input-shell input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; color: var(--ink); background: transparent; font: 700 22px "Gogo Vietnamese", sans-serif; }
.input-shell.error { border-color: var(--red); animation: shake 220ms ease; }
.input-shell.success { border-color: #48a66f; background: #eefaf2; }
@keyframes shake { 33% { transform: translateX(-5px); } 66% { transform: translateX(5px); } }
.mode-badge { flex: none; padding: 4px 8px; border-radius: 5px; color: var(--green); background: var(--mint); font-size: 9px; font-weight: 700; }
.dish-progress { height: 4px; margin-top: 5px; overflow: hidden; border-radius: 9px; background: rgba(23,63,58,.1); }
.dish-progress span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--yellow)); }
.input-feedback { margin: 4px 0 0; color: var(--muted); text-align: center; font-size: 10px; }
.next-key-line { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 29px; margin: 3px 0; color: var(--muted); font-size: 10px; }
.next-key-line kbd { min-width: 35px; padding: 4px 9px; color: white; border-color: var(--green-dark); background: var(--green); box-shadow: 0 3px 0 var(--green-dark); text-align: center; font: 700 14px "Noto Sans"; }
.next-key-line small { min-width: 75px; color: var(--red); font-size: 9px; }
.virtual-keyboard { display: grid; gap: 5px; padding: 11px; border: 1px solid rgba(23,63,58,.2); border-radius: 18px; background: linear-gradient(#e2ded2, #d3cdbf); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 9px 25px rgba(23,63,58,.13); touch-action: manipulation; user-select: none; }
.keyboard-row { display: flex; justify-content: center; gap: 5px; }
.keyboard-row:nth-child(2) { padding-inline: 3.3%; }
.keyboard-key { position: relative; flex: 1 1 0; max-width: 66px; min-width: 0; min-height: 38px; padding: 2px; border: 1px solid rgba(23,63,58,.23); border-radius: 8px; color: var(--ink); background: #fffdf7; box-shadow: 0 3px 0 #aaa595; cursor: pointer; transition: transform 100ms ease, box-shadow 100ms ease, color 100ms ease, background 100ms ease; }
.keyboard-key:hover { background: white; transform: translateY(-1px); box-shadow: 0 4px 0 #aaa595; }
.keyboard-key:active { transform: translateY(3px); box-shadow: 0 0 0 #aaa595; }
.keyboard-key b { display: block; font: 700 15px "Noto Sans", sans-serif; }
.keyboard-key small { display: block; overflow: hidden; color: var(--muted); font-size: 7px; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
.keyboard-key.telex-special { color: var(--green-dark); background: #f2fbf5; }
.keyboard-key.next-key { z-index: 2; color: white; border-color: var(--red); background: var(--red); box-shadow: 0 0 0 3px rgba(229,82,63,.2), 0 3px 0 #ad382d; animation: key-pulse 900ms ease-in-out infinite; }
.keyboard-key.next-key small { color: #ffe1d9; }
@keyframes key-pulse { 50% { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(229,82,63,.1), 0 5px 0 #ad382d; } }
.keyboard-special-row { margin-bottom: 2px; }
.keyboard-special-row .keyboard-key { max-width: 80px; color: var(--green); background: #ecf8f1; }
.tone-row .keyboard-key { max-width: 90px; color: var(--red); background: #fff2e8; }
.action-row { margin-top: 1px; }
.backspace-key { flex: .55; max-width: 130px; }
.space-key { flex: 2.4; max-width: 340px; }
.device-ime .telex-guide, .device-ime .next-key-line, .device-ime .virtual-keyboard { display: none; }
.device-ime .typing-panel { align-self: start; }
.practice-session .timer span { font-size: 34px; }
.practice-session { grid-template-rows: 58px 48px minmax(150px, 1fr) auto; }
.practice-session .telex-guide { display: none; }
.practice-session .conveyor { height: 40px; }
.practice-session .order-track { bottom: 32px; height: calc(100% - 38px); }
.practice-session .order-card { min-height: 110px; }
.practice-session .virtual-keyboard { gap: 2px; padding: 4px; }
.practice-session .keyboard-row { gap: 3px; }
.practice-session .keyboard-key { min-height: 27px; }
.practice-session .order-card { left: 50%; transform: translateX(-50%); }
.practice-session .dish-progress span { background: var(--green); }
.practice-session .belt-dots { animation-duration: 8s; }
.untimed-session .order-card { left: 50%; transform: translateX(-50%); }
.untimed-session .belt-direction { display: none; }

/* Dialogs */
.modal { width: min(500px, calc(100% - 32px)); padding: 34px; border: 0; border-radius: 22px; color: var(--ink); background: var(--paper); box-shadow: 0 30px 90px rgba(17,49,42,.4); }
.modal::backdrop { background: rgba(9,47,40,.62); backdrop-filter: blur(5px); }
.modal-close { position: absolute; right: 15px; top: 15px; width: 35px; height: 35px; border: 0; border-radius: 50%; background: #f1eadb; cursor: pointer; }
.modal-kicker { margin: 0 0 5px; color: var(--red); font: 700 10px "Noto Sans"; letter-spacing: .2em; }
.modal h2 { margin: 0 0 22px; font-size: 28px; }
.modal ol { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.modal li { position: relative; padding: 13px 15px 13px 54px; border-radius: 13px; background: #f6f0e3; counter-increment: steps; }
.modal li::before { content: counter(steps); position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: white; background: var(--green); font: 700 12px "Noto Sans"; }
.modal li b, .modal li span { display: block; }
.modal li b { font-size: 13px; }
.modal li span { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.modal-note { margin: 18px 0 0; padding: 12px; border-left: 3px solid var(--yellow); color: var(--muted); background: #fff8df; font-size: 11px; line-height: 1.65; }
.result-modal { max-height: calc(100dvh - 24px); overflow: auto; text-align: center; }
.result-modal h2 { margin-bottom: 7px; color: var(--green); }
.result-message { margin: 0 auto 10px; max-width: 370px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.result-encouragement { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 13px; padding: 9px 11px; border: 1px solid rgba(20,113,94,.18); border-radius: 12px; background: #edf8f2; }
.result-encouragement > span, .result-encouragement strong, .result-encouragement small { display: block; }
.result-encouragement > span { min-width: 0; text-align: center; }
.result-encouragement strong { color: var(--green-dark); font: 700 14px "Gogo Vietnamese", sans-serif; }
.result-encouragement small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.result-score { padding: 15px; border-radius: 14px; color: white; background: var(--green); }
.result-score span { display: block; color: #b6d8cd; font-size: 9px; letter-spacing: .15em; }
.result-score strong { font: 700 47px "Noto Sans"; }
.result-score small { margin-left: 5px; color: var(--yellow); }
.result-stats { display: grid; grid-template-columns: repeat(7, 1fr); margin: 14px 0; }
.result-stats div { padding: 9px; border-right: 1px solid var(--line); }
.result-stats div:last-child { border: 0; }
.result-stats strong, .result-stats span { display: block; }
.result-stats strong { min-height: 27px; font: 700 17px "Noto Sans"; overflow-wrap: anywhere; }
.result-stats span { color: var(--muted); font-size: 9px; }
.new-best { margin: 8px 0; color: var(--red); font: 700 11px "Noto Sans"; letter-spacing: .18em; }
.difficult-words { margin: 10px 0 0; padding: 10px; border-radius: 10px; color: var(--muted); background: #fff3e4; font-size: 10px; }
.difficult-words b, .difficult-words span { display: block; }
.difficult-words span { margin-top: 3px; color: var(--red); font: 700 13px "Gogo Vietnamese", sans-serif; }
.result-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; margin-top: 18px; }
.result-actions #retryButton { position: relative; justify-content: center; }
.result-actions #retryButton .arrow { position: absolute; right: 24px; }
.secondary-button { border: 1px solid var(--line); background: #f2ecdf; }
.review-result-button { width: 100%; min-height: 42px; margin-top: 10px; border: 1px solid var(--green); border-radius: 11px; color: var(--green); background: #edf8f2; font-weight: 700; cursor: pointer; }
.ranking-publish-button {
  width: 100%; min-height: 46px; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid #d89818; border-radius: 12px; color: var(--ink); background: #fff2bd; box-shadow: 0 4px 0 #d9b65f; font-weight: 700; cursor: pointer;
}
.ranking-publish-button:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #d9b65f; }
.ranking-publish-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #d9b65f; }
.ranking-modal { width: min(860px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; text-align: left; }
.ranking-title-row { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.ranking-title-row h2 { margin-bottom: 4px; }
.ranking-title-row p { margin: 0; color: var(--muted); font-size: 11px; }
.ranking-casual-badge { flex: none; margin-top: 4px; padding: 5px 9px; border-radius: 999px; color: #83540a; background: #fff0b8; font-size: 9px; font-weight: 700; }
.ranking-course-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 20px 0 14px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: #f5efe2; }
.ranking-course-tab { min-height: 42px; padding: 7px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.ranking-course-tab.active { color: white; background: var(--green); box-shadow: 0 3px 8px rgba(20,113,94,.22); }
.ranking-offline, .ranking-status { margin: 12px 0; padding: 11px 13px; border-radius: 10px; color: var(--muted); background: #f6f0e3; font-size: 11px; line-height: 1.6; }
.ranking-offline { color: #885d18; background: #fff2c9; }
.ranking-status:empty { display: none; }
.ranking-list { display: grid; gap: 5px; min-height: 92px; }
.ranking-row { display: grid; grid-template-columns: 46px minmax(120px, 1.2fr) 92px minmax(300px, 1.7fr); align-items: center; gap: 8px; min-height: 47px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 11px; background: #fffdf8; }
.ranking-row.ranking-header { min-height: 30px; padding-block: 3px; border-color: transparent; color: var(--muted); background: transparent; font-size: 8px; font-weight: 700; }
.ranking-row.is-self { border-color: #e1a525; background: #fff8dc; box-shadow: 0 0 0 2px rgba(248,189,67,.18); }
.ranking-position { text-align: center; font: 700 15px "Noto Sans", sans-serif; }
.ranking-position.medal { color: var(--red); font-size: 20px; }
.ranking-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.ranking-you { margin-left: 6px; padding: 2px 5px; border-radius: 999px; color: white; background: var(--red); font-size: 7px; vertical-align: middle; }
.ranking-score { color: var(--green-dark); text-align: right; font: 700 16px "Noto Sans", sans-serif; }
.ranking-details { display: grid; grid-template-columns: 58px 64px 58px 54px 62px minmax(115px, 1fr); align-items: center; gap: 5px; }
.ranking-details-header { color: var(--muted); }
.ranking-stat { color: var(--muted); text-align: right; font-size: 10px; }
.ranking-modes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.ranking-mode-badge { padding: 3px 5px; border-radius: 5px; color: var(--green-dark); background: var(--mint); font-size: 7px; font-weight: 700; white-space: nowrap; }
.ranking-empty { padding: 30px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; font-size: 11px; }
.ranking-self { margin-top: 8px; padding: 10px 12px; border-radius: 11px; background: #edf8f2; font-size: 10px; }
.ranking-self-row { display: flex; align-items: center; gap: 9px; }
.ranking-self-row strong { font-size: 12px; }
.ranking-self-row span { color: var(--muted); }
.ranking-delete { margin-left: auto; padding: 5px 8px; border: 1px solid rgba(229,82,63,.3); border-radius: 7px; color: var(--red); background: white; font-size: 9px; font-weight: 700; cursor: pointer; }
.ranking-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, .8fr); gap: 10px 16px; margin-top: 16px; padding: 16px; border: 1px solid rgba(20,113,94,.2); border-radius: 14px; background: #f2f9f5; }
.ranking-record-summary { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; padding: 13px; border-radius: 11px; color: white; background: var(--green); }
.ranking-record-summary span { color: #b6d8cd; font-size: 8px; letter-spacing: .08em; }
.ranking-record-summary strong { margin-top: 4px; font: 700 25px "Noto Sans", sans-serif; }
.ranking-record-summary small { margin-top: 4px; color: #d9eee7; font-size: 8px; }
.ranking-name-label { align-self: end; color: var(--muted); font-size: 9px; font-weight: 700; }
.ranking-form input[type="text"] { width: 100%; min-height: 41px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; font-size: 13px; }
.ranking-consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; font-size: 10px; line-height: 1.5; cursor: pointer; }
.ranking-consent input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--green); }
.ranking-form-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.ranking-submit { grid-column: 1 / -1; width: min(300px, 100%); margin: 0 auto; }
.telex-intro-modal { width: min(760px, calc(100% - 28px)); max-height: calc(100dvh - 24px); overflow: auto; }
.intro-cards { display: grid; grid-template-columns: .9fr 1.35fr .9fr; gap: 10px; }
.intro-cards article { position: relative; min-height: 220px; padding: 43px 14px 14px; border-radius: 14px; background: #f6f0e3; }
.intro-cards article > span { position: absolute; left: 13px; top: 12px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: white; background: var(--red); font: 700 11px "Gogo Vietnamese"; }
.intro-cards b { font-size: 12px; }
.intro-cards p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.intro-cards code { color: var(--green-dark); font: 700 13px "Gogo Vietnamese", sans-serif; }
.intro-vowel-guide { display: grid; gap: 4px; margin-top: 8px; }
.intro-vowel-item { display: grid; grid-template-columns: minmax(88px, auto) 1fr; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 7px; background: white; }
.intro-vowel-item code { white-space: nowrap; }
.intro-vowel-item small { color: var(--muted); font-size: 8px; line-height: 1.3; }
.intro-cards .intro-consonant-guide { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 8px; line-height: 1.45; }
.intro-note { margin: 14px 0; color: var(--muted); text-align: center; font-size: 10px; }
.intro-start-button { width: min(280px, 100%); margin: 0 auto; }

@media (max-width: 800px) {
  .start-screen { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); padding-top: 44px; }
  .hero-copy { width: 100%; min-width: 0; max-width: 100%; padding-left: 0; overflow: hidden; text-align: center; }
  .eyebrow { justify-content: center; }
  .game-rule-picker, .game-rule-note { margin-inline: auto; }
  .hero-visual { width: min(500px, 90%); min-height: 250px; margin: 0 auto; order: 3; }
  .course-section { order: 2; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
  .section-heading { width: 100%; min-width: 0; }
  .course-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(270px, 78vw); overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x mandatory; }
  .course-card { min-height: 138px; grid-template-columns: auto 1fr auto; grid-template-areas: "icon label check" "icon name check" "icon desc check" "meta meta meta"; scroll-snap-align: start; }
  .selected-check { position: static; grid-area: check; align-self: center; }
  .game-topbar { padding: 0 18px; }
  .teacher-tip { left: 10px; top: 10px; max-width: min(330px, calc(100vw - 20px)); }
  .teacher-speech { min-width: 0; max-width: calc(100vw - 88px); padding: 7px 10px 8px; }
  .teacher-speech p { font-size: 10px; line-height: 1.35; }
  .order-track { width: 95vw; }
  .typing-panel { width: calc(100% - 28px); }
}

@media (max-width: 520px) {
  .site-header, main, .site-footer { width: min(100% - 24px, 1180px); }
  .site-header { min-height: 76px; }
  .button-label { display: none; }
  .icon-button { width: 40px; min-height: 40px; padding: 0; }
  .icon-button span:first-child { margin: 0; }
  .start-screen { gap: 24px; padding-top: 26px; }
  h1 { font-size: clamp(31px, 8.6vw, 34px); line-height: 1.08; letter-spacing: -0.06em; }
  .lead { margin: 16px 0 20px; font-size: 12px; line-height: 1.7; }
  .mode-switch { width: 100%; }
  .mode-option { min-width: 0; overflow: hidden; padding: 9px; }
  .mode-option > span:last-child { min-width: 0; }
  .mode-option small { white-space: nowrap; }
  .mode-icon { width: 30px; height: 30px; }
  .game-rule-picker { width: 100%; }
  .game-rule-option { min-height: 45px; padding-inline: 3px; }
  .game-rule-option b { font-size: 9px; }
  .game-rule-option small { font-size: 7px; }
  .game-rule-note { width: 100%; }
  .section-heading h2 { flex: none; font-size: 20px; }
  .hero-visual { min-height: 190px; box-shadow: 10px 13px 0 rgba(248,189,67,.6); }
  .bowl { height: 105px; }
  .bowl::before { top: -18px; height: 58px; }
  .bowl-toppings { left: -19px; right: -19px; top: -17px; height: 58px; transform: scale(.88); transform-origin: 50% 10%; }
  .bowl-label { inset: 45px 0 auto; font-size: 28px; }
  .chopsticks { width: 230px; transform: translate(25px, -89px) rotate(-10deg); }
  .lantern-one { left: 6%; top: 21%; width: 48px; height: 94px; transform: rotate(-2deg); }
  .lantern-one::before { height: 24px; }
  .lantern-one::after { top: 73px; left: calc(50% - 6px); width: 12px; height: 20px; }
  .lantern-one .lantern-body { top: 21px; width: 48px; height: 55px; }
  .lantern-one .lantern-body::before { inset: 5px 7px; background-size: auto; }
  .lantern-one .lantern-body::after { left: calc(50% - 7px); width: 14px; height: 4px; box-shadow: 0 48px #f5c66b; }
  .lantern-two { display: none; }
  .site-footer { gap: 10px; flex-direction: column; text-align: center; }
  .game-screen { grid-template-rows: 52px 42px minmax(145px, 1fr) auto; }
  .game-topbar { min-height: 52px; grid-template-columns: 1fr 1fr; }
  .game-course { display: none; }
  .back-button { min-height: 38px; padding: 0 12px; font-size: 11px; }
  .timer span { font-size: 27px; }
  .score-strip { width: calc(100% - 20px); height: 36px; margin: 3px auto; }
  .score-strip > div { padding: 2px 4px; gap: 4px; }
  .score-strip small { font-size: 7px; }
  .score-strip strong { font-size: 17px; }
  .street-stage { min-height: 0; }
  .order-track { bottom: 48px; height: min(150px, calc(100% - 50px)); }
  .order-card { width: min(260px, 76vw); height: min(142px, calc(100% - 4px)); min-height: 112px; padding-top: 8px; }
  .vietnamese { font-size: clamp(23px, 8vw, 31px); }
  .order-card.target-medium { width: min(274px, 82vw); }
  .target-medium .vietnamese { font-size: 24px; }
  .order-card.target-long { width: min(290px, 86vw); }
  .target-long .vietnamese { font-size: 20px; line-height: 1.12; }
  .order-card.target-xlong { width: min(340px, 92vw); }
  .target-xlong .vietnamese { font-size: 16px; line-height: 1.04; }
  .japanese { margin-top: 2px; }
  .teacher-tip img { width: 48px; height: 48px; }
  .teacher-speech { margin-left: 6px; }
  .teacher-speech strong { font-size: 8px; }
  .teacher-speech p { font-size: 9px; }
  .typing-panel { width: calc(100% - 16px); padding-top: 4px; }
  .input-shell input { font-size: 20px; }
  .mode-badge { display: none; }
  .telex-guide { gap: 6px; padding-inline: 8px; }
  .guide-label { display: none; }
  .telex-guide strong { font-size: 15px; }
  .guide-preview { min-width: 62px; font-size: 13px; }
  .virtual-keyboard { position: static; z-index: 20; gap: 2px; margin-inline: -2px; padding: 4px 3px max(5px, env(safe-area-inset-bottom)); border-radius: 12px 12px 0 0; }
  .keyboard-row { gap: 3px; }
  .keyboard-key { min-height: 29px; border-radius: 5px; box-shadow: 0 2px 0 #aaa595; }
  .keyboard-key b { font-size: 13px; }
  .keyboard-key small { font-size: 6px; }
  .keyboard-tabs { position: relative; z-index: 22; }
  .keyboard-key small { display: none; }
  .action-row .keyboard-key small { display: block; }
  .next-key-line { min-height: 25px; margin-block: 1px; }
  .telex-guide { min-height: 30px; margin-bottom: 3px; }
  .input-shell { min-height: 44px; }
  .input-shell input { height: 39px; }
  .input-feedback { min-height: 12px; margin-top: 2px; }
  .keyboard-tab { min-width: 70px; padding-inline: 5px; }
  .ime-button { min-width: 68px; }
  .modal { padding: 28px 20px; }
  .result-stats { grid-template-columns: repeat(4, 1fr); gap: 2px; }
  .result-stats div { padding-inline: 3px; }
  .result-stats div:nth-child(4n) { border-right: 0; }
  .result-stats strong { min-height: 24px; font-size: 14px; }
  .result-stats span { font-size: 7px; }
  .ranking-modal { padding-inline: 13px; }
  .ranking-title-row { padding-right: 35px; }
  .ranking-course-tab { min-height: 39px; padding-inline: 3px; font-size: 9px; }
  .ranking-row { grid-template-columns: 36px minmax(0, 1fr) 78px; gap: 5px; padding: 7px; }
  .ranking-row.ranking-header { display: none; }
  .ranking-details { grid-column: 2 / 4; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 3px 9px; }
  .ranking-details .ranking-stat { text-align: left; }
  .ranking-details .ranking-stat::before { content: attr(data-label) " "; color: var(--ink); font-size: 8px; font-weight: 700; }
  .ranking-modes { justify-content: flex-start; }
  .ranking-score { font-size: 14px; }
  .ranking-form { grid-template-columns: 1fr; padding: 12px; }
  .ranking-record-summary { grid-row: auto; }
  .ranking-consent, .ranking-form-note, .ranking-submit { grid-column: 1; }
  .practice-rule { min-height: 38px; gap: 7px; padding-inline: 4px; font-size: 7px; }
  .practice-rule button { min-height: 34px; padding-inline: 8px; font-size: 10px; }
  .practice-rule #practiceLetterRule { display: none; }
  .practice-rule #practiceToneRule { flex: 1; text-align: center; }
  .lesson-breakdown { min-height: 42px; gap: 3px; padding: 3px 4px; }
  .lesson-syllable { display: none; }
  .lesson-step { min-width: 0; flex: 1; padding-inline: 3px; }
  .lesson-step strong { font-size: 10px; }
  .lesson-specials { margin-bottom: 3px; }
  .lesson-specials span { padding: 3px 5px; font-size: 7px; }
  .intro-cards { grid-template-columns: 1fr; }
  .intro-cards article { min-height: 0; padding: 12px 12px 12px 48px; }
  .intro-cards article > span { left: 12px; top: 12px; }
  .intro-cards p { margin-top: 3px; }
  .intro-vowel-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
  .intro-vowel-item { display: block; padding: 4px; }
  .intro-vowel-item code, .intro-vowel-item small { display: block; }
  .intro-vowel-item small { margin-top: 1px; }
}

@media (min-width: 801px) and (max-height: 800px) {
  .site-header { min-height: 66px; }
  .start-screen { gap: 22px 4vw; padding: 24px 0 28px; }
  .hero-copy { padding-left: 1vw; }
  h1 { font-size: clamp(40px, 4.5vw, 58px); }
  .lead { margin: 14px 0 18px; line-height: 1.7; }
  .hero-visual { min-height: 280px; }
  .course-card { min-height: 132px; padding: 14px 16px; }
  .course-icon { width: 45px; height: 45px; }
  .course-meta { padding-top: 7px; }
  .course-meta b { font-size: 22px; }
  .course-section > .primary-button { min-height: 48px; margin-top: 14px; }
  .keyboard-hint { margin-top: 7px; }
  .site-footer { margin-top: 4px; padding-top: 12px; }
}

@media (max-height: 680px) {
  .teacher-tip { left: 7px; top: 5px; max-width: min(270px, calc(100vw - 14px)); }
  .teacher-tip img { width: 38px; height: 38px; border-width: 2px; }
  .teacher-speech { max-width: calc(100vw - 62px); margin-left: 5px; padding: 4px 8px 5px; border-radius: 9px; }
  .teacher-speech::before { left: -6px; width: 11px; height: 11px; }
  .teacher-speech strong { font-size: 7px; }
  .teacher-speech p { margin-top: 1px; font-size: 8px; line-height: 1.25; -webkit-line-clamp: 1; }
  .game-screen { grid-template-rows: 48px 38px minmax(128px, 1fr) auto; }
  .typing-heading label, .input-feedback { display: none; }
  .keyboard-key { min-height: 27px; }
  .order-card { min-height: 125px; }
  .practice-rule { min-height: 36px; margin-bottom: 2px; padding: 1px 4px; border-color: transparent; background: transparent; }
  .practice-rule > span { display: none; }
  .practice-rule button { min-height: 34px; }
  .lesson-breakdown { min-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}