/* STRONGHOLD: medieval administration through a modern terminal.

   CANDLE & OAK. The palette began as the desktop game's own
   (game_stronghold.py). Every cool blue has since been pulled out of the
   greys and replaced with soot, oak and tallow, so the gold that was
   always in the design reads as candlelight rather than as decoration.

   Type is Cinzel for anything inscribed — the wordmark, headings, tab
   labels — and EB Garamond for everything read. Both are self-hosted
   below: a phone on a slow connection makes no third-party round-trip
   before it can read the page. */

@font-face {
  font-family: "Cinzel";
  src: url("fonts/cinzel.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/garamond.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/garamond-italic.woff2") format("woff2");
  font-weight: 400 600; font-style: italic; font-display: swap;
}

:root {
  --ink:        #12100b;
  --stone:      #1d1811;
  --stone-hi:   #262017;
  --edge:       #3b3122;
  --rule:       #2a2318;
  --text:       #ddd0b6;
  --value:      #f2e8d2;
  --muted:      #a29174;
  --faint:      #71644f;
  --gold:       #d2ac42;
  --gold-lit:   #e0bb55;   /* the flame itself: wordmark, selected tabs */
  --gold-dim:   #8a6f2e;
  --good:       #82a262;
  --bad:        #bd6046;
  --accent:     #9c7c3c;
  --parchment:  #e8dcc0;

  --oak:        #241d14;   /* panel and card faces */
  --oak-deep:   #171208;
  --well:       #0d0a06;   /* inputs and pills: cut into the surface */
  --sunk:       #16120b;   /* unselected tabs and controls */
  --lit:        #2b2110;   /* selected tabs and controls */
  --oak-edge:   #4a3c27;

  /* Soot. One noise tile, reused, so flat blocks stop reading as flat. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  /* Tooled hide. Seamless 256px tile, generated rather than licensed. */
  --leather: url("tex/leather.webp");

  --serif: "Cinzel", "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "EB Garamond", Georgia, "Times New Roman", serif;
  --mono: "Courier New", Consolas, "SF Mono", Menlo, monospace;
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--ink);
  background-image: var(--grain);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ---------- the medieval furniture ---------- */

.crest {
  font-family: var(--serif);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(210,172,66,.28);
}

.rule-orn {
  display: flex; align-items: center; gap: 12px;
  color: var(--gold-dim); font-size: 12px;
}
.rule-orn::before, .rule-orn::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

/* ---------- gate (login / create) ---------- */

/* One warm source above, everything falling away from it. */
.gate {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 24px 18px 60px;
  background-color: var(--ink);
  background-image:
    radial-gradient(90% 55% at 50% -5%, rgba(228,178,72,.20) 0%, transparent 62%),
    radial-gradient(140% 100% at 50% 0%, #241c11 0%, transparent 70%),
    var(--grain);
}
.gate h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 9vw, 56px);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-lit); margin: 0 0 4px; text-align: center;
  text-shadow:
    0 1px 0 #000,
    0 0 12px rgba(224,187,85,.35),
    0 0 40px rgba(224,187,85,.18);
}
/* The mark, above the word. It is a mask rather than a coloured image,
   so the artwork carries no colour of its own and takes whatever the
   theme paints behind it — struck metal lit from the candle above,
   bright at the crown and falling to dim gold at the plinth. Swap the
   background-image for a flat colour and it goes flat. */
.gate h1::before {
  content: "";
  display: block;
  /* the mark is 200 x 271.95, so height is width x 1.36 */
  width: min(94px, 24vw);
  height: min(128px, 32.6vw);
  margin: 0 auto 14px;
  background-color: var(--gold);     /* if the gradient is ever dropped */
  background-image: linear-gradient(180deg, #f0d074 0%, #d2ac42 46%, #8a6f2e 100%);
  -webkit-mask: url("sym/mark.svg") center/contain no-repeat;
          mask: url("sym/mark.svg") center/contain no-repeat;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.55))
          drop-shadow(0 0 18px rgba(224, 187, 85, .26));
}
.gate .sub {
  color: #9d8c6f; text-align: center; margin: 0 0 22px;
  font-family: var(--sans); font-style: italic;
}
/* The tagline sits close to the links below it: they read as one
   introduction, with the breathing room saved for above the panel. */
