/* ===========================================================================
   When Can We Play? — a scheduling calendar dressed as a page of Magic cards.

   The organising idea: a day is a card, and the four players are its casting
   cost. Date sits where a card name goes; the four mana pips sit where the
   mana cost goes. When all four are paid, the card goes gold and foils.
   =========================================================================== */

:root {
  /* Drawn from the Black Lotus art behind the page. */
  --ink:        #0d0a12;  /* deep petal shadow — the page ground */
  --ink-soft:   #17121f;
  --lotus:      #4a2f5e;  /* petal purple */
  --lotus-lit:  #8b5fa8;  /* the glowing heart of the flower */
  --teal:       #2fb8b0;  /* petal base — the one cool accent */
  --bone:       #e8dcc0;  /* the wheat field — primary text */
  --bone-dim:   #9a9080;
  --gold:       #d9a441;
  --gold-bright:#f5dfa0;

  /* Mana discs are pale, as real mana symbols are, so every pip reads on a
     dark page. Each player's saturated hue is kept for glow and legend. */
  --disc-U: #a8cce8;  --glow-U: #2a6fb5;
  --disc-G: #a3ccab;  --glow-G: #4a9e5c;
  --disc-R: #eda893;  --glow-R: #c9463a;
  --disc-B: #ccc2c4;  --glow-B: #6b5f70;
  --glyph:  #17121a;

  --frame:      rgba(232, 220, 192, 0.30);
  --frame-lit:  rgba(232, 220, 192, 0.40);
  --face:       rgba(13, 10, 18, 0.68);

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Spectral", Georgia, "Times New Roman", serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
}

/* --- Backdrop -------------------------------------------------------------
   The source art is pale wheat with a dark flower at its centre. A flat
   overlay would mud the whole thing, so the scrim is a radial: lightest over
   the centre, where the lotus is already dark enough to sit under text, and
   near-opaque at the edges, where the pale field would otherwise blow out.
   A fixed element rather than background-attachment: fixed, which judders on
   iOS Safari. */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../img/background.jpg") center / cover no-repeat;
  filter: saturate(1.08);
}

.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 42%,
      rgba(13, 10, 18, 0.34) 0%,
      rgba(13, 10, 18, 0.68) 48%,
      rgba(13, 10, 18, 0.93) 100%),
    linear-gradient(to bottom,
      rgba(13, 10, 18, 0.80) 0%,
      rgba(13, 10, 18, 0.14) 26%,
      rgba(13, 10, 18, 0.22) 70%,
      rgba(13, 10, 18, 0.90) 100%);
}

/* --- Page ---------------------------------------------------------------- */

.page {
  max-width: min(1100px, 94vw);
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(0.75rem, 3vw, 1.5rem) 4rem;
}

.masthead { text-align: center; margin-bottom: 2rem; }

.masthead h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 5.5vw, 2.9rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--bone);
  text-shadow: 0 0 26px rgba(139, 95, 168, 0.55), 0 2px 4px rgba(0, 0, 0, 0.8);
}

.tagline {
  margin: 0 auto;
  max-width: 34ch;
  color: var(--bone-dim);
  font-size: 0.95rem;
  font-style: italic;
}

/* --- Who are you --------------------------------------------------------- */

.whoami { text-align: center; margin-bottom: 1.75rem; }

.whoami__prompt {
  font-family: var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--bone-dim);
  margin: 0 0 0.75rem;
}

.whoami__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.whoami__pick {
  display: block;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--bone);
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--frame);
  border-radius: 2px;
  background: var(--face);
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.whoami__pick:hover { transform: translateY(-1px); background: rgba(13, 10, 18, 0.75); }
.whoami__pick--U:hover { border-color: var(--disc-U); }
.whoami__pick--G:hover { border-color: var(--disc-G); }
.whoami__pick--R:hover { border-color: var(--disc-R); }
.whoami__pick--B:hover { border-color: var(--disc-B); }

.whoami__current { margin: 0; color: var(--bone-dim); font-size: 0.95rem; }

.whoami__name {
  font-family: var(--display);
  letter-spacing: 0.06em;
}
.whoami__name--U { color: var(--disc-U); }
.whoami__name--G { color: var(--disc-G); }
.whoami__name--R { color: var(--disc-R); }
.whoami__name--B { color: var(--disc-B); }

.whoami__current a { color: var(--bone-dim); text-decoration-color: var(--frame); }
.whoami__current a:hover { color: var(--teal); }

/* --- Month navigation ---------------------------------------------------- */

.monthnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 4vw, 2rem);
  margin-bottom: 1.25rem;
}

.monthnav__label {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1rem, 3.5vw, 1.35rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
  min-width: 9.5ch;
  text-align: center;
}

.monthnav__step {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--frame);
  border-radius: 50%;
  color: var(--bone);
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 1;
  background: var(--face);
  transition: border-color 140ms ease, color 140ms ease;
}

.monthnav__step:hover { border-color: var(--teal); color: var(--teal); }

/* --- Calendar ------------------------------------------------------------ */

.calendar {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: clamp(3px, 0.7vw, 6px);
}

.calendar th {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding-bottom: 0.4rem;
}

.calendar th abbr { text-decoration: none; border: 0; }

/* --- A day is a card ----------------------------------------------------- */

