.project-scene-card {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.scene-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(340px, 1fr);
  min-height: calc(100svh - (var(--section-pad) * 2) - 2px);
}

.scene-left {
  display: grid;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-right: 1px solid var(--line-strong);
}

.scene-right {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: minmax(150px, 0.54fr) minmax(0, 1.46fr);
}

.scene-header {
  position: relative;
  padding: clamp(1rem, 2vw, 2.25rem);
  border-bottom: 1px solid var(--line-strong);
  overflow: hidden;
}
.scene-header::after {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(5rem, 10vw, 12rem);
  height: 0.55rem;
  background: repeating-linear-gradient(135deg, var(--accent) 0 9px, transparent 9px 16px);
  content: "";
}
.scene-header h2 { max-width: 16ch; margin-bottom: 0.7rem; }
.scene-title-pair { display: flex; flex-wrap: wrap; gap: 0 0.22em; }
.scene-title-pair > span { white-space: nowrap; }
.scene-meta { margin-bottom: 0.5rem; color: var(--accent); font-weight: 800; }
.scene-summary { max-width: 68ch; margin-bottom: 0; font-size: clamp(1rem, 1.25vw, 1.22rem); }

.scene-info { display: grid; min-height: 0; grid-template-columns: 1.2fr 0.8fr; grid-template-rows: auto minmax(0, 1fr); }
.scene-info-block { position: relative; min-width: 0; padding: clamp(1rem, 1.5vw, 1.6rem); }
.scene-info-block h3 { margin-bottom: 0.7rem; }
.scene-info-block h3::before,
.scene-results h3::before,
.build-skills-title::before {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  margin-right: 0.65rem;
  background: var(--accent);
  content: "";
}
.scene-role { grid-column: 1 / -1; border-bottom: 1px solid var(--line-strong); }
.scene-info-block:not(.scene-role):nth-child(2) { border-right: 1px solid var(--line-strong); }
.scene-role-title { margin-bottom: 0.45rem; font-family: var(--mono); font-weight: 800; }
.scene-role p:last-child { max-width: 82ch; margin-bottom: 0; }
.scene-context, .scene-proof { color: var(--subtle); font-size: 0.88rem; }

.scene-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.scene-tags span {
  padding: 0.52rem 0.65rem;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 82%, var(--accent));
  font-family: var(--mono);
  font-size: 0.78rem;
}

