/* The notice-board look shared by forums.html and account.html: wood in the carved frame, engraved strips with brass
   diamonds, carved beds under text, parchment letters, struck-metal buttons. From the game's own UI. */
:root {
  --ink: #080b0f; --parch: #f1e6c8; --parch-dim: #b9ad8f; --gold: #f2d488; --gold-deep: #b8862e; --ember: #ff8a3d; --leaf: #b9dc7a; --bad: #ff9c84;
  --display: "Cinzel Decorative", "Cinzel", Georgia, serif; --head: "Cinzel", Georgia, serif; --body: "Alegreya", Georgia, serif; --mono: "VT323", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  /* the carved recess: a dark bed cut into the wood, a light lip below */
  --bed: linear-gradient(rgba(14,11,8,.82), rgba(24,19,13,.78)); --cut: inset 0 2px 4px rgba(0,0,0,.72), inset 0 0 0 1px rgba(0,0,0,.35), 0 1px 0 rgba(255,220,150,.12);
}
* { box-sizing: border-box; }
html { background: var(--ink); color: var(--parch); }
body { margin: 0; font-family: var(--body); font-size: 18px; line-height: 1.55; background: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
img.px { image-rendering: pixelated; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
/* scrollbars: a carved groove with a brass thumb */
* { scrollbar-width: thin; scrollbar-color: #9a7434 #1a140d; }
::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #1a140d; box-shadow: inset 0 0 0 1px #000, inset 2px 0 3px rgba(0,0,0,.7); }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #6b4c1c, #c79a4a 50%, #6b4c1c); border: 2px solid #1a140d; border-radius: 6px; }

/* ---- the header, as on the front page ---- */
header.top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--gutter); background: linear-gradient(#070a0f, #06080c); box-shadow: 0 1px 0 rgba(242,212,136,.12), 0 6px 14px rgba(0,0,0,.45); }   /* solid: what scrolls under it must not show through */
.mark { display: block; line-height: 0; text-decoration: none; }
.mark img { height: 28px; width: auto; }
nav.links { display: flex; gap: clamp(12px, 2vw, 26px); align-items: center; font-family: var(--head); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
nav.links a { text-decoration: none; opacity: .72; } nav.links a:hover { opacity: 1; }
nav.links a.here { opacity: 1; border-bottom: 1px solid rgba(242,212,136,.5); padding-bottom: 2px; }
@media (max-width: 720px) { nav.links a.hide-sm { display: none; } }
@media (max-width: 440px) { .mark img { height: 24px; } nav.links { gap: 10px; letter-spacing: .14em; } nav.links .btn.small { display: none; } }   /* a phone can't run the game, and the Download button pushed the bar 40px past a 375px screen */

/* struck-metal buttons: ruby for the thing to do, dark iron for the rest */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 20px 10px; font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: #fff2d8; cursor: pointer; white-space: nowrap;
  background: linear-gradient(#a8322a, #6d1812 55%, #4e0f0b); border: 1px solid #1c0605; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,200,170,.35), inset 0 0 0 1px rgba(242,212,136,.35), 0 0 0 1px rgba(0,0,0,.6), 0 4px 12px rgba(120,20,10,.35); text-shadow: 0 1px 0 rgba(0,0,0,.6); transition: filter .2s, transform .1s; }
.btn:hover { filter: brightness(1.15); } .btn:active { transform: translateY(1px); } .btn[disabled] { filter: grayscale(.6) brightness(.7); cursor: default; }
.btn.iron { background: linear-gradient(#3d352a, #231d15); color: var(--gold); box-shadow: inset 0 1px 0 rgba(255,220,150,.18), inset 0 0 0 1px rgba(242,212,136,.22), 0 0 0 1px rgba(0,0,0,.6); }
.btn.small { padding: 7px 12px 6px; font-size: 11px; letter-spacing: .14em; }
.btn.google::before { content: "G"; font-family: Georgia, serif; font-weight: 700; font-size: 15px; letter-spacing: 0; color: #fff; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6f93d9, #2a4f9a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }

/* ---- the lintel: the square behind, the name of the place ---- */
.lintel { position: relative; padding: 64px var(--gutter) 42px; overflow: hidden; isolation: isolate; }
.lintel::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: url(media3d/town.jpg) center 40% / cover; filter: blur(6px) brightness(.42) saturate(1.1); }
.lintel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,8,12,.86), rgba(6,8,12,.35) 70%), linear-gradient(transparent 55%, var(--ink)); }
.lintel .kicker { font-family: var(--mono); font-size: 22px; letter-spacing: .14em; color: var(--gold); margin: 0 0 6px; }
.lintel h1 { font-family: var(--display); font-weight: 900; font-size: clamp(40px, 6vw, 84px); line-height: .95; margin: 0 0 12px; background: linear-gradient(180deg, #fff6d6, #f2d488 45%, #b8862e 85%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(40,24,6,.9)); }
.lintel p { margin: 0; max-width: 52ch; color: var(--parch); text-shadow: 0 1px 10px rgba(0,0,0,.9); }

/* ---- the hall: the board in wood, the seal beside it ---- */
.hall { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; width: min(1320px, 100%); margin: 0 auto; padding: 0 var(--gutter) 70px; }
@media (max-width: 1000px) { .hall { grid-template-columns: 1fr; } .side { display: contents; } .side > .panel { order: -1; } .side > .scroll { order: 1; } }   /* on a phone: your seal, the board, then the rules */
/* the game's recipe (etc/styles.css, auth/): the frame's centre is NOT filled — "50 fill" stretched its 300px of wood to the panel's size — so rs_wood tiles at 108px underneath */
.panel { position: relative; border: 20px solid transparent; border-image: url(assets/rs_panel_frame.png) 50 / 20px / 0 round; background: url(assets/rs_wood.png) 0 0 / 108px 108px; box-shadow: 0 24px 50px rgba(0,0,0,.55); }
.panel > .inner { padding: 6px 8px 10px; }
/* an engraved strip: a dark cut with a light lip, brass diamonds at each end */
.strip { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 8px 14px 7px; background: linear-gradient(#17120c, #251d13); box-shadow: var(--cut); border-radius: 2px; }
.strip::before, .strip::after { content: none; }
.strip h2, .strip .t { flex: 1; margin: 0; font-family: var(--head); font-weight: 700; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: #ecd9a6; text-shadow: 0 1px 0 #000; min-width: 0; overflow-wrap: anywhere; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 5px 12px 4px; background: var(--bed); box-shadow: var(--cut); border-radius: 2px; width: max-content; max-width: 100%; font-family: var(--mono); font-size: 19px; letter-spacing: .05em; color: var(--parch-dim); }
.crumbs a { color: var(--gold); text-decoration: none; } .crumbs a:hover { text-decoration: underline; } .crumbs .sep { color: var(--gold-deep); }

/* rows: each cut into the wood */
.rows { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 110px minmax(0, 220px); gap: 14px; align-items: center; padding: 10px 14px 10px 10px; background: var(--bed); box-shadow: var(--cut); border-radius: 2px; text-decoration: none; transition: background .25s; }
a.row:hover { background: radial-gradient(120% 140% at 20% 0%, rgba(255,190,110,.12), transparent 60%), var(--bed); }
.row.threads { grid-template-columns: 26px minmax(0, 1fr) 90px minmax(0, 200px); padding-left: 12px; }
@media (max-width: 760px) { .row, .row.threads { grid-template-columns: 48px minmax(0, 1fr); } .row .count, .row .latest { grid-column: 2; } .row.threads { grid-template-columns: 22px minmax(0, 1fr); } }
.slot { width: 58px; height: 58px; border-radius: 3px; display: grid; place-items: center; background: linear-gradient(#37363e, #201f25); border: 2px solid #100f12; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.5); }
.slot img { width: 42px; height: 42px; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
@media (max-width: 760px) { .slot { width: 48px; height: 48px; } .slot img { width: 34px; height: 34px; } }
.row .name { font-family: var(--head); font-weight: 700; font-size: 19px; letter-spacing: .02em; color: #f6e7bf; line-height: 1.2; overflow-wrap: anywhere; }
.row .about { margin-top: 3px; font-size: 16px; color: var(--parch-dim); line-height: 1.4; }
.row .by { margin-top: 2px; font-family: var(--mono); font-size: 18px; color: var(--parch-dim); letter-spacing: .03em; }
.row .count { font-family: var(--mono); font-size: 19px; line-height: 1.15; color: #e8d9b4; font-variant-numeric: tabular-nums; }
.row .count b { font-weight: normal; color: var(--gold); font-size: 22px; }
.row .latest { font-family: var(--mono); font-size: 18px; line-height: 1.2; color: var(--parch-dim); min-width: 0; }
.row .latest span { display: block; color: #e8d9b4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* pinned, locked: small brass marks drawn in CSS */
.mark-pin, .mark-lock { width: 18px; height: 18px; display: inline-block; position: relative; }
.mark-pin::before { content: ""; position: absolute; left: 4px; top: 1px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #b8862e 60%, #6b4c1c); box-shadow: 0 1px 2px rgba(0,0,0,.7); }
.mark-pin::after { content: ""; position: absolute; left: 8px; top: 10px; width: 2px; height: 8px; background: linear-gradient(#c9c1b0, #6d665a); }
.mark-lock::before { content: ""; position: absolute; left: 4px; top: 0; width: 8px; height: 8px; border: 2px solid #c79a4a; border-bottom: none; border-radius: 6px 6px 0 0; }
.mark-lock::after { content: ""; position: absolute; left: 2px; top: 8px; width: 14px; height: 10px; border-radius: 2px; background: linear-gradient(#e2bf72, #8a6122); box-shadow: 0 1px 2px rgba(0,0,0,.7); }
.tag { display: inline-block; margin-left: 8px; padding: 0 6px; font-family: var(--mono); font-size: 16px; letter-spacing: .08em; color: #1d140a; background: linear-gradient(#f0d488, #b8862e); border-radius: 2px; vertical-align: 2px; }

/* the letters: parchment, the writer's plate on the left */
.letters { display: grid; gap: 14px; }
.letter { display: grid; grid-template-columns: 150px minmax(0, 1fr); background: linear-gradient(#f2e3bf, #e7d3a6); color: #3a2616; box-shadow: inset 0 0 0 1px rgba(90,60,30,.25), inset 0 0 36px rgba(120,80,30,.26), 0 12px 26px rgba(0,0,0,.5); border-radius: 2px; position: relative; }
.letter::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(110,70,30,.25); pointer-events: none; }
@media (max-width: 640px) { .letter { grid-template-columns: 1fr; } }
.letter .who { padding: 18px 14px; border-right: 1px solid rgba(110,70,30,.25); display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 640px) { .letter .who { border-right: none; border-bottom: 1px solid rgba(110,70,30,.25); flex-direction: row; align-items: baseline; gap: 12px; padding-bottom: 10px; } }
.letter .who b { font-family: var(--head); font-weight: 700; font-size: 17px; color: #4a2a10; overflow-wrap: anywhere; }
.letter .who .mod { font-family: var(--mono); font-size: 16px; letter-spacing: .1em; color: #8a1d14; }
.letter .who time { font-family: var(--mono); font-size: 17px; color: #8c5c2c; letter-spacing: .04em; }
.letter .say { padding: 18px 22px 16px; min-width: 0; }
.letter .say p { margin: 0 0 10px; overflow-wrap: anywhere; white-space: pre-wrap; } .letter .say p:last-child { margin-bottom: 0; }
.letter .tools { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.letter .tools button { background: none; border: none; padding: 2px 4px; font-family: var(--mono); font-size: 17px; color: #8c5c2c; cursor: pointer; letter-spacing: .05em; }
.letter .tools button:hover { color: #8a1d14; text-decoration: underline; }

/* writing: a parchment sheet in a carved frame */
.compose { margin-top: 18px; padding: 14px; background: var(--bed); box-shadow: var(--cut); border-radius: 2px; display: grid; gap: 10px; }
.compose label, .field label { font-family: var(--mono); font-size: 19px; letter-spacing: .06em; color: var(--parch-dim); }
.compose textarea, .compose input { width: 100%; border: none; border-radius: 2px; padding: 12px 14px; background: linear-gradient(#f2e3bf, #e9d6aa); color: #3a2616; box-shadow: inset 0 2px 6px rgba(90,55,20,.45), 0 0 0 1px rgba(0,0,0,.6); font-family: var(--body); font-size: 17px; line-height: 1.5; }
.compose textarea { min-height: 150px; resize: vertical; }
.compose .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.compose .left { font-family: var(--mono); font-size: 18px; color: var(--parch-dim); }
.field { display: grid; gap: 4px; }
.crier { display: grid; grid-template-columns: 160px 1fr; gap: 10px; } .crier .wide { grid-column: 1 / -1; } .crier > div { display: grid; gap: 4px; }
.crier select { width: 100%; padding: 10px 12px; border: none; border-radius: 2px; background: linear-gradient(#f2e3bf, #e9d6aa); color: #3a2616; box-shadow: inset 0 2px 6px rgba(90,55,20,.45), 0 0 0 1px rgba(0,0,0,.6); font-family: var(--head); font-size: 14px; }
@media (max-width: 640px) { .crier { grid-template-columns: 1fr; } }
.field input { width: 100%; padding: 10px 12px; border: 1px solid #6f5a30; border-radius: 2px; background: linear-gradient(rgba(14,11,8,.92), rgba(24,19,13,.92)); color: var(--parch); box-shadow: inset 0 2px 4px rgba(0,0,0,.8); font-family: var(--body); font-size: 17px; }
.field input::placeholder { color: #7d7058; }

/* the seal: who you are here */
.side { display: grid; gap: 22px; position: sticky; top: 76px; }
@media (max-width: 1000px) { .side { position: static; } }
.seal { display: grid; gap: 12px; }
.bedbox { display: grid; gap: 12px; padding: 14px 14px 16px; background: var(--bed); box-shadow: var(--cut); border-radius: 2px; }
.seal .who { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bed); box-shadow: var(--cut); border-radius: 2px; }
.seal .wax { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 20px; color: #ffd9c4; background: radial-gradient(circle at 38% 32%, #c8463a, #7e1a12 60%, #4d0e09); box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,190,170,.4), 0 2px 5px rgba(0,0,0,.6); }
.seal .who b { display: block; font-family: var(--head); font-size: 17px; color: #f6e7bf; overflow-wrap: anywhere; }
.seal .who span { display: block; font-family: var(--mono); font-size: 17px; color: var(--parch-dim); overflow-wrap: anywhere; }
.seal .or { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 17px; color: var(--parch-dim); } .seal .or::before, .seal .or::after { content: ""; flex: 1; height: 1px; background: rgba(242,212,136,.25); }
.seal .btns { display: flex; gap: 8px; flex-wrap: wrap; } .seal .btns .btn { flex: 1; }
.seal .hint { margin: 0; font-size: 15px; color: var(--parch-dim); line-height: 1.45; }
.notice { display: none; padding: 9px 12px; font-family: var(--mono); font-size: 18px; letter-spacing: .03em; border-radius: 2px; background: linear-gradient(#1f1710, #150f0a); box-shadow: var(--cut); color: var(--bad); }
.notice.on { display: block; } .notice.good { color: var(--leaf); }
.scroll { padding: 18px 20px; color: #3a2616; background: linear-gradient(#f2e3bf, #e7d3a6); box-shadow: inset 0 0 0 1px rgba(90,60,30,.25), inset 0 0 30px rgba(120,80,30,.26), 0 12px 24px rgba(0,0,0,.5); border-radius: 2px; }
.scroll h3 { margin: 0 0 6px; font-family: var(--head); font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: #4a2a10; }
.scroll ul { margin: 0; padding-left: 18px; font-size: 16px; line-height: 1.45; } .scroll li { margin: 3px 0; }
.scroll .dl { display: block; margin-top: 12px; text-align: center; }
.empty, .loading { padding: 26px 16px; text-align: center; font-family: var(--mono); font-size: 21px; color: var(--parch-dim); background: var(--bed); box-shadow: var(--cut); border-radius: 2px; }
.loading::after { content: "…"; animation: dots 1.2s steps(3) infinite; display: inline-block; width: 1em; text-align: left; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } to { width: 1em; } }
.testbar { background: repeating-linear-gradient(135deg, #3a2a0c 0 12px, #2a1e09 12px 24px); color: var(--gold); font-family: var(--mono); font-size: 18px; letter-spacing: .08em; text-align: center; padding: 4px 10px; }
footer { padding: 26px var(--gutter) 32px; display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; font-family: var(--mono); font-size: 19px; color: var(--parch-dim); border-top: 1px solid rgba(242,212,136,.1); background: #06080b; }
footer a { text-decoration: none; } footer a:hover { color: var(--gold); }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 90; transform: translate(-50%, 12px); opacity: 0; transition: opacity .35s, transform .35s; max-width: min(560px, calc(100vw - 32px)); padding: 10px 18px 9px; font-family: var(--mono); font-size: 20px; letter-spacing: .03em; color: var(--bad); background: linear-gradient(#241a10, #150f0a); border: 1px solid #6f5a30; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,220,150,.12), 0 10px 26px rgba(0,0,0,.6); }
.toast.on { opacity: 1; transform: translate(-50%, 0); } .toast.good { color: var(--leaf); }
.armed { color: #fff2d8 !important; background: linear-gradient(#a8322a, #6d1812) !important; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }