.splash-screen {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #000;
	transition: opacity 0.4s ease-out;
}

.splash-screen--fadeIn {
	opacity: 0;
}

.splash-screen--fadeIn .splash-screen__logo {
	opacity: 0;
}

.splash-screen--visible {
	opacity: 1;
}

.splash-screen--visible .splash-screen__logo {
	opacity: 1;
}

.splash-screen--fadeOut {
	opacity: 0;
}

.splash-screen--fadeOut .splash-screen__logo {
	opacity: 0;
}

.splash-screen__logo {
	max-width: 256px;
	width: 100%;
	height: auto;
	object-fit: contain;
	transition: opacity 0.4s ease-out;
}

.gems-tab-loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px;
  box-sizing: border-box;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
}

.gems-tab-loader__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 116px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-game-display, inherit);
}

.gems-tab-loader__spinner {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.32) 0 7px, transparent 8px),
    conic-gradient(
      from 0deg,
      rgba(255, 228, 106, 0.95),
      rgba(88, 198, 255, 0.95),
      rgba(183, 117, 255, 0.95),
      rgba(255, 228, 106, 0.95)
    );
  box-shadow:
    inset 0 0 0 8px rgba(8, 24, 58, 0.88),
    0 0 18px rgba(88, 198, 255, 0.35);
  animation: gems-tab-loader-spin 900ms linear infinite;
}

.gems-tab-loader__gem {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, #ffffff 0%, #ffe46a 45%, #ff9d38 100%);
  box-shadow:
    inset -2px -2px 0 rgba(117, 73, 16, 0.28),
    0 0 10px rgba(255, 228, 106, 0.5);
  transform: rotate(45deg);
  animation: gems-tab-loader-gem-pulse 900ms ease-in-out infinite;
}

.gems-tab-loader__gem--top {
  top: -4px;
  left: 50%;
  margin-left: -6.5px;
}

.gems-tab-loader__gem--right {
  top: 50%;
  right: -4px;
  margin-top: -6.5px;
  animation-delay: 120ms;
}

.gems-tab-loader__gem--bottom {
  bottom: -4px;
  left: 50%;
  margin-left: -6.5px;
  animation-delay: 240ms;
}

.gems-tab-loader__gem--left {
  top: 50%;
  left: -4px;
  margin-top: -6.5px;
  animation-delay: 360ms;
}

.gems-tab-loader__label {
  font-size: 15px;
  line-height: 1.15;
  font-weight: bold;
  color: #ffffff;
  -webkit-text-stroke: 1px #0f3a7b;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.24);
  white-space: nowrap;
}

@keyframes gems-tab-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes gems-tab-loader-gem-pulse {
  0%,
  100% {
    opacity: 0.62;
    transform: rotate(45deg) scale(0.82);
  }
  45% {
    opacity: 1;
    transform: rotate(45deg) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gems-tab-loader__spinner,
  .gems-tab-loader__gem {
    animation: none;
  }
}

/* Shared main-menu bottom tabs + content slide (CSS class prefix kept as gems-* for zero visual churn). */

.gems-main-tab-content-shell {
  position: absolute;
  top: calc(
    var(--gems-main-top-hud-h, 56px) + var(--gems-main-top-hud-top-gap, 16px) +
      env(safe-area-inset-top, 0px)
  );
  left: 0;
  right: 0;
  bottom: calc(
    var(--gems-main-tab-bar-h, 84px) + env(safe-area-inset-bottom, 0px)
  );
  z-index: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  pointer-events: none;
}

.gems-main-tab-content {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  pointer-events: auto;
}

.gems-main-tab-content--from-right,
.gems-main-tab-content--from-left {
  will-change: transform;
}

.gems-main-tab-content--play {
  pointer-events: none;
}

.gems-main-tab-content--from-right {
  animation: gems-main-tab-enter-from-right 320ms cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.gems-main-tab-content--from-left {
  animation: gems-main-tab-enter-from-left 320ms cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

@keyframes gems-main-tab-enter-from-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes gems-main-tab-enter-from-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.gems-main-menu__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  touch-action: none;
}

.gems-main-menu__stage--play {
  top: 0;
  right: 0;
  bottom: var(--gems-main-tab-bar-h, 84px);
  left: 0;
}

/* Full-bleed play stage when bottom tabs / top chrome are hidden. */
.gems-main-menu__stage--play.gems-main-menu__stage--immersive,
.gems-main-menu--immersive .gems-main-menu__stage--play {
  bottom: 0;
}

.gems-main-menu__stage > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}

.gems-main-tabs-shell {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: var(--gems-main-tab-bar-h, 84px);
  pointer-events: none;
  overflow: visible;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: content-box;
}

.gems-main-tabs {
  pointer-events: auto;
  display: grid;
  width: 100%;
  height: 100%;
  touch-action: none;
  overflow: visible;
}

.gems-main-tab {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  overflow: visible;
  min-width: 0;
  min-height: 0;
  height: 100%;
  transform-origin: bottom center;
  transform: scaleY(1);
  border-top-left-radius: var(--gems-main-tab-radius, 13.5px);
  border-top-right-radius: var(--gems-main-tab-radius, 13.5px);
  background: linear-gradient(180deg, #3879db 0%, #19407c 100%);
  transition:
    background 210ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.gems-main-tab--selected {
  z-index: 2;
  background: linear-gradient(180deg, #ab62ff 0%, #460328 100%);
  animation: gems-main-tab-select-bounce 520ms cubic-bezier(0.34, 1.35, 0.64, 1)
    forwards;
}

@keyframes gems-main-tab-select-bounce {
  0% {
    transform: scaleY(1);
  }
  38% {
    transform: scaleY(1.22);
  }
  62% {
    transform: scaleY(1.02);
  }
  80% {
    transform: scaleY(1.12);
  }
  100% {
    transform: scaleY(1.08);
  }
}

.gems-main-tab__highlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 42%,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 72%
  );
  opacity: 0;
  transform: scale(0.88);
  transition:
    opacity 210ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 210ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gems-main-tab--selected .gems-main-tab__highlight {
  opacity: 1;
  transform: scale(1);
}

.gems-main-tab__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.gems-main-tab__icon-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.gems-main-tab__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.gems-main-tab__sparkle {
  position: absolute;
  left: calc(50% + var(--sparkle-x, 0px));
  top: 20%;
  width: calc(var(--sparkle-size, 12px) * 0.58);
  height: calc(var(--sparkle-size, 12px) * 0.58);
  border-radius: 1px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.5) 100%
  );
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
  --sparkle-base-rotate: 45deg;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--sparkle-base-rotate, 45deg));
  animation: gems-main-tab-sparkle-rise 3.6s linear infinite;
  animation-delay: var(--sparkle-delay, 0s);
  will-change: top, opacity;
}

@keyframes gems-main-tab-sparkle-rise {
  0% {
    top: 20%;
    opacity: 0;
  }
  12% {
    top: 20%;
    opacity: 0.88;
  }
  68% {
    top: -8%;
    opacity: 0.55;
  }
  100% {
    top: -40%;
    opacity: 0;
  }
}

.gems-main-tab__icon {
  position: relative;
  z-index: 1;
  width: calc(var(--gems-main-tab-icon-size, 56px) * 0.7);
  height: calc(var(--gems-main-tab-icon-size, 56px) * 0.7);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform: translateY(0) rotate(0deg);
  transition:
    transform 210ms cubic-bezier(0.2, 0.8, 0.2, 1),
    width 210ms cubic-bezier(0.2, 0.8, 0.2, 1),
    height 210ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.gems-main-tab--selected .gems-main-tab__icon {
  width: var(--gems-main-tab-icon-size, 56px);
  height: var(--gems-main-tab-icon-size, 56px);
  transform: translateY(
      calc(
        -1 * var(--gems-main-tab-icon-lift, 24px) -
          var(--gems-main-tab-bar-h, 84px) * 0.1
      )
    )
    rotate(-15deg);
}

.gems-main-tab__label {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%) translateY(8px);
  font-family: var(--font-game-display, inherit);
  font-size: clamp(
    16px,
    calc(var(--gems-main-tab-bar-h, 84px) * 0.14 + 2px),
    24px
  );
  font-weight: bold;
  color: #ffffff;
  line-height: 1.1;
  white-space: nowrap;
  max-width: 96%;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 210ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 210ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gems-main-tab--selected .gems-main-tab__label {
  opacity: 1;
  transform: translateX(-50%)
    translateY(calc(-1 * var(--gems-main-tab-bar-h, 84px) * 0.15));
}

.gems-main-tab-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  box-sizing: border-box;
  overflow: hidden;
  touch-action: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .gems-main-tab-content--from-right,
  .gems-main-tab-content--from-left {
    animation: none;
  }

  .gems-main-tab--selected {
    animation: none;
    transform: scaleY(1.08);
  }

  .gems-main-tab__sparkle {
    animation: none;
    opacity: 0;
  }
}
.gems-main-tab__notification {
  position: absolute;
  z-index: 3;
  right: -4px;
  top: -2px;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 2px solid #fffaf0;
  border-radius: 50%;
  background: #ed4055;
  box-shadow: 0 2px 3px #832b3b40;
  pointer-events: none;
  animation: gems-tab-notification-pulse 15s ease-out infinite;
}
.gems-main-tab__notification::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid #ed4055;
  border-radius: 50%;
  opacity: 0;
  animation: gems-tab-notification-ring 15s ease-out infinite;
}
.gems-main-tab--selected .gems-main-tab__notification,
.gems-main-tab--selected .gems-main-tab__notification::after { animation: none; }
@keyframes gems-tab-notification-pulse {
  0%, 92%, 96%, 100% { transform: scale(1); }
  94%, 98% { transform: scale(1.22); }
}
@keyframes gems-tab-notification-ring {
  0%, 92% { opacity: 0; transform: scale(1); }
  93% { opacity: .6; transform: scale(1); }
  99%, 100% { opacity: 0; transform: scale(2); }
}
@media (prefers-reduced-motion: reduce) {
  .gems-main-tab__notification, .gems-main-tab__notification::after { animation: none; }
}

.gems-main-menu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}

/* Shared currency / energy / crystals pill (dual class for legacy EnergyChip CSS). */
.gems-currency-chip,
.gems-energy-chip {
  --gems-currency-chip-w: calc(32px * 989 / 240 - 10px);
  position: relative;
  height: 32px;
  /* Prefer design width; only compress toward min-width if the bar is tight. */
  width: var(--gems-currency-chip-w);
  min-width: 100px;
  max-width: var(--gems-currency-chip-w);
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.gems-currency-chip__bg,
.gems-energy-chip__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.gems-currency-chip__add,
.gems-energy-chip__add {
  position: absolute;
  left: -10px;
  top: 50%;
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: auto;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: block;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}

.gems-currency-chip__add:active,
.gems-energy-chip__add:active {
  transform: translateY(-50%) scale(0.88);
}

.gems-currency-chip__add img,
.gems-energy-chip__add img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.gems-currency-chip__add--static,
.gems-energy-chip__add--static {
  cursor: default;
  object-fit: contain;
}

.gems-currency-chip__icon,
.gems-energy-chip__icon {
  position: absolute;
  right: -12px;
  top: 50%;
  height: 54px;
  width: auto;
  aspect-ratio: 46 / 62;
  transform: translateY(calc(-50% + 6px));
  transform-origin: center;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.gems-currency-chip__icon--crystal {
  right: -8px;
  height: 42px;
  aspect-ratio: 201 / 318;
  transform: translateY(-50%);
}

.gems-currency-chip__icon--round {
  right: -8px;
  height: 42px;
  aspect-ratio: 1;
  transform: translateY(-50%);
}

.gems-currency-chip__icon--breathe,
.gems-energy-chip__icon--breathe {
  animation: gems-currency-breathe 2.6s ease-in-out infinite;
}

.gems-currency-chip__value,
.gems-energy-chip__value {
  position: relative;
  z-index: 1;
  display: block;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  text-shadow: none;
}

/* Timer countdown only — abbreviated counts (`55.5k`) keep the full value size. */
.gems-currency-chip__value--timer,
.gems-energy-chip__value--timer {
  font-size: 10px;
  letter-spacing: -0.03em;
}

@keyframes gems-currency-breathe {
  0%,
  100% {
    scale: 1;
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  50% {
    scale: 1.1;
    filter: drop-shadow(0 0 6px rgba(180, 235, 255, 0.7));
  }
}

@media (prefers-reduced-motion: reduce) {
  .gems-currency-chip__icon--breathe,
  .gems-energy-chip__icon--breathe {
    animation: none;
  }
}

.gems-main-top-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  height: calc(
    var(--gems-main-top-hud-h, 56px) + var(--gems-main-top-hud-top-gap, 16px) +
      env(safe-area-inset-top, 0px)
  );
  padding: calc(
      env(safe-area-inset-top, 0px) + var(--gems-main-top-hud-top-gap, 16px)
    )
    max(12px, env(safe-area-inset-left, 0px)) 6px
    max(12px, env(safe-area-inset-right, 0px));
  pointer-events: none;
  touch-action: none;
}

.gems-main-top-hud__level {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  pointer-events: none;
}

.gems-main-top-hud__level-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.gems-main-top-hud__level-ring-track,
.gems-main-top-hud__level-ring-progress {
  fill: none;
  stroke-width: 4;
}

.gems-main-top-hud__level-ring-track {
  stroke: rgba(255, 255, 255, 0.16);
}

.gems-main-top-hud__level-ring-progress {
  stroke: #1bcc79;
  stroke-linecap: round;
  transition: stroke-dashoffset 260ms ease;
}

.gems-main-top-hud__level-core {
  position: absolute;
  inset: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #3b6fb8;
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.24);
}

.gems-main-top-hud__level-value {
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.gems-main-top-hud__currencies {
  /*
   * Shrink-wrap the pair (chips keep their size). Compress gap/padding when
   * the middle column is narrow — do not stretch across the full track.
   */
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 48px);
  padding-inline: clamp(4px, 1.5vw, 12px);
  box-sizing: border-box;
  pointer-events: none;
}

/* Currency pills: @games/shared CurrencyChip (currencyChip.css). */

.gems-main-top-hud__settings {
  justify-self: end;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  /* Soft dark halo keeps the gear legible if a bright background ball drifts behind it. */
  background: radial-gradient(
    circle at 50% 50%,
    rgba(5, 5, 32, 0.55) 0%,
    rgba(5, 5, 32, 0.32) 52%,
    rgba(5, 5, 32, 0) 72%
  );
  cursor: pointer;
  touch-action: none;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.gems-main-top-hud__settings img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .gems-main-top-hud__level-ring-progress {
    transition: none;
  }
}

html,
body,
#root {
  margin: 0;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  background: #100814;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.tangle-app {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}

.tangle-main-menu {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(180, 70, 110, 0.28), transparent 58%),
    linear-gradient(180deg, #2a1420 0%, #140c16 55%, #0c0810 100%);
}

/* Tabs include the iOS home-indicator inset in their outer height. Reserve
   that same space for the stage instead of letting tabs cover island actions. */
.tangle-main-menu .gems-main-menu__stage--play:not(.gems-main-menu__stage--immersive) {
  bottom: calc(var(--gems-main-tab-bar-h, 84px) + env(safe-area-inset-bottom, 0px));
}

.tangle-main-menu .gems-main-top-hud__level-ring-progress {
  stroke: #e2b657;
}

.tangle-main-menu .gems-main-top-hud__level-core {
  background: #4a2c3a;
}

.tangle-main-menu .gems-currency-chip__value {
  color: #fff2ca;
}

.tangle-tab-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 100%;
  padding: 24px 20px calc(var(--gems-main-tab-bar-h, 84px) + 24px);
  box-sizing: border-box;
  color: #f8fafc;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  text-align: center;
}

.tangle-tab-panel__title {
  margin: 0;
  font-size: clamp(20px, 4.5vw, 28px);
  font-weight: 700;
}

.tangle-tab-panel__body {
  margin: 0;
  max-width: 28rem;
  font-size: clamp(14px, 3.2vw, 16px);
  line-height: 1.45;
  opacity: 0.85;
}

.tangle-play-stage,
.tangle-game-host {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.tangle-game-host canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.tangle-play-launch {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--gems-main-top-hud-h, 56px) + var(--gems-main-top-hud-top-gap, 16px) + 8px)
    clamp(16px, 5vw, 32px)
    calc(var(--gems-main-tab-bar-h, 84px) + clamp(16px, 4vw, 28px));
  box-sizing: border-box;
}

.tangle-play-launch__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 42%, rgba(226, 182, 87, 0.08), rgba(12, 8, 16, 0.72) 74%);
  pointer-events: none;
}

.tangle-play-launch__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(100%, 24rem);
  text-align: center;
  font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

.tangle-play-launch__eyebrow {
  margin: 0;
  font-size: clamp(13px, 3vw, 15px);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f2cf7d;
}

