/* THE LEAD OPENERS — two doors on CH·00 (js/openers.js), every screen size. */
.openers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.4vw, 16px); margin: 2px 0 4px; }
.opener {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  min-height: clamp(104px, 17vh, 180px); padding: 12px 14px; overflow: hidden; isolation: isolate;
  border-radius: 12px; text-decoration: none; color: var(--ink);
  border: 1px solid rgba(255, 176, 32, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 12px 30px -14px rgba(0, 0, 0, 0.9), 0 0 22px -6px rgba(255, 176, 32, 0.35);
  transition: transform var(--dur-fast) var(--ease-out-expo), box-shadow var(--dur-fast);
}
.opener__art { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; }
.opener--dragon .opener__art { background-position: center 30%; }
.opener::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 6, 4, 0.1) 0%, rgba(10, 6, 4, 0.78) 45%, rgba(10, 6, 4, 0.95) 100%); }
.opener__k { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.24em; color: var(--neon-cyan); }
.opener__t { font-family: var(--font-display); font-size: clamp(1.05rem, 0.8rem + 1.1vw, 1.6rem); font-weight: 700; letter-spacing: 0.06em; line-height: 1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9); }
.opener__s { font-size: 0.74rem; line-height: 1.35; color: var(--ink-dim); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); }
.opener__go { align-self: flex-start; margin-top: 4px; padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em;
  color: #1a1002; background: linear-gradient(180deg, #ffd08a, #ffb020); }
.opener:hover, .opener:focus-visible { transform: translateY(-2px); outline: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 16px 34px -14px rgba(0, 0, 0, 0.9), 0 0 30px -4px rgba(255, 176, 32, 0.6); }

/* the doors lead; the rundown keeps its rising signal and waits for the rest.
   A short tube scrolls the report rather than spilling over its own badges. */
.report--openers .report__row ~ .report__row { display: none; }
.report--openers { justify-content: safe center; overflow-y: auto; scrollbar-width: none; bottom: 40px; padding-bottom: 10px; }

@media (max-width: 700px) {
  .opener { min-height: 150px; padding: 10px 11px; }
  .opener__s { font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) { .opener { transition: none; } .opener:hover { transform: none; } }