/* ==========================================================================
   HERO HOLOGRAPHIC — red & black superhero future reskin
   Hyper-realistic, cinematic, holographic. Red on deep black.
   Additive override layer — loads last, wins everything.
   ========================================================================== */

:root {
  --holo-red: #ff1a1a;
  --holo-red-hi: #ff4d4d;
  --holo-red-hot: #ff6b6b;
  --holo-red-deep: #a30000;
  --holo-red-dim: #5c0000;
  --black: #000000;
  --black-2: #0a0000;
  --black-3: #140000;
  --panel: #0d0000;
  --ink: #f2f2f2;
  --ink-dim: #b8a8a8;
}

/* ---- Body: deep black with red ambient glow + scanlines + grid ---- */
body {
  background:
    radial-gradient(ellipse 90% 40% at 50% -5%, rgba(255, 26, 26, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 35% at 50% 108%, rgba(163, 0, 0, 0.12) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #000000 0%, #0a0000 45%, #050000 70%, #000000 100%) !important;
  color: var(--ink) !important;
}
/* faint holographic grid */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image:
    linear-gradient(rgba(255,26,26,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,26,26,0.045) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, black 30%, transparent 90%) !important;
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, black 30%, transparent 90%) !important;
}

/* ---- Headings: holographic red, bold, glowing ---- */
h1, h2, h3, .site-title, .board-title, .thread-title, .cat-title {
  font-family: 'Orbitron', 'Rajdhani', 'Arial Black', sans-serif !important;
  color: var(--holo-red-hi) !important;
  text-shadow:
    0 0 6px rgba(255, 26, 26, 0.9),
    0 0 22px rgba(255, 26, 26, 0.45),
    0 0 60px rgba(255, 26, 26, 0.25),
    0 2px 3px rgba(0,0,0,0.9) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ---- Links: holographic red ---- */
a { color: var(--holo-red-hi) !important; }
a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 26, 26, 0.9), 0 0 30px rgba(255, 26, 26, 0.5) !important;
}

/* ---- Buttons: black steel, red holographic edge ---- */
.btn, button.btn, input[type="submit"], input[type="button"] {
  background: linear-gradient(180deg, #1a0505 0%, #0a0000 60%, #000000 100%) !important;
  border: 1px solid var(--holo-red-deep) !important;
  color: var(--holo-red-hi) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.9), 0 0 14px rgba(255, 26, 26, 0.18), inset 0 1px 0 rgba(255,77,77,0.15) !important;
  font-family: 'Rajdhani', 'Arial', sans-serif !important;
}
.btn:hover, button.btn:hover, input[type="submit"]:hover, input[type="button"]:hover {
  border-color: var(--holo-red) !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #2a0808 0%, #140202 100%) !important;
  box-shadow: 0 0 18px rgba(255, 26, 26, 0.55), 0 0 46px rgba(255, 26, 26, 0.22), inset 0 1px 0 rgba(255,77,77,0.3) !important;
  text-shadow: 0 0 8px rgba(255,26,26,0.9) !important;
}

/* ---- Panels / cards: black glass, holographic red edges ---- */
.panel, .card, .post-box, .thread-row, .board-row, .widget {
  background: linear-gradient(180deg, rgba(20, 2, 2, 0.96) 0%, rgba(8, 0, 0, 0.96) 100%) !important;
  border: 1px solid rgba(255, 26, 26, 0.35) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.9), 0 0 22px rgba(255, 26, 26, 0.10), inset 0 0 40px rgba(163, 0, 0, 0.06) !important;
}

