/* =========================================================================
   Myth Fortune (MYTH) — Server 19
   Original brand styling. No game assets are used or reproduced here.
   ========================================================================= */

:root {
  --myth-gold:      #e0a43c;
  --myth-gold-soft: #f0c476;
  --myth-ink:       #0e1116;
  --myth-panel:     #161b22;
  --myth-line:      #232a34;
  --myth-live:      #3fb950;
  --myth-soon:      #e0a43c;
  --myth-hold:      #8b949e;
}

/* ---------- Dark scheme: the default for this site ---------------------- */
[data-md-color-scheme="myth"] {
  --md-hue: 215;
  --md-default-fg-color:             #e6edf3;
  --md-default-fg-color--light:      #b6c2cf;
  --md-default-fg-color--lighter:    #7d8899;
  --md-default-fg-color--lightest:   #3a434f;
  --md-default-bg-color:             var(--myth-ink);
  --md-default-bg-color--light:      #151a21;
  --md-default-bg-color--lighter:    #1c222b;
  --md-default-bg-color--lightest:   #232a34;

  --md-primary-fg-color:             #11151b;
  --md-primary-bg-color:             #e6edf3;
  --md-accent-fg-color:              var(--myth-gold);

  --md-typeset-color:                #e6edf3;
  --md-typeset-a-color:              var(--myth-gold);
  --md-typeset-mark-color:           rgba(224,164,60,.28);

  --md-code-bg-color:                #11161d;
  --md-code-fg-color:                #d7dee7;

  --md-footer-bg-color:              #0b0e12;
  --md-footer-bg-color--dark:        #080a0d;

  color-scheme: dark;
}

/* ---------- Header: alliance wordmark ---------------------------------- */
.md-header {
  border-bottom: 1px solid var(--myth-line);
  box-shadow: none;
}
.md-header__title {
  font-weight: 700;
  letter-spacing: .06em;
}
[data-md-color-scheme="myth"] .md-tabs {
  background: transparent;
  border-bottom: 1px solid var(--myth-line);
}

/* ---------- Typography -------------------------------------------------- */
.md-typeset h1 {
  font-weight: 750;
  letter-spacing: -.015em;
  margin-bottom: .4em;
}
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -.01em;
  padding-top: .35em;
  border-top: 1px solid var(--myth-line);
  margin-top: 2.2em;
}
.md-typeset h2:first-of-type { border-top: 0; margin-top: 1.2em; padding-top: 0; }
.md-typeset h3 { font-weight: 650; }

/* The "short version" checklist that opens every guide */
.md-typeset h2#the-short-version + ol {
  background: var(--md-default-bg-color--light);
  border: 1px solid var(--myth-line);
  border-left: 3px solid var(--myth-gold);
  border-radius: 6px;
  padding: 1em 1em 1em 2.6em;
}
.md-typeset h2#the-short-version + ol li { margin-bottom: .35em; }

/* ---------- Card grid on the landing page ------------------------------ */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--myth-line);
  border-radius: 8px;
  background: var(--md-default-bg-color--light);
  transition: border-color .15s ease, transform .15s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--myth-gold);
  transform: translateY(-2px);
}

/* ---------- Schedule board --------------------------------------------- */
.myth-board { margin: 1.2em 0 2em; }

.myth-row {
  display: flex;
  align-items: flex-start;
  gap: .8em;
  padding: .7em .9em;
  border: 1px solid var(--myth-line);
  border-radius: 6px;
  margin-bottom: .5em;
  background: var(--md-default-bg-color--light);
}
.myth-row .myth-when {
  flex: 0 0 8.5em;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-top: .12em;
}
.myth-row .myth-body { flex: 1 1 auto; min-width: 0; }
.myth-row .myth-name { font-weight: 650; }
.myth-row .myth-bank {
  font-size: .8rem;
  color: var(--md-default-fg-color--light);
  margin-top: .25em;
}
.myth-live  { border-left: 3px solid var(--myth-live); }
.myth-live  .myth-when { color: var(--myth-live); }
.myth-soon  { border-left: 3px solid var(--myth-soon); }
.myth-soon  .myth-when { color: var(--myth-soon); }
.myth-later { border-left: 3px solid var(--myth-line); }
.myth-later .myth-when { color: var(--myth-hold); }

.myth-hold-list, .myth-spend-list {
  border: 1px solid var(--myth-line);
  border-radius: 8px;
  padding: 1em 1.2em;
  margin: 1em 0;
}
.myth-hold-list  { border-left: 3px solid var(--myth-soon); }
.myth-spend-list { border-left: 3px solid var(--myth-live); }
.myth-hold-list h4, .myth-spend-list h4 { margin: 0 0 .5em; font-size: .95rem; }
.myth-hold-list ul, .myth-spend-list ul { margin: 0; }

.myth-stale {
  font-size: .75rem;
  color: var(--md-default-fg-color--lighter);
  margin-top: 1em;
  font-style: italic;
}

