* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b2735; color: #fff;
  /* Be Vietnam Pro (web font) renders Vietnamese diacritics correctly. Japanese and Devanagari are NOT web fonts
     (about 700 KB): they fall back to the device fonts - Hiragino / Kohinoor (iOS, macOS), Noto Sans CJK JP /
     Noto Sans Devanagari (Android), Yu Gothic UI / Meiryo / Nirmala UI (Windows). */
  /* Japanese fonts come before system-ui so kanji keep Japanese shapes when the UI language is not Japanese. */
  font-family: "Be Vietnam Pro", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo,
    "Noto Sans CJK JP", "Noto Sans JP", system-ui, -apple-system, "Noto Sans Devanagari", "Kohinoor Devanagari",
    "Nirmala UI", sans-serif;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; overscroll-behavior: none; }
button, input { font-family: inherit; }
/* WebKit (every iPhone browser) ignores user-scalable=no and restarts touch-action at each scroll area: a double tap
   or pinch there zoomed the page, and the canvas could not pinch back out. So: no double-tap zoom anywhere, scroll
   areas only scroll, the canvas and joystick take every gesture (pinch is also cancelled in game-input-bindings.js). */
body * { touch-action: manipulation; }
#screen-guide, .screen, .sop-strip, .feedback { touch-action: pan-x pan-y; }
canvas { display: block; touch-action: none; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
.hud-top { position: fixed; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; align-items: stretch; z-index: 5; }
/* One bar for all numbers: icon + value (+ small label on wide screens). */
.stats { display: flex; align-items: center; gap: 16px; padding: 6px 14px; border-radius: 12px;
  background: rgba(14, 30, 56, 0.82); border: 1px solid rgba(255,255,255,0.15); }
.stat { display: flex; align-items: baseline; gap: 5px; font-size: 15px; white-space: nowrap; }
.stat b { font-size: 18px; color: #ffd84d; }
.stat b.danger { color: #ff5a5a; }
.stat small { font-size: 11px; opacity: 0.65; }
.pill { background: rgba(14, 30, 56, 0.82); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px;
  padding: 6px 12px; font-size: 14px; display: flex; align-items: center; gap: 4px; }
.btn { cursor: pointer; color: #fff; font: inherit; }
.btn:hover { background: rgba(25, 80, 170, 0.9); }
#btn-hint.active { background: rgba(0, 150, 200, 0.85); }
.pause-btn { margin-left: auto; background: #1565d8; font-size: 18px; }

.hud-guides { position: fixed; left: 0; right: 0; bottom: 44px; z-index: 6; display: flex; flex-direction: column;
  align-items: center; gap: 6px; pointer-events: none; }
.hud-guides > * { max-width: min(640px, 92vw); text-align: center; }
/* Desktop: the hint sits at the top centre; on phones it joins the bottom column (see below). */
.hint-banner { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); max-width: 56vw;
  background: rgba(0, 150, 200, 0.9); padding: 6px 16px; border-radius: 10px; font-size: 15px; }

.box-card { position: fixed; top: 60px; left: 10px; width: 250px; z-index: 5; background: rgba(14, 30, 56, 0.88);
  border-radius: 12px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.15); }
.card-title { font-size: 16px; font-weight: bold; display: flex; justify-content: space-between; gap: 8px; }
.card-weight { font-size: 13px; opacity: 0.75; white-space: nowrap; }
.card-row { font-size: 13px; opacity: 0.9; margin-top: 6px; }
.card-tags { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; }
.tag { font-size: 12px; padding: 2px 8px; border-radius: 6px; font-weight: bold; }
.tag.heavy { background: #6d4c41; }
.tag.fragile { background: #c62828; }
.tag.soft { background: #5c7fa8; }
.tag.up { background: #263238; border: 1px solid #fff; }
.card-status { margin-top: 6px; }
.status-line { font-size: 14px; font-weight: bold; padding: 4px 8px; border-radius: 6px; }
.status-line.perfect, .status-line.ok { background: rgba(52, 199, 89, 0.3); }
.status-line.warn { background: rgba(255, 176, 32, 0.35); }
.status-line.fail { background: rgba(255, 59, 48, 0.4); }
.issue { font-size: 13px; margin-top: 4px; }
.issue.warn { color: #ffcf6b; }
.issue.fail { color: #ff8a80; }

.prompt { background: rgba(255,255,255,0.95); color: #0d2a55; font-weight: bold; padding: 8px 18px;
  border-radius: 12px; font-size: 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.3); }

.toast { display: flex; gap: 10px; text-align: left;
  align-items: center; padding: 10px 18px; border-radius: 14px; font-size: 16px; font-weight: bold;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35); animation: pop 0.25s ease-out; }
.toast.good { background: rgba(30, 140, 70, 0.95); }
.toast.warn { background: rgba(210, 120, 0, 0.95); }
.toast.error { background: rgba(200, 30, 30, 0.95); }
.toast-icon { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #333; display: grid;
  place-items: center; font-size: 20px; flex-shrink: 0; }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } }

.controls-help { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 5; opacity: 0.85;
  background: rgba(14, 30, 56, 0.6); padding: 4px 12px; border-radius: 8px; font-size: 12px; white-space: nowrap; }

/* ---------- Screens ---------- */
.screen { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(10, 40, 90, 0.75), rgba(10, 20, 40, 0.6)); }
.panel { background: rgba(255,255,255,0.97); color: #10294d; border-radius: 20px; padding: 28px 34px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45); max-width: 92vw; }
.start-panel { width: 900px; }
.start-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.start-panel h1 { margin: 0; color: #1565d8; font-size: 28px; line-height: 1.2; }
.subtitle { margin: 4px 0 0; font-size: 15px; color: #4a5d75; }
/* Level guide (read before every level): 3 picture steps, then 4 short boxes.
   It can be taller than the window: the screen scrolls, auto margins keep it centred when it fits. */
#screen-guide { overflow-y: auto; place-items: normal; padding: 16px 0; }
.guide-panel { width: 860px; margin: auto; }
.guide-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.guide-kicker { font-size: 13px; font-weight: bold; color: #4a5d75; display: flex; gap: 6px; }
.guide-panel h1 { margin: 2px 0 0; color: #1565d8; font-size: 24px; line-height: 1.2; }
.guide-steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.step { position: relative; flex: 1; max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #eef4fc; border-radius: 14px; padding: 12px 8px 10px; font-weight: bold; font-size: 15px; text-align: center; }
.step-no { position: absolute; top: 6px; left: 8px; width: 22px; height: 22px; border-radius: 50%; background: #1565d8;
  color: #fff; font-size: 13px; display: grid; place-items: center; }
.step-pic { height: 52px; display: grid; place-items: center; font-size: 40px; line-height: 1; }
.step-arrow { font-size: 26px; font-weight: bold; color: #1565d8; }
.demo-sticker { width: 52px; background: #fff; border: 5px solid #263238; font-size: 24px; color: #263238;
  text-decoration: underline 3px; text-underline-offset: 4px; }
.demo-tag { width: 60px; background: #fbfbf8; border: 2px solid #222; border-top: 7px solid #455a64; font-size: 28px; color: #111; }
.guide-tip { margin: 8px 0 0; text-align: center; font-size: 13px; color: #b25e00; font-weight: bold; }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.guide-box { background: #eef4fc; border-radius: 12px; padding: 8px 14px; min-width: 0; }
.guide-box.goal { background: #e8f6ec; }
.guide-box.score { background: #fdecec; }
.guide-box.rules { background: #fff5e6; }
.guide-box h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.guide-box ul { margin: 6px 0 2px; padding-left: 18px; line-height: 1.55; font-size: 14px; }
.guide-box.score ul { columns: 2; column-gap: 20px; }
.guide-box .minus { color: #c62828; white-space: nowrap; }
.guide-box.goal ul { list-style: none; padding-left: 2px; } /* each line starts with its own emoji */
.guide-box.goal li { word-spacing: 3px; }
.guide-buttons { display: flex; gap: 10px; margin-top: 14px; }
.guide-buttons .big-btn { margin-top: 0; width: auto; }
.guide-buttons .big-btn:first-child { flex: 2; }
.guide-buttons .big-btn.secondary { flex: 1; margin-top: 0; }
/* Site SOP photos: one row that scrolls sideways; a card is as wide as its photo, at least wide enough to read. */
.guide-box.sop { margin-top: 10px; background: #f3effa; }
.sop-strip { display: flex; gap: 10px; overflow-x: auto; padding: 8px 0 6px; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); } /* faded right edge: more photos → */
.sop-strip::after { content: ''; flex: none; width: 26px; } /* lets the last card scroll clear of the fade */
.sop-card { flex: none; width: min-content; min-width: 170px; margin: 0; scroll-snap-align: start; cursor: zoom-in; position: relative; }
.sop-card::after { content: "🔍"; position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, 0.85); font-size: 13px; pointer-events: none; } /* tap to zoom, without words */
.sop-card img { display: block; height: 150px; margin: 0 auto; border-radius: 8px; background: #fff; }
.sop-card figcaption { margin-top: 5px; font-size: 12.5px; line-height: 1.4; }
.sop-tag { display: block; font-size: 11px; color: #5e35b1; }
.sop-zoom { position: fixed; inset: 0; z-index: 30; background: rgba(5, 12, 25, 0.92); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 12px; cursor: zoom-out; }
.sop-zoom img { width: min(96vw, 900px); height: min(76vh, 760px); object-fit: contain; }
.sop-zoom p { margin: 0; max-width: 640px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; line-height: 1.45; }
.sop-zoom .sop-tag { color: #d1c4e9; font-size: 13px; }
.lang-switch { display: flex; gap: 6px; flex-shrink: 0; }
.lang-switch button { border: 1px solid #1565d8; background: #fff; color: #1565d8; border-radius: 8px;
  padding: 4px 10px; cursor: pointer; font: inherit; font-size: 13px; }
.lang-switch button.active { background: #1565d8; color: #fff; }
.big-btn { display: block; width: 100%; margin-top: 16px; padding: 12px; font-size: 19px; font-weight: bold;
  border: none; border-radius: 14px; background: #1565d8; color: #fff; cursor: pointer; font-family: inherit; }
.big-btn:hover { background: #0f4fb0; }
.big-btn.secondary { background: #e3ebf6; color: #10294d; margin-top: 10px; }

.result-panel { width: 820px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: center; }
.result-panel h1 { margin: 0; font-size: 20px; color: #4a5d75; }
.result-side { display: flex; flex-direction: column; text-align: left; min-height: 0; }
.result-buttons { display: flex; gap: 8px; margin-top: 12px; }
.result-buttons .big-btn { margin-top: 0; font-size: 15px; padding: 11px 6px; flex: 1; }
.stars { font-size: 38px; letter-spacing: 4px; color: #c9d3df; }
.stars .on { color: #ffc400; text-shadow: 0 2px 6px rgba(200,140,0,0.4); }
.res-row { display: flex; justify-content: space-between; padding: 6px 4px; border-bottom: 1px solid #e3ebf6; font-size: 15px; }
.res-row b { color: #1565d8; }
.feedback { text-align: left; font-size: 13.5px; flex: 1; max-height: 300px; overflow-y: auto; background: #f6f8fb; border-radius: 10px; padding: 10px 12px; }
.fb-title { font-weight: bold; color: #c62828; margin-bottom: 4px; }
.fb-row { padding: 3px 0; }
.score-big { font-size: 48px; font-weight: bold; letter-spacing: 0; line-height: 1.1; }
.score-big small { font-size: 18px; color: #6b7a8c; }
.score-big.pass { color: #1e8c46; } .score-big.fail { color: #c62828; }
.pass-label { font-size: 15px; font-weight: bold; letter-spacing: 0; margin-bottom: 10px; }
.pass-label.pass { color: #1e8c46; } .pass-label.fail { color: #c62828; }
.fb-pts { float: right; color: #c62828; font-weight: bold; }
.fb-good { color: #1e8c46; font-weight: bold; text-align: center; }

/* ---------- First person & levels ---------- */
.crosshair { position: fixed; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 4;
  pointer-events: none; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: #fff;
  box-shadow: 0 0 3px rgba(0,0,0,0.8); }
.crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }
.crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; }
.crosshair.target::before, .crosshair.target::after { background: #ffd400; }
.pause-panel { width: 420px; text-align: center; }
.level-title { margin: 16px 0 8px; font-size: 17px; }
.level-list { display: flex; flex-direction: column; gap: 10px; }
.level-group-title { font-weight: bold; font-size: 15px; color: #1565d8; margin-bottom: 4px; }
.level-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.level-card { text-align: left; border: 2px solid #1565d8; border-radius: 12px; padding: 8px 12px; background: #fff;
  cursor: pointer; font-family: inherit; color: #10294d; }
.level-card:hover { background: #e8f0fc; }
.level-card .lv-name { font-weight: bold; font-size: 15px; }
.level-card .lv-desc { font-size: 12.5px; margin-top: 2px; color: #4a5d75; }
.level-card .lv-stars { color: #ffc400; font-size: 15px; float: right; margin-left: 6px; }

.version-tag { margin-top: 12px; font-size: 11px; color: #8a98a8; text-align: right; }

/* Level 1 layer-pattern diagram (top view, back of the cart at the top). */
.pattern-guide { position: fixed; top: 60px; right: 10px; z-index: 5; background: rgba(14, 30, 56, 0.88);
  border-radius: 12px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.15); text-align: center; }
.pattern-title { font-size: 14px; font-weight: bold; margin-bottom: 6px; }
.pattern-guide canvas { display: block; width: 140px; height: 112px; margin: 0 auto; border-radius: 4px; }
.pattern-note { font-size: 11px; opacity: 0.8; margin-top: 4px; }

/* ---------- Touch controls (shown only on touch devices) ---------- */
.touch-only { display: none; }
body.touch .touch-only { display: flex; }
body.touch .controls-help { display: none; }
.joystick { position: fixed; left: calc(20px + env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom));
  width: 124px; height: 124px; border-radius: 50%; background: rgba(14, 30, 56, 0.3); border: 2px solid rgba(255,255,255,0.3);
  z-index: 6; align-items: center; justify-content: center; touch-action: none; }
.joystick-knob { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.7); pointer-events: none; }
/* Right thumb: main button, with the 2×2 carry buttons (rotate/tip/best/park) beside it while carrying. */
.touch-actions { position: fixed; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 6; gap: 8px; align-items: flex-end; }
.tb-carry-group { display: grid; grid-template-columns: repeat(2, 54px); gap: 8px; }
.tb { border: none; color: #fff; font-weight: bold; border-radius: 50%; touch-action: manipulation;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3); line-height: 1.1; padding: 0; }
.tb.small { width: 54px; height: 54px; background: rgba(14, 30, 56, 0.7); font-size: 12px; }
.tb.main { width: 88px; height: 88px; background: #1565d8; font-size: 18px; }
.tb.main.disabled { background: rgba(21, 101, 216, 0.4); }
.tb:active { transform: scale(0.94); }

/* ---------- Small screens ---------- */
@media (max-width: 900px), (max-height: 520px) {
  .pattern-guide { top: 44px; right: 6px; padding: 4px 6px; }
  .pattern-guide canvas { width: 100px; height: 80px; }
  .pattern-title { font-size: 11px; margin-bottom: 3px; }
  .pattern-note { display: none; }
  .hud-top { top: 6px; left: 6px; right: 6px; gap: 4px; }
  .stats { gap: 10px; padding: 4px 10px; border-radius: 8px; }
  .stat { font-size: 11px; gap: 3px; }
  .stat b { font-size: 14px; }
  .stat small, .btn-label { display: none; }
  .pill { padding: 4px 9px; font-size: 13px; border-radius: 8px; }
  /* Phones: one text column between the joystick and the action buttons. */
  .hud-guides { left: 160px; right: 240px; bottom: calc(10px + env(safe-area-inset-bottom)); gap: 4px; }
  .hud-guides > * { max-width: 100%; }
  .hint-banner { position: static; transform: none; max-width: 100%; font-size: 12px; padding: 4px 10px; }
  .box-card { top: 40px; width: 180px; padding: 6px 9px; }
  .card-title { font-size: 13px; }
  .card-weight { font-size: 11px; }
  .card-row, .status-line, .issue { font-size: 11px; }
  .card-row, .card-tags, .card-status { margin-top: 4px; }
  .tag { font-size: 10px; padding: 1px 6px; }
  /* Prompt + toasts sit low, between joystick and buttons, so the cart interior stays visible. */
  .prompt { font-size: 13px; padding: 5px 12px; }
  .toast { font-size: 12.5px; padding: 6px 10px; gap: 8px; }
  .toast-icon { width: 24px; height: 24px; font-size: 14px; }
  .screen { overflow-y: auto; align-items: start; padding: 12px 0; }
  .panel { padding: 16px 18px; }
  .start-panel h1 { font-size: 20px; }
  .subtitle { font-size: 12.5px; }
  .guide-panel h1 { font-size: 19px; }
  .guide-steps { margin-top: 8px; gap: 6px; }
  .step { font-size: 12.5px; padding: 8px 6px 6px; gap: 4px; }
  .step-pic { height: 40px; font-size: 30px; }
  .step-no { width: 18px; height: 18px; font-size: 11px; top: 4px; left: 4px; }
  .demo-sticker { width: 40px; font-size: 18px; border-width: 4px; }
  .demo-tag { width: 46px; font-size: 21px; }
  .guide-tip { font-size: 11.5px; margin-top: 6px; }
  .guide-grid { gap: 8px; margin-top: 8px; }
  .guide-box { padding: 6px 10px; }
  .guide-box h3 { font-size: 13px; }
  .guide-box ul { font-size: 12px; line-height: 1.45; }
  .guide-buttons { margin-top: 10px; }
  .guide-box.sop { margin-top: 8px; }
  .sop-card { min-width: 150px; }
  .sop-card img { height: 120px; }
  .sop-card figcaption { font-size: 11.5px; }
  .sop-zoom p { font-size: 14px; }
  .level-title { margin: 10px 0 6px; font-size: 14px; }
  .level-card { padding: 6px 10px; }
  .level-card .lv-name { font-size: 13px; }
  .result-panel { gap: 14px; }
  .stars { font-size: 26px; }
  .score-big { font-size: 34px; }
  .res-row { font-size: 13px; padding: 4px; }
  .feedback { font-size: 12px; max-height: 42vh; padding: 8px 10px; }
  .level-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .level-card .lv-desc { font-size: 11px; }
  .big-btn { font-size: 16px; padding: 9px; }
}
@media (max-width: 560px) {
  .level-row { grid-template-columns: 1fr; }
  .start-head { flex-direction: column-reverse; gap: 8px; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-head { flex-direction: column-reverse; gap: 8px; }
  .step-arrow { font-size: 18px; }
  .result-panel { grid-template-columns: 1fr; }
  /* Portrait phone: card left, hint right, small buttons stacked above the main button. */
  .box-card { top: 84px; width: 180px; }
  .hud-guides { left: 8px; right: 140px; bottom: calc(170px + env(safe-area-inset-bottom)); }
  .touch-actions { flex-direction: column; align-items: center; }

  .joystick { width: 112px; height: 112px; bottom: 30px; }
}

.dispatch-btn { background: #2e7d32; font-weight: bold; }
.level-card.endless { border-color: #7b1fa2; background: #f8f0fc; }
.level-card.manager { border-color: #263238; background: #eceff1; }
.level-card.manager .lv-stars { color: #b8860b; }
.level-card.endless .lv-stars { color: #7b1fa2; font-size: 14px; font-weight: bold; }