/* Interface 9 shared Main / Stage / Battle visual layer.
   Layout, scene ownership, game content, and interaction geometry stay with
   the existing shared frame and per-game content slots. */
@layer wp-frame-contract {
html :is(body[data-wp-frame="2"], body [data-wp-frame="2"]) {
  --wp-i9-outline: rgba(180, 232, 219, 0.68);
  --wp-i9-glint: rgba(255, 255, 255, 0.13);
  --wp-i9-focus: #9ff3d6;
  --wp-i9-radius: 12px;
}

html.wp-frame-main-flow:has(body.wp-frame-main-active:is([data-wp-interface-version="9"], [data-wp-interface-candidate="9"])) {
  background-color: transparent !important;
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) {
  margin: 0 !important;
}

html :is(body[data-wp-frame="2"], body [data-wp-frame="2"]) .wp-frame-header {
  background-image: linear-gradient(135deg, var(--wp-i9-glint), transparent 54%), var(--wp-ui-header-image) !important;
  border-radius: var(--wp-i9-radius) !important;
  box-shadow: inset 0 -3px 0 var(--wp-ui-gold), 0 4px 0 var(--wp-ui-shadow) !important;
}

html :is(body[data-wp-frame="2"], body [data-wp-frame="2"]) :is(.wp-frame-return, .wp-frame-settings) {
  border-radius: 12px !important;
  transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease !important;
}

html :is(body[data-wp-frame="2"], body [data-wp-frame="2"]) :is(.wp-frame-return, .wp-frame-settings):hover {
  filter: brightness(1.08) saturate(1.08) !important;
  transform: translateY(-1px);
}

html :is(body[data-wp-frame="2"], body [data-wp-frame="2"]) :is(.wp-frame-return, .wp-frame-settings):focus-visible,
html :is(body[data-wp-frame="2"], body [data-wp-frame="2"]) [data-wp-frame-action]:focus-visible,
html :is(body[data-wp-frame="2"], body [data-wp-frame="2"]) [data-wp-primary-action]:focus-visible {
  outline: 3px solid var(--wp-i9-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(8, 28, 36, 0.78) !important;
}

html :is(body[data-wp-frame="2"], body [data-wp-frame="2"]) [data-wp-frame-poster] {
  border: 2px solid var(--wp-i9-outline) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 0 var(--wp-ui-shadow), 0 14px 28px rgba(0, 0, 0, 0.25) !important;
}

html :is(body[data-wp-frame="2"], body [data-wp-frame="2"]) [data-wp-frame-content="stage"]
  :is(.stage-card, .mission-card, .region-card, .route-card, .day-card, .zone-card, .expedition-card, .zone-node) {
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 var(--wp-i9-glint), 0 4px 0 var(--wp-ui-shadow) !important;
  transition: filter 140ms ease, box-shadow 140ms ease !important;
}

html :is(body[data-wp-frame="2"], body [data-wp-frame="2"]) [data-wp-frame-content="stage"]
  :is(.stage-card, .mission-card, .region-card, .route-card, .day-card, .zone-card, .expedition-card, .zone-node):is([aria-current="true"], [aria-selected="true"], .selected, .is-selected) {
  border-color: var(--wp-ui-gold) !important;
  box-shadow: inset 0 0 0 2px var(--wp-ui-gold), 0 4px 0 var(--wp-ui-shadow) !important;
}

html :is(body[data-wp-frame="2"], body [data-wp-frame="2"]) [data-wp-frame-content="battle"] [data-wp-logical-battle-canvas] {
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 var(--wp-i9-glint), 0 6px 0 var(--wp-ui-shadow) !important;
}

html :is(body[data-wp-frame="2"], body [data-wp-frame="2"]) [data-wp-frame-action="tab"] {
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 var(--wp-i9-glint) !important;
}
}

/* I9 Main Guides use the same Block Arcade surface and one continuous reading panel. */
html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) .game-page-info {
  box-sizing: border-box;
  width: min(var(--wp-main-width, 920px), calc(100% - 2 * var(--wp-main-gutter, 12px)));
  max-width: var(--wp-main-width, 920px);
  margin: 16px auto calc(40px + env(safe-area-inset-bottom));
  padding: 12px;
  border: 2px solid var(--wp-ui-line);
  border-radius: var(--wp-ui-radius);
  background: var(--wp-ui-surface);
  color: var(--wp-ui-text);
  box-shadow: 0 5px 0 var(--wp-ui-shadow);
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"])
  [data-wp-frame-content="main"] > .game-page-info {
  grid-column: 1 / -1;
  justify-self: stretch;
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) .game-page-info .game-info-hero {
  border-radius: var(--wp-ui-radius) var(--wp-ui-radius) 0 0;
  background: var(--wp-ui-header-image);
  color: var(--wp-ui-text);
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) .game-page-info :is(.game-info-kicker, h2, h3, dt) {
  color: var(--wp-ui-text);
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) .game-page-info :is(p, li, dd, .game-info-fact > span, .game-info-related-copy span) {
  color: var(--wp-ui-muted);
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) .game-page-info .game-info-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) .game-page-info :is(.game-info-fact, .game-info-related-card) {
  border-color: var(--wp-ui-line);
  border-radius: var(--wp-ui-radius);
  background: var(--wp-ui-background);
  color: var(--wp-ui-text);
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) .game-page-info .game-info-fact strong,
html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) .game-page-info .game-info-related-copy strong {
  color: var(--wp-ui-text);
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) .game-page-info .game-info-tags > span {
  border: 1px solid var(--wp-ui-tag-border);
  border-radius: var(--wp-ui-radius);
  background: var(--wp-ui-tag-background);
  color: var(--wp-ui-tag-text);
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) .game-page-info .game-info-sections {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 0 0 var(--wp-ui-radius) var(--wp-ui-radius);
  background: var(--wp-ui-surface);
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) .game-page-info .game-info-section {
  min-width: 0;
  padding: 14px 12px;
  border: 0;
  border-top: 1px solid var(--wp-ui-line);
  border-radius: 0;
  background: transparent;
  color: var(--wp-ui-text);
  box-shadow: none;
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) .game-page-info .game-info-section :is(h3, dt) {
  color: var(--wp-ui-text);
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) .game-page-info .game-info-section :is(p, li, dd) {
  color: var(--wp-ui-muted);
}

