/* =========================================================
   MYTIVITY STYLES — every color, size and move in the game
   Pixel rules: square corners, chunky borders, hard shadows.
   No round corners, no blurry shadows, no color fades.
   ========================================================= */

/* --- The color box: change a color here and it changes everywhere --- */
:root {
  --bg: #1b2b30;              /* Dark gray-teal: the color behind everything (calm on a TV) */
  --frame: #101014;           /* Almost black: the Game Boy frame around the room */
  --cream: #fff4e0;           /* Soft warm white: text boxes and pop-ups */
  --ink: #241a12;             /* Almost-black brown: words and thick borders */
  --orange: #f28c28;          /* Warm orange: the Done button */
  --orange-dark: #a8540c;     /* Darker orange: the hard shadow under orange buttons */
  --teal: #2a9d8f;            /* Teal green-blue */
  --teal-dark: #1b6b61;       /* Darker teal */
  --yellow: #f4c542;          /* Sunny yellow: the goal bar */
  --yellow-dark: #9c7a12;     /* Darker yellow */
  --red: #d9534f;             /* Soft red: wrong PIN and the reset button */
  --tan: #cdbfa6;             /* Light brown: shadows under white buttons */
  --pixel: "Press Start 2P", monospace;           /* The chunky video-game letters */
  --round: "Nunito", system-ui, sans-serif;       /* The round, easy-to-read letters (settings only) */
  --speed: 1;                 /* How fast moves happen (1 = normal, bigger = slower). Gentle mode makes it 1.6 */
}

/* --- Anything marked "hidden" really disappears (even if another rule says show it) --- */
[hidden] { display: none !important; }

/* --- Makes sizes include the border, so boxes don't grow by surprise --- */
*, *::before, *::after { box-sizing: border-box; }

/* --- The whole page --- */
html, body {
  margin: 0;                  /* No empty edge around the page */
  height: 100%;               /* The page fills the whole screen top to bottom */
}
body {
  background: var(--bg);      /* The dark gray-teal color behind everything */
  color: var(--cream);        /* Words are soft white unless a box says otherwise */
  font-family: var(--pixel);  /* Video-game letters everywhere unless a box says otherwise */
  display: flex;              /* Stacks the top bar and the game area... */
  flex-direction: column;     /* ...one on top of the other */
  min-height: 100dvh;         /* At least as tall as the phone screen */
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); /* Keeps stuff away from the phone's notch and rounded screen corners */
  gap: clamp(8px, 1.6vmin, 20px);   /* Space between the top bar and the game area: grows on a big TV */
  overflow-x: hidden;         /* Never lets the page slide sideways */
  -webkit-tap-highlight-color: transparent; /* Stops the gray flash when you tap on a phone */
  user-select: none;          /* Stops words from getting highlighted when he taps a lot */
}

/* --- All buttons use the page's font, not the phone's boring default --- */
button { font-family: inherit; cursor: pointer; }

/* =========================================================
   TOP BAR (goal bar + ticket counters)
   ========================================================= */

/* --- The strip across the top that holds the goal bar and the two counters --- */
.hud {
  display: flex;              /* Puts the goal bar and counters side by side */
  align-items: center;        /* Lines them up through the middle */
  gap: clamp(8px, 2vmin, 24px);       /* Space between the goal bar and the counters */
  background: var(--frame);           /* Almost-black strip, like the Game Boy frame */
  border: 4px solid #000;             /* Chunky black edge */
  padding: clamp(8px, 1.6vmin, 18px) clamp(10px, 2vmin, 24px); /* Empty space inside the strip */
}

/* --- The goal part takes up all the leftover room --- */
.goal { flex: 1; min-width: 0; }

/* --- On a skinny phone: goal bar gets its own full line, counters go underneath --- */
@media (max-width: 560px) {
  .hud { flex-wrap: wrap; }           /* Lets things drop to a second line */
  .goal { flex-basis: 100%; }         /* The goal bar takes the whole first line */
  .counters { flex: 1; }              /* Counters share the second line... */
  .counter { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; } /* ...each one wide, number and label side by side */
  .counter-label { margin-top: 0; }   /* No extra space since they're side by side now */
}

/* --- The goal's name on the left and "3 / 10" on the right --- */
.goal-label {
  display: flex;                      /* Name and number on one line */
  justify-content: space-between;     /* Name pushed left, number pushed right */
  gap: 8px;                           /* A little space if they get close */
  font-size: clamp(9px, 1.8vmin, 20px); /* Small on a phone, bigger on a TV */
  color: var(--yellow);               /* Sunny yellow words */
  margin-bottom: 8px;                 /* Space between the words and the bar */
  white-space: nowrap;                /* Keeps the words on one line */
  overflow: hidden;                   /* Hides extra if the name is too long... */
  text-overflow: ellipsis;            /* ...and shows "..." instead */
}

/* --- The empty track of a progress bar (a square box, not a pill) --- */
.bar {
  height: clamp(14px, 2.6vmin, 32px); /* How thick the bar is (thicker on a TV) */
  background: #000;                   /* Black inside the empty part */
  border: 3px solid var(--yellow-dark); /* Dark yellow square edge */
  padding: 2px;                       /* A thin black gap between the edge and the fill */
}

/* --- The colored part of the bar that grows. It looks like a row of yellow blocks --- */
.bar-fill {
  height: 100%;                       /* Fills the bar top to bottom */
  width: 0%;                          /* Starts empty (app.js makes it bigger) */
  background: repeating-linear-gradient(90deg, var(--yellow) 0 10px, #000 10px 12px); /* Yellow blocks with thin black gaps (sharp stripes, not a fade) */
  transition: width calc(.9s * var(--speed)) steps(10);  /* Grows in little jumps, like an old game */
}

/* --- The two little counter boxes (TODAY and STILL POSSIBLE) --- */
.counters { display: flex; gap: clamp(6px, 1.4vmin, 16px); }   /* Side by side with a little space */
.counter {
  background: #000;                   /* Black inside */
  border: 3px solid var(--teal);      /* Square teal edge */
  padding: 6px clamp(8px, 1.6vmin, 18px); /* Space inside the box */
  text-align: center;                 /* Numbers in the middle */
  min-width: clamp(64px, 11vmin, 150px);  /* Boxes stay a good size */
}
/* --- The big number in a counter --- */
.counter-num {
  font-size: clamp(16px, 3.4vmin, 40px); /* Big enough to see from the couch */
  color: var(--cream);                /* Soft white */
}
/* --- The tiny label under the number --- */
.counter-label {
  font-size: clamp(6px, 1.1vmin, 13px); /* Tiny on purpose: the number is what matters */
  color: #9cc9c2;                     /* Pale teal so it's quiet */
  margin-top: 6px;                    /* Little space above */
}

/* =========================================================
   THE GAME AREA (room + talk box)
   ========================================================= */

/* --- Holds the room and the talk side. On a phone standing up: room on top, talk box below --- */
.stage {
  flex: 1;                            /* Takes all the space under the top bar */
  display: flex;                      /* Lines up the room and talk side... */
  flex-direction: column;             /* ...top and bottom on a tall phone */
  gap: clamp(10px, 2vmin, 24px);      /* Space between room and talk side */
  min-height: 0;                      /* Lets it shrink to fit the screen */
}

/* --- THE ROOM: the almost-black Game Boy frame --- */
.room {
  background: var(--frame);           /* Almost black, like the plastic around a Game Boy screen */
  border: 4px solid #000;             /* A black edge around the frame */
  padding: clamp(8px, 1.4vmin, 16px); /* The thickness of the frame around the picture */
  display: flex;                      /* Stacks the room name and the screen... */
  flex-direction: column;             /* ...top to bottom */
  gap: clamp(6px, 1.2vmin, 14px);     /* Space between the name and the screen */
}

/* --- The room's name, written on the frame like a game label --- */
.room-name {
  margin: 0;                          /* No extra space around it */
  font-size: clamp(11px, 2.6vmin, 30px); /* Medium letters */
  color: var(--cream);                /* Soft white letters */
  text-align: center;                 /* In the middle */
  letter-spacing: .1em;               /* A bit of space between letters */
}

/* --- The screen area. The room picture sits in its middle --- */
.screen {
  position: relative;                 /* So the picture can be placed right in the middle */
  background: #000;                   /* Black around the picture if there's extra room */
}

/* --- The room picture itself --- */
#roomCanvas {
  position: absolute;                 /* Placed exactly... */
  inset: 0;                           /* ...with all four sides pulled in equally... */
  margin: auto;                       /* ...so it sits right in the middle */
  image-rendering: pixelated;         /* Keeps every pixel a sharp square when blown up (no blur!) */
  image-rendering: crisp-edges;       /* The same thing for Firefox */
  image-rendering: pixelated;         /* (Chrome and Safari read this last line) */
  cursor: pointer;                    /* Shows a hand on a computer, since you can tap the kid */
}

/* --- THE TALK SIDE: the text box, button and notes, stacked --- */
.talk {
  flex: 1;                            /* Takes the rest of the space */
  display: flex;                      /* Stacks everything... */
  flex-direction: column;             /* ...top to bottom */
  align-items: center;                /* Centered left to right */
  justify-content: center;            /* Centered top to bottom */
  gap: clamp(10px, 2.2vmin, 28px);    /* Space between the parts */
  padding-bottom: 40px;               /* Room for the little PARENT button at the bottom */
}

/* --- On a TV or a sideways phone: room on the left, talk box on the right --- */
@media (min-aspect-ratio: 5/4) {
  .stage { flex-direction: row; }     /* Side by side instead of stacked */
  .room { flex: 1.25; }               /* The room gets a bit more than half */
  .screen { flex: 1; min-height: 0; } /* The screen fills the frame top to bottom */
  .talk { flex: 1; padding-bottom: 0; } /* The talk side gets the rest */
  .goal-label { font-size: clamp(9px, 2.8vmin, 30px); }    /* Bigger goal words so they read from the couch */
  .bar { height: clamp(14px, 3.6vmin, 40px); }             /* Thicker goal bar on a TV */
  .counter-num { font-size: clamp(16px, 5vmin, 56px); }    /* Bigger ticket numbers */
  .counter-label { font-size: clamp(6px, 1.6vmin, 16px); } /* Bigger labels under them */
  .talk .textbox { font-size: clamp(14px, 4.4vmin, 52px); }   /* Bigger text box words for the couch (".talk" makes this rule win over the normal size further down) */
  .talk .btn-done { font-size: clamp(16px, 4.4vmin, 52px); }  /* Bigger Done button letters too */
}

/* --- "TASK 1 OF 2" --- */
.task-step {
  font-size: clamp(9px, 1.8vmin, 20px); /* Smallish */
  color: #9cc9c2;                     /* Pale teal so it's quiet */
}

/* --- THE POKEMON TEXT BOX --- */
.textbox {
  position: relative;                 /* So the blinking arrow can sit in its corner */
  width: 100%;                        /* As wide as the talk side */
  background: var(--cream);           /* Light cream inside */
  color: var(--ink);                  /* Almost-black letters */
  border: 4px solid var(--ink);       /* The OUTER dark line */
  box-shadow: inset 0 0 0 4px var(--cream), inset 0 0 0 8px var(--ink); /* A cream gap, then the INNER dark line: that makes the double line */
  padding: clamp(18px, 3.4vmin, 44px) clamp(18px, 3.4vmin, 44px) clamp(22px, 4vmin, 52px); /* Space inside, a bit extra at the bottom for the arrow */
  font-size: clamp(14px, 3.4vmin, 40px); /* Big letters you can read from the couch */
  line-height: 1.7;                   /* Space between the lines of words */
  cursor: pointer;                    /* Tap it to show all the words at once */
  /* --- Cuts a tiny square notch out of each corner, like a Pokemon text box --- */
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);
}
/* --- The words area: holds the invisible copy and the typing letters on top of each other --- */
.tb-text { position: relative; overflow-wrap: anywhere; }   /* Holds both copies of the words; long words break instead of poking out */
.tb-ghost, .tb-typed { display: block; white-space: pre-line; }   /* pre-line = starts a new line where the message says to */
.tb-ghost { visibility: hidden; }                       /* Invisible, but still takes up space so the box doesn't grow while typing */
.tb-typed { position: absolute; inset: 0; }             /* Sits exactly on top of the invisible copy */

/* --- The little blinking down-arrow in the bottom-right corner --- */
.tb-arrow {
  position: absolute;                 /* Placed exactly... */
  right: clamp(16px, 3vmin, 40px);    /* ...in from the right... */
  bottom: clamp(14px, 2.6vmin, 34px); /* ...and up from the bottom */
  width: clamp(12px, 2vmin, 24px);    /* Arrow width */
  height: clamp(8px, 1.4vmin, 16px);  /* Arrow height */
  background: var(--ink);             /* Dark arrow */
  clip-path: polygon(0 0, 100% 0, 50% 100%);  /* Cuts the square into a down-pointing triangle */
  animation: blink 1s steps(1) infinite;      /* Blinks on and off (a hard blink, no fading) */
}
@keyframes blink { 50% { opacity: 0; } }   /* Half the time it's hidden */

/* --- The gentle note under the button ("Go get a grown-up!") --- */
.task-note {
  font-size: clamp(10px, 2vmin, 22px); /* Medium-small */
  color: var(--yellow);               /* Yellow, so it shows on the dark background */
  min-height: 1.3em;                  /* Saves the space so nothing jumps around */
  text-align: center;                 /* In the middle */
  line-height: 1.5;                   /* Space between lines if it wraps */
}

/* --- THE GOAL BOX at the Front Door --- */
.goal-panel {
  width: 100%;                        /* As wide as the text box */
  background: #000;                   /* Black inside */
  border: 4px solid var(--yellow);    /* Yellow square edge */
  padding: clamp(12px, 2.4vmin, 30px);/* Space inside */
  display: grid;                      /* Stacks the parts... */
  gap: clamp(10px, 1.8vmin, 20px);    /* ...with space between */
  text-align: center;                 /* Everything centered */
}
.gp-name { font-size: clamp(11px, 2.4vmin, 28px); color: var(--yellow); }   /* Goal name in yellow */
.bar-big { height: clamp(26px, 5vmin, 60px); }                               /* A thicker goal bar */
.gp-count { font-size: clamp(12px, 2.6vmin, 30px); color: var(--cream); }   /* "9 / 10 TICKETS" */
.gp-reached { font-size: clamp(11px, 2.4vmin, 28px); color: var(--teal); animation: blink 1.4s steps(1) infinite; } /* "GOAL REACHED!" blinking slowly */

/* =========================================================
   BUTTONS (square pixel buttons, not pills)
   ========================================================= */

/* --- Every game button --- */
.btn {
  border: 4px solid var(--ink);       /* Thick dark square edge */
  border-radius: 0;                   /* Square corners */
  background: var(--teal);            /* Teal unless a special button says otherwise */
  color: var(--cream);                /* Soft white letters */
  box-shadow: 0 4px 0 var(--ink);     /* A hard dark shadow straight underneath */
  padding: .9em 1.3em;                /* Space inside the button */
}
/* --- When you press a button, it sinks down 4 pixels onto its shadow --- */
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
/* --- A button you can't press right now looks faded --- */
.btn:disabled { opacity: .5; cursor: default; }
.btn:disabled:active { transform: none; box-shadow: 0 4px 0 var(--ink); }   /* A faded button doesn't sink */

/* --- The big orange "I'M DONE!" button --- */
.btn-done {
  font-size: clamp(16px, 3.6vmin, 46px); /* Big letters */
  background: var(--orange);          /* Warm orange */
  color: var(--ink);                  /* Dark letters on orange (easier to read) */
  box-shadow: inset -4px -4px 0 var(--orange-dark), 0 4px 0 var(--ink); /* A darker orange edge inside (bottom and right) + the hard shadow underneath */
  padding: 1em 1.4em;                 /* Lots of room to tap */
  width: min(100%, 13em);             /* Wide, but not wider than the talk side */
}
.btn-done:active { box-shadow: inset -4px -4px 0 var(--orange-dark), 0 0 0 var(--ink); }  /* Keeps the inside edge when pressed */

/* --- Smaller buttons in the pop-ups --- */
.btn-small { font-size: clamp(9px, 1.6vmin, 14px); padding: .9em 1.1em; }
/* --- A plain cream button (Cancel, Close) --- */
.btn-ghost { background: var(--cream); color: var(--ink); }
/* --- The orange "Save" button --- */
.btn-go { background: var(--orange); color: var(--ink); }
/* --- The red "Reset" button (careful!) --- */
.btn-warn { background: var(--red); }

/* --- The small quiet PARENT button in the bottom-right corner --- */
.parent-btn {
  position: fixed;                    /* Stays in the same spot always */
  right: max(12px, env(safe-area-inset-right)); /* Away from the right edge */
  bottom: max(12px, env(safe-area-inset-bottom)); /* Away from the bottom edge */
  font-size: 8px;                     /* Tiny, so it's not exciting to a kid */
  color: #6f8f8a;                     /* Faded teal: quiet on purpose */
  background: transparent;            /* No box color */
  border: 2px solid #34494e;          /* Faint square outline */
  padding: 8px 10px;                  /* Room to tap */
  z-index: 16;                        /* Sits on top of the game */
}

/* =========================================================
   POP-UPS (PIN pad, award picker, settings)
   ========================================================= */

/* --- The dark see-through cover behind every pop-up --- */
.overlay {
  position: fixed;                    /* Covers the whole screen */
  inset: 0;                           /* Touches all four edges */
  background: rgba(6, 10, 12, .8);    /* Almost black, a little see-through */
  display: grid;                      /* Makes centering easy... */
  place-items: center;                /* ...puts the pop-up right in the middle */
  padding: 12px;                      /* Keeps the pop-up off the edges */
  z-index: 20;                        /* On top of everything in the game */
}

