html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;

  user-select: none;

  touch-action: pinch-zoom;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  -webkit-touch-callout: none;
}

input, textarea,
#ev-body, .email-row, #bank-stats,
.msg-text, .msg-sub {
  user-select: text;
}

::selection {
  background: #316ac5;
  color: #fff;
}

.scene {
  position: fixed;
  inset: 0;
  /* The side band is the default so a scene is never transparent for the
     frame between being unhidden and being fitted; .lb-y takes over when the
     window turns out to band the other way. See the block above #scene-tinder
     and js/desktop.js fitScene(). Scenes that set their own background - boot,
     intro, desktop - win on id and define no --lb-x. */
  background: var(--lb-x);
}

.hidden {
  display: none !important;
}

#whiteout {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s linear, visibility 0.7s linear;
  z-index: 99;
}

#whiteout.on {
  opacity: 1;
  visibility: visible;
  transition: none;
}

#fader {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 1;
  pointer-events: none;
  transition-property: opacity, visibility;
  transition-duration: 0.4s;
  transition-timing-function: linear;
  z-index: 100;
}

#fader.faded-in {
  opacity: 0;
  visibility: hidden;
}

#scene-boot {
  background: #000;
}

#boot-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1672px;
  height: 941px;

  transform-origin: 0 0;
}

#boot-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#boot-trough {
  position: absolute;
  left: 632px;
  top: 705px;
  width: 380px;
  height: 48px;
  box-sizing: border-box;
  background: #000;
  border: 3px solid #b8bcc8;
  border-radius: 10px;
}

#boot-blocks {
  position: absolute;
  left: 6px;
  top: 5px;
  height: 32px;
  display: flex;
  gap: 2px;
}

#boot-blocks .block {
  width: 12px;
  height: 32px;
  background: transparent;
  border-radius: 1px;
}

#boot-blocks .block.on {
  background: linear-gradient(
    #99c2ff 0 4px,
    #4a86e8 4px 10px,
    #2f64d6 10px 24px,
    #1e46a8 24px 32px);
}

#boot-line {
  position: fixed;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: 'VT323', monospace;
  font-size: 24px;
  line-height: 24px;
  color: #9ea2b2;
  white-space: pre;
}

#scene-intro {
  z-index: 96;
}

#intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

#scene-desktop {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#desktop-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex: none;
  transform-origin: center center;
  overflow: hidden;
  background: #0a1a33;
}

#wallpaper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

#taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  display: flex;
  align-items: stretch;
  background: linear-gradient(
    #4f80e8 0 4px,
    #3a70e4 4px 10px,
    #2760da 10px 24px,
    #1e51c8 24px 56px,
    #1846ae 56px 72px,
    #123a92 72px 80px);
  z-index: 12;
}

#start-btn {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 34px 0 22px;
  border: none;
  cursor: pointer;
  background: linear-gradient(
    #8fd486 0 6px,
    #55b04c 6px 16px,
    #3d9e37 16px 40px,
    #339030 40px 62px,
    #27802c 62px 80px);
  clip-path: polygon(
    0 0,
    calc(100% - 24px) 0,
    calc(100% - 24px) 6px,
    calc(100% - 14px) 6px,
    calc(100% - 14px) 14px,
    calc(100% - 6px) 14px,
    calc(100% - 6px) 26px,
    100% 26px,
    100% calc(100% - 26px),
    calc(100% - 6px) calc(100% - 26px),
    calc(100% - 6px) calc(100% - 14px),
    calc(100% - 14px) calc(100% - 14px),
    calc(100% - 14px) calc(100% - 6px),
    calc(100% - 24px) calc(100% - 6px),
    calc(100% - 24px) 100%,
    0 100%);
}

#start-btn:hover { filter: brightness(1.08); }
#start-btn:active { filter: brightness(0.9); }

#start-flag {
  width: 46px;
  height: 46px;
  flex: none;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.4));
}

#start-text {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 46px;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

#tray {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 10px;
  background: linear-gradient(
    #33a2ec 0 4px,
    #1d92e4 4px 10px,
    #128ade 10px 24px,
    #0e7ad0 24px 56px,
    #0c6cbc 56px 72px,
    #0a5ca6 72px 80px);
  box-shadow: -2px 0 0 #0a3d84, -3px 0 0 rgba(255, 255, 255, 0.25);
}

#tray-clock {
  font-family: 'Silkscreen', monospace;
  font-size: 32px;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  margin-left: 8px;
  user-select: none;
  position: relative;
  top: -3px;
}

#icon-layer {
  position: absolute;
  inset: 0;
}

.desk-icon {
  position: absolute;
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
}

.desk-icon.dragging {
  opacity: 0.75;
  z-index: 6;
  pointer-events: none;
}

.icon-slot {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.desk-icon img {
  width: 120px;
  height: 120px;
  image-rendering: pixelated;
}

.desk-icon .label {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 22px;
  line-height: 24px;
  color: #fff;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.85);
}

#wallpaper,
#taskbar,
.desk-icon img {
  user-select: none;
  -webkit-user-drag: none;
}

#marquee {
  position: absolute;
  display: none;
  background: rgba(0, 120, 215, 0.28);
  border: 1px solid rgba(0, 120, 215, 0.85);
  z-index: 5;
  pointer-events: none;
}

.desk-icon.selected {
  background: rgba(60, 150, 235, 0.30);
  outline: 1px solid rgba(140, 200, 255, 0.55);
}

#desktop-tint {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(120% 95% at 50% 46%,
      rgba(4, 8, 20, 0) 0%,
      rgba(4, 8, 20, 0.10) 55%,
      rgba(4, 8, 20, 0.34) 100%),

    linear-gradient(
      rgba(4, 8, 20, 0.58) 0%,
      rgba(4, 8, 20, 0.48) 34%,
      rgba(4, 8, 20, 0.42) 62%,
      rgba(4, 8, 20, 0.46) 100%);
  transition: opacity 0.5s linear, visibility 0.5s linear;
  z-index: 13;
}

#desktop-tint.lifted {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#desktop-tint.off {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

#tutorial {
  position: fixed;
  inset: 0;
  z-index: 97;
  overflow: hidden;
  transition: opacity 0.45s linear;
}

#tut-talk {
  position: absolute;
  inset: 0;
  transform: scale(var(--tut-z, 1));
  transform-origin: 100% 100%;
}

#tutorial.act { pointer-events: none; }

body.tour-act .win95-window { pointer-events: none; }
body.tour-act .tut-target { pointer-events: auto; }

/* =====================================================================
   A WINDOW THE GAME RAISED DURING A TOUR STEP (C5, 2026-08-30).
   =====================================================================
   THIS REPLACES THE PLAYTEST UNBLOCK. `body.tour-act #gbox { pointer-events:
   auto }` stood here between playtest waves (playtest/UNBLOCKS-R2.txt UNBLOCK
   1) and it is DELETED, not kept alongside: it unwedged one window out of a
   class A1 stated generally, and a one-window special case sitting next to a
   general rule is how the next reader concludes the general rule does not
   cover #gbox.

   WHAT IT WAS. introrig tells you to install the Starter GPU. That card is
   Failing out of the drawer, by design, so the game raises #gbox with INSTALL
   ANYWAY / CANCEL - and #gbox is a .win95-window, so the rule above killed
   BOTH BUTTONS. SPACE is ignored on an action step, a reload returns to the
   same step, and abandoning restarts introrig into the same step, so the
   account was bricked with no escape from inside the game. A1 reached it with
   one ordinary page reload, and it is A1-04's class - the worst bug of round 1
   - arriving through a different door.

   A1's general statement is what these rules are written against: "ANY window
   the game raises during ANY action step of ANY tour is dead the same way",
   and A5R2-05 is the same window problem on a SPEAK step, where neither rule
   above is even applied and #tutorial is itself the thing on top.

   .tut-live IS WRITTEN BY js/tutorial.js markModal(), on the TOPMOST visible
   window that is neither the tour's own window nor the one holding the step's
   target. There is no list of window ids here or there: raiseWin() is what
   puts one window over another, so a dialog raised over the app the tour is
   walking has a higher z BY CONSTRUCTION. See the note above markModal().

   AND THE SPEAK-STEP HALF (A5R2-05). #tutorial is z 97 with #tut-talk at
   inset 0, so on a step with no tour-act it is the blocker itself: A5
   measured elementFromPoint at the centre of #pvresult's only button and got
   "tut-talk". While a raised window is up the overlay stops taking clicks and
   the .win95-window lock takes over in its place, so the state is NARROWER
   than the plain speak step it replaces - the raised window is reachable and
   nothing else on the desk is. #tut-hint.ready keeps its own clicks under
   this, because it sets pointer-events itself and an explicit auto on a
   descendant is what re-enables it; that is the same mechanism .tut-target
   uses against the line above, and it is why TAP still works on a phone.

   THE ORDER OF THESE THREE LINES IS LOAD-BEARING. All three are one class
   plus one type, so they carry identical specificity and the LAST one wins -
   the allow has to be written after both locks or the raised window is dead
   again, by a rule added to keep it alive. */
body.tour-modal #tutorial { pointer-events: none; }
body.tour-modal .win95-window { pointer-events: none; }
body.tour-act .tut-live,
body.tour-modal .tut-live { pointer-events: auto; }

body.tour-act #wbc-no { pointer-events: none; }

#tut-fx {
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
}

#tut-spot {
  position: absolute;
  box-sizing: content-box;
  transform: translate(-50%, -50%);

  padding: 2px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);

  outline: 3px solid #fff;
  outline-offset: 0;

  border-radius: 5px;
  margin-top: 4px;

  transition:
    left 0.16s cubic-bezier(0.16, 0.9, 0.3, 1),
    top 0.16s cubic-bezier(0.16, 0.9, 0.3, 1),
    width 0.16s cubic-bezier(0.16, 0.9, 0.3, 1),
    height 0.16s cubic-bezier(0.16, 0.9, 0.3, 1);
}

#tut-spot.twin { box-shadow: none; }
#tut-dim2 {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
#tut-dim2.hidden { display: none; }

#tut-spot2 {
  position: absolute;
  box-sizing: content-box;
  transform: translate(-50%, -50%);
  padding: 2px;
  outline: 3px solid #fff;
  outline-offset: 0;
  border-radius: 5px;
  margin-top: 4px;
  pointer-events: none;
  transition:
    left 0.16s cubic-bezier(0.16, 0.9, 0.3, 1),
    top 0.16s cubic-bezier(0.16, 0.9, 0.3, 1),
    width 0.16s cubic-bezier(0.16, 0.9, 0.3, 1),
    height 0.16s cubic-bezier(0.16, 0.9, 0.3, 1);
}
#tut-spot2.hidden { display: none; }

#tut-spot2::before,
#tut-spot2::after {
  content: '';
  position: absolute;
  inset: -3px;
  pointer-events: none;
  border-radius: 8px;
  will-change: opacity, transform;
}
#tut-spot2::after {
  box-shadow: 0 0 0 3px rgba(255, 255, 225, 0.85);
  animation: tut-breathe 1.9s cubic-bezier(0.22, 0.7, 0.35, 1) infinite;
}
#tut-spot2::before {
  box-shadow: 0 0 0 2px rgba(243, 240, 201, 0.55);
  animation: tut-breathe 1.9s cubic-bezier(0.22, 0.7, 0.35, 1) infinite;
  animation-delay: -0.95s;
}

body.tour-live.drop-over #tut-spot2 { outline-color: #cfe8c6; }
body.tour-live.drop-over #tut-spot2::after { box-shadow: 0 0 0 3px rgba(207, 232, 198, 0.85); }
body.tour-live.drop-over #tut-spot2::before { box-shadow: 0 0 0 2px rgba(207, 232, 198, 0.55); }

#tut-spot.twin::before,
#tut-spot.twin::after,
#tut-spot2::before,
#tut-spot2::after {
  animation-name: tut-breathe-near;
  outline-offset: 0;
}
#tut-spot.twin::after,
#tut-spot2::after { outline: 3px solid rgba(255, 255, 225, 0.85); box-shadow: none; }
#tut-spot.twin::before,
#tut-spot2::before { outline: 2px solid rgba(243, 240, 201, 0.55); box-shadow: none; }
body.tour-live.drop-over #tut-spot2::after { outline-color: rgba(207, 232, 198, 0.85); }
body.tour-live.drop-over #tut-spot2::before { outline-color: rgba(207, 232, 198, 0.55); }
@keyframes tut-breathe-near {
  0%   { opacity: 0.95; outline-offset: 0; }
  10%  { opacity: 0.95; outline-offset: 0; }
  100% { opacity: 0; outline-offset: 10px; }
}

.demo-scroll {
  will-change: scroll-position;
  transform: translateZ(0);
}
.demo-scroll .it-thumb,
.demo-scroll .slot-row { backface-visibility: hidden; }

#tut-spot.grow {
  transition:
    left 0.62s cubic-bezier(0.16, 0.84, 0.30, 1),
    top 0.62s cubic-bezier(0.16, 0.84, 0.30, 1),
    width 0.62s cubic-bezier(0.16, 0.84, 0.30, 1),
    height 0.62s cubic-bezier(0.16, 0.84, 0.30, 1);
}

#tut-spot::before,
#tut-spot::after {
  content: '';
  position: absolute;
  inset: -3px;
  pointer-events: none;

  border-radius: 8px;
  will-change: opacity, transform;
}

#tut-spot::after {
  outline: 3px solid rgba(255, 255, 225, 0.85);
  outline-offset: 0;
  animation: tut-breathe-far 1.9s cubic-bezier(0.22, 0.7, 0.35, 1) infinite;
}
#tut-spot::before {
  outline: 2px solid rgba(243, 240, 201, 0.55);
  outline-offset: 0;
  animation: tut-breathe-far 1.9s cubic-bezier(0.22, 0.7, 0.35, 1) infinite;
  animation-delay: -0.95s;
}
@keyframes tut-breathe-far {
  0%   { opacity: 0.95; outline-offset: 0; }
  10%  { opacity: 0.95; outline-offset: 0; }
  100% { opacity: 0; outline-offset: 28px; }
}

#tut-spot.whole::after,
#tut-spot.whole::before {
  animation: tut-breathe-wide 3.4s cubic-bezier(0.16, 0.8, 0.3, 1) infinite;
}
#tut-spot.whole::before { animation-delay: -1.7s; }

@keyframes tut-breathe-wide {
  0% { opacity: 0.7; outline-offset: 0; }
  40% { opacity: 0; }
  100% { opacity: 0; outline-offset: 12px; }
}

@keyframes tut-breathe {
  0%   { opacity: 0.95; transform: scale(1); }
  10%  { opacity: 0.95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

#tut-spot.row {
  box-shadow:
    inset 0 0 0 2px rgba(20, 22, 28, 0.7),
    0 0 0 9999px rgba(0, 0, 0, 0.45);
}

#tut-spot.row.twin {
  box-shadow: inset 0 0 0 2px rgba(20, 22, 28, 0.7);
}

#tut-spot.noicon {
  outline: none;
  padding: 0;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
}
#tut-spot.noicon::before,
#tut-spot.noicon::after { display: none; }

#tut-raj {
  position: absolute;
  right: 20px;

  bottom: 92px;
  width: 506px;
  transition: opacity 0.22s ease;
}

body.tour-shy #tut-raj { opacity: 0.18; }
#tut-raj-cv {
  width: 500px;
  height: 640px;
  image-rendering: pixelated;
  border: 3px solid #ece9d8;
  border-right-color: #aca899;
  border-bottom-color: #aca899;
  background: #1e3a46;
  display: block;
}

#tut-plate {
  margin-top: 6px;
  background: linear-gradient(#fffff4 0 5px, #ffffe1 5px calc(100% - 5px), #f3f0c9 calc(100% - 5px) 100%);
  border: 1px solid #aca899;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-size: 21px;
  line-height: 36px;
  font-weight: 700;
  text-align: center;
  color: #1c1c1c;
}

#tut-bubble {
  position: absolute;
  right: 546px;
  bottom: 430px;
  width: 560px;
  min-height: 72px;

  background: linear-gradient(
    #fffff4 0 6px, #ffffe1 6px calc(100% - 8px), #f3f0c9 calc(100% - 8px) 100%);
  border: 3px solid #14161c;
  border-radius: 0;
  padding: 16px 18px;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-size: 24px;
  line-height: 31px;
  color: #000;
  box-shadow:
    inset 0 0 0 1px #fffff8,
    inset 0 0 0 3px #d9d5a8,
    6px 6px 0 rgba(0, 0, 0, 0.38);

}

.tut-tail {
  position: absolute;
  display: block;
  background: #fffff0;
  box-shadow: 0 0 0 3px #14161c;
}
.tut-tail.t1 { right: -20px; top: 26px; width: 15px; height: 15px; }

.tut-tail.t1b { right: -20px; top: auto; bottom: 26px; width: 15px; height: 15px; }
/* .tut-tail.t2 and .t3 DELETED 2026-09-03 (R8-NET-01 / R8-NET-12, owner ruling
   in the round-10 fix phase: dead things are deleted, not hidden). index.html
   ships exactly two tails, `tut-tail t1` and `tut-tail t1b` (:1734-1735), and
   nothing in js/ writes a tut-tail class at all - grep returns those two lines
   and nothing else. Measured live on a devnet world with the tutorial bubble on
   screen: two .tut-tail elements, classes "tut-tail t1" and "tut-tail t1b", and
   zero elements anywhere carrying t2 or t3. Their body.tour-hoist siblings went
   with them. */

#tut-hint.stack {
  flex-direction: column;
  gap: 6px;
}
#tut-hint.stack #tut-key { margin-left: 0; margin-right: 0; }

#tut-hint.stack #tut-key,
#tut-hint.stack #tut-prog { width: 100%; }

#tut-hint.stack #tut-prog { flex: none; }

#tut-hint {
  position: absolute;
  right: 546px;
  bottom: 366px;
  width: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  transition: opacity 0.26s linear;
  pointer-events: none;
  color: #fff;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.75);
}

#tut-key {
  position: relative;

  width: 168px;
  height: 38px;
  flex: none;
  margin: 3px 5px 6px;
  box-sizing: border-box;

  border: 3px solid #14161c;

  background: linear-gradient(
    #fffffa 0 5px,
    #ffffe6 5px 52%,
    #f2eec5 52% 70%,
    #ded9a9 70% 86%,
    #c9c391 86% 100%);
  box-shadow:
    inset 2px 2px 0 #fffffe,
    inset -2px 0 0 #d9d5a8,
    0 4px 0 rgba(20, 22, 28, 0.4);
  transition: transform 60ms linear, box-shadow 60ms linear, background 60ms linear;
}

#tut-key.down {
  transform: translateY(4px);
  background: linear-gradient(
    #f4f1d4 0 4px,
    #e9e5bd 4px 62%,
    #d5d09f 62% 86%,
    #c2bc8b 86% 100%);
  box-shadow:
    inset 2px 2px 0 #fbf9e2,
    inset -2px 0 0 #bdb88d,
    0 0 0 rgba(20, 22, 28, 0.4);
}

#tut-hint.ready #tut-key:not(.down) {
  animation: tut-key-nudge 5s ease-in-out infinite;
}
@keyframes tut-key-nudge {
  0%, 88%, 100% { transform: translateY(0); }
  92%, 96% { transform: translateY(4px); }
}

#tut-prog {
  width: 168px;

  height: 24px;
  margin: 3px 0 6px;
  flex: 0 1 168px;
  min-width: 64px;
  box-sizing: border-box;
  display: flex;
  gap: 2px;

  padding: 2px;
  border: 3px solid #14161c;
  background: linear-gradient(#191b21 0 40%, #22252d 40% 100%);
  box-shadow: inset 1px 1px 0 #0b0c10;
}

#tut-prog i {
  position: relative;
  flex: 1;
  display: block;
  min-width: 0;
  background: #2e313b;
  box-shadow: inset 0 -1px 0 #23262f;
}

#tut-prog i.on {
  background: linear-gradient(#ffe9a8 0 30%, #f8c869 30% 70%, #c9902f 70% 100%);
  box-shadow: inset -1px 0 0 rgba(20, 22, 28, 0.45);
}

#tut-prog i::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(#fffdf0 0 30%, #ffe9a8 30% 70%, #e3ad42 70% 100%);
  opacity: 0;
  visibility: hidden;
  animation: tut-prog-chase 2.4s steps(1) infinite;
  animation-delay: var(--chase, 0ms);
}
#tut-prog i.on::before { visibility: visible; }
@keyframes tut-prog-chase {
  0%, 9%    { opacity: 1; }
  10%, 100% { opacity: 0; }
}

#tut-prog.done { display: none; }

#tut-prog i.pop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  animation: tut-prog-flash 0.3s steps(3) forwards;
}
@keyframes tut-prog-flash {
  from { opacity: 0.9; }
  to { opacity: 0; }
}

/* The dev skip box and its back/forward pair styled up here. The controls
   are deleted (js/tutorial.js, index.html) and these rules went with them.
   #tut-reskip below is a DIFFERENT control - the optional-tour skip - and it
   stays. */

#tut-reskip {
  position: absolute;

  right: 546px;
  bottom: 250px;

  z-index: 5;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 225, 0.45);
  color: #ffffe1;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 2px 10px;
  opacity: 0.75;
  cursor: pointer;
}
#tut-reskip:hover { background: rgba(0, 0, 0, 0.6); border-color: #ffffe1; opacity: 1; }
#tut-reskip.hidden { display: none; }

#tut-key-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 22px;
  color: #1c1c1c;
  letter-spacing: 2px;

  padding-left: 2px;
  text-shadow: none;
}

#scene-desktop.locked .desk-icon,
#scene-desktop.locked #taskbar {
  pointer-events: none;
}

#scene-desktop.locked #tray { pointer-events: auto; }

body.tour-traylock #scene-desktop #tray,
body.tour-traylock #tray { pointer-events: none; }

#scene-desktop.locked .desk-icon.tut-target { pointer-events: auto; }

/* THE LETTERBOX, PER AXIS. Every scene below carries two gradients: --lb-x
   paints a band down the sides, --lb-y a band across the top and bottom, and
   js/desktop.js fitScene() puts .lb-x or .lb-y on whichever the window has
   actually produced. Both are read off the scene's own art - the outermost
   two pixel columns and rows - so the band continues the edge it touches
   instead of sitting beside it. A colour that holds most of an edge is used
   as it is; an edge with no dominant colour takes the mean of the strip,
   which is the smallest step available at the seam.

   The horizontal halves were mostly right already. What was missing is
   --lb-y: a 90deg gradient has no answer for a top or bottom band and was
   handing over its blended middle, which on the deleted toss scene was a
   brown-grey where the art was teal. Two edges were also taking a MEAN where
   one colour holds the
   strip outright - tinder's left is 89% #181a1c and was painting #321b27,
   discordmod's is 75% #2b2d31 and was painting #3c3349 - so those two really
   did show a bar down the side. */
.scene.lb-y { background: var(--lb-y); }

#scene-tinder {
  --lb-x: linear-gradient(90deg, #181a1c 0 50%, #111214 50% 100%);
  --lb-y: #111214;
  display: flex;
  align-items: center;
  justify-content: center;
}

#td-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex: none;
  transform-origin: center center;
  overflow: hidden;
}

#td-bg,
#td-canvas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}

#scene-ebay {
  --lb-x: #fafbfc;
  --lb-y: #fafbfc;
  display: flex;
  align-items: center;
  justify-content: center;
}

#eb-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex: none;
  transform-origin: center center;
  overflow: hidden;
}

#eb-bg,
#eb-canvas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}

#scene-stake {
  --lb-x: linear-gradient(90deg, #1d1b37 0 50%, #13102d 50% 100%);
  --lb-y: #13102d;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sk-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex: none;
  transform-origin: center center;
  overflow: hidden;
}

#sk-bg,
#sk-canvas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}

#scene-candyai {
  /* The left edge is Yuki's lit bedroom and has no dominant colour at all
     (103 of them, the commonest holding 4%), so it keeps the mean. */
  --lb-x: linear-gradient(90deg, #321a36 0 50%, #221226 50% 100%);
  --lb-y: #1c0e1e;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ca-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex: none;
  transform-origin: center center;
  overflow: hidden;
}

#ca-bg,
#ca-canvas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}

/* THE LETTERBOX HAS TO MATCH THE EDGE IT TOUCHES, AND THIS SCENE HAS TWO.
   Every scene is a fixed 16:9 stage scaled to fit, so any viewport that is
   not 16:9 leaves a band down the sides or across the top, and the colour
   under it is what makes that band invisible. Support was given ONE flat
   colour, the cubicle wall - which is right for the left edge, where Rajesh's
   panel is, and wrong for the right edge, which is the console's cream
   surround. So the right hand band read as a slab of grey beige butted
   against the chat box instead of the room carrying on past it. Split at the
   seam between the two, the way #scene-tinder, #scene-stake, #scene-candyai
   and #scene-discordmod already are. 42% is the panel/console join at
   x=432 of the 1024 the canvas is drawn in, so the split lands on the seam
   for a top or bottom band as well as a side one. */
#scene-support {
  /* The only scene whose TOP and BOTTOM edges are two-tone as well - cubicle
     wall under Rajesh's panel, the console's cream beside it - so both axes
     split the same way, at the seam between the two rather than at halfway.
     42% is x=432 of the 1024 the canvas is drawn in. */
  --lb-x: linear-gradient(90deg, #a09a8c 0 42%, #ece9d8 42% 100%);
  --lb-y: linear-gradient(90deg, #a09a8c 0 42%, #ece9d8 42% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

#sp-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex: none;
  transform-origin: center center;
  overflow: hidden;
}

#sp-canvas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}

#scene-onlyfans {
  --lb-x: #fafbfc;
  --lb-y: #fafbfc;
  display: flex;
  align-items: center;
  justify-content: center;
}

#of-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex: none;
  transform-origin: center center;
  overflow: hidden;
}

#of-bg,
#of-canvas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}

#scene-tradingview {
  --lb-x: #fafbfc;
  --lb-y: #fafbfc;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tv-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex: none;
  transform-origin: center center;
  overflow: hidden;
}

#tv-bg,
#tv-canvas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}

#scene-doordash {
  --lb-x: #fafbfc;
  --lb-y: #fafbfc;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dd-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex: none;
  transform-origin: center center;
  overflow: hidden;
}

#dd-bg,
#dd-canvas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}

#scene-discordmod {
  --lb-x: #2b2d31;
  --lb-y: #313338;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dm-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex: none;
  transform-origin: center center;
  overflow: hidden;
}

#dm-bg,
#dm-canvas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}

#scene-doom {
  --lb-x: #0d0d0d;
  --lb-y: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ds-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex: none;
  transform-origin: center center;
  overflow: hidden;
}

#ds-bg,
#ds-canvas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}

#scene-wspam {
  --lb-x: linear-gradient(90deg, #323235 0 50%, #0f0f10 50% 100%);
  --lb-y: linear-gradient(180deg, #323235 0 50%, #121213 50% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

#ws-stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex: none;
  transform-origin: center center;
  overflow: hidden;
}

#ws-bg,
#ws-bg2,
#ws-canvas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  image-rendering: pixelated;
}

#ws-bg {
  clip-path: inset(33.75px 502.5px 251.25px 52.5px);
  transform: scale(1.0604, 1.0849) translate(-52.5px, -33.75px);
  transform-origin: 0 0;
}

#ws-bg2 {
  clip-path: polygon(
    1447.5px 0, 100% 0, 100% 100%, 0 100%,
    0 862.5px, 1447.5px 862.5px);
}

.win95-window {
  position: absolute;
  z-index: 20;
  transform: scale(var(--win-scale, 1));
  transform-origin: 0 0;
}

#paywall {
  width: 560px;
  height: 508px;
  left: 680px;
  top: 210px;
}

/* #freebox WAS DECLARED HERE (480x224 at 840,450, z-index 30) AND IS DELETED
   (R8-DEAD, 2026-09-03). The entry joke box could never be shown - the only
   class operation on it in any commit was classList.add('hidden'). Six rules
   went: this one, `#freebox .w95-scale`, `.freebox-icon`, `.freebox-icon svg`,
   `.freebox-text` and `#freebox .w95-button`, plus its name out of the entry
   pointer-events exemption at the bottom of this file. The gravestone with
   the full story is in index.html. */

.w95-scale {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(2);
  transform-origin: 0 0;
  background: #ece9d8;
  border-radius: 5px 5px 0 0;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-size: 11px;
  line-height: 13px;
  color: #000;
}

#paywall .w95-scale { width: 280px; height: 254px; }

#pw-ca-row {
  display: flex;

  align-items: center;
  justify-content: center;
  gap: 6px;
}

#pw-ca {
  flex: none;
  width: 104px;
  height: 24px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  color: #1c1c1c;
  cursor: text;
}

.icon-key {
  position: static;
  flex: none;
  padding: 0;
  border: none;

  border-radius: 3px;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: linear-gradient(#f4f2ea 0 2px, #e2ded0 2px 55%, #cfcaba 55% 82%, #bdb8a8 82% 100%);
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #000,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
}

.icon-key.k16 { width: 22px; height: 22px; }
.icon-key.k20 { width: 26px; height: 26px; }

#pw-name-dice.icon-key.k20,
#pe-dice.icon-key.k20 { width: 26px; height: 24px; }

#pw-ca-copy.icon-key { width: 28px; height: 24px; }

#pw-dice-img,
#pe-dice-img {
  filter:
    contrast(1.1)
    drop-shadow(1px 0 0 #3a352c)
    drop-shadow(-1px 0 0 #3a352c)
    drop-shadow(0 1px 0 #3a352c)
    drop-shadow(0 -1px 0 #3a352c);
}

/* .pool-copy-ico DELETED 2026-09-03 (R8-NET-01): nothing in index.html or js/
   ever put it on an element, including the affiliate panel after a code is
   generated, which is the only surface it could have belonged to. #pw-ca-ico
   keeps the rule. */
#pw-ca-ico {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  background: url('../assets/copy.png') center / 20px 20px no-repeat;
  image-rendering: pixelated;
}

#pw-check,
#pw-verified,
#pw-buy { position: absolute; inset: 0; }

#hc-canvas {
  position: absolute;
  top: 30px;
  left: 10px;
  width: 260px;
  height: 120px;
  background: #fff;
  image-rendering: pixelated;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #000,
    inset -2px -2px 0 #dfdfdf;
}

.w95-frame {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 3px #0a5bd0;
  border-radius: 5px 5px 0 0;

  pointer-events: none;
}

.w95-titlebar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 21px;
  background: linear-gradient(
    #4791f2 0 2px,
    #1d6ae8 2px 5px,
    #0a58dc 5px 14px,
    #0549c2 14px 18px,
    #043b9c 18px 21px);
  border-radius: 5px 5px 0 0;
  color: #fff;
  font-weight: 700;
  text-shadow: 1px 1px 0 #0a2a8a;
  display: flex;
  align-items: center;
  padding-left: 6px;
  cursor: default;

  user-select: none;

  touch-action: none;
}
.w95-titlebar > span { pointer-events: none; }

.w95-x {
  position: absolute;
  top: 4px;
  right: 3px;
  left: auto;
  width: 14px;
  height: 14px;
  padding: 0 0 3px;
  border: none;
  clip-path: polygon(
    1px 0, calc(100% - 1px) 0, 100% 1px, 100% calc(100% - 1px),
    calc(100% - 1px) 100%, 1px 100%, 0 calc(100% - 1px), 0 1px);
  background: linear-gradient(
    #f2a58f 0 2px,
    #e0674a 2px 6px,
    #cc4024 6px 10px,
    #a82c12 10px 14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  font-family: Arial, sans-serif;

  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.w95-help {
  position: absolute;
  top: 4px;
  right: 20px;
  left: auto;
  width: 14px;
  height: 14px;
  padding: 0 0 1px 0;
  border: none;
  clip-path: polygon(
    1px 0, calc(100% - 1px) 0, 100% 1px, 100% calc(100% - 1px),
    calc(100% - 1px) 100%, 1px 100%, 0 calc(100% - 1px), 0 1px);
  background: linear-gradient(
    #8fbcf2 0 2px,
    #4a86e0 2px 6px,
    #2460cc 6px 10px,
    #123fa8 10px 14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  font-family: Arial, sans-serif;

  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.w95-help:hover { filter: brightness(1.12); }
.w95-help:active { filter: brightness(0.85); }

.w95-x:hover { filter: brightness(1.12); }

.w95-x:active {
  filter: brightness(0.85);
}

.w95-avatar-well {
  position: absolute;
  top: 28px;
  left: 10px;
  width: 42px;
  height: 42px;
  background: #000;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #000,
    inset -2px -2px 0 #dfdfdf;
}

.w95-avatar {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 38px;
  height: 38px;

  background-size: 114px 64.125px;
  background-position: -35.9px -3.1px;
  image-rendering: pixelated;
}

.w95-avatar.btc {
  background-image: url('../assets/bitcoin.png') !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
}

.w95-apptitle {
  position: absolute;
  top: 31px;
  left: 60px;
  font-size: 14px;
  font-weight: 700;
}

.w95-subtitle {
  position: absolute;
  top: 50px;
  left: 60px;
  color: #6c6c6c;
}

.w95-groove {
  position: absolute;
  left: 10px;
  width: 260px;
  height: 2px;
  background: linear-gradient(to bottom, #808080 0 1px, #fff 1px 2px);
}

.w95-text-c {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.w95-text-l {
  position: absolute;
  left: 10px;
}

.w95-grey { color: #6c6c6c; }

.w95-price {
  position: absolute;
  top: 104px;
  left: 10px;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
}

.w95-field {
  position: absolute;
  top: 150px;
  left: 10px;
  width: 260px;
  height: 18px;
  background: #fff;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #000,
    inset -2px -2px 0 #dfdfdf;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  box-sizing: border-box;
}

.w95-field .w95-right { font-weight: 700; color: #1c1c1c; }

.w95-cboxes {
  position: absolute;
  top: 136px;
  left: 10px;
  width: 260px;
  height: 30px;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.w95-cbox {
  width: 23px;
  height: 30px;
  background: #fff;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #000,
    inset -2px -2px 0 #dfdfdf;
  border: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 15px;
  line-height: 30px;
  font-weight: 700;
  color: #000;
  text-align: center;
  text-transform: uppercase;
  caret-color: #000082;
}
.w95-cbox:focus { outline: none; }

@keyframes w95-shake {
  0%, 100% { transform: scale(2) translateX(0); }
  20%, 60% { transform: scale(2) translateX(-3px); }
  40%, 80% { transform: scale(2) translateX(3px); }
}
.w95-scale.shake { animation: w95-shake .22s linear; }

.w95-button {
  position: absolute;
  top: 182px;
  left: 10px;
  width: 260px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: linear-gradient(#fff 0 9%, #f3f2ed 9% 48%, #e9e5d8 48% 85%, #d8d0c1 85%);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px #5f83b9;
}

.w95-button.w95-default {
  box-shadow:
    inset 0 0 0 1px #003c74,
    inset 0 0 0 2px #7eaef0;
}

.w95-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  text-align: center;
  color: #0000c0;
  text-decoration: underline;
  cursor: pointer;
}

#scene-desktop.locked #start-btn {
  pointer-events: none;
}

.w95-dock {
  position: absolute;
  bottom: 80px;
  background: #ece9d8;
  border-radius: 5px 5px 0 0;
  color: #000;
  font-family: 'MS Sans Serif', sans-serif;
  font-size: 11px;
  line-height: 13px;
  transform: scale(2);
  /* THIS 40 IS NOT THE START MENU BUG, AND THREE DOCUMENTS SAID IT WAS
     (R3-14, A8-R3-01, and the round-3 plan that quotes them). The number is
     read inside #desktop-stage, which is scaled and therefore its own
     stacking context, so for anything still living in the stage it is only
     compared against the wallpaper, the icons and the taskbar - never against
     an app window, because initDesktop() lifted every window out to
     #scene-desktop. MEASURED: setting #start-menu to z-index 9999 at runtime
     left all nine of its rows dead behind emailapp, exactly as 40 did.
     Both docks that needed to clear the app layer left the stage to do it -
     #volume-flyout is reparented to <body> by initTray(), #start-menu is
     declared outside the stage in index.html - and the value that matters is
     on each of them. #mail-toast is the one still inside, at 41 below. */
  z-index: 40;
  padding: 26px 4px 4px;
}

/* THE START MENU FLOATS OVER THE APP LAYER (R3-14, owner-approved entry).
   ---------------------------------------------------------------------
   It is a #scene-desktop child now, not a #desktop-stage one (index.html
   carries the reason), so its box is measured against the VIEWPORT rather
   than against the desk's 1920-wide coordinate space, and the two numbers
   the stage used to supply have to be supplied here instead:

     bottom  the taskbar is 80 desk px tall, which is 80 x --stage-z on
             screen. #volume-flyout already sits on this exact expression.
     scale   the dock is drawn at 2x inside the desk, and the desk is then
             scaled by --stage-z, so the product is what the stage was
             applying for it. MEASURED at 667x375 and at 1111x914: the menu
             lands on the same pixels it did before the move, to the pixel.

   rescale() sets --stage-z on :root and the stage always fills the viewport
   exactly (it sizes itself to vw / stageZ x vh / stageZ), so there is no
   letterbox band to correct for and left: 0 is still the screen's left edge.

   *** 95, NOT 96 OR 98, AND THE DIFFERENCE MATTERS. *** #warn-dim and
   #entry-dim are both z 95, inset 0, pointer-events auto, and they are the
   whole enforcement of power_warning.exe's one key and of the entry lockout.
   The menu takes 95 as well and loses the tie by DOM ORDER - it is declared
   ahead of the stage, while initDesktop() appends both dims after every
   window - so a refusal still covers it and still eats its clicks. At 96 the
   menu would float over the dark with live rows, and nothing closes it when
   a window behind it is pressed, so that state is reachable rather than
   theoretical. #volume-flyout's 98 is not a precedent to copy here: it holds
   two sliders, and this holds every door in the game. */
#start-menu {
  left: 0;
  bottom: calc(80px * var(--stage-z, 1));
  z-index: 95;

  width: 268px;
  transform: scale(calc(2 * var(--stage-z, 1)));
  transform-origin: 0 100%;

  padding: 26px 4px 5px;
}

#sm-user {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  box-sizing: border-box;
  margin: 0 -4px 5px;
  padding: 0 7px;
  background: linear-gradient(#4b8ade 0 2px, #2f66bd 2px 55%, #23539f 55% 100%);
  box-shadow: inset 0 -2px 0 #16386f;
}
#sm-face {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #16386f;
}
#sm-face img { width: 28px; height: 28px; image-rendering: pixelated; display: block; }
#sm-who { min-width: 0; flex: 1; }
#sm-name {
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#sm-bio {
  font-size: 9px;
  line-height: 12px;
  color: #cfe1ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sm-list {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
  padding: 2px;
  box-sizing: border-box;
}

.sm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  cursor: pointer;
}

.sm-item:hover {
  background: #000080;
  color: #fff;
}

.sm-item img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

#emailapp {
  width: 600px;
  height: 440px;
  left: 540px;
  top: 180px;
}

#emailapp .w95-scale {
  width: 300px;
  height: 220px;
}

#emailapp .w95-x {
  left: 281px;
}

#email-bar {
  position: absolute;
  top: 26px;
  left: 6px;
  width: 288px;
  height: 22px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 2px 4px;
  font-size: 11px;
  color: #5c574c;

  border-bottom: none;
  background: linear-gradient(to bottom, #a8a294 0 1px, #fff 1px 2px) bottom left / 100% 2px no-repeat;
}

#e-count { font-weight: 700; display: flex; align-items: center; gap: 6px; }
#e-count::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  background: #c22a1c;
  box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.35);
}
#e-count.none { color: #9a968a; font-weight: 400; }
#e-count.none::before { background: #cfcabb; }

#e-readall {
  position: static;
  width: auto;
  height: 15px;
  padding: 0 6px;
  font-size: 10px;
  color: #4a463c;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#email-list {
  position: absolute;
  top: 52px;
  left: 6px;
  width: 288px;
  height: 162px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
  overflow-y: auto;
  padding: 2px;
  box-sizing: border-box;
}

.email-row {

  margin: 0 -10px 0 -1px;
  padding: 4px 12px 4px 7px;
  cursor: pointer;

  background-image: linear-gradient(#cfcab8 0 0);
  background-repeat: no-repeat;
  background-position: 3px 100%;
  background-size: calc(100% - 3px) 1px;
}

.email-row:first-child { margin-top: -1px; padding-top: 5px; }

.email-row .w95-grey { color: #1c1c1c; }

.email-row .e-from {
  font-weight: 700;
}

.email-row.read .e-from {
  font-weight: 400;
}

.email-row .e-subj {
  display: block;
  font-weight: 700;
  color: #1c1c1c;
}
.email-row.read .e-subj { font-weight: 400; color: #4a463c; }

.email-row:not(.read) { box-shadow: inset 3px 0 0 #c22a1c; }
.email-row:not(.read):hover { box-shadow: inset 3px 0 0 #ff6a58; }

.email-row .e-age {
  float: right;
  color: #6a6a5e;
  font-size: 10px;
}

.email-row.read .e-age { color: #8a8a7e; }

#email-view {
  position: absolute;
  inset: 0;

  pointer-events: none;
}

#email-view > * { pointer-events: auto; }

#email-view .ev-line {
  position: absolute;
  left: 10px;
  width: 280px;
  white-space: nowrap;
  overflow: hidden;
}

#email-view .ev-line:nth-of-type(1) { top: 30px; }
#email-view .ev-line:nth-of-type(2) { top: 44px; }

#ev-body {
  position: absolute;
  top: 60px;
  left: 6px;
  width: 288px;
  height: 122px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
  padding: 6px 8px;
  box-sizing: border-box;
  overflow-y: auto;
  /* `white-space: pre-wrap` WAS HALF OF THE OVERFLOW (owner, playing,
     2026-09-09). js/desktop.js paintMailBody draws the body as real blocks now,
     so there are no newlines left in here for pre-wrap to preserve; what the
     box still needed was permission to break a word that cannot fit, which is
     what a 64-character hex seed in a 288px column is. break-word breaks ONLY
     when there is no other option, so ordinary prose still breaks at spaces and
     only the hashes are cut mid-token. */
  overflow-wrap: break-word;
}

/* THE MAIL BODY'S THREE SHAPES. The server's templates have been written in
   headings, `Label: value` rows and sentences since they were drafted, and the
   window printed all three as one slab of loose text. Nothing here changes a
   word - see js/desktop.js paintMailBody, which owns the parsing and explains
   why it never builds markup from a string it did not write.

   THE WINDOW DOES NOT MOVE. #ev-body is a fixed 288x122 with its own scrollbar
   (syncScrollbars lists it), so everything below spends the box's SCROLL and
   never its size: no rule adds height to #emailapp and none may. */
.ev-p, .ev-kv, .ev-head { line-height: 14px; }

.ev-p + .ev-p { margin-top: 3px; }

/* The paragraph break the server wrote as a blank line, as space instead of an
   empty element - so a run of them cannot stack into a hole in the middle of a
   receipt. */
.ev-p.gap, .ev-kv.gap { margin-top: 7px; }

/* A SECTION HEADING CARRIES ITS OWN DIVIDER. The groove is the desk's, two
   pixels of shadow and highlight, the same pair every #w95-groove in the game
   draws - so the mail reads as part of this desktop and not as a web page that
   wandered in. `nolead` is a heading with nothing above it to divide from. */
.ev-head {
  margin: 9px 0 4px;
  padding-top: 7px;
  border-top: 1px solid #a8a294;
  box-shadow: inset 0 1px 0 #fff;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #3b3931;
}
.ev-head.nolead {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  box-shadow: none;
}

/* A LABELLED FACT. The label is the bold half and the value is the half a
   reader came for, so the value is what gets the room: the row wraps under the
   label rather than beside it, because a 288px box has no width to spare for a
   hanging indent and a hash would have been shredded into four-character
   fragments by one. */
.ev-kv { margin-top: 1px; }
.ev-kv .k {
  font-weight: 700;
  color: #3b3931;
  margin-right: 5px;
  /* THE LABEL DOES NOT BREAK. Driven in the browser: "Server seed hash:" wrapped
     as "Server seed / hash:" with the value starting on the second line, which
     reads as two facts rather than one. MAIL_KV caps a label at 28 characters
     and 28 of these at 11px is about 150px in a 288px box, so a label always
     fits on its own line and only the value ever wraps. */
  white-space: nowrap;
}
.ev-kv .v { color: #1c1c1c; }

/* THE HASHES, THE SIGNATURES AND THE IDS. Monospace because they are meant to
   be compared character by character against a block explorer, and `anywhere`
   because they have no spaces at all - which is exactly why they used to run
   off the edge of the box instead of wrapping. */
.ev-kv .v.mono {
  font-family: ui-monospace, "Lucida Console", Consolas, monospace;
  font-size: 10px;
  overflow-wrap: anywhere;
  color: #34322b;
}

/* The mails' own asides, which are always parenthetical. */
#ev-body i { font-style: italic; color: #55524a; }

#ev-back {
  top: 190px;
  left: 6px;
  width: 70px;
  height: 22px;
}

#ev-go {
  top: 190px;
  left: auto;
  right: 6px;
  width: 164px;
  height: 22px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .msg-icon and its two children DELETED 2026-09-03 (R8-NET-01). msgBox is the
   refusal window and it draws no icon element: driven live on a devnet world
   through a real refusal (the maximum-stake path in chudnet.exe), zero elements
   carried the class. */

.msg-text {
  position: absolute;
  top: 32px;
  left: 56px;
  width: 192px;
}

.msg-sub {
  position: absolute;
  top: 62px;
  left: 56px;
  width: 192px;
}

.msg-ok {
  top: 82px;
  left: 92px;
  width: 76px;
  height: 22px;
}

.desk-icon .badge {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.desk-icon .badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.desk-icon .badge-num {
  position: relative;
  top: -3px;
  color: #fff;
  font-family: 'Silkscreen', monospace;
  font-size: 24px;
  line-height: 1;
}

#bankapp {
  width: 595px;
  height: 735px;
  left: 560px;
  top: 90px;
}

#bankapp .w95-scale {
  width: 340px;
  height: 420px;
  transform: scale(1.75);
}

#bank-body { position: absolute; inset: 26px 0 0 0; }

#bank-band {
  position: absolute;
  top: 88px;
  left: 10px;
  width: 320px;
  height: 60px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto;

  grid-template-rows: 17px auto;
  align-items: center;
  align-content: center;
  column-gap: 12px;
  row-gap: 2px;

  padding: 0 9px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

#bank-hang {
  position: absolute;
  top: 148px;
  left: 22px;
  width: 296px;
  height: 22px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 8px;

  background: #c9c4b0;
  box-shadow:
    inset 1px 1px 0 #8e887a,
    inset 2px 2px 0 #a8a294,
    inset -1px -1px 0 #efece0,
    0 1px 0 rgba(90, 83, 68, 0.28);
}
#bank-addr {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  color: #5c574c;
}

/* Was #bank-disconnect. Same slot, same 74x16 - the row is unchanged and the
   window did not move by a pixel; only the word and the colour did. */
#bank-chain {
  position: static;
  flex: none;
  width: 74px;
  height: 16px;
  padding-top: 2px;
  font-size: 9px;
}

#bank-wallet-label {
  grid-row: 1;
  grid-column: 1;
  position: static;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #5c574c;
}

/* SIGN OUT IS NOT ONE MORE APP ROW (R3-44, A8-W-7). It used to sit 4 real
   pixels under "Shuffle" on a phone - 2 px of .sm-list padding and a 2 px
   margin - at the bottom of a list a thumb is already travelling down, and it
   is the one row in the menu that ends the session. 10 px makes the gap 12,
   which is a bit over half a row's 22 px pitch, and the XP groove this button
   already draws along its own top edge travels with it so the separator still
   reads as a separator. The menu grows 8 px upward from the taskbar and
   nothing else moves; it is a dock, not an app window. */
#sm-signout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 26px;
  margin: 10px 0 0;
  padding: 0 8px;
  border: none;
  background: transparent;
  box-shadow: inset 0 1px 0 #b3ad9c, inset 0 2px 0 #fff;
  font-family: inherit;
  font-size: 13px;
  color: #1c1c1c;
  text-align: left;
  cursor: pointer;
}
#sm-signout:hover { background: #316ac5; color: #fff; }
#sm-signout-mark { display: grid; place-items: center; width: 16px; height: 16px; flex: none; }
#sm-signout-mark img { width: 14px; height: 14px; display: block; image-rendering: pixelated; }
#sm-signout:hover #sm-signout-mark img { filter: invert(1) brightness(2); }

#bank-unclaimed {
  grid-row: 2;
  grid-column: 1;
  position: static;
  font-size: 22px;
  line-height: 24px;
  font-weight: 700;

  color: #b8860b;
  white-space: nowrap;
  /* The two figures share a baseline so the small one hangs off the big one
     rather than floating beside it. min-width:0 lets the cell shrink instead
     of pushing CLAIM out of the band. */
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

#bank-settled { flex: none; }

/* WHAT THE CHAIN HAS NOT BEEN TOLD ABOUT YET. Grey and small on purpose: it
   is real money the player has earned, and it is NOT SPENDABLE until the
   settlement lands it in the vault a few minutes later, so it may not read
   with the same weight as the balance it is not part of. */
/* BIGGER, AND NOTHING ELSE (owner, 2026-08-29).
   It was 11px at weight 400, so money the player had already mined read as a
   footnote about the number beside it. Size and weight are the whole fix: 14px
   bold is legible at a glance from across the band.
   IT IS NOT A CHIP AND IT IS NOT GREEN. It briefly had its own recessed plate
   and the house green for money arriving, and both were wrong for where it
   sits - the WALLET band is already a recessed panel, so the plate was a panel
   inside a panel, and a second colour beside the gold headline made one cell
   argue with itself. Grey, on the window's own face, in the same band as
   everything else.
   It stays a SHRINKABLE flex child with its ellipsis intact, so
   fitWalletBand() still steps the big figure down rather than either number
   truncating. */
#bank-pending {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  color: #8a8474;
  white-space: nowrap;
}
#bank-pending[hidden] { display: none; }

#bank-photo {
  position: absolute;
  top: 27px;
  left: 10px;
  width: 52px;
  height: 52px;
  background: #000;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #000,
    inset -2px -2px 0 #dfdfdf;
}

#bank-photo-edit {
  position: absolute;
  inset: 2px;
  display: grid;
  place-items: center;
  opacity: 0;
  background: rgba(0, 0, 0, 0.45);
  transition: opacity 120ms ease;
  pointer-events: none;
}

#bank-photo-edit::before {
  content: '';
  width: 20px;
  height: 20px;
  background: url('../assets/edit.png') center / 20px 20px no-repeat;
  image-rendering: pixelated;
  transform: translateX(1.4px);
}
#bank-photo:hover #bank-photo-edit { opacity: 1; }
#bank-photo:active #bank-photo-edit { background: rgba(0, 0, 0, 0.6); }

#bank-photo img {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 48px;
  height: 48px;
  object-fit: cover;
  image-rendering: pixelated;
}

#bank-name-row {
  position: absolute;

  top: 28px;
  left: 72px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#bank-class {
  position: absolute;
  top: 47px;
  left: 72px;
  width: 250px;
  font-size: 11px;
  line-height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#bank-class b + span { position: relative; top: -1px; }

#bank-name {
  font-size: 15px;
  font-weight: 700;

  min-width: 0;
  line-height: 19px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#bank-user-label { font-size: 15px; }

#bank-edit {
  position: static;
  padding: 0;
  display: grid;
  place-items: center;
  flex: none;
  position: relative;

  top: 0;

  left: auto;
}

#bank-edit svg { width: 12px; height: 13px; display: block; }
#bank-edit-img {
  width: 16px;
  height: 16px;
  display: block;
  image-rendering: pixelated;
}

#bank-bio-row {

  position: absolute;
  top: 61px;
  left: 72px;
  width: 250px;
  font-size: 12px;
}
#bank-bio {
  display: block;
  color: #6c6c6c;
  font-style: italic;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#bank-bio.empty { color: #9a9482; }

#bank-claim {
  position: static;
  grid-row: 2;
  grid-column: 2;
  width: 90px;
  height: 26px;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid #14161c;
  border-radius: 0;
  color: #06280a;
  text-shadow: 0 1px 0 #a9e6a4;
  background: linear-gradient(#d8f5cf 0 2px, #7fd472 2px 55%, #4fae42 55% 82%, #37852c 82% 100%);
  box-shadow: inset 0 -2px 0 #245c1c;
}

#bank-claim.frozen {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  background: linear-gradient(#e8837a 0 2px, #c8382c 2px 55%, #a52619 55% 82%, #7f1b10 82% 100%);
  box-shadow: inset 0 -2px 0 #5c1109;
  cursor: default;
  position: relative;
  left: auto;
  top: auto;
}
#bank-claim.frozen:hover {
  background: linear-gradient(#f0958c 0 2px, #d44639 2px 55%, #b52e20 55% 82%, #8d2014 82% 100%);
  box-shadow: inset 0 -2px 0 #5c1109;
}
#bank-claim.frozen:active {
  background: linear-gradient(#a52619 0 55%, #8d2014 55%);
  box-shadow: inset 0 2px 0 #5c1109;
}

/* THE PAINTED FREEZE CAPTION IS DELETED (owner, playing, 2026-09-09).
   ---------------------------------------------------------------------
   WHAT IT WAS: two rules that printed #bank-claim's own `title` as a red
   sentence inside the band -
     #bank-band:has(#bank-claim[title]:not([title=""]):not(.frozen))
     #bank-claim[title]:not([title=""]):not(.frozen)::after { content: attr(title) }
   It was R3-30's open half, added as an explicit BRIDGE ("it should be deleted
   when the real one lands") so a touch player, who cannot hover, could still
   read the sentence a mouse gets off the tooltip.

   WHY IT HAD TO GO. Read the selector: `:not(.frozen)` is the state BEFORE the
   claim tour has run, because .frozen is what showClaimClock() adds when the
   button becomes the red countdown. So the caption showed in exactly one
   window - a freeze that is running and a player who has not met Rajesh yet -
   and that window is the one thing the tour exists to fill. CLAIM_STEPS ends
   on a `reveal` step, "Rajesh will work some of his magic to help you keep
   track of time", and then "Tah Dah!" pointed at this key. The owner registered,
   opened the bank and read the punchline before the trick: "before i could even
   click claim and go through the tutorial, it just immediately says this".

   The bridge answered A6's question with the tour's own answer, one press early.

   WHAT IS LEFT, AND IT IS ENOUGH. The `title` STAYS (js/desktop.js renderBank):
   hovering the key still tells a mouse player, which was the half A6 measured
   as missing and costs nothing. The key stays reachable on purpose - it is
   aria-disabled, not disabled - so a press starts the tour, which is the
   designed way to learn this. And once the tour has run the countdown is on the
   button itself, where .frozen would have hidden this caption anyway.

   IF THE TOUCH HALF IS RE-OPENED it needs a real element in index.html that
   renderBank writes, gated on tourSeen('claim') the way claimClockDue() is.
   A CSS rule cannot read tour state, which is the whole reason this one was
   wrong: `:not(.frozen)` was standing in for "has the player been told", and
   it means the opposite. */

/* #bank-clock's RULE IS DELETED WITH ITS MARKUP (A6-S2-7, 2026-08-30). The
   element was `<div id="bank-clock" class="hidden">11:59:59</div>` and
   R2-FIX-11 removed it from index.html; this line was the only other thing in
   the tree that named it, and a `display: none !important` for an id that no
   longer exists is a rule that can only ever mislead the next reader into
   thinking there is a clock element to un-hide. The real countdown renders
   into #bank-claim, where the CLAIM button becomes a red timer.
   THE KEYFRAME BELOW IS NOT PART OF IT and stays: bank-clock-flash is only a
   name, and #bank-claim.flash is what animates. */

#bank-claim.flash { animation: bank-clock-flash 0.42s steps(1) 3; }
@keyframes bank-clock-flash {
  0%, 49% { box-shadow: 0 0 0 2px #ffd6d0, inset 0 -2px 0 #5c1109; }
  50%, 100% { box-shadow: 0 0 0 2px transparent, inset 0 -2px 0 #5c1109; }
}

#bank-stat-caps,
#bank-stats {
  position: absolute;
  left: 10px;
  width: 320px;
  display: grid;
  grid-template-columns: 155px 155px;
  column-gap: 10px;
}

#bank-stat-caps {
  top: 180px;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: #5a5344;
  text-align: center;
}
#bank-stats { top: 204px; }

#bank-statbox {
  position: absolute;
  left: 10px;
  width: 320px;
  top: 176px;
  height: 128px;
  box-sizing: border-box;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

#bank-statbox::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 22px;
  height: 2px;
  background: linear-gradient(to bottom, #b3ad9c 0 1px, #fff 1px 2px);
}
#bank-stat-caps, #bank-stats { left: 18px; width: 304px; }
#bank-stats { grid-template-columns: 147px 147px; }
#bank-stat-caps { grid-template-columns: 1fr; }

.bank-stat + .bank-stat { border-top: 1px solid #dcd7c4; }

#bank-stats .bank-stat { border-top: 1px solid #dcd7c4; }
#bank-stats .bank-stat:nth-child(1),
#bank-stats .bank-stat:nth-child(2) { border-top: none; }

#bank-stats .bank-stat {
  height: 24px;
  box-sizing: border-box;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

#bank-stats .bank-stat .k {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  top: -1px;
}
#bank-stats .bank-stat .v { flex: none; white-space: nowrap; }

#bank-ref-plate {
  position: absolute;

  top: 316px;
  left: 10px;
  width: 320px;
  height: 62px;
  box-sizing: border-box;
  padding: 10px 9px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;

  box-shadow:
    inset 0 0 0 1px #a8a294,
    inset -1px -1px 0 1px #fff;
}

#bank-ref-label {
  position: absolute;
  top: -6px;
  left: 8px;
  padding: 0 5px;
  background: #d6d2c4;
  font-size: 11px;
  line-height: 13px;
  font-weight: 700;
  color: #1c1c1c;
  letter-spacing: 0;
  text-transform: none;
}
#bank-ref-row {
  position: static;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

#bank-ref-boxes {
  position: static;
  width: auto;
  height: 34px;
  gap: 4px;
  justify-content: flex-start;
}

#bank-ref-boxes .w95-cbox {
  position: relative;
  width: 28px;
  height: 34px;
  font-size: 23px;
  line-height: 34px;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-weight: 700;
  color: #1c1c1c;
  background: #fff;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset 2px 2px 0 #404040,
    inset -1px -1px 0 #fff,
    inset -2px -2px 0 #d6d2c4;
  border-radius: 0;
  text-shadow: none;
}

#bank-ref-boxes .w95-cbox:empty::after {
  content: '';
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 8px;
  height: 1px;
  background: #c9c4ae;
}

#bank-ref-ok {
  position: static;
  flex: none;
  margin-left: auto;
  width: 90px;
  height: 26px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  border: 2px solid #14161c;
  border-radius: 0;

  color: #26160a;
  text-shadow: 0 1px 0 rgba(255, 214, 160, 0.65);
  background: linear-gradient(#f0b071 0 2px, #d3822c 2px 55%, #b85f0e 55% 82%, #a1520a 82% 100%);
  box-shadow: inset 0 -2px 0 #6f3705;
}

#pool-copy {
  position: static;
  flex: none;
  margin-left: auto;
  width: 90px;
  height: 26px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  box-shadow:
    inset 0 0 0 1px #0a3d84,
    inset 0 0 0 2px #7fb7f0;
}

.pool-digit.land { animation: pool-land 0.28s steps(1) 1; }
@keyframes pool-land {
  0%, 49% { color: #6f3705; }
  50%, 100% { color: #1c1c1c; }
}

#bank-ref-boxes.bad .w95-cbox {
  color: #8c1c10;
  box-shadow:
    inset 1px 1px 0 #c2503f,
    inset 2px 2px 0 #7d1b0e,
    inset -1px -1px 0 #ffb2a2,
    inset -2px -2px 0 #de7d68;
}
#bank-ref-boxes.good .w95-cbox {
  color: #14601f;
  box-shadow:
    inset 1px 1px 0 #46955a,
    inset 2px 2px 0 #0f5219,
    inset -1px -1px 0 #aeeab7,
    inset -2px -2px 0 #63b473;
}
#bank-ref-boxes.bad { animation: cbox-shake 0.36s ease-in-out; }

.w95-cbox { caret-color: transparent; }

#bank-ref-boxes .w95-cbox {
  background-repeat: no-repeat;
  background-size: 3px 22px;
  background-position: center;
  background-image: none;
}
#bank-ref-boxes .w95-cbox.has { background-position: 78% center; }
#bank-ref-boxes .w95-cbox:focus { animation: cbox-caret 1.06s steps(1) infinite; }
@keyframes cbox-caret {
  0%, 49% { background-image: linear-gradient(#1c1c1c, #1c1c1c); }
  50%, 100% { background-image: none; }
}

#bank-ref-boxes.locked .w95-cbox {
  color: #a49e8c;
  background-color: #eceade;
  pointer-events: none;
  animation: none;
  background-image: none;
}
#bank-ref-ok:disabled {
  color: #a49e8c;
  background: linear-gradient(#f6f5f1 0 9%, #eeece6 9% 48%, #e4e1d7 48% 85%, #d4d0c4 85%);
  box-shadow: inset 0 0 0 1px #a8a294, inset 0 0 0 2px #cfcabc;
  pointer-events: none;
}

@keyframes cbox-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-4px); }
  30% { transform: translateX(4px); }
  45% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  80% { transform: translateX(-1px); }
}

.bank-stat {
  display: flex;
  justify-content: space-between;
  line-height: 16px;
}

.bank-stat .k { color: #6c6c6c; }
.bank-stat .v { font-weight: 700; }
.bank-stat .v.pos { color: #007000; }
.bank-stat .v.neg { color: #b00000; }
.bank-stat .v.dim { color: #000; }

.pfp-cell {
  width: 52px;
  height: 52px;
  padding: 2px;
  border: none;
  background: #c0c0c0;
  cursor: pointer;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #000,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
}

.pfp-cell img {
  display: block;
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}

.pfp-cell:hover img {
  box-shadow: 0 0 0 2px #000080;
}

.pfp-cell:active {
  box-shadow:
    inset 1px 1px 0 #000,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #808080,
    inset -2px -2px 0 #dfdfdf;
}

#powersapp {
  width: 576px;
  height: 968px;
  left: 672px;
  top: 16px;
}

#pw-sum-left {
  left: auto !important;
  right: 10px;
  width: auto !important;
  text-align: right;
}

#powersapp .w95-scale {
  width: 288px;
  height: 484px;
}

.pw-tab {
  height: 19px;
  padding: 0 10px;
  border: none;
  background: #b0b0b0;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px 0 0 #808080;
}

.pw-tab.active {
  background: #c0c0c0;
  font-weight: 700;
  height: 21px;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px 0 0 #000;
}

#pw-list {
  position: absolute;
  top: 44px;
  left: 10px;
  width: 268px;
}

.pw-app {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;

  height: 27px;
  padding: 0 6px 0 9px;
  margin: 0 0 2px;
  background: #f2efe4;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #cbc5b1;
}
.pw-app:last-child { margin-bottom: 0; }

.pw-app::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.55) 0 1px,
      transparent 1px 4px,
      rgba(0, 0, 0, 0.34) 4px 6px),
    var(--pw-edge, #b8b2a0);
}

.pw-app:hover { background: #fbf9f1; }

body.tour-live .pw-app:hover { background: none; }

.pw-app img {
  flex: none;
  width: 23px;
  height: 23px;
  image-rendering: pixelated;
}

.pw-app .info {
  flex: 1;
  min-width: 0;
}

.pw-app .nm {
  font-weight: 700;
  font-size: 12px;
  line-height: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pw-app .sub {

  font-size: 10px;
  line-height: 12px;
  color: #6c6c6c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  position: relative;
  top: -1px;
  padding-bottom: 2px;
  margin-bottom: -2px;

  padding-bottom: 3px;
  margin-bottom: -3px;
}

.pw-app.locked .nm { color: #9a968a; font-weight: 400; }
.pw-app.locked img:not(.lock) { filter: grayscale(1); opacity: 0.55; }

.pw-app .lock {
  flex: none;

  width: 20px;
  height: 20px;
  object-fit: contain;
  image-rendering: pixelated;

  position: relative;
  top: -1px;

  /* Sits in the same column as the install and play buttons, so it moves with
     them. 23px left the whole right-hand column stranded well short of the
     row's own edge. */
  margin-right: 10px;
}


/* .cl-chip was the third selector here and is DELETED 2026-09-03 (R8-NET-01),
   along with its own block further down and .cl-chip.fresh. Nothing puts it on
   an element; the overclock list draws .pw-dot and the profile swatch .pf-cube,
   and both keep this rule. */
.pw-dot,
.pf-cube {
  box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.45);
}
.pw-dot,
.pf-cube {
  width: 8px;
  height: 8px;
  flex: none;
}

/* A SUPERSEDED OVERCLOCK ROW LAYOUT, DELETED (R8-DEAD, 2026-09-03). Six rules
   stood here: `.pw-tier-head .gate`, `.pw-row`, `.pw-row .nm`, `.pw-row .st`,
   `.pw-row .st.boost` and `.pw-row .st.ok`. Neither .pw-tier-head nor .pw-row
   exists in index.html or is ever built by js/, so all six were unreachable,
   the four descendant rules doubly so.

   THEY WERE WORSE THAN INERT BECAUSE THE NAMES ARE THE LIVE VOCABULARY. .gate
   and .boost are exactly what the RAM gate and the overclock boost are called,
   so a session reading this inferred a markup shape that does not exist. What
   overclock.exe actually builds is .pw-app / .pw-divider / .pw-dot / .pw-btn
   (js/desktop.js renderPowers), and the one live `.st` span it makes carries
   its own inline cssText - it never read `.pw-row .st`.

   DO NOT CONFLATE .pw-row WITH --pw-rows. The custom property further down
   this file (#pwpending-hr2 and friends, `var(--pw-rows, 3)`) is LIVE and is
   written by js/desktop.js; only the CLASS was dead. */

.pw-btn {
  border: none;
  background: #c0c0c0;
  font: inherit;
  font-size: 10px;
  font-weight: 700;

  height: 15px;
  width: 48px;
  padding: 0;
  text-align: center;
  margin-left: auto;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #000,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
}


#pwconfirm .msg-text,
#pwconfirm .msg-sub,
#powerstub .msg-text,
#powerstub .msg-sub,
#pwpending .msg-text,
#pwpending .msg-sub {
  left: 10px;
  width: 260px;
}

#pwconfirm-yes {
  top: 182px;
  left: 10px;
  width: 165px;
  height: 24px;
}

#pwconfirm-no {
  top: 182px;
  left: 185px;
  width: 85px;
  height: 24px;
}

#pwconfirm-icon {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
}

#pwconfirm .w95-avatar-well {
  background: #ece9d8;
}

#pwpending {
  width: 560px;
  height: 400px;
  left: 680px;
  top: 320px;
  z-index: 32;
}

#pwpending .w95-scale {
  width: 280px;
  height: 200px;
}
#pwpending-coins {
  position: absolute;
  top: 30px;
  left: 10px;
  width: 260px;
  height: 120px;
  background: #fff;
  image-rendering: pixelated;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #000,
    inset -2px -2px 0 #dfdfdf;
}
#pwpending .msg-text { top: 158px; text-align: center; }
#pwpending .msg-sub { top: 176px; text-align: center; }

/* ---------------------------------------------------------------------
   THE TWO-KEY STATES: the confirm-window rhythm inside the same 280x200 box.

   .pay-ask is the whole switch. payChoice() puts it on, payWaiting() and
   payClose() take it off, and every rule below hangs off it - so the WAITING
   state is untouched by any of this and the coin canvas keeps its own
   geometry. The class also out-specifies the two .msg-text / .msg-sub rules
   above (1,2,0 over 1,1,0) without either of them being edited, which is what
   lets the SAME two elements be the centred waiting lines in one state and
   the house headline and subtitle in the other.

   THE VERTICAL BUDGET, in 1x px, is the 93px of dead face this state used to
   leave between the text and the keys:
      0-21    titlebar, with the X at top 4 / right 3
      28-70   .w95-avatar-well 42x42 at left 10, sprite ringed in its tint
      31-48   #pwpending-text as the headline, 14px bold, one line, ellipsis
      50-76   #pwpending-sub as the subtitle, grey, up to two lines
      78      .w95-groove
      88+     the .pv-kv rows, 15px each, one to three of them
      then    the closing groove, the centred fine line, and the keys at 168
   The two anchors below the rows ride on --pw-rows the way #pvr-groove2 and
   #wbc-groove2 ride on --pvr-rows / --wbc-rows. Fewer rows buys the fine line
   more room to wrap, which is why its max-height is derived from the same
   number rather than fixed: the keys at 168 are the floor and nothing is
   allowed to grow past them.
   --------------------------------------------------------------------- */
#pwpending-well {
  background: transparent;
  display: grid;
  place-items: center;
}

#pwpending-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
}

#pwpending-hr1 { top: 78px; }

#pwpending-stats {
  position: absolute;
  top: 88px;
  left: 10px;
  width: 260px;
}

#pwpending-stats .pv-kv { padding: 1px 0; }

#pwpending-hr2 { top: calc(96px + var(--pw-rows, 3) * 15px); }

#pwpending-fine {
  top: calc(104px + var(--pw-rows, 3) * 15px);
  left: 14px;
  width: 252px;
  line-height: 13px;
  /* 166px is the last line the keys at 168 will tolerate. */
  max-height: calc(166px - (104px + var(--pw-rows, 3) * 15px));
  overflow: hidden;
}

#pwpending.pay-ask .msg-text {
  top: 31px;
  left: 60px;
  right: 12px;
  width: auto;
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* THE SUBTITLE IS TWO LINES AND IT SAYS SO WHEN IT RUNS OUT (R9-FIX-P).

   This box prints the SERVER's own sentence, and one of them did not fit: the
   hold-race band's refusal (spend/intents.js holdRaceUnavailable) shipped at
   143 characters, and measured in the browser at this width it wanted FOUR
   lines - scrollHeight 52 against a clientHeight of 26. `overflow: hidden`
   alone cut it mid-word with no sign that anything was missing, so the window
   looked broken and the reader had no way to know a sentence had been taken
   off them.

   THAT SENTENCE IS NOW 72 CHARACTERS AND FITS (R9-FIX-R rewrote it, because a
   clamp gave the player an ellipsis where the missing words were "Nothing was
   charged"). The clamp stays: it is the guard for every OTHER caller, and it
   is what makes an overrun legible instead of broken.

   The clamp does not buy a single pixel of room - the height is unchanged and
   the window is untouched, per the standing order - it buys an ELLIPSIS, which
   is the difference between a sentence that was trimmed and one that appears to
   have stopped. The news itself does not live here anyway: what a player has to
   know is in the rows (Charged / Nothing) and in the fine line, which is why
   those exist.

   WHAT WAS ACTUALLY MEASURED, at 208px against an 11px face on a 13px line:
   two lines hold about 83 characters of prose (83 measured at scrollHeight 26,
   85 at 39), and the exact ceiling moves with the words because the face is
   proportional. Every sentence this window prints today is under it - the
   CHAIN_BLIND 503's 62 and the terminal-failed 59 both land at exactly 26/26,
   and so does the 72 above. An earlier version of this note guessed the
   ceiling at "about 65 characters"; that was never measured and it is wrong by
   nearly twenty. If you write a longer one, measure it rather than counting. */
#pwpending.pay-ask .msg-sub {
  top: 50px;
  left: 60px;
  right: 12px;
  width: auto;
  line-height: 13px;
  max-height: 26px;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* AND THE TOUCH HIT AREA GOES WITH THE BUTTON. touchChrome() hangs a
   transparent 46x42 .w95-xhit over the corner of every window that has a
   .w95-x and never takes it away again, so on a phone the WAITING state would
   keep an invisible cancel over a purchase that is still going through. The
   listener refuses a hidden X as well; this is the half that stops the tap
   being swallowed in the first place. */
#pwpending:not(.pay-ask) .w95-xhit { display: none; }

.pw-odds-row {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 17px;
  font-weight: 700;
}

.pw-odds-row .nm {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pw-odds-row .pct { flex: none; margin-left: auto; }

/* THE #bongscene RULES ARE DELETED (R8-DEAD, 2026-09-03) - seventeen of them,
   with the markup they styled. #bongscene, #bong-char, #bongscene.trip
   #bong-char, @keyframes bong-trip, #bong-flare, #bongscene.trip #bong-flare,
   @keyframes bong-flare, #bongscene.blackout ..., #bong-caption, #bong-reveal
   (here and a second XP-skin rule further down), #bong-reveal-tier,
   #bong-reveal-name and #bong-reveal-sub. The scene had nine ids and no
   JavaScript in any commit of this repo, so nothing ever applied .trip or
   .blackout and no player saw a pixel of it. The gravestone with the full
   story is in index.html, where the markup was. */

#bank-tabs,
#pv-tabs,
#wb-tabs,
#rig-tabs {
  position: absolute;
  top: 25px;
  left: 10px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  z-index: 2;
}

#rig-tabs, #bank-tabs, #wb-tabs, #pv-tabs { gap: 3px; }
#rig-tabs .pw-tab,
#bank-tabs .pw-tab,
#wb-tabs .pw-tab,
#pv-tabs .pw-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5a5344;
  border-radius: 0;
  background: linear-gradient(#f2eee0 0 2px, #ddd8c6 2px 60%, #cbc6b3 60%);
  box-shadow: inset 1px 1px 0 #fffdf4, inset -1px -1px 0 #a8a294;
  text-shadow: 0 1px 0 #f6f3e8;
}
#rig-tabs .pw-tab::before,
#bank-tabs .pw-tab::before,
#wb-tabs .pw-tab::before,
#pv-tabs .pw-tab::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  background: #a49e8c;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.35);
}
#rig-tabs .pw-tab:hover,
#bank-tabs .pw-tab:hover,
#wb-tabs .pw-tab:hover,
#pv-tabs .pw-tab:hover { background: linear-gradient(#fffdf4 0 2px, #e9e5d5 2px 60%, #d7d2bf 60%); }
#rig-tabs .pw-tab.active,
#bank-tabs .pw-tab.active,
#wb-tabs .pw-tab.active,
#pv-tabs .pw-tab.active {
  height: 21px;
  color: #f7d9a8;
  background: linear-gradient(#5b5346 0 2px, #6f6759 2px 60%, #7d7566 60%);
  box-shadow: inset 1px 1px 0 #453f35, inset -1px -1px 0 #a8a294;
  text-shadow: 0 1px 0 #3b352c;
}

#rig-tabs .pw-tab.active::before,
#bank-tabs .pw-tab.active::before,
#wb-tabs .pw-tab.active::before,
#pv-tabs .pw-tab.active::before {
  background: #ffb44a;
  box-shadow: 0 0 4px rgba(255, 180, 74, 0.9), inset -1px -1px 0 #b86b12;
  animation: tab-lamp 11s ease-in-out infinite;
}

@keyframes tab-lamp {
  0%   { box-shadow: 0 0 3px rgba(255, 180, 74, 0.45), inset -1px -1px 0 #b86b12; background: #f2a03a; }
  30%  { box-shadow: 0 0 8px rgba(255, 205, 120, 0.95), inset -1px -1px 0 #b86b12; background: #ffc563; }
  62%  { box-shadow: 0 0 3px rgba(255, 180, 74, 0.45), inset -1px -1px 0 #b86b12; background: #f2a03a; }
  80%  { box-shadow: 0 0 7px rgba(255, 196, 104, 0.9), inset -1px -1px 0 #b86b12; background: #ffbe55; }
  81.4% { box-shadow: 0 0 0 rgba(255, 180, 74, 0), inset -1px -1px 0 #7a4508; background: #9c6414; }
  82.0% { box-shadow: 0 0 7px rgba(255, 196, 104, 0.9), inset -1px -1px 0 #b86b12; background: #ffbe55; }
  83.2% { box-shadow: 0 0 0 rgba(255, 180, 74, 0), inset -1px -1px 0 #7a4508; background: #9c6414; }
  84.0% { box-shadow: 0 0 8px rgba(255, 205, 120, 0.95), inset -1px -1px 0 #b86b12; background: #ffc563; }
  100% { box-shadow: 0 0 3px rgba(255, 180, 74, 0.45), inset -1px -1px 0 #b86b12; background: #f2a03a; }
}

#wb-rep-seg .w95-button.active::before,
#wb-craft-seg .w95-button.active::before {
  animation: tab-lamp 11s ease-in-out infinite;
}

#pool-stats {
  position: absolute;
  top: 176px;
  left: 10px;
  width: 320px;
}

#aff-code-plate {
  position: absolute;
  top: 30px;
  left: 10px;
  width: 320px;
  height: 62px;
  box-sizing: border-box;
  padding: 10px 9px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow:
    inset 0 0 0 1px #a8a294,
    inset -1px -1px 0 1px #fff;
}

#aff-code-label {
  position: absolute;
  top: -6px;
  left: 8px;
  padding: 0 5px;
  background: #d6d2c4;
  font-size: 11px;
  line-height: 13px;
  font-weight: 700;
  color: #1c1c1c;
}

#aff-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
#pool-copy { margin-left: auto; }
/* #pool-copy.has-code DELETED 2026-09-03 (R8-NET-01). Driven live: an affiliate
   code was generated on a devnet world, the button became COPY, and #pool-copy
   never gained the class. */

#aff-board-title {
  left: 10px;
  width: 320px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  margin-top: -1px;
}

#pool-code-field {
  position: static;
  width: auto;
  height: 34px;
  display: flex;
  gap: 4px;
}
.pool-digit {
  position: relative;
  flex: none;
  width: 28px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 23px;
  font-family: 'MS Sans Serif', Arial, sans-serif;
  font-weight: 700;
  color: #1c1c1c;
  background: #fff;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset 2px 2px 0 #404040,
    inset -1px -1px 0 #fff,
    inset -2px -2px 0 #d6d2c4;
}

#pool-stats .bank-stat {
  height: 20px;
  line-height: normal;
  box-sizing: border-box;
  align-items: center;
  padding: 0;
}

#aff-take {
  position: absolute;
  top: 108px;
  left: 10px;
  width: 320px;
  height: 56px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

.aff-take-l {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}

.aff-take-n {
  font-size: 30px;
  line-height: 32px;
  font-weight: 700;
  color: #b8860b;
}
.aff-take-cap { font-size: 12px; line-height: 14px; color: #5c574c; }

.aff-take-r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}
.aff-take-lab {
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 1px;
  color: #7a7466;
  margin-bottom: 2px;
}

.aff-take-pct { font-size: 12px; line-height: 14px; font-weight: 700; color: #1c1c1c; }

/* A LEADERBOARD'S CSS OUTLIVING ITS LEADERBOARD, DELETED (R8-DEAD,
   2026-09-03). Six rules stood here - .lb-row with .rank, .who, .amt, a gold
   .top1 first place and a blue .you - a complete affiliate leaderboard row,
   sitting between two live affiliate rules so that it read as part of them.
   Zero references in index.html or js/, and no recorded reason.

   THE LIVE BOARD IS BUILT FROM DIFFERENT NAMES, WHICH IS THE POINT: affRow()
   in js/social.js writes .soc-row / .soc-rank / .soc-name / .soc-amt. These
   were a superseded shape, and this is the same species as the Stakers panel
   the owner deleted on 2026-09-03 - styling left behind after the thing it
   drew went, ready to make a rebuild look half-finished. Grepped for "lb-row"
   and for a dynamic `lb-` prefix across index.html, js/ and css/ first; the
   only "lb-" left in js/ is the unrelated .lb-y scene class. */

.aff-title {
  font-weight: 700;
  margin-top: -3px;
}

#rig-inst.bneck + #rig-warn-box {
  box-shadow:
    0 0 0 2px #7a1010,
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

.slot-row {
  display: flex;
  align-items: center;
  gap: 4px;

  padding: 2px 14px 2px 5px;
  margin-right: -10px;
  line-height: 12px;
  min-height: 24px;
  box-sizing: border-box;
}

.slot-row + .slot-row {
  border-top: 1px solid #eceade;
}

.slot-row:hover {
  background: #eef3fb;
}

.slot-row.sel {
  background: #316ac5;
  color: #fff;
}

/* .slot-row.sel .it-st was the second selector here and is DELETED 2026-09-03
   (R8-NET-01), with the .it-st block below it. */
.slot-row.sel .it-sub { color: #d8e4f8; }

.it-thumb {
  flex: none;
  image-rendering: pixelated;

  cursor: pointer;
}

.it-label {
  flex: 1;
  min-width: 0;
}

.it-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.it-sub {
  color: #6c6c6c;
  font-size: 10px;
  line-height: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  padding: 2px 0;
  margin: -2px 0;
}

.it-btn {
  flex: none;
  width: 62px;
  margin-left: 0;
}

.pw-btn.off {
  color: #9a968a;
  cursor: default;
}

.cond-bar {
  width: 72px;
  height: 4px;
  margin-top: 2px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #7f9db9;
}

.cond-bar.cb-inline {
  display: inline-block;
  width: 44px;
  height: 6px;
  margin: 0 0 1px;
  vertical-align: middle;
}

.cond-fill {
  height: 100%;
}

/* .slot-tag DELETED 2026-09-03 (R8-NET-01). The live tag on a slot row is
   .it-tag below; nothing writes .slot-tag. */

.it-tag {
  flex: none;
  width: 52px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #9a968a;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #d8d4c4;
}

.it-tag.zero { color: #c2bcaa; box-shadow: inset 0 0 0 1px #e4e0d2; }

.it-tag.rig {
  width: 44px;
  color: #8c1f14;
  font-weight: 700;
  background: #f7d9d5;
  box-shadow: inset 0 0 0 1px #c98d85;
}
.slot-row.in-use .it-name { color: #8c1f14; }

/* .it-swap, .it-sub .sw (and .sw.up / .sw.down), .it-sub .sep and
   .it-swap .up / .down / .sep ALL DELETED 2026-09-03 (R8-NET-01 / R8-NET-12).
   This was the swap-comparison line on an item row and nothing builds it.
   .sw's only false voucher was a VARIABLE named `sw` - the parameters of
   regrid(sw, sh) in js/desktop.js and a local at :7249 that is assigned the
   class 'pf-cube' - which is exactly the kind of hit a bare-word scan counts
   and a class-context scan does not. Driven live: the rig and workbench item
   rows were rendered with real parts fitted, staged and swapped, and no
   element carried any of these. */

.slot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;

  margin: 4px 4px 3px 1px;
  padding: 3px 7px 2px;
  color: #5a5344;
  text-shadow: 0 1px 0 #f0ecdd;
  background: #dcd7c5;
  box-shadow: inset 1px 1px 0 #b5afa0, inset -1px -1px 0 #f6f3e8;
}

#rig-slots.sb-off .slot-head,
#rig-spares.sb-off .slot-head { margin-right: 1px; }

#rig-inst .slot-head { margin-left: 1px; margin-right: 1px; }
.slot-head .sh-n {
  font-size: 9px;
  letter-spacing: 0;
  color: #8a8474;
}

.slot-head:first-child { margin-top: 0; }

.slot-empty {
  color: #9a968a;
  font-style: italic;
}

.slot-empty.pad { padding: 4px 5px; }

/* #pv-cd-rows was the first selector on these three shared list rules and came
   out with the ChudNet roster panel (R8-OWNER, 2026-09-03); index.html carries
   why. The rules themselves belong to the workbench, catalogue and job lists
   and are untouched. */
#wb-trade-list, #wb-repair-list, #wb-salvage-list, #wb-craft-list,
#wb-cool-list, #wb-drive-list,
#cl-cat-list, #jp-list {
  position: absolute;
  background: #e4e0d2;
  border: none;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
  overflow-y: auto;

  padding: 2px 0 2px 2px;
  box-sizing: border-box;
}

/* #cl-cat-list .cl-cat-cell:hover CAME OUT OF THIS RULE (2026-09-09). #f2efe4
   is a RAISED row over one of these sunken #e4e0d2 lists, which is what makes
   it a hover here; a catalogue cell is raised already and #f2efe4 is its
   RESTING colour, so this rule was setting it to what it already was. Its
   hover is beside its own rule now - see .cl-cat-cell:hover. */
#wb-trade-list .slot-row:hover, #wb-repair-list .slot-row:hover,
#wb-salvage-list .slot-row:hover, #wb-craft-list .slot-row:hover,
#wb-cool-list .slot-row:hover, #wb-drive-list .slot-row:hover,
#jp-list .jp-row:hover {
  background: #f2efe4;
}
#wb-trade-list .slot-row + .slot-row, #wb-repair-list .slot-row + .slot-row,
#wb-salvage-list .slot-row + .slot-row, #wb-craft-list .slot-row + .slot-row,
#wb-cool-list .slot-row + .slot-row, #wb-drive-list .slot-row + .slot-row {
  border-top-color: #cfcab8;
}

/* .chip-row DELETED 2026-09-03 (R8-NET-01). The live chip strip is built
   without it; .filter-chip below is what the kind chips carry. */

.filter-chip {
  height: 15px;
  padding: 0 6px;
  border: none;
  border-radius: 2px;
  font: inherit;
  font-size: 10px;
  color: #000;
  cursor: pointer;
  background: linear-gradient(#fff 0 20%, #f3f2ed 20% 55%, #e5e1d4 55% 88%, #d8d0c1 88%);
  box-shadow: inset 0 0 0 1px #5f83b9;
}

.filter-chip.on {
  font-weight: 700;
  color: #000;
  background: linear-gradient(#cfc9ba 0 20%, #ddd8c9 20% 55%, #e9e5d8 55% 88%, #f2efe4 88%);
  box-shadow:
    inset 1px 1px 0 #8e887a,
    inset -1px -1px 0 #fff,
    inset 0 0 0 1px #5f83b9;
}

#rigapp {
  width: 880px;

  height: 792px;
  left: 420px;
  top: 60px;
}

#rigapp .w95-scale { width: 440px; height: 396px; }

#rig-body { position: absolute; inset: 26px 0 0 0; }

#rig-slots {
  position: absolute;
  top: 28px;
  left: 10px;
  width: 210px;
  height: 332px;
  box-sizing: border-box;
  overflow-y: auto;

  padding: 0 0 0 2px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

#rig-slots::before,
#rig-slots::after {
  content: '';
  display: block;
  position: sticky;
  height: 3px;
  z-index: 2;
  margin-left: -1px;
  margin-right: -11px;
}
#rig-slots::before {
  top: 0;
  margin-bottom: -3px;
  background: linear-gradient(#a8a294 0 1px, #e4e0d2 1px 3px);
}
#rig-slots::after {
  bottom: 0;
  margin-top: -3px;
  background: linear-gradient(#e4e0d2 0 2px, #fff 2px 3px);
}
#rig-slots.sb-off::before,
#rig-slots.sb-off::after { display: none; }
#rig-slots > .slot-head:first-child { margin-top: 4px; }

#rig-slots .slot-row {

  margin: 3px 4px 4px 2px;
  padding: 3px 5px 3px 0;
}
#rig-slots .slot-row + .slot-row { border-top: none; }

#rig-slots .slot-row.mod,
#rig-slots .gpu-row,
#rig-slots .slot-row[data-cslot] {
  padding-top: 4px;
  padding-bottom: 4px;
}

#rig-slots .slot-row.mod .rig-plate,
#rig-slots .gpu-row .rig-plate,
#rig-slots .slot-row[data-cslot] .rig-plate {
  margin-top: -4px;
  margin-bottom: -4px;
}
#rig-slots .slot-row.mod {
  background: #f2efe4;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #b3ad9c,
    1px 1px 0 rgba(90, 83, 68, 0.35);
}
#rig-slots .slot-row.mod:hover { background: #f9f6ec; }

#rig-slots .slot-row.empty {
  height: 34px;
  box-sizing: border-box;
  background: #e0dcc9;
  box-shadow: inset 1px 1px 0 #c9c4b0, inset -1px -1px 0 #ece8da;
}

.rig-plate {
  flex: none;
  order: -1;
  width: 9px;
  align-self: stretch;

  margin: -3px 2px -3px 0;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.35), inset -1px -1px 0 rgba(0, 0, 0, 0.3);
}
.rig-plate.p-empty { background: linear-gradient(90deg, #8e3327 0 2px, #6d1f14 2px 7px, #3d0f08 7px); }

#rig-slots .slot-row.grab::after {
  content: '';
  flex: none;
  width: 3px;

  align-self: center;
  height: 17px;
  margin-left: 4px;
  background: repeating-linear-gradient(0deg, #b3ad9c 0 2px, transparent 2px 5px);
}

.rig-thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}

.rig-pluswrap {
  flex: 1;
  display: grid;
  place-items: center;
  align-self: stretch;
  pointer-events: none;
}

#rig-slots .slot-row.empty { transition: background-color 0.12s ease; }
body:not(.tour-live) #rig-slots .slot-row.empty:hover { background-color: #e9e3d2; }
body:not(.tour-live) #rig-slots .slot-row.empty:hover .rig-plus { filter: brightness(1.22); }
body:not(.tour-live) #rig-slots .slot-row.empty:active { background-color: #ddd6c2; }

.rig-plus {
  width: 18px;
  height: 18px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h6v6h6v6h-6v6h-6v-6h-6v-6h6z' fill='%236d1f14'/%3E%3Cg fill='%238e3327'%3E%3Crect x='6' y='0' width='6' height='1'/%3E%3Crect x='6' y='0' width='1' height='6'/%3E%3Crect x='0' y='6' width='6' height='1'/%3E%3Crect x='0' y='6' width='1' height='6'/%3E%3Crect x='12' y='6' width='6' height='1'/%3E%3Crect x='6' y='12' width='1' height='6'/%3E%3C/g%3E%3Cg fill='%233d0f08'%3E%3Crect x='11' y='0' width='1' height='6'/%3E%3Crect x='17' y='6' width='1' height='6'/%3E%3Crect x='12' y='11' width='6' height='1'/%3E%3Crect x='11' y='12' width='1' height='6'/%3E%3Crect x='6' y='17' width='6' height='1'/%3E%3Crect x='0' y='11' width='6' height='1'/%3E%3C/g%3E%3C/svg%3E") center no-repeat;
}

body.drop-over .drop-ring.on,
body.drop-over .drop-ring.on::before,
body.drop-over .drop-ring.on::after {
  outline-color: #b7e0ab;
  border-color: #b7e0ab;
}

#rig-inst {
  position: absolute;
  top: 28px;
  left: 230px;
  width: 200px;
  box-sizing: border-box;
  padding: 2px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#rig-inst .slot-head { margin: 5px 1px 3px; }

#rig-inst > .slot-head:first-child { margin-top: 0; }

#rig-warn-box {
  position: absolute;
  top: 100px;
  left: 230px;
  width: 200px;
  box-sizing: border-box;
  padding: 2px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#rig-warn-box .slot-head { margin: 0 1px 3px; }
/* #rig-warn-title .rig-bang DELETED 2026-09-03 (R8-NET-01). Driven live: the
   BOTTLENECKS box was rendered in both states on a devnet world - "No card
   fitted." and "No Bottlenecks." - and no bang element exists in either. */

#rig-hash {
  margin: 3px 6px 0;
  font-size: 20px;
  line-height: 22px;
  font-weight: 700;
}

#rig-air-row {
  display: flex;
  align-items: center;
  gap: 6px;

  margin: 5px 6px 2px;
}
#rig-air-label {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  color: #4a4438;
}

/* THE ARMING COUNTDOWNS (js/rig.js renderArming). A fresh GPU or cooler works
   at once but does not count toward a block for a minute, and these say how
   much is waiting and for how long.

   THEY MUST NOT GROW EITHER LINE. #rig-hash is a 20px/22px line and
   #rig-air-row is a fixed-height flex row, so both spans are 10px with no
   margin of their own beyond the gap before them, and neither is allowed to
   wrap - the window's size is fixed and a second line would push the airflow
   bar out of the panel. */
.rig-arm {
  font-size: 10px;
  font-weight: 700;
  color: #6a6250;
  white-space: nowrap;
  cursor: help;
}
/* It rides in #rig-hash-label beside the OFFLINE marker, not on the 20px
   number line, so it cannot rebuild that line box. See renderArming(). */
#rig-arm-hash { margin-left: 6px; }

#rig-wear {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: 2px;
  cursor: help;
  font-size: 0;
}
#rig-wear svg { display: block; width: 14px; height: 14px; }

#rig-air {
  flex: 1;
  height: 14px;
  background: linear-gradient(#d8d2c0 0 60%, #e4ded0 60% 100%);
  box-shadow:
    inset 1px 1px 0 #8a8064,
    inset -1px -1px 0 #fdfbf2,
    inset 0 0 0 2px rgba(138, 128, 100, 0.32);
  padding: 2px;
  box-sizing: border-box;
}

#rig-air-fill {
  height: 100%;
  width: 0;
  transition: width 0.2s ease;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.45));
}

#rig-warn {

  height: 41px;
  padding: 0 6px 2px;
  overflow: hidden;
}

.rig-note {
  color: #7a1010;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  height: 13px;
  line-height: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rig-note.none {
  color: #1e6b28;
  font-weight: 700;
  text-transform: none;
  font-size: 10px;
}
.rig-note + .rig-note {
  margin-top: 1px;
  padding-top: 1px;
  border-top: 1px solid #cfcab8;
}
.rig-note.more { color: #7a7466; }

.rig-note.ok { color: #2e7d32; }

#rig-spares-box {
  position: absolute;

  top: 172px;
  left: 230px;
  width: 200px;
  height: 188px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  padding: 2px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

#rig-spares .slot-head { flex: none; margin: 0 4px 2px 1px; }

.slot-head #rig-status {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}

#rig-spares {
  position: relative;
  flex: 1;
  min-height: 0;

  overflow: hidden;
  padding: 0 0 0 1px;
}

#rig-spares .slot-row,
#sp-list .slot-row {
  background: #f2efe4;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #b3ad9c,
    1px 1px 0 rgba(90, 83, 68, 0.35);
  margin: 3px 4px 4px 2px;
  padding: 2px 5px;
  user-select: none;
}
#rig-spares .slot-row + .slot-row,
#sp-list .slot-row + .slot-row { border-top: none; }
#rig-spares .slot-row:hover,
#sp-list .slot-row:hover { background: #f9f6ec; }

#rig-spares .slot-row::after,
#sp-list .slot-row::after {
  content: '';
  flex: none;
  width: 3px;

  align-self: center;
  height: 17px;
  margin-left: 4px;
  background: repeating-linear-gradient(0deg, #b3ad9c 0 2px, transparent 2px 5px);
}
#sp-list .slot-row.dragging { opacity: 0.3; }
#rig-spares .slot-row.dragging { opacity: 0.3; }

#rig-spares-box.out-over {
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}

#rig-slots .slot-row { user-select: none; }
#rig-slots .slot-row.dragging { opacity: 0.3; }

#rig-status { color: #b00000; }

#cl-reel-box {
  position: absolute;
  top: 196px;
  left: 10px;
  width: 418px;
  height: 62px;

  background: #e4e0d2;

  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px #8a8474,
    inset 1px 1px 0 1px #a8a294,
    inset -1px -1px 0 1px #fff,
    inset 3px 3px 0 #c9c4ae;
  box-sizing: border-box;
  overflow: hidden;
}

#cl-reel-win {
  position: absolute;
  inset: 4px;
  overflow: hidden;
}

#cl-reel {
  display: flex;
  height: 100%;
  align-items: center;
  will-change: transform;
}

.cl-tile {
  flex: none;
  width: 56px;
  display: grid;
  place-items: center;
}

.cl-tile canvas {
  position: relative;
  top: -3px;
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}

#cl-reel-marker {
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 2px;
  height: auto;
  margin-left: -1px;
  background: #f8c869;
  box-shadow: 0 0 6px rgba(248, 200, 105, 0.8);
  z-index: 2;
}

#rigapp.mint-suspense { animation: mint-shake 110ms steps(1, end) infinite; }
#rigapp.mint-suspense.hard { animation-duration: 70ms; }
#rigapp.mint-suspense #cl-reel-marker {
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.95);
}
#rigapp.mint-suspense.hard #cl-reel-marker {
  box-shadow: 0 0 16px rgba(255, 255, 255, 1), 0 0 30px rgba(248, 200, 105, 0.8);
}
#rigapp.mint-suspense #cl-reel-box { animation: mint-charge 340ms ease-in-out infinite alternate; }
#rigapp.mint-suspense.hard #cl-reel-box { animation-duration: 180ms; }
@keyframes mint-charge {
  0%   { box-shadow: inset 1px 1px 0 #a8a294, inset -1px -1px 0 #fff, inset 2px 2px 0 #c9c4ae; }
  100% { box-shadow: inset 0 0 0 2px #f8c869, inset 0 0 22px rgba(248, 200, 105, 0.55); }
}
@keyframes mint-shake {
  0% { translate: -1px 0; }
  50% { translate: 1px 1px; }
  100% { translate: -1px 0; }
}
#rigapp.mint-suspense.hard { animation-name: mint-shake-hard; }
@keyframes mint-shake-hard {
  0%   { translate: -2px -1px; }
  25%  { translate: 2px 1px; }
  50%  { translate: -2px 1px; }
  75%  { translate: 2px -1px; }
  100% { translate: -2px -1px; }
}

#cl-reel-box.landed {
  animation: mint-land 0.9s ease-out;
}

@keyframes mint-land {
  0% { box-shadow: inset 0 0 0 3px var(--mint-glow), inset 0 0 22px var(--mint-glow); }
  60% { box-shadow: inset 0 0 0 2px var(--mint-glow), inset 0 0 8px var(--mint-glow); }
  100% { box-shadow: inset 0 0 0 1px #7f9db9; }
}

#cl-reveal {
  position: absolute;

  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  grid-template-rows: auto auto auto;
  align-content: center;
  align-items: center;
  column-gap: 8px;
  padding: 6px 8px;
  box-sizing: border-box;
  text-align: left;
  overflow: hidden;
}

#cl-reveal-odds {
  grid-column: 3;
  grid-row: 1 / 4;
  min-width: 56px;
  padding-left: 8px;
  border-left: 1px solid currentColor;
  color: #6a6a5e;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#cl-reveal-rar { grid-column: 2; grid-row: 1; }
#cl-reveal-name { grid-column: 2; grid-row: 2; }

#cl-reveal-sub {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cl-reveal-pct {
  font-size: 19px;
  font-weight: 700;
  line-height: 20px;
  color: inherit;
}
#cl-reveal-pctcap {
  font-size: 9px;
  letter-spacing: 1px;
  color: #6a6a5e;
  text-transform: uppercase;
}
#cl-reveal.empty #cl-reveal-odds { visibility: hidden; }

#cl-reveal.landed { animation: cl-plate 320ms ease-out 1; }
#cl-reveal.landed #cl-reveal-img { animation: cl-drop 460ms cubic-bezier(0.2, 1.5, 0.4, 1) 1; }
#cl-reveal.landed #cl-reveal-rar,
#cl-reveal.landed #cl-reveal-name,
#cl-reveal.landed #cl-reveal-sub { animation: cl-stamp 300ms ease-out 160ms backwards; }
#cl-reveal.landed #cl-reveal-odds { animation: cl-stamp 300ms ease-out 300ms backwards; }

@keyframes cl-plate {
  0% { box-shadow: inset 0 0 0 3px currentColor; }
  100% { box-shadow: inset 0 0 0 1px #7f9db9; }
}
@keyframes cl-drop {
  0% { transform: scale(0.35); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes cl-stamp {
  0% { transform: translateX(-6px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

#cl-reveal-img {
  grid-row: 1 / 4;
  position: relative;
  top: -3px;
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}

#cl-reveal-rar {
  font-weight: 700;
  letter-spacing: 1px;
}

.cl-sample { color: #8e3327; }

#cl-reveal-name {
  color: #1c1c1c;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#cl-reveal-sub {
  color: #6c6c6c !important;
  font-size: 10px;
  line-height: 11px;
}

#benchapp {
  width: 840px;
  height: 812px;
  left: 500px;
  top: 60px;
}

#benchapp .w95-scale { width: 420px; height: 406px; }

#wb-slots {
  position: absolute;

  top: 54px;
  left: 10px;
  width: 400px;
  height: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.wb-slot {
  position: relative;
  display: flex;
  align-items: stretch;
  font-size: 10px;
  overflow: hidden;
  background: #d6d1c0;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #8e887a;
}

.wb-plate {
  flex: none;
  width: 15px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #f6f3e8;
  background: linear-gradient(#8e887a 0 1px, #6f6a5d 1px 100%);
  box-shadow: inset -1px 0 0 #4e4a40;
}

.wb-bay {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 5px;
  background: #fff;

  box-shadow:
    inset 1px 1px 0 #8e887a,
    inset 2px 2px 0 #bdb7a6,
    inset -1px -1px 0 #fff;
}

#rig-slots .slot-row.dead {
  opacity: 0.42;
  pointer-events: none;
  filter: grayscale(1);
}

.wb-slot.idle .wb-bay {
  justify-content: center;

  background: #d7d2c2;
}

.wb-slot.idle .wb-plate {
  background: linear-gradient(#e5934a 0 1px, #b85f0e 1px 60%, #a1520a 60% 100%);
  box-shadow: inset -1px 0 0 #6f3705;
  color: #fff6ea;
}

.wb-plus {
  position: relative;
  width: 26px;
  height: 20px;
  flex: none;
  padding: 0;
  border: none;
  background: none;
  pointer-events: none;
}

.wb-plus::before,
.wb-plus::after {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 5px 15px, 15px 5px;
}

.wb-plus::before {
  background-image:
    linear-gradient(#a8a294, #a8a294),
    linear-gradient(#a8a294, #a8a294);
  background-position: 10px 4px, 5px 9px;
}

.wb-plus::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h5v5h5v5h-5v5h-5v-5h-5v-5h5z' fill='%23b85f0e'/%3E%3Cg fill='%23e5934a'%3E%3Crect x='5' y='0' width='5' height='1'/%3E%3Crect x='5' y='0' width='1' height='5'/%3E%3Crect x='0' y='5' width='5' height='1'/%3E%3Crect x='0' y='5' width='1' height='5'/%3E%3Crect x='10' y='5' width='5' height='1'/%3E%3Crect x='5' y='10' width='1' height='5'/%3E%3C/g%3E%3Cg fill='%23a1520a'%3E%3Crect x='9' y='0' width='1' height='5'/%3E%3Crect x='14' y='5' width='1' height='5'/%3E%3Crect x='10' y='9' width='5' height='1'/%3E%3Crect x='9' y='10' width='1' height='5'/%3E%3Crect x='5' y='14' width='5' height='1'/%3E%3Crect x='0' y='9' width='5' height='1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 15px 15px;
  background-position: 6px 3px;
}

.wb-slot.idle:hover .wb-plus::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h5v5h5v5h-5v5h-5v-5h-5v-5h5z' fill='%23d4740f'/%3E%3Cg fill='%23ffb066'%3E%3Crect x='5' y='0' width='5' height='1'/%3E%3Crect x='5' y='0' width='1' height='5'/%3E%3Crect x='0' y='5' width='5' height='1'/%3E%3Crect x='0' y='5' width='1' height='5'/%3E%3Crect x='10' y='5' width='5' height='1'/%3E%3Crect x='5' y='10' width='1' height='5'/%3E%3C/g%3E%3Cg fill='%23bd6209'%3E%3Crect x='9' y='0' width='1' height='5'/%3E%3Crect x='14' y='5' width='1' height='5'/%3E%3Crect x='10' y='9' width='5' height='1'/%3E%3Crect x='9' y='10' width='1' height='5'/%3E%3Crect x='5' y='14' width='5' height='1'/%3E%3Crect x='0' y='9' width='5' height='1'/%3E%3C/g%3E%3C/svg%3E");
}

.wb-slot.idle:active .wb-plus::before { background-image: none; }

.wb-slot.idle:active .wb-plus::after {
  background-position: 7px 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h5v5h5v5h-5v5h-5v-5h-5v-5h5z' fill='%238a4506'/%3E%3Cg fill='%236f3705'%3E%3Crect x='5' y='0' width='5' height='1'/%3E%3Crect x='5' y='0' width='1' height='5'/%3E%3Crect x='0' y='5' width='5' height='1'/%3E%3Crect x='0' y='5' width='1' height='5'/%3E%3Crect x='10' y='5' width='5' height='1'/%3E%3Crect x='5' y='10' width='1' height='5'/%3E%3C/g%3E%3Cg fill='%23a1520a'%3E%3Crect x='9' y='0' width='1' height='5'/%3E%3Crect x='14' y='5' width='1' height='5'/%3E%3Crect x='10' y='9' width='5' height='1'/%3E%3Crect x='9' y='10' width='1' height='5'/%3E%3Crect x='5' y='14' width='5' height='1'/%3E%3Crect x='0' y='9' width='5' height='1'/%3E%3C/g%3E%3C/svg%3E");
}
.wb-slot.idle:hover .wb-bay {
  background: #e3ded0;
}

.wb-slot-boost {
  font-size: 9px;
  font-weight: 700;
  color: #2e7d32;
  letter-spacing: 1px;
}

.wb-slot.locked .wb-bay {
  justify-content: center;
  color: #a49e8e;

  background:
    repeating-linear-gradient(-45deg,
      #e4e1d4 0 4px, #d5d1c1 4px 8px);
}
.wb-slot.locked .wb-plate {
  color: #d8d4c4;
  background: linear-gradient(#b3ad9c 0 1px, #97917f 1px 100%);
}

.wb-lockmark {
  flex: none;
  width: 20px;
  height: 20px;
  display: block;
  image-rendering: pixelated;

}

.wb-lockmark[hidden] { display: none; }

.wb-slot.locked .wb-bay { position: relative; }
.wb-slot.locked .wb-lockmark,
.wb-slot-locklab {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  transition: opacity 0.22s ease;
}
.wb-slot-locklab {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: #4a443a;
  text-shadow: 0 1px 0 #f2efe4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.wb-slot.locked.telling .wb-lockmark { opacity: 0; }
.wb-slot.locked.telling .wb-slot-locklab { opacity: 1; }

.wb-slot.locked .wb-lockmark { transition: opacity 0.22s ease, filter 0.12s ease; }
.wb-slot.locked .wb-lockmark:hover { filter: brightness(1.18) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)); }

.wb-slot.done .wb-bay {
  background: #efe9d6;
  justify-content: space-between;
}

.wb-slot.done .wb-plate {
  background: linear-gradient(#7fd68f 0 1px, #3ba050 1px 60%, #2e8b3f 60% 100%);
  box-shadow: inset -1px 0 0 #1f6b2c;
}
.wb-slot.busy:not(.done) .wb-plate {
  background: linear-gradient(#a9cbee 0 1px, #4f83bd 1px 60%, #3b6ea5 60% 100%);
  box-shadow: inset -1px 0 0 #274d76;
}

.wb-slot.busy:not(.done) .wb-bay { align-items: center; gap: 6px; }

.wb-slot.busy { cursor: pointer; }
.wb-slot.busy:hover .wb-bay { background: #eef3fb; }
.wb-slot.busy.done:hover .wb-bay { background: #def2de; }

/* .wb-slot-label and .wb-slot-art DELETED 2026-09-03 (R8-NET-01). Driven live:
   a real one-hour repair job and a 25-minute cooling craft were started,
   watched, rushed and collected on a devnet world, so the bay was rendered
   empty, busy, done and collecting, and neither class appeared in any state.
   .wb-slot-col below is the live one. */
.wb-slot-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.wb-slot-time {
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  color: #1c1c1c;
  white-space: nowrap;
}

.slot-row.ghost .it-thumb,
.slot-row.ghost .it-label { opacity: 0.42; }
/* .pw-btn.it-btn.faded DELETED 2026-09-03 (R8-NET-01). Its only voucher was the
   word `faded` inside `faded-in`, the full-screen scene fader that eleven
   modules toggle - a different class entirely, and still live. Nothing writes
   `faded` on its own. */

.wb-slot.done .wb-bay { gap: 0; justify-content: center; }

.wb-collect {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid #14161c;
  border-radius: 0;

  background: linear-gradient(
    #d8f5cf 0 2px,
    #7fd472 2px 55%,
    #4fae42 55% 82%,
    #37852c 82% 100%);
  box-shadow: inset 0 -2px 0 #245c1c;

  padding: 0 0 1px 1px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #06280a;
  text-shadow: 0 1px 0 #a9e6a4;
  cursor: pointer;
}

.wb-slot.done .wb-bay { padding: 0; }

.wb-slot.landed { animation: wb-landed 0.42s steps(1) 1; }
.wb-slot.landed .wb-plate { animation: wb-plate-pop 0.52s ease-out 1; }
.wb-slot.landed .wb-bay { overflow: hidden; }
.wb-slot.landed .wb-collect { animation: wb-collect-in 0.3s cubic-bezier(0.16, 0.9, 0.3, 1) 1; }
@keyframes wb-landed {
  0%, 100% { translate: 0 0; }
  12% { translate: -2px 0; }
  30% { translate: 2px 0; }
  48% { translate: -1px 0; }
  66% { translate: 1px 0; }
}
@keyframes wb-plate-pop {
  0% { filter: brightness(2.1); }
  35% { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}
@keyframes wb-collect-in {
  0% { translate: 0 -100%; }
  100% { translate: 0 0; }
}

.wb-slot-bar {
  height: 8px;
  padding: 1px;
  background: #eceadf;
  box-sizing: border-box;
  box-shadow: inset 1px 1px 0 #b3ad9c, inset -1px -1px 0 #fff;
}

.wb-slot-fill {
  height: 100%;
  background: linear-gradient(
    #8fc4f2 0 1px,
    #4a92dc 1px 45%,
    #2f6ad0 45% 82%,
    #1e4a95 82% 100%);
}

.wb-slot.running .wb-bay {
  position: relative;
  gap: 0;
  padding: 0;
  align-items: stretch;
  box-sizing: border-box;
  border: 0;
  background: none;
  box-shadow: none;
}

.wb-slot.running .wb-slot-col {
  position: static;
  flex: 1;
  min-width: 0;
  gap: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;

  align-self: stretch;
}

.wb-slot.running .wb-slot-bar {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid #14161c;
  border-radius: 0;
  background: linear-gradient(
    #7fb4ec 0 2px,
    #4184cf 2px 55%,
    #2b62a8 55% 82%,
    #1f4d88 82% 100%);
  box-shadow: inset 0 -2px 0 #143a68;
}

.wb-slot.running .wb-slot-fill {
  height: 100%;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.18) 0 2px,
      rgba(0, 0, 0, 0) 2px 4px,
      rgba(0, 0, 0, 0.12) 4px 6px,
      rgba(0, 0, 0, 0) 6px 8px),
    linear-gradient(
      #d8ecfd 0 2px,
      #8dc2f2 2px 55%,
      #62a0e0 55% 82%,
      #4a83c4 82% 100%);
  background-size: 8px 100%, 100% 100%;

  animation: pv-crack-crawl 500ms steps(8) infinite;
}

.wb-slot.running .wb-slot-time {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-family: inherit;

  font-size: 13px;
  line-height: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 0 0 0 1px;
  text-shadow: 0 1px 0 rgba(207, 230, 251, 0.65);

  color: #0e1b33;
  pointer-events: none;
}

#wb-odds {
  position: absolute;
  top: 94px;
  left: 152px;
  width: 258px;
  height: 62px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#wb-drive-list { top: 226px; left: 10px; width: 400px; height: 170px; }

#wb-crack {
  position: absolute;

  top: 100px;
  left: 10px;
  width: 400px;
  height: 122px;
  box-sizing: border-box;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#wbc-head { margin: 3px 3px 0; }

#wbc-body {
  position: absolute;
  top: 26px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#wbc-drive { width: 58px; height: 58px; }
#wbc-drive canvas { width: 50px; height: 50px; }
#wbc-read { flex: 1; min-width: 0; }

#wbc-status {
  font-size: 10px;
  font-weight: 700;
  color: #4a443a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 3px;
}

#wbc-strip {
  position: relative;
  height: 38px;
  background-color: #17130e;
  background-image:
    linear-gradient(90deg, #4a4436 0 1px, transparent 1px 100%),
    linear-gradient(90deg, #332e24 0 1px, transparent 1px 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(0, 0, 0, 0.55) 0 2px, transparent 2px 14px);
  background-size: 25% 9px, 5% 5px, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat-x, repeat-x, repeat, no-repeat;
  box-shadow: inset 0 0 0 1px #6f6858;
  cursor: pointer;
}

#wbc-strip.miss {
  animation: wbc-miss 0.25s linear;
}

@keyframes wbc-miss {
  0%, 100% { box-shadow: inset 0 0 0 1px #6f6858; }
  50% { box-shadow: inset 0 0 0 2px #c22a1c; background: #2a1010; }
}

#wbc-zone {
  position: absolute;
  top: 0;
  height: 100%;
  box-shadow: inset 0 0 0 1px #3fba54, 0 0 6px rgba(63, 186, 84, 0.5);
}
#wbc-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(63, 186, 84, 0.35);
  animation: wbc-zone-pulse 1.4s ease-in-out infinite;
}
@keyframes wbc-zone-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

#wbc-locks.pips { display: flex; gap: 3px; align-items: center; }
.wbc-pip {
  width: 7px;
  height: 7px;
  background: #2a2620;
  box-shadow: inset 0 0 0 1px #6f6858;
}
.wbc-pip.on {
  background: #3fba54;
  box-shadow: inset 0 0 0 1px #b8ffb8, 0 0 5px rgba(63, 186, 84, 0.8);
}

#wbc-cursor {
  position: absolute;
  top: -2px;
  width: 3px;
  height: 42px;
  background: #2fae42;
  box-shadow: 0 0 3px rgba(47, 174, 66, 0.65);
  transform: translateX(-50%);
}

#wbc-cursor.hot {
  background: #eafff0;
  box-shadow: 0 0 6px rgba(120, 255, 150, 0.95), 0 0 12px rgba(63, 186, 84, 0.6);
}

#wbc-acts {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
}

#wbc-acts > button { height: 22px; }

#wbc-lock {
  flex: 1;
  min-width: 0;
}
#wbc-cancel { flex: none; width: 96px; }

/* #wb-reveal AND ITS FOUR CHILDREN ARE DELETED (R8-DEAD, 2026-09-03) with
   their markup and their one listener, all in the same commit.

   FIVE RULES STOOD HERE: #wb-reveal (position absolute, top 120 / left 80,
   260x140, background #ece9d8, border-radius 5px 5px 0 0, an inset 3px #0a5bd0
   frame, z-index 5, text-align center), #wb-reveal-img (48x48 at 30/14,
   image-rendering pixelated), #wb-reveal-rar (30/66, 186 wide, bold, 1px
   letter-spacing), #wb-reveal-name (46/66, 186 wide, 13px bold) and
   #wb-reveal-sub (84/12, 236 wide, 12px line-height).

   THE WINDOW WAS NEVER OPENED AND ITS FOUR CONTENT NODES WERE NEVER WRITTEN.
   The bench's reveal is reveal() in js/workbench.js and it drives #wbconfirm -
   "no new window, no new id, no resize (house law)". The only line in js/ that
   named any of these ids was a close handler on #wb-reveal-x, and it went with
   the markup because el() returns null once the markup is gone.

   NO OTHER WINDOW MOVED. Measured: this file carried 1,137 width/height/min-/
   max- declarations before and 1,130 after. The seven that went are the seven
   listed above, all inside #wb-reveal's own subtree, and the diff of the
   remaining 1,130 declaration lines is EMPTY - nothing added, nothing changed.
   Window sizes are frozen by standing owner order and nothing here resizes one.

   DO NOT RE-ADD STYLING FOR THESE NAMES. Styling that outlives the markup it
   drew is how .pvr-tw and .lb-row survived their own features;
   backend/server/test/r8-dead-markup.test.mjs reddens if any rule outside a
   comment selects one of these six ids again. */

#gbox {
  width: 560px;
  left: 680px;
  top: 400px;
  z-index: 33;
}

#gbox { height: 300px; }

#gbox .w95-scale { width: 280px; height: 150px; }

#gbox .msg-text,
#gbox .msg-sub {
  left: 14px;
  width: 252px;
  text-align: left;
}

#gbox .msg-text { top: 26px; }
#gbox .msg-sub { top: 60px; }

#gbox-ok {
  top: 116px;
  left: 10px;
  width: 155px;
  height: 24px;
}

#gbox-cancel {
  top: 116px;
  left: 175px;
  width: 95px;
  height: 24px;
}

/* THE REFUSAL BOX IS DRAWN 30% SMALLER THAN THE REST OF THE FAMILY (owner,
   2026-09-01, after seeing it at true scale: "shrink them by about 30%").
   It is the ONE variant that steps off the house scale(2), and it steps as a
   whole: the frame, the type and the button shrink together, so nothing is
   re-laid out and nothing can clip that did not clip before. 280 x 82 at 1.4
   is 392 x 115, which is where these two numbers come from.
   fitMsgBox reads the factor off this transform rather than assuming 2, so a
   box that grows to fit a long refusal grows at 1.4 as well. */
#gbox.bare { width: 392px; height: 115px; }
#gbox.bare .w95-scale { height: 82px; transform: scale(1.4); }
#gbox.bare #gbox-ok,
#gbox.bare #gbox-cancel { top: 48px; }

#gbox.bare .msg-text {
  top: 28px;
  font-weight: 700;
  font-size: 13px;
  line-height: 15px;
}

#gbox-rows {
  position: absolute;
  top: 48px;
  left: 14px;
  width: 252px;
  display: none;
}

#gbox.detailed { height: calc(2 * (116px + var(--gb-rows, 3) * 13px + var(--gb-sub, 14px))); }
#gbox.detailed .w95-scale { height: calc(116px + var(--gb-rows, 3) * 13px + var(--gb-sub, 14px)); }
#gbox.detailed #gbox-rows { display: block; top: 60px; }

#gbox.detailed #gbox-text {
  top: 30px;
  font-weight: 700;
  font-size: 13px;
  line-height: 15px;
}

#gbox.detailed #gbox-hr1 { display: block; top: 52px; }
#gbox.detailed #gbox-hr2 { display: block; top: calc(66px + var(--gb-rows, 3) * 13px); }
#gbox.detailed #gbox-sub { top: calc(74px + var(--gb-rows, 3) * 13px); }
#gbox.detailed #gbox-ok,
#gbox.detailed #gbox-cancel { top: calc(84px + var(--gb-rows, 3) * 13px + var(--gb-sub, 14px)); }

#gbox.lined #gbox-rows {
  box-sizing: border-box;
  padding: 3px 6px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#gbox.lined.detailed { height: calc(2 * (110px + var(--gb-rows, 3) * 13px + var(--gb-sub, 14px))); }
#gbox.lined.detailed .w95-scale { height: calc(110px + var(--gb-rows, 3) * 13px + var(--gb-sub, 14px)); }
#gbox.lined.detailed #gbox-sub { top: calc(78px + var(--gb-rows, 3) * 13px); }

#gbox.lined.detailed.hassub #gbox-ok,
#gbox.lined.detailed.hassub #gbox-cancel {
  top: calc(78px + var(--gb-rows, 3) * 13px + var(--gb-sub, 14px));
}

#gbox.lined.detailed #gbox-text { top: 26px; }
#gbox.lined.detailed #gbox-hr1 { top: 48px; }
#gbox.lined.detailed #gbox-rows { top: 56px; }
#gbox.lined.detailed #gbox-hr2 { top: calc(70px + var(--gb-rows, 3) * 13px); }

#gbox.lined.detailed #gbox-ok,
#gbox.lined.detailed #gbox-cancel { top: calc(78px + var(--gb-rows, 3) * 13px); }
#gbox.lined.detailed:not(.hassub) { height: calc(2 * (110px + var(--gb-rows, 3) * 13px)); }
#gbox.lined.detailed:not(.hassub) .w95-scale { height: calc(110px + var(--gb-rows, 3) * 13px); }

#gbox.inlay-fill #gbox-well,
#gbox.inlay-fill .gbox-hr { display: none !important; }
#gbox.inlay-fill #gbox-text {
  top: 6px !important;
  left: 8px !important;
  width: 184px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-align: center !important;
  padding-bottom: 3px;
}
#gbox.inlay-fill #gbox-rows {
  display: block !important;
  top: 30px !important;
  left: 8px !important;
  width: 184px !important;
  box-sizing: border-box;
  padding: 3px 6px;
  background: #eceadf;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}
#gbox.inlay-fill .gbox-row { font-size: 10px; line-height: 14px; }
#gbox.inlay-fill .gbox-row + .gbox-row { border-top: 1px solid #dcd9cb; }
#gbox.inlay-fill .gbox-node { margin-top: 4px; }

#gbox.inlay-fill #gbox-sub {
  top: 100px !important;
  left: 8px !important;
  width: 184px !important;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

#gbox.inlay-fill #gbox-sub::after {
  content: '';
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(#b3ad9c 0 1px, #fbf9f1 1px 2px);
}
#gbox.inlay-fill #gbox-ok,
#gbox.inlay-fill #gbox-cancel {
  top: 160px !important;
  height: 20px !important;
  font-size: 9px !important;
}
#gbox.inlay-fill #gbox-ok { left: 8px !important; width: 108px !important; }
#gbox.inlay-fill #gbox-cancel { left: 120px !important; width: 72px !important; }

#gbox.inlay-fill.iconed #gbox-well {
  display: grid !important;
  top: 6px !important;
  left: 83px !important;
  width: 34px !important;
  height: 34px !important;
  background: #fff !important;
}
#gbox.inlay-fill #gbox-icon { width: 30px; height: 30px; }
#gbox.inlay-fill.iconed #gbox-text { top: 44px !important; }
#gbox.inlay-fill.iconed #gbox-rows { top: 66px !important; }
#gbox.inlay-fill.iconed #gbox-sub { top: 128px !important; height: 26px; }

#gbox.danger-keys #gbox-ok,
#gbox.danger-keys #gbox-cancel {
  box-sizing: border-box;
  white-space: nowrap;
  height: 26px;
}
#gbox.danger-keys #gbox-cancel { left: 10px; width: 155px; }
#gbox.danger-keys #gbox-ok { left: 175px; width: 95px; }

#gbox.flashing::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px #b00000;
  animation: gbox-flash 0.8s steps(1) 3;
}
@keyframes gbox-flash {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.gbox-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  line-height: 13px;
}

.gbox-row .k { color: #6b675c; }

.gbox-node { margin-top: 5px; }
.gbox-node > * { width: 100%; }

.gbox-row .v {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* msgBox has taken a per-row class since it was written - rows are
   [key, value, cls] - and the only one anything ever defined was .neg, scoped
   to power_warning.exe's own rows. So a caller passing 'pos' got bold black
   and no complaint. These are the same two colours the arena rows and the
   confirm windows use (.pv-kv .v.pos / .v.neg), written once here so the
   third value msgBox understands does what its name says. */
.gbox-row .v.pos { color: #2e7d32; }
.gbox-row .v.neg { color: #b00000; }
.gbox-row .v.amt { color: #a1520a; }

#gbox-well {
  position: absolute;
  top: 18px;
  left: 116px;
  width: 48px;
  height: 48px;
  background: #fff;
  display: none;
  place-items: center;
}

#gbox-icon {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
}

.gbox-hr {
  position: absolute;
  left: 14px;
  width: 252px;
  height: 2px;
  background: linear-gradient(to bottom, #c9c4ae 0 1px, #fff 1px 2px);
  display: none;
}

/* THE DIM BEHIND THE HOLD REFUSAL (owner, 2026-08-25).
   power_warning.exe is the one window in the game with a single key, and that
   key is Cancel - the spend is refused outright, and there is nothing else to
   do with the desk until it is dismissed. It used to open over a live desktop
   with every app still lit and clickable, which read as one more window rather
   than as a stop.

   z-index 95 is deliberate and is the whole trick: app windows live in 50..94
   (js/desktop.js Z_BASE/Z_CEIL), so one number above the ceiling covers all of
   them without the dim having to be re-raised, and js/desktop.js lifts
   #powerwarn to 96 for as long as it is up.

   IT ONLY BEGAN WORKING ON 2026-08-28. The dim sat inside #desktop-stage,
   whose scale transform is a stacking context, while every window had been
   moved out to #scene-desktop - so 95 was sealed in with the wallpaper and
   painted under all of them. initDesktop() now moves this element out with
   the windows; see the note there.

   IT COVERS THE TASKBAR TOO, and that is the point rather than an oversight
   (owner, 2026-08-28): power_warning.exe is a refusal with one key, and while
   it is up the only two things on the machine that may be pressed are its
   Cancel and its X. The dim is what enforces that - it is an ordinary element
   with pointer-events auto, so every click on anything beneath it stops here. */
/* 0.72, NOT 0.55 (owner, 2026-08-29). The wallpaper is a bright noon sky over
   bright grass, and 55% of a near-black over it came out as a wash nobody read
   as a wash: the desk behind the refusal looked exactly as lit as the desk
   without one, which is the whole effect missing. The clicks were always being
   eaten - this element sits at 95 with pointer-events auto and has done since
   it was moved out of #desktop-stage - so what was broken was only ever the
   part a player can SEE. 0.72 is the first value that reads as dark against
   this wallpaper while the refusal itself stays fully lit at 96.
   BOTH DIMS MOVE TOGETHER. They are deliberately identical (see the note under
   #entry-dim); one of them drifting is how you get two coats that do not match
   on the one screen that can show both. */
#warn-dim {
  position: absolute;
  inset: 0;
  z-index: 95;
  background: rgba(4, 8, 20, 0.72);
  opacity: 1;
  transition: opacity 140ms linear;
}
#warn-dim.hidden { display: none; }
#warn-dim.fading { opacity: 0; }

/* THE DIM BEHIND THE ENTRY WINDOW (owner, 2026-08-27). Same shape as
   #warn-dim above and deliberately a SEPARATE element rather than a shared
   one: power_warning.exe and the entry window can both be up at once (lose
   the hold while a refusal is on screen) and one dimForX(false) must not
   pull the other's dark out from under it.

   It sits at 95 like the warning's, so it covers every app window in the
   50..94 raise band; #paywall.above-dim takes 96 from the stylesheet and
   raiseWin() refuses to write an inline z over that. */
#entry-dim {
  position: absolute;
  inset: 0;
  z-index: 95;
  background: rgba(4, 8, 20, 0.72);
  opacity: 1;
  transition: opacity 140ms linear;
}
#entry-dim.hidden { display: none; }
#entry-dim.fading { opacity: 0; }

/* ONE COAT OF DARK, NEVER TWO (owner, 2026-08-27).
   ---------------------------------------------------------------------
   #desktop-tint is the ORIGINAL entry dark - a vignette from 0.58 at the top
   down to 0.42, painted at z 13 - and on a FIRST BOOT it is still fully up
   when the entry window appears. Adding this one on top of it took the
   background to roughly 0.80: twice the dark the entry screen has ever had,
   and it landed hardest on the taskbar and the tray, which sit at z 12 under
   both of them and so took both coats.

   THIS DIM IS FOR THE MID-SESSION CASE and only ever was. When the entry
   window comes back over a live desk - a session that ended, a hold that
   broke - the tint has long since lifted and there is nothing else darkening
   what is behind the window. That is the case it was written for.

   So it defers to the tint rather than doubling it, and it does so in CSS
   because the two states are already spelled on the tint itself: .lifted (the
   desk is up) and .off (the tour parked it). No JS flag to keep in step, and
   the moment the tint lifts this takes over on its own.

   :has() OFF THE BODY, NOT A SIBLING COMBINATOR (owner, 2026-08-28). The two
   are no longer siblings: initDesktop() lifts #entry-dim out of #desktop-stage
   and into #scene-desktop, because the stage's scale transform is a stacking
   context and a dim sealed inside it can never paint over a window. The tint
   stays in the stage, where it belongs - it is a vignette on the wallpaper.
   Same shape as the #warn-dim rule below, and for the same reason. */
body:has(#desktop-tint:not(.lifted):not(.off)) #entry-dim { display: none; }

/* AND THE SAME RULE AGAINST #warn-dim, which is the other way two coats can
   land: power_warning.exe is up when the hold breaks, and losing the hold is
   exactly what brings the entry window back over the top of it. The two dims
   are identical - inset 0, z 95, rgba(4, 8, 20, 0.72) - so one of them is the
   whole effect and the second is only extra dark. They stay SEPARATE
   ELEMENTS for the reason written above (neither may clear the other's dark
   when it closes); this only stops them painting twice.

   :has() rather than a sibling combinator because #entry-dim comes FIRST in
   the markup, and ~ only looks forward. */
body:has(#warn-dim:not(.hidden)) #entry-dim { display: none; }

#paywall.above-dim { z-index: 96; }

/* PINNED WINDOWS DO NOT MOVE. makeDraggable() reads this class and returns
   before it takes the pointer, so the entry window cannot be dragged off
   centre - and placeEntry() is then the only thing that ever positions it. */
.win95-window.pinned .w95-titlebar { cursor: default; }

/* One clear of the dim, and OUTSIDE the 50..94 raise band, so nothing the
   player clicks can be lifted over the refusal while it is up. raiseWin()
   refuses to write an inline z-index onto a window wearing this. */
#powerwarn.above-dim { z-index: 96; }

/* THE PAYMENT WINDOW OVER THE ENTRY WINDOW (owner, 2026-08-27).
   ---------------------------------------------------------------------
   Signing up asks for the starter rent, and that ask is the ordinary payment
   window - which raiseWin() puts in the 50..94 band. #paywall.above-dim is 96,
   so the window opened UNDERNEATH the entry window: the player heard the coins
   start and saw the veil go dark with nothing on top of it to read.

   97 and 98 clear the entry window and keep their existing order (the veil
   under its own window). They only apply while the entry window is actually
   up - beatVeil() puts the class on then and takes it off on close - so a
   payment on the desk keeps the raise band it has always used. */
#modal-veil.above-dim { z-index: 97; }
#pwpending.above-dim { z-index: 98; }

#powerwarn {
  width: 600px;
  height: 364px;
  left: 660px;
  top: 340px;
}
#powerwarn .w95-scale { width: 300px; height: 182px; }

#pwarn-head {
  top: 30px;
  left: 10px;
  width: 280px;
  font-weight: 700;
  color: #8c1f14;
}

#pwarn-hr0 { display: block; top: 48px; left: 14px; width: 272px; }
#pwarn-sub {
  top: 56px;
  left: 14px;
  width: 272px;
}
#pwarn-hr1 { display: block; top: 88px; left: 14px; width: 272px; }
#pwarn-rows {
  position: absolute;
  top: 96px;
  left: 14px;
  width: 272px;
}
#pwarn-hr2 { display: block; top: 140px; left: 14px; width: 272px; }

#pwarn-cancel {
  box-shadow:
    inset 0 0 0 1px #14401d,
    inset 0 0 0 2px #63ad72;
}

#pwarn-cancel:hover {
  background: linear-gradient(#fff 0 9%, #f7fbf6 9% 48%, #e6f0e4 48% 85%, #cfe0cd 85%);
  box-shadow: inset 0 0 0 1px #14401d, inset 0 0 0 2px #7cc48b;
}

#pwarn-cancel {
  top: 148px;
  left: 10px;
  width: 280px;
  height: 24px;
  font-weight: 700;
}
#pwarn-rows .gbox-row .v.neg { color: #b00000; }

#gbox-input-row {
  position: absolute;
  top: 128px;
  left: 14px;
  width: 252px;
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 10px;
}

#gbox-input-row span { color: #6b675c; white-space: nowrap; }

#gbox-input-row input {
  flex: 1;
  min-width: 0;
  height: 18px;
  border: none;
  background: #fff;
  box-shadow: inset 0 0 0 1px #7f9db9;
  padding: 0 5px;
  font: inherit;
  font-weight: 700;
  outline: none;
}

#gbox.inputed { height: 432px; }
#gbox.inputed .w95-scale { height: 216px; }
#gbox.inputed #gbox-input-row { display: flex; }
#gbox.inputed #gbox-sub { top: 156px; }
#gbox.inputed #gbox-ok,
#gbox.inputed #gbox-cancel { top: 184px; }

#gbox.inputed:not(.detailed) { height: calc(260px + var(--gb-sub, 14px) * 2); }
#gbox.inputed:not(.detailed) .w95-scale { height: calc(130px + var(--gb-sub, 14px)); }
#gbox.inputed:not(.detailed) #gbox-input-row { top: 60px; }
#gbox.inputed:not(.detailed) #gbox-sub { top: 88px; }
#gbox.inputed:not(.detailed) #gbox-ok,
#gbox.inputed:not(.detailed) #gbox-cancel { top: calc(96px + var(--gb-sub, 14px)); }

#gbox.iconed .w95-scale {
  height: calc(172px + var(--gb-rows, 4) * 13px + var(--gb-sub, 30px));
}
#gbox.iconed {
  height: calc(2 * (172px + var(--gb-rows, 4) * 13px + var(--gb-sub, 30px)));
}

#gbox.iconed #gbox-well { display: grid; top: 30px; }

#gbox.iconed #gbox-text {
  top: 86px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  line-height: 15px;
}

#gbox.iconed #gbox-hr1 { display: block; top: 110px; }
#gbox.iconed #gbox-rows { top: 118px; }
#gbox.iconed #gbox-hr2 { display: block; top: calc(124px + var(--gb-rows, 4) * 13px); }
#gbox.iconed #gbox-sub { top: calc(132px + var(--gb-rows, 4) * 13px); text-align: center; }
#gbox.iconed #gbox-ok,
#gbox.iconed #gbox-cancel {
  top: calc(142px + var(--gb-rows, 4) * 13px + var(--gb-sub, 30px));
}

#dropwheel {
  width: 528px;
  height: 452px;
  left: 700px;
  top: 260px;
  z-index: 36;
}

#dropwheel .w95-scale { width: 264px; height: 226px; }

#dw-stage {
  position: absolute;
  top: 28px;
  left: 12px;
  width: 240px;
  height: 120px;
  background: #101014;
  box-shadow: inset 0 0 0 1px #7f9db9;
  overflow: hidden;
}

#dw-q {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'VT323', monospace;
  font-size: 46px;
  color: #f8c869;
  text-shadow: 0 0 8px rgba(248, 200, 105, 0.6);
}

#dw-icon {
  position: absolute;
  top: 32px;
  left: 92px;
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
}

#dw-confetti {
  position: absolute;
  inset: 0;
  width: 240px;
  height: 120px;
  pointer-events: none;
}

#dw-result {
  position: absolute;
  top: 154px;
  left: 0;
  width: 100%;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}

#dw-sub {
  position: absolute;
  top: 168px;
  left: 12px;
  width: 240px;
  text-align: center;
  font-size: 10px;
  line-height: 11px;
}

#dw-spin {
  top: 192px;
  left: 62px;
  width: 140px;
  height: 24px;
}

.pw-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 3px;
  padding: 0 2px;
  color: #8a8474;

  font-size: 10px;
  line-height: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pw-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #cfcab8;
}

.pw-div-rar { font-weight: 700; opacity: 0.62; }

#pw-list .pw-btn {
  width: 52px;
  height: 21px;
  font-size: 11px;
  font-weight: 700;
}

#pw-list .pw-btn.pw-ico {
  width: 22px;
  height: 22px;
  margin-right: 10px;
  background-image: var(--pw-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  image-rendering: pixelated;
  background-color: transparent;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #000,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
}

#pw-list .pw-btn.pw-ico {
  background-image:
    var(--pw-icon),
    linear-gradient(#f4f2ea 0 2px, #e2ded0 2px 55%, #cfcaba 55% 82%, #bdb8a8 82% 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 16px 16px, 100% 100%;
}
#pw-list .pw-btn.pw-ico:hover:not(:disabled) {
  background-image:
    var(--pw-icon),
    linear-gradient(#fff 0 2px, #f0ede2 2px 55%, #ddd8c8 55% 82%, #cbc6b6 82% 100%);
}
#pw-list .pw-btn.pw-ico:active:not(:disabled) {
  background-image:
    var(--pw-icon),
    linear-gradient(#bdb8a8 0 45%, #cfcaba 45% 100%);
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;
}

#iteminfo {
  width: 600px;
  height: 560px;
  left: 700px;
  top: 240px;
  z-index: 34;
}

#iteminfo .w95-scale { width: 300px; height: 280px; }

#ii-well {
  position: absolute;
  top: 25px;
  left: 10px;
  width: 48px;
  height: 48px;
  background: #fff;
  display: grid;
  place-items: center;
}

#ii-icon {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
}

#ii-name {
  position: absolute;
  top: 34px;
  left: 66px;
  width: 222px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ii-kind {
  position: absolute;
  top: 52px;
  left: 66px;
}

#ii-stats {
  position: absolute;
  top: 88px;
  left: 10px;
  width: 280px;
}

#ii-stats .cond-bar {
  width: 100%;
  margin: 2px 0 3px;
}

/* `.ii-flavor` STOOD HERE AND IS DELETED (R8-DEAD, 2026-09-03), HANDED OVER BY
   THE LANE THAT DELETED WHAT IT STYLED. js/rig.js buried FLAVOR, COOL_FLAVOR
   and flavorFor() - the item-info window's flavour text, eleven strings no
   player ever read, whose only reader had no callers - and its note said "NOT
   MINE TO REMOVE, AND STILL THERE: the styling, `.ii-flavor`. This batch does
   not own that file." It is owned here, so it goes here, in the same round.
   Leaving it would be the .pvr-tw defect again: styling that outlives what it
   drew and makes a rebuild look half-finished. openItemInfo() builds no
   flavour row. */

#iteminfo-ok {
  top: 252px;
  left: 10px;
  width: 280px;
  height: 20px;
}

.tray-btn {
  width: auto;
  height: 64px;
  padding: 0 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tray-btn:hover {
  background: linear-gradient(rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 60%, rgba(0, 0, 0, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.tray-btn:hover svg { filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.4)) brightness(1.15); }
.tray-btn:active {
  background: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.05));
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.25);
}
.tray-btn:active svg { transform: translateY(1px); }

.tray-btn svg {
  height: 40px;
  width: auto;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.4));
}

.flyout {
  right: 0;
  transform-origin: 100% 100%;
}

#volume-flyout {
  width: 230px;

  bottom: calc(80px * var(--stage-z, 1));
}

#mail-toast {
  right: 0;
  width: 216px;
  transform-origin: 100% 100%;
  z-index: 41;
}
#mt-from {
  font-size: 10px;
  line-height: 12px;
  color: #5c574c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#mt-subj {
  font-size: 12px;
  line-height: 15px;
  font-weight: 700;
  color: #1c1c1c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#mt-body {
  font-size: 10px;
  line-height: 12px;
  max-height: 24px;
  overflow: hidden;
}

.vol-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 8px;
}

.w95-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: #fff;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #dfdfdf;
  cursor: pointer;
  outline: none;
}

.w95-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 9px;
  height: 16px;
  background: #c0c0c0;
  border: none;
  border-radius: 0;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #000,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
}

.w95-slider::-moz-range-thumb {
  width: 9px;
  height: 16px;
  background: #c0c0c0;
  border: none;
  border-radius: 0;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #000,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #808080;
}

.vol-label {
  width: 52px;
  flex: none;
  font-weight: 700;
  color: #1c1c1c;
}

.vol-row-2 { padding-top: 0; }

.w95-field,
#bank-photo,
.w95-slider,
.w95-avatar-well,
#pwi-trough {
  box-shadow: inset 0 0 0 1px #7f9db9;
}

.w95-dock .w95-titlebar {
  top: -1px;
  height: 22px;
  border-radius: 6px 6px 0 0;
}

.w95-groove {
  background: linear-gradient(to bottom, #c9c4ae 0 1px, #fff 1px 2px);
}

.sm-item:hover,

.email-row:hover {
  background-color: #f2efe4;
  color: inherit;
}

.pfp-cell:hover img { box-shadow: 0 0 0 1px #316ac5; }

.pw-btn,
.pfp-cell {
  border-radius: 3px;
  background: linear-gradient(#fff 0 20%, #f3f2ed 20% 55%, #e5e1d4 55% 88%, #d8d0c1 88%);
  box-shadow: inset 0 0 0 1px #5f83b9;
}

.pfp-cell:active {
  background: #d8d2c2;
  box-shadow: inset 0 0 0 1px #5f83b9, inset 1px 1px 3px rgba(0, 0, 0, 0.25);
}

.pw-tab {
  border-radius: 3px 3px 0 0;
  background: #e2ddc8;
  box-shadow: inset 0 0 0 1px #919b9c;
}

.pw-tab.active {
  background: #fdfcf8;
  font-weight: 700;
  box-shadow:
    inset 0 0 0 1px #919b9c,
    inset 0 2px 0 #e68b2c;
}

.w95-slider::-webkit-slider-thumb {
  background: linear-gradient(#cfe3fd, #90b8ea);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #5f83b9;
}

.w95-slider::-moz-range-thumb {
  background: linear-gradient(#cfe3fd, #90b8ea);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #5f83b9;
}

.xp-scroll {
  scrollbar-width: none;
}

.xp-scroll::-webkit-scrollbar {
  display: none;
}

.xp-sb {
  position: absolute;
  width: 9px;
  display: none;
  flex-direction: column;
  z-index: 3;
}

.xp-sb-btn {
  flex: none;
  width: 9px;
  height: 9px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background-color: #b4cef4;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='3'%3E%3Cpath d='M2.5 0 L5 3 L0 3 Z' fill='%231c3a70'/%3E%3C/svg%3E"),
    linear-gradient(#d9e9fd 0 3px, #a9c8f0 3px 7px, #8cb0e8 7px 9px);
  background-repeat: no-repeat, no-repeat;
  background-position: center, 0 0;
  background-size: 5px 3px, auto;
  box-shadow: inset 0 0 0 1px #5f83b9;
}

.xp-sb-down {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='3'%3E%3Cpath d='M0 0 L5 0 L2.5 3 Z' fill='%231c3a70'/%3E%3C/svg%3E"),
    linear-gradient(#d9e9fd 0 3px, #a9c8f0 3px 7px, #8cb0e8 7px 9px);
}

.xp-sb-btn:active {
  filter: brightness(0.9);
}

.xp-sb-track {
  flex: 1;
  position: relative;
  background: #f3f1ec;
  box-shadow: inset 0 0 0 1px #4a6b9e;
}

.xp-sb-thumb {
  position: absolute;
  left: 1px;
  width: 7px;
  border-radius: 2px;
  background-color: #aac8f2;
  background-image: linear-gradient(90deg, #d3e4fc 0 2px, #aac8f2 2px 5px, #8cb0e8 5px 7px);

  box-shadow: inset 0 0 0 1px #7b9cce;
  touch-action: none;
}

.xp-sb:is(
  [data-sb-for='rig-slots'], [data-sb-for='rig-spares'],
  [data-sb-for='wb-repair-list'], [data-sb-for='wb-cons-list'],
  [data-sb-for='wb-salvage-list'], [data-sb-for='wb-craft-list'],
  [data-sb-for='wb-bp-scrap'], [data-sb-for='wb-cool-list'],
  [data-sb-for='wb-drive-list'], [data-sb-for='cl-cat-list'],
  [data-sb-for='wb-trade-list'], [data-sb-for='social-list'],
  [data-sb-for='aff-board'], [data-sb-for='sp-list'],
  [data-sb-for='pv-log-list'], [data-sb-for='jp-list'],
  [data-sb-for='email-list'], [data-sb-for='ev-body'], [data-sb-for='db-pools'],
  [data-sb-for='lgi-pools'], [data-sb-for='sm-list']
) .xp-sb-btn {
  background-color: #d9d4c2;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='3'%3E%3Cpath d='M2.5 0 L5 3 L0 3 Z' fill='%235a5344'/%3E%3C/svg%3E"),
    linear-gradient(#f2eee0 0 3px, #d9d4c2 3px 7px, #c2bda9 7px 9px);
  box-shadow: inset 0 0 0 1px #a8a294;
}
.xp-sb:is(
  [data-sb-for='rig-slots'], [data-sb-for='rig-spares'],
  [data-sb-for='wb-repair-list'], [data-sb-for='wb-cons-list'],
  [data-sb-for='wb-salvage-list'], [data-sb-for='wb-craft-list'],
  [data-sb-for='wb-bp-scrap'], [data-sb-for='wb-cool-list'],
  [data-sb-for='wb-drive-list'], [data-sb-for='cl-cat-list'],
  [data-sb-for='wb-trade-list'], [data-sb-for='social-list'],
  [data-sb-for='aff-board'], [data-sb-for='sp-list'],
  [data-sb-for='pv-log-list'], [data-sb-for='jp-list'],
  [data-sb-for='email-list'], [data-sb-for='ev-body'], [data-sb-for='db-pools'],
  [data-sb-for='lgi-pools'], [data-sb-for='sm-list']
) .xp-sb-down {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='3'%3E%3Cpath d='M0 0 L5 0 L2.5 3 Z' fill='%235a5344'/%3E%3C/svg%3E"),
    linear-gradient(#f2eee0 0 3px, #d9d4c2 3px 7px, #c2bda9 7px 9px);
}
.xp-sb:is(
  [data-sb-for='rig-slots'], [data-sb-for='rig-spares'],
  [data-sb-for='wb-repair-list'], [data-sb-for='wb-cons-list'],
  [data-sb-for='wb-salvage-list'], [data-sb-for='wb-craft-list'],
  [data-sb-for='wb-bp-scrap'], [data-sb-for='wb-cool-list'],
  [data-sb-for='wb-drive-list'], [data-sb-for='cl-cat-list'],
  [data-sb-for='wb-trade-list'], [data-sb-for='social-list'],
  [data-sb-for='aff-board'], [data-sb-for='sp-list'],
  [data-sb-for='pv-log-list'], [data-sb-for='jp-list'],
  [data-sb-for='email-list'], [data-sb-for='ev-body'], [data-sb-for='db-pools'],
  [data-sb-for='lgi-pools'], [data-sb-for='sm-list']
) .xp-sb-track {
  background: #cfcab8;
  box-shadow: inset 0 0 0 1px #8a8474;
}
.xp-sb:is(
  [data-sb-for='rig-slots'], [data-sb-for='rig-spares'],
  [data-sb-for='wb-repair-list'], [data-sb-for='wb-cons-list'],
  [data-sb-for='wb-salvage-list'], [data-sb-for='wb-craft-list'],
  [data-sb-for='wb-bp-scrap'], [data-sb-for='wb-cool-list'],
  [data-sb-for='wb-drive-list'], [data-sb-for='cl-cat-list'],
  [data-sb-for='wb-trade-list'], [data-sb-for='social-list'],
  [data-sb-for='aff-board'], [data-sb-for='sp-list'],
  [data-sb-for='pv-log-list'], [data-sb-for='jp-list'],
  [data-sb-for='email-list'], [data-sb-for='ev-body'], [data-sb-for='db-pools'],
  [data-sb-for='lgi-pools'], [data-sb-for='sm-list']
) .xp-sb-thumb {
  background-color: #e8e4d6;
  background-image: linear-gradient(90deg, #f6f3e8 0 2px, #e8e4d6 2px 5px, #cbc5b1 5px 7px);

  box-shadow: inset 0 0 0 1px #a69f8c;
}

.xp-sb:is(
  [data-sb-for='rig-slots'], [data-sb-for='rig-spares'],
  [data-sb-for='wb-repair-list'], [data-sb-for='wb-cons-list'],
  [data-sb-for='wb-salvage-list'], [data-sb-for='wb-craft-list'],
  [data-sb-for='wb-bp-scrap'], [data-sb-for='wb-cool-list'],
  [data-sb-for='wb-drive-list'], [data-sb-for='cl-cat-list'],
  [data-sb-for='wb-trade-list'], [data-sb-for='social-list'],
  [data-sb-for='aff-board'], [data-sb-for='sp-list'],
  [data-sb-for='pv-log-list'], [data-sb-for='jp-list'],
  [data-sb-for='email-list'], [data-sb-for='ev-body'], [data-sb-for='db-pools'],
  [data-sb-for='lgi-pools'], [data-sb-for='sm-list']
) .xp-sb-btn {
  background-color: #d9d4c2;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cg fill='%235a5344'%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='2' y='1' width='3' height='1'/%3E%3Crect x='1' y='2' width='5' height='1'/%3E%3Crect x='0' y='3' width='7' height='1'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(#f2eee0 0 2px, #e2ddcb 2px 5px, #cfcab8 5px 9px);
  background-size: 7px 4px, auto;
  box-shadow: inset 0 0 0 1px #8a8474;
}
.xp-sb:is(
  [data-sb-for='rig-slots'], [data-sb-for='rig-spares'],
  [data-sb-for='wb-repair-list'], [data-sb-for='wb-cons-list'],
  [data-sb-for='wb-salvage-list'], [data-sb-for='wb-craft-list'],
  [data-sb-for='wb-bp-scrap'], [data-sb-for='wb-cool-list'],
  [data-sb-for='wb-drive-list'], [data-sb-for='cl-cat-list'],
  [data-sb-for='wb-trade-list'], [data-sb-for='social-list'],
  [data-sb-for='aff-board'], [data-sb-for='sp-list'],
  [data-sb-for='pv-log-list'], [data-sb-for='jp-list'],
  [data-sb-for='email-list'], [data-sb-for='ev-body'], [data-sb-for='db-pools'],
  [data-sb-for='lgi-pools'], [data-sb-for='sm-list']
) .xp-sb-down {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cg fill='%235a5344'%3E%3Crect x='0' y='0' width='7' height='1'/%3E%3Crect x='1' y='1' width='5' height='1'/%3E%3Crect x='2' y='2' width='3' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(#f2eee0 0 2px, #e2ddcb 2px 5px, #cfcab8 5px 9px);
}

.xp-sb:is(
  [data-sb-for='rig-slots'], [data-sb-for='rig-spares'],
  [data-sb-for='wb-repair-list'], [data-sb-for='wb-cons-list'],
  [data-sb-for='wb-salvage-list'], [data-sb-for='wb-craft-list'],
  [data-sb-for='wb-bp-scrap'], [data-sb-for='wb-cool-list'],
  [data-sb-for='wb-drive-list'], [data-sb-for='cl-cat-list'],
  [data-sb-for='wb-trade-list'], [data-sb-for='social-list'],
  [data-sb-for='aff-board'], [data-sb-for='sp-list'],
  [data-sb-for='pv-log-list'], [data-sb-for='jp-list'],
  [data-sb-for='email-list'], [data-sb-for='ev-body'], [data-sb-for='db-pools'],
  [data-sb-for='lgi-pools'], [data-sb-for='sm-list']
) .xp-sb-thumb {
  background-image: linear-gradient(90deg, #f6f3e8 0 2px, #e8e4d6 2px 6px, #c2bda9 6px 9px);
}

/* THE CURSOR IS DRAWN BY THE OS, NOT BY THE PAGE (2026-09-05).
   This was a DOM element, #cursor-sprite, moved by js/main.js on every pointer
   event. That version was optimised about as far as it can go - written off
   the event instead of a frame, pointerrawupdate where it exists, the glyph
   walk deferred to rAF and memoised, whole-pixel rounding - and it was STILL
   the thing the owner felt as "extremely laggy and delayed and slow", because
   none of that addresses the actual ceiling: a sprite can only move when the
   page gets a frame presented, so it inherits the whole input-to-present
   pipeline AND stalls for the full duration of any main-thread task. Measured
   on this build: an idle desktop is clean (zero long tasks, ~3 ms from event
   to handler), but injecting a 30 ms task pushed that to 30.1 ms immediately.
   The page being fast is not a fix, it is a truce that any future work breaks.
   An OS-drawn cursor is on the platform's cursor plane and cannot lag at all.

   HOW THE GLYPH RULES SURVIVED THE MOVE. js/main.js pick() is unchanged and is
   still the only thing that decides which glyph is showing - it just sets a
   class on <html> now instead of swapping an <img> src. That is deliberate:
   pick()'s ~40 selectors and its priority order are tuned (greyed buttons draw
   the arrow, a readOnly box is not a text field, tours suppress the hand) and
   re-expressing them as a CSS cascade would have put every one of those
   decisions back in play. Nothing about which glyph appears where has changed.

   WHY `:root *` AND `inherit`. css carries ~60 legacy `cursor: pointer` and
   `cursor: default` rules, and ~14 canvas handlers set `style.cursor` inline;
   all of them were dead under the old `* { cursor: none !important }` and all
   of them must stay dead, or the OS glyphs would show through and pick() would
   no longer be the authority. Forcing every element to inherit keeps the
   cursor a single value owned by <html>. It is written `:root *` rather than
   `*` on purpose: a bare `* { cursor: inherit !important }` also matches
   <html>, whose parent has no cursor to inherit, which resolves to `auto` and
   takes the whole scheme down with it. `:root *` cannot match <html>.

   THE ARROW IS PRE-SCALED. cursor_arrow.png is 22x40 art that the sprite drew
   into 26x48 with image-rendering: pixelated. A CSS cursor is NOT scaled with
   pixelated, so pointing this at the 22x40 file would have shipped a cursor
   18% smaller than the one the game has always had. cursor_arrow_26.png is
   that same art upscaled 26x48 nearest-neighbour so the browser resamples
   nothing; it was diffed against the live sprite magnified 6x and is identical
   pixel for pixel. The other three are already used at their natural size
   (hand and grab 34x44, ibeam 18x36) and are referenced unchanged. All four
   are far below the ~128x128 cap a browser puts on a cursor image.

   Hotspots below are the hx/hy pairs from the CURSORS table in js/main.js. */
:root * { cursor: inherit !important; }

:root { cursor: url('../assets/cursor_arrow_26.png') 1 1, default; }
:root.cur-hand { cursor: url('../assets/cursor_hand.png') 9 1, pointer; }
:root.cur-ibeam { cursor: url('../assets/cursor_ibeam.png') 9 18, text; }
:root.cur-grab { cursor: url('../assets/cursor_grab.png') 18 16, grabbing; }
:root.cur-hide { cursor: none; }

#pvpapp {
  width: 960px;

  height: 804px;
  left: 480px;
  top: 60px;
}

#pvpapp .w95-scale { width: 480px; height: 402px; }

#pv-body { position: absolute; inset: 26px 0 0 0; }

#pv-locked {
  position: absolute;

  top: -5px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  z-index: 6;
  overflow: hidden;
  background: rgba(10, 6, 4, 0.62);
}

#pv-tabs { right: 10px; }
#pv-tabs .pw-tab.pushed { margin-left: auto; }

.pv-tab-lock {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 2px;
  margin-right: -2px;
  vertical-align: -3px;
  object-fit: contain;
  image-rendering: pixelated;
}

#pvpapp:has(#pv-locked:not(.hidden)) #pv-tabs { z-index: 8; }

#pv-floor {
  position: absolute;
  top: 20px;
  left: 3px;
  right: 3px;
  height: 2px;
  z-index: 7;

  background: linear-gradient(to bottom, #7a7466 0 1px, #fff 1px 2px);
}

#pv-locked:not(.hidden) ~ #pv-floor,
#pv-body:has(#pv-locked:not(.hidden)) #pv-floor {
  background: linear-gradient(to bottom, #9a9482 0 1px, #6f6a5c 1px 2px);
}

#pv-locked * { pointer-events: none; }

#pv-locked-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 576px;
  height: 384px;
  margin: -192px 0 0 -288px;
  image-rendering: pixelated;
  display: block;
}

#pv-locked-plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 52px;
  text-align: center;
}

#pv-locked-line {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #f0a53c;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.9);
}
#pv-locked.chuds #pv-locked-line { color: #4cd964; }

#pv-locked-ask {
  position: static;

  margin: 8px auto 0;
  width: 120px;
  height: 24px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 0;
  color: #f0b165;
  background: linear-gradient(#2a1a10 0 2px, #1a1008 2px 100%);
  box-shadow:
    inset 0 0 0 1px #a1520a,
    inset 0 1px 0 rgba(240, 177, 101, 0.35),
    0 2px 0 rgba(0, 0, 0, 0.4);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

#pv-locked.chuds #pv-locked-ask {
  color: #8ee89a;
  background: linear-gradient(#0f2a16 0 2px, #08180d 2px 100%);
  box-shadow:
    inset 0 0 0 1px #2e8b3f,
    inset 0 1px 0 rgba(142, 232, 154, 0.3),
    0 2px 0 rgba(0, 0, 0, 0.4);
}
#pv-locked.chuds #pv-locked-ask:hover {
  color: #08180d;
  background: linear-gradient(#8ee89a 0 2px, #3fba54 2px 100%);
  box-shadow: inset 0 0 0 1px #8ee89a, 0 2px 0 rgba(0, 0, 0, 0.4);
}

#pvpapp #pv-tabs { z-index: 8; }

#pv-map-box {
  position: absolute;
  top: 30px;
  left: 10px;
  width: 280px;
  height: 336px;
}
#pv-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 336px;
  display: block;
  image-rendering: pixelated;
}

.pv-kv {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
}

.pv-kv .k { color: #6a6a5e; }
.pv-kv .v { font-weight: 700; }
.pv-kv .v.pos { color: #2e7d32; }
.pv-kv .v.neg { color: #b00000; }
.pv-kv .v.amt { color: #a1520a; }

/* THE CHUDNET ROSTER PANEL'S CSS IS DELETED (R8-OWNER, 2026-09-03). What sat
   here: #pv-cd-rows (top 210, left 10, 230x114 - inside #pv-map-box, which is
   top 30, left 10, 280x336, so the panel covered the map), .pv-cd-head, and
   the .pv-lrow / .pv-lface / .pv-lrank / .pv-lname / .pv-lamt row family with
   its three medal tints. Every one of those classes was written by the
   deleted renderer and by nothing else. index.html carries why the panel
   went. `.pv-lrow` outlived this rule for about an hour in js/main.js's
   click-sound selector list, which the deleting lane did not own and
   correctly reported instead of taking; the orchestrator removed it the same
   day. Re-verified 2026-09-03: `grep -rn "pv-lrow|pv-lface|pv-lrank|pv-lname
   |pv-lamt" js/ css/ index.html` returns only this paragraph. */

#pv-logs { position: absolute; inset: 0; z-index: 6; }

#pv-log-band {
  position: absolute;
  top: 27px;
  left: 10px;
  width: 460px;
  height: 60px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

#pv-log-tot {
  flex: none;
  width: auto;
  text-align: center;
}

#pv-log-spark {
  flex: none;
  margin-left: auto;
  margin-right: 19px;
  width: 150px;
  height: 44px;
  image-rendering: pixelated;
  background: #f6f4ec;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}
.pv-log-fig {
  font-size: 26px;
  line-height: 28px;
  font-weight: 700;
  color: #2e7d32;
  white-space: nowrap;
}
.pv-log-fig.neg { color: #b00000; }
.pv-log-fig.zero { color: #8a8578; }
.pv-log-cap {
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 1px;
  color: #7a7466;
  text-transform: uppercase;
}

/* .pv-flow-seg, .pv-flow-none, .pv-flow-k and .pv-flow-k i ALL DELETED
   2026-09-03 (R8-NET-01). A money-flow strip nothing renders. Driven live on a
   devnet world: chudnet.exe was opened on both faces, all three tabs, the
   expanded map and the chads lock screen, and none of the four appeared. */

#pv-log-counts {
  position: absolute;
  top: 90px;
  left: 10px;
  width: 460px;
  height: 30px;
  box-sizing: border-box;
  display: flex;
  background: #eceadf;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}
.pv-count {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 11px;
  padding: 0 2px;
}
.pv-count + .pv-count { border-left: 1px solid #dcd9cb; }
.pv-count .v {
  font-size: 11px;
  font-weight: 700;
  color: #1c1c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pv-count .v.pos { color: #2e7d32; }
.pv-count .v.neg { color: #b00000; }
.pv-count .k {
  font-size: 8px;
  letter-spacing: 1px;
  color: #8a8474;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#pv-log-hr { position: absolute; top: 126px; left: 10px; width: 460px; }

#pv-log-seg {
  margin-left: auto;
  display: flex;
  gap: 2px;
}
#pv-log-seg .filter-chip {
  height: 14px;
  padding: 0 5px;
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
}

#pv-log-cols {
  position: absolute;
  top: 134px;
  left: 10px;
  width: 460px;
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 0 0 3px 0;
  box-sizing: border-box;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #7a7466;
}

#pv-log-cols .c1 {
  flex: none;
  font-size: 15px;
  line-height: 17px;
  letter-spacing: 1px;
  color: #1c1c1c;
}

#pv-log-list {
  position: absolute;
  top: 156px;
  left: 10px;
  width: 460px;
  height: 210px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
  overflow-y: auto;

  padding: 0 0 0 2px;
  box-sizing: border-box;
}

#pv-log-list::before,
#pv-log-list::after {
  content: '';
  display: block;
  position: sticky;
  z-index: 2;
  margin-left: -2px;
  margin-right: -11px;
}
#pv-log-list::before {
  top: 0;
  height: 2px;
  margin-bottom: -2px;
  background: linear-gradient(#a8a294 0 1px, #c9c4ae 1px 2px);
}
#pv-log-list::after {
  bottom: 0;
  height: 1px;
  margin-top: -1px;
  background: #fff;
}

/* NOT WHEN THE LIST IS EMPTY (owner, 2026-08-29). ::after is the panel's
   bottom highlight and it is sticky so that it rides the bottom edge of a list
   long enough to scroll. A sticky element only moves when the constraint is
   VIOLATED, and with one short line of italic text in a 210px panel the
   bottom: 0 constraint is already satisfied where it stands - so it stayed in
   flow and drew a white rule straight across the panel an inch under "Nothing
   yet", looking like a divider under a list that has nothing to divide.
   js/pvp.js already flags the list .empty in exactly that branch. */
#pv-log-list.empty::after { display: none; }
.pv-log {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;

  padding: 3px 16px 3px 5px;
  margin-right: -11px;
}
.pv-log + .pv-log { border-top: 1px solid #cfcab8; }

.pv-log:not(.flat):hover { background: #f2efe4; }

.pv-log .txt { flex: 1; min-width: 0; }
.pv-log .hd {
  font-size: 11px;
  font-weight: 700;
  color: #1c1c1c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pv-log .sub {
  font-size: 9px;
  color: #7a7466;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pv-log .amt {
  flex: none;

  /* 120px, NOT 96px (A5-S2-6). The receipt prints in full now - the server's
     signed uiSigned() string, decimals and all - so the widest row a real
     player sees went from "+100,405 $CBTC" (89.5px) to "+100,405.00 $CBTC"
     (106.5px) and overran a 96px cell into the headline beside it. Measured at
     700 11px MS Sans Serif; 120px also holds a seven-figure seizure
     ("+1,234,567.89 $CBTC", 116.6px), which is the direction a compounded
     stake moves. The 24px comes out of .txt, which is flex:1 with ellipsis on
     both its lines; the list is still 460px and the window has not moved. */
  width: 120px;
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.pv-log .amt.pos { color: #2e7d32; }
.pv-log .amt.neg { color: #b00000; }
.pv-log-empty {
  padding: 10px 8px;
  font-size: 11px;
  font-style: italic;
  color: #7a7466;
}

#loginfo { width: 420px; height: 300px; --lgi-rb: 0px; --lgi-crewh: 0px; }
#loginfo .w95-scale {
  width: 210px;
  height: calc(var(--lgi-y0) + 88px + var(--lgi-rb) + var(--lgi-crewh));
}
#loginfo.rich { width: 560px; }

#loginfo.rich .w95-scale {
  width: 280px;
  height: calc(240px + var(--lgi-rb) + var(--lgi-listh, 92px));
}

#lgi-sub {
  top: 44px;
  left: 10px;
  width: 240px;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#loginfo .w95-groove { width: 190px; }
#loginfo.rich .w95-groove { width: 260px; }

#lgi-title {
  left: 10px;
  width: 190px;
  text-align: center;
  line-height: 17px;
}
#loginfo.rich #lgi-title { width: 260px; }
#lgi-sub { width: 190px; text-align: center; }
#loginfo.rich #lgi-sub { width: 260px; }

#loginfo { --lgi-y0: 62px; }
#loginfo.nosub { --lgi-y0: 46px; }

#loginfo.nosub #lgi-title { top: 18px; }
#lgi-groove1 { position: absolute; top: var(--lgi-y0); }
#lgi-amt {
  position: absolute;
  top: calc(var(--lgi-y0) + 6px);
  left: 10px;
  font-size: 22px;
  line-height: 24px;
  font-weight: 700;
}

#lgi-amt { width: 190px; text-align: center; }
#loginfo.rich #lgi-amt { width: 260px; }
#lgi-amt.pos { color: #2e7d32; }
#lgi-amt.neg { color: #b00000; }
#lgi-when {
  position: absolute;
  top: calc(var(--lgi-y0) + 12px);
  right: 10px;
  font-size: 11px;
  color: #7a7466;
}
#lgi-groove2 { position: absolute; top: calc(var(--lgi-y0) + 34px); }

.lgi-cap {
  position: absolute;
  left: 10px;
  width: 260px;
  height: 14px;
  line-height: 14px;
  box-sizing: border-box;
  padding: 0 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5c574c;
  background: linear-gradient(#d8d3c2 0 1px, #cdc8b6 1px 100%);
  box-shadow: inset 0 -1px 0 #fff;
}
#lgi-cap { top: calc(var(--lgi-y0) + 40px + var(--lgi-rb)); }
#lgi-crew {
  position: absolute;
  top: calc(var(--lgi-y0) + 54px + var(--lgi-rb));
  left: 10px;
  width: 190px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
}

#lgi-crew.roster { display: block; }
.lgi-rrow {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
}
.lgi-rrow + .lgi-rrow { border-top: 1px solid #eceade; }
.lgi-rrow img {
  width: 18px;
  height: 18px;
  flex: none;
  image-rendering: pixelated;
  border: 1px solid #9a9482;
  background: #fff;
}
.lgi-rrow .nm {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: #1c1c1c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lgi-rrow .amt { font-size: 10px; font-weight: 700; color: #5c574c; white-space: nowrap; }
.lgi-rrow .amt.pos { color: #2e7d32; }
.lgi-rrow .amt.neg { color: #b00000; }
.lgi-rrow.me .nm { font-weight: 700; }
.lgi-rrow.out .nm { color: #b00000; }

.lgi-rrow.me {
  outline: 1px solid #316ac5;
  outline-offset: -1px;
}

.lgi-rrow.live { cursor: pointer; }
.lgi-rrow.live:hover {
  background: #f2efe4;
  outline: 1px solid #316ac5;
  outline-offset: -1px;
}

#lgi-raid,
#lgi-chart-cap,
#lgi-chart,
#lgi-groove3,
#lgi-sum,
#lgi-pools { display: none; }
#loginfo.rich #lgi-chart-cap,
#loginfo.rich #lgi-chart,
#loginfo.rich #lgi-groove3,
#loginfo.rich #lgi-pools { display: block; }

#lgi-raid {
  position: absolute;
  top: calc(var(--lgi-y0) + 42px);
  left: 10px;
  width: 190px;
  box-sizing: border-box;

  padding: 4px;
  gap: 4px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#loginfo.raid #lgi-raid { display: flex; flex-direction: column; }
#loginfo.rich #lgi-raid { top: 102px; width: 260px; }
.lgi-raid-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  box-sizing: border-box;
  padding: 0 5px;
  background: #dcd8c8;
  box-shadow: inset 1px 1px 0 #b3ad9c, inset -1px -1px 0 #f4f1e6;
}

#lgi-raid.mine .lgi-raid-top { display: none; }
.lgi-raid-top.live:hover { background: #e8e4d4; }
#lgi-raid-face {
  width: 20px;
  height: 20px;
  flex: none;
  image-rendering: pixelated;
  border: 1px solid #9a9482;
  background: #fff;
}
#lgi-raid-txt { min-width: 0; display: flex; flex-direction: column; }
#lgi-raid-role {
  font-size: 8px;
  line-height: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #7a7466;
}
#lgi-raid-who {
  font-size: 12px;
  line-height: 13px;
  font-weight: 700;
  color: #1c1c1c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lgi-raid-rows {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0 5px;
}
.lgi-kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  line-height: 13px;
  color: #6b6558;
}
.lgi-kv b { font-weight: 700; color: #1c1c1c; white-space: nowrap; }
.lgi-kv b.neg { color: #b00000; }
.lgi-kv b.pos { color: #2e7d32; }

#lgi-chart-cap { top: calc(102px + var(--lgi-rb)); }

#lgi-chart {
  position: absolute;
  top: calc(120px + var(--lgi-rb));
  left: 10px;
  width: 260px;
  height: 58px;
  box-sizing: border-box;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#lgi-groove3 { position: absolute; top: calc(178px + var(--lgi-rb)); }

#loginfo.rich #lgi-cap { top: calc(186px + var(--lgi-rb)); }

#lgi-pools {
  position: absolute;
  top: calc(200px + var(--lgi-rb));
  left: 10px;
  width: 260px;
  height: var(--lgi-listh, 92px);
  box-sizing: border-box;
  padding: 3px;
  overflow: hidden;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

#loginfo.rich.raid #lgi-pools { display: none; }
#loginfo.rich.raid #lgi-crew {
  display: block;
  top: calc(200px + var(--lgi-rb));
  width: 260px;
}
.lgi-pool {
  padding: 0 5px;
  cursor: pointer;
}
.lgi-pool + .lgi-pool { border-top: 1px solid #eceade; }
.lgi-pool-head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
}
.lgi-pool-head .id { font-size: 11px; font-weight: 700; color: #1c1c1c; }
.lgi-pool-head .len { flex: 1; font-size: 10px; color: #7a7466; }

.lgi-pm {
  flex: none;
  width: 9px;
  height: 9px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h3v3h3v3h-3v3h-3v-3h-3v-3h3z' fill='%23b85f0e'/%3E%3Cg fill='%23e5934a'%3E%3Crect x='3' y='0' width='3' height='1'/%3E%3Crect x='3' y='0' width='1' height='3'/%3E%3Crect x='0' y='3' width='3' height='1'/%3E%3Crect x='0' y='3' width='1' height='3'/%3E%3Crect x='6' y='3' width='3' height='1'/%3E%3Crect x='3' y='6' width='1' height='3'/%3E%3C/g%3E%3Cg fill='%23a1520a'%3E%3Crect x='5' y='0' width='1' height='3'/%3E%3Crect x='8' y='3' width='1' height='3'/%3E%3Crect x='6' y='5' width='3' height='1'/%3E%3Crect x='5' y='6' width='1' height='3'/%3E%3Crect x='3' y='8' width='3' height='1'/%3E%3Crect x='0' y='5' width='3' height='1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 9px 9px;
}
.lgi-pool.open .lgi-pm {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='3' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='9' height='3' fill='%23b85f0e'/%3E%3Cg fill='%23e5934a'%3E%3Crect x='0' y='0' width='9' height='1'/%3E%3Crect x='0' y='0' width='1' height='3'/%3E%3C/g%3E%3Cg fill='%23a1520a'%3E%3Crect x='8' y='0' width='1' height='3'/%3E%3Crect x='0' y='2' width='9' height='1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 9px 3px;
}

.lgi-pool-head:hover { background: #f2efe4; }
.lgi-pool-crew {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
  padding: 0 0 5px 4px;
}
.lgi-pool.open .lgi-pool-crew { display: grid; }

.lgi-pool-crew .lgi-face { height: 21px; gap: 4px; }
.lgi-pool-crew .lgi-face:hover { background: #f2efe4; }

.lgi-pool-crew .lgi-face span { font-weight: 700; color: #1c1c1c; }
.lgi-pool-crew .lgi-face img { width: 18px; height: 18px; }
.lgi-pool-crew .lgi-face span { font-size: 10px; }
.lgi-face {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 27px;
  min-width: 0;
}
.lgi-face img {
  width: 24px;
  height: 24px;
  flex: none;
  image-rendering: pixelated;
  border: 1px solid #9a9482;
  background: #fff;
}
.lgi-face span {
  font-size: 11px;
  color: #1c1c1c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#lgi-ok {

  top: calc(var(--lgi-y0) + 56px + var(--lgi-rb) + var(--lgi-crewh));
  left: 10px;
  width: 190px;
}

#loginfo.rich #lgi-ok { width: 260px; top: calc(208px + var(--lgi-rb) + var(--lgi-listh, 92px)); }

#pv-netband {
  position: absolute;

  top: 48px;
  left: 300px;
  width: 170px;
  height: 42px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

#pv-netband-fig {

  font-size: 16px;
  line-height: 18px;
  font-weight: 700;
  color: #2e7d32;
  white-space: nowrap;
}
/* The caption and the on-chain link share one row inside the band, so the
   link costs no vertical space and cannot push #pv-netrows down. baseline
   alignment keeps the two 9px labels sitting on the same line. */
#pv-netband-caprow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

/* Chrome, not a button: the desk already has one visual language for "this
   opens something outside the game" and it is a small underlined label.
   Shared by the Chuds tab (the stake vault) and the miner tab (the player's
   own yield vault), which is why it is not named after either. */
.chainlink {
  flex: none;
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: 8px;
  line-height: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #4a6fa5;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.chainlink:hover { color: #2d4d7a; }
.chainlink[hidden] { display: none; }

/* A CHAINLINK USED AS A STAT VALUE TAKES THE ROW'S TYPE (owner, 2026-08-27).
   The sizing above was drawn for the Network band, where it sat beside a 9px
   caption; in #pv-netrows it stands next to values like "32,014 $CBTC" at
   11px, and the small caps read as a different kind of thing rather than as
   the row's answer. Only the three type properties are overridden - the blue
   and the underline are the whole point and stay. */
.pv-kv .v .chainlink {
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

#pv-netband-cap {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7a7466;
}

#pv-netrows {
  position: absolute;
  top: 96px;
  left: 300px;
  width: 170px;
}

#pv-netrows .pv-kv {
  padding: 0;
  height: 16px;
  box-sizing: border-box;
  align-items: center;
}
#pv-netrows .pv-kv + .pv-kv {
  background: linear-gradient(#dcd7c4 0 1px, transparent 1px);
}

#pv-risk-title { position: absolute; top: 262px; left: 300px; width: 170px; }
#pv-risk {
  position: absolute;

  top: 279px;

  height: 65px;
  left: 300px;
  width: 170px;
  box-sizing: border-box;

  padding: 2px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

.pv-risk-body {
  padding: 1px 5px 2px;
  font-size: 9px;
  line-height: 11px;
  text-align: center;
  color: #3a352c;
}

.pv-risk-body p { margin: 0; }
.pv-risk-body p + p { margin-top: 4px; }

.pv-risk-body b.bad { color: #7a1010; }
.pv-risk-body b.good { color: #2e7d32; }
.pv-risk-body b.warn { color: #a1520a; }

#pv-risk {
  transition: top 520ms ease, height 520ms ease;
  overflow: hidden;
}
.pv-risk-full { display: none; }

#pv-risk.open { top: 158px; height: 186px; }
#pv-risk.open .pv-risk-short { display: none; }
#pv-risk.open .pv-risk-full { display: block; }
#pv-risk-title { transition: top 520ms ease; }
#pvpapp.guide-open #pv-risk-title { top: 143px; }

#pv-stake-title,
#pv-pos-title,
#pv-pos-plate,
#pv-pos-rows,
#pv-state,
#pv-withdraw,
#pv-viewpool,
#pv-dep-plate,
#pv-dep,
#pv-dep-caret,
#pv-stake-btn,
#pv-dep-quick { transition: opacity 320ms ease 300ms; }
#pvpapp.guide-open #pv-stake-title,
#pvpapp.guide-open #pv-pos-title,
#pvpapp.guide-open #pv-pos-plate,
#pvpapp.guide-open #pv-pos-rows,
#pvpapp.guide-open #pv-state,
#pvpapp.guide-open #pv-withdraw,
#pvpapp.guide-open #pv-viewpool,
#pvpapp.guide-open #pv-dep-plate,
#pvpapp.guide-open #pv-dep,
#pvpapp.guide-open #pv-dep-caret,
#pvpapp.guide-open #pv-stake-btn,
#pvpapp.guide-open #pv-dep-quick {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease 0s;
}

#pv-risk-more {
  position: absolute;
  left: 350px;
  top: 350px;
  bottom: auto;
  width: 70px;
  height: 16px;
  box-sizing: border-box;
  padding: 0;
  font-size: 9px;
}

.pv-risk-short { line-height: 11px; }
.pv-risk-short p + p { margin-top: 3px; }
#pv-risk.open .pv-risk-full { line-height: 11px; }

#pv-risk.open .pv-risk-full p + p {
  margin-top: 3px;
  padding-top: 4px;
  background: linear-gradient(#c9c4ae 0 1px, #fbf9f1 1px 2px) top left / 100% 2px no-repeat;
}

#pv-dep-plate {
  position: absolute;

  top: 167px;
  left: 300px;
  width: 170px;
  height: 42px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#pv-dep-amtbox { flex: none; width: 84px; text-align: center; }
#pv-dep-amt {
  font-size: 16px;
  line-height: 18px;
  font-weight: 700;
  color: #b8860b;
  white-space: nowrap;
}
#pv-dep-amtcap {
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7a7466;
}

#pv-dep-plate.minwarn {
  background: #f4e3e0;
  box-shadow:
    inset 1px 1px 0 #c08c85,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #e2c0ba,
    inset 0 0 0 1px #b00000;
  animation: dep-shake 400ms steps(1) 1;
}
#pv-dep-plate.minwarn #pv-dep-amt,
#pv-dep-plate.minwarn #pv-dep-amtcap { color: #a01212; }

@keyframes dep-shake {
  0%   { translate: 0 0; }
  12%  { translate: -3px 0; }
  25%  { translate: 3px 0; }
  38%  { translate: -3px 0; }
  50%  { translate: 2px 0; }
  62%  { translate: -2px 0; }
  75%  { translate: 1px 0; }
  88%  { translate: -1px 0; }
  100% { translate: 0 0; }
}

#pv-dep-slice {
  flex: none;
  width: 68px;
  height: 28px;
  image-rendering: pixelated;
  background: #f6f4ec;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}

#pv-dep-quick {
  position: absolute;
  top: 236px;
  left: 300px;
  width: 170px;
  display: flex;
  gap: 4px;
}

#pv-dep-quick .filter-chip {
  flex: 1 1 0;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 0;
  border-radius: 0;
  color: #2c2a24;
  background: linear-gradient(#fbfaf4 0 2px, #e8e4d6 2px 55%, #d5d0be 55% 92%, #bdb8a6 92%);
  box-shadow: inset 0 0 0 1px #8a8578, 0 1px 0 rgba(0, 0, 0, 0.22);
}
#pv-dep-quick .filter-chip:hover {
  background: linear-gradient(#fff 0 2px, #f4f1e6 2px 55%, #e2ddcc 55% 92%, #cac5b3 92%);
}
#pv-dep-quick .filter-chip:active {
  background: linear-gradient(#d5d0be 0 55%, #c4bfad 55%);
  box-shadow: inset 0 0 0 1px #8a8578;
  transform: translateY(1px);
}

#pv-dep {
  position: absolute;
  top: 279px;
  left: 248px;
  width: 108px;
  height: 20px;
  border: none;
  background: #fff;
  box-shadow: inset 0 0 0 1px #7f9db9;
  padding: 0 0 0 6px;
  box-sizing: border-box;
  font: inherit;
  outline: none;
}

#pv-pos-plate {
  position: absolute;
  top: 167px;
  left: 300px;
  width: 170px;
  height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#pv-pos-amtbox { flex: none; width: 84px; text-align: center; }

#pv-pos-amt {
  font-size: 15px;
  line-height: 17px;
  font-weight: 700;
  color: #b8860b;
  white-space: nowrap;
}
#pv-pos-amt.mid { font-size: 13px; }
#pv-pos-amt.long { font-size: 11px; }
#pv-pos-amtcap {
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7a7466;
}

#pv-pos-spark {
  flex: none;
  width: 66px;
  height: 30px;
  image-rendering: pixelated;
  background: #f6f4ec;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}

#pv-state {
  position: absolute;
  top: 215px;
  left: 300px;
  width: 170px;
  height: 16px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #14321a;
  background: linear-gradient(#8fdc9c 0 2px, #63c076 2px 55%, #4aa85e 55% 100%);
  box-shadow: inset 0 0 0 1px #2f7a41, 0 1px 0 rgba(0, 0, 0, 0.18);
}
#pv-state.bad {
  color: #3a0d0d;
  background: linear-gradient(#e79a9a 0 2px, #d16a6a 2px 55%, #b84c4c 55% 100%);
  box-shadow: inset 0 0 0 1px #8c2020, 0 1px 0 rgba(0, 0, 0, 0.18);
}
#pv-state.dim {
  color: #2c2c2c;
  background: linear-gradient(#d7d3c6 0 2px, #c2bdae 2px 55%, #ada896 55% 100%);
  box-shadow: inset 0 0 0 1px #7d7768, 0 1px 0 rgba(0, 0, 0, 0.18);
}

#pv-pos-rows {
  position: absolute;
  top: 235px;
  left: 300px;
  width: 170px;
}

#pv-chad-band {
  position: absolute;
  top: 52px;
  left: 300px;
  width: 170px;
  height: 42px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#pv-chad-fig {
  font-size: 16px;
  line-height: 18px;
  font-weight: 700;
  color: #a1520a;
  white-space: nowrap;
}
#pv-chad-cap {
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7a7466;
}

#pv-shift {
  position: absolute;
  top: 148px;
  left: 300px;
  width: 170px;
  height: 18px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #3d2606;
  white-space: nowrap;
  background: linear-gradient(#f7dfa8 0 2px, #f0c85c 2px 55%, #d9a836 55% 92%, #b8860b 92%);
  box-shadow: inset 0 0 0 1px #8a5a12, 0 1px 0 rgba(0, 0, 0, 0.22);
}

/* THE ONLY TWO STATES ARE "a chad's clock" AND "nothing" (R8-12-04). A greyed
   twin of this plate used to be drawn to a chud who had never held a seat,
   reading CHAD EXPIRES IN: 0H 00M behind the CHADS ONLY chains; js/pvp.js
   refresh() writes the empty string for a non-chad now and this rule takes the
   box away with the words. #pv-shift.dim went with it - nothing sets the class
   any more, and a rule that can never match is a rule that misleads. */
#pv-shift:empty { display: none; }

#pvpapp.raiding #pv-shift { top: 138px; }

#pv-pi-rows {
  position: absolute;
  top: 96px;
  left: 300px;
  width: 170px;
}

#pv-pi-rows .pv-kv {
  padding: 0;
  height: 16px;
  box-sizing: border-box;
  align-items: center;
}
#pv-pi-rows .pv-kv + .pv-kv {
  background: linear-gradient(#dcd7c4 0 1px, transparent 1px);
}

#pv-servers {
  position: absolute;
  top: 188px;
  left: 300px;
  width: 170px;
  height: 178px;
  box-sizing: border-box;
  overflow: hidden;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;

  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px 4px;
}
.pv-srow {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 4px;
  background: #f2efe4;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #b3ad9c,
    1px 1px 0 rgba(90, 83, 68, 0.35);
  user-select: none;
}

.pv-srow:hover,
#pvpapp.chad .pv-srow:hover {
  background: #fffdf6;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #a8a294,
    inset 0 0 0 1px #d8d2be,
    2px 2px 0 rgba(90, 83, 68, 0.42);
}

.pv-srow .pv-swell {
  width: 28px;
  height: 28px;
}

.pv-srow canvas {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  display: block;
}
.pv-slab {
  flex: 1;
  min-width: 0;
  line-height: 11px;
}
.pv-sname {
  display: block;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv-sprice {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #2e7d32;
  white-space: nowrap;
}

.pv-rent {
  flex: none;
  position: static;
  width: 56px;
  height: 18px;
  padding: 0;
  border: 2px solid #14161c;
  border-radius: 0;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff6ea;
  text-shadow: 0 1px 0 #6f3705;
  cursor: pointer;
  background: linear-gradient(#f0b071 0 2px, #d3822c 2px 55%, #b85f0e 55% 82%, #a1520a 82% 100%);
  box-shadow: inset 0 -2px 0 #6f3705;
}

.pv-rent:disabled {
  color: #a49e8e;
  text-shadow: 0 1px 0 #f2efe4;
  cursor: default;

  border-color: #b3ad9c;
  background: linear-gradient(#f2efe4 0 2px, #ddd8c6 2px 55%, #cbc6b3 55%);
  box-shadow: inset 0 -2px 0 #b3ad9c;
}

#pvpapp.chad .aff-title { color: #a1520a; }
#pvpapp.chad .pv-sprice { color: #a1520a; }

/* .pv-check and .pv-check input DELETED 2026-09-03 (R8-NET-01), with the two
   checkbox-skin rules further down that were their only other use. There is no
   checkbox on the arena surface: the confirm windows are buttons. */

.w95-button:disabled {
  color: #8f8b7e;
  text-shadow: 1px 1px 0 #fff;
  cursor: default;
}

#pvrent {
  width: 560px;
  height: 552px;
  left: 680px;
  top: 200px;
  z-index: 40;
}

#pvrent .w95-scale { width: 280px; height: 276px; }

#pvrent-well {
  background: #fff;
  display: grid;
  place-items: center;
}

#pvrent-img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

#pvrent-price { color: #a1520a; }

#pvrent-stats {
  position: absolute;
  top: 158px;
  left: 10px;
  width: 260px;
}

#pvrent-stats .pv-kv { padding: 1px 0; }

#pvrent-field {
  top: 216px;
  justify-content: flex-start;
}

#pvrent-yes {
  top: 244px;
  left: 10px;
  width: 155px;
}

#pvrent-no {
  top: 244px;
  left: 171px;
  width: 99px;
}

.cl-page {
  position: absolute;
  inset: 0;
}

#cl-mint-page { top: -16px; pointer-events: none; }
#cl-mint-page > * { pointer-events: auto; }

#cl-mint-buy,
#cl-mint-demo,
#cl-cat-btn {
  font-size: 13px;
  font-weight: 700;
}

#cl-cat-btn {
  box-shadow: inset 0 0 0 1px #6f3705, inset 0 0 0 2px #f0c85c;
  display: flex;
  align-items: center;
  justify-content: center;
}

#provfair {
  width: 560px;
  height: 670px;
  left: 380px;
  top: 130px;
}
#provfair .w95-scale { width: 280px; height: 335px; }

#provfair .w95-apptitle { top: 25px; }
#pfr-hr0 { position: absolute; top: 38px; left: 10px; width: 260px; }
#pfr-hr1 { position: absolute; top: 84px; left: 10px; width: 260px; }
#pfr-hr2 { position: absolute; top: 261px; left: 10px; width: 260px; }

#pfr-roll {
  position: absolute;
  top: 46px;
  left: 10px;
  width: 260px;
  font-size: 17px;
  font-weight: 700;
  color: #1c1c1c;
}

#pfr-part {
  position: absolute;
  top: 66px;
  left: 10px;
  width: 260px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pfr-part .pfr-name { color: #3a352c; font-weight: 400; }

#pfr-fields {
  position: absolute;
  top: 92px;
  left: 10px;
  width: 260px;
}
.pfr-row + .pfr-row { margin-top: 8px; }
.pfr-k {
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7a7466;
}

.pfr-v {
  margin-top: 2px;
  padding: 3px 5px;
  background: #0a0603;
  box-shadow: inset 0 0 0 1px #7f9db9;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 15px;
  line-height: 15px;
  color: #7ad13d;
  word-break: break-all;
  user-select: text;

  display: flex;
  align-items: center;
}
.pfr-v > span { flex: 1; min-width: 0; }

/* .pfr-copy1 IS DELETED (owner, 2026-08-29) along with the three per-row copy
   keys it dressed. The gap that separated the value from the icon went with
   it - one child needs no gap - and the value span's flex: 1 takes the width
   back. #pfr-copy, the Copy all key at the foot of the window, is a different
   id and is untouched. */
/* .pfr-why DELETED 2026-09-03 (R8-NET-01). #pfr-note below is the live
   explainer under the provably-fair rows. */
#pfr-note {
  position: absolute;
  top: 269px;
  left: 10px;
  width: 260px;
  font-size: 10px;
  line-height: 13px;
}
#pfr-copy, #pfr-close {
  top: 301px;
  height: 24px;
  width: 128px;
  font-size: 12px;
}
#pfr-copy { left: 10px; }
#pfr-close { left: 142px; }

#catalogue {
  width: 640px;
  height: 580px;
  left: 340px;
  top: 150px;
}
#catalogue .w95-scale { width: 320px; height: 290px; }

#cl-cat-list {
  position: absolute;

  top: 24px;
  left: 10px;
  width: 300px;
  height: 254px;
}

.cl-cat-head {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 16px;
  margin: 5px 0 2px;
  padding: 0 4px;
  font-weight: 700;
  font-size: 10px;
  color: #1c1c1c;
}
.cl-cat-head:first-child { margin-top: 1px; }
.cl-cat-head .rule {
  flex: 1;
  height: 2px;
  background: linear-gradient(to bottom, #b3ad9c 0 1px, #fbf9f1 1px 2px);
}

.cl-cat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  padding: 5px 4px;
}
#cl-cat-list > :first-child { margin-top: 4px; }
#cl-cat-list > :last-child { margin-bottom: 6px; }

#cl-cat-list { padding-top: 0; padding-bottom: 0; }
#cl-cat-list::before,
#cl-cat-list::after {
  content: '';
  display: block;
  position: sticky;
  height: 3px;
  margin: 0 -14px 0 -1px;
  z-index: 2;
}
#cl-cat-list::before {
  top: 0;
  margin-bottom: -3px;
  background: linear-gradient(#a8a294 0 1px, #e4e0d2 1px 3px);
}
#cl-cat-list::after {
  bottom: 0;
  margin-top: -3px;
  background: linear-gradient(#e4e0d2 0 2px, #fff 2px 3px);
}

.cl-cat-cell {

  width: calc(50% - 3px);
  height: 40px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 7px;
  align-items: center;
  justify-content: start;
  padding: 0 7px;
  cursor: pointer;
  user-select: none;
  background: #f2efe4;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #b3ad9c,
    1px 1px 0 rgba(90, 83, 68, 0.3);
}
.cl-cat-cell .nm { min-width: 0; }

/* THE HOVER SET THE COLOUR THE CELL ALREADY WAS (owner, playing, 2026-09-09).
   `.cl-cat-cell { background: #f2efe4 }` two rules up, and this said #f2efe4
   as well - so the rule existed, matched, applied, and changed nothing. Every
   other list in this stylesheet lifts a row on hover; the catalogue is the one
   list where every part in the game is on screen at once and the pointer has
   nothing to tell it which row it is about to open.

   AND THE SHARED RULE HAD THE SAME COLOUR FOR THE SAME REASON, higher up:
   `#cl-cat-list .cl-cat-cell:hover` rode with the workbench lists at :3570,
   where #f2efe4 is a RAISED row over a sunken #e4e0d2 list. These cells are
   already raised, so that colour is their resting state and not a hover at
   all. #cl-cat-list was taken out of that rule and the hover lives here, with
   the resting colour it has to differ from.

   The lift is the same 9 points of value the sunken lists get (#e4e0d2 ->
   #f2efe4 is +14, and a raised cell cannot take that much before it reads as
   selected next to the `.sel` rows elsewhere in this window). The inset
   highlight is untouched, so nothing moves and no edge changes width. */
.cl-cat-cell:hover { background: #fbf9f2; }

.cl-cat-cell .it-thumb { flex: none; justify-self: center; }

.cl-cat-cell .nm {
  flex: 1;
  min-width: 0;

  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-cat-cell .kd { font-weight: 700; }
.cl-cat-cell .kd {
  display: block;
  font-size: 9px;
  color: #6e6a60;
}

#cl-oddsbar {
  position: absolute;
  top: 44px;
  left: 10px;
  width: 418px;
  height: 22px;
  display: flex;
  gap: 2px;
  padding: 2px;
  background: linear-gradient(#191b21 0 40%, #22252d 40% 100%);
  box-shadow:
    inset 1px 1px 0 #0b0c10,
    inset -1px -1px 0 #3b3f4a;
  box-sizing: border-box;
  overflow: hidden;
}

.cl-oseg {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
  overflow: hidden;
  white-space: nowrap;

  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.42),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    inset -1px 0 0 rgba(0, 0, 0, 0.35);
}

#cl-odds {
  position: absolute;
  top: 70px;
  left: 10px;
  width: 418px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.cl-odds-cell { flex: none; }
.cl-odds-cell .pw-odds-row { white-space: nowrap; }

#cl-odds-hr { position: absolute; top: 86px; left: 10px; width: 418px; }

#cl-odds .pw-odds-row { gap: 4px; font-size: 10px; }

#cl-reel-box {
  top: 94px;
  height: 64px;
}

/* TWO #cl-reel-demo BLOCKS STOOD HERE - one full style block and a second
   right under it overriding its colour and size - and both are deleted
   (R8-DEAD, 2026-09-03) with the markup, along with a third rule further down
   this file whose whole content was `display: none !important`. The reel's
   demo overlay was hidden three ways at once and referenced by nothing in js/.
   The demo state itself is live and lives on the reveal card instead
   (js/mint.js writes "DEMO SPIN" and "Nothing is being minted." into
   #cl-reveal-rar / #cl-reveal-sub). The gravestone is in index.html. */

#cl-reveal {
  top: 166px;
  left: 10px;
  width: 418px;
  height: 70px;
}

#cl-mint-side {
  position: absolute;
  top: 250px;
  left: 10px;
  width: 418px;
}

#cl-mint-side .pv-kv { padding: 3px 0; }

#cl-mint-side .pv-kv + .pv-kv { border-top: 1px solid #dcd7c4; }

#pv-raid {
  position: absolute;
  top: 166px;
  left: 300px;
  width: 170px;
  height: 200px;
  box-sizing: border-box;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

#pv-crack-head {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 158px;
  height: 18px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #3a0d06;
  white-space: nowrap;
  background: linear-gradient(#f0a08c 0 2px, #d2604a 2px 55%, #b8452c 55% 100%);
  box-shadow: inset 0 0 0 1px #7d2a18, 0 1px 0 rgba(0, 0, 0, 0.18);
}

#pv-crack-gauge {
  position: absolute;
  top: 30px;
  left: 6px;
  width: 158px;
  height: 52px;
  box-sizing: border-box;
  padding: 4px 6px 5px;
  background: linear-gradient(#f2efe4 0 2px, #e4e0d2 2px 100%);
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #b3ad9c,
    0 1px 0 rgba(90, 83, 68, 0.3);
}

#pv-crack-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
}
#pv-crack-time {
  font-family: 'VT323', monospace;
  font-size: 24px;
  line-height: 22px;
  color: #a1520a;
}
#pv-crack-pct {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: #5a5344;
}
#pv-crack-cap {
  font-size: 8px;
  line-height: 9px;
  letter-spacing: 1px;
  color: #8a8474;
  white-space: nowrap;
}

#pv-crack-trough {
  position: relative;
  margin-top: 5px;
  height: 12px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 1px;
  background: #ded9c8;
  box-shadow: inset 0 0 0 1px #736d5e;
}

#pv-crack-blocks {
  height: 100%;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.18) 0 2px,
      rgba(0, 0, 0, 0) 2px 4px,
      rgba(0, 0, 0, 0.10) 4px 6px,
      rgba(0, 0, 0, 0) 6px 8px),
    linear-gradient(#f0a860 0 5px, #b85f0e 5px 100%);
  background-size: 8px 100%, 100% 100%;
  animation: pv-crack-crawl 760ms steps(8) infinite;
}
@keyframes pv-crack-crawl {
  from { background-position: 0 0, 0 0; }
  to { background-position: -8px 0, 0 0; }
}

#pv-crack-stats {
  position: absolute;
  top: 90px;
  left: 6px;
  width: 158px;
  box-sizing: border-box;
  padding: 4px 6px;
  background: #eceadf;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}
#pv-crack-stats .pv-kv {
  height: 15px;
  line-height: 15px;
  padding: 0;
}
#pv-crack-stats .pv-kv + .pv-kv {
  border-top: 1px solid #dcd9cb;
}

#pv-crack-view {
  position: absolute;
  top: 172px;
  left: 6px;
  width: 158px;
  height: 18px;
  box-sizing: border-box;
  padding: 0;
  border: 2px solid #14161c;
  border-radius: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff6ea;
  text-shadow: 0 1px 0 #6f3705;
  background: linear-gradient(#f0b071 0 2px, #d3822c 2px 55%, #b85f0e 55% 82%, #a1520a 82% 100%);
  box-shadow: inset 0 -2px 0 #6f3705;
}

#pvrent.inlay-fill .w95-groove,

#pvrent.inlay-fill #pvrent-sub,
#pvrent.inlay-fill #pvrent-field { display: none !important; }
#pvrent.inlay-fill .w95-text-l.w95-grey { display: none !important; }

#pvrent.inlay-fill #pvrent-well {
  display: grid !important;
  top: 6px !important;
  width: 28px !important;
  height: 28px !important;
  background: #eceadf !important;
}
#pvrent.inlay-fill #pvrent-img { width: 24px !important; height: 24px !important; }
#pvrent.inlay-fill #pvrent-title {
  top: 36px !important;
  height: 14px !important;
  display: block;
  line-height: 14px !important;
  text-align: center;
  font-size: 12px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pvrent.inlay-fill #pvrent-price {
  top: 54px !important;
  left: 8px !important;
  width: 154px !important;
  height: 38px !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  background: #eceadf;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}

#pvrent.inlay-fill #pvrent-target {
  display: block !important;
  top: 116px !important;
  left: 8px !important;
  width: 154px !important;
  height: 14px !important;
  font-size: 10px !important;
  font-weight: 700;
  line-height: 14px !important;
  color: #3d3a32;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pvrent-quote {
  position: absolute;
  top: 96px;
  left: 8px;
  width: 154px;
  height: 14px;
  line-height: 14px;
  font-size: 9px;
  letter-spacing: 1px;
  text-align: center;
  color: #8a8474;
  display: none;
}

#pvrent.inlay-fill #pvrent-quote {
  display: block;
  box-sizing: border-box;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}
#pvrent-quote.soon { color: #b00000; font-weight: 700; }
#pvrent-quote.flash {
  color: #a1520a;
  font-weight: 700;
  animation: pvq-flash 0.9s steps(1) 3;
}
@keyframes pvq-flash { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }

#pvrent.inlay-fill #pvrent-stats {
  top: calc(var(--inh) - 80px) !important;
  left: 8px !important;
  width: 154px !important;
  box-sizing: border-box;
  padding: 3px 6px;
  background: #eceadf;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}
#pvrent.inlay-fill #pvrent-stats .pv-kv {
  height: 15px;
  line-height: 15px;
  padding: 0;
}
#pvrent.inlay-fill #pvrent-stats .pv-kv + .pv-kv { border-top: 1px solid #dcd9cb; }

#pvrent.inlay-fill #pvrent-stats .pv-kv .v { white-space: nowrap; }
#pvrent.inlay-fill #pvrent-stats .pv-kv .k {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pvrent.inlay-fill #pvrent-stats .pv-kv:nth-child(n + 4) { display: none; }

#pvrent.inlay-fill #pvrent-yes,
#pvrent.inlay-fill #pvrent-no {
  top: calc(var(--inh) - 22px) !important;
  height: 18px !important;
  margin-top: 0 !important;
  box-sizing: border-box;
  padding: 0 !important;
  border: 2px solid #14161c;
  border-radius: 0;
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: 1px !important;
  white-space: nowrap;
  cursor: pointer;
}
#pvrent.inlay-fill #pvrent-yes {
  left: 8px !important;
  width: 92px !important;
  color: #06280a;
  text-shadow: 0 1px 0 #a9e6a4;
  background: linear-gradient(#d8f5cf 0 2px, #7fd472 2px 55%, #4fae42 55% 82%, #37852c 82% 100%);
  box-shadow: inset 0 -2px 0 #245c1c;
}

#pvrent.inlay-fill #pvrent-no {
  left: 104px !important;
  width: 58px !important;
  color: #14161c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
  background: linear-gradient(#e8877a 0 2px, #cf4b39 2px 55%, #b0301f 55% 82%, #8e2415 82% 100%);
  box-shadow: inset 0 -2px 0 #5e1109;
}

#pvrent.inlay-fill #pvrent-yes:disabled {
  color: #a49e8e;
  text-shadow: 0 1px 0 #f2efe4;
  cursor: default;
  border-color: #b3ad9c;
  background: linear-gradient(#f2efe4 0 2px, #ddd8c6 2px 55%, #cbc6b3 55%);
  box-shadow: inset 0 -2px 0 #b3ad9c;
}

#pvstake.inlay-fill .w95-groove,
#pvstake.inlay-fill #pvs-sub,
#pvstake.inlay-fill .w95-text-l.w95-grey { display: none !important; }

#pvstake.inlay-fill #pvs-well {
  display: grid !important;
  top: 6px !important;
  width: 28px !important;
  height: 28px !important;
  background: #eceadf !important;
  place-items: center;
}
#pvstake.inlay-fill #pvs-img {
  width: 22px !important;
  height: 22px !important;
  image-rendering: pixelated;
}
#pvstake.inlay-fill #pvs-title {
  top: 36px !important;
  height: 14px !important;
  display: block;
  line-height: 14px !important;
  text-align: center;
  font-size: 12px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pvstake.inlay-fill #pvs-price {
  top: 54px !important;
  left: 8px !important;
  width: 154px !important;
  height: 34px !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;

  background: #eceadf;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}

#pvstake.inlay-fill #pvs-pnote {
  display: block !important;
  top: 94px !important;
  left: 8px !important;
  width: 154px !important;
  font-size: 9px !important;
  line-height: 11px !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pvstake.inlay-fill #pvs-stats {
  top: calc(var(--inh) - 108px) !important;
  left: 8px !important;
  width: 154px !important;
  box-sizing: border-box;
  padding: 3px 6px;
  background: #eceadf;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}
#pvstake.inlay-fill #pvs-stats .pv-kv {
  height: 15px;
  line-height: 15px;
  padding: 0;
}
#pvstake.inlay-fill #pvs-stats .pv-kv + .pv-kv { border-top: 1px solid #dcd9cb; }
#pvstake.inlay-fill #pvs-stats .pv-kv .v { white-space: nowrap; }
#pvstake.inlay-fill #pvs-stats .pv-kv .k {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pvstake.inlay-fill #pvs-field {
  display: flex !important;
  align-items: center;
  justify-content: center;
  top: calc(var(--inh) - 66px) !important;
  left: 8px !important;
  width: 154px !important;
  height: 16px !important;
  box-sizing: border-box;
  font-size: 9px;
}

#pvstake.inlay-fill #pvs-ok,
#pvstake.inlay-fill #pvs-no {
  top: calc(var(--inh) - 32px) !important;
  height: 20px !important;
  margin-top: 0 !important;
  box-sizing: border-box;
  padding: 0 !important;
  font-size: 12px !important;
  white-space: nowrap;
}
#pvstake.inlay-fill #pvs-ok { left: 8px !important; width: 92px !important; }
#pvstake.inlay-fill #pvs-no { left: 104px !important; width: 58px !important; }

#pvresult.inlay-fill #pvr-well,
#pvresult.inlay-fill .w95-groove,
#pvresult.inlay-fill #pvr-groove2,
#pvresult.inlay-fill #pvr-fine,
#pvresult.inlay-fill #pvr-verify { display: none !important; }

#pvresult.inlay-fill #pvr-title {
  top: 6px !important;
  left: 8px !important;
  width: 154px !important;
  height: 22px !important;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  font-size: 14px !important;
  line-height: 1 !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(#efe9d6 0 2px, #ddd7c4 2px 55%, #cec8b4 55% 100%);
  box-shadow: inset 0 0 0 1px #a8a294, 0 1px 0 rgba(0, 0, 0, 0.18);
}
/* ONE LINE, CLAMPED (owner, 2026-08-29). The inlaid column gives this caption
   exactly 18px between the title plate at 28 and the price label at 48, which
   is one 11px line. Nothing enforced that, so a two-line sub simply painted
   over the label underneath it - TARGET GOT RICHER prints the server's own
   sentence here and the server's sentence names a figure, which is easily two
   lines at 9px in 154px. The clamp is the same one #pvr-title, #pvr-plabel and
   #pvstake's pnote already carry; the words that matter are at the front of
   the sentence and the number it would have run on to say is in the price
   plate directly below. */
#pvresult.inlay-fill #pvr-sub {
  top: 30px !important;
  left: 8px !important;
  width: 154px !important;
  font-size: 9px !important;
  line-height: 11px !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pvresult.inlay-fill.haswho #pvr-sub { display: none !important; }

#pvr-who { display: none; }

#pvresult.inlay-fill #pvr-who {
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  top: 34px;
  left: 8px;
  width: 154px;
  height: 34px;
  box-sizing: border-box;
  padding: 0 6px;
  background: #eceadf;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}
#pvresult.inlay-fill #pvr-who.hidden { display: none; }
#pvresult.inlay-fill #pvr-who.live:hover { background: #f5f2e6; }

.pvr-who-well {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: none;
  box-shadow: inset 0 0 0 2px #a1520a;
}
.pvr-who-well img {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
  display: block;
}
.pvr-who-txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 10px;
}

.pvr-who-txt b {
  display: block;
  min-width: 0;
  font-size: 12px;
  line-height: 13px;
  color: #1c1c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 4px;
  margin-bottom: -4px;
}

.pvr-who-txt .h {
  margin-top: 1px;
  font-size: 8px;
  color: #8a8474;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pvr-who-txt b .nmt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* THE .pvr-tw RULES ARE DELETED (R8-DEAD, 2026-09-03) - this pair, and the
   three-rule block further down this file. See the note at the second site. */

#pvresult.inlay-fill #pvr-plabel {
  top: 74px !important;
  left: 8px !important;
  width: 154px !important;
  text-align: center;
  font-size: 9px !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5c574c !important;
}

#pvresult.inlay-fill:not(.haswho) #pvr-plabel { top: 48px !important; }
#pvresult.inlay-fill:not(.haswho) #pvr-price { top: 62px !important; }
#pvresult.inlay-fill:not(.haswho) #pvr-stats { top: 100px !important; max-height: calc(var(--inh) - 132px); }

#pvresult.inlay-fill:has(.db-panel) #pvr-plabel { top: 34px !important; }
#pvresult.inlay-fill:has(.db-panel) #pvr-price { top: 48px !important; }

#pvresult.inlay-fill:has(.db-panel) #pvr-stats {
  top: 86px !important;
  height: calc(var(--inh) - 116px) !important;
  max-height: none !important;
  display: flex;
  flex-direction: column;
}

#pvresult.inlay-fill:has(.db-panel) #pvr-stats > .pv-kv { flex: none; }
#pvresult.inlay-fill:has(.db-panel) .db-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#pvresult.inlay-fill:has(.db-panel) .db-chart { flex: none; }
#pvresult.inlay-fill:has(.db-panel) .db-pools {
  flex: 1;
  min-height: 0;
  height: auto;
}

#pvresult.inlay-fill #pvr-price {
  top: 88px !important;
  left: 8px !important;
  width: 154px !important;
  height: 34px !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px !important;
  line-height: 1 !important;
  text-align: center;
  background: #eceadf;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}

#pvresult.inlay-fill #pvr-pnote { display: none !important; }

#pvresult.inlay-fill #pvr-stats {
  top: 130px !important;
  left: 8px !important;
  width: 154px !important;

  max-height: calc(var(--inh) - 160px);
  overflow: hidden;
  box-sizing: border-box;
  padding: 3px 6px;
  background: #eceadf;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}
#pvresult.inlay-fill #pvr-stats .pv-kv {
  height: 15px;
  line-height: 15px;
  padding: 0;
}
#pvresult.inlay-fill #pvr-stats .pv-kv + .pv-kv { border-top: 1px solid #dcd9cb; }
#pvresult.inlay-fill #pvr-stats .pv-kv .v { white-space: nowrap; }
#pvresult.inlay-fill #pvr-stats .pv-kv .k {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pvresult.inlay-fill #pvr-stats:not(:has(.db-panel)) .pv-kv:nth-child(n + 4) { display: none; }

#pvresult:not(.inlay-fill).hascrew #pvr-crew {
  position: absolute;
  top: calc(162px + var(--pvr-krows, 2) * 15px);
  left: 10px;
  width: 260px;
  height: calc(var(--pvr-crows, 0) * 34px + 4px);
  box-sizing: border-box;
  overflow: hidden;
}

#pvresult:not(.inlay-fill) .pvr-cpane {
  height: 100%;
  box-sizing: border-box;
  padding: 2px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}

#pvresult:not(.inlay-fill) .pvr-crow {
  padding: 0 4px;
  box-sizing: border-box;
}
#pvresult:not(.inlay-fill) .pvr-crow + .pvr-crow { border-top: 1px solid #cfcaba; }
#pvresult.inlay-fill #pvr-crew {
  position: absolute;
  top: 185px;
  left: 8px;
  width: 154px;
  height: calc(var(--inh) - 215px);
  box-sizing: border-box;
  overflow: hidden;
}
#pvresult.inlay-fill #pvr-crew.hidden { display: none; }

#pvresult.inlay-fill:not(.haswho) #pvr-crew {
  top: 155px;
  height: calc(var(--inh) - 185px);
}

#pvresult.inlay-fill:not(.haswho):has(#pvr-plabel:empty) #pvr-price { top: 48px !important; }
#pvresult.inlay-fill:not(.haswho):has(#pvr-plabel:empty) #pvr-stats { top: 86px !important; }
#pvresult.inlay-fill:not(.haswho):has(#pvr-plabel:empty) #pvr-crew {
  top: 141px;
  height: calc(var(--inh) - 171px);
}

#pvresult.inlay-fill.hascrew #pvr-stats { max-height: none; }

#pvresult.inlay-fill .pvr-cpane {
  height: 100%;
  box-sizing: border-box;
  padding: 2px;
  display: flex;
  flex-direction: column;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}

#pvresult.inlay-fill .pvr-crow {

  flex: 1 1 0;
  min-height: 0;
  height: auto;
  gap: 6px;
  padding: 0 4px;
  border-top: none;
  background: none;
  box-shadow: none;
}
#pvresult.inlay-fill .pvr-crow + .pvr-crow { border-top: 1px solid #cfcaba; }

.pvr-cwell {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: #eceadf;
  box-shadow: inset 0 0 0 1px #a8a294;
}
.pvr-cwell img {
  image-rendering: pixelated;
  display: block;
}

#pvresult.inlay-fill .pvr-cwell { width: 26px; height: 26px; }
#pvresult.inlay-fill .pvr-cwell img { width: 24px; height: 24px; }
#pvresult.inlay-fill .pvr-crow .txt {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  line-height: 11px;
}

#pvresult.inlay-fill .pvr-crow .nm {
  display: block;
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  color: #1c1c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pvresult.inlay-fill .pvr-crow .nm .h { font-weight: 700; }
#pvresult.inlay-fill .pvr-crow .amt {
  display: block;
  font-size: 10px;
  white-space: nowrap;
}
#pvresult.inlay-fill .pvr-crow.live:hover { background: #f0ece0; }

/* .pvr-crow .foot and .pvr-crow .foot .amt DELETED 2026-09-03 (R8-NET-12).
   *** THIS ONE IS PROVED BY READING THE BUILDER, NOT BY THE BROWSER *** and the
   distinction is worth stating, because its neighbour `.pvr-crow .amt.gain`
   SURVIVED this sweep on the same reasoning pointed the other way. A raid
   result cannot be reached without a resolved hack, so neither rule was
   observed live. js/pvp.js builds every .pvr-crow row in one place, and the
   children it creates are pvr-cwell, txt, nm, h and amt - there is no foot. The
   same function assembles `amt gain` in a template literal, which is why .gain
   stays. `foot`'s only other vouchers were the words "on foot." in
   js/doordash.js copy and a long comment in js/pvp.js about drawing a table's
   foot. */
.pvr-crow .sub {
  flex: 1;
  min-width: 0;
  font-size: 9px;
  color: #8a8474;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pvr-crow.out .sub { color: #b0574e; }

/* THE X BADGE'S STYLING IS DELETED (R8-DEAD, 2026-09-03), FIVE RULES LATE.
   .pvr-tw, .pvr-tw img and .pvr-tw:hover stood here, plus `#pvr-who .pvr-tw`
   and its img pair about 230 lines up.

   THE DELETION NOTE FOR THE FEATURE SAID THE CSS HAD ALREADY GONE. It is the
   most careful account in the repo of why the X badge must not come back -
   js/desktop.js "LINKING AN X ACCOUNT IS GONE (owner, 2026-08-28) ... the
   handle was a string the client stored, so the badge was an unverified claim
   to be somebody rendered as though the game had checked" - and its list of
   what went with it says "#bank-tw and #pe-tw-link in index.html, THEIR CSS".
   The CSS did not go. It sat in the raid result window with zero references in
   js/ or index.html, which is a badge's styling outliving its badge and ready
   to make a re-wiring look finished. Grepped on "pvr-tw", "twBadge" and "tw"
   across index.html, js/ and css/ before deleting; the only survivors are that
   past-tense note and this one. */
#pvresult.inlay-fill .pvr-crow .nm .h {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pvresult.inlay-fill .pvr-crow.out .pvr-cwell { box-shadow: inset 0 0 0 1px #b00000; }
#pvresult.inlay-fill .pvr-crow.me .pvr-cwell { box-shadow: inset 0 0 0 1px #2f6cb4; }

#pvresult.inlay-fill #pvr-ok {
  top: calc(var(--inh) - 26px) !important;
  left: 8px !important;
  width: 154px !important;
  height: 18px !important;
  margin-top: 0 !important;
  box-sizing: border-box;
  padding: 0 !important;
  border: 2px solid #14161c;
  border-radius: 0;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 1px;

  color: #14161c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
  cursor: pointer;
  background: linear-gradient(#b9dcfa 0 2px, #5b9fe0 2px 55%, #2f6cb4 55% 82%, #24548c 82% 100%);
  box-shadow: inset 0 -2px 0 #16406e;
}

/* 66/82 RATHER THAN 88/60 (owner, 2026-08-29). The only two-key inlaid result
   in the game is TARGET GOT RICHER, whose keys read PAY IT and WALK AWAY, and
   WALK AWAY did not fit 60px at 9px with a 1px letter-spacing - it painted
   straight through the end of its own key. PAY IT is six characters and never
   needed 88, so the width comes out of the key that had room and goes to the
   key that did not: 8..74 and 80..162, still ending on the column's right
   edge with the same 6px between them the old pair had. */
#pvresult.inlay-fill.twobtn #pvr-ok {
  width: 66px !important;
  white-space: nowrap;
  color: #06280a;
  text-shadow: 0 1px 0 #a9e6a4;
  background: linear-gradient(#d8f5cf 0 2px, #7fd472 2px 55%, #4fae42 55% 82%, #37852c 82% 100%);
  box-shadow: inset 0 -2px 0 #245c1c;
}
#pvresult.inlay-fill.twobtn #pvr-ok:hover {
  background: linear-gradient(#eafce4 0 2px, #93e585 2px 55%, #5fc351 55% 82%, #46993a 82% 100%);
}
#pvresult.inlay-fill.twobtn #pvr-ok:active {
  background: linear-gradient(#4fae42 0 2px, #37852c 2px 100%);
  box-shadow: inset 0 1px 0 #245c1c;
}
#pvresult.inlay-fill #pvr-no {
  top: calc(var(--inh) - 26px) !important;
  left: 80px !important;
  width: 82px !important;
  height: 18px !important;
  margin-top: 0 !important;
  box-sizing: border-box;
  padding: 0 !important;
  border: 2px solid #14161c;
  border-radius: 0;
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  cursor: pointer;
  color: #14161c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
  background: linear-gradient(#e8877a 0 2px, #cf4b39 2px 55%, #b0301f 55% 82%, #8e2415 82% 100%);
  box-shadow: inset 0 -2px 0 #5e1109;
}

#pvresult {
  width: 560px;
  height: 560px;
  left: 680px;
  top: 190px;
  z-index: 46;
}

#pvresult .w95-scale {
  width: 280px;
  height: calc(228px + var(--pvr-rows, 4) * 15px);
}
#pvr-groove2 { top: calc(156px + var(--pvr-rows, 4) * 15px); }
#pvr-fine { position: absolute; left: 0; width: 100%; text-align: center; top: calc(164px + var(--pvr-rows, 4) * 15px); }
#pvr-ok { top: calc(186px + var(--pvr-rows, 4) * 15px); left: 10px; width: 260px; }
#pvresult.twobtn #pvr-ok { width: 155px; }
#pvr-no { top: calc(186px + var(--pvr-rows, 4) * 15px); left: 171px; width: 99px; }

#pvstake {
  width: 560px;

  height: 528px;
  left: 680px;
  top: 170px;
  z-index: 46;
}

#pvstake .w95-scale { width: 280px; height: 264px; }

#pvr-well, #pvs-well {
  background: #fff;
  display: grid;
  place-items: center;
}

#pvr-img, #pvs-img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

#pvr-price { color: #a1520a; }
#pvs-price { color: #b8860b; }
#pvr-price.good { color: #2e7d32; }
#pvr-price.bad { color: #b00000; }

#pvr-stats, #pvs-stats {
  position: absolute;
  left: 10px;
  width: 260px;
}

#pvr-stats { top: 158px; }

#pvresult:not(.inlay-fill) #pvr-pnote {
  top: 127px !important;
  height: 25px;
  line-height: 12px;
  display: flex;
  align-items: center;
}

.pvr-crow {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
}
.pvr-crow + .pvr-crow { border-top: 1px solid #eceade; }
.pvr-crow .txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 12px;
}
.pvr-crow img,
.pvr-crow canvas {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
  display: block;
}
.pvr-crow .nm {
  min-width: 0;
  font-size: 11px;
  color: #1c1c1c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pvr-crow .amt { font-size: 10px; font-weight: 700; color: #5c574c; white-space: nowrap; }
.pvr-crow.me .nm { font-weight: 700; }
.pvr-crow.out .nm,
.pvr-crow.out .amt { color: #b00000; }
.pvr-crow.out .amt { letter-spacing: 1px; }

.pvr-crow .amt.gain { color: #2e7d32; }

.pvr-crow .pvr-cwell { box-shadow: inset 0 0 0 1px #9a9482; }
.pvr-crow.out .pvr-cwell { box-shadow: inset 0 0 0 1px #b00000; }
.pvr-crow.me .pvr-cwell { box-shadow: inset 0 0 0 1px #2f6cb4; }
.pvr-crow.live { cursor: pointer; }
.pvr-crow.live:hover { background: #f5f2e6; }

.db-panel { margin-top: 4px; }
.db-chart {
  display: block;
  width: 100%;
  height: 40px;
  image-rendering: pixelated;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}
.db-none {
  padding: 0 4px;
  font-size: 9px;
  line-height: 14px;
  color: #8a8474;
}

.db-pools {
  margin-top: 4px;
  height: 80px;
  box-sizing: border-box;
  padding: 2px;
  overflow: hidden;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}
.db-pool + .db-pool { border-top: 1px solid #cfcaba; }
.db-phead {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 3px;
  cursor: pointer;
}
.db-phead:hover { background: #f0ece0; }
.db-phead .nm { flex: 1; min-width: 0; font-size: 10px; font-weight: 700; color: #1c1c1c;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-phead .amt { font-size: 9px; color: #8a8474; white-space: nowrap; }

.db-mark {
  flex: none;
  display: block;
  width: 9px;
  height: 9px;
}

.db-mark {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
  background-color: transparent;
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h3v3h3v3h-3v3h-3v-3h-3v-3h3z' fill='%232e7d32'/%3E%3Cg fill='%235cab60'%3E%3Crect x='3' y='0' width='3' height='1'/%3E%3Crect x='3' y='0' width='1' height='3'/%3E%3Crect x='0' y='3' width='3' height='1'/%3E%3Crect x='0' y='3' width='1' height='3'/%3E%3Crect x='6' y='3' width='3' height='1'/%3E%3Crect x='3' y='6' width='1' height='3'/%3E%3C/g%3E%3Cg fill='%231a5c1e'%3E%3Crect x='5' y='0' width='1' height='3'/%3E%3Crect x='8' y='3' width='1' height='3'/%3E%3Crect x='6' y='5' width='3' height='1'/%3E%3Crect x='5' y='6' width='1' height='3'/%3E%3Crect x='3' y='8' width='3' height='1'/%3E%3Crect x='0' y='5' width='3' height='1'/%3E%3C/g%3E%3C/svg%3E");
}
.db-pool.open .db-mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath d='M0 3h9v3h-9z' fill='%232e7d32'/%3E%3Cg fill='%235cab60'%3E%3Crect x='0' y='3' width='9' height='1'/%3E%3Crect x='0' y='3' width='1' height='3'/%3E%3C/g%3E%3Cg fill='%231a5c1e'%3E%3Crect x='0' y='5' width='9' height='1'/%3E%3Crect x='8' y='3' width='1' height='3'/%3E%3C/g%3E%3C/svg%3E");
}
.db-mark svg { display: none; }
.db-crew { display: none; padding: 1px 0 3px 14px; }
.db-pool.open .db-crew { display: block; }
.db-mate {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 17px;
}

.db-mate .nm { font-size: 9px; font-weight: 700; color: #3a352c;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-mate.live { cursor: pointer; }
.db-mate.live:hover { background: #f5f2e6; }

#pvresult.inlay-fill .db-mate .pvr-cwell { width: 14px; height: 14px; }
#pvresult.inlay-fill .db-mate .pvr-cwell img { width: 11px; height: 11px; }
.db-mate .pvr-cwell { width: 14px; height: 14px; }
.db-mate .pvr-cwell img { width: 11px; height: 11px; }

#pvs-stats { top: 158px; }
#pvr-stats .pv-kv, #pvs-stats .pv-kv { padding: 1px 0; }

#pvs-field { top: 204px; justify-content: flex-start; }

/* #pv-net-cap, #pv-net-groove AND #pv-net ARE ALL DELETED (R8-DEAD,
   2026-09-03) with their markup. The first two went with the markup pass;
   #pv-net followed once js/pvp.js was free, and the staged deletion is
   FINISHED.

   ALL THREE WERE `display: none` in a flat id rule with no reason stated, all
   declared at left 248 / top 300 and 314, which is inside #pv-map-box (top 30,
   left 10, 280x336) - so had any of them ever rendered it would have sat over
   the ChudNet map. #pv-net's rule was `position: absolute; top: 314px;
   display: none; left: 248px; width: 222px`, and like its two siblings it
   carried a stray empty declaration - a bare `;` after `display: none`, which
   is what a rule looks like after somebody deletes a property and leaves the
   semicolon behind.

   #pv-net WAS THE ONE WITH A LIVE WRITER: renderNet() in js/pvp.js wrote two
   rows into it on every chud-face render, into a box measured live at a 0x0
   rect that no player could see. The rule, the div, the function and its one
   call site all came out in ONE commit.

   NOT AFFECTED, AND DELIBERATELY SO: #pv-netband, #pv-netband-fig,
   #pv-netband-caprow, #pv-netband-cap and #pv-netrows are the LIVE Network
   band and their rules are untouched. A name-matching sweep for "pv-net" would
   take all of them; the trailing hyphen is the whole difference. */

.pv-kvdiv {
  height: 2px;
  margin: 6px 0 5px;
  background: linear-gradient(to bottom, #a8a294 0 1px, #fff 1px 2px);
}

#pv-pos-rows .pv-kv + .pv-kv { border-top: 1px solid #dcd7c4; }
#pv-pos-rows .pv-kvdiv + .pv-kv { border-top: none; }

#wbconfirm {
  width: 560px;
  height: 580px;
  left: 700px;
  top: 190px;
  z-index: 44;
}

#wbconfirm .w95-scale {
  width: 280px;
  height: calc(230px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px));
}
#wbconfirm.three .w95-scale { height: calc(258px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbc-groove2 { top: calc(156px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbc-fine { position: absolute; left: 0; width: 100%; text-align: center; top: calc(164px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbc-ok { top: calc(186px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); left: 10px; width: 155px; }
#wbc-no { top: calc(186px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); left: 171px; width: 99px; }
#wbconfirm.three #wbc-ok { width: 127px; }
#wbconfirm.three #wbc-alt {
  display: block;
  top: calc(186px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px));
  left: 143px;
  width: 127px;
}
#wbconfirm.three #wbc-no {
  top: calc(212px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px));
  left: 10px;
  width: 260px;
}

/* THE ELLIPSIS WAS EATING THE DESCENDERS (owner, playing, 2026-09-09: "the g in
   Waiting is cut off").
   ---------------------------------------------------------------------
   These three are the ONLY .w95-apptitle elements that carry `overflow: hidden`
   - they need it for the ellipsis, because a bench reveal can be titled with a
   part name of any length. Every other title in the game overflows visibly and
   is therefore fine, which is why this only ever showed up here.

   .w95-apptitle sets no height and no line-height, so the box is one `normal`
   line box of the desk's own face - and this family's normal line box is
   TIGHTER THAN ITS GLYPHS. That costs nothing while overflow is visible and
   clips the tail off every g, y, p, q and j the moment it is hidden. "Waiting
   for Reveal" has one, so the title of the one window a player stares at while
   waiting was the place it showed.

   1.35 IS THE SMALLEST THAT CLEARS IT and the negative margin puts the text
   back where it was: a taller line box centres the glyph lower by half the
   growth, so +3px of box moves the baseline down 1.5 and -2px of margin moves
   the whole box up 2. Net half a pixel higher than before, which is under the
   window scale on every layout. Nothing else in these dialogs is positioned off
   this element, so nothing below it moves at all.

   IT IS ON THE ID RULE, NOT .w95-apptitle. The shared class is right as it is:
   only the clipped titles need the room, and giving every app title a taller
   line box would move furniture in windows that have no defect. */
#wbc-title, #pvr-title, #pvrent-title {
  right: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
  margin-top: -2px;
}

#wbc-well {
  position: relative;
  overflow: hidden;
  background: #fff;
  display: grid;
  place-items: center;
}

#wbc-mreel {
  display: none;
  position: absolute;
  left: 10px;
  width: 260px;
  top: calc(88px + var(--rcp, 0px));
  height: 56px;
  box-sizing: border-box;
  background: #e4e0d2;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px #8a8474,
    inset 1px 1px 0 1px #a8a294,
    inset -1px -1px 0 1px #fff,
    inset 3px 3px 0 #c9c4ae;
}
#wbconfirm.mreel #wbc-mreel { display: block; }

#wbc-mreel-strip {
  position: absolute;
  inset: 4px auto 4px 4px;
  display: flex;
  align-items: center;
  will-change: transform;
}
#wbc-mreel-needle {
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 2px;
  margin-left: -1px;
  background: #e5934a;
  box-shadow: 0 0 4px rgba(229, 147, 74, 0.9);
}
.wbc-mtile {
  flex: none;
  width: 44px;
  display: grid;
  place-items: center;
}
.wbc-mtile canvas {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}

#wbc-img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

#wbc-rays,
#wbc-shine { display: none; }

#wbc-rays {
  position: absolute;
  top: 28px;
  left: 16px;
  width: 48px;
  height: 48px;
  pointer-events: none;
}
#wbc-rays i {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--wbc-ray, #a1520a);
  box-shadow: 0 0 0 1px rgba(20, 22, 28, 0.35);
  opacity: 0;
  animation: wbc-spark 2.4s steps(1, end) infinite;
}

@keyframes wbc-spark {
  0%, 8% { opacity: 1; transform: scale(1.4); }
  9%, 25% { opacity: 1; transform: scale(1); }
  26%, 100% { opacity: 0; transform: scale(1); }
}

#wbc-shine {
  position: absolute;
  top: 28px;
  left: 16px;
  width: 52px;
  height: 52px;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--wbc-ray, #a1520a);
  opacity: 0;
  animation: wbc-halo 2.4s ease-in-out infinite;
}
@keyframes wbc-halo {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.5; }
}

#wbconfirm.prize #wbc-img { animation: wbc-land 0.42s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes wbc-land {
  from { transform: scale(0.2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
#wbconfirm.prize #wbc-well { animation: wbc-pop 0.42s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes wbc-pop {
  from { transform: scale(0.86); }
  to { transform: scale(1); }
}

#wbconfirm.prize #wbc-price { animation: wbc-stamp 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.16s backwards; }
@keyframes wbc-stamp {
  from { transform: scale(1.35); opacity: 0; letter-spacing: 4px; }
  to { transform: scale(1); opacity: 1; letter-spacing: 0; }
}

#wbc-price { color: #b8860b; }

#wbc-price.ink { color: #1c1c1c; }

#wbc-stats .pv-kv .k { display: flex; align-items: center; min-width: 0; }
#wbc-stats .pv-kv .k .pf-cube { flex: none; margin-right: 6px; }
#wbc-stats .pv-kv .k .kt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

#wbc-price.term {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 34px;
  letter-spacing: 1px;
}

#jobpick {
  width: 210px;
  height: auto;
  left: 0;
  top: 0;
}

#jobpick .w95-scale {
  background: #e4e0d2;
  border-radius: 0;

  box-shadow:
    inset 0 0 0 2px #14161c,
    inset 2px 2px 0 2px #fbf9f0,
    inset -2px -2px 0 2px #b3ad9c,
    3px 4px 0 rgba(20, 22, 28, 0.3),
    6px 8px 0 rgba(20, 22, 28, 0.12);
}
#jp-list {
  position: absolute;

  inset: 4px;
  overflow-y: auto;
  padding: 2px 0;
  box-sizing: border-box;
}

#slotpick {
  width: 210px;
  height: auto;
  left: 0;
  top: 0;
}
#slotpick .w95-scale { width: 210px; }
#sp-list {
  position: absolute;
  inset: 0;
  background: #e4e0d2;

  box-shadow:
    inset 0 0 0 2px #14161c,
    inset 2px 2px 0 2px #fbf9f0,
    inset -2px -2px 0 2px #b3ad9c,
    3px 4px 0 rgba(20, 22, 28, 0.3),
    6px 8px 0 rgba(20, 22, 28, 0.12);
  overflow-y: auto;

  padding: 0 0 0 2px;
  box-sizing: border-box;
}

#sp-list::before,
#sp-list::after {
  content: '';
  display: block;
  position: sticky;
  height: 3px;
  z-index: 2;
  margin-left: -1px;
  margin-right: -11px;
}
#sp-list::before {
  top: 0;
  margin-bottom: -3px;
  background: linear-gradient(#14161c 0 1px, #e4e0d2 1px 3px);
}
#sp-list::after {
  bottom: 0;
  margin-top: -3px;
  background: linear-gradient(#e4e0d2 0 2px, #14161c 2px 3px);
}
#sp-list.sb-off::before,
#sp-list.sb-off::after { display: none; }
#sp-list .slot-row:first-child { margin-top: 4px; }

#sp-list .slot-row { height: 23px; min-height: 0; margin: 2px 4px 2px 3px; }
#sp-list .wb-ring { width: 21px; height: 21px; }
#sp-list .it-thumb { max-width: 19px; max-height: 19px; }
#sp-list .it-name { font-size: 10px; line-height: 11px; }
#sp-list .it-sub { font-size: 9px; line-height: 10px; }

#sp-list .cond-bar.cb-inline { width: 34px; height: 4px; }
#sp-empty {
  padding: 8px 6px;
  color: #8a8474;
  font-style: italic;
  text-align: center;
}

.jp-head {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 15px;
  margin: 5px 0 2px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #7a7466;
}
.jp-head:first-child { margin-top: 1px; }
.jp-head .rule {
  flex: 1;
  height: 2px;
  background: linear-gradient(to bottom, #b3ad9c 0 1px, #fbf9f1 1px 2px);
}

.jp-more {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 4px 0 28px;
  font-size: 10px;
  font-weight: 700;
  color: #1c4fa0;
  cursor: pointer;
}
.jp-more:hover { color: #2a6fd8; background-color: #f2efe4; }
.jp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 4px;
  cursor: pointer;
}

.jp-row + .jp-row {
  background-image: linear-gradient(#b3ad9c 0 1px, transparent 1px);
  background-repeat: no-repeat;
  background-size: calc(100% - 4px) 1px;
  background-position: 2px 0;
}
.jp-row:hover { background-color: #f2efe4; }
.jp-cell {
  flex: none;
  width: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 0;
  margin-top: -2px;
}
.jp-cell .jp-bar { margin-top: -2px; }

.jp-bar {
  width: 18px;

  height: 3px;

  background: #8f897a;
  display: block;
}
.jp-bar i { display: block; height: 100%; }
.jp-row .nm {
  flex: 1;
  min-width: 0;
  font-size: 10px;

  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jp-row .go {
  flex: none;
  width: 5px;
  height: 9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='9' shape-rendering='crispEdges'%3E%3Cg fill='%237a7466'%3E%3Crect x='0' y='0' width='2' height='1'/%3E%3Crect x='1' y='1' width='2' height='1'/%3E%3Crect x='2' y='2' width='2' height='1'/%3E%3Crect x='3' y='3' width='2' height='1'/%3E%3Crect x='3' y='4' width='2' height='1'/%3E%3Crect x='2' y='5' width='2' height='1'/%3E%3Crect x='1' y='6' width='2' height='1'/%3E%3Crect x='0' y='7' width='2' height='1'/%3E%3C/g%3E%3C/svg%3E") center no-repeat;
}
.jp-row:hover .go { filter: brightness(0.55); }
.jp-none {
  padding: 8px 6px;
  font-size: 10px;
  font-style: italic;
  color: #7a7466;
}

.wbc-odds { margin: 4px 0 2px; }
.wbc-oddsbar {
  height: 20px;
  display: flex;
  gap: 2px;
  padding: 2px;
  box-sizing: border-box;
  background: linear-gradient(#191b21 0 40%, #22252d 40% 100%);
  box-shadow: inset 1px 1px 0 #0b0c10, inset -1px -1px 0 #3b3f4a;
  overflow: hidden;
}
.wbc-oddskey {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 9px;
  margin-top: 5px;
  font-size: 9px;
  line-height: 12px;
  color: #4a463c;
}
.wbc-oddskey span { display: flex; align-items: center; gap: 4px; }

#wbconfirm { --rcp: 0px; }
#wbconfirm.recipe { --rcp: 62px; }

#wbc-recipe {
  position: absolute;
  top: 76px;
  left: 10px;
  width: 260px;
  height: 52px;
  box-sizing: border-box;
  display: none;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;

  padding: 0;

  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}
#wbconfirm.recipe #wbc-recipe { display: grid; }

.rcp-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  justify-self: center;
}

.rcp-cell {
  position: relative;
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow:
    inset 0 0 0 2px var(--rcp-ring, #b3ad9c),
    inset 2px 2px 0 #9a9482,
    inset -2px -2px 0 #fff;
}

.rcp-cell canvas { width: 32px; height: 32px; image-rendering: pixelated; display: block; }

/* .wb-yield DELETED 2026-09-03 (R8-NET-01). Its name also carried a banned
   word: "yield" is off the vocabulary list (CLAUDE.md copy law). The green
   figure on a bench preview - measured live as "+27 MH/s" on a real repair - is
   `.v.pos`, a different rule entirely and still live. */

.rcp-cell b,
.rcp-out b {
  position: absolute;
  right: 1px;
  bottom: 1px;
  padding: 0 2px;
  background: #1c1c1c;
  color: #fff;
  font-size: 9px;
  line-height: 11px;
  font-weight: 700;
}

.rcp-cell.unknown,
.rcp-out.unknown {
  background: #fff;
  box-shadow: inset 2px 2px 0 #9a9482, inset -2px -2px 0 #fff;
}
.rcp-q {
  width: 100%;
  height: 100%;
  display: block;
}

.rcp-arrow {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
  height: 14px;
}

.rcp-out {
  width: 38px;
  height: 38px;
  flex: none;
  justify-self: center;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow:
    inset 0 0 0 2px var(--rcp-ring, #a1520a),
    inset 2px 2px 0 #9a9482,
    inset -2px -2px 0 #fff;
}
.rcp-out canvas { width: 32px; height: 32px; image-rendering: pixelated; display: block; }

#wbc-recipe.three {
  grid-template-columns: auto auto auto;
  justify-content: center;
  gap: 10px;
}
#wbc-recipe.three .rcp-in { gap: 4px; }
#wbc-recipe.three .rcp-cell,
#wbc-recipe.three .rcp-out { width: 36px; height: 36px; }
#wbc-recipe.three .rcp-cell canvas,
#wbc-recipe.three .rcp-out canvas { width: 30px; height: 30px; }

#wbc-hr1 { position: absolute; top: calc(78px + var(--rcp)); }
#wbc-hr2 { position: absolute; top: calc(152px + var(--rcp)); }
#wbc-plabel { top: calc(88px + var(--rcp)) !important; }
#wbc-price { top: calc(104px + var(--rcp)); }
#wbc-pnote { top: calc(133px + var(--rcp)) !important; }

#wbc-stats {
  position: absolute;
  top: calc(158px + var(--rcp));
  left: 10px;
  width: 260px;
}

#wbc-stats .pv-kv { padding: 1px 0; }

/* THE PROSE VARIANT OF THE STATS BOX (owner, 2026-08-28). Some confirms have
   one thing to explain rather than four to list, and a sentence broken into
   key-value rows makes a player read a table to learn it. The line-height is
   the row unit - 15px, the same number #wbconfirm's height maths counts in -
   so a blurb of N lines costs exactly N rows and the window sizes itself the
   way it always has. wbConfirm() measures the wrapped height after opening. */
.wbc-blurb {
  box-sizing: border-box;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
  color: #4a4a44;

  /* The window's own recessed panel, the same three insets #wbconfirm.finebox
     uses, so a paragraph sits in the furniture the rows sat in rather than
     floating on the window's face as a wall of text. */
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

.pv-head {
  position: absolute;
  top: 186px;
  font-size: 13px;
  font-weight: 700;
}

#pv-chud .pv-head,
#pv-chad .pv-head {
  width: 170px;
  text-align: center;
}

.pv-boxtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.pv-boxtitle::before,
.pv-boxtitle::after {
  content: '';
  flex: 1 1 0;
  height: 2px;
  background: linear-gradient(#a8a294 0 1px, #fff 1px 2px);
}

#pv-dep {
  top: 213px !important;
  left: 300px !important;

  width: 95px !important;
  height: 19px !important;
  box-sizing: border-box !important;
  padding: 0 5px !important;
  font-size: 13px;

  line-height: 12px;
  font-weight: 700;
  color: #1c1c1c;
  text-align: left;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset 2px 2px 0 #404040,
    inset -1px -1px 0 #fff,
    inset -2px -2px 0 #d6d2c4 !important;
}

#pv-dep::placeholder {
  color: #b6b1a3;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0;
}

#pv-dep { caret-color: transparent; }
#pv-dep-caret {
  position: absolute;

  top: 216px;
  left: 305px;
  width: 2px;
  height: 13px;
  background: #1c1c1c;
  pointer-events: none;
  display: none;
}
#pv-dep:focus ~ #pv-dep-caret {
  display: block;
  animation: dep-caret 1.06s steps(1) infinite;
}
@keyframes dep-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

#pv-stake-btn {
  position: absolute;
  top: 213px;
  left: 399px;
  width: 71px;
  height: 18px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 0;
  color: #06280a;
  text-shadow: 0 1px 0 rgba(169, 230, 164, 0.7);
  background: linear-gradient(#d8f5cf 0 2px, #7fd472 2px 55%, #4fae42 55% 92%, #37852c 92%);
  box-shadow: inset 0 0 0 1px #245c1c, 0 1px 0 rgba(0, 0, 0, 0.22);
}

#wbconfirm.onebtn #wbc-ok { width: 260px; }
#wbconfirm.onebtn #wbc-no { display: none; }

.pv-sprice, .w95-price, #pvr-price, #pvs-price, #pvrent-price, #wbc-price {
  white-space: nowrap;
}
.pv-sname { width: 108px; }

.cl-oseg { font-size: 9px; }

#wbc-groove2 { top: calc(166px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbc-fine { top: calc(174px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbc-ok, #wbc-no { top: calc(196px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm .w95-scale { height: calc(250px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.three .w95-scale { height: calc(278px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.three #wbc-alt { top: calc(196px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.three #wbc-no { top: calc(222px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }

#pvr-groove2 { top: calc(162px + var(--pvr-rows, 4) * 15px); }
#pvr-fine { top: calc(172px + var(--pvr-rows, 4) * 15px); }
#pvr-ok, #pvr-no { top: calc(182px + var(--pvr-rows, 4) * 15px + var(--pvr-fine, 26px)); }
#pvresult .w95-scale { height: calc(214px + var(--pvr-rows, 4) * 15px + var(--pvr-fine, 26px)); }

/* The two .pv-check checkbox-skin rules that stood here are DELETED 2026-09-03
   (R8-NET-01), with the .pv-check block they dressed. The hand-drawn tick was
   the only Win95 checkbox skin in the file and nothing wore it. */

#pvresult.verify .w95-scale { height: calc(274px + var(--pvr-rows, 4) * 15px); }
#pvresult.verify #pvr-verify {
  display: block;
  top: calc(222px + var(--pvr-rows, 4) * 15px);
  left: 10px;
  width: 260px;
}

.slot-row.focused { position: relative; }

.slot-row.focused::before {
  content: '';
  position: absolute;
  inset: 0 10px 0 0;
  pointer-events: none;

  z-index: 1;
}

.slot-row.focused {
  background: #eef3fb;
  animation: slotFocusBg 0.4s steps(1, end) 0s 3;
}

.slot-row.focused::before {
  box-shadow: inset 0 0 0 2px #316ac5;
  animation: slotFocusRing 0.4s steps(1, end) 0s 3;
}

@keyframes slotFocusBg {
  0%, 50% { background: #eef3fb; }
  50.01%, 100% { background: #fff; }
}

@keyframes slotFocusRing {
  0%, 50% { box-shadow: inset 0 0 0 2px #316ac5; }
  50.01%, 100% { box-shadow: inset 0 0 0 2px transparent; }
}

#iteminfo .w95-scale {
  width: 300px;
  height: calc(112px + var(--ii-rows, 6) * 16px);
}

#pvresult.verify .w95-scale { height: calc(228px + var(--pvr-rows, 4) * 15px); }
#pvresult.verify #pvr-ok { width: 127px; }
#pvresult.verify #pvr-verify {
  display: block;
  top: calc(196px + var(--pvr-rows, 4) * 15px);
  left: 143px;
  width: 127px;
}

#pv-pos-rows .pv-kv {
  padding: 0;
  height: 15px;
  box-sizing: border-box;
  align-items: center;
}

#pv-pos-rows .pv-kv .v { white-space: nowrap; flex: none; }
#pv-pos-rows .pv-kv .k {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pv-withdraw,
#pv-viewpool {
  top: calc(243px + var(--pv-rows, 4) * 15px + var(--pv-divs, 2) * 13px) !important;
}

#pv-withdraw,
#pv-viewpool {
  box-sizing: border-box;
  padding: 0;
  border: 2px solid #14161c;
  border-radius: 0;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  cursor: pointer;
}
#pv-withdraw {
  color: #06280a;
  text-shadow: 0 1px 0 #a9e6a4;
  background: linear-gradient(#d8f5cf 0 2px, #7fd472 2px 55%, #4fae42 55% 82%, #37852c 82% 100%);
  box-shadow: inset 0 -2px 0 #245c1c;
}
#pv-viewpool {
  color: #14161c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
  background: linear-gradient(#b9dcfa 0 2px, #5b9fe0 2px 55%, #2f6cb4 55% 82%, #24548c 82% 100%);
  box-shadow: inset 0 -2px 0 #16406e;
}
#pv-withdraw:disabled,
#pv-viewpool:disabled {
  color: #a49e8e;
  text-shadow: 0 1px 0 #f2efe4;
  cursor: default;
  border-color: #b3ad9c;
  background: linear-gradient(#f2efe4 0 2px, #ddd8c6 2px 55%, #cbc6b3 55%);
  box-shadow: inset 0 -2px 0 #b3ad9c;
}

/* The roster panel's two later overrides (#pv-cd-rows padding and the flex
   .pv-cd-head) went with the panel itself - R8-OWNER, 2026-09-03. */

#wbconfirm.nofine .w95-scale { height: calc(236px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.nofine.three .w95-scale { height: calc(264px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.nofine #wbc-ok,
#wbconfirm.nofine #wbc-no { top: calc(182px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.nofine.three #wbc-alt { top: calc(182px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.nofine.three #wbc-no { top: calc(208px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }

#iteminfo-ok {
  top: calc(96px + var(--ii-rows, 6) * 16px);
  left: 10px;
  width: 280px;
  height: 20px;
}
#iteminfo .w95-scale { height: calc(128px + var(--ii-rows, 6) * 16px); }

#powersapp .w95-scale { height: var(--pw-h, 484px); }
#powersapp { height: calc(var(--pw-h, 484px) * 2); }

#wbconfirm .w95-scale { height: calc(238px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.three .w95-scale { height: calc(266px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.nofine .w95-scale { height: calc(222px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.nofine.three .w95-scale { height: calc(250px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }

#wbc-sub, #pvr-sub, #pvrent-sub, #pvs-sub {
  right: 12px;
  white-space: pre-line;
  line-height: 11px;
}

/* #wbc-words and #wbconfirm.seed ARE DELETED (owner, 2026-08-28). They styled
   the twelve-word seed-phrase grid in the junk-drive prize window - a 3-column
   inset panel of numbered words - and the two layout overrides that window
   needed. The prize is removed from the game, js/workbench.js no longer builds
   the element or sets the class, and rules for an element that is never
   created are the kind of dead weight somebody later mistakes for a feature. */

#wbconfirm.norows #wbc-groove2 { display: none; }

#wbconfirm.norows #wbc-ok,
#wbconfirm.norows #wbc-alt,
#wbconfirm.norows #wbc-no { margin-top: -22px; }
#wbconfirm.norows .w95-scale { height: calc(200px + var(--rcp, 0px)); }

/* THE REVEAL USED TO DRAW FOUR ROWS OF TEXT ON TOP OF EACH OTHER.
   This block moved the item column down to clear the reel and forgot the two
   elements underneath it: #wbc-hr2 (152) and #wbc-stats (158) kept their
   no-reel positions while #wbc-plabel landed on 160. The provable-fairness
   rows - Roll #, Client seed, Server seed, Hash - were therefore painted into
   the same rectangle as the item's name, its rarity stamp and its spec line,
   with a giant coloured rarity word over the top of both. It read
   "Duflll#e bench". Every drive decrypt and every trade-up collect since the
   reel landed has looked like that.

   THE HEIGHT DOES NOT MOVE (house law: never resize a window; if the furniture
   does not fit, take height out of what is there). What came out is the two
   lines that said nothing the card did not already say twice: #wbc-plabel
   ("Off the bench") and the big #wbc-price rarity stamp - the title is already
   coloured by rarity and the subtitle already reads "Rare Cooling". #wbc-pnote
   stays, because "-106 heat - 100% durability" is the only line here carrying
   a fact of its own. Everything below is derived from --wbc-rows exactly as
   the non-reel dialog already derives it, so the four-row case lands on the
   same 294px it does today and a fifth row grows the box by one row rather
   than being drawn over the buttons. */
#wbconfirm.mreel #wbc-plabel,
#wbconfirm.mreel #wbc-price { display: none; }
#wbconfirm.mreel #wbc-pnote { top: calc(146px + var(--rcp, 0px)) !important; }
#wbconfirm.mreel #wbc-hr2 { display: block; top: calc(168px + var(--rcp, 0px)); }
#wbconfirm.mreel #wbc-stats { top: calc(174px + var(--rcp, 0px)); }
#wbconfirm.mreel #wbc-groove2 {
  display: block;
  top: calc(176px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px));
}
#wbconfirm.mreel #wbc-fine { top: calc(182px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
/* +18px, AND IT IS THE SAME DEFECT THE WAITING STATE HAD (2026-09-09). The
   block above moved this dialog's whole tail down to clear the reel and moved
   the buttons by less than it moved the caption: #wbc-fine landed at 182 and
   the keys stayed at 186, so the caption had FOUR pixels of a twelve pixel
   line. The ordinary confirm gives it 22 (fine 174, keys 196) and that is the
   number this now uses, so every reveal that carries a fairness caption reads
   it whole instead of through a button.

   THE WINDOW GREW BY 18px AND THAT IS THE HONEST DIRECTION. House law is never
   to resize an APP window; #wbconfirm's .w95-scale has never had a fixed height
   at all - it is calc() off --wbc-rows in six different class combinations,
   because the dialog is sized by what is in it. At four rows this lands on 312
   against the ordinary confirm's 310, which is the shape it should always have
   had: the reveal shows the same tail as every other confirm plus a reel.
   Taking the caption out instead would have deleted the only pointer to
   provably_fair.exe the bench has. */
#wbconfirm.mreel #wbc-ok,
#wbconfirm.mreel #wbc-alt,
#wbconfirm.mreel #wbc-no {
  top: calc(204px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px));
  margin-top: 0;
}
#wbconfirm.mreel .w95-scale { height: calc(252px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.mreel.waiting #wbc-pnote { visibility: hidden; }

#wbconfirm.mreel .w95-scale { transition: height 320ms ease; }
#wbconfirm.mreel.waiting .w95-scale { height: calc(206px + var(--rcp, 0px)); }
#wbconfirm.mreel.waiting #wbc-hr2 { display: none !important; }
/* AND THE PROOF WAITS FOR THE REVEAL. In the waiting state the stats block sat
   at 158 under a 206px window, so the seed and the hash were painted through
   the Reveal button and out of the bottom of the frame. It also had no
   business being there: the point of a commit-reveal is that you check the
   seed against the hash AFTER the strip stops. */
#wbconfirm.mreel.waiting #wbc-stats { display: none; }
#wbconfirm.mreel.waiting #wbc-groove2 { top: calc(154px + var(--rcp, 0px)); }
/* AND THE CAPTION WAITS FOR THE REVEAL TOO (owner, playing, 2026-09-09).
   The rule above hides the stats for the reason in its own comment, and this
   line was the fourth member of that family that nobody added. Two separate
   things were wrong with it:

   IT WAS PAINTED THROUGH THE BUTTON. It sat at 160 with REVEAL at 164, so a
   ~12px line had 4px of room and the key covered the rest of it. That is the
   clipped text in the owner's screenshot.

   AND IT NAMED SOMETHING THAT IS NOT ON SCREEN YET. The sentence is "Click the
   picture for the seeds and the blockhash" - and in the waiting state there is
   no picture, there is a spinning reel. The receipt door it points at
   (armFairDoor, on #wbc-well) is exactly as unavailable as the stats block
   above: the seeds are only worth reading once the strip has stopped.

   So it goes with the rest of the proof, and comes back with it. Nothing moves:
   the buttons and the window height are untouched, the row simply is not
   drawn while the reel is running. */
#wbconfirm.mreel.waiting #wbc-fine { display: none; }
#wbconfirm.mreel.waiting #wbc-ok,
#wbconfirm.mreel.waiting #wbc-alt,
#wbconfirm.mreel.waiting #wbc-no { top: calc(164px + var(--rcp, 0px)); }

#wbconfirm.finebox #wbc-fine {
  left: 10px;
  width: 260px;
  height: 22px;
  box-sizing: border-box;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
  color: #6b6658;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
}

#wbconfirm.finebox #wbc-fine b {
  font-weight: 700;
  font-size: 12px;
  color: #b8860b;
}

#wbconfirm.norows.finebox #wbc-fine { top: calc(162px + var(--rcp, 0px)); }
#wbconfirm.norows.finebox #wbc-ok,
#wbconfirm.norows.finebox #wbc-alt,
#wbconfirm.norows.finebox #wbc-no {
  top: calc(192px + var(--rcp, 0px));
  margin-top: 0;
}
#wbconfirm.norows.finebox .w95-scale { height: calc(218px + var(--rcp, 0px)); }

/* THE FINE LINE UNDER THE KEYS (owner, 2026-08-28). The keys move up into the
   space the caption had and the caption takes the gap below them - the same
   swap #pvresult.finelow makes, and named the same so there is one idea here
   rather than two. THE WINDOW HEIGHT DOES NOT MOVE: the keys end at 198 and
   the caption at 219, inside the 230 the box already had. wbConfirm() also
   suppresses .finetall while this is on, since both want the same 25px. */
#wbconfirm.finelow #wbc-ok,
#wbconfirm.finelow #wbc-no { top: calc(174px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.finelow #wbc-fine { top: calc(204px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }

#wbconfirm.finetall #wbc-ok,
#wbconfirm.finetall #wbc-no { top: calc(209px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.finetall .w95-scale { height: calc(251px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.finetall.three .w95-scale { height: calc(279px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.finetall.three #wbc-alt { top: calc(209px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.finetall.three #wbc-no { top: calc(235px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }

#pvresult.verify.nofine #pvr-ok,
#pvresult.verify.nofine #pvr-verify { top: calc(176px + var(--pvr-rows, 4) * 15px); }
#pvresult.verify.nofine .w95-scale { height: calc(208px + var(--pvr-rows, 4) * 15px); }

#pvresult.finelow #pvr-ok,
#pvresult.finelow #pvr-no { top: calc(172px + var(--pvr-rows, 4) * 15px) !important; }
#pvresult.finelow #pvr-fine { top: calc(200px + var(--pvr-rows, 4) * 15px) !important; }

#pvresult.inlay-fill.finelow #pvr-ok,
#pvresult.inlay-fill.finelow #pvr-no { top: calc(var(--inh) - 26px) !important; }

#wb-odds .pw-odds-row {
  line-height: 11px;
  font-size: 9px;
  padding: 5px 2px;
}

#wbconfirm.three.onebtn #wbc-ok { width: 127px; }
#wbconfirm.three.onebtn .w95-scale { height: calc(238px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }
#wbconfirm.nofine.three.onebtn .w95-scale { height: calc(222px + var(--wbc-rows, 4) * 15px + var(--rcp, 0px)); }

.ii-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 16px;
  color: #6a6a5e;
  font-size: 10px;
  white-space: nowrap;
}
.ii-divider::before,
.ii-divider::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(to bottom, #c9c4ae 0 1px, #fff 1px 2px);
}

.ii-divider.bare { gap: 0; }

#pwinfo {
  width: 528px;
  height: calc((128px + var(--pwi-rows, 8) * 16px) * 2);
  left: 700px;
  top: 200px;
}

#pwinfo .w95-scale {
  width: 264px;
  height: calc(128px + var(--pwi-rows, 8) * 16px);
}

#pwi-well {
  position: absolute;
  top: 24px;
  left: 10px;
  width: 48px;
  height: 48px;
  background: #fff;
  display: grid;
  place-items: center;
}

#pwi-icon {
  width: 46px;
  height: 46px;
  image-rendering: pixelated;
}

#pwi-name {
  position: absolute;
  top: 28px;
  left: 66px;
  width: 186px;
  font-size: 12px;

  line-height: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pwi-cool {
  position: absolute;
  top: 46px;
  left: 66px;
}

#pwi-stats {
  position: absolute;
  top: 78px;
  left: 10px;
  width: 244px;
}

#pwi-stats .ii-divider { color: #000; }

#pwi-stats .pv-kv {
  height: 16px;
  box-sizing: border-box;
  align-items: center;
  padding: 0;
}
#pwi-stats .pv-kv + .pv-kv { border-top: 1px solid #dcd7c4; }

#pwi-note {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(84px + var(--pwi-rows, 8) * 16px);
}

#pwi-hr2 {
  position: absolute;
  top: calc(86px + var(--pwi-rows, 8) * 16px);
  left: 10px;
  width: 244px;
}

#pwinfo-ok {
  top: calc(96px + var(--pwi-rows, 8) * 16px);
  left: 10px;
  width: 244px;
}

#dropwheel .w95-scale { width: 264px; height: 262px; }

#dw-kicker {
  position: absolute;
  top: 26px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 10px;
}

#dw-stage {
  top: 42px;
  background: radial-gradient(ellipse at 50% 46%, #1d2030 0%, #101014 70%);
}

#dw-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  opacity: 0;
  transition: opacity 0.4s ease-out;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.085) 0deg 10deg,
    transparent 10deg 20deg);
  animation: dw-turn 22s linear infinite;
  pointer-events: none;
}
@keyframes dw-turn { to { transform: rotate(360deg); } }
#dropwheel.revealed #dw-rays { opacity: 1; }

#dw-q { animation: dw-pulse 2.2s ease-in-out infinite; }
@keyframes dw-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

#dropwheel.revealed #dw-icon { animation: dw-land 0.42s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes dw-land {
  from { transform: scale(0.2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

#dw-rarity {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity 0.3s ease-out 0.2s;
}
#dropwheel.revealed #dw-rarity { opacity: 1; }

#dw-groove { top: 172px; width: 240px; }
#dw-result { top: 182px; }
#dw-sub { top: 198px; }
#dw-spin { top: 226px; }
#dropwheel.revealed #dw-spin { top: 226px; }

#pvpsinfo {
  width: 560px;
  height: 460px;
  left: 700px;
  top: 260px;
  z-index: 47;
}
#pvpsinfo .w95-scale {
  width: 280px;
  height: calc(132px + var(--pvsi-rows, 4) * 15px);
}
#pvsi-well {
  background: #fff;
  display: grid;
  place-items: center;
}
#pvsi-img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}
#pvsi-stats {
  position: absolute;
  top: 86px;
  left: 10px;
  width: 260px;
}
#pvsi-stats .pv-kv { padding: 1px 0; }
#pvsi-groove2 { top: calc(90px + var(--pvsi-rows, 4) * 15px); }
#pvsi-ok {
  top: calc(100px + var(--pvsi-rows, 4) * 15px);
  left: 10px;
  width: 260px;
}

#pvrent-img, #pvsi-img, #pvr-img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}
#pvrent-well, #pvsi-well, #pvr-well { background: #fff; }

/* THE DEV CONSOLE'S STYLE RULES ARE DELETED (batch 16, BACKEND.md ops-3).
   About a hundred lines sat here: a two-column window, its section headings,
   its lever rows and the small number inputs beside them. The window, its
   script and its desk icon are gone, so nothing selects any of it. */

#pw-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#pw-name-input { flex: none; width: 148px; height: 24px; }

#paywall.has-err #pw-name-hint { visibility: hidden; }

.w95-input {
  flex: 1;
  min-width: 0;
  height: 24px;
  background: #fff;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #000,
    inset -2px -2px 0 #dfdfdf;
  border: 0;
  padding: 0 6px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 12px;
  color: #000;
  caret-color: #316ac5;
  outline: 0;
}

#pw-dice-img,
#pe-dice-img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
  display: block;
}

#pw-name-dice.icon-key.k20 { width: 30px; }
#pw-dice-img { width: 22px; height: 22px; }

#social-list,
#aff-board {
  position: absolute;
  left: 10px;
  width: 320px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #7f9db9;
  box-sizing: border-box;
  padding: 2px;
  overflow: hidden;
}

#social-list {
  top: 46px;
  height: 292px;
}

#aff-board {
  top: 266px;
  height: 120px;

  padding: 1px 0 1px 2px;
}

.soc-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px 0 4px;

  height: 26px;
  box-sizing: border-box;
  cursor: default;
}

.soc-face {
  width: 20px;
  height: 20px;
  flex: none;
  image-rendering: pixelated;
  box-sizing: border-box;
  border: 1px solid #9a9482;
  background: #fff;
}
/* .soc-hid DELETED 2026-09-03 (R8-NET-01). Driven live: the CBTC Client SOCIAL
   tab was rendered with the podium, the mined board and the referrals board,
   and nothing carried it. */

.soc-row.m1, .soc-row.m2, .soc-row.m3 { position: relative; }
.soc-row.m1 { background: #fdf6e0; box-shadow: inset 0 0 0 2px #c9a233, inset 0 1px 0 1px #fdf3c8; }
.soc-row.m2 { background: #f6f7f8; box-shadow: inset 0 0 0 2px #a7adb3, inset 0 1px 0 1px #fbfbfa; }
.soc-row.m3 { background: #fbf1e5; box-shadow: inset 0 0 0 2px #b0824a, inset 0 1px 0 1px #f6e6cf; }

.soc-row.me {
  position: relative;
  box-shadow: inset 0 0 0 2px #4a7fd0, inset 0 1px 0 1px #dbe7fb;
}
.soc-row.me.m1, .soc-row.me.m2, .soc-row.me.m3 {
  background: #eef4ff;
  box-shadow: inset 0 0 0 2px #4a7fd0, inset 0 1px 0 1px #dbe7fb;
}

.soc-row + .soc-row { border-top: 1px solid #eceade; }
.soc-row:hover { background: #e8eef8; }

.soc-row.me { background: #eef4ff; font-weight: 700; }

.soc-rank {
  width: 22px;
  font-size: 10px;
  flex: none;
  text-align: right;
  color: #6c6c6c;
}

.soc-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .soc-chip and .soc-chip.chad DELETED 2026-09-03 (R8-NET-01). A CHUD/CHAD
   badge on a leaderboard row that nothing builds; the class shown beside a
   player's name lives on the profile card, not here. */

/* ONE LINE, ALWAYS. 74px could not hold "256.3k $CBTC" and the cell had no
   nowrap on it, so the ticker dropped onto a second line inside a 26px row -
   which then overflowed into the row above and below. The name beside it is
   flex:1 with an ellipsis and gives the width up without complaint. */
.soc-amt {
  width: 92px;
  flex: none;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.soc-find {
  position: absolute;
  left: 10px;
  top: 30px;
  width: 168px;
  height: 22px;
  font-size: 12px;
}

#soc-sort {
  position: absolute;
  left: 184px;
  top: 30px;
  width: 146px;
  height: 22px;
  display: flex;
  gap: 2px;
}
.soc-seg {
  flex: 1 1 0;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 2px;
  font: inherit;

  font-size: 9px;
  color: #000;
  cursor: pointer;
  background: linear-gradient(#fff 0 20%, #f3f2ed 20% 55%, #e5e1d4 55% 88%, #d8d0c1 88%);
  box-shadow: inset 0 0 0 1px #5f83b9;
}
.soc-seg.on {
  font-weight: 700;
  background: linear-gradient(#cfc9ba 0 20%, #ddd8c9 20% 55%, #e9e5d8 55% 88%, #f2efe4 88%);
  box-shadow:
    inset 1px 1px 0 #8e887a,
    inset -1px -1px 0 #fff,
    inset 0 0 0 1px #5f83b9;
}

.soc-podium {
  background: #ece9d8;
  margin: -2px -11px 0 -2px;
  padding: 6px 13px 0 6px;
  height: 92px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
/* .soc-podium-hr DELETED 2026-09-03 (R8-NET-01), with its `display: none`
   override further down. A rule and its own override, both dead, is the shape
   this sweep is for. Driven live: the podium rendered with a real player on it
   and no rule element exists. */

.pod-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default;
}

.pod-well {
  width: 36px;
  height: 36px;
  background: #fff;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}

.pod-face {
  image-rendering: pixelated;
  display: block;
  box-sizing: border-box;
  border: none;
  background: #fff;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(0, 0, 0, 0.28),
    0 0 0 1px #6e6a60,
    1px 1px 0 rgba(0, 0, 0, 0.3);
}

.pod-name {
  width: 100%;
  height: 12px;
  line-height: 12px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-val {
  width: 100%;
  height: 12px;
  line-height: 12px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: #a1520a;
  overflow: hidden;
  white-space: nowrap;
}

.pod-col.me .pod-name { color: #a1520a; }

.pod-plinth {
  width: 100%;
  color: #fff;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
}
.pod-plinth.g {
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  background: linear-gradient(to bottom,
    #f2e2a6 0 2px, #d9bb52 2px 5px, #bf9c2e 5px 9px, #9a7b1c 9px 100%);
  box-shadow: inset 1px 1px 0 #fbf3d0, inset -1px -1px 0 #7d6216;
  text-shadow: 1px 1px 0 #7d6216;
}
.pod-plinth.s {
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  background: linear-gradient(to bottom,
    #f2f2f0 0 2px, #cfd3d6 2px 5px, #b0b6bb 5px 9px, #8d9399 9px 100%);
  box-shadow: inset 1px 1px 0 #fbfcfd, inset -1px -1px 0 #737a80;
  text-shadow: 1px 1px 0 #6b7278;
}
.pod-plinth.b {
  height: 12px;
  line-height: 12px;
  font-size: 10px;
  background: linear-gradient(to bottom,
    #eddabc 0 2px, #c99a63 2px 5px, #a87840 5px 9px, #855c2c 9px 100%);
  box-shadow: inset 1px 1px 0 #f7e9d6, inset -1px -1px 0 #6d4a22;
  text-shadow: 1px 1px 0 #66451f;
}

.soc-empty {
  padding: 14px 0;
  text-align: center;
  font-size: 11px;
  color: #9a9a9a;
}

#soc-you {
  position: absolute;
  left: 10px;
  top: 340px;
  width: 320px;
  height: 20px;
  box-sizing: border-box;
  padding: 0 6px 0 4px;
  background: #ece9d8;
  border-top: 1px solid #c9c4ae;
  box-shadow: inset 3px 0 0 #a1520a;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  cursor: default;
}
#soc-you .you-note {
  flex: none;
  font-weight: 400;
  color: #6c6c6c;
  font-size: 10px;
}

#profapp.inlay-fill .w95-scale { width: var(--inw); height: var(--inh); }

#profapp.inlay-fill .w95-scale {

  --pf-head: 0px;

  --pf-drop: calc(var(--pf-head)
    + max(0px, calc((var(--inh) - 308px - var(--pf-head) - var(--pf-liveb, 0) * 1px) / 2)));
}

#profapp.inlay-fill:not(.inlaid) .w95-scale { --pf-head: 21px; }
#profapp.inlay-fill #pf-well,
#profapp.inlay-fill #pf-name,
#profapp.inlay-fill #pf-state,
#profapp.inlay-fill #pf-desc,
#profapp.inlay-fill #pf-hr1,
#profapp.inlay-fill #pf-livehost,
#profapp.inlay-fill #pf-riglabel,
#profapp.inlay-fill #pf-reclabel,
#profapp.inlay-fill #pf-hash,
#profapp.inlay-fill #pf-hr-rig,
#profapp.inlay-fill #pf-hr2,
#profapp.inlay-fill #pf-parts,
#profapp.inlay-fill #pf-rec,
#profapp.inlay-fill #pf-hr-gpu,
#profapp.inlay-fill #pf-gpu-label,
#profapp.inlay-fill #pf-gpus {
  translate: 0 var(--pf-drop);
}

#profapp.inlay-fill #pf-well {
  top: 8px !important;
  left: 11px !important;
  width: 56px;
  height: 56px;
}
#profapp.inlay-fill #pf-well .pf-face { width: 56px !important; height: 56px !important; }
#profapp.inlay-fill #pf-name {
  top: 9px !important; left: 75px !important; width: 251px !important;
  font-size: 15px; line-height: 19px;
}
#profapp.inlay-fill #pf-state {
  top: 28px !important; left: 75px !important; width: 251px !important;
  font-size: 12px; line-height: 17px;
}
#profapp.inlay-fill #pf-desc {
  top: 45px !important; left: 75px !important; width: 251px !important;
  font-size: 12px; line-height: 17px;
}
#profapp.inlay-fill #pf-livehost { top: 70px !important; left: 10px !important; width: 316px !important; }

#profapp.inlay-fill .pf-live {
  height: 58px;
  padding: 4px;
  gap: 4px;
  font-size: 13px;
}
#profapp.inlay-fill .pf-l1 {
  height: 24px;
  padding: 0 8px;
  font-size: 13px;
}
#profapp.inlay-fill .pf-l2 {
  height: 22px;
  padding: 0 4px;
  line-height: 22px;
  font-size: 13px;
}

#profapp.inlay-fill .pf-trough { height: 16px; }
#profapp.inlay-fill #pf-hr1 {
  top: calc(74px + var(--pf-liveb, 0) * 1px) !important;
  left: 10px !important;
  width: 316px !important;
}

#profapp.inlay-fill #pf-riglabel,
#profapp.inlay-fill #pf-reclabel,
#profapp.inlay-fill #pf-hr2,
#profapp.inlay-fill #pf-hr-rig { display: none !important; }

#profapp.inlay-fill #pf-hash {
  top: calc(168px + var(--pf-liveb, 0) * 1px) !important;
  background: #eceadf;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
  left: 192px !important;

  right: auto !important;
  margin-top: 0 !important;

  z-index: 1;

  width: 130px !important;

  height: 30px;
  box-sizing: border-box;
  font-size: 22px;

  line-height: 30px;
  font-weight: 700;
  text-align: center;

  white-space: nowrap;
  overflow: hidden;
}

#profapp.inlay-fill #pf-parts,
#profapp.inlay-fill #pf-rec {
  top: calc(80px + var(--pf-liveb, 0) * 1px) !important;
  height: 128px;
  box-sizing: border-box;
  padding: 4px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#profapp.inlay-fill #pf-parts {
  left: 188px !important;
  width: 138px !important;
}

#profapp.inlay-fill #pf-parts::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 4px;
  background: linear-gradient(#c9c4ae 0 1px, #fbf9f1 1px 2px);
}

#profapp.inlay-fill #pf-parts .pv-kv,
#profapp.inlay-fill #pf-rec .pv-kv { height: 24px; }

#profapp.inlay-fill #pf-hr-gpu {
  top: calc(214px + var(--pf-liveb, 0) * 1px) !important;
  left: 10px !important;
  width: 316px !important;
}

#profapp.inlay-fill #pf-gpu-label {
  top: calc(227px + var(--pf-liveb, 0) * 1px) !important;
  left: 10px !important;
  width: 44px !important;
  font-size: 16px;
}

#profapp.inlay-fill #pf-gpus {
  top: calc(222px + var(--pf-liveb, 0) * 1px) !important;
  left: 56px !important;
  width: 270px !important;
  justify-content: flex-end;
}
#profapp.inlay-fill #pf-gpus .pf-gpu {
  width: 42px;
  height: 42px;
}
#profapp.inlay-fill #pf-rec {
  left: 10px !important;
  width: 168px !important;
}

#profapp.inlay-fill #pf-rec .k {
  min-width: 0;
  padding-right: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#profapp.inlay-fill #pf-rec .v { flex: none; }

#profapp.inlay-fill #pf-hr3 {
  top: calc(var(--inh) - 38px) !important;
  left: 10px !important;
  width: 316px !important;
}

#profapp.inlay-fill #pf-chain,
#profapp.inlay-fill #pf-close,
#profapp.inlay-fill #pf-desc-btn {
  top: calc(var(--inh) - 32px) !important;
  height: 26px !important;
}

#profapp.inlay-fill #pf-chain { left: 10px !important; width: 156px !important; }
#profapp.inlay-fill #pf-close { left: 170px !important; width: 156px !important; }

/* `#profapp.inlay-fill #pf-quit { display: none !important; }` STOOD HERE, and
   #pf-quit was on the shared rule below. Both are deleted (R8-DEAD,
   2026-09-03) with the button. It was a second, permanently hidden "Close"
   that nothing in js/ ever un-hid, so this rule was hiding an element that was
   already hidden - the tell that somebody had believed it could appear. The
   gravestone is in index.html beside #pf-close. */

#profapp.inlay-fill #pf-chain,
#profapp.inlay-fill #pf-close,
#profapp.inlay-fill #pf-desc-btn {
  box-sizing: border-box;
  padding: 0 !important;

  font-size: 13px !important;
  white-space: nowrap;
}

/* EDIT PROFILE IS THE SAME BUTTON AS BACK (owner, 2026-08-24). It was 102px
   against Back's 156px, so your own profile ended on a stubby button beside a
   wide one while a STRANGER's profile - where View on-chain takes the same
   slot - was a clean matched pair. It takes View on-chain's exact geometry
   now, because it stands in exactly the same place: the left half of a
   two-button row whose right half is Back. The row's outer edges do not move,
   so the window does not change size. */
#profapp.inlay-fill.own #pf-desc-btn { left: 10px !important; width: 156px !important; }

#profapp {
  width: 509px;
  height: calc(618px + var(--pf-live, 0) * 1.72px);
  left: 700px;
  top: 90px;
}

#profapp.inlay-fill:not(.inlaid) { width: 571px; }
#pf-reclabel { display: none; }
#profapp .w95-scale {
  width: 296px;
  height: calc(359px + var(--pf-live, 0) * 1px);
  transform: scale(1.72);
}

#pf-well {
  position: absolute;
  top: 31px;
  left: 12px;
  width: 42px;
  height: 42px;
  background: #fff;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}

#pf-well.m1 { box-shadow: inset 0 0 0 3px #c9a233, inset 0 0 0 4px #fdf3c8; }
#pf-well.m2 { box-shadow: inset 0 0 0 3px #a7adb3, inset 0 0 0 4px #fbfbfa; }
#pf-well.m3 { box-shadow: inset 0 0 0 3px #b0824a, inset 0 0 0 4px #f6e6cf; }

#pf-well.m1 .pf-face,
#pf-well.m2 .pf-face,
#pf-well.m3 .pf-face { width: 34px !important; height: 34px !important; }
.pf-face {
  image-rendering: pixelated;
  display: block;
  box-sizing: border-box;
  border: 1px solid #9a9482;
  background: #fff;
}

#pf-name {
  position: absolute;

  top: 29px;
  left: 60px;
  width: 226px;
  font-size: 13px;
  line-height: 17px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pf-state {
  position: absolute;
  top: 46px;
  left: 60px;
  width: 226px;
  font-size: 11px;
  line-height: 15px;
}

#pf-state b + span { position: relative; top: -1px; }
#pf-desc {
  position: absolute;
  top: 61px;
  left: 60px;
  width: 226px;
  font-size: 11px;
  line-height: 15px;
  color: #6c6c6c;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pf-hr1 { position: absolute; top: calc(83px + var(--pf-live, 0) * 1px); left: 10px; width: 276px; }

#pf-livehost { position: absolute; top: 79px; left: 10px; width: 276px; }
.pf-live {
  height: 42px;
  box-sizing: border-box;
  padding: 3px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
  font-size: 11px;
}
.pf-l1 {
  flex: none;
  height: 16px;
  box-sizing: border-box;
  padding: 0 5px;
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-l2 {
  flex: none;
  height: 14px;
  padding: 0 3px;
  display: flex;
  align-items: center;

  gap: 0;
  line-height: 14px;
  color: #3a352c;
}

.pf-trough {
  flex: 1;

  height: 12px;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px #7f9db9;
  padding: 1px;
}

.pf-trough.hot { box-shadow: inset 0 0 0 1px #7d1b12; }
.pf-trough.hot .pf-fill {
  background: linear-gradient(#e0644f 0 33%, #c22a1c 33% 67%, #7d1b12 67% 100%);
}

.pf-trough.short { flex: 1000 1 auto; max-width: 176px; min-width: 0; }

.pf-trough.warm { box-shadow: inset 0 0 0 1px #a1520a; }

.pf-fill {
  height: 100%;
  background: linear-gradient(#f0a860 0 33%, #d2691e 33% 67%, #a1520a 67% 100%);
}

.pf-left {

  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  padding: 0 4px;
  color: #3a352c;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

#pf-riglabel {
  position: absolute;
  top: calc(95px + var(--pf-live, 0) * 1px);
  left: 10px;
  font-size: 15px;
}
#pf-hr-rig { position: absolute; top: calc(111px + var(--pf-live, 0) * 1px); left: 10px; width: 276px; }

#pf-hash {
  position: absolute;
  margin-top: -3px;
  top: calc(95px + var(--pf-live, 0) * 1px);
  left: auto;
  right: 12px;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}

#pf-gpus {
  position: absolute;

  top: calc(182px + var(--pf-live, 0) * 1px);
  left: 10px;
  width: 276px;
  display: flex;

  justify-content: flex-end;

  gap: 3px;

  align-items: center;
}

#pf-hr-gpu { position: absolute; top: calc(174px + var(--pf-live, 0) * 1px); left: 10px; width: 276px; }

#pf-gpu-label {
  position: absolute;
  top: calc(182px + var(--pf-live, 0) * 1px);
  left: 10px;
  height: 32px;
  line-height: 32px;
  font-size: 15px;
  font-weight: 700;
}

.pf-gpu {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}

.pf-gpu.empty {
  background: #eae7db;
  box-shadow: inset 1px 1px 0 #9a9482, inset -1px -1px 0 #fff;
}
.pf-gpu img,
.pf-gpu canvas { image-rendering: pixelated; display: block; }

.pf-cube {
  display: inline-block;
  margin-right: 6px;
  vertical-align: baseline;
}

#pf-parts .pv-kv, #pf-rec .pv-kv {
  padding: 0;
  height: 17px;
  box-sizing: border-box;
  align-items: center;
}

#pf-parts .pf-dots {
  flex: none;
  width: 3px;
  height: 3px;
  margin: 0 5px;
  background-image: linear-gradient(#8f8a7c 0 0);
  background-size: 3px 3px;
  background-position: center;
  background-repeat: no-repeat;
}
#pf-parts .pv-kv .v { flex: none; margin-right: auto; }

#pf-parts .pv-kv + .pv-kv, #pf-rec .pv-kv + .pv-kv { border-top: 1px solid #dcd7c4; }

#pf-parts { position: absolute; top: calc(117px + var(--pf-live, 0) * 1px); left: 10px; width: 276px; }
#pf-hr2 { position: absolute; top: calc(220px + var(--pf-live, 0) * 1px); left: 10px; width: 276px; }
#pf-rec { position: absolute; top: calc(226px + var(--pf-live, 0) * 1px); left: 10px; width: 276px; }
#pf-hr3 { position: absolute; top: calc(317px + var(--pf-live, 0) * 1px); left: 10px; width: 276px; }

#pf-chain, #pf-desc-btn, #pf-close {
  top: calc(325px + var(--pf-live, 0) * 1px);
  height: 22px;
  font-size: 13px;
}

#pf-chain { left: 10px; width: 133px; }
#pf-close { left: 153px; width: 133px; }

#profapp.own #pf-chain { display: none; }

#profapp.own #pf-desc-btn { left: 10px; width: 133px; }
#profapp.own #pf-close { left: 153px; width: 133px; }

@media (max-height: 900px), (max-width: 1100px) {
  #tut-raj { width: 306px; right: 16px; bottom: 76px; }
  #tut-raj-cv { width: 300px; height: 384px; }
  #tut-plate { font-size: 14px; line-height: 24px; }
  #tut-bubble {
    right: 330px;
    bottom: 250px;
    width: min(480px, calc(100vw - 354px));
    font-size: 21px;
    line-height: 27px;
  }
  #tut-hint {
    bottom: 190px;
    right: 330px;
    width: min(480px, calc(100vw - 354px));
    font-size: 18px;
  }
  #tut-key { width: 136px; height: 34px; }
  #tut-key-label { font-size: 15px; }
  #tut-prog { width: 136px; flex-basis: 136px; height: 17px; margin: 2px 0 5px; }

  #tut-reskip { right: 330px; bottom: 130px; }

  #tutorial { --tour-col: 330px; }
}

@media (max-height: 560px), (max-width: 700px) {
  #tut-raj { width: 206px; right: 10px; bottom: 4px; }
  #tut-raj-cv { width: 200px; height: 256px; }
  #tut-plate { font-size: 12px; line-height: 20px; margin-top: 4px; }
  #tut-bubble {
    right: 224px;
    bottom: 96px;
    width: min(420px, calc(100vw - 240px));
    font-size: 15px;
    line-height: 20px;
  }

  /* THE TOUR'S OWN MINIMUM IS 11 PIXELS AND THE DOCKED BUBBLE WAS UNDERCUTTING
     IT (R3-19, A8-R3-03).
     -------------------------------------------------------------------
     js/tutorial.js has TWO floors on this text and they disagreed. fitLine()
     declares LINE_MIN_PX = 11 and will not shrink a line past it, whatever it
     costs in height. fitBubble() shrinks PROPORTIONALLY instead - `k =
     max(0.6, px / 380)` against the CSS size - and on a phone every docked
     step lands on that 0.6 exactly, because the room beside a window this
     narrow is always under 228 px. 15 x 0.6 = 9, and 9 is four pixels below
     the size the same file says is the smallest a line may be. Roughly forty
     lines were drawn there, including every instruction the intro chain makes
     a player act on, and the desk lock means they have to be followed.

     So the DOCKED base is raised until the proportional floor lands on the
     declared one rather than under it: 20 x 0.6 = 12, one pixel clear of
     LINE_MIN_PX, and 26 x 0.6 = 16 keeps the 1.30 ratio the 15/20 pair has.
     A LONG LINE CANNOT PUSH IT OFF THE TOP: fitLine() runs after fitBubble on
     every line, shrinks by 12% a step while the box is above y 8, and stops at
     11 - so the worst case here is 11 px, which is still two better than what
     shipped. And the bubble grows UPWARD (it is anchored bottom: 96px), away
     from the taskbar, so this cannot make R3-41 below any worse.

     #tutorial.app IS THE DOCKED STATE AND NOTHING ELSE. js/tutorial.js adds it
     when an app tour parks its window and removes it when the tour box hides,
     so the free-floating desktop lines of the intro - the ones A8 measured at
     a correct 15 px - are not selected here and do not move. NOT A WINDOW
     RESIZE, and not the bubble tracking --win-scale: the bubble is chrome, it
     is not inside a window, and its accumulated scale is 1.000. */
  #tutorial.app #tut-bubble {
    font-size: 20px;
    line-height: 26px;
  }

  #tut-hint {
    right: 224px;
    bottom: 40px;
    width: min(420px, calc(100vw - 240px));
    font-size: 14px;
  }

  /* THE PROGRESS BAR STOPS AT THE TASKBAR (R3-41, A8-R3-04).
     -------------------------------------------------------------------
     #tut-hint is one row 34 px tall whose bottom sits exactly on the taskbar's
     top edge. When the bubble docks too narrow for SPACE and the pips to sit
     side by side, fitBubble() adds .stack, which turns the row into a column
     61 px tall - and it PINS THE TOP while it does it (`hint.style.bottom =
     'auto'; hint.style.top = natTop`, js/tutorial.js), where natTop was
     measured on the one-row version. So the extra 27 px grow DOWNWARD and
     #tut-prog lands at y 343-357 inside a taskbar that occupies y 335-375.
     Nothing else in the game draws over the taskbar.

     Re-anchoring to the same bottom the unstacked hint uses makes the column
     grow upward instead, which is where the empty screen is; the bar ends up
     at y 316-330, five pixels clear. !important because that inline top is
     written by fitBubble every time it stacks and a normal declaration loses
     to it - the reason is named here so the next person in js/tutorial.js can
     move the pin to the bottom and delete these two words.
     ONLY THIS BREAKPOINT NEEDS IT: at the 1100/900 rung the hint sits at
     bottom 190px and at the base at 366px, both far above any taskbar this
     stage can draw, so stacking there has nothing to collide with. */
  #tut-hint.stack {
    top: auto !important;
    bottom: 40px !important;
  }

  /* AND THE BUBBLE GIVES IT THE ROOM, because the room does not otherwise
     exist. Measured at 667x375: the bubble's bottom edge is y 279, the taskbar
     starts at y 335, so there are 56 px between them and a stacked hint is 70
     (against 43 in one row). Something has to move, and the three candidates
     are the hint over the taskbar (what shipped), the hint over the bubble
     (what pinning its bottom alone would cause) or the bubble upward, which is
     the only direction with empty screen in it. 96 + 27 = 123 restores exactly
     the 13 px the unstacked pair has between them.
     A LONG LINE STILL CANNOT RUN OFF THE TOP: fitLine() re-measures after this
     and shrinks the text 12% a step while the box is above y 8. */
  #tut-talk:has(#tut-hint.stack) #tut-bubble {
    bottom: 123px;
  }

  #tut-key { width: 132px; height: 34px; }
  #tut-key-label { font-size: 13px; }

  #tut-prog { width: 132px; flex-basis: 132px; height: 14px; }

  #tut-reskip { right: 224px; bottom: 76px; }
  #tutorial { --tour-col: 216px; }
}

#tutorial { --tour-col: 560px; }

#tutorial.app #tut-spot,
#tutorial.app #tut-spot2 { margin-top: 0; }

body.tut-charging #desktop-stage { animation: tut-shudder 62ms steps(1) infinite; }
@keyframes tut-shudder {
  0%   { translate: 0 0; }
  25%  { translate: 2px -1px; }
  50%  { translate: -1px 2px; }
  75%  { translate: -2px -1px; }
  100% { translate: 1px 1px; }
}

#tut-flash {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
#tut-flash.go { animation: tut-flash var(--flash-ms, 420ms) ease-out 1; }
@keyframes tut-flash {
  0%   { opacity: 0; }
  18%  { opacity: 0.95; }
  100% { opacity: 0; }
}

body.tour-live #pv-locked { display: none !important; }

body.tour-app .desk-icon { visibility: hidden; }

#pwinstall {
  width: 520px;
  height: 200px;
  left: 700px;
  top: 420px;
  z-index: 33;
}

#pwinstall.fading { opacity: 0; transition: opacity 420ms ease-out; }
#pwinstall.fading.in { opacity: 1; }

#pwinstall .w95-scale {
  width: 260px;
  height: 130px;
}
#pwi-pane {
  position: absolute;
  top: 26px;
  left: 10px;
  width: 240px;
  height: 92px;
  box-sizing: border-box;
  background: #fff;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #000,
    inset -2px -2px 0 #dfdfdf;
}

#pwi-canvas {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 236px;
  height: 76px;
  image-rendering: pixelated;
}

#pwi-trough {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 8px;
  height: 10px;
  box-sizing: border-box;
  background: #efeade;

  box-shadow:
    0 0 0 1px #14161c,
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
  overflow: hidden;
}

#pwi-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(
    #f7c98a 0 2px,
    #e5934a 2px 5px,
    #c9762b 5px 8px,
    #a1520a 8px 10px);
  transition: width 180ms linear;
}

.w95-slider {
  height: 12px;
  background: #fff;
  box-shadow:
    inset 1px 1px 0 #808080,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #4a4a4a,
    inset -2px -2px 0 #dfdfdf;
}

.w95-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(
    #ffffff 0 2px, #ece9d8 2px 8px, #d8d2c2 8px 16px, #b9b2a0 16px 22px);
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #7d766a,
    0 0 0 1px #4a4a4a;
}

.w95-slider::-moz-range-thumb {
  width: 12px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(
    #ffffff 0 2px, #ece9d8 2px 8px, #d8d2c2 8px 16px, #b9b2a0 16px 22px);
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #7d766a,
    0 0 0 1px #4a4a4a;
}

.vol-row { padding: 8px 8px 10px; }
.vol-row-2 { padding-top: 0; }

#aff-board { top: 246px; height: 112px; }

#tut-bubble,
#tut-hint { max-width: min(560px, max(200px, calc(100vw - 580px))); }

@media (max-height: 900px), (max-width: 1100px) {
  #tut-bubble,
  #tut-hint { max-width: min(480px, max(160px, calc(100vw - 354px))); }
}
@media (max-height: 560px), (max-width: 700px) {
  #tut-bubble,
  #tut-hint { max-width: min(420px, max(160px, calc(100vw - 240px))); }
}

#profedit {
  width: 600px;
  height: 608px;
  left: 640px;
  top: 180px;
  z-index: 36;
}
#profedit .w95-scale { width: 300px; height: 304px; }

/* `.pe-head { font-weight: 700; }` STOOD HERE and is deleted (R8-DEAD,
   2026-09-03). Its only user in the whole repo was a second, hidden "Photo"
   heading in index.html duplicating the live .pe-phead directly above it.
   #profedit's own size is untouched: 600x608, .w95-scale 300x304. */

#pe-preview {
  position: absolute;
  top: 30px;
  left: 10px;
  width: 280px;

  height: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
  background: linear-gradient(#f2efe4 0 2px, #e4e0d2 2px 100%);
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}

#pe-pv-well {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: none;
  box-shadow: inset 1px 1px 0 #a8a294, inset -1px -1px 0 #fff;
}
#pe-pv-face { width: 22px; height: 22px; image-rendering: pixelated; display: block; }
#pe-pv-txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 13px;
}
#pe-pv-name {
  font-size: 13px;
  color: #1c1c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 2px;
  margin-bottom: -2px;
}
#pe-pv-desc {
  font-size: 10px;
  color: #6b675c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pe-pv-desc.empty { font-style: italic; color: #a49e8e; }

.pe-panel {
  position: absolute;
  left: 10px;
  width: 280px;
  box-sizing: border-box;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
.pe-phead {
  height: 14px;
  line-height: 14px;
  padding: 0 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5c574c;
  background: linear-gradient(#d8d3c2 0 1px, #cdc8b6 1px 100%);
  box-shadow: inset 0 -1px 0 #fff;
}

#pe-panel-photo { top: 68px; height: 48px; }
#pe-panel-id { top: 122px; height: 70px; }
#pe-panel-bio { top: 198px; height: 54px; }
.pe-sublab {
  position: absolute;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8a8474;
}
#pe-lab-name { top: 144px; left: 18px; }

#pe-faces {
  position: absolute;
  top: 86px;
  left: 13px;
  width: 274px;
  display: flex;
  justify-content: center;
  gap: 4px;
}

#pe-faces .pfp-cell {
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  box-shadow: none;
}

#pe-faces .pfp-cell img { width: 24px; height: 24px; }
#pe-faces .pfp-cell:hover { background: rgba(49, 106, 197, 0.16); }
#pe-faces .pfp-cell.on {
  background: #316ac5;
  box-shadow: none;
}

/* 264, NOT 146 (owner, 2026-08-28). The row was short because LINK X/TWITTER
   sat beside it at left 176, and with that button deleted the right 118px of
   the IDENTITY panel was empty - directly above a bio field that runs the full
   18..282. #pe-name is flex:1, so widening the row to the bio's own width is
   the whole fix: the input grows to meet it and the dice keeps its place at
   the end. */
#pe-name-row {
  position: absolute;
  top: 158px;
  left: 18px;
  width: 264px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#pe-bio {
  position: absolute;
  top: 216px;
  left: 18px;
  width: 264px;
  box-sizing: border-box;
}

#pe-save,
#pe-discard { box-sizing: border-box; font-size: 12px; }

#bank-edit {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background: none;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
}
#bank-edit:hover {
  background-image: none;
  background-color: rgba(49, 106, 197, 0.16);
  box-shadow: inset 0 0 0 1px #6f9fdc;
  transform: none;
}
#bank-edit:active {
  background-image: none;
  background-color: rgba(49, 106, 197, 0.3);
  box-shadow: inset 0 0 0 1px #3f77bd;
  transform: none;
}

#modal-veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.w95-slider::-webkit-slider-thumb { width: 8px; height: 20px; }
.w95-slider::-moz-range-thumb { width: 8px; height: 20px; }
.vol-row { padding: 8px 10px 10px 8px; gap: 10px; }
.vol-label { width: 50px; }

#social-pane {
  position: absolute;
  left: 10px;
  top: 44px;
  width: 320px;
  height: 314px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: inset 0 0 0 1px #7f9db9;
  padding: 2px;
}

#social-list {
  position: absolute;
  left: 2px;
  top: 2px;
  right: 2px;
  bottom: 22px;
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

#soc-you {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  top: auto;
  width: auto;
  height: 20px;
  box-sizing: border-box;
  padding: 0 4px 0 2px;
  background: #ece9d8;
  border-top: 1px solid #c9c4ae;
  box-shadow: inset 3px 0 0 #a1520a;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: default;
}

.soc-row { padding: 0 4px 0 2px; gap: 4px; }
.soc-rank { width: 20px; }

.soc-podium {
  margin: 0 0 0 0;
  padding: 4px 6px 0 6px;
  height: 96px;
  border-bottom: 2px solid #c9c4ae;
  box-shadow: inset 0 -3px 0 #f6f4ea;
}
/* the .soc-podium-hr override that stood here went with its rule, above. */

.pod-well {
  width: 40px;
  height: 40px;
  padding: 2px 4px 6px;
}
.pod-well.medal-g {
  background: linear-gradient(
    #fdf3c8 0 2px, #e8c85c 2px 5px, #c9a233 5px 8px, #9a7b1c 8px 100%);
  box-shadow:
    inset 0 0 0 1px #fffbe6,
    inset 0 0 0 4px #b8942a,
    0 1px 0 #7d6216;
}
.pod-well.medal-s {
  background: linear-gradient(
    #fbfbfa 0 2px, #dadee1 2px 5px, #b6bcc1 5px 8px, #8d9399 8px 100%);
  box-shadow:
    inset 0 0 0 1px #fff,
    inset 0 0 0 4px #a7adb3,
    0 1px 0 #737a80;
}
.pod-well.medal-b {
  background: linear-gradient(
    #f6e6cf 0 2px, #d3a76f 2px 5px, #b0824a 5px 8px, #855c2c 8px 100%);
  box-shadow:
    inset 0 0 0 1px #fdf3e6,
    inset 0 0 0 4px #a2794a,
    0 1px 0 #6d4a22;
}

.pod-face {
  width: 32px;
  height: 32px;
  border: 1px solid #14161c;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -1px 0 rgba(0, 0, 0, 0.28);
}

#soc-podium {
  position: absolute;
  left: 10px;
  top: 62px;
  width: 320px;
  height: 104px;
  box-sizing: border-box;

  padding: 4px 6px 3px;
  margin: 0;
  background: #e4e0d2;
  border: 0;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

#soc-podium-floor { display: none; }

#social-pane {
  position: absolute;
  left: 10px;
  top: 172px;
  width: 320px;
  height: 209px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: inset 0 0 0 1px #7f9db9;
  padding: 0;
}

#social-list {
  position: absolute;
  left: 1px;
  top: 1px;
  right: 1px;
  bottom: 21px;
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

#soc-you {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  top: auto;
  width: auto;
  height: 22px;
  box-sizing: border-box;
  padding: 0 6px 0 4px;
  background: #eef4ff;
  border-top: 1px solid #7f9db9;
  box-shadow: inset 3px 0 0 #a1520a;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: default;
}
#soc-you .you-note {
  flex: none;
  font-weight: 400;
  color: #6c6c6c;
  font-size: 10px;
}

.pod-col { flex: 1 1 0; }
.pod-col.pod-g { flex: 1.45 1 0; }

.pod-name { font-size: 11px; height: 13px; line-height: 13px; }
.pod-col.pod-g .pod-name { font-size: 12px; height: 14px; line-height: 14px; }
.pod-val { font-size: 11px; height: 12px; line-height: 12px; }

.pod-plinth { margin-top: 4px; }
.pod-plinth.g { height: 24px; line-height: 24px; font-size: 12px; }
.pod-plinth.s { height: 17px; line-height: 17px; font-size: 11px; }
.pod-plinth.b { height: 12px; line-height: 12px; font-size: 10px; }

.pod-well { width: 38px; height: 38px; padding: 4px; }
.pod-face { width: 30px; height: 30px; }
.pod-col.pod-g .pod-well { width: 42px; height: 42px; }
.pod-col.pod-g .pod-face { width: 34px; height: 34px; }

#aff-board { top: 270px; height: 111px; }

.w95-slider::-webkit-slider-thumb { width: 7px; height: 18px; }
.w95-slider::-moz-range-thumb { width: 7px; height: 18px; }
.vol-row { padding: 8px 12px 10px 6px; gap: 6px; }
.vol-label { width: 46px; }

#volume-flyout { z-index: 98; }

#tut-bubble { box-sizing: border-box; }

.pod-col.pod-g { flex: 1.3 1 0; }
.pod-name { font-size: 10px; }
.pod-col.pod-g .pod-name { font-size: 12px; }
.pod-val { font-size: 10px; }
.pod-col.pod-g .pod-val { font-size: 11px; }

#social-pane { height: 209px; }

#social-list {

  left: 1px;
  right: 1px;
  bottom: 1px;
  padding-bottom: 26px;
  box-sizing: border-box;
}

#soc-you {
  left: 1px;

  right: 12px;

  padding: 0 6px 0 2px;

  box-shadow: inset 0 0 0 2px #4a7fd0, inset 0 1px 0 1px #dbe7fb;
  border-top: none;

  height: 26px;

  background-image: none;
  gap: 4px;
}

.soc-rank {
  width: 22px;
  text-align: center;
}

.soc-row { padding: 0 6px 0 2px; }

#aff-board-title {

  box-sizing: border-box;
  text-align: center;
  color: #5a5344;
  text-shadow: 0 1px 0 #f0ecdd;
  background: #dcd7c5;
  box-shadow: inset 1px 1px 0 #b5afa0, inset -1px -1px 0 #f6f3e8;
  padding: 3px 7px 2px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}

#social-pane,
#aff-board {
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#social-list .soc-row:hover,
#aff-board .soc-row:hover { background: #f2efe4; }
#social-list .soc-row + .soc-row,
#aff-board .soc-row + .soc-row { border-top-color: #cfcab8; }
#soc-you { background: #ded9c8; }

.xp-sb[data-sb-for='social-list'],
.xp-sb[data-sb-for='aff-board'] { width: 11px; }
.xp-sb[data-sb-for='social-list'] .xp-sb-btn,
.xp-sb[data-sb-for='aff-board'] .xp-sb-btn { width: 11px; height: 11px; }
.xp-sb[data-sb-for='social-list'] .xp-sb-thumb,
.xp-sb[data-sb-for='aff-board'] .xp-sb-thumb { width: 9px; }

#social-pane .xp-sb { z-index: 3; }
#soc-you { z-index: 2; }

#social-pane:has(#social-list.sb-off) #soc-you { right: 1px; }

.soc-row.m1,
.soc-row.m2,
.soc-row.m3,
.soc-row.m1 + .soc-row,
.soc-row.m2 + .soc-row,
.soc-row.m3 + .soc-row { border-top: none; }

/* .aff-sub DELETED 2026-09-03 (R8-NET-01). Driven live: the AFFILIATES tab was
   rendered before and after generating a real six-digit code and nothing
   carried it. */

#cl-rec-stats {
  position: absolute;

  top: 301px;
  left: 10px;
  width: 418px;
  display: flex;
  align-items: stretch;
}
#cl-rec-stats .cl-rec-cell { flex: 1 1 0; }

/* THE BURNED FIGURE IS THE WIDEST THING IN THIS ROW, SO IT GETS THE ROOM
   (A4-S2). Three equal thirds of 418px leave each cell about 123px of content,
   and "33,000.00 $CBTC" at 15px bold does not fit in it - the DOM held the
   whole string and the cell ellipsised it to "33,000.00 $CB...". It gets worse
   with every roll, because the only direction a burn total moves is up.
   Its neighbours have nothing to lose: "Rolls" is an integer and "Best pull"
   is one word, and neither has ever been close to its third. 1.7 gives the
   middle cell 192px - about 22 characters, so it holds a burn total past
   1,000,000 $CBTC - and leaves the other two 113px each, which is still wider
   than "Legendary".
   THE ROW IS STILL 418px AND THE WINDOW HAS NOT MOVED: this redistributes
   inside a fixed width. */
#cl-rec-stats .cl-rec-cell:nth-child(2) { flex-grow: 1.7; }

.cl-rec-cell {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;

  text-align: center;
  padding: 0 8px;
  overflow: hidden;
}
.cl-rec-cell + .cl-rec-cell { border-left: 1px solid #dcd7c4; }
.cl-rec-cell .n {
  font-size: 15px;
  line-height: 16px;
  font-weight: 700;
  color: #1c1c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  padding: 3px 0;
  margin: -3px 0;
}
.cl-rec-cell .k {
  font-size: 9px;
  line-height: 11px;
  color: #7a7466;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .cl-chip and .cl-chip.fresh DELETED 2026-09-03 (R8-NET-01 / R8-NET-12), with
   .cl-chip's third-selector appearance further up. `.fresh`'s only voucher was
   a `?fresh=` query key in js/api/social.js and a LOCAL VARIABLE named `fresh`
   in js/tutorial.js - neither is a class - and a dependent rule cannot outlive
   the class it qualifies. */

.tab-floor {
  position: absolute;
  top: 46px;
  left: 3px;
  right: 3px;
  height: 2px;
  z-index: 1;
  background: linear-gradient(to bottom, #7a7466 0 1px, #fff 1px 2px);
}
#bank-tabs, #wb-tabs, #rig-tabs { z-index: 2; }

@keyframes tut-icon-pop {
  0%   { transform: scale(1) rotate(0deg); }
  22%  { transform: scale(1.22) rotate(0deg); }
  42%  { transform: scale(1.18) rotate(-3deg); }
  58%  { transform: scale(1.18) rotate(3deg); }
  74%  { transform: scale(1.14) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.desk-icon.tut-pop { animation: tut-icon-pop 0.62s ease-out; }

#tut-demo-cur {
  position: fixed;
  z-index: 1001;
  pointer-events: none;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 0.28s ease;
}
#tut-demo-cur.hidden { display: none; }
#tut-demo-cur.on { opacity: 1; }
#tut-demo-cur.glide { transition: opacity 0.28s ease, left 1.5s ease-in-out, top 1.5s ease-in-out; }

.desk-icon.tut-knock { animation: tut-knock 0.44s steps(1) 2; }
@keyframes tut-knock {
  0%   { translate: 0 0; }
  25%  { translate: 0 2px; }
  50%  { translate: 0 0; }
  75%  { translate: 0 2px; }
  100% { translate: 0 0; }
}

#tut-hint.ready { pointer-events: auto; }
#tut-hint.ready #tut-key { cursor: pointer; }

#tut-raj { z-index: 3; }
#tut-bubble, #tut-hint { z-index: 4; }

#pwi-stats .pv-kv .k { display: flex; align-items: center; }
#pwi-stats .pv-kv .k .pf-cube { margin-right: 6px; flex: none; }

#pwi-stats .ii-divider { margin-top: 3px; }
#pwi-stats .ii-divider:first-child { margin-top: 0; }

.wb-head {
  position: absolute;
  top: 94px;
  left: 10px;
  width: 400px;
  height: 70px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr;

  align-content: start;
  align-items: center;
  row-gap: 3px;
  column-gap: 10px;

  padding: 6px 8px 8px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
.wb-headrule {
  grid-column: 1 / -1;
  height: 2px;
  margin: 0 -2px;
  background: linear-gradient(to bottom, #b3ad9c 0 1px, #fbf9f1 1px 2px);
}

.wb-head-l {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 6px;
}
.wb-head-n {
  font-size: 22px;
  line-height: 22px;
  font-weight: 700;
  color: #a1520a;
}
.wb-head-cap { font-size: 11px; line-height: 12px; color: #5c574c; white-space: nowrap; }

.wb-head-note {
  font-size: 11px;

  color: #5c574c;

  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  padding: 3px 0;
  margin: -3px 0;
  align-self: center;
}

.wb-head-note.msg { color: #1c1c1c; font-weight: 700; }

.wb-bar {
  grid-column: 1 / -1;
  height: 26px;
  display: flex;
  gap: 3px;
}

.wb-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: #1c1c1c;
  background: #f4f2e8;
  box-shadow:
    inset 1px 1px 0 #9a9482,
    inset -1px -1px 0 #fff;
}

.wb-cell b {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 56px;
  font-size: 9px;
  font-weight: 400;
  line-height: 10px;
  color: #6a6558;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.wb-cell span { font-size: 12px; line-height: 12px; font-weight: 700; }
.wb-cell i {
  width: 8px;
  height: 8px;
  display: block;
  flex: none;
  box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.45);
}
.wb-cell.zero { color: #a49f92; background: #eceadf; }
.wb-cell.zero b { color: #b0aa9c; }
.wb-cell.zero i { opacity: 0.35; }

.wb-seg {
  position: absolute;

  top: 194px;
  left: 10px;

  width: 196px;
  height: 21px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  z-index: 2;
}

.wb-seg .w95-button {
  position: static;

  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  height: 19px;
  padding: 0 12px;
  font-size: 11px;
  color: #5c574c;

  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 10px;
  background: linear-gradient(#f2eee0 0 2px, #ddd8c6 2px 60%, #cbc6b3 60%);
  box-shadow: inset 1px 1px 0 #fffdf4, inset -1px -1px 0 #a8a294;
  text-shadow: 0 1px 0 #f6f3e8;
}

#benchapp .wb-seg .w95-button:hover:not(:disabled) {
  background: linear-gradient(#fffdf4 0 2px, #e9e5d5 2px 60%, #d7d2bf 60%);
  box-shadow: inset 1px 1px 0 #fffdf4, inset -1px -1px 0 #a8a294;
}
#benchapp .wb-seg .w95-button.active:hover:not(:disabled) {
  background: linear-gradient(#6a6154 0 2px, #7d7566 2px 60%, #8b8374 60%);
  box-shadow: inset 1px 1px 0 #453f35, inset -1px -1px 0 #a8a294;
}

#benchapp .wb-seg .w95-button:active:not(:disabled) {
  transform: none;
  background: linear-gradient(#ddd8c6 0 2px, #cbc6b3 2px 60%, #bdb8a5 60%);
  box-shadow: inset 1px 1px 0 #a8a294, inset -1px -1px 0 #fffdf4;
}
#benchapp .wb-seg .w95-button.active:active:not(:disabled) {
  transform: none;
  background: linear-gradient(#5b5346 0 2px, #6f6759 2px 60%, #7d7566 60%);
  box-shadow: inset 1px 1px 0 #453f35, inset -1px -1px 0 #a8a294;
}
.wb-seg .w95-button.active {
  height: 19px;
  color: #f7d9a8;
  background: linear-gradient(#5b5346 0 2px, #6f6759 2px 60%, #7d7566 60%);
  box-shadow: inset 1px 1px 0 #453f35, inset -1px -1px 0 #a8a294;
  text-shadow: 0 1px 0 #3b352c;
}

.wb-seg .w95-button::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  background: #a49e8c;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.35);
}
.wb-seg .w95-button.active::before {
  background: #ffb44a;
  box-shadow: 0 0 4px rgba(255, 180, 74, 0.9), inset -1px -1px 0 #b86b12;
}

#wb-rep-bench {
  position: absolute;
  top: 94px;
  left: 10px;
  width: 400px;

  height: 72px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 3px 10px;
  padding: 0 12px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#wb-rep-wells { position: static; display: flex; align-items: center; gap: 5px; }
#wb-rep-out { position: static; }

.wb-act {
  position: absolute;
  top: 170px;
  left: 10px;
  width: 400px;
  height: 22px;
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.wb-act .wb-go { flex: 1; min-width: 0; height: 22px; }

.wb-clear {
  flex: none;
  width: 104px;
  height: 22px;
  border: 2px solid #14161c;
  border-radius: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding-left: 1px;
  white-space: nowrap;

  color: #14161c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
  cursor: pointer;
  background: linear-gradient(#e8877a 0 2px, #cf4b39 2px 55%, #b0301f 55% 82%, #8e2415 82% 100%);
  box-shadow: inset 0 -2px 0 #5e1109;
}

.wb-clear:disabled {
  color: #a49e8e;
  text-shadow: 0 1px 0 #f2efe4;
  cursor: default;

  border-color: #b3ad9c;
  background: linear-gradient(#f2efe4 0 2px, #ddd8c6 2px 55%, #cbc6b3 55%);
  box-shadow: inset 0 -2px 0 #b3ad9c;
}

.wb-go {
  position: static;
  width: auto;
  min-width: 122px;
  height: 20px;

  white-space: nowrap;
  padding: 0 12px 0 13px;
  border: 2px solid #14161c;
  border-radius: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;

  color: #06280a;
  text-shadow: 0 1px 0 #a9e6a4;
  cursor: pointer;
  background: linear-gradient(
    #d8f5cf 0 2px,
    #7fd472 2px 55%,
    #4fae42 55% 82%,
    #37852c 82% 100%);
  box-shadow: inset 0 -2px 0 #245c1c;
}

.wb-go:disabled {
  color: #a49e8e;
  text-shadow: 0 1px 0 #f2efe4;
  cursor: default;

  border-color: #b3ad9c;
  background: linear-gradient(#f2efe4 0 2px, #ddd8c6 2px 55%, #cbc6b3 55%);
  box-shadow: inset 0 -2px 0 #b3ad9c;
}
.wb-well-cap {
  font-size: 8px;
  line-height: 9px;
  letter-spacing: 1px;
  color: #8a8474;
  text-align: center;
  padding: 0 3px;
}

.wb-well-cap.wb-well-num {
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 0;
  font-weight: 700;
  color: #c2bcaa;
  padding: 0;
}

#wb-rep-out-well {

  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #d7d2c2;
  box-shadow:
    inset 0 0 0 2px var(--rcp-ring, #b3ad9c),
    inset 2px 2px 0 #9a9482,
    inset -2px -2px 0 #fff;
}

#wb-rep-out-well canvas { width: 38px; height: 38px; image-rendering: pixelated; }
#wb-rep-out-well svg { width: 22px; height: 22px; }

#wb-sal-bench, #wb-bp-bench, #wb-cool-bench {
  position: absolute;
  top: 94px;
  left: 10px;
  width: 400px;
  height: 72px;
  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#wb-sal-wells, #wb-bp-wells, #wb-cool-wells {
  position: static;
  display: flex;
  align-items: center;
  gap: 5px;
}
#wb-sal-arrow, #wb-bp-arrow, #wb-cool-arrow,
#wb-sal-go, #wb-bp-go, #wb-cool-go { position: static; }
#wb-sal-out-well, #wb-bp-out-well, #wb-cool-out-well {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #d7d2c2;
  box-shadow:
    inset 0 0 0 2px var(--rcp-ring, #b3ad9c),
    inset 2px 2px 0 #9a9482,
    inset -2px -2px 0 #fff;
}
#wb-sal-out-well canvas, #wb-bp-out-well canvas, #wb-cool-out-well canvas {
  width: 38px; height: 38px; image-rendering: pixelated;
}
#wb-sal-out-well svg, #wb-bp-out-well svg, #wb-cool-out-well svg { width: 22px; height: 22px; }

#wb-rep-out-well.multi, #wb-sal-out-well.multi,
#wb-bp-out-well.multi, #wb-cool-out-well.multi {
  display: flex;
  align-items: center;
  width: auto;
  gap: 3px;
  padding: 0 3px;
}
#wb-rep-out-well.multi canvas, #wb-sal-out-well.multi canvas,
#wb-bp-out-well.multi canvas, #wb-cool-out-well.multi canvas {
  width: 30px;
  height: 30px;
}

/* .wb-stack DELETED 2026-09-03 (R8-NET-01). The stack count on a bench tile is
   drawn by `.rcp-cell b` / `.rcp-out b` above, which is the rule that was
   measured live carrying "x1" on the repair kit. */
.wb-well { position: relative; }

#wb-cool-list .slot-row.sel {
  background: #ded9c8;
  box-shadow: inset 2px 0 0 #a1520a;
}

#wb-tab-repair.fix #wb-sal-bench,
#wb-tab-repair.fix #wb-sal-act { display: none; }
#wb-tab-repair:not(.fix) #wb-rep-head { display: none; }
#wb-tab-repair:not(.fix) #wb-rep-act { display: none; }
#wb-tab-craft #wb-craft-head { display: none; }
#wb-tab-craft.bp #wb-cool-bench,
#wb-tab-craft.bp #wb-cool-act { display: none; }
#wb-tab-craft:not(.bp) #wb-bp-bench,
#wb-tab-craft:not(.bp) #wb-bp-act { display: none; }

#wb-tab-craft #wb-craft-list,
#wb-tab-craft #wb-cool-list { width: 196px !important; }
#wb-bp-scrap {
  position: absolute;
  top: 218px;

  left: 214px;
  width: 196px;
  height: 178px;
  box-sizing: border-box;

  overflow: hidden;
  padding: 2px 0 2px 2px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#wb-bp-scrap .slot-row { margin-right: 0; padding-right: 12px; }
#wb-bp-scrap .slot-row:hover { background: #f2efe4; }
#wb-bp-scrap .slot-row + .slot-row { border-top-color: #cfcab8; }
#wb-bp-scrap .it-label { min-width: 0; }

#wb-cons-list .slot-row { margin-right: 0; padding-right: 12px; }
#wb-cons-list .it-label { min-width: 0; }

#wb-tab-repair.fix #wb-rep-head { display: none; }
#wb-tab-repair:not(.fix) #wb-rep-bench { display: none; }

#wb-tab-repair.fix #wb-repair-list { width: 196px !important; }
#wb-cons-list {
  position: absolute;
  top: 218px;
  left: 214px;
  width: 196px;
  height: 178px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 2px 0 2px 2px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}
#wb-tab-repair:not(.fix) #wb-cons-list { display: none; }
#wb-cons-list .slot-row:hover { background: #f2efe4; }
#wb-cons-list .slot-row + .slot-row { border-top-color: #cfcab8; }

#wb-repair-list, #wb-salvage-list,
#wb-craft-list, #wb-cool-list {
  top: 218px !important;
  left: 10px;
  width: 400px;
  height: 178px !important;
}

#wb-repair-list .slot-row,
#wb-cons-list .slot-row,
#wb-salvage-list .slot-row,
#wb-craft-list .slot-row,
#wb-bp-scrap .slot-row,
#wb-cool-list .slot-row,
#wb-trade-list .slot-row,
#wb-drive-list .slot-row {
  gap: 6px;
  height: 34px;
  min-height: 0;
  box-sizing: border-box;
}

#wb-repair-list .slot-row,
#wb-cons-list .slot-row,
#wb-salvage-list .slot-row,
#wb-craft-list .slot-row,
#wb-bp-scrap .slot-row,
#wb-cool-list .slot-row,
#wb-trade-list .slot-row,
#wb-drive-list .slot-row {
  position: relative;
  background: #f2efe4;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #b3ad9c,
    1px 1px 0 rgba(90, 83, 68, 0.35);
  margin: 3px 4px 4px 3px;
  padding: 2px 5px;
  border-top: 0 !important;
  user-select: none;
}
#wb-repair-list .slot-row::after,
#wb-cons-list .slot-row::after,
#wb-salvage-list .slot-row::after,
#wb-craft-list .slot-row::after,
#wb-bp-scrap .slot-row::after,
#wb-cool-list .slot-row::after,
#wb-trade-list .slot-row::after,
#wb-drive-list .slot-row::after {
  content: '';
  flex: none;
  width: 2px;
  height: 14px;
  margin-left: auto;
  background-image: repeating-linear-gradient(#a8a294 0 2px, transparent 2px 4px);
}

#wb-bp-scrap .slot-row.ghost::after,
#wb-drive-list .slot-row.ghost::after,
#wb-cons-list .slot-row.ghost::after { background-image: none; }

#wb-repair-list .slot-row:hover,
#wb-cons-list .slot-row:hover,
#wb-salvage-list .slot-row:hover,
#wb-craft-list .slot-row:hover,
#wb-bp-scrap .slot-row:hover,
#wb-cool-list .slot-row:hover,
#wb-trade-list .slot-row:hover,
#wb-drive-list .slot-row:hover,

#rig-spares .slot-row:hover,
#rig-slots .slot-row.mod:hover,
#sp-list .slot-row:hover {
  background: #fffdf6;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #a8a294,
    inset 0 0 0 1px #d8d2be,
    2px 2px 0 rgba(90, 83, 68, 0.42);
}
#wb-cons-list .slot-row.ghost:hover,
#wb-bp-scrap .slot-row.ghost:hover,
#wb-craft-list .slot-row.ghost:hover {
  background: #f2efe4;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #b3ad9c,
    1px 1px 0 rgba(90, 83, 68, 0.35);
}

.xp-sb:is(
  [data-sb-for='wb-repair-list'], [data-sb-for='wb-cons-list'],
  [data-sb-for='wb-salvage-list'], [data-sb-for='wb-craft-list'],
  [data-sb-for='wb-bp-scrap'], [data-sb-for='wb-cool-list'],
  [data-sb-for='wb-trade-list'], [data-sb-for='wb-drive-list'],
  [data-sb-for='rig-slots'], [data-sb-for='rig-spares'],
  [data-sb-for='sp-list'], [data-sb-for='pv-log-list'],
  [data-sb-for='jp-list'],
  [data-sb-for='email-list'], [data-sb-for='ev-body'], [data-sb-for='db-pools'],
  [data-sb-for='lgi-pools'], [data-sb-for='sm-list']
) { width: 11px; }
.xp-sb:is(
  [data-sb-for='wb-repair-list'], [data-sb-for='wb-cons-list'],
  [data-sb-for='wb-salvage-list'], [data-sb-for='wb-craft-list'],
  [data-sb-for='wb-bp-scrap'], [data-sb-for='wb-cool-list'],
  [data-sb-for='wb-trade-list'], [data-sb-for='wb-drive-list'],
  [data-sb-for='rig-slots'], [data-sb-for='rig-spares'],
  [data-sb-for='sp-list'], [data-sb-for='pv-log-list'],
  [data-sb-for='jp-list'],
  [data-sb-for='email-list'], [data-sb-for='ev-body'], [data-sb-for='db-pools'],
  [data-sb-for='lgi-pools'], [data-sb-for='sm-list']
) .xp-sb-btn { width: 11px; height: 11px; }
.xp-sb:is(
  [data-sb-for='wb-repair-list'], [data-sb-for='wb-cons-list'],
  [data-sb-for='wb-salvage-list'], [data-sb-for='wb-craft-list'],
  [data-sb-for='wb-bp-scrap'], [data-sb-for='wb-cool-list'],
  [data-sb-for='wb-trade-list'], [data-sb-for='wb-drive-list'],
  [data-sb-for='rig-slots'], [data-sb-for='rig-spares'],
  [data-sb-for='sp-list'], [data-sb-for='pv-log-list'],
  [data-sb-for='jp-list'],
  [data-sb-for='email-list'], [data-sb-for='ev-body'], [data-sb-for='db-pools'],
  [data-sb-for='lgi-pools'], [data-sb-for='sm-list']
) .xp-sb-thumb { width: 9px; }

.drop-dim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}
body.part-drag .drop-dim { opacity: 1; }

body.tour-live.part-drag .drop-dim { opacity: 0; }

body.part-drag .wb-well.can,
body.part-drag .wb-sockgroup.can,
body.part-drag .xp-scroll.can,
body.part-drag .xp-sb.can,
body.part-drag #rig-slots .slot-row.can,
body.part-drag #rig-spares-box.can {

  position: relative;
  z-index: 6;

  background-color: #e4e0d2;
}
body.part-drag #rig-slots .slot-row.mod.can { background-color: #f2efe4; }

body.part-drag .wb-sockgroup.can { position: relative; }

body.part-home.drop-over .drop-ring.on,
body.part-home.drop-over .drop-ring.on::before,
body.part-home.drop-over .drop-ring.on::after {
  outline-color: #cfe8c6;
  border-color: #cfe8c6;
}

body.tour-bench .drop-ring.on,
body.tour-bench .drop-ring.on::before,
body.tour-bench .drop-ring.on::after,
body.tour-bench.part-home .drop-ring.on,
body.tour-bench.part-home .drop-ring.on::before,
body.tour-bench.part-home .drop-ring.on::after,
body.tour-rig .drop-ring.on,
body.tour-rig .drop-ring.on::before,
body.tour-rig .drop-ring.on::after,
body.tour-rig.part-home .drop-ring.on,
body.tour-rig.part-home .drop-ring.on::before,
body.tour-rig.part-home .drop-ring.on::after {
  outline-color: #fff;
  border-color: #fff;
}

body.part-home #wb-repair-list .slot-row,
body.part-home #wb-cons-list .slot-row,
body.part-home #wb-salvage-list .slot-row,
body.part-home #wb-craft-list .slot-row,
body.part-home #wb-bp-scrap .slot-row,
body.part-home #wb-cool-list .slot-row,
body.part-home #wb-drive-list .slot-row,
body.part-home #wb-trade-list .slot-row,
body.part-home #rig-spares .slot-row,
body.part-home #rig-slots .slot-row,
body.part-home #sp-list .slot-row,
body.part-home .wb-slot { pointer-events: none; }

.drop-ring {
  position: absolute;
  z-index: 6;
  pointer-events: none;

  outline: 3px solid #fff;
  outline-offset: 1px;

  opacity: 0;
  transition: opacity 0.3s ease;
}
.drop-ring.lit { opacity: 1; }

.drop-ring.wide { outline-offset: 4px; }
.drop-ring.wide::before,
.drop-ring.wide::after { inset: -7px; }

.drop-ring::before,
.drop-ring::after {
  content: '';
  position: absolute;

  inset: -4px;
  outline: 3px solid #fff;
  outline-offset: 0;
  pointer-events: none;
  opacity: 0;
  animation: drop-ring 1.5s ease-out infinite;
}
.drop-ring::after { animation-delay: 0.75s; }

@keyframes drop-ring {
  0% { outline-offset: 0; opacity: 0.85; }
  100% { outline-offset: var(--ring-grow, 12px); opacity: 0; }
}

.cond-dot {
  color: #9a9484;
  padding: 0 4px 0 5px;
  vertical-align: middle;
  line-height: 1;
}

#wb-repair-list .it-name, #wb-salvage-list .it-name,
#wb-cons-list .it-name, #wb-craft-list .it-name,
#wb-bp-scrap .it-name, #wb-cool-list .it-name,
#wb-trade-list .it-name, #wb-drive-list .it-name,
#wb-repair-list .it-sub, #wb-salvage-list .it-sub,
#wb-trade-list .it-sub {
  padding-bottom: 3px;
  margin-bottom: -3px;
}

#wb-craft-list .slot-row,
#wb-bp-scrap .slot-row {
  height: 30px;
  margin: 2px 4px 2px 3px;
}
#wb-craft-list .wb-ring,
#wb-bp-scrap .wb-ring { width: 26px; height: 26px; }

#wb-craft-list .slot-row:first-child,
#wb-bp-scrap .slot-row:first-child,
#wb-cool-list .slot-row:first-child,
#wb-repair-list .slot-row:first-child,
#wb-cons-list .slot-row:first-child,
#wb-salvage-list .slot-row:first-child,
#wb-drive-list .slot-row:first-child { margin-top: 5px; }

#wb-drive-list .slot-row {
  height: 30px;
  margin: 2px 5px 2px 4px;
}
#wb-drive-list .slot-row:first-child { margin-top: 6px; }

#wb-drive-list .wb-ring { width: 25px; height: 25px; padding: 0; }
#wb-drive-list .wb-ring canvas,
#wb-drive-list .wb-ring img { width: 22px; height: 22px; }

#wb-drive-list .it-tag {
  width: auto;
  min-width: 22px;
  padding: 0 4px;
  border-radius: 3px;
}

#wb-repair-list, #wb-cons-list, #wb-salvage-list,
#wb-craft-list, #wb-bp-scrap, #wb-cool-list,
#wb-drive-list, #wb-trade-list { padding-top: 0; padding-bottom: 0; }
#wb-repair-list::before, #wb-cons-list::before,
#wb-salvage-list::before, #wb-craft-list::before,
#wb-bp-scrap::before, #wb-cool-list::before,
#wb-drive-list::before,
#wb-repair-list::after, #wb-cons-list::after,
#wb-salvage-list::after, #wb-craft-list::after,
#wb-bp-scrap::after, #wb-cool-list::after,
#wb-drive-list::after {
  content: '';
  display: block;
  position: sticky;
  height: 3px;
  margin: 0 -11px 0 -1px;

  z-index: 2;
}
#wb-repair-list::before, #wb-cons-list::before,
#wb-salvage-list::before, #wb-craft-list::before,
#wb-bp-scrap::before, #wb-cool-list::before,
#wb-drive-list::before {
  top: 0;
  margin-bottom: -3px;
  background: linear-gradient(#a8a294 0 1px, #e4e0d2 1px 3px);
}
#wb-repair-list::after, #wb-cons-list::after,
#wb-salvage-list::after, #wb-craft-list::after,
#wb-bp-scrap::after, #wb-cool-list::after,
#wb-drive-list::after {
  bottom: 0;
  margin-top: -3px;
  background: linear-gradient(#e4e0d2 0 2px, #fff 2px 3px);
}

.xp-scroll.sb-off::before,
.xp-scroll.sb-off::after,
#wb-craft-list.sb-off::before, #wb-craft-list.sb-off::after,
#wb-bp-scrap.sb-off::before, #wb-bp-scrap.sb-off::after,
#wb-cool-list.sb-off::before, #wb-cool-list.sb-off::after,
#wb-repair-list.sb-off::before, #wb-repair-list.sb-off::after,
#wb-cons-list.sb-off::before, #wb-cons-list.sb-off::after,
#wb-salvage-list.sb-off::before, #wb-salvage-list.sb-off::after,
#wb-drive-list.sb-off::before, #wb-drive-list.sb-off::after,
#wb-trade-list.sb-off::before, #wb-trade-list.sb-off::after {
  display: none;
}

.it-tag.count {
  width: auto;
  min-width: 0;
  padding: 0 4px;
}

.wb-ring {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  box-shadow:
    inset 0 0 0 1px #b3ad9c,
    inset 0 0 0 2px var(--ring, #b3ad9c);
}
.wb-ring .it-thumb { flex: none; }
#wb-bp-scrap .slot-row.ghost .wb-ring,
#wb-cons-list .slot-row.ghost .wb-ring { filter: grayscale(0.5); }

#wb-bp-scrap .slot-row.ghost,
#wb-cons-list .slot-row.ghost {
  opacity: 0.45;
  cursor: default;
}
#wb-bp-scrap .slot-row.ghost:hover,
#wb-cons-list .slot-row.ghost:hover { background: none; }

#wb-repair-list .cond-bar {
  flex: none;
  width: 54px;
  margin: 0;
}

#wb-bench {
  position: absolute;
  top: 94px;
  left: 10px;
  width: 400px;
  height: 116px;
  box-sizing: border-box;
  display: grid;

  align-content: stretch;

  grid-template-columns: 238px 138px;
  grid-template-rows: 1fr auto;

  justify-content: start;
  align-items: stretch;

  padding: 8px;
  gap: 6px 8px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

.wb-sockgroup {
  display: flex;
  align-items: center;
  gap: 5px;
}

.wb-sockplus {
  flex: none;
  position: relative;
  width: 11px;
  height: 11px;
  margin: 0 2px;
  background:
    linear-gradient(#8a8474 0 100%) center / 11px 3px no-repeat,
    linear-gradient(#8a8474 0 100%) center / 3px 11px no-repeat;
}

#wb-wells {
  position: static;
  display: flex;
  align-items: center;

  gap: 6px;

  margin-left: var(--sock-nudge, 0px);

  width: max-content;
}

.wb-well {
  position: relative;
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  background: #d7d2c2;
  box-shadow:
    inset 2px 2px 0 #9a9482,
    inset -2px -2px 0 #fff;
}

.wb-well canvas.wb-well-art {
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
  display: block;
}
.wb-well .wb-well-n {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 700;
  color: #c2bcaa;
  pointer-events: none;
}

.wb-well.full {

  box-shadow:
    inset 0 0 0 2px var(--rcp-ring, #7f9db9),
    inset 2px 2px 0 #9a9482,
    inset -2px -2px 0 #fff;
}
.wb-well.full .wb-well-n { display: none; }

.wb-well.full:hover {
  cursor: pointer;
  background: #fbfaf3;
  box-shadow:
    inset 0 0 0 2px var(--rcp-ring, #b3ad9c),
    inset 2px 2px 0 #9a9482,
    inset -2px -2px 0 #fff;
}

.wb-well canvas, .wb-well img { image-rendering: pixelated; display: block; }

.cond-bar.cb-well {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  width: auto;
  height: 4px;
  margin: 0;
  pointer-events: none;
  z-index: 2;
}

.wb-arrow {
  position: static;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 14px;

}
.wb-arrow i,
.rcp-arrow i {
  width: 10px;
  height: 14px;
  flex: none;
  background:
    linear-gradient(#a1520a, #a1520a) 0 0 / 4px 2px no-repeat,
    linear-gradient(#a1520a, #a1520a) 2px 2px / 4px 2px no-repeat,
    linear-gradient(#a1520a, #a1520a) 4px 4px / 4px 2px no-repeat,
    linear-gradient(#a1520a, #a1520a) 6px 6px / 4px 2px no-repeat,
    linear-gradient(#a1520a, #a1520a) 4px 8px / 4px 2px no-repeat,
    linear-gradient(#a1520a, #a1520a) 2px 10px / 4px 2px no-repeat,
    linear-gradient(#a1520a, #a1520a) 0 12px / 4px 2px no-repeat;
  opacity: 0.22;

  animation: wbchase 1.5s steps(1, end) infinite;
}

.wb-arrow i:nth-child(2), .rcp-arrow i:nth-child(2) { animation-delay: 0.3s; }
.wb-arrow i:nth-child(3), .rcp-arrow i:nth-child(3) { animation-delay: 0.6s; }
.wb-arrow i:nth-child(4), .rcp-arrow i:nth-child(4) { animation-delay: 0.9s; }
.wb-arrow i:nth-child(5), .rcp-arrow i:nth-child(5) { animation-delay: 1.2s; }

@keyframes wbchase {
  0%   { opacity: 1; }
  20%  { opacity: 0.6; }
  40%  { opacity: 0.34; }
  60%  { opacity: 0.22; }
  100% { opacity: 0.22; }
}
#wb-out {
  position: static;
  justify-self: end;
  text-align: center;
}

#wb-out-well {
  position: relative;
  width: 46px;
  height: 46px;
  margin: 0 auto;
  background: #d7d2c2;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 2px var(--rcp-ring, #b3ad9c),
    inset 2px 2px 0 #9a9482,
    inset -2px -2px 0 #fff;
}

#wb-out.ready #wb-out-well {

  box-shadow:
    inset 0 0 0 2px var(--rcp-ring, #a1520a),
    inset 2px 2px 0 #9a9482,
    inset -2px -2px 0 #fff;
}

#wb-out-well canvas { width: 38px; height: 38px; image-rendering: pixelated; }

#wb-out-cap { display: none; }

#wb-odds-title {
  position: static !important;
  text-align: center;
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #5a5344;
  padding-bottom: 0;
  margin-bottom: -1px;
}

#wb-odds {
  position: static !important;
  width: auto !important;
  height: 36px !important;
  justify-content: center !important;
  align-items: center !important;
}

#wb-odds .slot-empty, #wb-odds .rig-note { text-align: center; }

#wb-machine {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

#wb-machine .wb-arrow i:nth-child(n + 4) { display: none; }
#wb-machine .wb-arrow i:nth-child(2) { animation-delay: 0.5s; }
#wb-machine .wb-arrow i:nth-child(3) { animation-delay: 1s; }

#wb-bench > #wb-craft {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  align-self: end;
  margin: 0 !important;
  width: 150px;
  height: 24px;
}
#wb-odds-col {

  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: stretch;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;

  box-sizing: border-box;
  margin-top: 0;

  padding: 4px 5px;
  background: #eceadf;
  box-shadow: inset 1px 1px 0 #a8a294, inset -1px -1px 0 #fff;
}
#wb-odds-read { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#wb-odds-title {
  padding-bottom: 2px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #cfcab8;
}

#wb-odds {
  height: auto !important;
  flex: 1;
  min-height: 0;
}
#wb-odds .pw-odds-row + .pw-odds-row { border-top: 1px solid #dcd7c4; }

#wb-craft {
  position: static !important;

  min-width: 0;

  width: 84px;
  height: 26px;
  padding: 0 0 0 1px;
  font-size: 13px;
}

#wb-status { top: 220px !important; left: 10px !important; right: auto !important; color: #b00000; }

#wb-trade-list {
  top: 218px !important;
  left: 10px;
  width: 400px;
  height: 178px !important;
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0;

  padding: 0 0 0 2px;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

#wb-trade-list::before,
#wb-trade-list::after {
  content: '';
  display: block;
  grid-column: 1 / -1;
  position: sticky;
  height: 3px;
  margin: 0 -9px 0 0;
  z-index: 2;

}
#wb-trade-list::before { top: 0; background: linear-gradient(#a8a294 0 1px, #e4e0d2 1px 3px); }
#wb-trade-list::after { bottom: 0; background: linear-gradient(#e4e0d2 0 2px, #fff 2px 3px); }

#wb-trade-list .slot-row:nth-child(2n) { margin-right: 7px; }
#wb-trade-list .slot-row { user-select: none; min-width: 0; gap: 4px; }

#wb-trade-list .it-label { min-width: 0; }

#wb-trade-list .it-name { font-size: 10px; }
#wb-trade-list .it-name,
#wb-trade-list .it-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#wb-trade-list .slot-row.dragging,
#wb-repair-list .slot-row.dragging,
#wb-cons-list .slot-row.dragging,
#wb-salvage-list .slot-row.dragging,
#wb-craft-list .slot-row.dragging,
#wb-bp-scrap .slot-row.dragging,
#wb-cool-list .slot-row.dragging,
#wb-drive-list .slot-row.dragging { opacity: 0.3; }

.wb-ghost {
  position: fixed;
  z-index: 1200;

  width: var(--ghost, 84px);
  height: var(--ghost, 84px);
  margin: calc(var(--ghost, 84px) / -2) 0 0 calc(var(--ghost, 84px) / -2);
  pointer-events: none;
  transform: scale(0.85) rotate(0deg);
  opacity: 0;
  filter: drop-shadow(2px 3px 0 rgba(20, 22, 28, 0.35));
  transition: transform 120ms ease-out, opacity 120ms ease-out;
}
.wb-ghost canvas {
  width: var(--ghost, 84px);
  height: var(--ghost, 84px);
  display: block;
  image-rendering: pixelated;
}
.wb-ghost.up { transform: scale(1.12) rotate(-4deg); opacity: 1; }

.wb-ghost.home {
  transform: scale(0.72) rotate(0deg);
  opacity: 0;
  transition: transform 180ms ease-in, opacity 180ms ease-in,
    left 180ms ease-in, top 180ms ease-in;
}
#wb-trade-list .slot-empty.pad { grid-column: 1 / -1; border: none; }

.howto {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.65);
}

.howto-box {
  width: 600px;
  max-width: 82%;
  box-sizing: border-box;
  padding: 16px 26px 16px;
  border: 2px solid;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.35);
  font-family: 'MS Sans Serif', Arial, sans-serif;
  text-align: center;
}
.howto-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 9px;
}

.howto-head {
  font-size: 21px;
  font-weight: 700;
  margin: -4px 0 8px;
}

.howto-rules {
  margin-top: 10px;
  padding: 4px 14px;
  border: 1px solid;
  background: rgba(0, 0, 0, 0.22);
  text-align: left;
}
.howto-rule {
  display: flex;
  gap: 10px;
  font-size: 16px;
  line-height: 22px;
  padding: 7px 0;
}

.howto-rule + .howto-rule { border-top: 1px solid rgba(255, 255, 255, 0.13); }

.howto-rule b { flex: none; width: 96px; }
.howto-rule span { flex: 1; min-width: 0; }
.howto-body p {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 23px;
}

.howto-body p:first-child { font-weight: 700; font-size: 19px; }
.howto-body p:last-child { margin-bottom: 0; }
.howto-ok {
  margin-top: 14px;
  padding: 8px 30px;
  border: none;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}
.howto-ok:hover { filter: brightness(1.12); }
.howto-ok:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }

#wbc-well,
#ii-well,
#pvrent-well,
#pvr-well,
#pvs-well,
.rcp-cell,
.rcp-out,
.wb-ring { background: transparent; }

.inlay-cover {
  position: absolute;
  z-index: 30;
  background: #ece9d8;
  overflow: hidden;
}
.win95-window.inlaid { transform: none !important; z-index: 20; }

.win95-window.inlaid .w95-scale {
  transform: none !important;
  border-radius: 0;
  background: transparent;
}
.inlaid .w95-titlebar,
.inlaid .w95-x,
.inlaid .w95-frame { display: none; }

#cat-back {
  top: 260px;
  left: 10px;
  width: 300px;
  height: 22px;
}

#loginfo.inlay-fill .w95-scale { width: var(--inw); height: var(--inh); }
#loginfo.inlay-fill #lgi-title,
#loginfo.inlay-fill #lgi-sub,

#loginfo.inlay-fill #lgi-amt,
#loginfo.inlay-fill .w95-groove { width: 200px; }
#loginfo.inlay-fill #lgi-raid { width: 206px; }
#loginfo.inlay-fill #lgi-groove3 { display: none; }
#loginfo.inlay-fill #lgi-chart-cap { width: 226px; }
#loginfo.inlay-fill #lgi-chart { width: 226px; }

#loginfo.inlay-fill { --lgi-y0: 44px; }
#loginfo.inlay-fill.nosub { --lgi-y0: 28px; }
#loginfo.inlay-fill #lgi-title,
#loginfo.inlay-fill.nosub #lgi-title { top: 8px; }
#loginfo.inlay-fill #lgi-sub { top: 25px; }

#loginfo.inlay-fill #lgi-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  padding-bottom: 3px;
  margin-bottom: -3px;
}

#loginfo.inlay-fill.rich:not(.raid) #lgi-sum {
  display: block;
  position: absolute;
  top: 88px;
  left: 10px;
  width: 200px;
  height: 86px;
  box-sizing: border-box;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}

#loginfo.inlay-fill.rich:not(.raid) #lgi-sum .lgi-kv {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  align-items: center;
  font-size: 11px;
}
#loginfo.inlay-fill.rich:not(.raid) #lgi-sum .lgi-kv + .lgi-kv {
  border-top: 1px solid #cfcaba;
}

#loginfo.inlay-fill #lgi-raid {
  width: 200px;
  top: 84px;
  height: calc(var(--inh) - 122px);
}

#loginfo.inlay-fill.raid #lgi-raid {
  display: flex;
  flex-direction: column;
}
#loginfo.inlay-fill .lgi-raid-top { flex: none; }
#loginfo.inlay-fill #lgi-raid-rows {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#loginfo.inlay-fill .lgi-kv {
  flex: 1 1 0;
  min-height: 0;
  align-items: center;
}

#loginfo.inlay-fill .lgi-kv + .lgi-kv { border-top: 1px solid #cfcaba; }

#loginfo.inlay-fill #lgi-cap { top: 8px; left: 226px; width: 226px; }
#loginfo.inlay-fill.rich #lgi-cap { top: 88px; }
#loginfo.inlay-fill #lgi-chart-cap { top: 8px; left: 226px; }

#loginfo.inlay-fill #lgi-chart { top: 22px; left: 226px; }

#loginfo.inlay-fill #lgi-pools,
#loginfo.inlay-fill.raid #lgi-crew {

  top: 102px;
  left: 226px;
  width: 226px;
  height: calc(var(--inh) - 110px);
  overflow: hidden;
}

#loginfo.inlay-fill.rich.raid #lgi-crew {
  box-sizing: border-box;
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}
#loginfo.inlay-fill.rich.raid .lgi-rrow {
  flex: 1 1 0;
  min-height: 0;
  height: auto;

  box-sizing: border-box;
  padding: 0 4px;
}
#loginfo.inlay-fill.rich.raid .lgi-rrow + .lgi-rrow { border-top: 1px solid #cfcaba; }
#loginfo.inlay-fill .lgi-rrow { height: 18px; }
#loginfo.inlay-fill .lgi-rrow img { width: 15px; height: 15px; }

#loginfo.inlay-fill.raid:not(.rich) #lgi-crew {
  top: 26px;
  height: calc(var(--inh) - 34px);
  box-sizing: border-box;
  padding: 2px;
  display: flex;
  flex-direction: column;

  gap: 0;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}
#loginfo.inlay-fill.raid:not(.rich) .lgi-rrow {
  flex: 1 1 0;
  min-height: 0;
  height: auto;

  box-sizing: border-box;
  padding: 0 5px;
  gap: 7px;
}
#loginfo.inlay-fill.raid:not(.rich) .lgi-rrow + .lgi-rrow { border-top: 1px solid #cfcaba; }

#loginfo.inlay-fill.raid:not(.rich) .lgi-rrow img { width: 22px; height: 22px; }
#loginfo.inlay-fill.raid:not(.rich) .lgi-rrow .nm { font-size: 11px; font-weight: 700; }
#loginfo.inlay-fill.raid:not(.rich) .lgi-rrow .amt { font-size: 10px; }

#loginfo.inlay-fill #lgi-raid {
  height: calc(var(--inh) - 120px);
  overflow: hidden;
}
#loginfo.inlay-fill .lgi-raid-top { height: 26px; }
#loginfo.inlay-fill #lgi-raid-face { width: 18px; height: 18px; }
#loginfo.inlay-fill #lgi-raid-role { font-size: 7px; line-height: 9px; }
#loginfo.inlay-fill #lgi-raid-who { font-size: 11px; line-height: 12px; }
#loginfo.inlay-fill .lgi-kv { line-height: 13px; font-size: 10px; }
#loginfo.inlay-fill.raid #lgi-pools,
#loginfo.inlay-fill.raid #lgi-crew { height: calc(var(--inh) - 116px); }
#loginfo.inlay-fill #lgi-ok {
  top: calc(var(--inh) - 30px) !important;
  left: 10px;
  width: 200px;
}

.ring-gap {
  position: absolute;
  z-index: 7;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
  animation: ring-gap-in 0.14s ease both;
}
@keyframes ring-gap-in { from { opacity: 0; } to { opacity: 1; } }

#wbconfirm.inlay-fill { --headoff: 80px; --floorpad: 36px; --wbc-row: 18px; }

#wbconfirm.inlay-fill.finebox {
  --floorpad: 64px;
  --wbc-row: 14px;
}

#wbconfirm.inlay-fill.finebox.inlay-short { --headoff: 88px; }

#wbconfirm.inlay-fill.finebox #wbc-pcol {
  padding: 3px 9px;
  height: var(--pband) !important;
}

#wbconfirm.inlay-fill.finebox #wbc-price {
  font-size: 26px;
  line-height: 28px;
  margin: 0;
}
#wbconfirm.inlay-fill.finebox #wbc-pnote {
  order: -1;
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 400;
  color: #7a7466;
  margin-bottom: 2px;

  white-space: nowrap;
}

#wbconfirm.inlay-fill.finebox #wbc-stats .pv-kv + .pv-kv {
  border-top: 1px solid #cfcaba;
}

#wbconfirm.inlay-fill.inlay-short { --headoff: 4px; }

#wbconfirm.inlay-fill.inlay-short #wbc-well,
#wbconfirm.inlay-fill.inlay-short #wbc-cycle,
#wbconfirm.inlay-fill.inlay-short #wbc-title,
#wbconfirm.inlay-fill.inlay-short #wbc-sub,
#wbconfirm.inlay-fill.inlay-short #wbc-hr1 { display: none !important; }
#wbconfirm.inlay-fill.inlay-strip #wbc-cycle { display: none !important; }

#wbconfirm.inlay-fill.inlay-short.recipe { --headoff: 62px; }
#wbconfirm.inlay-fill.inlay-short.recipe #wbc-well {
  display: grid !important;
  width: 48px !important;
  height: 48px !important;
}

#wbconfirm.inlay-fill.inlay-short.recipe #wbc-cycle {
  display: block !important;
  top: 58px !important;
  width: 48px !important;
}

#wbconfirm.inlay-fill.inlay-short.recipe #wbc-cycle.hidden {
  display: none !important;
}
#wbconfirm.inlay-fill.inlay-short.recipe #wbc-img { width: 40px; height: 40px; }
#wbconfirm.inlay-fill.inlay-short.recipe #wbc-title {
  display: block !important;
  top: 12px !important;
  left: 66px !important;

  width: calc(var(--inw) - 282px) !important;
}
#wbconfirm.inlay-fill.inlay-short.recipe #wbc-sub {
  display: block !important;
  top: 32px !important;
  left: 66px !important;
}
#wbconfirm.inlay-fill.inlay-short.recipe #wbc-hr1 {
  display: block !important;
  top: 62px !important;
}

#wbconfirm.inlay-fill #wbc-well {
  top: 8px !important;
  left: 8px !important;
  width: 56px !important;
  height: 56px !important;
}
#wbconfirm.inlay-fill #wbc-img { width: 48px; height: 48px; }
#wbc-cycle { display: none; }
#wbconfirm.inlay-fill #wbc-cycle {
  display: block;
  position: absolute;
  top: 66px;
  left: 8px;
  width: 56px;
  height: 12px;
  line-height: 12px;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
}
#wbconfirm.inlay-fill #wbc-cycle.hidden { display: none; }

#wbconfirm.inlay-fill #wbc-stats {
  background: #eceadf;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
  padding: 3px 7px;
  box-sizing: border-box;
}

#wbconfirm.inlay-fill #wbc-title {
  top: 16px !important;
  left: 76px !important;
  width: calc(var(--inw) - 92px) !important;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 3px;
}
#wbconfirm.inlay-fill #wbc-sub {
  top: 40px !important;
  left: 76px !important;
  width: calc(var(--inw) - 92px) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 3px;
}
#wbconfirm.inlay-fill #wbc-hr1 {
  top: 80px !important;
  left: 8px !important;
  width: calc(var(--inw) - 16px) !important;
}

#wbconfirm.inlay-fill .w95-scale {
  --pavail: calc(var(--inh) - var(--headoff) - var(--floorpad) - 12px);

  --pband: min(var(--pavail), 136px);
  --ptop: calc(var(--headoff) + 6px + (var(--pavail) - var(--pband)) / 2);
}
#wbconfirm.inlay-fill #wbc-pcol {
  position: absolute;
  top: var(--ptop);
  left: 10px;
  width: 150px;
  height: var(--pband);
  box-sizing: border-box;
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #eceadf;
  box-shadow: inset 1px 1px 0 #a8a294, inset -1px -1px 0 #fff;
}

#wbconfirm.inlay-fill #wbc-pcol > * { flex: none; }

#wbconfirm.inlay-fill #wbc-plabel,
#wbconfirm.inlay-fill #wbc-price,
#wbconfirm.inlay-fill #wbc-pnote {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  background: none;
  box-shadow: none;
  padding: 0;
}
#wbconfirm.inlay-fill #wbc-price {
  font-size: 24px;
  line-height: 28px;
  margin: 3px 0 5px;
}

#wbc-price.withart {
  display: flex;
  align-items: center;
  gap: 8px;
}
#wbc-price.withart .it-thumb { flex: none; }

#wbconfirm.wideprice #wbc-price.withart { gap: 5px; }
#wbconfirm.inlay-fill.wideprice #wbc-pcol { width: 176px; }
#wbconfirm.inlay-fill.wideprice #wbc-stats {
  left: 198px !important;
  width: calc(var(--inw) - 210px) !important;
}
#wbconfirm.inlay-fill #wbc-pnote { line-height: 13px; }
#wbconfirm.inlay-fill #wbc-stats {
  top: var(--ptop) !important;
  height: var(--pband);
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 172px !important;
  width: calc(var(--inw) - 184px) !important;
  padding: 0 7px !important;
}
#wbconfirm.inlay-fill #wbc-stats .pv-kv {
  padding: 0;
  height: var(--wbc-row);
  line-height: var(--wbc-row);
  font-size: 11px;
  box-sizing: border-box;
  overflow: hidden;
}
#wbconfirm.inlay-fill #wbc-stats .pv-kv .v {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wbc-stats-title {
  height: 18px;
  line-height: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #6b675c;
}
#wbconfirm.inlay-fill .wbc-stats-title {
  height: var(--wbc-row);
  line-height: var(--wbc-row);
}

#wbconfirm.inlay-fill.kindgrid #wbc-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px 6px;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.wbc-kind {
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 5px;
  align-items: center;
  padding: 0 5px;
  background: #eceadf;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff;
}

.wbc-kind .it-thumb { justify-self: center; }
.wbc-kind-txt { min-width: 0; }
.wbc-kind-lab {
  font-size: 9px;
  line-height: 12px;
  color: #6e6a60;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wbc-kind-lab b { font-weight: 700; color: #1c1c1c; }
.wbc-kind-pct {
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  color: #1c1c1c;
}

#wbconfirm.inlay-fill.kindgrid .w95-scale {
  --pavail: calc(var(--inh) - var(--headoff) - var(--floorpad) - 8px);
  --ptop: calc(var(--headoff) + 4px + (var(--pavail) - var(--pband)) / 2);
}
#wbconfirm.inlay-fill #wbc-hr2,
#wbconfirm.inlay-fill #wbc-groove2 { display: none !important; }
/* ONE LINE, ALWAYS (owner, playing, 2026-09-09).
   Inlaid, this caption gets HALF the dialog's width - the right half is the
   rows table - and 18px of height between it and the keys. One line fits; a
   second one is drawn straight through CONFIRM. js/workbench.js's own comment
   at the repair confirm measured its 48-character sentence against the
   FULL-WIDTH box and concluded "48 stays on one line and `finetall` is never
   reached", which is true of the floating dialog and false of this one - so
   the sentence the owner photographed wrapped and the key ate the tail of it.

   The sentences were shortened to fit (see js/workbench.js), and this is the
   guard that stops the next one from doing it again: a caption that outgrows
   the box is now ellipsised in its own row rather than pushed onto the keys.
   `.finebox` is a flex row of two spans and unaffected either way. */
#wbconfirm.inlay-fill #wbc-fine {
  top: calc(var(--inh) - 48px) !important;
  left: 10px !important;
  width: calc(var(--inw) / 2 - 12px) !important;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#wbconfirm.inlay-fill.finebox #wbc-fine {
  top: calc(var(--inh) - 64px) !important;
  left: 10px !important;
  width: calc(var(--inw) - 20px) !important;
  box-sizing: border-box;
}

#wbconfirm.inlay-fill.norows #wbc-pcol {
  left: 10px;
  width: calc(var(--inw) - 20px);
  align-items: center;
  text-align: center;
}
#wbconfirm.inlay-fill.norows #wbc-plabel,
#wbconfirm.inlay-fill.norows #wbc-price,
#wbconfirm.inlay-fill.norows #wbc-pnote { text-align: center !important; }
#wbconfirm.inlay-fill #wbc-ok,
#wbconfirm.inlay-fill #wbc-alt,
#wbconfirm.inlay-fill #wbc-no {
  top: calc(var(--inh) - 30px) !important;
  height: 22px !important;
  margin-top: 0 !important;
}
#wbconfirm.inlay-fill #wbc-ok { left: 10px !important; width: calc((var(--inw) - 28px) / 2) !important; }
#wbconfirm.inlay-fill #wbc-no { left: calc(var(--inw) / 2 + 4px) !important; width: calc((var(--inw) - 28px) / 2) !important; }
#wbconfirm.inlay-fill.three #wbc-ok { left: 10px !important; width: calc((var(--inw) - 36px) / 3) !important; }
#wbconfirm.inlay-fill.three #wbc-alt {
  left: calc((var(--inw) - 36px) / 3 + 18px) !important;
  width: calc((var(--inw) - 36px) / 3) !important;
}
#wbconfirm.inlay-fill.three #wbc-no {
  left: calc((var(--inw) - 36px) / 3 * 2 + 26px) !important;
  width: calc((var(--inw) - 36px) / 3) !important;
}

#wbconfirm.inlay-fill.onebtn #wbc-ok {
  left: calc((var(--inw) - 160px) / 2) !important;
  width: 160px !important;
}

#wbconfirm.inlay-fill #wbc-price {
  white-space: nowrap;
  overflow: hidden;
}
#wbconfirm.inlay-fill.pricelong #wbc-price {
  font-size: 15px;
  line-height: 20px;
}

#wbconfirm.inlay-fill.bench-keys #wbc-ok {
  width: calc(var(--inw) - 142px) !important;
  border: 2px solid #14161c;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  color: #06280a;
  text-shadow: 0 1px 0 #a9e6a4;
  background: linear-gradient(
    #d8f5cf 0 2px,
    #7fd472 2px 55%,
    #4fae42 55% 82%,
    #37852c 82% 100%);
  box-shadow: inset 0 -2px 0 #245c1c;
}
#wbconfirm.inlay-fill.bench-keys #wbc-ok:hover {
  background: linear-gradient(
    #e4fadd 0 2px,
    #92dd86 2px 55%,
    #5fbc52 55% 82%,
    #429634 82% 100%);
}
#wbconfirm.inlay-fill.bench-keys #wbc-no {
  left: auto !important;
  right: 10px;
  width: 104px !important;
  border: 2px solid #14161c;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  color: #14161c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
  background: linear-gradient(#e8877a 0 2px, #cf4b39 2px 55%, #b0301f 55% 82%, #8e2415 82% 100%);
  box-shadow: inset 0 -2px 0 #5e1109;
}
#wbconfirm.inlay-fill.bench-keys #wbc-no:hover {
  background: linear-gradient(#f7a396 0 2px, #dd5d4a 2px 55%, #c23b28 55% 82%, #a02c1b 82% 100%);
}

#wbconfirm.inlay-fill.bench-keys.onebtn #wbc-ok {
  left: calc((var(--inw) - 160px) / 2) !important;
  width: 160px !important;
}

#wb-craft-list, #wb-cool-list, #wb-bp-scrap {
  display: flex;
  flex-direction: column;
}
#wb-craft-list::before, #wb-craft-list::after,
#wb-cool-list::before, #wb-cool-list::after,
#wb-bp-scrap::before, #wb-bp-scrap::after { flex: none; }
#wb-craft-list .slot-row,
#wb-cool-list .slot-row,
#wb-bp-scrap .slot-row { flex: none; }

#wb-bp-scrap.cool-side .slot-row {
  height: 46px;
  box-sizing: border-box;
  margin: 0 4px 10px 3px;
}
#wb-bp-scrap.cool-side { padding-top: 10px; padding-bottom: 0; }

#wb-bp-scrap.cool-side .slot-row + .slot-row { border-top: none; }

#rigapp:has(#wbconfirm.inlaid) #cl-reveal,
#rigapp:has(#wbconfirm.inlaid) #cl-side-hr { z-index: 31; }

.inlay-cover.inlay-bench {
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

#wbconfirm.inlay-fill:not(.norows) #wbc-stats::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(90deg, #a8a294 0 1px, #fff 1px 2px);
}

#wbconfirm.inlay-fill.recipe #wbc-title,
#wbconfirm.inlay-fill.recipe #wbc-sub { width: calc(var(--inw) - 292px) !important; }

#wbconfirm.inlay-fill.recipe #wbc-title { font-size: 12px; }
#wbconfirm.inlay-fill #wbc-recipe {
  top: 7px !important;
  left: auto !important;
  right: 10px;
  width: 200px !important;
  height: 52px !important;
}

.xp-sb[data-sb-for='cl-cat-list'] { width: 12px; }
.xp-sb[data-sb-for='cl-cat-list'] .xp-sb-btn { width: 12px; }
.xp-sb[data-sb-for='cl-cat-list'] .xp-sb-thumb { width: 10px; }

.wb-arrow.idle i { animation: none; }

#benchapp:has(#wbconfirm.inlaid) #wb-tab-trade #wb-odds-col,
#benchapp:has(#wbconfirm.inlaid) #wb-tab-trade #wb-craft { display: none; }

#benchapp:has(#wbconfirm.inlaid) #wb-bench {
  padding-top: 0;
  padding-bottom: 0;
  align-content: center;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
#benchapp:has(#wbconfirm.inlaid) #wb-tab-trade #wb-machine {
  grid-column: 1;
  grid-row: 1;
  gap: 10px;
}

#benchapp:has(#wbconfirm.inlaid) .wb-arrow { height: 21px; gap: 4px; }
#benchapp:has(#wbconfirm.inlaid) .wb-arrow i {
  width: 15px;
  height: 21px;
  background:
    linear-gradient(#a1520a, #a1520a) 0 0 / 6px 3px no-repeat,
    linear-gradient(#a1520a, #a1520a) 3px 3px / 6px 3px no-repeat,
    linear-gradient(#a1520a, #a1520a) 6px 6px / 6px 3px no-repeat,
    linear-gradient(#a1520a, #a1520a) 9px 9px / 6px 3px no-repeat,
    linear-gradient(#a1520a, #a1520a) 6px 12px / 6px 3px no-repeat,
    linear-gradient(#a1520a, #a1520a) 3px 15px / 6px 3px no-repeat,
    linear-gradient(#a1520a, #a1520a) 0 18px / 6px 3px no-repeat;
}

#benchapp:has(#wbconfirm.inlaid) .wb-well { pointer-events: none; }

#benchapp:has(#wbconfirm.inlaid) .wb-well {
  width: 58px;
  height: 58px;
}

#benchapp:has(#wbconfirm.inlaid) #wb-tab-craft .wb-well {
  width: 48px;
  height: 48px;
}

#benchapp:has(#wbconfirm.inlaid) #wb-tab-craft .wb-arrow { height: 14px; gap: 3px; }
#benchapp:has(#wbconfirm.inlaid) #wb-tab-craft .wb-arrow i {
  width: 10px;
  height: 14px;
  background:
    linear-gradient(#a1520a, #a1520a) 0 0 / 4px 2px no-repeat,
    linear-gradient(#a1520a, #a1520a) 2px 2px / 4px 2px no-repeat,
    linear-gradient(#a1520a, #a1520a) 4px 4px / 4px 2px no-repeat,
    linear-gradient(#a1520a, #a1520a) 6px 6px / 4px 2px no-repeat,
    linear-gradient(#a1520a, #a1520a) 4px 8px / 4px 2px no-repeat,
    linear-gradient(#a1520a, #a1520a) 2px 10px / 4px 2px no-repeat,
    linear-gradient(#a1520a, #a1520a) 0 12px / 4px 2px no-repeat;
}
#benchapp:has(#wbconfirm.inlaid) .wb-well canvas.wb-well-art {
  width: 42px;
  height: 42px;
}
#benchapp:has(#wbconfirm.inlaid) #wb-out-well,
#benchapp:has(#wbconfirm.inlaid) #wb-rep-out-well,
#benchapp:has(#wbconfirm.inlaid) #wb-sal-out-well,
#benchapp:has(#wbconfirm.inlaid) #wb-cool-out-well {
  width: 58px;
  height: 58px;
}
#benchapp:has(#wbconfirm.inlaid) #wb-bp-out-well { width: 48px; height: 48px; }
#benchapp:has(#wbconfirm.inlaid) #wb-out-well canvas,
#benchapp:has(#wbconfirm.inlaid) #wb-rep-out-well canvas,
#benchapp:has(#wbconfirm.inlaid) #wb-sal-out-well canvas,
#benchapp:has(#wbconfirm.inlaid) #wb-bp-out-well canvas,
#benchapp:has(#wbconfirm.inlaid) #wb-cool-out-well canvas {
  width: 42px;
  height: 42px;
}

/* AND THE SAME PAIR FOR A WELL THAT HOLDS MORE THAN ONE (owner, 2026-08-28).
   ---------------------------------------------------------------------
   THE SALVAGE CONFIRM WAS CUTTING ITS OWN SCRAP IN HALF. A salvage pays up to
   three scrap and paintBench() draws one canvas each, which is what .multi
   above exists for: the well goes width:auto and the art drops to 30px so the
   row fits. But the salvage confirm is INLAID into the bench, and the two
   rules above are `#benchapp:has(...) #id` - a whole id more specific than
   `#id.multi` - so in the one state a player actually sees this window, the
   well was pinned at 58px with three 42px canvases inside it. Two of the three
   ran off the end and `overflow: hidden` sheared them against the box edge.

   The fix is the missing half of the same pattern, at the same specificity, so
   .multi survives the inlay. 34px keeps the scrap readable and three of them
   plus the gaps come to 114px - the bench row is 400px wide, centred, and is
   carrying 233px today, so nothing else moves. THE HEIGHT IS UNTOUCHED at 58:
   the row must not get taller (standing owner order on window size). */
#benchapp:has(#wbconfirm.inlaid) #wb-out-well.multi,
#benchapp:has(#wbconfirm.inlaid) #wb-rep-out-well.multi,
#benchapp:has(#wbconfirm.inlaid) #wb-sal-out-well.multi,
#benchapp:has(#wbconfirm.inlaid) #wb-bp-out-well.multi,
#benchapp:has(#wbconfirm.inlaid) #wb-cool-out-well.multi {
  width: auto;
}
#benchapp:has(#wbconfirm.inlaid) #wb-out-well.multi canvas,
#benchapp:has(#wbconfirm.inlaid) #wb-rep-out-well.multi canvas,
#benchapp:has(#wbconfirm.inlaid) #wb-sal-out-well.multi canvas,
#benchapp:has(#wbconfirm.inlaid) #wb-bp-out-well.multi canvas,
#benchapp:has(#wbconfirm.inlaid) #wb-cool-out-well.multi canvas {
  width: 34px;
  height: 34px;
}

.w95-button,
.filter-chip,
.soc-seg,
.pw-btn,
.icon-key,
.pv-rent,
.wb-go,
.wb-clear,
.wb-collect,
#bank-claim,
#bank-claim.frozen,
#bank-ref-ok,
#pv-withdraw,
#pv-viewpool,
#pv-risk-more,
#pv-crack-view,
#pv-locked-ask,
#pool-copy,
#cl-cat-btn,
#pf-chain,
#pf-close,
#pe-save,
#pe-discard,
#e-readall,
#gbox.danger-keys #gbox-ok,
#gbox.danger-keys #gbox-cancel,
#pvrent.inlay-fill #pvrent-yes,
#pvrent.inlay-fill #pvrent-no,
#pvstake.inlay-fill #pvs-ok,
#pvstake.inlay-fill #pvs-no,
#pvresult.inlay-fill #pvr-ok,
#pvresult.inlay-fill.twobtn #pvr-ok,
#wbconfirm.inlay-fill.bench-keys #wbc-ok,
#wbconfirm.inlay-fill.bench-keys #wbc-no,
#profapp.inlay-fill #pf-chain,
#profapp.inlay-fill #pf-close,
#profapp.inlay-fill #pf-desc-btn {
  --k-cap: #ffffff;
  --k-top: #f3f2ed;
  --k-bot: #e5e1d4;
  --k-deep: #d8d0c1;
  --k-ring: #5f83b9;
  --k-ink: #14161c;
  --k-lift: rgba(255, 255, 255, 0.55);

  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;

  text-indent: 1px;
  color: var(--k-ink);
  text-shadow: 0 1px 0 var(--k-lift);
  cursor: pointer;
  background-color: transparent;
  background-image: linear-gradient(
    var(--k-cap) 0 2px,
    var(--k-top) 2px 55%,
    var(--k-bot) 55% 92%,
    var(--k-deep) 92%);
  box-shadow:
    inset 0 0 0 1px var(--k-ring),
    0 1px 0 rgba(0, 0, 0, 0.22);
}

.w95-button:hover:not(:disabled):not(.off),
.filter-chip:hover:not(:disabled),
.soc-seg:hover:not(:disabled),
.pw-btn:hover:not(:disabled):not(.off),
.icon-key:hover:not(:disabled),
.pv-rent:hover:not(:disabled),
.wb-go:hover:not(:disabled),
.wb-clear:hover:not(:disabled),
.wb-collect:hover:not(:disabled),
#bank-claim:hover:not(:disabled),
#bank-ref-ok:hover:not(:disabled),
#bank-chain:hover:not(:disabled),
#pv-withdraw:hover:not(:disabled),
#pv-viewpool:hover:not(:disabled),
#pv-stake-btn:hover:not(:disabled),
#pv-risk-more:hover:not(:disabled),
#pv-crack-view:hover:not(:disabled),
#pv-locked-ask:hover:not(:disabled),
#pool-copy:hover:not(:disabled),
#cl-cat-btn:hover:not(:disabled),
#pf-chain:hover:not(:disabled),
#pf-close:hover:not(:disabled),
#pf-desc-btn:hover:not(:disabled),
#pe-save:hover:not(:disabled),
#pe-discard:hover:not(:disabled),
#e-readall:hover:not(:disabled),
#wbc-lock:hover:not(:disabled),
#gbox.danger-keys #gbox-ok:hover:not(:disabled),
#gbox.danger-keys #gbox-cancel:hover:not(:disabled),
#pvrent.inlay-fill #pvrent-yes:hover:not(:disabled),
#pvrent.inlay-fill #pvrent-no:hover:not(:disabled),
#pvstake.inlay-fill #pvs-ok:hover:not(:disabled),
#pvstake.inlay-fill #pvs-no:hover:not(:disabled),
#pvresult.inlay-fill #pvr-ok:hover:not(:disabled),
#pvresult.inlay-fill.twobtn #pvr-ok:hover:not(:disabled),
#wbconfirm.inlay-fill.bench-keys #wbc-ok:hover:not(:disabled),
#wbconfirm.inlay-fill.bench-keys #wbc-no:hover:not(:disabled),
#profapp.own #pf-close:hover:not(:disabled),
#profapp.own #pf-desc-btn:hover:not(:disabled),
#profapp.inlay-fill #pf-chain:hover:not(:disabled),
#profapp.inlay-fill #pf-close:hover:not(:disabled),
#profapp.inlay-fill #pf-desc-btn:hover:not(:disabled) {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.26) 0 0),
    linear-gradient(
      var(--k-cap) 0 2px,
      var(--k-top) 2px 55%,
      var(--k-bot) 55% 92%,
      var(--k-deep) 92%);
  box-shadow:
    inset 0 0 0 1px var(--k-ring),
    0 1px 0 rgba(0, 0, 0, 0.22);
}

.w95-button:active:not(:disabled):not(.off),
.filter-chip:active:not(:disabled),
.soc-seg:active:not(:disabled),
.pw-btn:active:not(:disabled):not(.off),
.icon-key:active:not(:disabled),
.pv-rent:active:not(:disabled),
.wb-go:active:not(:disabled),
.wb-clear:active:not(:disabled),
.wb-collect:active:not(:disabled),
#bank-claim:active:not(:disabled),
#bank-ref-ok:active:not(:disabled),
#bank-chain:active:not(:disabled),
#pv-withdraw:active:not(:disabled),
#pv-viewpool:active:not(:disabled),
#pv-stake-btn:active:not(:disabled),
#pv-risk-more:active:not(:disabled),
#pv-crack-view:active:not(:disabled),
#pv-locked-ask:active:not(:disabled),
#pool-copy:active:not(:disabled),
#cl-cat-btn:active:not(:disabled),
#pf-chain:active:not(:disabled),
#pf-close:active:not(:disabled),
#pf-desc-btn:active:not(:disabled),
#pe-save:active:not(:disabled),
#pe-discard:active:not(:disabled),
#e-readall:active:not(:disabled),
#wbc-lock:active:not(:disabled),
#gbox.danger-keys #gbox-ok:active:not(:disabled),
#gbox.danger-keys #gbox-cancel:active:not(:disabled),
#pvrent.inlay-fill #pvrent-yes:active:not(:disabled),
#pvrent.inlay-fill #pvrent-no:active:not(:disabled),
#pvstake.inlay-fill #pvs-ok:active:not(:disabled),
#pvstake.inlay-fill #pvs-no:active:not(:disabled),
#pvresult.inlay-fill #pvr-ok:active:not(:disabled),
#pvresult.inlay-fill.twobtn #pvr-ok:active:not(:disabled),
#wbconfirm.inlay-fill.bench-keys #wbc-ok:active:not(:disabled),
#wbconfirm.inlay-fill.bench-keys #wbc-no:active:not(:disabled),
#profapp.own #pf-close:active:not(:disabled),
#profapp.own #pf-desc-btn:active:not(:disabled),
#profapp.inlay-fill #pf-chain:active:not(:disabled),
#profapp.inlay-fill #pf-close:active:not(:disabled),
#profapp.inlay-fill #pf-desc-btn:active:not(:disabled) {
  transform: translateY(1px);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.14) 0 0),
    linear-gradient(var(--k-bot) 0 55%, var(--k-deep) 55%);
  box-shadow: inset 0 0 0 1px var(--k-ring);
}
.w95-button:active > *,
.pw-btn:active > *,
.icon-key:active > *,
.wb-go:active > *,
.wb-clear:active > *,
.wb-collect:active > * { transform: none; }

.w95-button:disabled,
.filter-chip:disabled,
.soc-seg:disabled,
.pw-btn:disabled,
.pw-btn.off,
.icon-key:disabled,
.pv-rent:disabled,
.wb-go:disabled,
.wb-clear:disabled,
.wb-collect:disabled,
#bank-ref-ok:disabled,
#pv-withdraw:disabled,
#pv-viewpool:disabled,
#wbc-lock:disabled,

#cl-cat-btn:disabled,
#cl-mint-buy:disabled,

#e-readall:disabled,
#pvrent.inlay-fill #pvrent-yes:disabled {
  --k-cap: #f6f5f1;
  --k-top: #ece9e4;
  --k-bot: #dfdbcf;
  --k-deep: #cfcabb;
  --k-ring: #b3ad9c;
  --k-ink: #a49e8e;
  --k-lift: rgba(255, 255, 255, 0.6);
  cursor: default;
  transform: none;
  box-shadow: inset 0 0 0 1px var(--k-ring);
}

.wb-collect,

#wbc-lock,
#bank-claim,
#pe-save,
#pv-withdraw,
#pv-stake-btn,
#gbox.danger-keys #gbox-cancel,
#pvrent.inlay-fill #pvrent-yes,
#pvstake.inlay-fill #pvs-ok,
#pvresult.inlay-fill.twobtn #pvr-ok,
#wbconfirm.inlay-fill.bench-keys #wbc-ok {
  --k-cap: #d8f5cf;
  --k-top: #7fd472;
  --k-bot: #4fae42;
  --k-deep: #37852c;
  --k-ring: #245c1c;
  --k-ink: #06280a;
  --k-lift: #a9e6a4;
}

.wb-clear,
#pe-discard,
#bank-claim.frozen,
#gbox.danger-keys #gbox-ok,
#pvrent.inlay-fill #pvrent-no,
#pvstake.inlay-fill #pvs-no,
#wbconfirm.inlay-fill.bench-keys #wbc-no {
  --k-cap: #e8877a;
  --k-top: #cf4b39;
  --k-bot: #b0301f;
  --k-deep: #8e2415;
  --k-ring: #5e1109;
  --k-ink: #14161c;
  --k-lift: rgba(255, 255, 255, 0.32);
}

#bank-claim.frozen { --k-ink: #ffffff; --k-lift: rgba(0, 0, 0, 0.45); }

/* THE CLAIM KEY IS GREY WHILE THE CLAIM FREEZE RUNS (R9-07-02).
   ---------------------------------------------------------------------
   A green key with a hand cursor is a promise, and for the first twelve hours
   this one cannot keep it: POST /v1/claim answers 409 CLAIM_FROZEN. House law
   is that a greyed button is not a button - no hand cursor, no click sound -
   so renderBank() marks it aria-disabled for the freeze's duration and this is
   what that looks like. The palette is the SAME SEVEN VALUES the shared
   `.w95-button:disabled` block already uses, so the key greys the way every
   other dead key in the game greys.

   aria-disabled AND NOT [disabled]: the press has to keep landing, because it
   is the claim tour's only trigger and that tour is what reveals the red
   countdown. js/desktop.js's document-level pointerdown sound handler already
   reads aria-disabled, so the click sound is off without a line here.

   NOT WHEN .frozen. That is the countdown the tour reveals - the key IS the
   timer by then, it is red on purpose and already cursor: default - and
   greying it would delete the payoff of a whole tutorial.

   The freeze caption (`#bank-claim[title]...::after`, four rules up) is
   unaffected and still prints the sentence in the band, which is what a touch
   player reads without a press. NOTHING IS RESIZED: only colours and the
   cursor change. */
#bank-claim[aria-disabled="true"]:not(.frozen),
#bank-claim[aria-disabled="true"]:not(.frozen):hover,
#bank-claim[aria-disabled="true"]:not(.frozen):active {
  --k-cap: #f6f5f1;
  --k-top: #ece9e4;
  --k-bot: #dfdbcf;
  --k-deep: #cfcabb;
  --k-ring: #b3ad9c;
  --k-ink: #a49e8e;
  --k-lift: rgba(255, 255, 255, 0.6);
  cursor: default;
  transform: none;
  /* The hover and active rules above paint a second, lifted gradient layer
     over the key. They exempt [disabled] and cannot exempt an attribute that
     was written after them, so the flat face is restated here: a key that
     lights under the pointer is a key, whatever colour it is. */
  background-image: linear-gradient(
    var(--k-cap) 0 2px,
    var(--k-top) 2px 55%,
    var(--k-bot) 55% 92%,
    var(--k-deep) 92%);
  box-shadow: inset 0 0 0 1px var(--k-ring);
}

.pv-rent,
#bank-ref-ok,
#pv-crack-view,
#cl-cat-btn,
#pf-chain,
#profapp.inlay-fill #pf-chain,
#profapp.inlay-fill #pf-desc-btn {
  --k-cap: #f0b071;
  --k-top: #d3822c;
  --k-bot: #b85f0e;
  --k-deep: #a1520a;
  --k-ring: #6f3705;
  --k-ink: #26160a;
  --k-lift: rgba(255, 214, 160, 0.65);
}

.wb-go,
#pv-viewpool,
#pv-risk-more,
#pool-copy,

#cl-mint-buy,
#pf-close,
/* SOLSCAN. Blue is the desk's "this opens something outside the game" colour
   and it already had a group - the chainlink text on the Chuds tab is the
   same #4a6fa5 family. */
#bank-chain,
#pvresult.inlay-fill #pvr-ok,
#profapp.inlay-fill #pf-close {
  --k-cap: #b9dcfa;
  --k-top: #5b9fe0;
  --k-bot: #2f6cb4;
  --k-deep: #24548c;
  --k-ring: #16406e;
  --k-ink: #14161c;
  --k-lift: rgba(255, 255, 255, 0.34);
}

.w95-button.w95-default {
  --k-ring: #003c74;
  box-shadow:
    inset 0 0 0 1px #003c74,
    inset 0 0 0 2px #7eaef0,
    0 1px 0 rgba(0, 0, 0, 0.22);
}
.w95-button.w95-default:hover:not(:disabled) {
  box-shadow:
    inset 0 0 0 1px #003c74,
    inset 0 0 0 2px #a8cff5,
    0 1px 0 rgba(0, 0, 0, 0.22);
}
.w95-button.w95-default:active:not(:disabled) {
  box-shadow: inset 0 0 0 1px #003c74, inset 0 0 0 2px #7eaef0;
}

#pv-locked-ask {
  --k-cap: #33200f;
  --k-top: #211407;
  --k-bot: #170e05;
  --k-deep: #100903;
  --k-ring: #a1520a;
  --k-ink: #f0b165;
  --k-lift: rgba(0, 0, 0, 0.6);
}
#pv-locked.chuds #pv-locked-ask {
  --k-cap: #163a1f;
  --k-top: #0f2a16;
  --k-bot: #0a1d0f;
  --k-deep: #061208;
  --k-ring: #2e8b3f;
  --k-ink: #8ee89a;
  --k-lift: rgba(0, 0, 0, 0.6);
}

#pwarn-cancel {
  --k-ring: #14401d;
  box-shadow:
    inset 0 0 0 1px #14401d,
    inset 0 0 0 2px #63ad72,
    0 1px 0 rgba(0, 0, 0, 0.22);
}
#pwarn-cancel:hover {
  box-shadow:
    inset 0 0 0 1px #14401d,
    inset 0 0 0 2px #7cc48b,
    0 1px 0 rgba(0, 0, 0, 0.22);
}

.wb-go { padding: 0 14px 0 15px; }

/* THE SQUARE ICON BUTTON ON AN OVERCLOCK ROW. Install and Play are one
   control - same size, same place, same bevel - and the only thing that
   changes between them is --pw-icon, so the hover and active states below are
   written once and both glyphs get them. Play used to be a 42px text button
   with a different right margin, which made the row's right-hand column jump
   about the moment a game finished installing. */
#pw-list .pw-btn.pw-ico {
  width: 20px;
  height: 20px;

  margin-right: 10px;
  position: relative;
  top: -1px;
  border-radius: 3px;
  overflow: hidden;
  background-color: transparent;
  background-image:
    var(--pw-icon),
    linear-gradient(
      var(--k-cap) 0 2px,
      var(--k-top) 2px 55%,
      var(--k-bot) 55% 92%,
      var(--k-deep) 92%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 16px 16px, 100% 100%;
  box-shadow:
    inset 0 0 0 1px var(--k-ring),
    0 1px 0 rgba(0, 0, 0, 0.22);
}
#pw-list .pw-btn.pw-dl { --pw-icon: url('../assets/downloadicon.png'); }
#pw-list .pw-btn.pw-play { --pw-icon: url('../assets/play.png'); }

#pw-list .pw-btn.pw-ico:hover:not(:disabled) {
  background-image:
    var(--pw-icon),
    linear-gradient(rgba(255, 255, 255, 0.26) 0 0),
    linear-gradient(
      var(--k-cap) 0 2px,
      var(--k-top) 2px 55%,
      var(--k-bot) 55% 92%,
      var(--k-deep) 92%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  background-size: 16px 16px, 100% 100%, 100% 100%;
}
#pw-list .pw-btn.pw-ico:active:not(:disabled) {
  transform: translateY(1px);
  background-image:
    var(--pw-icon),
    linear-gradient(rgba(0, 0, 0, 0.14) 0 0),
    linear-gradient(var(--k-bot) 0 55%, var(--k-deep) 55%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  background-size: 16px 16px, 100% 100%, 100% 100%;
  box-shadow: inset 0 0 0 1px var(--k-ring);
}

.filter-chip.on,
.soc-seg.on {
  --k-cap: #cfc9ba;
  --k-top: #ddd8c9;
  --k-bot: #e9e5d8;
  --k-deep: #f2efe4;
  box-shadow:
    inset 1px 1px 0 #8e887a,
    inset -1px -1px 0 #fff,
    inset 0 0 0 1px var(--k-ring);
}

#wbconfirm.inlay-fill.inlay-strip #wbc-title,
#wbconfirm.inlay-fill.inlay-strip #wbc-sub,
#wbconfirm.inlay-fill.inlay-strip #wbc-hr1,
#wbconfirm.inlay-fill.inlay-strip #wbc-well,
#wbconfirm.inlay-fill.inlay-strip #wbc-recipe { display: none !important; }

#wbconfirm.inlay-fill.inlay-strip #wbc-pcol {
  top: 8px !important;
  left: 10px !important;
  width: 140px !important;
  height: 36px !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
#wbconfirm.inlay-fill.inlay-strip #wbc-plabel {
  top: 0 !important;
  left: 0 !important;
  width: 140px !important;
  font-size: 9px !important;
  line-height: 12px !important;
  text-align: left !important;
}
#wbconfirm.inlay-fill.inlay-strip #wbc-price {
  top: 12px !important;
  left: 0 !important;
  width: 140px !important;
  font-size: 22px !important;
  line-height: 24px !important;
  text-align: left !important;
}

#wbconfirm.inlay-fill.inlay-strip #wbc-pnote { display: none !important; }

#wbconfirm.inlay-fill.inlay-strip #wbc-stats {
  top: 8px !important;
  left: 158px !important;
  width: 148px !important;
  height: 36px !important;
  max-height: none !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 18px;
  column-gap: 8px;
  background: none !important;
  box-shadow: none !important;
}
#wbconfirm.inlay-fill.inlay-strip .wbc-stats-title { display: none !important; }
#wbconfirm.inlay-fill.inlay-strip #wbc-stats .pv-kv {
  height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 9px;
}
#wbconfirm.inlay-fill.inlay-strip #wbc-stats .pv-kv .k .pf-cube {
  width: 6px;
  height: 6px;
  margin-right: 4px;
}
#wbconfirm.inlay-fill.inlay-strip #wbc-stats .pv-kv .v { font-size: 9px; }

#wbconfirm.inlay-fill.inlay-strip.finebox #wbc-fine {
  top: 15px !important;
  left: auto !important;
  right: 10px !important;
  width: 114px !important;
  height: 22px !important;
  padding: 0 6px !important;
  font-size: 9px !important;
}
#wbconfirm.inlay-fill.inlay-strip.finebox #wbc-fine b { font-size: 11px !important; }

#wb-cool-list.cool-pick { padding-top: 10px; padding-bottom: 0; }
#wb-cool-list.cool-pick .slot-row.cool-pickrow {
  height: 46px;
  box-sizing: border-box;
  margin: 0 4px 10px 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 4px;
}
#wb-cool-list.cool-pick .slot-row + .slot-row { border-top: none; }
#wb-cool-list.cool-pick .wb-ring {
  flex: none;
  width: 34px;
  height: 34px;
}
#wb-cool-list.cool-pick .it-lab {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
#wb-cool-list.cool-pick .it-name {
  font-size: 11px;
  line-height: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#wb-cool-list.cool-pick .it-sub {
  font-size: 9px;
  line-height: 11px;
  color: #6c6c6c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#wb-cool-list.cool-pick .slot-row.sel {
  background: #dce6f4;
  box-shadow: inset 0 0 0 1px #2f6cb4;
}

#wb-cool-list.cool-pick .slot-row.tour-spent { opacity: 0.45; }

#wb-cool-list.cool-pick .slot-row::after,
#wb-bp-scrap.cool-side .slot-row::after {
  width: 3px;
  height: 24px;
  margin-right: 4px;
  background-image: repeating-linear-gradient(#a8a294 0 3px, transparent 3px 7px);
}

#wb-bp-scrap.cool-side .wb-ring {
  flex: none;
  width: 34px;
  height: 34px;
}
#wb-bp-scrap.cool-side .it-name { line-height: 13px; }

#wb-cool-list.cool-pick,
#wb-bp-scrap.cool-side { padding-top: 6px; }
#wb-bp-scrap.cool-side .slot-row::after { margin-right: 3px; }

#mgate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #0b1220;

  touch-action: none;
}

#mg-win {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 480px;
  height: 488px;
  transform: translate(-50%, -50%) scale(var(--mg-s, 1));
  transform-origin: center center;
}
#mg-win .w95-scale { width: 240px; height: 244px; }

/* THE TITLE SITS UNDER THE TITLEBAR, NOT THROUGH IT (owner, 2026-08-25).
   It was at top:10 with a 22px line box, and .w95-titlebar is 21px tall, so
   every one of the three headings rendered straight over
   "chud_simulator_display.exe". 24 clears it by 3px.

   AND IT FITS THE WIDEST OF THE THREE. Measured in the DOM at the shipped
   weight, the copy in js/mobile.js runs: FULLSCREEN REQUIRED, THIS WINDOW IS
   TOO TALL, and the worst case TURN YOUR DEVICE SIDEWAYS. At the old
   16px/1px that last one was 283px against a 240px window - a third of it
   hung off both edges. 13px/0.5px still measures 223px in the 224px box,
   which fits and reads as though it does not; 12px/0.5px brings it to 207px
   and leaves 8px of air a side. The box is inset 8px as a second guard: a
   heading that ever does outgrow it is ellipsised rather than bleeding into
   the frame. */
#mg-title {
  top: 24px;
  left: 8px;
  width: 224px;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #2a2418;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* EVERYTHING BELOW MOVED UP TO PAY FOR THE TITLE'S NEW ROW, and the window
   is the same 240x244 it always was - the standing order is that a window
   never changes size, so the height came out of the picture panel (96 -> 90)
   and the two gaps around it rather than off the bottom. */
#mg-cvbox {
  position: absolute;
  top: 44px;
  left: 14px;
  width: 212px;
  height: 90px;
  box-sizing: border-box;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

/* 84 CSS px against a 168px backing store is EXACTLY 2:1, which is the whole
   reason the canvas keeps its size while the panel around it shrinks -
   image-rendering:pixelated on a fractional ratio turns the phone's edges to
   mush, and the phone is drawn a block at a time precisely so it does not. */
#mg-cv {
  position: absolute;
  top: 47px;
  left: 78px;
  width: 84px;
  height: 84px;
  image-rendering: pixelated;
}

#mg-sub {
  top: 138px;
  left: 14px;
  width: 212px;
  height: 60px;
  box-sizing: border-box;
  padding: 0 8px;
  line-height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

#mg-rule { top: 203px; left: 10px; width: 220px; }

/* NO BUTTON, NO GROOVE - see paint() in js/mobile.js. The copy panel runs
   down to where the button's own bottom edge was (209 + 26), so the window
   keeps its shape and the text sits centred in the space instead of hanging
   above a rule with nothing under it. */
#mg-win.nokey #mg-rule { display: none; }
#mg-win.nokey #mg-sub { height: 97px; }

#mg-go {
  top: 209px;
  left: 46px;
  width: 148px;
  height: 26px;
  font-size: 13px;
  letter-spacing: 0.5px;
}

body.gated #scene-desktop,
body.gated .scene { pointer-events: none; }

/* The mobile gate's dev override button was styled here. The button turned
   the gate off for the whole session in one click and it is deleted with the
   rest of the dev surface (js/mobile.js). The gate has no way out now. */

.scene-quit { display: none; }
/* NO QUIT WHILE THE TOUR IS WAITING ON THE GAME (owner, 2026-08-24). The
   scene wears .scene-tour-locked for as long as the overclock tour's handoff
   is pending (js/stake.js), and quitStep refuses for the same reason. On a
   desktop this changes nothing - the corner button never shows there and
   Escape is the only exit - but on touch it is the only exit, and leaving it
   on screen refusing to work would be a button that is not a button. */
.scene.scene-tour-locked .scene-quit { display: none !important; }
/* AND NO QUIT WHILE ANY RUN IS IN FLIGHT (owner, 2026-08-25). The rule above
   covered ONE case - the overclock tour's handoff into Shuffle - and this is
   the general one: a launch costs nothing and a cooldown starts only on a WIN,
   so quitting a run you can see going badly and relaunching was a free
   re-roll. body.run-locked is written by exactly one function,
   js/api/minigames.js setRunLock(), and js/desktop.js runLocked() reads the
   same flag for the click handler - so the button that is not drawn and the
   button that refuses to work can never disagree. */
body.run-locked .scene .scene-quit { display: none !important; }
body.touch-desk .scene-quit {
  display: grid;
  place-items: center;
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 55;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #14161c;
  border-radius: 0;
  color: #f2efe4;
  background-image: linear-gradient(
    #6d7686 0 2px,
    #4a5162 2px 38%,
    #333a48 38% 78%,
    #262c38 78% 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}
body.touch-desk .scene-quit svg { width: 18px; height: 18px; display: block; }
body.touch-desk .scene-quit:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.scene-input {
  position: absolute;
  z-index: 40;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  font-family: inherit;
  -webkit-text-fill-color: transparent;

  opacity: 0.01;
}
.scene-input::selection { background: transparent; }

.w95-xhit,
.w95-helphit {
  position: absolute;
  top: 0;
  z-index: 5;
  width: calc(46px / var(--win-scale, 1));
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
}
.w95-xhit { right: 0; }

/* SIX DEAD PIXELS BETWEEN HELP AND CLOSE (R3-43, A8-W-6). The two hits used
   to share an edge exactly - 46 x 17 each, help at 438-484 and close at
   484-530 on chudnet.exe at 667x375 - so a thumb that overshot the "?" by one
   pixel closed the app instead. The help hit moves 6 px further from the
   corner and NEITHER TARGET SHRINKS: both stay 46 px wide, the "?" glyph
   (measured 454.9-466.3) stays well inside its own hit, and what lands in the
   6 px band is the title bar, which starts a drag and undoes itself.
   THE 17 px HEIGHT IS NOT A BUG AND IS DELIBERATELY LEFT: 42px is the title
   bar's own height in window pixels, and it is the one dimension NOT divided
   by --win-scale precisely so the hit cannot reach past the bar and take taps
   from the window's content. A8 did not ask for it either. */
.w95-helphit { right: calc(52px / var(--win-scale, 1)); }

.win95-window.inlaid .w95-xhit,
.win95-window.inlaid .w95-helphit { display: none; }

/* =====================================================================
   THE OVERCLOCK TOUR'S TWO COMPULSORY TAPS (A8R2-04, 2026-08-30).
   =====================================================================
   A8 measured the install icon at 15 x 15 CSS px on a 667 x 375 phone
   (--win-scale 0.3677, and the .w95-scale transform on top of it), and one
   step later the play icon at the same 15 x 15 in the same place. Both are
   .tut-target on steps that carry body.tour-act, so every other window is off,
   SPACE does not advance an action step, and the intro skip is a keyboard
   hold: on a phone these two icons are the ONLY way the tour can continue.
   The rest of the tour asks for a 65 x 73 desktop icon, a 150 x 27 drawer row,
   a 106 x 27 bench slot and a 233 x 18 button. WCAG 2.5.8 asks 24 x 24.

   THE WINDOW IS NOT RESIZED AND NEITHER IS THE ICON. The standing owner order
   holds and A8 did not ask for either - it filed the combination of a tiny
   target with everything else switched off. So the HIT AREA grows and nothing
   that is drawn moves: a transparent ::after on the icon, five window pixels
   proud on each side, which at this scale is about ten screen pixels and takes
   a 15 px tap to about 35 - a finger pad is roughly 34. Divided by --win-scale
   for the same reason .w95-xhit above is, so it measures the same on screen at
   every desk size.

   IT EXISTS ONLY WHILE THE TOUR IS POINTING AT THE ICON, on a coarse pointer.
   .tut-target is written by the tour and by nothing else, and while it is up
   every neighbouring control in the row is pointer-events:none under the lock,
   so a slop that reaches over them cannot take a press away from anything.
   overflow is opened because #pw-list .pw-btn.pw-ico hides it to clip its own
   border-radius, and the button has no element children to spill. */
body.touch-desk #pw-list .pw-btn.pw-ico.tut-target { overflow: visible; }
body.touch-desk #pw-list .pw-btn.pw-ico.tut-target::after {
  content: '';
  position: absolute;
  inset: calc(-5px / var(--win-scale, 1));
  background: transparent;
}

body.touch-desk .w95-help { right: calc(34.5px / var(--win-scale, 1) - 7px); }

.entry-line {
  position: absolute;
  top: 104px;
  left: 10px;
  width: 260px;
  height: 13px;
  line-height: 13px;
  text-align: center;
  font-weight: 700;
  overflow: hidden;
}

.entry-line.ok { color: #1d6b1a; }
.entry-line.ok::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80px;
  width: 80px;
  background-image: linear-gradient(90deg,
    rgba(120, 200, 110, 0) 0 16px,
    rgba(120, 200, 110, 0.20) 16px 32px,
    rgba(120, 200, 110, 0.44) 32px 48px,
    rgba(120, 200, 110, 0.20) 48px 64px,
    rgba(120, 200, 110, 0) 64px 80px);
  animation: entry-granted 1.2s steps(22) 1 forwards;
  pointer-events: none;
}
@keyframes entry-granted {
  from { translate: 0 0; }
  to   { translate: 352px 0; }
}

#pw-rail {
  position: absolute;
  top: 84px;
  left: 10px;
  width: 260px;
  height: 14px;
  display: flex;
  gap: 2px;
  pointer-events: none;
}

/* The rail counts 1 Link, 2 Auth, 3 Mint, 4 Play, which is a thing to say to a
   wallet that has never been in. The lockout step is shown to a player who is
   already registered and has a desk behind this window; there is no step 1
   left for them to do. */
#pw-rail[data-step="code"],
#pw-rail[data-step="lockout"] { display: none; }

/* THE PAYWALL IS MODAL, AND ITS BEING UP IS WHAT SAYS SO.
   ---------------------------------------------------------------------
   #scene-desktop.locked is the entry lock and it is NOT enough on its own for
   two reasons, both of which only show up once the window can appear
   mid-session:

     1. IT COVERS THE DESK, NOT THE DESK'S WINDOWS. .locked greys the icons,
        the taskbar and Start, and that was the whole surface during entry
        because nothing else was open yet. A player who drops under the hold
        with the Workbench, ChudNet and the Bank up has three live windows
        behind this one.

     2. IT IS THE TOUR'S CLASS. js/tutorial.js adds and removes .locked between
        every link of the intro chain, and releaseDesk() takes it off for good
        when the chain finishes. A lockout that leaned on it would be undone by
        a tour ending underneath it, which is exactly when a player is most
        likely to be fiddling with their balance.

   So the fact is the WINDOW, which nothing but the entry flow ever shows or
   hides. .locked stays as it is and keeps doing its job; this sits on top and
   is true for exactly as long as the paywall is up. #gbox is msgBox and it is
   ABOVE the paywall by design, because a refusal you cannot dismiss is worse
   than one you can.

   #freebox WAS NAMED HERE TOO, AS "the entry joke box", UNTIL 2026-09-03
   (R8-DEAD). It was a window nothing in js/ could ever un-hide, so this file
   was exempting a window that never appeared. Deleted with its markup and its
   own six rules; the gravestone is in index.html.

   #tray IS DELIBERATELY ABSENT FROM THIS LIST. .locked already re-enables it
   (`#scene-desktop.locked #tray { pointer-events: auto }`) so the volume
   button works on the entry screen, and it holds exactly two things: the
   volume and the clock. Neither is the game. Taking the mute button away from
   somebody who is locked out with the music still playing would be a worse
   answer than leaving it, and adding #tray here would also change how ENTRY
   has always behaved. */
/* #desktop-stage IS THE DESK SURFACE ITSELF - the wallpaper, #icon-layer and
   the marquee - and it needs its own line because two handlers listen THERE
   rather than on the icons: the touch build's tap-to-open on #icon-layer
   (js/desktop.js ~:1052) and the drag-select on the stage (~:4904). Both guard
   on #scene-desktop.locked, which the tour takes off, so neither was covered.
   .desk-icon stays on the list beside it: pointer-events on an ancestor does
   not stop a descendant that sets `auto`, and .locked does exactly that for
   .desk-icon.tut-target. #paywall is a child of the SCENE, not of the stage,
   so it is not caught by this. */
body:has(#paywall:not(.hidden)) #scene-desktop #desktop-stage,
body:has(#paywall:not(.hidden)) #scene-desktop .desk-icon,
body:has(#paywall:not(.hidden)) #scene-desktop #taskbar,
body:has(#paywall:not(.hidden)) #scene-desktop #start-btn,
body:has(#paywall:not(.hidden)) #scene-desktop .w95-dock,
body:has(#paywall:not(.hidden)) #tutorial,
/* #pwpending IS ON THE EXEMPT LIST (owner, 2026-08-27), and leaving it off was
   half a bug that only showed up once the other half was fixed.

   Signing up asks for the starter rent, and that ask is the ordinary payment
   window - a .win95-window, opened WHILE the entry window is still up. It used
   to open BEHIND #paywall, so nobody ever reached the point of trying to press
   SIGN UP. Raising it to 98 made it visible and this rule still had its
   pointer events off, so the window sat there on top, fully drawn, and ate
   every click: both keys dead, and no way out of the flow.

   It belongs with #gbox for the same reason that one is here. #gbox is exempt
   because a refusal you cannot dismiss is worse than one you can; this one is
   exempt because it is the ONLY thing on screen the player is being asked to
   act on. (This sentence named #freebox as a third until 2026-09-03, R8-DEAD;
   that window is deleted.) */
body:has(#paywall:not(.hidden))
  .win95-window:not(#paywall):not(#gbox):not(#pwpending) {
  pointer-events: none;
}

/* AND #gbox HAS TO BE ABOVE THE PAYWALL, WHICH IT NEVER WAS (measured
   2026-09-05, driving the entry reorder on the devnet world).
   ---------------------------------------------------------------------
   The exemption above and js/desktop.js entryTakesOver ("MSGBOX SURVIVES.
   #gbox is a refusal and it is ABOVE the paywall by design") both describe a
   protection that was only half built: the pointer-events half shipped, the
   STACKING half did not. Measured with a real refusal on screen - #gbox at an
   inline z-index of 51, #paywall.above-dim at 96 from this stylesheet, the box
   at 384-613 x 222-301 entirely inside the window's 317-644 x 95-392, and
   document.elementFromPoint at the middle of the refusal answering #mb-price.
   The player saw nothing at all: pointer events it can keep, since there is
   nothing to click on a window that is not drawn.

   WHY IT SURFACED NOW. The one refusal that reaches msgBox during entry is
   finishEntry's WalletError branch, which only started landing there on
   2026-09-05 (the real-Phantom audit's finding 3 moved it off the username
   error slot) - and the entry reorder puts it on the CONFIRM press, the one
   press in the flow that asks for money.

   97 IS THE NEXT FREE LEVEL AND IT IS AN INSIDE-THE-SCENE NUMBER. #scene-desktop
   is `position: fixed` and forms its own stacking context, so this is compared
   only with its siblings there: windows 20..51, #start-menu / #warn-dim /
   #entry-dim 95, #paywall.above-dim 96. The scene itself paints at 98 (below),
   so #tutorial's 97 is in a different context and does not collide.

   !important, AND SCOPED TO THE PAYWALL BEING UP. raiseWin() writes an INLINE
   z-index from its 50..94 band onto every window it raises, and an inline
   value beats a plain rule - the same collision #paywall solves by clearing
   its own inline number in entryTakesOver. Doing that to #gbox would mean
   teaching a shared helper about one window; overriding it here costs one
   declaration and cannot reach normal play, where raiseWin's band is right and
   a refusal stacks with the windows it belongs to. */
body:has(#paywall:not(.hidden)) #gbox { z-index: 97 !important; }

/* AND IT HAS TO BE THE THING ON TOP, WHICH DURING ENTRY IT NEVER HAD TO BE.
   ---------------------------------------------------------------------
   THE LEVER IS THE SCENE, NOT THE WINDOW, and the reason is a stacking context
   that is easy to miss: #scene-desktop is `position: fixed`, which FORMS ONE.
   So #paywall's z-index - whatever js/desktop.js raiseWin() sets it to, and it
   only ever reaches Z_CEIL 94 - is compared against its siblings INSIDE the
   scene and never against anything outside it. The whole scene then paints as
   one unit at its own level, which is `auto`: underneath #tutorial (97), and
   underneath every game scene, because those are `auto` too and come later in
   the DOM. Raising the window is measurably useless; the browser was right and
   the first attempt at this rule was wrong.

   98 IS CHOSEN BETWEEN TWO NEIGHBOURS. It clears #tut-fx and #scene-intro (96)
   and #tutorial (97), so a player who loses the hold mid-tour reads the window
   rather than Rajesh's shoulder; and it stays under #whiteout (99) and #fader
   (100), so screen transitions still go over the top of everything as they
   always have. The cursor used to be the third neighbour here, #cursor-sprite
   at 1000; it is drawn by the OS now and is above every layer by definition,
   so there is no z-index left to sit under.

   IT LIFTS THE WHOLE DESK ABOVE AN OPEN GAME SCENE TOO, and that is the
   intended reading rather than a side effect: under the hold you are not
   playing, so what you get is the lockout, not the minigame you had open. The
   game scene is untouched underneath and comes back when the hold does. */
/* WIDENED FROM #pw-lockout TO THE WHOLE ENTRY WINDOW (owner, 2026-08-27).
   The lockout was not the only step that can arrive over a desk full of open
   apps: a session that dies mid-game drops the player on 'signin', and that
   one needs the desk lifted for exactly the same reason. The argument in the
   block above is unchanged and applies verbatim - if you are looking at the
   entry window you are not playing, so what you get is the window, not the
   minigame you had open. */
body:has(#paywall:not(.hidden)) #scene-desktop { z-index: 98; }
.entry-step {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #8a8474;
  background-image: linear-gradient(#fbf9f1 0 1px, #eceadf 1px 62%, #ded9c8 62%);
  box-shadow:
    inset 0 0 0 1px #b3ad9c,
    0 1px 0 rgba(0, 0, 0, 0.16);
}

.entry-step i {
  flex: none;
  width: 4px;
  height: 4px;
  background: #b5afa0;
  box-shadow: inset -1px -1px 0 #8f8a7c;
}
.entry-step.done { color: #4a4436; }
.entry-step.done i {
  background: #4aa03f;
  box-shadow: 0 0 3px rgba(74, 160, 63, 0.75), inset -1px -1px 0 #2c6425;
}
.entry-step.live {
  color: #f4e9d2;
  background-image: linear-gradient(#3a352b 0 1px, #4a4436 1px 62%, #57503f 62%);
  box-shadow:
    inset 1px 1px 0 #211e18,
    inset -1px -1px 0 #6f6858;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.entry-step.live i {
  background: #f2a03a;
  animation: tab-lamp 11s ease-in-out infinite;
}

.entry-panel {
  position: absolute;
  top: 122px;
  left: 10px;
  width: 260px;
  height: 46px;
  box-sizing: border-box;
  padding: 2px;
  display: flex;
  flex-direction: column;
  background: #e4e0d2;
  box-shadow:
    inset 1px 1px 0 #a8a294,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #c9c4ae;
}

/* THE CHECK STEP HANGS ITS PANEL IN THE MIDDLE (owner, 2026-08-24). This step
   is the only one that hides #pw-head and has no button under its rule, so
   its whole content used to sit in the top 211px of a 254px window with a
   43px band of nothing below it: 6px of air above the panel and 52px under
   it. The panel is centred in the band between the coin canvas (which ends
   at 150) and the window's own bottom edge (254) - 29px either side - and
   the rule travels with it so it stays the panel's floor rather than cutting
   through it. The WINDOW DOES NOT CHANGE SIZE; only where the panel sits
   inside it does. The rule's own offset lives on the element in index.html. */
.entry-panel.check { top: 179px; }
.entry-head {
  flex: none;
  height: 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5a5344;
  text-shadow: 0 1px 0 #f0ecdd;
  background: #dcd7c5;
  box-shadow:
    inset 1px 1px 0 #b5afa0,
    inset -1px -1px 0 #f6f3e8;
}

.entry-head > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-head b {
  flex: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #8a8474;
  white-space: nowrap;
}
.entry-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.entry-body.col {
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.entry-body.price {
  justify-content: space-between;
  padding: 0 7px;
}

.entry-price {
  font-size: 22px;
  line-height: 24px;
  font-weight: 700;
  color: #a1520a;
  white-space: nowrap;
}

/* THE MINT STEP'S FIGURE IS GREEN (owner, 2026-08-27), where the buy step's is
   the amber every other price on the desk uses. They are asking two different
   things: the buy step's number is money you are SPENDING to get in, and this
   one is a deposit that comes back the day you burn the part. #2e7d32 is the
   desk's existing good-news green - the same one the arena's total staked and
   every positive P&L figure already use - so it is a colour the player has
   been taught rather than a new one. */
#pw-mint .entry-price { color: #2e7d32; }

/* THE .entry-conv RULE WAS HERE AND IT IS DELETED (R12-21-04; owner,
   2026-09-04). It was the small grey conversion line under a price, and it had
   exactly one user in the whole tree: the entry window's #bb-usd, which read
   "~ 2.1 SOL" - 2,100 $CBTC at exactly 1,000 $CBTC per SOL, a peg the owner
   repealed. That span went from index.html and js/desktop.js fetchSolPrice
   stopped writing to it, which left this rule styling nothing at all. Both
   gravestones say the same thing and so does this one: DO NOT RESTORE IT, and
   do not reach for it for a new conversion line - the hold is a static 2,100
   $CBTC and no price on this desk converts to SOL any more. */

.entry-check-line {
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  color: #1c1c1c;
}
.entry-check-sub {
  font-size: 10px;
  line-height: 12px;
  color: #6c6c6c;
}

.entry-live {
  display: flex;
  align-items: center;
  gap: 4px;
}
.entry-live i {
  flex: none;
  width: 4px;
  height: 4px;
  background: #4aa03f;
  box-shadow: inset -1px -1px 0 #2c6425;
  animation: entry-blink 1.3s steps(1) infinite;
}
@keyframes entry-blink {
  0%, 54% { opacity: 1; }
  55%, 100% { opacity: 0.22; }
}

.entry-rule { top: 174px; }
.entry-cap {
  position: absolute;
  top: 210px;
  left: 10px;
  width: 260px;
  height: 13px;
  line-height: 13px;
  text-align: center;
  color: #6c6c6c;
}

.entry-links {
  position: absolute;
  top: 228px;
  left: 10px;
  width: 260px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.entry-links .w95-link {
  position: static;
  transform: none;
  width: auto;
  max-width: none;
}
.entry-linkdot {
  flex: none;
  width: 2px;
  height: 2px;
  background: #8a8474;
}
.entry-err {
  position: absolute;
  top: 228px;
  left: 10px;
  width: 260px;
  height: 13px;
  line-height: 13px;
  text-align: center;
  color: #b00000;
  pointer-events: none;
}

/* THE MINT STEP'S ERROR SLOT IS ONE ROW HIGHER (owner, 2026-09-05). CONFIRM
   is the press that builds, signs and commits now, so a wallet decline and a
   chain refusal land on #pw-mint - and .entry-err's default 228px is the LINKS
   row, which on that panel carries "Wrong wallet? Disconnect". Printing a
   refusal over the only way out of a step is worse than the refusal.

   210px is the CAPTION row, which every entry step already owns, so nothing
   moves and the window does not change size. The caption under it is
   informational - "A deposit you get back. Solana adds its network fee." - and
   it is hidden only while there is something to read instead, exactly as
   #pw-name-hint is on the username step (#paywall.has-err, :9767). visibility
   rather than display, for the same reason as there: the row keeps its space,
   so nothing below it shifts up. */
#pw-mint-err { top: 210px; }
#paywall.has-err #pw-mint .entry-cap { visibility: hidden; }

.entry-key { overflow: hidden; }
.entry-key::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -96px;
  width: 96px;
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0 16px,
    rgba(255, 255, 255, 0.10) 16px 32px,
    rgba(255, 255, 255, 0.26) 32px 48px,
    rgba(255, 255, 255, 0.52) 48px 64px,
    rgba(255, 255, 255, 0.22) 64px 80px,
    rgba(255, 255, 255, 0.08) 80px 96px);
  animation: entry-sheen 4.6s steps(23) infinite;
  pointer-events: none;
}
.entry-key:disabled::after { animation: none; opacity: 0; }
@keyframes entry-sheen {
  0%, 62% { translate: 0 0; }
  100% { translate: 368px 0; }
}

/* THE LOCKOUT'S OWN SPACING (owner, 2026-08-25). Every other entry step hangs
   its rows off the shared offsets - line 104, panel 122, rule 174 - which were
   set for a step that also carries the 1 CONNECT / 2 VERIFY / 3 PLAY rail. The
   lockout hides that rail (there is no step 1 left for a registered player), so
   those offsets left 26px of air under the head groove and 5px above the panel:
   bunched at the bottom of an empty band.
   MEASURED FROM THE GROOVES' OWN EDGES, not from their declared tops: the
   head groove is 2px tall and sits at 78, so the band starts at 80, and the
   entry-rule's box begins at 173.8. That band is 93.8px and the content in it
   is an 18px title plus a 46px panel = 64, so the three gaps are
   (93.8 - 64) / 3 = 9.93px. Title at 90, panel at 118, and the measured gaps
   come out 10 / 10 / 9.8 - even to within the rounding.

   THE WINDOW DOES NOT CHANGE SIZE. Only where these two rows sit inside a band
   that was always this tall. */
#pw-lockout .lo-title {
  top: 90px;
  height: 18px;
  line-height: 18px;
  font-size: 15px;
  /* A TITLE RATHER THAN A WARNING LINE, and a dark red rather than the error
     red: #b00000 is what a refused field wears (.entry-err), and this is not a
     field being refused - it is the state of the machine. */
  color: #9c1c1c;
  letter-spacing: 0.2px;
}
#pw-lockout .entry-panel { top: 118px; }

/* ONE FIGURE, CENTRED. The price row is space-between because #pw-buy puts a
   $CBTC price at one end and its SOL conversion at the other. The lockout's
   "short by" twin is gone (owner), so space-between would pin the one number
   that is left against the left edge. */
#pw-lockout .entry-body.price { justify-content: center; }

#pw-signin,
#pw-check,
#pw-verified,
#pw-buy,
#pw-lockout { position: absolute; inset: 0; }
#pw-signin.entry-in,
#pw-check.entry-in,
#pw-verified.entry-in,
#pw-buy.entry-in,
#pw-lockout.entry-in { animation: entry-arrive 0.22s ease-out; }
@keyframes entry-arrive {
  from { opacity: 0; translate: 0 4px; }
  to   { opacity: 1; translate: 0 0; }
}

#paywall .w95-titlebar { z-index: 2; }

/* =====================================================================
   THE THING THAT ACTUALLY STOPS A PHONE ZOOMING INTO A TEXT FIELD (A8-W1).
   =====================================================================
   js/mobile.js used to answer this by rewriting the viewport meta with
   maximum-scale=1 on focusin. iOS has ignored maximum-scale since iOS 10, so
   that bought nothing on the platform it was written for, and on Android it
   bought something worse than nothing: it took pinch-zoom away from a player
   for as long as a field had focus. It is deleted.

   WHAT IOS ACTUALLY READS IS THE FIELD'S COMPUTED font-size. Under 16px it
   zooms the page in on focus and leaves it zoomed, which on this game means
   the desktop is suddenly bigger than the screen and the window furniture is
   off the edge. At 16px or over it does not zoom at all. Every text field in
   the game was under the threshold - .w95-input computes to 12 - so the
   threshold is met here, on coarse pointers only, and the mouse build keeps
   the 12px it was drawn at.

   NOT A BLANKET input SELECTOR. The two range sliders are inputs and have no
   text in them, and a font-size on those is meaningless noise in the cascade.
   These are the fields a player can type into.

   NOT AN OWNER DECISION TO RE-OPEN: it is bigger text in the same box, and no
   box moves. The boxes are 24px (.w95-input), 30px (.w95-cbox), 19-20px
   (#pv-dep) and 18px (#gbox-input), so 16px sits inside all four; #pv-dep's
   drawn caret (#pv-dep-caret) is a fixed 13px bar and stays where it is.

   CAVEAT, AND IT IS A8'S OWN: there is no iOS in this project's harness. This
   is a measurement of the computed sizes plus documented platform behaviour,
   not an observation of the zoom. */
@media (pointer: coarse) {
  .w95-input,
  .w95-cbox,
  #pv-dep,
  #gbox-input-row input,
  input[type="text"],
  input:not([type]),
  textarea { font-size: 16px; }
  /* THE ONE FIELD THE RULE ABOVE COULD NOT REACH (R13-24-01). #pw-ca is set
     to 10px by an ID selector at its own rule (:1274), and an ID beats every
     class and element selector in this block whatever the source order - so
     the contract address on the entry window, the first field a phone player
     sees, was the only one in the game under 16px. Same specificity, later in
     the file, so this one wins here.

     AND THE BOX HAS TO GROW WITH THE TEXT, WHICH THE COMMENT ABOVE ("no box
     moves") IS NOT TRUE OF THIS ONE. MEASURED in a real coarse-pointer
     Chromium, not reasoned: the box is 104px wide with 6px of padding each
     side, so 92px of room, and the shortened address "9fKmQ . . . rPqZk"
     measures 83.8px at 10px and 134px at 16px. Sixteen-pixel text in a 104px
     box is a CLIPPED contract address, which is worse than a small one.

     So the width goes with it. `width: auto` hands the input back its own
     intrinsic size - 20 characters of the current font, which is 202px here -
     and it therefore travels with the font instead of being a number that is
     right on one platform and wrong on the one this rule exists for. Driven,
     landscape 760x380 on the no-fullscreen harness port with the entry window
     up: #pw-ca clientWidth 202, scrollWidth 202, NOT clipped, against 134px of
     text; the seven text fields all read 16px and none is under it.

     THE HEADROOM IS MEASURED, NOT ASSUMED. 20,000 random base58 addresses
     through caShort() and the canvas: the widest lands at 167px in MS Sans
     Serif and 153px in Arial, against 202px of room, and the round-13 mint
     itself is 138px. `flex`/`min-width` are there so the row treats it as an
     ordinary shrinkable item.

     NOTHING ELSE MOVES, and that was checked too: same 24px height, and with
     the copy key showing the row measures 236px inside a 260px panel inside
     the same 280x254 window, spilling neither. */
  #pw-ca { font-size: 16px; width: auto; flex: 0 1 auto; min-width: 0; }
}

/* =====================================================================
   RAJESH SCALES WITH THE SCREEN (A8-07).
   =====================================================================
   #tut-raj was the one fixed-size thing left on the display: a 206x308 block
   pinned to the bottom right corner while rescale(), winScaleFor() and
   mgScale() all scaled everything around it. At 480x300 that is 43% of the
   width and 103% of the height, and it covered every control of chudnet.exe
   underneath it.

   IT SCALES IN WHOLE MULTIPLES AND FOR THE SAME REASON #mg-cv DOES. The
   canvas backing store is 100x128 and it is drawn a pixel at a time with
   image-rendering:pixelated, so the three sizes above this one are 5:1, 3:1
   and 2:1 exactly. A fluid clamp() would have put it on a fractional ratio and
   turned the sprite to mush, which is why the answer is one more whole step
   down rather than a formula: 1:1, at 100x128.

   THE BREAKPOINT IS A8'S TWO MEASURED VIEWPORTS. 667x375 and 480x300 both
   land here (375 and 300 are both under 420), and both were unusable at 2:1 -
   80% and 103% of the screen height. At 1:1 the frame is 106px wide against
   480, which is 22% rather than 43%.

   EVERY OFFSET IS A PLAIN px AND THAT IS DELIBERATE. --tour-col is read back
   by js/tutorial.js with parseInt on the COMPUTED value, and an unregistered
   custom property computes to its own token string - so a calc() or a clamp()
   here would hand parkWin a NaN and park the tour's window at column 0. The
   pair is derived the way the shipped one was: the column is the portrait's
   right offset plus its width (10 + 106), and the bubble clears it by 8. */
@media (max-height: 420px), (max-width: 560px) {
  #tut-raj { width: 106px; }
  #tut-raj-cv { width: 100px; height: 128px; }
  #tut-plate { font-size: 8px; line-height: 11px; margin-top: 3px; }
  #tut-bubble {
    right: 124px;
    width: min(420px, calc(100vw - 140px));
  }
  #tut-hint {
    right: 124px;
    width: min(420px, calc(100vw - 140px));
  }
  #tut-reskip { right: 124px; bottom: 76px; }
  #tutorial { --tour-col: 116px; }
}

/* =====================================================================
   THE BUBBLE MUST NOT SIT ON THE THING IT IS POINTING AT (A8-03, A8-05).
   =====================================================================
   The speech bubble is anchored to the bottom of the screen and the tour's
   window is parked to the left of Rajesh, so at phone width the two overlap:
   three measured instances, the worst of them hiding "+27 MH/s", "1x Common
   Repair Kit" and "1h 0m" on the repair confirm WHILE telling the player to
   press Confirm, and a fourth where the bubble covered chudnet.exe's STAKE
   control 100% - a control that commits a minimum 1,000 $CBTC into a six-hour
   lock.

   js/tutorial.js measures the overlap (see hoist()) and puts this class on the
   body; the bubble and the hint move to the top of the screen, keeping the
   same width and the same right edge, and the tail flips to the top corner so
   it still points back at Rajesh. Nothing here resizes a window. */
body.tour-hoist #tut-bubble {
  bottom: auto;
  top: 12px;
}
body.tour-hoist #tut-hint {
  bottom: auto;
  top: var(--tut-hint-top, 96px);
}
body.tour-hoist .tut-tail.t1 { top: auto; bottom: 26px; }
body.tour-hoist .tut-tail.t1b { top: 26px; bottom: auto; }
/* the .t2 and .t3 hoist overrides went with their rules near the top of the
   file (R8-NET-01 / R8-NET-12, 2026-09-03). */