:root {
  --blue: #0074bd;
  --blue-dark: #005a94;
  --link: #00a2ff;
  --green: #02b757;
  --green-dark: #018a41;
  --bg: #e3e3e3;
  --card: #ffffff;
  --side: #f2f2f2;
  --text: #191919;
  --muted: #757575;
  --line: #d8d8d8;
  --red: #d32f2f;
}

/* Gotham SSm (Light 300, Book 400) — the font the 2016 site used. Heavier weights fall back to synthesized bold. */
@font-face { font-family: "Gotham SSm"; src: url(assets/fonts/GothamSSm-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Gotham SSm"; src: url(assets/fonts/GothamSSm-Book.woff2) format("woff2"); font-weight: 400; font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Gotham SSm", "Montserrat", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 15px; }

/* ---------- top bar ----------
   Real sizes from the 2016 layout: 40px bar, 16px links, 280x28 search, 28px icons. */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 40px; z-index: 50;
  background: var(--blue); display: flex; align-items: center; gap: 18px; padding: 0 12px 0 17px;
}
.logo { display: block; margin-right: 22px; line-height: 0; }
.logo img { display: block; height: 34px; width: auto; }
.logo:hover { text-decoration: none; }
.topnav { display: flex; gap: 28px; }
.topnav a { color: #fff; font-weight: 400; font-size: 16px; }
.search { display: flex; background: #fff; height: 28px; width: 280px; }
.search input { border: 0; flex: 1; padding: 0 9px; outline: none; background: transparent; min-width: 0; font-size: 14px; }
.search button { border: 0; background: transparent; }
.topright { margin-left: auto; display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 600; font-size: 15px; }
.topright a { color: #fff; }
.topright a:hover { text-decoration: none; }
.pill { display: inline-flex; align-items: center; gap: 5px; }
.pill .headshot { border-radius: 50%; background: #d4d4d4; }
.age { font-size: 10px; opacity: .9; }

/* ---------- sprite icons ---------- */
.ico { display: inline-block; flex-shrink: 0; width: var(--s); height: var(--s); vertical-align: middle;
  background-repeat: no-repeat; background-size: calc(var(--s) * 2) auto;
  background-position: calc(var(--x) * var(--s) * -1) calc(var(--y) * var(--s) * -1); }
.ico-nav { background-image: url(assets/navigation_02012016.svg); }
.ico-brand { background-image: url(assets/branded.svg); }
.ico-games { background-image: url(assets/games.svg); }
.money { display: inline-flex; align-items: center; gap: 2px; }
.votes { display: flex; align-items: center; gap: 3px; margin-top: 5px; }
.votes .votebar { flex: 1; margin-top: 0; }
.search button { display: flex; align-items: center; padding: 0 3px; }
.topright .pill .ico + * { margin-left: 0; }

/* ---------- sidebar ----------
   175px column, 33px rows, 16px text, 28px sprite icons. */
.sidebar {
  position: fixed; top: 40px; left: 0; bottom: 0; width: 175px; background: #f2f2f2;
  padding: 8px 10px; overflow-y: auto; z-index: 40;
}
.side-user { display: flex; align-items: center; gap: 8px; height: 40px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 2px solid #c8c8c8; color: #191919; font-size: 16px; font-weight: 600; }
.side-user:hover { text-decoration: none; }
.side-user .head { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #d4d4d4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.side-link { display: flex; align-items: center; gap: 4px; height: 33px; color: #393b3d; font-size: 16px; font-weight: 400; }
.side-link:hover { text-decoration: none; color: #191919; }
.badge { background: var(--blue); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 600; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
.btn-upgrade { display: flex; align-items: center; justify-content: center; height: 33px; margin-top: 6px; background: var(--blue); color: #fff; font-weight: 600; border-radius: 3px; font-size: 16px; }
.btn-upgrade:hover { text-decoration: none; background: var(--blue-dark); }

/* ---------- layout ---------- */
.content { margin-left: 175px; padding-top: 40px; min-height: 100vh; display: flex; flex-direction: column; }
#view { flex: 1; padding: 38px 20px 77px; }
.page { max-width: 1242px; margin: 0 auto; }
.page.wide { max-width: 1715px; }
.footer { background: #fff; text-align: center; padding: 23px 20px 31px; }
.footlinks { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; margin-bottom: 10px; }
.footlinks a { font-size: 23px; }
.footer p { color: #999; font-size: 13px; margin: 0; }

h1 { font-size: 36px; font-weight: 600; margin: 0 0 20px; }
h2 { font-size: 26px; font-weight: 600; margin: 23px 0 10px; }
.card { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.card-head { background: #f2f2f2; padding: 13px 15px; font-weight: 700; font-size: 20px; border-bottom: 1px solid var(--line); }
.card-body { padding: 15px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.empty { background: #c8c8c8; color: #555; text-align: center; padding: 18px; font-size: 15px; }
.row { display: flex; gap: 18px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

.btn { display: inline-block; white-space: nowrap; border: 0; border-radius: 3px; padding: 8px 18px; font-weight: 600; font-size: 17px; color: #fff; background: var(--blue); }
.btn:hover { background: var(--blue-dark); }
.btn.green { background: var(--green); }
.btn.green:hover { background: var(--green-dark); }
.btn.gray { background: #8a8a8a; }
.btn.big { padding: 13px 33px; font-size: 23px; }
.btn:disabled { background: #bbb; cursor: not-allowed; }
.input { width: 100%; padding: 9px 12px; border: 1px solid #c3c3c3; border-radius: 2px; background: #fff; }
textarea.input { resize: vertical; min-height: 90px; }
label.lbl { display: block; font-weight: 600; font-size: 15px; margin: 13px 0 5px; }

/* tabs */
.tabs { display: flex; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); margin-bottom: 15px; }
.tab { flex: 1; text-align: center; padding: 12px; color: var(--text); font-size: 18px; border-bottom: 3px solid transparent; cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0; }
.tab.active { border-bottom-color: var(--link); }
.tab:hover { background: #f6f6f6; }
.oldtabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); padding: 5px 5px 0; }
.oldtab { background: #e6e6e6; border: 1px solid var(--line); border-bottom: 0; padding: 9px 15px; font-weight: 700; font-size: 17px; cursor: pointer; }
.oldtab.active { background: #fff; color: var(--link); border-bottom: 2px solid var(--link); }

.headshot { display: block; object-fit: cover; flex-shrink: 0; }
.avatar-circle .headshot, .side-user .head .headshot { width: 100%; height: 100%; }
.thumb-sm .headshot { width: 100%; height: 100%; border-radius: 3px; background: #d4d4d4; }

/* ---------- home ---------- */
.hello { display: flex; align-items: center; gap: 31px; margin-bottom: 31px; }
.hello h1 { font-size: 38px; font-weight: 700; margin: 0; }
.avatar-circle { width: 110px; height: 110px; border-radius: 50%; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgba(0,0,0,.2); flex-shrink: 0; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 28px; }
.feed-post { border-top: 1px solid #eee; padding: 13px 0; display: flex; gap: 13px; }
.thumb-sm { width: 44px; height: 44px; border-radius: 3px; flex-shrink: 0; }
.blog-item { display: flex; gap: 13px; padding: 13px 15px; border-bottom: 1px solid #eee; align-items: center; }
.blog-item b { color: var(--link); display: block; font-size: 17px; }
.event-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
.event-tile { width: 105px; border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--text); }
.event-tile div:first-child { height: 105px; }
.event-tile div:last-child { padding: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.home-wrap { display: flex; justify-content: center; gap: 32px; align-items: flex-start; }
.home-main { width: 760px; min-width: 0; }
.ad-col { width: 160px; flex-shrink: 0; }
.ad-sky { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; height: 600px; color: #fff; text-align: center; padding: 12px; }
.ad-sky:hover { text-decoration: none; filter: brightness(1.08); }
.ad-sky b { font-size: 26px; line-height: 1.1; }
.ad-sky span { font-size: 13px; opacity: .9; }
.ad-cap { display: flex; justify-content: space-between; font-size: 10px; color: #757575; margin-top: 2px; letter-spacing: .3px; }
.ad-cap a { color: var(--link); }
.sec-head { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 8px; }
.sec-head h2 { margin: 0; font-size: 22px; }
.sec-tools { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.sec-tools .input { width: auto; padding: 4px 8px; font-size: 13px; }
.sec-tools a { font-weight: 600; }
.scroller { display: flex; align-items: stretch; gap: 0; }
.scroller .game-row { flex: 1; overflow-x: hidden; scroll-behavior: smooth; padding: 0 0 2px; }
.scroll-btn { width: 32px; flex-shrink: 0; border: 0; background: #fff; color: #b8b8b8; font-size: 26px; box-shadow: 0 1px 3px rgba(0,0,0,.12); margin: 0 6px; }
.scroll-btn:hover { color: #393b3d; }
@media (max-width: 1360px) { .ad-col { display: none; } }

/* ---------- profile (measured against the 2016 profile page) ---------- */
.profile .card { box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.profile h2 { font-size: 26px; font-weight: 300; margin: 19px 0 7px; }
.profile-head { position: relative; display: flex; gap: 9px; padding: 14px 23px; align-items: flex-start; min-height: 158px; }
.pcircle { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
.pcircle .headshot { width: 130px; height: 130px; border-radius: 50%; border: 1px solid #b8b8b8; background: #fff; }
.pbadge { position: absolute; right: 3px; bottom: 2px; width: 26px; height: 26px; border-radius: 50%; background: #00a2ff; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
.pbadge .ico { filter: brightness(0) invert(1); }
.pname { font-size: 26px; margin-top: 20px; }
.stats { display: flex; gap: 32px; margin: 26px 0 0 20px; }
.stat { width: 100px; text-align: center; color: #b8b8b8; font-size: 17px; line-height: 1.25; }
.stat:hover { text-decoration: none; }
.stat b { display: block; color: #0074bd; font-weight: 400; font-size: 19px; }
.more { position: absolute; top: 12px; right: 18px; border: 0; background: none; font-size: 26px; letter-spacing: 1px; line-height: 1; color: #191919; padding: 0; }
.profile .tabs { margin: 22px 0 0; }
.profile .tab { padding: 8px; font-size: 16px; border-bottom-width: 4px; }
.profile .tab.active { border-bottom-color: #00a2ff; }
.about { padding: 18px 20px 6px; font-size: 15px; }
.about-foot { display: flex; justify-content: space-between; border-top: 1px solid #ccc; margin-top: 16px; padding: 8px 0 4px; font-size: 11px; }
.about-foot a { color: #0074bd; }
.wearing { display: grid; grid-template-columns: 1fr 1fr; height: 301px; }
.wearing .stage { position: relative; background: #fff; border: 1px solid #ccc; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.wearing .items { background: #3d7699; border: 1px solid #2f5f7c; padding: 15px; display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; overflow-y: auto; }
.render { display: block; object-fit: contain; }
.view3d { position: absolute; inset: 0; cursor: grab; }
.view3d:active { cursor: grabbing; }
.view3d canvas { display: block; }
.avatar-stage { position: relative; overflow: hidden; }
.btn-3d { position: absolute; right: 10px; bottom: 10px; width: 47px; height: 38px; border: 0; border-radius: 4px; background: #6b6b6b; color: #191919; font-weight: 700; font-size: 17px; }
.btn-3d:hover { background: #7d7d7d; }
.pstats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 22px 10px; font-size: 17px; }
.pstats span { display: block; color: #b8b8b8; font-size: 15px; margin-bottom: 2px; }
.mini-item { display: block; background: #fff; width: 97px; padding: 5px; font-size: 13px; text-align: center; color: #191919; border-radius: 3px; }
.mini-item:hover { text-decoration: none; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
.mini-pic { position: relative; }

/* ---------- avatar editor ---------- */
.avatar-layout { display: grid; grid-template-columns: 353px 1fr; gap: 15px; align-items: start; }
.avatar-stage { background: radial-gradient(circle at 50% 40%, #e7c79b, #a7763f); height: 353px; display: flex; align-items: center; justify-content: center; }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.swatch { aspect-ratio: 1; border: 2px solid transparent; cursor: pointer; }
.swatch.sel { border-color: #000; }
.part-btns { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.part-btn { padding: 5px 10px; border: 1px solid var(--line); background: #fff; font-size: 15px; }
.part-btn.sel { background: var(--blue); color: #fff; border-color: var(--blue); }
.slider-row { display: flex; justify-content: space-between; font-size: 17px; margin-top: 13px; }
input[type=range] { width: 100%; accent-color: var(--link); }

/* ---------- items / catalog ---------- */
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(151px, 1fr)); gap: 10px; }
.item { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); cursor: pointer; position: relative; }
.item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.item .pic { height: 123px; display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid #eee; }
.item .meta { padding: 6px 8px 9px; font-size: 15px; }
.item .name { color: var(--link); line-height: 1.2; height: 38px; overflow: hidden; }
.price { color: var(--green); font-weight: 700; font-size: 15px; margin-top: 3px; }
/* LIMITED / LIMITED U icons (assets/limited.svg, assets/limited-u.svg) */
.tag-limited { position: absolute; left: 0; top: 102px; height: 16px; }
.tag-new { position: absolute; right: 5px; top: 5px; background: #f68802; color: #fff; font-size: 10px; padding: 2px 5px; border-radius: 2px; }
.tag-owned { position: absolute; right: 5px; top: 5px; background: var(--blue); color: #fff; font-size: 10px; padding: 2px 5px; border-radius: 2px; }
.cat-layout { display: grid; grid-template-columns: 192px 1fr; gap: 18px; }
.cat-list a, .cat-list button { display: block; padding: 6px 5px; font-size: 17px; color: #333; background: none; border: 0; text-align: left; width: 100%; }
.cat-list .on { color: var(--link); font-weight: 700; border-left: 3px solid var(--link); }

.tee-form { display: flex; gap: 20px; align-items: flex-start; background: #f7f7f7; border: 1px solid #e3e3e3; padding: 15px; }
.tee-preview { width: 150px; height: 150px; background: #fff; border: 1px solid #ddd; flex-shrink: 0; }
.item .pic .render, .mini-item .render, .tee-preview .render { object-fit: scale-down; }
.face-icon { display: block; background: #fff; object-fit: contain; }

/* ---------- settings (sizes from the 2016 settings page, x1.28) ---------- */
.settings { max-width: 940px; }
.set-title-main { font-size: 32px; font-weight: 400; margin: 0 0 18px; }
.set-layout { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: start; }
.set-tabs { background: #fff; border: 1px solid #e3e3e3; display: flex; flex-direction: column; padding: 4px 0; }
.set-tabs a { color: #191919; font-size: 14px; padding: 11px 16px; border-left: 3px solid transparent; white-space: nowrap; }
.set-tabs a:hover { text-decoration: none; background: #f6f6f6; }
.set-tabs a.on { border-left-color: #00a2ff; }
.set-h { font-size: 17px; font-weight: 400; margin: 0 0 9px; }
.set-main .set-card + .set-h { margin-top: 24px; }
.set-card { background: #fff; border: 1px solid #e3e3e3; padding: 18px 20px; font-size: 14px; }
.set-row { display: flex; align-items: center; height: 48px; }
.set-label { color: #757575; margin-right: 8px; }
.set-value { color: #191919; flex: 1; }
.set-unverified { color: #d86868; font-size: 13px; margin-left: 6px; }
.set-edit { border: 0; background: none; color: #393b3d; padding: 4px; line-height: 0; }
.set-edit:hover { color: #000; }
.set-input, .set-select { font-family: inherit; font-size: 13px; color: #191919; border: 1px solid #c3c3c3; border-radius: 2px; background: #fff; }
.set-input { width: 100%; padding: 8px 11px; }
.set-input::placeholder, .set-bio::placeholder { color: #999; }
.set-bio { min-height: 80px; resize: vertical; }
.set-note { font-size: 12px; color: #393b3d; margin: 14px 0 18px; }
.set-group { display: flex; border: 1px solid #c3c3c3; border-radius: 2px; height: 38px; }
.set-group > * { flex: 1; }
.set-gl { flex: 0 0 120px; display: flex; align-items: center; padding: 0 16px; font-size: 13px; border-right: 1px solid #c3c3c3; }
.set-group .set-select { border: 0; border-left: 1px solid #c3c3c3; border-radius: 0; padding: 0 12px; height: 100%; }
.set-group .set-gl + .set-select { border-left: 0; }
.set-hint { font-size: 11.5px; color: #757575; margin: 9px 0 18px; display: flex; align-items: center; gap: 5px; }
.set-q { display: inline-flex; width: 14px; height: 14px; border: 1px solid #999; border-radius: 50%; align-items: center; justify-content: center; font-size: 9px; }
.set-gender { border: 0; border-left: 1px solid #c3c3c3; background: #e9e9e9; color: #b8b8b8; display: flex; align-items: center; justify-content: center; }
.set-gender.on { color: #00a2ff; }
.set-gender:hover { background: #e2e2e2; }
.set-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.set-between .set-select { height: 36px; padding: 0 10px; min-width: 260px; }
.set-btn { font-family: inherit; font-size: 13px; color: #191919; background: #fff; border: 1px solid #b8b8b8; border-radius: 3px; padding: 8px 20px; white-space: nowrap; }
.set-btn:hover { background: #f2f2f2; }
.set-danger { color: #c4281c; border-color: #e0a8a3; }
.set-field { display: block; font-size: 13px; color: #191919; margin-bottom: 16px; }
.set-field .set-input { margin-top: 6px; }
.set-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.set-title { font-size: 14px; color: #191919; }
.set-sub { font-size: 12px; color: #757575; margin-top: 3px; }
.set-opt { display: flex; align-items: center; min-height: 52px; }
.set-opt > span:first-child { flex: 0 0 300px; }
.set-opt .set-select { height: 46px; padding: 0 14px; font-size: 14px; min-width: 180px; }
.set-check { cursor: pointer; justify-content: space-between; }
.set-check input { position: absolute; opacity: 0; pointer-events: none; }
.set-switch { width: 42px; height: 24px; border-radius: 12px; background: #c8c8c8; position: relative; transition: background .15s; }
.set-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.set-check input:checked + .set-switch { background: var(--blue); }
.set-check input:checked + .set-switch::after { left: 21px; }
.set-colors { display: flex; align-items: center; gap: 10px; }
.set-color-now { width: 46px; height: 46px; border-radius: 3px; border: 1px solid #c3c3c3; }
.set-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; padding: 0; }
.set-color.on { border-color: #191919; box-shadow: inset 0 0 0 2px #fff; }

/* top bar gear menu */
.gear-wrap { position: relative; display: inline-flex; }
.gear { border: 0; background: none; padding: 0; line-height: 0; }
.gear-menu { display: none; position: absolute; right: -6px; top: 36px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); border-radius: 3px; min-width: 125px; padding: 6px 0; z-index: 70; }
.gear-menu.open { display: block; }
.topright .gear-menu a { display: block; color: #00a2ff; font-weight: 400; font-size: 16px; padding: 7px 12px; }
.topright .gear-menu a:hover { background: #f2f2f2; text-decoration: none; }

/* website settings: font and avatar background choices */
:root[data-font="modern"] body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }
:root[data-font="classic"] body { font-family: Arial, Helvetica, sans-serif; }
:root[data-avatar-bg="plain"] .avatar-stage { background: #fff; }

@media (max-width: 860px) {
  .set-layout { grid-template-columns: 1fr; }
  .set-opt { flex-wrap: wrap; } .set-opt > span:first-child { flex-basis: 100%; }
}

/* ---------- games ---------- */
.game-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.game { width: 161px; flex-shrink: 0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); color: var(--text); }
.game:hover { text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.game .gthumb { height: 146px; display: flex; align-items: flex-end; padding: 8px; color: #fff; font-weight: 800; font-size: 17px; text-shadow: 0 2px 3px rgba(0,0,0,.6); }
.game .ginfo { padding: 8px; font-size: 15px; }
.game .gname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.votebar { height: 5px; background: #ccc; margin-top: 8px; }
.votebar span { display: block; height: 100%; background: #555; }
.game-detail { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; }

/* ---------- forums ---------- */
.forum-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; }
.forum-table th { background: #2e5c9a; color: #fff; text-align: left; padding: 8px 10px; font-size: 19px; font-weight: 600; }
.forum-table td { padding: 9px 10px; border-bottom: 1px solid #eee; vertical-align: top; }
.forum-table tr:nth-child(even) td { background: #f5f5f5; }
.forum-table .num { text-align: center; width: 90px; }
.post { display: grid; grid-template-columns: 166px 1fr; border-bottom: 1px solid #ddd; background: #fff; }
.post .who { background: #f0f4fa; padding: 13px; font-weight: 700; font-size: 15px; text-align: center; }
.post .body { padding: 13px; white-space: pre-wrap; word-wrap: break-word; }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 17px; }
.tbl th { text-align: left; background: #f2f2f2; padding: 8px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 8px; border-bottom: 1px solid #eee; }

/* ---------- upgrade ---------- */
.yes { color: var(--green); font-weight: 700; }
.no { color: var(--red); font-weight: 700; }

/* ---------- download ---------- */
.hero { background: linear-gradient(135deg, #3a2414, #7a4a24 60%, #2c1a0e); color: #fff; text-align: center; padding: 51px 26px; }
.hero h2 { font-size: 38px; margin: 0 0 8px; }
.dl-row { display: flex; gap: 18px; align-items: center; padding: 18px; border-bottom: 1px solid #eee; }
.dl-icon { width: 46px; height: 46px; border-radius: 5px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
code { font-size: 14px; color: #555; }

/* ---------- donate ---------- */
.tier-row { display: flex; align-items: center; gap: 18px; padding: 15px; border-bottom: 1px solid #eee; }
.tier-row.sel { background: #eef6fd; border-left: 3px solid var(--blue); }

/* ---------- chat / modal / toast ---------- */
.chat { position: fixed; right: 31px; bottom: 0; width: 251px; z-index: 60; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.25); }
.chat-head { background: var(--link); color: #fff; font-weight: 700; padding: 8px 10px; cursor: pointer; font-size: 17px; }
.chat-body { display: none; max-height: 384px; overflow-y: auto; }
.chat.open .chat-body { display: block; }
.chat-friend { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 15px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.dot.off { background: #aaa; }

.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-bg.show { display: flex; }
.modal { background: #fff; width: 538px; max-width: 100%; border-radius: 3px; overflow: hidden; }
.modal .card-body { padding: 20px; }
.modal-actions { display: flex; justify-content: center; gap: 13px; margin-top: 20px; }
/* the Buy Item dialog (buyDialog in app.js) */
.modal.buy-modal { width: 398px; border-radius: 4px; }
.bm-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 16px; border-bottom: 1px solid #e3e3e3; font-size: 19px; color: #191919; }
.bm-x { background: none; border: 0; padding: 0 4px; font-size: 30px; line-height: 1; color: #393b3d; cursor: pointer; }
.bm-x:hover { color: #000; }
.bm-body { padding: 14px 16px 10px; text-align: center; }
.bm-q { margin: 0; text-align: left; font-size: 15px; line-height: 1.35; color: #191919; }
.bm-q .money { color: var(--green); font-weight: 600; vertical-align: -2px; }
.bm-pic { display: flex; justify-content: center; margin: 8px 0 4px; }
.bm-actions { display: flex; justify-content: center; gap: 22px; margin: 6px 0 14px; }
.bm-actions .btn { min-width: 90px; padding: 6px 10px; font-size: 19px; }
.btn.bm-cancel { background: #fff; color: #191919; border: 1px solid #b8b8b8; font-weight: 400; }
.btn.bm-cancel:hover { background: #f2f2f2; }
.bm-after { margin: 0; font-size: 10px; color: #8a8a8a; }
.bm-after .money { vertical-align: -2px; }

/* profile RAP popup: someone's limiteds */
.stat-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.stat-btn:hover b { text-decoration: underline; }
.modal.lim-modal { width: 578px; }
.lim-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f2f2f2; border-bottom: 1px solid #e3e3e3; }
.lim-head b { font-size: 17px; color: #191919; }
.lim-pill { background: var(--link); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 2px; }
.lim-x { margin-left: auto; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #555; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.lim-sum { display: flex; justify-content: space-around; padding: 14px 10px; border-bottom: 1px solid #e3e3e3; text-align: center; font-weight: 700; color: #191919; }
.lim-sum span { display: block; font-size: 11px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: .5px; }
.lim-tools { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #e3e3e3; }
.lim-tools .input { margin: 0; height: 30px; padding: 4px 8px; font-size: 13px; }
.lim-tools #limQ { flex: 1; min-width: 0; }
.lim-tools #limSort { width: auto; }
.lim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; padding: 14px 16px; max-height: 360px; overflow-y: auto; }
.lim-item { display: flex; flex-direction: column; align-items: center; padding: 6px 4px 8px; border: 1px solid #e3e3e3; border-radius: 3px; color: #191919; text-align: center; }
.lim-item:hover { text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.lim-pic { position: relative; width: 80px; height: 80px; }
.lim-tag { position: absolute; left: 0; bottom: 0; height: 14px; }
.lim-name { margin: 6px 0 4px; font-size: 12px; font-weight: 700; line-height: 1.25; }
.lim-item .money { color: var(--green); font-size: 12px; font-weight: 700; }
.lim-empty { grid-column: 1 / -1; text-align: center; margin: 10px 0; }

.toast { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 12px 23px; border-radius: 3px; font-size: 17px; z-index: 200; opacity: 0; pointer-events: none; transition: opacity .2s; }
.toast.show { opacity: 1; }

/* ---------- auth ---------- */
.auth-wrap { max-width: 486px; margin: 51px auto; }
.auth-wrap .card-body { padding: 26px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .topnav, .search { display: none; }
  .sidebar { display: none; }
  .home-main { width: 100%; }
  .content { margin-left: 0; }
  .home-grid, .wearing, .avatar-layout, .game-detail, .cat-layout { grid-template-columns: 1fr; }
  .stats { gap: 23px; }
}

/* 404 page: proportions of the reference design, scaled to this site's 40px top bar (reference: 31px) */
.notfound { position: relative; box-sizing: border-box; width: 800px; max-width: 100%; height: 370px; margin: 132px auto 0; padding: 20px 15px 18px;
  display: flex; flex-direction: column; box-shadow: none; font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif; }
.notfound h1 { font-size: 36px; font-weight: 400; line-height: 1.04; margin: 0; color: #191919; letter-spacing: -0.2px; }
.notfound-code { margin-top: 26px; font-size: 15px; color: #393b3d; }
.notfound-code span { border-left: 1px solid #999; margin-left: 6px; padding-left: 7px; }
.notfound-actions { margin-top: auto; display: flex; gap: 15px; position: relative; z-index: 1; }
.notfound-actions .btn { box-sizing: border-box; width: 90px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 17px; font-weight: 400; border-radius: 3px; }
.btn.outline { background: #fff; color: #393b3d; border: 1px solid #c3c3c3; }
.btn.outline:hover { background: #f5f5f5; text-decoration: none; }
.notfound img { position: absolute; top: 33px; right: 19px; width: 403px; height: auto; }
/* like the reference, centred on the window rather than the area beside the 175px sidebar */
@media (min-width: 1200px) { .notfound { left: -87px; } }
@media (max-width: 860px) {
  .notfound { height: auto; margin-top: 40px; }
  .notfound h1 { font-size: 28px; }
  .notfound-actions { margin-top: 24px; }
  .notfound img { position: static; width: min(403px, 100%); align-self: center; margin: 10px 0 20px; order: -1; }
}

/* Builders Club (upgrade) page: the reference design's proportions, scaled to this site's 40px top bar (reference: 31px) */
.bc-page { width: 945px; max-width: 100%; margin: -20px auto 40px; font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif; color: #191919; }
.bc-title { font-size: 31px; font-weight: 700; margin: 0 0 0 23px; line-height: 1.3; }
.bc-layout { display: flex; gap: 14px; align-items: flex-start; }
.bc-main { width: 719px; flex: none; }
.bc-heads, .bc-row, .bc-buy { display: grid; grid-template-columns: 132px 47px repeat(3, 180px); }
.bc-heads { margin-top: 44px; }
.bc-head { text-align: center; }
.bc-head.free { grid-column: span 2; }
.bc-name { font-size: 28px; line-height: 36px; margin-bottom: 15px; }
.bc-head img { display: block; margin: 0 auto; width: 90px; height: auto; }
.bc-table { margin-top: 38px; }
.bc-row { height: 30px; align-items: center; font-size: 14px; border-top: 1px solid #cdcdcd; }
.bc-row:first-child { border-top: 0; }
.bc-label { padding-left: 4px; }
.bc-label.b { font-weight: 700; }
.bc-val { text-align: center; font-weight: 700; color: #191919; }
.bc-val.free { color: #d40000; }
.bc-val.hi { color: #0b9c22; font-size: 17px; }
.bc-val.check { color: #0b9c22; font-size: 18px; font-weight: 400; }
.bc-note { text-align: center; font-size: 14px; font-weight: 700; color: #0b6b1a; margin: 4px 0 0 132px; height: 20px; line-height: 20px; }
.bc-buy { margin-top: 27px; height: 106px; }
.bc-buycell { border-left: 1px solid #d6d6d6; text-align: center; padding-top: 22px; }
.bc-buycell.free { grid-column: span 2; border-left: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.bc-line { display: block; width: 108px; border-top: 1px solid #d6d6d6; }
.bc-forever { font-size: 14px; font-weight: 700; color: #393b3d; height: 20px; line-height: 20px; }
.bc-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 90px; height: 33px; margin-top: 17px; padding: 0 14px;
  background: #0b9c22; color: #fff; border: 0; border-radius: 0; font-family: inherit; font-size: 18px; cursor: pointer; }
.bc-btn:hover { background: #087d1b; text-decoration: none; }
.bc-btn.current { background: #a3a3a3; cursor: default; }
.bc-down { font-size: 14px; padding: 5px 12px; }
.bc-table.features { margin-top: 16px; }
.bc-table.features .bc-row { height: 29.5px; }
.bc-side { width: 210px; flex: none; margin-top: 40px; padding-bottom: 14px; border-bottom: 1px solid #d6d6d6; font-size: 14px; }
.bc-side h3 { font-size: 14px; font-weight: 700; margin: 0 0 10px; }
.bc-side h3 + p { margin: 0 0 10px 13px; color: #393b3d; line-height: 21px; }
.bc-side .bc-btn { margin: 0 0 14px 13px; }
.bc-side .bc-btn.small { font-size: 14px; height: 24px; min-width: 0; padding: 0 8px; margin-bottom: 0; }
@media (max-width: 1200px) {
  .bc-page { margin-top: 0; }
  .bc-layout { flex-direction: column; }
  .bc-main { width: 100%; overflow-x: auto; }
  .bc-heads, .bc-table, .bc-note, .bc-buy { min-width: 719px; }
  .bc-side { width: auto; margin-top: 30px; }
}
@media (max-width: 600px) {
  .bc-title { font-size: 24px; margin: 0 16px; }
  .bc-side { margin-left: 16px; margin-right: 16px; }
}

/* Builders Club badge after the profile name: native 52x28 sprite cell at the 26px name size, as in the reference */
.bc-badge { display: inline-block; width: 2em; height: 1.0769em; margin-left: .35em; vertical-align: middle; position: relative; top: -.04em;
  background: url(assets/bc/badges.svg) no-repeat 0 calc(var(--row) * -1.0769em); background-size: 4em 3.2308em; }
.staff-badge { width: .92em; height: .92em; margin-left: .45em; vertical-align: middle; position: relative; top: -.04em; }

/* profile badges: 142px tiles like the reference; the art is a 130px crop of assets/badges.svg (172px cells) */
.badge-card { display: flex; flex-wrap: wrap; gap: 12px; padding: 20px 21px 12px; }
.badge-tile { width: 142px; }
.badge-box { box-sizing: border-box; width: 142px; height: 140px; border: 1px solid #b8b8b8; border-radius: 2px; background: #fff; display: flex; align-items: center; justify-content: center; }
.badge-art { width: 130px; height: 130px; background: url(assets/badges.svg) no-repeat calc(var(--c) * -130px) calc(var(--r) * -130px); background-size: 260px 1040px; }
.badge-name { margin-top: 1px; font-size: 14px; color: var(--link, #0074bd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* top bar search suggestions: Search "x" in Catalog / People / Games / Groups (reference at this site's scale) */
.search { position: relative; }
.search-menu { position: absolute; top: 100%; left: 0; width: 100%; box-sizing: border-box; margin-top: 2px; padding: 3px 0 4px; background: #fff;
  border-radius: 0 0 3px 3px; box-shadow: 0 2px 8px rgba(0,0,0,.28); z-index: 50; }
.search-menu[hidden] { display: none; }
.search-opt { height: 33px; line-height: 33px; padding: 0 16px; font-size: 18px; color: #191919; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.search-opt.on { background: #f2f2f2; }

/* search results (people, groups): reference proportions scaled by 1.28 */
.sr-page { width: 949px; max-width: 100%; margin: 0 auto 40px; }
.sr-title { font-size: 23px; font-weight: 700; margin: 0 0 13px; }
.sr-form { display: flex; height: 37px; box-sizing: border-box; background: #fff; border: 1px solid #b8b8b8; }
.sr-input { flex: 1; min-width: 0; border: 0; outline: none; padding: 0 12px; font-family: inherit; font-size: 17px; background: transparent; }
.sr-go { display: flex; align-items: center; border: 0; background: transparent; padding: 0 6px; }
.sr-count { font-size: 14px; color: #757575; margin: 9px 0 11px; }
.sr-empty { margin-top: 15px; height: 51px; line-height: 51px; text-align: center; font-size: 17px; color: #393b3d; background: #ebebeb; }
.sr-people { display: flex; flex-wrap: wrap; gap: 22px; }
.sr-person { box-sizing: border-box; width: 302px; height: 174px; display: flex; flex-direction: column; background: #fff; border: 1px solid #c3c3c3; }
.sr-person-top { flex: 1; display: flex; gap: 20px; padding: 13px 13px 0; color: inherit; min-width: 0; }
.sr-person-top:hover { text-decoration: none; }
.sr-person-top > span:last-child { min-width: 0; }
.sr-head .headshot { display: block; width: 92px; height: 92px; border-radius: 50%; border: 1px solid #c3c3c3; background: #fff; }
.sr-name { display: block; margin-top: 2px; font-size: 18px; color: #191919; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-status { display: block; margin-top: 2px; font-size: 15px; color: #b8b8b8; }
.sr-person-foot { padding: 0 8px 8px; }
.sr-btn { box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 36px; border: 1px solid #c3c3c3; border-radius: 3px;
  background: #fff; color: #393b3d; font-size: 19px; }
.sr-btn:hover { background: #f5f5f5; text-decoration: none; }
@media (max-width: 860px) { .sr-page { box-sizing: border-box; padding: 0 16px; } .sr-person { width: 100%; } }

/* Badges page: reference proportions scaled by 1.28 */
.bdg-page { width: 972px; max-width: 100%; margin: -8px auto 40px; font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif; color: #191919; }
.bdg-title { font-size: 28px; font-weight: 700; line-height: 36px; margin: 0 0 5px 13px; }
.bdg-cat { font-size: 28px; font-weight: 400; line-height: 36px; margin: 13px 0 2px; }
.bdg-row { box-sizing: border-box; display: flex; gap: 11px; min-height: 106px; padding: 15px 0 18px 4px; border-bottom: 1px solid #d6d6d6; transition: background 1.2s; }
.bdg-row:last-child, .bdg-row:has(+ .bdg-cat) { border-bottom: 0; }
.bdg-row.flash { background: #fff3c4; transition: none; }
.bdg-art { flex: none; width: 82px; height: 82px; margin-top: -6px; background: url(assets/badges.svg) no-repeat calc(var(--c) * -82px) calc(var(--r) * -82px); background-size: 164px 656px; }
.bdg-name { font-size: 14px; font-weight: 700; line-height: 18px; margin-top: 2px; }
.bdg-soon { margin-left: 6px; font-size: 12px; font-weight: 400; color: #757575; border: 1px solid #c3c3c3; border-radius: 2px; padding: 0 5px; }
.bdg-desc { margin: 13px 30px 0 13px; font-size: 14px; line-height: 21px; color: #393b3d; }
.badge-tile { color: inherit; }
.badge-tile:hover { text-decoration: none; }
.badge-tile:hover .badge-box { border-color: #8a8a8a; }
@media (max-width: 860px) { .bdg-page { box-sizing: border-box; padding: 0 16px; margin-top: 0; } }

/* ---------- friends, follows, messages, chat ---------- */
.btn.red { background: #e2231a; }
.btn.red:hover { background: #b81b14; }
.btn.outline.blue { color: var(--link); border-color: var(--link); }
.btn.outline.danger { color: #e2231a; border-color: #e2231a; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fr-sub { padding: 10px 15px 4px; font-size: 14px; font-weight: 700; color: #757575; background: #fafafa; border-bottom: 1px solid #eee; }
.msg { cursor: pointer; }
.msg.unread { font-weight: 700; }

/* another player's profile header: Message + friend button on the right, follow in the "..." menu (reference x1.28) */
.profile-actions { align-self: flex-end; display: flex; gap: 6px; margin: 0 0 10px auto; }
.profile-actions .btn { box-sizing: border-box; min-width: 119px; height: 35px; padding: 0 14px; font-size: 18px; font-weight: 400; white-space: nowrap; }
.more-menu { position: absolute; top: 40px; right: 14px; z-index: 5; min-width: 140px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); padding: 4px 0; }
.more-menu[hidden] { display: none; }
.more-menu .btn.menu-item { display: block; width: 100%; text-align: left; background: #fff; color: #191919; font-weight: 400; font-size: 15px; border-radius: 0; padding: 8px 14px; }
.more-menu .btn.menu-item:hover { background: #f2f2f2; }
.sec-row { display: flex; justify-content: space-between; align-items: center; }
.see-all { background: var(--link); color: #fff; font-size: 14px; padding: 2px 25px; border-radius: 2px; text-decoration: underline; }
.see-all:hover { background: var(--blue); }
.friend-strip { display: flex; gap: 6px; overflow-x: auto; padding: 14px 18px 10px; }
.fs-friend { flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--link); font-size: 15px; }
.fs-friend:hover { text-decoration: none; }
.fs-friend .headshot { width: 88px; height: 88px; border-radius: 50%; border: 1px solid #c3c3c3; background: #fff; }
.fs-friend span { max-width: 104px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.collections { display: flex; flex-wrap: wrap; gap: 12px; padding: 20px 21px; }
.coll-item { position: relative; width: 133px; height: 133px; border: 1px solid #c3c3c3; display: flex; align-items: center; justify-content: center; background: #fff; }
@media (max-width: 860px) { .profile-head { flex-wrap: wrap; } .profile-actions { margin: 10px 0 0; } }

/* search cards: the friend button is a <button> */
button.sr-btn { width: 100%; font-family: inherit; cursor: pointer; }
.sr-person-foot .btn.sr-btn { color: #393b3d; font-weight: 400; padding: 0; }

/* chat panel */
.chat-head { display: flex; align-items: center; gap: 6px; }
.chat-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e2231a; color: #fff; font-size: 12px; font-weight: 700; }
button.chat-friend { width: 100%; background: #fff; border: 0; border-bottom: 1px solid #eee; font-family: inherit; text-align: left; cursor: pointer; color: inherit; }
button.chat-friend:hover:not(:disabled) { background: #f5f5f5; }
button.chat-friend:disabled { cursor: default; opacity: .55; }
.chat-pic .headshot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #ddd; }
.chat-convo { display: flex; flex-direction: column; height: 340px; }
.chat-convo-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid #eee; font-size: 15px; }
.chat-back { border: 0; background: none; font-size: 24px; line-height: 1; padding: 0 6px; cursor: pointer; color: #393b3d; }
.chat-log { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.chat-msg { position: relative; max-width: 80%; padding: 6px 9px; border-radius: 10px; font-size: 14px; line-height: 1.35; word-wrap: break-word; white-space: pre-wrap; }
.chat-msg.mine { align-self: flex-end; background: var(--link); color: #fff; border-bottom-right-radius: 3px; }
.chat-msg.theirs { align-self: flex-start; background: #eee; color: #191919; border-bottom-left-radius: 3px; }
.chat-report { display: none; position: absolute; top: -9px; right: -6px; border: 1px solid #ccc; background: #fff; border-radius: 3px; font-size: 11px; padding: 0 4px; color: #757575; cursor: pointer; }
.chat-msg.theirs:hover .chat-report, .chat-report:focus { display: block; }
.chat-note { color: #757575; font-size: 13px; text-align: center; padding: 6px; }
.chat-form { display: flex; gap: 6px; padding: 6px; border-top: 1px solid #eee; }
.chat-form input { flex: 1; min-width: 0; border: 1px solid #ccc; border-radius: 3px; padding: 6px 8px; font-family: inherit; font-size: 14px; }
.chat-form .btn { font-size: 14px; padding: 5px 12px; }

/* admin: reports */
.adm-report { padding: 12px 15px; border-bottom: 1px solid #eee; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.adm-stat { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); padding: 8px 10px; text-align: center; }
.adm-stat b { display: block; font-size: 20px; }
.adm-stat span { font-size: 13px; color: #757575; }
.adm-tabs { flex-wrap: wrap; }
.adm-tabs .tab { flex: 1 0 auto; padding: 12px 14px; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px; align-items: start; }
.adm-grid .card { margin: 0; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-actions p { flex-basis: 100%; margin: 4px 0 0; }
.adm-report-text { margin-top: 4px; padding: 8px 10px; background: #f5f5f5; white-space: pre-wrap; word-wrap: break-word; }

/* ---------- item page (resale market: server/market.js) ---------- */
.it-wrap { display: flex; justify-content: center; gap: 19px; align-items: flex-start; }
.it-main { width: 950px; max-width: 100%; min-width: 0; }
.it-card { position: relative; display: flex; gap: 14px; padding: 14px 15px 21px 13px; }
.it-dots { position: absolute; top: 6px; right: 15px; background: none; border: 0; padding: 0 4px; font-size: 22px; line-height: 1; color: #393b3d; letter-spacing: 1px; }
.it-menu { position: absolute; top: 34px; right: 15px; z-index: 6; min-width: 132px; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.3); padding: 6px 0; }
.it-menu[hidden] { display: none; }
.it-mi { display: block; width: 100%; padding: 6px 12px; background: none; border: 0; text-align: left; font-size: 17px; color: #191919; white-space: nowrap; }
.it-mi:hover { background: #f2f2f2; text-decoration: none; }

.it-media { position: relative; width: 420px; flex-shrink: 0; }
.it-new { position: absolute; top: 20px; right: 0; z-index: 2; background: #e2231a; color: #fff; font-size: 15px; font-weight: 700; padding: 3px 7px; border-radius: 3px; }
.it-pic { position: relative; height: 410px; display: flex; align-items: center; justify-content: center; }
.it-pic > img { width: 400px; height: 400px; object-fit: contain; }
.it-3d { position: absolute; inset: 0; }
.it-3d canvas { display: block; cursor: grab; }
.it-view-btns { position: absolute; top: 377px; right: 10px; display: flex; gap: 10px; z-index: 2; }
.it-vbtn { height: 31px; padding: 0 14px; background: #fff; border: 1px solid #c3c3c3; border-radius: 4px; font-size: 14px; font-weight: 700; color: #191919; }
.it-vbtn:hover { background: #f5f5f5; }
.it-limited { display: block; height: 18px; margin: 0 0 0 2px; }
.it-fav { display: flex; align-items: center; gap: 6px; margin-top: 7px; background: none; border: 0; padding: 0 2px; color: #f6b702; font-size: 15px; font-weight: 700; }
.it-fav svg { width: 25px; height: 25px; fill: none; stroke: #f6b702; }
.it-fav.on svg { fill: #f6b702; }
.it-fav:disabled { cursor: default; }

.it-info { flex: 1; min-width: 0; padding-right: 0; }
.it-title { margin: 17px 40px 0 0; font-size: 34px; font-weight: 700; line-height: 1.1; color: #191919; }
.it-by { display: flex; align-items: center; flex-wrap: wrap; padding: 4px 0 12px; border-bottom: 1px solid #e3e3e3; font-size: 16px; color: #393b3d; }
.it-by a { margin-left: 5px; color: var(--blue); }
.verified { width: 16px; height: 16px; margin-left: 4px; flex-shrink: 0; vertical-align: middle; }
.pname .verified { width: .75em; height: .75em; margin-left: .35em; position: relative; top: -.05em; }
.it-who .verified { margin: 0 2px 0 4px; position: relative; top: -2px; }
.it-owned { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; color: var(--green); font-size: 15px; }
.it-owned i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--green); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; }
.it-rows { padding-top: 13px; }
.it-row { display: flex; align-items: flex-start; font-size: 17px; line-height: 22px; padding: 6px 0; color: #191919; }
.it-lbl { width: 160px; flex-shrink: 0; color: #6b6b6b; }
.it-val { flex: 1; min-width: 0; }
.it-val a { color: var(--blue); }
.it-desc { line-height: 22px; }
.it-price-row { align-items: flex-start; padding: 0 0 12px; }
.it-price-row .it-lbl { padding-top: 4px; }
.it-price { display: flex; align-items: center; gap: 10px; color: var(--green); font-size: 21px; line-height: 28px; }
.it-price b { font-weight: 700; }
.it-more { margin-top: 3px; font-size: 12px; color: #191919; }
.it-buy { width: 180px; height: 53px; padding: 0; border-radius: 4px; font-size: 21px; font-weight: 700; flex-shrink: 0; }


.it-h2 { margin: 22px 0 8px; font-size: 21px; font-weight: 700; color: #191919; }
.it-panel { padding: 30px 15px; text-align: center; }
.it-chart { padding: 18px 15px 22px; }
.pc-wrap { position: relative; }
.pc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pc-grid { stroke: #e8e8e8; stroke-width: 1; }
.pc-base { stroke: #4d4d4d; stroke-width: 1; }
.pc-lbl { fill: #6b6b6b; font-size: 12px; }
.pc-line { fill: none; stroke: #00a2ff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pc-dot { fill: #00a2ff; }
.pc-dot.on { r: 6; }
.pc-cross { stroke: #b8b8b8; stroke-width: 1; stroke-dasharray: 3 3; }
.pc-tip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); background: #fff; border: 1px solid #ddd; box-shadow: 0 2px 6px rgba(0,0,0,.15);
  padding: 5px 9px; border-radius: 3px; font-size: 12px; white-space: nowrap; pointer-events: none; text-align: center; }
.pc-tip b { display: block; color: #191919; font-size: 14px; }
.pc-tip span { color: #757575; }
.pc-empty { padding: 40px 0; text-align: center; }
.pc-stats { display: flex; margin-top: 52px; text-align: center; }
.pc-stats > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.pc-stats span:first-child { color: #b8b8b8; font-size: 17px; }
.pc-stats b { font-size: 17px; font-weight: 700; color: #191919; }
.it-cur { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 19px; font-weight: 700; }

.it-list { position: relative; padding: 0 15px; }
.it-list .it-mrow:nth-child(n+11) { display: none; }
.it-list.all .it-mrow { display: flex; }
.it-mrow { display: flex; align-items: center; height: 85px; border-bottom: 1px solid #e3e3e3; }
.it-mrow:last-of-type { border-bottom: 0; }
.it-av { width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: #d8dadc; }
.it-av img { width: 60px; height: 60px; display: block; }
.it-who { flex: 1; min-width: 0; margin-left: 24px; font-size: 13px; color: #191919; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-who a { font-size: 17px; color: var(--blue); }
.it-lprice { display: inline-flex; align-items: center; gap: 3px; color: var(--green); font-size: 15px; font-weight: 700; }
.it-rbtn { width: 90px; height: 32px; margin-left: 12px; background: #fff; border: 1px solid #c3c3c3; border-radius: 3px; font-size: 17px; color: #393b3d; }
.it-rbtn:hover:not(:disabled) { background: #f5f5f5; }
.it-rbtn:disabled { opacity: .5; cursor: default; }
.it-since { color: var(--green); font-size: 15px; }
.it-empty { padding: 26px 0; color: #757575; }
.it-see-more { display: block; margin: 0 auto; transform: translateY(1px); background: #fff; border: 1px solid #c3c3c3; border-bottom: 0; font-size: 12px; font-weight: 700; color: #191919; padding: 1px 4px; }

.it-recs { display: flex; gap: 7px; overflow-x: auto; padding: 0 2px 4px; }
.it-rec { width: 110px; flex-shrink: 0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); padding-bottom: 5px; color: #191919; }
.it-rec:hover { text-decoration: none; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
.it-rec-pic { width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; }
.it-rec-pic img { width: 110px; height: 110px; object-fit: contain; }
.it-rec-name { margin: 4px 4px 0; font-size: 15px; line-height: 15px; height: 30px; color: var(--blue); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.it-rec-by { display: flex; align-items: center; margin: 4px 4px 0; font-size: 10px; color: #6b6b6b; }
.it-rec-by span { margin-left: 3px; color: var(--blue); }
.it-rec-by .verified { width: 11px; height: 11px; margin-left: 2px; }
.it-rec-price { display: flex; align-items: center; gap: 2px; margin: 2px 4px 0; color: var(--green); font-size: 13px; font-weight: 700; }

@media (max-width: 860px) {
  .it-card { flex-wrap: wrap; }
  .it-media { width: 100%; }
  .it-view-btns { top: auto; bottom: 0; }
  .it-pic { height: 320px; }
  .it-pic > img { width: 300px; height: 300px; }
  .it-buy { width: 120px; }
  .pc-stats { flex-wrap: wrap; gap: 12px; }
}


/* moderation notice a banned player sees after logging in (app.js pages.banned); it replaces every page, inside the usual top bar and sidebar */
body.banned-mode .chat, body.banned-mode .footer { display: none; }
.ban-card { width: 716px; max-width: calc(100% - 32px); margin: 35px auto; padding: 12px 13px 26px; background: var(--card); color: #8a8a8a; font-size: 14px; font-weight: 300; }
.ban-card h1 { margin: 8px 0 22px; font-size: 26px; font-weight: 400; color: #393b3d; }
.ban-card p { margin: 0 0 13px; line-height: 1.45; }
.ban-card b { color: #393b3d; font-weight: 700; }
.ban-foot { text-align: center; margin-top: 24px; }
.ban-foot .btn { width: 81px; height: 33px; padding: 0; font-size: 14px; font-weight: 400; }

/* ---------- landing / sign in page (app.js pages.signup + pages.login) ----------
   Shown to logged-out visitors in place of the whole site: no top bar, sidebar or footer, a looping background video
   under a blue tint, and the sign up / log in panel in the middle. */
body.landing-mode .topbar, body.landing-mode .sidebar, body.landing-mode .chat, body.landing-mode .footer { display: none; }
body.landing-mode { background: #0d1f4d; }
body.landing-mode .content { margin-left: 0; padding-top: 0; }
body.landing-mode #view { padding: 0; }
.lp-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; display: none; pointer-events: none; }
body.landing-mode .lp-video { display: block; }
.lp { position: relative; min-height: 100vh; display: flex; flex-direction: column; color: #fff;
  font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif; }
.lp::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(12, 38, 105, .74); }
.lp a { color: #3da5ff; }
.lp-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
.lp-logo { width: 320px; max-width: 80vw; height: auto; display: block; margin-bottom: 4px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); }
.lp h1, .lp h2, .lp h3 { margin: 0; font-weight: 700; text-align: center; text-shadow: 0 2px 4px rgba(0, 0, 0, .55); }
.lp h1 { font-size: 40px; line-height: 50px; }
.lp h2 { font-size: 28px; line-height: 38px; }
.lp h3 { font-size: 25px; line-height: 32px; margin-top: 16px; }
.lp-row { display: flex; align-items: flex-start; justify-content: center; gap: 58px; margin-top: 34px; }
.lp-pic img { display: block; width: 360px; height: 236px; object-fit: cover; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); outline: 1px solid rgba(255, 255, 255, .25); }
.lp-panel { width: 273px; padding: 13px 16px 15px; background: rgba(30, 55, 115, .55); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3); text-align: left; }
.lp-tabs { font-size: 18px; line-height: 22px; margin-bottom: 9px; }
.lp-tabs b { font-weight: 700; }
.lp-tabs span { margin: 0 3px; color: #fff; }
.lp-tabs a { font-weight: 400; }
.lp-lbl { display: block; font-size: 12px; font-weight: 700; line-height: 15px; margin-top: 8px; }
.lp-lbl input { display: block; margin-top: 4px; }
.lp-panel input[type=text], .lp-panel input:not([type]), .lp-panel input[type=password], .lp-bday select {
  width: 100%; height: 24px; padding: 2px 6px; border: 1px solid #b8b8b8; border-radius: 2px; background: #fff; color: #191919;
  font-family: inherit; font-size: 13px; }
.lp-bday { display: flex; gap: 5px; margin-top: 4px; }
.lp-bday select { padding: 1px 3px; font-size: 12px; }
.lp-bday #suMonth { flex: 92; } .lp-bday #suDay { flex: 64; } .lp-bday #suYear { flex: 74; }
.lp-hint { margin: 3px 0 0; font-size: 10px; line-height: 13px; color: #b9c6e4; }
.lp-gender { display: flex; gap: 14px; margin-top: 5px; font-size: 12px; }
.lp-gender label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.lp-gender input { margin: 0; width: 12px; height: 12px; }
.lp-btn { display: block; width: 100%; height: 37px; margin-top: 11px; border: 1px solid #0a7a2a; border-radius: 2px; color: #fff;
  background: linear-gradient(#22b33a, #0b8e24); font-family: inherit; font-size: 16px; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.lp-btn:hover { background: linear-gradient(#2ac443, #0f9d2a); }
.lp-terms { margin-top: 6px; text-align: center; }
.lp-foot { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 44px; padding: 6px 16px;
  background: rgba(8, 24, 64, .85); border-top: 1px solid rgba(255, 255, 255, .08); }
.lp-links { display: flex; gap: 6px; font-size: 11px; color: #8796bd; white-space: nowrap; padding-right: 14px; border-right: 1px solid rgba(255, 255, 255, .2); }
.lp-links a, .lp-foot p a { color: #c9d4ee; }
.lp-foot p { margin: 0; max-width: 850px; font-size: 9.5px; line-height: 13px; color: #a6b3d4; }
.lp-foot p a { text-decoration: underline; }
@media (max-width: 760px) {
  .lp-row { flex-direction: column; align-items: center; gap: 24px; }
  .lp-pic img { width: min(360px, calc(100vw - 32px)); height: auto; }
  .lp h1 { font-size: 30px; line-height: 38px; } .lp h2 { font-size: 21px; line-height: 28px; }
  .lp-foot { flex-direction: column; text-align: center; }
  .lp-links { border-right: 0; padding-right: 0; }
}

/* the admin Catalog tab's Edit dialog */
.adm-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14px; }

/* ---------- Create page (My Creations, Group Creations, Library, Stats) ---------- */
.cr-card { min-height: 460px; }
.cr-layout { display: flex; padding: 22px 0 22px 8px; }
.cr-side { width: 148px; flex-shrink: 0; border-right: 1px solid #ddd; display: flex; flex-direction: column; align-self: flex-start; }
.cr-side a, .cr-side .off { padding: 5px 10px; font-size: 17px; color: #333; }
.cr-side .off { color: #bbb; }
.cr-side a:hover { text-decoration: none; background: #f2f2f2; }
.cr-side a.on { background: #e3e3e3; font-weight: 700; color: #191919; }
.cr-main { flex: 1; min-width: 0; padding: 0 22px 0 12px; }
.cr-title { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.cr-title h1 { font-size: 29px; font-weight: 500; margin: 0; }
.cr-title h2 { font-size: 23px; font-weight: 500; margin: 0; }
.cr-title .btn { margin-left: auto; }
.cr-help { color: #c3c3c3; font-weight: 700; font-size: 15px; }
.cr-form { padding: 6px 22px 16px; font-size: 15px; }
.cr-form p { margin: 6px 0 12px; }
.cr-field { display: flex; align-items: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; }
.cr-field label { min-width: 112px; }
.cr-field input[type=file] { max-width: 100%; min-width: 0; }
.cr-input { border: 1px solid #a8a8a8; border-radius: 2px; padding: 3px 6px; font: inherit; width: 372px; max-width: 100%; }
.cr-upload { margin-top: 8px; padding: 6px 16px; border: 1px solid #1c7c2c; }
.cr-row { display: flex; gap: 18px; align-items: flex-start; padding: 12px 22px; border-bottom: 1px solid #eee; max-width: 610px; }
.cr-thumb { width: 70px; height: 70px; flex-shrink: 0; display: block; }
.cr-thumb img, .cr-thumb .content-deleted { width: 70px; height: 70px; object-fit: scale-down; }
.cr-gthumb { width: 70px; height: 70px; border-radius: 2px; }
.cr-info { flex: 1; min-width: 0; font-size: 15px; }
.cr-sub { color: #757575; font-size: 14px; margin-top: 2px; }
.cr-lbl { color: #a5a5a5; }
.cr-ok { color: var(--green); }
.cr-bad { color: #c4281c; }
.cr-wait { color: #d07a1f; }
.cr-empty { color: #757575; padding: 6px 0; }
.cr-cog-wrap { position: relative; }
.cr-cog { display: flex; align-items: center; gap: 3px; background: #eaeaea; border: 1px solid #a7a7a7; border-radius: 2px; padding: 2px 5px; color: #555; font-size: 10px; }
.cr-cog:hover { background: #dedede; }
.cr-menu { position: absolute; right: 0; top: calc(100% + 2px); z-index: 5; background: #e8e8e8; border: 1px solid #a7a7a7; box-shadow: 0 1px 3px #0003; min-width: 140px; }
.cr-menu a { display: block; padding: 3px 12px; color: #191919; font-size: 14px; }
.cr-menu a:hover { text-decoration: none; background: #d6d6d6; }
.cr-group { margin-left: auto; font-size: 15px; }
.cr-group .input { width: auto; display: inline-block; }
.content-deleted { display: flex; align-items: center; justify-content: center; background: #f2f2f2; border: 1px dashed #c8c8c8; color: #999; font-size: 11px; text-align: center; box-sizing: border-box; }
/* user ads */
.ad-h2 { font-size: 26px; font-weight: 500; margin: 6px 0; }
.ad-templates { margin: 0 0 10px; padding-left: 26px; }
.ad-templates li { margin-bottom: 6px; }
.ad-templates .btn { padding: 3px 26px; font-size: 15px; }
.ad-field label { min-width: 140px; font-weight: 700; }
.ad-note { margin: 4px 0 0; }
.ad-row { max-width: none; }
.ad-thumb { width: 150px; flex-shrink: 0; display: flex; justify-content: center; }
.ad-thumb img { border: 1px solid #ddd; }
.ad-actions { display: flex; flex-direction: column; gap: 6px; }
.ad-actions .btn { padding: 4px 14px; font-size: 14px; }
.ad-box { margin: 0 auto 14px; width: fit-content; max-width: 100%; }
.ad-box img, .ad-col .ad-user img { display: block; max-width: 100%; height: auto; }
.ad-col .ad-user { display: block; }
/* configure */
.cf-card { padding: 14px 18px 24px; font-size: 15px; }
.cf-h1 { font-size: 30px; font-weight: 500; margin: 0; }
.cf-col { width: 464px; max-width: 100%; margin: 6px auto 0; }
.cf-lbl { display: block; font-weight: 700; font-size: 14px; margin: 6px 0 2px; }
.cf-wide { width: 100%; box-sizing: border-box; }
.cf-pic { border: 1px solid #a8a8a8; margin: 18px 0 14px; display: flex; justify-content: center; padding: 10px; }
.cf-pic img, .cf-pic .content-deleted { width: 400px; height: 400px; max-width: 100%; object-fit: scale-down; }
.cf-desc { height: 100px; border: 1px solid #a8a8a8; border-radius: 2px; padding: 4px; font: inherit; resize: vertical; }
.cf-btns { display: flex; gap: 20px; justify-content: center; margin: 14px 0 6px; }
.cf-btns .btn { padding: 5px 16px; font-size: 16px; }
.cf-cancel { background: #5a5a5a; }
.cf-cancel:hover { background: #444; text-decoration: none; }
.cf-sec { font-size: 26px; font-weight: 500; margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid #ccc; }
.cf-sec + p { margin: 6px 6px 10px; }
.cf-check { display: inline-flex; align-items: center; gap: 6px; margin: 2px 6px 8px; }
.cf-indent { margin-left: 80px; }
.cf-prices { display: flex; flex-wrap: wrap; gap: 20px 60px; justify-content: space-around; margin: 10px 0 6px; }
.cf-price { flex: 1 1 340px; max-width: 420px; }
.cf-prow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.cf-prow > b { width: 128px; text-align: right; }
.cf-earn > span:first-child { width: 128px; text-align: right; }
.cf-pin { width: 180px; border: 1px solid #ccc; padding: 3px 5px; font: inherit; }
.cf-pin:disabled { background: #f4f4f4; }
.cf-note { flex-basis: 100%; font-size: 14px; margin-top: -6px; }
.cf-genres { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 2px 10px; padding: 0 0 0 80px; }
.cf-genres label { display: flex; align-items: center; gap: 4px; }
.cf-gico { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 2px; color: #fff; font: 700 8px/1 Arial, sans-serif; font-style: normal; }
/* stats */
.st-layout { display: flex; gap: 20px; padding: 10px 10px 30px 8px; }
.st-side { width: 148px; flex-shrink: 0; font-size: 15px; }
.st-side label { display: block; margin-bottom: 8px; }
.st-side .input { width: 100%; padding: 2px; font-size: 14px; }
.st-nav { margin-top: 18px; border-right: 1px solid #ddd; }
.st-nav a { display: block; padding: 6px 10px; color: #191919; font-size: 17px; }
.st-nav a.on { background: #e3e3e3; font-weight: 700; }
.st-nav a:hover { text-decoration: none; background: #f0f0f0; }
.st-main { flex: 1; min-width: 0; }
.st-main h2 { font-size: 29px; font-weight: 500; margin: 6px 0 0; }
.st-sub { color: #757575; font-size: 14px; margin-bottom: 14px; }
.st-nums td { padding: 2px 0; font-size: 14px; color: #555; }
.st-nums td:last-child { padding-left: 40px; font-weight: 700; color: #191919; }
.st-tbl { margin-top: 16px; max-width: 560px; }
.st-none { margin-top: 24px; }
.st-foot { color: #757575; font-size: 12px; margin-top: 22px; }
/* library */
.lib { padding: 10px 12px 20px; }
.lib-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 18px; }
.lib-head h1 { font-size: 26px; font-weight: 500; margin: 0; }
.lib-count { color: #757575; font-size: 14px; }
.lib-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lib-search { display: flex; }
.lib-search .input { width: 170px; border-radius: 3px 0 0 3px; }
.lib-search .btn { border-radius: 0 3px 3px 0; padding: 6px 12px; font-size: 14px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 12px; }
.lib-card { position: relative; display: block; border: 1px solid #ccc; border-radius: 2px; padding: 7px 7px 8px; color: inherit; background: #fff; }
.lib-card:hover { text-decoration: none; border-color: var(--link); }
.lib-pic { position: relative; aspect-ratio: 1; background: #f3f3f3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lib-pic img, .lib-pic .content-deleted { width: 100%; height: 100%; object-fit: scale-down; }
.lib-speaker { width: 85%; height: 85%; }
.lib-new { position: absolute; right: 4px; top: 4px; background: #f68802; color: #fff; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 2px; }
.lib-name { font-weight: 700; font-size: 14px; margin-top: 6px; line-height: 1.2; max-height: 34px; overflow: hidden; }
.lib-price { font-size: 13px; color: #757575; margin-top: 4px; }
.lib-tip { display: none; position: absolute; left: 6px; top: calc(100% - 4px); z-index: 4; background: #fff; border: 1px solid #ccc; box-shadow: 0 2px 4px #0002; padding: 6px 9px; font-size: 12px; white-space: nowrap; }
.lib-tip span { font-weight: 700; color: #555; }
.lib-card:hover .lib-tip { display: block; }
.lib-pages { grid-column: 1 / -1; display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 10px; }
/* item page: Tix price and comments */
.money.tix { color: #a37b00; }
.it-tix { margin-top: 4px; }
.it-buys { display: flex; flex-direction: column; gap: 6px; }
.it-buy-tix { background: #c69c00; }
.it-buy-tix:hover { background: #a37f00; }
.it-comments { padding: 14px 16px; }
.it-cform { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.it-cform textarea { flex: 1; resize: vertical; }
.it-comment { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #eee; }
.it-ctext { margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.it-cdel { background: none; border: 0; color: #c4281c; font-size: 12px; margin-left: 8px; }
@media (max-width: 760px) {
  .cr-layout, .st-layout { flex-direction: column; padding-left: 12px; }
  .cr-side { width: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid #ddd; }
  .cr-main { padding: 12px 0 0; }
  .st-side { width: auto; }
  .cf-genres { grid-template-columns: repeat(2, 1fr); padding-left: 0; }
  .cf-indent { margin-left: 6px; }
  .cr-card .oldtabs { overflow-x: auto; }
  .cr-form { padding: 6px 0 16px; }
  .cr-card .oldtab { font-size: 14px; padding: 7px 8px; white-space: nowrap; }
}