/* style.css - how the brixborg website looks: glowing green on black,
   over the lava-lamp backdrop (backdrop.js). Change the colours here. */

/* CONTENTS (search for a title to jump to it)
     Colours, and the page itself
     The top bar
     Cards, headings and the pieces every page uses
     Home (logged in)
     The Shop
     Groups (grouppages.mjs)
     The Forum (forum.mjs)
     Who is online (friendborgs, profiles) and a game's servers
     More for games, groups and the moderators
     Your pages: messages, friendborgs, customize, inventory, trade, projects
     A game's page
     Games
     Players, profiles and the footer
     Narrow windows (phones)
     Rules, Privacy and Help
     Brixrods, Buy Brixrods and Rodborg (economy.mjs)
     The language picker, under the footer (i18n.mjs) */

/* ---- Colours, and the page itself ---- */
:root {
  --green: #3cf55a;        /* the brixborg green */
  --green-dim: #1f8c32;
  --ink: #e6ffe9;          /* writing */
  --faint: #8fb595;        /* small writing */
  --panel: rgba(4, 12, 6, 0.86);
  --edge: rgba(60, 245, 90, 0.35);
  --problem: #ff6b6b;
}
html { background: #020804; }
body { margin: 0; color: var(--ink); font: 16px/1.5 "Segoe UI", system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
#backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- The top bar ---- */
header { background: rgba(2, 8, 4, 0.88); border-bottom: 2px solid var(--green-dim); padding: 10px 18px 0; }
/* The logo fills the space between HELP and Brixrods / Logout. */
.logo { flex: 1; display: flex; justify-content: center; align-self: center; min-width: 150px; }
.logo img { height: 50px; display: block; }
/* Two buttons, one on top of the other (SHOP / ARCHIVE, and Brixrods / Logout). */
.stack { display: flex; flex-direction: column; gap: 4px; }
.stack .tab { text-align: center; }
.account { align-items: stretch; }

/* The boxed buttons (SHOP, GAMES... and Brixrods / Logout). */
.tab { display: inline-block; margin: 0; padding: 4px 12px; border: 2px solid var(--green); border-radius: 3px; background: #020a04;
  color: var(--green); font: 700 0.95em/1.3 "Segoe UI", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.tab:hover, .tab.here, .tab.fill { background: var(--green); color: #021006; text-decoration: none; }
.tab.money { text-transform: none; }
.account .tab { text-align: center; box-sizing: border-box; padding: 4px 10px; }

.mainbar { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; padding: 6px 0 10px; }
.search { flex: 1; min-width: 160px; max-width: 320px; margin: 0 8px; }
.search { position: relative; }
.search input { margin: 0; padding: 5px 10px; border: 2px solid var(--green); border-radius: 3px; }
/* The search bar's drop-down (static/search.js). */
.search-drop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px 0; list-style: none;
  min-width: 280px; background: #020a04; border: 2px solid var(--green); border-radius: 3px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); }
.search-drop[hidden] { display: none; }
.search-drop a { display: flex; align-items: center; gap: 10px; padding: 7px 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-drop li + li a { border-top: 1px solid rgba(60, 245, 90, 0.15); }
.search-drop a:hover, .search-drop a.picked { background: rgba(60, 245, 90, 0.16); text-decoration: none; }
.search-drop svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--green); stroke-width: 1.3; stroke-linejoin: round; }
.search-drop b { overflow: hidden; text-overflow: ellipsis; }
.search-drop span { color: var(--faint); }

/* The row underneath: your own pages. */
.mybar { display: flex; flex-wrap: wrap; gap: 4px 28px; padding: 8px 6px 10px; border-top: 2px solid var(--green-dim); }
.mybar a { color: var(--ink); font-size: 1.02em; }
.mybar a:hover, .mybar a.here { color: var(--green); }
.mybar a.here { text-decoration: underline; text-underline-offset: 5px; }
.mybar .me { margin-left: auto; color: var(--faint); }

.inline { display: inline; margin: 0; }

/* ---- Cards, headings and the pieces every page uses ---- */
main { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 48px 16px; }
.card { background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; padding: 28px 32px; width: 100%; max-width: 484px; box-sizing: border-box; min-width: 0; box-shadow: 0 0 40px rgba(60, 245, 90, 0.12); }
.card.wide { max-width: 824px; }
/* (A card's width includes its padding, so no card ever sticks out past the edge of the window.) */
h1 { margin: 0 0 12px; font-size: 1.7em; color: var(--green); text-shadow: 0 0 14px rgba(60, 245, 90, 0.45); }
.small { color: var(--faint); font-size: 0.88em; }
.problem { color: var(--problem); font-weight: 600; }
.saved { color: var(--green); }

label { display: block; margin: 14px 0 4px; font-weight: 600; }
input, textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--edge); background: #010402; color: var(--ink); font: inherit; }
input:focus, textarea:focus { outline: 2px solid var(--green); border-color: transparent; }
button, .button { display: inline-block; margin-top: 16px; padding: 10px 20px; border: 0; border-radius: 8px; background: var(--green); color: #021006; font: inherit; font-weight: 700; cursor: pointer; }
button:hover, .button:hover { background: #7dffb0; text-decoration: none; }
button.link { background: none; color: var(--green); padding: 0; margin: 0; font-weight: 400; }
button.link:hover { text-decoration: underline; }

/* ---- Home (logged in) ---- */
.home { display: flex; gap: 20px; align-items: flex-start; width: 100%; max-width: 1040px; }
.home-me { max-width: 274px; text-align: center; padding: 22px; }
.home-me .avatar img { width: 120px; height: 120px; }
.home-me h1 { font-size: 1.35em; margin: 10px 0 4px; }
.home-main { flex: 1; max-width: none; }
h2 { margin: 0 0 14px; font-size: 1.25em; color: var(--green); border-bottom: 2px solid var(--green-dim); padding-bottom: 6px; }
.games { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.games li { background: #010402; border: 1px solid var(--edge); border-radius: 8px; padding: 10px; }
.thumb { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: #031207; border-radius: 4px; margin-bottom: 8px; }
.thumb img { height: 60%; opacity: 0.7; }
.show-all { text-align: right; margin: 14px 0 0; }
.played { max-width: 1040px; }
#more { text-align: center; margin-top: 18px; }
.game-name { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- The Shop ---- */
.shop { display: flex; gap: 20px; align-items: flex-start; width: 100%; max-width: 1180px; }
.shop-types { max-width: 250px; padding: 20px; }
.shop-types ul { list-style: none; padding: 0; margin: 0; }
.shop-types li { display: flex; justify-content: space-between; padding: 5px 0; }
.shop-types a { color: var(--ink); }
.shop-types a.here, .shop-types a:hover { color: var(--green); }
.shop-main { flex: 1; max-width: none; }
.upload-link { margin: 16px 0 0; }
.busy { color: var(--green); font-weight: 600; }

/* ---- Groups (grouppages.mjs) ---- */
.group { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1120px; }
.group .card { max-width: none; }
/* An emblem: a square picture in a frame. Sizes: small (lists), normal (tiles), big (the group's own page). */
.emblem { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #031207; border: 2px solid var(--green-dim); border-radius: 10px; margin-bottom: 8px; }
.emblem img { width: 100%; height: 100%; object-fit: cover; }
.emblem.none img { width: 55%; height: 55%; object-fit: contain; opacity: 0.6; }
.emblem.big { width: 170px; flex: none; margin: 0; border-width: 3px; box-shadow: 0 0 26px rgba(60, 245, 90, 0.25); }
.emblem.small { width: 44px; flex: none; margin: 0; border-width: 1px; border-radius: 7px; }
/* The top of a group's page. */
.group-head { display: flex; gap: 28px; align-items: flex-start; padding: 28px; }
.group-info { flex: 1; min-width: 0; }
.group-info h1 { margin-bottom: 4px; font-size: 2em; }
.my-rank { display: inline-block; margin: 6px 0 0; padding: 2px 10px; border: 1px solid var(--edge); border-radius: 12px; font-size: 0.9em; color: var(--faint); }
.my-rank b { color: var(--green); }
.group-info .about { margin-top: 14px; padding: 12px 16px; background: rgba(0, 0, 0, 0.35); border-left: 3px solid var(--green-dim); border-radius: 4px; }
.group-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
/* Games and members on the left, diplomacies and wars down the right. */
.group-columns { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.group-main, .group-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.group-side .card { padding: 22px; }
.group-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.member-tiles { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.member-tiles .game-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.rank-chips a { padding: 3px 12px; border: 1px solid var(--edge); border-radius: 14px; color: var(--ink); font-size: 0.92em; }
.rank-chips a:hover { border-color: var(--green); text-decoration: none; }
.rank-chips a.here { background: var(--green); border-color: var(--green); color: #021006; }
.rank-chips a.here .small { color: #021006; }
/* Diplomacies and wars: small emblems with names. Wars are red. */
.side-groups { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.side-groups a { display: flex; align-items: center; gap: 12px; padding: 7px 9px; border: 1px solid rgba(60, 245, 90, 0.18); border-radius: 8px; color: var(--ink); }
.side-groups a:hover { border-color: var(--green); text-decoration: none; }
.side-groups a > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.side-groups b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wars h2 { color: var(--problem); border-bottom-color: rgba(255, 107, 107, 0.45); }
.side-groups .war a { border-color: rgba(255, 107, 107, 0.35); background: rgba(255, 60, 60, 0.06); }
.side-groups .war a:hover { border-color: var(--problem); }
.side-groups .war .emblem { border-color: rgba(255, 107, 107, 0.6); }
/* The Admin page. */
.admin-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.admin-top .emblem.small { width: 58px; }
.admin-top h1 { margin: 0; }
.admin-top p { margin: 2px 0 0; }
.admin-tabs { border-bottom: 2px solid var(--green-dim); padding-bottom: 10px; margin-bottom: 18px; }
table.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; color: var(--faint); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--edge); }
.admin-table td { padding: 7px 8px; border-bottom: 1px solid rgba(60, 245, 90, 0.12); }
.admin-table .small-select { margin: 0; }
.admin-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; }
.admin-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid rgba(60, 245, 90, 0.18); border-radius: 8px; flex-wrap: wrap; }
.side-name { flex: 1; min-width: 140px; display: flex; flex-direction: column; line-height: 1.3; }
.row-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.tab.danger, button.danger { border-color: var(--problem); color: var(--problem); }
.tab.danger:hover { background: var(--problem); color: #1a0202; }
button.link.danger { background: none; }
.rank-row, .new-rank { border: 1px solid rgba(60, 245, 90, 0.18); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.rank-fields { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.rank-fields label { flex: 1; min-width: 140px; }
.rank-fields label:nth-child(2) { flex: 0 0 110px; min-width: 0; }
.rank-fields .small { padding-bottom: 12px; }
.rights { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; }
.rank-buttons { display: flex; align-items: center; gap: 18px; }
.rank-buttons button:not(.link) { margin-top: 12px; padding: 7px 18px; }
.rank-buttons button.link { margin-top: 12px; }
.relation-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.relation-form label { flex: 1; min-width: 200px; }
.relation-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.relation-buttons button { margin-top: 0; }
button.war-button { background: #b3261e; color: #fff; }
button.war-button:hover { background: #e2453b; }
/* ---- The Forum (forum.mjs) ---- */
.forum { max-width: 1120px; width: 100%; }
.forum-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.forum-top h1 { margin-bottom: 2px; }
.forum-top p { margin: 0; }
.forum-search { flex: 0 1 420px; margin: 0; }
.crumbs { font-size: 0.9em; color: var(--faint); margin-bottom: 10px; }
.crumbs span { margin: 0 4px; }
table.forum-table { width: 100%; border-collapse: collapse; }
.forum-table th { text-align: left; color: var(--faint); font-weight: 600; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 8px 10px; border-bottom: 2px solid var(--green-dim); }
.forum-table td { padding: 10px; border-bottom: 1px solid rgba(60, 245, 90, 0.12); vertical-align: top; }
.forum-table tr:hover td { background: rgba(60, 245, 90, 0.04); }
.forum-table .num { text-align: center; width: 90px; }
.forum-table .last { width: 240px; font-size: 0.92em; }
.forum-table tr.forum-section th { background: rgba(60, 245, 90, 0.12); color: var(--green); font-size: 0.95em; padding: 7px 10px; border-bottom: 1px solid var(--edge); }
.forum-table tr.pinned td { background: rgba(60, 245, 90, 0.05); }
.tag { display: inline-block; margin-right: 6px; padding: 0 7px; border: 1px solid var(--green); border-radius: 3px; color: var(--green);
  font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; vertical-align: 2px; }
.tag.locked { border-color: var(--problem); color: var(--problem); }
.tag.mod { border-color: #ffd23c; color: #ffd23c; }
.posts { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.post { display: flex; border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, 0.3); }
.post.removed { padding: 4px 16px; border-style: dashed; }
.post-writer { flex: 0 0 160px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px; text-align: center;
  background: rgba(60, 245, 90, 0.06); border-right: 1px solid var(--edge); }
.post-writer .tag { margin: 2px 0; }
.post-avatar img { width: 96px; height: 96px; border-radius: 8px; background: #0d2a14; object-fit: cover; display: block; margin-bottom: 4px; }
.post-body { flex: 1; min-width: 0; padding: 12px 18px; display: flex; flex-direction: column; }
.post-when { margin: 0 0 8px; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(60, 245, 90, 0.12); padding-bottom: 6px; }
.post-number { color: var(--faint); }
.post-text { flex: 1; overflow-wrap: anywhere; }
.post-actions { margin: 10px 0 0; text-align: right; font-size: 0.88em; display: flex; justify-content: flex-end; gap: 14px; align-items: center; }
.mod-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 10px; border: 1px dashed #ffd23c66; border-radius: 8px; }
.forum-form textarea { font-family: inherit; }
.locked-note { padding: 10px; border: 1px dashed var(--problem); border-radius: 8px; }
/* ---- Who is online (friendborgs, profiles) and a game's servers ---- */
.presence { margin: 4px 0 0; font-size: 0.88em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--faint); }
.presence .dot { width: 9px; height: 9px; border-radius: 50%; background: #555; flex: none; }
.presence.online .dot { background: #4aa3ff; }
.presence.online { color: #8cc6ff; }
.presence.playing .dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.presence.playing { color: var(--green); }
.presence .join { font-size: 0.85em; padding: 2px 10px; }
.servers { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.servers li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--edge); border-radius: 8px; }
textarea.code { font: 13px/1.45 Consolas, "Cascadia Mono", monospace; tab-size: 4; }
/* ---- More for games, groups and the moderators ---- */
/* The Edit thumbnail page (static/thumbedit.js). */
.thumb-editor { max-width: 1180px; width: 100%; }
.thumb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
#thumb-canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 2px solid var(--green-dim); border-radius: 8px; background: #0d2a14; cursor: move; touch-action: none; }
.thumb-left { position: sticky; top: 12px; }
.thumb-captures { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.thumb-capture { margin: 0; padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; overflow: hidden; }
.thumb-capture img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.thumb-capture.here, .thumb-capture:hover { border-color: var(--green); background: none; }
.thumb-text { border: 1px solid rgba(60, 245, 90, 0.2); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.thumb-text.here { border-color: var(--green); }
.thumb-text label { font-size: 0.9em; }
.thumb-text input, .thumb-text select { margin-top: 3px; padding: 6px 8px; }
.thumb-text p.small { margin: 8px 0 4px; }
.thumb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.swatch { width: 20px; height: 20px; margin: 0; padding: 0; border: 1px solid #000; border-radius: 4px; cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
.swatch:hover { background: inherit; transform: scale(1.15); }
.swatch.here { box-shadow: 0 0 0 2px var(--green); }
.swatch.none { background: #020a04; color: var(--faint); font-size: 14px; line-height: 18px; }
#thumb-decal input[type=file] { padding: 6px; }
@media (max-width: 900px) { .thumb-layout { grid-template-columns: 1fr; } .thumb-left { position: static; } }
/* Likes and dislikes (a game's page). */
.votes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.vote { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 12px; border: 1px solid var(--edge); border-radius: 16px;
  background: #020a04; color: var(--ink); font: inherit; font-size: 0.95em; cursor: pointer; }
span.vote { cursor: default; opacity: 0.75; }
.vote svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
button.vote:hover { border-color: var(--green); background: #020a04; }
.vote.like.here { border-color: var(--green); color: var(--green); background: rgba(60, 245, 90, 0.12); }
.vote.dislike.here { border-color: var(--problem); color: var(--problem); background: rgba(255, 107, 107, 0.12); }
.vote-bar { flex: 1; min-width: 80px; max-width: 160px; height: 6px; border-radius: 3px; background: rgba(255, 107, 107, 0.55); overflow: hidden; }
.vote-bar span { display: block; height: 100%; background: var(--green); }
/* The Slop Detector (moderators only). */
.slop-detector { margin: 10px 0; padding: 10px 12px; border: 1px dashed #ffd23c66; border-radius: 8px; }
.slop-detector p { margin: 0 0 6px; }
.sloppa-sticker { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.slop-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.slop-list li { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border: 1px solid rgba(60, 245, 90, 0.18); border-radius: 8px; flex-wrap: wrap; }
.slop-list li.stickered { border-color: #ffd23c88; background: rgba(255, 210, 60, 0.05); }
.slop-picture { position: relative; flex: none; width: 128px; }
.slop-picture img { width: 128px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; display: block; background: #0d2a14; }
.slop-picture img.slop-sticker { position: absolute; right: -10px; bottom: -10px; width: 44px; height: 44px; aspect-ratio: auto; background: none; transform: rotate(-12deg); }
/* A group's wall. */
.wall-form { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.wall-form textarea { flex: 1; margin: 0; resize: vertical; }
.wall-form button { margin: 0; }
.wall { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.wall-post { display: flex; gap: 12px; padding: 10px 12px; border: 1px solid rgba(60, 245, 90, 0.18); border-radius: 8px; background: rgba(0, 0, 0, 0.25); }
.wall-avatar { flex: none; width: 52px; height: 52px; }
.wall-avatar img { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; background: #0d2a14; display: block; }
.wall-body { flex: 1; min-width: 0; }
.wall-who { margin: 0 0 4px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.wall-when { margin-left: auto; }
.wall-text { overflow-wrap: anywhere; }
.wall-post .post-actions { margin-top: 6px; font-size: 0.88em; display: flex; justify-content: flex-end; gap: 14px; align-items: center; }
/* A pop-up (being muted). */
.popup { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.6); }
.popup-box { max-width: 440px; width: 100%; box-sizing: border-box; padding: 24px 28px; background: #031007; border: 2px solid var(--problem); border-radius: 12px;
  box-shadow: 0 0 40px rgba(255, 107, 107, 0.3); text-align: center; }
.popup-box h2 { color: var(--problem); border-bottom-color: rgba(255, 107, 107, 0.4); }
/* Reports and the Mod page (moderation.mjs). */
.report-link { color: var(--faint); font-size: 0.9em; }
.report-link:hover { color: var(--problem); }
.report-line { margin: 12px 0 0; }
.report-copy { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--faint); background: rgba(0, 0, 0, 0.35); border-radius: 4px; overflow-wrap: anywhere; }
.report-form fieldset { border: 1px solid var(--edge); border-radius: 8px; padding: 10px 14px; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.report-form legend { font-weight: 600; padding: 0 6px; }
.mod-link { color: #ffd23c !important; }
.mod-page { max-width: 1120px; width: 100%; }
.report { border: 1px solid var(--edge); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.report-head { display: flex; gap: 14px; align-items: flex-start; }
.report-head p { margin: 4px 0 0; }
.report-picture { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; background: #0d2a14; flex: none; }
.flag-line { margin: 6px 0; color: #ffd23c; font-weight: 600; }
.report-notes { margin: 6px 0; padding-left: 20px; font-size: 0.92em; }
.mod-account { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 14px; }
.mod-account .avatar-thumb { width: 140px; flex: none; }
.mod-account h2 { border: 0; margin-bottom: 4px; }
.mod-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.mod-form { border: 1px solid var(--edge); border-radius: 10px; padding: 12px 16px; }
.mod-form h3 { margin-top: 0; }
.mod-uploads { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.nowrap { white-space: nowrap; }
/* Pages of a long list:  <  Page 2 of 9  >  */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; font-size: 0.9em; color: var(--faint); }
.pager a, .pager .off { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 2px solid var(--green);
  border-radius: 4px; font-size: 1.3em; line-height: 1; font-weight: 700; color: var(--green); }
.pager a:hover { background: var(--green); color: #021006; text-decoration: none; }
.pager .off { border-color: rgba(60, 245, 90, 0.2); color: rgba(60, 245, 90, 0.25); }
.emblem-edit { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.emblem-edit > div:last-child { flex: 1; min-width: 220px; }
.emblem-edit h3 { margin-top: 0; }
h3 { margin: 14px 0 6px; color: var(--ink); font-size: 1.02em; }
.ranks { list-style: none; padding: 0; margin: 0 0 8px; }
.ranks li { padding: 4px 0; }
.small-select { display: inline-block; width: auto; margin: 0 0 0 8px; padding: 2px 6px; font-size: 0.85em; }
fieldset.body-choice { border: 1px solid var(--edge); border-radius: 8px; margin: 14px 0 4px; padding: 8px 14px; display: flex; gap: 24px; }
fieldset.body-choice legend { font-weight: 600; padding: 0 6px; }
fieldset.born { border: 1px solid var(--edge); border-radius: 8px; margin: 14px 0 4px; padding: 8px 14px; display: flex; gap: 12px; flex-wrap: wrap; }
fieldset.born legend { font-weight: 600; padding: 0 6px; }
fieldset.born select { flex: 1; min-width: 120px; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
label.check input { width: auto; margin: 0; }

/* ---- Your pages: messages, friendborgs, customize, inventory, trade, projects ---- */
.count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--green); color: #021006; font-size: 0.8em; font-weight: 700; text-align: center; }
.avatar-thumb img { background: #0d2a14; object-fit: contain; }
.thumb.avatar-thumb img { object-fit: cover; }
.profile .avatar-thumb img { width: 200px; height: 200px; border-radius: 14px; }
.home-me .avatar-thumb img { width: 180px; height: 180px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 14px; }
.tabs a { color: var(--ink); }
.tabs a.here { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }
table.list { width: 100%; border-collapse: collapse; }
table.list th { text-align: left; color: var(--faint); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--edge); }
table.list td { padding: 8px; border-bottom: 1px solid rgba(60, 245, 90, 0.12); }
table.list tr.unread td { font-weight: 700; }
.message-body { padding: 14px 0; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.tile-actions { margin: 8px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tile-actions .tab { font-size: 0.8em; padding: 3px 10px; }
.profile-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.small-tiles { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

.customize { display: flex; gap: 20px; align-items: flex-start; width: 100%; max-width: 1180px; }
.avatar-card { max-width: 384px; }
.avatar-big { display: flex; justify-content: center; background: #0d2a14; border-radius: 10px; padding: 18px 0; margin-bottom: 8px; }
.avatar-big { padding: 0; overflow: hidden; }
.avatar-big img { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.customize-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.customize-right .card { max-width: none; }
.colors { list-style: none; padding: 0; margin: 0; }
.colors li { display: flex; align-items: center; gap: 10px; }
.colors label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0; font-weight: 400; flex: 1; }
.colors select { width: 170px; margin: 0; padding: 4px 8px; }
.color-form { flex: 1; display: flex; }
.swatch { width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.3); flex: none; }

.trades { list-style: none; padding: 0; margin: 0; }
.trade { border: 1px solid var(--edge); border-radius: 8px; padding: 12px 16px; margin-bottom: 12px; }
.trade p { margin: 4px 0; }
.trade-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.trade-items { list-style: none; padding: 0; margin: 0; }
.trade-items li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.trade-items img { width: 36px; height: 36px; border-radius: 4px; }
.trade-new .card, .trade-new { max-width: 1100px; }
.pick label.tile { cursor: pointer; display: block; margin: 0; font-weight: 400; position: relative; }
.pick input[type=checkbox] { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; margin: 0; z-index: 2; }
.pick li:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }

/* ---- A game's page ---- */
.thumb.picture.wide-thumb { aspect-ratio: 16 / 9; }
.game-page { display: flex; gap: 28px; align-items: flex-start; max-width: 1040px; }
.game-picture { flex: 0 0 56%; }
.game-picture img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #0d2a14; display: block; }
.game-info { flex: 1; }
button.play { font-size: 1.4em; padding: 14px 54px; letter-spacing: 0.05em; text-transform: uppercase; box-shadow: 0 0 24px rgba(60, 245, 90, 0.45); }

/* ---- Games ---- */
.games-page { max-width: 1180px; width: 100%; }
.games-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--green-dim); margin-bottom: 16px; }
.games-top h2 { border: 0; margin: 0; padding: 6px 0 10px; }
.genre-bar { position: relative; }
.genre-bar summary { list-style: none; cursor: pointer; padding: 6px 30px 6px 14px; border: 2px solid var(--green); border-radius: 3px; color: var(--green);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: #020a04; }
.genre-bar summary::-webkit-details-marker { display: none; }
.genre-bar summary::after { content: "\25BE"; position: absolute; right: 12px; }
.genre-bar[open] summary { background: var(--green); color: #021006; }
.genre-bar ul { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; list-style: none; margin: 0; padding: 6px 0; min-width: 190px;
  background: #020a04; border: 2px solid var(--green); border-radius: 3px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); }
.genre-bar li a { display: block; padding: 6px 14px; color: var(--ink); }
.genre-bar li a:hover, .genre-bar li a.here { color: #021006; background: var(--green); text-decoration: none; }
select { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--edge); background: #010402; color: var(--ink); font: inherit; }
button:disabled { opacity: 0.6; cursor: wait; }
.shop-search { display: flex; gap: 8px; margin-bottom: 18px; }
.shop-search input { margin: 0; }
.shop-search button { margin: 0; padding: 8px 18px; }
.tile { display: block; color: var(--ink); }
.tile:hover { text-decoration: none; }
.tile:hover .game-name { color: var(--green); }
.games li:has(.tile:hover) { border-color: var(--green); }
.thumb.picture { aspect-ratio: 1; background: #0d2a14; overflow: hidden; }
.thumb.picture img { height: 100%; width: 100%; object-fit: cover; opacity: 1; }
.shop-item { display: flex; gap: 28px; align-items: flex-start; }
.shop-item .big { width: 260px; flex: none; border-radius: 10px; }
/* The Archive (an item's page: a script's Lua; Next page / Previous page). */
.archive-about { flex: 1; min-width: 0; }
pre.script { max-height: 420px; overflow: auto; padding: 12px 14px; background: #010502; border: 1px solid var(--edge); border-radius: 6px;
  color: var(--ink); font: 13px/1.45 Consolas, "Cascadia Mono", monospace; white-space: pre; tab-size: 4; }
.pages { display: flex; align-items: center; gap: 14px; margin-top: 18px; }

/* ---- Players, profiles and the footer ---- */
.players { list-style: none; padding: 0; margin: 0; columns: 2; }
.players li { padding: 4px 0; break-inside: avoid; }
.profile { display: flex; gap: 24px; align-items: flex-start; }
.profile > div:last-child { flex: 1; }
.avatar img { width: 120px; height: 120px; border-radius: 16px; }
.about { white-space: normal; }
footer { text-align: center; padding: 16px; color: var(--faint); font-size: 0.85em; text-shadow: 0 0 6px #000, 0 0 3px #000; }

/* ---- Narrow windows (phones) ---- */
@media (max-width: 760px) {
  .home, .shop, .shop-item, .customize, .game-page { flex-direction: column; align-items: stretch; }
  .avatar-card { max-width: none; }
  .trade-sides { grid-template-columns: 1fr; }
  .shop-types { max-width: none; }
  .shop-types ul { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .shop-item .big { width: 100%; }
  .home-me { max-width: none; }
  .group-columns { grid-template-columns: 1fr; }
  .forum-table .last, .forum-table th:last-child { display: none; }
  .post { flex-direction: column; }
  .post-writer { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 8px; border-right: 0; border-bottom: 1px solid var(--edge); text-align: left; padding: 8px 12px; }
  .post-avatar img { width: 40px; height: 40px; margin: 0; }
  .mod-account { flex-direction: column; }
}
@media (max-width: 560px) {
  .search { order: 10; max-width: none; margin: 0; flex-basis: 100%; }
  .mybar { gap: 4px 16px; }
  .players { columns: 1; }
  .profile { flex-direction: column; }
  .card { padding: 22px 18px; }
  .group-head { flex-direction: column; align-items: center; text-align: center; }
  .group-buttons { justify-content: center; }
  .emblem.big { width: 140px; }
}

/* ---- Rules, Privacy and Help ---- */
/* The Rules and Privacy pages (rules.mjs): long reading, so a bit more room. */
.prose { max-width: 760px; }
.prose h2 { margin-top: 26px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
footer a { color: var(--faint); text-decoration: underline; }

/* The Help page */
.help-contents ul { columns: 2; column-gap: 28px; list-style: none; padding: 12px 14px 6px; margin: 10px 0 4px;
  border: 1px solid var(--edge); border-radius: 8px; }
.help .help-contents li { margin: 0 0 6px; break-inside: avoid; }
.help h2 { scroll-margin-top: 12px; }
.help ol { padding-left: 22px; }
.help ol li, .help ul li { margin: 5px 0; }
table.help-keys td:first-child { white-space: nowrap; width: 1%; padding-right: 18px; }
kbd { display: inline-block; min-width: 1.4em; padding: 0 5px; border: 1px solid var(--edge); border-bottom-width: 2px;
  border-radius: 4px; font: inherit; font-size: 0.88em; text-align: center; line-height: 1.5; }
@media (max-width: 600px) { .help-contents ul { columns: 1; } table.help-keys td:first-child { white-space: normal; } }

/* ---- Brixrods, Buy Brixrods and Rodborg (economy.mjs) ---- */
.economy { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; width: 100%; max-width: 1040px; }
.economy .card { max-width: none; }
.economy-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.wide-economy { display: flex; flex-direction: column; gap: 20px; max-width: 1000px; }
svg.brixrod { flex: none; vertical-align: -0.18em; fill: rgba(60, 245, 90, 0.18); stroke: var(--green); stroke-width: 1.6; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(60, 245, 90, 0.55)); }
svg.brixrod .shine { fill: none; stroke-linecap: round; opacity: 0.7; }
.eyebrow { margin: 0 0 4px; color: var(--faint); font-size: 0.78em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.balance-card .balance { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; font-size: 2.6em; font-weight: 700; line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.balance-card .small { margin: 2px 0 0; }
.balance-card .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.balance-card .actions .button { margin: 0; }
.balance-card .actions .tab { padding: 8px 14px; }
table.activity .num, table.activity th.num { text-align: right; }
table.activity .empty { color: var(--faint); text-align: center; padding: 26px 12px; }
.facts { margin: 0; padding-left: 18px; }
.facts li { margin: 0 0 10px; }
.notice { margin: 4px 0 18px; padding: 12px 16px; border: 1px solid var(--edge); border-left: 4px solid var(--green); border-radius: 8px;
  background: rgba(60, 245, 90, 0.07); }
.page-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.page-top h1 { margin-bottom: 2px; }
.page-top .small { margin: 0; }
button.buy { width: 100%; margin-top: 12px; }
button.buy:disabled { opacity: 0.45; cursor: not-allowed; }
button.buy:disabled:hover { background: var(--green); }
.extra { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(60, 245, 90, 0.16); color: var(--green);
  font-size: 0.78em; font-weight: 700; letter-spacing: 0.02em; }
.extra.none { visibility: hidden; }
/* Bundles */
.bundles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.bundle { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 14px 14px; background: #010402;
  border: 1px solid var(--edge); border-radius: 10px; }
.bundle:hover { border-color: var(--green); }
.bundle-amount { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 1.7em; font-weight: 700; font-variant-numeric: tabular-nums; }
.bundle .small { margin: 0; }
.bundle-price { margin: 12px 0 0; font-size: 1.15em; font-weight: 700; color: var(--green); }
.member-strip { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 0;
  padding: 14px 16px; border: 1px solid var(--edge); border-radius: 10px; background: #010402; }
.member-strip .small { display: block; }
.member-strip .tab { padding: 8px 14px; }
.fine-print { margin: 18px 0 0; padding-left: 18px; }
.fine-print li { margin: 3px 0; }
/* Rodborg */
.rodborg-hero h1 { font-size: 2.2em; margin-bottom: 6px; }
.lead { margin: 0 0 18px; max-width: 620px; font-size: 1.08em; }
.plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.plan { padding: 20px; background: #010402; border: 1px solid var(--edge); border-radius: 12px; }
.plan.featured { border: 2px solid var(--green); box-shadow: 0 0 22px rgba(60, 245, 90, 0.18); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan h3 { margin: 0; font-size: 1.1em; }
.plan-price { margin: 12px 0 2px; font-size: 2em; font-weight: 700; color: var(--ink); }
.plan-price span { margin-left: 6px; font-size: 0.45em; font-weight: 400; color: var(--faint); }
.plan .small { margin: 0; }
table.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: 11px 10px; border-bottom: 1px solid rgba(60, 245, 90, 0.12); text-align: left; }
.compare th { color: var(--faint); font-weight: 600; border-bottom: 1px solid var(--edge); }
.compare .col { width: 110px; text-align: center; }
.compare th.member { color: var(--green); }
.compare td.member { background: rgba(60, 245, 90, 0.05); }
.compare svg.tick { fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.compare .dash { color: var(--faint); }
.faq { margin: 0; }
.faq dt { font-weight: 700; margin: 14px 0 4px; }
.faq dt:first-child { margin-top: 0; }
.faq dd { margin: 0; color: var(--ink); opacity: 0.9; }
@media (max-width: 820px) {
  .economy { grid-template-columns: minmax(0, 1fr); }
  .balance-card .balance { font-size: 2.1em; }
  .compare .col { width: 80px; }
  .bundle-amount { font-size: 1.35em; }
  .bundle { padding: 12px 10px; }
}

/* ---- The language picker, under the footer (i18n.mjs) ---- */
.language-picker { display: flex; justify-content: center; margin: -6px 0 18px; }
.language-picker label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.language-picker select { width: auto; margin: 0; padding: 3px 8px; border: 1px solid var(--edge); border-radius: 6px; background: #010402;
  color: var(--ink); font: inherit; font-size: 0.88em; }
.language-picker .tab { margin-left: 8px; font-size: 0.8em; }