/* ============================================
   0SUGAR // STYLESHEET
   Dark steel / industrial / bunker theme
   Metallic Monster Zero Sugar green accents
   2000s control-room aesthetic
   ============================================ */

/* ===== VARIABLES ===== */
:root {
  /* Monster greens — metallic like the can */
  --monster: #6DFF1F;
  --monster-bright: #8FFF4D;
  --monster-glow: rgba(109,255,31,.65);
  --monster-soft: #9BFF5A;
  --monster-dark: #2A5A14;
  --monster-dim: #1a3a0a;
  --monster-metallic: linear-gradient(180deg, #8FFF4D 0%, #6DFF1F 35%, #4DD900 70%, #3AA800 100%);
  --monster-metallic-horiz: linear-gradient(90deg, #3AA800 0%, #6DFF1F 30%, #8FFF4D 50%, #6DFF1F 70%, #3AA800 100%);

  /* Steel palette */
  --steel-0: #060707;
  --steel-1: #111414;
  --steel-2: #1b2020;
  --steel-3: #2d3433;
  --steel-4: #3f4946;
  --steel-5: #56605c;
  --steel-6: #68716d;
  --steel-7: #87918b;

  /* Text */
  --text: #d7ded9;
  --text-dim: #87918b;
  --text-bright: #edf4ef;

  /* Panels */
  --panel-bg: #121615;
  --panel-border: #48534e;
  --panel-border-bright: #56605c;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.55);
  --shadow-md: 0 4px 16px rgba(0,0,0,.65);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.75);
  --shadow-inset: inset 0 0 35px rgba(0,0,0,.65);
  --glow-monster: 0 0 12px rgba(109,255,31,.45);
  --glow-monster-lg: 0 0 20px rgba(109,255,31,.35);
}

/* ===== RESET ===== */
* {
  box-sizing: border-box;
}

html,
body {
  cursor: url("cursor-reticle-default.png") 16 2, crosshair;
}

/* ===== CUSTOM CURSOR ON INTERACTIVE ELEMENTS ===== */
a, button, input, textarea, select, label, .thread-button, .placard, .admin-toggle {
  cursor: url("cursor-reticle-hover_v5.png") 16 2, pointer;
}

/* ===== BASE ===== */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5;

  /* Industrial bunker background — dark steel with metallic sheen */
  background:
    /* Subtle warm spotlight from above */
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(109,255,31,.06), transparent 50%),
    /* Vertical light streaks */
    linear-gradient(90deg,
      transparent 0%, rgba(255,255,255,.015) 8%, transparent 16%,
      rgba(0,0,0,.2) 50%, transparent 84%, rgba(255,255,255,.01) 92%, transparent 100%
    ),
    /* Horizontal brushed steel bands */
    repeating-linear-gradient(0deg,
      #0c0e0e 0px, #0c0e0e 2px,
      #0a0b0b 2px, #0a0b0b 4px
    ),
    /* Base dark steel */
    #080909;
}

/* Global scanline overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.025) 0px,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 4px
    ),
    /* Vignette */
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.6) 100%);
  opacity: .5;
}

/* ===== CRT PIXEL OVERLAY ===== */
html {
  --crt-pixel-size: 8px;
  --crt-scanline-thickness: 1.5px;
  --crt-mask-thickness: 1.5px;
  --crt-scanline-strength: 0.04;
  --crt-mask-strength: 0.035;
  --crt-overlay-opacity: 0.22;
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,var(--crt-scanline-strength)) 0px,
      rgba(255,255,255,var(--crt-scanline-strength)) var(--crt-scanline-thickness),
      transparent var(--crt-scanline-thickness),
      transparent var(--crt-pixel-size)
    ),
    repeating-linear-gradient(
      to right,
      rgba(0,255,80,var(--crt-mask-strength)) 0px,
      rgba(0,255,80,var(--crt-mask-strength)) var(--crt-mask-thickness),
      transparent var(--crt-mask-thickness),
      transparent var(--crt-pixel-size)
    );
  mix-blend-mode: screen;
  opacity: var(--crt-overlay-opacity);
}

/* ===== SITE CONTAINER ===== */
.site {
  width: 1040px;
  margin: 24px auto;
  padding: 14px;
  position: relative;
  z-index: 1;

  /* Brushed metal container */
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.5)),
    var(--steel-1);
  border: 1px solid var(--steel-5);
  box-shadow:
    0 0 0 3px #020303,
    0 0 60px rgba(0,0,0,.7),
    inset 0 0 80px rgba(0,0,0,.65);
}

/* ===== HEADER — STEEL CONTROL ROOM ===== */
.steel-room {
  position: relative;
  height: 270px;
  overflow: hidden;
  border: 3px ridge var(--steel-5);

  /* Brushed metal panel with horizontal grain */
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.5)),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 96px,
      rgba(255,255,255,.03) 98px, rgba(255,255,255,.03) 100px
    ),
    repeating-linear-gradient(0deg,
      #1c2120 0px, #1c2120 70px,
      #161a19 72px, #161a19 76px
    );
}

