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

:root {
  --d-bg: #0a0a0f;
  --d-panel: #13131a;
  --d-panel2: #1c1c26;
  --d-text: #ffffff;
  --d-muted: #7a7a8c;
  --d-yellow: #ffd60a;
  --d-sporting: #16a34a;
  --d-porto: #1d4ed8;
  --d-benfica: #dc2626;
  --d-others: #52525b;
}

body {
  background: var(--d-bg);
  color: var(--d-text);
  font-family: 'Inter Tight', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,255,255,0.05), transparent 60%);
}

#dashboard { max-width: min(1520px, 94vw); margin: 0 auto; padding: 20px 20px 0; }

.d-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--d-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.d-h2 {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.d-accent { color: var(--d-yellow); }

/* Header */
.d-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--d-panel2);
  gap: 20px;
  flex-wrap: wrap;
}
.d-header-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.d-header-right { text-align: right; }
.d-live {
  background: var(--d-yellow);
  color: var(--d-bg);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  padding: 4px 8px;
}
/* Custom dropdown — not a native <select>, whose open <option> list is
   OS-rendered on Chrome/macOS and ignores CSS (blue highlight, system
   font). Same card language as the calendar's hover tooltip: solid dark
   background, panel border, rounded corners, drifting shadow. Uses
   --d-panel rather than --d-bg (what the tooltip itself uses) because
   this control sits directly on the page background — which *is*
   --d-bg — so matching it renders invisibly flat. The tooltip gets away
   with --d-bg only because it floats over colorful calendar cells, not
   the plain page. */
.d-epoca-dropdown { position: relative; }
.d-epoca-select {
  background-color: var(--d-panel);
  color: var(--d-yellow);
  border: 1px solid var(--d-panel2);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  cursor: pointer;
  transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out;
}
.d-epoca-select:hover, .d-epoca-select:focus {
  border-color: var(--d-yellow);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  outline: none;
}
.d-epoca-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  background: var(--d-panel);
  border: 1px solid var(--d-panel2);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  z-index: 30;
  animation: tip-in 0.1s ease-out;
}
.d-epoca-option {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--d-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: left;
  white-space: nowrap;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.08s ease-out;
}
.d-epoca-option:hover { background: var(--d-panel2); }
.d-epoca-option.active { color: var(--d-yellow); }
.d-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--d-muted);
  text-transform: uppercase;
}
.d-cta {
  display: inline-block;
  background: var(--d-yellow);
  color: var(--d-bg);
  font-weight: 800;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: transform 0.15s ease;
}
.d-cta:hover { transform: scale(1.04); }
.d-cta-small { padding: 5px 12px; font-size: 0.7rem; margin-bottom: 8px; }

