/* OLYCITY visual system — quiet surfaces, clear hierarchy, contextual navigation */
:root {
  --content-max: 1420px;
  --ui-radius: 6px;
  --ui-radius-sm: 4px;
  --ui-space: clamp(16px, 2vw, 28px);
}

:root[data-theme="dark"] {
  --muted: #9298ab;
  --dim: #62697e;
  --border: rgba(255,255,255,.075);
  --border2: rgba(255,255,255,.14);
  --surface-soft: rgba(18,21,29,.78);
  --surface-raised: #151922;
  --shadow-card: 0 12px 32px rgba(0,0,0,.2);
}

:root[data-game="lol"] {
  --surface-soft: rgba(8,24,36,.78);
  --surface-raised: #0b1b28;
}

.startup-screen {
  position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 17px; background: #0a0c10;
  transition: opacity .28s ease, visibility .28s ease;
}
.startup-screen.is-dismissed { opacity: 0; visibility: hidden; pointer-events: none; }
.startup-screen > strong { color: #fff; font: 700 clamp(32px,6vw,42px) 'Tomorrow',sans-serif; letter-spacing: 5px; }
.app-status-banner{position:fixed;z-index:1500;right:18px;bottom:18px;display:grid;grid-template-columns:9px minmax(0,1fr) auto auto;align-items:center;gap:10px;width:min(440px,calc(100vw - 36px));box-sizing:border-box;padding:12px 13px;border:1px solid rgba(244,202,82,.3);border-radius:8px;background:rgba(15,17,23,.96);box-shadow:0 18px 50px rgba(0,0,0,.42);backdrop-filter:blur(14px)}
.app-status-banner[hidden]{display:none}.app-status-dot{width:8px;height:8px;border-radius:50%;background:#f4ca52;box-shadow:0 0 12px rgba(244,202,82,.55)}.app-status-banner>span:nth-child(2){display:grid;gap:2px;min-width:0}.app-status-banner strong{color:var(--text);font:700 12px 'DM Sans',sans-serif}.app-status-banner small{overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.app-status-banner button{min-height:36px;border:1px solid var(--border2);border-radius:4px;background:rgba(255,255,255,.04);padding:0 11px;color:var(--text);font:650 11px 'DM Sans',sans-serif;cursor:pointer}.app-status-banner #app-status-close{min-width:36px;padding:0;color:var(--muted);font-size:18px}.app-status-banner[data-state="online"]{border-color:rgba(75,208,123,.3)}.app-status-banner[data-state="online"] .app-status-dot{background:#4bd07b;box-shadow:0 0 12px rgba(75,208,123,.5)}.app-status-banner[data-state="update"]{border-color:rgba(168,127,255,.38)}.app-status-banner[data-state="update"] .app-status-dot{background:#a87fff;box-shadow:0 0 12px rgba(168,127,255,.55)}
.startup-screen > small { color: #747b90; font: 600 11px 'DM Sans',sans-serif; }
.startup-progress { position: relative; width: 180px; height: 2px; overflow: hidden; background: rgba(255,255,255,.1); }
.startup-progress > i { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg,transparent,var(--red),transparent); animation: loadingScan 1s ease-in-out infinite; }

.bg-grid { opacity: .22; }
.bg-glow-1,.bg-glow-2 { opacity: .72; }

/* Navigation: game sections first, Discord-wide tools after the divider. */
.topbar-row { max-width: var(--content-max); padding-block: 11px; }
.page-nav { align-items: center; gap: 2px; }
.page-nav-btn {
  position: relative;
  min-height: 38px;
  padding: 8px 13px;
  border: 0;
  border-radius: var(--ui-radius-sm);
  clip-path: none;
  font-family: 'DM Sans',sans-serif;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .15px;
  text-transform: none;
}
.page-nav-btn:hover { background: rgba(255,255,255,.045); }
.page-nav-btn.active {
  background: var(--red-low);
  color: var(--red);
  box-shadow: inset 0 -2px 0 var(--red);
}
.page-nav-btn[data-page="games"][data-nav-scope="shared"] { margin-left: 10px; }
.page-nav-btn[data-page="games"][data-nav-scope="shared"]::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -6px;
  width: 1px;
  background: var(--border2);
}
.page-nav-icon { opacity:.88; transition:opacity .18s,transform .18s; }
.page-nav-btn:hover .page-nav-icon,.page-nav-btn.active .page-nav-icon { opacity:1; transform:translateY(-1px); }
:root[data-game="lol"] .page-nav-btn.active {
  background: rgba(201,155,63,.12);
  color: #f0d58a;
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* Shared layout rhythm. */
.main,.section-inner,.roster-page-inner,.roster-header { max-width: var(--content-max); }
.section { padding: 42px var(--ui-space); border-top-color: rgba(255,255,255,.045); }
.section-header { margin-bottom: 22px; }
.section-title { font-size: clamp(23px,2.2vw,30px); letter-spacing: -.2px; }
.section-tag { font-size: 10px; letter-spacing: 2.2px; }
.section-line { opacity: .55; }
.loading { color: var(--muted); }

.comp-tab,.map-section-tab,.history-filter-btn,.history-period-btn,
.lol-history-periods button,.coop-status-tabs button {
  border-radius: var(--ui-radius-sm);
  clip-path: none;
  font-family: 'DM Sans',sans-serif;
  letter-spacing: .2px;
  text-transform: none;
}

/* Typography: Tomorrow identifies sections; DM Sans carries people and data. */
.player-name,.player-role,.history-game-main strong,
.lol-roster-card > header h3,.coop-card-body h3,
.live-client-info strong,.lol-match-live-header strong {
  font-family: 'DM Sans',sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

/* Reusable surface language. */
.comp-card,.player-card,.lol-roster-card,.lol-home-rank-card,
.coop-game-card,.history-game,.lol-history-match,.lol-match-live,
.live-diagnostic,.data-state-card,.home-now-card,.home-world,.home-member-strip,
.map-notes-card,.tip-box {
  border-color: var(--border);
  border-radius: var(--ui-radius);
  box-shadow: none;
}
.comp-card,.player-card,.lol-roster-card,.lol-home-rank-card,
.history-game,.lol-history-match,.lol-match-live,.data-state-card {
  background-color: var(--surface-soft);
}
.comp-card:hover,.player-card:hover,.lol-roster-card:hover,.coop-game-card:hover {
  transform: translateY(-2px);
  border-color: var(--border2);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.comp-card { margin-bottom: 16px; padding: 22px 24px; }
.comp-card::before { width: 2px; opacity: .8; }
.player-card:hover { border-color: var(--red-mid); }
.lol-roster-card:hover { border-color: color-mix(in srgb,var(--rank) 42%,var(--border)); }
.portrait-frame,.agent-footer { border-color: var(--border); }
.agent-card:hover .portrait-frame { box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.tip-box { background: rgba(168,127,255,.045); }

/* Home: one obvious live action, then three compact worlds. */
#page-home .hero { padding: 38px 32px 30px; }
#page-home .hero-title { font-size: clamp(56px,7.5vw,96px); }
#page-home .hero-title-frame::before,#page-home .hero-title-frame::after { opacity: .65; }
#page-home .home-hero-title .hero-title-frame {
  padding: 4px 20px 7px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.34));
  text-shadow: 0 1px 0 rgba(255,255,255,.12), 0 0 34px rgba(255,70,86,.13);
}
#page-home .home-hero-title .hero-title-frame::before,
#page-home .home-hero-title .hero-title-frame::after { width:28px; height:28px; opacity:.82; }
#page-home .home-hero-title .hero-title-frame::before { top:-4px; left:0; }
#page-home .home-hero-title .hero-title-frame::after { right:0; bottom:-4px; }
.hero-cta-primary,.hero-cta-secondary,.home-now-action {
  border-radius: var(--ui-radius-sm);
  clip-path: none;
  font-family: 'DM Sans',sans-serif;
  font-size: 12px;
  letter-spacing: .2px;
  text-transform: none;
}
.hero-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,70,86,.2); }
.home-dashboard { max-width: 1260px; padding-top: 18px; }
.home-now-card { min-height: 154px; padding: 24px 26px; }
.home-now-card::after { opacity: .25; }
.home-now-copy > strong { font-family: 'DM Sans',sans-serif; font-size: clamp(28px,3.3vw,42px); letter-spacing: -.8px; }
.home-now-copy > span { letter-spacing: 1.8px; }
.home-world-grid { gap: 14px; margin-top: 14px; }
.home-world { min-height: 168px; border: 0; }
.home-world::after { background: linear-gradient(to top,rgba(5,7,11,.96),rgba(5,7,11,.04) 82%); }
.home-world:hover { transform: translateY(-2px); }
.home-world-copy { left: 18px; bottom: 16px; }
.home-world-copy strong { font-family: 'DM Sans',sans-serif; font-size: 20px; letter-spacing: -.2px; }
.home-world-copy small { font-family: 'DM Sans',sans-serif; font-size: 10px; letter-spacing: .3px; text-transform: none; }
.home-member-strip { border: 0; background: rgba(16,19,26,.52); }

