.twin-body {
  --twin-blue: var(--signal-blue);
  --twin-blue-deep: var(--blue-deep);
  --twin-violet: var(--signal-orange);
  --twin-violet-deep: var(--orange-deep);
  --twin-cyan: var(--signal-info);
  --twin-coral: #e94b45;
  --twin-night: var(--surface-canvas);
  --twin-panel: var(--surface-inset);
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 14%, rgba(56, 104, 255, 0.28), transparent 28%),
    radial-gradient(circle at 92% 82%, rgba(255, 117, 71, 0.22), transparent 32%),
    linear-gradient(145deg, #050d21, #0b1c3d 56%, var(--twin-night));
}

.twin-ambient {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.twin-ambient i {
  position: absolute;
  width: 44vw;
  max-width: 460px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 34%;
  transform: rotate(24deg);
}

.twin-ambient i:first-child {
  top: -18vw;
  left: -20vw;
  box-shadow: 0 0 80px rgba(54, 216, 255, 0.14);
}

.twin-ambient i:nth-child(2) {
  right: -22vw;
  bottom: -18vw;
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(255, 117, 71, 0.18);
}

.twin-ambient span {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.14), transparent);
}

.twin-shell {
  position: relative;
  width: min(100%, 560px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(13px, env(safe-area-inset-top)) 14px calc(15px + env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(11, 24, 53, 0.06) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(rgba(11, 24, 53, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 24, 53, 0.032) 1px, transparent 1px),
    radial-gradient(circle at 14% 2%, rgba(56, 104, 255, 0.1), transparent 28%),
    radial-gradient(circle at 86% 2%, rgba(255, 117, 71, 0.07), transparent 28%),
    var(--surface-shell);
  background-size: auto, 28px 28px, 28px 28px, auto, auto, auto;
  border-inline: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.4);
}

.twin-topbar {
  min-height: 46px;
  display: grid;
  grid-template-columns: auto minmax(116px, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid rgba(11, 24, 53, 0.1);
}

.twin-wordmark {
  position: relative;
  display: grid;
  gap: 1px;
  padding: 3px 0 3px 15px;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
  text-decoration: none;
}

.twin-wordmark::before {
  content: "";
  position: absolute;
  inset: 5px auto 5px 0;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(var(--twin-blue) 0 45%, var(--twin-cyan) 45% 55%, var(--twin-violet) 55%);
  box-shadow: 0 0 12px rgba(40, 217, 232, 0.3);
}

.twin-wordmark span,
.twin-eyebrow {
  font-family: var(--utility-font);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.twin-wordmark span {
  color: var(--twin-blue-deep);
}

.twin-wordmark strong {
  font-family: var(--display-font);
  font-size: 18px;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.twin-icon-button {
  background: rgba(255, 255, 255, 0.88);
}

.twin-level-button {
  color: var(--twin-blue-deep);
  background: linear-gradient(180deg, #fff, var(--surface-blue));
}

.twin-rules-button {
  width: auto;
  min-width: 44px;
  padding-inline: 9px;
  border-radius: 14px;
  font-size: 10px;
  font-weight: 850;
}

.twin-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 11px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(11, 24, 53, 0.1);
}

.twin-eyebrow {
  margin: 0 0 3px;
  color: var(--text-secondary);
}

.twin-heading h1 {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(28px, 8vw, 38px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.twin-heading h1.has-signature {
  max-width: 230px;
  font-size: clamp(21px, 6vw, 29px);
  line-height: 1.05;
}

.twin-moves {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-items: end;
}

.twin-moves > span {
  color: var(--twin-blue-deep);
  font-family: var(--display-font);
  font-size: 29px;
  font-weight: 900;
}

.twin-moves small {
  margin-left: 3px;
  font-size: 11px;
  font-weight: 800;
}

.twin-moves em {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-family: var(--utility-font);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(56, 104, 255, 0.08);
}

.sync-bus {
  position: relative;
  margin-top: 12px;
  padding: 10px 11px 11px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 20px;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(56, 104, 255, 0.065), transparent 40% 60%, rgba(255, 117, 71, 0.065)),
    rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 30px rgba(7, 20, 47, 0.1), inset 0 1px 0 white;
}

.sync-bus::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(56, 104, 255, 0.06), transparent 35% 65%, rgba(255, 117, 71, 0.06));
  pointer-events: none;
}

.sync-bus__meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-secondary);
  font-family: var(--utility-font);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.sync-bus__meta i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal-success);
  box-shadow: 0 0 0 4px rgba(36, 181, 106, 0.13), 0 0 12px rgba(36, 181, 106, 0.24);
}