/* ---- Category bars: black command bar, red holographic rule ---- */
.cat-bar, .category-bar, .forumtable thead, .thead {
  background: linear-gradient(180deg, #1c0505 0%, #0a0000 55%, #000000 100%) !important;
  border-bottom: 2px solid var(--holo-red) !important;
  box-shadow: 0 2px 14px rgba(255, 26, 26, 0.35) !important;
  color: var(--holo-red-hi) !important;
  font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

/* ---- Casino reel: red-trimmed holographic machine ---- */
.chip-machine, .slot-machine {
  border: 2px solid var(--holo-red-deep) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #180303 0%, #0a0000 60%, #000000 100%) !important;
  box-shadow: 0 0 26px rgba(255, 26, 26, 0.28), 0 0 60px rgba(255, 26, 26, 0.10), inset 0 0 34px rgba(0,0,0,0.7) !important;
}
.chip-window, .slot-window {
  border-top: 1px solid var(--holo-red-deep) !important;
  border-bottom: 1px solid var(--holo-red-deep) !important;
}
.chip-lockline, .slot-lockline {
  background: linear-gradient(90deg, transparent, var(--holo-red) 20%, #ffffff 50%, var(--holo-red) 80%, transparent) !important;
  box-shadow: 0 0 12px rgba(255, 26, 26, 0.9), 0 0 30px rgba(255, 26, 26, 0.5) !important;
  animation: holo-scan 3.2s ease-in-out infinite !important;
}
@keyframes holo-scan {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* ---- Inputs / forms: dark, red holographic focus ---- */
input[type="text"], input[type="password"], input[type="email"], input[type="search"],
textarea, select {
  background: #0d0000 !important;
  border: 1px solid var(--holo-red-dim) !important;
  color: var(--ink) !important;
  border-radius: 8px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--holo-red) !important;
  box-shadow: 0 0 14px rgba(255, 26, 26, 0.45) !important;
  outline: none !important;
}
::placeholder { color: #7a5a5a !important; }

/* ---- Post headers / meta: red hologram text ---- */
.post-head, .postheader, .post-meta, .thread-meta, .byline {
  color: var(--holo-red-hot) !important;
  text-shadow: 0 0 8px rgba(255, 26, 26, 0.5) !important;
}

/* ---- Dividers: red holographic rules ---- */
hr, .divider, .rule {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,26,26,0.7) 30%, rgba(255,26,26,0.7) 70%, transparent) !important;
  box-shadow: 0 0 8px rgba(255,26,26,0.4) !important;
}

/* ---- Header / nav chrome: black steel ---- */
.header, .navbar, .topbar, #header {
  background: linear-gradient(180deg, #120202 0%, #000000 100%) !important;
  border-bottom: 1px solid rgba(255, 26, 26, 0.4) !important;
  box-shadow: 0 2px 18px rgba(255, 26, 26, 0.18) !important;
}

/* ---- Footer: black with red hologram line ---- */
.footer, #footer, .site-footer {
  background: #000000 !important;
  border-top: 2px solid var(--holo-red-deep) !important;
  box-shadow: 0 -2px 18px rgba(255, 26, 26, 0.25) !important;
  color: var(--ink-dim) !important;
}

/* ---- Scrollbar: red on black ---- */
::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
::-webkit-scrollbar-track { background: #000000 !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--holo-red-deep), var(--holo-red)) !important;
  border-radius: 5px !important;
  box-shadow: 0 0 8px rgba(255,26,26,0.5) !important;
}

/* ---- Selection: holographic red ---- */
::selection { background: rgba(255, 26, 26, 0.85) !important; color: #ffffff !important; }

/* ---- Badges / chips: red hologram pills ---- */
.badge, .chip, .tag, .pill {
  background: linear-gradient(180deg, rgba(255,26,26,0.22), rgba(163,0,0,0.22)) !important;
  border: 1px solid rgba(255, 26, 26, 0.6) !important;
  color: var(--holo-red-hot) !important;
  box-shadow: 0 0 10px rgba(255,26,26,0.3) !important;
}

/* ---- Tables: black crystal, red veins ---- */
table.forumtable, .forumtable {
  background: #050000 !important;
  border: 1px solid rgba(255, 26, 26, 0.3) !important;
}
.forumtable td, .forumtable th {
  border-bottom: 1px solid rgba(255, 26, 26, 0.12) !important;
}
.forumtable tbody tr:nth-child(even) {
  background: rgba(255, 26, 26, 0.035) !important;
}
.forumtable tbody tr:hover {
  background: rgba(255, 26, 26, 0.09) !important;
  box-shadow: inset 0 0 20px rgba(255,26,26,0.08) !important;
}

/* ---- Mobile: keep glows cheap on iPhone ---- */
@media (max-width: 768px) {
  h1, h2, h3, .site-title, .board-title, .thread-title, .cat-title {
    text-shadow: 0 0 8px rgba(255, 26, 26, 0.7), 0 2px 3px rgba(0,0,0,0.9) !important;
  }
  .chip-machine, .slot-machine {
    box-shadow: 0 0 14px rgba(255, 26, 26, 0.22), inset 0 0 24px rgba(0,0,0,0.7) !important;
  }
  body::before { background-size: 60px 60px !important; }
}


/* ==========================================================================
   PROFESSIONAL ALIGNMENT LAYER — clean, centered, consistent
   Added 2026-10-03. Does not touch holographic styling above.
   ========================================================================== */

/* ---- Global: kill horizontal overflow, set consistent box model ---- */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
*, *::before, *::after { box-sizing: border-box !important; }

/* ---- Main page container: centered, consistent max-width ---- */
main.page, .page, #page {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* ---- Site header: clean row, logo left, tagline aligned ---- */
.site-header .header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 12px 16px !important;
}
.site-header .brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.tagline-row { display: flex !important; align-items: center !important; }

/* ---- Nav: centered, even spacing ---- */
.main-nav, nav.main-nav, .slot-nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 8px 16px !important;
}

/* ---- Casino reel: centered, no overflow ---- */
.slot-machine, .chip-machine {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
}
.slot-window, .chip-window {
  overflow: hidden !important;
  max-width: 100% !important;
}
/* ENGAGE button must not overflow viewport */
.slot-machine .btn, .chip-machine .btn,
button[class*="engage"], .engage-btn {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ---- Action button grid: clean 2-col, equal widths ---- */
.pro-cards, nav.pro-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  max-width: 600px !important;
  margin: 12px auto !important;
  padding: 0 16px !important;
}
.pro-cards .btn, .pro-cards button, .pro-cards a.btn {
  width: 100% !important;
  text-align: center !important;
  padding: 14px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
}

/* ---- Auth buttons: centered row ---- */
.auth-row, .login-row, .auth-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin: 12px auto !important;
  max-width: 600px !important;
  padding: 0 16px !important;
}