/* --- The cream box of each pop-up, with the same double line as the text box --- */
.panel {
  background: var(--cream);           /* Soft warm white */
  color: var(--ink);                  /* Dark words */
  border: 4px solid var(--ink);       /* Outer dark line */
  box-shadow: inset 0 0 0 4px var(--cream), inset 0 0 0 8px var(--ink); /* Cream gap + inner dark line = double line */
  padding: clamp(20px, 3vmin, 36px);  /* Space inside */
  width: min(440px, 100%);            /* Never wider than 440, never wider than the screen */
  animation: pop calc(.24s * var(--speed)) steps(3);   /* Pops in with 3 quick jumps, like an old game menu */
}
/* --- The "pop in" move for pop-ups --- */
@keyframes pop { from { transform: scale(.6); } to { transform: scale(1); } }

/* --- The title on top of a pop-up --- */
.panel-title {
  margin: 0 0 16px;                   /* Space under the title */
  font-size: clamp(12px, 2.2vmin, 20px); /* Medium-big */
  text-align: center;                 /* In the middle */
  color: var(--teal-dark);            /* Dark teal */
  line-height: 1.5;                   /* Space between lines if it wraps */
}

/* --- The four PIN squares --- */
.pin-dots { display: flex; justify-content: center; gap: 16px; margin-bottom: 10px; }
.pin-dots span {
  width: 20px; height: 20px;          /* Size of each square */
  border: 4px solid var(--ink);       /* Dark square outline */
}
.pin-dots span.on { background: var(--ink); }    /* Fills in when a number is typed */
.pin-dots.shake { animation: shake .3s steps(2); }  /* Wiggles when the PIN is wrong */
@keyframes shake { 25% { translate: -8px 0; } 75% { translate: 8px 0; } }

/* --- The "wrong PIN" message --- */
.pin-error { min-height: 1.6em; text-align: center; color: var(--red); font-size: 10px; line-height: 1.6; margin-bottom: 8px; }

/* --- The number pad: 3 buttons across --- */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key {
  font-size: clamp(18px, 3.2vmin, 26px); /* Big numbers */
  padding: 18px 0;                    /* Tall buttons, easy to tap */
  border: 4px solid var(--ink);       /* Dark square outline */
  background: #fff;                   /* White keys */
  color: var(--ink);                  /* Dark numbers */
  box-shadow: 0 4px 0 var(--ink);     /* Hard shadow so they look pushable */
}
.key:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }   /* Sinks 4 pixels when pressed */
.key.key-small { font-size: clamp(8px, 1.4vmin, 11px); }                     /* The words "BACK" and "ERASE" are smaller */

/* --- The award picker --- */
.award-task { text-align: center; font-size: 13px; line-height: 1.6; margin-bottom: 14px; }  /* Which task we're scoring */
.award-list { display: grid; gap: 10px; }                                  /* Stacks the 5 choices */
.award {
  display: flex;                      /* Number badge and words side by side */
  align-items: center;                /* Lined up in the middle */
  gap: 12px;                          /* Space between badge and words */
  width: 100%;                        /* Full width */
  text-align: left;                   /* Words on the left */
  font-size: 10px;                    /* Small pixel letters (grown-ups read these) */
  line-height: 1.6;                   /* Space between lines if it wraps */
  padding: 8px 10px;                  /* Space inside */
  border: 4px solid var(--ink);       /* Dark square outline */
  background: #fff;                   /* White */
  color: var(--ink);                  /* Dark words */
  box-shadow: 0 4px 0 var(--ink);     /* Hard shadow */
}
.award:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
/* --- The square number badge on each award (0 to 4) --- */
.award-num {
  font-size: 14px;                    /* Medium */
  width: 36px; height: 36px;          /* Square size */
  display: grid; place-items: center; /* Number in the middle */
  background: var(--yellow);          /* Yellow square */
  border: 3px solid var(--ink);       /* Dark edge */
  flex-shrink: 0;                     /* Never gets squished */
}
.award-zero .award-num { background: #ddd; }   /* "Not done yet" gets a gray square, not yellow */
/* --- Skip and Cancel at the bottom --- */
.award-extra { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }

/* =========================================================
   THE PARTY SCREEN ("GREAT JOB!")
   ========================================================= */

/* --- Covers the screen while the confetti flies --- */
.celebrate {
  position: fixed;                    /* Covers the whole screen */
  inset: 0;                           /* Touches all edges */
  display: grid;                      /* Centering made easy */
  place-content: center;              /* Words in the middle */
  text-align: center;                 /* Words centered */
  background: rgba(6, 10, 12, .55);   /* Dims the game a bit so the words pop */
  z-index: 30;                        /* On top of almost everything */
  pointer-events: none;               /* Taps go through (nothing to press here) */
  gap: 24px;                          /* Space between the cheer and the tickets */
}
/* --- The big cheer word --- */
.celebrate-word {
  font-size: clamp(26px, 8vmin, 120px); /* HUGE (but still fits across a phone) */
  color: var(--yellow);               /* Sunny yellow */
  text-shadow: 4px 4px 0 var(--orange-dark), 8px 8px 0 #000; /* Stacked hard shadows, like an arcade title */
  padding: 0 16px;                    /* Keeps it off the edges */
}
/* --- Each new cheer word springs in --- */
.celebrate-word.spring { animation: spring calc(.8s * var(--speed)) cubic-bezier(.34,1.56,.64,1); }
/* --- "+3 TICKETS" --- */
.celebrate-tickets {
  font-size: clamp(16px, 4vmin, 54px);/* Big */
  color: var(--cream);                /* Soft white */
  text-shadow: 4px 4px 0 #000;        /* Hard black shadow */
  animation: spring calc(.9s * var(--speed)) .2s both cubic-bezier(.34,1.56,.64,1); /* Springs in a moment after */
}
/* --- The bouncy spring: tiny, then too big, then a little small, then just right --- */
@keyframes spring {
  0%   { transform: scale(0) rotate(-8deg); }
  55%  { transform: scale(1.25) rotate(3deg); }
  75%  { transform: scale(.92) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}

/* =========================================================
   PARENT SETTINGS
   ========================================================= */

.settings-overlay { place-items: start center; overflow-y: auto; }  /* Lets the settings scroll on small phones */
.settings-panel { width: min(640px, 100%); margin: 12px 0 60px; }   /* Wider than other pop-ups */

/* --- Each section box (GOAL, ROOMS, PLAYER, PIN) --- */
.set-group {
  border: 3px solid var(--ink);       /* Dark square line around the section */
  padding: 12px 14px 16px;            /* Space inside */
  margin: 0 0 16px;                   /* Space under each section */
  display: grid;                      /* Stacks the inputs... */
  gap: 12px;                          /* ...with space between them */
}
.set-group legend { font-size: 10px; color: var(--teal-dark); padding: 0 6px; }     /* Section name on the border line */
.set-group label { display: grid; gap: 6px; font-size: 9px; line-height: 1.5; }     /* Label words above each input */
.set-group label.check { display: flex; align-items: center; gap: 10px; }           /* Checkbox and its words side by side */
.set-help { margin: 0; font: 700 14px/1.4 var(--round); color: #6b5a48; }          /* Little help text in the round font */

/* --- Text boxes, number boxes and pick-lists --- */
.set-group input[type=text], .set-group input[type=number], .set-group input[type=password], .set-group select, .set-group textarea {
  font: 700 17px var(--round);        /* Round easy-to-read letters, big enough that phones don't zoom in */
  padding: 10px 12px;                 /* Space inside the box */
  border: 3px solid var(--ink);       /* Dark square outline */
  border-radius: 0;                   /* Square corners */
  background: #fff;                   /* White */
  color: var(--ink);                  /* Dark words */
  width: 100%;                        /* Full width */
  user-select: text;                  /* Lets Dad select words here */
}
.set-group input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--teal); }  /* Big teal checkbox */

/* --- One room in the room list --- */
.room-edit {
  border: 3px solid var(--ink);       /* Dark square edge */
  border-left-width: 12px;            /* A thick stripe on the left (app.js paints it the room's color) */
  background: #fffaf0;                /* Slightly lighter cream */
  padding: 10px 12px;                 /* Space inside */
  display: grid;                      /* Stacks its parts */
  gap: 8px;                           /* Space between them */
}
.room-edit-top { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }  /* Name box + color + style pick-lists on one line */
.room-edit-btns { display: flex; gap: 8px; flex-wrap: wrap; }                     /* Up / Down / Delete buttons in a row */
.room-edit-btns .btn { font-size: 8px; padding: .8em 1em; }                       /* Little buttons */
.re-image-label { font-size: 8px; }                                               /* "Picture file" label */
.re-tasks { display: grid; gap: 6px; }                                             /* The task lines, stacked */
.re-task { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; }  /* Task words + Spot pick-list + remove button on one line */
.set-group label.re-task-spot-label { display: flex; align-items: center; gap: 6px; font-size: 8px; }  /* "Spot" word beside its pick-list */
.set-group .re-task-spot { width: auto; padding: 8px; font-size: 15px; }           /* Spot pick-list: only as wide as it needs */
.re-task-del, .re-task-add { font-size: 8px; padding: .8em 1em; }                  /* Little X and + TASK buttons */
.re-task-add { justify-self: start; }                                              /* + TASK sits on the left, not full width */
@media (max-width: 480px) { .room-edit-top { grid-template-columns: 1fr 1fr; } .room-edit-top .re-name { grid-column: 1 / -1; } } /* Skinny phone: name on its own line */
@media (max-width: 480px) { .re-task { grid-template-columns: 1fr auto; } .re-task .re-task-name { grid-column: 1 / -1; } } /* Skinny phone: task words on their own line, Spot + X under them */

/* --- The message after Save ("Saved!") --- */
.set-msg { min-height: 1.6em; text-align: center; font-size: 10px; line-height: 1.6; color: var(--teal-dark); margin-bottom: 8px; }
/* --- Close and Save at the bottom --- */
.set-actions { display: flex; justify-content: space-between; gap: 12px; }

/* --- Morning / Afternoon / Evening tabs over the rooms editor --- */
.set-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.set-tab {
  font-size: clamp(7px, 1.4vmin, 10px); /* Small pixel letters */
  padding: 10px 4px;                  /* Room to tap */
  border: 3px solid var(--ink);       /* Dark square edge */
  background: #fff;                   /* White when not picked */
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);     /* Hard shadow */
}
.set-tab.on { background: var(--yellow); }   /* The block being edited is yellow */
.set-tab:active { transform: translateY(3px); box-shadow: none; }
.set-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }   /* The two start times side by side */
.set-group input[type=time] { font: 700 17px var(--round); padding: 8px 10px; border: 3px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); width: 100%; }

/* =========================================================
   THE HOME SCREEN
   ========================================================= */

/* --- Home on: hide the room game. Home off: hide the home screen --- */
body.home-on .hud, body.home-on .stage, body.home-on .parent-btn, body.home-on .home-btn { display: none; }
body:not(.home-on) .home { display: none; }

/* --- The whole home screen, stacked top to bottom --- */
.home {
  flex: 1;                            /* Fills the screen */
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.4vmin, 28px);    /* Space between top, middle and bottom */
  width: min(100%, 1100px);           /* Not too wide on a TV */
  margin: 0 auto;                     /* Centered */
}

/* --- Date + hello at the top --- */
.home-top {
  background: var(--frame);           /* Almost-black strip, like the top bar */
  border: 4px solid #000;
  padding: clamp(12px, 2.4vmin, 28px);
  text-align: center;
}
.home-date { font-size: clamp(9px, 2vmin, 20px); color: #9cc9c2; letter-spacing: .08em; }   /* Pale teal date */
.home-hello {
  margin: clamp(10px, 1.8vmin, 20px) 0 0;
  font-size: clamp(14px, 4.2vmin, 44px); /* Big hello */
  line-height: 1.4;
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--orange-dark); /* Hard arcade shadow */
  overflow-wrap: anywhere;
}

/* --- Middle: the task list, and the ticket totals next to it --- */
.home-main { flex: 1; display: flex; flex-direction: column; gap: clamp(12px, 2vmin, 24px); }
@media (min-aspect-ratio: 5/4) {
  .home-main { flex-direction: row; align-items: flex-start; }
  .home-tasks { flex: 1; }
  .home-totals { flex-direction: column; width: clamp(160px, 26vmin, 300px); }
}

/* --- The task list box: cream with the double line, like the text box --- */
.home-tasks {
  background: var(--cream);
  color: var(--ink);
  border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 4px var(--cream), inset 0 0 0 8px var(--ink);
  padding: clamp(18px, 3vmin, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vmin, 22px);
}
.home-head { margin: 0; font-size: clamp(11px, 2.6vmin, 26px); color: var(--teal-dark); text-align: center; line-height: 1.5; }

/* --- MORNING / AFTERNOON / EVENING. The one it is now is orange --- */
.block-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.block-chip {
  font-size: clamp(7px, 1.5vmin, 14px);
  text-align: center;
  padding: 8px 2px;
  border: 3px solid var(--ink);
  color: #8a7a66;                     /* Faded when it's not this block */
  background: #fffaf0;
}
.block-chip.on { background: var(--orange); color: var(--ink); box-shadow: inset -3px -3px 0 var(--orange-dark); }