/* Inner green border glow */
.steel-room::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(155,255,90,.18);
  box-shadow:
    inset 0 0 45px rgba(109,255,31,.06),
    0 0 15px rgba(109,255,31,.1);
  pointer-events: none;
  z-index: 0;
}

/* Header image slot: use header-image.png. Box is 310px wide by 185px tall. */
.steel-room::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  right:  35px;
  top:  30px;
  width:  310px;
  height:  185px;
  border: 2px solid rgba(109,255,31,.3);
  overflow: hidden;
  background:
    linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)),
    url("header-image.png"),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 18px,
      rgba(109,255,31,.06) 19px, rgba(109,255,31,.06) 20px
    ),
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 18px,
      rgba(109,255,31,.06) 19px, rgba(109,255,31,.06) 20px
    ),
    rgba(0,0,0,.3);
  background-size:
    100% 100%,
    cover,
    auto,
    auto,
    auto;
  background-position:
    center,
    center,
    left top,
    left top,
    center;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat,
    repeat,
    no-repeat;
  box-shadow:
    0 0 25px rgba(109,255,31,.18),
    inset 0 0 35px rgba(0,0,0,.85);
}

/* ===== RIVETS ===== */
.rivet {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 10;
  background:
    radial-gradient(circle at 35% 35%, #a0a8a3, #5a635e 40%, #111 80%);
  box-shadow:
    inset -1px -1px 1px rgba(0,0,0,.7),
    0 1px 1px rgba(255,255,255,.1);
}

.rivet::after {
  content: none;
}

.r1 { left: 18px; top: 18px; }
.r2 { right: 18px; top: 18px; }
.r3 { left: 18px; bottom: 18px; }
.r4 { right: 18px; bottom: 18px; }

/* ===== LOGO ===== */
.logo {
  position: absolute;
  left: 38px;
  top: 34px;
  font-size: 56px;
  line-height: .85;
  font-weight: 900;
  letter-spacing: 4px;
  color: transparent;
  -webkit-text-stroke: 2px var(--text-bright);
  text-shadow:
    0 0 14px rgba(109,255,31,.5),
    0 0 28px rgba(109,255,31,.25),
    4px 5px 0 #000,
    5px 6px 2px rgba(0,0,0,.5);
  z-index: 5;
}

.logo small {
  display: block;
  margin-top: 14px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 9px;
  color: var(--monster);
  -webkit-text-stroke: 0;
  text-shadow:
    0 0 10px rgba(109,255,31,.6),
    0 0 20px rgba(109,255,31,.3),
    2px 2px 0 #000;
}

/* ===== SIGNAL / WAVEFORM ===== */
.signal {
  position: absolute;
  left: 42px;
  bottom: 56px;
  width: 540px;
  height: 80px;
  z-index: 5;
}

.signal svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(109,255,31,.7));
}

/* ===== MACHINE LABEL ===== */
.machine-label {
  position: absolute;
  left: 42px;
  bottom: 22px;
  padding: 8px 12px;
  border: 1px solid rgba(109,255,31,.4);
  color: #dfffce;
  background:
    linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.7)),
    #050605;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-shadow: 0 0 6px rgba(109,255,31,.4);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,.8),
    0 0 8px rgba(109,255,31,.1);
  z-index: 5;
}

/* ===== WARNING BOX ===== */
.warning {
  position: absolute;
  right: 52px;
  bottom: 32px;
  width: 270px;
  padding: 14px;
  border: 1px solid var(--steel-5);
  background:
    linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.8)),
    #050605;
  font-family: "Courier New", "Lucida Console", monospace;
  color: #cfd8d2;
  font-size: 12px;
  line-height: 1.5;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,.8),
    0 2px 8px rgba(0,0,0,.4);
  z-index: 5;
}

.warning b {
  color: var(--monster);
  text-shadow: 0 0 6px rgba(109,255,31,.4);
}

/* ===== NAVIGATION — METAL PLACARDS ===== */
.nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.placard {
  position: relative;
  min-height: 66px;
  text-decoration: none;
  color: var(--text-bright);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: lowercase;

  /* Brushed metal plate */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.1) 0%,
      rgba(255,255,255,.02) 15%,
      rgba(0,0,0,.1) 50%,
      rgba(0,0,0,.35) 85%,
      rgba(0,0,0,.45) 100%
    ),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px,
      transparent 1px, transparent 6px
    ),
    #242a28;
  border: 1px solid var(--steel-6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.3),
    inset 0 -12px 20px rgba(0,0,0,.25),
    0 3px 10px rgba(0,0,0,.5);
  text-shadow: 2px 2px 0 #000;

  /* Screw heads in corners */
  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 35%, #a0a8a3, #5a635e 40%, #111 80%);
    box-shadow:
      inset -1px -1px 1px rgba(0,0,0,.7),
      0 1px 1px rgba(255,255,255,.1);
  }

  &::before {
    top: 8px;
    left: 8px;
  }

  &::after {
    top: 8px;
    right: 8px;
  }

  /* Bottom screw heads via span trick */
  span {
    display: none;
  }
}

