.game-opening { padding-bottom: clamp(56px, 8vw, 104px); }
.skip-link:not(:focus) { visibility: hidden; }
.skip-link:focus { visibility: visible; }
.game-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin: 0 0 clamp(32px, 5vw, 64px); color: var(--muted); font-size: var(--type-support); line-height: var(--leading-support); }
.game-breadcrumb a { text-underline-offset: 3px; }
.game-breadcrumb [aria-current="page"] { color: var(--ink); }
.game-opening-copy { padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.game-opening-copy > .kicker { margin-bottom: 18px; }
.game-opening h1 { margin: 0; font-family: var(--display); font-size: clamp(2.6rem, 6vw, 3.5rem); font-weight: 650; line-height: 1.24; letter-spacing: -.025em; }
.game-opening-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); align-items: start; gap: clamp(24px, 4vw, 54px); }
.game-opening-left { min-width: 0; }
.opening-bottom { margin-top: 18px; }
.game-thesis { margin: 0; color: var(--orange-text); font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.55; font-weight: 650; }
.game-lead { max-width: 780px; margin: 10px 0 0; font-size: var(--type-body); line-height: var(--leading-body); }
.game-path { min-width: 0; padding-top: 7px; border-top: 2px solid var(--orange); }
.game-path-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--muted); font-family: var(--mono); font-size: var(--type-micro); line-height: 1.5; letter-spacing: .045em; }
.game-path-intro { margin: 10px 0 13px; font-size: var(--type-compact); line-height: var(--leading-body); }
.game-path-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.game-path-option { min-width: 0; min-height: 46px; display: flex; align-items: center; justify-content: flex-start; gap: 7px; padding: 8px 9px; border: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .18s, background-color .18s; }
.game-path-option i { flex: none; color: var(--orange-text); font-family: var(--mono); font-size: var(--type-micro); font-style: normal; }
.game-path-option b { font-size: var(--type-control); line-height: 1.4; font-weight: 620; }
.game-path-option:hover, .game-path-option:focus-visible { border-color: var(--orange); }
.game-path-option.is-active { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 11%, var(--panel)); }
.game-path-option:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.game-path-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 12px; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.game-path-detail > div { min-width: 0; }
.game-path-detail span, .game-path-tools > span { color: var(--orange-text); font-family: var(--mono); font-size: var(--type-micro); line-height: 1.5; letter-spacing: .035em; }
.game-path-detail p { margin: 4px 0 0; font-size: var(--type-support); line-height: var(--leading-support); }
.game-path-tools { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.game-path-tools > span { flex: none; color: var(--muted); }
.engine-list { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.engine-list b { padding: 4px 7px; border: 1px solid var(--line); background: color-mix(in srgb, var(--blue) 7%, var(--panel)); font-size: var(--type-support); line-height: 1.4; font-weight: 620; }

.game-lab { margin-top: clamp(46px, 6vw, 78px); }
.lab-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.lab-heading .kicker { margin-bottom: 12px; color: var(--orange-text); }
.lab-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 3.2vw, 2.25rem); font-weight: 630; line-height: 1.36; letter-spacing: -.015em; }
.rule-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0 12px; }
.rule-instruction { font-size: var(--type-control); line-height: var(--leading-control); }
.rule-buttons { display: flex; gap: 8px; }
.rule-button { min-width: 124px; min-height: 44px; display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 13px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: var(--type-control); line-height: var(--leading-control); text-align: left; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; }
.rule-button span { color: var(--muted); font-family: var(--mono); font-size: var(--type-micro); }
.rule-button:hover { border-color: var(--orange); }
.rule-button.is-active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.rule-button.is-active span { color: color-mix(in srgb, var(--paper) 70%, var(--ink)); }
.board-frame { padding: 18px clamp(14px, 2.4vw, 32px) 13px; border: 1px solid var(--line); background: color-mix(in srgb, var(--blue) 7%, var(--panel)); }
.board-meta, .board-legend { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); }
.board-meta { padding-bottom: 13px; font-family: var(--mono); font-size: var(--type-micro); line-height: 1.5; letter-spacing: .04em; }
.board-meta > span:last-child { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: var(--type-support); letter-spacing: normal; }
.board-meta b { color: var(--ink); font-weight: 600; }
.board-meta i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.play-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.play-cell { min-width: 0; min-height: clamp(64px, 7.8vw, 98px); display: grid; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); background: color-mix(in srgb, var(--paper) 78%, var(--blue)); cursor: pointer; transition: background-color .18s, border-color .18s, transform .18s; }
.play-cell:nth-child(3n + 2) { background: color-mix(in srgb, var(--panel) 75%, var(--yellow)); }
.play-cell:nth-child(4n) { background: color-mix(in srgb, var(--panel) 78%, var(--green)); }
.play-cell span { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 24%, transparent); transition: transform .18s, background-color .18s, clip-path .18s; }
.play-cell[data-kind="collect"] span { width: 19px; height: 19px; border-radius: 2px; background: var(--orange); transform: rotate(45deg); }
.play-cell[data-kind="hazard"] span { width: 0; height: 0; border-radius: 0; background: transparent; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 20px solid var(--orange); }
.play-cell[data-kind="safe"] span { width: 14px; height: 14px; border: 2px solid var(--brand); border-radius: 50%; background: transparent; }
.play-cell:hover { z-index: 1; border-color: var(--ink); transform: translateY(-2px); }
.play-cell:focus-visible { z-index: 2; outline: 3px solid var(--orange); outline-offset: 2px; }
.play-cell.is-complete { border-color: var(--brand); background: color-mix(in srgb, var(--blue) 24%, var(--panel)); }
.play-cell.is-complete span { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--brand); transform: none; clip-path: none; }
.play-cell.is-wrong { animation: nudge .24s ease-in-out; border-color: var(--orange); }
.play-cell.is-wrong span { background: var(--orange); }
.board-legend { justify-content: flex-start; flex-wrap: wrap; padding-top: 12px; font-size: var(--type-support); line-height: var(--leading-support); }
.board-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.board-legend > span:last-child { margin-left: auto; }
.board-legend i { width: 12px; height: 12px; display: inline-block; }
.legend-target { background: var(--orange); transform: rotate(45deg) scale(.72); }
.legend-safe { border: 2px solid var(--brand); border-radius: 50%; }
.play-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 17px 0 0; }
.result-copy { display: flex; align-items: center; gap: 14px; min-width: 0; }
.result-signal { width: 37px; height: 37px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--orange-text); font-size: 1.1rem; }
.result-label { margin: 0 0 2px; color: var(--muted); font-size: var(--type-support); line-height: var(--leading-support); }
.result-message { margin: 0; font-size: var(--type-body); line-height: var(--leading-body); }
.result-progress { display: flex; align-items: center; gap: 15px; }
.progress-count { min-width: 44px; display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--mono); }
.progress-count b { font-size: 1.2rem; color: var(--orange-text); }
.progress-count span { color: var(--muted); font-size: var(--type-support); }
.progress-track { display: flex; gap: 3px; }
.progress-track i { width: 9px; height: 22px; background: color-mix(in srgb, var(--ink) 13%, transparent); }
.progress-track i.is-on { background: var(--orange); }
.reset-button { min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); background: transparent; font-size: var(--type-control); line-height: var(--leading-control); cursor: pointer; }
.reset-button:hover { border-color: var(--orange); }

