/* ---------------------------------------------------------------------------
   Legends of the Veil — the gate.

   The three screens you meet before the village does: the login, the signup
   and the menu. They share the map's oak-and-parchment dress so the door looks
   like it belongs to the house.

   This file is deliberately separate from `styles.css`, which the classic
   game pages still lean on and which must not be disturbed.

   House rule carried over from map.php: every @media block lives at the END of
   this file, or a narrow rule gets overwritten by a wide one further down.
   --------------------------------------------------------------------------- */

:root {
  --ink: #17110c; --oak: #4a3120; --oak-2: #6b4a2f; --oak-3: #8a6340;
  --parch: #efe2c2; --parch-dim: #c9b892;
  --gold: #e0b04e; --moss: #6d8f3f; --danger: #d24b2e;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bot: env(safe-area-inset-bottom, 0px);
  --wood-grain: linear-gradient(180deg, #5e3f28, #3f2a1b);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; min-height: 100%;
  background: var(--ink);
  color: var(--parch);
  font-family: 'Alegreya Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* The painted land behind everything: blurred, so the parchment in front is what the eye
   settles on, and dimmed so it stays readable.

   The image is NOT `background-attachment: fixed` on the body. On phones that is the single
   most common cause of a page feeling wrong: mobile browsers size a fixed background to the
   whole document rather than the viewport and then leave it behind while the page moves, so
   it jumps and stutters as the address bar slides away. A `position: fixed` layer does what
   `fixed` was meant to do, and it takes the blur as well.

   The layer is inset past the edges and scaled up because a blur pulls the transparent
   nothing outside an element inwards, which shows as a pale rim along all four sides. */
body.gate-page {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(18px + var(--safe-top)) 14px calc(18px + var(--safe-bot));
  background: #0d0a08;
}
body.gate-page::before {
  content: ''; position: fixed; inset: -6%; z-index: 0; pointer-events: none;
  background: url('../assets/medieval_background_5.jpg') center/cover no-repeat;
  filter: blur(6px) saturate(.92) brightness(1.18);
  transform: scale(1.06);
}
body.gate-page::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 35%, rgba(10,7,5,.20), rgba(10,7,5,.82) 78%);
}

/* ---------- the panel ---------- */
.gate {
  position: relative; z-index: 1;
  margin: auto;                      /* centres when it fits, never clips when it does not */
  width: 100%; max-width: 430px;
  padding: 20px 18px calc(18px + var(--safe-bot));
  border-radius: 20px;
  background: var(--wood-grain);
  border: 1px solid #7a563a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 46px rgba(0,0,0,.65);
}
.gate.wide { max-width: 560px; }

