:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: #eadfcf;
  color: #20264f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, #fff8eb 0 24%, transparent 58%),
    linear-gradient(135deg, #e9d7d0, #d9e9ea);
}

body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: max(0px, env(safe-area-inset-top)) 0 max(0px, env(safe-area-inset-bottom));
}

#game-shell {
  position: relative;
  width: min(100vw, calc(100dvh * 750 / 1334), 520px);
  height: 100dvh;
  overflow: hidden;
  background: #fff7e8 url("../assets/resources/art/backgrounds/studio-bg.jpg") center / cover no-repeat;
  box-shadow: 0 28px 80px rgb(37 35 64 / 24%);
  touch-action: none;
  user-select: none;
}

#game-canvas {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 750 / 1334;
  transform: translateY(-50%);
  touch-action: none;
  transition: opacity 180ms ease;
}

#game-shell.menu-screen #game-canvas { opacity: 0; }

.icon-button {
  position: absolute;
  z-index: 5;
  top: max(14px, env(safe-area-inset-top));
  right: 16px;
  width: 42px;
  height: 42px;
  border: 2px solid #28305b;
  border-radius: 50%;
  background: rgb(255 250 238 / 88%);
  color: #28305b;
  font: 700 25px/1 system-ui;
  box-shadow: 0 5px 0 rgb(40 48 91 / 16%);
  cursor: pointer;
}

.icon-button:active { transform: translateY(2px); box-shadow: 0 3px 0 rgb(40 48 91 / 16%); }

#sound-button { right: 66px; font-size: 21px; }
#menu-button { right: 116px; font-size: 22px; }
#sound-button.muted { opacity: .55; }

#power-bar {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(7px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
  padding: 7px 8px;
  border: 2px solid rgb(255 255 255 / 76%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(255 254 247 / 96%), rgb(238 230 255 / 94%));
  box-shadow: 0 7px 0 rgb(45 49 88 / 16%), 0 12px 24px rgb(38 34 66 / 18%);
}

#power-bar button {
  display: grid;
  grid-template-columns: 38px auto;
  grid-template-rows: 19px 15px;
  align-items: center;
  gap: 0 3px;
  min-width: 91px;
  height: 48px;
  padding: 3px 8px 3px 4px;
  border: 2px solid rgb(49 55 96 / 16%);
  border-radius: 22px;
  background: rgb(255 250 232 / 90%);
  color: #313760;
  font: 800 12px/1 "Microsoft YaHei", sans-serif;
}

#power-bar button img { grid-row: 1 / 3; width: 38px; height: 38px; object-fit: contain; }
#power-bar button b { align-self: end; }
#power-bar button small { align-self: start; color: #777b98; font-size: 10px; }
#power-bar button.selected { border-color: #ffcf5c; background: #fff4c4; box-shadow: 0 0 0 3px rgb(255 139 161 / 24%); }
#power-bar button:disabled { filter: grayscale(1); opacity: .4; }

#level-picker {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  display: none;
  gap: 7px;
  padding: 9px;
  border: 3px solid #313760;
  border-radius: 18px;
  background: #fffaf0;
  box-shadow: 0 12px 34px rgb(36 32 70 / 24%);
}

#level-picker.visible { display: flex; }
#level-picker::after { content: ""; position: absolute; width: 14px; height: 14px; background: #fffaf0; transform: rotate(45deg); }
#level-picker[data-placement="right"]::after { left: -7px; top: calc(50% - 7px); }
#level-picker[data-placement="left"]::after { right: -7px; top: calc(50% - 7px); }
#level-picker[data-placement="above"]::after { left: calc(50% - 7px); bottom: -7px; }
#level-picker[data-placement="below"]::after { left: calc(50% - 7px); top: -7px; }
#level-picker button { position: relative; z-index: 1; min-width: 54px; min-height: 44px; padding: 9px; border: 0; border-radius: 12px; background: #eee6ff; color: #313760; font-weight: 900; }
#level-picker button:disabled { background: #eeece8; color: #aaa6ad; }

#toast {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 8.5%;
  transform: translateX(-50%) translateY(16px);
  min-width: 170px;
  max-width: 80%;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgb(37 43 81 / 90%);
  color: white;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transition: 180ms ease;
  pointer-events: none;
}

#toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast .toast-spark { display: inline-flex; margin: 0 2px; vertical-align: -3px; }
#toast .creation-spark-icon { width: 18px; height: 18px; }

.overlay {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: none;
  place-items: center;
  padding: 22px;
  background: linear-gradient(rgb(255 249 235 / 25%), rgb(255 244 224 / 72%));
  opacity: 0;
  visibility: hidden;
}

.overlay.visible { display: grid; opacity: 1; visibility: visible; }

.paper-card {
  width: min(94%, 458px);
  max-height: 92dvh;
  overflow: auto;
  padding: 30px 24px 25px;
  border: 3px solid #28305b;
  border-radius: 28px 28px 34px 26px;
  background:
    radial-gradient(circle at 16% 13%, rgb(255 255 255 / 80%) 0 2px, transparent 3px),
    rgb(255 251 240 / 96%);
  box-shadow: 0 12px 0 rgb(40 48 91 / 13%), 0 24px 60px rgb(45 39 69 / 18%);
  text-align: center;
}

.menu-title { font-size: clamp(31px, 7.6vw, 44px); }
.menu-mascots { display: flex; align-items: end; justify-content: center; height: 128px; margin: -4px 0 3px; overflow: hidden; }
.menu-mascot { width: 98px; height: 130px; background-image: url("../assets/resources/art/characters/mascot-reactions.png"); background-repeat: no-repeat; background-size: 400% 300%; filter: drop-shadow(0 6px 6px rgb(46 40 72 / 15%)); animation: mascot-bob 2.1s ease-in-out infinite alternate; }
.menu-mascot.palette { background-position: 0 0; }
.menu-mascot.prism { background-position: 33.333% 50%; animation-delay: -.7s; }
.menu-mascot.fox { background-position: 0 100%; animation-delay: -1.3s; }
@keyframes mascot-bob { to { transform: translateY(-5px) rotate(2deg); } }

