/* LMS engine — © 2026 Pipop Maneejamnong, Vibe ไปเรื่อย Project */
:root {
  --crema: #F6EFE6;
  --paper: #FFFBF4;
  --foam: #EADCC8;
  --espresso: #2E2419;
  --roast: #6F4E37;
  --caramel: #C0823A;
  --caramel-deep: #9A6528;
  --jade: #2F7F72;
  --chili: #B5442D;
  --bronze: #B87333;
  --silver: #A3ABB3;
  --gold: #D9A21B;
  --platinum: #8CCFD3;
  --px: 3px;
  --font-game: 'Chakra Petch', 'Sarabun', system-ui, sans-serif;
  --font-body: 'Sarabun', system-ui, sans-serif;
  --font-code: 'JetBrains Mono', 'Sarabun', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--espresso);
  font: 17px/1.65 var(--font-body);
}
img, canvas, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--jade); }
:focus-visible { outline: 3px solid var(--jade); outline-offset: 2px; }
[hidden] { display: none !important; }

.app { max-width: 560px; margin: 0 auto; padding: 0 16px 48px; min-height: 100vh; }
.screen { padding-top: 16px; }

h1, h2, h3 { font-family: var(--font-game); line-height: 1.25; margin: 0 0 8px; font-weight: 600; }
h1 { font-size: 27px; }
h2 { font-size: 21px; }
h3 { font-size: 18px; }
p { margin: 0 0 12px; }
.muted { color: var(--roast); }
.small { font-size: 14px; line-height: 1.5; }

/* ---------- pixel chrome (game elements only) */
.px {
  background: var(--paper);
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--espresso),
    0 var(--px) 0 0 var(--espresso),
    calc(-1 * var(--px)) 0 0 0 var(--espresso),
    var(--px) 0 0 0 var(--espresso),
    inset 0 calc(-1 * var(--px)) 0 0 rgba(46, 36, 25, .14);
  margin: var(--px);
}

.btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px;
  font-family: var(--font-game); font-weight: 600; font-size: 17px;
  background: var(--caramel); color: #fff;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--espresso),
    0 var(--px) 0 0 var(--espresso),
    calc(-1 * var(--px)) 0 0 0 var(--espresso),
    var(--px) 0 0 0 var(--espresso),
    inset 0 calc(-1 * var(--px)) 0 0 var(--caramel-deep);
  margin: var(--px);
  text-decoration: none;
  transition: transform .06s;
}
.btn:active { transform: translateY(2px); }
.btn[disabled] { background: var(--foam); color: var(--roast); cursor: not-allowed; box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--roast), 0 var(--px) 0 0 var(--roast),
    calc(-1 * var(--px)) 0 0 0 var(--roast), var(--px) 0 0 0 var(--roast); }
.btn--ghost { background: var(--paper); color: var(--espresso); box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--espresso), 0 var(--px) 0 0 var(--espresso),
    calc(-1 * var(--px)) 0 0 0 var(--espresso), var(--px) 0 0 0 var(--espresso),
    inset 0 calc(-1 * var(--px)) 0 0 var(--foam); }
.btn--jade { background: var(--jade); box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--espresso), 0 var(--px) 0 0 var(--espresso),
    calc(-1 * var(--px)) 0 0 0 var(--espresso), var(--px) 0 0 0 var(--espresso),
    inset 0 calc(-1 * var(--px)) 0 0 #215B52; }