.scene-results {
  position: relative;
  padding: clamp(1rem, 1.6vw, 1.75rem);
  border-top: 1px solid var(--line-strong);
  background: var(--results-bg, var(--ink));
  color: var(--results-text, var(--cream));
}
.scene-results h3 { margin-bottom: 0.8rem; }
.scene-primary-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.5vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.scene-primary-metrics li { position: relative; padding-top: 0.55rem; border-top: 1px solid color-mix(in srgb, currentColor 45%, transparent); }
.scene-primary-metrics strong {
  display: block;
  color: var(--metric, var(--cream));
  font-family: var(--display);
  font-size: clamp(2rem, 3.8vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.scene-primary-metrics span { display: block; margin-top: 0.35rem; font-family: var(--mono); font-size: 0.78rem; }
.scene-secondary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.scene-secondary-metrics li { padding-top: 0.55rem; border-top: 1px solid color-mix(in srgb, currentColor 42%, transparent); }
.scene-secondary-metrics strong { display: block; font-family: var(--display); font-size: 1.35rem; }
.scene-secondary-metrics span { display: block; font-family: var(--mono); font-size: 0.72rem; }

.visual-placeholder,
.build-portrait,
.about-portrait {
  position: relative;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, transparent 0 61%, var(--accent) 61% 74%, transparent 74%),
    linear-gradient(45deg, transparent 0 44%, color-mix(in srgb, var(--accent) 25%, transparent) 44% 56%, transparent 56%),
    var(--visual-bg, #252823);
  color: var(--cream);
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
}
.visual-placeholder::before,
.build-portrait::before,
.about-portrait::before {
  position: absolute;
  inset: 1.15rem;
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  clip-path: polygon(0 0, 28px 0, 28px 1px, 1px 1px, 1px 28px, 0 28px, 0 100%, calc(100% - 28px) 100%, calc(100% - 28px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 28px), 100% calc(100% - 28px), 100% 0);
  content: "";
}
.scene-visual { min-height: 170px; border-bottom: 1px solid var(--line-strong); font-size: 0.75rem; }

.build-card { display: grid; min-width: 0; grid-template-rows: auto minmax(150px, 1fr) auto; background: var(--build-bg, var(--surface)); }
.build-card-header { display: grid; grid-template-columns: 0.58fr 1.42fr; border-bottom: 1px solid var(--line-strong); }
.build-card-header > div { min-width: 0; padding: 0.8rem 1rem; }
.build-card-header > div:first-child { display: grid; align-content: center; background: var(--accent); color: var(--accent-contrast); }
.build-card-header > div + div { border-left: 1px solid var(--line-strong); }
.build-label { display: block; margin-bottom: 0.2rem; color: var(--subtle); font-size: 0.66rem; }
.build-level { font-family: var(--display); font-size: clamp(1.5rem, 2.5vw, 2.5rem); line-height: 1; }
.build-value { display: block; font-size: 0.95rem; line-height: 1.15; text-transform: uppercase; }
.build-progress-path { display: block; margin-top: 0.3rem; color: var(--subtle); font-size: 0.62rem; }
.build-portrait { min-height: 150px; padding: 1rem; border-bottom: 1px solid var(--line-strong); }
.build-portrait strong { position: relative; font-family: var(--display); font-size: 1rem; }
.build-portrait small { position: relative; display: block; margin-top: 0.35rem; color: color-mix(in srgb, var(--cream) 65%, transparent); font-size: 0.68rem; }
.build-skills { padding: 0.85rem 1rem; }
.build-skills-title { margin-bottom: 0.7rem; font-size: 0.76rem; }
.build-skill-group + .build-skill-group { margin-top: 0.75rem; }
.build-skill-group-title { margin-bottom: 0.42rem; color: var(--subtle); font-size: 0.68rem; }
.build-existing-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.28rem; }
.build-existing-skills span {
  min-width: 0;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 84%, var(--accent));
  color: var(--subtle);
  font-family: var(--mono);
  font-size: 0.61rem;
  line-height: 1.2;
  text-transform: uppercase;
}
.build-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 1.25rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.2;
  text-transform: uppercase;
}
.build-skill-row.is-new { padding-left: 0.5rem; border-left: 3px solid var(--accent); }
.build-skill-row i { display: block; height: 8px; border: 1px solid var(--line-strong); background: var(--surface); }
.build-skill-row i b { display: block; width: var(--fill); height: 100%; background: var(--accent); }
.build-skill-row > strong { color: var(--accent); text-align: right; }

.level-up-control {
  position: absolute;
  right: calc((var(--progression-control) * -1) - 0.75rem);
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--progression-control);
  height: clamp(220px, 48vh, 450px);
  background: var(--accent);
  border: 1px solid var(--line-strong);
  color: var(--accent-contrast);
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: filter 160ms ease, transform 160ms ease;
}
.level-up-control span { white-space: nowrap; transform: rotate(-90deg); }
.level-up-control:hover { filter: brightness(1.07); transform: translateY(-8px); }

.war-flow,
.swarms-flow { display: flex; align-items: center; gap: 0.35rem; }
.war-flow span,
.swarms-flow span,
.retention-loop .loop-step,
.ecosystem-node,
.poker-loop .loop-step {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 78%, var(--accent));
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}
.war-flow span { flex: 1; }
.war-flow i,
.swarms-flow i,
.retention-loop i,
.ecosystem-arrow { color: var(--accent); font-family: var(--mono); font-style: normal; font-weight: 800; }

.retention-loop,
.ecosystem-map,
.poker-loop { display: grid; align-items: center; gap: 0.25rem; font-family: var(--mono); }
.retention-loop { grid-template-columns: repeat(7, minmax(0, auto)); grid-template-rows: auto 1.2rem auto; }
.loop-signup { grid-column: 1; grid-row: 1; }.loop-entry-arrow { grid-column: 2; grid-row: 1; }.loop-teamup { grid-column: 3; grid-row: 1; }.loop-daily-arrow { grid-column: 4; grid-row: 1; }.loop-daily { grid-column: 5; grid-row: 1; }.loop-team-arrow { grid-column: 6; grid-row: 1; }.loop-weekend { grid-column: 7; grid-row: 1; }.loop-down { grid-column: 7; grid-row: 2; }.loop-rewards { grid-column: 7; grid-row: 3; }.loop-back { grid-column: 6; grid-row: 3; }.loop-return { grid-column: 5; grid-row: 3; }.loop-up { grid-column: 5; grid-row: 2; }

