/* V60 Aynı Frekans — gece stadyumunda canlı yayın stüdyosu */
:root {
  --af60-blue: #36b9f1;
  --af60-pink: #e665c8;
  --af60-gold: #e2bd65;
  --af60-ink: #0a2942;
  --af60-paper: rgba(245, 245, 238, .91);
}

html,
body {
  background-image:
    linear-gradient(180deg, rgba(1, 10, 28, .16), rgba(1, 10, 28, .36)),
    url("./backgrounds/webp/ayni-frekans-studio.webp") !important;
  background-color: #051426 !important;
  color: #f3f6f4 !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  opacity: .20 !important;
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(91, 196, 255, .18) 80px),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(226, 101, 200, .12) 80px) !important;
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 74%, transparent) !important;
}

.ambient,
.noise { opacity: .05 !important; }
.app-shell { position: relative !important; z-index: 2 !important; width: min(1540px, calc(100% - 24px)) !important; }

.topbar.glass {
  background: linear-gradient(90deg, rgba(3, 20, 44, .97), rgba(7, 39, 65, .96), rgba(3, 20, 44, .97)) !important;
  border: 1px solid rgba(229, 194, 108, .34) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 48px rgba(0, 7, 22, .42), inset 0 -2px 0 rgba(219, 173, 73, .15) !important;
  backdrop-filter: blur(22px) saturate(1.12) !important;
}
.brand strong {
  color: #fff !important;
  font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}
