/*
 * Tea Hub styles, built on the Tweetea design system in assets/tt (copied from tea-tweetea-fe).
 * Its rules apply here too: pixel fonts in 16px steps (small text is 20px), hard black shadows,
 * no rounded corners, and frames from 9-slice sprites rather than CSS borders.
 */
@import '../assets/tt/styles.css';

html {
  color-scheme: dark;
}

:root {
  /* Between the kit's 20px small text and its 32px body: readable, without huge paragraphs. */
  --fs-body: 24px;
}

body {
  margin: 0;
  min-height: 100vh;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-shadow: var(--text-shadow-1);
  background:
    linear-gradient(rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.55)),
    url('../assets/tt/img/borders/background.png') center repeat var(--surface-page);
}

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

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: normal;
}

button {
  font: inherit;
  color: inherit;
  text-shadow: inherit;
  background: none;
  border: 0;
  padding: 0;
}

img,
video {
  display: block;
  max-width: 100%;
}

/* Screenshots and photos are not pixel art; only the kit's sprites stay nearest-neighbour. */
.photo {
  image-rendering: auto;
}

* {
  scrollbar-color: var(--stone-hi) var(--brown-deep);
}

:focus-visible {
  outline: 3px solid var(--osrs-yellow);
  outline-offset: 0;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01s !important;
    transition-duration: 0.01s !important;
  }
}

/* === Text === */

.t-quill {
  font-family: var(--font-quill);
}
.t-bold {
  font-family: var(--font-bold);
}
.t-2 {
  font-size: 32px;
  line-height: 1.125;
  text-shadow: 2px 2px 0 #000;
}
.t-3 {
  font-size: 48px;
  line-height: 1.125;
  text-shadow: 3px 3px 0 #000;
}
.t-orange {
  color: var(--osrs-orange);
}
.t-yellow {
  color: var(--osrs-yellow);
}
.t-white {
  color: var(--osrs-white);
}
.t-green {
  color: var(--osrs-green);
}
.t-cyan {
  color: var(--osrs-cyan);
}
.t-muted {
  color: var(--text-muted);
}
.t-glow {
  text-shadow:
    3px 3px 0 #000,
    0 0 12px currentColor;
}

/* === Layout === */

.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100vh;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.row {
  display: grid;
  /* minmax(0, …) even on one column, or unwrapped content (the teaser's placeholder lines) widens the page. */
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

@media (min-width: 900px) {
  .row--hero {
    /* minmax(0, …) so wide content, like the teaser's unwrapped placeholder lines, can't skew the split. */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  /* The banner gets its native 960px (plus the iron frame) so it shows whole and sharp. */
  .row--banner {
    grid-template-columns: minmax(0, 996px) minmax(0, 1fr);
  }
  .row--detail {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }
}

/* === Header === */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 24px;
  padding: 0 6px;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

@media (min-width: 900px) {
  .site-nav {
    margin-left: auto;
  }
}

/* === Stone button (TtButton, size sm) === */

.btn {
  position: relative;
  min-width: 96px;
  min-height: 48px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font-small);
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--osrs-yellow);
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}
.btn:hover,
.btn[aria-current='page'] {
  color: var(--osrs-white);
  filter: var(--hover-brighten);
}
.btn:active {
  filter: var(--press-darken);
}

/* A pressed sprite button slides into its own drop shadow (3px right, 4px down). */
.btn:active,
.btn[aria-current='page'] {
  transform: translate(3px, 4px);
  clip-path: inset(0 3px 4px 0);
}

/* === Panels === */

.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel__title {
  padding: 6px 12px 3px;
  font-family: var(--font-bold);
  font-size: 32px;
  line-height: 1.125;
  color: var(--osrs-orange);
  text-shadow: 2px 2px 0 #000;
  text-align: center;
}

.panel__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel__body--flush {
  padding: 6px;
}

.panel .tt-divider-h,
.panel .tt-divider-iron-h {
  flex: none;
  width: 100%;
}

/* Reading text inside panels: white body, yellow emphasis, like an OSRS book. */
.prose {
  color: var(--osrs-white);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prose em {
  font-style: normal;
  color: var(--osrs-yellow);
}

/* Bullets are little cups of tea, after the clan. (Gems belong to Tweetea's theme.) */
.tea-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: var(--osrs-white);
}
.tea-list li {
  position: relative;
  padding-left: 42px;
}
.tea-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 31px;
  height: 28px;
  background: url('../assets/images/cup-of-tea.png') center / 100% 100% no-repeat;
  image-rendering: pixelated;
}

/* === Display boxes (TtDisplayBox) === */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}