.tangle-play-launch__title {
  margin: 0;
  font-size: clamp(22px, 5.4vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: #fff7e5;
  text-wrap: balance;
}

.tangle-play-launch__hint,
.tangle-play-launch__level {
  margin: 0;
  color: rgba(238, 226, 200, 0.86);
  font-size: clamp(13px, 3vw, 15px);
  line-height: 1.4;
}

.tangle-play-launch__level-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.tangle-play-launch__level-btn,
.tangle-play-launch__cta,
.tangle-play-hud__ghost,
.tangle-booster {
  position: relative;
}

.tangle-play-launch__level-btn::after,
.tangle-play-launch__cta::after,
.tangle-play-hud__ghost::after,
.tangle-booster::after {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 1;
  border-radius: inherit;
}

.tangle-play-launch__level-btn {
  width: 88px;
  height: 88px;
  border: 1px solid rgba(242, 207, 125, 0.35);
  border-radius: 16px;
  background: rgba(20, 10, 16, 0.62);
  color: #fff7e5;
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.tangle-play-launch__level-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.tangle-play-launch__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 16.5rem);
  min-height: 104px;
  margin-top: 8px;
  padding: 0 28px;
  border: 2px solid #6b421d;
  border-radius: 20px;
  background: linear-gradient(180deg, #f5c85f 0%, #d99a31 55%, #b86b1f 100%);
  box-shadow:
    0 0 0 1px rgba(255, 244, 204, 0.28) inset,
    0 5px 0 #6f3d16,
    0 11px 28px rgba(100, 57, 18, 0.42);
  color: #2a1a0e;
  font: inherit;
  font-size: clamp(22px, 5.6vw, 28px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.tangle-play-launch__cta-glow {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 20%, rgba(255, 245, 207, 0.46), transparent 55%);
  pointer-events: none;
  z-index: -1;
}

.tangle-play-launch__cta:not(:disabled):active {
  transform: translateY(1px) scale(0.98);
}

.tangle-play-hud {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

.tangle-play-modal,
.tangle-play-hud__ghost,
.tangle-booster {
  pointer-events: auto;
}

/* Transparent HUD layout boxes must never intercept board gestures. */
.tangle-play-hud__top,
.tangle-play-hud__boosters {
  pointer-events: none;
}

/* Keep real buttons interactive, including the editor save action. */
.tangle-play-hud__top button,
.tangle-play-hud__boosters button {
  pointer-events: auto;
}

/* The generic oversized hit target overlaps bottom pegs on small screens. */
.tangle-play-hud button::after {
  inset: 0;
  pointer-events: none;
}
.tangle-play-hud__boosters .tangle-booster__count {
  pointer-events: none;
}

.tangle-play-hud__top {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  left: max(10px, env(safe-area-inset-left, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.tangle-play-hud__title-wrap {
  min-width: 0;
  text-align: center;
  color: #fff4dc;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.tangle-play-hud__kicker {
  margin: 0;
  overflow: hidden;
  font-weight: 800;
  font-size: clamp(14px, 3.4vw, 18px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tangle-play-hud__stats {
  margin: 4px 0 0;
  font-size: 12px;
  opacity: 0.88;
}

.tangle-play-hud__coach {
  position: absolute;
  left: 50%;
  top: max(118px, calc(env(safe-area-inset-top, 0px) + 108px));
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 22rem);
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(226, 182, 87, 0.45);
  background: rgba(20, 10, 16, 0.82);
  color: #fff4dc;
  font-size: clamp(13px, 3.2vw, 16px);
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  text-wrap: balance;
}

.tangle-play-hud__ghost {
  min-height: 80px;
  padding: 12px 16px;
  border: 1px solid rgba(226, 182, 87, 0.4);
  border-radius: 18px;
  background: rgba(20, 10, 16, 0.72);
  color: #f8e7c2;
  font-size: clamp(16px, 3.8vw, 20px);
  font-weight: 700;
  cursor: pointer;
}

.tangle-booster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 86px;
  margin: 0;
  padding: 2px 0 0;
  border: 0;
  background: transparent;
  color: #fff4dc;
  font: inherit;
  cursor: pointer;
  touch-action: none;
}

.tangle-booster::after {
  border-radius: 50%;
}

.tangle-booster__face {
  position: relative;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid #6b421d;
  background:
    radial-gradient(circle at 32% 26%, #fff6df 0%, #ead4b0 46%, #c9a57a 100%);
  box-shadow:
    0 0 0 3px #f0c45a,
    0 5px 0 #6f3d16,
    0 10px 16px rgba(48, 22, 10, 0.36),
    inset 0 4px 0 rgba(255, 255, 255, 0.5),
    inset 0 -7px 10px rgba(92, 52, 18, 0.2);
  color: #4a2a12;
}

.tangle-booster__face::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(107, 66, 29, 0.18);
  background:
    radial-gradient(circle at 30% 34%, rgba(140, 90, 40, 0.14) 0 7%, transparent 8%),
    radial-gradient(circle at 70% 62%, rgba(140, 90, 40, 0.1) 0 5%, transparent 6%);
  pointer-events: none;
}

.tangle-booster__face svg {
  position: relative;
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 1px 0 rgba(255, 248, 230, 0.55));
}

.tangle-booster--undo .tangle-booster__face {
  color: #157a88;
  box-shadow:
    0 0 0 3px #3ddcff,
    0 5px 0 #6f3d16,
    0 10px 16px rgba(48, 22, 10, 0.36),
    inset 0 4px 0 rgba(255, 255, 255, 0.5),
    inset 0 -7px 10px rgba(92, 52, 18, 0.2);
}

.tangle-booster--cut .tangle-booster__face {
  color: #b43a68;
  box-shadow:
    0 0 0 3px #f472b6,
    0 5px 0 #6f3d16,
    0 10px 16px rgba(48, 22, 10, 0.36),
    inset 0 4px 0 rgba(255, 255, 255, 0.5),
    inset 0 -7px 10px rgba(92, 52, 18, 0.2);
}

.tangle-booster--hint .tangle-booster__face {
  color: #8a5410;
}

.tangle-booster__label {
  max-width: 100%;
  overflow: hidden;
  color: #fff4dc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

.tangle-booster__count {
  position: absolute;
  top: -2px;
  right: 2px;
  z-index: 2;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 2px solid #6b421d;
  border-radius: 999px;
  background: linear-gradient(180deg, #f5c85f 0%, #d99a31 100%);
  box-shadow: 0 2px 0 #6f3d16;
  color: #2a1a0e;
  font-size: 13px;
  font-weight: 800;
  line-height: 22px;
}

.tangle-booster:not(:disabled):active {
  transform: translateY(2px);
}

.tangle-booster:not(:disabled):active .tangle-booster__face {
  box-shadow:
    0 0 0 3px #f0c45a,
    0 2px 0 #6f3d16,
    0 4px 10px rgba(48, 22, 10, 0.28),
    inset 0 4px 0 rgba(255, 255, 255, 0.5),
    inset 0 -7px 10px rgba(92, 52, 18, 0.2);
}

.tangle-booster--undo:not(:disabled):active .tangle-booster__face {
  box-shadow:
    0 0 0 3px #3ddcff,
    0 2px 0 #6f3d16,
    0 4px 10px rgba(48, 22, 10, 0.28),
    inset 0 4px 0 rgba(255, 255, 255, 0.5),
    inset 0 -7px 10px rgba(92, 52, 18, 0.2);
}

.tangle-booster--cut:not(:disabled):active .tangle-booster__face {
  box-shadow:
    0 0 0 3px #f472b6,
    0 2px 0 #6f3d16,
    0 4px 10px rgba(48, 22, 10, 0.28),
    inset 0 4px 0 rgba(255, 255, 255, 0.5),
    inset 0 -7px 10px rgba(92, 52, 18, 0.2);
}

.tangle-play-hud__boosters {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 14px;
  width: min(100% - 12px, 22rem);
}

.tangle-author-save {
  align-self: center;
  min-width: 178px;
  min-height: 62px;
  margin: 0;
  padding: 10px 18px;
  border-radius: 22px;
  font-size: clamp(15px, 4.2vw, 19px);
}

.tangle-play-hud__top .tangle-booster {
  width: 72px;
  justify-self: start;
}

.tangle-play-hud__top .tangle-booster--ghost {
  justify-self: end;
}

.tangle-play-hud__top .tangle-booster__face {
  width: 60px;
  height: 60px;
}

.tangle-play-hud__top .tangle-booster__face svg {
  width: 28px;
  height: 28px;
}

.tangle-booster--ghost {
  visibility: hidden;
  pointer-events: none;
}

.tangle-booster--ghost::after {
  content: none;
}

.tangle-booster:disabled,
.tangle-play-launch__cta:disabled {
  opacity: 0.42;
  cursor: default;
}

.tangle-play-modal {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  background: rgba(8, 4, 10, 0.62);
}

.tangle-play-modal__card {
  width: min(100%, 22rem);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(226, 182, 87, 0.45);
  background: linear-gradient(180deg, #3a2230, #1a1016);
  color: #fff7e5;
  text-align: center;
  box-sizing: border-box;
  overflow: visible;
}

.tangle-play-modal__card h2 {
  margin: 0;
}

.tangle-play-modal__card p {
  margin: 0;
  opacity: 0.88;
}

.tangle-clear {
  gap: 8px;
}

.tangle-clear .tangle-play-launch__cta {
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  margin-top: 4px;
}

.tangle-clear__done {
  margin: 0;
  color: #14c43a;
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
  animation: tangle-clear-pop 420ms cubic-bezier(0.18, 1.28, 0.32, 1);
}

.tangle-clear h2 {
  font-size: clamp(15px, 3.8vw, 18px);
  font-weight: 700;
  line-height: 1.25;
  opacity: 0.92;
}

.tangle-clear__stars {
  margin: 0;
  color: #ffe96a;
  font-size: clamp(26px, 7vw, 34px);
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
}

.tangle-clear__loot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 2px 0 4px;
  padding: 0;
  list-style: none;
  flex-shrink: 0;
}

.tangle-clear__loot-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(226, 182, 87, 0.4);
  background: rgba(20, 10, 16, 0.55);
  color: #fff7e5;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.tangle-clear__loot-item img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  -webkit-user-drag: none;
}

.tangle-clear__loot-item--tag {
  color: #c8f5d2;
  border-color: rgba(20, 196, 58, 0.45);
}

.tangle-clear__loot-item--bonus {
  color: #2a1a0e;
  border-color: #6b421d;
  background: linear-gradient(180deg, #f5c85f 0%, #d99a31 100%);
  animation: tangle-clear-pop 520ms cubic-bezier(0.18, 1.28, 0.32, 1);
}

.tangle-clear__meter {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 247, 229, 0.16);
}

.tangle-clear__meter::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #14c43a, #f5c85f);
  animation: tangle-clear-meter linear forwards;
}

@keyframes tangle-clear-pop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.84);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes tangle-clear-meter {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.tangle-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.tangle-settings__langs {
  display: flex;
  gap: 6px;
}

.tangle-settings__row button,
.tangle-settings__langs button {
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(226, 182, 87, 0.4);
  background: #24141c;
  color: #f8e7c2;
}

.tangle-settings__langs button.is-on {
  background: #7a3e5a;
}

.tangle-lb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(100%, 22rem);
}

.tangle-lb__row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(36, 20, 28, 0.8);
  text-align: left;
}

.tangle-lb__row--you {
  outline: 2px solid #e2b657;
  background: #4a2c3a;
}

.tangle-lb__gap {
  opacity: 0.5;
  padding: 4px 0 10px;
}

@media (max-height: 520px) {
  .tangle-booster__label {
    display: none;
  }

  .tangle-booster__face,
  .tangle-play-hud__top .tangle-booster__face {
    width: 52px;
    height: 52px;
  }

  .tangle-play-hud__coach {
    top: max(78px, calc(env(safe-area-inset-top, 0px) + 70px));
  }
}

.tangle-editor {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: max(8px, env(safe-area-inset-top, 0px))
    max(8px, env(safe-area-inset-right, 0px))
    max(8px, env(safe-area-inset-bottom, 0px))
    max(8px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  background: rgba(10, 6, 12, 0.96);
  color: #fff4dc;
  font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  pointer-events: auto;
  overflow: hidden;
}

.tangle-editor__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
}

.tangle-editor__title-wrap {
  min-width: 0;
}

.tangle-editor__kicker {
  margin: 0;
  color: #f5c85f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.tangle-editor h1 {
  margin: 0;
  font-size: clamp(16px, 3.8vw, 22px);
  line-height: 1.2;
}

.tangle-editor__top-actions,
.tangle-editor__tools,
.tangle-editor__row,
.tangle-editor__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tangle-editor__tools {
  flex-shrink: 0;
  margin: 8px 0;
}

.tangle-editor__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  gap: 10px;
  min-height: 0;
  flex: 1;
}

.tangle-editor__board-wrap {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tangle-editor__board {
  width: 100%;
  height: auto;
  max-height: 100%;
  flex: 1;
  min-height: 0;
  border-radius: 16px;
  background: #cbb89a;
  touch-action: none;
}

.tangle-editor__board line,
.tangle-editor__board path {
  cursor: pointer;
}

.tangle-editor__felt {
  fill: #efe4d2;
}

.tangle-editor__well {
  fill: #4a3f35;
  stroke: #c5b49a;
  stroke-width: 0.45;
  cursor: pointer;
}

.tangle-editor__well.is-off {
  fill: transparent;
  stroke: rgba(74, 63, 53, 0.45);
  stroke-dasharray: 1.2 1;
}

.tangle-editor__well.is-pending {
  stroke: #f5c85f;
  stroke-width: 0.8;
}

.tangle-editor__well.is-busy {
  stroke: #6b421d;
}

.tangle-editor__cross {
  fill: #2a1a0e;
  pointer-events: none;
}

.tangle-editor__pid {
  fill: #6b421d;
  font-size: 2.4px;
  text-anchor: middle;
  pointer-events: none;
}

.tangle-editor__hint,
.tangle-editor__meta {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.82;
}

.tangle-editor__side {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.tangle-editor__side section {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 182, 87, 0.22);
}

.tangle-editor__side h2 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tangle-editor__field {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}

.tangle-editor__field input,
.tangle-editor__row input,
.tangle-editor__paste {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(226, 182, 87, 0.4);
  border-radius: 10px;
  background: rgba(20, 10, 16, 0.72);
  color: #fff4dc;
  font: inherit;
  user-select: text;
  -webkit-user-select: text;
}

.tangle-editor__btn,
.tangle-editor__chip {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(226, 182, 87, 0.4);
  border-radius: 12px;
  background: rgba(20, 10, 16, 0.72);
  color: #fff4dc;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.tangle-editor__btn--cta,
.tangle-editor__chip.is-on,
.tangle-editor__rope.is-on {
  border-color: #6b421d;
  background: linear-gradient(180deg, #f5c85f, #d99a31);
  color: #2a1a0e;
}

.tangle-editor__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.tangle-editor__swatch {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 244, 220, 0.25);
  border-radius: 50%;
  cursor: pointer;
}

.tangle-editor__swatch.is-on {
  border-color: #fff4dc;
  box-shadow: 0 0 0 2px #6b421d;
}

.tangle-editor__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tangle-editor__list li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.tangle-editor__rope {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid rgba(226, 182, 87, 0.3);
  border-radius: 10px;
  background: rgba(20, 10, 16, 0.55);
  color: inherit;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.tangle-editor__rope i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tangle-editor__x {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(20, 10, 16, 0.55);
  color: #fff4dc;
  font-size: 22px;
  cursor: pointer;
}

.tangle-editor__paste {
  min-height: 72px;
  margin: 8px 0;
  resize: none;
}

.tangle-editor__toast {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 12px;
  background: #f5c85f;
  color: #2a1a0e;
  font-weight: 800;
}

@media (max-width: 720px) {
  .tangle-editor__body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 42%);
  }

  .tangle-editor__field {
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }
}

.tangle-3d-tools { position:absolute; z-index:40; top:8px; left:8px; right:8px; padding:10px; border-radius:12px; background:rgba(35,28,36,.94); color:#fff; font:14px/1.4 sans-serif; pointer-events:auto; max-height:40%; overflow:auto; }
.tangle-3d-tools__row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tangle-3d-tools__row + .tangle-3d-tools__row { margin-top:8px; }
.tangle-3d-tools button { min-height:36px; padding:6px 10px; border:1px solid #8b7f95; border-radius:7px; background:#514455; color:white; cursor:pointer; }
.tangle-3d-tools button:disabled { opacity:.4; cursor:default; }
.tangle-3d-tools p { margin:6px 0 0; font-size:12px; }
.tangle-play-stage:has(.tangle-3d-tools) .tangle-play-hud__top { top:var(--editor-toolbar-bottom,72px); }

/* Cream board and bright toy controls, with no rendered or CSS drop shadows. */
.tangle-play-hud__kicker { color:#a25843; font-size:clamp(22px,4vw,34px); font-weight:900; -webkit-text-stroke:1px #fffaf0; text-shadow:none; }
.tangle-play-hud__stats { display:inline-block; margin:8px auto 0; padding:8px 16px; border-radius:12px; background:#d6bb92; color:#794c2b; font-size:15px; font-weight:800; text-shadow:none; }
.tangle-play-hud__coach { background:#e2cfae; border:1px solid #d2b88d; color:#795638; box-shadow:none; text-shadow:none; }
.tangle-booster .tangle-booster__face { border-radius:20px; border:3px solid #166181; background:linear-gradient(145deg,#65e2ff 0%,#0eb9ef 34%,#0684c7 100%); box-shadow:none; color:#fff9df; }
.tangle-booster .tangle-booster__face::before { inset:3px; border-radius:14px; border-top:3px solid #b9f4ff; background:none; box-shadow:none; }
.tangle-booster .tangle-booster__face svg { width:44px; height:44px; filter:none; }
.tangle-booster__label { color:#805939; text-shadow:none; }
.tangle-booster .tangle-booster__count { border-radius:50%; background:#79dc28; border:2px solid #408524; color:white; box-shadow:none; text-shadow:none; }
.tangle-booster--cut .tangle-booster__face { color:#ffdb56; }
.tangle-booster--hint .tangle-booster__face { color:#fff276; }
.tangle-booster--menu .tangle-booster__face { background:#e0c79f; border-color:#bd9462; color:#956338; }
.tangle-booster--menu .tangle-booster__face::before { border-color:#fff1d8; }
.tangle-booster .tangle-booster__count { top:auto; right:0; bottom:14px; min-width:30px; height:30px; line-height:26px; font-size:20px; }
.tangle-3d-tools input:not([type=file]), .tangle-3d-tools select { box-sizing:border-box; max-width:100%; min-height:36px; border:1px solid #8b7f95; border-radius:7px; padding:6px 8px; background:#302734; color:white; }

/* Compact booster cards keep quantities separate from the action icons. */
.tangle-play-hud__boosters { gap:10px; width:min(calc(100% - 24px),340px); }
.tangle-play-hud__boosters .tangle-booster {
  --booster-ink:#246963; --booster-wash:#d9eee5;
  position:relative; box-sizing:border-box; flex:1; min-width:0; width:auto;
  gap:6px; padding:14px 6px 9px; border:1px solid #d6c7ac; border-bottom-width:3px;
  border-radius:19px; background:#fff9eb; color:var(--booster-ink); touch-action:manipulation;
}
.tangle-play-hud__boosters .tangle-booster--cut { --booster-ink:#a04749; --booster-wash:#f9ded5; }
.tangle-play-hud__boosters .tangle-booster--time { --booster-ink:#665399; --booster-wash:#e9e1f5; }
.tangle-play-hud__boosters .tangle-booster__face {
  width:52px; height:52px; border:0; border-radius:16px;
  background:var(--booster-wash); color:var(--booster-ink); box-shadow:none;
}
.tangle-play-hud__boosters .tangle-booster__face::before { display:none; }
.tangle-play-hud__boosters .tangle-booster__face svg { width:36px; height:36px; filter:none; }
.tangle-play-hud__boosters .tangle-booster__label {
  max-width:100%; color:#534332; font-size:13px; font-weight:800; letter-spacing:0;
  text-transform:none; text-shadow:none; line-height:18px;
}
.tangle-play-hud__boosters .tangle-booster__count {
  position:absolute; top:-8px; right:7px; bottom:auto; height:21px; min-width:27px;
  padding:0 6px; box-sizing:border-box; border:2px solid #fff9eb; border-radius:8px;
  background:var(--booster-ink); color:#fff; font-size:11px; line-height:17px;
  font-weight:800; font-variant-numeric:tabular-nums; box-shadow:none; text-shadow:none;
}
.tangle-play-hud__boosters .tangle-booster:focus-visible { outline:3px solid var(--booster-ink); outline-offset:3px; }
.tangle-play-hud__boosters .tangle-booster:active:not(:disabled) { transform:translateY(2px); }
.tangle-play-hud__boosters .tangle-booster:active .tangle-booster__face { transform:none; box-shadow:none; }
.tangle-play-hud__boosters .tangle-booster:disabled { opacity:.48; cursor:default; filter:grayscale(.4); }
@media (max-height:600px) {
  .tangle-play-hud__boosters .tangle-booster { padding-top:9px; padding-bottom:6px; gap:3px; }
  .tangle-play-hud__boosters .tangle-booster__face { width:40px; height:40px; border-radius:12px; }
  .tangle-play-hud__boosters .tangle-booster__face svg { width:29px; height:29px; }
}

/* Purchases live inside their framed product cards, in the same scroll pane. */
.tangle-store {
  position:absolute; inset:8px 0; box-sizing:border-box; padding:0 14px 18px;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y;
  scrollbar-width:thin; scrollbar-color:#887395 transparent; color:#fff5df;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.tangle-store__title { position:relative; display:grid; place-items:center; width:min(340px,100%); aspect-ratio:3195/618; margin:0 auto 20px; }
.tangle-store__title > img { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.tangle-store__title h2 { position:relative; margin:0; font-family:inherit; font-weight:800; font-size:25px; line-height:1.2; }
.tangle-store__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:960px; margin:0 auto; padding:0; list-style:none; }
.tangle-store__item { min-width:0; --store-ink:#9ff5e3; --store-wash:#3b6a70; }
.tangle-store__item--scissors { --store-ink:#ffd2da; --store-wash:#914964; }
.tangle-store__item--hint { --store-ink:#e6d3ff; --store-wash:#70569b; }
.tangle-store__item--shield { --store-ink:#c7ffb2; --store-wash:#466e55; }
.tangle-store__frame { height:100%; box-sizing:border-box; }
.tangle-store__content { display:flex; flex-direction:column; align-items:center; height:100%; box-sizing:border-box; padding:12px; gap:14px; text-align:center; }
.tangle-store__content h3 { margin:0; font-family:inherit; font-size:17px; font-weight:800; line-height:1.3; }
.tangle-store__art { position:relative; display:grid; place-items:center; flex-shrink:0; width:88px; height:88px; margin:4px 0; border-radius:26px; background:linear-gradient(145deg,var(--store-wash),#302c50); border:1px solid #ffffff30; color:var(--store-ink); }
.tangle-store__art svg { width:62px; height:62px; }
.tangle-store__art > span { position:absolute; bottom:-7px; right:-9px; padding:3px 8px; border:2px solid #3b3557; border-radius:9px; background:var(--store-ink); color:#30263c; font-size:14px; font-weight:900; line-height:18px; }
.tangle-store__content p { flex:1; margin:0; max-width:240px; font-size:13px; line-height:1.5; color:#ded6eb; }
.tangle-store__buy { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:44px; box-sizing:border-box; padding:8px 12px; border:1px solid #e6bd78; border-bottom:3px solid #a77d48; border-radius:11px; background:linear-gradient(#ffe2a2,#eac07b); color:#4e3421; font:inherit; font-size:14px; font-weight:800; cursor:pointer; touch-action:manipulation; }
.tangle-store__price { display:inline-flex; align-items:center; gap:3px; font-variant-numeric:tabular-nums; }
.tangle-store__price img { width:19px; height:25px; object-fit:contain; }
.tangle-store__buy:disabled { opacity:.45; cursor:default; }
.tangle-store__buy:focus-visible { outline:3px solid var(--store-ink); outline-offset:3px; }
.tangle-store__buy:active:not(:disabled) { transform:translateY(1px); }
@media (max-width:600px) {
  .tangle-store { padding-inline:10px; }
  .tangle-store__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .tangle-store__content { padding:7px 4px; gap:12px; }
  .tangle-store__content h3 { font-size:14px; min-height:36px; display:flex; align-items:center; }
  .tangle-store__content p { font-size:12px; }
  .tangle-store__buy { padding:7px 5px; font-size:12px; gap:3px; }
  .tangle-store__art { width:72px; height:72px; border-radius:22px; }
  .tangle-store__art svg { width:52px; height:52px; }
}

/* Reserve both edge controls even when the currency labels need to shrink. */
.tangle-main-menu .gems-main-top-hud {
  grid-template-columns:44px minmax(0,1fr) 44px;
  padding-left:max(12px,env(safe-area-inset-left,0px));
  padding-right:max(12px,env(safe-area-inset-right,0px));
}
@media (max-width:480px) {
  .tangle-main-menu .gems-main-top-hud { gap:8px; }
  .tangle-main-menu .gems-main-top-hud__currencies { width:100%; gap:8px; padding-inline:0; }
  .tangle-main-menu .gems-main-top-hud .gems-currency-chip { min-width:0; flex:1 1 0; }
  .tangle-main-menu .gems-main-top-hud .gems-currency-chip__add { left:0; width:26px; height:32px; }
  .tangle-main-menu .gems-main-top-hud .gems-currency-chip__icon { right:0; width:22px; height:32px; transform:translateY(-50%); }
  .tangle-main-menu .gems-main-top-hud .gems-currency-chip__value { font-size:13px; }
  .tangle-main-menu .gems-main-top-hud .gems-currency-chip__value--timer { font-size:10px; }
}

.tangle-play-stage--browsing .tangle-game-host { filter:blur(6px); }
.tangle-play-launch__level-number { display:block; margin-bottom:5px; color:#f2cf7d; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }

.tangle-series { position:absolute; inset:8px 0; overflow:auto; overscroll-behavior:contain; touch-action:pan-y; box-sizing:border-box; padding:0 12px 16px; color:#fff4de; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.tangle-series__frame { width:min(440px,100%); margin:0 auto 16px; box-sizing:border-box; }
.tangle-series__body { padding:16px; display:flex; flex-direction:column; gap:16px; text-align:center; }
.tangle-series h2,.tangle-series h3,.tangle-series p { margin:0; }
.tangle-series h2 { font-size:24px; line-height:1.25; }
.tangle-series p { font-size:14px; line-height:1.5; color:#ddd6eb; }
.tangle-series__hero { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; font-size:28px; line-height:1.3; color:#ffe09b; }
.tangle-series__record { margin-top:-8px!important; }
.tangle-series__today { padding:14px; border:1px solid #b9d9b344; border-radius:14px; background:#b9d9b310; }
.tangle-series__today strong { display:block; margin-bottom:6px; color:#ccefb7; font-size:16px; }
.tangle-series__shield { padding-top:16px; border-top:1px solid #ffffff24; display:flex; flex-direction:column; gap:10px; text-align:left; }
.tangle-series button { font:inherit; cursor:pointer; min-height:44px; touch-action:manipulation; border:1px solid #b2aac966; border-radius:12px; color:#fff4de; background:#25263f; }
.tangle-series button:disabled { opacity:.4; cursor:default; }
.tangle-series button:focus-visible { outline:3px solid #ffe09b; outline-offset:2px; }
.tangle-series__buy { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 12px; font-size:14px!important; }
.tangle-series__buy > span:last-child { display:flex; align-items:center; gap:5px; }
.tangle-series__buy img { width:19px; height:25px; object-fit:contain; }
.tangle-series .tangle-series__play { background:#f2cc88; color:#493422; font-weight:800; }
.tangle-series__month { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:8px; align-items:center; }
.tangle-series__month h3 { font-size:17px; line-height:1.35; text-transform:capitalize; }
.tangle-series__month button { font-size:26px; }
.tangle-series__calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.tangle-series__weekday { font-size:12px; color:#c5bcd4; padding-bottom:4px; }
.tangle-series__day { display:grid; place-items:center; aspect-ratio:1; border-radius:10px; background:#24263e88; border:1px solid #ffffff12; font-size:14px; font-weight:700; }
.tangle-series__day.is-empty { visibility:hidden; }
.tangle-series .is-active { background:linear-gradient(#ecb146,#b75c32); }
.tangle-series .is-frozen { background:#426d9e; }
.tangle-series .is-today { outline:2px solid #ffe57b; outline-offset:-2px; }
.tangle-series__legend { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; font-size:11px; color:#ddd6eb; }
.tangle-series__legend span { display:inline-flex; align-items:center; gap:5px; }
.tangle-series__legend i { width:12px; height:12px; display:inline-block; border-radius:4px; }
@media(max-width:360px) { .tangle-series__body { padding:10px 6px; gap:14px; } .tangle-series__hero { font-size:24px; } .tangle-series__calendar { gap:4px; } }

.tangle-profile { position:absolute; inset:8px 0; overflow:auto; overscroll-behavior:contain; touch-action:pan-y; box-sizing:border-box; padding:0 12px 16px; color:#fff4de; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.tangle-profile__frame { width:min(480px,100%); margin:0 auto 16px; box-sizing:border-box; }
.tangle-profile__body { padding:18px; display:flex; flex-direction:column; gap:16px; }
.tangle-profile h2,.tangle-profile h3,.tangle-profile p,.tangle-profile dl,.tangle-profile dd { margin:0; }
.tangle-profile h2 { font-size:26px; line-height:1.25; overflow-wrap:anywhere; }
.tangle-profile h3 { font-size:19px; line-height:1.35; }
.tangle-profile p { font-size:14px; line-height:1.5; color:#d8d0e4; }
.tangle-profile__identity { display:flex; align-items:center; gap:16px; }
.tangle-profile__identity > img { width:76px; height:76px; border:2px solid #c4a377; border-radius:22px; flex-shrink:0; }
.tangle-profile__identity > div { min-width:0; display:flex; flex-direction:column; gap:5px; }
.tangle-profile .tangle-profile__eyebrow { font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; color:#eac88b; }
.tangle-profile__xp { display:flex; flex-direction:column; gap:8px; }
.tangle-profile__xp > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; font-size:13px; font-variant-numeric:tabular-nums; }
.tangle-profile progress { appearance:none; width:100%; height:9px; border:0; border-radius:8px; overflow:hidden; background:#242138; }
.tangle-profile progress::-webkit-progress-bar { background:#242138; border-radius:8px; }
.tangle-profile progress::-webkit-progress-value { background:linear-gradient(90deg,#d89c54,#ffe2a0); border-radius:8px; }
.tangle-profile progress::-moz-progress-bar { background:#f1c37a; border-radius:8px; }
.tangle-profile__stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tangle-profile__stats > div { padding:12px; background:#211e363d; border:1px solid #ffffff16; border-radius:12px; min-width:0; }
.tangle-profile dt { font-size:12px; line-height:1.4; color:#d8d0e4; margin-bottom:8px; }
.tangle-profile dd { font-size:23px; font-weight:800; color:#ffe1a0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.tangle-profile dd small { font-size:12px; font-weight:500; color:#c7bfd6; }
.tangle-profile__total { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; font-size:13px; color:#d8d0e4; }
.tangle-profile__total strong { overflow-wrap:anywhere; }
.tangle-profile__continue { min-height:46px; border:1px solid #edca89; border-bottom:3px solid #a77d48; border-radius:12px; padding:10px 16px; background:linear-gradient(#ffe2a2,#eac07b); color:#493422; font:inherit; font-size:15px; font-weight:800; cursor:pointer; touch-action:manipulation; }
.tangle-profile__continue:focus-visible { outline:3px solid #fff1cb; outline-offset:3px; }
@media(max-width:360px) { .tangle-profile__body { padding:12px 6px; } .tangle-profile__identity { gap:12px; } .tangle-profile__identity > img { width:60px; height:60px; border-radius:18px; } .tangle-profile dd { font-size:20px; } .tangle-profile__stats > div { padding:10px; } }

.tangle-play-launch__map { min-height:44px; padding:10px 24px; border:1px solid #e6c89180; border-radius:14px; background:#30232dd9; color:#fff2d4; font:inherit; font-weight:700; cursor:pointer; touch-action:manipulation; }
.tangle-map { position:absolute; inset:0; z-index:35; display:flex; flex-direction:column; color:#5e4533; background:radial-gradient(ellipse at 10% 40%,#f9efdc,transparent 60%),#ece0c7; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.tangle-map button { font:inherit; cursor:pointer; touch-action:manipulation; }
.tangle-map button:focus-visible,.tangle-play-launch__map:focus-visible { outline:3px solid #0c857c; outline-offset:4px; }
.tangle-map__header { flex-shrink:0; padding:calc(env(safe-area-inset-top,0px) + 12px) max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px)); background:#fcf5e6f5; border-bottom:1px solid #ceba9570; z-index:2; }
.tangle-map__heading { max-width:620px; margin:auto; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:12px; align-items:center; }
.tangle-map__heading button { width:44px; height:44px; background:#eadcc0; border:1px solid #cdb690; border-radius:14px; font-size:30px; color:#765333; }
.tangle-map h2,.tangle-map h3,.tangle-map p { margin:0; }
.tangle-map__heading p { text-transform:uppercase; letter-spacing:.09em; font-size:10px; font-weight:800; margin-bottom:3px; color:#927859; }
.tangle-map__heading h2 { font-size:20px; line-height:1.2; }
.tangle-map__heading > span { background:#dfecd8; color:#427449; border-radius:10px; padding:7px; font-size:12px; font-weight:800; }
.tangle-map__chapters { display:flex; gap:7px; max-width:620px; margin:12px auto 0; }
.tangle-map__chapters button { flex:1; min-width:0; padding:7px 3px; border:1px solid #d7c8ad; background:#f2e8d5; color:#826747; border-radius:10px; font-weight:800; }
.tangle-map__chapters button[aria-current] { background:#237e77; color:#fff; border-color:#237e77; }
.tangle-map__chapters span { display:block; font-size:9px; line-height:1.15; font-weight:500; margin-top:3px; }
.tangle-map__scroll { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:thin; }
.tangle-map__route { position:relative; width:min(100%,420px); margin:auto; }
.tangle-map__intro { position:absolute; top:24px; left:12%; width:76%; text-align:center; font-size:13px; line-height:1.4; color:#917858; }
.tangle-map__rope { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.tangle-map__stop { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; width:84px; }
.tangle-map__node { position:relative; width:62px; height:62px; border-radius:50%; border:5px solid #d4bd95; background:linear-gradient(145deg,#faedd3,#e1c99e); color:#7c6140; font-size:22px!important; font-weight:850!important; box-shadow:0 4px 0 #b89a6e,inset 0 2px 0 #fff8; }
.tangle-map__node.is-cleared { background:linear-gradient(145deg,#7dccbb,#339b92); border-color:#b2d7ba; color:#fff; box-shadow:0 4px 0 #528b73,inset 0 2px 0 #fff8; }
.tangle-map__stars { margin-top:7px; color:#976225; font-size:17px; line-height:1; letter-spacing:2px; background:#eee1c8df; border-radius:10px; padding:1px 5px; }
.tangle-map__boss { position:absolute; top:-15px; z-index:1; background:#7b4f80; color:#fff; border:2px solid #eee0c4; border-radius:9px; padding:2px 8px; text-transform:uppercase; font-size:9px; font-weight:800; }
.tangle-map .is-boss .tangle-map__node { background:linear-gradient(145deg,#bb8bc2,#81548d); border-color:#d9bed6; color:#fff; box-shadow:0 4px 0 #624468,inset 0 2px 0 #fff8; }
.tangle-map__end { position:absolute; bottom:20px; width:100%; text-align:center; font-size:12px; color:#9a805f; }
.tangle-map__selection { z-index:2; flex-shrink:0; background:#fff8eaf5; border-top:1px solid #c9b491; padding:14px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px)); display:flex; align-items:center; justify-content:center; gap:20px; }
.tangle-map__selection > div { max-width:390px; min-width:0; }
.tangle-map__selection p { font-size:11px; color:#9b6c4b; font-weight:800; margin-bottom:4px; }
.tangle-map__selection h3 { font-size:17px; line-height:1.3; }
.tangle-map__selection span { display:block; margin-top:6px; font-size:12px; color:#927047; }
.tangle-map__selection button { flex-shrink:0; min-height:48px; padding:10px 22px; border:1px solid #196961; border-bottom:3px solid #165a55; background:linear-gradient(#3ca99b,#278b81); color:#fff; font-size:15px; font-weight:800; border-radius:14px; }
@media(max-width:360px) { .tangle-map__heading h2 { font-size:17px; } .tangle-map__selection { gap:10px; padding-inline:12px; } .tangle-map__selection button { padding-inline:14px; } .tangle-map__selection h3 { font-size:14px; } .tangle-map__chapters span { display:none; } }
@media(max-height:500px) { .tangle-map__chapters span { display:none; } .tangle-map__header { padding-top:calc(env(safe-area-inset-top,0px) + 5px); } .tangle-map__selection { padding-top:7px; padding-bottom:calc(7px + env(safe-area-inset-bottom,0px)); } }

/* Selection belongs to the plug itself, leaving the route free of extra rings. */
.tangle-map .tangle-map__node.is-selected {
  background:linear-gradient(145deg,#ffe9ac,#e9b95e);
  border-color:#efd39b;
  color:#714a23;
  box-shadow:0 4px 0 #b38b4d,inset 0 2px 0 #fff9;
}
.tangle-map__stop.is-current::after {
  content:""; position:absolute; bottom:-9px;
  width:7px; height:7px; border-radius:2px;
  background:#996e35; transform:rotate(45deg);
}
.tangle-map__boss { white-space:nowrap; text-transform:none; letter-spacing:0; }

.tangle-archipelago { background:#b2d8d3; }
.tangle-archipelago .tangle-map__header { background:#f5f1e5; }
.tangle-archipelago__hint { text-align:center; margin:10px 0 0!important; color:#7f8876; font-size:12px; }
.tangle-archipelago__sea { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y; background:radial-gradient(ellipse at 15% 25%,#dcf2e6aa,transparent 50%),repeating-linear-gradient(170deg,transparent 0 90px,#ffffff13 91px 93px,transparent 94px 180px),#a9d3d1; }
.tangle-archipelago__chain { position:relative; display:flex; flex-direction:column; align-items:center; width:min(100%,640px); margin:auto; padding:24px 0 calc(40px + env(safe-area-inset-bottom,0px)); gap:32px; }
.tangle-island { position:relative; display:flex; flex-direction:column; align-items:center; width:76%; max-width:340px; flex-shrink:0; border:0; background:transparent; padding:0 8px 12px; color:#435e56; }
.tangle-island:nth-child(odd) { align-self:flex-start; margin-left:3%; }
.tangle-island:nth-child(even) { align-self:flex-end; margin-right:3%; }
.tangle-island::after { content:""; position:absolute; bottom:-28px; left:50%; height:24px; border-left:3px dotted #ffffffa0; transform:rotate(-24deg); }
.tangle-island:nth-child(even)::after { transform:rotate(24deg); }
.tangle-island:last-of-type::after { display:none; }
.tangle-island > svg { width:100%; height:auto; display:block; margin-top:-15px; pointer-events:none; }
.tangle-island__number { z-index:1; align-self:center; background:#f1f9e6; border:1px solid #9abaac; border-radius:20px; padding:5px 12px; font-size:11px; font-weight:800; color:#527765; }
.tangle-island__caption { display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 18px; margin-top:-13px; z-index:1; background:#fff8e7; border:1px solid #e2d7b9; border-bottom:3px solid #b1bba0; border-radius:18px; width:100%; box-sizing:border-box; }
.tangle-island__caption strong { font-size:18px; line-height:1.25; }
.tangle-island__caption > span { font-size:11px; color:#7d8c77; }
.tangle-island__caption em { font-style:normal; font-size:12px; font-weight:800; color:#47776c; }
.tangle-island .tangle-island__meter { display:block; width:100%; height:5px; border-radius:5px; background:#e2e6d3; overflow:hidden; margin:2px 0; }
.tangle-island__meter i { display:block; height:100%; background:#79ad86; border-radius:5px; }
.tangle-island.is-current .tangle-island__number { background:#477d70; color:#fff8df; border-color:#477d70; }
.tangle-island.is-current .tangle-island__caption { border-bottom-color:#538a77; }
.tangle-archipelago__horizon { font-size:13px; line-height:1.5; text-align:center; color:#527b79; max-width:260px; padding:20px 16px; }
.tangle-map__islands-link { display:block; margin:8px auto 0; min-height:36px; padding:7px 14px; background:#e5eddf; border:1px solid #bbcdb7; border-radius:12px; color:#487365; font-size:12px!important; font-weight:700!important; }
@media(max-width:360px) { .tangle-island { width:86%; } .tangle-island__caption strong { font-size:16px; } }
.tangle-map .tangle-island { touch-action:none; }

/* Rankings keep the personal goal and table aligned at every viewport width. */
.tangle-lb { gap: 20px; padding-inline: 16px; }
.tangle-lb > header, .tangle-lb__personal, .tangle-lb__group, .tangle-lb__unavailable { width: min(100%, 480px); box-sizing: border-box; }
.tangle-lb__eyebrow { display: block; margin-bottom: 6px; color: #e2bd80; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.tangle-lb__explain { margin: 10px auto 0; max-width: 350px; color: #c9baca; font-size: 13px; line-height: 1.5; }
.tangle-lb__personal { padding: 18px; border: 1px solid #b79460; border-radius: 20px; background: linear-gradient(125deg, #504263, #302a43); text-align: left; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 14px; }
.tangle-lb__personal > span { color: #dacee5; font-size: 13px; }
.tangle-lb__personal > strong { grid-column: 1; font-size: 30px; color: #ffe3a0; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.tangle-lb__personal > p { grid-column: 1 / -1; margin: 7px 0 0; color: #e6dfe9; font-size: 13px; line-height: 1.5; }
.tangle-lb__personal button { grid-column: 2; grid-row: 1 / 3; align-self: center; border: 1px solid #ffe5a0; background: linear-gradient(#ffe4a0, #dba853); color: #432d24; padding: 0 20px; min-height: 44px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.tangle-lb__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 10px; text-align: left; }
.tangle-lb__heading h3 { margin: 0; font-size: 15px; }
.tangle-lb__heading > span { font-size: 11px; color: #c9baca; }
.tangle-lb__list { width: 100%; }
.tangle-lb__row { grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 58px; box-sizing: border-box; padding: 10px; border: 1px solid #ffffff0d; background: #ffffff05; border-radius: 14px; }
.tangle-lb__rank { text-align: center; color: #c7b9c9; font-size: 13px; font-weight: 800; }
.tangle-lb__identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tangle-lb__avatar { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 11px; background: #58465f; color: #f9e6bd; font-weight: 800; font-size: 14px; }
.tangle-lb__name { min-width: 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.3; }
.tangle-lb__name small { display: block; color: #ffe4a0; font-size: 11px; margin-top: 3px; }
.tangle-lb__score { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tangle-lb__row--you { outline: none; border-color: #d8b16d; background: #54405a; }
.tangle-lb__row--medal .tangle-lb__rank { display: grid; place-items: center; width: 30px; height: 34px; border-radius: 50% 50% 42% 42%; background: linear-gradient(#ffe7a2,#bd883c); color: #513821; border: 1px solid #ffe6a7; }
.tangle-lb .medal-2 .tangle-lb__rank { background: linear-gradient(#e3e8f2,#8b98af); border-color: #d7e0f0; color: #303b52; }
.tangle-lb .medal-3 .tangle-lb__rank { background: linear-gradient(#efbc98,#ac7157); border-color: #eac0a4; color: #53332e; }
.tangle-lb__unavailable { color: #c9baca; font-size: 14px; line-height: 1.5; }
.tangle-lb__unavailable button { min-height: 44px; padding: 8px 20px; border: 1px solid #a58baf; border-radius: 12px; color: #fff; background: #483750; font: inherit; cursor: pointer; }
.tangle-lb button:focus-visible { outline: 3px solid #fff0bc; outline-offset: 3px; }
@media (max-width: 360px) {
  .tangle-lb__avatar { display: none; }
  .tangle-lb__row { gap: 6px; padding: 9px 8px; }
}

/* Launch menu has its own quiet surface; the board remains a background preview. */
.tangle-play-launch__veil { background: radial-gradient(ellipse at 50% 45%, #342636bf, #140d20eb); }
.tangle-play-launch__card { box-sizing: border-box; width: min(100%, 390px); padding: 28px 24px; gap: 14px; border: 1px solid #af936b; border-radius: 28px; background: linear-gradient(150deg,#443850,#262137); box-shadow: 0 12px 36px #10091455; }
.tangle-play-launch__card .tangle-play-launch__eyebrow { font-size: 11px; letter-spacing: .22em; }
.tangle-launch-node { margin-top: 4px; padding: 5px 12px; border-radius: 20px; color: #fce3a5; background: #ffffff0b; font-size: 12px; font-weight: 700; }
.tangle-play-launch__card .tangle-play-launch__title { font-size: clamp(21px,4.5vw,27px); line-height: 1.25; }
.tangle-play-launch__card .tangle-play-launch__hint { font-size: 13px; color: #d0c1d6; }
.tangle-play-launch__card .tangle-play-launch__cta { width: 100%; min-width: 0; min-height: 62px; padding: 10px 12px; margin: 4px 0 6px; font-size: 20px; letter-spacing: 0; text-transform: none; border-radius: 16px; }
.tangle-play-launch__card .tangle-play-launch__map { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 80px; padding: 8px 12px; text-align: left; background: linear-gradient(120deg,#305567,#27384c); border: 1px solid #719b9c; }
.tangle-play-launch__map svg { flex: 0 0 64px; width: 64px; height: 54px; }
.tangle-play-launch__map > span:nth-child(2) { flex: 1; min-width: 0; }
.tangle-play-launch__map strong { display: block; font-size: 16px; line-height: 1.2; }
.tangle-play-launch__map small { display: block; margin-top: 5px; font-size: 11px; font-weight: 400; line-height: 1.4; color: #c1dcd9; }
.tangle-play-launch__map > span:last-child { font-size: 26px; }
.tangle-launch-debug { position: absolute; left: max(12px,env(safe-area-inset-left)); bottom: calc(var(--gems-main-tab-bar-h,84px) + 10px); z-index: 20; font: 12px/1.4 system-ui,sans-serif; color: #e7dfea; }
.tangle-launch-debug summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #211b2bf2; border: 1px solid #77687e; cursor: pointer; list-style: none; font-size: 11px; letter-spacing: 1px; }
.tangle-launch-debug summary::-webkit-details-marker { display: none; }
.tangle-launch-debug__panel { position: absolute; left: 0; bottom: 52px; width: min(300px,calc(100vw - 24px)); box-sizing: border-box; padding: 16px; background: #292234; border: 1px solid #77687e; border-radius: 16px; display: flex; flex-direction: column; gap: 14px; }
.tangle-launch-debug .tangle-play-launch__level-row { width: 100%; gap: 8px; }
.tangle-launch-debug .tangle-play-launch__level-btn { width: 44px; height: 44px; flex: 0 0 44px; font-size: 28px; }
.tangle-launch-debug .tangle-play-launch__level { flex: 1; min-width: 0; font-size: 12px; text-align: center; }
.tangle-launch-debug .tangle-play-hud__ghost { min-height: 44px; padding: 8px 12px; font-size: 14px; }
.tangle-launch-debug summary:focus-visible { outline: 3px solid #ffe6ab; outline-offset: 3px; }
@media (max-height: 650px) {
 .tangle-play-launch__card { padding: 16px; gap: 8px; }
 .tangle-play-launch__card .tangle-play-launch__hint { display: none; }
 .tangle-play-launch__card .tangle-play-launch__cta { min-height: 48px; }
 .tangle-play-launch__card .tangle-play-launch__map { min-height: 64px; }
}
@media (max-height: 440px) and (min-width: 600px) {
 .tangle-play-launch__card { width: min(100%,620px); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; padding: 12px 20px; }
 .tangle-play-launch__eyebrow, .tangle-launch-node, .tangle-play-launch__title { grid-column: 1; }
 .tangle-play-launch__card .tangle-play-launch__cta { grid-column: 2; grid-row: 1 / 3; }
 .tangle-play-launch__card .tangle-play-launch__map { grid-column: 2; grid-row: 3; }
}

/* Enamel controls echo the violet menu panels and warm metal fittings. */
.tangle-play-hud__kicker { -webkit-text-stroke: 0; text-shadow: none; color: #77553c; }
.tangle-play-hud__stats { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.tangle-play-hud__stats > span:first-child { font-size: 1.12em; font-weight: 800; font-variant-numeric: tabular-nums; }
.tangle-play-hud__remaining { font-size: .8em; font-weight: 600; opacity: .8; }
.tangle-play-hud .tangle-booster:not(.tangle-booster--ghost) { background: linear-gradient(145deg,#514565,#302940); border: 2px solid #c2a174; box-shadow: 0 3px 0 #8a7152,inset 0 1px 0 #f8e4b84d; color: #ffe5a3; }
.tangle-play-hud .tangle-booster__face { background: transparent; border: 0; box-shadow: none; color: #ffdc86; }
.tangle-play-hud .tangle-booster__label { color: #fff0cc; }
.tangle-play-hud .tangle-booster__count { background: #f3d598; color: #4a354b; border: 2px solid #ad895a; border-radius: 9px; }
.tangle-play-hud .tangle-booster--menu .tangle-booster__label { color: #76543d; }
.tangle-play-hud .tangle-booster--menu { border-radius: 18px; }
.tangle-play-hud .tangle-booster--menu .tangle-booster__label { color: #fff0cc; }
.tangle-play-hud__stats { width: fit-content; margin-inline: auto; }

/* Use the same authored pause asset as Gems, without a second CSS frame. */
.tangle-pause-button { justify-self:start; align-self:start; display:grid; place-items:center; width:52px; height:56px; padding:0; border:0; background:none; cursor:pointer; pointer-events:auto; touch-action:manipulation; }
.tangle-pause-button img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.tangle-pause-button:active { transform:translateY(1px) scale(.96); }
.tangle-pause-button:focus-visible { outline:3px solid #79562c; outline-offset:4px; border-radius:15px; }
@media (max-height:520px) { .tangle-pause-button { width:44px; height:46px; } }

/* Boosters use the orange-to-red toy-button finish of the pause asset. */
.tangle-play-hud__boosters .tangle-booster:not(.tangle-booster--ghost) {
  padding:12px 6px 10px; gap:5px; border:2px solid #ffa640; border-bottom-color:#b92543;
  border-radius:22px; background:linear-gradient(165deg,#ff8b25 0%,#f45c36 40%,#df2549 78%,#ca1840 100%);
  box-shadow:inset 0 2px 0 #ffd084, inset 0 -4px 0 #b8183e,0 3px 0 #912c3f;
}
.tangle-play-hud__boosters .tangle-booster__face { width:52px; height:52px; background:none; color:#fff9e8; }
.tangle-play-hud__boosters .tangle-booster__face svg { width:42px; height:42px; filter:drop-shadow(0 2px 0 #a6203d66); }
.tangle-play-hud__boosters .tangle-booster__label { color:#fff9e8; text-shadow:0 1px 0 #a6203d80; }
.tangle-play-hud__boosters .tangle-booster__count { top:-7px; right:5px; border:2px solid #fff3ce; border-radius:10px; color:#fff; background:#a91e3d; box-shadow:0 2px 0 #92233a; }
.tangle-play-hud__boosters .tangle-booster:focus-visible { outline:3px solid #95344a; outline-offset:4px; }
@media (max-height:600px) {
 .tangle-play-hud__boosters .tangle-booster:not(.tangle-booster--ghost) { padding:8px 6px; gap:3px; }
 .tangle-play-hud__boosters .tangle-booster__face { width:40px; height:40px; }
 .tangle-play-hud__boosters .tangle-booster__face svg { width:34px; height:34px; }
}

/* Quiet workshop HUD: the ropes carry the strongest colors on the board. */
.tangle-play-hud__title-wrap { text-shadow:none; }
.tangle-play-hud__kicker { color:#634a38; font-size:clamp(16px,3.5vw,23px); font-weight:750; }
.tangle-play-hud__stats { background:#f8efdc; border:1px solid #c9b494; border-radius:20px; padding:6px 14px; color:#74553d; }
.tangle-play-hud__coach { color:#80674f; background:#f8efdfeb; border-color:#d7c5a7; border-radius:16px; font-size:13px; font-weight:500; line-height:1.5; padding:10px 14px; }
.tangle-play-hud__boosters { width:min(calc(100% - 32px),300px); gap:12px; }
.tangle-play-hud__boosters .tangle-booster:not(.tangle-booster--ghost) { border-radius:19px; padding:10px 6px 9px; }

/* Only the close control captures input; the message itself stays transparent to drags. */
.tangle-play-hud__coach { padding-right: 48px; box-sizing: border-box; }
.tangle-play-hud .tangle-play-hud__coach-close {
  position: absolute; top: 0; right: 0;
  display: grid; place-items: center; width: 44px; height: 44px;
  min-width: 44px; min-height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 14px; background: transparent;
  color: inherit; box-shadow: none; pointer-events: auto;
}
.tangle-play-hud__coach-close:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }

/* Native modal keeps focus and pointer input out of the board behind settings. */
.tangle-preferences {
  width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  box-sizing: border-box; margin: auto; padding: 0; overflow: auto;
  overscroll-behavior: contain; touch-action: pan-y;
  border: 1px solid #cbb08a; border-radius: 24px;
  background: #f8efdf; color: #574333;
  box-shadow: 0 8px 0 #806347, 0 24px 70px #0005;
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.tangle-preferences::backdrop { background: #18131fd9; }
.tangle-preferences button { font: inherit; cursor: pointer; position: relative; touch-action: manipulation; }
.tangle-preferences button::after { display: none; }
.tangle-preferences button:focus-visible { outline: 3px solid #288b82; outline-offset: 2px; }
.tangle-preferences__header { display: flex; justify-content: space-between; align-items: center; padding: 24px; background: #eee0c8; border-bottom: 1px solid #dac6a6; }
.tangle-preferences__header small { font-size: 10px; letter-spacing: .2em; font-weight: 800; color: #937146; }
.tangle-preferences__header h2 { font: inherit; font-size: 27px; font-weight: 800; line-height: 1.2; margin: 5px 0 0; }
.tangle-preferences__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #d0b993; border-radius: 14px; background: #faf2e4; color: #80674f; }
.tangle-preferences__body { padding: 4px 24px 0; }
.tangle-preferences__row { display: flex; align-items: center; gap: 12px; padding: 20px 0; border-bottom: 1px solid #e6d8c3; }
.tangle-preferences__icon { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: #d9ece4; color: #34776b; }
.tangle-preferences__icon--tips { background: #f5e2b3; color: #ae7a2e; }
.tangle-preferences__icon svg { width: 24px; height: 24px; }
.tangle-preferences__copy { flex: 1; min-width: 0; }
.tangle-preferences__copy strong { display: block; font-size: 15px; }
.tangle-preferences__copy small { display: block; font-size: 12px; line-height: 1.4; margin-top: 4px; color: #8b7661; }
.tangle-preferences__toggle { flex: 0 0 56px; display: grid; justify-items: center; gap: 4px; padding: 2px 0; border: 0; background: transparent; color: #8b7661; }
.tangle-preferences__toggle > span:last-child { font-size: 11px; font-weight: 700; }
.tangle-preferences__track { width: 48px; height: 28px; border-radius: 20px; background: #b8aa99; box-shadow: inset 0 2px 3px #0002; }
.tangle-preferences__track i { display: block; width: 22px; height: 22px; margin: 3px; border-radius: 50%; background: #fff9ef; box-shadow: 0 2px 3px #0003; transition: transform .15s; }
.tangle-preferences__toggle[aria-checked="true"] { color: #34776b; }
.tangle-preferences__toggle[aria-checked="true"] .tangle-preferences__track { background: #479b87; }
.tangle-preferences__toggle[aria-checked="true"] i { transform: translateX(20px); }
.tangle-preferences__language { padding: 20px 0; }
.tangle-preferences__segments { display: flex; gap: 4px; margin-top: 10px; padding: 4px; background: #e9ddca; border-radius: 14px; }
.tangle-preferences__segments button { flex: 1; min-height: 44px; border: 0; border-radius: 11px; color: #8b7661; background: transparent; }
.tangle-preferences__segments button[aria-pressed="true"] { background: #fff8eb; color: #574333; font-weight: 750; box-shadow: 0 2px 4px #79604420; }
.tangle-preferences__footer { display: grid; gap: 12px; text-align: center; padding: 0 24px 24px; }
.tangle-preferences__footer small { font-size: 11px; color: #8b7661; }
.tangle-preferences__done { min-height: 48px; border-radius: 15px; border: 1px solid #ce972f; background: linear-gradient(#f6cd68,#e4aa3f); color: #5b391b; font-weight: 800 !important; box-shadow: 0 3px 0 #bd8533; }
@media (max-width: 360px), (max-height: 620px) {
  .tangle-preferences__header { padding: 16px; }
  .tangle-preferences__body { padding: 0 16px; }
  .tangle-preferences__row { padding: 14px 0; gap: 8px; }
  .tangle-preferences__icon { flex-basis: 34px; height: 38px; }
  .tangle-preferences__language { padding: 14px 0; }
  .tangle-preferences__footer { padding: 0 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .tangle-preferences__track i { transition: none; } }

.tangle-victory-overlay { overflow: hidden; background: #201826b8; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.tangle-victory { position: relative; z-index: 1; box-sizing: border-box; width: min(100%, 380px); max-height: 100%; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 24px; border: 1px solid #e0c395; border-radius: 28px; text-align: center; color: #574333; background: radial-gradient(ellipse at 50% 10%, #fffaf0, transparent 70%), #f5e9d3; box-shadow: 0 7px 0 #997749, 0 18px 50px #0003; animation: tangle-victory-enter .35s ease-out both; }
.tangle-victory p { margin: 0; }
.tangle-victory__eyebrow { font-size: 12px; font-weight: 750; color: #917047; letter-spacing: .04em; }
.tangle-victory h2 { margin: 8px 0 0; font: inherit; font-size: clamp(24px, 6vw, 30px); line-height: 1.2; font-weight: 850; }
.tangle-victory__stars { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 20px 0 12px; min-height: 78px; }
.tangle-victory__stars svg { width: 62px; height: 62px; fill: #e0d1b8; stroke: #c3ac89; stroke-width: 1.5; }
.tangle-victory__stars svg:nth-child(2) { width: 78px; height: 78px; }
.tangle-victory__stars .is-earned { fill: #f8c84e; stroke: #c89636; filter: drop-shadow(0 4px 0 #bd8537); animation: tangle-star-award .5s cubic-bezier(.2,1.5,.4,1) both; animation-delay: var(--star-delay); }
.tangle-victory__star-shine { fill: none; stroke: #fff0a9; stroke-width: 3; stroke-linecap: round; }
.tangle-victory__first { color: #397b67; font-size: 12px; font-weight: 700; }
.tangle-victory__rewards { display: grid; grid-template-columns: 1fr 1fr; list-style: none; padding: 0; margin: 16px 0 12px; gap: 8px; }
.tangle-victory__rewards li { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 14px 8px; background: #fffaf0; border: 1px solid #e4d3b6; border-radius: 16px; font-size: 14px; line-height: 1.4; }
.tangle-victory__rewards img { width: 26px; height: 34px; object-fit: contain; flex-shrink: 0; }
.tangle-victory__xp { color: #8e69ac; font-size: 15px; font-weight: 900; }
.tangle-victory__bonus { padding: 10px; border-radius: 12px; background: #e0ede1; color: #397460; font-size: 12px; font-weight: 650; }
.tangle-victory__bonus span { font-size: 18px; vertical-align: middle; }
.tangle-victory__next { display: grid; gap: 4px; margin: 20px 0 14px; }
.tangle-victory__next small { font-size: 11px; color: #927a60; }
.tangle-victory__next strong { font-size: 15px; line-height: 1.35; }
.tangle-victory__complete { padding: 16px 0; font-size: 14px; }
.tangle-victory__continue { position: relative; width: 100%; min-height: 54px; margin-top: 8px; padding: 12px; border: 1px solid #d69834; border-radius: 16px; background: linear-gradient(#ffd777,#edb347); color: #603c1c; box-shadow: 0 4px 0 #b9812d; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; }
.tangle-victory__continue::after { display: none; }
.tangle-victory__continue:active { transform: translateY(2px); box-shadow: 0 2px 0 #b9812d; }
.tangle-victory__continue:focus-visible { outline: 3px solid #348d7b; outline-offset: 3px; }
.tangle-celebration { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.tangle-celebration__burst { position: absolute; top: 25%; left: 20%; }
.tangle-celebration__burst--1 { left: 80%; top: 30%; }
.tangle-celebration__burst--2 { left: 50%; top: 16%; }
.tangle-celebration i { position: absolute; width: 5px; height: 8px; border-radius: 3px; opacity: 0; animation: tangle-spark 1.25s ease-out both; animation-delay: var(--spark-delay); }
@keyframes tangle-spark { 0% { opacity: 0; transform: translate(0,0) scale(.3); } 10% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--spark-x),var(--spark-y)) rotate(160deg) scale(.4); } }
@keyframes tangle-star-award { from { opacity: 0; transform: translateY(12px) scale(.3) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes tangle-victory-enter { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-height: 620px), (max-width: 360px) { .tangle-victory { padding: 18px; } .tangle-victory__stars { margin: 12px 0 8px; min-height: 62px; } .tangle-victory__stars svg { width: 50px; height: 50px; } .tangle-victory__stars svg:nth-child(2) { width: 62px; height: 62px; } .tangle-victory__next { margin-top: 14px; } }
@media (prefers-reduced-motion: reduce) { .tangle-victory, .tangle-victory__stars .is-earned, .tangle-celebration i { animation: none; } .tangle-celebration { display: none; } }

/* Short celebratory accents settle into a quiet, readable reward card. */
.tangle-victory { border-color: #ffdfa0; box-shadow: 0 7px 0 #997749, 0 0 24px #ffc85a45, 0 0 64px #ffc85a20, 0 18px 50px #0003; }
.tangle-victory::before { content: ""; position: absolute; inset: 3px; border: 1px solid #fff9d6; border-radius: 24px; pointer-events: none; opacity: .55; animation: tangle-rim-glow 2s ease-in-out 3; }
.tangle-victory__sheen { animation: tangle-gold-sheen 2.8s ease-in-out 3 both; animation-delay: calc(var(--star-delay) + .5s); }
.tangle-victory__twinkle { fill: #fffbe1; stroke: none; transform-origin: 43px 21px; animation: tangle-star-twinkle 2.8s ease-in-out 3 both; animation-delay: calc(var(--star-delay) + .9s); }
.tangle-celebration__burst--3 { left: 12%; top: 48%; }
.tangle-celebration__burst--4 { left: 88%; top: 52%; }
.tangle-celebration__burst--5 { left: 30%; top: 20%; }
.tangle-celebration__burst--6 { left: 72%; top: 18%; }
.tangle-celebration i { width: 6px; height: 10px; box-shadow: 0 0 7px #ffe0a080; }
@keyframes tangle-gold-sheen { 0%, 15% { transform: translateX(0); opacity: 0; } 25% { opacity: .9; } 55% { transform: translateX(95px); opacity: 0; } 100% { transform: translateX(95px); opacity: 0; } }
@keyframes tangle-star-twinkle { 0%, 55%, 100% { opacity: 0; transform: scale(.35); } 25% { opacity: 1; transform: scale(1.15); } }
@keyframes tangle-rim-glow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tangle-victory::before, .tangle-victory__sheen, .tangle-victory__twinkle { animation: none; } .tangle-victory__sheen, .tangle-victory__twinkle { display: none; } }

/* Compact play status: completion is readable before the victory screen. */
.tangle-play-hud__top { grid-template-columns: 52px minmax(0,1fr) 44px; align-items: start; }
.tangle-hud-challenge { display: inline-block; margin-bottom: 4px; padding: 3px 8px; border: 1px solid #d6b773; border-radius: 8px; background: #f6e4b8; color: #93672c; font-size: 10px; line-height: 1.2; font-weight: 800; letter-spacing: .03em; }
.tangle-play-hud__kicker { line-height: 1.3; }
.tangle-hud-status { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; color: #74553d; }
.tangle-hud-clock { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid #d5c2a3; border-radius: 12px; background: #faf1df; font-size: 16px; line-height: 1.3; font-weight: 800; font-variant-numeric: tabular-nums; }
.tangle-hud-clock.is-urgent { color: #b4513d; border-color: #cb947b; animation: tangle-clock-notice 1s ease-in-out 3; }
.tangle-hud-rope-progress { display: inline-flex; align-items: center; justify-content: center; gap: 3px; flex-wrap: wrap; max-width: 100%; }
.tangle-hud-rope-token { display: grid; place-items: center; width: 19px; height: 26px; border-radius: 7px; background: #e9d9bd; color: #97744f; }
.tangle-hud-rope-token svg { width: 16px; height: 22px; }
.tangle-hud-rope-token.is-done { background: #d9eadf; color: #397c68; animation: tangle-rope-complete .4s ease-out; }
.tangle-play-hud .tangle-hud-help { width: 44px; height: 44px; padding: 0; min-width: 0; border: 1px solid #cfb892; border-radius: 14px; color: #876744; background: #faf1df; font: 800 23px/1 system-ui; box-shadow: 0 2px 0 #d2bea0; }
.tangle-coach-diagram { display: block; width: min(100%,210px); height: 36px; margin: 8px auto 0; }
.tangle-play-hud--challenge .tangle-play-hud__coach { top: max(145px, calc(env(safe-area-inset-top, 0px) + 135px)); }
@keyframes tangle-rope-complete { 0% { transform: scale(.65) rotate(-12deg); } 65% { transform: scale(1.15); } 100% { transform: none; } }
@keyframes tangle-clock-notice { 50% { opacity: .65; } }
@media (max-width: 360px) { .tangle-hud-status { gap: 5px; } .tangle-hud-clock { font-size: 14px; padding: 4px 6px; } .tangle-hud-rope-token { width: 16px; } }
@media (prefers-reduced-motion: reduce) { .tangle-hud-rope-token.is-done, .tangle-hud-clock.is-urgent { animation: none; } }

/* A small sewing kit: warm ceramic trays, stitched insets, illustrated tools. */
.tangle-play-hud__boosters { gap: 12px; width: min(calc(100% - 24px), 330px); }
.tangle-play-hud__boosters .tangle-booster:not(.tangle-booster--ghost) {
  --tool-color: #347f70; --tool-wash: #e0eee5;
  position: relative; isolation: isolate; overflow: visible;
  border: 1px solid #bfa581; border-radius: 22px 22px 18px 18px;
  background: linear-gradient(150deg,#fffaf0,#f1e3ca);
  box-shadow: 0 5px 0 #b69a74, 0 7px 0 #e9dac0, inset 0 2px 0 #fffdf5;
  padding: 10px 5px 9px; gap: 5px; color: #5d4834;
  transition: transform .14s, box-shadow .14s;
}
.tangle-play-hud__boosters .tangle-booster--cut { --tool-color: #ad6448 !important; --tool-wash: #f2e1d5 !important; }
.tangle-play-hud__boosters .tangle-booster--time { --tool-color: #82648e !important; --tool-wash: #eae1ef !important; }
.tangle-play-hud__boosters .tangle-booster::before { content:""; position:absolute; inset:5px; border:1px dashed #c4ad8980; border-radius:18px 18px 14px 14px; pointer-events:none; z-index:-1; }
.tangle-play-hud__boosters .tangle-booster__face {
  width: 64px; height: 62px; border-radius: 50% 50% 42% 42%;
  background: radial-gradient(ellipse,var(--tool-wash) 0 55%,transparent 70%);
  border: 0; box-shadow: none; color: var(--tool-color); transform: none;
}
.tangle-play-hud__boosters .tangle-booster__face svg { width: 64px; height: 64px; filter: none; overflow: visible; }
.tangle-play-hud__boosters .tangle-booster__label { color: #665039; text-shadow: none; font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.tangle-play-hud__boosters .tangle-booster__count { top:-8px; right:6px; min-width:27px; height:23px; padding:0 5px; display:grid; place-items:center; border:2px solid #fff8e9; border-radius:8px 8px 8px 3px; background:var(--tool-color); color:#fffaf0; box-shadow:0 2px 0 #9a805c; font:800 12px/1 system-ui; transform:rotate(5deg); }
.tangle-play-hud__boosters .tangle-booster:focus-visible { outline:3px solid var(--tool-color); outline-offset:4px; }
.tangle-play-hud__boosters .tangle-booster:active:not(:disabled) { transform:translateY(3px); box-shadow:0 2px 0 #b69a74,inset 0 2px 0 #fffdf5; }
.tangle-tool-spool { transform-origin:32px 32px; }
.tangle-tool-blades { transform-origin:32px 34px; }
.tangle-tool-hands { transform-origin:32px 36px; }
@media (hover:hover) {
  .tangle-booster:not(:disabled):hover .tangle-tool-spool { animation:tangle-tool-rock .5s ease; }
  .tangle-booster:not(:disabled):hover .tangle-tool-blades { animation:tangle-tool-rock .4s ease; }
  .tangle-booster:not(:disabled):hover .tangle-tool-hands { animation:tangle-tool-clock .6s ease; }
}
.tangle-booster:active:not(:disabled) .tangle-booster__face svg { transform:scale(.93); }
@keyframes tangle-tool-rock { 30% { transform:rotate(-9deg); } 70% { transform:rotate(7deg); } }
@keyframes tangle-tool-clock { to { transform:rotate(360deg); } }
@media (max-height:620px) { .tangle-play-hud__boosters .tangle-booster:not(.tangle-booster--ghost) { padding:7px 4px 6px; gap:2px; } .tangle-play-hud__boosters .tangle-booster__face, .tangle-play-hud__boosters .tangle-booster__face svg { width:48px; height:48px; } }
@media (prefers-reduced-motion:reduce) { .tangle-play-hud__boosters .tangle-booster { transition:none; } .tangle-booster .tangle-tool-spool, .tangle-booster .tangle-tool-blades, .tangle-booster .tangle-tool-hands { animation:none !important; } }

/* Pause belongs to the same stitched tool set as the boosters. */
.tangle-play-hud .tangle-pause-button {
  width:52px; height:56px; box-sizing:border-box;
  border:1px solid #bfa581; border-radius:17px;
  background:linear-gradient(150deg,#fffaf0,#f1e3ca);
  box-shadow:0 4px 0 #b69a74,inset 0 2px 0 #fffdf5;
}
.tangle-pause-button svg { display:block; width:100%; height:100%; pointer-events:none; }
.tangle-play-hud .tangle-pause-button:active { transform:translateY(2px); box-shadow:0 2px 0 #b69a74,inset 0 2px 0 #fffdf5; }
.tangle-play-hud .tangle-pause-button:focus-visible { outline:3px solid #347f70; outline-offset:3px; }
@media (max-height:520px) { .tangle-play-hud .tangle-pause-button { width:44px; height:46px; border-radius:14px; } }

/* Tangle-only resource trays: all three cells stay inside the capsule. */
.tangle-main-menu .gems-main-top-hud .gems-currency-chip__value { color:#634c35; text-shadow:none; font-family:system-ui,-apple-system,sans-serif; font-weight:800; max-width:calc(100% - 58px); }
.tangle-main-menu .gems-main-top-hud .gems-currency-chip__icon { animation:none; filter:none; height:24px; width:22px; right:6px; transform:translateY(-56%); pointer-events:none; }
.tangle-main-menu .gems-main-top-hud .gems-currency-chip__add { left:3px; width:28px; height:26px; top:2px; transform:none; border-radius:12px 0 0 12px; }
.tangle-main-menu .gems-main-top-hud .gems-currency-chip__add::before { content:""; position:absolute; right:0; top:5px; bottom:5px; width:1px; background:#c9b28c; }
.tangle-main-menu .gems-main-top-hud .gems-currency-chip__add:active { background:#dacaa9; }
.tangle-main-menu .gems-main-top-hud__settings img { filter:none; }
.tangle-main-menu .gems-main-top-hud__settings { border-radius:14px; }
@media (max-width:480px) {
  .tangle-main-menu .gems-main-top-hud .gems-currency-chip__icon { width:17px; height:22px; right:4px; }
  .tangle-main-menu .gems-main-top-hud .gems-currency-chip__add { width:22px; left:2px; }
  .tangle-main-menu .gems-main-top-hud .gems-currency-chip__value { max-width:calc(100% - 46px); }
}

/* Mouse/touch never gets the browser's blue frame; keyboard focus stays visible. */
:where(button,a,input,select,textarea,summary,[tabindex]):focus:not(:focus-visible) { outline:none; }
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid #caab70; outline-offset:3px; }
.tangle-main-menu .gems-main-top-hud button:focus:not(:focus-visible) { outline:none; }
.tangle-main-menu .gems-main-top-hud button:focus-visible { outline:2px solid #e7ca8b; outline-offset:3px; }

/* A stitched chart edge connects the map's parchment header to the sea. */
.tangle-map .tangle-map__header { position:relative; background:linear-gradient(120deg,#fff8e8,#efe3ca); border-bottom:3px solid #c1a780; padding-bottom:14px; }
.tangle-map__header::after { content:""; position:absolute; left:12px; right:12px; bottom:4px; border-bottom:1px dashed #c6ad87; pointer-events:none; }
.tangle-map .tangle-map__heading { max-width:560px; grid-template-columns:44px minmax(0,1fr) 44px; gap:12px; }
.tangle-map .tangle-map__heading button { background:linear-gradient(145deg,#fffaf0,#eaddc1); border:1px solid #bfa581; box-shadow:0 3px 0 #b39872,inset 0 2px 0 #fffdf4; border-radius:14px; color:#407b6d; padding:5px; }
.tangle-map__heading button svg { display:block; width:100%; height:100%; }
.tangle-map .tangle-map__heading button:active { transform:translateY(2px); box-shadow:0 1px 0 #b39872; }
.tangle-map .tangle-map__heading p { font-size:9px; color:#927653; letter-spacing:.14em; }
.tangle-map .tangle-map__heading h2 { font-size:21px; color:#604c36; }
.tangle-map .tangle-map__heading > .tangle-map__compass { background:none; padding:0; width:44px; height:44px; }
.tangle-map__compass svg { display:block; width:100%; height:100%; }
.tangle-map__journey { display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 12px; max-width:448px; margin:14px auto 0; color:#6e7960; font-size:11px; }
.tangle-map__journey strong { color:#397e6e; font-size:13px; }
.tangle-map__journey small { font-size:11px; font-weight:600; color:#90836b; }
.tangle-map__journey-meter { grid-column:1/-1; height:6px; border-radius:5px; background:#dccbab; overflow:hidden; }
.tangle-map__journey-meter i { display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#8bbd99,#3b8878); }
.tangle-map .tangle-archipelago__hint { margin:9px 0 0!important; font-size:11px; color:#887658; }
.tangle-map .tangle-map__heading:has(.tangle-map__chapter-progress) { grid-template-columns:44px minmax(0,1fr) auto; }
.tangle-map .tangle-map__heading > .tangle-map__chapter-progress { text-align:center; background:#e2ead6; color:#427a68; }
.tangle-map__chapter-progress small { display:block; font-size:8px; font-weight:600; margin-bottom:3px; }
@media(max-width:360px) { .tangle-map .tangle-map__heading { gap:8px; } .tangle-map .tangle-map__heading h2 { font-size:17px; } .tangle-map .tangle-map__heading p { font-size:8px; letter-spacing:.08em; } }
@media(max-height:600px) { .tangle-map__journey { margin-top:9px; } .tangle-map .tangle-archipelago__hint { display:none; } }

/* The workshop uses the same stitched cases and tools as the play HUD. */
.tangle-store__title { width:100%; aspect-ratio:auto; gap:6px; margin:6px auto 22px; text-align:center; }
.tangle-store__eyebrow { font-size:9px; font-weight:800; letter-spacing:.18em; color:#d8bb85; }
.tangle-store__title h2 { font-size:28px; color:#fff2d6; }
.tangle-store__title p { margin:0; font-size:12px; line-height:1.4; color:#ccbdba; }
.tangle-store__grid { max-width:760px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding-bottom:6px; }
.tangle-store__item { --store-ink:#387d6d; --store-wash:#dfede0; }
.tangle-store__item--scissors { --store-ink:#a46343; --store-wash:#f0dfce; }
.tangle-store__item--hint { --store-ink:#80618d; --store-wash:#e9e0ed; }
.tangle-store__item--shield { --store-ink:#517b58; --store-wash:#e2e9d5; }
.tangle-store__frame { position:relative; border:1px solid #bca17b; border-radius:22px; background:linear-gradient(140deg,#fff9ec,#f0e3ca); box-shadow:0 4px 0 #9b805e,inset 0 2px 0 #fffcf2; }
.tangle-store__frame::before { content:""; position:absolute; inset:6px; border:1px dashed #c9b491; border-radius:17px; pointer-events:none; }
.tangle-store__content { position:relative; padding:21px; gap:13px; color:#634c35; }
.tangle-store__content h3 { font-size:18px; }
.tangle-store__art { width:92px; height:88px; margin:0 0 5px; border:0; border-radius:50%; background:radial-gradient(ellipse,var(--store-wash) 30%,transparent 72%); }
.tangle-store__art svg { width:84px; height:84px; }
.tangle-store__art > span { background:#fff2d3; color:var(--store-ink); border:1px solid #c7ac80; right:-6px; bottom:-2px; border-radius:8px; font-size:12px; transform:rotate(-5deg); }
.tangle-store__content p { color:#877259; max-width:260px; font-size:13px; }
.tangle-store__buy { min-height:44px; border-color:#b89d71; background:linear-gradient(#f6d994,#e6bb70); color:#61472c; border-radius:12px; }
.tangle-store__buy:focus-visible { outline-color:var(--store-ink); }
@media(max-width:420px) {
 .tangle-store__title { margin-bottom:16px; }
 .tangle-store__title h2 { font-size:24px; }
 .tangle-store__title p { max-width:250px; font-size:11px; }
 .tangle-store__grid { gap:12px; }
 .tangle-store__content { padding:14px 10px; gap:10px; }
 .tangle-store__content h3 { font-size:14px; min-height:36px; }
 .tangle-store__content p { font-size:11px; line-height:1.45; }
 .tangle-store__art { width:72px; height:72px; }
 .tangle-store__art svg { width:70px; height:70px; }
 .tangle-store__buy { font-size:11px; padding:7px 5px; }
}

.tangle-navigation-arrow { display:block; width:28px; height:28px; margin:auto; pointer-events:none; }

/* Traveler's passport: warm paper, woven badge and collected island stamps. */
.tangle-profile { color:#604b36; }
.tangle-profile__frame { position:relative; border:1px solid #baa07b; border-radius:22px; background:linear-gradient(130deg,#fff9eb,#efe2c8); box-shadow:0 4px 0 #9c8160,inset 0 2px 0 #fffdf5; }
.tangle-profile__frame::before { content:""; position:absolute; inset:6px; border:1px dashed #cbb590; border-radius:17px; pointer-events:none; }
.tangle-profile__body { position:relative; padding:24px; gap:16px; }
.tangle-profile p,.tangle-profile dt,.tangle-profile__total { color:#857258; }
.tangle-profile .tangle-profile__eyebrow { color:#8c7350; font-size:10px; letter-spacing:.12em; }
.tangle-profile__identity > img { border:0; border-radius:0; width:86px; height:86px; }
.tangle-profile progress,.tangle-profile progress::-webkit-progress-bar { background:#ded0b3; }
.tangle-profile progress::-webkit-progress-value { background:linear-gradient(90deg,#98c4a6,#408a77); }
.tangle-profile progress::-moz-progress-bar { background:#408a77; }
.tangle-profile__stats > div { background:#fdf6e5; border:1px solid #dbcaab; padding:14px; }
.tangle-profile dd { color:#397e6d; font-size:27px; }
.tangle-profile dd small { color:#988669; }
.tangle-profile dd > span { color:#cc9a42; }
.tangle-profile__total { font-size:12px; }
.tangle-profile__continue:focus-visible { outline-color:#39816e; }
.tangle-profile__islands { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.tangle-profile__island { position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 7px; border:1px solid #d7c7a7; background:#faf3e1; border-radius:15px; color:#69563f; font:inherit; cursor:pointer; }
.tangle-profile__island > svg { width:100%; max-width:120px; height:86px; }
.tangle-profile__island strong { font-size:11px; line-height:1.3; }
.tangle-profile__island span { font-size:11px; color:#8c7a5d; }
.tangle-profile__island.is-complete { background:#eef2df; border-color:#a6b99a; }
.tangle-profile__island em { font-style:normal; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#49816c; border:1px solid #78a08a; border-radius:4px; padding:3px 5px; transform:rotate(-5deg); }
.tangle-profile__island:active { transform:translateY(2px); }
.tangle-profile__island:focus-visible { outline:2px solid #438775; outline-offset:2px; }
@media(max-width:420px) {
 .tangle-profile__body { padding:20px 16px; gap:14px; }
 .tangle-profile__identity { gap:10px; }
 .tangle-profile__identity > img { width:64px; height:64px; }
 .tangle-profile h2 { font-size:23px; }
 .tangle-profile h3 { font-size:18px; }
 .tangle-profile p { font-size:12px; }
 .tangle-profile__stats > div { padding:10px; }
 .tangle-profile dd { font-size:23px; }
 .tangle-profile__islands { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
}

/* Quiet, equal-width navigation. Override shared inline sizing only in Tangle. */
.tangle-main-menu { --gems-main-tab-bar-h:76px !important; }
.tangle-main-menu .gems-main-tabs-shell { background:linear-gradient(120deg,#fff8e9,#eee0c5); border-radius:0; border-top:1px solid #c9b18a; }
.tangle-main-menu .gems-main-tabs-shell::before { content:""; position:absolute; top:5px; left:16px; right:16px; border-top:1px dashed #c8b28b; pointer-events:none; }
.tangle-main-menu .gems-main-tabs { grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:4px !important; max-width:620px; margin:auto; box-sizing:border-box; padding:10px max(6px,env(safe-area-inset-right)) 5px max(6px,env(safe-area-inset-left)); }
.tangle-main-menu .gems-main-tab { background:transparent; border-radius:10px; transform:none; animation:none; transition:background .18s ease; }
.tangle-main-menu .gems-main-tab__sparkles,.tangle-main-menu .gems-main-tab__highlight { display:none; }
.tangle-main-menu .gems-main-tab__content { gap:2px; }
.tangle-main-menu .gems-main-tab .gems-main-tab__icon { width:34px; height:34px; transform:none; will-change:auto; transition:transform .18s ease; }
.tangle-main-menu .gems-main-tab--selected .gems-main-tab__icon { transform:translateY(-2px); }
.tangle-main-menu .gems-main-tab .gems-main-tab__label { position:static; transform:none; opacity:1; color:#7f7056; font:700 10px/1.2 system-ui,-apple-system,sans-serif; max-width:100%; overflow:visible; }
.tangle-main-menu .gems-main-tab--selected .gems-main-tab__label { color:#326f5f; }
.tangle-main-menu .gems-main-tab:nth-child(3) .gems-main-tab__label { color:#88622c; }
.tangle-main-menu .gems-main-tab:active .gems-main-tab__icon { transform:translateY(1px) scale(.95); }
.tangle-main-menu .gems-main-tab:focus-visible { outline:2px solid #468772; outline-offset:-2px; }
@media(prefers-reduced-motion:reduce) { .tangle-main-menu .gems-main-tab,.tangle-main-menu .gems-main-tab .gems-main-tab__icon { transition:none; } }

/* A cream tile with a gold rim marks the current tab. */
.tangle-main-menu .gems-main-tab--selected { background:#fff8e8; box-shadow:inset 0 0 0 1px #c9a667,inset 0 2px 0 #fffdf5,0 2px 0 #c2a577; }
.tangle-main-menu .gems-main-tab--selected .gems-main-tab__icon { transform:translateY(-4px) scale(1.12); }
.tangle-main-menu .gems-main-tab__sparkles { display:block; }
.tangle-main-menu .gems-main-tab__sparkle { top:35%; width:5px; height:5px; background:#e7b854; filter:none; will-change:auto; animation:tangle-nav-sprinkle 1.1s ease-out both; animation-delay:calc(var(--sparkle-delay) * .12); }
@keyframes tangle-nav-sprinkle {
  0% { opacity:0; transform:translate(-50%,3px) rotate(45deg) scale(.3); }
  20% { opacity:.95; }
  75% { opacity:.6; }
  100% { opacity:0; transform:translate(calc(-50% + var(--sparkle-x)), -38px) rotate(135deg) scale(.2); }
}
@media(prefers-reduced-motion:reduce) { .tangle-main-menu .gems-main-tab__sparkles { display:none; } }

/* Masters' board: paper entries and sewn medal ribbons. */
.tangle-lb { gap:18px; }
.tangle-lb__trophy { width:48px; height:48px; margin:0 auto 6px; display:block; }
.tangle-lb__explain { font-size:12px; }
.tangle-lb .tangle-lb__demo { width:min(100%,480px); box-sizing:border-box; margin:0; padding:10px 14px; border:1px dashed #af9873; border-radius:12px; background:#f6e9cc; color:#796347; font-size:11px; line-height:1.5; }
.tangle-lb__personal { position:relative; background:linear-gradient(120deg,#fff8e6,#ebdfc4); color:#634d36; padding:22px; border-color:#bea580; box-shadow:0 3px 0 #a08764; }
.tangle-lb__personal::before { content:""; position:absolute; inset:6px; border:1px dashed #cbb48e; border-radius:14px; pointer-events:none; }
.tangle-lb__personal > span { color:#847158; }
.tangle-lb__personal > strong { color:#397c69; font-size:34px; }
.tangle-lb__personal > .tangle-lb__personal-score { grid-column:1; font-size:12px; font-weight:700; }
.tangle-lb__personal > p { color:#806d53; font-size:12px; }
.tangle-lb__personal button { grid-row:1/4; padding-inline:16px; }
.tangle-lb__group { background:linear-gradient(130deg,#fff8e8,#f0e3cb); border:1px solid #c3aa82; border-radius:20px; padding:16px 12px; color:#654f38; }
.tangle-lb__heading > span { color:#978366; }
.tangle-lb__row { background:#fffaf0; border:1px solid #dfd0b6; }
.tangle-lb__rank { color:#8b7455; }
.tangle-lb__avatar { background:#e7dbc4; color:#7d6548; }
.tangle-lb__avatar img { width:30px; height:34px; object-fit:contain; }
.tangle-lb__score { color:#4d7464; }
.tangle-lb__name small { color:#397b65; }
.tangle-lb__row--you { background:#deebd8; border-color:#98b69b; box-shadow:inset 3px 0 #62977c; }
.tangle-lb__row--medal .tangle-lb__rank { position:relative; border-radius:50%; height:30px; box-shadow:0 2px 0 #b99862; }
.tangle-lb__row--medal .tangle-lb__rank::after { content:""; position:absolute; top:25px; width:17px; height:10px; background:#729b85; clip-path:polygon(0 0,100% 0,100% 100%,50% 65%,0 100%); }
.tangle-lb__unavailable { border:1px dashed #cbb28b; padding:20px; border-radius:18px; background:#f7edda; color:#826e54; }
.tangle-lb__unavailable button { background:#deead7; color:#467661; border-color:#a8bd9c; }
.tangle-lb button:focus-visible { outline-color:#438774; }
@media(max-width:360px) { .tangle-lb { padding-inline:10px; } .tangle-lb__personal { padding:18px; } .tangle-lb__row { grid-template-columns:29px minmax(0,1fr) auto; } .tangle-lb__name,.tangle-lb__score { font-size:12px; } }
/* Keep the board scrollable within the shell on short phones. */
.tangle-tab-panel.tangle-lb { position:absolute; inset:0; box-sizing:border-box; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y; justify-content:flex-start; padding-top:14px; padding-bottom:20px; }
.tangle-lb > * { flex-shrink:0; }

/* The daily journal follows the parchment and woven accents of the passport. */
.tangle-series { color:#604b36; }
.tangle-series__frame { position:relative; max-width:480px; width:100%; border:1px solid #baa07b; border-radius:22px; background:linear-gradient(130deg,#fff9eb,#efe2c8); box-shadow:0 4px 0 #9c8160,inset 0 2px 0 #fffdf5; }
.tangle-series__frame::before { content:""; position:absolute; inset:6px; border:1px dashed #cbb590; border-radius:17px; pointer-events:none; }
.tangle-series__body { position:relative; padding:24px; gap:16px; }
.tangle-series p { color:#857258; }
.tangle-series__heading { display:flex; align-items:center; justify-content:center; gap:12px; text-align:left; }
.tangle-series__heading img { width:60px; height:60px; }
.tangle-series__heading p { font-size:10px; font-weight:800; letter-spacing:.13em; margin-bottom:4px; }
.tangle-series__hero { color:#408571; font-size:32px; }
.tangle-series__record { font-size:12px!important; }
.tangle-series__today { background:#e4ecda; border:1px solid #bdcbaa; border-radius:16px; }
.tangle-series__today strong { color:#42735c; }
.tangle-series__today p { font-size:13px; }
.tangle-series__shield { border-color:#dac8a7; gap:8px; }
.tangle-series__shield-title { display:flex; align-items:center; gap:10px; }
.tangle-series__shield-title svg { width:28px; height:32px; flex-shrink:0; }
.tangle-series__shield p { font-size:12px; }
.tangle-series button { border-color:#cbb28a; color:#685239; background:#fbf2dc; box-shadow:0 2px 0 #c6ad84,inset 0 1px 0 #fffcf4; font-weight:700; }
.tangle-series button:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
.tangle-series button:focus-visible { outline-color:#438775; }
.tangle-series button:disabled { opacity:.4; box-shadow:none; }
.tangle-series .tangle-series__buy,.tangle-series .tangle-series__play { background:linear-gradient(#f9dfa0,#edc67e); }
.tangle-series__month h3 { font-size:17px; }
.tangle-series .tangle-series__return { align-self:center; padding:6px 12px; font-size:12px; }
.tangle-series__weekday { color:#948265; font-size:11px; }
.tangle-series__calendar { gap:8px 4px; padding:8px 0; border-top:1px solid #dfceb0; }
.tangle-series__day { position:relative; justify-self:center; box-sizing:border-box; width:100%; max-width:40px; aspect-ratio:1; background:transparent; border:1px solid transparent; color:#806b50; border-radius:50%; font-size:14px; font-variant-numeric:tabular-nums; }
.tangle-series .is-active { background:linear-gradient(145deg,#ffe7a7,#e7b961); border-color:#c69c56; color:#704923; box-shadow:inset 0 2px 0 #fff4d1,0 2px 0 #b58a4f; }

.tangle-series .is-frozen { background:#dae8ed; color:#53798a; border-color:#a4c1cc; }
.tangle-series .is-today { outline:2px solid #548976; outline-offset:2px; }
.tangle-series__day.is-future { color:#a8977c; background:transparent; border-color:transparent; }
.tangle-series__legend { color:#857258; gap:12px; font-size:10px; }
.tangle-series__legend i { border:1px solid #ccb893; box-sizing:border-box; border-radius:50%; }
@media(max-width:360px) {
 .tangle-series__body { padding:20px 15px; gap:14px; }
 .tangle-series__heading { gap:8px; }
 .tangle-series__heading img { width:48px; height:48px; }
 .tangle-series h2 { font-size:22px; }
 .tangle-series__hero { font-size:27px; }
 .tangle-series__calendar { gap:9px 4px; }
 .tangle-series__day { border-radius:50%; font-size:12px; }
 .tangle-series__month { gap:4px; }
 .tangle-series__month h3 { font-size:14px; }
}

/* Open board preview: headline, real puzzle, then the launch controls. */
.tangle-play-stage--preview { background:#eae2d2; }
.tangle-play-stage--preview .tangle-game-host { inset:155px 0 258px; height:auto; pointer-events:none; animation:tangle-preview-arrive .5s ease-out both; }
.tangle-play-stage--preview .tangle-play-launch { padding:88px 16px 92px; pointer-events:none; }
.tangle-play-stage--preview .tangle-play-launch__card { width:min(100%,420px); height:100%; padding:0; border:0; border-radius:0; background:none; box-shadow:none; display:flex; flex-direction:column; justify-content:space-between; gap:0; }
.tangle-play-launch__heading { text-align:center; }
.tangle-play-stage--preview .tangle-launch-node { display:inline-block; margin:0 0 5px; padding:0; background:none; color:#95805f; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.tangle-play-stage--preview .tangle-play-launch__title { color:#66513b; font-size:clamp(20px,4.5vw,27px); margin:0; text-shadow:none; }
.tangle-play-launch__actions { width:100%; display:flex; flex-direction:column; gap:12px; pointer-events:auto; }
.tangle-play-stage--preview .tangle-play-launch__cta { margin:0; min-height:56px; overflow:hidden; }
.tangle-play-stage--preview .tangle-play-launch__cta-glow { z-index:0; inset:-50%; background:linear-gradient(110deg,transparent 40%,#fff7d67a 50%,transparent 60%); transform:translateX(-100%); animation:tangle-launch-shine 1s .4s ease-out both; }
.tangle-play-launch__cta-label { position:relative; }
.tangle-play-stage--preview .tangle-play-launch__map { min-height:68px; background:linear-gradient(120deg,#fff8e7,#efe2c7); border-color:#c5ac84; color:#685339; border-radius:16px; box-shadow:0 2px 0 #c2aa83; }
.tangle-play-stage--preview .tangle-play-launch__map small { color:#8b7658; }
.tangle-play-stage--preview .tangle-play-launch__map strong { font-size:15px; }
.tangle-play-stage--preview .tangle-launch-debug { pointer-events:auto; left:6px; bottom:82px; }
.tangle-play-stage--preview .tangle-launch-debug summary { width:32px; height:28px; min-height:0; font-size:8px; opacity:.65; }
@keyframes tangle-preview-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes tangle-launch-shine { to { transform:translateX(100%); } }
@media(min-height:750px) {
 .tangle-play-stage--preview .tangle-game-host { top:175px; bottom:280px; }
 .tangle-play-stage--preview .tangle-play-launch { padding-top:105px; padding-bottom:110px; }
}
@media(max-height:440px) and (min-width:600px) {
 .tangle-play-stage--preview .tangle-game-host { inset:80px 48% 88px 0; width:52%; }
 .tangle-play-stage--preview .tangle-play-launch { padding:78px 20px 88px 54%; }
 .tangle-play-stage--preview .tangle-play-launch__card { gap:8px; }
 .tangle-play-stage--preview .tangle-play-launch__title { font-size:19px; }
 .tangle-play-launch__actions { gap:8px; }
 .tangle-play-stage--preview .tangle-play-launch__cta { min-height:44px; }
 .tangle-play-stage--preview .tangle-play-launch__map { min-height:54px; padding:5px 10px; }
 .tangle-play-stage--preview .tangle-play-launch__map svg { height:38px; width:44px; flex-basis:44px; }
}
@media(prefers-reduced-motion:reduce) {
 .tangle-play-stage--preview .tangle-game-host,.tangle-play-stage--preview .tangle-play-launch__cta-glow { animation:none; }
}
@media(max-height:650px) { .tangle-play-stage--preview .tangle-game-host { top:140px; bottom:235px; } }
@media(max-height:440px) and (min-width:600px) { .tangle-play-stage--preview .tangle-game-host { top:80px; bottom:88px; } }
.tangle-hud-route { font:700 11px/1.3 system-ui,sans-serif; color:#4f806b; padding:4px 7px; border:1px solid #b8c7a8; border-radius:10px; background:#edf1de; white-space:nowrap; }

/* Help is an explicit paused overlay; it never changes the board's viewport. */
.tangle-coach-overlay { position:absolute; inset:0; z-index:25; pointer-events:auto; display:grid; place-items:center; background:#30251c66; }
.tangle-coach-overlay .tangle-play-hud__coach { position:relative; inset:auto; transform:none; box-sizing:border-box; max-height:calc(100% - 32px); overflow:auto; pointer-events:auto; padding:24px 42px 24px 20px; background:#fff6e5; box-shadow:0 12px 40px #30251c33; }
.tangle-coach-feedback { pointer-events:none; }
@media (max-width:600px) {
  .tangle-play-hud__boosters { width:calc(100% - 24px); gap:10px; }
  .tangle-play-hud__boosters .tangle-booster:not(.tangle-booster--ghost) { min-height:64px; padding:6px 4px; gap:2px; }
  .tangle-play-hud__boosters .tangle-booster__face { width:40px; height:38px; }
  .tangle-play-hud__boosters .tangle-booster__face svg { width:40px; height:40px; }
}

/* Creator workspace: viewport-sized stage with tools outside the canvas. */
.tangle-3d-tools.workshop { inset:0; padding:0; margin:0; max-height:none; overflow:hidden; border-radius:0; background:transparent; color:#594b39; pointer-events:none; font:13px/1.4 system-ui,sans-serif; }
.workshop button,.workshop input,.workshop select { font:inherit; }
.workshop button { min-height:40px; border:1px solid #d4c3a6; border-radius:11px; background:#fffaf0; color:#60513c; padding:8px 10px; cursor:pointer; box-shadow:0 2px 0 #d6c5a8; }
.workshop button:hover:not(:disabled) { background:#f1e4c9; }
.workshop button:disabled { opacity:.4; cursor:default; }
.workshop button[aria-pressed=true] { border-color:#488a78; background:#dcece1; color:#276957; }
.workshop .workshop-primary { background:#397e6c; border-color:#397e6c; color:#fff9e7; box-shadow:0 3px 0 #285c50; font-weight:750; }
.workshop .workshop-primary:hover:not(:disabled) { background:#2f705f; }
.workshop-header { position:absolute; inset:0 0 auto; height:72px; box-sizing:border-box; padding:12px 20px; display:flex; justify-content:space-between; align-items:center; gap:12px; background:#fff7e7; border-bottom:1px solid #d5c2a2; pointer-events:auto; }
.workshop-brand { display:flex; gap:12px; align-items:center; }
.workshop-brand>span { display:grid;place-items:center;width:44px;height:44px;background:#dcebe0;border-radius:14px;color:#377d69;font-size:30px; }
.workshop-brand small,.workshop-panel small { display:block;font-size:10px;letter-spacing:1.8px;color:#998260;font-weight:800; }
.workshop-brand strong { font-size:18px; }
.workshop-header__actions { display:flex;gap:8px; }
.workshop-nav { position:absolute;top:88px;left:12px;width:126px;display:grid;gap:10px;pointer-events:auto; }
.workshop-nav>button { text-align:left;display:flex;align-items:center;gap:8px; }
.workshop-nav>button>span { font-size:24px;width:24px;text-align:center; }
.workshop-panel { position:absolute;top:88px;right:12px;bottom:48px;width:288px;box-sizing:border-box;border:1px solid #d4c1a1;border-radius:20px;background:#fff7e8;box-shadow:0 5px 0 #bda581;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y; }
.workshop-panel__heading { padding:18px 16px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px; }
.workshop-panel h2 { font-size:19px;margin:3px 0 0; }
.workshop-panel h3 { font-size:13px;margin:20px 0 10px; }
.workshop-panel__body { padding:0 16px 18px; }
.workshop-panel label { display:grid;gap:6px;margin-bottom:14px;font-weight:700;font-size:12px; }
.workshop input:not([type=file]),.workshop select { box-sizing:border-box;width:100%;min-height:42px;background:#fffdf7;color:#594b39;border:1px solid #d4c3a6;border-radius:10px;padding:8px 10px; }
.workshop .workshop-note { font-size:12px;line-height:1.55;color:#93836c;margin:0 0 12px; }
.workshop-swatches { display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0; }
.workshop-swatches button { min-height:38px;padding:0;background:var(--swatch)!important;border:3px solid #fff9ee;border-radius:50%;box-shadow:0 0 0 1px #d8c6a8; }
.workshop-swatches button[aria-pressed=true] { box-shadow:0 0 0 2px #326f60; }
.workshop-grid,.workshop-segments { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.workshop-stack { display:grid;gap:8px; }
.workshop-wide { width:100%;margin:4px 0 8px; }
.workshop-rope-list { display:flex;flex-wrap:wrap;gap:6px;padding:16px 0 0; }
.workshop-rope-list button { display:flex;align-items:center;gap:6px;min-height:34px;padding:4px 8px; }
.workshop-rope-list i { width:13px;height:13px;border-radius:50%; }
.workshop-crossings { display:grid;gap:6px;padding:8px 0 0; }
.workshop-crossings button { display:flex;align-items:center;gap:6px;min-height:36px;padding:4px 10px;text-align:left; }
.workshop-crossings i { width:13px;height:13px;border-radius:50%;flex:none; }
.workshop-crossings span { color:#96836a;font-weight:500; }
.workshop-crossings b { margin-left:auto;font-size:16px;line-height:1; }
.workshop-library { display:grid;gap:8px;margin:16px 0; }
.workshop-library button { text-align:left;display:grid;gap:4px;overflow-wrap:anywhere; }
.workshop-library small { letter-spacing:0;font-weight:500; }
.workshop-empty { padding:20px 12px;border:1px dashed #c5b393;border-radius:12px;text-align:center;color:#96836a; }
.workshop-dev { margin-top:18px;border-top:1px solid #d4c3a6;padding-top:14px; }
.workshop-dev summary { cursor:pointer;color:#9b7962; }
.workshop-dev button { width:100%;margin-top:8px; }
.workshop-check { display:grid;justify-items:center;gap:8px;padding:16px;background:#f1e7d2;border-radius:14px; }
.workshop-check>span { font-size:36px;color:#b38c43; }.workshop-check.is-verified { background:#deecdf;color:#32715d; }
.workshop-steps { padding-left:22px;line-height:1.6;margin:18px 0; }.workshop-steps li+li { margin-top:8px; }
.workshop-status { position:absolute;bottom:8px;left:156px;right:316px;min-height:28px;display:flex;align-items:center;gap:8px;pointer-events:none;color:#8b765a;font-size:11px; }
.workshop-status>span:nth-child(2) { flex:1; }.workshop-status small { white-space:nowrap; }
.workshop-status__dot { width:6px;height:6px;border-radius:50%;background:#4a927e;flex-shrink:0; }
.workshop-test-note { position:absolute;bottom:8px;left:12px;color:#78664f;max-width:190px;font-size:11px;pointer-events:auto; }
.workshop-collapse { display:none; }
.tangle-play-stage:has(.workshop:not(.workshop--playing)) .tangle-game-host { top:84px;bottom:46px;left:150px;right:312px;width:auto;height:auto; }
@media(max-width:760px) {
 .workshop-header { height:68px;padding:8px 10px;gap:6px; }.workshop-brand>span { display:none; }.workshop-brand strong { font-size:13px; }.workshop-brand small { font-size:8px;letter-spacing:1px; }.workshop-header__actions { gap:5px; }.workshop-header button { font-size:11px;min-height:40px;padding:6px 8px; }
 .workshop-nav { top:76px;left:10px;right:10px;width:auto;display:flex;gap:6px; }.workshop-nav>button { flex:1;justify-content:center;min-height:40px;padding:5px;font-size:10px; }.workshop-nav>button>span { font-size:18px;width:18px; }.workshop-nav>button:nth-last-child(-n+2) { display:none; }
 .workshop-panel { top:auto;bottom:36px;left:10px;right:10px;width:auto;height:clamp(160px,34vh,280px);border-radius:16px; }.workshop-panel__heading { padding:10px 12px; }.workshop-panel h2 { font-size:15px; }.workshop-panel small { font-size:8px; }.workshop-panel__body { padding:0 12px 14px; }.workshop-collapse { display:block;min-width:40px; }.workshop-status { left:12px;right:12px;bottom:3px;font-size:10px; }.workshop-status small { display:none; }
 .workshop-swatches { grid-template-columns:repeat(8,1fr);gap:7px; }.workshop-swatches button { min-height:30px; }.workshop--collapsed .workshop-panel { height:62px;overflow:hidden; }.workshop--collapsed .workshop-panel__body { display:none; }
 .tangle-play-stage:has(.workshop:not(.workshop--playing)) .tangle-game-host { top:124px;bottom:calc(clamp(160px,34vh,280px) + 48px);left:8px;right:8px; }
 .tangle-play-stage:has(.workshop--collapsed:not(.workshop--playing)) .tangle-game-host { bottom:110px; }
}

/* Level invitation: compact title, earned stars, and a clear start action. */
.tangle-play-stage--preview .tangle-play-launch__heading { padding:0 8px; }
.tangle-play-stage--preview .tangle-launch-node--final { padding:5px 10px; margin-bottom:8px; border:1px solid #ccb17a; border-radius:20px; color:#816337; background:#f6e9c8; letter-spacing:.06em; }
.tangle-play-stage--preview .tangle-play-launch__title { font-size:clamp(21px,4.5vw,28px); line-height:1.16; }
.tangle-launch-result { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:8px; }
.tangle-launch-result > span { display:flex; gap:3px; }
.tangle-launch-result i { font-style:normal; font-size:21px; line-height:1; color:#c7bda9; }
.tangle-launch-result i.is-earned { color:#bd8835; text-shadow:0 1px 0 #fff4cd; }
.tangle-launch-result small { color:#8b795f; font-size:11px; }
.tangle-play-stage--preview .tangle-play-launch__cta { min-height:52px; border:1px solid #c29147; border-radius:17px; background:linear-gradient(#f4d789,#e9b654); color:#5c4125; box-shadow:inset 0 1px 0 #fff4cb,0 3px 0 #bb8944,0 6px 14px #7951231c; font-size:19px; }
.tangle-play-stage--preview .tangle-play-launch__cta:not(:disabled):active { transform:translateY(2px); box-shadow:inset 0 1px 0 #fff4cb,0 1px 0 #bb8944; }
.tangle-play-stage--preview .tangle-play-launch__map { min-height:56px; padding:6px 12px; background:#f4ecd9; border-color:#d6c6a8; box-shadow:none; }
.tangle-play-stage--preview .tangle-play-launch__map svg { width:46px; height:42px; flex-basis:46px; }
.tangle-play-stage--preview .tangle-play-launch__map strong { font-size:14px; }
.tangle-play-stage--preview .tangle-play-launch__actions { gap:14px; }
.tangle-play-stage--preview .tangle-game-host { top:190px; bottom:224px; }
@media(min-height:750px) {
 .tangle-play-stage--preview .tangle-game-host { top:210px; bottom:246px; }
}
@media(max-height:650px) {
 .tangle-play-stage--preview .tangle-play-launch { padding-top:78px; padding-bottom:82px; }
 .tangle-play-stage--preview .tangle-play-launch__title { font-size:20px; }
 .tangle-play-stage--preview .tangle-game-host { top:174px; bottom:214px; }
 .tangle-play-stage--preview .tangle-play-launch__cta { min-height:46px; }
 .tangle-play-stage--preview .tangle-play-launch__map { min-height:48px; }
 .tangle-play-stage--preview .tangle-play-launch__actions { gap:10px; }
 .tangle-launch-result { margin-top:5px; }
}
@media(max-height:440px) and (min-width:600px) {
 .tangle-play-stage--preview .tangle-game-host { top:80px; bottom:88px; }
 .tangle-play-stage--preview .tangle-play-launch { padding:78px 20px 88px 54%; }
 .tangle-play-stage--preview .tangle-launch-node--final { margin-bottom:4px; padding:3px 8px; }
 .tangle-play-stage--preview .tangle-play-launch__title { font-size:18px; }
 .tangle-play-stage--preview .tangle-play-launch__cta { min-height:44px; }
 .tangle-launch-result { margin-top:4px; }
}
/* The shell already reserves the bottom navigation; do not reserve it twice. */
@media(min-height:441px), (max-width:599px) {
 .tangle-play-stage--preview .tangle-play-launch { padding-bottom:24px; }
 .tangle-play-stage--preview .tangle-game-host { top:184px; bottom:156px; }
}
@media(max-height:650px) and (max-width:599px) {
 .tangle-play-stage--preview .tangle-play-launch { padding-bottom:14px; }
 .tangle-play-stage--preview .tangle-game-host { top:166px; bottom:130px; }
}
@media(max-height:440px) and (min-width:600px) {
 .tangle-play-stage--preview .tangle-game-host { bottom:24px; }
}

/* Touch help: explicit dismissal and a readable pull gesture. */
.tangle-play-hud .tangle-play-hud__coach { padding-right:64px; }
.tangle-play-hud .tangle-play-hud__coach-close { width:56px; height:56px; min-width:56px; min-height:56px; background:#f4e8cf; border:1px solid #cbb58e; border-radius:16px; top:6px; right:6px; z-index:2; touch-action:manipulation; }
.tangle-gesture-demo { margin:12px 0 0; border-top:1px solid #d9c9aa; padding-top:8px; }
.tangle-gesture-demo svg { width:100%; max-width:240px; display:block; margin:auto; }
.tangle-gesture-demo small { display:block; font-size:13px; line-height:1.5; }
.tangle-gesture-finger { animation:tangle-demo-pull 2.4s ease-in-out infinite; }
@keyframes tangle-demo-pull { 0%,20% { transform:translateX(0); opacity:1; } 70%,85% { transform:translateX(115px); opacity:1; } 100% { transform:translateX(115px); opacity:0; } }
.tangle-cut-prompt { position:absolute; top:100px; left:50%; transform:translateX(-50%); width:min(90%,360px); box-sizing:border-box; display:flex; gap:12px; align-items:center; padding:10px 12px; background:#fff5df; border:1px solid #c7ac7b; border-radius:16px; color:#655137; pointer-events:auto; font:600 14px/1.35 system-ui; z-index:24; }
.tangle-cut-prompt button { min-height:44px; padding:8px 12px; border:1px solid #b6cbb8; border-radius:12px; background:#dfeddf; color:#356b58; font:inherit; }
.tangle-booster[aria-pressed="true"] { box-shadow:0 0 0 3px #568f78,0 5px 0 #9b8464; }
@media(prefers-reduced-motion:reduce) { .tangle-gesture-finger { animation:none; transform:translateX(70px); } }

/* A calm timeout invitation in the board's parchment palette. */
.tangle-timeout { background:#40352b66; backdrop-filter:blur(2px); z-index:30; }
.tangle-timeout .tangle-timeout__card { width:min(100%,360px); gap:14px; padding:24px; border:1px solid #c7ac7d; border-radius:28px; color:#66513a; background:linear-gradient(145deg,#fff9eb,#eee1c5); box-shadow:inset 0 0 0 5px #fff8e6,0 5px 0 #b29a76,0 18px 50px #38291c30; animation:tangle-preview-arrive .24s ease-out both; }
.tangle-timeout__emblem { width:76px; height:76px; margin:0 auto; display:grid; place-items:center; border:1px dashed #c5ab78; border-radius:50%; background:#f8edcf; }
.tangle-timeout__emblem svg { width:60px; height:60px; }
.tangle-timeout__card h2 { font:800 27px/1.15 system-ui,sans-serif; }
.tangle-timeout__card .tangle-timeout__intro { font:500 14px/1.5 system-ui,sans-serif; color:#89765b; opacity:1; margin:0 0 4px; }
.tangle-timeout__card button { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:64px; padding:10px 14px; border-radius:17px; font:inherit; cursor:pointer; touch-action:manipulation; }
.tangle-timeout__continue { background:linear-gradient(#f5d788,#e8b957); border:1px solid #be934b; color:#614524; box-shadow:inset 0 1px 0 #fff3c5,0 3px 0 #b08a47; }
.tangle-timeout__continue strong { font-size:23px; }
.tangle-timeout__continue span { display:flex; align-items:center; gap:6px; font-size:12px; }
.tangle-timeout__continue svg { width:20px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
.tangle-timeout__continue svg path { fill:currentColor; stroke:none; }
.tangle-timeout__retry { background:#f9f2e1; border:1px solid #cbb995; color:#776247; }
.tangle-timeout__retry strong { font-size:17px; }
.tangle-timeout__retry small { font-size:12px; color:#9a7961; }
.tangle-timeout__card button:active:not(:disabled) { transform:translateY(2px); }
.tangle-timeout__card button:disabled { opacity:.55; cursor:wait; }
@media(max-height:440px) { .tangle-timeout .tangle-timeout__card { padding:14px 20px; gap:8px; } .tangle-timeout__emblem { width:46px;height:46px; } .tangle-timeout__emblem svg { width:40px;height:40px; } .tangle-timeout__card h2 { font-size:23px; } .tangle-timeout__card button { min-height:52px; padding:6px 12px; } }
@media(prefers-reduced-motion:reduce) { .tangle-timeout .tangle-timeout__card { animation:none; } }

/* Campaign gates keep future destinations visible without making them playable. */
.tangle-map-lock { width:22px; height:22px; flex:none; vertical-align:middle; }
.tangle-island.is-locked > svg { filter:grayscale(.8); opacity:.55; }
.tangle-island.is-locked { cursor:default; }
.tangle-island.is-locked .tangle-island__caption em { display:flex; align-items:center; justify-content:center; gap:7px; color:#897b66; font-size:12px; }
.tangle-map__node.is-locked { display:flex; flex-direction:column; align-items:center; justify-content:center; background:#dfd3ba; border-color:#bca988; color:#93836b; box-shadow:0 3px 0 #b5a183; cursor:default; }
.tangle-map__node.is-locked small { font:700 11px/1.2 system-ui; }
.tangle-map__islands-link:disabled { opacity:.5; cursor:default; }

/* Accessible level browsing lives above the preview; swipes never reach play input. */
.tangle-launch-nav { display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:8px; margin:0 auto 6px; max-width:300px; pointer-events:auto; }
.tangle-launch-nav button { width:44px; height:44px; padding:9px; border:1px solid #cdb78d; border-radius:15px; background:#f6ecd5; color:#776044; box-shadow:0 2px 0 #c3ad87; cursor:pointer; }
.tangle-launch-nav button:disabled { opacity:.3; box-shadow:none; cursor:default; }
.tangle-launch-nav svg { width:24px; height:24px; }
.tangle-launch-nav small { display:block; font-size:11px; color:#8c795d; }
.tangle-play-stage--preview .tangle-launch-nav .tangle-launch-node { margin-bottom:3px; }
.tangle-launch-secondary { display:flex; gap:8px; justify-content:center; }
.tangle-launch-secondary button { flex:1; min-width:0; min-height:44px; padding:4px 8px; border:0; border-radius:12px; background:#f3ead7; color:#806a4d; font:inherit; font-size:13px; cursor:pointer; }
.tangle-launch-secondary .tangle-launch-resume { display:flex; justify-content:center; align-items:center; gap:5px; color:#367f6d; background:#e0eadc; font-weight:700; }
.tangle-launch-secondary svg { width:18px; height:18px; flex-shrink:0; }
.tangle-launch-nav button:focus-visible,.tangle-launch-secondary button:focus-visible { outline:2px solid #438775; outline-offset:2px; }
.tangle-launch-swipe { position:absolute; inset:210px 0 138px; pointer-events:auto; touch-action:none; }
.tangle-play-stage--preview .tangle-game-host { top:210px; bottom:138px; }
.tangle-play-stage--preview .tangle-play-launch__actions { gap:8px; }
@media(max-height:650px) and (max-width:599px) {
 .tangle-play-stage--preview .tangle-game-host,.tangle-launch-swipe { top:178px; bottom:120px; }
 .tangle-launch-nav { margin-bottom:4px; }
 .tangle-play-stage--preview .tangle-play-launch__title { font-size:19px; }
 .tangle-launch-secondary button { font-size:11px; padding:4px; }
}
@media(max-height:440px) and (min-width:600px) {
 .tangle-play-stage--preview .tangle-game-host { top:80px; bottom:24px; }
 .tangle-launch-swipe { inset:80px 50% 24px 0; }
 .tangle-launch-nav { margin-bottom:2px; }
 .tangle-play-stage--preview .tangle-play-launch { padding-top:62px; padding-bottom:12px; }
 .tangle-launch-result { display:none; }
 .tangle-play-stage--preview .tangle-play-launch__map { min-height:44px; }
 .tangle-play-stage--preview .tangle-play-launch__actions { gap:4px; }
}
/* Keep all secondary destinations in one row to preserve room for the puzzle. */
.tangle-launch-secondary .tangle-launch-map-link { display:flex; justify-content:center; align-items:center; gap:5px; }
.tangle-launch-map-link svg { width:30px; height:30px; }
@media(max-height:650px) and (max-width:599px) {
 .tangle-launch-secondary .tangle-launch-resume { gap:2px; }
 .tangle-launch-secondary .tangle-launch-resume svg { display:none; }
 .tangle-launch-map-link svg { width:24px; height:24px; }
}

/* Save conflicts are resolved before mounting the game and spending resources. */
.tangle-save-gate { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; text-align:center; color:#654d35; }
.tangle-save-gate h2 { font-size:clamp(22px,5vw,32px); line-height:1.2; margin:0; }
.tangle-save-gate p { max-width:480px; margin:0; line-height:1.45; }
.tangle-save-choice { width:min(100%,480px); min-height:64px; padding:16px 20px; border:2px solid #c7aa78; border-radius:20px; background:linear-gradient(#fff7e1,#eddbb5); box-shadow:0 4px 0 #b59769; color:#654d35; font:inherit; font-weight:700; cursor:pointer; }
.tangle-save-choice:focus-visible { outline:3px solid #448e7a; outline-offset:3px; }

/* Narrative prototype: a persistent place between puzzles, within the game viewport. */
.tangle-story { position:absolute; inset:72px 12px 86px; z-index:8; display:grid; grid-template-rows:auto minmax(100px,1fr) auto; gap:14px; padding:18px 24px; border-radius:28px; background:#f5eddc; color:#674f36; pointer-events:auto; max-width:1120px; margin:auto; overflow:hidden; }
.tangle-story__header { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.tangle-story__header small { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:#8b7759; }
.tangle-story h1 { margin:4px 0 0; font-size:clamp(21px,3vw,32px); line-height:1.15; }
.tangle-story button { font:inherit; cursor:pointer; touch-action:manipulation; }
.tangle-story__header button { border:1px solid #d3c09a; color:#6b654c; background:#faf3e3; border-radius:14px; padding:10px 14px; min-height:44px; white-space:nowrap; }
.tangle-story__scene { position:relative; min-height:0; display:flex; align-items:center; justify-content:center; border-radius:24px; background:#b3d5ca; overflow:hidden; }
.tangle-harbor-art { display:block; height:100%; width:100%; }
.tangle-story__badge { position:absolute; top:12px; left:12px; background:#faf3dfed; border:1px solid #e4d4b4; padding:7px 12px; border-radius:18px; font-size:11px; font-weight:700; }
.tangle-story__bottom { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:24px; }
.tangle-story__dialog { display:flex; gap:12px; align-items:center; }
.tangle-story__portrait { width:64px; height:76px; flex-shrink:0; border-radius:30px 30px 20px 20px; overflow:hidden; background:#e6d7b5; border:2px solid #c6ac7e; }
.tangle-story__portrait svg { width:100%; height:100%; }
.tangle-story__dialog strong { color:#377c6c; font-size:13px; }
.tangle-story__dialog p { margin:6px 0 0; font-size:14px; line-height:1.45; }
.tangle-story__task { padding:14px 18px; border:1px solid #dccba7; background:#fff8e8; border-radius:22px; }
.tangle-story__task h2 { font-size:19px; margin:8px 0 4px; }
.tangle-story__task p { font-size:12px; line-height:1.4; color:#8e7b5f; margin:0 0 10px; }
.tangle-story__steps { display:flex; gap:6px; }
.tangle-story__steps span { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:#eae0c9; color:#9f8a64; font-size:11px; font-weight:700; }
.tangle-story__steps .is-done { background:#548f7a; color:#fff5dc; }
.tangle-story__steps .is-current { background:#f2d491; color:#7e6034; }
.tangle-story__primary { width:100%; min-height:46px; padding:10px 14px; border:1px solid #c6a05d; border-radius:16px; background:linear-gradient(#f8dfa0,#e4ba68); box-shadow:0 3px 0 #b9955d; color:#604825; font-weight:800!important; }
.tangle-story__skip { display:block; margin:5px auto -8px; min-height:44px; background:none; border:0; color:#6b8e77; font-size:12px!important; }
.tangle-story__colors { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:12px; }
.tangle-story__colors button { width:44px; height:44px; border:3px solid #fff8e8; outline:1px solid #d5c3a1; border-radius:50%; background:var(--sail); color:#fffbe9; font-weight:700; }
.tangle-story__colors button[aria-pressed=true] { outline:2px solid #4d8b77; }
.tangle-story button:focus-visible { outline:3px solid #4c8c79; outline-offset:3px; }
.tangle-story__celebration { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); padding:12px 20px; border-radius:22px; white-space:nowrap; background:#fff4cfee; color:#657b44; font-weight:800; box-shadow:0 5px 18px #46796c25; animation:harbor-reveal 2.4s both; }
.is-celebrating .tangle-harbor-art { animation:harbor-arrive .65s ease-out; }
.tangle-harbor-wave { animation:harbor-wave 6s ease-in-out infinite alternate; }
.tangle-harbor-glow { animation:harbor-light 3s ease-in-out infinite alternate; }
@keyframes harbor-reveal { 0% {opacity:0; margin-bottom:-10px;} 18%,80% {opacity:1;margin-bottom:0;} 100% {opacity:0;} }
@keyframes harbor-arrive { from {opacity:.5;} to {opacity:1;} }
@keyframes harbor-wave { to {transform:translateX(10px);opacity:.25;} }
@keyframes harbor-light { to {opacity:.55;} }
@media(max-width:600px) { .tangle-story { inset:76px 8px 82px; padding:12px; gap:10px; border-radius:22px; } .tangle-story__bottom { grid-template-columns:1fr; gap:10px; } .tangle-story__dialog p { font-size:12px; } .tangle-story__portrait { width:45px;height:56px; } .tangle-story__header small { font-size:9px; } .tangle-story__header button { padding:8px; font-size:12px; } .tangle-story__task { padding:10px 14px; } .tangle-story__task h2 { font-size:17px; } .tangle-story__badge { top:7px;left:7px;padding:5px 8px;font-size:10px; } }
@media(max-height:660px) and (max-width:600px) { .tangle-story { inset:64px 6px 76px; gap:6px; padding:10px; } .tangle-story h1 {font-size:18px;} .tangle-story__dialog p {font-size:11px;line-height:1.25;} .tangle-story__dialog strong {font-size:11px;} .tangle-story__portrait {width:36px;height:44px;} .tangle-story__task {padding:8px 12px;} .tangle-story__steps {display:none;} .tangle-story__task h2 {margin:0 0 3px;font-size:15px;} .tangle-story__task p {margin-bottom:6px;font-size:10px;} .tangle-story__colors {margin-bottom:5px;} .tangle-story__skip {margin:0 auto -6px;} }
@media(max-height:520px) and (min-width:601px) { .tangle-story {inset:64px 12px 76px;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;padding:10px;gap:8px 16px;} .tangle-story__header {grid-column:1/-1;} .tangle-story__bottom {grid-template-columns:1fr;gap:6px;} .tangle-story__dialog {display:none;} .tangle-story__task {padding:8px 12px;} .tangle-story__task h2 {margin-top:0;} .tangle-story__steps {display:none;} }
@media(prefers-reduced-motion:reduce) { .tangle-story * {animation:none!important;} }
.tangle-story { font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
@media(min-width:801px) and (min-height:521px) { .tangle-story {grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);grid-template-rows:auto 1fr;gap:20px;} .tangle-story__header {grid-column:1/-1;} .tangle-story__bottom {display:flex;flex-direction:column;justify-content:center;align-items:stretch;} .tangle-story__scene {min-height:0;} }
@media(max-height:660px) and (max-width:600px) { .tangle-story {grid-template-rows:auto minmax(40px,1fr) auto;} .tangle-story--complete .tangle-story__task > p {display:none;} }
.tangle-harbor-3d { position:relative; width:100%; height:100%; min-height:0; }
.tangle-harbor-3d__canvas { position:absolute; inset:0; touch-action:none; cursor:grab; }
.tangle-harbor-3d__canvas:active {cursor:grabbing;}
.tangle-harbor-3d__canvas canvas {display:block;width:100%;height:100%;}
.tangle-harbor-3d__hint {position:absolute;bottom:10px;left:12px;font-size:10px;color:#416e64;pointer-events:none;background:#e9f2dcbb;padding:5px 8px;border-radius:12px;}
.tangle-harbor-3d__zoom {position:absolute;right:8px;bottom:8px;display:flex;gap:5px;}
.tangle-harbor-3d__zoom button {width:44px;height:44px;border:1px solid #ccbd9d;background:#fff4dfdf;border-radius:14px;color:#477f70;font-size:24px;}
.tangle-harbor-3d__fallback {position:absolute;inset:35px 20px;text-align:center;font-size:13px;}
@media(max-width:600px) and (max-height:660px) {.tangle-harbor-3d__hint{display:none;}.tangle-harbor-3d__zoom{bottom:4px;right:4px;}}
.tangle-story__task:focus {outline:3px solid #548f7a;outline-offset:3px;}
.tangle-story--working .tangle-story__dialog,.tangle-story--working .tangle-story__steps {display:none;}
.tangle-story__work-progress {width:100%;height:14px;accent-color:#538e78;border:0;border-radius:12px;overflow:hidden;background:#e7dbc0;}
.tangle-story__work-progress::-webkit-progress-bar {background:#e7dbc0;}
.tangle-story__work-progress::-webkit-progress-value {background:#538e78;border-radius:12px;transition:width .16s ease;}
.tangle-story__work-count {display:block;margin-top:5px;font-size:12px;color:#518571;}
.tangle-story__primary:disabled {opacity:.5;cursor:default;}
.tangle-story--working .tangle-harbor-3d__canvas {cursor:crosshair;}
.tangle-harbor-3d__canvas:focus-visible {outline:3px solid #f0ce77;outline-offset:-4px;}

@media(max-width:600px) {.tangle-story--working .tangle-story__task {padding:10px 14px;}.tangle-story--working .tangle-story__bottom {gap:0;}}

.tangle-harbor-3d__guide {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;filter:drop-shadow(0 1px 2px #59432988);}

/* Keep the scene viewport stable as confirmation/work/result cards change. */
@media(max-width:800px) and (min-height:661px) {
 .tangle-story {grid-template-rows:auto minmax(60px,1fr) 300px;}
 .tangle-story__bottom {align-content:center;}
}
@media(max-width:600px) and (max-height:660px) {
 .tangle-story {grid-template-rows:auto minmax(40px,1fr) 210px;}
 .tangle-story__dialog {display:none;}
 .tangle-story__bottom {align-content:center;}
}
@media(max-width:800px) and (min-height:661px) {
 .tangle-story {transition:grid-template-rows .45s ease;}
 .tangle-story--working {grid-template-rows:auto minmax(60px,1fr) 200px;}
}
@media(prefers-reduced-motion:reduce) {.tangle-story {transition:none;}}

.tangle-debug-complete {position:absolute;right:10px;bottom:100px;pointer-events:auto;min-height:44px;padding:8px 12px;border:1px solid #739583;border-radius:12px;background:#e4eddd;color:#365d4c;font:600 12px system-ui;cursor:pointer;}
.tangle-hud-level-number {display:block;margin:0 0 3px;white-space:nowrap;color:#8a7658;font-size:10px;line-height:1.2;font-weight:650;letter-spacing:.12em;text-shadow:none;}

.tangle-dev-panel[open] {width:210px;}
.tangle-dev-panel:not([open]) {padding:4px 8px!important;}
.tangle-debug-complete {font-size:11px;padding:6px 10px;}

.tangle-energy-modal {font-family:system-ui,-apple-system,sans-serif;}
.tangle-energy-card {position:relative;width:min(360px,calc(100vw - 32px));box-sizing:border-box;padding:24px;border:2px solid #d5bc90;border-radius:28px;background:linear-gradient(#fff9e9,#eee0c3);box-shadow:0 7px 0 #ae9168,0 16px 48px #32231b44;color:#654c35;text-align:center;}
.tangle-energy-heart {font-size:46px;line-height:1.2;color:#dc846e;text-shadow:0 3px #b97560;}
.tangle-energy-card h2 {font-size:24px;line-height:1.15;margin:12px 0 8px;}
.tangle-energy-card p {font-size:14px;color:#89775d;margin:0 0 16px;}
.tangle-energy-countdown {display:grid;gap:7px;padding:15px;margin-bottom:18px;border-radius:18px;background:#e2e9d5;color:#466e60;}
.tangle-energy-countdown span {font-size:13px;}.tangle-energy-countdown strong {font-size:32px;line-height:1;font-variant-numeric:tabular-nums;}
.tangle-energy-dismiss {min-height:44px;margin-top:10px;background:transparent;border:0;color:#5b7b68;font:14px system-ui;cursor:pointer;}
@media(max-height:550px){.tangle-energy-card{padding:12px 20px;}.tangle-energy-heart{font-size:28px;}.tangle-energy-countdown{padding:9px;gap:4px;margin-bottom:10px;}}
.tangle-energy-modal {z-index:40;}

.tangle-save-gate {box-sizing:border-box;width:100%;min-height:100dvh;background:#f5eddc;font-family:system-ui,-apple-system,sans-serif;}
.tangle-save-gate p {width:100%;overflow-wrap:anywhere;font-size:16px;}

.tangle-story__places {position:absolute;right:130px;top:4px;display:flex;gap:5px;z-index:3;}
.tangle-story__places button{font-size:10px;border:1px solid #cab48c;border-radius:9px;background:#f6e9cc;color:#5a715e;padding:4px 8px;min-height:32px;}.tangle-story__places button[aria-pressed=true]{background:#cddfca;}
.tangle-map-story-note{padding:8px 14px;background:#e4ead5;color:#506e58;font-size:12px;border-radius:12px;margin:6px 10px;}

.tangle-map-story-stop {position:absolute;left:62px;top:8px;width:92px;font-size:10px;line-height:1.2;color:#567963;background:#fbf3df;padding:5px;border-radius:8px;pointer-events:none;}

@media(max-width:600px){.tangle-story--places{padding-top:44px;}.tangle-story__places{left:12px;right:auto;top:6px;}}

/* Restoration is a destination: no shop/navigation chrome over its touch surface. */
.tangle-main-menu--story .tangle-story {inset:12px;max-width:1200px;}
@media(max-width:800px) {
 .tangle-main-menu--story .tangle-story {
  inset:0;max-width:none;border-radius:0;padding:12px;gap:10px;
  grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;
 }
 .tangle-main-menu--story .tangle-story--places {padding-top:46px;}
 .tangle-main-menu--story .tangle-story__bottom {display:block;}
 .tangle-main-menu--story .tangle-story__dialog,
 .tangle-main-menu--story .tangle-story__steps,
 .tangle-main-menu--story .tangle-story__colors,
 .tangle-main-menu--story .tangle-story__skip {display:none;}
 .tangle-main-menu--story .tangle-story__header small {font-size:9px;}
 .tangle-main-menu--story .tangle-story h1 {font-size:20px;}
 .tangle-main-menu--story .tangle-story__task {padding:10px 14px;}
 .tangle-main-menu--story .tangle-story__task h2 {margin:0 0 4px;font-size:17px;}
 .tangle-main-menu--story .tangle-story__task p {font-size:12px;margin-bottom:8px;}
 .tangle-main-menu--story .tangle-story--working .tangle-story__header div,
 .tangle-main-menu--story .tangle-story--working .tangle-story__badge {display:none;}
 .tangle-main-menu--story .tangle-story--working .tangle-story__header {justify-content:flex-end;}
 .tangle-main-menu--story .tangle-story--working .tangle-story__work-count {font-size:10px;}
 .tangle-main-menu--story .tangle-story__scene {border-radius:18px;}
 .tangle-main-menu--story .tangle-story__places {left:12px;right:auto;top:6px;}
}

.tangle-story__letter {display:none;}
@media(max-width:800px) {
 .tangle-main-menu--story .tangle-story--working {padding-top:12px;}
 .tangle-main-menu--story .tangle-story--working .tangle-story__places {display:none;}
 .tangle-story__letter {display:block;font-size:11px;margin:0 0 5px;color:#508574;}
 .tangle-story__letter summary {cursor:pointer;min-height:28px;line-height:28px;}
 .tangle-story__letter p {max-height:90px;overflow:auto;overscroll-behavior:contain;}
}

/* Asya speaks inside the scene; this replaces the former work/letter panels. */
.tangle-main-menu--story .tangle-story.tangle-story--dialogue {inset:0;max-width:none;display:block;padding:0;border-radius:0;}
.tangle-story--dialogue .tangle-story__scene {width:100%;height:100%;border-radius:0;}
.tangle-story--dialogue .tangle-harbor-3d__hint {display:none;}
.tangle-dialogue-top {position:absolute;top:16px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:start;gap:16px;pointer-events:none;}
.tangle-dialogue-top div {display:grid;gap:5px;color:#425e4c;text-shadow:0 1px #eff5dc;}
.tangle-dialogue-top small {font-size:10px;letter-spacing:.1em;}
.tangle-dialogue-top strong {font-size:22px;}
.tangle-dialogue-top button,.tangle-dialogue-places button {pointer-events:auto;min-height:44px;border:1px solid #bba67d;border-radius:15px;background:#fff4dfec;padding:8px 14px;color:#526b5c;}
.tangle-dialogue-places {position:absolute;top:85px;left:20px;display:flex;gap:8px;}
.tangle-dialogue-places button[aria-pressed=true] {background:#e3d099;}
.tangle-asya-dialogue {position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 32px));display:flex;align-items:flex-end;gap:10px;pointer-events:none;}
.tangle-asya-character {width:clamp(110px,18vw,185px);flex-shrink:0;filter:drop-shadow(0 6px 8px #294d482a);}
.tangle-asya-message {position:relative;flex:1;min-width:0;padding:20px 24px;background:#fff7e6;border:2px solid #d6bd8e;border-radius:25px;box-shadow:0 6px 0 #789c7b55;pointer-events:auto;color:#654d35;}
.tangle-asya-message:before {content:'';position:absolute;left:-12px;bottom:66px;width:20px;height:20px;transform:rotate(45deg);background:#fff7e6;border-left:2px solid #d6bd8e;border-bottom:2px solid #d6bd8e;}
.tangle-asya-name {color:#367967;font-size:19px;}
.tangle-asya-message p {font-size:16px;line-height:1.45;margin:8px 0 14px;}
.tangle-asya-message small {display:block;font-size:12px;margin:0 0 12px;color:#827051;}
.tangle-asya-message .tangle-story__primary {min-height:48px;font-size:16px;}
@media(max-width:600px){
 .tangle-dialogue-top {top:12px;left:12px;right:12px;gap:8px;}
 .tangle-dialogue-top strong {font-size:18px;}.tangle-dialogue-top small {font-size:8px;}
 .tangle-dialogue-top button {padding:8px 10px;font-size:12px;}
 .tangle-dialogue-places {left:12px;top:72px;}.tangle-dialogue-places button {font-size:11px;}
 .tangle-asya-dialogue {width:calc(100% - 20px);gap:0;bottom:14px;}
 .tangle-asya-character {width:95px;margin-right:-7px;z-index:1;}
 .tangle-asya-message {padding:14px 12px;border-radius:20px;}
 .tangle-asya-message p {font-size:13px;line-height:1.4;margin:6px 0 10px;}
 .tangle-asya-message .tangle-story__primary {font-size:13px;}
 .tangle-asya-name {font-size:16px;}
}
@media(max-height:480px) and (min-width:601px){
 .tangle-asya-dialogue {left:auto;right:16px;transform:none;width:48%;bottom:14px;}
 .tangle-asya-character {width:90px;}.tangle-asya-message {padding:12px;}
 .tangle-asya-message p {font-size:12px;margin:5px 0 8px;}
}
.tangle-story-stars {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 12px;padding:8px 10px;border-radius:12px;background:#f5e6bb;color:#8a632c;font-weight:800;font-size:18px;}
.tangle-story-stars span {font-size:11px;font-weight:500;}.tangle-story-stars span:last-child {margin-left:auto;}
@media(max-width:360px){.tangle-asya-character{width:76px;}.tangle-asya-message p{font-size:12px;}.tangle-asya-message small{font-size:10px;}}
.tangle-asya-dialogue.is-repairing .tangle-story-stars,.tangle-asya-dialogue.is-repairing .tangle-asya-message small {display:none;}
.tangle-asya-dialogue.is-repairing .tangle-asya-character {width:90px;}
.tangle-asya-dialogue.is-repairing .tangle-asya-message {padding:12px 16px;}
.tangle-story-star-balance {display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:7px 14px;margin-top:5px;border:1px solid #c8aa70;border-radius:18px;background:linear-gradient(#fff7df,#f0d79b);box-shadow:0 3px 0 #aa895d55;color:#745126;font-size:19px;font-weight:800;text-shadow:none;font-variant-numeric:tabular-nums;}
.tangle-story-star-balance > span {color:#c49337;font-size:23px;}
.tangle-dialogue-top .tangle-dialogue-places {position:static;margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;}
@media(max-width:600px){.tangle-story-star-balance{font-size:16px;padding:5px 12px;}.tangle-story-star-balance > span{font-size:20px;}}

/* The island is the play tab, between unchanged shared HUD and bottom tabs. */
.tangle-main-menu--hub .tangle-story.tangle-story--dialogue {inset:72px 0 86px;max-width:none;padding:0;display:block;border-radius:0;}
.tangle-main-menu--hub .tangle-asya-dialogue {display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;width:min(700px,calc(100% - 32px));bottom:12px;}
.tangle-main-menu--hub .tangle-asya-character {width:130px;}
.tangle-hub-actions {grid-column:1/-1;display:flex;gap:10px;pointer-events:auto;}
.tangle-hub-play {flex:1;font-size:20px;min-height:56px!important;box-shadow:0 4px 0 #ab813f!important;}
.tangle-hub-map {min-width:85px;padding:10px 18px;border:1px solid #c7b18a;border-radius:16px;background:#fff5df;color:#655237;}
.tangle-hub-repair {background:#e6efe0;box-shadow:none;color:#426d5c;border-color:#adc7aa;min-height:44px!important;}
.tangle-victory__story-reminder {font-size:12px;color:#4b7c66;margin:10px 0;}
.tangle-main-menu--hub .tangle-asya-message {padding:12px 16px;}
.tangle-main-menu--hub .tangle-asya-message p {font-size:14px;margin:5px 0 8px;}
.tangle-main-menu--hub .tangle-dialogue-top {top:8px;left:14px;right:14px;}
.tangle-main-menu--hub .tangle-dialogue-top strong {font-size:18px;}
@media(max-width:600px){
 .tangle-main-menu--hub .tangle-story.tangle-story--dialogue {inset:70px 0 80px;}
 .tangle-main-menu--hub .tangle-asya-dialogue {grid-template-columns:76px minmax(0,1fr);gap:6px;width:calc(100% - 16px);bottom:8px;}
 .tangle-main-menu--hub .tangle-asya-character {width:76px;}
 .tangle-main-menu--hub .tangle-asya-message {padding:10px;}
 .tangle-main-menu--hub .tangle-asya-message p {font-size:12px;line-height:1.3;}
 .tangle-main-menu--hub .tangle-asya-message small {font-size:10px;margin-bottom:6px;}
 .tangle-main-menu--hub .tangle-hub-play {font-size:18px;min-height:48px!important;}
 .tangle-main-menu--hub .tangle-dialogue-top small {font-size:8px;}
 .tangle-main-menu--hub .tangle-dialogue-top strong {font-size:15px;}
}
.tangle-victory__island {display:block;margin:10px auto 0;min-height:44px;border:0;background:transparent;color:#537d67;font:inherit;cursor:pointer;}
/* Shared shell already reserves the bottom tab bar. */
.tangle-main-menu--hub .tangle-story.tangle-story--dialogue {bottom:0;}

/* Island canvas continues behind the HUD; currencies remain readable above it. */
.tangle-main-menu--hub .tangle-story.tangle-story--dialogue {top:0;}
.tangle-main-menu--hub .tangle-dialogue-top {top:calc(76px + env(safe-area-inset-top,0px));}
.tangle-hud-stars {display:flex;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;min-width:48px;height:32px;padding:0 8px;border:1px solid #c5aa7f;border-radius:13px;background:linear-gradient(#fff6df,#ecd8ac);box-shadow:0 2px 0 #a98d62;color:#634c35;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;box-sizing:border-box;}
.tangle-hud-stars > span {color:#c58d2c;font-size:23px;}
.tangle-hub-map {min-width:54px;width:54px;padding:8px;display:grid;place-items:center;}
.tangle-hub-map svg {width:32px;height:32px;}
.tangle-main-menu--hub .gems-main-top-hud__currencies {gap:10px;padding-inline:0;}
@media(max-width:600px){
 .tangle-main-menu--hub .gems-main-top-hud {gap:6px;padding-left:8px;padding-right:8px;}
 .tangle-main-menu--hub .gems-main-top-hud__currencies {gap:5px;}
 .tangle-main-menu--hub .tangle-hud-stars {min-width:42px;padding:0 5px;font-size:13px;gap:3px;}
 .tangle-main-menu--hub .gems-main-top-hud .gems-currency-chip__add {width:18px;}
 .tangle-main-menu--hub .gems-main-top-hud .gems-currency-chip__icon {width:14px;right:3px;}
 .tangle-main-menu--hub .gems-main-top-hud .gems-currency-chip__value {max-width:calc(100% - 36px);font-size:12px;}
 .tangle-main-menu--hub .gems-main-top-hud .gems-currency-chip__value--timer {font-size:9px;}
}

.tangle-archipelago__back {position:absolute;z-index:3;top:calc(12px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));width:48px;height:48px;display:grid;place-items:center;border:1px solid #c3ab83;border-radius:16px;background:#fff5dfed;color:#3e8074;box-shadow:0 3px 0 #b29a73;}
.tangle-archipelago__back svg {width:28px;height:28px;}
.tangle-archipelago__chain {padding-top:calc(76px + env(safe-area-inset-top,0px));}

.tangle-repair-cost {white-space:nowrap;display:inline-block;}

/* Small character motions: one greeting per line, quiet idle between lines. */
.tangle-asya-breath {transform-origin:75px 238px;animation:tangle-asya-breathe 4.6s ease-in-out infinite;}
.tangle-asya-head {transform-origin:73px 133px;animation:tangle-asya-nod 1.3s ease-in-out both;}
.tangle-asya-eyes {transform-origin:73px 90px;animation:tangle-asya-blink 5.7s linear infinite;}
.tangle-asya-hand {transform-origin:102px 171px;animation:tangle-asya-greet 1.5s ease-in-out both;}
.tangle-asya-character.is-working .tangle-asya-hand {animation:none;}
@keyframes tangle-asya-breathe {0%,100%{transform:translateY(0) scaleY(1);}50%{transform:translateY(-1px) scaleY(1.006);}}
@keyframes tangle-asya-nod {0%,100%{transform:rotate(0);}45%{transform:rotate(-3deg);}75%{transform:rotate(1deg);}}
@keyframes tangle-asya-blink {0%,43%,47%,100%{transform:scaleY(1);}45%{transform:scaleY(.08);}}
@keyframes tangle-asya-greet {0%,100%{transform:rotate(0);}40%,60%{transform:rotate(-16deg);}}
@media(prefers-reduced-motion:reduce){.tangle-asya-breath,.tangle-asya-head,.tangle-asya-eyes,.tangle-asya-hand{animation:none;}}

/* Level route shares the quiet, uninterrupted backdrop of the island map. */
.tangle-map--levels {background:radial-gradient(ellipse at 25% 15%,#f4f5e8,transparent 65%),#e2ebdf;color:#526553;}
.tangle-map--levels .tangle-map__scroll {scroll-padding-top:76px;}

/* A compact reward receipt: rating, currency, optional ad, onward. */
.tangle-victory__loot { display:flex; justify-content:center; align-items:center; gap:24px; margin:18px 0 22px; }
.tangle-victory__loot > span { display:flex; align-items:center; gap:7px; font-size:24px; font-weight:800; }
.tangle-victory__loot img { width:25px; height:33px; object-fit:contain; }
.tangle-victory__loot small { font-size:12px; color:#397b67; }
.tangle-victory__story-star { color:#b78228; }
.tangle-victory button:disabled { opacity:.55; cursor:default; }
.tangle-victory .tangle-victory__ad-error { margin:8px 0; font-size:12px; color:#925536; }

/* Shared rewarded-ad action: identical treatment for lives, time and gems. */
.tangle-reward-ad { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:100%; min-height:64px; padding:12px 16px; border:1px solid #9abca8; border-radius:16px; background:#e2eee2; color:#326957; font:inherit; cursor:pointer; box-sizing:border-box; }
.tangle-reward-ad strong { font-size:18px; font-weight:800; }
.tangle-reward-ad small { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; }
.tangle-reward-ad svg { width:17px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; }
.tangle-reward-ad small svg path { fill:currentColor; stroke:none; }
.tangle-reward-ad:disabled { opacity:.55; cursor:default; }
.tangle-reward-ad:focus-visible { outline:3px solid #348d7b; outline-offset:3px; }

.tangle-victory.is-collecting .tangle-victory__loot { animation:tangle-loot-collect .55s ease-in both; }
@keyframes tangle-loot-collect { 0% {transform:scale(1);opacity:1;} 30% {transform:scale(1.12);opacity:1;} 100% {transform:translateY(-45px) scale(.65);opacity:0;} }
@media(prefers-reduced-motion:reduce) { .tangle-victory.is-collecting .tangle-victory__loot {animation:none;opacity:.5;} }

.tangle-story-hammer { display:inline-block; width:32px; height:32px; flex:0 0 auto; vertical-align:middle; overflow:visible; }
.tangle-hud-stars .tangle-story-hammer { width:28px; height:28px; }
.tangle-repair-cost { display:inline-flex; align-items:center; gap:5px; vertical-align:middle; white-space:nowrap; }
.tangle-repair-cost .tangle-story-hammer { width:27px; height:27px; }
.tangle-victory__story-star .tangle-story-hammer { width:35px; height:35px; }

/* Minimal puzzle header: level number and time. */
.tangle-play-hud__title-wrap .tangle-hud-status { margin-top:0; gap:12px; flex-wrap:nowrap; }
.tangle-play-hud__title-wrap .tangle-hud-level-number { margin:0; font-size:22px; line-height:1; font-weight:800; letter-spacing:0; color:#626f59; }

/* One small wooden instrument, with an inset level medallion and a quiet clock. */
.tangle-play-hud__title-wrap .tangle-hud-status {
  position:relative; display:inline-flex; gap:10px; padding:5px 12px 5px 5px;
  border:2px solid #b79a71; border-radius:26px;
  background:linear-gradient(145deg,#fff7e5,#e9d8b4);
  box-shadow:0 3px 0 #967a56,inset 0 1px 0 #fffdf4,inset 0 -2px 3px #ba97552b;
}
.tangle-play-hud__title-wrap .tangle-hud-level-number {
  display:grid; place-items:center; min-width:34px; height:34px; padding:0 3px; box-sizing:border-box;
  border:1px solid #b59a71; border-radius:50%; color:#6f5436;
  background:linear-gradient(#dac49e,#f0dfbd);
  box-shadow:inset 0 2px 3px #87633b38,0 1px 0 #fff8e7;
  font-size:18px; text-shadow:0 1px 0 #fff2d5;
}
.tangle-play-hud__title-wrap .tangle-hud-clock {
  padding:0; border:0; border-radius:0; background:none; color:#695037;
  font-size:19px; gap:6px; letter-spacing:.02em; white-space:nowrap;
}
.tangle-play-hud__title-wrap .tangle-hud-clock svg {width:16px;height:16px;opacity:.7;}
.tangle-play-hud__title-wrap .tangle-hud-clock.is-urgent {color:#b4513d;}
@media(max-width:360px) {
 .tangle-play-hud__title-wrap .tangle-hud-status {gap:7px;padding-right:9px;}
 .tangle-play-hud__title-wrap .tangle-hud-clock {font-size:17px;}
 .tangle-play-hud__title-wrap .tangle-hud-level-number {min-width:30px;height:30px;font-size:17px;}
}

.tangle-pause-overlay {z-index:100;background:#302c256b;backdrop-filter:blur(4px);pointer-events:auto;}
.tangle-pause-card {width:min(300px,calc(100vw - 40px));box-sizing:border-box;padding:26px;border:2px solid #c7ac7e;border-radius:26px;background:linear-gradient(#fff8e6,#eee0c3);box-shadow:0 6px 0 #a4875e,0 14px 40px #30281c33;text-align:center;color:#665038;}
.tangle-pause-card h2 {margin:0;font:800 26px/1.2 system-ui;}
.tangle-pause-card p {margin:9px 0 18px;font:700 14px/1.4 system-ui;letter-spacing:.08em;}
.tangle-pause-actions {display:flex;justify-content:center;gap:20px;}
.tangle-pause-actions button {display:grid;place-items:center;width:76px;height:68px;border:1px solid #bca37b;border-radius:19px;background:linear-gradient(#fff9ec,#e4d2ad);color:#796449;box-shadow:0 4px 0 #ac9066;cursor:pointer;}
.tangle-pause-actions .is-resume {background:linear-gradient(#f7d986,#e6b24e);color:#745024;border-color:#c99c49;box-shadow:0 4px 0 #b38337;}
.tangle-pause-actions svg {display:block;width:48px;height:48px;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
.tangle-pause-actions button:focus-visible {outline:3px solid #3e8976;outline-offset:4px;}

/* Single typography source for Tangle, including embedded shared-shell controls.
   Family alone is enforced: each component keeps its size, weight and hierarchy. */
:root { --tangle-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.tangle-app, .tangle-app *, .tangle-main-menu, .tangle-main-menu * {
  font-family:var(--tangle-font-family) !important;
}
.tangle-main-menu .gems-main-top-hud { --tangle-resource-icon:24px; --tangle-resource-number:18px; }
.tangle-main-menu .gems-main-top-hud .gems-currency-chip__icon,
.tangle-main-menu .gems-main-top-hud .tangle-story-hammer {
  width:var(--tangle-resource-icon); height:var(--tangle-resource-icon);
  object-fit:contain; aspect-ratio:1; flex-shrink:0; vertical-align:middle;
}
.tangle-main-menu .gems-main-top-hud .gems-currency-chip__icon { top:50%; transform:translateY(-50%); }
.tangle-main-menu .gems-main-top-hud .gems-currency-chip__value,
.tangle-main-menu .gems-main-top-hud .tangle-hud-stars {
  font-size:var(--tangle-resource-number); font-weight:800; line-height:1; font-variant-numeric:tabular-nums;
}
@media(max-width:600px) {
  .tangle-main-menu .gems-main-top-hud { --tangle-resource-icon:20px; --tangle-resource-number:13px; }
  .tangle-main-menu .gems-main-top-hud .gems-currency-chip__value {max-width:calc(100% - 44px);}
  .tangle-main-menu .gems-main-top-hud .gems-currency-chip__value--timer {font-size:9px;}
}

.tangle-pack-list {display:grid;gap:16px;margin:18px auto 24px;max-width:720px;}
.tangle-pack {padding:18px;border:1px solid #c9b28c;border-radius:22px;background:linear-gradient(135deg,#fff9ea,#ecdcb9);box-shadow:0 4px 0 #9b825d;color:#654d35;}
.tangle-pack--quiet {background:linear-gradient(135deg,#eef4de,#c9dfce);border-color:#a5b898;}
.tangle-pack-heading {display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:16px;}
.tangle-pack-heading h3 {margin:0;font-size:19px;}
.tangle-pack-heading small {font-size:11px;opacity:.8;}
.tangle-pack-body {display:grid;grid-template-columns:minmax(96px,30%) minmax(0,1fr);align-items:center;gap:16px;margin-bottom:16px;}
.tangle-pack-chest {display:block;width:100%;height:auto;max-width:192px;justify-self:center;object-fit:contain;}
.tangle-pack-loot {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:8px;}
.tangle-pack-loot > div {display:flex;flex-direction:column;align-items:center;gap:4px;font-size:16px;line-height:1.2;min-width:0;}
.tangle-pack-loot small {font-size:12px;line-height:1.3;text-align:center;color:#75624b;overflow-wrap:anywhere;}
.tangle-pack-loot svg {width:42px;height:42px;}
.tangle-pack-loot img {height:42px;width:36px;object-fit:contain;}
.tangle-pack-loot strong {font-size:16px;}
.tangle-pack .tangle-story__primary {width:100%;font-size:16px;min-height:48px;}
.tangle-pack button:disabled {opacity:.6;cursor:default;}
@media (max-width:520px) {
  .tangle-pack {padding:14px;}
  .tangle-pack-body {grid-template-columns:minmax(88px,38%) minmax(0,1fr);gap:12px;}
  .tangle-pack-loot {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px;}
  .tangle-pack-loot svg,.tangle-pack-loot img {height:36px;width:36px;}
}

/* Compact sea-coloured rankings, consistent with the island shell. */
.tangle-tab-panel.tangle-lb {background:linear-gradient(135deg,#fff8e8,#eee3ca);color:#526754;gap:16px;padding-top:20px;}
.tangle-lb > header {display:flex;align-items:center;justify-content:center;gap:12px;text-align:left;}
.tangle-lb__trophy {width:40px;height:44px;margin:0;}
.tangle-lb .tangle-tab-panel__title {font-size:24px;margin:0;color:#52624d;}
.tangle-lb__eyebrow {margin:4px 0 0;font-size:11px;color:#6c806c;letter-spacing:.5px;text-transform:none;}
.tangle-lb .tangle-lb__personal {display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;box-shadow:0 3px 0 #78978040;}
.tangle-lb__personal::before {display:none;}
.tangle-lb__personal > img {width:42px;height:42px;flex-shrink:0;}
.tangle-lb .tangle-lb__personal-name {flex:1;font-size:15px;font-weight:750;color:#546b57;}
.tangle-lb .tangle-lb__personal > strong {font-size:24px;text-align:right;}
.tangle-lb__personal small {display:block;font-size:11px;font-weight:500;color:#7b8069;margin-top:2px;}
.tangle-lb .tangle-lb__unavailable {background:none;border:0;padding:4px 12px;font-size:13px;color:#617663;}
.tangle-lb__unavailable p {margin:4px 0 10px;}
.tangle-lb__unavailable button {padding:6px 16px;}
.tangle-main-menu:has(.tangle-lb) {background:#f4ead4;}

/* The apron continues behind Play instead of ending above it. */
.tangle-main-menu--hub .tangle-asya-character {overflow:visible;position:relative;z-index:0;}
.tangle-main-menu--hub .tangle-hub-actions {position:relative;z-index:2;}

/* Reserve controls first when an iframe loses height to browser/platform bars.
   Only long dialogue text can scroll inside its card; buttons stay in view. */
.tangle-main-menu--hub .tangle-asya-dialogue {
  grid-template-rows:minmax(0,1fr) auto;
  max-height:calc(100% - var(--gems-main-top-hud-h,56px) - var(--gems-main-top-hud-top-gap,16px) - env(safe-area-inset-top,0px) - 12px);
  box-sizing:border-box;
  padding-inline:max(0px,env(safe-area-inset-left,0px)) max(0px,env(safe-area-inset-right,0px));
}
.tangle-main-menu--hub .tangle-asya-message {
  display:flex;
  flex-direction:column;
  min-height:0;
  max-height:100%;
  box-sizing:border-box;
}
.tangle-main-menu--hub .tangle-asya-message p {
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
.tangle-main-menu--hub .tangle-asya-name,
.tangle-main-menu--hub .tangle-hub-repair {flex-shrink:0;}
.tangle-main-menu--hub .tangle-asya-character {max-height:100%;align-self:end;}
@media(max-height:480px) and (min-width:601px) {
  .tangle-main-menu--hub {--gems-main-tab-bar-h:64px!important;}
  .tangle-main-menu--hub .tangle-asya-dialogue {
    left:auto;
    right:max(12px,env(safe-area-inset-right,0px));
    transform:none;
    width:52%;
    grid-template-columns:minmax(0,1fr);
    gap:6px;
    padding:0;
  }
  .tangle-main-menu--hub .tangle-asya-character {display:none;}
  .tangle-main-menu--hub .tangle-asya-message {padding:6px 10px;}
  .tangle-main-menu--hub .tangle-asya-name {font-size:14px;line-height:16px;}
  .tangle-main-menu--hub .tangle-asya-message p {font-size:12px;line-height:1.3;max-height:2.6em;margin:4px 0;}
  .tangle-main-menu--hub .tangle-hub-repair {font-size:13px;padding:7px 10px;}
  .tangle-main-menu--hub .tangle-hub-play {min-height:44px!important;font-size:18px;}
  .tangle-main-menu--hub .tangle-hub-map {width:48px;min-width:48px;padding:5px;}
}

/* Slow full-panel pulse; pause and reduced-motion stop animation. */
.tangle-hud-status.is-urgent {background:#f4c2ad;border-color:#bb5946;animation:tangle-time-warning 1s ease-in-out infinite;}
@keyframes tangle-time-warning {0%,100% {background:#fae2cc;box-shadow:0 4px 0 #ab7452,0 0 0 2px #c96b5240;}50% {background:#ed9f88;box-shadow:0 4px 0 #ab7452,0 0 0 5px #c96b5260;}}
@media(prefers-reduced-motion:reduce){.tangle-hud-status.is-urgent{animation:none;background:#edb29d;}}
.tangle-series-goal {margin:20px 0 24px;padding:18px 16px;border:1px solid #d9c299;border-radius:20px;background:#fff8e6;color:#654d35;}
.tangle-series-goal header {display:flex;justify-content:space-between;align-items:center;gap:12px;}
.tangle-series-goal h3 {font-size:20px;line-height:1.2;margin:0;}
.tangle-series-goal p {font-size:14px;line-height:1.4;margin:12px 0;}
.tangle-series-goal__reward {display:flex;align-items:center;gap:5px;font-size:22px;font-weight:800;color:#378571;}
.tangle-series-goal__reward img {width:24px;height:30px;object-fit:contain;}
.tangle-series-goal__choices {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px;}
.tangle-series-goal__choices button {min-height:44px;padding:8px 4px;border:1px solid #c7b18e;border-radius:12px;background:#f6ecd6;color:inherit;font:inherit;font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;}
.tangle-series-goal__choices button[aria-pressed=true] {background:#d7e9d5;border:2px solid #498d78;color:#326f5d;}
.tangle-series-goal__count {display:block;margin-top:14px;color:#3e846f;font-size:22px;}
.tangle-series-goal__track {position:relative;height:58px;margin:24px 18px 8px 0;}
.tangle-series-goal__rail {position:absolute;top:10px;left:0;right:0;height:8px;border-radius:8px;background:#ded3b7;overflow:hidden;}
.tangle-series-goal__rail i {display:block;height:100%;border-radius:inherit;background:#65aa91;}
.tangle-series-goal__step {position:absolute;top:0;transform:translateX(-50%);display:grid;justify-items:center;gap:6px;}
.tangle-series-goal__step b {box-sizing:border-box;display:grid;place-items:center;width:28px;height:28px;border:2px solid #bda987;border-radius:50%;background:#fff6df;color:#9b7944;font-size:16px;line-height:1;}
.tangle-series-goal__step small {font-size:13px;font-weight:750;line-height:1;}
.tangle-series-goal__step.is-done b {background:#5c9d84;border-color:#5c9d84;color:#fff8dd;}
.tangle-series-goal__step.is-current b {outline:2px solid #4d8b75;outline-offset:3px;}
.tangle-series-goal .tangle-series__play {display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;}
.tangle-series-goal .tangle-series__play img {width:22px;height:27px;object-fit:contain;}
.tangle-series-goal .tangle-series-goal__hint {font-size:12px;text-align:center;color:#897357;margin-bottom:0;}
@media (max-width:380px) {
 .tangle-series-goal {padding:16px 12px;margin-inline:-8px;}
 .tangle-series-goal__choices {grid-template-columns:repeat(2,minmax(0,1fr));}
}

.tangle-launch-debug__panel { max-height:calc(100dvh - 180px); overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; }

.tangle-crystal-flight { position:fixed; inset:0; z-index:1000; pointer-events:none; overflow:hidden; }
.tangle-crystal-flight img { position:absolute; top:0; left:0; width:22px; height:30px; object-fit:contain; will-change:transform,opacity; filter:drop-shadow(0 2px 3px #1d655b66); }

.tangle-weekly-shield { display:flex; flex-direction:column; align-items:center; gap:14px; padding:24px; margin:18px 0; background:#fff7e5; border:1px solid #d6bd91; border-radius:24px; color:#674f36; }
.tangle-weekly-shield h3 { font-size:22px; line-height:1.2; margin:0; text-align:center; }
.tangle-weekly-shield p { margin:0; line-height:1.4; text-align:center; }
.tangle-weekly-shield__icon { width:128px; height:128px; object-fit:contain; }
.tangle-weekly-shield > button { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:48px; padding:12px 16px; font-size:16px; }
.tangle-platform-price { display:inline-flex; flex:0 0 auto; gap:6px; align-items:center; justify-content:center; white-space:nowrap; line-height:1.25; font-variant-numeric:tabular-nums; vertical-align:middle; }
.tangle-platform-price img { display:block; flex:0 0 auto; width:22px; height:22px; object-fit:contain; }
.tangle-weekly-shield strong { color:#397e69; font-size:14px; text-align:center; }

/* All store rows share the pack edges, including the two timed products. */
.tangle-store .tangle-store__grid { max-width:720px; }
.tangle-store__timed { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:720px; margin:0 auto 18px; }
.tangle-weekly-shield--compact { min-width:0; margin:0; padding:18px 14px; gap:8px; box-sizing:border-box; border-radius:22px; box-shadow:0 3px 0 #bca27a; }
.tangle-weekly-shield--compact h3 { font-size:20px; min-height:2.4em; display:grid; place-items:center; }
.tangle-weekly-shield--compact > small { color:#8e7758; font-weight:700; }
.tangle-weekly-shield--compact .tangle-weekly-shield__icon { width:104px; height:104px; }
.tangle-weekly-shield--compact p { font-size:14px; }
.tangle-weekly-shield--compact > button { margin-top:auto; font-size:14px; padding:10px; justify-content:center; flex-wrap:wrap; }
@media(max-width:420px) {
 .tangle-store__timed { gap:12px; }
 .tangle-weekly-shield--compact { padding:14px 10px; border-radius:18px; }
 .tangle-weekly-shield--compact h3 { font-size:16px; }
 .tangle-weekly-shield--compact p { font-size:12px; }
 .tangle-weekly-shield--compact .tangle-weekly-shield__icon { width:88px; height:88px; }
}

.tangle-pack--quiet .tangle-pack-loot { grid-template-columns:repeat(5,minmax(0,1fr)); }
@media(max-width:520px) {
 .tangle-pack--quiet .tangle-pack-loot { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .tangle-pack-adfree { grid-column:1 / -1; }
}

/* Mandatory island booster lessons share the HUD's available space. */
.tangle-play-hud__boosters[hidden] { display: none; }
.tangle-booster-lesson { position:absolute; top:calc(var(--tangle-hud-top, 0px) + 76px); left:50%; transform:translateX(-50%); width:min(88%, 420px); padding:12px 16px; box-sizing:border-box; border:1px solid #c5ac7e; border-radius:20px; background:#fff5df; color:#665035; text-align:center; display:grid; gap:6px; pointer-events:none; box-shadow:0 4px 0 #bfa77d; }
.tangle-booster-lesson strong {font-size:18px;} .tangle-booster-lesson span {font-size:15px;line-height:1.3;} .tangle-booster-lesson small {font-size:11px;color:#487f70;}
.tangle-play-hud__boosters[data-lesson="time"] .tangle-booster--time,
.tangle-play-hud__boosters[data-lesson="pickaxe"] .tangle-booster--pickaxe,
.tangle-play-hud__boosters[data-lesson="scissors"] .tangle-booster--cut {outline:3px solid #3d9a84;outline-offset:4px;animation:tangle-teach-tool 1.6s ease-in-out infinite;}
@keyframes tangle-teach-tool {50% {transform:translateY(-4px);}}
@media(prefers-reduced-motion:reduce){.tangle-play-hud__boosters[data-lesson] .tangle-booster {animation:none;}}
@media(max-height:600px){.tangle-booster-lesson {top:64px;padding:8px 12px;gap:3px;} .tangle-booster-lesson strong{font-size:15px;} .tangle-booster-lesson span{font-size:13px;}}

/* One or two unlocked tools retain the size of a card in the full three-tool row. */
.tangle-play-hud__boosters { justify-content:center; }
.tangle-play-hud__boosters .tangle-booster { flex:0 1 calc((100% - 20px)/3); max-width:112px; }
/* A single visual focus moves from the tool to its board target. */
.tangle-tool-spotlight {position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;}
.tangle-tool-spotlight[hidden] {display:none;}
.tangle-tool-spotlight__hole {position:absolute;border-radius:24px;box-shadow:0 0 0 300vmax #211b2a99;outline:3px solid #ffedb6;outline-offset:2px;}
.tangle-tool-spotlight__label {position:absolute;box-sizing:border-box;padding:10px 12px;border-radius:16px;background:#fff5dc;color:#634c35;text-align:center;font-family:inherit;font-weight:800;font-size:17px;line-height:1.25;box-shadow:0 3px 0 #bca077;}
.tangle-tool-spotlight__hand {position:absolute;filter:drop-shadow(0 2px 2px #35241455);animation:tangle-lesson-tap 1.4s ease-in-out infinite;transform-origin:12px 10px;}
@keyframes tangle-lesson-tap {0%,100%{transform:translate(3px,7px) scale(1)}45%,60%{transform:translate(0,0) scale(.9)}}
.tangle-booster-instruction {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.tangle-play-hud__boosters .tangle-booster__count.is-free {width:auto;min-width:0;padding:0 7px;font-size:10px;right:0;}
.tangle-lesson-clock {font-size:10px;color:#487f70;margin-left:5px;white-space:nowrap;}
@media(prefers-reduced-motion:reduce){.tangle-tool-spotlight__hand{animation:none;}}

.tangle-pause-actions button {position:relative;isolation:isolate;}
.tangle-pause-actions button::before {content:"";position:absolute;inset:5px;border:1px dashed #b194625e;border-radius:14px;pointer-events:none;z-index:-1;}
.tangle-pause-actions .is-resume::before {border-color:#fff4c69c;}

/* Compact fallback help: an end must dock before its rope can collect. */
.tangle-play-hud .tangle-coach-overlay .tangle-play-hud__coach {width:min(300px,calc(100% - 32px));padding:48px 18px 18px;font-size:15px;line-height:1.4;}
.tangle-play-hud .tangle-play-hud__coach-close {width:44px;height:44px;min-width:44px;min-height:44px;border-radius:12px;}
.tangle-play-hud .tangle-play-hud__coach {padding-right:54px;}
.tangle-gesture-demo {margin-top:12px;padding-top:8px;border-top:0;}
.tangle-gesture-demo small {font-size:12px;line-height:1.4;}
.tangle-dock-demo__rope {stroke-dasharray:180 180;animation:tangle-demo-rope 4s ease-in-out infinite;}
.tangle-dock-demo__plug {animation:tangle-demo-dock 4s ease-in-out infinite;}
.tangle-dock-demo__hand {animation:tangle-demo-hand 4s ease-in-out infinite;}
.tangle-dock-demo__done {animation:tangle-demo-done 4s ease-in-out infinite;}
@keyframes tangle-demo-rope {0%,18%{stroke-dashoffset:140}58%,70%{stroke-dashoffset:0}90%,100%{stroke-dashoffset:-180}}
@keyframes tangle-demo-dock {0%,18%{transform:translateX(0);opacity:1}58%,78%{transform:translateX(140px);opacity:1}90%,100%{transform:translateX(140px);opacity:0}}
@keyframes tangle-demo-hand {0%,18%{transform:translateX(0);opacity:1}58%{transform:translateX(140px);opacity:1}70%,100%{transform:translateX(140px);opacity:0}}
@keyframes tangle-demo-done {0%,82%{opacity:0}90%{opacity:.8}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
 .tangle-dock-demo__rope{animation:none;stroke-dashoffset:0;}
 .tangle-dock-demo__plug{animation:none;transform:translateX(140px);}
 .tangle-dock-demo__hand{animation:none;display:none;}
 .tangle-dock-demo__done{animation:none;opacity:.6;}
}

/* First island: a coastal walk, with the same route and touch targets. */
.tangle-map--harbor { background:#96cbbb; }
.tangle-map--harbor .tangle-map__scroll { background:#96cbbb; }
.tangle-map--harbor .tangle-map__route { width:min(100%,480px); }
.tangle-map-landscape { position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none; }
.tangle-map__island-title { position:absolute;top:20px;left:24%;right:8%;text-align:center;color:#496c53;pointer-events:none; }
.tangle-map__island-title span { display:block;font-size:9px;letter-spacing:.16em;font-weight:800; }
.tangle-map__island-title strong { display:block;font-size:18px;margin-top:4px; }
.tangle-map--harbor .tangle-map__rope { opacity:.75; }
.tangle-map--harbor .tangle-map__node { border:5px solid #d8ba7f;background:repeating-linear-gradient(0deg,transparent 0 13px,#8e613926 14px 15px),linear-gradient(135deg,#eed19a,#c99c61);color:#62462c;box-shadow:0 5px 0 #977247,0 8px 9px #5b6a3933,inset 0 0 0 2px #f8e4b5; }
.tangle-map--harbor .tangle-map__node::after { content:"";position:absolute;inset:-4px;border:2px dashed #a7824c;border-radius:50%;pointer-events:none; }
.tangle-map--harbor .tangle-map__node.is-cleared { background:repeating-linear-gradient(0deg,transparent 0 13px,#165e5520 14px 15px),linear-gradient(135deg,#72b59b,#408c7a);color:#fff9e9; }
.tangle-map--harbor .tangle-map__node.is-selected { background:repeating-linear-gradient(0deg,transparent 0 13px,#ac782a22 14px 15px),linear-gradient(135deg,#ffe4a0,#ecc065);color:#684724;outline:3px solid #408c7a;outline-offset:4px; }
.tangle-map--harbor .tangle-map__node.is-locked { opacity:1;filter:saturate(.45);color:#7f7057; }
.tangle-map--harbor .tangle-map__stars { background:#f8edce;box-shadow:0 2px 0 #c9ac74; }
.tangle-map__asya { position:absolute;width:42px;height:96px;left:77px;top:-8px;pointer-events:none;filter:drop-shadow(0 3px 1px #546b4733); }
.tangle-map__asya.on-left { left:auto;right:77px; }
.tangle-map__asya .tangle-asya-character { position:static;width:100%;height:100%; }
.tangle-map-boat { animation:tangle-map-bob 5s ease-in-out infinite; }
@keyframes tangle-map-bob { 0%,100%{transform:translateY(0)}50%{transform:translateY(3px)} }
@media(prefers-reduced-motion:reduce) { .tangle-map-boat,.tangle-map__asya * { animation:none!important; } }
.tangle-map-surf { animation:tangle-map-surf 6s ease-in-out infinite; }
.tangle-map-tree-sway { transform-box:fill-box;transform-origin:50% 100%;animation:tangle-map-tree-sway 7s ease-in-out infinite; }
@keyframes tangle-map-surf { 0%,100%{opacity:.35}50%{opacity:.9} }
@keyframes tangle-map-tree-sway { 0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)} }
@media(prefers-reduced-motion:reduce) { .tangle-map-surf,.tangle-map-tree-sway { animation:none; } }
.tangle-play-hud .tangle-hud-help { display:grid;place-items:center; }
.tangle-hud-help > svg,.tangle-play-hud__coach-close > svg { width:30px;height:30px; }
.tangle-play-hud__coach-close:focus-visible { outline:2px solid #388b79;outline-offset:3px; }
.tangle-map--garden { background:#c9debc; }
.tangle-map--garden .tangle-map__route { width:min(100%,480px); }
.tangle-map--garden .tangle-map__node { border-color:#e4c993;box-shadow:0 4px 0 #8eaa83,inset 0 2px 0 #fff8; }
.tangle-map--garden .tangle-map__node::after { content:"";position:absolute;inset:-4px;border:2px dashed #ac986d;border-radius:50%;pointer-events:none; }
.tangle-map--garden .tangle-map__island-title strong { font-size:16px;line-height:1.15; }
.tangle-garden-clock { animation:tangle-garden-clock 60s linear infinite; }
@keyframes tangle-garden-clock { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){.tangle-garden-clock{animation:none;}}
/* Optional story invitation; the ordinary reward action stays independent. */
.tangle-victory-story { display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;margin:0 0 10px;text-align:left;border:1px solid #b9cbb0;border-radius:16px;background:#eaf0df;color:#416d5b;cursor:pointer;min-height:64px; }
.tangle-victory-story__portrait { flex:0 0 38px;height:48px;overflow:hidden;border-radius:22px;background:#d1e1c5; }
.tangle-victory-story__portrait .tangle-asya-character { position:static;width:46px;height:74px;max-width:none;transform:translate(-4px,-5px); }
.tangle-victory-story__portrait * { animation:none!important; }
.tangle-victory-story.is-new .tangle-asya-hand { animation:tangle-story-greeting 1.5s ease-in-out 1!important;transform-origin:110px 193px; }
@keyframes tangle-story-greeting { 25%,65%{transform:rotate(-12deg)}45%,85%{transform:rotate(8deg)} }
.tangle-victory-story__text { display:flex;flex-direction:column;gap:3px;min-width:0;flex:1; }
.tangle-victory-story__text strong {font-size:13px;line-height:1.2;}
.tangle-victory-story__text > span {font-size:11px;line-height:1.3;color:#77654b;}
.tangle-victory-story__cost {display:flex;align-items:center;gap:3px;font-size:12px;font-weight:750;white-space:nowrap;}
.tangle-victory-story__cost svg {width:21px;height:25px;}
.tangle-victory-story:focus-visible {outline:3px solid #388b79;outline-offset:2px;}
.tangle-victory-story:disabled {opacity:.65;cursor:default;}
@media(prefers-reduced-motion:reduce){.tangle-victory-story.is-new .tangle-asya-hand{animation:none!important;}}
@media(max-height:600px){.tangle-victory-story{min-height:48px;margin-bottom:6px;padding-block:4px;}.tangle-victory-story__portrait{height:38px;}}

/* First encounter: a small work board beside Asya, with room for the gesture. */
.tangle-welcome { position:absolute; top:74px; left:50%; transform:translateX(-50%); width:min(440px,calc(100% - 32px)); display:flex; align-items:center; gap:12px; padding:12px 16px; box-sizing:border-box; background:#fff7e4; border:1px solid #ceb387; border-radius:24px; color:#665039; pointer-events:none; }
.tangle-welcome > :first-child { width:60px; height:82px; flex:0 0 60px; }
.tangle-welcome strong { font-size:18px; line-height:1.25; }
.tangle-welcome p { font-size:14px; line-height:1.4; margin:6px 0 0; }
.tangle-play-stage--welcome .tangle-game-host { left:50%; transform:translateX(-50%); width:min(100%,640px); }
@media(max-height:620px) { .tangle-welcome { top:62px; padding:8px 12px; gap:8px; } .tangle-welcome > :first-child { width:40px;height:56px;flex-basis:40px; } .tangle-welcome strong {font-size:15px;} .tangle-welcome p {font-size:12px;margin-top:3px;} }
.tangle-play-stage--welcome { background:#9dcbb9; background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1200 800%27%3E%3Cpath d=%27M0 0h1200v80C1020 160 980 20 820 90S520 20 340 100 130 70 0 150Z%27 fill=%27%23c0d59b%27/%3E%3Cpath d=%27M0 150C130 70 170 180 340 100S650 160 820 90 1020 160 1200 80%27 fill=%27none%27 stroke=%27%23f1e3b9%27 stroke-width=%2730%27/%3E%3Cg fill=%27none%27 stroke=%27%23d9eee0%27 stroke-width=%273%27 opacity=%27.6%27%3E%3Cpath d=%27M40 300q45 16 90 0M1000 240q45 16 90 0M50 590q45 16 90 0M1010 610q45 16 90 0M280 720q45 16 90 0%27/%3E%3C/g%3E%3Cg fill=%27%23b9905e%27 stroke=%27%23826344%27 stroke-width=%273%27%3E%3Cpath d=%27M1030 800V690h110v110%27/%3E%3Cpath d=%27M1030 720h110M1030 750h110M1030 780h110%27/%3E%3C/g%3E%3C/svg%3E"); background-size:cover; background-position:center; }
.tangle-gem-pack-icon { display:block; width:144px; max-width:70%; height:auto; margin:12px auto; object-fit:contain; }

.tangle-gem-shop {max-width:720px;margin:16px auto 24px;color:#654d35;}
.tangle-gem-shop > h3 {margin:0 0 12px;font-size:18px;}
.tangle-gem-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.tangle-gem-card {min-width:0;text-align:center;padding:12px 8px;border:1px solid #c9b28c;border-radius:18px;background:#fff7e4;box-shadow:0 3px 0 #b89a6c;}
.tangle-gem-card h3 {margin:0;font-size:16px;line-height:1.3;}
.tangle-gem-card .tangle-gem-pack-icon {width:100px;max-width:100%;margin:8px auto;}
.tangle-gem-card .tangle-story__primary {width:100%;min-height:44px;padding:8px 4px;font-size:14px;gap:4px;}
.tangle-gem-card .tangle-platform-price {gap:4px;}
@media(max-width:380px){.tangle-gem-row{gap:6px;}.tangle-gem-card{padding:10px 5px;}.tangle-gem-card h3{font-size:14px;}}
.tangle-gem-shop > h3 {color:#f4e6c8;}

/* Keep purchase labels and SDK prices on the same centered button row. */
.tangle-story__primary.tangle-shop-purchase {
 display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
 box-sizing:border-box; min-height:48px; padding:10px 12px; line-height:1.25;
 border-radius:12px; box-shadow:0 3px 0 #b9955d,inset 0 1px 0 #fff5d5;
 cursor:pointer;
}
.tangle-shop-purchase:focus-visible {outline:3px solid #438d7c;outline-offset:3px;}
.tangle-shop-purchase:enabled:active {transform:translateY(2px);box-shadow:0 1px 0 #b9955d;}
.tangle-story__primary.tangle-shop-purchase:disabled {cursor:default;}
.tangle-gem-card .tangle-shop-purchase {padding:10px 4px;gap:4px;}

.tangle-store__buy {
 justify-content:center; gap:8px; min-height:48px; padding:10px 8px;
 border:1px solid #c6a05d; border-radius:12px;
 background:linear-gradient(#f8dfa0,#e4ba68); color:#604825;
 box-shadow:0 3px 0 #b9955d,inset 0 1px 0 #fff5d5;
 font-size:14px; line-height:1.25;
}
.tangle-store__price {flex:0 0 auto;gap:5px;white-space:nowrap;}
.tangle-store__price img {width:20px;height:24px;}
.tangle-store__buy:active:not(:disabled) {transform:translateY(2px);box-shadow:0 1px 0 #b9955d;}

.tangle-exit-heart {position:relative;width:112px;margin:16px auto 20px;}
.tangle-exit-heart svg {display:block;width:100%;height:104px;filter:drop-shadow(0 4px 0 #ac795b25);}
.tangle-exit-heart span {position:absolute;right:-3px;bottom:0;min-width:42px;padding:4px 7px;border:1px solid #c7ac7e;border-radius:13px;background:#fff3d8;box-shadow:0 3px 0 #b69970;color:#865050;font:800 27px/1 system-ui;transform:rotate(-7deg);}

/* An empty heart slot shows the refill countdown, in one line. */
.tangle-main-menu .gems-main-top-hud .gems-currency-chip__value {white-space:nowrap;}
.tangle-main-menu .gems-main-top-hud .gems-currency-chip__value--timer {font-size:14px;letter-spacing:-.025em;}
@media(max-width:600px) {
 .tangle-main-menu .gems-main-top-hud .gems-currency-chip__value--timer {font-size:9px;}
}

/* Compact life recovery: one reward action and a rope close control. */
.tangle-energy-card {width:min(300px,calc(100vw - 32px));padding:24px;}
.tangle-energy-close {position:absolute;top:8px;right:8px;display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;cursor:pointer;}
.tangle-energy-close svg {width:32px;height:32px;}
.tangle-energy-close:focus-visible {outline:2px solid #438c78;border-radius:12px;}
.tangle-energy-close:disabled {opacity:.5;}
.tangle-energy-heart {width:84px;margin:0 auto;line-height:1;}
.tangle-energy-heart svg {display:block;width:100%;height:80px;}
.tangle-energy-card h2 {font-size:25px;margin:8px 0 12px;}
.tangle-energy-countdown {display:flex;align-items:center;justify-content:center;gap:9px;padding:0;margin:0 0 22px;background:none;}
.tangle-energy-countdown svg {width:27px;height:29px;fill:none;stroke:#8c7655;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.tangle-energy-countdown strong {font-size:29px;color:#716047;}
.tangle-energy-card .tangle-reward-ad {min-height:78px;border-color:#c7a25e;border-radius:19px;background:linear-gradient(#f7dc97,#e8bc69);box-shadow:0 4px 0 #b68e50,inset 0 1px 0 #fff3c9;color:#715333;}
.tangle-energy-reward {display:flex;align-items:center;justify-content:center;gap:7px;}
.tangle-energy-card .tangle-energy-reward svg {width:31px;height:30px;stroke:none;}
.tangle-energy-reward span {font-size:27px;line-height:1;}
@media(max-height:450px){.tangle-energy-card{padding:14px 24px;}.tangle-energy-heart{width:60px;}.tangle-energy-heart svg{height:57px;}.tangle-energy-countdown{margin-bottom:12px;}}

/* Authoring controls keep fixed-size yarn samples and visible history actions. */
.workshop-swatches {display:flex;flex-wrap:wrap;gap:10px;}
.workshop-swatches button {position:relative;flex:0 0 44px;width:44px;height:44px;min-height:44px;border-radius:12px;background:#f4ead6!important;border:1px solid #d8c6a8;box-shadow:0 2px 0 #c5ad88;}
.workshop-swatches button svg {width:40px;height:40px;fill:none;stroke-linecap:round;}
.workshop-swatches button[aria-pressed=true] {background:#e1eddf!important;box-shadow:0 0 0 2px #326f60;}
.workshop-swatches button span {position:absolute;right:-3px;bottom:-4px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#326f60;color:white;font-size:12px;}
.workshop-campaign {position:absolute;top:86px;left:150px;right:312px;display:flex;align-items:center;gap:6px;pointer-events:auto;}
.workshop-campaign button {min-height:36px;padding:4px 10px;}
.workshop-campaign label {color:#f5e8cf;display:flex;align-items:center;gap:6px;font-size:12px;}
.workshop-campaign input {width:62px!important;min-height:36px!important;padding:4px!important;}
.workshop-campaign small {font-size:11px;color:#e3d3b9;}
.tangle-play-stage:has(.workshop:not(.workshop--playing)) .tangle-game-host {top:132px;}
@media(max-width:760px){
 .workshop-nav {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;}
 .workshop-nav>button:nth-last-child(3) {display:none;}
 .workshop-nav>button.workshop-history {display:flex;grid-column:span 2;min-height:34px;font-size:12px;}
 .workshop-campaign {top:166px;left:10px;right:10px;}
 .workshop-campaign small {display:none;}
 .workshop-swatches button {min-height:44px;}
 .tangle-play-stage:has(.workshop:not(.workshop--playing)) .tangle-game-host {top:210px;}
}

.rope-lab{height:100dvh;display:flex;flex-direction:column;background:#f5edda;color:#51412e;font-family:system-ui,sans-serif;overflow:hidden;user-select:none}.rope-lab header{padding:18px 26px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #d9ceb8}.rope-lab small{font-size:11px;letter-spacing:2px;color:#527d70}.rope-lab h1{margin:3px 0 0;font-size:28px}.rope-lab a{color:#376f63}.rope-lab-toolbar{padding:12px 24px;display:flex;gap:8px;flex-wrap:wrap}.rope-lab button{border:1px solid #cbbb9b;border-radius:12px;background:#fff9e9;color:#57452f;padding:11px 16px;min-height:44px;cursor:pointer;font:inherit}.rope-lab button[aria-pressed=true]{background:#357f70;color:#fff;border-color:#357f70}.rope-lab button:focus-visible,.rope-lab a:focus-visible{outline:3px solid #d79835;outline-offset:2px}.rope-lab-presets{display:flex;gap:6px;margin-right:auto}.rope-lab-content{display:grid;grid-template-columns:minmax(0,1fr) 292px;flex:1;min-height:0}.rope-lab-stage{min-height:0;position:relative;touch-action:none}.rope-lab-stage canvas{display:block;width:100%;height:100%;touch-action:none}.rope-lab aside{padding:18px 22px;overflow:auto;border-left:1px solid #d9ceb8;font-size:14px;line-height:1.55}.rope-lab h2{font-size:19px;margin:0 0 12px}.rope-lab label{display:flex;flex-direction:column;margin:18px 0;gap:8px;font-weight:600}.rope-lab input{width:100%;accent-color:#357f70}.rope-lab-status{background:#e3ebd7;border-radius:12px;padding:12px;min-height:65px}.rope-lab dl>div{display:flex;justify-content:space-between;margin:10px 0;gap:8px}.rope-lab dd{margin:0;font-variant-numeric:tabular-nums;font-weight:650}.rope-lab summary{cursor:pointer;font-weight:600}.rope-lab details{border-top:1px solid #d9ceb8;padding-top:16px}@media(max-width:760px){.rope-lab header{padding:10px 14px}.rope-lab h1{font-size:21px}.rope-lab header a{font-size:12px}.rope-lab-toolbar{padding:8px;gap:5px}.rope-lab button{padding:8px 10px;font-size:12px}.rope-lab-content{grid-template-columns:1fr;grid-template-rows:minmax(220px,1fr) 155px}.rope-lab aside{border-left:0;border-top:1px solid #d9ceb8;padding:10px 16px}.rope-lab aside h2{font-size:16px}.rope-lab-presets{width:100%;margin:0}.rope-lab-presets button{flex:1}.rope-lab-status{min-height:0}}

.rope-lab-count{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:10px 0}.rope-lab-count button{min-width:38px;padding:8px}.rope-lab-count strong{min-width:24px;text-align:center}.rope-lab-count button:disabled{opacity:.35}

.rope-lab select{font:inherit;background:#fff9e9;color:#57452f;border:1px solid #cbbb9b;border-radius:8px;padding:8px;min-height:44px}.rope-lab label.rope-lab-check{flex-direction:row;align-items:center}.rope-lab-check input{width:20px;height:20px}.rope-lab aside section{margin:20px 0}.rope-lab aside small{letter-spacing:0}