/* Crest Hall: the Dungeon Lords look, from the Claude Design handoff in
   design/crest-hall. Measurements and colours are the handoff's own. Where the
   real site needed something the two designed screens didn't have (sign-in
   buttons, the account page, narrow screens), it's marked below. */

:root {
  color-scheme: dark;
  --page: #0B120E;
  --line: #2F4737;
  --line-field: #3A5544;
  --brass: #C9A24A;
  --brass-bright: #E4C378;
  --brass-ink: #121E16;
  --parchment: #E8DFC8;
  --parchment-78: rgba(232, 223, 200, .78);
  --parchment-75: rgba(232, 223, 200, .75);
  --parchment-62: rgba(232, 223, 200, .62);
  --hairline: rgba(201, 162, 74, .18);
  --warm-red: #E38B62;
  --display: 'Marcellus', 'Trajan Pro', Georgia, serif;
  --caps: 'Marcellus SC', 'Marcellus', Georgia, serif;
  --body: 'Spectral', Georgia, serif;
}

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--parchment); font-family: var(--body); font-size: 16px; line-height: 1.4; }
a { color: var(--brass); text-decoration: none; }
a:hover { color: var(--brass-bright); }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- the hall: a full-height frame over the tavern wall ---------- */
.hall {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
}
.is-gate { background: radial-gradient(120% 90% at 50% 0%, #23382C 0%, #16241C 45%, #0D150F 100%); }
.is-hub { background: radial-gradient(120% 80% at 50% -10%, #23382C 0%, #16241C 50%, #0D150F 100%); }

/* The wall. Layering rule from the handoff: these sit at z-index 0 behind the
   content, the grime at 4–6 over it, and anything that must stay legible
   (the gate footer, the status strip) at 7. Content must be positioned to
   paint above the z-index 0 layers. */
.wall, .wall i { position: absolute; inset: 0; pointer-events: none; }
.wall i { display: block; }
.wall .specks { opacity: .35; background-image: radial-gradient(rgba(201, 162, 74, .10) 1px, transparent 1px); background-size: 6px 6px; }
.wall .planks { z-index: 0; background: repeating-linear-gradient(90deg, rgba(62, 38, 18, .55) 0, rgba(48, 29, 13, .38) 3px, rgba(74, 47, 23, .30) 8px, rgba(52, 32, 15, .42) 104px, rgba(28, 17, 8, .72) 110px, rgba(62, 38, 18, .55) 112px); }
.wall .warmth { z-index: 0; background: linear-gradient(180deg, rgba(74, 46, 20, .55) 0%, rgba(58, 38, 18, .28) 38%, rgba(30, 20, 10, .55) 100%); }
.wall .stains {
  z-index: 4; mix-blend-mode: multiply;
  background:
    radial-gradient(38% 44% at 8% 92%, rgba(38, 20, 6, .95), transparent 70%),
    radial-gradient(30% 40% at 94% 8%, rgba(58, 32, 10, .85), transparent 72%),
    radial-gradient(22% 26% at 72% 88%, rgba(72, 42, 14, .8), transparent 70%),
    radial-gradient(18% 22% at 22% 12%, rgba(46, 30, 12, .8), transparent 72%);
}
.wall .smoke { z-index: 5; mix-blend-mode: soft-light; background: rgba(126, 74, 30, .32); }
.wall .scratches {
  z-index: 5; opacity: .5;
  background:
    repeating-linear-gradient(102deg, rgba(255, 240, 210, .045) 0, rgba(255, 240, 210, .045) 1px, transparent 1px, transparent 23px),
    repeating-linear-gradient(3deg, rgba(0, 0, 0, .12) 0, rgba(0, 0, 0, .12) 1px, transparent 1px, transparent 14px);
}
.wall .vignette { z-index: 6; box-shadow: inset 0 0 130px rgba(0, 0, 0, .85), inset 0 -40px 90px rgba(10, 6, 2, .7); }
.wall .soot { inset: auto; left: -40px; bottom: -30px; width: 300px; height: 180px; z-index: 6; background: radial-gradient(closest-side, rgba(0, 0, 0, .8), transparent 75%); filter: blur(10px); }

/* The hub's wall is the same recipe, a little lighter */
.is-hub .wall .specks { opacity: .3; }
.is-hub .wall .planks { background: repeating-linear-gradient(90deg, rgba(62, 38, 18, .5) 0, rgba(48, 29, 13, .34) 3px, rgba(74, 47, 23, .26) 8px, rgba(52, 32, 15, .38) 104px, rgba(28, 17, 8, .66) 110px, rgba(62, 38, 18, .5) 112px); }
.is-hub .wall .warmth { background: linear-gradient(180deg, rgba(74, 46, 20, .48) 0%, rgba(58, 38, 18, .22) 40%, rgba(30, 20, 10, .5) 100%); }
.is-hub .wall .stains {
  background:
    radial-gradient(34% 38% at 6% 94%, rgba(38, 20, 6, .9), transparent 70%),
    radial-gradient(26% 34% at 96% 6%, rgba(58, 32, 10, .8), transparent 72%),
    radial-gradient(20% 24% at 60% 96%, rgba(72, 42, 14, .75), transparent 70%),
    radial-gradient(16% 20% at 30% 4%, rgba(46, 30, 12, .75), transparent 72%);
}
.is-hub .wall .smoke { background: rgba(126, 74, 30, .28); }
.is-hub .wall .scratches {
  opacity: .45;
  background:
    repeating-linear-gradient(99deg, rgba(255, 240, 210, .04) 0, rgba(255, 240, 210, .04) 1px, transparent 1px, transparent 27px),
    repeating-linear-gradient(-4deg, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, .1) 1px, transparent 1px, transparent 16px);
}
.is-hub .wall .vignette { box-shadow: inset 0 0 120px rgba(0, 0, 0, .8), inset 0 -34px 80px rgba(10, 6, 2, .6); }
.is-hub .wall .soot { left: auto; bottom: auto; right: 60px; top: 120px; width: 220px; height: 150px; z-index: 5; background: radial-gradient(closest-side, rgba(52, 32, 12, .55), transparent 72%); filter: blur(12px); mix-blend-mode: multiply; }

/* ---------- the crest ---------- */
@keyframes crest-spin { to { transform: rotate(360deg); } }
@keyframes crest-spin-rev { to { transform: rotate(-360deg); } }
@keyframes crest-glow { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }

.crest { position: relative; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; }
.crest i { position: absolute; display: block; }
.crest .glow { inset: -26px; background: radial-gradient(closest-side, rgba(201, 162, 74, .28), transparent 72%); animation: crest-glow 5.5s ease-in-out infinite; }
.crest .ring { border-radius: 50%; }
.crest .ring-a { inset: 0; border: 1px dashed rgba(201, 162, 74, .45); animation: crest-spin 46s linear infinite; }
.crest .ring-b { inset: 16px; border: 1px solid rgba(201, 162, 74, .25); animation: crest-spin-rev 34s linear infinite; }
.crest .ring-c { inset: 38px; border: 1px dashed rgba(201, 162, 74, .55); animation: crest-spin-rev 22s linear infinite; }
.crest .diamond { width: 88px; height: 88px; border: 1.5px solid var(--brass); transform: rotate(45deg); }
.crest .square { width: 88px; height: 88px; border: 1px solid rgba(201, 162, 74, .35); }
.crest .inner { width: 44px; height: 44px; border: 1.5px solid rgba(201, 162, 74, .6); transform: rotate(45deg); }
.crest .core { width: 15px; height: 15px; background: var(--brass); transform: rotate(45deg); box-shadow: 0 0 16px rgba(201, 162, 74, .9); }
.crest .pip { width: 7px; height: 7px; transform: rotate(45deg); }
.crest .pip-t { top: -5px; background: rgba(201, 162, 74, .85); }
.crest .pip-b { bottom: -5px; background: rgba(201, 162, 74, .85); }
.crest .pip-l { left: -5px; background: rgba(201, 162, 74, .5); }
.crest .pip-r { right: -5px; background: rgba(201, 162, 74, .5); }

/* ---------- the gate: the green banner panel ---------- */
.gate { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 16px; }
.banner {
  position: relative; z-index: 3; box-sizing: border-box; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  padding: 46px 78px 42px;
  background: linear-gradient(180deg, rgba(35, 56, 44, .94), rgba(17, 27, 21, .94));
  border: 1px solid var(--line); border-top: 2px solid var(--brass);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .6);
}
.crest-block { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.wordmark { margin: 0; font-family: var(--caps); font-size: 15px; letter-spacing: .42em; padding-left: .42em; color: var(--brass); }
.rule { width: 360px; max-width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 162, 74, .5), transparent); }
.form-block { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 480px; max-width: 100%; }
.form-block form { margin: 0; }
.gate-heading { margin: 0; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.25; color: var(--parchment); text-align: center; text-wrap: balance; }
.gate-line { margin: 0; max-width: 380px; font-size: 16px; line-height: 1.5; color: var(--parchment-78); text-align: center; }
.gate-error { margin: 0; max-width: 400px; font-size: 15px; line-height: 1.45; color: var(--warm-red); text-align: center; }
.gate-aside { margin: 0; font-size: 14px; }
.gate-footer { position: absolute; z-index: 7; bottom: 26px; left: 0; right: 0; margin: 0; padding: 0 16px; text-align: center; font-family: var(--caps); font-size: 13px; letter-spacing: .16em; color: var(--parchment-62); }
/* local development only: the emailed word, shown on the page */
.gate-dev { margin: 0; padding: 8px 14px; border: 1px dashed rgba(201, 162, 74, .5); font-size: 14px; color: var(--parchment-75); }
.gate-dev b { color: var(--brass-bright); letter-spacing: .2em; font-weight: 600; }

/* ---------- fields and buttons ---------- */
.row { display: flex; justify-content: center; gap: 10px; width: 100%; }
.field {
  flex: 0 1 300px; width: 300px; min-width: 0;
  padding: 14px 16px; border: 1px solid var(--line-field); border-radius: 0;
  background: rgba(11, 18, 14, .7); color: var(--parchment);
  font-family: var(--body); font-size: 16px; letter-spacing: .04em;
  outline: none; -webkit-appearance: none; appearance: none;
}
.field::placeholder { color: rgba(232, 223, 200, .35); letter-spacing: .12em; }
.field:focus { border-color: var(--brass); }
.field:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #101A14 inset; -webkit-text-fill-color: var(--parchment); caret-color: var(--parchment); }
.field-code { letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; }
.btn-brass { flex: none; padding: 14px 26px; border: 0; border-radius: 0; background: var(--brass); color: var(--brass-ink); font-family: var(--caps); font-size: 14px; letter-spacing: .16em; white-space: nowrap; cursor: pointer; }
.btn-brass:hover { background: var(--brass-bright); }

/* Beyond the handoff: sign-in buttons. Google's branding rules set its
   button (dark theme: #131314 fill, #8E918F stroke, Roboto Medium, its own
   mark), and Discord's matches it so the pair reads as one choice. */
.providers { display: flex; gap: 10px; width: 100%; }
.btn-provider {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 40px; padding: 0 12px;
  background: #131314; border: 1px solid #8E918F; color: #E3E3E3;
  font-family: 'Roboto', system-ui, -apple-system, sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .25px;
  white-space: nowrap;
}
.btn-provider:hover { color: #E3E3E3; border-color: var(--brass); }
.btn-provider svg { flex: none; width: 18px; height: 18px; }
.btn-provider.is-discord svg { width: 20px; height: 20px; }
.or { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; font-style: italic; font-size: 14px; color: var(--parchment-62); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 162, 74, .5)); }
.or::after { background: linear-gradient(90deg, rgba(201, 162, 74, .5), transparent); }

