/*
 * YW-01 showcase skin.
 * This layer intentionally stays behind a body flag so the original chapter
 * presentation remains available while the single-level V2 is developed.
 */

body[data-experience="yw01-v2"] {
  --v2-night: #07120f;
  --v2-night-soft: #0d1d18;
  --v2-panel: #13251e;
  --v2-panel-raised: #1a3027;
  --v2-brass: #bd9238;
  --v2-brass-light: #e3bd62;
  --v2-paper: #e5e3d6;
  --v2-paper-deep: #cbc8b8;
  --v2-ink: #19231e;
  --v2-coral: #ed6958;
  --v2-coral-dark: #8e342c;
  --v2-cyan: #45cad1;
  --v2-cyan-dark: #0c6d78;
  --v2-echo: #67cbd2;
  --v2-echo-light: #c5f3f5;
  --v2-echo-dark: #2b7e87;
  --echo: var(--v2-echo);
  --echo-dark: var(--v2-echo-dark);
  min-width: 320px;
  min-height: 100dvh;
  overflow-x: hidden;
  background-color: var(--v2-night);
  background-image:
    linear-gradient(180deg, rgba(3, 10, 8, 0.22), rgba(3, 9, 7, 0.9)),
    url("assets/chronicle-archive-hall.png");
  background-position: center, center 58%;
  background-size: cover, cover;
  background-attachment: fixed;
}

body[data-experience="yw01-v2"]::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(104deg, transparent 0 22px, rgba(169, 221, 208, 0.035) 23px 24px, transparent 25px 52px),
    radial-gradient(circle at 50% 34%, rgba(205, 170, 82, 0.11), transparent 42%),
    linear-gradient(90deg, rgba(2, 7, 5, 0.72), transparent 23%, transparent 77%, rgba(2, 7, 5, 0.72));
}

body[data-experience="yw01-v2"] .app-shell {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
  background: rgba(6, 14, 11, 0.36);
}

/* The formal archive stays focused; calibration restores compact course context. */
body[data-experience="yw01-v2"][data-level-kind="archive"] .level-tabs,
body[data-experience="yw01-v2"][data-level-kind="archive"] .archive-progress,
body[data-experience="yw01-v2"][data-level-kind="archive"] .tutorial-strip,
body[data-experience="yw01-v2"] .archive-dossier,
body[data-experience="yw01-v2"] .mechanic-section,
body[data-experience="yw01-v2"] #replay-briefing-button,
body[data-experience="yw01-v2"] #replay-tutorial-button {
  display: none !important;
}

body[data-experience="yw01-v2"] .statusbar {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body[data-experience="yw01-v2"] .topbar {
  position: relative;
  z-index: 20;
  width: 100%;
  min-height: 64px;
  height: 64px;
  padding: 7px max(18px, calc((100vw - 1280px) / 2));
  display: grid;
  grid-template-columns: max-content minmax(180px, 1fr) auto;
  grid-template-areas: "brand chapter tools";
  align-items: center;
  gap: 22px;
  border: 0;
  border-bottom: 1px solid rgba(227, 189, 98, 0.6);
  background:
    linear-gradient(90deg, rgba(227, 189, 98, 0.06) 1px, transparent 1px) 0 0 / 72px 100%,
    rgba(7, 18, 15, 0.94);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34), inset 0 -3px 0 rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
}

body[data-experience="yw01-v2"] .brand {
  grid-area: brand;
  gap: 10px;
}

body[data-experience="yw01-v2"] .archive-code {
  width: 42px;
  height: 42px;
  border: 1px solid var(--v2-brass-light);
  background: #162a22;
  box-shadow: inset 0 0 0 3px #0a1712, 3px 3px 0 rgba(0, 0, 0, 0.36);
}

body[data-experience="yw01-v2"] .archive-code svg {
  width: 20px;
  height: 20px;
}

body[data-experience="yw01-v2"] .brand h1 {
  color: #f1f1e9;
  font-size: 21px;
}

body[data-experience="yw01-v2"] .brand p {
  margin-top: 2px;
  color: #83988d;
  font-size: 7px;
}

body[data-experience="yw01-v2"] .chapter-heading {
  grid-area: chapter;
  max-width: 430px;
  padding-left: 12px;
  border-left-color: var(--v2-coral);
}

body[data-experience="yw01-v2"] .chapter-heading span {
  color: var(--v2-brass-light);
}

body[data-experience="yw01-v2"] .chapter-heading strong {
  margin-top: 1px;
  font-size: 15px;
}

body[data-experience="yw01-v2"] .chapter-heading small {
  margin-top: 1px;
  color: #81958a;
}

body[data-experience="yw01-v2"] .topbar-tools {
  grid-area: tools;
  gap: 7px;
}

body[data-experience="yw01-v2"] .topbar .icon-button {
  width: 38px;
  height: 38px;
  border-color: #53695e;
  background: rgba(23, 43, 35, 0.92);
  box-shadow: inset 0 -3px 0 #07110d;
}

body[data-experience="yw01-v2"] .topbar .icon-button:hover {
  border-color: var(--v2-brass-light);
  background: #253f34;
}

body[data-experience="yw01-v2"] .workspace {
  width: min(calc(100% - 32px), 1280px);
  height: calc(100dvh - 64px);
  min-height: 600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  align-items: stretch;
  overflow: hidden;
  border: 0;
  background: rgba(8, 20, 16, 0.84);
  box-shadow: 0 0 0 1px rgba(189, 146, 56, 0.36), 0 24px 70px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(8px);
}

body[data-experience="yw01-v2"] .stage-panel {
  position: relative;
  min-height: 0;
  padding: 18px 22px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 76px minmax(310px, 1fr) 138px;
  grid-template-areas:
    "heading"
    "board"
    "controls";
  gap: 14px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px) 0 0 / 70px 100%,
    linear-gradient(rgba(0, 0, 0, 0.13) 1px, transparent 1px) 0 0 / 100% 24px,
    rgba(10, 24, 19, 0.76);
}

body[data-experience="yw01-v2"] .stage-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 52% 45%, rgba(224, 186, 91, 0.12), transparent 57%);
}

body[data-experience="yw01-v2"] .stage-heading {
  grid-area: heading;
  height: 76px;
  min-height: 76px;
  padding: 10px 74px 10px 13px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top-color: rgba(227, 189, 98, 0.62);
  border-bottom-color: rgba(227, 189, 98, 0.24);
  background: rgba(16, 35, 28, 0.9);
}

body[data-experience="yw01-v2"] .stage-heading::before {
  color: rgba(227, 189, 98, 0.15);
  font-size: 52px;
}

body[data-experience="yw01-v2"] .level-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

body[data-experience="yw01-v2"] .level-kicker {
  color: var(--v2-brass-light);
}

body[data-experience="yw01-v2"] .stage-heading h2 {
  margin-top: 3px;
  color: #f1f1e9;
  font-size: clamp(25px, 3.2vh, 31px);
}

body[data-experience="yw01-v2"] .level-concept,
body[data-experience="yw01-v2"] .archive-time {
  border-color: #50665b;
  background: #1c3329;
}

body[data-experience="yw01-v2"] .archive-time {
  border-color: var(--v2-brass);
  color: var(--v2-brass-light);
}

body[data-experience="yw01-v2"] .objective {
  width: min(48%, 390px);
  max-width: 390px;
  margin-left: auto;
  padding: 8px 10px;
  border-left-color: var(--v2-coral);
  background: #20392f;
  color: #d9dfda;
  font-size: 10px;
}

body[data-experience="yw01-v2"] .objective svg {
  color: var(--v2-brass-light);
}

/* Deep display cabinet and dimensional board. */
body[data-experience="yw01-v2"] .board-frame {
  grid-area: board;
  width: 100%;
  height: 100%;
  min-height: 310px;
  padding: 35px 22px 34px;
  border: 10px solid #060c09;
  border-radius: 2px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(73, 111, 91, 0.28), transparent 61%),
    linear-gradient(180deg, #13241d, #09130f);
  box-shadow:
    0 8px 0 #020604,
    0 12px 0 var(--v2-brass),
    0 20px 28px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px #34483e,
    inset 0 0 44px rgba(0, 0, 0, 0.74);
  isolation: isolate;
}

body[data-experience="yw01-v2"] .board-frame::before {
  inset: 5px;
  z-index: 7;
  border: 1px solid var(--v2-brass);
  box-shadow: inset 0 0 16px rgba(227, 189, 98, 0.08);
  opacity: 0.9;
}

body[data-experience="yw01-v2"] .board-frame::after {
  inset: 11px;
  z-index: 6;
  border: 1px solid rgba(220, 232, 224, 0.08);
  border-top-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.07), transparent 22%, transparent 73%, rgba(255, 255, 255, 0.025));
}

body[data-experience="yw01-v2"] .cabinet-plaque,
body[data-experience="yw01-v2"] .cabinet-footer {
  z-index: 9;
  color: #90a49a;
}

body[data-experience="yw01-v2"] .cabinet-plaque span:first-child,
body[data-experience="yw01-v2"] .cabinet-footer b {
  color: var(--v2-brass-light);
}

body[data-experience="yw01-v2"] .cabinet-plaque i,
body[data-experience="yw01-v2"] .cabinet-footer {
  border-color: #40564b;
}

body[data-experience="yw01-v2"] .board {
  z-index: 4;
  gap: 3px;
  padding: 4px;
  border: 3px solid #030705;
  border-radius: 1px;
  background: #030705;
  box-shadow:
    0 8px 0 #020403,
    0 11px 0 rgba(189, 146, 56, 0.7),
    0 20px 34px rgba(0, 0, 0, 0.62);
  transform: translateY(-3px);
  transform-origin: center;
}

body[data-experience="yw01-v2"] .tile {
  overflow: visible;
}

body[data-experience="yw01-v2"] .tile.floor {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 34%),
    #75857c;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -5px 0 #53655b,
    0 1px 0 #111c17;
}

body[data-experience="yw01-v2"] .tile.floor.alt {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 34%),
    #6c7b73;
}

body[data-experience="yw01-v2"] .tile.wall {
  z-index: 2;
  border-color: #15221c;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 45%),
    #2a3d34;
  box-shadow:
    inset 0 7px 0 #50655a,
    inset 0 -8px 0 #14231c,
    inset 2px 0 0 rgba(255, 255, 255, 0.05),
    0 5px 5px rgba(2, 5, 4, 0.42);
}

body[data-experience="yw01-v2"] .tile.wall::after {
  right: 10%;
  bottom: 11%;
  width: 42%;
  background: #101c16;
  box-shadow: -22px -13px 0 rgba(122, 148, 134, 0.12);
}

body[data-experience="yw01-v2"] .tile-code {
  left: 4px;
  top: 4px;
  box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.32);
}

body[data-experience="yw01-v2"] .entity-inner {
  filter: drop-shadow(0 5px 1px rgba(0, 0, 0, 0.5));
}

body[data-experience="yw01-v2"] .player .entity-inner,
body[data-experience="yw01-v2"] .ghost .entity-inner {
  width: 66%;
}

body[data-experience="yw01-v2"] .player .entity-inner {
  border: 3px solid #fff4ef;
  background:
    radial-gradient(circle at 36% 28%, #ff9f8f 0 12%, transparent 13%),
    var(--v2-coral);
  color: #fff7f2;
  box-shadow:
    0 4px 0 var(--v2-coral-dark),
    0 0 0 3px rgba(237, 105, 88, 0.2),
    0 8px 14px rgba(65, 16, 13, 0.34);
}

body[data-experience="yw01-v2"] .player-id {
  border-color: #fff4ef;
  background: var(--v2-coral-dark);
}

body[data-experience="yw01-v2"] .ghost .entity-inner {
  border: 3px dashed var(--v2-cyan);
  background: rgba(15, 50, 51, 0.28);
  color: #c3fcff;
  box-shadow:
    inset 0 0 0 2px rgba(151, 246, 249, 0.14),
    0 0 0 2px rgba(69, 202, 209, 0.18),
    0 0 15px rgba(69, 202, 209, 0.56);
  filter: none;
}

body[data-experience="yw01-v2"] .ghost.finished .entity-inner {
  border-style: solid;
  background: rgba(34, 111, 112, 0.2);
}

body[data-experience="yw01-v2"] .ghost-id {
  border-color: #d9fdff;
  background: var(--v2-cyan-dark);
}

body[data-experience="yw01-v2"] .box .entity-inner {
  width: 76%;
  border: 3px solid #4c3510;
  background:
    linear-gradient(145deg, rgba(255, 246, 199, 0.38), transparent 35%),
    #bd8d34;
  box-shadow:
    inset 0 0 0 4px #dfb75e,
    inset 0 -6px 0 rgba(96, 60, 10, 0.28),
    0 5px 0 #38280e,
    0 9px 14px rgba(0, 0, 0, 0.36);
}

body[data-experience="yw01-v2"] .crate-mark {
  border-color: rgba(64, 42, 8, 0.58);
  background: rgba(245, 222, 157, 0.83);
}

body[data-experience="yw01-v2"] .tile.time-node::before {
  box-shadow: inset 0 0 0 4px rgba(30, 149, 165, 0.3), 0 0 12px rgba(69, 202, 209, 0.3);
}

body[data-experience="yw01-v2"] .tile.plate::before,
body[data-experience="yw01-v2"] .tile.sync-gate::before,
body[data-experience="yw01-v2"] .tile.sync-gate::after {
  box-shadow: inset 0 0 0 3px rgba(255, 244, 178, 0.34), 0 3px 0 #574815;
}

body[data-experience="yw01-v2"] .tile.goal::before {
  filter: drop-shadow(0 0 3px rgba(99, 191, 127, 0.42));
}

body[data-experience="yw01-v2"] .tile.exit::before {
  box-shadow: inset 0 -6px 0 #719e7e, 0 4px 0 #263e2d;
}

body[data-experience="yw01-v2"] .future-step span {
  width: 28%;
  height: auto;
  aspect-ratio: 1;
  border-width: 2px;
  border-color: var(--v2-echo-light);
  background: rgba(31, 66, 83, 0.78);
  color: #e4f5fb;
  font-size: 11px;
  box-shadow: 0 0 10px rgba(111, 169, 196, 0.42);
}

body[data-experience="yw01-v2"] .board-toast {
  z-index: 12;
  bottom: 34px;
  border: 1px solid var(--v2-brass);
  background: rgba(5, 15, 11, 0.94);
  color: #f0eee4;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.32);
}

/* Command console. */
body[data-experience="yw01-v2"] .control-deck {
  grid-area: controls;
  min-width: 0;
  height: 138px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-top: 1px solid rgba(227, 189, 98, 0.43);
  border-bottom: 1px solid rgba(227, 189, 98, 0.18);
  background: rgba(13, 29, 23, 0.88);
}

body[data-experience="yw01-v2"] .dpad {
  padding: 6px;
  grid-template-columns: repeat(3, 37px);
  grid-template-rows: repeat(3, 37px);
  gap: 4px;
  border-color: #4c6156;
  background: #0a1712;
  box-shadow: 0 5px 0 #030806, inset 0 0 0 1px rgba(227, 189, 98, 0.12);
}

body[data-experience="yw01-v2"] .move-button {
  min-width: 0;
  min-height: 0;
  border-color: #6a7e73;
  background: #cbd3cd;
  box-shadow: inset 0 -4px 0 #87968d;
}

body[data-experience="yw01-v2"] .move-button:hover {
  border-color: var(--v2-brass-light);
  background: #eff1ed;
}

body[data-experience="yw01-v2"] .move-wait {
  border-color: #846821;
  background: var(--v2-brass-light);
  color: #302304;
  box-shadow: inset 0 -4px 0 #987226;
}

body[data-experience="yw01-v2"] .phase-card {
  width: min(100%, 460px);
  min-width: 250px;
  min-height: 94px;
  height: 94px;
  padding: 12px 30px 12px 14px;
  border-color: var(--v2-brass);
  background: #162b22;
  color: #e8ece8;
  box-shadow: 0 5px 0 #050c09, inset 4px 0 0 var(--v2-coral);
}

body[data-experience="yw01-v2"] .phase-card.is-sync {
  border-color: var(--v2-cyan);
  background: #102b2d;
  box-shadow: 0 5px 0 #030b0c, inset 4px 0 0 var(--v2-cyan);
}

body[data-experience="yw01-v2"] .phase-card-icon {
  width: 38px;
  height: 38px;
  border-color: currentColor;
}

body[data-experience="yw01-v2"] .phase-card-copy small {
  color: var(--v2-brass-light);
}

body[data-experience="yw01-v2"] .phase-card.is-sync .phase-card-copy small {
  color: #83eef3;
}

body[data-experience="yw01-v2"] .phase-card-copy strong {
  font-size: 15px;
}

body[data-experience="yw01-v2"] .phase-card-copy > span {
  color: #a8b8af;
  font-size: 9px;
}

/* Restrained paper archive: data dense, but no stacked-card treatment. */
body[data-experience="yw01-v2"] .time-panel {
  min-width: 0;
  height: 100%;
  padding: 20px 18px;
  overflow: auto;
  border-top: 0;
  border-left: 3px solid var(--v2-brass);
  background-color: var(--v2-paper);
  background-image:
    linear-gradient(rgba(36, 52, 44, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, transparent 23px, rgba(151, 69, 62, 0.11) 24px, transparent 25px);
  background-size: 100% 22px, 100% 100%;
  color: var(--v2-ink);
  box-shadow: inset 5px 0 0 rgba(255, 255, 255, 0.35), -12px 0 28px rgba(0, 0, 0, 0.18);
  scrollbar-color: #8e9388 transparent;
}

body[data-experience="yw01-v2"] .time-heading {
  padding-bottom: 11px;
  border-bottom: 2px solid var(--v2-ink);
}

body[data-experience="yw01-v2"] .time-heading p {
  color: var(--v2-cyan-dark);
}

body[data-experience="yw01-v2"] .time-heading h3 {
  font-size: 22px;
}

body[data-experience="yw01-v2"] .phase-rail {
  margin-top: 14px;
  padding: 0;
  border-top: 1px solid #9a9d92;
  background: transparent;
}

body[data-experience="yw01-v2"] .phase-rail li {
  min-height: 53px;
  padding: 9px 4px;
  border: 0;
  border-bottom: 1px solid #aaaca2;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-experience="yw01-v2"] .phase-rail li.active {
  border-color: #8e9288;
  border-left: 4px solid var(--v2-coral);
  background: rgba(255, 255, 255, 0.32);
  color: var(--v2-ink);
  box-shadow: none;
}

body[data-experience="yw01-v2"] .phase-rail li.complete {
  border-color: #8e9288;
  border-left: 4px solid #397d50;
  background: rgba(73, 130, 88, 0.08);
  color: var(--v2-ink);
}

body[data-experience="yw01-v2"] .phase-index {
  border-color: #73796f;
  background: transparent;
  color: #4e5c54;
}

body[data-experience="yw01-v2"] .phase-rail li.active .phase-index {
  border-color: var(--v2-coral-dark);
  background: var(--v2-coral);
  color: white;
}

body[data-experience="yw01-v2"] .mission-card {
  margin-top: 18px;
  padding: 12px 0 13px 12px;
  border: 0;
  border-top: 1px solid #8e9288;
  border-bottom: 1px solid #8e9288;
  border-left: 4px solid var(--v2-brass);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.26);
  box-shadow: none;
}

body[data-experience="yw01-v2"] .mission-heading span {
  color: #8a6323;
}

body[data-experience="yw01-v2"] .mission-card p {
  color: #47524b;
  line-height: 1.55;
}

body[data-experience="yw01-v2"] .recording-section,
body[data-experience="yw01-v2"] .echo-section {
  margin-top: 18px;
  padding-top: 0;
}

body[data-experience="yw01-v2"] .section-label {
  padding-bottom: 7px;
  border-bottom: 1px solid #8e9288;
}

body[data-experience="yw01-v2"] .section-label span {
  color: #525e56;
}

body[data-experience="yw01-v2"] .recording-lane,
body[data-experience="yw01-v2"] .echo-list {
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid #aaaca2;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

body[data-experience="yw01-v2"] .record-chip,
body[data-experience="yw01-v2"] .action-chip {
  border-radius: 2px;
}

body[data-experience="yw01-v2"] .completion-scrim {
  z-index: 30;
  background: rgba(4, 11, 8, 0.78);
  backdrop-filter: blur(5px);
}

body[data-experience="yw01-v2"] .completion {
  border-color: var(--v2-brass);
  border-radius: 3px;
  background: var(--v2-paper);
  color: var(--v2-ink);
  box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.42);
}

body[data-experience="yw01-v2"] .primary-command {
  border-color: var(--v2-brass);
  background: #163128;
  color: #f6f1df;
}

body[data-experience="yw01-v2"] .primary-command:hover {
  border-color: var(--v2-brass-light);
  background: #21473a;
  color: #ffffff;
}

body[data-experience="yw01-v2"] .completion-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-experience="yw01-v2"] .completion-actions button {
  min-width: 0;
  padding-inline: 9px;
  line-height: 1.25;
}

