/* ============================================================
   bokami town — scene styles (slice 1: chooser + street)
   ============================================================ */

html, body { margin: 0; height: 100%; overscroll-behavior: none; overscroll-behavior-y: none; }
/* the scrolling building pages can rubber-band past their content; html's default
   bg is white, which showed as white gaps top/bottom. Match it to the page so any
   revealed area is the soft cream, never white (the street is fixed so it's exempt). */
html { background: var(--cream-50); }
body { font-family: var(--font-body); background: var(--cream-50); overscroll-behavior: none; -webkit-overflow-scrolling: auto; touch-action: pan-y; /* allow vertical scroll, block pinch + double-tap zoom (the game is fixed-scale) */ }
/* the town is a game, not a document — stop double-tap/long-press from
   selecting text or popping the iOS callout menu while walking */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* iOS auto-zooms (and then our pinch-lock traps it) when a focused field is < 16px.
   Force 16px on every form field so focus never triggers that stuck-zoom state. */
input, textarea, select { font-size: 16px; }
/* but keep real reading content selectable (recipes, news, comics) */
.rm-recipe, .of-news, .interior__panel, .cmx-reader, .rm-vid__cap { -webkit-user-select: text; user-select: text; }

/* ================= CHOOSER ================= */
.ch-screen { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: 40px 20px 60px; background: radial-gradient(rgba(90,62,60,0.05) 1.5px, transparent 1.6px) 0 0 / 22px 22px, var(--cream-50); overflow: hidden; }
.ch-title { text-align: center; }
.ch-title .hand { font-family: var(--font-hand); font-weight: 600; font-size: 25px; color: var(--mauve-500); }
.ch-title h1 { font-size: clamp(36px, 5vw, 56px); margin: 2px 0 0; white-space: nowrap; }
.ch-cards { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; perspective: 1200px; }

.ch-card { width: 252px; border-radius: 22px; border: 3.5px solid var(--mauve-400); box-shadow: var(--shadow-md); cursor: pointer; position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform .18s ease-out, box-shadow .3s var(--ease-soft); will-change: transform; background: var(--white); }
.ch-card:hover { box-shadow: var(--shadow-lg); }
/* while the cursor is on the card the transform must track ~1:1 — the rest-state
   .18s transition would rubber-band behind the pointer (the "laggy tilt" bug) */
.ch-card.is-tilting { transition: transform .06s linear, box-shadow .3s var(--ease-soft); }
.ch-card.is-picked { animation: ch-pop .5s var(--ease-bounce); }
@keyframes ch-pop { 0%{transform:scale(1)} 40%{transform:scale(1.07)} 100%{transform:scale(1)} }
.ch-card__art { height: 240px; display: grid; place-items: center; border-bottom: 3px solid var(--mauve-400); position: relative; overflow: hidden; }
.ch-card__pose { grid-area: 1 / 1; height: 190px; filter: drop-shadow(0 10px 14px rgba(90,62,60,.18)); transition: opacity .22s var(--ease-soft), transform .22s var(--ease-soft); }
.ch-card__shine { position: absolute; inset: -60%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%); pointer-events: none; opacity: 0; transition: opacity .2s; }
.ch-card:hover .ch-card__shine { opacity: 1; }

/* --- Iridescent / holo hover (pokemon-card style) --- */
.ch-card__holo { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-soft); mix-blend-mode: overlay; border-radius: 18px; z-index: 3;
  background:
    radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.32) 6%, rgba(255,255,255,0) 42%),
    linear-gradient(115deg, transparent 22%, rgba(255,80,200,.65) 36%, rgba(80,200,255,.65) 47%, rgba(120,255,150,.55) 56%, rgba(255,225,80,.6) 66%, transparent 80%);
  background-size: 100% 100%, 320% 320%;
  background-position: 0 0, var(--gx, 50%) var(--gy, 50%);
}
.ch-card__holo--spectrum { mix-blend-mode: color-dodge; opacity: 0; transition: opacity .3s var(--ease-soft); position: absolute; inset: 0; pointer-events: none; border-radius: 18px; z-index: 3;
  background: linear-gradient(105deg, transparent 30%, rgba(255,60,160,.28) 44%, rgba(90,210,255,.28) 52%, rgba(255,230,100,.24) 60%, transparent 74%);
  background-size: 260% 260%;
  background-position: var(--gx, 50%) var(--gy, 50%);
}
.ch-card.fx-holo:hover .ch-card__holo { opacity: var(--holo-op, .9); }
.ch-card.fx-holo:hover .ch-card__holo--spectrum { opacity: calc(var(--holo-op, .9) * .8); }
/* per-card hue: tints the holographic sheen (CMS "Holo hue" slider) */
.ch-card .ch-card__holo, .ch-card .ch-card__holo--spectrum, .ch-card .ch-card__gloss { filter: hue-rotate(var(--holo-hue, 0deg)); }
.ch-card.fx-holo:hover { box-shadow: 0 18px 44px rgba(120,70,160,.28), 0 0 0 1px rgba(255,255,255,.4) inset; }

/* gradient gloss rim on the card outline while tilting (VMV-style rim light) */
.ch-card__gloss { position: absolute; inset: 0; border-radius: 19px; padding: 4px; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-soft); z-index: 4;
  background: conic-gradient(from 0deg at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.95), rgba(255,170,220,.75) 22%, rgba(255,255,255,.12) 38%,
    rgba(150,220,255,.55) 55%, rgba(255,255,255,.1) 70%, rgba(255,220,160,.7) 86%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.ch-card.fx-holo:hover .ch-card__gloss { opacity: 1; }
.ch-card__body { padding: 14px 16px 18px; background: var(--white); }
.ch-card__name { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--text-strong); line-height: 1; display: flex; align-items: baseline; justify-content: space-between; }
.ch-card__species { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.ch-card__role { font-size: 13.5px; font-weight: 600; color: var(--text-body); margin: 5px 0 10px; }
.ch-card__traits { display: flex; gap: 6px; flex-wrap: wrap; }
.ch-card__traits span { text-transform: lowercase; }
.ch-hint { font-size: 14px; font-weight: 600; color: var(--text-muted); }

/* ================= RAMEN SHOP PAGE ================= */
.ramen { min-height: 100vh; min-height: 100dvh; background: var(--cream-50); padding-bottom: 90px; }
.rm-head { position: relative; background: var(--mico-soft); border-bottom: 3.5px solid var(--mauve-400); padding: 0 0 38px; }
.rm-noren { display: flex; justify-content: center; gap: 6px; height: 64px; overflow: hidden; }
.rm-noren span { width: 86px; background: var(--mauve-400); border-radius: 0 0 18px 18px; border: 3px solid var(--mauve-500); border-top: none; position: relative; }
.rm-noren span::after { content: ""; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(251,250,246,.7); }
.rm-head__bar { display: flex; align-items: center; justify-content: flex-end; padding: 24px 20px 0; }
/* ONE bokami logo, same top-left spot on every screen. The street/house HUD
   doesn't scroll, so its logo stays fixed. Building pages DO scroll, so their
   logo is absolute — anchored to the screen-top header so it scrolls away with
   the page instead of floating over the content. */
.hud__logo, .rm-head__bar > img, .st__bar > img {
	top: calc(24px + env(safe-area-inset-top)); left: 24px;
	height: 40px; width: auto; display: block; z-index: 21; pointer-events: none;
}
/* absolute (not fixed) so it rides inside the HUD bar — stays aligned with the
   HUD buttons even when the WP admin bar pushes the bar down */
.hud__logo { position: absolute; }
.rm-head__bar > img, .st__bar > img { position: absolute; }
.rm-title { text-align: center; margin-top: 8px; padding-left: 22px; padding-right: 22px; }
.rm-title__hand { font-family: var(--font-hand); font-weight: 600; font-size: 23px; color: var(--mauve-500); }
.rm-title h1 { font-size: clamp(34px, 4.6vw, 52px); margin: 2px 0 8px; }
.rm-title p { font-family: var(--font-body); font-size: 16px; color: var(--text-body); margin: 0; }
/* the plain band reuses the hero's .bk-hero-caption, which carries max-width:52ch
   + non-auto margins → the caption box anchored left of the centered title ("drift").
   Re-center it inside the band. */
.rm-title .bk-hero-caption { max-width: 52ch; margin-left: auto; margin-right: auto; }
.rm-title .bk-hero-title { font-size: clamp(34px, 4.6vw, 52px); }

.rm-chef { display: flex; gap: 18px; align-items: flex-start; max-width: 760px; margin: 30px auto 0; padding: 20px 24px; background: var(--kato-soft); border: 3.5px solid var(--mauve-400); border-radius: 22px; box-shadow: var(--shadow-pop-sm); }
.rm-chef--quiet { background: var(--white); }
.rm-chef__fig { position: relative; width: 74px; height: 96px; flex: none; background: var(--cream-100); border: 3px solid var(--mauve-400); border-radius: 30px 30px 22px 22px; }
.rm-chef__hat { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 54px; height: 32px; background: var(--white); border: 3px solid var(--mauve-400); border-radius: 14px 14px 4px 4px; }
.rm-chef__hat::before { content: ""; position: absolute; top: -10px; left: -8px; right: -8px; height: 20px; background: var(--white); border: 3px solid var(--mauve-400); border-radius: 999px; }
.rm-chef__face { position: absolute; top: 30px; left: 0; right: 0; display: flex; justify-content: center; gap: 13px; }
.rm-chef__face i { width: 5px; height: 7px; border-radius: 50%; background: var(--mauve-700); }
.rm-chef__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-strong); margin-bottom: 4px; }
.rm-chef__line { font-family: var(--font-hand); font-weight: 600; font-size: 20px; color: var(--mauve-700); line-height: 1.45; }
.rm-chef__cta { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--cream-50); background: var(--primary); border: 3px solid var(--mauve-500); border-radius: 999px; padding: 9px 20px; cursor: pointer; box-shadow: 0 4px 0 var(--mauve-700); transform: translateY(-1px); transition: transform .28s var(--ease-bounce), box-shadow .28s var(--ease-bounce), background-color .28s ease; animation: cg-bob 1.4s var(--ease-soft) infinite; }
.rm-chef__cta:hover:not(:disabled) { animation: none; transform: translateY(3px); box-shadow: 0 1px 0 var(--mauve-700); background: #D9968D; }
.rm-chef__cta:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--mauve-700); }
.rm-chef__cta--ghost { background: var(--white); color: var(--mauve-600); animation: none; border-color: var(--mauve-400); box-shadow: 0 4px 0 var(--mauve-400); }
.rm-chef__cta--ghost:hover:not(:disabled) { background: #F4AB9A; color: #FBF6F0; box-shadow: 0 1px 0 var(--mauve-400); }
.rm-chef__cta--ghost:active:not(:disabled) { box-shadow: 0 0 0 var(--mauve-400); }
.rm-chef__stamp { display: inline-block; margin-top: 10px; font-weight: 800; font-size: 14px; color: #3F6F5C; background: var(--success-bg); border: 2.5px solid var(--success); border-radius: 999px; padding: 6px 14px; }
.rm-chef__hint { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--text-muted); }

.rm-archive { max-width: 1080px; margin: 44px auto 0; padding: 0 24px; }
.rm-filters { position: sticky; top: 14px; z-index: 24; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; width: fit-content; background: rgba(251,250,246,.86); backdrop-filter: blur(10px); border: 2.5px solid var(--mauve-100); border-radius: 999px; padding: 8px 20px 8px 16px; box-shadow: var(--shadow-sm); }
.rm-filters__select { display: none; font-family: var(--font-body); font-weight: 800; font-size: 14px; color: var(--mauve-600); background: var(--white); border: 2.5px solid var(--mauve-300); border-radius: 999px; padding: 8px 14px; cursor: pointer; outline: none; }
@media (max-width: 640px) {
  .rm-filters { padding: 8px 14px; }
  .rm-filters > .rm-chip { display: none; }  /* chips collapse into the pill dropdown */
}
.rm-filters__label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-right: 8px; margin-left: 4px; }
.rm-chip { font-family: var(--font-body); font-weight: 800; font-size: 14px; color: var(--mauve-600); background: var(--white); border: 2.5px solid var(--mauve-200); border-radius: 999px; padding: 8px 18px; cursor: pointer; box-shadow: 0 3px 0 var(--mauve-200); transform: translateY(-1px); transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease-bounce), background-color .25s ease, color .25s ease, border-color .25s ease; }
.rm-chip:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--mauve-400); background: #F4AB9A; border-color: var(--mauve-400); color: #FBF6F0; }
.rm-chip:active { transform: translateY(3px); box-shadow: 0 0 0 var(--mauve-400); }
.rm-chip.on { color: var(--cream-50); background: var(--primary); border-color: var(--mauve-500); box-shadow: 0 0 0 var(--mauve-700); transform: translateY(2px); pointer-events: none; }

/* masonry: cards keep each video's own aspect (portrait + landscape mix) */
/* reliable responsive GRID (same approach as the store grid + vertwo Works) —
   cards keep each video's aspect; top-aligned rows. Multi-column was fragile. */
/* uniform grid + FLIP filter (same proven pattern as the store's .ms-grid).
   Every card is identical size (square cover thumb) so the grid never shifts;
   the FLIP filter animates surviving cards and fades leavers/newcomers. */
.rm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .rm-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (max-width: 760px)  { .rm-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.rm-card { position: relative; background: var(--white); border: 3px solid var(--mauve-400); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .25s var(--ease-bounce), box-shadow .3s; }
.rm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rm-card:hover .rm-card__thumb { filter: brightness(.98); }
.rm-card.is-hidden { display: none; }
/* three-phase filter animation — verbatim port of vertwo works-archive (pmLeave / pmEnter) */
.rm-card.is-leaving, .ms-card.is-leaving { animation: pmLeave 480ms cubic-bezier(.83,0,.17,1) both; pointer-events: none; }
@keyframes pmLeave { to { opacity: 0; transform: scale(.94); } }
.rm-card.is-pending-enter { opacity: 0; pointer-events: none; }
.rm-card.is-entering, .ms-card.is-entering { animation: pmEnter 640ms cubic-bezier(.83,0,.17,1) both; }
@keyframes pmEnter { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: none; } }
/* fixed square thumb (uniform cards) — cover crops every aspect to the same box */
.rm-card__thumb { position: relative; aspect-ratio: 1 / 1; border-bottom: 3px solid var(--mauve-400); background-image: radial-gradient(rgba(90,62,60,0.08) 1.5px, transparent 1.6px); background-size: 14px 14px; overflow: hidden; }
img.rm-card__clip { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
video.rm-card__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.rm-card__thumb .rm-card__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.rm-card__dur, .rm-card__tag--corner { z-index: 2; }
.rm-card__play { width: 52px; height: 52px; border-radius: 50%; background: rgba(251,250,246,.94); border: 3px solid var(--mauve-400); display: grid; place-items: center; color: var(--mauve-500); box-shadow: 0 4px 12px rgba(90,62,60,.22); transition: opacity .25s ease, transform .25s var(--ease-bounce); }
.rm-card__play .bk-play-svg { margin-left: -1px; }
/* the preview takes over on hover, so fade our play badge out */
.rm-card:hover .rm-card__play { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
.rm-card__dur { position: absolute; right: 10px; bottom: 10px; font-size: 11.5px; font-weight: 800; color: var(--cream-50); background: var(--mauve-600); border-radius: 999px; padding: 3px 10px; }
.rm-card__body { padding: 12px 15px 14px; }
.rm-card__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--text-strong); }
.rm-card__tag { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: lowercase; color: var(--cream-50); border-radius: 999px; padding: 4px 10px; flex: none; }
/* category pill pinned to the thumb corner — card heights stay uniform across 1/2-line titles */
.rm-card__tag--corner { position: absolute; top: 10px; right: 10px; border: 2px solid rgba(251,250,246,.65); }

.rm-recipe { max-width: 760px; margin: 50px auto 0; padding: 0 24px; }
.rm-recipe__card { position: relative; background: var(--white); border: 3.5px solid var(--mauve-400); border-radius: 22px; padding: 30px 34px; box-shadow: var(--shadow-pop); overflow: hidden; }
.rm-recipe__hand { font-family: var(--font-hand); font-weight: 600; font-size: 21px; color: var(--mauve-500); }
.rm-recipe__card h2 { font-size: 30px; margin: 2px 0 14px; }
.rm-recipe__card ol { margin: 0; padding-left: 22px; max-width: 430px; }
.rm-recipe__card li { font-size: 15.5px; color: var(--text-body); line-height: 1.55; margin-bottom: 8px; }
.rm-recipe__bowl { position: absolute; right: 26px; bottom: 18px; }
.rm-bowl { position: relative; width: 130px; height: 74px; background: var(--mico-deep); border: 3.5px solid var(--mauve-400); border-radius: 8px 8px 60px 60px; }
.rm-bowl__noodles { position: absolute; top: -14px; left: 8px; right: 8px; height: 26px; background: var(--kato-soft); border: 3px solid var(--mauve-400); border-radius: 999px; }
.rm-bowl__egg { position: absolute; top: -22px; right: 22px; width: 30px; height: 24px; background: var(--white); border: 3px solid var(--mauve-400); border-radius: 50%; }
.rm-bowl__egg::after { content: ""; position: absolute; inset: 5px 7px; background: var(--orange-bright); border-radius: 50%; }