/* ---- Search row: aligned, no cramping ---- */
.search-row, .search-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 600px !important;
  margin: 12px auto !important;
  padding: 0 16px !important;
}
.search-row input[type="text"], .search-row input[type="search"],
.search-bar input[type="text"], .search-bar input[type="search"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.search-row button, .search-bar button {
  flex: 0 0 auto !important;
}

/* ---- Banner: centered text, clean wrap ---- */
.banner, .recruit-banner, .new-recruits {
  text-align: center !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 12px 16px !important;
}

/* ---- Forum blocks: consistent spacing ---- */
section.panel.forum-block, .forum-block {
  margin: 16px auto !important;
  max-width: 1200px !important;
}
.catbar, .catbar-split {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 16px !important;
}
.board-row, .thread-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
}

/* ---- Portal gate / hero images: centered, responsive ---- */
.portal-gate, .pro-hero {
  text-align: center !important;
  max-width: 1200px !important;
  margin: 16px auto !important;
  padding: 0 16px !important;
}
.portal-gate img, .pro-hero img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* ---- Footer: centered content ---- */
.site-footer, footer.site-footer {
  text-align: center !important;
  padding: 20px 16px !important;
}
.site-footer > * {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- Forms: aligned labels and inputs ---- */
form label {
  display: block !important;
  margin-bottom: 4px !important;
  text-align: left !important;
}
form input, form textarea, form select {
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 12px !important;
  margin-bottom: 12px !important;
}

/* ---- Mobile: everything stacks cleanly, no overflow ---- */
@media (max-width: 768px) {
  main.page, .page, #page { padding-left: 12px !important; padding-right: 12px !important; }
  .site-header .header-inner { justify-content: center !important; text-align: center !important; }
  .pro-cards, nav.pro-cards { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 0 12px !important; }
  .pro-cards .btn, .pro-cards button, .pro-cards a.btn { font-size: 13px !important; padding: 12px 6px !important; min-height: 48px !important; }
  .catbar, .catbar-split { flex-wrap: wrap !important; gap: 8px !important; }
  .board-row, .thread-row { flex-wrap: wrap !important; }
  img { max-width: 100% !important; height: auto !important; }
  table { display: block !important; overflow-x: auto !important; max-width: 100% !important; }
}


/* ---- Slot utils (TELL THE KING / BLOODLINE / TACTICAL / WARP): clean 2x2 grid ---- */
.slot-utils {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  max-width: 600px !important;
  margin: 12px auto !important;
  padding: 0 16px !important;
  align-items: stretch !important;
}
.slot-utils .tell-king-nav,
.slot-utils .theme-cycle,
.slot-utils .mode-dial,
.slot-utils .warp-nav {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 14px 8px !important;
  min-height: 52px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  .slot-utils { gap: 8px !important; padding: 0 12px !important; }
  .slot-utils .tell-king-nav,
  .slot-utils .theme-cycle,
  .slot-utils .mode-dial,
  .slot-utils .warp-nav {
    font-size: 13px !important;
    padding: 12px 6px !important;
    min-height: 48px !important;
  }
}
/* ============================================================
   CINEMATIC 3D + SCI-FI LAYER — appended 2026-10-03
   Blade Runner x Iron Man HUD. Pure additive.
   ============================================================ */

/* ---------- 3D stage: give the page perspective ---------- */
body{
  perspective: 1600px;
}

/* ---------- Cinematic vignette + depth fog overlay ---------- */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9990; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 12%, transparent 88%, rgba(0,0,0,.4) 100%);
}

