/* LOTR+ — night over Middle-earth: ink sky, gold, parchment. */
:root {
  --ink: #0b0a09;
  --ink-2: #14110d;
  --ink-3: #1d1812;
  --line: #3a2f1f;
  --gold: #d8b25a;
  --gold-hi: #f6dc94;
  --gold-lo: #8a6420;
  --ember: #ff7a1a;
  --text: #e9dcc0;
  --muted: #a8977a;
  --parch: #efe1bf;
  --parch-ink: #2b1e0f;
  --danger: #e2735c;
  --ok: #9cc77a;
  --radius: 6px;
  --serif: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --title: "Cormorant SC", "Cormorant Garamond", "Georgia", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 500 1.18rem/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--gold-hi); text-decoration-color: rgba(216, 178, 90, .4); text-underline-offset: 3px; }
a:hover { color: #fff1c8; }
img { max-width: 100%; }
::selection { background: rgba(216, 178, 90, .35); }

/* ---------- header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 12px clamp(16px, 4vw, 48px);
  background: linear-gradient(rgba(11, 10, 9, .92), rgba(11, 10, 9, .72));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(216, 178, 90, .14);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand img { width: 36px; height: 36px; border-radius: 6px; image-rendering: pixelated; box-shadow: 0 0 18px rgba(246, 220, 148, .25); }
.brand b { font: 600 1.5rem/1 var(--title); letter-spacing: .06em; color: var(--gold-hi); }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav a { color: var(--text); text-decoration: none; font-family: var(--title); letter-spacing: .05em; font-size: 1.08rem; }
.nav a:hover { color: var(--gold-hi); }
.nav .btn { font-size: 1rem; }
@media (max-width: 720px) { .nav .hide-sm { display: none; } .nav { gap: 14px; } }

/* ---------- buttons ---------- */
.btn {
  --b: var(--gold);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 26px;
  font: 600 1.12rem/1 var(--title); letter-spacing: .08em;
  color: #1a1206;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-lo));
  border: 1px solid #f9e6ad; border-radius: var(--radius);
  box-shadow: 0 0 0 1px #5a3f12, 0 6px 24px rgba(216, 178, 90, .22), inset 0 1px 0 rgba(255, 255, 255, .45);
  cursor: pointer; text-decoration: none;
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.btn:hover { color: #1a1206; transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 0 0 1px #5a3f12, 0 10px 34px rgba(246, 220, 148, .35), inset 0 1px 0 rgba(255,255,255,.5); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: wait; transform: none; }
.btn.ghost {
  color: var(--gold-hi); background: rgba(20, 17, 13, .55);
  border-color: rgba(216, 178, 90, .55); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
}
.btn.ghost:hover { color: #fff1c8; background: rgba(216, 178, 90, .1); }
.btn.small { padding: 8px 16px; font-size: .98rem; }
.btn.big { padding: 16px 34px; font-size: 1.3rem; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: min(92vh, 860px);
  display: grid; place-items: center;
  padding: 80px 16px 220px;
  text-align: center;
  isolation: isolate;
}
.sky {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse 60% 40% at 72% 18%, rgba(120, 140, 200, .16), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255, 122, 26, .16), transparent 60%),
    linear-gradient(#05060c 0%, #0c0f1c 38%, #1a1520 70%, #2a1a12 100%);
}
.stars, .stars::after {
  position: absolute; inset: 0 0 30% 0; z-index: -2; content: "";
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 27% 8%, #fff8, transparent),
    radial-gradient(1.5px 1.5px at 41% 26%, #fff, transparent), radial-gradient(1px 1px at 58% 12%, #fffa, transparent),
    radial-gradient(1px 1px at 66% 34%, #fff9, transparent), radial-gradient(1.5px 1.5px at 83% 21%, #fff, transparent),
    radial-gradient(1px 1px at 91% 7%, #fff8, transparent), radial-gradient(1px 1px at 7% 40%, #fff7, transparent),
    radial-gradient(1px 1px at 35% 44%, #fff6, transparent), radial-gradient(1px 1px at 76% 46%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 18% 31%, #ffe9b8, transparent), radial-gradient(1px 1px at 52% 4%, #fff, transparent);
  background-size: 420px 300px;
  animation: twinkle 6s ease-in-out infinite alternate;
}
.stars::after { background-size: 260px 220px; background-position: 90px 40px; animation-delay: -3s; opacity: .7; }
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
.moon {
  position: absolute; z-index: -2; top: 9%; right: 14%;
  width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffbe9, #e8dcc0 55%, #b9ab8d);
  box-shadow: 0 0 60px 18px rgba(232, 220, 192, .18), 0 0 160px 60px rgba(150, 160, 210, .08);
}
@media (max-width: 720px) { .moon { width: 52px; height: 52px; top: 3%; right: 7%; } }
.mountains { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: 46%; overflow: visible; }
.eye { animation: eye 4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes eye { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.mist {
  position: absolute; left: -10%; right: -10%; bottom: 8%; height: 120px; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(200, 190, 170, .10), transparent 70%);
  filter: blur(8px); animation: drift 22s linear infinite alternate;
}
@keyframes drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

.hero-inner { max-width: 820px; }
.ring-badge { position: relative; width: 168px; height: 168px; margin: 0 auto 18px; }
.ring-badge img {
  position: absolute; inset: 34px; width: 100px; height: 100px; border-radius: 14px;
  image-rendering: pixelated; box-shadow: 0 0 42px rgba(246, 220, 148, .35), 0 0 0 1px rgba(216,178,90,.5);
}
.ring-badge svg { position: absolute; inset: 0; animation: spin 60s linear infinite; }
.ring-badge text { font: 15px "Noto Sans Runic", "Segoe UI Historic", "Segoe UI Symbol", serif; fill: var(--gold); letter-spacing: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.eyebrow { font: 600 .95rem/1 var(--title); letter-spacing: .45em; color: var(--gold); text-transform: uppercase; }
h1.title {
  margin: 14px 0 10px;
  font: 600 clamp(3.4rem, 11vw, 7.2rem)/.95 var(--title); letter-spacing: .04em;
  background: linear-gradient(180deg, #fff6d4 10%, var(--gold) 55%, #8a5a12 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 24px rgba(216, 178, 90, .28));
}
.tagline { font-size: clamp(1.2rem, 2.6vw, 1.55rem); color: #dcccab; margin: 0 auto 30px; max-width: 640px; font-style: italic; }
.cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.chip {
  font: 600 .9rem/1 var(--title); letter-spacing: .08em; color: var(--gold-hi);
  padding: 7px 12px; border: 1px solid rgba(216, 178, 90, .35); border-radius: 999px; background: rgba(11, 10, 9, .45);
}

/* ---------- sections ---------- */
main { flex: 1; }
.section { padding: 84px clamp(16px, 5vw, 64px); max-width: 1180px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 44px; }
.section-head h2 { font: 600 clamp(2rem, 4.6vw, 2.9rem)/1.1 var(--title); color: var(--gold-hi); margin: 10px 0 8px; letter-spacing: .03em; }
.section-head p { color: var(--muted); margin: 0 auto; max-width: 640px; }
.divider { display: flex; align-items: center; gap: 14px; justify-content: center; color: var(--gold); }
.divider::before, .divider::after { content: ""; width: min(160px, 22vw); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.divider::after { transform: scaleX(-1); }

.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.card {
  position: relative; padding: 28px 26px 26px;
  background: linear-gradient(180deg, rgba(36, 29, 20, .9), rgba(20, 17, 13, .92));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  transition: transform .25s, border-color .25s;
}
.card:hover { transform: translateY(-3px); border-color: rgba(216, 178, 90, .45); }
.card::before, .card::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: 1px solid var(--gold); opacity: .7;
}
.card::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.card::after { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.card h3 { font: 600 1.5rem/1.15 var(--title); color: var(--gold-hi); margin: 10px 0 8px; }
.card p { margin: 0; color: #d4c5a6; }
.card .ico { width: 46px; height: 46px; color: var(--gold); }

/* ---------- parchment ---------- */
.parchment {
  color: var(--parch-ink);
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(120, 80, 30, .18), transparent 55%),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(110, 70, 25, .28) 100%),
    var(--parch);
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(122, 84, 24, .45), inset 0 0 0 6px var(--parch), inset 0 0 0 7px rgba(122, 84, 24, .35);
}
.parchment a { color: #7a4a0e; }
.parchment h2, .parchment h3 { color: #4a2f0c; }

/* downloads */
.downloads { padding: clamp(28px, 5vw, 52px); }
.dl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.dl-head h3 { font: 600 2rem/1 var(--title); margin: 0; }
.dl-ver { font-family: var(--title); letter-spacing: .08em; color: #6b4a1a; }
.dl-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dl-item {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  border: 1px solid rgba(122, 84, 24, .45); border-radius: var(--radius); background: rgba(255, 250, 235, .45);
}
.dl-item b { font: 600 1.35rem/1.1 var(--title); }
.dl-item small { color: #6b5434; }
.dl-item .btn { margin-top: 8px; }
.dl-item.unavailable { opacity: .65; }
.reqs { margin-top: 26px; display: grid; gap: 8px 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); color: #4a3519; font-size: 1.05rem; }
.reqs div::before { content: "◆ "; color: #9a6b1e; font-size: .8em; }

/* steps */
.steps { counter-reset: step; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step { position: relative; padding: 26px 24px 22px 24px; border-left: 1px solid rgba(216,178,90,.35); }
.step::before {
  counter-increment: step; content: counter(step, upper-roman);
  display: block; font: 600 2.6rem/1 var(--title); color: var(--gold); margin-bottom: 10px;
}
.step h3 { margin: 0 0 6px; font: 600 1.4rem/1.2 var(--title); color: var(--gold-hi); }
.step p { margin: 0; color: #cdbd9c; }
.after-steps { margin-top: 40px; }

/* ---------- auth pages ---------- */
.auth-wrap { position: relative; display: grid; place-items: center; padding: 60px 16px 90px; min-height: calc(100vh - 140px); isolation: isolate; overflow: hidden; }
.auth-wrap .sky, .auth-wrap .stars { position: absolute; }
.auth-card { width: 100%; max-width: 460px; padding: clamp(26px, 5vw, 42px); }
.auth-card h1 { font: 600 2.3rem/1.05 var(--title); margin: 0 0 4px; text-align: center; color: #4a2f0c; }
.auth-card h2 { font: 600 1.6rem/1.15 var(--title); margin: 0 0 12px; }
.auth-card > .btn { width: 100%; }
.auth-card .sub { text-align: center; margin: 0 0 22px; color: #6b5434; font-style: italic; }
.tabs { display: flex; margin: 0 0 22px; border-bottom: 1px solid rgba(122, 84, 24, .4); }
.tabs button {
  flex: 1; padding: 10px 6px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: 600 1.15rem/1 var(--title); letter-spacing: .06em; color: #7b6240; cursor: pointer;
}
.tabs button[aria-selected="true"] { color: #3d2608; border-bottom-color: #8a5a12; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 5px; font: 600 1.02rem/1.1 var(--title); letter-spacing: .04em; color: #4a3519; }
input {
  width: 100%; padding: 11px 13px; font: 500 1.12rem/1.2 var(--serif); color: #241808;
  background: rgba(255, 252, 242, .75); border: 1px solid rgba(122, 84, 24, .55); border-radius: 4px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: #8a5a12; box-shadow: 0 0 0 3px rgba(138, 90, 18, .2); background: #fffdf6; }
.hint { font: 500 .92rem/1.35 var(--serif); color: #7b6240; letter-spacing: 0; }
form .btn { margin-top: 6px; width: 100%; }
.alt { text-align: center; margin: 16px 0 0; font-size: 1.02rem; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: #7a4a0e; text-decoration: underline; text-decoration-color: rgba(122, 74, 14, .4); text-underline-offset: 3px; cursor: pointer; }
.msg { display: none; padding: 11px 14px; border-radius: 4px; font-size: 1.04rem; line-height: 1.4; }
.msg.show { display: block; }
.msg.err { background: rgba(180, 60, 40, .12); border: 1px solid rgba(160, 50, 30, .45); color: #7a2412; }
.msg.ok { background: rgba(90, 130, 50, .14); border: 1px solid rgba(80, 120, 40, .45); color: #2f4d14; }
.center { text-align: center; }
.seal {
  width: 74px; height: 74px; margin: 4px auto 14px; border-radius: 50%;
  display: grid; place-items: center; font: 600 2rem/1 var(--title); color: #ffe8b0;
  background: radial-gradient(circle at 35% 30%, #c0392b, #7d1d12 70%); box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 -3px 6px rgba(0,0,0,.35);
}
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 22px; }
dl.facts dt { font: 600 1rem/1.5 var(--title); color: #6b4a1a; }
dl.facts dd { margin: 0; word-break: break-all; }
.sep { height: 1px; background: rgba(122, 84, 24, .35); margin: 22px 0; border: 0; }

/* ---------- footer ---------- */
footer {
  padding: 30px clamp(16px, 5vw, 64px) 40px; text-align: center; color: #7d6d55; font-size: 1rem;
  border-top: 1px solid rgba(216, 178, 90, .12); background: #080706;
}
footer .runes { font-family: "Noto Sans Runic", "Segoe UI Historic", serif; color: var(--gold-lo); letter-spacing: .4em; margin-bottom: 8px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s, transform .8s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- staff page ---------- */
body.admin { background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(120, 140, 200, .12), transparent 70%), var(--ink); }
.admin-tabs a { padding: 4px 2px; border-bottom: 2px solid transparent; }
.admin-tabs a.active { color: var(--gold-hi); border-bottom-color: var(--gold); }
.admin-tabs .who { color: var(--muted); font-size: 1rem; margin-left: 8px; }
.admin-main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 32px) 60px; }
.admin-main > .msg { max-width: 640px; margin: 40px auto; }
.panel {
  position: relative; margin-bottom: 22px; padding: clamp(18px, 3vw, 28px);
  background: linear-gradient(180deg, rgba(29, 24, 18, .92), rgba(20, 17, 13, .92));
  border: 1px solid rgba(216, 178, 90, .2); border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.panel h2 { font: 600 1.7rem/1.1 var(--title); color: var(--gold-hi); margin: 0 0 14px; }
.panel h3 { font: 600 1.2rem/1.2 var(--title); color: var(--gold); margin: 18px 0 10px; letter-spacing: .04em; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.panel-head h2 { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: .98rem; }
.bad { color: var(--danger); }

.stat-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 22px; }
.stat { padding: 16px 18px; border-radius: var(--radius); background: rgba(29, 24, 18, .9); border: 1px solid rgba(216, 178, 90, .18); display: grid; gap: 2px; }
.stat b { font: 600 2.3rem/1 var(--title); color: var(--gold-hi); }
.stat span { color: var(--text); font-size: 1.02rem; }
.stat small { color: var(--muted); font-size: .92rem; }

.seg { display: inline-flex; border: 1px solid rgba(216, 178, 90, .35); border-radius: var(--radius); overflow: hidden; }
.seg button { font: 600 1rem/1 var(--title); letter-spacing: .04em; padding: 8px 14px; color: var(--text); background: transparent; border: 0; cursor: pointer; }
.seg button + button { border-left: 1px solid rgba(216, 178, 90, .25); }
.seg button[aria-pressed="true"] { background: rgba(216, 178, 90, .18); color: var(--gold-hi); }

.chart svg { width: 100%; height: auto; display: block; }
.chart .grid { stroke: rgba(216, 178, 90, .12); stroke-width: 1; }
.chart .axis { fill: var(--muted); font: 13px var(--serif); }
.chart .line { fill: none; stroke: var(--gold-hi); stroke-width: 2; stroke-linejoin: round; }
.chart .area { fill: rgba(216, 178, 90, .14); }

.name-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn {
  font: 500 1.02rem/1 var(--serif); padding: 7px 12px; cursor: pointer; color: var(--text);
  background: rgba(216, 178, 90, .08); border: 1px solid rgba(216, 178, 90, .3); border-radius: 999px;
}
.chip-btn:hover { background: rgba(216, 178, 90, .18); color: var(--gold-hi); }
.chip-btn.bad { color: var(--danger); border-color: rgba(226, 115, 92, .45); }

.admin input, .admin select {
  width: auto; padding: 9px 12px; font: 500 1.05rem/1.2 var(--serif); color: var(--text);
  background: rgba(11, 10, 9, .6); border: 1px solid rgba(216, 178, 90, .3); border-radius: 4px; outline: none;
}
.admin input:focus, .admin select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216, 178, 90, .15); background: rgba(11, 10, 9, .8); }
.admin select option { background: var(--ink-2); color: var(--text); }
.admin form .btn { width: auto; margin-top: 0; }
.admin label { color: var(--gold); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.toolbar input { flex: 1 1 240px; }

.table-wrap { overflow-x: auto; }
.grid-table { width: 100%; border-collapse: collapse; font-size: 1.04rem; }
.grid-table th { text-align: left; font: 600 .98rem/1.2 var(--title); letter-spacing: .05em; color: var(--gold); padding: 8px 10px; border-bottom: 1px solid rgba(216, 178, 90, .3); white-space: nowrap; }
.grid-table td { padding: 8px 10px; border-bottom: 1px solid rgba(216, 178, 90, .08); vertical-align: top; }
.grid-table tr.click { cursor: pointer; }
.grid-table tr.click:hover td { background: rgba(216, 178, 90, .06); }
.grid-table .linkbtn { color: var(--gold-hi); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 8px; box-shadow: 0 0 8px var(--ok); vertical-align: middle; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.pager span { margin-right: auto; }

.console-out {
  min-height: 220px; max-height: 420px; overflow: auto; margin: 0; padding: 14px;
  font: 14px/1.45 Consolas, "Cascadia Mono", monospace; color: #d9e6c8; white-space: pre-wrap; word-break: break-word;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(216, 178, 90, .18); border-radius: 4px;
}

.player-dlg {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; overflow: auto;
  color: var(--text); background: linear-gradient(180deg, #1f1a13, #15120e);
  border: 1px solid rgba(216, 178, 90, .4); border-radius: var(--radius); box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}
.player-dlg::backdrop { background: rgba(5, 4, 3, .7); backdrop-filter: blur(3px); }
.player-dlg > * { margin-left: 24px; margin-right: 24px; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.dlg-head h2 { font: 600 1.9rem/1.1 var(--title); color: var(--gold-hi); margin: 0; }
.dlg-close { background: none; border: 0; color: var(--muted); font-size: 2rem; line-height: 1; cursor: pointer; }
.dlg-close:hover { color: var(--gold-hi); }
.player-dlg .msg { margin-top: 12px; }
.player-dlg .msg.err { color: #ffb9a8; background: rgba(180, 60, 40, .18); }
.player-dlg .msg.ok { color: #cfe8b4; background: rgba(90, 130, 50, .2); }
.player-dlg dl.facts { margin-top: 16px; }
.player-dlg dl.facts dt { color: var(--gold); }
.player-dlg dl.facts dd { word-break: break-word; }
.actions { padding-top: 6px; border-top: 1px solid rgba(216, 178, 90, .15); margin-bottom: 14px; }
.ban-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ban-form input[name=reason] { flex: 1 1 220px; }
.check { display: inline-flex; align-items: center; gap: 6px; font: 500 1rem/1.2 var(--serif); color: var(--text); letter-spacing: 0; }
.check input { width: auto; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.role-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.btn.danger { color: #fff1ea; background: linear-gradient(180deg, #e2735c, #b4402a 55%, #7d2414); border-color: #f2a593; box-shadow: 0 0 0 1px #4a1308, 0 6px 20px rgba(180, 64, 42, .3); }
.btn.danger:hover { color: #fff; }
.hist { margin: 0 0 20px; padding-left: 20px; color: #d4c5a6; font-size: 1rem; }
.hist li { margin: 3px 0; }
.auth-card > .admin-link { margin-top: 10px; color: #6b3f08; background: rgba(255, 250, 235, .4); border-color: rgba(122, 84, 24, .55); }
#ban { margin-bottom: 18px; }
@media (max-width: 760px) {
  body.admin .topbar { flex-wrap: wrap; gap: 8px 16px; }
  .admin-tabs { margin-left: 0; width: 100%; overflow-x: auto; gap: 16px; padding-bottom: 2px; }
  .admin-tabs a { white-space: nowrap; }
  .admin-tabs .who { display: none; }
  .player-dlg > * { margin-left: 16px; margin-right: 16px; }
  .player-dlg dl.facts { grid-template-columns: 1fr; gap: 2px; }
  .player-dlg dl.facts dd { margin-bottom: 8px; }
}

/* downloads: recommended file + groups */
#dl-list.dl-list { display: block; }
.dl-hero { text-align: center; padding: 6px 0 22px; border-bottom: 1px solid rgba(122, 84, 24, .3); margin-bottom: 20px; }
.dl-hero > b { display: block; font: 600 1.9rem/1.1 var(--title); color: #3d2608; }
.dl-hero p { margin: 8px auto 16px; max-width: 560px; color: #5a4325; }
.dl-hero .btn.big { margin-bottom: 10px; }
.dl-hero .dl-meta { display: block; }
.dl-warn { font-size: .98rem; max-width: 620px; margin: 14px auto 0 !important; padding: 10px 14px; border-radius: 4px; background: rgba(160, 110, 30, .12); border: 1px solid rgba(122, 84, 24, .35); }
.dl-groups { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dl-group h4 { margin: 0 0 8px; font: 600 1.35rem/1.1 var(--title); color: #4a2f0c; }
.dl-group > small { color: #6b5434; }
.dl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px dashed rgba(122, 84, 24, .3); }
.dl-row b { display: block; font: 600 1.12rem/1.2 var(--title); }
.dl-row small { display: block; color: #6b5434; font-size: .95rem; line-height: 1.35; }
.dl-row .btn { flex: none; }
.dl-meta { color: #7b6240; font-size: .92rem; }
.linkbtn.sha { font-size: inherit; color: #7a4a0e; }
.dl-sums { text-align: center; margin: 18px 0 0; font-size: 1rem; color: #6b5434; }

/* live server console */
.console-panel .panel-head { align-items: flex-start; }
.console-filters { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.console-filters .check { color: var(--text); font-size: .98rem; }
.console-log {
  height: min(62vh, 620px); overflow: auto; padding: 12px 14px; margin-top: 8px;
  font: 13.5px/1.5 Consolas, "Cascadia Mono", "DejaVu Sans Mono", monospace; color: #cfd6c4;
  background: #07080a; border: 1px solid rgba(216, 178, 90, .2); border-radius: 4px; white-space: pre-wrap; word-break: break-word;
}
.ll .lt { color: #6f7680; }
.ll-chat { color: #f3ecd8; }
.ll-join { color: #9cc77a; }
.ll-cmd { color: #8fb8e8; }
.ll-warn { color: #f0a070; }
.ll-other { color: #9aa0a6; }
.ll-self { color: var(--gold-hi); }
.console-status { margin: 6px 0 10px; min-height: 1.2em; }
.console-input { margin-bottom: 4px; }
.console-input .prompt { font: 600 1.2rem/1 Consolas, monospace; color: var(--gold); }
.console-input input { font-family: Consolas, "Cascadia Mono", monospace; }
/* Minecraft colours */
.mc0 { color: #4a4a4a; } .mc1 { color: #4a6cff; } .mc2 { color: #3fbf3f; } .mc3 { color: #3fbfbf; }
.mc4 { color: #e04848; } .mc5 { color: #c050c0; } .mc6 { color: #ffaa00; } .mc7 { color: #aaaaaa; }
.mc8 { color: #777777; } .mc9 { color: #7b8cff; } .mca { color: #66ff66; } .mcb { color: #66ffff; }
.mcc { color: #ff6666; } .mcd { color: #ff77ff; } .mce { color: #ffff66; } .mcf { color: #ffffff; }

/* console = the in-game chat: dark translucent lines over the landscape, pixel font with drop shadow */
.console-log {
  background: #1a1612 url(/img/chat-bg.png) center 70% / cover no-repeat;
  font: 16px/1.45 "Pixelify Sans", Consolas, monospace; color: #fff;
  padding: 10px 0; white-space: normal;
}
.console-log .ll {
  width: fit-content; max-width: calc(100% - 20px); margin: 0 10px 1px; padding: 1px 8px;
  background: rgba(0, 0, 0, .55); text-shadow: 2px 2px 0 rgba(0, 0, 0, .55); white-space: pre-wrap; word-break: break-word;
}
.console-log .ll .lt { color: #9a9a9a; font-size: .8em; margin-right: 4px; }
.console-log .ll-chat { color: #ffffff; }
.console-log .ll-join { color: #ffff55; }
.console-log .ll-cmd { color: #aaaaaa; }
.console-log .ll-warn { color: #ff7c6b; }
.console-log .ll-other { color: #aaaaaa; }
.console-log .ll-self { color: #ffaa00; }
.emo { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; font-size: inherit;
  background: url(/img/emojis.png) 0 0 / calc(8 * 1.1em) auto no-repeat; margin: 0 .05em; }
.ll .emo, .chat-preview .emo { font-size: 1em; }
.mcl { font-weight: 600; } .mco { font-style: italic; } .mcn { text-decoration: underline; } .mcm { text-decoration: line-through; }
.mcbg0 { background: #000; } .mcbg1 { background: #0000aa; } .mcbg2 { background: #00aa00; } .mcbg3 { background: #00aaaa; }
.mcbg4 { background: #aa0000; } .mcbg5 { background: #aa00aa; } .mcbg6 { background: #ffaa00; } .mcbg7 { background: #aaaaaa; }
.mcbg8 { background: #555; } .mcbg9 { background: #5555ff; } .mcbga { background: #55ff55; } .mcbgb { background: #55ffff; }
.mcbgc { background: #ff5555; } .mcbgd { background: #ff55ff; } .mcbge { background: #ffff55; } .mcbgf { background: #fff; }
.console-log .mc0 { color: #000; } .console-log .mc1 { color: #0000aa; } .console-log .mc2 { color: #00aa00; } .console-log .mc3 { color: #00aaaa; }
.console-log .mc4 { color: #aa0000; } .console-log .mc5 { color: #aa00aa; } .console-log .mc6 { color: #ffaa00; } .console-log .mc7 { color: #aaaaaa; }
.console-log .mc8 { color: #555; } .console-log .mc9 { color: #5555ff; } .console-log .mca { color: #55ff55; } .console-log .mcb { color: #55ffff; }
.console-log .mcc { color: #ff5555; } .console-log .mcd { color: #ff55ff; } .console-log .mce { color: #ffff55; } .console-log .mcf { color: #fff; }
.chat-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 6px; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.sw { width: 22px; height: 22px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .35); cursor: pointer; padding: 0; }
.sw:hover { outline: 2px solid var(--gold); }
.sw-fmt { background: rgba(255, 255, 255, .08); color: var(--text); font: 600 13px/1 Consolas, monospace; }
.tool-btn { height: 28px; min-width: 34px; padding: 0 10px; border-radius: 4px; cursor: pointer; color: var(--text);
  background: rgba(216, 178, 90, .1); border: 1px solid rgba(216, 178, 90, .35); font: 600 14px/1 Consolas, monospace; }
.tool-btn:hover { background: rgba(216, 178, 90, .22); }
.emoji-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px; max-height: 210px; overflow: auto;
  padding: 8px; margin-bottom: 8px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(216, 178, 90, .25); border-radius: 4px; }
.emo-btn { height: 34px; background: none; border: 0; border-radius: 4px; cursor: pointer; font-size: 22px; line-height: 1; padding: 0; }
.emo-btn:hover { background: rgba(216, 178, 90, .2); }
.chat-preview { margin: 4px 0 8px; padding: 8px 0; background: #1a1612 url(/img/chat-bg.png) center 70% / cover no-repeat;
  font: 16px/1.45 "Pixelify Sans", Consolas, monospace; border-radius: 4px; }
.chat-preview > .lt { display: block; color: #ddd; font-size: 12px; margin: 0 10px 4px; text-shadow: 1px 1px 0 #000; }
.chat-preview .ll { width: fit-content; margin: 0 10px; padding: 1px 8px; background: rgba(0, 0, 0, .55); color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, .55); }
.chat-preview .mc0 { color: #000; } .chat-preview .mc1 { color: #0000aa; } .chat-preview .mc2 { color: #00aa00; } .chat-preview .mc3 { color: #00aaaa; }
.chat-preview .mc4 { color: #aa0000; } .chat-preview .mc5 { color: #aa00aa; } .chat-preview .mc6 { color: #ffaa00; } .chat-preview .mc7 { color: #aaaaaa; }
.chat-preview .mc8 { color: #555; } .chat-preview .mc9 { color: #5555ff; } .chat-preview .mca { color: #55ff55; } .chat-preview .mcb { color: #55ffff; }
.chat-preview .mcc { color: #ff5555; } .chat-preview .mcd { color: #ff55ff; } .chat-preview .mce { color: #ffff55; } .chat-preview .mcf { color: #fff; }
.console-log .ll .lt, .chat-preview .ll .lt { font-family: Consolas, "Cascadia Mono", monospace; font-size: .75em; }
/* skin on the account page */
.skin-box { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 8px; }
#skin-preview { width: 96px; height: 192px; image-rendering: pixelated; background: rgba(122, 84, 24, .12); border: 1px solid rgba(122, 84, 24, .35); border-radius: 4px; flex: none; }
.skin-side { display: grid; gap: 10px; justify-items: start; }
.skin-side .hint { margin: 0; }
.file-btn { cursor: pointer; }