/* The non-pop screens (js/screens/*.js, T3.1a): title, name, menu, customer intro, result, shop, comics, settings, about.
   Glossy pink and cream cartoon look with thick ink outlines and hard shadows (like the comic player), mint main buttons
   (like the pop scene). Every screen fills its container and works upright and sideways (phone held in landscape).
   Touch targets are at least 44 px. Motion stops with prefers-reduced-motion or the .app-still class. */

.app-screen {
  --ink: #2a211d; --cream: #fff3e6; --pink: #f48fb1; --pink-deep: #e8638f; --pink-soft: #ffd6e5; --yellow: #ffe08a;
  --mint: #5eead4; --hot: #ff5c8a; --shadow: rgba(42, 33, 29, 0.35);
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; box-sizing: border-box;
  color: var(--ink); font-family: system-ui, sans-serif; font-size: 16px; line-height: 1.3;
  background-color: var(--pink);
  background-image: radial-gradient(rgba(255, 255, 255, 0.28) 2px, transparent 2.6px), linear-gradient(180deg, #f9a8c4 0%, #f48fb1 55%, #ee7ba3 100%);
  background-size: 22px 22px, 100% 100%;
  -webkit-tap-highlight-color: transparent;
}
.app-screen *, .app-screen *::before, .app-screen *::after { box-sizing: border-box; }
.app-screen [hidden] { display: none !important; }
.app-screen h1, .app-screen h2, .app-screen p { margin: 0; }
.app-screen :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.app-icon { display: block; width: 24px; height: 24px; flex: none; }

/* ---------- Shared pieces ---------- */
.app-body {
  flex: 1; min-height: 0; width: 100%; max-width: 560px; margin: 0 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 12px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  -webkit-overflow-scrolling: touch;
}
.app-body--center > * { margin-block: auto; }

.app-head {
  flex: none; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left));
}
.app-head__title {
  flex: 1; min-width: 0; font-size: 1.6rem; font-weight: 900; color: var(--cream); letter-spacing: 0.01em;
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.app-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 48px; padding: 8px 22px;
  border-radius: 999px; border: 3px solid var(--ink); font: inherit; font-size: 1rem; font-weight: 800; color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 55%), var(--cream);
  box-shadow: 0 4px 0 var(--ink); touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.app-btn:hover { filter: brightness(1.04); }
.app-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.app-btn--main { background-color: var(--mint); }
.app-btn--danger { background-color: var(--hot); color: #fff; text-shadow: 0 1px 0 rgba(42, 33, 29, 0.5); }
.app-btn--small { min-height: 44px; min-width: 44px; padding: 6px 16px; font-size: 0.95rem; }
.app-btn--big { min-height: 58px; padding: 10px 32px; font-size: 1.2rem; }
.app-btn--round { width: 48px; padding: 0; }
.app-btn:disabled { opacity: 0.5; cursor: default; box-shadow: 0 2px 0 var(--ink); transform: translateY(2px); filter: grayscale(0.4); }
.app-back .app-icon { width: 26px; height: 26px; }

.app-card {
  position: relative; padding: 14px 16px; border-radius: 18px; border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--shadow);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 38%), var(--cream);
}
.app-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.app-actions--row { flex-direction: row; flex-wrap: wrap; }
.app-actions--row > .app-btn { flex: 1 1 140px; }
.app-actions--row { align-items: center; }

.app-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 12px 2px 8px; border-radius: 999px; border: 3px solid var(--ink);
  background: var(--cream); font-weight: 800; white-space: nowrap;
}
.app-pill .app-icon { width: 22px; height: 22px; }
.app-pill--big { min-height: 40px; font-size: 1.15rem; }
.app-pill--rep { background: var(--pink-soft); }