.d-title {
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: none;
}
.d-tagline {
  font-family: 'JetBrains Mono', monospace;
  color: var(--d-muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  margin-top: 5px;
  text-transform: uppercase;
}

/* Briefing */
.d-brief {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  background: var(--d-panel);
  border: 1px solid var(--d-panel2);
  margin: 24px 0 28px;
}
.d-brief-copy { padding: 22px 24px; border-right: 1px solid var(--d-panel2); }
.d-brief-copy p { font-size: 1.05rem; line-height: 1.5; }
.d-brief-copy mark {
  background: var(--d-yellow);
  color: var(--d-bg);
  padding: 1px 6px;
  font-weight: 700;
}
.d-brief-right { padding: 22px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
.d-methodology p { font-size: 0.75rem; color: var(--d-text); opacity: 0.85; line-height: 1.5; }
.d-brief-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  font-family: 'JetBrains Mono', monospace;
}
.d-brief-num { display: block; font-size: 1.5rem; font-weight: 900; color: var(--d-yellow); line-height: 1; }
.d-brief-label { display: block; font-size: 0.62rem; letter-spacing: 0.1em; color: var(--d-muted); text-transform: uppercase; margin-top: 4px; }

.d-section { margin-bottom: 40px; }

/* Papers */
.d-papers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.paper-card {
  background: var(--d-panel);
  border: 1px solid var(--d-panel2);
  border-top: 4px solid var(--club-color, var(--d-yellow));
  position: relative;
  overflow: hidden;
}
.paper-card .p-wash {
  position: absolute;
  top: 0; right: 0;
  width: 45%;
  height: 100%;
  background: var(--club-color, var(--d-yellow));
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  opacity: 0.18;
}
.paper-card .p-edge {
  position: absolute;
  top: 0; right: 0;
  width: 8px;
  height: 100%;
  background: var(--club-color, var(--d-yellow));
}
.paper-card .p-content { position: relative; padding: 20px; }
.paper-card .p-label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.14em; color: var(--d-muted); text-transform: uppercase; margin-bottom: 4px; }
.paper-card .p-name { font-size: 1.8rem; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 0.95; margin-bottom: 14px; }
.paper-card .p-club { font-size: 1.6rem; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--club-color); line-height: 0.95; }
.paper-card .p-pct { font-family: 'JetBrains Mono', monospace; font-size: 1.9rem; font-weight: 900; margin: 10px 0 16px; }
.paper-card .p-pct small { font-size: 1rem; color: var(--d-muted); }
.p-bar-row { display: grid; grid-template-columns: 42px 1fr 44px; align-items: center; gap: 8px; font-size: 0.68rem; margin-bottom: 5px; }
.p-bar-row .p-bar-key { font-family: 'JetBrains Mono', monospace; color: var(--d-muted); }
.p-bar-track { height: 6px; background: var(--d-bg); }
.p-bar-fill { display: block; height: 100%; }
.p-bar-row .p-bar-val { font-family: 'JetBrains Mono', monospace; text-align: right; font-weight: 700; }

/* Calendar */
.d-cal-controls-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.d-filter-group { display: flex; border: 1px solid var(--d-panel2); }
.d-filter-group button {
  background: transparent; color: var(--d-text); border: none; border-left: 1px solid var(--d-panel2);
  padding: 7px 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.d-filter-group button:first-child { border-left: none; }
.d-filter-group button.active { background: var(--d-yellow); color: var(--d-bg); }
.d-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--d-muted); }
.d-legend span { display: inline-flex; align-items: center; gap: 5px; }
.d-legend i { width: 10px; height: 10px; display: inline-block; }

.d-calendar { background: var(--d-panel); border: 1px solid var(--d-panel2); padding: 18px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.cal-month .cal-month-label { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--d-muted); font-weight: 700; margin-bottom: 5px; }
.cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-day {
  aspect-ratio: 1; cursor: pointer; opacity: 0.65; position: relative;
  transition: transform 0.08s ease-out, opacity 0.08s ease-out, box-shadow 0.08s ease-out;
}
.cal-day.empty { visibility: hidden; }
.cal-day.majority { opacity: 0.85; }
.cal-day.unanimous { opacity: 1; }
.cal-day .pulse { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; pointer-events: none; }

/* Tap/click-driven equivalent of the hover scale below, toggled via JS
   (not :hover) so it also works on touch — this is what shows a chosen
   day as "picked" while its details are open in the panel underneath. */