/* ================= CATCH MINI-GAME ================= */
.cg { position: fixed; inset: 0; z-index: 60; background: rgba(90,62,60,.5); display: grid; place-items: center; animation: fade-in .3s; }
.cg__stage { position: relative; width: min(520px, 94vw); height: min(760px, 92vh); background: #DCEEF4; border: 4px solid var(--mauve-400); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-lg); touch-action: none; cursor: none;
  background-image: radial-gradient(rgba(255,255,255,.55) 3px, transparent 3.5px), radial-gradient(rgba(255,255,255,.4) 2px, transparent 2.5px);
  background-size: 90px 90px, 60px 60px; background-position: 0 0, 30px 45px; }
.cg__close { z-index: 5; cursor: pointer; }
.cg__intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 30px; cursor: pointer; }
.cg__intro h2 { font-size: 32px; margin: 6px 0 0; color: var(--text-strong); }
.cg__id { font-family: var(--font-hand); font-weight: 600; font-size: 20px; color: var(--boro-deep); margin: 0; }
.cg__intro-boro { height: 180px; margin-top: 8px; }
.cg__tap { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--mauve-300); animation: hint-bob 1.6s var(--ease-soft) infinite; margin-top: 10px; }
.cg__stamp { width: 110px; height: 110px; border-radius: 50%; border: 4px solid var(--mauve-400); background: var(--mico-soft); display: grid; place-items: center; font-family: var(--font-display); font-size: 52px; color: var(--mauve-600); transform: rotate(-8deg); }
.cg__hud { position: absolute; top: 16px; left: 20px; right: 60px; display: flex; justify-content: space-between; align-items: center; z-index: 4; }
.cg__score { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--text-strong); background: rgba(255,255,255,.85); border: 3px solid var(--mauve-400); border-radius: 999px; padding: 4px 16px; }
.cg__miss i { font-style: normal; font-size: 22px; color: var(--boro-deep); opacity: .35; margin-left: 4px; }
.cg__miss i.on { color: var(--mico-deep); opacity: 1; }
.cg__boro { position: absolute; bottom: 14px; transform: translateX(-50%); width: 130px; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.cg__boro img { height: 130px; }
.cg__plate { width: 110px; height: 22px; background: var(--white); border: 3.5px solid var(--mauve-400); border-radius: 50%; margin-bottom: -32px; z-index: 2; box-shadow: var(--shadow-sm); }
.cg-food { position: absolute; width: 44px; height: 40px; pointer-events: none; }
.cg-food--onigiri { background: var(--white); border: 3px solid var(--mauve-400); border-radius: 46% 46% 22% 22% / 60% 60% 18% 18%; }
.cg-food--onigiri::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 4px; height: 12px; background: var(--mauve-700); border-radius: 3px; }
.cg-food--cake { background: var(--mico-bg); border: 3px solid var(--mauve-400); border-radius: 10px 10px 6px 6px; }
.cg-food--cake::after { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--mico-deep); border: 2.5px solid var(--mauve-400); }
.cg-food--apple { background: var(--coral); border: 3px solid var(--mauve-400); border-radius: 50%; }
.cg-food--apple::after { content: ""; position: absolute; top: -9px; left: 55%; width: 5px; height: 10px; background: var(--mauve-400); border-radius: 3px; }
/* prohibited items */
.cg-food--durian { background: #B9CC8E; border: 3px solid var(--mauve-400); border-radius: 46% 54% 50% 50% / 58% 58% 42% 42%; }
.cg-food--durian::before { content: ""; position: absolute; inset: -7px; background: radial-gradient(circle at 20% 10%, #B9CC8E 3px, transparent 3.5px), radial-gradient(circle at 50% 2%, #B9CC8E 3.5px, transparent 4px), radial-gradient(circle at 80% 10%, #B9CC8E 3px, transparent 3.5px); }
.cg-food--durian::after { content: "⚠"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: var(--mauve-600); }
.cg-food--soap { background: #CBB9E2; border: 3px solid var(--mauve-400); border-radius: 12px; }
.cg-food--soap::after { content: ""; position: absolute; top: -8px; left: 22%; width: 9px; height: 9px; border-radius: 50%; border: 2.5px solid var(--mauve-400); background: #E7DDF4; box-shadow: 14px -5px 0 -2px #E7DDF4, 14px -5px 0 0 var(--mauve-400); }

/* ================= OFFICE PAGE ================= */
.of { min-height: 100vh; min-height: 100dvh; background: var(--cream-50); padding-bottom: 90px; }
.of-head { position: relative; background: var(--kato-soft); border-bottom: 3.5px solid var(--mauve-400); padding: 0 0 30px; }
.of-windows { display: flex; justify-content: center; gap: 14px; margin-top: 22px; }
.of-windows i { width: 54px; height: 38px; background: var(--boro-soft); border: 3px solid var(--mauve-400); border-radius: 8px; }

.of-boss { position: relative; width: 74px; height: 96px; flex: none; background: #D8C4A8; border: 3px solid var(--mauve-400); border-radius: 30px 30px 22px 22px; }
.of-boss--big { width: 96px; height: 124px; margin-top: 8px; }
.of-boss__ears { position: absolute; top: -14px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 6px; }
.of-boss__ears i { width: 22px; height: 26px; background: #C0A887; border: 3px solid var(--mauve-400); border-radius: 50% 50% 30% 30%; }
.of-boss__face { position: absolute; top: 30px; left: 0; right: 0; display: flex; justify-content: center; gap: 13px; }
.of-boss__face i { width: 5px; height: 7px; border-radius: 50%; background: var(--mauve-700); }
.of-boss__tie { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); width: 13px; height: 26px; background: var(--mico-deep); border: 2.5px solid var(--mauve-400); border-radius: 3px 3px 8px 8px; }

.of-wall { max-width: 860px; margin: 40px auto 0; padding: 0 24px; }
.of-wall__board { background: #E8D5B5; border: 4px solid var(--mauve-400); border-radius: 18px; padding: 22px 24px 26px; box-shadow: var(--shadow-pop-sm); }
.of-wall__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.of-wall__label { white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--mauve-600); background: var(--white); border: 2.5px solid var(--mauve-400); border-radius: 999px; padding: 5px 14px; display: inline-block; }
.of-wall__nav { display: flex; gap: 8px; }
.of-wall__arrow { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--mauve-400); background: var(--white); color: var(--mauve-600); font-size: 17px; font-weight: 800; cursor: pointer; transition: all .25s var(--ease-bounce); }
.of-wall__arrow:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-pop-sm); }
.of-wall__arrow:disabled { opacity: .35; cursor: default; }
.of-wall__viewport { overflow: hidden; padding: 14px 10px; }
.of-wall__track { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: calc(25% - 12px); gap: 16px; transition: transform .7s cubic-bezier(.83,0,.17,1); }
@media (max-width: 880px) { .of-wall__track { grid-auto-columns: calc(50% - 8px); } }
.of-poster { cursor: pointer; position: relative; border: 3px solid var(--mauve-400); border-radius: 10px; padding: 26px 14px 16px; text-align: center; transform: rotate(var(--rot, 0deg)); box-shadow: var(--shadow-sm); transition: transform .7s cubic-bezier(.83,0,.17,1); overflow: hidden; }
.of-poster:hover { transform: rotate(0deg) translateY(-4px); transition-duration: .3s; }
/* parallax lives on the inner content so cards never overlap their neighbors */
.of-poster__inner { transform: translateX(var(--par, 0px)); transition: transform .7s cubic-bezier(.83,0,.17,1); }
.of-poster--lb { cursor: default; width: min(420px, 80vw); padding: 60px 36px 48px; }
.of-poster--lb .of-poster__big { font-size: 34px; }
.of-poster--lb .of-poster__small { font-size: 18px; }
.of-poster__pin { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--mico-deep); border: 2.5px solid var(--mauve-400); z-index: 3; }
/* lift the pin above the image on photo posters + give it a little drop so it reads as a pin */
.of-poster--img .of-poster__pin { top: 2px; box-shadow: 0 2px 4px rgba(90,62,60,.3); }
.of-poster__big { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text-strong); margin-bottom: 6px; }
.of-poster__small { font-size: 12.5px; font-weight: 600; color: var(--text-muted); line-height: 1.4; }
/* image posters in the wall-magazine grid — the uploaded image fills the poster
   frame at a consistent aspect so the 2-row grid stays tidy */
.of-poster--img { padding: 8px; }
.of-poster--img .of-poster__inner { display: flex; flex-direction: column; gap: 6px; }
.of-poster__img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 2.5px solid var(--mauve-400); border-radius: 8px; background: var(--cream-50); }
.of-poster__cap { text-align: center; }
.of-poster__cap b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text-strong); line-height: 1.2; }
.of-poster__cap span { font-size: 11px; color: var(--text-muted); line-height: 1.35; }
/* lightbox: full uploaded poster at its own aspect */
.of-lb-img { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(560px, 90vw); }
.of-lb-img .of-poster__img { aspect-ratio: auto; width: auto; height: auto; max-width: min(560px, 90vw); max-height: 74vh; object-fit: contain; border-width: 4px; border-radius: 14px; box-shadow: var(--shadow-lg); }
.of-poster__cap--lb b { color: var(--cream-50); font-size: 18px; }
.of-poster__cap--lb span { color: rgba(251,250,246,.82); }

.of-news { max-width: 860px; margin: 44px auto 0; padding: 0 24px; }
.of-news h2 { font-size: 30px; margin: 0 0 18px; }
.of-news__list { display: flex; flex-direction: column; gap: 14px; }
.of-news__item { background: var(--white); border: 3px solid var(--mauve-400); border-radius: 16px; padding: 18px 22px; box-shadow: var(--shadow-sm); }
.of-news__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.of-news__date { font-size: 12.5px; font-weight: 800; color: var(--text-muted); }
.of-news__item h3 { font-size: 20px; margin: 0 0 4px; }
.of-news__item p { font-size: 14.5px; color: var(--text-body); margin: 0; }
.of-news__item--link { cursor: pointer; transition: transform .25s var(--ease-bounce), box-shadow .25s, border-color .25s; }
.of-news__item--link:hover { transform: translateY(-3px); border-color: var(--mauve-500); box-shadow: var(--shadow-md); }
.of-news__more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 800; color: var(--mauve-600); }
.of-news__item--link:hover .of-news__more { text-decoration: underline; }

/* ================= NEWS ARTICLE PAGE ================= */
.nw { min-height: 100vh; min-height: 100dvh; background: var(--cream-50); padding: 0 0 90px; }
.nw__band { position: relative; border-bottom: 3.5px solid var(--mauve-400); padding: 26px 24px 96px; }
.nw__band-inner { max-width: 840px; margin: 0 auto; }
.nw__content { max-width: 840px; margin: 0 auto; padding: 0 24px; }
.nw__bar { margin-bottom: 38px; }
.nw__head { margin-bottom: 0; }
.nw__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.nw__date { font-size: 13px; font-weight: 800; color: var(--text-muted); white-space: nowrap; }
.nw__byline { font-family: var(--font-hand); font-weight: 600; font-size: 16px; color: var(--mauve-500); white-space: nowrap; }
.nw__head h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; margin: 0 0 14px; letter-spacing: -0.01em; text-wrap: pretty; }
.nw__lead { font-size: 19px; line-height: 1.6; color: var(--text-body); font-weight: 600; margin: 0; text-wrap: pretty; }
.nw-hero { position: relative; margin: -64px 0 30px; aspect-ratio: 16 / 8; background: var(--white); border: 3.5px solid var(--mauve-400); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); }
.nw-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nw-hero__stripes { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(90,62,60,.06) 0 18px, transparent 18px 36px); }
.nw-hero__cap { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: max-content; max-width: 84%; text-align: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--mauve-600); background: rgba(251,250,246,.85); border: 2px dashed var(--mauve-300); border-radius: 10px; padding: 8px 14px; }
.nw__body { font-size: 16.5px; line-height: 1.75; color: var(--text-body); }
.nw__body p { margin: 0 0 18px; text-wrap: pretty; }
.nw__quote { margin: 30px 0; padding: 4px 0 4px 26px; border-left: 4px solid var(--mauve-300); font-family: var(--font-hand); font-weight: 600; font-size: 24px; line-height: 1.5; color: var(--mauve-600); }
.nw__foot { margin-top: 40px; border-top: 3px dashed var(--mauve-200); padding-top: 26px; display: flex; flex-direction: column; gap: 26px; }
.nw__share { display: flex; align-items: center; gap: 16px; }
.nw__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nw__navcard { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; font-family: var(--font-body); background: var(--white); border: 3px solid var(--mauve-300); border-radius: 14px; padding: 14px 18px; cursor: pointer; transition: transform .25s var(--ease-bounce), border-color .25s; }
.nw__navcard:hover { transform: translateY(-3px); border-color: var(--mauve-500); }
.nw__navcard span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); white-space: nowrap; }
.nw__navcard b { font-size: 15px; color: var(--mauve-700); }
.nw__navcard--r { align-items: flex-end; text-align: right; }
@media (max-width: 640px) {
  .nw__nav { grid-template-columns: 1fr; }
  .nw__navcard--r { align-items: flex-start; text-align: left; }
  /* tighter side gutters + a roomier, non-clashing top bar */
  .nw__band { padding: calc(20px + env(safe-area-inset-top)) 16px 84px; }
  .nw__content { padding: 0 16px; }
  .nw__bar { margin-bottom: 22px; gap: 10px; flex-wrap: wrap; }
  .nw__bar .hud-pill { font-size: 12px; padding: 6px 11px; }
  .nw__meta { flex-wrap: wrap; }
  .nw__head h1 { font-size: clamp(26px, 7vw, 34px); }
}


/* ================= QUIZ MINI-GAME ================= */
.qz__stage { background: #FBF0D7; cursor: default;
  background-image: radial-gradient(rgba(233,200,113,.4) 3px, transparent 3.5px);
  background-size: 70px 70px; }
.qz__play { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 34px; gap: 18px; }
.qz__progress { display: flex; gap: 8px; justify-content: center; }
.qz__progress i { width: 30px; height: 8px; border-radius: 999px; border: 2px solid var(--mauve-400); background: transparent; }
.qz__progress i.done { background: var(--mauve-400); }
.qz__progress i.now { background: var(--kato-deep); }
.qz__q { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--text-strong); text-align: center; line-height: 1.3; min-height: 70px; display: grid; place-items: center; }
.qz__answers { display: flex; flex-direction: column; gap: 12px; }
.qz__a { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--mauve-700); background: var(--white); border: 3px solid var(--mauve-300); border-radius: 14px; padding: 14px 18px; cursor: pointer; transition: all .2s var(--ease-bounce); text-align: left; }
.qz__a:hover { transform: translateY(-2px); border-color: var(--mauve-400); box-shadow: var(--shadow-pop-sm); }
.qz__a.right { background: var(--success-bg); border-color: var(--success); color: #3F6F5C; }
.qz__a.wrong { background: var(--danger-bg); border-color: var(--danger); color: #9A3F36; }

/* ================= LIGHTBOX ================= */
/* height:100dvh (not inset:0) so content centres in the VISIBLE viewport on iOS
   — fixes the lightbox sitting too high behind the Safari toolbars */
.lb { position: fixed; top: 0; left: 0; right: 0; height: 100dvh; z-index: 70; background: rgba(12,10,12,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: fade-in .25s; overflow: hidden; }
.lb__track { position: absolute; inset: 0; display: flex; transition: transform .65s cubic-bezier(.83,0,.17,1); }
.lb__slide { flex: 0 0 100%; display: grid; place-items: center; padding: 60px 90px; overflow: hidden; }
.lb__inner { transition: transform .65s cubic-bezier(.83,0,.17,1); cursor: pointer; max-width: 100%; }
.lb__close { position: absolute; top: 18px; right: 18px; z-index: 4; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--cream-50); background: transparent; color: var(--cream-50); font-size: 17px; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.3); transform: translateY(-1px); transition: all .2s var(--ease-bounce); }
.lb__close:hover { background: #F4AB9A; border-color: #F4AB9A; color: #FBF6F0; transform: translateY(3px); box-shadow: 0 0 0 rgba(0,0,0,.3); }
.lb__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--cream-50); background: rgba(251,250,246,.08); color: var(--cream-50); font-size: 20px; font-weight: 800; cursor: pointer; transition: all .25s var(--ease-bounce); }
.lb__arrow:hover { background: rgba(251,250,246,.22); transform: translateY(-50%) scale(1.08); }
.lb__arrow--l { left: 22px; } .lb__arrow--r { right: 22px; }
.lb__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--cream-50); opacity: .85; }
@media (max-width: 760px) {
  .lb__slide { padding: 24px 16px; }
  .lb__arrow { width: 42px; height: 42px; font-size: 16px; }
  .lb__arrow--l { left: 8px; } .lb__arrow--r { right: 8px; }
  .lb-video, .lb-video__player { max-width: 92vw; max-height: 64vh; }
  .lb-video { min-width: 200px; min-height: 140px; }
  .lb-video__title { font-size: 17px; }
}
/* lightbox media sizes to the video's own aspect — no letterbox bars for square/portrait/landscape */
.lb-video-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(820px, 92vw); }
.lb-video__player { display: block; max-width: 92vw; max-height: 74vh; width: auto; height: auto; background: #000; border-radius: 18px; z-index: 1; }
.lb-video { position: relative; display: grid; place-items: center; max-width: min(820px, 92vw); max-height: 74vh; min-width: 240px; min-height: 160px; border: 4px solid var(--mauve-400); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg);
  background-image: radial-gradient(rgba(90,62,60,0.08) 1.5px, transparent 1.6px); background-size: 14px 14px; }
