/* The Guts&Bolts web app, dressed like a website from around 2011:
   a dark blue top bar, a glossy tab row, a gray sub-row, and a white page
   in the middle of a gray background, with boxes that have title bars. */
:root {
  --blue: #1d6fd8; --blue-dark: #0b4ea8; --link: #0055b3;
  --green: #16a34a; --green-dark: #0f7a36; --red: #c81e1e;
  --panel: #ffffff; --panel2: #f2f4f7; --text: #222; --muted: #666; --line: #c9ced6;
  --bg: #d9dde3; --stripe: #f4f6f9; --gold: #b07800;
  --head1: #f7f9fc; --head2: #d9e2ee; --headText: #17407a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --panel: #1b212b; --panel2: #232b37; --text: #e8ecf2; --muted: #9aa5b5; --line: #334052;
    --bg: #0e131b; --stripe: #1e2530; --link: #6fb0ff; --gold: #f0b429;
    --head1: #2a3444; --head2: #1f2835; --headText: #b9d6ff;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--gb-font); font-size: 12px; color: var(--text); line-height: 1.45;
  background: var(--bg); min-height: 100vh;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 970px; margin: 0 auto; padding: 0 10px; display: flex; align-items: center; gap: 12px; }

/* Top bar: logo, search, your account */
.topbar { background: linear-gradient(#2466c2, #0d3b82); border-bottom: 1px solid #072656; }
.topbar .wrap { min-height: 52px; flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; }
.logo { display: block; line-height: 0; text-decoration: none !important; }
.logo img { display: block; height: 46px; width: auto; }   /* the logo picture (img/logo.png) */
.topsearch { display: flex; gap: 4px; margin-left: 10px; }
.topsearch input[type=search] { width: 190px; padding: 3px 6px; border-radius: 2px; border: 1px solid #06214a; font-size: 12px; }
.me { margin-left: auto; color: #fff; font-size: 12px; text-align: right; line-height: 1.6; }
.me a { color: #fff; font-weight: bold; }
.me .price { color: #ffd65a; }
.status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #e8f2ff; font-size: 11px; white-space: nowrap; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #999; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.status.on i { background: #3ee07a; } .status.off i { background: #f44; }

/* The tab row and the gray sub-row */
.nav { background: linear-gradient(#6cb1f7 0%, #3c8ae4 50%, #2a78d4 51%, #1f69c2 100%); border-top: 1px solid #9ccbff;
  border-bottom: 1px solid #154f99; }
.nav .wrap { gap: 0; flex-wrap: wrap; }
.nav a { color: #fff; padding: 8px 15px; font-size: 13px; font-weight: bold; text-shadow: 0 1px 1px rgba(0,0,0,.45);
  border-right: 1px solid rgba(0,0,0,.18); box-shadow: 1px 0 0 rgba(255,255,255,.2); }
.nav a:first-child { border-left: 1px solid rgba(0,0,0,.18); }
.nav a:hover { background: rgba(255,255,255,.18); text-decoration: none; }
.nav a.on { background: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.05)); }
.subnav { background: linear-gradient(#f4f5f7, #d8dce2); border-bottom: 1px solid #aab1bb; }
.subnav .wrap { gap: 0; flex-wrap: wrap; }
.subnav a { color: #333; padding: 5px 12px; font-size: 11px; font-weight: bold; }
.subnav a + a { border-left: 1px solid #b7bdc6; }
.subnav a.on { color: var(--blue-dark); text-decoration: underline; }
.nav a[hidden], .subnav a[hidden] { display: none; }

/* The white page in the middle */
.page { max-width: 970px; margin: 12px auto 0; }
.content {
  background: var(--panel); border: 1px solid #b4bac3; box-shadow: 0 1px 4px rgba(0,0,0,.15);
  min-height: 60vh; padding: 14px 16px 22px;
}
.foot { max-width: 970px; margin: 0 auto; text-align: center; color: #555; font-size: 11px; padding: 12px 10px 30px; }
.foot .links { padding: 8px 0; border-bottom: 1px solid #b9bfc8; margin-bottom: 8px; }
.foot a { color: #333; font-weight: bold; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .foot, :root:not([data-theme="light"]) .foot a { color: #aab4c3; }
  :root:not([data-theme="light"]) .content { border-color: #2c3645; } }

/* Bits and pieces */
h1 { font-size: 20px; margin: 0 0 10px; font-family: var(--gb-font); letter-spacing: -.3px; }
/* Section titles look like the title bar of an old-school box. */
h2 { font-size: 13px; margin: 18px 0 10px; padding: 5px 9px; color: var(--headText);
  background: linear-gradient(var(--head1), var(--head2)); border: 1px solid var(--line); border-radius: 3px 3px 0 0; }
h2 .btn { margin-top: -2px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px; margin: 10px 0; }
.box.info { background: #e1f0ff; border-color: #7fb6ee; color: #12325c; }
.box.gold { background: #fff6d6; border-color: #e3c25a; color: #4d3a00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .box.info { background: #13294a; color: #cfe3ff; }
  :root:not([data-theme="light"]) .box.gold { background: #3a2f0a; color: #ffe7a0; } }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
/* Long words (code in the update log, links in posts) wrap instead of pushing the page sideways on phones. */
.content { overflow-wrap: break-word; }
/* Shiny buttons: a lighter top half, like everything was in 2011. */
.btn { display: inline-block; border: 1px solid #8f969f; border-radius: 3px; padding: 5px 12px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: bold; color: #333; text-decoration: none !important;
  background: linear-gradient(#ffffff 0%, #f1f2f4 50%, #e1e4e8 51%, #d3d7dc 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.btn:hover { filter: brightness(1.06); }
.btn:active { filter: brightness(.94); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.blue { color: #fff; border-color: #0d4a96; text-shadow: 0 -1px 0 rgba(0,0,0,.35);
  background: linear-gradient(#6fb3f7 0%, #3d8ce6 50%, #1f6fd0 51%, #1a5fb4 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.btn.green { color: #fff; border-color: #0d6a2e; text-shadow: 0 -1px 0 rgba(0,0,0,.35);
  background: linear-gradient(#6fe08f 0%, #33bd5d 50%, #1ea447 51%, #178c3b 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.btn.red { color: #fff; border-color: #861616; text-shadow: 0 -1px 0 rgba(0,0,0,.35);
  background: linear-gradient(#f08a8a 0%, #e04848 50%, #c92a2a 51%, #aa1f1f 100%); }
.btn.big { padding: 9px 26px; font-size: 16px; }
.btn.small { padding: 2px 8px; font-size: 11px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.learn-intro { margin-bottom: 14px; }
.learn-filters { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; }
.learn-filters label { min-width: 180px; }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.learn-card { display: flex; flex-direction: column; gap: 5px; }
.learn-card button { align-self: flex-start; margin-top: auto; }
.learn-card p { margin: 3px 0; }
input[type=text], input[type=password], input[type=number], input[type=search], textarea, select {
  font: inherit; color: var(--text); background: var(--panel); border: 1px solid #a3a9b2; border-radius: 2px;
  padding: 5px 7px; width: 100%; max-width: 420px; box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
textarea { min-height: 70px; resize: vertical; }
label { display: block; margin: 10px 0 4px; font-weight: bold; font-size: 12px; }
.form { max-width: 440px; }
.error { color: var(--red); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .error { color: #ff7d7d; } }   /* dark red was unreadable on dark boxes */
.ok { color: var(--green); }

/* Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.card { display: block; color: inherit; text-decoration: none !important; }
.card .pic { position: relative; aspect-ratio: 16 / 9; border: 1px solid #9aa1ab; border-radius: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,.5); padding: 6px; }
.card.square .pic { aspect-ratio: 1; background: #fff; }
.card:hover .pic { outline: 2px solid #f5b800; }
.card .name { color: var(--link); margin-top: 4px; font-weight: bold; overflow-wrap: anywhere; }
.card:hover .name { text-decoration: underline; }
.card .by { color: var(--muted); font-size: 12px; }
.price { color: var(--gold); font-weight: bold; }
.bolt { display: inline-block; width: 1em; height: 1em; vertical-align: -2px; margin-right: 3px; }
svg.check { display: inline-block; width: 1em; height: 1em; vertical-align: -2px; margin-left: 3px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #aaa; margin-right: 5px; }
.dot.on { background: #22b35e; }
.list > div { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.list > div:last-child { border-bottom: 0; }
.thumb { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 3px; object-fit: contain;
  background: repeating-conic-gradient(#d6d9de 0 25%, #eef0f2 0 50%) 0 0 / 16px 16px; flex: none; }
.hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
@media (max-width: 720px) { .hero { grid-template-columns: 1fr; } }
.hero .pic { aspect-ratio: 16 / 9; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,.5); padding: 10px; text-align: center; }
.wall > div { padding: 8px 0; border-bottom: 1px solid var(--line); }
.banner-color { height: 10px; border-radius: 4px 4px 0 0; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100% - 32px);
  background: #1d2430; color: #fff; padding: 10px 16px; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.3); z-index: 9; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 8; }
.modal > div { background: var(--panel); border: 1px solid #7d8591; border-radius: 3px; padding: 18px 20px; max-width: 480px; width: 100%; }

@media (max-width: 640px) {
  body { font-size: 13px; }
  .avatar-edit > .box { margin-right: 0 !important; flex: 1 1 100%; }
  .avatar-edit > .grow { flex-basis: 100%; }
  .page { margin-top: 0; }
  .content { border-left: 0; border-right: 0; padding: 12px 12px 20px; }
  .topsearch { order: 3; margin: 0; flex: 1 1 100%; }
  .topsearch input[type=search] { width: auto; flex: 1; }
  .logo img { height: 38px; }
  .nav a { padding: 7px 10px; font-size: 12px; }
  .status { display: none; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #e23b3b; color: #fff;
  font-size: 11px; line-height: 18px; text-align: center; margin-left: 3px; }
.nav a[hidden] { display: none; }

/* Profiles (like a classic Roblox profile) */
.profile-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.profile-head h1 { margin: 0; }
.presence { font-size: 13px; color: var(--muted); }
.presence.on { color: var(--green); font-weight: bold; }
.profile { display: grid; grid-template-columns: 290px 1fr; gap: 14px; align-items: start; }
@media (max-width: 720px) { .profile { grid-template-columns: 1fr; } }
.profile .box { margin: 0 0 12px; }
.boxhead { margin: -10px -12px 10px; padding: 5px 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 3px 3px 0 0;
  font-size: 13px; background: linear-gradient(var(--head1), var(--head2)); color: var(--headText); }
.boxhead a { font-weight: normal; font-size: 11px; }
/* Links and grey notes in a title bar take the bar's own text colour, so they stay readable on every theme's bar. */
.boxhead a, .boxhead .muted, h2 > .muted { color: var(--headText); }
.boxhead a { text-decoration: underline; }
.boxhead .muted, h2 > .muted { opacity: .8; }
.avatar-box { text-align: center; background: linear-gradient(#f4f8fd, #dfe8f3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avatar-box { background: linear-gradient(#2a3342, #1e2530); } }
.avatar-box canvas, .avatar-box svg { display: block; margin: 0 auto; }
.wearing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wearing .pic { aspect-ratio: 1; }
.stats { width: 100%; border-collapse: collapse; font-size: 13px; }
.stats td { padding: 4px 2px; border-bottom: 1px solid var(--line); }
.stats td:first-child { color: var(--muted); }
.badge-pill { display: inline-block; padding: 3px 9px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); font-size: 12px; }
.friends-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.friend { display: block; text-align: center; color: inherit; overflow-wrap: anywhere; }
.friend-pic { height: 78px; display: flex; align-items: center; justify-content: center; }
.friend-pic img, .friend-pic svg { max-height: 78px; width: auto; }

/* Home page: you on the left, the best games on the right */
.home { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: start; }
.home .box { margin: 0 0 12px; }
.home-left .avatar-box p { margin: 6px 0 0; }
.welcome { display: flex; gap: 18px; align-items: center; padding: 14px 18px; margin-bottom: 12px; border: 1px solid #9cc3ec;
  background: linear-gradient(#eaf4ff, #cfe4fb); color: #12325c; }
.welcome h1 { font-size: 24px; }
.welcome > div:first-child { flex: 1; }
.welcome-guy { flex: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .welcome { background: linear-gradient(#1b2d47, #13233a); color: #cfe3ff; border-color: #2c4a70; } }
@media (max-width: 720px) {
  .home { grid-template-columns: 1fr; }
  .welcome { flex-direction: column-reverse; text-align: center; }
}

/* Popups, like the old site's: white box, big bold title, round close button */
.modal > div.popup { position: relative; border: 1px solid #7d8591; border-radius: 0; padding: 22px 26px 18px; text-align: center;
  box-shadow: 0 6px 30px rgba(0,0,0,.45); max-width: 440px; }
.modal > div.popup.wide { max-width: 560px; }
.popup-x { position: absolute; right: -14px; top: -14px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  background: #3b3b40; color: #fff; border: 3px solid #fff; font: bold 20px/1 var(--gb-font); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.popup-x:hover { background: #56565c; }
.popup-title { font-family: var(--gb-font); font-weight: bold; font-size: 24px; margin: 4px 0 16px; }
.popup-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.charpick { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; margin: 6px 0 18px; }
.charpick-one { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text); text-decoration: none !important;
  font-size: 16px; font-family: var(--gb-font); }
.charpick-pic { width: 164px; height: 164px; border: 4px solid #1a8a1a; background: #fff; display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
.charpick-pic img, .charpick-pic svg { max-height: 150px; width: auto; }
.charpick-one:hover .charpick-pic { border-color: #2fb52f; box-shadow: 0 0 0 3px rgba(47,181,47,.25); }
.charpick-account { color: #1a8a2a; font-weight: bold; font-size: 16px; font-family: var(--gb-font); }
.launch-spin { width: 36px; height: 36px; margin: 0 auto 10px; border-radius: 50%; border: 4px solid #cfd6e0; border-top-color: var(--blue);
  animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .charpick { gap: 16px; } .charpick-pic { width: 130px; height: 130px; } .popup-x { right: -6px; top: -6px; } }

/* Game icons and the Configure page */
.game-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; border: 1px solid #9aa1ab;
  border-radius: 8px; object-fit: cover; color: #fff; font-weight: bold; font-size: 18px; text-shadow: 0 1px 2px rgba(0,0,0,.5);
  vertical-align: middle; background: #fff; }
.game-title { display: flex; align-items: center; gap: 10px; }
.configure { max-width: 760px; }
.configure .box { margin: 0 0 12px; }
.configure input[type=text], .configure textarea { max-width: none; }
.choice { display: block; font-weight: normal; margin: 6px 0; cursor: pointer; }
.pics { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
@media (max-width: 640px) { .pics { grid-template-columns: 1fr; } }
.thumb-prev .pic, .thumb-prev img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid #9aa1ab; display: flex;
  align-items: center; justify-content: center; color: #fff; font-weight: bold; }
.icon-prev img, .icon-prev .game-icon { width: 128px; height: 128px; object-fit: cover; border-radius: 16px; font-size: 44px; }
.pics input[type=file] { margin-top: 8px; }

/* Account Settings */
.settings { max-width: 640px; }
.settings .box { margin: 0 0 12px; }
.settings input[type=email] { max-width: 420px; }
input[type=email] { font: inherit; color: var(--text); background: var(--panel); border: 1px solid #a3a9b2; border-radius: 2px;
  padding: 5px 7px; width: 100%; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.playing { color: var(--green); }

/* Game page: Roblox-style server cards */
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.server-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.server-card.shared { outline: 2px solid var(--blue); }
.server-faces { display: grid; grid-template-columns: repeat(3, 52px); gap: 6px; min-height: 52px; }
.server-faces .face { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #c8cfd9;
  display: flex; align-items: center; justify-content: center; }
.server-faces .face.more { background: #8b93a3; color: #fff; font-weight: bold; font-size: 14px; }
.server-count { margin: 8px 0 4px; font-size: 13px; }
.server-buttons { display: flex; gap: 6px; margin: 6px 0 4px; }
.server-buttons .btn { flex: 1; }
.pager { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 12px; }

/* Game badges (made by game creators) */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.game-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 11px; color: var(--text); }
.game-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 76px; }

/* Games: genre chips, likes */
.genre-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2);
  color: var(--text); font-size: 11px; text-decoration: none !important; }
.chip:hover { border-color: var(--blue); }
.chip.on { background: var(--blue); border-color: var(--blue-dark); color: #fff; }
.liked { color: var(--green); font-weight: bold; }
.votes { display: flex; align-items: center; gap: 8px; margin: 8px 0; max-width: 360px; }
.vote-bar { flex: 1; height: 6px; background: var(--red); border-radius: 3px; overflow: hidden; }
.vote-bar > div { height: 100%; background: var(--green); }
.game-stats td { padding: 2px 10px 2px 0; }
.game-stats td:nth-child(odd) { color: var(--muted); }
.genre-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2px 10px; margin-bottom: 8px; }

/* Limiteds, resale and trades */
.card.square { position: relative; }
.card.square .pic, .pic-wrap { position: relative; }
.official-badge { position: absolute; right: 6px; bottom: 6px; line-height: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.limited-tag { position: absolute; left: 6px; top: 6px; background: #1a7f37; color: #fff; font-weight: bold; font-size: 10px;
  padding: 2px 6px; border-radius: 3px; letter-spacing: 1px; }
.limited-line { font-size: 13px; }
.resellers th { text-align: left; color: var(--muted); font-weight: normal; padding-right: 14px; }
.resellers td { padding: 4px 14px 4px 0; }
.btn.gold { background: linear-gradient(#f5c542, #d49a0a); color: #3b2a00; border-color: #a77800; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .trade-cols { grid-template-columns: 1fr; } }
.trade-pick { display: flex; flex-direction: column; gap: 4px; }
.past-names { margin: -6px 0 10px; }

/* Create > Library */
.lib-thumb { width: 100%; height: 100%; object-fit: cover; }
.item-thumb { width: 100%; height: 100%; object-fit: contain; }
.lib-card a.pic, .lib-card a.name { display: block; color: inherit; text-decoration: none; }
.lib-card a.name:hover { text-decoration: underline; }
.lib-kind { flex-direction: column; gap: 4px; }
.asset-cols { grid-template-columns: 330px 1fr 210px; }
.asset-idbox .asset-id { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 12px; margin: 4px 0 8px; text-align: center; }
.audio-big svg { width: 96px; height: 96px; }
#assetAudio audio { width: 100%; max-width: 360px; }
.lib-kind { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--muted); font-weight: bold; }

/* Catalog items in 3D */
.item3d { width: 100%; height: 100%; object-fit: contain; }

/* Updates page: one box per update, the newest on top */
.update { position: relative; }
.update-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.update-head h2 { margin: 0; padding: 0; font-size: 18px; color: var(--headText); background: none; border: 0; box-shadow: none; }
.update-tag { color: #fff; font-size: 11px; font-weight: bold; padding: 2px 9px; border-radius: 10px; text-transform: uppercase; letter-spacing: .5px; }
.update-summary { font-size: 13px; margin: 6px 0; }
.update-items { margin: 6px 0 2px; padding-left: 20px; }
.update-items li { margin: 3px 0; }
.update.fresh { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(29, 111, 216, .25); animation: slidein .5s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-left: 4px;
  vertical-align: middle; animation: livepulse 2s infinite; }
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.latest-update b { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .update.fresh, .live-dot { animation: none; } }

/* Moderation: the ban page and warnings */
.ban-box { max-width: 620px; margin: 30px auto; text-align: center; border-top: 6px solid var(--red); }
.ban-box h1 { color: var(--red); }
.ban-table { margin: 14px auto; border-collapse: collapse; text-align: left; }
.ban-table th { padding: 6px 14px 6px 0; color: #555; font-weight: normal; vertical-align: top; white-space: nowrap; }
.ban-table td { padding: 6px 0; }
/* Ban appeals (on the ban page) and deleting your account (Settings) */
.appeal-box { text-align: left; margin: 18px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.appeal-box h2 { font-size: 17px; margin: 8px 0; }
.appeal-box textarea { width: 100%; box-sizing: border-box; }
.appeal-answer { background: var(--stripe); border-left: 4px solid var(--red); padding: 8px 12px; margin-bottom: 12px; }
.danger-box { border-top: 4px solid var(--red); }
.modal > div.popup.warning { border-top: 6px solid var(--red); }

/* Sign-up: the 18+ notice, and the Terms page */
.mature-note { background: #fff3cd; border: 1px solid #e0b84c; color: #4a3800; padding: 8px 10px; margin: 10px 0 6px; font-size: 12px; border-radius: 3px; }
label.check { display: flex; gap: 6px; align-items: flex-start; font-weight: normal; font-size: 12px; margin: 6px 0; }
label.check input { width: auto; margin-top: 2px; }
.terms { max-width: 760px; line-height: 1.5; }
.terms h2 { font-size: 16px; margin-top: 18px; }
.user-number { margin-left: 8px; }
@media (prefers-color-scheme: dark) { .mature-note { background: #3a3010; color: #ffe8a8; border-color: #8a6d1e; } }
.secret-key code { font-size: 16px; letter-spacing: 1px; background: #f2f4f7; padding: 4px 8px; border-radius: 3px; }
@media (prefers-color-scheme: dark) { .secret-key code { background: #20242c; } }
.playing-now { margin-left: 8px; }
.friend .link { color: var(--link, #0055cc); text-decoration: underline; }
.friend:hover .link { color: var(--link-hover, #0033aa); }
.people-grid { gap: 10px; }
.item-render { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.item-render.no-picture { color: #5f6773; font-size: 12px; background: linear-gradient(135deg, #f2f3f6, #e3e6ec); border-radius: 6px; }
.item-render img.item3d, .item-render img.item-thumb { max-width: 100%; max-height: 100%; }

/* High-impact classic auction banners on the homepage. */
.auction-home-section{margin:0 0 14px}.auction-home-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;padding:8px 11px;color:#fff;background:linear-gradient(100deg,#a80e18,#e52b32 62%,#8f1019);border:1px solid #780c14;box-shadow:0 2px 0 #6e1118}.auction-home-section-head h2{margin:0;font-size:14px;letter-spacing:1.5px}.auction-home-section-head a{color:#fff;font-size:10px;font-weight:bold;white-space:nowrap}
.auction-home-banner{display:grid;grid-template-columns:112px minmax(0,1fr) 170px;gap:15px;align-items:center;position:relative;overflow:hidden;min-height:166px;padding:17px;color:#fff;text-decoration:none!important;border:1px solid #6f1018;border-radius:4px;background:radial-gradient(ellipse at 75% 5%,rgba(255,92,52,.58),transparent 45%),linear-gradient(115deg,#1d2433 0%,#4b1521 52%,#b71824 100%);box-shadow:inset 0 1px rgba(255,255,255,.16),0 3px 8px rgba(0,0,0,.2)}.auction-home-banner:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;background:repeating-linear-gradient(135deg,transparent 0 15px,#fff 16px 17px,transparent 18px 34px)}.auction-home-banner:hover{filter:brightness(1.12)}
.auction-home-ribbon{position:absolute;z-index:1;top:0;left:0;display:flex;align-items:center;gap:8px;background:#ffcf32;color:#221a08;padding:5px 12px;font-size:11px;font-weight:bold;letter-spacing:1.1px;box-shadow:2px 2px 0 rgba(0,0,0,.22)}.auction-home-ribbon span{font-size:14px}.auction-home-ribbon b{padding-left:8px;border-left:1px solid rgba(34,26,8,.35);font-size:9px}
.auction-home-picture,.auction-home-copy,.auction-home-clock{position:relative;z-index:1}.auction-home-picture{display:flex;align-items:center;justify-content:center;width:104px;height:104px;margin-top:12px;padding:5px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);border-radius:4px;box-shadow:0 5px 14px rgba(0,0,0,.24)}.auction-home-picture .pic{width:100%;height:100%;background:rgba(0,0,0,.2)}.auction-home-picture .item-render,.auction-home-picture img{width:100%;height:100%;object-fit:contain}
.auction-home-copy{min-width:0;padding-top:15px}.auction-home-kicker{color:#ffd65a;font-size:9px;font-weight:bold;letter-spacing:2px}.auction-home-copy h2{margin:4px 0 5px;color:#fff;font-size:22px;line-height:1.2;overflow-wrap:anywhere;text-shadow:0 2px 2px rgba(0,0,0,.35)}.auction-home-copy p{margin:0 0 9px;color:#f2dfe2;font-size:11px}.auction-home-bid{display:flex;align-items:center;flex-wrap:wrap;gap:9px}.auction-home-bid>span,.auction-home-clock>span{color:#ffdb8b;font-size:9px;font-weight:bold;letter-spacing:1px}.auction-home-bid strong{font-size:15px}.auction-home-bid .price{color:#ffe17b}
.auction-home-clock{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:8px;padding:13px 0 4px 12px;border-left:1px solid rgba(255,255,255,.23);text-align:right}.auction-home-clock strong{font-size:19px;line-height:1.2;white-space:nowrap;color:#fff;font-variant-numeric:tabular-nums}.auction-home-cta{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;color:#231804;background:linear-gradient(#ffe36a,#ffbf1e);border:1px solid #fff0a6;border-radius:3px;font-size:11px;letter-spacing:.7px;box-shadow:0 2px 0 #8b4d09}.auction-home-cta span{font-size:16px}
.auction-home-banner.urgent{animation:auction-pulse 1.8s ease-in-out infinite}.auction-home-banner.urgent .auction-home-clock strong{color:#ffe15c}.auction-home-more{display:flex;flex-direction:column;margin-top:6px;border:1px solid var(--line);background:var(--panel)}.auction-home-more>span{padding:6px 9px;color:var(--muted);background:var(--panel2);font-size:9px;font-weight:bold;letter-spacing:1px}.auction-home-more>a{display:grid;grid-template-columns:90px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px 9px;border-top:1px solid var(--line)}.auction-mini-tag{display:inline-block;padding:3px 5px;width:max-content;color:#fff;background:#c51f2a;font-size:9px;font-weight:bold;letter-spacing:.8px}.auction-home-more>a>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auction-home-more>a>span:last-child{color:#a81d27;font-weight:bold;font-variant-numeric:tabular-nums;white-space:nowrap}
@keyframes auction-pulse{0%,100%{box-shadow:inset 0 1px rgba(255,255,255,.16),0 3px 8px rgba(0,0,0,.2)}50%{box-shadow:inset 0 1px rgba(255,255,255,.16),0 0 0 3px rgba(255,196,45,.65),0 4px 16px rgba(0,0,0,.3)}}@media(prefers-reduced-motion:reduce){.auction-home-banner.urgent{animation:none}}
@media(max-width:620px){.auction-home-banner{grid-template-columns:78px minmax(0,1fr);gap:10px;padding:13px}.auction-home-picture{width:76px;height:76px}.auction-home-copy h2{font-size:17px}.auction-home-copy p{display:none}.auction-home-clock{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;padding:10px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.23);text-align:left}.auction-home-clock strong{font-size:17px}.auction-home-clock>span{margin-right:auto}.auction-home-more>a{grid-template-columns:75px minmax(0,1fr)}.auction-home-more>a>span:last-child{grid-column:2}}@media(max-width:390px){.auction-home-ribbon{gap:5px;padding:5px 8px}.auction-home-ribbon b{display:none}.auction-home-clock strong{font-size:14px}}

/* Timed items (they go off sale at a set time, like Gutstober items) */
.timed-tag { position: absolute; left: 6px; top: 6px; background: #d9620b; color: #fff; font-weight: bold; font-size: 10px;
  padding: 2px 6px; border-radius: 3px; letter-spacing: 1px; }
.timed-line { font-size: 13px; color: #b4500a; }

/* Gutstober: the Halloween theme for October (Settings > Site theme turns it off).
   Pumpkins and bats are drawn with plain CSS shapes. */
html.gutstober {
  --bg: #1c1226; --panel: #fffaf3; --panel2: #fbefe0; --stripe: #fdf3e6; --line: #d8b998;
  --head1: #ffb347; --head2: #f07f13; --headText: #2a0f3a; --link: #6b2fb3; --blue: #7b3fc4; --blue-dark: #4b1d86;
}
@media (prefers-color-scheme: dark) {
  html.gutstober:not([data-theme="light"]) {
    --bg: #120a19; --panel: #21162b; --panel2: #2b1d37; --stripe: #281b33; --line: #4a3358; --text: #f1e8f6;
    --head1: #e0751a; --head2: #a84a07; --headText: #fff3e6; --link: #ffb054;
  }
}
html.gutstober body {
  background: var(--bg) radial-gradient(ellipse at 50% -10%, rgba(255,140,30,.18), transparent 60%) fixed;
}
html.gutstober .topbar { background: linear-gradient(#3a1752, #1a0828); border-bottom-color: #0b0312; }
html.gutstober .nav { background: linear-gradient(#ffad4d 0%, #f58a1f 50%, #e8740c 51%, #c95e05 100%);
  border-top-color: #ffd29a; border-bottom-color: #7a3500; }
html.gutstober .subnav { background: linear-gradient(#4b2a63, #2f1842); border-bottom-color: #160a20; }
html.gutstober .subnav a { color: #f6d9ff; }
html.gutstober .subnav a + a { border-left-color: #6a4785; }
html.gutstober .subnav a.on { color: #ffb054; }
html.gutstober .btn.blue { background: linear-gradient(#9a5ee0, #6a2fb0); border-color: #4b1d86; }
html.gutstober .foot, html.gutstober .foot a { color: #cbb5dc; }
html.gutstober .status { color: #2a0f3a; }   /* light text was unreadable on the orange tab row */

.gutstober-banner { background: linear-gradient(90deg, #2a0f3a, #4a1c5e 50%, #2a0f3a); color: #ffe2bd; font-size: 12px;
  border-bottom: 2px solid #f07f13; overflow: hidden; }
.gutstober-banner .wrap { min-height: 34px; position: relative; }
.gutstober-banner b { color: #ff9a2e; font-size: 14px; font-family: var(--gb-font); letter-spacing: 1px; }
.gutstober-banner a { color: #ffb054; text-decoration: underline; }
/* a pumpkin: an orange squashed ball with ridges, a stem and a glowing face */
.gt-pumpkin { position: relative; flex: none; width: 26px; height: 21px; border-radius: 48% 48% 44% 44%;
  background: radial-gradient(ellipse at 50% 40%, #ffa53a, #e36a05 70%, #b04d00);
  box-shadow: inset 6px 0 0 -4px rgba(120,45,0,.45), inset -6px 0 0 -4px rgba(120,45,0,.45); }
.gt-pumpkin::before { content: ""; position: absolute; left: 11px; top: -6px; width: 4px; height: 7px; border-radius: 2px;
  background: #4f7a1e; transform: rotate(12deg); }
.gt-pumpkin::after { content: ""; position: absolute; left: 6px; top: 6px; width: 14px; height: 9px;
  background:
    linear-gradient(135deg, transparent 45%, #ffe066 46%) 0 0 / 5px 4px no-repeat,
    linear-gradient(-135deg, transparent 45%, #ffe066 46%) 9px 0 / 5px 4px no-repeat,
    radial-gradient(ellipse at 50% 0, transparent 55%, #ffe066 56%, #ffe066 75%, transparent 76%) 0 4px / 14px 6px no-repeat; }
/* bats flapping along */
.gt-bats { margin-left: auto; display: flex; gap: 14px; }
.gt-bats i { display: block; width: 18px; height: 8px; position: relative; animation: gt-flap .5s ease-in-out infinite alternate; }
.gt-bats i:nth-child(2) { animation-delay: .15s; margin-top: -6px; }
.gt-bats i:nth-child(3) { animation-delay: .3s; }
.gt-bats i::before, .gt-bats i::after { content: ""; position: absolute; top: 0; width: 9px; height: 7px; background: #0d0614;
  border-radius: 0 100% 0 60%; }
.gt-bats i::before { left: 0; transform: scaleX(-1); }
.gt-bats i::after { right: 0; }
@keyframes gt-flap { from { transform: scaleY(1) translateY(0); } to { transform: scaleY(.4) translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .gt-bats i { animation: none; } }
@media (max-width: 600px) { .gutstober-banner span:not(.gt-pumpkin):not(.gt-bats) { display: none; } }

/* Item pictures while they're being drawn */
.item-render.loading::after { content: ""; width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid rgba(120,130,145,.25); border-top-color: rgba(120,130,145,.8); animation: gb-spin .8s linear infinite; }
@keyframes gb-spin { to { transform: rotate(360deg); } }

/* The item page, laid out like the 2016 catalog: picture, details, and a buy box */
.item-page { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 14px 16px 18px; }
.item-title { font-size: 30px; font-weight: bold; margin: 0; letter-spacing: -.5px; }
.item-sub { font-weight: bold; color: var(--text); font-size: 13px; margin: 2px 0 12px; }
.item-cols { display: grid; grid-template-columns: 330px 1fr 190px; gap: 18px; align-items: start; }
.item-pic { position: relative; width: 330px; height: 330px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.item-pic .pic { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.item-pic .pic canvas { display: block; }
/* the red "NEW" ribbon across the top right corner */
.item-ribbon { position: absolute; top: 26px; right: -44px; width: 170px; transform: rotate(45deg); text-align: center;
  background: linear-gradient(#d6261c, #a3150d); color: #fff; font: bold 17px var(--gb-font); letter-spacing: 2px;
  padding: 5px 0; box-shadow: 0 2px 3px rgba(0,0,0,.35); pointer-events: none; }
/* a little alarm clock (timed item), drawn with CSS */
.item-clock { position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; border-radius: 6px; background: #d6261c;
  display: flex; align-items: center; justify-content: center; }
.item-clock i { width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; position: relative; }
.item-clock i::before { content: ""; position: absolute; left: 6px; top: 2px; width: 2px; height: 6px; background: #fff; }
.item-clock i::after { content: ""; position: absolute; left: 6px; top: 6px; width: 5px; height: 2px; background: #fff; }
/* the green LIMITED tag with its yellow U, bottom left */
.item-limited { position: absolute; left: 0; bottom: 8px; display: flex; align-items: stretch; font: bold 17px var(--gb-font);
  color: #fff; letter-spacing: 1px; pointer-events: none; }
.item-limited { background: linear-gradient(#26a540, #137a28); padding: 3px 4px 3px 10px; border: 1px solid #0d5a1c; }
.item-limited b { background: #f5d000; color: #222; margin: -3px -4px -3px 8px; padding: 3px 14px 3px 10px;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
/* the 3D/2D switch: it must take clicks and taps (it used to have pointer-events: none, so it did nothing) */
.item-3d { position: absolute; right: 8px; bottom: 8px; z-index: 2; font-size: 12px; min-width: 32px; min-height: 26px; border: 1px solid #999;
  background: #f4f4f4; color: #333; padding: 2px 7px; border-radius: 3px; cursor: pointer; touch-action: manipulation; }
.item-3d:hover { background: #fff; border-color: #666; }
.item-3d:disabled { cursor: wait; opacity: .7; }
/* on a phone the picture box is narrower than the 3D preview, so shrink it to fit instead of cutting it off */
.item-pic .pic canvas { max-width: 100%; height: auto !important; touch-action: none; }
.item-creator { display: flex; gap: 10px; align-items: center; }
.item-creator-pic { width: 48px; height: 60px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--panel2); border-radius: 3px; }
.item-creator-pic img { max-width: 100%; max-height: 100%; }
.item-creator td { padding: 1px 6px 1px 0; font-size: 12px; }
.item-creator td:first-child { color: var(--muted); }
.item-desc { white-space: pre-wrap; font-size: 14px; margin: 14px 0; }
.item-info hr { border: 0; border-top: 1px solid var(--line); }
.item-buybox { border: 1px solid #999; background: linear-gradient(#f2f2f2, #e2e2e2); padding: 10px; text-align: center; color: #222; }
.item-left { color: #c8100c; font-weight: bold; font-size: 14px; margin-bottom: 4px; }
.item-offsale { font-size: 13px; margin-bottom: 4px; color: #444; }
.item-offsale b { color: #c8100c; font-size: 15px; }
.item-offsale [data-countdown] { white-space: nowrap; }
.auction-start { display: flex; flex-wrap: wrap; gap: 10px; }
.auction-start input { width: 110px; }
.promo-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.promo-form input[name=code] { width: 200px; }
.promo-form input[name=bolts] { width: 110px; }
.promo-form input[type=datetime-local] { width: 210px; max-width: 100%; }
.auction-bid { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.auction-bid input { width: 100%; box-sizing: border-box; }
.stats tr.me-row td { background: #fff6cc; font-weight: bold; }
.item-price { font-size: 13px; margin: 2px 0 6px; color: #333; }
.item-price .price { color: #0a7d2c; font-weight: bold; }
.item-buybox .btn.buy { width: 100%; font-size: 18px; padding: 8px 6px; }
.item-sold { color: #555; font-size: 12px; margin-top: 6px; }
.item-fav { width: 100%; margin-top: 8px; }
.item-fav.on { color: #c62828; border-color: #c62828; }
@media (max-width: 820px) {
  .item-cols { grid-template-columns: 1fr; }
  .item-pic { width: 100%; max-width: 330px; margin: 0 auto; }
}
.item-creator td { white-space: nowrap; }

/* The bell (notifications) */
.me .bell { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin-right: 8px; color: inherit; }
.me .bell .unread { position: absolute; top: -6px; right: -9px; min-width: 15px; padding: 0 3px; border-radius: 8px; background: #d6261c;
  color: #fff; font-size: 10px; line-height: 15px; text-align: center; }
.notes > div { display: flex; align-items: center; gap: 10px; }
.notes > div > a { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.notes .note-icon { font-size: 18px; width: 24px; text-align: center; }
.notes > div.unread { background: rgba(29,111,216,.07); font-weight: bold; }

/* Messages (the inbox) */
.subnav a .unread, .tabs .unread { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: #d6261c; color: #fff;
  font-size: 10px; line-height: 16px; text-align: center; margin-left: 3px; }
.messages { border: 1px solid var(--line); border-radius: 3px; background: var(--panel); }
.message { border-bottom: 1px solid var(--line); }
.message:last-child { border-bottom: 0; }
.message summary { display: flex; gap: 12px; align-items: baseline; padding: 8px 10px; cursor: pointer; list-style: none; }
.message summary::-webkit-details-marker { display: none; }
.message summary:hover { background: var(--stripe); }
.message.unread summary { font-weight: bold; background: rgba(29,111,216,.07); }
.message.unread summary::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none; align-self: center; }
.message-who { width: 160px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-when { flex: none; }
.message-body { white-space: pre-wrap; padding: 4px 12px 0 12px; font-size: 13px; overflow-wrap: anywhere; }
.message-tools { padding: 0 12px 6px; }
@media (max-width: 600px) { .message summary { flex-wrap: wrap; } .message-who { width: auto; } .message-subject { flex-basis: 100%; } }

/* Favourite star on a game's page */
.btn.fav.on { color: #b07800; border-color: #e3c25a; background: linear-gradient(#fff6d6, #f5e3a3); }

/* Saved outfits */
.outfit .pic { display: flex; align-items: center; justify-content: center; }
.outfit-buttons { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; padding: 4px 0; }

/* Classic profile bits: About me, status, player badges; and My Feed on the home page */
.about .blurb { white-space: pre-wrap; overflow-wrap: anywhere; }
.status-line { background: var(--panel2); border-left: 3px solid var(--blue); padding: 6px 8px; margin: 0 0 8px; }
.edit-about summary { list-style: none; display: inline-block; }
.edit-about summary::-webkit-details-marker { display: none; }
.player-badge.locked svg { filter: grayscale(1); opacity: .35; }
.player-badge.locked span { color: var(--muted); }
.feed-list { max-height: 360px; overflow-y: auto; }
.feed-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.feed-item:last-child { border-bottom: 0; }
.feed-pic { flex: none; width: 40px; height: 50px; display: flex; align-items: center; justify-content: center; }

/* The old catalog look (Catalog and Library): search on top, categories on the left, tiles on the right. */
.btop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.btop h1 { margin: 0; font-size: 30px; font-weight: normal; }
.bsearch { display: flex; gap: 4px; flex: 0 1 470px; min-width: 0; }
.bsearch input[type=search] { flex: 1; min-width: 0; }
.bsearch select { width: auto; max-width: 150px; }
.browse { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: start; }
.bside { min-width: 0; }
.bcats { border: 1px solid #8a9099; background: var(--panel2); }
.bcats-head { background: linear-gradient(#5a5f66, #3b3f45); color: #fff; font-weight: bold; font-size: 15px; line-height: 1.05; padding: 5px 7px 4px; }
.bcats-head small { display: block; font-size: 10px; }
.bcats hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.bcat { position: relative; }
.bcat > a, .bkids a { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; color: var(--text); font-size: 12px; }
.bcat > a:hover, .bkids a:hover { background: var(--panel); text-decoration: none; }
.bcat a.on { background: var(--line); font-weight: bold; }
.bcat .arrow { font-size: 9px; color: var(--muted); }
.bkids { display: none; }
.bcat.open .bkids { display: block; }
.bcat.open .bkids a { padding-left: 18px; }
/* Pointing at a group (on a computer) shows what's in it off to the side, like the old one. */
@media (hover: hover) {
  .bcat:not(.open):hover .bkids { display: block; position: absolute; left: 100%; top: -1px; z-index: 5; min-width: 130px;
    background: var(--panel2); border: 1px solid #8a9099; box-shadow: 2px 2px 6px rgba(0,0,0,.2); }
}
.bfilters-head { font-size: 26px; font-weight: normal; margin: 16px 0 6px; }
.bfilter { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.bfilter b { display: block; font-size: 13px; margin-bottom: 4px; }
.filt { display: flex; align-items: center; gap: 6px; color: var(--text); padding: 2px 0; }
.filt .dot { width: 11px; height: 11px; border: 1px solid #7d8591; background: var(--panel); border-radius: 2px; flex: none; }
.filt.on { font-weight: bold; }
.filt.on .dot { background: var(--blue); box-shadow: inset 0 0 0 2px var(--panel); }
.bcreator { margin-top: 4px; gap: 4px; }
.bcreator input { flex: 1; min-width: 0; }
.bmain { min-width: 0; border-left: 1px solid var(--line); padding-left: 18px; }
.bhead { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bcaps { text-transform: uppercase; font-size: 13px; }
.bhead select { width: auto; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 14px; }
.bcard .pic { border-color: #d3d7dc; }
.bcard .name { display: block; font-weight: normal; margin-top: 5px; line-height: 1.3; }
.bprice .price, .bprice .bolt { color: var(--green); }
.bprice .free { color: var(--text); font-weight: bold; }
/* The little info box when you point at a tile. */
.btip { display: none; position: absolute; left: -6px; right: -6px; top: calc(100% - 2px); z-index: 6; padding: 5px 7px; font-size: 11px;
  color: var(--muted); background: var(--panel); border: 1px solid #c3c8cf; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.btip a { font-size: 11px; }
/* Thumbs up / down on Library models */
.brating { font-size: 11px; margin-top: 1px; }
.rating { white-space: nowrap; }
.model-rating { margin: 6px 0 4px; }
.model-rating .votes { margin: 4px 0; }
.model-rating .btn[disabled] { opacity: .55; cursor: default; }
.vote-bar.none { background: var(--line); }
.vote-bar.none > div { background: transparent; }
/* Buy as a gift */
.item-buybox .btn.gift { width: 100%; margin-top: 6px; padding: 6px; font-size: 14px; }
.gift-form select, .gift-form input[type=text] { width: 100%; }
.gift-check td { padding: 3px 14px 3px 0; text-align: left; }
.gift-check td:first-child { color: var(--muted); }
@media (hover: hover) { .bcard:hover .btip { display: block; } }
.bpager { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 18px 0 4px; }
@media (max-width: 640px) {
  .browse { grid-template-columns: 1fr; }
  .bmain { border-left: 0; padding-left: 0; }
  .bsearch { flex: 1 1 100%; }
  .bfilters-head { font-size: 20px; }
  .bgrid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* Game passes (a game's page and its Configure page). */
.pass-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.pass-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); }
.pass-pic { width: 100%; aspect-ratio: 1; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pass-mini { display: inline-flex; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; overflow: hidden; flex: none; }
.pass-mini img, .pass-pic img { width: 100%; height: 100%; object-fit: cover; }

/* Reports (the Report link, and the Staff page's list) */
.report-link { color: var(--muted); }
.report-link:hover { color: var(--red); }
.reports { display: flex; flex-direction: column; }
.report { padding: 8px 0; border-top: 1px solid var(--line); }
.report:first-child { border-top: 0; }
.report p { margin: 4px 0; }
.report-note { font-style: italic; white-space: pre-wrap; }
.ticket-reply { white-space: pre-wrap; margin-left: 12px !important; padding-left: 8px; border-left: 3px solid var(--line); }
.review-preview { width: 120px; min-height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.review-preview img { max-width: 120px; max-height: 120px; border-radius: 4px; background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.review-preview audio { width: 120px; }
.report-copy { background: var(--stripe); border: 1px solid var(--line); padding: 6px 8px; white-space: pre-wrap; margin: 4px 0; }

/* Creator stats (Create > Stats): number tiles, then a card per game or item with little bar charts. */
.stats-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 10px 0; }
.stats-tiles .stat { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px; display: flex; flex-direction: column; }
.stats-tiles .stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.statcard { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px; margin: 0 0 10px; }
.statcard .charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 8px; }
.statcard .charts > div { min-width: 0; }
.bars { display: block; width: 100%; height: 40px; background: var(--panel2); border-radius: 2px; margin-top: 3px; }
.bars rect { fill: var(--blue); }
.bars rect:hover { fill: var(--green); }

/* Comments under a game */
.comment-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.comment-form textarea { flex: 1 1 100%; min-width: 0; }
.comments { display: flex; flex-direction: column; gap: 8px; }
.comment { display: flex; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; }
.comment .face { flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--panel2); display: flex; align-items: center;
  justify-content: center; font-weight: bold; color: var(--headText); }
.comment .grow { min-width: 0; }
.comment p { margin: 0 0 3px; }
.comment-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Staff action log */
.stafflog > div { display: flex; align-items: baseline; gap: 8px; }
.stafflog .grow { min-width: 0; overflow-wrap: anywhere; }

/* Lyreto server cards (games and groups) */
.lyreto-card { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; padding: 12px; border-radius: 8px;
  background: #1e1f22; color: #e6e8ec; border: 1px solid #34363c; }
.lyreto-card .grow { min-width: 0; overflow-wrap: anywhere; }
.lyreto-card p { margin: 3px 0 0; color: #b5bac1; font-size: 12px; }
.lyreto-kicker { font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: .06em; color: #9aa3ff; }
.lyreto-pic { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; object-fit: cover; background: #2b2d31; }
.lyreto-mark { display: flex; align-items: center; justify-content: center; font: bold 26px/1 var(--gb-font); color: #fff;
  background: linear-gradient(135deg, #6b74ff, #b45cff); }
.btn.lyreto-join { flex: 0 0 auto; background: #5865f2; border-color: #4752c4; color: #fff; }
@media (max-width: 560px) { .lyreto-card { flex-wrap: wrap; } .btn.lyreto-join { width: 100%; text-align: center; } }

/* A game's paid private servers */
.private-box p { margin: 4px 0 8px; }
/* Group pages: ranks, games and Bolts */
form.row.inline { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px; margin: 0; width: auto; }
form.row.inline select { padding: 2px 4px; width: auto; }
form[data-form="groupPayout"] select { width: auto; max-width: 200px; }
.ranks .rank-edit { border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; max-width: 640px; }
.perm-picks { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0; }
.group-game { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.big-bolts { font-size: 22px; font-weight: bold; margin: 0; }
table.ledger { border-collapse: collapse; width: 100%; max-width: 640px; margin-top: 8px; }
table.ledger td { padding: 3px 8px; border-top: 1px solid #eee; }
table.ledger td.pos { color: #16803c; font-weight: bold; }
table.ledger td.neg { color: #b42318; font-weight: bold; }
/* The forum: boards and threads in tables, posts with the author on the left (like the old forum). */
.table-wrap { overflow-x: auto; }
table.forum { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); }
table.forum th { text-align: left; font-size: 12px; padding: 6px 8px; background: var(--panel2); border-bottom: 1px solid var(--line); }
table.forum td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.forum .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.forum tr.pinned td { background: var(--panel2); }
.pager { display: flex; gap: 8px; align-items: center; }
.forum-posts { display: flex; flex-direction: column; gap: 8px; }
.forum-post { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 10px; }
.forum-author { flex: 0 0 120px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; overflow-wrap: anywhere; }
.forum-author .face { width: 44px; height: 44px; border-radius: 50%; background: var(--panel2); display: flex; align-items: center;
  justify-content: center; font-weight: bold; font-size: 18px; text-decoration: none; }
.forum-post .grow { min-width: 0; flex: 1; }
.forum-post p { margin: 0 0 4px; }
.forum-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 6px; }
@media (max-width: 560px) { .forum-post { flex-direction: column; } .forum-author { flex-direction: row; flex-basis: auto; } }
/* Featured games (picked by staff) */
.partner-pill { background: linear-gradient(#5fd3c4, #14827a); border-color: #0d5f59; color: #fff; font-weight: bold; }
.featured-pill { background: linear-gradient(#ffe59a, #f5c542); border-color: #d49a0a; color: #3b2a00; }

/* Inventory on profiles: item cards with the numbers of the Limited copies someone holds */
.inv-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inv-item .serials { color: #1a7f37; font-weight: bold; overflow-wrap: anywhere; }

/* Past trades: one card per finished trade, with each side's items and how it ended */
.btn.disabled { opacity: .55; pointer-events: none; }
.past-trades { display: flex; flex-direction: column; gap: 10px; }
.past-trade { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px; }
.past-trade-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.past-trade-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.past-trade-sides .chip { margin: 3px 3px 0 0; }
.past-trade p { margin: 6px 0 0; }
@media (max-width: 560px) { .past-trade-sides { grid-template-columns: 1fr; } }
.outcome { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 12px; font-weight: bold; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); }
.outcome-accepted { background: #dff3e6; border-color: #7cc596; color: #0f5c2a; }
.outcome-declined, .outcome-failed { background: #fbe3e3; border-color: #e09a9a; color: #8a1616; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .outcome-accepted { background: #12351f; border-color: #2c7a48; color: #9fe0b5; }
  :root:not([data-theme="light"]) .outcome-declined, :root:not([data-theme="light"]) .outcome-failed { background: #3a1616; border-color: #8a3030; color: #f3b0b0; }
}

/* A game's pictures: the thumbnail and its screenshots, with arrows, a strip and a big view */
.gallery { min-width: 0; }
.gallery-stage { position: relative; }
.gallery-main { display: block; width: 100%; padding: 0; border: 0; background: #11161e; border-radius: 4px; overflow: hidden; cursor: zoom-in; }
.gallery-main img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5); background: rgba(10,14,20,.6); color: #fff; font-size: 28px; line-height: 34px;
  cursor: pointer; padding: 0; }
.gallery-arrow:hover, .gallery-arrow:focus-visible { background: rgba(10,14,20,.85); }
.gallery-arrow.prev { left: 8px; }
.gallery-arrow.next { right: 8px; }
.gallery-count { position: absolute; right: 8px; bottom: 8px; background: rgba(10,14,20,.65); color: #fff; font-size: 12px;
  padding: 2px 8px; border-radius: 10px; pointer-events: none; }
.gallery-strip { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; padding-bottom: 2px; }
.gallery-thumb { flex: 0 0 auto; width: 84px; padding: 0; border: 2px solid transparent; border-radius: 3px; background: #11161e;
  cursor: pointer; opacity: .75; }
.gallery-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1px; }
.gallery-thumb.on { border-color: var(--blue); opacity: 1; }
.gallery-thumb:hover { opacity: 1; }
.lightbox { background: rgba(0,0,0,.92); padding: 48px 56px; }
.lightbox img { width: 100%; height: 100%; object-fit: contain; }
.lightbox .gallery-arrow { position: fixed; }
.lightbox .gallery-count { position: fixed; right: auto; left: 50%; transform: translateX(-50%); bottom: 14px; }
.lightbox-x { position: fixed; top: 10px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  background: rgba(10,14,20,.6); color: #fff; font-size: 26px; line-height: 34px; padding: 0; cursor: pointer; }
@media (max-width: 640px) {
  .lightbox { padding: 52px 8px; }
  .lightbox .gallery-arrow { top: auto; bottom: 8px; transform: none; }
  .gallery-thumb { width: 68px; }
}
/* Screenshots on the Configure page */
.shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; }
.shot-edit { border: 1px solid var(--line); border-radius: 3px; padding: 6px; background: var(--panel2); min-width: 0; }
.shot-edit img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #11161e; border-radius: 2px; }
.shot-buttons { display: flex; gap: 4px; align-items: center; margin-top: 6px; }
.shot-buttons .red { margin-left: auto; }

/* A game's version history (Configure page) */
.versions { width: 100%; border-collapse: collapse; font-size: 13px; }
.versions th { text-align: left; color: var(--muted); font-weight: normal; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.versions td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.versions td:last-child { text-align: right; white-space: nowrap; }
.versions td:nth-child(4) { white-space: nowrap; }
.tag-live { display: inline-block; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: bold; color: #fff; background: var(--green); }
@media (max-width: 560px) { .versions th:nth-child(3), .versions td:nth-child(3) { display: none; } }
/* The language list (website/lang/i18n.js): in the footer and on Settings. */
select.lang-pick { width: auto; max-width: 100%; }
.foot select.lang-pick { margin-top: 6px; font-size: 12px; }


/* Forum styles use the site's theme tokens so dark mode and Gutstober stay consistent. */
.forum-retro-masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0; padding: 16px 18px;
  border: 1px solid var(--line); border-top: 3px solid var(--blue);
  background: var(--panel); color: var(--text);
}
.forum-retro-masthead h1 { margin: 3px 0 6px; color: var(--text); font-size: 25px; letter-spacing: -.35px; }
.forum-retro-masthead p { margin: 0; color: var(--muted); }
.forum-retro-kicker { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.forum-retro-stamp { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line); color: var(--link); background: var(--panel2); font-size: 10px; font-weight: 700; line-height: 1.5; text-align: center; }
.forum-intro { margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--line); border-top: 0; background: var(--panel2); color: var(--muted); font-size: 12px; }
.forum-retro-breadcrumb { margin: 0; padding: 8px 11px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); font-size: 11px; }
.forum-retro-board-head, .forum-retro-thread-head { border-top-width: 2px; }
.forum-retro-board-head .btn { flex: 0 0 auto; }
table.forum { color: var(--text); font-size: 13px; }
table.forum th { background: var(--panel2); color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 12px; }
table.forum td { padding: 9px 10px; }
table.forum tr:hover td { background: var(--stripe); }
table.forum tr.pinned td { background: var(--panel2); }
table.forum a { color: var(--link); }
.forum-list-avatar { display: inline-flex; width: 44px; height: 56px; margin-right: 8px; vertical-align: middle; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; background: var(--panel2); }
.forum-list-avatar svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.forum-list-thread { display: inline-block; vertical-align: middle; max-width: calc(100% - 60px); overflow-wrap: anywhere; }
.forum-author { flex: 0 0 130px; gap: 7px; padding: 8px 5px; }
.forum-player-avatar { display: flex; width: 84px; height: 104px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; background: var(--panel2); }
.forum-player-avatar svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.forum-player-number { color: var(--muted); font-family: monospace; font-size: 9px; }
.forum-post { gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 2px; background: var(--panel); }
.forum-posts { gap: 8px; }
.forum-post:nth-child(even) { background: var(--panel); }
.forum-post .grow { padding: 0 13px 10px; }
.forum-post .grow > .small:first-child { margin: 0 -13px 12px; padding: 8px 13px; border-bottom: 1px solid var(--line); background: var(--panel2); color: var(--muted); }
.forum-text { color: var(--text); font-size: 13px; line-height: 1.6; }
.forum-pager { padding: 8px 10px; border: 1px solid var(--line); background: var(--panel2); }
.forum-shell .form input, .forum-shell .form textarea { border-radius: 2px; border-color: var(--line); background: var(--panel); color: var(--text); }
@media (max-width: 560px) {
  .forum-retro-masthead { padding: 13px 11px; }
  .forum-retro-masthead h1 { font-size: 22px; }
  .forum-retro-stamp { display: none; }
  .forum-author { flex-basis: auto; }
  .forum-player-avatar { width: 56px; height: 70px; }
  .forum-list-avatar { width: 32px; height: 42px; margin-right: 6px; }
}


/* Item-page try-on preview */
.item-try-on { display: block; width: calc(100% - 20px); margin: 10px auto 0; }
.try-on-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(7, 12, 22, .78); }
.try-on-dialog { position: relative; width: min(100%, 520px); max-height: calc(100dvh - 32px); overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); box-shadow: 0 18px 60px rgba(0,0,0,.4); text-align: center; }
.try-on-dialog h2 { margin: 0 34px 6px; }
.try-on-close { position: absolute; right: 12px; top: 8px; border: 0; background: transparent; color: var(--text); font-size: 28px; cursor: pointer; }
.try-on-render { min-height: 300px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.try-on-render canvas { max-width: 100%; height: auto !important; touch-action: none !important; }
.try-on-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 480px) { .try-on-dialog { padding: 12px; } .try-on-render { min-height: 250px; } }

/* Bolts wallet and Boltworks Club teaser */
.bolts-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:24px;align-items:center;padding:28px;border:1px solid #b8c7da;border-radius:8px;background:linear-gradient(125deg,#f8fbff 0%,#e7effb 55%,#d3e4fb 100%);box-shadow:0 3px 12px #17365d18;margin:12px 0 18px;overflow:hidden}
.bolts-hero-copy{max-width:520px}.bolts-eyebrow,.boltworks-kicker{font-size:10px;font-weight:800;letter-spacing:1.6px;color:#4a6384}.bolts-hero h2{font-size:26px;line-height:1.15;margin:8px 0;color:#183b68}.bolts-hero-copy p{font-size:13px;max-width:430px;color:#50627a}
.bolts-balance{background:#fff;border:1px solid #c6d4e6;border-radius:7px;padding:18px;box-shadow:0 4px 12px #1b36551a;display:flex;flex-direction:column;gap:8px}.bolts-balance>span:first-child{font-size:10px;font-weight:bold;letter-spacing:1.2px;color:#66768c}.bolts-balance strong{font-size:28px}.bolts-balance .price{font-size:28px}
.bolts-earn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 24px}.bolts-earn-card{padding:14px;border:1px solid var(--line);border-radius:5px;background:var(--panel)}.bolts-earn-card strong{display:block;margin:5px 0}.bolts-earn-card p{margin:0;color:var(--muted);font-size:11px}.bolts-earn-icon{font-size:20px}
.boltworks-teaser{position:relative;overflow:hidden;margin:26px 0 30px;border:1px solid #6e5121;border-radius:9px;color:#f9f1de;background:radial-gradient(ellipse at 90% 10%,#62471b 0%,transparent 38%),linear-gradient(130deg,#171b24 0%,#252a33 58%,#12151c 100%);box-shadow:0 8px 24px #0002}
.boltworks-topline,.boltworks-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid #ffffff18;font-size:9px;letter-spacing:1.4px;font-weight:bold;color:#c5b58e}.boltworks-stamp{padding:5px 8px;border:1px solid #d6aa48;border-radius:3px;color:#ffd56e;background:#4d3819}.boltworks-mini{color:#b7bec9}
.boltworks-content{display:grid;grid-template-columns:130px minmax(0,1fr);gap:24px;padding:28px 26px 30px;align-items:start}.boltworks-emblem{position:relative;width:112px;height:128px;margin:8px auto 0;display:flex;align-items:center;justify-content:center;clip-path:polygon(50% 0,91% 16%,85% 74%,50% 100%,15% 74%,9% 16%);background:linear-gradient(145deg,#f9db83,#a66d18 50%,#5b3a12);filter:drop-shadow(0 5px 10px #0008)}.boltworks-emblem:before{content:"";position:absolute;inset:5px;clip-path:inherit;border:2px solid #fff2;background:linear-gradient(145deg,#fff4c7,#9c681e)}.boltworks-emblem b{position:relative;font-family:var(--gb-font);font-size:66px;color:#29221a;text-shadow:1px 2px #fff6}.boltworks-emblem span{position:absolute;top:12px;color:#fff5ce;font-size:17px;z-index:1}.boltworks-emblem i{position:absolute;bottom:12px;width:32px;height:3px;background:#fff0bb}
.boltworks-kicker{color:#e5bf68;margin:0 0 4px}.boltworks-copy h2{font-family:var(--gb-font);font-size:clamp(28px,4vw,42px);letter-spacing:.5px;color:#ffe08a;margin:0 0 5px;text-shadow:0 2px #0008}.boltworks-lede{font-size:15px;font-weight:bold;color:#fff2ce;margin:0 0 12px}.boltworks-copy>p:not(.boltworks-kicker):not(.boltworks-lede){max-width:680px;color:#c6cbd4;line-height:1.65}
.boltworks-tier-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 22px}.boltworks-tier-preview>div{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid #ffffff20;border-radius:4px;background:linear-gradient(145deg,#ffffff0c,#0000001c)}.boltworks-tier-preview span{font-size:10px;color:#d8ad52;font-weight:bold}.boltworks-tier-preview strong{font-size:10px;letter-spacing:.7px;color:#f5e6bd}.boltworks-tier-preview small{font-size:10px;color:#9da6b5}
.boltworks-cta{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}.btn.gold{background:linear-gradient(#f9d778,#c38a25);border:1px solid #8c5d13;color:#211808;text-shadow:0 1px #fff5;font-weight:bold;box-shadow:0 2px 0 #5c3b0c}.boltworks-note{display:block;max-width:260px;color:#aeb7c4;font-size:10px;line-height:1.5}.boltworks-registered{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid #4c8d65;border-radius:4px;background:#193d2c;color:#c4f4d3;font-weight:bold}.boltworks-registered b{font-size:16px}.boltworks-footer{border-top:1px solid #ffffff14;border-bottom:0;background:#0002;color:#aeb5c0;font-size:8px}
.bolts-history>div{align-items:center}
@media(max-width:620px){.bolts-hero{grid-template-columns:1fr;padding:20px;gap:14px}.bolts-hero h2{font-size:23px}.bolts-earn-grid{grid-template-columns:1fr}.boltworks-content{grid-template-columns:1fr;padding:22px 18px}.boltworks-emblem{width:86px;height:98px;margin:0 auto}.boltworks-emblem b{font-size:52px}.boltworks-tier-preview{grid-template-columns:1fr}.boltworks-topline,.boltworks-footer{align-items:flex-start;flex-direction:column;gap:6px}.boltworks-cta{flex-direction:column}.boltworks-note{max-width:none}}
@media(prefers-color-scheme:dark){.bolts-eyebrow{color:#9db8dc}.bolts-hero{background:linear-gradient(125deg,#1c2b3e,#1d2735 60%,#25354a);border-color:#3b4c62}.bolts-hero h2{color:#eaf2ff}.bolts-hero-copy p{color:#bdc9d9}.bolts-balance{background:#1b2431;border-color:#3b4c62}.bolts-balance>span:first-child{color:#9fb1c9}.bolts-earn-card{background:var(--panel);border-color:var(--line)}}

/* Forum archive search: compact, old-school thread results with usable mobile layout. */
.forum-search { margin: 12px 0; padding: 12px; border: 1px solid var(--line); background: var(--panel2); }
.forum-search > label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.forum-search-row { display: flex; gap: 7px; align-items: center; }
.forum-search-row input { flex: 1 1 280px; min-width: 0; }
.forum-search-row select { flex: 0 1 180px; min-width: 0; }
.forum-search-results { display: flex; flex-direction: column; gap: 7px; }
.forum-search-result { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid var(--line); background: var(--panel); }
.forum-search-result h2 { margin: 3px 0 6px; font-size: 16px; }
.forum-search-result p { margin: 0 0 7px; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }
.forum-search-result-main { min-width: 0; }
.forum-search-open { flex: 0 0 auto; font-size: 12px; font-weight: 700; }
.forum-search-empty { margin-top: 12px; }
.forum-search-empty h2 { margin-top: 0; }
@media (max-width: 560px) {
  .forum-search-row { flex-wrap: wrap; }
  .forum-search-row input { flex-basis: 100%; }
  .forum-search-row select { flex: 1 1 130px; }
  .forum-search-result { align-items: flex-start; flex-direction: column; }
}

/* Create > Roadmap: three columns of what's coming, and ideas people vote on. */
.roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 18px; }
.road-col { background: var(--panel2); border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: 3px; padding: 8px 10px; }
.road-col h2 { margin: 0 0 8px; font-size: 17px; }
.road-working { border-top-color: var(--gold); }
.road-planned { border-top-color: var(--blue); }
.road-done { border-top-color: var(--green); }
.road-item { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 7px 9px; margin: 0 0 7px; overflow-wrap: anywhere; }
.road-item p { margin: 4px 0 0; white-space: pre-line; }
.road-item details { margin-top: 6px; }
.road-form .row > div { flex: 1 1 140px; }
.ideas { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; }
.idea { display: flex; gap: 10px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; overflow-wrap: anywhere; }
.idea p { margin: 3px 0 0; }
.idea p.small:not(.muted) { white-space: pre-line; }
.idea-note { border-left: 3px solid var(--blue); padding-left: 6px; }
.vote { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 46px; padding: 4px 6px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--panel2); color: var(--text); cursor: pointer; font: inherit; line-height: 1.2; }
.vote:hover:not(:disabled) { border-color: var(--blue); }
.vote.on { background: var(--blue); border-color: var(--blue-dark); color: #fff; }
.vote:disabled { cursor: default; opacity: .7; }
.badge-pill.ok { border-color: var(--green); }
@media (max-width: 720px) { .roadmap { grid-template-columns: 1fr; } }

/* The Staff page's sections: tabs with counts, and the Overview's cards. */
.staff-tabs .count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 3px; border-radius: 9px; background: var(--red); color: #fff;
  font-size: 12px; line-height: 18px; text-align: center; }
.staff-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.staff-card { display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px;
  color: var(--text); text-decoration: none; }
.staff-card:hover { border-color: var(--blue); }
.staff-card b { font-size: 26px; line-height: 1.1; color: var(--muted); }
.staff-card.busy { border-left: 4px solid var(--red); }
.staff-card.busy b { color: var(--red); }


/* Keep signing out visible in the account bar, not hidden behind a profile page. */
#me .logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  margin: 0 0 0 4px;
  padding: 3px 9px;
  border: 1px solid #a71919;
  border-radius: 3px;
  background: #c62828;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
#me .logout-button:hover, #me .logout-button:focus-visible {
  background: #a71919;
  color: #fff;
}



/* ---------------------------------------------------------------------------
   Classic Treatment: shared visual rules for the whole Player website.
   Keep the 2008-2012 Roblox-era language: compact, square, blue, and readable.
   Page-specific layouts can still add their own structure without inventing a
   separate visual system.
--------------------------------------------------------------------------- */
:root {
  --gb-page-width: 970px;
  --gb-space-1: 4px;
  --gb-space-2: 8px;
  --gb-space-3: 12px;
  --gb-space-4: 16px;
  --gb-radius: 2px;
  --gb-focus: #f0b323;
  --gb-panel-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

/* The old site used a plain, highly legible system font for body copy.
   Reserve the heavy G&B display face for the wordmark and major headings. */
body {
  font-size: 13px;
  line-height: 1.45;
}
button, input, select, textarea {
  font-family: inherit;
}
.logo, h1, .popup-title {
  font-family: var(--gb-font);
}
h1 {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.25px;
}
h2 {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
  border-radius: var(--gb-radius) var(--gb-radius) 0 0;
}

/* A consistent page frame and compact content rhythm. */
.wrap, .page, .foot {
  max-width: var(--gb-page-width);
}
.page { margin-top: 12px; }
.content {
  padding: 15px 16px 22px;
  border-radius: 0;
  box-shadow: var(--gb-panel-shadow);
}
.content > :first-child { margin-top: 0; }
.content > :last-child { margin-bottom: 0; }
.box {
  border-radius: var(--gb-radius);
  box-shadow: none;
}
.boxhead {
  border-radius: var(--gb-radius) var(--gb-radius) 0 0;
}
.box.info, .box.gold { border-radius: var(--gb-radius); }

/* Keep buttons tactile and unmistakably web-era rather than app-like. */
.btn {
  border-radius: var(--gb-radius);
  transition: filter .12s ease, border-color .12s ease;
}
.btn:hover { filter: brightness(1.045); }
.btn:active { filter: brightness(.94); }
.btn:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--gb-focus);
  outline-offset: 2px;
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], textarea, select {
  border-radius: var(--gb-radius);
  min-height: 30px;
}
textarea { min-height: 76px; }

/* Consistent catalog, game, player, and staff cards. */
.grid { gap: 12px; }
.card .pic { border-radius: 0; }
.card .name { font-size: 13px; line-height: 1.3; }
.card .by { font-size: 11px; }
.card:hover .pic { outline-offset: 1px; }
.thumb { border-radius: 0; }
.staff-card, .server-card, .past-trade, .shot-edit,
.forum-search-result, .forum-post, .road-item, .idea {
  border-radius: var(--gb-radius);
  box-shadow: none;
}
.server-card { padding: 9px; }
.staff-card { padding: 9px 10px; }
.staff-card b { font-size: 23px; }

/* Tables should read like catalog and forum tables, not floating app widgets. */
table {
  border-collapse: collapse;
  max-width: 100%;
}
th {
  text-align: left;
  font-weight: bold;
}
td, th { vertical-align: middle; }
table:not(.stats):not(.versions) th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
table:not(.stats):not(.versions) td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
table:not(.stats):not(.versions) tbody tr:nth-child(even) {
  background: var(--stripe);
}

/* Tabs, labels, and small metadata stay compact and consistent. */
.tabs { gap: 4px; }
.tabs .btn { padding: 4px 10px; }
.badge-pill, .chip, .outcome {
  border-radius: var(--gb-radius);
}
.badge { border-radius: 2px; }
.muted, .small { line-height: 1.4; }
.list > div { padding: 7px 0; }

/* Retain the classic centered page on narrow screens without horizontal drift. */
@media (max-width: 640px) {
  .page { margin-top: 0; }
  .content { padding: 12px 12px 20px; }
  .wrap { gap: 8px; }
  .nav .wrap, .subnav .wrap { gap: 0; }
  .nav a { padding: 7px 9px; }
  .subnav a { padding: 5px 8px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 10px; }
}

/* Respect reduced-motion preferences; the classic interface relies on feedback,
   not movement, to communicate hover and focus states. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Direct messages and party chats */
.party-layout { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:12px; align-items:start; }
.party-room { min-width:0; }
.party-room-head { display:flex; justify-content:space-between; gap:10px; padding:9px 11px; border-bottom:1px solid var(--line); background:var(--panel2); }
.party-messages { min-height:260px; max-height:520px; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
.party-message { max-width:82%; align-self:flex-start; }
.party-message.mine { align-self:flex-end; }
.party-message-meta { display:flex; gap:9px; align-items:center; font-size:11px; color:var(--muted); margin:0 4px 3px; }
.party-message-body { background:var(--panel2); border:1px solid var(--line); border-radius:9px 9px 9px 2px; padding:8px 10px; overflow-wrap:anywhere; white-space:pre-wrap; }
.party-message.mine .party-message-body { background:color-mix(in srgb,var(--blue) 12%,var(--panel)); border-color:color-mix(in srgb,var(--blue) 35%,var(--line)); border-radius:9px 9px 2px 9px; }
.party-compose { display:flex; gap:8px; align-items:end; padding:10px; border-top:1px solid var(--line); }
.party-compose textarea { flex:1; min-width:0; resize:vertical; }
.party-members { padding-bottom:10px; }
.party-member,.party-invite-row { display:flex; align-items:center; gap:8px; justify-content:space-between; padding:8px 10px; border-bottom:1px solid var(--line); }
.party-invite-form { padding:10px; }
.party-chat-list { display:flex; flex-direction:column; }
.party-chat-row { display:flex; align-items:center; gap:11px; padding:10px; border-bottom:1px solid var(--line); color:var(--text); }
.party-chat-row:hover { background:var(--panel2); text-decoration:none; }
.party-chat-icon { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:#fff; font-size:17px; }
.party-chat-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.party-chat-copy span { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.party-chat-copy small,.party-invite-row small { color:var(--muted); }
.party-chat-arrow { font-size:24px; color:var(--muted); }
.party-friend-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; max-height:220px; overflow:auto; padding:8px; border:1px solid var(--line); border-radius:4px; }
.party-friend-picker label { display:flex; align-items:center; gap:6px; }
@media(max-width:650px) {
  .party-layout { grid-template-columns:1fr; }
  .party-members { order:-1; }
  .party-compose { align-items:stretch; flex-direction:column; }
  .party-message { max-width:94%; }
  .party-friend-picker { grid-template-columns:1fr; }
}


/* Keep signing out visible in the account bar, not hidden behind a profile page. */
#me .logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  margin: 0 0 0 4px;
  padding: 3px 9px;
  border: 1px solid #a71919;
  border-radius: 3px;
  background: #c62828;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
#me .logout-button:hover, #me .logout-button:focus-visible {
  background: #a71919;
  color: #fff;
}

/* Achievements on profiles, game update logs and the Events page */
.achievements { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.achievement { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border: 1px solid var(--line, #ccc); border-radius: 6px; }
.achievement.locked { opacity: 0.6; }
.achievement-icon { font-size: 24px; line-height: 1; }
.achievement-bar, .event-progress { display: block; height: 6px; background: rgba(127, 127, 127, 0.25); border-radius: 3px; overflow: hidden; margin: 4px 0 2px; }
.achievement-bar span, .event-progress span { display: block; height: 100%; background: #2e9e3e; }
.event-progress { height: 10px; max-width: 420px; }
.gamelog-entry { border-left: 3px solid #2e7bd6; padding: 2px 10px; margin: 8px 0; }
.gamelog-entry p { margin: 4px 0; }
.event-card.event-over { opacity: 0.7; }

/* Game leaderboards (a game's OrderedDataStores, from Supabase) */
.leaderboards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.leaderboard { margin: 0; }
.leaderboard ol { list-style: none; margin: 0; padding: 0; }
.leaderboard li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); }
.leaderboard li:first-child { border-top: 0; }
.leaderboard .lb-rank { min-width: 24px; text-align: center; font-weight: 700; color: var(--muted, #777); }
.leaderboard li.top1 .lb-rank { color: #c9a227; }
.leaderboard li.top2 .lb-rank { color: #9aa3ad; }
.leaderboard li.top3 .lb-rank { color: #b0703a; }
.leaderboard .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Creator stats: when people play */
.playtimes .hour-axis { display: flex; justify-content: space-between; margin-top: 2px; }
.playtimes .who-played { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0; }

/* Staff > Numbers */
.staff-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.top-games li { padding: 3px 0; }
.top-games li .small { margin-left: 6px; }

/* Boltworks Club tier icon (hex bolt head, 1-3 stripes) next to names, and the box on profiles */
.club-icon{display:inline-block;vertical-align:-2px;flex:none}
h1 .club-icon{vertical-align:-4px}
.club-box{display:flex;align-items:center;gap:12px}.club-box b{font-size:14px}
.club-short{font-family:var(--gb-font);font-size:20px;letter-spacing:1px;line-height:1}
.club-bwc .club-short{color:#2478e6}.club-tbc .club-short{color:#d68a00}.club-obc .club-short{color:#d9161c}
.list .club-pick,.club-pick{width:auto;max-width:120px;flex:none;font-size:12px;padding:2px 4px}
.boltworks-tier-preview>div>.club-icon{margin-bottom:2px}
.boltworks-copy h2{background:none;border:0;padding:0}