/* Bottom screws on placards */
.placard {
  /* Add bottom screws with box-shadow on a pseudo */
}

/* We'll add a screw class for bottom screws */
.placard .screw-bl,
.placard .screw-br {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #a0a8a3, #5a635e 40%, #111 80%);
  box-shadow:
    inset -1px -1px 1px rgba(0,0,0,.7),
    0 1px 1px rgba(255,255,255,.1);
}

.placard .screw-bl { bottom: 8px; left: 8px; }
.placard .screw-br { bottom: 8px; right: 8px; }

.placard:hover,
.placard:focus {
  color: #fff;
  border-color: var(--monster);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.3),
    inset 0 -12px 20px rgba(0,0,0,.25),
    0 0 14px rgba(109,255,31,.3);
  outline: none;
}

.placard:active,
.placard.active {
  color: #fff;
  border-color: var(--monster);
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.2) 0%,
      rgba(0,0,0,.35) 50%,
      rgba(109,255,31,.04) 100%
    ),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.01) 0px, rgba(255,255,255,.01) 1px,
      transparent 1px, transparent 6px
    ),
    #1a201e;
  box-shadow:
    inset 0 0 16px rgba(109,255,31,.1),
    0 0 16px rgba(109,255,31,.35);
  transform: translateY(1px);
}

/* Active page indicator */
.placard.active {
  border-color: var(--monster);
  border-bottom-width: 3px;
  border-bottom-color: var(--monster-bright);
}

/* ===== MAIN LAYOUT ===== */
.content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ===== PANELS ===== */
.panel {
  border: 2px solid var(--panel-border);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.04) 0%,
      rgba(0,0,0,.2) 100%
    ),
    var(--panel-bg);
  box-shadow:
    var(--shadow-inset),
    var(--shadow-sm);
  padding: 14px;
}

/* ===== PANEL TITLE BAR ===== */
.panel-title {
  margin: 0 0 14px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2.5px;
  text-transform: lowercase;
  color: #f1fff0;

  /* Metallic title bar */
  background:
    linear-gradient(90deg,
      rgba(109,255,31,.18) 0%,
      rgba(0,0,0,.1) 35%,
      rgba(0,0,0,.4) 100%
    ),
    linear-gradient(180deg,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.02) 30%,
      rgba(0,0,0,.25) 70%,
      rgba(0,0,0,.4) 100%
    ),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px,
      transparent 1px, transparent 6px
    ),
    #242a28;
  border: 1px solid var(--steel-6);
  border-left: 6px solid var(--monster);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.25),
    inset 0 -10px 18px rgba(0,0,0,.2),
    0 3px 10px rgba(0,0,0,.4);
  text-shadow: 2px 2px 0 #000;
}

/* ===== THREAD LIST DISCLAIMER ===== */
.thread-disclaimer {
  margin: -2px 2px 14px;
  color: var(--monster-soft);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .4px;
  text-shadow: 0 0 8px rgba(109,255,31,.3);
}

.thread-disclaimer strong {
  color: var(--monster-bright);
  letter-spacing: .8px;
}

/* ===== THREAD BUTTONS ===== */
.thread-button {
  display: block;
  margin: 10px 0;
  padding: 14px 16px;
  min-height: 68px;
  color: var(--text-bright);
  text-decoration: none;

  /* Brushed metal button */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.07) 0%,
      rgba(255,255,255,.02) 20%,
      rgba(0,0,0,.15) 60%,
      rgba(0,0,0,.35) 100%
    ),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px,
      transparent 1px, transparent 6px
    ),
    #242a28;
  border: 1px solid var(--steel-6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.2),
    inset 0 -14px 24px rgba(0,0,0,.25),
    0 3px 10px rgba(0,0,0,.45);
  text-shadow: 2px 2px 0 #000;
  transition: border-color .15s, box-shadow .15s;
}

.thread-button strong {
  display: block;
  color: var(--text-bright);
  font-size: 15px;
  letter-spacing: 1.5px;
}

.thread-button span {
  display: block;
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.4;
}

.thread-button:hover,
.thread-button:focus {
  color: #fff;
  border-color: var(--monster);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.2),
    inset 0 -14px 24px rgba(0,0,0,.25),
    0 0 12px rgba(109,255,31,.3);
  outline: none;
}

.thread-button:hover strong,
.thread-button:focus strong {
  color: #fff;
}

.thread-button:active {
  border-color: var(--monster);
  box-shadow:
    inset 0 0 18px rgba(109,255,31,.1),
    0 0 14px rgba(109,255,31,.4);
  transform: translateY(1px);
}

/* Simple centered thread button variant */
.simple-thread-button {
  min-height: 56px;
  display: grid;
  place-items: center;
}

.simple-thread-button strong {
  font-size: 18px;
  letter-spacing: 3px;
}

/* ===== THREAD PAGES ===== */
.thread-page {
  display: none;
}

/* ===== OP POSTS ===== */
.op-post {
  border: 1px solid #37413b;
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,.2)),
    rgba(0,0,0,.3);
  padding: 14px;
  line-height: 1.55;
  box-shadow: inset 0 0 12px rgba(0,0,0,.3);
}

