/* ==========================================================================
   Tales Archive — shared theme

   Built after the series' own menus: a deep indigo ground, gold hairline
   frames doubled just inside the edge, a centred diamond on the header rule,
   and hard unblurred shadows so every window sits above the ground the way a
   Tales status screen does.
   ========================================================================== */

:root {
  /* Ground — deepest at the page, lightest at a raised window */
  --paper:    #0C1220;
  --paper-2:  #17203A;
  --panel:    #121B2E;
  --panel-2:  #1B2540;

  /* Text */
  --ink:      #ECF0F8;
  --ink-2:    #A5B2CD;
  --ink-3:    #7C8AAC;

  /* Trim — the border, the bright accent, and the hairline doubled inside it */
  --line:     #7C6526;
  --gold:     #C9A227;
  --gold-2:   #F2DFA0;
  --bevel:    rgba(242, 223, 160, 0.14);

  --red:      #D2544A;
  --red-bg:   #35171A;
  --blue:     #5FA8DE;
  --focus:    #6FD3E8;

  /* Verdict — the daily puzzle's three states, tuned for the dark ground */
  --hit:      #5FC98C;   --hit-bg:  #12301F;
  --near:     #E4B54C;   --near-bg: #322609;
  --miss:     #7E8CA8;   --miss-bg: #1A2338;

  /* Frame */
  --shadow:   #04070E;
  --hard:     4px 4px 0 var(--shadow);
  --hard-sm:  3px 3px 0 var(--shadow);
  --stroke:   1px solid var(--line);
  --radius:   3px;

  /* Type */
  --display: "Zen Old Mincho", Georgia, "Times New Roman", serif;
  --ui: "Zen Kaku Gothic New", "M PLUS Rounded 1c", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The readout face. A status screen labels its numbers in narrow caps, and
     the two Zen families have no condensed cut between them. */
  --ui-alt: "Barlow Condensed", "Zen Kaku Gothic New", system-ui, sans-serif;

  --gutter: clamp(1rem, 4vw, 3rem);
}

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

/* Class rules that set `display` beat the UA's [hidden] rule, which would leave
   hidden panels and buttons on screen. Settle it once, here. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;

  /* Faint diagonal weave over a slow vertical lift, the way a JRPG menu
     backdrop is never flat. */
  background-image:
    repeating-linear-gradient(45deg,
      rgba(242, 223, 160, 0.014) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #131C31 0%, var(--paper) 46%, #080D18 100%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }

/* --- The window frame: gold rule, hairline doubled inside, hard shadow ---- */

.frame {
  background: var(--panel);
  border: var(--stroke);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--bevel), var(--hard);
}

/* Corner brackets, drawn as four gold Ls. The series puts them on every
   window; here they are reserved for the panels that lead a page. */
.orn {
  position: relative;
  background-image:
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
    linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px,
                   14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position:
    5px 5px, 5px 5px,
    calc(100% - 5px) 5px, calc(100% - 5px) 5px,
    5px calc(100% - 5px), 5px calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) calc(100% - 5px);
}

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

.eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* A label that sits astride a frame edge, like a Tales window tab */
.plate {
  display: inline-block;
  padding: 0.2rem 0.8rem 0.25rem;
  background: var(--paper);
  color: var(--gold-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  background: linear-gradient(180deg, #0B1120 0%, #0A0F1C 100%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(242, 223, 160, 0.09), 0 6px 20px rgba(0, 0, 0, 0.5);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.wordmark { display: flex; align-items: center; margin-right: auto; }

.wordmark .mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--gold-2);
}

.nav-link {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.36rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.nav-link:hover { color: var(--gold-2); border-color: var(--line); }

.nav-link.is-current {
  color: var(--gold-2);
  background: var(--panel-2);
  border-color: var(--line);
  box-shadow: inset 0 0 0 1px var(--bevel);
}

/* Four links plus the wordmark do not fit a phone on one line, so the
   wordmark takes the first row and the links take the second. */
@media (max-width: 640px) {
  .header-inner { flex-wrap: wrap; gap: 0.4rem; padding-bottom: 0.6rem; }
  .wordmark { flex: 1 0 100%; margin-right: 0; }
  .wordmark .mark { font-size: 1.15rem; }
  .nav-link { padding: 0.28rem 0.45rem; font-size: 0.66rem; letter-spacing: 0.09em; }
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.62rem 1.2rem;
  border: var(--stroke);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--gold-2);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--bevel), var(--hard-sm);
  transition: transform 0.08s, box-shadow 0.08s, background 0.12s, border-color 0.12s;
}

.btn:hover { background: #243158; border-color: var(--gold); }

/* Press the button into its own shadow */
.btn:active { transform: translate(3px, 3px); box-shadow: inset 0 0 0 1px var(--bevel); }

.btn-gold {
  background: linear-gradient(180deg, #C9A227 0%, #9B7A18 100%);
  border-color: var(--gold-2);
  color: #1A1304;
}

.btn-gold:hover { background: linear-gradient(180deg, #E4BC3D 0%, #B08D1E 100%); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: translate(3px, 3px); }

/* --- Focus -------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  margin-top: auto;
  background: #080D18;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  padding: 1.7rem var(--gutter);
  text-align: center;
  font-size: 0.8rem;
}

.site-footer a { color: var(--gold-2); border-bottom: 1px solid rgba(242, 223, 160, 0.35); }
.site-footer a:hover { border-bottom-color: var(--gold-2); }

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}