/* The sticker deck, mobile first (M11 spec §7). Fonts are self-hosted: fonts/fonts.css. */
:root {
  --bg: #FBF6EF; --dot: rgba(120, 80, 60, .13); --surface: #FFFFFF;
  --ink: #3B2530; --ink2: #846A73; --die: #FFFFFF; --line: rgba(59, 37, 48, .2);
  --shadow: 0 6px 14px rgba(59, 37, 48, .14); --shc: rgba(59, 37, 48, .14);
  --pink: #F48FB1; --butter: #FFE082; --peach: #FFD3B6; --sticker-text: #3B2530;
  --display: "Jua", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2C2128; --dot: rgba(255, 240, 245, .08); --surface: #3A2D35;
    --ink: #FFF1F4; --ink2: #C9B2BB; --die: #FFF8F0; --line: rgba(255, 241, 244, .25);
    --shadow: 0 6px 16px rgba(0, 0, 0, .4); --shc: rgba(0, 0, 0, .4);
  }
}
/* Jua has no Vietnamese: Baloo 2 sets display text on Vietnamese pages (D81). */
:root:lang(vi) { --display: "Baloo 2", system-ui, sans-serif; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--body); font-weight: 700;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1.3px, transparent 1.6px);
  background-size: 18px 18px;
}
main {
  max-width: 420px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 22px calc(32px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.icon { width: 58px; height: 58px; border-radius: 14px; box-shadow: 0 0 0 3px var(--die), var(--shadow); transform: rotate(-6deg); }
.wordmark {
  font: 40px/1 "Jua", system-ui, sans-serif; color: var(--pink); transform: rotate(-4deg);
  text-shadow: 3px 0 var(--die), -3px 0 var(--die), 0 3px var(--die), 0 -3px var(--die),
    2px 2px var(--die), -2px -2px var(--die), 2px -2px var(--die), -2px 2px var(--die), 0 6px 0 var(--shc);
}
.tagline { margin: 0; color: var(--ink2); font-size: 15px; }
.badge {
  margin: 6px 0; padding: 8px 20px; font: 400 30px/1.2 var(--display); color: var(--sticker-text); background: var(--peach);
  border-radius: 16px; box-shadow: 0 0 0 4px var(--die), var(--shadow); transform: rotate(-2deg);
}
:root:lang(vi) .badge { font-weight: 700; }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; border: 0;
  border-radius: 999px; font: 19px/1.2 var(--display); color: var(--sticker-text); text-decoration: none; cursor: pointer;
}
.store { width: 100%; background: #3B2530; color: #FFF8F0; box-shadow: 0 0 0 5px var(--die), var(--shadow); }
.card {
  width: 100%; padding: 20px 18px; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.card[hidden], .dashed[hidden] { display: none; }
.code-label { margin: 0; color: var(--ink2); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.tiles { display: flex; gap: 4px; justify-content: center; user-select: all; }
.tile {
  flex: none;
  width: 34px; height: 44px; display: grid; place-items: center; border-radius: 9px; background: var(--tile);
  color: var(--sticker-text); font: 24px/1 "Jua", system-ui, sans-serif;
  box-shadow: 0 0 0 3px var(--die), 0 3px 8px var(--shc); transform: rotate(var(--tilt));
}
.copy { min-height: 44px; font-size: 17px; background: var(--butter); box-shadow: 0 0 0 4px var(--die), var(--shadow); }
.hint { margin: 0; color: var(--ink2); font-size: 14px; }
.dashed { color: var(--ink2); font: 800 16px/1.2 var(--body); border: 2px dashed var(--line); background: transparent; }
.android { margin: 8px 0 0; font-size: 13px; color: var(--ink2); }