/* ===== shared shrine chrome ===== */
.shrine-page .content-wrapper { max-width: 1100px; margin: 0 auto; }
.shrine-frame { border: 1px solid rgba(230,230,235,.7); background: rgba(0,0,0,.55); }
.shrine-frame > .shrine-frame { background: rgba(0,0,0,.35); }
.shrine-pad { padding: 8px 10px; }
.shrine-h { margin: 0; font: 700 15px/1.2 Arial, Helvetica, sans-serif; color: #fff; text-align: center; }
.shrine-sub { margin: 4px 0 0; font: 11px/1.35 Arial, Helvetica, sans-serif; color: #cfcfcf; text-align: center; }
.shrine-titlebar { display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 8px; border-bottom:1px solid rgba(230,230,235,.7); }
.shrine-titlebar img { width:36px; height:36px; object-fit:contain; image-rendering:auto; }
.shrine-titlebar .pixel-title { font:700 28px/1 "Courier New", monospace; letter-spacing:.03em; color:#d7d7d7; text-shadow:2px 2px 0 #000; }
.shrine-stack { display:grid; gap:8px; }
.mc-grid { display:grid; grid-template-columns:210px minmax(0,1fr); gap:8px; }
.mc-left, .mc-right { display:grid; gap:8px; align-content:start; }
.mc-list a { display:block; color:#6ea8ff; font:13px/1.25 Arial, Helvetica, sans-serif; margin:3px 0; }
.mc-list span { display:block; color:#bdbdbd; font:11px/1.3 Arial, Helvetica, sans-serif; }
.mc-empty { min-height:140px; border:1px solid rgba(230,230,235,.45); background:#000; }
.mc-skin-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding:8px; }
.mc-skin-row img { width:96px; height:auto; image-rendering:pixelated; cursor:zoom-in; }
.mc-skin-cap { text-align:center; font:13px Arial, Helvetica, sans-serif; color:#fff; padding-bottom:8px; }
.mc-skin-cap a { color:#6ea8ff; }
.mc-gallery { display:grid; grid-template-columns:170px minmax(0,1fr); gap:8px; padding:8px; }
.mc-albums button { display:block; width:100%; text-align:left; margin:0 0 4px; padding:4px 6px; color:#6ea8ff; background:transparent; border:0; cursor:pointer; font:13px/1.3 Arial, Helvetica, sans-serif; text-decoration:underline; }
.mc-albums button.is-active { color:#fff; }
.mc-viewer { display:grid; gap:8px; }
.mc-viewer-main { min-height:280px; background:#000; border:1px solid rgba(230,230,235,.45); display:flex; align-items:center; justify-content:center; }
.mc-viewer-main img { max-width:100%; max-height:420px; object-fit:contain; cursor:zoom-in; }
.mc-thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:6px; max-height:180px; overflow:auto; }
.mc-thumbs img { width:100%; aspect-ratio:1; object-fit:cover; cursor:pointer; border:1px solid transparent; }
.mc-thumbs img.is-active { border-color:#6ea8ff; }
.mc-pager { display:flex; justify-content:center; gap:8px; align-items:center; color:#fff; font:12px Arial,sans-serif; }
.mc-pager button { background:#111; border:1px solid #666; color:#fff; padding:2px 8px; cursor:pointer; }
@media(max-width:820px){ .mc-grid,.mc-gallery{grid-template-columns:1fr} }

/* ===== TF2 — one beveled shell; forest on body (no extra div) ===== */
.tf2-body {
  background-color: #0b0c10;
  background-image: url("../banners/display/shrine-forest.JPG");
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.tf2-body #stars-canvas { opacity: .2; }
.tf2-shell {
  max-width: 880px;
  margin: 0 auto;
  color: #ddd;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg-panel, #141210);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.tf2-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--bg-panel-dark, #100e0c);
  border-bottom: 2px solid var(--bevel-dark);
  box-shadow: inset 0 1px 0 var(--bevel-light);
}
.tf2-topbar img { height: 34px; width: auto; }
.tf2-topbar h1 {
  margin: 0;
  padding: 0 6px;
  font: 800 30px/1 "Arial Black", Impact, Arial, sans-serif;
  letter-spacing: .02em;
  color: #d8c3a0;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000;
}
.tf2-copy {
  padding: 10px 12px;
  font: 13px/1.45 Arial, sans-serif;
  color: #d7d0c5;
  border-bottom: 1px solid var(--bevel-dark);
}
.tf2-mains {
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--bevel-dark);
}
.tf2-mains .label { color: #e0872f; font: 700 14px Arial, sans-serif; margin-bottom: 6px; }
.tf2-mains img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  object-fit: cover;
  background: #111;
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.tf2-cols { display: grid; grid-template-columns: 1fr 1.2fr; }
.tf2-left { border-right: 1px solid var(--bevel-dark); }
.tf2-box {
  padding: 10px 12px;
  border-bottom: 1px solid var(--bevel-dark);
}
.tf2-box h2 {
  margin: 0 0 8px;
  font: 700 12px/1.2 Arial, sans-serif;
  color: #efe6d6;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tf2-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px;
  font: 11px/1.45 "Courier New", monospace;
  color: #cfc3b0;
  background: var(--bg-panel-dark, #100e0c);
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}
.tf2-settings code { display: block; color: #9fd0ff; }
.tf2-hud { margin: 8px 0 0; text-align: right; }
.tf2-hud a { color: #d44; font-weight: 700; text-decoration: none; }
.tf2-sprays { display: flex; gap: 8px; flex-wrap: wrap; }
.tf2-sprays img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  cursor: zoom-in;
  background: #0d0b09;
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.tf2-loadout-stage img {
  width: 100%;
  display: block;
  cursor: zoom-in;
  background: #0d0b09;
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}
.tf2-loadout-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font: 12px Arial, sans-serif;
}
.tf2-loadout-meta strong { color: #efe6d6; }
.tf2-pager { display: inline-flex; gap: 6px; align-items: center; }
.tf2-pager button {
  background: var(--bg-panel-dark, #100e0c);
  color: #efe6d6;
  padding: 1px 8px;
  cursor: pointer;
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.tf2-band {
  text-align: center;
  padding: 7px 10px;
  font: 700 13px Arial, sans-serif;
  color: #efe6d6;
  letter-spacing: .05em;
  background: var(--bg-panel-dark, #100e0c);
  border-top: 2px solid var(--bevel-light);
  border-bottom: 2px solid var(--bevel-dark);
  box-shadow: inset 0 1px 0 var(--bevel-light), inset 0 -1px 0 var(--bevel-dark);
}
.tf2-section { padding: 10px 12px; }
.tf2-comm { display: grid; grid-template-columns: 1fr 1.1fr; gap: 10px; }
.tf2-comm-left, .tf2-comm-right { display: grid; gap: 8px; }
.tf2-comm img,
.tf2-gallery-main img {
  width: 100%;
  display: block;
  cursor: zoom-in;
  background: #0d0b09;
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.tf2-gallery-main img { max-height: 380px; object-fit: contain; }
.tf2-inv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tf2-caption { margin-top: 6px; text-align: center; font: 12px Arial, sans-serif; color: #cfc3b0; }
.tf2-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 5px; margin-top: 8px; }
.tf2-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}
.tf2-thumbs img.is-active {
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.tf2-credit { text-align: right; padding: 6px 10px; font: 10px Arial, sans-serif; color: #9a8b74; }
@media (max-width: 820px) {
  .tf2-cols, .tf2-comm, .tf2-settings, .tf2-inv { grid-template-columns: 1fr; }
  .tf2-left { border-right: 0; }
}

/* ===== Roblox library + viewer ===== */
.rb-hero { display:flex; gap:14px; align-items:center; padding:12px; border:1px solid rgba(230,230,235,.55); background:rgba(8,10,16,.85); margin-bottom:10px; }
.rb-hero img { width:120px; height:auto; }
.rb-hero h2 { margin:0 0 4px; color:var(--gold-light); font:22px/1.15 Georgia,serif; }
.rb-hero p { margin:0; color:var(--text-normal); font:12px/1.5 Arial,sans-serif; max-width:60ch; }
.rb-section { border:1px solid rgba(230,230,235,.55); background:rgba(0,0,0,.55); margin-bottom:10px; }
.rb-section h2 { margin:0; padding:8px 10px; border-bottom:1px solid rgba(230,230,235,.35); font:700 14px Arial,sans-serif; color:#fff; text-align:center; }
.rb-icon-grid {
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; padding:10px; background:#050505;
}
.rb-icon {
  position:relative; margin:0; aspect-ratio:1; border-radius:10px; overflow:hidden; cursor:zoom-in;
  border:1px solid rgba(255,255,255,.08); background:#111;
}
.rb-icon img { width:100%; height:100%; object-fit:cover; display:block; }
.rb-icon span {
  position:absolute; top:5px; left:7px; color:#fff; font:700 11px/1 Arial,sans-serif;
  text-shadow:0 1px 2px #000; opacity:.9; pointer-events:none;
}
.rb-viewer-wrap { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:8px; padding:10px; }
.rb-main {
  min-height:360px; background:#000; border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
}
.rb-main img { max-width:100%; max-height:520px; object-fit:contain; cursor:zoom-in; }
.rb-side { display:grid; gap:8px; align-content:start; }
.rb-side-thumbs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:460px; overflow:auto; }
.rb-side-thumbs img { width:100%; aspect-ratio:1; object-fit:cover; cursor:pointer; border:1px solid transparent; }
.rb-side-thumbs img.is-active { border-color:#6ea8ff; }
.rb-controls { display:flex; justify-content:center; gap:8px; align-items:center; color:#fff; font:12px Arial,sans-serif; }
.rb-controls button { background:#171717; border:1px solid #555; color:#fff; padding:3px 10px; cursor:pointer; }
.rb-collect { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; padding:10px; }
.rb-collect img { width:100%; aspect-ratio:1; object-fit:contain; background:#0a0a0a; border:1px solid rgba(255,255,255,.1); cursor:zoom-in; }
@media(max-width:900px){
  .rb-icon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rb-viewer-wrap{grid-template-columns:1fr}
  .rb-side-thumbs{grid-template-columns:repeat(4,minmax(0,1fr)); max-height:180px}
}

/* ===== COD preview ===== */
.cod-tabs { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
.cod-tabs button {
  min-width:88px; padding:8px 12px; cursor:pointer; border:1px solid rgba(230,230,235,.45);
  background:#111; color:#ddd; font:700 12px Arial,sans-serif;
}
.cod-tabs button.is-active { background:#1b1b1b; color:#fff; border-color:var(--gold-dim); }
.cod-panel { display:none; border:1px solid rgba(230,230,235,.45); background:rgba(0,0,0,.55); padding:12px; }
.cod-panel.is-active { display:block; }
.cod-panel.bo2 {
  background: linear-gradient(180deg, rgba(18,28,18,.92), rgba(8,12,8,.95));
  border-color:#4f6b45; box-shadow: inset 0 0 0 1px rgba(120,160,100,.15);
}
.cod-panel h2 { margin:0 0 8px; color:#fff; font:700 16px Arial,sans-serif; }
.cod-panel.bo2 h2 { color:#b7d7a8; text-shadow:0 0 8px rgba(120,180,90,.25); }
.cod-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cod-box { border:1px solid rgba(230,230,235,.35); min-height:110px; padding:10px; background:rgba(0,0,0,.35); }
.cod-box h3 { margin:0 0 6px; font:700 13px Arial,sans-serif; color:#ddd; }
.cod-box p { margin:0; color:#9a9a9a; font:12px/1.45 Arial,sans-serif; }
.cod-panel.bo2 .cod-box { border-color:#4f6b45; }
@media(max-width:720px){ .cod-grid{grid-template-columns:1fr} }

/* ===== shared shrine boxes (NMS + others) ===== */
.shrine-wrap { display: grid; gap: 12px; }
.shrine-box {
  background: var(--bg-panel);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  padding: 10px;
}
.shrine-box h2,
.shrine-box h3 {
  margin: 0 0 8px;
  color: var(--text-normal);
  font: 700 14px/1.2 Georgia, "Times New Roman", serif;
  text-align: center;
}
.shrine-muted {
  color: var(--text-dim);
  font-size: 11px;
  text-align: center;
  margin: 0 0 10px;
}

/* ===== No Man's Sky ===== */
.nms-hero {
  padding: 18px;
  text-align: center;
  background: var(--bg-panel);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.nms-hero h2 {
  margin: 0 0 6px;
  font: 28px/1.1 Georgia, serif;
  color: var(--gold-light, #e8ddff);
}
.nms-hero .sub {
  color: var(--text-dim);
  margin: 0 0 12px;
  font-style: italic;
}
.nms-hero p {
  margin: 0 auto;
  max-width: 62ch;
  color: var(--text-normal);
  font-size: 12px;
  line-height: 1.65;
}
.nms-stats {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
}
.nms-ranks { display: grid; gap: 8px; }
.nms-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--bg-panel-dark);
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}
.nms-rank img { width: 36px; height: 36px; object-fit: contain; }
.nms-rank strong { display: block; font-size: 12px; }
.nms-rank.vykeen strong { color: #d75; }
.nms-rank.gec strong { color: #6d6; }
.nms-rank.korvax strong { color: #6af; }
.nms-milestones {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--text-normal);
  font-size: 12px;
  line-height: 1.7;
}
.nms-tools { display: grid; gap: 10px; justify-items: center; align-content: start; }
.nms-tools figure { margin: 0; text-align: center; }
.nms-tools img {
  max-width: 220px;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  background: transparent;
  border: 0;
}
.nms-tools figcaption { margin-top: 6px; color: var(--gold-dim); font-size: 11px; }
.nms-viewer { margin: 0 0 10px; }
.nms-viewer img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  background: #000;
  cursor: zoom-in;
  border: 1px solid rgba(255,255,255,.55);
}
.nms-viewer-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--text-normal);
  font: 12px Arial, sans-serif;
}
.nms-viewer-controls button {
  min-width: 36px;
  padding: 4px 10px;
  background: #000;
  color: #fff;
  cursor: pointer;
  border: 1px solid #fff;
}
.nms-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 4px;
  margin-top: 8px;
}
.nms-gallery-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.35);
}
.nms-gallery-grid img.is-active {
  border-color: #fff;
}
@media (max-width: 860px) {
  .nms-stats { grid-template-columns: 1fr; }
}