/* ===== MODULE 15.55 — PREMIUM OPENING FLOW ===== */
/* Opening UI polish only. VOID 3D ownership remains in void-fx.css. */

@layer opening {
  .opening-view,
  .opening-shell,
  .opening-screen,
  .opening-stage {
    position: relative;
    isolation: isolate;
  }

  .opening-view::before,
  .opening-shell::before,
  .opening-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 22%, rgba(123, 43, 255, .2), transparent 38%),
      radial-gradient(circle at 82% 16%, rgba(0, 243, 255, .08), transparent 26%),
      linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 28%);
    opacity: .9;
  }

  .pack-opening-panel,
  .opening-panel,
  .booster-panel,
  .pack-panel {
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(185, 124, 255, .16);
    border-radius: var(--radius-panel, 28px);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .018)),
      rgba(8, 4, 18, .76);
    box-shadow:
      0 28px 90px rgba(0, 0, 0, .36),
      0 0 44px rgba(123, 43, 255, .12),
      inset 0 1px 0 rgba(255, 255, 255, .045);
    backdrop-filter: blur(var(--blur-panel, 18px));
  }

  .pack-opening-panel::before,
  .opening-panel::before,
  .booster-panel::before,
  .pack-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 0%, rgba(185, 124, 255, .16), transparent 44%),
      linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 30%);
    opacity: .78;
  }

  .opening-title,
  .pack-title,
  .booster-title {
    font-family: var(--font-title, serif);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--void-text, #f3ecff);
    text-shadow:
      0 0 28px rgba(185, 124, 255, .24),
      0 0 54px rgba(123, 43, 255, .12);
  }

  .opening-subtitle,
  .pack-subtitle,
  .booster-subtitle,
  .opening-help {
    color: var(--void-text-muted, #b9acd9);
    line-height: 1.6;
  }

  .pack-actions,
  .opening-actions,
  .booster-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  .open-pack-button,
  .opening-primary-action,
  .pack-primary-action,
  .booster-primary-action,
  button[data-action="open-pack"] {
    position: relative;
    min-height: var(--tap-target-min, 44px);
    border-radius: 16px;
    border: 1px solid rgba(185, 124, 255, .38);
    background:
      linear-gradient(135deg, rgba(185, 124, 255, .38), rgba(123, 43, 255, .26)),
      rgba(123, 43, 255, .16);
    color: var(--void-text, #f3ecff);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .035) inset,
      0 16px 38px rgba(123, 43, 255, .22),
      0 0 32px rgba(185, 124, 255, .18);
    transition:
      border-color .18s ease,
      box-shadow .18s ease,
      filter .18s ease,
      transform .18s ease;
  }

  .open-pack-button:hover,
  .opening-primary-action:hover,
  .pack-primary-action:hover,
  .booster-primary-action:hover,
  button[data-action="open-pack"]:hover {
    border-color: rgba(185, 124, 255, .62);
    filter: brightness(1.08);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .05) inset,
      0 20px 48px rgba(123, 43, 255, .28),
      0 0 42px rgba(185, 124, 255, .26);
    transform: translateY(-1px);
  }

  .open-pack-button:active,
  .opening-primary-action:active,
  .pack-primary-action:active,
  .booster-primary-action:active,
  button[data-action="open-pack"]:active {
    transform: translateY(0);
  }

  .open-pack-button:focus-visible,
  .opening-primary-action:focus-visible,
  .pack-primary-action:focus-visible,
  .booster-primary-action:focus-visible,
  button[data-action="open-pack"]:focus-visible {
    outline: 2px solid rgba(185, 124, 255, .78);
    outline-offset: 4px;
  }

  .pack-count,
  .booster-count,
  .opening-counter,
  .pity-status,
  .opening-status {
    border: 1px solid rgba(185, 124, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: var(--void-text-muted, #b9acd9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  }

  .opening-reveal-surface,
  .reveal-panel,
  .result-panel,
  .pack-result-panel {
    position: relative;
    border: 1px solid rgba(185, 124, 255, .16);
    border-radius: var(--radius-panel, 28px);
    background:
      radial-gradient(circle at 50% 0%, rgba(123, 43, 255, .14), transparent 45%),
      rgba(6, 2, 15, .72);
    box-shadow:
      0 24px 70px rgba(0, 0, 0, .34),
      inset 0 1px 0 rgba(255, 255, 255, .04);
  }

  @media (max-width: 820px) {
    .pack-actions,
    .opening-actions,
    .booster-actions {
      display: grid;
      grid-template-columns: 1fr;
      width: 100%;
    }

    .open-pack-button,
    .opening-primary-action,
    .pack-primary-action,
    .booster-primary-action,
    button[data-action="open-pack"] {
      width: 100%;
      justify-content: center;
    }
  }

  @media (max-width: 520px) {
    .pack-opening-panel,
    .opening-panel,
    .booster-panel,
    .pack-panel,
    .opening-reveal-surface,
    .reveal-panel,
    .result-panel,
    .pack-result-panel {
      border-radius: 22px;
    }

    .opening-title,
    .pack-title,
    .booster-title {
      font-size: clamp(1.55rem, 9vw, 2.35rem);
    }
  }
}