/* ---------- Animated starfield/particle background (CSS-only, GPU) ---------- */
body::before{
  content:"";
  position:fixed; inset:-100%; z-index:-2; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,80,80,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 8%,  rgba(255,150,150,.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 34% 66%, rgba(255,60,60,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 44%, rgba(255,120,120,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 90%, rgba(255,90,90,.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 76% 74%, rgba(255,40,40,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 82%, rgba(255,140,140,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 38%, rgba(255,70,70,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 12%, rgba(255,110,110,.65) 50%, transparent 51%),
    radial-gradient(2px 2px at 6% 58%,  rgba(255,50,50,.7) 50%, transparent 51%);
  animation: starDrift 90s linear infinite;
  opacity:.55;
}
@keyframes starDrift{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-6%, 9%, 0); }
}

/* ---------- Moving holographic scanline (cinematic sweep) ---------- */
.scanline-sweep{
  position:fixed; left:0; right:0; height:120px; z-index:9989; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(255,30,30,.06) 40%, rgba(255,60,60,.12) 50%, rgba(255,30,30,.06) 60%, transparent);
  animation: scanSweep 7s ease-in-out infinite;
}
@keyframes scanSweep{
  0%{ top:-140px; } 100%{ top:110%; }
}

/* ---------- 3D cards/panels: layered depth + hover tilt ---------- */
.panel, .card, .post-box, .prog-card, .board-row, .thread-row, .forumblock{
  transform-style:preserve-3d;
  box-shadow:
    0 1px 0 rgba(255,60,60,.15),
    0 8px 16px rgba(0,0,0,.55),
    0 24px 48px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,120,120,.12);
  transition: transform .28s cubic-bezier(.2,.7,.3,1.2), box-shadow .28s ease;
  position:relative;
}
.panel:hover, .card:hover, .post-box:hover, .prog-card:hover{
  transform: perspective(900px) rotateX(2.5deg) rotateY(-2.5deg) translateZ(8px);
  box-shadow:
    0 2px 0 rgba(255,80,80,.25),
    0 14px 28px rgba(0,0,0,.6),
    0 40px 80px rgba(120,0,0,.35),
    0 0 32px rgba(255,40,40,.18),
    inset 0 1px 0 rgba(255,150,150,.2);
}

/* ---------- HUD corner brackets on panels (sci-fi framing) ---------- */
.panel::before, .card::before, .post-box::before, .prog-card::before{
  content:""; position:absolute; inset:6px; pointer-events:none; z-index:2;
  background:
    linear-gradient(to right, rgba(255,60,60,.9) 2px, transparent 2px) 0 0 / 18px 18px no-repeat,
    linear-gradient(to bottom, rgba(255,60,60,.9) 2px, transparent 2px) 0 0 / 18px 18px no-repeat,
    linear-gradient(to left, rgba(255,60,60,.9) 2px, transparent 2px) 100% 0 / 18px 18px no-repeat,
    linear-gradient(to bottom, rgba(255,60,60,.9) 2px, transparent 2px) 100% 0 / 18px 18px no-repeat,
    linear-gradient(to right, rgba(255,60,60,.9) 2px, transparent 2px) 0 100% / 18px 18px no-repeat,
    linear-gradient(to top, rgba(255,60,60,.9) 2px, transparent 2px) 0 100% / 18px 18px no-repeat,
    linear-gradient(to left, rgba(255,60,60,.9) 2px, transparent 2px) 100% 100% / 18px 18px no-repeat,
    linear-gradient(to top, rgba(255,60,60,.9) 2px, transparent 2px) 100% 100% / 18px 18px no-repeat;
  opacity:.55;
}

/* ---------- 3D beveled buttons: extruded + press-down ---------- */
.btn, button.btn, .action-btn, a.btn{
  transform-style:preserve-3d;
  box-shadow:
    0 4px 0 #5c0000,
    0 6px 0 #3a0000,
    0 10px 18px rgba(0,0,0,.6),
    0 0 18px rgba(255,40,40,.25),
    inset 0 1px 0 rgba(255,160,160,.35),
    inset 0 -2px 0 rgba(0,0,0,.4);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active, button.btn:active, .action-btn:active, a.btn:active{
  transform: translateY(4px);
  box-shadow:
    0 1px 0 #5c0000,
    0 4px 10px rgba(0,0,0,.6),
    0 0 24px rgba(255,40,40,.35),
    inset 0 2px 6px rgba(0,0,0,.5);
}

/* ---------- Pulsing red energy lines on key borders ---------- */
.catbar, .panel-title, .section-head{
  position:relative;
}
.catbar::after, .panel-title::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, transparent, #ff2a2a 20%, #ff8080 50%, #ff2a2a 80%, transparent);
  animation: energyPulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,50,50,.8));
}
@keyframes energyPulse{
  0%,100%{ opacity:.55; } 50%{ opacity:1; }
}

/* ---------- Cinematic 3D-extruded headings ---------- */
h1, h2, .page-title, .site-title{
  text-shadow:
    0 1px 0 #7a0000,
    0 2px 0 #5c0000,
    0 3px 0 #3d0000,
    0 4px 0 #200000,
    0 6px 12px rgba(0,0,0,.7),
    0 0 28px rgba(255,50,50,.5);
  letter-spacing:.14em;
}

/* ---------- Casino reel: 3D cylinder depth ---------- */
.casino-reel, .reel-machine{
  perspective: 800px;
  box-shadow:
    0 20px 40px rgba(0,0,0,.7),
    0 40px 80px rgba(120,0,0,.4),
    inset 0 2px 0 rgba(255,150,150,.25),
    inset 0 -8px 24px rgba(0,0,0,.6);
  border-radius:14px;
  transform: perspective(1000px) rotateX(4deg);
}
.reel-window, .reel-slot{
  background:linear-gradient(180deg, #0d0000 0%, #1c0505 45%, #1c0505 55%, #0d0000 100%);
  box-shadow: inset 0 10px 24px rgba(0,0,0,.85), inset 0 -10px 24px rgba(0,0,0,.85);
}

/* ---------- Floating 3D headers ---------- */
.site-header, header.site, .topbar{
  box-shadow:
    0 8px 24px rgba(0,0,0,.6),
    0 2px 0 rgba(255,60,60,.2);
  transform: translateZ(20px);
}

/* ---------- Cinematic page-enter transition ---------- */
main, .content, #content{
  animation: cinemaIn .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes cinemaIn{
  from{ opacity:0; transform: perspective(1200px) translateZ(-120px) scale(.985); filter:brightness(.6); }
  to{ opacity:1; transform: perspective(1200px) translateZ(0) scale(1); filter:brightness(1); }
}

/* ---------- Depth fog on long sections ---------- */
.forum-list, .thread-list, .board-list{
  -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 92%, transparent 100%);
}