.op-post h3 {
  margin-top: 0;
  color: var(--monster-soft);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px rgba(109,255,31,.3);
}

.op-post p {
  color: var(--text);
  margin: 8px 0;
}

.back-button {
  margin-bottom: 14px;
}

/* Fixed left-side jump tab for long OP / living post threads */
.reply-jump-button {
  position: fixed;
  top: 50%;
  left: max(8px, calc(50% - 520px - 104px));
  transform: translateY(-50%);
  z-index: 7000;
  color: var(--text-bright);
  border: 1px solid var(--steel-6);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.06) 0%,
      rgba(0,0,0,.3) 100%
    ),
    #242a28;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 6px rgba(0,0,0,.4);
  padding: 5px 10px;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 11px;
  letter-spacing: .5px;
  text-shadow: 2px 2px 0 #000;
}

.reply-jump-button:hover,
.reply-jump-button:focus {
  border-color: var(--monster);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 8px rgba(109,255,31,.3);
  outline: none;
}


.reply-placeholder {
  color: var(--text-dim);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 12px;
  border-top: 1px dashed #37413b;
  margin-top: 14px;
  padding-top: 10px;
}

/* ===== REPLY ZONES ===== */
.reply-zone {
  margin-top: 14px;
  border: 1px solid #37413b;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.02) 0%,
      rgba(0,0,0,.2) 100%
    ),
    rgba(0,0,0,.25);
  padding: 14px;
  font-family: "Courier New", "Lucida Console", monospace;
  box-shadow: inset 0 0 25px rgba(0,0,0,.55);
}

.reply-head {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #37413b;
  color: var(--monster-soft);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: lowercase;
  text-shadow: 0 0 8px rgba(109,255,31,.35);
}

.replies-list {
  color: var(--text-dim);
  font-size: 12px;
}

/* Individual reply post */
.reply-post {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid #37413b;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.015) 0%,
      rgba(0,0,0,.2) 100%
    ),
    #0b0d0c;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

.reply-meta {
  color: var(--monster-soft);
  font-size: 12px;
  margin-bottom: 8px;
  word-break: break-word;
  letter-spacing: .5px;
}

.reply-message-text {
  white-space: pre-wrap;
  color: var(--text);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0;
  word-break: break-word;
}

.reply-image-link {
  display: inline-block;
  margin-top: 8px;
}

.reply-image-link img {
  display: block;
  max-width: 320px;
  max-height: 320px;
  border: 1px solid var(--steel-5);
  background: #000;
  box-shadow: 0 0 12px rgba(0,0,0,.65);
}

/* Reply form */
.reply-form {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #37413b;
}

.reply-form input,
.reply-form textarea,
.reply-form button {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 8px 0;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 12px;
  letter-spacing: .5px;
}

.reply-form input,
.reply-form textarea {
  color: var(--text);
  background:
    linear-gradient(180deg, #060706, #0a0b0a);
  border: 1px solid #37413b;
  padding: 8px 10px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.6);
}

.reply-form input:focus,
.reply-form textarea:focus {
  outline: none;
  border-color: var(--monster);
  box-shadow:
    inset 0 0 6px rgba(0,0,0,.6),
    0 0 6px rgba(109,255,31,.2);
}

.reply-form textarea {
  min-height: 82px;
  resize: vertical;
}

.reply-form button {
  width: auto;
  color: var(--text-bright);
  border: 1px solid var(--steel-6);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.06) 0%,
      rgba(0,0,0,.3) 100%
    ),
    #242a28;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 6px rgba(0,0,0,.4);
  padding: 8px 14px;
  text-shadow: 2px 2px 0 #000;
  transition: border-color .15s, box-shadow .15s;
}

.reply-form button:hover,
.reply-form button:focus {
  border-color: var(--monster);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 8px rgba(109,255,31,.3);
  outline: none;
}

.reply-status {
  min-height: 16px;
  color: var(--text-dim);
  font-size: 12px;
}

/* ===== MUSIC PLAYER — WINAMP 2.x STYLE ===== */
.music-row {
  margin-top: 16px;
  width: 300px;
}

.music-player {
  /* Classic Winamp dark base */
  background:
    linear-gradient(180deg,
      #2a3330 0%,
      #1c221f 8%,
      #161b18 100%
    );
  border: 1px solid var(--steel-5);
  border-top: 2px solid var(--steel-6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 16px rgba(0,0,0,.6);
  padding: 0;
  font-family: "Courier New", "Lucida Console", monospace;
  overflow: hidden;
}

/* Winamp title bar */
.music-player::before {
  content: "0SUGAR AMP v1.0";
  display: block;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--text-dim);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.08) 0%,
      rgba(0,0,0,.15) 100%
    ),
    #1a201e;
  border-bottom: 1px solid #111;
  text-shadow: 1px 1px 0 #000;
}

