@font-face {
  font-family: "Instructor Nerd Symbol";
  src: url("/assets/fonts/instructor-symbol.ttf") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Choko Milky";
  src: url("/assets/fonts/ChokoMilky-gx8gR.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #637083;
  --paper: #ffffff;
  --canvas: #eef3f8;
  --line: #cbd5e1;
  --wall: #253047;
  --accent: #3157d5;
  --accent-dark: #2342aa;
  --success: #16794a;
  --success-bg: #e8f7ef;
  --danger: #b42318;
  --danger-bg: #fff0ee;
  --warning: #8a4b08;
  --warning-bg: #fff6df;
  --radius: 16px;
  --shadow: 0 12px 30px rgba(25, 40, 65, 0.1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: var(--canvas);
}

button, textarea { font: inherit; }

button:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(49, 87, 213, 0.35);
  outline-offset: 2px;
}

.site-header {
  min-height: 76px;
  padding: 14px clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: white;
  background: #18223a;
}

.site-header h1, .code-heading h2, .mission-heading h2 { margin: 0; }
.site-header h1 { font-size: clamp(1.35rem, 2vw, 1.8rem); }

.eyebrow, .mission-progress {
  margin: 0 0 3px;
  color: #70809a;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.site-header .eyebrow { color: #aebbd0; }

.instructor-name {
  display: inline-block;
  margin-left: 0.55rem;
  color: #f7b8d2;
  font-family: "Choko Milky", "Segoe Script", "Brush Script MT", cursive;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  transform: rotate(-1deg);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}

.instructor-symbol {
  font-family: "Instructor Nerd Symbol";
  font-size: 0.9em;
  font-style: normal;
  font-weight: 400;
}

.lesson-chip, .mission-badge {
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
  white-space: nowrap;
}

.lesson-chip {
  padding: 8px 12px;
  color: #dce6ff;
  background: rgba(255, 255, 255, 0.1);
}

.app-shell {
  width: min(1440px, calc(100% - 32px));
  margin: 24px auto;
  display: grid;
  grid-template-columns: minmax(390px, 0.9fr) minmax(450px, 1.1fr) minmax(190px, 0.42fr);
  gap: 20px;
  align-items: stretch;
}

.mission-panel, .code-panel, .progress-panel {
  padding: clamp(18px, 2.5vw, 28px);
  background: var(--paper);
  border: 1px solid #dce3ec;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.mission-heading, .code-heading, .console-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.mission-heading h2, .code-heading h2 { font-size: clamp(1.25rem, 2vw, 1.65rem); }

.mission-badge {
  padding: 7px 11px;
  color: var(--accent-dark);
  background: #e9eeff;
}

.objective {
  margin: 16px 0;
  padding: 12px 14px;
  display: grid;
  gap: 3px;
  border-left: 4px solid var(--accent);
  background: #f4f7ff;
  border-radius: 8px;
  font-size: 0.9rem;
}

.objective span { color: var(--muted); }

.maze {
  --maze-columns: 7;
  width: min(100%, 500px);
  aspect-ratio: var(--maze-columns) / var(--maze-rows, 6);
  margin: 18px auto;
  display: grid;
  position: relative;
  grid-template-columns: repeat(var(--maze-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--maze-rows, 6), minmax(0, 1fr));
  border: 3px solid var(--wall);
  background: var(--line);
}

.maze-stage { position: relative; }

.speech-bubble {
  position: absolute;
  z-index: 8;
  max-width: min(86%, 360px);
  padding: 9px 12px;
  color: #172033;
  background: white;
  border: 2px solid #3157d5;
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(23, 32, 51, 0.2);
  font-size: 0.83rem;
  transform: translate(-50%, calc(-100% - 14px));
  white-space: pre-line;
  pointer-events: none;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 12px;
  height: 12px;
  background: white;
  border-right: 2px solid #3157d5;
  border-bottom: 2px solid #3157d5;
  transform: translateX(-50%) rotate(45deg);
}

.maze-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  background: #fbfcfe;
  overflow: hidden;
}

.maze-cell.wall { background: var(--wall); border-color: #36415a; }
.maze-cell.goal { background: #fff8d8; }
.maze-cell.trail::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #b8c5dd;
  transform: translate(-50%, -50%);
}

.cell-icon {
  position: absolute;
  z-index: 2;
  font-size: clamp(1.15rem, 2.5vw, 1.65rem);
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
}

.cell-icon.game-object { right: 7%; bottom: 7%; }

.cell-label {
  position: absolute;
  right: 3px;
  bottom: 1px;
  z-index: 3;
  color: #172033;
  font-size: clamp(0.55rem, 1.2vw, 0.72rem);
  font-weight: 900;
  -webkit-text-stroke: 2px white;
  paint-order: stroke fill;
  text-shadow: 0 0 2px white;
}

.robot {
  position: absolute;
  z-index: 6;
  font-size: clamp(1.15rem, 2.5vw, 1.65rem);
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
  transform: translate(-50%, -50%);
  transition: left 260ms ease, top 260ms ease;
  will-change: left, top;
}
.robot.no-transition { transition: none; }
.robot.bump { animation: bump 280ms ease; }

@keyframes bump {
  35% { transform: translate(-50%, -50%) scale(0.78) rotate(-9deg); }
  70% { transform: translate(-50%, -50%) scale(1.08) rotate(5deg); }
}

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  color: var(--muted);
  font-size: 0.82rem;
}

.legend > span { display: flex; align-items: center; gap: 6px; }
.legend-icon { font-size: 1rem; }
.wall-swatch { width: 16px; height: 16px; border-radius: 3px; background: var(--wall); }

.hint-box {
  margin-top: 16px;
  padding: 10px 12px;
  color: #435069;
  background: #f3f6fa;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.45;
}
.hint-box ul { margin: 7px 0 0; padding-left: 21px; }
.hint-box li + li { margin-top: 5px; }

.mission-nav { margin-top: 18px; display: flex; justify-content: space-between; gap: 12px; }

.command-reference {
  margin: 20px 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

code {
  padding: 0.1em 0.35em;
  color: #263b77;
  background: #edf1fb;
  border-radius: 4px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.command-reference code { padding: 6px 9px; font-size: 0.8rem; }
.editor-wrap {
  min-height: 290px;
  display: grid;
  grid-template-columns: 44px 1fr;
  overflow: hidden;
  border: 1px solid #2f3b55;
  border-radius: 10px;
  background: #121a2b;
}

.line-numbers, #code-editor {
  padding: 15px 12px;
  color: #e8edf8;
  font: 15px/1.65 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.line-numbers {
  color: #748099;
  text-align: right;
  white-space: pre;
  background: #182238;
  user-select: none;
}

#code-editor {
  width: 100%;
  min-height: 290px;
  resize: vertical;
  border: 0;
  outline: 0;
  background: transparent;
  tab-size: 4;
}

#code-editor:disabled { opacity: 0.7; cursor: wait; }
.editor-help { margin: 7px 0 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: 0.78rem; }
.movement-icon { position: relative; width: 22px; height: 22px; display: inline-grid; place-items: center; color: var(--accent-dark); font-size: 1.15rem; font-weight: 900; }
.movement-icon span { position: absolute; line-height: 1; }

.actions { display: flex; align-items: center; gap: 14px; }
.actions span { color: var(--muted); font-size: 0.78rem; }

.button {
  min-height: 40px;
  padding: 9px 14px;
  border: 0;
  border-radius: 9px;
  font-weight: 750;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
}

.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: 0.42; cursor: not-allowed; }
.button-primary { color: white; background: var(--accent); }
.button-primary:hover:not(:disabled) { background: var(--accent-dark); }
.button-secondary { color: var(--ink); background: #e9eef5; }
.button-danger { color: white; background: var(--danger); }
.python-input-dialog { width: min(430px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 18px 50px rgba(23,32,51,.28); }
.python-input-dialog::backdrop { background: rgba(23,32,51,.48); }
.python-input-dialog form { padding: 22px; display: grid; gap: 14px; }
.python-input-dialog label { font-weight: 800; white-space: pre-wrap; }
.python-input-dialog input { width: 100%; padding: 11px 12px; border: 1px solid #aeb9c8; border-radius: 8px; font: inherit; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.console, .memory-panel {
  min-height: 130px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #dce3ec;
  border-radius: 10px;
  background: #f8fafc;
}

.learning-panels { display: grid; grid-template-columns: minmax(160px, 0.7fr) minmax(230px, 1.3fr); gap: 12px; }
.panel-heading { min-height: 26px; display: flex; align-items: center; justify-content: space-between; }
.memory-panel h3 { margin: 0; font-size: 0.92rem; }
.memory-output { margin: 10px 0 0; font: 0.8rem/1.55 "SFMono-Regular", Consolas, monospace; }
.memory-output > div:not(.empty-state) { display: grid; grid-template-columns: auto 14px 1fr; gap: 5px; }
.memory-output dt, .memory-output dd { margin: 0; overflow-wrap: anywhere; }
.memory-output dd.string-value { color: #16794a; }
.empty-state { color: #8792a5; font-family: Inter, sans-serif; }

.progress-panel { align-self: start; }
.progress-panel h2 { margin: 0 0 14px; font-size: 1.1rem; }
.progress-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.progress-list button { width: 100%; padding: 8px; display: flex; justify-content: space-between; gap: 8px; border: 0; border-radius: 7px; color: var(--ink); background: #f1f4f8; text-align: left; cursor: pointer; }
.progress-list button.current { color: var(--accent-dark); background: #e7edff; font-weight: 750; }
.progress-score { padding-top: 12px; border-top: 1px solid #dce3ec; font-weight: 850; }
.progress-panel .button { width: 100%; }
.progress-panel .mission-nav .button { width: auto; flex: 1; }
.progress-panel .mission-nav { font-size: .5em; }

.header-actions { display: flex; align-items: center; gap: 8px; }
.assignment-chip { padding: 7px 10px; border-radius: 999px; color: #dce6ff; background: rgba(255,255,255,.1); font-size: .75rem; }
.nav-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 0; border-radius: 8px; color: #dce6ff; background: transparent; font-weight: 750; cursor: pointer; }
.nav-button.active { color: white; background: rgba(255,255,255,.16); }
.nav-link { text-decoration: none; }
.view-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.24); border-radius: 10px; background: rgba(12,23,43,.3); }
.view-toggle { border-radius: 7px; background: transparent; }
.view-toggle:hover:not(.active) { background: rgba(255,255,255,.12); }
.view-toggle.active { color: #172033; background: white; box-shadow: 0 2px 7px rgba(0,0,0,.18); }

.course-view { width: min(1180px, calc(100% - 32px)); margin: 34px auto; }
.week-status-message { margin: 0 2px 12px; color: var(--muted); font-size: .86rem; }
.week-status-message:empty { display: none; }
.week-grid { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; list-style: none; }
.week-card { min-height: 190px; padding: 20px; display: flex; flex-direction: column; border: 1px solid #dce3ec; border-radius: 13px; background: white; box-shadow: 0 5px 16px rgba(25, 40, 65, .06); }
.week-card h3 { margin: 0 0 9px; color: var(--accent-dark); font-size: 1.2rem; }
.week-card p { margin: 0 0 16px; color: var(--ink); line-height: 1.5; }
.week-state { margin-top: auto; color: var(--muted); font-size: .82rem; font-weight: 750; }
.week-state.submission-open { color: var(--success); }
.week-state.submission-closed { color: var(--danger); }
.week-deadline, .week-countdown { display: block; margin-top: 5px; color: var(--muted); font-size: .76rem; }
.week-countdown { margin-top: 2px; font-weight: 750; }
.week-card.week-open { border-color: #7ccca5; background: #f8fffb; }
.week-card.week-locked {
  border-color: #d5dae2;
  background: #e7e9ed;
  box-shadow: none;
  opacity: .7;
}
.week-card.week-locked h3,
.week-card.week-locked p { color: #697386; }
.week-link { margin-top: 13px; text-align: center; text-decoration: none; }

.submission-view { width: min(720px, calc(100% - 28px)); margin: 28px auto; }
.submission-card { padding: clamp(22px, 4vw, 38px); background: white; border: 1px solid #dce3ec; border-radius: var(--radius); box-shadow: var(--shadow); }
.submission-card h2 { margin: 2px 0 18px; font-size: 1.7rem; }
.back-link { margin: 0 0 22px; padding: 0; border: 0; color: var(--accent); background: transparent; font-weight: 750; cursor: pointer; }
.assignment-details { padding: 12px 14px; border-radius: 9px; background: #f3f6fa; line-height: 1.55; }
.submission-score { margin: 18px 0; padding: 15px; display: grid; grid-template-columns: 1fr auto; gap: 8px; border: 1px solid #dce3ec; border-radius: 10px; }
.submission-score strong { font-size: 1.1rem; }
#submission-form { display: grid; gap: 14px; }
#submission-form label { display: grid; gap: 6px; font-size: .86rem; font-weight: 750; }
#submission-form input, #submission-form select { width: 100%; padding: 10px 11px; border: 1px solid #b9c4d2; border-radius: 8px; background: white; }
.submit-button { width: 100%; }
.submission-result { margin-top: 15px; padding: 0; line-height: 1.55; }
.submission-result.success, .submission-result.error { padding: 13px; border-radius: 8px; }
.submission-result.success { color: var(--success); background: var(--success-bg); }
.submission-result.error { color: var(--danger); background: var(--danger-bg); }
.console-heading { align-items: center; }
.console h3 { margin: 0; font-size: 0.92rem; }
.console-output { margin: 10px 0 0; padding-left: 0; list-style: none; color: #435069; font: 0.82rem/1.55 "SFMono-Regular", Consolas, monospace; }
.console-output:empty::before { content: "Output ของโปรแกรมจะแสดงที่นี่"; color: #8792a5; font-family: Inter, sans-serif; }
.console-output li + li { margin-top: 3px; }
.console-output .error { color: var(--danger); }
.console-output .success { color: var(--success); font-weight: 700; }
.console-output .active { color: var(--accent-dark); font-weight: 700; }

.status-pill { padding: 5px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.status-ready { color: #536176; background: #e8edf3; }
.status-running { color: var(--accent-dark); background: #e5ebff; }
.status-success { color: var(--success); background: var(--success-bg); }
.status-error { color: var(--danger); background: var(--danger-bg); }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; width: min(680px, calc(100% - 24px)); }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .app-shell { grid-template-columns: minmax(380px, .9fr) minmax(450px, 1.1fr); }
  .progress-panel { grid-column: 1 / -1; }
  .progress-list { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 520px) {
  .site-header { align-items: flex-start; }
  .lesson-chip { display: none; }
  .assignment-chip { display: none; }
  .site-header { flex-direction: column; }
  .header-actions { width: 100%; }
  .course-view { width: min(100% - 24px, 680px); margin-top: 18px; }
  .app-shell { margin-top: 12px; }
  .mission-panel, .code-panel { padding: 16px; border-radius: 12px; }
  .editor-wrap, #code-editor { min-height: 230px; }
  .actions { align-items: stretch; flex-direction: column; }
  .button-primary { width: 100%; }
  .learning-panels { grid-template-columns: 1fr; }
  .progress-list { grid-template-columns: 1fr; }
}

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

/* Week 2 · Data Core Defense */
.week2-view{padding:18px;min-height:calc(100vh - 88px);background:radial-gradient(circle at 50% 20%,#162d4f 0,#091426 55%,#050b16 100%);color:#eaf4ff}.w2-shell{max-width:1500px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:14px}.w2-hud{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr 1.5fr auto;gap:16px;align-items:center;padding:14px 18px;border:1px solid #31547c;background:#0b1b31;border-radius:14px;box-shadow:0 0 26px #16a8ff1c}.w2-hud h2,.w2-hud p{margin:2px 0}.w2-completed{display:inline-block;margin-top:5px;color:#75f3b0}.integrity{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center}.integrity strong{font-size:.74rem;letter-spacing:.08em}.integrity-track{height:13px;background:#24364d;border:1px solid #4c6686;border-radius:9px;overflow:hidden}.integrity-track span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#22d77b,#b6f13c);transition:width .25s}.w2-metrics{display:flex;margin:0;gap:6px}.w2-metrics div{min-width:58px;padding:6px;text-align:center;background:#122944;border-radius:7px}.w2-metrics dt{font-size:.62rem;color:#9ab1ce}.w2-metrics dd{margin:2px 0 0;font-weight:800}.w2-legend{display:grid;gap:4px;font-size:.68rem}.w2-legend span{padding:4px 7px;border-radius:5px;font-weight:900}.w2-legend small{font-weight:500}.category-memory{background:#126744;color:#d9ffeb}.category-type{background:#6337a3;color:#f1e4ff}.category-result{background:#165eae;color:#e5f2ff}.battlefield{position:relative;height:min(64vh,650px);min-height:480px;overflow:hidden;border:1px solid #32577e;border-radius:16px;background:linear-gradient(#06101fdd,#0b203be8),repeating-linear-gradient(90deg,transparent 0 24.8%,#3f71921a 25%);box-shadow:inset 0 0 55px #02101f,0 10px 32px #0006}.battlefield:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 28px,#58c8ff0a 29px);pointer-events:none}.data-stream{position:absolute;inset:0 0 120px}.data-threat{--fall:2%;--lane:0;position:absolute;z-index:3;top:calc(var(--fall) - 10px);left:calc(4% + var(--lane) * 31%);width:min(29%,310px);min-width:220px;padding:9px;text-align:left;color:#eef8ff;background:#10233aee;border:2px solid #3178a9;border-radius:9px;box-shadow:0 0 18px #31a8ff33;transform:translateY(-50%);transition:top .08s linear,filter .15s,box-shadow .15s;cursor:pointer}.data-threat.selected{filter:brightness(1.2);box-shadow:0 0 0 3px #fff,0 0 28px #66c9ff}.data-threat.category-memory{border-color:#32d487}.data-threat.category-type{border-color:#b173ff}.data-threat.category-result{border-color:#4ba3ff}.threat-badge{display:inline-block;padding:3px 7px;border-radius:4px;font-size:.68rem;font-weight:900}.category-memory .threat-badge{background:#126744}.category-type .threat-badge{background:#6337a3}.category-result .threat-badge{background:#165eae}.data-threat pre{margin:6px 0;padding:6px;max-height:84px;overflow:hidden;color:#dff4ff;background:#071320;border-radius:5px;font:600 .72rem/1.3 ui-monospace,monospace;white-space:pre-wrap}.threat-question{display:block;font-size:.78rem}.data-threat small{display:block;margin-top:3px;color:#a8bdd3;font-size:.64rem}.threat-input{margin:3px 0;color:#ffd76b;font-size:.68rem}.data-core{position:absolute;z-index:2;bottom:22px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:190px;height:72px;border:2px solid #2ee7ff;border-radius:50%;background:#0e5b7b;box-shadow:0 0 35px #2ee7ff88,inset 0 0 22px #061524;color:#d9fbff}.data-core span{font-size:.58rem;letter-spacing:.3em}.robot-cannon{position:absolute;z-index:4;bottom:20px;left:13%;font-size:2.5rem}.robot-cannon i{display:block;margin:-8px auto 0;width:10px;height:42px;border-radius:8px;background:#7be7ff;transform:rotate(20deg);transform-origin:bottom;box-shadow:0 0 10px #38dfff}.battlefield.laser-hit:after{content:"";position:absolute;z-index:5;bottom:78px;left:13%;width:5px;height:70%;background:#80f7ff;box-shadow:0 0 14px #30eaff;transform-origin:bottom;animation:laser .35s ease-out forwards}.core-impact{animation:core-impact .5s}.w2-feedback{position:absolute;z-index:8;bottom:105px;left:50%;transform:translateX(-50%);max-width:80%;padding:8px 14px;border-radius:8px;white-space:pre-line;font-size:.82rem}.w2-feedback.wrong{background:#7d2334;color:#fff}.w2-feedback.info{background:#174d70;color:#dff8ff}.w2-overlay{position:absolute;z-index:10;inset:25% 20%;display:grid;place-content:center;text-align:center;padding:22px;background:#081729ee;border:2px solid #43c8ff;border-radius:16px}.w2-overlay[hidden]{display:none}.w2-controls{display:grid;grid-template-columns:1.3fr 1fr auto auto;gap:10px;align-items:end;padding:12px;background:#0d2038;border:1px solid #31547c;border-radius:12px}.w2-controls label{display:grid;gap:4px;font-size:.72rem}.w2-controls input{padding:11px;border:2px solid #3c86ba;border-radius:8px;background:#071523;color:#fff;font:700 1rem ui-monospace,monospace}.selected-label{display:block;color:#6fcfff;font-size:.62rem;font-weight:900}.fire-button{background:#0879b9;box-shadow:0 0 16px #26bdff55}.w2-progress{grid-row:2/4;grid-column:2;display:flex;flex-direction:column;gap:12px;padding:14px;color:#1b2b42;background:#fff;border-radius:14px}.w2-progress>div{display:flex;gap:5px}.w2-progress .button{font-size:.62rem;padding:7px}.w2-debug{grid-column:1/-1;padding:10px;color:#b8ffc9;background:#04120a;white-space:pre-wrap}.w2-submission{grid-column:1/-1;padding:20px;color:#17243b;background:#fff;border-radius:14px}.w2-submission form{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:12px;align-items:end}.w2-submission label{display:grid;gap:5px}.w2-submission input,.w2-submission select{padding:9px;border:1px solid #aab7c8;border-radius:7px}.w2-submission[hidden]{display:none}@keyframes laser{0%{opacity:1;transform:scaleY(0)}60%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}@keyframes core-impact{50%{filter:brightness(2);box-shadow:0 0 70px #ff456c}}
@media(max-width:1100px){.w2-shell{grid-template-columns:1fr}.w2-hud{grid-template-columns:1fr 1fr}.w2-progress{grid-column:1;grid-row:auto}.w2-progress .progress-list{display:grid;grid-template-columns:repeat(5,1fr)}.w2-progress>div{justify-content:center}.data-threat{width:42%;left:calc(4% + var(--lane) * 48%)}}
@media(max-width:720px){.week2-view{padding:8px}.w2-hud{grid-template-columns:1fr}.battlefield{min-height:540px}.data-threat{width:90%;left:5%;min-width:0}.w2-controls{grid-template-columns:1fr 1fr}.w2-submission form{grid-template-columns:1fr}.w2-metrics{overflow:auto}.w2-progress .progress-list{grid-template-columns:1fr}}

.battlefield.laser-hit:after{height:var(--laser-height,70%)}
@keyframes laser{0%{opacity:1;transform:rotate(var(--laser-angle,0deg)) scaleY(0)}60%{opacity:1;transform:rotate(var(--laser-angle,0deg)) scaleY(1)}100%{opacity:0;transform:rotate(var(--laser-angle,0deg)) scaleY(1)}}

/* Week 2 service-queue theme */
.energy-summary{display:grid;gap:3px}.energy-summary strong{letter-spacing:.08em;color:#8eeaff}.energy-summary span{font-size:.72rem;color:#aebfd3}.service-room{position:relative;min-height:540px;display:grid;grid-template-columns:190px minmax(420px,1fr) 250px;gap:24px;align-items:center;padding:34px;border:1px solid #32577e;border-radius:16px;background:linear-gradient(180deg,#102b48,#081727);box-shadow:inset 0 0 55px #02101f,0 10px 32px #0006;overflow:hidden}.service-room:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 78%,#194366 79%,#102b43 100%),repeating-linear-gradient(90deg,transparent 0 49px,#65cfff0a 50px);pointer-events:none}.robot-station,.question-station,.customer-line{position:relative;z-index:2}.robot-station{align-self:end;display:grid;justify-items:center;padding-bottom:26px}.robot-energy{display:flex;justify-content:center;gap:1px;min-height:32px;font-size:1.35rem;filter:drop-shadow(0 0 5px #42f5a7)}.robot-station>strong{margin-bottom:8px;font-size:.72rem;color:#aefbd3}.robot-emoji{font-size:5rem;line-height:1}.robot-label{margin-top:7px;padding:4px 8px;border-radius:5px;background:#0d5878;color:#dff9ff;font-size:.66rem;font-weight:900;letter-spacing:.08em}.question-station{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:end;gap:10px}.active-npc{position:relative;display:grid;justify-items:center;align-self:end;padding-bottom:20px}.customer-head{position:relative;z-index:2;font-size:3.6rem;line-height:.9}.customer-shirt{display:block;width:54px;height:38px;margin-top:-10px;border:3px solid #d8e8f5;border-radius:12px 12px 6px 6px;background:#52677c;box-shadow:0 5px 10px #0005}.category-memory .customer-shirt{background:#15945e}.category-type .customer-shirt{background:#8650ce}.category-result .customer-shirt{background:#267ccd}.npc-speech{position:relative;min-height:360px;padding:22px 26px;color:#17243b;background:#fff;border:4px solid #9bdcff;border-radius:24px;box-shadow:0 12px 30px #0005,0 0 20px #49c9ff33}.npc-speech:before{content:"";position:absolute;left:-25px;bottom:48px;border-width:16px 25px 16px 0;border-style:solid;border-color:transparent #9bdcff transparent transparent}.npc-speech:after{content:"";position:absolute;left:-17px;bottom:52px;border-width:12px 19px 12px 0;border-style:solid;border-color:transparent #fff transparent transparent}.npc-speech header{display:flex;justify-content:space-between;align-items:center;gap:10px}.question-category{padding:5px 9px;border-radius:6px;background:#203853;color:#fff;font-size:.74rem;font-weight:900;letter-spacing:.08em}.npc-speech pre{margin:16px 0;padding:18px;min-height:145px;overflow:auto;border-radius:10px;background:#071522;color:#dff6ff;font:700 1.05rem/1.5 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap}.npc-speech h3{margin:14px 0 5px;font-size:1.25rem}.npc-speech p{margin:0;color:#52657d}.question-input-values{padding:8px 11px;border-radius:7px;background:#fff2bd;color:#704c00;font:700 .85rem ui-monospace,monospace}.customer-line{align-self:stretch;display:flex;flex-direction:column;padding:18px;border-left:2px dashed #5782a7;background:#091b2db8}.customer-line h3,.customer-line p{margin:0 0 5px}.customer-line p{font-size:.7rem;color:#a9bed3}.queue-list{display:flex;flex-direction:column;justify-content:flex-end;gap:9px;flex:1}.queue-customer{position:relative;display:grid;grid-template-columns:28px 44px 1fr;grid-template-rows:30px 24px;align-items:end;padding:7px;border:1px solid #43698c;border-radius:9px;background:#102c47;transition:transform .25s,background .25s}.queue-customer.current{transform:translateX(-13px);background:#174162;box-shadow:0 0 0 2px #fff}.queue-customer .customer-number{grid-row:1/3;align-self:center;font-weight:900;color:#9fc7e8}.queue-customer .customer-head{grid-column:2;font-size:2rem}.queue-customer .customer-shirt{grid-column:2;width:32px;height:21px;margin-top:-4px;border-width:2px}.queue-customer strong{grid-column:3;grid-row:1/3;align-self:center;font-size:.7rem}.service-room .w2-feedback{bottom:18px;left:50%;max-width:55%;font-size:.88rem}.w2-feedback.correct{background:#16794a;color:#fff}.service-success .npc-speech{animation:service-success .5s}.robot-damage{animation:robot-damage .55s}.energy-empty{filter:grayscale(.2);opacity:.85}.w2-overlay{z-index:10}@keyframes service-success{50%{transform:translateY(-5px);box-shadow:0 0 35px #44f3a3}}@keyframes robot-damage{20%,60%{transform:translateX(-9px);filter:brightness(1.8) hue-rotate(300deg)}40%,80%{transform:translateX(9px)}}
@media(max-width:1100px){.service-room{grid-template-columns:150px minmax(380px,1fr) 200px;padding:22px;gap:14px}.npc-speech{padding:18px}.robot-emoji{font-size:4.2rem}.customer-line{padding:12px}}
@media(max-width:760px){.service-room{grid-template-columns:1fr;min-height:0;padding:15px}.robot-station{order:2;align-self:auto;padding:0}.question-station{order:1;grid-template-columns:64px 1fr}.customer-line{order:3;min-height:230px;border-left:0;border-top:2px dashed #5782a7}.npc-speech{min-height:330px}.npc-speech pre{font-size:.86rem}.robot-energy{font-size:1.1rem}.queue-list{display:grid;grid-template-columns:repeat(2,1fr)}.queue-customer.current{transform:none}.service-room .w2-feedback{position:fixed;bottom:12px;max-width:90%}}

/* Week 2 · Python Repair Shop arcade layer */
.arcade-scoreboard{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.arcade-scoreboard span{display:grid;padding:7px 9px;border:1px solid #31547c;border-radius:8px;background:#071523;color:#9ab1ce;font-size:.62rem}.arcade-scoreboard strong{color:#fff;font-size:1.05rem}.shop-sign{position:absolute;z-index:3;top:10px;left:24px;display:flex;gap:14px;align-items:center;color:#dff8ff}.shop-sign span{color:#ffd86a;font-size:.72rem}.shop-equipment{position:absolute;z-index:3;top:10px;right:24px;display:flex;gap:6px}.shop-equipment span{padding:5px 7px;border:1px solid #4e779d;border-radius:6px;background:#0a1c2f;color:#bfeaff;font-size:.58rem;font-weight:900}.service-room[data-day="5"]{background:linear-gradient(180deg,#29345d,#0b1d32)}.service-room[data-day="5"] .shop-sign strong{color:#ffe47d}.repair-device{position:absolute;top:58px;right:25px;font-size:1.55rem;filter:drop-shadow(0 0 6px #69dfff)}.service-timer{position:relative;min-width:150px;padding:6px 9px;overflow:hidden;border-radius:6px;background:#dde8f2;color:#27435d;font-size:.68rem;font-weight:900;text-align:center}.service-timer:before{content:"";position:absolute;z-index:0;inset:auto 0 0;width:var(--timer-progress,100%);height:3px;background:#20bd76}.service-timer.vip{background:#fff0b8;color:#744b00}.service-timer.vip:before{background:#e7a500}.service-timer.normal{background:#e7edf2;color:#566575}.customer-reaction{position:absolute;z-index:7;top:62px;left:24px;max-width:180px;padding:5px 8px;border-radius:7px;background:#071523cc;font-size:.72rem;font-weight:900}.w2-overlay-summary{white-space:pre-line}.w2-overlay p{white-space:pre-line;line-height:1.65}.overlay-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}.overlay-actions .button{text-decoration:none}.service-success .robot-emoji{animation:repair-robot .65s ease}.service-success .repair-device{animation:repair-device .65s ease}.vip-arrival .vip-customer{animation:vip-cut .5s ease}.overdrive{box-shadow:inset 0 0 55px #102d5f,0 0 24px #50e6ff66}.overdrive .robot-emoji{filter:drop-shadow(0 0 10px #79f5ff)}.overdrive .shop-equipment span{box-shadow:0 0 8px #5aeaff88}.w2-feedback{pointer-events:none}.queue-list{overflow:hidden}.queue-customer{flex-shrink:0}
@keyframes repair-robot{35%{transform:rotate(-8deg) scale(1.08)}70%{transform:rotate(7deg)}}
@keyframes repair-device{40%{transform:scale(1.35);filter:brightness(2) drop-shadow(0 0 12px #57ffad)}}
@keyframes vip-cut{0%{transform:translateX(180px) scale(.7)}70%{transform:translateX(-8px) scale(1.08)}100%{transform:none}}
@media(max-width:1100px){.shop-equipment{position:static;grid-column:1/-1;justify-content:center;margin-top:8px}.service-room{padding-top:55px}.arcade-scoreboard{grid-template-columns:1fr}.customer-reaction{top:42px}}
@media(max-width:760px){.shop-sign{position:static;grid-column:1;justify-content:center;flex-wrap:wrap}.service-room{padding-top:15px}.shop-equipment{grid-column:1}.question-station{position:relative}.npc-speech header{flex-wrap:wrap}.service-timer{order:3;width:100%}.customer-reaction{position:static;grid-column:1;text-align:center;max-width:none}}

/* Week 2 · compact Python Repair Shop layout */
.week2-view{padding:10px 14px;background:radial-gradient(circle at 40% 20%,#3d3540 0,#1e2733 48%,#101722 100%)}
.w2-shell{max-width:1480px;grid-template-columns:minmax(0,1fr) 210px;gap:10px}
.w2-hud{grid-column:1/-1;display:grid;grid-template-columns:minmax(245px,1.8fr) repeat(2,minmax(100px,.65fr)) minmax(190px,1.25fr) minmax(170px,1fr);gap:8px;padding:9px 12px;border-color:#5a4a3b;background:#171d27;box-shadow:0 5px 18px #0005}
.hud-brand{min-width:0}.hud-brand h2{font-size:1.05rem;letter-spacing:.04em}.hud-brand>span:not(.w2-completed){color:#d8b88b;font-size:.66rem}.hud-brand .eyebrow{color:#ffcf79}.hud-card{display:grid;place-content:center;min-width:0;padding:7px 10px;text-align:center;border:1px solid #4a5564;border-radius:9px;background:#222b38}.hud-card small{color:#aeb9c8;font-size:.58rem;letter-spacing:.11em}.hud-card>strong{color:#fff;font-size:1.15rem;line-height:1.2}.hud-speed>strong{font-size:.72rem;color:#ffd96b}.hud-hp .robot-energy{min-height:0;font-size:1.15rem}.hud-hp>strong{font-size:.58rem;color:#b8c6d8}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.service-room{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(190px,3fr);align-items:stretch;gap:12px;height:clamp(470px,calc(100vh - 245px),620px);min-height:470px;padding:12px;border-color:#665342;background:linear-gradient(180deg,#2b3038 0 76%,#684d34 76% 79%,#3e3025 79%);box-shadow:inset 0 0 45px #090d13,0 8px 24px #0007}
.service-room[data-day="5"]{background:linear-gradient(180deg,#2b3038 0 76%,#684d34 76% 79%,#3e3025 79%)}
.service-room:before{background:linear-gradient(90deg,#ffffff05,#0000 45%),repeating-linear-gradient(90deg,transparent 0 89px,#e5c2930a 90px)}
.current-service{position:relative;z-index:2;display:grid;grid-template-rows:auto minmax(0,1fr) 72px;gap:8px;min-width:0}
.current-customer-header{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:9px;min-height:48px;padding:6px 10px;border:1px solid #596270;border-radius:10px;background:#151d27}.current-customer-header>div:nth-child(2){display:grid;gap:2px}.current-customer-header small{color:#aebac8}.customer-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#394655;font-size:1.8rem}.normal-service-clock{justify-self:end;display:grid;grid-template-columns:auto 140px;align-items:center;gap:8px;color:#ffd86e;font-size:.72rem}.service-timer{min-width:0;padding:6px 8px;background:#364454;color:#fff}.service-timer:before{height:4px}.question-layout{display:grid;min-height:0}.question-card{position:relative;min-width:0;overflow:auto;padding:13px 17px;border:3px solid #b8c4cb;border-radius:13px;background:#fff8e9;color:#202936;box-shadow:0 8px 18px #0005}.question-card>header{display:flex;align-items:center;gap:8px;color:#5b6470;font-size:.62rem;font-weight:900;letter-spacing:.08em}.question-card>header .question-category{margin-left:auto}.question-card pre{margin:10px 0;padding:15px;min-height:125px;max-height:190px;overflow:auto;border-radius:8px;background:#151c26;color:#f3f8ff;font:700 clamp(.9rem,1.15vw,1.12rem)/1.55 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap}.question-card h3{margin:9px 0 4px;font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.4}.question-card p{margin:0;color:#596879;font-size:.72rem}.customer-device{position:absolute;top:44px;right:27px;font-size:1.2rem}.question-input-values{display:inline-block;padding:6px 9px;border-radius:6px;background:#ffecae;color:#624900;font:.72rem ui-monospace,monospace}.question-input-values[hidden]{display:none}.question-layout.vip-active{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}.question-layout.vip-active .normal-question-card{border-color:#7f8994}.normal-question-card.secondary{filter:saturate(.72);box-shadow:none}.vip-event{display:grid;grid-template-rows:auto minmax(0,1fr);gap:5px;min-width:0}.vip-event[hidden]{display:none}.vip-event-banner{padding:5px 8px;border-radius:7px;background:#5b4215;color:#ffe7a1;font-size:.68rem;font-weight:900}.vip-event-banner small{display:block;color:#fff0c6;font-weight:500}.vip-question-card{border-color:#e7b83e;background:#fff8dd}.vip-question-card pre{min-height:100px;max-height:155px}.vip-avatar{position:absolute;right:18px;top:42px;font-size:1.25rem}.vip-badge{border:1px solid #d69e17}.shop-mascot{align-self:end;display:flex;align-items:end;justify-content:center;min-height:70px}.robot-visual{position:relative;z-index:2;margin-right:-28px;margin-bottom:17px;font-size:3.4rem;line-height:1;filter:drop-shadow(0 4px 3px #0007)}.workbench-visual{display:flex;align-items:center;justify-content:center;gap:8px;width:min(420px,75%);height:54px;border:3px solid #8a6546;border-radius:8px 8px 4px 4px;background:linear-gradient(#c18c59 0 20%,#795335 21%);box-shadow:0 8px 12px #0005;color:#fff0d3;font-size:.62rem;letter-spacing:.08em}.customer-line{position:relative;z-index:2;align-self:stretch;min-width:0;padding:12px;border:1px solid #536171;border-radius:10px;background:#161f2a}.customer-line h3{font-size:.88rem}.customer-line p{color:#9baabc}.queue-list{display:flex;flex-direction:column;justify-content:flex-start;gap:7px;margin-top:8px}.queue-customer{display:grid;grid-template-columns:25px 38px 1fr;grid-template-rows:25px 18px;padding:6px;background:#273342}.queue-customer .customer-number{grid-row:1/3}.queue-customer .customer-avatar{grid-column:2;width:30px;height:30px;font-size:1.25rem}.queue-customer .customer-shirt{grid-column:2;width:27px;height:15px;border-width:1px}.queue-customer strong{grid-column:3;grid-row:1/3;font-size:.65rem}.customer-reaction{top:auto;bottom:82px;left:14px;max-width:240px}.service-room .w2-feedback{bottom:82px;left:50%;max-width:62%}.w2-controls{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:end;padding:8px 10px;border-color:#5c4c3f;background:#191f29}.w2-controls label{grid-template-columns:auto minmax(220px,1fr) auto;align-items:center;gap:8px}.w2-controls label>strong{font-size:.72rem}.w2-controls label>small{color:#94a3b5;font-size:.58rem}.w2-controls input{min-width:0;padding:10px 12px;background:#fffaf0;color:#202936;border-color:#bc8e54}.w2-controls .button{padding:10px 15px}.w2-progress{grid-row:2/4}.w2-overlay{inset:12% 13%;background:#171e29f5}.answer-success input{animation:answer-ok .55s}.answer-error input{animation:answer-bad .55s}.question-error{animation:question-shake .5s}.service-success .robot-visual{animation:repair-robot .55s}.overdrive{box-shadow:inset 0 0 45px #102d5f,0 0 20px #54dfff66}.overdrive+.w2-controls,.overdrive~.w2-controls{border-color:#59ddec}.overdrive .question-card{box-shadow:0 8px 18px #0005}.vip-arrival .vip-event{animation:vip-cut .45s ease}
@keyframes answer-ok{50%{background:#d7ffe8;border-color:#23b86c;box-shadow:0 0 0 3px #23b86c55}}@keyframes answer-bad{20%,60%{transform:translateX(-4px);background:#ffe3e3;border-color:#d24b55}40%,80%{transform:translateX(4px)}}@keyframes question-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@media(max-width:1100px){.w2-shell{grid-template-columns:1fr}.w2-hud{grid-template-columns:minmax(220px,1.6fr) repeat(2,1fr) minmax(170px,1.2fr) minmax(155px,1fr)}.service-room{height:auto;min-height:520px}.w2-progress{grid-column:1;grid-row:auto}.w2-progress .progress-list{display:grid;grid-template-columns:repeat(5,1fr)}.w2-progress>div{justify-content:center}}
@media(max-width:760px){.week2-view{padding:7px}.w2-hud{grid-template-columns:1fr 1fr}.hud-brand{grid-column:1/-1}.hud-speed{grid-column:1/-1}.service-room{grid-template-columns:1fr;min-height:0;height:auto}.current-service{grid-template-rows:auto auto 65px}.current-customer-header{grid-template-columns:auto 1fr}.normal-service-clock{grid-column:1/-1;justify-self:stretch;grid-template-columns:1fr 130px}.question-layout.vip-active{grid-template-columns:1fr}.normal-question-card.secondary{max-height:260px}.customer-line{min-height:180px}.queue-list{display:grid;grid-template-columns:repeat(2,1fr)}.w2-controls{grid-template-columns:1fr auto}.w2-controls label{grid-column:1/-1;grid-template-columns:1fr}.w2-controls label>small{display:none}.w2-controls input{font-size:1rem}.w2-controls .fire-button{grid-column:2}.robot-visual{font-size:2.8rem}.question-card pre{font-size:.92rem;max-height:none}.service-room .w2-feedback{position:fixed;bottom:10px;max-width:92%}}
.current-customer-header .active-npc{align-self:auto;justify-items:center;padding:0}
.shop-mascot{min-height:112px}.robot-visual{width:min(520px,82%);margin:0;line-height:0}.robot-visual img{display:block;width:100%;height:112px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 5px #0008)}.workbench-visual{display:none}.service-result{position:absolute;z-index:9;top:50%;left:35%;display:grid;justify-items:center;gap:4px;min-width:240px;padding:18px 24px;border:3px solid #fff;border-radius:15px;background:#17202df2;color:#fff;box-shadow:0 12px 35px #0009;transform:translate(-50%,-50%);text-align:center}.service-result[hidden]{display:none}.service-result strong{font-size:1.25rem}.service-result span{font-size:1.7rem;font-weight:950}.service-result small{color:#c5d0dd}.service-result.success{border-color:#59e49a}.service-result.success span{color:#79f0ad}.service-result.failed{border-color:#ff7180}.service-result.failed span{color:#ff9aa4}
@media(max-width:760px){.robot-visual{width:min(430px,95%)}.service-result{position:fixed;top:50%;left:50%;min-width:min(280px,82vw)}}

/* Week 2 · large sprite, queue-selected customer, category-colored question card */
.current-service{grid-template-rows:minmax(0,1fr) 250px}
.shop-mascot{min-height:250px;overflow:visible}.robot-visual{width:min(600px,96%);max-width:none}.robot-visual img{width:100%;height:330px;object-fit:contain;object-position:center bottom}
.normal-question-card>header{display:grid;grid-template-columns:auto minmax(130px,1fr) 145px auto;align-items:center}.normal-question-card>header .question-category{margin-left:0;justify-self:start}.normal-question-card>header>[data-w2="serviceLabel"]{justify-self:end;color:#5e4a12;font-size:.7rem}.normal-question-card>header>[data-w2="customerProgress"]{color:#65717e}
.normal-question-card.category-memory{border-color:#36a86e;background:#eefaf2;color:#183c29}.normal-question-card.category-type{border-color:#9462cf;background:#f6efff;color:#35204f}.normal-question-card.category-result{border-color:#3d8ed8;background:#edf7ff;color:#163b5e}
.normal-question-card.category-memory>header{border-bottom:2px solid #a9dfc0}.normal-question-card.category-type>header{border-bottom:2px solid #d9c1f3}.normal-question-card.category-result>header{border-bottom:2px solid #b8dcf6}.normal-question-card>header{padding-bottom:7px}
.queue-customer.current{transform:translateX(-8px);border-color:#fff;background:#40546a;box-shadow:0 0 0 2px #ffd670,0 5px 12px #0005}.queue-customer.current:after{content:"กำลังให้บริการ";position:absolute;right:5px;bottom:3px;color:#ffe39b;font-size:.5rem;font-weight:900}
@media(max-width:1100px){.current-service{grid-template-rows:minmax(0,1fr) 220px}.shop-mascot{min-height:220px}.robot-visual img{height:290px}}
@media(max-width:760px){.current-service{grid-template-rows:auto 190px}.shop-mascot{min-height:190px}.robot-visual{width:min(520px,100%)}.robot-visual img{height:240px}.normal-question-card>header{grid-template-columns:auto 1fr}.normal-question-card>header>[data-w2="serviceLabel"]{justify-self:start}.normal-question-card>header .service-timer{width:auto;order:0}.normal-question-card>header>[data-w2="customerProgress"]{justify-self:end}}

/* Week 2 · illustrated customer ticket queue */
.customer-line{padding:11px;background:#E8D9C2;border:3px solid #6e5b45;color:#2f3027;box-shadow:inset 0 0 0 2px #f8efdf,0 8px 18px #0005}.customer-line h3{margin:0;color:#3f4434;font-size:1rem}.customer-line p{margin:2px 0 8px;color:#766852;font-weight:700}.customer-line>[data-w2="queueEmpty"]{color:#766852}.queue-list{gap:8px;margin-top:4px;overflow-y:auto;padding:2px 3px 5px}.queue-customer{--ticket-accent:#5B763F;position:relative;display:grid;grid-template-columns:40% 60%;grid-template-rows:1fr;aspect-ratio:3.3/1;min-height:0;padding:0;overflow:hidden;border:2px solid #4b4a3e;border-radius:11px;background:linear-gradient(100deg,#fff8e9,#ead9bc);color:#282b23;box-shadow:0 3px 7px #5d4b363d;transform:none;transition:transform .2s,box-shadow .2s,border-color .2s}.queue-customer.category-memory{--ticket-accent:#5B763F;background:linear-gradient(100deg,#f8efdf,#E8D9C2);color:#26351d}.queue-customer.category-result{--ticket-accent:#374E79;background:linear-gradient(100deg,#f8efdf,#E8D9C2);color:#263655}.queue-customer.category-type{--ticket-accent:#6B4C84;background:linear-gradient(100deg,#f8efdf,#E8D9C2);color:#49345a}.queue-customer-sprite{grid-column:1;grid-row:1;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;border-radius:0;background:var(--ticket-accent);font-size:clamp(1.8rem,3.2vw,3.2rem)}.queue-customer-sprite:after{content:"";position:absolute;inset:0 60% 0 0;background:linear-gradient(130deg,#ffffff24,transparent 55%);pointer-events:none}.queue-customer-sprite>span{filter:drop-shadow(0 2px 1px #0005)}.queue-customer-sprite img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}.queue-customer-info{grid-column:2;grid-row:1;display:grid;align-content:center;gap:4px;min-width:0;padding:8px 34px 8px 13px}.queue-customer-info strong{overflow:hidden;color:var(--ticket-accent);font-size:clamp(.7rem,1vw,.94rem);font-weight:950;white-space:nowrap;text-overflow:ellipsis}.queue-customer-info span{color:#3d392f;font-size:clamp(.62rem,.9vw,.82rem);font-weight:800}.queue-job-icon{position:absolute;right:8px;bottom:7px;font-size:clamp(1rem,1.6vw,1.45rem);filter:drop-shadow(0 1px 1px #fff)}.queue-customer.current{transform:translateX(-5px) scale(1.015);border-color:var(--ticket-accent);background:#fff8e9;box-shadow:0 0 0 3px color-mix(in srgb,var(--ticket-accent) 45%,transparent),0 6px 12px #58452f55}.queue-customer.current:after{content:none}.queue-customer.current .queue-customer-info span{color:var(--ticket-accent)}
@media(max-width:760px){.customer-line{max-height:390px}.customer-line .queue-list{display:grid;grid-template-columns:1fr}.queue-customer{min-height:74px}.queue-customer-sprite{font-size:2.5rem}}

/* Week 2 · simplified HUD, in-shop energy, and customer PNG sprites */
.w2-hud{grid-template-columns:minmax(220px,2fr) minmax(110px,.7fr) minmax(110px,.7fr)}.hud-brand{display:grid;align-content:center;gap:2px}.hud-brand>span:not(.w2-completed){font-size:.82rem;font-weight:900}.queue-customer-sprite img{width:100%;height:100%;object-fit:cover;object-position:center 30%}.vip-avatar{top:38px;right:14px;width:54px;height:70px;overflow:hidden;border:2px solid #d6a832;border-radius:8px;background:#241b0b}.vip-avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 28%}.shop-energy{position:absolute;z-index:7;left:14px;bottom:14px;display:grid;gap:3px;padding:7px 10px;border:2px solid #8c7658;border-radius:10px;background:#1a2029e8;box-shadow:0 4px 12px #0007;color:#f5e8d4}.shop-energy strong{font-size:.65rem;letter-spacing:.06em}.shop-energy .robot-energy{min-height:0;justify-content:flex-start;font-size:1.25rem}
@media(max-width:1100px){.w2-hud{grid-template-columns:minmax(220px,2fr) repeat(2,minmax(105px,.7fr))}}
@media(max-width:760px){.w2-hud{grid-template-columns:1fr 1fr}.hud-brand{grid-column:1/-1}.shop-energy{left:9px;bottom:9px}.shop-energy .robot-energy{font-size:1.05rem}.vip-avatar{width:44px;height:58px}}

/* Queue card conflict reset: isolate the ticket layout from legacy queue styles. */
.customer-line .queue-list>.queue-customer{position:relative;display:grid;grid-template-columns:40% minmax(0,60%);grid-template-rows:minmax(0,1fr);align-items:stretch;width:100%;padding:0;overflow:hidden}
.customer-line .queue-customer>.queue-customer-sprite{position:relative;grid-column:1;grid-row:1;align-self:stretch;width:100%;height:100%;min-width:0;margin:0;border:0;border-radius:0;background:var(--ticket-accent)}
.customer-line .queue-customer>.queue-customer-sprite img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 24%}
.customer-line .queue-customer>.queue-customer-info{grid-column:2;grid-row:1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;min-width:0;padding:10px 38px 10px 14px;text-align:left}
.customer-line .queue-customer>.queue-customer-info strong{display:block;grid-column:auto;grid-row:auto;align-self:auto;width:100%;margin:0;overflow:hidden;color:var(--ticket-accent);font-size:clamp(.72rem,1.05vw,.96rem);font-weight:950;line-height:1.15;white-space:nowrap;text-overflow:ellipsis}
.customer-line .queue-customer>.queue-customer-info span{display:block;margin:0;color:#3d392f;font-size:clamp(.62rem,.9vw,.82rem);font-weight:800;line-height:1.2;white-space:nowrap}
.customer-line .queue-customer>.queue-job-icon{position:absolute;right:9px;bottom:8px;display:block;font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1}

/* Show more of each customer portrait; present the VIP as a large unframed sprite. */
.customer-line .queue-customer>.queue-customer-sprite img{width:66.666%;height:100%;margin:0 auto;object-fit:contain;object-position:center bottom;transform:none}
.vip-question-card{overflow:visible;padding-right:132px}.vip-avatar{z-index:2;top:24px;right:-8px;width:162px;height:210px;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:none}.vip-avatar img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 6px 6px #5b3c0955)}
@media(max-width:760px){.vip-question-card{padding-right:105px}.vip-avatar{top:30px;right:-5px;width:120px;height:165px}}
.w2-overlay .overlay-close{position:absolute;top:10px;right:12px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #718097;border-radius:50%;background:#273343;color:#fff;font:800 1.35rem/1 sans-serif;cursor:pointer}.w2-overlay .overlay-close:hover,.w2-overlay .overlay-close:focus-visible{background:#b53e4d;border-color:#ff8b98;outline:3px solid #ffffff44}
.question-card pre .target-variable{display:inline;padding:0;border:0;background:transparent;color:#d4a72c;font:inherit;font-weight:900;box-shadow:none}

/* Keep the shop and normal question card identical across Days 1–5. */
.service-room{height:clamp(470px,calc(100vh - 245px),620px);max-height:620px;min-height:470px}.service-room>.current-service,.service-room>.customer-line{height:100%;min-height:0}.current-service{overflow:visible}.question-layout{height:100%;min-height:0;overflow:visible}.normal-question-card{height:100%;min-height:0;max-height:100%;box-sizing:border-box;overflow:auto}.customer-line{min-height:0;overflow:hidden}.customer-line .queue-list{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;align-content:start}.customer-line .queue-list>.queue-customer{flex:0 0 auto}
@media(max-width:1100px){.service-room{height:560px;max-height:560px;min-height:560px}}
@media(max-width:760px){.service-room{height:auto;max-height:none;min-height:0}.service-room>.current-service,.service-room>.customer-line{height:auto}.normal-question-card{height:auto;max-height:none}.customer-line{max-height:390px;overflow:hidden}}