.display {
  min-height: 66px;
  padding: 3px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
}
.display__label {
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--osrs-orange);
}
.display__value {
  font-size: 32px;
  line-height: 1;
  color: var(--osrs-yellow);
  text-shadow: 2px 2px 0 #000;
}
.display__value--sm {
  font-size: var(--fs-body);
  line-height: 1.125;
  text-shadow: 1px 1px 0 #000;
  color: var(--osrs-white);
}

/* === Hero === */

/* Shown whole, never cropped; the frame sits at the top if the welcome panel runs taller. */
.hero-frame {
  align-self: start;
}
.hero-banner {
  width: 100%;
  height: auto;
}

/* === Event cards === */

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px;
}

.event-card {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.event-card:hover {
  filter: var(--hover-brighten);
  color: inherit;
}

.event-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #000;
  border: 3px solid #000;
}
/* Most covers are posters with the title at the top, so the crop keeps the top. */
.event-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.event-card__body {
  padding: 9px 6px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.event-card__title {
  font-family: var(--font-bold);
  font-size: 32px;
  line-height: 1.125;
  color: var(--osrs-orange);
  text-shadow: 2px 2px 0 #000;
}

/* The event's format, tagged on the top-left of its picture. */
.badge {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 0 6px;
  border: 3px solid #000;
  background: var(--tooltip-bg);
  box-shadow: 3px 3px 0 #000;
  color: var(--osrs-yellow);
}

/* === Sneak peek: placeholder content under a blur === */

.fake {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* As wide as its column, never as wide as the unwrapped placeholder text. */
  align-self: stretch;
  overflow: hidden;
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}
.fake span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  color: var(--text-muted);
}

/* Gem-coloured blobs on the panel texture, blurred: a cover that hints without showing. */
.fake-cover {
  position: absolute;
  inset: -24px;
  background:
    radial-gradient(circle at 22% 35%, var(--gem-red-glow) 0 8%, transparent 20%),
    radial-gradient(circle at 48% 62%, var(--gem-blue-glow) 0 9%, transparent 22%),
    radial-gradient(circle at 74% 30%, var(--gem-green-glow) 0 7%, transparent 19%),
    radial-gradient(circle at 80% 75%, var(--gem-purple-glow) 0 6%, transparent 18%),
    radial-gradient(circle at 30% 80%, var(--osrs-orange) 0 5%, transparent 16%),
    url('../assets/tt/img/borders/background.png') center / 400px repeat var(--brown-2);
  filter: blur(14px) saturate(1.2);
}

.event-card--teaser:hover {
  filter: none;
}

.row--teaser {
  align-items: center;
}
.row--teaser .event-card__media {
  aspect-ratio: 16 / 9;
}

/* === Inventory slots (TtSlot) === */

/* Big enough to tell what a picture is before opening it. */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 3px;
}
.slots--tall {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.slot {
  position: relative;
  aspect-ratio: 4 / 3;
  display: block;
  cursor: pointer;
  overflow: hidden;
}
.slots--tall .slot {
  /* The shape of a 1080-wide sheet cut at 1.4× (see the thumbnails), so none of its width is lost. */
  aspect-ratio: 5 / 7;
}
/* Shorter sheets (square newsletters) keep their full width too, with black below. */
.slots--tall .slot img {
  object-fit: contain;
  background: #000;
}
.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border: 3px solid #000;
}
.slot:hover {
  filter: var(--hover-brighten);
}

/* A video slot: a white play triangle with a hard black outline, centred on the poster. */
.slot--video::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 18px 0 18px 30px;
  border-color: transparent transparent transparent var(--osrs-white);
  filter: drop-shadow(3px 3px 0 #000);
  pointer-events: none;
}

/* === Section label inside a panel === */

.subhead {
  font-family: var(--font-bold);
  font-size: var(--fs-body);
  color: var(--osrs-orange);
  text-align: center;
}

/* === Facts list (event sidebar) === */

.facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.teams {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--osrs-white);
  text-align: center;
}
.teams .is-winner {
  color: var(--osrs-green);
}

/* === Hall of fame === */

/* One plaque per won event: the event above, the champion big and green below. */
.plaques {
  display: grid;
  /* Three across on desktop, so six champions make two full rows. */
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: 6px;
}
.plaque {
  min-height: 132px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  color: var(--osrs-orange);
}
.plaque:hover {
  filter: var(--hover-brighten);
  color: var(--osrs-orange);
}
.plaque__winner {
  font-family: var(--font-bold);
  font-size: 32px;
  line-height: 1.125;
  color: var(--osrs-green);
  text-shadow: 2px 2px 0 #000;
}