/* meta sits BELOW the player (not overlaid) so it never collides with the
   native control bar — the cause of the cramped square-video UI on iPad */
.lb-video__meta { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 92vw; flex-wrap: wrap; }
.lb-video__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--cream-50); }
.lb-video__dur { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--cream-50); background: var(--mauve-600); border-radius: 999px; padding: 4px 12px; }

/* quiz timer */
.qz__timer { height: 10px; border: 2.5px solid var(--mauve-400); border-radius: 999px; overflow: hidden; background: var(--white); }
.qz__timer i { display: block; height: 100%; border-radius: 999px; transition: width .08s linear; }
.qz__late { text-align: center; font-family: var(--font-hand); font-weight: 600; font-size: 19px; color: var(--danger); }

/* ================= MICO'S STUDIO ================= */
.st { position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: linear-gradient(180deg, #F4E3E0 0%, #EFD9D2 60%, #E9CFC6 100%); display: flex; flex-direction: column; }
.st__bg { position: absolute; inset: 0; pointer-events: none; }
.st__bg > i { position: absolute; border-radius: 50%; filter: blur(26px); opacity: .55; }
.st__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st__shelf { position: absolute; left: 4%; right: 4%; top: 34%; height: 16px; background: rgba(178,99,98,.25); border-radius: 8px; filter: blur(7px); }
.st__lamp { position: absolute; right: 12%; top: 12%; width: 60px; height: 130px; background: rgba(90,62,60,.18); border-radius: 30px 30px 8px 8px; filter: blur(9px); }
.st__bar { position: relative; z-index: 4; }
.st__title { position: relative; z-index: 4; text-align: center; margin-top: 18px; padding: 0 20px; }
.st__title h1 { font-size: clamp(28px, 3.8vw, 42px); margin: 0; }

.st__rig { position: relative; z-index: 3; flex: 1; min-height: 0; display: grid; place-items: center; padding: 18px 0 34px; }
.ipad { position: relative; width: min(880px, 88vw); aspect-ratio: 4 / 2.85; background: var(--mauve-700); border: 4px solid var(--mauve-400); border-radius: 34px; padding: 16px; box-shadow: 0 30px 60px rgba(90,62,60,.35); }
.ipad__cam { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: #2C1E1D; }
.ipad__screen { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #FBD9D4 0%, #F6E3DA 55%, #EFE0EA 100%);
}
.ipad__status { display: flex; justify-content: space-between; padding: 8px 18px 2px; font-family: var(--font-body); font-weight: 800; font-size: 12.5px; color: var(--mauve-700); white-space: nowrap; }
.ipad__grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px 8px; padding: 8px 22px 0; align-items: center; }

/* --- paged folder home screen (iPadOS style) --- */
.ipad__pagesWrap { flex: 1; position: relative; overflow: hidden; margin: 4px 22px 0; }
.ipad__pagesTrack { position: absolute; inset: 0; transition: transform .55s cubic-bezier(.83,0,.17,1); }
.fold { position: absolute; width: 25%; height: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: transparent; border: none; cursor: pointer; padding: 4px; }
.fold:hover .fold__icon { transform: translateY(-4px) scale(1.05); }
.fold:active .fold__icon { transform: scale(.93); }
.fold__icon { width: clamp(54px, 7vw, 80px); height: clamp(54px, 7vw, 80px); border-radius: 24%; border: 3px solid var(--mauve-400); background: rgba(255,255,255,.55); backdrop-filter: blur(4px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; padding: 8px; transition: transform .25s var(--ease-bounce); box-shadow: 0 4px 10px rgba(90,62,60,.16); }
.fold__icon i { border-radius: 26%; border: 2px solid var(--mauve-400); font-style: normal; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 10px; color: var(--mauve-700); }
/* real comic cover (first uploaded panel) fills the folder icon */
.fold__icon i.fold__cover { border: none; border-radius: 16%; background-size: cover; background-position: center top; }

/* --- dock --- */
.ipad__dock2 { display: flex; align-items: flex-start; justify-content: center; gap: 14px; margin: 0 auto 8px; padding: 8px 16px 6px; background: rgba(255,255,255,.45); backdrop-filter: blur(8px); border: 2.5px solid rgba(178,99,98,.35); border-radius: 20px; width: fit-content; }
.dock__item { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; padding: 0; cursor: pointer; }
.dock__item:hover .dock__app { transform: translateY(-4px) scale(1.06); }
.dock__app { display: grid; place-items: center; width: clamp(36px, 4.4vw, 48px); height: clamp(36px, 4.4vw, 48px); border-radius: 26%; border: 2.5px solid var(--mauve-400); background: var(--white); color: var(--mauve-600); font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.7vw, 20px); transition: transform .25s var(--ease-bounce), background .2s, color .2s; }
.dock__cap { font-family: var(--font-body); font-weight: 700; font-size: clamp(9px, 1vw, 11px); color: var(--mauve-700); white-space: nowrap; }
.dock__app--game { background: linear-gradient(135deg, var(--mico-deep), var(--coral)); color: var(--cream-50); }
.dock__item.on .dock__app { background: var(--primary); color: var(--cream-50); border-color: var(--mauve-500); box-shadow: var(--shadow-pop-sm); }
.dock__sep { width: 2.5px; height: 44px; background: rgba(178,99,98,.35); border-radius: 2px; align-self: center; }

/* --- folder pop-up overlay (inside iPad screen) --- */
.fold-ov { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(90,62,60,.34); backdrop-filter: blur(6px); animation: fade-in .25s; border-radius: 20px; }
.fold-ov.is-closing { animation: fold-fade-out .26s forwards; }
@keyframes fold-fade-out { to { opacity: 0; } }
.fold-panel { width: 86%; background: rgba(251,250,246,.92); border: 3px solid var(--mauve-400); border-radius: 22px; padding: 16px 18px 18px; box-shadow: var(--shadow-lg); animation: fold-pop-in .34s var(--ease-bounce); transform-origin: center; }
.fold-ov.is-closing .fold-panel { animation: fold-pop-out .26s var(--ease-soft) forwards; }
@keyframes fold-pop-in { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fold-pop-out { to { transform: scale(.6); opacity: 0; } }
.fold-panel__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; gap: 12px; }
.fold-panel__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.8vw, 20px); color: var(--text-strong); }
.fold-panel__meta { font-size: 12px; font-weight: 800; color: var(--text-muted); white-space: nowrap; }
.fold-strip { display: flex; align-items: center; gap: 10px; }
.fold-strip__viewport { flex: 1 1 0; min-width: 0; overflow: hidden; padding: 8px 0; }
.fold-strip__track { display: flex; transition: transform .5s cubic-bezier(.83,0,.17,1); }
/* infinite window — fades on each page step */
.fold-strip__win { display: flex; width: 100%; animation: fold-fade .32s ease; }
@keyframes fold-fade { from { opacity: .25; } to { opacity: 1; } }
.fold-cell { flex: 0 0 33.3333%; padding: 0 4px; box-sizing: border-box; }
.fold-slide { display: block; width: 100%; aspect-ratio: 3 / 4; border: 3px solid var(--mauve-400); border-radius: 12px; cursor: pointer; position: relative; transition: transform .25s var(--ease-bounce);
  background-image: radial-gradient(rgba(90,62,60,0.08) 1.5px, transparent 1.6px); background-size: 12px 12px; }
.fold-slide:hover { transform: translateY(-3px); }
.fold-slide__num { position: absolute; right: 8px; bottom: 8px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--cream-50); background: var(--mauve-600); border-radius: 999px; padding: 2px 9px; }
.app { display: flex; flex-direction: column; align-items: center; gap: 7px; background: transparent; border: none; cursor: pointer; padding: 6px 2px; border-radius: 14px; transition: transform .25s var(--ease-bounce); }
.app:hover { transform: translateY(-4px) scale(1.04); }
.app:active { transform: scale(.94); }
.app__icon { white-space: nowrap; width: clamp(54px, 7.2vw, 84px); height: clamp(54px, 7.2vw, 84px); border-radius: 24%; border: 3px solid var(--mauve-400); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.8vw, 21px); color: var(--mauve-700); box-shadow: 0 4px 10px rgba(90,62,60,.18); }
.app__icon--game { background: linear-gradient(135deg, var(--mico-deep), var(--coral)); color: var(--cream-50); font-size: clamp(22px, 2.6vw, 30px); }
.app__label { font-family: var(--font-body); font-weight: 700; font-size: clamp(10px, 1.1vw, 12.5px); color: var(--mauve-700); max-width: 110px; line-height: 1.15; text-align: center; }
.ipad__dock { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px 0 6px; }
.ipad__pager { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--mauve-400); background: rgba(255,255,255,.7); color: var(--mauve-600); font-size: 13px; font-weight: 800; cursor: pointer; transition: all .25s var(--ease-bounce); }
.ipad__pager:hover:not(:disabled) { transform: translateY(-2px); }
.ipad__pager:disabled { opacity: .3; cursor: default; }
.ipad__dots { display: flex; gap: 7px; }
.ipad__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(90,62,60,.25); }
.ipad__dots i.on { background: var(--mauve-600); }

/* FPV hands (mico salmon, thick outline) — fpv- prefix to avoid colliding with text .hand helpers */
.fpv-hand { position: absolute; bottom: -8px; width: 170px; height: 120px; pointer-events: none; z-index: 5; }
.fpv-hand--l { left: calc(50% - min(440px, 44vw) - 50px); transform: rotate(8deg); }
.fpv-hand--r { right: calc(50% - min(440px, 44vw) - 56px); transform: rotate(-9deg); }
.fpv-hand::before { content: ""; position: absolute; inset: 18px 0 0 0; background: var(--mico-deep); border: 3.5px solid var(--mauve-400); border-radius: 44px 44px 0 0; }
.fpv-hand__finger { position: absolute; width: 24px; height: 56px; background: var(--mico-deep); border: 3.5px solid var(--mauve-400); border-radius: 12px; }
.fpv-hand__thumb { position: absolute; right: 8px; top: 8px; width: 50px; height: 26px; background: var(--mico-deep); border: 3.5px solid var(--mauve-400); border-radius: 14px; transform: rotate(-30deg); }
.fpv-hand__pen { position: absolute; left: -52px; top: -8px; width: 110px; height: 14px; background: var(--mauve-600); border: 3px solid var(--mauve-400); border-radius: 8px; transform: rotate(-32deg); }
.fpv-hand__pen span { position: absolute; left: -12px; top: 1px; width: 14px; height: 8px; background: var(--kato-deep); border: 2px solid var(--mauve-400); border-radius: 4px 2px 2px 4px; }