.sync-bus__meta i.is-pulsing {
  animation: twin-beat 420ms ease-out;
}

.sync-bus__track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.sync-bus__track::before,
.sync-bus__track::after {
  content: "";
  height: 2px;
  border-radius: 99px;
}

.sync-bus__track::before {
  grid-column: 1;
  grid-row: 1;
  background: linear-gradient(90deg, var(--twin-blue), rgba(56, 104, 255, 0.12));
}

.sync-bus__track::after {
  grid-column: 3;
  grid-row: 1;
  background: linear-gradient(90deg, rgba(255, 117, 71, 0.12), var(--twin-violet));
}

.sync-bus__track strong {
  grid-column: 2;
  grid-row: 1;
  min-width: 104px;
  padding: 8px 11px;
  border: 1px solid rgba(11, 24, 53, 0.13);
  border-radius: 12px;
  color: var(--ink);
  background: var(--surface-inset);
  box-shadow: inset 0 1px 0 white;
  font-family: var(--utility-font);
  font-size: 16px;
  text-align: center;
}

.sync-bus__track.is-firing strong {
  animation: command-fire 330ms cubic-bezier(0.16, 0.9, 0.24, 1);
}

.sync-bus__side {
  position: absolute;
  top: -5px;
  color: var(--text-muted);
  font-family: var(--utility-font);
  font-size: 7px;
  font-weight: 900;
}

.sync-bus__side:first-of-type { left: 5px; }
.sync-bus__side:last-of-type { right: 5px; }

.twin-play-zone {
  position: relative;
  display: grid;
  justify-items: center;
  margin-top: 12px;
}

.twin-boards {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  touch-action: none;
  user-select: none;
}

.maze-panel {
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--border-default);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 13px 28px rgba(7, 20, 47, 0.1), inset 0 1px 0 white;
}

.maze-panel--left {
  border-top: 3px solid var(--twin-blue);
  box-shadow: 0 13px 28px rgba(56, 104, 255, 0.11), inset 0 1px 0 white;
}

.maze-panel--right {
  border-top: 3px solid var(--twin-violet);
  box-shadow: 0 13px 28px rgba(255, 117, 71, 0.11), inset 0 1px 0 white;
}

.maze-panel header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  min-height: 33px;
  padding: 0 3px 6px;
}

.maze-panel header span {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-family: var(--utility-font);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.maze-panel header strong {
  font-family: var(--display-font);
  font-size: 14px;
}

.maze-panel header em {
  color: var(--ink-soft);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.maze-panel header em.is-blocked { color: var(--twin-coral); }
.maze-panel--left header strong,
.maze-panel--left header em.is-moving { color: var(--twin-blue-deep); }
.maze-panel--right header strong,
.maze-panel--right header em.is-moving { color: var(--twin-violet-deep); }

.mini-board {
  --twin-cols: 4;
  --twin-rows: 4;
  position: relative;
  width: 100%;
  aspect-ratio: var(--twin-cols) / var(--twin-rows);
  overflow: hidden;
  border: 2px solid var(--twin-night);
  border-radius: 15px;
  background: radial-gradient(circle at 50% 30%, rgba(56, 104, 255, 0.04), transparent 55%), var(--paper);
  isolation: isolate;
}

.mini-board__grid {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--twin-cols), 1fr);
  grid-template-rows: repeat(var(--twin-rows), 1fr);
}

.twin-cell {
  position: relative;
  border-right: 1px solid rgba(23, 33, 58, 0.11);
  border-bottom: 1px solid rgba(23, 33, 58, 0.11);
}

.twin-cell.is-last-col { border-right: 0; }
.twin-cell.is-last-row { border-bottom: 0; }

.twin-cell.is-wall::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 20%;
  background:
    repeating-linear-gradient(135deg, transparent 0 5px, rgba(255, 255, 255, 0.12) 5px 7px),
    var(--twin-night);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), 0 2px 0 rgba(17, 25, 54, 0.22);
}