.direction-section { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); gap: clamp(44px, 8vw, 120px); padding: clamp(64px, 9vw, 118px) 0; border-top: 1px solid var(--line); }
.section-intro { align-self: start; position: sticky; top: 28px; }
.section-intro .kicker, .production-heading .kicker { color: var(--orange-text); }
.section-intro h2, .production-heading h2, .contact-signoff h2 { margin: 22px 0 0; font-family: var(--display); font-size: clamp(1.85rem, 3.3vw, 2.25rem); font-weight: 640; line-height: 1.38; letter-spacing: -.015em; }
.section-intro > p:last-child, .production-heading > p:last-child { max-width: 460px; margin: 22px 0 0; color: var(--muted); font-size: var(--type-body); line-height: var(--leading-body); }
.direction-editorial { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: clamp(26px, 5vw, 68px); row-gap: 44px; }
.direction-item { position: relative; min-width: 0; min-height: 210px; padding: 17px 0 12px; border-top: 1px solid var(--line); }
.direction-product { min-height: 258px; }
.direction-brand { margin-top: 0; }
.direction-prototype { min-height: 180px; }
.direction-collaboration { min-height: 210px; margin-top: 0; }
.direction-index { display: block; color: var(--orange-text); font-family: var(--mono); font-size: var(--type-micro); line-height: 1.5; letter-spacing: .04em; }
.direction-item h3 { margin: 36px 0 10px; font-family: var(--display); font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1.4; font-weight: 630; }
.direction-item p { max-width: 520px; margin: 0; font-size: var(--type-compact); line-height: var(--leading-body); }
.direction-item a { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--orange-text); font-size: var(--type-control); line-height: var(--leading-control); font-weight: 650; text-underline-offset: 4px; }
.margin-note { display: inline-block; margin: 15px 0 0 35%; padding-left: 12px; border-left: 2px solid var(--yellow); color: var(--muted); font-size: var(--type-support); line-height: var(--leading-support); }