/* comic reader pages */
.st-page { width: min(560px, 74vw); height: min(640px, 66vh); border: 4px solid var(--mauve-400); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.st-page__head { display: flex; justify-content: space-between; align-items: baseline; }
.st-page__ep { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-strong); }
.st-page__pg { font-size: 12.5px; font-weight: 800; color: var(--mauve-600); }
.st-page__panels { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.st-page__panels i { background: rgba(255,255,255,.75); border: 3px solid var(--mauve-400); border-radius: 10px;
  background-image: radial-gradient(rgba(90,62,60,0.08) 1.5px, transparent 1.6px); background-size: 13px 13px; }
/* real uploaded comic page — size to the image, head as a caption above it */
.st-page--img { width: auto; height: auto; max-width: min(640px, 92vw); padding: 0; background: transparent !important; border: none; box-shadow: none; gap: 10px; }
.st-page--img .st-page__head { padding: 0 4px; }
.st-page--img .st-page__ep { color: var(--cream-50); }
.st-page--img .st-page__pg { color: rgba(251,250,246,.82); }
.st-page__img { display: block; width: auto; height: auto; max-width: min(640px, 92vw); max-height: 78vh; border: 4px solid var(--mauve-400); border-radius: 14px; box-shadow: var(--shadow-lg); background: var(--white); }

/* ================= SPOT-THE-DIFF GAME ================= */
.df__stage { background: #F3E2EE; cursor: default;
  background-image: radial-gradient(rgba(196,140,180,.3) 3px, transparent 3.5px); background-size: 70px 70px; }
.df__play { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 56px 22px 18px; gap: 10px; }
.df__panel { position: relative; flex: 1; background: #FBF2EA; border: 3.5px solid var(--mauve-400); border-radius: 16px; overflow: hidden; cursor: crosshair; }
.df__wall { position: absolute; inset: 0 0 32% 0; background: #F6E9DB; border-bottom: 3px solid var(--mauve-400); }
.df__desk { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: #EAD7BC; }
.df__poster { position: absolute; left: 13%; top: 10%; width: 16%; height: 30%; background: var(--mico-soft); border: 3px solid var(--mauve-400); border-radius: 8px; display: grid; place-items: center; }
.df__poster-star { font-size: 22px; color: var(--mico-deep); }
.df__window { position: absolute; right: 12%; top: 8%; width: 18%; height: 32%; background: var(--boro-soft); border: 3px solid var(--mauve-400); border-radius: 10px; display: grid; place-items: center; }
.df__sun { width: 26px; height: 26px; border-radius: 50%; background: var(--orange-bright); border: 3px solid var(--mauve-400); }
.df__moon { width: 26px; height: 26px; border-radius: 50%; background: transparent; box-shadow: inset 7px -3px 0 0 #FFF3CE; border: 3px solid var(--mauve-400); transform: rotate(-20deg); }
.df__monitor { position: absolute; left: 38%; top: 26%; width: 24%; height: 34%; background: var(--white); border: 3.5px solid var(--mauve-400); border-radius: 10px; display: grid; place-items: center; }
.df__monitor i { position: absolute; bottom: -14px; left: 42%; width: 16%; height: 12px; background: var(--mauve-300); border: 2.5px solid var(--mauve-400); border-radius: 0 0 6px 6px; }
.df__doodle { font-size: 26px; color: var(--mico-deep); }
.df__plant { position: absolute; left: 10%; bottom: 14%; width: 12%; height: 26%; }
.df__plant i { position: absolute; inset: 0 20% 0 20%; background: var(--teal); border: 3px solid var(--mauve-400); border-radius: 48% 52% 40% 60% / 60% 60% 40% 40%; }
.df__flower { position: absolute; top: -6px; right: 8%; z-index: 2; width: 16px; height: 16px; border-radius: 50%; background: var(--coral); border: 2.5px solid var(--mauve-400); }
.df__mug { position: absolute; right: 16%; bottom: 18%; width: 9%; height: 16%; border: 3px solid var(--mauve-400); border-radius: 4px 4px 10px 10px; }
.df__tablet { position: absolute; left: 40%; bottom: 8%; width: 20%; height: 8%; background: var(--mauve-200); border: 3px solid var(--mauve-400); border-radius: 8px; transform: rotate(-4deg); display: grid; place-items: center; }
.df__sticker { font-size: 13px; color: var(--mico-deep); line-height: 1; }
.df__clock { position: absolute; left: 32%; top: 7%; width: 8%; aspect-ratio: 1; background: var(--white); border: 3px solid var(--mauve-400); border-radius: 50%; }
.df__clock i { position: absolute; left: 50%; top: 50%; width: 2.5px; height: 38%; background: var(--mauve-600); transform-origin: top center; border-radius: 2px; }
.df__clock b { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; background: var(--mauve-600); border-radius: 50%; }
.df__books { position: absolute; left: 58%; top: 6%; width: 12%; height: 13%; display: flex; align-items: flex-end; gap: 8%; }
.df__books i { flex: 1; height: 100%; border: 2.5px solid var(--mauve-400); border-radius: 3px 3px 0 0; }
.df__books i:nth-child(2) { height: 84%; }
.df__books i:nth-child(3) { height: 92%; }
.df__rug { position: absolute; left: 52%; bottom: 3%; width: 22%; height: 12%; border: 3px solid var(--mauve-400); border-radius: 50%; }
.df__trash { position: absolute; left: 26%; bottom: 9%; width: 7%; height: 13%; background: var(--boro-soft); border: 3px solid var(--mauve-400); border-radius: 4px 4px 8px 8px; }
.df__ball { position: absolute; right: -60%; bottom: -8%; width: 14px; height: 14px; background: var(--white); border: 2.5px solid var(--mauve-400); border-radius: 48% 52% 45% 55%; }
.df__ring { position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%); border: 4px solid var(--success); border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 3px rgba(255,255,255,.5); animation: df-pop .35s var(--ease-bounce); z-index: 5; }
@keyframes df-pop { from { transform: translate(-50%,-50%) scale(.4); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }

@media (max-width: 900px) {
  .fpv-hand--l { left: -40px; } .fpv-hand--r { right: -40px; }
}

/* ---- unified arrow buttons (soft idle → bold white on hover, per DS) ---- */
.ipad__pager, .of-wall__arrow {
  display: inline-grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: var(--white); border: 3px solid var(--mauve-400); color: var(--mauve-600);
  font-size: 19px; font-weight: 800; font-family: var(--font-body); padding: 0;
  box-shadow: 0 4px 0 var(--mauve-400); transform: translateY(-1px);
  transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease-bounce), background-color .25s ease, color .25s ease, border-color .25s ease;
}
.ipad__pager { width: 34px; height: 34px; }
.of-wall__arrow { width: 40px; height: 40px; font-size: 22px; }
.ipad__pager svg, .of-wall__arrow svg { display: block; }
.ipad__pager:hover:not(:disabled), .of-wall__arrow:hover:not(:disabled) {
  background: #F4AB9A; border-color: var(--mauve-400); color: #FBF6F0;
  transform: translateY(3px); box-shadow: 0 0 0 var(--mauve-400);
}
.ipad__pager:active:not(:disabled), .of-wall__arrow:active:not(:disabled) { transform: translateY(4px); }
.ipad__pager:disabled, .of-wall__arrow:disabled { opacity: .35; cursor: default; box-shadow: none; transform: none; }

/* ---- floating action cluster: exit-to-street (top) + back-to-top (below) ---- */
.bk-fab { position: fixed; right: calc(18px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s ease, transform .35s var(--ease-bounce); }
.bk-fab.is-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bk-fab__btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--mauve-400); background: var(--white); color: var(--mauve-600); cursor: pointer; box-shadow: 0 4px 0 var(--mauve-400); transform: translateY(-1px); transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease-bounce), background-color .25s ease, color .25s ease; }
.bk-fab__btn:hover { background: #F4AB9A; border-color: var(--mauve-400); color: #FBF6F0; transform: translateY(3px); box-shadow: 0 0 0 var(--mauve-400); }
.bk-fab__btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--mauve-400); }
.bk-fab__btn--top { background: var(--mauve-600); color: var(--cream-50); border-color: var(--mauve-600); }
.bk-fab__btn--top:hover { background: #F4AB9A; border-color: var(--mauve-400); }
.bk-fab__btn svg { display: block; }

/* lightbox arrows — same treatment, adapted for the dark backdrop */
.lb__arrow { background: rgba(251,250,246,.12); border: 3px solid rgba(251,250,246,.55); color: rgba(251,250,246,.75); box-shadow: 0 4px 0 rgba(0,0,0,.3); transition: all .25s var(--ease-bounce); }
.lb__arrow:hover { background: #F4AB9A; border-color: #F4AB9A; color: #FBF6F0; transform: translateY(calc(-50% + 3px)); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.lb__arrow:active { transform: translateY(calc(-50% + 4px)); box-shadow: 0 0 0 rgba(0,0,0,.3); }

/* ---- touch devices (phones + tablets): one comfortable size for every nav
   arrow so they stop looking tiny/mismatched. Covers iPhone & iPad regardless
   of width. The little chevron SVGs (13px) scale up to match. ---- */
@media (pointer: coarse) {
  .of-wall__arrow, .ipad__pager { width: 46px; height: 46px; font-size: 22px; }
  .of-wall__arrow svg, .ipad__pager svg { width: 18px; height: 18px; }
  .lb__arrow { width: 48px; height: 48px; font-size: 20px; }
  .ms-thumb__arrow { width: 38px; height: 38px; font-size: 15px; }
  /* lightbox controls were near-invisible on the dark backdrop — make them solid */
  .lb__arrow { background: rgba(48,36,44,.62); border-color: rgba(251,250,246,.92); color: #FBF6F0; }
  .lb__close { background: rgba(48,36,44,.62); border-color: rgba(251,250,246,.92); color: #FBF6F0; }
}

/* mobile tweaks: office wall header breathing room */
@media (max-width: 760px) {
  .of-wall__top { gap: 14px; margin-bottom: 22px; }
  .of-wall__label { font-size: 11px; letter-spacing: .1em; padding: 5px 12px; }

  /* footer wall: the desktop absolute layout can't fit a phone — reflow it into a
     compact vertical card (logo → sitemap → credits) sized to the viewport. */
  .wl { width: min(90vw, 430px); height: auto; min-height: 0; bottom: calc(84px + var(--bk-ground, 0px));
        display: flex; flex-direction: column; gap: 12px; overflow: visible; padding: 16px 16px 18px; border-radius: 20px; }
  .wl__brick { border-radius: 20px; }
  .wl__graffiti { position: static; top: auto; left: auto; transform: rotate(-3deg); width: 168px; margin: 2px auto 0; }
  .wl__feed { display: none; }            /* placeholder feed — hidden on phones to keep it compact */
  .wl__board, .wl__thanks { position: static; top: auto; left: auto; right: auto; bottom: auto; width: 100%; }
  .wl__board { gap: 5px; }
  .wl__link { padding: 6px 13px; font-size: 13px; }
  .wl__thanks { background: rgba(90,62,60,.22); }
  .wl__thanks p { font-size: 12px; line-height: 1.5; margin-bottom: 8px; }
  .wl__thanks small { font-size: 10px; }
}

/* ================= COMIC STORE (bokami adventure) ================= */
.cs { min-height: 100vh; min-height: 100dvh; background: var(--cream-50); padding-bottom: 90px; }
.cs-head { position: relative; background: var(--boro-soft); border-bottom: 3.5px solid var(--mauve-400); padding-bottom: 26px;
  background-image: radial-gradient(rgba(90,62,60,0.06) 1.5px, transparent 1.6px); background-size: 22px 22px; }
.cs-floor { max-width: 1080px; margin: 38px auto 0; padding: 0 24px; display: grid; grid-template-columns: 1.55fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .cs-floor { grid-template-columns: 1fr; } }

.cs-rack { min-width: 0; background: #E8D5B5; border: 4px solid var(--mauve-400); border-radius: 18px; padding: 20px 22px 16px; box-shadow: var(--shadow-pop-sm); }
.cs-rack__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cs-rack__sign { white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--mauve-600); background: var(--white); border: 2.5px solid var(--mauve-400); border-radius: 999px; padding: 5px 14px; }
.cs-shelf__viewport { overflow: hidden; padding: 8px 2px; }
.cs-shelf__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc(25% - 10.5px); gap: 14px; transition: transform .7s cubic-bezier(.83,0,.17,1); }
.cs-comic { position: relative; aspect-ratio: 3 / 4.1; border: 3px solid var(--mauve-400); border-radius: 8px 12px 12px 8px; cursor: pointer; padding: 14px 12px 12px 18px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; text-align: left; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-bounce), box-shadow .25s;
  background-image: radial-gradient(rgba(90,62,60,0.08) 1.5px, transparent 1.6px); background-size: 13px 13px; }
.cs-comic:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--shadow-md); }
.cs-comic__spine { position: absolute; left: 6px; top: 6px; bottom: 6px; width: 5px; background: rgba(178,99,98,.45); border-radius: 4px; }
.cs-comic__vol { font-family: var(--font-body); font-weight: 800; font-size: 10.5px; letter-spacing: .06em; text-transform: lowercase; color: var(--cream-50); background: var(--mauve-600); border-radius: 999px; padding: 3px 9px; }
.cs-comic__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.15; color: var(--mauve-700); min-height: 2.3em; display: flex; align-items: flex-end; }
.cs-comic__who { font-family: var(--font-hand); font-weight: 600; font-size: 12.5px; color: var(--mauve-600); }
.cs-shelf__plank { height: 12px; margin: 14px -10px 10px; background: rgba(178,99,98,.4); border-radius: 6px; }
.cs-dots { justify-content: center; display: flex; }

.cs-side { background: var(--white); border: 3.5px solid var(--mauve-400); border-radius: 18px; padding: 18px 20px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cs-side__sign { white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mauve-600); background: var(--mauve-050); border: 2.5px solid var(--mauve-200); border-radius: 999px; padding: 5px 14px; }
.cs-figs { display: flex; gap: 12px; }
.cs-fig { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cs-fig__box { width: 86px; height: 104px; border: 3px solid var(--mauve-400); border-radius: 12px; display: grid; place-items: center; padding: 8px 8px 0; overflow: hidden; position: relative;
  background-image: linear-gradient(180deg, rgba(255,255,255,.5), transparent 55%); }
.cs-fig__box::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 6px; height: 8px; background: rgba(90,62,60,.25); border-radius: 50%; }
.cs-fig__box img { height: 72px; position: relative; z-index: 1; }
.cs-fig__label { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--text-strong); }
.cs-fig__price { font-size: 11px; font-weight: 800; color: var(--mauve-500); }

.cs-console { position: relative; display: flex; align-items: center; gap: 0; background: none; border: none; cursor: pointer; margin-top: 6px; transition: transform .25s var(--ease-bounce); }
.cs-console:hover { transform: translateY(-4px) scale(1.04); }
.cs-console:active { transform: scale(.95); }
.cs-console__screen { width: 120px; height: 74px; background: var(--mauve-700); border: 3.5px solid var(--mauve-400); border-radius: 10px; display: grid; place-items: center; font-size: 24px; color: var(--mico-deep); z-index: 1; }
.cs-console__joy { width: 26px; height: 86px; border: 3.5px solid var(--mauve-400); }
.cs-console__joy--l { background: var(--boro-deep); border-radius: 14px 6px 6px 14px; margin-right: -4px; }
.cs-console__joy--r { background: var(--mico-deep); border-radius: 6px 14px 14px 6px; margin-left: -4px; }
.cs-console__cap { font-family: var(--font-hand); font-weight: 600; font-size: 15px; color: var(--mauve-500); text-align: center; }

/* open-comic overlay (full-page, folder-style) */
.cs-ov { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(90,62,60,.4); backdrop-filter: blur(5px); animation: fade-in .25s; }
.cs-ov.is-closing { animation: fold-fade-out .26s forwards; }
.cs-panel { width: min(640px, 92vw); }
.cs-panels { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 92px; gap: 10px; }
.cs-panelthumb { position: relative; border: 3px solid var(--mauve-400); border-radius: 10px; cursor: pointer; transition: transform .25s var(--ease-bounce);
  background-image: radial-gradient(rgba(90,62,60,0.08) 1.5px, transparent 1.6px); background-size: 12px 12px; }
.cs-panelthumb.wide { grid-column: span 2; }
.cs-panelthumb:hover { transform: translateY(-3px); }

/* ================= AVATAR MATCH GAME ================= */
.mg__stage { background: #E4ECDD; cursor: default;
  background-image: radial-gradient(rgba(127,181,155,.35) 3px, transparent 3.5px); background-size: 70px 70px; }
.mg__play { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 56px 24px 20px; }
.mg__moves { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--cream-50); background: var(--mauve-600); border: 3px solid var(--mauve-400); border-radius: 999px; padding: 6px 16px; }
.mg__grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 10px; }
.mg-card { background: none; border: none; padding: 0; cursor: pointer; perspective: 600px; }
.mg-card__inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s var(--ease-bounce); }
.mg-card.up .mg-card__inner { transform: rotateY(180deg); }
.mg-card__back, .mg-card__face { position: absolute; inset: 0; backface-visibility: hidden; border: 3px solid var(--mauve-400); border-radius: 12px; display: grid; place-items: center; }
.mg-card__back { background: var(--mauve-300); color: var(--cream-50); font-family: var(--font-display); font-weight: 700; font-size: 26px;
  background-image: radial-gradient(rgba(251,250,246,.25) 2px, transparent 2.5px); background-size: 16px 16px; }
.mg-card__face { transform: rotateY(180deg); flex-direction: column; display: flex; align-items: center; justify-content: center; gap: 2px; }
.mg-card__face b { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--mauve-700); }
.mg-card__face i { font-style: normal; font-family: var(--font-body); font-weight: 700; font-size: 9.5px; color: var(--mauve-600); text-align: center; line-height: 1.1; padding: 0 3px; }
.mg-card.done .mg-card__face { box-shadow: 0 0 0 3px var(--success); }