.ecosystem-map { grid-template-columns: 1.1fr auto 1fr auto 1fr auto 0.9fr auto 0.8fr; grid-template-rows: auto 1rem auto; }
.ecosystem-hub { grid-column: 1; grid-row: 1; }.ecosystem-arrow-1 { grid-column: 2; grid-row: 1; }.ecosystem-missions { grid-column: 3; grid-row: 1; }.ecosystem-arrow-2 { grid-column: 4; grid-row: 1; }.ecosystem-arg { grid-column: 5; grid-row: 1; }.ecosystem-arrow-3 { grid-column: 6; grid-row: 1; }.ecosystem-rewards { grid-column: 7; grid-row: 1; }.ecosystem-arrow-4 { grid-column: 8; grid-row: 1; }.ecosystem-vk { grid-column: 9; grid-row: 1; }.ecosystem-down-missions { grid-column: 3; grid-row: 2; }.ecosystem-mini-games { grid-column: 3; grid-row: 3; }.ecosystem-down-arg { grid-column: 5; grid-row: 2; }.ecosystem-chatbots { grid-column: 5; grid-row: 3; }

.poker-loop { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; grid-template-rows: auto 1.1rem auto; }
.poker-season { grid-column: 1; grid-row: 1; }.poker-forward-1 { grid-column: 2; grid-row: 1; }.poker-tournaments { grid-column: 3; grid-row: 1; }.poker-forward-2 { grid-column: 4; grid-row: 1; }.poker-points { grid-column: 5; grid-row: 1; }.poker-forward-3 { grid-column: 6; grid-row: 1; }.poker-levels { grid-column: 7; grid-row: 1; }.poker-down { grid-column: 7; grid-row: 2; }.poker-instant-rewards { grid-column: 7; grid-row: 3; }.poker-back-1 { grid-column: 4 / 7; grid-row: 3; }.poker-season-ends { grid-column: 3; grid-row: 3; }.poker-back-2 { grid-column: 2; grid-row: 3; }.poker-prize-lotteries { grid-column: 1; grid-row: 3; }.poker-up { grid-column: 1; grid-row: 2; }
.poker-connector { position: relative; height: 1px; background: var(--accent); }
.poker-connector--vertical { width: 1px; height: 100%; justify-self: center; }
.product-hypothesis { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }

@media (max-width: 1180px) {
  .scene-layout { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.9fr); }
  .scene-title-pair > span { white-space: normal; }
  .scene-header h2 { font-size: clamp(2.1rem, 4vw, 4rem); }
  .build-existing-skills { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .scene-layout { display: block; min-height: auto; }
  .scene-left { border-right: 0; }
  .scene-right { grid-template-rows: minmax(180px, 32vh) auto; border-top: 1px solid var(--line-strong); }
  .level-up-control { position: static; width: 100%; height: auto; min-height: 4.25rem; border-width: 1px 0 0; }
  .level-up-control span { transform: none; }
  .level-up-control:hover { transform: none; }
}

@media (max-width: 620px) {
  .scene-info { grid-template-columns: 1fr; grid-template-rows: auto; }
  .scene-role { grid-column: 1; }
  .scene-info-block:not(.scene-role):nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .scene-primary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-secondary-metrics { grid-template-columns: 1fr; }
  .war-flow, .swarms-flow { align-items: stretch; flex-direction: column; }
  .war-flow i, .swarms-flow i { transform: rotate(90deg); }
  .retention-loop, .ecosystem-map, .poker-loop { display: flex; flex-direction: column; align-items: stretch; }
  .retention-loop i, .ecosystem-arrow { align-self: center; transform: rotate(90deg); }
  .poker-connector { align-self: center; width: 1px; height: 1.1rem; }
  .build-existing-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}