.twin-goal,
.twin-token {
  position: absolute;
  width: calc(100% / var(--twin-cols));
  height: calc(100% / var(--twin-rows));
  left: 0;
  top: 0;
  transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%));
}

.twin-goal {
  z-index: 3;
}

.twin-goal::before,
.twin-goal::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.twin-goal::before {
  inset: 18%;
  border: 2px solid currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}

.twin-goal::after {
  inset: 36%;
  background: currentColor;
  opacity: 0.26;
}

.twin-goal--left { color: var(--twin-blue); }
.twin-goal--right { color: var(--twin-violet); }

.twin-goal.is-reached::before {
  animation: twin-goal-lock 520ms ease-out;
}

.twin-token {
  z-index: 8;
  display: grid;
  place-items: center;
  transition: transform 205ms cubic-bezier(0.22, 0.84, 0.32, 1);
  will-change: transform;
}

.twin-token i {
  display: grid;
  width: 58%;
  height: 58%;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: white;
  box-shadow: 0 7px 15px rgba(17, 25, 54, 0.28), inset 0 2px 2px rgba(255, 255, 255, 0.38);
  font-family: var(--utility-font);
  font-size: clamp(7px, 2.4vw, 11px);
  font-style: normal;
  font-weight: 900;
}

.twin-token--left i {
  background: linear-gradient(145deg, #6790ff, #204bc9);
  box-shadow: 0 7px 16px rgba(32, 75, 201, 0.35), inset 0 2px 2px rgba(255, 255, 255, 0.42);
}

.twin-token--right i {
  background: linear-gradient(145deg, #ff9975, #d34e23);
  box-shadow: 0 7px 16px rgba(189, 66, 27, 0.31), inset 0 2px 2px rgba(255, 255, 255, 0.42);
}

.twin-token.is-moving i { animation: twin-token-move 260ms ease-out; }
.twin-token.is-blocked i { animation: twin-token-block 230ms ease-out; }

.world-divider {
  height: 72%;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  gap: 6px;
  justify-items: center;
  align-items: center;
}

.world-divider i {
  width: 1px;
  height: 100%;
  background: linear-gradient(transparent, rgba(56, 104, 255, 0.48));
}

.world-divider i:last-child {
  background: linear-gradient(rgba(255, 117, 71, 0.48), transparent);
}

.world-divider span {
  writing-mode: vertical-rl;
  color: var(--text-secondary);
  font-family: var(--utility-font);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.twin-swipe-preview {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 52%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(11, 24, 53, 0.14);
  border-radius: 50%;
  color: var(--twin-blue-deep);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 8px rgba(40, 217, 232, 0.13), 0 14px 32px rgba(7, 20, 47, 0.22);
  font-family: var(--utility-font);
  font-size: 26px;
  font-weight: 900;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
  transition: opacity 100ms, transform 150ms ease-out;
  pointer-events: none;
}

.twin-swipe-preview.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.twin-coach {
  position: absolute;
  z-index: 29;
  left: 35%;
  top: 52%;
  display: grid;
  width: min(76%, 190px);
  gap: 5px;
  justify-items: center;
  opacity: 0;
  pointer-events: none;
}

.twin-coach strong,
.twin-coach small {
  padding: 4px 8px;
  border: 1px solid rgba(11, 24, 53, 0.12);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 14px rgba(7, 20, 47, 0.12);
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
}

.twin-coach small {
  color: var(--text-secondary);
  font-size: 8px;
  font-weight: 800;
}

.twin-coach span {
  position: relative;
  display: block;
  width: 66px;
  height: 42px;
}

.twin-coach span::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  left: 6px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--twin-blue), var(--twin-cyan), var(--twin-violet));
  transform: translateY(-50%);
}

.twin-coach span b {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;
  color: var(--twin-violet-deep);
  font-family: var(--utility-font);
  font-size: 20px;
  transform: translateY(-50%);
}

.twin-coach i {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  display: block;
  width: 34px;
  height: 34px;
  border: 2px solid var(--twin-night);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 8px rgba(40, 217, 232, 0.16);
  transform: translateY(-50%);
}

.twin-coach.is-visible { animation: twin-coach-right 1.35s ease-in-out infinite; }