/* ================= ARCADE LOCK ================= */
.arc-shutter { display: flex; flex-direction: column; gap: 6px; width: min(300px, 70%); margin: 4px auto 0; }
.arc-shutter i { height: 16px; background: var(--mauve-200); border: 2.5px solid var(--mauve-400); border-radius: 6px; }
.arc-progress { display: flex; gap: 10px; justify-content: center; }
.arc-dot { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--mauve-300); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--mauve-300); background: var(--cream-100); }
.arc-dot.on { background: var(--success-bg); border-color: var(--success); color: #3F6F5C; }

/* ================= POST OFFICE ================= */
.po { min-height: 100vh; min-height: 100dvh; background: var(--cream-50); padding-bottom: 90px; }
.po-head { position: relative; background: var(--boro-bg); border-bottom: 3.5px solid var(--mauve-400); padding-bottom: 26px;
  background-image: radial-gradient(rgba(90,62,60,0.06) 1.5px, transparent 1.6px); background-size: 22px 22px; }
.po-stamps { position: absolute; top: 88px; right: 56px; display: flex; gap: 8px; }
.po-stamps i { width: 34px; height: 42px; background: var(--mico-soft); border: 2.5px dashed var(--mauve-400); border-radius: 4px; transform: rotate(6deg); }
.po-stamps i:nth-child(2) { background: var(--kato-soft); transform: rotate(-4deg); }
.po-stamps i:nth-child(3) { background: var(--boro-soft); transform: rotate(2deg); }
.po-floor { max-width: 1080px; margin: 38px auto 0; padding: 0 24px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .po-floor { grid-template-columns: 1fr; } }

.po-form { background: var(--white); border: 3.5px solid var(--mauve-400); border-radius: 20px; padding: 26px 30px 28px; box-shadow: var(--shadow-pop-sm); position: relative; overflow: hidden; }
.po-form::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: repeating-linear-gradient(45deg, var(--mico-deep) 0 14px, var(--white) 14px 28px, var(--boro-deep) 28px 42px, var(--white) 42px 56px); }
.po-form__head { margin: 6px 0 16px; }
.po-form__sign { font-family: var(--font-body); font-weight: 800; font-size: 11px; letter-spacing: .14em; color: var(--mauve-600); background: var(--mauve-050); border: 2px solid var(--mauve-200); border-radius: 999px; padding: 4px 12px; }
.po-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .po-grid { grid-template-columns: 1fr; } }
.po-field { display: flex; flex-direction: column; gap: 6px; }
.po-field > span { font-family: var(--font-body); font-weight: 800; font-size: 12.5px; color: var(--text-strong); }
.po-field input, .po-field textarea { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--text-strong); background: var(--cream-50); border: 2.5px solid var(--mauve-200); border-radius: 12px; padding: 11px 14px; outline: none; resize: vertical; transition: border-color .2s, box-shadow .2s; }
.po-field input:focus, .po-field textarea:focus { border-color: var(--boro-deep); box-shadow: 0 0 0 3px var(--info-bg); background: var(--white); }
.po-topics { display: flex; gap: 8px; flex-wrap: wrap; }
.po-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.po-turnstile { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 700; font-size: 13.5px; color: var(--text-strong); background: var(--cream-50); border: 2.5px solid var(--mauve-200); border-radius: 12px; padding: 12px 16px; cursor: pointer; }
.po-turnstile small { font-weight: 600; color: var(--text-muted); }
.po-turnstile__box { width: 24px; height: 24px; border-radius: 7px; border: 2.5px solid var(--mauve-300); background: var(--white); display: grid; place-items: center; font-weight: 800; color: #3F6F5C; }
.po-turnstile.ok .po-turnstile__box { border-color: var(--success); background: var(--success-bg); }
.po-sent { text-align: center; padding: 30px 10px; }
.po-sent h2 { font-size: 30px; margin: 14px 0 6px; }

.po-corner { background: var(--white); border: 3.5px solid var(--mauve-400); border-radius: 18px; padding: 18px 20px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.po-shrine { display: flex; gap: 14px; align-items: flex-end; }
.po-shrine__poster { width: 110px; background: var(--mico-soft); border: 3px solid var(--mauve-400); border-radius: 10px; padding: 12px 8px 10px; text-align: center; transform: rotate(-3deg); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.po-shrine__poster b { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--mauve-700); letter-spacing: .06em; }
.po-shrine__poster small { font-family: var(--font-hand); font-weight: 600; font-size: 13px; color: var(--mico-deep); }
.po-shrine__banni { position: relative; width: 44px; height: 40px; background: var(--white); border: 3px solid var(--mauve-400); border-radius: 50% 50% 44% 44%; margin-bottom: 4px; }
.po-shrine__ear { position: absolute; top: -18px; width: 12px; height: 22px; background: var(--white); border: 3px solid var(--mauve-400); border-radius: 8px 8px 2px 2px; }
.po-shrine__ear:first-child { left: 5px; transform: rotate(-8deg); }
.po-shrine__ear:nth-child(2) { right: 5px; transform: rotate(8deg); }
.po-pile { position: relative; width: 130px; height: 96px; }
.po-pile i { position: absolute; left: 0; right: 0; height: 30px; background: var(--cream-100); border: 2.5px solid var(--mauve-400); border-radius: 5px; transform: rotate(var(--r, 0deg)); }
.po-pile i:nth-child(1) { bottom: 0; } .po-pile i:nth-child(2) { bottom: 24px; } .po-pile i:nth-child(3) { bottom: 48px; }
.po-pile span { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; font-family: var(--font-hand); font-weight: 600; font-size: 13px; color: var(--danger); background: var(--white); border: 2px solid var(--danger); border-radius: 999px; padding: 1px 9px; }

/* ================= SENPAI NOTICE ME GAME ================= */
.sc__stage { background: #F2E4F1; cursor: pointer;
  background-image: radial-gradient(rgba(196,140,180,.3) 3px, transparent 3.5px); background-size: 70px 70px; }
.sc__play { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 56px 26px 22px; gap: 14px; }
.sc__stream { position: relative; flex: 1; background: var(--mauve-700); border: 3.5px solid var(--mauve-400); border-radius: 16px; display: grid; place-items: center; overflow: hidden; }
.sc__banni { position: relative; width: 90px; height: 80px; background: var(--white); border: 3.5px solid var(--mauve-400); border-radius: 50% 50% 44% 44%; }
.sc__ear { position: absolute; top: -34px; width: 22px; height: 42px; background: var(--white); border: 3.5px solid var(--mauve-400); border-radius: 12px 12px 3px 3px; }
.sc__ear:first-child { left: 12px; transform: rotate(-8deg); }
.sc__ear:nth-child(2) { right: 12px; transform: rotate(8deg); }
.sc__face { position: absolute; top: 32px; left: 0; right: 0; display: flex; justify-content: center; gap: 16px; }
.sc__face i { width: 6px; height: 9px; border-radius: 50%; background: var(--mauve-700); }
.sc__live { position: absolute; top: 12px; left: 14px; font-family: var(--font-body); font-weight: 800; font-size: 12px; color: var(--cream-50); background: var(--danger); border-radius: 999px; padding: 4px 11px; }
.sc__alert { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--mauve-700); background: var(--kato-bg); border: 3px solid var(--mauve-400); border-radius: 999px; padding: 8px 18px; animation: df-pop .3s var(--ease-bounce); }
.sc__alert--miss { background: var(--cream-100); color: var(--text-muted); }
.sc__line { text-align: center; font-family: var(--font-hand); font-weight: 600; font-size: 19px; color: var(--mauve-600); min-height: 28px; }
.sc__bar { position: relative; height: 46px; background: var(--white); border: 3.5px solid var(--mauve-400); border-radius: 999px; overflow: hidden; }
.sc__zone { position: absolute; top: 0; bottom: 0; background: var(--mico-bg); border-left: 3px solid var(--mico-deep); border-right: 3px solid var(--mico-deep); transition: left .3s var(--ease-soft), width .3s var(--ease-soft); }
.sc__marker { position: absolute; top: -2px; bottom: -2px; width: 8px; margin-left: -4px; background: var(--mauve-600); border-radius: 4px; }

/* ================= FOOTER WALL ================= */
.wl { position: absolute; bottom: calc(130px + var(--bk-ground, 0px)); width: 1240px; height: 74vh; min-height: 420px; background: #C98A89; border: 4px solid var(--mauve-500); border-bottom: none; border-radius: 18px 18px 0 0; overflow: hidden; z-index: 2; }
.wl__brick { position: absolute; inset: 0; opacity: .25;
  background-image: repeating-linear-gradient(0deg, transparent 0 34px, rgba(90,62,60,.5) 34px 37px), repeating-linear-gradient(90deg, transparent 0 70px, rgba(90,62,60,.5) 70px 73px); }
.wl__graffiti { position: absolute; left: 34px; top: calc(13% + var(--bk-ground, 0px) * 0.4); width: 440px; transform: rotate(-7deg);
  filter: drop-shadow(6px 7px 0 rgba(90,62,60,.4)); opacity: .97; }
/* instagram feed placeholder, pasted on the wall where the est. tag was */
.wl__feed { position: absolute; left: 40px; top: calc(13% + 248px + var(--bk-ground, 0px) * 0.4); bottom: auto; width: 470px; background: rgba(251,250,246,.94); border: 3.5px solid var(--mauve-500); border-radius: 14px; padding: 13px 15px 14px; transform: rotate(-2deg); }
.wl__feed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.wl__feed-ig { width: 30px; height: 30px; border: 3px solid var(--mauve-500); border-radius: 9px; position: relative; flex: none; }
.wl__feed-ig::before { content: ""; position: absolute; inset: 5px; border: 2.5px solid var(--mauve-500); border-radius: 50%; }
.wl__feed-ig::after { content: ""; position: absolute; top: 2px; right: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--mauve-500); }
.wl__feed-handle { flex: 1; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; }
.wl__feed-handle strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--mauve-700); }
.wl__follow { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--mauve-600); background: var(--white); border: 2.5px solid var(--mauve-400); border-radius: 999px; padding: 6px 14px; cursor: pointer; white-space: nowrap; box-shadow: 0 3px 0 var(--mauve-400); transform: translateY(-1px); transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease-bounce), background-color .25s ease, color .25s ease; }
.wl__follow:hover { color: #FBF6F0; background: #F4AB9A; transform: translateY(2px); box-shadow: 0 0 0 var(--mauve-400); }
.wl__follow:active { transform: translateY(3px); }
.wl__feed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wl__feed-tile { aspect-ratio: 1 / 1; border: 2.5px solid var(--mauve-300); border-radius: 8px; display: grid; place-items: center; color: var(--mauve-400); font-size: 17px; background: var(--cream-100);
  background-image: repeating-linear-gradient(-45deg, rgba(90,62,60,.07) 0 10px, transparent 10px 20px); }
.wl__feed-cap { margin: 9px 0 0; text-align: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; color: var(--text-muted); }
.wl__board { position: absolute; right: 330px; top: calc(18% + var(--bk-ground, 0px) * 0.4); bottom: auto; width: 250px; z-index: 3; background: rgba(251,250,246,.94); border: 3.5px solid var(--mauve-500); border-radius: 14px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.wl__board-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .1em; color: var(--mauve-600); text-align: center; margin-bottom: 4px; }
.wl__link { font-family: var(--font-body); font-weight: 800; font-size: 13.5px; color: var(--mauve-600); background: var(--white); border: 2.5px solid var(--mauve-400); border-radius: 999px; padding: 7px 12px; cursor: pointer; text-align: left; box-shadow: 0 3px 0 var(--mauve-400); transform: translateY(-1px); transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease-bounce), background-color .25s ease, color .25s ease; }
.wl__link:hover { color: #FBF6F0; background: #F4AB9A; transform: translateY(2px); box-shadow: 0 0 0 var(--mauve-400); }
.wl__link:active { transform: translateY(3px); }
.wl__socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wl__social { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; color: var(--mauve-600); background: var(--white); border: 2.5px solid var(--mauve-400); border-radius: 50%; cursor: pointer; box-shadow: 0 3px 0 var(--mauve-400); transform: translateY(-1px); transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease-bounce), background-color .25s ease, color .25s ease; }
.ic-svg { display: block; }
.wl__social:hover { color: #FBF6F0; background: #F4AB9A; transform: translateY(2px); box-shadow: 0 0 0 var(--mauve-400); }
.wl__social:active { transform: translateY(3px); }
.wl__thanks { position: absolute; right: 30px; top: calc(18% + var(--bk-ground, 0px) * 0.4); bottom: auto; width: 270px; z-index: 3; background: rgba(90,62,60,.32); border-radius: 14px; padding: 16px 18px; color: var(--cream-50); }
.wl__thanks-hand { font-family: var(--font-hand); font-weight: 600; font-size: 22px; margin-bottom: 8px; }
.wl__thanks p { font-size: 13.5px; line-height: 1.65; margin: 0 0 10px; color: rgba(251,250,246,.95); }
.wl__thanks small { font-size: 11px; color: rgba(251,250,246,.75); line-height: 1.5; display: block; }

/* ================= FOOD CART ================= */
.fc { position: absolute; bottom: calc(130px + var(--bk-ground, 0px)); width: 300px; height: 230px; z-index: 3; }
.fc__pill { z-index: 5; }
.fc__awning { position: absolute; top: 0; left: -10px; right: -10px; height: 44px; display: flex; border: 3.5px solid var(--mauve-400); border-radius: 12px 12px 4px 4px; overflow: hidden; }
.fc__awning i { flex: 1; background: var(--mico-deep); }
.fc__awning i:nth-child(even) { background: var(--cream-50); }
.fc__body { position: absolute; top: 44px; left: 0; right: 0; bottom: 36px; background: var(--orange); border: 3.5px solid var(--mauve-400); border-radius: 6px 6px 10px 10px; }
.fc__sign { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: var(--mauve-700); background: var(--cream-50); border: 2.5px solid var(--mauve-400); border-radius: 999px; padding: 3px 12px; }
.fc__window { position: absolute; left: 18px; right: 18px; top: 44px; bottom: 16px; background: var(--cream-100); border: 3px solid var(--mauve-400); border-radius: 8px; }
.fc__wheel { position: absolute; bottom: 0; width: 40px; height: 40px; background: var(--mauve-600); border: 3.5px solid var(--mauve-400); border-radius: 50%; }
.fc__wheel--l { left: 30px; } .fc__wheel--r { right: 30px; }
.fc__wheel::after { content: ""; position: absolute; inset: 10px; background: var(--cream-100); border-radius: 50%; }
.fc__seller { position: absolute; right: 52px; top: 84px; width: 56px; height: 52px; background: #C9A87C; border: 3px solid var(--mauve-400); border-radius: 50% 50% 42% 42%; }
.fc__seller-ear { position: absolute; top: -10px; width: 16px; height: 16px; background: #B08D5F; border: 3px solid var(--mauve-400); border-radius: 50% 50% 20% 20%; }
.fc__seller-ear:first-child { left: 2px; } .fc__seller-ear:nth-child(2) { right: 2px; }
.fc__seller-face { position: absolute; top: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 11px; }
.fc__seller-face i { width: 5px; height: 7px; border-radius: 50%; background: var(--mauve-700); }
.fc__steam { position: absolute; top: 56px; left: 36px; display: flex; gap: 8px; }
.fc__steam i { width: 8px; height: 22px; background: rgba(255,255,255,.7); border-radius: 8px; animation: fc-steam 2.4s ease-in-out infinite; }
.fc__steam i:nth-child(2) { animation-delay: .5s; } .fc__steam i:nth-child(3) { animation-delay: 1s; }
@keyframes fc-steam { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-10px); opacity: .9; } }

/* ================= SNACK HUNT GAME ================= */
.fh__stage { background: #4A3F55; cursor: default;
  background-image: radial-gradient(rgba(255,255,255,.25) 1.5px, transparent 2px); background-size: 60px 60px; }
.fh__stage .cg__id { color: var(--orange); }
.fh__stage h2 { color: var(--cream-50) !important; }
.fh__stage .cg__tap { color: rgba(251,250,246,.6); }
.fh__play { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 56px 22px 18px; }
.fh__list { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 65%; }
.fh__list i { font-style: normal; font-family: var(--font-body); font-weight: 800; font-size: 10.5px; color: var(--cream-50); background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.4); border-radius: 999px; padding: 3px 9px; }
.fh__list i.done { background: var(--success); border-color: var(--success); text-decoration: line-through; }
.fh__timer--ouch { box-shadow: 0 0 0 3px var(--danger); }
.fh__scene { position: relative; flex: 1; background: #6B5B73; border: 3.5px solid var(--mauve-400); border-radius: 16px; overflow: hidden; cursor: crosshair; }
.fh__scene > i { position: absolute; display: block; }
.fh-box { background: #8A6F52; border: 3px solid var(--mauve-700); border-radius: 6px; }
.fh-box--b { background: #9C8161; }
.fh-pot { width: 14%; height: 22%; background: #5E6E78; border: 3px solid var(--mauve-700); border-radius: 8px 8px 14px 14px; }
.fh-bottle { width: 4.5%; height: 18%; background: #7FA08A; border: 3px solid var(--mauve-700); border-radius: 6px 6px 4px 4px; }
.fh-bottle--b { background: #A08A7F; height: 15%; }
.fh-lantern { width: 9%; height: 20%; background: var(--orange-bright); border: 3px solid var(--mauve-700); border-radius: 10px; box-shadow: 0 0 26px rgba(255,191,117,.55); }
.fh-cloth { height: 9%; background: #91557B; border: 3px solid var(--mauve-700); border-radius: 8px 8px 0 0; }
.fh-bowl { width: 12%; height: 12%; background: #B86B5E; border: 3px solid var(--mauve-700); border-radius: 4px 4px 40px 40px; }
.fh-jar { width: 7%; height: 13%; background: #87766D; border: 3px solid var(--mauve-700); border-radius: 8px; }
.fh-jar--b { background: #6D8779; }
.fh-item { position: absolute; border: none; cursor: pointer; padding: 0; transition: transform .2s var(--ease-bounce); }
.fh-item:hover { transform: scale(1.12); }
.fh-onigiri { width: 26px; height: 22px; background: #E8E2D4; border: 2.5px solid var(--mauve-700); border-radius: 46% 46% 22% 22% / 60% 60% 18% 18%; }
.fh-taiyaki { width: 30px; height: 18px; background: #C9A87C; border: 2.5px solid var(--mauve-700); border-radius: 50% 20% 50% 20%; }
.fh-pudding { width: 24px; height: 20px; background: var(--kato-deep); border: 2.5px solid var(--mauve-700); border-radius: 6px 6px 14px 14px; }
.fh-banana { width: 30px; height: 14px; background: var(--orange-bright); border: 2.5px solid var(--mauve-700); border-radius: 0 0 18px 18px; transform: rotate(-18deg); }
.fh-skewer { width: 9px; height: 34px; background: #B86B5E; border: 2.5px solid var(--mauve-700); border-radius: 6px; }
.fh-bao { width: 26px; height: 22px; background: #EDE6E0; border: 2.5px solid var(--mauve-700); border-radius: 50% 50% 35% 35%; }

/* ================= MERCH STORE ================= */
.ms { min-height: 100vh; min-height: 100dvh; background: var(--cream-50); padding-bottom: 110px; }
.ms-head { position: relative; background: var(--orange); border-bottom: 3.5px solid var(--mauve-400); padding-bottom: 26px;
  background-image: radial-gradient(rgba(90,62,60,0.07) 1.5px, transparent 1.6px); background-size: 22px 22px; }
.ms-floor { max-width: 1080px; margin: 34px auto 0; padding: 0 24px; }
.ms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px) { .ms-grid { grid-template-columns: repeat(2, 1fr); } }
.ms-card { position: relative; background: var(--white); border: 3px solid var(--mauve-400); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-bounce), box-shadow .25s; }
.ms-card:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: var(--shadow-md); }
.ms-card.is-hidden { display: none; }
.ms-card.is-pending-enter { opacity: 0; pointer-events: none; }

/* marketplace banners */
.ms-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
@media (max-width: 760px) { .ms-banners { grid-template-columns: 1fr; } }
.ms-banner { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 22px 26px; border-radius: 18px; border: 3.5px solid var(--mauve-400); box-shadow: var(--shadow-pop-sm); transition: transform .25s var(--ease-bounce), box-shadow .25s; overflow: hidden;
  background-image: radial-gradient(rgba(255,255,255,.25) 2px, transparent 2.5px); background-size: 18px 18px; }
.ms-banner:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.ms-banner--toko { background-color: #59C26C; }
.ms-banner--shopee { background-color: #F0653F; }
.ms-banner__hand { font-family: var(--font-hand); font-weight: 600; font-size: 17px; color: rgba(255,255,255,.92); }
.ms-banner b { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 27px); color: var(--white); }
.ms-banner__go { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; background: var(--white); border: 3px solid var(--mauve-400); border-radius: 50%; font-size: 19px; font-weight: 800; color: var(--mauve-600); transition: transform .25s var(--ease-bounce); }
.ms-banner:hover .ms-banner__go { transform: translateY(-50%) translateX(4px); }

/* slide-thumb hover arrows */
.ms-card__art { position: relative; height: 110px; border: 2.5px solid var(--mauve-400); border-radius: 10px; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background-image: radial-gradient(rgba(90,62,60,0.08) 1.5px, transparent 1.6px); background-size: 13px 13px; }
.ms-thumb__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--mauve-400); background: var(--white); color: var(--mauve-600); font-size: 11px; font-weight: 800; cursor: pointer; opacity: 0; box-shadow: 0 2px 0 var(--mauve-400); transition: all .2s var(--ease-bounce); }
.ms-thumb__arrow--l { left: 6px; } .ms-thumb__arrow--r { right: 6px; }
.ms-card__art:hover .ms-thumb__arrow { opacity: 1; }
.ms-thumb__arrow:hover { background: var(--white); border-color: var(--mauve-500); color: var(--mauve-700); transform: translateY(-50%) scale(1.12); }
.ms-thumb__dots { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
.ms-thumb__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(90,62,60,.25); }
.ms-thumb__dots i.on { background: var(--mauve-600); }
.ms-card__name { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0; cursor: pointer; }
.ms-pop { position: absolute; top: -10px; right: -8px; z-index: 2; transform: rotate(6deg); font-family: var(--font-hand); font-weight: 600; font-size: 14px; color: var(--mauve-700); background: var(--kato-bg); border: 2.5px solid var(--mauve-400); border-radius: 999px; padding: 3px 11px; box-shadow: var(--shadow-pop-press); }
.ms-card__art { height: 110px; border: 2.5px solid var(--mauve-400); border-radius: 10px; display: grid; place-items: center; overflow: hidden;
  background-image: radial-gradient(rgba(90,62,60,0.08) 1.5px, transparent 1.6px); background-size: 13px 13px; }
.ms-card__art img { height: 84px; }
.ms-card__name { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--text-strong); margin: 9px 0 6px; line-height: 1.2; min-height: 2.4em; }
.ms-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ms-card__price { font-family: var(--font-body); font-weight: 800; font-size: 12.5px; color: var(--mauve-600); }
.ms-add { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--cream-50); background: var(--primary); border: 2.5px solid var(--mauve-500); border-radius: 999px; padding: 5px 12px; cursor: pointer; box-shadow: 0 3px 0 var(--mauve-700); transform: translateY(-1px); transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease-bounce), background-color .25s ease; }
.ms-add:hover { transform: translateY(2px); box-shadow: 0 0 0 var(--mauve-700); background: #D9968D; }
.ms-add:active { transform: translateY(3px); }
/* ---- item detail page ---- */
.md__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: start; }
@media (max-width: 880px) { .md__grid { grid-template-columns: 1fr; } }
.md__main { position: relative; height: 360px; border: 3.5px solid var(--mauve-400); border-radius: 18px; display: grid; place-items: center; overflow: hidden; cursor: zoom-in;
  background-image: radial-gradient(rgba(90,62,60,0.08) 1.5px, transparent 1.6px); background-size: 14px 14px; }
.md__main img { height: 270px; }
/* cross-fade when switching gallery views (opacity only — transform carries the mirrored side pose) */
.md__main-img { animation: md-img-in .4s ease both; }
@keyframes md-img-in { from { opacity: 0; } to { opacity: 1; } }
.md__arr { position: absolute; top: 50%; transform: translateY(calc(-50% - 1px)); }
.md__arr--l { left: 12px; } .md__arr--r { right: 12px; }
.md__arr:hover:not(:disabled) { transform: translateY(calc(-50% + 3px)) !important; }
.md__arr:active:not(:disabled) { transform: translateY(calc(-50% + 4px)) !important; }
.md__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.md__thumb { width: 76px; height: 76px; border: 3px solid var(--mauve-200); border-radius: 12px; display: grid; place-items: center; overflow: hidden; cursor: pointer; transition: all .2s var(--ease-bounce); }
.md__thumb img { height: 56px; }
.md__thumb.on { border-color: var(--mauve-500); box-shadow: var(--shadow-pop-press); transform: translateY(-2px); }
.md__title { font-size: clamp(26px, 3vw, 36px); margin: 0 0 8px; }
.md__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.md__stock { font-size: 13px; font-weight: 800; color: #3F6F5C; }
.md__stock.low { color: var(--danger); }
.md__price { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--mauve-600); margin-bottom: 18px; }
.md__row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.md__row--col { flex-direction: column; align-items: flex-start; gap: 8px; }
.md__label { font-family: var(--font-body); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.md__qty button { width: 32px; height: 32px; font-size: 15px; }
.md__qty b { font-size: 16px; min-width: 22px; }
.md__ships { display: flex; gap: 10px; flex-wrap: wrap; }
.md__ship { display: flex; flex-direction: column; gap: 2px; text-align: left; font-family: var(--font-body); background: var(--white); border: 2.5px solid var(--mauve-200); border-radius: 12px; padding: 9px 14px; cursor: pointer; transition: all .2s var(--ease-bounce); }
.md__ship b { font-size: 13.5px; color: var(--text-strong); font-weight: 800; }
.md__ship span { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.md__ship.on { border-color: var(--mauve-500); background: var(--mauve-050); box-shadow: var(--shadow-pop-press); }
.md__eta { font-size: 13px; font-weight: 700; color: var(--text-body); }
.md__pays { display: flex; gap: 7px; flex-wrap: wrap; }
.md__pay { font-family: var(--font-body); font-weight: 800; font-size: 11.5px; color: var(--mauve-600); background: var(--white); border: 2px solid var(--mauve-200); border-radius: 999px; padding: 4px 11px; }
.md__paynote { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.md__cta { display: flex; margin: 6px 0 18px; }
.md__desc p { font-size: 14.5px; line-height: 1.7; color: var(--text-body); margin: 6px 0 0; max-width: 56ch; }
.md__desc { margin-bottom: 16px; }
.md__shares { display: flex; gap: 8px; margin-top: 6px; }
.md__shares button { font-family: var(--font-body); font-weight: 800; font-size: 13px; color: var(--mauve-600); background: var(--white); border: 2.5px solid var(--mauve-400); border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap; box-shadow: 0 3px 0 var(--mauve-400); transform: translateY(-1px); transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease-bounce), background-color .25s ease, color .25s ease; }
.md__shares button:hover { color: #FBF6F0; background: #F4AB9A; transform: translateY(2px); box-shadow: 0 0 0 var(--mauve-400); }
.md__shares button:active { transform: translateY(3px); }
.md__lbimg { width: min(560px, 76vw); height: min(560px, 64vh); border: 4px solid var(--mauve-400); border-radius: 22px; display: grid; place-items: center; grid-template-rows: 100%; grid-template-columns: 100%; overflow: hidden; box-shadow: var(--shadow-lg);
  background-image: radial-gradient(rgba(90,62,60,0.08) 1.5px, transparent 1.6px); background-size: 14px 14px; }
.md__lbimg img { height: 70%; max-width: 88%; object-fit: contain; }

/* street basket reminder */
.ms-cartbtn--street { position: fixed; }
.ms-cartbtn__hint { position: absolute; bottom: calc(100% + 12px); right: 0; white-space: nowrap; font-family: var(--font-hand); font-weight: 600; font-size: 17px; color: var(--mauve-700); background: var(--cream-50); border: none; border-radius: 14px 14px 3px 14px; padding: 8px 16px; box-shadow: 0 8px 22px rgba(90,62,60,.28); animation: cart-bob 1.8s var(--ease-soft) infinite; }
.ms-cartbtn__hint::after { content: ""; position: absolute; right: 22px; bottom: -6px; width: 12px; height: 12px; transform: rotate(45deg); background: var(--cream-50); border: none; border-radius: 2px; }
@keyframes cart-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.ms-cartbtn { position: fixed; right: 22px; bottom: 22px; z-index: 45; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--mauve-700); background: var(--kato-bg); border: 3.5px solid var(--mauve-400); border-radius: 999px; padding: 13px 22px; cursor: pointer; box-shadow: 0 4px 0 var(--mauve-400); transform: translateY(-1px); transition: transform .28s var(--ease-bounce), box-shadow .28s var(--ease-bounce), background-color .28s ease, color .28s ease; }
.ms-cartbtn:hover { transform: translateY(3px); box-shadow: 0 1px 0 var(--mauve-400); background: #F4AB9A; color: #FBF6F0; }
.ms-cartbtn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--mauve-400); }
.ms-cartbtn__n { margin-left: 8px; background: var(--mauve-600); color: var(--cream-50); border-radius: 999px; padding: 2px 10px; font-size: 14px; }
/* cart drawer — always mounted; .is-open toggles a smooth slide IN and OUT */
.ms-ov { position: fixed; inset: 0; z-index: 60; background: rgba(90,62,60,.4); opacity: 0; visibility: hidden; transition: opacity .32s ease, visibility .32s ease; }
.ms-ov.is-open { opacity: 1; visibility: visible; }
.ms-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--cream-50); border-left: 4px solid var(--mauve-400); padding: 22px 24px; overflow-y: auto; transform: translateX(100%); transition: transform .4s cubic-bezier(.83,0,.17,1); }
.ms-ov.is-open .ms-drawer { transform: translateX(0); }
.ms-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ms-drawer__head h2 { font-size: 26px; margin: 0; }
.ms-drawer__empty { font-family: var(--font-hand); font-weight: 600; font-size: 19px; color: var(--text-muted); }
.ms-drawer__paid { text-align: center; padding: 10px 0 16px; }
.ms-drawer__paid h3 { font-size: 22px; margin: 0 0 6px; }
.ms-drawer__paid p { font-size: 14px; color: var(--text-body); margin: 0; }
.ms-line { display: flex; align-items: center; gap: 9px; background: var(--white); border: 2.5px solid var(--mauve-200); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.ms-line__dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--mauve-400); flex: none; }
.ms-line__name { flex: 1; font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--text-strong); }
.ms-qty { display: flex; align-items: center; gap: 6px; }
.ms-qty button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--mauve-300); background: var(--white); color: var(--mauve-600); font-weight: 800; cursor: pointer; }
.ms-qty b { font-size: 13px; min-width: 14px; text-align: center; }
.ms-line__sum { font-size: 12px; font-weight: 800; color: var(--mauve-600); white-space: nowrap; }
.ms-line__x { border: none; background: none; color: var(--mauve-300); cursor: pointer; font-size: 13px; }
.ms-line__x:hover { color: var(--danger); }
.ms-drawer__foot { margin-top: 14px; }
.ms-total { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text-strong); margin-bottom: 12px; }

/* ================= HOUSE INTERIOR ================= */
.house { background: var(--cream-100); }
.house__wall { position: absolute; inset: 0 0 calc(130px + var(--bk-ground, 0px)) 0; background-color: #F6E9DB; background-image: radial-gradient(rgba(178,99,98,.14) 2px, transparent 2.1px); background-size: 46px 46px; border-bottom: 3.5px solid var(--mauve-400); }
.house__floor { position: absolute; left: 0; right: 0; bottom: 0; height: calc(130px + var(--bk-ground, 0px)); background: #EAD7BC; background-image: repeating-linear-gradient(90deg, rgba(178,99,98,.18) 0 3px, transparent 3px 120px), repeating-linear-gradient(0deg, rgba(178,99,98,.10) 0 2px, transparent 2px 34px); }

.house__pill { position: relative; display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--cream-50); background: var(--primary); border: 3px solid var(--mauve-500); border-radius: 999px; padding: 7px 16px; cursor: pointer; box-shadow: 0 4px 0 var(--mauve-700), 0 0 22px rgba(244,171,154,.55); white-space: nowrap; transform: translateY(-1px); transition: transform .25s var(--ease-bounce), background-color .28s ease, box-shadow .28s var(--ease-bounce); }

.hs-window { position: absolute; bottom: calc(320px + var(--bk-ground, 0px)); width: 230px; height: 190px; border: 4px solid var(--mauve-400); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.hs-window__sky { position: absolute; inset: 0; transition: background 1.2s; }
.hs-window__bar { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: var(--mauve-400); }

.hs-frame { position: absolute; bottom: calc(360px + var(--bk-ground, 0px)); width: 200px; padding: 16px 18px; background: var(--white); border: 3.5px solid var(--mauve-400); border-radius: 12px; box-shadow: var(--shadow-pop-sm); }
.hs-frame img { width: 100%; display: block; }

.hs-desk { position: absolute; bottom: calc(130px + var(--bk-ground, 0px)); width: 250px; height: 110px; }
.hs-desk__top { position: absolute; top: 0; left: 0; right: 0; height: 14px; background: var(--mauve-300); border: 3px solid var(--mauve-400); border-radius: 8px; }
.hs-desk__leg { position: absolute; top: 12px; bottom: 0; width: 12px; background: var(--mauve-300); border: 3px solid var(--mauve-400); border-radius: 6px; }
.hs-laptop { position: absolute; top: -44px; left: 64px; width: 92px; height: 48px; background: var(--mico-bg); border: 3px solid var(--mauve-400); border-radius: 8px 8px 3px 3px; }
.hs-laptop::after { content: ""; position: absolute; inset: 7px 9px 12px; background: var(--white); border-radius: 4px; }

.hs-shelf { position: absolute; bottom: calc(130px + var(--bk-ground, 0px)); width: 190px; height: 230px; background: var(--cream-200); border: 3.5px solid var(--mauve-400); border-radius: 12px; padding: 10px 10px 0; display: flex; flex-direction: column; gap: 10px; }
.hs-shelf__row { flex: 1; border-bottom: 4px solid var(--mauve-400); display: flex; align-items: flex-end; gap: 5px; padding: 0 4px; }
.hs-shelf__row i { flex: 1; border: 2.5px solid var(--mauve-400); border-radius: 4px 4px 0 0; }

.hs-sofa { position: absolute; bottom: calc(130px + var(--bk-ground, 0px)); width: 300px; height: 120px; }
.hs-sofa__back { position: absolute; bottom: 34px; left: 0; right: 0; height: 80px; background: var(--boro-bg); border: 3.5px solid var(--mauve-400); border-radius: 18px 18px 0 0; }
.hs-sofa__seat { position: absolute; bottom: 0; left: 0; right: 0; height: 46px; background: var(--boro-soft); border: 3.5px solid var(--mauve-400); border-radius: 14px; }
.hs-sofa__arm { position: absolute; bottom: 0; width: 34px; height: 86px; background: var(--boro-bg); border: 3.5px solid var(--mauve-400); border-radius: 14px; }

.hs-tv { position: absolute; bottom: calc(130px + var(--bk-ground, 0px)); width: 230px; height: 190px; }
.hs-tv__screen { position: absolute; top: 0; left: 0; right: 0; height: 120px; background: var(--mauve-700); border: 4px solid var(--mauve-400); border-radius: 12px; }
.hs-tv__screen::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--kato-bg); font-size: 30px; }
.hs-tv__stand { position: absolute; top: 120px; left: 40%; width: 20%; height: 22px; background: var(--mauve-300); border: 3px solid var(--mauve-400); border-radius: 0 0 8px 8px; }
.hs-console { position: absolute; bottom: 8px; left: 24px; width: 76px; height: 26px; background: var(--kato-bg); border: 3px solid var(--mauve-400); border-radius: 8px; }
.hs-console::after { content: ""; position: absolute; right: -22px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--kato-deep); border: 2.5px solid var(--mauve-400); }

