/* Interval site: the reference window's aesthetic, page-sized.
   Stone bevel chrome, gold-on-brown text, parchment body. */
:root {
  --ink: #0b0703; --stone: #291f12; --stone-dk: #191108; --stone-lt: #55462d;
  --gold: #c6941e; --gold-hi: #e2b63e; --glow: 198,148,30;
  --parch: #d6c49c; --dim: #94805a; --fire: #e67e22; --grass: #3d5a23;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--ink); color: var(--parch);
  font: 14px/1.65 Verdana, Geneva, sans-serif;
  display: flex; flex-direction: column; align-items: center;
  min-height: 100vh; padding: 18px 12px 48px;
}
.stone {
  background: var(--stone);
  border-top: 2px solid var(--stone-lt); border-left: 2px solid var(--stone-lt);
  border-bottom: 2px solid var(--stone-dk); border-right: 2px solid var(--stone-dk);
}
.page { width: 100%; max-width: 860px; }
/* six doors on a phone will wrap, and a wrapped row of loose boxes reads as a
   mistake. Let it wrap as evenly spaced tiles that keep their shape, and shrink
   the type before the row breaks rather than after. */
nav { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 14px;
  align-items: stretch; justify-content: center; }
nav a {
  display: flex; align-items: center; padding: 7px 14px; color: var(--gold);
  text-decoration: none; font-weight: bold; font-size: 12px; letter-spacing: .5px;
  white-space: nowrap; border-radius: 3px; flex: 0 1 auto;
}
nav a:hover, nav a.here { background: var(--stone-dk); color: #fff; }
@media (max-width: 700px) {
  nav { gap: 1px; }
  nav a { padding: 7px 9px; font-size: 11px; letter-spacing: .2px; }
}
@media (max-width: 560px) {
  /* Six short words: two tidy rows of three on a phone, equal cells, so the
     bar reads as a bar rather than as six things of different lengths. */
  nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
  nav a { padding: 9px 2px; font-size: 10.5px; letter-spacing: 0;
    justify-content: center; text-align: center; }
}
@media (max-width: 340px) {
  nav a { font-size: 9.5px; }
}
main { padding: 22px 26px; }
h1 { color: var(--gold); font-size: 26px; letter-spacing: 1px; margin-bottom: 4px; }
h2 { color: var(--gold); font-size: 16px; letter-spacing: .5px; margin: 26px 0 8px; }
h3 { color: var(--parch); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin: 18px 0 6px; }
p { margin: 0 0 12px; }
a { color: var(--gold); }
.tagline { color: var(--dim); font-size: 13px; margin-bottom: 18px; }
.tick {
  display: inline-block; padding: 10px 18px; margin: 10px 0 4px;
  background: var(--ink); color: var(--gold);
  font: bold 22px/1 "Courier New", monospace; letter-spacing: 2px;
  border: 2px solid var(--stone-dk);
}
.ticklabel { font-size: 11px; color: var(--dim); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 14px 0; }
.card { padding: 14px 16px; }
.card b { color: var(--gold); display: block; margin-bottom: 6px; font-size: 13px; }
.card p { font-size: 12.5px; color: var(--parch); margin: 0; }
pre {
  background: var(--ink); color: var(--parch); padding: 12px 14px; overflow-x: auto;
  font: 12.5px/1.5 "Courier New", monospace; border: 2px solid var(--stone-dk); margin: 8px 0 14px;
}
code { color: var(--gold); font-family: "Courier New", monospace; font-size: .95em; }
table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
/* the board holds its shape: twelve skills scroll inside the stone,
   they do not escape it */
#board { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#board table { min-width: max-content; white-space: nowrap; font-size: 12px; margin: 10px 0 4px; }
#board th, #board td { padding: 6px 9px; }
#board th:nth-child(2), #board td:nth-child(2) { position: sticky; left: 0; background: var(--stone, #4a4238); }
th { text-align: left; color: var(--gold); padding: 8px 10px; background: var(--stone-dk); font-size: 12px; letter-spacing: .5px; }
td { padding: 7px 10px; border-bottom: 1px solid var(--stone-dk); }
tr:hover td { background: rgba(0,0,0,.18); }
.rank { color: var(--dim); width: 44px; }
ul, ol { margin: 0 0 14px 22px; }
li { margin-bottom: 6px; }
.footer { margin-top: 16px; font-size: 11px; color: var(--dim); text-align: center; }
.keys td:first-child { color: var(--gold); font-family: "Courier New", monospace; white-space: nowrap; }


/* the gate's language, brought to the site */
h1 {
  text-shadow: 0 0 14px rgba(198,148,30,.35), 0 2px 0 #1c1710;
  letter-spacing: 4px;
}
.page > main.stone { position: relative; }
.torch {
  position: absolute; top: -21px; width: 12px; height: 26px;
  background: radial-gradient(ellipse at 50% 85%, #f4d03f 0%, #e67e22 45%, transparent 72%);
  filter: drop-shadow(0 0 8px rgba(230,126,34,.6));
  animation: flick .6s infinite alternate ease-in-out;
}
.torch.l { left: 14px; } .torch.r { right: 14px; animation-delay: .27s; }
.torch::after {
  content: ''; position: absolute; left: 3px; top: 24px; width: 6px; height: 8px;
  background: #2e2820; border: 1px solid #55483a; animation: none;
}
@keyframes flick {
  from { transform: scaleY(1) skewX(-3deg); opacity: .85; }
  to { transform: scaleY(1.22) skewX(4deg); opacity: 1; }
}
a { color: var(--gold); }
a:hover { text-shadow: 0 0 8px rgba(198,148,30,.5); }
pre, code {
  background: #241f18; border: 1px solid #3a332a;
  border-radius: 2px; color: #d9c9a3;
}
pre { padding: 10px 12px; overflow-x: auto; }
.card, .stone { box-shadow: 0 2px 14px rgba(0,0,0,.35); }


/* the hero stands centered: a title, a heartbeat, a caption */
main.stone > h1, main.stone > .tagline, main.stone > .ticklabel { text-align: center; }
main.stone > .tick { display: block; width: fit-content; margin: 12px auto 6px; }


/* the board, readable: full names, striped rows, honored ranks */
#board th { text-transform: capitalize; font-size: 11px; letter-spacing: .3px; }
#board tr:nth-child(even) td { background: rgba(0,0,0,.10); }
#board tr:nth-child(even) td:nth-child(2) { background: #3f382e; }
#board tr:hover td { background: rgba(198,148,30,.06); }
#board td:nth-child(3) { color: var(--gold); font-weight: bold; }
#board tr:nth-child(2) td:first-child { color: #e2b63e; font-weight: bold; }
#board tr:nth-child(3) td:first-child { color: #c0c0c0; font-weight: bold; }
#board tr:nth-child(4) td:first-child { color: #b08d57; font-weight: bold; }


/* ---- v0.52 palette: earthen stone, grained and cracked, metal-gold ---- */
body {
  background-image: 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.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}
.stone {
  background-color: var(--stone);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)' opacity='0.10'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 26% 8%, rgba(255,238,196,.055), transparent 55%),
    radial-gradient(ellipse at 88% 96%, rgba(0,0,0,.3), transparent 55%);
}
main.stone {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='840' height='920'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M120 40 L146 96 L128 128 L168 176 L150 214 L188 270 L172 322 L206 388 M146 96 L192 112 M168 176 L126 200 M610 430 L646 494 L620 548 L672 620 L648 690 L704 766 M646 494 L696 512 M620 548 L578 566' opacity='0.09' stroke-width='3.6'/%3E%3Cpath d='M120 40 L146 96 L128 128 L168 176 L150 214 L188 270 L172 322 L206 388 M146 96 L192 112 M168 176 L126 200 M610 430 L646 494 L620 548 L672 620 L648 690 L704 766 M646 494 L696 512 M620 548 L578 566' opacity='0.26' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)' opacity='0.10'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 26% 8%, rgba(255,238,196,.055), transparent 55%),
    radial-gradient(ellipse at 88% 96%, rgba(0,0,0,.3), transparent 55%);
}
h1 {
  background: linear-gradient(180deg, #f2d574 0%, #c6941e 50%, #855c10 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 11px rgba(var(--glow),.38)) drop-shadow(0 1px 0 rgba(0,0,0,.6));
}
.tick { color: var(--gold-hi); }
/* the creed: bold gold lines marked by small carved runes, no boxes */
.tenet { margin: 0 0 11px; padding-left: 28px; position: relative; }
.tenet b { color: var(--gold); }
.rune { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; color: var(--gold-hi);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.rune svg { display: block; }

/* the item marks beside each tenet: the flat window's own sprites, at the size
   they are drawn, kept crisp rather than smoothed into a smudge */
.itemicon { image-rendering: pixelated; opacity: .95 }
.tenet { padding-left: 34px }
.tenet .itemicon { position: absolute; left: 0; top: -2px; width: 26px; height: 26px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)) }
.card .itemicon { width: 30px; height: 30px; display: block; margin: 0 0 8px }