.gate .sub-tight { margin-bottom: 9px; }
.gate .intro-links {
  color: var(--faint); font-size: 12px; text-align: center;
  max-width: 440px; margin: 0 0 22px;
}
.gate .intro-links a { color: #b39a63; }

/* Hide stretched over oak, lit from above. The texture is a seamless
   256px tile laid over the gradient with overlay, so it darkens and
   lightens what is already there rather than painting its own colour. */
.panel {
  position: relative;
  width: min(440px, 100%);
  background-color: var(--oak);
  background-image: var(--leather), linear-gradient(180deg, var(--oak), var(--oak-deep));
  background-blend-mode: overlay, normal;
  background-size: 256px 256px, auto;
  border: 1px solid #55452c;
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(226,190,116,.10) inset,
    0 0 0 1px rgba(0,0,0,.55),
    0 20px 50px rgba(0,0,0,.66);
  padding: 20px;
}
/* the stitched line a bound cover carries just inside its edge */
.panel::after {
  content: "";
  position: absolute; inset: 7px;
  border: 1px dashed rgba(226,190,116,.16);
  border-radius: 2px;
  pointer-events: none;
}
.tabs-2 { display: flex; gap: 0; margin: -20px -20px 18px; }
.tabs-2 button {
  flex: 1; padding: 13px 8px; background: #15110a; color: #93826a;
  border: 0; border-bottom: 1px solid var(--oak-edge);
  font-family: var(--serif); letter-spacing: .1em; text-transform: uppercase;
  font-size: 13px; cursor: pointer;
}
.tabs-2 button[aria-selected="true"] {
  background: var(--oak); color: var(--gold-lit);
  border-bottom-color: var(--gold-dim);
  box-shadow: inset 0 1px 0 rgba(226,190,116,.12);
}
label { display: block; margin: 14px 0 6px; font-size: 13px; color: var(--muted); }
input[type=text], input[type=password], input[type=number], select {
  width: 100%; padding: 12px; font-size: 16px;
  background: var(--well); color: var(--value);
  border: 1px solid var(--oak-edge); border-radius: 2px;
  font-family: var(--mono);
}
/* The prompts inside the boxes are a suggestion, not an instruction, and
   should never compete with what the player types over them. */
input::placeholder {
  color: #6b5c45;
  opacity: .6;
}
input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px;
}
.hint { font-size: 12px; color: var(--faint); margin-top: 5px; }

/* ---------- founding: naming the province, realm and house ---------- */

.rule-orn.founding {
  margin: 20px 0 4px;
  font-family: var(--serif); letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-dim); font-size: 11px;
}
/* Each label carries its role, so the three are never confused for
   one another: the land, the kingdom above it, and the family. */