/* ---------- Title ---------- */
.app-title__tap {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 16px;
  border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: center;
}
.app-title__words { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.app-title__art { width: min(62vw, 38vh, 280px); }
.app-title__art .app-mascot { width: 100%; height: auto; display: block; overflow: visible; }
.app-title__name {
  font-size: clamp(2.5rem, 13vw, 4.5rem); line-height: 1; font-weight: 900; color: var(--cream); letter-spacing: 0.01em;
  -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); transform: rotate(-2deg);
}
.app-title__tagline { margin-top: 4px; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.app-title__start {
  margin-top: 14px; display: inline-flex; align-items: center; min-height: 56px; padding: 10px 30px; border-radius: 999px; border: 3px solid var(--ink);
  font-size: 1.25rem; font-weight: 900; background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 55%), var(--mint);
  box-shadow: 0 5px 0 var(--ink); animation: app-pulse 1.6s ease-in-out infinite;
}
.app-title__tap:active .app-title__start { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.app-title__about {
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 2;
}

/* The mascot */
.app-mascot__face { transform-origin: 50% 90%; animation: app-bob 2.8s ease-in-out infinite; }
.app-mascot__sparkle { transform-box: fill-box; transform-origin: center; animation: app-twinkle 2s ease-in-out infinite; }
.app-mascot__sparkle--b { animation-delay: 0.9s; }

/* ---------- Name ---------- */
.app-name { width: 100%; max-width: 520px; margin-inline: auto; display: grid; gap: 12px; text-align: center; padding: 18px; }
.app-name__title { font-size: 1.7rem; font-weight: 900; }
.app-name__prompt, .app-name__hint { font-size: 0.95rem; }
.app-name__hint { color: #6a5148; font-size: 0.85rem; }
.app-namefield { display: grid; gap: 8px; text-align: left; }
.app-field__label { font-weight: 800; font-size: 0.9rem; }
.app-input {
  width: 100%; min-height: 52px; padding: 8px 14px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink);
  font: inherit; font-size: 1.15rem; font-weight: 700; box-shadow: inset 0 3px 0 rgba(42, 33, 29, 0.12);
}
.app-input::placeholder { color: #a8968c; font-weight: 600; }

/* ---------- Menu ---------- */
.app-menu { justify-content: center; gap: 14px; }
.app-menu__top { display: flex; align-items: center; gap: 14px; justify-content: center; }
.app-menu__art { width: 84px; flex: none; }
.app-menu__art .app-mascot { width: 100%; height: auto; display: block; overflow: visible; }
.app-menu__hello {
  font-size: 1.7rem; font-weight: 900; color: var(--cream); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink);
  overflow-wrap: anywhere; min-width: 0;
}
.app-menu__list { display: grid; gap: 12px; }
.app-menubtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 10px 18px; border-radius: 20px;
  border: 3px solid var(--ink); font: inherit; font-size: 1.2rem; font-weight: 900; color: var(--ink); cursor: pointer; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 55%), var(--cream); box-shadow: 0 5px 0 var(--ink);
  touch-action: manipulation;
}
.app-menubtn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.app-menubtn--main { min-height: 76px; background-color: var(--mint); font-size: 1.5rem; }
.app-menubtn--work { background-color: var(--yellow); } /* Keep working (T5.4) */
.app-menubtn__sub { font-size: 0.9rem; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Customer intro ---------- */
.app-intro { justify-content: center; gap: 14px; }
.app-intro__who, .app-intro__what { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.app-intro__step { align-self: center; padding: 2px 14px; border-radius: 999px; border: 3px solid var(--ink); background: var(--cream); text-align: center; font-weight: 800; font-size: 0.9rem; }
.app-intro__portrait { align-self: center; width: min(52vw, 220px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); background: var(--cream); overflow: hidden; }
.app-intro__name {
  align-self: center; max-width: 100%; padding: 8px 20px; border-radius: 12px; border: 3px solid var(--ink); background: var(--yellow); text-align: center;
  font-size: 1.7rem; font-weight: 900; transform: rotate(-1.5deg); box-shadow: 4px 5px 0 var(--shadow); overflow-wrap: anywhere;
}
.app-bubble { display: grid; gap: 8px; }
.app-bubble::before {
  content: ''; position: absolute; top: -17px; left: 36px; width: 22px; height: 22px; background: var(--cream); border-left: 3px solid var(--ink); border-top: 3px solid var(--ink);
  transform: rotate(45deg); border-radius: 4px 0 0 0;
}
.app-bubble__text { font-size: 1.15rem; font-weight: 700; }
.app-bubble__deadline { font-size: 0.95rem; font-style: italic; color: #6a5148; }
.app-note {
  padding: 10px 14px; border-radius: 6px; border: 3px solid var(--ink); background: var(--yellow); transform: rotate(1deg); box-shadow: 3px 4px 0 var(--shadow);
}
.app-note__label { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.app-note__text { font-size: 1.05rem; font-weight: 800; }
/* The customer's twist (T8.3): a lilac pill with the twist's name, its funny line and a tip with a bulb. */
.app-twist {
  display: grid; gap: 2px; padding: 8px 14px; border-radius: 18px; border: 3px solid var(--ink); background: #e6dbff;
  transform: rotate(-0.8deg); box-shadow: 3px 4px 0 var(--shadow);
}
.app-twist__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.app-twist__label { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.app-twist__name { font-size: 1.05rem; font-weight: 900; }
.app-twist__line { font-size: 0.9rem; font-style: italic; line-height: 1.25; }
.app-twist__line--request { font-size: 1.05rem; font-style: normal; font-weight: 800; }
.app-twist__tip { display: flex; align-items: flex-start; gap: 6px; font-size: 0.88rem; font-weight: 700; line-height: 1.25; }
.app-twist__tip .app-icon { width: 20px; height: 20px; flex: none; }
/* A boss or event customer (T8.4): the same pill in gold, tilted the other way, with a reward line. */
.app-twist--boss {
  background: linear-gradient(160deg, #fff4b8, #ffd23f 70%, #f5b622); transform: rotate(0.8deg);
  box-shadow: 3px 4px 0 var(--shadow), inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.app-twist--boss .app-twist__label { padding: 0 8px; border-radius: 999px; background: var(--ink); color: #ffe27a; }
.app-twist__reward { font-size: 0.9rem; font-weight: 900; line-height: 1.25; }
.app-intro__start { margin-top: 4px; }

/* ---------- Result ---------- */
.app-result { justify-content: center; gap: 12px; }
.app-result__left, .app-result__right { display: contents; }
.app-result__top { display: flex; flex-direction: column; align-items: center; gap: 6px; order: 0; }
.app-result__title {
  font-size: 2rem; font-weight: 900; text-align: center; color: var(--cream); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink);
}
.app-stars { display: flex; gap: 4px; justify-content: center; }
.app-result__tag { padding: 2px 14px; border-radius: 999px; border: 3px solid var(--ink); background: var(--yellow); text-align: center; font-weight: 800; font-size: 0.9rem; } /* Keep working pay (T5.4) */
.app-star svg { width: 72px; height: 72px; filter: drop-shadow(0 4px 0 rgba(42, 33, 29, 0.3)); }
.app-star--on { animation: app-star-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: calc(var(--i) * 0.2s + 0.15s); }
.app-coins { order: 1; display: grid; gap: 2px; padding: 10px 14px; }
.app-coins__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; font-weight: 700; }
.app-coins__row--total { margin-top: 4px; padding-top: 6px; border-top: 3px dashed var(--ink); font-size: 1.15rem; font-weight: 900; }
.app-result__quote { order: 2; text-align: center; font-style: italic; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, 0.55); padding: 8px 12px; border-radius: 14px; }
/* A finished boss or event (T8.4): "New stamp!" in a gold pill under the coins. */
.app-result__stamp {
  order: 1; display: flex; align-items: center; justify-content: center; gap: 8px; align-self: center; max-width: 100%; padding: 4px 14px 4px 8px;
  border-radius: 999px; border: 3px solid var(--ink); background: linear-gradient(160deg, #fff4b8, #ffd23f); font-weight: 900; font-size: 0.92rem;
  line-height: 1.2; box-shadow: 0 3px 0 var(--ink);
}
.app-result__stamp svg { flex: none; width: 24px; height: 24px; }
.app-rep {
  order: 3; display: flex; align-items: center; justify-content: center; gap: 8px; align-self: center; max-width: 100%; padding: 6px 16px 6px 10px; border-radius: 999px;
  border: 3px solid var(--ink); background: var(--pink-soft); font-weight: 800; box-shadow: 0 3px 0 var(--ink);
}
.app-rep--cost { background: var(--yellow); }
.app-fact { order: 4; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.app-fact .app-icon { width: 34px; height: 34px; }
.app-fact__text { font-size: 0.98rem; font-weight: 600; }
.app-result .app-actions { order: 5; }
.app-result__text { order: 1; text-align: center; font-weight: 700; font-size: 1.05rem; background: rgba(255, 255, 255, 0.55); padding: 10px 14px; border-radius: 14px; }
.app-huff {
  padding: 4px 16px; border-radius: 10px; border: 3px solid var(--ink); background: var(--yellow); font-size: 1.4rem; font-weight: 900; letter-spacing: 0.06em;
  transform: rotate(-4deg); box-shadow: 3px 4px 0 var(--shadow);
}

/* ---------- Shop ---------- */
.app-shopbar { flex: none; width: 100%; max-width: 560px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); display: grid; gap: 6px; }
.app-screen--shop .app-head { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
.app-shopcoins { flex: none; display: flex; }
.app-shopcoins .app-pill--big { min-height: 40px; }
.app-shopstats { display: grid; justify-items: stretch; }
.app-pill--stack { white-space: normal; min-height: 0; padding: 3px 14px 3px 8px; border-radius: 22px; }
.app-pill__stack { display: grid; gap: 0; min-width: 0; }
.app-shopstats__next { font-size: 0.74rem; font-weight: 700; color: #6a3a50; }
.app-shopextras { display: grid; gap: 6px; }
.app-shopextras:empty { display: none; }
.app-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; border: 3px solid var(--ink); background: var(--pink-soft); }
.app-tab {
  flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 900; font-size: 1rem; color: var(--ink); cursor: pointer;
  touch-action: manipulation;
}
.app-tab--on { background: var(--mint); box-shadow: inset 0 0 0 3px var(--ink); }
/* T5.3b: the list frame holds the scrolling list and the bouncing "more below" arrow; the list has a thick visible scrollbar. */
.app-shoplistframe { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; }
.app-shoplist {
  padding-top: 8px; padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 28px)); gap: 8px; max-width: 560px;
  scrollbar-width: auto; scrollbar-color: var(--hot) rgba(255, 255, 255, 0.55);
}
.app-shoplist > * { flex: none; }
.app-shoplist::-webkit-scrollbar { width: 12px; }
.app-shoplist::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.55); border-radius: 999px; border: 2px solid var(--ink); }
.app-shoplist::-webkit-scrollbar-thumb { background: var(--hot); border-radius: 999px; border: 2px solid var(--ink); min-height: 48px; }
.app-shopmore {
  position: absolute; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2; display: grid; place-items: center;
  width: 48px; height: 36px; padding: 0; border: 3px solid var(--ink); border-radius: 999px; background: var(--mint); color: var(--ink);
  box-shadow: 0 3px 0 var(--ink); cursor: pointer; touch-action: manipulation; animation: app-more-bounce 1.1s ease-in-out infinite;
}
.app-shopmore .app-icon { width: 24px; height: 24px; transform: rotate(-90deg); }
.app-shoplistframe::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(238, 123, 163, 0), rgba(238, 123, 163, 0.85));
}
@keyframes app-more-bounce { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 6px; } }
.app-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 16px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 38%), var(--cream); box-shadow: 3px 4px 0 var(--shadow);
}
.app-item--locked { background-color: #f1ddd0; }
.app-item--owned { background-color: #d9fbf3; }
.app-item--scrub { background-color: var(--yellow); border-style: dashed; }
.app-item__badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); background: var(--yellow); }
.app-item__badge .app-icon { width: 24px; height: 24px; }
.app-item__text { min-width: 0; display: grid; gap: 2px; }
.app-item__name { font-size: 1rem; font-weight: 900; }
.app-item__desc { font-size: 0.82rem; line-height: 1.2; color: #5f4a41; }
.app-item__side { display: grid; justify-items: end; gap: 2px; }
.app-item__side .app-pill { min-height: 26px; padding-block: 0; font-size: 0.95rem; }
.app-item__side .app-pill .app-icon { width: 18px; height: 18px; }
.app-item__why, .app-item__note { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 800; color: #9c1f4a; }
.app-item__why .app-icon { width: 18px; height: 18px; }
.app-item__note { color: #1e6a5e; }
.app-owned { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; color: #1e6a5e; }
.app-owned .app-icon { width: 22px; height: 22px; }
.app-owned--scrub { padding: 4px 12px; border-radius: 999px; border: 3px solid var(--ink); background: var(--hot); color: #fff; text-shadow: 0 1px 0 rgba(42, 33, 29, 0.5); }
.app-item--scrub .app-item__note { color: #7a4a00; }
.app-wearing-tag { padding: 2px 10px; border-radius: 999px; border: 2px solid var(--ink); background: var(--mint); font-size: 0.8rem; font-weight: 900; }
.app-wearing { display: flex; align-items: center; gap: 12px; padding: 5px 12px; border-radius: 16px; border: 3px solid var(--ink); background: var(--cream); box-shadow: 3px 4px 0 var(--shadow); }
.app-wearing__pic { flex: none; width: 52px; height: 108px; border-radius: 12px; background: var(--pink-soft); border: 3px solid var(--ink); }
.app-wearing__text { display: grid; gap: 2px; }
.app-wearing__label { font-size: 0.85rem; font-weight: 800; color: #5f4a41; }
.app-wearing__name { font-size: 1.2rem; font-weight: 900; }
.app-empty { text-align: center; font-weight: 800; color: var(--cream); text-shadow: 0 2px 0 var(--ink); }

/* ---------- Comics ---------- */
.app-comics__count { flex: none; align-self: center; padding: 1px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); text-align: center; font-weight: 800; font-size: 0.85rem; }
.app-comics { padding-top: 10px; }
.app-comic {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; padding: 10px 14px; border-radius: 16px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 38%), var(--cream); box-shadow: 3px 4px 0 var(--shadow);
}
.app-comic--locked { background-color: #eadbd0; }
.app-comic__text { min-width: 0; display: grid; gap: 2px; }
.app-comic__kind { justify-self: start; padding: 0 8px; border-radius: 999px; border: 2px solid var(--ink); background: var(--yellow); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }
.app-comic--milestone .app-comic__kind { background: var(--pink-soft); }
.app-comic--teaser .app-comic__kind { background: var(--mint); }
.app-comic__title { font-size: 1.1rem; font-weight: 900; overflow-wrap: anywhere; }
.app-comic--locked .app-comic__title { color: #8a756b; letter-spacing: 0.15em; }
.app-comic__lockedHint { font-size: 0.8rem; color: #6a5148; }
.app-comic__lock { display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.app-comic__lock .app-icon { width: 30px; height: 30px; }

/* ---------- Settings and About ---------- */
.app-settings { padding-top: 10px; }
.app-setcard { display: grid; align-content: start; gap: 10px; }
.app-setcard__title { font-size: 1.05rem; font-weight: 900; }
.app-setcard--danger { background-color: #ffe1ea; }
.app-with-icon { display: flex; align-items: center; gap: 8px; }
.app-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.app-switchrow + .app-switchrow { border-top: 2px dashed rgba(42, 33, 29, 0.25); }
.app-switchrow__label { font-weight: 800; font-size: 1.02rem; }
.app-switchrow__text { display: grid; gap: 2px; padding: 6px 0; }
.app-switchrow__hint { font-size: 0.85rem; font-weight: 600; opacity: 0.75; line-height: 1.3; }
.app-sliderrow { display: grid; gap: 2px; padding: 6px 0; border-top: 2px dashed rgba(42, 33, 29, 0.25); }
.app-sliderrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.app-sliderrow__label { font-weight: 800; font-size: 1.02rem; }
.app-sliderrow__value { font-weight: 900; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.app-slider {
  --fill: 50%; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y; appearance: none; -webkit-appearance: none;
}
.app-slider::-webkit-slider-runnable-track {
  height: 14px; border-radius: 999px; border: 3px solid var(--ink); background: linear-gradient(to right, var(--mint) var(--fill), #e6d7cc var(--fill));
}
.app-slider::-moz-range-track { height: 8px; border-radius: 999px; border: 3px solid var(--ink); background: #e6d7cc; }
.app-slider::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--mint); }
.app-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 32px; height: 32px; margin-top: -12px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; box-shadow: 2px 3px 0 var(--shadow);
}
.app-slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; box-shadow: 2px 3px 0 var(--shadow); }
.app-slider:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 12px; }
.app-switch {
  position: relative; flex: none; display: flex; align-items: center; justify-content: flex-end; width: 94px; height: 44px; padding: 0 12px; border-radius: 999px;
  border: 3px solid var(--ink); background: #e6d7cc; font: inherit; font-size: 0.85rem; font-weight: 900; color: var(--ink); cursor: pointer; touch-action: manipulation;
}
.app-switch--on { justify-content: flex-start; background: var(--mint); }
.app-switch__knob {
  position: absolute; top: 50%; left: 4px; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; border: 3px solid var(--ink); background: #fff;
  transition: left 0.15s ease-out, right 0.15s ease-out;
}
.app-switch--on .app-switch__knob { left: calc(100% - 34px); }
.app-notice {
  padding: 8px 14px; border-radius: 14px; border: 3px solid var(--ink); background: var(--yellow); font-weight: 800; text-align: center; box-shadow: 3px 4px 0 var(--shadow);
}
.app-confirm { display: grid; gap: 8px; padding: 10px; border-radius: 12px; border: 3px dashed var(--ink); background: #fff; }
.app-confirm__ask { font-weight: 900; }
.app-confirm__warn { font-size: 0.9rem; }
.app-about { padding-top: 6px; }
.app-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-about__art { width: 120px; margin: 0 auto; }
.app-about__art .app-mascot { width: 100%; height: auto; display: block; overflow: visible; }
.app-about__text { font-size: 1rem; font-weight: 600; text-align: left; }

/* ---------- Studio view (T5.1c) ---------- */
.app-studio {
  flex: 1; min-height: 0; width: 100%; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px;
  padding: 8px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.app-studio__stage {
  position: relative; flex: 1; min-height: 180px; overflow: hidden; border: 3px solid var(--ink); border-radius: 20px;
  background: #3a3f37; box-shadow: 0 5px 0 var(--ink);
}
.app-studio__room, .app-studio__her { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.app-studio__notes {
  flex: none; max-height: 34%; overflow-y: auto; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 16px;
  background: var(--cream); box-shadow: 0 4px 0 var(--ink);
}
.app-studio__tier { font-weight: 900; }
/* T5.2b: the see-through button over her (cap off and on); a clear ring when it has keyboard focus. */
.app-studio__tap {
  position: absolute; margin: 0; padding: 0; border: 0; border-radius: 40px; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.app-studio__tap:focus-visible { outline: 4px dashed var(--ink); outline-offset: 2px; }
.app-studio__hint { margin-top: 4px; font-size: 0.95rem; font-style: italic; }
.app-studio__empty { margin-top: 4px; font-size: 0.95rem; }
.app-studio__list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.95rem; }
.app-studio__item { display: flex; align-items: flex-start; gap: 6px; }
.app-studio__item .app-icon { width: 20px; height: 20px; }
.app-shop-studio { width: 100%; }
.app-shoplist > .app-empty { grid-column: 1 / -1; }

/* ---------- Field guide (T6.5) ----------
   A "3 of 10 found" pill in the top row and a scrolling list of cards (the shop's list frame and "more below" arrow). Each card:
   a round picture on the left, name, funny line, "What to use" and a tip with a bulb. Locked cards are greyer with a
   big "?". Over the pop scene (app-screen--overlay) the screen lies on top of the scene as a dialog. */
.app-screen--overlay { position: absolute; inset: 0; z-index: 30; }
.app-guide__count {
  flex: none; padding: 2px 12px; border-radius: 999px; border: 3px solid var(--ink); background: var(--cream); text-align: center;
  font-weight: 800; font-size: 0.85rem; white-space: nowrap;
}
.app-guidelist { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.app-guidecard {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 12px 10px 8px; border-radius: 16px;
  border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--shadow);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 38%), var(--cream);
}
.app-guidecard--locked { align-items: center; background-color: #eadbd0; }
.app-guidecard__pic {
  display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; border: 3px solid var(--ink); background: var(--pink-soft);
  overflow: hidden;
}
.app-guidecard__art { display: block; width: 76px; height: 76px; }
.app-guidecard__q { font-size: 2.6rem; font-weight: 900; color: #8a756b; line-height: 1; }
.app-guidecard--locked .app-guidecard__pic { border-style: dashed; background: #f6ece4; }
.app-guidecard__text { min-width: 0; display: grid; gap: 3px; }
.app-guidecard__name { font-size: 1.1rem; font-weight: 900; overflow-wrap: anywhere; }
.app-guidecard--locked .app-guidecard__name { color: #8a756b; letter-spacing: 0.15em; }
.app-guidecard__line { font-size: 0.88rem; font-style: italic; line-height: 1.25; color: #5f4a41; }
.app-guidecard--locked .app-guidecard__line { font-style: normal; }
.app-guidecard__use {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 2px; padding: 3px 10px; border-radius: 12px;
  border: 2px solid var(--ink); background: #d9fbf3; font-size: 0.9rem; line-height: 1.25;
}
.app-guidecard__label { font-weight: 900; }
.app-guidecard__tools { font-weight: 700; }
.app-guidecard__tip { display: flex; align-items: flex-start; gap: 6px; font-size: 0.85rem; font-weight: 600; line-height: 1.25; }
.app-guidecard__tip .app-icon { width: 20px; height: 20px; margin-top: -1px; }
/* The "Customers" heading above the twist cards (T8.3); it spans both columns in landscape. */
.app-guide__group {
  grid-column: 1 / -1; justify-self: start; margin-top: 6px; padding: 2px 14px; border-radius: 999px; border: 3px solid var(--ink);
  background: #d9c6ff; font-size: 1rem; font-weight: 900;
}
@media (orientation: landscape) and (max-height: 600px) {
  .app-guidelist { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
  .app-guidecard__pic { width: 66px; height: 66px; }
  .app-guidecard__art { width: 60px; height: 60px; }
}

/* ---------- Before and after reveal and Face album (T8.2) ----------
   The reveal: one 4:5 frame with the BEFORE face under the AFTER face; the after picture is cut off at the white wipe
   line with its round mint handle (drag it, or the arrow keys). Upright, the result screen puts the frame and the stars
   side by side on top and the coins, line, reputation, fact and buttons below; sideways, three columns.
   The album: a grid of 4:5 face tiles with a star row under each, locked regulars as dashed "?" silhouettes, and one
   face large in a small dialog. The menu gets a little tighter when it has ten buttons. */
.app-reveal { margin: 0; min-width: 0; }
.app-reveal__frame {
  position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 18px; border: 3px solid var(--ink); overflow: hidden;
  box-shadow: 4px 5px 0 var(--shadow); background: #e6d8cc; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.app-reveal__pic { position: absolute; inset: 0; }
.app-reveal__pic canvas { display: block; width: 100%; height: 100%; }
.app-reveal__pic--before { background: radial-gradient(circle at 50% 40%, #efe4d9, #cbbcb0); }
.app-reveal__pic--after, .app-albumtile__frame, .app-albumdetail__pic { background: radial-gradient(circle at 50% 38%, #fffdf2, #ffe4ee 68%, #ffc6da); }
.app-reveal__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 0 2px var(--ink); pointer-events: none; }
.app-reveal__knob { /* a sibling of the line: reveal.js keeps it whole inside the frame at the two ends */
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 40px; height: 40px; transform: translate(-50%, -50%); pointer-events: none;
  border-radius: 50%; border: 3px solid var(--ink); background: var(--mint); box-shadow: 0 3px 0 var(--ink);
}
.app-reveal__knob .app-icon { width: 24px; height: 24px; }
.app-reveal__tag {
  position: absolute; top: 6px; padding: 0 9px; border-radius: 999px; border: 2px solid var(--ink); background: var(--cream); font-size: 0.78rem;
  font-weight: 900; pointer-events: none; transition: opacity 0.2s;
}
.app-reveal__tag--after { left: 6px; background: var(--yellow); }
.app-reveal__tag--before { right: 6px; }
.app-reveal__tag--dim { opacity: 0.3; }
.app-result--reveal { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-content: safe center; gap: 10px 12px; }
.app-result--reveal .app-result__left > *, .app-result--reveal .app-result__right > * { grid-column: 1 / -1; }
.app-result--reveal > .app-reveal { grid-column: 1; grid-row: 1; align-self: center; }
.app-result--reveal .app-result__top { grid-column: 2; grid-row: 1; align-self: center; }
.app-result--reveal .app-result__title { font-size: 1.6rem; }
.app-result--reveal .app-stars { gap: 2px; }
.app-result--reveal .app-star svg { width: 48px; height: 48px; }
.app-result--reveal .app-coins__row { min-height: 28px; }
.app-result--reveal .app-result__quote { font-size: 0.92rem; padding: 6px 12px; }
.app-result--reveal .app-fact { padding: 10px 12px; }
.app-result--reveal .app-fact__text { font-size: 0.92rem; }
/* Upright, Continue stays in reach at the bottom when a long coin list makes the screen scroll. */
.app-result--reveal .app-actions {
  flex-direction: row; position: sticky; bottom: 0; z-index: 2; margin: -8px -4px 0; padding: 8px 4px 2px;
  background: linear-gradient(180deg, rgba(238, 123, 163, 0), rgba(238, 123, 163, 0.92) 35%);
}
.app-result--reveal .app-actions > .app-btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
.app-body.app-menu { justify-content: safe center; } /* a long menu on a short phone scrolls instead of losing its top */
.app-menu__list--long { gap: 9px; }
.app-menu__list--long .app-menubtn { min-height: 50px; padding-block: 6px; }
.app-menu__list--long .app-menubtn--main { min-height: 70px; }
.app-album__count {
  flex: none; display: grid; padding: 2px 12px; border-radius: 16px; border: 3px solid var(--ink); background: var(--cream); text-align: center;
  font-weight: 800; font-size: 0.78rem; line-height: 1.2; white-space: nowrap;
}
.app-album__section { display: grid; gap: 6px; }
.app-album__heading {
  font-size: 1.15rem; font-weight: 900; color: var(--cream); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink);
}
.app-albumgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 10px; }
.app-albumtile {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 6px; border-radius: 16px; border: 3px solid var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 38%), var(--cream); box-shadow: 3px 4px 0 var(--shadow);
  font: inherit; color: var(--ink); cursor: pointer; touch-action: manipulation;
}
button.app-albumtile:active { transform: translateY(2px); box-shadow: 1px 2px 0 var(--shadow); }
.app-albumtile__frame { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; border: 2px solid var(--ink); overflow: hidden; }
.app-albumtile__pic { display: block; width: 100%; height: 100%; }
.app-albumtile__name { max-width: 100%; font-size: 0.8rem; font-weight: 900; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-album__stars { display: flex; gap: 1px; justify-content: center; }
.app-album__stars .app-icon { width: 18px; height: 18px; }
.app-albumtile--locked { cursor: default; border-style: dashed; background: #eadbd0; box-shadow: none; }
.app-albumtile--locked .app-albumtile__frame { border-style: dashed; background: #f6ece4; }
.app-albumtile__shadow { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-albumtile__q { position: absolute; inset: 0 0 18% 0; display: grid; place-items: center; font-size: 2.2rem; font-weight: 900; color: #f6ece4; }
.app-albumtile--locked .app-albumtile__name { color: #8a756b; letter-spacing: 0.15em; }
.app-album__empty { text-align: center; font-weight: 800; background: rgba(255, 255, 255, 0.6); padding: 10px 14px; border-radius: 14px; }
.app-albumdetail { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(42, 33, 29, 0.5); }
.app-albumdetail__card { display: grid; justify-items: center; gap: 6px; width: min(100%, 300px); max-height: 100%; overflow-y: auto; }
.app-albumdetail__pic { display: block; width: min(100%, 224px); height: auto; border-radius: 14px; border: 3px solid var(--ink); }
.app-albumdetail__name { font-size: 1.4rem; font-weight: 900; text-align: center; overflow-wrap: anywhere; }
.app-albumdetail .app-album__stars .app-icon { width: 40px; height: 40px; }
.app-albumdetail__visits { font-weight: 700; color: #5f4a41; }
/* A boss or event face (T8.4): a small round gold seal with a star on its tile, and a stamp line on the big face. */
.app-albumtile--stamp { background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 38%), #ffe9a0; }
.app-albumtile__stamp {
  position: absolute; top: 3px; right: 3px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--ink); background: radial-gradient(circle at 35% 30%, #fff4b8, #ffd23f 60%, #e9a812); box-shadow: 0 2px 0 rgba(42, 33, 29, 0.35);
}
.app-albumtile__stamp svg { width: 18px; height: 18px; }
.app-albumdetail__stamp { display: flex; align-items: center; gap: 6px; padding: 2px 12px 2px 6px; border-radius: 999px; border: 2px solid var(--ink); background: #ffd23f; font-weight: 900; }
.app-albumdetail__stamp svg { width: 22px; height: 22px; }
.app-albumdetail__card > .app-btn { width: 100%; }
@media (orientation: landscape) and (max-height: 600px) {
  .app-result.app-result--reveal { display: flex; flex-direction: row; align-items: center; gap: 16px; }
  .app-result--reveal > .app-reveal { flex: none; height: min(calc(100vh - 40px), 290px); aspect-ratio: 4 / 5; }
  .app-result--reveal .app-actions { position: static; margin: 0; padding: 0; background: none; } /* the column scrolls as before (B13) */
  .app-result--reveal .app-result__quote { font-size: 0.82rem; padding: 4px 10px; }
  .app-result--reveal .app-reveal__frame { height: 100%; }
  .app-result--reveal .app-star svg { width: 44px; height: 44px; }
  .app-result--reveal .app-coins__row { min-height: 24px; }
  .app-result--reveal .app-fact { gap: 8px; padding: 8px 10px; }
  .app-result--reveal .app-fact__text { font-size: 0.88rem; }
  .app-result--reveal .app-actions > .app-btn--big { font-size: 1.05rem; min-height: 50px; }
  .app-menu__list--long { gap: 8px; }
  .app-menu__list--long .app-menubtn { min-height: 46px; padding-block: 4px; }
  .app-menu__list--long .app-menubtn--main { min-height: 60px; }
  .app-menu__list--long > .app-menubtn:last-child:nth-child(even) { grid-column: 1 / -1; }
  .app-albumgrid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
  .app-albumdetail { padding: 8px 16px; }
  .app-albumdetail__card { grid-template-columns: 176px minmax(0, 180px); align-items: center; column-gap: 14px; width: auto; }
  .app-albumdetail__pic { grid-row: 1 / span 4; width: 176px; }
}
@media (prefers-reduced-motion: reduce) { .app-reveal__tag { transition: none; } }
.app-still .app-reveal__tag { transition: none; }

/* ---------- Animations ---------- */
@keyframes app-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
@keyframes app-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(0.6) rotate(20deg); opacity: 0.6; } }
@keyframes app-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes app-star-pop { from { opacity: 0; transform: scale(0.2) rotate(-40deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

/* ---------- Phone held sideways ---------- */
@media (orientation: landscape) and (max-height: 600px) {
  .app-head { max-width: 860px; padding-top: max(6px, env(safe-area-inset-top)); }
  .app-head__title { font-size: 1.3rem; }
  .app-body { max-width: 860px; padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); gap: 10px; }
  .app-studio { flex-direction: row; padding-top: 4px; }
  .app-studio__notes { width: min(32%, 260px); max-height: none; }
  /* T5.3b: the shop is two columns: header, coins, reputation, tabs and extras on the left, the list on the full height on the right. */
  .app-screen--shop { display: grid; grid-template-columns: clamp(250px, 38%, 330px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 8px; }
  .app-screen--shop .app-head { grid-column: 1; grid-row: 1; max-width: none; margin: 0; padding-bottom: 4px; }
  .app-screen--shop .app-shopbar { grid-column: 1; grid-row: 2; max-width: none; margin: 0; align-self: start; max-height: 100%; overflow-y: auto; padding-bottom: 8px; }
  .app-screen--shop .app-shoplistframe { grid-column: 2; grid-row: 1 / span 2; }
  .app-screen--shop .app-shoplist { max-width: none; margin: 0; display: flex; flex-direction: column; flex: 1; padding: 8px max(12px, env(safe-area-inset-right)) max(36px, calc(env(safe-area-inset-bottom) + 24px)) 4px; gap: 8px; }
  .app-screen--shop .app-item { flex: none; padding-block: 5px; }
  .app-screen--shop .app-item__side { grid-auto-flow: column; align-items: center; justify-items: end; gap: 8px; }
  .app-wearing__pic { width: 46px; height: 94px; }
  .app-wearing { padding-block: 4px; }
  .app-title__tap { flex-direction: row; gap: 32px; }
  .app-title__start { margin-top: 6px; }
  .app-title__art { width: min(30vw, 62vh, 220px); }
  .app-title__name { font-size: clamp(2rem, 6vw, 3.4rem); }
  .app-name { padding: 12px 16px; gap: 8px; }
  .app-name__title { font-size: 1.3rem; }
  .app-name__hint { font-size: 0.8rem; }
  .app-menu { flex-direction: row; align-items: center; gap: 24px; }
  .app-menu__top { flex: 1; flex-direction: column; }
  .app-menu__art { width: 90px; }
  .app-menu__hello { font-size: 1.4rem; text-align: center; }
  .app-menu__list { flex: 1.3; grid-template-columns: 1fr 1fr; gap: 10px; }
  .app-menubtn { min-height: 52px; font-size: 1.05rem; }
  .app-menubtn--main { grid-column: 1 / -1; min-height: 66px; font-size: 1.3rem; }
  .app-intro { flex-direction: row; align-items: center; align-items: safe center; gap: 24px; } /* safe: a tall column scrolls, never cut at the top (T8.3) */
  .app-intro__who, .app-intro__what { flex: 1; justify-content: center; }
  .app-intro__portrait { width: min(30vh, 140px); }
  /* A boss or event pill (T8.4) is a line taller than a twist: its tip waits for the pop scene's hint line here. */
  .app-intro__what:has(.app-twist--boss) { gap: 8px; }
  .app-twist--boss { padding: 6px 12px; }
  .app-twist--boss .app-twist__tip { display: none; }
  .app-result { flex-direction: row; align-items: center; gap: 24px; }
  .app-result__left, .app-result__right { display: flex; flex-direction: column; flex: 1; justify-content: center; gap: 10px; min-width: 0; }
  .app-result__title { font-size: 1.6rem; }
  .app-star svg { width: 54px; height: 54px; }
  .app-coins { padding: 6px 12px; gap: 1px; }
  .app-coins__row { min-height: 24px; }
  /* B13 round 2c: up to eight coin lines (patch tips, nose strip bonus): slimmer pills, and the column scrolls
     instead of being cut off at the top and bottom when it is still too tall. */
  .app-coins .app-pill { min-height: 24px; padding-block: 0; }
  .app-coins .app-pill .app-icon { width: 18px; height: 18px; }
  .app-result__right {
    justify-content: safe center; gap: 6px; max-height: 100%; overflow-y: auto; scrollbar-width: thin;
    padding: 2px 6px 6px 0; box-sizing: border-box; /* room for the box shadows inside the scroll area */
  }
  .app-coins__row--total { margin-top: 2px; padding-top: 4px; }
  .app-result__quote { font-size: 0.85rem; padding: 4px 10px; }
  .app-rep { padding-block: 3px; }
  .app-fact { padding: 8px 12px; }
  .app-result .app-actions { flex-direction: row; }
  .app-result .app-actions > .app-btn { flex: 1; }
  .app-comics, .app-settings { display: grid; grid-template-columns: 1fr 1fr; align-content: start; align-items: start; gap: 10px; }
  .app-settings > .app-notice { grid-column: 1 / -1; }
  .app-about { display: grid; grid-template-columns: 110px 1fr 1fr; align-items: start; gap: 12px; }
  .app-about__art { width: 100px; }
  .app-tab { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shopmore { animation: none; }
  .app-mascot__face, .app-mascot__sparkle, .app-title__start, .app-star--on { animation: none; }
  .app-switch__knob { transition: none; }
}
.app-still .app-mascot__face, .app-still .app-mascot__sparkle, .app-still .app-title__start, .app-still .app-star--on { animation: none; }
.app-still .app-switch__knob { transition: none; }
.app-still .app-shopmore { animation: none; }

/* ---------- Game wiring (T3.1c): intro extras, special mode and end placeholders, the scrub job ---------- */
.app-intro__face { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-intro__hint {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; border: 3px dashed var(--ink);
  background: var(--yellow); font-weight: 800; font-size: 0.95rem;
}
.app-intro__menu { align-self: center; }
.pop-menu { order: -1; }
/* A finished customer's short end pause (pop-mode.js): no Menu, so the round always gets paid (it keeps its space). */
.pop-game--ending .pop-menu { visibility: hidden; }

.app-special, .app-end { align-items: center; justify-content: center; text-align: center; }
.app-body--center.app-special > *, .app-body--center.app-end > * { margin-block: 0; }
.app-special__art, .app-end__art { width: min(40vw, 150px); margin-inline: auto; }
.app-special__card, .app-end__card { display: grid; gap: 12px; justify-items: center; width: 100%; max-width: 460px; }
.app-special__chapter { font-size: 0.8rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.app-special__title, .app-end__title { font-size: 1.8rem; font-weight: 900; }
.app-end__title { color: var(--pink-deep); -webkit-text-stroke: 1px var(--ink); }
.app-end__thanks { font-size: 1.15rem; font-weight: 800; }

.app-scrub { align-items: center; justify-content: center; text-align: center; }
.app-scrub__card { width: 100%; display: grid; gap: 6px; }
.app-scrub__title { font-size: 1.5rem; font-weight: 900; }
.app-scrub__frame {
  position: relative; width: 100%; max-width: 480px; aspect-ratio: 480 / 300; flex: none; border-radius: 18px; overflow: hidden;
  border: 4px solid var(--ink); box-shadow: 4px 5px 0 var(--shadow);
}
.app-scrub__base, .app-scrub__grime, .app-scrub__fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The top layer takes the finger: no page scroll, no zoom, no text selection, no tap flash while scrubbing (T5.1b). */
.app-scrub__fx {
  touch-action: none; cursor: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.app-scrub__fx:focus-visible { outline: 4px solid var(--mint); outline-offset: -6px; }
.app-scrub__bar {
  position: relative; width: 100%; max-width: 480px; height: 30px; border-radius: 999px; overflow: hidden;
  border: 3px solid var(--ink); background: #fff3e6; display: grid; place-items: center;
}
.app-scrub__fill {
  position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #8fe3c9, var(--mint));
  transition: width 0.15s linear;
}
.app-scrub__meter { position: relative; font-weight: 900; font-size: 0.95rem; }
.app-scrub__how { font-weight: 800; font-size: 0.95rem; }
.app-scrub__keys { font-size: 0.85rem; }
.app-scrub__donebox { display: grid; gap: 6px; justify-items: center; }
.app-scrub__clean { font-weight: 900; font-size: 1.15rem; }
.app-scrub__done { padding: 6px 16px; border-radius: 999px; border: 3px solid var(--ink); background: var(--mint); font-weight: 900; }
.app-still .app-scrub__fill { transition: none; }

@media (orientation: landscape) and (max-height: 600px) {
  .app-special, .app-end { flex-direction: row; justify-content: center; gap: 24px; }
  .app-special__art, .app-end__art { width: min(30vh, 120px); margin: 0; }
  .app-scrub { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; align-content: center; gap: 6px 16px; }
  .app-scrub > :not(.app-scrub__frame) { grid-column: 1; }
  .app-scrub__frame { grid-column: 2; grid-row: 1 / span 7; width: min(100%, calc(80vh * 1.6)); height: auto; justify-self: center; }
  .app-scrub__card { padding: 8px 12px; }
  .app-scrub__title { font-size: 1.25rem; }
  .app-scrub__text { font-size: 0.9rem; }
}