/* --- The checklist --- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-item {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vmin, 20px);
  padding: clamp(10px, 1.8vmin, 18px);
  border: 3px solid var(--ink);
  background: #fff;
}
.check-item.next { background: var(--yellow); box-shadow: inset -4px -4px 0 var(--yellow-dark); }   /* Next up = yellow */
.check-item.done { background: #e6f2ee; }   /* Done = calm pale teal */
/* --- The square box: empty, or a checkmark when done --- */
.check-box {
  flex-shrink: 0;
  width: clamp(30px, 5vmin, 50px); height: clamp(30px, 5vmin, 50px);
  border: 4px solid var(--ink);
  background: #fff;
  display: grid; place-items: center;
}
.check-item.done .check-box { background: var(--teal); }
.check-box svg { width: 70%; height: 70%; fill: var(--cream); }
/* --- The task words: big round letters a kid can read --- */
.check-words { flex: 1; min-width: 0; display: grid; gap: 4px; }
.check-name { font: 900 clamp(20px, 3.6vmin, 36px)/1.2 var(--round); overflow-wrap: anywhere; }
.check-item.done .check-name { color: #5d7a74; }
.check-room { font-size: clamp(7px, 1.2vmin, 11px); color: #7a6a56; letter-spacing: .06em; }
.check-item.next .check-room { color: var(--ink); }
/* --- "+3" tickets earned, in a little yellow square --- */
.check-got:empty { display: none; }
.check-got {
  flex-shrink: 0;
  font-size: clamp(11px, 2.2vmin, 20px);
  background: var(--yellow);
  border: 3px solid var(--ink);
  padding: 8px 10px;
}

/* --- FREE TIME! and ALL DONE --- */
.home-free, .home-alldone {
  text-align: center;
  font-size: clamp(14px, 3.4vmin, 34px);
  line-height: 1.6;
  padding: clamp(14px, 3vmin, 34px) 8px;
  color: var(--teal-dark);
}
.home-alldone { color: var(--orange-dark); }
.home-free { display: flex; align-items: center; justify-content: center; gap: 16px; }
/* --- The small happy dot: a little pixel blob with eyes and a smile --- */
.happy-dot {
  position: relative;
  width: 28px; height: 28px;
  background: var(--orange);
  border: 3px solid var(--ink);
  flex-shrink: 0;
  animation: hop calc(1.2s * var(--speed)) steps(2) infinite;
}
.happy-dot::before { content: ""; position: absolute; left: 5px; top: 5px; width: 3px; height: 4px; background: var(--ink); box-shadow: 9px 0 0 var(--ink); }   /* Eyes */
.happy-dot::after { content: ""; position: absolute; left: 5px; top: 13px; width: 12px; height: 3px; background: var(--ink); }   /* Smile */
@keyframes hop { 50% { translate: 0 -4px; } }

/* --- The big START! button --- */
.btn-start { align-self: center; width: min(100%, 12em); font-size: clamp(18px, 4.4vmin, 48px); }

/* --- The ticket totals (reuse the counter boxes, but bigger) --- */
.home-totals { display: flex; gap: clamp(8px, 1.6vmin, 16px); }
.home-totals .counter { flex: 1; padding: clamp(10px, 1.8vmin, 18px) 6px; }
.home-totals .counter-num { font-size: clamp(18px, 4.4vmin, 48px); }
.home-totals .counter-label { font-size: clamp(7px, 1.3vmin, 13px); line-height: 1.4; }
.home-totals .total-bank { border-color: var(--yellow); }
.home-totals .total-bank .counter-num { color: var(--yellow); }

/* --- Bottom: big SHOP, small PARENT --- */
.home-bottom { display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; padding-bottom: 4px; }
.btn-shop {
  font-size: clamp(16px, 3.8vmin, 40px);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: inset -4px -4px 0 var(--yellow-dark), 0 4px 0 var(--ink);
  padding: .9em 1.4em;
  width: min(100%, 10em);
}
.btn-shop:active { box-shadow: inset -4px -4px 0 var(--yellow-dark), 0 0 0 var(--ink); }
.home-parent {
  position: absolute; right: 0; bottom: 4px;   /* Off to the side, quiet */
  font-size: 8px; color: #6f8f8a; background: transparent;
  border: 2px solid #34494e; padding: 8px 10px;
}

/* --- The small HOME button at the left of the top bar on the room screens --- */
.home-btn {
  flex-shrink: 0;
  align-self: stretch;                /* As tall as the top bar's insides */
  font-size: clamp(9px, 1.6vmin, 16px);
  color: var(--ink);
  background: var(--cream);
  border: 3px solid #000;
  box-shadow: inset -3px -3px 0 var(--tan);
  padding: 8px 12px;
}
.home-btn:active { transform: translateY(2px); }
@media (max-width: 560px) {           /* Skinny phone: HOME sits on the second line, next to the counters */
  .hud .goal { order: 1; }
  .hud .home-btn { order: 2; }
  .hud .counters { order: 3; }
}

/* --- The ticket shop pop-up --- */
.shop-panel { display: grid; gap: 14px; text-align: center; }
.shop-panel .panel-title { margin-bottom: 0; }
.shop-name { font-size: clamp(12px, 2.6vmin, 22px); color: var(--orange-dark); line-height: 1.5; }
.shop-panel .bar { border-color: var(--ink); }
.shop-count { font-size: clamp(11px, 2.2vmin, 18px); }
.shop-note { font: 900 20px/1.3 var(--round); color: var(--teal-dark); }
.shop-close { justify-self: center; font-size: 14px; }

/* =========================================================
   GENTLE MODE + "REDUCE MOTION" PHONES
   ========================================================= */

/* --- Gentle mode: everything moves slower and calmer --- */
body.gentle { --speed: 1.6; }
/* --- If the phone itself asks for less movement, stop the blinking --- */
@media (prefers-reduced-motion: reduce) {
  .tb-arrow, .gp-reached, .happy-dot { animation: none; }
}

/* =========================================================
   HOME LAYOUT: everything fits with no scrolling
   (tasks in 2 columns of 3 on a sideways screen; right column = tickets, START!, SHOP, PARENT)
   ========================================================= */
.home { min-height: 0; }
.home-main { min-height: 0; }
.home-tasks { min-height: 0; overflow: hidden; }
.check-item { padding: clamp(8px, 1.2vmin, 12px) clamp(10px, 1.4vmin, 14px); }
.check-box { width: clamp(26px, 4vmin, 40px); height: clamp(26px, 4vmin, 40px); }
.check-name { font-size: clamp(18px, 3vmin, 28px); }

/* --- The right column: stacked top to bottom, PARENT pushed to the bottom --- */
.home-totals { flex-direction: column; }
.home-totals .btn-start { width: 100%; align-self: stretch; padding: .8em .3em; font-size: clamp(18px, 3.6vmin, 40px); }
.home-totals .btn-shop { width: 100%; padding: .7em .4em; font-size: clamp(14px, 3.2vmin, 32px); }
.home-totals .home-parent { position: static; align-self: center; margin-top: auto; }

/* --- Sideways screen (the tablet): 2 columns of 3 tasks, and the page never scrolls --- */
@media (min-aspect-ratio: 5/4) {
  body.home-on { height: 100vh; height: 100dvh; overflow: hidden; }
  .home-main { flex: 1; align-items: stretch; }
  .home-tasks { padding: clamp(14px, 2.2vmin, 26px); gap: clamp(10px, 1.6vmin, 16px); }
  .checklist { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows, 3), auto); grid-auto-flow: column; }   /* Tasks go down the left column, then the right */
  .home-totals { width: clamp(200px, 31vmin, 320px); }
  .home-totals .counter { flex: none; }
}

/* =========================================================
   PHONE (narrow, under ~700px wide): same screens, packed to fit with no scrolling
   ========================================================= */
@media (max-width: 700px) {
  body { padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  body.home-on { height: 100vh; height: 100dvh; overflow: hidden; }
  .home { gap: 8px; }
  .home-top { padding: 8px 10px; }
  .home-date { font-size: 8px; }
  .home-hello { margin-top: 6px; font-size: 14px; }
  .home-main { flex: 1; min-height: 0; gap: 8px; }
  .home-tasks { flex: 1; padding: 10px; gap: 8px; box-shadow: none; }
  .home-head { font-size: 11px; }
  .checklist { gap: 5px; }
  .check-item { padding: 5px 8px; gap: 8px; border-width: 3px; }
  .check-box { width: 22px; height: 22px; border-width: 3px; }
  .check-name { font-size: clamp(14px, 2.2vh, 18px); }
  .check-item:not(.next) .check-room { display: none; }      /* Room names only on the next task, to save space */
  .check-got { font-size: 9px; padding: 4px 6px; }
  /* --- Right column becomes a small grid: tickets side by side, big START!, SHOP + SCHOOL, PARENT --- */
  .home-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .home-totals .counter { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 4px; min-width: 0; }
  .home-totals .counter-num { font-size: 20px; }
  .home-totals .counter-label { margin-top: 0; font-size: 7px; }
  .home-totals .btn-start { grid-column: 1 / -1; font-size: 22px; padding: .55em .3em; }
  .home-totals .btn-shop, .home-totals .btn-school { font-size: 13px; padding: .8em .3em; }
  .home-totals .home-parent { grid-column: 1 / -1; justify-self: center; margin-top: 0; }
  .hud { padding-top: 16px; }                                  /* Room for the little "v1" tag above the goal words */
  /* --- Room screen on a phone: everything stacked and a little smaller, so I'M DONE! is always on screen --- */
  body:not(.home-on) { height: 100vh; height: 100dvh; overflow: hidden; }
  .stage { gap: 8px; }
  .room { padding: 6px; gap: 4px; }
  .room-name { font-size: 11px; }
  .talk { gap: 6px; padding-bottom: 30px; justify-content: flex-start; }
  .task-step { font-size: 8px; }
  .talk .textbox { font-size: clamp(11px, 2vh, 16px); padding: 10px 12px 14px; line-height: 1.6; }
  .task-timer { padding: 4px 8px; gap: 2px; }
  .tt-label { font-size: 7px; }
  .tt-time { font-size: clamp(18px, 3.4vh, 30px); }
  .talk .btn-done { font-size: clamp(14px, 2.6vh, 22px); padding: .6em 1em; }
  .task-note { font-size: 9px; min-height: 1.2em; }
}
/* --- Short phones (like an iPhone SE): a bit tighter still --- */
@media (max-width: 700px) and (max-height: 700px) {
  .home-top { padding: 6px 8px; }
  .home-hello { font-size: 12px; margin-top: 4px; }
  .home-tasks { padding: 8px; gap: 6px; }
  .check-item { padding: 3px 6px; }
  .check-box { width: 18px; height: 18px; }
  .check-name { font-size: 14px; }
  .home-totals .btn-start { font-size: 18px; padding: .45em .3em; }
  .home-totals .btn-shop, .home-totals .btn-school { padding: .6em .3em; }
}

/* =========================================================
   HAND IT BACK → OPEN!, SCHOOL MINI STORE, BLUE TICKET
   ========================================================= */

/* --- "HAND IT BACK!": one huge OPEN! button for him --- */
.hand-panel { display: grid; gap: 18px; text-align: center; }
.hand-panel .panel-title { margin-bottom: 0; font-size: clamp(16px, 3.4vmin, 30px); }
.hand-name { font: 900 clamp(18px, 3vmin, 26px)/1.3 var(--round); color: var(--teal-dark); }
.btn-open { justify-self: center; width: min(100%, 9em); font-size: clamp(26px, 6vmin, 60px); padding: .8em .4em; }

/* --- The SCHOOL button on the home screen (teal, with his school checks) --- */
.home-totals .btn-school { width: 100%; padding: .6em .3em; font-size: clamp(11px, 2.2vmin, 20px); background: var(--teal); color: var(--cream); }
.school-count { color: var(--yellow); }

/* --- The school pop-up --- */
.school-panel { width: min(520px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; }
.school-panel .panel-title { margin-bottom: 10px; }
.school-head { font-size: clamp(9px, 1.6vmin, 13px); color: var(--teal-dark); text-align: center; margin-bottom: 10px; line-height: 1.6; }
.school-goals { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.school-goals li { font: 900 clamp(20px, 3.4vmin, 30px)/1.2 var(--round); text-align: center; padding: 8px; border: 3px solid var(--ink); background: #fff; }
.btn-agree { display: block; margin: 0 auto 14px; min-width: 8em; max-width: 100%; white-space: nowrap; padding: .8em 1em; font-size: clamp(16px, 3.4vmin, 30px); }
.btn-agree:disabled { opacity: 1; background: var(--teal); color: var(--cream); }   /* "I AGREED!" stays bright and happy */
.school-balance { text-align: center; font-size: clamp(11px, 2vmin, 16px); margin-bottom: 10px; color: var(--teal-dark); }
.school-prizes { display: grid; gap: 8px; }
.school-prize { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 3px solid var(--ink); background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink); text-align: left; }
.school-prize:active { transform: translateY(3px); box-shadow: none; }
.school-prize.can-buy { background: var(--yellow); }
.sp-name { font: 900 18px/1.2 var(--round); }
.sp-price { font-size: 11px; white-space: nowrap; }
.school-msg { min-height: 1.6em; text-align: center; margin: 10px 0; font: 900 18px/1.3 var(--round); color: var(--teal-dark); }
.school-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.checkin-goals { display: grid; gap: 10px; margin-bottom: 16px; }
.checkin-goal { display: flex; align-items: center; gap: 14px; padding: 12px; border: 3px solid var(--ink); background: #fff; color: var(--ink); font: 900 20px var(--round); text-align: left; }
.checkin-goal.met { background: #e6f2ee; }
.checkin-box { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border: 3px solid var(--ink); background: #fff; font-family: var(--pixel); font-size: 14px; }
.checkin-goal.met .checkin-box { background: var(--teal); color: var(--cream); }

/* --- The home shop after a blue ticket: only the calm line shows --- */
.shop-locked { font: 900 clamp(20px, 3.4vmin, 30px)/1.3 var(--round); color: var(--teal-dark); text-align: center; padding: 10px 0 6px; }
#shopOverlay.shop-locked .shop-name, #shopOverlay.shop-locked .shop-bar,
#shopOverlay.shop-locked .shop-count, #shopOverlay.shop-locked .shop-note { display: none; }

/* --- Settings: award levels per task, school prizes, blue ticket, history --- */
.re-levels { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.re-levels-label { font-size: 8px; color: #6b5a48; }
.set-group label.re-level-box { display: flex; align-items: center; gap: 5px; font-size: 8px; }
.set-group .re-level-box input { width: 20px; height: 20px; accent-color: var(--teal); }
.set-sub { font-size: 9px; color: var(--teal-dark); margin-top: 4px; }
.prize-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; }
.set-group label.prize-price-label { display: flex; align-items: center; gap: 6px; font-size: 8px; }
.set-group .prize-price { width: 4.5em; padding: 8px; }
.prize-del { font-size: 8px; padding: .8em 1em; }
.blue-status { font: 800 15px/1.4 var(--round); color: var(--teal-dark); }
.btn-blue { background: #3a78c8; color: var(--cream); }
.history-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; max-height: 220px; overflow-y: auto; font: 700 14px/1.4 var(--round); color: var(--ink); user-select: text; }
.history-list li { border-bottom: 2px dashed var(--tan); padding-bottom: 4px; }
.history-empty { color: #8a7a66; }

/* =========================================================
   VERSION TAG + TASK TIMER
   ========================================================= */

/* --- The tiny "v1" in the corner of the top bar and the home screen's top --- */
.hud, .home-top { position: relative; }
.ver-tag {
  position: absolute;                 /* Tucked into the top-right corner... */
  top: 3px;
  right: 5px;
  font-size: 8px;                     /* ...small and quiet */
  color: #6f8f8a;
  letter-spacing: .05em;
  pointer-events: none;               /* Never gets in the way of a tap */
}

/* --- THE TASK TIMER: big, easy-to-read time left. Calm colors only, even at zero --- */
.task-timer {
  width: 100%;                        /* As wide as the text box */
  background: #000;                   /* Black inside, like the counters */
  border: 4px solid var(--teal);      /* Calm teal square edge */
  padding: clamp(8px, 1.6vmin, 18px);
  text-align: center;
  display: grid;
  gap: clamp(4px, 1vmin, 10px);
}
.tt-label { font-size: clamp(8px, 1.4vmin, 14px); color: #9cc9c2; }                 /* "TIME LEFT" */
.tt-label:empty { display: none; }
.tt-time { font-size: clamp(26px, 6vmin, 72px); color: var(--cream); line-height: 1.1; }   /* The big numbers */
/* --- Each task's own timer in Parent settings: [x] Timer  Min [5]  Sec [0] --- */
.re-timer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 6px; border-bottom: 2px dashed var(--tan); }
.set-group label.re-timer-on { display: flex; align-items: center; gap: 8px; font-size: 9px; }
.set-group label.re-timer-num { display: flex; align-items: center; gap: 6px; font-size: 8px; }
.set-group .re-timer-num input { width: 5.5em; padding: 6px 8px; font-size: 16px; }
.task-timer.tt-over .tt-time { font-size: clamp(16px, 3.6vmin, 40px); color: var(--yellow); }   /* "Keep going!" in the same calm yellow as the notes */

/* =========================================================
   PARENT SETTINGS: buttons + tabs pinned at the top, one tab at a time.
   Only the tab content (.set-body) can scroll, and only if a tab is too long.
   ========================================================= */
.settings-overlay { display: flex; align-items: stretch; justify-content: center; overflow: hidden; padding: 8px; }
.settings-panel {
  width: min(820px, 100%);
  max-height: 780px;
  margin: auto 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  animation: none;
}
/* --- Top row: CANCEL · PARENT · SAVE & CLOSE --- */
.set-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; flex-shrink: 0; }
.set-title { margin: 0; font-size: 12px; }
.set-top .btn { font-size: clamp(9px, 1.6vmin, 12px); padding: 1em 1.1em; white-space: nowrap; }
.set-msg { min-height: 1.4em; margin: 0; flex-shrink: 0; font: 800 15px/1.4 var(--round); color: var(--teal-dark); }
.set-msg:empty { min-height: 0; }
/* --- The tabs: big, in 2 rows on a tablet --- */
.set-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; flex-shrink: 0; }
.set-tabbtn {
  min-height: 46px;
  padding: 8px 4px;
  font-size: clamp(9px, 1.5vmin, 12px);
  line-height: 1.4;
  border: 3px solid var(--ink);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.set-tabbtn.on { background: var(--yellow); }
.set-tabbtn:active { transform: translateY(3px); box-shadow: none; }
/* --- The tab content --- */
.set-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.set-pane.set-group { margin: 0; align-content: start; min-height: 100%; }
.set-pane .history-list { max-height: none; }
.set-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.set-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.set-group label.set-inline-label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.set-group .set-inline-label input, .set-group .set-inline-label select { width: auto; max-width: 11em; }

/* --- ROOMS & TASKS: short lists you tap into, with a back arrow --- */
.re-view { display: grid; gap: 10px; }
.re-list { display: grid; gap: 6px; }
.re-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px; text-align: left;
  border: 3px solid var(--ink); background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink);
}
.re-item:active { transform: translateY(3px); box-shadow: none; }
.re-swatch { width: 18px; height: 18px; flex-shrink: 0; border: 3px solid var(--ink); }
.re-item-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.re-item-name { font: 900 17px/1.2 var(--round); }
.re-item-meta { font: 700 13px/1.3 var(--round); color: #6b5a48; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.re-go { font: 900 24px var(--round); color: var(--teal-dark); }
.set-back { justify-self: start; font-size: 10px; padding: 10px 14px; border: 3px solid var(--ink); background: var(--cream); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.set-back:active { transform: translateY(3px); box-shadow: none; }
.re-room-top { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
.re-view .re-levels, .re-view .re-timer { padding-bottom: 0; border-bottom: 0; }
.re-view .re-level-box, .re-view .re-timer-on, .re-view .re-timer-num { font-size: 10px; }
.re-view .re-level-box input, .re-view .re-timer-on input { width: 26px; height: 26px; }

/* --- Phone: tabs in 3 rows of 3 (still big), single-column school goals --- */
@media (max-width: 700px) {
  .settings-overlay { padding: 4px; }
  .settings-panel { padding: 10px; gap: 6px; box-shadow: none; border-width: 3px; }
  .set-top .btn { font-size: 9px; padding: .9em .7em; }
  .set-title { font-size: 9px; }
  .set-tabbar { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .set-tabbtn { min-height: 40px; font-size: 9px; padding: 6px 2px; }
  .set-pane.set-group { padding: 10px; gap: 10px; }
  .set-row3 { grid-template-columns: 1fr; gap: 6px; }
  .re-room-top { grid-template-columns: 1fr 1fr; }
  .re-room-top .re-name { grid-column: 1 / -1; }
}

/* =========================================================
   HOME: PARENT in the top banner, MY DAY | SCHOOL tabs, school in the same frame
   ========================================================= */
/* --- Banner: version tag · date · PARENT (lock) on one row, the big hello under it --- */
.home-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; }
.home-top .ver-tag { position: static; justify-self: start; }
.home-top .home-date { grid-column: 2; }
.home-top .home-hello { grid-column: 1 / -1; }
.home-top .home-parent {
  position: static; grid-column: 3; grid-row: 1; justify-self: end;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 8px; color: #9cc9c2; background: transparent;
  border: 2px solid #34494e; padding: 6px 8px;
}
/* --- A tiny pixel padlock --- */
.lock-icon { position: relative; width: 9px; height: 7px; margin-top: 4px; background: var(--yellow); flex-shrink: 0; }
.lock-icon::before { content: ""; position: absolute; left: 1px; top: -5px; width: 3px; height: 4px; border: 2px solid var(--yellow); border-bottom: 0; }

/* --- MY DAY | SCHOOL: two big tabs --- */
.home-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-shrink: 0; }
.home-tab {
  font-size: clamp(12px, 2.2vmin, 22px);
  padding: .9em .4em;
  border: 4px solid #000;
  background: var(--frame);
  color: #9cc9c2;
  box-shadow: 0 4px 0 #000;
}
.home-tab.on { background: var(--yellow); color: var(--ink); box-shadow: inset -4px -4px 0 var(--yellow-dark), 0 4px 0 #000; }
.home-tab:active { transform: translateY(4px); box-shadow: none; }
.home-tab .school-count { color: inherit; }
#tabSchool:not(.on) .school-count { color: var(--yellow); }

/* --- SCHOOL tab: the same cream card as the task list --- */
.home-school { display: flex; justify-content: center; min-height: 0; }
.school-main {
  width: min(100%, 760px);
  background: var(--cream); color: var(--ink);
  border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 4px var(--cream), inset 0 0 0 8px var(--ink);
  padding: clamp(14px, 2.4vmin, 28px);
  display: flex; flex-direction: column; gap: 10px;
}
.school-main .school-goals, .school-main .btn-agree, .school-main .school-balance, .school-main .school-msg { margin: 0 auto; width: 100%; }
.school-main .btn-agree { width: auto; }
.school-grownup { align-self: center; }
@media (min-aspect-ratio: 5/4) {
  .school-main .school-goals { grid-template-columns: repeat(3, 1fr); }
  .school-main .school-prizes { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   PHONE PORTRAIT: nothing tappable near the bottom edge, the task card hugs its tasks,
   the whole layout sits in the middle with no big gaps
   ========================================================= */
@media (max-width: 700px) {
  body { padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 16px)); }
  .home { justify-content: center; gap: 8px; }
  .home-tabs { gap: 6px; }
  .home-tab { font-size: 12px; padding: .9em .3em; }
  .home-main { flex: 0 1 auto; min-height: 0; }
  .home-tasks { flex: 0 1 auto; min-height: 0; gap: 8px; }
  .checklist { gap: 6px; }
  .check-item { padding: 9px 10px; gap: 10px; }
  .check-box { width: 26px; height: 26px; }
  .check-name { font-size: clamp(16px, 2.5vh, 21px); }
  /* --- Tickets side by side, then START! and SHOP each full width --- */
  .home-totals .btn-shop { grid-column: 1 / -1; font-size: 16px; padding: .75em .3em; }
  /* --- School tab on a phone --- */
  .home-school { flex: 0 1 auto; }
  .school-main { padding: 12px; gap: 8px; box-shadow: none; }
  .school-main .school-goals { gap: 6px; }
  .school-main .school-goals li { font-size: 18px; padding: 6px; }
  .school-main .btn-agree { font-size: 18px; }
  .school-msg { margin: 2px 0; min-height: 1.2em; font-size: 15px; }
  /* --- The room screen's PARENT button: lifted out of the bottom 40px --- */
  .parent-btn { bottom: max(44px, calc(env(safe-area-inset-bottom) + 20px)); }
  .talk { padding-bottom: 0; }
}
/* --- Short phones (iPhone SE): a bit tighter so it all still fits --- */
@media (max-width: 700px) and (max-height: 700px) {
  .home { gap: 6px; }
  .home-tab { padding: .7em .3em; font-size: 11px; }
  .check-item { padding: 5px 8px; }
  .check-box { width: 20px; height: 20px; }
  .check-name { font-size: 15px; }
  .home-totals .btn-start { font-size: 18px; padding: .45em .3em; }
  .home-totals .btn-shop { font-size: 14px; padding: .55em .3em; }
  .school-main .school-goals li { font-size: 16px; padding: 4px; }
  .school-prize { padding: 6px 10px; }
}

/* =========================================================
   PARENT MODAL: fills the screen inside the safe areas; forms on a clean grid
   ========================================================= */
.settings-overlay {
  padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}
.set-pane.set-group label:not(.check):not(.re-level-box):not(.re-timer-on):not(.re-timer-num):not(.set-inline-label):not(.prize-price-label) { display: grid; gap: 6px; }
.set-body input[type=text], .set-body input[type=number], .set-body input[type=password], .set-body input[type=time], .set-body select { min-height: 44px; }
.set-add { justify-self: start; }
.set-field-row input { max-width: 8em; }
/* --- School prizes: [ name ] [ Checks [ 3 ] ] [ X ] lined up in columns --- */
.prize-row { grid-template-columns: 1fr auto 44px; gap: 8px; align-items: center; }
.set-group label.prize-price-label { display: grid; grid-template-columns: auto 4.2em; align-items: center; gap: 6px; }
.set-group .prize-price { width: 100%; min-height: 44px; }
.prize-del { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
#prizeEditor { display: grid; gap: 8px; }
@media (max-width: 700px) {
  .settings-panel { max-height: none; margin: 0; }
}
/* --- Phone: banner + tabs stay put at the top; whatever tab is open sits centered in the space below --- */
@media (max-width: 700px) {
  .home { justify-content: flex-start; }
  #dayPane:not([hidden]), #schoolPane:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
  #schoolPane .school-main { flex: 0 1 auto; }
}
/* --- Settings rows: every box and button 44px tall; price boxes wide enough for 2 digits --- */
.set-body input[type=text], .set-body input[type=number], .set-body input[type=password], .set-body input[type=time], .set-body select { height: 44px; min-height: 44px; padding-top: 0; padding-bottom: 0; }
.set-group label.prize-price-label { grid-template-columns: auto 64px; }
.set-group .prize-price { padding: 0 8px; text-align: center; }
/* --- Short phones (iPhone SE, 375x667): tighter task rows and settings lists --- */
@media (max-width: 700px) and (max-height: 700px) {
  .home-top { padding: 5px 8px; }
  .home-hello { font-size: 11px; margin-top: 3px; }
  .home-tab { padding: .6em .3em; }
  .home-tasks { padding: 7px; gap: 5px; }
  .home-head { font-size: 9px; }
  .checklist { gap: 4px; }
  .check-item { padding: 3px 8px; }
  .check-box { width: 18px; height: 18px; border-width: 3px; }
  .check-name { font-size: 14px; }
  .home-totals { gap: 6px; }
  .home-totals .counter { padding: 4px; }
  .home-totals .counter-num { font-size: 16px; }
  .settings-panel { padding: 8px; gap: 5px; }
  .set-tabbtn { min-height: 36px; }
  .set-pane.set-group { padding: 8px; gap: 8px; }
  .re-item { padding: 6px 10px; }
  .re-item-name { font-size: 15px; }
  .re-item-meta { font-size: 12px; }
  .set-row3 { gap: 4px; }
  #prizeEditor { gap: 6px; }
}

/* =========================================================
   ROUND 6 (Oct 26): good-morning card, task screen with STEPS, CONGRATULATIONS,
   home shop prizes, jumbo PIN pad, 12 parent tabs. These rules come last so they win.
   ========================================================= */

/* --- HOME: banner (version tag + PARENT), the good-morning card, then tickets + SHOP --- */
.home { justify-content: center; gap: clamp(12px, 2.4vmin, 24px); }
.home-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; width: min(100%, 900px); margin: 0 auto; }
.home-top .ver-tag { position: static; }
.gm-card {
  width: min(100%, 900px);
  margin: 0 auto;
  background: var(--cream);
  color: var(--ink);
  border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 4px var(--cream), inset 0 0 0 8px var(--ink);
  padding: clamp(20px, 4vmin, 48px) clamp(16px, 4vmin, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(12px, 2.4vmin, 24px);
}
.gm-hello { margin: 0; font-size: clamp(18px, 5vmin, 52px); line-height: 1.35; color: var(--orange-dark); text-shadow: 3px 3px 0 var(--yellow); overflow-wrap: anywhere; }
.gm-date { font-size: clamp(9px, 1.9vmin, 18px); color: var(--teal-dark); letter-spacing: .06em; }
.gm-message { margin: 0; font: 900 clamp(18px, 3.4vmin, 34px)/1.3 var(--round); color: var(--ink); max-width: 26em; }
.gm-progress { font: 800 clamp(14px, 2.2vmin, 22px) var(--round); color: var(--teal-dark); }
.gm-start { width: min(100%, 15em); font-size: clamp(18px, 4.4vmin, 46px); padding: .9em .6em; }
.home > .home-totals { width: min(100%, 900px); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.6vmin, 16px); }
.home > .home-totals .counter { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px; }
.home > .home-totals .counter-num { font-size: clamp(20px, 4vmin, 40px); }
.home > .home-totals .counter-label { margin-top: 0; font-size: clamp(8px, 1.4vmin, 13px); }
.home > .home-totals .btn-shop { width: 100%; font-size: clamp(16px, 3.4vmin, 32px); padding: .7em .3em; grid-column: auto; }

/* --- TASK SCREEN TOP BAR: small TODAY + STILL POSSIBLE, and PAUSE --- */
.hud { justify-content: space-between; padding: 8px 14px; }
.hud .ver-tag { position: static; order: -1; }
.hud .counters { gap: 10px; }
.hud .counter { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 12px; }
.hud .counter-num { font-size: clamp(16px, 3vmin, 30px); }
.hud .counter-label { margin-top: 0; font-size: clamp(7px, 1.2vmin, 11px); }
.pause-btn { font-size: clamp(9px, 1.6vmin, 13px); color: var(--cream); background: transparent; border: 3px solid #34494e; padding: 10px 14px; }
.pause-btn:active { transform: translateY(2px); }

/* --- The room picture gets more room on the tablet --- */
@media (min-aspect-ratio: 5/4) {
  .room { flex: 1.7; }
  .talk { flex: 1; justify-content: flex-start; }
}

/* --- STEPS: big rows he can tick --- */
.steps { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: clamp(6px, 1vmin, 10px); }
.step {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: clamp(8px, 1.4vmin, 14px) 14px;
  border: 4px solid var(--ink); background: var(--cream); color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}
.step:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.step-box { flex-shrink: 0; width: clamp(26px, 4vmin, 40px); height: clamp(26px, 4vmin, 40px); border: 4px solid var(--ink); background: #fff; display: grid; place-items: center; }
.step-box svg { width: 70%; height: 70%; fill: var(--cream); }
.step.ticked { background: #e6f2ee; }
.step.ticked .step-box { background: var(--teal); }
.step-name { font: 900 clamp(17px, 2.6vmin, 26px)/1.2 var(--round); }
.step.ticked .step-name { color: #5d7a74; }
.talk:has(.steps:not([hidden])) .textbox { font-size: clamp(13px, 3.2vmin, 34px); padding: clamp(12px, 2vmin, 24px) clamp(14px, 2.4vmin, 28px) clamp(16px, 2.6vmin, 30px); }
.talk:has(.steps:not([hidden])) .task-timer { padding: 4px 8px; }
.talk:has(.steps:not([hidden])) .tt-time { font-size: clamp(18px, 3.6vmin, 36px); }

/* --- CONGRATULATIONS + SURPRISE! --- */
.hand-panel { width: min(640px, 100%); gap: clamp(14px, 2.6vmin, 26px); padding: clamp(24px, 4vmin, 48px); }
.congrats-title { font-size: clamp(16px, 3.6vmin, 34px); color: var(--orange-dark); line-height: 1.5; overflow-wrap: anywhere; }
.hand-name { font: 900 clamp(20px, 3.6vmin, 34px)/1.3 var(--round); color: var(--teal-dark); }
.btn-open { width: min(100%, 10em); font-size: clamp(28px, 7vmin, 72px); padding: .7em .4em; }

/* --- SHOP: his tickets, prizes he can buy, the big goal --- */
.shop-panel { width: min(560px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; }
.shop-have { text-align: center; font-size: clamp(12px, 2.2vmin, 18px); color: var(--teal-dark); }
.shop-prizes { display: grid; gap: 8px; }
.shop-goal { display: grid; gap: 8px; text-align: center; border-top: 3px dashed var(--tan); padding-top: 12px; }
#shopOverlay.shop-locked .shop-have, #shopOverlay.shop-locked .shop-prizes, #shopOverlay.shop-locked .shop-goal { display: none; }

/* --- JUMBO PIN PAD: huge scrambled keys, no highlight on press --- */
.pin-overlay { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.pin-panel {
  width: min(96vw, 820px);
  height: min(calc(100dvh - 24px), 900px);
  display: flex; flex-direction: column;
  padding: clamp(12px, 2vmin, 24px);
  animation: none;
}
.pin-panel .panel-title { margin-bottom: 8px; }
.pin-panel .pin-dots span { width: clamp(20px, 3vmin, 30px); height: clamp(20px, 3vmin, 30px); }
.pin-panel .keypad { flex: 1; min-height: 0; grid-template-rows: repeat(4, 1fr); gap: clamp(8px, 1.4vmin, 14px); }
.pin-panel .key { font-size: clamp(30px, 8vmin, 84px); padding: 0; -webkit-tap-highlight-color: transparent; }
.pin-panel .key.key-small { font-size: clamp(11px, 2.2vmin, 22px); }
.pin-panel .key:active, .pin-panel .key:focus { transform: none; box-shadow: 0 4px 0 var(--ink); outline: none; background: #fff; }

/* --- PARENT TABS: 12 equal tabs, 3 rows of 4 on phone AND tablet. Labels may wrap; the font stays big --- */
.set-tabbar { grid-template-columns: repeat(4, 1fr); }
.set-tabbtn { min-height: 48px; font-size: clamp(10px, 1.5vmin, 12px); }
@media (max-width: 700px) {
  .set-tabbar { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .set-tabbtn { min-height: 44px; font-size: 9px; padding: 4px 2px; }
}
.set-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .set-row2 { grid-template-columns: 1fr; } }
.set-group textarea { font: 700 16px/1.4 var(--round); padding: 8px 10px; border: var(--border-thin, 3px) solid var(--ink); border-radius: 0; width: 100%; resize: vertical; }
/* --- Schedule rows: [name] [Starts --:--] [X] --- */
.block-editor { display: grid; gap: 8px; }
.block-row { display: grid; grid-template-columns: 1fr auto 44px; gap: 8px; align-items: center; }
.block-name { font: 900 17px var(--round); padding-left: 4px; }
.set-group label.block-time { display: grid; grid-template-columns: auto 8em; align-items: center; gap: 6px; font-size: 9px; }
.block-x-spacer { width: 44px; }
/* --- Task steps editor: [step] [UP] [DN] [X] --- */
.steps-edit { display: grid; gap: 6px; }
.step-row { display: grid; grid-template-columns: 1fr 44px 44px 44px; gap: 6px; align-items: center; }
.step-mv { height: 44px; padding: 0; font-size: 8px; display: grid; place-items: center; }
.prize-editor { display: grid; gap: 8px; }
.re-room-tasks { margin: 0; }
/* --- Jumbo PIN pad fits the pop-up area exactly (the showroom bar can take some of the screen) --- */
.pin-overlay { display: flex; align-items: stretch; justify-content: center; }
.pin-panel { height: auto; max-height: 900px; margin: auto 0; align-self: stretch; }
/* --- Rooms / Tasks tabs: "Block [Morning v]" on one row, slimmer list rows --- */
.set-group label.set-field-row:has(.block-pick) { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.set-group .block-pick { max-width: 16em; }
.re-list { gap: 5px; }
.re-item { padding: 7px 12px; }
.re-item-name { font-size: 16px; }
.re-view { gap: 8px; }
.set-back { padding: 8px 12px; }
.re-view .re-levels, .re-view .re-timer { gap: 4px 12px; }
.set-group label.block-time { grid-template-columns: auto 150px; }
.set-group .block-start { width: 150px; }
@media (min-width: 701px) { .set-tabbtn { min-height: 42px; } .set-tabbar { gap: 5px; } .settings-panel { gap: 6px; } }
.pin-panel { margin: 0; max-height: none; }
.pin-panel .key { line-height: 1; }
/* --- PHONE task screen: one-row top bar, slimmer steps, no corner PARENT (PAUSE + PIN gets a grown-up home) --- */
@media (max-width: 700px) {
  .hud { flex-wrap: nowrap; padding: 6px 8px; gap: 6px; }
  .hud .ver-tag { display: none; }
  .hud .counters { flex: 1; gap: 6px; }
  .hud .counter { flex: 1; justify-content: center; padding: 4px 6px; gap: 6px; }
  .hud .counter-num { font-size: 18px; }
  .hud .counter-label { font-size: 6px; }
  .pause-btn { padding: 8px 8px; font-size: 8px; }
  body:not(.home-on) .parent-btn { display: none; }
  .steps { gap: 5px; }
  .step { padding: 5px 10px; gap: 10px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); }
  .step-box { width: 22px; height: 22px; border-width: 3px; }
  .step-name { font-size: 15px; }
  .talk:has(.steps:not([hidden])) .textbox { font-size: 11px; padding: 8px 10px 12px; }
}
/* --- Backup & restore in Parent > Reset --- */
#setupCode { font: 600 12px/1.3 ui-monospace, monospace; word-break: break-all; min-height: 44px; }
.file-btn { cursor: pointer; display: inline-flex; align-items: center; font-family: var(--pixel); }

/* =========================================================
   QUIET TIME: the button (same box as TODAY / STILL POSSIBLE) and the full-screen calm break
   ========================================================= */
.hud .quiet-btn { color: var(--cream); font: inherit; cursor: pointer; border-color: #9cc9c2; }
.hud .quiet-btn:active { transform: translateY(2px); }
.hud .quiet-btn .counter-label { color: #9cc9c2; }
/* --- A tiny pixel speaker with soft sound waves --- */
.quiet-icon { position: relative; width: clamp(16px, 2.6vmin, 24px); height: clamp(16px, 2.6vmin, 24px); flex-shrink: 0; }
.quiet-icon::before {
  content: ""; position: absolute; left: 0; top: 28%; width: 30%; height: 44%; background: var(--cream);
  box-shadow: 3px 0 0 var(--cream);
}
.quiet-icon::after {
  content: ""; position: absolute; left: 30%; top: 8%; width: 0; height: 0;
  border-top: calc(clamp(16px, 2.6vmin, 24px) * .42) solid transparent;
  border-bottom: calc(clamp(16px, 2.6vmin, 24px) * .42) solid transparent;
  border-right: calc(clamp(16px, 2.6vmin, 24px) * .38) solid var(--cream);
}

.quiet-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: #123a3a;                                   /* Soft dark teal */
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(56px, calc(env(safe-area-inset-bottom) + 40px));
  color: #e8f4f1;
  text-align: center;
}
.quiet-inner { display: grid; justify-items: center; gap: clamp(14px, 3vmin, 32px); position: relative; }
/* --- The breathing circle: grows for about 4 seconds, shrinks for about 4 --- */
.quiet-breath {
  position: absolute; left: 50%; top: 0;
  width: clamp(220px, 52vmin, 520px); height: clamp(220px, 52vmin, 520px);
  margin-left: calc(clamp(220px, 52vmin, 520px) / -2);
  margin-top: calc(clamp(220px, 52vmin, 520px) * -0.18);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 179, 169, .35) 0%, rgba(63, 179, 169, .12) 60%, rgba(63, 179, 169, 0) 72%);
  animation: breathe 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe { 0%, 100% { transform: scale(.72); } 50% { transform: scale(1.08); } }
.quiet-time { position: relative; font-size: clamp(64px, 17vmin, 190px); line-height: 1; color: #f6ecd2; letter-spacing: .04em; }
.quiet-words { position: relative; margin: 0; font: 900 clamp(20px, 3.8vmin, 38px)/1.3 var(--round); color: #bfe3dd; }
.quiet-add {
  position: relative;
  font-size: clamp(18px, 4vmin, 40px); padding: .8em 1.4em;
  background: #2a6f6a; color: #f6ecd2;
  border: 4px solid #0b2424; box-shadow: 0 5px 0 #0b2424;
}
.quiet-add:active { transform: translateY(4px); box-shadow: 0 1px 0 #0b2424; }
.quiet-early {
  position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(16px, calc(env(safe-area-inset-top) + 40px));
  font-size: clamp(8px, 1.4vmin, 11px); padding: 10px 12px;
  background: transparent; color: #7fa9a3; border: 2px solid #2f5c58;
}
.quiet-finish { margin: 0; font: 900 clamp(28px, 6vmin, 60px)/1.3 var(--round); color: #f6ecd2; }
@media (prefers-reduced-motion: reduce) { .quiet-breath { animation-duration: 16s; } }
/* --- The PIN pad opens on top of Quiet Time (for DONE EARLY) --- */
.pin-overlay { z-index: 60; }
@media (max-width: 700px) {
  .hud .quiet-btn { flex: 1; justify-content: center; padding: 4px 4px; gap: 4px; }
}

/* =========================================================
   STARTER LIBRARY (Parent > Tasks): + TASK picker chips, STARTER ROUTINE cards, and the folded MORE part
   ========================================================= */
.lib-search { width: 100%; }
.lib-groups { display: grid; gap: 10px; }
.lib-group { display: grid; gap: 6px; }
.lib-area { margin: 0; }
.lib-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-chip {
  display: grid; gap: 1px; min-height: 48px; padding: 6px 12px; text-align: left;
  border: 3px solid var(--ink); background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink);
}
.lib-chip:active { transform: translateY(3px); box-shadow: none; }
.lib-chip-name { font: 900 15px/1.2 var(--round); }
.lib-chip-meta { font: 700 12px/1.2 var(--round); color: #6b5a48; }
.lib-chip.have { background: #e6f2ef; border-color: #8fb8b0; box-shadow: none; color: var(--teal-dark); }
.lib-routines { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.lib-routine {
  display: grid; gap: 6px; align-content: start; padding: 12px; text-align: left;
  border: 3px solid var(--ink); background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink);
}
.lib-routine:active { transform: translateY(3px); box-shadow: none; }
.lib-routine-name { font: 10px/1.4 var(--pixel); color: var(--teal-dark); }
.lib-routine-tasks { font: 700 13px/1.35 var(--round); color: #6b5a48; }
.re-more-btn {
  justify-self: start; display: flex; align-items: center; gap: 8px; max-width: 100%;
  min-height: 40px; padding: 6px 2px; border: 0; background: none; color: var(--teal-dark); text-align: left;
}
.re-more-word { font: 9px/1.4 var(--pixel); white-space: nowrap; }
.re-more-meta { font: 700 13px/1.3 var(--round); color: #6b5a48; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.re-more { display: grid; gap: 8px; padding: 8px 10px; border: 2px dashed #cdbfa6; }
.re-more[hidden] { display: none; }
@media (max-width: 700px) {
  .lib-chip { min-height: 44px; padding: 5px 10px; }
  .lib-chip-name { font-size: 14px; }
  .lib-routines { grid-template-columns: 1fr; }
}
.task-order-row { display: grid; grid-template-columns: 1fr 56px 56px; gap: 6px; align-items: stretch; }
.order-btn { min-height: 56px; padding: 0; font: 900 22px/1 var(--round); display: grid; place-items: center; }
.order-btn:disabled { opacity: .3; box-shadow: none; }
@media (max-width: 700px) { .task-order-row { grid-template-columns: 1fr 48px 48px; gap: 4px; } .order-btn { min-height: 48px; } }

/* =========================================================
   NO ZOOM, NO HIGHLIGHT: a double tap never zooms, and long presses never select words or pop a menu.
   Only typing boxes (and the setup code box in Reset) can be selected.
   ========================================================= */
html, body, button, a, label, select, summary, [role="button"], .key, .step, .re-item, .lib-chip, .lib-routine, canvas { touch-action: manipulation; }
*, *::before, *::after {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, #setupCode { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
input[type=checkbox], input[type=radio] { -webkit-user-select: none; user-select: none; }
.history-list { -webkit-user-select: none; user-select: none; }

/* =========================================================
   THE SCREEN STAYS PUT: the page never scrolls, bounces, pulls to refresh or drifts sideways.
   Only boxes that really scroll move, and they stop at their own edges (no bounce into the page).
   ========================================================= */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; position: fixed; inset: 0; }
.set-body, .settings-overlay, .history-list, .school-panel, .shop-panel, #setupCode, .overlay { overscroll-behavior: contain; }

/* =========================================================
   TIMER from the task screen: the TIMER button next to PAUSE, and its pop-up
   (quick minutes, - / +, START, TIMER OFF). Grown-ups only (PIN first).
   ========================================================= */
.hud-btns { display: flex; gap: 8px; flex-shrink: 0; }
.timer-btn { border-color: #9cc9c2; color: #9cc9c2; }
.timer-panel { width: min(520px, 100%); display: grid; gap: clamp(10px, 1.8vmin, 16px); }
.timer-panel .panel-title, .timer-panel .award-task { margin: 0; }
.tp-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tp-preset { min-height: 72px; padding: 4px; display: grid; place-content: center; gap: 6px; background: var(--cream); color: var(--ink); }
.tp-preset-num { font-size: clamp(20px, 3.4vmin, 30px); }
.tp-preset-unit { font-size: 8px; }
.tp-preset.on { background: var(--teal); color: var(--cream); }
.tp-adjust { display: grid; grid-template-columns: 72px 1fr 72px; gap: 10px; align-items: center; }
.tp-step { min-height: 64px; padding: 0; font-size: 28px; }
.tp-value { text-align: center; font-size: clamp(20px, 3.6vmin, 32px); }
.tp-start { width: 100%; min-height: 64px; }
.timer-panel .award-extra { margin: 0; }
.timer-panel .award-extra .btn { min-height: 52px; flex: 1; }
@media (max-width: 700px) {
  .hud-btns { gap: 4px; }
  .tp-presets { gap: 5px; }
  .tp-preset { min-height: 60px; }
}

/* =========================================================
   BIG ENOUGH TO HIT ON THE FIRST TRY: every kid-screen button is at least 60px tall,
   every grown-up button and typing box at least 48px.
   ========================================================= */
#home .btn, .hud .quiet-btn, .hud .pause-btn, .talk .step, .talk .btn-done,
#shopOverlay button, #handOverlay button, #quietOverlay button { min-height: 60px; }
#parentBtn, #homeParentBtn, #settingsOverlay button, #pinOverlay button, #awardOverlay button, #timerOverlay button, #schoolOverlay button,
#settingsOverlay input:not([type=checkbox]):not([type=radio]), #settingsOverlay select, #schoolOverlay input { min-height: 48px; }

/* --- PARENT sits in the top bar now (faded and quiet), so nothing covers I'M DONE --- */
.hud .parent-btn { position: static; align-self: center; padding: 8px 10px; }
/* --- PHONE top bar: five things in one row. Each label sits under its number so it all fits --- */
@media (max-width: 700px) {
  .hud { gap: 4px; padding: 4px 6px; }
  .hud .counters { gap: 4px; min-width: 0; }
  .hud .counter, .hud .quiet-btn { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; padding: 4px 2px; }
  .hud .counter-label { font-size: 6px; line-height: 1.4; text-align: center; }
  .hud-btns { gap: 4px; }
  .hud .pause-btn { padding: 4px 6px; font-size: 7px; }
}
/* --- SHORT PHONES (under 700px tall): steps 48px (still a full finger) and a slimmer timer, so I'M DONE stays on screen --- */
@media (max-width: 700px) and (max-height: 700px) {
  .talk .step { min-height: 48px; }
  .steps { gap: 4px; }
  .talk:has(.steps:not([hidden])) .tt-label { display: none; }
}

/* =========================================================
   OCT 28: assignments, countdown / stopwatch, the shop with a cart, tablet time, reminder cards
   ========================================================= */
/* --- ASSIGNMENT 1 OF 4, with the grown-ups' small + / - button --- */
.assign-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #000; border: 4px solid var(--teal); padding: 6px 6px 6px 14px; }
.assign-row[hidden] { display: none; }
.assign-text { font-size: clamp(12px, 2.4vmin, 22px); color: var(--yellow); line-height: 1.4; }
.assign-edit { min-height: 48px; padding: 8px 12px; font: inherit; font-size: 10px; color: #6f8f8a; background: transparent; border: 2px solid #34494e; }
/* --- The TIMER pop-up: COUNTDOWN / STOPWATCH switch --- */
.tp-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-mode { min-height: 60px; padding: 6px; font-size: clamp(10px, 1.6vmin, 13px); background: var(--cream); color: var(--ink); }
.tp-mode.on { background: var(--teal); color: var(--cream); }
.tp-count-only { display: grid; gap: clamp(10px, 1.8vmin, 16px); }
.tp-count-only[hidden] { display: none; }
.tp-watch-note { margin: 0; text-align: center; font: 800 17px/1.4 var(--round); color: #6b5a48; }
.task-timer.tt-watch { border-color: var(--yellow); }
.task-timer.tt-watch .tt-label { color: var(--yellow); }
/* --- The home button turns into a big yellow SHOP when the block is done --- */
.gm-start.start-shop { background: var(--yellow); box-shadow: inset -4px -4px 0 var(--yellow-dark), 0 4px 0 var(--ink); }

/* --- TABLET TIME: a big countdown at the top of every screen (the page moves down to make room) --- */
.prize-timer {
  position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 19;
  display: flex; align-items: center; gap: 18px; padding: 8px 22px; white-space: nowrap;
  background: #000; border: 4px solid var(--yellow); box-shadow: 0 4px 0 var(--ink);
}
.prize-timer[hidden] { display: none; }
.pt-name { font-size: clamp(12px, 2.2vmin, 20px); color: var(--cream); }
.pt-time { font-size: clamp(28px, 5vmin, 46px); color: var(--yellow); line-height: 1; }
body.prize-on { padding-top: calc(max(10px, env(safe-area-inset-top)) + var(--showroom-bar-h, 0px) + clamp(62px, 8.4vmin, 78px)) !important; }   /* (!important: beats the showroom bar's own top padding) */

/* --- THE SHOP: tiles on the left, his cart on the right --- */
.shop-panel { width: min(1180px, 100%); height: 100%; max-height: 100%; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto auto; gap: 10px; text-align: center; }
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shop-head .panel-title { margin: 0; }
.shop-head .shop-have { font-size: clamp(12px, 2vmin, 18px); }
.shop-head .shop-close { min-height: 60px; }
.shop-main { display: grid; grid-template-columns: 1fr minmax(300px, 360px); gap: 14px; min-height: 0; }
.shop-main[hidden], .shop-goal[hidden] { display: none; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; gap: 14px; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 8px 4px; min-height: 0; }
.shop-tile {
  position: relative; aspect-ratio: 1; min-height: 150px; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; gap: 6px;
  padding: 12px 8px; background: #fff; color: var(--ink); border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font: inherit; cursor: pointer;
}
.shop-tile:active { transform: translateY(4px); box-shadow: none; }
.tile-icon { width: clamp(48px, 7vmin, 64px); height: clamp(48px, 7vmin, 64px); display: grid; place-items: center; font-size: clamp(22px, 3.6vmin, 32px); color: var(--cream); border: 4px solid var(--ink); }
.tile-name { font: 900 clamp(15px, 2.1vmin, 19px)/1.2 var(--round); text-align: center; overflow-wrap: anywhere; }
.tile-price { font-size: clamp(9px, 1.4vmin, 12px); color: var(--orange-dark); }
.tile-qty { position: absolute; top: -10px; right: -10px; min-width: 42px; padding: 8px 6px; background: var(--orange); border: 3px solid var(--ink); font-size: 12px; }
.shop-tile.off { opacity: .45; filter: grayscale(1); box-shadow: none; cursor: default; }
.shop-tile.off:active { transform: none; }
.tile-off { font-size: 10px; color: var(--ink); }
.shop-tile.off .tile-price { display: none; }
/* --- The cart --- */
.cart { display: grid; grid-template-rows: auto 1fr auto auto auto auto; gap: 8px; min-height: 0; padding: 12px; background: #fff8ec; border: 4px solid var(--ink); text-align: left; }
.cart-title { margin: 0; font-size: clamp(12px, 2vmin, 16px); text-align: center; }
.cart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.cart-empty { font: 800 16px/1.4 var(--round); color: #6b5a48; text-align: center; padding: 12px 4px; }
.cart-row { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "name name name" "qty line btns"; align-items: center; gap: 4px 10px; padding-bottom: 8px; border-bottom: 2px dashed var(--tan); }
.cart-name { grid-area: name; font: 900 17px/1.2 var(--round); }
.cart-qty { grid-area: qty; font-size: 14px; }
.cart-line { grid-area: line; font-size: 11px; color: var(--orange-dark); }
.cart-line::after { content: " TIX"; }
.cart-btns { grid-area: btns; display: flex; gap: 6px; justify-content: flex-end; }
.cart-btn { min-width: 56px; min-height: 60px; padding: 0; font-size: 18px; }
.cart-total { font-size: clamp(12px, 2vmin, 16px); text-align: center; }
.cart-have { font: 800 17px/1.3 var(--round); text-align: center; }
.cart-need { font: 900 17px/1.3 var(--round); text-align: center; color: var(--orange-dark); }
.cart-need:empty { display: none; }
.cart-checkout { width: 100%; min-height: 72px; font-size: clamp(16px, 2.6vmin, 24px); }
.shop-panel .shop-goal { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.shop-panel .shop-note:empty { display: none; }
@media (max-width: 700px) {
  .shop-panel { height: auto; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; grid-template-rows: none; }
  .shop-head { flex-wrap: wrap; justify-content: center; }
  .shop-main { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); overflow: visible; }
  .shop-tile { min-height: 110px; }
  .shop-panel .shop-goal { grid-template-columns: 1fr; }
}

/* --- THE BIG FRIENDLY CARD (reminders, "Tablet time is over!"): on top of everything --- */
.notice-overlay { z-index: 90; }
.notice-panel { width: min(680px, 100%); display: grid; justify-items: center; gap: clamp(12px, 2.4vmin, 22px); text-align: center; padding: clamp(24px, 5vmin, 48px); }
.notice-bell { width: 72px; height: 72px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23241a12' d='M5 0h2v1H5zM3 1h6v1H3zM2 2h8v1H2zM2 3h8v4H2zM1 7h10v2H1zM5 10h2v1H5z'/%3E%3Cpath fill='%23f4c542' d='M3 2h6v1H3zM3 3h6v4H3zM2 7h8v1H2z'/%3E%3C/svg%3E"); }
.notice-kind { font-size: clamp(11px, 1.8vmin, 16px); color: var(--teal-dark); }
.notice-text { font: 900 clamp(28px, 5.4vmin, 56px)/1.2 var(--round); color: var(--ink); overflow-wrap: anywhere; }
.notice-ok { width: min(340px, 100%); min-height: 84px; }

/* --- Parent > Shop: minutes and "for sale in" under each prize. Parent > Schedule: reminders. Tasks: assignments --- */
.prize-row .prize-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-bottom: 8px; border-bottom: 2px dashed var(--tan); font: 800 14px/1.3 var(--round); }
#shopEditor label.prize-min-label { display: flex; align-items: center; gap: 6px; font-size: 8px; }
#shopEditor .prize-min { width: 6em; }
#shopEditor label.prize-block { display: flex; align-items: center; gap: 6px; min-height: 48px; font: 800 14px/1.2 var(--round); }
#shopEditor label.prize-block input { width: 24px; height: 24px; }
.reminder-editor { display: grid; gap: 8px; }
.reminder-row { display: grid; grid-template-columns: 140px 1fr auto auto; gap: 6px; align-items: center; }
#settingsOverlay label.re-reps { display: flex; align-items: center; gap: 8px; font-size: 8px; grid-column: 1 / -1; }
.re-reps-in { width: 5em; }
@media (max-width: 700px) { .reminder-row { grid-template-columns: 1fr auto auto; } .reminder-row .rem-text { grid-column: 1 / -1; grid-row: 2; } }
/* --- PHONES: the shop fits under the showroom bar; tablet time is a slimmer bar, and while it runs the step rows are 48px so I'M DONE stays on screen --- */
@media (max-width: 700px) {
  .shop-panel { max-height: 100%; }
  .prize-timer { padding: 4px 14px; gap: 12px; border-width: 3px; }
  .pt-name { font-size: 10px; }
  .pt-time { font-size: 26px; }
  body.prize-on { padding-top: calc(max(10px, env(safe-area-inset-top)) + var(--showroom-bar-h, 0px) + 48px) !important; }
  body.prize-on .talk .step { min-height: 48px; }
}

/* =========================================================
   FOCUS OPTIONS: the takeover card, must-check steps, step-by-step
   ========================================================= */
/* --- TAKEOVER CARD: the room picture is gone (not dimmed); the task is one big cream card. The top bar stays --- */
.stage.takeover .room { display: none; }
.stage.takeover .talk {
  flex: 1; width: 100%; max-width: 980px; margin: 0 auto; min-height: 0; padding: clamp(16px, 3vmin, 36px);
  justify-content: center; gap: clamp(10px, 2vmin, 22px);
  background: var(--cream); border: 4px solid var(--ink); box-shadow: inset 0 0 0 4px var(--cream), inset 0 0 0 8px var(--ink);
}
.stage.takeover .textbox { box-shadow: none; border: 0; padding: 0; background: transparent; text-align: center; }
.stage.takeover .talk .textbox { font-size: clamp(18px, 4.4vmin, 44px); }
.stage.takeover .steps { max-width: 760px; }
.stage.takeover .task-timer { max-width: 760px; }
.stage.takeover .assign-row { max-width: 760px; }
.stage.takeover .task-note { color: var(--teal-dark); }

/* --- MUST CHECK STEPS: the little words over the gray I'M DONE --- */
.done-hint { font: 900 clamp(16px, 2.4vmin, 22px)/1.3 var(--round); color: var(--yellow); text-align: center; }
.stage.takeover .done-hint { color: var(--orange-dark); }
.done-hint[hidden] { display: none; }

/* --- STEP-BY-STEP: one big step, a big NEXT, and dots for how far he is --- */
.steps.steps-sbs { display: block; }
.sbs { display: grid; justify-items: center; gap: clamp(10px, 2vmin, 18px); padding: clamp(14px, 2.6vmin, 28px); background: #fff; border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink); color: var(--ink); text-align: center; }
.sbs-count { font-size: clamp(12px, 2.2vmin, 20px); color: var(--teal-dark); }
.sbs-name { font: 900 clamp(26px, 5vmin, 54px)/1.15 var(--round); overflow-wrap: anywhere; }
.sbs-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sbs-dot { width: 16px; height: 16px; border: 3px solid var(--ink); background: #fff; }
.sbs-dot.on { background: var(--teal); }
.sbs-dot.now { background: var(--yellow); }
.sbs-next { width: min(360px, 100%); min-height: 72px; font-size: clamp(18px, 3vmin, 28px); }

/* --- Parent > Tasks: Focus options as big on/off switches --- */
.focus-opts { display: grid; gap: 6px; }
#settingsOverlay label.switch { display: flex; align-items: center; gap: 12px; min-height: 56px; cursor: pointer; font: 800 15px/1.3 var(--round); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { flex-shrink: 0; position: relative; width: 64px; height: 36px; background: #cfc5b3; border: 3px solid var(--ink); }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: #fff; border: 3px solid var(--ink); }
.switch input:checked + .switch-ui { background: var(--teal); }
.switch input:checked + .switch-ui::after { left: 27px; }
.switch input:focus-visible + .switch-ui { outline: 3px solid var(--orange); outline-offset: 2px; }
.switch-words b { display: block; font: 900 16px/1.2 var(--round); }
.fo-all[hidden] { display: none; }
/* --- The takeover card always fits: tighter spacing, and if it's still too tall it scrolls inside itself (top stays visible) --- */
.stage.takeover .talk { justify-content: safe center; overflow-y: auto; overscroll-behavior: contain; gap: clamp(8px, 1.6vmin, 18px); padding: clamp(14px, 2.4vmin, 28px); }
.stage.takeover .talk .textbox { line-height: 1.35; padding: 0; }
.stage.takeover .talk:has(.steps:not([hidden])) .textbox { font-size: clamp(18px, 3.6vmin, 36px); padding: 0; }
.stage.takeover .tb-arrow { display: none; }
.stage.takeover .btn-done { padding: .75em 1.4em; flex-shrink: 0; }
.stage.takeover .talk > * { flex-shrink: 0; }

/* =========================================================
   PHONE LAYOUT (Oct 28): portrait AND narrower than 700px. Every screen fills the whole height (inside the
   safe areas and under the Showroom bar), the main box stretches, buttons are thumb-sized, and nothing he taps
   sits in the bottom 24px (the iPhone home bar). Sideways = the tablet layout, untouched.
   ========================================================= */
@media (orientation: portrait) and (max-width: 700px) {
  body { padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)); gap: 10px; }
  .overlay { padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)); }

  /* --- HOME: slim top bar, the welcome card takes the rest, then MY TICKETS | SHOP --- */
  .home { justify-content: flex-start; gap: 10px; width: 100%; min-height: 0; }
  .home .home-top { flex: 0 0 56px; height: 56px; padding: 0 0 0 4px; background: transparent; border: 0; box-shadow: none; }
  .home .home-top .ver-tag { font-size: 9px; }
  .home .home-top .home-parent { min-height: 48px; padding: 0 14px; }
  .home .gm-card { flex: 1 1 auto; min-height: 0; justify-content: flex-start; padding: clamp(20px, 4vh, 40px) 18px 18px; gap: clamp(10px, 2vh, 20px); }
  .home .gm-hello { margin-top: auto; font-size: clamp(22px, 7.2vw, 34px); }
  .home .gm-date { font-size: clamp(10px, 3vw, 13px); }
  .home .gm-message { font-size: clamp(19px, 5.6vw, 26px); }
  .home .gm-progress { font-size: clamp(15px, 4.2vw, 19px); }
  .home .gm-card .gm-start { margin-top: auto; width: 100%; min-height: 96px; font-size: clamp(20px, 6.2vw, 28px); padding: .5em .4em; }
  .home > .home-totals { flex: 0 0 auto; gap: 10px; }
  .home > .home-totals .counter, .home > .home-totals .btn-shop { min-height: 72px; }
  .home > .home-totals .counter-num { font-size: clamp(22px, 6.4vw, 30px); }
  .home > .home-totals .counter-label { font-size: 8px; }
  .home > .home-totals .btn-shop { font-size: clamp(18px, 5.4vw, 24px); }

  /* --- TASK SCREEN: the talk side stretches under the picture (app.js sizes the picture to fill) --- */
  .talk { padding-bottom: 0; justify-content: flex-start; }

  /* --- TAKEOVER CARD: fills the height; title and steps at the top, timer + I'M DONE down by his thumb --- */
  .stage.takeover .talk { justify-content: flex-start; padding: 16px 14px; }
  .stage.takeover .task-timer:not([hidden]) { margin-top: auto; }
  .stage.takeover .task-timer[hidden] ~ .done-hint:not([hidden]) { margin-top: auto; }
  .stage.takeover .task-timer[hidden] ~ .done-hint[hidden] ~ #doneBtn { margin-top: auto; }
  .stage.takeover #doneBtn { width: 100%; min-height: 88px; }
  .stage.takeover .steps-sbs { flex: 1 1 auto; display: flex; }
  .stage.takeover .sbs { flex: 1; align-content: center; }

  /* --- POP-UPS (shop, PIN, award, timer, assignments, CONGRATULATIONS, reminders): full height, main box stretches --- */
  .overlay > .panel { width: 100%; height: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
  .overlay > .panel:not(.shop-panel):not(.settings-panel):not(.pin-panel) { display: flex; flex-direction: column; justify-content: center; }
  #awardOverlay .award-list { flex: 0 0 auto; }
  #awardOverlay .award { min-height: 64px; }
  #handOverlay .hand-panel .panel-title { margin-top: auto; font-size: clamp(22px, 7vw, 32px); line-height: 1.4; }
  #handOverlay .hand-name { font-size: clamp(22px, 6.4vw, 30px); }
  #handOverlay .hand-panel .btn-open { margin-top: auto; width: 100%; min-height: 96px; }
  #noticeOverlay .notice-panel .notice-bell { margin-top: auto; }
  #noticeOverlay .notice-panel .notice-ok { margin-top: auto; width: 100%; }
  #timerOverlay .tp-start, #assignOverlay .tp-start { min-height: 72px; }

  /* --- THE SHOP: full height. Header in one row, 2 big tiles per row, the cart under them, CHECKOUT big --- */
  .shop-panel { display: flex; flex-direction: column; gap: 12px; }
  .shop-head { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 6px; align-items: center; }
  .shop-head .panel-title { grid-column: 1; grid-row: 1; font-size: 16px; text-align: left; }
  .shop-head .shop-have { grid-column: 1; grid-row: 2; font-size: 11px; text-align: left; white-space: nowrap; }
  .shop-head .shop-close { grid-column: 2; grid-row: 1 / 3; min-height: 64px; padding: 0 18px; }
  .shop-main { flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; }
  .shop-grid { grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; padding: 10px 6px 4px 2px; }
  .shop-tile { aspect-ratio: auto; min-height: 150px; padding: 14px 8px 12px; }
  .tile-name { font-size: 16px; }
  .cart { flex: 1 0 auto; grid-template-rows: auto auto auto auto auto auto; align-content: start; }
  .cart-list { overflow: visible; }
  .cart-checkout { min-height: 80px; }
  .shop-panel .shop-goal { gap: 6px; }

}

/* =========================================================
   ONE TASK FRAME (Oct 28, v19): every task uses the exact same frame, so nothing moves between tasks.
   Tablet / sideways: the room picture on the left (a fixed size, sized by app.js from the screen height),
   the task column on the right. Tall screens: the picture on top, the task column under it.
   The task column has fixed zones, top to bottom: the text box, the steps area, the timer (only when it's on),
   I'M DONE, and one line for notes. The steps area takes whatever is left, so I'M DONE never moves.
   (The ids win over all the older layout rules above.)
   ========================================================= */
body:not(.home-on) { height: 100vh; height: 100dvh; overflow: hidden; }
#stage { flex: 1 1 0; min-height: 0; min-width: 0; }
#room { flex: 0 0 auto; position: relative; display: block; }
#stage.takeover #room { display: none; }                      /* (the takeover card still hides the room picture) */
#screen { position: relative; overflow: hidden; background: var(--frame); }

/* --- The room's name: a small banner on the picture's top-left corner (app.js puts it on the picture's corner) --- */
#screen .room-name {
  position: absolute; z-index: 2; left: 8px; top: 8px; margin: 0;
  padding: .55em .7em .45em; background: var(--ink); color: var(--cream);
  border: 3px solid var(--cream); box-shadow: 0 3px 0 rgba(0, 0, 0, .45);
  font-size: clamp(9px, 1.5vmin, 15px); letter-spacing: .08em; text-align: left; line-height: 1; pointer-events: none;
}

/* --- THE TASK COLUMN: fixed zones in a grid. Rows: assignment line, text box, steps, timer, I'M DONE, notes --- */
#talk {
  --tb-h: clamp(96px, 20vh, 180px);      /* The text box */
  --done-h: clamp(64px, 11vh, 104px);    /* I'M DONE */
  --note-h: clamp(24px, 4vh, 38px);      /* "Check your steps first" / "Go get a grown-up!" */
  --zone-gap: clamp(8px, 1.6vmin, 16px);
  flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto var(--tb-h) minmax(0, 1fr) auto var(--done-h) var(--note-h);
  gap: 0; padding: 0; align-items: stretch; justify-items: stretch;
}
#talk > #assignRow { grid-row: 1; margin-bottom: var(--zone-gap); }
#talk > #textbox {
  grid-row: 2; height: 100%; width: 100%; overflow: hidden; display: flex; align-items: center;
  font-size: clamp(14px, 3.4vmin, 36px); line-height: 1.5;
  padding: clamp(12px, 2.2vmin, 26px) clamp(16px, 2.6vmin, 30px);
}
#talk > #textbox .tb-text { flex: 1; min-width: 0; }
#talk > #stepList { grid-row: 3; margin: var(--zone-gap) 0; min-height: 0; }
#talk > #taskTimer { grid-row: 4; justify-self: center; margin-bottom: var(--zone-gap); }
#talk > #doneBtn {
  grid-row: 5; width: 100%; height: 100%; min-height: 0; padding: 0 .6em; margin: 0;
  font-size: clamp(18px, 4vmin, 44px);
}
#talk > #doneHint, #talk > #taskNote { grid-row: 6; align-self: center; justify-self: center; min-height: 0; line-height: 1.2; }
#talk > #taskNote { font-size: clamp(10px, 1.8vmin, 18px); }
#talk > #doneHint { font-size: clamp(14px, 2.2vmin, 22px); }

/* --- Tablet / sideways: side by side. app.js sets the picture's exact size (it fills the frame: no black bars) --- */
@media (min-aspect-ratio: 5/4) {
  #stage { flex-direction: row; align-items: flex-start; }
  #stage > #talk { align-self: stretch; }
}
/* --- Tall screens (phones held up): the picture on top, full width, then the task column --- */
@media (max-aspect-ratio: 1249/1000) {
  #stage { flex-direction: column; gap: 10px; }
  #room { width: 100%; padding: 6px; }
  #talk { --tb-h: clamp(64px, 10.5vh, 110px); --done-h: clamp(64px, 9vh, 84px); --note-h: clamp(22px, 3vh, 30px); --zone-gap: 8px; }
  #talk > #textbox { font-size: clamp(12px, 3.6vw, 18px); padding: 10px 14px; }
  #talk > #doneBtn { font-size: clamp(18px, 5.6vw, 28px); }
  #screen .room-name { font-size: 9px; border-width: 2px; }
}

/* --- THE STEP TILES: 2 x 2 (2 x 3 for 5-6 steps). No checkboxes: tap = teal, tap again = cream --- */
#stepList.tiles {
  list-style: none; padding: 0; width: 100%; max-width: none;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows, 2), minmax(0, 1fr));
  gap: clamp(8px, 1.4vmin, 14px);
  --tile-fs: clamp(16px, 3.1vmin, 32px);
}
#stepList.tiles-many { --tile-fs: clamp(14px, 2.4vmin, 25px); gap: clamp(6px, 1.1vmin, 12px); }
.tile-slot { display: flex; min-height: 0; min-width: 0; }
.tile-slot.empty { border: 3px dashed rgba(255, 244, 224, .16); }
.step-tile {
  position: relative; flex: 1; min-width: 0; min-height: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 6px 10px; border: 4px solid var(--ink); border-radius: 0;
  background: var(--cream); color: var(--ink); box-shadow: 0 4px 0 var(--ink);
  font: 900 var(--tile-fs)/1.15 var(--round); overflow: hidden;
}
.step-tile .tile-text { display: block; overflow-wrap: anywhere; }
.step-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.step-tile.ticked { background: var(--teal); color: #fff; text-shadow: 0 2px 0 var(--teal-dark); }
/* --- A small pixel check in the corner of a teal tile (so "done" isn't only a color) --- */
.step-tile.ticked::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: clamp(14px, 2.2vmin, 22px); height: clamp(14px, 2.2vmin, 22px);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff4e0' d='M7 1h2v2H7zM6 2h2v2H6zM5 3h2v2H5zM4 4h2v2H4zM3 5h2v2H3zM1 3h2v2H1zM2 4h2v2H2z'/%3E%3C/svg%3E");
}
/* --- Step-by-step: the next tile is lit (yellow edge), the later ones wait (faded, can't be tapped) --- */
.step-tile.now { box-shadow: 0 4px 0 var(--ink), 0 0 0 4px var(--yellow); }
.step-tile.later { opacity: .4; }
.step-tile:disabled { cursor: default; }
.step-tile:disabled:active { transform: none; box-shadow: 0 4px 0 var(--ink); }
.step-tile.now:active { box-shadow: 0 1px 0 var(--ink), 0 0 0 4px var(--yellow); }
/* --- No steps: a calm "You got this!" in the same space --- */
#stepList.tiles-none { grid-template-rows: minmax(0, 1fr); grid-template-columns: 1fr; }
.tiles-calm {
  display: grid; place-items: center; text-align: center; min-height: 0;
  border: 3px dashed rgba(255, 244, 224, .16); color: #9cc9c2;
  font: 900 clamp(22px, 4.4vmin, 46px)/1.2 var(--round);
}

/* --- THE TAKEOVER CARD: the same frame and tiles, on one big cream card (the room picture is hidden) --- */
#stage.takeover > #talk { flex: 1 1 0; align-self: stretch; height: 100%; padding: clamp(14px, 2.4vmin, 28px); }
#stage.takeover #textbox { font-size: clamp(18px, 4.4vmin, 44px); justify-content: center; text-align: center; padding: 0; }
#stage.takeover .tile-slot.empty, #stage.takeover .tiles-calm { border-color: rgba(36, 26, 18, .16); }
#stage.takeover .tiles-calm { color: var(--teal-dark); }
#stage.takeover .step-tile { background: #fff; }
#stage.takeover .step-tile.ticked { background: var(--teal); }

/* --- BLOCK DONE: "NEXT UP: AFTERNOON" is a gray sign, not a button (SHOP stays in the bottom row) --- */
#startBtn.start-next, #startBtn.start-next:disabled {
  opacity: 1; background: #d8d0c0; color: #6f675a; border-color: #8f8778; cursor: default;
  box-shadow: inset -4px -4px 0 #c4baa8; white-space: pre-line; line-height: 1.6; pointer-events: none;
  font-size: clamp(13px, 2.6vmin, 26px); padding: .7em .5em;
}
#startBtn.start-next:active { transform: none; }

/* --- PHONE SIDEWAYS (too short for the task frame): a calm full-screen "Turn me back up!" --- */
.turn-card { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .turn-card {
    position: fixed; inset: 0; z-index: 2147483000; display: grid; place-content: center; justify-items: center; gap: 14px;
    background: var(--bg); color: var(--cream); text-align: center; padding: 20px;
  }
  .turn-phone { width: 44px; height: 72px; border: 5px solid var(--cream); border-radius: 8px; position: relative; }
  .turn-phone::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 10px; height: 4px; margin-left: -5px; background: var(--cream); }
  .turn-words { font: 900 clamp(28px, 8vh, 44px)/1.2 var(--round); }
  .turn-small { font: 800 clamp(15px, 4.4vh, 20px)/1.3 var(--round); color: #9cc9c2; }
}

/* =========================================================
   PARENT (Oct 28, v21): SAVE on every tab, the BLOCKS tab, "For sale in" picker, max per block in the shop
   ========================================================= */
.set-top { grid-template-columns: auto 1fr auto auto; }
.set-save-here.saved { background: var(--teal); color: var(--cream); }
.set-sub { line-height: 1.8; }
/* --- BLOCKS: the name on its own line, then start time + ▲ ▼ X --- */
.block-editor { display: grid; gap: 12px; }
#blockEditor .block-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-bottom: 12px; border-bottom: 2px dashed var(--tan); }
#blockEditor .block-name-in { width: 100%; min-width: 0; font: 900 18px/1.2 var(--round); }
.block-line { display: grid; grid-template-columns: minmax(0, 1fr) 48px 48px 48px; gap: 8px; align-items: center; }
#blockEditor label.block-time { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; min-width: 0; }
#blockEditor .block-start { width: 100%; min-width: 0; }
.block-line .order-btn, .block-line .prize-del { width: 48px; height: 48px; min-height: 48px; padding: 0; font-size: 14px; }
.block-line .btn:disabled { opacity: .35; }
/* --- SHOP editor: "For sale in" is a pick-list that opens a checklist --- */
.sale-pick { flex-basis: 100%; width: 100%; display: grid; gap: 4px; }
.sale-btn { width: 100%; min-height: 48px; text-align: left; font: 800 15px/1.3 var(--round); white-space: normal; padding: .6em .9em; }
.sale-list { display: grid; gap: 2px; padding: 4px 0 0 4px; }
.sale-list .sale-all { border-bottom: 2px solid var(--tan); }
#shopEditor label.prize-min-label { min-width: 0; }
/* --- THE SHOP: "15 MIN · max 4", and a gray tile he can't add right now (with a gentle note) --- */
.tile-meta { font: 800 clamp(11px, 1.5vmin, 14px)/1.2 var(--round); color: #6f675a; }
.shop-tile.cant { opacity: 1; filter: grayscale(1); background: #e9e3d6; }
.shop-tile.cant .tile-off { font: 900 13px/1.25 var(--round); color: var(--ink); }
.cart-btn:disabled { opacity: .35; filter: grayscale(1); }
#cartNeed { font-family: var(--round); font-weight: 900; }

/* --- PHONE: nothing overflows or overlaps. Rows too wide for the panel stack; helper text wraps --- */
@media (orientation: portrait) and (max-width: 700px) {
  .set-top { grid-template-columns: 1fr 1fr 1.5fr; gap: 6px; }
  .set-top .set-title { display: none; }
  .set-top .btn { min-width: 0; padding: .9em .3em; font-size: 9px; white-space: normal; line-height: 1.4; }
  .set-body p, .set-body label, .set-body .set-sub, .set-body li, .set-body span { overflow-wrap: anywhere; }
  .set-body input, .set-body select, .set-body textarea { max-width: 100%; min-width: 0; }
  .prize-row { grid-template-columns: minmax(0, 1fr) 48px; }
  .prize-row > .prize-name { grid-column: 1 / -1; width: 100%; }
  .prize-row > .prize-price-label { grid-column: 1; min-width: 0; }
  .prize-row > .prize-del { grid-column: 2; }
  .prize-row > .prize-more { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .prize-row > .prize-more .prize-min-label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .prize-row > .prize-more .prize-min, .prize-row > .prize-more .prize-max { width: 100%; }
  .prize-row > .prize-more .sale-pick { grid-column: 1 / -1; }
}
/* --- PHONE: a step's words get the whole line; ▲ ▼ X sit under them --- */
@media (orientation: portrait) and (max-width: 700px) {
  .step-row { grid-template-columns: minmax(0, 1fr) 48px 48px 48px; }
  .step-row > .step-in { grid-column: 1 / -1; width: 100%; }
  .step-row > [data-mv="-1"] { grid-column: 2; }
}
@media (orientation: portrait) and (max-width: 700px) {
  #blockEditor label.block-time { grid-template-columns: minmax(0, 1fr); gap: 4px; }   /* "Starts" above the time, so the time isn't cut */
  #blockEditor .block-line { align-items: end; }
}

/* =========================================================
   ROUND 7 (Oct 28, v22)
   ========================================================= */

/* --- THE TOP BAR: one bar for every screen. Everything is measured in --s (the size of one small square button),
   which grows with the bar's width, so the order, proportions and spacing are the same on a phone, tablet, computer and TV.
   Row = 4 squares + 2 big boxes (2.1 squares wide each) + 5 gaps = 8.6 squares wide. --- */
#hud {
  container-type: inline-size; display: block; padding: 0; gap: 0; flex-wrap: nowrap;
  padding: 0 4px; overflow: hidden;
}
#hud .hud-row {
  --s: min(calc(100cqw / 8.65), calc(36px + 3vw));
  display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center;
  gap: calc(var(--s) * .08); padding: calc(var(--s) * .12) 0;
}
#hud .hud-sq, #hud .hud-big {
  flex: none; height: var(--s); min-height: 0; margin: 0; padding: 0; border-radius: 0;
  border: max(2px, calc(var(--s) * .055)) solid; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font: inherit; position: static; box-shadow: none; transform: none;
}
#hud .hud-sq { width: var(--s); gap: calc(var(--s) * .07); cursor: pointer; }
#hud .hud-sq:active { transform: translateY(2px); }
#hud .hud-big { width: calc(var(--s) * 2.1); gap: calc(var(--s) * .06); border-color: var(--teal); }
#hud .hud-ico { width: calc(var(--s) * .4); height: calc(var(--s) * .4); display: block; flex: none; }
#hud .hud-lab { font: 900 calc(var(--s) * .185)/1 var(--round); letter-spacing: .02em; white-space: nowrap; margin: 0; }
#hud .hud-big .hud-lab { font-size: calc(var(--s) * .19); color: #9cc9c2; }
#hud .hud-num { font: calc(var(--s) * .44)/1 var(--pixel); color: var(--cream); white-space: nowrap; }
#hud .hud-timer { color: #9cc9c2; border-color: #9cc9c2; }
#hud .hud-pause { color: var(--cream); border-color: #5b7377; }
#hud .hud-quiet { color: var(--cream); border-color: #9cc9c2; }
#hud .hud-parent { color: #8aa6a2; border-color: #34494e; background: transparent; }

/* --- THE ROOM'S NAME: small, on the frame's top-left corner (app.js makes it smaller if furniture is close) --- */
#screen .room-name { left: 6px; top: 6px; padding: .5em .6em .4em; border-width: 2px; font-size: clamp(8px, 1.2vmin, 12px); }
@media (max-aspect-ratio: 1249/1000) { #screen .room-name { font-size: 8px; } }
#roomCanvas { display: block; }

/* --- PHONE TURNING: the task area hides at once while the phone turns, then fades back in (opacity only, nothing slides) --- */
#stage { transition: opacity .3s ease; }
body.turning #stage { opacity: 0; transition: none; }

/* =========================================================
   ROUND 8 (Oct 28, v23): the MyTivity logo strip, and the same top on every kid screen:
   [logo] → [control bar] → [main content] → [big action button]
   ========================================================= */

/* --- THE LOGO STRIP: slim, centered, not tappable. Same height and spot on every screen; grows on bigger screens --- */
.logo-strip {
  --logo-h: clamp(40px, 6vmin, 72px);
  flex: none; height: var(--logo-h); display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden; margin-bottom: calc(var(--logo-h) * -.12);
}
.logo-word {
  font: calc(var(--logo-h) * .5)/1 var(--pixel); letter-spacing: .04em; white-space: nowrap;
  color: var(--yellow); text-shadow: max(3px, .1em) max(3px, .1em) 0 var(--orange-dark);   /* The greeting's chunky shadow */
}

/* --- The control bar sits right under the logo on every screen (the welcome card too) --- */
body.home-on #hud { display: block; }
body.home-on #timerBtn, body.home-on #pauseBtn { opacity: .35; filter: grayscale(1); }   /* Gray on the welcome card, same place */
body.home-on #timerBtn:active, body.home-on #pauseBtn:active { transform: none; }

/* --- THE WELCOME SCREEN: the card fills the middle; SHOP is full width where I'M DONE is on the task screen
   (same height, same gap to the bottom as I'M DONE + its note line) --- */
body.home-on { height: 100vh; height: 100dvh; overflow: hidden; }
#home {
  --done-h: clamp(64px, 11vh, 104px); --note-h: clamp(24px, 4vh, 38px); --zone-gap: clamp(8px, 1.6vmin, 16px);
  flex: 1 1 0; min-height: 0; width: 100%; margin: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--done-h) var(--note-h);
  gap: 0; justify-content: stretch;
}
body:not(.home-on) #home { display: none; }                  /* (the task screen: no welcome card behind it) */
#home .gm-card { width: 100%; margin: 0 0 var(--zone-gap); min-height: 0; overflow: hidden; justify-content: center; }
#home .home-shop { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 .4em; font-size: clamp(18px, 4vmin, 40px); }
@media (max-aspect-ratio: 1249/1000) {
  #home { --done-h: clamp(64px, 9vh, 84px); --note-h: clamp(22px, 3vh, 30px); --zone-gap: 8px; }
  #home .home-shop { font-size: clamp(18px, 5.6vw, 28px); }
  #home .gm-card { padding: clamp(14px, 4vw, 40px); gap: clamp(10px, 2.4vmin, 24px); }
}

/* --- Kid pop-ups (SHOP, CONGRATULATIONS, the party, reminders) start under the logo + control bar,
   so the top looks the same on every screen. (Grown-up screens: PIN pad and PARENT still cover everything.) --- */
#shopOverlay, #handOverlay, #celebrate, #noticeOverlay { top: var(--top-h, 0px); }

/* --- Gray buttons let taps through (app.js plays a soft "not yet" for them) --- */
#home button:disabled, #talk button:disabled, #shopOverlay button:disabled, #handOverlay button:disabled { pointer-events: none; }

/* --- PARENT > PLAYER > SOUNDS --- */
.sound-vol-row { display: flex; align-items: center; gap: 12px; }
.sound-vol-row input[type=range] { flex: 1; min-width: 0; height: 44px; accent-color: var(--teal); }
#setVolumeNum { font: 900 16px var(--round); min-width: 3.2em; text-align: right; }
.sound-picker { display: grid; gap: 8px; }
.sound-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 56px; align-items: center; gap: 8px; }
.sound-name { font: 800 15px/1.25 var(--round); color: var(--ink); }
.sound-row .sound-pick { width: 100%; min-width: 0; }
.sound-row .sound-play { min-height: 44px; padding: 0; font-size: 16px; }
@media (max-width: 560px) {
  .sound-row { grid-template-columns: minmax(0, 1fr) 56px; }
  .sound-row .sound-name { grid-column: 1 / -1; }
}

/* --- Long words never break in the middle ("CONGRATULAT / IONS"): the big hello and the CONGRATULATIONS title
   shrink a little on narrow screens so "CONGRATULATIONS," (16 letters) fits on one line --- */
#home .gm-card, #handOverlay .hand-panel { container-type: inline-size; }
#home .gm-hello { font-size: min(clamp(18px, 5vmin, 52px), calc(100cqw / 17)); overflow-wrap: normal; word-break: normal; }
#handOverlay .hand-panel .congrats-title { font-size: min(clamp(16px, 3.4vmin, 30px), calc(100cqw / 17)); overflow-wrap: normal; word-break: normal; }
@media (max-width: 700px) {
  #handOverlay .hand-panel .congrats-title { font-size: min(clamp(22px, 7vw, 32px), calc(100cqw / 17)); }
}


/* =========================================================
   MYTIVITY PRO: the Pro tab, locks on the extras (Parent only), the limit card, History by day
   ========================================================= */
.pro-status { font: 900 24px/1.2 var(--round); color: var(--ink); background: #f3e6cf; border: 3px solid var(--tan); border-radius: 12px;
  padding: 14px 16px; text-align: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.pro-status.on { background: #d8f0d2; border-color: #4f9a48; color: #1e5a1a; }
.pro-code-label { display: grid; gap: 6px; }
#proCode { width: 100%; min-height: 120px; font: 800 18px/1.5 ui-monospace, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase;
  padding: 12px; border: 3px solid var(--tan); border-radius: 10px; resize: vertical; box-sizing: border-box; }
.pro-count { font: 800 14px var(--round); color: #6b5a48; min-height: 1.2em; }
.pro-msg { font: 800 16px/1.4 var(--round); color: var(--ink); min-height: 1.4em; }
.pro-get { text-decoration: none; display: inline-grid; place-items: center; }
.pro-test { display: grid; gap: 8px; border-top: 2px dashed var(--tan); padding-top: 10px; }
.pro-locked { position: relative; }
.pro-locked > :not(.pro-tag) { opacity: .55; }
.pro-tag { position: absolute; top: -9px; right: 8px; font: 900 12px/1 var(--round); color: #fff; background: #6b4fa0; border-radius: 999px;
  padding: 4px 8px; pointer-events: none; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.pro-note { background: #efe6f8; border-radius: 8px; padding: 8px 10px; }
.limit-overlay { z-index: 9000; }
.limit-panel { max-width: 420px; display: grid; gap: 14px; text-align: center; padding: 22px; }
.limit-lock { font-size: 40px; }
.limit-text { margin: 0; font: 900 20px/1.4 var(--round); color: var(--ink); }
.limit-actions { justify-content: center; }
.history-list .history-day { border: 0; padding: 10px 0 2px; font: 900 15px var(--round); color: #6b4fa0; text-transform: uppercase; letter-spacing: .04em; }
.history-list .history-item { display: grid; grid-template-columns: 74px 1fr; column-gap: 8px; }
.history-time { color: #8a7a66; grid-row: span 2; }
.history-kind { font-weight: 900; }
.history-note { color: #4a3d2e; }
.history-note:empty { display: none; }

/* =========================================================
   FIRST-OPEN SETUP (6 screens, one question each). Fills the screen, never scrolls.
   ========================================================= */
.onboard {
  position: fixed; inset: 0; z-index: 9500;                 /* Over everything (the showroom bar stays on top) */
  background: var(--bg); color: var(--cream);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--showroom-bar-h, 0px) + clamp(10px, 2vh, 24px)) max(16px, env(safe-area-inset-right)) max(clamp(14px, 3vh, 36px), env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow: hidden;
}
.ob-top { width: min(100%, 640px); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; min-height: 44px; }
.ob-back, .ob-top-gap { width: 7.5em; flex: none; }
.ob-back { padding: .8em .6em; white-space: nowrap; }
.ob-back.ob-hide { visibility: hidden; }
.ob-dots { display: flex; gap: clamp(10px, 2vmin, 16px); }
.ob-dots.ob-hide { visibility: hidden; }
.ob-dots span { width: clamp(12px, 2vmin, 18px); height: clamp(12px, 2vmin, 18px); border: 3px solid var(--cream); }
.ob-dots span.on { background: var(--orange); border-color: var(--orange); }
.ob-dots span.now { background: var(--yellow); border-color: var(--yellow); }

.ob-step { flex: 1 1 0; min-height: 0; width: min(100%, 640px); display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 2vh, 20px); }
.ob-mid { flex: 1 1 0; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.8vh, 18px); text-align: center; }
.ob-next { flex: none; width: min(100%, 15em); font-size: clamp(14px, 2.6vh, 26px); }
.ob-skip { flex: none; background: none; border: 0; color: #9fb8b3; font: 700 clamp(14px, 2vh, 18px)/1 var(--round); text-decoration: underline; padding: 6px 12px; }

.ob-icon { width: clamp(90px, 22vh, 220px); height: auto; image-rendering: pixelated; }
.ob-logo { font: clamp(24px, min(6vh, 9vw), 64px)/1 var(--pixel); color: var(--yellow); text-shadow: max(3px, .1em) max(3px, .1em) 0 var(--orange-dark); letter-spacing: .04em; }
.ob-q { margin: 0; font: clamp(16px, min(3.6vh, 6vw), 34px)/1.35 var(--pixel); color: var(--yellow); text-shadow: 3px 3px 0 var(--orange-dark); }
.ob-lead { margin: 0; font: 800 clamp(18px, 3vh, 30px)/1.35 var(--round); max-width: 22em; }
.ob-lead-small { font-size: clamp(16px, 2.4vh, 24px); }
.ob-small { margin: 0; font: 700 clamp(14px, 2vh, 18px)/1.4 var(--round); color: #b9d0cb; }
.ob-label { font: clamp(11px, 1.8vh, 16px)/1.4 var(--pixel); color: var(--cream); margin-top: clamp(4px, 1vh, 12px); }
.ob-input {
  width: min(100%, 14em); font: 900 clamp(22px, 4vh, 36px)/1.2 var(--round); text-align: center;
  padding: .35em .5em; border: 4px solid var(--ink); background: var(--cream); color: var(--ink); border-radius: 0;
  box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 6px var(--ink);
}
.ob-input:focus { outline: 4px solid var(--orange); outline-offset: 2px; }

/* --- Dot colors: big round swatches --- */
.ob-colors { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2vmin, 18px); max-width: 30em; }
.ob-color {
  width: clamp(44px, 7.5vh, 70px); height: clamp(44px, 7.5vh, 70px); border-radius: 50%;
  border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink); padding: 0;
}
.ob-color.on { outline: 5px solid var(--cream); outline-offset: 3px; }

/* --- Routine cards --- */
.ob-routines { width: 100%; display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 16px); }
@media (min-aspect-ratio: 5/4) { .ob-routines { flex-direction: row; } .ob-routines > * { flex: 1 1 0; } .onboard .ob-step[data-step="3"] { width: min(100%, 960px); } }
.ob-routine {
  text-align: left; background: var(--cream); color: var(--ink); border: 4px solid var(--ink); border-radius: 0;
  box-shadow: 0 4px 0 var(--ink); padding: clamp(10px, 1.8vh, 18px) clamp(12px, 2vmin, 20px);
  display: flex; flex-direction: column; gap: clamp(4px, .8vh, 10px);
}
.ob-routine.on { background: var(--yellow); box-shadow: inset 0 0 0 4px var(--orange), 0 4px 0 var(--ink); }
.ob-routine-name { font: clamp(13px, 2.2vh, 20px)/1.2 var(--pixel); }
.ob-routine-name::before { content: "○ "; }
.ob-routine.on .ob-routine-name::before { content: "● "; }
.ob-routine-tasks { font: 700 clamp(13px, 1.9vh, 18px)/1.35 var(--round); }

/* --- PIN keypad (in order, not scrambled: this is the grown-up picking it) --- */
.ob-pin-dots span { border-color: var(--cream); width: clamp(18px, 3vh, 26px); height: clamp(18px, 3vh, 26px); }
.ob-pin-dots span.on { background: var(--orange); border-color: var(--orange); }
.ob-pin-msg { font-family: var(--round); font-weight: 800; font-size: clamp(14px, 2vh, 18px); min-height: 1.4em; margin: 0; }
.ob-pin-msg.ok { color: #8fd18f; }
.ob-keypad { width: min(100%, 20em); gap: clamp(6px, 1.2vh, 12px); }
.ob-keypad .key { padding: 0; height: clamp(44px, 7.4vh, 80px); font-size: clamp(18px, 3.4vh, 30px); }
.ob-keypad .key-small { font-size: clamp(10px, 1.7vh, 15px); }

/* --- Try it / done --- */
.ob-how { margin: 0; padding-left: 1.6em; text-align: left; font: 700 clamp(15px, 2.3vh, 22px)/1.45 var(--round); max-width: 26em; }
.ob-how b { color: var(--yellow); }
.ob-check { width: clamp(64px, 12vh, 120px); height: clamp(64px, 12vh, 120px); display: grid; place-items: center; background: var(--teal); border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font: clamp(28px, 6vh, 60px)/1 var(--pixel); color: var(--cream); }
.ob-tip { margin: 0; background: var(--cream); color: var(--ink); border: 4px solid var(--ink); box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 6px var(--ink); padding: clamp(12px, 2vh, 20px) clamp(14px, 2.4vmin, 24px); font: 800 clamp(15px, 2.2vh, 21px)/1.4 var(--round); max-width: 26em; }

/* =========================================================
   FIRST-OPEN SETUP v2: more screens (birth year, Is this you?, block, tasks, steps, rewards, prices, PIN choice),
   the quick tour, WIPE EVERYTHING, the TIMER lock (Free) and PARENT's 2-second press (no PIN)
   ========================================================= */
.onboard .ob-step.ob-wide { width: min(100%, 960px); }
.ob-dots { gap: clamp(5px, 1.2vmin, 12px); }
.ob-dots span { width: clamp(8px, 1.6vmin, 16px); height: clamp(8px, 1.6vmin, 16px); border-width: 2px; }
.ob-q { max-width: 30em; }
.ob-hl { color: var(--cream); }

/* --- Birth year: a scrolling list (only the "grown-up passed" flag is saved) --- */
.ob-wheel {
  flex: none; width: min(100%, 12em); height: clamp(150px, 30vh, 320px); overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; position: relative; display: flex; flex-direction: column; touch-action: pan-y;
  background: var(--cream); border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.ob-year { flex: none; scroll-snap-align: center; background: none; border: 0; border-bottom: 2px solid var(--tan); border-radius: 0; color: var(--ink); font: 900 clamp(20px, 3.4vh, 32px)/1 var(--round); padding: clamp(8px, 1.4vh, 14px) 0; }
.ob-year.on { background: var(--yellow); box-shadow: inset 0 0 0 4px var(--orange); }
.ob-stop { margin: 0; background: var(--red); color: var(--cream); border: 4px solid var(--ink); padding: .5em .9em; font: 900 clamp(16px, 2.4vh, 22px)/1.3 var(--round); }

/* --- Cards: tick any (Is this you?), pick one (block, steps, PIN) --- */
.ob-cards { width: 100%; display: grid; grid-template-columns: 1fr; gap: clamp(8px, 1.4vh, 14px); }
@media (min-aspect-ratio: 5/4) { .ob-cards { grid-template-columns: 1fr 1fr; } .ob-cards-3 { grid-template-columns: 1fr 1fr 1fr; } }
.ob-card {
  text-align: left; background: var(--cream); color: var(--ink); border: 4px solid var(--ink); border-radius: 0; box-shadow: 0 4px 0 var(--ink);
  padding: clamp(10px, 1.6vh, 18px) clamp(12px, 2vmin, 20px); display: flex; flex-direction: column; gap: clamp(4px, .8vh, 10px); min-height: 48px;
}
.ob-card.on { background: var(--yellow); box-shadow: inset 0 0 0 4px var(--orange), 0 4px 0 var(--ink); }
.ob-card-name { font: 900 clamp(16px, 2.3vh, 24px)/1.3 var(--round); }
.ob-radio .ob-card-name, .ob-pick .ob-card-name { font: clamp(13px, 2.2vh, 20px)/1.25 var(--pixel); }
.ob-card-sub { font: 700 clamp(13px, 1.9vh, 18px)/1.35 var(--round); }
.ob-radio .ob-card-name::before { content: "○ "; }
.ob-radio.on .ob-card-name::before { content: "● "; }
.ob-tick { flex-direction: row; align-items: center; gap: .8em; }
.ob-tick::before { content: ""; flex: none; width: clamp(18px, 2.6vh, 26px); height: clamp(18px, 2.6vh, 26px); border: 3px solid var(--ink); background: #fff; }
.ob-tick.on::before { background: var(--orange); box-shadow: inset 0 0 0 3px #fff; }
.ob-none { background: #d6e3e0; }
.ob-pick { min-height: clamp(96px, 17vh, 190px); justify-content: center; }
.ob-badge { align-self: flex-start; background: var(--teal); color: var(--cream); font: clamp(9px, 1.4vh, 12px)/1 var(--pixel); padding: .45em .6em; }

/* --- Chips: tasks and rewards (tap to add, tap again to take off) --- */
.ob-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1.2vh, 12px); width: 100%; }
.ob-chip {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; background: var(--cream); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 0; box-shadow: 0 3px 0 var(--ink);
  padding: clamp(6px, 1.1vh, 12px) clamp(10px, 1.6vmin, 16px); font: 800 clamp(14px, 2.1vh, 20px)/1.2 var(--round);
}
.ob-chip-num { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; background: var(--tan); font: clamp(10px, 1.5vh, 14px)/1 var(--pixel); }
.ob-chip.on { background: var(--yellow); box-shadow: inset 0 0 0 3px var(--orange), 0 3px 0 var(--ink); }
.ob-chip.on .ob-chip-num { background: var(--orange); color: var(--cream); }
.ob-chip.full { opacity: .5; }
.ob-type { display: flex; gap: 10px; width: min(100%, 26em); }
.ob-type-in { flex: 1; min-width: 0; min-height: 44px; font: 800 clamp(16px, 2.2vh, 22px)/1.2 var(--round); padding: .45em .7em; border: 3px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); }
.ob-type-in:focus { outline: 4px solid var(--orange); outline-offset: 1px; }
.ob-type .btn { min-height: 44px; }
.ob-warn { color: var(--yellow); }
.ob-warn:empty { display: none; }

/* --- Steps for one task --- */
.ob-steps { display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 12px); width: min(100%, 30em); }
.ob-step-row { display: flex; align-items: center; gap: 10px; }
.ob-step-num { flex: none; width: 1.6em; font: clamp(12px, 1.8vh, 16px)/1 var(--pixel); color: var(--yellow); }
.ob-step-del { flex: none; min-width: 44px; min-height: 44px; padding: 0; }

/* --- Prices: - N tasks + --- */
.ob-prices { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 14px); width: min(100%, 32em); }
.ob-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--cream); color: var(--ink); border: 4px solid var(--ink); padding: clamp(8px, 1.4vh, 14px) clamp(10px, 2vmin, 18px); }
.ob-price-name { font: 900 clamp(15px, 2.2vh, 22px)/1.25 var(--round); text-align: left; }
.ob-price-pick { display: flex; align-items: center; gap: 8px; flex: none; }
.ob-price-num { font: 900 clamp(15px, 2.2vh, 22px)/1 var(--round); min-width: 4.8em; text-align: center; }
.ob-price-pick .btn { min-width: 48px; min-height: 48px; padding: 0; font-size: 22px; }

/* --- Quick tour: a spotlight on the real button + a tip card with an arrow --- */
.ob-tour { position: fixed; inset: 0; z-index: 9450; }
.ob-spot { position: absolute; border: 4px solid var(--yellow); box-shadow: 0 0 0 9999px rgba(8, 12, 14, .74); pointer-events: none; }
.ob-tour-card {
  position: absolute; width: min(calc(100vw - 24px), 26em); background: var(--cream); color: var(--ink); border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
  padding: clamp(14px, 2.2vh, 22px); display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 14px);
}
.ob-arrow { position: absolute; width: 0; height: 0; border: 16px solid transparent; transform: translateX(-50%); }
.ob-up .ob-arrow { top: -36px; border-bottom-color: var(--yellow); }
.ob-tour-card:not(.ob-up) .ob-arrow { bottom: -36px; border-top-color: var(--yellow); }
.ob-tour-title { font: clamp(12px, 2vh, 18px)/1.35 var(--pixel); color: var(--teal-dark); }
.ob-tour-title.ob-locked::after { content: "  🔒 PRO"; color: var(--orange-dark); }
.ob-tour-text { margin: 0; font: 800 clamp(16px, 2.4vh, 22px)/1.4 var(--round); }
.ob-tour-btns { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ob-tour-btns .btn { min-width: 8em; margin-left: auto; }
.ob-tour .ob-skip { color: var(--teal-dark); }

/* --- TIMER on Free: gray with a small lock (the bar keeps its shape). PARENT with no PIN: a 2-second press fills a bar --- */
#hud .hud-timer, #hud .hud-parent { position: relative; }
.hud-lock {
  display: none; position: absolute; top: 4px; right: 4px; width: calc(var(--s) * .26); height: calc(var(--s) * .29);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23241a12' d='M2 0h4v1H2zM1 1h1v3H1zM6 1h1v3H6zM0 4h8v5H0z'/%3E%3Cpath fill='%23f4c542' d='M1 5h6v3H1z'/%3E%3Cpath fill='%23241a12' d='M3 6h2v1H3z'/%3E%3C/svg%3E");
}
#hud .hud-timer.hud-locked .hud-lock { display: block; }
#hud .hud-parent { overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#hud .hud-parent::after { content: ""; position: absolute; left: 0; bottom: 0; height: 6px; width: 0; background: var(--yellow); }
#hud .hud-parent.holding::after { width: 100%; transition: width 2s linear; }

/* --- Parent: the timer lock note, no-PIN switch, reminder ring choice --- */
.pro-note { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 0; font: 800 15px/1.3 var(--round); }
.set-check { display: flex; align-items: flex-start; gap: 8px; }
.rem-ring { font: inherit; max-width: 100%; }

/* --- WIPE EVERYTHING (testing) --- */
.wipe-overlay { z-index: 9800; }
.wipe-panel { width: min(560px, 100%); display: grid; justify-items: center; gap: 14px; text-align: center; padding: clamp(20px, 4vmin, 36px); }
.wipe-title { margin: 0; font: clamp(16px, 3vmin, 26px)/1.3 var(--pixel); color: var(--red); }
.wipe-text { margin: 0; font: 700 clamp(15px, 2.2vmin, 19px)/1.45 var(--round); color: var(--ink); }
.wipe-label { font: 800 16px/1.3 var(--round); color: var(--ink); }
.wipe-input { width: min(100%, 8em); }
.wipe-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
#wipeGo:not(:disabled) { background: var(--red); color: var(--cream); }
.reminder-row { grid-template-columns: 120px 1fr auto auto auto; }
@media (max-width: 900px) { .reminder-row { grid-template-columns: 1fr auto auto; } .reminder-row .rem-text { grid-column: 1 / -1; grid-row: 2; } .reminder-row .rem-ring { grid-column: 1 / -1; grid-row: 3; } }
/* --- Free: TIMER is gray everywhere (in a task too); its little lock stays bright --- */
body #hud #timerBtn.hud-locked { opacity: 1; filter: none; border-color: #4a5a5e; }
#hud #timerBtn.hud-locked > :not(.hud-lock) { opacity: .35; filter: grayscale(1); }
#hud #timerBtn.hud-locked:active { transform: none; }

/* =========================================================
   Oct 29 (2): remote approval, PARENT never looks locked, the one-screen shop
   ========================================================= */
/* --- PARENT: always works, so it never looks gray (same cream as QUIET, its own quiet border) --- */
#hud .hud-parent { color: var(--cream); border-color: #6f8d89; background: #000; }
/* --- Quiet Time starts under the bar too, so PARENT can always be reached. Settings sit above Quiet Time and the
   reminders' cards (90); the PIN pad above settings --- */
#quietOverlay { top: var(--top-h, 0px); }
#settingsOverlay { z-index: 92; }
.pin-overlay { z-index: 95; }

/* --- Waiting for the parent's phone: USE PIN for a grown-up who is right there --- */
.remote-pin { justify-self: center; margin-top: 6px; min-height: 48px; padding: 0 18px; font-size: 12px; }
.remote-pin[hidden] { display: none; }

/* --- PARENT > PHONE --- */
.phone-link, .phone-linked { display: grid; gap: 12px; justify-items: start; }
.phone-link[hidden], .phone-linked[hidden] { display: none; }
.pair-code { font: clamp(34px, 7vmin, 60px)/1.1 var(--pixel); letter-spacing: .08em; color: var(--ink); background: var(--cream); border: 4px solid var(--ink); padding: 14px 18px; }
.pair-code[hidden] { display: none; }
.phone-ok { font: 900 18px/1.35 var(--round); color: var(--teal-dark); margin: 0; }

/* --- THE SHOP fits one screen: header row, the prize grid (the only part that scrolls), a slim goal, the cart bar --- */
#shopOverlay .shop-panel {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  width: min(1180px, 100%); height: 100%; max-height: 100%; overflow: hidden; padding-bottom: 10px;
}
#shopOverlay .shop-head { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px; flex: none; }
#shopOverlay .shop-head .panel-title { margin: 0; font-size: clamp(12px, 2.4vmin, 22px); text-align: left; white-space: nowrap; }
#shopOverlay .shop-head .shop-have { margin-left: auto; font-size: clamp(10px, 1.9vmin, 16px); white-space: nowrap; text-align: right; }
#shopOverlay .shop-head .shop-close { flex: none; min-height: 44px; padding: 0 14px; font-size: 12px; justify-self: auto; }
#shopOverlay .shop-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#shopOverlay .shop-main[hidden] { display: none; }
#shopOverlay .shop-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start;
  gap: 10px; padding: 10px 10px 6px 4px;
}
@media (min-width: 700px) { #shopOverlay .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
#shopOverlay .shop-tile { min-height: 0; aspect-ratio: auto; padding: 10px 6px 8px; gap: 5px; }
#shopOverlay .tile-icon { width: clamp(34px, 6vmin, 54px); height: clamp(34px, 6vmin, 54px); font-size: clamp(16px, 3vmin, 26px); border-width: 3px; }
#shopOverlay .tile-name {
  font-size: clamp(13px, 1.9vmin, 18px); line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
#shopOverlay .tile-price { font-size: clamp(8px, 1.3vmin, 12px); }
#shopOverlay .tile-meta { font-size: clamp(10px, 1.4vmin, 13px); }
#shopOverlay .shop-tile.cant .tile-off { font-size: 11px; }
#shopOverlay .tile-qty { top: -8px; right: -8px; min-width: 34px; padding: 6px 4px; font-size: 10px; }
#shopOverlay .shop-goal { flex: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border-top: 3px dashed var(--tan); padding-top: 8px; }
#shopOverlay .shop-goal[hidden] { display: none; }
#shopOverlay .shop-name { font-size: clamp(9px, 1.6vmin, 14px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
#shopOverlay .shop-count { font-size: clamp(9px, 1.5vmin, 13px); white-space: nowrap; }
#shopOverlay .shop-bar { height: 16px; }
#shopOverlay .shop-note { flex: none; font-size: 16px; }
#shopOverlay .shop-note:empty { display: none; }
/* --- The cart bar: CART: 2 items · 3 tickets · You have 4, and a big CHECKOUT --- */
#shopOverlay .cart-bar { flex: none; display: flex; gap: 10px; align-items: stretch; }
#shopOverlay.shop-locked .cart-bar { display: none; }
#shopOverlay .cart-bar-btn {
  flex: 1 1 auto; min-width: 0; min-height: 64px; padding: 6px 12px; text-align: left; cursor: pointer;
  font: 900 clamp(14px, 2.1vmin, 20px)/1.25 var(--round); color: var(--ink);
  background: var(--cream); border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
}
#shopOverlay .cart-bar-btn:active { transform: translateY(3px); box-shadow: none; }
#shopOverlay .cart-bar.cart-short .cart-bar-btn { color: var(--orange-dark); }
#shopOverlay .cart-bar .cart-checkout { flex: none; width: auto; min-height: 64px; padding: 0 20px; font-size: clamp(14px, 2.3vmin, 22px); }
/* --- The cart pop-up: fits the screen; only the list scrolls --- */
.cart-pop { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 10px; background: rgba(20, 14, 8, .55); }
.cart-pop[hidden] { display: none; }
.cart-pop-panel {
  width: min(520px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  background: var(--cream); border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); padding: 14px;
}
.cart-pop-panel .cart-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.cart-pop-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; flex: none; }
.cart-pop-btns .btn { min-height: 60px; }
@media (max-width: 699px) {
  #shopOverlay .shop-panel { padding: 10px 10px 8px; }
  #shopOverlay .cart-bar-btn { font-size: 14px; padding: 4px 10px; }
  #shopOverlay .cart-bar .cart-checkout { padding: 0 12px; font-size: 13px; }
  #shopOverlay .shop-goal { grid-template-columns: 1fr auto; }
  #shopOverlay .shop-goal .shop-bar { grid-column: 1 / -1; grid-row: 2; height: 12px; }
}
@media (max-width: 430px) {
  #shopOverlay .shop-head { gap: 6px; }
  #shopOverlay .shop-head .panel-title { font-size: 10px; }
  #shopOverlay .shop-head .shop-have { font-size: 9px; }
  #shopOverlay .shop-head .shop-close { padding: 0 10px; font-size: 10px; min-height: 44px; }
}
/* --- USE PIN sits just above I'M DONE, on the right (next to the task timer if one is showing) --- */
#talk > #remotePinBtn { grid-row: 4; justify-self: end; align-self: end; margin: 0 0 var(--zone-gap); }