/* ---------- Mobile: keep it cinematic but cheap (GPU-only, reduced) ---------- */
@media (max-width: 768px){
  body::before{ opacity:.3; animation-duration:140s; }
  body::after{ background: radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(0,0,0,.5) 100%); }
  .panel:hover, .card:hover, .post-box:hover, .prog-card:hover{
    transform: perspective(900px) translateZ(4px);
  }
  .panel::before, .card::before, .post-box::before, .prog-card::before{ opacity:.35; }
  h1, h2, .page-title, .site-title{
    text-shadow: 0 2px 0 #4a0000, 0 4px 10px rgba(0,0,0,.7), 0 0 18px rgba(255,50,50,.4);
  }
  .casino-reel, .reel-machine{ transform: perspective(1000px) rotateX(2deg); }
  main, .content, #content{ animation-duration:.45s; }
}
@media (prefers-reduced-motion: reduce){
  body::before, .scanline-sweep, .catbar::after, .panel-title::after,
  main, .content, #content{ animation:none !important; }
}

/* ============================================================
   TACTICAL ARMORED BORDER LAYER — v20261003f
   VEVOR hard-case inspired: reinforced corners, rivets, plated
   segments, industrial rugged borders + traveling red energy light.
   Pure CSS. GPU-friendly (transform/opacity/conic angle only).
   ============================================================ */

/* Register the traveling-light angle for conic-gradient animation.
   Browsers without @property get the static fallback (pulse glow). */
@property --tac-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes tac-travel {
  to { --tac-angle: 360deg; }
}
@keyframes tac-breathe {
  0%, 100% { box-shadow: 0 0 8px rgba(255,20,20,.25), 0 0 18px rgba(255,20,20,.10); }
  50%      { box-shadow: 0 0 16px rgba(255,40,40,.55), 0 0 34px rgba(255,20,20,.22); }
}
@keyframes tac-sweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---- Shared tactical armor base: tables, cards, panels, post boxes ---- */
table.forum-table,
.forum-table,
.card,
.panel,
.post-box,
.category-block,
.catbar,
.board-row,
.thread-row,
.prog-card,
.stat-box,
.note-card,
.widget-card {
  position: relative;
  /* plated armored border: segmented look via layered gradients */
  border: 1px solid rgba(255,30,30,.55) !important;
  /* corner rivets: radial dots pinned at the 4 corners */
  background-image:
    radial-gradient(circle at 6px 6px,     rgba(255,70,70,.9) 0 2px, rgba(0,0,0,.7) 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 6px) 6px,     rgba(255,70,70,.9) 0 2px, rgba(0,0,0,.7) 3px, transparent 4px),
    radial-gradient(circle at 6px calc(100% - 6px),     rgba(255,70,70,.9) 0 2px, rgba(0,0,0,.7) 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), rgba(255,70,70,.9) 0 2px, rgba(0,0,0,.7) 3px, transparent 4px),
    /* brushed dark-metal industrial texture */
    repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 2px, transparent 2px 5px) !important;
  background-repeat: no-repeat !important;
  animation: tac-breathe 3.2s ease-in-out infinite;
}

/* ---- Traveling red energy light around the border perimeter ----
   A pseudo-element ring with a conic gradient whose bright segment
   orbits the box. Uses --tac-angle registered above. */
table.forum-table::before,
.forum-table::before,
.card::before,
.panel::before,
.post-box::before,
.category-block::before,
.catbar::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  /* bright red comet segment on dark armor, orbiting */
  background: conic-gradient(
    from var(--tac-angle),
    transparent 0deg,
    rgba(255,25,25,.05) 300deg,
    rgba(255,60,60,.95) 345deg,
    rgba(255,200,200,1) 358deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  animation: tac-travel 5s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,40,40,.8));
}

/* ---- Reinforced corner plates (like the case's corner guards) ---- */
.card::after,
.panel::after,
.post-box::after,
.forum-table::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  /* L-shaped corner reinforcements via corner gradients */
  background:
    linear-gradient(to right, rgba(255,45,45,.85) 14px, transparent 14px) top left / 14px 3px,
    linear-gradient(to bottom, rgba(255,45,45,.85) 14px, transparent 14px) top left / 3px 14px,
    linear-gradient(to left, rgba(255,45,45,.85) 14px, transparent 14px) top right / 14px 3px,
    linear-gradient(to bottom, rgba(255,45,45,.85) 14px, transparent 14px) top right / 3px 14px,
    linear-gradient(to right, rgba(255,45,45,.85) 14px, transparent 14px) bottom left / 14px 3px,
    linear-gradient(to top, rgba(255,45,45,.85) 14px, transparent 14px) bottom left / 3px 14px,
    linear-gradient(to left, rgba(255,45,45,.85) 14px, transparent 14px) bottom right / 14px 3px,
    linear-gradient(to top, rgba(255,45,45,.85) 14px, transparent 14px) bottom right / 3px 14px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px rgba(255,40,40,.6));
}

/* ---- Tactical table header: animated red underglow ---- */
.forum-table thead th,
table.forum-table thead th,
.catbar {
  position: relative;
  overflow: visible;
}
.forum-table thead th::after,
table.forum-table thead th::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,30,30,.2) 15%,
    rgba(255,60,60,1) 50%,
    rgba(255,30,30,.2) 85%,
    transparent 100%);
  background-size: 200% 100%;
  animation: tac-sweep 2.8s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,40,40,.9));
}

/* ---- Tactical table rows: plated segment dividers ---- */
.forum-table tbody tr,
table.forum-table tbody tr,
.board-row,
.thread-row {
  border-bottom: 1px solid rgba(255,30,30,.18) !important;
  background-image: repeating-linear-gradient(90deg,
    transparent 0 34px,
    rgba(255,40,40,.06) 34px 35px) !important; /* bolted-plate seams */
}
.forum-table tbody tr:hover,
.board-row:hover,
.thread-row:hover {
  background-color: rgba(255,25,25,.06) !important;
}