.btn--block { display: flex; width: calc(100% - 2 * var(--px)); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn-row .btn { flex: 1 1 auto; }

.linkbtn { appearance: none; background: none; border: 0; padding: 8px 0; color: var(--roast);
  font-family: var(--font-game); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- demo banner */
.demo-bar { background: var(--espresso); color: var(--crema); font-size: 14px; padding: 8px 16px;
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; }
.demo-bar button { background: none; border: 1px solid var(--crema); color: var(--crema); border-radius: 4px;
  padding: 2px 10px; font-size: 13px; cursor: pointer; }

/* ---------- HUD */
.hud { position: sticky; top: 0; z-index: 10; background: var(--crema);
  display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 2px solid var(--foam); }
.hud__avatar { width: 40px; height: 40px; image-rendering: pixelated; background: var(--foam); border-radius: 4px; }
.hud__who { flex: 1; min-width: 0; }
.hud__name { font-family: var(--font-game); font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud__xp { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--roast); }
.xpbar { flex: 1; max-width: 140px; height: 8px; background: var(--foam); box-shadow: 0 0 0 2px var(--espresso); }
.xpbar > i { display: block; height: 100%; background: var(--jade); }
.hud__btn { appearance: none; border: 0; background: none; cursor: pointer; padding: 8px; font-family: var(--font-game); font-weight: 600; color: var(--roast); }

/* ---------- auth */
.title-plate { text-align: center; padding: 28px 8px 8px; }
.title-plate .course-code { font-family: var(--font-game); color: var(--roast); font-size: 15px; }
.title-plate h1 { font-size: 30px; margin-top: 4px; }
.hero-sprites { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: 18px 0 8px; }
.hero-sprites canvas { width: 56px; height: 56px; image-rendering: pixelated; }
.hero-sprites canvas.boss { width: 88px; height: 88px; }

.form { display: grid; gap: 14px; margin-top: 16px; }
.field label { display: block; font-family: var(--font-game); font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.field .hint { font-size: 13px; color: var(--roast); margin-top: 4px; }
.field .hint.bad { color: var(--chili); }
.field .hint.good { color: var(--jade); }
input[type=text], input[type=tel], input[type=password], select {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid var(--roast); border-radius: 4px;
  background: var(--paper); font-size: 17px;
}
input:focus { border-color: var(--jade); outline: none; box-shadow: 0 0 0 3px rgba(47,127,114,.25); }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.form > *, .row2 > *, .row3 > *, .field { min-width: 0; }
input[type=file] { max-width: 100%; font-size: 15px; }
.row3 { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
.photo-pick { display: flex; gap: 14px; align-items: center; }
.photo-pick > div:last-child { min-width: 0; }
.photo-pick .preview { width: 84px; height: 84px; border: 2px dashed var(--roast); border-radius: 4px; background: var(--foam) center/cover no-repeat;
  display: grid; place-items: center; font-size: 12px; color: var(--roast); text-align: center; flex: none; }
.avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.avatar-opt { appearance: none; border: 2px solid var(--foam); background: var(--paper); border-radius: 6px; padding: 8px 4px; cursor: pointer;
  display: grid; justify-items: center; gap: 2px; font-family: var(--font-game); font-size: 14px; }
.avatar-opt canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.avatar-opt[aria-checked=true] { border-color: var(--jade); background: #EAF4F1; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; background: var(--paper);
  border: 1.5px solid var(--foam); border-radius: 6px; padding: 12px; }
.consent input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--jade); }
.notice { border-left: 4px solid var(--caramel); background: var(--paper); padding: 12px 14px; border-radius: 0 6px 6px 0; margin: 12px 0; }
.notice--bad { border-left-color: var(--chili); }
.notice--good { border-left-color: var(--jade); }

/* ---------- world map */
.map-head { padding: 12px 0 4px; }
.map-head p { margin: 0; }
.trail { position: relative; margin-top: 48px; }
.stop { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; padding: 0 4px; }
.stop--right { grid-template-columns: 1fr 88px; }
.stop--right .stop__tile { order: 2; }
.stop--right .stop__info { order: 1; text-align: right; }
.stop__tile { position: relative; width: 82px; height: 82px; display: grid; place-items: center; cursor: pointer;
  font-family: var(--font-game); font-weight: 700; font-size: 22px; appearance: none; border: 0; padding: 0; color: var(--espresso); }
.stop__tile.px { margin: var(--px); }
.stop--locked .stop__tile { background: var(--foam); color: var(--roast); cursor: default; }
.stop--current .stop__tile { background: #FFF1DB; }
.stop__tile .medal-icon { position: absolute; right: -10px; bottom: -10px; width: 34px; height: 34px; }
.stop__tile .lock-icon { position: absolute; right: -8px; bottom: -8px; width: 26px; height: 26px; }
.stop__walker { position: absolute; left: 50%; top: -40px; width: 40px; height: 40px; margin-left: -20px; image-rendering: pixelated; }
@media (prefers-reduced-motion: no-preference) {
  .stop__walker { animation: bob 1.4s steps(2) infinite; }
}
@keyframes bob { 50% { transform: translateY(-4px); } }
.stop__info .scene { font-family: var(--font-game); font-size: 14px; color: var(--roast); }
.stop__info .title { font-weight: 600; line-height: 1.4; }
.stop__info .status { font-size: 14px; color: var(--roast); }
.stop__info .status.ready { color: var(--jade); font-weight: 600; }
.connector { height: 46px; width: 100%; display: block; }
.connector path { fill: none; stroke: var(--roast); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------- chapter hub */
.backlink { display: inline-block; margin: 4px 0 8px; }
.chapter-plate { padding: 16px; margin-bottom: 18px; }
.chapter-plate .scene { font-family: var(--font-game); color: var(--roast); font-size: 15px; }
.chapter-plate h1 { font-size: 24px; margin: 2px 0 10px; }
.chapter-plate ul { margin: 0; padding-left: 20px; font-size: 15px; }
.scoreline { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 15px; }
.scoreline b { font-family: var(--font-game); }
.route { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.route li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px; background: var(--paper);
  border: 1.5px solid var(--foam); border-radius: 6px; }
.route li.is-locked { opacity: .62; }
.route li.is-done { border-color: #BCD9D2; }
.route .step { width: 40px; height: 40px; display: grid; place-items: center; font-family: var(--font-game); font-weight: 700;
  background: var(--crema); box-shadow: 0 0 0 2px var(--espresso); }
.route li.is-done .step { background: var(--jade); color: #fff; }
.route .what { min-width: 0; }
.route .what b { display: block; font-family: var(--font-game); font-weight: 600; line-height: 1.35; }
.route .what span { font-size: 14px; color: var(--roast); }
.route .go { min-height: 40px; padding: 6px 14px; font-size: 15px; }

/* ---------- reading cards */
.stage-head { margin-bottom: 10px; }
.stage-head .scene { font-family: var(--font-game); color: var(--roast); font-size: 15px; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--espresso); border-radius: 6px; overflow: hidden; margin-bottom: 14px; }
.video iframe, .video > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video--empty { display: grid; place-items: center; color: var(--crema); text-align: center; padding: 16px; font-size: 15px; aspect-ratio: auto; min-height: 120px; }
.video-note { font-size: 14px; color: var(--roast); margin: -6px 0 14px; }
.pips { display: flex; gap: 6px; margin: 4px 0 10px; }
.pips i { flex: 1; height: 6px; background: var(--foam); }
.pips i.on { background: var(--caramel); }
.card { background: var(--paper); border: 1.5px solid var(--roast); border-radius: 6px; padding: 18px 16px; }
.card h2 { font-size: 20px; margin-bottom: 12px; }
.card ul { padding-left: 22px; margin: 0 0 12px; }
.card li { margin-bottom: 4px; }
.card code { font-family: var(--font-code); font-size: .9em; background: var(--crema); padding: 1px 5px; border-radius: 3px; }
.table-wrap { overflow-x: auto; margin: 0 -4px 12px; padding: 0 4px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.5; }
th, td { text-align: left; vertical-align: top; padding: 8px 8px; border-bottom: 1px solid var(--foam); }
th { font-family: var(--font-game); font-weight: 600; background: var(--crema); border-bottom: 2px solid var(--roast); }
pre.code { margin: 0 0 12px; background: var(--espresso); color: #F3E6D3; padding: 14px; border-radius: 6px;
  font: 14px/1.6 var(--font-code); overflow-x: auto; white-space: pre; tab-size: 4; }
pre.code .kw { color: #F0B868; font-weight: 600; }
pre.code .str { color: #A9D8B8; }
pre.code .num { color: #F2A38F; }
pre.code .com { color: #A8957F; font-style: italic; }
.output { margin: 0 0 12px; border: 1.5px solid var(--jade); border-radius: 6px; overflow: hidden; }
.output__label { background: var(--jade); color: #fff; font-size: 14px; padding: 4px 12px; font-family: var(--font-game); }
.output pre { margin: 0; padding: 10px 14px; font: 15px/1.55 var(--font-code); background: #EEF6F3; white-space: pre-wrap; }
.callout { border-radius: 6px; padding: 12px 14px; margin: 0 0 12px; font-size: 16px; background: #F7EBD7; }
.callout b { font-family: var(--font-game); display: block; margin-bottom: 2px; }
.callout--pitfall { background: #F8E3DC; }
.callout--pitfall b { color: var(--chili); }
.callout--note { background: #E7F1EE; }
.callout--note b { color: var(--jade); }
.callout--remember b { color: var(--caramel-deep); }
.symbols { display: grid; gap: 10px; margin-bottom: 12px; }
.symbol { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; }
.symbol svg { width: 76px; height: 46px; }
.symbol b { display: block; font-family: var(--font-game); font-weight: 600; }
.symbol span { font-size: 15px; color: var(--roast); }
.flow { margin: 0 0 12px; background: var(--crema); border-radius: 6px; padding: 10px 4px; overflow-x: auto; }
.flow svg { margin: 0 auto; }
.card-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.card-nav .btn { flex: 1; }

/* ---------- questions */
.q-meta { font-family: var(--font-game); color: var(--roast); font-size: 15px; display: flex; justify-content: space-between; }
.q-prompt { font-size: 18px; font-weight: 600; line-height: 1.55; margin: 6px 0 12px; }
.opts { display: grid; gap: 10px; }
.opt { appearance: none; text-align: left; cursor: pointer; width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 6px;
  border: 2px solid var(--roast); background: var(--paper); font-size: 16px; line-height: 1.5; display: flex; gap: 10px; align-items: center; }
.opt:hover { border-color: var(--espresso); }
.opt[aria-checked=true] { border-color: var(--caramel); background: #FBEFDC; box-shadow: inset 0 0 0 2px var(--caramel); }
.opt.is-right { border-color: var(--jade); background: #E7F3EF; box-shadow: inset 0 0 0 2px var(--jade); }
.opt.is-wrong { border-color: var(--chili); background: #F8E6E0; }
.opt code { font-family: var(--font-code); }
.opts--shape { grid-template-columns: 1fr 1fr; }
.opts--shape .opt { justify-content: center; min-height: 88px; }
.opts--shape svg { width: 96px; height: 56px; }
.parsons h3 { font-size: 15px; color: var(--roast); margin: 12px 0 6px; }
.parsons ol, .parsons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 52px; }
.parsons .slot-empty { border: 2px dashed var(--foam); border-radius: 6px; padding: 12px; color: var(--roast); font-size: 14px; text-align: center; }
.pline { appearance: none; width: 100%; text-align: left; cursor: pointer; border: 2px solid var(--roast); border-radius: 4px; background: var(--paper);
  padding: 8px 10px; font: 15px/1.5 var(--font-code); white-space: pre; overflow-x: auto; display: flex; gap: 10px; }
.pline .ix { color: var(--roast); font-family: var(--font-game); min-width: 18px; }
.answer-zone .pline { border-color: var(--caramel); background: #FBEFDC; }
.feedback { margin-top: 12px; padding: 12px 14px; border-radius: 6px; }
.feedback--good { background: #E7F3EF; border-left: 4px solid var(--jade); }
.feedback--bad { background: #F8E6E0; border-left: 4px solid var(--chili); }
.feedback b { font-family: var(--font-game); display: block; }

/* ---------- battle */
.arena { position: relative; height: 204px; margin: 4px 0 14px; overflow: hidden; border-radius: 6px;
  background:
    linear-gradient(to bottom, transparent 70%, rgba(46,36,25,.12) 70%),
    repeating-linear-gradient(90deg, #EADCC8 0 24px, #E3D2BA 24px 48px); }
.arena canvas { position: absolute; image-rendering: pixelated; }
.arena .hero { left: 22px; bottom: 26px; width: 72px; height: 72px; }
.arena .boss { right: 18px; bottom: 20px; width: 104px; height: 104px; }
.arena .bossname { position: absolute; right: 12px; top: 10px; text-align: right; font-family: var(--font-game); font-weight: 600; font-size: 14px; }
.hp { width: 150px; height: 12px; margin-top: 4px; margin-left: auto; background: var(--paper); box-shadow: 0 0 0 2px var(--espresso); position: relative; }
.hp > i { position: absolute; inset: 0 auto 0 0; background: var(--chili); width: 100%; transition: width 1.4s steps(14); }
.hp--hidden > i { background: repeating-linear-gradient(90deg, var(--chili) 0 6px, #8F3322 6px 12px); }
.arena .spark { position: absolute; right: 70px; bottom: 70px; font-size: 30px; opacity: 0; color: var(--caramel); font-family: var(--font-game); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .arena.attack .hero { animation: lunge .42s steps(4); }
  .arena.attack .boss { animation: hit .42s steps(4); }
  .arena.attack .spark { animation: spark .42s steps(4); }
  .arena.defeated .boss { animation: fall 1.2s steps(6) forwards; }
}
@keyframes lunge { 50% { transform: translateX(80px); } }
@keyframes hit { 50% { transform: translateX(8px); filter: brightness(1.8); } }
@keyframes spark { 40% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; } }
@keyframes fall { to { transform: translateY(40px) rotate(20deg); opacity: .15; } }

/* ---------- results */
.result { text-align: center; }
.result .big { font-family: var(--font-game); font-weight: 700; font-size: 56px; line-height: 1; margin: 8px 0 2px; }
.result .big small { font-size: 26px; color: var(--roast); }
.medal-show { display: grid; justify-items: center; gap: 6px; margin: 18px 0; }
.medal-show svg { width: 104px; height: 128px; }
.medal-show b { font-family: var(--font-game); font-size: 19px; }
.badge-new { display: inline-block; background: var(--jade); color: #fff; font-family: var(--font-game); font-size: 14px; padding: 2px 10px; }
.breakdown { text-align: left; display: grid; gap: 10px; margin: 16px 0; }
.bd-row { display: grid; grid-template-columns: 1fr 52px; gap: 4px 10px; align-items: center; font-size: 15px; }
.bd-row .bar { grid-column: 1 / -1; height: 10px; background: var(--foam); }
.bd-row .bar > i { display: block; height: 100%; background: var(--caramel); }
.bd-row b { font-family: var(--font-game); text-align: right; }

/* ---------- profile */
.profile-card { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 16px; margin-bottom: 18px; }
.profile-card .photo { width: 96px; height: 96px; background: var(--foam) center/cover no-repeat; border-radius: 4px; }
.medal-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.medal-shelf div { text-align: center; font-size: 13px; line-height: 1.35; }
.medal-shelf svg { width: 52px; height: 64px; margin: 0 auto 4px; }

/* ---------- misc */
.loading { position: fixed; inset: 0; background: rgba(246,239,230,.72); display: grid; place-items: center; z-index: 50; }
.loading div { font-family: var(--font-game); font-weight: 600; padding: 14px 22px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: 92vw; z-index: 60;
  background: var(--espresso); color: var(--crema); padding: 12px 18px; border-radius: 6px; font-size: 15px; }
.foot { margin-top: 40px; font-size: 13px; color: var(--roast); text-align: center; }
.portal-list { display: grid; gap: 14px; margin-top: 20px; }
.portal-item { display: block; padding: 16px; text-decoration: none; color: var(--espresso); }
.portal-item b { font-family: var(--font-game); font-size: 15px; color: var(--roast); display: block; }
.portal-item span { font-size: 19px; font-weight: 600; line-height: 1.4; }
.summary-list { padding-left: 22px; }
.summary-list li { margin-bottom: 8px; }

@media (max-width: 430px) {
  pre.code { font-size: 13px; padding: 12px; }
  table { font-size: 14px; }
  .card { padding: 16px 14px; }
}
@media (max-width: 380px) {
  .row2 { grid-template-columns: 1fr; }
  .stop { grid-template-columns: 76px 1fr; }
  .stop--right { grid-template-columns: 1fr 76px; }
  .stop__tile { width: 70px; height: 70px; font-size: 19px; }
}