.hs-plant { position: absolute; bottom: calc(130px + var(--bk-ground, 0px)); width: 90px; height: 150px; }
.hs-plant__leaves { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 86px; height: 92px; background: var(--teal); border: 3.5px solid var(--mauve-400); border-radius: 48% 52% 55% 45% / 52% 48% 52% 48%; }
.hs-plant__pot { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 56px; height: 52px; background: var(--mico-deep); border: 3.5px solid var(--mauve-400); border-radius: 6px 6px 14px 14px; }

.hs-fridge { position: absolute; bottom: calc(130px + var(--bk-ground, 0px)); width: 130px; height: 240px; background: var(--white); border: 4px solid var(--mauve-400); border-radius: 16px; }
.hs-fridge__door { position: absolute; top: 88px; left: -4px; right: -4px; height: 4px; background: var(--mauve-400); }
.hs-fridge__handle { position: absolute; top: 40px; right: 12px; width: 8px; height: 36px; background: var(--mauve-400); border-radius: 4px; }
.hs-fridge__magnet { position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--mauve-400); }

.hs-door { position: absolute; bottom: calc(130px + var(--bk-ground, 0px)); width: 120px; height: 280px; background: var(--mauve-300); border: 4px solid var(--mauve-400); border-radius: 16px 16px 0 0; }
.hs-door__win { position: absolute; top: 26px; left: 22px; right: 22px; height: 70px; background: var(--boro-soft); border: 3px solid var(--mauve-400); border-radius: 10px; }
.hs-door__knob { position: absolute; top: 150px; right: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--kato-deep); border: 3px solid var(--mauve-400); }

/* ================= STREET SCENE ================= */
/* --bk-ground raises the whole ground line (sidewalk + everything standing on it)
   so the character isn't crammed at the very bottom with dead sky on top.
   Desktop/landscape lift ~16%; portrait + mobile lift ~24% (char ≈ 33–36% up). */
.scene { position: fixed; inset: 0; overflow: hidden; --bk-ground: 16vh; transform: translateZ(0); background: #F6E9DB; }
@media (orientation: portrait) { .scene { --bk-ground: 25vh; } }
@media (max-width: 640px) { .scene { --bk-ground: 9vh; } }
.layer { position: absolute; inset: 0; will-change: transform; }
.layer > * { position: absolute; }

/* sky */
.sky { position: absolute; inset: 0; transition: background 1.2s var(--ease-soft); }
.sun { position: absolute; width: 84px; height: 84px; border-radius: 50%; transition: background 1.2s, box-shadow 1.2s, left 1.6s var(--ease-soft), top 1.6s var(--ease-soft); }
.cloud { background: rgba(255,255,255,.85); border-radius: 999px; height: 26px; animation: cloud-drift var(--drift, 46s) ease-in-out infinite alternate; }
.cloud::before { content: ""; position: absolute; left: 22%; top: -12px; width: 38%; height: 26px; background: inherit; border-radius: 999px; }
@keyframes cloud-drift { from { margin-left: 0; } to { margin-left: 140px; } }

/* far silhouette */
.far-block { bottom: calc(0px + var(--bk-ground, 0px)); background: var(--mauve-200); opacity: .45; border-radius: 14px 14px 0 0; transition: background 1.2s, opacity 1.2s; }

/* ground: road (front) + sidewalk (behind it) */
/* road: a fixed-ish band at the very bottom for cars; the GROUND LIFT goes into
   the sidewalk instead, so the sidewalk gets roomier (extends down) while the
   ground line — where the characters stand — stays put. */
/* The lift goes into the ROAD (so the road top sits at ~the red line); the
   sidewalk stays a slim band on top of it, ground line unchanged (= sweet spot). */
.road { position: absolute; left: 0; right: 0; bottom: 0; height: calc(90px + var(--bk-ground, 0px)); background: #D9CCC2; border-top: 3px solid var(--mauve-400); transition: filter 1.2s; }
/* dotted line sits in the lower-middle of the road; cars straddle it */
.road__dash { position: absolute; bottom: calc((90px + var(--bk-ground, 0px)) * 0.58); top: auto; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 44px, transparent 44px 92px); border-radius: 3px; }
.sidewalk { position: absolute; left: 0; right: 0; bottom: calc(90px + var(--bk-ground, 0px)); height: 64px; background: var(--cream-100); border-top: 3.5px solid var(--mauve-400); box-shadow: 0 3px 0 rgba(90,62,60,.12) inset; transition: filter 1.2s; }
.sidewalk__tiles { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(178,99,98,.22) 0 3px, transparent 3px 52px); }