/* Les fenêtres desktop basses restent compactes sans écraser la hiérarchie. */
@media (min-width:769px) and (max-height:800px) {
  #page-home .hero { padding: 24px 32px 20px; }
  #page-home .hero-title { font-size: clamp(54px,5.4vw,70px); }
  #page-home .hero-ctas { margin-top: 16px; }
  #page-home .hero-cta-primary,#page-home .hero-cta-secondary { min-height: 42px; padding-block: 9px; }
  .home-dashboard { padding: 16px 32px 34px; }
  .home-now-card { min-height:144px; padding:22px 24px; }
  .home-now-copy > strong { font-size: clamp(28px,3vw,38px); }
  .home-now-copy > small { font-size: 13px; }
  .home-world-grid { gap:12px; margin-top:12px; }
  .home-world { min-height:150px; }
  .home-member-row,.home-group-grid { margin-top:12px; }
}

/* Dense data views stay readable without turning every row into a box. */
.history-game-list,.lol-history-list { gap: 8px; }
.history-game-summary,.lol-history-match > summary { min-height: 58px; }
.history-game-detail,.lol-history-detail { border-top-color: rgba(255,255,255,.055); }
.history-game-main small,.lol-history-meta,.lol-history-duration { color: var(--muted); }
.live-diagnostic { background: rgba(255,255,255,.025); }
.data-state-card { background-image: none; }
.history-cache-note {
  display:grid; grid-template-columns:8px auto 1fr; align-items:center; gap:8px 10px;
  margin-bottom:12px; padding:10px 12px; border:1px solid var(--border);
  border-radius:var(--ui-radius-sm); background:var(--surface-soft); color:var(--muted); font-size:11px;
}
.history-cache-note > span { width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 12px var(--red-mid); }
.history-cache-note > strong { color:var(--text); font-size:11px; }
.history-cache-note > small { justify-self:end; color:var(--muted); font-size:10px; }
.history-cache-note.is-syncing > span { animation:pulse 1.2s ease-in-out infinite; }
.history-cache-note.is-offline { border-color:rgba(224,166,61,.28); }
.live-waiting { min-height: clamp(280px,48vh,440px); padding: 34px 24px; }
.live-waiting-icon { margin-bottom: 12px; font-size: 32px; }
.live-waiting > strong {
  margin-bottom: 6px; color: var(--text); font-family: 'DM Sans',sans-serif;
  font-size: 18px; letter-spacing: -.1px;
}
.live-waiting > span:last-child { max-width: 480px; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Data pages: the answer appears before decoration and secondary controls. */
#page-history > .container { padding-top: 24px !important; }
.history-page-subtitle { margin-bottom: 15px; }
.history-view-tabs { margin-bottom: 9px; padding-bottom: 9px; }
.history-view-tabs .history-filter-button { min-width: 104px; padding: 8px 15px; font-size: 13px; }
.history-filters { gap: 14px; margin-bottom: 16px; padding: 9px 11px; }
.history-filter-group { gap: 5px; }
.history-filter-button { padding: 6px 9px; }
.history-latest-sections { gap: 22px; }
.history-section-title { margin-bottom: 9px; padding-bottom: 7px; }
.lol-roster-card > header { border-bottom-color: rgba(255,255,255,.06); }
.lol-roster-card > header > div:nth-child(2) > span { color: var(--muted); font-size: 10px; }
.lol-roster-rank small,.lol-roster-stats small,.lol-roster-mains-title span {
  color: var(--muted);
  font-family: 'DM Sans',sans-serif;
  letter-spacing: .15px;
  text-transform: none;
}
.lol-roster-rank strong,.lol-roster-stats strong,.lol-roster-champion strong,
.lol-roster-champion > b,.lol-roster-champion > b small {
  font-family: 'DM Sans',sans-serif;
}
.lol-roster-rank small { font-size: 9px; }
.lol-roster-stats small { font-size: 9px; }
.lol-roster-stats strong { font-size: 13px; }
.lol-roster-stats span { font-size: 9px; }
.lol-roster-mains-title span { font-size: 10px; }
.lol-roster-champion strong { font-size: 11px; }
.lol-roster-champion small { font-size: 9px; }

/* Readable data: tiny labels remain secondary without becoming illegible. */
.coop-filter-field > span,.coop-status-menu > div,.coop-replay-note strong,
.lol-roster-rank small,.lol-roster-stats small,.lol-roster-champion small,
.lol-roster-champion > b small,.lol-roster-mains-title span {
  font-family: 'DM Sans',sans-serif;
  letter-spacing: .2px;
}
.coop-filter-field > span,.coop-status-menu > div { font-size: 10px; }
.coop-status { font-size: 10px; }
.coop-tags span,.coop-card-meta,.coop-submitter,.coop-steam-review,
.coop-steam-review > span,.coop-steam-review small { font-size: 10px; }
.lol-roster-rank small,.lol-roster-stats small { font-size: 10px; }
.lol-roster-stats span,.lol-roster-champion small { font-size: 10px; }
.lol-roster-champion > b small { font-size: 9px; }

/* The first-visit picker feels like a people chooser, not another dashboard. */
.profile-picker { background: radial-gradient(circle at 50% 10%,color-mix(in srgb,var(--red) 10%,transparent),transparent 38%),#090b0f; }
.profile-grid { gap: 10px; }
.profile-card { border-radius: var(--ui-radius); }
.profile-card:hover,.profile-card:focus-visible { transform: translateY(-2px); border-color: transparent; background: rgba(255,255,255,.045); }
.profile-avatar { border-width: 1px; border-radius: 8px; }
.profile-name { font-family: 'DM Sans',sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; }
.profile-status { letter-spacing: .4px; text-transform: none; }
.profile-guest-btn { border-radius: var(--ui-radius-sm); font-family: 'DM Sans',sans-serif; letter-spacing: .2px; text-transform: none; }

/* Coop has its own warm accent but follows the same card and type system. */
.coop-page { background: transparent; }
.coop-hero { align-items: center; padding-block: 18px; border-bottom-color: var(--border); }
.coop-hero h2 { margin-block: 4px 5px; font-size: clamp(25px,3vw,36px); }
.coop-hero p { max-width: 680px; line-height: 1.45; }
.coop-toolbar { padding-block: 12px 9px; }
.coop-summary { margin: 8px 0 14px; }
.coop-games-grid { gap: 14px; }
.coop-game-card { background: var(--surface-soft); }
.coop-card-body h3 { font-size: 19px; }
.coop-data-state { width: 100%; }
.coop-filter-field,.coop-toolbar input,.coop-toolbar select,
.coop-field input,.coop-field select,.coop-field textarea { background: var(--surface-soft); }

@media (max-width: 1180px) and (min-width: 769px) {
  .topbar-row { gap: 12px; padding-inline: 18px; }
  .page-nav-btn { padding-inline: 9px; }
  .page-nav-icon { width:14px; height:14px; }
}

@media (max-width: 768px) {
  body { padding-bottom: 66px; }
  .bg-grid { opacity: .12; }
  .topbar-row { padding: 9px 14px; }
  .page-nav-btn[data-page="games"][data-nav-scope="shared"] { margin-left: 0; }
  .page-nav-btn[data-page="games"][data-nav-scope="shared"]::before { display: none; }
  .page-nav-btn { font-family: 'DM Sans',sans-serif; font-size: 10px; }
  .page-nav-btn.active { box-shadow: none; }

  /* Five useful destinations, selected for the active game. */
  :root[data-game="lol"] .page-nav > .page-nav-btn[data-page="roster"] { display: flex !important; }
  :root[data-game="lol"] .nav-maps-dropdown { display: none !important; }
  :root[data-game="lol"] .mobile-nav-more-sheet > [data-mobile-page="roster"] { display: none; }

  .mobile-nav-more-sheet { border-radius: 12px; }
  .mobile-nav-more-sheet > button { border-top-color: rgba(255,255,255,.06); }
  .section { padding: 30px 15px; }
  .section-header { margin-bottom: 17px; }
  .section-title { font-size: 23px; }

  #page-home .hero { padding: 30px 16px 22px; }
  #page-home .hero-title { font-size: clamp(42px,13vw,58px); }
  .home-dashboard { padding: 10px 14px 34px; }
  .home-now-card { min-height: 142px; padding: 19px; }
  .home-now-copy > strong { font-size: 27px; }
  .home-world-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .home-world { min-height: 126px; }
  .home-world[data-home-world="valorant"] { grid-row: span 2; min-height: 261px; }
  .home-world-copy { left: 12px; bottom: 11px; }
  .home-world-copy strong { font-size: 15px; }
  .home-world-copy small { font-size: 9px; }

  .comp-card { padding: 16px; }
  .comp-card:hover,.player-card:hover,.lol-roster-card:hover,.coop-game-card:hover { transform: none; box-shadow: none; }
  .history-game-summary,.lol-history-match > summary { min-height: 54px; }
  #page-history > .container { padding-top: 17px !important; }
  .history-page-title { font-size: 23px; }
  .history-page-subtitle { margin-bottom: 12px; font-size: 12px; }
  .history-view-tabs { margin-bottom: 8px; padding-bottom: 8px; }
  .history-view-tabs .history-filter-button { min-height: 42px; padding: 8px 12px; }
  .history-filters { display: grid; gap: 7px; margin-bottom: 13px; padding: 9px; }
  .history-filter-group { grid-template-columns: 55px minmax(0,1fr); align-items: center; gap: 7px; }
  .history-filter-group > div { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .history-filter-group > div::-webkit-scrollbar { display: none; }
  .history-filter-button { flex: 0 0 auto; min-height: 38px; }
  .history-latest-sections { gap: 18px; }
  .history-section-title { font-size: 12px; }
  .live-waiting { min-height: 320px; padding: 28px 18px; }
  .live-waiting > strong { font-size: 17px; }
  .lol-roster-card > header > div:nth-child(2) > span { font-size: 10px; }
  .lol-roster-rank small,.lol-roster-stats small,.lol-roster-mains-title span { font-size: 10px; }
  .lol-roster-stats span,.lol-roster-champion small { font-size: 10px; }
  .lol-roster-champion > b small { font-size: 9px; }
  .coop-page { padding: 14px 14px 42px; }
  .coop-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 8px 0 14px; }
  .coop-hero > div { min-width: 0; }
  .coop-hero h2 { margin: 3px 0 0; font-size: 24px; line-height: 1.08; }
  .coop-hero p { display: none; }
  .coop-add-btn { width: auto; min-height: 44px; padding-inline: 13px; }
  .coop-toolbar { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 0 8px; }
  .coop-search-field { flex: 1 0 100%; }
  .coop-filter-field { flex: 1 1 30%; min-width: 96px; }
  .coop-filter-field:last-child { flex-basis: 100%; }
  .coop-filter-field select { min-height: 32px; }
  [data-coop-reset] { min-height: 32px; padding: 5px 10px; }
  .coop-status-tabs { padding-bottom: 7px; }
  .coop-status-tabs button { min-height: 40px; padding-inline: 11px; }
  .coop-summary { margin: 7px 0 11px; }
}

@media (max-width: 380px) {
  .home-world[data-home-world="valorant"] { min-height: 237px; }
  .home-world-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); }
  .home-world-copy small { display: none; }
}

/* Keyboard, touch and motion are first-class inputs across every page. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb,var(--accent,#ff4656) 82%,white);
  outline-offset: 3px;
}

@media (any-pointer: coarse) {
  :where(button,.btn,.page-nav-btn,.mobile-nav-more-btn,.game-switch button,summary) { touch-action: manipulation; }
  :where(.page-nav-btn,.mobile-nav-more-sheet>button,.home-now-action,.home-sheet-primary,.home-sheet-secondary) { min-height: 48px; }
}

@media (max-width: 768px) {
  .app-status-banner { right:10px;bottom:76px;width:calc(100vw - 20px);grid-template-columns:9px minmax(0,1fr) auto;padding:11px; }
  .app-status-banner #app-status-close { position:absolute;right:3px;top:-40px;background:rgba(15,17,23,.96); }
  .app-status-banner small { white-space:normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto!important; }
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important; }
}