/* Broadcast editorial direction — intentionally flat, ruled and rectangular. */
:root {
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --line: rgba(255, 255, 255, .11);
  --line-strong: rgba(255, 255, 255, .18);
}

body {
  background: #08090c;
}

.ambient { display: none; }
.page-shell, .header-shell, .broadcast-strip-inner, .footer-shell { width: min(1376px, calc(100% - 64px)); }

/* Header */
.site-header {
  height: 70px;
  border-bottom-color: var(--line);
  background: rgba(8, 9, 12, .97);
  backdrop-filter: none;
}
.header-shell { gap: 29px; }
.brand { padding-right: 25px; border-right: 1px solid var(--line); }
.skai-lockup { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.skai-word { color: #f5f6f8; font: italic 900 27px/.8 var(--display); letter-spacing: -.02em; }
.skai-edition { color: var(--accent-strong); font: 800 17px/.8 var(--display); letter-spacing: .06em; }
.desktop-nav { gap: 26px; }
.desktop-nav a { color: #939aa6; font-size: 9px; letter-spacing: .07em; }
.desktop-nav a::after { height: 2px; border-radius: 0; }
.header-actions { gap: 0; }
.icon-button {
  width: 37px;
  height: 37px;
  border-color: var(--line);
  border-radius: 0;
  background: transparent;
}
.icon-button:hover { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); transform: none; }
.live-radio-pill {
  height: 38px;
  margin-right: 12px;
  padding: 0 13px;
  border-color: var(--line);
  border-radius: 0;
  background: transparent;
}
.live-radio-pill:hover { border-color: var(--accent); }
.avatar-button { width: 38px; height: 38px; margin-left: 11px; box-shadow: none; }
.popover { top: 63px; padding: 7px; border-radius: 0; background: #101218; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.theme-option, .account-popover > button { border-radius: 0; }
.theme-preview { border-radius: 0; }
.account-summary { border-bottom-color: var(--line); }
.brand-options { margin-top: 8px; padding: 10px 8px 6px; border-top: 1px solid var(--line); }
.brand-options > p { margin: 0 0 9px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.brand-options > div { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.brand-options button { min-width: 0; height: 35px; padding: 0 5px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; color: #8f97a3; font: 700 8px/1 var(--body); cursor: pointer; }
.brand-options button b { color: #d8dbe1; }
.brand-options button:hover, .brand-options button.active { background: var(--accent); color: var(--accent-contrast); }
.brand-options button:hover b, .brand-options button.active b { color: inherit; }

/* Score ticker */
.broadcast-strip { border-bottom-color: var(--line); background: #0c0f14; }
.broadcast-strip-inner { height: 38px; }
.ticker-track span, .broadcast-strip time { font-size: 8px; }

/* Lead story */
.hero-section { padding-top: 31px; }
.hero-tabs { max-width: 520px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.hero-tabs button { padding: 11px 12px 13px; }
.hero-tabs button:hover, .hero-tabs button.active { background: transparent; }
.hero-tabs button::after { height: 2px; }
.hero-stage {
  min-height: 570px;
  border-color: var(--line-strong);
  border-radius: 0;
  background: #090a0e;
  box-shadow: none;
}
.hero-stage::before { top: -1px; left: 44px; width: 120px; height: 2px; box-shadow: none; }
.hero-stage:hover .hero-backdrop { transform: none; }
.hero-backdrop { width: 67%; }
.hero-shade { background: linear-gradient(90deg, #08090c 3%, #08090c 35%, rgba(8,9,12,.9) 47%, rgba(8,9,12,.22) 75%, rgba(8,9,12,.05)); }
.hero-grid-pattern { display: none; }
.hero-content { padding-left: 58px; }
.status-pill {
  min-height: 22px;
  padding: 0 7px;
  border: 0;
  border-left: 2px solid currentColor;
  border-radius: 0;
  background: rgba(var(--accent-rgb), .08);
}
.hero-team img { border-radius: 0; box-shadow: none; }
.primary-button, .secondary-button { min-height: 48px; border-radius: 0; box-shadow: none; }
.primary-button:hover { transform: none; box-shadow: none; }
.button-play { width: 25px; height: 25px; border-radius: 0; }
.hero-meta { right: 0; bottom: 0; gap: 0; }
.hero-meta > div { height: 44px; padding: 7px 12px; border-radius: 0; background: rgba(7,9,13,.9); backdrop-filter: none; }
.hero-meta > .icon-button { height: 44px; }

/* Editorial section rules */
.content-section { padding-top: 72px; }
.section-heading { min-height: 45px; align-items: flex-start; margin-bottom: 0; border-bottom: 2px solid #f5f6f8; }
.section-heading > div:first-child { gap: 5px; }
.section-heading h2 { font-size: clamp(30px, 3vw, 42px); }
.text-button { padding-top: 7px; }

/* Live grid */
.live-grid { grid-template-columns: repeat(4, 1fr); gap: 0; border-left: 1px solid var(--line); }
.live-card {
  min-height: 262px;
  padding: 18px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #0d0f14;
}
.live-card::before { content: ""; position: absolute; top: 0; left: 0; width: 54px; height: 2px; background: var(--card-accent); }
.live-card::after { display: none; }
.live-card:hover { z-index: auto; border-color: var(--line); background: #12151b; transform: none; }
.crest-matchup img, .country-disc { filter: none; }
.live-card h3 { font-size: 20px; }

/* Categories */
.categories-section { padding-top: 69px; }
.section-heading.compact { margin-bottom: 0; }
.category-rail { grid-template-columns: repeat(8, 1fr); gap: 0; border-left: 1px solid var(--line); }
.category-chip {
  padding: 18px 8px 16px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #0d0f14;
}
.category-chip > span { width: 42px; height: 42px; border-radius: 0; background: transparent; }
.category-chip:hover, .category-chip.active { border-color: var(--line); background: #14171d; transform: none; }
.category-chip.active { box-shadow: inset 0 2px var(--accent); }
.category-chip.active > span { border-color: var(--accent); background: transparent; color: var(--accent-bright); box-shadow: none; }

/* Fixtures */
.schedule-section { padding-top: 82px; }
.schedule-actions { align-self: flex-start; }
.round-arrow { width: 33px; height: 33px; border-radius: 0; background: transparent; }
.round-selector { gap: 0; padding: 13px 0 0; border-left: 1px solid var(--line); }
.round-selector button { min-width: 45px; height: 35px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: #0c0e13; }
.round-selector button:hover, .round-selector button.active { border-color: var(--line); background: var(--accent); }
.fixture-panel { border-radius: 0; background: #0d0f14; }
.fixture-panel-head { background: #101218; }
.fixture-card { background: #0d0f14; }
.fixture-card:hover { background: #14171d; }

/* News */
.news-layout { gap: 18px; padding-top: 20px; }
.feature-story { border-radius: 0; }
.feature-story:hover > img { transform: none; }
.story-tag { min-height: 21px; border-radius: 0; }
.story-image { border-radius: 0; }
.story-card:hover .story-image > img { transform: none; }
.mini-play { border-radius: 0; background: rgba(0,0,0,.62); backdrop-filter: none; }

/* Video highlights */
.highlights-rail { gap: 0; padding-top: 20px; border-left: 1px solid var(--line); }
.highlight-card { min-height: 315px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: #0d0f14; }
.highlight-card:hover > img { transform: none; }
.duration { border-radius: 0; }
.large-play { border-radius: 0; background: rgba(0,0,0,.55); backdrop-filter: none; }
.highlight-card:hover .large-play { transform: translateX(-50%); }

/* Shows */
.shows-section { padding-bottom: 80px; }
.shows-banner {
  gap: 58px;
  padding: 48px;
  border-top: 2px solid var(--accent);
  border-radius: 0;
  background: #0e1015;
}
.shows-banner::before { display: none; }
.show-list { border-radius: 0; background: #0a0c10; }
.show-list .icon-button { border-radius: 0; }

/* Footer and overlays */
.footer-brand { padding-right: 25px; border-right: 1px solid var(--line); }
.footer-brand .skai-word { font-size: 24px; }
.footer-brand .skai-edition { font-size: 15px; }
.footer-social button { border-radius: 0; }
.mobile-bottom-nav { border-top-color: var(--line); background: rgba(9,10,14,.98); backdrop-filter: none; }
.search-panel { border-radius: 0; background: #101218; }
.popular-searches button { border-radius: 0; }
.search-result { border-radius: 0; }
.search-result img { border-radius: 0; }
.modal-backdrop { backdrop-filter: none; }
.form-dialog { border-radius: 0; background: #0e1015; }
.dialog-mark { border-radius: 0; }
.form-dialog input, .setting-row select { border-radius: 0; }
.toast { border-radius: 0; border-left: 2px solid var(--accent); }

@media (max-width: 1180px) {
  .page-shell, .header-shell, .broadcast-strip-inner, .footer-shell { width: min(100% - 40px, 1120px); }
  .live-grid { grid-template-columns: 1fr 1fr; }
  .category-rail { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 860px) {
  .page-shell, .header-shell, .broadcast-strip-inner, .footer-shell { width: calc(100% - 28px); }
  .site-header { height: 66px; }
  .brand { padding: 0; border: 0; }
  .skai-word { font-size: 23px; }
  .skai-edition { font-size: 14px; }
  .mobile-drawer { top: 66px; border-radius: 0; background: #0c0e13; }
  .theme-popover, .account-popover { top: 60px; }
  .hero-stage { min-height: 600px; border-radius: 0; }
  .hero-shade { background: linear-gradient(0deg, #08090c 0%, #08090c 40%, rgba(8,9,12,.78) 62%, rgba(8,9,12,.08) 100%); }
  .hero-content { padding: 28px 25px 31px; }
  .category-rail { border-left: 0; }
  .category-chip { border-left: 1px solid var(--line); }
  .highlights-rail { border-left: 0; }
  .highlight-card { border-left: 1px solid var(--line); }
  .shows-banner { padding: 35px; }
}

@media (max-width: 590px) {
  .header-actions { right: 0; }
  .hero-section { padding-top: 18px; }
  .hero-tabs { margin-bottom: 14px; }
  .hero-stage { min-height: 610px; }
  .hero-content { padding: 24px 20px 27px; }
  .hero-meta { top: 0; right: 0; bottom: auto; }
  .section-heading { min-height: 42px; }
  .live-grid { border-left: 0; }
  .live-card { border-left: 1px solid var(--line); }
  .category-chip { min-width: 122px; }
  .fixture-panel-head { padding: 14px; }
  .feature-story { min-height: 485px; }
  .story-copy { padding: 22px; }
  .story-grid { gap: 10px; }
  .story-card { min-width: 79vw; }
  .highlights-rail { gap: 10px; }
  .shows-banner { padding: 28px 20px; }
  .footer-shell { padding-bottom: 38px; }
}