@font-face {
  font-family: Quest;
  src: url("assets/outfit-800.ttf");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: Quest;
  src: url("assets/outfit-600.ttf");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: QuestText;
  src: url("assets/dm-sans-500.ttf");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: QuestText;
  src: url("assets/dm-sans-700.ttf");
  font-weight: 700;
  font-display: swap;
}
:root {
  --scene-shade: #092b278c;
  --scene-veil: #14382b88;
  --theme-ink: #49351f;
  --theme-muted: #775a34;
  --frame-hi: #c39759;
  --frame-mid: #9b6b36;
  --frame-low: #765435;
  --paper-hi: #fff0c9;
  --paper-low: #dfc38d;
  --action-hi: #d3e78b;
  --action-mid: #b6d65c;
  --action-low: #97bf44;
  --action-ink: #40562c;
  --ink: #3e2a18;
  --bg: #203e35;
  --parch: #fff0ca;
  --parch2: #e8ce95;
  --gold: #ffd561;
  --gold2: #eeb446;
  --txt: #fff6d7;
  --realm-light: #9ee0b3;
  --outline:
    -2px -2px 0 #402c1b, 2px -2px 0 #402c1b, -2px 2px 0 #402c1b,
    2px 2px 0 #402c1b, 0 4px 0 #402c1b, 0 7px 0 #25372855;
}
:root[data-theme="ocean"] {
  --scene-shade: #073346bb;
  --scene-veil: #073b566b;
  --theme-ink: #173e51;
  --theme-muted: #3c6473;
  --frame-hi: #90c7d2;
  --frame-mid: #508e9e;
  --frame-low: #346579;
  --paper-hi: #e9faf3;
  --paper-low: #b6d9da;
  --action-hi: #aeefdf;
  --action-mid: #61cec2;
  --action-low: #38acaf;
  --action-ink: #164f5b;
}
:root[data-theme="neon"] {
  --scene-shade: #252046ba;
  --scene-veil: #28205765;
  --theme-ink: #362949;
  --theme-muted: #625073;
  --frame-hi: #b8a0da;
  --frame-mid: #8266a8;
  --frame-low: #594575;
  --paper-hi: #f1e9ff;
  --paper-low: #cfc0e6;
  --action-hi: #c2f8ed;
  --action-mid: #87dddf;
  --action-low: #55babf;
  --action-ink: #304c68;
}
:root[data-theme="forest"] {
  --scene-shade: #102d2bc2;
  --scene-veil: #173d396d;
  --theme-ink: #293e2d;
  --theme-muted: #536644;
  --frame-hi: #a5b87c;
  --frame-mid: #71875a;
  --frame-low: #4e6848;
  --paper-hi: #f2efce;
  --paper-low: #c8d2a5;
  --action-hi: #d4e69b;
  --action-mid: #a5cb76;
  --action-low: #7eaa5d;
  --action-ink: #304f36;
}
:root[data-theme="candy"] {
  --scene-shade: #73434ea8;
  --scene-veil: #76505a75;
  --theme-ink: #603947;
  --theme-muted: #855461;
  --frame-hi: #ebb597;
  --frame-mid: #ca887f;
  --frame-low: #a6646d;
  --paper-hi: #fff0da;
  --paper-low: #f3c8c0;
  --action-hi: #ffc5dc;
  --action-mid: #ee96b6;
  --action-low: #d5739b;
  --action-ink: #74374f;
}
:root[data-theme="halloween"] {
  --scene-shade: #21152ec2; --scene-veil: #33204062;
  --theme-ink: #49304e; --theme-muted: #765875;
  --frame-hi: #bc8bba; --frame-mid: #825d87; --frame-low: #51375d;
  --paper-hi: #fff0d8; --paper-low: #dbbec4;
  --action-hi: #ffd084; --action-mid: #f2ad56; --action-low: #d6843e; --action-ink: #643d36;
}
:root[data-theme="christmas"] {
  --scene-shade: #173939ad; --scene-veil: #36595353;
  --theme-ink: #294b40; --theme-muted: #587466;
  --frame-hi: #d9ba75; --frame-mid: #a9844d; --frame-low: #715a37;
  --paper-hi: #fff9e7; --paper-low: #d7e3d5;
  --action-hi: #efa49b; --action-mid: #d97572; --action-low: #b55459; --action-ink: #6b3034;
}
body {
  font-family: QuestText, system-ui, sans-serif;
  background: #162f2d;
  user-select: none;
}
button {
  font: inherit;
  touch-action: manipulation;
}
button:focus-visible {
  outline: 3px solid #fff3a8;
  outline-offset: 5px;
}
button:disabled {
  cursor: default;
}
button[hidden],
[hidden] {
  display: none !important;
}
#app {
  width: min(460px, 100%);
  height: 100dvh;
  max-height: 960px;
  isolation: isolate;
  background: #6e9581;
}
.screen {
  padding: calc(18px + env(safe-area-inset-top)) 22px
    calc(18px + env(safe-area-inset-bottom));
  transition:
    opacity 0.25s,
    transform 0.35s;
  min-height: 0;
}
.screen:not(.active),
.overlay:not(.active) {
  visibility: hidden;
}
#illustratedWorld {
  position: absolute;
  inset: 0;
  background: var(--scene-image) center/cover no-repeat;
  transition:
    filter 0.65s,
    opacity 0.5s;
}
#illustratedWorld .landscape-art {
  display: none;
}
#worldNear { position: absolute; inset: 0; pointer-events: none; }
#worldHaze {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 26% 46%, color-mix(in srgb, var(--realm-light) 14%, transparent), transparent 48%),
    radial-gradient(ellipse at 82% 72%, color-mix(in srgb, var(--scene-shade) 30%, transparent), transparent 45%);
}
.world-props { position: absolute; inset: 0; pointer-events: none; }
.world-prop {
  position: absolute; display: block; aspect-ratio: 1; pointer-events: none;
  background: url('assets/materials/world-props.webp') var(--prop-x, 0%) var(--prop-y, 0%) / 400% 200% no-repeat;
}
:root[data-theme="ocean"] { --prop-x: 33.333333%; }
:root[data-theme="neon"] { --prop-x: 66.666667%; }
:root[data-theme="forest"] { --prop-x: 100%; }
:root[data-theme="candy"] { --prop-y: 100%; }
:root[data-theme="halloween"] { --prop-x: 33.333333%; --prop-y: 100%; }
:root[data-theme="christmas"] { --prop-x: 66.666667%; --prop-y: 100%; }
#worldPropsMiddle { filter: brightness(.78) saturate(.82); opacity: .8; }
#worldPropsMiddle .world-prop-left { width: 44%; left: -26%; top: 23%; transform: rotate(9deg); }
#worldPropsMiddle .world-prop-right { width: 46%; right: -28%; top: 53%; transform: scaleX(-1) rotate(-8deg); }
#worldPropsFront { filter: drop-shadow(5px 12px 9px #07172250); }
#worldPropsFront .world-prop-left { width: 74%; left: -43%; bottom: 4%; transform: rotate(8deg); }
#worldPropsFront .world-prop-right { width: 76%; right: -43%; bottom: -12%; transform: scaleX(-1) rotate(6deg); }
:root[data-theme="forest"] #worldPropsMiddle .world-prop-right {
  --prop-x: 100%; --prop-y: 100%; width: 67%; right: -40%; top: 22%; transform: rotate(-12deg);
}
/* A few nearby pieces of the landscape pass in front of the game's outer
   margins. The panorama stays fixed; nothing is attached to the cube tray. */
