/* 0h0k.me — hand-crafted, not templated. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; transition: color .15s ease, border-color .15s ease; }
img { display: block; max-width: 100%; }

.container { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* HEADER */
header { padding: 16px 0; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 880px; margin: 0 auto; padding: 0 24px;
}
.logo { font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }
nav { display: flex; gap: 24px; }
nav a { font-size: .9rem; font-weight: 500; position: relative; }
nav a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; transition: width .2s ease;
}
nav a:hover::after, nav a.active::after { width: 100%; }

/* FOOTER */
footer { padding: 32px 0; font-size: .85rem; }

/* TABLES */
table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .95rem; }
th, td { text-align: left; padding: 10px 16px; }
th { font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { transition: background .1s ease; }

.tag { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }

/* ============================================
   HOMEPAGE — BLACK & GOLD
   ============================================ */
body.home { background: #0a0a0a; color: #d4ceb8; }
body.home header { background: #0a0a0a; border-bottom: 1px solid rgba(212,175,55,.1); }
body.home .logo { color: #e8d68a; }
body.home .logo span { color: #c9a227; }
body.home nav a { color: #6b6450; }
body.home nav a:hover, body.home nav a.active { color: #e8d68a; }
body.home nav a::after { background: #c9a227; }

body.home .hero { padding: 100px 0 72px; }
body.home .hero h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 16px;
  color: #e8d68a;
}
body.home .hero h1 span { color: #c9a227; }
body.home .hero .lede {
  font-size: 1.1rem;
  color: #8a7e60;
  max-width: 460px;
  margin-bottom: 28px;
  line-height: 1.5;
}
body.home .hero-links { display: flex; gap: 16px; flex-wrap: wrap; }
body.home .hero-links a {
  font-weight: 600; font-size: .9rem;
  padding: 10px 20px;
  border: 1px solid rgba(212,175,55,.2);
  border-radius: 4px;
  color: #e8d68a;
}
body.home .hero-links a:hover {
  border-color: rgba(212,175,55,.5);
  background: rgba(212,175,55,.05);
}

body.home .features { padding: 32px 0 72px; }
body.home .feature {
  display: flex; align-items: stretch;
  margin-bottom: 24px;
  border: 1px solid rgba(212,175,55,.08);
  border-radius: 8px;
  overflow: hidden;
  color: inherit;
}
body.home .feature:hover { border-color: rgba(212,175,55,.2); }
body.home .feature-visual { flex: 0 0 45%; overflow: hidden; }
body.home .feature-visual img { width: 100%; height: 100%; object-fit: cover; }
body.home .feature-text {
  flex: 1; padding: 28px;
  display: flex; flex-direction: column; justify-content: center;
}
body.home .feature-alt { flex-direction: row-reverse; }
body.home .feature-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: #6b6450; margin-bottom: 6px;
}
body.home .feature-text h2 {
  font-family: 'Syne', sans-serif;
  font-size: 1.35rem; font-weight: 700;
  color: #e8d68a; margin-bottom: 6px; letter-spacing: -.01em;
}
body.home .feature-text p { color: #8a7e60; font-size: .92rem; }

body.home footer { color: #4a4530; border-top: 1px solid rgba(212,175,55,.06); }

/* ============================================
   GTA 6 PAGE — VICE CITY
   ============================================ */
body.gta6 { background: #0a0410; color: #e8d8e8; }
body.gta6 header { background: #0a0410; border-bottom: 1px solid rgba(255,0,110,.1); }
body.gta6 .logo { color: #fff; }
body.gta6 .logo span { color: #ff006e; }
body.gta6 nav a { color: #8a6a8a; }
body.gta6 nav a:hover, body.gta6 nav a.active { color: #ff006e; }
body.gta6 nav a::after { background: #ff006e; }

body.gta6 .gta-hero { position: relative; overflow: hidden; }
body.gta6 .gta-hero-img { width: 100%; height: 400px; object-fit: cover; }
body.gta6 .gta-hero-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 48px 0 36px;
  background: linear-gradient(to top, rgba(10,4,16,.96) 0%, rgba(10,4,16,.4) 70%, transparent 100%);
}
body.gta6 .gta-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.5rem, 10vw, 6rem);
  font-weight: 400; letter-spacing: .02em;
  color: #fff; margin-bottom: 6px; line-height: .9;
}
body.gta6 .gta-subtitle { color: #c0a0c0; font-size: 1.05rem; margin-bottom: 24px; }

/* Countdown — inline, not boxes */
body.gta6 .countdown {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 6vw, 3.5rem);
  letter-spacing: .02em;
  display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap;
}
body.gta6 .countdown .num { color: #ff006e; font-variant-numeric: tabular-nums; }
body.gta6 .countdown .sep { color: #ff8c42; margin: 0 8px 0 2px; font-size: .65em; }

body.gta6 section h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.7rem; letter-spacing: .03em;
  margin-bottom: 20px; color: #ff8c42;
}

/* Definition list instead of card grid */
body.gta6 .info-list { list-style: none; }
body.gta6 .info-list li {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,0,110,.07);
  font-size: .93rem;
}
body.gta6 .info-list li .label { color: #8a6a8a; }
body.gta6 .info-list li .value { font-weight: 600; }

body.gta6 a { color: #00d5e0; }
body.gta6 a:hover { color: #ff006e; }
body.gta6 footer { color: #5a3a5a; border-top: 1px solid rgba(255,0,110,.06); }

/* ============================================
   CHELSEA PAGE — CHELSEA BLUE
   ============================================ */
body.chelsea { background: #01102e; color: #d0dae8; }
body.chelsea header { background: #01102e; border-bottom: 1px solid rgba(10,132,255,.1); }
body.chelsea .logo { color: #fff; }
body.chelsea .logo span { color: #0a84ff; }
body.chelsea nav a { color: #5a7ab0; }
body.chelsea nav a:hover, body.chelsea nav a.active { color: #4da6ff; }
body.chelsea nav a::after { background: #0a84ff; }

body.chelsea .chelsea-banner { height: 180px; overflow: hidden; }
body.chelsea .banner-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }

body.chelsea .chelsea-header { padding: 36px 0; text-align: center; }
body.chelsea .crest { width: 68px; height: 68px; margin: 0 auto 10px; }
body.chelsea .chelsea-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 600; letter-spacing: .02em;
  color: #fff; text-transform: uppercase;
}
body.chelsea .chelsea-season { color: #5a7ab0; font-size: .95rem; margin-top: 2px; }

/* Stat strip — horizontal, not cards */
body.chelsea .stat-strip {
  padding: 20px 0;
  border-top: 1px solid rgba(10,132,255,.1);
  border-bottom: 1px solid rgba(10,132,255,.1);
}
body.chelsea .stat-strip .container {
  display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 12px;
}
body.chelsea .stat-item { text-align: center; }
body.chelsea .stat-num {
  font-family: 'Oswald', sans-serif;
  font-size: 1.8rem; font-weight: 700;
  color: #4da6ff; display: block;
}
body.chelsea .stat-desc {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #5a7ab0;
}
body.chelsea .stat-divider { width: 1px; height: 28px; background: rgba(10,132,255,.15); }

body.chelsea .section-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.25rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 12px; padding-bottom: 6px;
  border-bottom: 2px solid #034694; color: #fff;
}

body.chelsea table th { color: #5a7ab0; border-bottom: 1px solid rgba(10,132,255,.1); }
body.chelsea table td { border-bottom: 1px solid rgba(10,132,255,.05); }
body.chelsea tbody tr:hover { background: rgba(10,132,255,.04); }
body.chelsea .tag-blue { background: rgba(10,132,255,.12); color: #4da6ff; }

/* Result indicators — letters, not emoji */
.result-w { color: #4ade80; font-size: .8em; font-weight: 600; }
.result-l { color: #f87171; font-size: .8em; font-weight: 600; }

body.chelsea a { color: #4da6ff; }
body.chelsea a:hover { color: #fff; }
body.chelsea footer { color: #3a5a8a; border-top: 1px solid rgba(3,70,148,.1); }

/* NEWS SLIDER — shared */
.news-slider {
  margin: 40px 0 0;
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
}
.news-slider-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid transparent;
}
.news-slider-title {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}
.news-slider-controls { display: flex; gap: 8px; align-items: center; }
.news-slider-btn {
  background: none; border: 1px solid transparent; cursor: pointer;
  width: 28px; height: 28px; border-radius: 4px; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
  color: inherit;
  opacity: .5;
}
.news-slider-btn:hover { opacity: 1; }
.news-slider-btn:disabled { opacity: .2; cursor: default; }
.news-slider-dots { display: flex; gap: 4px; margin-right: 8px; }
.news-slider-dot {
  width: 6px; height: 6px; border-radius: 50%; cursor: pointer;
  background: currentColor; opacity: .2; transition: opacity .2s ease;
  border: none; padding: 0;
}
.news-slider-dot.active { opacity: 1; }

.news-slider-items {
  position: relative; min-height: 90px;
  transition: min-height .3s ease;
}
.news-item {
  padding: 16px 20px;
  display: none;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease;
}
.news-item.active { display: block; }
.news-item:hover { background: rgba(128,128,128,.04); }
.news-item-link {
  font-weight: 600; font-size: 1rem; line-height: 1.35;
  display: block; margin-bottom: 4px;
}
.news-item-meta {
  font-size: .78rem; opacity: .5;
}
.news-slider-empty {
  padding: 24px 20px; text-align: center; font-size: .88rem; opacity: .4;
}

/* GTA 6 news slider theme */
body.gta6 .news-slider { border-color: rgba(255,0,110,.12); background: rgba(255,0,110,.03); }
body.gta6 .news-slider-header { border-color: rgba(255,0,110,.08); }
body.gta6 .news-slider-title { color: #ff006e; }
body.gta6 .news-slider-btn { border-color: rgba(255,0,110,.15); color: #ff006e; }
body.gta6 .news-slider-btn:hover { background: rgba(255,0,110,.08); }
body.gta6 .news-slider-dot { color: #ff006e; }
body.gta6 .news-item-link { color: #e8d8e8; }
body.gta6 .news-item-link:hover { color: #ff006e; }
body.gta6 .news-item-meta { color: #8a6a8a; }

/* Chelsea news slider theme */
body.chelsea .news-slider { border-color: rgba(10,132,255,.12); background: rgba(10,132,255,.03); }
body.chelsea .news-slider-header { border-color: rgba(10,132,255,.08); }
body.chelsea .news-slider-title { color: #4da6ff; }
body.chelsea .news-slider-btn { border-color: rgba(10,132,255,.15); color: #4da6ff; }
body.chelsea .news-slider-btn:hover { background: rgba(10,132,255,.08); }
body.chelsea .news-slider-dot { color: #4da6ff; }
body.chelsea .news-item-link { color: #d0dae8; }
body.chelsea .news-item-link:hover { color: #4da6ff; }
body.chelsea .news-item-meta { color: #5a7ab0; }

/* RESPONSIVE — tablets and small desktops */
@media (max-width: 768px) {
  body.home .feature, body.home .feature-alt { flex-direction: column; }
  body.home .feature-visual { flex: 0 0 200px; }
}

/* RESPONSIVE — mobile */
@media (max-width: 640px) {
  /* Tighter container padding */
  .container { padding: 0 16px; }
  .header-inner { padding: 0 16px; }

  /* Stack header, bigger touch targets */
  .header-inner { flex-direction: column; gap: 4px; padding-bottom: 8px; }
  nav { gap: 20px; }
  nav a { font-size: .95rem; padding: 8px 0; min-height: 44px; display: flex; align-items: center; }

  /* Homepage */
  body.home .hero { padding: 60px 0 40px; }
  body.home .hero h1 { font-size: clamp(2rem, 9vw, 3rem); }
  body.home .hero .lede { font-size: 1rem; }
  body.home .feature-visual { flex: 0 0 160px; }
  body.home .feature-text { padding: 20px; }
  body.home .feature-text h2 { font-size: 1.15rem; }
  body.home .feature-text p { font-size: .88rem; }

  /* GTA 6 */
  body.gta6 .gta-hero-img { height: 220px; object-fit: cover; object-position: center top; }
  body.gta6 .gta-hero-content { padding: 24px 0 20px; }
  body.gta6 .gta-title { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  body.gta6 .gta-subtitle { font-size: .92rem; }
  body.gta6 .countdown { font-size: clamp(1.6rem, 8vw, 2.5rem); gap: 1px; }
  body.gta6 .countdown .sep { margin: 0 4px 0 1px; }
  body.gta6 .info-list li { font-size: .88rem; padding: 8px 0; }
  body.gta6 section { padding: 0; }
  body.gta6 section .container { padding-top: 4px; padding-bottom: 4px; }
  body.gta6 section h2 { font-size: 1.4rem; margin-top: 20px; }

  /* Chelsea */
  body.chelsea .chelsea-banner { height: 110px; }
  body.chelsea .chelsea-header { padding: 24px 0; }
  body.chelsea .crest { width: 52px; height: 52px; }
  body.chelsea .chelsea-title { font-size: clamp(1.5rem, 7vw, 2rem); }
  body.chelsea .stat-strip .container { flex-direction: column; gap: 14px; }
  body.chelsea .stat-divider { display: none; }
  body.chelsea .stat-num { font-size: 1.5rem; }
  body.chelsea .stat-desc { font-size: .78rem; }
  body.chelsea .section-title { font-size: 1.1rem; }

  /* Tables — compact, scrollable if needed, but text wraps */
  table { font-size: .85rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { padding: 8px 10px; }
  th { font-size: .68rem; }

  /* News slider — mobile friendly */
  .news-slider { margin: 24px 0 0; }
  .news-slider-header { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .news-slider-title { font-size: .75rem; }
  .news-slider-btn { width: 44px; height: 44px; font-size: 1rem; }
  .news-slider-dots { gap: 3px; margin-right: 4px; }
  .news-slider-dot { width: 7px; height: 7px; }
  .news-item { padding: 14px; }
  .news-item-link { font-size: .92rem; }
  .news-item-meta { font-size: .75rem; }
  .news-slider-items { min-height: 80px; }
}

/* Very small phones (iPhone SE, 320px) */
@media (max-width: 360px) {
  .container { padding: 0 12px; }
  .header-inner { padding: 0 12px; }
  nav { gap: 16px; }
  nav a { font-size: .88rem; }
  body.home .hero h1 { font-size: 2rem; }
  body.gta6 .gta-title { font-size: 2.2rem; }
  body.gta6 .countdown { font-size: 1.6rem; }
  body.chelsea .stat-num { font-size: 1.3rem; }
  .news-slider-header { padding: 10px 12px; }
  .news-slider-title { font-size: .68rem; }
}

/* Prevent horizontal scroll */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }