/* Zeynep's Magic Pets — layout and chrome.

   Phone first. A single column: title bar, picture, story text, and a thumb
   pad pinned bottom-right whenever a scene needs moving. Wider screens get
   the same thing with more breathing room. */

:root {
  --ink: #241a33;
  --paper: #fdf6e8;
  --plum-900: #150f26;
  --plum-800: #1b1430;
  --plum-700: #2a2047;
  --gold: #ffc247;
  --gold-deep: #e09a1c;
  --coral: #ff7a59;
  --stroke: rgba(255, 255, 255, 0.12);
  --radius: 18px;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
  --font: "Baloo 2", "Comic Sans MS", "Chalkboard SE", "Segoe UI Rounded",
          system-ui, -apple-system, sans-serif;
  --pad-size: 132px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  color: var(--paper);
  background:
    radial-gradient(1200px 700px at 50% -10%, #3b2c68 0%, transparent 60%),
    linear-gradient(180deg, var(--plum-800), var(--plum-900));
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

#shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
  max-width: 1100px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Grid children default to min-width:auto, so a long unbreakable title in the
   top bar would stretch the whole column past the viewport and push the canvas
   off the side of a phone. */
#shell > * { min-width: 0; }

/* ---------------------------------------------------------------- top bar */

#topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px 12px;
}

.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-mark { font-size: 24px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong {
  font-size: 15px; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-text small {
  font-size: 11px; opacity: .66;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.controls { display: flex; gap: 5px; flex: none; }

.icon-btn {
  width: 36px; height: 36px;
  font-size: 16px;
  border: 1px solid var(--stroke);
  border-radius: 11px;
  background: rgba(255, 255, 255, .07);
  color: var(--paper);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
}
.icon-btn:hover { background: rgba(255, 255, 255, .15); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.off { opacity: .38; }
.icon-btn[hidden] { display: none; }

#progress {
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
#progressFill {
  height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--coral));
  transition: width .5s ease;
}

/* ------------------------------------------------------------------ stage */

#stageWrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 10px;
}

#stage {
  display: block;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--shadow);
  background: #0b1033;
  touch-action: none;
}

#hud {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 12px; align-items: center;
  padding: 6px 15px;
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(16, 10, 30, .62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--stroke);
  pointer-events: none;
}
#hud[hidden] { display: none; }
#hudRight { color: var(--gold); letter-spacing: 1px; }

/* Tucked into the corner rather than centred, so it never sits on a face. */
#tapHint {
  position: absolute;
  bottom: 10px; right: 16px;
  padding: 4px 11px;
  font-size: 11px;
  border-radius: 999px;
  background: rgba(16, 10, 30, .5);
  border: 1px solid var(--stroke);
  pointer-events: none;
  animation: pulse 2.2s ease-in-out infinite;
}
#tapHint[hidden] { display: none; }
@keyframes pulse { 0%, 100% { opacity: .35 } 50% { opacity: .85 } }

/* -------------------------------------------------------------- story bar */

#story {
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  text-align: center;
}

#storyTitle {
  margin: 0 0 2px;
  font-size: clamp(19px, 4.4vw, 30px);
  line-height: 1.15;
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
#storyTitle[hidden], #storySubtitle[hidden], #storyHint[hidden] { display: none; }

#storySubtitle {
  margin: 0 0 6px;
  font-size: clamp(14px, 3vw, 20px);
  font-weight: 600; opacity: .8;
  letter-spacing: 2px; text-transform: uppercase;
}

#storyLines p {
  margin: 3px 0;
  font-size: clamp(14.5px, 3.5vw, 19px);
  line-height: 1.35;
  text-wrap: balance;
}

#storyHint { margin: 7px 0 0; font-size: 12px; opacity: .55; }

/* ---------------------------------------------------------------- buttons */

#buttons {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin-top: 11px;
}
#buttons[hidden] { display: none; }

#buttons button, .primary {
  font-family: var(--font);
  font-size: 15.5px; font-weight: 700;
  padding: 12px 20px;
  min-height: 48px;                 /* comfortable thumb target */
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, .09);
  color: var(--paper);
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
#buttons button:hover { background: rgba(255, 255, 255, .16); }
#buttons button:active, .primary:active { transform: translateY(1px) scale(.98); }