/* Player screen — LCD display */
.player-screen {
  margin: 8px;
  padding: 10px;
  border: 1px solid #1a1a1a;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(109,255,31,.08), transparent 50%),
    linear-gradient(180deg, #060807, #0a0c0b);
  color: var(--monster-soft);
  box-shadow:
    inset 0 0 20px rgba(0,0,0,.9),
    0 1px 0 rgba(255,255,255,.03);
  text-shadow: 0 0 8px rgba(109,255,31,.5);
}

.track-title {
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: .5px;
  margin-bottom: 4px;
}

.track-meta {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: .5px;
}

/* EQ bars */
.eq-bars {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2px;
  height: 32px;
  margin-top: 10px;
  padding: 4px;
  border: 1px solid #111;
  background: rgba(0,0,0,.4);
  box-shadow: inset 0 0 6px rgba(0,0,0,.6);
}

.eq-bars i {
  display: block;
  flex: 1;
  max-width: 20px;
  background: var(--monster-metallic);
  box-shadow:
    0 0 4px rgba(109,255,31,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  border-radius: 1px 1px 0 0;
  transition: height .06s ease;
}

/* Player controls row */
.player-controls {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin: 0 8px 8px;
}

.player-controls button {
  position: relative;
  height: 30px;
  color: var(--text-bright);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .5px;

  /* Recessed button */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.06) 0%,
      rgba(0,0,0,.15) 100%
    ),
    #242a28;
  border: 1px solid #3a4440;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.3);
  transition: all .08s;
}

.player-controls button:hover {
  border-color: var(--monster);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 6px rgba(109,255,31,.25);
}

.player-controls button:active {
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.15) 0%,
      rgba(255,255,255,.03) 100%
    ),
    #1c211f;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.4),
    0 0 6px rgba(109,255,31,.2);
  transform: translateY(1px);
}

/* Mode-active buttons (shuffle/loop) */
.player-controls button.mode-active {
  border-color: var(--monster);
  background:
    linear-gradient(180deg,
      rgba(109,255,31,.08) 0%,
      rgba(0,0,0,.1) 100%
    ),
    #242a28;
  box-shadow:
    inset 0 0 6px rgba(109,255,31,.12),
    0 0 6px rgba(109,255,31,.2);
  color: var(--monster);
}

/* Control icons base */
.ctrl-icon {
  display: inline-block;
  position: relative;
  width: 22px;
  height: 14px;
}

/* Play icon (triangle) */
.ctrl-play .ctrl-icon::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 1px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--text-bright);
}

/* Prev icon (double left arrow) */
.ctrl-prev .ctrl-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid var(--text-bright);
}

.ctrl-prev .ctrl-icon::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 1px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid var(--text-bright);
}

.ctrl-prev .ctrl-icon i {
  position: absolute;
  top: 1px;
  left: 2px;
  width: 2px;
  height: 12px;
  background: var(--text-bright);
}

/* Next icon (double right arrow) */
.ctrl-next .ctrl-icon::before {
  content: "";
  position: absolute;
  right: 11px;
  top: 1px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--text-bright);
}

.ctrl-next .ctrl-icon::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 1px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--text-bright);
}

.ctrl-next .ctrl-icon i {
  position: absolute;
  top: 1px;
  right: 2px;
  width: 2px;
  height: 12px;
  background: var(--text-bright);
}

/* Pause icon (two bars) */
.ctrl-pause .ctrl-icon::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 4px;
  height: 12px;
  background: var(--text-bright);
}

.ctrl-pause .ctrl-icon::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 1px;
  width: 4px;
  height: 12px;
  background: var(--text-bright);
}

/* Shuffle / Loop text buttons */
.ctrl-eq {
  font-size: 10px !important;
  letter-spacing: 1px !important;
  font-family: "Courier New", "Lucida Console", monospace !important;
}

/* ===== PROGRESS BAR ===== */
.progress {
  height: 10px;
  margin: 0 8px 8px;
  border: 1px solid #1a1a1a;
  background:
    linear-gradient(180deg, #050605, #0a0b0a);
  box-shadow: inset 0 0 6px rgba(0,0,0,.7);
  position: relative;
}

.progress::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 7px,
      rgba(255,255,255,.03) 7px, rgba(255,255,255,.03) 8px
    );
  pointer-events: none;
}

.progress div {
  height: 100%;
  width: 0%;
  background: var(--monster-metallic-horiz);
  box-shadow:
    0 0 8px rgba(109,255,31,.6),
    inset 0 1px 0 rgba(255,255,255,.25);
  position: relative;
  transition: width .1s linear;
}

/* Progress thumb/handle */
.progress div::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -2px;
  width: 6px;
  height: calc(100% + 4px);
  background:
    linear-gradient(180deg,
      var(--monster-bright),
      var(--monster) 40%,
      var(--monster-dark)
    );
  border: 1px solid rgba(255,255,255,.2);
  box-shadow:
    0 0 4px rgba(109,255,31,.5),
    inset 0 1px 0 rgba(255,255,255,.3);
  border-radius: 1px;
}

/* ===== XAT CHAT ===== */
.bottom-chat {
  margin-top: 16px;
}

.bottom-chat .xat {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--steel-4);
  background: #000;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,.9),
    0 2px 8px rgba(0,0,0,.4);
}

