/* 11 · Open — meio-dia. O jogo da comunidade em loop na luz do Ato III (sol alto, céu azul); um véu navy
   segura só a coluna de texto (as 7 colunas da esquerda) e o jogo respira à direita. A equação é um .card do
   núcleo; dentro dele tudo é medido pela largura do cartão (cqi). */
#open .opn-stage { background: #17394b; }
#open .opn-bg { position: absolute; inset: 0; will-change: transform; }
#open .opn-film { object-position: 50% 50%; background: #2a4f66; }

/* luz: um leve assentamento navy no quadro todo (o filme é claro) — sem virar fim de tarde */
#open .opn-grade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(16, 38, 51, .1) 0%, rgba(16, 38, 51, .14) 100%); }
/* véu: navy do lado do texto (.scrim--l do núcleo, esticado até o fim da coluna de texto) */
#open .opn-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 24, 34, .94) 0%, rgba(10, 24, 34, .88) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .38), rgba(16, 38, 51, .62) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .58), rgba(16, 38, 51, .14) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .76), rgba(16, 38, 51, 0) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .88)),
    linear-gradient(0deg, rgba(10, 24, 34, .5) 0%, rgba(10, 24, 34, 0) 28%); }
#open .scrim--t { z-index: 1; }

#open .opn-wrap { position: relative; z-index: 3; }
#open .opn-lay { height: 100%; align-content: center; padding-top: calc(var(--hud-h) + clamp(10px, 2.6vh, 32px)); padding-bottom: clamp(44px, 7vh, 84px); }
#open .opn-main { grid-column: 1 / 8; display: grid; gap: clamp(18px, 3.2vh, 38px); container-type: inline-size; }
#open .opn-head { gap: clamp(10px, 1.6vh, 18px); }
/* o nome da frente no mesmo dialeto do 10 Elite: a palavra em display larga, no MESMO tamanho do "Elite" (lá a
   letra é 25,5% da largura de 4 colunas da grade, com teto de 29%; aqui a coluna é de 7 — --w4 refaz as 4) */
#open .opn-title { --w4: calc(100cqi * 4 / 7 - var(--gap) * 3 / 7);
  font-size: min(calc(var(--w4) * .255 * var(--ts, 1)), calc(var(--w4) * .29)); font-stretch: 125%; line-height: .96; letter-spacing: -.02em; color: var(--sand); padding-top: 0; text-shadow: none; white-space: nowrap; text-wrap: nowrap;
  filter: drop-shadow(0 2px 3px rgba(10, 24, 34, .45)) drop-shadow(0 8px 26px rgba(10, 24, 34, .5)); }
#open .opn-sub { font-size: calc((clamp(19px, 1.5vw, 28px)) * var(--ts, 1)); max-width: 26ch; text-wrap: balance; } /* a frase do slide, como o subtítulo do Elite */
#open .opn-lede { max-width: 40ch; }