#buttons button.primary, .primary {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: #3a2600;
  border-color: rgba(0, 0, 0, .2);
  box-shadow: 0 6px 18px rgba(224, 154, 28, .35);
}
#buttons button.primary:hover, .primary:hover { filter: brightness(1.07); }

/* ------------------------------------------------------------------- quiz */

#quizForm { margin-top: 11px; }
#quizForm[hidden] { display: none; }

#quiz { display: flex; gap: 8px; justify-content: center; max-width: 420px; margin: 0 auto; }

#quizInput {
  flex: 1; min-width: 0;
  font-family: var(--font);
  font-size: 17px;
  padding: 12px 16px;
  min-height: 48px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
  text-align: center;
}
#quizInput:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(255, 194, 71, .25);
}

/* -------------------------------------------------- touch movement controls

   Shown by JS on any touch-capable device (body.touch) whenever the scene
   needs movement. Deliberately NOT hidden behind a hover media query — on a
   phone these are the only controls there are. */

/* Anchored to the picture area, not the window, so it lands sensibly in both
   the portrait and the landscape layouts without any magic numbers. */
#touch {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 40;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
}
#touch[hidden] { display: none; }

#padWrap { position: relative; display: grid; place-items: center; }

#pad {
  position: relative;
  width: var(--pad-size);
  height: var(--pad-size);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.09), rgba(20,14,36,.72));
  border: 2px solid rgba(255, 255, 255, .22);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 2px 12px rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  touch-action: none;
}

.pad-arrow {
  position: absolute;
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
  pointer-events: none;
}
.pad-arrow.up    { top: 7px }
.pad-arrow.down  { bottom: 7px }
.pad-arrow.left  { left: 9px }
.pad-arrow.right { right: 9px }

#padStick {
  width: calc(var(--pad-size) * .44);
  height: calc(var(--pad-size) * .44);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border: 2px solid rgba(255, 255, 255, .35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
  pointer-events: none;
  transition: transform .04s linear;
}

#padLabel {
  margin-top: 6px;
  font-size: 11px;
  opacity: .6;
  white-space: nowrap;
}

#btnSwap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 66px; height: 66px;
  font-family: var(--font);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .22);
  background: rgba(20, 14, 36, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--paper);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
#btnSwap[hidden] { display: none; }
#btnSwap:active { transform: scale(.93); }
#swapIcon { font-size: 24px; line-height: 1; }
#btnSwap small { font-size: 8px; line-height: 1.1; opacity: .6; }


/* ----------------------------------------------------------- chapter menu */

#chapters {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(10, 6, 20, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#chapters[hidden] { display: none; }

.sheet {
  width: min(520px, 100%);
  max-height: min(82dvh, 640px);
  display: flex; flex-direction: column;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--plum-700), var(--plum-800));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.sheet header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 17px;
  border-bottom: 1px solid var(--stroke);
}
.sheet header h2 { margin: 0; font-size: 19px; }

#chapterList { padding: 10px; overflow-y: auto; display: grid; gap: 8px; }

/* --- crash notice --- */

#crash {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(10, 6, 20, .88);
}
#crash[hidden] { display: none; }
#crash p { margin: 0 0 4px; font-size: 14px; line-height: 1.45; }
#crashText {
  margin: 0;
  padding: 11px 13px;
  max-height: 180px;
  overflow: auto;
  font: 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace;
  color: #ffc9c9;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 10px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 120, 120, .3);
}

/* --- settings sheet --- */

#settings {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(10, 6, 20, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#settings[hidden] { display: none; }

.sheet-body { padding: 14px 17px; overflow-y: auto; display: grid; gap: 16px; }

.field { display: grid; gap: 7px; font-size: 13.5px; }
.field > span { opacity: .85; }
.field small { font-size: 11px; opacity: .5; }

.field select {
  font-family: var(--font);
  font-size: 15px;
  padding: 11px 12px;
  min-height: 46px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
}