.xat-frame {
  display: block;
  width: 100%;
  height: 600px;
  border: 0;
  background: #000;
}

/* ===== NOTICE / INFO TEXT ===== */
.notice p {
  line-height: 1.55;
  color: #c3ccc6;
}

/* ===== METER / STATUS BAR ===== */
.meter {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #37413b;
  background: rgba(0,0,0,.25);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 12px;
  box-shadow: inset 0 0 8px rgba(0,0,0,.3);
}

.bar {
  height: 10px;
  margin: 6px 0 10px;
  border: 1px solid var(--steel-5);
  background: #070808;
  box-shadow: inset 0 0 4px rgba(0,0,0,.5);
  overflow: hidden;
}

.bar div {
  height: 100%;
  width: 72%;
  background: var(--monster-metallic-horiz);
  box-shadow:
    0 0 8px rgba(109,255,31,.7),
    inset 0 1px 0 rgba(255,255,255,.2);
}

/* ===== BOTTOM LAYOUT ===== */
.bottom {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  margin-top: 16px;
}

/* ===== FOOTER ===== */
footer {
  margin-top: 16px;
  padding: 12px;
  text-align: center;
  color: var(--text-dim);
  border-top: 1px solid #2a302d;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-family: "Courier New", "Lucida Console", monospace;
  text-shadow: 1px 1px 0 #000;
}

/* ===== ROOM SECTIONS (for entr0py/ev0l) ===== */
.room-section {
  display: none;
}

.room-section.active-room {
  display: block;
}

/* ===== SCROLLBAR (Webkit) ===== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--steel-1);
  border: 1px solid var(--steel-3);
}

::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg,
      var(--steel-5) 0%,
      var(--steel-4) 50%,
      var(--steel-5) 100%
    );
  border: 1px solid var(--steel-3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg,
      var(--steel-6) 0%,
      var(--steel-5) 50%,
      var(--steel-6) 100%
    );
}

::-webkit-scrollbar-corner {
  background: var(--steel-1);
}

/* ===== SELECTION ===== */
::selection {
  background: rgba(109,255,31,.25);
  color: #fff;
  text-shadow: 0 0 6px rgba(109,255,31,.5);
}


/* ===== ADMIN PANEL ===== */
.admin-panel {
  display: none;
  margin-bottom: 16px;
}

.admin-panel.admin-open {
  display: block;
}

.admin-status {
  margin-bottom: 10px;
  color: var(--monster-soft);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(109,255,31,.28);
}

.admin-login-form input,
.admin-login-form button,
.admin-logout-button,
.admin-delete-button {
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 12px;
  letter-spacing: .5px;
}

.admin-login-form input {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 8px 0;
  color: var(--text);
  background: linear-gradient(180deg, #060706, #0a0b0a);
  border: 1px solid #37413b;
  padding: 8px 10px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.6);
}

.admin-login-form input:focus {
  outline: none;
  border-color: var(--monster);
  box-shadow:
    inset 0 0 6px rgba(0,0,0,.6),
    0 0 6px rgba(109,255,31,.2);
}

.admin-login-form button,
.admin-logout-button,
.admin-delete-button {
  color: var(--text-bright);
  border: 1px solid var(--steel-6);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.06) 0%,
      rgba(0,0,0,.3) 100%
    ),
    #242a28;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 6px rgba(0,0,0,.4);
  padding: 8px 14px;
  text-shadow: 2px 2px 0 #000;
}

.admin-login-form button:hover,
.admin-login-form button:focus,
.admin-logout-button:hover,
.admin-logout-button:focus,
.admin-delete-button:hover,
.admin-delete-button:focus {
  border-color: var(--monster);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 8px rgba(109,255,31,.3);
  outline: none;
}

.admin-controls {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #37413b;
}

.admin-delete-button {
  padding: 5px 10px;
  font-size: 11px;
  color: #ffd7d7;
  border-color: #6a3d3d;
}

.admin-delete-button:hover,
.admin-delete-button:focus {
  color: #fff;
  border-color: #ff6a6a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 8px rgba(255,60,60,.25);
}

.admin-toggle {
  color: var(--text-dim);
  text-decoration: none;
}

.admin-toggle:hover,
.admin-toggle:focus {
  color: var(--monster-soft);
  text-shadow: 0 0 8px rgba(109,255,31,.3);
  outline: none;
}


/* ===== THREAD REFRESH BUTTON ===== */
.reply-toolbar {
  margin: 8px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #27302b;
}

.reply-toolbar-bottom {
  margin: 14px 0 0;
  padding: 8px 0;
  border-top: 1px dashed #27302b;
  border-bottom: 1px dashed #27302b;
}

.reply-toolbar-bottom + .reply-form {
  border-top: 0;
  padding-top: 8px;
}

.thread-refresh-button {
  color: var(--text-bright);
  border: 1px solid var(--steel-6);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.06) 0%,
      rgba(0,0,0,.3) 100%
    ),
    #242a28;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 6px rgba(0,0,0,.4);
  padding: 5px 10px;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 11px;
  letter-spacing: .5px;
  text-shadow: 2px 2px 0 #000;
}

