/* Một skin duy nhất: Soft Candy theo key art demo. Màu đo từ ảnh demo (xem src/render/skin.js). */
:root {
  --bg: #FEF1DE;
  --fg: #5A2E20;
  --dim: rgba(90, 46, 32, 0.6);
  --card: #FFEACB;
  --card-hi: #FFF6E6;
  --edge: #A87B5E;
  --ink: #6E3424;
  --lip: rgba(168, 123, 94, 0.34);
  --accent: #ED626C;
  --ui-font: "Baloo 2", "Nunito", "Segoe UI", system-ui, sans-serif;
  --bg-img: url("assets/candy/bg.png");
  --btn-text: #5A2E20;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg) var(--bg-img) center / cover no-repeat fixed;
  color: var(--fg);
  font-family: var(--ui-font);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  /* nhấn giữ trên điện thoại / WebView không bôi đen chữ, không bật menu ngữ cảnh */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
  position: relative;
}

.hidden { display: none !important; }

/* ---------- nút: thẻ kem viền nâu, có gờ dưới như demo ---------- */

button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  background: var(--card);
  border: 2px solid var(--edge);
  border-radius: 12px;
  padding: 7px 11px;
  box-shadow: 0 3px 0 var(--lip);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--lip); }
button:disabled { opacity: 0.38; cursor: default; }
button.primary {
  background: linear-gradient(#F2848A, #E25B62);
  border-color: var(--ink); color: #fff; font-weight: 800;
  text-shadow: 0 1px 0 rgba(110, 52, 36, 0.6);
}

/* ---------- thanh trên khi đang chơi ---------- */

#game-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 10px 8px;
  flex: 0 0 auto;
}

#game-chrome .titles { flex: 1 1 auto; min-width: 0; }
#title { font-weight: 800; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#subtitle { font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chrome-actions { display: flex; gap: 6px; flex: 0 0 auto; }

#btn-back { font-size: 20px; line-height: 1; padding: 2px 12px 6px; }
#btn-mode[data-mode="A"] { color: #C9424A; }
#btn-mode[data-mode="B"] { color: #2F8F55; }

#stage { flex: 1 1 auto; width: 100%; display: block; touch-action: none; }

/* ---------- màn hình chính ---------- */

#home { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.home-inner { padding: calc(env(safe-area-inset-top) + 18px) 16px 40px; }

