/* ═══════════════════════════════════════════════
   Little Adventure Town | app shell, town, menus, parent area
   ═══════════════════════════════════════════════ */

:root {
  --ink: #2b2d42;
  --sky: #8fd8ff;
  --grass: #8fd67a;
  --red: #ff5b5b; --blue: #3f8cff; --yellow: #ffc935; --green: #43c46b;
  --orange: #ff9233; --purple: #a26bff; --pink: #ff7fbf;
  --btn: clamp(56px, 12vmin, 88px);
  --font: "Baloo 2", "Nunito", "Arial Rounded MT Bold", "Varela Round", "Segoe UI", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font); color: var(--ink); background: var(--sky);
  overflow: hidden; overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
#app {
  position: fixed; inset: 0; overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; touch-action: manipulation;
}
button {
  font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button:focus { outline: none; }
button:focus-visible, [role="button"]:focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 8px rgba(43,45,66,.55); border-radius: 18px; }
svg.art { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; }
img { -webkit-user-drag: none; }

/* ---------- screens ---------- */
.screen {
  position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}
.screen.active { opacity: 1; }
.screen.leaving { opacity: 0; pointer-events: none; }

/* ---------- round buttons ---------- */
.btn-round {
  --c: var(--orange);
  position: relative; flex: none;
  width: var(--btn); height: var(--btn); border-radius: 50%;
  background: var(--c); border: 4px solid #fff;
  box-shadow: 0 5px 0 rgba(0,0,0,.18), 0 8px 14px rgba(0,0,0,.12);
  display: grid; place-items: center; color: #fff;
  transition: transform .08s;
}
.btn-round:active { transform: translateY(3px) scale(.96); }
.btn-round .icon { width: 58%; }
.btn-round.small { width: calc(var(--btn) * .74); height: calc(var(--btn) * .74); }
.btn-round.big { width: calc(var(--btn) * 1.3); height: calc(var(--btn) * 1.3); }
.c-pink { --c: var(--pink); } .c-purple { --c: var(--purple); } .c-blue { --c: var(--blue); }
.c-green { --c: var(--green); } .c-orange { --c: var(--orange); }
.c-white { --c: #fff; } .c-white .icon { width: 82%; }
.home-btn { --c: var(--orange); }
.ear-btn { --c: var(--blue); }
.parent-btn { --c: rgba(255,255,255,.75); color: #6b7280; border-color: rgba(255,255,255,.9); box-shadow: none; }
.btn-round.has-new::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 30%; height: 30%;
  background: var(--red); border: 3px solid #fff; border-radius: 50%;
  animation: pulse 1.2s ease-in-out infinite;
}
/* hold-to-activate ring */
.hold-ring {
  position: absolute; inset: -9px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(#fff calc(var(--hold, 0) * 360deg), rgba(255,255,255,.25) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
}
.holding .hold-ring { opacity: 1; }
.parent-btn .hold-ring { background: conic-gradient(var(--purple) calc(var(--hold, 0) * 360deg), rgba(0,0,0,.12) 0); }

/* ---------- star counter ---------- */
.star-count {
  display: flex; align-items: center; gap: .3em; flex: none;
  height: calc(var(--btn) * .82); padding: 0 .7em 0 .35em;
  background: #fff; border-radius: 999px;
  box-shadow: 0 5px 0 rgba(0,0,0,.12);
  font-size: calc(var(--btn) * .42); font-weight: 800; line-height: 1;
}
.star-ico { width: calc(var(--btn) * .62); display: block; }

/* ---------- caption (narration text, for parents) ---------- */
.caption {
  position: fixed; z-index: 60; left: 50%; top: calc(var(--safe-t) + 10px);
  transform: translate(-50%, -8px); max-width: min(46vw, 520px);
  padding: .35em .9em; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--ink);
  font-size: clamp(13px, 2.3vmin, 22px); font-weight: 700; text-align: center; line-height: 1.2;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.caption.show { opacity: 1; transform: translate(-50%, 0); }
.no-caption .caption { display: none; }

/* ---------- particles / flying things ---------- */
.fx-canvas { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.fly-star { position: fixed; z-index: 81; width: clamp(48px, 10vmin, 84px); pointer-events: none; }
.fly-bird { position: fixed; z-index: 40; width: clamp(40px, 8vmin, 70px); pointer-events: none; }
.fly-bird.flip svg { transform: scaleX(-1); }

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  background: rgba(30, 40, 80, .55); opacity: 0; transition: opacity .25s;
  padding: 16px;
}
.overlay.show { opacity: 1; }
.reward-card, .session-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2vmin;
  padding: 4vmin 6vmin; border-radius: 6vmin; background: #fffbe9; border: 6px solid #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
  transform: scale(.7); transition: transform .35s cubic-bezier(.3,1.6,.5,1);
}
.overlay.show .reward-card, .overlay.show .session-card { transform: scale(1); }
.reward-art { width: min(46vmin, 320px); animation: floaty 2s ease-in-out infinite; position: relative; z-index: 1; }
.reward-rays {
  position: absolute; left: 50%; top: 42%; width: 150%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(rgba(255,210,63,.35) 0 12deg, transparent 12deg 24deg);
  border-radius: 50%; animation: spin 12s linear infinite;
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 75%); mask: radial-gradient(closest-side, #000 30%, transparent 75%);
}
.reward-title, .session-title {
  position: relative; z-index: 1; font-size: clamp(26px, 6vmin, 56px); font-weight: 900; color: var(--orange);
  text-shadow: 0 3px 0 #fff; text-align: center; line-height: 1.1;
}
.session-stars { display: flex; gap: 1vmin; }
.session-stars .icon { width: clamp(40px, 9vmin, 80px); animation: pop-in .5s both; }
.session-stars .icon:nth-child(2) { animation-delay: .15s; translate: 0 -18%; }
.session-stars .icon:nth-child(3) { animation-delay: .3s; }
.session-btns { display: flex; gap: 5vmin; margin-top: 1vmin; }
.big-choice {
  display: flex; flex-direction: column; align-items: center; gap: .3em;
  width: clamp(120px, 30vmin, 230px); padding: 2.5vmin 0 2vmin; border-radius: 5vmin;
  color: #fff; font-size: clamp(18px, 4vmin, 34px); font-weight: 900; letter-spacing: .03em;
  border: 5px solid #fff; box-shadow: 0 8px 0 rgba(0,0,0,.2);
}
.big-choice:active { transform: translateY(4px); }
.big-choice .icon { width: 55%; }
.big-choice.again { background: var(--green); }
.big-choice.town { background: var(--orange); }

.toast {
  position: fixed; z-index: 90; left: 50%; bottom: calc(var(--safe-b) + 24px); transform: translate(-50%, 20px);
  background: rgba(43,45,66,.92); color: #fff; padding: .6em 1.1em; border-radius: 999px;
  font-size: 15px; font-weight: 600; opacity: 0; transition: .25s; pointer-events: none; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ═════════ TITLE ═════════ */
.screen-title {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin;
  background: linear-gradient(#7fd0ff 0%, #c9efff 62%, var(--grass) 62.2%, #7cc968 100%);
  overflow: hidden;
}
.title-sky { position: absolute; inset: 0; pointer-events: none; }
.title-sun { position: absolute; right: 7%; top: 6%; width: clamp(70px, 17vmin, 160px); }
.title-sun .sun-rays { transform-origin: 50px 50px; animation: spin 30s linear infinite; }
.title-cloud { position: absolute; width: clamp(90px, 22vmin, 220px); animation: drift 9s ease-in-out infinite alternate; }
.title-cloud.c1 { left: 6%; top: 8%; } .title-cloud.c2 { left: 34%; top: 20%; width: clamp(60px, 14vmin, 140px); animation-duration: 12s; }
.title-name {
  position: relative; margin: 0; padding: 0 16px; text-align: center;
  font-size: clamp(30px, 9vmin, 92px); font-weight: 900; line-height: 1; color: #fff;
  text-shadow: 0 .06em 0 var(--orange), 0 .12em 0 rgba(0,0,0,.15);
  -webkit-text-stroke: .035em var(--orange); paint-order: stroke fill;
  animation: floaty 3s ease-in-out infinite;
}
.title-play {
  position: relative; width: clamp(120px, 30vmin, 240px); aspect-ratio: 1; border-radius: 50%;
  background: var(--green); border: 8px solid #fff; display: grid; place-items: center;
  box-shadow: 0 10px 0 #2a8a48, 0 18px 30px rgba(0,0,0,.2);
  animation: pulse 1.4s ease-in-out infinite;
}
.title-play:active { transform: translateY(6px); box-shadow: 0 4px 0 #2a8a48; }
.title-play .icon { width: 60%; margin-left: 6%; }
.title-cast {
  position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2vmin;
  width: 100%; padding: 0 3vmin; margin-top: 1vmin;
}
.tc { flex: 0 1 auto; animation: floaty 2.4s ease-in-out infinite; }
.tc.dino { width: clamp(70px, 17vmin, 170px); } .tc.bus { width: clamp(100px, 25vmin, 250px); animation-delay: .4s; }
.tc.car { width: clamp(80px, 20vmin, 200px); animation-delay: .8s; } .tc.truck { width: clamp(90px, 23vmin, 230px); animation-delay: 1.2s; }

/* ═════════ TOWN ═════════ */
.screen-town {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: linear-gradient(#7fd0ff 0%, #c9efff 30%, #a6e08a 30.2%, var(--grass) 100%);
  overflow: hidden;
}
.town-sky { position: absolute; inset: 0; z-index: 0; }
.town-sky .deco { position: absolute; z-index: 1; }
.town-sky .sun { left: 47%; top: calc(var(--safe-t) + 4px); width: clamp(54px, 12vmin, 104px); }
.town-sky .sun .sun-rays { transform-origin: 50px 50px; animation: spin 30s linear infinite; }
.town-sky .cloud { width: clamp(64px, 15vmin, 150px); animation: drift 10s ease-in-out infinite alternate; }
.town-sky .cl1 { left: 30%; top: calc(var(--safe-t) + 6px); } .town-sky .cl2 { left: 62%; top: calc(var(--safe-t) + 14px); animation-duration: 13s; }
.hill { position: absolute; top: 22%; width: 70%; height: 30%; border-radius: 50%; background: #b5e89c; }
.hill.h1 { left: -15%; } .hill.h2 { right: -18%; top: 20%; background: #a6e08a; }

.town-bar, .game-bar, .menu-bar {
  position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: clamp(6px, 1.4vmin, 14px) clamp(8px, 2vmin, 20px);
  pointer-events: none;
}
.bar-left, .bar-right, .bar-mid { display: flex; align-items: center; gap: clamp(6px, 1.6vmin, 16px); pointer-events: auto; }

.town-grid {
  position: relative; z-index: 2; min-height: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(2px, 1vmin, 12px) clamp(4px, 1.6vmin, 20px);
  padding: 0 clamp(8px, 2.4vmin, 32px);
}
.place {
  position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center;
  animation: floaty 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.37s);
}
.place-art { flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; filter: drop-shadow(0 4px 0 rgba(0,0,0,.08)); }
.place-art svg { width: auto; height: 100%; max-width: 100%; }
.place-name {
  flex: none; margin-top: -4px; padding: .1em .8em; border-radius: 999px; background: rgba(255,255,255,.9);
  font-size: clamp(10px, 1.9vmin, 17px); font-weight: 800; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.1);
}
.place:active .place-art { scale: .94; }
.place.last .place-name { background: var(--yellow); }
.siren-a, .siren-b { transform-box: fill-box; }

.town-street {
  --sh: clamp(84px, 21vh, 200px);
  position: relative; z-index: 2; height: var(--sh);
  display: flex; align-items: flex-end; justify-content: space-around; gap: 1vmin;
  padding: 0 1vmin calc(var(--sh) * .1);
}
.street-road {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44%; z-index: -1;
  background:
    linear-gradient(90deg, #fff 50%, transparent 0) 0 50% / 60px 5px repeat-x,
    #6b7280;
  border-top: 5px solid #868d9b;
}
.town-street .deco { height: 100%; display: flex; align-items: flex-end; flex: 0 1 auto; min-width: 0; }
.town-street .deco svg { height: 100%; width: auto; max-width: 100%; }
.town-street .mascot { height: 72%; }
.town-street .m-dino { height: 86%; }
.town-street .tree { height: 64%; margin-bottom: calc(var(--sh) * .3); }
.town-street .tlight { height: 70%; margin-bottom: calc(var(--sh) * .28); }
.tree .tree-top { transform-origin: 60px 90px; }

/* ═════════ MENUS (list / stickers / my car) ═════════ */
.screen-list, .screen-stickers, .screen-mycar {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: linear-gradient(#ffe9a8, #ffd3a8);
}
.screen-stickers { background: linear-gradient(#c9efff, #d9d2ff); }
.screen-mycar { background: linear-gradient(#c9efff, #b8f0c8); }
.menu-title { margin: 0; flex: 1; text-align: center; font-size: clamp(20px, 5vmin, 44px); font-weight: 900; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.15); pointer-events: none; }

.list-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
  gap: clamp(8px, 2vmin, 20px); padding: clamp(8px, 2vmin, 24px); min-height: 0;
}
.list-card {
  position: relative; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: #fff; border-radius: clamp(14px, 3vmin, 30px); padding: clamp(6px, 1.4vmin, 14px);
  box-shadow: 0 6px 0 rgba(0,0,0,.12);
}
.list-card:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.list-art { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.list-art svg, .list-art .road-icon { height: 100%; width: auto; max-width: 100%; }
.list-art .road-icon { aspect-ratio: 1; }
.list-name { font-size: clamp(11px, 2.1vmin, 20px); font-weight: 800; text-align: center; line-height: 1.1; }
.list-num {
  position: absolute; left: 8px; top: 8px; width: 1.7em; height: 1.7em; border-radius: 50%;
  background: var(--purple); color: #fff; font-weight: 900; font-size: clamp(12px, 2.2vmin, 20px); display: grid; place-items: center;
}

.sticker-book { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 clamp(10px, 3vmin, 40px) 24px; touch-action: pan-y; }
.sticker-page { background: rgba(255,255,255,.75); border-radius: 26px; padding: 10px 16px 16px; margin-bottom: 14px; }
.sticker-page h3 { margin: 0 0 8px; font-size: clamp(16px, 3vmin, 26px); font-weight: 900; color: var(--purple); }
.sticker-row { display: flex; flex-wrap: wrap; gap: clamp(8px, 2vmin, 18px); }
.sticker {
  width: clamp(84px, 16vmin, 140px); aspect-ratio: 1; border-radius: 24%; display: grid; place-items: center; padding: 8px;
  background: #fff; border: 4px solid #fff; box-shadow: 0 5px 0 rgba(0,0,0,.1);
}
.sticker.owned { rotate: -3deg; } .sticker.owned:nth-child(even) { rotate: 3deg; }
.sticker.empty { background: rgba(255,255,255,.4); border: 4px dashed #b8b0e6; box-shadow: none; }
.sticker-q { font-size: clamp(30px, 7vmin, 60px); font-weight: 900; color: #b8b0e6; }
.sticker.new { border-color: var(--yellow); animation: pulse 1.2s ease-in-out infinite; }

.mycar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3vmin; padding: 0 3vmin 3vmin; min-height: 0; align-items: center; }
.mycar-preview { justify-self: center; width: min(100%, 60vh); }
.mycar-options { display: flex; flex-direction: column; gap: clamp(8px, 2vmin, 18px); max-height: 100%; overflow-y: auto; touch-action: pan-y; padding: 6px; }
.opt-row { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.8vmin, 16px); background: rgba(255,255,255,.6); border-radius: 24px; padding: 10px; }
.opt {
  position: relative; width: clamp(60px, 11vmin, 92px); aspect-ratio: 1; border-radius: 26%; background: #fff; border: 5px solid #fff;
  display: grid; place-items: center; padding: 6px; box-shadow: 0 4px 0 rgba(0,0,0,.1);
}
.opt.on { border-color: var(--green); box-shadow: 0 0 0 4px var(--green); }
.opt.locked > .art, .opt.locked > .sw-color { opacity: .3; filter: grayscale(1); }
.opt-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; font-size: clamp(12px, 2.2vmin, 18px); }
.opt-lock .icon { width: 44%; }
.opt-horn .opt:nth-child(2) > .art { filter: hue-rotate(200deg); }
.opt-horn .opt:nth-child(3) > .art { filter: hue-rotate(80deg); }
.opt-horn .opt:nth-child(4) > .art { filter: hue-rotate(280deg); }
.opt-horn .opt.locked > .art { filter: grayscale(1); }
.sw-color { width: 82%; aspect-ratio: 1; border-radius: 50%; border: 4px solid rgba(0,0,0,.12); }
.sw-none { width: 70%; aspect-ratio: 1; border-radius: 50%; border: 5px solid #c7cfdb; background: linear-gradient(45deg, transparent 46%, #c7cfdb 46% 54%, transparent 54%); }

/* ═════════ PARENT AREA (deliberately plain) ═════════ */
.screen-parent { background: #f3f5f9; overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }
.parent-wrap { max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; -webkit-user-select: text; user-select: text; touch-action: pan-y; }
.p-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.p-head h2 { margin: 0; font-size: 24px; }
.p-card { background: #fff; border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.p-card h3 { margin: 4px 0 10px; font-size: 16px; }
.p-card h4 { margin: 12px 0 6px; font-size: 14px; color: #555; }
.p-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eef0f4; font-size: 16px; cursor: pointer; }
.p-row input { position: absolute; opacity: 0; pointer-events: none; }
.p-switch { position: relative; width: 52px; height: 30px; border-radius: 999px; background: #c9ced8; transition: .2s; flex: none; }
.p-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.p-row input:checked + .p-switch { background: #43c46b; }
.p-row input:checked + .p-switch::after { left: 25px; }
.p-row input:focus-visible + .p-switch { outline: 3px solid #3f8cff; outline-offset: 2px; }
.p-radios { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.p-radio { cursor: pointer; }
.p-radio input { position: absolute; opacity: 0; }
.p-radio span { display: block; padding: 9px 14px; border-radius: 10px; border: 2px solid #d5d9e2; font-size: 15px; }
.p-radio input:checked + span { border-color: #3f8cff; background: #eaf2ff; font-weight: 600; }
.p-radio input:focus-visible + span { outline: 3px solid #3f8cff; outline-offset: 2px; }
.pbtn { padding: 10px 16px; border-radius: 10px; background: #e9edf3; font-size: 15px; font-weight: 600; margin-top: 8px; font-family: inherit; }
.pbtn.primary { background: #3f8cff; color: #fff; margin-top: 0; }
.pbtn.danger { background: #ffe3e3; color: #c22f2f; }
.p-note { font-size: 13px; color: #6b7280; line-height: 1.45; }
.p-stats { font-size: 16px; margin: 0; }
.p-levels { list-style: none; margin: 0; padding: 0; font-size: 14px; columns: 2; column-gap: 24px; }
.p-levels li { display: flex; justify-content: space-between; padding: 3px 0; break-inside: avoid; }
.confirm-card { background: #fff; border-radius: 16px; padding: 20px; max-width: 360px; font-family: "Segoe UI", system-ui, sans-serif; font-size: 16px; }
.confirm-card p { margin: 0 0 14px; }
.confirm-btns { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- debug ---------- */
.debug-panel {
  position: absolute; z-index: 50; left: 50%; bottom: 4px; transform: translateX(-50%);
  display: flex; gap: 4px; align-items: center; padding: 4px 6px; border-radius: 10px;
  background: rgba(0,0,0,.6); color: #fff; font: 12px monospace;
}
.debug-panel button { background: #fff; color: #000; border-radius: 6px; padding: 4px 8px; font: 12px monospace; }
.show-hitboxes button, .show-hitboxes [role="button"], .show-hitboxes .dl-item, .show-hitboxes .g-car { outline: 2px dashed red !important; outline-offset: 0; }

/* ═════════ PORTRAIT ═════════ */
@media (orientation: portrait) {
  .town-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); }
  .town-street { --sh: clamp(84px, 13vh, 160px); }
  .town-street .t2, .town-street .tlight { display: none; }
  .town-sky .sun { left: auto; right: 4%; top: calc(var(--safe-t) + var(--btn) + 18px); }
  .town-sky .cl1 { left: 6%; top: calc(var(--safe-t) + var(--btn) + 22px); } .town-sky .cl2 { display: none; }
  .list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mycar { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .mycar-preview { width: min(70%, 34vh); }
  .title-cast .truck { display: none; }
  .caption { max-width: 80vw; top: calc(var(--safe-t) + var(--btn) + 22px); }
}
@media (orientation: portrait) and (max-width: 520px) {
  .town-bar .bar-left { gap: 5px; }
  :root { --btn: clamp(50px, 13.5vw, 72px); }
}

/* ═════════ PLAY TIME + PARENT PIN ═════════ */
.title-brand {
  position: relative; padding: .25em 1em; border-radius: 999px; background: rgba(255,255,255,.85);
  font-size: clamp(13px, 2.6vmin, 24px); font-weight: 800; letter-spacing: .04em; color: var(--purple);
}
.pt-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; overflow: auto;   /* card centers with margin:auto so it can still scroll if too tall */
  padding: max(12px, var(--safe-t)) 12px max(12px, var(--safe-b));
  background: rgba(30, 40, 80, .6); opacity: 0; transition: opacity .25s;
  font-family: "Segoe UI", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.pt-overlay.show { opacity: 1; }
.pt-card {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 32px;
  width: min(760px, 100%); margin: auto; padding: 22px 26px; border-radius: 22px; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.pt-card.small { width: min(340px, 100%); padding-top: 34px; }
.pt-left { flex: 1 1 260px; max-width: 340px; }
.pt-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 230px; }
.pt-card h2, .pt-lockbox h2 { margin: 0 0 4px; font-size: 24px; }
.pt-sub { margin: 0 0 12px; color: #6b7280; font-size: 15px; }
.pt-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pt-chip { padding: 12px 4px; border-radius: 12px; border: 2px solid #d5d9e2; background: #fff; font-size: 15px; font-weight: 600; }
.pt-chip.on { border-color: #3f8cff; background: #eaf2ff; color: #1d5fd0; }
.pt-msg { margin: 0 0 10px; min-height: 2.6em; max-width: 240px; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.3; }
.pt-msg.warn { color: #c22f2f; }
.pt-start { padding: 16px 44px; border-radius: 14px; background: #43c46b; color: #fff; font-size: 20px; font-weight: 800; }
.pt-forgot { margin-top: 10px; font-size: 13px; color: #6b7280; text-decoration: underline; }
.pt-x { position: absolute; right: 8px; top: 6px; width: 40px; height: 40px; font-size: 28px; line-height: 1; color: #6b7280; }
.pin-pad { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pin-dots { display: flex; gap: 12px; height: 16px; }
.pin-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #9aa6b6; }
.pin-dots i.on { background: #3f8cff; border-color: #3f8cff; }
.pin-keys { display: grid; grid-template-columns: repeat(3, 62px); gap: 8px; }
.pin-key { height: 52px; border-radius: 12px; background: #eef1f6; font-size: 22px; font-weight: 700; }
.pin-key:active { background: #d9dfe9; }

/* time is up: the screen "turns off" */
.pt-lock { background: #070b18; color: #c9d3f2; }
.pt-lock.slow { transition: opacity 2.5s ease-in; }
.pt-lockbox { display: flex; flex-direction: column; align-items: center; text-align: center; margin: auto; }
.pt-moon { width: min(200px, 30vh); }
.pt-lock .pt-sub { color: #7f8bb3; }
.pt-lock .pt-msg { color: #7f8bb3; font-weight: 500; }
.pt-lock .pin-dots i { border-color: #47527a; }
.pt-lock .pin-key { background: #141b33; color: #8f9bc4; }
.pt-lock .pin-key:active { background: #222b4d; }
.pt-lock .pt-forgot { color: #5c688f; }
/* phones held sideways (about 360px tall): time on the left, keypad on the right, everything on one screen */
@media (orientation: landscape) and (max-height: 520px) {
  .pt-overlay { padding: 8px 12px; }
  .pt-card { flex-wrap: nowrap; padding: 10px 18px; gap: 8px 22px; }
  .pt-card.small { padding-top: 14px; }
  .pt-left { flex: 1 1 0; min-width: 0; max-width: none; }
  .pt-right { min-width: 210px; }
  .pt-card h2, .pt-lockbox h2 { font-size: 20px; }
  .pt-sub { margin-bottom: 8px; font-size: 14px; }
  .pt-chip { padding: 10px 2px; font-size: 14px; }
  .pt-msg { min-height: 0; margin-bottom: 6px; font-size: 14px; }
  .pin-pad { gap: 8px; } .pin-dots { height: 14px; } .pin-dots i { width: 14px; height: 14px; }
  .pin-keys { grid-template-columns: repeat(3, 60px); gap: 6px; }
  .pin-key { height: 42px; font-size: 20px; }
  .pt-forgot { margin-top: 4px; }
  .pt-lockbox { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 36px; text-align: center; }
  .pt-lockbox .pt-moon { grid-column: 1; grid-row: 1; width: 120px; justify-self: center; align-self: end; }
  .pt-lockbox h2 { grid-column: 1; grid-row: 2; }
  .pt-lockbox .pt-sub { grid-column: 1; grid-row: 3; max-width: 260px; align-self: start; }
  .pt-lockbox .pt-msg { grid-column: 2; grid-row: 1; align-self: end; justify-self: center; }
  .pt-lockbox .pt-padhost { grid-column: 2; grid-row: 2 / span 2; }
  .pt-lockbox .pt-forgot { grid-column: 2; grid-row: 4; justify-self: center; }
}

/* language switch on the title screen */
.lang-btn {
  position: absolute; z-index: 3; left: calc(var(--safe-l) + 12px); top: calc(var(--safe-t) + 12px);
  display: flex; align-items: center; gap: .45em; min-height: 48px; padding: 0 1.1em 0 .7em; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--purple); box-shadow: 0 4px 0 rgba(0,0,0,.12);
  font-size: clamp(15px, 2.6vmin, 22px); font-weight: 800;
}
.lang-btn .icon { width: 1.5em; }
.lang-btn:active { transform: translateY(2px); }
.pause-menu .session-card { padding: 5vmin 6vmin; }

/* desktop shell: exit (asks for the parent PIN) */
.exit-btn {
  position: absolute; z-index: 3; right: calc(var(--safe-r) + 12px); top: calc(var(--safe-t) + 12px);
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.75); color: #6b7280; box-shadow: 0 3px 0 rgba(0,0,0,.1);
}
.exit-btn .icon { width: 58%; }
.pt-exit { margin-top: 12px; padding: 10px 28px; border-radius: 12px; background: #e9edf3; color: #c22f2f; font-size: 16px; font-weight: 700; }