/* Award sheets, two to a row on desktop, large enough to read the nominations before opening. */
.awards {
  display: grid;
  gap: 6px;
}
@media (min-width: 900px) {
  .awards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.award {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.award__head {
  padding: 6px 12px 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 12px;
}
.award__head a {
  font-family: var(--font-bold);
  font-size: 32px;
  line-height: 1.125;
  color: var(--osrs-orange);
  text-shadow: 2px 2px 0 #000;
}
.award__head a:hover {
  color: var(--osrs-yellow);
}
.award .slot {
  aspect-ratio: 4 / 5;
}
/* === Members === */

.members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
}
.member {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Rendered at 240×320 and shown at that size or smaller, never stretched past it. */
.member__stage {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 3 / 4;
  image-rendering: pixelated;
}
.member__name {
  padding: 3px 6px 6px;
  font-family: var(--font-bold);
  color: var(--osrs-yellow);
  text-align: center;
}

/* === Footer === */

.site-footer {
  padding: 9px;
  text-align: center;
  color: var(--text-muted);
}

/* === Lightbox === */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgb(0 0 0 / 0.8);
}

.lightbox__frame {
  /* A set width, so a tall newsletter's percentage width has something to resolve against.
     Everything else gets a width that fits it exactly (fit() in js/site.js). */
  width: min(1400px, 100%);
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 6px;
}
/* The bar is already as tall as its buttons, so the caption can use the kit's 32px step. */
.lightbox__caption {
  flex: 1;
  text-align: center;
  font-size: 32px;
  line-height: 1.125;
  text-shadow: 2px 2px 0 #000;
  color: var(--osrs-yellow);
  min-width: 0;
}

.lightbox__stage {
  min-height: 0;
  display: flex;
  justify-content: center;
  /* Not stretched, or a tall picture would be squeezed to the stage's height. */
  align-items: flex-start;
  overflow: auto;
  background: #000;
  border: 3px solid #000;
}
/* Sized to fit by fit() in js/site.js once their own size is known. */
.lightbox__stage img,
.lightbox__stage video {
  flex: none;
  object-fit: contain;
}
.lightbox__embed {
  display: block;
  flex: none;
  border: 0;
}
/* Tall newsletters read top to bottom at full width rather than shrunk to fit the screen. */
.lightbox__stage--tall img {
  max-height: none;
  width: min(1080px, 100%);
}

.lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 6px;
}
.lightbox__counter {
  white-space: nowrap;
}

/* === OSRS touches === */

/* The examine box: dark beige, black outline, hard shadow (TtTooltip). */
.tooltip {
  position: fixed;
  z-index: 2500;
  width: max-content;
  max-width: 260px;
  padding: 4px 8px;
  border: 3px solid #000;
  background: var(--tooltip-bg);
  box-shadow: 4px 4px 0 #000;
  color: var(--osrs-white);
  font-size: var(--fs-body);
  line-height: 1.15;
  text-align: center;
  pointer-events: none;
}

/* The game's mouseover text: what clicking will do, in the top-left corner. Mouse only. */
.mouseover {
  position: fixed;
  z-index: 2600;
  left: 9px;
  top: 6px;
  font-family: var(--font-bold);
  font-size: var(--fs-body);
  color: var(--osrs-white);
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}
.mouseover b {
  font-weight: normal;
  color: var(--osrs-orange);
}
@media (hover: none) {
  .mouseover {
    display: none;
  }
}

/* The click cross: red when the click does something, yellow when it lands on nothing. */
.click-marker {
  position: fixed;
  z-index: 2700;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  pointer-events: none;
}

/* === Phones === */

/* Every frame and padding counts on a narrow screen: thinner gutters leave room for the content. */
@media (max-width: 600px) {
  .page {
    padding: 3px;
  }
  .panel__body {
    padding: 9px 3px;
  }
  .panel__body--flush {
    padding: 3px 0;
  }
  .panel__title {
    font-size: 28px;
  }
  .t-3 {
    font-size: 40px;
  }
  /* Two pictures a row: big enough to recognise, without a long scroll. */
  .slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .slots--tall {
    grid-template-columns: minmax(0, 1fr);
  }
  .slot--video::after {
    border-width: 12px 0 12px 20px;
  }
  .lightbox {
    padding: 3px;
  }
  .lightbox__caption {
    font-size: var(--fs-body);
    text-shadow: 1px 1px 0 #000;
  }
  .lightbox__nav {
    gap: 6px;
  }
  .lightbox__nav .btn {
    min-width: 0;
    padding: 0 9px;
  }
}