:root {
  --ink: #173e36;
  --cream: #fff5d9;
  --green: #2d7954;
  --gold: #f1bf57;
  --red: #c75449;
}
body {
  background: radial-gradient(ellipse at 50% 30%, #548167, #183b35 72%);
  font:
    15px "Trebuchet MS",
    "Segoe UI",
    Arial,
    sans-serif;
  color: var(--ink);
}
#app {
  background: #93b866;
  box-shadow: 0 0 70px #091f2780;
}
#world {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.screen {
  z-index: 2;
  flex-direction: column;
}
#scr-loading {
  z-index: 100;
}
button {
  font:
    700 16px "Trebuchet MS",
    "Segoe UI",
    Arial,
    sans-serif;
  border: 1px solid #173e3625;
  border-bottom: 4px solid #173e3628;
  border-radius: 15px;
  color: var(--ink);
  background: #f7e9c1;
  min-height: 46px;
  padding: 10px 13px;
  cursor: pointer;
  transition:
    background 0.15s,
    translate 0.12s;
  touch-action: manipulation;
}
button:active {
  translate: 0 2px;
  border-bottom-width: 2px;
}
button:disabled {
  opacity: 0.48;
  cursor: default;
}
.primary {
  background: #2c7955;
  color: #fff6d9;
  border-bottom-color: #18513e;
  min-height: 54px;
}
.brand {
  text-align: center;
  position: absolute;
  top: 40px;
  width: 100%;
  pointer-events: none;
}
.eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #457154;
}
h1 {
  font-family: Georgia, serif;
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: -2px;
  margin: 16px 0 12px;
  text-shadow: 0 2px #f8f4c8;
}
h1 em {
  font-style: normal;
  font-size: 58px;
  color: #225d43;
}
p {
  line-height: 1.5;
}
h2 {
  font:
    700 27px/1.05 Georgia,
    serif;
  letter-spacing: -0.7px;
  margin: 0 0 12px;
}
.brand p {
  font-size: 13px;
  font-weight: bold;
  color: #3d684a;
}
.menu-footer {
  position: absolute;
  bottom: 14px;
  left: 24px;
  right: 24px;
}
.menu-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: bold;
  margin: 0 4px 10px;
}
.nectar {
  display: flex;
  gap: 5px;
  align-items: center;
  background: #fff2c7;
  padding: 5px 11px;
  border-radius: 20px;
}
.nectar svg {
  width: 17px;
  height: 21px;
  color: #db9640;
}
.play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 61px;
  font-size: 23px;
  border-radius: 19px;
  box-shadow: 0 5px 0 #16493825;
}
.play svg {
  width: 28px;
  height: 28px;
  color: #d7e9a2;
}
.play span {
  font-size: 15px;
  margin-left: auto;
}
.play svg {
  margin-right: auto;
}
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.menu-grid button {
  min-height: 44px;
  font-size: 14px;
  background: #fff5d8e8;
}
.menu-links {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  align-items: center;
}
.menu-links button {
  font-size: 12px;
  flex: 1;
  min-height: 40px;
  padding: 7px 5px;
  background: #e4e9b5;
  border-color: transparent;
}
.menu-links button:first-child {
  flex: 1.5;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  background: #d2e39e;
}
.menu-links button:last-child {
  flex: 0 0 40px;
}
.menu-links svg {
  width: 15px;
  height: 15px;
}
.guest {
  font-size: 10px;
  text-align: center;
  line-height: 1.3;
  margin: 8px 0 0;
  color: #31563e;
}
.privacy {
  display: block;
  margin: auto;
  background: transparent;
  border: 0;
  font-size: 10px;
  min-height: 22px;
  padding: 3px;
  color: #45644b;
}
.hud {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  pointer-events: none;
}
.hud button {
  pointer-events: auto;
}
.hud-top {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff5d9f2;
  border-radius: 18px;
  padding: 7px;
  box-shadow: 0 3px #34584026;
}
.hud-top > button:first-child {
  width: 43px;
  padding: 6px;
  min-height: 43px;
  font-size: 22px;
  background: #e5ebba;
}
.hud-top > div {
  flex: 1;
  min-width: 0;
}
.hud small {
  display: block;
  font-size: 9px;
  letter-spacing: 1px;
  color: #638364;
  margin-bottom: 3px;
}
.hud-top b {
  font-size: 14px;
  display: block;
}
.nest-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  min-height: 43px;
  padding: 7px;
  background: #f0c361;
}
.nest-btn svg {
  width: 20px;
  height: 20px;
}
.resource-bar {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}
.resource-bar > span {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff7deed;
  border-radius: 11px;
  padding: 6px 10px;
  flex: 1;
  font-size: 13px;
}
.resource-bar > span:first-child {
  flex: 2;
}
.resource-bar svg {
  width: 18px;
  height: 18px;
  color: #438450;
}
.resource-bar .queen svg {
  color: #c75449;
}
.progress {
  background: #254e3b80;
  height: 5px;
  margin: 6px 3px;
  border-radius: 6px;
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  width: 0;
  background: #ffdb73;
  border-radius: 6px;
}
#task-line {
  text-align: center;
  background: #234d3ecc;
  border-radius: 10px;
  padding: 6px;
  color: #fff5d9;
  font-size: 11px;
  line-height: 1.3;
}
#cargo-hud {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff9da;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  text-shadow: 0 1px 2px #173e36;
  pointer-events: none;
}
#cargo-hud > i {
  display: block;
  width: 92px;
  height: 6px;
  background: #234d3e;
  border-radius: 6px;
  margin: 5px auto;
  overflow: hidden;
}
#cargo-fill {
  display: block;
  background: #ffd067;
  height: 100%;
  width: 0;
}
#hint {
  position: absolute;
  bottom: 150px;
  left: 20px;
  right: 88px;
  text-align: center;
  background: #fff5d9ef;
  border-radius: 14px;
  padding: 10px;
  font-size: 12px;
  font-weight: bold;
  pointer-events: none;
  box-shadow: 0 3px #173e3620;
}
#hint:empty {
  display: none;
}
.ctrl-group {
  transform-origin: bottom left;
}
.ability-controls {
  position: absolute;
  right: 15px;
  bottom: 42px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform-origin: bottom right;
  pointer-events: auto;
}
.ability-controls button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f5cb65;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px;
  border: 3px solid #fff4cb;
  box-shadow: 0 3px #244b3e55;
}
.ability-controls button:last-child {
  background: #c9e69c;
}
.ability-controls svg {
  width: 23px;
  height: 23px;
}
.ability-controls small {
  font-size: 9px;
  font-weight: 800;
}
#joystick {
  position: absolute;
  width: 110px;
  height: 110px;
  left: 18px;
  bottom: 40px;
  border-radius: 50%;
  background: #fff4cf24;
  border: 2px solid #fff5d94d;
  pointer-events: none;
  transform: none !important;
}
#joystick span {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 1px dashed #fff4cf55;
  border-radius: 50%;
  left: 23px;
  top: 23px;
}
#joystick i {
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff5d96e;
  border: 2px solid #fff5d9a0;
  left: 33px;
  top: 33px;
}
#scr-game {
  touch-action: none;
}
.overlay {
  background: #123c3290;
  backdrop-filter: blur(3px);
  padding: 8px;
}
.panel {
  width: 350px;
  flex-shrink: 0;
  padding: 22px;
  background: #fff5d9;
  border-radius: 25px;
  border: 2px solid #fff9e7;
  box-shadow: 0 9px 0 #143a3340;
  display: flex;
  flex-direction: column;
  gap: 9px;
  animation: arrive 0.2s;
}
.panel > p {
  font-size: 13px;
  margin: 0 0 6px;
  color: #5c7054;
}
.panel > button {
  width: 100%;
}
.panel > small {
  font-size: 11px;
  line-height: 1.45;
  color: #63745a;
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.panel-heading h2 {
  font-size: 25px;
  margin: 0;
}
.panel-heading > button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  font-size: 26px;
  flex-shrink: 0;
  background: #e9ebc5;
}
.scroller {
  touch-action: none;
  min-height: 0;
}
#chapter-list {
  height: 350px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chapter-card {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 12px;
  min-height: 78px;
  flex-shrink: 0;
  background: #e6ebc5;
}
.chapter-card .num {
  font:
    700 34px Georgia,
    serif;
  color: #34805c;
}
.chapter-card b {
  display: block;
  font-size: 15px;
}
.chapter-card small {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  color: #597356;
}
.chapter-card .chapter-stars {
  color: #d79428;
  letter-spacing: 1px;
}
#upgrade-list {
  height: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upgrade-card {
  background: #e9edc9;
  border-radius: 16px;
  padding: 14px;
}
.upgrade-card h3 {
  font-size: 17px;
  margin-bottom: 5px;
}
.upgrade-card p {
  font-size: 12px;
  color: #567152;
  margin-bottom: 8px;
}
.upgrade-card button {
  width: 100%;
  font-size: 14px;
  background: #efc864;
}
#help-list {
  height: 360px;
}
article {
  padding: 13px 4px;
  border-bottom: 1px solid #ced8ad;
}
article b {
  font-size: 16px;
}
article p {
  font-size: 13px;
  margin-top: 6px;
  color: #50674c;
}
.lb-row {
  border-radius: 12px;
  background: #e7edc7;
  font-size: 13px;
}
.lb-row.top-1 {
  background: #f4d580;
}
.lb-row.top-2 {
  background: #dbe5d4;
}
.lb-row.top-3 {
  background: #e8c38e;
}
.lb-row.me {
  outline: 2px solid #2c7955;
  outline-offset: -2px;
}
.lb-avatar {
  background: #6c9c68;
  color: white;
}
.lb-medal {
  font-weight: 900;
  border-radius: 50%;
  background: #fff5d9;
  line-height: 30px;
}
.stars {
  font-size: 35px;
  letter-spacing: 7px;
  color: #d89c2f;
  text-align: center;
}
.result-panel {
  text-align: center;
}
.result-stats {
  padding: 16px;
  background: #e8edc7;
  border-radius: 17px;
  line-height: 1.8;
  font-size: 14px;
}
#nest-art {
  width: 100%;
  height: 158px;
  border-radius: 15px;
  background: #203f37;
}
.nest-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.nest-actions button {
  font-size: 14px;
  background: #e2eaba;
}
#toast {
  position: absolute;
  z-index: 150;
  bottom: 180px;
  left: 20px;
  right: 20px;
  text-align: center;
  padding: 12px;
  background: #173e36;
  color: #fff3ca;
  border-radius: 14px;
  opacity: 0;
  translate: 0 10px;
  pointer-events: none;
  transition: 0.2s;
  font-size: 13px;
}
#toast.show {
  opacity: 1;
  translate: 0 0;
}
.symbols {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
@keyframes arrive {
  from {
    opacity: 0;
    translate: 0 10px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (max-height: 530px) {
  .hud {
    top: 5px;
    left: 6px;
    right: 6px;
  }
  .hud-top {
    gap: 4px;
    padding: 4px;
  }
  .hud-top b {
    font-size: 11px;
  }
  .hud-top small {
    font-size: 8px;
  }
  .hud-top > button:first-child {
    width: 40px;
    min-height: 40px;
  }
  .nest-btn {
    font-size: 0;
    min-height: 40px;
    width: 40px;
    padding: 8px;
  }
  .resource-bar > span {
    padding: 4px 6px;
    font-size: 10px;
  }
  .resource-bar svg {
    width: 14px;
    height: 14px;
  }
  #task-line {
    font-size: 9px;
    padding: 4px;
  }
  .ability-controls {
    right: 8px;
    bottom: 28px;
    gap: 7px;
  }
  .ability-controls button {
    width: 54px;
    height: 54px;
  }
  #cargo-hud {
    bottom: 8px;
  }
  #hint {
    bottom: 130px;
    left: 10px;
    right: 72px;
    font-size: 10px;
    padding: 7px;
  }
  #joystick {
    width: 88px;
    height: 88px;
    bottom: 30px;
    left: 10px;
  }
  #joystick span {
    width: 50px;
    height: 50px;
    left: 17px;
    top: 17px;
  }
  #joystick i {
    left: 23px;
    top: 23px;
  }
}