.twin-lesson {
  min-height: 26px;
  margin: 9px 0 5px;
  padding: 4px 11px;
  border: 1px solid rgba(11, 24, 53, 0.07);
  border-radius: 999px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.twin-combo {
  position: relative;
  z-index: 35;
  top: auto;
  left: auto;
  display: flex;
  gap: 6px;
  align-items: baseline;
  width: max-content;
  min-height: 27px;
  margin: 0 auto 4px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 25px rgba(7, 20, 47, 0.16), inset 0 1px 0 white;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.twin-combo strong,
.twin-combo span {
  font-family: var(--utility-font);
  font-weight: 900;
}

.twin-combo strong { font-size: 8px; letter-spacing: 0.1em; }
.twin-combo span { color: var(--lime-deep); font-size: 11px; }
.twin-combo.is-visible { animation: twin-combo-pop 850ms ease-out both; }

.twin-direction-pad .direction-button {
  background: linear-gradient(180deg, #fff, #edf2fb);
}

.twin-direction-pad .direction-pad__center i {
  background: var(--twin-cyan);
  box-shadow: 0 0 0 5px rgba(40, 217, 232, 0.14), 0 0 14px rgba(40, 217, 232, 0.38);
}

.twin-direction-pad .direction-button.is-guide-focus {
  color: var(--twin-blue-deep);
  border-color: rgba(56, 104, 255, 0.34);
  background: var(--surface-blue);
}

.twin-utility {
  border-color: var(--border-default);
  background: rgba(255, 255, 255, 0.92);
}

.twin-utility .utility-button--hint {
  color: #087b87;
  background: rgba(40, 217, 232, 0.11);
  box-shadow: inset 0 0 0 1px rgba(40, 217, 232, 0.14);
}

.twin-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }

.twin-result-card {
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 20% 0, rgba(54, 216, 255, 0.16), transparent 36%),
    radial-gradient(circle at 80% 0, rgba(255, 117, 71, 0.14), transparent 38%),
    var(--paper);
}

.twin-result-card .mastery-record {
  border-color: rgba(56, 104, 255, 0.18);
  background: linear-gradient(110deg, rgba(56, 104, 255, 0.1), rgba(255, 117, 71, 0.07));
}

.twin-result-card .mastery-record__mark,
.twin-chapter-mastery .chapter-mastery__track span.is-complete {
  background: linear-gradient(145deg, #3868ff, #153fb7);
}

.twin-chapter-mastery .chapter-mastery__track span.is-complete {
  border-color: rgba(56, 104, 255, 0.3);
}

.twin-mastery-preview {
  border-left-color: var(--twin-violet);
  background: linear-gradient(100deg, rgba(255, 117, 71, 0.13), rgba(56, 104, 255, 0.06));
}

.twin-mastery-preview .mastery-preview__label {
  color: var(--twin-violet-deep);
}

.twin-result-mode-link {
  color: var(--twin-violet-deep);
}

.twin-result-signal {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.twin-result-signal i {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--twin-blue);
  box-shadow: 0 0 0 7px rgba(56, 104, 255, 0.11);
  font-family: var(--utility-font);
  font-style: normal;
  font-weight: 900;
}

.twin-result-signal i:last-child {
  background: var(--twin-violet);
  box-shadow: 0 0 0 7px rgba(255, 117, 71, 0.11);
}

.twin-result-signal span {
  height: 3px;
  border-radius: 99px;
  color: var(--twin-violet-deep);
  background: linear-gradient(90deg, var(--twin-blue), var(--twin-cyan) 47%, var(--lime) 50%, var(--twin-violet) 53%);
  font-family: var(--utility-font);
  font-size: 7px;
  font-weight: 900;
  line-height: 27px;
  letter-spacing: 0.1em;
}

.twin-primary {
  background: linear-gradient(105deg, var(--twin-night), #16376f 66%, #244fbb);
}

.twin-level-dialog .chapter-card {
  background: linear-gradient(100deg, rgba(56, 104, 255, 0.055), rgba(255, 117, 71, 0.055)), var(--surface-inset);
}

.twin-level-dialog .level-cell.is-current {
  border-color: var(--twin-blue);
  color: var(--twin-blue-deep);
  background: linear-gradient(145deg, #edf2ff, #d7e2ff);
  box-shadow: 0 0 0 3px rgba(56, 104, 255, 0.13), 0 8px 18px rgba(56, 104, 255, 0.17), inset 0 1px 0 white;
}

.twin-level-dialog .level-cell.is-complete {
  border-color: #173eac;
  color: rgba(255, 255, 255, 0.76);
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 117, 71, 0.28), transparent 34%),
    linear-gradient(145deg, #2759e6, var(--surface-complete));
  box-shadow: 0 8px 18px rgba(21, 63, 183, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.twin-level-dialog .level-cell.is-current.is-complete {
  border-color: var(--twin-violet);
  box-shadow: 0 0 0 3px rgba(255, 117, 71, 0.24), 0 10px 22px rgba(7, 20, 47, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.twin-level-dialog .level-cell.is-complete.is-perfect {
  border-color: rgba(36, 181, 106, 0.86);
  box-shadow: 0 8px 18px rgba(21, 63, 183, 0.25), inset 0 -4px 0 var(--signal-success);
}

.twin-back-link {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.live-guide--twin {
  border-color: rgba(255, 117, 71, 0.24);
  background:
    linear-gradient(100deg, rgba(56, 104, 255, 0.07), transparent 46%, rgba(255, 117, 71, 0.08)),
    rgba(255, 255, 255, 0.96);
}

.live-guide--twin::before {
  content: "TWIN SYNC GUIDE";
}

.live-guide--twin .live-guide__action {
  border-color: rgba(255, 117, 71, 0.2);
  background: linear-gradient(90deg, var(--surface-blue), var(--surface-orange));
}

@keyframes twin-beat {
  0% { transform: scale(1); }
  45% { transform: scale(1.8); box-shadow: 0 0 0 9px rgba(197, 242, 97, 0); }
  100% { transform: scale(1); }
}

@keyframes command-fire {
  0% { transform: scale(0.88); color: var(--twin-cyan); }
  55% { transform: scale(1.08); color: var(--twin-blue-deep); box-shadow: 0 0 24px rgba(40, 217, 232, 0.24); }
  100% { transform: scale(1); }
}

@keyframes twin-token-move {
  0% { transform: scale(0.78); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes twin-token-block {
  0%, 100% { transform: translateX(0) scale(1); }
  40% { transform: translateX(-4px) scale(0.86, 1.1); }
  70% { transform: translateX(3px) scale(0.92, 1.06); }
}

@keyframes twin-goal-lock {
  0% { transform: scale(0.72); opacity: 0.5; }
  55% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes twin-coach-right {
  0%, 12% { opacity: 0; transform: translateX(-54px) scale(0.9); }
  24% { opacity: 1; }
  72% { opacity: 1; transform: translateX(72px) scale(1); }
  100% { opacity: 0; transform: translateX(92px) scale(0.94); }
}

@keyframes twin-combo-pop {
  0% { opacity: 0; transform: translateY(4px) scale(0.7); }
  20% { opacity: 1; transform: translateY(0) scale(1.08); }
  72% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-4px) scale(0.9); }
}

@media (min-width: 760px) {
  .twin-level-dialog {
    width: min(calc(100% - 48px), 800px);
    max-width: 800px;
    max-height: min(90dvh, 850px);
    margin: auto;
  }

  .twin-level-dialog .chapter-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (max-height: 700px) {
  .twin-shell { padding-top: max(8px, env(safe-area-inset-top)); }
  .twin-icon-button,
  .twin-level-button { height: 44px; }
  .twin-heading { margin-top: 3px; }
  .sync-bus { margin-top: 8px; padding-block: 8px; }
  .twin-play-zone { margin-top: 8px; }
  .maze-panel { padding: 5px; }
  .maze-panel header { min-height: 28px; padding-bottom: 4px; }
  .twin-lesson { margin-top: 5px; }
  .twin-utility { position: relative; bottom: auto; margin-top: 7px; }
  .twin-result-signal { margin-bottom: 9px; }
}

@media (max-width: 350px) {
  .twin-shell { padding-inline: 9px; }
  .twin-topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .twin-topbar .mode-switcher { grid-column: 1 / -1; grid-row: 2; width: 100%; margin-top: 3px; }
  .twin-boards { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); gap: 5px; }
  .maze-panel { padding: 5px; border-radius: 16px; }
  .mini-board { border-radius: 12px; }
  .world-divider span { font-size: 5px; }
  .sync-bus__track strong { min-width: 92px; }
  .twin-level-dialog { width: calc(100% - 8px); padding-inline: 10px; }
}