/* Illustration mode (chip-shop unlock, js/ui/shop.js setTheme): the casino turns into a
 * Picsart-style sticker scrapbook. Everything is scoped to html.is-illustra, so the
 * default dark world is untouched. Tokens flip to paper + ink + pop colors; surfaces
 * become cut-out stickers (ink outline, flat offset shadow, slightly uneven corners);
 * the "casino objects" (machine, wheel, reels, players) stay dark, like stickers
 * pasted on the page. */

html.is-illustra {
  color-scheme: light;
  --paper: #fbf3e4;
  --pink: #ff4fa0;
  --yellow: #ffd23f;
  --cyan: #2ec4ff;
  --lime: #8ee05a;
  --violet: #9d6bff;

  --ink: var(--paper);
  --felt: #ffffff;
  --felt-2: #fff6e6;
  --line: #1d1b26;
  --text: #1d1b26;
  --muted: #4c4757;
  --faint: #8a8494;
  --jade: #e8338a;
  --jade-deep: #b81f68;
  --jade-glow: rgb(232 51 138 / 0.28);
  --gold: #f29d0c;
  --gold-deep: #c47a00;
  --gold-glow: rgb(255 210 63 / 0.55);
  --ember: #ff4d4d;
  --sky: #2b86ff;

  --font-display: 'Permanent Marker', 'Montserrat', sans-serif;
  --font-hand: 'Patrick Hand', 'Manrope', sans-serif;

  --shadow-1: 4px 4px 0 var(--line);
  --shadow-2: 6px 7px 0 var(--line);
  --sticker-r: 20px 26px 18px 24px / 24px 18px 26px 20px;
}