/* Beyond the handoff: the account page's pieces */
.ledger { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 18px; width: 100%; padding: 14px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.ledger-label { margin: 0; font-family: var(--caps); font-size: 11px; letter-spacing: .22em; color: var(--brass); white-space: nowrap; }
.ledger ul { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.btn-quiet { padding: 10px 18px; border: 1px solid rgba(201, 162, 74, .5); border-radius: 0; background: transparent; color: var(--brass); font-family: var(--caps); font-size: 12px; letter-spacing: .18em; cursor: pointer; }
.btn-quiet:hover { background: rgba(201, 162, 74, .15); }
.danger { width: 100%; text-align: center; }
.danger summary { display: inline-block; cursor: pointer; list-style: none; font-size: 14px; color: var(--parchment-62); }
.danger summary::-webkit-details-marker { display: none; }
.danger summary:hover, .danger[open] summary { color: var(--warm-red); }
.danger form { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 14px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--parchment-78); }
.check input { accent-color: var(--brass); }
.btn-danger { padding: 12px 22px; border: 0; border-radius: 0; background: #8C3B26; color: var(--parchment); font-family: var(--caps); font-size: 13px; letter-spacing: .16em; cursor: pointer; }
.btn-danger:hover { background: #A6472E; }

/* ---------- the hub ---------- */
.hub { flex: 1; display: flex; flex-direction: column; }
.hub-header { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 22px; padding: 22px 34px; border-bottom: 1px solid var(--hairline); }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-diamond { width: 26px; height: 26px; border: 1.2px solid var(--brass); transform: rotate(45deg); }
.brand-name { font-family: var(--caps); font-size: 13px; letter-spacing: .3em; color: var(--brass); }
.who { display: flex; align-items: center; gap: 22px; font-size: 14px; color: var(--parchment-75); }
.who-name { color: var(--parchment); }
.who-name:hover { color: var(--brass-bright); }
.who-sep { width: 1px; height: 16px; background: rgba(232, 223, 200, .2); }
.who form { display: flex; margin: 0; }
.link-button { padding: 0; border: 0; background: none; color: var(--brass); cursor: pointer; }
.link-button:hover { color: var(--brass-bright); }

.hub-main { padding-bottom: 34px; }
.hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 34px 16px; text-align: center; }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 46px; line-height: 1.2; letter-spacing: .02em; color: var(--parchment); text-wrap: balance; }
.hero p { margin: 0; font-size: 17px; color: var(--parchment-75); }

/* The doors. The grid is the extension point: a new tool is a new cell. */
.doors { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding: 0 34px; }
.door {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 162px; box-sizing: border-box; padding: 18px 20px; color: inherit;
  background: linear-gradient(180deg, rgba(35, 56, 44, .9), rgba(17, 27, 21, .9));
  border: 1px solid var(--line); border-top: 2px solid var(--brass);
}
a.door:hover { color: inherit; border-color: var(--brass); }
.door-eyebrow { font-family: var(--caps); font-size: 12px; letter-spacing: .22em; color: var(--brass); }
/* Beyond the handoff: a tool that isn't built yet keeps its door, marked SOON */
.door.is-soon .door-eyebrow { color: rgba(201, 162, 74, .6); }
.door-body { display: flex; flex-direction: column; gap: 10px; }
.door-title { font-family: var(--display); font-size: 23px; line-height: 1.15; color: var(--parchment); }
.door-desc { font-size: 14px; line-height: 1.5; color: var(--parchment-78); }
.door-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 162px; box-sizing: border-box; padding: 18px 20px; border: 1px dashed rgba(201, 162, 74, .5); color: rgba(232, 223, 200, .72); }
.more-plus { font-family: var(--display); font-size: 30px; line-height: 1; color: rgba(201, 162, 74, .7); }
.more-list { font-size: 14px; line-height: 1.5; text-align: center; }
.more-soon { font-family: var(--caps); font-size: 11px; letter-spacing: .2em; color: rgba(201, 162, 74, .6); }