@media (max-height: 400px) {
  #menuIn {
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
  }
  .brand {
    top: 10px;
  }
  .brand .eyebrow,
  .brand p {
    display: none;
  }
  .brand h1 {
    font-size: 23px;
    margin: 0;
    letter-spacing: -1px;
  }
  .brand h1 em {
    font-size: 29px;
  }
  .menu-footer {
    left: 7px;
    right: 7px;
    bottom: 5px;
  }
  .menu-status,
  .privacy {
    display: none;
  }
  .play {
    min-height: 40px;
    font-size: 15px;
    padding: 4px 8px;
    border-radius: 12px;
  }
  .play svg {
    width: 19px;
    height: 19px;
  }
  .menu-grid {
    margin-top: 5px;
    gap: 4px;
  }
  .menu-grid button {
    min-height: 40px;
    font-size: 10px;
    padding: 4px 2px;
    border-radius: 10px;
  }
  .menu-links {
    margin-top: 4px;
    gap: 3px;
  }
  .menu-links button {
    min-height: 40px;
    font-size: 9px;
    padding: 3px 0;
  }
  .menu-links button:first-child {
    gap: 2px;
  }
  .menu-links button:last-child {
    flex-basis: 35px;
  }
  .menu-links svg {
    width: 11px;
    height: 11px;
  }
  .guest {
    font-size: 8px;
    margin-top: 4px;
    line-height: 1.1;
  }
  .hud-top {
    gap: 2px;
  }
  .hud-top > div {
    min-width: 0;
  }
  .hud-top b {
    font-size: 9px;
    line-height: 1.1;
  }
  .hud-top small {
    font-size: 7px;
    letter-spacing: 0;
  }
  .resource-bar {
    gap: 3px;
  }
  .resource-bar > span {
    padding: 4px;
    font-size: 9px;
    gap: 3px;
  }
  .resource-bar svg {
    width: 10px;
    height: 10px;
  }
  .resource-bar .queen {
    flex: 0.7;
  }
  #task-line {
    font-size: 8px;
  }
  #hint {
    bottom: 133px;
    left: 8px;
    right: 8px;
    font-size: 8px;
    padding: 5px;
  }
  .ability-controls {
    bottom: 26px;
  }
  #joystick {
    left: 6px;
    bottom: 24px;
    width: 75px;
    height: 75px;
  }
  #joystick i {
    left: 16px;
    top: 16px;
  }
  #joystick span {
    left: 10px;
    top: 10px;
  }
  #cargo-hud {
    font-size: 8px;
  }
  #cargo-hud > i {
    width: 75px;
  }
}

