/*
  UORealms homepage (the permanent one), shown in the site shell's home view.
  One screen on a desktop, no scrolling: who we are, Happening Now, and the game chips.
  Camp's palette and fonts (Fraunces + Source Sans 3, self-hosted in /transition-landing/fonts/).
  The game chips reuse the temporary homepage's .game-card styles from transition.css exactly.
*/
:root {
  --home-ink: #f3ead2;
  --home-text: #d6dcf0;
  --home-muted: #a5aecb;
  --home-gold: #e3c56a;
  --home-gold-deep: #c8a84b;
  --home-line: rgba(255, 236, 190, .14);
  --home-serif: "Fraunces", Georgia, serif;
  --home-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --home-top: calc(var(--uoradio-height) + 78px); /* radio bar + site header */
}

.home-page {
  width: min(1680px, calc(100% - 2 * clamp(16px, 3vw, 48px)));
  height: max(560px, calc(100vh - var(--home-top) - 96px)); /* one screen including the site footer; very short windows scroll */
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(14px, 2.2vh, 26px);
  padding: clamp(14px, 3vh, 34px) 0 clamp(14px, 2.4vh, 26px);
  font-family: var(--home-sans);
  color: var(--home-text);
}

/* The shell hides the home content while another page is open: keep that working (display: grid above would override [hidden]). */
.home-page[hidden] { display: none; }

/* Who we are + Happening Now */
.home-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  min-height: 0;
  height: 100%;
}
.home-eyebrow {
  margin: 0 0 clamp(8px, 1.4vh, 16px);
  color: var(--home-gold);
  font: 700 .82rem/1 var(--home-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.home-eyebrow i { font-style: normal; margin: 0 .5em; opacity: .6; }
.home-display {
  margin: 0;
  color: var(--home-ink);
  font: 800 clamp(2.2rem, min(3.6vw, 6vh), 4.3rem)/1.06 var(--home-serif);
  letter-spacing: -.01em;
}
.home-display em { display: block; color: var(--home-gold); font-style: italic; font-weight: 700; }
.home-intro h1 {
  margin: 0;
  color: var(--home-ink);
  margin-top: clamp(10px, 1.8vh, 18px);
  font: 700 clamp(1.15rem, 1.35vw, 1.55rem)/1.3 var(--home-sans);
  letter-spacing: -.01em;
}
.home-lede {
  max-width: 44em;
  margin: clamp(12px, 2.2vh, 24px) 0 0;
  color: var(--home-text);
  font-size: clamp(1rem, 1.05vw + .5vh, 1.22rem);
  line-height: 1.55;
}
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(14px, 2.6vh, 28px); }
.home-actions [hidden] { display: none !important; }
.home-btn,
.home-btn-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 12px;
  font: 700 1rem/1 var(--home-sans);
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.home-btn { color: #1b1405; background: linear-gradient(180deg, var(--home-gold), var(--home-gold-deep)); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.home-btn-discord { color: #fff; background: linear-gradient(180deg, #6d78f7, #5865f2); }
.home-btn-start { color: #fff; background: linear-gradient(180deg, #9a5bc9, #7c3fa8); }
.home-btn-ghost { color: var(--home-ink); border: 1px solid rgba(243, 234, 210, .34); background: rgba(10, 16, 32, .5); }
.home-btn:hover, .home-btn:focus-visible, .home-btn-ghost:hover, .home-btn-ghost:focus-visible { transform: translateY(-2px); }
.home-btn-ghost:hover, .home-btn-ghost:focus-visible { border-color: var(--home-gold); }
.home-note { margin: clamp(12px, 2.2vh, 22px) 0 0; color: var(--home-muted); font-size: .95rem; }
.home-note b { color: var(--home-ink); }

/* Happening Now: frosted card, the goblin peeks over its top edge */
.live-card {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  max-height: 560px;
  margin: clamp(70px, 12vh, 130px) 0 0; /* room for the goblin */
  padding: 18px;
  border: 1px solid var(--home-line);
  border-radius: 22px;
  background: linear-gradient(160deg, rgb(26, 33, 54), rgb(12, 16, 30));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.live-goblin {
  position: absolute;
  z-index: 2;
  left: 3%;
  bottom: calc(100% - 7px); /* the image ends at his claw tips: they hook just over the top edge */
  width: 36%;
  max-width: 230px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
}
.live-head { position: relative; z-index: 1; padding-top: 10px; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; margin-bottom: 12px; }
.live-head p, .live-head h2 { grid-column: 1; }
.live-all { grid-column: 2; grid-row: 1 / span 2; }
.live-head p { margin: 0 0 2px; color: var(--home-muted); font: 700 .74rem/1 var(--home-sans); letter-spacing: .14em; text-transform: uppercase; }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #86efac; box-shadow: 0 0 10px #86efac; vertical-align: 1px; }
/* Only while an event is on (home.js adds .is-live): a soft gold glow that fades smoothly in and out, back and forth
   with no restart jump (Jason, 2 Oct 2026: subtle, like an online indicator). Still for reduced motion. */
.live-card.is-live .live-dot { animation: live-breathe 1.6s ease-in-out infinite alternate; }
@keyframes live-breathe { from { box-shadow: 0 0 2px 0 rgba(227, 197, 106, .25); } to { box-shadow: 0 0 7px 2px rgba(227, 197, 106, .7); } }
@media (prefers-reduced-motion: reduce) { .live-card.is-live .live-dot { animation: none; } }
.live-head h2 { margin: 0; color: var(--home-ink); font: 700 1.5rem/1.2 var(--home-serif); }
.live-all {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(243, 234, 210, .3);
  border-radius: 50%;
  color: var(--home-ink);
  font-size: 1.1rem;
  text-decoration: none;
}
.live-all:hover, .live-all:focus-visible { border-color: var(--home-gold); color: var(--home-gold); }
.live-slides { position: relative; flex: 1 1 auto; min-height: 110px; width: 100%; overflow: hidden; border-radius: 16px; background: #080d1c; }
.live-slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: 6px;
  padding: 18px 20px;
  color: #fff;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}
.live-slide.is-on { opacity: 1; visibility: visible; transition: opacity 500ms ease; }
.live-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: brightness(.8); transition: transform 600ms ease; } /* fills the space, never squashed; anchored high so titles and logos stay in view */
.live-slide:hover img, .live-slide:focus-visible img { transform: scale(1.03); }
.live-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(5, 8, 18, .88)); }
.live-slide > span, .live-slide > strong, .live-slide > small, .live-slide > b { position: relative; z-index: 1; }
.live-tag { justify-self: start; padding: 4px 9px; border-radius: 6px; color: #1b1405; background: var(--home-gold); font: 800 .68rem/1 var(--home-sans); letter-spacing: .1em; text-transform: uppercase; }
.live-slide strong { font: 800 clamp(1.3rem, 1.7vw, 1.9rem)/1.1 var(--home-serif); }
.live-slide small { color: #d6dcf0; font-size: .95rem; }
.live-slide b { color: var(--home-gold); font-size: .92rem; }
/* Join us on Discord card: Discord blurple, the logo, and the knight and goblin at game night */
.live-discord { background: radial-gradient(circle at 78% 60%, rgba(255, 255, 255, .16), transparent 55%), linear-gradient(135deg, #5865f2 0%, #4752c4 55%, #2f3790 100%); }
.live-discord::after { background: linear-gradient(90deg, rgba(20, 24, 70, .78) 0%, rgba(20, 24, 70, .35) 55%, transparent 80%); }
.live-slide.live-discord img.live-discord-art { inset: auto 2% 0 auto; width: auto; height: 94%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.live-discord-logo { position: absolute; z-index: 1; top: 16px; left: 20px; width: 46px; height: auto; fill: #fff; opacity: .95; }
.live-discord .live-tag { background: #fff; color: #3c45a5; }
.live-discord b { color: #fff; }

.live-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.live-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(243, 234, 210, .3); cursor: pointer; transition: width 200ms ease, background 200ms ease; }
.live-dots button[aria-pressed="true"] { width: 26px; background: var(--home-gold); }

/* The game chips: the temporary homepage's cards, in one row */
.home-play-title { margin: 0 0 12px; color: var(--home-ink); font: 700 clamp(1.3rem, 1.6vw, 1.7rem)/1.2 var(--home-serif); }
.home-grid.game-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.home-grid .game-card { min-height: 0; grid-template-rows: clamp(84px, 11.5vh, 140px) auto; border-radius: 18px; }
.home-grid .card-media { min-height: 0; }
.home-grid .card-copy { padding: 11px 13px 13px; }
.home-grid .card-copy strong { font-size: 1.05rem; }
.home-grid .card-copy small { font-size: .74rem; }

/* Smaller laptops and tablets: the page scrolls normally, chips wrap into rows */
@media (max-width: 1100px) and (min-width: 701px) {
  .home-page { height: auto; grid-template-rows: auto auto; }
  .home-top { height: auto; }
  .live-card { max-height: none; }
  .live-slides { flex: none; aspect-ratio: 16 / 9; }
  .home-grid.game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-grid .card-copy small { display: block; }
}
/* Tablets: Happening Now goes under the intro */
@media (max-width: 960px) and (min-width: 701px) {
  .home-top { grid-template-columns: 1fr; gap: 12px; }
  .live-card { margin-top: 130px; }
  .live-goblin { width: min(34%, 220px); }
}
/* Leaving for BeenBored: asks first */
.leave-dialog {
  width: min(460px, calc(100% - 32px));
  padding: 28px;
  border: 1px solid var(--home-line);
  border-radius: 22px;
  color: var(--home-text);
  background: linear-gradient(160deg, rgb(26, 33, 54), rgb(12, 16, 30));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  font-family: var(--home-sans);
  text-align: center;
}
.leave-dialog::backdrop { background: rgba(3, 6, 14, .72); backdrop-filter: blur(4px); }
.leave-art { display: block; width: auto; max-width: 70%; max-height: min(280px, 34vh); height: auto; margin: -4px auto 14px; }
.leave-art[hidden] { display: none; }
.leave-dialog h2 { margin: 0 0 10px; color: var(--home-ink); font: 700 1.6rem/1.2 var(--home-serif); }
.leave-dialog p { margin: 0 0 22px; line-height: 1.55; }
.leave-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.leave-actions .home-btn-ghost { cursor: pointer; }

.event-dialog { width: min(560px, calc(100% - 32px)); text-align: left; }
.event-art { display: block; width: calc(100% + 56px); max-height: 260px; margin: -28px -28px 18px; object-fit: cover; border-radius: 22px 22px 0 0; }
.event-art[hidden] { display: none; }
.event-when { margin: 0 0 6px !important; color: var(--home-gold); font-weight: 700; font-size: .92rem; }
.event-dialog .leave-actions { justify-content: flex-start; }

/* Short screens (laptops): compact so the chips stay on screen */
/* Laptops and other shorter screens (Jason, 30 Sep 2026): the page scrolls a little instead of squeezing anything;
   Happening Now always keeps its full 16:9 shape. One screen, no scrolling, only on tall monitors. */
@media (max-height: 859px) and (min-width: 701px) {
  .home-page { height: auto; grid-template-rows: auto auto; }
  .home-top { height: auto; }
  .live-card { max-height: none; }
  .live-slides { flex: none; aspect-ratio: 16 / 9; }
  .home-page { padding-top: 34px; } /* room for the goblin's head below the menu bar */
}
/* Phones and small tablets keep the mobile section from the temporary homepage */
@media (max-width: 700px) {
  .home-top, .home-play { display: none; }
  .home-page { height: auto; display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .live-slide, .live-slide img, .home-btn, .home-btn-ghost { transition: none; }
}

/* Quick & Casual chip: always show the whole Been Bored logo at any width (it was cut off at medium widths); black matches the picture. */
.home-grid .casual-card .card-media { background: #000; }
.home-grid .casual-card .card-media > img { object-fit: contain; }

/* Happening Now never squashes (Jason, 30 Sep 2026): the picture is always a true 16:9. On one-screen monitors the
   card narrows just enough to fit instead; on shorter screens the page scrolls (above). The goblin keeps clear of the menu. */
.live-slides { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
.live-card { justify-self: end; width: 100%; max-width: max(380px, calc((100vh - 800px) * 16 / 9 + 36px)); max-height: none; }
.home-page { padding-top: max(34px, clamp(14px, 3vh, 34px)); }
@media (max-height: 859px) and (min-width: 701px) { .live-card { max-width: none; } }
@media (max-width: 1100px) and (min-width: 701px) { .live-card { max-width: none; } }
.live-card { align-self: end; margin-top: 150px; }
.live-goblin { max-width: 196px; } /* about 144px tall: fits the 150px of room above the card, clear of the menu */
.home-page { height: auto; min-height: max(560px, calc(100vh - var(--home-top) - 108px)); } /* at least one screen; grows when the content needs more room, so nothing ever overlaps */
@media (max-height: 859px) and (min-width: 701px) { .home-page { height: auto; } }
@media (max-width: 1100px) and (min-width: 701px) { .home-page { height: auto; } }