.stamina-card { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px auto 15px; padding: 9px 14px; border-radius: 999px; background: #fff0f2; color: #bc536a; font-size: 13px; font-weight: 900; }
.stamina-card strong { font-size: 21px; }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.menu-actions button, .secondary-button { padding: 12px 14px; border: 2px solid #313760; border-radius: 999px; background: #f0e9ff; color: #313760; font-weight: 900; box-shadow: 0 4px 0 #313760; }
.menu-actions .primary { grid-column: 1 / -1; background: linear-gradient(135deg, #ff8da1, #ffc85c); font-size: 16px; }

.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 14px 0 18px; }
.level-node { min-height: 58px; padding: 5px 2px; border: 2px solid #313760; border-radius: 16px; background: #fff5d8; color: #313760; box-shadow: 0 4px 0 rgb(49 55 96 / 70%); font-weight: 900; }
.level-node small { display: block; margin-top: 3px; color: #e86f8b; font-size: 9px; letter-spacing: -1px; }
.level-node.locked { background: #e3dfe4; color: #9290a0; filter: grayscale(1); box-shadow: 0 3px 0 #9c98a2; }
.level-node.current { outline: 4px solid rgb(255 202 83 / 45%); }

.result-stars { display: flex; justify-content: center; gap: 7px; margin: 12px 0; font-size: 41px; }
.result-stars span { color: #c9c5ce; filter: drop-shadow(0 3px 0 rgb(49 55 96 / 20%)); transform: scale(.9); }
.result-stars span.on { color: #ffd55f; transform: scale(1.08); animation: star-pop 480ms cubic-bezier(.2,1.6,.4,1) both; }
.result-stars.all-rainbow span.on { animation-name: rainbow-star-pop; }
@keyframes star-pop { from { transform: scale(0) rotate(-35deg); } to { transform: scale(1.08) rotate(0); } }
@keyframes rainbow-star-pop { from { transform: scale(0) rotate(-35deg); } to { transform: scale(1.08) rotate(0); } }
.rainbow-rating {
  color: transparent !important;
  background: linear-gradient(90deg, #ff7f93, #ffc950 34%, #55cfdf 67%, #9c7bf3);
  background-clip: text;
  -webkit-background-clip: text;
}

.eyebrow { margin: 0 0 4px; color: #e96d85; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(34px, 8vw, 48px); letter-spacing: .04em; }
.subtitle { margin: 9px auto 20px; color: #6a6f8d; font-size: 14px; }

.rule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}

.rule-grid div {
  min-height: 92px;
  padding: 10px 6px;
  border: 2px dashed rgb(57 67 111 / 18%);
  border-radius: 18px;
  background: rgb(245 235 255 / 54%);
}

.rule-grid span { display: block; color: #ef708b; font-size: 27px; font-weight: 900; line-height: 1; }
.rule-grid b { display: block; margin-top: 5px; font-size: 13px; }
.rule-grid small { display: block; margin-top: 3px; color: #777b98; font-size: 11px; }

#primary-button {
  min-width: 190px;
  padding: 14px 24px;
  border: 2px solid #28305b;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8da1, #ffc85c);
  color: #28305b;
  font: 900 17px/1 system-ui, sans-serif;
  box-shadow: 0 6px 0 #28305b;
  cursor: pointer;
}

#primary-button:active { transform: translateY(3px); box-shadow: 0 3px 0 #28305b; }

@media (max-width: 360px), (max-height: 650px) {
  .paper-card { padding: 20px 18px 18px; }
  .subtitle { margin-bottom: 12px; }
  .rule-grid { gap: 6px; margin-bottom: 14px; }
  .rule-grid div { min-height: 77px; padding: 7px 4px; }
  .rule-grid span { font-size: 22px; }
}

/* Full-screen title lobby, following the same hierarchy as the Mouse Escape title scene. */
.lobby-overlay {
  place-items: stretch;
  padding: 0;
  background:
    linear-gradient(180deg, rgb(32 42 82 / 20%) 0%, transparent 28%, transparent 58%, rgb(45 38 78 / 38%) 100%),
    radial-gradient(circle at 50% 43%, rgb(255 255 240 / 14%), transparent 48%);
}

.lobby-card {
  display: grid;
  grid-template-rows: auto auto minmax(180px, 1fr) auto;
  width: 100%;
  height: 100%;
  max-height: none;
  padding: max(18px, env(safe-area-inset-top)) 22px max(14px, env(safe-area-inset-bottom));
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.lobby-topbar { display: flex; justify-content: space-between; gap: 8px; padding-right: 48px; }
.lobby-stamina, .lobby-progress {
  display: grid;
  grid-template-columns: 25px auto;
  grid-template-rows: 18px 14px;
  align-items: center;
  min-width: 116px;
  padding: 6px 12px;
  border: 2px solid rgb(255 255 255 / 72%);
  border-radius: 22px;
  background: rgb(42 46 87 / 82%);
  color: #fff9dc;
  box-shadow: 0 5px 0 rgb(42 46 87 / 18%);
  text-align: left;
  backdrop-filter: blur(6px);
}
.lobby-stamina > span, .lobby-progress > span { grid-row: 1 / 3; color: #ff8fa6; font-size: 22px; }
.lobby-progress > span { color: #ffd85d; }
.lobby-stamina b, .lobby-progress b { font-size: 14px; line-height: 1; }
.lobby-stamina small, .lobby-progress small { color: #d9daf0; font-size: 9px; white-space: nowrap; }

.lobby-brand { align-self: start; margin-top: 22px; text-shadow: 0 2px 0 white, 0 5px 16px rgb(58 47 88 / 16%); }
.lobby-brand .eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  padding: 7px 17px;
  border-radius: 999px;
  background: rgb(45 50 92 / 78%);
  color: #fff4be;
  letter-spacing: .08em;
  text-shadow: none;
}
.lobby-brand h1 { color: #30345e; font-size: clamp(37px, 9vw, 52px); line-height: 1.08; }
.lobby-brand > p:last-child { margin: 9px 0 0; color: #565b7e; font-size: 14px; font-weight: 800; }

.lobby-stage { position: relative; min-height: 180px; overflow: visible; }
.mascot-ensemble {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}
.lobby-ensemble {
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 9px rgb(45 38 73 / 22%));
  transform: translateX(-50%);
  animation: ensemble-breathe 2.8s ease-in-out infinite alternate;
}
@keyframes ensemble-breathe { to { transform: translateX(-50%) translateY(-4px) scale(1.01); } }

.lobby-controls { align-self: end; display: grid; gap: 10px; }
.lobby-primary {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 78px;
  padding: 10px 54px 11px 24px;
  border: 3px solid #fff2b4;
  border-radius: 30px;
  background: linear-gradient(135deg, #ff708b, #ff9b72 58%, #ffc555);
  color: #fffaf0;
  box-shadow: 0 8px 0 #c94e69, 0 12px 24px rgb(93 55 90 / 24%);
  cursor: pointer;
  text-shadow: 0 2px 0 rgb(129 49 77 / 32%);
  animation: primary-breathe 1.8s ease-in-out infinite alternate;
}
.lobby-primary small { font-size: 10px; font-weight: 800; opacity: .9; }
.lobby-primary b { font-size: 23px; line-height: 1.2; }
.lobby-primary span { position: absolute; right: 24px; top: 18px; font-size: 36px; }
@keyframes primary-breathe { to { filter: saturate(1.08) brightness(1.04); transform: scale(1.012); } }
.lobby-primary:active { transform: translateY(4px); box-shadow: 0 4px 0 #c94e69; }

.lobby-secondary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lobby-secondary button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 55px;
  border: 2px solid #fff4ca;
  border-radius: 20px;
  background: rgb(47 53 94 / 88%);
  color: #fffbe8;
  box-shadow: 0 5px 0 rgb(41 44 80 / 45%);
  font-weight: 900;
}
.lobby-secondary span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #ffd55b; color: #34375f; font-size: 16px; }
.lobby-record { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 38px; padding: 6px 12px; border-radius: 999px; background: rgb(45 49 87 / 76%); color: #fff3ba; font-size: 11px; }
.lobby-record > span { color: #ffd45e; letter-spacing: -1px; }
.lobby-record small { color: #d7d8ed; }

.panel-overlay, .result-overlay { background: linear-gradient(rgb(48 45 80 / 26%), rgb(52 45 80 / 56%)); }
.panel-card { width: min(94%, 470px); max-height: 92%; padding: 24px 20px 22px; text-align: left; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.panel-heading h1 { font-size: 31px; }
.panel-close { flex: 0 0 42px; width: 42px; height: 42px; border: 2px solid #313760; border-radius: 50%; background: #fff4dc; color: #313760; font-size: 26px; font-weight: 900; }
.panel-copy { margin: 10px 4px 14px; color: #70748f; font-size: 12px; font-weight: 700; line-height: 1.6; }
.panel-primary { width: 100%; padding: 13px; border: 2px solid #313760; border-radius: 999px; background: linear-gradient(135deg, #ff8da1, #ffc85c); color: #313760; box-shadow: 0 4px 0 #313760; font-weight: 900; }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 18px 0; }
.guide-grid > div { min-height: 120px; padding: 12px; border: 2px dashed rgb(49 55 96 / 24%); border-radius: 18px; background: rgb(244 237 255 / 70%); text-align: center; }
.guide-grid span { display: block; color: #ef718c; font-size: 28px; }
.guide-grid b { display: block; margin: 4px 0; font-size: 13px; }
.guide-grid small { color: #72768f; font-size: 10px; line-height: 1.45; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 0; padding: 16px; border-radius: 18px; background: #f3edff; }
.setting-row div { display: grid; gap: 4px; }
.setting-row small { color: #777b95; font-size: 10px; }
.setting-row button, .setting-row > span { padding: 9px 13px; border: 0; border-radius: 999px; background: #313760; color: white; font-size: 11px; font-weight: 900; white-space: nowrap; }
.setting-row.test-setting { align-items: stretch; flex-direction: column; background: #fff0ef; }
.setting-row.test-setting .test-reset-button { width: 100%; padding: 11px 14px; background: #c94f67; box-shadow: inset 0 -2px 0 rgb(91 33 52 / 28%); }

/* Creation spark: a three-pigment flower, deliberately unlike rating stars. */
.creation-spark-icon { position: relative; display: inline-block; width: 1.65em; height: 1.65em; flex: 0 0 auto; vertical-align: middle; filter: drop-shadow(0 2px 1px rgb(49 55 96 / 18%)); }
.spark-petal { position: absolute; top: 8%; left: 36%; width: 28%; height: 48%; border-radius: 55% 55% 48% 48%; transform-origin: 50% 88%; }
.spark-petal.coral { background: #ff8297; transform: rotate(-120deg); }
.spark-petal.sun { background: #ffd153; transform: rotate(0deg); }
.spark-petal.wave { background: #55cfe2; transform: rotate(120deg); }
.spark-center { position: absolute; top: 39%; left: 39%; width: 22%; height: 22%; border: 1.5px solid #343a61; border-radius: 50%; background: #fffaf0; }
.goal-emblem .creation-spark-icon { width: 42px; height: 42px; font-size: 16px; }
.unlimited-mark { display: grid; place-items: center; color: #fff8d6; font-size: 31px; font-weight: 1000; line-height: 1; }


/* Contextual tutorial spotlight. */
.tutorial-layer { position: absolute; z-index: 11; inset: 0; overflow: hidden; }
.tutorial-layer.modal { display: grid; place-items: center; padding: 22px; background: rgb(35 37 70 / 62%); pointer-events: auto; }
.tutorial-layer.spotlight-mode { pointer-events: none; }
.tutorial-shade { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tutorial-shade-fill { fill: rgb(31 33 65 / 58%); }
.tutorial-spotlight { position: absolute; z-index: 1; border: 2px solid rgb(255 242 178 / 82%); border-radius: 22px; box-shadow: 0 0 0 4px rgb(255 223 121 / 12%), 0 0 12px rgb(255 245 189 / 38%); animation: spotlight-pulse 2.4s ease-in-out infinite alternate; }
.tutorial-emphases { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.tutorial-emphasis { position: absolute; border: 3px solid rgb(255 239 142 / 92%); border-radius: 18px; background: rgb(255 246 174 / 12%); box-shadow: 0 0 0 3px rgb(255 224 112 / 14%), 0 0 16px rgb(255 245 189 / 42%), inset 0 0 9px rgb(255 251 220 / 18%); animation: destination-pulse 2.2s ease-in-out infinite alternate; }
.tutorial-destinations { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.tutorial-destination { position: absolute; z-index: 2; border: 3px dashed rgb(255 241 166 / 94%); border-radius: 20px; background: rgb(255 246 174 / 14%); box-shadow: 0 0 0 3px rgb(255 224 112 / 14%), 0 0 16px rgb(255 245 189 / 42%), inset 0 0 9px rgb(255 251 220 / 18%); animation: destination-pulse 2.2s ease-in-out infinite alternate; }
.tutorial-ink { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tutorial-ink-path { fill: none; stroke: rgb(64 57 101 / 72%); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 1px 1px rgb(255 255 255 / 35%)); }
@keyframes spotlight-pulse { to { border-color: rgb(255 251 226 / 94%); box-shadow: 0 0 0 5px rgb(255 223 121 / 10%), 0 0 14px rgb(255 245 189 / 34%); } }
@keyframes destination-pulse { to { transform: scale(1.025); border-color: rgb(255 251 226 / 94%); } }
@media (prefers-reduced-motion: reduce) {
  .lobby-ensemble, .tutorial-spotlight, .tutorial-emphasis, .tutorial-destination,
  .tutorial-layer .tutorial-hand, .tutorial-layer .tutorial-callout .tutorial-guide-mascot { animation: none; }
  .tutorial-ink { display: none; }
  .tutorial-layer .tutorial-hand {
    transform: translate(calc(var(--hand-to-x) - var(--pointer-half-width)), calc(var(--hand-to-y) - var(--pointer-tip-y)));
    opacity: 1;
  }
}
.tutorial-callout { position: absolute; z-index: 3; top: max(58px, env(safe-area-inset-top)); left: 6%; right: 6%; padding: 16px 18px 13px; border: 3px solid #313760; border-radius: 22px; background: rgb(255 251 238 / 97%); color: #313760; box-shadow: 0 8px 0 rgb(49 55 96 / 28%), 0 18px 40px rgb(24 25 54 / 30%); text-align: center; pointer-events: none; }
.tutorial-layer.modal .tutorial-callout { position: relative; inset: auto; width: min(94%, 410px); padding: 24px 22px 18px; pointer-events: auto; }
.tutorial-callout.below { top: auto; bottom: max(68px, calc(env(safe-area-inset-bottom) + 58px)); }
.tutorial-progress { display: inline-block; margin-bottom: 5px; padding: 4px 10px; border-radius: 999px; background: #eee7ff; color: #7860a4; font-size: 10px; font-weight: 900; }
.tutorial-callout h2 { margin: 0; color: #34385f; font-size: 22px; }
.tutorial-callout p { margin: 8px 0 10px; color: #626783; font-size: 13px; font-weight: 700; line-height: 1.55; }
.tutorial-continue { min-width: 155px; padding: 11px 20px; border: 2px solid #313760; border-radius: 999px; background: linear-gradient(135deg, #ff829b, #ffc95b); color: #313760; box-shadow: 0 4px 0 #313760; font-weight: 900; pointer-events: auto; }
.tutorial-skip { display: block; margin: 10px auto 0; padding: 4px 8px; border: 0; background: transparent; color: #8c8fa2; font-size: 10px; font-weight: 700; text-decoration: underline; pointer-events: auto; }
.tutorial-callout > :not(.tutorial-guide-mascot) { position: relative; z-index: 1; }
.tutorial-guide-mascot {
  position: absolute;
  z-index: 0;
  left: -15px;
  bottom: -52px;
  width: 94px;
  height: 94px;
  background: url("../assets/resources/art/characters/tutorial-guide-sprout.png") 0 0 / 400% 200% no-repeat;
  filter: drop-shadow(0 5px 4px rgb(38 35 68 / 24%));
  pointer-events: none;
  animation: tutorial-guide-idle .8s steps(1, end) infinite;
}
.tutorial-callout.below .tutorial-guide-mascot { top: -76px; bottom: auto; }
.tutorial-callout.mascot-right .tutorial-guide-mascot { left: auto; right: -15px; }
@keyframes tutorial-guide-idle {
  0%, 12.49% { background-position: 0 0; }
  12.5%, 24.99% { background-position: 33.333% 0; }
  25%, 37.49% { background-position: 66.667% 0; }
  37.5%, 49.99% { background-position: 100% 0; }
  50%, 62.49% { background-position: 0 100%; }
  62.5%, 74.99% { background-position: 33.333% 100%; }
  75%, 87.49% { background-position: 66.667% 100%; }
  87.5%, 100% { background-position: 100% 100%; }
}
.tutorial-callout.nudge { animation: tutorial-nudge 360ms ease; }
@keyframes tutorial-nudge { 25% { transform: translateX(-7px); } 55% { transform: translateX(7px); } 80% { transform: translateX(-3px); } }
.tutorial-hand { --hand-from-x: 0px; --hand-from-y: 0px; --hand-to-x: 0px; --hand-to-y: 0px; --pointer-half-width: 24px; --pointer-tip-y: 96px; position: absolute; z-index: 4; left: 0; top: 0; width: 48px; height: 96px; transform-origin: 50% 100%; pointer-events: none; filter: drop-shadow(0 4px 3px rgb(35 35 69 / 40%)); }
.tutorial-hand img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }

@media (max-width: 360px), (max-height: 650px) {
  .lobby-card { grid-template-rows: auto auto minmax(126px, 1fr) auto; padding: 10px 14px 9px; }
  .lobby-topbar { padding-right: 42px; }
  .lobby-stamina, .lobby-progress { min-width: 103px; padding: 4px 8px; }
  .lobby-brand { margin-top: 8px; }
  .lobby-brand .eyebrow { margin-bottom: 3px; padding: 4px 10px; font-size: 8px; }
  .lobby-brand h1 { font-size: 30px; }
  .lobby-brand > p:last-child { margin-top: 4px; font-size: 10px; }
  .lobby-controls { gap: 6px; }
  .lobby-primary { min-height: 58px; border-radius: 24px; box-shadow: 0 5px 0 #c94e69; }
  .lobby-primary b { font-size: 18px; }
  .lobby-primary span { top: 9px; }
  .lobby-secondary button { min-height: 43px; border-radius: 17px; font-size: 11px; }
  .lobby-secondary span { width: 21px; height: 21px; font-size: 13px; }
  .lobby-record { min-height: 28px; padding: 3px 8px; font-size: 9px; }
  .tutorial-callout { left: 4%; right: 4%; padding: 11px 12px 9px; }
  .tutorial-callout h2 { font-size: 17px; }
  .tutorial-callout p { margin: 5px 0 7px; font-size: 10px; }
  .tutorial-skip { margin-top: 5px; }
  .tutorial-guide-mascot { left: -8px; bottom: -42px; width: 76px; height: 76px; }
  .tutorial-callout.mascot-right .tutorial-guide-mascot { left: auto; right: -8px; }
  .tutorial-callout.below .tutorial-guide-mascot { top: -61px; }
  .tutorial-hand { --pointer-half-width: 20px; --pointer-tip-y: 80px; width: 40px; height: 80px; }
}

/* Generated-art campaign map: environment art stays separate from live level data. */
.ui-art { display: block; width: 44px; height: 44px; object-fit: contain; }
.map-overlay { place-items: stretch; padding: 0; background: #f6e7cf; }
.map-card {
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.campaign-screen { position: relative; width: 100%; height: 100%; overflow: hidden; }
.campaign-topbar {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 42px;
  gap: 5px;
  padding: max(9px, env(safe-area-inset-top)) 10px 15px;
  background: linear-gradient(180deg, rgb(38 43 79 / 86%), rgb(38 43 79 / 54%) 70%, transparent);
}
.campaign-resource {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  padding: 4px 5px;
  border: 2px solid rgb(255 255 255 / 64%);
  border-radius: 18px;
  background: rgb(255 250 232 / 92%);
  box-shadow: 0 4px 0 rgb(45 49 86 / 22%);
  color: #313760;
}
.campaign-resource .ui-art { width: 32px; height: 32px; }
.campaign-resource span { display: grid; min-width: 0; }
.campaign-resource b { overflow: hidden; font-size: 12px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.campaign-resource small { overflow: hidden; color: #787b96; font-size: 7px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.campaign-unlimited .unlimited-mark { color: #df6682; font-size: 28px; }
.map-close {
  width: 42px;
  height: 42px;
  border: 2px solid #fff3bf;
  border-radius: 50%;
  background: #34395f;
  color: white;
  box-shadow: 0 4px 0 rgb(28 31 59 / 45%);
  font-size: 20px;
  font-weight: 900;
}
.campaign-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.campaign-scroll::-webkit-scrollbar { display: none; }
.campaign-world {
  position: relative;
  width: 100%;
  min-height: 100%;
  background-color: #f7e8cf;
  background-image:
    linear-gradient(180deg, rgb(255 248 226 / 10%), rgb(48 43 79 / 8%)),
    url("../assets/resources/art/backgrounds/campaign-map-bg.jpg");
  background-position: center top, center top;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat;
}
.campaign-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.campaign-route polyline {
  fill: none;
  stroke: rgb(255 252 225 / 80%);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3 14;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 3px 0 rgb(64 64 106 / 20%));
}
.campaign-node {
  --node-x: 50%;
  --node-y: 50px;
  position: absolute;
  z-index: 2;
  top: var(--node-y);
  left: var(--node-x);
  width: 78px;
  height: 88px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  color: #30365d;
  filter: drop-shadow(0 6px 5px rgb(52 49 80 / 24%));
}
.campaign-node-art { position: absolute; top: 0; left: 4px; width: 70px; height: 70px; object-fit: contain; }
.campaign-node > b { position: absolute; top: 23px; left: 0; width: 78px; color: #30365d; font-size: 20px; line-height: 1; text-align: center; text-shadow: 0 2px 0 white; }
.campaign-node > small { position: absolute; bottom: 0; left: -10px; width: 98px; color: #fff8d6; font-size: 11px; font-weight: 900; letter-spacing: -1px; text-align: center; text-shadow: -1px -1px 0 #5b5275, 1px -1px 0 #5b5275, -1px 1px 0 #5b5275, 1px 1px 0 #5b5275; }
.campaign-node.current { z-index: 3; animation: map-node-pulse 1.2s ease-in-out infinite alternate; }
.campaign-node.current > b { color: #9b3e59; font-size: 23px; }
.campaign-node.locked { opacity: .84; filter: grayscale(.55) drop-shadow(0 4px 4px rgb(52 49 80 / 18%)); }
.campaign-node.locked > small { display: none; }
.campaign-node.difficulty-hard:not(.locked)::after, .campaign-node.difficulty-final:not(.locked)::after {
  content: "困难";
  position: absolute;
  top: -2px;
  right: -11px;
  padding: 3px 6px;
  border-radius: 9px;
  background: #7861a6;
  color: white;
  font-size: 8px;
  font-weight: 900;
}
.campaign-node.difficulty-final:not(.locked)::after { content: "最终"; background: #dc667d; }
@keyframes map-node-pulse { to { transform: translate(-50%, -50%) scale(1.09); filter: drop-shadow(0 0 14px #fff2a1) drop-shadow(0 7px 5px rgb(52 49 80 / 26%)); } }
.campaign-footer {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 7px;
  padding: 28px 12px max(8px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgb(44 44 78 / 70%) 22%, rgb(43 43 76 / 94%));
}
.map-primary {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 64px;
  padding: 8px 52px 9px 20px;
  border: 3px solid #fff1ae;
  border-radius: 28px;
  background: linear-gradient(135deg, #ff6f8c, #ff9c71 58%, #ffca54);
  color: #fffaf0;
  box-shadow: 0 7px 0 #b94d68, 0 11px 23px rgb(50 38 70 / 30%);
  text-shadow: 0 2px 0 rgb(122 46 70 / 32%);
}
.map-primary small { font-size: 9px; font-weight: 800; }
.map-primary b { font-size: 21px; line-height: 1.2; }
.map-primary > span { position: absolute; top: 11px; right: 22px; font-size: 34px; }
.map-dock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.map-dock button { display: grid; grid-template-columns: 27px auto; place-items: center; min-height: 39px; padding: 3px 5px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 16px; background: rgb(255 255 255 / 12%); color: #fff7d6; font-size: 10px; font-weight: 900; }
.map-dock button.active { background: rgb(255 213 89 / 24%); border-color: #ffe98e; }
.map-dock span { font-size: 18px; }
.map-dock .ui-art { width: 27px; height: 27px; }

/* Pre-level composition: live goals and powers over generated artwork. */
.prelevel-overlay {
  background:
    linear-gradient(rgb(42 41 75 / 38%), rgb(42 41 75 / 66%)),
    url("../assets/resources/art/backgrounds/campaign-map-bg.jpg") center / cover no-repeat;
}
.prelevel-card {
  position: relative;
  width: min(93%, 456px);
  max-height: 94%;
  padding: 34px 20px 22px;
  overflow: auto;
  border: 4px solid #4f5c8e;
  border-radius: 34px 29px 38px 30px;
  background: linear-gradient(180deg, rgb(255 253 235 / 98%), rgb(246 237 255 / 98%));
  box-shadow: 0 9px 0 rgb(37 42 76 / 34%), 0 28px 70px rgb(25 27 54 / 38%), inset 0 0 0 5px rgb(255 255 255 / 60%);
  text-align: center;
}
.prelevel-close { position: absolute; z-index: 2; top: 13px; right: 13px; }
.prelevel-ribbon { display: inline-grid; gap: 1px; min-width: 150px; margin: -35px auto 8px; padding: 8px 24px 7px; border: 3px solid #313760; border-radius: 7px 7px 20px 20px; background: linear-gradient(135deg, #ff8ba0, #ffc65b); color: #313760; box-shadow: 0 4px 0 rgb(49 55 96 / 25%); }
.prelevel-ribbon span { font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.prelevel-ribbon b { font-size: 19px; }
.prelevel-card > h1 { color: #333960; font-size: 31px; }
.prelevel-card > h2 { margin: 14px 0 9px; color: #616685; font-size: 14px; }
.prelevel-goal { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 9px; margin: 14px 0 11px; padding: 12px; border-radius: 22px; background: linear-gradient(135deg, #fff0d1, #fff8e7); text-align: left; box-shadow: inset 0 0 0 2px rgb(214 160 75 / 14%); }
.goal-emblem { display: grid; place-items: center; width: 56px; height: 56px; border: 3px solid #313760; border-radius: 18px; background: linear-gradient(135deg, #ff8d9f, #ffcf61); color: white; font-size: 31px; font-weight: 900; text-shadow: 0 2px 0 #bb5872; }
.prelevel-goal > span { display: grid; gap: 3px; }
.prelevel-goal > span small { color: #9b6d62; font-size: 9px; font-weight: 900; }
.prelevel-goal > span b { color: #423e61; font-size: 16px; }
.goal-stars .result-stars { margin: 0; gap: 0; }
.goal-stars .result-stars span { width: 22px; height: 22px; }
.goal-stars .result-stars .ui-art { width: 22px; height: 22px; }
.prelevel-mechanic { padding: 12px 14px; border: 2px dashed rgb(100 83 146 / 26%); border-radius: 18px; background: rgb(239 229 255 / 74%); text-align: left; }
.prelevel-mechanic small { display: block; color: #e36782; font-size: 9px; font-weight: 900; letter-spacing: .07em; }
.prelevel-mechanic b { display: block; margin-top: 4px; color: #4e4971; font-size: 15px; }
.prelevel-mechanic p { margin: 4px 0 0; color: #777994; font-size: 10px; font-weight: 700; line-height: 1.45; }
.prelevel-powers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.prelevel-power { position: relative; display: grid; place-items: center; min-width: 0; padding: 7px 4px 8px; border: 2px solid rgb(49 55 96 / 16%); border-radius: 18px; background: #fff9e9; }
.prelevel-power .ui-art { width: 51px; height: 51px; }
.prelevel-power b { overflow: hidden; max-width: 100%; color: #4a4f72; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.prelevel-power small { margin-top: 3px; color: #df627d; font-size: 8px; font-weight: 900; }
.prelevel-power.locked { filter: grayscale(.75); opacity: .48; }
.prelevel-record { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0; padding: 8px 12px; border-radius: 999px; background: rgb(54 59 98 / 8%); color: #747791; font-size: 9px; }
.prelevel-record b { color: #42486d; }
.prelevel-start { position: relative; display: grid; grid-template-columns: 48px 1fr 28px; align-items: center; width: 100%; min-height: 65px; padding: 7px 17px 8px 11px; border: 3px solid #fff0a7; border-radius: 26px; background: linear-gradient(135deg, #ff708d, #ffa16f 60%, #ffca51); color: white; box-shadow: 0 7px 0 #bd4d69, 0 10px 20px rgb(74 47 87 / 25%); text-shadow: 0 2px 0 rgb(126 45 72 / 28%); }
.prelevel-start .ui-art { width: 46px; height: 46px; }
.prelevel-start > span { display: grid; }
.prelevel-start small { font-size: 9px; font-weight: 800; }
.prelevel-start b { font-size: 21px; }
.prelevel-start strong { font-size: 32px; }

/* Result composition keeps the board visible behind a celebration card. */
.result-overlay { padding: 18px; background: linear-gradient(rgb(26 28 58 / 56%), rgb(28 27 55 / 76%)); }
.result-card { width: min(94%, 450px); max-height: 94%; padding: 17px 20px 18px; overflow-x: hidden; overflow-y: auto; border: 4px solid #536292; border-radius: 34px; background: linear-gradient(180deg, #fffce7, #f3edff); box-shadow: 0 9px 0 rgb(25 30 61 / 38%), 0 28px 70px rgb(20 22 50 / 48%), inset 0 0 0 5px rgb(255 255 255 / 52%); }
.result-celebration { position: relative; height: 151px; margin: -4px -10px 3px; }
.result-ensemble { top: -2px; left: 50%; width: min(100%, 400px); height: 104px; object-fit: contain; object-position: center top; filter: drop-shadow(0 6px 5px rgb(45 39 75 / 18%)); transform: translateX(-50%); }
.result-celebration .eyebrow { position: absolute; z-index: 2; top: 101px; left: 0; right: 0; margin: 0; color: #e6677f; text-shadow: 0 2px white; }
.result-celebration h1 { position: absolute; z-index: 2; top: 115px; left: 0; right: 0; color: #33385f; font-size: 33px; text-shadow: 0 3px white; }
.result-celebration.lost .result-ensemble { filter: grayscale(.45) drop-shadow(0 6px 5px rgb(45 39 75 / 18%)); }
.result-level-chip { display: inline-block; padding: 5px 13px; border-radius: 999px; background: #eee6ff; color: #66528f; font-size: 10px; font-weight: 900; }
.result-stars { align-items: center; min-height: 53px; }
.result-stars span { display: block; width: 49px; height: 49px; opacity: .22; filter: grayscale(1); transform: scale(.84); }
.result-stars span .ui-art { width: 49px; height: 49px; }
.result-stars span.on { opacity: 1; filter: none; transform: scale(1.04); }
.result-score { display: grid; gap: 2px; margin: 2px auto 12px; }
.result-score small { color: #8a849a; font-size: 10px; font-weight: 900; }
.result-score b { color: #33395f; font-size: 35px; line-height: 1; }
.result-score span { color: #777b96; font-size: 10px; font-weight: 800; }
.result-goal { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.result-goal .creation-spark-icon { width: 20px; height: 20px; }
.result-goal strong { color: #444968; font-size: 12px; }
.result-tip { margin: 10px 0 16px; color: #747791; font-size: 11px; font-weight: 700; }
.result-actions { display: grid; grid-template-columns: .78fr 1.22fr; gap: 8px; }
.result-actions button { min-height: 49px; border: 2px solid #313760; border-radius: 21px; background: #eee7ff; color: #313760; box-shadow: 0 5px 0 #313760; font-weight: 900; }
.result-actions .primary { position: relative; background: linear-gradient(135deg, #ff7a92, #ffc65d); font-size: 17px; }
.result-actions .primary span { position: absolute; right: 15px; font-size: 25px; }
.result-home { margin-top: 11px; border: 0; background: transparent; color: #89899c; font-size: 10px; font-weight: 800; text-decoration: underline; }

@media (max-width: 360px), (max-height: 650px) {
  .campaign-topbar { grid-template-columns: repeat(3, minmax(0, 1fr)) 36px; padding: max(6px, env(safe-area-inset-top)) 7px 11px; }
  .campaign-resource { grid-template-columns: 26px minmax(0, 1fr); padding: 2px 3px; border-radius: 15px; }
  .campaign-resource .ui-art { width: 26px; height: 26px; }
  .campaign-resource b { font-size: 10px; }
  .campaign-resource small { display: none; }
  .map-close { width: 36px; height: 36px; }
  .campaign-footer { gap: 5px; padding: 20px 8px max(5px, env(safe-area-inset-bottom)); }
  .map-primary { min-height: 52px; border-radius: 23px; }
  .map-primary b { font-size: 17px; }
  .map-primary > span { top: 4px; }
  .map-dock button { min-height: 33px; grid-template-columns: 22px auto; font-size: 9px; }
  .map-dock .ui-art { width: 22px; height: 22px; }
  .prelevel-card { padding: 26px 14px 15px; border-radius: 27px; }
  .prelevel-ribbon { margin-top: -27px; padding: 5px 18px; }
  .prelevel-card > h1 { font-size: 24px; }
  .prelevel-goal { grid-template-columns: 46px 1fr auto; margin: 8px 0; padding: 7px; }
  .goal-emblem { width: 44px; height: 44px; border-radius: 15px; font-size: 25px; }
  .prelevel-goal > span b { font-size: 13px; }
  .prelevel-mechanic { padding: 8px 10px; }
  .prelevel-mechanic p { display: none; }
  .prelevel-card > h2 { margin: 8px 0 5px; }
  .prelevel-power { padding: 4px 2px 5px; }
  .prelevel-power .ui-art { width: 39px; height: 39px; }
  .prelevel-record { margin: 7px 0; padding: 6px 9px; }
  .prelevel-start { min-height: 53px; }
  .prelevel-start .ui-art { width: 38px; height: 38px; }
  .prelevel-start b { font-size: 17px; }
  .result-card { padding: 12px 15px 13px; }
  .result-celebration { height: 112px; }
  .result-ensemble { height: 72px; }
  .result-celebration .eyebrow { top: 68px; font-size: 8px; }
  .result-celebration h1 { top: 78px; font-size: 25px; }
  .result-stars { min-height: 42px; margin: 5px 0; }
  .result-stars span, .result-stars span .ui-art { width: 39px; height: 39px; }
  .result-score b { font-size: 28px; }
  .result-tip { margin: 6px 0 9px; }
}

/* Atelier UI v2: one visual system for every screen. */
:root {
  --ui-ink: #29345f;
  --ui-ink-soft: #5f6788;
  --ui-coral: #f56f87;
  --ui-honey: #ffc75a;
  --ui-aqua: #49c8c9;
  --ui-lilac: #eee6fb;
  --ui-paper: #fffaf0;
  --ui-line: rgb(41 52 95 / 18%);
  --ui-shadow: 0 8px 0 rgb(41 52 95 / 13%), 0 20px 48px rgb(35 39 76 / 20%);
  --ui-touch-min: 44px;
  --ui-surface-texture: url("../assets/resources/art/ui/ui-paper-surface-v2.jpg");
}

html, body {
  background: linear-gradient(135deg, #f1e6dc, #dcecee);
}

#game-shell {
  background: #fff8ea url("../assets/resources/art/backgrounds/studio-bg-v2.jpg") center / cover no-repeat;
  color: var(--ui-ink);
}

button {
  min-width: var(--ui-touch-min);
  min-height: var(--ui-touch-min);
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

button:not(:disabled):active { transform: translateY(2px) scale(.985); }
button:disabled { cursor: default; }
button:focus-visible {
  outline: 3px solid #32bfc7;
  outline-offset: 3px;
}

.ui-v2-panel:not(.lobby-card, .map-card) {
  border: 2px solid rgb(41 52 95 / 78%);
  background:
    linear-gradient(rgb(255 252 244 / 88%), rgb(255 249 237 / 92%)),
    var(--ui-surface-texture) center / cover;
  box-shadow: var(--ui-shadow), inset 0 0 0 4px rgb(255 255 255 / 58%);
}

.ui-v2-primary {
  border-color: #35406d !important;
  background: linear-gradient(125deg, var(--ui-coral), #ff9d78 56%, var(--ui-honey)) !important;
  color: #fff !important;
  box-shadow: 0 6px 0 #a94864, 0 12px 22px rgb(91 54 92 / 22%) !important;
  text-shadow: 0 1px 0 rgb(107 43 65 / 35%);
}

.ui-v2-statusbar {
  border: 1px solid rgb(255 255 255 / 76%);
  background:
    linear-gradient(rgb(255 252 242 / 88%), rgb(255 248 235 / 90%)),
    var(--ui-surface-texture) center / cover;
  box-shadow: 0 6px 18px rgb(38 43 79 / 14%);
  backdrop-filter: blur(8px);
}

.overlay:not(.lobby-overlay, .map-overlay) {
  background:
    linear-gradient(rgb(35 40 75 / 34%), rgb(31 34 68 / 58%)),
    url("../assets/resources/art/backgrounds/studio-bg-v2.jpg") center / cover no-repeat;
}

.lobby-overlay {
  background:
    linear-gradient(180deg, rgb(38 45 80 / 5%) 0 56%, rgb(39 42 78 / 48%) 100%),
    url("../assets/resources/art/backgrounds/studio-bg-v2.jpg") center / cover no-repeat;
}

.lobby-card {
  grid-template-rows: auto auto minmax(170px, 1fr) auto;
  padding: max(14px, env(safe-area-inset-top)) 18px max(12px, env(safe-area-inset-bottom));
}

.lobby-topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 6px;
  border-radius: 22px;
}

.lobby-status-copy,
.lobby-progress {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  padding: 3px 9px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  text-align: left;
}

.lobby-status-copy > span:last-child,
.lobby-progress > span:last-child { display: grid; min-width: 0; }
.lobby-status-copy .unlimited-mark { color: #dc5e7b; font-size: 29px; text-align: center; }
.lobby-status-copy b, .lobby-progress b { color: var(--ui-ink); font-size: 12px; line-height: 1.1; }
.lobby-status-copy small, .lobby-progress small { color: var(--ui-ink-soft); font-size: 8px; }
.lobby-progress { grid-template-columns: 30px minmax(0, 1fr); border-left: 1px solid var(--ui-line); }
.lobby-progress .ui-art { width: 29px; height: 29px; }

.lobby-brand { padding-top: 16px; }
.lobby-brand .eyebrow {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(45 53 94 / 84%);
  color: #fff8df;
  letter-spacing: .08em;
}
.lobby-brand h1 { margin-top: 9px; color: var(--ui-ink); text-shadow: 0 3px 0 rgb(255 255 255 / 70%); }
.lobby-brand > p:last-child { color: #4f587c; }
.lobby-stage { min-height: 215px; }

.lobby-controls { gap: 9px; }
.lobby-primary { min-height: 72px; border-radius: 26px; }
.lobby-secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.lobby-secondary button {
  min-width: 0;
  min-height: 50px;
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 18px;
  background:
    linear-gradient(rgb(45 53 94 / 88%), rgb(45 48 87 / 94%)),
    var(--ui-surface-texture) center / cover;
  box-shadow: 0 4px 0 rgb(28 32 66 / 48%);
}
.lobby-record { margin-top: 0; background: rgb(41 47 83 / 76%); }

.campaign-topbar {
  grid-template-columns: var(--ui-touch-min) repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: max(8px, env(safe-area-inset-top)) 10px 0;
  padding: 6px;
  border-radius: 22px;
}
.campaign-resource {
  grid-template-columns: 28px minmax(0, 1fr);
  padding: 2px 5px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.campaign-resource + .campaign-resource { border-left: 1px solid var(--ui-line); }
.campaign-resource .ui-art { width: 28px; height: 28px; }
.map-close { position: static; width: var(--ui-touch-min); height: var(--ui-touch-min); }
.campaign-world {
  background:
    linear-gradient(rgb(255 252 238 / 4%), rgb(255 247 226 / 10%)),
    url("../assets/resources/art/backgrounds/campaign-map-bg-v2.jpg") center top / 100% 100% no-repeat;
}
.campaign-route { opacity: .46; }
.campaign-footer { gap: 7px; padding-inline: 10px; }
.map-primary { min-height: 64px; border-radius: 25px; }
.map-dock { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.map-dock button {
  grid-template-columns: 25px auto;
  min-width: 0;
  min-height: 44px;
  border-radius: 16px;
  background: rgb(42 49 89 / 88%);
}

.prelevel-overlay {
  background:
    linear-gradient(rgb(40 43 78 / 36%), rgb(37 38 73 / 58%)),
    url("../assets/resources/art/backgrounds/studio-bg-v2.jpg") center / cover no-repeat;
}
.prelevel-card { overflow-x: hidden; overflow-y: auto; border-radius: 30px; scrollbar-width: none; }
.prelevel-card::-webkit-scrollbar { display: none; }
.prelevel-ribbon { border-width: 2px; box-shadow: 0 4px 0 rgb(49 55 96 / 18%); }
.prelevel-goal,
.prelevel-mechanic,
.prelevel-power,
.setting-row,
.guide-grid > div,
.tutorial-callout {
  background:
    linear-gradient(rgb(255 252 242 / 80%), rgb(255 249 238 / 84%)),
    var(--ui-surface-texture) center / cover;
  border-color: var(--ui-line);
}
.prelevel-mechanic { border-left: 5px solid #a98cda; border-style: solid; }
.prelevel-power.locked { opacity: .56; }
.prelevel-start { position: sticky; z-index: 3; bottom: 0; }

.panel-card, .result-card { scrollbar-width: none; }
.panel-card::-webkit-scrollbar, .result-card::-webkit-scrollbar { display: none; }
.panel-card { border-radius: 30px; }
.panel-heading { padding-bottom: 12px; border-bottom: 1px solid var(--ui-line); }
.panel-heading h1 { color: var(--ui-ink); }
.panel-close { width: var(--ui-touch-min); height: var(--ui-touch-min); background: #fff8e8; }
.panel-primary { min-height: 52px; }
.setting-row { border: 1px solid var(--ui-line); }

.icon-button {
  width: var(--ui-touch-min);
  height: var(--ui-touch-min);
  background:
    linear-gradient(rgb(255 252 242 / 90%), rgb(255 248 234 / 92%)),
    var(--ui-surface-texture) center / cover;
}
#power-bar {
  border: 1px solid rgb(255 255 255 / 78%);
  background:
    linear-gradient(rgb(255 252 243 / 92%), rgb(248 242 232 / 94%)),
    var(--ui-surface-texture) center / cover;
}
#power-bar button { min-height: var(--ui-touch-min); }
#toast { border: 1px solid rgb(255 255 255 / 22%); box-shadow: 0 8px 22px rgb(30 33 67 / 24%); }

.tutorial-callout {
  border-width: 2px;
  box-shadow: var(--ui-shadow);
}
.tutorial-continue { min-height: 48px; }

.result-overlay {
  background:
    linear-gradient(rgb(31 34 67 / 56%), rgb(27 29 61 / 76%)),
    url("../assets/resources/art/backgrounds/studio-bg-v2.jpg") center / cover no-repeat;
}
.result-card { border-width: 2px; }
.result-actions button { min-height: 52px; }
.result-home { min-height: var(--ui-touch-min); }

@media (max-width: 360px), (max-height: 650px) {
  .lobby-card { padding-inline: 12px; }
  .lobby-brand { padding-top: 6px; }
  .lobby-brand h1 { font-size: 29px; }
  .lobby-stage { min-height: 125px; }
  .lobby-topbar { padding: 4px; }
  .lobby-status-copy { grid-template-columns: 29px minmax(0, 1fr); padding-inline: 5px; }
  .lobby-status-copy .unlimited-mark { font-size: 24px; }
  .lobby-status-copy small { display: none; }
  .lobby-secondary button { min-height: 44px; padding-inline: 2px; }
  .campaign-topbar { grid-template-columns: 44px repeat(2, minmax(0, 1fr)); margin-inline: 6px; }
  .campaign-resource small { display: none; }
  .campaign-footer { padding-inline: 7px; }
  .map-dock button { grid-template-columns: 20px auto; padding-inline: 3px; }
  .panel-card { width: 96%; padding-inline: 14px; }
}