.production-section { display: grid; grid-template-columns: minmax(240px, .62fr) minmax(0, 1.38fr); gap: clamp(42px, 7vw, 100px); padding: clamp(64px, 8vw, 100px) 0; border-top: 1px solid var(--line); }
.production-heading h2 { margin-top: 22px; }
.production-content { min-width: 0; }
.production-rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-top: 22px; }
.production-rail::before { content: ""; position: absolute; top: 33px; left: 0; right: 0; height: 1px; background: var(--line); }
.production-rail article { position: relative; min-width: 0; padding: 0 16px 0 0; }
.production-rail article + article { padding-left: 15px; }
.phase-no { position: relative; z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; margin: 0 0 21px; border: 1px solid var(--orange); border-radius: 50%; background: var(--paper); color: var(--orange-text); font-family: var(--mono); font-size: .6875rem; line-height: 1; }
.production-rail h3 { margin: 0; font-family: var(--display); font-size: var(--type-card-title); line-height: 1.45; font-weight: 630; }
.production-rail p { margin: 8px 0 0; font-size: var(--type-compact); line-height: var(--leading-body); }
.production-notes { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 18px 24px; align-items: start; margin-top: 34px; padding: 17px 0 0; border-top: 1px solid var(--line); }
.notes-title { margin: 0; color: var(--orange-text); font-family: var(--mono); font-size: var(--type-micro); line-height: 1.5; }
.production-notes > div { min-width: 0; }
.production-notes b { font-size: var(--type-control); line-height: var(--leading-control); font-weight: 650; }
.production-notes p { margin: 5px 0 0; color: var(--muted); font-size: var(--type-support); line-height: var(--leading-support); }