/* ---------- In-game clock (header) ------------------------------------- */
.myth-clock-header {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin-left: auto;
  padding: 0 .9rem;
  line-height: 1.15;
  white-space: nowrap;
  cursor: default;
}
.myth-clock-header .myth-clock-time {
  font-family: var(--md-code-font-family, monospace);
  font-size: .95rem;
  font-weight: 700;
  color: var(--myth-gold);
  font-variant-numeric: tabular-nums;
}
.myth-clock-header .myth-clock-meta {
  font-size: .6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .65;
}

/* ---------- Clock panel (on /now/) ------------------------------------- */
.myth-clockpanel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .8rem;
  margin: 1.2em 0 1.6em;
}
.myth-clockpanel .myth-cell {
  border: 1px solid var(--myth-line);
  border-radius: 8px;
  padding: .85rem 1rem;
  background: var(--md-default-bg-color--light);
}
.myth-clockpanel .myth-cell-label {
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--lighter);
  margin-bottom: .3rem;
}
.myth-clockpanel .myth-cell-value {
  font-family: var(--md-code-font-family, monospace);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.myth-clockpanel .myth-cell-sub {
  font-size: .7rem;
  color: var(--md-default-fg-color--light);
  margin-top: .2rem;
}
.myth-clockpanel .myth-cell-game .myth-cell-value { color: var(--myth-gold); }
.myth-clockpanel .myth-cell-reset .myth-cell-value { color: var(--myth-live); }

/* ---------- Calendar ---------------------------------------------------- */
.myth-calendar { margin: 1.2em 0 2em; }

.myth-day {
  border: 1px solid var(--myth-line);
  border-left: 3px solid var(--myth-line);
  border-radius: 6px;
  padding: .75rem .95rem;
  margin-bottom: .6rem;
  background: var(--md-default-bg-color--light);
}
.myth-day-today { border-left-color: var(--myth-live); background: var(--md-default-bg-color--lighter); }
.myth-day-flag  { border-left-color: var(--myth-gold); }

.myth-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .35rem;
}
.myth-day-name {
  font-weight: 700;
  letter-spacing: .03em;
}
.myth-day-today .myth-day-name { color: var(--myth-live); }
.myth-day-flag  .myth-day-name { color: var(--myth-gold); }
.myth-day-date {
  font-size: .78rem;
  color: var(--md-default-fg-color--lighter);
}
.myth-day-date em {
  font-style: normal;
  font-weight: 700;
  color: var(--myth-live);
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .06em;
}

.myth-day-do {
  font-size: .84rem;
  color: var(--md-default-fg-color--light);
  margin-bottom: .45rem;
}

.myth-day-pills { margin-bottom: .45rem; }
.myth-pill {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: .12rem .5rem;
  border-radius: 99px;
  margin: 0 .3rem .3rem 0;
  border: 1px solid var(--myth-line);
}
.myth-pill a { color: inherit !important; text-decoration: none; }
.myth-pill-live  { color: var(--myth-live); border-color: rgba(63,185,80,.45); }
.myth-pill-start { color: var(--myth-ink); background: var(--myth-gold); border-color: var(--myth-gold); font-weight: 700; }
.myth-pill-start a { color: var(--myth-ink) !important; }

.myth-day-hold {
  font-size: .78rem;
  color: var(--md-default-fg-color--light);
  border-top: 1px dashed var(--myth-line);
  padding-top: .4rem;
}
.myth-day-hold strong { color: var(--myth-soon); }
.myth-day-free strong { color: var(--myth-live); }
.myth-day-dump strong { color: var(--myth-live); }
.myth-day-dump + .myth-day-hold { border-top: 0; padding-top: .15rem; }

.myth-dump-list {
  border: 1px solid var(--myth-line);
  border-left: 3px solid var(--myth-live);
  border-radius: 8px;
  padding: 1em 1.2em;
  margin: 1em 0;
}
.myth-dump-list h4 { margin: 0 0 .5em; font-size: .95rem; }
.myth-dump-list ul { margin: 0; }
.myth-day-end {
  font-size: .74rem;
  color: var(--myth-hold);
  margin-top: .3rem;
  font-style: italic;
}

@media screen and (max-width: 76.1875em) {
  /* Material hides the header title area differently on small screens;
     keep the clock readable rather than letting it crowd the search icon. */
  .myth-clock-header { padding: 0 .5rem; }
  .myth-clock-header .myth-clock-meta { display: none; }
}

/* ---------- Tag pills --------------------------------------------------- */
.md-typeset .md-tag {
  font-size: .68rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---------- Print / mobile --------------------------------------------- */
@media screen and (max-width: 46em) {
  .myth-row { flex-direction: column; gap: .25em; }
  .myth-row .myth-when { flex: none; }
  .md-typeset h2 { margin-top: 1.6em; }
}