.cal-day.selected {
  transform: scale(1.35);
  opacity: 1;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Hover-only: scale/tooltip on mouse-over. Gated behind (hover: hover) so
   touch taps don't trigger a "stuck" hover state on mobile — a tap would
   otherwise scale the day up and pop the tooltip with no way to dismiss
   it short of tapping elsewhere. */
@media (hover: hover) {
  .cal-day:not(.empty):hover {
    transform: scale(1.35);
    opacity: 1;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  }

  .bc-day:hover { opacity: 1; outline: 1px solid var(--d-text); outline-offset: -1px; z-index: 10; }

  /* Custom tooltip (data-tip) instead of the native title attribute —
     the browser default has a slow show delay and unstyled OS chrome.
     .bc-day is NOT here: it lives inside .d-barcode's own overflow-x:auto,
     so a CSS-positioned tooltip on a stripe near the scrolled edge gets
     clipped by that same overflow instead of floating free — see the
     JS-positioned #bc-tooltip near .d-barcode below instead. */
  .cal-day[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--d-bg);
    border: 1px solid var(--d-panel2);
    color: var(--d-text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 20;
    animation: tip-in 0.1s ease-out;
  }
  .cal-day[data-tip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--d-panel2);
    margin-bottom: 3px;
    z-index: 20;
    animation: tip-in 0.1s ease-out;
  }
}
@keyframes tip-in {
  from { opacity: 0; transform: translate(-50%, 2px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Barcode: one stripe per day, one row per paper. Scrolls sideways rather than
   dropping days when the season is longer than the viewport is wide. */
.d-barcode-block { margin-top: 22px; border-top: 1px solid var(--d-panel2); padding-top: 18px; }
.d-barcode-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 12px; }
.d-barcode-range { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.06em; color: var(--d-muted); }
/* Scrollbar hidden: the row already scrolls fine by drag/trackpad/shift-wheel,
   and a bar permanently pinned under three thin colour rows read as a stray
   UI element more than a hint. scrollbar-width/-ms-overflow-style still leave
   the element scrollable, just undrawn. */
.d-barcode {
  background: var(--d-panel); border: 1px solid var(--d-panel2); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.d-barcode::-webkit-scrollbar { display: none; }

/* JS-positioned (dashboard.js), not the .cal-day ::after/::before pattern —
   this one has to escape .d-barcode's own overflow-x:auto, which a
   CSS-absolute tooltip anchored to a stripe near the scrolled edge cannot:
   it gets clipped by that same overflow instead of floating free. Fixed
   positioning sidesteps it and lets the position be clamped to the
   viewport so it never runs off the right edge either. */
.bc-tooltip {
  position: fixed;
  background: var(--d-bg);
  border: 1px solid var(--d-panel2);
  color: var(--d-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 30;
  animation: bc-tip-in 0.1s ease-out;
}
.bc-tooltip.hidden { display: none; }
/* No horizontal translate baked in, unlike .cal-day's tip-in — this one's
   left/top are already the final clamped position, set in JS. */
@keyframes bc-tip-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* max-content so the row spans the whole scroll width — a row stretched to the
   visible width only would drag the sticky label off-screen with it. */
.d-barcode-row { display: flex; align-items: center; gap: 12px; width: max-content; min-width: 100%; }
.bc-label { position: sticky; left: 0; z-index: 1; background: var(--d-panel); flex: 0 0 62px; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-muted); }
.bc-strip { flex: 1; display: flex; height: 34px; }
.bc-day {
  flex: 1 1 0; min-width: 2px; position: relative; opacity: 0.82; cursor: pointer;
  transition: transform 0.08s ease-out, opacity 0.08s ease-out, box-shadow 0.08s ease-out;
}
/* Same tap-driven "picked" state as .cal-day.selected, and the reverse of it:
   picking a day here opens it in the day panel and selects it on the
   calendar too — see selectByDate() in dashboard.js. */
.bc-day.selected {
  transform: scale(1.35);
  opacity: 1;
  outline: 2px solid var(--d-yellow);
  outline-offset: -1px;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.d-day-panel { margin-top: 14px; background: var(--d-panel); border-left: 4px solid var(--d-panel2); padding: 14px 18px; min-height: 60px; display: flex; align-items: center; }
.d-day-hint { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--d-muted); text-align: center; width: 100%; }
.d-day-body { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; width: 100%; }
.d-day-title { font-size: 0.68rem; font-family: 'JetBrains Mono', monospace; color: var(--d-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.d-day-winner { font-size: 1.3rem; font-weight: 900; font-style: italic; text-transform: uppercase; margin-top: 2px; }
.d-day-papers { display: flex; gap: 8px; }
.d-day-papers > div { width: 58px; text-align: center; }
.d-day-papers img { width: 100%; aspect-ratio: 0.72; object-fit: cover; box-shadow: 0 3px 10px rgba(0,0,0,0.4); cursor: zoom-in; transition: transform 0.15s ease; }
.d-day-papers img:hover { transform: scale(1.05); }
.d-day-papers .dp-empty { width: 100%; aspect-ratio: 0.72; background: var(--d-bg); display: flex; align-items: center; justify-content: center; color: var(--d-muted); font-family: 'JetBrains Mono', monospace; }
.d-day-papers .dp-name { font-size: 0.5rem; color: var(--d-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
.d-day-papers .dp-club { font-size: 0.68rem; font-weight: 700; margin-top: 1px; }
/* The morning after a European night. The panel's own left accent takes the
   competition's colour, and the night is named on a tag above the date. */
.d-day-panel.dp-euro { display: block; border-left-color: var(--euro); }
.d-day-panel .dp-banner {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  color: #0a0a0f;
  background: var(--euro);
}
.d-day-panel.dp-euro-cl   { --euro: #6f8fd0; }
.d-day-panel.dp-euro-el   { --euro: #ff8a00; }
.d-day-panel.dp-euro-uecl { --euro: #2ecc8f; }

.d-day-alert { margin-top: 6px; padding: 5px 7px; background: rgba(255,214,10,0.1); border-left: 2px solid var(--d-yellow); font-size: 0.6rem; font-family: 'JetBrains Mono', monospace; color: var(--d-yellow); text-transform: uppercase; }

/* O Suspeito */
.d-suspeito-intro { font-size: 0.95rem; line-height: 1.55; color: var(--d-text); opacity: 0.9; max-width: 62ch; margin-bottom: 18px; }
.d-suspeito-btn { border: none; cursor: pointer; font-family: inherit; }

.d-suspeito-results { margin-top: 22px; display: grid; gap: 14px; }
@media (min-width: 640px) {
  .d-suspeito-results { grid-template-columns: 1fr 1fr; }
  .d-suspeito-incidents { grid-column: 1 / -1; }
}

.s-card {
  background: var(--d-panel);
  border: 1px solid var(--d-panel2);
  padding: 18px 20px;
}
.s-card h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--d-muted);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.s-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--d-panel2);
}
.s-row:first-of-type { border-top: none; }
.s-row .s-name { font-weight: 700; }
.s-row .s-count { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 1.1rem; color: var(--d-yellow); font-variant-numeric: tabular-nums; }
.s-empty { font-size: 0.85rem; color: var(--d-muted); padding: 4px 0; }

.d-suspeito-incidents .s-inc {
  font-size: 0.8rem;
  color: var(--d-muted);
  padding: 7px 0;
  border-top: 1px solid var(--d-panel2);
}
.d-suspeito-incidents .s-inc:first-of-type { border-top: none; }
.d-suspeito-incidents .s-inc b { color: var(--d-text); font-variant-numeric: tabular-nums; }

/* Latest */
.d-latest .d-latest-inner {
  background: linear-gradient(135deg, var(--d-panel), var(--d-panel2));
  border: 1px solid var(--d-panel2);
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 0;
}
/* "Conversa" sits flush underneath with no gap — one continuous card, its own
   top border reading as the only divider between verdict and comments. */
#latest { margin-bottom: 0; }
#latest .d-latest-inner { border-bottom: none; }
/* min-width:0 for the same reason .d-latest-right has it below: a grid item
   otherwise refuses to shrink past its content's natural width, and
   #latest-title's white-space:nowrap makes that natural width the whole
   unshrunk headline. Without it the column — and the whole card, and the
   page — grows past the viewport on narrow screens instead of #latest-title
   ever getting the chance to shrink into fitTextToContainer's clamp. */
.d-latest-left { min-width: 0; padding: 24px 26px; }
#latest-title { white-space: nowrap; overflow: hidden; }
.d-latest-desc { font-size: 0.82rem; color: var(--d-muted); line-height: 1.5; margin-top: 6px; }
.d-latest-date { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--d-muted); letter-spacing: 0.1em; margin-top: 14px; text-transform: uppercase; }
.d-latest-covers { display: flex; gap: 8px; margin-top: 10px; }
.d-latest-covers > div { flex: 1; text-align: center; }
.d-latest-covers img { width: 100%; aspect-ratio: 0.72; object-fit: cover; box-shadow: 0 4px 14px rgba(0,0,0,0.4); cursor: zoom-in; transition: transform 0.15s ease; }
.d-latest-covers img:hover { transform: scale(1.03); }
.d-latest-covers .lc-name { font-size: 0.6rem; font-family: 'JetBrains Mono', monospace; color: var(--d-muted); margin-top: 4px; text-transform: uppercase; }
.d-latest-covers .lc-club { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; margin-top: 1px; }
/* min-width:0 — this is itself a grid item of .d-latest-inner, and grid
   items have the same min-width:auto-refuses-to-shrink default as flex
   items. Without it, this column grows to fit #latest-winner's
   unshrunk content width regardless of the min-width:0 set there,
   pushing the whole card past the viewport edge. */
.d-latest-right { min-width: 0; padding: 24px 26px; border-left: 1px solid var(--d-panel2); display: flex; flex-direction: column; justify-content: center; }
/* min-width:0 overrides the flex item default of min-width:auto, which
   otherwise refuses to shrink below the text's natural width — without
   it, fitTextToContainer's scrollWidth/clientWidth comparison always
   read as "already fits" (both track the unshrunk content width) even
   while the text visibly overflowed its container. */
.d-latest-winner { min-width: 0; font-size: clamp(2.4rem, 8vw, 4.5rem); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 0.85; white-space: nowrap; overflow: hidden; }
.d-latest-conf-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.d-latest-conf-track { flex: 1; height: 6px; background: var(--d-bg); }
.d-latest-conf-fill { height: 100%; }
.d-latest-conf-label { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }

/* AI detector — same card as "Hoje é dia de quem?", two extra readouts */
#ai-title { white-space: nowrap; overflow: hidden; }
.d-ai-agreement { color: var(--d-yellow); font-weight: 700; }
.d-ai-papers { display: flex; flex-direction: column; gap: 12px; }
.d-ai-paper { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.d-ai-paper-name { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--d-muted); text-transform: uppercase; }
.d-ai-paper-club { font-weight: 800; text-transform: uppercase; }
.d-ai-paper-headline { flex-basis: 100%; font-size: 0.75rem; color: var(--d-muted); font-style: italic; }
.d-ai-paper-why { flex-basis: 100%; font-size: 0.7rem; color: var(--d-yellow); }
.d-ai-vs { margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 7px; background: rgba(255,214,10,0.1); border-left: 2px solid var(--d-yellow); color: var(--d-yellow); }
.d-ai-vs.disagrees { background: rgba(255,255,255,0.05); border-left-color: var(--d-muted); color: var(--d-muted); }

/* Terminal readout instead of a plain eyebrow — the one green thing on the
   page, so the machine's card doesn't read as another community section. */
.d-ai-live { display: inline-flex; align-items: center; gap: 7px; color: #3ddc84; }
.d-ai-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
  animation: ai-blink 2.4s ease-in-out infinite;
}
@keyframes ai-blink { 50% { opacity: 0.2; } }

/* Mirrors the app's Histórico — month picker first, then that month's covers
   as dense portrait cards with the caption over the cover — so the two
   products look like one. */
.d-ai-diffs-btn { margin-top: 16px; }
.d-ai-diffs { margin-top: 16px; }

/* ── Month picker ── */
.d-ai-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

.d-ai-month { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 10px 14px; background: var(--d-panel2); border: 1px solid rgba(255,255,255,0.08); color: inherit; font: inherit; cursor: pointer; transition: border-color 0.2s ease, transform 0.15s ease; }
.d-ai-month:hover { border-color: var(--d-yellow); transform: translateY(-2px); }
.d-ai-month:hover .d-ai-stack { transform: translateY(-2px); }

.d-ai-stack { position: relative; width: 72px; height: 96px; transition: transform 0.2s ease; }
.d-ai-bc { position: absolute; inset: 0; overflow: hidden; background: var(--d-panel); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.d-ai-bc img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.d-ai-bc.bc-0 { z-index: 3; }
.d-ai-bc.bc-1 { transform: rotate(4deg) translate(7px, 3px); z-index: 2; }
.d-ai-bc.bc-2 { transform: rotate(-5deg) translate(-7px, 5px); z-index: 1; }

.d-ai-count { position: absolute; top: -8px; right: -8px; z-index: 10; background: var(--d-yellow); color: var(--d-bg); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; padding: 2px 7px; }
.d-ai-mlabel { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; line-height: 1.3; }

.d-ai-back { display: block; margin-bottom: 12px; background: none; border: none; padding: 0; color: var(--d-yellow); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: color 0.2s ease, transform 0.1s ease; }
.d-ai-back:hover { color: var(--d-text); }
.d-ai-back:active { transform: translateX(-2px); }

/* ── One month's covers ── */
.d-ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; align-items: start; }

.d-ai-diff { margin: 0; position: relative; background: #14141b; cursor: zoom-in; }
.d-ai-diff::before { content: ''; display: block; padding-bottom: 133.33%; }
.d-ai-diff img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* The caption is opaque at its foot and fades up into the cover, so it reads
   as a label strip stuck to the card rather than part of the image. */
.d-ai-diff figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 3px 3px; background: linear-gradient(transparent, rgba(0,0,0,0.75) 45%, #000 75%); pointer-events: none; }
.d-ai-diff .ad-date { font-family: 'JetBrains Mono', monospace; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.95); text-align: center; line-height: 1.2; margin-bottom: 3px; }
.d-ai-diff .ad-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.d-ai-diff .ad-v { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; font-weight: 700; color: #fff; text-align: center; padding: 2px 0 3px; line-height: 1.1; }
.d-ai-diff .ad-v i { display: block; font-style: normal; font-size: 0.42rem; font-weight: 500; letter-spacing: 0.08em; opacity: 0.8; }

@media (hover: hover) {
  .d-ai-diff:hover { outline: 1px solid var(--d-yellow); }
}

.d-footer { text-align: center; padding: 30px 0 50px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--d-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; }
.d-footer-nav { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 6px; }
.d-footer-nav a { color: var(--d-text); text-decoration: none; font-size: 0.75rem; letter-spacing: 0.04em; }
.d-footer-nav a:hover { color: var(--d-yellow); }
.d-footer-dot { color: var(--d-muted); }
.d-footer-copy { font-size: 0.68rem; opacity: 0.7; }

/* A capa media */
.d-avg-desc { max-width: 62ch; }
.d-avg-filter { margin: 0 0 18px; width: fit-content; }
.d-avg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.d-avg-card { margin: 0; background: var(--d-panel); border: 1px solid var(--d-panel2); padding: 10px; }
.d-avg-card img { width: 100%; aspect-ratio: 0.8; object-fit: cover; object-position: top; display: block; background: #fff; cursor: zoom-in; }
.d-avg-card figcaption {
  margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.d-avg-card figcaption span { color: var(--d-muted); font-weight: 400; letter-spacing: 0.04em; text-transform: none; }

.hidden { display: none !important; }

.d-cover-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
}
.d-cover-modal img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
/* Leaves room for the meta panel pinned to the bottom edge. */
.d-cover-modal--paging img { max-height: 68vh; }
.d-cover-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: var(--d-text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/* Prev/next for the "onde discordam" lightbox — hidden (see the `hidden`
   class on the buttons in index.html) for every other cover-modal opener,
   which only ever shows one image with nothing to page through. */
.d-cover-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--d-text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.d-cover-modal-nav:hover { background: rgba(255, 255, 255, 0.18); }
.d-cover-modal-nav:disabled { opacity: 0.25; cursor: default; }
.d-cover-modal-prev { left: 16px; }
.d-cover-modal-next { right: 16px; }

.d-cover-modal-meta {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 64px);
  max-width: 480px;
  background: rgba(10, 10, 15, 0.92);
  border: 1px solid var(--d-panel2);
  padding: 12px 16px;
  text-align: center;
  cursor: default;
}
.d-cover-modal-meta .cm-date { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--d-muted); text-transform: uppercase; margin-bottom: 8px; }
.d-cover-modal-meta .cm-result { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.d-cover-modal-meta .cm-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; color: #fff; padding: 3px 8px; }
.d-cover-modal-meta .cm-tag i { display: block; font-style: normal; font-size: 0.55rem; font-weight: 500; letter-spacing: 0.08em; opacity: 0.8; }
.d-cover-modal-meta .cm-headline { font-size: 0.8rem; font-style: italic; color: var(--d-text); }
.d-cover-modal-meta .cm-why { font-size: 0.75rem; color: var(--d-yellow); margin-top: 4px; }

/* ── Comentários ────────────────────────────────────────────────────── */

.d-comments {
  margin-top: 0;
  background: linear-gradient(135deg, var(--d-panel), var(--d-panel2));
  border: 1px solid var(--d-panel2);
  padding: 18px 20px 20px;
}
.d-comments-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.d-comments-ttl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--d-muted);
  text-transform: uppercase;
}

.d-comments-list {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.d-comment {
  padding: 10px 0;
  border-top: 1px solid var(--d-panel2);
  min-width: 0;
}
.d-comment:first-child { border-top: none; padding-top: 0; }
.d-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.d-comment-who { color: var(--d-yellow); font-weight: 700; text-transform: uppercase; }
.d-comment-when { color: var(--d-muted); font-variant-numeric: tabular-nums; }
.d-comment-body {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--d-text);
  overflow-wrap: anywhere;
}

.d-comments-form { margin-top: 14px; }
.d-comments-box { position: relative; }
.d-comments-form textarea {
  width: 100%;
  resize: vertical;
  background: var(--d-bg);
  color: var(--d-text);
  border: 1px solid var(--d-panel2);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
}
.d-comments-form textarea::placeholder { color: var(--d-muted); }
.d-comments-form textarea:focus-visible {
  outline: 2px solid var(--d-yellow);
  outline-offset: 1px;
  border-color: transparent;
}
.d-comments-form textarea:disabled { color: transparent; }

/* Blocks the textarea outright rather than just disabling it underneath —
   signing in is the point, not a thing to notice after typing. Toggled in
   renderCommentAuth(), same call that flips the textarea's disabled state. */
.d-comments-gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(10, 10, 15, 0.9);
  border-radius: 6px;
}
.d-comments-gate.hidden { display: none; }

.d-comments-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  min-height: 34px;
}
.d-comments-auth { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.d-comments-auth .d-cta-small {
  margin-bottom: 0;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.d-comments-hint {
  flex: 0 0 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--d-muted);
  text-transform: uppercase;
}
.d-comments-signout {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--d-muted);
  text-transform: uppercase;
  text-decoration: underline;
}
.d-comments-signout:hover { color: var(--d-text); }
.d-comments-error {
  font-size: 0.78rem;
  color: #ff6b6b;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .d-cta { transition: none; }
  .d-cta:hover { transform: none; }
  .d-ai-live::before { animation: none; }
}

@media (max-width: 760px) {
  /* Header order on mobile: title, then the AO VIVO/época cluster, then
     Entrar - was Entrar, title, AO VIVO (source/desktop order). display:
     contents drops .d-header-right's own box so its children (Entrar,
     title, tagline) become direct flex items of .d-header alongside
     .d-header-left, letting `order` reshuffle across that former
     boundary. Title/tagline/header-left get flex-basis: 100% so each
     takes its own full row; Entrar (kept at its natural button width)
     then has zero space left on that row and wraps to a row of its own. */
  .d-header-right { display: contents; }
  .d-title      { order: 1; flex-basis: 100%; text-align: left; }
  .d-tagline    { order: 2; flex-basis: 100%; text-align: left; }
  .d-header-left { order: 3; flex-basis: 100%; }
  .d-header-right .d-cta { order: 4; }

  .d-comments { padding: 16px; }
  .d-comments-list { max-height: 260px; }
  .d-brief { grid-template-columns: 1fr; }
  .d-brief-copy { border-right: none; border-bottom: 1px solid var(--d-panel2); }
  .d-brief-right { grid-template-columns: 1fr; }
  .d-papers { grid-template-columns: 1fr; }
  .d-calendar { grid-template-columns: repeat(3, 1fr); }
  .d-latest .d-latest-inner { grid-template-columns: 1fr; }
  .d-latest-right { border-left: none; border-top: 1px solid var(--d-panel2); }
  .d-day-body { grid-template-columns: 1fr; }
  .d-day-papers { flex-wrap: wrap; }
}

@media (max-width: 460px) {
  .d-calendar { grid-template-columns: repeat(2, 1fr); }

  /* Below this width, the eyebrow and legend can wrap to an extra
     line depending on which filter is active (their text/item count
     changes by state — see comments where these classes are defined).
     Reserving that line only in this narrow range avoids adding dead
     space above it at normal desktop widths, where nothing ever wraps
     and no reservation is needed. */
  #cal-eyebrow { min-height: 28px; }
  .d-legend { min-height: 35px; }
}

/* ─── Posse de bola dividida ─────────────────────────────────────────────── */
/* Club colour by class rather than inline style, so src/divided.js needs no
   import and its arithmetic stays testable in plain node. */
.d-club-benfica  { color: var(--d-benfica); }
.d-club-sporting { color: var(--d-sporting); }
.d-club-porto    { color: var(--d-porto); }
.d-club-others   { color: var(--d-others); }
.d-bg-benfica    { background: var(--d-benfica); }
.d-bg-sporting   { background: var(--d-sporting); }
.d-bg-porto      { background: var(--d-porto); }
.d-bg-others     { background: var(--d-others); }

.d-dividida-rows { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; }
.d-dividida-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--d-panel2);
}
.d-dividida-row[hidden] { display: none; }

.d-dividida-thumb {
  padding: 0;
  border: 1px solid var(--d-panel2);
  background: none;
  cursor: pointer;
  display: block;
  width: 72px;
  line-height: 0;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.d-dividida-thumb:hover { border-color: var(--d-yellow); transform: scale(1.03); }
.d-dividida-thumb img { width: 100%; height: auto; display: block; }

.d-dividida-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.d-dividida-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.d-dividida-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-muted);
}
.d-dividida-share {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.d-dividida-bar { display: flex; height: 10px; background: #000; overflow: hidden; }
.d-dividida-seg { display: block; }

.d-dividida-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.64rem;
  color: var(--d-muted);
}
.d-dividida-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; }
.d-dividida-legend b { color: var(--d-text); font-weight: 700; }

#btn-dividida { margin-top: 16px; }
#btn-dividida[hidden] { display: none; }

@media (max-width: 520px) {
  .d-dividida-row { gap: 12px; }
  .d-dividida-thumb { width: 58px; }
}