body[data-experience="yw01-v2"] button:focus-visible,
body[data-experience="yw01-v2"] [tabindex]:focus-visible {
  outline-color: rgba(227, 189, 98, 0.76);
}

@media (max-width: 980px) {
  body[data-experience="yw01-v2"] .workspace {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 286px;
  }

  body[data-experience="yw01-v2"] .stage-panel {
    padding-inline: 14px;
  }

  body[data-experience="yw01-v2"] .objective {
    width: 45%;
  }
}

@media (max-width: 760px) {
  body[data-experience="yw01-v2"] {
    background-position: center, 44% center;
  }

  body[data-experience="yw01-v2"] .app-shell {
    display: block;
  }

  body[data-experience="yw01-v2"] .topbar {
    position: sticky;
    top: 0;
    height: 58px;
    min-height: 58px;
    padding: 6px 9px;
    grid-template-columns: max-content minmax(0, 1fr) auto;
    gap: 9px;
  }

  body[data-experience="yw01-v2"] .archive-code {
    width: 38px;
    height: 38px;
  }

  body[data-experience="yw01-v2"] .brand h1 {
    font-size: 18px;
  }

  body[data-experience="yw01-v2"] .brand p,
  body[data-experience="yw01-v2"] .chapter-heading small,
  body[data-experience="yw01-v2"] #audio-button {
    display: none;
  }

  body[data-experience="yw01-v2"] .chapter-heading {
    display: block;
    padding-left: 8px;
  }

  body[data-experience="yw01-v2"] .chapter-heading strong {
    font-size: 12px;
  }

  body[data-experience="yw01-v2"] .chapter-heading span {
    font-size: 7px;
  }

  body[data-experience="yw01-v2"] .topbar .icon-button {
    width: 36px;
    height: 36px;
  }

  body[data-experience="yw01-v2"] .workspace {
    width: 100%;
    height: auto;
    min-height: calc(100dvh - 58px);
    display: block;
    overflow: visible;
    backdrop-filter: none;
  }

  body[data-experience="yw01-v2"] .stage-panel {
    padding: 10px 8px 150px;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-areas:
      "heading"
      "board";
    gap: 10px;
    overflow: visible;
  }

  body[data-experience="yw01-v2"] .stage-heading {
    width: 100%;
    height: auto;
    min-height: 84px;
    padding: 9px 50px 9px 9px;
    display: block;
  }

  body[data-experience="yw01-v2"] .stage-heading::before {
    right: 7px;
    font-size: 44px;
  }

  body[data-experience="yw01-v2"] .stage-heading h2 {
    font-size: 23px;
  }

  body[data-experience="yw01-v2"] .objective {
    width: 100%;
    max-width: none;
    margin-top: 7px;
    padding: 6px 8px;
    font-size: 9px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    width: calc(100% + 16px);
    height: auto;
    min-height: clamp(270px, 70vw, 330px);
    margin-inline: -8px;
    padding: 29px 3px 28px;
    border-width: 6px;
    border-radius: 0;
    box-shadow: 0 6px 0 #020604, 0 9px 0 var(--v2-brass), 0 17px 22px rgba(0, 0, 0, 0.48), inset 0 0 0 2px #34483e;
  }

  body[data-experience="yw01-v2"] .board-frame::before {
    inset: 3px;
  }

  body[data-experience="yw01-v2"] .board-frame::after {
    inset: 7px;
  }

  body[data-experience="yw01-v2"] .board {
    width: 100%;
    gap: 2px;
    padding: 2px;
    border-width: 2px;
    transform: none;
  }

  body[data-experience="yw01-v2"] .control-deck {
    position: fixed;
    z-index: 18;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px;
    padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    justify-content: center;
    gap: 8px;
    border-top: 2px solid var(--v2-brass);
    border-bottom: 0;
    background: rgba(7, 18, 15, 0.96);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
  }

  body[data-experience="yw01-v2"] .dpad {
    flex: 0 0 auto;
    padding: 5px;
    grid-template-columns: repeat(3, 38px);
    grid-template-rows: repeat(3, 38px);
    gap: 3px;
  }

  body[data-experience="yw01-v2"] .phase-card {
    width: auto;
    min-width: 0;
    max-width: 230px;
    min-height: 118px;
    height: 118px;
    flex: 1 1 180px;
    padding: 10px 23px 10px 10px;
    gap: 7px;
  }

  body[data-experience="yw01-v2"] .phase-card-icon {
    width: 30px;
    height: 30px;
  }

  body[data-experience="yw01-v2"] .phase-card-copy strong {
    font-size: 13px;
  }

  body[data-experience="yw01-v2"] .phase-card-copy > span {
    font-size: 8px;
    line-height: 1.35;
  }

  body[data-experience="yw01-v2"] .time-panel {
    height: auto;
    padding: 18px 14px 164px;
    overflow: visible;
    border-top: 3px solid var(--v2-brass);
    border-left: 0;
    box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.32);
  }

  body[data-experience="yw01-v2"] .phase-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  body[data-experience="yw01-v2"] .phase-rail li {
    min-height: 66px;
    padding: 7px 5px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 5px;
    border-right: 1px solid #aaaca2;
  }

  body[data-experience="yw01-v2"] .phase-rail li:last-child {
    border-right: 0;
  }

  body[data-experience="yw01-v2"] .phase-rail li.active,
  body[data-experience="yw01-v2"] .phase-rail li.complete {
    border-left-width: 0;
    box-shadow: inset 0 4px 0 var(--v2-coral);
  }

  body[data-experience="yw01-v2"] .phase-rail li.complete {
    box-shadow: inset 0 4px 0 #397d50;
  }

  body[data-experience="yw01-v2"] .phase-rail strong {
    font-size: 9px;
  }

  body[data-experience="yw01-v2"] .phase-rail small {
    font-size: 7px;
  }
}

@media (max-width: 390px) {
  body[data-experience="yw01-v2"] .brand p,
  body[data-experience="yw01-v2"] .archive-code small,
  body[data-experience="yw01-v2"] .chapter-heading span,
  body[data-experience="yw01-v2"] #help-button {
    display: none;
  }

  body[data-experience="yw01-v2"] .topbar {
    grid-template-columns: max-content minmax(0, 1fr) auto;
    gap: 7px;
  }

  body[data-experience="yw01-v2"] .brand h1 {
    font-size: 17px;
  }

  body[data-experience="yw01-v2"] .chapter-heading strong {
    font-size: 11px;
  }

  body[data-experience="yw01-v2"] .stage-panel {
    padding-bottom: 142px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    min-height: 258px;
  }

  body[data-experience="yw01-v2"] .control-deck {
    height: 132px;
    gap: 6px;
  }

  body[data-experience="yw01-v2"] .dpad {
    grid-template-columns: repeat(3, 36px);
    grid-template-rows: repeat(3, 36px);
  }

  body[data-experience="yw01-v2"] .phase-card {
    min-height: 110px;
    height: 110px;
  }

  body[data-experience="yw01-v2"] .phase-card-icon {
    display: none;
  }

  body[data-experience="yw01-v2"] .time-panel {
    padding-bottom: 150px;
  }
}