/* ---- TACTICAL BUTTONS: armored plates with living energy ---- */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
a.btn,
.action-btn,
.engage-btn,
.tell-king-nav,
.warp-nav,
.rail-btn,
.cbtn,
#go,
#kbdhide,
.page-btn,
.pg-btn {
  position: relative !important;
  overflow: hidden;
  /* armored plate: dark steel with red tactical trim */
  border: 1px solid rgba(255,35,35,.7) !important;
  border-radius: 6px !important;
  background-color: #141014 !important;
  background-image:
    radial-gradient(circle at 5px 5px, rgba(255,80,80,.95) 0 1.6px, rgba(0,0,0,.8) 2.4px, transparent 3px),
    radial-gradient(circle at calc(100% - 5px) 5px, rgba(255,80,80,.95) 0 1.6px, rgba(0,0,0,.8) 2.4px, transparent 3px),
    radial-gradient(circle at 5px calc(100% - 5px), rgba(255,80,80,.95) 0 1.6px, rgba(0,0,0,.8) 2.4px, transparent 3px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), rgba(255,80,80,.95) 0 1.6px, rgba(0,0,0,.8) 2.4px, transparent 3px),
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 45%, rgba(0,0,0,.45) 100%) !important;
  background-repeat: no-repeat !important;
  color: #ffb3b3 !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  animation: tac-breathe 3.2s ease-in-out infinite;
  transition: transform .15s ease, box-shadow .2s ease;
}

/* traveling energy on button borders */
button::before,
input[type="submit"]::before,
input[type="button"]::before,
.btn::before,
a.btn::before,
.action-btn::before,
.rail-btn::before,
.cbtn::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--tac-angle),
    transparent 0deg,
    rgba(255,25,25,.08) 280deg,
    rgba(255,70,70,1) 340deg,
    rgba(255,220,220,1) 356deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: tac-travel 4s linear infinite;
  filter: drop-shadow(0 0 5px rgba(255,50,50,.85));
}

/* light sweep across button face on hover */
button::after,
input[type="submit"]::after,
.btn::after,
a.btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(255,120,120,.28) 50%,
    transparent 60%);
  background-size: 250% 100%;
  background-position: 120% 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
button:hover::after,
input[type="submit"]:hover::after,
.btn:hover::after,
a.btn:hover::after {
  opacity: 1;
  animation: tac-sweep .7s linear 1;
  background-position: -20% 0;
}

/* hover: plate lifts, energy intensifies */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
a.btn:hover,
.action-btn:hover,
.rail-btn:hover,
.cbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(255,30,30,.45), 0 0 26px rgba(255,30,30,.25) !important;
  color: #ffd9d9 !important;
  border-color: rgba(255,80,80,.95) !important;
}

/* active: plate slams like a case latch */
button:active,
input[type="submit"]:active,
.btn:active,
a.btn:active {
  transform: translateY(1px) scale(.98);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.7), 0 0 10px rgba(255,30,30,.4) !important;
}

/* keep the King's circular rail icon buttons round */
.rail-btn { border-radius: 50% !important; }
.rail-btn::before { border-radius: 50%; }

/* ---- Mobile: calm the energy, keep the armor ---- */
@media (max-width: 640px) {
  table.forum-table::before, .forum-table::before,
  .card::before, .panel::before, .post-box::before,
  .category-block::before, .catbar::before,
  button::before, .btn::before, a.btn::before,
  .action-btn::before, .rail-btn::before, .cbtn::before,
  input[type="submit"]::before, input[type="button"]::before {
    animation-duration: 8s; /* slower orbit on phones */
    filter: none;
  }
  table.forum-table, .forum-table, .card, .panel, .post-box,
  .category-block, .catbar, .board-row, .thread-row,
  button, .btn, a.btn {
    animation-duration: 5s;
  }
}

/* ---- Reduced motion: armor stays, animation stops ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
  }
}

/* === LEVER + POSITION MARKERS (2026-10-03): the reel is a slot-machine lever;
   diamonds are live position markers that blaze while the boards spin ====== */
#forumLoopWrap.lever-live{
  border-color:rgba(255,45,60,.75);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7), inset 0 2px 10px rgba(0,0,0,.6), 0 0 34px rgba(255,30,45,.35);
}
#forumLoopWrap.lever-live .rivet:not(.on){opacity:.45;}
#forumLoopWrap.lever-live .rivet.on i{
  transform:rotate(45deg) scale(1.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.65), 0 0 20px 5px rgba(255,45,60,.95), inset 0 1px 1px rgba(255,255,255,.6);
  animation:marker-blaze .45s ease-in-out infinite alternate;
}
#forumLoopWrap.lever-live .rivet.on i::after{opacity:1;}
@keyframes marker-blaze{from{filter:brightness(1);}to{filter:brightness(1.7);}}
@media (prefers-reduced-motion: reduce){
  #forumLoopWrap.lever-live .rivet.on i{animation:none;}
}