#worldPropsEdge { display: none; z-index: 2; clip-path: inset(35% 0 24% 0); }
#app[data-screen="game"] #worldPropsEdge { display: block; }
#worldPropsEdge .world-prop-left { width: 42%; left: -34%; top: 46%; }
#worldPropsEdge .world-prop-right { width: 38%; right: -30%; top: 53%; transform: scaleX(-1); }
#ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    transparent 5%,
    transparent 48%,
    var(--scene-shade) 100%
  );
  pointer-events: none;
  transition: background 0.5s;
}
#app:not([data-screen="home"]) #ambient::after {
  background: linear-gradient(
    var(--scene-veil),
    var(--scene-veil) 50%,
    var(--scene-shade)
  );
}
#fx {
  z-index: 1;
  opacity: 0.65;
  pointer-events: none;
}
#creatures {
  z-index: 1;
  opacity: 0.4;
}
.overline {
  display: block;
  font-family: QuestText, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f8e9b4;
  text-shadow: 0 1px 3px #173429;
}
.icon-btn {
  width: 44px;
  height: 44px;
  border: 2px solid #493019;
  border-radius: 14px 16px 13px 17px;
  background: linear-gradient(#c39759 0 12%, #9b6b36 13% 56%, #835324 57%);
  box-shadow:
    0 3px 0 #462a17,
    inset 0 2px #eed09a99;
  color: #ffefc6;
  flex-shrink: 0;
}
.icon-btn .ico {
  width: 23px;
  height: 23px;
}
.icon-btn:active {
  transform: translateY(2px);
}
.btn {
  font-family: Quest, sans-serif;
  font-weight: 800;
  border: 3px solid #45341b;
  border-radius: 18px 22px 17px 23px;
  font-size: 18px;
  letter-spacing: 0.1px;
  background: linear-gradient(#c3e36b 0 12%, #a6ce4e 13% 52%, #88b53c 53%);
  color: #fff6d2;
  min-height: 52px;
  padding: 12px 20px;
  text-shadow:
    -1px -1px 0 #486026,
    1px -1px 0 #486026,
    -1px 1px 0 #486026,
    1px 1px 0 #486026,
    0 2px #486026;
  box-shadow:
    0 5px 0 #3e4524,
    inset 0 2px #eaffb58c,
    0 8px 14px #173c3040;
}
.btn.ghost {
  background: linear-gradient(#cfaa71 0 11%, #a87843 12% 51%, #976537 52%);
  box-shadow:
    0 4px 0 #472f1c,
    inset 0 2px #f5d99880;
  text-shadow: 0 2px #563a24;
  border-color: #49321f;
}
.btn:active,
.btn.ghost:active {
  transform: translateY(3px);
  box-shadow: 0 2px #3e4524;
}
.pill {
  outline: 0;
  border: 2px solid #624628;
  background: #674b2de0;
  box-shadow:
    inset 0 2px #ebcc8550,
    0 3px #33291466;
  padding: 8px 12px;
  min-height: 36px;
  font-size: 13px;
  border-radius: 12px 15px 11px 14px;
  white-space: nowrap;
}
#home {
  display: grid;
  grid-template-rows: 44px auto minmax(170px, 1fr) auto 66px 76px 24px;
  gap: 13px;
  justify-content: stretch;
  align-items: stretch;
  text-align: center;
}
.home-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.edition {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #f9efd0;
  font-size: 8px;
  letter-spacing: 1.8px;
  font-weight: 700;
  background: #2d4c38d9;
  border: 1px solid #a0b38b66;
  padding: 8px 11px;
  border-radius: 20px;
  box-shadow: 0 2px 0 #15342555;
}
.edition > span {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cbdd83;
  box-shadow: 0 0 9px #fcdf8b;
}
.edition.lab-entry {
  min-height: 44px;
  text-decoration: none;
}
.edition.lab-entry:focus-visible {
  outline: 3px solid var(--realm-light);
  outline-offset: 3px;
}
.home-title {
  padding-top: 7px;
  z-index: 2;
}
.home-title .overline {
  font-size: 8px;
  letter-spacing: 2.3px;
  margin-bottom: 8px;
  color: #fdf0c3;
  text-shadow:
    0 1px 2px #244032,
    0 0 12px #193224;
}
.logo {
  font-family: Quest, sans-serif;
  font-weight: 800;
  font-size: 65px;
  letter-spacing: -3.5px;
  line-height: 1;
  transform: rotate(-3deg);
  color: #fff2c9;
  position: relative;
  white-space: nowrap;
  filter: drop-shadow(0 4px 0 #2f3f2529);
  text-shadow: var(--outline);
}
.logo em {
  color: #ffcf55;
}
.logo-dot {
  font-family: serif;
  color: #ffdf80;
  font-size: 24px;
  position: absolute;
  top: -8px;
  right: 4px;
  transform: rotate(13deg);
  text-shadow: 0 2px #524524;
}
.hero-scene {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  isolation: isolate;
}
#heroArt {
  display: block;
  position: absolute;
  inset: 0;
  animation: artifactHover 5s ease-in-out infinite;
}
.hero-object {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px #23402c44);
  max-height: 340px;
  margin: auto;
}
.hero-scene #logoMark {
  display: none;
}
.hero-orbit-label {
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: #f9eccc;
  text-shadow: 0 1px 4px #243c23;
  background: #335039aa;
  border: 1px solid #87956a88;
  padding: 5px 10px;
  border-radius: 12px;
}
@keyframes artifactHover {
  50% {
    transform: translateY(-7px) rotate(1deg);
  }
}
.home-tag h2 {
  font-family: Quest;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.4px;
  color: #fff4d0;
  text-shadow:
    -1px -1px #395437,
    1px 1px #395437,
    0 2px 3px #23442d;
}
.home-tag p {
  font-size: 10px;
  color: #f2e7c5;
  margin: 5px 0 0;
  text-shadow: 0 1px 3px #1b3828;
}
.adventure-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  padding: 10px 15px;
  background: linear-gradient(#d3e78b 0 12%, #b6d65c 13% 50%, #97bf44 51%);
  border-radius: 18px 24px 17px 23px;
}
.play-medal {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: #5d892c77;
  border: 1px solid #d6e98d66;
  box-shadow: inset 0 2px 3px #3e642244;
  flex-shrink: 0;
}
.play-medal .ico {
  margin: 0;
  width: 23px;
  height: 23px;
}
.adventure-button > span:nth-child(2) {
  flex: 1;
}
.adventure-button strong {
  font-size: 21px;
  display: block;
  line-height: 1.1;
}
.adventure-button small {
  font:
    700 9px QuestText,
    sans-serif;
  display: block;
  color: #3f5829;
  margin-top: 5px;
  text-shadow: 0 1px #d9ec8e99;
  letter-spacing: 0.5px;
}
.button-arrow {
  font-size: 27px;
  color: #4c6827;
  text-shadow: 0 1px #e3f6a1;
}
.home-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: none;
  gap: 10px;
  padding-top: 3px;
}
.home-actions button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 60px;
  border: 2px solid #553b22;
  border-radius: 13px 17px 12px 18px;
  background: linear-gradient(#9c784ce8, #634a2eeb);
  color: #fff0c8;
  box-shadow:
    0 3px #3b2c1b,
    inset 0 2px #d3af6d66;
  text-shadow: 0 1px #3b2c1b;
  font-size: 10px;
  font-weight: 700;
}
.home-actions button > .ico {
  width: 27px;
  height: 27px;
  margin: 0;
}
.nav-symbol {
  font-size: 39px;
  font-family: serif;
  height: 30px;
  line-height: 25px;
  color: #ead59d;
}
.home-actions b {
  font-size: 8px;
  color: #d8c594;
  font-weight: 500;
}
.home-actions button:active {
  transform: translateY(2px);
}
#relicNavIcon {
  height: 30px;
  display: block;
}
#relicNavIcon svg {
  width: 38px;
  height: 34px;
}
.home-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  color: #e3d7b0;
  text-shadow: 0 1px #193329;
}
.home-bottom .ico {
  width: 15px;
  height: 15px;
  margin: 0;
}
.home-bottom > span:first-child {
  display: flex;
  align-items: center;
  gap: 3px;
}
.home-bottom b {
  color: #ffd77e;
}
#app[data-screen="home"] > .sound-btn {
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 22px;
  display: none;
}
#app:not([data-screen="home"]) > .sound-btn {
  display: none;
}
.topbar {
  gap: 12px;
  min-height: 50px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.topbar h2 {
  font-family: Quest;
  font-size: 26px;
  letter-spacing: -0.5px;
  text-shadow: var(--outline);
  white-space: nowrap;
}
.topbar .overline {
  font-size: 7px;
  letter-spacing: 1px;
  margin-bottom: 3px;
}
.topbar .pill {
  margin-left: auto;
  padding: 7px 9px;
  font-size: 12px;
  gap: 2px;
}
.topbar .pill .ico {
  width: 17px;
  height: 17px;
}
.world-title {
  font-size: 11px;
  color: #eddfb7;
  text-shadow: 0 1px 2px #253c2c;
  margin: 0 0 8px;
  font-weight: 500;
}
.trail {
  min-height: 0;
  padding: 0;
  mask-image: linear-gradient(
    transparent,
    #000 7px,
    #000 calc(100% - 12px),
    transparent
  );
  -webkit-mask-image: linear-gradient(
    transparent,
    #000 7px,
    #000 calc(100% - 12px),
    transparent
  );
}
.trail-inner {
  isolation: isolate;
}
.trail-path {
  z-index: 0;
}
.realm-ground {
  position: absolute;
  left: -10px;
  right: -10px;
  pointer-events: none;
  opacity: 0.8;
  z-index: -1;
}
.realm-ground svg {
  width: 100%;
  height: 100%;
}
.realm-card {
  position: absolute;
  left: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 109px;
  padding: 7px 12px 7px 3px;
  text-align: left;
  border: 2.5px solid #4d3722;
  border-radius: 20px 26px 17px 24px;
  background: linear-gradient(115deg, #f4dfa7f5, #e6c584ed);
  box-shadow:
    0 4px #3b2d1dde,
    inset 0 3px #ffefc68c,
    0 8px 12px #1b30222b;
  z-index: 1;
  color: #4a3823;
}
.realm-art {
  width: 95px;
  flex-shrink: 0;
  height: 90px;
}
.realm-art svg {
  width: 100%;
  height: 100%;
}
.realm-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.realm-copy > small {
  font-size: 8px;
  letter-spacing: 2px;
  color: #8c6a3b;
  font-weight: 700;
}
.realm-copy > strong {
  font-family: Quest;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.realm-copy > span:not(.realm-dots) {
  font-size: 10px;
  color: #8d6b3c;
}
.realm-dots {
  display: flex;
  gap: 5px;
  margin-top: 3px;
}
.realm-dots i {
  width: 16px;
  height: 5px;
  background: #af8b5470;
  border-radius: 3px;
}
.realm-dots i.filled {
  background: #738a44;
  box-shadow: inset 0 1px #abc176;
}
.realm-arrow {
  margin-left: auto;
  color: #886337;
  font-size: 28px;
}
.trail-node {
  width: 66px;
  height: 66px;
  border-width: 3px;
  border-color: #4b3920;
  background: linear-gradient(#efdda7 0 9%, #dbbd7c 10% 65%, #ba9455 66%);
  box-shadow:
    0 5px #493c26,
    0 9px 0 #132e222e,
    inset 0 2px #fff0c58c;
  border-radius: 23px 27px 21px 28px;
  z-index: 2;
}
.trail-node .nlabel {
  font-family: Quest;
  font-size: 24px;
  font-weight: 800;
  color: #594325;
  text-shadow: 0 1px #ffedb5;
}
.trail-node.done {
  background: linear-gradient(#ffe79e 0 12%, #f2cf74 13% 63%, #dbb558 64%);
  box-shadow:
    0 5px #68512d,
    inset 0 2px #fff4c7;
}
.trail-node.current {
  background: linear-gradient(#d9eb99 0 12%, #b0d263 13% 60%, #8fae4d 61%);
  animation: trailBeacon 2.8s ease-in-out infinite;
  box-shadow:
    0 5px #3e4d2e,
    0 0 0 7px #c8e49322,
    inset 0 2px #efffc0;
}
.trail-node.current .nlabel {
  color: #40562c;
}
@keyframes trailBeacon {
  50% {
    box-shadow:
      0 5px #3e4d2e,
      0 0 0 12px #c8e49311,
      inset 0 2px #efffc0;
  }
}
.current-label {
  position: absolute;
  top: -23px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: 1px;
  white-space: nowrap;
  color: #fff2c0;
  background: #436236;
  border: 1px solid #c7d48b;
  border-radius: 8px;
  padding: 3px 8px;
  font-weight: 700;
  box-shadow: 0 2px #2a3927;
}
.trail-node.locked {
  background: linear-gradient(#789071, #50674e);
  border-color: #3d503e;
  color: #b9c5a2;
  opacity: 0.7;
  box-shadow:
    0 4px #334934,
    inset 0 2px #c8d7a833;
}
.trail-node.locked .ico {
  opacity: 0.6;
  filter: grayscale(0.7);
}
.relic-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.relic-part.unearned {
  opacity: 0.17;
  filter: grayscale(1);
}
.relic-part.earned {
  opacity: 1;
}
.relic-part.new-fragment {
  transform-box: fill-box;
  transform-origin: center;
  animation: fragmentReveal 0.75s cubic-bezier(0.2, 0.8, 0.3, 1) 0.18s both;
}
@keyframes fragmentReveal {
  from {
    transform: translateY(-18px) scale(0.8);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.relics-intro {
  color: #eee3c4;
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 17px;
  text-align: center;
  text-shadow: 0 1px #19392c;
}
.relic-grid {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  min-height: 0;
  padding: 3px 3px 12px;
}
.relic-card {
  padding: 13px 10px 16px;
  border: 2px solid #4b3b27;
  border-radius: 18px 23px 16px 22px;
  background: linear-gradient(#eedaacef, #d0b783ee);
  color: #654b29;
  box-shadow: 0 4px #433725;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.relic-card svg {
  width: 100%;
  height: 125px;
}
.relic-world {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.relic-card > strong {
  font-family: Quest;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  line-height: 1.15;
}
.relic-card > span:last-child {
  font-size: 8px;
  letter-spacing: 1px;
  margin-top: 9px;
  font-weight: 700;
}
.relic-card.found {
  border-color: #c49844;
  background: linear-gradient(#ffedbc, #ddc08a);
}
#game {
  display: grid;
  grid-template-rows: 50px 122px minmax(170px, 1fr) 44px 38px 48px;
  gap: 8px;
  padding: calc(16px + env(safe-area-inset-top)) 22px
    calc(18px + env(safe-area-inset-bottom));
}
.hud {
  margin: 0;
  gap: 10px;
  justify-content: space-between;
}
.game-heading {
  text-align: center;
}
.game-heading .overline {
  font-size: 8px;
  letter-spacing: 2px;
}
.game-heading h2 {
  font-family: Quest;
  font-size: 23px;
  font-weight: 800;
  color: #fff2cd;
  line-height: 1.2;
  text-shadow: 0 2px #314929;
}
.target-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  min-height: 0;
  gap: 14px;
  margin: 0;
  padding: 8px 13px 8px 16px;
  background: linear-gradient(115deg, #eedcacfa, #d6ba82f5);
  border: 2px solid #513c27;
  border-radius: 19px 25px 17px 23px;
  box-shadow:
    0 4px #352f2280,
    inset 0 2px #fff4cf80;
}
.target-info {
  text-align: left;
  min-width: 0;
}
.target-label {
  color: #8e6f40;
  font-size: 8px;
  letter-spacing: 1.4px;
  text-shadow: none;
  font-weight: 700;
}
.target-info h2 {
  font-family: Quest;
  font-size: 25px;
  line-height: 1.08;
  margin: 6px 0 10px;
  letter-spacing: -0.6px;
  color: #594528;
  font-weight: 800;
  max-width: 190px;
}
.target-stage {
  min-height: 0;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
}
.board.target.seamless {
  box-shadow: 0 3px 0 #866d4599;
  border-radius: 9px;
}
.target-stage canvas {
  box-shadow: none !important;
  border-radius: 7px !important;
}
.game-meta {
  display: flex;
  gap: 11px;
  align-items: center;
}
.stat {
  font-family: QuestText;
  box-shadow: none;
  text-shadow: none;
  background: none;
  border: 0;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  color: #836741;
  gap: 4px;
  border-radius: 0;
}
.stat .ico {
  width: 13px;
  height: 13px;
  opacity: 0.8;
}
.stat small {
  font-size: 8px;
  color: #947950;
  font-weight: 500;
}
.stat.danger {
  animation: none;
  color: #a93a30;
}
.game-board-wrap {
  position: relative;
  min-height: 0;
  flex: none;
  container-type: size;
  padding: 0;
  isolation: isolate;
}
.board-aura {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  background: radial-gradient(ellipse at center, #e5dc9340 0%, transparent 68%);
  z-index: -1;
  pointer-events: none;
}
#playBoard {
  position: relative;
  width: min(100cqw, 100cqh, 354px);
  aspect-ratio: 1;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 3px solid #42331f;
  border-radius: 22px 28px 20px 26px;
  background:
    repeating-linear-gradient(6deg, transparent 0 37px, #6c4a2b22 38px 40px),
    linear-gradient(
      140deg,
      #c5a267 0 4%,
      #967346 5% 12%,
      #765435 13% 89%,
      #5c422a 90%
    );
  box-shadow:
    0 7px 0 #43351f,
    inset 0 3px #ffe8ad55,
    0 14px 23px #142d2766;
  align-items: stretch;
  overflow: visible;
  transition: transform 0.5s;
}
#playBoard .cube {
  padding: 0;
  min-width: 0;
  width: auto;
  height: auto;
  border: 2.5px solid #583821;
  border-radius: 12px 15px 11px 16px;
  box-shadow: 0 4px 0 #583821;
  background: #745337;
  transform: rotate(var(--tilt));
  transition:
    transform 0.18s,
    box-shadow 0.25s;
  aspect-ratio: 1;
}
#playBoard .cube::before {
  background:
    linear-gradient(135deg, #fff0c933, transparent 35% 65%, #5a37121a),
    linear-gradient(180deg, #fff9da5e 0 5%, transparent 6% 93%, #57371944 94%);
  box-shadow: inset 0 0 0 2px #fff6d52b;
  clip-path: polygon(
    0 3%,
    11% 0,
    81% 0,
    100% 8%,
    100% 80%,
    95% 100%,
    10% 100%,
    0 89%
  );
}
#playBoard .cube::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #633d2144;
  transition: background 0.2s;
}
#playBoard .cube.correct {
  box-shadow: 0 4px #583821;
}
#playBoard .cube.correct::after {
  background: #fff1a0;
  box-shadow: 0 0 0 2px #6d8549;
}
#playBoard .cube.spin {
  transform: rotate(calc(var(--tilt) - 8deg)) scale(0.93);
}
#playBoard .cube:active {
  transform: scale(0.94) rotate(var(--tilt));
}
#playBoard .cube:disabled {
  opacity: 1;
}
.revealed-image {
  position: absolute;
  inset: 12px;
  overflow: hidden;
  border-radius: 10px;
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  animation: imageRevealed 0.5s ease 0.1s forwards;
}
.revealed-image svg {
  width: 100%;
  height: 100%;
  display: block;
}
#playBoard.revealing .cube {
  opacity: 0;
  transition: opacity 0.35s;
}
.revealed-image::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(
    110deg,
    transparent 30%,
    #fffbe655 50%,
    transparent 70%
  );
  animation: revealLight 0.65s ease 0.2s both;
}
@keyframes imageRevealed {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes revealLight {
  to {
    transform: translateX(120%);
  }
}
.assembly-progress {
  align-self: center;
  padding: 0 7px;
}
.assembly-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  color: #f2e7c5;
  font-size: 10px;
  margin-bottom: 7px;
  text-shadow: 0 1px #203829;
}
.assembly-track {
  height: 6px;
  border: 1px solid #314834;
  background: #14372bbc;
  box-shadow: 0 1px #aebd7344;
  border-radius: 5px;
  overflow: hidden;
}
.assembly-track i {
  height: 100%;
  width: 0;
  display: block;
  background: linear-gradient(#e9e891, #accc5c);
  border-radius: inherit;
  transition: width 0.28s;
}
.footer-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding: 0;
  font-weight: 500;
  color: #f2e7c8;
  text-shadow: 0 1px #183927;
  text-align: center;
  line-height: 1.4;
}
.game-tools {
  display: flex;
  gap: 8px;
}
.game-tools button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
  min-height: 44px;
  padding: 6px;
  border: 2px solid #3d3622;
  border-radius: 12px 15px 11px 16px;
  background: linear-gradient(#ac8d5fe6, #7e6543e6);
  box-shadow:
    0 3px #3d3322,
    inset 0 2px #e8d4a144;
  color: #fff1cc;
  font-size: 10px;
  font-weight: 700;
  text-shadow: 0 1px #51432d;
}
.game-tools .ico {
  width: 18px;
  height: 18px;
  margin: 0;
}
.game-tools .relic-shortcut > span {
  font-size: 26px;
  line-height: 1;
  color: #f4d69b;
}
.mem-cover {
  inset: -3px;
  z-index: 4;
  border-radius: 12px;
  background: repeating-linear-gradient(45deg, #e6ce94 0 9px, #dfc48a 9px 10px);
  box-shadow: 0 3px #8c7246;
  font-size: 28px;
}
.mem-cover span {
  font-size: 10px;
}
.overlay {
  padding: 25px 23px;
  background: #152d25ad;
  backdrop-filter: blur(4px);
  z-index: 10;
}
.modal {
  background: linear-gradient(130deg, #fff0c9, #ead3a0 65%, #dabc83);
  border: 3px solid #51391f;
  border-radius: 23px 31px 21px 29px;
  padding: 25px 20px 18px;
  box-shadow:
    0 7px #3d2e1d,
    inset 0 3px #fff8e299,
    0 16px 35px #10261e66;
  max-height: calc(100dvh - 65px);
  overflow: auto;
  color: #594328;
  max-width: 360px;
}
.modal h3 {
  position: static;
  transform: none;
  border: 0;
  box-shadow: none;
  background: none;
  padding: 0;
  white-space: normal;
  font-family: Quest;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #604525;
  text-shadow: 0 2px #fff6d499;
  line-height: 1.1;
  margin: 7px 0 12px;
}
.modal > .overline {
  color: #a37f42;
  text-shadow: none;
  font-size: 8px;
  letter-spacing: 1.7px;
}
.modal p {
  color: #8a6b3a;
  font-size: 11px;
  line-height: 1.6;
  margin: 10px 0 14px;
  font-weight: 500;
}
.win-modal {
  padding-top: 23px;
}
.win-modal h3 {
  font-size: 33px;
  margin-bottom: 0;
}
.big-stars {
  padding: 0;
  margin: 9px 0 0;
  gap: 8px;
  min-height: 45px;
}
.big-stars span {
  font-size: 36px;
}
.big-stars span .ico {
  width: 36px;
  height: 36px;
}
.big-stars span:nth-child(2) {
  margin-top: -5px;
}
.big-stars::before {
  width: 200px;
  height: 200px;
  opacity: 0.45;
}
.big-stars span.on {
  filter: drop-shadow(0 2px 1px #b8873e55);
}
.win-relic {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}
.win-relic svg {
  width: 145px;
  height: 135px;
}
.win-relic strong {
  font-family: Quest;
  font-size: 20px;
  font-weight: 800;
  color: #6b4d2a;
}
.win-relic > span {
  font-size: 9px;
  letter-spacing: 1px;
  color: #997443;
  margin-top: 5px;
}
.modal-stats {
  gap: 10px;
  margin: 8px 0 16px;
  font-size: 9px;
  color: #a08253;
}
.modal-stats > div {
  background: #c4a36526;
  border: 1px solid #b9975555;
  border-radius: 10px;
  padding: 7px 22px;
}
.modal-stats b {
  font-family: Quest;
  font-weight: 600;
  font-size: 18px;
  color: #826038;
  margin-bottom: 2px;
}
.modal-actions {
  gap: 10px;
}
.modal-actions .btn {
  min-height: 47px;
  font-size: 15px;
  padding: 10px;
}
.quiet-button {
  font-size: 11px;
  min-height: 44px;
  border: 0;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #977749;
}
.win-modal .quiet-button {
  min-height: 44px;
}
.relic-modal .relic-art {
  height: 190px;
}
.relic-modal h3 {
  font-size: 29px;
}
.relic-detail-count {
  margin: 8px 0 20px;
  font-size: 12px;
  color: #967649;
  font-weight: 700;
}
.skin-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
}
.skin-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  padding: 8px 3px;
  border: 2px solid #be9d61;
  border-radius: 12px;
  background: #f6e3b8;
  color: #846437;
  min-height: 76px;
}
.skin-choice.selected {
  border-color: #718847;
  background: #e6e4b2;
  box-shadow: inset 0 0 0 1px #b1c371;
}
.skin-choice > span {
  width: 31px;
  height: 31px;
  border: 2px solid #6c4d2d;
  border-radius: 7px;
  box-shadow: 0 2px #6c4d2d;
}
.skin-choice strong {
  font-size: 10px;
  font-weight: 700;
}
.skin-choice b {
  position: absolute;
  right: 5px;
  top: 2px;
  font-size: 13px;
  color: #6a8142;
}
.settings-option {
  min-height: 45px;
  border: 1px solid #b5945e;
  border-radius: 12px;
  background: #dbbf872e;
  color: #866536;
  font-size: 12px;
  padding: 10px;
  font-weight: 700;
}
.settings-option .ico {
  width: 17px;
  height: 17px;
}
#rewardParticles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
#rewardParticles i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.toast {
  font-family: QuestText;
  border-width: 2px;
  border-radius: 12px;
  font-size: 11px;
  text-align: center;
  max-width: 85%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  min-width: 200px;
  pointer-events: none;
}
@media (min-width: 600px) {
  #app {
    height: min(940px, calc(100dvh - 24px));
    margin: 12px auto;
    border-radius: 27px;
    box-shadow:
      0 0 0 1px #aac19a33,
      0 18px 80px #081d18aa;
  }
}
@media (max-height: 740px) {
  #home {
    grid-template-rows: 40px auto minmax(130px, 1fr) auto 58px 64px 19px;
    gap: 9px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .home-title {
    padding: 0;
  }
  .home-title .overline {
    font-size: 7px;
    margin-bottom: 6px;
  }
  .logo {
    font-size: 56px;
  }
  .home-tag h2 {
    font-size: 19px;
  }
  .home-tag p {
    font-size: 9px;
    margin-top: 3px;
  }
  .hero-object {
    max-height: 235px;
  }
  .hero-orbit-label {
    font-size: 6px;
    letter-spacing: 1.5px;
  }
  .adventure-button strong {
    font-size: 18px;
  }
  .adventure-button small {
    font-size: 8px;
  }
  .home-actions button {
    min-height: 54px;
    font-size: 9px;
  }
  .home-bottom {
    font-size: 8px;
  }
  .edition {
    font-size: 7px;
    padding: 7px 9px;
  }
  .home-actions {
    padding-top: 2px;
  }
  #game {
    grid-template-rows: 44px 105px minmax(155px, 1fr) 34px 30px 44px;
    gap: 7px;
    padding: calc(10px + env(safe-area-inset-top)) 18px
      calc(12px + env(safe-area-inset-bottom));
  }
  .game-heading h2 {
    font-size: 20px;
  }
  .target-wrap {
    padding: 6px 11px;
    gap: 9px;
  }
  .target-stage {
    width: 88px;
    height: 88px;
  }
  .target-info h2 {
    font-size: 24px;
    margin: 5px 0 7px;
  }
  .target-label {
    font-size: 7px;
  }
  .game-tools button {
    font-size: 9px;
  }
  .footer-hint {
    font-size: 10px;
  }
  #playBoard {
    gap: 6px;
    padding: 9px;
    max-width: 318px;
  }
  .revealed-image {
    inset: 9px;
  }
  .modal {
    padding: 20px 17px 14px;
  }
  .modal h3 {
    font-size: 28px;
  }
  .win-modal h3 {
    margin: 4px 0 0;
  }
  .big-stars {
    margin-top: 7px;
    min-height: 34px;
  }
  .big-stars span .ico {
    width: 30px;
    height: 30px;
  }
  .win-relic svg {
    height: 103px;
    width: 113px;
  }
  .win-relic strong {
    font-size: 18px;
  }
  .win-modal p {
    margin: 7px 0;
    font-size: 10px;
  }
  .modal-stats {
    margin: 7px 0 12px;
  }
  .modal-actions {
    gap: 8px;
  }
  .modal-actions .btn {
    min-height: 44px;
    padding: 8px;
  }
  .win-modal .quiet-button {
    min-height: 44px;
  }
}
@media (max-width: 350px) {
  .screen {
    padding-left: 16px;
    padding-right: 16px;
  }
  .logo {
    font-size: 51px;
  }
  .logo-dot {
    right: -1px;
    font-size: 20px;
  }
  .home-title .overline {
    letter-spacing: 1.5px;
  }
  .home-tag h2 {
    font-size: 18px;
  }
  .adventure-button {
    gap: 7px;
    padding: 8px 12px;
  }
  .adventure-button strong {
    font-size: 17px;
  }
  .home-actions {
    gap: 7px;
  }
  .home-bottom {
    font-size: 7px;
  }
  .topbar h2 {
    font-size: 23px;
  }
  .topbar .overline {
    font-size: 6px;
    letter-spacing: 0.5px;
  }
  .topbar .pill {
    font-size: 10px;
    padding: 6px;
  }
  .realm-art {
    width: 75px;
    height: 80px;
  }
  .realm-copy > strong {
    font-size: 19px;
  }
  .realm-card {
    padding-right: 8px;
    min-height: 100px;
  }
  .target-info h2 {
    font-size: 22px;
  }
  .target-stage {
    width: 76px;
    height: 85px;
  }
  .target-stage canvas {
    max-width: 76px;
    max-height: 76px;
  }
  .game-meta {
    gap: 8px;
  }
  .relic-card svg {
    height: 104px;
  }
  .relic-card > strong {
    font-size: 13px;
  }
  .game-tools button {
    font-size: 9px;
    gap: 3px;
  }
  .game-tools .ico {
    width: 16px;
    height: 16px;
  }
}
@media (max-height: 600px) {
  #home {
    grid-template-rows: 44px 61px minmax(105px, 1fr) 28px 54px 58px 16px;
    gap: 7px;
    padding: 10px 18px;
  }
  .home-title .overline {
    font-size: 6px;
    margin-bottom: 3px;
  }
  .logo {
    font-size: 47px;
  }
  .home-tag h2 {
    font-size: 17px;
  }
  .home-tag p {
    display: none;
  }
  .hero-orbit-label {
    display: none;
  }
  .home-actions button > .ico {
    width: 22px;
    height: 22px;
  }
  .home-actions button {
    min-height: 50px;
  }
  .home-actions {
    padding: 0;
  }
  .home-top .icon-btn {
    width: 44px;
    height: 44px;
  }
  .hero-object {
    max-height: 190px;
  }
  .home-bottom {
    font-size: 7px;
  }
  .modal h3 {
    font-size: 26px;
  }
  .win-relic svg {
    height: 85px;
  }
  .modal-stats > div {
    padding: 5px 18px;
  }
  .big-stars span .ico {
    width: 27px;
    height: 27px;
  }
  .win-modal {
    padding: 18px 16px 10px;
  }
  #game {
    grid-template-rows: 44px 98px minmax(145px, 1fr) 29px 28px 44px;
    gap: 6px;
  }
  .target-info h2 {
    font-size: 22px;
  }
}
html[data-motion="gentle"] #heroArt {
  animation-duration: 7s;
}
html[data-motion="gentle"] .creature {
  opacity: 0.3;
}
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-motion="off"] .revealed-image {
  opacity: 1;
  transform: none;
}
html[data-motion="off"] .revealed-image::after {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .revealed-image {
    opacity: 1;
    transform: none;
  }
  .revealed-image::after {
    display: none;
  }
}