label .role {
  float: right; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--faint); font-size: 12px;
  font-style: italic;
}
.styling {
  margin: 16px 0 0; padding: 10px 12px;
  background: #191307; border: 1px solid var(--gold-dim);
  border-radius: 2px;
  font-family: var(--sans); font-size: 13.5px; line-height: 1.5;
  color: #cbb98d;
}
.styling b { color: var(--gold-lit); font-weight: 600; }
.btn {
  display: block; width: 100%; margin-top: 18px; padding: 14px;
  background-color: #33270f;
  background-image: var(--leather), linear-gradient(180deg, #3a2c11, #221909);
  background-blend-mode: overlay, normal;
  background-size: 256px 256px, auto;
  color: #e6c368; border: 1px solid var(--gold-dim); border-radius: 2px;
  font-family: var(--serif); font-size: 15px; letter-spacing: .16em;
  text-transform: uppercase; cursor: pointer;
  box-shadow: 0 1px 0 rgba(226,190,116,.16) inset, 0 2px 6px rgba(0,0,0,.45);
}
.btn:hover { background-color: #453413; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.plain { background: var(--stone-hi); color: var(--text); border-color: var(--edge); }
.btn.danger { color: #d07a60; border-color: #5c3323; }

.notice {
  margin-top: 18px; padding: 13px 14px; border-radius: 2px;
  background: #191307; border: 1px solid #6b5526;
  color: #cbb98d; font-size: 13px; line-height: 1.55;
}
.notice strong { color: var(--gold-lit); }
.msg { margin-top: 14px; padding: 11px; border-radius: 2px; font-size: 14px; }
.msg.err { background: #24160f; border: 1px solid #5c3323; color: #e0a891; }
.msg.ok  { background: #1a2011; border: 1px solid #3f5228; color: #bcd39a; }
/* the one warning on the sign-up form that actually costs something
   if it is ignored */
.warn {
  margin-top: 9px; padding: 9px 11px; border-radius: 2px;
  background: #1f1608; border: 1px solid #6b5526;
  color: #d0bb8a; font-size: 12.5px; line-height: 1.5;
}
.warn strong { color: var(--gold-lit); }

/* THE ROLL. Deliberately small: it is a line of names under the gate,
   not a leaderboard. It only appears once somebody has actually won. */
.honours {
  width: min(440px, 100%); margin: 22px auto 0;
  border-top: 1px solid var(--edge); padding-top: 16px;
}
.honours h2 {
  margin: 0 0 10px; text-align: center;
  font-family: var(--serif); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-dim); font-weight: 600;
}
.honours h2::before, .honours h2::after {
  content: "";
  display: inline-block; vertical-align: -1px;
  width: 11px; height: 11px; margin: 0 8px;
  background-color: var(--gold-dim);
  -webkit-mask: url("sym/fleuron.svg") center/contain no-repeat;
          mask: url("sym/fleuron.svg") center/contain no-repeat;
}
.honours ol { margin: 0; padding: 0; list-style: none; }
.honours li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 2px; font-size: 12.5px; color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
.honours li:last-child { border-bottom: 0; }
.honours li b { color: var(--gold-lit); font-weight: 600; }
.honours .honour-day {
  margin-left: auto; color: var(--faint); font-family: var(--mono);
  font-size: 11px; white-space: nowrap;
}

/* the victory screen */
.victory-card { border-color: var(--gold-dim); }
.victory-card > h2 { color: var(--gold-lit); letter-spacing: .22em; }
.victory-line {
  margin: 0 0 6px; font-family: var(--serif); color: var(--value);
  font-size: 18px; line-height: 1.4;
}
.victory-sub { margin: 0 0 4px; color: var(--muted); font-size: 14px; }

/* ---------- the game ---------- */

.top {
  position: sticky; top: 0; z-index: 20;
  background-color: #1c160e;
  background-image: var(--leather), linear-gradient(180deg, #1c160e, #12100b);
  background-blend-mode: overlay, normal;
  background-size: 256px 256px, auto;
  border-bottom: 1px solid var(--edge);
}
.top-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
}
.top .name {
  font-family: var(--serif); color: var(--gold-lit);
  letter-spacing: .14em; text-transform: uppercase; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top .spacer { flex: 1; }
.pill {
  font-family: var(--mono); font-size: 12px; color: var(--value);
  background: var(--well); border: 1px solid var(--edge);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.figs { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 9px; }
.figs .pill { flex: none; }

.tabbar {
  display: flex; gap: 2px; overflow-x: auto; padding: 0 8px 8px;
  scrollbar-width: thin;
}
.tabbar button {
  flex: none; padding: 8px 13px; font-size: 13px;
  background: var(--sunk); color: #93826a;
  border: 1px solid var(--edge); border-radius: 3px;
  font-family: var(--serif); letter-spacing: .08em; cursor: pointer;
}
.tabbar button[aria-selected="true"] { background: var(--lit); color: var(--gold-lit); border-color: var(--gold-dim); }

main { padding: 12px 12px 120px; max-width: 780px; margin: 0 auto; }

.card {
  background-color: #1f1911;
  background-image: var(--leather), linear-gradient(180deg, #1f1911, #1a150e);
  background-blend-mode: overlay, normal;
  background-size: 256px 256px, auto;
  border: 1px solid var(--edge);
  border-radius: 3px; margin-bottom: 12px; overflow: hidden;
}
.card > h2 {
  margin: 0; padding: 10px 14px 8px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: #d8c9a8; font-weight: 600;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
/* A tooled mark on each heading. A heading is not a control, so
   nothing the player aims at moves. */
.card > h2::before {
  content: "";
  flex: none; align-self: center;
  width: 13px; height: 13px;
  background-color: var(--gold-dim);
  -webkit-mask: url("sym/fleuron.svg") center/contain no-repeat;
          mask: url("sym/fleuron.svg") center/contain no-repeat;
}
.card > h2 .note {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0;
  text-transform: none; color: var(--faint); font-weight: 400;
}
.card .body { padding: 12px 14px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; }
.kv dt { color: var(--muted); font-size: 14px; }
.kv dd {
  margin: 0; font-family: var(--mono); color: var(--value);
  font-variant-numeric: tabular-nums; font-size: 14px; text-align: right;
}
.lines p { margin: 0 0 8px; color: var(--text); font-size: 14px; }
.lines p:last-child { margin-bottom: 0; }
.lines p::before { content: "· "; color: var(--gold-dim); }
.empty { color: var(--faint); font-size: 13px; font-style: italic; }

.ctrl { margin-bottom: 12px; }
.ctrl:last-child { margin-bottom: 0; }
.ctrl > label { margin: 0 0 5px; }
.ctrl .sub { font-size: 11px; color: var(--faint); }
.seg { display: flex; flex-wrap: wrap; gap: 5px; }
.seg button {
  flex: 1 1 auto; min-width: 74px; padding: 9px 6px; font-size: 13px;
  background: var(--sunk); color: #93826a;
  border: 1px solid var(--edge); border-radius: 3px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--lit); color: var(--gold-lit); border-color: var(--gold-dim); }
.tog {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  background: var(--sunk); border: 1px solid var(--edge); border-radius: 3px;
  margin-bottom: 6px; cursor: pointer;
}
.tog input { width: 20px; height: 20px; accent-color: var(--gold); }
.tog.on { border-color: var(--gold-dim); background: #201808; }

.tbl { width: 100%; overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl td { padding: 7px 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl td:first-child { color: var(--gold-dim); white-space: nowrap; font-family: var(--serif); }
.letter { color: var(--text); }

.commitbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: linear-gradient(180deg, rgba(18,16,11,.93), #12100b);
  border-top: 1px solid var(--edge);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.commitbar .inner { max-width: 780px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.commitbar .staged { flex: 1; font-size: 12px; color: var(--muted); max-height: 44px; overflow-y: auto; }
.commitbar .btn { margin: 0; width: auto; padding: 12px 18px; white-space: nowrap; }

.adslot {
  margin: 14px 0; padding: 10px; text-align: center;
  background: var(--sunk); border: 1px dashed var(--edge); border-radius: 4px;
  color: var(--faint); font-size: 12px; min-height: 60px;
  display: flex; align-items: center; justify-content: center;
}
.foot { color: var(--faint); font-size: 12px; text-align: center; padding: 20px 12px 40px; }
.foot a { color: var(--muted); }

@media (min-width: 700px) {
  .kv dt, .kv dd { font-size: 15px; }
  main { padding: 18px 18px 120px; }
}

/* The day's price, under the day's orders, in the bar that is always
   on screen. Gold because it is the number that decides things. */
.commitbar .staged .cost {
  color: var(--gold-lit);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* "have 3" under a building, below its description. Dimmer than the
   description so the two do not read as one run-on sentence. */
.hint.sub-count { color: var(--gold-dim); font-family: var(--mono); font-size: 11.5px; }

/* ---------- the end of the world ---------- */

/* Over everything, and not dismissable. The world has ended; the only
   way out of this is the button. */
.endveil {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6, 5, 3, .93);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.endbox {
  width: min(520px, 100%);
  background-color: var(--oak);
  background-image: var(--leather), linear-gradient(180deg, var(--oak), var(--oak-deep));
  background-blend-mode: overlay, normal;
  background-size: 256px 256px, auto;
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  padding: 24px 22px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.7),
              0 0 70px rgba(224,187,85,.10);
}
.endbox h2 {
  margin: 0 0 14px;
  font-family: var(--serif); font-size: 22px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-lit); text-align: center;
}
.endbox p { margin: 0 0 14px; color: var(--text); line-height: 1.6; }
.endbox .endwin { color: var(--gold-lit); }
.endbox textarea {
  width: 100%; padding: 11px; font-size: 16px;
  background: var(--well); color: var(--value);
  border: 1px solid var(--oak-edge); border-radius: 2px;
  font-family: var(--sans); resize: vertical;
}
.endbox .btn { margin-top: 16px; }

/* An etched line on the roll: what somebody wrote at the end of the
   world, with the kingdom it came from underneath. */
.honours li.etched {
  display: block; padding: 10px 2px;
  border-bottom: 1px solid var(--rule);
}
.honours li.etched q {
  display: block; quotes: "\201C" "\201D";
  color: var(--parchment); font-size: 14px; line-height: 1.55;
  font-style: italic;
}
.honours li.etched .etched-by {
  display: block; margin-top: 4px;
  color: var(--gold-dim); font-size: 11.5px;
  letter-spacing: .04em;
}