.thread-refresh-button:hover,
.thread-refresh-button:focus {
  border-color: var(--monster);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 8px rgba(109,255,31,.3);
  outline: none;
}

.thread-refresh-button:disabled {
  opacity: .55;
}


/* ===== REPLY SPAM NOTE ===== */
.reply-spam-note {
  margin: 4px 0 8px;
  color: var(--text-dim);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 11px;
  letter-spacing: .4px;
}

.reply-form button:disabled {
  opacity: .55;
  cursor: url("cursor-reticle-hover_v5.png") 16 2, pointer;
}

/* ===== USER THREAD BOARDS ===== */
.board-intro {
  margin-bottom: 14px;
}

.board-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.thread-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.user-thread-card {
  display: block;
  padding: 14px 16px;
  color: var(--text-bright);
  text-decoration: none;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,.02) 18%,
      rgba(0,0,0,.16) 60%,
      rgba(0,0,0,.35) 100%
    ),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.012) 0px,
      rgba(255,255,255,.012) 1px,
      transparent 1px,
      transparent 6px
    ),
    #202624;
  border: 1px solid var(--steel-6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 -14px 24px rgba(0,0,0,.22),
    0 3px 10px rgba(0,0,0,.42);
  text-shadow: 2px 2px 0 #000;
}

.user-thread-card:hover,
.user-thread-card:focus {
  color: #fff;
  border-color: var(--monster);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 -14px 24px rgba(0,0,0,.22),
    0 0 12px rgba(109,255,31,.3);
  outline: none;
}

.user-thread-title {
  display: block;
  color: var(--text-bright);
  font-size: 15px;
  letter-spacing: 1.3px;
}

.user-thread-meta {
  display: block;
  margin-top: 5px;
  color: var(--monster-soft);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 11px;
  letter-spacing: .8px;
  text-shadow: 0 0 6px rgba(109,255,31,.25);
}

.user-thread-excerpt {
  display: block;
  margin-top: 7px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.4;
  text-shadow: none;
}

.thread-create-form input[type="text"] {
  color: var(--text);
  background:
    linear-gradient(180deg, #060706, #0a0b0a);
  border: 1px solid #37413b;
  padding: 8px 10px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.6);
}

.thread-create-form input[type="text"]:focus {
  outline: none;
  border-color: var(--monster);
  box-shadow:
    inset 0 0 6px rgba(0,0,0,.6),
    0 0 6px rgba(109,255,31,.2);
}

#thread-op .reply-message-text {
  margin-top: 10px;
}

/* ===== ADMIN MODERATION CONTROLS ===== */
.admin-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-mod-button {
  color: var(--text-bright);
  border: 1px solid var(--steel-6);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.06) 0%,
      rgba(0,0,0,.3) 100%
    ),
    #242a28;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 6px rgba(0,0,0,.4);
  padding: 5px 10px;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 11px;
  letter-spacing: .5px;
  text-shadow: 2px 2px 0 #000;
}

.admin-mod-button:hover,
.admin-mod-button:focus {
  border-color: var(--monster);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 8px rgba(109,255,31,.3);
  outline: none;
}

/* ===== P0LICE PANEL ===== */
.police-status-line {
  margin: 8px 0 12px;
  color: var(--monster-soft);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 12px;
  letter-spacing: .7px;
}

.police-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0;
}

.police-table-wrap {
  overflow-x: auto;
  border: 1px solid #37413b;
  background: rgba(0,0,0,.25);
  box-shadow: inset 0 0 18px rgba(0,0,0,.45);
}

.police-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 12px;
}

.police-table th,
.police-table td {
  padding: 8px 9px;
  border-bottom: 1px dashed #37413b;
  vertical-align: top;
  text-align: left;
}

.police-table th {
  color: var(--monster-soft);
  background: rgba(0,0,0,.25);
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(109,255,31,.25);
}

.police-table td {
  color: var(--text);
}

.police-hash {
  color: var(--text-dim);
  word-break: break-all;
}

.police-names {
  color: var(--text-bright);
  word-break: break-word;
}

.police-status-normal {
  color: var(--text-dim);
}

.police-status-muted,
.police-status-cooldown,
.police-status-strike {
  color: var(--monster-soft);
}

.police-status-banned {
  color: #ff9a9a;
}

.police-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.police-actions button,
.police-toolbar button {
  color: var(--text-bright);
  border: 1px solid var(--steel-6);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.06) 0%,
      rgba(0,0,0,.3) 100%
    ),
    #242a28;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 6px rgba(0,0,0,.4);
  padding: 5px 8px;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 11px;
  letter-spacing: .4px;
  text-shadow: 2px 2px 0 #000;
}

.police-actions button:hover,
.police-actions button:focus,
.police-toolbar button:hover,
.police-toolbar button:focus {
  border-color: var(--monster);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 8px rgba(109,255,31,.3);
  outline: none;
}

.police-actions .danger {
  color: #ffd7d7;
  border-color: #6a3d3d;
}