/* the shapes, in the fighting section: sprite, name, and the trade it makes */
.shapes { display: flex; flex-wrap: wrap; gap: 14px 20px; margin: 14px 0 16px; padding: 0 }
.shapes span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim) }
.shapes b { color: var(--gold); margin-right: 5px }
.shapes .itemicon { width: 28px; height: 28px }

/* The trade picker, in two forms. A hiscores page should open on ranks, not on
   a menu: seventeen buttons is four rows on a phone and pushed the table off
   the screen entirely. Narrow screens get one line and the native picker,
   which on a phone is a proper scrolling wheel with the families as headings.
   Wide screens keep them laid out, where there is room to see all of them. */
#picker { margin: 0 auto 14px; max-width: 560px; }

.pcompact { display: none; align-items: center; gap: 8px; }
.pcompact label { color: var(--dim); font: italic 11px Georgia, serif; }
.pcompact select {
  flex: 1 1 auto; max-width: 260px;
  background: #1a1206; color: var(--gold); border: 1px solid #4a3c24;
  border-radius: 3px; padding: 7px 9px;
  font: bold 12px Verdana, sans-serif; letter-spacing: .3px;
}
.pcompact select:focus { outline: none; border-color: var(--gold); }

.prow { display: flex; flex-wrap: nowrap; gap: 3px; align-items: flex-start; margin-bottom: 3px; }
/* v0.80: the tabs keep their own box, so a row that overflows wraps UNDER
   the tabs rather than under the label. Adding icons widened every tab and
   pushed the last skill of a family onto a line of its own, adrift. */