/* ---------- crest ---------- */
.crest { text-align: center; margin-bottom: 16px; }
.crest img {
  width: 92px; height: 92px; object-fit: contain; border-radius: 16px;
  border: 2px solid var(--gold); padding: 6px;
  background: radial-gradient(ellipse at 50% 70%, #4a5a2c 0%, #2b3a1b 65%, #1c2614 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.55);
}
.crest h1 {
  font-family: 'Blaka', cursive; font-weight: 400;
  font-size: 30px; line-height: 1.05; letter-spacing: 2px;
  margin: 12px 0 0; color: var(--gold);
  text-shadow: 0 3px 10px rgba(0,0,0,.7);
}
.crest p { margin: 5px 0 0; font-size: 13px; color: var(--parch-dim); font-style: italic; }

/* ---------- section headings and rules ---------- */
h2.plaque {
  font-family: 'Blaka', cursive; font-weight: 400;
  font-size: 21px; letter-spacing: 1px; line-height: 1.1;
  margin: 0 0 8px; color: var(--gold);
}
.rule { height: 1px; margin: 16px 0; background: linear-gradient(90deg, transparent, #8a6340, transparent); }
.rule.tight { margin: 12px 0; }

/* ---------- fields ---------- */
.field { margin-bottom: 12px; }
.field > label {
  display: block; margin-bottom: 4px;
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--parch-dim);
}
.field .box { position: relative; }
.field input {
  width: 100%; padding: 12px 13px;
  border-radius: 10px; border: 1px solid #7a563a;
  background: rgba(20,14,9,.62); color: var(--parch);
  font-family: inherit; font-size: 16px; line-height: 1.2;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.6);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: rgba(201,184,146,.45); }
.field input:focus { border-color: var(--gold); box-shadow: inset 0 2px 5px rgba(0,0,0,.6), 0 0 0 2px rgba(224,176,78,.22); }
.field.good input { border-color: var(--moss); }
.field.bad  input { border-color: var(--danger); }
.field .peek {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: none; color: var(--parch-dim); cursor: pointer;
}
.field .peek svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.field .peek:hover { color: var(--gold); }
.field input[type=password], .field.has-peek input { padding-right: 48px; }
.field .hint { display: block; margin-top: 4px; min-height: 15px; font-size: 12px; color: var(--parch-dim); }
.field.good .hint { color: var(--moss); }
.field.bad  .hint { color: var(--danger); }

/* ---------- buttons: the same planks as the village console ---------- */
.btn {
  position: relative; display: block; width: 100%;
  border: 1px solid #8a6340; border-bottom-width: 4px; border-radius: 10px;
  padding: 13px 10px; margin-bottom: 9px;
  color: var(--parch); font-family: inherit; font-size: 14px; line-height: 1.2;
  letter-spacing: 1px; text-transform: uppercase; text-align: center; text-decoration: none;
  cursor: pointer;
  background: linear-gradient(180deg, #7a563a, #5a3b25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 3px 6px rgba(0,0,0,.35);
}
.btn:last-child { margin-bottom: 0; }
.btn.gold    { background: linear-gradient(180deg, #d9a441, #b3832a); border-color: #e8bf6d; color: #2b1d10; font-weight: 700; }
.btn.primary { background: linear-gradient(180deg, #7fa352, #5c7a3a); border-color: #8fb35f; }
.btn.danger  { background: linear-gradient(180deg, #a8462f, #7a2a1c); border-color: #d24b2e; }
.btn.quiet   { background: rgba(20,14,9,.45); border-color: #7a563a; color: var(--parch-dim); box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.btn.big     { padding: 17px 10px; font-size: 17px; letter-spacing: 2px; }
.btn small   { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .4px; text-transform: none; opacity: .82; }
.btn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 1px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.btn-row .btn { margin-bottom: 0; }

/* ---------- messages ---------- */
.note {
  display: none; margin: 0 0 12px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.35;
  background: rgba(20,14,9,.55); border-left: 3px solid var(--gold); color: var(--parch);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.note.show { display: block; }
.note.bad  { border-left-color: var(--danger); color: #f0c9bf; }
.note.good { border-left-color: var(--moss);   color: #d9e8c0; }

/* ---------- small print ---------- */
.fine { margin: 0; font-size: 12px; line-height: 1.45; color: var(--parch-dim); }
.fine a { color: var(--gold); }
.stamp {
  margin: 14px 0 0; text-align: center;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(201,184,146,.5);
}

/* ---------- the menu's cards ---------- */
.card {
  padding: 13px 14px; margin-bottom: 12px;
  border-radius: 14px; background: rgba(20,14,9,.42);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.55);
}
.card:last-child { margin-bottom: 0; }
.card > p { margin: 0 0 10px; font-size: 12.5px; color: var(--parch-dim); }
.card.flag { border-left: 3px solid var(--danger); }
.card.flag h2.plaque { color: var(--danger); }

/* The lesser doors: a grid of small plates rather than a card each. */
.shelf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.shelf .btn { margin-bottom: 0; padding: 11px 8px; font-size: 12.5px; letter-spacing: .8px; }
.shelf .btn.span { grid-column: 1 / -1; }

/* ---------- the preloader ---------- */
#preload { margin-bottom: 12px; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--parch-dim); text-align: center; }
#preload .track { height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; }
#preload .track i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s; }

/* ---------- screens ---------- */
@media (max-width: 400px) {
  .gate { padding: 16px 14px calc(16px + var(--safe-bot)); border-radius: 16px; }
  .crest img { width: 76px; height: 76px; }
  .crest h1 { font-size: 26px; }
  .field input { padding: 11px 12px; }
}
@media (min-height: 760px) {
  .crest img { width: 104px; height: 104px; }
  .crest h1 { font-size: 34px; }
}