/* Opt-in I9 Battle result cards retain readable physical typography inside a
   uniformly scaled logical Canvas. Shared action buttons already use this
   inverse scale; keep the result card and its copy on the same physical basis. */
html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"])
  [data-wp-frame-logical-actions="battle"] [data-wp-frame-result-card] {
  box-sizing: border-box;
  width: min(calc(460px * var(--wp-battle-canvas-inverse-scale, 1)), 100%);
  max-width: none;
  padding: calc(28px * var(--wp-battle-canvas-inverse-scale, 1));
  border-radius: calc(24px * var(--wp-battle-canvas-inverse-scale, 1));
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"])
  [data-wp-frame-logical-actions="battle"] [data-wp-frame-result-card] h2 {
  font-size: calc(32px * var(--wp-battle-canvas-inverse-scale, 1));
  margin-bottom: calc(9px * var(--wp-battle-canvas-inverse-scale, 1));
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"])
  [data-wp-frame-logical-actions="battle"] [data-wp-frame-result-card] p {
  font-size: calc(16px * var(--wp-battle-canvas-inverse-scale, 1));
  line-height: 1.55;
  margin-bottom: calc(20px * var(--wp-battle-canvas-inverse-scale, 1));
}

html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"])
  [data-wp-frame-logical-actions="battle"] [data-wp-frame-result-card] .logic-result-actions {
  gap: calc(8px * var(--wp-battle-canvas-inverse-scale, 1));
}

@media (min-width: 721px) {
  html body:is([data-wp-interface-version="9"],[data-wp-interface-candidate="9"]) .game-page-info .game-info-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html :is(body[data-wp-frame="2"], body [data-wp-frame="2"]) :is(.wp-frame-return, .wp-frame-settings, .stage-card, .mission-card, .region-card, .route-card, .day-card, .zone-card, .expedition-card, .zone-node) {
    transition: none !important;
  }
}