@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root {
  --ink: #203333;
  --muted: #6d7e7d;
  --paper: #fbfaf6;
  --surface: #ffffff;
  --line: #e5ebe7;
  --teal: #0f766e;
  --teal-dark: #0b5d57;
  --teal-soft: #dff4ee;
  --yellow: #ffcb63;
  --peach: #ffe7d9;
  --lavender: #e9e5ff;
  --shadow: 0 18px 45px rgba(28, 61, 60, 0.09);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'Noto Sans Thai', system-ui, sans-serif; font-size: 16px; line-height: 1.65; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(15, 118, 110, .35); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, strong, .brand strong, .primary-button, .nav-link { font-family: 'Kanit', 'Noto Sans Thai', sans-serif; }

.app-shell { min-height: 100vh; padding-bottom: 120px; }
.site-header { max-width: 1240px; margin: 0 auto; min-height: 84px; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 218px; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; background: #d9f1df; border: 2px solid #fff; border-radius: 15px 15px 15px 5px; box-shadow: 0 7px 0 #b6ddd2; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand strong { display: block; font-size: 21px; line-height: 1.15; }
.brand small { color: var(--muted); font-size: 12px; }
.main-nav { display: flex; align-items: center; gap: 8px; }
.nav-link { border: 0; color: var(--muted); background: transparent; padding: 10px 16px; border-radius: 13px; font-weight: 500; }
.nav-link:hover, .nav-link.is-active { color: var(--teal-dark); background: var(--teal-soft); }
.icon-button { border: 0; background: transparent; color: var(--teal); font-size: 24px; padding: 8px; }
.mobile-menu { display: none; }
main { max-width: 1240px; margin: 0 auto; padding: 12px 28px 48px; }
.view { animation: fade-in .35s ease both; }
.view[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.eyebrow { display: inline-block; color: var(--teal); font-size: 12px; letter-spacing: .04em; font-weight: 700; text-transform: uppercase; }

.hero-card { min-height: 375px; padding: 56px 60px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; color: #fff; background: linear-gradient(120deg, #146f69 0%, #1e8a7e 64%, #47ab91 100%); border-radius: 31px; position: relative; isolation: isolate; }
.hero-card::after { content: ''; width: 430px; height: 430px; position: absolute; right: 13%; bottom: -260px; border-radius: 50%; background: rgba(255,255,255,.1); z-index: -1; }
.hero-copy { max-width: 600px; }
.hero-copy .eyebrow { color: #bdf1e2; }
.hero-copy h1 { max-width: 550px; margin: 13px 0 13px; font-size: clamp(38px, 5vw, 66px); line-height: 1.08; letter-spacing: -.03em; }
.hero-copy p { max-width: 520px; color: #e0f8f0; font-size: 18px; margin-bottom: 26px; }
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-art { width: 330px; height: 290px; margin-right: 40px; position: relative; display: grid; place-items: center; }
.art-book { width: 172px; height: 145px; display: grid; place-items: center; border-radius: 20px; background: #fff8dd; border: 8px solid #ffcf75; transform: rotate(-8deg); font-size: 88px; filter: drop-shadow(0 17px 0 rgba(12, 81, 75, .18)); }
.art-child { position: absolute; bottom: 14px; right: 15px; font-size: 86px; filter: drop-shadow(0 9px 0 rgba(12, 81, 75, .15)); }
.art-sun { position: absolute; top: 8px; left: 36px; font-size: 43px; }
.art-star { position: absolute; color: #ffe6a5; font-size: 34px; animation: float 3s ease-in-out infinite; }
.star-one { right: 30px; top: 35px; } .star-two { left: 12px; bottom: 52px; animation-delay: .8s; }
@keyframes float { 50% { transform: translateY(-12px) rotate(18deg); } }

.primary-button, .secondary-button, .text-button, .filter-reset { border: 0; border-radius: 13px; padding: 12px 18px; font-weight: 600; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.primary-button { color: #fff; background: var(--teal); box-shadow: 0 5px 0 var(--teal-dark); }
.hero-card .primary-button { color: var(--ink); background: var(--yellow); box-shadow: 0 5px 0 #c38d27; }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); }
.primary-button:active, .secondary-button:active { transform: translateY(2px); box-shadow: none; }
.secondary-button { color: var(--teal-dark); background: var(--teal-soft); }
.secondary-button.compact { padding: 9px 13px; font-size: 14px; }
.text-button { color: inherit; background: transparent; padding-inline: 4px; }
.text-button:hover { color: var(--yellow); }
.full-width { width: 100%; }
.feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 23px 0 58px; }
.feature-card { display: flex; align-items: center; gap: 15px; min-height: 100px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.feature-icon { width: 49px; height: 49px; flex: 0 0 49px; display: grid; place-items: center; border-radius: 17px; font-size: 24px; }
.feature-icon.mint { background: var(--teal-soft); } .feature-icon.peach { background: var(--peach); } .feature-icon.lavender { background: var(--lavender); }
.feature-card strong { display: block; font-size: 16px; } .feature-card p { color: var(--muted); margin: 3px 0 0; font-size: 13px; line-height: 1.45; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 20px; }
.section-heading h2, .page-intro h1 { margin: 4px 0 0; font-size: 34px; line-height: 1.15; }
.result-count { color: var(--muted); font-size: 14px; }
.filter-bar { display: flex; align-items: end; gap: 12px; padding: 14px; margin-bottom: 28px; background: #f0f6f2; border: 1px solid #e3eee8; border-radius: 18px; }
.search-field { min-width: 280px; flex: 1; display: flex; align-items: center; gap: 9px; padding: 0 12px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.search-field span { color: var(--teal); font-size: 28px; line-height: 1; }
.search-field input { width: 100%; border: 0; outline: 0; background: transparent; padding: 11px 0; font-size: 14px; }
.select-field { min-width: 145px; color: var(--muted); font-size: 11px; font-weight: 600; }
.select-field span { display: block; margin: 0 0 3px 4px; }
.select-field select, .speech-settings select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 30px 10px 11px; color: var(--ink); background: #fff; font-size: 13px; }
.filter-reset { color: var(--muted); background: transparent; padding-inline: 10px; font-size: 13px; white-space: nowrap; }
.filter-reset:hover { color: var(--teal); background: #e1eee9; }
.library-type-filters { display: flex; flex-wrap: wrap; gap: 9px; margin: -13px 0 20px; }
.library-type-filter { padding: 10px 15px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease; }
.library-type-filter:hover, .library-type-filter.is-active { color: var(--teal-dark); background: var(--teal-soft); border-color: #bfe5d9; transform: translateY(-1px); }
.library-type-filter[data-library-type="camera"].is-active { color: #236b72; background: #def5f0; border-color: #b9e5dc; }
.library-type-filter[data-library-type="touch"].is-active { color: #92552e; background: #fff0df; border-color: #f2d4b0; }
.lesson-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lesson-card { min-height: 278px; display: flex; flex-direction: column; padding: 23px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 5px 0 rgba(31, 75, 70, .03); transition: transform .2s ease, box-shadow .2s ease; }
.lesson-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.lesson-card-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.lesson-emoji { width: 62px; height: 62px; display: grid; place-items: center; background: var(--peach); border-radius: 20px; font-size: 33px; }
.lesson-card:nth-child(3n+2) .lesson-emoji { background: var(--teal-soft); } .lesson-card:nth-child(3n) .lesson-emoji { background: var(--lavender); }
.lesson-cover { width: 100%; height: 126px; position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), 0 8px 16px rgba(41, 83, 78, .08); }
.lesson-cover::before, .lesson-cover::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.lesson-cover::before { width: 180px; height: 180px; top: -110px; right: -52px; background: rgba(255,255,255,.25); filter: blur(2px); }
.lesson-cover::after { width: 230px; height: 70px; right: -25px; bottom: -38px; transform: rotate(-12deg); background: rgba(255,255,255,.17); filter: blur(8px); }
.lesson-cover.is-generated { display: grid; place-items: center; background: linear-gradient(135deg, #ffd7c4, #fff1c8 46%, #f8c8e4); animation: cover-breathe 6s ease-in-out infinite; }
.lesson-cover.cover-theme-aurora.is-generated { background: linear-gradient(135deg, #b9f4de, #d6ddff 47%, #f7c9e7); }
.lesson-cover.cover-theme-sunrise.is-generated { background: linear-gradient(135deg, #ffd58e, #fff0c5 47%, #ffb4bc); }
.lesson-cover.cover-theme-forest.is-generated { background: linear-gradient(135deg, #c7e7ae, #dcf6dc 48%, #a8dfd6); }
.lesson-cover.cover-theme-ocean.is-generated { background: linear-gradient(135deg, #aee5f2, #c9dcff 48%, #d9c8ff); }
.lesson-cover.cover-theme-violet.is-generated { background: linear-gradient(135deg, #d7c1ff, #f7d6ed 48%, #b9ddff); }
.lesson-cover.is-generated .lesson-emoji { width: 72px; height: 72px; position: relative; z-index: 3; background: rgba(255,255,255,.68); border: 3px solid rgba(255,255,255,.8); border-radius: 23px; box-shadow: 0 10px 22px rgba(65, 73, 125, .16), 0 0 0 9px rgba(255,255,255,.18); font-size: 38px; animation: cover-float 3.6s ease-in-out infinite; }
.cover-stars { position: absolute; z-index: 2; top: 14px; left: 17px; color: rgba(255,255,255,.78); font-size: 13px; letter-spacing: 4px; animation: cover-twinkle 2.5s ease-in-out infinite; }
.cover-orbit { position: absolute; z-index: 1; width: 142px; height: 48px; border: 1.5px solid rgba(255,255,255,.72); border-radius: 50%; transform: rotate(-20deg); animation: cover-orbit-spin 8s linear infinite; }
.cover-orbit-one { width: 155px; height: 61px; }
.cover-orbit-two { width: 92px; height: 136px; transform: rotate(34deg); border-color: rgba(255,255,255,.42); animation-duration: 10s; animation-direction: reverse; }
.cover-glow { width: 85px; height: 85px; position: absolute; z-index: 0; border-radius: 50%; background: rgba(255,255,255,.48); filter: blur(11px); animation: cover-glow 3s ease-in-out infinite; }
.cover-spark { position: absolute; z-index: 4; color: #fff; text-shadow: 0 0 9px rgba(255,255,255,.9); font-weight: 800; }
.cover-spark-one { right: 22px; top: 24px; font-size: 18px; animation: cover-twinkle 2s ease-in-out infinite .4s; }
.cover-spark-two { right: 45px; bottom: 20px; font-size: 22px; animation: cover-twinkle 2.8s ease-in-out infinite 1s; }
.lesson-cover.is-uploaded { background: #eef4f2; }
.lesson-cover-image { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s ease, filter .6s ease; }
.lesson-cover.is-uploaded:hover .lesson-cover-image { transform: scale(1.06); filter: saturate(1.08); }
.cover-image-sheen { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 20%, rgba(255,255,255,.35) 42%, transparent 58%); transform: translateX(-120%); animation: cover-sheen 5s ease-in-out infinite; }
.cover-upload-badge { position: absolute; z-index: 3; right: 9px; bottom: 8px; padding: 4px 8px; color: #fff; background: rgba(12, 59, 68, .65); border: 1px solid rgba(255,255,255,.38); border-radius: 999px; font-size: 9px; font-weight: 700; backdrop-filter: blur(5px); }
.preview-cover { height: 142px; position: relative; overflow: hidden; margin-bottom: 15px; border-radius: 18px; }
.preview-cover.is-uploaded img { width: 100%; height: 100%; display: block; object-fit: cover; }
.preview-cover.is-uploaded span { position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; color: #fff; background: rgba(12,59,68,.68); border-radius: 999px; font-size: 9px; font-weight: 700; }
.preview-card .lesson-cover { height: 142px; margin-bottom: 15px; }
@keyframes cover-breathe { 0%,100% { filter: saturate(.98); transform: translateY(0); } 50% { filter: saturate(1.08); transform: translateY(-2px); } }
@keyframes cover-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes cover-orbit-spin { from { transform: rotate(-20deg) rotate(0deg); } to { transform: rotate(-20deg) rotate(360deg); } }
@keyframes cover-glow { 0%,100% { opacity: .45; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.12); } }
@keyframes cover-twinkle { 0%,100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes cover-sheen { 0%,55% { transform: translateX(-120%); } 75%,100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .lesson-cover.is-generated, .lesson-cover.is-generated *, .cover-image-sheen { animation: none !important; } }
.done-mark { color: var(--teal); font-size: 13px; font-weight: 700; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; width: fit-content; padding: 4px 9px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 999px; font-size: 11px; font-weight: 700; }
.tag.muted-tag { color: #6b579d; background: var(--lavender); }
.library-card-tags { align-items: center; }
.library-type-tag { color: #91552f; background: #fff0df; }
.library-type-tag.ar-tag { color: #236b72; background: #def5f0; }
.game-library-card .lesson-emoji { background: #def5f0; }
.lesson-card h3 { margin: 20px 0 7px; font-size: 21px; line-height: 1.25; }
.lesson-card p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 15px; border-top: 1px solid #edf1ed; color: var(--muted); font-size: 12px; }
.card-footer button { border: 0; color: var(--teal); background: transparent; padding: 4px 0; font-weight: 700; }
.card-footer button:hover { color: var(--teal-dark); }
.empty-state { padding: 70px 20px; text-align: center; border: 1px dashed #bdd4cd; border-radius: 22px; background: #f5faf7; }
.empty-state > span { font-size: 44px; } .empty-state h3 { margin: 9px 0 3px; } .empty-state p { color: var(--muted); }

.ar-intro { max-width: 800px; }
#arView { position: relative; overflow: hidden; padding: 25px 20px 44px; border-radius: 32px; background: linear-gradient(135deg, #f8efff 0%, #eef8ff 49%, #fff8e8 100%); }
#arView::before, #arView::after { content: ''; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
#arView::before { width: 260px; height: 260px; top: 80px; right: -90px; background: rgba(255, 193, 222, .32); filter: blur(2px); }
#arView::after { width: 220px; height: 220px; bottom: 80px; left: -100px; background: rgba(163, 232, 209, .3); }
#arView > * { position: relative; z-index: 1; }
.ar-feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 22px; }
.ar-feature-strip article { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 15px 17px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.ar-feature-strip article > span { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 43px; border-radius: 14px; background: var(--teal-soft); font-size: 22px; }
.ar-feature-strip article:nth-child(2) > span { background: var(--peach); } .ar-feature-strip article:nth-child(3) > span { background: var(--lavender); }
.ar-feature-strip strong, .ar-feature-strip small { display: block; } .ar-feature-strip strong { font-size: 15px; } .ar-feature-strip small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.ar-workspace { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(270px, .6fr); align-items: start; gap: 20px; }
.ar-play-card, .ar-creator-panel { padding: 25px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(214, 205, 229, .72); border-radius: 28px; box-shadow: 0 20px 50px rgba(99, 74, 136, .12); }
.ar-card-heading, .side-card-heading { display: flex; justify-content: space-between; align-items: start; gap: 15px; margin-bottom: 16px; }
.ar-card-heading h2, .side-card-heading h2 { margin: 4px 0 0; font-size: 25px; line-height: 1.2; }
.ar-score { min-width: 84px; padding: 9px 12px; text-align: center; background: var(--teal-soft); border-radius: 14px; }
.ar-score span, .ar-score small { display: block; color: var(--muted); font-size: 10px; } .ar-score strong { display: block; color: var(--teal-dark); font: 700 27px 'Kanit'; line-height: 1.1; }
.ar-camera-stage { min-height: 480px; overflow: hidden; position: relative; background: linear-gradient(145deg, #f7edff, #eaf7ff); border: 1px solid #f0d9ec; border-radius: 24px; isolation: isolate; }
.ar-camera-stage::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(39, 28, 70, .08), transparent 35%, rgba(39, 28, 70, .2)); }
#arVideo { width: 100%; height: 100%; min-height: 480px; display: block; object-fit: cover; transform: scaleX(-1); background: radial-gradient(circle at 50% 35%, #d7c9ed, #9bc8cf 67%); }
.ar-movement-canvas { width: 100%; height: 100%; min-height: 480px; position: absolute; z-index: 0; inset: 0; display: block; object-fit: cover; background: radial-gradient(circle at 50% 35%, #2d1c57, #0f6d7b 67%); }
.ar-movement-canvas[hidden] { display: none; }
.ar-camera-stage.is-movement-segmented #arVideo { opacity: 0; }
.ar-camera-stage.is-movement-segmented .ar-movement-canvas { display: block; }
.ar-hand-skeleton { width: 100%; height: 100%; position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.ar-camera-shade { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; padding: 20px; color: var(--ink); text-align: center; background: linear-gradient(145deg, rgba(255, 252, 255, .97), rgba(255, 255, 255, .9)); }
.ar-camera-shade[hidden] { display: none; }
.ar-camera-shade:not([hidden]) ~ .ar-hud, .ar-camera-shade:not([hidden]) ~ .ar-stage-controls, .ar-camera-shade:not([hidden]) ~ .ar-question-bubble, .ar-camera-shade:not([hidden]) ~ .ar-avatar-badge, .ar-camera-shade:not([hidden]) ~ .ar-options, .ar-camera-shade:not([hidden]) ~ .ar-hand-cursor, .ar-camera-shade:not([hidden]) ~ .ar-hand-skeleton, .ar-camera-shade:not([hidden]) ~ .ar-gesture-guide { visibility: hidden; }
.ar-start-panel { width: min(100%, 650px); display: grid; justify-items: center; gap: 8px; padding: 20px 24px 16px; background: rgba(255, 253, 249, .96); border: 3px solid #fff; border-radius: 27px; box-shadow: 0 16px 28px rgba(104, 70, 139, .16); }
.ar-camera-shade .ar-start-mascot { width: 64px; height: 64px; display: grid; place-items: center; margin-top: -2px; border-radius: 23px; background: linear-gradient(135deg, #dff8eb, #fff0ce); box-shadow: 0 7px 0 rgba(111, 179, 156, .25); font-size: 38px; }
.ar-start-panel strong { color: #844bb4; font: 700 clamp(22px, 3vw, 31px) 'Kanit'; line-height: 1.15; }
.ar-start-panel p { max-width: 520px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ar-start-rules { width: 100%; display: grid; gap: 6px; margin-top: 3px; }
.ar-start-rules span { padding: 6px 12px; color: #46384e; background: #fff7fc; border: 1px solid #f4d6e9; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ar-stage-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.ar-stage-pill { padding: 5px 12px; color: #a34f84; background: #fff; border: 2px solid #f3d9ea; border-radius: 999px; font-size: 11px; font-weight: 700; }
.ar-stage-pill[data-active="true"] { color: #fff; background: linear-gradient(135deg, #f06ba8, #9b67e8); border-color: transparent; }
.ar-start-avatar { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 2px; padding: 5px 9px; background: #f6fbff; border: 1px solid #dcecf3; border-radius: 999px; }
.ar-start-avatar-hair { font-size: 17px; line-height: 1; }
.ar-start-avatar-face { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #ffe2bb; font-size: 16px; line-height: 1; }
.ar-start-avatar-outfit { padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.ar-start-avatar small { color: #71868c; font-size: 9px; }
.ar-stage-start { min-width: 170px; margin-top: 4px; padding: 11px 24px; color: #fff; background: linear-gradient(135deg, #f35fa5, #a762e5); border: 0; border-radius: 999px; box-shadow: 0 6px 0 #bb5a9b; font: 700 18px 'Kanit'; }
.ar-stage-start:hover { transform: translateY(-2px); filter: saturate(1.1); }
.ar-stage-start:active { transform: translateY(2px); box-shadow: none; }
.ar-start-panel small { color: #8c7e8c; font-size: 10px; }
.ar-hud { position: absolute; z-index: 4; top: 13px; right: 13px; left: 13px; display: flex; justify-content: space-between; gap: 7px; color: #fff; font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.ar-hud span { padding: 6px 9px; background: rgba(8, 45, 53, .6); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; backdrop-filter: blur(6px); }
.ar-stage-controls { position: absolute; z-index: 7; top: 51px; right: 13px; display: flex; gap: 7px; }
.ar-stage-button { padding: 7px 10px; color: #fff; background: rgba(8, 45, 53, .72); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; box-shadow: 0 5px 13px rgba(0,0,0,.18); font-size: 11px; font-weight: 700; backdrop-filter: blur(8px); }
.ar-stage-button:hover, .ar-stage-button:focus-visible { background: rgba(15, 118, 110, .92); }
.ar-stage-button[hidden] { display: none; }
.ar-question-bubble { position: absolute; z-index: 3; top: 99px; right: 10%; left: 10%; padding: 11px 17px; color: var(--ink); background: rgba(255, 255, 255, .94); border: 2px solid #fff; border-radius: 15px; box-shadow: 0 8px 22px rgba(0,0,0,.15); text-align: center; font: 600 18px 'Kanit'; }
.ar-avatar-badge { position: absolute; z-index: 4; top: 160px; left: 14px; display: flex; align-items: center; gap: 5px; padding: 6px 8px 6px 6px; color: var(--ink); background: rgba(255,255,255,.93); border: 2px solid #fff; border-radius: 999px; box-shadow: 0 6px 15px rgba(0,0,0,.18); }
.avatar-badge-hair { font-size: 18px; line-height: 1; } .avatar-badge-face { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #ffe2bb; font-size: 18px; line-height: 1; } .avatar-badge-outfit { padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.ar-gesture-guide { position: absolute; z-index: 5; top: 176px; right: 13px; width: min(290px, 43%); padding: 9px 10px 8px; color: #fff; background: rgba(7, 39, 49, .72); border: 1px solid rgba(255,255,255,.28); border-radius: 15px; box-shadow: 0 8px 18px rgba(0,0,0,.2); backdrop-filter: blur(9px); pointer-events: none; }
.gesture-guide-heading { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.gesture-guide-heading > span:first-child { font-size: 16px; }
.gesture-guide-heading strong { flex: 1; font-size: 11px; }
.gesture-guide-heading > span:last-child { padding: 3px 6px; color: #063d45; background: #ffcf63; border-radius: 999px; font-size: 9px; font-weight: 800; }
.gesture-guide-states { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 5px; margin-top: 7px; }
.gesture-guide-state { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 4px; padding: 4px 5px; border: 1px solid rgba(255,255,255,.24); border-radius: 10px; opacity: .7; }
.gesture-guide-state > span { grid-row: span 2; font-size: 20px; line-height: 1; }
.gesture-guide-state b, .gesture-guide-state small { display: block; line-height: 1.15; }
.gesture-guide-state b { font-size: 9px; }
.gesture-guide-state small { color: rgba(255,255,255,.75); font-size: 8px; }
.gesture-guide-state[data-active="true"] { color: #063d45; background: #b9f1d9; border-color: #62e0ad; opacity: 1; }
.gesture-guide-state[data-active="true"] small { color: #286b5c; }
.gesture-guide-arrow { color: #ffcf63; font-size: 13px; font-weight: 800; }
.ar-finger-checklist { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; }
.ar-finger-chip { padding: 3px 5px; color: rgba(255,255,255,.8); background: rgba(255,255,255,.1); border-radius: 999px; font-size: 8px; }
.ar-finger-chip b { color: #ffcf63; font-weight: 800; }
.ar-finger-chip[data-state="curled"] b { color: #62e0ad; }
.ar-finger-chip[data-state="extended"] b { color: #ffcf63; }
.ar-gesture-guide p { margin: 6px 0 0; color: rgba(255,255,255,.86); font-size: 9px; line-height: 1.35; }
.ar-options { position: absolute; z-index: 3; right: 6%; bottom: 18px; left: 6%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ar-movement-options { top: 168px; right: 18px; bottom: 18px; left: auto; width: min(310px, 31%); display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.movement-panel { width: 100%; padding: 16px 15px 14px; color: #fff; background: linear-gradient(145deg, rgba(10, 26, 67, .92), rgba(98, 33, 129, .86)); border: 2px solid rgba(255, 222, 124, .88); border-radius: 22px; box-shadow: 0 0 0 4px rgba(255, 186, 71, .13), 0 12px 28px rgba(0,0,0,.3); text-align: center; pointer-events: auto; backdrop-filter: blur(8px); }
.movement-event-line { display: flex; justify-content: space-between; gap: 10px; color: #ffe08a; font-size: 10px; font-weight: 800; }
.movement-event-line span:last-child { color: #bfeaff; }
.movement-panel h3 { margin: 2px 0 0; color: #fff6ba; font: 700 clamp(24px, 4vw, 34px) 'Kanit'; line-height: 1.05; text-shadow: 0 3px 0 rgba(63, 26, 96, .65), 0 0 16px rgba(255, 204, 78, .38); }
.movement-panel h3 small { color: #cbeaff; font: 600 11px 'Noto Sans Thai'; }
.movement-instruction { margin: 2px 0 7px; color: rgba(255,255,255,.92); font-size: 12px; font-weight: 700; }
.movement-speed-tip { display: inline-flex; margin: 0 auto 7px; padding: 4px 8px; color: #fff2a5; background: rgba(255, 219, 87, .12); border: 1px solid rgba(255, 225, 122, .35); border-radius: 999px; font-size: 9px; font-weight: 800; }
.movement-count { display: flex; align-items: baseline; justify-content: center; gap: 6px; line-height: 1; }
.movement-count strong { color: #ffdf6a; font: 700 clamp(44px, 8vw, 66px) 'Kanit'; text-shadow: 0 0 18px rgba(255, 218, 83, .75); }
.movement-count span { color: #fff; font: 700 20px 'Kanit'; }
.movement-count small { color: #bdefff; font-size: 10px; font-weight: 700; }
.movement-meter { height: 16px; overflow: hidden; margin: 5px 0 6px; border: 2px solid rgba(255,255,255,.52); border-radius: 99px; background: rgba(0,0,0,.35); box-shadow: inset 0 2px 5px rgba(0,0,0,.25); }
.movement-meter span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #55e1ff, #62e0ad 55%, #ffdc57); box-shadow: 0 0 14px rgba(255, 219, 87, .7); transition: width .18s ease; }
.movement-status { display: flex; justify-content: space-between; gap: 8px; color: #d7f7ff; font-size: 10px; }
.movement-status b { color: #ffe38a; }
.movement-school { margin-top: 3px; color: rgba(255,255,255,.78); font-size: 9px; }
.movement-tap-button { margin-top: 7px; padding: 5px 10px; color: #fff8cc; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 224, 123, .55); border-radius: 999px; font-size: 10px; font-weight: 700; }
.movement-tap-button:hover, .movement-tap-button:focus-visible { background: rgba(255, 224, 123, .2); }
.ar-movement-explosion { position: absolute; z-index: 9; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 44%, rgba(255, 250, 187, .94) 0 5%, rgba(255, 183, 59, .8) 12%, rgba(170, 63, 154, .83) 34%, rgba(20, 22, 72, .96) 74%); text-align: center; pointer-events: none; isolation: isolate; }
.ar-movement-explosion::after { content: ''; position: absolute; z-index: -1; width: 150%; height: 150%; border-radius: 50%; background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 2px, transparent 3px), radial-gradient(circle, rgba(255,218,82,.8) 0 2px, transparent 3px); background-position: 12% 30%, 76% 68%; background-size: 87px 91px, 117px 109px; animation: explosion-stars 2.2s linear infinite; }
.ar-movement-explosion[hidden] { display: none; }
.explosion-rays { width: min(57vw, 650px); height: min(57vw, 650px); position: absolute; z-index: -1; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,244,156,.72) 0 5deg, transparent 5deg 16deg); mask-image: radial-gradient(circle, transparent 0 27%, #000 29% 55%, transparent 57%); animation: explosion-rays 7s linear infinite; }
.explosion-particle { position: absolute; color: #ffe66d; font-size: clamp(26px, 4vw, 48px); text-shadow: 0 0 18px rgba(255, 228, 91, .95); }
.particle-one { top: 18%; left: 18%; } .particle-two { top: 24%; right: 18%; color: #8de9ff; } .particle-three { right: 25%; bottom: 18%; color: #ff91ce; } .particle-four { bottom: 16%; left: 22%; color: #fff; }
.ar-movement-explosion.is-burst .explosion-ring { animation: movement-burst .8s cubic-bezier(.17,.84,.44,1) 2; }
.ar-movement-explosion.is-burst .explosion-particle { animation: particle-pop 1.4s ease-out both; }
.ar-movement-explosion.is-burst .particle-two { animation-delay: .12s; } .ar-movement-explosion.is-burst .particle-three { animation-delay: .24s; } .ar-movement-explosion.is-burst .particle-four { animation-delay: .36s; }
.explosion-ring { width: 116px; height: 116px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle, #fff 0 10%, #fff5a6 12% 23%, #ffb63f 25% 45%, #ef5e66 47% 58%, transparent 61%); border-radius: 50%; font-size: 55px; filter: drop-shadow(0 0 17px rgba(255, 221, 89, .9)); }
.explosion-copy { display: grid; justify-items: center; gap: 3px; padding: 13px 24px 16px; background: rgba(11, 19, 66, .55); border: 2px solid rgba(255, 239, 141, .78); border-radius: 22px; box-shadow: 0 12px 30px rgba(0,0,0,.3); backdrop-filter: blur(8px); }
.explosion-copy strong { color: #fff5a8; font: 700 clamp(32px, 7vw, 64px) 'Kanit'; line-height: 1; text-shadow: 0 4px 0 #8a3f87, 0 0 23px rgba(255, 223, 88, .9); }
.explosion-copy span, .explosion-copy b { color: #d9f7ff; font-size: 14px; font-weight: 800; }
.explosion-copy .explosion-kicker { color: #ffe37a; font-size: clamp(15px, 2.2vw, 24px); }
@keyframes movement-burst { 0% { transform: scale(.35) rotate(-20deg); opacity: .1; } 65% { transform: scale(1.3) rotate(12deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes explosion-rays { to { transform: rotate(360deg); } }
@keyframes explosion-stars { to { transform: rotate(-360deg) scale(1.08); } }
@keyframes particle-pop { 0% { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0); } 20% { opacity: 1; } 100% { opacity: .1; transform: translate(var(--particle-x, 22px), var(--particle-y, -30px)) scale(1.45) rotate(120deg); } }
.ar-option { min-height: 58px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; color: var(--ink); background: rgba(255,255,255,.94); border: 2px solid transparent; border-radius: 14px; box-shadow: 0 7px 0 rgba(4, 45, 50, .19); text-align: left; font-weight: 700; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.ar-option-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ar-option-image { width: 56px; height: 42px; flex: 0 0 56px; object-fit: cover; border-radius: 8px; background: #e7f0f0; }
.ar-option-caption { min-width: 0; overflow-wrap: anywhere; }
.ar-option:hover, .ar-option:focus-visible { border-color: var(--yellow); transform: translateY(-2px); } .ar-option:disabled { cursor: default; opacity: .95; }
.ar-option-number { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; color: #fff; background: var(--teal); border-radius: 9px; font: 600 14px 'Kanit'; }
.ar-option.is-correct { color: #146f59; background: #dff4ee; border-color: #75c7ac; } .ar-option.is-wrong { color: #9a4d46; background: #fff0ed; border-color: #f2b1a7; }
.ar-matching-options { top: 185px; bottom: 16px; grid-template-columns: 1fr 1fr; align-items: stretch; overflow: hidden; }
.ar-matching-options.is-linking-board { touch-action: none; }
.matching-connectors { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.matching-connector-line { fill: none; stroke-width: 4; filter: drop-shadow(0 2px 2px rgba(0,0,0,.28)); }
.matching-connector-line.is-linked { stroke: #62e0ad; stroke-dasharray: 1 0; }
.matching-connector-line.is-dragging { stroke: #ffcf63; stroke-width: 5; stroke-dasharray: 9 8; animation: matching-dash .55s linear infinite; }
@keyframes matching-dash { to { stroke-dashoffset: -17; } }
.matching-column { position: relative; z-index: 1; min-width: 0; display: grid; grid-template-rows: auto repeat(4, minmax(0, 1fr)); gap: 6px; overflow: auto; padding: 4px; border-radius: 15px; background: rgba(7, 39, 49, .3); }
.matching-column h3 { margin: 0; padding: 4px 7px; color: #fff; font-size: 11px; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.matching-image-card, .matching-label-card { min-height: 47px; display: grid; align-items: center; gap: 6px; padding: 5px 7px; color: var(--ink); background: rgba(255,255,255,.95); border: 2px solid transparent; border-radius: 11px; box-shadow: 0 4px 0 rgba(4,45,50,.18); text-align: left; font-weight: 700; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.matching-image-card { grid-template-columns: 20px 44px 1fr 20px; }
.matching-image-card img { width: 44px; height: 36px; object-fit: cover; border-radius: 7px; background: #dbe9ed; }
.matching-image-card.image-missing img { opacity: 0; }
.matching-label-card { grid-template-columns: 25px 1fr 20px; font-size: 13px; }
.matching-number, .matching-link-icon { width: 20px; height: 20px; display: grid; place-items: center; color: #fff; background: var(--teal); border-radius: 7px; font-size: 10px; }
.matching-link-icon { background: #9b67e8; font-size: 15px; }
.matching-read { font-size: 13px; text-align: center; }
.matching-image-card:hover, .matching-label-card:hover, .matching-image-card.is-selected { border-color: var(--yellow); transform: translateY(-1px); }
.matching-image-card.is-selected { background: #fff8dc; }
.matching-image-card.is-dragging { border-color: #ffcf63; background: #fff8dc; transform: scale(1.03); cursor: grabbing; }
.matching-label-card.is-drop-target { border-color: #ffcf63; background: #fff8dc; transform: translateY(-2px) scale(1.02); }
.matching-image-card.is-matched, .matching-label-card.is-matched { color: #146f59; background: #dff4ee; border-color: #75c7ac; }
.matching-image-card.is-wrong, .matching-label-card.is-wrong { color: #9a4d46; background: #fff0ed; border-color: #f2b1a7; }
.matching-image-card:disabled, .matching-label-card:disabled { cursor: default; opacity: .95; }
.matching-credit { grid-column: 1 / -1; color: rgba(255,255,255,.85); font-size: 9px; text-align: center; }
.ar-ordering-options { top: 185px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ordering-tray { min-height: 0; flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 7px; overflow: auto; padding: 5px; border-radius: 15px; background: rgba(7, 39, 49, .3); }
.ordering-tray h3 { grid-column: 1 / -1; margin: 0; padding: 3px 6px; color: #fff; font-size: 11px; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.ordering-card { min-height: 56px; display: grid; grid-template-columns: 24px 42px 1fr; align-items: center; gap: 6px; padding: 6px; color: var(--ink); background: rgba(255,255,255,.95); border: 2px solid transparent; border-radius: 11px; box-shadow: 0 4px 0 rgba(4,45,50,.18); text-align: left; font-weight: 700; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.ordering-card:hover, .ordering-card:focus-visible { border-color: var(--yellow); transform: translateY(-1px); }
.ordering-card.is-picked { color: #146f59; background: #dff4ee; border-color: #75c7ac; }
.ordering-card-number { width: 22px; height: 22px; display: grid; place-items: center; color: #fff; background: #9b67e8; border-radius: 7px; font-size: 11px; }
.ordering-card-visual { width: 42px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: #e8f1f1; font-size: 23px; overflow: hidden; }
.ordering-card-visual img { width: 100%; height: 100%; object-fit: cover; }
.ordering-card-label { min-width: 0; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.ordering-sequence { padding: 7px 9px; color: var(--ink); background: rgba(255,255,255,.94); border-radius: 11px; box-shadow: 0 4px 0 rgba(4,45,50,.18); }
.ordering-sequence strong { display: block; margin-bottom: 4px; color: var(--teal-dark); font-size: 11px; }
.ordering-sequence-list { display: flex; gap: 5px; min-height: 25px; align-items: center; overflow: auto; }
.ordering-empty { color: var(--muted); font-size: 10px; }
.ordering-chip { flex: 0 0 auto; padding: 5px 7px; color: #4c347c; background: #f0e7ff; border: 1px solid #d4bdf5; border-radius: 999px; font-size: 10px; white-space: nowrap; }
.ordering-actions { display: flex; justify-content: flex-end; gap: 7px; }
.ordering-actions button { padding: 7px 11px; font-size: 11px; }
.ar-placement-options { top: 173px; right: 3%; bottom: 12px; left: 3%; display: block; overflow: hidden; touch-action: none; }
.placement-instruction { position: absolute; z-index: 5; top: 5px; right: 7%; left: 7%; padding: 6px 10px; color: #fff; background: rgba(7, 39, 49, .66); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; text-align: center; font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.placement-sun { position: absolute; z-index: 1; bottom: 105px; left: -34px; display: grid; justify-items: center; color: #fff7c7; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.placement-sun span { width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a6 0 12%, #ffc94c 28%, #ee7d2b 66%, #bd4c2a); box-shadow: 0 0 0 12px rgba(255, 202, 77, .16), 0 0 35px rgba(255, 202, 77, .45); font-size: 47px; }
.placement-sun small { margin-top: -1px; font-size: 10px; font-weight: 700; }
.placement-planet-layer { position: absolute; z-index: 2; inset: 0 0 102px; }
.placement-planet { width: 84px; min-height: 74px; position: absolute; display: grid; justify-items: center; gap: 2px; padding: 3px; color: #fff; background: rgba(8, 45, 53, .68); border: 2px solid rgba(255,255,255,.52); border-radius: 16px; box-shadow: 0 5px 12px rgba(0,0,0,.26); text-align: center; font-size: 10px; font-weight: 700; transform: translate(-50%, -50%); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; cursor: grab; }
.placement-planet img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; background: #172e3b; }
.placement-planet.image-missing img { display: none; }
.placement-planet:hover, .placement-planet:focus-visible, .placement-planet.is-dragging, .placement-planet.is-selected { z-index: 10; border-color: #ffcf63; box-shadow: 0 0 0 4px rgba(255,207,99,.28), 0 9px 18px rgba(0,0,0,.35); }
.placement-planet.is-dragging { cursor: grabbing; }
.placement-planet span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placement-targets { position: absolute; z-index: 4; right: 0; bottom: 8px; left: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.placement-target { min-width: 0; min-height: 69px; display: grid; grid-template-rows: 17px 1fr auto; justify-items: center; align-items: center; padding: 4px 3px; color: #fff; background: rgba(7, 39, 49, .72); border: 2px dashed rgba(255,255,255,.54); border-radius: 14px; box-shadow: 0 5px 10px rgba(0,0,0,.2); transition: transform .14s ease, border-color .14s ease, background .14s ease; }
.placement-target strong { width: 18px; height: 18px; display: grid; place-items: center; color: #063d45; background: #ffcf63; border-radius: 50%; font-size: 10px; }
.placement-target-visual { width: 32px; height: 30px; display: grid; place-items: center; color: rgba(255,255,255,.72); border-radius: 50%; font-size: 21px; }
.placement-target-visual img { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; }
.placement-target small { max-width: 100%; overflow: hidden; color: rgba(255,255,255,.9); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.placement-target.is-drop-target { background: rgba(255, 207, 99, .3); border-color: #ffcf63; transform: translateY(-4px) scale(1.04); }
.placement-target.is-placed { background: rgba(98, 224, 173, .25); border-style: solid; border-color: #62e0ad; }
.placement-target.is-placed strong { color: #fff; background: #24a77d; }
.placement-target.is-wrong { border-color: #f2a197; background: rgba(212, 93, 87, .35); animation: placement-shake .22s ease-in-out 2; }
@keyframes placement-shake { 50% { transform: translateX(4px); } }
.placement-credit { position: absolute; z-index: 5; right: 4px; bottom: 0; left: 4px; color: rgba(255,255,255,.78); font-size: 8px; text-align: center; }
.ar-hand-cursor { width: 38px; height: 38px; position: absolute; z-index: 6; transform: translate(-50%, -50%); pointer-events: none; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 203, 99, .78), 0 5px 15px rgba(0,0,0,.35); transition: left .08s linear, top .08s linear; }
.ar-hand-cursor span { width: 11px; height: 11px; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); border-radius: 50%; background: #ffcb63; }
.ar-hand-cursor[data-gesture="open"] { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 203, 99, .78), 0 5px 15px rgba(0,0,0,.35); }
.ar-hand-cursor[data-gesture="pinch"] { border-color: #62e0ad; box-shadow: 0 0 0 5px rgba(98,224,173,.48), 0 5px 15px rgba(0,0,0,.35); }
.ar-hand-cursor[data-gesture="transition"], .ar-hand-cursor[data-gesture="fist"] { border-color: #ffcf63; box-shadow: 0 0 0 5px rgba(255,207,99,.4), 0 5px 15px rgba(0,0,0,.35); }
.ar-play-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .ar-play-actions .text-button { margin-left: auto; color: var(--teal); }
.ar-play-actions button:disabled { cursor: not-allowed; opacity: .45; transform: none; box-shadow: none; }
.ar-feedback { min-height: 26px; margin: 13px 0 0; color: var(--teal-dark); font-weight: 700; }
.ar-fallback-note { margin-top: 12px; padding: 11px 13px; color: #735c2a; background: #fff8e8; border: 1px solid #f6e4af; border-radius: 12px; font-size: 12px; line-height: 1.5; }
.ar-side-column { display: grid; gap: 15px; } .ar-how-card { background: linear-gradient(145deg, #eefaf4, #fff); }
.side-card-heading { align-items: end; margin-bottom: 12px; } .side-card-heading h2 { font-size: 20px; } .ar-count { color: var(--teal); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ar-game-type-badge { display: inline-flex; width: fit-content; margin-top: 8px; padding: 4px 10px; color: #754b94; background: #f5e8ff; border: 1px solid #ead4f7; border-radius: 999px; font-size: 11px; font-weight: 700; }
.ar-game-type-badge[data-type="camera"] { color: #246b72; background: #def5f0; border-color: #c1e8df; }
.ar-game-type-badge[data-type="touch"] { color: #9a5b30; background: #fff0df; border-color: #f4d9b4; }
.ar-game-type-badge[data-type="competition"] { color: #9b4c77; background: #ffe6f1; border-color: #f5c9df; }
.ar-game-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ar-game-filter { padding: 6px 8px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 700; }
.ar-game-filter:hover, .ar-game-filter.is-active { color: var(--teal-dark); background: var(--teal-soft); border-color: #bfe5d9; }
.ar-game-filter[data-game-type="competition"].is-active { color: #8d406b; background: #ffe6f1; border-color: #f1c3da; }
.compact-label { margin-bottom: 9px; } .compact-label select { margin-top: 5px; } .muted-copy { color: var(--muted); font-size: 12px; line-height: 1.55; }
.avatar-card { background: linear-gradient(145deg, #fff8e8, #fff); } .avatar-save-label { color: var(--teal); font-size: 10px; font-weight: 700; white-space: nowrap; }
.avatar-preview { min-height: 153px; position: relative; overflow: hidden; margin: 0 0 15px; border: 1px solid #f2e3c4; border-radius: 18px; background: radial-gradient(circle at 50% 25%, #fff 0 27%, transparent 28%), linear-gradient(135deg, #fff4d8, #eaf7f3); }
.avatar-preview::after { content: ''; width: 150px; height: 33px; position: absolute; right: 50%; bottom: -14px; transform: translateX(50%); border-radius: 50%; background: rgba(41, 100, 89, .12); }
.avatar-preview-hair { position: absolute; z-index: 2; top: 17px; left: 50%; transform: translateX(-50%); font-size: 39px; line-height: 1; } .avatar-preview-face { width: 58px; height: 58px; position: absolute; z-index: 1; top: 39px; left: 50%; display: grid; place-items: center; transform: translateX(-50%); border: 3px solid #fff; border-radius: 50%; background: #ffe2bb; box-shadow: 0 4px 10px rgba(69, 48, 20, .13); font-size: 35px; }
.avatar-preview-outfit { width: 118px; height: 44px; position: absolute; z-index: 2; bottom: 9px; left: 50%; display: grid; place-items: center; transform: translateX(-50%); border-radius: 52% 52% 18px 18px; font-size: 11px; font-weight: 700; }
.avatar-preview-star { position: absolute; top: 18px; right: 25%; color: #e9ad38; font-size: 19px; animation: float 2.5s ease-in-out infinite; }
.outfit-lab { color: #214f7a; background: #bfe1ff; } .outfit-school { color: #374151; background: #e8edf4; border: 1px solid #c8d1dd; } .outfit-sport { color: #8f3f3b; background: #ffc5bd; } .outfit-art { color: #5b3a91; background: #dccbff; } .outfit-nature { color: #275f3b; background: #c7e8af; }
.avatar-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; } .avatar-outfit-field { grid-column: 1 / -1; }
.ar-creator-panel { margin-top: 20px; } .ar-creator-panel .section-heading { margin-bottom: 8px; } .ar-creator-panel .section-heading h2 { font-size: 27px; }
.ar-create-badge { padding: 6px 10px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ar-creator-lead { color: var(--muted); font-size: 13px; } .ar-creator-form { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0 15px; margin-top: 17px; } .ar-creator-form > label:nth-child(1) { grid-column: 1; grid-row: 1; } .ar-creator-form > label:nth-child(2) { grid-column: 2; grid-row: 1; } .ar-creator-form > label:nth-child(3) { grid-column: 2; grid-row: 2; } .ar-creator-form > label:nth-child(4) { grid-column: 1; grid-row: 2 / span 2; } .ar-creator-form > .ar-choice-grid { grid-column: 2; grid-row: 3; }
.ar-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; } .ar-choice-editor { padding: 10px; background: #f8fbfa; border: 1px solid #dce7e2; border-radius: 13px; } .choice-editor-title { display: block; margin-bottom: 7px; color: var(--teal-dark); font-size: 12px; font-weight: 700; } .ar-choice-editor .form-label { margin-bottom: 8px; } .ar-choice-editor .form-label:last-child { margin-bottom: 0; } .choice-image-field[hidden] { display: none; } .choice-image-field input[type="file"] { padding: 8px 6px; font-size: 10px; } .ar-creator-form .form-label input, .ar-creator-form .form-label textarea, .ar-creator-form .form-label select { background: #fbfdfb; }
.ar-creator-actions { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-top: 6px; } .answer-select-label { min-width: 240px; margin-bottom: 0; }
.ar-creator-form > label:nth-child(4) { grid-column: 1 / -1; grid-row: auto; }
.ar-format-section[hidden] { display: none; }
.ar-quiz-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.4fr; gap: 0 15px; }
.ar-quiz-fields > .form-label:first-child { grid-column: 1; }
.ar-quiz-fields > .ar-choice-grid { grid-column: 2; }
.ar-quiz-fields > .ar-creator-actions { grid-column: 1 / -1; }
.ar-matching-fields { grid-column: 1 / -1; padding: 16px; background: #f8f5ff; border: 1px solid #e8dcfb; border-radius: 15px; }
.ar-pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ar-pair-row { display: grid; grid-template-columns: 42px 1fr 1fr; align-items: end; gap: 7px; padding: 9px; background: #fff; border: 1px solid #e8dcfb; border-radius: 12px; }
.ar-pair-row > span { align-self: start; color: #8d65bd; font-size: 11px; font-weight: 700; }
.ar-pair-row .form-label { margin-bottom: 0; }
.ar-pair-row input[type="file"] { padding: 8px 6px; font-size: 10px; }
.ar-ordering-fields { grid-column: 1 / -1; padding: 16px; background: #fff9e8; border: 1px solid #f0dfb0; border-radius: 15px; }
.ar-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.ar-order-grid .form-label { margin-bottom: 8px; }
.matching-helper { color: var(--muted); font-size: 12px; }

.reader-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 32px; }
.back-button { border: 0; color: var(--teal); background: transparent; font-weight: 700; padding: 8px 0; }
.reader-tools { display: flex; gap: 8px; }
.reader-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.reader-heading h1 { margin: 7px 0 7px; font-size: clamp(32px, 5vw, 48px); line-height: 1.1; }
.reader-heading p { max-width: 670px; color: var(--muted); margin-bottom: 0; }
.completion-badge { padding: 8px 13px; color: #986d14; background: #fff2cc; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.completion-badge.is-done { color: #19755e; background: var(--teal-soft); }
.reader-progress { margin-bottom: 27px; }
.progress-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-bottom: 7px; }
.progress-track { height: 9px; overflow: hidden; border-radius: 99px; background: #e4ece8; } .progress-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #0f766e, #72c6a6); transition: width .25s ease; }
.reader-layout { display: grid; grid-template-columns: minmax(0, 1fr) 275px; align-items: start; gap: 22px; }
.lesson-page { min-height: 425px; padding: 40px clamp(24px, 5vw, 65px); background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); }
.page-kicker { color: var(--teal); font-size: 13px; font-weight: 700; } .lesson-page h2 { max-width: 680px; margin: 7px 0 20px; font-size: clamp(27px, 4vw, 39px); line-height: 1.2; }
.lesson-copy { max-width: 720px; color: #38514f; font-size: 21px; line-height: 2; white-space: pre-line; }
.lesson-copy::first-letter { color: var(--teal); font-weight: 700; }
.keyword-box { display: flex; flex-wrap: wrap; gap: 8px; margin: 27px 0 3px; padding-top: 20px; border-top: 1px dashed #cadbd5; }
.keyword-box strong { width: 100%; color: var(--muted); font-size: 12px; }
.keyword { padding: 8px 13px; color: var(--teal-dark); background: #eef8f2; border-radius: 12px; font-size: 16px; font-weight: 700; }
.activity-box { margin-top: 32px; padding: 22px; border-radius: 18px; background: #fff8e8; border: 1px solid #f6e4af; }
.activity-box h3 { margin-bottom: 5px; } .activity-box p { margin-bottom: 15px; }
.answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.answer-button { padding: 13px 14px; border: 1px solid #eddb9d; border-radius: 11px; color: var(--ink); background: #fff; text-align: left; }
.answer-button:hover { border-color: var(--teal); background: #f1fbf6; } .answer-button.is-correct { color: #146f59; border-color: #75c7ac; background: #dff4ee; } .answer-button.is-wrong { color: #9a4d46; border-color: #f2b1a7; background: #fff0ed; }
.feedback { margin: 12px 0 0; color: var(--teal-dark); font-weight: 700; }
.reader-sidebar { display: grid; gap: 15px; } .side-card { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 20px; } .quick-listen { background: linear-gradient(145deg, #eefaf4, #fff); }
.side-icon { display: block; margin-bottom: 4px; font-size: 29px; } .side-card h2 { margin-bottom: 5px; font-size: 19px; } .side-card p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.toggle-row { display: flex; align-items: center; gap: 8px; margin-top: 17px; color: var(--muted); font-size: 12px; cursor: pointer; } .toggle-row input { position: absolute; opacity: 0; } .toggle-ui { width: 31px; height: 18px; padding: 3px; border-radius: 99px; background: #ccd9d4; transition: background .2s; } .toggle-ui::after { content: ''; display: block; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .2s; } .toggle-row input:checked + .toggle-ui { background: var(--teal); } .toggle-row input:checked + .toggle-ui::after { transform: translateX(13px); }
.how-list { padding-left: 23px; margin: 10px 0 0; color: var(--muted); font-size: 13px; } .how-list li + li { margin-top: 7px; }
.reader-navigation { display: flex; justify-content: space-between; gap: 15px; margin-top: 22px; }

.page-intro { max-width: 730px; margin: 20px 0 32px; } .page-intro h1 { font-size: clamp(36px, 5vw, 54px); margin-bottom: 11px; } .page-intro p { color: var(--muted); font-size: 17px; }
.creator-mode-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-bottom: 22px; }
.creator-mode-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 18px 20px; color: var(--ink); text-align: left; background: #fff; border: 2px solid var(--line); border-radius: 19px; box-shadow: 0 5px 0 rgba(31, 75, 70, .03); transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.creator-mode-card:hover, .creator-mode-card.is-active { border-color: #8acfc1; background: #f1fbf6; box-shadow: 0 7px 0 rgba(31, 118, 108, .08); transform: translateY(-2px); }
.creator-mode-card[data-creator-mode="ar"].is-active { border-color: #b6a2e4; background: #faf5ff; box-shadow: 0 7px 0 rgba(119, 91, 172, .1); }
.creator-mode-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; background: var(--teal-soft); font-size: 23px; }
.creator-mode-card[data-creator-mode="ar"] .creator-mode-icon { background: var(--lavender); }
.creator-mode-card strong, .creator-mode-card small { display: block; }
.creator-mode-card strong { font-size: 16px; }
.creator-mode-card small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.creator-mode-card b { color: var(--teal); font-size: 20px; }
.creator-panel[hidden] { display: none; }
.creator-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr); align-items: start; gap: 22px; }
.creator-form { padding: clamp(24px, 4vw, 40px); background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.cover-upload-field { grid-column: 1 / -1; padding: 12px 13px; color: var(--teal-dark); background: linear-gradient(135deg, #f2fbf7, #fbf6ff); border: 1px dashed #a9d8ca; border-radius: 14px; }
.cover-upload-field input[type="file"] { padding: 9px 7px; background: #fff; border: 1px solid #d5e8e0; }
.cover-upload-field small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.45; }
.ar-cover-field { margin-top: 2px; }
.ar-cover-preview { width: 100%; max-width: 270px; height: 82px; position: relative; overflow: hidden; margin-top: 8px; border-radius: 12px; }
.ar-cover-preview[hidden] { display: none; }
.ar-cover-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ar-cover-preview span { position: absolute; right: 6px; bottom: 5px; padding: 3px 7px; color: #fff; background: rgba(12,59,68,.7); border-radius: 999px; font-size: 9px; }
.form-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .form-section-title.spaced { margin-top: 28px; } .form-section-title span { color: var(--teal); font: 700 14px 'Kanit'; } .form-section-title h2 { margin: 0; font-size: 21px; }
.form-label { display: block; margin-bottom: 15px; color: var(--muted); font-size: 12px; font-weight: 700; } .form-label input, .form-label textarea, .form-label select { display: block; width: 100%; margin-top: 5px; padding: 12px 13px; color: var(--ink); background: #fbfdfb; border: 1px solid #dce7e2; border-radius: 11px; resize: vertical; font-weight: 400; } .form-label textarea { min-height: 78px; line-height: 1.6; }
.form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .helper-text { margin: -9px 0 12px; color: var(--muted); font-size: 12px; font-weight: 400; } .form-actions { display: flex; align-items: center; gap: 16px; margin-top: 25px; }
.creator-preview { position: sticky; top: 20px; } .preview-label { margin: 0 0 11px; color: var(--muted); font-size: 12px; font-weight: 700; } .live-dot { width: 8px; height: 8px; display: inline-block; margin-right: 5px; border-radius: 50%; background: #efa45a; }
.preview-card { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); } .preview-emoji { width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 19px; background: var(--peach); font-size: 32px; } .preview-card h2 { margin: 12px 0 7px; font-size: 23px; line-height: 1.25; } .preview-card p { color: var(--muted); min-height: 55px; font-size: 14px; } .preview-footer { display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); color: var(--teal); font-size: 12px; font-weight: 700; }
.privacy-note { display: flex; gap: 10px; margin-top: 15px; padding: 15px; color: #5f7470; background: #eef6f2; border-radius: 16px; font-size: 12px; } .privacy-note span { font-size: 20px; } .privacy-note p { margin: 0; line-height: 1.5; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 28px; } .stat-card { min-height: 150px; padding: 24px; border-radius: 20px; } .stat-card span, .stat-card small { display: block; color: var(--muted); font-size: 13px; } .stat-card strong { display: inline-block; margin: 4px 8px 0 0; font-size: 47px; line-height: 1; } .mint-stat { background: var(--teal-soft); } .peach-stat { background: var(--peach); } .lavender-stat { background: var(--lavender); }
.progress-panel { padding: 25px; background: #fff; border: 1px solid var(--line); border-radius: 23px; } .progress-list { display: grid; gap: 11px; } .progress-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px; border: 1px solid #e8efeb; border-radius: 15px; } .progress-item-main { display: flex; align-items: center; gap: 12px; } .progress-item-emoji { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--teal-soft); font-size: 21px; } .progress-item strong { display: block; } .progress-item small { color: var(--muted); } .progress-item .secondary-button { padding: 8px 11px; font-size: 12px; }
.site-footer { max-width: 1240px; margin: 0 auto; padding: 25px 28px; display: flex; justify-content: space-between; gap: 15px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; } .footer-link { border: 0; color: var(--teal); background: transparent; font-weight: 700; }

.speech-dock { position: fixed; z-index: 20; right: 20px; bottom: 20px; left: 20px; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; padding: 11px 15px; background: rgba(255,255,255,.96); border: 1px solid #cfe2dc; border-radius: 17px; box-shadow: 0 15px 40px rgba(28, 65, 61, .16); backdrop-filter: blur(14px); }
.speech-status { display: flex; align-items: center; gap: 10px; min-width: 180px; } .sound-pulse { width: 35px; height: 35px; display: grid; place-items: center; color: #fff; background: var(--teal); border-radius: 12px; font-size: 15px; } .speech-status strong, .speech-status small { display: block; line-height: 1.3; } .speech-status strong { font-size: 13px; } .speech-status small { color: var(--muted); font-size: 10px; }
.speech-controls { display: flex; gap: 5px; } .dock-button { min-width: 32px; height: 32px; border: 0; border-radius: 9px; color: var(--teal-dark); background: var(--teal-soft); font-weight: 700; } .dock-button:hover { color: #fff; background: var(--teal); } .selection-button { padding: 0 10px; } .selection-button span { font-size: 11px; }
.speech-settings { display: flex; align-items: center; gap: 8px; } .speech-settings label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; } .speech-settings select { width: auto; padding: 6px 21px 6px 7px; font-size: 11px; } .accessibility-button { border: 1px solid #cfe2dc; border-radius: 9px; padding: 7px 8px; color: var(--teal-dark); background: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; } .accessibility-button[aria-pressed="true"] { color: #fff; background: var(--teal); }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 112px; max-width: min(90vw, 430px); padding: 11px 16px; color: #fff; background: #234a47; border-radius: 11px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s; font-size: 13px; } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.large-text body, body.large-text { font-size: 18px; } body.large-text .lesson-copy { font-size: 26px; } body.large-text .lesson-page h2 { font-size: clamp(32px, 5vw, 46px); } body.large-text .lesson-card h3 { font-size: 24px; }
body.focus-mode .site-header, body.focus-mode .site-footer, body.focus-mode .speech-dock { opacity: .32; transition: opacity .2s; } body.focus-mode .site-header:hover, body.focus-mode .site-footer:hover, body.focus-mode .speech-dock:hover { opacity: 1; } body.focus-mode .reader-sidebar { display: none; } body.focus-mode .reader-layout { display: block; max-width: 900px; margin: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ห้องเล่นกล้องแบบเต็มจอ: ใช้ได้ทั้ง Fullscreen API และโหมดสำรองบน iOS */
body.ar-immersive { overflow: hidden; }
body.ar-immersive .site-header, body.ar-immersive .site-footer, body.ar-immersive .speech-dock { display: none; }
body.ar-immersive main { max-width: none; padding: 0; }
body.ar-immersive main > #arView { display: block; position: fixed; z-index: 100; inset: 0; padding: 0; overflow: hidden; background: #071f2c; }
body.ar-immersive #arView > .page-intro, body.ar-immersive #arView > .ar-feature-strip, body.ar-immersive #arView .ar-side-column, body.ar-immersive #arView .ar-creator-panel, body.ar-immersive #arView .ar-card-heading, body.ar-immersive #arView .ar-play-actions, body.ar-immersive #arView .ar-feedback, body.ar-immersive #arView .ar-fallback-note { display: none; }
body.ar-immersive #arView .ar-workspace { display: block; height: 100%; }
body.ar-immersive #arView .ar-play-card { height: 100%; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.ar-immersive #arView .ar-camera-stage, .ar-camera-stage:fullscreen { width: 100vw; height: 100vh; min-height: 100vh; position: fixed; z-index: 101; inset: 0; border-radius: 0; }
body.ar-immersive #arView #arVideo, .ar-camera-stage:fullscreen #arVideo { height: 100vh; min-height: 100vh; }
body.ar-immersive #arView .ar-hud { top: 20px; right: 20px; left: 20px; }
body.ar-immersive #arView .ar-stage-controls { top: 62px; right: 20px; }
body.ar-immersive #arView .ar-question-bubble { top: 118px; right: 7vw; left: 7vw; padding: 16px 24px; font-size: clamp(22px, 2.6vw, 36px); }
body.ar-immersive #arView .ar-avatar-badge { top: 204px; left: 3vw; transform: scale(1.15); transform-origin: left top; }
body.ar-immersive #arView .ar-gesture-guide { top: 204px; right: 20px; }
body.ar-immersive #arView .ar-options { right: 7vw; bottom: 8vh; left: 7vw; gap: 16px; }
body.ar-immersive #arView .ar-option { min-height: 76px; padding: 14px 18px; border-radius: 20px; font-size: clamp(17px, 2vw, 24px); }
body.ar-immersive #arView .ar-option-number { width: 36px; height: 36px; flex-basis: 36px; font-size: 17px; }
body.ar-immersive #arView .ar-movement-options { top: 150px; right: 18px; bottom: 18px; left: auto; width: min(320px, 30vw); }
body.ar-immersive #arView .movement-panel { max-height: calc(100vh - 185px); overflow: auto; }

@media (max-width: 700px) {
  .ar-hud { gap: 5px; font-size: 9px; }
  .ar-hud span { padding: 5px 6px; }
  .ar-stage-controls { top: 55px; right: 10px; }
  .ar-stage-button { padding: 7px 9px; font-size: 10px; }
  .ar-question-bubble { top: 103px; right: 4%; left: 4%; font-size: 16px; }
  .ar-avatar-badge { top: 160px; }
  body.ar-immersive #arView .ar-hud { top: 12px; right: 10px; left: 10px; }
  body.ar-immersive #arView .ar-stage-controls { top: 55px; right: 10px; }
  body.ar-immersive #arView .ar-question-bubble { top: 111px; right: 4vw; left: 4vw; padding: 13px 15px; font-size: 20px; }
  body.ar-immersive #arView .ar-avatar-badge { top: 190px; left: 4vw; transform: scale(1); }
  body.ar-immersive #arView .ar-gesture-guide { top: 190px; right: 4vw; width: min(280px, 65%); }
  body.ar-immersive #arView .ar-options { right: 4vw; bottom: 5vh; left: 4vw; gap: 8px; }
  body.ar-immersive #arView .ar-option { min-height: 64px; padding: 9px 10px; border-radius: 15px; font-size: 14px; }
  body.ar-immersive #arView .ar-option-number { width: 29px; height: 29px; flex-basis: 29px; font-size: 14px; }
  body.ar-immersive #arView .ar-movement-options { top: auto; right: 4vw; bottom: 5vh; left: 4vw; width: auto; }
  body.ar-immersive #arView .movement-panel { max-height: 42vh; overflow: auto; }
}

@media (max-width: 930px) { .hero-card { padding: 45px; } .hero-art { width: 260px; margin-right: 0; } .lesson-grid { grid-template-columns: repeat(2, 1fr); } .filter-bar { flex-wrap: wrap; } .search-field { min-width: 100%; } .speech-dock { grid-template-columns: 1fr auto; } .speech-settings { grid-column: 1 / -1; justify-content: flex-end; } }
@media (max-width: 700px) { .ar-gesture-guide { top: 150px; right: 10px; width: min(280px, calc(100% - 20px)); } .gesture-guide-state { padding: 3px 4px; } .ar-finger-chip { font-size: 7px; } .ar-gesture-guide p { font-size: 8px; } }
@media (max-width: 700px) { .ar-movement-options { top: auto; right: 4%; bottom: 10px; left: 4%; width: auto; } .movement-panel { padding: 10px 11px; } .movement-panel h3 { font-size: 24px; } .movement-instruction { font-size: 10px; } .movement-speed-tip { margin-bottom: 4px; } .movement-count strong { font-size: 48px; } .explosion-copy { width: min(92vw, 500px); padding: 11px 13px 14px; } .explosion-copy b { max-width: 90vw; font-size: 11px; } .explosion-copy span { font-size: 12px; } .explosion-ring { width: 90px; height: 90px; font-size: 42px; } }
@media (max-width: 700px) { .site-header { min-height: 72px; padding: 12px 17px; } .brand { min-width: 0; } .brand strong { font-size: 18px; } .main-nav { display: none; position: absolute; z-index: 5; top: 68px; right: 16px; left: 16px; padding: 8px; flex-direction: column; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); } .main-nav.is-open { display: flex; } .nav-link { text-align: left; } .mobile-menu { display: block; } main { padding: 8px 16px 35px; } .hero-card { min-height: auto; padding: 34px 25px; } .hero-copy h1 { font-size: 43px; } .hero-copy p { font-size: 16px; } .hero-art { display: none; } .feature-row, .stats-grid, .ar-feature-strip { grid-template-columns: 1fr; gap: 11px; margin-bottom: 37px; } .feature-card { min-height: 81px; } .section-heading, .reader-heading { align-items: start; flex-direction: column; } .section-heading h2 { font-size: 30px; } .filter-bar { align-items: stretch; flex-direction: column; } .select-field { width: 100%; } .lesson-grid { grid-template-columns: 1fr; } .creator-mode-menu { grid-template-columns: 1fr; } .creator-mode-card { padding: 15px; } .reader-topbar { align-items: start; flex-direction: column; margin-bottom: 24px; } .reader-tools { width: 100%; } .reader-tools button { flex: 1; } .reader-layout, .creator-layout, .ar-workspace { grid-template-columns: 1fr; } .reader-sidebar { order: -1; } .lesson-page { min-height: auto; padding: 28px 22px; } .lesson-copy { font-size: 18px; line-height: 1.85; } .reader-navigation { flex-direction: column-reverse; } .reader-navigation button { width: 100%; } .creator-preview { position: static; order: -1; } .form-two-col { grid-template-columns: 1fr; gap: 0; } .site-footer { padding: 20px 16px 130px; flex-wrap: wrap; } .speech-dock { right: 10px; bottom: 10px; left: 10px; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; } .speech-status { min-width: 0; } .speech-controls { justify-content: flex-end; } .selection-button span { display: none; } .speech-settings { justify-content: space-between; gap: 4px; } .speech-settings label { flex: 1; } .speech-settings select { max-width: 100%; } .accessibility-button { padding: 7px 6px; } .ar-play-card, .ar-creator-panel { padding: 18px; } .ar-card-heading { align-items: start; } .ar-card-heading h2 { font-size: 22px; } .ar-camera-stage, #arVideo { min-height: 490px; } .ar-question-bubble { top: 49px; right: 5%; left: 5%; font-size: 16px; } .ar-options { right: 4%; bottom: 12px; left: 4%; grid-template-columns: 1fr 1fr; gap: 7px; } .ar-option { min-height: 62px; padding: 8px; font-size: 13px; } .ar-play-actions { align-items: stretch; } .ar-play-actions button { flex: 1; } .ar-play-actions .text-button { flex: 0 0 100%; margin-left: 0; } .ar-creator-form { display: block; } .ar-choice-grid { grid-template-columns: 1fr; gap: 0; } .ar-creator-actions { align-items: stretch; flex-direction: column; } .answer-select-label { min-width: 0; } .ar-creator-actions .primary-button { width: 100%; } }
@media (max-width: 700px) { .ar-quiz-fields { display: block; } .ar-pair-grid, .ar-order-grid { grid-template-columns: 1fr; } .ar-pair-row { grid-template-columns: 38px 1fr; } .ar-pair-row .form-label:last-child { grid-column: 2; } .ar-matching-options { top: 185px; bottom: 10px; gap: 5px; } .matching-column { padding: 3px; gap: 5px; } .matching-image-card, .matching-label-card { min-height: 43px; padding: 4px; font-size: 11px; } .matching-image-card { grid-template-columns: 16px 34px 1fr 16px; } .matching-image-card img { width: 34px; height: 32px; } .matching-number, .matching-link-icon { width: 17px; height: 17px; font-size: 9px; } .matching-read { font-size: 11px; } .ar-ordering-options { top: 185px; bottom: 10px; gap: 5px; } .ordering-tray { gap: 5px; padding: 3px; } .ordering-card { min-height: 48px; grid-template-columns: 19px 34px 1fr; gap: 4px; padding: 4px; } .ordering-card-visual { width: 34px; height: 32px; font-size: 18px; } .ordering-card-label { font-size: 10px; } .ordering-card-number { width: 18px; height: 18px; font-size: 9px; } .ordering-chip { font-size: 9px; padding: 4px 6px; } .ar-placement-options { top: 178px; right: 2%; bottom: 8px; left: 2%; } .placement-instruction { right: 2%; left: 2%; font-size: 9px; } .placement-planet { width: 62px; min-height: 56px; font-size: 8px; border-radius: 12px; } .placement-planet img { width: 35px; height: 35px; } .placement-sun { bottom: 86px; left: -25px; } .placement-sun span { width: 75px; height: 75px; font-size: 32px; } .placement-targets { gap: 3px; bottom: 5px; } .placement-target { min-height: 53px; padding: 2px 1px; border-radius: 9px; } .placement-target strong { width: 14px; height: 14px; font-size: 8px; } .placement-target-visual, .placement-target-visual img { width: 24px; height: 24px; font-size: 15px; } .placement-target small { font-size: 6px; } .placement-credit { display: none; } }