h1 { font-size: 30px; margin: 0 0 6px; color: var(--ink); letter-spacing: 0.3px; }
.lead {
  font-size: 13px; line-height: 1.55; color: var(--fg); margin: 0 0 22px;
  background: var(--card-hi); border: 2px solid var(--edge); border-radius: 14px;
  padding: 12px 14px; box-shadow: 0 3px 0 var(--lip);
}
h3 { font-size: 15px; margin: 22px 0 10px; color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
h3 small { font-weight: 500; font-size: 11px; color: var(--dim); }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-card {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 12px; border-radius: 16px; line-height: 1.4;
}
.mode-card.on { border-color: var(--ink); background: var(--card-hi); box-shadow: 0 3px 0 var(--lip), 0 0 0 3px rgba(237, 98, 108, 0.35); }
.mode-card strong { font-size: 14px; color: var(--ink); }
.mode-card span { font-size: 11px; color: var(--dim); font-weight: 500; }
.mode-card em { font-size: 11px; font-style: normal; color: var(--accent); font-weight: 800; }

.levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.lv {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px; border-radius: 12px; min-height: 56px; justify-content: center;
}
.lv b { font-size: 15px; color: var(--ink); }
.lv i { font-size: 9px; font-style: normal; color: var(--dim); text-align: center; line-height: 1.15; font-weight: 600;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lv.won { background: #E3F4E5; border-color: #3F8E58; }
.lv.won b::after { content: " ✓"; color: #2F8F55; font-size: 11px; }
.lv.hard b { color: #C9424A; }
.lv.locked { opacity: 0.38; }
.lv.chapter-start { outline: 2px dashed rgba(168, 123, 94, 0.5); outline-offset: 2px; }

.foot { margin-top: 26px; font-size: 11px; color: var(--dim); line-height: 1.6; }

.opts { display: flex; gap: 8px; flex-wrap: wrap; }
.opts button { flex: 1 1 auto; padding: 9px 12px; }
.opts button[data-armed="1"] { border-color: #C9424A; color: #C9424A; }

/* ---------- overlay kết quả / cứu vãn ---------- */

#overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(90, 46, 32, 0.45); backdrop-filter: blur(3px);
}
.sheet {
  width: 100%; max-width: 360px; background: var(--card-hi);
  border: 2px solid var(--ink); border-radius: 20px; padding: 18px;
  box-shadow: 0 5px 0 var(--lip), 0 20px 50px rgba(90, 46, 32, 0.35);
}
.sheet h2 { margin: 0 0 10px; font-size: 20px; color: var(--ink); }
.sheet p { font-size: 13px; line-height: 1.55; margin: 0 0 10px; }
.sheet p.big { font-size: 16px; font-weight: 800; color: var(--ink); }
.sheet p.dim { color: var(--dim); }
.kv { list-style: none; margin: 0 0 14px; padding: 0; font-size: 13px; }
.kv li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed rgba(168, 123, 94, 0.5); }
.kv span { color: var(--dim); }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.row button { flex: 1 1 auto; padding: 10px 12px; }

#boot-error {
  position: fixed; inset: auto 16px 16px; z-index: 40;
  background: #FFF0EE; color: #8A2A26; border: 2px solid #C9424A;
  border-radius: 14px; padding: 14px 16px; font-size: 13px; line-height: 1.6;
}
#boot-error code { background: rgba(201, 66, 74, 0.1); padding: 1px 5px; border-radius: 4px; }
#boot-error p { margin: 6px 0 0; }

/* ---------- Neon Arcade (màu đo từ demo) ---------- */
body[data-skin="neon"] {
  --bg: #060C23; --fg: #E8F6FF; --dim: rgba(200, 236, 255, 0.6);
  --card: rgba(8, 22, 46, 0.9); --card-hi: rgba(10, 30, 60, 0.95);
  --edge: #3FE0FF; --ink: #94F6FF; --lip: rgba(63, 224, 255, 0.25);
  --accent: #59E7FF;
  --ui-font: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --bg-img: url("assets/neon/bg.png");
}
body[data-skin="neon"] button { box-shadow: 0 0 10px rgba(63, 224, 255, 0.35); }
body[data-skin="neon"] .lv.won { background: rgba(40, 120, 80, 0.4); border-color: #57D98A; }
body[data-skin="neon"] .lead, body[data-skin="neon"] .sheet { box-shadow: 0 0 14px rgba(63, 224, 255, 0.3); }

/* ---------- Retro Pixel (màu đo từ demo) ---------- */
body[data-skin="retro"] {
  --bg: #14152D; --fg: #F4F1E4; --dim: rgba(244, 241, 228, 0.6);
  --card: #2A2E52; --card-hi: #23264A;
  --edge: #000109; --ink: #F7D046; --lip: #000109;
  --accent: #F7D046;
  --ui-font: "Press Start 2P", "Courier New", monospace;
  --bg-img: url("assets/retro/bg.png");
}
body[data-skin="retro"] button { border-radius: 0; border-width: 3px; font-size: 9px; padding: 8px 9px; box-shadow: 3px 3px 0 #000109; }
body[data-skin="retro"] .lead, body[data-skin="retro"] .sheet,
body[data-skin="retro"] .mode-card, body[data-skin="retro"] .lv { border-radius: 0; }
body[data-skin="retro"] .lead { font-size: 9px; line-height: 1.9; box-shadow: 4px 4px 0 #000109; }
body[data-skin="retro"] h1 { font-size: 18px; }
body[data-skin="retro"] h3 { font-size: 11px; }
body[data-skin="retro"] h3 small, body[data-skin="retro"] .mode-card span, body[data-skin="retro"] .mode-card em { font-size: 8px; line-height: 1.8; }
body[data-skin="retro"] .mode-card strong { font-size: 10px; }
body[data-skin="retro"] .lv b { font-size: 10px; }
body[data-skin="retro"] .lv i { font-size: 6px; line-height: 1.5; }
body[data-skin="retro"] #title { font-size: 10px; }
body[data-skin="retro"] #subtitle { font-size: 7px; }
body[data-skin="retro"] .sheet h2 { font-size: 13px; }
body[data-skin="retro"] .sheet p, body[data-skin="retro"] .kv { font-size: 9px; line-height: 1.8; }
body[data-skin="retro"] .foot { font-size: 8px; line-height: 1.9; }

/* ---------- lớp phủ tutorial cho bước khoét nút HTML (vẽ bằng canvas, xem tutorial.js) ---------- */
#tut-layer {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 25; touch-action: none; cursor: pointer;
}

/* ---------- bảng chọn art style ---------- */
#skin-picker {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px);
}
#skin-picker .sheet { max-width: 380px; }
.skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.skin { display: flex; flex-direction: column; gap: 6px; padding: 6px; align-items: center; }
.skin img { width: 100%; aspect-ratio: 768 / 1376; object-fit: cover; border-radius: 8px; display: block; }
.skin strong { font-size: 11px; }
.skin.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }
body[data-skin="retro"] .skin img { border-radius: 0; image-rendering: pixelated; }
body[data-skin="retro"] .skin strong { font-size: 7px; line-height: 1.6; }