/* Wictories 0.27.5 — Corporate identity V2
   Official production assets are used without redrawing or altering the logo. */
:root {
  --brand-primary: #ff6a00;
  --brand-secondary: #ff3d00;
  --brand-gold: #ffb300;
  --brand-charcoal: #111827;
  --brand-charcoal-deep: #090f19;
  --brand-surface: #161f2e;
  --brand-gray: #8a9099;
  --brand-white: #ffffff;
  --bg: #0a111d;
  --bg-soft: #111827;
  --panel: rgba(17, 24, 39, .94);
  --panel-strong: #111827;
  --panel-light: #1b2637;
  --line: rgba(255,255,255,.11);
  --line-strong: rgba(255,106,0,.34);
  --text: #ffffff;
  --muted: #aeb5c0;
  --muted-2: #8a9099;
  --cyan: var(--brand-primary);
  --lime: var(--brand-gold);
  --orange: var(--brand-primary);
  --success: #67d391;
  --danger: #ff5b61;
  font-family: "Montserrat", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

html, body {
  background-color: var(--brand-charcoal-deep);
}
body {
  background:
    radial-gradient(circle at 8% -5%, rgba(255,106,0,.18), transparent 31rem),
    radial-gradient(circle at 96% 18%, rgba(255,61,0,.11), transparent 30rem),
    linear-gradient(180deg, #111827 0%, #090f19 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .36;
  background: repeating-linear-gradient(132deg, transparent 0 46px, rgba(255,106,0,.035) 46px 48px, transparent 48px 92px);
}

h1, h2, h3, .view-title, .tv-action-card strong, .remote-current-action strong {
  font-family: "Rajdhani", "Montserrat", "Segoe UI", sans-serif;
  font-weight: 800;
}
.eyebrow { color: var(--brand-primary) !important; }
code { color: #ffb978; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible {
  outline-color: rgba(255,106,0,.78) !important;
}

/* Official logo surfaces */
.brand-official { gap: 9px; min-width: 0; }
.brand-logo-surface,
.remote-brand-surface,
.tv-brand-surface {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.brand-logo-surface { width: 178px; height: 43px; padding: 5px 9px; }
.brand-logo-full { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-logo-symbol { display: none; width: 100%; height: 100%; object-fit: cover; }
.brand-tagline {
  color: #d8dde5;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .13em;
  white-space: nowrap;
}
.remote-brand-surface { width: 122px; height: 31px; padding: 3px 7px; border-radius: 8px; }
.remote-brand-surface img,
.tv-brand-surface img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tv-brand { display: inline-flex; text-decoration: none; }
.tv-brand-surface { width: clamp(132px, 13vw, 186px); height: 40px; padding: 4px 8px; }

/* Corporate shell */
.topbar,
.view-banner,
.tv-header,
.tv-session-bar,
.tv-status-strip,
.remote-controller-header {
  border-color: rgba(255,106,0,.16) !important;
  background: rgba(12,18,29,.93) !important;
}
.card,
.intro-card,
.catalog-card,
.remote-tracking-card,
.remote-game-card,
.tv-player-board,
.tv-action-card,
.tv-feedback,
.tv-highlight-grid > div,
.tv-ready-panel {
  border-color: rgba(255,255,255,.10) !important;
  background: linear-gradient(180deg, rgba(25,34,49,.96), rgba(12,18,29,.96)) !important;
}
.intro-card {
  background:
    linear-gradient(112deg, rgba(17,24,39,.97), rgba(12,18,29,.97)),
    var(--panel) !important;
}
.intro-card::after {
  border-color: rgba(255,106,0,.055) !important;
}

/* Buttons and active states */
.button.primary,
.primary-action,
.play-primary-button,
.remote-controller-app .remote-primary-control,
.tv-primary,
#friendlyPrepStart,
#wictoriesCheckoutConfirm,
#wictoriesPaywallCta {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
  box-shadow: 0 12px 32px rgba(255,61,0,.24) !important;
}
.button.primary:hover,
.remote-controller-app .remote-primary-control:hover,
.tv-primary:hover { filter: brightness(1.08); }
.primary-view-button.active,
.primary-view-button[aria-current="page"],
.remote-display-toolbar button.active,
.remote-display-toolbar button[aria-pressed="true"] {
  color: #fff !important;
  border-color: rgba(255,106,0,.52) !important;
  background: linear-gradient(180deg, rgba(255,106,0,.22), rgba(255,61,0,.10)) !important;
}
.status-pill.ready,
.status-pill.success,
.chip.success,
.tv-connection[data-state="connected"] {
  color: #ffbd4a !important;
  border-color: rgba(255,179,0,.42) !important;
  background: rgba(255,179,0,.09) !important;
}

/* Progress, score and feedback */
.progress-track i,
.tv-progress-track i,
.remote-progress-track i,
.avatar-mirror-card .avatar-quality-track i,
.tv-avatar-quality-track i {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-gold)) !important;
}
.tv-player-list li:first-child,
.local-ranking-list li:first-child {
  border-color: rgba(255,179,0,.30) !important;
  background: rgba(255,106,0,.07) !important;
}
.tv-player-list li > b,
.tv-feedback b,
.remote-score-row > div:first-child strong,
.competition-score-value,
.result-score {
  color: var(--brand-gold) !important;
}
.tv-action-card[data-phase="active"] {
  box-shadow: inset 0 0 0 2px rgba(255,106,0,.40) !important;
  background: radial-gradient(circle at 50% 28%, rgba(255,106,0,.18), transparent 58%), var(--panel) !important;
}
.tv-feedback.perfect {
  background: radial-gradient(circle at 50% 50%, rgba(255,179,0,.18), transparent 62%), var(--panel) !important;
}
.tv-feedback.good {
  background: radial-gradient(circle at 50% 50%, rgba(255,106,0,.16), transparent 62%), var(--panel) !important;
}

/* TV corporate composition */
.pairing-view {
  background:
    linear-gradient(135deg, rgba(17,24,39,.98), rgba(7,12,21,.98)),
    repeating-linear-gradient(132deg, transparent 0 48px, rgba(255,106,0,.08) 48px 50px, transparent 50px 92px) !important;
}
.pair-code {
  border-color: rgba(255,106,0,.38) !important;
  background: rgba(255,106,0,.10) !important;
}
.pair-code strong { color: var(--brand-gold) !important; }
.tv-media-stage { border-color: rgba(255,106,0,.22) !important; }
.tv-media-overlay {
  background: radial-gradient(circle at center, rgba(255,106,0,.13), transparent 46%), #080d16 !important;
}

/* Mobile personal experience */
.remote-controller-view {
  background:
    radial-gradient(circle at 50% -10%, rgba(255,106,0,.18), transparent 36%),
    linear-gradient(180deg, #111827 0%, #080e18 100%) !important;
}
.remote-tracking-slot,
.remote-avatar-layer,
.remote-camera-layer {
  border-color: rgba(255,106,0,.16) !important;
}
.remote-controller-link[data-state="connected"] i,
.remote-status-badge.ready { background: var(--brand-gold) !important; }

/* Brand claim in key entry points */
.brand-claim-line {
  color: var(--brand-primary);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .brand-logo-surface { width: 44px; height: 44px; padding: 0; border-radius: 12px; background: transparent; border: 0; }
  .brand-logo-full { display: none; }
  .brand-logo-symbol { display: block; }
  .brand-tagline { display: none; }
}
@media (max-width: 520px) {
  .remote-brand-surface { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 11px; background: transparent; }
  .remote-brand-surface img { content: url("assets/brand/wictories-app-icon-dark.png"); object-fit: cover; }
}