/* THE CARTOON FACE, 2 Sep. Her call: "every text that is simple make it cartoony".
   Baloo 2, a rounded storybook face, open licence, self hosted so it works with no
   network and never falls back to something flat. Two weights, 19KB each, and it is
   used for NAMES and SHORT LINES only: the small print stays in the plain face,
   where it is easier to read. */
@font-face {
  font-family: "Bao Round";
  src: url("fonts/baloo2-800.woff2") format("woff2");
  font-weight: 700 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bao Round";
  src: url("fonts/baloo2-600.woff2") format("woff2");
  font-weight: 400 690; font-style: normal; font-display: swap;
}
:root { --fun: "Bao Round", "Avenir Next", "Trebuchet MS", sans-serif; }

/* The page stylesheets set `font:` as a shorthand, which wipes any family set
   here, and they load after this file. So the family is forced, and ONLY the
   family: every size, weight and line height still comes from the page. */
h1, h2, #lvlName, #beat, .cell .plate, .hv-plate, .st-title, .st-name, .sh-name,
#hvCount, .fp-offer-head, #finish h2, #rwStars, .praise, .set-restart,
.fp-btn, .hv-btn, .sh-btn, .st-btn, #camera, .cell .num, .grade, .plate {
  font-family: var(--fun) !important;
  letter-spacing: .005em;
}
/* a rounded face sits a touch small at the same pixel size, so the names get a
   nudge back up to the size they read at before */