.field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  outline: none;
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border: 2px solid rgba(255, 255, 255, .4);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
  cursor: pointer;
}
.field input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid rgba(255, 255, 255, .4);
  cursor: pointer;
}
#rateValue { color: var(--gold); }

.primary.wide { width: 100%; }

.switch {
  display: flex; align-items: center; gap: 12px;
  font-size: 14.5px;
  min-height: 44px;
  cursor: pointer;
}
.switch input { width: 22px; height: 22px; accent-color: var(--gold-deep); flex: none; }

.chapter {
  display: flex; align-items: center; gap: 13px;
  width: 100%;
  padding: 13px 15px;
  min-height: 60px;
  font-family: var(--font);
  text-align: left;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, .06);
  color: var(--paper);
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.chapter:hover:not(.locked) { background: rgba(255, 255, 255, .14); }
.chapter:active:not(.locked) { transform: scale(.985); }
.chapter.locked { opacity: .4; cursor: not-allowed; }

.chapter-icon { font-size: 25px; flex: none; }
.chapter-text { display: flex; flex-direction: column; }
.chapter-text small { font-size: 10.5px; opacity: .6; letter-spacing: 1px; text-transform: uppercase; }
.chapter-text strong { font-size: 15.5px; }

.sheet-foot {
  margin: 0;
  padding: 12px 17px calc(14px + env(safe-area-inset-bottom));
  font-size: 11.5px; opacity: .5; text-align: center;
  border-top: 1px solid var(--stroke);
}

/* ---------------------------------------------------------------- tablet+ */

@media (min-width: 760px) and (min-height: 620px) {
  #topbar { padding: 13px 18px 16px; }
  .brand-mark { font-size: 30px; }
  .brand-text strong { font-size: 19px; }
  .brand-text small { font-size: 12px; }
  .icon-btn { width: 41px; height: 41px; font-size: 18px; }
  #story { padding: 15px 22px 20px; }
  #stage { border-radius: 22px; }
  body.touch.moving #story { padding-right: 22px; }
}

/* ------------------------------------------------------------- landscape

   When the screen is wider than it is tall and vertical room is tight, stack
   sideways instead: picture on the left, story and buttons in a column on the
   right. A 4:3 picture plus a text bar simply does not fit down the page on a
   landscape phone, and this uses the width that is actually there. */

@media (min-aspect-ratio: 1/1) and (max-height: 600px) {
  :root { --pad-size: 104px; }

  #shell {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) clamp(210px, 32%, 330px);
    grid-template-areas: "top top" "stage story";
  }
  #topbar    { grid-area: top; padding: 4px 12px 8px; }
  #stageWrap { grid-area: stage; padding: 0 4px 8px 8px; }
  #story {
    grid-area: story;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    padding: 4px 12px 8px 6px;
    text-align: left;
  }

  .brand-text small { display: none; }
  #storyTitle { font-size: clamp(15px, 2.6vw, 20px); }
  #storySubtitle { display: none; }
  #storyLines p { font-size: clamp(12.5px, 2vw, 15px); margin: 2px 0; }
  #storyHint { font-size: 10.5px; }
  #buttons { justify-content: flex-start; margin-top: 8px; }
  #buttons button { min-height: 40px; padding: 7px 13px; font-size: 13.5px; }
  #quizForm { margin-top: 8px; }
  #quiz { max-width: none; }
  #quizInput { min-height: 42px; font-size: 15px; }
  #padLabel, #btnSwap small { display: none; }
  #btnSwap { width: 50px; height: 50px; }
  #tapHint { bottom: 5px; right: 8px; font-size: 10px; }
  #hud { font-size: 12px; padding: 4px 11px; top: 6px; }
}

/* Very short screens (landscape phone with the browser bars showing). */
@media (max-height: 400px) {
  :root { --pad-size: 88px; }
  .brand-mark { font-size: 19px; }
  .brand-text strong { font-size: 13px; }
  .icon-btn { width: 31px; height: 31px; font-size: 14px; }
  #storyLines p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, #tapHint { animation: none !important; transition: none !important; }
}