/* REEL TOUCH LOCK — page never scrolls when touching the lever */
#forumLoopWrap,
#forumLoopWrap .reel-sectors,
#forumLoopWrap .reel-body,
.forum-loop {
  touch-action: none !important;
  overscroll-behavior: contain !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
#forumLoopWrap.lever-live {
  touch-action: none !important;
}
/* Keep page scroll normal everywhere else */

/* ========== BOARD FINDER + BIG NAMES + DIAMOND LABELS ========== */
/* Finder search box above the reel */
.board-finder {
  position: relative;
  max-width: 600px;
  margin: 0 auto 12px;
  padding: 0 16px;
  z-index: 20;
}
#boardFinderInput {
  width: 100%;
  background: rgba(10, 10, 26, 0.95);
  border: 2px solid rgba(255, 25, 25, 0.5);
  border-radius: 12px;
  color: #fff;
  padding: 14px 44px 14px 18px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#boardFinderInput:focus {
  border-color: #ff1919;
  box-shadow: 0 0 20px rgba(255, 25, 25, 0.4), inset 0 0 12px rgba(255, 25, 25, 0.08);
}
#boardFinderInput::placeholder { color: rgba(255, 120, 120, 0.45); }
#boardFinderClear {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 100, 100, 0.6);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
#boardFinderClear:active { color: #ff1919; }
.board-finder-results {
  display: none;
  position: absolute;
  left: 16px; right: 16px; top: 100%;
  margin-top: 6px;
  background: rgba(8, 8, 20, 0.98);
  border: 2px solid rgba(255, 25, 25, 0.6);
  border-radius: 12px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(255, 25, 25, 0.25), 0 4px 16px rgba(0, 0, 0, 0.6);
  z-index: 30;
}
.board-finder-results.open { display: block; }
.bf-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 25, 25, 0.12);
  color: #fff;
  padding: 13px 16px;
  font-size: 15px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.bf-result:last-child { border-bottom: none; }
.bf-result:active { background: rgba(255, 25, 25, 0.18); }
.bf-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-go { color: #ff4444; font-size: 18px; margin-left: 12px; flex-shrink: 0; }
.bf-no-match { padding: 16px; color: rgba(255, 150, 150, 0.6); font-size: 14px; text-align: center; }
.bf-more { padding: 10px 16px; color: rgba(255, 150, 150, 0.5); font-size: 12px; text-align: center; font-style: italic; }

/* BIG NAME OVERLAY — huge readable board name while lever spins */
.board-big-name {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  max-width: 92%;
  text-align: center;
}
#forumLoopWrap.lever-live .board-big-name { opacity: 1; }
#boardBigNameText {
  display: inline-block;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 12px rgba(255, 25, 25, 0.9),
    0 0 32px rgba(255, 25, 25, 0.6),
    0 0 64px rgba(255, 25, 25, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.9);
  background: rgba(5, 5, 12, 0.72);
  border: 2px solid rgba(255, 25, 25, 0.5);
  border-radius: 16px;
  padding: 14px 26px;
  backdrop-filter: blur(4px);
  animation: bigNamePulse 1.2s ease-in-out infinite;
}
@keyframes bigNamePulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 25, 25, 0.3); }
  50% { box-shadow: 0 0 40px rgba(255, 25, 25, 0.55); }
}
@media (max-width: 480px) {
  #boardBigNameText { font-size: 26px; padding: 12px 20px; }
}

/* DIAMOND NUMBERS — tiny labels so diamonds are distinguishable */
.rivet { position: relative; }
.rivet-num {
  position: absolute;
  bottom: -2px; right: -2px;
  min-width: 16px; height: 16px;
  background: rgba(255, 25, 25, 0.9);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  padding: 0 3px;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(255, 25, 25, 0.6);
}
.rivet.on .rivet-num {
  background: #fff;
  color: #cc0000;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* === PULLEY (2026-10-03): left slider = rope, boards = driven pulley.
   gearRatio = K * copyH / (gutterH - arrowH); one slider sweep = K=3 board
   cycles. Diamonds are TIMING MARKS: intensity follows measured boards/sec
   via --spin (0..1). No drift: arrow position and diamonds both derive from
   the reel odometer (unwrapped / scrollTop), single source of truth. ===== */
#loopGutter{position:relative;}
#gearSpeed{
  position:absolute;bottom:2px;left:0;right:0;
  text-align:center;font-size:9px;letter-spacing:1px;
  color:rgba(255,130,130,.8);pointer-events:none;
  font-variant-numeric:tabular-nums;z-index:6;
}
#forumLoopWrap .rivet i{filter:brightness(calc(1 + var(--spin,0)*1.1));}
#forumLoopWrap .rivet.on i{
  box-shadow:0 0 0 1px rgba(0,0,0,.65),
    0 0 calc(14px + var(--spin,0)*30px) calc(3px + var(--spin,0)*9px) rgba(255,45,60,.95),
    inset 0 1px 1px rgba(255,255,255,.6);
}
@media (prefers-reduced-motion: reduce){
  #forumLoopWrap .rivet i{filter:none;}
}

/* PULLEY rope: the gutter is a rope channel — touch never scrolls the page here */
#loopGutter, #scrollArrow{ touch-action:none !important; overscroll-behavior:contain !important; }

