/* The pop scene (pop-mode.js): a header with the title, bumps left, the sound switch and "New face"; the stage with
   the studio room (backdrop canvas) and the face canvas on top; the hint line; and the "all clear" card at the end.
   Fills its container. Portrait and desktop: header, stage and hint stacked. A phone held sideways (landscape, low
   height): the stage fills everything and a smaller header and the hint float over the room at the sides, so the face
   stays big (SPEC D10). The face and bumps are drawn on canvas. Every button is at least 44 px for fingers. */

.pop-game {
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
  background: #5c6857; color: #102a28; font-family: system-ui, sans-serif;
}
.pop-head {
  flex: none; display: flex; align-items: center; gap: 8px; position: relative; z-index: 2;
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px 14px; background: rgba(16, 42, 40, 0.88); color: #fff;
}
.pop-titles { flex: 1; min-width: 0; }
.pop-title { margin: 0; font-weight: 800; font-size: 1.05rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-count { margin: 2px 0 0; font-size: 0.85rem; color: #f3d9cf; min-height: 1.3em; white-space: nowrap; }

.pop-btn {
  flex: none; min-width: 44px; min-height: 44px; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 0.92rem;
  font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); cursor: pointer;
}
.pop-btn:hover { background: rgba(255, 255, 255, 0.24); }
.pop-btn:focus-visible, .pop-canvas:focus-visible { outline: 3px solid #ffd166; outline-offset: -3px; }
.pop-sound { display: grid; place-items: center; width: 44px; padding: 0; }
.pop-sound svg { width: 24px; height: 24px; }
.pop-sound--off { color: #c9b3ab; }

/* The stage: the room canvas and the face canvas lie on top of each other, both the stage's full size. */
.pop-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.pop-backdrop, .pop-canvas { position: absolute; left: 0; top: 0; display: block; }
.pop-backdrop { pointer-events: none; }
.pop-canvas {
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* no blue flash over the face on Android after each press */
}
.pop-btn { -webkit-tap-highlight-color: transparent; }

/* The tool bar (T1.2): a row of tool buttons under the face; the one in hand is lit. The warm cloth's button has a
   thin warm meter along its bottom edge. */
.pop-tools {
  flex: none; position: relative; z-index: 2; display: flex; justify-content: center; gap: 4px;
  padding: 6px max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); background: rgba(16, 42, 40, 0.88);
}
.pop-tools[hidden] { display: none; }
.pop-tool {
  position: relative; flex: 1 1 0; min-width: 44px; max-width: 76px; min-height: 54px; padding: 4px 2px 6px;
  display: grid; justify-items: center; align-content: center; gap: 2px; border-radius: 12px; font: inherit; color: #fff;
  background: rgba(255, 255, 255, 0.1); border: 2px solid transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pop-tool:hover { background: rgba(255, 255, 255, 0.2); }
.pop-tool[aria-pressed="true"] { color: #062b2b; background: #5eead4; border-color: #fff; }
.pop-tool:focus-visible { outline: 3px solid #ffd166; outline-offset: 1px; }
.pop-tool svg { width: 26px; height: 26px; }
.pop-tool__name { font-size: 0.66rem; font-weight: 700; line-height: 1.05; text-align: center; }
.pop-tool__meter { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.pop-tool__fill { display: block; height: 100%; background: #ff8a65; transform: scaleX(0); transform-origin: left; }
.pop-tool--warm .pop-tool__meter { height: 5px; }

/* "Ow!" bubble over a bump that got the wrong tool (pop-mode.js puts it at the bump and removes it after 0.9 s). */
.pop-ow {
  position: absolute; z-index: 2; margin: 0; padding: 2px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  font-weight: 900; font-size: 1.35rem; color: #fff; background: #ff5c8a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -170%); animation: pop-ow 0.9s ease-out forwards;
}
@keyframes pop-ow {
  0% { opacity: 0; transform: translate(-50%, -120%) scale(0.6); }
  20% { opacity: 1; transform: translate(-50%, -170%) scale(1.12); }
  70% { opacity: 1; transform: translate(-50%, -190%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -220%) scale(1); }
}
/* Reduced motion (the phone's setting, or the game's own switch: pop-mode.js puts .pop-still on the scene): the
   bubble only fades. */
@keyframes pop-ow-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.pop-still .pop-ow { animation: pop-ow-fade 0.9s linear forwards; }
@media (prefers-reduced-motion: reduce) {
  .pop-ow { animation: pop-ow-fade 0.9s linear forwards; }
}

.pop-foot { flex: none; position: relative; z-index: 2; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); background: rgba(16, 42, 40, 0.88); color: #fff; }
.pop-foot[hidden] { display: none; }
.pop-hint { margin: 0; font-size: 0.9rem; line-height: 1.3; min-height: 2.6em; }
/* Field guide (T6.5): the "?" button in the header, and a first-time hint ("New: ...!") marked in yellow; it flashes
   once when it comes up (pop-mode.js adds the flash only without reduced motion). Taps go through as usual. */
.pop-guide { display: grid; place-items: center; width: 44px; padding: 0; font-size: 1.25rem; font-weight: 900; }
.pop-guide[hidden] { display: none; }
.pop-hint--new { color: #ffe08a; font-weight: 800; }
.pop-hint--flash { animation: pop-hint-flash 0.9s ease-out 1; transform-origin: left center; }
@keyframes pop-hint-flash { 0% { transform: scale(1); } 25% { transform: scale(1.04); color: #fff; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pop-hint--flash { animation: none; } }
.pop-still .pop-hint--flash { animation: none; }

.pop-done {
  position: absolute; z-index: 3; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); max-width: 420px; margin: 0 auto;
  display: grid; gap: 10px; padding: 16px; text-align: center; border-radius: 20px; background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); color: #102a28;
}
.pop-done[hidden] { display: none; }
.pop-done__text { margin: 0; font-size: 1.25rem; font-weight: 800; }
/* The irritation meter beside the counter line (T1.2b): a small bar that turns hot pink when nearly full. */
.pop-countline { display: flex; align-items: center; gap: 8px; }
.pop-irr { flex: none; position: relative; width: 56px; height: 7px; margin-top: 2px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.pop-irr__fill { display: block; height: 100%; background: #ffb07a; transform: scaleX(0); transform-origin: left; transition: transform 0.2s linear, background 0.2s; }
.pop-irr--high .pop-irr__fill { background: #ff4f7b; }
/* The customer's twist (T8.3): a small lilac label beside the meter; a giggle bubble is a yellow "Hehehe!". */
.pop-twist { flex: none; padding: 0 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; line-height: 1.5; color: #2b1a40; background: #d9c6ff; white-space: nowrap; }
.pop-twist[hidden] { display: none; }
.pop-twist--boss { color: #2a211d; background: linear-gradient(160deg, #fff4b8, #ffd23f); box-shadow: inset 0 0 0 1.5px #2a211d; } /* a boss or event (T8.4) */
.pop-giggle { background: #ffd23f; color: #3a2a00; }
/* The customer's request (T3.1b): a small speech-bubble pill under the counter line; green when done, grey and
   struck through when missed. A hurry request shows its seconds left in a little badge. */
.pop-req {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 4px 0 0; padding: 3px 10px; border-radius: 12px;
  font-size: 0.78rem; line-height: 1.25; color: #102a28; background: #fff3c4; width: fit-content; max-width: 100%;
}
.pop-req[hidden] { display: none; }
.pop-req__text { font-weight: 700; }
.pop-req__time:empty, .pop-req__state:empty { display: none; }
.pop-req__time { font-weight: 800; font-variant-numeric: tabular-nums; padding: 0 6px; border-radius: 999px; background: #ffd166; }
.pop-req__state { font-weight: 900; }
.pop-req--done { background: #b9f6e4; }
.pop-req--done .pop-req__state::before { content: "\2713  "; }
.pop-req--missed { background: #e4dedb; color: #5b4f4a; }
.pop-req--missed .pop-req__text { text-decoration: line-through; }
/* The customer storms off (SPEC D15): the face huffs off to the side; with reduced motion it only fades. */
.pop-canvas--storm { pointer-events: none; animation: pop-storm 0.7s ease-in forwards; }
@keyframes pop-storm {
  0% { transform: none; opacity: 1; }
  25% { transform: translateX(-3%) rotate(-2deg); opacity: 1; }
  100% { transform: translateX(70%) rotate(6deg); opacity: 0; }
}
.pop-fail {
  position: absolute; z-index: 4; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); max-width: 380px; margin: 0 auto;
  display: grid; gap: 10px; padding: 18px; text-align: center; border-radius: 20px; background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); color: #102a28;
}
.pop-fail[hidden] { display: none; }
.pop-fail__title { margin: 0; font-size: 1.3rem; font-weight: 900; }
.pop-fail__text { margin: 0; font-size: 0.95rem; line-height: 1.35; }
.pop-fail .pop-btn { color: #102a28; border-color: #102a28; }
.pop-fail .pop-btn--main { border-color: #5eead4; }
/* Reduced motion (phone setting or .pop-still): the meter jumps, and a storm-off only fades. */
@keyframes pop-storm-fade { to { opacity: 0; } }
.pop-still .pop-irr__fill { transition: none; }
.pop-still .pop-canvas--storm { animation: pop-storm-fade 0.25s linear forwards; }
@media (prefers-reduced-motion: reduce) {
  .pop-irr__fill { transition: none; }
  .pop-canvas--storm { animation: pop-storm-fade 0.25s linear forwards; }
}
.pop-btn--main { color: #062b2b; background: #5eead4; border-color: #5eead4; }
.pop-btn--main:hover { background: #7ff0de; }

/* A phone held sideways: the room and face use the whole height; the header splits into a small title card at the
   top left and the buttons at the top right; the hint is a small card at the bottom left. The face sits in the middle
   (about a third of the width), so these cards only cover the room at the sides. */
@media (orientation: landscape) and (max-height: 600px) {
  .pop-stage { position: absolute; inset: 0; }
  .pop-head {
    position: absolute; top: 0; left: 0; right: 0; align-items: flex-start; background: none; pointer-events: none;
    padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left));
  }
  .pop-head > * { pointer-events: auto; }
  .pop-titles {
    flex: 0 1 auto; max-width: 28%; margin-right: auto; padding: 5px 12px 6px; border-radius: 14px;
    background: rgba(16, 42, 40, 0.82);
  }
  .pop-title { font-size: 0.95rem; }
  .pop-count { font-size: 0.8rem; min-height: 1.2em; }
  .pop-head .pop-btn { background: rgba(16, 42, 40, 0.82); }
  .pop-head .pop-btn:hover { background: rgba(40, 72, 68, 0.9); }
  .pop-foot {
    position: absolute; left: calc(10px + env(safe-area-inset-left)); bottom: calc(10px + env(safe-area-inset-bottom));
    max-width: min(30%, 270px); padding: 8px 12px; border-radius: 14px; background: rgba(16, 42, 40, 0.82);
  }
  .pop-hint { font-size: 0.82rem; min-height: 0; }
  .pop-tools { /* two rows of three at the bottom right, over the room beside the face */
    position: absolute; left: auto; right: calc(10px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(3, 54px); gap: 4px; padding: 5px; border-radius: 14px; background: rgba(16, 42, 40, 0.82);
  }
  .pop-tool { max-width: none; min-height: 50px; }
  .pop-done { left: auto; right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 26%; padding: 12px; }
  .pop-done__text { font-size: 1.05rem; }
}

/* Zoom buttons (T1.4): +, - and "whole face", 44 px round buttons in a column over the room. Portrait and desktop:
   the top right of the stage (under the header, above the tool bar). Phone sideways: the left side, half way down,
   between the title card and the hint card (the tools and the header buttons are on the right). Two fingers on the
   face zoom too, so the canvas keeps touch-action: none. */
.pop-zoom {
  position: absolute; z-index: 2; top: 10px; right: max(10px, env(safe-area-inset-right)); display: grid; gap: 8px;
}
.pop-zoom[hidden] { display: none; }
.pop-zoom__btn { /* 48 px: easy to hit, the main way to zoom when two-finger squeeze is on (T1.7) */
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; background: rgba(16, 42, 40, 0.78);
  touch-action: manipulation;
}
.pop-zoom__btn:hover { background: rgba(40, 72, 68, 0.9); }
.pop-zoom__btn svg { width: 22px; height: 22px; }
.pop-zoom__btn:disabled { opacity: 0.4; cursor: default; }
.pop-zoom__btn:disabled:hover { background: rgba(16, 42, 40, 0.78); }
.pop-zoom--on .pop-zoom__reset { background: #5eead4; color: #062b2b; border-color: #fff; } /* lit while zoomed: the way back */
@media (orientation: landscape) and (max-height: 600px) {
  .pop-zoom { top: 50%; right: auto; left: calc(10px + env(safe-area-inset-left)); transform: translateY(-50%); }
}

/* ---------- Torchlight special mode (T4.5, screens/torchlight.js): night in the living room ----------
   The pop scene sits inside .tl. A dark layer (.tl-dark) lies over the room and his face with a soft hole where the
   torch shines (its place and size come in as --tl-x, --tl-y, --tl-r); it lets every touch through to the face.
   Over the dark: the Zzz above his head, his speech bubble, the "he's stirring" notice, and at the end his phone's cold
   light, the big CAUGHT stamp and Continue. The header and the foot stay above the dark so they can be read. Tools,
   zoom buttons and the irritation meter are hidden here (fingers only; the wake-up meter is hidden on purpose).
   Reduced motion (.tl--still or the phone's setting): no twitch, shift, float or stamp animation; the light fades. */
.tl { position: relative; height: 100%; min-height: 0; overflow: hidden; background: #0b1020; }
.tl-scene { background: #0b1020; }
.tl-scene .pop-backdrop { filter: brightness(0.62) saturate(0.6) hue-rotate(-12deg); }
.tl-scene .pop-tools, .tl-scene .pop-zoom, .tl-scene .pop-irr { display: none !important; }
.tl-dark {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity 0.25s ease-out;
  background: radial-gradient(circle at var(--tl-x, -999px) var(--tl-y, -999px),
    rgba(255, 228, 150, 0.12) 0, rgba(255, 228, 150, 0.06) calc(var(--tl-r, 80px) * 0.72),
    rgba(6, 10, 28, 0.975) var(--tl-r, 80px), rgba(6, 10, 28, 0.975) 100%);
}
.tl-scene--lit .tl-dark { opacity: 0.3; } /* still night, but his phone lights the room */
.tl-howto { margin: 0 0 4px; font-size: 0.9rem; font-weight: 800; line-height: 1.3; color: #ffe08a; }
.tl-howto__keys { font-weight: 500; color: #e9eefc; }
.tl-zzz {
  position: absolute; z-index: 3; margin: 0; pointer-events: none; font: 900 1.5rem/1 system-ui, sans-serif; color: #c9d8ff;
  letter-spacing: 0.04em; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); animation: tl-float 2.6s ease-in-out infinite;
}
.tl-zzz[hidden] { display: none; }
@keyframes tl-float {
  0% { transform: translate(0, 6px) scale(0.85); opacity: 0.35; }
  50% { opacity: 1; }
  100% { transform: translate(14px, -18px) scale(1.1); opacity: 0.2; }
}
.tl-bubble {
  position: absolute; z-index: 3; margin: 0; max-width: min(70%, 300px); padding: 8px 14px; border-radius: 18px;
  transform: translate(-50%, -100%); pointer-events: none; background: #fffaf0; color: #2a211d; border: 2px solid #2a211d;
  font: 700 0.95rem/1.25 system-ui, sans-serif; text-align: center; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
.tl-bubble[hidden], .tl-notice[hidden], .tl-phone[hidden], .tl-caught[hidden], .tl-caught__go[hidden] { display: none; }
.tl-notice {
  position: absolute; z-index: 3; left: 16px; right: 16px; top: 50%; max-width: 360px; margin: 0 auto; padding: 12px 16px;
  transform: translateY(-50%); border-radius: 16px; background: rgba(16, 42, 40, 0.92); color: #fff; text-align: center;
  font: 700 1rem/1.3 system-ui, sans-serif;
}
.tl-phone { /* his phone's cold light from the bottom right, and the phone itself, screen glowing */
  position: absolute; inset: 0; z-index: 2; pointer-events: none; animation: tl-phone-on 0.25s ease-out;
  background: radial-gradient(circle at 88% 92%, rgba(205, 232, 255, 0.55) 0, rgba(190, 220, 255, 0.22) 30%, rgba(190, 220, 255, 0) 65%);
}
.tl-phone::after {
  content: ''; position: absolute; right: 8%; bottom: 6%; width: 44px; height: 80px; border-radius: 10px;
  background: #e9f5ff; border: 5px solid #23283a; box-shadow: 0 0 40px 16px rgba(205, 232, 255, 0.75); transform: rotate(-14deg);
}
@keyframes tl-phone-on { from { opacity: 0; } to { opacity: 1; } }
.tl-caught {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 18px; padding: 16px 16px max(28px, 9vh); pointer-events: none; /* low down, so his wide-awake eyes show */
}
.tl-caught > * { pointer-events: auto; }
.tl-caught__stamp {
  margin: 0; padding: 6px 22px; border: 6px solid #e8638f; border-radius: 14px; background: rgba(255, 250, 240, 0.92);
  color: #e8638f; font: 900 clamp(2.4rem, 13vw, 4.2rem)/1 system-ui, sans-serif; letter-spacing: 0.06em;
  transform: rotate(-8deg); animation: tl-stamp 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes tl-stamp { from { transform: rotate(-8deg) scale(2.2); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }
.tl-caught__go { min-width: 180px; min-height: 52px; font-size: 1.1rem; background: #e8638f; border-color: #fff; }
.tl-caught__go:hover { background: #f27eb2; }
.tl-scene .pop-canvas.tl-twitch { animation: tl-twitch 0.5s linear; }
@keyframes tl-twitch {
  0%, 100% { transform: none; } 15% { transform: translateX(-3px); } 35% { transform: translateX(3px) rotate(0.4deg); }
  55% { transform: translateX(-2px); } 75% { transform: translateX(2px); }
}
.tl-scene .pop-canvas.tl-shift { animation: tl-shift 1.5s ease-in-out; }
@keyframes tl-shift { 0%, 100% { transform: none; } 40%, 60% { transform: translate(8px, 5px) rotate(1.6deg); } }
.tl--still .tl-zzz, .tl--still .tl-caught__stamp, .tl--still .pop-canvas { animation: none; }
.tl--still .tl-phone { animation: tl-phone-on 1.2s ease-in-out; } /* a slow fade, never a flash */
.tl--still .tl-dark { transition: opacity 1.2s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .tl-zzz, .tl-caught__stamp, .tl-scene .pop-canvas.tl-twitch, .tl-scene .pop-canvas.tl-shift { animation: none; }
  .tl-phone { animation: tl-phone-on 1.2s ease-in-out; }
  .tl-dark { transition: opacity 1.2s ease-in-out; }
}