/* buildings */
.bld { bottom: calc(148px + var(--bk-ground, 0px)); border: 3.5px solid var(--mauve-400); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-sm); transition: filter 1.2s; }
.bld__awning { position: absolute; left: -8px; right: -8px; top: 54px; height: 26px; border: 3px solid var(--mauve-400); border-radius: 12px; }
.bld__sign { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--mauve-700); background: var(--cream-100); border: 3px solid var(--mauve-400); border-radius: 8px; padding: 4px 22px; }
/* plaque “screws” so signage reads as a sign, not a button */
.bld__sign::before, .bld__sign::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--mauve-300); }
.bld__sign::before { left: 7px; } .bld__sign::after { right: 7px; }
.bld__win { position: absolute; background: var(--white); border: 2.5px solid var(--mauve-400); border-radius: 8px; transition: background .9s, box-shadow .9s; }
/* sunset/night window glow is driven inline from React — descendant selectors
   are skipped by Chrome under perpetually-transformed ancestors */
.bld__door { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 52px; height: 74px; background: var(--mauve-300); border: 3px solid var(--mauve-400); border-bottom: none; border-radius: 12px 12px 0 0; }
/* static wrapper — fades the pill in/out as you approach (ping ring is the attention cue) */
.bob-wrap { position: absolute; top: -54px; left: 50%; transform: translateX(-50%); z-index: 6; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease, visibility .4s ease; }
.bob-wrap.show { opacity: 1; visibility: visible; pointer-events: auto; }
.bld__enter { position: relative; display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--cream-50); background: var(--primary); border: 3px solid var(--mauve-500); border-radius: 999px; padding: 7px 18px; cursor: pointer; box-shadow: 0 4px 0 var(--mauve-700), 0 0 22px rgba(244,171,154,.55); white-space: nowrap; transform: translateY(-1px); transition: transform .25s var(--ease-bounce), background-color .28s ease, box-shadow .28s var(--ease-bounce); }
.bld__enter::after, .house__pill::after { content: ""; position: absolute; inset: -7px; border-radius: 999px; border: 3px solid rgba(244,171,154,.85); box-shadow: 0 0 16px rgba(244,171,154,.8), inset 0 0 10px rgba(244,171,154,.45); animation: bk-ping 1.5s ease-out infinite; pointer-events: none; }
@keyframes bk-ping { 0% { opacity: .9; transform: scale(.82); } 72%, 100% { opacity: 0; transform: scale(1.28); } }
.bld__enter:hover, .house__pill:hover { transform: translateY(3px); background: #D9968D; box-shadow: 0 1px 0 var(--mauve-700); }
.bld__enter:hover::after, .house__pill:hover::after { animation: none; opacity: 0; }
.bld__enter:active, .house__pill:active { transform: translateY(4px); box-shadow: 0 0 0 var(--mauve-700); }

/* npcs */
.npc { bottom: calc(122px + var(--bk-ground, 0px)); display: flex; flex-direction: column; align-items: center; }
.npc--walk { animation: npc-patrol var(--patrol-dur, 9s) ease-in-out infinite alternate; }
@keyframes npc-patrol { from { transform: translateX(0); } to { transform: translateX(var(--patrol-range, 140px)); } }
.npc--walk .npc__fig { animation: npc-step .5s ease-in-out infinite; }
@keyframes npc-step { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-4px) rotate(1.5deg); } }
.npc__fig { width: 56px; height: 72px; border: 3px solid var(--mauve-400); border-radius: 26px 26px 20px 20px; position: relative; }
.npc__fig::before, .npc__fig::after { content: ""; position: absolute; top: -12px; width: 14px; height: 18px; background: inherit; border: 3px solid var(--mauve-400); border-radius: 999px; }
.npc__fig::before { left: 7px; } .npc__fig::after { right: 7px; }
.npc__eyes { position: absolute; top: 22px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; }
.npc__eyes i { width: 5px; height: 7px; border-radius: 50%; background: var(--mauve-700); }
.npc__tag { margin-top: 6px; font-size: 11px; font-weight: 800; color: var(--text-muted); background: rgba(255,255,255,.8); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.npc__bubble { position: absolute; bottom: 128%; left: 50%; transform: translateX(-50%) translateY(8px); font-family: var(--font-hand); font-weight: 600; font-size: 19px; color: var(--mauve-700); background: var(--cream-50); border: none; border-radius: 14px; padding: 9px 16px; white-space: nowrap; box-shadow: 0 8px 22px rgba(90,62,60,.28); opacity: 0; visibility: hidden; transition: opacity .35s ease, transform .35s var(--ease-bounce), visibility .35s; }
.npc__bubble.on { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* tail centered — always points at the speaker below */
.npc__bubble::after { content: ""; position: absolute; left: 50%; margin-left: -6px; bottom: -5px; width: 12px; height: 12px; background: var(--cream-50); transform: rotate(45deg); border-radius: 2px; }
@keyframes bub-in { from { opacity: 0; transform: translate(-50%, 8px) scale(.85); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }

/* foreground props */
.lamp { bottom: calc(88px + var(--bk-ground, 0px)); width: 8px; height: 175px; background: var(--mauve-400); border-radius: 6px; }
.lamp__head { position: absolute; top: -24px; left: -11px; width: 30px; height: 30px; border-radius: 50%; border: 3.5px solid var(--mauve-400); transition: background .9s, box-shadow .9s; }
.night .lamp__head { /* glow driven inline from React (Chrome recalc workaround) */ }
.bush { bottom: calc(88px + var(--bk-ground, 0px)); height: 40px; background: var(--teal); border: 3px solid var(--mauve-400); border-radius: 999px; opacity: .92; }
.bush--main { bottom: calc(134px + var(--bk-ground, 0px)); }

/* trees */
.tree { display: flex; flex-direction: column; align-items: center; }
.tree__top { width: var(--tw, 86px); height: var(--tw, 86px); background: var(--teal); border: 3.5px solid var(--mauve-400); border-radius: 46% 54% 50% 50% / 54% 50% 50% 46%; position: relative; }
.tree__top::before { content: ""; position: absolute; left: -26%; top: 26%; width: 62%; height: 62%; background: inherit; border: inherit; border-radius: 50%; }
.tree__top::after { content: ""; position: absolute; right: -22%; top: 32%; width: 54%; height: 54%; background: inherit; border: inherit; border-radius: 50%; }
.tree__trunk { width: 10px; height: var(--th, 44px); background: var(--mauve-400); border-radius: 5px; margin-top: -6px; }
.tree--main { bottom: calc(148px + var(--bk-ground, 0px)); }
.tree--fg { bottom: calc(84px + var(--bk-ground, 0px)); }

/* mountains & far city silhouette */
.mtn { bottom: calc(200px + var(--bk-ground, 0px)); clip-path: polygon(0 100%, 50% 0, 100% 100%); transition: filter 1.2s; }
.mtn--back { background: #BFD9DE; }
.mtn--front { background: #9FC5CB; }
.mtn__cap { position: absolute; left: 32%; right: 32%; top: 0; height: 34%; background: rgba(255,255,255,.85); clip-path: polygon(0 100%, 50% 0, 100% 100%, 78% 72%, 60% 96%, 38% 70%, 20% 92%); }
.city-blk { bottom: calc(148px + var(--bk-ground, 0px)); background: var(--mauve-600); opacity: .38; border-radius: 10px 10px 0 0; transition: opacity 1.2s; }
.night .city-blk { opacity: .6; }

/* cars (world-anchored, road lanes in front of the character via their own 1:1 layer) */
.car { position: absolute; width: 320px; height: 106px; pointer-events: none; will-change: transform; }
.car__scale { position: absolute; inset: 0; transform-origin: bottom center; }
.car--ltr { animation: car-ltr linear forwards; }
.car--rtl { animation: car-rtl linear forwards; }
@keyframes car-ltr { from { transform: translateX(0); } to { transform: translateX(3600px); } }
@keyframes car-rtl { from { transform: scaleX(-1) translateX(0); } to { transform: scaleX(-1) translateX(3600px); } }
.car__body { position: absolute; left: 0; right: 0; bottom: 12px; height: 58px; border: 3.5px solid var(--mauve-400); border-radius: 20px 28px 12px 12px; }
.car__cab { position: absolute; left: 54px; right: 88px; bottom: 60px; height: 42px; border: 3.5px solid var(--mauve-400); border-bottom: none; border-radius: 18px 24px 0 0; background: inherit; }
.car__win { position: absolute; left: 64px; right: 98px; bottom: 66px; height: 30px; background: rgba(255,255,255,.75); border: 3px solid var(--mauve-400); border-radius: 10px 16px 3px 3px; }
.car__wheel { position: absolute; bottom: -2px; width: 42px; height: 42px; background: var(--mauve-700); border: 3.5px solid var(--mauve-400); border-radius: 50%; }
.car__wheel::after { content: ""; position: absolute; inset: 10px; background: var(--cream-100); border-radius: 50%; }
.car__wheel--f { right: 34px; } .car__wheel--b { left: 34px; }
.car__light { position: absolute; right: -5px; bottom: 34px; width: 12px; height: 15px; background: #FFE9A8; border: 3px solid var(--mauve-400); border-radius: 5px; opacity: 0; transition: opacity .9s; }
.sunset .car__light { opacity: 1; box-shadow: 12px 0 20px 6px rgba(255,228,150,.3); }
.night .car__light { opacity: 1; box-shadow: 18px 0 32px 10px rgba(255,228,150,.5); }

/* stars (night sky) */
.star { position: absolute; border-radius: 50%; background: #FFF6DA; box-shadow: 0 0 8px 2px rgba(255,244,200,.55); animation: star-twinkle var(--tw, 2.6s) ease-in-out var(--twd, 0s) infinite; }
@keyframes star-twinkle { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* ambient pedestrians (world-space, no dialogue) */
.amb { position: absolute; bottom: 116px; width: 56px; height: 92px; pointer-events: none; will-change: transform; z-index: 4; }
.amb--ltr { animation: amb-ltr linear forwards; }
.amb--rtl { animation: amb-rtl linear forwards; }
@keyframes amb-ltr { from { transform: translateX(0); } to { transform: translateX(2000px); } }
@keyframes amb-rtl { from { transform: scaleX(-1) translateX(0); } to { transform: scaleX(-1) translateX(2000px); } }
.amb__fig { position: absolute; bottom: 0; width: 50px; height: 66px; border: 3px solid var(--mauve-400); border-radius: 24px 24px 18px 18px; animation: npc-step .55s ease-in-out infinite; }
.amb__fig::before, .amb__fig::after { content: ""; position: absolute; top: -11px; width: 13px; height: 16px; background: inherit; border: 3px solid var(--mauve-400); border-radius: 999px; }
.amb__fig::before { left: 6px; } .amb__fig::after { right: 6px; }
.amb__eyes { position: absolute; top: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 11px; }
.amb__eyes i { width: 4.5px; height: 6.5px; border-radius: 50%; background: var(--mauve-700); }

/* character */
.walker { position: absolute; bottom: calc(112px + var(--bk-ground, 0px)); left: min(38vw, 300px); width: 130px; display: flex; justify-content: center; pointer-events: none; z-index: 5; }
.walker img { height: 150px; filter: drop-shadow(0 12px 10px rgba(90,62,60,.22)); transition: transform .15s; }
.walker.is-walking img { animation: walk-bob .42s ease-in-out infinite; }
@keyframes walk-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
.walker.flip img { transform: scaleX(-1); }
.walker.is-walking.flip img { animation: walk-bob-flip .42s ease-in-out infinite; }
@keyframes walk-bob-flip { 0%,100% { transform: scaleX(-1) translateY(0) rotate(2deg); } 50% { transform: scaleX(-1) translateY(-9px) rotate(-2deg); } }

/* day/night overlay */
.dn-overlay { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; transition: background 1.2s var(--ease-soft); z-index: 12; }

/* HUD */
.hud { position: fixed; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 24px 24px 14px; z-index: 20; pointer-events: none; }
/* logged-in WordPress admin bar overlaps the fixed HUD (the in-flow building
   headers already clear it) — push the street/house HUD down so the logo lines
   up at the same spot on every screen */
body.admin-bar .hud { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .hud { top: 46px; } }
.hud > * { pointer-events: auto; }
/* .hud__logo sizing/position handled by the shared fixed-logo rule above */
.hud__right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.hud-pill { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--mauve-700); background: rgba(255,255,255,.92); border: 3px solid var(--mauve-400); border-radius: 999px; padding: 7px 14px; cursor: pointer;
  /* raised “sticker” depth — 1px taller than the old pop-sm */
  box-shadow: 0 4px 0 var(--mauve-400); transform: translateY(-1px);
  transition: transform .28s var(--ease-bounce), box-shadow .28s var(--ease-bounce), background-color .28s ease, color .28s ease; }
/* hover = pressed down, salmon fill, page-color text (only real buttons press) */
button.hud-pill:hover { transform: translateY(3px); box-shadow: 0 1px 0 var(--mauve-400); background: #F4AB9A; color: #FBF6F0; }
button.hud-pill:active { transform: translateY(4px); box-shadow: 0 0 0 var(--mauve-400); }
.hud-pill__arr { font-style: normal; display: inline-block; }
/* flat info chips — status, never clickable, visually distinct from raised buttons */
.hud-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--mauve-700); background: rgba(251,250,246,.68); border-radius: 999px; padding: 10px 17px; backdrop-filter: blur(4px); box-shadow: 0 6px 16px rgba(90,62,60,.16); }
.arc-hall .hud-chip { background: rgba(251,250,246,.88); color: var(--mauve-700); box-shadow: 0 6px 16px rgba(0,0,0,.32); }
button.hud-pill:hover .hud-pill__arr { animation: arr-pulse .7s ease-in-out infinite; }
@keyframes arr-pulse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
/* cartoony click sparks (spawned by town-fx.jsx) */
.bk-sparks { position: fixed; z-index: 220; width: 0; height: 0; pointer-events: none; }
.bk-sparks i { position: absolute; left: -1.5px; top: -6px; width: 3px; height: 11px; border-radius: 999px; animation: bk-spark .5s ease-out forwards; }
@keyframes bk-spark { 0% { opacity: 1; transform: translate(0, 0) rotate(var(--rot)) scaleY(.3); } 55% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scaleY(1); } }

/* ---- directional icon pulses (wrap glyphs in .bki) ---- */
.bki { font-style: normal; display: inline-block; }
/* CTA arrow glyphs (help the chef / take the quiz, etc.) were 1em → looked tiny
   next to the label. Size every in-button directional glyph consistently. */
.rm-chef__cta .bki--down, .rm-chef__cta .bki--up { font-size: 1.4em; vertical-align: -0.16em; margin-left: 3px; }
.hud-pill__arr, .hud-pill .bki, .of-news__more .bki { font-size: 1.15em; vertical-align: -0.05em; }
:is(button, a, .of-news__item--link):hover .bki--left { animation: bki-left .7s ease-in-out infinite; }
:is(button, a, .of-news__item--link):hover .bki--right { animation: bki-right .7s ease-in-out infinite; }
:is(button, a, .of-news__item--link):hover .bki--down { animation: bki-down .7s ease-in-out infinite; }
:is(button, a, .of-news__item--link):hover .bki--up { animation: bki-up .7s ease-in-out infinite; }
:is(button, a, .of-news__item--link):hover .bki--bob { animation: bki-bob .7s ease-in-out infinite; }
@keyframes bki-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@keyframes bki-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes bki-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes bki-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bki-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-9deg); } }

.minimap { position: fixed; bottom: calc(26px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 9px; background: rgba(255,255,255,.92); border: 3px solid var(--mauve-400); border-radius: 999px; padding: 9px 14px; z-index: 20; box-shadow: var(--shadow-pop-sm); }
.minimap button:not(.mm-arrow) { width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--mauve-400); background: var(--white); cursor: pointer; padding: 0; transition: transform .2s var(--ease-bounce), background .2s; }
.minimap button:not(.mm-arrow):hover { transform: scale(1.3); }
.minimap button.on { background: var(--primary); }
/* gamepad walk arrows flanking the minimap dots (hold to walk) */
.minimap__dots { display: flex; gap: 9px; align-items: center; }
/* walk arrows share the design-system "press, don't lift" button behavior
   (matches .hud-pill / .bld__enter): rest raised, hover presses into salmon,
   active fully pressed. Used in the minimap row and the standalone house bar. */
.mm-arrow { width: auto; height: auto; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--mauve-700); border: 3px solid var(--mauve-400); font-family: var(--font-display); font-weight: 800; line-height: 1; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; box-shadow: 0 4px 0 var(--mauve-400); transform: translateY(-1px); transition: transform .28s var(--ease-bounce), box-shadow .28s var(--ease-bounce), background-color .28s ease, color .28s ease; }
button.mm-arrow:hover { transform: translateY(3px); box-shadow: 0 1px 0 var(--mauve-400); background: #F4AB9A; color: #FBF6F0; }
button.mm-arrow:active { transform: translateY(4px); box-shadow: 0 0 0 var(--mauve-400); }
.minimap .mm-arrow { font-size: 18px; padding: 3px 13px; }
/* standalone walk-arrow bar (house & other walk pages with no minimap) */
.walk-arrows { position: fixed; bottom: calc(26px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 90px; z-index: 20; }
.walk-arrows .mm-arrow { font-size: 22px; padding: 8px 20px; }

/* ============================================================
   hero-backdrop header — when a building has a 3D hero, the hero
   image fills the whole header and the logo / back button / noren
   overlay it (vertwo-style), instead of sitting in a colored band.
   Scoped via :has() so headers WITHOUT a hero keep the classic band.
   ============================================================ */
:is(.rm-head, .of-head, .cs-head, .po-head, .ms-head):has(.bk-hero--building) {
  position: relative; background: transparent; padding: 0;
  border-bottom: 3.5px solid var(--mauve-400);
}
:is(.rm-head, .of-head, .cs-head, .po-head, .ms-head):has(.bk-hero--building) .rm-head__bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6; padding: 24px 20px 0;
}
:is(.rm-head, .of-head, .cs-head, .po-head, .ms-head):has(.bk-hero--building) .rm-noren {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
}
/* logo sits directly on the image (top scrim handles legibility) — no chip */

/* NOTE: do NOT put overflow-x:hidden on html/body — with height:100% it turns
   body into a scroll container and breaks the window-scroll-driven walk.
   Horizontal overflow is contained per-screen instead (e.g. .ms-screen). */

/* ---- walk arrows: don't let flex stretch them ---- */
.minimap, .walk-arrows { align-items: center; }
.minimap .mm-arrow, .walk-arrows .mm-arrow { flex: none; align-self: center; }

@media (max-width: 640px) {
  .minimap .mm-arrow { font-size: 16px; padding: 2px 11px; }
  .walk-arrows { gap: 70px; }
  .walk-arrows .mm-arrow { font-size: 20px; padding: 7px 17px; }
}

/* ---- mobile per-screen fixes ---- */
/* pop store: contain the cart drawer / wide rows so nothing shoves the page sideways */
.ms { overflow-x: clip; }
/* the card "+ add" button must stay one compact line (was wrapping into a big blob) */
.ms-add { white-space: nowrap; flex: none; }
@media (max-width: 640px) {
  /* adventure rack: 4 columns is far too thin on phones → ~1.6 per view */
  .cs-shelf__track { grid-auto-columns: calc(62% - 7px); }
  .cs-floor { padding: 0 16px; }
  /* keep building content + hero text off the screen edges */
  .bk-hero--building .bk-hero-inner { padding-left: 18px; padding-right: 18px; }
  /* hero-backdrop top bar: stop the logo + buttons cramming / clipping (store has an extra cart btn) */
  :is(.rm-head, .of-head, .cs-head, .po-head, .ms-head):has(.bk-hero--building) .rm-head__bar { padding: calc(20px + env(safe-area-inset-top)) 14px 0; gap: 6px; }
  .hd-btns { gap: 6px; flex: none; }
  .hud-pill, .ms-cartbtn--hud { font-size: 11px; padding: 6px 9px; }
  .ms-cartbtn--hud .ms-cartbtn__label { display: none; } /* show just the basket + count */
  .ms-add { font-size: 12px; padding: 5px 11px; }
}

/* interior overlay */
.interior { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(90,62,60,.45); animation: fade-in .3s; padding: 14px; }
@keyframes fade-in { from{opacity:0} to{opacity:1} }
.interior__panel { width: min(620px, 92vw); background: var(--cream-50); border: 3.5px solid var(--mauve-400); border-radius: 26px; padding: 34px 38px; box-shadow: var(--shadow-lg); animation: panel-in .4s var(--ease-bounce); position: relative; max-height: 88vh; max-height: 88dvh; overflow-y: auto; }
@keyframes panel-in { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
.interior__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--mauve-400); background: var(--white); color: var(--mauve-600); font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 4px 0 var(--mauve-400); transform: translateY(-1px); transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease-bounce), background-color .25s ease, color .25s ease; }
.interior__close:hover { transform: translateY(3px); box-shadow: 0 0 0 var(--mauve-400); background: #F4AB9A; color: #FBF6F0; border-color: var(--mauve-400); }
.interior__close:active { transform: translateY(4px); }
.scroll-hint { pointer-events: none; position: fixed; bottom: 116px; left: 50%; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; gap: 12px; font-family: var(--font-hand); font-weight: 600; font-size: 20px; color: var(--mauve-700); z-index: 18; background: rgba(251,250,246,.8); border: none; border-radius: 999px; padding: 11px 24px; backdrop-filter: blur(4px); box-shadow: 0 12px 32px rgba(90,62,60,.22); animation: hint-bob 1.6s var(--ease-soft) infinite; opacity: 1; visibility: visible; transition: opacity .7s ease, visibility .7s; }
.scroll-hint.gone { opacity: 0; visibility: hidden; }
.sh-mouse { position: relative; width: 17px; height: 27px; border: 2.5px solid var(--mauve-600); border-radius: 999px; flex: 0 0 auto; }
.sh-mouse i { position: absolute; left: 50%; top: 4px; width: 4px; height: 7px; margin-left: -2px; border-radius: 999px; background: var(--mauve-600); animation: sh-wheel 1.3s ease-in-out infinite; }
@keyframes sh-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(9px); opacity: .2; } 100% { transform: translateY(0); opacity: 0; } }
.sh-chevs { display: flex; }
.sh-chevs i { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1; color: var(--mauve-600); animation: sh-chev 1.1s ease-in-out infinite; }
.sh-chevs i:nth-child(2) { animation-delay: .15s; }
.sh-chevs i:nth-child(3) { animation-delay: .3s; }
@keyframes sh-chev { 0%, 100% { opacity: .25; transform: translateX(0); } 50% { opacity: 1; transform: translateX(3px); } }
@keyframes hint-bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,-8px)} }

