:root {
  --forest: #294822;
  --moss: #5f7f2a;
  --leaf: #78a93b;
  --cream: #f8f1df;
  --paper: #fff9ec;
  --ink: #1f2219;
  --brown: #8d5b2d;
  --blue: #2f6f99;
  --shadow: 0 16px 40px rgba(28, 38, 18, 0.22);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100dvh;
}

body {
  margin: 0;
  width: 100%;
  min-height: 100dvh;
  background: #566f1f;
  color: var(--ink);
  font-family: Arial, "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
}

button {
  font: inherit;
}

/* 2026-05-13 correction: fact popups and compendium entries show source images. */
html body .fact-dialog-header span.has-fact-image {
  overflow: hidden !important;
  background: rgba(255, 252, 232, 0.92) !important;
  box-shadow: inset 0 0 0 2px rgba(83, 104, 44, 0.18) !important;
}

html body .fact-dialog-header span.has-fact-image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

html body #fact-dialog-body {
  display: grid !important;
  gap: clamp(8px, 1.2dvh, 14px) !important;
}

html body .fact-dialog-media {
  width: min(100%, 520px) !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: 4px !important;
}

html body .fact-dialog-media img {
  width: 100% !important;
  height: clamp(150px, 28dvh, 240px) !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(44, 36, 17, 0.18) !important;
}

html body .fact-dialog-media figcaption {
  color: #6b6144 !important;
  font-size: clamp(0.58rem, 0.85vw, 0.72rem) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  text-align: center !important;
}

html body .fact-dialog-copy {
  margin: 0 !important;
}

html body .fact-source-links {
  justify-content: center !important;
  margin-top: 0 !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body #fact-dialog-body {
    gap: clamp(6px, 1dvh, 10px) !important;
  }

  html body .fact-dialog-media {
    width: min(100%, 420px) !important;
  }

  html body .fact-dialog-media img {
    height: clamp(118px, 24dvh, 180px) !important;
    border-radius: 11px !important;
  }

  html body .fact-dialog-media figcaption {
    font-size: clamp(0.52rem, 1.45vw, 0.64rem) !important;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app {
  width: 100%;
  min-height: 100dvh;
  height: auto;
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
  padding: 10px clamp(8px, 1.1vw, 14px) 3px;
  overflow: visible;
}

.topbar,
.bottom-bar,
.task-panel {
  background: rgba(255, 249, 236, 0.94);
  border: 1px solid rgba(75, 91, 43, 0.2);
  box-shadow: var(--shadow);
}

.topbar {
  min-height: clamp(112px, 14vh, 150px);
  margin-top: 6px;
  border-radius: 0 0 20px 20px;
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 260px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  background: rgba(199, 186, 134, 0.92);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-copy {
  display: flex;
  align-items: center;
  transform: translateY(-6px);
}

.brand small {
  display: block;
  max-width: 280px;
  margin-top: 0;
  color: #2f312c;
  font-size: clamp(0.9rem, 1.05vw, 1.08rem);
  font-weight: 900;
  line-height: 1.08;
}

.gios-logo {
  width: clamp(54px, 4.8vw, 68px);
  height: clamp(54px, 4.8vw, 68px);
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 0 rgba(23, 75, 38, 0.12);
}

.title-board {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  z-index: 30;
  width: clamp(210px, 28vw, 500px);
  min-width: 0;
  height: clamp(64px, 9.2dvh, 110px);
  padding: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.title-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 9px 11px rgba(44, 30, 17, 0.18));
}

.status {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 3;
}

.side-score {
  position: absolute;
  left: 45%;
  bottom: 34px;
  width: 150px;
  min-width: 0;
  height: 54px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: center;
  pointer-events: none;
}

.side-score .star,
.side-score small {
  display: none;
}

.side-score strong {
  font-size: 2.18rem;
  line-height: 1;
  color: #f7fff2;
  text-shadow: 0 2px 0 #214018, 0 0 8px rgba(20, 44, 11, 0.75);
}

.score-pill,
.badge-pill {
  min-width: 146px;
  height: 78px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  padding: 12px 18px;
  background: #fff7e8;
  border-radius: 20px;
  border: 1px solid rgba(97, 73, 39, 0.14);
  box-shadow: inset 0 3px 6px rgba(71, 48, 26, 0.08);
}

.score-pill strong,
.badge-pill strong {
  font-size: 1.8rem;
}

.score-pill small,
.badge-pill small {
  grid-column: 2;
  margin-top: -12px;
  color: #504537;
  font-weight: 700;
}

.score-pill.side-score {
  min-width: 0;
  grid-template-columns: 1fr;
  column-gap: 0;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.score-pill.side-score strong {
  font-size: 2.05rem;
}

.star {
  color: #ffc633;
  font-size: 2.9rem;
  -webkit-text-stroke: 2px #b56c14;
}

.badge-pill span {
  font-size: 2.2rem;
}

.round-button,
.menu-button {
  width: 86px;
  height: 86px;
  border: 0;
  border-radius: 20px;
  color: transparent;
  cursor: pointer;
  background-size: 112% 112%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
  overflow: hidden;
}

.menu-button {
  width: 132px;
  height: 58px;
  border-radius: 14px;
  color: #fff3d5;
  background: linear-gradient(180deg, #9b4f31, #5e2a1c);
  box-shadow: inset 0 0 0 2px rgba(255, 231, 180, 0.28), 0 5px 0 rgba(54, 25, 16, 0.28);
  display: grid;
  place-items: center;
  font-size: 1.08rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.reset-icon {
  display: none;
}

.reset-icon::after {
  content: none;
}

.play-area {
  position: relative;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 24vw, 420px);
  gap: 2px;
  align-items: start;
}

.stage-view {
  height: 100%;
  min-height: clamp(420px, 58vh, 640px);
  max-height: none;
}

.stage-map {
  justify-self: center;
  position: relative;
  width: min(1120px, 142%);
  height: 248px;
  min-height: 248px;
  display: block;
  padding: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.stage-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: image-set(
    url("assets/mapa2.webp") type("image/webp"),
    url("assets/mapa2.png") type("image/png")
  ) center center / contain no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}

.bottom-bar .stage-map {
  width: min(1120px, 142%);
  align-self: center;
  justify-self: center;
  grid-column: 2;
  grid-row: 1;
  margin-top: -82px;
  margin-bottom: -4px;
  opacity: 0.94;
  transition: opacity 180ms ease;
}

.bottom-bar .stage-map:hover,
.bottom-bar .stage-map:focus-within {
  opacity: 1;
}

.stage-node {
  position: absolute;
  left: var(--map-x);
  top: var(--map-y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  color: #324123;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.stage-node::after {
  display: none;
}

.stage-node[data-stage="dam"] {
  --map-x: 31%;
  --map-y: 49%;
}

.stage-node[data-stage="meadow"] {
  --map-x: 45%;
  --map-y: 47%;
}

.stage-node[data-stage="mountains"] {
  --map-x: 55%;
  --map-y: 47%;
}

.stage-node[data-stage="forest"] {
  --map-x: 69%;
  --map-y: 52%;
}

.map-arrow,
.thesaurus-button {
  position: absolute;
  z-index: 4;
  border: 0;
  background: transparent center / contain no-repeat;
  cursor: pointer;
  filter: drop-shadow(0 4px 6px rgba(31, 38, 17, 0.18));
}

.map-arrow {
  top: 60%;
  width: 96px;
  height: 70px;
  opacity: 0.82;
  background-image: url("assets/strzalka-cut.png");
}

.map-arrow:hover,
.map-arrow:focus-visible,
.thesaurus-button:hover,
.thesaurus-button:focus-visible {
  opacity: 1;
  outline: none;
  transform: scale(1.05);
}

.map-arrow-left {
  left: 6.5%;
  transform: translateY(-50%);
}

.map-arrow-left:hover,
.map-arrow-left:focus-visible {
  transform: translateY(-50%) scale(1.05);
}

.bottom-tool-button,
.thesaurus-button,
.stage-sound-button {
  opacity: 0.54;
  filter: saturate(0.78) brightness(0.88) drop-shadow(0 4px 6px rgba(31, 38, 17, 0.14));
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.bottom-tool-button:hover,
.bottom-tool-button:focus-visible,
.bottom-tool-button:active,
.thesaurus-button:hover,
.thesaurus-button:focus-visible,
.thesaurus-button:active,
.bottom-reset-button:hover,
.bottom-reset-button:focus-visible,
.bottom-reset-button:active,
.stage-sound-button:hover,
.stage-sound-button:focus-visible,
.stage-sound-button:active {
  opacity: 1;
  filter: saturate(1.05) brightness(1.12) drop-shadow(0 8px 12px rgba(31, 38, 17, 0.22));
  transform: scale(1.14);
}

.stage-sound-button[aria-pressed="true"] {
  opacity: 0.64;
}

.stage-sound-button[aria-pressed="false"] {
  opacity: 0.78;
}

.thesaurus-button {
  transform-origin: center;
}

.sign-button {
  opacity: 1 !important;
  filter: saturate(1.06) brightness(1.16) drop-shadow(0 8px 12px rgba(31, 38, 17, 0.24)) !important;
}

.map-arrow-right {
  right: 6.5%;
  transform: translateY(-50%) scaleX(-1);
}

.map-arrow-right:hover,
.map-arrow-right:focus-visible {
  transform: translateY(-50%) scaleX(-1) scale(1.05);
}

.thesaurus-button {
  left: calc(50% - 745px);
  top: -28px;
  width: 230px;
  height: 246px;
  background-image: url("assets/book.png");
}

.stage-node[aria-disabled="true"] {
  color: #777;
  background: transparent;
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.72;
}

.stage-node.active {
  color: #fff8df;
  background: transparent;
  filter: none;
  box-shadow: none;
  opacity: 1;
}

.stage-icon {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--loc-icon) center / contain no-repeat;
  filter: grayscale(1) saturate(0.45);
  box-shadow: none;
}

.stage-node.unlocked .stage-icon {
  filter: none;
}

.stage-node.active .stage-icon {
  width: 42px;
  height: 42px;
  box-shadow: 0 0 0 2px rgba(35, 126, 185, 0.3), 0 0 10px rgba(35, 126, 185, 0.22), 0 1px 3px rgba(13, 58, 91, 0.08);
}

.stage-current-label {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 3;
  min-width: 172px;
  padding: 9px 22px 10px;
  border-radius: 999px;
  background: rgba(255, 249, 226, 0.9);
  box-shadow: inset 0 0 0 2px rgba(129, 111, 49, 0.18), 0 3px 7px rgba(31, 38, 17, 0.12);
  color: #173923;
  font-size: 1.26rem;
  line-height: 1;
  font-weight: 900;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.stage-node[data-stage="dam"] {
  --loc-icon: url("assets/loc-dam.png");
}

.stage-node[data-stage="meadow"] {
  --loc-icon: url("assets/loc-meadow.png");
}

.stage-node[data-stage="mountains"] {
  --loc-icon: url("assets/loc-mountains.png");
}

.stage-node[data-stage="forest"] {
  --loc-icon: url("assets/loc-forest.png");
}

.stage-node strong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.stage-node.active strong {
  color: #fff8df;
  background: linear-gradient(180deg, #247aa0, #0f5d86);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.23), 0 5px 10px rgba(11, 50, 72, 0.25);
}

.stage-node[aria-disabled="true"] strong {
  color: #51614b;
  background: rgba(255, 249, 226, 0.78);
  box-shadow: inset 0 0 0 2px rgba(129, 111, 49, 0.16);
}

.stage-view:not(.active) {
  display: none;
}

.map {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(rgba(30, 55, 22, 0.02), rgba(30, 55, 22, 0.08)),
    url("assets/forest-valley-bg-tatry.png") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(39, 55, 20, 0.25), var(--shadow);
}

.map.bridge-unlocked {
  background:
    linear-gradient(rgba(30, 55, 22, 0.02), rgba(30, 55, 22, 0.08)),
    url("assets/forest-valley-bg-bridge-tatry.png") center / cover no-repeat;
}

.map::before {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: 10%;
  height: 20%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.58;
  background: linear-gradient(180deg, rgba(116, 143, 116, 0.72), rgba(77, 111, 83, 0.36));
  clip-path: polygon(0 100%, 8% 68%, 14% 88%, 22% 36%, 30% 82%, 39% 18%, 47% 78%, 57% 31%, 66% 86%, 74% 44%, 83% 82%, 91% 54%, 100% 100%);
  filter: blur(0.2px);
}

.map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 244, 169, 0.18), transparent 26%),
    linear-gradient(180deg, transparent 70%, rgba(36, 63, 25, 0.18));
  animation: breathe 5s ease-in-out infinite;
  z-index: 1;
}

.sky,
.distant-hills,
.sun-rays,
.canopy,
.tree,
.stream,
.pond,
.bank,
.rocks,
.flowers,
.reeds,
.beaver-dam,
.stream-bridge,
.frog-figure,
.eagle {
  display: none;
}

.sky {
  position: absolute;
  inset: 0 0 52%;
  background:
    radial-gradient(ellipse at 35% 18%, rgba(255, 255, 255, 0.88) 0 4%, transparent 10%),
    radial-gradient(ellipse at 42% 18%, rgba(255, 255, 255, 0.8) 0 5%, transparent 10%),
    radial-gradient(ellipse at 58% 14%, rgba(255, 255, 255, 0.65) 0 4%, transparent 9%);
}

.distant-hills {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 28%;
  height: 22%;
  border-radius: 55% 55% 0 0;
  background: #7cab68;
  opacity: 0.72;
}

.hill-two {
  left: 44%;
  right: 5%;
  top: 25%;
  background: #5d9661;
  opacity: 0.55;
}

.sun-rays {
  position: absolute;
  inset: 14% 22% 30%;
  background: radial-gradient(ellipse at center, rgba(255, 239, 146, 0.5), transparent 55%);
  animation: breathe 5s ease-in-out infinite;
}

.canopy {
  position: absolute;
  top: -9%;
  width: 42%;
  height: 38%;
  background:
    radial-gradient(circle at 16% 45%, #315d2c 0 9%, transparent 10%),
    radial-gradient(circle at 34% 32%, #3f7433 0 14%, transparent 15%),
    radial-gradient(circle at 55% 43%, #426e31 0 15%, transparent 16%),
    radial-gradient(circle at 78% 28%, #5c8937 0 10%, transparent 11%);
  filter: drop-shadow(0 16px 12px rgba(21, 44, 20, 0.24));
}

.canopy-left {
  left: -6%;
}

.canopy-right {
  right: -5%;
  transform: scaleX(-1);
}

.tree {
  position: absolute;
  top: 2%;
  bottom: 0;
  width: 130px;
  background: linear-gradient(90deg, #4a2c18, #765136 45%, #342315 100%);
  clip-path: polygon(30% 0, 68% 0, 80% 100%, 12% 100%);
  opacity: 0.9;
}

.tree span {
  position: absolute;
  width: 80px;
  height: 280px;
  border: 16px solid #442916;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 90px 0 0;
  top: 6%;
}

.tree-left {
  left: -10px;
}

.tree-left span {
  left: 62px;
  transform: rotate(-24deg);
}

.tree-right {
  right: -12px;
}

.tree-right span {
  right: 60px;
  transform: scaleX(-1) rotate(-24deg);
}

.stream,
.pond {
  position: absolute;
  background:
    repeating-linear-gradient(-12deg, rgba(255, 255, 255, 0.16) 0 8px, transparent 9px 22px),
    linear-gradient(90deg, #315f62, #5fa0a5 42%, #2e696c);
  box-shadow: inset 0 20px 24px rgba(225, 255, 255, 0.18), inset 0 -14px 22px rgba(20, 57, 52, 0.26);
}

.stream {
  left: 18%;
  top: 44%;
  width: 38%;
  height: 60%;
  transform: skewX(-24deg) rotate(8deg);
  border-radius: 52% 48% 18% 20%;
}

.pond {
  right: 10%;
  bottom: 0;
  width: 42%;
  height: 36%;
  border-radius: 62% 38% 0 0;
}

.water-shine {
  position: absolute;
  width: 130px;
  height: 12px;
  border-radius: 50%;
  background: rgba(237, 255, 255, 0.44);
  animation: drift 4s linear infinite;
}

.shine-one {
  left: 28%;
  top: 52%;
}

.shine-two {
  left: 42%;
  top: 66%;
  animation-delay: -1.4s;
}

.shine-three {
  left: 24%;
  top: 80%;
  animation-delay: -2.8s;
}

.bank {
  position: absolute;
  bottom: 0;
  background: linear-gradient(#6f9a3e, #3f692a);
  filter: drop-shadow(0 -10px 16px rgba(27, 51, 19, 0.18));
}

.bank-left {
  left: 0;
  width: 52%;
  height: 45%;
  clip-path: polygon(0 8%, 35% 0, 62% 18%, 75% 46%, 67% 100%, 0 100%);
}

.bank-right {
  right: 0;
  width: 60%;
  height: 50%;
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 10% 100%, 0 54%);
}

.rocks {
  position: absolute;
  inset: auto 16% 16% 15%;
  height: 120px;
  background:
    radial-gradient(ellipse at 10% 70%, #7d806c 0 4%, transparent 5%),
    radial-gradient(ellipse at 18% 36%, #8d9078 0 5%, transparent 6%),
    radial-gradient(ellipse at 31% 66%, #686d5e 0 4%, transparent 5%),
    radial-gradient(ellipse at 70% 72%, #7b806b 0 5%, transparent 6%),
    radial-gradient(ellipse at 82% 45%, #9b9b7a 0 4%, transparent 5%);
}

.flowers {
  position: absolute;
  width: 130px;
  height: 80px;
  background:
    radial-gradient(circle at 18% 35%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 28% 45%, #d95d70 0 3px, transparent 4px),
    radial-gradient(circle at 55% 28%, #ffe66b 0 4px, transparent 5px),
    radial-gradient(circle at 74% 50%, #fff 0 3px, transparent 4px);
}

.flowers-a {
  left: 8%;
  bottom: 27%;
}

.flowers-b {
  right: 12%;
  bottom: 19%;
}

.reeds {
  position: absolute;
  width: 120px;
  height: 130px;
  background:
    linear-gradient(75deg, transparent 46%, #31551e 47% 50%, transparent 51%),
    linear-gradient(100deg, transparent 49%, #31551e 50% 53%, transparent 54%),
    linear-gradient(84deg, transparent 38%, #426b28 39% 42%, transparent 43%);
}

.reeds-a {
  left: 45%;
  bottom: 20%;
}

.reeds-b {
  right: 28%;
  bottom: 2%;
}

.beaver-dam {
  position: absolute;
  left: 9%;
  bottom: 26%;
  width: 270px;
  height: 70px;
  background:
    linear-gradient(20deg, transparent 0 15%, #6d4324 16% 22%, transparent 23%),
    linear-gradient(-16deg, transparent 0 18%, #7c4a28 19% 25%, transparent 26%),
    linear-gradient(8deg, transparent 0 30%, #5e371f 31% 37%, transparent 38%),
    linear-gradient(-8deg, transparent 0 42%, #8b5a34 43% 49%, transparent 50%);
  border-bottom: 10px solid rgba(72, 39, 22, 0.55);
  border-radius: 38% 34% 28% 24%;
}

.stream-bridge {
  display: none;
}

.frog-figure {
  position: absolute;
  left: 45%;
  bottom: 15%;
  width: 112px;
  height: 82px;
  background: radial-gradient(circle at 50% 35%, #7aaa38 0 42%, #4c7a2a 43% 100%);
  border-radius: 55% 55% 46% 46%;
  box-shadow: inset -12px -12px 0 rgba(34, 72, 24, 0.18);
  animation: frog-bob 3.5s ease-in-out infinite;
}

.frog-figure::before,
.frog-figure::after {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 48px;
  height: 22px;
  border-radius: 60%;
  background: #47732a;
}

.frog-figure::before {
  left: -14px;
}

.frog-figure::after {
  right: -14px;
}

.frog-eye {
  position: absolute;
  top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fffbe8;
  border: 3px solid #31511d;
}

.frog-eye::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #171b11;
}

.eye-left {
  left: 20px;
}

.eye-right {
  right: 20px;
}

.eagle {
  position: absolute;
  left: 41%;
  top: 15%;
  width: 160px;
  height: 84px;
  opacity: 0.34;
  filter: saturate(0.72) brightness(0.9);
  animation: glide 7s ease-in-out infinite;
}

.eagle .body {
  position: absolute;
  left: 64px;
  top: 28px;
  width: 36px;
  height: 32px;
  border-radius: 50%;
  background: #5c3219;
}

.eagle .body::before {
  content: "";
  position: absolute;
  right: -14px;
  top: 5px;
  width: 24px;
  height: 20px;
  border-radius: 50%;
  background: #f4f0d4;
}

.wing {
  position: absolute;
  top: 16px;
  width: 78px;
  height: 30px;
  background: #4a2816;
  border-radius: 80% 10% 80% 18%;
  transform-origin: right center;
  animation: flap 1.7s ease-in-out infinite;
}

.left-wing {
  left: 0;
}

.right-wing {
  right: 0;
  transform: scaleX(-1);
  transform-origin: left center;
}

.hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 8;
}

.hotspot::before {
  content: "";
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease;
}

.hotspot .icon {
  position: relative;
  z-index: 2;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff9df;
  font-size: 2rem;
  box-shadow: 0 0 22px var(--glow), 0 0 0 6px color-mix(in srgb, var(--glow), transparent 50%);
  transition: transform 160ms ease, filter 160ms ease;
}

.animal-icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.9), transparent 21%),
    linear-gradient(145deg, #fff6d8, #e2d2a8);
}

.animal-icon::before {
  display: block;
  filter: drop-shadow(0 2px 1px rgba(31, 33, 17, 0.22));
  font-size: 1.95rem;
  line-height: 1;
}

.wolf-icon::before { content: "\1F43A"; }
.beaver-icon::before { content: "\1F9AB"; }
.eagle-icon::before { content: "\1F985"; }
.bat-icon::before { content: "\1F987"; }
.frog-icon::before { content: "\1F438"; }

.mini-icon .animal-icon,
.badge-slot .animal-icon {
  width: 34px;
  height: 34px;
}

.mini-icon .animal-icon::before,
.badge-slot .animal-icon::before {
  font-size: 1.35rem;
}

.hotspot strong {
  position: relative;
  z-index: 2;
  max-width: 150px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fffdf5;
  box-shadow: 0 3px 10px rgba(28, 34, 17, 0.18);
  font-size: 1rem;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  transition: opacity 160ms ease, transform 160ms ease;
}

.hotspot:not(.found) {
  width: 74px;
  height: 62px;
}

.hotspot:not(.found)::before {
  opacity: 0.56;
}

.hotspot:not(.found):hover::before,
.hotspot:not(.found):focus-visible::before {
  opacity: 1;
  filter: brightness(1.2) drop-shadow(0 0 9px rgba(255, 249, 203, 0.8));
  transform: scale(1.08);
}

.hotspot:not(.found) .icon,
.hotspot:not(.found) strong {
  opacity: 0;
  transform: scale(0.72);
}

.hotspot:not(.found) .pulse {
  width: 54px;
  height: 54px;
  top: 14px;
  opacity: 0;
  animation: none;
}

.hotspot.hinting:not(.found) .pulse {
  opacity: 0.1;
  animation: pulse 3.8s ease-out 1;
}

.hotspot.hinting:not(.found)::before {
  opacity: 0.82;
  filter: brightness(1.1) drop-shadow(0 0 6px rgba(255, 249, 203, 0.45));
}

.hotspot[data-species="wolf"]:not(.found)::before {
  width: 78px;
  height: 44px;
  background:
    radial-gradient(circle at 18% 58%, rgba(39, 54, 33, 0.72) 0 6px, transparent 7px),
    radial-gradient(circle at 28% 34%, rgba(39, 54, 33, 0.62) 0 3px, transparent 4px),
    radial-gradient(circle at 16% 30%, rgba(39, 54, 33, 0.62) 0 3px, transparent 4px),
    radial-gradient(circle at 7% 42%, rgba(39, 54, 33, 0.62) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 58%, rgba(39, 54, 33, 0.7) 0 6px, transparent 7px),
    radial-gradient(circle at 60% 34%, rgba(39, 54, 33, 0.58) 0 3px, transparent 4px),
    radial-gradient(circle at 48% 30%, rgba(39, 54, 33, 0.58) 0 3px, transparent 4px),
    radial-gradient(circle at 39% 42%, rgba(39, 54, 33, 0.58) 0 3px, transparent 4px);
  transform: rotate(17deg);
}

.hotspot[data-species="beaver"]:not(.found)::before {
  width: 94px;
  height: 46px;
  border-bottom: 7px solid rgba(70, 45, 28, 0.72);
  border-radius: 0 0 55% 55%;
  background:
    linear-gradient(18deg, transparent 0 29%, rgba(93, 56, 31, 0.76) 30% 38%, transparent 39%),
    linear-gradient(-13deg, transparent 0 37%, rgba(100, 61, 35, 0.72) 38% 45%, transparent 46%),
    linear-gradient(8deg, transparent 0 49%, rgba(70, 44, 27, 0.72) 50% 57%, transparent 58%);
}

.hotspot[data-species="eagle"]:not(.found)::before {
  width: 72px;
  height: 28px;
  border-radius: 80% 8% 80% 12%;
  background: linear-gradient(100deg, rgba(98, 86, 68, 0.34), rgba(178, 169, 139, 0.24));
  box-shadow: 22px 12px 0 -8px rgba(255, 250, 222, 0.34);
  opacity: 0.34;
  transform: rotate(-18deg);
}

.hotspot[data-species="eagle"]:not(.found):hover::before,
.hotspot[data-species="eagle"]:not(.found):focus-visible::before {
  opacity: 0.58;
  filter: brightness(1.02) drop-shadow(0 0 4px rgba(255, 249, 203, 0.24));
}

.hotspot[data-species="bat"]:not(.found)::before {
  width: 82px;
  height: 58px;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(34, 25, 34, 0.8) 0 18%, transparent 19%),
    radial-gradient(ellipse at 28% 44%, rgba(34, 25, 34, 0.72) 0 26%, transparent 27%),
    radial-gradient(ellipse at 72% 44%, rgba(34, 25, 34, 0.72) 0 26%, transparent 27%);
  clip-path: polygon(4% 45%, 22% 24%, 37% 42%, 50% 20%, 63% 42%, 78% 24%, 96% 45%, 78% 70%, 57% 58%, 50% 80%, 43% 58%, 22% 70%);
}

.hotspot[data-species="frog"]:not(.found)::before {
  width: 58px;
  height: 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 52%, rgba(238, 255, 211, 0.42) 0 4px, transparent 5px),
    radial-gradient(circle at 45% 44%, rgba(238, 255, 211, 0.34) 0 3px, transparent 4px),
    radial-gradient(circle at 57% 56%, rgba(238, 255, 211, 0.34) 0 3px, transparent 4px),
    repeating-radial-gradient(ellipse at 48% 58%, rgba(173, 216, 139, 0.22) 0 2px, transparent 3px 10px);
  transform: rotate(-8deg);
}

.hotspot[data-species="otter"]:not(.found)::before {
  width: 74px;
  height: 28px;
  border-radius: 58% 46% 54% 42%;
  background:
    radial-gradient(circle at 81% 38%, rgba(76, 50, 31, 0.66) 0 7px, transparent 8px),
    radial-gradient(ellipse at 38% 55%, rgba(76, 50, 31, 0.62) 0 34%, transparent 35%),
    linear-gradient(95deg, rgba(86, 60, 38, 0.6), rgba(44, 76, 77, 0.22));
  box-shadow: -16px 7px 0 -11px rgba(58, 91, 91, 0.5);
  transform: rotate(-12deg);
}

.hotspot[data-species="turtle"]:not(.found)::before {
  width: 52px;
  height: 34px;
  border-radius: 55% 50% 48% 52%;
  background:
    radial-gradient(circle at 76% 48%, rgba(73, 91, 43, 0.54) 0 5px, transparent 6px),
    radial-gradient(ellipse at 42% 52%, rgba(54, 72, 36, 0.72) 0 50%, transparent 51%),
    linear-gradient(105deg, rgba(173, 180, 98, 0.18), rgba(54, 72, 36, 0.32));
  box-shadow: 0 0 0 2px rgba(238, 255, 211, 0.12) inset;
  transform: rotate(9deg);
}

.hotspot[data-species="firebelly"]:not(.found)::before {
  width: 46px;
  height: 30px;
  border-radius: 48% 54% 45% 55%;
  background:
    radial-gradient(circle at 32% 54%, rgba(255, 132, 52, 0.52) 0 4px, transparent 5px),
    radial-gradient(circle at 55% 42%, rgba(255, 154, 61, 0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 64% 61%, rgba(255, 132, 52, 0.38) 0 3px, transparent 4px),
    radial-gradient(ellipse at 50% 56%, rgba(52, 73, 35, 0.58) 0 60%, transparent 61%);
  transform: rotate(-6deg);
}

.hotspot:hover .icon,
.hotspot:focus-visible .icon {
  transform: scale(1.12);
  filter: saturate(1.15);
}

.hotspot.found .icon {
  filter: grayscale(0.1) brightness(0.95);
}

.hotspot.found::after {
  content: "\2713";
  position: absolute;
  top: -8px;
  right: 20px;
  z-index: 4;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #4e813b;
  color: white;
  font-weight: 900;
}

.pulse {
  position: absolute;
  top: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--glow);
  opacity: 0.5;
  animation: pulse 1.8s ease-out infinite;
}

.yellow { --glow: #ffe66b; }
.green { --glow: #a7ff66; }
.blue { --glow: #78ddff; }
.violet { --glow: #9b74ff; }
.lime { --glow: #bbff5c; }
.teal { --glow: #67d6c2; }
.olive { --glow: #b6d86b; }
.orange { --glow: #ff9b55; }

.task-panel {
  align-self: start;
  height: calc(100% + 42px);
  min-height: 682px;
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  position: relative;
  z-index: 6;
  width: 100%;
  margin: -22px 0 -18px 0;
  padding: 140px 58px 136px 68px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: url("assets/menu-panel-cut.png") center top / 100% 100% no-repeat;
  box-shadow: none;
}

.task-heading {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  color: #fff;
  background: #315c83;
  border-radius: 7px;
  box-shadow: 0 4px 0 #1f3e5d;
  text-transform: uppercase;
}

.task-heading strong {
  font-size: 1.05rem;
}

.task-heading span {
  font-size: 2rem;
}

.task-panel h2 {
  margin: 4px 0 0;
  color: #26331f;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 1.12rem;
  line-height: 1.22;
  font-weight: 900;
  text-align: center;
}

.task-panel p {
  margin: 0;
  color: #31342c;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.3;
  text-align: center;
}

.divider {
  height: 2px;
  margin: 4px 0;
  background: rgba(125, 94, 45, 0.22);
}

.task-panel h3 {
  margin: 0;
  color: #5f813b;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.stage-side-panel {
  display: none;
}

.stage-side-panel.active {
  display: grid;
  gap: 10px;
  align-content: start;
}

.memo-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.memo-guide-item {
  position: relative;
  min-height: 86px;
  border: 0;
  border-radius: 14px;
  padding: 6px;
  background: rgba(255, 250, 232, 0.72);
  box-shadow: inset 0 0 0 2px rgba(108, 130, 66, 0.18), 0 4px 8px rgba(38, 48, 24, 0.12);
  cursor: pointer;
}

.memo-guide-item span {
  display: block;
  width: 100%;
  height: 52px;
  border-radius: 11px;
  background: var(--memo-img) center / cover no-repeat;
}

.memo-guide-item small {
  display: block;
  margin-top: 4px;
  color: #26331f;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.memo-guide-item b {
  position: absolute;
  right: 4px;
  top: 4px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff3a9;
  color: #4a3b18;
  font-size: 0.8rem;
  box-shadow: 0 2px 5px rgba(38, 48, 24, 0.22);
}

body[data-stage="meadow"] #trace-start-overlay,
body[data-stage="forest"] #forest-start-button {
  display: none !important;
}

.species-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.species-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #777;
  font-weight: 800;
}

.species-list .mini-icon,
.badge-slot {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f6f7f3;
  border: 3px solid #d1d4cf;
  filter: grayscale(1);
}

.species-list .mini-icon {
  background: transparent;
  border: 0;
}

.species-list .mini-icon .animal-icon {
  background: transparent;
}

.species-list li.found {
  color: #1f2219;
  cursor: pointer;
}

.species-list li.found:focus-visible {
  outline: 2px solid rgba(91, 138, 61, 0.58);
  outline-offset: 3px;
  border-radius: 10px;
}

.species-list li.found .mini-icon,
.badge-slot.filled {
  border-color: var(--slot-color);
  filter: none;
  background: transparent;
}

.check {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #5d8a3d;
  color: white;
  font-weight: 900;
  opacity: 0;
}

.species-list li.found .check {
  opacity: 1;
}

.award-card {
  position: relative;
  margin-top: auto;
  min-height: 98px;
  padding: 18px 84px 16px 18px;
  border-radius: 12px;
  background: #eee4d2;
  box-shadow: inset 0 0 0 2px rgba(137, 112, 78, 0.16);
}

.award-card strong,
.award-card span {
  display: block;
}

.award-card i {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #c9bfa9;
  border: 4px solid #d9cbb3;
  font-style: normal;
  font-size: 2.4rem;
}

.bottom-bar {
  position: relative;
  height: 176px;
  min-height: 176px;
  max-height: 176px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(520px, 760px) minmax(220px, 1fr);
  gap: 18px;
  align-items: center;
  padding: 10px 18px;
  border-radius: 18px 18px 0 0;
  background: rgba(199, 186, 134, 0.92);
}

.guide {
  position: relative;
  --guide-x: 16px;
  --guide-w: 285px;
  display: grid;
  grid-template-columns: 290px minmax(260px, 1fr);
  align-items: end;
  gap: 10px;
  min-height: 170px;
}

.guide-avatar {
  position: absolute;
  left: -70px;
  bottom: -7px;
  z-index: 17;
  width: 315px;
  height: 455px;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  color: transparent;
  align-self: stretch;
  background: url("assets/forester-guide-cropped.png") center bottom / contain no-repeat;
  filter:
    drop-shadow(4px 0 0 rgba(255, 248, 219, 0.42))
    drop-shadow(-4px 0 0 rgba(255, 248, 219, 0.42))
    drop-shadow(0 -4px 0 rgba(255, 248, 219, 0.35))
    drop-shadow(0 12px 10px rgba(31, 38, 17, 0.28));
  pointer-events: auto;
  transform: scaleX(-1);
  transform-origin: bottom center;
  opacity: 0.95;
}

.guide-avatar:focus-visible {
  outline: 3px solid rgba(49, 92, 131, 0.8);
  outline-offset: 4px;
}

.speech {
  position: absolute;
  left: -190px;
  top: -394px;
  z-index: 18;
  grid-column: 2;
  width: 450px;
  max-width: calc(100vw - 610px);
  min-height: 118px;
  padding: 24px 34px;
  border-radius: 22px;
  background: rgba(255, 248, 233, 0.66);
  box-shadow: 0 6px 12px rgba(52, 45, 31, 0.18);
  backdrop-filter: blur(2px);
  text-align: center;
  transition: background 180ms ease, opacity 180ms ease, box-shadow 180ms ease, transform 180ms ease, visibility 180ms ease;
}

body[data-stage="meadow"] .guide-avatar {
  left: -78px;
  bottom: -48px;
  width: 260px;
  height: 270px;
  background-position: center top;
  background-size: 260px auto;
}

body[data-stage="meadow"] .speech {
  left: -118px;
  top: -16px;
  width: 460px;
  min-height: 118px;
  padding: 18px 24px;
}

body[data-stage="meadow"] .speech h2,
body[data-stage="meadow"] .speech p {
  display: block;
}

body[data-stage="meadow"] .speech h2 {
  font-size: 1.35rem;
}

body[data-stage="meadow"] .speech p {
  font-size: 0.98rem;
}

body[data-stage="meadow"] .speech::before {
  left: -14px;
  bottom: 34px;
  border-top-color: transparent;
  border-right-color: rgba(255, 248, 233, 0.7);
}

.trace-callout {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  justify-content: start;
  gap: 14px;
  margin-top: 10px;
  text-align: left;
}

.trace-callout[hidden] {
  display: none !important;
}

.trace-callout .animal-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
}

.trace-callout .track-sample {
  width: 84px;
  height: 58px;
  background: transparent;
}

.trace-callout strong {
  font-size: 1.35rem;
  font-weight: 900;
  text-transform: capitalize;
}

.speech.speech-intro {
  width: 560px;
  max-width: calc(100vw - 500px);
  min-height: 0;
  padding: 28px 34px 30px;
  background: rgba(255, 248, 233, 0.96);
  transform: translateY(-64px);
}

.speech.speech-intro h2 {
  margin: 0 0 12px;
  font-size: 2.1rem;
  line-height: 1.04;
}

.speech.speech-intro p {
  max-width: 480px;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.34;
  text-align: center;
}

.speech-action {
  position: relative;
  display: block;
  min-height: 46px;
  margin: 16px auto 0;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: #315c83;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  box-shadow: 0 4px 0 #1f3e5d;
}

.speech-action[hidden] {
  display: none;
}

.speech-action::before {
  content: none;
}

.speech.speech-intro #guide-start-button {
  display: none;
}

.speech.speech-hidden {
  opacity: 0.015;
  visibility: visible;
  transform: translateY(8px);
  pointer-events: none;
}

.speech.speech-muted {
  opacity: 0.58;
  pointer-events: none;
}

.speech.speech-intro.speech-hidden {
  transform: translateY(-56px);
}

.guide:hover .speech,
.guide:focus-within .speech {
  background: rgba(255, 248, 233, 0.98);
  box-shadow: 0 9px 18px rgba(52, 45, 31, 0.24);
}

.speech::before {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -28px;
  border: 14px solid transparent;
  border-top-color: rgba(255, 248, 233, 0.7);
  transition: border-right-color 180ms ease;
}

.guide:hover .speech::before,
.guide:focus-within .speech::before {
  border-top-color: rgba(255, 248, 233, 0.98);
}

.speech h2 {
  margin: 0 0 8px;
  font-size: 1.45rem;
  line-height: 1.12;
}

.speech p {
  margin: 0 auto;
  max-width: 560px;
  line-height: 1.34;
  text-align: center;
}

.fact-strip {
  position: absolute;
  left: calc((100% - 354px) / 2);
  top: 14px;
  bottom: auto;
  z-index: 30;
  transform: translateX(-50%);
  justify-self: center;
  width: min(520px, calc(100% - 400px));
  min-height: 68px;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 10px;
  border-radius: 14px;
  color: #26331f;
  background:
    linear-gradient(135deg, rgba(255, 251, 232, 0.72), rgba(225, 236, 205, 0.68)),
    radial-gradient(circle at 12% 18%, rgba(125, 167, 69, 0.24), transparent 34%);
  box-shadow: inset 0 0 0 2px rgba(75, 111, 45, 0.16), 0 8px 18px rgba(44, 55, 22, 0.14);
  overflow: hidden;
  cursor: pointer;
}

.fact-strip.fact-bottom {
  top: auto;
  bottom: 14px;
}

.fact-strip:focus-visible {
  outline: 3px solid rgba(49, 92, 131, 0.9);
  outline-offset: 4px;
}

.fact-strip::after {
  display: none;
}

.stage-restart-button {
  position: absolute;
  left: 22px;
  top: 20px;
  z-index: 32;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 248, 224, 0.42);
  color: #315c23;
  font-size: 2.25rem;
  font-weight: 900;
  text-indent: -999px;
  box-shadow: 0 5px 12px rgba(33, 43, 19, 0.18), inset 0 0 0 3px rgba(116, 146, 70, 0.24);
  cursor: pointer;
}

.stage-restart-button::before {
  content: "\21BB";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-indent: 0;
  line-height: 1;
}

.stage-sound-button {
  position: absolute;
  left: calc((100% - 500px) - 92px);
  bottom: 22px;
  z-index: 32;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #315c23;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 238, 0.9), rgba(244, 228, 180, 0.72) 54%, rgba(117, 86, 43, 0.52) 100%);
  box-shadow: 0 5px 12px rgba(33, 43, 19, 0.18), inset 0 0 0 3px rgba(116, 146, 70, 0.28), inset 0 -6px 12px rgba(92, 62, 28, 0.14);
  cursor: pointer;
  overflow: hidden;
  font-size: 2rem;
  font-weight: 950;
  text-shadow: 0 1px 0 rgba(255, 255, 238, 0.8);
  text-indent: -999px;
}

.stage-sound-button::before {
  content: "\266B";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-indent: 0;
  line-height: 1;
}

.stage-sound-button[aria-pressed="false"]::before {
  content: "\266A";
  opacity: 0.68;
}

.stage-sound-button[aria-pressed="false"]::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(120, 42, 30, 0.82);
  transform: rotate(-38deg);
  box-shadow: 0 1px 0 rgba(255, 245, 220, 0.42);
}

.stage-sound-button:hover,
.stage-sound-button:focus-visible {
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 238, 0.98), rgba(248, 236, 194, 0.88) 54%, rgba(129, 97, 50, 0.62) 100%);
  outline: 3px solid rgba(49, 92, 131, 0.85);
  outline-offset: 3px;
}

.stage-restart-button:hover,
.stage-restart-button:focus-visible {
  background: rgba(255, 250, 232, 0.96);
  outline: 3px solid rgba(49, 92, 131, 0.85);
  outline-offset: 3px;
}

.fact-orbit {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fffbe8;
  border: 4px solid rgba(95, 127, 49, 0.28);
  box-shadow: 0 0 0 7px rgba(95, 127, 49, 0.08);
  font-size: 1.2rem;
  align-self: center;
}

.fact-copy {
  min-width: 0;
  text-align: center;
}

.fact-copy small {
  display: block;
  margin-bottom: 5px;
  color: #55742e;
  font-size: 0.92rem;
  font-weight: 900;
  text-transform: uppercase;
}

.fact-copy small[hidden] {
  display: none;
}

.fact-copy p {
  max-width: 410px;
  margin: 0 auto;
  font-size: 0.96rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}

.achievements-intro {
  max-width: 620px;
  margin: -4px 0 18px;
  color: #425038;
  line-height: 1.4;
  text-align: center;
}

.fact-dots {
  display: none;
}

.fact-dots span {
  height: 3px;
  border-radius: 99px;
  background: transparent;
}

.fact-dots span.active {
  background: #5f7f31;
}

.backpack {
  position: relative;
  display: block;
  justify-self: end;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 500px;
  height: 146px;
  min-height: 146px;
  margin-right: -18px;
  padding: 0;
  color: #fff4d9;
  background: url("assets/odznaki-board.png") center center / contain no-repeat;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.bag {
  display: none;
}

.backpack strong {
  position: absolute;
  left: 34px;
  top: 54px;
  width: 96px;
  color: transparent;
  pointer-events: none;
}

.badge-row {
  position: absolute;
  inset: 0;
  display: block;
}

.badge-slot {
  position: absolute;
  width: 42px;
  height: 42px;
  border-style: dashed;
  font-size: 1.45rem;
  opacity: 0.78;
  transform: translate(-50%, -50%);
}

.badge-slot:nth-child(1) { left: 34.8%; top: 50%; }
.badge-slot:nth-child(2) { left: 48.1%; top: 50%; }
.badge-slot:nth-child(3) { left: 61.6%; top: 50%; }
.badge-slot:nth-child(4) { left: 75%; top: 50%; }
.badge-slot:nth-child(5) { left: 88%; top: 50%; }

.badge-slot.filled {
  border-style: solid;
  opacity: 1;
  animation: pop 240ms ease-out;
}

.info-dialog {
  width: min(860px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 18px;
  border: 0;
  border-radius: 18px;
  background: #fff9ed;
  box-shadow: 0 24px 80px rgba(14, 23, 12, 0.4);
  overflow: hidden;
}

.fact-dialog {
  width: min(560px, calc(100vw - 28px));
  padding: 24px;
  border: 0;
  border-radius: 16px;
  background: #fff9ed;
  color: #24311e;
  box-shadow: 0 24px 80px rgba(14, 23, 12, 0.4);
}

.fact-dialog::backdrop {
  background: rgba(20, 35, 16, 0.5);
  backdrop-filter: blur(2px);
}

.fact-dialog-header {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  padding-right: 40px;
}

.fact-dialog-header span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef7dc;
  font-size: 2rem;
}

.fact-dialog-header p {
  margin: 0 0 3px;
  color: #5f813b;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.fact-dialog-header h2 {
  margin: 0;
  line-height: 1.08;
}

.fact-dialog > p {
  margin: 18px 0 0;
  font-size: 1.05rem;
  line-height: 1.5;
}

.camera-photo-dialog {
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100dvh - 18px);
  padding: 18px;
  border: 0;
  border-radius: 16px;
  background: #fff9ed;
  color: #24311e;
  font-size: 0.96rem;
  box-shadow: 0 24px 80px rgba(14, 23, 12, 0.4);
  overflow: hidden;
}

.camera-photo-dialog::backdrop {
  background: rgba(5, 10, 6, 0.72);
  backdrop-filter: blur(2px);
}

.camera-photo-dialog-scroll {
  display: grid;
  gap: 12px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.camera-photo-dialog-header {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  padding-right: 42px;
}

.camera-photo-dialog-header span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf5dc;
  color: #42642b;
  font-size: 2rem;
  font-weight: 950;
}

.camera-photo-dialog-label {
  margin: 0 0 3px;
  color: #5f813b;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.camera-photo-dialog-header h2 {
  margin: 0;
  line-height: 1.08;
}

.camera-photo-figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #1b2515;
  box-shadow: inset 0 0 0 1px rgba(36, 49, 30, 0.12);
}

.camera-photo-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 280px;
  object-fit: cover;
}

.camera-photo-figure figcaption {
  margin: 0;
  padding: 8px 10px;
  background: rgba(255, 249, 237, 0.94);
  color: #4b583e;
  font-size: 0.78rem;
  line-height: 1.28;
}

.camera-photo-quiz {
  display: grid;
  gap: 12px;
}

.camera-photo-quiz-topline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.camera-photo-quiz-topline p {
  margin: 0;
  font-weight: 900;
  line-height: 1.25;
}

.camera-photo-quiz-topline strong {
  min-width: 70px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #27471e;
  color: #fff7d8;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.camera-photo-answers {
  display: grid;
  gap: 8px;
}

.camera-photo-answer {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(77, 103, 50, 0.24);
  border-radius: 9px;
  background: #f7efd3;
  color: #26331f;
  font: inherit;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.camera-photo-answer:hover,
.camera-photo-answer:focus-visible {
  background: #edf7d8;
  outline: 2px solid rgba(103, 143, 55, 0.42);
  outline-offset: 2px;
}

.camera-photo-answer:disabled {
  cursor: default;
  opacity: 0.78;
}

.camera-photo-answer.is-correct {
  background: #dff3cf;
  border-color: #5f9b39;
}

.camera-photo-answer.is-wrong {
  background: #f5d5cb;
  border-color: #b64c37;
}

.camera-photo-status {
  min-height: 1.4em;
  margin: 0;
  color: #56624c;
  font-weight: 850;
}

.camera-photo-status[data-mode="success"] {
  color: #2f7c28;
}

.camera-photo-status[data-mode="fail"] {
  color: #a43d25;
}

.camera-photo-dialog.is-captured {
  width: min(680px, calc(100vw - 24px));
  padding: clamp(12px, 2vw, 24px);
  background: rgba(8, 12, 8, 0.76);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.48);
}

.camera-photo-dialog.is-captured .camera-photo-dialog-scroll {
  min-height: min(72dvh, 680px);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "polaroid";
  place-items: center;
  align-content: center;
  justify-content: center;
}

.camera-photo-dialog.is-captured .camera-photo-dialog-header,
.camera-photo-dialog.is-captured .camera-photo-quiz {
  display: none;
}

.camera-photo-dialog.is-captured .camera-photo-figure {
  position: relative;
  width: min(520px, 76vw, 68dvh);
  margin: 0;
  grid-area: polaroid;
  display: grid;
  gap: clamp(8px, 1.2vw, 14px);
  padding: clamp(10px, 1.4vw, 18px) clamp(10px, 1.4vw, 18px) clamp(18px, 2.4vw, 30px);
  border-radius: 4px;
  background: linear-gradient(180deg, #fffdf4 0%, #f5edd8 100%);
  box-shadow:
    0 26px 62px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(77, 62, 35, 0.1);
  transform: rotate(-1.5deg);
  animation: camera-polaroid-develop 520ms ease-out both;
}

.camera-photo-dialog.is-captured .camera-photo-figure img {
  width: 100%;
  max-height: min(54dvh, 460px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.05) brightness(1.02);
}

.camera-photo-dialog.is-captured .camera-photo-figure figcaption {
  position: static;
  display: block;
  max-height: 3.75em;
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: #4f432b;
  font-size: clamp(0.72rem, 1.2vw, 0.9rem);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.camera-photo-dialog.is-captured .camera-photo-figure::after {
  content: "Zdjęcie zapisane";
  position: absolute;
  left: 50%;
  top: clamp(16px, 2.1vw, 26px);
  bottom: auto;
  transform: translateX(-50%) rotate(1.8deg);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(71, 121, 49, 0.9);
  color: #fff9df;
  font-size: clamp(0.58rem, 1vw, 0.72rem);
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes camera-polaroid-develop {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.92) rotate(-3deg);
    filter: saturate(0.4) contrast(0.82) brightness(1.35);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(-1.5deg);
    filter: saturate(1) contrast(1) brightness(1);
  }
}

.info-dialog::backdrop {
  background: rgba(20, 35, 16, 0.5);
  backdrop-filter: blur(2px);
}

.close-dialog {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #e6dcc9;
  cursor: pointer;
  font-size: 1.6rem;
}

.dialog-icon {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef7dc;
  font-size: 1.9rem;
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 38px;
}

.dialog-header p {
  margin: 0 0 4px;
  color: #5f813b;
  font-weight: 900;
  font-style: italic;
}

.dialog-header h2 {
  margin: 0;
  line-height: 1.05;
  font-size: 1.45rem;
}

.info-dialog p {
  line-height: 1.34;
}

.species-card-layout {
  display: grid;
  grid-template-columns: minmax(210px, 0.62fr) minmax(330px, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.animal-photo {
  min-height: 230px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(63, 82, 42, 0.18);
  overflow: hidden;
}

.animal-photo figcaption {
  align-self: end;
  width: 100%;
  max-width: none;
  padding: 9px 11px;
  background: rgba(18, 32, 14, 0.72);
  color: #fff9ec;
  font-weight: 800;
  line-height: 1.22;
  font-size: 0.82rem;
  text-align: left;
  backdrop-filter: blur(2px);
}

.species-details > p {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 0.93rem;
}

.facts-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 8px;
  background: #fffdf6;
  box-shadow: 0 0 0 1px #e1d6c3;
}

.facts-table th,
.facts-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #eadfcb;
  vertical-align: top;
  line-height: 1.24;
  font-size: 0.82rem;
}

.facts-table th {
  width: 34%;
  color: #4f7135;
  text-align: left;
}

.facts-table tr:last-child th,
.facts-table tr:last-child td {
  border-bottom: 0;
}

.map-and-notes {
  display: grid;
  grid-template-columns: minmax(310px, 0.95fr) minmax(280px, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.map-and-notes > section:first-child {
  display: grid;
  grid-template-columns: 132px 1fr;
  column-gap: 12px;
  align-items: center;
}

.map-and-notes > section:first-child h3 {
  grid-column: 1 / -1;
}

.map-and-notes h3 {
  margin: 0 0 7px;
  color: #315c23;
  font-size: 1rem;
}

.poland-map {
  position: relative;
  width: min(132px, 100%);
  aspect-ratio: 220 / 260;
  margin: 0;
}

.poland-map img,
.poland-map svg {
  display: block;
  width: 100%;
  height: 100%;
}

.poland-map img {
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(49, 92, 35, 0.18));
}

.poland-map svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.range-layer {
  fill: rgba(212, 33, 61, 0.42);
  stroke: rgba(151, 26, 45, 0.38);
  stroke-width: 2;
  mix-blend-mode: multiply;
}

.range-wolf .range-a { cx: 160px; cy: 62px; rx: 34px; ry: 30px; }
.range-wolf .range-b { cx: 150px; cy: 194px; rx: 34px; ry: 28px; }
.range-wolf .range-c { cx: 62px; cy: 132px; rx: 36px; ry: 28px; }

.range-beaver .range-a { cx: 110px; cy: 130px; rx: 82px; ry: 88px; fill: rgba(212, 33, 61, 0.26); }
.range-beaver .range-b { cx: 112px; cy: 135px; rx: 54px; ry: 54px; }

.range-eagle .range-a { cx: 163px; cy: 124px; rx: 32px; ry: 56px; }
.range-eagle .range-b { cx: 142px; cy: 198px; rx: 34px; ry: 30px; }

.range-bat .range-a { cx: 108px; cy: 130px; rx: 78px; ry: 78px; fill: rgba(212, 33, 61, 0.24); }
.range-bat .range-b { cx: 110px; cy: 112px; rx: 45px; ry: 36px; }
.range-bat .range-c { cx: 138px; cy: 194px; rx: 42px; ry: 28px; }

.range-frog .range-a { cx: 108px; cy: 130px; rx: 80px; ry: 82px; fill: rgba(212, 33, 61, 0.3); }
.range-frog .range-b { cx: 112px; cy: 168px; rx: 46px; ry: 34px; }

.map-caption {
  margin: 0;
  line-height: 1.28;
  font-size: 0.86rem;
}

.trivia-list {
  margin: 0;
  padding-left: 20px;
}

.trivia-list li {
  margin-bottom: 5px;
  line-height: 1.25;
  font-size: 0.88rem;
}

.source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.source-links a {
  padding: 6px 10px;
  border-radius: 999px;
  background: #e8f0da;
  color: #315c23;
  font-weight: 900;
  text-decoration: none;
}

.trace-game {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(rgba(32, 66, 24, 0.06), rgba(32, 66, 24, 0.14)),
    url("assets/polana.png") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(39, 55, 20, 0.25), var(--shadow);
}

.meadow-complete .trace-game {
  background:
    linear-gradient(rgba(32, 66, 24, 0.02), rgba(32, 66, 24, 0.08)),
    url("assets/polana-complete.png") center top / cover no-repeat;
}

.trace-field {
  position: absolute;
  inset: 0;
}

.trace-map-status {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  display: none;
}

.trace-game.running .trace-map-status {
  display: block;
}

.trace-map-status span {
  position: absolute;
  color: #fff8dd;
  font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 3px 0 rgba(69, 42, 19, 0.9), 0 0 10px rgba(22, 30, 14, 0.55);
}

.trace-map-status span:first-child {
  right: 24px;
  top: 20px;
  font-size: 2.65rem;
  text-align: right;
}

.trace-map-status span:last-child {
  right: 24px;
  top: 74px;
  font-size: 2.3rem;
  text-align: right;
}

.panel-start-button,
.stage-finish {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  background: #315c83;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 #1f3e5d;
}

.panel-start-button {
  width: 100%;
  margin-top: auto;
}

#trace-start-button {
  display: none;
}

.panel-start-button:disabled {
  opacity: 0.72;
  cursor: default;
}

.trace-side-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}

.trace-side-status span:first-child {
  grid-column: 1 / -1;
}

.trace-side-status span {
  padding: 4px 2px;
  border-radius: 0;
  background: transparent;
  color: #315c23;
  font-weight: 900;
  text-align: center;
}

.track-guide {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 8px 10px;
  padding: 4px 2px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.track-sample {
  position: relative;
  width: 52px;
  height: 36px;
  display: block;
  justify-self: center;
  border-radius: 8px;
  background: rgba(255, 253, 246, 0.58);
}

.track-sample::before {
  content: "";
  position: absolute;
  inset: 4px;
}

.trace-item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 5;
  width: 78px;
  height: 58px;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%) rotate(var(--rot)) scale(var(--scale, 1));
  cursor: pointer;
  animation: trace-fade 2.1s linear forwards;
}

.trace-start-overlay {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 22px;
  z-index: 12;
  min-width: 176px;
  min-height: 64px;
  border: 0;
  border-radius: 999px;
  padding: 0 28px;
  background: linear-gradient(180deg, #4f8a47, #2e6087);
  color: #fff;
  font-weight: 900;
  font-size: 1.35rem;
  cursor: pointer;
  transform: translateX(-50%);
  box-shadow: 0 7px 0 #1f3e5d, 0 12px 24px rgba(22, 35, 16, 0.24), inset 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.trace-start-overlay[hidden] {
  display: none;
}

.plant-guide {
  display: grid;
  gap: 8px;
  padding: 4px 2px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.plant-guide-item {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  align-items: center;
  gap: 8px 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.plant-guide-item:focus-visible {
  outline: 2px solid rgba(82, 122, 48, 0.55);
  outline-offset: 3px;
}

.weed-row {
  cursor: default;
}

.plant-guide strong {
  font-size: 0.92rem;
  line-height: 1.15;
}

.plant-guide b {
  min-width: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: #315c23;
}

.plant-thumb {
  width: 52px;
  height: 52px;
  display: block;
  justify-self: center;
  border-radius: 8px;
  background: var(--plant-img) center bottom / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(29, 43, 18, 0.25));
}

.weed-thumb {
  display: grid;
  place-items: center;
  background: transparent;
  color: #7d4f2c;
  font-weight: 900;
  font-size: 1.3rem;
}

.plant-item {
  width: 98px;
  height: 112px;
  background: var(--plant-img) center bottom / contain no-repeat;
  filter: drop-shadow(0 5px 4px rgba(18, 30, 12, 0.42)) saturate(1.18) contrast(1.05);
}

.plant-item.fake-plant {
  width: 98px;
  height: 110px;
  background: var(--plant-img) center bottom / contain no-repeat;
  filter: drop-shadow(0 4px 4px rgba(18, 30, 12, 0.3)) saturate(0.95);
}

.plant-item::before {
  content: none !important;
}

.plant-item.correct {
  filter: drop-shadow(0 0 9px rgba(255, 244, 118, 0.9)) saturate(1.25);
}

.plant-item.wrong {
  filter: grayscale(0.4) drop-shadow(0 0 9px rgba(160, 45, 36, 0.78));
}

.plant-summary {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.plant-summary.completed {
  display: block;
  padding: 0;
}

.summary-plant {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 92px;
  height: 112px;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(var(--summary-scale, 1));
  filter: drop-shadow(0 6px 5px rgba(23, 34, 14, 0.32));
}

.plant-summary.completed .summary-plant {
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
  gap: 8px;
  background: none;
  box-shadow: none;
  padding: 0;
}

.summary-badge {
  width: 100px;
  height: 100px;
  display: block;
  border-radius: 50%;
  background: #fff9ec center center / contain no-repeat;
  background-image: var(--plant-img);
  box-shadow: inset 0 0 0 4px rgba(95, 127, 49, 0.15), 0 8px 14px rgba(23, 34, 14, 0.18);
}

.summary-label {
  display: block;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #344222;
  font-weight: 900;
  text-align: center;
  line-height: 1.1;
  box-shadow: 0 4px 10px rgba(23, 34, 14, 0.12);
}

.plant-bubble-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef7dc;
  font-size: 2rem;
}

.trace-item.eagle,
.track-sample.eagle-track {
  position: relative;
  opacity: 1;
  filter: none;
}

.trace-item.eagle {
  left: var(--x);
  top: var(--y);
  width: 78px;
  height: 58px;
  animation: trace-fade 2.1s linear forwards;
}

.track-sample.eagle-track {
  left: auto;
  top: auto;
  width: 84px;
  height: 58px;
  animation: none;
  transform: none;
}

.trace-item[style*="--near"] {
  width: 78px;
  height: 56px;
}

.trace-item.track::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 58%, rgba(38, 50, 29, 0.72) 0 6px, transparent 7px),
    radial-gradient(circle at 31% 33%, rgba(38, 50, 29, 0.62) 0 3px, transparent 4px),
    radial-gradient(circle at 18% 28%, rgba(38, 50, 29, 0.62) 0 3px, transparent 4px),
    radial-gradient(circle at 7% 42%, rgba(38, 50, 29, 0.62) 0 3px, transparent 4px),
    radial-gradient(circle at 58% 58%, rgba(38, 50, 29, 0.7) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 33%, rgba(38, 50, 29, 0.58) 0 3px, transparent 4px),
    radial-gradient(circle at 58% 28%, rgba(38, 50, 29, 0.58) 0 3px, transparent 4px),
    radial-gradient(circle at 47% 42%, rgba(38, 50, 29, 0.58) 0 3px, transparent 4px);
  filter: contrast(1.55) drop-shadow(0 2px 1px rgba(255, 255, 230, 0.4));
}

.trace-item.deer::before {
  inset: 1px 6px;
  background:
    radial-gradient(ellipse at 32% 46%, rgba(45, 42, 31, 0.72) 0 7px, transparent 8px),
    radial-gradient(ellipse at 49% 46%, rgba(45, 42, 31, 0.72) 0 7px, transparent 8px),
    radial-gradient(ellipse at 67% 56%, rgba(45, 42, 31, 0.66) 0 7px, transparent 8px),
    radial-gradient(ellipse at 84% 56%, rgba(45, 42, 31, 0.66) 0 7px, transparent 8px);
  clip-path: polygon(18% 12%, 50% 0, 82% 12%, 98% 58%, 50% 100%, 2% 58%);
}

.trace-item.eagle::before,
.track-sample.eagle-track::before {
  left: 50%;
  top: 50%;
  width: 70%;
  height: 68%;
  inset: auto;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(52deg, transparent 42%, rgba(38, 50, 29, 0.72) 43% 50%, transparent 51%),
    linear-gradient(90deg, transparent 45%, rgba(38, 50, 29, 0.7) 46% 53%, transparent 54%),
    linear-gradient(128deg, transparent 42%, rgba(38, 50, 29, 0.72) 43% 50%, transparent 51%),
    linear-gradient(52deg, transparent 42%, rgba(38, 50, 29, 0.62) 43% 50%, transparent 51%);
  background-size: 19px 19px, 19px 19px, 19px 19px, 19px 19px;
  background-position: 4px 1px, 4px 1px, 4px 1px, 21px 9px;
  background-repeat: no-repeat;
  filter: contrast(1.55) drop-shadow(0 2px 1px rgba(255, 255, 230, 0.4));
}

.trace-item.beaver::before,
.track-sample.beaver::before {
  inset: 6px 2px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 65%, rgba(73, 49, 32, 0.72) 0 40%, transparent 41%),
    repeating-linear-gradient(90deg, rgba(73, 49, 32, 0.7) 0 4px, transparent 5px 10px);
  clip-path: polygon(50% 0, 95% 38%, 78% 100%, 22% 100%, 5% 38%);
  filter: contrast(1.55) drop-shadow(0 2px 1px rgba(255, 255, 230, 0.4));
}

.trace-item.bat::before,
.track-sample.bat::before {
  inset: 6px 0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(35, 30, 35, 0.74) 0 16%, transparent 17%),
    radial-gradient(ellipse at 28% 48%, rgba(35, 30, 35, 0.66) 0 24%, transparent 25%),
    radial-gradient(ellipse at 72% 48%, rgba(35, 30, 35, 0.66) 0 24%, transparent 25%);
  clip-path: polygon(4% 45%, 22% 24%, 37% 42%, 50% 20%, 63% 42%, 78% 24%, 96% 45%, 78% 70%, 57% 58%, 50% 80%, 43% 58%, 22% 70%);
  filter: contrast(1.55) drop-shadow(0 2px 1px rgba(255, 255, 230, 0.4));
}

.trace-item.frog::before,
.track-sample.frog::before {
  inset: 5px 3px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 27% 48%, rgba(48, 71, 34, 0.66) 0 5px, transparent 6px),
    radial-gradient(circle at 45% 42%, rgba(48, 71, 34, 0.58) 0 4px, transparent 5px),
    radial-gradient(circle at 61% 53%, rgba(48, 71, 34, 0.58) 0 4px, transparent 5px),
    repeating-radial-gradient(ellipse at 52% 56%, rgba(48, 71, 34, 0.28) 0 2px, transparent 3px 9px);
  filter: contrast(1.55) drop-shadow(0 2px 1px rgba(255, 255, 230, 0.4));
}

.track-sample.wolf::before {
  background:
    radial-gradient(circle at 18% 58%, rgba(38, 50, 29, 0.72) 0 6px, transparent 7px),
    radial-gradient(circle at 31% 33%, rgba(38, 50, 29, 0.62) 0 3px, transparent 4px),
    radial-gradient(circle at 18% 28%, rgba(38, 50, 29, 0.62) 0 3px, transparent 4px),
    radial-gradient(circle at 7% 42%, rgba(38, 50, 29, 0.62) 0 3px, transparent 4px),
    radial-gradient(circle at 58% 58%, rgba(38, 50, 29, 0.7) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 33%, rgba(38, 50, 29, 0.58) 0 3px, transparent 4px),
    radial-gradient(circle at 58% 28%, rgba(38, 50, 29, 0.58) 0 3px, transparent 4px),
    radial-gradient(circle at 47% 42%, rgba(38, 50, 29, 0.58) 0 3px, transparent 4px);
  filter: contrast(1.55) drop-shadow(0 2px 1px rgba(255, 255, 230, 0.4));
}

.trace-item.fake::before {
  content: "";
  position: absolute;
  inset: 5px 8px;
  border-radius: 70% 0 70% 0;
  background: linear-gradient(135deg, rgba(172, 119, 49, 0.72), rgba(96, 118, 48, 0.68));
  box-shadow: 15px 12px 0 -8px rgba(95, 73, 43, 0.56);
}

.concept-stage,
.forest-stage,
.mountain-stage {
  min-height: 0;
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: 30px;
  border-radius: 18px;
  color: #fff8df;
  text-align: center;
  box-shadow: var(--shadow);
}

.concept-stage {
  place-content: center;
  background:
    linear-gradient(rgba(34, 58, 26, 0.26), rgba(34, 58, 26, 0.48)),
    url("assets/forest-valley-bg.png") center / cover no-repeat;
}

.forest-stage {
  align-content: end;
  background:
    linear-gradient(rgba(19, 35, 16, 0.08), rgba(19, 35, 16, 0.38)),
    url("assets/forest-camp-blocked-las3.png") center / cover no-repeat;
}

.forest-stage.cleared {
  background:
    linear-gradient(rgba(19, 35, 16, 0.08), rgba(19, 35, 16, 0.28)),
    url("assets/forest-camp-clear.png") center / cover no-repeat;
}

.institution-icons {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.institution-icons button {
  position: absolute;
  width: 110px;
  height: 132px;
  border: 4px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: transparent;
  color: #315c23;
  font-weight: 900;
  cursor: pointer;
  box-shadow: none;
  pointer-events: auto;
  overflow: visible;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
}

.institution-icons button:nth-child(1) { left: 15%; top: 38%; }
.institution-icons button:nth-child(2) { left: 34%; top: 37%; }
.institution-icons button:nth-child(3) { left: 50%; top: 47%; }
.institution-icons button:nth-child(4) { left: 68%; top: 45%; }
.institution-icons button:nth-child(5) { left: 84%; top: 46%; }

.forest-quiz {
  margin-top: 4px;
  padding: 0;
  color: #26331f;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.forest-quiz h2,
.forest-quiz p {
  margin: 0 0 12px;
}

.forest-answers {
  display: grid;
  gap: 10px;
}

.forest-answers button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff9ec;
  color: #26331f;
  font-weight: 800;
  cursor: pointer;
}

body[data-stage="forest"] .guide {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 100%;
}

body[data-stage="forest"] .guide-avatar {
  left: auto;
  right: 370px;
  bottom: -7px;
  transform: scaleX(1);
}

body[data-stage="forest"] .speech {
  left: auto;
  right: 600px;
  top: -330px;
  width: 520px;
  max-width: 520px;
  background: rgba(255, 248, 233, 0.78);
}

body[data-stage="forest"] .backpack {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

body[data-stage="forest"] .speech::before {
  left: auto;
  right: -27px;
  bottom: 46px;
  border-top-color: transparent;
  border-left-color: rgba(255, 248, 233, 0.78);
}

.mountain-stage {
  background:
    linear-gradient(rgba(24, 42, 64, 0.12), rgba(24, 42, 64, 0.32)),
    url("assets/mountains-bg-generated.png") center 22% / cover no-repeat;
}

.mountain-hud {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 18px;
  z-index: 8;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.mountain-hud span {
  color: #fff8dd;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.25rem;
  font-weight: 900;
  text-shadow: 0 3px 0 rgba(69, 42, 19, 0.9), 0 0 10px rgba(22, 30, 14, 0.55);
}

.memo-board {
  position: absolute;
  inset: 86px 28px 28px;
}

.memo-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 124px;
  height: 140px;
  border: 0;
  border-radius: 18px;
  background: url("assets/kafel.png") center center / cover no-repeat;
  color: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%) rotate(var(--rot));
  box-shadow:
    0 7px 14px rgba(17, 29, 14, 0.28),
    inset 0 0 0 3px rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(76, 84, 72, 0.42);
}

.memo-card.revealed,
.memo-card.matched {
  display: flex;
  flex-direction: column;
  background: transparent;
  color: #26331f;
  overflow: hidden;
  padding: 0;
}

.memo-card.matched {
  opacity: 0.78;
  box-shadow: 0 0 0 4px rgba(125, 167, 69, 0.76), 0 7px 14px rgba(17, 29, 14, 0.2);
}

.memo-card img {
  display: block;
  width: 100%;
  height: calc(100% - 38px);
  object-fit: cover;
  background: #f5f3eb;
  border-radius: 18px 18px 0 0;
}

.memo-card span {
  display: block;
  margin-top: 0;
  min-height: 38px;
  padding: 8px 10px 9px;
  background: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  color: #26331f;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  border-radius: 0 0 18px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.concept-stage h2,
.concept-stage p {
  max-width: 640px;
  margin: 0;
  text-shadow: 0 2px 8px rgba(17, 28, 12, 0.42);
}

.stage-finish {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 12;
}

.concept-stage .stage-finish {
  position: static;
  justify-self: center;
}

.stage-instruction {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff7e8;
  box-shadow: inset 0 0 0 1px rgba(97, 73, 39, 0.14);
}

.stage-instruction strong {
  color: #315c83;
  text-transform: uppercase;
}

.stage-view:not(.active) {
  display: none !important;
}

.primary-action {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: #315c83;
  color: white;
  cursor: pointer;
  font-weight: 900;
}

@keyframes pulse {
  from {
    transform: scale(0.75);
    opacity: 0.55;
  }
  to {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes breathe {
  50% {
    transform: scale(1.08);
    opacity: 0.8;
  }
}

@keyframes drift {
  from {
    transform: translateX(-24px);
  }
  to {
    transform: translateX(46px);
  }
}

@keyframes frog-bob {
  50% {
    transform: translateY(-7px);
  }
}

@keyframes glide {
  50% {
    transform: translate(26px, 10px) scale(1.04);
  }
}

@keyframes flap {
  50% {
    transform: rotate(13deg);
  }
}

@keyframes pop {
  0% {
    transform: scale(0.65);
  }
  80% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes trace-fade {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot)) scale(calc(var(--scale, 1) * 0.72));
  }
  15%,
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--rot)) scale(var(--scale, 1));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot)) scale(calc(var(--scale, 1) * 0.9));
  }
}

@keyframes point-down {
  50% {
    transform: translateY(8px) rotate(45deg);
  }
}

@keyframes point-button {
  50% {
    transform: translateX(8px) rotate(-45deg);
  }
}

@media (max-width: 1120px) {
  .topbar {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-top: 132px;
  }

  .title-board {
    top: 12px;
    transform: translateX(-50%);
  }

  .status {
    justify-self: center;
    flex-wrap: wrap;
    justify-content: center;
  }

  .play-area,
  .bottom-bar {
    grid-template-columns: 1fr;
  }

  .map {
    min-height: 560px;
  }

  .task-panel {
    order: -1;
  }

  .guide {
    grid-template-columns: 170px 1fr;
  }
}

@media (max-width: 700px) {
  .app {
    padding: 8px;
    gap: 8px;
  }

  .topbar {
    padding: 12px;
    border-radius: 0 0 14px 14px;
  }

  .brand {
    justify-self: start;
  }

  .title-board {
    min-width: 100%;
    width: calc(100% - 24px);
  }

  .status {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .round-button,
  .menu-button,
  .sound-button {
    width: 54px;
    height: 54px;
  }

  .map {
    min-height: 510px;
  }

  .hotspot .icon {
    width: 56px;
    height: 56px;
    font-size: 1.55rem;
  }

  .pulse {
    width: 70px;
    height: 70px;
  }

  .hotspot strong {
    max-width: 110px;
    white-space: normal;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.1;
  }

  .bottom-bar {
    padding: 10px;
  }

  .guide {
    grid-template-columns: 1fr;
  }

  .guide-avatar {
    display: none;
  }

  .speech::before {
    display: none;
  }

  .backpack {
    grid-template-columns: 60px 1fr;
  }

  .bag {
    font-size: 2.8rem;
  }
}

body[data-stage="mountains"] .task-panel .trace-side-status span,
body[data-stage="mountains"] .task-panel .plant-guide-item,
body[data-stage="mountains"] .task-panel .species-list li {
  background: transparent;
  box-shadow: none;
}

body[data-stage="meadow"] .plant-guide,
body[data-stage="meadow"] .plant-guide b,
body[data-stage="meadow"] .weed-thumb {
  background: transparent;
  box-shadow: none;
}


.stage-intro-dialog,
.achievements-dialog,
.map-dialog,
.thesaurus-dialog {
  width: min(760px, calc(100vw - 34px));
  max-height: calc(100vh - 44px);
  border: 0;
  border-radius: 20px;
  padding: 30px 34px;
  color: #25321e;
  background: rgba(255, 248, 229, 0.86);
  box-shadow: 0 24px 80px rgba(14, 23, 12, 0.42), inset 0 0 0 2px rgba(119, 91, 45, 0.18);
  backdrop-filter: blur(3px);
}

.stage-intro-dialog::backdrop,
.achievements-dialog::backdrop,
.map-dialog::backdrop,
.thesaurus-dialog::backdrop {
  background: rgba(22, 34, 14, 0.38);
  backdrop-filter: blur(2px);
}

.stage-intro-dialog h2,
.achievements-dialog h2,
.map-dialog h2,
.thesaurus-dialog h2 {
  margin: 0 0 12px;
  font-size: 2rem;
  text-align: center;
  color: #315c23;
}

.stage-intro-dialog p {
  margin: 0 auto 14px;
  max-width: 620px;
  text-align: center;
  font-weight: 700;
  line-height: 1.4;
}

.stage-intro-dialog ul {
  display: grid;
  gap: 8px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
}

.stage-intro-dialog li {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.42);
  font-weight: 800;
}

.stage-intro-dialog .speech-action {
  margin: 0 auto;
  min-width: 190px;
  display: block;
}

.map-dialog {
  width: min(920px, calc(100vw - 64px));
  background: rgba(255, 249, 236, 0.78);
}

.map-dialog-art {
  width: min(820px, 100%);
  height: 360px;
  margin: 0 auto 18px;
  border-radius: 18px;
  background: image-set(
    url("assets/mapa2.webp") type("image/webp"),
    url("assets/mapa2.png") type("image/png")
  ) center / contain no-repeat;
  transform: scaleX(-1);
  filter: drop-shadow(0 9px 16px rgba(31, 43, 18, 0.2));
}

.map-dialog-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.map-dialog-stages button {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 110px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 0 0 2px rgba(69, 100, 38, 0.18);
  font-weight: 900;
  color: #25421c;
  cursor: pointer;
}

.map-dialog-stages button[disabled] {
  opacity: 0.45;
  filter: grayscale(1);
  cursor: not-allowed;
}

.map-dialog-stages span {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--loc-icon) center / contain no-repeat;
}

.thesaurus-dialog {
  width: min(1040px, calc(100vw - 70px));
  max-height: min(760px, calc(100vh - 60px));
  background: rgba(255, 249, 236, 0.84);
}

.thesaurus-layout {
  display: grid;
  grid-template-columns: minmax(280px, 42%) 1fr;
  gap: 18px;
  min-height: 500px;
}

.thesaurus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(35, 52, 22, 0.12);
  overflow: auto;
}

.thesaurus-item {
  min-height: 92px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.52), 0 5px 10px rgba(30, 42, 18, 0.14);
  display: grid;
  place-items: center;
  gap: 4px;
  color: #26391b;
  font-weight: 900;
  cursor: pointer;
}

.thesaurus-item.locked {
  background: rgba(15, 19, 12, 0.36);
  color: transparent;
  cursor: default;
}

.thesaurus-item .entry-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fffdf3;
  box-shadow: inset 0 0 0 4px var(--entry-color, #78a93b);
  font-size: 1.55rem;
  overflow: hidden;
}

.thesaurus-item img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.thesaurus-item.locked .entry-icon {
  background: #111;
  box-shadow: none;
}

.thesaurus-item small {
  max-width: 100%;
  padding: 0 4px;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.05;
}

.thesaurus-card {
  padding: 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.42);
  overflow: auto;
}

.thesaurus-card h3 {
  margin: 0 0 8px;
  color: #315c23;
}

.thesaurus-card table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.thesaurus-card th,
.thesaurus-card td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(49, 92, 35, 0.16);
  text-align: left;
  vertical-align: top;
}

.bottom-tool-button {
  position: absolute;
  z-index: 5;
  width: 230px;
  height: 246px;
  border: 0;
  background: center center / contain no-repeat;
  cursor: pointer;
  filter: drop-shadow(0 5px 8px rgba(23, 34, 14, 0.2));
}

.camera-button {
  left: calc(50% - 980px);
  top: -28px;
  background-image: url("assets/button-camera.png");
}

.sign-button {
  left: calc(50% + 540px);
  top: -28px;
  background-image: url("assets/button-help.png");
}

.achievement-list {
  display: grid;
  gap: 12px;
}

.achievement {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.42);
}

.achievement.locked {
  filter: grayscale(1);
  opacity: 0.72;
}

.achievement-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fffbd5, #f1b937 58%, #8a5a1f 100%);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.52), 0 5px 10px rgba(54,41,18,.22);
  font-size: 1.8rem;
}

.achievement h3,
.achievement p { margin: 0; }
.achievement h3 { color: #315c23; }
.achievement p { margin-top: 4px; font-weight: 700; line-height: 1.32; }

.badge-slot {
  border: 0;
  background: radial-gradient(circle at 35% 28%, #fffbd5, #edbd42 58%, #7a5022 100%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.55), inset 0 0 0 7px var(--slot-color), 0 3px 7px rgba(40,29,12,.28);
}

.badge-slot:not(.filled) {
  background: radial-gradient(circle at 40% 35%, #31382c, #11170f 72%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.16), 0 3px 7px rgba(40,29,12,.2);
}

.memo-card {
  width: 140px;
  height: 148px;
}

.memo-card.revealed,
.memo-card.matched {
  overflow: visible;
}

.memo-card img {
  height: 100%;
  border-radius: 18px;
  background: transparent;
}

.memo-card span {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  min-height: 0;
  min-width: 94px;
  padding: 5px 10px 6px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.86);
  box-shadow: 0 3px 8px rgba(20, 32, 14, 0.18);
}

.memo-summary-species {
  position: absolute;
  left: var(--x);
  top: var(--y);
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.memo-summary-species span {
  width: 96px;
  height: 96px;
  display: block;
  border-radius: 50%;
  background: #fff var(--memo-img) center / 88% auto no-repeat;
  box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 10px var(--ring, #78a93b), 0 7px 14px rgba(19, 30, 12, 0.24);
}

.memo-summary-species:nth-child(2n) span { --ring: #e0a640; }
.memo-summary-species:nth-child(3n) span { --ring: #4e9fc2; }
.memo-summary-species:nth-child(4n) span { --ring: #a065a8; }

.memo-summary-species b {
  display: block;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: #26331f;
  font-size: .82rem;
  white-space: nowrap;
}

.forest-assignment {
  position: absolute;
  inset: 18px 18px 18px;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.2fr);
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 248, 229, 0.72);
  color: #26331f;
  text-align: left;
  backdrop-filter: blur(2px);
}

.forest-assignment[hidden] { display: none; }

.forest-statement-pool,
.forest-dropzones {
  display: grid;
  gap: 8px;
  align-content: start;
  overflow: auto;
  min-height: 0;
}

.forest-dropzones {
  grid-template-columns: repeat(5, minmax(92px, 1fr));
}

.forest-statement,
.forest-dropzone {
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.86);
  color: #26331f;
  box-shadow: 0 3px 8px rgba(20, 32, 14, 0.14);
}

.forest-statement {
  padding: 8px 10px;
  font-size: .78rem;
  font-weight: 800;
  text-align: left;
  cursor: grab;
}

.forest-statement.correct { background: rgba(223, 246, 198, .94); }
.forest-statement.wrong { background: rgba(255, 222, 205, .96); }

.forest-dropzone {
  min-height: 160px;
  padding: 8px;
}

.forest-dropzone h3 {
  margin: 0 0 8px;
  text-align: center;
  font-size: .92rem;
  color: #315c23;
}

.forest-dropzone div {
  display: grid;
  gap: 6px;
}

.forest-stage .trace-start-overlay {
  bottom: 24px;
}

body[data-stage="forest"] .speech {
  width: 640px;
  max-width: 640px;
}

.institution-side-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.institution-side-list button {
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.42);
  color: #315c23;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(74, 106, 45, .18);
  display: grid;
  align-content: center;
  gap: 2px;
  text-align: center;
}

.institution-side-list button span {
  font-size: 0.95rem;
  line-height: 1;
}

.institution-side-list button small {
  color: #59624c;
  font-size: 0.68rem;
  line-height: 1;
}

.institution-side-list button:focus-visible,
.institution-side-list button:hover {
  background: rgba(255,255,255,.62);
}


.stage-intro-dialog {
  position: fixed;
  left: 50%;
  top: 46%;
  z-index: 30;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.stage-intro-dialog::backdrop {
  background: transparent;
  backdrop-filter: none;
}

.play-area::after {
  content: "";
  position: absolute;
  inset: 0 430px 0 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

body:has(.stage-intro-dialog[open]) .play-area::after {
  opacity: 1;
  background: rgba(20, 31, 13, 0.18);
  backdrop-filter: blur(1px);
}

body[data-stage="forest"] .speech {
  width: 720px;
  max-width: min(720px, calc(100vw - 620px));
  top: -372px;
}

body[data-stage="forest"] .speech .forest-quiz {
  display: grid;
  gap: 8px;
}

.forest-assignment {
  position: static;
  inset: auto;
  z-index: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #26331f;
  text-align: left;
  backdrop-filter: none;
}

.forest-statement-pool {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  max-height: 255px;
  overflow: auto;
  padding-right: 3px;
}

.forest-dropzones { display: none; }

.forest-statement {
  min-height: 44px;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: rgba(255,255,255,.82);
  color: #26331f;
  box-shadow: 0 2px 6px rgba(20, 32, 14, 0.13);
  font-size: .72rem;
  line-height: 1.18;
  font-weight: 800;
  text-align: left;
  cursor: grab;
}

.forest-statement.assigned {
  background: rgba(229, 241, 212, .92);
  box-shadow: inset 0 0 0 2px rgba(87, 130, 53, .32);
}

.forest-statement.correct { background: rgba(220, 246, 194, .95); }
.forest-statement.wrong { background: rgba(255, 222, 205, .96); }

.forest-submit {
  justify-self: center;
  min-width: 160px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #5d9343, #315c83);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 0 #244a22, 0 10px 18px rgba(22, 35, 16, 0.2);
}

.institution-icons button.drop-ready {
  outline: 5px solid rgba(255, 238, 105, .86);
  transform: scale(1.08);
}

.institution-icons button.has-assignment::after {
  content: attr(data-count);
  position: absolute;
  right: -10px;
  top: -10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f2c33c;
  color: #26331f;
  font-weight: 900;
  box-shadow: 0 2px 5px rgba(20, 32, 14, .25);
}


.stage-hud {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  display: block;
}

.stage-hud[hidden] { display: none; }

.stage-hud span {
  position: absolute;
  color: #fff8dd;
  font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 3px 0 rgba(69, 42, 19, 0.9), 0 0 10px rgba(22, 30, 14, 0.55);
}

.dam-hud span:first-child,
.forest-hud span:first-child {
  left: 24px;
  top: 20px;
  font-size: 2.55rem;
}

.dam-hud span:last-child,
.forest-hud span:last-child {
  right: 24px;
  top: 20px;
  font-size: 2.35rem;
}

.mountain-hud {
  justify-content: space-between;
  gap: 28px;
}

.mountain-hud span:nth-child(1) { text-align: left; }
.mountain-hud span:nth-child(2) { text-align: center; }
.mountain-hud span:nth-child(3) { text-align: right; }

/* Final forest quiz layout: the speech bubble is the statement tray; tents remain the drop targets. */
body[data-stage="forest"] .speech {
  right: 500px;
  top: -405px;
  width: 900px;
  max-width: min(900px, calc(100vw - 520px));
}

body[data-stage="forest"] .speech .forest-quiz h2,
body[data-stage="forest"] .speech .forest-quiz > p {
  margin-bottom: 6px;
}

body[data-stage="forest"] .forest-statement-pool {
  grid-template-columns: repeat(5, minmax(126px, 1fr));
  max-height: 220px;
  gap: 8px;
}

body[data-stage="forest"] .forest-statement {
  min-height: 60px;
  font-size: .68rem;
  line-height: 1.14;
}

/* Unified stage HUD: timer top-right, points below it, visible before start. */
.stage-hud,
.trace-map-status,
.mountain-hud {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: block !important;
  pointer-events: none;
}

.stage-hud span,
.trace-map-status span,
.mountain-hud span {
  position: absolute;
  right: 24px;
  left: auto;
  color: #fff8dd;
  font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive;
  font-weight: 900;
  letter-spacing: 0;
  text-align: right;
  text-shadow: 0 3px 0 rgba(69, 42, 19, 0.9), 0 0 10px rgba(22, 30, 14, 0.55);
}

.stage-hud span:first-child,
.trace-map-status span:first-child,
.mountain-hud span:first-child {
  top: 28px;
  font-size: 3.05rem;
  line-height: 1;
}

.stage-hud span:nth-child(2),
.trace-map-status span:nth-child(2),
.mountain-hud span:nth-child(2) {
  top: 88px;
  font-size: 2.35rem;
  line-height: 1;
}

.mountain-hud span:nth-child(3) {
  display: none;
}


/* Wider forest speech tray, simplified copy. */
body[data-stage="forest"] .speech {
  left: 22px;
  right: auto;
  top: -408px;
  width: min(1180px, calc(100vw - 560px));
  max-width: min(1180px, calc(100vw - 560px));
}

body[data-stage="forest"] .speech::before {
  left: auto;
  right: -27px;
}

body[data-stage="forest"] .forest-statement-pool {
  grid-template-columns: repeat(5, minmax(165px, 1fr));
  max-height: 205px;
}

body[data-stage="forest"] .forest-statement {
  min-height: 54px;
  font-size: .74rem;
  line-height: 1.16;
}


/* Forest bubble anchored left: only quiz content, stretched toward the left edge. */
body[data-stage="forest"] .speech {
  left: -420px;
  right: auto;
  top: -408px;
  width: min(1240px, calc(100vw - 500px));
  max-width: min(1240px, calc(100vw - 500px));
}

body[data-stage="forest"] .speech > h2:not(:empty),
body[data-stage="forest"] .speech > p:not(:empty) {
  display: none;
}

body[data-stage="forest"] .speech .forest-quiz {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

body[data-stage="forest"] .speech .forest-quiz h2 {
  display: none !important;
}

/* Final placement overrides: keep all guide bubbles low; forest bubble opens to the right. */
body[data-stage="dam"] .speech,
body[data-stage="meadow"] .speech,
body[data-stage="mountains"] .speech,
body[data-stage="forest"] .speech {
  top: auto !important;
  bottom: 190px !important;
}

body[data-stage="dam"] .speech,
body[data-stage="mountains"] .speech {
  left: -120px !important;
  right: auto !important;
}

body[data-stage="meadow"] .speech {
  left: -118px !important;
  right: auto !important;
}

body[data-stage="forest"] .guide {
  grid-column: 1 !important;
  justify-self: start !important;
}

body[data-stage="forest"] .guide-avatar {
  left: -70px !important;
  right: auto !important;
  transform: scaleX(-1) !important;
}

body[data-stage="forest"] .speech {
  left: 70px !important;
  right: auto !important;
  width: min(1380px, calc(100vw - 300px)) !important;
  max-width: min(1380px, calc(100vw - 300px)) !important;
  overflow: visible !important;
}

body[data-stage="forest"] .speech::before {
  left: -14px !important;
  right: auto !important;
  bottom: 42px !important;
  border-top-color: transparent !important;
  border-right-color: rgba(255, 248, 233, 0.7) !important;
}

body[data-stage="forest"] .speech .forest-quiz {
  overflow: visible !important;
}

/* Final guide bubble anchoring: keep speech bubbles low over the landscape. */
body[data-stage="dam"] .speech,
body[data-stage="meadow"] .speech,
body[data-stage="mountains"] .speech {
  top: auto;
  bottom: 190px;
}

body[data-stage="dam"] .speech,
body[data-stage="mountains"] .speech {
  left: -120px;
}

body[data-stage="meadow"] .speech {
  left: -118px;
}

body[data-stage="forest"] .guide {
  grid-column: 1;
  justify-self: start;
}

body[data-stage="forest"] .guide-avatar {
  left: -70px;
  right: auto;
  transform: scaleX(-1);
}

body[data-stage="forest"] .speech {
  top: auto;
  bottom: 190px;
  left: 180px;
  right: auto;
  width: min(1040px, calc(100vw - 540px));
  max-width: min(1040px, calc(100vw - 540px));
}

body[data-stage="forest"] .speech::before {
  left: 56px;
  right: auto;
  bottom: -28px;
  border-right-color: transparent;
  border-top-color: rgba(255, 248, 233, 0.7);
}

body[data-stage="forest"] .backpack {
  grid-column: 3;
}

#memo-start-button {
  display: none !important;
}

body[data-stage="forest"] .speech .forest-quiz > p {
  order: 3;
  margin: 6px auto 0;
  max-width: 920px;
  font-weight: 900;
  text-align: center;
}

body[data-stage="forest"] .speech .forest-assignment {
  order: 1;
}

body[data-stage="forest"] .forest-statement-pool {
  grid-template-columns: repeat(5, minmax(180px, 1fr));
}


/* Forest quiz tray final placement: left of the forester, low over the board. */
body[data-stage="forest"] .speech {
  left: -760px;
  right: auto;
  top: -250px;
  width: min(1040px, calc(100vw - 700px));
  max-width: min(1040px, calc(100vw - 700px));
}

body[data-stage="forest"] .speech::before {
  left: auto;
  right: -27px;
  bottom: 42px;
}

body[data-stage="dam"] .speech,
body[data-stage="mountains"] .speech {
  left: -120px;
  top: -205px;
}

body[data-stage="dam"] .speech::before,
body[data-stage="mountains"] .speech::before {
  left: 56px;
  bottom: -28px;
}

body[data-stage="forest"] .forest-statement-pool {
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  max-height: 188px;
}


/* Forest quiz tray pushed farther left and enlarged. */
body[data-stage="forest"] .speech {
  left: -1030px;
  right: auto;
  top: -270px;
  width: min(1320px, calc(100vw - 430px));
  max-width: min(1320px, calc(100vw - 430px));
  padding: 28px 38px;
}

body[data-stage="forest"] .forest-statement-pool {
  grid-template-columns: repeat(5, minmax(205px, 1fr));
  max-height: 230px;
  gap: 11px;
}

body[data-stage="forest"] .forest-statement {
  min-height: 78px;
  padding: 11px 13px;
  font-size: .86rem;
  line-height: 1.22;
}

body[data-stage="forest"] .forest-submit {
  min-width: 190px;
  min-height: 46px;
  font-size: 1.05rem;
}


/* Forest quiz tray far-left adjustment. */
body[data-stage="forest"] .speech {
  left: -1320px;
  right: auto;
  top: -270px;
  width: min(1380px, calc(100vw - 360px));
  max-width: min(1380px, calc(100vw - 360px));
}


/* Forest quiz tray: farther left, wider and shorter, same top edge. */
body[data-stage="forest"] .speech {
  left: -1550px;
  right: auto;
  top: -270px;
  width: min(1580px, calc(100vw - 260px));
  max-width: min(1580px, calc(100vw - 260px));
  padding: 20px 34px 18px;
}

body[data-stage="forest"] .forest-statement-pool {
  grid-template-columns: repeat(5, minmax(235px, 1fr));
  max-height: 176px;
  gap: 8px 10px;
}

body[data-stage="forest"] .forest-statement {
  min-height: 58px;
  padding: 8px 11px;
  font-size: .8rem;
  line-height: 1.12;
}

body[data-stage="forest"] .speech .forest-quiz h2,
body[data-stage="forest"] .speech .forest-quiz > p {
  margin-bottom: 4px;
}

body[data-stage="forest"] .forest-submit {
  min-height: 40px;
  margin-top: 2px;
}


/* Forest quiz tray: one more left shift. */
body[data-stage="forest"] .speech {
  left: -1720px;
  right: auto;
}


/* Institution icons: round logo markers with inner rings and expandable labels. */
.institution-icons button {
  width: 92px;
  height: 122px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  transform: translate(-50%, -50%);
}

.institution-icons button > span {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #315c23;
  font-size: 1rem;
  font-weight: 1000;
  box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 10px var(--institution-ring, #78a93b), 0 7px 14px rgba(20, 32, 14, 0.24);
}

.institution-icons button b {
  position: absolute;
  left: 50%;
  top: 84px;
  transform: translateX(-50%);
  min-width: 76px;
  max-width: 116px;
  min-height: 24px;
  padding: 5px 10px 6px;
  border-radius: 999px;
  display: block;
  background: rgba(255,255,255,.9);
  color: #26331f;
  font-size: .76rem;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(20,32,14,.18);
}

.institution-icons button:hover,
.institution-icons button:focus-visible {
  z-index: 8;
}

.institution-icons button b em {
  display: none;
  font-style: normal;
}

.institution-icons button:hover b,
.institution-icons button:focus-visible b {
  left: 50%;
  min-width: 190px;
  max-width: 280px;
  padding: 8px 12px 9px;
  background: rgba(255, 255, 255, 0.98);
  white-space: normal;
  box-shadow: 0 8px 16px rgba(20,32,14,.22);
}

.institution-icons button:hover b > span,
.institution-icons button:focus-visible b > span {
  display: none;
}

.institution-icons button:hover b em,
.institution-icons button:focus-visible b em {
  display: inline;
}

.institution-icons button[data-institution="gios"] { --institution-ring: #2f6f99; left: 15%; top: 38%; }
.institution-icons button[data-institution="gdos"] { --institution-ring: #6fa23f; left: 31%; top: 30%; }
.institution-icons button[data-institution="rdos"] { --institution-ring: #b98633; left: 56%; top: 43%; }
.institution-icons button[data-institution="eea"] { --institution-ring: #2f8f8a; left: 70%; top: 33%; }
.institution-icons button[data-institution="iop"] { --institution-ring: #7b5aa6; left: 84%; top: 46%; }

.institution-icons button.drop-ready {
  box-shadow: 0 0 0 4px rgba(255, 238, 105, .54), 0 8px 16px rgba(20, 32, 14, 0.26);
}

.institution-icons button.drop-ready > span {
  outline: 5px solid rgba(255, 238, 105, .86);
  transform: none;
}

.institution-icons button.has-assignment::after {
  top: -8px;
  right: -2px;
}

.institution-side-list {
  display: grid !important;
  gap: 8px;
}

.institution-side-list button {
  min-height: 54px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.44);
  color: #315c23;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(74, 106, 45, .16);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  text-align: left;
}

.institution-side-list button span {
  font-size: 0.98rem;
  line-height: 1;
}

.institution-side-list button small {
  grid-column: 2;
  color: #59624c;
  font-size: 0.72rem;
  line-height: 1.08;
}

.institution-side-list button:hover,
.institution-side-list button:focus-visible {
  background: rgba(255,255,255,.66);
}

body[data-stage="forest"] .speech .forest-quiz > p[hidden] {
  display: none !important;
}

body[data-stage="forest"] .speech .forest-quiz h2 {
  display: none !important;
}

body[data-stage="forest"] .forest-assignment {
  overflow: visible !important;
}

body[data-stage="forest"] .forest-statement-pool {
  max-height: none !important;
  overflow: visible !important;
}

body[data-stage="forest"] .speech {
  left: 40px !important;
  right: auto !important;
  width: min(1520px, calc(100vw - 220px)) !important;
  max-width: min(1520px, calc(100vw - 220px)) !important;
}

body[data-stage="forest"] .speech .forest-quiz {
  margin-top: 0 !important;
}

body[data-stage="forest"] .speech .forest-quiz-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  margin: 0 0 10px;
}

/* Unified typography for right-side lists on stages 1, 2 and 4. */
.species-list li,
.plant-guide strong,
.institution-side-list button span {
  color: #315c23 !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
}

.species-list li,
.plant-guide-item,
.institution-side-list button {
  font-family: inherit !important;
}

.species-list li,
.plant-guide strong,
.institution-side-list button span,
.institution-side-list button small {
  letter-spacing: 0 !important;
}

.species-list li,
.plant-guide strong {
  font-weight: 900 !important;
}

.institution-side-list button small {
  color: #59624c !important;
  font-size: 0.72rem !important;
  line-height: 1.08 !important;
}

body[data-stage="forest"] .speech .forest-quiz-row #forest-question {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  font-size: 0.94rem;
  line-height: 1.15;
  text-align: left;
}

body[data-stage="forest"] .speech .forest-quiz-row .forest-submit {
  flex: 0 0 auto;
  margin: 0;
}

body[data-stage="forest"] .speech .forest-quiz-row #forest-question,
body[data-stage="forest"] .speech .forest-quiz-row .forest-submit {
  white-space: nowrap;
}

body[data-stage="forest"] .speech .forest-assignment {
  margin-top: 4px;
}

body[data-stage="forest"] .speech {
  top: -300px !important;
}

body[data-stage="forest"] .speech .forest-quiz-row #forest-question {
  font-weight: 900 !important;
}

body[data-stage="forest"] .forest-dropzones {
  grid-template-columns: repeat(5, minmax(170px, 1fr)) !important;
  gap: 14px !important;
}

body[data-stage="forest"] .forest-dropzone {
  min-height: 240px !important;
  padding: 14px 12px 12px !important;
  position: relative;
}

body[data-stage="forest"] .forest-dropzone h3 {
  margin-bottom: 14px !important;
  font-size: 1.03rem !important;
}

body[data-stage="forest"] .forest-dropzone div {
  min-height: 128px !important;
  gap: 10px !important;
}

body[data-stage="forest"] .forest-dropzone::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  border: 2px dashed rgba(49, 92, 35, 0.16);
  pointer-events: none;
}

body[data-stage="forest"] .forest-dropzone.drop-ready {
  box-shadow: inset 0 0 0 3px rgba(120, 169, 59, .34), 0 8px 16px rgba(20, 32, 14, 0.16);
}

body[data-stage="forest"] .forest-dropzone.drop-ready::after {
  inset: 5px;
  border-color: rgba(120, 169, 59, 0.5);
}

body[data-stage="forest"] .forest-statement-pool {
  align-content: end !important;
}

body[data-stage="forest"] .forest-assignment {
  align-content: end !important;
  padding-bottom: 8px !important;
}

body[data-stage="forest"] .institution-icons button.drop-ready > span {
  outline: none !important;
  transform: none !important;
}

body[data-stage="forest"] .institution-icons button.drop-ready {
  background: rgba(255, 248, 229, 0.55) !important;
  box-shadow: 0 0 0 5px rgba(255, 238, 105, 0.34) !important;
}

body[data-stage="forest"] .speech {
  left: 24px !important;
  right: auto !important;
  top: -290px !important;
  width: min(1320px, calc(100vw - 360px)) !important;
  max-width: min(1320px, calc(100vw - 360px)) !important;
  padding: 16px 26px 2px !important;
}

body[data-stage="forest"] .speech .forest-assignment {
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

body[data-stage="forest"] .speech .forest-assignment {
  align-items: start !important;
  gap: 10px !important;
}

body[data-stage="forest"] .speech .forest-statement-pool {
  align-content: start !important;
  max-height: 100% !important;
  margin-bottom: 2px !important;
}

body[data-stage="forest"] .speech {
  padding-bottom: 0 !important;
}

body[data-stage="forest"] .speech .forest-statement-pool {
  margin-bottom: -12px !important;
  padding-bottom: 0 !important;
}

body[data-stage="forest"] .speech::before {
  content: "" !important;
  left: auto !important;
  right: -16px !important;
  bottom: 26px !important;
  border: 14px solid transparent !important;
  border-top-color: rgba(255, 248, 233, 0.78) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}

body[data-stage="forest"] .speech .forest-quiz-row {
  margin-bottom: 6px !important;
}

body[data-stage="forest"] .speech::before {
  content: none !important;
}

body[data-stage="forest"] .speech {
  left: 24px !important;
  right: auto !important;
  top: -260px !important;
  width: min(1400px, calc(100vw - 380px)) !important;
  max-width: min(1400px, calc(100vw - 380px)) !important;
  padding: 14px 26px 0 !important;
  background: rgba(255, 248, 233, 0.52) !important;
  overflow: visible !important;
}

body[data-stage="forest"] .speech .forest-assignment {
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  background: rgba(255, 248, 229, 0.56) !important;
}

body[data-stage="forest"] .speech .forest-statement-pool {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body[data-stage="forest"] .forest-statement {
  background: rgba(255, 255, 255, 0.72) !important;
}

body[data-stage="forest"] .forest-statement:hover,
body[data-stage="forest"] .forest-statement:focus-visible,
body[data-stage="forest"] .forest-statement.assigned {
  background: rgba(255, 255, 255, 0.82) !important;
}

body[data-stage="forest"] .speech:hover,
body[data-stage="forest"] .speech:focus-within {
  background: rgba(255, 248, 233, 0.66) !important;
}

body[data-stage="forest"] .speech .forest-statement-pool {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px 6px !important;
  overflow: visible !important;
}

body[data-stage="forest"] .forest-statement {
  min-height: 62px !important;
  padding: 8px 10px !important;
  font-size: 0.82rem !important;
  line-height: 1.16 !important;
  width: 100% !important;
  justify-self: stretch !important;
  border-radius: 9px !important;
}

body[data-stage="forest"] .institution-icons button {
  width: 128px !important;
  height: 154px !important;
}

body[data-stage="forest"] .institution-side-list {
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

body[data-stage="forest"] .stage-side-panel h3 {
  text-align: center !important;
}

body[data-stage="forest"] .institution-side-list button {
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: 58px 1fr !important;
  gap: 0 12px !important;
  align-items: center !important;
  text-align: left !important;
}

body[data-stage="forest"] .institution-side-list button:hover,
body[data-stage="forest"] .institution-side-list button:focus-visible {
  background: transparent !important;
}

body[data-stage="forest"] .institution-side-list button span {
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #315c23 !important;
  font-size: 1.04rem !important;
  font-weight: 1000 !important;
  box-shadow: inset 0 0 0 4px var(--institution-ring, #78a93b) !important;
}

body[data-stage="forest"] .institution-side-list button small {
  grid-column: 2 !important;
  align-self: center !important;
  color: #6a6d63 !important;
  font-size: 0.86rem !important;
  line-height: 1.12 !important;
}

/* Final responsive fixes: right panel text start + score lock to viewport bottom rhythm */
body[data-stage] .task-panel {
  padding-top: clamp(82px, 10.2vh, 118px) !important;
  padding-right: clamp(34px, 3.2vw, 58px) !important;
  padding-bottom: clamp(110px, 12.5vh, 136px) !important;
  padding-left: clamp(42px, 3.6vw, 68px) !important;
}

/* High-height desktops (QHD/4K): lower task text block a bit. */
@media (min-height: 1400px) {
  body[data-stage] .task-panel {
    padding-top: 146px !important;
  }
}

body[data-stage] .task-panel .score-pill.side-score {
  bottom: clamp(14px, 2.4vh, 30px) !important;
}

body[data-stage] .task-panel .score-pill.side-score small {
  display: none !important;
}

/* FINAL 4K override: push right-panel text lower on very tall viewports */
@media (min-height: 1400px) {
  body[data-stage] .task-panel {
    padding-top: 156px !important;
  }
}

/* HUD moved onto map: top-right corner of stage area */
.play-area > .sidebar-round-hud {
  position: absolute !important;
  top: 14px !important;
  right: calc(clamp(360px, 24vw, 420px) + 14px) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  z-index: 16 !important;
  pointer-events: none !important;
}

.play-area > .sidebar-round-hud .sidebar-time-pill,
.play-area > .sidebar-round-hud .sidebar-round-score-pill {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.play-area > .sidebar-round-hud small {
  color: #fff6d7 !important;
  font-size: 1.18rem !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 4px rgba(20, 32, 14, 0.55) !important;
  white-space: nowrap !important;
}

.play-area > .sidebar-round-hud strong {
  color: #fff !important;
  font-size: 2.3rem !important;
  line-height: 0.95 !important;
  font-weight: 1000 !important;
  text-shadow: 0 2px 5px rgba(20, 32, 14, 0.6) !important;
}

@media (max-width: 1120px) {
  .play-area > .sidebar-round-hud {
    right: 14px !important;
  }
}

body[data-stage="forest"] .institution-side-list button[data-institution="iop"] span {
  font-size: 0.92rem !important;
}

body[data-stage="forest"] .institution-side-list button[data-institution="gios"] { --institution-ring: #2f6f99; }
body[data-stage="forest"] .institution-side-list button[data-institution="gdos"] { --institution-ring: #6fa23f; }
body[data-stage="forest"] .institution-side-list button[data-institution="rdos"] { --institution-ring: #b98633; }
body[data-stage="forest"] .institution-side-list button[data-institution="eea"] { --institution-ring: #2f8f8a; }
body[data-stage="forest"] .institution-side-list button[data-institution="iop"] { --institution-ring: #7b5aa6; }


/* Forest institution logos */
body[data-stage="forest"] .institution-icons button[data-institution="gios"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="gios"] > span {
  background: center / contain no-repeat url("assets/gios-logo.png") !important;
  color: transparent !important;
  text-shadow: none !important;
}

body[data-stage="forest"] .institution-icons button[data-institution="gdos"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="gdos"] > span {
  background: center / contain no-repeat url("assets/gdos-logo.png") !important;
  color: transparent !important;
  text-shadow: none !important;
}

body[data-stage="forest"] .institution-icons button[data-institution="rdos"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="rdos"] > span {
  background: center / contain no-repeat url("assets/rdos-logo.png") !important;
  color: transparent !important;
  text-shadow: none !important;
}

body[data-stage="forest"] .institution-icons button[data-institution="eea"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="eea"] > span {
  background: center / contain no-repeat url("assets/eea-logo.png") !important;
  color: transparent !important;
  text-shadow: none !important;
}

body[data-stage="forest"] .institution-icons button[data-institution="iop"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="iop"] > span {
  background: center / contain no-repeat url("assets/iop-logo-official.svg") !important;
  color: transparent !important;
  text-shadow: none !important;
}

.dialog-icon.has-logo {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  color: transparent !important;
  font-size: 0 !important;
}


.sidebar-time-pill {
  position: absolute;
  left: 45%;
  bottom: 104px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  gap: 4px;
  min-width: 150px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #fff8dd;
  pointer-events: none;
  z-index: 10;
}

.sidebar-time-pill small {
  font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive;
  font-size: 0.95rem;
  font-weight: 900;
  text-shadow: 0 3px 0 rgba(69, 42, 19, 0.9), 0 0 10px rgba(22, 30, 14, 0.55);
}

.sidebar-time-pill strong {
  font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive;
  font-size: 2.3rem;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 3px 0 rgba(69, 42, 19, 0.9), 0 0 10px rgba(22, 30, 14, 0.55);
}

.stage-view .stage-hud {
  display: none !important;
}

body[data-stage="dam"] .species-list li,
body[data-stage="meadow"] .plant-guide strong {
  font-size: 1.02rem !important;
  line-height: 1.16 !important;
}

.fact-strip.fact-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px) scale(0.985);
  pointer-events: none;
}

.fact-strip.fact-pulse-out {
  opacity: 0.22;
}

.animal-photo.logo-photo {
  background-color: #fff !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.dialog-icon.has-logo {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.dialog-icon.logo-gdos,
.animal-photo.logo-photo.logo-gdos,
.dialog-icon.logo-rdos,
.animal-photo.logo-photo.logo-rdos {
  background-color: #fff !important;
}

.dialog-icon.logo-iop,
.animal-photo.logo-photo.logo-iop {
  filter: contrast(1.2) drop-shadow(0 0 1px rgba(0, 0, 0, 0.55));
}

body[data-stage="forest"] .institution-icons button[data-institution="gdos"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="gdos"] > span,
body[data-stage="forest"] .institution-icons button[data-institution="rdos"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="rdos"] > span,
body[data-stage="forest"] .institution-icons button[data-institution="eea"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="eea"] > span,
body[data-stage="forest"] .institution-icons button[data-institution="iop"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="iop"] > span,
body[data-stage="forest"] .institution-icons button[data-institution="gios"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="gios"] > span {
  background-color: #fff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 70% !important;
}

body[data-stage="forest"] .institution-icons button[data-institution="gdos"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="gdos"] > span,
body[data-stage="forest"] .institution-icons button[data-institution="rdos"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="rdos"] > span {
  background-size: 60% !important;
}

body[data-stage="forest"] .institution-icons button[data-institution="iop"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="iop"] > span {
  background-size: 82% !important;
  filter: contrast(1.18) drop-shadow(0 0 1px rgba(0, 0, 0, 0.55));
}

body[data-stage="forest"] .institution-icons button[data-institution="eea"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="eea"] > span {
  background-size: 74% !important;
}

.stage-intro-dialog {
  margin: auto;
}


body[data-stage] .task-panel .sidebar-time-pill,
body[data-stage] .task-panel .score-pill.side-score {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

body[data-stage] .task-panel .sidebar-time-pill {
  bottom: 128px !important;
}

body[data-stage] .task-panel .score-pill.side-score {
  bottom: 30px !important;
}


/* Final sidebar HUD override */
body[data-stage] .task-panel .sidebar-time-pill {
  left: 50% !important;
  bottom: 130px !important;
  transform: translateX(-50%) !important;
  min-width: 180px !important;
  gap: 2px !important;
  color: #111 !important;
}

body[data-stage] .task-panel .sidebar-time-pill small {
  color: #111 !important;
  font-size: 1.12rem !important;
  text-shadow: none !important;
}

body[data-stage] .task-panel .sidebar-time-pill strong {
  color: #111 !important;
  font-size: 2.7rem !important;
  text-shadow: none !important;
}

body[data-stage] .task-panel .score-pill.side-score {
  left: 50% !important;
  bottom: 30px !important;
  transform: translateX(-50%) !important;
  width: 180px !important;
  height: 60px !important;
}

body[data-stage] .task-panel .score-pill.side-score strong {
  color: #111 !important;
  font-size: 2.55rem !important;
  text-shadow: none !important;
}

body[data-stage] .task-panel .score-pill.side-score small {
  display: block !important;
  color: #111 !important;
  text-shadow: none !important;
}


/* Final forest stage overrides */
body[data-stage="forest"] .institution-side-list button span {
  box-shadow: none !important;
  border: 0 !important;
  background-color: #fff !important;
}

body[data-stage="forest"] .institution-side-list button[data-institution="iop"] span,
body[data-stage="forest"] .institution-icons button[data-institution="iop"] > span {
  background-size: 88% !important;
  filter: contrast(1.5) brightness(0.9) drop-shadow(0 0 2px rgba(0, 0, 0, 0.7)) !important;
}

body[data-stage] .stage-icon {
  width: 50px !important;
  height: 50px !important;
  box-shadow: none !important;
}

body[data-stage].stage-node.active .stage-icon,
body[data-stage] .stage-node.active .stage-icon {
  width: 52px !important;
  height: 52px !important;
  box-shadow: 0 0 0 1px rgba(35, 126, 185, 0.24), 0 0 6px rgba(35, 126, 185, 0.16) !important;
}

body[data-stage] .stage-node.unlocked .stage-icon {
  box-shadow: none !important;
}


body[data-stage="forest"] .forest-statement.selected {
  outline: 3px solid rgba(49, 92, 131, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(49, 92, 131, 0.15), 0 3px 8px rgba(20, 32, 14, 0.18) !important;
}

body[data-stage="forest"] .institution-side-list button span {
  box-shadow: none !important;
  border: 0 !important;
  background-color: #fff !important;
}

body[data-stage="forest"] .institution-side-list button[data-institution="iop"] span {
  background-size: 92% !important;
  filter: contrast(1.6) saturate(1.05) brightness(0.86) drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)) !important;
}

body[data-stage="forest"] .institution-icons button[data-institution="iop"] > span {
  background-size: 92% !important;
  filter: contrast(1.6) saturate(1.05) brightness(0.86) drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)) !important;
}

body[data-stage] .stage-icon {
  width: 50px !important;
  height: 50px !important;
  box-shadow: none !important;
}

body[data-stage] .stage-node.active .stage-icon {
  width: 52px !important;
  height: 52px !important;
  box-shadow: 0 0 0 1px rgba(35, 126, 185, 0.24), 0 0 6px rgba(35, 126, 185, 0.16) !important;
}

body[data-stage] .stage-node.unlocked .stage-icon {
  box-shadow: none !important;
}


body[data-stage="forest"] .institution-side-list button {
  position: relative;
  overflow: visible;
  align-content: start;
  justify-items: center;
  gap: 3px;
  padding: 8px 8px 10px;
}

body[data-stage="forest"] .institution-side-list button > .forest-assigned-list {
  width: 100%;
  margin-top: 6px;
  display: grid;
  gap: 5px;
  justify-items: stretch;
}

body[data-stage="forest"] .institution-side-list button > .forest-assigned-list .forest-statement {
  min-height: 0;
  padding: 5px 7px;
  font-size: .62rem;
  line-height: 1.12;
  text-align: center;
  background: rgba(255,255,255,.76);
  box-shadow: 0 2px 5px rgba(20,32,14,.12);
  cursor: grab;
}

body[data-stage="forest"] .institution-side-list button > .forest-assigned-list .forest-statement.selected {
  outline-width: 2px !important;
}

/* Forest assignment cards anchored under the on-map institution labels. */
body[data-stage="forest"] .institution-icons button > .forest-assigned-list {
  position: absolute !important;
  left: 50% !important;
  top: 116px !important;
  transform: translateX(-50%) !important;
  width: 230px !important;
  display: grid !important;
  gap: 5px !important;
  justify-items: stretch !important;
  pointer-events: auto !important;
  z-index: 3 !important;
}

body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement {
  width: 100% !important;
  min-height: 0 !important;
  padding: 6px 9px !important;
  border-radius: 9px !important;
  font-size: .68rem !important;
  line-height: 1.12 !important;
  text-align: center !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 2px 6px rgba(20,32,14,.16) !important;
}

body[data-stage="forest"] .institution-icons button.has-assignment {
  z-index: 7 !important;
}

/* Flatten assigned forest labels so they align like the logo captions. */
body[data-stage="forest"] .institution-icons button > .forest-assigned-list {
  left: 50% !important;
  top: 112px !important;
  width: 190px !important;
  transform: translateX(-50%) !important;
  gap: 3px !important;
  justify-items: center !important;
}

body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement {
  width: 190px !important;
  min-height: 22px !important;
  max-height: 34px !important;
  padding: 4px 9px 5px !important;
  border-radius: 999px !important;
  font-size: .58rem !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* Put assigned forest statements directly below the institution caption, on the same symmetry axis. */
body[data-stage="forest"] .institution-icons button > b {
  left: 50% !important;
  top: 84px !important;
  transform: translateX(-50%) !important;
}

body[data-stage="forest"] .institution-icons button > .forest-assigned-list {
  position: absolute !important;
  left: 50% !important;
  top: 116px !important;
  transform: translateX(-50%) !important;
  width: 116px !important;
  margin: 0 !important;
  display: grid !important;
  gap: 3px !important;
  justify-items: center !important;
  align-items: start !important;
}

body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement {
  width: 116px !important;
  min-height: 20px !important;
  max-height: 30px !important;
  padding: 3px 8px 4px !important;
  border-radius: 999px !important;
  font-size: .54rem !important;
  line-height: 1.02 !important;
  text-align: center !important;
}

/* Final layout for forest assigned statement labels under on-map institution captions. */
body[data-stage="forest"] .institution-icons button > b {
  position: absolute !important;
  left: 50% !important;
  top: 84px !important;
  transform: translateX(-50%) !important;
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  min-height: 24px !important;
  box-sizing: border-box !important;
  z-index: 4 !important;
}

body[data-stage="forest"] .institution-icons button:hover b,
body[data-stage="forest"] .institution-icons button:focus-visible b {
  left: 50% !important;
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  transform: translateX(-50%) !important;
}

body[data-stage="forest"] .institution-icons button > .forest-assigned-list {
  position: absolute !important;
  left: 50% !important;
  top: 126px !important;
  transform: translateX(-50%) !important;
  width: 210px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  gap: 5px !important;
  justify-items: center !important;
  align-items: start !important;
  pointer-events: auto !important;
  z-index: 5 !important;
}

body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement {
  position: static !important;
  display: block !important;
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
  min-height: 24px !important;
  max-height: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 5px 10px 6px !important;
  border-radius: 999px !important;
  font-size: .62rem !important;
  line-height: 1.08 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

/* Compact assigned forest statement chips without oversized balloon padding. */
body[data-stage="forest"] .institution-icons button > .forest-assigned-list {
  top: 122px !important;
  width: 220px !important;
  gap: 4px !important;
}

body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  min-height: 0 !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-size: .72rem !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  background: rgba(255,255,255,.82) !important;
}

/* Tight final alignment for assigned forest labels under the main institution label. */
body[data-stage="forest"] .institution-icons button > b {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
}

body[data-stage="forest"] .institution-icons button > .forest-assigned-list {
  left: 50% !important;
  top: 121px !important;
  transform: translateX(-50%) !important;
  width: 240px !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 3px !important;
  justify-items: center !important;
}

body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement {
  box-sizing: border-box !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 8px 3px !important;
  border-radius: 6px !important;
  display: block !important;
  font-size: .74rem !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  text-align: center !important;
  white-space: normal !important;
}

/* Nudge assigned statement chips under tents and enlarge them on hover. */
body[data-stage="forest"] .institution-icons button > .forest-assigned-list {
  left: calc(50% + 18px) !important;
  top: 132px !important;
  z-index: 12 !important;
}

body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement {
  transform-origin: center top !important;
  transition: transform 140ms ease, font-size 140ms ease, background 140ms ease, box-shadow 140ms ease !important;
}

body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement:hover,
body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement:focus-visible {
  transform: scale(1.18) !important;
  font-size: .86rem !important;
  line-height: 1.12 !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 6px 14px rgba(20,32,14,.24) !important;
  z-index: 20 !important;
}


/* Lift the right-menu time block above the points board. */
body[data-stage] .task-panel .sidebar-time-pill {
  bottom: 178px !important;
}

body[data-stage] .task-panel .sidebar-time-pill small {
  font-size: 1.22rem !important;
}


/* Two-column round HUD in the right menu. */
body[data-stage] .task-panel .sidebar-round-hud {
  position: absolute !important;
  left: 50% !important;
  bottom: 164px !important;
  transform: translateX(-50%) !important;
  width: 220px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: end !important;
  justify-items: center !important;
  gap: 10px !important;
  pointer-events: none !important;
  z-index: 12 !important;
}

body[data-stage] .task-panel .sidebar-round-hud .sidebar-time-pill,
body[data-stage] .task-panel .sidebar-round-hud .sidebar-round-score-pill {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  justify-items: center !important;
  gap: 1px !important;
  color: #111 !important;
  background: transparent !important;
}

body[data-stage] .task-panel .sidebar-round-hud small {
  color: #111 !important;
  font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive !important;
  font-size: 1.02rem !important;
  line-height: .95 !important;
  font-weight: 900 !important;
  text-align: center !important;
  text-shadow: none !important;
}

body[data-stage] .task-panel .sidebar-round-hud strong {
  color: #111 !important;
  font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive !important;
  font-size: 2.12rem !important;
  line-height: .95 !important;
  font-weight: 1000 !important;
  text-align: center !important;
  text-shadow: none !important;
}

body[data-stage] .task-panel .score-pill.side-score {
  bottom: 54px !important;
  height: 70px !important;
}

body[data-stage] .task-panel .score-pill.side-score strong {
  color: #d39a28 !important;
  font-size: 3.05rem !important;
  text-shadow: 0 2px 0 rgba(79, 52, 12, 0.42), 0 0 8px rgba(255, 224, 104, 0.42) !important;
}

body[data-stage] .task-panel .score-pill.side-score small {
  color: #7b4f12 !important;
  font-size: .94rem !important;
  font-weight: 900 !important;
}

/* Right panel polish: forest logos, institution text, and round HUD spacing. */
body[data-stage="forest"] .institution-side-list button > span {
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body[data-stage="forest"] .institution-side-list button small {
  font-size: .95rem !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  color: #315c23 !important;
}

body[data-stage] .task-panel .sidebar-round-hud {
  bottom: 178px !important;
  width: 260px !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
}

body[data-stage] .task-panel .sidebar-round-score-pill small {
  white-space: nowrap !important;
  font-size: .94rem !important;
  line-height: 1 !important;
}

body[data-stage] .task-panel .sidebar-round-hud strong {
  font-size: 2.1rem !important;
}

/* Remove the white badge treatment from forest institution logos in the right panel. */
body[data-stage="forest"] .institution-side-list button > span {
  width: 52px !important;
  height: 42px !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  outline: 0 !important;
  border: 0 !important;
  mix-blend-mode: multiply !important;
  filter: contrast(1.12) saturate(1.05) !important;
}

body[data-stage="forest"] .institution-side-list button[data-institution="gdos"] > span,
body[data-stage="forest"] .institution-side-list button[data-institution="rdos"] > span {
  background-size: contain !important;
  filter: contrast(1.22) saturate(1.08) !important;
}

body[data-stage="forest"] .institution-side-list button[data-institution="iop"] > span {
  background-size: contain !important;
  filter: contrast(1.55) saturate(1.08) brightness(.9) !important;
}


/* Forest quiz now auto-finishes after all statements are assigned. */
body[data-stage="forest"] .forest-submit {
  display: none !important;
}

body[data-stage="forest"] .speech .forest-quiz-row {
  grid-template-columns: 1fr !important;
}

/* Forest statement cards use the same warm translucent surface as the fact bubble. */
body[data-stage="forest"] .forest-statement {
  background:
    linear-gradient(135deg, rgba(255, 251, 232, 0.72), rgba(225, 236, 205, 0.68)),
    radial-gradient(circle at 12% 18%, rgba(125, 167, 69, 0.24), transparent 34%) !important;
  box-shadow: inset 0 0 0 2px rgba(75, 111, 45, 0.16), 0 5px 12px rgba(44, 55, 22, 0.12) !important;
  color: #26331f !important;
}

body[data-stage="forest"] .forest-statement:hover,
body[data-stage="forest"] .forest-statement:focus-visible,
body[data-stage="forest"] .forest-statement.assigned {
  background:
    linear-gradient(135deg, rgba(255, 251, 232, 0.86), rgba(225, 236, 205, 0.78)),
    radial-gradient(circle at 12% 18%, rgba(125, 167, 69, 0.26), transparent 34%) !important;
}

body[data-stage="forest"] .speech .forest-quiz-row #forest-question {
  width: 100% !important;
  margin: 0 auto 4px !important;
  text-align: center !important;
  font-size: 1.1rem !important;
  line-height: 1.12 !important;
  font-weight: 1000 !important;
  white-space: normal !important;
}

/* Give neighbouring assigned statements more room around RDO?? on the forest stage. */
body[data-stage="forest"] .institution-icons button[data-institution="rdos"] {
  top: 50% !important;
}


/* Center right-panel list headings and keep dam check marks inside the panel. */
.stage-side-panel[data-side-panel="dam"] h3,
.stage-side-panel[data-side-panel="meadow"] h3,
.stage-side-panel[data-side-panel="mountains"] h3 {
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.stage-side-panel[data-side-panel="dam"] h3,
.stage-side-panel[data-side-panel="meadow"] h3,
.stage-side-panel[data-side-panel="mountains"] h3 {
  text-transform: uppercase !important;
}

.species-list li {
  grid-template-columns: 42px minmax(0, 1fr) 26px !important;
  gap: 8px !important;
  padding-right: 8px !important;
}

.species-list .check {
  width: 24px !important;
  height: 24px !important;
  font-size: .82rem !important;
  justify-self: center !important;
}


/* Forest point-and-click instruction and stronger selected statement state. */
body[data-stage="forest"] .speech .forest-quiz-row #forest-question {
  color: #315c23 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.65) !important;
}

body[data-stage="forest"] .forest-statement.selected {
  background:
    linear-gradient(135deg, rgba(255, 244, 164, 0.96), rgba(198, 232, 142, 0.92)),
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.55), transparent 36%) !important;
  outline: 4px solid rgba(47, 111, 153, 0.92) !important;
  box-shadow: 0 0 0 5px rgba(255, 240, 106, 0.55), 0 8px 18px rgba(30, 45, 18, 0.28) !important;
  transform: scale(1.035) !important;
  z-index: 30 !important;
}

/* Brighter, more legible forest instruction text. */
body[data-stage="forest"] .speech .forest-quiz-row #forest-question {
  color: #2f8a2f !important;
  font-size: 1.28rem !important;
  line-height: 1.08 !important;
  font-weight: 1000 !important;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.95),
     1px -1px 0 rgba(255,255,255,.95),
    -1px  1px 0 rgba(255,255,255,.95),
     1px  1px 0 rgba(255,255,255,.95),
     0 3px 7px rgba(30, 52, 18, .18) !important;
}

/* Wide white forest instruction. */
body[data-stage="forest"] .speech .forest-quiz-row {
  width: min(1120px, calc(100vw - 430px)) !important;
  max-width: none !important;
}

body[data-stage="forest"] .speech .forest-quiz-row #forest-question {
  width: min(1040px, 100%) !important;
  max-width: none !important;
  color: #fff !important;
  font-size: 1.36rem !important;
  line-height: 1.08 !important;
  font-weight: 1000 !important;
  text-align: center !important;
  text-shadow:
    0 2px 0 rgba(41, 70, 25, .95),
    0 0 8px rgba(20, 40, 12, .85),
    0 0 2px rgba(20, 40, 12, 1) !important;
}

/* Keep the forest instruction centered on one line on desktop. */
body[data-stage="forest"] .speech {
  width: min(1320px, calc(100vw - 360px)) !important;
  max-width: min(1320px, calc(100vw - 360px)) !important;
}

body[data-stage="forest"] .speech .forest-quiz-row,
body[data-stage="forest"] .speech .forest-quiz-row #forest-question {
  width: 100% !important;
  max-width: none !important;
}

body[data-stage="forest"] .speech .forest-quiz-row #forest-question {
  white-space: nowrap !important;
  text-align: center !important;
  font-size: 1.28rem !important;
}

/* Even spacing for assigned forest statements under institution logos. */
body[data-stage="forest"] .institution-icons button > .forest-assigned-list {
  top: 136px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 8px !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: .68rem !important;
  line-height: 1.05 !important;
}

body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement:hover,
body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement:focus-visible {
  transform: none !important;
  font-size: .78rem !important;
  height: auto !important;
  min-height: 38px !important;
  max-height: none !important;
  z-index: 25 !important;
}

/* FINAL OVERRIDES (keep at file end) */
body[data-stage] .task-panel {
  padding-top: clamp(82px, 10.2vh, 118px) !important;
  padding-right: clamp(34px, 3.2vw, 58px) !important;
  padding-bottom: clamp(110px, 12.5vh, 136px) !important;
  padding-left: clamp(42px, 3.6vw, 68px) !important;
}

body[data-stage] .task-panel .score-pill.side-score {
  bottom: clamp(14px, 2.4vh, 30px) !important;
}

body[data-stage] .task-panel .score-pill.side-score small {
  display: none !important;
}

/* ABSOLUTE FINAL 4K OVERRIDE */
@media (min-height: 1400px) {
  body[data-stage] .task-panel {
    padding-top: 156px !important;
  }
}




/* 2026-05-04 remote layout stabilization */
:root {
  --topbar-height: clamp(88px, 10.2dvh, 122px);
  --footer-height: clamp(108px, 12.2dvh, 130px);
  --app-gap: 10px;
  --play-area-gap: 8px;
  --vertical-buffer: 10px;
  --board-height: calc(100dvh - var(--topbar-height) - var(--footer-height) - (2 * var(--app-gap)) - var(--vertical-buffer));
  --footer-map-width: clamp(640px, 46vw, 940px);
  --footer-button-size: clamp(72px, 4.2vw, 102px);
  --badge-board-width: clamp(300px, 20vw, 382px);
}

body {
  overflow: hidden !important;
}

.app {
  height: 100dvh !important;
  min-height: 100dvh !important;
  gap: var(--app-gap) !important;
  padding-bottom: 2px !important;
}

.topbar {
  min-height: var(--topbar-height) !important;
  height: var(--topbar-height) !important;
}

.play-area {
  height: var(--board-height) !important;
  min-height: var(--board-height) !important;
  max-height: var(--board-height) !important;
  align-items: stretch !important;
  gap: var(--play-area-gap) !important;
}

.play-area > .stage-view {
  height: var(--board-height) !important;
  min-height: var(--board-height) !important;
  max-height: var(--board-height) !important;
}

.play-area > .task-panel {
  height: calc(var(--board-height) + 28px) !important;
  min-height: calc(var(--board-height) + 28px) !important;
  max-height: calc(var(--board-height) + 28px) !important;
}

.task-panel {
  margin: 0 0 -12px 0 !important;
  padding: clamp(158px, 9.8vh, 194px) 38px 100px 58px !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 25 !important;
}

.task-panel h2 {
  margin-top: 10px !important;
}

.stage-side-panel.active {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.species-list,
.plant-guide,
.memo-guide-grid,
.institution-side-list {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 8px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(77, 98, 39, 0.62) rgba(255, 248, 229, 0.18);
}

.species-list::-webkit-scrollbar,
.plant-guide::-webkit-scrollbar,
.memo-guide-grid::-webkit-scrollbar,
.institution-side-list::-webkit-scrollbar {
  width: 7px;
}

.species-list::-webkit-scrollbar-track,
.plant-guide::-webkit-scrollbar-track,
.memo-guide-grid::-webkit-scrollbar-track,
.institution-side-list::-webkit-scrollbar-track {
  background: rgba(255, 248, 229, 0.18);
  border-radius: 999px;
}

.species-list::-webkit-scrollbar-thumb,
.plant-guide::-webkit-scrollbar-thumb,
.memo-guide-grid::-webkit-scrollbar-thumb,
.institution-side-list::-webkit-scrollbar-thumb {
  background: rgba(77, 98, 39, 0.62);
  border-radius: 999px;
}

body[data-stage] .task-panel .sidebar-round-hud {
  left: 48.6% !important;
  bottom: 172px !important;
  width: 246px !important;
  gap: 20px !important;
}

body[data-stage] .task-panel .score-pill.side-score {
  left: 43.8% !important;
  bottom: 62px !important;
  width: 138px !important;
  height: 62px !important;
}

body[data-stage] .task-panel .score-pill.side-score strong {
  font-size: 2.72rem !important;
}

.bottom-bar {
  overflow: visible !important;
  height: var(--footer-height) !important;
  min-height: var(--footer-height) !important;
  max-height: var(--footer-height) !important;
  grid-template-columns: minmax(220px, 1fr) minmax(500px, 1.3fr) minmax(180px, 0.92fr) !important;
  gap: 10px !important;
  padding: 4px 12px 10px !important;
}

.guide {
  grid-template-columns: clamp(190px, 14vw, 260px) minmax(220px, 1fr) !important;
  min-height: 100% !important;
}

.guide-avatar {
  left: -58px !important;
  bottom: -4px !important;
  width: clamp(210px, 14vw, 282px) !important;
  height: clamp(290px, 20vw, 390px) !important;
}

.bottom-bar .stage-map {
  width: var(--footer-map-width) !important;
  height: calc(var(--footer-height) + 44px) !important;
  min-height: 0 !important;
  margin-top: -40px !important;
  margin-bottom: -10px !important;
}

.stage-map::before {
  background-size: contain !important;
}

.map-arrow {
  top: 58% !important;
  width: clamp(70px, 4.2vw, 84px) !important;
  height: clamp(48px, 3vw, 58px) !important;
}

.map-arrow-left {
  left: 14% !important;
}

.map-arrow-right {
  right: 14% !important;
}

.bottom-tool-button,
.thesaurus-button {
  top: 12px !important;
  width: var(--footer-button-size) !important;
  height: var(--footer-button-size) !important;
  background-size: contain !important;
}

.camera-button {
  left: calc(50% - (var(--footer-map-width) / 2) - clamp(166px, 11vw, 214px)) !important;
}

.thesaurus-button {
  left: calc(50% - (var(--footer-map-width) / 2) - clamp(78px, 5.7vw, 118px)) !important;
}

.sign-button {
  left: calc(50% + (var(--footer-map-width) / 2) + clamp(18px, 1.8vw, 38px)) !important;
}

.backpack {
  width: var(--badge-board-width) !important;
  height: clamp(88px, 6.3vw, 106px) !important;
  min-height: 0 !important;
  margin-right: 0 !important;
  background-size: 100% 100% !important;
}

.badge-slot {
  width: 36px !important;
  height: 36px !important;
}

.badge-slot:nth-child(1) { left: 33.6% !important; }
.badge-slot:nth-child(2) { left: 47.3% !important; }
.badge-slot:nth-child(3) { left: 60.8% !important; }
.badge-slot:nth-child(4) { left: 74.1% !important; }
.badge-slot:nth-child(5) { left: 87.2% !important; }

.fact-orbit,
.dialog-icon,
.achievement-icon {
  font-weight: 900 !important;
}

.stage-icon {
  font-size: 0 !important;
  color: transparent !important;
}

.close-dialog {
  line-height: 1 !important;
}

@media (min-width: 2400px) {
  :root {
    --board-height: calc(100dvh - var(--topbar-height) - var(--footer-height) - (2 * var(--app-gap)) - var(--vertical-buffer));
    --footer-map-width: clamp(700px, 40vw, 900px);
    --badge-board-width: clamp(280px, 16vw, 350px);
  }

  .task-panel {
    padding-top: clamp(166px, 10vh, 206px) !important;
  }

  .guide-avatar {
    width: 232px !important;
    height: 330px !important;
    left: -38px !important;
  }

  .backpack {
    height: 96px !important;
  }
}


/* 2026-05-04 close button glyph fallback */
.close-dialog {
  font-size: 0 !important;
}

.close-dialog::before {
  content:  \00d7;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  line-height: 1;
  color: #4e3b27;
  font-weight: 900;
}


.bottom-reset-button {
  transform-origin: center;
}


/* Icon polish 2026-05-04 */
.fact-orbit {
  color: #436424;
  font-family: Arial, Segoe UI, sans-serif;
  font-size: 1.08rem;
  font-weight: 1000;
  letter-spacing: -0.01em;
}

.badge-slot,
.achievement-icon {
  color: #fff8dc;
  font-family: Trebuchet MS, Segoe UI, sans-serif;
  font-weight: 1000;
  text-shadow: 0 1px 2px rgba(55, 33, 10, 0.38);
}

.badge-slot {
  font-size: 1.18rem !important;
}

.achievement-icon {
  font-size: 1.55rem;
}

.close-dialog {
  color: transparent !important;
  font-size: 0 !important;
}

.close-dialog::before {
  content: \00d7;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #5a4228;
  font-family: Arial, sans-serif;
  font-size: 1.9rem;
  font-weight: 1000;
  line-height: 1;
}


/* Final forced UI override 2026-05-04 */
.title-board {
  top: -12px !important;
  z-index: 50 !important;
  pointer-events: none !important;
}

.title-board::before {
  content: "";
  position: absolute;
  inset: 8px 12px 14px;
  border-radius: 30px;
  background: rgba(244, 221, 165, 1);
  box-shadow: 0 8px 18px rgba(72, 45, 20, 0.24);
  z-index: -1;
}

.title-logo {
  opacity: 1 !important;
  filter: drop-shadow(0 9px 11px rgba(44, 30, 17, 0.22)) !important;
}

.play-area {
  overflow: visible !important;
}

.play-area > .task-panel,
.task-panel {
  margin: -18px 0 -12px 0 !important;
  z-index: 45 !important;
}

.bottom-tool-button,
.thesaurus-button,
.bottom-reset-button {
  position: absolute !important;
  z-index: 12 !important;
  top: -2px !important;
  width: clamp(116px, 6.5vw, 146px) !important;
  height: clamp(116px, 6.5vw, 146px) !important;
  background-size: contain !important;
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease !important;
}

.sign-button {
  left: calc(50% - (var(--footer-map-width) / 2) - clamp(314px, 18vw, 378px)) !important;
  opacity: 1 !important;
  filter: saturate(1.08) brightness(1.18) drop-shadow(0 8px 14px rgba(31, 38, 17, 0.24)) !important;
}

.camera-button {
  left: calc(50% - (var(--footer-map-width) / 2) - clamp(206px, 11.8vw, 254px)) !important;
}

.thesaurus-button {
  left: calc(50% - (var(--footer-map-width) / 2) - clamp(98px, 5.8vw, 132px)) !important;
}

.bottom-reset-button {
  left: calc(50% + (var(--footer-map-width) / 2) + clamp(74px, 4.6vw, 102px)) !important;
  top: 26px !important;
  width: clamp(98px, 5.1vw, 132px) !important;
  height: clamp(40px, 2.55vw, 54px) !important;
}

.bottom-tool-button:hover,
.bottom-tool-button:focus-visible,
.thesaurus-button:hover,
.thesaurus-button:focus-visible,
.bottom-reset-button:hover,
.bottom-reset-button:focus-visible {
  transform: scale(1.14) !important;
  opacity: 1 !important;
  filter: saturate(1.08) brightness(1.16) drop-shadow(0 10px 16px rgba(31, 38, 17, 0.26)) !important;
}

.fact-orbit {
  color: #436424 !important;
  font-family: Arial, "Segoe UI", sans-serif !important;
  font-size: 1.08rem !important;
  font-weight: 1000 !important;
}

.badge-slot,
.achievement-icon {
  color: #fff8dc !important;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif !important;
  font-weight: 1000 !important;
  text-shadow: 0 1px 2px rgba(55, 33, 10, 0.38) !important;
}

.badge-slot {
  font-size: 1.18rem !important;
}

.achievement-icon {
  font-size: 1.55rem !important;
}

.close-dialog {
  color: transparent !important;
  font-size: 0 !important;
}

.close-dialog::before {
  content: "X" !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #5a4228 !important;
  font-family: Arial, sans-serif !important;
  font-size: 1.9rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}


/* Final tuning 2026-05-05 */
.title-board::before {
  display: none !important;
}

.title-board {
  top: -18px !important;
}

.play-area > .task-panel,
.task-panel {
  margin: -24px 0 -12px 0 !important;
}

.bottom-tool-button,
.thesaurus-button {
  width: clamp(112px, 5.9vw, 142px) !important;
  height: clamp(112px, 5.9vw, 142px) !important;
}

.sign-button {
  left: calc(50% - (var(--footer-map-width) / 2) - 274px) !important;
}

.camera-button {
  left: calc(50% - (var(--footer-map-width) / 2) - 146px) !important;
}

.thesaurus-button {
  left: calc(50% - (var(--footer-map-width) / 2) - 18px) !important;
}

.bottom-reset-button {
  left: calc(50% + (var(--footer-map-width) / 2) - 18px) !important;
  top: 34px !important;
  width: clamp(86px, 4.25vw, 118px) !important;
  height: clamp(36px, 2.15vw, 48px) !important;
}


/* Desktop responsiveness refinement 2026-05-05 */
.topbar {
  padding: clamp(10px, 0.9vw, 16px) clamp(16px, 1.2vw, 24px) !important;
  gap: clamp(12px, 1vw, 18px) !important;
}

.play-area {
  grid-template-columns: minmax(0, 1fr) clamp(360px, 21vw, 404px) !important;
  gap: clamp(4px, 0.45vw, 10px) !important;
}

.task-panel {
  padding: clamp(150px, 9.1vh, 184px) clamp(26px, 1.8vw, 40px) clamp(92px, 6.3vh, 108px) clamp(48px, 3.1vw, 58px) !important;
}

.task-panel h2 {
  font-size: clamp(1rem, 0.82vw, 1.1rem) !important;
  line-height: 1.18 !important;
}

.task-panel p {
  font-size: clamp(0.82rem, 0.68vw, 0.94rem) !important;
  line-height: 1.24 !important;
}

.task-panel h3 {
  font-size: clamp(0.88rem, 0.72vw, 0.98rem) !important;
}

.bottom-bar {
  grid-template-columns: minmax(230px, 0.95fr) minmax(520px, 1.34fr) minmax(180px, 0.82fr) !important;
  gap: clamp(8px, 0.75vw, 14px) !important;
}

.bottom-bar .stage-map {
  width: clamp(640px, 44vw, 900px) !important;
}

.map-arrow {
  width: clamp(64px, 3.8vw, 82px) !important;
  height: clamp(44px, 2.7vw, 58px) !important;
}

.stage-current-label {
  font-size: clamp(1rem, 0.95vw, 1.18rem) !important;
  min-width: clamp(140px, 10vw, 176px) !important;
  padding: 8px clamp(16px, 1.1vw, 22px) 9px !important;
}

.brand-copy small {
  max-width: clamp(220px, 16vw, 300px) !important;
}

@media (max-width: 1599px) {
  .title-board {
    width: clamp(220px, 24vw, 430px) !important;
    height: clamp(64px, 8.2vh, 96px) !important;
  }

  .play-area {
    grid-template-columns: minmax(0, 1fr) clamp(342px, 24vw, 382px) !important;
  }

  .task-panel {
    padding: clamp(144px, 8.8vh, 176px) 24px clamp(88px, 6vh, 102px) 42px !important;
  }

  .bottom-bar .stage-map {
    width: clamp(580px, 42vw, 760px) !important;
  }

  .sign-button {
    left: calc(50% - (clamp(580px, 42vw, 760px) / 2) - 248px) !important;
  }

  .camera-button {
    left: calc(50% - (clamp(580px, 42vw, 760px) / 2) - 132px) !important;
  }

  .thesaurus-button {
    left: calc(50% - (clamp(580px, 42vw, 760px) / 2) - 16px) !important;
  }

  .bottom-reset-button {
    left: calc(50% + (clamp(580px, 42vw, 760px) / 2) - 8px) !important;
  }
}

@media (min-width: 1600px) and (max-width: 2199px) {
  .title-board {
    width: clamp(250px, 25vw, 470px) !important;
    height: clamp(70px, 8.6vh, 104px) !important;
  }

  .sign-button {
    left: calc(50% - (clamp(640px, 44vw, 900px) / 2) - 274px) !important;
  }

  .camera-button {
    left: calc(50% - (clamp(640px, 44vw, 900px) / 2) - 146px) !important;
  }

  .thesaurus-button {
    left: calc(50% - (clamp(640px, 44vw, 900px) / 2) - 18px) !important;
  }

  .bottom-reset-button {
    left: calc(50% + (clamp(640px, 44vw, 900px) / 2) - 18px) !important;
  }
}

@media (min-width: 2200px) {
  .title-board {
    width: clamp(280px, 23vw, 500px) !important;
    height: clamp(76px, 8.8vh, 110px) !important;
  }

  .play-area {
    grid-template-columns: minmax(0, 1fr) clamp(372px, 19vw, 416px) !important;
  }

  .task-panel {
    padding-right: 30px !important;
  }

  .bottom-bar .stage-map {
    width: clamp(740px, 40vw, 940px) !important;
  }

  .sign-button {
    left: calc(50% - (clamp(740px, 40vw, 940px) / 2) - 286px) !important;
  }

  .camera-button {
    left: calc(50% - (clamp(740px, 40vw, 940px) / 2) - 150px) !important;
  }

  .thesaurus-button {
    left: calc(50% - (clamp(740px, 40vw, 940px) / 2) - 14px) !important;
  }

  .bottom-reset-button {
    left: calc(50% + (clamp(740px, 40vw, 940px) / 2) - 28px) !important;
  }
}


/* Stability optimization 2026-05-05 */
html,
body {
  height: 100%;
  overflow: hidden !important;
}

body {
  text-rendering: geometricPrecision;
}

.app {
  height: 100dvh !important;
  min-height: 100dvh !important;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr) var(--footer-height) !important;
  gap: var(--app-gap) !important;
  padding: 0 clamp(8px, 1vw, 14px) 10px !important;
}

.topbar {
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

.title-board {
  top: -18px !important;
  width: clamp(240px, 24vw, 500px) !important;
  height: clamp(72px, 9vh, 110px) !important;
}

.title-board::before {
  display: none !important;
}

.play-area {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  grid-template-columns: minmax(0, 1fr) clamp(356px, 20vw, 410px) !important;
  gap: clamp(4px, 0.45vw, 10px) !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.play-area > .stage-view {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

.play-area > .task-panel,
.task-panel {
  height: calc(100% + 34px) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: -24px 0 -10px 0 !important;
  padding: clamp(148px, 9vh, 184px) clamp(24px, 1.7vw, 38px) clamp(88px, 6vh, 104px) clamp(46px, 2.8vw, 58px) !important;
  z-index: 45 !important;
}

.stage-side-panel.active {
  min-height: 0 !important;
}

.species-list,
.plant-guide,
.memo-guide-grid,
.institution-side-list {
  min-height: 0 !important;
  max-height: 100% !important;
}

.task-panel h2 {
  font-size: 1.03rem !important;
  line-height: 1.18 !important;
}

.task-panel p {
  font-size: 0.88rem !important;
  line-height: 1.24 !important;
}

.task-panel h3 {
  font-size: 0.92rem !important;
}

.bottom-bar {
  height: var(--footer-height) !important;
  min-height: var(--footer-height) !important;
  max-height: var(--footer-height) !important;
  grid-template-columns: minmax(220px, 1fr) minmax(560px, 1.38fr) minmax(190px, 0.82fr) !important;
  padding: 4px 12px 10px !important;
  overflow: visible !important;
}

.bottom-bar .stage-map {
  width: clamp(620px, 42vw, 920px) !important;
  height: calc(var(--footer-height) + 44px) !important;
  margin-top: -40px !important;
  margin-bottom: -8px !important;
}

.map-arrow {
  width: clamp(64px, 3.6vw, 82px) !important;
  height: clamp(44px, 2.6vw, 58px) !important;
}

.stage-node {
  width: 54px !important;
  height: 54px !important;
}

.stage-icon {
  width: 38px !important;
  height: 38px !important;
}

.bottom-tool-button,
.thesaurus-button {
  top: -2px !important;
  width: clamp(104px, 5.2vw, 134px) !important;
  height: clamp(104px, 5.2vw, 134px) !important;
}

.bottom-reset-button {
  top: 34px !important;
  width: clamp(82px, 3.8vw, 112px) !important;
  height: clamp(34px, 1.95vw, 46px) !important;
  font-size: 0.95rem !important;
}

.sign-button {
  opacity: 1 !important;
  filter: saturate(1.08) brightness(1.18) drop-shadow(0 8px 14px rgba(31, 38, 17, 0.24)) !important;
}

.bottom-tool-button:hover,
.bottom-tool-button:focus-visible,
.thesaurus-button:hover,
.thesaurus-button:focus-visible,
.bottom-reset-button:hover,
.bottom-reset-button:focus-visible {
  transform: scale(1.1) !important;
}

.guide-avatar {
  left: clamp(-74px, -3.1vw, -46px) !important;
  width: clamp(210px, 13.5vw, 280px) !important;
  height: clamp(286px, 19vw, 386px) !important;
}

.backpack {
  width: clamp(280px, 16.5vw, 360px) !important;
  height: clamp(72px, 4.7vw, 88px) !important;
}

.close-dialog::before {
  content: "X" !important;
}

@media (max-width: 1599px) {
  :root {
    --topbar-height: clamp(84px, 9.8dvh, 112px);
    --footer-height: clamp(104px, 11.8dvh, 124px);
  }

  .play-area {
    grid-template-columns: minmax(0, 1fr) clamp(338px, 23vw, 380px) !important;
  }

  .task-panel {
    padding-left: 42px !important;
    padding-right: 24px !important;
  }
}

@media (min-width: 2200px) {
  :root {
    --topbar-height: clamp(90px, 9.5dvh, 122px);
    --footer-height: clamp(106px, 11.4dvh, 130px);
  }

  .play-area {
    grid-template-columns: minmax(0, 1fr) clamp(370px, 18vw, 414px) !important;
  }
}


/* Badge strip height tuning 2026-05-05 */
.backpack {
  height: clamp(72px, 4.7vw, 88px) !important;
}

.badge-slot {
  width: 32px !important;
  height: 32px !important;
}


/* Stage item responsive scaling 2026-05-05 */
:root {
  --stage-item-scale: 1;
}

.hotspot {
  width: clamp(62px, 4.4vw, 88px) !important;
  height: clamp(62px, 4.4vw, 88px) !important;
}

.hotspot .icon {
  width: clamp(40px, 3vw, 58px) !important;
  height: clamp(40px, 3vw, 58px) !important;
}

.hotspot strong {
  font-size: 0.82rem !important;
  line-height: 1.05 !important;
}

.hotspot:not(.found)::before {
  transform: translate(-50%, -50%) scale(var(--stage-item-scale)) !important;
  transform-origin: center !important;
}

.trace-item,
.plant-item,
.plant-item.fake-plant {
  width: clamp(48px, 3.5vw, 72px) !important;
  height: clamp(48px, 3.5vw, 72px) !important;
  background-size: contain !important;
}

.trace-item::before {
  transform: scale(var(--stage-item-scale)) !important;
  transform-origin: center !important;
}

.plant-thumb {
  width: clamp(34px, 2.4vw, 44px) !important;
  height: clamp(34px, 2.4vw, 44px) !important;
}

.summary-plant {
  width: clamp(58px, 4.2vw, 78px) !important;
  min-height: clamp(62px, 4.4vw, 82px) !important;
}

.summary-plant::before,
.plant-bubble-icon {
  transform: scale(var(--stage-item-scale)) !important;
  transform-origin: center !important;
}

.memo-board {
  gap: clamp(6px, 0.7vw, 12px) !important;
}

.memo-card {
  width: clamp(92px, 6.2vw, 136px) !important;
  height: clamp(98px, 6.5vw, 144px) !important;
}

.memo-card span {
  font-size: clamp(0.66rem, 0.6vw, 0.82rem) !important;
}

.memo-guide-item {
  min-height: clamp(68px, 5vw, 86px) !important;
}

.memo-guide-item span {
  height: clamp(38px, 3.2vw, 52px) !important;
}

.institution-icons button {
  width: clamp(72px, 5.1vw, 104px) !important;
  height: clamp(72px, 5.1vw, 104px) !important;
}

.institution-icons button > span {
  transform: scale(var(--stage-item-scale)) !important;
  transform-origin: center !important;
}

.forest-statement {
  font-size: clamp(0.74rem, 0.68vw, 0.88rem) !important;
  padding: clamp(7px, 0.7vw, 10px) clamp(8px, 0.8vw, 12px) !important;
}

@media (max-width: 1599px), (max-height: 850px) {
  :root {
    --stage-item-scale: 0.86;
  }

  .hotspot {
    width: clamp(54px, 4vw, 76px) !important;
    height: clamp(54px, 4vw, 76px) !important;
  }

  .hotspot .icon {
    width: clamp(34px, 2.7vw, 50px) !important;
    height: clamp(34px, 2.7vw, 50px) !important;
  }

  .hotspot strong {
    font-size: 0.72rem !important;
  }

  .trace-item,
  .plant-item,
  .plant-item.fake-plant {
    width: clamp(40px, 3vw, 60px) !important;
    height: clamp(40px, 3vw, 60px) !important;
  }

  .memo-card {
    width: clamp(78px, 5.4vw, 116px) !important;
    height: clamp(84px, 5.8vw, 124px) !important;
  }

  .institution-icons button {
    width: clamp(60px, 4.4vw, 88px) !important;
    height: clamp(60px, 4.4vw, 88px) !important;
  }
}

@media (min-width: 2200px) and (min-height: 1200px) {
  :root {
    --stage-item-scale: 0.94;
  }
}


/* Right panel and score tuning 2026-05-05 */
.app {
  padding-left: clamp(10px, 1vw, 18px) !important;
  padding-right: clamp(4px, 0.45vw, 8px) !important;
}

.topbar {
  margin-left: clamp(8px, 0.75vw, 14px) !important;
  margin-right: clamp(8px, 0.75vw, 14px) !important;
  width: auto !important;
}

.play-area {
  grid-template-columns: minmax(0, 1fr) clamp(354px, 19vw, 398px) !important;
  gap: clamp(1px, 0.12vw, 3px) !important;
}

.play-area > .stage-view.active,
.play-area > .stage-view {
  margin-right: -2px !important;
}

.play-area > .task-panel,
.task-panel {
  transform: translateX(0) !important;
  width: 100% !important;
  padding-right: clamp(18px, 1.15vw, 30px) !important;
  padding-left: clamp(44px, 2.5vw, 56px) !important;
}

body[data-stage] .task-panel .score-pill.side-score,
.task-panel .score-pill.side-score {
  left: 43.2% !important;
  bottom: clamp(50px, 5.2vh, 64px) !important;
  width: clamp(94px, 6.2vw, 128px) !important;
  height: clamp(48px, 5vh, 62px) !important;
  transform: translateX(-50%) !important;
}

body[data-stage] .task-panel .score-pill.side-score strong,
.task-panel .score-pill.side-score strong {
  font-size: clamp(2.05rem, 2.15vw, 2.66rem) !important;
  line-height: 0.95 !important;
}

@media (max-width: 1599px), (max-height: 850px) {
  .play-area {
    grid-template-columns: minmax(0, 1fr) clamp(336px, 22vw, 374px) !important;
  }

  .play-area > .task-panel,
  .task-panel {
    transform: translateX(0) !important;
    width: 100% !important;
    padding-right: 18px !important;
    padding-left: 40px !important;
  }

  body[data-stage] .task-panel .score-pill.side-score,
  .task-panel .score-pill.side-score {
    left: 43% !important;
    bottom: 48px !important;
    width: 96px !important;
    height: 48px !important;
  }

  body[data-stage] .task-panel .score-pill.side-score strong,
  .task-panel .score-pill.side-score strong {
    font-size: 2rem !important;
  }
}

@media (min-width: 2200px) {
  .play-area {
    grid-template-columns: minmax(0, 1fr) clamp(366px, 17.2vw, 408px) !important;
  }

  body[data-stage] .task-panel .score-pill.side-score,
  .task-panel .score-pill.side-score {
    left: 43.5% !important;
    bottom: clamp(54px, 4.5vh, 66px) !important;
  }
}




/* Reset image button 2026-05-05 */
.bottom-reset-button {
  top: -2px !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: visible !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent url("assets/reset.png") center / contain no-repeat !important;
  width: clamp(104px, 5.2vw, 134px) !important;
  height: clamp(104px, 5.2vw, 134px) !important;
  border-radius: 0 !important;
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease !important;
}

.bottom-reset-button:hover,
.bottom-reset-button:focus-visible {
  transform: scale(1.1) !important;
  opacity: 1 !important;
  filter: saturate(1.08) brightness(1.16) drop-shadow(0 10px 16px rgba(31, 38, 17, 0.26)) !important;
  outline: none !important;
}


/* Footer button arrow alignment 2026-05-05 */
.bottom-tool-button,
.thesaurus-button,
.bottom-reset-button {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.bottom-tool-button:hover,
.bottom-tool-button:focus-visible,
.thesaurus-button:hover,
.thesaurus-button:focus-visible,
.bottom-reset-button:hover,
.bottom-reset-button:focus-visible {
  transform: translateY(-50%) scale(1.1) !important;
}

/* Right panel 4K content and score correction 2026-05-05 */
body[data-stage] .task-panel .score-pill.side-score,
.task-panel .score-pill.side-score {
  bottom: clamp(46px, 3.8vh, 58px) !important;
}

body[data-stage] .task-panel .score-pill.side-score strong,
.task-panel .score-pill.side-score strong {
  font-size: clamp(1.85rem, 1.72vw, 2.34rem) !important;
  line-height: 0.94 !important;
}

@media (max-width: 1599px), (max-height: 850px) {
  body[data-stage] .task-panel .score-pill.side-score,
  .task-panel .score-pill.side-score {
    bottom: 46px !important;
  }

  body[data-stage] .task-panel .score-pill.side-score strong,
  .task-panel .score-pill.side-score strong {
    font-size: 1.84rem !important;
  }
}

@media (min-width: 3000px) and (min-height: 1600px) {
  .play-area > .task-panel,
  .task-panel {
    padding-top: clamp(232px, 12.6vh, 286px) !important;
  }
}

/* Right panel 4K vertical specificity fix 2026-05-05 */
@media (min-width: 3000px) and (min-height: 1600px) {
  body[data-stage] .play-area > .task-panel,
  body[data-stage] .task-panel {
    padding-top: clamp(232px, 12.6vh, 286px) !important;
  }
}

/* Right panel universal inner scroll 2026-05-05 */
body[data-stage] .task-panel {
  overflow: hidden !important;
}

body[data-stage] .task-panel .stage-side-panel.active {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  flex-direction: column !important;
}

body[data-stage] .task-panel .stage-side-panel.active > .species-list,
body[data-stage] .task-panel .stage-side-panel.active > .plant-guide,
body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid,
body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding-right: 8px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(77, 98, 39, 0.68) rgba(255, 248, 229, 0.2) !important;
}

body[data-stage] .task-panel .stage-side-panel.active > .species-list::-webkit-scrollbar,
body[data-stage] .task-panel .stage-side-panel.active > .plant-guide::-webkit-scrollbar,
body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid::-webkit-scrollbar,
body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list::-webkit-scrollbar {
  width: 7px;
}

body[data-stage] .task-panel .stage-side-panel.active > .species-list::-webkit-scrollbar-track,
body[data-stage] .task-panel .stage-side-panel.active > .plant-guide::-webkit-scrollbar-track,
body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid::-webkit-scrollbar-track,
body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list::-webkit-scrollbar-track {
  background: rgba(255, 248, 229, 0.2);
  border-radius: 999px;
}

body[data-stage] .task-panel .stage-side-panel.active > .species-list::-webkit-scrollbar-thumb,
body[data-stage] .task-panel .stage-side-panel.active > .plant-guide::-webkit-scrollbar-thumb,
body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid::-webkit-scrollbar-thumb,
body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list::-webkit-scrollbar-thumb {
  background: rgba(77, 98, 39, 0.68);
  border-radius: 999px;
}

/* Badge strip compact tuning 2026-05-05 */
.backpack {
  width: clamp(250px, 14.2vw, 318px) !important;
  height: clamp(62px, 3.2vw, 74px) !important;
  min-height: 0 !important;
  background-size: 100% 100% !important;
}

.badge-slot {
  width: clamp(28px, 1.55vw, 30px) !important;
  height: clamp(28px, 1.55vw, 30px) !important;
}

/* Right panel overlap crop and width tuning 2026-05-05 */
.play-area {
  grid-template-columns: minmax(0, 1fr) clamp(382px, 20.2vw, 438px) !important;
  gap: clamp(0px, 0.08vw, 2px) !important;
}

.play-area > .stage-view.active,
.play-area > .stage-view {
  margin-right: -3px !important;
}

body[data-stage] .play-area > .task-panel,
.play-area > .task-panel,
body[data-stage] .task-panel,
.task-panel {
  width: calc(100% + 18px) !important;
  height: calc(100% + 56px) !important;
  min-height: calc(100% + 56px) !important;
  max-height: calc(100% + 56px) !important;
  margin: -32px -6px -24px -12px !important;
  background-size: 100% calc(100% + 34px) !important;
  background-position: center -12px !important;
  background-repeat: no-repeat !important;
  z-index: 48 !important;
}

@media (min-width: 3000px) and (min-height: 1600px) {
  body[data-stage] .play-area > .task-panel,
  body[data-stage] .task-panel {
    padding-top: clamp(232px, 12.6vh, 286px) !important;
  }
}

/* Right panel background hard crop 2026-05-05 */
body[data-stage] .play-area > .task-panel,
.play-area > .task-panel,
body[data-stage] .task-panel,
.task-panel {
  height: calc(100% + 80px) !important;
  min-height: calc(100% + 80px) !important;
  max-height: calc(100% + 80px) !important;
  margin: -32px -6px -48px -12px !important;
  background: none !important;
  isolation: isolate !important;
}

body[data-stage] .task-panel::before,
.task-panel::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 22px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: url("assets/menu-panel-cut.png") center -18px / 100% calc(100% + 68px) no-repeat !important;
  border-radius: 20px !important;
}

body[data-stage] .task-panel > *,
.task-panel > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 3000px) and (min-height: 1600px) {
  body[data-stage] .play-area > .task-panel,
  body[data-stage] .task-panel {
    padding-top: clamp(232px, 12.6vh, 286px) !important;
  }
}

/* Popup parchment frame background 2026-05-05 */
.info-dialog,
.fact-dialog,
.stage-intro-dialog,
.achievements-dialog,
.map-dialog,
.thesaurus-dialog {
  border: 0 !important;
  border-radius: 24px !important;
  background: transparent url("assets/popup_background.png") center / 100% 100% no-repeat !important;
  color: #24311e !important;
  box-shadow: 0 26px 86px rgba(14, 23, 12, 0.45) !important;
  overflow: hidden !important;
}

.info-dialog {
  width: min(940px, calc(100vw - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
  padding: clamp(72px, 7.2vh, 92px) clamp(66px, 5.6vw, 92px) clamp(66px, 7vh, 88px) !important;
}

.fact-dialog {
  width: min(640px, calc(100vw - 28px)) !important;
  padding: clamp(68px, 7vh, 88px) clamp(58px, 5.4vw, 82px) clamp(62px, 6.5vh, 80px) !important;
}

.stage-intro-dialog,
.achievements-dialog,
.map-dialog,
.thesaurus-dialog {
  padding: clamp(72px, 7.4vh, 98px) clamp(70px, 6vw, 104px) clamp(68px, 7vh, 92px) !important;
}

.thesaurus-dialog {
  width: min(1120px, calc(100vw - 70px)) !important;
  max-height: min(820px, calc(100vh - 54px)) !important;
}

.thesaurus-card {
  background: transparent url("assets/popup_background.png") center / 100% 100% no-repeat !important;
  border-radius: 20px !important;
  padding: clamp(46px, 4.8vh, 62px) clamp(42px, 3.8vw, 58px) !important;
  box-shadow: none !important;
}

.info-dialog::backdrop,
.fact-dialog::backdrop,
.stage-intro-dialog::backdrop,
.achievements-dialog::backdrop,
.map-dialog::backdrop,
.thesaurus-dialog::backdrop {
  background: rgba(20, 35, 16, 0.48) !important;
  backdrop-filter: blur(2px) !important;
}

.close-dialog {
  right: clamp(34px, 3.2vw, 54px) !important;
  top: clamp(30px, 3vh, 44px) !important;
  z-index: 8 !important;
}

@media (max-width: 900px), (max-height: 760px) {
  .info-dialog,
  .fact-dialog,
  .stage-intro-dialog,
  .achievements-dialog,
  .map-dialog,
  .thesaurus-dialog {
    padding: 58px 46px 52px !important;
  }
}

/* Stage bleed under right panel and softer panel crop 2026-05-05 */
.play-area {
  isolation: isolate !important;
}

.play-area::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: 18px !important;
  pointer-events: none !important;
  background:
    linear-gradient(rgba(30, 55, 22, 0.02), rgba(30, 55, 22, 0.08)),
    url("assets/forest-valley-bg-tatry.png") center / cover no-repeat !important;
}

body[data-stage="dam"] .play-area::before {
  background:
    linear-gradient(rgba(30, 55, 22, 0.02), rgba(30, 55, 22, 0.08)),
    url("assets/forest-valley-bg-tatry.png") center / cover no-repeat !important;
}

body[data-stage="meadow"] .play-area::before {
  background:
    linear-gradient(rgba(34, 58, 26, 0.26), rgba(34, 58, 26, 0.48)),
    url("assets/forest-valley-bg.png") center / cover no-repeat !important;
}

body[data-stage="mountains"] .play-area::before {
  background:
    linear-gradient(rgba(24, 42, 64, 0.12), rgba(24, 42, 64, 0.32)),
    url("assets/mountains-bg-generated.png") center 22% / cover no-repeat !important;
}

body[data-stage="forest"] .play-area::before {
  background:
    linear-gradient(rgba(19, 35, 16, 0.08), rgba(19, 35, 16, 0.38)),
    url("assets/forest-camp-blocked-las3.png") center / cover no-repeat !important;
}

.play-area > .stage-view,
.play-area > .task-panel {
  position: relative !important;
}

.play-area > .stage-view {
  z-index: 1 !important;
}

body[data-stage] .play-area > .task-panel,
.play-area > .task-panel,
body[data-stage] .task-panel,
.task-panel {
  background: none !important;
  isolation: isolate !important;
}

body[data-stage] .task-panel::before,
.task-panel::before {
  bottom: 0 !important;
  background: url("assets/menu-panel-cut.png") center -6px / 100% calc(100% + 28px) no-repeat !important;
}

/* Full-board Tezeusz book popup 2026-05-05 */
.thesaurus-dialog {
  position: fixed !important;
  left: clamp(16px, 1vw, 18px) !important;
  right: clamp(8px, 0.45vw, 10px) !important;
  top: calc(var(--topbar-height) + var(--app-gap)) !important;
  width: auto !important;
  height: var(--board-height) !important;
  max-width: none !important;
  max-height: var(--board-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent url("assets/tezeusz.png") center / contain no-repeat !important;
  box-shadow: 0 22px 70px rgba(14, 23, 12, 0.42) !important;
  overflow: hidden !important;
}

.thesaurus-dialog .close-dialog {
  top: clamp(18px, 2.2vh, 32px) !important;
  right: clamp(22px, 2vw, 38px) !important;
}

.thesaurus-dialog > h2 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.thesaurus-layout {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(74%, calc(var(--board-height) * 1.18)) !important;
  height: min(72%, calc(var(--board-height) * 0.64)) !important;
  min-height: 0 !important;
  transform: translate(-50%, -48%) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr) !important;
  gap: clamp(18px, 2.2vw, 42px) !important;
  overflow: hidden !important;
}

.thesaurus-grid,
.thesaurus-card {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: auto !important;
  background: rgba(255, 244, 204, 0.28) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

.thesaurus-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(8px, 0.9vw, 12px) !important;
  padding: clamp(8px, 1vw, 14px) !important;
}

.thesaurus-card {
  padding: clamp(12px, 1.5vw, 20px) !important;
}

.thesaurus-item {
  min-height: clamp(74px, 8vh, 92px) !important;
  background: rgba(255, 250, 228, 0.46) !important;
}

@media (min-width: 3000px) and (min-height: 1600px) {
  .thesaurus-layout {
    width: min(70%, calc(var(--board-height) * 1.2)) !important;
    height: min(70%, calc(var(--board-height) * 0.62)) !important;
  }
}

/* Extend stage bleed behind protruding right panel 2026-05-05 */
.play-area::before {
  inset: -40px -22px -58px 0 !important;
}

body[data-stage] .play-area > .task-panel,
.play-area > .task-panel,
body[data-stage] .task-panel,
.task-panel {
  width: calc(100% + 22px) !important;
  margin-right: -8px !important;
}

/* Revert stage bleed background under right panel 2026-05-05 */
.play-area::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

body[data-stage] .play-area > .task-panel,
.play-area > .task-panel,
body[data-stage] .task-panel,
.task-panel {
  width: calc(100% + 18px) !important;
  margin: -32px -6px -48px -12px !important;
}

body[data-stage] .task-panel::before,
.task-panel::before {
  bottom: 0 !important;
  background: url("assets/menu-panel-cut.png") center -6px / 100% calc(100% + 28px) no-repeat !important;
}

/* Keep right panel above top and bottom bars 2026-05-05 */
.app,
.play-area {
  overflow: visible !important;
}

.topbar,
.bottom-bar {
  position: relative !important;
  z-index: 40 !important;
}

.play-area {
  position: relative !important;
  z-index: 60 !important;
}

body[data-stage] .play-area > .task-panel,
.play-area > .task-panel,
body[data-stage] .task-panel,
.task-panel {
  position: relative !important;
  z-index: 90 !important;
}

/* Composite layout polish 2026-05-05 */
.guide,
.guide-avatar {
  position: relative !important;
  z-index: 86 !important;
}

.backpack {
  transform: translateY(10px) !important;
}

.badge-slot {
  transform: translate(-50%, -42%) !important;
}

body[data-stage="forest"] .speech {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  left: clamp(18px, 1.8vw, 34px) !important;
  top: clamp(18px, 2vh, 34px) !important;
  bottom: auto !important;
  width: calc(100% - clamp(56px, 6vw, 110px)) !important;
  max-width: none !important;
  z-index: 34 !important;
  pointer-events: none !important;
}

body[data-stage="forest"] .speech::before,
body[data-stage="forest"] .speech::after {
  content: none !important;
  display: none !important;
}

body[data-stage="forest"] .speech .forest-quiz,
body[data-stage="forest"] .speech .forest-assignment,
body[data-stage="forest"] .speech .forest-statement-pool {
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

body[data-stage="forest"] .speech .forest-quiz-row {
  display: none !important;
}

body[data-stage="forest"] .speech .forest-statement-pool {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(clamp(128px, 11vw, 190px), 1fr)) !important;
  gap: clamp(6px, 0.7vw, 10px) !important;
  max-height: min(36vh, 42%) !important;
  overflow: visible !important;
  align-content: start !important;
}

body[data-stage="forest"] .forest-statement {
  min-height: clamp(42px, 4.5vh, 58px) !important;
  padding: clamp(6px, 0.62vw, 9px) clamp(7px, 0.72vw, 11px) !important;
  font-size: clamp(0.68rem, 0.58vw, 0.78rem) !important;
  line-height: 1.12 !important;
  background: rgba(255, 250, 228, 0.78) !important;
  box-shadow: 0 2px 7px rgba(20, 32, 14, 0.16) !important;
}

body[data-stage="forest"] .fact-strip {
  top: 14px !important;
  bottom: auto !important;
}

body[data-stage="forest"] .fact-strip.fact-bottom {
  top: 14px !important;
  bottom: auto !important;
}

body[data-stage] .task-panel .stage-side-panel.active {
  justify-content: flex-start !important;
  align-content: start !important;
}

body[data-stage] .task-panel .stage-side-panel.active > .species-list,
body[data-stage] .task-panel .stage-side-panel.active > .plant-guide,
body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid,
body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list {
  flex: 0 1 auto !important;
  align-content: start !important;
  align-items: start !important;
  justify-content: stretch !important;
  scrollbar-gutter: stable both-edges !important;
  direction: rtl !important;
  padding-left: 8px !important;
  padding-right: 0 !important;
}

body[data-stage] .task-panel .stage-side-panel.active > .species-list > *,
body[data-stage] .task-panel .stage-side-panel.active > .plant-guide > *,
body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid > *,
body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list > * {
  direction: ltr !important;
}

body[data-stage] .task-panel .stage-side-panel.active > .species-list::-webkit-scrollbar,
body[data-stage] .task-panel .stage-side-panel.active > .plant-guide::-webkit-scrollbar,
body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid::-webkit-scrollbar,
body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list::-webkit-scrollbar,
.info-dialog::-webkit-scrollbar,
.fact-dialog::-webkit-scrollbar,
.stage-intro-dialog::-webkit-scrollbar,
.achievements-dialog::-webkit-scrollbar,
.map-dialog::-webkit-scrollbar,
.thesaurus-grid::-webkit-scrollbar,
.thesaurus-card::-webkit-scrollbar {
  width: 9px;
}

body[data-stage] .task-panel .stage-side-panel.active > .species-list::-webkit-scrollbar-track,
body[data-stage] .task-panel .stage-side-panel.active > .plant-guide::-webkit-scrollbar-track,
body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid::-webkit-scrollbar-track,
body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list::-webkit-scrollbar-track,
.info-dialog::-webkit-scrollbar-track,
.fact-dialog::-webkit-scrollbar-track,
.stage-intro-dialog::-webkit-scrollbar-track,
.achievements-dialog::-webkit-scrollbar-track,
.map-dialog::-webkit-scrollbar-track,
.thesaurus-grid::-webkit-scrollbar-track,
.thesaurus-card::-webkit-scrollbar-track {
  background: rgba(91, 61, 28, 0.16);
  border-radius: 999px;
}

body[data-stage] .task-panel .stage-side-panel.active > .species-list::-webkit-scrollbar-thumb,
body[data-stage] .task-panel .stage-side-panel.active > .plant-guide::-webkit-scrollbar-thumb,
body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid::-webkit-scrollbar-thumb,
body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list::-webkit-scrollbar-thumb,
.info-dialog::-webkit-scrollbar-thumb,
.fact-dialog::-webkit-scrollbar-thumb,
.stage-intro-dialog::-webkit-scrollbar-thumb,
.achievements-dialog::-webkit-scrollbar-thumb,
.map-dialog::-webkit-scrollbar-thumb,
.thesaurus-grid::-webkit-scrollbar-thumb,
.thesaurus-card::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8a5b2b, #4f321b);
  border-radius: 999px;
  border: 2px solid rgba(255, 235, 190, 0.72);
}

.info-dialog,
.fact-dialog,
.stage-intro-dialog,
.achievements-dialog,
.map-dialog {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: #704721 rgba(91, 61, 28, 0.16) !important;
}

.stage-current-label {
  min-width: 0 !important;
  padding: 6px clamp(10px, 0.8vw, 16px) 7px !important;
  font-size: clamp(0.86rem, 0.78vw, 1rem) !important;
}

.stage-sound-button {
  left: auto !important;
  right: clamp(16px, 1.4vw, 28px) !important;
  bottom: clamp(14px, 1.6vh, 24px) !important;
  width: clamp(46px, 3.2vw, 58px) !important;
  height: clamp(46px, 3.2vw, 58px) !important;
  z-index: 36 !important;
}

@media (min-width: 2200px) {
  body[data-stage] .play-area > .task-panel,
  body[data-stage] .task-panel {
    padding-top: clamp(214px, 13vh, 286px) !important;
  }
}

@media (min-width: 3000px) and (min-height: 1600px) {
  body[data-stage] .play-area > .task-panel,
  body[data-stage] .task-panel {
    padding-top: clamp(320px, 15.2vh, 380px) !important;
  }
}

body[data-stage] .task-panel .score-pill.side-score,
.task-panel .score-pill.side-score {
  left: 42.6% !important;
  bottom: clamp(18px, 1.8vh, 32px) !important;
  width: clamp(88px, 5.5vw, 118px) !important;
  height: clamp(44px, 4.3vh, 56px) !important;
}

body[data-stage] .task-panel .score-pill.side-score strong,
.task-panel .score-pill.side-score strong {
  font-size: clamp(1.68rem, 1.48vw, 2.12rem) !important;
}

.thesaurus-dialog {
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--topbar-height) + var(--app-gap) - 4px) !important;
  width: 100vw !important;
  height: calc(var(--board-height) + 8px) !important;
  max-height: calc(var(--board-height) + 8px) !important;
  border-radius: 0 !important;
  background: transparent url("assets/tezeusz.png") center / min(99vw, calc((var(--board-height) + 8px) * 1.5)) auto no-repeat !important;
}

.thesaurus-layout {
  width: min(76vw, calc(var(--board-height) * 1.18)) !important;
  height: min(68vh, calc(var(--board-height) * 0.66)) !important;
  transform: translate(-50%, -46%) !important;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr) !important;
  gap: clamp(30px, 3.4vw, 64px) !important;
}

.thesaurus-grid,
.thesaurus-card,
.thesaurus-item {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.thesaurus-grid,
.thesaurus-card {
  scrollbar-width: thin !important;
  scrollbar-color: #704721 rgba(91, 61, 28, 0.16) !important;
}

.thesaurus-grid {
  display: block !important;
  padding: 0 clamp(10px, 1vw, 16px) 0 0 !important;
}

.thesaurus-category {
  margin: 0 0 clamp(12px, 1.5vh, 20px) !important;
}

.thesaurus-category > h3 {
  margin: 0 0 8px !important;
  color: #365522 !important;
  font-size: clamp(1rem, 1.1vw, 1.28rem) !important;
  line-height: 1 !important;
}

.thesaurus-category-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(clamp(86px, 7.2vw, 124px), 1fr)) !important;
  gap: clamp(6px, 0.75vw, 10px) !important;
}

.thesaurus-item {
  min-height: clamp(58px, 7vh, 82px) !important;
  padding: 2px 4px !important;
  color: #24311e !important;
}

.thesaurus-item .entry-icon {
  width: clamp(38px, 3.3vw, 52px) !important;
  height: clamp(38px, 3.3vw, 52px) !important;
  background: rgba(255, 249, 226, 0.35) !important;
}

.thesaurus-item small {
  font-size: clamp(0.62rem, 0.62vw, 0.76rem) !important;
}

.thesaurus-card {
  padding: 0 clamp(8px, 1vw, 14px) 0 clamp(8px, 1vw, 14px) !important;
  color: #24311e !important;
}

.thesaurus-detail-header p {
  margin: 0 0 5px !important;
  color: #6b7f37 !important;
  font-weight: 900 !important;
  font-size: clamp(0.82rem, 0.78vw, 0.96rem) !important;
}

.thesaurus-detail-header h3 {
  margin: 0 0 clamp(10px, 1.2vh, 16px) !important;
  color: #25451c !important;
  font-size: clamp(1.35rem, 1.55vw, 2rem) !important;
  line-height: 1.05 !important;
}

.thesaurus-detail-photo {
  margin: 0 0 clamp(10px, 1.2vh, 16px) !important;
  height: clamp(150px, 23vh, 260px) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.thesaurus-detail-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.thesaurus-detail-badge {
  width: clamp(90px, 8vw, 132px) !important;
  height: clamp(90px, 8vw, 132px) !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto clamp(12px, 1.5vh, 18px) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, var(--entry-color, #78a93b), #355321) !important;
  color: #fff8df !important;
  font-size: clamp(2rem, 3vw, 3.2rem) !important;
  font-weight: 1000 !important;
}

.thesaurus-detail-copy p {
  margin: 0 0 clamp(10px, 1.2vh, 14px) !important;
  font-size: clamp(0.9rem, 0.9vw, 1.08rem) !important;
  line-height: 1.28 !important;
}

.thesaurus-card table {
  margin-top: clamp(8px, 1vh, 12px) !important;
  font-size: clamp(0.78rem, 0.78vw, 0.94rem) !important;
}

.thesaurus-card th,
.thesaurus-card td {
  padding: 6px 8px !important;
  border-bottom: 1px solid rgba(91, 61, 28, 0.18) !important;
}

/* Forester visual layer without blocking footer buttons 2026-05-05 */
.guide {
  pointer-events: none !important;
}

.guide-avatar,
.speech,
.speech * {
  pointer-events: auto !important;
}

.bottom-tool-button,
.thesaurus-button,
.bottom-reset-button,
.map-arrow,
.backpack {
  z-index: 96 !important;
}

/* Forest options anchored inside stage artwork 2026-05-05 */
body[data-stage="forest"] .speech {
  position: fixed !important;
  left: clamp(26px, 1.8vw, 42px) !important;
  top: calc(var(--topbar-height) + var(--app-gap) + clamp(18px, 2vh, 32px)) !important;
  bottom: auto !important;
  width: calc(100vw - clamp(382px, 20.2vw, 438px) - clamp(72px, 5vw, 120px)) !important;
  max-width: none !important;
  min-height: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  z-index: 78 !important;
}

body[data-stage="forest"] .speech .forest-statement-pool {
  grid-template-columns: repeat(auto-fit, minmax(clamp(132px, 10.5vw, 188px), 1fr)) !important;
  max-height: calc(var(--board-height) * 0.36) !important;
}

@media (max-width: 1599px), (max-height: 850px) {
  body[data-stage="forest"] .speech .forest-statement-pool {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
  }

  body[data-stage="forest"] .forest-statement {
    font-size: 0.66rem !important;
    min-height: 38px !important;
  }
}

/* Forest options transform cleanup 2026-05-05 */
body[data-stage="forest"] .speech {
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Hard-disable extra play-area background layer 2026-05-05 */
.play-area::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  z-index: -1 !important;
}

.play-area > .stage-view {
  z-index: 1 !important;
}

.play-area > .task-panel {
  z-index: 90 !important;
}

body[data-stage="forest"] .speech,
body[data-stage="forest"] .speech.speech-intro,
body[data-stage="forest"] .speech.speech-muted,
body[data-stage="forest"] .speech:not(.speech-hidden) {
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Forest options transition override 2026-05-05 */
body[data-stage="forest"] .speech,
body[data-stage="forest"] .speech.speech-intro,
body[data-stage="forest"] .speech.speech-muted,
body[data-stage="forest"] .speech:not(.speech-hidden) {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Forester true overlay over game board 2026-05-05 */
.guide {
  position: static !important;
  z-index: auto !important;
  pointer-events: none !important;
}

.guide-avatar {
  position: fixed !important;
  left: clamp(18px, 1.6vw, 34px) !important;
  bottom: clamp(-26px, -1.2vh, -8px) !important;
  width: clamp(238px, 13.5vw, 294px) !important;
  height: clamp(326px, 19vw, 404px) !important;
  z-index: 88 !important;
  pointer-events: auto !important;
  transform: scaleX(-1) !important;
}

body[data-stage="forest"] .guide-avatar {
  left: clamp(18px, 1.6vw, 34px) !important;
  right: auto !important;
  bottom: clamp(-26px, -1.2vh, -8px) !important;
  transform: scaleX(-1) !important;
}

.speech {
  z-index: 89 !important;
}

body:not([data-stage="forest"]) .speech {
  position: fixed !important;
  left: clamp(170px, 9.5vw, 230px) !important;
  bottom: clamp(138px, 13.2vh, 190px) !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  pointer-events: auto !important;
}

body[data-stage="forest"] .speech {
  pointer-events: none !important;
}

body[data-stage="forest"] .speech .forest-quiz,
body[data-stage="forest"] .speech .forest-assignment,
body[data-stage="forest"] .speech .forest-statement-pool,
body[data-stage="forest"] .speech .forest-statement {
  pointer-events: auto !important;
}

/* Global HUD stacking correction 2026-05-05 */
.app {
  position: relative !important;
  z-index: auto !important;
  overflow: visible !important;
}

.play-area {
  position: relative !important;
  z-index: auto !important;
  isolation: auto !important;
  overflow: visible !important;
}

.play-area::before,
.play-area::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

.play-area::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

.play-area > .stage-view,
.stage-view.active {
  position: relative !important;
  z-index: 1 !important;
}

.topbar,
.title-board,
.brand,
.brand-copy {
  position: relative !important;
  z-index: 80 !important;
}

.bottom-bar,
.bottom-bar .stage-map,
.map-arrow,
.stage-current-label,
.bottom-tool-button,
.thesaurus-button,
.bottom-reset-button,
.backpack {
  position: relative !important;
  z-index: 82 !important;
}

.bottom-bar {
  overflow: visible !important;
}

.guide,
.speech {
  z-index: 92 !important;
}

.guide-avatar {
  z-index: 94 !important;
}

.stage-sound-button,
.fact-strip,
.stage-intro-dialog,
.info-dialog,
.fact-dialog,
.achievements-dialog,
.map-dialog,
.thesaurus-dialog {
  z-index: 110 !important;
}

body[data-stage] .play-area > .task-panel,
.play-area > .task-panel,
body[data-stage] .task-panel,
.task-panel {
  position: relative !important;
  z-index: 120 !important;
}

/* Forest options bottom-right placement and clean institution icons 2026-05-05 */
body[data-stage="forest"] .speech,
body[data-stage="forest"] .speech.speech-intro,
body[data-stage="forest"] .speech.speech-muted,
body[data-stage="forest"] .speech:not(.speech-hidden) {
  position: fixed !important;
  left: clamp(310px, 18vw, 700px) !important;
  right: calc(clamp(382px, 20.2vw, 438px) + clamp(24px, 2.5vw, 54px)) !important;
  top: auto !important;
  bottom: calc(var(--footer-height) + var(--app-gap) + clamp(18px, 2.2vh, 30px)) !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  transition: none !important;
  z-index: 92 !important;
}

body[data-stage="forest"] .speech .forest-assignment,
body[data-stage="forest"] .speech .forest-statement-pool {
  width: 100% !important;
  justify-self: stretch !important;
  justify-content: end !important;
  align-content: end !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-stage="forest"] .speech .forest-statement-pool {
  grid-template-columns: repeat(auto-fit, minmax(clamp(128px, 9.5vw, 178px), 1fr)) !important;
  gap: clamp(6px, 0.65vw, 10px) !important;
  max-height: calc(var(--board-height) * 0.34) !important;
  overflow: visible !important;
}

body[data-stage="forest"] .institution-side-list button,
body[data-stage="forest"] .institution-side-list button:hover,
body[data-stage="forest"] .institution-side-list button:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body[data-stage="forest"] .institution-side-list button > span,
body[data-stage="forest"] .institution-side-list button:hover > span,
body[data-stage="forest"] .institution-side-list button:focus-visible > span {
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
}

/* Restore bottom HUD absolute positioning after stacking fix 2026-05-05 */
.bottom-bar .stage-map {
  position: relative !important;
  z-index: 82 !important;
}

.map-arrow,
.stage-current-label,
.stage-node,
.bottom-tool-button,
.thesaurus-button,
.bottom-reset-button {
  position: absolute !important;
}

.map-arrow,
.stage-current-label,
.stage-node,
.bottom-tool-button,
.thesaurus-button,
.bottom-reset-button,
.backpack {
  z-index: 86 !important;
}

.stage-current-label {
  left: 50% !important;
  bottom: 24px !important;
  transform: translateX(-50%) !important;
}

.map-arrow-left {
  left: 14% !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}

.map-arrow-right {
  right: 14% !important;
  left: auto !important;
  transform: translateY(-50%) scaleX(-1) !important;
}

.bottom-tool-button,
.thesaurus-button,
.bottom-reset-button {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.bottom-tool-button:hover,
.bottom-tool-button:focus-visible,
.thesaurus-button:hover,
.thesaurus-button:focus-visible,
.bottom-reset-button:hover,
.bottom-reset-button:focus-visible {
  transform: translateY(-50%) scale(1.1) !important;
}

.backpack {
  position: relative !important;
  justify-self: end !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  transform: translateY(10px) !important;
}

/* Reduce empty bottom space in right panel lists 2026-05-05 */
body[data-stage] .task-panel .stage-side-panel.active > .species-list,
body[data-stage] .task-panel .stage-side-panel.active > .plant-guide,
body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid,
body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(100% - clamp(54px, 5vh, 74px)) !important;
  align-content: start !important;
  align-items: start !important;
  overflow-y: auto !important;
}

body[data-stage="dam"] .task-panel .stage-side-panel.active > .species-list,
body[data-stage="forest"] .task-panel .stage-side-panel.active > .institution-side-list {
  padding-bottom: clamp(8px, 1vh, 14px) !important;
}

body[data-stage] .task-panel .score-pill.side-score,
.task-panel .score-pill.side-score {
  bottom: clamp(12px, 1.2vh, 24px) !important;
}

/* Header, popup and server icon polish 2026-05-05 */
.title-board {
  left: 50vw !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 130 !important;
}

.stage-sound-button {
  display: grid !important;
  visibility: visible !important;
  opacity: 0.92 !important;
  position: absolute !important;
  right: clamp(12px, 1.1vw, 22px) !important;
  bottom: clamp(10px, 1.2vh, 18px) !important;
  z-index: 116 !important;
  background: transparent url("assets/button-sound.png") center / contain no-repeat !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
}

.stage-sound-button::before,
.stage-sound-button::after {
  content: none !important;
  display: none !important;
}

.stage-sound-button[aria-pressed="false"] {
  filter: saturate(0.75) brightness(0.82) drop-shadow(0 6px 9px rgba(31, 38, 17, 0.22)) !important;
}

.stage-intro-dialog,
.info-dialog,
.fact-dialog,
.achievements-dialog,
.map-dialog {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-width: calc(100vw - clamp(20px, 4vw, 76px)) !important;
  max-height: calc(100dvh - clamp(20px, 4vh, 70px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.stage-intro-dialog {
  width: min(980px, calc(100vw - clamp(20px, 5vw, 90px))) !important;
  padding: clamp(66px, 7vh, 96px) clamp(58px, 6vw, 106px) clamp(58px, 6.4vh, 90px) !important;
  z-index: 130 !important;
}

.info-dialog {
  width: min(1080px, calc(100vw - clamp(20px, 4vw, 76px))) !important;
  padding: clamp(62px, 6.4vh, 92px) clamp(58px, 5.4vw, 102px) clamp(56px, 6vh, 84px) !important;
}

.fact-dialog {
  width: min(720px, calc(100vw - clamp(20px, 5vw, 86px))) !important;
}

@media (max-width: 1200px), (max-height: 820px) {
  .stage-intro-dialog,
  .info-dialog,
  .fact-dialog,
  .achievements-dialog,
  .map-dialog {
    padding: 50px 42px 44px !important;
  }

  .species-card-layout {
    grid-template-columns: minmax(180px, 0.55fr) minmax(260px, 1fr) !important;
    gap: 10px !important;
  }

  .animal-photo {
    min-height: 180px !important;
  }
}

.thesaurus-dialog {
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--topbar-height) + 2px) !important;
  width: 100vw !important;
  height: calc(var(--board-height) + var(--app-gap) + 18px) !important;
  max-height: calc(var(--board-height) + var(--app-gap) + 18px) !important;
  background-size: min(100vw, calc((var(--board-height) + 28px) * 1.58)) auto !important;
  background-position: center top !important;
  z-index: 132 !important;
}

.thesaurus-layout {
  top: 46% !important;
  width: min(82vw, calc(var(--board-height) * 1.28)) !important;
  height: min(76vh, calc(var(--board-height) * 0.76)) !important;
  transform: translate(-50%, -50%) !important;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr) !important;
  gap: clamp(34px, 4vw, 78px) !important;
}

.thesaurus-card {
  direction: rtl !important;
  padding-left: clamp(12px, 1vw, 18px) !important;
  padding-right: clamp(8px, 0.8vw, 14px) !important;
}

.thesaurus-card > * {
  direction: ltr !important;
}

.thesaurus-detail-photo {
  height: clamp(170px, 27vh, 330px) !important;
}

.thesaurus-detail-header h3 {
  font-size: clamp(1.5rem, 1.75vw, 2.3rem) !important;
}

.animal-icon {
  background: var(--animal-icon-url) center / cover no-repeat !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
}

.animal-icon::before,
.wolf-icon::before,
.beaver-icon::before,
.eagle-icon::before,
.bat-icon::before,
.frog-icon::before {
  content: none !important;
  display: none !important;
}

.wolf-icon { --animal-icon-url: url("assets/wolf-photo-web.jpg"); }
.beaver-icon { --animal-icon-url: url("assets/beaver-photo-web.jpg"); }
.eagle-icon { --animal-icon-url: url("assets/eagle-photo-web.jpg"); }
.bat-icon { --animal-icon-url: url("assets/bat-photo-web.jpg"); }
.frog-icon { --animal-icon-url: url("assets/frog-photo-web.jpg"); }
.otter-icon { --animal-icon-url: url("assets/otter-photo-web.jpg"); }
.turtle-icon { --animal-icon-url: url("assets/turtle-photo-web.jpg"); }
.firebelly-icon { --animal-icon-url: url("assets/firebelly-photo-web.jpg"); }

.species-list .mini-icon,
.trace-callout .animal-icon,
.badge-slot .animal-icon {
  background-color: transparent !important;
  box-shadow: none !important;
}

.dialog-icon:not(.has-logo),
.fact-orbit {
  background: #fffbe8 center / cover no-repeat !important;
}

/* Viewport centering fixes 2026-05-05 */
.title-board {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: clamp(-6px, -0.3vh, -1px) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 150 !important;
}

.stage-intro-dialog,
.info-dialog,
.fact-dialog,
.achievements-dialog,
.map-dialog {
  margin: 0 !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.thesaurus-dialog {
  margin: 0 !important;
}

.species-list .animal-icon,
.trace-callout .animal-icon,
.badge-slot .animal-icon,
.dialog-icon .animal-icon {
  opacity: 1 !important;
}


/* Final alignment pass: top gap, sound button, HUD text and score axis */
.topbar {
  transform: translateY(6px) !important;
}

.stage-sound-button {
  display: grid !important;
  visibility: visible !important;
  opacity: .94 !important;
  position: fixed !important;
  right: calc(clamp(382px, 20.2vw, 438px) + clamp(16px, 1.7vw, 28px)) !important;
  bottom: calc(var(--footer-height) + var(--app-gap) + clamp(16px, 2vh, 28px)) !important;
  z-index: 116 !important;
  background: transparent url("assets/button-sound.png") center / contain no-repeat !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
}

.stage-sound-button::before,
.stage-sound-button::after {
  content: none !important;
  display: none !important;
}

.sidebar-round-hud small,
.sidebar-round-hud strong,
.timer-pill small,
.timer-pill strong {
  font-size: 1.18rem !important;
  line-height: 1 !important;
}

.task-panel .score-pill.side-score,
body[data-stage] .task-panel .score-pill.side-score {
  bottom: -62px !important;
}

body[data-stage="forest"] .institution-side-list button,
body[data-stage="forest"] .institution-side-list button:hover,
body[data-stage="forest"] .institution-side-list button:focus-visible,
body[data-stage="forest"] .institution-side-list button > span,
body[data-stage="forest"] .institution-side-list button:hover > span,
body[data-stage="forest"] .institution-side-list button:focus-visible > span {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
}

/* Remove white backing from forest institution marks while keeping logo images */
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution] > span,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution]:hover > span,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution]:focus-visible > span,
html body[data-stage="forest"] .institution-icons button[data-institution] > span,
html body[data-stage="forest"] .institution-icons button[data-institution]:hover > span,
html body[data-stage="forest"] .institution-icons button[data-institution]:focus-visible > span {
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* Keep forest institution icons framed on the board; remove backing only in the right panel */
html body[data-stage="forest"] .institution-icons button[data-institution] > span,
html body[data-stage="forest"] .institution-icons button[data-institution]:hover > span,
html body[data-stage="forest"] .institution-icons button[data-institution]:focus-visible > span {
  background-color: #fff !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 10px var(--institution-ring, #78a93b), 0 7px 14px rgba(20, 32, 14, 0.24) !important;
}

html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution] > span,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution]:hover > span,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution]:focus-visible > span {
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* Menu background and book content refinement 2026-05-05 */
body[data-stage] .task-panel::before,
.task-panel::before {
  bottom: -10px !important;
  background: url("assets/menu-panel-cut.png") center -3px / 100% calc(100% + 18px) no-repeat !important;
}

.thesaurus-layout {
  left: calc(50% + clamp(24px, 1.8vw, 46px)) !important;
  top: 46% !important;
  width: min(76vw, calc(var(--board-height) * 1.21)) !important;
  height: min(74vh, calc(var(--board-height) * 0.74)) !important;
  transform: translate(-50%, -50%) !important;
  grid-template-columns: minmax(250px, 0.48fr) minmax(0, 0.52fr) !important;
  gap: clamp(38px, 3.2vw, 62px) !important;
}

.thesaurus-grid {
  padding: 0 clamp(6px, 0.55vw, 10px) 0 clamp(8px, 0.8vw, 14px) !important;
  scrollbar-gutter: stable !important;
}

.thesaurus-card {
  padding-left: clamp(18px, 1.5vw, 28px) !important;
  padding-right: clamp(10px, 0.9vw, 16px) !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

.thesaurus-dialog .thesaurus-detail-photo {
  width: min(88%, 430px) !important;
  max-width: 100% !important;
  height: clamp(138px, 22vh, 250px) !important;
  margin: 0 auto clamp(10px, 1.2vh, 16px) !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}

.thesaurus-dialog .thesaurus-detail-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Hard containment for thesaurus photos */
.thesaurus-dialog .thesaurus-detail-photo {
  position: relative !important;
}

.thesaurus-dialog .thesaurus-detail-photo img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Layout refinement: right panel, score, book columns, forest side logos, forester */
.thesaurus-layout {
  grid-template-columns: minmax(250px, 0.47fr) minmax(0, 0.53fr) !important;
  gap: clamp(26px, 2.2vw, 46px) !important;
}

body[data-stage] .play-area > .task-panel,
.play-area > .task-panel,
body[data-stage] .task-panel,
.task-panel {
  transform: translateX(6px) !important;
}

.task-panel .score-pill.side-score,
body[data-stage] .task-panel .score-pill.side-score {
  bottom: -74px !important;
}

html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution],
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution] *,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution]:hover,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution]:hover *,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution]:focus-visible,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution]:focus-visible * {
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution] > span,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution]:hover > span,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution]:focus-visible > span {
  border-radius: 0 !important;
}

body[data-stage] .guide-avatar,
.guide-avatar {
  position: fixed !important;
  left: clamp(18px, 1.6vw, 34px) !important;
  right: auto !important;
  bottom: clamp(-26px, -1.2vh, -8px) !important;
  width: clamp(238px, 13.5vw, 294px) !important;
  height: clamp(326px, 19vw, 404px) !important;
  z-index: 94 !important;
  transform: scaleX(-1) !important;
  pointer-events: auto !important;
}

/* Round HUD typography and board-edge spacing */
.play-area > .sidebar-round-hud {
  right: calc(clamp(360px, 24vw, 420px) + 42px) !important;
  font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive !important;
}

.play-area > .sidebar-round-hud .sidebar-time-pill,
.play-area > .sidebar-round-hud .sidebar-round-score-pill,
.play-area > .sidebar-round-hud small,
.play-area > .sidebar-round-hud strong {
  font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.play-area > .sidebar-round-hud small,
.play-area > .sidebar-round-hud .sidebar-time-pill small,
.play-area > .sidebar-round-hud .sidebar-round-score-pill small {
  font-size: 1.18rem !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

.play-area > .sidebar-round-hud strong,
.play-area > .sidebar-round-hud .sidebar-time-pill strong,
.play-area > .sidebar-round-hud .sidebar-round-score-pill strong {
  font-size: 2.3rem !important;
  font-weight: 1000 !important;
  line-height: .95 !important;
}

/* Center footer map to viewport and lower total score */
.bottom-bar .stage-map {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 82 !important;
}

.task-panel .score-pill.side-score,
body[data-stage] .task-panel .score-pill.side-score {
  bottom: -84px !important;
}

/* Use transparent logo assets only in the right-side institution list */
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution] > span {
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
}

html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution="gios"] > span {
  background-image: url("assets/gios-logo-side.png") !important;
}

html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution="gdos"] > span {
  background-image: url("assets/gdos-logo-side.png") !important;
}

html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution="rdos"] > span {
  background-image: url("assets/rdos-logo-side.png") !important;
}

html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution="eea"] > span {
  background-image: url("assets/eea-logo-side.png") !important;
}

html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution="iop"] > span {
  background-image: url("assets/iop-logo-official.svg") !important;
}

/* Deeper right-panel scrolling and generated badge artwork */
body[data-stage] .task-panel .stage-side-panel.active > .species-list,
body[data-stage] .task-panel .stage-side-panel.active > .plant-guide,
body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid,
body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list {
  max-height: calc(100% - clamp(22px, 2.6vh, 38px)) !important;
  padding-bottom: clamp(2px, 0.5vh, 6px) !important;
}

body[data-stage] .task-panel .stage-side-panel.active {
  height: calc(100% - clamp(300px, 34vh, 380px)) !important;
  min-height: clamp(300px, 39vh, 520px) !important;
  max-height: calc(100% - clamp(118px, 13vh, 168px)) !important;
}

.task-panel .score-pill.side-score,
body[data-stage] .task-panel .score-pill.side-score {
  bottom: -92px !important;
}

@media (max-height: 850px) {
  body[data-stage] .task-panel .stage-side-panel.active {
    height: 260px !important;
    min-height: 260px !important;
    max-height: 280px !important;
  }

  .task-panel .score-pill.side-score,
  body[data-stage] .task-panel .score-pill.side-score {
    bottom: -84px !important;
  }
}

.badge-slot.filled[data-badge],
.achievement[data-badge] .achievement-icon {
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  color: transparent !important;
  text-shadow: none !important;
}

.badge-slot.filled[data-badge] {
  border: 0 !important;
  box-shadow: none !important;
}

.badge-slot.filled[data-badge="observer"],
.achievement[data-badge="observer"] .achievement-icon {
  background-image: url("assets/badge-observer.png") !important;
}

.badge-slot.filled[data-badge="animalist"],
.achievement[data-badge="animalist"] .achievement-icon {
  background-image: url("assets/badge-animalist.svg") !important;
}

.badge-slot.filled[data-badge="botanist"],
.achievement[data-badge="botanist"] .achievement-icon {
  background-image: url("assets/badge-botanist.png") !important;
}

.badge-slot.filled[data-badge="plantExpert"],
.achievement[data-badge="plantExpert"] .achievement-icon {
  background-image: url("assets/badge-plant-expert.svg") !important;
}

.badge-slot.filled[data-badge="mountain"],
.achievement[data-badge="mountain"] .achievement-icon {
  background-image: url("assets/badge-mountain.png") !important;
}

.badge-slot.filled[data-badge="forest"],
.achievement[data-badge="forest"] .achievement-icon {
  background-image: url("assets/badge-forest.png") !important;
}

.badge-slot.filled[data-badge="curious"],
.achievement[data-badge="curious"] .achievement-icon {
  background-image: url("assets/badge-curious.svg") !important;
}

.badge-slot.filled[data-badge="photographer"],
.achievement[data-badge="photographer"] .achievement-icon {
  background-image: url("assets/badge-photographer.svg") !important;
}

.badge-slot.filled[data-badge="master"],
.achievement[data-badge="master"] .achievement-icon {
  background-image: url("assets/badge-master.png") !important;
}

.badge-slot.filled[data-badge="cupWinners"],
.achievement[data-badge="cupWinners"] .achievement-icon {
  background-image: url("assets/badge-cup-winners.svg") !important;
}

/* 2026-05-07 consolidated layout layer
   tlobox.png metrics: light field starts around 5.1% of image height and ends around 94.6%.
   Tune text/score placement by changing only the --right-box-* variables below. */
:root {
  --page-side-gap: clamp(8px, 1vw, 14px);
  --topbar-height: clamp(84px, 9.8dvh, 118px);
  --footer-height: clamp(104px, 11.6dvh, 126px);
  --app-gap: 10px;
  --vertical-buffer: 10px;
  --board-height: calc(100dvh - var(--topbar-height) - var(--footer-height) - (2 * var(--app-gap)) - var(--vertical-buffer));

  --game-right-panel-width: clamp(292px, 19vw, 360px);
  --right-box-overhang-y: 5px;
  --right-box-left-overlap: 3px;
  --right-box-right-overlap: 7px;
  --right-box-content-start: 4.9%;
  --right-box-content-side: clamp(52px, 16.8%, 70px);
  --right-box-list-bottom-reserve: clamp(164px, 18vh, 226px);
  --right-box-score-bottom: clamp(24px, 4%, 38px);
  --board-right-safe-inset: clamp(34px, 2.2vw, 46px);

  --footer-map-width: min(640px, 49vw);
  --footer-button-size: clamp(72px, 4.2vw, 104px);
  --badge-board-width: clamp(250px, 18vw, 330px);
  --footer-node-size: clamp(38px, calc(var(--footer-map-width) * 0.085), 54px);
  --footer-node-icon-size: clamp(26px, calc(var(--footer-map-width) * 0.06), 40px);
  --footer-button-hover-scale: 1.02;
}

html,
body {
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden !important;
}

.app {
  width: 100% !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr) var(--footer-height) !important;
  gap: var(--app-gap) !important;
  padding: 0 var(--page-side-gap) 8px !important;
}

.topbar,
.bottom-bar {
  width: calc(100vw - (2 * var(--page-side-gap))) !important;
  max-width: calc(100vw - (2 * var(--page-side-gap))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  z-index: 120 !important;
}

.topbar {
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  overflow: visible !important;
  padding-top: clamp(14px, 1.3vh, 22px) !important;
}

.topbar .brand {
  position: absolute !important;
  left: clamp(14px, 1.2vw, 24px) !important;
  top: 50% !important;
  width: min(34vw, 330px) !important;
  max-width: min(34vw, 330px) !important;
  transform: translateY(-50%) !important;
  justify-self: start !important;
  z-index: 150 !important;
}

.topbar .gios-logo {
  width: clamp(48px, 4.2vw, 64px) !important;
  height: clamp(48px, 4.2vw, 64px) !important;
  flex: 0 0 auto !important;
}

.topbar .brand-copy small {
  max-width: min(24vw, 260px) !important;
  font-size: clamp(0.76rem, 0.8vw, 0.98rem) !important;
  line-height: 1.04 !important;
}

.title-board,
.topbar .title-board {
  position: fixed !important;
  left: calc(50vw - var(--page-side-gap)) !important;
  right: auto !important;
  top: clamp(-6px, -0.3vh, -1px) !important;
  transform: translateX(-50%) !important;
  z-index: 240 !important;
  pointer-events: none !important;
}

.title-logo {
  position: relative !important;
  z-index: 241 !important;
}

.topbar .status {
  position: absolute !important;
  top: clamp(5px, 0.65vh, 10px) !important;
  right: clamp(8px, 1vw, 16px) !important;
  max-width: min(36vw, 420px) !important;
  z-index: 130 !important;
}

.topbar .auth-mock {
  max-width: 100% !important;
  min-height: clamp(26px, 2vh, 38px) !important;
  padding: clamp(3px, 0.35vw, 7px) clamp(7px, 0.65vw, 12px) !important;
  gap: clamp(3px, 0.42vw, 8px) !important;
}

.topbar .auth-link-button {
  font-size: clamp(0.58rem, 0.55vw, 0.84rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.play-area {
  width: calc(100vw - (2 * var(--page-side-gap))) !important;
  max-width: calc(100vw - (2 * var(--page-side-gap))) !important;
  height: var(--board-height) !important;
  min-height: var(--board-height) !important;
  max-height: var(--board-height) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--game-right-panel-width) !important;
  gap: 0 !important;
  align-items: stretch !important;
  overflow: visible !important;
  position: relative !important;
  z-index: auto !important;
}

.play-area::before,
.play-area::after {
  display: none !important;
  content: none !important;
}

.play-area > .stage-view,
.play-area > .stage-view.active {
  grid-column: 1 !important;
  grid-row: 1 !important;
  order: 0 !important;
  align-self: stretch !important;
  position: relative !important;
  z-index: 60 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

body[data-stage] .play-area > .task-panel,
.play-area > .task-panel,
body[data-stage] .task-panel,
.task-panel {
  grid-column: 2 !important;
  grid-row: 1 !important;
  order: 0 !important;
  align-self: stretch !important;
  position: relative !important;
  z-index: 170 !important;
  width: calc(100% + var(--right-box-left-overlap) + var(--right-box-right-overlap)) !important;
  max-width: calc(100% + var(--right-box-left-overlap) + var(--right-box-right-overlap)) !important;
  height: calc(100% + (2 * var(--right-box-overhang-y))) !important;
  min-height: 0 !important;
  max-height: calc(100% + (2 * var(--right-box-overhang-y))) !important;
  margin: calc(-1 * var(--right-box-overhang-y)) calc(-1 * var(--right-box-right-overlap)) calc(-1 * var(--right-box-overhang-y)) calc(-1 * var(--right-box-left-overlap)) !important;
  padding: 0 var(--right-box-content-side) 0 calc(var(--right-box-content-side) + var(--right-box-left-overlap)) !important;
  display: grid !important;
  grid-template-rows: var(--right-box-content-start) auto auto auto minmax(0, 1fr) !important;
  gap: clamp(6px, 0.75vh, 10px) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-stage] .task-panel::before,
.task-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: image-set(
    url("assets/tlobox.webp") type("image/webp"),
    url("assets/tlobox.png") type("image/png")
  ) center top / 100% 100% no-repeat !important;
}

.task-panel > * {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
}

.task-heading {
  display: none !important;
}

.task-panel > h2 {
  grid-row: 2 !important;
  margin: 0 !important;
  font-size: clamp(0.88rem, 0.82vw, 1.08rem) !important;
  line-height: 1.18 !important;
}

.task-panel > #task-description {
  grid-row: 3 !important;
  margin: 0 !important;
  font-size: clamp(0.78rem, 0.76vw, 0.94rem) !important;
  line-height: 1.18 !important;
}

.task-panel > .divider {
  grid-row: 4 !important;
  margin: 0 !important;
}

.task-panel > .stage-side-panel {
  grid-row: 5 !important;
  min-height: 0 !important;
  max-height: calc(100% - var(--right-box-list-bottom-reserve)) !important;
  overflow: hidden !important;
  padding: clamp(5px, 0.7vh, 9px) 0 0 !important;
}

.task-panel > .stage-side-panel.active {
  display: grid !important;
  align-content: start !important;
  gap: clamp(7px, 0.85vh, 11px) !important;
}

.task-panel .stage-side-panel.active > .species-list,
.task-panel .stage-side-panel.active > .plant-guide,
.task-panel .stage-side-panel.active > .memo-guide-grid,
.task-panel .stage-side-panel.active > .institution-side-list {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  padding-right: 10px !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: #744517 rgba(116, 78, 34, 0.24) !important;
  direction: ltr !important;
}

.task-panel .stage-side-panel.active > .species-list > *,
.task-panel .stage-side-panel.active > .plant-guide > *,
.task-panel .stage-side-panel.active > .memo-guide-grid > *,
.task-panel .stage-side-panel.active > .institution-side-list > * {
  direction: ltr !important;
}

.task-panel .stage-side-panel.active > .species-list::-webkit-scrollbar,
.task-panel .stage-side-panel.active > .plant-guide::-webkit-scrollbar,
.task-panel .stage-side-panel.active > .memo-guide-grid::-webkit-scrollbar,
.task-panel .stage-side-panel.active > .institution-side-list::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

.task-panel .stage-side-panel.active > .species-list::-webkit-scrollbar-track,
.task-panel .stage-side-panel.active > .plant-guide::-webkit-scrollbar-track,
.task-panel .stage-side-panel.active > .memo-guide-grid::-webkit-scrollbar-track,
.task-panel .stage-side-panel.active > .institution-side-list::-webkit-scrollbar-track {
  background: rgba(116, 78, 34, 0.24) !important;
  border-radius: 999px !important;
}

.task-panel .stage-side-panel.active > .species-list::-webkit-scrollbar-thumb,
.task-panel .stage-side-panel.active > .plant-guide::-webkit-scrollbar-thumb,
.task-panel .stage-side-panel.active > .memo-guide-grid::-webkit-scrollbar-thumb,
.task-panel .stage-side-panel.active > .institution-side-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8f5a23, #4f3018) !important;
  border: 2px solid rgba(255, 231, 184, 0.7) !important;
  border-radius: 999px !important;
}

html body[data-stage] .task-panel .stage-side-panel.active > .species-list,
html body[data-stage] .task-panel .stage-side-panel.active > .plant-guide,
html body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid,
html body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: #744517 rgba(116, 78, 34, 0.24) !important;
  direction: ltr !important;
  padding-right: 10px !important;
  padding-left: 0 !important;
  background-image: linear-gradient(180deg, rgba(116, 78, 34, 0.34), rgba(79, 48, 24, 0.46)) !important;
  background-repeat: no-repeat !important;
  background-size: 7px calc(100% - 8px) !important;
  background-position: right 4px top 4px !important;
}

html body[data-stage] .task-panel .stage-side-panel.active > .species-list > *,
html body[data-stage] .task-panel .stage-side-panel.active > .plant-guide > *,
html body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid > *,
html body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list > * {
  direction: ltr !important;
}

html body[data-stage] .task-panel .stage-side-panel.active > .species-list::-webkit-scrollbar,
html body[data-stage] .task-panel .stage-side-panel.active > .plant-guide::-webkit-scrollbar,
html body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid::-webkit-scrollbar,
html body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

html body[data-stage] .task-panel .stage-side-panel.active > .species-list::-webkit-scrollbar-track,
html body[data-stage] .task-panel .stage-side-panel.active > .plant-guide::-webkit-scrollbar-track,
html body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid::-webkit-scrollbar-track,
html body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list::-webkit-scrollbar-track {
  background: rgba(116, 78, 34, 0.24) !important;
  border-radius: 999px !important;
}

html body[data-stage] .task-panel .stage-side-panel.active > .species-list::-webkit-scrollbar-thumb,
html body[data-stage] .task-panel .stage-side-panel.active > .plant-guide::-webkit-scrollbar-thumb,
html body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid::-webkit-scrollbar-thumb,
html body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8f5a23, #4f3018) !important;
  border: 2px solid rgba(255, 231, 184, 0.72) !important;
  border-radius: 999px !important;
}

.task-panel .species-list li,
.task-panel .plant-guide-item,
.task-panel .institution-side-list button,
.task-panel .memo-guide-item {
  max-width: 100% !important;
  min-width: 0 !important;
  font-size: clamp(0.74rem, 0.74vw, 0.9rem) !important;
  line-height: 1.12 !important;
}

body[data-stage] .task-panel .score-pill.side-score,
.task-panel .score-pill.side-score {
  position: absolute !important;
  left: auto !important;
  right: clamp(12px, 1vw, 18px) !important;
  bottom: var(--right-box-score-bottom) !important;
  width: clamp(96px, 7.6vw, 132px) !important;
  height: clamp(42px, 4.8vh, 60px) !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 2 !important;
}

body[data-stage] .task-panel .score-pill.side-score strong,
.task-panel .score-pill.side-score strong {
  font-size: clamp(1.7rem, 1.7vw, 2.28rem) !important;
  line-height: 1 !important;
}

.play-area > .sidebar-round-hud {
  position: absolute !important;
  top: clamp(14px, 1.6vh, 22px) !important;
  right: calc(var(--game-right-panel-width) + var(--board-right-safe-inset)) !important;
  z-index: 95 !important;
  transform: none !important;
}

.play-area > .sidebar-round-hud .sidebar-time-pill,
.play-area > .sidebar-round-hud .sidebar-round-score-pill {
  min-width: clamp(124px, 7.6vw, 154px) !important;
  padding: 4px 10px 6px !important;
}

.play-area > .sidebar-round-hud small,
.play-area > .sidebar-round-hud .sidebar-time-pill small,
.play-area > .sidebar-round-hud .sidebar-round-score-pill small {
  font-size: 13px !important;
  line-height: 1 !important;
}

.play-area > .sidebar-round-hud strong,
.play-area > .sidebar-round-hud .sidebar-time-pill strong,
.play-area > .sidebar-round-hud .sidebar-round-score-pill strong {
  font-size: clamp(1.7rem, 1.8vw, 2rem) !important;
  line-height: 0.95 !important;
}

.fact-strip.fact-bottom {
  left: auto !important;
  right: calc(var(--game-right-panel-width) + var(--board-right-safe-inset)) !important;
  transform: none !important;
}

.fact-strip {
  width: min(380px, calc(100% - var(--game-right-panel-width) - (2 * var(--board-right-safe-inset)))) !important;
  min-width: 0 !important;
  max-width: min(380px, calc(100% - var(--game-right-panel-width) - (2 * var(--board-right-safe-inset)))) !important;
  min-height: 0 !important;
  max-height: clamp(76px, 12vh, 118px) !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 3px !important;
  padding: 8px 36px 9px 10px !important;
  box-sizing: border-box !important;
}

.fact-strip-close {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  z-index: 3 !important;
}

.fact-orbit {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 38px !important;
  height: 38px !important;
}

.fact-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}

.fact-copy p {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: clamp(0.78rem, 0.72vw, 0.88rem) !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.fact-dots {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-content: flex-start !important;
  margin-top: 0 !important;
}

.stage-sound-button {
  right: calc(var(--game-right-panel-width) + 12px) !important;
  top: calc(var(--topbar-height) + var(--app-gap) + var(--board-height) - 66px) !important;
  bottom: auto !important;
}

.stage-restart-button {
  position: absolute !important;
  left: clamp(12px, 1vw, 22px) !important;
  top: clamp(12px, 1vh, 20px) !important;
  z-index: 140 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.bottom-bar {
  height: var(--footer-height) !important;
  min-height: var(--footer-height) !important;
  max-height: var(--footer-height) !important;
  overflow: visible !important;
  background: rgba(199, 186, 134, 0.82) !important;
  backdrop-filter: blur(1px) saturate(1.02) !important;
}

.bottom-bar .stage-map {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: var(--footer-map-width) !important;
  max-width: var(--footer-map-width) !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 130 !important;
}

.bottom-bar .stage-node {
  width: var(--footer-node-size) !important;
  height: var(--footer-node-size) !important;
}

.bottom-bar .stage-icon,
.bottom-bar .stage-node.active .stage-icon,
.bottom-bar .stage-node.unlocked .stage-icon {
  width: var(--footer-node-icon-size) !important;
  height: var(--footer-node-icon-size) !important;
}

html body[data-stage] .bottom-bar .stage-node,
html body[data-stage] .bottom-bar .stage-node.active,
html body[data-stage] .bottom-bar .stage-node.unlocked {
  width: var(--footer-node-size) !important;
  height: var(--footer-node-size) !important;
}

html body[data-stage] .bottom-bar .stage-icon,
html body[data-stage] .bottom-bar .stage-node.active .stage-icon,
html body[data-stage] .bottom-bar .stage-node.unlocked .stage-icon {
  width: var(--footer-node-icon-size) !important;
  height: var(--footer-node-icon-size) !important;
}

.bottom-tool-button,
.thesaurus-button {
  width: var(--footer-button-size) !important;
  height: var(--footer-button-size) !important;
}

.bottom-reset-button {
  width: calc(var(--footer-button-size) * 0.86) !important;
  height: calc(var(--footer-button-size) * 0.42) !important;
}

.backpack {
  width: var(--badge-board-width) !important;
  height: clamp(68px, 6.3vw, 104px) !important;
}

.bottom-bar .stage-map:hover,
.bottom-bar .stage-map:focus-within {
  transform: translate(-50%, -50%) scale(1.008) !important;
}

.bottom-tool-button,
.thesaurus-button,
.bottom-reset-button {
  transform: translateY(-50%) scale(1) !important;
  transform-origin: center center !important;
}

.bottom-tool-button:hover,
.bottom-tool-button:focus-visible,
.thesaurus-button:hover,
.thesaurus-button:focus-visible,
.bottom-reset-button:hover,
.bottom-reset-button:focus-visible {
  transform: translateY(-50%) scale(var(--footer-button-hover-scale)) !important;
}

.map-arrow-left {
  transform: translateY(-50%) scale(1) !important;
}

.map-arrow-left:hover,
.map-arrow-left:focus-visible {
  transform: translateY(-50%) scale(var(--footer-button-hover-scale)) !important;
}

.map-arrow-right {
  transform: translateY(-50%) scaleX(-1) scale(1) !important;
}

.map-arrow-right:hover,
.map-arrow-right:focus-visible {
  transform: translateY(-50%) scaleX(-1) scale(var(--footer-button-hover-scale)) !important;
}

.stage-intro-dialog,
.stage-task-dialog {
  top: 53.5% !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

.stage-intro-dialog {
  max-height: min(82vh, calc(var(--board-height) - 10px)) !important;
}

.stage-task-dialog {
  max-height: min(66vh, calc(var(--board-height) - 14px)) !important;
}

.info-dialog {
  width: min(1020px, calc(100vw - 40px)) !important;
  max-height: calc(100dvh - 40px) !important;
  padding: clamp(74px, 7.8vh, 96px) clamp(72px, 7vw, 110px) clamp(62px, 6.6vh, 86px) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

@media (max-width: 1680px), (max-height: 920px) {
  :root {
    --topbar-height: clamp(82px, 9.2dvh, 108px);
    --footer-height: clamp(100px, 11dvh, 118px);
    --game-right-panel-width: clamp(270px, 21vw, 326px);
    --right-box-overhang-y: 4px;
    --right-box-left-overlap: 2px;
    --right-box-right-overlap: 5px;
    --right-box-content-start: 4.7%;
    --right-box-content-side: clamp(46px, 16.8%, 60px);
    --right-box-list-bottom-reserve: clamp(148px, 17vh, 196px);
    --board-right-safe-inset: clamp(26px, 1.8vw, 34px);
    --footer-map-width: min(606px, 52vw);
    --footer-button-size: clamp(64px, 7.6vw, 104px);
    --badge-board-width: clamp(220px, 21vw, 300px);
    --footer-node-size: clamp(36px, calc(var(--footer-map-width) * 0.085), 54px);
    --footer-node-icon-size: clamp(24px, calc(var(--footer-map-width) * 0.06), 38px);
  }
}

/* 2026-05-09 footer restore final override: centered map and visible tools. */
:root {
  --footer-restored-map-width: clamp(360px, 38vw, 620px);
  --footer-restored-map-height: clamp(82px, 7.7vw, 118px);
  --footer-restored-tool-size: clamp(58px, 4.2vw, 88px);
  --footer-restored-reset-size: clamp(52px, 3.65vw, 76px);
  --footer-restored-score-width: clamp(124px, 10.8vw, 204px);
  --footer-restored-gap: clamp(8px, 1.05vw, 18px);
}

html body .bottom-bar {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body .bottom-bar .stage-map {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--footer-restored-map-width) !important;
  max-width: var(--footer-restored-map-width) !important;
  height: var(--footer-restored-map-height) !important;
  min-height: var(--footer-restored-map-height) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 190 !important;
}

html body .bottom-bar .stage-map:hover,
html body .bottom-bar .stage-map:focus-within {
  transform: translate(-50%, -50%) scale(1.006) !important;
}

html body .bottom-tool-button,
html body .thesaurus-button,
html body .bottom-reset-button,
html body .badge-button.backpack,
html body .footer-score-board {
  position: absolute !important;
  top: 50% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transform: translateY(-50%) !important;
  transform-origin: center center !important;
  z-index: 210 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body .bottom-tool-button,
html body .thesaurus-button,
html body .badge-button.backpack {
  width: var(--footer-restored-tool-size) !important;
  height: var(--footer-restored-tool-size) !important;
  min-width: var(--footer-restored-tool-size) !important;
  min-height: var(--footer-restored-tool-size) !important;
  max-width: var(--footer-restored-tool-size) !important;
  max-height: var(--footer-restored-tool-size) !important;
  background-size: contain !important;
}

html body .camera-button {
  left: calc(50% - (var(--footer-restored-map-width) / 2) - (3 * var(--footer-restored-tool-size)) - (3 * var(--footer-restored-gap))) !important;
}

html body .thesaurus-button {
  left: calc(50% - (var(--footer-restored-map-width) / 2) - (2 * var(--footer-restored-tool-size)) - (2 * var(--footer-restored-gap))) !important;
}

html body .sign-button {
  left: calc(50% - (var(--footer-restored-map-width) / 2) - var(--footer-restored-tool-size) - var(--footer-restored-gap)) !important;
}

html body .badge-button.backpack {
  left: calc(50% + (var(--footer-restored-map-width) / 2) + var(--footer-restored-gap)) !important;
  background-image: url("assets/bdgbtn.png") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 136% auto !important;
}

html body .bottom-reset-button {
  left: calc(50% + (var(--footer-restored-map-width) / 2) + var(--footer-restored-gap) + var(--footer-restored-tool-size) + var(--footer-restored-gap)) !important;
  width: var(--footer-restored-reset-size) !important;
  height: var(--footer-restored-reset-size) !important;
  min-width: var(--footer-restored-reset-size) !important;
  min-height: var(--footer-restored-reset-size) !important;
  max-width: var(--footer-restored-reset-size) !important;
  max-height: var(--footer-restored-reset-size) !important;
  background: transparent url("assets/reset.png") center center / contain no-repeat !important;
  color: transparent !important;
  text-indent: -9999px !important;
}

html body .footer-score-board {
  left: calc(50% + (var(--footer-restored-map-width) / 2) + var(--footer-restored-gap) + var(--footer-restored-tool-size) + var(--footer-restored-gap) + var(--footer-restored-reset-size) + var(--footer-restored-gap)) !important;
  width: var(--footer-restored-score-width) !important;
  min-width: var(--footer-restored-score-width) !important;
  max-width: var(--footer-restored-score-width) !important;
  height: auto !important;
  aspect-ratio: 1467 / 575 !important;
  background: transparent url("assets/listwapunkty.png") center center / 100% 100% no-repeat !important;
}

html body .footer-score-board strong {
  position: absolute !important;
  left: 60.7% !important;
  top: 42.8% !important;
  display: block !important;
  width: 28% !important;
  transform: translate(-50%, -50%) !important;
  color: #ffe9a4 !important;
  font-size: clamp(0.98rem, calc(var(--footer-restored-score-width) * 0.15), 1.8rem) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-align: center !important;
  text-indent: 0 !important;
  text-shadow: 0 2px 0 rgba(46, 25, 10, 0.88), 0 0 6px rgba(29, 17, 7, 0.58) !important;
}

html body .bottom-tool-button:hover,
html body .bottom-tool-button:focus-visible,
html body .thesaurus-button:hover,
html body .thesaurus-button:focus-visible,
html body .bottom-reset-button:hover,
html body .bottom-reset-button:focus-visible,
html body .badge-button.backpack:hover,
html body .badge-button.backpack:focus-visible,
html body .footer-score-board:hover,
html body .footer-score-board:focus-visible {
  transform: translateY(-50%) scale(var(--footer-button-hover-scale, 1.08)) !important;
  outline: none !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --footer-restored-map-width: clamp(300px, 34vw, 430px);
    --footer-restored-tool-size: clamp(46px, 5.8vw, 64px);
    --footer-restored-reset-size: clamp(44px, 5.2vw, 58px);
    --footer-restored-score-width: clamp(104px, 14vw, 150px);
    --footer-restored-gap: clamp(4px, 0.8vw, 9px);
  }
}

/* 2026-05-09 final board bubble placement. */
:root {
  --board-bubble-left: clamp(112px, 8vw, 176px);
  --board-bubble-bottom: calc(var(--footer-height) + var(--app-gap) + clamp(18px, 3vh, 44px));
  --board-bubble-top: calc(var(--topbar-height) + var(--app-gap) + clamp(12px, 1.8vh, 24px));
  --board-right-reserve: clamp(330px, 26vw, 500px);
  --board-bubble-width: min(clamp(270px, 32vw, 520px), calc(100vw - var(--board-bubble-left) - var(--board-right-reserve) - 28px));
  --board-fact-width: min(clamp(260px, 30vw, 500px), calc(100vw - var(--board-bubble-left) - var(--board-right-reserve) - 28px));
}

html body:not([data-stage="forest"]) .speech,
html body:not([data-stage="forest"]) .speech.speech-intro,
html body:not([data-stage="forest"]) .speech.speech-muted,
html body:not([data-stage="forest"]) .speech:not(.speech-hidden) {
  position: fixed !important;
  left: var(--board-bubble-left) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--board-bubble-bottom) !important;
  width: var(--board-bubble-width) !important;
  max-width: var(--board-bubble-width) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: min(44vh, calc(var(--board-height) * 0.52)) !important;
  padding: clamp(12px, 1.5vw, 24px) clamp(16px, 2vw, 30px) !important;
  overflow: visible !important;
  transform: none !important;
  z-index: 112 !important;
}

html body:not([data-stage="forest"]) .speech h2 {
  margin-bottom: clamp(5px, 0.8vh, 10px) !important;
  font-size: clamp(1.05rem, 1.9vw, 2rem) !important;
  line-height: 1.08 !important;
}

html body:not([data-stage="forest"]) .speech p,
html body:not([data-stage="forest"]) .trace-callout {
  max-width: 100% !important;
  font-size: clamp(0.82rem, 1.05vw, 1.12rem) !important;
  line-height: 1.28 !important;
}

html body:not([data-stage="forest"]) .speech::before {
  left: clamp(18px, 2.4vw, 42px) !important;
  right: auto !important;
  bottom: -24px !important;
  top: auto !important;
  border: 12px solid transparent !important;
  border-top-color: rgba(255, 248, 233, 0.78) !important;
}

html body .fact-strip {
  position: fixed !important;
  left: var(--board-bubble-left) !important;
  right: auto !important;
  top: var(--board-bubble-top) !important;
  bottom: auto !important;
  width: var(--board-fact-width) !important;
  max-width: var(--board-fact-width) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: min(24vh, calc(var(--board-height) * 0.28)) !important;
  grid-template-columns: clamp(34px, 3.2vw, 46px) minmax(0, 1fr) !important;
  gap: clamp(7px, 0.8vw, 10px) !important;
  padding: clamp(7px, 0.85vw, 10px) clamp(10px, 1.1vw, 14px) !important;
  transform: none !important;
  overflow: visible !important;
  z-index: 113 !important;
}

html body .fact-strip.fact-bottom {
  top: auto !important;
  bottom: var(--board-bubble-bottom) !important;
}

html body .fact-orbit {
  width: clamp(32px, 3vw, 42px) !important;
  height: clamp(32px, 3vw, 42px) !important;
  font-size: clamp(0.9rem, 1.2vw, 1.2rem) !important;
}

html body .fact-copy small {
  font-size: clamp(0.72rem, 0.85vw, 0.92rem) !important;
}

html body .fact-copy p {
  max-width: 100% !important;
  font-size: clamp(0.74rem, 0.9vw, 0.96rem) !important;
  line-height: 1.26 !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --board-bubble-left: clamp(84px, 8vw, 118px);
    --board-bubble-bottom: calc(var(--footer-height) + var(--app-gap) + clamp(10px, 2vh, 22px));
    --board-bubble-top: calc(var(--topbar-height) + var(--app-gap) + clamp(8px, 1.4vh, 14px));
    --board-right-reserve: clamp(250px, 25vw, 360px);
    --board-bubble-width: min(clamp(230px, 30vw, 360px), calc(100vw - var(--board-bubble-left) - var(--board-right-reserve) - 18px));
    --board-fact-width: min(clamp(220px, 30vw, 340px), calc(100vw - var(--board-bubble-left) - var(--board-right-reserve) - 18px));
  }
}

/* 2026-05-09 forest statements restore: keep the matching cards visible and clickable. */
html body[data-stage="forest"] .speech,
html body[data-stage="forest"] .speech.speech-intro,
html body[data-stage="forest"] .speech.speech-muted,
html body[data-stage="forest"] .speech.speech-hidden,
html body[data-stage="forest"] .speech:not(.speech-hidden) {
  position: fixed !important;
  left: clamp(136px, 10vw, 260px) !important;
  right: calc(clamp(268px, 21vw, 430px) + clamp(16px, 2vw, 36px)) !important;
  top: auto !important;
  bottom: calc(var(--footer-height) + var(--app-gap) + clamp(18px, 2.4vh, 32px)) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: calc(var(--board-height) * 0.42) !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 215 !important;
}

html body[data-stage="forest"] .speech::before,
html body[data-stage="forest"] .speech::after {
  content: none !important;
  display: none !important;
}

html body[data-stage="forest"] .speech > h2,
html body[data-stage="forest"] .speech > p,
html body[data-stage="forest"] .speech .forest-quiz h2,
html body[data-stage="forest"] .speech .forest-quiz-row {
  display: none !important;
}

html body[data-stage="forest"] .speech .forest-quiz,
html body[data-stage="forest"] .speech .forest-assignment:not([hidden]),
html body[data-stage="forest"] .speech .forest-statement-pool {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

html body[data-stage="forest"] .speech .forest-assignment[hidden] {
  display: none !important;
}

html body[data-stage="forest"] .speech .forest-statement-pool {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(clamp(118px, 9.2vw, 172px), 1fr)) !important;
  gap: clamp(6px, 0.75vw, 11px) !important;
  align-content: end !important;
  justify-content: stretch !important;
  max-height: calc(var(--board-height) * 0.4) !important;
  overflow: visible !important;
}

html body[data-stage="forest"] .speech .forest-statement {
  display: block !important;
  min-height: clamp(38px, 4.6vh, 58px) !important;
  padding: clamp(6px, 0.7vw, 10px) clamp(7px, 0.8vw, 12px) !important;
  font-size: clamp(0.64rem, 0.65vw, 0.8rem) !important;
  line-height: 1.12 !important;
  color: #30421e !important;
  background: rgba(255, 250, 228, 0.9) !important;
  border: 1px solid rgba(76, 102, 42, 0.24) !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 8px rgba(20, 32, 14, 0.18) !important;
  pointer-events: auto !important;
  cursor: grab !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body[data-stage="forest"] .speech,
  html body[data-stage="forest"] .speech.speech-intro,
  html body[data-stage="forest"] .speech.speech-muted,
  html body[data-stage="forest"] .speech.speech-hidden,
  html body[data-stage="forest"] .speech:not(.speech-hidden) {
    left: clamp(94px, 9vw, 126px) !important;
    right: calc(clamp(244px, 22vw, 320px) + 12px) !important;
    bottom: calc(var(--footer-height) + var(--app-gap) + 12px) !important;
  }

  html body[data-stage="forest"] .speech .forest-statement-pool {
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)) !important;
  }
}

/* 2026-05-09 remove generated geometric mountain overlays from the first board. */
html body .map::before,
html body .map .distant-hills,
html body .map .hill-one,
html body .map .hill-two,
html body .map .sun-rays {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  clip-path: none !important;
}

/* 2026-05-09 fit bubble text without growing the bubbles. */
:root {
  --bubble-title-size: clamp(0.92rem, min(1.55vw, 2.55vh), 1.82rem);
  --bubble-copy-size: clamp(0.66rem, min(0.9vw, 1.65vh), 1rem);
  --bubble-small-size: clamp(0.58rem, min(0.72vw, 1.25vh), 0.82rem);
  --bubble-line-height: 1.14;
  --fact-copy-size: clamp(0.58rem, min(0.76vw, 1.34vh), 0.88rem);
  --fact-label-size: clamp(0.56rem, min(0.68vw, 1.12vh), 0.78rem);
  --fact-line-height: 1.12;
}

html body:not([data-stage="forest"]) .speech,
html body:not([data-stage="forest"]) .speech.speech-intro,
html body:not([data-stage="forest"]) .speech.speech-muted,
html body:not([data-stage="forest"]) .speech:not(.speech-hidden) {
  padding: clamp(10px, 1.1vw, 18px) clamp(12px, 1.55vw, 24px) !important;
  overflow: hidden !important;
}

html body:not([data-stage="forest"]) .speech h2 {
  margin: 0 0 clamp(4px, 0.65vh, 8px) !important;
  font-size: var(--bubble-title-size) !important;
  line-height: 1.06 !important;
  overflow-wrap: anywhere !important;
}

html body:not([data-stage="forest"]) .speech p,
html body:not([data-stage="forest"]) .trace-callout,
html body:not([data-stage="forest"]) .trace-callout strong {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: var(--bubble-copy-size) !important;
  line-height: var(--bubble-line-height) !important;
  overflow-wrap: anywhere !important;
}

html body:not([data-stage="forest"]) .speech-action {
  min-height: clamp(28px, 3.8vh, 38px) !important;
  margin-top: clamp(5px, 0.9vh, 10px) !important;
  padding: 0 clamp(10px, 1.2vw, 18px) !important;
  font-size: var(--bubble-small-size) !important;
}

html body .fact-strip,
html body[data-stage="forest"] .fact-strip,
html body[data-stage="forest"] .fact-strip.fact-bottom {
  top: var(--board-bubble-top) !important;
  bottom: auto !important;
  padding: clamp(5px, 0.68vw, 8px) clamp(8px, 0.9vw, 12px) !important;
  overflow: hidden !important;
}

html body .fact-copy {
  min-width: 0 !important;
  overflow: hidden !important;
}

html body .fact-copy small {
  margin-bottom: clamp(1px, 0.28vh, 3px) !important;
  font-size: var(--fact-label-size) !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
}

html body .fact-copy p {
  max-width: 100% !important;
  font-size: var(--fact-copy-size) !important;
  line-height: var(--fact-line-height) !important;
  overflow-wrap: anywhere !important;
}

html body .fact-orbit {
  width: clamp(28px, 2.65vw, 38px) !important;
  height: clamp(28px, 2.65vw, 38px) !important;
  font-size: clamp(0.72rem, min(1vw, 1.8vh), 1.05rem) !important;
  border-width: clamp(2px, 0.32vw, 4px) !important;
  box-shadow: 0 0 0 clamp(3px, 0.5vw, 6px) rgba(95, 127, 49, 0.08) !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --bubble-title-size: clamp(0.82rem, min(1.8vw, 2.35vh), 1.38rem);
    --bubble-copy-size: clamp(0.58rem, min(1.05vw, 1.45vh), 0.82rem);
    --bubble-small-size: clamp(0.54rem, min(0.9vw, 1.25vh), 0.72rem);
    --fact-copy-size: clamp(0.52rem, min(0.92vw, 1.18vh), 0.72rem);
    --fact-label-size: clamp(0.5rem, min(0.82vw, 1vh), 0.66rem);
    --bubble-line-height: 1.1;
    --fact-line-height: 1.08;
  }
}

/* 2026-05-09 tight fact bubble and extreme zoom item caps. */
html body .fact-strip,
html body .fact-strip.fact-bottom,
html body[data-stage="forest"] .fact-strip,
html body[data-stage="forest"] .fact-strip.fact-bottom {
  align-items: center !important;
  padding-top: clamp(4px, 0.58vw, 7px) !important;
  padding-bottom: clamp(4px, 0.58vw, 7px) !important;
  min-height: 0 !important;
  height: auto !important;
  gap: clamp(5px, 0.62vw, 8px) !important;
}

html body .fact-copy,
html body .fact-copy p,
html body .fact-copy small {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body .fact-copy p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  overflow: hidden !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .hotspot {
    width: clamp(42px, 5.2vw, 56px) !important;
    height: clamp(42px, 5.2vw, 56px) !important;
  }

  html body .hotspot .icon,
  html body .animal-icon {
    width: clamp(26px, 3.8vw, 38px) !important;
    height: clamp(26px, 3.8vw, 38px) !important;
  }

  html body .hotspot strong {
    max-width: 74px !important;
    font-size: clamp(0.52rem, 1.18vw, 0.66rem) !important;
    line-height: 1 !important;
  }

  html body .species-list .mini-icon,
  html body .species-list .mini-icon .animal-icon,
  html body .trace-callout .animal-icon,
  html body .badge-slot .animal-icon,
  html body .dialog-icon .animal-icon {
    width: clamp(20px, 3.2vw, 30px) !important;
    height: clamp(20px, 3.2vw, 30px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  html body[data-stage="forest"] .institution-icons button {
    width: clamp(42px, 5.4vw, 58px) !important;
    height: clamp(42px, 5.4vw, 58px) !important;
  }

  html body[data-stage="forest"] .institution-icons button > span,
  html body[data-stage="forest"] .institution-icons button[data-institution] > span {
    width: clamp(34px, 4.8vw, 50px) !important;
    height: clamp(34px, 4.8vw, 50px) !important;
    font-size: clamp(0.44rem, 0.95vw, 0.62rem) !important;
    line-height: 1 !important;
  }

  html body .memo-board {
    inset: clamp(54px, 8vh, 72px) clamp(18px, 2vw, 28px) clamp(18px, 2.8vh, 28px) !important;
  }

  html body .memo-card {
    width: clamp(48px, min(6.8vw, 8.2vh), 72px) !important;
    height: clamp(54px, min(7.8vw, 9.4vh), 82px) !important;
    border-radius: clamp(8px, 1.1vw, 12px) !important;
    box-shadow: 0 4px 8px rgba(17, 29, 14, 0.22) !important;
  }

  html body .memo-card img {
    height: calc(100% - clamp(16px, 2.4vh, 24px)) !important;
    border-radius: clamp(8px, 1.1vw, 12px) clamp(8px, 1.1vw, 12px) 0 0 !important;
  }

  html body .memo-card span {
    height: clamp(16px, 2.4vh, 24px) !important;
    min-height: 0 !important;
    padding: 2px 3px !important;
    font-size: clamp(0.42rem, 0.9vw, 0.58rem) !important;
    line-height: 1 !important;
  }

  html body .memo-guide-item {
    min-height: 0 !important;
  }
}

/* 2026-05-09 board-anchored bubbles: forester and facts stay inside the game board and scale down. */
:root {
  --board-bubble-left: clamp(112px, 8vw, 176px);
  --board-bubble-bottom: calc(var(--footer-height) + var(--app-gap) + clamp(18px, 3vh, 44px));
  --board-bubble-top: calc(var(--topbar-height) + var(--app-gap) + clamp(12px, 1.8vh, 24px));
  --board-right-reserve: clamp(330px, 26vw, 500px);
  --board-bubble-max-width: min(clamp(270px, 32vw, 520px), calc(100vw - var(--board-bubble-left) - var(--board-right-reserve) - 28px));
  --board-fact-max-width: min(clamp(260px, 30vw, 500px), calc(100vw - var(--board-bubble-left) - var(--board-right-reserve) - 28px));
}

html body:not([data-stage="forest"]) .speech,
html body:not([data-stage="forest"]) .speech.speech-intro,
html body:not([data-stage="forest"]) .speech.speech-muted,
html body:not([data-stage="forest"]) .speech:not(.speech-hidden) {
  position: fixed !important;
  left: var(--board-bubble-left) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--board-bubble-bottom) !important;
  width: var(--board-bubble-max-width) !important;
  max-width: var(--board-bubble-max-width) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: min(34vh, calc(var(--board-height) * 0.42)) !important;
  padding: clamp(12px, 1.5vw, 24px) clamp(16px, 2vw, 30px) !important;
  overflow: visible !important;
  transform: none !important;
  z-index: 112 !important;
}

html body:not([data-stage="forest"]) .speech.speech-hidden {
  transform: translateY(8px) !important;
}

html body:not([data-stage="forest"]) .speech h2 {
  margin-bottom: clamp(5px, 0.8vh, 10px) !important;
  font-size: clamp(1.05rem, 1.9vw, 2rem) !important;
  line-height: 1.08 !important;
}

html body:not([data-stage="forest"]) .speech p,
html body:not([data-stage="forest"]) .trace-callout {
  max-width: 100% !important;
  font-size: clamp(0.82rem, 1.05vw, 1.12rem) !important;
  line-height: 1.28 !important;
}

html body:not([data-stage="forest"]) .speech-action {
  min-height: clamp(34px, 4.5vh, 46px) !important;
  margin-top: clamp(8px, 1.3vh, 16px) !important;
  padding: 0 clamp(14px, 1.6vw, 24px) !important;
}

html body:not([data-stage="forest"]) .speech::before {
  left: clamp(18px, 2.4vw, 42px) !important;
  right: auto !important;
  bottom: -24px !important;
  top: auto !important;
  border: 12px solid transparent !important;
  border-top-color: rgba(255, 248, 233, 0.78) !important;
}

html body .fact-strip {
  position: fixed !important;
  left: var(--board-bubble-left) !important;
  right: auto !important;
  top: var(--board-bubble-top) !important;
  bottom: auto !important;
  width: var(--board-fact-max-width) !important;
  max-width: var(--board-fact-max-width) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: min(24vh, calc(var(--board-height) * 0.28)) !important;
  grid-template-columns: clamp(34px, 3.2vw, 46px) minmax(0, 1fr) !important;
  gap: clamp(7px, 0.8vw, 10px) !important;
  padding: clamp(7px, 0.85vw, 10px) clamp(10px, 1.1vw, 14px) !important;
  transform: none !important;
  overflow: auto !important;
  z-index: 113 !important;
}

html body .fact-strip.fact-bottom {
  top: auto !important;
  bottom: var(--board-bubble-bottom) !important;
}

html body .fact-orbit {
  width: clamp(32px, 3vw, 42px) !important;
  height: clamp(32px, 3vw, 42px) !important;
  font-size: clamp(0.9rem, 1.2vw, 1.2rem) !important;
}

html body .fact-copy small {
  margin-bottom: clamp(2px, 0.45vh, 5px) !important;
  font-size: clamp(0.72rem, 0.85vw, 0.92rem) !important;
}

html body .fact-copy p {
  max-width: 100% !important;
  font-size: clamp(0.74rem, 0.9vw, 0.96rem) !important;
  line-height: 1.26 !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --board-bubble-left: clamp(84px, 8vw, 118px);
    --board-bubble-bottom: calc(var(--footer-height) + var(--app-gap) + clamp(10px, 2vh, 22px));
    --board-bubble-top: calc(var(--topbar-height) + var(--app-gap) + clamp(8px, 1.4vh, 14px));
    --board-right-reserve: clamp(250px, 25vw, 360px);
    --board-bubble-max-width: min(clamp(230px, 30vw, 360px), calc(100vw - var(--board-bubble-left) - var(--board-right-reserve) - 18px));
    --board-fact-max-width: min(clamp(220px, 30vw, 340px), calc(100vw - var(--board-bubble-left) - var(--board-right-reserve) - 18px));
  }
}

@media (max-width: 1440px), (max-height: 900px) {
  .info-dialog {
    width: min(960px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 28px) !important;
    padding: clamp(62px, 6.6vh, 82px) clamp(50px, 4.8vw, 72px) clamp(50px, 5.4vh, 68px) !important;
  }

  .info-dialog .species-card-layout,
  .info-dialog .map-and-notes {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --page-side-gap: 10px;
    --topbar-height: 64px;
    --footer-height: 74px;
    --app-gap: 6px;
    --vertical-buffer: 4px;
    --board-height: calc(100dvh - var(--topbar-height) - var(--footer-height) - (2 * var(--app-gap)) - var(--vertical-buffer));
    --game-right-panel-width: clamp(228px, 23vw, 252px);
    --right-box-overhang-y: 3px;
    --right-box-left-overlap: 2px;
    --right-box-right-overlap: 4px;
    --right-box-content-start: 4.3%;
    --right-box-content-side: clamp(34px, 14.8%, 44px);
    --right-box-list-bottom-reserve: clamp(100px, 16.2vh, 132px);
    --right-box-score-bottom: clamp(14px, 3.7%, 24px);
    --board-right-safe-inset: 18px;
    --footer-map-width: min(430px, 40vw);
    --footer-button-size: 62px;
    --badge-board-width: 216px;
    --footer-node-size: 34px;
    --footer-node-icon-size: 24px;
    --footer-button-hover-scale: 1.01;
  }

  .topbar {
    padding-top: 8px !important;
  }

  .topbar .brand {
    left: 16px !important;
    width: 260px !important;
    max-width: 260px !important;
  }

  .topbar .gios-logo {
    width: 42px !important;
    height: 42px !important;
  }

  .topbar .brand-copy small {
    max-width: 190px !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
  }

  .topbar .auth-mock {
    min-height: 22px !important;
    padding: 2px 6px !important;
    gap: 3px !important;
  }

  .topbar .auth-link-button {
    font-size: 0.56rem !important;
  }

  .play-area > .stage-view,
  .play-area > .stage-view.active {
    height: var(--board-height) !important;
    min-height: var(--board-height) !important;
    max-height: var(--board-height) !important;
  }

  .task-panel > h2 {
    font-size: 0.72rem !important;
    line-height: 1.08 !important;
  }

  .task-panel > #task-description {
    font-size: 0.62rem !important;
    line-height: 1.08 !important;
  }

  .task-panel > .stage-side-panel {
    padding-top: 3px !important;
  }

  .task-panel > .stage-side-panel.active {
    gap: 4px !important;
  }

  html body[data-stage] .task-panel .stage-side-panel h3 {
    font-size: 0.68rem !important;
    line-height: 1.05 !important;
    margin-bottom: 2px !important;
  }

  html body[data-stage] .task-panel .species-list li,
  html body[data-stage] .task-panel .plant-guide-item,
  html body[data-stage] .task-panel .institution-side-list button,
  html body[data-stage] .task-panel .memo-guide-item {
    font-size: 0.64rem !important;
    line-height: 1.04 !important;
    min-height: 0 !important;
    gap: 6px !important;
  }

  html body[data-stage] .task-panel .species-list li > span:not(.mini-icon):not(.check),
  html body[data-stage] .task-panel .plant-guide strong,
  html body[data-stage] .task-panel .institution-side-list button > span,
  html body[data-stage] .task-panel .institution-side-list button small,
  html body[data-stage] .task-panel .memo-guide-item span,
  html body[data-stage] .task-panel .memo-guide-item small,
  html body[data-stage] .task-panel .memo-guide-item b {
    font-size: 0.64rem !important;
    line-height: 1.04 !important;
  }

  html body[data-stage] .task-panel .species-list .mini-icon,
  html body[data-stage] .task-panel .plant-thumb,
  html body[data-stage] .task-panel .memo-guide-item::before {
    width: 30px !important;
    height: 30px !important;
  }

  html body[data-stage] .task-panel .species-list .mini-icon .animal-icon {
    width: 30px !important;
    height: 30px !important;
  }

  html body[data-stage] .task-panel .species-list .check {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.6rem !important;
  }

  body[data-stage] .task-panel .score-pill.side-score strong,
  .task-panel .score-pill.side-score strong {
    font-size: 1.34rem !important;
  }

  .play-area > .sidebar-round-hud {
    top: 10px !important;
    right: calc(var(--game-right-panel-width) + 18px) !important;
  }

  .play-area > .sidebar-round-hud .sidebar-time-pill,
  .play-area > .sidebar-round-hud .sidebar-round-score-pill {
    min-width: 96px !important;
    padding: 2px 7px 4px !important;
  }

  .play-area > .sidebar-round-hud small,
  .play-area > .sidebar-round-hud .sidebar-time-pill small,
  .play-area > .sidebar-round-hud .sidebar-round-score-pill small {
    font-size: 10px !important;
  }

  .play-area > .sidebar-round-hud strong,
  .play-area > .sidebar-round-hud .sidebar-time-pill strong,
  .play-area > .sidebar-round-hud .sidebar-round-score-pill strong {
    font-size: 1.25rem !important;
  }

  .fact-strip {
    width: min(300px, calc(100% - var(--game-right-panel-width) - 42px)) !important;
    max-width: min(300px, calc(100% - var(--game-right-panel-width) - 42px)) !important;
    max-height: 74px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    padding: 6px 30px 7px 8px !important;
  }

  .fact-orbit {
    width: 32px !important;
    height: 32px !important;
  }

  .fact-copy p {
    font-size: 0.66rem !important;
    line-height: 1.12 !important;
  }

  .stage-sound-button {
    right: calc(var(--game-right-panel-width) + 8px) !important;
    top: calc(var(--topbar-height) + var(--app-gap) + var(--board-height) - 48px) !important;
    width: 42px !important;
    height: 42px !important;
  }

  .stage-restart-button {
    width: 48px !important;
    height: 48px !important;
    left: 12px !important;
    top: 12px !important;
  }

  .bottom-bar .stage-map {
    width: var(--footer-map-width) !important;
    max-width: var(--footer-map-width) !important;
    height: 94px !important;
    bottom: -2px !important;
  }

  .map-arrow {
    width: 46px !important;
    height: 32px !important;
  }

  .stage-node {
    width: var(--footer-node-size) !important;
    height: var(--footer-node-size) !important;
  }

  .stage-icon,
  .stage-node.active .stage-icon,
  .stage-node.unlocked .stage-icon {
    width: var(--footer-node-icon-size) !important;
    height: var(--footer-node-icon-size) !important;
  }

  .stage-current-label {
    min-width: 92px !important;
    padding: 4px 10px 5px !important;
    font-size: 0.72rem !important;
    bottom: 15px !important;
  }

  .bottom-tool-button,
  .thesaurus-button {
    width: var(--footer-button-size) !important;
    height: var(--footer-button-size) !important;
  }

  .camera-button {
    left: calc(50% - (var(--footer-map-width) / 2) - 118px) !important;
  }

  .thesaurus-button {
    left: calc(50% - (var(--footer-map-width) / 2) - 54px) !important;
  }

  .sign-button {
    left: calc(50% + (var(--footer-map-width) / 2) + 8px) !important;
  }

  .bottom-reset-button {
    left: calc(50% + (var(--footer-map-width) / 2) + 72px) !important;
    width: 58px !important;
    height: 28px !important;
  }

  .backpack {
    width: var(--badge-board-width) !important;
    height: 56px !important;
  }

  body[data-stage] .guide-avatar,
  .guide-avatar {
    left: 10px !important;
    bottom: -8px !important;
    width: 154px !important;
    height: 214px !important;
  }
}

/* 2026-05-09 footer restore: keep the map centered like the title logo and pin all tools around it. */
:root {
  --footer-restored-map-width: clamp(360px, 38vw, 620px);
  --footer-restored-map-height: clamp(82px, 7.7vw, 118px);
  --footer-restored-tool-size: clamp(58px, 4.2vw, 88px);
  --footer-restored-reset-size: clamp(52px, 3.65vw, 76px);
  --footer-restored-score-width: clamp(124px, 10.8vw, 204px);
  --footer-restored-gap: clamp(8px, 1.05vw, 18px);
}

html body .bottom-bar {
  position: relative !important;
  display: block !important;
  height: var(--footer-height) !important;
  min-height: var(--footer-height) !important;
  max-height: var(--footer-height) !important;
  padding: 0 !important;
  overflow: visible !important;
  z-index: 180 !important;
}

html body .bottom-bar .stage-map {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--footer-restored-map-width) !important;
  max-width: var(--footer-restored-map-width) !important;
  height: var(--footer-restored-map-height) !important;
  min-height: var(--footer-restored-map-height) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 190 !important;
}

html body .bottom-bar .stage-map:hover,
html body .bottom-bar .stage-map:focus-within {
  transform: translate(-50%, -50%) scale(1.006) !important;
}

html body .bottom-tool-button,
html body .thesaurus-button,
html body .bottom-reset-button,
html body .badge-button.backpack,
html body .footer-score-board {
  position: absolute !important;
  top: 50% !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transform: translateY(-50%) !important;
  transform-origin: center center !important;
  z-index: 210 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body .bottom-tool-button,
html body .thesaurus-button,
html body .badge-button.backpack {
  width: var(--footer-restored-tool-size) !important;
  height: var(--footer-restored-tool-size) !important;
  min-width: var(--footer-restored-tool-size) !important;
  min-height: var(--footer-restored-tool-size) !important;
  max-width: var(--footer-restored-tool-size) !important;
  max-height: var(--footer-restored-tool-size) !important;
  background-size: contain !important;
}

html body .camera-button {
  left: calc(50% - (var(--footer-restored-map-width) / 2) - (3 * var(--footer-restored-tool-size)) - (3 * var(--footer-restored-gap))) !important;
}

html body .thesaurus-button {
  left: calc(50% - (var(--footer-restored-map-width) / 2) - (2 * var(--footer-restored-tool-size)) - (2 * var(--footer-restored-gap))) !important;
}

html body .sign-button {
  left: calc(50% - (var(--footer-restored-map-width) / 2) - var(--footer-restored-tool-size) - var(--footer-restored-gap)) !important;
}

html body .badge-button.backpack {
  left: calc(50% + (var(--footer-restored-map-width) / 2) + var(--footer-restored-gap)) !important;
  background-image: url("assets/bdgbtn.png") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 136% auto !important;
}

html body .bottom-reset-button {
  left: calc(50% + (var(--footer-restored-map-width) / 2) + var(--footer-restored-gap) + var(--footer-restored-tool-size) + var(--footer-restored-gap)) !important;
  width: var(--footer-restored-reset-size) !important;
  height: var(--footer-restored-reset-size) !important;
  min-width: var(--footer-restored-reset-size) !important;
  min-height: var(--footer-restored-reset-size) !important;
  max-width: var(--footer-restored-reset-size) !important;
  max-height: var(--footer-restored-reset-size) !important;
  background: transparent url("assets/reset.png") center center / contain no-repeat !important;
  color: transparent !important;
  text-indent: -9999px !important;
}

html body .footer-score-board {
  left: calc(50% + (var(--footer-restored-map-width) / 2) + var(--footer-restored-gap) + var(--footer-restored-tool-size) + var(--footer-restored-gap) + var(--footer-restored-reset-size) + var(--footer-restored-gap)) !important;
  width: var(--footer-restored-score-width) !important;
  min-width: var(--footer-restored-score-width) !important;
  max-width: var(--footer-restored-score-width) !important;
  height: auto !important;
  aspect-ratio: 1467 / 575 !important;
  background: transparent url("assets/listwapunkty.png") center center / 100% 100% no-repeat !important;
}

html body .footer-score-board strong {
  position: absolute !important;
  left: 60.7% !important;
  top: 42.8% !important;
  display: block !important;
  width: 28% !important;
  transform: translate(-50%, -50%) !important;
  color: #ffe9a4 !important;
  font-size: clamp(0.98rem, calc(var(--footer-restored-score-width) * 0.15), 1.8rem) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-align: center !important;
  text-indent: 0 !important;
  text-shadow: 0 2px 0 rgba(46, 25, 10, 0.88), 0 0 6px rgba(29, 17, 7, 0.58) !important;
}

html body .bottom-tool-button:hover,
html body .bottom-tool-button:focus-visible,
html body .thesaurus-button:hover,
html body .thesaurus-button:focus-visible,
html body .bottom-reset-button:hover,
html body .bottom-reset-button:focus-visible,
html body .badge-button.backpack:hover,
html body .badge-button.backpack:focus-visible,
html body .footer-score-board:hover,
html body .footer-score-board:focus-visible {
  transform: translateY(-50%) scale(var(--footer-button-hover-scale, 1.08)) !important;
  outline: none !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --footer-restored-map-width: clamp(300px, 34vw, 430px);
    --footer-restored-tool-size: clamp(46px, 5.8vw, 64px);
    --footer-restored-reset-size: clamp(44px, 5.2vw, 58px);
    --footer-restored-score-width: clamp(104px, 14vw, 150px);
    --footer-restored-gap: clamp(4px, 0.8vw, 9px);
  }
}

/* 2026-05-08 bottom HUD cleanup: badge board replaced with a single tool button. */
:root {
  --footer-tool-size: clamp(62px, 4.25vw, 104px);
  --footer-tool-hover-scale: var(--footer-button-hover-scale);
  --footer-score-board-width: clamp(136px, calc(var(--footer-tool-size) * 2.22), 232px);
  --footer-score-board-aspect: 1467 / 575;
}

.bottom-bar {
  isolation: isolate !important;
}

.bottom-tool-button,
.thesaurus-button,
.bottom-reset-button,
.badge-button.backpack {
  position: absolute !important;
  top: 50% !important;
  width: var(--footer-tool-size) !important;
  height: var(--footer-tool-size) !important;
  min-width: var(--footer-tool-size) !important;
  min-height: var(--footer-tool-size) !important;
  max-width: var(--footer-tool-size) !important;
  max-height: var(--footer-tool-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: visible !important;
  transform: translateY(-50%) scale(1) !important;
  transform-origin: center center !important;
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease !important;
  z-index: 150 !important;
}

.footer-score-board {
  position: absolute !important;
  top: 50% !important;
  width: var(--footer-score-board-width) !important;
  height: auto !important;
  min-width: var(--footer-score-board-width) !important;
  max-width: var(--footer-score-board-width) !important;
  aspect-ratio: var(--footer-score-board-aspect) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent url("assets/listwapunkty.png") center center / 100% 100% no-repeat !important;
  cursor: pointer !important;
  transform: translateY(-50%) scale(1) !important;
  transform-origin: center center !important;
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease !important;
  overflow: visible !important;
  z-index: 150 !important;
}

.footer-score-board strong {
  position: absolute !important;
  left: 60.7% !important;
  top: 42.8% !important;
  width: 28% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  color: #ffe9a4 !important;
  font-size: clamp(1.02rem, calc(var(--footer-score-board-width) * 0.158), 2.2rem) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow:
    0 2px 0 rgba(46, 25, 10, 0.88),
    0 0 6px rgba(29, 17, 7, 0.58) !important;
  pointer-events: none !important;
}

.bottom-tool-button:hover,
.bottom-tool-button:focus-visible,
.thesaurus-button:hover,
.thesaurus-button:focus-visible,
.bottom-reset-button:hover,
.bottom-reset-button:focus-visible,
.badge-button.backpack:hover,
.badge-button.backpack:focus-visible,
.footer-score-board:hover,
.footer-score-board:focus-visible {
  transform: translateY(-50%) scale(var(--footer-tool-hover-scale)) !important;
  opacity: 1 !important;
  filter: saturate(1.06) brightness(1.14) drop-shadow(0 8px 12px rgba(31, 38, 17, 0.24)) !important;
  outline: none !important;
}

.badge-button.backpack,
html body .badge-button.backpack {
  display: block !important;
  justify-self: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  background-color: transparent !important;
  background-image: url("assets/bdgbtn.png") !important;
  background-position: center calc(50% + clamp(3px, calc(var(--footer-tool-size) * 0.055), 6px)) !important;
  background-size: 136% auto !important;
  background-repeat: no-repeat !important;
  cursor: pointer !important;
}

.bottom-reset-button,
html body .bottom-reset-button {
  background: transparent url("assets/reset.png") center center / contain no-repeat !important;
}

.badge-button.backpack .bag,
.badge-button.backpack strong,
.badge-button.backpack .badge-row,
.badge-row {
  display: none !important;
}

/* Keep right-panel lists scrollable inside the light field of tlobox.png. */
html body[data-stage] .task-panel > .stage-side-panel {
  min-height: 0 !important;
  height: 100% !important;
  max-height: calc(100% - var(--right-box-list-bottom-reserve)) !important;
  overflow: hidden !important;
}

html body[data-stage] .task-panel > .stage-side-panel.active {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-content: stretch !important;
}

html body[data-stage] .task-panel .stage-side-panel.active > .species-list,
html body[data-stage] .task-panel .stage-side-panel.active > .plant-guide,
html body[data-stage] .task-panel .stage-side-panel.active > .memo-guide-grid,
html body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

html body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list {
  gap: clamp(4px, 0.55vh, 7px) !important;
}

html body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list button {
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(4px, 0.55vh, 7px) clamp(5px, 0.55vw, 9px) !important;
  gap: clamp(4px, 0.5vw, 8px) !important;
  align-items: center !important;
  font-size: clamp(0.56rem, 0.56vw, 0.72rem) !important;
  line-height: 1.05 !important;
}

html body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list button span {
  flex: 0 0 auto !important;
  font-size: clamp(0.64rem, 0.62vw, 0.8rem) !important;
  line-height: 1 !important;
}

html body[data-stage] .task-panel .stage-side-panel.active > .institution-side-list button small {
  min-width: 0 !important;
  font-size: clamp(0.56rem, 0.56vw, 0.72rem) !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
}

/* 2026-05-08 forest statement tray: keep matching cards under the tents, not over them. */
html body[data-stage="forest"] .speech,
html body[data-stage="forest"] .speech.speech-intro,
html body[data-stage="forest"] .speech.speech-muted,
html body[data-stage="forest"] .speech:not(.speech-hidden) {
  position: fixed !important;
  left: clamp(160px, 12vw, 300px) !important;
  right: calc(var(--game-right-panel-width) + var(--page-side-gap) + var(--board-right-safe-inset)) !important;
  top: calc(var(--topbar-height) + var(--app-gap) + (var(--board-height) * 0.58)) !important;
  bottom: calc(var(--footer-height) + var(--app-gap) + 8px) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  pointer-events: none !important;
  overflow: visible !important;
  z-index: 94 !important;
}

html body[data-stage="forest"] .speech .forest-quiz {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 4px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 5px 6px 6px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  background: rgba(255, 248, 229, 0.42) !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

html body[data-stage="forest"] .speech .forest-quiz > h2,
html body[data-stage="forest"] .speech .forest-quiz > p {
  display: none !important;
}

html body[data-stage="forest"] .speech .forest-quiz-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
  min-height: 0 !important;
}

html body[data-stage="forest"] .speech .forest-quiz-row #forest-question {
  display: block !important;
  margin: 0 !important;
  max-width: none !important;
  font-size: clamp(0.58rem, 0.54vw, 0.78rem) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  text-align: left !important;
}

html body[data-stage="forest"] .speech .forest-assignment {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-stage="forest"] .speech .forest-assignment[hidden] {
  display: none !important;
}

html body[data-stage="forest"] .speech .forest-statement-pool {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(clamp(112px, 10vw, 176px), 1fr)) !important;
  grid-auto-rows: minmax(0, auto) !important;
  gap: clamp(4px, 0.42vw, 8px) !important;
  align-content: start !important;
  justify-content: stretch !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  padding: 0 10px 0 0 !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(77, 50, 21, 0.74) rgba(255, 247, 220, 0.62) !important;
  background: transparent !important;
}

html body[data-stage="forest"] .speech .forest-statement-pool::-webkit-scrollbar {
  width: 9px !important;
}

html body[data-stage="forest"] .speech .forest-statement-pool::-webkit-scrollbar-track {
  background: rgba(255, 247, 220, 0.62) !important;
  border-radius: 999px !important;
}

html body[data-stage="forest"] .speech .forest-statement-pool::-webkit-scrollbar-thumb {
  background: rgba(77, 50, 21, 0.74) !important;
  border: 2px solid rgba(255, 247, 220, 0.8) !important;
  border-radius: 999px !important;
}

html body[data-stage="forest"] .speech .forest-statement-pool > .forest-statement {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: clamp(4px, 0.42vw, 7px) clamp(6px, 0.55vw, 10px) !important;
  box-sizing: border-box !important;
  border-radius: 7px !important;
  font-size: clamp(0.54rem, 0.54vw, 0.74rem) !important;
  line-height: 1.06 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body[data-stage="forest"] .speech,
  html body[data-stage="forest"] .speech.speech-intro,
  html body[data-stage="forest"] .speech.speech-muted,
  html body[data-stage="forest"] .speech:not(.speech-hidden) {
    left: 158px !important;
    right: calc(var(--game-right-panel-width) + var(--page-side-gap) + 12px) !important;
    top: calc(var(--topbar-height) + var(--app-gap) + (var(--board-height) * 0.60)) !important;
    bottom: calc(var(--footer-height) + var(--app-gap) + 6px) !important;
  }

  html body[data-stage="forest"] .speech .forest-statement-pool {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
    gap: 4px !important;
  }

html body[data-stage="forest"] .speech .forest-statement-pool > .forest-statement {
  padding: 3px 6px !important;
  font-size: 0.52rem !important;
  line-height: 1.04 !important;
  }
}

/* 2026-05-08 right box unified scroll:
   one scrollport for the whole task copy and active list, clipped to the light field. */
:root {
  --right-box-scroll-top: calc(var(--right-box-content-start) + clamp(2px, 0.35vh, 6px));
  --right-box-scroll-bottom: clamp(30px, 6.1%, 48px);
  --right-box-scroll-right-extra: clamp(8px, 0.85vw, 14px);
  --right-box-title-font: clamp(12px, 0.82vw, 16px);
  --right-box-body-font: clamp(10px, 0.72vw, 13px);
  --right-box-list-font: clamp(10px, 0.68vw, 12.5px);
}

body[data-stage] .play-area > .task-panel,
.play-area > .task-panel,
body[data-stage] .task-panel,
.task-panel {
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.task-panel > .task-heading {
  display: none !important;
}

.task-panel > .task-scroll,
html body[data-stage] .task-panel > .task-scroll {
  position: absolute !important;
  z-index: 2 !important;
  left: calc(var(--right-box-content-side) + var(--right-box-left-overlap)) !important;
  right: calc(var(--right-box-content-side) - var(--right-box-right-overlap) + var(--right-box-scroll-right-extra)) !important;
  top: var(--right-box-scroll-top) !important;
  bottom: var(--right-box-scroll-bottom) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: clamp(5px, 0.62vh, 9px) !important;
  padding: 0 10px clamp(8px, 1vh, 14px) 0 !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: #744517 rgba(116, 78, 34, 0.24) !important;
  background: transparent !important;
}

.task-panel > .task-scroll::-webkit-scrollbar {
  width: 9px !important;
}

.task-panel > .task-scroll::-webkit-scrollbar-track {
  background: rgba(116, 78, 34, 0.24) !important;
  border-radius: 999px !important;
}

.task-panel > .task-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8f5a23, #4f3018) !important;
  border: 2px solid rgba(255, 231, 184, 0.72) !important;
  border-radius: 999px !important;
}

.task-scroll > h2 {
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: var(--right-box-title-font) !important;
  line-height: 1.14 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

.task-scroll > #task-description {
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: var(--right-box-body-font) !important;
  line-height: 1.18 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

.task-scroll > .divider {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 1px !important;
  margin: 0 !important;
  opacity: 0.65 !important;
}

.task-scroll > .stage-side-panel {
  flex: 0 0 auto !important;
  display: none !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.task-scroll > .stage-side-panel.active {
  display: block !important;
}

html body[data-stage] .task-panel .task-scroll > .stage-side-panel,
html body[data-stage] .task-panel .task-scroll > .stage-side-panel.active {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body[data-stage] .task-panel .task-scroll > .stage-side-panel:not(.active) {
  display: none !important;
}

.task-scroll .stage-side-panel h3 {
  margin: 0 0 clamp(4px, 0.55vh, 7px) !important;
  font-size: var(--right-box-body-font) !important;
  line-height: 1.08 !important;
}

.task-scroll .stage-side-panel.active > .species-list,
.task-scroll .stage-side-panel.active > .plant-guide,
.task-scroll .stage-side-panel.active > .memo-guide-grid,
.task-scroll .stage-side-panel.active > .institution-side-list,
html body[data-stage] .task-panel .task-scroll .stage-side-panel.active > .species-list,
html body[data-stage] .task-panel .task-scroll .stage-side-panel.active > .plant-guide,
html body[data-stage] .task-panel .task-scroll .stage-side-panel.active > .memo-guide-grid,
html body[data-stage] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  overscroll-behavior: auto !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
}

.task-scroll .species-list,
.task-scroll .plant-guide,
.task-scroll .institution-side-list {
  display: grid !important;
  gap: clamp(4px, 0.55vh, 7px) !important;
}

.task-scroll .memo-guide-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(4px, 0.55vh, 7px) !important;
}

.task-scroll .species-list li,
.task-scroll .plant-guide-item,
.task-scroll .memo-guide-item,
.task-scroll .institution-side-list button {
  min-height: 0 !important;
  max-width: 100% !important;
  font-size: var(--right-box-list-font) !important;
  line-height: 1.08 !important;
  gap: clamp(5px, 0.5vw, 8px) !important;
  box-sizing: border-box !important;
}

.task-scroll .species-list li > span:not(.mini-icon):not(.check),
.task-scroll .plant-guide strong,
.task-scroll .plant-guide b,
.task-scroll .memo-guide-item span,
.task-scroll .memo-guide-item small,
.task-scroll .memo-guide-item b,
.task-scroll .institution-side-list button span,
.task-scroll .institution-side-list button small {
  font-size: var(--right-box-list-font) !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere !important;
}

.task-scroll .species-list .mini-icon,
.task-scroll .plant-thumb,
.task-scroll .memo-guide-item::before {
  width: clamp(24px, 2.1vw, 34px) !important;
  height: clamp(24px, 2.1vw, 34px) !important;
  flex: 0 0 clamp(24px, 2.1vw, 34px) !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --right-box-scroll-top: calc(var(--right-box-content-start) + 2px);
    --right-box-scroll-bottom: clamp(18px, 5.4%, 30px);
    --right-box-scroll-right-extra: 6px;
    --right-box-title-font: 11px;
    --right-box-body-font: 9.5px;
    --right-box-list-font: 9.5px;
  }

  .task-panel > .task-scroll,
  html body[data-stage] .task-panel > .task-scroll {
    gap: 4px !important;
    padding-right: 8px !important;
  }

  .task-scroll .memo-guide-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .task-scroll .species-list .mini-icon,
  .task-scroll .plant-thumb,
  .task-scroll .memo-guide-item::before {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
  }
}

/* 2026-05-08 forester: use the same cropped bust framing on every stage. */
body[data-stage] .guide-avatar,
.guide-avatar,
body[data-stage="dam"] .guide-avatar,
body[data-stage="meadow"] .guide-avatar,
body[data-stage="mountains"] .guide-avatar,
body[data-stage="forest"] .guide-avatar {
  left: clamp(18px, 1.6vw, 34px) !important;
  right: auto !important;
  bottom: clamp(-26px, -1.2vh, -8px) !important;
  width: clamp(238px, 13.5vw, 294px) !important;
  height: clamp(326px, 19vw, 404px) !important;
  background-image: url("assets/forester-guide-cropped.png") !important;
  background-position: center top !important;
  background-size: clamp(250px, 13.5vw, 260px) auto !important;
  background-repeat: no-repeat !important;
  transform: scaleX(-1) !important;
  transform-origin: bottom center !important;
  z-index: 94 !important;
}

@media (max-width: 700px), (max-height: 620px) {
  body[data-stage] .guide-avatar,
  .guide-avatar,
  body[data-stage="dam"] .guide-avatar,
  body[data-stage="meadow"] .guide-avatar,
  body[data-stage="mountains"] .guide-avatar,
  body[data-stage="forest"] .guide-avatar {
    left: 10px !important;
    bottom: -8px !important;
    width: 154px !important;
    height: 214px !important;
    background-size: 168px auto !important;
  }
}

/* 2026-05-08 popup scroll cleanup and footer/forester layering. */
:root {
  --popup-pad-top: clamp(54px, 8dvh, 82px);
  --popup-pad-x: clamp(38px, 5.8vw, 94px);
  --popup-pad-bottom: clamp(40px, 6.2dvh, 72px);
  --popup-scroll-font: clamp(0.82rem, 0.34vw + 0.72rem, 1rem);
  --popup-small-font: clamp(0.74rem, 0.26vw + 0.68rem, 0.9rem);
  --popup-title-font: clamp(1.28rem, 1.35vw + 0.82rem, 2rem);
}

.bottom-bar {
  z-index: 180 !important;
  background: rgba(199, 186, 134, 0.82) !important;
  backdrop-filter: blur(1px) saturate(1.02) !important;
}

body[data-stage] .guide-avatar,
.guide-avatar,
body[data-stage="dam"] .guide-avatar,
body[data-stage="meadow"] .guide-avatar,
body[data-stage="mountains"] .guide-avatar,
body[data-stage="forest"] .guide-avatar {
  z-index: 92 !important;
}

.stage-intro-dialog,
.stage-task-dialog,
.info-dialog,
.fact-dialog {
  position: fixed !important;
  left: 50% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: transparent url("assets/popup_background.png") center / 100% 100% no-repeat !important;
  box-sizing: border-box !important;
  padding: var(--popup-pad-top) var(--popup-pad-x) var(--popup-pad-bottom) !important;
  overflow: hidden !important;
}

.stage-intro-dialog,
.stage-task-dialog {
  top: 52% !important;
  transform: translate(-50%, -50%) !important;
}

.info-dialog,
.fact-dialog {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.stage-intro-dialog,
.stage-task-dialog,
.info-dialog,
.fact-dialog,
.achievements-dialog,
.map-dialog,
.thesaurus-dialog {
  font-size: var(--popup-scroll-font) !important;
  line-height: 1.3 !important;
}

.stage-intro-dialog {
  width: min(980px, calc(100vw - clamp(18px, 5vw, 86px))) !important;
  max-height: min(82dvh, calc(100dvh - 24px)) !important;
}

.stage-task-dialog {
  width: min(760px, calc(100vw - clamp(18px, 5vw, 86px))) !important;
  max-height: min(68dvh, calc(100dvh - 24px)) !important;
}

.info-dialog {
  width: min(1080px, calc(100vw - clamp(18px, 4vw, 72px))) !important;
  max-height: calc(100dvh - clamp(18px, 4vh, 60px)) !important;
}

.fact-dialog {
  width: min(700px, calc(100vw - clamp(18px, 5vw, 86px))) !important;
  max-height: min(62dvh, calc(100dvh - 24px)) !important;
}

.dialog-scroll {
  width: 100% !important;
  min-width: 0 !important;
  max-height: calc(100dvh - var(--popup-pad-top) - var(--popup-pad-bottom) - clamp(28px, 5dvh, 64px)) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: #744517 rgba(116, 78, 34, 0.24) !important;
  padding-right: clamp(8px, 1vw, 14px) !important;
  box-sizing: border-box !important;
}

.dialog-scroll::-webkit-scrollbar {
  width: 9px !important;
}

.dialog-scroll::-webkit-scrollbar-track {
  background: rgba(116, 78, 34, 0.24) !important;
  border-radius: 999px !important;
}

.dialog-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8f5a23, #4f3018) !important;
  border: 2px solid rgba(255, 231, 184, 0.72) !important;
  border-radius: 999px !important;
}

.stage-intro-dialog > :not(.close-dialog):not(.dialog-scroll),
.stage-task-dialog > :not(.close-dialog):not(.dialog-scroll),
.info-dialog > :not(.close-dialog):not(.dialog-scroll),
.fact-dialog > :not(.close-dialog):not(.dialog-scroll) {
  display: none !important;
}

.stage-intro-scroll,
.stage-task-scroll {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(7px, 1.05dvh, 14px) !important;
  text-align: center !important;
}

.stage-intro-dialog h2,
.stage-task-dialog h2,
.fact-dialog h2,
.dialog-header h2 {
  font-size: var(--popup-title-font) !important;
  line-height: 1.08 !important;
  margin: 0 !important;
}

.stage-intro-head,
.stage-task-head,
.fact-dialog-header,
.dialog-header {
  margin: 0 0 clamp(6px, 1dvh, 12px) !important;
}

.stage-intro-head p,
.stage-task-head p,
.stage-intro-dialog > .dialog-scroll > p,
#stage-task-body,
#fact-dialog-body,
.dialog-scroll p,
.dialog-scroll li,
.facts-table th,
.facts-table td,
.trivia-list li,
.map-caption {
  font-size: var(--popup-scroll-font) !important;
  line-height: 1.28 !important;
}

.stage-intro-dialog > .dialog-scroll > p,
#stage-task-body,
#fact-dialog-body {
  margin: 0 !important;
}

.stage-intro-article {
  width: 100% !important;
  display: grid !important;
  justify-items: center !important;
}

.stage-intro-scroll > p,
.stage-intro-article p {
  max-width: min(100%, 720px) !important;
  margin: 0 0 clamp(6px, 0.9dvh, 11px) !important;
  text-align: center !important;
}

#stage-intro-rules:empty {
  display: none !important;
}

.fact-dialog.completion-dialog .fact-dialog-label {
  display: none !important;
}

.fact-dialog.completion-dialog .fact-dialog-header {
  grid-template-columns: 48px minmax(0, 1fr) !important;
  margin-bottom: clamp(6px, 1dvh, 10px) !important;
}

.info-dialog .species-card-layout {
  grid-template-columns: minmax(180px, 0.52fr) minmax(0, 1fr) !important;
  gap: clamp(8px, 1.1vw, 14px) !important;
  margin-top: clamp(8px, 1.2dvh, 14px) !important;
}

.info-dialog .map-and-notes {
  grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1fr) !important;
  gap: clamp(8px, 1.1vw, 14px) !important;
  margin-top: clamp(8px, 1.2dvh, 14px) !important;
}

.info-dialog .species-details > p,
.info-dialog .facts-table th,
.info-dialog .facts-table td,
.info-dialog .trivia-list li,
.info-dialog .map-caption,
.info-dialog .source-links a {
  font-size: var(--popup-small-font) !important;
}

.info-dialog .animal-photo {
  min-height: clamp(135px, 22dvh, 230px) !important;
}

.info-dialog .animal-photo figcaption {
  font-size: clamp(0.68rem, 0.24vw + 0.62rem, 0.82rem) !important;
  line-height: 1.18 !important;
  padding: 7px 9px !important;
}

@media (max-width: 700px), (max-height: 700px) {
  :root {
    --popup-pad-top: 46px;
    --popup-pad-x: 32px;
    --popup-pad-bottom: 34px;
    --popup-scroll-font: 0.78rem;
    --popup-small-font: 0.7rem;
    --popup-title-font: 1.12rem;
  }

  .stage-intro-dialog,
  .stage-task-dialog,
  .info-dialog,
  .fact-dialog {
    left: 7px !important;
    right: 7px !important;
    width: auto !important;
    max-width: calc(100vw - 14px) !important;
    max-height: calc(100dvh - 14px) !important;
    border-radius: 18px !important;
    transform: translateY(-50%) !important;
  }

  .stage-intro-dialog,
  .stage-task-dialog {
    top: 52% !important;
  }

  .info-dialog,
  .fact-dialog {
    top: 50% !important;
  }

  .dialog-scroll {
    max-height: calc(100dvh - var(--popup-pad-top) - var(--popup-pad-bottom) - 24px) !important;
    padding-right: 7px !important;
  }

  .dialog-scroll,
  .dialog-scroll * {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .close-dialog {
    right: 20px !important;
    top: 18px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 1.1rem !important;
  }

  .info-dialog .species-card-layout,
  .info-dialog .map-and-notes,
  .info-dialog .map-and-notes > section:first-child {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .info-dialog .animal-photo {
    min-height: 118px !important;
  }

  .info-dialog .poland-map {
    width: min(104px, 42vw) !important;
  }

  .facts-table th,
  .facts-table td {
    padding: 4px 5px !important;
  }

  .stage-intro-scroll,
  .stage-task-scroll {
    gap: 6px !important;
  }
}

@media (min-width: 701px) and (max-height: 700px) {
  .stage-intro-dialog,
  .stage-task-dialog,
  .info-dialog,
  .fact-dialog {
    left: 50% !important;
    right: auto !important;
    width: min(980px, calc(100vw - 28px)) !important;
    transform: translate(-50%, -50%) !important;
  }

  .stage-task-dialog,
  .fact-dialog {
    width: min(700px, calc(100vw - 28px)) !important;
  }
}

@media (max-width: 700px) {
  .stage-intro-dialog,
  .stage-task-dialog,
  .info-dialog,
  .fact-dialog {
    left: 7px !important;
    right: auto !important;
    width: min(360px, calc(100vw - 14px)) !important;
    max-width: min(360px, calc(100vw - 14px)) !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-height: 700px) and (max-width: 900px) {
  .stage-intro-dialog,
  .stage-task-dialog,
  .info-dialog,
  .fact-dialog {
    left: 7px !important;
    right: auto !important;
    width: min(360px, calc(100vw - 14px)) !important;
    max-width: min(360px, calc(100vw - 14px)) !important;
    transform: translateY(-50%) !important;
  }
}

/* 2026-05-09 footer reset: grid layout, smaller forester, centered map. */
:root {
  --footer-map-width: clamp(360px, 41vw, 580px);
  --footer-button-size: clamp(54px, 3.8vw, 82px);
  --footer-score-board-width: clamp(118px, 10.5vw, 200px);
  --footer-node-size: clamp(30px, 2.7vw, 42px);
  --footer-node-icon-size: clamp(20px, 2vw, 30px);
  --footer-map-height: clamp(84px, 8vw, 116px);
}

.bottom-bar {
  position: relative !important;
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    clamp(54px, 3.8vw, 82px)
    clamp(54px, 3.8vw, 82px)
    clamp(54px, 3.8vw, 86px)
    minmax(var(--footer-map-width), var(--footer-map-width))
    clamp(54px, 3.8vw, 86px)
    clamp(54px, 3.8vw, 86px)
    clamp(118px, 10.5vw, 200px)
    minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: clamp(4px, 0.75vw, 12px) !important;
  padding: 8px clamp(8px, 1vw, 18px) !important;
  background: rgba(199, 186, 134, 0.74) !important;
  backdrop-filter: blur(1px) saturate(1.02) !important;
  overflow: visible !important;
  isolation: isolate !important;
  z-index: 180 !important;
}

.guide {
  grid-column: 1 !important;
  position: relative !important;
  min-height: calc(var(--footer-height) - 16px) !important;
  padding-left: clamp(62px, 4vw, 100px) !important;
  overflow: visible !important;
  z-index: 170 !important;
}

.bottom-bar .stage-map {
  grid-column: 5 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: var(--footer-map-width) !important;
  max-width: var(--footer-map-width) !important;
  height: var(--footer-map-height) !important;
  min-height: var(--footer-map-height) !important;
  margin: 0 !important;
  transform: none !important;
  justify-self: center !important;
  align-self: center !important;
  z-index: 190 !important;
}

.bottom-bar .stage-map::before {
  inset: 0 !important;
}

.bottom-bar .stage-map:hover,
.bottom-bar .stage-map:focus-within {
  transform: scale(1.006) !important;
}

.bottom-bar .stage-node {
  width: var(--footer-node-size) !important;
  height: var(--footer-node-size) !important;
}

.bottom-bar .stage-icon,
.bottom-bar .stage-node.active .stage-icon,
.bottom-bar .stage-node.unlocked .stage-icon {
  width: var(--footer-node-icon-size) !important;
  height: var(--footer-node-icon-size) !important;
}

.bottom-bar .stage-current-label {
  bottom: 12px !important;
  min-width: 92px !important;
  padding: 4px 9px 5px !important;
  font-size: 0.7rem !important;
}

.bottom-tool-button,
.thesaurus-button,
.bottom-reset-button,
.badge-button.backpack,
.footer-score-board {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  transform-origin: center center !important;
  z-index: 188 !important;
}

.sign-button {
  grid-column: 2 !important;
}

.camera-button {
  grid-column: 3 !important;
}

.thesaurus-button {
  grid-column: 4 !important;
}

.badge-button.backpack {
  grid-column: 6 !important;
}

.bottom-reset-button {
  grid-column: 7 !important;
}

.footer-score-board {
  grid-column: 8 !important;
  justify-self: end !important;
  width: var(--footer-score-board-width) !important;
  min-width: var(--footer-score-board-width) !important;
  max-width: var(--footer-score-board-width) !important;
  aspect-ratio: 1467 / 575 !important;
}

.footer-score-board strong {
  left: 60.7% !important;
  top: 42.8% !important;
  font-size: clamp(0.98rem, calc(var(--footer-score-board-width) * 0.15), 1.8rem) !important;
}

.bottom-tool-button,
.thesaurus-button,
.bottom-reset-button,
.badge-button.backpack {
  width: var(--footer-button-size) !important;
  height: var(--footer-button-size) !important;
  min-width: var(--footer-button-size) !important;
  min-height: var(--footer-button-size) !important;
  max-width: var(--footer-button-size) !important;
  max-height: var(--footer-button-size) !important;
}

.bottom-reset-button {
  width: clamp(54px, 3.8vw, 82px) !important;
  height: clamp(54px, 3.8vw, 82px) !important;
}

body[data-stage] .guide-avatar,
.guide-avatar,
body[data-stage="dam"] .guide-avatar,
body[data-stage="meadow"] .guide-avatar,
body[data-stage="mountains"] .guide-avatar,
body[data-stage="forest"] .guide-avatar {
  left: clamp(-24px, -1vw, -8px) !important;
  bottom: -4px !important;
  width: clamp(88px, 6vw, 138px) !important;
  height: clamp(126px, 8.6vw, 198px) !important;
  background-size: clamp(92px, 6.2vw, 144px) auto !important;
  z-index: 92 !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --footer-map-width: clamp(320px, 40vw, 460px);
    --footer-button-size: clamp(50px, 7vw, 72px);
    --footer-score-board-width: clamp(110px, 18vw, 170px);
    --footer-node-size: clamp(28px, 4.8vw, 38px);
    --footer-node-icon-size: clamp(18px, 3.2vw, 26px);
    --footer-map-height: clamp(74px, 9vw, 98px);
  }

  .guide {
    padding-left: clamp(48px, 5vw, 74px) !important;
  }

  body[data-stage] .guide-avatar,
  .guide-avatar,
  body[data-stage="dam"] .guide-avatar,
  body[data-stage="meadow"] .guide-avatar,
  body[data-stage="mountains"] .guide-avatar,
  body[data-stage="forest"] .guide-avatar {
    left: -10px !important;
    bottom: -2px !important;
    width: 82px !important;
    height: 122px !important;
    background-size: 84px auto !important;
  }
}

/* 2026-05-09 footer restore eof override: centered map and visible tools. */
:root {
  --footer-restored-map-width: clamp(360px, 38vw, 620px);
  --footer-restored-map-height: clamp(82px, 7.7vw, 118px);
  --footer-restored-tool-size: clamp(58px, 4.2vw, 88px);
  --footer-restored-reset-size: clamp(52px, 3.65vw, 76px);
  --footer-restored-score-width: clamp(124px, 10.8vw, 204px);
  --footer-restored-gap: clamp(8px, 1.05vw, 18px);
}

html body .bottom-bar {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body .bottom-bar .stage-map {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--footer-restored-map-width) !important;
  max-width: var(--footer-restored-map-width) !important;
  height: var(--footer-restored-map-height) !important;
  min-height: var(--footer-restored-map-height) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 190 !important;
}

html body .bottom-bar .stage-map:hover,
html body .bottom-bar .stage-map:focus-within {
  transform: translate(-50%, -50%) scale(1.006) !important;
}

html body .bottom-tool-button,
html body .thesaurus-button,
html body .bottom-reset-button,
html body .badge-button.backpack,
html body .footer-score-board {
  position: absolute !important;
  top: 50% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transform: translateY(-50%) !important;
  transform-origin: center center !important;
  z-index: 210 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body .bottom-tool-button,
html body .thesaurus-button,
html body .badge-button.backpack {
  width: var(--footer-restored-tool-size) !important;
  height: var(--footer-restored-tool-size) !important;
  min-width: var(--footer-restored-tool-size) !important;
  min-height: var(--footer-restored-tool-size) !important;
  max-width: var(--footer-restored-tool-size) !important;
  max-height: var(--footer-restored-tool-size) !important;
  background-size: contain !important;
}

html body .camera-button {
  left: calc(50% - (var(--footer-restored-map-width) / 2) - (3 * var(--footer-restored-tool-size)) - (3 * var(--footer-restored-gap))) !important;
}

html body .thesaurus-button {
  left: calc(50% - (var(--footer-restored-map-width) / 2) - (2 * var(--footer-restored-tool-size)) - (2 * var(--footer-restored-gap))) !important;
}

html body .sign-button {
  left: calc(50% - (var(--footer-restored-map-width) / 2) - var(--footer-restored-tool-size) - var(--footer-restored-gap)) !important;
}

html body .badge-button.backpack {
  left: calc(50% + (var(--footer-restored-map-width) / 2) + var(--footer-restored-gap)) !important;
  background-image: url("assets/bdgbtn.png") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 136% auto !important;
}

html body .bottom-reset-button {
  left: calc(50% + (var(--footer-restored-map-width) / 2) + var(--footer-restored-gap) + var(--footer-restored-tool-size) + var(--footer-restored-gap)) !important;
  width: var(--footer-restored-reset-size) !important;
  height: var(--footer-restored-reset-size) !important;
  min-width: var(--footer-restored-reset-size) !important;
  min-height: var(--footer-restored-reset-size) !important;
  max-width: var(--footer-restored-reset-size) !important;
  max-height: var(--footer-restored-reset-size) !important;
  background: transparent url("assets/reset.png") center center / contain no-repeat !important;
  color: transparent !important;
  text-indent: -9999px !important;
}

html body .footer-score-board {
  left: calc(50% + (var(--footer-restored-map-width) / 2) + var(--footer-restored-gap) + var(--footer-restored-tool-size) + var(--footer-restored-gap) + var(--footer-restored-reset-size) + var(--footer-restored-gap)) !important;
  width: var(--footer-restored-score-width) !important;
  min-width: var(--footer-restored-score-width) !important;
  max-width: var(--footer-restored-score-width) !important;
  height: auto !important;
  aspect-ratio: 1467 / 575 !important;
  background: transparent url("assets/listwapunkty.png") center center / 100% 100% no-repeat !important;
}

html body .footer-score-board strong {
  position: absolute !important;
  left: 60.7% !important;
  top: 42.8% !important;
  display: block !important;
  width: 28% !important;
  transform: translate(-50%, -50%) !important;
  color: #ffe9a4 !important;
  font-size: clamp(0.98rem, calc(var(--footer-restored-score-width) * 0.15), 1.8rem) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-align: center !important;
  text-indent: 0 !important;
  text-shadow: 0 2px 0 rgba(46, 25, 10, 0.88), 0 0 6px rgba(29, 17, 7, 0.58) !important;
}

html body .bottom-tool-button:hover,
html body .bottom-tool-button:focus-visible,
html body .thesaurus-button:hover,
html body .thesaurus-button:focus-visible,
html body .bottom-reset-button:hover,
html body .bottom-reset-button:focus-visible,
html body .badge-button.backpack:hover,
html body .badge-button.backpack:focus-visible,
html body .footer-score-board:hover,
html body .footer-score-board:focus-visible {
  transform: translateY(-50%) scale(var(--footer-button-hover-scale, 1.08)) !important;
  outline: none !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --footer-restored-map-width: clamp(300px, 34vw, 430px);
    --footer-restored-tool-size: clamp(46px, 5.8vw, 64px);
    --footer-restored-reset-size: clamp(44px, 5.2vw, 58px);
    --footer-restored-score-width: clamp(104px, 14vw, 150px);
    --footer-restored-gap: clamp(4px, 0.8vw, 9px);
  }
}

/* 2026-05-09 EOF board bubble placement. */
:root {
  --board-bubble-left: clamp(112px, 8vw, 176px);
  --board-bubble-bottom: calc(var(--footer-height) + var(--app-gap) + clamp(18px, 3vh, 44px));
  --board-bubble-top: calc(var(--topbar-height) + var(--app-gap) + clamp(12px, 1.8vh, 24px));
  --board-right-reserve: clamp(330px, 26vw, 500px);
  --board-bubble-width: min(clamp(270px, 32vw, 520px), calc(100vw - var(--board-bubble-left) - var(--board-right-reserve) - 28px));
  --board-fact-width: min(clamp(260px, 30vw, 500px), calc(100vw - var(--board-bubble-left) - var(--board-right-reserve) - 28px));
}

html body:not([data-stage="forest"]) .speech,
html body:not([data-stage="forest"]) .speech.speech-intro,
html body:not([data-stage="forest"]) .speech.speech-muted,
html body:not([data-stage="forest"]) .speech:not(.speech-hidden) {
  position: fixed !important;
  left: var(--board-bubble-left) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--board-bubble-bottom) !important;
  width: var(--board-bubble-width) !important;
  max-width: var(--board-bubble-width) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: min(44vh, calc(var(--board-height) * 0.52)) !important;
  padding: clamp(12px, 1.5vw, 24px) clamp(16px, 2vw, 30px) !important;
  overflow: visible !important;
  transform: none !important;
  z-index: 112 !important;
}

html body:not([data-stage="forest"]) .speech h2 {
  margin-bottom: clamp(5px, 0.8vh, 10px) !important;
  font-size: clamp(1.05rem, 1.9vw, 2rem) !important;
  line-height: 1.08 !important;
}

html body:not([data-stage="forest"]) .speech p,
html body:not([data-stage="forest"]) .trace-callout {
  max-width: 100% !important;
  font-size: clamp(0.82rem, 1.05vw, 1.12rem) !important;
  line-height: 1.28 !important;
}

html body:not([data-stage="forest"]) .speech::before {
  left: clamp(18px, 2.4vw, 42px) !important;
  right: auto !important;
  bottom: -24px !important;
  top: auto !important;
  border: 12px solid transparent !important;
  border-top-color: rgba(255, 248, 233, 0.78) !important;
}

html body .fact-strip {
  position: fixed !important;
  left: var(--board-bubble-left) !important;
  right: auto !important;
  top: var(--board-bubble-top) !important;
  bottom: auto !important;
  width: var(--board-fact-width) !important;
  max-width: var(--board-fact-width) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: min(24vh, calc(var(--board-height) * 0.28)) !important;
  grid-template-columns: clamp(34px, 3.2vw, 46px) minmax(0, 1fr) !important;
  gap: clamp(7px, 0.8vw, 10px) !important;
  padding: clamp(7px, 0.85vw, 10px) clamp(10px, 1.1vw, 14px) !important;
  transform: none !important;
  overflow: visible !important;
  z-index: 113 !important;
}

html body .fact-strip.fact-bottom {
  top: auto !important;
  bottom: var(--board-bubble-bottom) !important;
}

html body .fact-orbit {
  width: clamp(32px, 3vw, 42px) !important;
  height: clamp(32px, 3vw, 42px) !important;
  font-size: clamp(0.9rem, 1.2vw, 1.2rem) !important;
}

html body .fact-copy small {
  font-size: clamp(0.72rem, 0.85vw, 0.92rem) !important;
}

html body .fact-copy p {
  max-width: 100% !important;
  font-size: clamp(0.74rem, 0.9vw, 0.96rem) !important;
  line-height: 1.26 !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --board-bubble-left: clamp(84px, 8vw, 118px);
    --board-bubble-bottom: calc(var(--footer-height) + var(--app-gap) + clamp(10px, 2vh, 22px));
    --board-bubble-top: calc(var(--topbar-height) + var(--app-gap) + clamp(8px, 1.4vh, 14px));
    --board-right-reserve: clamp(250px, 25vw, 360px);
    --board-bubble-width: min(clamp(230px, 30vw, 360px), calc(100vw - var(--board-bubble-left) - var(--board-right-reserve) - 18px));
    --board-fact-width: min(clamp(220px, 30vw, 340px), calc(100vw - var(--board-bubble-left) - var(--board-right-reserve) - 18px));
  }
}

/* 2026-05-09 EOF forest statements restore. */
html body[data-stage="forest"] .speech,
html body[data-stage="forest"] .speech.speech-intro,
html body[data-stage="forest"] .speech.speech-muted,
html body[data-stage="forest"] .speech.speech-hidden,
html body[data-stage="forest"] .speech:not(.speech-hidden) {
  position: fixed !important;
  left: clamp(136px, 10vw, 260px) !important;
  right: calc(clamp(268px, 21vw, 430px) + clamp(16px, 2vw, 36px)) !important;
  top: auto !important;
  bottom: calc(var(--footer-height) + var(--app-gap) + clamp(18px, 2.4vh, 32px)) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: calc(var(--board-height) * 0.42) !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 215 !important;
}

html body[data-stage="forest"] .speech::before,
html body[data-stage="forest"] .speech::after {
  content: none !important;
  display: none !important;
}

html body[data-stage="forest"] .speech > h2,
html body[data-stage="forest"] .speech > p,
html body[data-stage="forest"] .speech .forest-quiz h2,
html body[data-stage="forest"] .speech .forest-quiz-row {
  display: none !important;
}

html body[data-stage="forest"] .speech .forest-quiz,
html body[data-stage="forest"] .speech .forest-assignment:not([hidden]),
html body[data-stage="forest"] .speech .forest-statement-pool {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

html body[data-stage="forest"] .speech .forest-assignment[hidden] {
  display: none !important;
}

html body[data-stage="forest"] .speech .forest-statement-pool {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(clamp(118px, 9.2vw, 172px), 1fr)) !important;
  gap: clamp(6px, 0.75vw, 11px) !important;
  align-content: end !important;
  justify-content: stretch !important;
  max-height: calc(var(--board-height) * 0.4) !important;
  overflow: visible !important;
}

html body[data-stage="forest"] .speech .forest-statement {
  display: block !important;
  min-height: clamp(38px, 4.6vh, 58px) !important;
  padding: clamp(6px, 0.7vw, 10px) clamp(7px, 0.8vw, 12px) !important;
  font-size: clamp(0.64rem, 0.65vw, 0.8rem) !important;
  line-height: 1.12 !important;
  color: #30421e !important;
  background: rgba(255, 250, 228, 0.9) !important;
  border: 1px solid rgba(76, 102, 42, 0.24) !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 8px rgba(20, 32, 14, 0.18) !important;
  pointer-events: auto !important;
  cursor: grab !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body[data-stage="forest"] .speech,
  html body[data-stage="forest"] .speech.speech-intro,
  html body[data-stage="forest"] .speech.speech-muted,
  html body[data-stage="forest"] .speech.speech-hidden,
  html body[data-stage="forest"] .speech:not(.speech-hidden) {
    left: clamp(94px, 9vw, 126px) !important;
    right: calc(clamp(244px, 22vw, 320px) + 12px) !important;
    bottom: calc(var(--footer-height) + var(--app-gap) + 12px) !important;
  }

  html body[data-stage="forest"] .speech .forest-statement-pool {
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)) !important;
  }
}

/* 2026-05-09 EOF fit bubble text without growing the bubbles. */
:root {
  --bubble-title-size: clamp(0.92rem, min(1.55vw, 2.55vh), 1.82rem);
  --bubble-copy-size: clamp(0.66rem, min(0.9vw, 1.65vh), 1rem);
  --bubble-small-size: clamp(0.58rem, min(0.72vw, 1.25vh), 0.82rem);
  --bubble-line-height: 1.14;
  --fact-copy-size: clamp(0.58rem, min(0.76vw, 1.34vh), 0.88rem);
  --fact-label-size: clamp(0.56rem, min(0.68vw, 1.12vh), 0.78rem);
  --fact-line-height: 1.12;
}

html body:not([data-stage="forest"]) .speech,
html body:not([data-stage="forest"]) .speech.speech-intro,
html body:not([data-stage="forest"]) .speech.speech-muted,
html body:not([data-stage="forest"]) .speech:not(.speech-hidden) {
  padding: clamp(10px, 1.1vw, 18px) clamp(12px, 1.55vw, 24px) !important;
  overflow: hidden !important;
}

html body:not([data-stage="forest"]) .speech h2 {
  margin: 0 0 clamp(4px, 0.65vh, 8px) !important;
  font-size: var(--bubble-title-size) !important;
  line-height: 1.06 !important;
  overflow-wrap: anywhere !important;
}

html body:not([data-stage="forest"]) .speech p,
html body:not([data-stage="forest"]) .trace-callout,
html body:not([data-stage="forest"]) .trace-callout strong {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: var(--bubble-copy-size) !important;
  line-height: var(--bubble-line-height) !important;
  overflow-wrap: anywhere !important;
}

html body:not([data-stage="forest"]) .speech-action {
  min-height: clamp(28px, 3.8vh, 38px) !important;
  margin-top: clamp(5px, 0.9vh, 10px) !important;
  padding: 0 clamp(10px, 1.2vw, 18px) !important;
  font-size: var(--bubble-small-size) !important;
}

html body .fact-strip,
html body[data-stage="forest"] .fact-strip,
html body[data-stage="forest"] .fact-strip.fact-bottom {
  top: var(--board-bubble-top) !important;
  bottom: auto !important;
  padding: clamp(5px, 0.68vw, 8px) clamp(8px, 0.9vw, 12px) !important;
  overflow: hidden !important;
}

html body .fact-copy {
  min-width: 0 !important;
  overflow: hidden !important;
}

html body .fact-copy small {
  margin-bottom: clamp(1px, 0.28vh, 3px) !important;
  font-size: var(--fact-label-size) !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
}

html body .fact-copy p {
  max-width: 100% !important;
  font-size: var(--fact-copy-size) !important;
  line-height: var(--fact-line-height) !important;
  overflow-wrap: anywhere !important;
}

html body .fact-orbit {
  width: clamp(28px, 2.65vw, 38px) !important;
  height: clamp(28px, 2.65vw, 38px) !important;
  font-size: clamp(0.72rem, min(1vw, 1.8vh), 1.05rem) !important;
  border-width: clamp(2px, 0.32vw, 4px) !important;
  box-shadow: 0 0 0 clamp(3px, 0.5vw, 6px) rgba(95, 127, 49, 0.08) !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --bubble-title-size: clamp(0.82rem, min(1.8vw, 2.35vh), 1.38rem);
    --bubble-copy-size: clamp(0.58rem, min(1.05vw, 1.45vh), 0.82rem);
    --bubble-small-size: clamp(0.54rem, min(0.9vw, 1.25vh), 0.72rem);
    --fact-copy-size: clamp(0.52rem, min(0.92vw, 1.18vh), 0.72rem);
    --fact-label-size: clamp(0.5rem, min(0.82vw, 1vh), 0.66rem);
    --bubble-line-height: 1.1;
    --fact-line-height: 1.08;
  }
}

/* 2026-05-09 EOF tight fact bubble and extreme zoom item caps. */
html body .fact-strip,
html body .fact-strip.fact-bottom,
html body[data-stage="forest"] .fact-strip,
html body[data-stage="forest"] .fact-strip.fact-bottom {
  align-items: center !important;
  padding-top: clamp(4px, 0.58vw, 7px) !important;
  padding-bottom: clamp(4px, 0.58vw, 7px) !important;
  min-height: 0 !important;
  height: auto !important;
  gap: clamp(5px, 0.62vw, 8px) !important;
}

html body .fact-copy,
html body .fact-copy p,
html body .fact-copy small {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body .fact-copy p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  overflow: hidden !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .hotspot {
    width: clamp(42px, 5.2vw, 56px) !important;
    height: clamp(42px, 5.2vw, 56px) !important;
  }

  html body .hotspot .icon,
  html body .animal-icon {
    width: clamp(26px, 3.8vw, 38px) !important;
    height: clamp(26px, 3.8vw, 38px) !important;
  }

  html body .hotspot strong {
    max-width: 74px !important;
    font-size: clamp(0.52rem, 1.18vw, 0.66rem) !important;
    line-height: 1 !important;
  }

  html body .species-list .mini-icon,
  html body .species-list .mini-icon .animal-icon,
  html body .trace-callout .animal-icon,
  html body .badge-slot .animal-icon,
  html body .dialog-icon .animal-icon {
    width: clamp(20px, 3.2vw, 30px) !important;
    height: clamp(20px, 3.2vw, 30px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  html body[data-stage="forest"] .institution-icons button {
    width: clamp(42px, 5.4vw, 58px) !important;
    height: clamp(42px, 5.4vw, 58px) !important;
  }

  html body[data-stage="forest"] .institution-icons button > span,
  html body[data-stage="forest"] .institution-icons button[data-institution] > span {
    width: clamp(34px, 4.8vw, 50px) !important;
    height: clamp(34px, 4.8vw, 50px) !important;
    font-size: clamp(0.44rem, 0.95vw, 0.62rem) !important;
    line-height: 1 !important;
  }

  html body .memo-board {
    inset: clamp(54px, 8vh, 72px) clamp(18px, 2vw, 28px) clamp(18px, 2.8vh, 28px) !important;
  }

  html body .memo-card {
    width: clamp(48px, min(6.8vw, 8.2vh), 72px) !important;
    height: clamp(54px, min(7.8vw, 9.4vh), 82px) !important;
    border-radius: clamp(8px, 1.1vw, 12px) !important;
    box-shadow: 0 4px 8px rgba(17, 29, 14, 0.22) !important;
  }

  html body .memo-card img {
    height: calc(100% - clamp(16px, 2.4vh, 24px)) !important;
    border-radius: clamp(8px, 1.1vw, 12px) clamp(8px, 1.1vw, 12px) 0 0 !important;
  }

  html body .memo-card span {
    height: clamp(16px, 2.4vh, 24px) !important;
    min-height: 0 !important;
    padding: 2px 3px !important;
    font-size: clamp(0.42rem, 0.9vw, 0.58rem) !important;
    line-height: 1 !important;
  }

  html body .memo-guide-item {
    min-height: 0 !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  html body .hotspot {
    width: clamp(34px, 5vw, 44px) !important;
    height: clamp(34px, 5vw, 44px) !important;
  }

  html body .hotspot .icon,
  html body .animal-icon {
    width: clamp(22px, 3.4vw, 30px) !important;
    height: clamp(22px, 3.4vw, 30px) !important;
  }

  html body[data-stage="forest"] .institution-icons button {
    width: clamp(34px, 5vw, 46px) !important;
    height: clamp(34px, 5vw, 46px) !important;
  }

  html body[data-stage="forest"] .institution-icons button > span,
  html body[data-stage="forest"] .institution-icons button[data-institution] > span {
    width: clamp(28px, 4.4vw, 38px) !important;
    height: clamp(28px, 4.4vw, 38px) !important;
    font-size: clamp(0.36rem, 0.88vw, 0.5rem) !important;
  }

  html body .memo-board {
    inset: clamp(38px, 7vh, 54px) clamp(12px, 1.8vw, 20px) clamp(12px, 2.5vh, 18px) !important;
  }

  html body .memo-card {
    width: clamp(34px, min(5.5vw, 7vh), 50px) !important;
    height: clamp(38px, min(6.4vw, 7.8vh), 58px) !important;
    border-radius: 7px !important;
  }

  html body .memo-card img {
    height: calc(100% - 14px) !important;
    border-radius: 7px 7px 0 0 !important;
  }

  html body .memo-card span {
    height: 14px !important;
    padding: 1px 2px !important;
    font-size: 0.36rem !important;
  }

  html body .fact-strip,
  html body .fact-strip.fact-bottom,
  html body[data-stage="forest"] .fact-strip,
  html body[data-stage="forest"] .fact-strip.fact-bottom {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }
}

/* 2026-05-09 EOF zoom-stable labels, institution rings, and forest statement tray. */
html body[data-stage="dam"] .hotspot strong,
html body .hotspot strong {
  max-width: clamp(70px, 8.4vw, 136px) !important;
  padding: clamp(3px, 0.55vw, 7px) clamp(6px, 0.9vw, 12px) !important;
  border-radius: 999px !important;
  background: rgba(255, 253, 245, 0.72) !important;
  box-shadow: 0 2px 6px rgba(28, 34, 17, 0.14) !important;
  font-size: clamp(0.56rem, min(0.82vw, 1.45vh), 0.88rem) !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body[data-stage="forest"] .institution-icons button {
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  gap: clamp(2px, 0.36vw, 5px) !important;
  width: clamp(52px, min(6vw, 9vh), 84px) !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-stage="forest"] .institution-icons button > span,
html body[data-stage="forest"] .institution-icons button[data-institution] > span {
  width: clamp(44px, min(5.2vw, 7.8vh), 68px) !important;
  height: clamp(44px, min(5.2vw, 7.8vh), 68px) !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  box-shadow:
    inset 0 0 0 2px #fff,
    inset 0 0 0 4px var(--institution-ring, #78a93b),
    0 3px 7px rgba(20, 32, 14, 0.18) !important;
  outline: 0 !important;
  transform: none !important;
}

html body[data-stage="forest"] .institution-icons button b {
  position: absolute !important;
  left: 50% !important;
  top: calc(clamp(44px, min(5.2vw, 7.8vh), 68px) + clamp(3px, 0.5vw, 7px)) !important;
  transform: translateX(-50%) !important;
  min-width: 0 !important;
  width: max-content !important;
  max-width: clamp(58px, 8vw, 108px) !important;
  min-height: 0 !important;
  padding: clamp(2px, 0.35vw, 5px) clamp(5px, 0.7vw, 9px) !important;
  border-radius: 999px !important;
  background: rgba(255, 253, 245, 0.68) !important;
  color: #26331f !important;
  box-shadow: 0 2px 6px rgba(20, 32, 14, 0.13) !important;
  font-size: clamp(0.46rem, min(0.72vw, 1.2vh), 0.7rem) !important;
  line-height: 1.02 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body[data-stage="forest"] .institution-icons button b > span {
  display: inline !important;
}

html body[data-stage="forest"] .institution-icons button b em {
  display: none !important;
}

html body[data-stage="forest"] .institution-icons button:hover b,
html body[data-stage="forest"] .institution-icons button:focus-visible b {
  max-width: clamp(86px, 13vw, 170px) !important;
  padding: clamp(3px, 0.45vw, 6px) clamp(6px, 0.8vw, 10px) !important;
  background: rgba(255, 253, 245, 0.82) !important;
  box-shadow: 0 4px 9px rgba(20, 32, 14, 0.18) !important;
}

html body[data-stage="forest"] .institution-icons button.drop-ready,
html body[data-stage="forest"] .institution-icons button.drop-ready > span {
  outline: 0 !important;
  box-shadow:
    inset 0 0 0 2px #fff,
    inset 0 0 0 4px var(--institution-ring, #78a93b),
    0 0 0 2px rgba(255, 238, 105, 0.72),
    0 3px 7px rgba(20, 32, 14, 0.18) !important;
}

html body[data-stage="forest"] .speech,
html body[data-stage="forest"] .speech.speech-intro,
html body[data-stage="forest"] .speech.speech-muted,
html body[data-stage="forest"] .speech.speech-hidden,
html body[data-stage="forest"] .speech:not(.speech-hidden) {
  left: clamp(72px, 7.2vw, 132px) !important;
  right: clamp(268px, 22vw, 430px) !important;
  top: calc(var(--topbar-height) + var(--app-gap) + (var(--board-height) * 0.57)) !important;
  bottom: calc(var(--footer-height) + var(--app-gap) + clamp(8px, 1.4vh, 16px)) !important;
  max-height: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 215 !important;
}

html body[data-stage="forest"] .speech .forest-assignment:not([hidden]),
html body[data-stage="forest"] .speech .forest-statement-pool {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body[data-stage="forest"] .speech .forest-statement-pool {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(clamp(84px, 9vw, 140px), 1fr)) !important;
  gap: clamp(4px, 0.55vw, 8px) !important;
  align-content: start !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 5px !important;
  scrollbar-width: thin !important;
}

html body[data-stage="forest"] .speech .forest-statement {
  min-height: 0 !important;
  padding: clamp(4px, 0.5vw, 7px) clamp(5px, 0.65vw, 9px) !important;
  border-radius: 8px !important;
  font-size: clamp(0.5rem, min(0.62vw, 1.1vh), 0.72rem) !important;
  line-height: 1.08 !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="dam"] .hotspot strong,
  html body .hotspot strong {
    max-width: 58px !important;
    padding: 2px 5px !important;
    font-size: clamp(0.42rem, 1vw, 0.55rem) !important;
    line-height: 1 !important;
  }

  html body[data-stage="forest"] .institution-icons button {
    width: clamp(38px, 5vw, 48px) !important;
  }

  html body[data-stage="forest"] .institution-icons button > span,
  html body[data-stage="forest"] .institution-icons button[data-institution] > span {
    width: clamp(32px, 4.6vw, 42px) !important;
    height: clamp(32px, 4.6vw, 42px) !important;
    box-shadow:
      inset 0 0 0 1px #fff,
      inset 0 0 0 3px var(--institution-ring, #78a93b),
      0 2px 5px rgba(20, 32, 14, 0.16) !important;
  }

  html body[data-stage="forest"] .institution-icons button b {
    top: calc(clamp(32px, 4.6vw, 42px) + 2px) !important;
    max-width: 54px !important;
    padding: 2px 4px !important;
    font-size: clamp(0.34rem, 0.82vw, 0.46rem) !important;
  }

  html body[data-stage="forest"] .speech,
  html body[data-stage="forest"] .speech.speech-intro,
  html body[data-stage="forest"] .speech.speech-muted,
  html body[data-stage="forest"] .speech.speech-hidden,
  html body[data-stage="forest"] .speech:not(.speech-hidden) {
    left: clamp(44px, 6vw, 76px) !important;
    right: clamp(212px, 22vw, 300px) !important;
    top: calc(var(--topbar-height) + var(--app-gap) + (var(--board-height) * 0.6)) !important;
    bottom: calc(var(--footer-height) + var(--app-gap) + 6px) !important;
  }

  html body[data-stage="forest"] .speech .forest-statement-pool {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
    gap: 4px !important;
  }

  html body[data-stage="forest"] .speech .forest-statement {
    padding: 3px 4px !important;
    font-size: clamp(0.38rem, 0.85vw, 0.52rem) !important;
    line-height: 1.02 !important;
  }
}

/* 2026-05-09 forest statements moved out of the forester speech bubble. */
html body[data-stage="forest"] .forest-stage > .forest-assignment,
html body[data-stage="forest"] .forest-stage > .forest-assignment:not([hidden]) {
  position: absolute !important;
  left: clamp(58px, 6vw, 112px) !important;
  right: clamp(260px, 22vw, 420px) !important;
  top: calc(52% + clamp(12px, 2vh, 24px)) !important;
  bottom: clamp(18px, 3vh, 34px) !important;
  z-index: 120 !important;
  display: block !important;
  min-height: 96px !important;
  padding: clamp(5px, 0.65vw, 9px) !important;
  border-radius: 12px !important;
  background: rgba(255, 248, 229, 0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(70, 96, 43, 0.14), 0 4px 10px rgba(20, 32, 14, 0.1) !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

html body[data-stage="forest"] .forest-stage > .forest-assignment[hidden] {
  display: none !important;
}

html body[data-stage="forest"] .forest-stage > .forest-assignment .forest-statement-pool {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(clamp(96px, 10vw, 150px), 1fr)) !important;
  gap: clamp(4px, 0.65vw, 8px) !important;
  align-content: start !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 5px !important;
  scrollbar-width: thin !important;
}

html body[data-stage="forest"] .forest-stage > .forest-assignment .forest-statement {
  display: block !important;
  min-height: 0 !important;
  padding: clamp(4px, 0.55vw, 7px) clamp(5px, 0.7vw, 9px) !important;
  border-radius: 8px !important;
  color: #30421e !important;
  background: rgba(255, 250, 228, 0.92) !important;
  border: 1px solid rgba(76, 102, 42, 0.22) !important;
  box-shadow: 0 2px 6px rgba(20, 32, 14, 0.14) !important;
  font-size: clamp(0.5rem, min(0.68vw, 1.12vh), 0.74rem) !important;
  line-height: 1.08 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: grab !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="forest"] .forest-stage > .forest-assignment,
  html body[data-stage="forest"] .forest-stage > .forest-assignment:not([hidden]) {
    left: clamp(36px, 5vw, 58px) !important;
    right: clamp(210px, 22vw, 290px) !important;
    top: calc(54% + 6px) !important;
    bottom: 10px !important;
    min-height: 72px !important;
    padding: 4px !important;
  }

  html body[data-stage="forest"] .forest-stage > .forest-assignment .forest-statement-pool {
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)) !important;
    gap: 4px !important;
  }

  html body[data-stage="forest"] .forest-stage > .forest-assignment .forest-statement {
    padding: 3px 4px !important;
    font-size: clamp(0.38rem, 0.88vw, 0.52rem) !important;
    line-height: 1.02 !important;
  }
}

/* 2026-05-09 EOF correction: transparent forest statement tray. */
html body[data-stage="forest"] .forest-stage > .forest-assignment,
html body[data-stage="forest"] .forest-stage > .forest-assignment:not([hidden]) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

html body[data-stage="forest"] .forest-stage > .forest-assignment .forest-statement-pool {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 2026-05-09 EOF correction: compact extreme zoom chrome and fitted map label. */
html body .stage-current-label {
  min-width: 0 !important;
  width: max-content !important;
  max-width: calc(var(--footer-restored-map-width, 620px) * 0.44) !important;
  padding-left: clamp(9px, 1vw, 16px) !important;
  padding-right: clamp(9px, 1vw, 16px) !important;
  white-space: nowrap !important;
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --topbar-height: clamp(50.4px, 11.7dvh, 63px);
    --footer-height: clamp(55.8px, 12.6dvh, 70.2px);
    --app-gap: 5px;
    --vertical-buffer: 4px;
    --game-right-panel-width: clamp(206px, 28vw, 248px);
    --right-box-overhang-y: 2px;
    --right-box-left-overlap: 1px;
    --right-box-right-overlap: 3px;
    --right-box-content-start: 4.4%;
    --right-box-content-side: clamp(31px, 14.8%, 42px);
    --right-box-list-bottom-reserve: clamp(86px, 18vh, 112px);
    --right-box-score-bottom: clamp(10px, 2vh, 18px);
    --board-right-safe-inset: clamp(12px, 2vw, 20px);
    --footer-restored-map-width: clamp(238px, 36vw, 326px);
    --footer-restored-map-height: clamp(50px, 11dvh, 66px);
    --footer-restored-tool-size: clamp(34px, 7.4vw, 46px);
    --footer-restored-reset-size: clamp(32px, 6.6vw, 42px);
    --footer-restored-score-width: clamp(74px, 15vw, 104px);
    --footer-restored-gap: clamp(2px, 0.55vw, 5px);
    --footer-node-size: clamp(22px, calc(var(--footer-restored-map-width) * 0.08), 32px);
    --footer-node-icon-size: clamp(16px, calc(var(--footer-restored-map-width) * 0.055), 24px);
  }

  html body .app {
    padding-bottom: 4px !important;
  }

  html body .topbar {
    height: var(--topbar-height) !important;
    min-height: var(--topbar-height) !important;
    padding: 5px 10px !important;
    border-radius: 0 0 12px 12px !important;
  }

  html body .topbar .brand {
    left: 8px !important;
    width: min(31vw, 190px) !important;
    max-width: min(31vw, 190px) !important;
    gap: 6px !important;
  }

  html body .topbar .gios-logo {
    width: clamp(30px, 7vh, 40px) !important;
    height: clamp(30px, 7vh, 40px) !important;
  }

  html body .topbar .brand-copy small {
    max-width: min(22vw, 140px) !important;
    font-size: clamp(0.46rem, 1.35vw, 0.6rem) !important;
    line-height: 1.02 !important;
  }

  html body .title-board,
  html body .topbar .title-board {
    width: clamp(150px, 29vw, 230px) !important;
    height: clamp(40px, 9.5dvh, 56px) !important;
    top: -2px !important;
  }

  html body .topbar .status {
    top: 4px !important;
    right: 6px !important;
    max-width: 27vw !important;
  }

  html body .topbar .auth-mock {
    min-height: 20px !important;
    padding: 2px 5px !important;
    gap: 2px !important;
    font-size: 0.48rem !important;
  }

  html body .topbar .auth-link-button {
    font-size: 0.48rem !important;
  }

  html body .bottom-bar {
    height: var(--footer-height) !important;
    min-height: var(--footer-height) !important;
    max-height: var(--footer-height) !important;
    border-radius: 12px 12px 0 0 !important;
  }

  html body .bottom-bar .stage-map {
    width: var(--footer-restored-map-width) !important;
    max-width: var(--footer-restored-map-width) !important;
    height: var(--footer-restored-map-height) !important;
    min-height: var(--footer-restored-map-height) !important;
  }

  html body .bottom-bar .stage-node,
  html body[data-stage] .bottom-bar .stage-node,
  html body[data-stage] .bottom-bar .stage-node.active,
  html body[data-stage] .bottom-bar .stage-node.unlocked {
    width: var(--footer-node-size) !important;
    height: var(--footer-node-size) !important;
  }

  html body .bottom-bar .stage-icon,
  html body .bottom-bar .stage-node.active .stage-icon,
  html body .bottom-bar .stage-node.unlocked .stage-icon,
  html body[data-stage] .bottom-bar .stage-icon,
  html body[data-stage] .bottom-bar .stage-node.active .stage-icon,
  html body[data-stage] .bottom-bar .stage-node.unlocked .stage-icon {
    width: var(--footer-node-icon-size) !important;
    height: var(--footer-node-icon-size) !important;
  }

  html body .stage-current-label {
    bottom: clamp(9px, 2.2vh, 13px) !important;
    max-width: calc(var(--footer-restored-map-width) * 0.5) !important;
    padding: 3px 8px 4px !important;
    font-size: clamp(0.5rem, 1.55vw, 0.66rem) !important;
    line-height: 1 !important;
  }

  html body .footer-score-board strong {
    font-size: clamp(0.72rem, calc(var(--footer-restored-score-width) * 0.14), 1.05rem) !important;
  }

  html body .play-area > .sidebar-round-hud {
    top: clamp(6px, 1.4vh, 10px) !important;
    right: calc(var(--game-right-panel-width) + clamp(8px, 1.7vw, 14px)) !important;
    display: flex !important;
    gap: 4px !important;
  }

  html body .play-area > .sidebar-round-hud .sidebar-time-pill,
  html body .play-area > .sidebar-round-hud .sidebar-round-score-pill {
    min-width: clamp(64px, 12vw, 84px) !important;
    padding: 2px 5px 3px !important;
    border-radius: 8px !important;
  }

  html body .play-area > .sidebar-round-hud small,
  html body .play-area > .sidebar-round-hud .sidebar-time-pill small,
  html body .play-area > .sidebar-round-hud .sidebar-round-score-pill small {
    font-size: clamp(0.46rem, 1.35vw, 0.6rem) !important;
    line-height: 1 !important;
  }

  html body .play-area > .sidebar-round-hud strong,
  html body .play-area > .sidebar-round-hud .sidebar-time-pill strong,
  html body .play-area > .sidebar-round-hud .sidebar-round-score-pill strong {
    font-size: clamp(0.82rem, 2.15vw, 1.12rem) !important;
    line-height: 0.95 !important;
  }

  html body .task-panel > h2 {
    font-size: clamp(0.58rem, 1.5vw, 0.76rem) !important;
    line-height: 1.1 !important;
  }

  html body .task-panel > #task-description,
  html body .task-panel p {
    font-size: clamp(0.5rem, 1.25vw, 0.64rem) !important;
    line-height: 1.12 !important;
  }

  html body .task-panel > .stage-side-panel.active {
    gap: 4px !important;
  }

  html body .task-panel .species-list li,
  html body .task-panel .plant-guide-item,
  html body .task-panel .institution-side-list button,
  html body .task-panel .memo-guide-item {
    font-size: clamp(0.48rem, 1.2vw, 0.62rem) !important;
    line-height: 1.08 !important;
  }

  html body[data-stage] .task-panel .score-pill.side-score,
  html body .task-panel .score-pill.side-score {
    right: clamp(6px, 1vw, 10px) !important;
    bottom: clamp(8px, 1.8vh, 14px) !important;
    width: clamp(58px, 10vw, 78px) !important;
    height: clamp(28px, 6vh, 38px) !important;
  }

  html body[data-stage] .task-panel .score-pill.side-score strong,
  html body .task-panel .score-pill.side-score strong {
    font-size: clamp(0.82rem, 2.1vw, 1.1rem) !important;
  }
}

/* 2026-05-09 EOF correction: compact extreme zoom chrome and fitted map label. */
html body .stage-current-label {
  min-width: 0 !important;
  width: max-content !important;
  max-width: calc(var(--footer-restored-map-width, 620px) * 0.44) !important;
  padding-left: clamp(9px, 1vw, 16px) !important;
  padding-right: clamp(9px, 1vw, 16px) !important;
  white-space: nowrap !important;
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --topbar-height: clamp(50.4px, 11.7dvh, 63px);
    --footer-height: clamp(55.8px, 12.6dvh, 70.2px);
    --app-gap: 5px;
    --vertical-buffer: 4px;
    --game-right-panel-width: clamp(206px, 28vw, 248px);
    --right-box-overhang-y: 2px;
    --right-box-left-overlap: 1px;
    --right-box-right-overlap: 3px;
    --right-box-content-start: 4.4%;
    --right-box-content-side: clamp(31px, 14.8%, 42px);
    --right-box-list-bottom-reserve: clamp(86px, 18vh, 112px);
    --right-box-score-bottom: clamp(10px, 2vh, 18px);
    --board-right-safe-inset: clamp(12px, 2vw, 20px);
    --footer-restored-map-width: clamp(238px, 36vw, 326px);
    --footer-restored-map-height: clamp(50px, 11dvh, 66px);
    --footer-restored-tool-size: clamp(34px, 7.4vw, 46px);
    --footer-restored-reset-size: clamp(32px, 6.6vw, 42px);
    --footer-restored-score-width: clamp(74px, 15vw, 104px);
    --footer-restored-gap: clamp(2px, 0.55vw, 5px);
    --footer-node-size: clamp(22px, calc(var(--footer-restored-map-width) * 0.08), 32px);
    --footer-node-icon-size: clamp(16px, calc(var(--footer-restored-map-width) * 0.055), 24px);
  }

  html body .app {
    padding-bottom: 4px !important;
  }

  html body .topbar {
    height: var(--topbar-height) !important;
    min-height: var(--topbar-height) !important;
    padding: 5px 10px !important;
    border-radius: 0 0 12px 12px !important;
  }

  html body .topbar .brand {
    left: 8px !important;
    width: min(31vw, 190px) !important;
    max-width: min(31vw, 190px) !important;
    gap: 6px !important;
  }

  html body .topbar .gios-logo {
    width: clamp(30px, 7vh, 40px) !important;
    height: clamp(30px, 7vh, 40px) !important;
  }

  html body .topbar .brand-copy small {
    max-width: min(22vw, 140px) !important;
    font-size: clamp(0.46rem, 1.35vw, 0.6rem) !important;
    line-height: 1.02 !important;
  }

  html body .title-board,
  html body .topbar .title-board {
    width: clamp(150px, 29vw, 230px) !important;
    height: clamp(40px, 9.5dvh, 56px) !important;
    top: -2px !important;
  }

  html body .topbar .status {
    top: 4px !important;
    right: 6px !important;
    max-width: 27vw !important;
  }

  html body .topbar .auth-mock {
    min-height: 20px !important;
    padding: 2px 5px !important;
    gap: 2px !important;
    font-size: 0.48rem !important;
  }

  html body .topbar .auth-link-button {
    font-size: 0.48rem !important;
  }

  html body .bottom-bar {
    height: var(--footer-height) !important;
    min-height: var(--footer-height) !important;
    max-height: var(--footer-height) !important;
    border-radius: 12px 12px 0 0 !important;
  }

  html body .bottom-bar .stage-map {
    width: var(--footer-restored-map-width) !important;
    max-width: var(--footer-restored-map-width) !important;
    height: var(--footer-restored-map-height) !important;
    min-height: var(--footer-restored-map-height) !important;
  }

  html body .bottom-bar .stage-node,
  html body[data-stage] .bottom-bar .stage-node,
  html body[data-stage] .bottom-bar .stage-node.active,
  html body[data-stage] .bottom-bar .stage-node.unlocked {
    width: var(--footer-node-size) !important;
    height: var(--footer-node-size) !important;
  }

  html body .bottom-bar .stage-icon,
  html body .bottom-bar .stage-node.active .stage-icon,
  html body .bottom-bar .stage-node.unlocked .stage-icon,
  html body[data-stage] .bottom-bar .stage-icon,
  html body[data-stage] .bottom-bar .stage-node.active .stage-icon,
  html body[data-stage] .bottom-bar .stage-node.unlocked .stage-icon {
    width: var(--footer-node-icon-size) !important;
    height: var(--footer-node-icon-size) !important;
  }

  html body .stage-current-label {
    bottom: clamp(9px, 2.2vh, 13px) !important;
    max-width: calc(var(--footer-restored-map-width) * 0.5) !important;
    padding: 3px 8px 4px !important;
    font-size: clamp(0.5rem, 1.55vw, 0.66rem) !important;
    line-height: 1 !important;
  }

  html body .footer-score-board strong {
    font-size: clamp(0.72rem, calc(var(--footer-restored-score-width) * 0.14), 1.05rem) !important;
  }

  html body .play-area > .sidebar-round-hud {
    top: clamp(6px, 1.4vh, 10px) !important;
    right: calc(var(--game-right-panel-width) + clamp(8px, 1.7vw, 14px)) !important;
    display: flex !important;
    gap: 4px !important;
  }

  html body .play-area > .sidebar-round-hud .sidebar-time-pill,
  html body .play-area > .sidebar-round-hud .sidebar-round-score-pill {
    min-width: clamp(64px, 12vw, 84px) !important;
    padding: 2px 5px 3px !important;
    border-radius: 8px !important;
  }

  html body .play-area > .sidebar-round-hud small,
  html body .play-area > .sidebar-round-hud .sidebar-time-pill small,
  html body .play-area > .sidebar-round-hud .sidebar-round-score-pill small {
    font-size: clamp(0.46rem, 1.35vw, 0.6rem) !important;
    line-height: 1 !important;
  }

  html body .play-area > .sidebar-round-hud strong,
  html body .play-area > .sidebar-round-hud .sidebar-time-pill strong,
  html body .play-area > .sidebar-round-hud .sidebar-round-score-pill strong {
    font-size: clamp(0.82rem, 2.15vw, 1.12rem) !important;
    line-height: 0.95 !important;
  }

  html body .task-panel > h2 {
    font-size: clamp(0.58rem, 1.5vw, 0.76rem) !important;
    line-height: 1.1 !important;
  }

  html body .task-panel > #task-description,
  html body .task-panel p {
    font-size: clamp(0.5rem, 1.25vw, 0.64rem) !important;
    line-height: 1.12 !important;
  }

  html body .task-panel > .stage-side-panel.active {
    gap: 4px !important;
  }

  html body .task-panel .species-list li,
  html body .task-panel .plant-guide-item,
  html body .task-panel .institution-side-list button,
  html body .task-panel .memo-guide-item {
    font-size: clamp(0.48rem, 1.2vw, 0.62rem) !important;
    line-height: 1.08 !important;
  }

  html body[data-stage] .task-panel .score-pill.side-score,
  html body .task-panel .score-pill.side-score {
    right: clamp(6px, 1vw, 10px) !important;
    bottom: clamp(8px, 1.8vh, 14px) !important;
    width: clamp(58px, 10vw, 78px) !important;
    height: clamp(28px, 6vh, 38px) !important;
  }

  html body[data-stage] .task-panel .score-pill.side-score strong,
  html body .task-panel .score-pill.side-score strong {
    font-size: clamp(0.82rem, 2.1vw, 1.1rem) !important;
  }
}

/* 2026-05-09 EOF correction: wider dam labels, forest label expansion, visible statement tray. */
html body[data-stage="dam"] .hotspot strong {
  min-width: clamp(96px, 9vw, 132px) !important;
  max-width: clamp(148px, 14vw, 230px) !important;
  padding: clamp(4px, 0.55vw, 7px) clamp(9px, 1vw, 14px) !important;
  font-size: clamp(0.62rem, min(0.86vw, 1.45vh), 0.92rem) !important;
  line-height: 1.08 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

html body[data-stage="forest"] .institution-icons button:hover b,
html body[data-stage="forest"] .institution-icons button:focus-visible b {
  min-width: clamp(120px, 14vw, 220px) !important;
  max-width: clamp(150px, 18vw, 280px) !important;
  white-space: normal !important;
  z-index: 260 !important;
}

html body[data-stage="forest"] .institution-icons button:hover b > span,
html body[data-stage="forest"] .institution-icons button:focus-visible b > span {
  display: none !important;
}

html body[data-stage="forest"] .institution-icons button:hover b em,
html body[data-stage="forest"] .institution-icons button:focus-visible b em {
  display: inline !important;
  font-style: normal !important;
}

html body[data-stage="forest"] .speech,
html body[data-stage="forest"] .speech.speech-intro,
html body[data-stage="forest"] .speech.speech-muted,
html body[data-stage="forest"] .speech.speech-hidden,
html body[data-stage="forest"] .speech:not(.speech-hidden) {
  top: calc(var(--topbar-height) + var(--app-gap) + (var(--board-height) * 0.52)) !important;
  bottom: calc(var(--footer-height) + var(--app-gap) + clamp(6px, 1vh, 12px)) !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
  z-index: 240 !important;
}

html body[data-stage="forest"] .speech .forest-quiz:not([hidden]),
html body[data-stage="forest"] .speech .forest-assignment:not([hidden]),
html body[data-stage="forest"] .speech .forest-statement-pool:not(:empty) {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body[data-stage="forest"] .speech .forest-assignment:not([hidden]) {
  height: 100% !important;
  min-height: 80px !important;
  overflow: hidden !important;
}

html body[data-stage="forest"] .speech .forest-statement-pool:not(:empty) {
  display: grid !important;
  min-height: 80px !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(255, 248, 229, 0.18) !important;
  border-radius: 10px !important;
  padding: 4px 6px 4px 4px !important;
}

html body[data-stage="forest"] .speech .forest-statement {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body[data-stage="forest"] .speech:has(.forest-statement-pool:not(:empty)) {
  min-height: clamp(110px, 18vh, 210px) !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="dam"] .hotspot strong {
    min-width: clamp(76px, 11vw, 100px) !important;
    max-width: clamp(110px, 17vw, 150px) !important;
    padding: 2px 6px !important;
    font-size: clamp(0.46rem, 1.05vw, 0.62rem) !important;
    line-height: 1.03 !important;
  }

  html body[data-stage="forest"] .institution-icons button:hover b,
  html body[data-stage="forest"] .institution-icons button:focus-visible b {
    min-width: 96px !important;
    max-width: 150px !important;
    font-size: clamp(0.38rem, 0.9vw, 0.52rem) !important;
  }

  html body[data-stage="forest"] .speech,
  html body[data-stage="forest"] .speech.speech-intro,
  html body[data-stage="forest"] .speech.speech-muted,
  html body[data-stage="forest"] .speech.speech-hidden,
  html body[data-stage="forest"] .speech:not(.speech-hidden) {
    top: calc(var(--topbar-height) + var(--app-gap) + (var(--board-height) * 0.53)) !important;
  }
}

/* 2026-05-09 EOF correction: wider lower forest statement tray. */
html body[data-stage="forest"] .forest-stage > .forest-assignment,
html body[data-stage="forest"] .forest-stage > .forest-assignment:not([hidden]) {
  left: clamp(34px, 4vw, 72px) !important;
  right: clamp(120px, 11vw, 220px) !important;
  top: calc(60% + clamp(6px, 1vh, 14px)) !important;
  bottom: clamp(14px, 2.3vh, 28px) !important;
  min-height: 88px !important;
  z-index: 118 !important;
}

html body[data-stage="forest"] .forest-stage > .forest-assignment .forest-statement-pool {
  grid-template-columns: repeat(auto-fit, minmax(clamp(118px, 9vw, 168px), 1fr)) !important;
  gap: clamp(3px, 0.5vw, 7px) !important;
}

html body[data-stage="forest"] .forest-stage > .forest-assignment .forest-statement {
  padding: clamp(3px, 0.44vw, 6px) clamp(5px, 0.6vw, 8px) !important;
  font-size: clamp(0.46rem, min(0.58vw, 1vh), 0.66rem) !important;
  line-height: 1.04 !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="forest"] .forest-stage > .forest-assignment,
  html body[data-stage="forest"] .forest-stage > .forest-assignment:not([hidden]) {
    left: clamp(24px, 4vw, 44px) !important;
    right: clamp(92px, 14vw, 170px) !important;
    top: calc(60% + 4px) !important;
    bottom: 8px !important;
    min-height: 64px !important;
  }

  html body[data-stage="forest"] .forest-stage > .forest-assignment .forest-statement-pool {
    grid-template-columns: repeat(auto-fit, minmax(clamp(76px, 13vw, 106px), 1fr)) !important;
    gap: 3px !important;
  }

  html body[data-stage="forest"] .forest-stage > .forest-assignment .forest-statement {
    padding: 2px 4px !important;
    font-size: clamp(0.38rem, 0.86vw, 0.5rem) !important;
    line-height: 1.02 !important;
  }
}

/* 2026-05-09 EOF correction: hide only the forest statement tray background. */
html body[data-stage="forest"] .forest-stage > .forest-assignment,
html body[data-stage="forest"] .forest-stage > .forest-assignment:not([hidden]) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

html body[data-stage="forest"] .forest-stage > .forest-assignment .forest-statement-pool {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* 2026-05-09 EOF final: compact chrome at 250 percent zoom and fitted map label. */
html body .stage-current-label {
  min-width: 0 !important;
  width: max-content !important;
  max-width: calc(var(--footer-restored-map-width, 620px) * 0.44) !important;
  padding-left: clamp(9px, 1vw, 16px) !important;
  padding-right: clamp(9px, 1vw, 16px) !important;
  white-space: nowrap !important;
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --topbar-height: clamp(50.4px, 11.7dvh, 63px);
    --footer-height: clamp(55.8px, 12.6dvh, 70.2px);
    --app-gap: 5px;
    --vertical-buffer: 4px;
    --game-right-panel-width: clamp(206px, 28vw, 248px);
    --right-box-content-side: clamp(31px, 14.8%, 42px);
    --right-box-list-bottom-reserve: clamp(86px, 18vh, 112px);
    --right-box-score-bottom: clamp(10px, 2vh, 18px);
    --board-right-safe-inset: clamp(12px, 2vw, 20px);
    --footer-restored-map-width: clamp(238px, 36vw, 326px);
    --footer-restored-map-height: clamp(50px, 11dvh, 66px);
    --footer-restored-tool-size: clamp(34px, 7.4vw, 46px);
    --footer-restored-reset-size: clamp(32px, 6.6vw, 42px);
    --footer-restored-score-width: clamp(74px, 15vw, 104px);
    --footer-restored-gap: clamp(2px, 0.55vw, 5px);
    --footer-node-size: clamp(22px, calc(var(--footer-restored-map-width) * 0.08), 32px);
    --footer-node-icon-size: clamp(16px, calc(var(--footer-restored-map-width) * 0.055), 24px);
  }

  html body .topbar {
    height: var(--topbar-height) !important;
    min-height: var(--topbar-height) !important;
    padding: 5px 10px !important;
    border-radius: 0 0 12px 12px !important;
  }

  html body .topbar .gios-logo {
    width: clamp(30px, 7vh, 40px) !important;
    height: clamp(30px, 7vh, 40px) !important;
  }

  html body .topbar .brand-copy small {
    max-width: min(22vw, 140px) !important;
    font-size: clamp(0.46rem, 1.35vw, 0.6rem) !important;
    line-height: 1.02 !important;
  }

  html body .title-board,
  html body .topbar .title-board {
    width: clamp(150px, 29vw, 230px) !important;
    height: clamp(40px, 9.5dvh, 56px) !important;
    top: -2px !important;
  }

  html body .topbar .auth-mock,
  html body .topbar .auth-link-button {
    font-size: 0.48rem !important;
  }

  html body .bottom-bar {
    height: var(--footer-height) !important;
    min-height: var(--footer-height) !important;
    max-height: var(--footer-height) !important;
    border-radius: 12px 12px 0 0 !important;
  }

  html body .bottom-bar .stage-map {
    width: var(--footer-restored-map-width) !important;
    max-width: var(--footer-restored-map-width) !important;
    height: var(--footer-restored-map-height) !important;
    min-height: var(--footer-restored-map-height) !important;
  }

  html body .bottom-bar .stage-node,
  html body[data-stage] .bottom-bar .stage-node,
  html body[data-stage] .bottom-bar .stage-node.active,
  html body[data-stage] .bottom-bar .stage-node.unlocked {
    width: var(--footer-node-size) !important;
    height: var(--footer-node-size) !important;
  }

  html body .bottom-bar .stage-icon,
  html body .bottom-bar .stage-node.active .stage-icon,
  html body .bottom-bar .stage-node.unlocked .stage-icon,
  html body[data-stage] .bottom-bar .stage-icon,
  html body[data-stage] .bottom-bar .stage-node.active .stage-icon,
  html body[data-stage] .bottom-bar .stage-node.unlocked .stage-icon {
    width: var(--footer-node-icon-size) !important;
    height: var(--footer-node-icon-size) !important;
  }

  html body .stage-current-label {
    bottom: clamp(9px, 2.2vh, 13px) !important;
    max-width: calc(var(--footer-restored-map-width) * 0.5) !important;
    padding: 3px 8px 4px !important;
    font-size: clamp(0.5rem, 1.55vw, 0.66rem) !important;
  }

  html body .play-area > .sidebar-round-hud {
    top: clamp(6px, 1.4vh, 10px) !important;
    right: calc(var(--game-right-panel-width) + clamp(8px, 1.7vw, 14px)) !important;
    display: flex !important;
    gap: 4px !important;
  }

  html body .play-area > .sidebar-round-hud .sidebar-time-pill,
  html body .play-area > .sidebar-round-hud .sidebar-round-score-pill {
    min-width: clamp(64px, 12vw, 84px) !important;
    padding: 2px 5px 3px !important;
    border-radius: 8px !important;
  }

  html body .play-area > .sidebar-round-hud small,
  html body .play-area > .sidebar-round-hud .sidebar-time-pill small,
  html body .play-area > .sidebar-round-hud .sidebar-round-score-pill small {
    font-size: clamp(0.46rem, 1.35vw, 0.6rem) !important;
  }

  html body .play-area > .sidebar-round-hud strong,
  html body .play-area > .sidebar-round-hud .sidebar-time-pill strong,
  html body .play-area > .sidebar-round-hud .sidebar-round-score-pill strong {
    font-size: clamp(0.82rem, 2.15vw, 1.12rem) !important;
  }

  html body .task-panel > h2 {
    font-size: clamp(0.58rem, 1.5vw, 0.76rem) !important;
    line-height: 1.1 !important;
  }

  html body .task-panel > #task-description,
  html body .task-panel p {
    font-size: clamp(0.5rem, 1.25vw, 0.64rem) !important;
    line-height: 1.12 !important;
  }

  html body .task-panel .species-list li,
  html body .task-panel .plant-guide-item,
  html body .task-panel .institution-side-list button,
  html body .task-panel .memo-guide-item {
    font-size: clamp(0.48rem, 1.2vw, 0.62rem) !important;
    line-height: 1.08 !important;
  }

  html body[data-stage] .task-panel .score-pill.side-score,
  html body .task-panel .score-pill.side-score {
    width: clamp(58px, 10vw, 78px) !important;
    height: clamp(28px, 6vh, 38px) !important;
  }

  html body[data-stage] .task-panel .score-pill.side-score strong,
  html body .task-panel .score-pill.side-score strong {
    font-size: clamp(0.82rem, 2.1vw, 1.1rem) !important;
  }
}

/* 2026-05-09 EOF final: restore styled close buttons and auth mockup. */
html body .topbar .auth-mock {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(4px, 0.42vw, 8px) !important;
  min-height: clamp(24px, 2.6vh, 36px) !important;
  padding: clamp(3px, 0.36vw, 7px) clamp(8px, 0.75vw, 14px) !important;
  border: 1px solid rgba(86, 65, 30, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(255, 249, 226, 0.78) !important;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.34), 0 3px 8px rgba(43, 35, 18, 0.14) !important;
  color: #2f312c !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body .topbar .auth-link-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #214018 !important;
  cursor: pointer !important;
  font: inherit !important;
  font-size: clamp(0.56rem, 0.58vw, 0.82rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

html body .topbar .auth-link-button:hover,
html body .topbar .auth-link-button:focus-visible {
  color: #315c83 !important;
  text-decoration: underline !important;
  outline: none !important;
}

html body .fact-strip-close,
html body .close-dialog {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #fff6d7, #dfc892) !important;
  color: #4b2b16 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 3px 0 rgba(92, 57, 24, 0.28), 0 5px 10px rgba(24, 19, 10, 0.18) !important;
  cursor: pointer !important;
  font-family: Arial, "Segoe UI", sans-serif !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
}

html body .fact-strip-close {
  width: clamp(20px, 2.3vh, 26px) !important;
  height: clamp(20px, 2.3vh, 26px) !important;
  min-width: clamp(20px, 2.3vh, 26px) !important;
  min-height: clamp(20px, 2.3vh, 26px) !important;
  padding: 0 !important;
  font-size: clamp(0.72rem, 1.8vh, 0.92rem) !important;
}

html body .close-dialog {
  width: clamp(30px, 3.8vh, 40px) !important;
  height: clamp(30px, 3.8vh, 40px) !important;
  min-width: clamp(30px, 3.8vh, 40px) !important;
  min-height: clamp(30px, 3.8vh, 40px) !important;
  padding: 0 !important;
  font-size: clamp(1rem, 2.3vh, 1.35rem) !important;
}

html body .fact-strip-close:hover,
html body .fact-strip-close:focus-visible,
html body .close-dialog:hover,
html body .close-dialog:focus-visible {
  background: linear-gradient(180deg, #fffbea, #e8d49d) !important;
  color: #213915 !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .topbar .auth-mock {
    min-height: 20px !important;
    padding: 2px 6px !important;
    gap: 3px !important;
    font-size: 0.5rem !important;
  }

  html body .topbar .auth-link-button {
    font-size: 0.5rem !important;
  }

  html body .fact-strip-close {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    font-size: 0.68rem !important;
  }
}

/* 2026-05-09 EOF final: keep hidden dam animal targets small at browser zoom. */
html body[data-stage="dam"] .map .hotspot:not(.found) {
  width: 52px !important;
  height: 44px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html body[data-stage="dam"] .map .hotspot:not(.found)::before {
  max-width: 46px !important;
  max-height: 34px !important;
  transform-origin: center !important;
}

html body[data-stage="dam"] .map .hotspot[data-species="wolf"]:not(.found)::before {
  width: 42px !important;
  height: 24px !important;
}

html body[data-stage="dam"] .map .hotspot[data-species="beaver"]:not(.found)::before {
  width: 46px !important;
  height: 24px !important;
  border-bottom-width: 4px !important;
}

html body[data-stage="dam"] .map .hotspot[data-species="eagle"]:not(.found)::before {
  width: 40px !important;
  height: 16px !important;
  box-shadow: 12px 7px 0 -5px rgba(255, 250, 222, 0.34) !important;
}

html body[data-stage="dam"] .map .hotspot[data-species="bat"]:not(.found)::before {
  width: 42px !important;
  height: 30px !important;
}

html body[data-stage="dam"] .map .hotspot[data-species="frog"]:not(.found)::before {
  width: 34px !important;
  height: 22px !important;
}

html body[data-stage="dam"] .map .hotspot[data-species="otter"]:not(.found)::before {
  width: 40px !important;
  height: 16px !important;
  box-shadow: -9px 4px 0 -7px rgba(58, 91, 91, 0.5) !important;
}

html body[data-stage="dam"] .map .hotspot[data-species="turtle"]:not(.found)::before {
  width: 31px !important;
  height: 21px !important;
}

html body[data-stage="dam"] .map .hotspot[data-species="firebelly"]:not(.found)::before {
  width: 29px !important;
  height: 19px !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body[data-stage="dam"] .map .hotspot:not(.found) {
    width: 38px !important;
    height: 32px !important;
  }

  html body[data-stage="dam"] .map .hotspot:not(.found)::before {
    max-width: 34px !important;
    max-height: 25px !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="wolf"]:not(.found)::before {
    width: 30px !important;
    height: 17px !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="beaver"]:not(.found)::before {
    width: 34px !important;
    height: 17px !important;
    border-bottom-width: 3px !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="eagle"]:not(.found)::before {
    width: 29px !important;
    height: 11px !important;
    box-shadow: 9px 5px 0 -4px rgba(255, 250, 222, 0.34) !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="bat"]:not(.found)::before {
    width: 32px !important;
    height: 22px !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="frog"]:not(.found)::before {
    width: 25px !important;
    height: 16px !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="otter"]:not(.found)::before {
    width: 30px !important;
    height: 12px !important;
    box-shadow: -7px 3px 0 -6px rgba(58, 91, 91, 0.5) !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="turtle"]:not(.found)::before {
    width: 24px !important;
    height: 16px !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="firebelly"]:not(.found)::before {
    width: 22px !important;
    height: 15px !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="dam"] .map .hotspot:not(.found) {
    width: 30px !important;
    height: 26px !important;
  }

  html body[data-stage="dam"] .map .hotspot:not(.found)::before {
    max-width: 28px !important;
    max-height: 21px !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="wolf"]:not(.found)::before {
    width: 25px !important;
    height: 14px !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="beaver"]:not(.found)::before {
    width: 28px !important;
    height: 14px !important;
    border-bottom-width: 2px !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="eagle"]:not(.found)::before {
    width: 24px !important;
    height: 9px !important;
    box-shadow: 7px 4px 0 -3px rgba(255, 250, 222, 0.34) !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="bat"]:not(.found)::before {
    width: 26px !important;
    height: 18px !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="frog"]:not(.found)::before {
    width: 21px !important;
    height: 13px !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="otter"]:not(.found)::before {
    width: 25px !important;
    height: 10px !important;
    box-shadow: -5px 3px 0 -5px rgba(58, 91, 91, 0.5) !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="turtle"]:not(.found)::before {
    width: 20px !important;
    height: 13px !important;
  }

  html body[data-stage="dam"] .map .hotspot[data-species="firebelly"]:not(.found)::before {
    width: 18px !important;
    height: 12px !important;
  }
}

/* 2026-05-09 EOF final: keep footer location label below map icons at high zoom. */
html body .bottom-bar .stage-map .stage-current-label,
html body .stage-current-label {
  z-index: 1 !important;
}

html body .bottom-bar .stage-node,
html body .bottom-bar .stage-icon {
  z-index: 3 !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .bottom-bar .stage-map .stage-current-label,
  html body .stage-current-label {
    bottom: 1px !important;
    max-width: calc(var(--footer-restored-map-width, 326px) * 0.46) !important;
    padding: 1px 6px 2px !important;
    border-radius: 999px !important;
    font-size: clamp(0.42rem, 1.25vw, 0.54rem) !important;
    line-height: 1 !important;
    box-shadow: inset 0 0 0 1px rgba(129, 111, 49, 0.14), 0 1px 3px rgba(31, 38, 17, 0.08) !important;
  }
}

/* 2026-05-09 EOF final: mobile portrait landscape warning. */
.orientation-warning {
  display: none;
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 900px) {
  html,
  body {
    overflow: hidden !important;
  }

  .orientation-warning {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: grid !important;
    place-items: center !important;
    padding: 22px !important;
    background:
      radial-gradient(circle at 50% 22%, rgba(255, 246, 200, 0.24), transparent 34%),
      linear-gradient(180deg, #566f1f, #2d4923) !important;
    color: #173923 !important;
    text-align: center !important;
  }

  .orientation-warning-card {
    width: min(330px, calc(100vw - 44px)) !important;
    min-height: 260px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    padding: 30px 24px 28px !important;
    border: 1px solid rgba(86, 65, 30, 0.2) !important;
    border-radius: 18px !important;
    background: rgba(255, 249, 226, 0.96) !important;
    box-shadow: 0 18px 48px rgba(16, 28, 12, 0.36), inset 0 2px 0 rgba(255, 255, 255, 0.42) !important;
  }

  .orientation-warning-icon {
    width: 86px !important;
    height: 86px !important;
    position: relative !important;
    display: block !important;
    border: 6px solid #315c83 !important;
    border-radius: 18px !important;
    transform: rotate(90deg) !important;
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.7), 0 7px 0 rgba(31, 62, 93, 0.2) !important;
  }

  .orientation-warning-icon::before {
    content: "" !important;
    position: absolute !important;
    left: -24px !important;
    top: -24px !important;
    width: 124px !important;
    height: 124px !important;
    border: 4px solid transparent !important;
    border-top-color: #78a93b !important;
    border-right-color: #78a93b !important;
    border-radius: 50% !important;
    transform: rotate(-18deg) !important;
  }

  .orientation-warning-icon::after {
    content: "" !important;
    position: absolute !important;
    right: -23px !important;
    top: 1px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 13px solid #78a93b !important;
    border-top: 9px solid transparent !important;
    border-bottom: 9px solid transparent !important;
    transform: rotate(18deg) !important;
  }

  .orientation-warning-card strong {
    color: #213915 !important;
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
  }

  .orientation-warning-card p {
    max-width: 24ch !important;
    margin: 0 !important;
    color: #31342c !important;
    font-size: clamp(0.95rem, 4.1vw, 1.08rem) !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }

  .app {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  dialog,
  dialog[open],
  .stage-intro-dialog,
  .stage-task-dialog,
  .info-dialog,
  .fact-dialog,
  .completion-dialog,
  .thesaurus-dialog {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  dialog::backdrop {
    display: none !important;
    background: transparent !important;
  }
}

/* 2026-05-09 EOF final: preserve click targets at high zoom without enlarging visuals. */
html body .play-area > .sidebar-round-hud {
  pointer-events: none !important;
}

html body[data-stage="dam"] .map .hotspot:not(.found) {
  width: 58px !important;
  height: 58px !important;
}

html body[data-stage="dam"] .map .hotspot:not(.found)::before {
  pointer-events: none !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body[data-stage="dam"] .map .hotspot:not(.found) {
    width: 52px !important;
    height: 52px !important;
  }

  html body[data-stage="meadow"] .trace-item.plant-item,
  html body[data-stage="meadow"] .trace-item.plant-item.fake-plant {
    width: 58px !important;
    height: 58px !important;
    background-size: auto 38px !important;
    background-position: center bottom !important;
  }

  html body[data-stage="meadow"] .trace-item:not(.plant-item) {
    width: 52px !important;
    height: 52px !important;
  }

  html body[data-stage="mountains"] .memo-card {
    min-width: 54px !important;
    min-height: 62px !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="dam"] .map .hotspot:not(.found) {
    width: 46px !important;
    height: 46px !important;
  }

  html body[data-stage="meadow"] .trace-item.plant-item,
  html body[data-stage="meadow"] .trace-item.plant-item.fake-plant {
    width: 52px !important;
    height: 52px !important;
    background-size: auto 31px !important;
    background-position: center bottom !important;
  }

  html body[data-stage="meadow"] .trace-item:not(.plant-item) {
    width: 46px !important;
    height: 46px !important;
  }

  html body[data-stage="mountains"] .memo-card {
    min-width: 48px !important;
    min-height: 56px !important;
  }
}

/* 2026-05-09 EOF final: hidden guide speech must not block board clicks. */
html body .speech.speech-hidden,
html body .speech.speech-intro.speech-hidden,
html body:not([data-stage="forest"]) .speech.speech-hidden,
html body:not([data-stage="forest"]) .speech.speech-intro.speech-hidden,
html body[data-stage="forest"] .speech.speech-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

html body .speech.speech-hidden *,
html body .speech.speech-intro.speech-hidden *,
html body:not([data-stage="forest"]) .speech.speech-hidden *,
html body:not([data-stage="forest"]) .speech.speech-intro.speech-hidden *,
html body[data-stage="forest"] .speech.speech-hidden * {
  pointer-events: none !important;
}

/* 2026-05-09 EOF final: board expand toggle in place of stage reset. */
html body .board-fullscreen-button {
  width: clamp(42px, 4.6vw, 58px) !important;
  height: clamp(42px, 4.6vw, 58px) !important;
  border-radius: 14px !important;
  background: rgba(255, 248, 224, 0.72) !important;
  box-shadow: 0 5px 12px rgba(33, 43, 19, 0.18), inset 0 0 0 2px rgba(49, 92, 131, 0.24) !important;
  color: #315c83 !important;
}

html body .board-fullscreen-button::before {
  content: "" !important;
  position: absolute !important;
  inset: 11px !important;
  display: block !important;
  border: 3px solid currentColor !important;
  border-radius: 4px !important;
  text-indent: 0 !important;
}

html body .board-fullscreen-button::after {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  display: block !important;
  background:
    linear-gradient(currentColor, currentColor) left top / 13px 3px no-repeat,
    linear-gradient(currentColor, currentColor) left top / 3px 13px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 13px 3px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 3px 13px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 13px 3px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 3px 13px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 13px 3px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 3px 13px no-repeat !important;
}

html body.board-expanded {
  overflow: hidden !important;
}

html body.board-expanded .app {
  height: 100dvh !important;
  min-height: 100dvh !important;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr) 0 !important;
  padding-bottom: 0 !important;
}

html body.board-expanded .play-area {
  position: fixed !important;
  left: var(--page-side-gap, 8px) !important;
  right: var(--page-side-gap, 8px) !important;
  top: calc(var(--topbar-height) + var(--app-gap, 10px)) !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  z-index: 115 !important;
  overflow: visible !important;
}

html body.board-expanded .play-area > .stage-view,
html body.board-expanded .play-area > .stage-view.active {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  z-index: 60 !important;
}

html body.board-expanded .play-area > .task-panel,
html body.board-expanded .bottom-bar,
html body.board-expanded .fact-strip,
html body.board-expanded .guide,
html body.board-expanded .stage-sound-button,
html body.board-expanded .play-area > .sidebar-round-hud {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body.board-expanded .board-fullscreen-button {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1000 !important;
  background: rgba(255, 250, 232, 0.96) !important;
}

html body.board-expanded .board-fullscreen-button::before {
  inset: 10px !important;
}

html body.board-expanded .board-fullscreen-button::after {
  inset: 8px !important;
  transform: rotate(180deg) scale(0.86) !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .board-fullscreen-button {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  html body .board-fullscreen-button::before {
    inset: 9px !important;
    border-width: 2px !important;
  }

  html body .board-fullscreen-button::after {
    inset: 7px !important;
  }
}

/* 2026-05-09 EOF final: keep round HUD stacked at every zoom. */
html body .play-area > .sidebar-round-hud {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: clamp(4px, 0.75vh, 8px) !important;
}

html body .play-area > .sidebar-round-hud .sidebar-time-pill,
html body .play-area > .sidebar-round-hud .sidebar-round-score-pill {
  width: 100% !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .play-area > .sidebar-round-hud {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }
}

/* 2026-05-09 EOF final: show round HUD in expanded board and shrink mobile panel copy. */
html body.board-expanded .play-area > .sidebar-round-hud {
  display: grid !important;
  visibility: visible !important;
  pointer-events: none !important;
  top: clamp(8px, 1.3vh, 14px) !important;
  right: clamp(8px, 1vw, 16px) !important;
  z-index: 1005 !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .task-panel > h2 {
    font-size: clamp(0.5rem, 1.3vw, 0.66rem) !important;
    line-height: 1.06 !important;
  }

  html body .task-panel > #task-description,
  html body .task-panel p,
  html body .task-panel h3,
  html body .task-panel .trace-side-status span,
  html body .task-panel .track-guide,
  html body .task-panel .plant-guide strong,
  html body .task-panel .plant-guide b,
  html body .task-panel .memo-guide-item,
  html body .task-panel .memo-guide-item span,
  html body .task-panel .memo-guide-item small,
  html body .task-panel .institution-side-list button {
    font-size: clamp(0.42rem, 1.05vw, 0.56rem) !important;
    line-height: 1.04 !important;
  }

  html body .task-panel .species-list li,
  html body .task-panel .plant-guide-item,
  html body .task-panel .institution-side-list button,
  html body .task-panel .memo-guide-item {
    font-size: clamp(0.42rem, 1.05vw, 0.56rem) !important;
    line-height: 1.04 !important;
    gap: 3px !important;
  }

  html body .task-panel .stage-side-panel.active > .species-list,
  html body .task-panel .stage-side-panel.active > .plant-guide,
  html body .task-panel .stage-side-panel.active > .memo-guide-grid,
  html body .task-panel .stage-side-panel.active > .institution-side-list {
    padding-right: 7px !important;
  }
}

/* 2026-05-09 EOF final: collapsible task copy in the right panel. */
html body .task-scroll > h2 {
  cursor: pointer !important;
  user-select: none !important;
  position: relative !important;
  padding-right: clamp(14px, 1.4vw, 20px) !important;
}

html body .task-scroll > h2::after {
  content: "+" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #315c83 !important;
  font-size: 0.92em !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

html body .task-scroll.task-copy-expanded > h2::after {
  content: "-" !important;
}

html body .task-scroll > h2:focus-visible {
  outline: 2px solid rgba(49, 92, 131, 0.72) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
}

html body .task-scroll > #task-description[hidden] {
  display: none !important;
}

html body .task-scroll.task-copy-expanded > #task-description {
  display: block !important;
  cursor: pointer !important;
}

/* 2026-05-09 EOF final: move mute button to the footer and align right-side tools. */
:root {
  --footer-right-tool-size: var(--footer-restored-tool-size, clamp(58px, 4.2vw, 88px));
  --footer-right-reset-size: var(--footer-right-tool-size);
  --footer-right-gap: var(--footer-restored-gap, clamp(8px, 1.05vw, 18px));
}

html body .stage-sound-button,
html body .bottom-bar .stage-sound-button,
html body .badge-button.backpack,
html body .bottom-reset-button,
html body .footer-score-board {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) scale(1) !important;
  transform-origin: center center !important;
  z-index: 230 !important;
}

html body .stage-sound-button,
html body .badge-button.backpack,
html body .bottom-reset-button {
  width: var(--footer-right-tool-size) !important;
  height: var(--footer-right-tool-size) !important;
  min-width: var(--footer-right-tool-size) !important;
  min-height: var(--footer-right-tool-size) !important;
  max-width: var(--footer-right-tool-size) !important;
  max-height: var(--footer-right-tool-size) !important;
}

html body .stage-sound-button {
  left: calc(50% + (var(--footer-restored-map-width, 620px) / 2) + var(--footer-right-gap)) !important;
  right: auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("assets/btnmute.png") center center / contain no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: visible !important;
  filter: saturate(1.02) brightness(1.04) drop-shadow(0 5px 8px rgba(31, 38, 17, 0.16)) !important;
}

html body .stage-sound-button::before,
html body .stage-sound-button::after {
  content: none !important;
  display: none !important;
}

html body .stage-sound-button[aria-pressed="false"] {
  opacity: 0.62 !important;
  filter: grayscale(0.35) saturate(0.72) brightness(0.88) drop-shadow(0 5px 8px rgba(31, 38, 17, 0.16)) !important;
}

html body .badge-button.backpack {
  left: calc(50% + (var(--footer-restored-map-width, 620px) / 2) + (2 * var(--footer-right-gap)) + var(--footer-right-tool-size)) !important;
}

html body .bottom-reset-button {
  left: calc(50% + (var(--footer-restored-map-width, 620px) / 2) + (3 * var(--footer-right-gap)) + (2 * var(--footer-right-tool-size))) !important;
}

html body .footer-score-board {
  left: calc(50% + (var(--footer-restored-map-width, 620px) / 2) + (4 * var(--footer-right-gap)) + (3 * var(--footer-right-tool-size))) !important;
}

html body .stage-sound-button:hover,
html body .stage-sound-button:focus-visible,
html body .badge-button.backpack:hover,
html body .badge-button.backpack:focus-visible,
html body .bottom-reset-button:hover,
html body .bottom-reset-button:focus-visible,
html body .footer-score-board:hover,
html body .footer-score-board:focus-visible {
  transform: translateY(-50%) scale(var(--footer-button-hover-scale, 1.04)) !important;
  outline: none !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --footer-right-tool-size: var(--footer-restored-tool-size, clamp(46px, 5.8vw, 64px));
    --footer-right-gap: var(--footer-restored-gap, clamp(4px, 0.8vw, 9px));
  }
}

/* 2026-05-09 EOF final: sound button is a real footer tool. */
html body .bottom-bar .stage-sound-button {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  left: calc(50% + (var(--footer-restored-map-width, 620px) / 2) + var(--footer-right-gap, var(--footer-restored-gap, 12px))) !important;
  right: auto !important;
  transform: translateY(-50%) scale(1) !important;
}

html body .bottom-bar .stage-sound-button:hover,
html body .bottom-bar .stage-sound-button:focus-visible {
  transform: translateY(-50%) scale(var(--footer-button-hover-scale, 1.04)) !important;
}

/* 2026-05-09 EOF final: balanced footer tool layout around the map. */
:root {
  --footer-even-tool-size: var(--footer-restored-tool-size, clamp(58px, 4.2vw, 88px));
  --footer-even-gap: clamp(6px, 0.8vw, 12px);
  --footer-even-score-width: var(--footer-restored-score-width, clamp(124px, 10.8vw, 204px));
}

html body .bottom-bar .bottom-tool-button,
html body .bottom-bar .thesaurus-button,
html body .bottom-bar .stage-sound-button,
html body .bottom-bar .badge-button.backpack,
html body .bottom-bar .bottom-reset-button,
html body .bottom-bar .footer-score-board {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  transform-origin: center center !important;
  z-index: 240 !important;
  vertical-align: middle !important;
}

html body .bottom-bar .bottom-tool-button,
html body .bottom-bar .thesaurus-button,
html body .bottom-bar .stage-sound-button,
html body .bottom-bar .badge-button.backpack,
html body .bottom-bar .bottom-reset-button {
  width: var(--footer-even-tool-size) !important;
  height: var(--footer-even-tool-size) !important;
  min-width: var(--footer-even-tool-size) !important;
  min-height: var(--footer-even-tool-size) !important;
  max-width: var(--footer-even-tool-size) !important;
  max-height: var(--footer-even-tool-size) !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .bottom-bar .sign-button {
  left: calc(50% - (var(--footer-restored-map-width, 620px) / 2) - var(--footer-even-gap) - var(--footer-even-tool-size)) !important;
}

html body .bottom-bar .thesaurus-button {
  left: calc(50% - (var(--footer-restored-map-width, 620px) / 2) - (2 * var(--footer-even-gap)) - (2 * var(--footer-even-tool-size))) !important;
}

html body .bottom-bar .camera-button {
  left: calc(50% - (var(--footer-restored-map-width, 620px) / 2) - (3 * var(--footer-even-gap)) - (3 * var(--footer-even-tool-size))) !important;
}

html body .bottom-bar .stage-sound-button {
  left: calc(50% + (var(--footer-restored-map-width, 620px) / 2) + var(--footer-even-gap)) !important;
  background: transparent url("assets/btnmute.png") center center / 138% auto no-repeat !important;
}

html body .bottom-bar .badge-button.backpack {
  left: calc(50% + (var(--footer-restored-map-width, 620px) / 2) + (2 * var(--footer-even-gap)) + var(--footer-even-tool-size)) !important;
  background-position: center center !important;
  background-size: 138% auto !important;
}

html body .bottom-bar .bottom-reset-button {
  left: calc(50% + (var(--footer-restored-map-width, 620px) / 2) + (3 * var(--footer-even-gap)) + (2 * var(--footer-even-tool-size))) !important;
  background-size: 100% 100% !important;
}

html body .bottom-bar .footer-score-board {
  left: calc(50% + (var(--footer-restored-map-width, 620px) / 2) + (4 * var(--footer-even-gap)) + (3 * var(--footer-even-tool-size))) !important;
  width: var(--footer-even-score-width) !important;
  min-width: var(--footer-even-score-width) !important;
  max-width: var(--footer-even-score-width) !important;
}

html body .bottom-bar .bottom-tool-button:hover,
html body .bottom-bar .bottom-tool-button:focus-visible,
html body .bottom-bar .thesaurus-button:hover,
html body .bottom-bar .thesaurus-button:focus-visible,
html body .bottom-bar .stage-sound-button:hover,
html body .bottom-bar .stage-sound-button:focus-visible,
html body .bottom-bar .badge-button.backpack:hover,
html body .bottom-bar .badge-button.backpack:focus-visible,
html body .bottom-bar .bottom-reset-button:hover,
html body .bottom-bar .bottom-reset-button:focus-visible,
html body .bottom-bar .footer-score-board:hover,
html body .bottom-bar .footer-score-board:focus-visible {
  transform: translateY(-50%) scale(var(--footer-button-hover-scale, 1.04)) !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --footer-even-tool-size: var(--footer-restored-tool-size, clamp(46px, 5.8vw, 64px));
    --footer-even-gap: clamp(3px, 0.55vw, 7px);
    --footer-even-score-width: var(--footer-restored-score-width, clamp(104px, 14vw, 150px));
  }
}

/* 2026-05-09 EOF final: keep reset asset proportions in footer. */
html body .bottom-bar .bottom-reset-button {
  background: transparent url("assets/reset.png") center center / 138% auto no-repeat !important;
}

/* 2026-05-09 EOF final: evenly slot right footer tools across available space. */
:root {
  --footer-right-area-start: calc(50% + (var(--footer-restored-map-width, 620px) / 2) + clamp(12px, 1vw, 18px));
  --footer-right-area-width: min(
    calc(50vw - (var(--footer-restored-map-width, 620px) / 2) - clamp(20px, 2vw, 34px)),
    calc((3 * var(--footer-even-tool-size, 88px)) + var(--footer-even-score-width, 204px) + (3 * clamp(10px, 1.1vw, 18px)))
  );
  --footer-right-slot-gap: clamp(10px, 1.1vw, 18px);
  --footer-right-slot-tool: var(--footer-even-tool-size, var(--footer-restored-tool-size, 88px));
  --footer-right-slot-score: var(--footer-even-score-width, var(--footer-restored-score-width, 204px));
}

html body .bottom-bar .stage-sound-button,
html body .bottom-bar .badge-button.backpack,
html body .bottom-bar .bottom-reset-button {
  width: var(--footer-right-slot-tool) !important;
  height: var(--footer-right-slot-tool) !important;
  min-width: var(--footer-right-slot-tool) !important;
  min-height: var(--footer-right-slot-tool) !important;
  max-width: var(--footer-right-slot-tool) !important;
  max-height: var(--footer-right-slot-tool) !important;
}

html body .bottom-bar .stage-sound-button {
  left: var(--footer-right-area-start) !important;
  background-size: 172% auto !important;
}

html body .bottom-bar .badge-button.backpack {
  left: calc(var(--footer-right-area-start) + ((var(--footer-right-area-width) - var(--footer-right-slot-score)) * 0.34)) !important;
  background-size: 172% auto !important;
}

html body .bottom-bar .bottom-reset-button {
  left: calc(var(--footer-right-area-start) + ((var(--footer-right-area-width) - var(--footer-right-slot-score)) * 0.68)) !important;
  background-size: 138% auto !important;
}

html body .bottom-bar .footer-score-board {
  left: calc(var(--footer-right-area-start) + var(--footer-right-area-width) - var(--footer-right-slot-score)) !important;
  width: var(--footer-right-slot-score) !important;
  min-width: var(--footer-right-slot-score) !important;
  max-width: var(--footer-right-slot-score) !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --footer-right-area-start: calc(50% + (var(--footer-restored-map-width, 430px) / 2) + clamp(5px, 0.8vw, 9px));
    --footer-right-area-width: min(
      calc(50vw - (var(--footer-restored-map-width, 430px) / 2) - clamp(8px, 1vw, 14px)),
      calc((3 * var(--footer-even-tool-size, 64px)) + var(--footer-even-score-width, 150px) + (3 * clamp(5px, 0.8vw, 9px)))
    );
    --footer-right-slot-gap: clamp(5px, 0.8vw, 9px);
  }

  html body .bottom-bar .stage-sound-button {
    background-size: 168% auto !important;
  }

  html body .bottom-bar .badge-button.backpack {
    background-size: 168% auto !important;
  }
}

/* 2026-05-09 EOF final: responsive footer tool groups outside the map. */
:root {
  --footer-side-margin: clamp(6px, 0.8vw, 14px);
  --footer-tool-gap-balanced: clamp(4px, 0.65vw, 11px);
  --footer-side-width-balanced: calc((100vw - var(--footer-restored-map-width, 620px)) / 2 - var(--page-side-gap, 8px) - var(--footer-side-margin));
  --footer-score-balanced-width: min(var(--footer-restored-score-width, 204px), calc(var(--footer-side-width-balanced) * 0.38));
  --footer-tool-balanced-size: min(
    var(--footer-restored-tool-size, 88px),
    calc((var(--footer-side-width-balanced) - var(--footer-score-balanced-width) - (3 * var(--footer-tool-gap-balanced))) / 3)
  );
}

html body .bottom-bar .footer-tools {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--footer-tool-gap-balanced) !important;
  height: var(--footer-tool-balanced-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 260 !important;
  pointer-events: none !important;
}

html body .bottom-bar .footer-tools-left {
  left: max(
    var(--page-side-gap, 8px),
    calc(50% - (var(--footer-restored-map-width, 620px) / 2) - var(--footer-side-margin) - (3 * var(--footer-tool-balanced-size)) - (2 * var(--footer-tool-gap-balanced)))
  ) !important;
  right: auto !important;
}

html body .bottom-bar .footer-tools-right {
  left: calc(50% + (var(--footer-restored-map-width, 620px) / 2) + var(--footer-side-margin)) !important;
  right: auto !important;
}

html body .bottom-bar .footer-tools > .bottom-tool-button,
html body .bottom-bar .footer-tools > .thesaurus-button,
html body .bottom-bar .footer-tools > .stage-sound-button,
html body .bottom-bar .footer-tools > .badge-button.backpack,
html body .bottom-bar .footer-tools > .bottom-reset-button,
html body .bottom-bar .footer-tools > .footer-score-board {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}

html body .bottom-bar .footer-tools > .bottom-tool-button,
html body .bottom-bar .footer-tools > .thesaurus-button,
html body .bottom-bar .footer-tools > .stage-sound-button,
html body .bottom-bar .footer-tools > .badge-button.backpack,
html body .bottom-bar .footer-tools > .bottom-reset-button {
  width: var(--footer-tool-balanced-size) !important;
  height: var(--footer-tool-balanced-size) !important;
  min-width: var(--footer-tool-balanced-size) !important;
  min-height: var(--footer-tool-balanced-size) !important;
  max-width: var(--footer-tool-balanced-size) !important;
  max-height: var(--footer-tool-balanced-size) !important;
}

html body .bottom-bar .footer-tools > .footer-score-board {
  width: var(--footer-score-balanced-width) !important;
  min-width: var(--footer-score-balanced-width) !important;
  max-width: var(--footer-score-balanced-width) !important;
}

html body .bottom-bar .footer-tools > .stage-sound-button {
  background: transparent url("assets/btnmute.png") center center / 172% auto no-repeat !important;
}

html body .bottom-bar .footer-tools > .badge-button.backpack {
  background-position: center center !important;
  background-size: 172% auto !important;
}

html body .bottom-bar .footer-tools > .bottom-reset-button {
  background: transparent url("assets/reset.png") center center / 138% auto no-repeat !important;
}

html body .bottom-bar .footer-tools > .bottom-tool-button:hover,
html body .bottom-bar .footer-tools > .bottom-tool-button:focus-visible,
html body .bottom-bar .footer-tools > .thesaurus-button:hover,
html body .bottom-bar .footer-tools > .thesaurus-button:focus-visible,
html body .bottom-bar .footer-tools > .stage-sound-button:hover,
html body .bottom-bar .footer-tools > .stage-sound-button:focus-visible,
html body .bottom-bar .footer-tools > .badge-button.backpack:hover,
html body .bottom-bar .footer-tools > .badge-button.backpack:focus-visible,
html body .bottom-bar .footer-tools > .bottom-reset-button:hover,
html body .bottom-bar .footer-tools > .bottom-reset-button:focus-visible,
html body .bottom-bar .footer-tools > .footer-score-board:hover,
html body .bottom-bar .footer-tools > .footer-score-board:focus-visible {
  transform: scale(var(--footer-button-hover-scale, 1.04)) !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --footer-side-margin: clamp(3px, 0.6vw, 7px);
    --footer-tool-gap-balanced: clamp(2px, 0.45vw, 5px);
    --footer-score-balanced-width: min(var(--footer-restored-score-width, 150px), calc(var(--footer-side-width-balanced) * 0.38));
  }

  html body .bottom-bar .footer-tools > .stage-sound-button,
  html body .bottom-bar .footer-tools > .badge-button.backpack {
    background-size: 168% auto !important;
  }
}

/* 2026-05-09 EOF final: keep footer map visually large through high zoom steps. */
@media (max-width: 900px), (max-height: 620px) {
  :root {
    --footer-restored-map-width: clamp(330px, 47vw, 430px);
    --footer-restored-map-height: clamp(68px, 9.8vh, 88px);
    --footer-node-size: clamp(28px, calc(var(--footer-restored-map-width) * 0.08), 38px);
    --footer-node-icon-size: clamp(20px, calc(var(--footer-restored-map-width) * 0.055), 30px);
    --footer-side-margin: clamp(3px, 0.45vw, 6px);
    --footer-tool-gap-balanced: clamp(2px, 0.35vw, 4px);
  }

  html body .bottom-bar .stage-map {
    width: var(--footer-restored-map-width) !important;
    max-width: var(--footer-restored-map-width) !important;
    height: var(--footer-restored-map-height) !important;
    min-height: var(--footer-restored-map-height) !important;
  }
}

@media (max-width: 760px), (max-height: 500px) {
  :root {
    --footer-restored-map-width: clamp(300px, 45vw, 370px);
    --footer-restored-map-height: clamp(60px, 9.3vh, 76px);
  }
}

/* 2026-05-09 EOF final: stronger footer map hover and compact fact bubbles. */
:root {
  --footer-map-hover-scale: 1.055;
  --fact-strip-pad-y: clamp(4px, 0.46vw, 7px);
  --fact-strip-pad-x: clamp(8px, 0.85vw, 12px);
  --fact-strip-close-reserve: clamp(28px, 3vw, 36px);
  --fact-strip-icon-size: clamp(27px, 2.45vw, 36px);
  --fact-copy-size: clamp(0.56rem, min(0.7vw, 1.18vh), 0.78rem);
  --fact-label-size: clamp(0.48rem, min(0.56vw, 0.92vh), 0.62rem);
  --fact-line-height: 1.08;
  --fact-line-clamp: 4;
}

html body .bottom-bar .stage-map {
  transform-origin: center center !important;
  transition: transform 170ms ease, filter 170ms ease !important;
  will-change: transform !important;
}

html body .bottom-bar .stage-map:hover,
html body .bottom-bar .stage-map:focus-within {
  transform: translate(-50%, -50%) scale(var(--footer-map-hover-scale)) !important;
  filter: drop-shadow(0 8px 14px rgba(38, 48, 22, 0.22)) !important;
}

html body .fact-strip,
html body .fact-strip.fact-bottom,
html body[data-stage="forest"] .fact-strip,
html body[data-stage="forest"] .fact-strip.fact-bottom {
  grid-template-columns: var(--fact-strip-icon-size) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: clamp(5px, 0.52vw, 8px) !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: min(20vh, calc(var(--board-height) * 0.24)) !important;
  padding: var(--fact-strip-pad-y) calc(var(--fact-strip-pad-x) + var(--fact-strip-close-reserve)) var(--fact-strip-pad-y) var(--fact-strip-pad-x) !important;
  box-sizing: border-box !important;
}

html body .fact-orbit {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: var(--fact-strip-icon-size) !important;
  height: var(--fact-strip-icon-size) !important;
  font-size: calc(var(--fact-strip-icon-size) * 0.46) !important;
  border-width: clamp(2px, 0.24vw, 3px) !important;
  box-shadow: 0 0 0 clamp(2px, 0.34vw, 5px) rgba(95, 127, 49, 0.08) !important;
}

html body .fact-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-self: center !important;
  gap: clamp(1px, 0.18vh, 3px) !important;
  min-height: 0 !important;
}

html body .fact-copy small {
  margin: 0 !important;
  font-size: var(--fact-label-size) !important;
  line-height: 1 !important;
}

html body .fact-copy p {
  margin: 0 !important;
  font-size: var(--fact-copy-size) !important;
  line-height: var(--fact-line-height) !important;
  -webkit-line-clamp: var(--fact-line-clamp) !important;
}

html body .fact-dots {
  display: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  margin: 0 !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --board-fact-width: min(clamp(210px, 27vw, 310px), calc(100vw - var(--board-bubble-left) - var(--board-right-reserve) - 18px));
    --fact-strip-pad-y: clamp(3px, 0.48vh, 5px);
    --fact-strip-pad-x: clamp(6px, 0.7vw, 9px);
    --fact-strip-close-reserve: 28px;
    --fact-strip-icon-size: clamp(23px, 5.5vh, 30px);
    --fact-copy-size: clamp(0.49rem, min(0.78vw, 1.05vh), 0.65rem);
    --fact-label-size: clamp(0.42rem, min(0.64vw, 0.82vh), 0.55rem);
    --fact-line-height: 1.04;
    --fact-line-clamp: 3;
  }

  html body .fact-strip-close {
    width: clamp(18px, 4.2vh, 22px) !important;
    height: clamp(18px, 4.2vh, 22px) !important;
    min-width: clamp(18px, 4.2vh, 22px) !important;
    min-height: clamp(18px, 4.2vh, 22px) !important;
    top: 4px !important;
    right: 6px !important;
    font-size: clamp(0.58rem, 1.55vh, 0.72rem) !important;
  }
}

@media (max-width: 820px), (max-height: 470px) {
  :root {
    --board-fact-width: min(clamp(198px, 28vw, 270px), calc(100vw - var(--board-bubble-left) - var(--board-right-reserve) - 14px));
    --fact-strip-pad-y: 3px;
    --fact-strip-pad-x: 6px;
    --fact-strip-close-reserve: 26px;
    --fact-strip-icon-size: clamp(21px, 5.2vh, 26px);
    --fact-copy-size: clamp(0.46rem, min(0.86vw, 0.96vh), 0.58rem);
    --fact-label-size: clamp(0.39rem, min(0.7vw, 0.75vh), 0.49rem);
    --fact-line-height: 1.02;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .bottom-bar .stage-map {
    transition: none !important;
  }
}

/* 2026-05-09 EOF final: expanded board keeps footer below as a scroll target. */
:root {
  --expanded-board-height: calc(100dvh - var(--topbar-height) - var(--app-gap));
}

html body.board-expanded {
  min-height: calc(var(--topbar-height) + var(--app-gap) + var(--expanded-board-height) + var(--app-gap) + var(--footer-height) + 8px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body.board-expanded .app {
  height: auto !important;
  min-height: calc(var(--topbar-height) + var(--app-gap) + var(--expanded-board-height) + var(--app-gap) + var(--footer-height) + 8px) !important;
  grid-template-rows: var(--topbar-height) var(--expanded-board-height) var(--footer-height) !important;
  gap: var(--app-gap) !important;
  padding: 0 var(--page-side-gap) 8px !important;
  overflow: visible !important;
}

html body.board-expanded .play-area {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: calc(100vw - (2 * var(--page-side-gap))) !important;
  max-width: calc(100vw - (2 * var(--page-side-gap))) !important;
  height: var(--expanded-board-height) !important;
  min-height: var(--expanded-board-height) !important;
  max-height: var(--expanded-board-height) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: visible !important;
  z-index: 115 !important;
}

html body.board-expanded .play-area > .stage-view,
html body.board-expanded .play-area > .stage-view.active {
  width: 100% !important;
  height: var(--expanded-board-height) !important;
  min-height: var(--expanded-board-height) !important;
  max-height: var(--expanded-board-height) !important;
}

html body.board-expanded .bottom-bar {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  grid-row: 3 !important;
  width: calc(100vw - (2 * var(--page-side-gap))) !important;
  max-width: calc(100vw - (2 * var(--page-side-gap))) !important;
  height: var(--footer-height) !important;
  min-height: var(--footer-height) !important;
  max-height: var(--footer-height) !important;
  margin: 0 auto !important;
  overflow: visible !important;
  z-index: 260 !important;
}

html body.board-expanded .bottom-bar .footer-tools,
html body.board-expanded .bottom-bar .stage-map {
  visibility: visible !important;
  pointer-events: auto !important;
}

html body.board-expanded .bottom-bar .footer-tools {
  display: flex !important;
}

html body.board-expanded .bottom-bar .stage-map {
  display: block !important;
}

html body.board-expanded .bottom-bar .stage-sound-button,
html body.board-expanded .bottom-bar .bottom-tool-button,
html body.board-expanded .bottom-bar .thesaurus-button,
html body.board-expanded .bottom-bar .badge-button.backpack,
html body.board-expanded .bottom-bar .bottom-reset-button {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body.board-expanded .bottom-bar .footer-score-board {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body.board-expanded .guide {
  display: grid !important;
  visibility: visible !important;
  position: absolute !important;
  left: clamp(8px, 1vw, 16px) !important;
  bottom: 0 !important;
  width: clamp(190px, 17vw, 290px) !important;
  height: var(--footer-height) !important;
  min-height: var(--footer-height) !important;
  pointer-events: none !important;
  z-index: 320 !important;
}

html body.board-expanded .guide-avatar {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  left: clamp(-72px, -4.8vw, -42px) !important;
  bottom: -6px !important;
  width: clamp(190px, 15vw, 270px) !important;
  height: clamp(275px, 21vw, 390px) !important;
  z-index: 321 !important;
}

html body.board-expanded .guide .speech:not(.speech-hidden) {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 322 !important;
}

html body.board-expanded .play-area > .sidebar-round-hud {
  display: grid !important;
  visibility: visible !important;
  pointer-events: none !important;
  top: clamp(8px, 1.3vh, 14px) !important;
  right: clamp(8px, 1vw, 16px) !important;
  z-index: 1005 !important;
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --expanded-board-height: calc(100dvh - var(--topbar-height) - var(--app-gap));
  }

  html body.board-expanded .guide {
    left: 4px !important;
    width: clamp(150px, 22vw, 210px) !important;
  }

  html body.board-expanded .guide-avatar {
    left: clamp(-52px, -6vw, -28px) !important;
    width: clamp(145px, 20vw, 190px) !important;
    height: clamp(205px, 33vh, 280px) !important;
  }
}

/* 2026-05-09 EOF final: expanded board scrolls on the document root. */
html.board-expanded-root,
html.board-expanded-root body {
  height: auto !important;
  min-height: calc(var(--topbar-height) + var(--app-gap) + var(--expanded-board-height) + var(--app-gap) + var(--footer-height) + 8px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

html.board-expanded-root body.board-expanded .app {
  height: auto !important;
  min-height: calc(var(--topbar-height) + var(--app-gap) + var(--expanded-board-height) + var(--app-gap) + var(--footer-height) + 8px) !important;
  grid-template-rows: var(--topbar-height) var(--expanded-board-height) var(--footer-height) !important;
  gap: var(--app-gap) !important;
  overflow: visible !important;
}

html.board-expanded-root body.board-expanded .play-area {
  position: relative !important;
  inset: auto !important;
  grid-row: 2 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  width: calc(100vw - (2 * var(--page-side-gap))) !important;
  max-width: calc(100vw - (2 * var(--page-side-gap))) !important;
  height: var(--expanded-board-height) !important;
  min-height: var(--expanded-board-height) !important;
  max-height: var(--expanded-board-height) !important;
  margin: 0 auto !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}

html.board-expanded-root body.board-expanded .play-area > .task-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.board-expanded-root body.board-expanded .play-area > .stage-view,
html.board-expanded-root body.board-expanded .play-area > .stage-view.active {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

html.board-expanded-root body.board-expanded .bottom-bar {
  grid-row: 3 !important;
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  inset: auto !important;
  width: calc(100vw - (2 * var(--page-side-gap))) !important;
  max-width: calc(100vw - (2 * var(--page-side-gap))) !important;
  height: var(--footer-height) !important;
  min-height: var(--footer-height) !important;
  max-height: var(--footer-height) !important;
  margin: 0 auto !important;
  overflow: visible !important;
  transform: none !important;
}

html.board-expanded-root body.board-expanded .guide {
  display: grid !important;
  visibility: visible !important;
  position: absolute !important;
  left: clamp(8px, 1vw, 16px) !important;
  bottom: 0 !important;
  pointer-events: none !important;
}

html.board-expanded-root body.board-expanded .guide-avatar {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 2026-05-09 EOF final: styled document scrollbar for expanded board. */
html.board-expanded-root {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(92, 57, 24, 0.86) rgba(255, 248, 224, 0.36) !important;
}

html.board-expanded-root::-webkit-scrollbar,
html.board-expanded-root body::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}

html.board-expanded-root::-webkit-scrollbar-track,
html.board-expanded-root body::-webkit-scrollbar-track {
  background:
    linear-gradient(180deg, rgba(255, 249, 226, 0.72), rgba(199, 186, 134, 0.58)) !important;
  border-left: 1px solid rgba(74, 57, 29, 0.18) !important;
  box-shadow: inset 2px 0 5px rgba(56, 43, 22, 0.08) !important;
}

html.board-expanded-root::-webkit-scrollbar-thumb,
html.board-expanded-root body::-webkit-scrollbar-thumb {
  min-height: 42px !important;
  border: 3px solid rgba(255, 248, 224, 0.78) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, #9b6a2e, #5d381b) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 182, 0.5),
    0 1px 4px rgba(32, 24, 12, 0.22) !important;
}

html.board-expanded-root::-webkit-scrollbar-thumb:hover,
html.board-expanded-root body::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, #ad7a39, #70421d) !important;
}

/* 2026-05-09 EOF final: smaller, tighter footer map arrows. */
:root {
  --footer-map-arrow-width: clamp(44px, calc(var(--footer-restored-map-width, 620px) * 0.09), 56px);
  --footer-map-arrow-height: clamp(30px, calc(var(--footer-restored-map-width, 620px) * 0.062), 38px);
  --footer-map-arrow-inset: 17.4%;
  --footer-map-arrow-hover-scale: 1.035;
}

html body .bottom-bar .map-arrow {
  top: 56% !important;
  width: var(--footer-map-arrow-width) !important;
  height: var(--footer-map-arrow-height) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: var(--footer-map-arrow-width) !important;
  max-height: var(--footer-map-arrow-height) !important;
  background-size: contain !important;
  filter: drop-shadow(0 3px 5px rgba(31, 38, 17, 0.16)) !important;
  opacity: 0.86 !important;
}

html body .bottom-bar .map-arrow-left {
  left: var(--footer-map-arrow-inset) !important;
  right: auto !important;
  transform: translateY(-50%) scale(1) !important;
}

html body .bottom-bar .map-arrow-right {
  right: var(--footer-map-arrow-inset) !important;
  left: auto !important;
  transform: translateY(-50%) scaleX(-1) scale(1) !important;
}

html body .bottom-bar .map-arrow-left:hover,
html body .bottom-bar .map-arrow-left:focus-visible {
  transform: translateY(-50%) scale(var(--footer-map-arrow-hover-scale)) !important;
}

html body .bottom-bar .map-arrow-right:hover,
html body .bottom-bar .map-arrow-right:focus-visible {
  transform: translateY(-50%) scaleX(-1) scale(var(--footer-map-arrow-hover-scale)) !important;
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --footer-map-arrow-width: clamp(29px, calc(var(--footer-restored-map-width, 360px) * 0.09), 34px);
    --footer-map-arrow-height: clamp(20px, calc(var(--footer-restored-map-width, 360px) * 0.06), 24px);
    --footer-map-arrow-inset: 15.8%;
  }
}

@media (max-width: 740px), (max-height: 430px) {
  :root {
    --footer-map-arrow-width: clamp(27px, calc(var(--footer-restored-map-width, 340px) * 0.086), 31px);
    --footer-map-arrow-height: clamp(18px, calc(var(--footer-restored-map-width, 340px) * 0.056), 22px);
    --footer-map-arrow-inset: 16.1%;
  }
}

/* 2026-05-09 EOF final: compact right panel content at high zoom. */
@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --right-box-content-side: clamp(35px, 16.2%, 48px);
    --right-box-scroll-right-extra: clamp(7px, 1vw, 10px);
    --right-box-list-font: clamp(7px, 1.1vw, 9px);
    --right-box-icon-size-zoom: clamp(18px, 4.6vh, 24px);
    --right-box-memo-thumb-height: clamp(22px, 5.5vh, 31px);
  }

  html body .task-panel > .task-scroll,
  html body[data-stage] .task-panel > .task-scroll {
    left: calc(var(--right-box-content-side) + var(--right-box-left-overlap) + 1px) !important;
    right: calc(var(--right-box-content-side) - var(--right-box-right-overlap) + var(--right-box-scroll-right-extra)) !important;
    padding-right: clamp(5px, 0.8vw, 8px) !important;
  }

  html body[data-stage="mountains"] .task-scroll .memo-guide-grid,
  html body[data-stage="mountains"] .task-panel .task-scroll .stage-side-panel.active > .memo-guide-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(3px, 0.52vh, 5px) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body[data-stage="mountains"] .task-scroll .memo-guide-item {
    min-height: clamp(48px, 12.8vh, 60px) !important;
    padding: clamp(2px, 0.45vh, 4px) !important;
    border-radius: 8px !important;
    display: grid !important;
    grid-template-rows: var(--right-box-memo-thumb-height) minmax(0, auto) !important;
    align-content: start !important;
    gap: 2px !important;
  }

  html body[data-stage="mountains"] .task-scroll .memo-guide-item > span {
    width: 100% !important;
    height: var(--right-box-memo-thumb-height) !important;
    min-height: 0 !important;
    border-radius: 6px !important;
    background-size: cover !important;
  }

  html body[data-stage="mountains"] .task-scroll .memo-guide-item small {
    margin: 0 !important;
    font-size: clamp(0.38rem, 1vw, 0.48rem) !important;
    line-height: 0.96 !important;
    overflow-wrap: anywhere !important;
  }

  html body[data-stage="mountains"] .task-scroll .memo-guide-item b {
    top: 2px !important;
    right: 2px !important;
    min-width: clamp(13px, 3.2vh, 16px) !important;
    height: clamp(13px, 3.2vh, 16px) !important;
    font-size: clamp(0.42rem, 1.35vh, 0.54rem) !important;
    line-height: 1 !important;
  }

  html body .task-scroll .species-list .mini-icon,
  html body .task-scroll .species-list .mini-icon .animal-icon,
  html body .task-scroll .plant-thumb {
    width: var(--right-box-icon-size-zoom) !important;
    height: var(--right-box-icon-size-zoom) !important;
    min-width: var(--right-box-icon-size-zoom) !important;
    flex: 0 0 var(--right-box-icon-size-zoom) !important;
  }

  html body[data-stage="forest"] .task-panel .task-scroll .institution-side-list button[data-institution] > span {
    width: var(--right-box-icon-size-zoom) !important;
    height: var(--right-box-icon-size-zoom) !important;
    min-width: var(--right-box-icon-size-zoom) !important;
    flex: 0 0 var(--right-box-icon-size-zoom) !important;
    background-size: contain !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --right-box-content-side: clamp(34px, 16.8%, 42px);
    --right-box-scroll-right-extra: 8px;
    --right-box-list-font: clamp(6.5px, 1.35vw, 8.4px);
    --right-box-icon-size-zoom: clamp(16px, 4.4vh, 20px);
    --right-box-memo-thumb-height: clamp(19px, 5.1vh, 23px);
  }

  html body[data-stage="mountains"] .task-scroll .memo-guide-item {
    min-height: clamp(43px, 11.8vh, 51px) !important;
    padding: 2px !important;
  }

  html body[data-stage="mountains"] .task-scroll .memo-guide-item small {
    font-size: clamp(0.34rem, 1.28vw, 0.42rem) !important;
    line-height: 0.94 !important;
  }
}

/* 2026-05-09 EOF final: touch horizontal pan for forced portrait desktop view. */
:root {
  --portrait-desktop-pan-width: max(1060px, 118dvw);
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (min-width: 901px) {
  html.portrait-pan-mode,
  html.portrait-pan-mode body {
    width: auto !important;
    min-width: var(--portrait-desktop-pan-width) !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html.portrait-pan-mode .app {
    width: var(--portrait-desktop-pan-width) !important;
    min-width: var(--portrait-desktop-pan-width) !important;
    max-width: none !important;
    transform: translateX(calc(-1 * var(--portrait-pan-offset, 0px))) !important;
    transform-origin: left top !important;
    will-change: transform !important;
  }

  html.portrait-pan-mode .topbar,
  html.portrait-pan-mode .bottom-bar,
  html.portrait-pan-mode .play-area {
    width: calc(var(--portrait-desktop-pan-width) - (2 * var(--page-side-gap, 10px))) !important;
    max-width: none !important;
  }

  html.portrait-pan-mode .play-area {
    touch-action: pan-x pan-y !important;
  }
}

html.portrait-pan-mode,
html.portrait-pan-mode body {
  width: auto !important;
  min-width: var(--portrait-desktop-pan-width) !important;
  max-width: none !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  touch-action: pan-x pan-y !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

html.portrait-pan-mode .app {
  width: var(--portrait-desktop-pan-width) !important;
  min-width: var(--portrait-desktop-pan-width) !important;
  max-width: none !important;
  transform: translateX(calc(-1 * var(--portrait-pan-offset, 0px))) !important;
  transform-origin: left top !important;
  will-change: transform !important;
}

html.portrait-pan-mode .topbar,
html.portrait-pan-mode .bottom-bar,
html.portrait-pan-mode .play-area {
  width: calc(var(--portrait-desktop-pan-width) - (2 * var(--page-side-gap, 10px))) !important;
  max-width: none !important;
}

html.portrait-pan-mode .play-area {
  touch-action: pan-x pan-y !important;
}

/* 2026-05-09 EOF final: right panel title and phone-zoom list polish. */
html body .task-scroll > h2 {
  display: grid !important;
  grid-template-columns: clamp(9px, 1.45vh, 13px) minmax(0, 1fr) clamp(9px, 1.45vh, 13px) !important;
  align-items: center !important;
  column-gap: clamp(2px, 0.28vw, 4px) !important;
  width: 100% !important;
  padding: 0 !important;
  color: #315f24 !important;
  font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", "Trebuchet MS", cursive !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-wrap: balance !important;
  overflow-wrap: normal !important;
  text-shadow: 0 1px 0 rgba(255, 246, 212, 0.9), 0 2px 6px rgba(72, 104, 38, 0.18) !important;
}

html body .task-scroll > h2::before {
  content: "" !important;
  grid-column: 1 !important;
  width: clamp(9px, 1.45vh, 13px) !important;
  height: clamp(9px, 1.45vh, 13px) !important;
  justify-self: end !important;
  background: url("assets/decoy-leaf.png") center / contain no-repeat !important;
  transform: rotate(-17deg) !important;
  opacity: 0.92 !important;
}

html body .task-scroll > h2::after {
  grid-column: 3 !important;
  position: static !important;
  width: clamp(9px, 1.45vh, 13px) !important;
  height: clamp(9px, 1.45vh, 13px) !important;
  display: grid !important;
  place-items: center !important;
  justify-self: start !important;
  color: #4f7c25 !important;
  font-family: Arial, "Segoe UI", sans-serif !important;
  font-size: clamp(11px, 1.9vh, 16px) !important;
  line-height: 1 !important;
  transform: none !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --right-box-scroll-top: calc(var(--right-box-content-start) + 6px);
    --right-box-list-font: clamp(6.1px, 0.98vw, 7.6px);
    --right-box-icon-size-zoom: clamp(13px, 3.35vh, 17px);
  }

  html body .task-scroll .species-list,
  html body .task-scroll .plant-guide,
  html body .task-scroll .institution-side-list {
    gap: clamp(2px, 0.38vh, 5px) !important;
  }

  html body .task-scroll .species-list li,
  html body .task-scroll .plant-guide-item,
  html body .task-scroll .institution-side-list button {
    gap: clamp(3px, 0.42vw, 5px) !important;
    padding-top: clamp(1px, 0.28vh, 3px) !important;
    padding-bottom: clamp(1px, 0.28vh, 3px) !important;
  }

  html body .task-scroll .species-list li,
  html body .task-scroll .plant-guide-item,
  html body .task-scroll .memo-guide-item,
  html body .task-scroll .institution-side-list button,
  html body .task-scroll .species-list li > span:not(.mini-icon):not(.check),
  html body .task-scroll .plant-guide strong,
  html body .task-scroll .plant-guide b,
  html body .task-scroll .memo-guide-item span,
  html body .task-scroll .memo-guide-item small,
  html body .task-scroll .memo-guide-item b,
  html body .task-scroll .institution-side-list button span,
  html body .task-scroll .institution-side-list button small {
    font-size: var(--right-box-list-font) !important;
    line-height: 1.03 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  html body .task-scroll .species-list .mini-icon,
  html body .task-scroll .species-list .mini-icon .animal-icon,
  html body .task-scroll .plant-thumb {
    width: var(--right-box-icon-size-zoom) !important;
    height: var(--right-box-icon-size-zoom) !important;
    min-width: var(--right-box-icon-size-zoom) !important;
    flex: 0 0 var(--right-box-icon-size-zoom) !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --right-box-scroll-top: calc(var(--right-box-content-start) + 7px);
    --right-box-list-font: clamp(5.8px, 1.05vw, 7px);
    --right-box-icon-size-zoom: clamp(12px, 3.1vh, 16px);
  }

  html body .task-scroll > h2 {
    grid-template-columns: clamp(11px, 2.4vh, 15px) minmax(0, 1fr) clamp(11px, 2.4vh, 15px) !important;
    column-gap: 3px !important;
    line-height: 1.08 !important;
  }

  html body .task-scroll > h2::before,
  html body .task-scroll > h2::after {
    width: clamp(11px, 2.4vh, 15px) !important;
    height: clamp(11px, 2.4vh, 15px) !important;
  }

  html body .task-scroll > h2::after {
    font-size: clamp(10px, 2.2vh, 13px) !important;
  }
}

/* 2026-05-09 EOF final: stronger right-panel compacting for active stage lists. */
@media (max-width: 1200px), (max-height: 700px) {
  html body[data-stage="dam"] .task-panel .task-scroll .stage-side-panel.active > .species-list li,
  html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-guide-item,
  html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button {
    font-size: var(--right-box-list-font) !important;
    line-height: 1.03 !important;
    gap: clamp(3px, 0.42vw, 5px) !important;
  }

  html body[data-stage="dam"] .task-panel .task-scroll .stage-side-panel.active > .species-list li > span:not(.mini-icon):not(.check),
  html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-guide-item strong,
  html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-guide-item b,
  html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button > span,
  html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button small {
    font-size: var(--right-box-list-font) !important;
    line-height: 1.03 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  html body[data-stage="dam"] .task-panel .task-scroll .stage-side-panel.active > .species-list .mini-icon,
  html body[data-stage="dam"] .task-panel .task-scroll .stage-side-panel.active > .species-list .mini-icon .animal-icon,
  html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-thumb {
    width: var(--right-box-icon-size-zoom) !important;
    height: var(--right-box-icon-size-zoom) !important;
    min-width: var(--right-box-icon-size-zoom) !important;
    min-height: var(--right-box-icon-size-zoom) !important;
    flex: 0 0 var(--right-box-icon-size-zoom) !important;
  }

  html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .weed-thumb {
    font-size: calc(var(--right-box-list-font) * 1.18) !important;
    line-height: 1 !important;
  }

  html body .task-panel > .task-scroll,
  html body[data-stage] .task-panel > .task-scroll {
    padding-top: clamp(2px, 0.62vh, 4px) !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --right-box-icon-size-zoom: clamp(13px, 3.5vh, 16px);
  }
}

/* 2026-05-09 EOF final: responsive assigned statements on the forest board. */
:root {
  --forest-assigned-list-top: clamp(106px, 11.2vh, 122px);
  --forest-assigned-list-width: clamp(118px, 8.2vw, 176px);
  --forest-assigned-list-max-height: clamp(58px, 12vh, 112px);
  --forest-assigned-list-gap: clamp(2px, 0.25vw, 4px);
  --forest-assigned-chip-font: clamp(0.48rem, min(0.48vw, 0.9vh), 0.64rem);
  --forest-assigned-chip-line: 1.03;
  --forest-assigned-chip-pad-y: clamp(2px, 0.22vw, 4px);
  --forest-assigned-chip-pad-x: clamp(4px, 0.42vw, 7px);
  --forest-assigned-chip-max-height: clamp(22px, 4.8vh, 38px);
}

html body[data-stage="forest"] .institution-icons button > .forest-assigned-list {
  position: absolute !important;
  left: 50% !important;
  top: var(--forest-assigned-list-top) !important;
  transform: translateX(-50%) !important;
  width: var(--forest-assigned-list-width) !important;
  min-width: 0 !important;
  max-width: var(--forest-assigned-list-width) !important;
  max-height: var(--forest-assigned-list-max-height) !important;
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-rows: max-content !important;
  gap: var(--forest-assigned-list-gap) !important;
  align-content: start !important;
  justify-items: stretch !important;
  padding: 0 3px 0 0 !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  pointer-events: auto !important;
  z-index: 14 !important;
}

html body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement,
html body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement.assigned {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: var(--forest-assigned-chip-max-height) !important;
  margin: 0 !important;
  padding: var(--forest-assigned-chip-pad-y) var(--forest-assigned-chip-pad-x) !important;
  border-radius: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  color: #2e3c1f !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 1px 4px rgba(20, 32, 14, 0.14) !important;
  font-size: var(--forest-assigned-chip-font) !important;
  line-height: var(--forest-assigned-chip-line) !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  transform: none !important;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease !important;
}

html body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement:hover,
html body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement:focus-visible {
  transform: scale(1.035) !important;
  font-size: var(--forest-assigned-chip-font) !important;
  line-height: var(--forest-assigned-chip-line) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 3px 8px rgba(20, 32, 14, 0.2) !important;
  z-index: 16 !important;
}

html body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement.correct {
  background: rgba(220, 246, 194, 0.92) !important;
}

html body[data-stage="forest"] .institution-icons button > .forest-assigned-list .forest-statement.wrong {
  background: rgba(255, 222, 205, 0.94) !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --forest-assigned-list-top: clamp(58px, 13.2vh, 76px);
    --forest-assigned-list-width: clamp(68px, 10vw, 94px);
    --forest-assigned-list-max-height: clamp(34px, 12vh, 56px);
    --forest-assigned-list-gap: 2px;
    --forest-assigned-chip-font: clamp(0.34rem, 0.76vw, 0.48rem);
    --forest-assigned-chip-line: 1;
    --forest-assigned-chip-pad-y: 2px;
    --forest-assigned-chip-pad-x: 4px;
    --forest-assigned-chip-max-height: clamp(18px, 5vh, 24px);
  }

  html body[data-stage="forest"] .institution-icons button > .forest-assigned-list {
    padding-right: 2px !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --forest-assigned-list-top: clamp(52px, 13.6vh, 64px);
    --forest-assigned-list-width: clamp(58px, 8.6vw, 70px);
    --forest-assigned-list-max-height: clamp(28px, 11vh, 46px);
    --forest-assigned-chip-font: clamp(0.31rem, 0.82vw, 0.43rem);
    --forest-assigned-chip-max-height: clamp(17px, 5vh, 22px);
  }
}

/* 2026-05-09 EOF final: responsive forest assignment count badge. */
:root {
  --forest-count-badge-size: clamp(18px, 1.65vw, 26px);
  --forest-count-badge-font: clamp(0.54rem, min(0.68vw, 1.15vh), 0.78rem);
  --forest-count-badge-top: calc(-1 * clamp(5px, 0.62vw, 9px));
  --forest-count-badge-right: calc(-1 * clamp(2px, 0.32vw, 6px));
}

html body[data-stage="forest"] .institution-icons button.has-assignment::after {
  content: attr(data-count) !important;
  position: absolute !important;
  top: var(--forest-count-badge-top) !important;
  right: var(--forest-count-badge-right) !important;
  width: var(--forest-count-badge-size) !important;
  height: var(--forest-count-badge-size) !important;
  min-width: var(--forest-count-badge-size) !important;
  min-height: var(--forest-count-badge-size) !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  background: #f2c33c !important;
  color: #26331f !important;
  font-family: Arial, "Segoe UI", sans-serif !important;
  font-size: var(--forest-count-badge-font) !important;
  font-weight: 1000 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
  box-shadow: 0 1px 4px rgba(20, 32, 14, 0.22) !important;
  z-index: 18 !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --forest-count-badge-size: clamp(10px, 2.85vh, 13px);
    --forest-count-badge-font: clamp(0.32rem, 1.18vh, 0.44rem);
    --forest-count-badge-top: calc(-1 * clamp(2px, 0.7vh, 4px));
    --forest-count-badge-right: calc(-1 * clamp(1px, 0.28vw, 3px));
  }
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --forest-count-badge-size: clamp(8px, 2.45vh, 11px);
    --forest-count-badge-font: clamp(0.28rem, 1.02vh, 0.38rem);
    --forest-count-badge-top: -2px;
    --forest-count-badge-right: -1px;
  }
}

/* 2026-05-09 EOF final: calmer, consistent right-panel title styling. */
:root {
  --right-title-font-size: clamp(0.64rem, min(0.9vw, 1.55vh), 0.86rem);
  --right-title-icon-size: clamp(12px, min(1.35vw, 2.4vh), 16px);
  --right-title-color: #4a3b23;
  --right-title-accent: #6c552b;
}

html body .task-scroll > h2 {
  grid-template-columns: var(--right-title-icon-size) minmax(0, 1fr) var(--right-title-icon-size) !important;
  column-gap: clamp(4px, 0.45vw, 7px) !important;
  color: var(--right-title-color) !important;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
  font-size: var(--right-title-font-size) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 247, 219, 0.72) !important;
  overflow-wrap: normal !important;
}

html body .task-scroll > h2::before {
  width: var(--right-title-icon-size) !important;
  height: var(--right-title-icon-size) !important;
  opacity: 0.72 !important;
  filter: sepia(0.45) saturate(0.8) brightness(0.82) !important;
  transform: rotate(-12deg) !important;
}

html body .task-scroll > h2::after {
  width: var(--right-title-icon-size) !important;
  height: var(--right-title-icon-size) !important;
  color: var(--right-title-accent) !important;
  font-family: Arial, "Segoe UI", sans-serif !important;
  font-size: calc(var(--right-title-font-size) * 1.08) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .task-scroll > h2 {
    grid-template-columns: var(--right-title-icon-size) minmax(0, 1fr) var(--right-title-icon-size) !important;
    column-gap: clamp(4px, 0.45vw, 7px) !important;
    color: var(--right-title-color) !important;
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
    font-size: var(--right-title-font-size) !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  html body .task-scroll > h2 {
    grid-template-columns: var(--right-title-icon-size) minmax(0, 1fr) var(--right-title-icon-size) !important;
    color: var(--right-title-color) !important;
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
    font-size: var(--right-title-font-size) !important;
    line-height: 1.1 !important;
  }
}

/* 2026-05-09 EOF final: clear scalable fullscreen toggle icon. */
:root {
  --board-fullscreen-button-size: clamp(42px, min(4.4vw, 7vh), 58px);
  --board-fullscreen-icon-size: calc(var(--board-fullscreen-button-size) * 0.58);
  --board-fullscreen-icon-color: #285b7c;
}

html body .board-fullscreen-button,
html body.board-expanded .board-fullscreen-button {
  width: var(--board-fullscreen-button-size) !important;
  height: var(--board-fullscreen-button-size) !important;
  min-width: var(--board-fullscreen-button-size) !important;
  min-height: var(--board-fullscreen-button-size) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: clamp(10px, 1vw, 14px) !important;
  color: var(--board-fullscreen-icon-color) !important;
  background: rgba(255, 248, 224, 0.82) !important;
  box-shadow:
    0 4px 10px rgba(33, 43, 19, 0.18),
    inset 0 0 0 2px rgba(40, 91, 124, 0.28) !important;
}

html body .board-fullscreen-button::before,
html body.board-expanded .board-fullscreen-button::before {
  content: "" !important;
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: var(--board-fullscreen-icon-size) !important;
  height: var(--board-fullscreen-icon-size) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%209V4h5v2.4H6.4V9H4Zm10.9-5H20v5h-2.4V6.4h-2.7V4ZM4%2015h2.4v2.6H9V20H4v-5Zm13.6%200H20v5h-5.1v-2.4h2.7V15Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4%209V4h5v2.4H6.4V9H4Zm10.9-5H20v5h-2.4V6.4h-2.7V4ZM4%2015h2.4v2.6H9V20H4v-5Zm13.6%200H20v5h-5.1v-2.4h2.7V15Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  transform: none !important;
}

html body.board-expanded .board-fullscreen-button::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9%204v5H4V6.6h2.6V4H9Zm6%200h2.4v2.6H20V9h-5V4ZM4%2015h5v5H6.6v-2.6H4V15Zm13.4%202.4V20H15v-5h5v2.4h-2.6Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9%204v5H4V6.6h2.6V4H9Zm6%200h2.4v2.6H20V9h-5V4ZM4%2015h5v5H6.6v-2.6H4V15Zm13.4%202.4V20H15v-5h5v2.4h-2.6Z'/%3E%3C/svg%3E") !important;
}

html body .board-fullscreen-button::after,
html body.board-expanded .board-fullscreen-button::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --board-fullscreen-button-size: clamp(36px, 8.8vh, 40px);
    --board-fullscreen-icon-size: calc(var(--board-fullscreen-button-size) * 0.64);
  }

  html body .board-fullscreen-button,
  html body.board-expanded .board-fullscreen-button {
    border-radius: 10px !important;
  }
}

/* 2026-05-09 EOF final: unified stage intro and completion summary. */
html body .stage-intro-dialog.stage-summary-dialog {
  width: min(940px, calc(100vw - 34px)) !important;
  max-height: min(720px, calc(100dvh - 28px)) !important;
  padding: clamp(48px, 5vh, 64px) clamp(26px, 3vw, 42px) clamp(24px, 3vh, 34px) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255, 252, 235, 0.98), rgba(245, 230, 190, 0.97)) !important;
  color: #2f3423 !important;
  box-shadow: 0 22px 60px rgba(19, 25, 12, 0.42), inset 0 0 0 2px rgba(125, 90, 36, 0.18) !important;
}

html body .stage-summary-dialog .stage-intro-scroll {
  display: grid !important;
  gap: clamp(12px, 1.5vh, 18px) !important;
  max-height: calc(min(720px, 100dvh - 28px) - clamp(92px, 11vh, 122px)) !important;
  padding-right: clamp(6px, 0.8vw, 10px) !important;
}

html body .stage-summary-head {
  display: grid !important;
  gap: 8px !important;
}

html body .stage-summary-head p {
  margin: 0 !important;
  color: #315c83 !important;
  font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive !important;
  font-size: clamp(1rem, 1.4vw, 1.28rem) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
}

html body .stage-summary-head h2 {
  margin: 0 !important;
  color: #3d2f1b !important;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(1.28rem, 2.25vw, 2.2rem) !important;
  font-weight: 1000 !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

html body .stage-summary-instructions {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.42) !important;
  box-shadow: inset 0 0 0 1px rgba(91, 73, 38, 0.16) !important;
}

html body .stage-summary-instructions summary {
  padding: 10px 14px !important;
  color: #315c23 !important;
  font-size: clamp(0.86rem, 1.05vw, 1rem) !important;
  font-weight: 1000 !important;
  cursor: pointer !important;
}

html body .stage-summary-instructions p,
html body .stage-summary-instructions li {
  color: #414734 !important;
  font-size: clamp(0.82rem, 1vw, 0.96rem) !important;
  line-height: 1.28 !important;
}

html body .stage-summary-instructions p {
  margin: 0 !important;
  padding: 0 14px 8px !important;
}

html body .stage-summary-instructions ul {
  margin: 0 !important;
  padding: 0 18px 12px 32px !important;
}

html body .stage-summary-layout {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr) !important;
  gap: clamp(12px, 1.6vw, 20px) !important;
  align-items: stretch !important;
}

html body .stage-summary-left {
  display: grid !important;
  gap: 12px !important;
  align-content: start !important;
}

html body .stage-summary-status,
html body .stage-summary-metrics article,
html body .stage-summary-discoveries {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  box-shadow: inset 0 0 0 1px rgba(91, 73, 38, 0.14), 0 6px 14px rgba(30, 24, 12, 0.08) !important;
}

html body .stage-summary-status {
  display: grid !important;
  grid-template-columns: clamp(60px, 7vw, 92px) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: clamp(12px, 1.4vw, 18px) !important;
}

html body .stage-summary-check {
  display: grid !important;
  place-items: center !important;
}

html body .stage-summary-check img {
  width: clamp(54px, 6.5vw, 86px) !important;
  height: clamp(54px, 6.5vw, 86px) !important;
  object-fit: contain !important;
}

html body .stage-summary-status.is-inactive .stage-summary-check,
html body .stage-summary-status.is-failed .stage-summary-check {
  filter: grayscale(1) brightness(0.72) !important;
  opacity: 0.28 !important;
}

html body .stage-summary-status span,
html body .stage-summary-metrics span {
  display: block !important;
  margin-bottom: 4px !important;
  color: #6b664f !important;
  font-size: clamp(0.66rem, 0.82vw, 0.78rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

html body .stage-summary-status strong {
  display: block !important;
  color: #315c23 !important;
  font-size: clamp(1rem, 1.35vw, 1.24rem) !important;
  line-height: 1.08 !important;
}

html body .stage-summary-status.is-failed strong {
  color: #8a352d !important;
}

html body .stage-summary-status.is-inactive strong {
  color: #6a6f62 !important;
}

html body .stage-summary-metrics {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

html body .stage-summary-metrics article {
  padding: 12px !important;
}

html body .stage-summary-metrics strong {
  display: block !important;
  color: #283a1f !important;
  font-size: clamp(1.18rem, 2vw, 1.7rem) !important;
  line-height: 1 !important;
}

html body .stage-summary-metrics article.is-inactive {
  opacity: 0.46 !important;
}

html body .stage-summary-discoveries {
  min-width: 0 !important;
  padding: clamp(12px, 1.4vw, 16px) !important;
}

html body .stage-summary-discoveries h3 {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
  color: #3d2f1b !important;
  font-size: clamp(0.92rem, 1.2vw, 1.08rem) !important;
  line-height: 1 !important;
}

html body .stage-summary-discoveries h3 span {
  color: #6b664f !important;
  font-size: 0.78em !important;
  font-weight: 1000 !important;
}

html body .stage-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(clamp(88px, 9.5vw, 132px), 1fr)) !important;
  gap: clamp(6px, 0.85vw, 10px) !important;
}

html body .stage-summary-entry {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: clamp(30px, 3.2vw, 42px) minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 7px 8px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  box-shadow: inset 0 0 0 1px rgba(77, 58, 27, 0.11) !important;
}

html body .stage-summary-entry-icon {
  width: clamp(30px, 3.2vw, 42px) !important;
  height: clamp(30px, 3.2vw, 42px) !important;
  display: grid !important;
  place-items: center !important;
}

html body .stage-summary-entry-icon img,
html body .stage-summary-entry-icon .animal-icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

html body .stage-summary-entry strong {
  min-width: 0 !important;
  color: #314225 !important;
  font-size: clamp(0.68rem, 0.9vw, 0.84rem) !important;
  line-height: 1.05 !important;
  font-weight: 1000 !important;
  overflow-wrap: normal !important;
}

html body .stage-summary-entry.is-locked {
  background: rgba(29, 29, 24, 0.18) !important;
}

html body .stage-summary-entry.is-locked .stage-summary-entry-icon {
  filter: grayscale(1) brightness(0) !important;
  opacity: 0.88 !important;
}

html body .stage-summary-entry.is-locked strong {
  color: transparent !important;
  width: min(92px, 100%) !important;
  min-height: 0.84em !important;
  border-radius: 999px !important;
  background: rgba(15, 15, 13, 0.88) !important;
}

html body .stage-summary-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding-top: 2px !important;
}

html body .stage-summary-primary {
  min-width: clamp(150px, 18vw, 210px) !important;
}

html body .stage-summary-secondary {
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  color: #315c23 !important;
  font-weight: 1000 !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 2px rgba(74, 106, 45, 0.18), 0 4px 10px rgba(30, 24, 12, 0.1) !important;
}

html body .stage-summary-secondary.next {
  color: #315c83 !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .stage-intro-dialog.stage-summary-dialog {
    width: min(720px, calc(100vw - 18px)) !important;
    padding: 38px 16px 16px !important;
  }

  html body .stage-summary-dialog .stage-intro-scroll {
    gap: 8px !important;
    max-height: calc(100dvh - 64px) !important;
  }

  html body .stage-summary-head h2 {
    font-size: clamp(0.98rem, 2.7vw, 1.25rem) !important;
  }

  html body .stage-summary-head p {
    font-size: clamp(0.78rem, 2vw, 0.98rem) !important;
  }

  html body .stage-summary-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html body .stage-summary-status {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    padding: 8px !important;
  }

  html body .stage-summary-check img {
    width: 40px !important;
    height: 40px !important;
  }

  html body .stage-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)) !important;
    gap: 5px !important;
  }

  html body .stage-summary-entry {
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 5px !important;
    padding: 5px !important;
  }

  html body .stage-summary-entry-icon {
    width: 26px !important;
    height: 26px !important;
  }

  html body .stage-summary-entry strong,
  html body .stage-summary-instructions p,
  html body .stage-summary-instructions li {
    font-size: clamp(0.56rem, 1.5vw, 0.68rem) !important;
  }

  html body .stage-summary-actions {
    justify-content: center !important;
    gap: 7px !important;
  }

  html body .stage-summary-primary,
  html body .stage-summary-secondary {
    min-height: 34px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: clamp(0.62rem, 1.6vw, 0.78rem) !important;
  }
}

/* 2026-05-09 EOF correction: summary uses the standard popup background. */
html body .stage-intro-dialog.stage-summary-dialog {
  border-radius: 24px !important;
  background: transparent url("assets/popup_background.png") center / 100% 100% no-repeat !important;
  box-shadow: 0 26px 86px rgba(14, 23, 12, 0.45) !important;
}

/* 2026-05-09 EOF correction: keep summary content inside the light popup field. */
:root {
  --summary-popup-pad-top: clamp(68px, 8dvh, 96px);
  --summary-popup-pad-x: clamp(70px, 6.4vw, 108px);
  --summary-popup-pad-bottom: clamp(58px, 7dvh, 86px);
  --summary-stage-label-size: clamp(0.9rem, 1.1vw, 1.12rem);
  --summary-title-size: clamp(1.08rem, 1.7vw, 1.72rem);
  --summary-body-size: clamp(0.76rem, 0.9vw, 0.9rem);
  --summary-small-size: clamp(0.62rem, 0.78vw, 0.76rem);
  --summary-entry-size: clamp(0.62rem, 0.78vw, 0.76rem);
  --summary-metric-size: clamp(1rem, 1.45vw, 1.38rem);
}

html body .stage-intro-dialog.stage-summary-dialog {
  width: min(980px, calc(100vw - clamp(18px, 4vw, 68px))) !important;
  max-height: calc(100dvh - clamp(18px, 4vh, 42px)) !important;
  padding: var(--summary-popup-pad-top) var(--summary-popup-pad-x) var(--summary-popup-pad-bottom) !important;
  overflow: hidden !important;
}

html body .stage-summary-dialog .stage-intro-scroll {
  max-height: calc(100dvh - var(--summary-popup-pad-top) - var(--summary-popup-pad-bottom) - clamp(34px, 5dvh, 58px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  padding-right: clamp(8px, 0.95vw, 14px) !important;
  box-sizing: border-box !important;
}

html body .stage-summary-head p {
  font-size: var(--summary-stage-label-size) !important;
}

html body .stage-summary-head h2 {
  font-size: var(--summary-title-size) !important;
}

html body .stage-summary-instructions summary {
  font-size: var(--summary-body-size) !important;
}

html body .stage-summary-instructions p,
html body .stage-summary-instructions li,
html body .stage-summary-status span,
html body .stage-summary-metrics span {
  font-size: var(--summary-small-size) !important;
}

html body .stage-summary-status strong {
  font-size: var(--summary-body-size) !important;
}

html body .stage-summary-metrics strong {
  font-size: var(--summary-metric-size) !important;
}

html body .stage-summary-entry strong {
  font-size: var(--summary-entry-size) !important;
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --summary-popup-pad-top: clamp(40px, 9.2dvh, 50px);
    --summary-popup-pad-x: clamp(42px, 6.8vw, 52px);
    --summary-popup-pad-bottom: clamp(44px, 10.5dvh, 56px);
    --summary-stage-label-size: clamp(0.44rem, 1.1vw, 0.56rem);
    --summary-title-size: clamp(0.58rem, 1.45vw, 0.74rem);
    --summary-body-size: clamp(0.42rem, 1vw, 0.52rem);
    --summary-small-size: clamp(0.34rem, 0.86vw, 0.43rem);
    --summary-entry-size: clamp(0.35rem, 0.9vw, 0.45rem);
    --summary-metric-size: clamp(0.58rem, 1.5vw, 0.76rem);
  }

  html body .stage-intro-dialog.stage-summary-dialog {
    width: min(720px, calc(100vw - 12px)) !important;
    max-height: calc(100dvh - 10px) !important;
    padding: var(--summary-popup-pad-top) var(--summary-popup-pad-x) var(--summary-popup-pad-bottom) !important;
  }

  html body .stage-summary-dialog .stage-intro-scroll {
    gap: 6px !important;
    max-height: calc(100dvh - var(--summary-popup-pad-top) - var(--summary-popup-pad-bottom) - 18px) !important;
    padding-right: 6px !important;
  }

  html body .stage-summary-head {
    gap: 4px !important;
  }

  html body .stage-summary-instructions summary {
    padding: 6px 9px !important;
  }

  html body .stage-summary-instructions p {
    padding: 0 9px 6px !important;
  }

  html body .stage-summary-instructions ul {
    padding: 0 10px 8px 22px !important;
  }

  html body .stage-summary-layout {
    gap: 6px !important;
  }

  html body .stage-summary-left {
    gap: 6px !important;
  }

  html body .stage-summary-status,
  html body .stage-summary-metrics article,
  html body .stage-summary-discoveries {
    border-radius: 8px !important;
  }

  html body .stage-summary-status {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 6px !important;
  }

  html body .stage-summary-check img {
    width: 30px !important;
    height: 30px !important;
  }

  html body .stage-summary-metrics {
    gap: 6px !important;
  }

  html body .stage-summary-metrics article {
    padding: 7px !important;
  }

  html body .stage-summary-discoveries {
    padding: 7px !important;
  }

  html body .stage-summary-discoveries h3 {
    margin-bottom: 5px !important;
    font-size: var(--summary-body-size) !important;
  }

  html body .stage-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)) !important;
    gap: 4px !important;
  }

  html body .stage-summary-entry {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 7px !important;
  }

  html body .stage-summary-entry-icon {
    width: 22px !important;
    height: 22px !important;
  }

  html body .stage-summary-actions {
    gap: 5px !important;
    padding-top: 0 !important;
  }

  html body .stage-summary-primary,
  html body .stage-summary-secondary {
    min-height: 28px !important;
    min-width: 0 !important;
    padding: 0 9px !important;
    font-size: clamp(0.42rem, 1.05vw, 0.52rem) !important;
  }

  html body .stage-summary-actions .stage-summary-primary,
  html body .stage-summary-actions .stage-summary-secondary {
    min-height: 26px !important;
    font-size: clamp(0.38rem, 0.95vw, 0.48rem) !important;
    line-height: 1 !important;
  }
}

/* 2026-05-09 EOF correction: right-panel title uses search expand/collapse icons. */
:root {
  --right-title-action-size: clamp(13px, min(1.55vw, 2.7vh), 18px);
}

html body .task-scroll > h2 {
  grid-template-columns: var(--right-title-action-size) minmax(0, 1fr) var(--right-title-action-size) !important;
  column-gap: clamp(4px, 0.5vw, 8px) !important;
}

html body .task-scroll > h2::before {
  content: "" !important;
  grid-column: 1 !important;
  width: var(--right-title-action-size) !important;
  height: var(--right-title-action-size) !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

html body .task-scroll > h2::after,
html body .task-scroll.task-copy-expanded > h2::after {
  content: "" !important;
  grid-column: 3 !important;
  position: static !important;
  width: var(--right-title-action-size) !important;
  height: var(--right-title-action-size) !important;
  display: block !important;
  justify-self: start !important;
  align-self: center !important;
  color: #4d6f2a !important;
  background: currentColor !important;
  transform: none !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M10.8%203a7.8%207.8%200%201%200%204.84%2013.92l3.72%203.72%201.7-1.7-3.72-3.72A7.8%207.8%200%200%200%2010.8%203Zm0%202.4a5.4%205.4%200%201%201%200%2010.8%205.4%205.4%200%200%201%200-10.8Zm-1.1%202.2v2.1H7.6v2.2h2.1V14h2.2v-2.1H14V9.7h-2.1V7.6H9.7Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M10.8%203a7.8%207.8%200%201%200%204.84%2013.92l3.72%203.72%201.7-1.7-3.72-3.72A7.8%207.8%200%200%200%2010.8%203Zm0%202.4a5.4%205.4%200%201%201%200%2010.8%205.4%205.4%200%200%201%200-10.8Zm-1.1%202.2v2.1H7.6v2.2h2.1V14h2.2v-2.1H14V9.7h-2.1V7.6H9.7Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

html body .task-scroll.task-copy-expanded > h2::after {
  color: #7a5830 !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M10.8%203a7.8%207.8%200%201%200%204.84%2013.92l3.72%203.72%201.7-1.7-3.72-3.72A7.8%207.8%200%200%200%2010.8%203Zm0%202.4a5.4%205.4%200%201%201%200%2010.8%205.4%205.4%200%200%201%200-10.8ZM7.5%209.75v2.2h6.7v-2.2H7.5Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M10.8%203a7.8%207.8%200%201%200%204.84%2013.92l3.72%203.72%201.7-1.7-3.72-3.72A7.8%207.8%200%200%200%2010.8%203Zm0%202.4a5.4%205.4%200%201%201%200%2010.8%205.4%205.4%200%200%201%200-10.8ZM7.5%209.75v2.2h6.7v-2.2H7.5Z'/%3E%3C/svg%3E") !important;
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --right-title-action-size: clamp(11px, 2.6vh, 14px);
  }
}

/* 2026-05-09 EOF correction: let the thesaurus book fill compact/high-zoom screens. */
@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .thesaurus-dialog {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background-size: min(100vw, 240dvh) 100dvh !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  html body .thesaurus-dialog .close-dialog {
    top: clamp(10px, 2.6dvh, 18px) !important;
    right: clamp(12px, 3vw, 28px) !important;
  }

  html body .thesaurus-layout {
    left: 50% !important;
    top: 50% !important;
    width: min(76vw, 172dvh) !important;
    height: min(76dvh, calc(100dvh - 56px)) !important;
    transform: translate(-50%, -50%) !important;
    grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr) !important;
    gap: clamp(16px, 3.2vw, 26px) !important;
  }

  html body .thesaurus-grid,
  html body .thesaurus-card {
    font-size: clamp(0.46rem, 2dvh, 0.58rem) !important;
    line-height: 1.16 !important;
  }

  html body .thesaurus-grid {
    padding: 0 clamp(4px, 1vw, 8px) clamp(12px, 4dvh, 18px) clamp(5px, 1.2vw, 10px) !important;
  }

  html body .thesaurus-card {
    direction: ltr !important;
    padding: 0 clamp(9px, 1.8vw, 14px) clamp(12px, 4dvh, 18px) clamp(7px, 1.4vw, 12px) !important;
  }

  html body .thesaurus-card > * {
    direction: ltr !important;
  }

  html body .thesaurus-category {
    margin-bottom: clamp(5px, 1.9dvh, 9px) !important;
  }

  html body .thesaurus-category > h3 {
    margin-bottom: clamp(3px, 1dvh, 5px) !important;
    font-size: clamp(0.52rem, 2.6dvh, 0.74rem) !important;
    line-height: 1 !important;
  }

  html body .thesaurus-category-list {
    grid-template-columns: repeat(auto-fit, minmax(clamp(50px, 7.4vw, 66px), 1fr)) !important;
    gap: clamp(3px, 1.1dvh, 6px) !important;
  }

  html body .thesaurus-item {
    min-height: clamp(36px, 12.2dvh, 46px) !important;
    padding: 1px 2px !important;
  }

  html body .thesaurus-item .entry-icon {
    width: clamp(22px, 7.6dvh, 29px) !important;
    height: clamp(22px, 7.6dvh, 29px) !important;
  }

  html body .thesaurus-item small {
    font-size: clamp(0.39rem, 1.9dvh, 0.5rem) !important;
    line-height: 1.04 !important;
  }

  html body .thesaurus-detail-header p {
    margin-bottom: clamp(2px, 0.8dvh, 4px) !important;
    font-size: clamp(0.43rem, 1.9dvh, 0.58rem) !important;
    line-height: 1.05 !important;
  }

  html body .thesaurus-detail-header h3 {
    margin-bottom: clamp(5px, 1.8dvh, 9px) !important;
    font-size: clamp(0.72rem, 3.4dvh, 0.98rem) !important;
    line-height: 1.02 !important;
  }

  html body .thesaurus-dialog .thesaurus-detail-photo {
    width: min(76%, 260px) !important;
    height: clamp(66px, 25dvh, 104px) !important;
    margin-bottom: clamp(5px, 1.8dvh, 9px) !important;
  }

  html body .thesaurus-detail-copy p {
    margin-bottom: clamp(5px, 1.8dvh, 8px) !important;
    font-size: clamp(0.46rem, 2.05dvh, 0.62rem) !important;
    line-height: 1.18 !important;
  }

  html body .thesaurus-card table {
    margin-top: clamp(4px, 1.3dvh, 7px) !important;
    font-size: clamp(0.4rem, 1.75dvh, 0.54rem) !important;
    line-height: 1.12 !important;
  }

  html body .thesaurus-card th,
  html body .thesaurus-card td {
    padding: 3px 5px !important;
  }
}

/* 2026-05-09 EOF correction: compact completed meadow discoveries at phone/high zoom. */
@media (max-width: 1200px), (max-height: 700px) {
  html body[data-stage="meadow"] .plant-summary.completed .summary-plant {
    gap: clamp(2px, 0.65dvh, 5px) !important;
    filter: drop-shadow(0 3px 3px rgba(23, 34, 14, 0.24)) !important;
  }

  html body[data-stage="meadow"] .plant-summary.completed .summary-badge {
    width: clamp(42px, 7.2dvh, 58px) !important;
    height: clamp(42px, 7.2dvh, 58px) !important;
    box-shadow: inset 0 0 0 2px rgba(95, 127, 49, 0.14), 0 4px 8px rgba(23, 34, 14, 0.16) !important;
  }

  html body[data-stage="meadow"] .plant-summary.completed .summary-label {
    max-width: clamp(58px, 10vw, 86px) !important;
    margin-top: clamp(1px, 0.35dvh, 3px) !important;
    padding: clamp(2px, 0.48dvh, 4px) clamp(5px, 0.9vw, 8px) !important;
    font-size: clamp(6.5px, 1.25dvh, 8.8px) !important;
    line-height: 1.04 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body[data-stage="meadow"] .plant-summary.completed .summary-badge {
    width: clamp(30px, 10.8dvh, 38px) !important;
    height: clamp(30px, 10.8dvh, 38px) !important;
  }

  html body[data-stage="meadow"] .plant-summary.completed .summary-label {
    max-width: clamp(46px, 11vw, 64px) !important;
    padding: 2px 4px !important;
    font-size: clamp(5.8px, 2dvh, 7px) !important;
    line-height: 1.02 !important;
    box-shadow: 0 2px 5px rgba(23, 34, 14, 0.1) !important;
  }
}

/* 2026-05-09 EOF correction: badges popup fits the parchment field at phone/high zoom. */
@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .achievements-dialog {
    display: none !important;
  }

  html body .achievements-dialog[open] {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: min(720px, calc(100vw - 12px)) !important;
    height: calc(100dvh - 10px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 10px) !important;
    margin: 0 !important;
    padding: clamp(42px, 10dvh, 52px) clamp(42px, 6.8vw, 54px) clamp(50px, 12dvh, 64px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(4px, 1.1dvh, 7px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body .achievements-dialog > h2 {
    flex: 0 0 auto !important;
    margin: 0 !important;
    color: #315c23 !important;
    font-size: clamp(0.68rem, 3.2dvh, 0.88rem) !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  html body .achievements-dialog .achievements-intro {
    flex: 0 0 auto !important;
    max-width: min(100%, 520px) !important;
    margin: 0 auto clamp(2px, 0.8dvh, 5px) !important;
    color: #425038 !important;
    font-size: clamp(0.42rem, 1.9dvh, 0.56rem) !important;
    line-height: 1.16 !important;
    text-align: center !important;
  }

  html body .achievements-dialog .achievement-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    align-content: start !important;
    gap: clamp(4px, 1.1dvh, 7px) !important;
    padding: 0 clamp(5px, 1.1vw, 8px) clamp(12px, 4dvh, 20px) 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: #704721 rgba(91, 61, 28, 0.16) !important;
  }

  html body .achievements-dialog .achievement-list::-webkit-scrollbar {
    width: 7px !important;
  }

  html body .achievements-dialog .achievement-list::-webkit-scrollbar-track {
    background: rgba(91, 61, 28, 0.16) !important;
    border-radius: 999px !important;
  }

  html body .achievements-dialog .achievement-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8a5b2b, #4f321b) !important;
    border: 2px solid rgba(255, 235, 190, 0.72) !important;
    border-radius: 999px !important;
  }

  html body .achievements-dialog .achievement {
    grid-template-columns: clamp(24px, 7.8dvh, 32px) minmax(0, 1fr) !important;
    gap: clamp(5px, 1.3vw, 8px) !important;
    min-height: clamp(38px, 13.2dvh, 52px) !important;
    padding: clamp(4px, 1.1dvh, 6px) clamp(6px, 1.2vw, 9px) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.34) !important;
  }

  html body .achievements-dialog .achievement-icon {
    width: clamp(24px, 7.8dvh, 32px) !important;
    height: clamp(24px, 7.8dvh, 32px) !important;
    font-size: clamp(0.78rem, 3.4dvh, 1rem) !important;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.42), 0 3px 6px rgba(54, 41, 18, 0.18) !important;
  }

  html body .achievements-dialog .achievement h3 {
    margin: 0 !important;
    font-size: clamp(0.48rem, 2.05dvh, 0.66rem) !important;
    line-height: 1.05 !important;
  }

  html body .achievements-dialog .achievement p {
    margin-top: clamp(1px, 0.4dvh, 3px) !important;
    font-size: clamp(0.4rem, 1.7dvh, 0.54rem) !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
  }

  html body .thesaurus-grid {
    padding-bottom: clamp(22px, 7dvh, 30px) !important;
  }

  html body .thesaurus-card {
    padding-bottom: clamp(22px, 7dvh, 30px) !important;
  }
}

/* 2026-05-09 EOF correction: lower phone/high-zoom bar heights without narrowing them. */
@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --topbar-height: clamp(43.2px, 10.08dvh, 54px);
    --footer-height: clamp(48.6px, 10.98dvh, 59.4px);
    --app-gap: 4px;
    --vertical-buffer: 3px;
    --footer-restored-map-height: clamp(50px, 8.6dvh, 62px);
    --footer-restored-tool-size: clamp(31px, 6.6vw, 40px);
    --footer-restored-reset-size: clamp(30px, 6vw, 38px);
    --footer-restored-score-width: clamp(68px, 13.4vw, 94px);
    --footer-node-size: clamp(20px, calc(var(--footer-restored-map-width, 330px) * 0.072), 30px);
    --footer-node-icon-size: clamp(14px, calc(var(--footer-restored-map-width, 330px) * 0.048), 22px);
  }

  html body .topbar {
    height: var(--topbar-height) !important;
    min-height: var(--topbar-height) !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  html body .topbar .gios-logo {
    width: clamp(27px, 6.2dvh, 35px) !important;
    height: clamp(27px, 6.2dvh, 35px) !important;
  }

  html body .title-board,
  html body .topbar .title-board {
    height: clamp(34px, 7.8dvh, 46px) !important;
  }

  html body .topbar .auth-mock {
    min-height: 18px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
  }

  html body .bottom-bar {
    height: var(--footer-height) !important;
    min-height: var(--footer-height) !important;
    max-height: var(--footer-height) !important;
  }

  html body .bottom-bar .stage-map {
    height: var(--footer-restored-map-height) !important;
    min-height: var(--footer-restored-map-height) !important;
  }
}

/* 2026-05-13 hotfix: enforce centered map, symmetric 3+3 tool groups, and score strip pinned to the right edge. */
:root {
  --footer-map-active-width-final: var(--footer-restored-map-width, 620px);
  --footer-group-button-size-final: var(--footer-left-tool-size, var(--footer-tool-balanced-size, var(--footer-restored-tool-size, 58px)));
  --footer-group-gap-final: var(--footer-tool-gap-balanced, 10px);
  --footer-groups-map-gap-final: clamp(6px, 0.82vw, 12px);
  --footer-score-right-edge-final: max(var(--page-side-gap, 8px), clamp(10px, 1.1vw, 18px));
}

html body .bottom-bar .stage-map {
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

html body .bottom-bar .footer-tools-left {
  left: calc(
    50% - (var(--footer-map-active-width-final) / 2)
    - var(--footer-groups-map-gap-final)
    - (3 * var(--footer-group-button-size-final))
    - (2 * var(--footer-group-gap-final))
  ) !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}

html body .bottom-bar .footer-tools-right {
  left: calc(50% + (var(--footer-map-active-width-final) / 2) + var(--footer-groups-map-gap-final)) !important;
  right: auto !important;
  width: calc((3 * var(--footer-group-button-size-final)) + (2 * var(--footer-group-gap-final))) !important;
  max-width: calc((3 * var(--footer-group-button-size-final)) + (2 * var(--footer-group-gap-final))) !important;
  justify-content: flex-start !important;
  transform: translateY(-50%) !important;
}

html body .bottom-bar .footer-tools-right > .stage-sound-button,
html body .bottom-bar .footer-tools-right > .badge-button.backpack,
html body .bottom-bar .footer-tools-right > .bottom-reset-button {
  flex: 0 0 var(--footer-group-button-size-final) !important;
  width: var(--footer-group-button-size-final) !important;
  height: var(--footer-group-button-size-final) !important;
  min-width: var(--footer-group-button-size-final) !important;
  min-height: var(--footer-group-button-size-final) !important;
  max-width: var(--footer-group-button-size-final) !important;
  max-height: var(--footer-group-button-size-final) !important;
}

html body .bottom-bar > #footer-score-board,
html body .bottom-bar > .footer-score-board {
  position: absolute !important;
  top: 50% !important;
  right: var(--footer-score-right-edge-final) !important;
  left: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 280 !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --footer-map-active-width-final: max(clamp(230px, 46vw, 430px), var(--footer-map-fit-width, 0px));
    --footer-score-right-edge-final: max(var(--page-side-gap, 8px), clamp(7px, 1vw, 12px));
  }

  html body .bottom-bar > #footer-score-board,
  html body .bottom-bar > .footer-score-board {
    width: var(--footer-score-zoom-width, clamp(64px, 9.2vw, 96px)) !important;
    min-width: var(--footer-score-zoom-width, clamp(64px, 9.2vw, 96px)) !important;
    max-width: var(--footer-score-zoom-width, clamp(64px, 9.2vw, 96px)) !important;
    aspect-ratio: var(--footer-score-board-aspect, 1467 / 575) !important;
  }

  html body .bottom-bar > #footer-score-board strong,
  html body .bottom-bar > .footer-score-board strong {
    font-size: clamp(0.92rem, calc(var(--footer-score-zoom-width, 84px) * 0.16), 1.44rem) !important;
  }
}

/* 2026-05-13 correction: map is always centered, score strip is always right, only 3+3 tool groups are arranged around the map. */
:root {
  --footer-map-active-width: var(--footer-restored-map-width, 620px);
  --footer-group-button-size: var(--footer-left-tool-size, var(--footer-tool-balanced-size, var(--footer-restored-tool-size, 58px)));
  --footer-group-three-gap: var(--footer-tool-gap-balanced, 10px);
  --footer-groups-map-gap: clamp(8px, 1vw, 16px);
  --footer-score-right-edge: max(var(--page-side-gap, 8px), clamp(10px, 1.1vw, 18px));
}

html body .bottom-bar .stage-map {
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

html body .bottom-bar .footer-tools-left {
  left: calc(
    50% - (var(--footer-map-active-width) / 2)
    - var(--footer-groups-map-gap)
    - (3 * var(--footer-group-button-size))
    - (2 * var(--footer-group-three-gap))
  ) !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}

html body .bottom-bar .footer-tools-right {
  left: calc(50% + (var(--footer-map-active-width) / 2) + var(--footer-groups-map-gap)) !important;
  right: auto !important;
  width: calc((3 * var(--footer-group-button-size)) + (2 * var(--footer-group-three-gap))) !important;
  max-width: calc((3 * var(--footer-group-button-size)) + (2 * var(--footer-group-three-gap))) !important;
  justify-content: flex-start !important;
  transform: translateY(-50%) !important;
}

html body .bottom-bar .footer-tools-right > .stage-sound-button,
html body .bottom-bar .footer-tools-right > .badge-button.backpack,
html body .bottom-bar .footer-tools-right > .bottom-reset-button {
  flex: 0 0 var(--footer-group-button-size) !important;
  width: var(--footer-group-button-size) !important;
  height: var(--footer-group-button-size) !important;
  min-width: var(--footer-group-button-size) !important;
  min-height: var(--footer-group-button-size) !important;
  max-width: var(--footer-group-button-size) !important;
  max-height: var(--footer-group-button-size) !important;
}

html body .bottom-bar .footer-tools-right > .footer-score-board,
html body .bottom-bar > .footer-score-board,
html body .bottom-bar #footer-score-board {
  position: absolute !important;
  top: 50% !important;
  right: var(--footer-score-right-edge) !important;
  left: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --footer-map-active-width: max(clamp(230px, 46vw, 430px), var(--footer-map-fit-width, 0px));
    --footer-score-right-edge: max(var(--page-side-gap, 8px), clamp(7px, 1vw, 12px));
  }
}

/* 2026-05-13 correction: slightly smaller round HUD typography on phone zoom. */
@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .play-area > .sidebar-round-hud small,
  html body .play-area > .sidebar-round-hud .sidebar-time-pill small,
  html body .play-area > .sidebar-round-hud .sidebar-round-score-pill small {
    font-size: clamp(0.42rem, 1.18vw, 0.54rem) !important;
    line-height: 0.98 !important;
  }

  html body .play-area > .sidebar-round-hud strong,
  html body .play-area > .sidebar-round-hud .sidebar-time-pill strong,
  html body .play-area > .sidebar-round-hud .sidebar-round-score-pill strong {
    font-size: clamp(0.74rem, 1.9vw, 1rem) !important;
    line-height: 0.92 !important;
  }
}

/* 2026-05-09 EOF correction: extend the board under the transparent left edge of the right panel. */
:root {
  --board-right-underlap: clamp(28px, 2.8vw, 44px);
}

html body:not(.board-expanded) .play-area > .stage-view,
html body:not(.board-expanded) .play-area > .stage-view.active {
  width: calc(100% + var(--board-right-underlap)) !important;
  max-width: none !important;
  margin-right: calc(-1 * var(--board-right-underlap)) !important;
}

html body:not(.board-expanded) .play-area > .task-panel {
  z-index: 170 !important;
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --board-right-underlap: clamp(17px, 3.4vw, 27px);
  }
}

/* 2026-05-09 EOF correction: smaller title logo at phone/high zoom, lifted into the top margin. */
@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .title-board,
  html body .topbar .title-board {
    top: clamp(-7px, -1.4dvh, -5px) !important;
    width: clamp(132px, 25.5vw, 202px) !important;
    height: clamp(30px, 7.1dvh, 40px) !important;
  }
}

/* 2026-05-09 EOF correction: add earned badge section to stage summaries. */
html body .stage-summary-badges {
  min-width: 0 !important;
  padding: clamp(10px, 1.2vw, 14px) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  box-shadow: inset 0 0 0 1px rgba(91, 73, 38, 0.14), 0 6px 14px rgba(30, 24, 12, 0.08) !important;
}

html body .stage-summary-badges h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
  color: #3d2f1b !important;
  font-size: var(--summary-body-size, clamp(0.88rem, 1.1vw, 1rem)) !important;
  line-height: 1 !important;
}

html body .stage-summary-badges h3 span {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 34px !important;
  min-height: 22px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: #d8a928 !important;
  color: #33240d !important;
  font-size: var(--summary-small-size, clamp(0.62rem, 0.78vw, 0.76rem)) !important;
  font-weight: 1000 !important;
  box-shadow: inset 0 0 0 2px rgba(255, 246, 194, 0.42) !important;
}

html body .stage-summary-badge-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 11vw, 148px), 1fr)) !important;
  gap: clamp(5px, 0.72vw, 8px) !important;
}

html body .stage-summary-badge {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: clamp(28px, 3vw, 38px) minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: center !important;
  padding: 6px 7px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  box-shadow: inset 0 0 0 1px rgba(77, 58, 27, 0.11) !important;
}

html body .stage-summary-badge.is-current {
  box-shadow: inset 0 0 0 2px rgba(216, 169, 40, 0.76), 0 5px 12px rgba(119, 85, 21, 0.16) !important;
}

html body .stage-summary-badge-icon {
  width: clamp(28px, 3vw, 38px) !important;
  height: clamp(28px, 3vw, 38px) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

html body .stage-summary-badge-icon[data-badge="observer"] {
  background-image: url("assets/badge-observer.png") !important;
}

html body .stage-summary-badge-icon[data-badge="animalist"] {
  background-image: url("assets/badge-animalist.svg") !important;
}

html body .stage-summary-badge-icon[data-badge="botanist"] {
  background-image: url("assets/badge-botanist.png") !important;
}

html body .stage-summary-badge-icon[data-badge="plantExpert"] {
  background-image: url("assets/badge-plant-expert.svg") !important;
}

html body .stage-summary-badge-icon[data-badge="mountain"] {
  background-image: url("assets/badge-mountain.png") !important;
}

html body .stage-summary-badge-icon[data-badge="forest"] {
  background-image: url("assets/badge-forest.png") !important;
}

html body .stage-summary-badge-icon[data-badge="curious"] {
  background-image: url("assets/badge-curious.svg") !important;
}

html body .stage-summary-badge-icon[data-badge="photographer"] {
  background-image: url("assets/badge-photographer.svg") !important;
}

html body .stage-summary-badge-icon[data-badge="master"] {
  background-image: url("assets/badge-master.png") !important;
}

html body .stage-summary-badge-icon[data-badge="cupWinners"] {
  background-image: url("assets/badge-cup-winners.svg") !important;
}

html body .stage-summary-badge strong {
  display: block !important;
  min-width: 0 !important;
  color: #314225 !important;
  font-size: var(--summary-entry-size, clamp(0.62rem, 0.78vw, 0.76rem)) !important;
  line-height: 1.04 !important;
  font-weight: 1000 !important;
}

html body .stage-summary-badge small {
  display: block !important;
  margin-top: 2px !important;
  color: #706348 !important;
  font-size: var(--summary-small-size, clamp(0.56rem, 0.68vw, 0.68rem)) !important;
  line-height: 1.04 !important;
  font-weight: 900 !important;
}

html body .stage-summary-badge.is-locked {
  background: rgba(29, 29, 24, 0.16) !important;
}

html body .stage-summary-badge.is-locked .stage-summary-badge-icon {
  filter: grayscale(1) brightness(0) !important;
  opacity: 0.8 !important;
}

html body .stage-summary-badge.is-locked strong {
  width: min(104px, 100%) !important;
  color: transparent !important;
  border-radius: 999px !important;
  background: rgba(15, 15, 13, 0.88) !important;
}

html body .stage-summary-badge.is-locked small {
  color: rgba(33, 31, 24, 0.62) !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .stage-summary-badges {
    padding: 7px !important;
    border-radius: 8px !important;
  }

  html body .stage-summary-badges h3 {
    margin-bottom: 5px !important;
    font-size: var(--summary-body-size) !important;
  }

  html body .stage-summary-badges h3 span {
    min-width: 26px !important;
    min-height: 17px !important;
    padding: 1px 6px !important;
  }

  html body .stage-summary-badge-grid {
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)) !important;
    gap: 4px !important;
  }

  html body .stage-summary-badge {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 7px !important;
  }

  html body .stage-summary-badge-icon {
    width: 20px !important;
    height: 20px !important;
  }
}

/* 2026-05-09 EOF correction: nudge popup content lower inside the parchment field. */
:root {
  --popup-pad-top: clamp(64px, 9.2dvh, 94px);
  --summary-popup-pad-top: clamp(80px, 9.4dvh, 110px);
}

@media (max-width: 700px), (max-height: 700px) {
  :root {
    --popup-pad-top: 54px;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --summary-popup-pad-top: clamp(50px, 11.2dvh, 62px);
  }
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .achievements-dialog[open] {
    padding-top: clamp(50px, 12dvh, 64px) !important;
  }
}

/* 2026-05-09 EOF correction: nudge right-panel content a few pixels to the right. */
:root {
  --right-box-content-nudge-x: 5px;
}

html body .task-panel > .task-scroll,
html body[data-stage] .task-panel > .task-scroll {
  left: calc(var(--right-box-content-side) + var(--right-box-left-overlap) + var(--right-box-content-nudge-x)) !important;
  right: calc(var(--right-box-content-side) - var(--right-box-right-overlap) - var(--right-box-content-nudge-x) + var(--right-box-scroll-right-extra, 0px)) !important;
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --right-box-content-nudge-x: 3px;
  }
}

/* 2026-05-09 EOF correction: align round time/score with the extended board edge. */
:root {
  --round-hud-board-edge-inset: clamp(4px, 0.55vw, 8px);
}

html body:not(.board-expanded) .play-area > .sidebar-round-hud {
  right: calc(var(--game-right-panel-width) - var(--board-right-underlap, 0px) + var(--round-hud-board-edge-inset)) !important;
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --round-hud-board-edge-inset: 3px;
  }
}

/* 2026-05-09 EOF correction: slightly larger phone footer map and more HUD edge breathing room. */
:root {
  --round-hud-board-edge-inset: clamp(6px, calc(0.55vw + 2px), 10px);
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --footer-restored-map-width: clamp(315px, 47vw, 386px);
    --footer-restored-map-height: clamp(52px, 9dvh, 66px);
    --round-hud-board-edge-inset: 5px;
  }

  html body .bottom-bar .stage-map {
    width: var(--footer-restored-map-width) !important;
    max-width: var(--footer-restored-map-width) !important;
    height: var(--footer-restored-map-height) !important;
    min-height: var(--footer-restored-map-height) !important;
  }
}

/* 2026-05-09 EOF correction: keep popup text inside the light parchment field on every viewport. */
:root {
  --popup-scroll-safety: clamp(10px, 1.3dvh, 18px);
  --popup-dialog-max-height: calc(100dvh - 24px);
  --summary-dialog-max-height: calc(100dvh - clamp(18px, 4dvh, 42px));
}

html body .stage-intro-dialog:not(.stage-summary-dialog) {
  --popup-dialog-max-height: min(82dvh, calc(100dvh - 24px));
}

html body .stage-task-dialog {
  --popup-dialog-max-height: min(68dvh, calc(100dvh - 24px));
}

html body .info-dialog {
  --popup-dialog-max-height: calc(100dvh - clamp(18px, 4dvh, 60px));
}

html body .fact-dialog {
  --popup-dialog-max-height: min(62dvh, calc(100dvh - 24px));
}

html body .stage-intro-dialog[open]:not(.stage-summary-dialog),
html body .stage-task-dialog[open],
html body .info-dialog[open],
html body .fact-dialog[open] {
  max-height: var(--popup-dialog-max-height) !important;
  overflow: hidden !important;
}

html body .stage-intro-dialog[open]:not(.stage-summary-dialog) > .dialog-scroll,
html body .stage-task-dialog[open] > .dialog-scroll,
html body .info-dialog[open] > .dialog-scroll,
html body .fact-dialog[open] > .dialog-scroll {
  max-height: calc(var(--popup-dialog-max-height) - var(--popup-pad-top) - var(--popup-pad-bottom) - var(--popup-scroll-safety)) !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body .stage-intro-dialog.stage-summary-dialog {
  --summary-dialog-max-height: calc(100dvh - clamp(18px, 4dvh, 42px));
  max-height: var(--summary-dialog-max-height) !important;
  overflow: hidden !important;
}

html body .stage-summary-dialog[open] .stage-intro-scroll {
  max-height: calc(var(--summary-dialog-max-height) - var(--summary-popup-pad-top) - var(--summary-popup-pad-bottom) - var(--popup-scroll-safety)) !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body .achievements-dialog[open] {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100dvh - clamp(12px, 3dvh, 28px)) !important;
  overflow: hidden !important;
}

html body .achievements-dialog[open] .achievement-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (max-width: 700px), (max-height: 700px) {
  :root {
    --popup-scroll-safety: 10px;
  }

  html body .stage-intro-dialog:not(.stage-summary-dialog),
  html body .stage-task-dialog,
  html body .info-dialog,
  html body .fact-dialog {
    --popup-dialog-max-height: calc(100dvh - 14px);
  }
}

@media (min-width: 701px) and (max-height: 700px) {
  html body .stage-intro-dialog:not(.stage-summary-dialog),
  html body .info-dialog {
    --popup-dialog-max-height: calc(100dvh - 28px);
  }

  html body .stage-task-dialog,
  html body .fact-dialog {
    --popup-dialog-max-height: min(700px, calc(100dvh - 28px));
  }
}

@media (max-width: 900px), (max-height: 520px) {
  html body .stage-intro-dialog.stage-summary-dialog {
    --summary-dialog-max-height: calc(100dvh - 10px);
  }
}

/* 2026-05-09 EOF correction: keep the travel-map popup content inside its frame too. */
html body .map-dialog[open] {
  --map-dialog-max-height: calc(100dvh - 24px);
  display: flex !important;
  flex-direction: column !important;
  max-height: var(--map-dialog-max-height) !important;
  overflow: hidden !important;
}

html body .map-dialog[open] .map-dialog-art {
  flex: 0 0 auto !important;
  height: clamp(72px, min(24dvh, 18vw), 340px) !important;
  margin-bottom: clamp(6px, 1.2dvh, 16px) !important;
}

html body .map-dialog[open] .map-dialog-stages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges !important;
}

@media (max-width: 700px), (max-height: 700px) {
  html body .map-dialog[open] {
    --map-dialog-max-height: calc(100dvh - 14px);
  }

html body .map-dialog[open] .map-dialog-art {
    height: clamp(54px, 18dvh, 104px) !important;
  }
}

/* 2026-05-09 EOF correction: shift the whole right task box slightly to the right. */
:root {
  --right-panel-shift-x: clamp(4px, 0.42vw, 8px);
}

html body:not(.board-expanded) .play-area > .task-panel,
html body:not(.board-expanded)[data-stage] .play-area > .task-panel {
  transform: translateX(var(--right-panel-shift-x)) !important;
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --right-panel-shift-x: 3px;
  }
}

/* 2026-05-09 EOF correction: put summary start/restart in the stage-title line. */
:root {
  --summary-header-button-height: clamp(28px, 3.4dvh, 38px);
  --summary-header-button-width: clamp(74px, 8.4vw, 112px);
  --summary-header-button-font: clamp(0.68rem, 0.78vw, 0.82rem);
}

html body .stage-summary-title-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  gap: clamp(6px, 1vw, 14px) !important;
  align-items: center !important;
  min-width: 0 !important;
}

html body .stage-summary-title-row p {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .stage-summary-header-action {
  grid-column: 3 !important;
  justify-self: end !important;
  width: var(--summary-header-button-width) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: var(--summary-header-button-height) !important;
  padding: 0 clamp(8px, 1vw, 14px) !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffd86f, #e59d32) !important;
  color: #2f2717 !important;
  font-size: var(--summary-header-button-font) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 2px rgba(255, 246, 198, 0.54), 0 4px 10px rgba(50, 32, 10, 0.2) !important;
}

html body .stage-summary-header-action:hover,
html body .stage-summary-header-action:focus-visible {
  transform: translateY(-1px) !important;
  outline: none !important;
  box-shadow: inset 0 0 0 2px rgba(255, 249, 211, 0.72), 0 6px 13px rgba(50, 32, 10, 0.25) !important;
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --summary-header-button-height: clamp(20px, 5.2dvh, 26px);
    --summary-header-button-width: clamp(48px, 8.2vw, 68px);
    --summary-header-button-font: clamp(0.42rem, 1.05vw, 0.52rem);
  }

  html body .stage-summary-title-row {
    gap: 4px !important;
  }

  html body .stage-summary-header-action {
    padding: 0 6px !important;
  }
}

/* 2026-05-09 EOF correction: prevent the HTML close-button text from duplicating the CSS glyph. */
html body .close-dialog {
  color: transparent !important;
  font-size: 0 !important;
}

html body .close-dialog::before {
  content: "X" !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #4b2b16 !important;
  font-family: Arial, "Segoe UI", sans-serif !important;
  font-size: clamp(1rem, 2.3vh, 1.35rem) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

/* 2026-05-09 EOF correction: make the footer map larger on high zoom / phone-like viewports. */
@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --footer-restored-map-width: clamp(335px, 50vw, 410px);
    --footer-restored-map-height: clamp(56px, 9.8dvh, 70px);
    --footer-node-size: clamp(22px, calc(var(--footer-restored-map-width) * 0.075), 32px);
    --footer-node-icon-size: clamp(16px, calc(var(--footer-restored-map-width) * 0.052), 24px);
  }

  html body .bottom-bar .stage-map {
    width: var(--footer-restored-map-width) !important;
    max-width: var(--footer-restored-map-width) !important;
    height: var(--footer-restored-map-height) !important;
    min-height: var(--footer-restored-map-height) !important;
  }
}

/* 2026-05-09 EOF correction: summary popups close only through their own action buttons. */
html body .stage-intro-dialog.stage-summary-dialog > .close-dialog {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2026-05-09 EOF correction: keep popup content inside the light parchment field at desktop scale too. */
:root {
  --popup-pad-top: clamp(98px, 11.4dvh, 122px);
  --popup-pad-bottom: clamp(88px, 10.4dvh, 114px);
  --summary-popup-pad-top: clamp(110px, 12.5dvh, 132px);
  --summary-popup-pad-bottom: clamp(102px, 11.6dvh, 126px);
  --achievement-popup-pad-top: clamp(110px, 12dvh, 130px);
  --achievement-popup-pad-x: clamp(84px, 6.8vw, 112px);
  --achievement-popup-pad-bottom: clamp(100px, 11dvh, 122px);
}

html body .achievements-dialog[open] {
  padding: var(--achievement-popup-pad-top) var(--achievement-popup-pad-x) var(--achievement-popup-pad-bottom) !important;
  overflow: hidden !important;
}

html body .achievements-dialog[open] .achievement-list {
  padding-bottom: clamp(8px, 1dvh, 14px) !important;
}

@media (max-width: 700px), (max-height: 700px) {
  :root {
    --popup-pad-top: 54px;
    --popup-pad-bottom: 42px;
  }
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --summary-popup-pad-top: clamp(50px, 11.2dvh, 62px);
    --summary-popup-pad-bottom: clamp(50px, 12dvh, 66px);
    --achievement-popup-pad-top: clamp(50px, 12dvh, 64px);
    --achievement-popup-pad-x: clamp(42px, 6.8vw, 54px);
    --achievement-popup-pad-bottom: clamp(54px, 12.5dvh, 68px);
  }

  html body .achievements-dialog[open] {
    padding: var(--achievement-popup-pad-top) var(--achievement-popup-pad-x) var(--achievement-popup-pad-bottom) !important;
  }
}

/* 2026-05-09 EOF correction: unify stage-summary popup buttons. */
:root {
  --summary-button-height: clamp(34px, 3.8dvh, 42px);
  --summary-button-min-width: clamp(112px, 12vw, 172px);
  --summary-button-padding-x: clamp(14px, 1.4vw, 22px);
  --summary-button-font: clamp(0.72rem, 0.78vw, 0.88rem);
}

html body .stage-summary-actions {
  justify-content: flex-end !important;
  align-items: center !important;
  gap: clamp(8px, 1vw, 12px) !important;
}

html body .stage-summary-header-action,
html body .stage-summary-actions .stage-summary-primary,
html body .stage-summary-actions .stage-summary-secondary {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-grid !important;
  place-items: center !important;
  width: auto !important;
  min-width: var(--summary-button-min-width) !important;
  max-width: 100% !important;
  min-height: var(--summary-button-height) !important;
  height: var(--summary-button-height) !important;
  margin: 0 !important;
  padding: 0 var(--summary-button-padding-x) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffd86f 0%, #e69f32 100%) !important;
  color: #2f2717 !important;
  font-family: Arial, "Segoe UI", sans-serif !important;
  font-size: var(--summary-button-font) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 2px rgba(255, 248, 205, 0.58), 0 4px 10px rgba(50, 32, 10, 0.2) !important;
  transform: none !important;
}

html body .stage-summary-header-action:hover,
html body .stage-summary-header-action:focus-visible,
html body .stage-summary-actions .stage-summary-primary:hover,
html body .stage-summary-actions .stage-summary-primary:focus-visible,
html body .stage-summary-actions .stage-summary-secondary:hover,
html body .stage-summary-actions .stage-summary-secondary:focus-visible {
  color: #2f2717 !important;
  outline: none !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 252, 220, 0.78), 0 6px 13px rgba(50, 32, 10, 0.26) !important;
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --summary-button-height: clamp(24px, 5.6dvh, 30px);
    --summary-button-min-width: clamp(66px, 13vw, 92px);
    --summary-button-padding-x: clamp(8px, 1.6vw, 12px);
    --summary-button-font: clamp(0.42rem, 1.05vw, 0.54rem);
  }

  html body .stage-summary-actions {
    justify-content: center !important;
    gap: 5px !important;
  }

  html body .stage-summary-header-action,
  html body .stage-summary-actions .stage-summary-primary,
  html body .stage-summary-actions .stage-summary-secondary {
    min-width: var(--summary-button-min-width) !important;
    min-height: var(--summary-button-height) !important;
    height: var(--summary-button-height) !important;
    padding: 0 var(--summary-button-padding-x) !important;
  }
}

/* 2026-05-09 EOF correction: official forest institution logos without colour filters. */
html body[data-stage="forest"] .institution-icons button[data-institution] > span {
  background-color: #fff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html body[data-stage="forest"] .institution-icons button[data-institution="gios"] > span {
  background-image: url("assets/gios-logo.png") !important;
  background-size: 78% auto !important;
}

html body[data-stage="forest"] .institution-icons button[data-institution="gdos"] > span {
  background-image: url("assets/gdos-logo.png") !important;
  background-size: 74% auto !important;
}

html body[data-stage="forest"] .institution-icons button[data-institution="rdos"] > span {
  background-image: url("assets/rdos-logo.png") !important;
  background-size: 86% auto !important;
}

html body[data-stage="forest"] .institution-icons button[data-institution="eea"] > span {
  background-image: url("assets/eea-logo-icon.png") !important;
  background-size: 78% auto !important;
}

html body[data-stage="forest"] .institution-icons button[data-institution="iop"] > span {
  background-image: url("assets/iop-logo-official.svg") !important;
  background-size: 82% auto !important;
}

html body[data-stage="forest"] .institution-side-list button[data-institution] > span,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution] > span {
  display: block !important;
  place-self: center !important;
  flex: 0 0 auto !important;
  width: clamp(48px, 4.5vw, 60px) !important;
  height: clamp(38px, 3.6vw, 50px) !important;
  min-width: clamp(48px, 4.5vw, 60px) !important;
  min-height: clamp(38px, 3.6vw, 50px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html body[data-stage="forest"] .institution-side-list button[data-institution="gios"] > span,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution="gios"] > span {
  background-image: url("assets/gios-logo-side.png") !important;
}

html body[data-stage="forest"] .institution-side-list button[data-institution="gdos"] > span,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution="gdos"] > span {
  background-image: url("assets/gdos-logo-side.png") !important;
}

html body[data-stage="forest"] .institution-side-list button[data-institution="rdos"] > span,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution="rdos"] > span {
  background-image: url("assets/rdos-logo-side.png") !important;
}

html body[data-stage="forest"] .institution-side-list button[data-institution="eea"] > span,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution="eea"] > span {
  background-image: url("assets/eea-logo-side.png") !important;
}

html body[data-stage="forest"] .institution-side-list button[data-institution="iop"] > span,
html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution="iop"] > span {
  background-image: url("assets/iop-logo-official.svg") !important;
}

html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button[data-institution] > span,
html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button[data-institution]:hover > span,
html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button[data-institution]:focus-visible > span {
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(24px, 4.2vh, 42px) !important;
  height: clamp(22px, 3.8vh, 36px) !important;
  min-width: clamp(24px, 4.2vh, 42px) !important;
  min-height: clamp(22px, 3.8vh, 36px) !important;
  max-width: clamp(24px, 4.2vh, 42px) !important;
  max-height: clamp(22px, 3.8vh, 36px) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-size: contain !important;
}

html body .dialog-icon.logo-eea,
html body .dialog-icon.logo-iop,
html body .dialog-icon.logo-rdos,
html body .animal-photo.logo-photo.logo-eea,
html body .animal-photo.logo-photo.logo-iop,
html body .animal-photo.logo-photo.logo-rdos {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* 2026-05-09 EOF correction: richer species and institution cards in the compendium. */
html body .thesaurus-detail-extra {
  margin-top: clamp(10px, 1.2vh, 14px) !important;
  padding-top: clamp(8px, 1vh, 12px) !important;
  border-top: 1px solid rgba(91, 61, 28, 0.18) !important;
}

html body .thesaurus-detail-extra h4 {
  margin: 0 0 clamp(5px, 0.75vh, 8px) !important;
  color: #315c23 !important;
  font-size: clamp(0.78rem, 0.78vw, 0.96rem) !important;
  line-height: 1.08 !important;
  font-weight: 1000 !important;
}

html body .thesaurus-detail-extra p {
  margin: 0 !important;
}

html body .thesaurus-detail-extra ul {
  margin: 0 !important;
  padding-left: 1.1em !important;
}

html body .thesaurus-detail-extra li {
  margin: 0 0 clamp(4px, 0.5vh, 7px) !important;
  font-size: clamp(0.78rem, 0.78vw, 0.94rem) !important;
  line-height: 1.22 !important;
}

html body .thesaurus-source-links {
  margin-top: clamp(10px, 1.2vh, 14px) !important;
}

@media (max-width: 900px), (max-height: 700px) {
  html body .thesaurus-detail-extra {
    margin-top: clamp(5px, 1.8dvh, 8px) !important;
    padding-top: clamp(5px, 1.8dvh, 8px) !important;
  }

  html body .thesaurus-detail-extra h4 {
    margin-bottom: clamp(3px, 1dvh, 5px) !important;
    font-size: clamp(0.44rem, 1.9dvh, 0.58rem) !important;
    line-height: 1.05 !important;
  }

  html body .thesaurus-detail-extra li {
    margin-bottom: 3px !important;
    font-size: clamp(0.4rem, 1.75dvh, 0.54rem) !important;
    line-height: 1.12 !important;
  }
}

/* 2026-05-09 EOF final: keep first-board hidden animal hitboxes from growing with browser zoom. */
html body[data-stage="dam"] .map .hotspot:not(.found) {
  width: 52px !important;
  height: 44px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html body[data-stage="dam"] .map .hotspot:not(.found) .pulse,
html body[data-stage="dam"] .map .hotspot:not(.found)::before {
  pointer-events: none !important;
}

@media (max-width: 1700px), (max-height: 900px) {
  html body[data-stage="dam"] .map .hotspot:not(.found) {
    width: 42px !important;
    height: 36px !important;
  }
}

@media (max-width: 1300px), (max-height: 760px) {
  html body[data-stage="dam"] .map .hotspot:not(.found) {
    width: 35px !important;
    height: 30px !important;
  }
}

@media (max-width: 1200px), (max-height: 700px) {
  html body[data-stage="dam"] .map .hotspot:not(.found) {
    width: 30px !important;
    height: 26px !important;
  }
}

@media (max-width: 1000px), (max-height: 600px) {
  html body[data-stage="dam"] .map .hotspot:not(.found) {
    width: 26px !important;
    height: 22px !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="dam"] .map .hotspot:not(.found) {
    width: 21px !important;
    height: 18px !important;
  }
}

/* 2026-05-09 EOF final: smaller discovered animal icons and labels on phone-like zoom. */
@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="dam"] .map .hotspot.found {
    gap: 4px !important;
  }

  html body[data-stage="dam"] .map .hotspot.found .icon,
  html body[data-stage="dam"] .map .hotspot.found .animal-icon {
    width: clamp(20px, 4.8vh, 26px) !important;
    height: clamp(20px, 4.8vh, 26px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-shadow:
      0 0 10px var(--glow),
      0 0 0 3px color-mix(in srgb, var(--glow), transparent 58%) !important;
  }

  html body[data-stage="dam"] .map .hotspot.found strong {
    min-width: clamp(58px, 11vw, 82px) !important;
    max-width: clamp(78px, 15vw, 112px) !important;
    padding: 2px 5px !important;
    font-size: clamp(0.38rem, 0.88vw, 0.52rem) !important;
    line-height: 1.02 !important;
    box-shadow: 0 1px 4px rgba(28, 34, 17, 0.13) !important;
  }

  html body[data-stage="dam"] .map .hotspot.found::after {
    top: -4px !important;
    right: 8px !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 0.62rem !important;
  }
}

/* 2026-05-09 EOF final: discovered dam animals are clickable only on the round icon. */
html body[data-stage="dam"] .map .hotspot.found {
  --dam-found-icon-size: clamp(42px, min(4.4vw, 6.4vh), 58px);
  display: grid !important;
  place-items: center !important;
  width: var(--dam-found-icon-size) !important;
  height: var(--dam-found-icon-size) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: var(--dam-found-icon-size) !important;
  max-height: var(--dam-found-icon-size) !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
}

html body[data-stage="dam"] .map .hotspot.found .icon,
html body[data-stage="dam"] .map .hotspot.found .animal-icon {
  width: var(--dam-found-icon-size) !important;
  height: var(--dam-found-icon-size) !important;
  min-width: var(--dam-found-icon-size) !important;
  min-height: var(--dam-found-icon-size) !important;
  transform: none !important;
  transition: filter 160ms ease !important;
}

html body[data-stage="dam"] .map .hotspot.found strong {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + clamp(3px, 0.6vh, 6px)) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

html body[data-stage="dam"] .map .hotspot.found::after {
  pointer-events: none !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="dam"] .map .hotspot.found {
    --dam-found-icon-size: clamp(20px, 4.8vh, 26px);
  }
}

/* 2026-05-09 EOF final: smaller forester speech bubble on phone-like zoom. */
@media (max-width: 1000px), (max-height: 600px) {
  html body:not([data-stage="forest"]) .guide .speech,
  html body:not([data-stage="forest"]) .guide .speech.speech-intro,
  html body:not([data-stage="forest"]) .guide .speech.speech-muted,
  html body:not([data-stage="forest"]) .guide .speech:not(.speech-hidden) {
    width: min(250px, calc(100vw - 168px)) !important;
    max-width: min(250px, calc(100vw - 168px)) !important;
    max-height: min(26vh, calc(var(--board-height) * 0.32)) !important;
    padding: clamp(6px, 1.3vh, 10px) clamp(8px, 1.8vw, 13px) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  html body:not([data-stage="forest"]) .guide .speech h2 {
    margin-bottom: clamp(2px, 0.7vh, 5px) !important;
    font-size: clamp(0.64rem, 2.35vh, 0.9rem) !important;
    line-height: 1.04 !important;
  }

  html body:not([data-stage="forest"]) .guide .speech p,
  html body:not([data-stage="forest"]) .guide .trace-callout {
    font-size: clamp(0.5rem, 1.8vh, 0.68rem) !important;
    line-height: 1.14 !important;
  }

  html body:not([data-stage="forest"]) .guide .speech-action {
    min-height: clamp(20px, 4.4vh, 28px) !important;
    margin-top: clamp(3px, 0.9vh, 6px) !important;
    padding: 0 clamp(7px, 1.6vw, 12px) !important;
    border-radius: 6px !important;
    font-size: clamp(0.52rem, 1.8vh, 0.68rem) !important;
    box-shadow: 0 2px 0 #1f3e5d !important;
  }

  html body:not([data-stage="forest"]) .guide .speech::before {
    left: clamp(10px, 2vw, 20px) !important;
    bottom: -14px !important;
    border-width: 7px !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  html body:not([data-stage="forest"]) .guide .speech,
  html body:not([data-stage="forest"]) .guide .speech.speech-intro,
  html body:not([data-stage="forest"]) .guide .speech.speech-muted,
  html body:not([data-stage="forest"]) .guide .speech:not(.speech-hidden) {
    width: min(205px, calc(100vw - 128px)) !important;
    max-width: min(205px, calc(100vw - 128px)) !important;
    max-height: min(22vh, calc(var(--board-height) * 0.28)) !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
  }

  html body:not([data-stage="forest"]) .guide .speech h2 {
    font-size: clamp(0.52rem, 2.15vh, 0.72rem) !important;
  }

  html body:not([data-stage="forest"]) .guide .speech p,
  html body:not([data-stage="forest"]) .guide .trace-callout {
    font-size: clamp(0.42rem, 1.65vh, 0.56rem) !important;
    line-height: 1.1 !important;
  }
}

/* 2026-05-09 EOF final: compact first-board hint flashes on phone-like zoom. */
@keyframes damTinyPulse {
  from {
    transform: scale(0.72);
    opacity: 0.09;
  }

  to {
    transform: scale(1.18);
    opacity: 0;
  }
}

@media (max-width: 1200px), (max-height: 700px) {
  html body[data-stage="dam"] .map .hotspot:not(.found) .pulse {
    left: 50% !important;
    top: 50% !important;
    width: 18px !important;
    height: 18px !important;
    margin: -9px 0 0 -9px !important;
    box-shadow: none !important;
  }

  html body[data-stage="dam"] .map .hotspot.hinting:not(.found) .pulse {
    opacity: 0.055 !important;
    animation: damTinyPulse 2.2s ease-out 1 !important;
  }

  html body[data-stage="dam"] .map .hotspot.hinting:not(.found)::before {
    opacity: 0.6 !important;
    filter: brightness(1.04) drop-shadow(0 0 3px rgba(255, 249, 203, 0.22)) !important;
  }
}

@media (max-width: 1000px), (max-height: 600px) {
  html body[data-stage="dam"] .map .hotspot:not(.found) .pulse {
    width: 12px !important;
    height: 12px !important;
    margin: -6px 0 0 -6px !important;
  }

  html body[data-stage="dam"] .map .hotspot.hinting:not(.found) .pulse {
    opacity: 0.045 !important;
  }

  html body[data-stage="dam"] .map .hotspot.hinting:not(.found)::before {
    opacity: 0.48 !important;
    filter: brightness(1.02) drop-shadow(0 0 2px rgba(255, 249, 203, 0.18)) !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="dam"] .map .hotspot:not(.found) .pulse {
    width: 8px !important;
    height: 8px !important;
    margin: -4px 0 0 -4px !important;
  }

  html body[data-stage="dam"] .map .hotspot.hinting:not(.found) .pulse {
    opacity: 0.04 !important;
  }

  html body[data-stage="dam"] .map .hotspot.hinting:not(.found)::before {
    opacity: 0.4 !important;
    filter: brightness(1.01) drop-shadow(0 0 1px rgba(255, 249, 203, 0.14)) !important;
  }
}

/* 2026-05-09 EOF final: keep discovered-animal color auras compact at high zoom. */
@keyframes damCompactFoundAura {
  from {
    transform: scale(0.82);
    opacity: 0.22;
  }

  to {
    transform: scale(1.12);
    opacity: 0;
  }
}

@media (max-width: 1200px), (max-height: 700px) {
  html body[data-stage="dam"] .map .hotspot.found .pulse {
    left: 50% !important;
    top: 50% !important;
    width: 30px !important;
    height: 30px !important;
    margin: -15px 0 0 -15px !important;
    opacity: 0.18 !important;
    animation: damCompactFoundAura 2.4s ease-out infinite !important;
    box-shadow: none !important;
  }
}

@media (max-width: 1000px), (max-height: 600px) {
  html body[data-stage="dam"] .map .hotspot.found .pulse {
    width: 20px !important;
    height: 20px !important;
    margin: -10px 0 0 -10px !important;
    opacity: 0.14 !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="dam"] .map .hotspot.found .pulse {
    width: 13px !important;
    height: 13px !important;
    margin: -6.5px 0 0 -6.5px !important;
    opacity: 0.12 !important;
  }
}

/* 2026-05-09 EOF final: align stage 2 and 4 right-panel lists to stage 1. */
:root {
  --right-list-match-icon-size: clamp(24px, 2.1vw, 34px);
  --right-list-match-icon-column: 42px;
  --right-list-match-tail-column: 26px;
  --right-list-match-row-gap: clamp(5px, 0.5vw, 8px);
  --right-list-match-list-gap: clamp(4px, 0.55vh, 7px);
  --right-list-match-row-pad-y: 0px;
  --right-list-match-row-pad-right: 8px;
}

html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide,
html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list {
  display: grid !important;
  gap: var(--right-list-match-list-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-guide-item {
  display: grid !important;
  grid-template-columns: var(--right-list-match-icon-column) minmax(0, 1fr) var(--right-list-match-tail-column) !important;
  align-items: center !important;
  gap: var(--right-list-match-row-gap) !important;
  min-height: 0 !important;
  padding: var(--right-list-match-row-pad-y) var(--right-list-match-row-pad-right) var(--right-list-match-row-pad-y) 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button {
  display: grid !important;
  grid-template-columns: var(--right-list-match-icon-column) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: var(--right-list-match-row-gap) !important;
  min-height: 0 !important;
  padding: var(--right-list-match-row-pad-y) var(--right-list-match-row-pad-right) var(--right-list-match-row-pad-y) 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-thumb,
html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button[data-institution] > span,
html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button[data-institution]:hover > span,
html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button[data-institution]:focus-visible > span {
  justify-self: start !important;
  align-self: center !important;
  width: var(--right-list-match-icon-size) !important;
  height: var(--right-list-match-icon-size) !important;
  min-width: var(--right-list-match-icon-size) !important;
  min-height: var(--right-list-match-icon-size) !important;
  max-width: var(--right-list-match-icon-size) !important;
  max-height: var(--right-list-match-icon-size) !important;
  margin: 0 !important;
  flex: 0 0 var(--right-list-match-icon-size) !important;
}

html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button[data-institution] > span,
html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button[data-institution]:hover > span,
html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button[data-institution]:focus-visible > span {
  display: block !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-guide-item strong,
html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-guide-item b,
html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button small {
  min-width: 0 !important;
  margin: 0 !important;
  color: #315c23 !important;
  font-family: inherit !important;
  font-size: var(--right-box-list-font) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-align: start !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: none !important;
}

html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-guide-item b {
  justify-self: center !important;
  align-self: center !important;
  width: var(--right-list-match-tail-column) !important;
  min-width: var(--right-list-match-tail-column) !important;
  height: var(--right-list-match-tail-column) !important;
  min-height: var(--right-list-match-tail-column) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --right-list-match-icon-size: var(--right-box-icon-size-zoom, clamp(18px, 4.6vh, 24px));
    --right-list-match-row-gap: clamp(3px, 0.42vw, 5px);
    --right-list-match-list-gap: clamp(2px, 0.38vh, 5px);
    --right-list-match-row-pad-y: clamp(1px, 0.28vh, 3px);
  }

  html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-guide-item strong,
  html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-guide-item b,
  html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button small {
    line-height: 1.03 !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --right-list-match-icon-size: var(--right-box-icon-size-zoom, clamp(13px, 3.5vh, 16px));
  }
}

/* 2026-05-09 EOF final: in expanded board, forester grows out of the viewport bottom. */
html body.board-expanded .guide,
html.board-expanded-root body.board-expanded .guide {
  position: fixed !important;
  left: clamp(4px, 1vw, 16px) !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  width: clamp(150px, 22vw, 290px) !important;
  height: 0 !important;
  min-height: 0 !important;
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
  overflow: visible !important;
  z-index: 320 !important;
}

html body.board-expanded .guide-avatar,
html.board-expanded-root body.board-expanded .guide-avatar,
html body.board-expanded[data-stage] .guide-avatar,
html.board-expanded-root body.board-expanded[data-stage] .guide-avatar {
  position: fixed !important;
  left: clamp(-52px, -6vw, -28px) !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(-18px, -1.8vh, -7px) !important;
  width: clamp(145px, 20vw, 270px) !important;
  height: clamp(205px, 33vh, 390px) !important;
  display: block !important;
  visibility: visible !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  transform: scaleX(-1) !important;
  transform-origin: bottom center !important;
  pointer-events: auto !important;
  z-index: 321 !important;
}

/* 2026-05-09 EOF final: keep meadow summary plant symbols inside each discovery tile. */
html body .stage-summary-entry[data-summary-stage="meadow"]:not([data-summary-type="fact"]) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, var(--meadow-summary-icon-box, clamp(42px, 5.4vw, 62px))) auto !important;
  justify-items: center !important;
  align-items: start !important;
  gap: clamp(4px, 0.62vw, 7px) !important;
  min-height: clamp(86px, 8.8vw, 112px) !important;
  padding: clamp(6px, 0.8vw, 9px) !important;
  overflow: hidden !important;
}

html body .stage-summary-entry[data-summary-stage="meadow"]:not([data-summary-type="fact"]) .stage-summary-entry-icon {
  position: relative !important;
  width: var(--meadow-summary-icon-box, clamp(42px, 5.4vw, 62px)) !important;
  height: var(--meadow-summary-icon-box, clamp(42px, 5.4vw, 62px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.42) !important;
  box-shadow: inset 0 0 0 1px rgba(92, 111, 45, 0.14) !important;
  overflow: hidden !important;
}

html body .stage-summary-entry[data-summary-stage="meadow"]:not([data-summary-type="fact"]) .stage-summary-entry-icon img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: 82% !important;
  height: 82% !important;
  max-width: 82% !important;
  max-height: 82% !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
}

html body .stage-summary-entry[data-summary-stage="meadow"]:not([data-summary-type="fact"]) strong {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  font-size: clamp(0.58rem, 0.76vw, 0.76rem) !important;
  line-height: 1.06 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .stage-summary-entry[data-summary-stage="meadow"]:not([data-summary-type="fact"]) {
    --meadow-summary-icon-box: clamp(30px, 7.2vh, 42px);
    min-height: clamp(66px, 15vh, 82px) !important;
    gap: clamp(2px, 0.55vh, 4px) !important;
    padding: clamp(4px, 0.7vh, 6px) !important;
    border-radius: 8px !important;
  }

  html body .stage-summary-entry[data-summary-stage="meadow"]:not([data-summary-type="fact"]) .stage-summary-entry-icon {
    border-radius: 9px !important;
  }

  html body .stage-summary-entry[data-summary-stage="meadow"]:not([data-summary-type="fact"]) strong {
    font-size: clamp(0.42rem, 1.45vh, 0.58rem) !important;
    line-height: 1.02 !important;
  }
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .stage-summary-entry[data-summary-stage="meadow"]:not([data-summary-type="fact"]) {
    --meadow-summary-icon-box: clamp(24px, 8.8vh, 34px);
    min-height: clamp(56px, 13vh, 70px) !important;
  }

  html body .stage-summary-entry[data-summary-stage="meadow"]:not([data-summary-type="fact"]) strong {
    font-size: clamp(0.36rem, 1.62vh, 0.48rem) !important;
  }
}

/* 2026-05-09 EOF final: high-zoom compendium right page spacing and left scrollbar. */
@media (max-width: 900px), (max-height: 700px), (hover: none) and (pointer: coarse) {
  html body .thesaurus-layout {
    grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr) !important;
    gap: clamp(18px, 3.7vw, 30px) !important;
  }

  html body .thesaurus-card {
    direction: rtl !important;
    margin-left: clamp(5px, 1.5vw, 12px) !important;
    margin-right: 0 !important;
    padding: 0 clamp(7px, 1.4vw, 11px) clamp(34px, 8.5dvh, 48px) clamp(12px, 2.2vw, 18px) !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: #704721 rgba(91, 61, 28, 0.16) !important;
  }

  html body .thesaurus-card > *,
  html body .thesaurus-card table,
  html body .thesaurus-card tbody,
  html body .thesaurus-card tr,
  html body .thesaurus-card th,
  html body .thesaurus-card td {
    direction: ltr !important;
  }

  html body .thesaurus-card::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
  }

  html body .thesaurus-card::-webkit-scrollbar-track {
    background: rgba(91, 61, 28, 0.16) !important;
    border-radius: 999px !important;
  }

  html body .thesaurus-card::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8a5b2b, #4f321b) !important;
    border: 2px solid rgba(255, 235, 190, 0.72) !important;
    border-radius: 999px !important;
  }
}

/* 2026-05-09: contextual help opened from the bottom question mark. */
.context-help-layer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(22, 35, 15, 0.16);
  cursor: default;
}

.context-help-marker {
  position: fixed;
  z-index: 9001;
  display: block;
  border: 2px solid rgba(255, 234, 90, 0.96);
  border-radius: clamp(10px, 1.2vw, 18px);
  background: rgba(255, 234, 90, 0.09);
  box-shadow:
    0 0 0 4px rgba(49, 76, 25, 0.46),
    0 0 24px rgba(255, 236, 98, 0.72),
    inset 0 0 18px rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.context-help-bubble {
  position: fixed;
  z-index: 9002;
  display: grid;
  gap: 4px;
  width: max-content;
  max-width: min(270px, calc(100vw - 22px));
  padding: 9px 11px 10px;
  border: 2px solid rgba(112, 83, 33, 0.34);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 251, 231, 0.98), rgba(246, 229, 179, 0.97));
  color: #243516;
  box-shadow: 0 12px 28px rgba(17, 29, 9, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-size: clamp(0.72rem, 0.74vw, 0.92rem);
  line-height: 1.18;
  pointer-events: auto;
}

.context-help-bubble strong {
  color: #265315;
  font-size: 1.02em;
  line-height: 1.05;
}

.context-help-bubble span {
  display: block;
}

.context-help-bubble::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: rgba(255, 248, 221, 0.98);
  border: solid rgba(112, 83, 33, 0.34);
  transform: rotate(45deg);
}

.context-help-bubble.is-top::after {
  left: 50%;
  bottom: -8px;
  border-width: 0 2px 2px 0;
  transform: translateX(-50%) rotate(45deg);
}

.context-help-bubble.is-bottom::after {
  left: 50%;
  top: -8px;
  border-width: 2px 0 0 2px;
  transform: translateX(-50%) rotate(45deg);
}

.context-help-bubble.is-left::after {
  right: -8px;
  top: 50%;
  border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg);
}

.context-help-bubble.is-right::after {
  left: -8px;
  top: 50%;
  border-width: 0 0 2px 2px;
  transform: translateY(-50%) rotate(45deg);
}

.context-help-close {
  position: fixed;
  right: clamp(10px, 1.8vw, 22px);
  top: clamp(10px, 1.8vw, 22px);
  z-index: 9003;
  min-height: 34px;
  padding: 7px 12px;
  border: 2px solid rgba(82, 55, 22, 0.34);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff3bc, #e4b943);
  color: #273911;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(20, 31, 9, 0.26);
  cursor: pointer;
}

.context-help-close:hover,
.context-help-close:focus-visible {
  outline: none;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

#help-button[aria-pressed="true"] {
  opacity: 1 !important;
  filter: saturate(1.25) brightness(1.22) drop-shadow(0 0 14px rgba(255, 230, 75, 0.7)) !important;
}

@media (max-width: 900px), (max-height: 700px), (hover: none) and (pointer: coarse) {
  .context-help-layer {
    background: rgba(22, 35, 15, 0.12);
  }

  .context-help-marker {
    border-width: 1.5px;
    border-radius: clamp(7px, 1.2vh, 12px);
    box-shadow:
      0 0 0 2px rgba(49, 76, 25, 0.42),
      0 0 13px rgba(255, 236, 98, 0.64);
  }

  .context-help-bubble {
    max-width: min(205px, calc(100vw - 18px));
    padding: 6px 8px 7px;
    border-width: 1.5px;
    border-radius: 10px;
    font-size: clamp(0.48rem, 1.55vh, 0.68rem);
    line-height: 1.12;
  }

  .context-help-bubble::after {
    width: 10px;
    height: 10px;
  }

  .context-help-bubble.is-top::after {
    bottom: -6px;
  }

  .context-help-bubble.is-bottom::after {
    top: -6px;
  }

  .context-help-bubble.is-left::after {
    right: -6px;
  }

  .context-help-bubble.is-right::after {
    left: -6px;
  }

  .context-help-close {
    min-height: 28px;
    padding: 5px 9px;
    font-size: clamp(0.54rem, 1.7vh, 0.72rem);
  }
}

/* 2026-05-09: keep the summary discovery panel fitted to its tile grid. */
html body .stage-summary-layout {
  align-items: start !important;
}

html body .stage-summary-discoveries {
  align-self: start !important;
  justify-self: start !important;
  width: fit-content !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

html body .stage-summary-grid {
  --summary-grid-cols: var(--summary-wide-cols, 3);
  grid-template-columns: repeat(var(--summary-grid-cols), minmax(clamp(78px, 6.8vw, 92px), clamp(92px, 8.6vw, 116px))) !important;
  width: fit-content !important;
  max-width: 100% !important;
  justify-content: start !important;
  align-content: start !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .stage-summary-grid {
    --summary-grid-cols: var(--summary-compact-cols, var(--summary-wide-cols, 3));
    grid-template-columns: repeat(var(--summary-grid-cols), minmax(clamp(52px, 10vw, 62px), clamp(62px, 12vw, 78px))) !important;
  }
}

/* 2026-05-09: keep the mountain memo species guide in exactly three rows. */
html body[data-stage="mountains"] .task-panel .task-scroll .stage-side-panel.active > .memo-guide-grid,
html body[data-stage="mountains"] .task-scroll .memo-guide-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: minmax(0, auto) !important;
  gap: clamp(3px, 0.52vh, 6px) !important;
  align-content: start !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body[data-stage="mountains"] .task-panel .task-scroll .stage-side-panel.active > .memo-guide-grid .memo-guide-item,
html body[data-stage="mountains"] .task-scroll .memo-guide-grid .memo-guide-item {
  min-width: 0 !important;
  width: 100% !important;
}

@media (max-width: 1200px), (max-height: 700px), (hover: none) and (pointer: coarse) {
  html body[data-stage="mountains"] .task-panel .task-scroll .stage-side-panel.active > .memo-guide-grid,
  html body[data-stage="mountains"] .task-scroll .memo-guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(2px, 0.42vh, 4px) !important;
  }
}

/* 2026-05-09: fact popup navigation between facts from the current stage. */
html body .fact-dialog-nav {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(10px, 1.6vw, 18px) !important;
  margin-top: clamp(12px, 1.8dvh, 20px) !important;
}

html body .fact-dialog-nav[hidden] {
  display: none !important;
}

html body .fact-dialog-arrow {
  width: clamp(34px, 4.2vw, 46px) !important;
  height: clamp(34px, 4.2vw, 46px) !important;
  min-width: clamp(34px, 4.2vw, 46px) !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #f7e8a8, #dba73c) !important;
  color: #2d4118 !important;
  box-shadow: inset 0 0 0 2px rgba(91, 62, 24, 0.18), 0 6px 14px rgba(35, 28, 13, 0.18) !important;
  font-size: clamp(1.35rem, 2.6vw, 2rem) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html body .fact-dialog-arrow:hover,
html body .fact-dialog-arrow:focus-visible {
  outline: none !important;
  filter: brightness(1.06) saturate(1.08) !important;
  transform: translateY(-1px) !important;
}

html body .fact-dialog-counter {
  min-width: clamp(54px, 6vw, 72px) !important;
  color: #536a2e !important;
  font-size: clamp(0.78rem, 1.05vw, 0.92rem) !important;
  font-weight: 1000 !important;
  text-align: center !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .fact-dialog-nav {
    gap: clamp(7px, 1.7dvh, 12px) !important;
    margin-top: clamp(8px, 1.8dvh, 13px) !important;
  }

  html body .fact-dialog-arrow {
    width: clamp(24px, 6.2dvh, 32px) !important;
    height: clamp(24px, 6.2dvh, 32px) !important;
    min-width: clamp(24px, 6.2dvh, 32px) !important;
    font-size: clamp(1rem, 3.8dvh, 1.35rem) !important;
  }

  html body .fact-dialog-counter {
    min-width: clamp(42px, 9dvh, 54px) !important;
    font-size: clamp(0.48rem, 1.8dvh, 0.62rem) !important;
  }
}

/* 2026-05-09: stage summary also shows unlocked facts below discoveries. */
html body .stage-summary-right {
  min-width: 0 !important;
  display: grid !important;
  gap: clamp(10px, 1.4vw, 16px) !important;
  align-content: start !important;
  justify-items: start !important;
}

html body .stage-summary-facts h3 {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html body .stage-summary-facts h3 span {
  color: #6b664f !important;
  font-size: 0.78em !important;
  font-weight: 1000 !important;
}

html body .stage-summary-entry[data-summary-type="fact"] .stage-summary-entry-icon {
  border-radius: 50% !important;
  background: rgba(234, 211, 119, 0.42) !important;
  color: #39561f !important;
  box-shadow: inset 0 0 0 1px rgba(92, 111, 45, 0.18) !important;
}

html body .stage-summary-entry[data-summary-type="fact"] .stage-summary-entry-icon img {
  border-radius: 50% !important;
  object-fit: cover !important;
}

html body .stage-summary-entry[data-summary-type="fact"] .stage-summary-fact-icon-letter {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: clamp(0.76rem, 1.05vw, 1rem) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

html body .stage-summary-entry[data-summary-type="fact"].is-locked .stage-summary-entry-icon {
  background: rgba(15, 15, 13, 0.84) !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .stage-summary-right {
    gap: 6px !important;
  }

  html body .stage-summary-entry[data-summary-type="fact"] .stage-summary-fact-icon-letter {
    font-size: clamp(0.48rem, 1.45vh, 0.62rem) !important;
  }
}

/* 2026-05-09: larger, more separated footer buttons in high-zoom layouts. */
@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --footer-side-margin: clamp(5px, 0.8vw, 10px);
    --footer-tool-gap-balanced: clamp(5px, 0.9vw, 9px);
    --footer-score-balanced-width: min(var(--footer-restored-score-width, 150px), calc(var(--footer-side-width-balanced) * 0.31));
    --footer-tool-balanced-size: min(
      clamp(40px, 8.4dvh, 54px),
      calc((var(--footer-side-width-balanced) - var(--footer-score-balanced-width) - (3 * var(--footer-tool-gap-balanced))) / 3)
    );
  }

  html body .bottom-bar .footer-tools {
    gap: var(--footer-tool-gap-balanced) !important;
  }

  html body .bottom-bar .footer-tools > .footer-score-board strong {
    font-size: clamp(0.82rem, calc(var(--footer-score-balanced-width) * 0.17), 1.35rem) !important;
  }
}

@media (max-height: 500px) and (min-width: 650px), (max-width: 760px) and (orientation: landscape) {
  :root {
    --footer-side-margin: clamp(6px, 0.9vw, 9px);
    --footer-tool-gap-balanced: clamp(7px, 1vw, 10px);
    --footer-score-balanced-width: min(var(--footer-restored-score-width, 92px), calc(var(--footer-side-width-balanced) * 0.19));
    --footer-tool-balanced-size: min(
      clamp(40px, 10.6dvh, 52px),
      calc((var(--footer-side-width-balanced) - var(--footer-score-balanced-width) - (3 * var(--footer-tool-gap-balanced))) / 3)
    );
  }

  html body .bottom-bar .footer-tools > .footer-score-board strong {
    font-size: clamp(0.72rem, calc(var(--footer-score-balanced-width) * 0.2), 1.2rem) !important;
  }
}

/* 2026-05-09: pull footer tool groups toward the map arrows at high zoom. */
@media (max-width: 900px), (max-height: 520px) {
  :root {
    --footer-side-margin: clamp(-34px, -4vw, -22px);
  }
}

@media (max-width: 740px), (max-height: 430px), (max-height: 500px) and (min-width: 650px) {
  :root {
    --footer-side-margin: clamp(-38px, -4.4vw, -28px);
  }
}

/* 2026-05-09: plant species cards use transparent cutouts, not cover photos. */
html body .info-dialog .animal-photo.plant-photo {
  background-color: rgba(243, 235, 204, 0.48) !important;
  background-position: center center, center 44% !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, auto calc(100% - clamp(40px, 19%, 58px)) !important;
}

html body .info-dialog .animal-photo.plant-photo figcaption {
  font-size: clamp(0.62rem, 0.22vw + 0.56rem, 0.72rem) !important;
  line-height: 1.12 !important;
  padding: 6px 8px !important;
  text-align: center !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .info-dialog .animal-photo.plant-photo {
    background-position: center center, center 43% !important;
    background-size: 100% 100%, auto calc(100% - clamp(30px, 18%, 44px)) !important;
  }

  html body .info-dialog .animal-photo.plant-photo figcaption {
    font-size: clamp(0.48rem, 1.05dvh, 0.58rem) !important;
    line-height: 1.06 !important;
    padding: 4px 6px !important;
  }
}

/* 2026-05-09: first-visit title screen. */
html body .title-screen-dialog {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #142411 !important;
  color: transparent !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

html body .title-screen-dialog::backdrop {
  background: #142411 !important;
  backdrop-filter: none !important;
}

html body .title-screen-frame {
  position: absolute !important;
  inset: 0 !important;
  width: min(100vw, 150dvh) !important;
  height: min(100dvh, 66.6667vw) !important;
  margin: auto !important;
  background: transparent url("assets/title.png?v=20260512-pwa50") center center / contain no-repeat !important;
  background: transparent image-set(
    url("assets/title.webp?v=20260512-pwa50") type("image/webp"),
    url("assets/title.png?v=20260512-pwa50") type("image/png")
  ) center center / contain no-repeat !important;
}

html body .title-screen-start {
  position: absolute !important;
  left: 50% !important;
  bottom: clamp(22px, 6.2%, 70px) !important;
  width: clamp(230px, 34%, 520px) !important;
  height: clamp(52px, 8.2%, 98px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.001) !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  cursor: pointer !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body .title-screen-start span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html body .title-screen-start:focus-visible {
  outline: none !important;
}

@supports not (height: 100dvh) {
  html body .title-screen-dialog {
    height: 100vh !important;
  }

  html body .title-screen-frame {
    width: min(100vw, 150vh) !important;
    height: min(100vh, 66.6667vw) !important;
  }
}

/* 2026-05-11: interactive account/start layer on the title screen. */
html body .title-bottom-cover {
  position: absolute !important;
  z-index: 1 !important;
  left: 25.5% !important;
  right: 24.8% !important;
  bottom: 0.2% !important;
  height: 13.2% !important;
  border-radius: 0 !important;
  clip-path: polygon(4% 38%, 16% 17%, 36% 24%, 52% 9%, 72% 22%, 95% 13%, 100% 62%, 93% 100%, 7% 100%, 0 70%) !important;
  background:
    radial-gradient(circle at 18% 48%, rgb(76, 108, 44) 0 9%, transparent 20%),
    radial-gradient(circle at 78% 40%, rgb(54, 83, 38) 0 12%, transparent 24%),
    radial-gradient(ellipse at 50% 56%, rgb(23, 48, 23), rgb(10, 25, 13) 74%, rgb(8, 21, 10) 100%) !important;
  box-shadow:
    inset 0 10px 18px rgba(255, 255, 255, 0.04),
    0 -8px 18px rgba(8, 20, 9, 0.16) !important;
}

html body .title-account-panel {
  position: absolute !important;
  z-index: 4 !important;
  left: 61.2% !important;
  top: 34.2% !important;
  width: 27.6% !important;
  min-height: 22.5% !important;
  display: grid !important;
  gap: clamp(4px, 0.72dvh, 8px) !important;
  padding: clamp(14px, 2.1dvh, 24px) clamp(15px, 1.65vw, 24px) !important;
  border: clamp(2px, 0.32dvh, 4px) solid rgba(79, 54, 24, 0.58) !important;
  border-radius: clamp(12px, 1.7vw, 20px) !important;
  background:
    linear-gradient(180deg, rgba(255, 246, 204, 0.94), rgba(226, 201, 137, 0.92)),
    rgba(246, 225, 166, 0.94) !important;
  color: #24311e !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.22),
    0 18px 34px rgba(19, 24, 12, 0.32) !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

html body .title-account-kicker {
  margin: 0 !important;
  color: #5a3b19 !important;
  font-size: clamp(0.58rem, 1.45dvh, 0.82rem) !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

html body .title-account-current {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: baseline !important;
  min-width: 0 !important;
  padding: clamp(5px, 0.8dvh, 8px) clamp(8px, 0.9vw, 12px) !important;
  border-radius: 10px !important;
  background: rgba(255, 253, 232, 0.62) !important;
  box-shadow: inset 0 0 0 1px rgba(91, 69, 31, 0.16) !important;
}

html body .title-account-current span,
html body .title-profile-stats dt,
html body .title-nickname-field span,
html body .title-auth-form label span {
  color: #6c5633 !important;
  font-size: clamp(0.52rem, 1.2dvh, 0.68rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html body .title-account-current strong {
  min-width: 0 !important;
  color: #27451c !important;
  font-size: clamp(0.82rem, 2dvh, 1.08rem) !important;
  font-weight: 1000 !important;
  line-height: 1.04 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .title-account-actions,
html body .title-auth-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(5px, 0.8dvh, 8px) !important;
}

html body .title-action,
html body .title-account-panel .title-screen-start {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: clamp(28px, 4.4dvh, 40px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 clamp(8px, 0.9vw, 13px) !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #6b7b36 !important;
  color: #fff9d7 !important;
  cursor: pointer !important;
  box-shadow: 0 3px 0 #33411e, inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  font: 1000 clamp(0.52rem, 1.25dvh, 0.78rem)/1 "Segoe UI", Arial, sans-serif !important;
  text-align: center !important;
  text-transform: uppercase !important;
  transform: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body .title-action-primary,
html body .title-account-panel .title-screen-start {
  background: #315c83 !important;
  box-shadow: 0 3px 0 #1d3854, inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

html body .title-action-danger {
  background: #8d462d !important;
  box-shadow: 0 3px 0 #512615, inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html body .title-action-muted {
  background: #5e675b !important;
  box-shadow: 0 3px 0 #333a31, inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

html body .title-action:hover,
html body .title-action:focus-visible,
html body .title-account-panel .title-screen-start:hover,
html body .title-account-panel .title-screen-start:focus-visible {
  filter: brightness(1.08) !important;
  outline: 2px solid rgba(255, 246, 181, 0.72) !important;
  outline-offset: 2px !important;
}

html body .title-auth-form,
html body .title-profile-panel {
  display: grid !important;
  gap: clamp(5px, 0.78dvh, 8px) !important;
}

html body .title-auth-form[hidden],
html body .title-profile-panel[hidden],
html body .title-action[hidden] {
  display: none !important;
}

html body .title-auth-form label,
html body .title-nickname-field {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

html body .title-auth-form input,
html body .title-nickname-field input {
  width: 100% !important;
  min-width: 0 !important;
  height: clamp(26px, 4dvh, 36px) !important;
  border: 2px solid rgba(82, 68, 35, 0.3) !important;
  border-radius: 8px !important;
  padding: 0 8px !important;
  background: rgba(255, 253, 235, 0.84) !important;
  color: #24311e !important;
  font: 850 clamp(0.62rem, 1.35dvh, 0.82rem)/1.1 "Segoe UI", Arial, sans-serif !important;
}

html body .title-profile-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin: 0 !important;
}

html body .title-profile-stats div {
  min-width: 0 !important;
  padding: 5px 6px !important;
  border-radius: 8px !important;
  background: rgba(255, 253, 232, 0.58) !important;
  box-shadow: inset 0 0 0 1px rgba(91, 69, 31, 0.14) !important;
}

html body .title-profile-stats dd {
  margin: 3px 0 0 !important;
  color: #27451c !important;
  font-size: clamp(0.62rem, 1.45dvh, 0.84rem) !important;
  font-weight: 1000 !important;
  line-height: 1.03 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .title-account-message {
  min-height: 1.2em !important;
  margin: 0 !important;
  color: #533d21 !important;
  font-size: clamp(0.52rem, 1.18dvh, 0.68rem) !important;
  font-weight: 850 !important;
  line-height: 1.16 !important;
  text-align: center !important;
}

html body .title-account-message[data-mode="success"] {
  color: #285f25 !important;
}

html body .title-account-message[data-mode="error"] {
  color: #92331d !important;
}

html body .title-stage-stamps {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

html body .title-stage-stamp {
  position: absolute !important;
  width: 12.2% !important;
  transform: translate(-50%, -50%) rotate(-4deg) !important;
  filter: drop-shadow(0 5px 5px rgba(50, 33, 12, 0.25)) !important;
}

html body .title-stage-stamp[hidden] {
  display: none !important;
}

html body .title-stage-stamp img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

html body .title-stage-stamp[data-title-stamp="dam"] {
  left: 24.2% !important;
  top: 79.2% !important;
}

html body .title-stage-stamp[data-title-stamp="meadow"] {
  left: 43.3% !important;
  top: 79.2% !important;
  transform: translate(-50%, -50%) rotate(5deg) !important;
}

html body .title-stage-stamp[data-title-stamp="mountains"] {
  left: 62.4% !important;
  top: 79.2% !important;
  transform: translate(-50%, -50%) rotate(-7deg) !important;
}

html body .title-stage-stamp[data-title-stamp="forest"] {
  left: 81.6% !important;
  top: 79.2% !important;
  transform: translate(-50%, -50%) rotate(4deg) !important;
}

@media (max-width: 900px), (max-height: 620px) {
  html body .title-account-panel {
    left: 59.5% !important;
    top: 31.5% !important;
    width: 30.5% !important;
    padding: 10px 11px !important;
    gap: 4px !important;
  }

  html body .title-account-actions,
  html body .title-auth-actions {
    gap: 4px !important;
  }

  html body .title-profile-stats {
    grid-template-columns: 1fr 1fr !important;
  }

  html body .title-stage-stamp {
    width: 11% !important;
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  html body .title-account-panel {
    left: 50% !important;
    top: calc(100% + 12px) !important;
    width: min(310px, calc(100vw - 42px)) !important;
    min-height: 0 !important;
    transform: translateX(-50%) !important;
    padding: 12px 13px !important;
  }

  html body .title-account-actions,
  html body .title-auth-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  html body .title-action,
  html body .title-account-panel .title-screen-start {
    height: 34px !important;
    font-size: 0.62rem !important;
  }

  html body .title-auth-form input,
  html body .title-nickname-field input {
    height: 32px !important;
  }

  html body .title-profile-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 2026-05-09: tighter footer location spread in phone/high-zoom map. */
@media (max-width: 900px), (max-height: 620px) {
  html body .bottom-bar .stage-node[data-stage="dam"] {
    --map-x: 36% !important;
  }

  html body .bottom-bar .stage-node[data-stage="meadow"] {
    --map-x: 47% !important;
  }

  html body .bottom-bar .stage-node[data-stage="mountains"] {
    --map-x: 53% !important;
  }

  html body .bottom-bar .stage-node[data-stage="forest"] {
    --map-x: 64% !important;
  }
}

@media (max-width: 760px), (max-height: 500px), (hover: none) and (pointer: coarse) {
  html body .bottom-bar .stage-node[data-stage="dam"] {
    --map-x: 37% !important;
  }

  html body .bottom-bar .stage-node[data-stage="meadow"] {
    --map-x: 47.5% !important;
  }

  html body .bottom-bar .stage-node[data-stage="mountains"] {
    --map-x: 52.5% !important;
  }

  html body .bottom-bar .stage-node[data-stage="forest"] {
    --map-x: 63% !important;
  }
}

/* 2026-05-09: bring phone/high-zoom map arrows inward and even out location nodes. */
@media (max-width: 900px), (max-height: 620px) {
  :root {
    --footer-map-arrow-inset: 18.2%;
  }

  html body .bottom-bar .stage-node[data-stage="dam"] {
    --map-x: 32% !important;
  }

  html body .bottom-bar .stage-node[data-stage="meadow"] {
    --map-x: 43.2% !important;
  }

  html body .bottom-bar .stage-node[data-stage="mountains"] {
    --map-x: 56.8% !important;
  }

  html body .bottom-bar .stage-node[data-stage="forest"] {
    --map-x: 68% !important;
  }
}

@media (max-width: 760px), (max-height: 500px), (hover: none) and (pointer: coarse) {
  :root {
    --footer-map-arrow-inset: 18.6%;
  }

  html body .bottom-bar .stage-node[data-stage="dam"] {
    --map-x: 32.6% !important;
  }

  html body .bottom-bar .stage-node[data-stage="meadow"] {
    --map-x: 43.4% !important;
  }

  html body .bottom-bar .stage-node[data-stage="mountains"] {
    --map-x: 56.6% !important;
  }

  html body .bottom-bar .stage-node[data-stage="forest"] {
    --map-x: 67.4% !important;
  }
}

/* 2026-05-13 correction: phone zoom keeps the right score strip slimmer and nudged farther right. */
@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .bottom-bar > #footer-score-board,
  html body .bottom-bar > .footer-score-board,
  html body .bottom-bar #footer-score-board {
    right: clamp(-10px, -1.4vw, -5px) !important;
  }
}

/* 2026-05-09: expanded stage-summary instructions are plain text, not cards. */
html body .stage-summary-instructions .stage-summary-rules-text {
  margin: 0 !important;
  padding: 0 14px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .stage-summary-instructions[open] ul {
  display: block !important;
  margin: 0 !important;
  padding: 0 14px 12px 30px !important;
  list-style: disc outside !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .stage-summary-instructions[open] li {
  display: list-item !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .stage-summary-instructions[open] li::marker {
  color: #5e7d35 !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .stage-summary-instructions .stage-summary-rules-text {
    padding: 0 9px 8px !important;
  }

  html body .stage-summary-instructions[open] ul {
    padding: 0 9px 8px 20px !important;
  }

  html body .stage-summary-instructions[open] li {
    margin-bottom: 2px !important;
  }
}

/* 2026-05-09 audit: keep footer tools outside the map on phone/high-zoom layouts. */
@media (max-width: 900px), (max-height: 520px) {
  :root {
    --footer-side-margin: clamp(4px, 0.7vw, 8px);
    --footer-tool-gap-balanced: clamp(5px, 0.85vw, 8px);
    --footer-score-balanced-width: min(var(--footer-restored-score-width, 110px), calc(var(--footer-side-width-balanced) * 0.24));
    --footer-tool-balanced-size: min(
      clamp(38px, 9.8dvh, 48px),
      calc((var(--footer-side-width-balanced) - var(--footer-score-balanced-width) - (3 * var(--footer-tool-gap-balanced))) / 3)
    );
  }
}

@media (max-height: 500px) and (min-width: 650px), (max-width: 760px) and (orientation: landscape) {
  :root {
    --footer-side-margin: clamp(4px, 0.6vw, 7px);
    --footer-tool-gap-balanced: clamp(4px, 0.75vw, 7px);
    --footer-score-balanced-width: min(var(--footer-restored-score-width, 94px), calc(var(--footer-side-width-balanced) * 0.24));
    --footer-tool-balanced-size: min(
      clamp(38px, 9.7dvh, 46px),
      calc((var(--footer-side-width-balanced) - var(--footer-score-balanced-width) - (3 * var(--footer-tool-gap-balanced))) / 3)
    );
  }
}

html body .bottom-bar .footer-tools-left,
html body .bottom-bar .footer-tools-right {
  max-width: calc(var(--footer-side-width-balanced) + 1px) !important;
}

/* 2026-05-09 audit: compact short-viewport popups stay centered. */
@media (max-height: 700px) and (min-width: 650px) {
  html body .stage-intro-dialog[open],
  html body .stage-task-dialog[open],
  html body .info-dialog[open],
  html body .fact-dialog[open] {
    left: 50% !important;
    right: auto !important;
    width: min(360px, calc(100vw - 14px)) !important;
    max-width: min(360px, calc(100vw - 14px)) !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (max-height: 520px) and (min-width: 650px) {
  :root {
    --summary-popup-pad-x: clamp(48px, 7vw, 74px);
    --summary-popup-pad-top: clamp(48px, 11dvh, 58px);
    --summary-popup-pad-bottom: clamp(48px, 11.8dvh, 62px);
  }

  html body .stage-summary-dialog[open] .stage-intro-scroll {
    max-height: calc(100dvh - var(--summary-popup-pad-top) - var(--summary-popup-pad-bottom) - 10px) !important;
  }
}

/* 2026-05-09 audit: use WebP for heavy decorative assets when supported. */
html body .stage-intro-dialog,
html body .stage-task-dialog,
html body .info-dialog,
html body .fact-dialog,
html body .achievements-dialog,
html body .map-dialog,
html body .stage-intro-dialog.stage-summary-dialog {
  background: transparent image-set(
    url("assets/popup_background.webp") type("image/webp"),
    url("assets/popup_background.png") type("image/png")
  ) center / 100% 100% no-repeat !important;
}

html body .bottom-bar {
  background: rgba(199, 186, 134, 0.92) !important;
}

html body .bottom-bar .stage-map {
  background: image-set(
    url("assets/mapa2.webp") type("image/webp"),
    url("assets/mapa2.png") type("image/png")
  ) center center / contain no-repeat !important;
}

html body .play-area > .map.stage-view {
  background:
    linear-gradient(rgba(30, 55, 22, 0.02), rgba(30, 55, 22, 0.08)),
    image-set(
      url("assets/forest-valley-bg-tatry.webp") type("image/webp"),
      url("assets/forest-valley-bg-tatry.png") type("image/png")
    ) center / cover no-repeat !important;
}

html body .play-area > .map.stage-view.bridge-unlocked {
  background:
    linear-gradient(rgba(30, 55, 22, 0.02), rgba(30, 55, 22, 0.08)),
    image-set(
      url("assets/forest-valley-bg-bridge-tatry.webp") type("image/webp"),
      url("assets/forest-valley-bg-bridge-tatry.png") type("image/png")
    ) center / cover no-repeat !important;
}

html body .concept-stage {
  background:
    linear-gradient(rgba(34, 58, 26, 0.26), rgba(34, 58, 26, 0.48)),
    image-set(
      url("assets/forest-valley-bg.webp") type("image/webp"),
      url("assets/forest-valley-bg.png") type("image/png")
    ) center / cover no-repeat !important;
}

html body .trace-game {
  background:
    linear-gradient(rgba(32, 66, 24, 0.06), rgba(32, 66, 24, 0.14)),
    image-set(
      url("assets/polana.webp") type("image/webp"),
      url("assets/polana.png") type("image/png")
    ) center / cover no-repeat !important;
}

html body .meadow-complete .trace-game {
  background:
    linear-gradient(rgba(32, 66, 24, 0.02), rgba(32, 66, 24, 0.08)),
    image-set(
      url("assets/polana-complete.webp") type("image/webp"),
      url("assets/polana-complete.png") type("image/png")
    ) center top / cover no-repeat !important;
}

html body .mountain-stage {
  background:
    linear-gradient(rgba(24, 42, 64, 0.12), rgba(24, 42, 64, 0.32)),
    image-set(
      url("assets/mountains-bg-generated.webp") type("image/webp"),
      url("assets/mountains-bg-generated.png") type("image/png")
    ) center 22% / cover no-repeat !important;
}

html body .forest-stage {
  background:
    linear-gradient(rgba(19, 35, 16, 0.08), rgba(19, 35, 16, 0.38)),
    image-set(
      url("assets/forest-camp-blocked-las3.webp") type("image/webp"),
      url("assets/forest-camp-blocked-las3.png") type("image/png")
    ) center / cover no-repeat !important;
}

html body .forest-stage.cleared {
  background:
    linear-gradient(rgba(19, 35, 16, 0.08), rgba(19, 35, 16, 0.28)),
    image-set(
      url("assets/forest-camp-clear.webp") type("image/webp"),
      url("assets/forest-camp-clear.png") type("image/png")
    ) center / cover no-repeat !important;
}

/* 2026-05-09 correction: pull footer tool groups closer to the map arrows again. */
@media (max-width: 900px), (max-height: 520px) {
  :root {
    --footer-side-margin: clamp(-33px, -3.7vw, -22px);
    --footer-tool-gap-balanced: clamp(5px, 0.82vw, 8px);
  }
}

@media (max-height: 500px) and (min-width: 650px), (max-width: 760px) and (orientation: landscape) {
  :root {
    --footer-side-margin: clamp(-36px, -4vw, -24px);
    --footer-tool-gap-balanced: clamp(5px, 0.82vw, 8px);
  }
}

/* 2026-05-09 load fix: prefer compressed WebP for initially visible UI art. */
html body .brand picture,
html body .title-board picture {
  display: contents !important;
}

html body .map-arrow,
html body .bottom-bar .map-arrow {
  background-image: image-set(
    url("assets/strzalka-cut.webp") type("image/webp"),
    url("assets/strzalka-cut.png") type("image/png")
  ) !important;
}

html body .thesaurus-button,
html body .bottom-bar .thesaurus-button {
  background-image: image-set(
    url("assets/book.webp") type("image/webp"),
    url("assets/book.png") type("image/png")
  ) !important;
}

html body .camera-button,
html body .bottom-bar .camera-button {
  background-image: image-set(
    url("assets/button-camera.webp") type("image/webp"),
    url("assets/button-camera.png") type("image/png")
  ) !important;
}

html body .sign-button,
html body .bottom-bar .sign-button {
  background-image: image-set(
    url("assets/button-help.webp") type("image/webp"),
    url("assets/button-help.png") type("image/png")
  ) !important;
}

html body .guide-avatar,
html body[data-stage] .guide-avatar {
  background-image: image-set(
    url("assets/forester-guide-cropped.webp") type("image/webp"),
    url("assets/forester-guide-cropped.png") type("image/png")
  ) !important;
}

html body .task-panel,
html body[data-stage] .task-panel {
  background: image-set(
    url("assets/tlobox.webp") type("image/webp"),
    url("assets/tlobox.png") type("image/png")
  ) center top / 100% 100% no-repeat !important;
}

html body .badge-button.backpack,
html body .bottom-bar .badge-button.backpack,
html body .bottom-bar .footer-tools > .badge-button.backpack {
  background-image: image-set(
    url("assets/bdgbtn.webp") type("image/webp"),
    url("assets/bdgbtn.png") type("image/png")
  ) !important;
}

html body .bottom-reset-button,
html body .bottom-bar .bottom-reset-button,
html body .bottom-bar .footer-tools > .bottom-reset-button {
  background: transparent image-set(
    url("assets/reset.webp") type("image/webp"),
    url("assets/reset.png") type("image/png")
  ) center center / 138% auto no-repeat !important;
}

html body .stage-sound-button,
html body .bottom-bar .stage-sound-button,
html body .bottom-bar .footer-tools > .stage-sound-button {
  background: transparent image-set(
    url("assets/btnmute.webp") type("image/webp"),
    url("assets/btnmute.png") type("image/png")
  ) center center / 172% auto no-repeat !important;
}

html body .footer-score-board,
html body .bottom-bar .footer-score-board,
html body .bottom-bar .footer-tools > .footer-score-board {
  background: transparent image-set(
    url("assets/listwapunkty.webp") type("image/webp"),
    url("assets/listwapunkty.png") type("image/png")
  ) center center / 100% 100% no-repeat !important;
}

/* 2026-05-10 correction: the compendium is the open book, not the generic popup frame. */
html body .thesaurus-dialog {
  background: transparent url("assets/tezeusz.png") center / min(99vw, calc((var(--board-height) + 8px) * 1.5)) auto no-repeat !important;
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .thesaurus-dialog {
    background-size: min(100vw, 240dvh) 100dvh !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* 2026-05-10 correction: keep the compendium right page closer to the book spine. */
html body .thesaurus-layout {
  --thesaurus-card-spine-shift: clamp(8px, 0.9vw, 18px);
  --thesaurus-card-outer-trim: clamp(6px, 0.72vw, 14px);
}

html body .thesaurus-card {
  width: calc(100% - var(--thesaurus-card-outer-trim)) !important;
  max-width: calc(100% - var(--thesaurus-card-outer-trim)) !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(calc(-1 * var(--thesaurus-card-spine-shift))) !important;
}

@media (max-width: 900px), (max-height: 700px), (hover: none) and (pointer: coarse) {
  html body .thesaurus-layout {
    --thesaurus-card-spine-shift: 0px;
    --thesaurus-card-outer-trim: clamp(8px, 2vw, 16px);
  }

  html body .thesaurus-card {
    margin-left: clamp(4px, 1vw, 8px) !important;
    margin-right: 0 !important;
  }
}

/* 2026-05-10 correction: expanded-board forester must fit vertically at high zoom. */
html body.board-expanded .guide-avatar,
html.board-expanded-root body.board-expanded .guide-avatar,
html body.board-expanded[data-stage] .guide-avatar,
html.board-expanded-root body.board-expanded[data-stage] .guide-avatar {
  background-size: auto 100% !important;
  background-position: center bottom !important;
  overflow: visible !important;
}

/* 2026-05-10 correction: 1080p at 150-175% still has room for the full summary popup. */
@media (min-width: 1000px) and (max-height: 700px) {
  html body .stage-intro-dialog.stage-summary-dialog[open] {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: min(980px, calc(100vw - clamp(18px, 4vw, 68px))) !important;
    max-width: min(980px, calc(100vw - clamp(18px, 4vw, 68px))) !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* 2026-05-10 correction: compact four-button stage-summary controls. */
html body .stage-summary-title-row {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
}

html body .stage-summary-title-row p {
  grid-column: 1 !important;
  justify-self: center !important;
}

html body .stage-summary-header-action {
  display: none !important;
}

:root {
  --summary-button-height: clamp(24px, 2.95dvh, 32px);
  --summary-button-min-width: 0px;
  --summary-button-padding-x: clamp(5px, 0.72vw, 10px);
  --summary-button-font: clamp(0.52rem, 0.68vw, 0.72rem);
}

html body .stage-summary-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  gap: clamp(4px, 0.62vw, 8px) !important;
  padding: clamp(5px, 0.72dvh, 8px) !important;
  border-radius: 12px !important;
  background: rgba(255, 250, 232, 0.34) !important;
  box-shadow: inset 0 0 0 1px rgba(101, 78, 41, 0.12) !important;
}

html body .stage-summary-actions .stage-summary-primary,
html body .stage-summary-actions .stage-summary-secondary {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: var(--summary-button-height) !important;
  height: var(--summary-button-height) !important;
  padding: 0 var(--summary-button-padding-x) !important;
  border-radius: 9px !important;
  font-size: var(--summary-button-font) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .stage-summary-actions .stage-summary-primary {
  background: linear-gradient(180deg, #f4cf62 0%, #d49a32 100%) !important;
  color: #332511 !important;
}

html body .stage-summary-actions .stage-summary-secondary {
  background: rgba(255, 248, 222, 0.72) !important;
  color: #315c23 !important;
  box-shadow: inset 0 0 0 1px rgba(83, 106, 50, 0.22), 0 3px 7px rgba(50, 32, 10, 0.12) !important;
}

html body .stage-summary-actions .stage-summary-primary[disabled],
html body .stage-summary-actions .stage-summary-secondary[disabled] {
  cursor: not-allowed !important;
  opacity: 0.44 !important;
  filter: grayscale(0.7) saturate(0.7) !important;
  box-shadow: inset 0 0 0 2px rgba(76, 67, 48, 0.14) !important;
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --summary-button-height: clamp(20px, 4.8dvh, 26px);
    --summary-button-padding-x: clamp(4px, 1.2vw, 8px);
    --summary-button-font: clamp(0.36rem, 1vw, 0.5rem);
  }

  html body .stage-summary-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 8px !important;
  }
}

/* 2026-05-10 correction: hidden dam targets never reveal animal art before discovery. */
html body[data-stage="dam"] .map .hotspot:not(.found) .icon,
html body[data-stage="dam"] .map .hotspot:not(.found) .animal-icon,
html body[data-stage="dam"] .map .hotspot:not(.found) strong {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body[data-stage="dam"] .map .hotspot.found .icon,
html body[data-stage="dam"] .map .hotspot.found .animal-icon,
html body[data-stage="dam"] .map .hotspot.found strong {
  opacity: 1 !important;
  visibility: visible !important;
}

html body .dialog-icon.logo-gios,
html body .animal-photo.logo-photo.logo-gios,
html body[data-stage="forest"] .institution-icons button[data-institution="gios"] > span {
  background-image: image-set(
    url("assets/gios-logo.webp") type("image/webp"),
    url("assets/gios-logo.png") type("image/png")
  ) !important;
}

/* 2026-05-10 correction: stage summary opens without highlighting its text container. */
html body .stage-intro-dialog.stage-summary-dialog:focus,
html body .stage-intro-dialog.stage-summary-dialog:focus-visible,
html body .stage-summary-dialog .stage-intro-scroll:focus,
html body .stage-summary-dialog .stage-intro-scroll:focus-visible,
html body .stage-summary-dialog .stage-summary-instructions:focus,
html body .stage-summary-dialog .stage-summary-instructions:focus-visible,
html body .stage-summary-dialog .stage-summary-instructions summary:focus,
html body .stage-summary-dialog .stage-summary-instructions summary:focus-visible {
  outline: 0 !important;
}

html body .stage-summary-dialog .stage-summary-instructions summary:focus,
html body .stage-summary-dialog .stage-summary-instructions summary:focus-visible {
  box-shadow: none !important;
}

/* 2026-05-10 correction: stage summary uses the corner X instead of a fourth browse button. */
html body .stage-intro-dialog.stage-summary-dialog > .close-dialog {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

html body .stage-intro-dialog.stage-summary-dialog > .close-dialog[disabled],
html body .stage-intro-dialog.stage-summary-dialog > .close-dialog.is-disabled {
  cursor: not-allowed !important;
  pointer-events: auto !important;
  opacity: 0.36 !important;
  filter: grayscale(0.7) saturate(0.7) !important;
}

/* 2026-05-10 correction: keep parchment popup content inside the inner light field. */
:root {
  --popup-pad-top: clamp(116px, 12.2dvh, 144px);
  --popup-pad-x: clamp(84px, 6.6vw, 118px);
  --popup-pad-bottom: clamp(108px, 11.6dvh, 138px);
  --popup-scroll-safety: clamp(18px, 2dvh, 30px);
  --summary-popup-pad-top: clamp(126px, 13.4dvh, 154px);
  --summary-popup-pad-x: clamp(84px, 6.8vw, 122px);
  --summary-popup-pad-bottom: clamp(118px, 12.8dvh, 148px);
}

html body .stage-intro-dialog.stage-summary-dialog[open] {
  padding: var(--summary-popup-pad-top) var(--summary-popup-pad-x) var(--summary-popup-pad-bottom) !important;
}

html body .info-dialog[open] {
  padding: var(--popup-pad-top) var(--popup-pad-x) var(--popup-pad-bottom) !important;
}

html body .stage-summary-dialog[open] .stage-intro-scroll,
html body .info-dialog[open] > .dialog-scroll {
  padding-bottom: clamp(6px, 1dvh, 12px) !important;
}

@media (min-width: 1000px) and (max-height: 700px) {
  html body .info-dialog[open] {
    left: 50% !important;
    right: auto !important;
    width: min(980px, calc(100vw - 28px)) !important;
    max-width: min(980px, calc(100vw - 28px)) !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (max-width: 999px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --popup-pad-top: clamp(54px, 11dvh, 66px);
    --popup-pad-x: clamp(32px, 6.8vw, 54px);
    --popup-pad-bottom: clamp(44px, 10.8dvh, 62px);
    --popup-scroll-safety: clamp(10px, 2.2dvh, 16px);
    --summary-popup-pad-top: clamp(50px, 11.5dvh, 66px);
    --summary-popup-pad-x: clamp(50px, 7.3vw, 70px);
    --summary-popup-pad-bottom: clamp(52px, 12.2dvh, 68px);
  }

  html body .stage-summary-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 2026-05-10 correction: summary body gets the free space; action buttons do not sit in a cloud. */
html body .stage-summary-layout {
  grid-template-columns: minmax(210px, 32%) minmax(0, 1fr) !important;
  width: 100% !important;
}

html body .stage-summary-right {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: clamp(8px, 1.1dvh, 14px) !important;
  align-content: start !important;
}

html body .stage-summary-discoveries {
  width: 100% !important;
  min-width: 0 !important;
}

html body .stage-summary-actions {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

@media (max-width: 999px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .stage-summary-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .stage-summary-actions {
    padding: 0 !important;
  }
}

/* 2026-05-10 correction: the compendium book is wide on every viewport and both pages start near the spine. */
:root {
  --thesaurus-book-width: 100vw;
  --thesaurus-content-width: min(86vw, calc(var(--board-height) * 1.86));
  --thesaurus-content-height: min(78vh, calc(var(--board-height) * 0.78));
  --thesaurus-spine-gap: clamp(20px, 2.1vw, 42px);
}

html body .thesaurus-dialog {
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--topbar-height) + var(--app-gap) - 4px) !important;
  width: 100vw !important;
  height: calc(var(--board-height) + var(--app-gap) + 18px) !important;
  max-width: 100vw !important;
  max-height: calc(var(--board-height) + var(--app-gap) + 18px) !important;
  background: transparent url("assets/tezeusz.png") center center / var(--thesaurus-book-width) 100% no-repeat !important;
}

html body .thesaurus-layout {
  left: 50% !important;
  top: 50% !important;
  width: var(--thesaurus-content-width) !important;
  height: var(--thesaurus-content-height) !important;
  transform: translate(-50%, -50%) !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--thesaurus-spine-gap) !important;
}

html body .thesaurus-grid,
html body .thesaurus-card {
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body .thesaurus-grid {
  padding: clamp(8px, 1.1dvh, 16px) clamp(8px, 0.95vw, 16px) clamp(30px, 5.6dvh, 58px) clamp(10px, 1.1vw, 18px) !important;
}

html body .thesaurus-card {
  direction: rtl !important;
  margin: 0 !important;
  padding: clamp(8px, 1.1dvh, 16px) clamp(10px, 1.05vw, 18px) clamp(32px, 6dvh, 62px) clamp(12px, 1.25vw, 22px) !important;
  scrollbar-gutter: stable !important;
}

html body .thesaurus-card > *,
html body .thesaurus-card table,
html body .thesaurus-card tbody,
html body .thesaurus-card tr,
html body .thesaurus-card th,
html body .thesaurus-card td {
  direction: ltr !important;
}

@media (max-width: 999px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --thesaurus-book-width: 100vw;
    --thesaurus-content-width: min(84vw, 176dvh);
    --thesaurus-content-height: min(76dvh, calc(100dvh - 52px));
    --thesaurus-spine-gap: clamp(18px, 3.1vw, 30px);
  }

  html body .thesaurus-dialog {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    background-size: 100vw 100dvh !important;
  }

  html body .thesaurus-grid {
    padding-bottom: clamp(28px, 6.8dvh, 44px) !important;
  }

  html body .thesaurus-card {
    padding-bottom: clamp(32px, 7.4dvh, 50px) !important;
  }
}

/* 2026-05-10 correction: compact contextual help bubbles on high zoom / phone-like viewports. */
html body .context-help-bubble {
  cursor: pointer !important;
  user-select: none !important;
}

html body .context-help-bubble:focus-visible {
  outline: 2px solid rgba(255, 237, 94, 0.9) !important;
  outline-offset: 2px !important;
}

@media (max-width: 900px), (max-height: 700px), (hover: none) and (pointer: coarse) {
  html body .context-help-layer {
    background: rgba(22, 35, 15, 0.08) !important;
  }

  html body .context-help-marker {
    border-width: 1px !important;
    border-radius: clamp(5px, 1.1vh, 9px) !important;
    background: rgba(255, 234, 90, 0.05) !important;
    box-shadow:
      0 0 0 1px rgba(49, 76, 25, 0.34),
      0 0 7px rgba(255, 236, 98, 0.48) !important;
  }

  html body .context-help-bubble {
    gap: 0 !important;
    max-width: min(128px, calc(100vw - 16px)) !important;
    padding: 4px 6px !important;
    border-width: 1px !important;
    border-radius: 8px !important;
    font-size: clamp(0.38rem, 1.08vh, 0.52rem) !important;
    line-height: 1.04 !important;
    box-shadow: 0 6px 13px rgba(17, 29, 9, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  }

  html body .context-help-bubble strong {
    font-size: 1em !important;
    line-height: 1.02 !important;
    white-space: normal !important;
  }

  html body .context-help-bubble:not(.is-expanded) span {
    display: none !important;
  }

  html body .context-help-bubble.is-expanded {
    z-index: 9004 !important;
    gap: 4px !important;
    max-width: min(250px, calc(100vw - 18px)) !important;
    padding: 7px 9px 8px !important;
    border-radius: 11px !important;
    font-size: clamp(0.55rem, 1.55vh, 0.72rem) !important;
    line-height: 1.14 !important;
    box-shadow: 0 12px 28px rgba(17, 29, 9, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  }

  html body .context-help-bubble.is-expanded span {
    display: block !important;
  }

  html body .context-help-bubble::after {
    width: 8px !important;
    height: 8px !important;
  }

  html body .context-help-bubble.is-top::after {
    bottom: -5px !important;
  }

  html body .context-help-bubble.is-bottom::after {
    top: -5px !important;
  }

  html body .context-help-bubble.is-left::after {
    right: -5px !important;
  }

  html body .context-help-bubble.is-right::after {
    left: -5px !important;
  }

  html body .context-help-bubble.is-expanded::after {
    width: 10px !important;
    height: 10px !important;
  }

  html body .context-help-close {
    min-height: 24px !important;
    padding: 4px 8px !important;
    border-width: 1px !important;
    font-size: clamp(0.48rem, 1.45vh, 0.62rem) !important;
  }
}

/* 2026-05-10 correction: summary discovery and fact tiles fill their panels evenly. */
html body .stage-summary-right {
  justify-items: stretch !important;
}

html body .stage-summary-discoveries,
html body .stage-summary-facts {
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body .stage-summary-grid,
html body .stage-summary-fact-grid {
  --summary-grid-cols: var(--summary-wide-cols, 3);
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(var(--summary-grid-cols), minmax(0, 1fr)) !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

html body .stage-summary-entry {
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .stage-summary-grid,
  html body .stage-summary-fact-grid {
    --summary-grid-cols: var(--summary-compact-cols, var(--summary-wide-cols, 3));
    grid-template-columns: repeat(var(--summary-grid-cols), minmax(0, 1fr)) !important;
  }
}

/* 2026-05-10 correction: compendium text stays inside the writable book pages. */
:root {
  --thesaurus-content-width: min(78vw, calc(var(--board-height) * 1.72));
  --thesaurus-content-height: min(70vh, calc(var(--board-height) * 0.68));
  --thesaurus-spine-gap: clamp(24px, 2.55vw, 46px);
}

html body .thesaurus-layout {
  top: 48% !important;
  width: var(--thesaurus-content-width) !important;
  height: var(--thesaurus-content-height) !important;
  gap: var(--thesaurus-spine-gap) !important;
}

html body .thesaurus-grid {
  padding-top: clamp(10px, 1.3dvh, 18px) !important;
  padding-right: clamp(12px, 1.35vw, 22px) !important;
  padding-bottom: clamp(52px, 8.2dvh, 86px) !important;
  padding-left: clamp(18px, 1.8vw, 32px) !important;
}

html body .thesaurus-card {
  padding-top: clamp(10px, 1.3dvh, 18px) !important;
  padding-right: clamp(18px, 1.8vw, 32px) !important;
  padding-bottom: clamp(54px, 8.6dvh, 90px) !important;
  padding-left: clamp(14px, 1.55vw, 26px) !important;
}

@media (max-width: 999px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --thesaurus-content-width: min(78vw, 166dvh);
    --thesaurus-content-height: min(68dvh, calc(100dvh - 72px));
    --thesaurus-spine-gap: clamp(20px, 3.4vw, 34px);
  }

  html body .thesaurus-layout {
    top: 48% !important;
  }

  html body .thesaurus-grid {
    padding-top: clamp(8px, 1.8dvh, 12px) !important;
    padding-right: clamp(8px, 1.7vw, 14px) !important;
    padding-bottom: clamp(42px, 10dvh, 58px) !important;
    padding-left: clamp(15px, 3vw, 24px) !important;
  }

  html body .thesaurus-card {
    padding-top: clamp(8px, 1.8dvh, 12px) !important;
    padding-right: clamp(15px, 3vw, 24px) !important;
    padding-bottom: clamp(44px, 10.5dvh, 62px) !important;
    padding-left: clamp(10px, 2.4vw, 18px) !important;
  }
}

/* 2026-05-10 correction: forest institution logo rings scale with the logo size. */
html body[data-stage="forest"] .institution-icons button[data-institution] {
  --forest-institution-logo-size: clamp(44px, min(5.2vw, 7.8vh), 68px);
  --forest-institution-white-ring: clamp(1px, calc(var(--forest-institution-logo-size) * 0.026), 2px);
  --forest-institution-color-ring: clamp(2px, calc(var(--forest-institution-logo-size) * 0.055), 4px);
  --forest-institution-hover-color-ring: clamp(3px, calc(var(--forest-institution-logo-size) * 0.082), 6px);
  --forest-institution-hover-halo: clamp(1px, calc(var(--forest-institution-logo-size) * 0.026), 2px);
}

html body[data-stage="forest"] .institution-icons button[data-institution] > span {
  width: var(--forest-institution-logo-size) !important;
  height: var(--forest-institution-logo-size) !important;
  border: 0 !important;
  outline: 0 !important;
  transition: box-shadow 0.16s ease, filter 0.16s ease !important;
  box-shadow:
    inset 0 0 0 var(--forest-institution-white-ring) #fff,
    inset 0 0 0 calc(var(--forest-institution-white-ring) + var(--forest-institution-color-ring)) var(--institution-ring, #78a93b),
    0 clamp(2px, 0.4vh, 4px) clamp(5px, 0.9vh, 8px) rgba(20, 32, 14, 0.16) !important;
}

html body[data-stage="forest"] .institution-icons button[data-institution]:hover > span,
html body[data-stage="forest"] .institution-icons button[data-institution]:focus-visible > span {
  box-shadow:
    inset 0 0 0 var(--forest-institution-white-ring) #fff,
    inset 0 0 0 calc(var(--forest-institution-white-ring) + var(--forest-institution-hover-color-ring)) var(--institution-ring, #78a93b),
    0 0 0 var(--forest-institution-hover-halo) rgba(255, 255, 255, 0.9),
    0 clamp(3px, 0.55vh, 5px) clamp(7px, 1.1vh, 11px) rgba(20, 32, 14, 0.2) !important;
}

html body[data-stage="forest"] .institution-icons button[data-institution].drop-ready,
html body[data-stage="forest"] .institution-icons button[data-institution].drop-ready > span {
  outline: 0 !important;
}

html body[data-stage="forest"] .institution-icons button[data-institution].drop-ready > span {
  box-shadow:
    inset 0 0 0 var(--forest-institution-white-ring) #fff,
    inset 0 0 0 calc(var(--forest-institution-white-ring) + var(--forest-institution-hover-color-ring)) var(--institution-ring, #78a93b),
    0 0 0 var(--forest-institution-hover-halo) rgba(255, 238, 105, 0.66),
    0 clamp(2px, 0.4vh, 4px) clamp(5px, 0.9vh, 8px) rgba(20, 32, 14, 0.16) !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="forest"] .institution-icons button[data-institution] {
    --forest-institution-logo-size: clamp(28px, 4.4vw, 38px);
    --forest-institution-white-ring: 1px;
    --forest-institution-color-ring: clamp(1px, calc(var(--forest-institution-logo-size) * 0.05), 2px);
    --forest-institution-hover-color-ring: clamp(2px, calc(var(--forest-institution-logo-size) * 0.075), 3px);
    --forest-institution-hover-halo: 1px;
  }
}

/* 2026-05-10 correction: center the stage title below the "Plansza" label. */
html body .stage-summary-dialog .stage-summary-head h2 {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* 2026-05-10 correction: keep forest statement bubbles clear of and above the guide. */
html body[data-stage="forest"] .forest-stage > .forest-assignment,
html body[data-stage="forest"] .forest-stage > .forest-assignment:not([hidden]) {
  --forest-statement-tray-left: clamp(126px, 14vw, 210px);
  --forest-statement-tray-right-gap: clamp(8px, 1.2vw, 18px);
  left: var(--forest-statement-tray-left) !important;
  right: auto !important;
  width: min(clamp(300px, 45%, 620px), calc(100% - var(--forest-statement-tray-left) - var(--forest-statement-tray-right-gap))) !important;
  max-width: calc(100% - var(--forest-statement-tray-left) - var(--forest-statement-tray-right-gap)) !important;
  top: calc(63% + clamp(6px, 1vh, 16px)) !important;
  bottom: clamp(6px, 1.2vh, 14px) !important;
  min-height: 76px !important;
  overflow: visible !important;
  isolation: isolate !important;
  z-index: 430 !important;
}

html body[data-stage="forest"] .forest-stage > .forest-assignment .forest-statement-pool {
  position: relative !important;
  z-index: 431 !important;
}

html body[data-stage="forest"] .forest-stage > .forest-assignment .forest-statement {
  position: relative !important;
  z-index: 432 !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="forest"] .forest-stage > .forest-assignment,
  html body[data-stage="forest"] .forest-stage > .forest-assignment:not([hidden]) {
    --forest-statement-tray-left: clamp(118px, 30vw, 148px);
    --forest-statement-tray-right-gap: clamp(5px, 1.8vw, 10px);
    left: var(--forest-statement-tray-left) !important;
    right: auto !important;
    width: min(clamp(240px, 72vw, 540px), calc(100% - var(--forest-statement-tray-left) - var(--forest-statement-tray-right-gap))) !important;
    max-width: calc(100% - var(--forest-statement-tray-left) - var(--forest-statement-tray-right-gap)) !important;
    top: calc(64% + 4px) !important;
    bottom: 4px !important;
    min-height: 56px !important;
    padding: 2px !important;
  }

  html body[data-stage="forest"] .forest-stage > .forest-assignment .forest-statement-pool {
    grid-template-columns: repeat(auto-fit, minmax(clamp(82px, 13vw, 104px), 1fr)) !important;
    gap: 2px !important;
    padding-right: 2px !important;
  }

  html body[data-stage="forest"] .forest-stage > .forest-assignment .forest-statement {
    padding: 1px 3px !important;
    font-size: clamp(0.34rem, 0.76vw, 0.46rem) !important;
    line-height: 1 !important;
  }
}

/* 2026-05-10 correction: cleaner species and institution cards. */
@media (min-width: 701px) and (min-height: 701px) {
  html body .info-dialog {
    width: min(1160px, calc(100vw - clamp(12px, 3.2vw, 58px))) !important;
  }
}

html body .info-dialog.institution-info-dialog .dialog-icon {
  display: none !important;
}

html body .info-dialog.institution-info-dialog .dialog-header {
  gap: 0 !important;
}

html body .info-dialog .animal-photo.logo-photo figcaption,
html body .info-dialog .animal-photo.plant-photo figcaption {
  font-size: clamp(0.62rem, 0.22vw + 0.56rem, 0.72rem) !important;
  line-height: 1.12 !important;
  padding: 6px 8px !important;
  min-height: 0 !important;
  text-align: center !important;
}

/* 2026-05-10 correction: species-card photos should not consume the card at high zoom. */
html body .info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .species-card-layout {
  align-items: start !important;
  grid-template-columns: minmax(clamp(150px, 22vw, 260px), 0.36fr) minmax(0, 1fr) !important;
  gap: clamp(9px, 1vw, 14px) !important;
}

html body .info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .species-details {
  min-width: 0 !important;
}

html body .info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .animal-photo:not(.logo-photo) {
  align-self: start !important;
  width: 100% !important;
  min-height: 0 !important;
  height: clamp(170px, 32dvh, 280px) !important;
  max-height: min(42dvh, 300px) !important;
  background-size: cover !important;
}

/* 2026-05-11 correction: smaller image caption in first-stage species cards. */
html body .info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .animal-photo:not(.logo-photo):not(.plant-photo) figcaption {
  font-size: clamp(0.54rem, 0.18vw + 0.5rem, 0.66rem) !important;
  line-height: 1.12 !important;
  padding: 5px 7px !important;
}

@media (min-width: 1000px) and (max-height: 760px) {
  html body .info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .species-card-layout {
    grid-template-columns: minmax(clamp(145px, 23vw, 235px), 0.34fr) minmax(0, 1fr) !important;
    gap: clamp(8px, 0.9vw, 12px) !important;
  }

  html body .info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .animal-photo:not(.logo-photo) {
    height: clamp(145px, 30dvh, 220px) !important;
    max-height: min(38dvh, 230px) !important;
  }
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .species-card-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .animal-photo:not(.logo-photo) {
    justify-self: center !important;
    width: min(74%, 260px) !important;
    height: clamp(96px, 27dvh, 138px) !important;
    max-height: 30dvh !important;
  }
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .info-dialog {
    --popup-scroll-font: clamp(0.62rem, 1.35dvh, 0.76rem);
    --popup-small-font: clamp(0.52rem, 1.15dvh, 0.64rem);
    --popup-title-font: clamp(0.9rem, 1.95dvh, 1.08rem);
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - clamp(14px, 4vw, 34px)) !important;
    max-width: calc(100vw - clamp(14px, 4vw, 34px)) !important;
    transform: translate(-50%, -50%) !important;
  }

  html body .info-dialog .dialog-header {
    gap: clamp(8px, 1.4vw, 12px) !important;
    margin-bottom: clamp(4px, 0.8dvh, 8px) !important;
  }

  html body .info-dialog .dialog-header h2 {
    font-size: var(--popup-title-font) !important;
    line-height: 1.04 !important;
  }

  html body .info-dialog .dialog-header p,
  html body .info-dialog .species-details > p,
  html body .info-dialog .facts-table th,
  html body .info-dialog .facts-table td,
  html body .info-dialog .trivia-list li,
  html body .info-dialog .map-caption,
  html body .info-dialog .source-links a {
    font-size: var(--popup-small-font) !important;
    line-height: 1.16 !important;
  }

  html body .info-dialog .animal-photo.logo-photo figcaption,
  html body .info-dialog .animal-photo.plant-photo figcaption {
    font-size: clamp(0.48rem, 1.05dvh, 0.58rem) !important;
    line-height: 1.06 !important;
    padding: 4px 6px !important;
  }
}

/* 2026-05-10 correction: 1080p at 150 percent zoom keeps the desktop card layout. */
@media (min-width: 1000px) and (max-height: 760px) {
  :root {
    --popup-pad-top: clamp(68px, 10dvh, 82px);
    --popup-pad-x: clamp(70px, 6vw, 96px);
    --popup-pad-bottom: clamp(58px, 8.8dvh, 74px);
    --popup-scroll-safety: clamp(10px, 1.4dvh, 14px);
    --summary-popup-pad-top: clamp(76px, 11dvh, 92px);
    --summary-popup-pad-x: clamp(72px, 6vw, 98px);
    --summary-popup-pad-bottom: clamp(68px, 9.8dvh, 86px);
  }

  html body .stage-intro-dialog[open]:not(.stage-summary-dialog),
  html body .stage-task-dialog[open],
  html body .info-dialog[open],
  html body .fact-dialog[open] {
    left: 50% !important;
    right: auto !important;
    padding: var(--popup-pad-top) var(--popup-pad-x) var(--popup-pad-bottom) !important;
    max-height: calc(100dvh - 14px) !important;
    transform: translate(-50%, -50%) !important;
  }

  html body .stage-intro-dialog[open]:not(.stage-summary-dialog) {
    width: min(980px, calc(100vw - 24px)) !important;
    max-width: min(980px, calc(100vw - 24px)) !important;
  }

  html body .stage-task-dialog[open],
  html body .fact-dialog[open] {
    width: min(760px, calc(100vw - 24px)) !important;
    max-width: min(760px, calc(100vw - 24px)) !important;
  }

  html body .info-dialog[open] {
    width: min(1160px, calc(100vw - 24px)) !important;
    max-width: min(1160px, calc(100vw - 24px)) !important;
  }

  html body .stage-intro-dialog[open]:not(.stage-summary-dialog) > .dialog-scroll,
  html body .stage-task-dialog[open] > .dialog-scroll,
  html body .info-dialog[open] > .dialog-scroll,
  html body .fact-dialog[open] > .dialog-scroll {
    max-height: calc(100dvh - var(--popup-pad-top) - var(--popup-pad-bottom) - var(--popup-scroll-safety)) !important;
  }

  html body .info-dialog .species-card-layout {
    grid-template-columns: minmax(180px, 0.48fr) minmax(0, 1fr) !important;
    gap: clamp(8px, 0.9vw, 12px) !important;
    margin-top: clamp(6px, 0.9dvh, 10px) !important;
  }

  html body .info-dialog .map-and-notes {
    grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1fr) !important;
    gap: clamp(8px, 0.9vw, 12px) !important;
    margin-top: clamp(6px, 0.9dvh, 10px) !important;
  }

  html body .info-dialog .map-and-notes > section:first-child {
    grid-template-columns: none !important;
  }

  html body .info-dialog .animal-photo {
    min-height: clamp(116px, 18dvh, 170px) !important;
  }
}

/* 2026-05-11 correction: institution card logos fit cleanly inside the image area. */
html body .info-dialog.institution-info-dialog .animal-photo.logo-photo {
  background-color: rgba(255, 250, 232, 0.76) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: min(90%, 430px) auto !important;
}

html body .info-dialog.institution-info-dialog .animal-photo.logo-photo.logo-gios {
  background-image: url("assets/gios-logo-side.png") !important;
}

html body .info-dialog.institution-info-dialog .animal-photo.logo-photo.logo-gdos {
  background-image: url("assets/gdos-logo-side.png") !important;
}

html body .info-dialog.institution-info-dialog .animal-photo.logo-photo.logo-rdos {
  background-image: url("assets/rdos-logo-side.png") !important;
}

html body .info-dialog.institution-info-dialog .animal-photo.logo-photo.logo-eea {
  background-image: url("assets/eea-logo-side.png") !important;
}

html body .info-dialog.institution-info-dialog .animal-photo.logo-photo.logo-iop {
  background-image: url("assets/iop-logo-official.svg") !important;
  background-color: rgba(255, 255, 255, 0.86) !important;
  background-size: min(78%, 360px) auto !important;
}

/* 2026-05-10 correction: enlarged forest statement preview over the board. */
html body[data-stage="forest"] .forest-stage {
  overflow: visible !important;
}

html body[data-stage="forest"] .forest-stage > .forest-statement-preview {
  position: absolute !important;
  left: 50% !important;
  top: 8% !important;
  transform: translateX(-50%) translateY(-6px) scale(0.98) !important;
  width: min(68%, 620px) !important;
  min-height: clamp(44px, 7.5vh, 78px) !important;
  max-height: min(26%, 150px) !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(8px, 1.1vw, 14px) clamp(14px, 1.8vw, 22px) !important;
  border: 2px solid rgba(111, 75, 30, 0.34) !important;
  border-radius: 16px !important;
  background: rgba(255, 249, 229, 0.96) !important;
  box-shadow:
    0 10px 24px rgba(18, 31, 13, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62) !important;
  color: #2f421d !important;
  font-size: clamp(0.82rem, min(1.25vw, 2.2vh), 1.16rem) !important;
  font-weight: 900 !important;
  line-height: 1.16 !important;
  text-align: center !important;
  text-wrap: balance !important;
  overflow: auto !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 470 !important;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease !important;
}

html body[data-stage="forest"] .forest-stage > .forest-statement-preview.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="forest"] .forest-stage > .forest-statement-preview {
    width: min(62%, 430px) !important;
    min-height: clamp(30px, 9vh, 46px) !important;
    max-height: 24% !important;
    padding: 5px 9px !important;
    border-radius: 10px !important;
    font-size: clamp(0.46rem, min(1.35vw, 2vh), 0.72rem) !important;
    line-height: 1.08 !important;
  }
}

/* 2026-05-10 correction: 150 percent desktop zoom keeps card popups balanced. */
@media (min-width: 1000px) and (max-height: 760px) {
  html body .info-dialog[open] {
    --popup-pad-top: clamp(76px, 11dvh, 88px);
    --popup-pad-x: clamp(84px, 7vw, 104px);
    --popup-pad-bottom: clamp(72px, 10dvh, 84px);
    width: min(1040px, calc(100vw - clamp(88px, 9vw, 150px))) !important;
    max-width: min(1040px, calc(100vw - clamp(88px, 9vw, 150px))) !important;
  }

  html body .info-dialog[open] > .dialog-scroll {
    max-height: calc(100dvh - var(--popup-pad-top) - var(--popup-pad-bottom) - var(--popup-scroll-safety)) !important;
  }

  html body .info-dialog .species-card-layout {
    grid-template-columns: minmax(170px, 0.44fr) minmax(0, 1fr) !important;
  }

  html body .info-dialog .map-and-notes {
    grid-template-columns: minmax(205px, 0.72fr) minmax(0, 1fr) !important;
  }
}

/* 2026-05-10 correction: expanded board is larger than the viewport, with bars reachable by vertical scroll. */
:root {
  --expanded-board-height: calc(118dvh + clamp(0px, 2dvh, 24px));
  --expanded-page-height: calc(
    var(--topbar-height) + var(--app-gap) + var(--expanded-board-height) + var(--app-gap) + var(--footer-height) + 16px
  );
}

html.board-expanded-root,
html.board-expanded-root body,
html body.board-expanded {
  height: auto !important;
  min-height: var(--expanded-page-height) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

html body.board-expanded .app,
html.board-expanded-root body.board-expanded .app {
  width: 100vw !important;
  height: auto !important;
  min-height: var(--expanded-page-height) !important;
  grid-template-rows: var(--topbar-height) var(--expanded-board-height) var(--footer-height) !important;
  gap: var(--app-gap) !important;
  padding: 0 0 12px !important;
  align-content: start !important;
  overflow: visible !important;
}

html body.board-expanded .topbar,
html.board-expanded-root body.board-expanded .topbar,
html body.board-expanded .bottom-bar,
html.board-expanded-root body.board-expanded .bottom-bar {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body.board-expanded .topbar,
html.board-expanded-root body.board-expanded .topbar {
  grid-row: 1 !important;
  margin-top: 0 !important;
}

html body.board-expanded .play-area,
html.board-expanded-root body.board-expanded .play-area {
  position: relative !important;
  inset: auto !important;
  grid-row: 2 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: var(--expanded-board-height) !important;
  min-height: var(--expanded-board-height) !important;
  max-height: var(--expanded-board-height) !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}

html body.board-expanded .play-area > .stage-view,
html body.board-expanded .play-area > .stage-view.active,
html.board-expanded-root body.board-expanded .play-area > .stage-view,
html.board-expanded-root body.board-expanded .play-area > .stage-view.active {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

html body.board-expanded .bottom-bar,
html.board-expanded-root body.board-expanded .bottom-bar {
  grid-row: 3 !important;
  position: relative !important;
  inset: auto !important;
  height: var(--footer-height) !important;
  min-height: var(--footer-height) !important;
  max-height: var(--footer-height) !important;
  overflow: visible !important;
  transform: none !important;
}

/* 2026-05-10 correction: in-board round stop control and compact round-end toast. */
:root {
  --round-stop-button-size: var(--board-fullscreen-button-size, clamp(42px, min(4.4vw, 7vh), 58px));
  --round-stop-icon-size: calc(var(--round-stop-button-size) * 0.58);
}

html body .round-stop-button,
html body.board-expanded .round-stop-button {
  position: absolute !important;
  right: calc(var(--game-right-panel-width, 0px) + var(--board-right-safe-inset, clamp(14px, 1.4vw, 24px))) !important;
  bottom: clamp(12px, 1.4vh, 22px) !important;
  z-index: 146 !important;
  width: var(--round-stop-button-size) !important;
  height: var(--round-stop-button-size) !important;
  min-width: var(--round-stop-button-size) !important;
  min-height: var(--round-stop-button-size) !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: clamp(10px, 1vw, 14px) !important;
  color: #8a352d !important;
  background: rgba(255, 248, 224, 0.82) !important;
  box-shadow:
    0 4px 10px rgba(33, 43, 19, 0.18),
    inset 0 0 0 2px rgba(138, 53, 45, 0.28) !important;
  cursor: pointer !important;
  text-indent: -999px !important;
  overflow: hidden !important;
}

html body .round-stop-button::before,
html body.board-expanded .round-stop-button::before {
  content: "" !important;
  width: var(--round-stop-icon-size) !important;
  height: var(--round-stop-icon-size) !important;
  display: block !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M7%204.5h10v2H7v-2Zm5%202.5a7%207%200%201%200%200%2014%207%207%200%200%200%200-14Zm0%202.3a4.7%204.7%200%201%201%200%209.4%204.7%204.7%200%200%201%200-9.4Zm-2.1%202.1h4.2v4.2H9.9v-4.2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M7%204.5h10v2H7v-2Zm5%202.5a7%207%200%201%200%200%2014%207%207%200%200%200%200-14Zm0%202.3a4.7%204.7%200%201%201%200%209.4%204.7%204.7%200%200%201%200-9.4Zm-2.1%202.1h4.2v4.2H9.9v-4.2Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  text-indent: 0 !important;
}

html body .round-stop-button:hover:not(:disabled),
html body .round-stop-button:focus-visible:not(:disabled) {
  background: rgba(255, 250, 232, 0.96) !important;
  outline: 3px solid rgba(138, 53, 45, 0.66) !important;
  outline-offset: 3px !important;
  transform: translateY(-1px) !important;
}

html body .round-stop-button:disabled,
html body .round-stop-button.is-disabled {
  opacity: 0.42 !important;
  cursor: default !important;
  filter: grayscale(0.4) !important;
}

html body.board-expanded .round-stop-button,
html.board-expanded-root body.board-expanded .round-stop-button {
  position: fixed !important;
  right: clamp(12px, 1.4vw, 24px) !important;
  bottom: clamp(12px, 1.6vh, 24px) !important;
  z-index: 1006 !important;
}

.round-end-toast[hidden] {
  display: none !important;
}

.round-end-toast {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2600 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: scale(0.98) !important;
  transition: opacity 130ms ease, transform 130ms ease !important;
}

.round-end-toast.is-visible {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.round-end-toast-card {
  min-width: clamp(188px, 22vw, 280px) !important;
  min-height: clamp(132px, 18vh, 190px) !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: clamp(10px, 1.4vh, 16px) !important;
  padding: clamp(18px, 2.1vw, 28px) clamp(22px, 2.4vw, 34px) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.92), rgba(255, 249, 226, 0.96) 54%, rgba(231, 216, 169, 0.96)) !important;
  box-shadow:
    0 18px 54px rgba(13, 22, 10, 0.36),
    inset 0 0 0 2px rgba(97, 73, 39, 0.16),
    inset 0 0 0 7px rgba(255, 255, 255, 0.28) !important;
}

.round-end-toast-icon {
  position: relative !important;
  width: clamp(70px, 8.5vw, 112px) !important;
  height: clamp(70px, 8.5vw, 112px) !important;
  display: grid !important;
  place-items: center !important;
}

.round-end-toast-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.round-end-toast.is-failed .round-end-toast-icon img {
  display: none !important;
}

.round-end-toast.is-failed .round-end-toast-icon::before,
.round-end-toast.is-failed .round-end-toast-icon::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 82% !important;
  height: 18% !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #f06b52, #9c302a) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 225, 196, 0.5),
    0 5px 14px rgba(93, 28, 23, 0.28) !important;
}

.round-end-toast.is-failed .round-end-toast-icon::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.round-end-toast.is-failed .round-end-toast-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.round-end-toast-card strong {
  color: #2f421d !important;
  font-size: clamp(1.18rem, 1.8vw, 1.72rem) !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  text-align: center !important;
}

.round-end-toast.is-failed .round-end-toast-card strong {
  color: #8a352d !important;
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --round-stop-button-size: var(--board-fullscreen-button-size, clamp(36px, 8.8vh, 40px));
    --round-stop-icon-size: calc(var(--round-stop-button-size) * 0.64);
  }

  .round-end-toast-card {
    min-width: clamp(150px, 34vw, 220px) !important;
    min-height: clamp(96px, 28vh, 136px) !important;
    border-radius: 16px !important;
    padding: 14px 20px !important;
  }

  .round-end-toast-icon {
    width: clamp(50px, 15vh, 76px) !important;
    height: clamp(50px, 15vh, 76px) !important;
  }
}

/* 2026-05-10 correction: expanded board keeps its top controls inside the viewport. */
:root {
  --expanded-board-height: calc(106dvh + clamp(0px, 1dvh, 12px));
  --expanded-page-height: calc(
    var(--topbar-height) + var(--app-gap) + var(--expanded-board-height) + var(--app-gap) + var(--footer-height) + 16px
  );
}

/* 2026-05-10 correction: first board shows the current randomized animal target as an image-only clue. */
:root {
  --dam-target-bubble-size: clamp(76px, min(9vw, 12dvh), 118px);
  --dam-target-icon-size: calc(var(--dam-target-bubble-size) * 0.78);
}

html body[data-stage="dam"] .dam-target-bubble {
  position: absolute !important;
  left: 50% !important;
  top: clamp(10px, 1.4dvh, 18px) !important;
  z-index: 155 !important;
  width: var(--dam-target-bubble-size) !important;
  height: var(--dam-target-bubble-size) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.98), rgba(255, 250, 232, 0.96) 64%, rgba(232, 216, 171, 0.94)) !important;
  box-shadow:
    0 12px 28px rgba(21, 32, 14, 0.22),
    inset 0 0 0 2px rgba(80, 110, 42, 0.16),
    inset 0 0 0 8px rgba(255, 255, 255, 0.34) !important;
  transform: translateX(-50%) translateY(-4px) scale(0.96) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease !important;
}

html body[data-stage="dam"] .dam-target-bubble[hidden] {
  display: none !important;
}

html body[data-stage="dam"] .dam-target-bubble.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

html body[data-stage="dam"] .dam-target-bubble::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -8px !important;
  width: calc(var(--dam-target-bubble-size) * 0.18) !important;
  height: calc(var(--dam-target-bubble-size) * 0.18) !important;
  border-radius: 4px 0 999px 0 !important;
  background: rgba(255, 250, 232, 0.96) !important;
  box-shadow: 4px 5px 8px rgba(21, 32, 14, 0.08) !important;
  transform: translateX(-50%) rotate(45deg) !important;
}

html body[data-stage="dam"] .dam-target-bubble .animal-icon {
  position: relative !important;
  z-index: 2 !important;
  width: var(--dam-target-icon-size) !important;
  height: var(--dam-target-icon-size) !important;
  border-radius: 50% !important;
  display: block !important;
  box-shadow: 0 0 0 4px rgba(95, 127, 49, 0.14) !important;
  background-size: cover !important;
}

html body[data-stage="dam"] .dam-target-bubble.is-attention {
  animation: damTargetNudge 0.78s ease both !important;
}

@keyframes damTargetNudge {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  24% {
    transform: translateX(-50%) translateY(-2px) scale(1.08);
  }
  48% {
    transform: translateX(-50%) translateY(0) scale(0.98);
  }
  72% {
    transform: translateX(-50%) translateY(-1px) scale(1.04);
  }
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --dam-target-bubble-size: clamp(50px, min(12vw, 15dvh), 72px);
    --dam-target-icon-size: calc(var(--dam-target-bubble-size) * 0.78);
  }

  html body[data-stage="dam"] .dam-target-bubble {
    top: clamp(6px, 1.5dvh, 10px) !important;
    box-shadow:
      0 8px 18px rgba(21, 32, 14, 0.2),
      inset 0 0 0 2px rgba(80, 110, 42, 0.14),
      inset 0 0 0 5px rgba(255, 255, 255, 0.3) !important;
  }

  html body[data-stage="dam"] .dam-target-bubble .animal-icon {
    box-shadow: 0 0 0 3px rgba(95, 127, 49, 0.13) !important;
  }
}

/* 2026-05-10 correction: smaller, consistently lifted title logo. */
:root {
  --title-logo-topbar-offset: clamp(7px, 0.8dvh, 10px);
  --title-logo-width-tuned: clamp(196px, 21.6vw, 420px);
  --title-logo-height-tuned: clamp(48px, 7.4dvh, 84px);
  --title-logo-lift-tuned: clamp(-10px, -0.9dvh, -6px);
}

html body .topbar {
  transform: translateY(var(--title-logo-topbar-offset)) !important;
}

html body .title-board,
html body .topbar .title-board {
  top: var(--title-logo-lift-tuned) !important;
  width: var(--title-logo-width-tuned) !important;
  height: var(--title-logo-height-tuned) !important;
}

html body .title-board .title-logo {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --title-logo-topbar-offset: clamp(7px, 1.45dvh, 9px);
    --title-logo-width-tuned: min(var(--footer-restored-map-width, 300px), clamp(164px, 34vw, 184px));
    --title-logo-height-tuned: clamp(32px, 7.8dvh, 44px);
    --title-logo-lift-tuned: clamp(-9px, -1.7dvh, -6px);
  }
}

@media (max-width: 760px), (max-height: 460px) {
  :root {
    --title-logo-width-tuned: min(var(--footer-restored-map-width, 290px), clamp(158px, 35vw, 176px));
    --title-logo-height-tuned: clamp(30px, 7.4dvh, 40px);
  }
}

/* 2026-05-10 correction: keep the total-score strip in the right part of the footer. */
html body .bottom-bar .footer-tools-right {
  left: calc(50% + (var(--footer-restored-map-width, 620px) / 2) + var(--footer-side-margin, 10px)) !important;
  right: max(var(--page-side-gap, 8px), clamp(10px, 1.1vw, 18px)) !important;
  width: auto !important;
  max-width: none !important;
  justify-content: flex-start !important;
}

html body .bottom-bar .footer-tools-right > .stage-sound-button {
  order: 1 !important;
}

html body .bottom-bar .footer-tools-right > .badge-button.backpack {
  order: 2 !important;
}

html body .bottom-bar .footer-tools-right > .bottom-reset-button {
  order: 3 !important;
}

html body .bottom-bar .footer-tools-right > .footer-score-board {
  order: 4 !important;
  margin-left: auto !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .bottom-bar .footer-tools-right {
    right: max(var(--page-side-gap, 8px), clamp(7px, 1vw, 12px)) !important;
  }
}

/* 2026-05-10 correction: expanded board uses one document scrollbar only. */
html.board-expanded-root {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
}

html.board-expanded-root body,
html.board-expanded-root body.board-expanded,
html body.board-expanded {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* 2026-05-10 correction: first-board round shows only the currently requested trace. */
html body[data-stage="dam"].dam-target-mode .map .hotspot.not-current-target {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body[data-stage="dam"].dam-target-mode .map .hotspot.not-current-target::before,
html body[data-stage="dam"].dam-target-mode .map .hotspot.not-current-target .pulse,
html body[data-stage="dam"].dam-target-mode .map .hotspot.not-current-target .icon,
html body[data-stage="dam"].dam-target-mode .map .hotspot.not-current-target .animal-icon,
html body[data-stage="dam"].dam-target-mode .map .hotspot.not-current-target strong {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  pointer-events: none !important;
}

html body[data-stage="dam"].dam-target-mode .map .hotspot.current-target {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body[data-stage="dam"].dam-target-mode .map .hotspot.current-target::before {
  opacity: 0.82 !important;
  visibility: visible !important;
  filter: brightness(1.08) drop-shadow(0 0 6px rgba(255, 249, 203, 0.34)) !important;
}

html body[data-stage="dam"].dam-target-mode .map .hotspot.current-target .pulse {
  opacity: 0.08 !important;
  visibility: visible !important;
}

/* 2026-05-10 correction: larger centered current-animal clue. */
:root {
  --dam-target-bubble-size: clamp(152px, min(18vw, 24dvh), 236px);
  --dam-target-icon-size: calc(var(--dam-target-bubble-size) * 0.78);
}

html body[data-stage="dam"] .dam-target-bubble {
  left: 50% !important;
  top: 50% !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) scale(0.96) !important;
  box-shadow:
    0 16px 34px rgba(21, 32, 14, 0.24),
    inset 0 0 0 2px rgba(80, 110, 42, 0.16),
    inset 0 0 0 10px rgba(255, 255, 255, 0.34) !important;
}

html body[data-stage="dam"] .dam-target-bubble.is-visible {
  transform: translate(-50%, -50%) scale(1) !important;
}

html body[data-stage="dam"] .dam-target-bubble::after {
  display: none !important;
}

html body[data-stage="dam"] .dam-target-bubble.is-attention {
  animation: damTargetCenterNudge 0.78s ease both !important;
}

@keyframes damTargetCenterNudge {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  24% {
    transform: translate(-50%, calc(-50% - 3px)) scale(1.08);
  }
  48% {
    transform: translate(-50%, -50%) scale(0.98);
  }
  72% {
    transform: translate(-50%, calc(-50% - 1px)) scale(1.04);
  }
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --dam-target-bubble-size: clamp(94px, min(24vw, 30dvh), 144px);
    --dam-target-icon-size: calc(var(--dam-target-bubble-size) * 0.78);
  }

  html body[data-stage="dam"] .dam-target-bubble {
    top: 50% !important;
    box-shadow:
      0 10px 22px rgba(21, 32, 14, 0.22),
      inset 0 0 0 2px rgba(80, 110, 42, 0.14),
      inset 0 0 0 6px rgba(255, 255, 255, 0.3) !important;
  }
}

/* 2026-05-10 correction: current-animal clue scales down on zoomed/small screens. */
@media (max-width: 1300px), (max-height: 760px) {
  :root {
    --dam-target-bubble-size: clamp(122px, min(15vw, 20dvh), 176px);
    --dam-target-icon-size: calc(var(--dam-target-bubble-size) * 0.78);
  }
}

@media (max-width: 1100px), (max-height: 640px) {
  :root {
    --dam-target-bubble-size: clamp(104px, min(14vw, 18dvh), 142px);
    --dam-target-icon-size: calc(var(--dam-target-bubble-size) * 0.78);
  }
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --dam-target-bubble-size: clamp(74px, min(16vw, 20dvh), 104px);
    --dam-target-icon-size: calc(var(--dam-target-bubble-size) * 0.78);
  }
}

/* 2026-05-10 correction: current-round dam finds sit under the round score, while the side list stays persistent. */
html body .play-area > .sidebar-round-hud .dam-round-found-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: clamp(3px, 0.48vw, 6px) !important;
  max-width: clamp(96px, 12vw, 156px) !important;
  min-height: clamp(24px, 2.8vw, 34px) !important;
  margin-top: clamp(1px, 0.25vh, 3px) !important;
  justify-self: end !important;
  pointer-events: none !important;
}

html body .play-area > .sidebar-round-hud .dam-round-found-strip[hidden] {
  display: none !important;
}

html body .play-area > .sidebar-round-hud .round-found-icon {
  width: clamp(22px, 2.45vw, 32px) !important;
  height: clamp(22px, 2.45vw, 32px) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(255, 252, 232, 0.9) !important;
  box-shadow:
    0 2px 5px rgba(25, 35, 15, 0.28),
    inset 0 0 0 2px rgba(97, 128, 53, 0.18) !important;
}

html body .play-area > .sidebar-round-hud .round-found-icon .animal-icon {
  width: 86% !important;
  height: 86% !important;
}

html body .play-area > .sidebar-round-hud .round-found-icon .animal-icon::before {
  font-size: clamp(0.9rem, 1.6vw, 1.18rem) !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .play-area > .sidebar-round-hud .dam-round-found-strip {
    max-width: clamp(72px, 14vw, 112px) !important;
    gap: 2px !important;
  }

  html body .play-area > .sidebar-round-hud .round-found-icon {
    width: clamp(18px, 4.5dvh, 24px) !important;
    height: clamp(18px, 4.5dvh, 24px) !important;
  }

html body .play-area > .sidebar-round-hud .round-found-icon .animal-icon::before {
  font-size: clamp(0.74rem, 3dvh, 0.94rem) !important;
  }
}

/* 2026-05-10 correction: visually equalize the three right footer buttons. */
html body .bottom-bar .footer-tools-right {
  align-items: center !important;
}

html body .bottom-bar .footer-tools-right > .stage-sound-button,
html body .bottom-bar .footer-tools-right > .badge-button.backpack,
html body .bottom-bar .footer-tools-right > .bottom-reset-button {
  box-sizing: border-box !important;
  flex: 0 0 var(--footer-tool-balanced-size) !important;
  align-self: center !important;
  display: block !important;
  width: var(--footer-tool-balanced-size) !important;
  height: var(--footer-tool-balanced-size) !important;
  min-width: var(--footer-tool-balanced-size) !important;
  min-height: var(--footer-tool-balanced-size) !important;
  max-width: var(--footer-tool-balanced-size) !important;
  max-height: var(--footer-tool-balanced-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 0 !important;
  vertical-align: middle !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: visible !important;
}

html body .bottom-bar .footer-tools-right > .bottom-reset-button {
  font-size: 0 !important;
  background: transparent image-set(
    url("assets/reset.webp") type("image/webp"),
    url("assets/reset.png") type("image/png")
  ) center calc(50% - clamp(2px, 0.25vw, 4px)) / 130% auto no-repeat !important;
}

html body .bottom-bar .footer-tools-right > .stage-sound-button:hover,
html body .bottom-bar .footer-tools-right > .stage-sound-button:focus-visible,
html body .bottom-bar .footer-tools-right > .badge-button.backpack:hover,
html body .bottom-bar .footer-tools-right > .badge-button.backpack:focus-visible,
html body .bottom-bar .footer-tools-right > .bottom-reset-button:hover,
html body .bottom-bar .footer-tools-right > .bottom-reset-button:focus-visible {
  transform: scale(var(--footer-button-hover-scale, 1.04)) !important;
  transform-origin: center center !important;
}

/* 2026-05-10 correction: locked compendium discovery and uniform footer-button glow. */
html body .guide-book-hotspot {
  position: absolute !important;
  left: clamp(-10px, -0.55vw, -4px) !important;
  bottom: clamp(-18px, -1.1vw, -8px) !important;
  width: clamp(38px, 3.6vw, 58px) !important;
  height: clamp(60px, 5.4vw, 86px) !important;
  z-index: 330 !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  cursor: pointer !important;
  opacity: 0.01 !important;
  pointer-events: auto !important;
}

html body .guide-book-hotspot:hover,
html body .guide-book-hotspot:focus-visible {
  opacity: 1 !important;
  outline: none !important;
  background: rgba(255, 236, 152, 0.18) !important;
  box-shadow:
    0 0 0 3px rgba(255, 247, 185, 0.5),
    0 0 18px rgba(255, 232, 115, 0.45) !important;
}

html body .guide-book-hotspot:disabled,
html body .guide-book-hotspot.is-disabled {
  cursor: default !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.board-expanded .guide-book-hotspot,
html.board-expanded-root body.board-expanded .guide-book-hotspot {
  opacity: 0 !important;
  pointer-events: none !important;
  cursor: default !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .bottom-bar .footer-tools > .bottom-tool-button,
html body .bottom-bar .footer-tools > .thesaurus-button,
html body .bottom-bar .footer-tools > .stage-sound-button,
html body .bottom-bar .footer-tools > .badge-button.backpack,
html body .bottom-bar .footer-tools > .bottom-reset-button {
  transform-origin: center center !important;
  transition:
    opacity 160ms ease,
    filter 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease !important;
  will-change: transform, filter !important;
}

html body .bottom-bar .footer-tools-left > .camera-button {
  background-position: center center !important;
  background-size: 166% auto !important;
}

html body .bottom-bar .footer-tools-left > .thesaurus-button {
  background-position: center center !important;
  background-size: 170% auto !important;
}

html body .bottom-bar .footer-tools-left > .sign-button {
  background-position: center center !important;
  background-size: 172% auto !important;
}

html body .bottom-bar .footer-tools > .bottom-tool-button:hover,
html body .bottom-bar .footer-tools > .bottom-tool-button:focus-visible,
html body .bottom-bar .footer-tools > .thesaurus-button:hover,
html body .bottom-bar .footer-tools > .thesaurus-button:focus-visible,
html body .bottom-bar .footer-tools > .stage-sound-button:hover,
html body .bottom-bar .footer-tools > .stage-sound-button:focus-visible,
html body .bottom-bar .footer-tools > .badge-button.backpack:hover,
html body .bottom-bar .footer-tools > .badge-button.backpack:focus-visible,
html body .bottom-bar .footer-tools > .bottom-reset-button:hover,
html body .bottom-bar .footer-tools > .bottom-reset-button:focus-visible {
  opacity: 1 !important;
  filter: saturate(1.12) brightness(1.13) drop-shadow(0 8px 13px rgba(31, 38, 17, 0.24)) !important;
  transform: scale(1.12) !important;
}

html body .bottom-bar .footer-tools > .thesaurus-button.is-locked {
  opacity: 0.28 !important;
  filter: grayscale(0.72) saturate(0.42) brightness(0.72) drop-shadow(0 4px 6px rgba(31, 38, 17, 0.12)) !important;
}

html body .bottom-bar .footer-tools > .thesaurus-button.is-locked:hover,
html body .bottom-bar .footer-tools > .thesaurus-button.is-locked:focus-visible {
  opacity: 0.48 !important;
  filter: grayscale(0.56) saturate(0.56) brightness(0.82) drop-shadow(0 7px 10px rgba(31, 38, 17, 0.18)) !important;
  transform: scale(1.12) !important;
}

/* 2026-05-10 correction: expanded round control belongs to the board, not the viewport. */
html body.board-expanded .play-area > .round-stop-button,
html.board-expanded-root body.board-expanded .play-area > .round-stop-button {
  position: absolute !important;
  right: clamp(12px, 1.4vw, 24px) !important;
  bottom: clamp(12px, 1.6vh, 24px) !important;
  left: auto !important;
  top: auto !important;
  z-index: 1006 !important;
}

/* 2026-05-10 correction: trim expanded board from the bottom so lower board UI is not clipped. */
html.board-expanded-root,
html body.board-expanded {
  --expanded-board-height: calc(100dvh - clamp(22px, 4.2dvh, 42px));
  --expanded-page-height: calc(
    var(--topbar-height) + var(--app-gap) + var(--expanded-board-height) + var(--app-gap) + var(--footer-height) + 16px
  );
}

@media (max-width: 900px), (max-height: 520px) {
  html.board-expanded-root,
  html body.board-expanded {
    --expanded-board-height: calc(100dvh - clamp(28px, 7dvh, 46px));
  }
}

/* Polana: rośliny skalują się według linii perspektywy tła, a nie według zoomu strony. */
html body[data-stage="meadow"] .trace-item.plant-item,
html body[data-stage="meadow"] .trace-item.plant-item.fake-plant {
  width: var(--plant-size, clamp(24px, 5vw, 88px)) !important;
  height: calc(var(--plant-size, clamp(24px, 5vw, 88px)) * 1.18) !important;
  min-width: var(--plant-size, clamp(24px, 5vw, 88px)) !important;
  min-height: calc(var(--plant-size, clamp(24px, 5vw, 88px)) * 1.18) !important;
  max-width: var(--plant-size, clamp(24px, 5vw, 88px)) !important;
  max-height: calc(var(--plant-size, clamp(24px, 5vw, 88px)) * 1.18) !important;
  background-size: contain !important;
  background-position: center bottom !important;
  transform: translate(-50%, -100%) rotate(var(--rot)) scale(var(--visual-scale, 1)) !important;
  transform-origin: center bottom !important;
  filter: drop-shadow(0 calc(var(--plant-size, 54px) * 0.055) calc(var(--plant-size, 54px) * 0.05) rgba(18, 30, 12, 0.36)) saturate(1.12) contrast(1.03) !important;
}

html body[data-stage="meadow"] .trace-item.plant-item.fake-plant {
  filter: drop-shadow(0 calc(var(--plant-size, 54px) * 0.045) calc(var(--plant-size, 54px) * 0.045) rgba(18, 30, 12, 0.28)) saturate(0.96) !important;
}

html body[data-stage="meadow"] .trace-item.plant-item.correct {
  filter: drop-shadow(0 0 calc(var(--plant-size, 54px) * 0.16) rgba(255, 244, 118, 0.9)) saturate(1.25) !important;
}

html body[data-stage="meadow"] .trace-item.plant-item.wrong {
  filter: grayscale(0.4) drop-shadow(0 0 calc(var(--plant-size, 54px) * 0.14) rgba(160, 45, 36, 0.78)) !important;
}

html body[data-stage="meadow"] .trace-item.plant-item.special-plant {
  filter:
    drop-shadow(0 0 calc(var(--plant-size, 54px) * 0.17) rgba(255, 232, 96, 0.92))
    drop-shadow(0 calc(var(--plant-size, 54px) * 0.05) calc(var(--plant-size, 54px) * 0.06) rgba(21, 36, 13, 0.36))
    saturate(1.24)
    contrast(1.06) !important;
}

html body[data-stage="meadow"] .trace-item.plant-item.special-plant.correct {
  filter:
    drop-shadow(0 0 calc(var(--plant-size, 54px) * 0.26) rgba(255, 245, 138, 1))
    saturate(1.32)
    contrast(1.08) !important;
}

/* 2026-05-11 correction: move the in-board round stop button closer to the board's right edge. */
html body .play-area > .round-stop-button {
  right: calc(var(--game-right-panel-width, 0px) - var(--board-right-underlap, 0px) + clamp(4px, 0.5vw, 8px)) !important;
}

html body.board-expanded .play-area > .round-stop-button,
html.board-expanded-root body.board-expanded .play-area > .round-stop-button {
  right: clamp(5px, 0.65vw, 12px) !important;
}

/* 2026-05-10 correction: left footer tools use the same responsive slot size as the right tools. */
:root {
  --footer-left-tool-size: var(--footer-tool-balanced-size, 58px);
  --footer-left-tool-gap: max(
    calc(var(--footer-tool-gap-balanced, 8px) * 1.45),
    clamp(9px, 0.7vw, 14px)
  );
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --footer-left-tool-size: var(--footer-tool-balanced-size, 42px);
    --footer-left-tool-gap: max(
      calc(var(--footer-tool-gap-balanced, 7px) * 1.45),
      clamp(8px, 1.15vw, 11px)
    );
  }
}

html body .bottom-bar .footer-tools-left {
  gap: var(--footer-left-tool-gap) !important;
  height: var(--footer-left-tool-size) !important;
  left: max(
    var(--page-side-gap, 8px),
    calc(50% - (var(--footer-restored-map-width, 620px) / 2) - var(--footer-side-margin, 10px) - (3 * var(--footer-left-tool-size)) - (2 * var(--footer-left-tool-gap)))
  ) !important;
}

html body .bottom-bar .footer-tools-left > .bottom-tool-button,
html body .bottom-bar .footer-tools-left > .thesaurus-button {
  box-sizing: border-box !important;
  flex: 0 0 var(--footer-left-tool-size) !important;
  align-self: center !important;
  width: var(--footer-left-tool-size) !important;
  height: var(--footer-left-tool-size) !important;
  min-width: var(--footer-left-tool-size) !important;
  min-height: var(--footer-left-tool-size) !important;
  max-width: var(--footer-left-tool-size) !important;
  max-height: var(--footer-left-tool-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
}

html body .bottom-bar .footer-tools-left > .camera-button {
  background-position: center center !important;
  background-size: 150% auto !important;
}

html body .bottom-bar .footer-tools-left > .thesaurus-button {
  background-position: center center !important;
  background-size: 136% auto !important;
}

html body .bottom-bar .footer-tools-left > .sign-button {
  background-position: center center !important;
  background-size: 150% auto !important;
}

/* 2026-05-10 correction: mountain memo species cards show the full image instead of cropping a tall background panel. */
html body .info-dialog .animal-photo-img {
  display: none !important;
}

html body .info-dialog.memo-info-dialog .species-card-layout {
  grid-template-columns: minmax(clamp(230px, 25vw, 310px), 0.44fr) minmax(0, 1fr) !important;
  align-items: start !important;
}

html body .info-dialog.memo-info-dialog .animal-photo {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 304 / 322 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: clamp(4px, 0.7dvh, 7px) !important;
  padding: clamp(6px, 0.85vw, 10px) !important;
  border-radius: 10px !important;
  background: rgba(248, 240, 207, 0.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(95, 74, 38, 0.18),
    0 7px 15px rgba(35, 27, 13, 0.1) !important;
  overflow: hidden !important;
}

html body .info-dialog.memo-info-dialog .animal-photo-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 8px !important;
  filter: drop-shadow(0 3px 5px rgba(28, 32, 18, 0.18)) !important;
}

html body .info-dialog.memo-info-dialog .animal-photo figcaption {
  width: 100% !important;
  align-self: end !important;
  padding: clamp(3px, 0.55dvh, 6px) clamp(6px, 0.9vw, 9px) !important;
  border-radius: 7px !important;
  background: rgba(54, 73, 35, 0.82) !important;
  color: #fff9ec !important;
  font-size: clamp(0.58rem, 0.18vw + 0.55rem, 0.72rem) !important;
  line-height: 1.12 !important;
  text-align: center !important;
}

@media (min-width: 701px) and (max-height: 760px) {
  html body .info-dialog.memo-info-dialog .species-card-layout {
    grid-template-columns: minmax(clamp(210px, 24vw, 280px), 0.4fr) minmax(0, 1fr) !important;
  }

  html body .info-dialog.memo-info-dialog .animal-photo {
    aspect-ratio: 304 / 314 !important;
    padding: clamp(5px, 0.75vw, 8px) !important;
  }
}

@media (min-width: 701px) and (max-width: 1120px) {
  html body .info-dialog.memo-info-dialog .species-card-layout {
    grid-template-columns: minmax(clamp(200px, 25vw, 260px), 0.38fr) minmax(0, 1fr) !important;
  }
}

/* 2026-05-11 correction: crop the forester a little lower and give him more presence on roomy screens. */
html body.board-expanded .guide-avatar,
html.board-expanded-root body.board-expanded .guide-avatar,
html body.board-expanded[data-stage] .guide-avatar,
html.board-expanded-root body.board-expanded[data-stage] .guide-avatar {
  bottom: clamp(-30px, -2.55dvh, -16px) !important;
  background-position: center bottom !important;
}

html body:not(.board-expanded) .guide-avatar,
html body:not(.board-expanded)[data-stage] .guide-avatar {
  bottom: clamp(-10px, -0.8dvh, -5px) !important;
}

@media (min-width: 1700px) and (min-height: 850px) {
  html body:not(.board-expanded) .guide-avatar,
  html body:not(.board-expanded)[data-stage] .guide-avatar {
    left: clamp(-34px, -1.15vw, -18px) !important;
    bottom: clamp(-22px, -1.25dvh, -12px) !important;
    width: clamp(164px, 8.5vw, 236px) !important;
    height: clamp(234px, 12vw, 338px) !important;
    background-size: clamp(170px, 8.8vw, 246px) auto !important;
  }

  html body.board-expanded .guide-avatar,
  html.board-expanded-root body.board-expanded .guide-avatar,
  html body.board-expanded[data-stage] .guide-avatar,
  html.board-expanded-root body.board-expanded[data-stage] .guide-avatar {
    left: clamp(-62px, -4vw, -38px) !important;
    bottom: clamp(-44px, -3dvh, -24px) !important;
    width: clamp(280px, 18vw, 350px) !important;
    height: clamp(340px, 34dvh, 500px) !important;
  }
}

/* 2026-05-10 correction: fullscreen and round-end glyphs are 15% smaller, with the same button hitbox. */
:root {
  --board-fullscreen-icon-size: calc(var(--board-fullscreen-button-size) * 0.493);
  --round-stop-icon-size: calc(var(--round-stop-button-size) * 0.493);
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --board-fullscreen-icon-size: calc(var(--board-fullscreen-button-size) * 0.544);
    --round-stop-icon-size: calc(var(--round-stop-button-size) * 0.544);
  }
}

/* 2026-05-10 correction: float top board controls only while the expanded board touches the viewport top. */
:root {
  --floating-board-control-edge: clamp(8px, 1.1vw, 16px);
  --floating-board-control-top: max(env(safe-area-inset-top, 0px), clamp(6px, 1dvh, 12px));
}

html body.board-expanded.board-controls-floating .play-area > .board-fullscreen-button {
  position: fixed !important;
  top: var(--floating-board-control-top) !important;
  left: var(--floating-board-control-edge) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1020 !important;
}

html body.board-expanded.board-controls-floating .play-area > .sidebar-round-hud {
  position: fixed !important;
  top: var(--floating-board-control-top) !important;
  right: var(--floating-board-control-edge) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 1018 !important;
  pointer-events: none !important;
}

/* 2026-05-10 correction: first-board traces are visible only during an active target round. */
html body[data-stage="dam"]:not(.dam-target-mode) .map .hotspot:not(.found) {
  pointer-events: none !important;
}

html body[data-stage="dam"]:not(.dam-target-mode) .map .hotspot:not(.found)::before,
html body[data-stage="dam"]:not(.dam-target-mode) .map .hotspot:not(.found) .pulse {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  filter: none !important;
  pointer-events: none !important;
}

html body[data-stage="dam"].dam-target-mode .map .hotspot.current-target:not(.found)::before {
  opacity: 0.82 !important;
  visibility: visible !important;
  filter: brightness(1.08) drop-shadow(0 0 6px rgba(255, 249, 203, 0.34)) !important;
}

html body[data-stage="dam"].dam-target-mode .map .hotspot.current-target:not(.found) .pulse {
  opacity: 0.08 !important;
  visibility: visible !important;
}

/* 2026-05-10 correction: one book-safe compendium layout across phone, zoom and large desktops. */
:root {
  --thesaurus-book-width: 100vw;
  --thesaurus-book-height: 100%;
  --thesaurus-content-width: min(84vw, calc(var(--board-height) * 1.86));
  --thesaurus-content-height: min(71vh, calc(var(--board-height) * 0.7));
  --thesaurus-spine-gap: clamp(18px, 2.05vw, 40px);
  --thesaurus-item-min: clamp(62px, 7.8vw, 150px);
  --thesaurus-item-gap: clamp(5px, 0.68vw, 10px);
}

html body .thesaurus-dialog {
  background: transparent url("assets/tezeusz.png") center center / var(--thesaurus-book-width) var(--thesaurus-book-height) no-repeat !important;
}

html body .thesaurus-layout {
  left: 50% !important;
  top: 48% !important;
  width: var(--thesaurus-content-width) !important;
  height: var(--thesaurus-content-height) !important;
  transform: translate(-50%, -50%) !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--thesaurus-spine-gap) !important;
}

html body .thesaurus-category-list {
  grid-template-columns: repeat(auto-fit, minmax(var(--thesaurus-item-min), 1fr)) !important;
  gap: var(--thesaurus-item-gap) !important;
}

html body .thesaurus-grid {
  padding-top: clamp(9px, 1.15dvh, 16px) !important;
  padding-right: clamp(8px, 0.85vw, 16px) !important;
  padding-bottom: clamp(46px, 7.6dvh, 82px) !important;
  padding-left: clamp(10px, 1vw, 20px) !important;
}

html body .thesaurus-card {
  padding-top: clamp(9px, 1.15dvh, 16px) !important;
  padding-right: clamp(15px, 1.45vw, 27px) !important;
  padding-bottom: clamp(48px, 8dvh, 86px) !important;
  padding-left: clamp(8px, 0.9vw, 18px) !important;
}

@media (min-width: 2200px) and (min-height: 1000px) {
  :root {
    --thesaurus-content-width: min(87vw, calc(var(--board-height) * 1.9));
    --thesaurus-content-height: min(72vh, calc(var(--board-height) * 0.705));
  }
}

@media (max-width: 999px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --thesaurus-book-width: 100vw;
    --thesaurus-book-height: 100dvh;
    --thesaurus-content-width: min(88vw, 182dvh);
    --thesaurus-content-height: min(70dvh, calc(100dvh - 54px));
    --thesaurus-spine-gap: clamp(14px, 2.35vw, 26px);
    --thesaurus-item-min: clamp(64px, 8vw, 86px);
    --thesaurus-item-gap: clamp(3px, 0.9dvh, 6px);
  }

  html body .thesaurus-dialog {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  html body .thesaurus-grid {
    padding-top: clamp(7px, 1.45dvh, 11px) !important;
    padding-right: clamp(6px, 1.25vw, 11px) !important;
    padding-bottom: clamp(38px, 9dvh, 56px) !important;
    padding-left: clamp(8px, 1.45vw, 14px) !important;
  }

  html body .thesaurus-card {
    padding-top: clamp(7px, 1.45dvh, 11px) !important;
    padding-right: clamp(11px, 2.1vw, 19px) !important;
    padding-bottom: clamp(40px, 9.5dvh, 58px) !important;
    padding-left: clamp(6px, 1.25vw, 12px) !important;
  }
}

/* 2026-05-10 correction: expanded-board page ends at the footer and its controls can float. */
html.board-expanded-root,
html.board-expanded-root body,
html body.board-expanded {
  --expanded-page-height: calc(
    var(--topbar-height) + var(--app-gap) + var(--expanded-board-height) + var(--app-gap) + var(--footer-height)
  );
  min-height: var(--expanded-page-height) !important;
}

html body.board-expanded .app,
html.board-expanded-root body.board-expanded .app {
  min-height: var(--expanded-page-height) !important;
  padding-bottom: 0 !important;
}

html body.board-expanded .bottom-bar,
html.board-expanded-root body.board-expanded .bottom-bar {
  margin-bottom: 0 !important;
}

html body .bottom-bar .stage-map .stage-current-label,
html body .stage-current-label {
  bottom: calc(((var(--footer-restored-map-height, 76px) - var(--footer-height, 108px)) / 2) + clamp(2px, 0.35dvh, 5px)) !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(calc(var(--footer-restored-map-width, 620px) * 0.54), 22ch) !important;
  padding: clamp(3px, 0.42dvh, 5px) clamp(10px, 0.9vw, 16px) clamp(4px, 0.5dvh, 6px) !important;
  border-radius: 999px !important;
  font-size: clamp(0.78rem, min(0.82vw, 1.35dvh), 1.02rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: translateX(-50%) !important;
}

/* 2026-05-11 correction: expanded board must still allow browser pinch zoom on touch devices. */
html.board-expanded-root,
html.board-expanded-root body,
html body.board-expanded,
html body.board-expanded .app,
html.board-expanded-root body.board-expanded .app,
html body.board-expanded .play-area,
html.board-expanded-root body.board-expanded .play-area,
html body.board-expanded .play-area > .stage-view,
html.board-expanded-root body.board-expanded .play-area > .stage-view {
  touch-action: manipulation !important;
  touch-action: pan-x pan-y pinch-zoom !important;
}

/* 2026-05-11 correction: badges popup keeps desktop proportions at high browser zoom. */
@media (min-width: 650px) and (max-height: 560px) {
  :root {
    --achievement-popup-pad-top: clamp(64px, 8.6vw, 110px);
    --achievement-popup-pad-x: clamp(50px, 6.55vw, 84px);
    --achievement-popup-pad-bottom: clamp(58px, 7.8vw, 100px);
  }

  html body .achievements-dialog[open] {
    left: 50% !important;
    top: 50% !important;
    width: min(760px, max(456px, 59.5vw), calc(100vw - 34px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    padding: var(--achievement-popup-pad-top) var(--achievement-popup-pad-x) var(--achievement-popup-pad-bottom) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    transform: translate(-50%, -50%) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body .achievements-dialog > h2 {
    flex: 0 0 auto !important;
    margin: 0 0 12px !important;
    color: #315c23 !important;
    font-size: 2rem !important;
    line-height: 1.12 !important;
    text-align: center !important;
  }

  html body .achievements-dialog .achievements-intro {
    flex: 0 0 auto !important;
    max-width: 620px !important;
    margin: -4px 0 18px !important;
    color: #425038 !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  html body .achievements-dialog .achievement-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    align-content: start !important;
    grid-auto-rows: max-content !important;
    gap: 12px !important;
    padding: 0 8px clamp(8px, 1dvh, 14px) 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }

  html body .achievements-dialog .achievement {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 14px !important;
    min-height: 82px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.42) !important;
  }

  html body .achievements-dialog .achievement-icon {
    width: 58px !important;
    height: 58px !important;
    font-size: 1.8rem !important;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.52), 0 5px 10px rgba(54,41,18,.22) !important;
  }

  html body .achievements-dialog .achievement h3 {
    margin: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.16 !important;
  }

  html body .achievements-dialog .achievement p {
    margin-top: 4px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
  }
}

/* 2026-05-11 correction: mountain memo species cards keep readable text at high zoom. */
@media (min-width: 650px) and (max-height: 700px) {
  html body .info-dialog[open].memo-info-dialog {
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - clamp(14px, 3vw, 28px)) !important;
    max-width: calc(100vw - clamp(14px, 3vw, 28px)) !important;
    max-height: calc(100dvh - clamp(10px, 2.4dvh, 20px)) !important;
    transform: translate(-50%, -50%) !important;
    overflow: hidden !important;
  }

  html body .info-dialog[open].memo-info-dialog > .dialog-scroll {
    max-height: calc(100dvh - var(--popup-pad-top, 58px) - var(--popup-pad-bottom, 52px) - 12px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body .info-dialog.memo-info-dialog .species-card-layout {
    grid-template-columns: minmax(clamp(150px, 21vw, 220px), 0.34fr) minmax(0, 1fr) !important;
    gap: clamp(8px, 1vw, 12px) !important;
  }

  html body .info-dialog.memo-info-dialog .species-details {
    min-width: 0 !important;
  }

  html body .info-dialog.memo-info-dialog .facts-table {
    table-layout: fixed !important;
  }

  html body .info-dialog.memo-info-dialog .facts-table th,
  html body .info-dialog.memo-info-dialog .facts-table td,
  html body .info-dialog.memo-info-dialog .species-details > p,
  html body .info-dialog.memo-info-dialog .trivia-list li {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

/* 2026-05-11 correction: keep the compendium left page panel inside the light page area at high zoom. */
@media (max-width: 999px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .thesaurus-grid {
    margin-left: clamp(14px, 3.4vw, 34px) !important;
    width: calc(100% - clamp(14px, 3.4vw, 34px)) !important;
    max-width: calc(100% - clamp(14px, 3.4vw, 34px)) !important;
  }
}

/* 2026-05-11 correction: badges popup uses viewport height and a real scrolling list from 175% zoom upward. */
@media (min-width: 650px) and (max-height: 700px) {
  :root {
    --achievement-popup-pad-top: clamp(62px, 11dvh, 74px);
    --achievement-popup-pad-x: clamp(34px, 5.2vw, 58px);
    --achievement-popup-pad-bottom: clamp(58px, 10dvh, 72px);
  }

  html body .achievements-dialog[open] {
    left: 50% !important;
    top: 50% !important;
    width: min(480px, 62vw, calc(100vw - 64px)) !important;
    max-width: min(480px, 62vw, calc(100vw - 64px)) !important;
    height: calc(100dvh - clamp(12px, 3dvh, 24px)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - clamp(12px, 3dvh, 24px)) !important;
    padding: var(--achievement-popup-pad-top) var(--achievement-popup-pad-x) var(--achievement-popup-pad-bottom) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    transform: translate(-50%, -50%) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body .achievements-dialog > h2 {
    flex: 0 0 auto !important;
    margin: 0 0 clamp(5px, 1.2dvh, 8px) !important;
    color: #315c23 !important;
    font-size: clamp(1rem, 3.1dvh, 1.24rem) !important;
    line-height: 1.08 !important;
    text-align: center !important;
  }

  html body .achievements-dialog .achievements-intro {
    flex: 0 0 auto !important;
    max-width: 600px !important;
    margin: 0 0 clamp(7px, 1.8dvh, 12px) !important;
    color: #425038 !important;
    font-size: clamp(0.58rem, 1.7dvh, 0.72rem) !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  html body .achievements-dialog .achievement-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    align-content: start !important;
    grid-auto-rows: max-content !important;
    gap: clamp(5px, 1.25dvh, 8px) !important;
    padding: 0 clamp(5px, 1vw, 8px) clamp(8px, 1.5dvh, 12px) 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: #704721 rgba(91, 61, 28, 0.16) !important;
  }

  html body .achievements-dialog .achievement {
    grid-template-columns: clamp(38px, 7.6dvh, 46px) minmax(0, 1fr) !important;
    gap: clamp(8px, 1.5vw, 12px) !important;
    min-height: clamp(54px, 11dvh, 66px) !important;
    padding: clamp(6px, 1.3dvh, 9px) clamp(9px, 1.4vw, 12px) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.38) !important;
  }

  html body .achievements-dialog .achievement-icon {
    width: clamp(38px, 7.6dvh, 46px) !important;
    height: clamp(38px, 7.6dvh, 46px) !important;
    font-size: clamp(1.05rem, 3.6dvh, 1.35rem) !important;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.48), 0 4px 8px rgba(54,41,18,.2) !important;
  }

  html body .achievements-dialog .achievement h3 {
    margin: 0 !important;
    font-size: clamp(0.72rem, 2.15dvh, 0.86rem) !important;
    line-height: 1.08 !important;
  }

  html body .achievements-dialog .achievement p {
    margin-top: 3px !important;
    font-size: clamp(0.62rem, 1.85dvh, 0.74rem) !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
  }
}

/* 2026-05-11 correction: right-align section titles in the compendium's left page. */
html body .thesaurus-grid .thesaurus-category > h3 {
  display: flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  padding-right: clamp(6px, 1vw, 14px) !important;
  text-align: right !important;
}

/* 2026-05-11 correction: keep the badges popup narrower on phone zoom. */
@media (max-width: 649px), (max-width: 900px) and (hover: none) and (pointer: coarse) {
  html body .achievements-dialog[open] {
    width: min(360px, calc(100vw - clamp(56px, 12vw, 80px))) !important;
    max-width: min(360px, calc(100vw - clamp(56px, 12vw, 80px))) !important;
  }
}

/* 2026-05-11 correction: right-panel plant and memo guides reveal entries only after gameplay discovery. */
html body[data-stage="meadow"] .task-panel .plant-guide-item.is-undiscovered {
  cursor: default !important;
  filter: grayscale(1) saturate(0.25) !important;
  opacity: 0.62 !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-undiscovered {
  cursor: default !important;
}

html body[data-stage="meadow"] .task-panel .plant-guide-item.is-undiscovered .plant-thumb {
  filter: grayscale(1) brightness(0.72) blur(1px) !important;
  opacity: 0.48 !important;
}

html body[data-stage="meadow"] .task-panel .plant-guide-item.is-undiscovered strong {
  color: transparent !important;
  text-shadow: 0 0 6px rgba(49, 61, 42, 0.82) !important;
  filter: blur(2.4px) !important;
  user-select: none !important;
}

html body[data-stage="meadow"] .task-panel .plant-guide-item.is-undiscovered b {
  color: #6f7569 !important;
  background: rgba(49, 61, 42, 0.12) !important;
}

html body[data-stage="meadow"] .task-panel .plant-guide-item.is-undiscovered b {
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-partial {
  cursor: default !important;
  filter: grayscale(0.88) saturate(0.32) contrast(0.92) !important;
  opacity: 0.84 !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-partial > span {
  filter: grayscale(1) saturate(0) contrast(0.9) brightness(0.78) !important;
  opacity: 0.78 !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-partial small {
  position: relative !important;
  color: transparent !important;
  text-shadow: none !important;
  user-select: none !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-partial small::before {
  content: "" !important;
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  top: 50% !important;
  height: clamp(7px, 1.35vh, 11px) !important;
  border-radius: 999px !important;
  background: rgba(28, 31, 26, 0.82) !important;
  transform: translateY(-50%) rotate(-2deg) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-partial b {
  color: #fff2a8 !important;
  background: rgba(31, 36, 27, 0.84) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(18, 20, 15, 0.24) !important;
}

/* 2026-05-11 correction: compendium section titles read as headers, not list items. */
html body .thesaurus-grid .thesaurus-category > h3 {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 clamp(7px, 1dvh, 11px) !important;
  margin-left: auto !important;
  padding: clamp(5px, 0.8dvh, 8px) clamp(10px, 1.4vw, 16px) clamp(5px, 0.8dvh, 8px) clamp(8px, 1vw, 12px) !important;
  border: 1px solid rgba(78, 103, 38, 0.32) !important;
  border-right-width: 4px !important;
  border-radius: 8px !important;
  background: linear-gradient(90deg, rgba(255, 248, 215, 0.72), rgba(225, 237, 184, 0.96)) !important;
  color: #1f471b !important;
  box-shadow: 0 4px 10px rgba(63, 47, 18, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  font-size: 0.95rem !important;
  font-weight: 1000 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

html body .thesaurus-grid .thesaurus-category-list {
  width: 100% !important;
}

@media (max-width: 900px), (max-height: 560px) {
  html body .thesaurus-grid .thesaurus-category > h3 {
    padding: 4px 9px 4px 6px !important;
    border-radius: 7px !important;
    font-size: 0.72rem !important;
  }
}

/* 2026-05-11 correction: compendium section titles are plain text, not sticky bubbles. */
html body .thesaurus-grid .thesaurus-category > h3 {
  --thesaurus-heading-right-shift: clamp(6px, 0.8vw, 14px);
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: clamp(5px, 0.7vw, 9px) !important;
  width: calc(100% + var(--thesaurus-heading-right-shift)) !important;
  max-width: calc(100% + var(--thesaurus-heading-right-shift)) !important;
  margin: 0 calc(var(--thesaurus-heading-right-shift) * -1) clamp(7px, 1dvh, 11px) 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1f471b !important;
  font-weight: 1000 !important;
  line-height: 1.08 !important;
  text-align: right !important;
  text-shadow: none !important;
}

html body .thesaurus-grid .thesaurus-category > h3 .thesaurus-category-title {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

html body .thesaurus-grid .thesaurus-category > h3 .thesaurus-category-completion {
  flex: 0 0 auto !important;
  color: #536423 !important;
  font-size: 0.78em !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  opacity: 0.86 !important;
}

@media (max-width: 900px), (max-height: 560px) {
  html body .thesaurus-grid .thesaurus-category > h3 {
    --thesaurus-heading-right-shift: clamp(5px, 1.6vw, 10px);
  }
}

/* 2026-05-11 correction: larger footer map on desktop and roomier info popups on 2560px displays. */
@media (min-width: 1400px) and (min-height: 780px) {
  :root {
    --footer-restored-map-width: clamp(690px, 37vw, 760px);
    --footer-restored-map-height: clamp(126px, 6.8vw, 142px);
    --footer-node-size: clamp(40px, calc(var(--footer-restored-map-width) * 0.073), 54px);
    --footer-node-icon-size: clamp(28px, calc(var(--footer-restored-map-width) * 0.052), 39px);
    --footer-map-arrow-width: clamp(58px, calc(var(--footer-restored-map-width) * 0.085), 66px);
    --footer-map-arrow-height: clamp(39px, calc(var(--footer-restored-map-width) * 0.057), 45px);
  }

  html body .bottom-bar .stage-map {
    width: var(--footer-restored-map-width) !important;
    max-width: var(--footer-restored-map-width) !important;
    height: var(--footer-restored-map-height) !important;
    min-height: var(--footer-restored-map-height) !important;
  }

  html body .bottom-bar .stage-node,
  html body[data-stage] .bottom-bar .stage-node,
  html body[data-stage] .bottom-bar .stage-node.active,
  html body[data-stage] .bottom-bar .stage-node.unlocked {
    width: var(--footer-node-size) !important;
    height: var(--footer-node-size) !important;
  }

  html body .bottom-bar .stage-icon,
  html body .bottom-bar .stage-node.active .stage-icon,
  html body .bottom-bar .stage-node.unlocked .stage-icon,
  html body[data-stage] .bottom-bar .stage-icon,
  html body[data-stage] .bottom-bar .stage-node.active .stage-icon,
  html body[data-stage] .bottom-bar .stage-node.unlocked .stage-icon {
    width: var(--footer-node-icon-size) !important;
    height: var(--footer-node-icon-size) !important;
  }
}

@media (min-width: 2200px) and (min-height: 900px) {
  :root {
    --footer-restored-map-width: clamp(840px, 34vw, 920px);
    --footer-restored-map-height: clamp(148px, 5.8vw, 164px);
    --footer-node-size: clamp(52px, calc(var(--footer-restored-map-width) * 0.07), 64px);
    --footer-node-icon-size: clamp(36px, calc(var(--footer-restored-map-width) * 0.049), 45px);
    --footer-map-arrow-width: clamp(70px, calc(var(--footer-restored-map-width) * 0.082), 78px);
    --footer-map-arrow-height: clamp(46px, calc(var(--footer-restored-map-width) * 0.054), 52px);
  }

  html body .info-dialog[open].species-info-dialog,
  html body .info-dialog[open].institution-info-dialog {
    --popup-dialog-max-height: calc(100dvh - clamp(96px, 7dvh, 132px));
    --popup-pad-top: clamp(154px, 11.8dvh, 178px);
  }
}

/* 2026-05-11 final: keep privacy policy anchored in the footer after all footer overrides. */
html body .bottom-bar > .footer-privacy-link {
  position: absolute !important;
  right: max(var(--page-side-gap, 8px), clamp(8px, 1vw, 16px)) !important;
  bottom: clamp(5px, 0.8dvh, 10px) !important;
  z-index: 420 !important;
  max-width: min(190px, calc(100vw - 16px)) !important;
  color: #214018 !important;
  font-size: clamp(0.52rem, 0.68vw, 0.76rem) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-align: right !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .bottom-bar > .footer-privacy-link {
    right: max(var(--page-side-gap, 8px), clamp(6px, 1vw, 10px)) !important;
    bottom: clamp(3px, 0.7dvh, 7px) !important;
    font-size: clamp(0.42rem, 1vw, 0.56rem) !important;
  }
}

/* 2026-05-11 correction: mountain memo guide has three explicit discovery phases. */
html body[data-stage="mountains"] .task-panel .memo-guide-item {
  overflow: hidden !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-undiscovered {
  cursor: default !important;
  opacity: 0.94 !important;
  filter: grayscale(1) saturate(0.2) !important;
  background:
    linear-gradient(145deg, rgba(38, 43, 35, 0.98), rgba(13, 17, 12, 0.96)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 238, 0.1),
    inset 0 -12px 18px rgba(0, 0, 0, 0.22),
    0 4px 8px rgba(17, 22, 14, 0.2) !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-undiscovered > span {
  background:
    radial-gradient(circle at 42% 34%, rgba(110, 118, 102, 0.34), rgba(18, 21, 16, 0.92) 62%, rgba(5, 7, 5, 0.98)) !important;
  filter: grayscale(1) brightness(0.42) !important;
  opacity: 1 !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-undiscovered small {
  color: transparent !important;
  text-shadow: none !important;
  user-select: none !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-undiscovered small::before {
  content: none !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-undiscovered b,
html body[data-stage="mountains"] .task-panel .memo-guide-item.is-partial b {
  color: #fff2a8 !important;
  background: rgba(31, 36, 27, 0.88) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 6px rgba(18, 20, 15, 0.26) !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-partial {
  cursor: default !important;
  filter: grayscale(0.9) saturate(0.26) contrast(0.94) !important;
  opacity: 0.9 !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-partial > span {
  background: var(--memo-img) center / cover no-repeat !important;
  filter: grayscale(1) saturate(0) contrast(0.92) brightness(0.78) !important;
  opacity: 0.82 !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-partial small {
  position: relative !important;
  color: transparent !important;
  text-shadow: none !important;
  user-select: none !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-partial small::before {
  content: "" !important;
  position: absolute !important;
  left: 9% !important;
  right: 9% !important;
  top: 50% !important;
  height: clamp(7px, 1.25vh, 11px) !important;
  border-radius: 999px !important;
  background: rgba(24, 28, 22, 0.86) !important;
  transform: translateY(-50%) rotate(-2deg) !important;
}

html body[data-stage="mountains"] .task-panel .memo-guide-item.is-discovered > span {
  background: var(--memo-img) center / cover no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}

@media (max-width: 1200px), (max-height: 700px), (hover: none) and (pointer: coarse) {
  html body[data-stage="mountains"] .memo-card.revealed,
  html body[data-stage="mountains"] .memo-card.matched {
    overflow: visible !important;
    background: transparent !important;
  }

  html body[data-stage="mountains"] .memo-card.revealed img,
  html body[data-stage="mountains"] .memo-card.matched img {
    height: 100% !important;
    border-radius: clamp(7px, 1.1vw, 12px) !important;
    object-fit: cover !important;
  }

  html body[data-stage="mountains"] .memo-card.revealed span,
  html body[data-stage="mountains"] .memo-card.matched span {
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + clamp(2px, 0.7vh, 5px)) !important;
    width: max-content !important;
    min-width: min(76px, calc(100% + 20px)) !important;
    max-width: calc(100% + 26px) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(2px, 0.42vh, 4px) clamp(4px, 0.8vw, 7px) !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 2px 6px rgba(20, 32, 14, 0.18) !important;
    font-size: clamp(0.34rem, 0.9vw, 0.5rem) !important;
    line-height: 1.02 !important;
    white-space: normal !important;
  }
}

/* 2026-05-11 correction: final game completion notice before summaries. */
html body .fact-dialog.final-game-complete-dialog[open] {
  width: min(420px, calc(100vw - clamp(42px, 8vw, 92px))) !important;
  max-width: min(420px, calc(100vw - clamp(42px, 8vw, 92px))) !important;
  min-height: 0 !important;
  padding: clamp(18px, 2.6dvh, 26px) !important;
}

html body .fact-dialog.final-game-complete-dialog .fact-dialog-header {
  justify-content: center !important;
  text-align: center !important;
}

html body .fact-dialog.final-game-complete-dialog #fact-dialog-icon {
  background: linear-gradient(180deg, #dff5ba, #67b943) !important;
  color: #145c18 !important;
  box-shadow: 0 6px 14px rgba(38, 91, 24, 0.22), inset 0 0 0 3px rgba(255, 255, 255, 0.42) !important;
}

html body .fact-dialog.final-game-complete-dialog #fact-dialog-title {
  color: #244b1e !important;
  font-size: clamp(1.25rem, 2.6dvh, 1.7rem) !important;
  text-align: center !important;
}

html body .final-game-complete-card {
  display: grid !important;
  gap: clamp(10px, 1.8dvh, 15px) !important;
  justify-items: center !important;
  text-align: center !important;
}

html body .final-game-complete-card > img {
  width: min(100%, 280px) !important;
  aspect-ratio: 16 / 9 !important;
  display: block !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  object-position: center !important;
  box-shadow: 0 10px 24px rgba(31, 44, 18, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

html body .final-game-complete-copy {
  display: grid !important;
  gap: 5px !important;
  color: #344027 !important;
}

html body .final-game-complete-copy strong {
  color: #23511f !important;
  font-size: clamp(1rem, 2dvh, 1.25rem) !important;
  line-height: 1.05 !important;
}

html body .final-game-complete-copy span {
  max-width: 32ch !important;
  font-size: clamp(0.82rem, 1.45dvh, 0.96rem) !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
}

html body .final-game-complete-button {
  margin-top: 2px !important;
  min-width: 150px !important;
}

html body .stage-intro-dialog[data-final-sequence="true"] .full-game-summary-row.is-actionable {
  cursor: default !important;
}

html body .stage-intro-dialog[data-final-sequence="true"] .full-game-summary-row.is-actionable:hover,
html body .stage-intro-dialog[data-final-sequence="true"] .full-game-summary-row.is-actionable:focus-visible {
  outline: 0 !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: inset 0 0 0 1px rgba(73, 84, 43, 0.12) !important;
}

/* 2026-05-11 correction: minimal title controls stay inside the bright field. */
html body .title-bottom-cover {
  display: none !important;
}

html body .title-account-panel {
  position: absolute !important;
  z-index: 4 !important;
  left: 30.2% !important;
  top: 36.3% !important;
  width: 43.6% !important;
  height: 31.5% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: clamp(5px, 0.86dvh, 10px) !important;
  padding: clamp(12px, 1.9dvh, 22px) clamp(18px, 2.2vw, 32px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #26331f !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  transform: none !important;
  overflow: hidden !important;
}

html body .title-account-kicker {
  display: none !important;
}

html body .title-account-current {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 0.42em !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #2e3928 !important;
}

html body .title-account-current span,
html body .title-profile-stats dt,
html body .title-nickname-field span,
html body .title-auth-form label span {
  color: #5c523a !important;
  font-size: clamp(0.72rem, 1.42dvh, 0.98rem) !important;
  font-weight: 650 !important;
  line-height: 1.05 !important;
  text-transform: none !important;
}

html body .title-account-current strong {
  min-width: 0 !important;
  color: #26331f !important;
  font-size: clamp(1rem, 2.2dvh, 1.42rem) !important;
  font-weight: 760 !important;
  line-height: 1.05 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .title-account-actions,
html body .title-auth-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(6px, 1dvh, 10px) !important;
}

html body .title-action,
html body .title-account-panel .title-screen-start {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: clamp(30px, 4.25dvh, 42px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 clamp(9px, 1.1vw, 16px) !important;
  border: 1px solid rgba(75, 62, 34, 0.28) !important;
  border-radius: 7px !important;
  background: rgba(255, 251, 232, 0.46) !important;
  color: #26331f !important;
  cursor: pointer !important;
  box-shadow: none !important;
  font: 720 clamp(0.72rem, 1.45dvh, 0.98rem)/1.05 "Segoe UI", Arial, sans-serif !important;
  text-align: center !important;
  text-transform: none !important;
  transform: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body .title-action-primary,
html body .title-account-panel .title-screen-start {
  border-color: rgba(49, 92, 131, 0.34) !important;
  background: rgba(229, 239, 244, 0.58) !important;
  color: #203d55 !important;
}

html body .title-action-danger {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: auto !important;
  height: auto !important;
  padding: 1px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #7a3b25 !important;
  font-size: clamp(0.64rem, 1.22dvh, 0.84rem) !important;
  font-weight: 650 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

html body .title-action-muted {
  border-color: rgba(74, 82, 67, 0.24) !important;
  background: rgba(245, 241, 219, 0.42) !important;
  color: #4d5947 !important;
}

html body .title-action:hover,
html body .title-action:focus-visible,
html body .title-account-panel .title-screen-start:hover,
html body .title-account-panel .title-screen-start:focus-visible {
  filter: none !important;
  outline: 2px solid rgba(49, 92, 131, 0.38) !important;
  outline-offset: 2px !important;
}

html body .title-auth-form,
html body .title-profile-panel {
  display: grid !important;
  gap: clamp(5px, 0.82dvh, 9px) !important;
  min-width: 0 !important;
}

html body .title-auth-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body .title-auth-form[hidden],
html body .title-profile-panel[hidden],
html body .title-action[hidden] {
  display: none !important;
}

html body .title-auth-form label,
html body .title-nickname-field {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

html body .title-auth-actions {
  grid-column: 1 / -1 !important;
}

html body .title-auth-form input,
html body .title-nickname-field input {
  width: 100% !important;
  min-width: 0 !important;
  height: clamp(28px, 3.85dvh, 38px) !important;
  border: 1px solid rgba(75, 62, 34, 0.28) !important;
  border-radius: 6px !important;
  padding: 0 clamp(7px, 0.9vw, 11px) !important;
  background: rgba(255, 253, 237, 0.5) !important;
  color: #24311e !important;
  box-shadow: none !important;
  font: 650 clamp(0.72rem, 1.42dvh, 0.96rem)/1.1 "Segoe UI", Arial, sans-serif !important;
}

html body .title-profile-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(5px, 0.8dvh, 8px) !important;
  margin: 0 !important;
}

html body .title-profile-stats div {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .title-profile-stats dd {
  margin: 2px 0 0 !important;
  color: #26331f !important;
  font-size: clamp(0.75rem, 1.5dvh, 1rem) !important;
  font-weight: 760 !important;
  line-height: 1.05 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .title-account-message {
  min-height: 1.15em !important;
  max-height: 2.4em !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #514734 !important;
  font-size: clamp(0.66rem, 1.2dvh, 0.84rem) !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  text-align: center !important;
}

html body .title-account-message[data-mode="success"] {
  color: #285f25 !important;
}

html body .title-account-message[data-mode="error"] {
  color: #92331d !important;
}

@media (max-width: 900px), (max-height: 620px) {
  html body .title-account-panel {
    left: 30.6% !important;
    top: 36.8% !important;
    width: 42.8% !important;
    height: 30.6% !important;
    gap: 4px !important;
    padding: 8px 14px !important;
  }

  html body .title-action,
  html body .title-account-panel .title-screen-start {
    height: clamp(24px, 4dvh, 32px) !important;
    font-size: clamp(0.58rem, 1.65dvh, 0.76rem) !important;
  }

  html body .title-account-current span,
  html body .title-profile-stats dt,
  html body .title-nickname-field span,
  html body .title-auth-form label span,
  html body .title-account-message,
  html body .title-action-danger {
    font-size: clamp(0.5rem, 1.35dvh, 0.66rem) !important;
  }

  html body .title-account-current strong {
    font-size: clamp(0.72rem, 1.9dvh, 0.96rem) !important;
  }

  html body .title-auth-form input,
  html body .title-nickname-field input {
    height: clamp(23px, 3.8dvh, 30px) !important;
    font-size: clamp(0.56rem, 1.45dvh, 0.72rem) !important;
  }
}

/* 2026-05-11 final: plant species cards keep a real portrait frame after generic card overrides. */
html body .info-dialog.plant-info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .species-card-layout {
  grid-template-columns: minmax(clamp(180px, 21vw, 280px), 0.36fr) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(8px, 1vw, 14px) !important;
}

html body .info-dialog.plant-info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .animal-photo.plant-photo:not(.logo-photo) {
  justify-self: center !important;
  width: 100% !important;
  min-height: 0 !important;
  height: clamp(230px, 43dvh, 360px) !important;
  max-height: min(54dvh, 360px) !important;
  aspect-ratio: auto !important;
  background-image: none !important;
  background-size: contain !important;
}

html body .info-dialog.plant-info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .animal-photo.plant-photo:not(.logo-photo) .animal-photo-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (min-width: 650px) and (max-height: 700px) {
  html body .info-dialog.plant-info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .species-card-layout {
    grid-template-columns: minmax(clamp(142px, 20vw, 206px), 0.32fr) minmax(0, 1fr) !important;
  }

  html body .info-dialog.plant-info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .animal-photo.plant-photo:not(.logo-photo) {
    width: 100% !important;
    height: clamp(165px, 43dvh, 258px) !important;
    max-height: 46dvh !important;
  }
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .info-dialog.plant-info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .species-card-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .info-dialog.plant-info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .animal-photo.plant-photo:not(.logo-photo) {
    width: min(66vw, 220px) !important;
    height: clamp(220px, 47dvh, 330px) !important;
    max-height: min(52dvh, 330px) !important;
  }
}

/* 2026-05-11 correction: plant cards use the full-image memo layout, adapted to tall cutouts. */
html body .info-dialog.plant-info-dialog .species-card-layout {
  grid-template-columns: minmax(clamp(170px, 21vw, 270px), 0.36fr) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(8px, 1vw, 14px) !important;
}

html body .info-dialog.plant-info-dialog .species-details {
  min-width: 0 !important;
}

html body .info-dialog.plant-info-dialog .animal-photo.plant-photo {
  align-self: start !important;
  justify-self: center !important;
  width: 100% !important;
  min-height: 0 !important;
  height: clamp(210px, 42dvh, 340px) !important;
  max-height: min(48dvh, 360px) !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: clamp(4px, 0.7dvh, 7px) !important;
  padding: clamp(6px, 0.85vw, 10px) !important;
  border-radius: 10px !important;
  background: rgba(248, 240, 207, 0.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(95, 74, 38, 0.18),
    0 7px 15px rgba(35, 27, 13, 0.1) !important;
  overflow: hidden !important;
}

html body .info-dialog.plant-info-dialog .animal-photo.plant-photo .animal-photo-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 8px !important;
  filter: drop-shadow(0 3px 5px rgba(28, 32, 18, 0.18)) !important;
}

html body .info-dialog.plant-info-dialog .animal-photo.plant-photo figcaption {
  width: 100% !important;
  align-self: end !important;
  padding: clamp(3px, 0.55dvh, 6px) clamp(6px, 0.9vw, 9px) !important;
  border-radius: 7px !important;
  background: rgba(54, 73, 35, 0.82) !important;
  color: #fff9ec !important;
  font-size: clamp(0.55rem, 0.18vw + 0.52rem, 0.7rem) !important;
  line-height: 1.12 !important;
  text-align: center !important;
}

@media (min-width: 650px) and (max-height: 700px) {
  html body .info-dialog[open].plant-info-dialog {
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - clamp(14px, 3vw, 28px)) !important;
    max-width: calc(100vw - clamp(14px, 3vw, 28px)) !important;
    max-height: calc(100dvh - clamp(10px, 2.4dvh, 20px)) !important;
    transform: translate(-50%, -50%) !important;
    overflow: hidden !important;
  }

  html body .info-dialog[open].plant-info-dialog > .dialog-scroll {
    max-height: calc(100dvh - var(--popup-pad-top, 58px) - var(--popup-pad-bottom, 52px) - 12px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body .info-dialog.plant-info-dialog .species-card-layout {
    grid-template-columns: minmax(clamp(132px, 20vw, 196px), 0.32fr) minmax(0, 1fr) !important;
    gap: clamp(8px, 1vw, 12px) !important;
  }

  html body .info-dialog.plant-info-dialog .animal-photo.plant-photo {
    height: clamp(150px, 40dvh, 238px) !important;
    max-height: 44dvh !important;
    padding: clamp(5px, 0.75vw, 8px) !important;
  }

  html body .info-dialog.plant-info-dialog .facts-table {
    table-layout: fixed !important;
  }

  html body .info-dialog.plant-info-dialog .facts-table th,
  html body .info-dialog.plant-info-dialog .facts-table td,
  html body .info-dialog.plant-info-dialog .species-details > p,
  html body .info-dialog.plant-info-dialog .trivia-list li {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

@media (max-width: 640px) {
  html body .info-dialog.plant-info-dialog .species-card-layout {
    grid-template-columns: minmax(clamp(84px, 28vw, 122px), 0.34fr) minmax(0, 1fr) !important;
    gap: clamp(6px, 2.2vw, 10px) !important;
    align-items: start !important;
  }

  html body .info-dialog.plant-info-dialog .animal-photo.plant-photo {
    width: 100% !important;
    height: clamp(136px, 38dvh, 222px) !important;
    max-height: min(44dvh, 228px) !important;
    padding: clamp(4px, 1.4vw, 7px) !important;
  }

  html body .info-dialog.plant-info-dialog .animal-photo.plant-photo figcaption {
    padding: 2px 4px !important;
    font-size: clamp(0.4rem, 1.5vw, 0.52rem) !important;
    line-height: 1.04 !important;
  }

  html body .info-dialog.plant-info-dialog .species-details > p {
    margin-bottom: 5px !important;
  }

  html body .info-dialog.plant-info-dialog .facts-table th,
  html body .info-dialog.plant-info-dialog .facts-table td {
    padding: 3px 4px !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 430px), (max-height: 560px) {
  html body .info-dialog.plant-info-dialog .species-card-layout {
    grid-template-columns: minmax(clamp(76px, 27vw, 104px), 0.34fr) minmax(0, 1fr) !important;
    gap: clamp(5px, 1.8vw, 8px) !important;
  }

  html body .info-dialog.plant-info-dialog .animal-photo.plant-photo {
    height: clamp(118px, 34dvh, 194px) !important;
    max-height: min(40dvh, 198px) !important;
  }

  html body .info-dialog.plant-info-dialog .animal-photo.plant-photo .animal-photo-img {
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* 2026-05-12 correction: camera quiz stays compact at 1080p zoom and on phones. */
@media (min-width: 721px) and (max-height: 760px) {
  html body .camera-photo-dialog:not(.is-captured) {
    width: min(640px, calc(100vw - 18px)) !important;
    max-height: calc(100dvh - 14px) !important;
    padding: clamp(8px, 1.3dvh, 12px) !important;
    border-radius: 12px !important;
    font-size: clamp(0.68rem, 1.36dvh, 0.8rem) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-scroll {
    grid-template-columns: minmax(170px, 0.82fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "header header"
      "figure quiz" !important;
    gap: clamp(6px, 1.2dvh, 9px) clamp(8px, 1.1vw, 12px) !important;
    max-height: calc(100dvh - 40px) !important;
    overflow: hidden !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header {
    grid-area: header !important;
    grid-template-columns: clamp(34px, 5.6dvh, 42px) minmax(0, 1fr) !important;
    gap: clamp(7px, 1.2dvh, 10px) !important;
    padding-right: 34px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header span {
    width: clamp(32px, 5.3dvh, 40px) !important;
    height: clamp(32px, 5.3dvh, 40px) !important;
    font-size: clamp(1rem, 2dvh, 1.25rem) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-label {
    margin-bottom: 1px !important;
    font-size: clamp(0.55rem, 1.05dvh, 0.64rem) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header h2 {
    font-size: clamp(0.92rem, 1.95dvh, 1.1rem) !important;
    line-height: 1.04 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure {
    grid-area: figure !important;
    align-self: start !important;
    border-radius: 9px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure img {
    aspect-ratio: 4 / 3 !important;
    max-height: min(34dvh, 182px) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure figcaption {
    max-height: 3.1em !important;
    padding: 4px 6px !important;
    overflow: hidden !important;
    font-size: clamp(0.52rem, 1.05dvh, 0.62rem) !important;
    line-height: 1.14 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz {
    grid-area: quiz !important;
    align-content: start !important;
    gap: clamp(5px, 0.95dvh, 7px) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz-topline {
    gap: 7px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz-topline p {
    font-size: clamp(0.68rem, 1.32dvh, 0.78rem) !important;
    line-height: 1.14 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz-topline strong {
    min-width: 50px !important;
    padding: 4px 7px !important;
    font-size: clamp(0.64rem, 1.22dvh, 0.72rem) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-answers {
    gap: 5px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-answer {
    min-height: clamp(28px, 5dvh, 34px) !important;
    padding: 5px 7px !important;
    border-radius: 7px !important;
    font-size: clamp(0.66rem, 1.32dvh, 0.76rem) !important;
    line-height: 1.13 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-status {
    min-height: 1.1em !important;
    font-size: clamp(0.62rem, 1.2dvh, 0.7rem) !important;
    line-height: 1.12 !important;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  html body .camera-photo-dialog:not(.is-captured) {
    width: min(360px, calc(100vw - 16px)) !important;
    max-height: calc(100dvh - 14px) !important;
    padding: 8px !important;
    border-radius: 12px !important;
    font-size: clamp(0.66rem, 2.7vw, 0.76rem) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-scroll {
    gap: 6px !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: hidden !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding-right: 30px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header span {
    width: 31px !important;
    height: 31px !important;
    font-size: 1rem !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-label {
    margin-bottom: 0 !important;
    font-size: clamp(0.52rem, 2.1vw, 0.58rem) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header h2 {
    font-size: clamp(0.86rem, 3.6vw, 1rem) !important;
    line-height: 1.03 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure img {
    aspect-ratio: 16 / 9 !important;
    max-height: clamp(92px, 21dvh, 136px) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure figcaption {
    max-height: 2.35em !important;
    padding: 4px 6px !important;
    font-size: clamp(0.52rem, 2vw, 0.6rem) !important;
    line-height: 1.14 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz {
    gap: 6px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz-topline {
    gap: 6px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz-topline p {
    font-size: clamp(0.64rem, 2.55vw, 0.74rem) !important;
    line-height: 1.14 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz-topline strong {
    min-width: 48px !important;
    padding: 4px 6px !important;
    font-size: clamp(0.62rem, 2.4vw, 0.7rem) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-answers {
    gap: 5px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-answer {
    min-height: 28px !important;
    padding: 5px 7px !important;
    border-radius: 7px !important;
    font-size: clamp(0.64rem, 2.55vw, 0.74rem) !important;
    line-height: 1.12 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-status {
    min-height: 1.1em !important;
    font-size: clamp(0.6rem, 2.35vw, 0.68rem) !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 720px), (max-height: 760px) {
  html body .camera-photo-dialog.is-captured {
    width: min(360px, calc(100vw - 18px)) !important;
    max-height: calc(100dvh - 14px) !important;
    padding: 8px !important;
  }

  html body .camera-photo-dialog.is-captured .camera-photo-dialog-scroll {
    min-height: min(72dvh, 430px) !important;
  }

  html body .camera-photo-dialog.is-captured .camera-photo-figure {
    width: min(300px, 74vw, 58dvh) !important;
    gap: 6px !important;
    padding: 8px 8px 13px !important;
  }

  html body .camera-photo-dialog.is-captured .camera-photo-figure img {
    max-height: min(44dvh, 300px) !important;
  }

  html body .camera-photo-dialog.is-captured .camera-photo-figure figcaption {
    max-height: 3.2em !important;
    font-size: clamp(0.58rem, min(2.1vw, 1.35dvh), 0.68rem) !important;
    line-height: 1.16 !important;
  }

  html body .camera-photo-dialog.is-captured .camera-photo-figure::after {
    top: 12px !important;
    font-size: clamp(0.48rem, min(1.8vw, 1.15dvh), 0.56rem) !important;
  }
}

@media (max-width: 420px) and (orientation: portrait) {
  html body .camera-photo-dialog.is-captured {
    width: min(326px, calc(100vw - 20px)) !important;
  }

  html body .camera-photo-dialog.is-captured .camera-photo-dialog-scroll {
    min-height: min(66dvh, 380px) !important;
  }

  html body .camera-photo-dialog.is-captured .camera-photo-figure {
    width: min(286px, 74vw) !important;
  }
}

/* 2026-05-12 correction: plant popup keeps the desktop two-column card on phone zoom. */
@media (max-width: 700px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .info-dialog[open].plant-info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .species-card-layout,
  html body .info-dialog.plant-info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .species-card-layout {
    grid-template-columns: minmax(clamp(76px, 27vw, 108px), 0.34fr) minmax(0, 1fr) !important;
    gap: clamp(5px, 1.8vw, 9px) !important;
    align-items: start !important;
  }

  html body .info-dialog[open].plant-info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .animal-photo.plant-photo:not(.logo-photo),
  html body .info-dialog.plant-info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .animal-photo.plant-photo:not(.logo-photo) {
    width: 100% !important;
    height: clamp(118px, 34dvh, 194px) !important;
    max-height: min(40dvh, 198px) !important;
    padding: clamp(4px, 1.4vw, 7px) !important;
  }

  html body .info-dialog[open].plant-info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .animal-photo.plant-photo:not(.logo-photo) .animal-photo-img,
  html body .info-dialog.plant-info-dialog.species-info-dialog:not(.memo-info-dialog):not(.institution-info-dialog) .animal-photo.plant-photo:not(.logo-photo) .animal-photo-img {
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* 2026-05-11 final: keep privacy policy anchored in the footer after all footer overrides. */
html body .bottom-bar > .footer-privacy-link {
  position: absolute !important;
  right: max(var(--page-side-gap, 8px), clamp(8px, 1vw, 16px)) !important;
  bottom: clamp(5px, 0.8dvh, 10px) !important;
  z-index: 420 !important;
  max-width: min(190px, calc(100vw - 16px)) !important;
  color: #214018 !important;
  font-size: clamp(0.52rem, 0.68vw, 0.76rem) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-align: right !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .bottom-bar > .footer-privacy-link {
    right: max(var(--page-side-gap, 8px), clamp(6px, 1vw, 10px)) !important;
    bottom: clamp(3px, 0.7dvh, 7px) !important;
    font-size: clamp(0.42rem, 1vw, 0.56rem) !important;
  }
}

/* 2026-05-11 correction: move the privacy policy link from the top bar to the footer corner. */
html body .bottom-bar .footer-privacy-link {
  position: absolute !important;
  right: max(var(--page-side-gap, 8px), clamp(8px, 1vw, 16px)) !important;
  bottom: clamp(5px, 0.8dvh, 10px) !important;
  z-index: 320 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: min(190px, calc(100vw - 16px)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #214018 !important;
  font-size: clamp(0.52rem, 0.68vw, 0.76rem) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-align: right !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}

html body .bottom-bar .footer-privacy-link:hover,
html body .bottom-bar .footer-privacy-link:focus-visible {
  color: #315c83 !important;
  outline: none !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .bottom-bar .footer-privacy-link {
    right: max(var(--page-side-gap, 8px), clamp(6px, 1vw, 10px)) !important;
    bottom: clamp(3px, 0.7dvh, 7px) !important;
    font-size: clamp(0.42rem, 1vw, 0.56rem) !important;
  }
}

@media (max-width: 760px), (max-height: 460px) {
  html body .bottom-bar .footer-privacy-link {
    max-width: 128px !important;
    font-size: clamp(0.36rem, 1.05vw, 0.48rem) !important;
  }
}

/* 2026-05-11 correction: keep field facts visible in expanded board view. */
html body.board-expanded:not(.camera-view-active) .fact-strip:not(.fact-hidden):not([hidden]),
html.board-expanded-root body.board-expanded:not(.camera-view-active) .fact-strip:not(.fact-hidden):not([hidden]) {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 980 !important;
}

/* 2026-05-11 correction: make the GIOS brand a plain confirmed link. */
html body .topbar .brand-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

html body .topbar .brand-link:hover,
html body .topbar .brand-link:focus {
  color: inherit !important;
  text-decoration: none !important;
}

html body .topbar .brand-link:focus-visible {
  outline: 2px solid rgba(49, 92, 131, 0.85) !important;
  outline-offset: 4px !important;
  border-radius: 10px !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .topbar .brand-link {
    gap: 8px !important;
  }
}

@media (max-width: 900px), (max-height: 520px), (hover: none) and (pointer: coarse) {
  html body .topbar .brand-link {
    gap: 6px !important;
  }
}

/* 2026-05-11 correction: the main topbar logo opens the title screen. */
html body .title-board,
html body .topbar .title-board {
  pointer-events: auto !important;
}

html body .title-board-button {
  appearance: none !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  cursor: pointer !important;
}

html body .title-board-button:focus {
  outline: none !important;
}

html body .title-board-button:focus-visible {
  outline: 2px solid rgba(49, 92, 131, 0.85) !important;
  outline-offset: 4px !important;
  border-radius: 20px !important;
}

/* 2026-05-11 correction: flatter IOP PAN mark at high zoom. */
@media (max-width: 1200px), (max-height: 700px) {
  html body[data-stage="forest"] .institution-icons button[data-institution="iop"] > span {
    background-size: 86% 70% !important;
  }

  html body[data-stage="forest"] .institution-side-list button[data-institution="iop"] > span,
  html body[data-stage="forest"] .task-panel .institution-side-list button[data-institution="iop"] > span,
  html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button[data-institution="iop"] > span,
  html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button[data-institution="iop"]:hover > span,
  html body[data-stage="forest"] .task-panel .task-scroll .stage-side-panel.active > .institution-side-list button[data-institution="iop"]:focus-visible > span {
    background-size: 86% 72% !important;
  }

  html body .dialog-icon.logo-iop {
    background-size: 78% 66% !important;
  }

  html body .info-dialog.institution-info-dialog .animal-photo.logo-photo.logo-iop .animal-photo-img {
    transform: scaleY(0.88) !important;
    transform-origin: center center !important;
  }
}

/* 2026-05-11 correction: plain two-line user status in the top bar. */
html body .topbar .user-status {
  display: grid !important;
  justify-items: end !important;
  gap: clamp(1px, 0.22dvh, 4px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #2f312c !important;
  font-size: clamp(0.62rem, 0.58vw, 0.84rem) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html body .topbar .user-status p {
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
}

html body .topbar .user-status strong {
  font-weight: 1000 !important;
}

html body .topbar .user-privacy-link {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #214018 !important;
  font: inherit !important;
  font-size: 0.94em !important;
  font-weight: 950 !important;
  line-height: 1.04 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

html body .topbar .user-privacy-link:hover,
html body .topbar .user-privacy-link:focus-visible {
  color: #315c83 !important;
  outline: none !important;
}

html body .topbar .user-status-link,
html body .topbar .user-version-link {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #214018 !important;
  font: inherit !important;
  font-size: 0.94em !important;
  font-weight: 950 !important;
  line-height: 1.04 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

html body .topbar .user-install-link[hidden] {
  display: none !important;
}

html body .topbar .user-install-link {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}

html body .topbar .user-account-link {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}

html body .topbar .user-status-link:hover,
html body .topbar .user-status-link:focus-visible {
  color: #315c83 !important;
  outline: none !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .topbar .user-status {
    gap: 1px !important;
    font-size: clamp(0.48rem, 0.9vw, 0.62rem) !important;
    line-height: 1.04 !important;
  }
}

@media (max-width: 900px), (max-height: 520px), (hover: none) and (pointer: coarse) {
  html body .topbar .user-status {
    font-size: clamp(0.4rem, 1.05vw, 0.52rem) !important;
  }
}

/* 2026-05-11: Supabase account dialog. */
html body .auth-dialog {
  width: min(500px, calc(100vw - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
  border: 0 !important;
  border-radius: 24px !important;
  padding: clamp(62px, 7vh, 84px) clamp(50px, 5vw, 72px) clamp(54px, 6vh, 76px) !important;
  color: #24311e !important;
  background: transparent url("assets/popup_background.png") center / 100% 100% no-repeat !important;
  box-shadow: 0 26px 86px rgba(14, 23, 12, 0.45) !important;
  overflow: hidden !important;
}

html body .auth-dialog::backdrop {
  background: rgba(20, 35, 16, 0.48) !important;
  backdrop-filter: blur(2px) !important;
}

html body .auth-dialog[open] {
  display: grid !important;
  gap: clamp(10px, 1.4vh, 16px) !important;
}

html body .auth-dialog .close-dialog {
  right: clamp(30px, 3vw, 48px) !important;
  top: clamp(28px, 3vh, 42px) !important;
}

html body .auth-dialog h2 {
  margin: 0 !important;
  color: #315c23 !important;
  font-size: clamp(1.45rem, 2.6vw, 2rem) !important;
  line-height: 1.04 !important;
  text-align: center !important;
}

html body .auth-dialog-intro {
  margin: 0 !important;
  color: #45543b !important;
  font-size: clamp(0.88rem, 1.7vw, 1rem) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

html body .auth-dialog-intro[data-mode="success"] {
  color: #2e6a2f !important;
}

html body .auth-dialog-intro[data-mode="error"] {
  color: #9f2d1e !important;
}

html body .auth-form {
  display: grid !important;
  gap: 12px !important;
}

html body .auth-form[hidden],
html body .auth-session[hidden] {
  display: none !important;
}

html body .auth-form label {
  display: grid !important;
  gap: 5px !important;
  color: #314321 !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
}

html body .auth-form input {
  width: 100% !important;
  min-height: 42px !important;
  border: 2px solid rgba(77, 109, 48, 0.38) !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  background: rgba(255, 253, 238, 0.9) !important;
  color: #24311e !important;
  font: 800 0.96rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html body .auth-form input:focus {
  border-color: #315c83 !important;
  outline: 3px solid rgba(49, 92, 131, 0.18) !important;
}

html body .auth-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
}

html body .auth-dialog .speech-action {
  min-height: 42px !important;
  margin: 4px 0 0 !important;
  padding: 0 18px !important;
}

html body .auth-dialog .speech-action.secondary-action {
  background: #557234 !important;
  box-shadow: 0 4px 0 #364a20 !important;
}

html body .auth-dialog .speech-action:disabled,
html body .auth-dialog input:disabled {
  opacity: 0.58 !important;
  cursor: wait !important;
}

html body .auth-session {
  display: grid !important;
  justify-items: center !important;
  gap: 10px !important;
}

html body .auth-session p {
  margin: 0 !important;
  text-align: center !important;
  font-weight: 850 !important;
  line-height: 1.32 !important;
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .auth-dialog {
    width: min(430px, calc(100vw - 18px)) !important;
    max-height: calc(100dvh - 18px) !important;
    padding: 56px 42px 48px !important;
  }

  html body .auth-dialog h2 {
    font-size: 1.34rem !important;
  }

  html body .auth-dialog-intro,
  html body .auth-form label,
  html body .auth-session p {
    font-size: 0.8rem !important;
  }
}

/* 2026-05-11 correction: center the GIOS name vertically against the header logo. */
html body .topbar .brand {
  align-items: center !important;
}

html body .topbar .brand-copy {
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  transform: none !important;
}

html body .topbar .brand-copy small {
  margin-top: 0 !important;
}

/* 2026-05-11 final: institution logos in card popups should breathe inside the photo field. */
html body .info-dialog.institution-info-dialog .animal-photo.logo-photo .animal-photo-img {
  width: 90% !important;
  height: 90% !important;
  align-self: center !important;
  justify-self: center !important;
}

/* 2026-05-11 correction: institution logos in card popups should breathe inside the photo field. */
html body .info-dialog.institution-info-dialog .animal-photo.logo-photo .animal-photo-img {
  width: 90% !important;
  height: 90% !important;
  align-self: center !important;
  justify-self: center !important;
}

/* 2026-05-11 correction: full-game best-results overlay inside the round summary popup. */
html body .stage-intro-dialog.stage-summary-dialog {
  position: relative !important;
}

html body .stage-intro-dialog.stage-summary-dialog.full-game-summary-dialog[open] {
  min-height: min(620px, calc(100dvh - 28px)) !important;
}

html body .full-game-summary-overlay {
  position: absolute !important;
  inset: var(--summary-popup-pad-top, clamp(76px, 11dvh, 104px)) var(--summary-popup-pad-x, clamp(54px, 6vw, 94px)) var(--summary-popup-pad-bottom, clamp(58px, 9dvh, 86px)) !important;
  z-index: 18 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: auto !important;
}

html body .full-game-summary-inline {
  width: 100% !important;
  min-height: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(10px, 1.6dvh, 18px) clamp(8px, 1.4vw, 18px) !important;
  box-sizing: border-box !important;
}

html body .full-game-summary-inline .full-game-summary-panel {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .full-game-summary-panel {
  pointer-events: auto !important;
  width: min(100%, 760px) !important;
  max-height: 100% !important;
  display: grid !important;
  gap: clamp(10px, 1.4dvh, 16px) !important;
  padding: clamp(18px, 2.4dvh, 28px) clamp(18px, 2.2vw, 30px) clamp(16px, 2.2dvh, 24px) !important;
  overflow: auto !important;
  border: 2px solid rgba(79, 119, 42, 0.38) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255, 252, 232, 0.98), rgba(240, 232, 198, 0.97)) !important;
  color: #2b3423 !important;
  box-shadow: 0 20px 46px rgba(29, 24, 13, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.42) !important;
}

html body .full-game-summary-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 4px 16px !important;
  align-items: end !important;
}

html body .full-game-summary-head p,
html body .full-game-summary-head h3 {
  margin: 0 !important;
}

html body .full-game-summary-head p {
  grid-column: 1 / -1 !important;
  color: #61714b !important;
  font-size: 0.78rem !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

html body .full-game-summary-head h3 {
  color: #254b20 !important;
  font-size: 1.32rem !important;
  line-height: 1.05 !important;
}

html body .full-game-summary-head strong {
  color: #1f3c19 !important;
  font-size: 1.38rem !important;
  line-height: 1 !important;
}

html body .full-game-summary-list {
  display: grid !important;
  gap: 8px !important;
}

html body .full-game-summary-section-title {
  margin: clamp(8px, 1.3dvh, 12px) 0 -2px !important;
  color: #61714b !important;
  font-size: 0.78rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

html body .full-game-summary-row {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) minmax(82px, auto) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: inset 0 0 0 1px rgba(73, 84, 43, 0.12) !important;
}

html body .full-game-summary-total {
  grid-template-columns: 56px minmax(0, 1fr) minmax(82px, auto) !important;
  margin-top: clamp(8px, 1.5dvh, 14px) !important;
}

html body .full-game-summary-row.is-actionable {
  cursor: pointer !important;
}

html body .full-game-summary-round-bubble {
  cursor: pointer !important;
}

html body .full-game-summary-row.is-actionable:hover,
html body .full-game-summary-row.is-actionable:focus-visible {
  outline: 2px solid rgba(60, 119, 38, 0.38) !important;
  outline-offset: 2px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 8px 18px rgba(43, 58, 31, 0.12), inset 0 0 0 1px rgba(73, 84, 43, 0.18) !important;
}

html body .full-game-summary-row.is-failed,
html body .full-game-summary-row.is-empty {
  filter: none !important;
  opacity: 0.9 !important;
}

html body .full-game-summary-row.is-empty {
  opacity: 0.84 !important;
}

html body .full-game-summary-row-icon {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #dceec4 !important;
  color: #246c22 !important;
  font-size: 1.48rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

html body .full-game-summary-total .full-game-summary-row-icon {
  width: 54px !important;
  height: 54px !important;
  font-size: 2rem !important;
}

html body .full-game-summary-row.is-passed .full-game-summary-row-icon {
  background: #dceec4 !important;
  color: #1f8b2d !important;
}

html body .full-game-summary-row.is-failed .full-game-summary-row-icon,
html body .full-game-summary-row.is-empty .full-game-summary-row-icon {
  background: #f5ddd6 !important;
  color: #c92921 !important;
}

html body .full-game-summary-row.is-empty .full-game-summary-row-icon {
  background: #fff0cf !important;
  color: #d47b10 !important;
}

html body .full-game-summary-row strong,
html body .full-game-summary-row small,
html body .full-game-summary-row p,
html body .full-game-summary-row b,
html body .full-game-summary-row time {
  min-width: 0 !important;
  line-height: 1.08 !important;
}

html body .full-game-summary-row-copy {
  min-width: 0 !important;
}

html body .full-game-summary-row strong {
  display: grid !important;
  gap: 3px !important;
  color: #263c1e !important;
  font-size: 0.98rem !important;
}

html body .full-game-summary-row strong span,
html body .full-game-summary-row-stats span {
  display: block !important;
  color: #7b845f !important;
  font-size: 0.62rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html body .full-game-summary-row small {
  display: block !important;
  margin-top: 3px !important;
  color: #657054 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

html body .full-game-summary-row p {
  margin: 6px 0 0 !important;
  color: #3d4c31 !important;
  font-size: 0.75rem !important;
  font-weight: 850 !important;
  line-height: 1.22 !important;
}

html body .full-game-summary-row-stats {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
  justify-items: end !important;
}

html body .full-game-summary-row-stats b,
html body .full-game-summary-row-stats time {
  display: grid !important;
  gap: 3px !important;
}

html body .full-game-summary-row b,
html body .full-game-summary-row time {
  color: #283a1f !important;
  font-size: 0.92rem !important;
  font-weight: 1000 !important;
  text-align: right !important;
}

html body .full-game-summary-dismiss {
  justify-self: center !important;
  width: clamp(58px, 7.4dvh, 76px) !important;
  height: clamp(58px, 7.4dvh, 76px) !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #8bd35f, #348829) !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 2.45rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 22px rgba(39, 79, 25, 0.28), inset 0 0 0 4px rgba(255, 255, 255, 0.32) !important;
}

html body .full-game-summary-dismiss.is-incomplete {
  background: linear-gradient(180deg, #dc7161, #9b322a) !important;
}

html body .full-game-summary-dismiss:hover,
html body .full-game-summary-dismiss:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow: 0 13px 26px rgba(39, 79, 25, 0.34), inset 0 0 0 4px rgba(255, 255, 255, 0.4) !important;
}

@media (max-width: 760px), (max-height: 560px) {
  html body .stage-intro-dialog.stage-summary-dialog.full-game-summary-dialog[open] {
    min-height: calc(100dvh - 10px) !important;
  }

  html body .full-game-summary-overlay {
    inset: var(--summary-popup-pad-top, 54px) var(--summary-popup-pad-x, 48px) var(--summary-popup-pad-bottom, 54px) !important;
  }

  html body .full-game-summary-inline {
    padding: 4px !important;
  }

  html body .full-game-summary-panel {
    gap: 7px !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }

  html body .full-game-summary-head {
    grid-template-columns: 1fr !important;
  }

  html body .full-game-summary-head p {
    font-size: 0.52rem !important;
  }

  html body .full-game-summary-head h3,
  html body .full-game-summary-head strong {
    font-size: 0.78rem !important;
  }

  html body .full-game-summary-row {
    grid-template-columns: 28px minmax(0, 1fr) minmax(46px, auto) !important;
    gap: 6px !important;
    padding: 6px 7px !important;
    border-radius: 9px !important;
  }

  html body .full-game-summary-section-title {
    margin: 4px 0 -3px !important;
    font-size: 0.52rem !important;
  }

  html body .full-game-summary-total {
    grid-template-columns: 36px minmax(0, 1fr) minmax(46px, auto) !important;
    margin-top: 7px !important;
  }

  html body .full-game-summary-row-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 1rem !important;
  }

  html body .full-game-summary-total .full-game-summary-row-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.4rem !important;
  }

  html body .full-game-summary-row strong {
    font-size: 0.58rem !important;
  }

  html body .full-game-summary-row strong span,
  html body .full-game-summary-row-stats span {
    font-size: 0.38rem !important;
  }

  html body .full-game-summary-row small {
    font-size: 0.48rem !important;
  }

  html body .full-game-summary-row p {
    margin-top: 3px !important;
    font-size: 0.46rem !important;
    line-height: 1.12 !important;
  }

  html body .full-game-summary-row-stats {
    gap: 2px !important;
  }

  html body .full-game-summary-row b,
  html body .full-game-summary-row time {
    font-size: 0.52rem !important;
  }

  html body .full-game-summary-dismiss {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.6rem !important;
  }
}

/* 2026-05-11 correction: footer map labels sit under their own location symbols. */
html body .bottom-bar .stage-map .stage-current-label {
  display: none !important;
}

html body .bottom-bar .stage-node strong {
  position: absolute !important;
  left: 50% !important;
  top: calc(50% + clamp(14px, 2.2dvh, 23px)) !important;
  z-index: 4 !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 11ch !important;
  height: auto !important;
  padding: clamp(1px, 0.22dvh, 3px) clamp(4px, 0.45vw, 8px) clamp(2px, 0.26dvh, 4px) !important;
  overflow: visible !important;
  clip: auto !important;
  border: 1px solid rgba(78, 86, 49, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 249, 226, 0.84) !important;
  box-shadow: 0 2px 4px rgba(31, 38, 17, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.34) !important;
  color: #28411f !important;
  font-size: clamp(0.5rem, min(0.7vw, 1.28dvh), 0.74rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

html body .bottom-bar .stage-node.active strong {
  background: linear-gradient(180deg, rgba(255, 249, 226, 0.96), rgba(224, 239, 198, 0.92)) !important;
  border-color: rgba(57, 122, 57, 0.34) !important;
  color: #173923 !important;
  box-shadow: 0 3px 7px rgba(31, 38, 17, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.52) !important;
}

html body .bottom-bar .stage-node[aria-disabled="true"] strong {
  background: rgba(239, 233, 207, 0.68) !important;
  color: #63705c !important;
  opacity: 0.82 !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .bottom-bar .stage-node strong {
    top: calc(50% + clamp(11px, 2.3dvh, 17px)) !important;
    max-width: 9ch !important;
    padding: 1px 4px 2px !important;
    font-size: clamp(0.44rem, 1.45dvh, 0.56rem) !important;
  }
}

/* 2026-05-11 correction: show only the current footer-map location label. */
html body .bottom-bar .stage-node:not(.active) strong {
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

/* 2026-05-11 correction: active footer-map label keeps enough width at 250% zoom. */
html body .bottom-bar .stage-node.active strong {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  padding-left: clamp(6px, 0.7vw, 10px) !important;
  padding-right: clamp(6px, 0.7vw, 10px) !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body .bottom-bar .stage-node.active strong {
    max-width: none !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* 2026-05-11: camera tool shows a clean full-board view through a lens. */
html.camera-view-root,
html.camera-view-root body,
html body.camera-view-active {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  background: #050806 !important;
}

html body .camera-viewfinder,
html body .camera-view-close {
  display: none !important;
}

html body .camera-button.is-locked {
  opacity: 0.38 !important;
  filter: grayscale(0.92) saturate(0.55) brightness(0.82) drop-shadow(0 3px 5px rgba(31, 38, 17, 0.12)) !important;
}

html body.camera-view-active .app {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #050806 !important;
}

html body.camera-view-active .topbar,
html body.camera-view-active .bottom-bar,
html body.camera-view-active .task-panel,
html body.camera-view-active .fact-strip,
html body.camera-view-active .board-fullscreen-button,
html body.camera-view-active .round-stop-button,
html body.camera-view-active .sidebar-round-hud,
html body.camera-view-active .stage-hud,
html body.camera-view-active .dam-target-bubble,
html body.camera-view-active .trace-start-overlay,
html body.camera-view-active .plant-summary,
html body.camera-view-active .trace-field,
html body.camera-view-active .memo-board,
html body.camera-view-active .institution-icons,
html body.camera-view-active .forest-assignment,
html body.camera-view-active .context-help-bubble,
html body.camera-view-active .hotspot {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body.camera-view-active .play-area,
html.board-expanded-root body.camera-view-active .play-area {
  position: fixed !important;
  inset: 0 !important;
  z-index: 6000 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #050806 !important;
  touch-action: pan-x pan-y pinch-zoom !important;
}

html body.camera-view-active .play-area > .stage-view {
  display: none !important;
}

html body.camera-view-active .play-area > .stage-view.active,
html.board-expanded-root body.camera-view-active .play-area > .stage-view.active {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6001 !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: saturate(1.06) contrast(1.03) brightness(0.93) !important;
}

html body.camera-view-active .trace-game,
html body.camera-view-active .mountain-stage,
html body.camera-view-active .forest-stage {
  background-repeat: no-repeat !important;
  background-color: #071109 !important;
}

/* 2026-05-11 correction: camera view fills the whole lens on stages 2-4, accepting image crop. */
html body.camera-view-active .trace-game {
  background-size: 100% 100%, cover !important;
  background-position: center center, center center !important;
}

html body.camera-view-active.meadow-complete .trace-game {
  background-position: center center, center top !important;
}

html body.camera-view-active .mountain-stage {
  background-size: 100% 100%, cover !important;
  background-position: center center, center 22% !important;
}

html body.camera-view-active .forest-stage {
  background-size: 100% 100%, cover !important;
  background-position: center center, center center !important;
}

html body.camera-view-active .camera-viewfinder {
  position: fixed !important;
  inset: 0 !important;
  z-index: 7100 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.74), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.74)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.76), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.76)) !important;
  box-shadow:
    inset 0 0 0 clamp(7px, 1.1vmin, 14px) rgba(2, 3, 2, 0.94),
    inset 0 0 64px rgba(0, 0, 0, 0.52) !important;
}

html body.camera-view-active .camera-viewfinder::before {
  content: "" !important;
  position: absolute !important;
  left: clamp(26px, 5.2vmin, 72px) !important;
  right: clamp(26px, 5.2vmin, 72px) !important;
  top: clamp(30px, 6vmin, 82px) !important;
  bottom: clamp(30px, 6vmin, 82px) !important;
  --camera-corner-size: clamp(34px, 8vmin, 92px);
  --camera-corner-thickness: clamp(3px, 0.54vmin, 6px);
  background:
    linear-gradient(rgba(224, 250, 226, 0.74), rgba(224, 250, 226, 0.74)) left top / var(--camera-corner-size) var(--camera-corner-thickness) no-repeat,
    linear-gradient(rgba(224, 250, 226, 0.74), rgba(224, 250, 226, 0.74)) left top / var(--camera-corner-thickness) var(--camera-corner-size) no-repeat,
    linear-gradient(rgba(224, 250, 226, 0.74), rgba(224, 250, 226, 0.74)) right top / var(--camera-corner-size) var(--camera-corner-thickness) no-repeat,
    linear-gradient(rgba(224, 250, 226, 0.74), rgba(224, 250, 226, 0.74)) right top / var(--camera-corner-thickness) var(--camera-corner-size) no-repeat,
    linear-gradient(rgba(224, 250, 226, 0.74), rgba(224, 250, 226, 0.74)) left bottom / var(--camera-corner-size) var(--camera-corner-thickness) no-repeat,
    linear-gradient(rgba(224, 250, 226, 0.74), rgba(224, 250, 226, 0.74)) left bottom / var(--camera-corner-thickness) var(--camera-corner-size) no-repeat,
    linear-gradient(rgba(224, 250, 226, 0.74), rgba(224, 250, 226, 0.74)) right bottom / var(--camera-corner-size) var(--camera-corner-thickness) no-repeat,
    linear-gradient(rgba(224, 250, 226, 0.74), rgba(224, 250, 226, 0.74)) right bottom / var(--camera-corner-thickness) var(--camera-corner-size) no-repeat !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 0 7px rgba(205, 255, 210, 0.28)) !important;
}

html body.camera-view-active .camera-viewfinder::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(70vw, 70dvh) !important;
  height: min(52vw, 52dvh) !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(231, 255, 232, 0.25) 50%, transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(231, 255, 232, 0.25) 50%, transparent calc(50% + 1px)) !important;
  opacity: 0.6 !important;
}

html body.camera-view-active .camera-view-close {
  position: fixed !important;
  right: clamp(12px, 2.4vmin, 28px) !important;
  top: clamp(12px, 2.4vmin, 28px) !important;
  z-index: 7300 !important;
  width: clamp(42px, 7vmin, 58px) !important;
  height: clamp(42px, 7vmin, 58px) !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid rgba(230, 255, 229, 0.62) !important;
  border-radius: 50% !important;
  background: rgba(4, 9, 6, 0.64) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 0 16px rgba(229, 255, 228, 0.06) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

html body.camera-view-active .camera-view-close::before,
html body.camera-view-active .camera-view-close::after {
  content: "" !important;
  position: absolute !important;
  width: 54% !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(236, 255, 236, 0.9) !important;
}

html body.camera-view-active .camera-view-close::before {
  transform: rotate(45deg) !important;
}

html body.camera-view-active .camera-view-close::after {
  transform: rotate(-45deg) !important;
}

html body .camera-unlock-intro-popup {
  position: fixed !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 7280 !important;
  width: min(360px, calc(100vw - 32px)) !important;
  max-width: none !important;
  max-height: calc(100dvh - 24px) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  justify-items: center !important;
  gap: clamp(7px, 1.1vmin, 10px) !important;
  padding: clamp(14px, 2.4vmin, 22px) clamp(16px, 2.8vmin, 26px) !important;
  border: 1px solid rgba(225, 255, 221, 0.52) !important;
  border-radius: 12px !important;
  background: rgba(10, 24, 14, 0.88) !important;
  color: #f5ffe9 !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.42), inset 0 0 18px rgba(213, 255, 205, 0.06) !important;
  text-align: center !important;
  pointer-events: auto !important;
  backdrop-filter: blur(7px) !important;
  overflow: auto !important;
}

html body .camera-unlock-intro-popup::backdrop {
  background: transparent !important;
}

html body .camera-unlock-intro-icon {
  width: clamp(34px, 6vmin, 48px) !important;
  height: clamp(34px, 6vmin, 48px) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.62), transparent 18%),
    linear-gradient(180deg, #cfeec0, #6e9d48) !important;
  box-shadow: inset 0 -4px 12px rgba(36, 70, 25, 0.32), 0 0 0 5px rgba(216, 255, 204, 0.1) !important;
}

html body .camera-unlock-intro-icon::before {
  content: "" !important;
  display: block !important;
  width: 58% !important;
  height: 42% !important;
  margin: 30% auto 0 !important;
  border: 3px solid rgba(8, 32, 14, 0.74) !important;
  border-radius: 9px !important;
  box-sizing: border-box !important;
}

html body .camera-unlock-intro-popup h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font: 850 clamp(1rem, 2.2vmin, 1.28rem)/1.1 "Segoe UI", Arial, sans-serif !important;
}

html body .camera-unlock-intro-popup p {
  max-width: 30ch !important;
  margin: 0 !important;
  color: rgba(245, 255, 233, 0.92) !important;
  font: 600 clamp(0.72rem, 1.65vmin, 0.92rem)/1.32 "Segoe UI", Arial, sans-serif !important;
}

html body .camera-unlock-intro-action {
  min-height: clamp(30px, 4.8vmin, 38px) !important;
  padding: 0 clamp(16px, 3vmin, 24px) !important;
  border: 1px solid rgba(247, 255, 235, 0.54) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #f2ffd8, #b6d77e) !important;
  color: #20310f !important;
  font: 850 clamp(0.72rem, 1.55vmin, 0.88rem)/1 "Segoe UI", Arial, sans-serif !important;
  cursor: pointer !important;
}

html body .camera-unlock-intro-close {
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(240, 255, 232, 0.42) !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.2) !important;
  color: rgba(250, 255, 240, 0.86) !important;
  font: 850 0.72rem/1 "Segoe UI", Arial, sans-serif !important;
  cursor: pointer !important;
}

html body .camera-photo-marker {
  display: none;
}

html body.camera-view-active .camera-photo-marker {
  position: fixed !important;
  z-index: 7250 !important;
  width: var(--camera-marker-size, clamp(18px, 3.4vmin, 30px)) !important;
  height: var(--camera-marker-size, clamp(18px, 3.4vmin, 30px)) !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid rgba(236, 255, 228, 0.86) !important;
  border-radius: 50% !important;
  background:
    url("assets/camera-observation-marker.svg") center / 84% 84% no-repeat,
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.74), transparent 22%),
    linear-gradient(180deg, rgba(70, 118, 42, 0.96), rgba(26, 65, 24, 0.98)) !important;
  color: transparent !important;
  box-shadow:
    0 0 0 5px rgba(215, 255, 210, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.34),
    inset 0 0 10px rgba(255, 255, 255, 0.14) !important;
  font-size: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  animation: camera-photo-pulse 0.95s ease-in-out infinite !important;
}

html body.camera-view-active .camera-photo-marker::after {
  content: "" !important;
  position: absolute !important;
  inset: -7px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(222, 255, 219, 0.28) !important;
}

@keyframes camera-photo-pulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18);
  }
}

html body.camera-view-active .play-area > .task-panel,
html.board-expanded-root body.camera-view-active .play-area > .task-panel,
html body.camera-view-active .play-area .hotspot,
html.board-expanded-root body.camera-view-active .play-area .hotspot {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-height: 650px) and (orientation: landscape), (max-width: 920px) and (orientation: landscape) {
  .camera-photo-dialog {
    width: min(860px, calc(100vw - 16px));
    max-height: calc(100dvh - 12px);
    padding: 10px;
    border-radius: 12px;
    font-size: 0.78rem;
  }

  .camera-photo-dialog-scroll {
    grid-template-columns: minmax(190px, 0.82fr) minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "figure quiz";
    gap: 8px 10px;
  }

  .camera-photo-dialog-header {
    grid-area: header;
    grid-template-columns: 38px 1fr;
    gap: 8px;
    padding-right: 34px;
  }

  .camera-photo-dialog-header span {
    width: 36px;
    height: 36px;
    font-size: 1.12rem;
  }

  .camera-photo-dialog-label {
    margin-bottom: 1px;
    font-size: 0.6rem;
  }

  .camera-photo-dialog-header h2 {
    font-size: 1.02rem;
  }

  .camera-photo-figure {
    grid-area: figure;
    align-self: start;
    border-radius: 9px;
  }

  .camera-photo-figure img {
    aspect-ratio: 4 / 3;
    max-height: 38dvh;
  }

  .camera-photo-figure figcaption {
    max-height: 3.35em;
    padding: 5px 7px;
    overflow: hidden;
    font-size: 0.62rem;
    line-height: 1.18;
  }

  .camera-photo-quiz {
    grid-area: quiz;
    align-content: start;
    gap: 7px;
  }

  .camera-photo-quiz-topline {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .camera-photo-quiz-topline p {
    font-size: 0.78rem;
    line-height: 1.16;
  }

  .camera-photo-quiz-topline strong {
    min-width: 54px;
    padding: 5px 7px;
    font-size: 0.72rem;
  }

  .camera-photo-answers {
    gap: 5px;
  }

  .camera-photo-answer {
    min-height: 30px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 0.75rem;
    line-height: 1.15;
  }

  .camera-photo-status {
    min-height: 1.15em;
    font-size: 0.7rem;
    line-height: 1.15;
  }

  .camera-photo-dialog.is-captured {
    width: min(520px, calc(100vw - 14px));
    padding: 8px;
  }

  .camera-photo-dialog.is-captured .camera-photo-dialog-scroll {
    min-height: calc(100dvh - 28px);
    grid-template-columns: 1fr;
    grid-template-areas: "polaroid";
    place-items: center;
    align-content: center;
    justify-content: center;
  }

  .camera-photo-dialog.is-captured .camera-photo-figure {
    width: min(320px, 58dvh, 70vw);
    grid-area: polaroid;
    gap: 6px;
    padding: 8px 8px 12px;
  }

  .camera-photo-dialog.is-captured .camera-photo-figure img {
    max-height: 50dvh;
  }

  .camera-photo-dialog.is-captured .camera-photo-figure figcaption {
    position: static;
    display: block;
    max-height: 3.65em;
    font-size: 0.62rem;
    line-height: 1.18;
  }

  .camera-photo-dialog.is-captured .camera-photo-figure::after {
    top: 14px;
    bottom: auto;
    font-size: 0.52rem;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .camera-photo-dialog {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    padding: 9px;
    border-radius: 12px;
    font-size: 0.76rem;
  }

  .camera-photo-dialog-scroll {
    gap: 7px;
  }

  .camera-photo-dialog-header {
    grid-template-columns: 36px 1fr;
    gap: 8px;
    padding-right: 32px;
  }

  .camera-photo-dialog-header span {
    width: 34px;
    height: 34px;
    font-size: 1.05rem;
  }

  .camera-photo-dialog-label {
    font-size: 0.58rem;
  }

  .camera-photo-dialog-header h2 {
    font-size: 1rem;
  }

  .camera-photo-figure {
    border-radius: 9px;
  }

  .camera-photo-figure img {
    aspect-ratio: 16 / 8;
    max-height: 130px;
  }

  .camera-photo-figure figcaption {
    max-height: 2.45em;
    padding: 5px 7px;
    overflow: hidden;
    font-size: 0.6rem;
    line-height: 1.18;
  }

  .camera-photo-quiz-topline {
    grid-template-columns: 1fr auto;
    gap: 7px;
  }

  .camera-photo-quiz-topline strong {
    min-width: 50px;
    padding: 5px 7px;
    font-size: 0.7rem;
  }

  .camera-photo-answers {
    gap: 5px;
  }

  .camera-photo-answer {
    min-height: 30px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 0.74rem;
    line-height: 1.15;
  }

  .camera-photo-status {
    min-height: 1.15em;
    font-size: 0.68rem;
    line-height: 1.15;
  }

  .camera-photo-dialog.is-captured {
    width: calc(100vw - 12px);
    padding: 8px;
  }

  .camera-photo-dialog.is-captured .camera-photo-dialog-scroll {
    min-height: calc(100dvh - 26px);
    grid-template-columns: 1fr;
    grid-template-areas: "polaroid";
    place-items: center;
    align-content: center;
    justify-content: center;
  }

  .camera-photo-dialog.is-captured .camera-photo-figure {
    width: min(300px, 78vw);
    grid-area: polaroid;
    gap: 6px;
    padding: 8px 8px 12px;
  }

  .camera-photo-dialog.is-captured .camera-photo-figure img {
    max-height: 46dvh;
  }

  .camera-photo-dialog.is-captured .camera-photo-figure figcaption {
    position: static;
    display: block;
    max-height: 3.65em;
    font-size: 0.62rem;
    line-height: 1.18;
  }

  .camera-photo-dialog.is-captured .camera-photo-figure::after {
    top: 14px;
    bottom: auto;
    font-size: 0.52rem;
  }
}

@media (max-height: 470px) {
  .camera-photo-figure img {
    max-height: 30dvh;
  }

  .camera-photo-figure figcaption {
    display: none;
  }

  .camera-photo-dialog.is-captured .camera-photo-figure figcaption {
    display: block;
    max-height: 2.45em;
    font-size: 0.58rem;
    line-height: 1.14;
  }

  .camera-photo-dialog.is-captured .camera-photo-dialog-scroll {
    grid-template-columns: 1fr;
    grid-template-areas: "polaroid";
    place-items: center;
  }

  .camera-photo-dialog.is-captured .camera-photo-figure {
    width: min(270px, 62dvh, 74vw);
    padding: 6px 6px 9px;
    gap: 4px;
  }

  .camera-photo-dialog.is-captured .camera-photo-figure::after {
    top: 10px;
    font-size: 0.48rem;
  }
}

/* 2026-05-11 correction: institution logos render as contained images, not cropped backgrounds. */
html body .info-dialog.institution-info-dialog .animal-photo.logo-photo {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: clamp(4px, 0.7dvh, 8px) !important;
  padding: clamp(6px, 0.85vw, 10px) !important;
  background: rgba(255, 250, 232, 0.8) !important;
  background-image: none !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

html body .info-dialog.institution-info-dialog .animal-photo.logo-photo.logo-gios,
html body .info-dialog.institution-info-dialog .animal-photo.logo-photo.logo-gdos,
html body .info-dialog.institution-info-dialog .animal-photo.logo-photo.logo-rdos,
html body .info-dialog.institution-info-dialog .animal-photo.logo-photo.logo-eea,
html body .info-dialog.institution-info-dialog .animal-photo.logo-photo.logo-iop {
  background-image: none !important;
}

html body .info-dialog.institution-info-dialog .animal-photo.logo-photo .animal-photo-img {
  display: block !important;
  width: 90% !important;
  height: 90% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: center !important;
  justify-self: center !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 7px !important;
  filter: drop-shadow(0 3px 5px rgba(28, 32, 18, 0.16)) !important;
}

html body .info-dialog.institution-info-dialog .animal-photo.logo-photo figcaption {
  flex: none !important;
  width: 100% !important;
  align-self: end !important;
}

/* 2026-05-11 correction: crop empty vertical field inside institution card illustrations, not the forest board. */
html body .info-dialog.institution-info-dialog .animal-photo.logo-photo {
  min-height: 0 !important;
  height: clamp(138px, 22dvh, 214px) !important;
  padding-top: clamp(3px, 0.55dvh, 7px) !important;
  padding-bottom: clamp(3px, 0.55dvh, 7px) !important;
}

html body .info-dialog.institution-info-dialog .animal-photo.logo-photo .animal-photo-img {
  width: 92% !important;
  height: 86% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .info-dialog.institution-info-dialog .animal-photo.logo-photo {
    height: clamp(86px, 20dvh, 146px) !important;
    padding-top: clamp(2px, 0.45dvh, 5px) !important;
    padding-bottom: clamp(2px, 0.45dvh, 5px) !important;
  }

  html body .info-dialog.institution-info-dialog .animal-photo.logo-photo .animal-photo-img {
    width: 90% !important;
    height: 84% !important;
  }
}

/* 2026-05-11 correction: keep the high-zoom forester speech bubble beside the guide. */
@media (max-width: 1200px), (max-height: 700px) {
  html body:not([data-stage="forest"]) .guide .speech,
  html body:not([data-stage="forest"]) .guide .speech.speech-intro,
  html body:not([data-stage="forest"]) .guide .speech.speech-muted,
  html body:not([data-stage="forest"]) .guide .speech:not(.speech-hidden) {
    left: clamp(68px, 6.8vw, 92px) !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  html body:not([data-stage="forest"]) .guide .speech,
  html body:not([data-stage="forest"]) .guide .speech.speech-intro,
  html body:not([data-stage="forest"]) .guide .speech.speech-muted,
  html body:not([data-stage="forest"]) .guide .speech:not(.speech-hidden) {
    left: clamp(56px, 6vw, 72px) !important;
  }
}

/* 2026-05-11 final: larger footer map on desktop and roomier info popups on 2560px displays. */
@media (min-width: 1400px) and (min-height: 780px) {
  :root {
    --footer-restored-map-width: clamp(690px, 37vw, 760px);
    --footer-restored-map-height: clamp(126px, 6.8vw, 142px);
    --footer-node-size: clamp(40px, calc(var(--footer-restored-map-width) * 0.073), 54px);
    --footer-node-icon-size: clamp(28px, calc(var(--footer-restored-map-width) * 0.052), 39px);
    --footer-map-arrow-width: clamp(58px, calc(var(--footer-restored-map-width) * 0.085), 66px);
    --footer-map-arrow-height: clamp(39px, calc(var(--footer-restored-map-width) * 0.057), 45px);
  }

  html body .bottom-bar .stage-map {
    width: var(--footer-restored-map-width) !important;
    max-width: var(--footer-restored-map-width) !important;
    height: var(--footer-restored-map-height) !important;
    min-height: var(--footer-restored-map-height) !important;
  }

  html body .bottom-bar .stage-node,
  html body[data-stage] .bottom-bar .stage-node,
  html body[data-stage] .bottom-bar .stage-node.active,
  html body[data-stage] .bottom-bar .stage-node.unlocked {
    width: var(--footer-node-size) !important;
    height: var(--footer-node-size) !important;
  }

  html body .bottom-bar .stage-icon,
  html body .bottom-bar .stage-node.active .stage-icon,
  html body .bottom-bar .stage-node.unlocked .stage-icon,
  html body[data-stage] .bottom-bar .stage-icon,
  html body[data-stage] .bottom-bar .stage-node.active .stage-icon,
  html body[data-stage] .bottom-bar .stage-node.unlocked .stage-icon {
    width: var(--footer-node-icon-size) !important;
    height: var(--footer-node-icon-size) !important;
  }
}

@media (min-width: 2200px) and (min-height: 900px) {
  :root {
    --footer-restored-map-width: clamp(840px, 34vw, 920px);
    --footer-restored-map-height: clamp(148px, 5.8vw, 164px);
    --footer-node-size: clamp(52px, calc(var(--footer-restored-map-width) * 0.07), 64px);
    --footer-node-icon-size: clamp(36px, calc(var(--footer-restored-map-width) * 0.049), 45px);
    --footer-map-arrow-width: clamp(70px, calc(var(--footer-restored-map-width) * 0.082), 78px);
    --footer-map-arrow-height: clamp(46px, calc(var(--footer-restored-map-width) * 0.054), 52px);
  }

  html body .info-dialog[open].species-info-dialog,
  html body .info-dialog[open].institution-info-dialog {
    --popup-dialog-max-height: calc(100dvh - clamp(96px, 7dvh, 132px));
    --popup-pad-top: clamp(154px, 11.8dvh, 178px);
  }
}

/* 2026-05-11 final: keep privacy policy anchored in the footer after all footer overrides. */
html body .bottom-bar > .footer-privacy-link {
  position: absolute !important;
  right: max(var(--page-side-gap, 8px), clamp(8px, 1vw, 16px)) !important;
  bottom: clamp(5px, 0.8dvh, 10px) !important;
  z-index: 420 !important;
  max-width: min(190px, calc(100vw - 16px)) !important;
  color: #214018 !important;
  font-size: clamp(0.52rem, 0.68vw, 0.76rem) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-align: right !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .bottom-bar > .footer-privacy-link {
    right: max(var(--page-side-gap, 8px), clamp(6px, 1vw, 10px)) !important;
    bottom: clamp(3px, 0.7dvh, 7px) !important;
    font-size: clamp(0.42rem, 1vw, 0.56rem) !important;
  }
}

/* 2026-05-11 final override: mountain memo stays playable under phone zoom. */
@media (max-width: 760px), (max-height: 640px) {
  html body[data-stage="mountains"].memo-round-active .guide,
  html body.board-expanded[data-stage="mountains"].memo-round-active .guide,
  html.board-expanded-root body.board-expanded[data-stage="mountains"].memo-round-active .guide,
  html body[data-stage="mountains"].memo-round-active .guide *,
  html body.board-expanded[data-stage="mountains"].memo-round-active .guide *,
  html.board-expanded-root body.board-expanded[data-stage="mountains"].memo-round-active .guide * {
    pointer-events: none !important;
  }

  html body[data-stage="mountains"].memo-round-active .guide-avatar,
  html body.board-expanded[data-stage="mountains"].memo-round-active .guide-avatar,
  html.board-expanded-root body.board-expanded[data-stage="mountains"].memo-round-active .guide-avatar {
    left: clamp(-88px, -11vw, -48px) !important;
    bottom: clamp(-96px, -12dvh, -64px) !important;
    opacity: 0.84 !important;
    pointer-events: none !important;
  }
}

/* 2026-05-12 correction: lower completed-stage stamps and hide locked nickname controls. */
html body .title-stage-stamp[data-title-stamp] {
  top: 82.4% !important;
}

html body .title-nickname-field[hidden],
html body .title-save-nickname[hidden] {
  display: none !important;
}

@media (max-width: 900px), (max-height: 620px) {
  html body .title-stage-stamp[data-title-stamp] {
    top: 83.3% !important;
  }
}

/* 2026-05-12 correction: compact title screen controls for phone and high browser zoom. */
html body .title-screen-dialog {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: clamp(20px, 5.2dvh, 54px) 0 clamp(16px, 4dvh, 44px) !important;
}

html body .title-screen-frame {
  position: relative !important;
  inset: auto !important;
  width: min(calc(100vw - clamp(16px, 3.2vw, 44px)), calc((100dvh - clamp(52px, 10dvh, 108px)) * 1.5), 1536px) !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  margin: 0 auto !important;
}

html body .title-account-panel {
  left: 29.5% !important;
  top: 35.6% !important;
  width: 45.2% !important;
  height: 33.2% !important;
  max-height: 33.2% !important;
  justify-content: center !important;
  gap: clamp(2px, 0.48dvh, 6px) !important;
  padding: clamp(5px, 1dvh, 12px) clamp(7px, 1.25vw, 18px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}

html body .title-account-current span,
html body .title-profile-stats dt,
html body .title-nickname-field span,
html body .title-auth-form label span,
html body .title-account-message,
html body .title-action-danger {
  font-size: clamp(0.48rem, 1.05dvh, 0.72rem) !important;
  line-height: 1.08 !important;
}

html body .title-account-current strong {
  font-size: clamp(0.68rem, 1.7dvh, 1.06rem) !important;
  line-height: 1.05 !important;
}

html body .title-action,
html body .title-account-panel .title-screen-start {
  height: clamp(22px, 3.55dvh, 34px) !important;
  padding: 0 clamp(5px, 0.72vw, 11px) !important;
  font: 680 clamp(0.48rem, 1.12dvh, 0.76rem)/1 "Segoe UI", Arial, sans-serif !important;
}

html body .title-auth-form,
html body .title-profile-panel {
  gap: clamp(2px, 0.45dvh, 6px) !important;
}

html body .title-auth-form input,
html body .title-nickname-field input {
  height: clamp(20px, 3.15dvh, 30px) !important;
  padding: 0 clamp(4px, 0.65vw, 8px) !important;
  font: 620 clamp(0.48rem, 1.05dvh, 0.72rem)/1.05 "Segoe UI", Arial, sans-serif !important;
}

html body .title-profile-stats {
  gap: clamp(2px, 0.42dvh, 5px) !important;
}

html body .title-profile-stats dd {
  font-size: clamp(0.5rem, 1.16dvh, 0.78rem) !important;
}

html body .title-account-message {
  max-height: 2.3em !important;
  overflow: hidden !important;
}

@media (max-width: 900px), (max-height: 700px) {
  html body .title-screen-dialog {
    padding: clamp(12px, 4dvh, 30px) 0 clamp(10px, 3dvh, 24px) !important;
  }

  html body .title-screen-frame {
    width: min(calc(100vw - 10px), calc((100dvh - clamp(26px, 7dvh, 56px)) * 1.5)) !important;
  }

  html body .title-account-panel {
    left: 28.6% !important;
    top: 35.2% !important;
    width: 47% !important;
    height: 34.8% !important;
    max-height: 34.8% !important;
    gap: 2px !important;
    padding: 3px 5px !important;
    justify-content: flex-start !important;
  }

  html body .title-account-actions,
  html body .title-auth-actions {
    gap: 3px !important;
  }

  html body .title-account-current {
    gap: 0.25em !important;
  }

  html body .title-account-current span,
  html body .title-profile-stats dt,
  html body .title-nickname-field span,
  html body .title-auth-form label span,
  html body .title-account-message,
  html body .title-action-danger {
    font-size: clamp(6px, 1.22dvh, 8px) !important;
  }

  html body .title-account-current strong {
    font-size: clamp(7px, 1.58dvh, 10px) !important;
  }

  html body .title-action,
  html body .title-account-panel .title-screen-start {
    height: clamp(16px, 3.45dvh, 24px) !important;
    min-height: 0 !important;
    padding: 0 4px !important;
    border-radius: 5px !important;
    font-size: clamp(6px, 1.22dvh, 8px) !important;
  }

  html body .title-auth-form input,
  html body .title-nickname-field input {
    height: clamp(16px, 3.25dvh, 23px) !important;
    font-size: clamp(6px, 1.16dvh, 8px) !important;
  }

  html body .title-profile-stats dd {
    font-size: clamp(6px, 1.26dvh, 8px) !important;
  }

  html body .title-stage-stamp[data-title-stamp] {
    top: 83.8% !important;
  }
}

@media (max-width: 520px) {
  html body .title-screen-dialog {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  html body .title-screen-frame {
    width: min(calc(100vw - 6px), calc((100dvh - 18px) * 1.5)) !important;
  }

  html body .title-account-panel {
    left: 28.2% !important;
    top: 35.5% !important;
    width: 47.8% !important;
    height: 35% !important;
    max-height: 35% !important;
    padding: 2px 4px !important;
  }

  html body .title-account-current span,
  html body .title-profile-stats dt,
  html body .title-nickname-field span,
  html body .title-auth-form label span,
  html body .title-account-message,
  html body .title-action-danger {
    font-size: 6px !important;
  }

  html body .title-account-current strong {
    font-size: 7px !important;
  }

  html body .title-action,
  html body .title-account-panel .title-screen-start {
    height: 16px !important;
    font-size: 6px !important;
  }

  html body .title-auth-form input,
  html body .title-nickname-field input {
    height: 16px !important;
    font-size: 6px !important;
  }
}

/* 2026-05-12 correction: login panel layout, centered actions and compact leaderboard. */
html body .title-account-panel {
  left: 28.8% !important;
  top: 38.1% !important;
  width: 47% !important;
  height: 36.2% !important;
  max-height: 36.2% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: clamp(3px, 0.62dvh, 8px) !important;
  padding: clamp(7px, 1.35dvh, 16px) clamp(10px, 1.55vw, 22px) clamp(6px, 1.1dvh, 14px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}

html body .title-account-heading {
  display: block !important;
  margin: 0 !important;
  color: #26331f !important;
  font: 780 clamp(0.72rem, 1.45dvh, 1.02rem)/1.05 "Segoe UI", Arial, sans-serif !important;
  text-align: center !important;
}

html body .title-account-actions,
html body .title-auth-actions,
html body .title-start-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: clamp(4px, 0.7dvh, 8px) !important;
}

html body .title-start-row {
  margin-top: auto !important;
  flex: 0 0 auto !important;
}

html body .title-action,
html body .title-account-panel .title-screen-start {
  width: auto !important;
  min-width: clamp(82px, 13vw, 150px) !important;
  max-width: min(100%, 190px) !important;
  justify-self: center !important;
  padding-left: clamp(8px, 1.1vw, 15px) !important;
  padding-right: clamp(8px, 1.1vw, 15px) !important;
}

html body #title-auth-toggle,
html body #title-signout-button {
  min-width: clamp(112px, 18vw, 178px) !important;
}

html body #title-reset-progress {
  display: none !important;
}

html body .title-auth-form {
  flex: 0 0 auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body .title-profile-panel {
  flex: 0 0 auto !important;
}

html body .title-leaderboard-panel {
  min-height: 0 !important;
  display: grid !important;
  gap: clamp(2px, 0.45dvh, 5px) !important;
}

html body .title-leaderboard-heading {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 8px !important;
  color: #4a3f2c !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

html body .title-leaderboard-heading span {
  font-size: clamp(0.58rem, 1.1dvh, 0.78rem) !important;
  font-weight: 760 !important;
}

html body .title-leaderboard-heading small {
  color: #6f654d !important;
  font-size: clamp(0.48rem, 0.92dvh, 0.66rem) !important;
  font-weight: 650 !important;
}

html body .title-leaderboard-list {
  min-height: clamp(28px, 8.4dvh, 44px) !important;
  max-height: clamp(42px, 9.8dvh, 112px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  display: grid !important;
  gap: clamp(1px, 0.24dvh, 3px) !important;
  padding-right: 6px !important;
}

html body .title-leaderboard-list::-webkit-scrollbar {
  width: 5px !important;
}

html body .title-leaderboard-list::-webkit-scrollbar-track {
  background: transparent !important;
}

html body .title-leaderboard-list::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(86, 70, 41, 0.42) !important;
}

html body .title-leaderboard-row {
  display: grid !important;
  grid-template-columns: 2.6ch minmax(0, 1fr) auto !important;
  align-items: baseline !important;
  gap: clamp(4px, 0.7vw, 8px) !important;
  min-width: 0 !important;
  color: #27321f !important;
  font: 650 clamp(0.5rem, 1.02dvh, 0.72rem)/1.12 "Segoe UI", Arial, sans-serif !important;
}

html body .title-leaderboard-row.is-mock {
  opacity: 0.58 !important;
}

html body .title-leaderboard-rank {
  color: #6f603e !important;
  font-weight: 760 !important;
  text-align: right !important;
}

html body .title-leaderboard-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .title-leaderboard-score {
  color: #25461f !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}

html body .title-account-message {
  flex: 0 0 auto !important;
  max-height: 2.2em !important;
}

@media (max-width: 900px), (max-height: 700px) {
  html body .title-account-panel {
    left: 28.4% !important;
    top: 38.2% !important;
    width: 48.2% !important;
    height: 36% !important;
    max-height: 36% !important;
    gap: 2px !important;
    padding: 5px 6px 4px !important;
    overflow-y: hidden !important;
  }

  html body .title-account-message {
    display: none !important;
  }

  html body .title-account-heading {
    font-size: clamp(6px, 1.28dvh, 9px) !important;
  }

  html body .title-action,
  html body .title-account-panel .title-screen-start,
  html body #title-auth-toggle,
  html body #title-signout-button {
    min-width: clamp(72px, 22vw, 118px) !important;
    height: clamp(15px, 3.2dvh, 22px) !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: clamp(5.5px, 1.15dvh, 8px) !important;
  }

  html body .title-leaderboard-list {
    height: clamp(24px, 7.4dvh, 34px) !important;
    min-height: clamp(24px, 7.4dvh, 34px) !important;
    max-height: clamp(24px, 7.4dvh, 34px) !important;
  }

  html body .title-leaderboard-heading span,
  html body .title-leaderboard-row,
  html body .title-account-message {
    font-size: clamp(5.5px, 1.08dvh, 7.5px) !important;
  }

  html body .title-leaderboard-heading small {
    font-size: clamp(5px, 0.98dvh, 7px) !important;
  }
}

@media (max-width: 520px) {
  html body .title-account-panel {
    top: 38.4% !important;
    height: 36.4% !important;
    max-height: 36.4% !important;
    padding: 4px 5px 3px !important;
  }

  html body .title-account-message {
    display: none !important;
  }

  html body .title-action,
  html body .title-account-panel .title-screen-start,
  html body #title-auth-toggle,
  html body #title-signout-button {
    height: 16px !important;
    min-width: clamp(72px, 22vw, 108px) !important;
  }

  html body .title-auth-form {
    grid-template-columns: 1fr !important;
  }

  html body .title-profile-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body .title-leaderboard-list {
    min-height: 28px !important;
    max-height: 28px !important;
  }
}

/* 2026-05-12 correction: footer map arrows and contextual help targets on high zoom / phone. */
@media (max-width: 900px), (max-height: 700px) {
  :root {
    --footer-map-arrow-inset: 21.4%;
  }
}

@media (max-width: 760px), (max-height: 500px), (hover: none) and (pointer: coarse) {
  :root {
    --footer-map-arrow-inset: 22.2%;
  }
}

/* 2026-05-12 correction: title login row and narrower high-zoom panel. */
html body .title-account-panel {
  left: 29.4% !important;
  width: 42.8% !important;
  max-width: 42.8% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

html body .title-login-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(5px, 0.85vw, 10px) !important;
  min-width: 0 !important;
}

html body .title-account-current {
  justify-content: flex-start !important;
  text-align: left !important;
  min-width: 0 !important;
  gap: 0.32em !important;
}

html body .title-account-actions {
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

html body .title-start-row {
  justify-content: center !important;
  margin-top: 0 !important;
  flex: 0 0 auto !important;
}

html body .title-action,
html body .title-account-panel .title-screen-start,
html body #title-auth-toggle,
html body #title-signout-button {
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  padding-left: clamp(5px, 0.72vw, 10px) !important;
  padding-right: clamp(5px, 0.72vw, 10px) !important;
}

html body #title-auth-toggle,
html body #title-signout-button {
  min-width: clamp(84px, 13.5vw, 138px) !important;
}

html body #title-screen-start {
  min-width: clamp(92px, 14vw, 148px) !important;
}

html body .title-leaderboard-panel,
html body .title-leaderboard-list,
html body .title-leaderboard-row {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body .title-leaderboard-list {
  padding-right: 4px !important;
  overflow-x: hidden !important;
}

html body .title-leaderboard-list::-webkit-scrollbar {
  width: 4px !important;
}

html body .title-leaderboard-row {
  grid-template-columns: 2.1ch minmax(0, 1fr) max-content !important;
  gap: clamp(3px, 0.45vw, 6px) !important;
}

@media (max-width: 900px), (max-height: 700px) {
  html body .title-account-panel {
    left: 29.2% !important;
    width: 43.6% !important;
    max-width: 43.6% !important;
  }

  html body .title-login-row {
    gap: 3px !important;
  }

  html body .title-account-current {
    gap: 0.2em !important;
  }

  html body .title-action,
  html body .title-account-panel .title-screen-start,
  html body #title-auth-toggle,
  html body #title-signout-button {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  html body #title-auth-toggle,
  html body #title-signout-button {
    min-width: clamp(68px, 17vw, 96px) !important;
  }

  html body #title-screen-start {
    min-width: clamp(76px, 18vw, 108px) !important;
  }
}

@media (max-width: 520px) {
  html body .title-account-panel {
    left: 29% !important;
    width: 44.2% !important;
    max-width: 44.2% !important;
  }

  html body .title-login-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html body .title-account-current span {
    white-space: nowrap !important;
  }

  html body #title-auth-toggle,
  html body #title-signout-button {
    min-width: clamp(58px, 18vw, 82px) !important;
  }
}

/* 2026-05-12 correction: title panel uses the play button as the primary top action. */
html body .title-account-panel {
  padding-top: clamp(12px, 2.15dvh, 24px) !important;
}

html body .title-login-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

html body .title-account-actions {
  justify-content: flex-end !important;
}

html body .title-account-actions #title-screen-start {
  min-width: clamp(48px, 7.4vw, 86px) !important;
  height: clamp(24px, 3.7dvh, 34px) !important;
  padding-left: clamp(8px, 0.95vw, 13px) !important;
  padding-right: clamp(8px, 0.95vw, 13px) !important;
  border-color: rgba(32, 83, 30, 0.4) !important;
  background: linear-gradient(180deg, #4f8a32, #2d641f) !important;
  color: #fffbe0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 4px rgba(30, 55, 18, 0.18) !important;
  font-weight: 840 !important;
}

html body .title-start-row {
  display: none !important;
}

@media (max-width: 900px), (max-height: 700px) {
  html body .title-account-panel {
    padding-top: 7px !important;
  }

  html body .title-account-actions #title-screen-start {
    min-width: clamp(42px, 11vw, 62px) !important;
    height: clamp(15px, 3.2dvh, 22px) !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

@media (max-width: 520px) {
  html body .title-account-panel {
    padding-top: 6px !important;
  }

  html body .title-account-actions #title-screen-start {
    min-width: clamp(38px, 11vw, 54px) !important;
  }
}

/* 2026-05-12 correction: camera quiz keeps the desktop vertical order on high zoom and phones. */
@media (max-width: 980px), (max-height: 760px) {
  html body .camera-photo-dialog:not(.is-captured) {
    width: min(620px, calc(100vw - 14px)) !important;
    max-height: calc(100dvh - 10px) !important;
    padding: clamp(6px, 1.15dvh, 10px) !important;
    border-radius: 12px !important;
    font-size: clamp(0.58rem, 1.28dvh, 0.74rem) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-scroll {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "header"
      "figure"
      "quiz" !important;
    gap: clamp(4px, 0.92dvh, 7px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: hidden !important;
    padding-right: 0 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header {
    grid-area: header !important;
    grid-template-columns: clamp(24px, 4.8dvh, 34px) minmax(0, 1fr) !important;
    gap: clamp(5px, 0.9dvh, 8px) !important;
    min-height: 0 !important;
    padding-right: 30px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header span {
    width: clamp(23px, 4.5dvh, 32px) !important;
    height: clamp(23px, 4.5dvh, 32px) !important;
    font-size: clamp(0.72rem, 1.65dvh, 1rem) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-label {
    margin-bottom: 0 !important;
    font-size: clamp(0.44rem, 0.9dvh, 0.56rem) !important;
    line-height: 1 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header h2 {
    font-size: clamp(0.78rem, 1.72dvh, 1rem) !important;
    line-height: 1.02 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure {
    grid-area: figure !important;
    border-radius: 9px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure img {
    width: 100% !important;
    height: clamp(78px, 22dvh, 142px) !important;
    max-height: clamp(78px, 22dvh, 142px) !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure figcaption {
    display: block !important;
    max-height: 2.25em !important;
    padding: 3px 5px !important;
    overflow: hidden !important;
    font-size: clamp(0.44rem, 0.92dvh, 0.56rem) !important;
    line-height: 1.1 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz {
    grid-area: quiz !important;
    gap: clamp(4px, 0.82dvh, 6px) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz-topline {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: clamp(5px, 0.8dvh, 7px) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz-topline p {
    font-size: clamp(0.56rem, 1.22dvh, 0.7rem) !important;
    line-height: 1.1 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz-topline strong {
    min-width: clamp(42px, 7dvh, 52px) !important;
    padding: 3px 6px !important;
    font-size: clamp(0.52rem, 1.12dvh, 0.66rem) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-answers {
    gap: clamp(3px, 0.68dvh, 5px) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-answer {
    min-height: clamp(23px, 4.35dvh, 29px) !important;
    padding: 4px 7px !important;
    border-radius: 7px !important;
    font-size: clamp(0.54rem, 1.18dvh, 0.68rem) !important;
    line-height: 1.08 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-status {
    min-height: 1em !important;
    font-size: clamp(0.5rem, 1.05dvh, 0.62rem) !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 520px) {
  html body .camera-photo-dialog:not(.is-captured) {
    width: min(388px, calc(100vw - 12px)) !important;
    padding: 7px !important;
    font-size: clamp(0.56rem, 2.35vw, 0.68rem) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-scroll {
    gap: 5px !important;
    max-height: calc(100dvh - 22px) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure img {
    height: clamp(104px, 21dvh, 168px) !important;
    max-height: clamp(104px, 21dvh, 168px) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure figcaption {
    max-height: 2.2em !important;
    font-size: clamp(0.48rem, 2vw, 0.56rem) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz-topline p,
  html body .camera-photo-dialog:not(.is-captured) .camera-photo-answer {
    font-size: clamp(0.56rem, 2.32vw, 0.68rem) !important;
  }
}

@media (max-height: 470px) {
  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-scroll {
    gap: 4px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure img {
    height: clamp(62px, 18dvh, 86px) !important;
    max-height: clamp(62px, 18dvh, 86px) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure figcaption {
    display: block !important;
    max-height: 1.2em !important;
    padding: 2px 5px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-answer {
    min-height: clamp(21px, 5dvh, 25px) !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-status {
    min-height: 0 !important;
  }
}

/* 2026-05-12 correction: compact player panel auth controls. */
html body .title-account-panel {
  top: 37.2% !important;
  padding-top: clamp(9px, 1.65dvh, 19px) !important;
}

html body .title-account-heading {
  font-size: clamp(0.68rem, 1.32dvh, 0.94rem) !important;
}

html body .title-account-current {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(3px, 0.48vw, 7px) !important;
  overflow: hidden !important;
}

html body .title-account-current span {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

html body .title-account-current strong {
  min-width: 0 !important;
  max-width: min(14ch, 52%) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #title-auth-toggle.title-auth-icon-button,
html body .title-auth-icon-button {
  flex: 0 0 clamp(20px, 3.3dvh, 30px) !important;
  width: clamp(20px, 3.3dvh, 30px) !important;
  height: clamp(20px, 3.3dvh, 30px) !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(50, 78, 31, 0.34) !important;
  border-radius: 6px !important;
  background: rgba(248, 230, 154, 0.42) center / 72% 72% no-repeat !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(35, 46, 20, 0.16) !important;
  cursor: pointer !important;
}

html body #title-auth-toggle.title-auth-icon-button[data-auth-state="login"],
html body .title-auth-icon-button[data-auth-state="login"] {
  background-image: url("assets/auth-login.svg") !important;
}

html body #title-auth-toggle.title-auth-icon-button[data-auth-state="logout"],
html body .title-auth-icon-button[data-auth-state="logout"] {
  background-image: url("assets/auth-logout.svg") !important;
}

html body #title-auth-toggle.title-auth-icon-button:hover,
html body #title-auth-toggle.title-auth-icon-button:focus-visible,
html body .title-auth-icon-button:hover,
html body .title-auth-icon-button:focus-visible {
  filter: brightness(1.07) !important;
  outline: 2px solid rgba(255, 246, 181, 0.64) !important;
  outline-offset: 1px !important;
}

html body #title-auth-toggle.title-auth-icon-button:disabled,
html body .title-auth-icon-button:disabled {
  cursor: wait !important;
  opacity: 0.58 !important;
}

html body .title-account-actions #title-screen-start {
  min-width: clamp(34px, 5.6vw, 64px) !important;
  height: clamp(20px, 3.15dvh, 29px) !important;
  padding: clamp(1px, 0.3dvh, 3px) clamp(5px, 0.62vw, 8px) !important;
}

html body .title-auth-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: clamp(3px, 0.54dvh, 6px) clamp(4px, 0.62vw, 8px) !important;
  padding: 1px 0 0 !important;
}

html body .title-auth-form label {
  gap: 1px !important;
}

html body .title-auth-actions {
  grid-column: auto !important;
  justify-content: flex-start !important;
}

html body .title-auth-form input {
  height: clamp(20px, 3.05dvh, 28px) !important;
  border-width: 1px !important;
  border-radius: 5px !important;
  padding: 0 clamp(5px, 0.62vw, 8px) !important;
  background: rgba(255, 253, 238, 0.42) !important;
  font-size: clamp(0.56rem, 1.08dvh, 0.76rem) !important;
  font-weight: 620 !important;
}

html body .title-auth-form label span {
  opacity: 0.78 !important;
}

html body #title-login-button {
  min-width: clamp(58px, 8.2vw, 96px) !important;
  height: clamp(20px, 3.05dvh, 28px) !important;
  padding: clamp(1px, 0.26dvh, 3px) clamp(5px, 0.62vw, 8px) !important;
}

html body #title-register-button,
html body #title-signout-button {
  display: none !important;
}

html body .title-auth-form:not([hidden]) ~ .title-profile-panel {
  display: none !important;
}

html body .title-auth-form:not([hidden]) ~ .title-account-message {
  display: block !important;
  font-size: clamp(0.48rem, 0.98dvh, 0.64rem) !important;
  max-height: 2.4em !important;
}

html body .title-auth-form:not([hidden]) ~ .title-leaderboard-panel .title-leaderboard-list {
  max-height: clamp(28px, 6.4dvh, 72px) !important;
}

@media (max-width: 900px), (max-height: 700px) {
  html body .title-account-panel {
    top: 37.5% !important;
    padding-top: 5px !important;
    overflow-y: auto !important;
  }

  html body .title-account-heading {
    font-size: clamp(5.8px, 1.15dvh, 8.2px) !important;
  }

  html body .title-account-current {
    gap: 2px !important;
  }

  html body #title-auth-toggle.title-auth-icon-button,
  html body .title-auth-icon-button {
    flex-basis: clamp(15px, 3dvh, 20px) !important;
    width: clamp(15px, 3dvh, 20px) !important;
    height: clamp(15px, 3dvh, 20px) !important;
    border-radius: 4px !important;
  }

  html body .title-account-actions #title-screen-start {
    min-width: clamp(30px, 9vw, 46px) !important;
    height: clamp(14px, 2.75dvh, 19px) !important;
    padding: 1px 3px !important;
  }

  html body .title-auth-form {
    gap: 2px 3px !important;
  }

  html body .title-auth-form input,
  html body #title-login-button {
    height: clamp(14px, 2.8dvh, 19px) !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: clamp(5.3px, 1.05dvh, 7px) !important;
  }

  html body #title-login-button {
    min-width: clamp(42px, 13vw, 64px) !important;
  }
}

@media (max-width: 520px) {
  html body .title-account-panel {
    top: 37.7% !important;
    padding-top: 4px !important;
  }

  html body .title-account-current strong {
    max-width: min(10ch, 45%) !important;
  }

  html body .title-auth-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
  }
}

/* 2026-05-12 correction: keep title play/auth buttons small at high zoom. */
html body .title-login-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

html body .title-account-current {
  order: 1 !important;
}

html body .title-account-actions {
  order: 2 !important;
}

html body #title-auth-toggle.title-auth-icon-button {
  flex: 0 0 clamp(16px, 2.45dvh, 22px) !important;
  width: clamp(16px, 2.45dvh, 22px) !important;
  height: clamp(16px, 2.45dvh, 22px) !important;
  min-width: clamp(16px, 2.45dvh, 22px) !important;
  max-width: clamp(16px, 2.45dvh, 22px) !important;
  padding: 0 !important;
  background-size: 68% 68% !important;
}

html body .title-account-actions #title-screen-start,
html body button#title-screen-start.title-action {
  min-width: clamp(30px, 4.8vw, 50px) !important;
  height: clamp(16px, 2.45dvh, 22px) !important;
  min-height: 0 !important;
  padding: 0 clamp(4px, 0.45vw, 6px) !important;
  line-height: 1 !important;
}

@media (max-width: 900px), (max-height: 700px) {
  html body #title-auth-toggle.title-auth-icon-button {
    flex-basis: clamp(12px, 2.35dvh, 16px) !important;
    width: clamp(12px, 2.35dvh, 16px) !important;
    height: clamp(12px, 2.35dvh, 16px) !important;
    min-width: clamp(12px, 2.35dvh, 16px) !important;
    max-width: clamp(12px, 2.35dvh, 16px) !important;
    border-radius: 3px !important;
  }

  html body .title-account-actions #title-screen-start,
  html body button#title-screen-start.title-action {
    min-width: clamp(26px, 7.2vw, 38px) !important;
    height: clamp(12px, 2.35dvh, 16px) !important;
    padding: 0 2px !important;
    font-size: clamp(5px, 0.95dvh, 6.8px) !important;
  }
}

@media (max-width: 520px) {
  html body #title-auth-toggle.title-auth-icon-button {
    flex-basis: clamp(12px, 2.6dvh, 15px) !important;
    width: clamp(12px, 2.6dvh, 15px) !important;
    height: clamp(12px, 2.6dvh, 15px) !important;
    min-width: clamp(12px, 2.6dvh, 15px) !important;
    max-width: clamp(12px, 2.6dvh, 15px) !important;
  }

  html body .title-account-actions #title-screen-start,
  html body button#title-screen-start.title-action {
    min-width: clamp(24px, 8vw, 34px) !important;
    height: clamp(12px, 2.6dvh, 15px) !important;
  }
}

/* 2026-05-12 correction: inline topbar login/logout link. */
html body .topbar .user-status {
  gap: clamp(0px, 0.18dvh, 2px) !important;
}

html body .topbar .user-status p {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 0.34em !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .topbar .user-status #current-user-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .topbar .user-account-link {
  display: inline !important;
  flex: 0 0 auto !important;
  margin: 0 0 0 0.12em !important;
  padding: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #214018 !important;
  font: inherit !important;
  font-size: 0.94em !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

html body .topbar .user-account-link:hover,
html body .topbar .user-account-link:focus-visible {
  color: #315c83 !important;
  outline: none !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .topbar .user-status p {
    gap: 0.28em !important;
  }
}

@media (max-width: 900px), (max-height: 520px), (hover: none) and (pointer: coarse) {
  html body .topbar .user-status p {
    gap: 0.24em !important;
  }

  html body .topbar .user-account-link {
    font-size: 0.92em !important;
  }
}

/* 2026-05-12 correction: version link is a quiet topbar corner link. */
html body .topbar .user-version-link {
  position: absolute !important;
  right: clamp(7px, 0.9vw, 14px) !important;
  bottom: clamp(3px, 0.5dvh, 7px) !important;
  z-index: 132 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  max-width: min(34vw, 190px) !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(33, 64, 24, 0.86) !important;
  font: inherit !important;
  font-size: clamp(0.5rem, 0.5vw, 0.68rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: right !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

html body .topbar .user-version-link:visited,
html body .topbar .user-version-link:hover,
html body .topbar .user-version-link:focus,
html body .topbar .user-version-link:focus-visible {
  color: rgba(33, 64, 24, 0.96) !important;
  background: transparent !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
}

html body .topbar .user-version-link:focus-visible {
  outline: 1px solid rgba(33, 64, 24, 0.48) !important;
  outline-offset: 2px !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .topbar .user-version-link {
    right: 6px !important;
    bottom: 2px !important;
    max-width: 30vw !important;
    font-size: clamp(0.42rem, 0.95vw, 0.54rem) !important;
  }
}

@media (max-width: 900px), (max-height: 520px), (hover: none) and (pointer: coarse) {
  html body .topbar .user-version-link {
    max-width: 28vw !important;
    font-size: clamp(0.38rem, 1.05vw, 0.48rem) !important;
  }
}

/* 2026-05-12 correction: camera unlock intro must sit above every camera layer. */
html body.camera-view-active .camera-unlock-intro-popup,
html body .camera-unlock-intro-popup {
  position: fixed !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147483647 !important;
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body.camera-view-active .camera-unlock-intro-popup *,
html body .camera-unlock-intro-popup button,
html body .camera-unlock-intro-action,
html body .camera-unlock-intro-close {
  visibility: visible !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

html body.camera-view-active .camera-unlock-intro-action {
  position: relative !important;
  z-index: 1 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body.camera-view-active .camera-unlock-intro-close {
  z-index: 1 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 2026-05-12 correction: completed mountain memo board uses compact species markers on phone zoom. */
html body[data-stage="mountains"] .memo-summary-species {
  --memo-summary-size: clamp(42px, min(5.3vw, 7.2vh), 76px);
  min-width: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html body[data-stage="mountains"] .memo-summary-species span {
  width: var(--memo-summary-size) !important;
  height: var(--memo-summary-size) !important;
  background-size: 84% auto !important;
  box-shadow:
    inset 0 0 0 clamp(2px, 0.45vw, 4px) #fff,
    inset 0 0 0 clamp(5px, 0.85vw, 8px) var(--ring, #78a93b),
    0 5px 10px rgba(19, 30, 12, 0.2) !important;
}

html body[data-stage="mountains"] .memo-summary-species b {
  max-width: calc(var(--memo-summary-size) * 1.35) !important;
  margin-top: clamp(2px, 0.45vh, 5px) !important;
  padding: clamp(2px, 0.42vh, 4px) clamp(4px, 0.7vw, 8px) !important;
  font-size: clamp(0.46rem, min(0.72vw, 1.05vh), 0.68rem) !important;
  line-height: 1.05 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 900px), (max-height: 520px) {
  html body[data-stage="mountains"] .memo-summary-species {
    --memo-summary-size: clamp(30px, min(5vw, 6vh), 44px);
  }

  html body[data-stage="mountains"] .memo-summary-species b {
    max-width: calc(var(--memo-summary-size) * 1.55) !important;
    padding: 2px 4px !important;
    font-size: clamp(0.34rem, min(1vw, 1.25vh), 0.46rem) !important;
  }
}

/* 2026-05-12 correction: ranking rows show completion and earned badges next to the nickname. */
html body .title-leaderboard-row {
  align-items: center !important;
}

html body .title-leaderboard-player {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(2px, 0.32vw, 5px) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

html body .title-leaderboard-player .title-leaderboard-name {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

html body .title-leaderboard-badges {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding-left: clamp(4px, 0.6dvh, 7px) !important;
  white-space: nowrap !important;
}

html body .title-leaderboard-badge {
  width: clamp(13px, 2.15dvh, 18px) !important;
  height: clamp(13px, 2.15dvh, 18px) !important;
  min-width: clamp(13px, 2.15dvh, 18px) !important;
  margin-left: clamp(-8px, -0.9dvh, -5px) !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(112, 83, 25, 0.34) !important;
  background-color: rgba(255, 252, 232, 0.94) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 78% !important;
  color: transparent !important;
  box-shadow: 0 1px 3px rgba(44, 35, 14, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.62) !important;
  font-size: 0 !important;
}

html body .title-leaderboard-badge:first-child {
  margin-left: 0 !important;
}

html body .title-leaderboard-badge-complete {
  border-color: rgba(42, 104, 36, 0.48) !important;
  background: linear-gradient(180deg, #8bd35f, #348829) !important;
  color: #f8ffe9 !important;
  font: 900 clamp(8px, 1.35dvh, 12px)/1 "Segoe UI", Arial, sans-serif !important;
}

html body .title-leaderboard-badge-complete::before {
  content: "✓";
}

html body .title-leaderboard-badge[data-badge="observer"] {
  background-image: url("assets/badge-observer.png") !important;
}

html body .title-leaderboard-badge[data-badge="animalist"] {
  background-image: url("assets/badge-animalist.svg") !important;
}

html body .title-leaderboard-badge[data-badge="botanist"] {
  background-image: url("assets/badge-botanist.png") !important;
}

html body .title-leaderboard-badge[data-badge="plantExpert"] {
  background-image: url("assets/badge-plant-expert.svg") !important;
}

html body .title-leaderboard-badge[data-badge="mountain"] {
  background-image: url("assets/badge-mountain.png") !important;
}

html body .title-leaderboard-badge[data-badge="forest"] {
  background-image: url("assets/badge-forest.png") !important;
}

html body .title-leaderboard-badge[data-badge="curious"] {
  background-image: url("assets/badge-curious.svg") !important;
}

html body .title-leaderboard-badge[data-badge="photographer"] {
  background-image: url("assets/badge-photographer.svg") !important;
}

html body .title-leaderboard-badge[data-badge="master"] {
  background-image: url("assets/badge-master.png") !important;
}

html body .title-leaderboard-badge[data-badge="cupWinners"] {
  background-image: url("assets/badge-cup-winners.svg") !important;
}

html body .title-leaderboard-score-group {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(3px, 0.5vw, 6px) !important;
  white-space: nowrap !important;
}

html body .title-leaderboard-completion {
  position: relative !important;
  flex: 0 0 auto !important;
  appearance: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #6f603e !important;
  cursor: help !important;
  font: 850 clamp(0.45rem, 0.92dvh, 0.64rem)/1 "Segoe UI", Arial, sans-serif !important;
}

html body .title-leaderboard-completion::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  right: 0 !important;
  bottom: calc(100% + 4px) !important;
  z-index: 40 !important;
  width: max-content !important;
  max-width: min(180px, 42vw) !important;
  padding: 4px 6px !important;
  border-radius: 7px !important;
  background: rgba(42, 56, 25, 0.94) !important;
  color: #fff9dc !important;
  box-shadow: 0 5px 14px rgba(32, 38, 19, 0.2) !important;
  font: 760 clamp(0.46rem, 0.92dvh, 0.62rem)/1.1 "Segoe UI", Arial, sans-serif !important;
  white-space: normal !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(2px) !important;
  transition: opacity 120ms ease, transform 120ms ease !important;
}

html body .title-leaderboard-completion:hover::after,
html body .title-leaderboard-completion:focus-visible::after,
html body .title-leaderboard-completion:active::after {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@media (max-width: 900px), (max-height: 700px) {
  html body .title-leaderboard-player {
    gap: 2px !important;
  }

  html body .title-leaderboard-badges {
    padding-left: 4px !important;
  }

  html body .title-leaderboard-badge {
    width: clamp(10px, 1.6dvh, 13px) !important;
    height: clamp(10px, 1.6dvh, 13px) !important;
    min-width: clamp(10px, 1.6dvh, 13px) !important;
    margin-left: -5px !important;
  }

  html body .title-leaderboard-badge-complete {
    font-size: clamp(6px, 1dvh, 9px) !important;
  }

  html body .title-leaderboard-score-group {
    gap: 3px !important;
  }

  html body .title-leaderboard-completion {
    font-size: clamp(0.42rem, 0.8dvh, 0.56rem) !important;
  }
}

/* 2026-05-12 correction: title player panel form is a compact one-line login row. */
html body .title-account-panel {
  padding-top: clamp(13px, 2.05dvh, 24px) !important;
  padding-bottom: clamp(11px, 1.85dvh, 22px) !important;
  gap: clamp(4px, 0.78dvh, 9px) !important;
}

html body .title-account-heading {
  font-size: clamp(0.82rem, 1.66dvh, 1.18rem) !important;
  font-weight: 850 !important;
}

html body .title-login-row {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
}

html body .title-account-current {
  justify-content: center !important;
  text-align: center !important;
}

html body .title-account-message {
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
  max-width: min(100%, 360px) !important;
  max-height: none !important;
  color: #5d5137 !important;
  background: transparent !important;
  font: 680 clamp(0.42rem, 0.78dvh, 0.56rem)/1.12 "Segoe UI", Arial, sans-serif !important;
  text-align: center !important;
}

html body .title-auth-form {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: auto auto auto !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(3px, 0.48dvh, 6px) clamp(5px, 0.74vw, 10px) !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .title-auth-form[hidden] {
  display: none !important;
}

html body .title-auth-form label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: clamp(2px, 0.32vw, 5px) !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body .title-auth-form label span {
  flex: 0 0 auto !important;
  color: #50472f !important;
  opacity: 0.92 !important;
  font: 780 clamp(0.45rem, 0.88dvh, 0.62rem)/1 "Segoe UI", Arial, sans-serif !important;
  white-space: nowrap !important;
}

html body .title-auth-form input {
  height: clamp(15px, 2.18dvh, 22px) !important;
  min-height: 0 !important;
  border: 1px solid rgba(75, 91, 41, 0.44) !important;
  border-radius: 4px !important;
  padding: 0 clamp(3px, 0.36vw, 6px) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #26331f !important;
  font: 650 clamp(0.48rem, 0.92dvh, 0.66rem)/1 "Segoe UI", Arial, sans-serif !important;
}

html body #title-auth-email {
  width: clamp(68px, 8.8vw, 112px) !important;
}

html body #title-auth-password {
  width: clamp(50px, 6.8vw, 86px) !important;
}

html body #title-login-button {
  min-width: clamp(54px, 7.2vw, 92px) !important;
  height: clamp(15px, 2.18dvh, 22px) !important;
  min-height: 0 !important;
  padding: 0 clamp(5px, 0.62vw, 9px) !important;
  line-height: 1 !important;
  font-size: clamp(0.48rem, 0.92dvh, 0.66rem) !important;
}

html body .title-play-row {
  width: 100% !important;
  margin-top: auto !important;
  justify-content: center !important;
  order: 20 !important;
}

html body .title-play-row #title-screen-start,
html body .title-play-row button#title-screen-start.title-action {
  width: clamp(112px, 20vw, 210px) !important;
  min-width: clamp(112px, 20vw, 210px) !important;
  max-width: 78% !important;
  height: clamp(24px, 3.65dvh, 36px) !important;
  min-height: 0 !important;
  padding: 0 clamp(16px, 2.2vw, 30px) !important;
  border-radius: 8px !important;
  font-size: clamp(0.66rem, 1.28dvh, 0.92rem) !important;
}

html body .title-auth-form:not([hidden]) ~ .title-profile-panel {
  display: none !important;
}

html body .title-auth-form:not([hidden]) ~ .title-leaderboard-panel .title-leaderboard-list {
  max-height: clamp(26px, 6.2dvh, 70px) !important;
}

@media (max-width: 900px), (max-height: 700px) {
  html body .title-account-panel {
    padding-top: 7px !important;
    padding-bottom: 6px !important;
    gap: 3px !important;
  }

  html body .title-account-heading {
    font-size: clamp(7px, 1.42dvh, 10px) !important;
  }

  html body .title-account-message {
    font-size: clamp(4.5px, 0.82dvh, 5.8px) !important;
    line-height: 1.08 !important;
  }

  html body .title-auth-form {
    grid-template-columns: auto auto auto !important;
    gap: 2px 3px !important;
  }

  html body .title-auth-form label {
    gap: 2px !important;
  }

  html body .title-auth-form label span {
    font-size: clamp(4.8px, 0.88dvh, 6.2px) !important;
  }

  html body .title-auth-form input {
    height: clamp(12px, 2.25dvh, 16px) !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: clamp(4.8px, 0.9dvh, 6.3px) !important;
  }

  html body #title-auth-email {
    width: clamp(48px, 12vw, 70px) !important;
  }

  html body #title-auth-password {
    width: clamp(38px, 9vw, 55px) !important;
  }

  html body #title-login-button {
    min-width: clamp(36px, 10vw, 54px) !important;
    height: clamp(12px, 2.25dvh, 16px) !important;
    padding: 0 3px !important;
    font-size: clamp(4.8px, 0.9dvh, 6.3px) !important;
  }

  html body .title-play-row #title-screen-start,
  html body .title-play-row button#title-screen-start.title-action {
    width: clamp(76px, 26vw, 128px) !important;
    min-width: clamp(76px, 26vw, 128px) !important;
    height: clamp(16px, 3.1dvh, 22px) !important;
    padding: 0 8px !important;
    font-size: clamp(5.8px, 1.12dvh, 8px) !important;
  }
}

@media (max-width: 520px) {
  html body .title-account-panel {
    padding-top: 6px !important;
    padding-bottom: 5px !important;
  }

  html body .title-auth-form {
    grid-template-columns: auto auto auto !important;
  }

  html body .title-account-message {
    max-width: 96% !important;
  }
}

/* 2026-05-12 correction: strengthen pale meadow plants and show completed meadow discoveries as large cutouts. */
html body[data-stage="meadow"] .trace-item.plant-item.arnika,
html body[data-stage="meadow"] .trace-item.plant-item.jezyczka {
  filter:
    drop-shadow(0 5px 5px rgba(19, 32, 12, 0.42))
    saturate(1.22)
    contrast(1.08)
    brightness(1.04) !important;
}

html body[data-stage="meadow"] .plant-guide-item[data-plant-guide="arnika"]:not(.is-undiscovered) .plant-thumb,
html body[data-stage="meadow"] .plant-guide-item[data-plant-guide="jezyczka"]:not(.is-undiscovered) .plant-thumb,
html body[data-stage="meadow"] .summary-plant[data-plant="arnika"] .summary-badge,
html body[data-stage="meadow"] .summary-plant[data-plant="jezyczka"] .summary-badge,
html body .info-dialog.plant-info-dialog .animal-photo.plant-photo[data-entry-id="arnika"] .animal-photo-img,
html body .info-dialog.plant-info-dialog .animal-photo.plant-photo[data-entry-id="jezyczka"] .animal-photo-img {
  filter:
    drop-shadow(0 4px 5px rgba(19, 32, 12, 0.24))
    saturate(1.18)
    contrast(1.07)
    brightness(1.03) !important;
}

html body[data-stage="meadow"] .plant-summary.completed .summary-plant {
  gap: clamp(4px, 0.7dvh, 8px) !important;
  filter: drop-shadow(0 8px 7px rgba(22, 34, 13, 0.38)) !important;
}

html body[data-stage="meadow"] .plant-summary.completed .summary-badge {
  width: clamp(92px, 10.5vw, 168px) !important;
  height: clamp(126px, 16.5dvh, 244px) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: var(--plant-img) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
}

html body[data-stage="meadow"] .plant-summary.completed .summary-label {
  margin-top: 0 !important;
  padding: clamp(3px, 0.5dvh, 5px) clamp(7px, 1vw, 11px) !important;
  background: rgba(45, 63, 27, 0.82) !important;
  color: #fff9e8 !important;
  font-size: clamp(0.52rem, 0.28vw + 0.48rem, 0.74rem) !important;
  box-shadow: 0 4px 9px rgba(18, 30, 11, 0.18) !important;
}

html body .fact-dialog.fern-flower-dialog .fern-flower-popup-hero {
  display: grid !important;
  place-items: center !important;
  gap: clamp(5px, 0.8dvh, 9px) !important;
  margin: 0 auto clamp(8px, 1.2dvh, 14px) !important;
}

html body .fact-dialog.fern-flower-dialog .fern-flower-popup-hero img {
  width: clamp(82px, 12dvh, 132px) !important;
  height: auto !important;
  filter: drop-shadow(0 8px 10px rgba(36, 46, 16, 0.22)) !important;
}

html body .fact-dialog.fern-flower-dialog .fern-flower-popup-hero figcaption {
  display: inline-grid !important;
  place-items: center !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: rgba(67, 102, 39, 0.12) !important;
  color: #31541f !important;
  font-weight: 900 !important;
  font-size: clamp(0.76rem, 0.5vw + 0.62rem, 0.95rem) !important;
  line-height: 1.1 !important;
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body[data-stage="meadow"] .plant-summary.completed .summary-badge {
    width: clamp(58px, 14.2dvh, 82px) !important;
    height: clamp(80px, 21dvh, 116px) !important;
  }

  html body[data-stage="meadow"] .plant-summary.completed .summary-label {
    padding: 2px 6px !important;
    font-size: clamp(0.42rem, 1.35dvh, 0.56rem) !important;
    line-height: 1.04 !important;
  }
}

/* 2026-05-12 correction: fit the title player panel to the larger newstart parchment field. */
html body .title-bottom-cover {
  display: none !important;
}

html body .title-account-panel {
  left: 28.4% !important;
  top: 25.8% !important;
  width: 45.6% !important;
  max-width: 45.6% !important;
  height: 49.2% !important;
  max-height: 49.2% !important;
  padding: clamp(10px, 1.6dvh, 19px) clamp(13px, 1.55vw, 22px) clamp(8px, 1.25dvh, 16px) !important;
  gap: clamp(4px, 0.62dvh, 8px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body .title-account-current {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .title-account-heading {
  color: #2d261a !important;
  font-size: clamp(0.82rem, 1.58dvh, 1.14rem) !important;
}

html body .title-account-message {
  display: block !important;
  color: #574327 !important;
  font-size: clamp(0.56rem, 1.12dvh, 0.74rem) !important;
  max-height: 2.5em !important;
}

html body .title-leaderboard-list {
  min-height: clamp(92px, 17.5dvh, 166px) !important;
  max-height: clamp(112px, 24dvh, 214px) !important;
}

html body .title-stage-stamp {
  width: 10.6% !important;
}

html body .title-stage-stamp[data-title-stamp="dam"] {
  left: 26.7% !important;
  top: 88.8% !important;
}

html body .title-stage-stamp[data-title-stamp="meadow"] {
  left: 42.2% !important;
  top: 88.8% !important;
}

html body .title-stage-stamp[data-title-stamp="mountains"] {
  left: 57.9% !important;
  top: 88.8% !important;
}

html body .title-stage-stamp[data-title-stamp="forest"] {
  left: 73.4% !important;
  top: 88.8% !important;
}

@media (max-width: 900px), (max-height: 700px) {
  html body .title-account-panel {
    left: 28.2% !important;
    top: 26.2% !important;
    width: 45.8% !important;
    max-width: 45.8% !important;
    height: 48.6% !important;
    max-height: 48.6% !important;
    padding: 5px 7px 4px !important;
    gap: 2px !important;
  }

  html body .title-account-heading {
    font-size: clamp(6.5px, 1.25dvh, 9px) !important;
  }

  html body .title-account-message {
    display: block !important;
    font-size: clamp(5px, 0.92dvh, 6.5px) !important;
    line-height: 1.06 !important;
    max-height: 2.2em !important;
  }

  html body .title-leaderboard-list {
    min-height: clamp(48px, 15dvh, 76px) !important;
    max-height: clamp(54px, 18dvh, 92px) !important;
  }

  html body .title-stage-stamp {
    width: 9.2% !important;
  }
}

@media (max-width: 520px) {
  html body .title-account-panel {
    left: 28.1% !important;
    top: 26.5% !important;
    width: 46.2% !important;
    max-width: 46.2% !important;
    height: 48.2% !important;
    max-height: 48.2% !important;
    padding: 4px 5px 3px !important;
  }

  html body .title-leaderboard-list {
    min-height: 48px !important;
    max-height: 64px !important;
  }
}

/* 2026-05-12 correction: camera quiz is narrow on full-size desktop screens too. */
@media (min-width: 981px) and (min-height: 761px) {
  html body .camera-photo-dialog:not(.is-captured) {
    width: min(460px, calc(100vw - 40px)) !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 14px !important;
    border-radius: 13px !important;
    font-size: 0.86rem !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-scroll {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    max-height: calc(100dvh - 58px) !important;
    overflow: hidden !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding-right: 34px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header span {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.25rem !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-label {
    margin-bottom: 1px !important;
    font-size: 0.62rem !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header h2 {
    font-size: 1.08rem !important;
    line-height: 1.04 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure {
    border-radius: 10px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure img {
    aspect-ratio: 16 / 9 !important;
    max-height: 190px !important;
    object-fit: cover !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure figcaption {
    padding: 5px 7px !important;
    font-size: 0.62rem !important;
    line-height: 1.15 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz {
    gap: 7px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz-topline {
    gap: 8px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz-topline p {
    font-size: 0.78rem !important;
    line-height: 1.16 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-quiz-topline strong {
    min-width: 52px !important;
    padding: 4px 7px !important;
    font-size: 0.72rem !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-answers {
    gap: 5px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-answer {
    min-height: 32px !important;
    padding: 6px 8px !important;
    border-radius: 7px !important;
    font-size: 0.76rem !important;
    line-height: 1.12 !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-status {
    min-height: 1em !important;
    font-size: 0.68rem !important;
    line-height: 1.08 !important;
  }
}

/* 2026-05-12 correction: camera quiz stays narrow on real phone viewports. */
@media (max-width: 520px), (hover: none) and (pointer: coarse) and (max-width: 720px) {
  html body .camera-photo-dialog:not(.is-captured) {
    width: min(304px, calc(100vw - 68px)) !important;
    max-width: min(304px, calc(100vw - 68px)) !important;
    padding: 7px !important;
    border-radius: 12px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-scroll {
    gap: 5px !important;
    max-height: calc(100dvh - 22px) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header {
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding-right: 28px !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header span {
    width: 25px !important;
    height: 25px !important;
    font-size: 0.82rem !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-header h2 {
    font-size: clamp(0.72rem, 3.05vw, 0.92rem) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure img {
    height: clamp(86px, 18dvh, 126px) !important;
    max-height: clamp(86px, 18dvh, 126px) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure figcaption {
    max-height: 2.15em !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-answer {
    min-height: clamp(22px, 3.7dvh, 28px) !important;
    padding: 4px 6px !important;
  }
}

@media (max-width: 520px) and (max-height: 470px) {
  html body .camera-photo-dialog:not(.is-captured) {
    width: min(300px, calc(100vw - 76px)) !important;
    max-width: min(300px, calc(100vw - 76px)) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure img {
    height: clamp(56px, 17dvh, 78px) !important;
    max-height: clamp(56px, 17dvh, 78px) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure figcaption {
    max-height: 1.25em !important;
  }
}

/* 2026-05-12 correction: title auth row uses raw underline fields and a text-only register action. */
html body .title-auth-form {
  align-items: end !important;
}

html body .title-auth-form label {
  align-items: end !important;
}

html body .title-auth-form input {
  border: 0 !important;
  border-bottom: 2px solid rgba(52, 47, 31, 0.76) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding-left: 1px !important;
  padding-right: 1px !important;
}

html body .title-auth-form input:focus,
html body .title-auth-form input:focus-visible {
  border-bottom-color: #26331f !important;
  box-shadow: 0 1px 0 rgba(38, 51, 31, 0.36) !important;
}

html body #title-login-button.title-action,
html body #title-login-button.title-action-primary {
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #24311e !important;
  font-size: clamp(0.54rem, 1.02dvh, 0.72rem) !important;
  line-height: 1 !important;
  font-weight: 980 !important;
  text-transform: none !important;
  text-decoration: none !important;
}

html body #title-login-button.title-action:hover,
html body #title-login-button.title-action:focus-visible {
  filter: none !important;
  outline: 0 !important;
  color: #1f5a20 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

html body .title-auth-form:not([hidden]) + .title-account-message {
  display: block !important;
  margin-top: clamp(1px, 0.32dvh, 4px) !important;
  max-width: min(100%, 390px) !important;
  max-height: 2.3em !important;
  font-size: clamp(0.42rem, 0.78dvh, 0.56rem) !important;
  line-height: 1.1 !important;
}

@media (max-width: 900px), (max-height: 700px) {
  html body .title-auth-form input {
    border-bottom-width: 1px !important;
  }

  html body #title-login-button.title-action,
  html body #title-login-button.title-action-primary {
    font-size: clamp(5.8px, 1.08dvh, 7.4px) !important;
  }
}

/* 2026-05-12 correction: expanded-board facts follow the top board controls. */
:root {
  --expanded-fact-control-gap: clamp(7px, 0.95vw, 14px);
  --expanded-fact-right-reserve: clamp(112px, 15vw, 190px);
}

html body.board-expanded:not(.camera-view-active) .play-area > .fact-strip:not(.fact-hidden):not([hidden]),
html.board-expanded-root body.board-expanded:not(.camera-view-active) .play-area > .fact-strip:not(.fact-hidden):not([hidden]) {
  position: absolute !important;
  left: calc(var(--floating-board-control-edge, clamp(8px, 1.1vw, 16px)) + var(--board-fullscreen-button-size, 42px) + var(--expanded-fact-control-gap)) !important;
  right: calc(var(--floating-board-control-edge, clamp(8px, 1.1vw, 16px)) + var(--expanded-fact-right-reserve)) !important;
  top: clamp(8px, 1.1dvh, 14px) !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  max-height: clamp(46px, 12dvh, 74px) !important;
  transform: none !important;
  z-index: 1004 !important;
}

html body.board-expanded:not(.camera-view-active) .play-area > .fact-strip.fact-bottom:not(.fact-hidden):not([hidden]),
html.board-expanded-root body.board-expanded:not(.camera-view-active) .play-area > .fact-strip.fact-bottom:not(.fact-hidden):not([hidden]) {
  top: clamp(8px, 1.1dvh, 14px) !important;
  bottom: auto !important;
}

html body.board-expanded.board-controls-floating:not(.camera-view-active) .play-area > .fact-strip:not(.fact-hidden):not([hidden]),
html.board-expanded-root body.board-expanded.board-controls-floating:not(.camera-view-active) .play-area > .fact-strip:not(.fact-hidden):not([hidden]) {
  position: fixed !important;
  top: var(--floating-board-control-top) !important;
  left: calc(var(--floating-board-control-edge, clamp(8px, 1.1vw, 16px)) + var(--board-fullscreen-button-size, 42px) + var(--expanded-fact-control-gap)) !important;
  right: calc(var(--floating-board-control-edge, clamp(8px, 1.1vw, 16px)) + var(--expanded-fact-right-reserve)) !important;
  bottom: auto !important;
  z-index: 1017 !important;
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --expanded-fact-control-gap: 6px;
    --expanded-fact-right-reserve: clamp(88px, 24vw, 124px);
  }

  html body.board-expanded:not(.camera-view-active) .play-area > .fact-strip:not(.fact-hidden):not([hidden]),
  html.board-expanded-root body.board-expanded:not(.camera-view-active) .play-area > .fact-strip:not(.fact-hidden):not([hidden]) {
    max-height: clamp(40px, 13dvh, 58px) !important;
  }
}

/* 2026-05-12 correction: title screen is centered and readable on QHD/4K displays. */
@media (min-width: 1800px) and (min-height: 1000px) {
  html body .title-screen-dialog[open] {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body .title-screen-frame {
    width: min(calc(100vw - 120px), calc((100dvh - 64px) * 1.499), 1840px) !important;
    height: auto !important;
    aspect-ratio: 1535 / 1024 !important;
    margin: auto !important;
  }

  html body .title-account-panel {
    padding: clamp(18px, 1.55dvh, 24px) clamp(22px, 1.35vw, 30px) clamp(14px, 1.2dvh, 22px) !important;
    gap: clamp(7px, 0.62dvh, 10px) !important;
  }

  html body .title-account-heading {
    font-size: clamp(1.28rem, 0.92vw, 1.62rem) !important;
    line-height: 1.04 !important;
  }

  html body .title-account-current span,
  html body .title-profile-stats dt,
  html body .title-nickname-field span,
  html body .title-auth-form label span {
    font-size: clamp(0.72rem, 0.54vw, 0.92rem) !important;
  }

  html body .title-account-current strong {
    font-size: clamp(1rem, 0.72vw, 1.22rem) !important;
  }

  html body .title-account-message {
    font-size: clamp(0.76rem, 0.52vw, 0.92rem) !important;
    line-height: 1.14 !important;
  }

  html body .title-leaderboard-heading span {
    font-size: clamp(0.9rem, 0.58vw, 1.05rem) !important;
  }

  html body .title-leaderboard-heading small {
    font-size: clamp(0.76rem, 0.48vw, 0.88rem) !important;
  }

  html body .title-leaderboard-row {
    font-size: clamp(0.78rem, 0.56vw, 1rem) !important;
    line-height: 1.16 !important;
  }

  html body .title-leaderboard-list {
    min-height: clamp(190px, 19dvh, 252px) !important;
    max-height: clamp(224px, 25dvh, 320px) !important;
    gap: clamp(2px, 0.22dvh, 4px) !important;
  }

  html body #title-auth-toggle.title-auth-icon-button,
  html body .title-auth-icon-button {
    flex-basis: clamp(28px, 1.32vw, 34px) !important;
    width: clamp(28px, 1.32vw, 34px) !important;
    height: clamp(28px, 1.32vw, 34px) !important;
    min-width: clamp(28px, 1.32vw, 34px) !important;
    max-width: clamp(28px, 1.32vw, 34px) !important;
    border-radius: 7px !important;
  }

  html body .title-auth-form input {
    height: clamp(26px, 2.1dvh, 32px) !important;
    font-size: clamp(0.76rem, 0.5vw, 0.9rem) !important;
  }

  html body #title-auth-email {
    width: clamp(132px, 7.2vw, 172px) !important;
  }

  html body #title-auth-password {
    width: clamp(104px, 5.7vw, 138px) !important;
  }

  html body #title-login-button.title-action,
  html body #title-login-button.title-action-primary {
    font-size: clamp(0.76rem, 0.5vw, 0.9rem) !important;
  }

  html body .title-play-row #title-screen-start,
  html body .title-play-row button#title-screen-start.title-action {
    width: clamp(180px, 10.5vw, 250px) !important;
    min-width: clamp(180px, 10.5vw, 250px) !important;
    height: clamp(38px, 3.2dvh, 46px) !important;
    font-size: clamp(0.98rem, 0.68vw, 1.16rem) !important;
  }
}

/* 2026-05-12 correction: leaderboard shows photo polaroids beside unchanged badge icons. */
html body .title-leaderboard-photos {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-left: clamp(2px, 0.35dvh, 5px) !important;
  padding-left: clamp(3px, 0.42dvh, 5px) !important;
  white-space: nowrap !important;
}

html body .title-leaderboard-photo {
  --leaderboard-photo-image: none;
  position: relative !important;
  width: clamp(12px, 1.8dvh, 16px) !important;
  height: clamp(15px, 2.25dvh, 20px) !important;
  min-width: clamp(12px, 1.8dvh, 16px) !important;
  margin-left: clamp(-6px, -0.72dvh, -4px) !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #fffdf4 0 72%, #f0dcaa 72% 100%) !important;
  box-shadow:
    0 1px 3px rgba(45, 34, 13, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.82) !important;
  transform: rotate(-7deg) !important;
  overflow: hidden !important;
}

html body .title-leaderboard-photo:first-child {
  margin-left: 0 !important;
}

html body .title-leaderboard-photo:nth-child(even) {
  transform: rotate(6deg) !important;
}

html body .title-leaderboard-photo::before {
  content: "" !important;
  position: absolute !important;
  left: 16% !important;
  right: 16% !important;
  top: 12% !important;
  bottom: 33% !important;
  border-radius: 1px !important;
  background-color: rgba(232, 220, 176, 0.9) !important;
  background-image: var(--leaderboard-photo-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: inset 0 0 0 1px rgba(82, 65, 28, 0.14) !important;
}

html body .title-leaderboard-photo::after {
  content: "" !important;
  position: absolute !important;
  left: 24% !important;
  right: 24% !important;
  bottom: 15% !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: rgba(109, 83, 32, 0.24) !important;
}

html body .title-leaderboard-photo[data-photo="photo-wilk-fotopulapka"] {
  --leaderboard-photo-image: url("assets/camera-photos/wilk.jpg");
}

html body .title-leaderboard-photo[data-photo="photo-bobr-zgryzy"] {
  --leaderboard-photo-image: url("assets/camera-photos/bobr.jpg");
}

html body .title-leaderboard-photo[data-photo="photo-rosiczka-torfowiec"] {
  --leaderboard-photo-image: url("assets/camera-photos/rosiczka.jpg");
}

html body .title-leaderboard-photo[data-photo="photo-obuwik-grzyby"] {
  --leaderboard-photo-image: url("assets/camera-photos/obuwik.jpg");
}

html body .title-leaderboard-photo[data-photo="photo-rys-fotopulapka"] {
  --leaderboard-photo-image: url("assets/camera-photos/rys.jpg");
}

html body .title-leaderboard-photo[data-photo="photo-cietrzew-tokowisko"] {
  --leaderboard-photo-image: url("assets/camera-photos/cietrzew.jpg");
}

html body .title-leaderboard-photo[data-photo="photo-orlik-loty"] {
  --leaderboard-photo-image: url("assets/facts/fact-eagle.webp");
}

html body .title-leaderboard-photo[data-photo="photo-nietoperz-zimowisko"] {
  --leaderboard-photo-image: url("assets/facts/fact-hibernaculum.webp");
}

html body .title-leaderboard-photo[data-photo="photo-zaba-skrzek"] {
  --leaderboard-photo-image: url("assets/facts/fact-spawn.webp");
}

html body .title-leaderboard-photo[data-photo="photo-zolw-wygrzewanie"] {
  --leaderboard-photo-image: url("assets/facts/fact-turtle.webp");
}

html body .title-leaderboard-photo[data-photo="photo-kumak-oczko"] {
  --leaderboard-photo-image: url("assets/facts/fact-pond.webp");
}

html body .title-leaderboard-photo[data-photo="photo-arnika-murawa"] {
  --leaderboard-photo-image: url("assets/facts/fact-arnika.webp");
}

html body .title-leaderboard-photo[data-photo="photo-jezyczka-wilgotnosc"] {
  --leaderboard-photo-image: url("assets/facts/fact-jezyczka.webp");
}

html body .title-leaderboard-photo[data-photo="photo-kozica-dystans"] {
  --leaderboard-photo-image: url("assets/facts/fact-kozica.webp");
}

html body .title-leaderboard-photo[data-photo="photo-swistak-nory"] {
  --leaderboard-photo-image: url("assets/facts/fact-swistak.webp");
}

html body .title-leaderboard-photo[data-photo="photo-natura2000-obszar"] {
  --leaderboard-photo-image: url("assets/facts/fact-natura2000.webp");
}

@media (max-width: 900px), (max-height: 700px) {
  html body .title-leaderboard-photos {
    margin-left: 2px !important;
    padding-left: 2px !important;
  }

  html body .title-leaderboard-photo {
    width: clamp(9px, 1.38dvh, 12px) !important;
    height: clamp(12px, 1.78dvh, 15px) !important;
    min-width: clamp(9px, 1.38dvh, 12px) !important;
    margin-left: -4px !important;
  }
}

/* 2026-05-12 correction: camera quiz width no longer grows visually under browser zoom. */
@media (max-width: 980px), (max-height: 760px) {
  html body .camera-photo-dialog:not(.is-captured) {
    width: min(420px, calc(100vw - 64px), 50dvh) !important;
    max-width: min(420px, calc(100vw - 64px), 50dvh) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(5px, 0.9dvh, 8px) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-dialog-scroll {
    max-height: calc(100dvh - 20px) !important;
    gap: clamp(4px, 0.74dvh, 6px) !important;
  }

  html body .camera-photo-dialog:not(.is-captured) .camera-photo-figure img {
    height: clamp(72px, 20dvh, 128px) !important;
    max-height: clamp(72px, 20dvh, 128px) !important;
  }
}

@media (max-width: 520px), (hover: none) and (pointer: coarse) and (max-width: 720px) {
  html body .camera-photo-dialog:not(.is-captured) {
    width: min(286px, calc(100vw - 78px), 50dvh) !important;
    max-width: min(286px, calc(100vw - 78px), 50dvh) !important;
    padding: 6px !important;
  }
}

/* 2026-05-13 correction: title leaderboard badge art is already circular, so do not shrink it inside a white rim. */
html body .title-leaderboard-badge[data-badge] {
  border: 0 !important;
  background-color: transparent !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* 2026-05-13 correction: separate completion check, cup badge and regular badge stack in title leaderboard. */
html body .title-leaderboard-badges {
  gap: clamp(3px, 0.52dvh, 6px) !important;
  padding-left: clamp(5px, 0.82dvh, 9px) !important;
}

html body .title-leaderboard-badges > .title-leaderboard-badge {
  margin-left: 0 !important;
}

html body .title-leaderboard-badge-stack {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-left: 0 !important;
}

html body .title-leaderboard-badge-stack.has-leading-badge {
  margin-left: clamp(4px, 0.7dvh, 7px) !important;
}

html body .title-leaderboard-badge-stack .title-leaderboard-badge {
  margin-left: clamp(-8px, -0.9dvh, -5px) !important;
}

html body .title-leaderboard-badge-stack .title-leaderboard-badge:first-child {
  margin-left: 0 !important;
}

html body .title-leaderboard-badge-special {
  filter: drop-shadow(0 1px 2px rgba(39, 68, 24, 0.28)) !important;
}

@media (max-width: 900px), (max-height: 700px) {
  html body .title-leaderboard-badges {
    gap: 3px !important;
    padding-left: 5px !important;
  }

  html body .title-leaderboard-badge-stack.has-leading-badge {
    margin-left: 4px !important;
  }

  html body .title-leaderboard-badge-stack .title-leaderboard-badge {
    margin-left: -5px !important;
  }
}

/* 2026-05-13 correction: guest progress transfer choice dialog. */
html body .guest-transfer-dialog {
  width: min(460px, calc(100vw - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
  border: 0 !important;
  border-radius: 22px !important;
  padding: clamp(42px, 5.5vh, 60px) clamp(36px, 4vw, 56px) !important;
  color: #24311e !important;
  background: transparent url("assets/popup_background.png") center / 100% 100% no-repeat !important;
  box-shadow: 0 24px 76px rgba(14, 23, 12, 0.42) !important;
  overflow: hidden !important;
}

html body .guest-transfer-dialog::backdrop {
  background: rgba(20, 35, 16, 0.5) !important;
  backdrop-filter: blur(2px) !important;
}

html body .guest-transfer-dialog[open] {
  display: block !important;
}

html body .guest-transfer-card {
  display: grid !important;
  gap: clamp(8px, 1.2vh, 14px) !important;
  margin: 0 !important;
  text-align: center !important;
}

html body .guest-transfer-label {
  margin: 0 !important;
  color: #5d713d !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html body .guest-transfer-card h3 {
  margin: 0 !important;
  color: #315c23 !important;
  font-size: clamp(1.2rem, 2.2vw, 1.66rem) !important;
  line-height: 1.08 !important;
}

html body .guest-transfer-card p {
  margin: 0 !important;
  color: #425338 !important;
  font-size: clamp(0.84rem, 1.45vw, 0.98rem) !important;
  font-weight: 800 !important;
  line-height: 1.34 !important;
}

html body .guest-transfer-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
}

html body .guest-transfer-actions .speech-action {
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  font-size: 0.9rem !important;
}

html body .guest-transfer-actions .secondary-action {
  background: #557234 !important;
  box-shadow: 0 4px 0 #364a20 !important;
}

@media (max-width: 700px), (max-height: 560px) {
  html body .guest-transfer-dialog {
    width: min(360px, calc(100vw - 18px)) !important;
    padding: 38px 30px !important;
  }

  html body .guest-transfer-card h3 {
    font-size: 1.16rem !important;
  }

  html body .guest-transfer-card p {
    font-size: 0.78rem !important;
  }
}

/* 2026-05-13 correction: fact popup content scales down on large zoom without changing the popup box. */
@media (max-width: 900px), (max-height: 700px), (hover: none) and (pointer: coarse) {
  html body .fact-dialog[open]:not(.completion-dialog):not(.final-game-complete-dialog) .fact-dialog-header {
    grid-template-columns: clamp(34px, 7.2dvh, 42px) minmax(0, 1fr) !important;
    gap: clamp(7px, 1.2dvh, 10px) !important;
    margin-bottom: clamp(4px, 0.8dvh, 7px) !important;
    padding-right: clamp(28px, 5vw, 38px) !important;
  }

  html body .fact-dialog[open]:not(.completion-dialog):not(.final-game-complete-dialog) .fact-dialog-header span {
    width: clamp(32px, 6.8dvh, 40px) !important;
    height: clamp(32px, 6.8dvh, 40px) !important;
    font-size: clamp(1rem, 2.6dvh, 1.28rem) !important;
  }

  html body .fact-dialog[open]:not(.completion-dialog):not(.final-game-complete-dialog) .fact-dialog-label {
    margin-bottom: 1px !important;
    font-size: clamp(0.48rem, 1.15dvh, 0.62rem) !important;
    line-height: 1.02 !important;
  }

  html body .fact-dialog[open]:not(.completion-dialog):not(.final-game-complete-dialog) #fact-dialog-title {
    font-size: clamp(0.86rem, 2dvh, 1.08rem) !important;
    line-height: 1.02 !important;
  }

  html body .fact-dialog[open]:not(.completion-dialog):not(.final-game-complete-dialog) #fact-dialog-body {
    gap: clamp(5px, 0.9dvh, 8px) !important;
    font-size: clamp(0.62rem, 1.45dvh, 0.76rem) !important;
    line-height: 1.18 !important;
  }

  html body .fact-dialog[open]:not(.completion-dialog):not(.final-game-complete-dialog) .fact-dialog-media {
    width: min(86%, 360px) !important;
    gap: 3px !important;
  }

  html body .fact-dialog[open]:not(.completion-dialog):not(.final-game-complete-dialog) .fact-dialog-media img {
    height: clamp(88px, 19dvh, 132px) !important;
    border-radius: 10px !important;
  }

  html body .fact-dialog[open]:not(.completion-dialog):not(.final-game-complete-dialog) .fact-dialog-media figcaption,
  html body .fact-dialog[open]:not(.completion-dialog):not(.final-game-complete-dialog) .fact-source-links a {
    font-size: clamp(0.48rem, 1.05dvh, 0.58rem) !important;
    line-height: 1.08 !important;
  }

html body .fact-dialog[open]:not(.completion-dialog):not(.final-game-complete-dialog) .fact-dialog-copy {
    font-size: clamp(0.62rem, 1.45dvh, 0.76rem) !important;
    line-height: 1.18 !important;
  }
}

/* 2026-05-13 correction: fact entries in the compendium use the same round image icon as fact popups. */
html body .thesaurus-item.is-fact.has-fact-image .entry-icon {
  border-radius: 50% !important;
  overflow: hidden !important;
  background: rgba(255, 252, 232, 0.92) !important;
  box-shadow: inset 0 0 0 2px rgba(83, 104, 44, 0.18) !important;
}

html body .thesaurus-item.is-fact.has-fact-image .entry-icon img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

/* 2026-05-13 correction: compendium photo entries reuse the exact title leaderboard polaroid icons. */
html body .thesaurus-item.is-photo:not(.locked) .entry-icon {
  width: clamp(34px, 3.4vw, 52px) !important;
  height: clamp(38px, 3.8vw, 58px) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body .thesaurus-item.is-photo:not(.locked) .entry-icon .title-leaderboard-photo {
  width: clamp(24px, 2.4vw, 38px) !important;
  height: clamp(31px, 3.05vw, 48px) !important;
  min-width: clamp(24px, 2.4vw, 38px) !important;
  margin-left: 0 !important;
}

@media (max-width: 900px), (max-height: 700px) {
  html body .thesaurus-item.is-photo:not(.locked) .entry-icon {
    width: clamp(28px, 5.2dvh, 38px) !important;
    height: clamp(34px, 6.4dvh, 46px) !important;
  }

html body .thesaurus-item.is-photo:not(.locked) .entry-icon .title-leaderboard-photo {
    width: clamp(19px, 3.7dvh, 28px) !important;
    height: clamp(24px, 4.8dvh, 36px) !important;
    min-width: clamp(19px, 3.7dvh, 28px) !important;
  }
}

/* 2026-05-13 correction: fact bubbles use the widest available board lanes and keep text on one line. */
:root {
  --fact-lane-gap: clamp(8px, 1vw, 16px);
  --fact-top-lane-left: calc(clamp(20px, 1.7vw, 28px) + var(--board-fullscreen-button-size, 42px) + var(--fact-lane-gap));
  --fact-top-lane-right: calc(
    var(--game-right-panel-width, 0px)
    + var(--board-right-safe-inset, 0px)
    + clamp(104px, 8.6vw, 168px)
    + var(--fact-lane-gap)
  );
  --fact-bottom-lane-left: clamp(108px, 8.4vw, 164px);
  --fact-bottom-lane-right: calc(
    var(--game-right-panel-width, 0px)
    - var(--board-right-underlap, 0px)
    + var(--round-stop-button-size, var(--board-fullscreen-button-size, 42px))
    + clamp(8px, 1vw, 18px)
    + var(--fact-lane-gap)
  );
}

html body .play-area > .fact-strip,
html body[data-stage="forest"] .play-area > .fact-strip,
html body[data-stage="forest"] .play-area > .fact-strip.fact-bottom,
html body.board-expanded:not(.camera-view-active) .play-area > .fact-strip,
html.board-expanded-root body.board-expanded:not(.camera-view-active) .play-area > .fact-strip {
  position: absolute !important;
  left: var(--fact-top-lane-left) !important;
  right: var(--fact-top-lane-right) !important;
  top: clamp(14px, 1.6vh, 22px) !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  max-height: clamp(42px, 6.2vh, 58px) !important;
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  grid-template-columns: var(--fact-strip-icon-size, clamp(27px, 2.45vw, 36px)) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(6px, 0.65vw, 10px) !important;
  padding: clamp(5px, 0.58vw, 8px) calc(clamp(9px, 0.9vw, 13px) + var(--fact-strip-close-reserve, 32px)) clamp(5px, 0.58vw, 8px) clamp(9px, 0.9vw, 13px) !important;
  transform: none !important;
  overflow: hidden !important;
}

html body .play-area > .fact-strip.fact-bottom,
html body[data-stage="forest"] .play-area > .fact-strip.fact-bottom,
html body.board-expanded:not(.camera-view-active) .play-area > .fact-strip.fact-bottom,
html.board-expanded-root body.board-expanded:not(.camera-view-active) .play-area > .fact-strip.fact-bottom,
html body.board-expanded.board-controls-floating:not(.camera-view-active) .play-area > .fact-strip.fact-bottom,
html.board-expanded-root body.board-expanded.board-controls-floating:not(.camera-view-active) .play-area > .fact-strip.fact-bottom {
  position: absolute !important;
  left: var(--fact-bottom-lane-left) !important;
  right: var(--fact-bottom-lane-right) !important;
  top: auto !important;
  bottom: clamp(12px, 1.4vh, 22px) !important;
  width: auto !important;
  max-width: none !important;
}

html body.board-expanded:not(.camera-view-active),
html.board-expanded-root body.board-expanded:not(.camera-view-active) {
  --fact-top-lane-left: calc(var(--floating-board-control-edge, clamp(8px, 1.1vw, 16px)) + var(--board-fullscreen-button-size, 42px) + var(--fact-lane-gap));
  --fact-top-lane-right: calc(var(--floating-board-control-edge, clamp(8px, 1.1vw, 16px)) + clamp(104px, 14vw, 184px) + var(--fact-lane-gap));
  --fact-bottom-lane-left: clamp(132px, 17vw, 302px);
  --fact-bottom-lane-right: calc(clamp(5px, 0.65vw, 12px) + var(--round-stop-button-size, var(--board-fullscreen-button-size, 42px)) + var(--fact-lane-gap));
}

html body.board-expanded.board-controls-floating:not(.camera-view-active) .play-area > .fact-strip:not(.fact-bottom),
html.board-expanded-root body.board-expanded.board-controls-floating:not(.camera-view-active) .play-area > .fact-strip:not(.fact-bottom) {
  position: fixed !important;
  left: var(--fact-top-lane-left) !important;
  right: var(--fact-top-lane-right) !important;
  top: var(--floating-board-control-top) !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
}

html body .fact-copy {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: clamp(4px, 0.5vw, 8px) !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

html body .fact-copy small {
  display: inline !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

html body .fact-copy small[hidden] {
  display: none !important;
}

html body .fact-copy p {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  font-size: var(--fact-fit-font-size, clamp(0.72rem, min(1.16vw, 2vh), 1.16rem)) !important;
  line-height: 1.02 !important;
}

html body .fact-dots {
  display: none !important;
}

html body .play-area > .fact-strip.fact-hidden {
  display: grid !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body .play-area > .fact-strip[hidden] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body .bottom-bar .footer-tools-right > .stage-sound-button {
  background-size: 182% auto !important;
  background-position: center center !important;
}

html body .bottom-bar .footer-tools-right > .badge-button.backpack {
  background-size: 182% auto !important;
  background-position: center center !important;
}

html body .bottom-bar .footer-tools-right > .bottom-reset-button {
  background-size: 144% auto !important;
  background-position: center calc(50% - clamp(1px, 0.16vw, 2px)) !important;
}

/* 2026-05-13 correction: equal-size footer tools and symmetric, center-leaning tool groups on zoomed layouts. */
@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --footer-score-zoom-width: clamp(64px, 9.2vw, 96px);
    --footer-tool-balanced-size: clamp(34px, min(8.4dvh, 7.6vw), 54px);
    --footer-tool-gap-balanced: clamp(8px, 1.08vw, 14px);
    --footer-left-tool-gap: var(--footer-tool-gap-balanced);
    --footer-right-tool-scale: 1;
    --footer-symmetric-trim: clamp(76px, 10.5vw, 156px);
    --footer-arrow-group-gap: clamp(14px, 2.1vw, 24px);
    --footer-left-map-gap: clamp(8px, 1.2vw, 14px);
    --footer-left-tools-left: var(--footer-symmetric-trim);
    --footer-right-edge-gap: var(--footer-symmetric-trim);
    --footer-left-group-width: calc((3 * var(--footer-left-tool-size, var(--footer-tool-balanced-size))) + (2 * var(--footer-left-tool-gap, var(--footer-tool-gap-balanced))));
    --footer-right-tool-size-scaled: calc(var(--footer-tool-balanced-size) * var(--footer-right-tool-scale));
    --footer-right-group-width: calc((3 * var(--footer-right-tool-size-scaled)) + (2 * var(--footer-tool-gap-balanced)));
    --footer-right-tools-min-width: calc(var(--footer-right-group-width) + var(--footer-score-zoom-width) + clamp(8px, 1.2vw, 18px));
    --footer-map-zoom-boost: clamp(18px, 2.4vw, 34px);
    --footer-map-size-factor: 0.95;
    --footer-map-fit-width: min(
      calc((var(--footer-restored-map-width, 430px) + var(--footer-map-zoom-boost)) * var(--footer-map-size-factor)),
      calc(100vw - var(--footer-left-tools-left) - var(--footer-left-group-width) - var(--footer-left-map-gap) - var(--footer-right-tools-min-width) - var(--footer-arrow-group-gap) - var(--footer-right-edge-gap))
    );
    --footer-map-center: clamp(
      calc(var(--footer-left-tools-left) + var(--footer-left-group-width) + var(--footer-left-map-gap) + (var(--footer-map-fit-width) / 2)),
      50%,
      calc(100% - var(--footer-right-edge-gap) - var(--footer-right-tools-min-width) - var(--footer-arrow-group-gap) - (var(--footer-map-fit-width) / 2))
    );
    --footer-map-center-min: calc(var(--footer-left-tools-left) + var(--footer-left-group-width) + var(--footer-left-map-gap) + (var(--footer-map-fit-width) / 2));
    --footer-map-center-max: calc(100% - var(--footer-right-edge-gap) - var(--footer-right-tools-min-width) - var(--footer-arrow-group-gap) - (var(--footer-map-fit-width) / 2));
    --footer-map-arrow-inset: 14.8%;
    --footer-map-overhang: clamp(8px, 1.6dvh, 16px);
  }

  html body .bottom-bar .stage-map {
    left: var(--footer-map-center) !important;
    width: var(--footer-map-fit-width) !important;
    max-width: var(--footer-map-fit-width) !important;
    height: calc((var(--footer-restored-map-height, 56px) + (2 * var(--footer-map-overhang))) * var(--footer-map-size-factor)) !important;
    min-height: calc((var(--footer-restored-map-height, 56px) + (2 * var(--footer-map-overhang))) * var(--footer-map-size-factor)) !important;
  }

  html body .bottom-bar .footer-tools-left {
    left: var(--footer-left-tools-left) !important;
    right: auto !important;
    transform: translateY(-50%) !important;
  }

  html body .bottom-bar .footer-tools-right {
    left: calc(var(--footer-map-center) + (var(--footer-map-fit-width) / 2) + var(--footer-left-map-gap)) !important;
    right: auto !important;
    width: var(--footer-right-group-width) !important;
    max-width: var(--footer-right-group-width) !important;
    justify-content: flex-start !important;
    transform: translateY(-50%) !important;
  }

  html body .bottom-bar .footer-tools-right > .stage-sound-button,
  html body .bottom-bar .footer-tools-right > .badge-button.backpack,
  html body .bottom-bar .footer-tools-right > .bottom-reset-button {
    flex: 0 0 var(--footer-right-tool-size-scaled) !important;
    width: var(--footer-right-tool-size-scaled) !important;
    height: var(--footer-right-tool-size-scaled) !important;
    min-width: var(--footer-right-tool-size-scaled) !important;
    min-height: var(--footer-right-tool-size-scaled) !important;
    max-width: var(--footer-right-tool-size-scaled) !important;
    max-height: var(--footer-right-tool-size-scaled) !important;
  }

  html body .bottom-bar .footer-tools-right > .footer-score-board {
    margin-left: auto !important;
  }

  html body .bottom-bar .footer-tools-left,
  html body .bottom-bar .footer-tools-right {
    gap: var(--footer-tool-gap-balanced) !important;
  }

  html body .bottom-bar .footer-tools-right > .stage-sound-button {
    background-size: 182% auto !important;
    background-position: center center !important;
  }

  html body .bottom-bar .footer-tools-right > .badge-button.backpack {
    background-size: 182% auto !important;
    background-position: center center !important;
  }

  html body .bottom-bar .footer-tools-right > .bottom-reset-button {
    background-size: 144% auto !important;
    background-position: center calc(50% - clamp(1px, 0.16vw, 2px)) !important;
  }

  html body .bottom-bar .footer-tools-right > .footer-score-board,
  html body .bottom-bar .footer-tools > .footer-score-board {
    flex: 0 0 var(--footer-score-zoom-width) !important;
    width: var(--footer-score-zoom-width) !important;
    min-width: var(--footer-score-zoom-width) !important;
    max-width: var(--footer-score-zoom-width) !important;
    aspect-ratio: var(--footer-score-board-aspect, 1467 / 575) !important;
    max-height: calc(var(--footer-height, 78px) - 10px) !important;
    overflow: hidden !important;
    transform-origin: center right !important;
  }

  html body .bottom-bar .footer-tools-right > .footer-score-board strong,
  html body .bottom-bar .footer-tools > .footer-score-board strong {
    font-size: clamp(0.92rem, calc(var(--footer-score-zoom-width) * 0.16), 1.44rem) !important;
  }
}

@media (max-width: 900px), (max-height: 520px) {
  :root {
    --footer-score-zoom-width: clamp(56px, 10.2vw, 76px);
    --footer-tool-balanced-size: clamp(30px, min(7.4dvh, 7.8vw), 44px);
    --footer-tool-gap-balanced: clamp(7px, 1.8vw, 12px);
    --footer-left-tool-gap: var(--footer-tool-gap-balanced);
    --footer-arrow-group-gap: clamp(10px, 2.1vw, 18px);
    --footer-left-map-gap: clamp(7px, 1.5vw, 11px);
    --footer-symmetric-trim: clamp(62px, 11vw, 108px);
    --footer-left-tools-left: var(--footer-symmetric-trim);
    --footer-right-edge-gap: var(--footer-symmetric-trim);
    --footer-map-zoom-boost: clamp(12px, 2.8vw, 24px);
    --footer-map-arrow-inset: 14.2%;
    --footer-map-overhang: clamp(9px, 2dvh, 18px);
  }

  html body .bottom-bar .footer-tools-right > .footer-score-board strong,
  html body .bottom-bar .footer-tools > .footer-score-board strong {
    font-size: clamp(0.86rem, calc(var(--footer-score-zoom-width) * 0.165), 1.24rem) !important;
  }
}

@media (max-width: 560px) {
  :root {
    --footer-arrow-group-gap: clamp(22px, 5vw, 28px);
    --footer-left-map-gap: clamp(7px, 2.2vw, 10px);
    --footer-symmetric-trim: clamp(56px, 12.8vw, 72px);
    --footer-left-tools-left: var(--footer-symmetric-trim);
    --footer-right-edge-gap: var(--footer-symmetric-trim);
    --footer-map-zoom-boost: clamp(8px, 2.8vw, 16px);
    --footer-map-arrow-inset: 14.8%;
    --footer-map-overhang: clamp(10px, 2.4dvh, 20px);
  }
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --fact-lane-gap: 6px;
    --fact-top-lane-left: calc(clamp(10px, 1.2vw, 16px) + var(--board-fullscreen-button-size, 36px) + var(--fact-lane-gap));
    --fact-top-lane-right: calc(
      var(--game-right-panel-width, 0px)
      + var(--board-right-safe-inset, 0px)
      + clamp(78px, 22vw, 118px)
      + var(--fact-lane-gap)
    );
    --fact-bottom-lane-left: clamp(76px, 14vw, 112px);
    --fact-bottom-lane-right: calc(
      var(--game-right-panel-width, 0px)
      - var(--board-right-underlap, 0px)
      + var(--round-stop-button-size, var(--board-fullscreen-button-size, 36px))
      + clamp(6px, 1vw, 10px)
      + var(--fact-lane-gap)
    );
  }

  html body .play-area > .fact-strip,
  html body[data-stage="forest"] .play-area > .fact-strip,
  html body.board-expanded:not(.camera-view-active) .play-area > .fact-strip,
  html.board-expanded-root body.board-expanded:not(.camera-view-active) .play-area > .fact-strip {
    max-height: clamp(34px, 9.5vh, 46px) !important;
    padding: 4px calc(7px + var(--fact-strip-close-reserve, 28px)) 4px 7px !important;
  }

  html body.board-expanded:not(.camera-view-active),
  html.board-expanded-root body.board-expanded:not(.camera-view-active) {
    --fact-top-lane-left: calc(var(--floating-board-control-edge, 6px) + var(--board-fullscreen-button-size, 36px) + var(--fact-lane-gap));
    --fact-top-lane-right: calc(var(--floating-board-control-edge, 6px) + clamp(82px, 24vw, 124px) + var(--fact-lane-gap));
    --fact-bottom-lane-left: clamp(86px, 22vw, 150px);
    --fact-bottom-lane-right: calc(clamp(5px, 0.65vw, 10px) + var(--round-stop-button-size, var(--board-fullscreen-button-size, 36px)) + var(--fact-lane-gap));
  }
}

/* 2026-05-13 correction: slimmer fact bubbles on high zoom. */
@media (max-width: 1200px), (max-height: 700px) {
  html body .play-area > .fact-strip,
  html body[data-stage="forest"] .play-area > .fact-strip,
  html body[data-stage="forest"] .play-area > .fact-strip.fact-bottom,
  html body.board-expanded:not(.camera-view-active) .play-area > .fact-strip,
  html.board-expanded-root body.board-expanded:not(.camera-view-active) .play-area > .fact-strip {
    --fact-strip-icon-size: clamp(19px, 3.9dvh, 24px);
    --fact-strip-pad-y: clamp(0px, 0.12dvh, 2px);
    grid-template-columns: var(--fact-strip-icon-size) minmax(0, 1fr) !important;
    max-height: clamp(26px, 6.6dvh, 32px) !important;
    gap: clamp(3px, 0.42vw, 5px) !important;
    padding:
      var(--fact-strip-pad-y)
      calc(clamp(6px, 0.62vw, 9px) + var(--fact-strip-close-reserve, 28px))
      var(--fact-strip-pad-y)
      clamp(6px, 0.62vw, 9px) !important;
  }

  html body .fact-orbit {
    width: var(--fact-strip-icon-size) !important;
    height: var(--fact-strip-icon-size) !important;
    font-size: calc(var(--fact-strip-icon-size) * 0.43) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 clamp(1px, 0.25vw, 3px) rgba(95, 127, 49, 0.08) !important;
  }

  html body .play-area > .fact-strip .fact-copy p {
    font-size: clamp(0.56rem, min(0.94vw, 1.52vh), 0.84rem) !important;
    line-height: 1 !important;
  }

  html body .play-area > .fact-strip .fact-copy small {
    font-size: clamp(0.5rem, min(0.8vw, 1.2vh), 0.7rem) !important;
    line-height: 1 !important;
  }
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .play-area > .fact-strip,
  html body[data-stage="forest"] .play-area > .fact-strip,
  html body.board-expanded:not(.camera-view-active) .play-area > .fact-strip,
  html.board-expanded-root body.board-expanded:not(.camera-view-active) .play-area > .fact-strip {
    --fact-strip-icon-size: clamp(16px, 3.7dvh, 20px);
    --fact-strip-pad-y: 0px;
    max-height: clamp(23px, 6dvh, 28px) !important;
    padding:
      var(--fact-strip-pad-y)
      calc(5px + var(--fact-strip-close-reserve, 26px))
      var(--fact-strip-pad-y)
      5px !important;
  }

  html body .play-area > .fact-strip .fact-copy p {
    font-size: clamp(0.52rem, 0.9vh, 0.74rem) !important;
    line-height: 1 !important;
  }

  html body .play-area > .fact-strip .fact-copy small {
    font-size: clamp(0.46rem, 0.72vh, 0.62rem) !important;
    line-height: 1 !important;
  }
}

/* 2026-05-13 final footer/right-panel lock:
   keep right task box slimmer and slightly more to the right on all zooms,
   map always centered in the footer (both axes),
   total-score strip always on the right side of the footer. */
:root {
  --right-panel-shift-x: clamp(10px, 0.9vw, 18px);
  --right-panel-width-scale: 0.9;
}

html body:not(.board-expanded) .play-area > .task-panel,
html body:not(.board-expanded)[data-stage] .play-area > .task-panel {
  width: calc(var(--game-right-panel-width) * var(--right-panel-width-scale)) !important;
  min-width: calc(var(--game-right-panel-width) * var(--right-panel-width-scale)) !important;
  max-width: calc(var(--game-right-panel-width) * var(--right-panel-width-scale)) !important;
  justify-self: end !important;
  transform: translateX(var(--right-panel-shift-x)) !important;
}

html body .bottom-bar .stage-map {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

html body .bottom-bar > #footer-score-board,
html body .bottom-bar > .footer-score-board,
html body .bottom-bar #footer-score-board {
  position: absolute !important;
  top: 50% !important;
  right: clamp(4px, 0.6vw, 10px) !important;
  left: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

/* Fallback: even if score strip is accidentally nested into right tools, pin it to the right edge. */
html body .bottom-bar .footer-tools-right > #footer-score-board,
html body .bottom-bar .footer-tools-right > .footer-score-board {
  position: absolute !important;
  top: 50% !important;
  right: clamp(4px, 0.6vw, 10px) !important;
  left: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  html body .bottom-bar > #footer-score-board,
  html body .bottom-bar > .footer-score-board,
  html body .bottom-bar #footer-score-board {
    right: clamp(3px, 0.75vw, 8px) !important;
  }

  html body .bottom-bar .footer-tools-right > #footer-score-board,
  html body .bottom-bar .footer-tools-right > .footer-score-board {
    right: clamp(3px, 0.75vw, 8px) !important;
  }
}

/* 2026-05-13: tighter icon-to-label spacing in right panel for stage 1 and 2. */
html body[data-stage="dam"] .task-panel .task-scroll .stage-side-panel.active > .species-list li,
html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-guide-item {
  gap: clamp(2px, 0.24vw, 4px) !important;
}

/* 2026-05-13: move the right-column marker/counter slightly to the right in stage 1 and 2 side lists. */
html body[data-stage="dam"] .task-panel .task-scroll .stage-side-panel.active > .species-list li .check {
  justify-self: end !important;
  transform: translateX(clamp(2px, 0.25vw, 4px)) !important;
}

html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-guide-item b {
  justify-self: end !important;
  transform: translateX(clamp(2px, 0.25vw, 4px)) !important;
}

/* 2026-05-13: extend stage view further under the right task panel. */
:root {
  --board-right-underlap: clamp(44px, 4.2vw, 72px);
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  :root {
    --board-right-underlap: clamp(30px, 5.8vw, 50px);
  }
}

/* 2026-05-13: wider title text field in right panel (all cards), so headings wrap less and use less height. */
html body .task-panel > .task-scroll > h2,
html body[data-stage] .task-panel > .task-scroll > h2 {
  grid-template-columns: 0 minmax(0, 1fr) 0 !important;
  column-gap: 0 !important;
  padding-right: 0 !important;
}

html body .task-panel > .task-scroll > h2::before,
html body .task-panel > .task-scroll > h2::after,
html body[data-stage] .task-panel > .task-scroll > h2::before,
html body[data-stage] .task-panel > .task-scroll > h2::after {
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* 2026-05-13: right-panel headings compacted (centered and lower height). */
html body .task-panel > .task-scroll > h2,
html body[data-stage] .task-panel > .task-scroll > h2 {
  display: block !important;
  text-align: center !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  margin: 0 0 clamp(2px, 0.28vh, 4px) !important;
  line-height: 1.01 !important;
  white-space: normal !important;
  text-wrap: unset !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-shadow: none !important;
}

html body .task-scroll .stage-side-panel h3,
html body[data-stage] .task-panel .task-scroll .stage-side-panel h3 {
  text-align: center !important;
  margin: 0 0 clamp(2px, 0.24vh, 4px) !important;
  line-height: 1 !important;
}

@media (max-width: 900px), (max-height: 560px), (hover: none) and (pointer: coarse) {
  html body .task-panel > .task-scroll > h2,
  html body[data-stage] .task-panel > .task-scroll > h2 {
    font-size: clamp(7.8px, 1.02vw, 9px) !important;
    line-height: 0.94 !important;
    margin-bottom: 1px !important;
  }

  html body .task-scroll .stage-side-panel h3,
  html body[data-stage] .task-panel .task-scroll .stage-side-panel h3 {
    font-size: clamp(7.8px, 1.08vw, 9.2px) !important;
    line-height: 0.96 !important;
    margin-bottom: 1px !important;
  }
}

/* 2026-05-13: stage 2 right-panel plant names must stay on a single line. */
html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-guide-item {
  grid-template-columns: clamp(20px, 2vw, 30px) minmax(0, 1fr) clamp(12px, 1.3vw, 20px) !important;
}

html body[data-stage="meadow"] .task-panel .task-scroll .stage-side-panel.active > .plant-guide .plant-guide-item strong {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  line-height: 1 !important;
  font-size: clamp(6px, 0.72vw, 9.6px) !important;
}

/* 2026-05-13: simplified right footer controls.
   The 3-button group is anchored directly to the left of the score strip. */
:root {
  --footer-score-right-margin-clean: clamp(4px, 0.6vw, 10px);
  --footer-score-current-width-clean: var(--footer-score-zoom-width, var(--footer-score-balanced-width, var(--footer-score-board-width, clamp(64px, 9.2vw, 96px))));
  --footer-right-to-score-gap-clean: clamp(6px, 0.8vw, 12px);
  --footer-right-group-gap-clean: clamp(8px, 0.9vw, 14px);
  --footer-right-tool-size-clean: var(--footer-tool-balanced-size, var(--footer-left-tool-size, clamp(34px, min(8.4dvh, 7.6vw), 54px)));
}

html body .bottom-bar .footer-tools-right {
  position: absolute !important;
  top: 50% !important;
  left: auto !important;
  right: calc(var(--footer-score-right-margin-clean) + var(--footer-score-current-width-clean) + var(--footer-right-to-score-gap-clean)) !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--footer-right-group-gap-clean) !important;
  transform: translateY(-50%) !important;
}

html body .bottom-bar .footer-tools-right > .stage-sound-button,
html body .bottom-bar .footer-tools-right > .badge-button.backpack,
html body .bottom-bar .footer-tools-right > .bottom-reset-button {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex: 0 0 var(--footer-right-tool-size-clean) !important;
  width: var(--footer-right-tool-size-clean) !important;
  height: var(--footer-right-tool-size-clean) !important;
  min-width: var(--footer-right-tool-size-clean) !important;
  min-height: var(--footer-right-tool-size-clean) !important;
  max-width: var(--footer-right-tool-size-clean) !important;
  max-height: var(--footer-right-tool-size-clean) !important;
}

@media (max-width: 1200px), (max-height: 700px) {
  :root {
    --footer-score-right-margin-clean: clamp(3px, 0.75vw, 8px);
    --footer-right-to-score-gap-clean: clamp(5px, 0.75vw, 10px);
    --footer-right-group-gap-clean: clamp(6px, 0.95vw, 11px);
  }
}