/* Dark objects keep the casino palette inside the scrapbook */
.is-illustra :is(.cabinet, .wheel, .ride, .roll__reel, .thanks__board, .scratch__zone, .player-dock, .carousel__track, .reveal__video, .levelup-flash, .collection__slots .slot, .song__disc) {
  --line: #1b2a23; --text: #eaf2ec; --muted: #8fa39a; --faint: #5c6e66;
  --felt: #0b1410; --felt-2: #101c17; --jade: #3ddc84; --gold: #f2c14e; --gold-glow: rgb(242 193 78 / 0.35);
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* ── Page: paper, dot grid and scattered doodles ── */
.is-illustra body {
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%231d1b26' stroke-width='3' opacity='.22'%3E%3Cpath d='M60 70l9 19 21 3-15 15 4 21-19-10-19 10 4-21-15-15 21-3z' fill='%23ffd23f'/%3E%3Cpath d='M400 90c-10-16-34-6-26 12 6 14 26 24 26 24s20-10 26-24c8-18-16-28-26-12z' fill='%23ff4fa0'/%3E%3Cpath d='M180 300c20-20 40 20 60 0s40 20 60 0 40 20 60 0'/%3E%3Cpath d='M70 400c0-20 30-20 30 0s-20 25-35 10-5-45 25-45 45 35 25 60'/%3E%3Ccircle cx='440' cy='420' r='16' fill='%232ec4ff'/%3E%3Cpath d='M300 160l8-20 8 20 20 8-20 8-8 20-8-20-20-8z' fill='%238ee05a'/%3E%3Cpath d='M230 470l20-20 20 20 20-20 20 20'/%3E%3Cpath d='M470 250l14 14m0-14l-14 14'/%3E%3Cpath d='M120 200l10 10m0-10l-10 10'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle, rgb(29 27 38 / 0.12) 1.2px, transparent 1.6px);
  background-size: 640px 640px, 22px 22px;
}
.is-illustra .bg-gl { opacity: 0; }
.is-illustra .scene-video { opacity: 0.06; filter: grayscale(1) contrast(1.3); mix-blend-mode: multiply; }
.is-illustra ::selection { background: var(--yellow); color: var(--line); }

/* ── Type: marker headings, handwritten labels ── */
.is-illustra :is(.eyebrow, .mission__eyebrow, .gate__eyebrow, .lvl__eyebrow, .toast__eyebrow, .shop__feature-eyebrow, .thanks__status, .mini-player__artist, .hero__hi, .hero__hint) {
  font-family: var(--font-hand); letter-spacing: 0.04em; font-size: 1.05em;
}
.is-illustra .eyebrow { color: var(--line); font-size: 1.15rem; text-transform: none; }
.is-illustra .eyebrow::before {
  content: '✦'; width: auto; height: auto; background: none; box-shadow: none; border-radius: 0;
  color: var(--pink); font-size: 1.1em; animation: doodle-spin 6s linear infinite;
}
@keyframes doodle-spin { to { rotate: 360deg; } }
.is-illustra .lead { color: var(--muted); }

/* Echo titles: ink on top, misregistered outline copies in pop colors below */
.is-illustra .echo { font-weight: 400; letter-spacing: 0.01em; line-height: 0.95; }
.is-illustra .echo__line:first-child { color: var(--line); text-shadow: 0.05em 0.05em 0 var(--yellow); }
.is-illustra .echo__line[aria-hidden] { background: none; -webkit-text-fill-color: transparent; color: transparent; opacity: 1; }
.is-illustra .echo__line:nth-child(2) { -webkit-text-stroke: 2px var(--pink); }
.is-illustra .echo__line:nth-child(3) { -webkit-text-stroke: 2px var(--cyan); }
.is-illustra .echo__line:nth-child(4) { -webkit-text-stroke: 2px var(--lime); }

/* ── Surfaces become stickers ── */
.is-illustra :is(.panel, .shop, .level-map, .unlock-card, .toast, .gate, .mission, .quote, .stage, .scratch, .flip__face, .holo, .pay, .lvl, .shop-item, .shop__feature, .mini-player, .result, .case__meta, .contact, .thanks) {
  border: 2.5px solid var(--line) !important;
  border-radius: var(--sticker-r);
  box-shadow: var(--shadow-1);
}
.is-illustra :is(.shop, .level-map, .unlock-card, .gate) { box-shadow: var(--shadow-2); background: var(--felt); }
.is-illustra .panel:nth-of-type(odd) { rotate: -0.4deg; }
.is-illustra .panel:nth-of-type(even) { rotate: 0.4deg; }
/* a strip of washi tape on the big cards */
.is-illustra :is(.about__story, .contact, .thanks, .stage)::before {
  content: ''; position: absolute; z-index: 2; top: -12px; left: 50%; width: 110px; height: 26px; translate: -50% 0; rotate: -3deg;
  background: repeating-linear-gradient(45deg, rgb(255 79 160 / 0.75) 0 10px, rgb(255 210 63 / 0.75) 10px 20px);
  border-radius: 3px; box-shadow: 0 2px 0 rgb(29 27 38 / 0.15); pointer-events: none;
}
.is-illustra :is(.about__story, .contact, .thanks, .stage) { position: relative; overflow: visible; }

/* ── Buttons: chunky stickers with a hard shadow ── */
.is-illustra .btn {
  border: 2.5px solid var(--line); box-shadow: 3px 3px 0 var(--line);
  font-family: var(--font-display); font-weight: 400; letter-spacing: 0.03em;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.is-illustra .btn::after { display: none; }
.is-illustra .btn:hover { transform: translate(-1px, -2px); box-shadow: 5px 5px 0 var(--line); border-color: var(--line); }
.is-illustra .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
.is-illustra .btn--gold { --btn-bg: var(--yellow); --btn-fg: var(--line); }
.is-illustra .btn--jade { --btn-bg: var(--pink); --btn-fg: #fff; }
.is-illustra .btn--ghost { --btn-bg: #fff; --btn-fg: var(--line); }
.is-illustra .btn--pulse { animation: none; }

/* ── HUD: a paper strip ── */
.is-illustra .hud { background: rgb(255 255 255 / 0.9); border-bottom: 2.5px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.is-illustra .hud__name { font-family: var(--font-display); font-weight: 400; }
.is-illustra .logo-mark { color: var(--pink); }
.is-illustra :is(.hud__chips, .hud__progress, .hud__sound, .hud__lang) { border: 2.5px solid var(--line); background: #fff; box-shadow: 2px 2px 0 var(--line); }
.is-illustra .hud__chips { background: var(--yellow); }
.is-illustra .odometer, .is-illustra .hud__pct { color: var(--line); }
.is-illustra .scene-dot { border-color: var(--line); background: #fff; }
.is-illustra .scene-dot.is-active { background: var(--pink); border-color: var(--line); box-shadow: 2px 2px 0 var(--line); }

/* ── Hero: cut-out portrait, puffy stickers ── */
.is-illustra .hero__name { font-size: calc(var(--step-5) * 0.8); letter-spacing: 0; }
.is-illustra .hero__name .echo__line:first-child { text-shadow: 0.05em 0.05em 0 var(--yellow); }
.is-illustra :is(.hero__portrait, .hero__portrait-img) {
  filter: drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff)
          drop-shadow(2px 0 0 var(--line)) drop-shadow(-2px 0 0 var(--line)) drop-shadow(0 -2px 0 var(--line))
          drop-shadow(10px 12px 0 rgb(29 27 38 / 0.18));
}
.is-illustra .sticker {
  font-family: var(--font-hand); font-weight: 400; font-size: 1.05rem; padding: 6px 14px 6px 10px; border-radius: 10px;
  border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line), 5px 6px 0 rgb(29 27 38 / 0.25);
}
.is-illustra .sticker--jade { background: var(--lime); color: var(--line); }
.is-illustra .sticker--gold { background: var(--yellow); color: var(--line); }
.is-illustra .sticker--sky { background: var(--cyan); color: var(--line); }
.is-illustra .sticker--ember { background: var(--pink); color: #fff; }
.is-illustra .ticker { background: var(--yellow); border-block: 2.5px solid var(--line); color: var(--line); }
.is-illustra .hero__headline { font-family: var(--font-display); font-weight: 400; }

/* ── Casino objects: dark stickers with a white cut line ── */
.is-illustra :is(.cabinet, .wheel, .roll__reel, .player-dock, .carousel__track, .reveal__video, .ride) {
  box-shadow: 0 0 0 4px #fff, 0 0 0 6.5px var(--line), 8px 10px 0 6px rgb(29 27 38 / 0.2);
}
.is-illustra .about__photo img, .is-illustra .gallery img { border: 4px solid #fff; box-shadow: 0 0 0 2px var(--line); }

/* Surfaces that had a fixed dark fill */
.is-illustra .toast { background: #fff; }
.is-illustra .toast__eyebrow { color: var(--pink); }
.is-illustra .mission { background: #fff; backdrop-filter: none; border-radius: 999px !important; }
.is-illustra .mission.is-done { background: var(--lime); }
.is-illustra .mission.is-done .mission__node { background: #fff; border-color: var(--line); color: var(--line); }
.is-illustra .mission.is-current { background: var(--yellow); }
.is-illustra .mission__meter { background: rgb(29 27 38 / 0.15); }

/* Gold text on paper needs ink to stay readable */
.is-illustra :is(.gate__count, .shop-item__price, .shop__balance-n, .lvl__count, .mission__count, .mission__eyebrow, .pay__mult, .result__label, .scratch__result-label, .edu__period, .about__h) { color: var(--line); }
.is-illustra .thanks__title { font-weight: 400; }
.is-illustra .thanks.is-revealed .thanks__title { color: var(--pink); }

/* Cursor tag gets the sticker cut too */
.is-illustra .cursor-tag__label { font-family: var(--font-hand); font-weight: 400; font-size: 0.95rem; border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px var(--line), 4px 5px 0 rgb(29 27 38 / 0.25); background: var(--pink); color: #fff; }
.is-illustra .cursor-tag[data-mode="action"] .cursor-tag__label { background: var(--yellow); color: var(--line); }
.is-illustra .cursor-tag__arrow { color: var(--pink); }

/* Locked scenes: pencil sketch instead of blur */
.is-illustra .scene.is-locked > .scene__inner { filter: blur(5px) grayscale(1) contrast(0.8); opacity: 0.3; }
.is-illustra .scene:is(.is-locked, .is-unlocking) .gate { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.is-illustra .gate__lock { color: var(--line); background: var(--yellow); border: 2.5px solid var(--line); box-shadow: 3px 3px 0 var(--line); }
.is-illustra .gate__title { font-weight: 400; }

/* Theme switch: a quick paper flash covers the restyle */
.is-theme-swap body::after {
  content: ''; position: fixed; inset: 0; z-index: 95; pointer-events: none;
  background: #fbf3e4; animation: theme-swap 700ms var(--ease-in-out) forwards;
}
@keyframes theme-swap { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .is-illustra .eyebrow::before { animation: none; } }
.is-illustra .mission.is-done .mission__eyebrow, .is-illustra .mission .mission__eyebrow { color: var(--line); }
/* Progress tracks: a light wash instead of solid ink */
.is-illustra :is(.gate__meter, .shop-item__meter, .lvl__meter, .mission__meter, .level-map__bar, .mini-player__bar) { background: rgb(29 27 38 / 0.12); }

/* Chips/tags: white stickers with ink text */
.is-illustra .chip { background: #fff; color: var(--line); border: 2px solid var(--line); box-shadow: 2px 2px 0 var(--line); }
.is-illustra .chip--gold { background: var(--yellow); }
.is-illustra .chip--sky { background: var(--cyan); }
.is-illustra .chip--ember { background: var(--pink); color: #fff; }
.is-illustra .stage__list li { background: #fff; border: 2px solid var(--line); }

/* Case overlay: the hero sits on a dark video, so it keeps the dark palette */
.is-illustra .case__hero {
  --line: #1b2a23; --text: #eaf2ec; --muted: #8fa39a; --faint: #5c6e66; --felt: #0b1410; --felt-2: #101c17;
  color: var(--text);
}
.is-illustra .case__hero .echo__line:first-child { color: #fff; text-shadow: 0.05em 0.05em 0 var(--pink); }
.is-illustra .case__hero .eyebrow { color: #fff; }
.is-illustra .case__meta-item { background: rgb(255 255 255 / 0.92); color: #1d1b26; border: 2.5px solid #1d1b26; box-shadow: 3px 3px 0 #1d1b26; backdrop-filter: none; }
.is-illustra .case__meta-item dt { color: #4c4757; }
.is-illustra .case__close { background: var(--yellow); color: #1d1b26; }

/* Shop: paper panel top, white item stickers */
.is-illustra .shop__top { background: var(--felt); border-bottom: 2.5px solid var(--line); }
.is-illustra .shop-item { background: #fff; }
.is-illustra .shop-item.is-short { background: #f4ede0; }
.is-illustra .shop__feature { background: linear-gradient(135deg, rgb(255 79 160 / 0.14), rgb(46 196 255 / 0.12) 55%, rgb(255 210 63 / 0.2)), #fff; }
.is-illustra :is(.shop-item__title, .shop__title, .level-map__title, .unlock-card .reveal__title) { font-weight: 400; }