.brand small { color: #e4cb89 !important; opacity: 1 !important; }
.brand-mark {
  border: 1px solid rgba(234, 205, 134, .55) !important;
  box-shadow: 0 0 0 3px rgba(44, 179, 238, .15), 0 10px 24px rgba(0, 8, 24, .30) !important;
}
.portal-home,
.how-to-play-button--top,
.mode-chip,
.lang-switch,
.icon-button {
  min-height: 42px !important;
  color: #f7f8f5 !important;
  background: rgba(255, 255, 255, .075) !important;
  border: 1px solid rgba(230, 202, 133, .23) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.portal-home svg { display: none !important; }
.portal-home::before,
.how-to-play-button--top::before,
.mode-chip::before,
.icon-button::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: url("./icons/home.svg") center/contain no-repeat;
}
.how-to-play-button--top { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.how-to-play-button--top::before { background-image: url("./icons/info.svg"); }
.mode-chip { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.mode-chip::before { background-image: url("./icons/broadcast.svg"); }
.icon-button { font-size: 0 !important; display: inline-grid !important; place-items: center !important; }
.icon-button::before { background-image: url("./icons/sound.svg"); }
.lang-btn { color: #f8f8f5 !important; }
.lang-btn.active {
  background: linear-gradient(180deg, rgba(67, 187, 241, .30), rgba(44, 121, 190, .20)) !important;
  box-shadow: inset 0 -2px 0 rgba(229, 101, 200, .46) !important;
}

.glass {
  border-radius: 28px !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
}
.setup-grid { gap: 18px !important; align-items: stretch !important; }
.hero-panel.glass {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 62%, rgba(84, 153, 255, .18), transparent 31%),
    linear-gradient(145deg, rgba(3, 22, 48, .91), rgba(18, 45, 81, .78)) !important;
  border: 1px solid rgba(106, 196, 255, .37) !important;
  box-shadow: var(--v60-shadow-xl), inset 0 1px 0 rgba(255,255,255,.09), inset 0 -2px 0 rgba(229,101,200,.12) !important;
}
.hero-panel.glass::before {
  content: "LIVE / SYNC";
  position: absolute;
  top: 20px;
  right: 22px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #fff;
  background: rgba(222, 73, 135, .78);
  box-shadow: 0 0 24px rgba(230, 101, 200, .28);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
}
.eyebrow,
.step-label { color: #efcf78 !important; letter-spacing: .18em !important; }
.hero-panel h1 {
  color: #fff !important;
  font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important;
  font-size: clamp(48px, 5vw, 82px) !important;
  line-height: .91 !important;
  letter-spacing: -.055em !important;
  text-transform: uppercase !important;
  text-shadow: 0 13px 34px rgba(0, 6, 19, .34) !important;
}
.hero-panel h1 span {
  color: transparent !important;
  background: linear-gradient(90deg, #6ed9ff, #f19add 66%, #f2cf78) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.hero-copy { color: #c8d8e4 !important; max-width: 64ch !important; }
.hero-stats { gap: 9px !important; }
.hero-stats article {
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.055)) !important;
  border: 1px solid rgba(116, 202, 249, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.hero-stats strong { color: #fff !important; }
.hero-stats span { color: #efd07c !important; }

.frequency-stage {
  min-height: 356px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(234, 203, 128, .38) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(120, 104, 255, .28), transparent 27%),
    linear-gradient(145deg, rgba(1, 14, 36, .82), rgba(31, 18, 68, .74)) !important;
  box-shadow: 0 22px 52px rgba(0, 5, 19, .36), inset 0 1px 0 rgba(255,255,255,.09), inset 0 -2px 0 rgba(229,101,200,.16) !important;
}
.frequency-stage > *:not(.v59-frequency-art) { display: none !important; }
.frequency-stage .v59-frequency-art {
  display: block !important;
  width: 100% !important;
  height: 350px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 25px 22px rgba(0, 4, 18, .56)) saturate(1.20) contrast(1.04) !important;
}

.lobby-panel.glass {
  color: var(--af60-ink) !important;
  background: linear-gradient(145deg, rgba(250,248,240,.94), rgba(211,224,225,.89)) !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  box-shadow: var(--v60-shadow-xl), inset 0 1px 0 rgba(255,255,255,.74) !important;
}
.panel-heading {
  padding-bottom: 15px !important;
  border-bottom: 1px solid rgba(157, 119, 43, .30) !important;
}
.panel-heading h2 { color: #0b2b45 !important; font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important; text-transform: uppercase !important; }
.lobby-panel p,
.setting-help { color: #586f7d !important; }
.play-mode-tabs {
  padding: 6px !important;
  background: rgba(7, 36, 61, .08) !important;
  border: 1px solid rgba(21, 63, 92, .18) !important;
}
.play-mode-tabs button,
.secondary-button,
.mini-button {
  color: #12344e !important;
  background: rgba(250,250,245,.76) !important;
  border: 1px solid #adbdc2 !important;
}
.play-mode-tabs button.active,
.primary-button,
.submit-word {
  color: #fff !important;
  background: linear-gradient(110deg, #0d3c65, #157aa3 52%, #834f9a) !important;
  border-color: #d6b45d !important;
  box-shadow: 0 12px 27px rgba(4, 41, 70, .23), inset 0 -2px 0 rgba(230,101,200,.25) !important;
}
.primary-button::before,
.submit-word::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 8px;
  vertical-align: -3px;
  background: url("./icons/play.svg") center/contain no-repeat;
}

.format-selector-card,
.team-setup,
.settings-row > label,
.online-connect-panel,
.online-lobby,
.online-drop-zone,
.rotation-setup,
.rotation-note,
.rules-mini,
.empty-history,
.status-banner {
  color: var(--af60-ink) !important;
  background: linear-gradient(145deg, rgba(255,255,252,.73), rgba(218,229,229,.70)) !important;
  border: 1px solid rgba(143, 165, 171, .62) !important;
  box-shadow: 0 9px 22px rgba(10, 44, 62, .07), inset 0 1px 0 #fff !important;
}
.team-title-row { align-items: center !important; }
.team-emblem,
.mini-emblem,
.versus-divider span {
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: radial-gradient(circle at 34% 25%, #2b75a6, #072b4d 70%) !important;
  border: 2px solid #dfbc68 !important;
  box-shadow: 0 0 0 3px #0a2d4c, 0 0 0 5px rgba(224,188,102,.55), 0 10px 23px rgba(4, 31, 51, .22) !important;
}
.team-coral .team-emblem { background: radial-gradient(circle at 34% 25%, #ba5fa7, #442258 72%) !important; }
.team-mint .team-emblem { background: radial-gradient(circle at 34% 25%, #44b6b2, #09515c 72%) !important; }
.lobby-panel input,
.lobby-panel select,
.word-input-wrap input,
.online-field input,
.join-room-box input,
.online-team-name input {
  color: #0d2d45 !important;
  background: rgba(255,255,251,.94) !important;
  border: 1px solid #9faeb2 !important;
  box-shadow: inset 0 2px 5px rgba(4, 33, 51, .055) !important;
}
.lobby-panel input:focus,
.lobby-panel select:focus,
.word-input-wrap input:focus {
  border-color: #b88b35 !important;
  box-shadow: 0 0 0 4px rgba(213, 170, 75, .18) !important;
}

.scoreboard,
.play-panel,
.history-panel,
.winner-card,
.rotation-leaderboard {
  background: linear-gradient(145deg, rgba(4,24,49,.92), rgba(14,55,82,.88)) !important;
  color: #f4f6f3 !important;
  border: 1px solid rgba(229,195,110,.35) !important;
  box-shadow: var(--v60-shadow-card), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.score-team,
.word-card,
.attempt-card,
.rules-mini > div {
  color: #f2f5f4 !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(118, 202, 249, .18) !important;
}
.score-name,
.player-card-top strong,
.round-header h2,
.winner-card h2 { color: #fff !important; }
.status-banner { border-left: 4px solid #e064bd !important; }

.how-to-modal__backdrop { background: rgba(2, 10, 27, .78) !important; }
.how-to-modal__card {
  color: #f4f6f3 !important;
  background: linear-gradient(145deg, rgba(5,27,54,.97), rgba(25,49,82,.96)) !important;
  border-color: rgba(232,199,119,.48) !important;
  box-shadow: var(--v60-shadow-xl) !important;
}
.how-to-modal__lead,
.how-to-step p { color: #c5d5df !important; }

@media (max-width: 1050px) {
  .app-shell { width: min(100% - 14px, 1120px) !important; }
  .frequency-stage { min-height: 240px !important; }
  .frequency-stage .v59-frequency-art { height: 234px !important; }
  .hero-panel h1 { font-size: clamp(44px, 8vw, 68px) !important; }
}

@media (max-width: 680px) {
  .app-shell { width: calc(100% - 10px) !important; }
  .glass { border-radius: 19px !important; }
  .topbar.glass {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 10px !important;
  }
  .topbar-left {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .portal-home {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .portal-home span { display: none !important; }
  .brand { min-width: 0 !important; }
  .brand strong { font-size: 17px !important; line-height: .96 !important; }
  .brand small { font-size: 9px !important; }
  .how-to-play-button--top {
    display: inline-flex !important;
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    justify-content: center !important;
    font-size: 0 !important;
  }
  .topbar-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .mode-chip {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .lang-switch {
    grid-column: 1 !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .icon-button { grid-column: 2 !important; width: 44px !important; }
  .hero-panel.glass::before { display: none !important; }
  .frequency-stage { min-height: 156px !important; border-radius: 17px !important; }
  .frequency-stage .v59-frequency-art { height: 150px !important; }
  .team-emblem,
  .mini-emblem { box-shadow: 0 0 0 2px #0a2d4c, 0 7px 16px rgba(4,31,51,.20) !important; }
}