/* Sign-in, player dashboard and admin pages. Same colours and fonts as the front page. */
@font-face { font-family: "Bungee"; src: url("../assets/fonts/bungee.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Bangers"; src: url("../assets/fonts/bangers.woff2") format("woff2"); font-display: swap; }
:root {
  --moss: #0c1d0e; --moss-2: #16301a; --line: #2f5234; --line-2: #5d7f62; --hover: #21432a;
  --slime: #7dff5a; --slime-deep: #2c6b1f; --cheese: #ffcc33; --cheese-deep: #8a5d00;
  --paper: #eadcb6; --paper-line: #b9a877; --ink: #1d1407; --red: #c8302a; --bad: #7a1f1a; --bad-line: #b23a33;
  --text: #f2efe6; --dim: #b3bfae;
  --title: "Bungee", "Trebuchet MS", sans-serif; --comic: "Bangers", "Trebuchet MS", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--moss); }
body { margin: 0; min-height: 100vh; min-height: 100svh; color: var(--text); font: 17px/1.45 "Trebuchet MS", "Segoe UI", system-ui, sans-serif; }
img { display: block; max-width: 100%; }
a { color: var(--slime); }
a:hover { color: #b6ff9f; }
h1, h2, h3 { margin: 0; font-family: var(--title); font-weight: 400; line-height: 1.1; }
h2 { font-size: clamp(26px, 3vw, 36px); color: var(--slime); }
h3 { font-size: 19px; color: var(--cheese); }
p { margin: 0; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.small { font-size: 15px; }
.tiled { background-color: var(--moss); background-image: linear-gradient(rgba(91, 58, 42, 0.16) 2px, transparent 2px), linear-gradient(90deg, rgba(91, 58, 42, 0.16) 2px, transparent 2px); background-size: 72px 36px; }

/* buttons */
.chunky { display: inline-block; min-height: 46px; text-align: center; text-decoration: none; cursor: pointer; border: 0; border-radius: 12px; padding: 12px 20px 10px; font: 400 17px var(--title); color: #10200b; background: var(--slime); box-shadow: 0 5px 0 var(--slime-deep); }
.chunky:hover { background: #a2ff86; color: #10200b; }
.chunky:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--slime-deep); }
.chunky.cheese { background: var(--cheese); color: var(--ink); box-shadow: 0 5px 0 var(--cheese-deep); }
.chunky.cheese:hover { background: #ffdb6b; color: var(--ink); }
.chunky[disabled] { background: #3a4f3d; color: #d7e2d3; box-shadow: none; cursor: default; transform: none; }
.ghost { display: inline-block; min-height: 44px; cursor: pointer; background: transparent; color: var(--text); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 14px; font: 700 15px "Trebuchet MS", sans-serif; text-decoration: none; text-align: center; }
.ghost:hover { background: var(--hover); color: var(--text); }
.ghost.on { background: var(--slime); border-color: var(--slime); color: #10200b; }
.ghost.bad { background: var(--bad); border-color: var(--bad-line); color: #fff; }
.ghost.bad:hover { background: #94271f; color: #fff; }
.ghost[disabled] { opacity: 0.55; cursor: default; }

/* sign in */
.scene { min-height: 100vh; min-height: 100svh; display: flex; flex-wrap: wrap; gap: 36px; align-items: center; justify-content: center; padding: 32px 20px; background: linear-gradient(90deg, rgba(12, 29, 14, 0.94), rgba(12, 29, 14, 0.62)), url("../assets/landing/sewer.webp") center / cover; }
.pitch { flex: 1 1 420px; max-width: 600px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.logo { font: 400 clamp(72px, 10vw, 136px)/0.9 var(--title); color: var(--slime); text-shadow: 0 5px 0 var(--slime-deep), 0 0 34px rgba(125, 255, 90, 0.4); text-decoration: none; }
.logo:hover { color: var(--slime); }
.pitch .sub { font: 400 clamp(19px, 2.2vw, 26px)/1.2 var(--title); color: var(--cheese); }
.pitch p { max-width: 28em; font-size: 20px; }
.lineup { display: flex; gap: 4px; align-items: flex-end; }
.lineup img { width: 18%; max-width: 92px; aspect-ratio: 1; object-fit: contain; }
.poster { flex: 0 1 430px; width: 100%; min-width: 0; background: var(--paper); color: var(--ink); padding: 24px 26px 18px; border-radius: 4px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; gap: 14px; }
.poster a { color: var(--ink); }
.poster a:hover { color: #5b3a2a; }
.poster :focus-visible { outline-color: var(--red); }
.poster .chunky { display: block; width: 100%; font-size: 20px; padding: 15px 18px 13px; }
.poster .chunky:hover { color: #10200b; }
.wanted { display: flex; gap: 14px; align-items: center; }
.wanted img { width: 104px; height: 104px; object-fit: contain; flex: none; }
.wanted b { display: block; font: 400 38px/1 var(--title); color: var(--red); }
.wanted span { display: block; margin-top: 5px; font-size: 16px; line-height: 1.3; }
.plain { display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer; background: transparent; border: 2px solid var(--ink); border-radius: 14px; padding: 12px 18px; font: 700 17px "Trebuchet MS", sans-serif; color: var(--ink); }
.plain:hover { background: #dccb9e; }
.invited { padding: 10px 14px; border-radius: 10px; background: var(--cheese); font-size: 16px; line-height: 1.35; }
.step { display: flex; flex-direction: column; gap: 13px; }
.step h2 { color: var(--ink); font-size: 22px; }
.note { font-size: 15px; line-height: 1.4; }
.oops { padding: 10px 12px; border-radius: 8px; background: var(--bad); color: #fff; font-size: 15px; }
.signed { padding: 12px 14px; background: #fff8e4; border: 1px solid var(--paper-line); border-radius: 8px; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.foot { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; font-size: 14px; border-top: 1px solid var(--paper-line); padding-top: 11px; }

/* dashboard and admin shell */
.card { background: var(--moss-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.topbar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 12px 24px; background: var(--moss); border-bottom: 1px solid var(--line); }
.topbar .brand { font: 400 32px/1 var(--title); color: var(--slime); text-decoration: none; }
.topbar .fill { flex: 1 1 0; }
.topbar .bank { font-weight: 700; color: var(--cheese); }
.shell { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px; max-width: 1320px; margin: 0 auto; }
.shell > nav { flex: 1 1 200px; min-width: 0; }
.shell > main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.navlist { display: flex; flex-direction: column; gap: 4px; }
.navbtn { min-height: 44px; text-align: left; cursor: pointer; background: transparent; border: 0; border-radius: 10px; padding: 9px 14px; color: var(--text); font: 700 16px "Trebuchet MS", sans-serif; white-space: nowrap; }
.navbtn:hover { background: var(--hover); }
.navbtn.on { background: var(--cheese); color: var(--ink); }
@media (max-width: 860px) {
  .shell { padding: 16px; gap: 14px; }
  .shell > nav { flex-basis: 100%; }
  .navlist { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .topbar { padding: 10px 16px; }
}
.banner { padding: 10px 16px; border-radius: 10px; background: var(--cheese); color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.flag { padding: 10px 14px; border-radius: 10px; background: var(--bad); color: #fff; }
.split { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.split > * { flex: 1 1 300px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.tile b { display: block; font-size: 26px; line-height: 1.2; overflow-wrap: anywhere; }
.mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mini b { display: block; font-size: 24px; line-height: 1.2; }
.wanted-card { background: var(--paper); color: var(--ink); border-radius: 4px; padding: 20px 22px; display: flex; gap: 14px; align-items: center; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45); min-width: 0; }
.wanted-card img { width: 128px; height: 128px; object-fit: contain; flex: none; }
.wanted-card .w { font: 400 30px/1 var(--title); color: var(--red); }
.wanted-card .q { font: 400 24px/1.05 var(--comic); margin: 8px 0 10px; }
@media (max-width: 420px) { .wanted-card img { width: 88px; height: 88px; } }
.bar { height: 12px; border-radius: 6px; background: var(--moss); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--slime); }
.route { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stop { border-radius: 10px; overflow: hidden; background: var(--moss); border: 2px solid var(--line); }
.stop img { width: 100%; height: 104px; object-fit: cover; }
.stop div { padding: 8px 10px; }
.stop b { display: block; line-height: 1.2; }
.stop span { font-size: 14px; color: var(--dim); }
.stop.done { border-color: var(--slime); }
.stop.now { border-color: var(--cheese); }
.stop.ahead img { filter: grayscale(1) brightness(0.45); }
.line { display: flex; justify-content: space-between; gap: 12px; }
.line b { white-space: nowrap; color: var(--cheese); }
.chip { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--cheese); color: var(--ink); font-size: 13px; font-weight: 700; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 700; background: var(--line); color: var(--text); }
.tag.warn { background: var(--cheese); color: var(--ink); }
.scrollx { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--dim); font-weight: 700; }
.n { text-align: right; }
.crew { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.rat { display: flex; flex-direction: column; gap: 8px; }
.rat.on { border: 2px solid var(--cheese); }
.rat img { width: 100%; height: 130px; object-fit: contain; }
.rat p { flex: 1 1 auto; font-size: 15px; }
.shop { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.shop .top { display: flex; gap: 12px; align-items: center; }
.shop .top img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.pips { display: flex; gap: 5px; }
.pip { width: 18px; height: 8px; border-radius: 3px; background: var(--moss); border: 1px solid var(--line-2); }
.pip.on { background: var(--cheese); border-color: var(--cheese); }
.badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.badge { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--moss); }
.badge em { display: block; font-style: normal; font-size: 14px; font-weight: 700; color: var(--cheese); }
.rankrow { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; }
.rankrow > b:first-child { width: 34px; flex: none; }
.rankrow .who { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rankrow.me { background: var(--cheese); color: var(--ink); font-weight: 700; }
.rankrow.me .chip { background: var(--ink); color: var(--cheese); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.linkbox { flex: 1 1 260px; min-width: 0; padding: 11px 14px; border-radius: 10px; background: var(--moss); font: 16px "Trebuchet MS", sans-serif; overflow-wrap: anywhere; }
.rowwrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
ol.how { margin: 0; padding-left: 22px; }
label { font-weight: 700; }
input, textarea { width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--moss); color: var(--text); font: 16px "Trebuchet MS", sans-serif; }
.field { max-width: 620px; }
.msg { min-height: 1.4em; font-size: 15px; font-weight: 700; color: var(--cheese); }
.msg.error { color: #ff9c94; }
.avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.avatars .ghost { padding: 4px; }
.avatars img { width: 52px; height: 52px; object-fit: contain; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.center { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 24px; }