.note {
  margin: 0;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.45;
  border-radius: 12px;
  background: rgba(255, 194, 71, .1);
  border: 1px solid rgba(255, 194, 71, .28);
}
.note[hidden] { display: none; }

/* Answer feedback. Previously the only signal was a caption line, which is
   easy to miss — and a correct answer said nothing at all. */
.answer {
  margin: 10px auto 0;
  padding: 9px 18px;
  max-width: 420px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  animation: pop .25s ease;
}
.answer[hidden] { display: none; }
.answer.ok {
  color: #0f3d24;
  background: linear-gradient(180deg, #7ee3a8, #4fd1a5);
  border: 1px solid rgba(0, 0, 0, .15);
}
.answer.no {
  color: #4d1616;
  background: linear-gradient(180deg, #ffb3a0, #ff8e75);
  border: 1px solid rgba(0, 0, 0, .12);
}
@keyframes pop { from { transform: scale(.9); opacity: 0 } to { transform: scale(1); opacity: 1 } }

/* --- who is playing ------------------------------------------------------ */

.player-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;            /* the game title truncates first, not the player */
  margin-left: auto;
  margin-right: 6px;
  padding: 5px 12px 5px 8px;
  max-width: 46vw;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--paper);
  background: rgba(255, 194, 71, .14);
  border: 1px solid rgba(255, 194, 71, .38);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .12s ease, transform .12s ease;
}
.player-chip[hidden] { display: none; }
.player-chip:hover { background: rgba(255, 194, 71, .24); }
.player-chip:active { transform: scale(.95); }
.player-avatar { font-size: 15px; line-height: 1; }

.ghost {
  width: 100%;
  margin-top: 8px;
  padding: 11px 18px;
  min-height: 44px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  cursor: pointer;
  opacity: .7;
}
.ghost:hover { opacity: 1; background: rgba(255, 255, 255, .06); }

#exitSheet {
  position: fixed; inset: 0; z-index: 85;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(10, 6, 20, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#exitSheet[hidden] { display: none; }

#nameSheet {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(10, 6, 20, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#nameSheet[hidden] { display: none; }
#nameInput { text-align: center; font-size: 18px; }

/* On a narrow phone the game's own name is the least useful thing in the bar —
   the child's name and the chapter matter more, so that is what gets the room. */
@media (max-width: 460px) {
  .player-chip { font-size: 12px; padding: 4px 10px 4px 7px; }
  .brand-text strong { font-size: 0; }
  .brand-text strong::after {
    content: 'Magic Pets';
    font-size: 14px;
  }
}

/* Exit is the one control that matters mid-story, so it reads as an action
   rather than another grey icon. */
.exit-btn {
  background: rgba(255, 122, 89, .16);
  border-color: rgba(255, 122, 89, .42);
}
.exit-btn:hover { background: rgba(255, 122, 89, .3); }

.note-quiet {
  margin: 2px 0 0;
  font-size: 12px;
  opacity: .55;
  text-align: center;
}
.primary:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.4);
}

/* Who else is playing right now. Sits beside the player's own chip so the two
   read as one group: you, and everyone else currently in the story. */
.others-chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 6px;
  padding: 5px 11px;
  max-width: 34vw;
  font-size: 12px;
  font-weight: 600;
  color: #cdf5e2;
  background: rgba(79, 209, 165, .14);
  border: 1px solid rgba(79, 209, 165, .4);
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.others-chip[hidden] { display: none; }
.others-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mint, #4fd1a5);
  box-shadow: 0 0 0 0 rgba(79, 209, 165, .7);
  animation: livedot 2s ease-out infinite;
  flex: none;
}
@keyframes livedot {
  0%   { box-shadow: 0 0 0 0 rgba(79, 209, 165, .6) }
  70%  { box-shadow: 0 0 0 7px rgba(79, 209, 165, 0) }
  100% { box-shadow: 0 0 0 0 rgba(79, 209, 165, 0) }
}

@media (max-width: 460px) {
  .others-chip { font-size: 11px; padding: 4px 9px; max-width: 30vw; }
}