/* game-scope bob (NO translateX — these elements are flex-centered, not absolutely positioned) */
@keyframes cg-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.cg .rm-chef__cta { animation: cg-bob 1.4s var(--ease-soft) infinite; }
.cg .rm-chef__cta--ghost { animation: none; }
.cg__tap { animation: cg-bob 1.6s var(--ease-soft) infinite !important; }

/* ================= RESPONSIVE — street, HUD, touch ================= */
html { -webkit-tap-highlight-color: transparent; }

/* hamburger (hidden on desktop; replaces the pill row <=768px) */
.hud-burger { display: none; width: 46px; height: 46px; padding: 0; justify-content: center; font-size: 19px; margin-left: auto; }
.hud-menu { position: fixed; top: 72px; right: 14px; z-index: 21; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; animation: panel-in .3s var(--ease-bounce); }

/* phone-landscape nudge (street needs vertical room) */
.rotate-note { display: none; position: fixed; inset: 0; z-index: 300; place-items: center; text-align: center; padding: 30px; background: var(--cream-50); font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--mauve-700); }
.rotate-note span { font-family: var(--font-hand); font-weight: 600; font-size: 18px; color: var(--mauve-500); }

@media (max-width: 768px) {
  /* clear the notch (viewport-fit=cover) so the fixed HUD logo lines up with the
     in-flow building headers, which use the same top offset below */
  .hud { padding: calc(20px + env(safe-area-inset-top)) 16px 12px; gap: 10px; }
  /* one unified mobile logo size — street, house, and every building header */
  .hud__logo, .rm-head__bar > img, .st__bar > img { top: calc(20px + env(safe-area-inset-top)); left: 16px; height: 34px; }
  /* the ⤵ glyph is tiny on phones — enlarge it on the enter / take-a-look pills (mobile only) */
  .bld__enter .bki--down, .house__pill .bki--down { font-size: 1.5em; vertical-align: -0.14em; margin-left: 1px; }
  .hud__right { display: none; }
  .hud-burger { display: inline-flex; align-items: center; }
  .minimap { gap: 12px; padding: 11px 16px; bottom: calc(22px + env(safe-area-inset-bottom)); max-width: 94vw; }
  .minimap button:not(.mm-arrow) { width: 16px; height: 16px; }
  .interior__panel { padding: 24px 20px 26px; border-radius: 20px; }
  .interior__panel h2 { font-size: 27px !important; }
  .scroll-hint { font-size: 17px; padding: 9px 18px; bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (max-width: 700px) {
  /* character further left (JS charOff mirrors this) + slightly smaller */
  .walker { left: 30vw; }
  .walker img { height: 132px; }
  .bld__sign { font-size: 16px; padding: 3px 14px; }
  .npc__bubble { width: max-content; max-width: min(60vw, 230px); white-space: normal; font-size: 16px; line-height: 1.35; text-align: center; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 430px) {
  .rotate-note { display: grid; }
}

/* ---- mobile fixes (round 2) ---- */
@media (max-width: 640px) {
  .rm-chef { margin: 26px 16px 0; padding: 16px 16px; gap: 14px; }       /* breathing room at the edges */
  .rm-recipe__card { padding: 24px 20px; }
  .rm-recipe__card ol { max-width: none; }
  .rm-recipe__bowl { position: static; margin: 18px auto 0; width: fit-content; }  /* bowl below the steps, not over them */
  .rm-head__bar { padding: calc(20px + env(safe-area-inset-top)) 14px 0; }
}

/* ---- pill dropdown (BkDropdown) ---- */
.bk-dd { position: relative; display: none; }
.bk-dd .rm-chip { pointer-events: auto; }
.bk-dd__btn { display: inline-flex; align-items: center; }
/* the .on "pressed" transform skewed it off the bar's center line — pin it + 2px right nudge */
.bk-dd .bk-dd__btn { transform: none; margin-left: 4px; }
.bk-dd .bk-dd__btn:active { transform: translateY(1px); }
.bk-dd__caret { width: 0; height: 0; margin-left: 8px; align-self: center; margin-top: 1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; transition: transform .2s var(--ease-bounce); }
.bk-dd--open .bk-dd__caret { transform: rotate(180deg); }
.bk-dd__menu { position: absolute; top: calc(100% + 9px); left: 0; z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: max-content; background: var(--white); border: 2.5px solid var(--mauve-100); border-radius: 18px; padding: 10px; box-shadow: var(--shadow-md); animation: panel-in .25s var(--ease-bounce); }
.bk-dd__menu .rm-chip { text-align: center; }
/* must come AFTER the base .bk-dd rule above — earlier copy lost the cascade */
@media (max-width: 640px) {
  .bk-dd { display: block; }
  .bk-dd .bk-dd__btn { margin-left: 6px; }       /* +2px vs base */
  .rm-filters__label { margin-left: 8px; }       /* +4px vs base */
}

/* desktop / chip-row version: cluster moved right via real padding (translate left a
   hole next to the label); label hugs the chips at the normal 8px flex gap; chips 1px up */
@media (min-width: 641px) {
  .rm-filters { padding-left: 24px; }
  .rm-filters__label { margin-right: 0; }
  .rm-filters > .rm-chip { transform: translateY(-2px); }
  .rm-filters > .rm-chip:hover { transform: translateY(2px); }
  .rm-filters > .rm-chip:active { transform: translateY(3px); }
  .rm-filters > .rm-chip.on { transform: translateY(2px); }
}

/* ---- cart pill lives in the top bars now (street HUD + store header) ---- */
.ms-cartbtn--hud { position: relative; right: auto; bottom: auto; font-size: 15px; padding: 9px 16px; background: var(--kato-bg); }
.ms-cartbtn--hud .ms-cartbtn__hint { bottom: auto; top: calc(100% + 12px); border-radius: 14px 3px 14px 14px; }
.ms-cartbtn--hud .ms-cartbtn__hint::after { bottom: auto; top: -6px; left: auto; right: 22px; }
.hd-btns { display: flex; align-items: center; gap: 10px; }
@media (max-width: 768px) {
  .ms-cartbtn--hud { font-size: 14px; padding: 8px 12px; }
  .ms-cartbtn--hud .ms-cartbtn__n { padding: 1px 8px; font-size: 12px; margin-left: 5px; }
  /* cart hugs the hamburger on the right */
  .hud .ms-cartbtn--hud { margin-left: auto; }
  .ms-cartbtn--hud + .hud-burger { margin-left: 0; }
  /* the text bubble would clash with the open menu — attention = glowing ping ring (DS pattern) */
  .ms-cartbtn--hud .ms-cartbtn__hint { display: none; }
  .ms-cartbtn--hud::after { content: ""; position: absolute; inset: -7px; border-radius: 999px; border: 3px solid rgba(244,171,154,.85); box-shadow: 0 0 16px rgba(244,171,154,.8), inset 0 0 10px rgba(244,171,154,.45); animation: bk-ping 1.5s ease-out infinite; pointer-events: none; }
}

/* ---- post office: decorative stamps flow under the title on small screens ---- */
@media (max-width: 700px) {
  .po-stamps { position: static; justify-content: center; margin: 14px auto 0; width: fit-content; }
}

/* ---- character chooser: all 3 cards in one row on tablet & mobile ---- */
@media (max-width: 880px) {
  .ch-screen { gap: 24px; padding: 28px 12px 44px; }
  .ch-cards { flex-wrap: nowrap; gap: 10px; width: 100%; justify-content: center; }
  .ch-card { width: min(252px, calc((100vw - 56px) / 3)); flex: none; border-width: 3px; border-radius: 18px; }
  .ch-card__art { height: min(240px, calc((100vw - 56px) / 3 * 0.95)); border-bottom-width: 2.5px; }
  .ch-card__pose { height: min(190px, calc((100vw - 56px) / 3 * 0.74)); }
  .ch-card__body { padding: 9px 10px 12px; }
  .ch-card__name { font-size: 17px; }
  .ch-card__species { font-size: 9px; }
  .ch-card__role { font-size: 11px; margin: 3px 0 8px; }
  .ch-card__traits { gap: 4px; }
  .ch-card__traits span { font-size: 9px !important; padding: 2px 7px !important; border-width: 1.5px !important; }
}
@media (max-width: 460px) {
  .ch-card__traits { display: none; }
  .ch-card__role { margin-bottom: 2px; }
  .ch-card__species { display: none; }
}

/* ---- mico's iPad goes portrait on portrait phones/tablets (grid 2x4) ---- */
@media (max-width: 880px) and (orientation: portrait) {
  /* size to the available height so the whole studio fits one screen (no scroll) */
  .ipad { aspect-ratio: 3 / 4; height: 100%; width: auto; max-width: 88vw; padding: 12px; border-radius: 28px; }
  .ipad__pagesWrap { margin: 4px 14px 8px; }   /* extra bottom room so the last row's title isn't clipped */
  .fold { width: 50%; height: 25%; }
  .fold__icon { width: clamp(44px, 12vw, 54px); height: clamp(44px, 12vw, 54px); padding: 6px; gap: 4px; }
  /* full two-line titles, centered, with breathing room — was clipping to one cramped line */
  .fold .app__label { font-size: 10px; line-height: 1.16; max-width: 100%; padding: 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .fold-slide__num { right: 4px; bottom: 4px; font-size: 11px; padding: 1px 7px; }
  .fold:hover .fold__icon { transform: scale(1.04); }  /* no lift — row 0 clipped against the pager viewport */
  .fpv-hand__pen { display: none; }                    /* the pen was lying across the dock */
  .fpv-hand { bottom: -26px; }
  .app__icon { width: clamp(54px, 16vw, 78px); height: clamp(54px, 16vw, 78px); font-size: 16px; }
  .app__label, .fold .app__label { font-size: 10.5px; }
  .dock__app { width: 42px; height: 42px; font-size: 17px; }
  .dock__cap { font-size: 9.5px; }
  /* the FPV hands sat over the dock on phones — drop them out of the way */
  .fpv-hand { display: none; }
  /* keep the open-folder filmstrip fully inside the iPad screen (was clipping) */
  .fold-panel { width: 92%; padding: 12px 12px 14px; }
  .fold-strip { gap: 5px; }
  .fold-strip .ipad__pager { width: 30px; height: 30px; flex: none; }
  .fold-cell { padding: 0 3px; }
  /* the dock overflowed the narrow iPad on phones ("drift right") — compact it */
  .ipad__dock2 { gap: 7px; padding: 6px 8px 5px; max-width: 96%; }
  .dock__sep { height: 34px; }
  .dock__cap { font-size: 9px; }
}