/* Shared materials inherit the complete selected environment. */
body,
#app {
  background-color: var(--bg);
}
.logo em,
.logo-dot {
  color: var(--realm-light);
}
.logo,
.topbar h2 {
  text-shadow:
    -2px -2px var(--theme-ink),
    2px -2px var(--theme-ink),
    -2px 2px var(--theme-ink),
    2px 2px var(--theme-ink),
    0 5px var(--theme-ink);
}
.edition,
.hero-orbit-label,
.pill {
  background: var(--scene-shade);
  border-color: var(--frame-hi);
}
.home-tag h2,
.home-tag p,
.home-bottom,
.footer-hint,
.game-heading h2,
.world-title,
.relics-intro,
.assembly-progress > div:first-child {
  text-shadow:
    0 1px 2px var(--theme-ink),
    0 2px 5px var(--theme-ink);
}
.icon-btn,
.home-actions button,
.game-tools button,
.btn.ghost {
  background: linear-gradient(
    var(--frame-hi) 0 10%,
    var(--frame-mid) 11% 54%,
    var(--frame-low) 55%
  );
  border-color: var(--theme-ink);
  box-shadow:
    0 3px var(--theme-ink),
    inset 0 2px #fff4d766;
  text-shadow: 0 1px var(--theme-ink);
}
.btn,
.adventure-button {
  background: linear-gradient(
    var(--action-hi) 0 12%,
    var(--action-mid) 13% 52%,
    var(--action-low) 53%
  );
  border-color: var(--theme-ink);
  box-shadow:
    0 5px var(--action-ink),
    inset 0 2px #ffffff66;
  text-shadow:
    -1px -1px var(--action-ink),
    1px -1px var(--action-ink),
    -1px 1px var(--action-ink),
    1px 1px var(--action-ink),
    0 2px var(--action-ink);
}
.btn.ghost {
  background: linear-gradient(
    var(--frame-hi),
    var(--frame-mid) 54%,
    var(--frame-low) 55%
  );
}
.adventure-button small,
.button-arrow {
  color: var(--action-ink);
  text-shadow: 0 1px #ffffff66;
}
.play-medal {
  background: var(--action-low);
  border-color: var(--action-hi);
  box-shadow: inset 0 2px 2px #0002;
}
.home-actions b {
  color: var(--paper-hi);
}
.realm-card,
.relic-card,
.target-wrap,
.modal {
  background: linear-gradient(130deg, var(--paper-hi), var(--paper-low));
  border-color: var(--theme-ink);
  color: var(--theme-ink);
  box-shadow:
    0 4px var(--theme-ink),
    inset 0 3px #fff9e477;
}
.realm-copy > small,
.realm-copy > span:not(.realm-dots),
.realm-arrow,
.target-label,
.stat,
.stat small,
.modal p,
.modal > .overline,
.relic-detail-count,
.quiet-button,
.win-stats,
.win-relic > span {
  color: var(--theme-muted);
}
.target-info h2,
.modal h3 {
  color: var(--theme-ink);
}
.stat.danger {
  color: #a93a30;
}
.realm-dots i {
  background: var(--frame-hi);
}
.realm-dots i.filled {
  background: var(--action-low);
  box-shadow: inset 0 1px var(--action-hi);
}
.relic-card.found {
  border-color: var(--action-low);
  background: linear-gradient(var(--paper-hi), var(--paper-low));
}
.trail-path path:first-child {
  stroke: var(--theme-ink);
}
.trail-path path:nth-child(2) {
  stroke: var(--realm-light);
}
.trail-path path:nth-child(3) {
  stroke: var(--action-hi);
}
.trail-node {
  background: linear-gradient(
    var(--paper-hi),
    var(--paper-low) 65%,
    var(--frame-hi) 66%
  );
  border-color: var(--theme-ink);
  box-shadow:
    0 5px var(--theme-ink),
    inset 0 2px #fff8;
}
.trail-node .nlabel,
.trail-node.current .nlabel {
  color: var(--theme-ink);
  text-shadow: 0 1px #fff8;
}
.trail-node.done {
  background: linear-gradient(var(--paper-hi), var(--frame-hi));
  box-shadow:
    0 5px var(--theme-ink),
    inset 0 2px #fff8;
}
.trail-node.current {
  background: linear-gradient(
    var(--action-hi),
    var(--action-mid) 60%,
    var(--action-low) 61%
  );
  box-shadow:
    0 5px var(--action-ink),
    0 0 0 7px #fff2;
}
.trail-node.locked {
  background: linear-gradient(var(--frame-mid), var(--frame-low));
  border-color: var(--theme-ink);
  box-shadow: 0 4px var(--theme-ink);
}
.current-label {
  background: var(--action-ink);
  border-color: var(--action-hi);
  box-shadow: 0 2px var(--theme-ink);
}
@keyframes trailBeacon {
  50% {
    box-shadow:
      0 5px var(--action-ink),
      0 0 0 12px #fff1,
      inset 0 2px #fff8;
  }
}
#playBoard {
  background:
    repeating-linear-gradient(6deg, transparent 0 37px, #ffffff08 38px 40px),
    linear-gradient(
      140deg,
      var(--frame-hi) 0 4%,
      var(--frame-mid) 5% 12%,
      var(--frame-low) 13% 89%,
      var(--theme-ink) 90%
    );
  border-color: var(--theme-ink);
  box-shadow:
    0 7px var(--theme-ink),
    inset 0 3px #fff5,
    0 14px 23px #142d2744;
}
#playBoard .cube,
#playBoard .cube.correct {
  border-color: var(--theme-ink);
  box-shadow: 0 4px var(--theme-ink);
}
#playBoard .cube.correct::after {
  box-shadow: 0 0 0 2px var(--action-ink);
}
.board-aura {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--realm-light) 22%, transparent),
    transparent 68%
  );
}
.assembly-track {
  background: var(--scene-shade);
  border-color: var(--theme-ink);
}
.assembly-track i {
  background: linear-gradient(var(--action-hi), var(--action-low));
}
.mem-cover {
  background: repeating-linear-gradient(
    45deg,
    var(--paper-hi) 0 9px,
    var(--paper-low) 9px 10px
  );
  box-shadow: 0 3px var(--theme-muted);
}
.overlay {
  background: var(--scene-shade);
}
.settings-option {
  color: var(--theme-ink);
  border-color: var(--frame-hi);
  background: #ffffff22;
}
.skin-choices {
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 12px 0 0;
}
.skin-choice {
  flex-direction: row;
  justify-content: flex-start;
  gap: 11px;
  padding: 0 27px 0 0;
  overflow: hidden;
  text-align: left;
  min-height: 58px;
  border-color: var(--frame-hi);
  background: #fff5;
  color: var(--theme-ink);
}
.skin-choice.selected {
  border-color: var(--action-ink);
  background: #fff9;
  box-shadow: 0 0 0 1px var(--action-ink);
}
.skin-choice > img {
  width: 73px;
  height: 60px;
  object-fit: cover;
  object-position: center 65%;
  flex-shrink: 0;
  align-self: stretch;
}
.skin-choice > .skin-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.skin-choice strong {
  font-family: Quest;
  font-size: 14px;
}
.skin-choice small {
  font-size: 9px;
  line-height: 1.3;
  color: var(--theme-muted);
}
.skin-choice b {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--action-ink);
}
.skin-choice.loading {
  opacity: 0.7;
}
#skinStatus {
  font-size: 10px;
  margin: 8px 0;
  min-height: 16px;
}
#settingsOverlay .modal {
  padding-top: 18px;
}
#settingsOverlay .modal h3 {
  margin: 5px 0;
  font-size: 29px;
}
#settingsOverlay .modal > p:first-of-type {
  margin: 5px 0 8px;
}
#settingsOverlay .modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#settingsOverlay .quiet-button,
#settingsOverlay .btn {
  grid-column: auto;
}
#settingsOverlay .settings-option {
  font-size: 10px;
  padding: 7px 5px;
}
@media (max-height: 650px) {
  #settingsOverlay .modal {
    padding: 12px 14px;
  }
  #settingsOverlay .modal > .overline {
    display: none;
  }
  .skin-choice {
    min-height: 49px;
  }
  .skin-choice > img {
    height: 49px;
    width: 64px;
  }
  .skin-choices {
    gap: 5px;
    margin-top: 8px;
  }
  #settingsOverlay .quiet-button {
    min-height: 44px;
  }
}

/* Seven environments stay reachable without pushing audio/close off mobile. */
#settingsOverlay .skin-choices { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
#settingsOverlay .skin-choice { position: relative; min-width: 0; height: 70px; min-height: 70px; padding: 8px 9px; align-items: flex-end; isolation: isolate; }
#settingsOverlay .skin-choice > img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; object-position: center 65%; }
#settingsOverlay .skin-choice::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#14272d05,#13272dad 65%,#122329d9); z-index: -1; }
#settingsOverlay .skin-choice > .skin-copy { gap: 1px; }
#settingsOverlay .skin-choice strong { font-size: 13px; color: #fff7e3; text-shadow: 0 1px 3px #18242d; }
#settingsOverlay .skin-choice small { display: none; }
#settingsOverlay .skin-choice b { top: 5px; right: 6px; transform: none; color: #fff8cf; text-shadow: 0 1px 3px #17272a; }
#settingsOverlay .skin-choice.selected { border-color: var(--action-mid); box-shadow: 0 0 0 2px var(--action-ink); }
@media(max-height:650px) {
  #settingsOverlay .skin-choice { height: 49px; min-height: 49px; padding: 5px 8px; }
  #settingsOverlay .skin-choices { gap: 5px; }
}