.ptabs { display: flex; flex-wrap: wrap; gap: 3px; flex: 1 1 auto; min-width: 0; }
.plab { padding-top: 7px; }
.prow-top { margin-bottom: 9px; }
.plab {
  font: italic 10px Georgia, serif; color: var(--dim); letter-spacing: .3px;
  width: 78px; flex: 0 0 78px; text-align: right; padding-right: 9px;
}
.stab {
  font: bold 11px Verdana, sans-serif; letter-spacing: .3px; cursor: pointer;
  color: var(--gold); background: #241a0e; border: 1px solid #4a3c24;
  padding: 6px 9px; border-radius: 3px;
}
.stab.wide { padding: 7px 18px; }
.stab:hover { border-color: var(--gold); color: var(--gold-hi); }
.stab.on { background: var(--gold); border-color: var(--gold-hi); color: #1a1206; }

@media (max-width: 640px) {
  .pcompact { display: flex; }
  .pwide { display: none; }
}

/* Three facts, each under its own label. A sentence strung together on middots
   has to be read; a number beneath a word is taken in at a glance, and the
   block stops competing with the title above it. */
.stats {
  display: flex; justify-content: center; gap: 34px;
  margin: 12px 0 2px;
}
.stat { text-align: center; min-width: 62px; }
.stat .k {
  color: var(--dim); font: 9px Verdana, sans-serif; font-variant: small-caps;
  text-transform: lowercase; letter-spacing: 2px; margin-bottom: 3px;
}
.stat .v {
  color: var(--parch); font: bold 17px ui-monospace, Menlo, monospace;
  letter-spacing: .5px;
}

/* the world's full name, kept quiet: sixty-four characters is not what anyone
   came to read. The whole hash is in the title attribute for anyone verifying
   against their own node. */
.worldid {
  text-align: center; color: #6e5f42; font: 11px ui-monospace, Menlo, monospace;
  letter-spacing: .5px; margin: 10px 0 4px; cursor: help;
}
.ticklabel:empty { display: none; }

@media (max-width: 420px) {
  .stats { gap: 20px; }
  .stat .v { font-size: 15px; }
}

/* the source link, at the foot where a reader arrives at it rather than
   stepping over it on the way in */
.footlink {
  text-align: center; color: var(--dim); font-size: 12px;
  margin: 26px 0 18px;
}

/* The finder. These rules were lost once to a careless edit and the box fell
   back to the browser default: a white rectangle in a page made of stone.
   appearance:none is load-bearing, since WebKit repaints type=search with its
   own chrome and quietly ignores a background it does not like. */
#finder {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  justify-content: center; margin: 0 auto 12px; max-width: 560px;
}
#find {
  appearance: none; -webkit-appearance: none;
  flex: 0 1 210px; width: 210px;
  background: #1d1509; color: var(--parch);
  border: 1px solid #4a3c24; border-radius: 3px;
  padding: 7px 10px;
  font: 12px Verdana, sans-serif; letter-spacing: .3px;
}
#find::placeholder { color: #6e5f42; font-style: italic; }
#find:focus { outline: none; border-color: var(--gold); background: #241a0e; }
/* the little cross WebKit adds, in this world's colours rather than blue */
#find::-webkit-search-cancel-button {
  appearance: none; -webkit-appearance: none;
  height: 11px; width: 11px; cursor: pointer;
  background: linear-gradient(45deg, transparent 45%, var(--dim) 45%, var(--dim) 55%, transparent 55%),
              linear-gradient(-45deg, transparent 45%, var(--dim) 45%, var(--dim) 55%, transparent 55%);
}
#findnote { color: var(--dim); font-size: 11px; }