@media (max-width: 480px) {
  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-strip:not([hidden]) {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-key {
    display: none;
  }
}

@media (max-width: 360px) {
  body[data-experience="yw01-v2"] .archive-code {
    display: none;
  }

  body[data-experience="yw01-v2"] .brand h1 {
    font-size: 16px;
  }

  body[data-experience="yw01-v2"] .chapter-heading {
    padding-left: 6px;
  }

  body[data-experience="yw01-v2"] .topbar .icon-button {
    width: 34px;
    height: 34px;
  }

  body[data-experience="yw01-v2"] .stage-heading h2 {
    font-size: 21px;
  }

  body[data-experience="yw01-v2"] .level-concept,
  body[data-experience="yw01-v2"] .archive-time {
    padding-inline: 5px;
    font-size: 7px;
  }

  body[data-experience="yw01-v2"] .control-deck {
    height: 128px;
  }

  body[data-experience="yw01-v2"] .dpad {
    grid-template-columns: repeat(3, 34px);
    grid-template-rows: repeat(3, 34px);
  }

  body[data-experience="yw01-v2"] .phase-card {
    min-height: 106px;
    height: 106px;
    padding-right: 18px;
  }

  body[data-experience="yw01-v2"] .phase-card-copy > span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* Loaded after the legacy compact-height rule: keep V2's two-column composition. */
@media (max-height: 620px) and (min-width: 761px) {
  body[data-experience="yw01-v2"] .app-shell {
    grid-template-rows: 56px minmax(0, 1fr);
  }

  body[data-experience="yw01-v2"] .topbar {
    height: 56px;
    min-height: 56px;
    padding-block: 5px;
    grid-template-columns: max-content minmax(160px, 1fr) auto;
    grid-template-areas: "brand chapter tools";
  }

  body[data-experience="yw01-v2"] .archive-code {
    width: 38px;
    height: 38px;
  }

  body[data-experience="yw01-v2"] .brand h1 {
    font-size: 19px;
  }

  body[data-experience="yw01-v2"] .workspace {
    width: min(calc(100% - 24px), 1280px);
    height: calc(100dvh - 56px);
    min-height: 500px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 286px;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  body[data-experience="yw01-v2"] .stage-panel {
    height: 100%;
    min-height: 0;
    padding: 10px 14px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 60px minmax(250px, 1fr) 104px;
    grid-template-areas:
      "heading"
      "board"
      "controls";
    gap: 9px;
  }

  body[data-experience="yw01-v2"] .stage-heading {
    grid-area: heading;
    width: 100%;
    height: 60px;
    min-height: 60px;
    padding: 6px 54px 6px 10px;
    flex-direction: row;
  }

  body[data-experience="yw01-v2"] .stage-heading h2 {
    font-size: 21px;
  }

  body[data-experience="yw01-v2"] .stage-heading .objective {
    width: min(48%, 340px);
    max-width: 340px;
    padding: 5px 7px;
    font-size: 8px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    grid-area: board;
    width: 100%;
    height: 100%;
    min-height: 250px;
    padding: 27px 8px 26px;
  }

  body[data-experience="yw01-v2"] .control-deck {
    grid-area: controls;
    width: 100%;
    height: 104px;
    min-width: 0;
    padding: 5px 9px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  body[data-experience="yw01-v2"] .control-deck .dpad {
    padding: 4px;
    grid-template-columns: repeat(3, 28px);
    grid-template-rows: repeat(3, 28px);
    gap: 3px;
  }

  body[data-experience="yw01-v2"] .control-deck .phase-card {
    width: min(100%, 430px);
    min-width: 220px;
    min-height: 78px;
    height: 78px;
    padding: 8px 24px 8px 10px;
  }

  body[data-experience="yw01-v2"] .control-deck .phase-card-icon {
    display: grid;
    width: 30px;
    height: 30px;
  }

  body[data-experience="yw01-v2"] .control-deck .phase-card-copy strong {
    font-size: 12px;
  }

  body[data-experience="yw01-v2"] .control-deck .phase-card-copy > span {
    font-size: 8px;
  }

  body[data-experience="yw01-v2"] .time-panel {
    height: 100%;
    padding: 13px 14px;
    overflow: auto;
    border-top: 0;
    border-left: 3px solid var(--v2-brass);
  }

  body[data-experience="yw01-v2"] .phase-rail li {
    min-height: 43px;
    padding-block: 6px;
  }

  body[data-experience="yw01-v2"] .mission-card,
  body[data-experience="yw01-v2"] .recording-section,
  body[data-experience="yw01-v2"] .echo-section {
    margin-top: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-experience="yw01-v2"] *,
  body[data-experience="yw01-v2"] *::before,
  body[data-experience="yw01-v2"] *::after {
    scroll-behavior: auto !important;
  }
}

/* Exit control and mainline deadlock recovery. */
body[data-experience="yw01-v2"] .topbar-tools {
  padding-right: 45px;
}

body[data-experience="yw01-v2"] .global-exit-title-button {
  position: fixed;
  z-index: 12000;
  top: 13px;
  right: max(18px, calc((100vw - 1280px) / 2));
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-color: rgba(209, 130, 106, 0.62);
  background: rgba(23, 43, 35, 0.96);
  color: #efc9b8;
  box-shadow: inset 0 -3px 0 #07110d, 0 4px 13px rgba(0, 0, 0, 0.34);
}

body[data-experience="yw01-v2"].yw-opening-active .global-exit-title-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body[data-experience="yw01-v2"].yw-opening-active:has(.yw-opening[data-mode="intro"]:not([hidden])) .global-exit-title-button,
body[data-experience="yw01-v2"].yw-opening-active:has(.yw-opening[data-hub-open="inspection"]:not([hidden])) .global-exit-title-button {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body[data-experience="yw01-v2"].stamp-briefing-open .global-exit-title-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body[data-experience="yw01-v2"] .yw-opening[data-hub-open="inspection"] .yw-hub-close {
  display: none;
}

body[data-experience="yw01-v2"].yw-opening-active:has(.yw-opening[data-mode="intro"]:not([hidden])) .global-exit-title-button {
  top: 30px;
  right: max(36px, calc((100vw - 1400px) / 2));
}

body[data-experience="yw01-v2"].yw-opening-active:has(.yw-opening[data-mode="intro"]:not([hidden])) .yw-opening-intro-tools {
  margin-right: 48px;
}

body[data-experience="yw01-v2"] .global-exit-title-button svg {
  width: 17px;
  height: 17px;
}

body[data-experience="yw01-v2"] .global-exit-title-button:hover {
  border-color: #ef9d82;
  background: #4a2d28;
  color: #fff3e9;
}

body[data-experience="yw01-v2"].deadlock-open {
  overflow: hidden;
}

body[data-experience="yw01-v2"] .deadlock-overlay[hidden] {
  display: none !important;
}

body[data-experience="yw01-v2"] .deadlock-overlay {
  position: fixed;
  z-index: 140;
  inset: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  overflow: auto;
  background:
    radial-gradient(circle at center, rgba(110, 78, 52, 0.18), transparent 48%),
    rgba(2, 8, 6, 0.86);
  backdrop-filter: blur(8px);
}

body[data-experience="yw01-v2"] .deadlock-dialog {
  position: relative;
  width: min(510px, 100%);
  max-height: calc(100dvh - 48px);
  padding: 30px 30px 24px;
  overflow: auto;
  border: 2px solid #936d30;
  border-radius: 3px;
  background:
    linear-gradient(rgba(53, 69, 59, 0.065) 1px, transparent 1px) 0 0 / 100% 23px,
    linear-gradient(90deg, transparent 29px, rgba(145, 69, 57, 0.1) 30px, transparent 31px),
    #e7e3d4;
  color: #17231d;
  box-shadow:
    10px 12px 0 rgba(0, 0, 0, 0.42),
    inset 0 0 0 5px rgba(255, 255, 255, 0.3),
    inset 0 0 0 7px rgba(147, 109, 48, 0.18);
  animation: v2-deadlock-enter 220ms cubic-bezier(.2, .8, .24, 1) both;
}

body[data-experience="yw01-v2"] .deadlock-dialog::after {
  content: "ARCHIVE HOLD · MANUAL RESET ADVISED";
  position: absolute;
  right: 23px;
  bottom: 85px;
  color: rgba(126, 62, 52, 0.15);
  font-family: var(--font-code);
  font-size: 8px;
  font-weight: 900;
  pointer-events: none;
  transform: rotate(-4deg);
}

body[data-experience="yw01-v2"] .deadlock-mark {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border: 3px double #87473e;
  border-radius: 50%;
  color: #87473e;
  box-shadow: inset 0 0 0 4px rgba(135, 71, 62, 0.08);
  transform: rotate(-7deg);
}

body[data-experience="yw01-v2"] .deadlock-mark svg {
  width: 27px;
  height: 27px;
  stroke-width: 2.2;
}

body[data-experience="yw01-v2"] .deadlock-copy {
  position: relative;
  z-index: 1;
}

body[data-experience="yw01-v2"] .deadlock-copy > p:first-child {
  margin: 0;
  color: #8a4b3f;
  font-family: var(--font-code);
  font-size: 10px;
  font-weight: 900;
}

body[data-experience="yw01-v2"] .deadlock-copy h2 {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0;
}

body[data-experience="yw01-v2"] #deadlock-message {
  margin: 15px 0 0;
  padding: 12px 14px;
  border-top: 1px solid #9d9e93;
  border-bottom: 1px solid #9d9e93;
  background: rgba(255, 255, 255, 0.2);
  color: #46534b;
  font-size: 13px;
  line-height: 1.7;
}

body[data-experience="yw01-v2"] .deadlock-actions {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  padding-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-top: 2px solid #293a31;
}

body[data-experience="yw01-v2"] .deadlock-actions button {
  min-width: 0;
}

body[data-experience="yw01-v2"] .deadlock-actions svg {
  width: 17px;
  height: 17px;
}

@keyframes v2-deadlock-enter {
  from { opacity: 0; transform: translateY(14px) rotate(-0.7deg) scale(0.98); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@media (max-width: 760px) {
  body[data-experience="yw01-v2"] .deadlock-overlay {
    padding: 12px;
    align-items: end;
  }

  body[data-experience="yw01-v2"] .deadlock-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 25px 18px calc(18px + env(safe-area-inset-bottom));
  }

  body[data-experience="yw01-v2"] .deadlock-mark {
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
  }

  body[data-experience="yw01-v2"] .deadlock-copy h2 {
    font-size: 24px;
  }

  body[data-experience="yw01-v2"] #deadlock-message {
    font-size: 12px;
  }
}

@media (max-width: 390px) {
  body[data-experience="yw01-v2"] .deadlock-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-experience="yw01-v2"] .deadlock-dialog {
    animation: none;
  }
}

/* Selected art pass: the clockkeeper's board marker mirrors the opening CG. */
body[data-experience="yw01-v2"] .player .entity-inner,
body[data-experience="yw01-v2"] .ghost .entity-inner {
  width: 66%;
  height: 92%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: none;
}

body[data-experience="yw01-v2"] .player .entity-inner {
  background-image: url("assets/characters/clockkeeper-player-v2.png");
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.48));
}

body[data-experience="yw01-v2"] .ghost .entity-inner {
  background-image: url("assets/characters/clockkeeper-ghost-v2.png");
  opacity: 0.34;
  filter:
    hue-rotate(-48deg)
    saturate(1.08)
    brightness(1.16)
    drop-shadow(0 0 2px rgba(212, 252, 255, 0.95))
    drop-shadow(0 0 7px rgba(69, 202, 209, 0.88));
}

body[data-experience="yw01-v2"] .ghost.finished .entity-inner {
  border: 0;
  background: transparent url("assets/characters/clockkeeper-ghost-v2.png") center / contain no-repeat;
  opacity: 0.34;
  filter:
    hue-rotate(-48deg)
    saturate(1.08)
    brightness(1.16)
    drop-shadow(0 0 2px rgba(212, 252, 255, 0.9))
    drop-shadow(0 0 6px rgba(69, 202, 209, 0.78));
}

body[data-experience="yw01-v2"] .ghost.overlapping .entity-inner {
  opacity: 0.38;
  transform: translate(4px, -3px);
  filter:
    hue-rotate(-48deg)
    saturate(1.08)
    brightness(1.16)
    drop-shadow(0 0 2px rgba(220, 254, 255, 1))
    drop-shadow(0 0 8px rgba(69, 202, 209, 0.95));
}

body[data-experience="yw01-v2"] .player .entity-inner::before,
body[data-experience="yw01-v2"] .ghost .entity-inner::before,
body[data-experience="yw01-v2"] .player-id,
body[data-experience="yw01-v2"] .ghost-id {
  content: none;
  display: none;
}

/* AIART mechanism pass: keep game state and movement on the existing DOM. */
body[data-experience="yw01-v2"] .box .entity-inner {
  width: 94%;
  height: 94%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent url("assets/yw-line-sprites/crate.png") center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 4px 1px rgba(0, 0, 0, 0.46));
}

body[data-experience="yw01-v2"] .box .entity-inner::before,
body[data-experience="yw01-v2"] .box .entity-inner::after,
body[data-experience="yw01-v2"] .box .crate-mark {
  content: none;
  display: none;
}

body[data-experience="yw01-v2"] .tile.plate::before,
body[data-experience="yw01-v2"] .tile.time-node::before,
body[data-experience="yw01-v2"] .tile.sync-gate::before,
body[data-experience="yw01-v2"] .tile.goal::before,
body[data-experience="yw01-v2"] .tile.exit::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 2%;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: none;
  color: transparent;
  opacity: 1;
  transform: none;
}

body[data-experience="yw01-v2"] .tile.plate::after,
body[data-experience="yw01-v2"] .tile.time-node::after,
body[data-experience="yw01-v2"] .tile.sync-gate::after,
body[data-experience="yw01-v2"] .tile.goal::after {
  content: none;
  display: none;
}

body[data-experience="yw01-v2"] .tile.plate::before {
  background-image: url("assets/yw-line-sprites/plate.png");
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.38));
  transition: transform 150ms ease, filter 150ms ease;
}

body[data-experience="yw01-v2"] .tile.plate.active::before {
  transform: translateY(2px);
  filter: brightness(0.92) saturate(1.08) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.34));
}

body[data-experience="yw01-v2"] .tile.time-node::before {
  background-image: url("assets/yw-line-sprites/node.png");
  filter: drop-shadow(0 0 5px rgba(69, 202, 209, 0.38));
}

body[data-experience="yw01-v2"] .tile.time-node.spent::before {
  animation: none;
  opacity: 0.44;
  filter: grayscale(0.58) saturate(0.42) brightness(0.82);
}

body[data-experience="yw01-v2"] .tile.goal::before {
  background-image: url("assets/yw-line-sprites/goal-empty.png");
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.34));
}

body[data-experience="yw01-v2"] .tile.goal.active::before {
  z-index: 1;
  background-image: url("assets/yw-line-sprites/goal-empty.png");
  filter: brightness(1.12) saturate(1.12) drop-shadow(0 0 5px rgba(117, 205, 143, 0.62));
}

body[data-experience="yw01-v2"] .tile.sync-gate {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 34%),
    #75857c;
}

body[data-experience="yw01-v2"] .tile.sync-gate.alt {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 34%),
    #6c7b73;
}

body[data-experience="yw01-v2"] .tile.sync-gate.closed::before {
  background-image: url("assets/yw-line-sprites/gate-closed.png");
  filter: drop-shadow(0 3px 1px rgba(0, 0, 0, 0.42));
}

body[data-experience="yw01-v2"] .tile.sync-gate.open::before {
  background-image: url("assets/yw-line-sprites/gate-open.png");
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3));
}

body[data-experience="yw01-v2"] .tile.exit.locked::before {
  background-image: url("assets/yw-line-sprites/exit-locked.png");
  filter: brightness(0.86) saturate(0.82) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.4));
}

body[data-experience="yw01-v2"] .tile.exit.ready::before {
  background-image: url("assets/yw-line-sprites/exit-ready.png");
  filter: drop-shadow(0 0 6px rgba(245, 199, 91, 0.58));
}

/* V2 main-stage layout: the archive desk is removed so the room itself leads. */
body[data-experience="yw01-v2"] .time-panel {
  display: none !important;
}