#lvlName { font-size: 13.5px; }
.plate { line-height: 1.14; }

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: "Avenir Next", "Trebuchet MS", sans-serif;
  /* THE FIELD, the same one behind Bao's World. This was the paw and cloud page,
     which every screen in the game inherited from here: the room a player is
     solving still sat on it while the map around it had moved to a meadow.
     It is FIXED so it does not scroll under a room, and covers rather than
     repeats, because it is a place rather than a wallpaper. */
  background:#f7efdc url("art/ui/bg_world.webp?v=1788299536") center top/cover no-repeat;
  color:#5b4636; min-height:100vh;
}
.screen { max-width:520px; margin:0 auto; padding:18px 14px 30px; }
.hidden { display:none; }
h1 { font-size:1.5em; text-align:center; padding-top:12px; color:#7a5c3e; }
.subtitle { text-align:center; font-size:.8em; opacity:.7; margin:6px 0 18px; }
.note { text-align:center; font-size:.75em; opacity:.6; margin-top:16px; }
#shelfBooks { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cover {
  aspect-ratio:3/4; border-radius:10px; border:2px solid #d9c4a5;
  background:#fffaf0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; cursor:pointer; box-shadow:0 3px 8px rgba(90,60,30,.12);
  font-size:.78em; text-align:center; padding:6px;
}
.cover .em { font-size:2.2em; }
.cover.locked { opacity:.35; filter:grayscale(.6); cursor:default; }
.cover.real { border-color:#c99a55; }
#backBtn { background:none; border:none; color:#7a5c3e; font-size:1em; padding:8px 4px; cursor:pointer; }
.pageTop { display:flex; justify-content:space-between; align-items:center; margin:6px 2px; }
#pageTitle { font-weight:600; color:#7a5c3e; }
.chip { background:#f1e2c8; border:1px solid #d9c4a5; border-radius:20px; padding:3px 10px; font-size:.75em; }
#hexRoom {
  width:min(86vw,420px); aspect-ratio:1/0.9; margin:8px auto;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px; font-size:2.8em; padding:12% 10%; transition:background .4s; filter:drop-shadow(0 6px 10px rgba(90,60,30,.25)) saturate(1.35);
}
#beat { font-size:.85em; text-align:center; padding:2px 10px 8px; min-height:2.6em; }
#tray {
  background:#f7dfc0; border-radius:14px 14px 0 0; border:2px solid #e2c194; border-bottom:none;
  padding:10px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.sticker {
  background:#fff; border-radius:12px; padding:6px 10px; font-size:1.6em;
  box-shadow:0 2px 4px rgba(0,0,0,.15); border:3px solid #fff; outline:1px solid #ddd;
}
.sticker.ghost { background:#e8d3b3; color:transparent; text-shadow:0 0 0 #c9a877; border-color:#e8d3b3; }
.sticker.crown {
  border-image:linear-gradient(120deg,#ffd700,#ff9ecb,#7fd4ff,#ffd700) 1;
  animation:shimmer 2.2s linear infinite; position:relative;
}
.sticker.crown::after { content:"\1F451"; position:absolute; top:-12px; right:-8px; font-size:.55em; }
@keyframes shimmer { 0%{filter:hue-rotate(0) brightness(1);} 50%{filter:hue-rotate(40deg) brightness(1.25);} 100%{filter:hue-rotate(0) brightness(1);} }
#postcard {
  background:#fffdf6; border:1px solid #e0d0b0; margin:0 6px; padding:12px 14px;
  font-style:italic; font-size:.9em; border-radius:4px; box-shadow:0 3px 6px rgba(90,60,30,.15);
  position:relative;
}
#postcard::before { content:"\2709"; position:absolute; top:6px; right:10px; opacity:.4; }
#trace { text-align:center; font-size:.8em; padding:8px; letter-spacing:3px; }
.nav { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px; }
.nav button {
  width:48px; height:48px; border-radius:50%; border:2px solid #d9c4a5;
  background:#fffaf0; font-size:1.2em; color:#7a5c3e; cursor:pointer;
}
#dots { display:flex; gap:5px; }
.dot { width:9px; height:9px; border-radius:50%; background:#d9c4a5; }
.dot.on { background:#a4703b; }

/* HER MEMORY, the progress panel. Quiet on purpose: it lives behind a tap in the
   hive and never appears while a room is being played. Her design has no failure
   state, so nothing in here can read as a mark out of ten. */
#mpCard { background:#fffaf0; border:2px solid #eadbbf; border-radius:18px;
  padding:16px 16px 14px; margin:10px 0 4px; }
.mp-head { font:900 34px/1 'Bao Round','Avenir Next',system-ui,sans-serif; color:#5aab3c; text-align:center; }
.mp-sub  { text-align:center; color:#8a7355; font:700 12.5px/1.4 system-ui,sans-serif; margin-top:3px; }
.mp-facts{ display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; margin:12px 0 10px;
  font:600 12px/1.3 system-ui,sans-serif; color:#7a5c3e; }
.mp-facts b { color:#4a3728; font-size:14px; }
.mp-row  { display:flex; align-items:center; gap:8px; margin:5px 0; }
.mp-name { flex:0 0 40%; font:700 11.5px/1.3 system-ui,sans-serif; color:#6b4a2b;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-bar  { flex:1 1 auto; height:9px; background:#efe3cd; border-radius:9px; overflow:hidden; }
.mp-bar i{ display:block; height:100%; border-radius:9px; }
.mp-pct  { flex:0 0 34px; text-align:right; font:800 11px/1 system-ui,sans-serif; color:#8a7355; }
.mp-foot { margin-top:11px; text-align:center; color:#a58a63; font:600 11px/1.4 system-ui,sans-serif; }
.mp-empty{ text-align:center; color:#8a7355; font:600 13px/1.5 system-ui,sans-serif; padding:14px 4px; }
.mp-label { margin:11px 0 3px; font:800 10px/1 system-ui,sans-serif; letter-spacing:.08em;
  text-transform:uppercase; color:#a58a63; }
.mp-label:first-child { margin-top:2px; }

/* THE TITLE, above the memory number. What you are called matters more than a
   percentage, so it sits first and reads as a name rather than a rank. */
.mp-title { text-align:center; font:900 17px/1.2 'Bao Round','Avenir Next',system-ui,sans-serif;
  color:#6b4a2b; margin:0 0 8px; }
.ti-now { text-align:center; font:900 19px/1.2 'Bao Round','Avenir Next',system-ui,sans-serif;
  color:#6b4a2b; margin-bottom:9px; }
.ti-all { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
.ti-chip { border-radius:11px; padding:3px 9px; background:#f2e7d2; color:#bda887;
  font:700 11px/1.4 system-ui,sans-serif; }
.ti-chip.got { background:#5aab3c; color:#fff; }
.ti-next { margin-top:10px; text-align:center; color:#a58a63; font:600 11.5px/1.4 system-ui,sans-serif; }
.ti-none { text-align:center; color:#8a7355; font:600 13px/1.5 system-ui,sans-serif; padding:10px 4px; }

/* LANGUAGES, 7 Sep. Romanian, Portuguese and Spanish are longer than English, and
   Spanish especially: "Habitación entera" against "Whole room". Rather than butcher
   the translation, the labels wrap and shrink. The layout bends, the language stays
   natural. */
.mp-facts span, .mp-label, .ti-chip, .ti-next { overflow-wrap:anywhere; hyphens:auto; }
.mp-facts { line-height:1.35; }
.mp-name { flex:0 0 42%; }
#sheetBuy, #sheetSkip, #sheetVip { white-space:normal; line-height:1.25; padding-top:9px; padding-bottom:9px; }