/* your own row, on every board, searched or not */
tr.mine td { background: #2f2410; box-shadow: inset 2px 0 0 var(--gold); }
tr.mine td:nth-child(2) { color: var(--gold-hi); font-weight: bold; }

@media (max-width: 460px) {
  #find { flex: 1 1 auto; width: auto; }
}

/* a name is a link to that citizen's row, so it should look like one without
   becoming a button in a table full of numbers */
.nameb {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--parch); font: inherit; text-align: left; cursor: pointer;
  border-bottom: 1px dotted transparent;
}
.nameb:hover { color: var(--gold-hi); border-bottom-color: var(--gold); }
tr.mine .nameb { color: var(--gold-hi); font-weight: bold; }

/* paging. Twenty at a time: enough to see a field, few enough to read. */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 12px 0 2px;
}
.pgb {
  appearance: none; -webkit-appearance: none;
  background: #241a0e; border: 1px solid #4a3c24; border-radius: 3px;
  color: var(--gold); font: bold 11px Verdana, sans-serif; letter-spacing: .3px;
  padding: 6px 12px; cursor: pointer;
}
.pgb:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-hi); }
.pgb:disabled { color: #4a3c24; border-color: #33291a; cursor: default; }
.pgn { color: var(--dim); font: 11px ui-monospace, Menlo, monospace; }

/* one citizen, read downwards */
.citizen { text-align: center; margin: 4px 0 14px; }
/* the rank and the ground it stands on (v0.80) */
.cfind { margin-top: 6px; font-size: 12px; }
.cfind a { color: var(--gold); text-decoration: none; }
.cfind a:hover { text-decoration: underline; }
/* skill marks: the same pixel grids every window draws */
.skico { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; shape-rendering: crispEdges; }
.stab .skico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.cname { color: var(--gold-hi); font: bold 20px Verdana, sans-serif; letter-spacing: 1px; }
.ccall { color: var(--parch); font: italic 13px Georgia, serif; margin-top: 2px; }
.ckey {
  color: #6e5f42; font: 11px ui-monospace, Menlo, monospace;
  margin-top: 5px; cursor: help;
}
tr.crow-total td { background: #2b2113; border-bottom: 2px solid var(--stone-lt); }

/* the board */
.boardnote { color: var(--dim); font-size: 11.5px; line-height: 1.6; margin: 0 0 22px; text-align: center; }
.dimline { color: #6e5f42; }
/* the writing box is a place, not a gap between paragraphs */
#compose {
  border: 1px solid var(--stone-lt); background: #17100a;
  padding: 12px; margin: 16px 0 8px;
}
#bsubject, #bbody {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; box-sizing: border-box;
  background: #1d1509; color: var(--parch);
  border: 1px solid #4a3c24; border-radius: 3px;
  padding: 8px 10px; margin-bottom: 6px;
  font: 12px Verdana, sans-serif; line-height: 1.55;
}
#bbody { resize: vertical; min-height: 70px; }
#bsubject::placeholder, #bbody::placeholder { color: #6e5f42; font-style: italic; }
#bsubject:focus, #bbody:focus { outline: none; border-color: var(--gold); background: #241a0e; }
.brow { display: flex; align-items: center; gap: 10px; }
#bnote { color: var(--dim); font-size: 11px; }

.post {
  border: 1px solid var(--stone-lt); border-left: 3px solid #4a3c24;
  background: #1a1206; padding: 10px 12px; margin: 0 0 8px;
}
.post.mine { border-left-color: var(--gold); }
.psubject { color: var(--gold-hi); font: bold 13px Verdana, sans-serif; margin-bottom: 3px; }
.pmeta { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  font-size: 11px; color: var(--dim); margin-bottom: 7px; }
.pmeta a { color: var(--parch); }
.pcall { font-style: italic; color: var(--parch); }
.pstand { color: var(--gold); }
.pwhen { margin-left: auto; }
.pbody { color: var(--parch); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; }
.pfoot { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.pkey { color: #4a3c24; font: 10px ui-monospace, Menlo, monospace; cursor: help; }
.modb {
  appearance: none; -webkit-appearance: none;
  background: none; border: 1px solid #4a3c24; border-radius: 3px;
  color: var(--dim); font: 10px Verdana, sans-serif; padding: 3px 7px; cursor: pointer;
}
.modb:hover { border-color: var(--fire); color: var(--fire); }
.modb:first-of-type { margin-left: auto; }