.game-contact { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; padding: 28px 0 54px; border-top: 1px solid var(--line); }
.contact-signoff .kicker { color: var(--orange-text); }
.contact-signoff h2 { margin-top: 11px; font-size: clamp(1.7rem, 2.8vw, 2.25rem); }
.contact-actions { display: grid; grid-template-columns: auto auto; align-items: center; gap: 12px 22px; }
.contact-primary { display: inline-flex; align-items: center; gap: 13px; padding: 12px 16px; background: var(--orange); color: #171914; font-size: var(--type-control); line-height: var(--leading-control); font-weight: 680; text-decoration: none; }
.contact-actions nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.contact-actions nav a { color: var(--muted); font-size: var(--type-support); line-height: var(--leading-support); text-underline-offset: 3px; }

@keyframes nudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

@media (max-width: 900px) {
  .direction-section, .production-section { grid-template-columns: 1fr; gap: 34px; }
  .section-intro { position: static; }
  .section-intro > p:last-child, .production-heading > p:last-child { max-width: 650px; }
  .production-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .notes-title { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
  .game-opening { padding-bottom: 58px; }
  .game-breadcrumb { gap: 8px; margin-bottom: 28px; }
  .game-opening-copy { padding-bottom: 22px; }
  .game-opening-copy > .kicker { max-width: 100%; font-size: var(--type-micro); }
  .game-opening h1 { font-size: clamp(2rem, 9vw, 2.25rem); line-height: 1.3; }
  .game-opening-main { grid-template-columns: 1fr; gap: 18px; }
  .opening-bottom { margin-top: 11px; }
  .game-thesis { font-size: 1.2rem; }
  .game-lead { margin-top: 8px; font-size: var(--type-compact); }
  .game-path { padding-top: 9px; }
  .game-path-heading { gap: 8px; }
  .game-path-intro { margin: 9px 0 11px; }
  .game-path-options { gap: 5px; }
  .game-path-option { gap: 6px; padding: 8px 6px; }
  .game-path-option b { font-size: var(--type-support); }
  .game-path-detail { gap: 11px; margin-top: 10px; padding: 9px 0; }
  .game-path-tools { align-items: flex-start; flex-direction: column; gap: 5px; margin-top: 9px; }
  .engine-note-copy { margin-top: 8px; }
  .game-lab { margin-top: 39px; }
  .lab-heading { align-items: start; flex-direction: column; gap: 8px; }
  .lab-heading h2 { font-size: clamp(1.5rem, 7vw, 2rem); }
  .rule-controls { align-items: start; flex-direction: column; gap: 10px; }
  .rule-buttons { width: 100%; }
  .rule-button { flex: 1; min-width: 0; }
  .board-frame { padding: 14px 10px 10px; }
  .play-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .play-cell { min-height: clamp(46px, 14vw, 56px); }
  .board-legend { gap: 8px 14px; }
  .board-legend > span:last-child { width: 100%; margin-left: 0; }
  .play-result { grid-template-columns: 1fr; gap: 13px; }
  .result-message { font-size: var(--type-compact); }
  .result-progress { justify-content: space-between; }
  .direction-section { gap: 26px; padding: 56px 0; }
  .section-intro h2, .production-heading h2 { font-size: clamp(1.65rem, 7.5vw, 2.1rem); }
  .section-intro > p:last-child, .production-heading > p:last-child { margin-top: 15px; font-size: var(--type-compact); }
  .direction-editorial { grid-template-columns: minmax(0, 1fr); row-gap: 25px; }
  .direction-item, .direction-product, .direction-prototype, .direction-collaboration { min-height: 0; margin-top: 0; padding: 14px 0 5px; }
  .direction-item h3 { margin-top: 20px; font-size: 1.3rem; }
  .direction-item p { font-size: var(--type-compact); }
  .margin-note { margin-left: 18%; }
  .production-section { gap: 28px; padding: 55px 0; }
  .production-rail { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 26px; }
  .production-rail::before { top: 11px; bottom: 11px; left: 7px; right: auto; width: 1px; height: auto; }
  .production-rail article, .production-rail article + article { padding: 0 0 22px; }
  .phase-no { position: absolute; left: -19px; top: 1px; width: 22px; height: 22px; margin: 0; font-size: .6875rem; }
  .production-rail h3 { font-size: 1.12rem; }
  .production-notes { grid-template-columns: 1fr; gap: 15px; margin-top: 13px; }
  .notes-title { grid-column: auto; }
  .game-contact { grid-template-columns: 1fr; gap: 21px; padding: 22px 0 40px; }
  .contact-signoff h2 { font-size: 1.65rem; }
  .contact-actions { grid-template-columns: 1fr; justify-items: start; gap: 13px; }
  .contact-actions nav { grid-column: auto; gap: 9px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rule-button, .game-path-option, .play-cell, .play-cell span { transition: none; }
  .play-cell.is-wrong { animation: none; }
}

/* Play studio: scoped to the game service page. */
.play-hero {padding-bottom:64px}.play-hero .game-breadcrumb{margin-bottom:30px}.play-heading{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:70px;margin-bottom:28px}.play-heading .kicker{margin:0 0 12px}.play-heading h1{font-size:clamp(40px,4vw,56px);line-height:1.35;margin:0;letter-spacing:-.025em}.play-thesis{font-size:clamp(22px,2.3vw,30px);line-height:1.5;color:var(--orange-text);font-weight:650;margin:12px 0 0}.play-introduction>p{font-size:16px;line-height:1.8;color:var(--muted);max-width:530px;margin:0 0 20px}.studio-score svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}.play-studio{--world-accent:var(--blue);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}.play-studio[data-mode=brand]{--world-accent:var(--orange)}.play-studio[data-mode=prototype]{--world-accent:var(--purple)}.studio-toolbar{padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}.studio-caption{font-size:15px;color:var(--muted)}.studio-modes{display:flex;gap:5px;flex-wrap:wrap}.studio-modes button{border:1px solid transparent;background:transparent;padding:9px 13px;min-height:44px;border-radius:9px;color:var(--muted);font-size:15px;cursor:pointer;display:flex;align-items:center;gap:8px}.studio-modes button span{font:11px var(--mono)}.studio-modes button[aria-pressed=true]{background:color-mix(in srgb,var(--world-accent) 12%,var(--paper));border-color:color-mix(in srgb,var(--world-accent) 45%,var(--line));color:var(--ink)}.play-world{position:relative;height:clamp(290px,28vw,390px);background:linear-gradient(130deg,color-mix(in srgb,var(--blue) 10%,var(--panel)),var(--panel) 60%);isolation:isolate}.world-art{width:100%;height:100%;position:absolute;inset:0;color:var(--world-accent)}.world-sun{fill:color-mix(in srgb,var(--yellow) 45%,var(--panel))}.far-land{fill:color-mix(in srgb,var(--blue) 10%,var(--panel))}.near-land{fill:color-mix(in srgb,var(--green) 20%,var(--panel))}.route-shadow{fill:none;stroke:var(--world-accent);stroke-opacity:.12;stroke-width:22;stroke-linecap:round}.world-route{fill:none;stroke:var(--world-accent);stroke-opacity:.5;stroke-width:2;stroke-dasharray:6 9}.world-islands{fill:color-mix(in srgb,var(--world-accent) 17%,var(--panel));stroke:var(--world-accent);stroke-opacity:.5}.scene-flora{color:color-mix(in srgb,var(--world-accent) 40%,var(--muted))}.world-label{position:absolute;left:26px;top:22px;font:22px var(--mono);color:var(--world-accent);line-height:1.5}.world-label span{font-size:11px;color:var(--muted);letter-spacing:.08em}.world-beacon{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:52px;height:64px;border:0;background:none;display:grid;place-content:center;gap:8px;color:var(--ink);cursor:pointer;z-index:2}.beacon-gem{display:block;width:18px;height:18px;background:var(--world-accent);transform:rotate(45deg);box-shadow:0 0 0 6px color-mix(in srgb,var(--world-accent) 12%,transparent);border:2px solid var(--panel);justify-self:center;transition:transform .2s,background .2s}.beacon-number{font:12px var(--mono);text-align:center}.world-beacon:hover .beacon-gem{transform:rotate(135deg) scale(1.15)}.world-beacon[aria-pressed=true] .beacon-gem{border-radius:50%;background:var(--orange);transform:rotate(0);box-shadow:0 0 0 5px color-mix(in srgb,var(--orange) 16%,transparent)}.world-avatar{position:absolute;left:12%;top:75%;z-index:3;transform:translate(-50%,-115%);width:44px;pointer-events:none;transition:left .45s ease,top .45s ease}.avatar-head{position:relative;height:29px;width:35px;margin:auto;border-radius:12px 12px 10px 10px;background:var(--orange);box-shadow:inset -5px -3px 0 #0002;display:flex;gap:8px;justify-content:center;align-items:center}.avatar-head i{width:4px;height:7px;background:#fff;border-radius:3px}.avatar-body{height:21px;width:26px;margin:-2px auto 0;background:var(--world-accent);border-radius:6px 6px 10px 10px;border:3px solid var(--panel)}.avatar-shadow{width:34px;height:7px;border-radius:50%;background:var(--line);margin:5px auto 0}.world-goal{position:absolute;left:89%;top:70%;font:10px var(--mono);display:grid;gap:9px;justify-items:center;color:var(--muted)}.world-goal i{width:35px;height:42px;border-radius:22px 22px 0 0;border:5px solid color-mix(in srgb,var(--world-accent) 60%,var(--panel));border-bottom:0}.play-studio.is-finished .world-goal i{border-color:var(--orange);box-shadow:0 0 25px color-mix(in srgb,var(--orange) 35%,transparent)}.studio-feedback{padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:22px;border-top:1px solid var(--line)}.studio-feedback>p{margin:0;font-size:15px;line-height:1.7;max-width:680px}.studio-score{display:flex;align-items:center;gap:16px;flex-shrink:0;font-size:14px;color:var(--muted)}.studio-score b{color:var(--world-accent);font:600 20px var(--mono)}.studio-score button{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);min-height:44px;padding:9px 12px;font-size:14px;cursor:pointer}.studio-footnote{display:flex;justify-content:space-between;gap:12px;margin-top:13px;color:var(--muted);font-size:14px;line-height:1.6}.game-gallery{padding:32px 0 72px}.gallery-heading{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:30px}.gallery-heading h2{font-size:clamp(28px,3vw,36px);line-height:1.4;margin:12px 0 0}.gallery-heading>p{font-size:16px;line-height:1.8;color:var(--muted);max-width:510px;margin:0}.concept-gallery{display:grid;grid-template-columns:1.15fr 1fr;gap:20px}.concept-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);display:grid;grid-template-columns:42% 58%;min-width:0}.concept-0{grid-row:span 2;display:flex;flex-direction:column}.concept-visual{position:relative;overflow:hidden;display:grid;place-items:center;min-height:200px;background:color-mix(in srgb,var(--blue) 12%,var(--paper))}.concept-0 .concept-visual{min-height:310px;flex:1}.concept-1 .concept-visual{background:color-mix(in srgb,var(--yellow) 25%,var(--paper))}.concept-2 .concept-visual{background:color-mix(in srgb,var(--purple) 12%,var(--paper))}.concept-copy{padding:26px}.concept-copy h3{font-size:22px;line-height:1.5;margin:12px 0}.concept-copy>p:last-child{font-size:15px;line-height:1.8;color:var(--muted);margin:0}.concept-disclaimer{position:absolute;bottom:13px;left:18px;font-size:14px;color:var(--muted)}.concept-orbit{position:relative;width:270px;height:260px;transform:rotate(-15deg)}.concept-orbit>i{position:absolute;border:1px solid var(--blue);border-radius:50%;inset:30px;transform:rotate(35deg) scaleY(.6)}.concept-orbit>i:nth-child(2){transform:rotate(95deg) scaleY(.6)}.concept-orbit>i:nth-child(3){transform:rotate(155deg) scaleY(.6)}.orbit-player{position:absolute;top:92px;left:104px;width:64px;height:64px;display:grid;place-items:center;border-radius:22px;background:var(--blue);color:#fff;font:600 37px var(--display);box-shadow:0 16px 30px #3459d933;transform:rotate(15deg)}.orbit-player>span{position:absolute;width:15px;height:15px;background:var(--green);border-radius:50%;right:-35px;top:-32px}.concept-orbit>b,.concept-orbit>em{position:absolute;font:11px var(--mono);color:var(--brand);transform:rotate(15deg)}.concept-orbit>b{left:8px;top:13px}.concept-orbit>em{right:-2px;bottom:21px}.concept-ticket{width:170px;padding:18px;background:var(--orange);color:#fff;transform:rotate(-9deg);box-shadow:9px 10px 0 color-mix(in srgb,var(--orange) 18%,transparent);border-radius:8px}.concept-ticket>span,.concept-ticket>em{font:10px var(--mono);display:block}.concept-ticket>b{display:block;font:700 28px/1.2 var(--display);margin:12px 0}.concept-ticket>i{display:block;border-top:1px dashed #fff8;margin:12px 0}.concept-stack{position:relative;width:150px;height:120px;margin-bottom:20px}.concept-stack i{position:absolute;inset:0;height:65px;display:grid;place-items:center;transform:skewY(-12deg);border:1px solid var(--purple);background:color-mix(in srgb,var(--purple) 17%,var(--panel));color:var(--ink);font:11px var(--mono);box-shadow:7px 9px 0 color-mix(in srgb,var(--purple) 20%,transparent)}.concept-stack i:nth-child(1){top:70px}.concept-stack i:nth-child(2){top:35px}.concept-stack i:nth-child(3){top:0;background:var(--panel)}.game-tools{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:24px 0 0;font-size:14px;color:var(--muted)}.game-tools .engine-list{display:flex;gap:7px;flex-wrap:wrap}.game-tools>p{flex-basis:100%;font-size:15px;line-height:1.8;margin:0}.play-hero button:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
@media(max-width:1000px){.play-heading{gap:32px}.studio-toolbar{align-items:flex-start;flex-direction:column}.concept-gallery{grid-template-columns:1fr 1fr}.concept-card{display:flex;flex-direction:column}.concept-0{grid-row:auto;grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.concept-0 .concept-visual{min-height:270px}.studio-feedback{align-items:flex-start;flex-direction:column}.studio-score{width:100%;justify-content:flex-end}.world-label{font-size:18px}}
@media(max-width:650px){.play-hero{padding-bottom:32px}.play-hero .game-breadcrumb{margin-bottom:24px}.play-heading{grid-template-columns:1fr;gap:16px;margin-bottom:24px}.play-heading h1{font-size:clamp(30px,8.5vw,36px);line-height:1.4}.play-thesis{font-size:22px;margin-top:10px}.play-introduction>p{font-size:15px;margin-bottom:16px}.studio-toolbar{padding:15px 14px;gap:12px}.studio-caption{font-size:14px}.studio-modes{width:100%;gap:4px}.studio-modes button{flex:1;flex-direction:column;gap:3px;padding:7px 4px;font-size:14px}.play-world{height:300px}.world-label{left:16px;top:17px;font-size:16px}.world-label span{font-size:10px}.world-beacon{width:44px}.beacon-number{font-size:11px}.world-goal{left:83%;top:82%}.studio-feedback{padding:16px 14px;gap:12px}.studio-score{gap:12px;flex-wrap:wrap;justify-content:flex-start}.studio-score button{margin-left:auto}.studio-score b{font-size:18px}.studio-footnote{flex-direction:column;font-size:14px;gap:6px}.gallery-heading{grid-template-columns:1fr;gap:14px;margin-bottom:22px}.gallery-heading h2{font-size:28px}.gallery-heading>p{font-size:15px}.game-gallery{padding:28px 0 44px}.concept-gallery{grid-template-columns:1fr;gap:18px}.concept-0{grid-column:auto;display:flex}.concept-visual,.concept-0 .concept-visual{min-height:240px}.concept-copy{padding:22px}.concept-copy h3{font-size:21px}.concept-orbit{transform:rotate(-15deg) scale(.9)}.concept-1 .concept-visual,.concept-2 .concept-visual{min-height:220px}.game-tools{padding-top:20px}}
@media(prefers-reduced-motion:reduce){.world-avatar,.beacon-gem{transition:none}}
.play-studio[data-mode="brand"] .beacon-gem {border-radius:50%;transform:none;background:var(--orange)} .play-studio[data-mode="brand"] .world-sun {fill:color-mix(in srgb,var(--orange) 22%,var(--panel))} .world-beacon.is-next .beacon-gem {box-shadow:0 0 0 8px color-mix(in srgb,var(--purple) 20%,transparent)} .play-studio.is-finished .world-goal::after {content:"COMPLETE";position:absolute;top:-30px;padding:8px 12px;background:var(--orange);color:#fff;border-radius:20px;font:11px var(--mono)}
@media(max-width:650px){.play-heading .kicker{font-size:11px;letter-spacing:.04em;line-height:1.7}}

/* Keep the introduction and playable scene inside one continuous panel. */
.play-shell {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
.play-heading {
  position:relative;
  display:block;
  margin:0;
  padding:36px 42px 28px;
}
.play-heading h1 { font-size:clamp(40px,3.8vw,52px); line-height:1.4; padding-right:280px; }
.play-heading .kicker { margin-bottom:12px; }
.play-thesis { margin:8px 0 0; font-size:22px; line-height:1.6; color:var(--orange-text); }
.play-introduction>p { max-width:760px; margin:14px 0 0; font-size:16px; line-height:1.8; }

.play-studio { border:0; border-radius:0; border-top:1px solid var(--line); }
.studio-toolbar { padding:14px 42px; }
.play-world { height:330px; background:linear-gradient(130deg,color-mix(in srgb,var(--blue) 8%,var(--panel)),var(--panel) 75%); }
.world-art>rect { opacity:.35; }
.world-sun { opacity:.65; }
.far-land { fill:color-mix(in srgb,var(--blue) 7%,var(--panel)); }
.near-land { fill:color-mix(in srgb,var(--green) 12%,var(--panel)); }
.world-islands { stroke:none; }
.platform-top { fill:color-mix(in srgb,var(--world-accent) 12%,var(--panel)); stroke:color-mix(in srgb,var(--world-accent) 40%,var(--line)); stroke-width:1.5; }
.platform-side { fill:color-mix(in srgb,var(--world-accent) 25%,var(--panel)); }
.platform-mark { fill:none; stroke:var(--world-accent); stroke-width:1; stroke-opacity:.25; }
.studio-feedback { padding:18px 42px; border-bottom:1px solid var(--line); }
.studio-footnote { margin:0; padding:14px 42px; background:color-mix(in srgb,var(--blue) 3%,var(--panel)); }
@media(max-width:1100px) {
  .play-heading h1 { padding-right:0; }

  .studio-toolbar { flex-direction:column; align-items:flex-start; }
}
@media(max-width:650px) {
  .play-heading { padding:24px 20px; }
  .play-heading h1 { font-size:clamp(30px,8.5vw,36px); }
  .play-thesis { font-size:20px; }
  .play-introduction>p { font-size:15px; margin-top:12px; }
  .studio-toolbar { padding:15px 16px; }
  .play-world { height:290px; }
  .studio-feedback { padding:16px; }
  .studio-footnote { padding:14px 16px; }
}