body[data-experience="yw01-v2"] .workspace {
  width: min(calc(100% - 32px), 1120px);
  height: calc(100dvh - 64px);
  min-height: 590px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

body[data-experience="yw01-v2"] .stage-panel {
  width: 100%;
  height: 100%;
  padding: 12px 24px 14px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 58px minmax(350px, 1fr) 98px;
  grid-template-areas:
    "heading"
    "board"
    "controls";
  gap: 10px;
}

body[data-experience="yw01-v2"] .stage-heading {
  width: 100%;
  height: 58px;
  min-height: 58px;
  padding: 6px 66px 6px 11px;
}

body[data-experience="yw01-v2"] .stage-heading h2 {
  margin-top: 1px;
  font-size: 24px;
}

body[data-experience="yw01-v2"] .stage-heading::before {
  font-size: 45px;
}

body[data-experience="yw01-v2"] .objective {
  width: min(46%, 380px);
  max-width: 380px;
  padding-block: 6px;
}

body[data-experience="yw01-v2"] .board-frame {
  width: 100%;
  height: 100%;
  min-height: 350px;
  padding: 26px 18px 26px;
}

body[data-experience="yw01-v2"] .control-deck {
  width: min(100%, 760px);
  height: 98px;
  min-height: 98px;
  margin-inline: auto;
  padding: 6px 10px;
  gap: 14px;
}

body[data-experience="yw01-v2"] .dpad {
  padding: 4px;
  grid-template-columns: repeat(3, 27px);
  grid-template-rows: repeat(3, 27px);
  gap: 3px;
}

body[data-experience="yw01-v2"] .phase-card {
  width: min(100%, 420px);
  min-width: 240px;
  min-height: 76px;
  height: 76px;
  padding: 8px 26px 8px 11px;
}

body[data-experience="yw01-v2"] .phase-card-icon {
  width: 30px;
  height: 30px;
}

body[data-experience="yw01-v2"] .phase-card-copy strong {
  font-size: 13px;
}

body[data-experience="yw01-v2"] .phase-card-copy > span {
  font-size: 8px;
}

@media (max-width: 760px) {
  body[data-experience="yw01-v2"] .workspace {
    width: 100%;
    height: auto;
    min-height: calc(100dvh - 58px);
    display: block;
    overflow: visible;
  }

  body[data-experience="yw01-v2"] .stage-panel {
    height: auto;
    min-height: calc(100dvh - 58px);
    padding: 8px 6px 12px;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "heading"
      "board"
      "controls";
    gap: 8px;
    overflow: visible;
  }

  body[data-experience="yw01-v2"] .stage-heading {
    height: auto;
    min-height: 78px;
    padding: 7px 48px 7px 9px;
  }

  body[data-experience="yw01-v2"] .stage-heading h2 {
    font-size: 21px;
  }

  body[data-experience="yw01-v2"] .objective {
    width: 100%;
    max-width: none;
    margin-top: 5px;
    padding-block: 5px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    width: calc(100% + 12px);
    height: clamp(300px, 92vw, 372px);
    min-height: 0;
    margin-inline: -6px;
    padding: 25px 4px 25px;
  }

  body[data-experience="yw01-v2"] .control-deck {
    position: static;
    z-index: auto;
    width: 100%;
    height: 112px;
    min-height: 112px;
    margin: 0;
    padding: 5px 7px;
    gap: 7px;
    border-bottom: 1px solid rgba(227, 189, 98, 0.18);
    box-shadow: none;
    backdrop-filter: none;
  }

  body[data-experience="yw01-v2"] .dpad {
    padding: 4px;
    grid-template-columns: repeat(3, 31px);
    grid-template-rows: repeat(3, 31px);
    gap: 3px;
  }

  body[data-experience="yw01-v2"] .phase-card {
    width: auto;
    max-width: 250px;
    min-width: 0;
    min-height: 92px;
    height: 92px;
    flex: 1 1 180px;
    padding: 8px 22px 8px 9px;
  }

  body[data-experience="yw01-v2"] .phase-card-icon {
    width: 27px;
    height: 27px;
  }
}

@media (max-width: 390px) {
  body[data-experience="yw01-v2"] .stage-panel {
    padding-bottom: 10px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    height: clamp(286px, 91vw, 355px);
  }

  body[data-experience="yw01-v2"] .control-deck {
    height: 106px;
    min-height: 106px;
    gap: 5px;
  }

  body[data-experience="yw01-v2"] .dpad {
    grid-template-columns: repeat(3, 29px);
    grid-template-rows: repeat(3, 29px);
  }

  body[data-experience="yw01-v2"] .phase-card {
    min-height: 86px;
    height: 86px;
  }

  body[data-experience="yw01-v2"] .phase-card-copy > span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 360px) {
  body[data-experience="yw01-v2"] .stage-heading {
    min-height: 72px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    height: 322px;
  }

  body[data-experience="yw01-v2"] .control-deck {
    height: 102px;
    min-height: 102px;
  }

  body[data-experience="yw01-v2"] .dpad {
    grid-template-columns: repeat(3, 27px);
    grid-template-rows: repeat(3, 27px);
  }

  body[data-experience="yw01-v2"] .phase-card {
    min-height: 82px;
    height: 82px;
    padding-right: 18px;
  }
}

@media (max-height: 680px) and (max-width: 760px) {
  body[data-experience="yw01-v2"] .topbar {
    position: relative;
    height: 52px;
    min-height: 52px;
  }

  body[data-experience="yw01-v2"] .workspace,
  body[data-experience="yw01-v2"] .stage-panel {
    min-height: 0;
  }

  body[data-experience="yw01-v2"] .stage-panel {
    padding-top: 6px;
    grid-template-rows: auto auto auto;
    gap: 6px;
  }

  body[data-experience="yw01-v2"] .stage-heading {
    min-height: 66px;
    padding-block: 5px;
  }

  body[data-experience="yw01-v2"] .stage-heading h2 {
    font-size: 19px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    height: clamp(258px, 74vw, 310px);
    padding-block: 22px;
  }

  body[data-experience="yw01-v2"] .control-deck {
    height: 96px;
    min-height: 96px;
  }

  body[data-experience="yw01-v2"] .phase-card {
    min-height: 78px;
    height: 78px;
  }
}

/* Short landscape stays scrollable and never re-enters the legacy side-desk layout. */
@media (max-height: 620px) and (min-width: 761px) {
  body[data-experience="yw01-v2"] .workspace {
    width: min(calc(100% - 20px), 1000px);
    height: auto;
    min-height: calc(100dvh - 56px);
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  body[data-experience="yw01-v2"] .stage-panel {
    height: auto;
    min-height: calc(100dvh - 56px);
    padding: 8px 14px 10px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 50px minmax(300px, 54vw) 82px;
    grid-template-areas:
      "heading"
      "board"
      "controls";
    gap: 7px;
    overflow: visible;
  }

  body[data-experience="yw01-v2"] .stage-heading {
    height: 50px;
    min-height: 50px;
  }

  body[data-experience="yw01-v2"] .stage-heading h2 {
    font-size: 19px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    width: 100%;
    height: 100%;
    min-height: 300px;
    padding: 24px 8px;
  }

  body[data-experience="yw01-v2"] .control-deck {
    width: min(100%, 680px);
    height: 82px;
    min-height: 82px;
    flex-direction: row;
  }

  body[data-experience="yw01-v2"] .control-deck .dpad {
    grid-template-columns: repeat(3, 22px);
    grid-template-rows: repeat(3, 22px);
  }

  body[data-experience="yw01-v2"] .control-deck .phase-card {
    width: min(100%, 390px);
    min-width: 220px;
    min-height: 64px;
    height: 64px;
  }
}

/* Full sequence: keep the board-first composition while teaching the six basics. */
body[data-experience="yw01-v2"][data-level-kind="calibration"] .level-tabs {
  width: 286px;
  height: 40px;
  padding: 2px;
  display: flex !important;
  gap: 4px;
  overflow-x: auto;
  border: 0;
  background: transparent;
  scrollbar-width: none;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .level-tabs::-webkit-scrollbar {
  display: none;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .level-tabs::after {
  display: none;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .level-tab {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-color: #52675c;
  background: #1b3027;
  box-shadow: inset 0 -3px 0 #09130f;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .level-tab span {
  grid-row: auto;
  color: #a9b8b0;
  font-size: 9px;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .level-tab strong,
body[data-experience="yw01-v2"][data-level-kind="calibration"] .level-tab small {
  display: none;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .level-tab.active {
  border-color: var(--v2-brass-light);
  background: #e9e5d5;
  color: #14231d;
  box-shadow: inset 0 -4px 0 var(--v2-coral), 0 2px 0 rgba(0, 0, 0, 0.3);
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .level-tab.active span {
  color: #14231d;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .level-tab.kind-archive {
  margin-left: 5px;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .level-tab.kind-archive::before {
  left: -4px;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .level-tab.completed::after {
  right: 1px;
  bottom: 1px;
  width: 10px;
  height: 10px;
  border-width: 1px;
  font-size: 6px;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .archive-progress {
  width: 44px;
  min-width: 44px;
  display: block !important;
  font-size: 8px;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .stage-panel {
  grid-template-rows: 58px minmax(280px, 1fr) 74px 98px;
  grid-template-areas:
    "heading"
    "board"
    "tutorial"
    "controls";
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-strip:not([hidden]) {
  grid-area: tutorial;
  min-height: 74px;
  padding: 8px 12px;
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 12px;
  border: 1px solid #405b4e;
  border-left: 4px solid var(--v2-coral);
  border-radius: 1px;
  background: #152820;
  color: #eef0e9;
  box-shadow: none;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-index {
  color: var(--v2-brass-light);
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-index i {
  border-color: #52675c;
  background: #09130f;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy strong {
  color: #f0f1ea;
  font-size: 12px;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy p {
  margin-top: 3px;
  color: #aebdb5;
  font-size: 9px;
  line-height: 1.35;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-key {
  min-width: 54px;
  min-height: 38px;
  border: 1px solid #7e936f;
  border-radius: 2px;
  background: #dfe2d8;
  color: #17261f;
  box-shadow: inset 0 -3px 0 #a9b2a5;
  font-size: 11px;
}

@media (max-width: 980px) {
  body[data-experience="yw01-v2"][data-level-kind="calibration"] .level-tabs,
  body[data-experience="yw01-v2"][data-level-kind="calibration"] .archive-progress {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body[data-experience="yw01-v2"][data-level-kind="calibration"] .stage-panel {
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "heading"
      "board"
      "tutorial"
      "controls";
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-strip:not([hidden]) {
    min-height: 82px;
    padding: 8px;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 8px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-index {
    gap: 6px;
    font-size: 8px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-key {
    min-width: 46px;
    padding-inline: 6px;
    font-size: 9px;
  }
}

@media (max-width: 360px) {
  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-strip:not([hidden]) {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 6px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy strong {
    font-size: 10px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy p {
    -webkit-line-clamp: 2;
    font-size: 8px;
  }
}

@media (max-height: 620px) and (min-width: 761px) {
  body[data-experience="yw01-v2"][data-level-kind="calibration"] .stage-panel {
    grid-template-rows: 50px minmax(300px, 54vw) 62px 82px;
    grid-template-areas:
      "heading"
      "board"
      "tutorial"
      "controls";
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-strip:not([hidden]) {
    min-height: 62px;
    padding-block: 5px;
  }
}

/* Scene polish: irregular playfield, readable guidance, and level directory. */
body[data-experience="yw01-v2"] {
  --warehouse-scene-image: url("assets/warehouse-game-bg.webp");
  --warehouse-scene-scrim: rgba(4, 14, 10, 0.56);
  background-color: #07140f;
  background-image:
    linear-gradient(180deg, rgba(4, 13, 10, 0.25), var(--warehouse-scene-scrim)),
    var(--warehouse-scene-image);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

body[data-experience="yw01-v2"]::before {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(220, 188, 104, 0.09), transparent 47%),
    linear-gradient(90deg, rgba(2, 8, 6, 0.68), transparent 23%, transparent 77%, rgba(2, 8, 6, 0.68));
}

body[data-experience="yw01-v2"] .workspace,
body[data-experience="yw01-v2"] .stage-panel {
  background-color: rgba(7, 20, 15, 0.66);
}

body[data-experience="yw01-v2"] .stage-panel {
  grid-template-rows: 76px minmax(350px, 1fr) 98px;
}

body[data-experience="yw01-v2"] .stage-heading {
  height: 76px;
  min-height: 76px;
  padding: 9px 74px 9px 14px;
}

body[data-experience="yw01-v2"] .stage-heading h2 {
  margin-top: 3px;
  font-size: 29px;
  line-height: 1.08;
}

body[data-experience="yw01-v2"] .stage-heading > div,
body[data-experience="yw01-v2"] .objective,
body[data-experience="yw01-v2"] .tutorial-copy,
body[data-experience="yw01-v2"] .phase-card-copy,
body[data-experience="yw01-v2"] .level-directory-header > div {
  min-width: 0;
}

body[data-experience="yw01-v2"] #objective-text,
body[data-experience="yw01-v2"] .tutorial-copy strong,
body[data-experience="yw01-v2"] .tutorial-copy p {
  overflow-wrap: anywhere;
}

body[data-experience="yw01-v2"] .objective {
  width: min(49%, 430px);
  max-width: 430px;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.45;
}

body[data-experience="yw01-v2"] .board-frame {
  border-color: transparent;
  background: radial-gradient(ellipse at 50% 46%, rgba(38, 65, 51, 0.58), transparent 68%);
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.32);
}

body[data-experience="yw01-v2"] .board-frame::before,
body[data-experience="yw01-v2"] .board-frame::after,
body[data-experience="yw01-v2"] .cabinet-plaque,
body[data-experience="yw01-v2"] .cabinet-footer {
  display: none;
}

body[data-experience="yw01-v2"] .board {
  gap: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5));
}

body[data-experience="yw01-v2"] .board:focus,
body[data-experience="yw01-v2"] .board:focus-visible {
  outline: 0;
}

body[data-experience="yw01-v2"] .board:focus-visible {
  filter:
    drop-shadow(0 0 7px rgba(227, 189, 98, 0.24))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5));
}

body[data-experience="yw01-v2"] .tile.outer-void {
  visibility: hidden;
  pointer-events: none;
}

body[data-experience="yw01-v2"] .tile.wall:not(.outer-void),
body[data-experience="yw01-v2"] .tile.inner-wall {
  z-index: 2;
  border: 0;
  background:
    linear-gradient(180deg, rgba(118, 139, 126, 0.42) 0 8%, transparent 9%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 44%),
    #293f34;
  box-shadow:
    inset 0 6px 0 #4d6759,
    inset 0 -7px 0 #14251d,
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset -1px 0 0 rgba(4, 11, 8, 0.32),
    0 5px 7px rgba(1, 7, 4, 0.42);
}

body[data-experience="yw01-v2"] .tile.wall:not(.outer-void)::after,
body[data-experience="yw01-v2"] .tile.inner-wall::after {
  content: "";
  position: absolute;
  right: 9%;
  bottom: 13%;
  width: 38%;
  height: 2px;
  display: block;
  background: rgba(4, 13, 9, 0.42);
}

body[data-experience="yw01-v2"] .tile.floor {
  border: 0;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(22, 42, 32, 0.22),
    inset -1px 0 0 rgba(20, 38, 29, 0.18);
}

/* The ring occupies the destination cell while the badge stays on the actor edge. */
body[data-experience="yw01-v2"] .guide-arrow {
  z-index: 6;
  overflow: visible;
}

body[data-experience="yw01-v2"] .guide-arrow::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 14%;
  display: block;
  border: 2px solid rgba(255, 226, 128, 0.9);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 223, 116, 0.2), transparent 67%);
  box-shadow: 0 0 0 3px rgba(255, 219, 98, 0.1), 0 0 13px rgba(255, 219, 98, 0.38);
  pointer-events: none;
  animation: v2-guide-target 1100ms ease-in-out infinite;
}

body[data-experience="yw01-v2"] .guide-arrow.is-up::after {
  transform: translateY(-100%);
}

body[data-experience="yw01-v2"] .guide-arrow.is-down::after {
  transform: translateY(100%);
}

body[data-experience="yw01-v2"] .guide-arrow.is-left::after {
  transform: translateX(-100%);
}

body[data-experience="yw01-v2"] .guide-arrow.is-right::after {
  transform: translateX(100%);
}

/* JavaScript positions directional guides on the destination cell. */
body[data-experience="yw01-v2"] .guide-arrow.is-up::after,
body[data-experience="yw01-v2"] .guide-arrow.is-down::after,
body[data-experience="yw01-v2"] .guide-arrow.is-left::after,
body[data-experience="yw01-v2"] .guide-arrow.is-right::after {
  transform: none;
}

body[data-experience="yw01-v2"] .guide-arrow.is-up > .guide-arrow__badge,
body[data-experience="yw01-v2"] .guide-arrow.is-down > .guide-arrow__badge,
body[data-experience="yw01-v2"] .guide-arrow.is-left > .guide-arrow__badge,
body[data-experience="yw01-v2"] .guide-arrow.is-right > .guide-arrow__badge {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

body[data-experience="yw01-v2"] .guide-arrow.is-wait::after {
  inset: 9%;
  border-color: rgba(103, 225, 234, 0.9);
  background: radial-gradient(circle, rgba(75, 206, 216, 0.2), transparent 68%);
  box-shadow: 0 0 0 4px rgba(69, 202, 209, 0.1), 0 0 15px rgba(69, 202, 209, 0.42);
  animation-name: v2-guide-wait;
}

body[data-experience="yw01-v2"] .guide-arrow.is-echo::after {
  border-color: rgba(185, 220, 235, 0.94);
  background: radial-gradient(circle, rgba(111, 169, 196, 0.2), transparent 68%);
  box-shadow: 0 0 0 3px rgba(111, 169, 196, 0.12), 0 0 14px rgba(111, 169, 196, 0.45);
}

body[data-experience="yw01-v2"] .guide-arrow.is-echo.is-wait::after {
  border-color: rgba(185, 220, 235, 0.94);
  background: radial-gradient(circle, rgba(111, 169, 196, 0.2), transparent 68%);
  box-shadow: 0 0 0 4px rgba(111, 169, 196, 0.12), 0 0 15px rgba(111, 169, 196, 0.45);
}

@keyframes v2-guide-target {
  0%, 100% { opacity: 0.58; scale: 0.86; }
  50% { opacity: 1; scale: 1; }
}

@keyframes v2-guide-wait {
  0%, 100% { opacity: 0.55; scale: 0.82; }
  50% { opacity: 1; scale: 1.03; }
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .stage-panel {
  grid-template-rows: 76px minmax(280px, 1fr) 98px 98px;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-strip:not([hidden]) {
  min-height: 98px;
  padding: 12px 15px;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 14px;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-index {
  font-size: 10px;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy strong {
  font-size: 15px;
  line-height: 1.3;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy p {
  margin-top: 5px;
  color: #bbc8c0;
  font-size: 11px;
  line-height: 1.48;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-key {
  min-width: 58px;
  min-height: 44px;
  padding-inline: 9px;
  font-size: 12px;
}

/* Level directory owns the existing generated #level-tabs. */
body.level-directory-open {
  overflow: hidden;
}

body[data-experience="yw01-v2"] #level-directory-button {
  position: relative;
}

body[data-experience="yw01-v2"] .level-directory-button {
  min-width: 92px;
  height: 38px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #61756a;
  border-radius: 3px;
  background: #20372d;
  color: #e4e9e5;
  box-shadow: inset 0 -3px 0 #0c1813;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

body[data-experience="yw01-v2"] .level-directory-button:hover,
body[data-experience="yw01-v2"] .level-directory-button[aria-expanded="true"] {
  border-color: var(--v2-brass-light);
  background: #2c473a;
  color: #fff4bf;
}

body[data-experience="yw01-v2"] .level-directory-button:disabled {
  cursor: default;
  opacity: 0.55;
}

body[data-experience="yw01-v2"] .level-directory-button svg {
  width: 17px;
  height: 17px;
}

body[data-experience="yw01-v2"] .level-directory-overlay[hidden] {
  display: none !important;
}

body[data-experience="yw01-v2"] .level-directory-overlay {
  position: fixed;
  z-index: 130;
  inset: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  overflow: auto;
  background: rgba(2, 9, 6, 0.8);
  backdrop-filter: blur(8px);
}

body[data-experience="yw01-v2"] .level-directory-dialog {
  position: relative;
  width: min(700px, 100%);
  max-height: calc(100dvh - 48px);
  padding: 24px;
  overflow: auto;
  border: 1px solid var(--v2-brass);
  border-radius: 3px;
  background:
    linear-gradient(rgba(47, 68, 57, 0.07) 1px, transparent 1px) 0 0 / 100% 24px,
    #e5e3d6;
  color: #19231e;
  box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.38), inset 0 0 0 4px rgba(255, 255, 255, 0.28);
}

body[data-experience="yw01-v2"] .level-directory-header {
  min-width: 0;
  padding: 0 50px 14px 0;
  border-bottom: 2px solid #26362e;
}

body[data-experience="yw01-v2"] .level-directory-header p,
body[data-experience="yw01-v2"] .level-directory-header h2 {
  margin: 0;
}

body[data-experience="yw01-v2"] .level-directory-header p {
  color: #7b6023;
  font-family: var(--font-code);
  font-size: 10px;
  font-weight: 850;
}

body[data-experience="yw01-v2"] .level-directory-header h2 {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 27px;
}

body[data-experience="yw01-v2"] #directory-summary {
  margin-top: 5px;
  display: block;
  color: #59675e;
  font-family: var(--font-code);
  font-size: 10px;
  font-weight: 700;
}

body[data-experience="yw01-v2"] #level-directory-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #7b827b;
  border-radius: 2px;
  background: transparent;
  color: #26362e;
  cursor: pointer;
}

body[data-experience="yw01-v2"] .level-directory-dialog .archive-progress {
  width: 100%;
  min-width: 0;
  margin-top: 14px;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  color: #4e5a52;
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tabs {
  width: 100%;
  height: auto;
  margin-top: 18px;
  padding: 0;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  overflow: visible;
  border: 0;
  background: transparent;
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tabs::after {
  display: none;
}

body[data-experience="yw01-v2"] .directory-chapter-heading {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 10px 2px 4px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(38, 54, 46, 0.38);
  color: #26362e;
}

body[data-experience="yw01-v2"] .directory-chapter-heading:first-child {
  padding-top: 0;
}

body[data-experience="yw01-v2"] .directory-chapter-heading span {
  min-width: 0;
  font-size: 12px;
  font-weight: 850;
}

body[data-experience="yw01-v2"] .directory-chapter-heading strong {
  flex: 0 0 auto;
  color: #7b6023;
  font-family: var(--font-code);
  font-size: 10px;
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tab {
  width: 100%;
  height: 66px;
  min-width: 0;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  column-gap: 10px;
  border: 1px solid #98a39c;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.36);
  color: #26362e;
  box-shadow: inset 0 -4px 0 rgba(42, 61, 51, 0.14);
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tab span {
  grid-row: 1 / 3;
  align-self: center;
  color: #836720;
  font-size: 12px;
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tab strong,
body[data-experience="yw01-v2"] .level-directory-dialog .level-tab small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tab strong {
  align-self: end;
  font-size: 12px;
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tab small {
  align-self: start;
  color: #68746d;
  font-size: 9px;
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tab.active {
  border-color: #8a6823;
  background: #f5f0da;
  color: #17261f;
  box-shadow: inset 5px 0 0 var(--v2-coral), inset 0 -4px 0 rgba(138, 104, 35, 0.18);
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tab.kind-archive {
  margin-left: 0;
  border-color: #9d7c31;
  background: #e5dcc0;
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tab.kind-archive::before {
  display: none;
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tab:disabled {
  cursor: not-allowed;
  filter: grayscale(0.75);
  opacity: 0.48;
}

body[data-experience="yw01-v2"] .level-directory-footer {
  margin-top: 17px;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid #9ca49f;
  color: #59655e;
  font-size: 9px;
  font-weight: 700;
}

body[data-experience="yw01-v2"] .level-directory-footer span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body[data-experience="yw01-v2"] .directory-status-mark {
  width: 9px;
  height: 9px;
  display: block;
  border: 1px solid #6e776f;
  border-radius: 50%;
  background: transparent;
}

body[data-experience="yw01-v2"] .directory-status-mark.completed {
  border-color: #2c6c44;
  background: #43845a;
}

body[data-experience="yw01-v2"] .directory-status-mark.available {
  border-color: #87691e;
  background: #d8b851;
}

body[data-experience="yw01-v2"] .directory-status-mark.locked {
  border-style: dashed;
  opacity: 0.62;
}

@media (max-width: 760px) {
  body[data-experience="yw01-v2"] {
    background-attachment: scroll;
    background-position: center top;
  }

  body[data-experience="yw01-v2"] .workspace,
  body[data-experience="yw01-v2"] .stage-panel {
    background-color: rgba(7, 20, 15, 0.74);
  }

  body[data-experience="yw01-v2"] .stage-heading {
    height: auto;
    min-height: 104px;
    padding: 10px 49px 10px 10px;
  }

  body[data-experience="yw01-v2"] .stage-heading h2 {
    font-size: 25px;
  }

  body[data-experience="yw01-v2"] .objective {
    margin-top: 7px;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.4;
  }

  body[data-experience="yw01-v2"] .board-frame {
    height: clamp(300px, 91vw, 355px);
    padding: 16px 2px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .stage-panel {
    grid-template-rows: auto auto auto auto;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-strip:not([hidden]) {
    min-height: 104px;
    padding: 10px 8px;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 8px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy strong {
    font-size: 13px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy p {
    display: block;
    margin-top: 4px;
    overflow: visible;
    color: #bbc8c0;
    font-size: 10px;
    line-height: 1.4;
    -webkit-line-clamp: initial;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-key {
    min-width: 48px;
    min-height: 40px;
    padding-inline: 6px;
    font-size: 10px;
  }

  body[data-experience="yw01-v2"] .level-directory-overlay {
    padding: 0;
    place-items: end stretch;
    backdrop-filter: blur(4px);
  }

  body[data-experience="yw01-v2"] .level-directory-dialog {
    width: 100%;
    max-height: 92dvh;
    padding: 20px 14px calc(18px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 -8px 0 rgba(0, 0, 0, 0.24);
  }

  body[data-experience="yw01-v2"] .level-directory-dialog .level-tabs {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  body[data-experience="yw01-v2"] .level-directory-dialog .level-tab {
    height: 58px;
  }

  body[data-experience="yw01-v2"] .level-directory-button {
    min-width: 36px;
    width: 36px;
    padding: 0;
  }

  body[data-experience="yw01-v2"] .level-directory-button span {
    display: none;
  }
}

@media (max-width: 390px) {
  body[data-experience="yw01-v2"] .completion-actions {
    grid-template-columns: 1fr;
  }

  body[data-experience="yw01-v2"] .board-frame {
    height: clamp(286px, 90vw, 345px);
  }

  body[data-experience="yw01-v2"] .guide-arrow > .guide-arrow__badge {
    width: clamp(17px, 38%, 22px);
  }

  body[data-experience="yw01-v2"] .level-directory-header h2 {
    font-size: 24px;
  }
}

@media (max-width: 360px) {
  body[data-experience="yw01-v2"] .stage-heading {
    min-height: 92px;
  }

  body[data-experience="yw01-v2"] .stage-heading h2 {
    font-size: 23px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    height: 278px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-strip:not([hidden]) {
    min-height: 98px;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 6px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy strong {
    font-size: 13px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy p {
    font-size: 10px;
  }
}

@media (max-height: 680px) and (max-width: 760px) {
  body[data-experience="yw01-v2"] .stage-heading {
    min-height: 88px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    height: clamp(248px, 72vw, 286px);
    padding-block: 10px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-strip:not([hidden]) {
    min-height: 92px;
    padding-block: 7px;
  }
}

@media (max-height: 620px) and (min-width: 761px) {
  body[data-experience="yw01-v2"] .stage-panel {
    grid-template-rows: 64px minmax(260px, calc(100dvh - 218px)) 82px;
  }

  body[data-experience="yw01-v2"] .stage-heading {
    height: 64px;
    min-height: 64px;
  }

  body[data-experience="yw01-v2"] .stage-heading h2 {
    font-size: 23px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    min-height: 260px;
    padding-block: 12px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .stage-panel {
    grid-template-rows: 64px minmax(250px, calc(100dvh - 306px)) 82px 82px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-strip:not([hidden]) {
    min-height: 82px;
    padding: 7px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-experience="yw01-v2"] .guide-arrow::after {
    animation: none;
  }
}

/* Final structural pass: full-width bands and a suspended brass-edged platform. */
body[data-experience="yw01-v2"] {
  --warehouse-scene-scrim: rgba(3, 12, 8, 0.38);
  background-image:
    linear-gradient(180deg, rgba(3, 12, 8, 0.12), var(--warehouse-scene-scrim)),
    var(--warehouse-scene-image);
}

body[data-experience="yw01-v2"]::before {
  opacity: 0.68;
  background:
    radial-gradient(ellipse at 50% 36%, rgba(231, 204, 132, 0.13), transparent 50%),
    linear-gradient(90deg, rgba(2, 8, 6, 0.48), transparent 20%, transparent 80%, rgba(2, 8, 6, 0.48));
}

body[data-experience="yw01-v2"] .workspace {
  border-right: 3px solid rgba(189, 146, 56, 0.66);
  border-left: 3px solid rgba(189, 146, 56, 0.66);
  background-color: rgba(5, 17, 12, 0.5);
  box-shadow: 0 0 0 1px rgba(4, 12, 8, 0.82), 0 26px 70px rgba(0, 0, 0, 0.42);
}

body[data-experience="yw01-v2"] .stage-panel {
  padding-inline: 26px;
  background-color: rgba(5, 17, 12, 0.48);
}

body[data-experience="yw01-v2"] .topbar {
  border-bottom: 3px solid var(--v2-brass);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32), inset 0 -1px 0 rgba(255, 228, 156, 0.22);
}

body[data-experience="yw01-v2"] .brand h1 {
  font-size: 23px;
}

body[data-experience="yw01-v2"] .brand p {
  font-size: 9px;
}

body[data-experience="yw01-v2"] .chapter-heading span {
  font-size: 10px;
}

body[data-experience="yw01-v2"] .chapter-heading strong {
  font-size: 17px;
}

body[data-experience="yw01-v2"] .chapter-heading small {
  font-size: 10px;
}

body[data-experience="yw01-v2"] .level-directory-button {
  font-size: 12px;
}

body[data-experience="yw01-v2"] .archive-progress {
  font-size: 11px;
}

body[data-experience="yw01-v2"] .stage-heading {
  width: calc(100% + 52px);
  margin-inline: -26px;
  padding: 10px 90px 10px 22px;
  border-top: 3px solid rgba(227, 189, 98, 0.82);
  border-bottom: 3px solid rgba(227, 189, 98, 0.52);
  border-radius: 0;
  background: rgba(10, 29, 21, 0.87);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

/* Preserve the approved level-title scale while enlarging its surrounding metadata. */
body[data-experience="yw01-v2"] .stage-heading h2 {
  font-size: 29px;
}

body[data-experience="yw01-v2"] .level-kicker {
  font-size: 11px;
}

body[data-experience="yw01-v2"] .level-concept,
body[data-experience="yw01-v2"] .archive-time {
  min-height: 23px;
  padding: 4px 8px;
  font-size: 10px;
}

body[data-experience="yw01-v2"] .objective {
  width: min(52%, 470px);
  max-width: 470px;
  padding: 10px 13px;
  border-left-width: 4px;
  background: rgba(30, 59, 46, 0.74);
  font-size: 14px;
  line-height: 1.48;
}

body[data-experience="yw01-v2"] .objective svg {
  width: 21px;
  height: 21px;
}

body[data-experience="yw01-v2"] .board-frame {
  padding: 38px 50px 42px;
  overflow: visible;
  background: radial-gradient(ellipse at 50% 46%, rgba(36, 66, 51, 0.62), rgba(2, 8, 5, 0.82) 70%, rgba(1, 5, 3, 0.96));
  box-shadow:
    inset 0 0 0 3px rgba(12, 31, 22, 0.88),
    inset 0 0 48px rgba(0, 0, 0, 0.62),
    0 24px 46px rgba(0, 0, 0, 0.34);
}

body[data-experience="yw01-v2"] .board {
  filter:
    drop-shadow(1px 0 0 rgba(224, 181, 78, 0.9))
    drop-shadow(-1px 0 0 rgba(224, 181, 78, 0.9))
    drop-shadow(0 -1px 0 rgba(242, 205, 111, 0.86))
    drop-shadow(0 2px 0 rgba(115, 79, 22, 0.96))
    drop-shadow(0 7px 0 rgba(67, 44, 13, 0.92))
    drop-shadow(0 17px 20px rgba(0, 0, 0, 0.72));
}

body[data-experience="yw01-v2"] .board:focus-visible {
  filter:
    drop-shadow(1px 0 0 rgba(244, 211, 124, 1))
    drop-shadow(-1px 0 0 rgba(244, 211, 124, 1))
    drop-shadow(0 -1px 0 rgba(255, 225, 146, 1))
    drop-shadow(0 2px 0 rgba(138, 97, 27, 1))
    drop-shadow(0 7px 0 rgba(67, 44, 13, 0.92))
    drop-shadow(0 0 9px rgba(227, 189, 98, 0.28))
    drop-shadow(0 17px 20px rgba(0, 0, 0, 0.72));
}

body[data-experience="yw01-v2"] .tile.floor {
  --platform-edge-top: linear-gradient(transparent, transparent);
  --platform-edge-right: linear-gradient(transparent, transparent);
  --platform-edge-bottom: linear-gradient(transparent, transparent);
  --platform-edge-left: linear-gradient(transparent, transparent);
  background:
    var(--platform-edge-top) center / 100% 100% no-repeat,
    var(--platform-edge-right) center / 100% 100% no-repeat,
    var(--platform-edge-bottom) center / 100% 100% no-repeat,
    var(--platform-edge-left) center / 100% 100% no-repeat,
    url("assets/yw-floor-tiles/floor-a.webp") center / 100% 100% no-repeat,
    #758077;
  box-shadow:
    inset 1px 1px 0 rgba(236, 224, 189, 0.09),
    inset -1px -1px 0 rgba(12, 27, 19, 0.24);
}

body[data-experience="yw01-v2"] .tile.floor.alt {
  background:
    var(--platform-edge-top) center / 100% 100% no-repeat,
    var(--platform-edge-right) center / 100% 100% no-repeat,
    var(--platform-edge-bottom) center / 100% 100% no-repeat,
    var(--platform-edge-left) center / 100% 100% no-repeat,
    url("assets/yw-floor-tiles/floor-b.webp") center / 100% 100% no-repeat,
    #747f76;
}

body[data-experience="yw01-v2"] .tile.floor.edge-top {
  --platform-edge-top: url("assets/yw-floor-tiles/edge-top.png");
}

body[data-experience="yw01-v2"] .tile.floor.edge-right {
  --platform-edge-right: url("assets/yw-floor-tiles/edge-right.png");
}

body[data-experience="yw01-v2"] .tile.floor.edge-bottom {
  --platform-edge-bottom: url("assets/yw-floor-tiles/edge-bottom.png");
}

body[data-experience="yw01-v2"] .tile.floor.edge-left {
  --platform-edge-left: url("assets/yw-floor-tiles/edge-left.png");
}

body[data-experience="yw01-v2"] .tile.wall:not(.outer-void),
body[data-experience="yw01-v2"] .tile.inner-wall {
  box-shadow:
    inset 0 7px 0 #526c5d,
    inset 0 -8px 0 #12231b,
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset -1px 0 0 rgba(4, 11, 8, 0.34),
    0 5px 7px rgba(1, 7, 4, 0.42);
}

body[data-experience="yw01-v2"] .control-deck {
  width: calc(100% + 52px);
  max-width: none;
  margin-inline: -26px;
  padding-inline: max(18px, calc((100% - 720px) / 2));
  border-top: 3px solid rgba(227, 189, 98, 0.58);
  border-bottom: 3px solid rgba(227, 189, 98, 0.32);
  background: rgba(8, 25, 18, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-experience="yw01-v2"] .phase-card {
  max-width: 480px;
  border-width: 2px;
}

body[data-experience="yw01-v2"] .phase-card-copy small {
  font-size: 10px;
}

body[data-experience="yw01-v2"] .phase-card-copy strong {
  font-size: 16px;
}

body[data-experience="yw01-v2"] .phase-card-copy > span {
  font-size: 11px;
  line-height: 1.4;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-strip:not([hidden]) {
  width: calc(100% + 52px);
  margin-inline: -26px;
  padding: 13px 22px;
  border-top: 3px solid rgba(227, 189, 98, 0.7);
  border-right: 0;
  border-bottom: 3px solid rgba(227, 189, 98, 0.38);
  border-left-width: 7px;
  border-radius: 0;
  background: rgba(12, 34, 25, 0.94);
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-index {
  font-size: 12px;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy strong {
  font-size: 17px;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy p {
  font-size: 13px;
  line-height: 1.48;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-key {
  min-width: 64px;
  min-height: 46px;
  font-size: 13px;
}

/* A compact two-beat verification stamp bridges the solved board and result sheet. */
body[data-experience="yw01-v2"] .archive-seal-sequence[hidden] {
  display: none;
}

body[data-experience="yw01-v2"] .archive-seal-sequence {
  position: absolute;
  z-index: 24;
  left: 50%;
  top: 50%;
  width: min(330px, calc(100% - 48px));
  min-height: 94px;
  padding: 15px 22px 15px 17px;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  border: 2px solid #8a672b;
  border-radius: 2px;
  background:
    linear-gradient(rgba(41, 58, 49, 0.07) 1px, transparent 1px) 0 0 / 100% 19px,
    linear-gradient(90deg, transparent 25px, rgba(137, 65, 56, 0.1) 26px, transparent 27px),
    #e7e3d4;
  color: #18271f;
  box-shadow:
    8px 10px 0 rgba(0, 0, 0, 0.42),
    0 20px 36px rgba(0, 0, 0, 0.42),
    inset 0 0 0 4px rgba(255, 255, 255, 0.3);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

body[data-experience="yw01-v2"] .archive-seal-sequence::after {
  content: "YW / VERIFIED";
  position: absolute;
  right: 8px;
  bottom: 6px;
  color: rgba(35, 55, 44, 0.32);
  font-family: var(--font-code);
  font-size: 7px;
  font-weight: 900;
}

body[data-experience="yw01-v2"] .archive-seal-mark {
  position: relative;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  display: grid;
  place-items: center;
  border: 3px double #8a453d;
  border-radius: 50%;
  color: #8a453d;
  box-shadow: inset 0 0 0 4px rgba(138, 69, 61, 0.09);
  transform: rotate(-9deg);
}

body[data-experience="yw01-v2"] .archive-seal-mark::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed currentColor;
  border-radius: 50%;
}

body[data-experience="yw01-v2"] .archive-seal-mark svg {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  stroke-width: 3;
}

body[data-experience="yw01-v2"] .archive-seal-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
  font-family: var(--font-code);
}

body[data-experience="yw01-v2"] .archive-seal-copy strong {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
}

body[data-experience="yw01-v2"] .archive-seal-copy small {
  color: #657068;
  font-size: 10px;
  font-weight: 800;
}

body[data-experience="yw01-v2"] .board-frame.archive-seal-active .board {
  animation: v2-board-verified 500ms ease-out both;
}

body[data-experience="yw01-v2"] .archive-seal-sequence[data-stage="verified"] {
  animation: v2-archive-slip-in 150ms cubic-bezier(.18, .78, .2, 1) both;
}

body[data-experience="yw01-v2"] .archive-seal-sequence[data-stage="verified"] .archive-seal-mark {
  animation: v2-archive-stamp 150ms cubic-bezier(.2, .9, .28, 1) both;
}

body[data-experience="yw01-v2"] .archive-seal-sequence[data-stage="verified"] .archive-seal-copy {
  animation: v2-archive-copy-in 150ms ease-out both;
}

body[data-experience="yw01-v2"] .archive-seal-sequence[data-stage="filed"] {
  border-color: #456a50;
  animation: v2-archive-filed 150ms ease-out both;
}

body[data-experience="yw01-v2"] .archive-seal-sequence[data-stage="filed"] .archive-seal-mark {
  border-color: #3e7650;
  color: #3e7650;
  box-shadow: inset 0 0 0 4px rgba(62, 118, 80, 0.1);
  animation: v2-archive-lock 150ms ease-out both;
}

body[data-experience="yw01-v2"] .archive-seal-sequence[data-stage="filed"] .archive-seal-copy strong {
  color: #244d31;
}

@keyframes v2-board-verified {
  0%, 100% { opacity: 1; }
  44% { opacity: 0.63; }
}

@keyframes v2-archive-slip-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) rotate(-1deg) scale(0.97); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
}

@keyframes v2-archive-stamp {
  0% { opacity: 0; transform: translateY(-35px) rotate(-15deg) scale(1.55); }
  62% { opacity: 1; transform: translateY(2px) rotate(-8deg) scale(0.92); }
  78% { transform: translateY(-2px) rotate(-10deg) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) rotate(-9deg) scale(1); }
}

@keyframes v2-archive-copy-in {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes v2-archive-filed {
  0% { transform: translate(-50%, -50%) scale(1); }
  35% { transform: translate(-50%, -50%) scale(1.018); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes v2-archive-lock {
  from { transform: rotate(-9deg) scale(1.18); }
  to { transform: rotate(-9deg) scale(1); }
}

body[data-experience="yw01-v2"] .completion-scrim {
  padding: 24px;
  background:
    radial-gradient(circle at center, rgba(74, 109, 86, 0.24), transparent 48%),
    rgba(2, 9, 6, 0.86);
  backdrop-filter: blur(8px);
}

body[data-experience="yw01-v2"] .completion-scrim .completion {
  position: relative;
  width: min(540px, 100%);
  padding: 38px 34px 30px;
  overflow: hidden auto;
  border: 2px solid #8e6a28;
  border-radius: 2px;
  background:
    linear-gradient(rgba(53, 69, 59, 0.065) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, transparent 31px, rgba(148, 67, 57, 0.1) 32px, transparent 33px),
    #e8e4d5;
  color: #17231d;
  box-shadow:
    10px 12px 0 rgba(0, 0, 0, 0.42),
    inset 0 0 0 5px rgba(255, 255, 255, 0.32),
    inset 0 0 0 7px rgba(142, 106, 40, 0.22);
  animation: v2-archive-seal-enter 340ms cubic-bezier(.2, .8, .24, 1) both;
}

body[data-experience="yw01-v2"] .completion-scrim .completion::before {
  content: "CHRONICLE ARCHIVE · VERIFIED";
  position: absolute;
  right: 28px;
  bottom: 88px;
  color: rgba(125, 64, 54, 0.16);
  font-family: var(--font-code);
  font-size: 10px;
  font-weight: 900;
  transform: rotate(-6deg);
  pointer-events: none;
}

body[data-experience="yw01-v2"] .completion-seal {
  right: 28px;
  top: 25px;
  width: 76px;
  height: 76px;
  border: 3px double #85443b;
  background: rgba(232, 228, 213, 0.76);
  color: #85443b;
  box-shadow: inset 0 0 0 5px rgba(133, 68, 59, 0.08), 0 0 0 2px rgba(133, 68, 59, 0.12);
  transform: rotate(-8deg);
}

body[data-experience="yw01-v2"] .completion-seal::before,
body[data-experience="yw01-v2"] .completion-seal::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

body[data-experience="yw01-v2"] .completion-seal::before {
  inset: 6px;
  border: 1px dashed currentColor;
}

body[data-experience="yw01-v2"] .completion-seal::after {
  inset: 15px;
  border: 1px solid currentColor;
  opacity: 0.45;
}

body[data-experience="yw01-v2"] .completion-seal svg {
  position: relative;
  z-index: 2;
  width: 31px;
  height: 31px;
  stroke-width: 2.7;
}

body[data-experience="yw01-v2"] .completion-scrim .completion > p:first-of-type {
  padding-right: 94px;
  color: #85522d;
  font-family: var(--font-code);
  font-size: 12px;
  letter-spacing: 0;
}

body[data-experience="yw01-v2"] .completion-scrim .completion h3 {
  max-width: calc(100% - 94px);
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 30px;
}

body[data-experience="yw01-v2"] .completion-scrim .completion-stats {
  margin: 26px 0 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 2px solid #293a31;
  border-right: 0;
  border-bottom: 2px solid #293a31;
  border-left: 0;
  background: transparent;
}

body[data-experience="yw01-v2"] .completion-scrim .completion-stat {
  padding: 13px 10px;
  border-right: 1px solid #9ca098;
  background: rgba(255, 255, 255, 0.2);
}

body[data-experience="yw01-v2"] .completion-scrim .completion-stat:last-child {
  border-right: 0;
}

body[data-experience="yw01-v2"] .completion-scrim .completion-stat span {
  color: #5d675f;
  font-size: 11px;
}

body[data-experience="yw01-v2"] .completion-scrim .completion-stat strong {
  margin-top: 5px;
  color: #1c2c24;
  font-size: 21px;
}

body[data-experience="yw01-v2"] .completion-scrim .completion > .completion-note {
  margin: 0 0 22px !important;
  color: #46534b;
  font-size: 12px;
  line-height: 1.65;
}

body[data-experience="yw01-v2"] .completion-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding-top: 14px;
  border-top: 1px solid #9a9f96;
}

body[data-experience="yw01-v2"] .completion-actions .primary-command,
body[data-experience="yw01-v2"] .completion-actions .secondary-command {
  min-width: 0;
  padding-inline: 9px;
  font-size: 12px;
}

@keyframes v2-archive-seal-enter {
  from { opacity: 0; transform: translateY(14px) rotate(-0.8deg) scale(0.975); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@media (max-width: 760px) {
  body[data-experience="yw01-v2"] .workspace {
    border-right: 0;
    border-left: 0;
  }

  body[data-experience="yw01-v2"] .stage-panel {
    padding-inline: 8px;
    grid-template-rows: auto minmax(0, 1fr) 106px;
  }

  body[data-experience="yw01-v2"] .stage-heading,
  body[data-experience="yw01-v2"] .control-deck,
  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-strip:not([hidden]) {
    width: calc(100% + 16px);
    margin-inline: -8px;
  }

  body[data-experience="yw01-v2"] .stage-heading {
    height: auto;
    min-height: 0;
    padding: 10px 52px 10px 12px;
    border-top-width: 2px;
    border-bottom-width: 2px;
    overflow: visible;
  }

  body[data-experience="yw01-v2"] .objective {
    width: 100%;
    padding: 8px 10px;
    font-size: 12px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    height: clamp(282px, 86vw, 335px);
    padding: 24px 15px 30px;
  }

  body[data-experience="yw01-v2"] .archive-seal-sequence {
    width: min(300px, calc(100% - 24px));
    min-height: 82px;
    padding: 12px 16px 12px 13px;
    gap: 12px;
  }

  body[data-experience="yw01-v2"] .archive-seal-mark {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  body[data-experience="yw01-v2"] .archive-seal-mark svg {
    width: 23px;
    height: 23px;
  }

  body[data-experience="yw01-v2"] .archive-seal-copy strong {
    font-size: 21px;
  }

  body[data-experience="yw01-v2"] .control-deck {
    padding-inline: 8px;
  }

  body[data-experience="yw01-v2"] .phase-card-copy small {
    font-size: 9px;
  }

  body[data-experience="yw01-v2"] .phase-card-copy strong {
    font-size: 14px;
  }

  body[data-experience="yw01-v2"] .phase-card-copy > span {
    font-size: 10px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-strip:not([hidden]) {
    padding-inline: 10px;
  }

  body[data-experience="yw01-v2"] .completion-scrim {
    padding: 12px;
  }

  body[data-experience="yw01-v2"] .completion-scrim .completion {
    max-height: calc(100dvh - 24px);
    padding: 30px 20px 20px;
  }

  body[data-experience="yw01-v2"] .completion-seal {
    right: 19px;
    top: 18px;
    width: 62px;
    height: 62px;
  }

  body[data-experience="yw01-v2"] .completion-scrim .completion > p:first-of-type {
    padding-right: 72px;
  }

  body[data-experience="yw01-v2"] .completion-scrim .completion h3 {
    max-width: calc(100% - 72px);
    font-size: 26px;
  }

  body[data-experience="yw01-v2"] .completion-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  body[data-experience="yw01-v2"] .brand h1 {
    font-size: 19px;
  }

  body[data-experience="yw01-v2"] .chapter-heading strong {
    font-size: 13px;
  }

  body[data-experience="yw01-v2"] .stage-heading h2 {
    font-size: 25px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    height: clamp(272px, 84vw, 322px);
    padding: 20px 11px 27px;
  }
}

@media (max-width: 360px) {
  body[data-experience="yw01-v2"] .stage-heading h2 {
    font-size: 23px;
  }

  body[data-experience="yw01-v2"] .objective {
    font-size: 11px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    height: 265px;
    padding: 17px 8px 25px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy strong {
    font-size: 14px;
  }

  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-copy p {
    font-size: 11px;
  }

  body[data-experience="yw01-v2"] .completion-scrim .completion-stats {
    grid-template-columns: 1fr;
  }

  body[data-experience="yw01-v2"] .completion-scrim .completion-stat {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-right: 0;
    border-bottom: 1px solid #a6aaa2;
  }

  body[data-experience="yw01-v2"] .completion-scrim .completion-stat:last-child {
    border-bottom: 0;
  }

  body[data-experience="yw01-v2"] .completion-scrim .completion-stat strong {
    margin-top: 0;
    font-size: 18px;
  }
}

@media (max-height: 620px) and (min-width: 761px) {
  body[data-experience="yw01-v2"] .stage-heading,
  body[data-experience="yw01-v2"] .control-deck,
  body[data-experience="yw01-v2"][data-level-kind="calibration"] .tutorial-strip:not([hidden]) {
    width: calc(100% + 28px);
    margin-inline: -14px;
  }

  body[data-experience="yw01-v2"] .board-frame {
    padding: 22px 34px 29px;
  }

  body[data-experience="yw01-v2"] .objective {
    font-size: 11px;
  }

  body[data-experience="yw01-v2"] .phase-card-copy > span {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-experience="yw01-v2"] .completion-scrim .completion,
  body[data-experience="yw01-v2"] .board-frame.archive-seal-active .board,
  body[data-experience="yw01-v2"] .archive-seal-sequence,
  body[data-experience="yw01-v2"] .archive-seal-sequence .archive-seal-mark,
  body[data-experience="yw01-v2"] .archive-seal-sequence .archive-seal-copy {
    animation: none;
  }
}

/* Opening dialogue hierarchy: compact copy, prominent Chinese speaker names. */
body[data-experience="yw01-v2"] .yw-opening-dialogue-copy {
  grid-template-columns: 136px minmax(0, 760px);
}

body[data-experience="yw01-v2"] .yw-opening-speaker {
  margin-top: 0;
}

body[data-experience="yw01-v2"] .yw-opening-speaker span {
  color: #f0c96f;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.18;
}

body[data-experience="yw01-v2"] .yw-opening-speaker small {
  margin-top: 7px;
  font-size: 8px;
}

body[data-experience="yw01-v2"] .yw-opening-line {
  font-size: 22px;
  font-weight: 620;
  line-height: 1.58;
  white-space: pre-line;
}

body[data-experience="yw01-v2"] .yw-opening-autoplay[aria-pressed="false"] {
  border-color: rgba(167, 181, 174, 0.48);
  background: rgba(7, 18, 15, 0.72);
  color: #aebdb5;
}

@media (max-width: 640px) {
  body[data-experience="yw01-v2"] .yw-opening-dialogue-copy {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-experience="yw01-v2"] .yw-opening-speaker span {
    font-size: 20px;
  }

  body[data-experience="yw01-v2"] .yw-opening-speaker small {
    margin-top: 0;
  }

  body[data-experience="yw01-v2"] .yw-opening-line {
    font-size: 18px;
    line-height: 1.55;
  }
}

/* The lesson is now a focused entry sheet, not a permanent strip beside the board. */
body.lesson-open {
  overflow: hidden;
}

body[data-experience="yw01-v2"] #tutorial-strip {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  display: none !important;
  overflow: hidden !important;
  border: 0 !important;
}

body[data-experience="yw01-v2"][data-level-kind="calibration"] .stage-panel {
  grid-template-rows: 76px minmax(350px, 1fr) 98px;
  grid-template-areas:
    "heading"
    "board"
    "controls";
}

body[data-experience="yw01-v2"] .lesson-overlay[hidden],
body[data-experience="yw01-v2"] .lesson-actions [hidden] {
  display: none !important;
}

body[data-experience="yw01-v2"] .lesson-overlay {
  position: fixed;
  z-index: 150;
  inset: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  overflow: auto;
  background:
    linear-gradient(90deg, rgba(226, 189, 98, 0.025) 1px, transparent 1px) 0 0 / 72px 100%,
    rgba(2, 9, 6, 0.88);
  backdrop-filter: blur(9px);
}

body[data-experience="yw01-v2"] .lesson-dialog {
  --lesson-accent: #b8892f;
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100dvh - 48px);
  padding: 28px 32px 24px;
  overflow: auto;
  border: 2px solid #9a7430;
  border-radius: 3px;
  background:
    linear-gradient(rgba(45, 64, 53, 0.065) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, transparent 31px, rgba(142, 65, 55, 0.1) 32px, transparent 33px),
    #e8e4d5;
  color: #17231d;
  box-shadow:
    11px 13px 0 rgba(0, 0, 0, 0.42),
    0 28px 60px rgba(0, 0, 0, 0.36),
    inset 0 0 0 5px rgba(255, 255, 255, 0.3),
    inset 0 0 0 7px rgba(154, 116, 48, 0.17);
  animation: v2-lesson-enter 240ms cubic-bezier(.2, .8, .24, 1) both;
}

body[data-experience="yw01-v2"] .lesson-dialog[data-tone="movement"] {
  --lesson-accent: #3c7880;
}

body[data-experience="yw01-v2"] .lesson-dialog::after {
  content: "CALIBRATION ACCESS · READ BEFORE ENTRY";
  position: absolute;
  right: 25px;
  bottom: 84px;
  color: rgba(122, 61, 51, 0.14);
  font-family: var(--font-code);
  font-size: 8px;
  font-weight: 900;
  pointer-events: none;
  transform: rotate(-4deg);
}

body[data-experience="yw01-v2"] .lesson-header {
  position: relative;
  z-index: 1;
  padding: 0 0 16px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 2px solid #293a31;
}

body[data-experience="yw01-v2"] #lesson-kicker,
body[data-experience="yw01-v2"] #lesson-title,
body[data-experience="yw01-v2"] #lesson-copy {
  margin: 0;
}

body[data-experience="yw01-v2"] #lesson-kicker {
  color: #806020;
  font-family: var(--font-code);
  font-size: 10px;
  font-weight: 900;
}

body[data-experience="yw01-v2"] #lesson-title {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 29px;
  line-height: 1.2;
}

body[data-experience="yw01-v2"] #lesson-progress {
  --lesson-progress: 100%;
  position: relative;
  min-width: 92px;
  padding: 0 0 11px;
  color: #68736c;
  font-family: var(--font-code);
  font-size: 10px;
  font-weight: 900;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body[data-experience="yw01-v2"] #lesson-progress::before,
body[data-experience="yw01-v2"] #lesson-progress::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3px;
}

body[data-experience="yw01-v2"] #lesson-progress::before {
  width: 92px;
  background: #b0b2a8;
}

body[data-experience="yw01-v2"] #lesson-progress::after {
  width: var(--lesson-progress, 100%);
  max-width: 92px;
  background: var(--lesson-accent);
  transition: width 180ms ease;
}

body[data-experience="yw01-v2"] .lesson-visual {
  position: relative;
  z-index: 1;
  min-height: 116px;
  margin: 0 -32px;
  padding: 23px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-bottom: 1px solid #a3a69d;
  background: rgba(39, 58, 48, 0.08);
}

body[data-experience="yw01-v2"] .lesson-visual-token {
  min-width: 94px;
  min-height: 46px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #617169;
  border-radius: 3px;
  background: rgba(250, 249, 239, 0.68);
  color: #20322a;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
  box-shadow: inset 0 -4px 0 rgba(32, 50, 42, 0.12);
}

body[data-experience="yw01-v2"] .lesson-visual-arrow {
  flex: 0 0 auto;
  color: var(--lesson-accent);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 900;
}

body[data-experience="yw01-v2"] .lesson-copy {
  position: relative;
  z-index: 1;
  min-height: 68px;
  padding: 17px 2px 0;
  color: #405048;
  font-size: 14px;
  line-height: 1.72;
}

body[data-experience="yw01-v2"] .lesson-actions {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  padding-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-top: 1px solid #9ca098;
}

body[data-experience="yw01-v2"] .lesson-actions button {
  min-width: 0;
}

body[data-experience="yw01-v2"] .lesson-actions svg {
  width: 17px;
  height: 17px;
}

body[data-experience="yw01-v2"] #lesson-next[hidden] + #lesson-confirm {
  grid-column: 1 / -1;
  width: min(230px, 100%);
  justify-self: end;
}

body[data-experience="yw01-v2"] #replay-lesson-button:not([hidden]) {
  display: flex;
}

@keyframes v2-lesson-enter {
  from { opacity: 0; transform: translateY(16px) rotate(-0.7deg) scale(0.98); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@media (max-width: 760px) {
  body[data-experience="yw01-v2"][data-level-kind="calibration"] .stage-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 106px;
    grid-template-areas:
      "heading"
      "board"
      "controls";
  }

  body[data-experience="yw01-v2"] .lesson-overlay {
    padding: 0;
    place-items: end stretch;
    backdrop-filter: blur(6px);
  }

  body[data-experience="yw01-v2"] .lesson-dialog {
    width: 100%;
    max-height: 94dvh;
    padding: 23px 18px calc(18px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 -8px 0 rgba(0, 0, 0, 0.24), inset 0 0 0 5px rgba(255, 255, 255, 0.24);
  }

  body[data-experience="yw01-v2"] .lesson-visual {
    min-height: 100px;
    margin-inline: -18px;
    padding: 18px;
    gap: 9px;
  }

  body[data-experience="yw01-v2"] .lesson-visual-token {
    min-width: 0;
    min-height: 42px;
    padding: 7px 9px;
    flex: 1 1 0;
    font-size: 11px;
  }

  body[data-experience="yw01-v2"] .lesson-visual-arrow {
    font-size: 20px;
  }
}

@media (max-width: 390px) {
  body[data-experience="yw01-v2"] #help-button {
    display: grid;
  }

  body[data-experience="yw01-v2"] .lesson-header {
    align-items: start;
  }

  body[data-experience="yw01-v2"] #lesson-title {
    font-size: 22px;
    line-height: 1.24;
  }

  body[data-experience="yw01-v2"] #lesson-progress {
    min-width: 68px;
  }

  body[data-experience="yw01-v2"] #lesson-progress::before {
    width: 68px;
  }

  body[data-experience="yw01-v2"] #lesson-progress::after {
    max-width: 68px;
  }

  body[data-experience="yw01-v2"] .lesson-copy {
    min-height: 58px;
    padding-top: 14px;
    font-size: 12px;
  }

  body[data-experience="yw01-v2"] .lesson-actions {
    margin-top: 15px;
    grid-template-columns: 1fr;
  }

  body[data-experience="yw01-v2"] #lesson-next,
  body[data-experience="yw01-v2"] #lesson-confirm,
  body[data-experience="yw01-v2"] #lesson-next[hidden] + #lesson-confirm {
    width: 100%;
    grid-column: auto;
    justify-self: stretch;
  }
}

@media (max-height: 620px) and (min-width: 761px) {
  body[data-experience="yw01-v2"][data-level-kind="calibration"] .stage-panel {
    grid-template-rows: 64px minmax(260px, calc(100dvh - 218px)) 82px;
    grid-template-areas:
      "heading"
      "board"
      "controls";
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-experience="yw01-v2"] .lesson-dialog {
    animation: none;
  }

  body[data-experience="yw01-v2"] #lesson-progress::after {
    transition: none;
  }
}

/* V3 board legibility and archive-result pass -------------------------- */

body[data-experience="yw01-v2"] .tile .tile-code {
  z-index: 8;
  left: 3px;
  top: 3px;
  right: auto;
  bottom: auto;
  width: 23px;
  height: 23px;
  border-width: 2px;
  font-size: 12px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.42);
}

body[data-experience="yw01-v2"] .tile.exit .tile-code,
body[data-experience="yw01-v2"] .legend-code.exit-code {
  border-color: #6c4910;
  background: #efbd4f;
  color: #241a08;
}

body[data-experience="yw01-v2"] .tile.sync-gate.open .tile-code {
  border-color: #174c2b;
  background: #72c98d;
  color: #092414;
}

body[data-experience="yw01-v2"] .box.ordinary-crate .entity-inner {
  background-color: #704624;
  filter:
    sepia(0.72)
    saturate(1.28)
    hue-rotate(-11deg)
    brightness(0.84)
    contrast(1.1)
    drop-shadow(0 4px 1px rgba(0, 0, 0, 0.48));
}

body[data-experience="yw01-v2"] .ghost .entity-inner,
body[data-experience="yw01-v2"] .ghost.finished .entity-inner {
  opacity: 0.85;
  filter:
    hue-rotate(-48deg)
    saturate(1.16)
    brightness(1.2)
    drop-shadow(0 0 2px rgba(221, 254, 255, 1))
    drop-shadow(0 0 8px rgba(69, 202, 209, 0.94));
}

body[data-experience="yw01-v2"] .ghost.overlapping .entity-inner {
  opacity: 0.9;
  filter:
    hue-rotate(-48deg)
    saturate(1.18)
    brightness(1.24)
    drop-shadow(0 0 2px rgba(226, 255, 255, 1))
    drop-shadow(0 0 10px rgba(69, 202, 209, 1));
}

body[data-experience="yw01-v2"] .tile.sync-gate.open::after {
  content: none;
  display: none;
}

/* G stays a thin locator ring, including when a crate is archived. */
body[data-experience="yw01-v2"] .tile.goal::before,
body[data-experience="yw01-v2"] .tile.goal.active::before {
  content: "";
  inset: 3%;
  border: 2px solid rgba(105, 202, 135, 0.88);
  border-radius: 3px;
  background: transparent;
  background-image: none;
  box-shadow: none;
  opacity: 1;
  filter: none;
}

body[data-experience="yw01-v2"] .tile.goal.active::before {
  z-index: 5;
  inset: 1%;
  border-width: 2px;
  border-color: #b6e9c4;
}

body[data-experience="yw01-v2"] .tile.goal::after,
body[data-experience="yw01-v2"] .tile.goal.active::after {
  content: none;
  display: none;
}

body[data-experience="yw01-v2"] .tile.exit::before {
  filter:
    brightness(1.12)
    saturate(1.18)
    drop-shadow(0 0 4px rgba(240, 185, 68, 0.48))
    drop-shadow(0 3px 1px rgba(0, 0, 0, 0.38));
}

body[data-experience="yw01-v2"] .tile.exit.ready::before {
  filter:
    brightness(1.34)
    saturate(1.32)
    drop-shadow(0 0 9px rgba(255, 207, 89, 0.9))
    drop-shadow(0 3px 1px rgba(0, 0, 0, 0.36));
}

body[data-experience="yw01-v2"] .completion-scrim .completion {
  width: min(690px, 100%);
  max-height: calc(100dvh - 48px);
}

body[data-experience="yw01-v2"] .completion-scrim .completion-stats {
  margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
}

body[data-experience="yw01-v2"] .completion-scrim .completion-stat {
  min-height: 68px;
}

body[data-experience="yw01-v2"] .completion-stamp-report {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
  padding: 12px 0 14px;
  border-top: 1px solid #a2a49b;
  border-bottom: 1px solid #a2a49b;
}

body[data-experience="yw01-v2"] .completion-stamp-header p {
  color: #806020;
}

body[data-experience="yw01-v2"] .completion-stamp-header h4 {
  color: #203129;
}

body[data-experience="yw01-v2"] .completion-stamp-header > strong {
  padding: 5px 7px;
  border: 1px solid #7d817a;
  background: rgba(255, 255, 255, 0.2);
  color: #435148;
}

body[data-experience="yw01-v2"] .completion-stamp-slot {
  border-color: #a5a79f;
  background: rgba(255, 255, 255, 0.18);
  filter: grayscale(0.76);
}

body[data-experience="yw01-v2"] .completion-stamp-slot.is-earned,
body[data-experience="yw01-v2"] .completion-stamp-slot[data-earned="true"] {
  border-color: currentColor;
  background: rgba(255, 252, 239, 0.54);
  filter: none;
  box-shadow: inset 0 -4px 0 color-mix(in srgb, currentColor 16%, transparent);
}

body[data-experience="yw01-v2"] .completion-stamp-slot.is-earned-now .completion-stamp-mark {
  animation: v3-stamp-land 300ms cubic-bezier(.18, .86, .28, 1.12) both;
}

@keyframes v3-stamp-land {
  from { opacity: 0; transform: rotate(-14deg) scale(1.34); }
  to { opacity: 1; transform: rotate(-7deg) scale(1); }
}

body[data-experience="yw01-v2"] .completion-first-teaching-highlight {
  position: relative;
  z-index: 1;
  border-color: #a97824;
  background: rgba(236, 190, 82, 0.16);
  color: #28372f;
  box-shadow: inset 5px 0 0 #bd8a2e;
}

body[data-experience="yw01-v2"] .completion-first-teaching-badge {
  color: #805b19;
}

body[data-experience="yw01-v2"] .completion-first-teaching-highlight > button {
  background: rgba(255, 252, 239, 0.72);
}

body[data-experience="yw01-v2"] .lesson-overlay[data-presentation="spotlight"] {
  background: transparent;
  backdrop-filter: none;
}

body[data-experience="yw01-v2"] .lesson-overlay[data-presentation="spotlight"] .lesson-dialog {
  align-self: end;
  justify-self: end;
  width: min(460px, calc(100vw - 32px));
  max-height: min(70dvh, 620px);
}

body[data-experience="yw01-v2"] .lesson-object-bubble {
  border-color: #9a7430;
  background:
    linear-gradient(rgba(45, 64, 53, 0.055) 1px, transparent 1px) 0 0 / 100% 22px,
    #e8e4d5;
  color: #17231d;
  pointer-events: auto;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, 0.44), inset 0 0 0 3px rgba(255, 255, 255, 0.28);
}

body[data-experience="yw01-v2"] .lesson-control-cue {
  margin: 0 -32px;
  padding: 15px 32px 4px;
  border-bottom: 1px solid #a3a69d;
  background: rgba(183, 137, 47, 0.08);
}

body[data-experience="yw01-v2"] .lesson-control-cue > span {
  color: #46534b;
}

body[data-experience="yw01-v2"] .move-button.is-tutorial-cue {
  border-color: #8b641d;
  background: #f2d57e;
  color: #251c0a;
  box-shadow:
    inset 0 -3px 0 #af7f26,
    0 0 0 3px rgba(235, 190, 80, 0.34),
    0 0 15px rgba(235, 190, 80, 0.34);
}

body[data-experience="yw01-v2"].tutorial-context-open .app-shell {
  filter: brightness(0.48) saturate(0.74);
  transition: filter 140ms ease;
}

body[data-experience="yw01-v2"] #tutorial-context-bubble {
  max-height: calc(100dvh - 32px);
  overflow: auto;
}

@media (max-width: 620px) {
  body[data-experience="yw01-v2"] .tile .tile-code {
    width: 21px;
    height: 21px;
    font-size: 11px;
  }

  body[data-experience="yw01-v2"] .completion-scrim .completion {
    max-height: calc(100dvh - 24px);
  }

  body[data-experience="yw01-v2"] .completion-stamp-slot {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 7px 9px;
  }

  body[data-experience="yw01-v2"] .completion-stamp-mark {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  body[data-experience="yw01-v2"] .lesson-overlay[data-presentation="spotlight"] .lesson-dialog {
    width: 100%;
    max-height: 58dvh;
  }

  body[data-experience="yw01-v2"] .lesson-control-cue {
    margin-inline: -18px;
    padding-inline: 18px;
  }
}

/* Hidden-route celebration and its permanent directory mark. */
body.route-breakthrough-open {
  overflow: hidden;
}

body[data-experience="yw01-v2"] .route-breakthrough-overlay[hidden] {
  display: none !important;
}

body[data-experience="yw01-v2"] .route-breakthrough-overlay {
  position: fixed;
  z-index: 170;
  inset: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  overflow: auto;
  background: rgba(2, 8, 5, 0.84);
  backdrop-filter: blur(9px);
}

body[data-experience="yw01-v2"] .route-breakthrough-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-columns: minmax(230px, 0.88fr) minmax(300px, 1.12fr);
  overflow: auto;
  border: 2px solid #d5a932;
  border-radius: 4px;
  background: #e9e5d6;
  color: #17231d;
  box-shadow:
    0 0 0 4px rgba(240, 197, 72, 0.16),
    12px 14px 0 rgba(0, 0, 0, 0.46),
    inset 0 0 0 4px rgba(255, 255, 255, 0.32);
  animation: route-breakthrough-enter 280ms cubic-bezier(.2, .8, .24, 1) both;
}

body[data-experience="yw01-v2"] .route-breakthrough-close {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(80, 71, 47, 0.65);
  border-radius: 2px;
  background: rgba(238, 233, 214, 0.9);
  color: #29352f;
}

body[data-experience="yw01-v2"] .route-breakthrough-visual {
  min-height: 360px;
  margin: 0;
  overflow: hidden;
  border-right: 2px solid #9a7525;
  background: #101913;
}

body[data-experience="yw01-v2"] .route-breakthrough-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

body[data-experience="yw01-v2"] .route-breakthrough-copy {
  min-width: 0;
  padding: 50px 30px 28px;
  display: flex;
  flex-direction: column;
}

body[data-experience="yw01-v2"] .route-breakthrough-copy > p:first-child {
  margin: 0;
  color: #8a671d;
  font-family: var(--font-code);
  font-size: 10px;
  font-weight: 900;
}

body[data-experience="yw01-v2"] .route-breakthrough-copy h2 {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.22;
}

body[data-experience="yw01-v2"] .route-breakthrough-copy > p:nth-of-type(2) {
  margin: 12px 0 0;
  color: #4c5a52;
  font-size: 12px;
  line-height: 1.7;
}

body[data-experience="yw01-v2"] .route-breakthrough-stats {
  margin: 22px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid #2b3a32;
  border-bottom: 2px solid #2b3a32;
}

body[data-experience="yw01-v2"] .route-breakthrough-stats div {
  min-width: 0;
  padding: 11px 8px;
  border-right: 1px solid #a7a69a;
}

body[data-experience="yw01-v2"] .route-breakthrough-stats div:last-child {
  border-right: 0;
}

body[data-experience="yw01-v2"] .route-breakthrough-stats dt,
body[data-experience="yw01-v2"] .route-breakthrough-stats dd {
  margin: 0;
}

body[data-experience="yw01-v2"] .route-breakthrough-stats dt {
  color: #657068;
  font-size: 9px;
  font-weight: 800;
}

body[data-experience="yw01-v2"] .route-breakthrough-stats dd {
  margin-top: 4px;
  color: #785914;
  font-size: 17px;
  font-weight: 900;
}

body[data-experience="yw01-v2"] .route-breakthrough-continue {
  width: 100%;
  margin-top: auto;
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tab.route-breakthrough {
  border: 2px solid #d2a126;
  background:
    linear-gradient(100deg, rgba(255, 230, 145, 0.32), transparent 46%),
    #eee2bb;
  box-shadow:
    inset 0 0 0 2px rgba(255, 247, 203, 0.75),
    inset 0 -4px 0 rgba(151, 104, 13, 0.22),
    0 0 9px rgba(224, 177, 47, 0.34);
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tab.route-breakthrough.active {
  box-shadow:
    inset 5px 0 0 var(--v2-coral),
    inset 0 0 0 2px rgba(255, 247, 203, 0.8),
    inset 0 -4px 0 rgba(151, 104, 13, 0.22),
    0 0 11px rgba(224, 177, 47, 0.44);
}

@keyframes route-breakthrough-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 620px) {
  body[data-experience="yw01-v2"] .route-breakthrough-overlay {
    padding: 10px;
    align-items: end;
  }

  body[data-experience="yw01-v2"] .route-breakthrough-dialog {
    width: 100%;
    max-height: calc(100dvh - 20px);
    grid-template-columns: 1fr;
  }

  body[data-experience="yw01-v2"] .route-breakthrough-visual {
    min-height: 0;
    height: min(34dvh, 230px);
    border-right: 0;
    border-bottom: 2px solid #9a7525;
  }

  body[data-experience="yw01-v2"] .route-breakthrough-copy {
    padding: 21px 18px calc(18px + env(safe-area-inset-bottom));
  }

  body[data-experience="yw01-v2"] .route-breakthrough-copy h2 {
    max-width: calc(100% - 36px);
    font-size: 23px;
  }

  body[data-experience="yw01-v2"] .route-breakthrough-stats {
    margin: 16px 0;
  }

  body[data-experience="yw01-v2"] .route-breakthrough-stats dd {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-experience="yw01-v2"] .route-breakthrough-dialog {
    animation: none;
  }
}

/* One-tick recovery, nonblocking route warning, and entry stamp targets. */
body[data-experience="yw01-v2"] .topbar .undo-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

body[data-experience="yw01-v2"] .deadlock-callout[hidden],
body[data-experience="yw01-v2"] .stamp-briefing-overlay[hidden] {
  display: none !important;
}

body[data-experience="yw01-v2"] .deadlock-callout {
  position: absolute;
  z-index: 35;
  right: 24px;
  bottom: 112px;
  left: 24px;
  min-height: 64px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 2px solid #a77732;
  background: rgba(231, 227, 212, 0.98);
  color: #17231d;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, 0.42);
}

body[data-experience="yw01-v2"] .deadlock-callout .deadlock-mark {
  width: 36px;
  height: 36px;
  margin: 0;
  border-width: 2px;
}

body[data-experience="yw01-v2"] .deadlock-callout .deadlock-mark svg {
  width: 19px;
  height: 19px;
}

body[data-experience="yw01-v2"] .deadlock-callout .deadlock-copy strong {
  display: block;
  font-size: 14px;
}

body[data-experience="yw01-v2"] .deadlock-callout #deadlock-message {
  margin: 3px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  line-height: 1.45;
}

body[data-experience="yw01-v2"] .deadlock-callout .deadlock-actions {
  margin: 0;
  padding: 0;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 6px;
  border: 0;
}

body[data-experience="yw01-v2"] .deadlock-callout .deadlock-actions button {
  min-height: 34px;
  padding-inline: 10px;
  font-size: 10px;
}

body[data-experience="yw01-v2"] .deadlock-callout .deadlock-close {
  width: 34px;
  min-width: 34px;
  padding: 0;
  color: #5f4038;
}

body[data-experience="yw01-v2"] .stamp-briefing-overlay {
  position: fixed;
  z-index: 160;
  inset: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  overflow: auto;
  background: rgba(2, 8, 5, 0.82);
  backdrop-filter: blur(8px);
}

body[data-experience="yw01-v2"] .stamp-briefing-dialog {
  width: min(610px, 100%);
  max-height: calc(100dvh - 40px);
  padding: 23px;
  overflow: auto;
  border: 2px solid #9a7430;
  background: #e8e4d5;
  color: #17231d;
  box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.48);
}

body[data-experience="yw01-v2"] .stamp-briefing-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #31443a;
}

body[data-experience="yw01-v2"] .stamp-briefing-header p,
body[data-experience="yw01-v2"] .stamp-briefing-header h2,
body[data-experience="yw01-v2"] .stamp-briefing-list p {
  margin: 0;
}

body[data-experience="yw01-v2"] .stamp-briefing-header p {
  color: #85631f;
  font-family: var(--font-code);
  font-size: 9px;
  font-weight: 900;
}

body[data-experience="yw01-v2"] .stamp-briefing-header h2 {
  margin-top: 4px;
  font-size: 25px;
}

body[data-experience="yw01-v2"] #stamp-briefing-level {
  padding: 5px 8px;
  border: 1px solid #9a7430;
  color: #715216;
  font-family: var(--font-code);
  font-size: 10px;
  font-weight: 900;
}

body[data-experience="yw01-v2"] .stamp-briefing-copy,
body[data-experience="yw01-v2"] .stamp-briefing-note {
  margin: 12px 0;
  color: #4d5a52;
  font-size: 12px;
  line-height: 1.6;
}

body[data-experience="yw01-v2"] .stamp-briefing-list {
  display: grid;
  gap: 7px;
}

body[data-experience="yw01-v2"] .stamp-briefing-list article {
  min-height: 64px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #a7aaa1;
  background: rgba(255, 255, 255, 0.25);
}

body[data-experience="yw01-v2"] .stamp-briefing-list article > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid #8f6b26;
  border-radius: 50%;
  color: #7d5c1e;
  font-weight: 900;
}

body[data-experience="yw01-v2"] .stamp-briefing-list article.is-held > span {
  background: #c79739;
  color: #fff7da;
}

body[data-experience="yw01-v2"] .stamp-briefing-list strong {
  font-size: 13px;
}

body[data-experience="yw01-v2"] .stamp-briefing-list p {
  margin-top: 3px;
  color: #56635c;
  font-size: 10px;
  line-height: 1.45;
}

body[data-experience="yw01-v2"] .stamp-briefing-list small {
  color: #7d682e;
  font-size: 9px;
  font-weight: 850;
}

body[data-experience="yw01-v2"] #stamp-briefing-confirm {
  width: 100%;
  margin-top: 14px;
}

body[data-experience="yw01-v2"] .tutorial-status-label {
  position: fixed;
  z-index: 121;
  width: min(220px, calc(100vw - 20px));
  padding: 8px 10px;
  border: 2px solid #6b9d74;
  background: rgba(230, 231, 216, 0.97);
  color: #17231d;
  box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

body[data-experience="yw01-v2"] .tutorial-status-label[data-tutorial-status="plate-pressed-status"],
body[data-experience="yw01-v2"] .tutorial-status-label[data-tutorial-status="gate-open-status"] {
  width: min(156px, calc(100vw - 20px));
}

body[data-experience="yw01-v2"] .tutorial-status-label strong,
body[data-experience="yw01-v2"] .tutorial-status-label span {
  display: block;
}

body[data-experience="yw01-v2"] .tutorial-status-label strong { font-size: 12px; }
body[data-experience="yw01-v2"] .tutorial-status-label span { margin-top: 2px; font-size: 9px; color: #4e5d54; }

body[data-experience="yw01-v2"] .guide-arrow.is-paired.is-player > .guide-arrow__badge {
  margin-left: -11px;
}

body[data-experience="yw01-v2"] .guide-arrow.is-paired.is-echo > .guide-arrow__badge {
  margin-left: 11px;
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tab {
  grid-template-columns: 32px minmax(0, 1fr) auto;
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tab > .directory-stamps {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  gap: 3px;
}

body[data-experience="yw01-v2"] .directory-stamp {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 1px solid #8d8f86;
  border-radius: 50%;
  color: #8d8f86;
  font: 800 8px/1 var(--font-code);
  font-style: normal;
}

body[data-experience="yw01-v2"] .directory-stamp.is-earned {
  border-color: #8a641d;
  background: #c79535;
  color: #fff4cd;
}

@media (max-width: 620px) {
  body[data-experience="yw01-v2"] .deadlock-callout {
    right: 10px;
    bottom: 106px;
    left: 10px;
    grid-template-columns: 32px minmax(0, 1fr);
  }

  body[data-experience="yw01-v2"] .deadlock-callout .deadlock-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  body[data-experience="yw01-v2"] .deadlock-callout .deadlock-actions .secondary-command { flex: 1; }
  body[data-experience="yw01-v2"] .stamp-briefing-overlay { padding: 10px; align-items: end; }
  body[data-experience="yw01-v2"] .stamp-briefing-dialog { max-height: calc(100dvh - 20px); padding: 18px 14px; }
  body[data-experience="yw01-v2"] .stamp-briefing-list article { grid-template-columns: 38px minmax(0, 1fr); }
  body[data-experience="yw01-v2"] .stamp-briefing-list article > span { width: 36px; height: 36px; }
  body[data-experience="yw01-v2"] .stamp-briefing-list small { grid-column: 2; }
}

@media (max-width: 390px) {
  body[data-experience="yw01-v2"] .completion-stamp-report {
    margin-bottom: 12px;
    padding-block: 9px 11px;
  }

  body[data-experience="yw01-v2"] .completion-stamp-list {
    gap: 5px;
  }

  body[data-experience="yw01-v2"] .completion-stamp-slot {
    min-height: 52px;
  }

  body[data-experience="yw01-v2"] .completion-first-teaching-highlight {
    margin-bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-experience="yw01-v2"] .completion-stamp-slot.is-earned-now .completion-stamp-mark {
    animation: none;
  }

  body[data-experience="yw01-v2"].tutorial-context-open .app-shell {
    transition: none;
  }
}

/* Final generated mechanism assets. Keep this after the V3 fallback rules. */
body[data-experience="yw01-v2"] .tile.goal::before,
body[data-experience="yw01-v2"] .tile.goal.active::before {
  content: "";
  z-index: 5;
  inset: -2%;
  border: 0;
  border-radius: 0;
  background: transparent url("assets/yw-mechanisms/archive-slot.png") center / contain no-repeat;
  box-shadow: none;
  opacity: 1;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.42));
}

body[data-experience="yw01-v2"] .tile.goal.active::before {
  filter:
    brightness(1.12)
    saturate(1.08)
    drop-shadow(0 0 4px rgba(209, 174, 91, 0.48))
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.42));
}

body[data-experience="yw01-v2"] .tile.plate::before,
body[data-experience="yw01-v2"] .tile.plate.active::before {
  inset: 3%;
  background: transparent url("assets/yw-mechanisms/causal-plate-idle.png") center / contain no-repeat;
  transform: none;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.4));
}

body[data-experience="yw01-v2"] .tile.plate.active::before {
  background-image: url("assets/yw-mechanisms/causal-plate-active.png");
  filter:
    brightness(1.05)
    drop-shadow(0 0 4px rgba(114, 215, 112, 0.58))
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.4));
}

body[data-experience="yw01-v2"] .tile.sync-gate.closed::before,
body[data-experience="yw01-v2"] .tile.sync-gate.open::before {
  content: "";
  inset: 1%;
  width: auto;
  height: auto;
  border: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 1;
}

body[data-experience="yw01-v2"] .tile.sync-gate.closed::before {
  background-image: url("assets/yw-mechanisms/causal-gate-closed-final.png");
  filter: drop-shadow(0 3px 1px rgba(0, 0, 0, 0.5));
}

body[data-experience="yw01-v2"] .tile.sync-gate.open::before {
  background-image: url("assets/yw-mechanisms/causal-gate-open-final.png");
  filter:
    drop-shadow(0 0 3px rgba(91, 214, 107, 0.42))
    drop-shadow(0 3px 1px rgba(0, 0, 0, 0.46));
}

body[data-experience="yw01-v2"] .tile.exit.locked::before,
body[data-experience="yw01-v2"] .tile.exit.ready::before {
  content: "";
  inset: 1%;
  border: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

body[data-experience="yw01-v2"] .tile.exit.locked::before {
  background-image: url("assets/yw-mechanisms/archive-exit-locked-v2.png");
  filter:
    brightness(0.9)
    saturate(0.88)
    drop-shadow(0 3px 1px rgba(0, 0, 0, 0.5));
}

body[data-experience="yw01-v2"] .tile.exit.ready::before {
  background-image: url("assets/yw-mechanisms/archive-exit-ready-v3.png");
  filter:
    brightness(1.13)
    saturate(1.12)
    drop-shadow(0 0 7px rgba(255, 207, 89, 0.72))
    drop-shadow(0 3px 1px rgba(0, 0, 0, 0.46));
}

body[data-experience="yw01-v2"] .tile .tile-code {
  left: 2px;
  top: 2px;
  width: 26px;
  height: 26px;
  border-width: 2px;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.52);
}

/* Context lessons sit beside their subject; the board itself stays fully visible. */
body[data-experience="yw01-v2"].tutorial-context-open .app-shell {
  filter: none;
  transition: none;
}

body[data-experience="yw01-v2"] #tutorial-context-bubble[data-mode="control"] .lesson-context-confirm {
  display: none;
}

@media (max-width: 620px) {
  body[data-experience="yw01-v2"] .tile .tile-code {
    width: 23px;
    height: 23px;
    font-size: 12px;
  }
}

/* Exit confirmation and optional inspection handoff. */
body[data-experience="yw01-v2"] .exit-confirm-overlay[hidden] {
  display: none !important;
}

body[data-experience="yw01-v2"] .exit-confirm-overlay {
  position: fixed;
  z-index: 12100;
  inset: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  background: rgba(2, 8, 5, 0.78);
  backdrop-filter: blur(8px);
}

body[data-experience="yw01-v2"] .exit-confirm-dialog {
  position: relative;
  width: min(500px, 100%);
  padding: 28px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  border: 2px solid #9a7430;
  border-radius: 4px;
  background:
    linear-gradient(rgba(45, 64, 53, 0.055) 1px, transparent 1px) 0 0 / 100% 22px,
    #e8e4d5;
  color: #17231d;
  box-shadow: 11px 13px 0 rgba(0, 0, 0, 0.48), inset 0 0 0 3px rgba(255, 255, 255, 0.3);
}

body[data-experience="yw01-v2"] .exit-confirm-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid #986d24;
  background: rgba(186, 129, 39, 0.12);
  color: #805919;
}

body[data-experience="yw01-v2"] .exit-confirm-mark svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

body[data-experience="yw01-v2"] .exit-confirm-copy > p:first-child {
  margin: 0 0 5px;
  color: #806020;
  font-family: var(--font-code);
  font-size: 9px;
  font-weight: 900;
}

body[data-experience="yw01-v2"] .exit-confirm-copy h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0;
}

body[data-experience="yw01-v2"] .exit-confirm-copy > p:last-child {
  margin: 9px 0 0;
  color: #4f5c54;
  font-size: 12px;
  line-height: 1.65;
}

body[data-experience="yw01-v2"] .exit-confirm-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #a2a49b;
}

body[data-experience="yw01-v2"] .completion-actions:has(.completion-skip-inspection:not([hidden])) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-experience="yw01-v2"] .completion-skip-inspection[hidden] {
  display: none !important;
}

body[data-experience="yw01-v2"] .completion-skip-inspection {
  border-style: dashed;
  color: #48574e;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

@media (max-width: 620px) {
  body[data-experience="yw01-v2"] .topbar-tools {
    padding-right: 42px;
  }

  body[data-experience="yw01-v2"] .global-exit-title-button {
    top: 10px;
    right: 9px;
    width: 36px;
    height: 36px;
  }

  body[data-experience="yw01-v2"].yw-opening-active:has(.yw-opening[data-mode="intro"]:not([hidden])) .global-exit-title-button {
    top: 64px;
    right: 16px;
  }

  body[data-experience="yw01-v2"].yw-opening-active:has(.yw-opening[data-mode="intro"]:not([hidden])) .yw-opening-intro-tools {
    margin-right: 0;
  }

  body[data-experience="yw01-v2"] .exit-confirm-overlay {
    padding: 12px;
    align-items: end;
  }

  body[data-experience="yw01-v2"] .exit-confirm-dialog {
    width: 100%;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
  }

  body[data-experience="yw01-v2"] .exit-confirm-mark {
    width: 44px;
    height: 44px;
  }

  body[data-experience="yw01-v2"] .exit-confirm-copy h2 {
    font-size: 20px;
  }

  body[data-experience="yw01-v2"] .exit-confirm-actions,
  body[data-experience="yw01-v2"] .completion-actions:has(.completion-skip-inspection:not([hidden])) {
    grid-template-columns: 1fr;
  }
}

/* This final override must follow the directory's generated-state rules. */
body[data-experience="yw01-v2"] .level-directory-dialog .level-tab.route-breakthrough,
body[data-experience="yw01-v2"] .level-directory-dialog .level-tab.kind-archive.route-breakthrough {
  border: 2px solid #d2a126;
  background:
    linear-gradient(100deg, rgba(255, 230, 145, 0.32), transparent 46%),
    #eee2bb;
  box-shadow:
    inset 0 0 0 2px rgba(255, 247, 203, 0.75),
    inset 0 -4px 0 rgba(151, 104, 13, 0.22),
    0 0 9px rgba(224, 177, 47, 0.34);
}

body[data-experience="yw01-v2"] .level-directory-dialog .level-tab.route-breakthrough.active {
  box-shadow:
    inset 5px 0 0 var(--v2-coral),
    inset 0 0 0 2px rgba(255, 247, 203, 0.8),
    inset 0 -4px 0 rgba(151, 104, 13, 0.22),
    0 0 11px rgba(224, 177, 47, 0.44);
}