.menu-status {
  background: #fff5d9e8;
  border-radius: 12px;
  padding: 4px 8px;
}

/* ===== Яркая детская палитра ===== */
:root { --ink: #3a1a5a; --cream: #ffffff; --green: #2fb84a; --gold: #ffd23f; --red: #ff4f6a; }
body { background: radial-gradient(ellipse at 50% 30%, #7fd0ff, #2a7ad8 75%); color: var(--ink); }
#app { background: #6ad446; box-shadow: 0 0 60px #0a3a8080; }
button { font-weight: 800; color: var(--ink); background: linear-gradient(#ffffff, #f1ecff); border: 3px solid #3a1a5a; border-bottom-width: 5px; border-radius: 16px; box-shadow: inset 0 2px 0 #ffffffcc; }
button:active { translate: 0 3px; border-bottom-width: 2px; }
.primary { color: #fff; text-shadow: 0 2px 0 #8a2a00; background: linear-gradient(#ffc233, #ff8a00 48%, #f25c00 52%, #ff7a00); border-color: #7a2a00; }

/* меню: табличка с названием */
.brand { top: 22px; }
.title-plate { position: relative; width: 320px; margin: 0 auto; padding: 12px 0 10px; line-height: 0; border-radius: 22px;
  background: linear-gradient(#8a6bff, #5a3bd8 45%, #3f22b0); border: 4px solid #2a1070;
  box-shadow: inset 0 3px 0 #ffffff66, inset 0 -4px 0 #00000040, 0 8px 0 #2a107066, 0 12px 20px #0a2a6050; }
.title-plate i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8b0, #ffb020 70%); box-shadow: 0 1px 0 #6a3a00; }
.title-plate i:nth-child(1) { left: 9px; top: 9px; } .title-plate i:nth-child(2) { right: 9px; top: 9px; }
.title-plate i:nth-child(3) { left: 9px; bottom: 9px; } .title-plate i:nth-child(4) { right: 9px; bottom: 9px; }
.title-plate svg { display: block; margin: 0 auto; }
.brand p { display: inline-block; margin-top: 10px; padding: 4px 14px; border-radius: 20px; background: #ffffffe0; color: #3f22b0; font-size: 13px; font-weight: 900; box-shadow: 0 3px 0 #3f22b055; }

/* меню: низ */
.menu-status { background: linear-gradient(#ffffff, #eef7ff); border: 3px solid #3a1a5a; border-radius: 16px; padding: 5px 6px 5px 12px; color: #3a1a5a; box-shadow: 0 4px 0 #3a1a5a44; }
.nectar { background: linear-gradient(#5a3bd8, #3f22b0); color: #ffe14a; border-radius: 12px; padding: 5px 12px; font-size: 15px; box-shadow: inset 0 2px 0 #ffffff55; }
.nectar svg { color: #ffd23f; filter: drop-shadow(0 2px 0 #6a2a00); }
.play { position: relative; height: 72px; min-height: 72px; border-radius: 22px; border: 0; gap: 10px; padding: 0;
  background: linear-gradient(#ffc233, #ff8a00 48%, #f25c00 52%, #ff7a00);
  box-shadow: 0 0 0 3px #7a2a00, 0 0 0 6px #ffd98a, 0 0 0 8px #7a2a00, 0 8px 0 8px #3a1200, 0 18px 20px #0a2a6060;
  animation: playPulse 1.7s ease-in-out infinite; line-height: 0; }
.play::before { content: ""; position: absolute; left: 12px; right: 12px; top: 6px; height: 34%; border-radius: 16px; background: linear-gradient(#ffffffb0, #ffffff18); pointer-events: none; }
.play > * { position: relative; pointer-events: none; margin: 0 !important; }
.play svg { width: auto; height: auto; color: inherit; }
.play:active { translate: 0 5px; }
@keyframes playPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
.menu-footer { bottom: 12px; }
.menu-footer .play { margin-top: 4px; margin-bottom: 16px; }
.menu-grid button { color: #fff; text-shadow: 0 2px 0 #0004; font-size: 15px; }
.menu-grid button:nth-child(1) { background: linear-gradient(#8df27a, #2fb84a); border-color: #0d5a1a; }
.menu-grid button:nth-child(2) { background: linear-gradient(#8fd8ff, #1e88e5); border-color: #0a3a80; }
.menu-grid button:nth-child(3) { background: linear-gradient(#d4a8ff, #8a4dff); border-color: #3a1080; }
.menu-grid button:nth-child(4) { background: linear-gradient(#ffb0d4, #ff4f9a); border-color: #80103a; }
.menu-links button { background: linear-gradient(#ffffff, #eef7ff); border-color: #3a1a5a; color: #3a1a5a; }
.menu-links button:first-child { background: linear-gradient(#fff6a0, #ffd23f); border-color: #6a3a00; }
.guest { color: #fff; font-weight: 800; text-shadow: 0 1px 2px #0a3a00; }
.privacy { color: #fff; text-shadow: 0 1px 2px #0a3a00; background: transparent; border: 0; box-shadow: none; text-decoration: underline; }

/* игровой интерфейс */
.hud-top { background: linear-gradient(#ffffff, #eef7ff); border: 3px solid #3a1a5a; box-shadow: 0 4px 0 #3a1a5a55; }
.hud-top > button:first-child { background: linear-gradient(#d4a8ff, #8a4dff); color: #fff; border-color: #3a1080; font-size: 20px; }
.hud small { color: #8a4dff; font-weight: 900; }
.hud-top b { color: #3a1a5a; }
.nest-btn { background: linear-gradient(#ffe14a, #ffa31a); border-color: #6a3a00; color: #5a2a00; }
.resource-bar > span { background: #ffffff; border: 3px solid #3a1a5a; box-shadow: 0 3px 0 #3a1a5a44; font-weight: 900; color: #3a1a5a; }
.resource-bar svg { color: #2fb84a; }
.resource-bar > span:nth-child(2) svg { color: #ff8a00; }
.resource-bar .queen svg { color: #ff3b6b; }
.progress { background: #3a1a5a99; height: 8px; border-radius: 8px; border: 2px solid #ffffff; }
.progress i { background: linear-gradient(90deg, #ffe14a, #ff8a00); }
#task-line { background: #5a3bd8e6; border: 2px solid #fff; color: #fff; font-weight: 800; }
#cargo-hud { color: #fff; text-shadow: 0 2px 0 #3a1a5a, 0 0 4px #3a1a5a; font-weight: 900; }
#cargo-hud > i { background: #3a1a5a; border: 2px solid #fff; height: 9px; }
#cargo-fill { background: linear-gradient(90deg, #ffe14a, #ff8a00); }
#hint { background: #ffffff; border: 3px solid #ff8a00; color: #3a1a5a; box-shadow: 0 4px 0 #ff8a0066; }
.ability-controls button { border: 3px solid #3a1a5a; box-shadow: inset 0 3px 0 #ffffff88, 0 4px 0 #3a1a5a; color: #3a1a5a; }
.ability-controls button:first-child { background: radial-gradient(circle at 35% 25%, #fff6a0, #ffc21a 70%); }
.ability-controls button:last-child { background: radial-gradient(circle at 35% 25%, #a8e8ff, #29a8f5 70%); }
#joystick { background: #ffffff30; border: 3px solid #ffffffb0; }
#joystick i { background: radial-gradient(circle at 35% 30%, #ffffff, #ffd23f); border: 3px solid #ff8a00; }

/* окна */
.overlay { background: #2a1a6a99; }
.panel { background: linear-gradient(#ffffff, #f6f1ff); border: 4px solid #3a1a5a; box-shadow: 0 8px 0 #3a1a5a77, 0 16px 30px #0a1a5060; }
.panel h2, .panel-heading h2 { font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; font-weight: 900; color: #5a3bd8; letter-spacing: 0; }
.panel > p, .panel > small { color: #5a4a7a; }
.eyebrow { color: #ff8a00; font-weight: 900; }
.panel-heading > button { background: linear-gradient(#ffb0c4, #ff4f6a); color: #fff; border-color: #80103a; }
.chapter-card { background: linear-gradient(#fffbe6, #fff0b8); border-color: #c07a00; }
.chapter-card .num { font-family: "Trebuchet MS", Arial, sans-serif; font-weight: 900; color: #ff8a00; text-shadow: 0 2px 0 #7a3a00; }
.chapter-card small { color: #7a5a3a; }
.chapter-card .chapter-stars { color: #ffb020; }
.upgrade-card { background: linear-gradient(#eef7ff, #dcefff); border: 3px solid #1e88e5; }
.upgrade-card h3 { color: #1a4aa0; }
.upgrade-card p { color: #3a5a8a; }
.upgrade-card button { background: linear-gradient(#ffe14a, #ffa31a); border-color: #6a3a00; color: #5a2a00; }
article { border-bottom: 2px dashed #d8ccff; }
article b { color: #5a3bd8; }
article p { color: #4a3a6a; }
.lb-row { background: #f1ecff; }
.lb-row.top-1 { background: #ffe680; } .lb-row.top-2 { background: #e0ecff; } .lb-row.top-3 { background: #ffd0a8; }
.lb-row.me { outline-color: #ff8a00; }
.lb-avatar { background: #8a4dff; }
.stars { color: #ffc21a; text-shadow: 0 3px 0 #a85a00; }
.result-stats { background: #f1ecff; border: 3px solid #d8ccff; color: #3a1a5a; }
#nest-art { background: #8a4a1a; border: 3px solid #5a2a10; }
.nest-actions button:nth-child(1) { background: linear-gradient(#fff6a0, #ffc233); border-color: #6a3a00; }
.nest-actions button:nth-child(2) { background: linear-gradient(#a8c8ff, #5a8dff); border-color: #0a3a80; color: #fff; text-shadow: 0 1px 0 #0a3a80; }
.nest-actions button:nth-child(3) { background: linear-gradient(#ffc4d8, #ff6f9a); border-color: #80103a; color: #fff; text-shadow: 0 1px 0 #80103a; }
#toast { background: #5a3bd8; color: #fff; border: 3px solid #fff; font-weight: 800; }

@media (max-height: 400px) {
  .brand { top: 6px; }
  .brand p { display: none; }
  .title-plate { transform: scale(0.52); transform-origin: top center; }
  .play { height: 46px; min-height: 46px; box-shadow: 0 0 0 2px #7a2a00, 0 0 0 4px #ffd98a, 0 0 0 5px #7a2a00, 0 4px 0 5px #3a1200; }
  .play > svg:last-child { transform: scale(0.7); }
  .menu-footer .play { margin-bottom: 8px; }
}
.menu-top { position: absolute; top: 10px; left: 24px; right: 24px; margin: 0; z-index: 2; }
.brand { top: 60px; }
.brand p { display: none; }
@media (max-height: 400px) {
  .menu-status.menu-top { display: none; }
  .brand { top: 4px; }
  .menu-grid button { font-size: 10px; border-width: 2px; border-bottom-width: 3px; padding: 3px 2px; }
  .menu-links button { font-size: 9px; border-width: 2px; border-bottom-width: 3px; }
  .resource-bar > span { border-width: 2px; }
  .hud-top { border-width: 2px; }
  .hud-top > button:first-child { font-size: 16px; }
}
@media (max-height: 400px) {
  .title-plate { position: absolute; left: 50%; margin-left: -160px; transform: scale(0.5); transform-origin: top center; }
}