:root {
  --ink: #2b1d10; --muted: #6b5434; --parch: #efe3c4; --parch-2: #e4d4ae; --line: #b39a6a;
  --red: #8e130b; --red-hi: #b21d12; --gold: #ffd04f; --stone: #9d968a; --bg: #1a120c;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(ellipse at 50% 0%, #3a2a1c 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--ink); font: 16px/1.55 Georgia, "Times New Roman", serif; min-height: 100vh;
}
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: Cinzel, Georgia, serif; line-height: 1.2; color: #3a1a08; }
h1 { font-size: 30px; margin: 0 0 12px; }
h2 { font-size: 21px; margin: 28px 0 10px; padding-bottom: 4px; border-bottom: 2px solid var(--line); clear: both; }
h3 { font-size: 17px; margin: 18px 0 6px; }
.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 16px;
  background: linear-gradient(#2c2016, #1e150e); border-bottom: 3px solid #4a2f16;
  box-shadow: 0 4px 12px rgba(0,0,0,.5); position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; flex-direction: column; align-items: center; text-decoration: none !important; }
.tiles { display: flex; gap: 2px; }
.tiles b {
  display: inline-grid; place-items: center; width: 24px; height: 28px; border-radius: 3px;
  font: 900 17px Cinzel, Georgia, serif; color: #26231f;
  background: linear-gradient(160deg, #c5beb0, #8f897d 60%, #6a655b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 3px rgba(0,0,0,.6);
}
.tiles b:nth-child(odd) { transform: rotate(-4deg) translateY(2px); }
.tiles b:nth-child(even) { transform: rotate(3deg); }
.ribbon {
  margin-top: -2px; padding: 1px 14px; font: 900 12px Cinzel, Georgia, serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 0 #2a0402;
  background: linear-gradient(var(--red-hi), var(--red) 55%, #5e0905); border: 2px solid #2a0402;
  transform: rotate(-2deg);
}
nav { display: flex; flex-wrap: wrap; gap: 6px 14px; flex: 1 1 420px; }
nav a { font: 700 14px Cinzel, Georgia, serif; color: #f0e2bf; letter-spacing: .04em; }
nav a.play { color: var(--gold); margin-left: auto; }
.search { position: relative; flex: 0 1 260px; }
.search input {
  width: 100%; padding: 7px 10px; border-radius: 4px; border: 2px solid #5a3d1f;
  background: #f5ead0; font: 15px Georgia, serif; color: var(--ink);
}
#hits {
  position: absolute; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 0; list-style: none;
  background: var(--parch); border: 2px solid #5a3d1f; border-radius: 4px; max-height: 60vh;
  overflow: auto; display: none; box-shadow: 0 8px 18px rgba(0,0,0,.5);
}
#hits.open { display: block; }
#hits li a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; }
#hits li a span { color: var(--muted); font-size: 12px; }
#hits li a:hover, #hits li a.sel { background: var(--parch-2); text-decoration: none; }
.page {
  max-width: 1050px; margin: 22px auto; padding: 26px 30px 34px; background: var(--parch);
  border: 3px solid #5a3d1f; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 0 60px rgba(120,80,30,.18);
}
.lead { font-size: 17px; color: #3f2c17; }
.icon { width: 36px; height: 32px; vertical-align: middle; image-rendering: pixelated; margin-right: 4px; }
.big { width: 72px; height: 64px; float: right; image-rendering: pixelated; }
table { border-collapse: collapse; width: 100%; margin: 8px 0 14px; font-size: 15px; background: #f6edd6; }
th, td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: middle; }
th { background: #d9c497; font-family: Cinzel, Georgia, serif; font-size: 13px; color: #3a1a08; }
tr:nth-child(even) td { background: #f0e5c8; }
td.n, th.n { text-align: right; white-space: nowrap; }
.info { float: right; width: 300px; margin: 0 0 14px 20px; }
.info td:first-child { font-weight: bold; width: 42%; }
.tag { display: inline-block; padding: 0 7px; border-radius: 9px; font-size: 12px; background: #d9c497; color: #3a1a08; margin: 0 2px; }
.tag.Gear { background: #c8d6e8; } .tag.Run { background: #e8c8c8; } .tag.Hub { background: #cfe3c4; } .tag.Quest { background: #e7d7ff; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 12px 0; }
.card { display: block; padding: 12px 14px; background: #f6edd6; border: 2px solid var(--line); border-radius: 5px; color: var(--ink); }
.card:hover { border-color: var(--red); text-decoration: none; }
.card b { display: block; font-family: Cinzel, Georgia, serif; color: var(--red); margin-bottom: 3px; }
.note { padding: 10px 14px; background: #f7e7b5; border-left: 4px solid #c9962b; margin: 12px 0; }
.columns { columns: 2 260px; }
.foot { text-align: center; color: #a8916a; font-size: 13px; padding: 0 0 26px; }
.foot a { color: #d8bd85; }
@media (max-width: 700px) {
  .page { margin: 12px 8px; padding: 18px 14px; }
  .info { float: none; width: 100%; margin: 0 0 12px; }
  .search { flex-basis: 100%; }
  table { display: block; overflow-x: auto; }
}