.day {
  position: relative;
  height: clamp(64px, 9.5vw, 132px);
  vertical-align: top;
  padding: clamp(4px, 0.9vw, 8px);
  border: 1px solid var(--frame);
  border-radius: 3px;
  background:
    linear-gradient(160deg, rgba(74, 47, 94, 0.28) 0%, rgba(13, 10, 18, 0.10) 55%),
    var(--face);
  box-shadow: inset 0 1px 0 rgba(232, 220, 192, 0.07);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.day[data-date] { cursor: pointer; }

.day[data-date]:hover {
  border-color: var(--frame-lit);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(232, 220, 192, 0.12), 0 6px 16px rgba(0, 0, 0, 0.45);
}

.day[data-date]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.day__num {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(0.85rem, 2.2vw, 1.05rem);
  line-height: 1;
  color: var(--bone);
  letter-spacing: 0.02em;
}

.day__pips {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2px, 0.5vw, 4px);
  margin-top: clamp(4px, 1vw, 8px);
}

/* Out of month, and already gone. */

.day.is-outside { opacity: 0.34; }

.day.is-past {
  background: rgba(13, 10, 18, 0.34);
  border-color: rgba(232, 220, 192, 0.10);
  cursor: default;
}
.day.is-past .day__num { color: var(--bone-dim); }
.day.is-past .day__pips { opacity: 0.5; }

.day.is-today { border-color: var(--teal); }
.day.is-today .day__num { color: var(--teal); }

/* --- Mana pips ----------------------------------------------------------- */

.pip {
  display: block;
  width: clamp(13px, 2.4vw, 20px);
  height: clamp(13px, 2.4vw, 20px);
  flex: 0 0 auto;
}

/* The artwork is the real mana symbol from img/, defined once in the sprite
   and referenced here. Its fills are baked into the SVG, so lit and unlit are
   expressed with filters over the whole pip rather than by recolouring parts
   of it. */
.pip__icon {
  display: block;
  width: 100%;
  height: 100%;
  transition: filter 180ms ease, opacity 180ms ease;
}

/* Unpaid: drained of colour and pushed back, so a day nobody has claimed
   reads as empty at a glance. */
.pip[data-lit="0"] .pip__icon {
  filter: grayscale(1) brightness(0.75) contrast(0.85);
  opacity: 0.28;
}

/* Paid: full colour, with a halo in that player's hue. */
.pip[data-lit="1"] .pip__icon { opacity: 1; }

.pip--U[data-lit="1"] .pip__icon { filter: drop-shadow(0 0 4px var(--glow-U)); }
.pip--G[data-lit="1"] .pip__icon { filter: drop-shadow(0 0 4px var(--glow-G)); }
.pip--R[data-lit="1"] .pip__icon { filter: drop-shadow(0 0 4px var(--glow-R)); }
.pip--B[data-lit="1"] .pip__icon { filter: drop-shadow(0 0 4px var(--glow-B)); }

/* The sprite itself must never take up space or be seen. */
.mana-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Day states ---------------------------------------------------------- */

.day[data-state="some"] { border-color: rgba(232, 220, 192, 0.30); }

/* Three of four: a dim bronze edge and nothing else. It must read as "close"
   at a glance and never be mistaken for the gold card two cells over — that
   distinction is the entire job of this page. */
.day[data-state="almost"] {
  border-color: rgba(217, 164, 65, 0.30);
  box-shadow: inset 0 1px 0 rgba(232, 220, 192, 0.07);
}

/* --- The payoff: all four, and the card goes gold and foils --------------- */

.day[data-state="all"] {
  border-color: var(--gold);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(245, 223, 160, 0.34) 0%, rgba(217, 164, 65, 0.16) 55%, rgba(13, 10, 18, 0.45) 100%),
    linear-gradient(160deg, rgba(217, 164, 65, 0.32) 0%, rgba(13, 10, 18, 0.45) 60%);
  box-shadow:
    inset 0 0 0 1px rgba(245, 223, 160, 0.55),
    inset 0 0 22px rgba(217, 164, 65, 0.22),
    0 0 28px rgba(217, 164, 65, 0.55);
  overflow: hidden;
}

.day[data-state="all"] .day__num {
  color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(217, 164, 65, 0.75);
}

/* The foil sheen — what a foil card does when you tilt it. */
.day[data-state="all"]::after {
  content: "";
  position: absolute;
  inset: -60%;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.30) 47%,
    rgba(180, 240, 235, 0.22) 51%,
    transparent 60%);
  transform: translateX(-100%);
  animation: foil 5.5s ease-in-out infinite;
}

@keyframes foil {
  0%, 62% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

/* --- Status line and banners --------------------------------------------- */

.status {
  min-height: 1.5rem;
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--bone-dim);
}

.status--error { color: var(--disc-R); }

.banner {
  border: 1px solid var(--frame);
  border-left: 3px solid var(--teal);
  background: rgba(13, 10, 18, 0.8);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
  border-radius: 2px;
}

.banner--error { border-left-color: var(--disc-R); }
.banner code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; }
.banner small { color: var(--bone-dim); }

/* --- Legend -------------------------------------------------------------- */

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--frame);
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
}

.legend__item { display: flex; align-items: center; gap: 0.6rem; }
.legend .pip { width: 30px; height: 30px; }

/* --- Utility ------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 560px) {
  /* Two-by-two casting cost, so the pips stay legible as the cell narrows. */
  .day__pips {
    max-width: calc(2 * clamp(13px, 2.4vw, 20px) + clamp(2px, 0.5vw, 4px) + 1px);
  }
  .tagline { font-size: 0.88rem; }
}

/* Below this, the weekday header drops to single letters: the markup is
   <abbr>M</abbr><span class="wd-full">on</span>, so hiding the span leaves M. */
@media (max-width: 380px) {
  .wd-full { display: none; }
  .page { padding-left: 0.5rem; padding-right: 0.5rem; }
  .masthead h1 { letter-spacing: 0.08em; }
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .day[data-state="all"]::after { display: none; }
  .day[data-date]:hover { transform: none; }
}