/* The status strip: pinned to the bottom, above the grime */
.status { position: relative; z-index: 7; margin-top: auto; display: flex; align-items: stretch; background: rgba(13, 21, 15, .72); border-top: 1px solid var(--hairline); }
.status-half { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; padding: 20px 34px; }
.status-rule { width: 1px; background: var(--hairline); }
.status-label { font-family: var(--caps); font-size: 11px; letter-spacing: .22em; color: var(--brass); }
.status-value { font-family: var(--display); font-size: 22px; color: var(--parchment); }
.status-aside { font-size: 14px; color: var(--parchment-75); }

/* ---------- narrower screens: the handoff's note, and no more ----------
   Five columns, then two, then one; the hero and crest scale down; the
   status strip stacks. */
@media (max-width: 1000px) {
  .doors { grid-template-columns: repeat(2, 1fr); }
  .door-more { grid-column: 1 / -1; height: auto; }
  .hero h1 { font-size: 40px; }
}
@media (max-width: 640px) {
  .gate { padding: 40px 14px 76px; }
  .banner { padding: 30px 22px 30px; gap: 24px; }
  .crest-block { gap: 22px; }
  .crest { transform: scale(.8); margin: -13px; }
  .row, .providers { flex-direction: column; align-items: stretch; }
  .field { flex: none; width: auto; }
  .hub-header { padding: 18px 22px; }
  .hero { padding: 34px 22px 26px; }
  .hero h1 { font-size: 32px; }
  .doors { grid-template-columns: 1fr; padding: 0 22px; }
  .door { height: auto; min-height: 150px; gap: 26px; }
  .status { flex-direction: column; }
  .status-rule { width: auto; height: 1px; }
  .status-half { padding: 16px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .crest i { animation: none !important; }
  .crest .glow { opacity: .6; }
}