.police-actions .danger:hover,
.police-actions .danger:focus {
  color: #fff;
  border-color: #ff6a6a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 8px rgba(255,60,60,.25);
}


/* ===== H0ME HEADER SHOOTER OVERLAY =====
   Verified layer order:
   .steel-room::after = PNG frame, z-index 1
   .home-shooter-slot = game holder, z-index 80
   .home-shooter-canvas = actual shooter, fills holder
   Port size/location restored: 310×185, right 35px, top 30px
*/
.home-shooter-slot {
  position: absolute;
  right: 34px;
  top: 29px;
  width: 316px;
  height: 191px;
  z-index: 80;
  display: block;
  pointer-events: auto;
}

.home-shooter-canvas {
  position: absolute;
  inset: 0;
  width: 316px;
  height: 191px;
  z-index: 81;
  display: block;
  border: 2px solid rgba(109,255,31,.3);
  background: transparent;
  box-shadow:
    0 0 25px rgba(109,255,31,.18),
    inset 0 0 35px rgba(0,0,0,.85);
  cursor: url("cursor-reticle-default.png") 16 2, crosshair;
}


/* ===== OP CONTENT DIVIDER / IMAGES ===== */
.op-divider {
  width: 100%;
  height: 0;
  margin: 14px 0;
  border-top: 1px dashed rgba(109,255,31,.65);
  box-shadow: 0 0 8px rgba(109,255,31,.22);
}

.post-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  margin: 0 0 12px 0;
  border: 1px solid #56605c;
  box-shadow:
    0 0 0 2px #050606,
    0 0 18px rgba(0,0,0,.55);
}


/* ===== XP TUTORIAL CONTENT ===== */
.xp-desktop-shot {
  width: min(100%, 820px);
  max-width: 100%;
  height: auto;
  margin: 0 auto 14px auto;
}

/* ===== MODERN XP FLYOUTS ===== */
.modern-xp-flyouts-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 820px);
  margin: 0 auto 14px auto;
  align-items: start;
}

.modern-xp-flyout-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}

@media (max-width: 760px) {
  .modern-xp-flyouts-images {
    grid-template-columns: 1fr;
  }
}

.xp-link-list {
  margin: 8px 0 14px 22px;
  padding: 0;
}

.xp-link-list li {
  margin: 6px 0;
  color: var(--text);
}

.op-post a {
  color: var(--monster-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.op-post a:hover,
.op-post a:focus {
  color: var(--text-bright);
  text-shadow: 0 0 8px rgba(109,255,31,.45);
  outline: none;
}

/* ===== USB FLOPPY DRIVE OP CONTENT ===== */
.usb-floppy-image {
  width: min(100%, 820px);
  max-width: 100%;
  height: auto;
  margin: 0 auto 14px auto;
}

.post-figure {
  margin: 0 0 14px 0;
}

.post-figure .post-image {
  margin-bottom: 0;
}

.post-caption {
  width: min(100%, 820px);
  margin: 7px auto 14px auto;
  padding: 7px 10px;
  color: var(--text-dim);
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 11px;
  line-height: 1.45;
  border-left: 3px solid var(--monster-dark);
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 0 10px rgba(0,0,0,.35);
}

.step-download-row {
  display: flex;
  justify-content: center;
  margin: 18px 0 6px 0;
}

.step-download-button {
  position: relative;
  min-width: 210px;
  min-height: 44px;
  padding: 10px 38px;
  display: inline-grid;
  place-items: center;
  color: var(--text-bright);
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: lowercase;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.1) 0%,
      rgba(255,255,255,.02) 16%,
      rgba(0,0,0,.12) 55%,
      rgba(0,0,0,.36) 100%
    ),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px,
      transparent 1px, transparent 6px
    ),
    #242a28;
  border: 1px solid var(--steel-6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.3),
    inset 0 -10px 18px rgba(0,0,0,.25),
    0 3px 10px rgba(0,0,0,.45);
  text-shadow: 2px 2px 0 #000;
}

.step-download-button::before,
.step-download-button::after,
.step-download-button .screw-bl,
.step-download-button .screw-br {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #a0a8a3, #5a635e 40%, #111 80%);
  box-shadow:
    inset -1px -1px 1px rgba(0,0,0,.7),
    0 1px 1px rgba(255,255,255,.1);
}

.step-download-button::before {
  top: 7px;
  left: 8px;
}

.step-download-button::after {
  top: 7px;
  right: 8px;
}

.step-download-button .screw-bl {
  bottom: 7px;
  left: 8px;
}

.step-download-button .screw-br {
  bottom: 7px;
  right: 8px;
}

.step-download-button:hover,
.step-download-button:focus {
  color: #fff;
  border-color: var(--monster);
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.3),
    inset 0 -10px 18px rgba(0,0,0,.25),
    0 0 12px rgba(109,255,31,.3);
  outline: none;
}

.step-download-button:active {
  border-color: var(--monster);
  box-shadow:
    inset 0 0 16px rgba(109,255,31,.1),
    0 0 14px rgba(109,255,31,.35);
  transform: translateY(1px);
}