/* ---------- a equação ---------- */
#open .opn-eq { container-type: inline-size; display: grid; gap: clamp(12px, 2vh, 20px); padding: clamp(18px, 2.2vw, 34px) clamp(20px, 2.4vw, 38px); background: rgba(14, 28, 38, .82); }
#open .opn-eq-row { display: grid; grid-template-columns: auto auto auto auto; grid-template-rows: auto auto; justify-content: start; align-items: center; column-gap: 3.2cqi; row-gap: 1.4cqi; }
#open .opn-bag { grid-area: 1 / 1; width: 13cqi; max-width: none; height: auto; overflow: visible; align-self: end; margin-bottom: .6cqi; }
#open .opn-bag__body { fill: rgba(244, 239, 229, .08); stroke: var(--sand); stroke-width: 3; stroke-linejoin: round; }
#open .opn-bag__band { fill: var(--clay); }
#open .opn-bag__fold { fill: none; stroke: rgba(244, 239, 229, .45); stroke-width: 2.4; stroke-linecap: round; }
#open .opn-bag__food rect, #open .opn-bag__food ellipse, #open .opn-bag__food > path:last-child { fill: var(--navy-2); stroke: var(--sun); stroke-width: 2.6; stroke-linejoin: round; }
#open .opn-bag__food > path:nth-child(2) { fill: none; stroke: var(--sun); stroke-width: 2.2; stroke-linecap: round; opacity: .8; }
#open .opn-kg { grid-area: 1 / 2; display: flex; align-items: baseline; gap: .14em; color: var(--sun); line-height: 1; }
#open .opn-kg-n { font-size: min(calc(16cqi * var(--ts, 1)), 17.6cqi); font-stretch: 125%; line-height: .9; }
#open .opn-kg-u { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: none; /* símbolo do SI: kg minúsculo */ font-size: min(calc(6.6cqi * var(--ts, 1)), 7.3cqi); letter-spacing: -.01em; }
#open .opn-sign { grid-area: 1 / 3; display: grid; gap: 1.3cqi; width: 6cqi; }
#open .opn-sign i { display: block; height: max(5px, 1cqi); border-radius: 99px; background: var(--sun); transform-origin: 0 50%; box-shadow: 0 0 14px rgba(242, 151, 109, .35); }
#open .opn-in { grid-area: 1 / 4; justify-self: start; font-size: min(calc(3.8cqi * var(--ts, 1)), 4.2cqi); padding: .52em 1.1em .46em; box-shadow: 0 8px 26px rgba(242, 151, 109, .28); }
#open .opn-cap { font-family: var(--f-display); font-stretch: 108%; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; line-height: 1.3; font-size: calc((clamp(15px, .42vw + 10px, 18px)) * var(--ts, 1)); color: var(--text-2); } /* o fato-chave da equação: ≥ 16,5 px em 1280 */
#open .opn-cap--kg { grid-area: 2 / 1 / 3 / 3; }
#open .opn-cap--in { grid-area: 2 / 4; padding-left: 1.1em; }

#open .opn-close { max-width: 44ch; color: var(--text); }

/* crédito sobre filme: plaqueta própria (text-shadow não segura sobre a arquibancada clara) */
#open .opn-credit { position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(16px, 3vh, 28px); padding: 4px 10px; border-radius: 999px; background: rgba(10, 24, 34, .62); color: var(--sand); text-shadow: none; }

/* tela baixa (1280 × 720, 1366 × 768): a pilha aperta para não encostar no HUD */
@media (orientation: landscape) and (max-height: 800px) {
  #open .opn-lay { padding-top: calc(var(--hud-h) + 14px); padding-bottom: 40px; }
  #open .opn-main { gap: 14px; }
  #open .opn-head { gap: 8px; }
  #open .opn-eq { gap: 8px; padding: 14px 22px 16px; }
  #open .opn-bag { width: 11cqi; }
  #open .opn-kg-n { font-size: min(calc(13.5cqi * var(--ts, 1)), 14.9cqi); }
  #open .opn-kg-u { font-size: min(calc(5.8cqi * var(--ts, 1)), 6.4cqi); }
  #open .opn-in { font-size: min(calc(3.4cqi * var(--ts, 1)), 3.75cqi); }
}

/* tela em pé: o jogo em cima, a pilha de texto embaixo */
@media (orientation: portrait), (max-aspect-ratio: 5/4) {
  #open .opn-film { object-position: 97% 50%; } /* a dupla em jogo e o público entram no quadro; o poste sai pela esquerda */
  #open .opn-veil { transform-origin: 50% 100%; } /* o JS encolhe o véu para o pé na 1ª parada */
  #open .opn-lay { align-content: end; }
  #open .opn-main { grid-column: 1 / -1; }
  #open .opn-title { --w4: calc(100cqi * 7 / 12 - var(--gap) * 5 / 12); } /* em pé o "Elite" ocupa 7 colunas */
  #open .opn-veil { background: linear-gradient(0deg, rgba(10, 24, 34, .96) 0%, rgba(10, 24, 34, .9) 52%, rgba(10, 24, 34, .55) 66%, rgba(10, 24, 34, .08) 78%, rgba(10, 24, 34, 0) 86%); }
  #open .opn-eq { padding: clamp(20px, 3vw, 34px); }
}