/* === PULLEY V2 (2026-10-03): big thumb handle + diamond gauge === */
.loop-gutter{width:64px !important;}
.scroll-arrow{
  width:56px !important;
  min-height:64px !important;
  padding:8px 0 !important;
}
.scroll-arrow i{
  width:28px !important;
  height:28px !important;
  margin:6px auto !important;
}
.scroll-arrow .sa-chev{font-size:13px !important;}
/* right-rail diamonds become a vertical gauge that glides to the sight line */
[data-rivets="right"]{
  justify-content:flex-start !important;
  will-change:transform;
}
[data-rivets="right"] .rivet{flex:0 0 auto;}

/* BRIGHTEN REEL TABLE — King's order 2026-10-03 */
#forumLoopWrap,
.forum-loop,
#forumLoopWrap .reel-body,
#forumLoopWrap .reel-sectors {
  background: rgba(40, 8, 12, 0.92) !important;
  filter: brightness(1.6) !important;
}
#forumLoopWrap .board-card,
#forumLoopWrap .board-row {
  background: rgba(60, 12, 16, 0.95) !important;
  filter: brightness(1.4) !important;
  border-color: rgba(255, 80, 80, 0.6) !important;
}
#forumLoopWrap .board-card h3,
#forumLoopWrap .board-row h3,
#forumLoopWrap .board-name {
  color: #fff !important;
  text-shadow: 0 0 12px rgba(255, 50, 50, 0.8) !important;
}
/* Rope slider brighter too */
#forumLoopWrap .rope-slider,
#forumLoopWrap .slider-gutter,
#scrollArrow {
  filter: brightness(1.8) !important;
  background: rgba(50, 10, 14, 0.9) !important;
}

/* BRIGHTEN ROPE SLIDER — King's order, the left scroll */
#loopGutter,
.loop-gutter {
  background: rgba(50, 10, 14, 0.95) !important;
  filter: brightness(1.8) !important;
  border: 2px solid rgba(255, 80, 80, 0.7) !important;
  box-shadow: 0 0 16px rgba(255, 40, 40, 0.4) !important;
}
#loopGutter .gutter-track,
.loop-gutter .gutter-track {
  background: rgba(255, 60, 60, 0.5) !important;
  filter: brightness(1.6) !important;
}
#scrollArrow,
.scroll-arrow {
  background: rgba(80, 15, 20, 0.95) !important;
  filter: brightness(1.8) !important;
  border: 2px solid rgba(255, 100, 100, 0.8) !important;
  box-shadow: 0 0 20px rgba(255, 40, 40, 0.6) !important;
}

/* TRUE PULLEY (2026-10-03): rigid rope, turning wheel — single fixed pulley */
/* the wheel at the top of the gutter — the rope goes over it */
.pulley-wheel{
  position:absolute !important; top:4px !important; left:50% !important;
  width:48px !important; height:48px !important; border-radius:50% !important;
  transform:translateX(-50%) !important;
  background:radial-gradient(circle at 35% 30%, #6a2020, #2a0a0a 70%) !important;
  border:3px solid #ff6060 !important;
  box-shadow:0 0 14px rgba(255,60,60,.55), inset 0 0 10px #000 !important;
  z-index:3 !important; pointer-events:none !important;
}
.pw-rotor{ position:absolute !important; inset:5px !important; border-radius:50% !important; will-change:transform !important; }
.pw-spoke{
  position:absolute !important; left:50% !important; top:50% !important;
  width:4px !important; height:100% !important; margin:0 !important; padding:0 !important;
  background:linear-gradient(180deg,#ffb0b0,#c03030 45%,#701414) !important;
  border-radius:2px !important;
}
.pw-spoke:nth-child(1){ transform:translate(-50%,-50%) rotate(0deg) !important; }
.pw-spoke:nth-child(2){ transform:translate(-50%,-50%) rotate(45deg) !important; }
.pw-spoke:nth-child(3){ transform:translate(-50%,-50%) rotate(90deg) !important; }
.pw-spoke:nth-child(4){ transform:translate(-50%,-50%) rotate(135deg) !important; }
.pulley-wheel::after{
  content:'' !important; position:absolute !important; left:50% !important; top:50% !important;
  width:12px !important; height:12px !important; border-radius:50% !important;
  background:radial-gradient(circle at 40% 35%, #ffe0e0, #ff6060) !important;
  transform:translate(-50%,-50%) !important;
  box-shadow:0 0 8px #ff5050 !important;
}
/* the rope: twisted red cable running under the wheel */
#loopGutter .gutter-track{
  position:absolute !important; left:50% !important; top:56px !important; bottom:8px !important;
  width:12px !important; transform:translateX(-50%) !important;
  background:repeating-linear-gradient(-48deg,#d05050 0 5px,#7a1e1e 5px 10px) !important;
  border-radius:6px !important;
  box-shadow:inset 0 0 5px rgba(0,0,0,.65), 0 0 8px rgba(255,90,90,.35) !important;
}
/* the grip: a handle clamped on the rope */
#scrollArrow{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 4px, rgba(255,255,255,.06) 4px 8px),
    linear-gradient(180deg,#b03030,#5c1212) !important;
  border-radius:16px !important;
  border:2px solid #ff8080 !important;
  box-shadow:0 0 18px rgba(255,60,60,.6), inset 0 2px 4px rgba(255,255,255,.25) !important;
  z-index:2 !important;
}

/* BUBBLE REMOVED - King's order 2026-10-03 */
.board-big-name, #boardBigName { display: none !important; }