/* CUSTOM FONTS (errorx002 2026-09-07) — served from ./fonts/ via the /fonts/ route in server.js. Declaring a
   face here does NOT download it; browsers only fetch a face when something actually renders in it, so this is
   a palette to draw from (Elegant + Depths use two of them below; the rest are ready for future skins/messages).
   ?v= is a cache-buster: bump it here if a same-name file is ever swapped. font-display:swap = show the fallback
   until the webfont arrives, never invisible text. */
/* Bahnschrift is NOT served any more (2026-09-24): it is a Microsoft Windows font and its licence does not allow
   hosting it as a web font. With no @font-face of that name, font-family 'Bahnschrift' resolves to the player's own
   installed copy (every Windows 10+ PC has it, with its full weight range); the stacks that use it already fall
   back to DIN Alternate (Mac) / Roboto Condensed / the system sans. */
/* Elegant + Depths faces swapped for open-licence (SIL OFL 1.1) look-alikes, 2026-09-24 (errorx002: "lo que tenga
   problemas de licencia ... pero sin joder la belleza de la GUI"). Champagne & Limousines needed a paid donation for
   web-embedding and Garet's web licence is unclear; the old files are kept in ../fonts-unserved/.
   Both are variable fonts, and the declared weight range is a CLAMP that keeps the look the skins were approved
   with: Champagne was one light face, so Jost starts at 300 (the 200 title renders at 300, body 400 stays 400);
   Garet was only ever its single Book cut, which is about as light as Outfit 300, so Depths' 200/300 render at 300. */
@font-face { font-family: 'Jost'; src: url('/fonts/jost.woff2?v=1') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/fonts/outfit.woff2?v=1') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
/* Altone (a Trial build), GeoSansLight, Sanseriffic and WalkwayCondensed were declared here but used by nothing;
   they are no longer served (2026-09-24, licence clean-up), files kept in ../fonts-unserved/. */
@font-face { font-family: 'Quicksand'; src: url('/fonts/quicksand.otf?v=1') format('opentype'); font-weight: 400 700; font-style: normal; font-display: swap; }
/* 1930s cartoon / silent-film faces for the Shapeboat Willie skin (errorx002-supplied) */
@font-face { font-family: 'DayPoster'; src: url('/fonts/dayposter.ttf?v=1') format('truetype'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'JosefinSans'; src: url('/fonts/josefin.ttf?v=1') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JosefinSans'; src: url('/fonts/josefinbold.ttf?v=1') format('truetype'); font-weight: 600 800; font-style: normal; font-display: swap; }
/* Feel Friendly, Dear Tank~ (errorx002-supplied 2026-09-24): a Didone display, a grotesk for text, a gallery sans
   for small labels; Gloock and Cinzel Decorative are spares. The variable files carry their whole weight range. */
@font-face { font-family: 'BodoniModa'; src: url('/fonts/bodonimoda.ttf?v=1') format('truetype'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'SpaceGrotesk'; src: url('/fonts/spacegrotesk.ttf?v=1') format('truetype'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Syne'; src: url('/fonts/syne.ttf?v=1') format('truetype'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gloock'; src: url('/fonts/gloock.ttf?v=1') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'CinzelDecorative'; src: url('/fonts/cinzeldeco.ttf?v=1') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
/* TankL Studio (errorx002 2026-09-24): FL Studio draws its whole UI in Segoe UI. Segoe UI is Microsoft's and its
   licence does not allow serving it as a web font, so the files he sent are NOT hosted: each weight is taken from
   the player's own system first (local(), which every Windows machine has) and only otherwise downloaded as
   Selawik, Microsoft's own open (SIL OFL 1.1) metric-compatible stand-in for Segoe UI, from ./fonts/. */
@font-face { font-family: 'TLSegoe'; src: local('Segoe UI Light'), local('SegoeUI-Light'), url('/fonts/selawikl.woff2?v=1') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'TLSegoe'; src: local('Segoe UI Semilight'), local('SegoeUI-Semilight'), url('/fonts/selawiksl.woff2?v=1') format('woff2'); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: 'TLSegoe'; src: local('Segoe UI'), local('SegoeUI'), url('/fonts/selawik.woff2?v=1') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TLSegoe'; src: local('Segoe UI Semibold'), local('SegoeUI-Semibold'), url('/fonts/selawiksb.woff2?v=1') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'TLSegoe'; src: local('Segoe UI Bold'), local('SegoeUI-Bold'), url('/fonts/selawikb.woff2?v=1') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

canvas {
  image-rendering: pixelated;
}

body {
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0, 0, 0, 1);
}

.radiantColor {
  animation-duration: 3.14s;
  animation-name: radiantColor;
  animation-iteration-count: infinite;
}

.radiantBackground {
  animation-duration: 3.14s;
  animation-name: radiantBackground;
  animation-iteration-count: infinite;
}

.radiantColorBackground {
  animation-duration: 3.14s;
  animation-name: radiantColor, radiantBackground;
  animation-iteration-count: infinite;
}

@keyframes radiantColor {
  0% { color:rgb(191, 246, 246) }
  5% { color:rgb(211, 254, 234) }
  10% { color:rgb(229, 255, 217) }
  15% { color:rgb(243, 249, 198) }
  20% { color:rgb(252, 239, 178) }
  25% { color:rgb(255, 223, 159) }
  30% { color:rgb(252, 205, 144) }
  35% { color:rgb(243, 185, 133) }
  40% { color:rgb(229, 165, 128) }
  45% { color:rgb(211, 149, 129) }
  50% { color:rgb(191, 136, 136) }
  55% { color:rgb(172, 129, 149) }
  60% { color:rgb(154, 128, 165) }
  65% { color:rgb(140, 133, 185) }
  70% { color:rgb(131, 144, 205) }
  75% { color:rgb(128, 159, 223) }
  80% { color:rgb(131, 178, 239) }
  85% { color:rgb(140, 198, 249) }
  90% { color:rgb(154, 217, 255) }
  95% { color:rgb(172, 234, 254) }
  100% { color:rgb(191, 246, 246) }
}

@keyframes radiantBackground {
  0% { background:rgb(64, 119, 119) }
  5% { background:rgb(83, 126, 106) }
  10% { background:rgb(101, 127, 90) }
  15% { background:rgb(115, 122, 70) }
  20% { background:rgb(124, 111, 50) }
  25% { background:rgb(128, 96, 32) }
  30% { background:rgb(124, 77, 16) }
  35% { background:rgb(115, 57, 6) }
  40% { background:rgb(101, 38, 0) }
  45% { background:rgb(83, 21, 1) }
  50% { background:rgb(64, 9, 9) }
  55% { background:rgb(44, 1, 21) }
  60% { background:rgb(26, 0, 38) }
  65% { background:rgb(12, 6, 57) }
  70% { background:rgb(3, 16, 77) }
  75% { background:rgb(0, 32, 96) }
  80% { background:rgb(3, 50, 111) }
  85% { background:rgb(12, 70, 122) }
  90% { background:rgb(26, 90, 127) }
  95% { background:rgb(44, 106, 126) }
  100% { background:rgb(64, 119, 119) }
}

button {
  cursor: pointer;
}

.leftPanel {
  background-color: rgba(20, 20, 20, 0.7);
  border: 6px solid rgba(20, 20, 20, 0.2);
  border-radius: 8px;
  padding: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 500px;
  height: calc(100% - 32px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
}

.rightPanel {
  background-color: rgba(20, 20, 20, 0.7);
  border: 6px solid rgba(20, 20, 20, 0.2);
  border-radius: 8px;
  padding: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 500px;
  height: calc(100% - 32px);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
}

.barrelListInner {
  background-color: rgba(20, 20, 20, 0.2);
  border: 6px solid rgba(20, 20, 20, 0.2);
  border-radius: 8px;
  padding: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 450px;
  height: 450px;
  margin-top: 10px;
}

.text {
  font-weight: 800;
}

.input {
  background-color: rgba(0, 0, 0, 0.5);
  border: 6px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 20px;
  color: rgb(180, 180, 180);
}

.input:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.input:active {
  background-color: rgba(0, 0, 0, 0.7);
}

.red {
  background-color: rgba(255, 0, 0, 0.5);
}

.red:hover {
  background-color: rgba(255, 0, 0, 0.6);
}

.red:active {
  background-color: rgba(255, 0, 0, 0.7);
}

.link {
  color: rgb(100, 150, 250);
  cursor: pointer;
  text-decoration: underline;
}

.link:hover {
  color: rgb(100, 150, 250);
  text-decoration: underline;
}

.link:active {
  color: rgb(90, 137, 220);
  text-decoration: underline;
}

#serverSelectLower {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  border-radius: 5px;
}

.g-recaptcha {
  position: absolute;
  transform: scale(1.47) translate(-50%,-50%);
  top: calc(50% + 14px);
  left: 50%;
  height: 0px;
  width: 301px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

#serverSelectRightOuter, #serverSelectLeftOuter {
  position: absolute;
  top: 32px;
  cursor: pointer;
  height: 45px;
  width: 40px;
  font-size: 75px;
  transition: font-size 0.4s cubic-bezier(0, 0, 0, 1);
}

#serverSelectRightOuter {
  right: 30px;
  transform: translate(50%, -50%);
}

#serverSelectLeftOuter {
  left: 30px;
  transform: translate(-50%, -50%);
}

#serverSelectLowerText {
  position: absolute;
  top: 23px;
  left: 50%;
  transform: translate(-50%, 0);
  font-weight: 700;
  font-size: 20px;
  white-space: nowrap;
}

#serverSelectRightOuter:hover, #serverSelectLeftOuter:hover {
  font-size: 85px;
}

#serverSelectRightOuter:active, #serverSelectLeftOuter:active {
  font-size: 100px;
  transition: font-size ease 0s;
}

#credits {
  width: 420px;
  height: 380px;
  border-radius: 5px;
  box-shadow: 0 0 0 5px rgba(127, 127, 127, 0.4);
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 470px);
  transform: translate(-50%, -50%);
  background: rgba(127, 127, 127, 0.2);
}

#creditsContent, #creditsContent2 {
  width: 360px;
  height: 260px;
  border-radius: 5px;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 75px;
  left: 50%;
  transform: translate(-50%, 0);
  background: rgba(0, 0, 0, 0.1);
  font-weight:800;
  font-size: 21px;
  padding:15px;
  overflow-x: hidden;
  overflow-y: auto;
}

#featured {
  width: 420px;
  height: 380px;
  border-radius: 5px;
  box-shadow: 0 0 0 5px rgba(127, 127, 127, 0.4);
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% + 470px);
  transform: translate(-50%, -50%);
  background: rgba(127, 127, 127, 0.2);
}

#screen {
  position:absolute;
  top:70px;
  left:10px;
  width:400px;
  cursor:pointer;
  border-radius:7px;
}

/* Featured-video box on the menu — matches the leaderboard/info panel look.
   Self-contained dark styling (doesn't depend on the base+override split the other panels use).
   GEOMETRY: sits directly under #featured in the right column, so it must track the panel override far
   below (#credits,#featured -> 500x486 @ top calc(50% - 30px), #featured left calc(50% + 545px)).
   That makes #featured's bottom edge calc(50% + 213px); this box starts 20px under it and shares the
   panel's width and left. The menu is a 2304x1296 virtual canvas (overlay2 is scaled to fit), so the
   usable space below centre is ~648px and this box ends at ~581px — it never runs off the bottom.
   If the panel size/offset above ever changes, these two values must change with it. */
#videoBox {
  position: absolute;
  left: calc(50% + 545px);
  top: calc(50% + 233px);
  transform: translate(-50%, 0);
  width: 500px;
  height: 348px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  box-shadow: 0 0 0 1px rgba(140,170,230,.16), 0 18px 50px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
}
#videoBoxTitle {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 476px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(140,170,230,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #eef4ff;
  font-size: 22px;
  font-weight: 800;
}
#videoBoxContent {
  position: absolute;
  top: 68px;
  left: 12px;
  width: 476px;
  height: 268px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
#videoBoxFrame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

#channel, #creditsTitle {
  position:absolute;
  top:10px;
  left:10px;
  width:390px;
  height:40px;
  border-radius:25px;
  background:rgba(0, 0, 0, 0.1);
  border: 5px solid rgba(0, 0, 0, 0.1);
}

#channelIcon {
  position:absolute;
  top: -5px;
  left: -5px;
  width: 40px;
  height: 40px;
  border-radius:30px;
  border: 5px solid rgba(0, 0, 0, 0.2);
}

#creditsText {
  position:absolute;
  top:50%;
  left: 15px;
  transform: translate(0, -50%);
                       font-size: 20px;
                       font-weight: 800;
                       cursor: pointer;
                       }

#channelName {
  position:absolute;
  top:50%;
  left: 53px;
  transform: translate(0, -50%);
                       font-size: 20px;
                       font-weight: 800;
                       cursor: pointer;
                       }

#channelName:hover {
  color: rgb(100, 150, 250);
  text-decoration: underline;
}

#channelName:active {
  color: rgb(90, 137, 220);
  text-decoration: underline;
}

#joystickRight, #joystickLeft {
  position: absolute;
  background: rgba(127,127,127,0.4);
  width: 140px;
  height: 140px;
  border-radius: 70px;
  transform: translate(-50%,-50%);
  visibility: hidden;
}

#joystickRightInner, #joystickLeftInner {
  position: absolute;
  background: rgba(127,127,127,0.3);
  width: 100px;
  height: 100px;
  border-radius: 50px;
  transform: translate(-40px,-40px);
  top: 10px;
  left: 10px;
}

#killer {
  font-size: 30px;
  position:absolute;
  top: 150px;
  left: 15%;
  width: 70%;
  text-align: center;
  font-weight: 700;
}

#respawnContinue {
  border: 5px solid rgb(20, 20, 20);
  background-color: rgba(255, 255, 255, 0.75);
  position: absolute;
  top: 10px;
  height: 30px;
  font-size: 25px;
  font-weight: 700;
}

#respawnContinue {
  top: 80%;
  left: 50%;
  transform: translate(-50%, 0);
  height: 50px;
  width: 140px;
  border-radius: 7px;
}

#respawnTitle {
  -webkit-text-stroke-color: rgb(0, 0, 0);
  -webkit-text-stroke-width: 3.3px;
  color: rgb(255, 255, 255);
  font-weight: 700;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 80px;
}

#respawnContinue:hover {
  background-color: rgba(255, 255, 255, 0.85);
}

#respawnContinue:active {
  background-color: rgba(255, 255, 255, 0.75);
}

#respawnPanel {
  transition: top 0.5s ease;
}

#serverSelect {
  overflow: hidden;
  width: 475px;
  height: 140px;
  border-radius: 7px;
  box-shadow: 0 0 0 5px rgb(0, 0, 0);
  position: absolute;
  top: calc(50% - 70px);
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(255, 0, 0);
}

.leaderboardCanvas {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translate(6px, -50%);
}

.leaderboardBar {
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 10px;
  overflow: hidden;
}
/* RADIANT ROWS GLOW (errorx002 2026-09-02). pageUpdateEntry toggles .lbRadiant on the bar whenever the
   entry is radiant or fakeRadiant.
   ⚠ box-shadow, NOT filter: drop-shadow. .leaderboardBar sets overflow:hidden to clip its own .slide, and
   a filter on the same element is applied to the already-clipped result -- the glow would be cut off flush
   with the bar's rounded rectangle, which just looks like a thicker border. box-shadow paints outside the
   box and is unaffected by the clip.
   ⚠ NOT ANIMATED. The row is repositioned every frame from drawFrame and there can be eight of them; a
   pulsing shadow on eight moving elements is a repaint of the whole board every frame. The radiant NAME
   already animates (applyNameColorTo), so the row still reads as alive. */
/* ⚠ NOT A FIXED GOLD. --lb-glow is the row's own bar colour, written inline by pageUpdateEntry; see the
   note there. The gold remains only as the var() fallback for the frame before the first write. */
.leaderboardBar.lbRadiant {
  box-shadow:
    0 0 7px  color-mix(in srgb, var(--lb-glow, #ffd54a) 62%, transparent),
    0 0 15px color-mix(in srgb, var(--lb-glow, #ffd54a) 30%, transparent);
}

.slider {
  pointer-events: all;
}

.leaderboardSlide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 50%;
  border-radius: 10px;
}

.leaderboardText {
  font-size: 12px;
  padding-top: 3px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#chat {
  pointer-events: all;
  position: absolute;
  right: 0;
  border-radius: 5px;
  font-size: 16px;
  width: 235px;
  height: 27px;
  padding: 3px;
  transform-origin: right top;
  background-color: rgba(15, 15, 15, 0.75);
  color: rgb(155, 155, 155);
  box-shadow: rgb(0, 0, 0) 0px 0px 0px 0.4vmin;
  border: none;
  outline: none;
  top: 258px;
}

#tankName {
  pointer-events: none;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 99px;
  font-size: 59px;
  color: rgb(255, 255, 255);
  font-weight: 600;
  white-space: nowrap;
}

#changelog {
  position: absolute;
  top: 31px;
  left: 31px;
  font-weight: 700;
  font-size: 20px;
  width: calc(50% - 300px);
}

#changelogDark, #tipsDark, #contactDark, #disconnectDark, #accountDark, #adblockDark {
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#changelogTitle, #tipsTitle, #contactTitle, #disconnectTitle, #adblockTitle {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 40px;
  font-weight: 700;
  width: 100%;
  text-align: center;
}

#disconnectText, #adblockText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: 700;
  width: 70%;
  text-align: center;
}

#changelogContent, #tipsContent {
  position: absolute;
  top: 91px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 1460px;
  height: calc(100% - 230px);
  font-size: 30px;
  font-weight: 500;
  padding: 20px;
  overflow-y: scroll;
  overflow-x: hidden;
}

#accountContent {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 1460px;
  height: calc(100% - 199px);
  font-size: 30px;
  font-weight: 700;
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  overflow-x: hidden;
}

#changelogBack, #tipsBack, #contactSubmit, #contactCancel, #disconnectReload, #accountBack, #adblockContinue {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  font-weight: 700;
  color: rgb(255, 255, 255);
  font-size: 30px;
  padding-top: 5px;
  padding-left: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

#contactHeader {
  font-weight: 700;
  font-size: 30px;
  margin-left:50px;
  margin-top: 20px;
}

#contactContent {
  width: 525px;
  height: 500px;
  background: rgba(0, 0, 0, 0.2);
  border: 5px solid rgba(0, 0, 0, 0.3);
  border-radius: 9px;
  resize: none;
  margin-left: 48px;
  margin-top: 15px;
  color: rgb(255, 255, 255);
  font-size: 25px;
  font-weight: 600;
  padding: 10px;
}

#disconnectReload {
  left: 50%;
}

#contactSubmit {
  left: calc(50% - 80px);
}

#contactCancel {
  left: calc(50% + 80px);
}

#changelogFull, #accountFull, #tips, #contact, #disconnect, #adblock {
  position: absolute;
  top: -100%;
  left: 50%;
  width: 1600px;
  height: calc(100% - 200px);
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  border: 5px solid rgba(0, 0, 0, 0.2);
  border-radius: 9px;
  transition: top 0.5s ease;
}

#contact {
  width: 650px;
  height: 800px;
}

#disconnect {
  width: 550px;
  height: 300px;
}

#adblock {
  width: 900px;
  height: 400px;
}

#tankLevel {
  pointer-events: none;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 75px;
  font-size: 21px;
  color: rgb(255, 255, 255);
  font-weight: 600;
}

#tankScore {
  pointer-events: none;
  position: absolute;
  background: rgb(0, 0, 0);
  width: 335px;
  height: 27px;
  /* BASE = original Modern pill. Bevel is body.hudAlt-only (errorx002 2026-09-09). */
  border-radius: 13.5px;
  bottom: 43px;
  left: 50%;
  transform: translate(-50%, 0);
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}

#tankScoreDisplay {
  position: absolute;
  width: 100%;
  top: 1px;
  left: 0;
}

#tankLevelDisplay {
  position: absolute;
  width: 100%;
  top: 1px;
  left: 0;
}

#tankScoreBar {
  position: absolute;
  top: 5.5px;
  left: 6px;
  background: rgb(255, 0, 0);
  height: 15px;
  border-radius: 7.5px;
  width: 323px;
  width: 15px;
}

#tankLevelBar {
  position: absolute;
  top: 5.5px;
  left: 6px;
  background: rgb(255, 0, 0);
  height: 22px;
  border-radius: 11px;
  transition: width 1s cubic-bezier(0, 0, 0.3, 1);
}

#tankPartialLevel {
  pointer-events: none;
  position: absolute;
  background: rgb(0, 0, 0);
  width: 440px;
  height: 34px;
  /* BASE = original Modern pill. Bevel is body.hudAlt-only (errorx002 2026-09-09). */
  border-radius: 17px;
  bottom: 6px;
  left: 50%;
  transform: translate(-50%, 0);
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 25px;
  font-weight: 600;
}

/* =====================================================================================================
   SKINNED-HUD (body.hudAlt) BAR RESTYLE — errorx002 2026-09-09.
   Everything here is the beveled/trapezoid look he asked for. It is gated to body.hudAlt (added for any
   skin != normal) so it NEVER touches Modern, which keeps the original pills/circles from the base rules
   above. Placed before the per-skin blocks so Depths' muted .statBarSlide filter (later) still wins.
   ===================================================================================================== */
body.hudAlt .statBarInner {
  border-radius: 0;
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%); /* right-trapezoid, one diagonal (left cut only) */
}
body.hudAlt .statBarSlide, body.hudAlt .statBarSlide2 {
  border-radius: 0;
  filter: saturate(1.3);
}
body.hudAlt #tankScore {
  border-radius: 0;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 46.77px) 0, 100% 100%, 0 100%); /* 30deg bevel; bev=27*1.7320508 */
}
body.hudAlt #tankScoreBar {
  top: 3px;
  left: 0;
  height: 21px;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 36.37px) 0, 100% 100%, 0 100%); /* 30deg slanted leading edge */
}
body.hudAlt #tankPartialLevel {
  border-radius: 0;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 58.89px) 0, 100% 100%, 0 100%); /* 30deg bevel; bev=34*1.7320508 */
}
body.hudAlt #tankLevelBar {
  top: 3px;
  left: 0;
  height: 28px;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 48.5px) 0, 100% 100%, 0 100%); /* 30deg slanted leading edge */
}
/* The per-stat coloured bloom is set INLINE in the build fn (box-shadow), so kill it reactively on Modern with
   !important; the beat/sweep only fire momentarily on an upgrade and are left alone (errorx002 2026-09-09). */
body:not(.hudAlt) .statBarLeft, body:not(.hudAlt) .statBarRight { box-shadow: none !important; }

#leaderboard {
  pointer-events: none;
  position: absolute;
  right: 15px;
  transform-origin: right top;
  top: 6px;
  width: 244px;
}

#mapCanvas {
  pointer-events: none;
  position: absolute;
  left: 10px;
  transform-origin: left top;
  top: 10px;
  width: 180px;
  height: 180px;
  border: 5px solid rgba(0, 0, 0, 0.5);
}

#statUpgradesLeft {
  position: absolute;
  left: 10px;
  transform-origin: left bottom;
  bottom: 10px;
  transition: left 0.6s cubic-bezier(0, 0, 0.3, 1), right 0.6s cubic-bezier(0, 0, 0.3, 1), opacity 0.45s ease;
}

#statUpgradesRight {
  position: absolute;
  right: 10px;
  transform-origin: right bottom;
  bottom: 10px;
  transition: left 0.6s cubic-bezier(0, 0, 0.3, 1), right 0.6s cubic-bezier(0, 0, 0.3, 1), opacity 0.45s ease;
}

.upgradeBox {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 6px solid rgb(0, 0, 0);
  border-radius: 10px;
  transform: translate(-50%, 50%);
  transition: width 0.2s cubic-bezier(0, 0, 0.3, 1), height 0.2s cubic-bezier(0, 0, 0.3, 1)
}

.upgradeBox:hover {
  width: 130px;
  height: 130px;
}

.upgradeBox:active {
  width: 120px;
  height: 120px;
  transition: none;
}

.upgradeBoxLower {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: rgba(0, 0, 0, 0.1);
}

.upgradeCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.upgradeName {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translate(-50%, 0);
  font-weight: 800;
  font-size: 17px;
}

.weaponUpgrades {
  position: absolute;
  left: -450px;
  transform-origin: left bottom;
  /* 190px, raised from 150px (zodus 2026-08-13): the stat column now goes one row higher than it used to —
     the Vampirism/Armor bars sit at bottom 140px and are 32px tall, so anything below 172px is overlapped.
     ⚠️ MUST match script2.js's inline <style> copy, which WINS over this file. This was set to 185 here and
     left at 150 there, so the overlap simply never went away. Change both or change neither. */
  bottom: 190px;
  transition: left 0.6s cubic-bezier(0, 0, 0.3, 1), right 0.6s cubic-bezier(0, 0, 0.3, 1);
}

.bodyUpgrades {
  position: absolute;
  right: -450px;
  transform-origin: left bottom;
  /* see .weaponUpgrades — same clearance over the taller stat column. */
  bottom: 190px;
  transition: left 0.6s cubic-bezier(0, 0, 0.3, 1), right 0.6s cubic-bezier(0, 0, 0.3, 1);
}
/* MOBILE FIX (zodus 2026-07-25): the on-screen controls (FIRE/SPIN/PSV/DBG) are z-index:30 with
   pointer-events:all and sit in the bottom-RIGHT corner — exactly where the BODY upgrade grid is anchored.
   They painted over the first upgrade boxes and swallowed the taps, so body upgrades looked like they simply
   didn't exist on phones. Weapon upgrades are bottom-LEFT, which is why only body was affected.
   Two changes: lift both upgrade panels above the controls, and on mobile push the body grid up clear of the
   control cluster (which reaches ~204px up from the bottom). */
.bodyUpgrades, .weaponUpgrades { z-index: 40; }
/* zodus 2026-07-25: BODY only. The controls sit bottom-RIGHT, which is where the body grid lives, so it moves
   up above them (cluster reaches ~204px up, grid starts at 250px). The WEAPON grid is bottom-LEFT where nothing
   overlaps it, so it stays exactly where it always was — zodus asked for it to be left alone. */
body.mobile .bodyUpgrades { bottom: 280px; }


.statBarLeft {
  pointer-events: none;
  position: absolute;
  left: 0;
  width: 320px;
  height: 32px;
  background: rgb(0, 0, 0);
  border-radius: 16px;
}

.statBarRight {
  pointer-events: none;
  position: absolute;
  right: 0;
  width: 320px;
  height: 32px;
  background: rgb(0, 0, 0);
  border-radius: 16px;
}

/* BASE = original Modern (normal skin, non-hudAlt) look: rounded pills, no bevel. The trapezoid/saturate
   restyle is scoped to body.hudAlt below so it ONLY reaches the skinned HUDs and never leaks into Modern
   (errorx002 2026-09-09: "la version moderna deberia tener su estilo original"). */
.statBarInner {
  position: absolute;
  top: 5px;
  width: 285px;
  height: 22px;
  border-radius: 11px;
  overflow: hidden;
}

.statBarSlide {
  position: absolute;
  top: 0;
  width: 285px;
  height: 22px;
  background: rgb(255, 0, 0);
  transition: left 0.6s cubic-bezier(0, 0, 0.3, 1), right 0.6s cubic-bezier(0, 0, 0.3, 1);
  border-radius: 11px;
}

.statBarSlide2 {
  position: absolute;
  top: 0;
  width: 285px;
  height: 22px;
  background: rgb(255, 0, 0);
  border-radius: 11px;
}

.statBarText {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 20px;
  font-weight: 700;
}

.statButton, .statButtonDisabled {
  pointer-events: all;
  position: absolute;
  top: 5px;
  width: 22px;
  height: 22px;
  background: rgb(255, 255, 255);
  border-radius: 11px; /* circular base = Modern (non-hudAlt); trapezoid scoped to body.hudAlt (errorx002 2026-09-09) */
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}
body.hudAlt .statButton, body.hudAlt .statButtonDisabled {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}

.statButtonInner {
  font-size: 30px;
  position: absolute;
  top: calc(50% - 1px);
  left: 50%;
  transform: translate(-50%, -50%);
}
body.hudAlt .statButtonInner {
  font-size: 26px;
  left: 42%;
}

.statButton:hover {
  background: rgb(200, 200, 200);
}

.statButton:active {
  background: rgb(170, 170, 170);
}

.statButtonDisabled {
  background: rgb(122, 128, 132);
  cursor: auto;
}

#statDisplayLeft {
  font-weight: 900;
  font-size: 40px;
  position: absolute;
  bottom: 0;
  left: 330px;
  white-space: nowrap;
}

.upgradesLeft {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(10px, 10px);
  width: 20px;
  height: 20px;
  background: red;
}

#statDisplayRight {
  font-weight: 900;
  font-size: 40px;
  position: absolute;
  bottom: 0;
  right: 330px;
  white-space: nowrap;
}

#leaderboardTitle {
  font-size: 35px;
  font-weight: 900;
  width: 100%;
  text-align: center;
}

#leaderboardEntries {
  position: absolute;
  top: 44px;
  left: 0;
  width: 250px;
}

.leaderboardEntry {
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  background: rgb(0, 0, 0);
  width: 247px;
  height: 20px;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  transition: top 1s cubic-bezier(0, 0, 0.03, 1), left 1s cubic-bezier(0, 0, 0.03, 1);
}

#gameCanvas, #hudCanvas {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

#respawnText {
  font-size: 20px;
  position:absolute;
  bottom: 0;
  left: 50%;
  /* Kept in sync with the copy in script2.js's inline <style> (which is written after this file and would
     silently win if the two ever diverged). Moved out of the "Join Discord Server" button's row and made
     click-through — the empty 500px box was swallowing clicks aimed at the button. (zodus 2026-07-25) */
  transform: translate(-50%, 83px);
  font-weight: 700;
  width: 500px;
  text-align: center;
  pointer-events: none;
}

#serverSelectArrow {
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#serverSelectSlide {
  width: 200%;
  position: absolute;
  top: 7px;
  left: 0;
  font-size: 50px;
  font-weight: 800;
  white-space: nowrap;
}

#serverSelectLeft, #serverSelectRight {
  width: 50%;
  position: absolute;
  top: 0;
  text-align: center;
}

#serverSelectLeft {
  left: 0;
}
#serverSelectRight {
  right: 0;
}

#panel {
  
  background: rgba(75, 75, 75, 0.6);
  transition: none;
}

#respawnCanvas {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.inline {
  display: inline;
}

#debugText {
  pointer-events: none;
}

#debugSlide {
  pointer-events: none;
  position:absolute;
  font-size: 15px;
  font-weight: 700;
  top: 210px;
  left: -500px;
  font-weight: 700;
  transform: translate(10px, 0);
  /* 'left' is the slide-in; 'top' is the minimap push below. Two properties, two curves on purpose --
     the slide is a panel arriving, the push is the debug column stepping aside for the map. */
  transition: left ease 0.4s, top 0.9s cubic-bezier(0.16, 1.06, 0.3, 1);
  width: 100%;
}
/* THE DEBUG COLUMN MOVES OUT OF THE GROWING MINIMAP'S WAY (errorx002 2026-08-20: "tambien deberia afectar
   al texto de debug [...] agregale la animacion de empuje para abajo"). The name/level/score column
   already does this sideways via body.mapHoverOn; the debug readout sits directly UNDER the map, so for it
   the same gesture is downward. The map is 180px + 5px border at top:10px and grows 1.25x from its top-left
   corner, so its bottom lands at 10 + 190 * 1.25 = 247.5 -- 256 keeps a hair of air at full size, matching
   the 268 the horizontal push uses. Same curve as the map's own grow, so the two read as one motion. */
body.mapHoverOn #debugSlide {
  top: 256px;
}
@media (prefers-reduced-motion: reduce) {
  #debugSlide { transition: none }
  body.mapHoverOn #debugSlide { top: 210px }
}

.light, .leaderboardEntry {
  color: rgb(255, 255, 255);
  text-shadow: -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000, 2px 0 0 #000, 2px 2px 0 #000, 0 2px 0 #000, -2px 2px 0 #000, -2px 0 0 #000;
}

.bold, .statBarText, .upgradeName {
  color: rgb(255, 255, 255);
  text-shadow: -4px -4px 0 #000, 0 -4px 0 #000, 4px -4px 0 #000, 4px 0 0 #000, 4px 4px 0 #000, 0 4px 0 #000, -4px 4px 0 #000, -4px 0 0 #000, -4px -2px 0 #000, -4px 2px 0 #000, -2px 4px 0 #000, 2px 4px 0 #000, 4px 2px 0 #000, 4px -2px 0 #000, 2px -4px 0 #000, -2px -4px 0 #000;
}

#overlay1 {
  position: absolute;
  left: 0px;
  top: 0px;
  visibility: hidden;
}

#overlay2 {
  position: absolute;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0.5);
}

#playMenu {
  align-items: center;
  background-color: rgb(255, 255, 255);
  border-radius: 7px;
  box-shadow: 0 0 0 5px rgb(0, 0, 0);
  padding: 3px;
  width: 470px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 20px);
  transition: opacity ease 0.4s;
}

#name {
  width: 365px;
  height: 50px;
  padding-left: 5px;
  font-size: 35px;
  border: none;
  font-weight: 800;
}

#playButton {
  position:absolute;
  top: 3px;
  right: 3px;
  background-color: #38b764;
  color: rgb(255, 255, 255);
  padding-left: 1px;
  padding-right: 1px;
  border: none;
  font-size: 35px;
  border-radius: 5px;
  width: 95px;
  height: 50px;
  transition: background-color .2s ease;
  cursor: pointer;
  font-weight: 800;
}

#playButton:hover {
  background-color: rgb(72, 240, 131)
}

#name::placeholder {
  color: rgb(185, 185, 185);
}

#connecting {
  -webkit-text-stroke-color: rgb(0, 0, 0);
  -webkit-text-stroke-width: 4px;
  color: rgb(255, 255, 255);
  font-weight: 900;
  position: absolute;
  top: 50%;
  opacity: 0;
  visibility: hidden;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 112px;
  transition: opacity 0.3s ease, font-size 0.5s cubic-bezier(0, 0, 0.3, 1);
  width: 100%;
  text-align: center;
}

#connectingSmall {
  -webkit-text-stroke-color: rgb(0, 0, 0);
  -webkit-text-stroke-width: 3.3px;
  color: rgb(255, 255, 255);
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 68px;
  transition: opacity ease 0.4s;
}

.panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease;
}

#discordButton {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  background: rgb(88, 101, 242);
  border: 5px solid rgb(71, 82, 196);
  border-radius: 8px;
  cursor: pointer;
}

#discordButton:hover {
  filter: brightness(110%);
                     }

#discordButton:active {
  filter: brightness(100%);
                     }

#discordIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 47px;
  transform: translate(-50%, -50%);
}

#title {
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.8);
  -webkit-text-stroke-width: 5px;
  font-weight: 700;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 90px;
  text-transform: uppercase;
}

#serverSelectTitle {
  -webkit-text-stroke-color: rgb(0, 0, 0);
  -webkit-text-stroke-width: 3.3px;
  color: rgb(255, 255, 255);
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -220px);
  font-size: 60px;
}

#serverSelectOptions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100px);
  width: 400px;
}

* {
  transform-origin: 0 0;
  font-family: Roboto;
  user-select: none;
  outline: none;
}

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.2);
}

#tankEditor {
  background: transparent;
  overflow: hidden;
}
/* Only the standalone /editor page gets the solid white full-page background. In-game (the 'editor'
   dim overlay) stays transparent so the live game shows through — and, crucially, there's no white
   flash before the .editorOverlay class lands during init. (owner white-screen fix 2026-07-09) */
#tankEditor.editorStandalone {
  background: rgb(255, 255, 255);
}

/* In-game overlay mode = anything that ISN'T the standalone /editor page (i.e. the 'editor' dim):
   show the real game full-size behind the editor, controls as side panels. Keyed on :not(.editorStandalone)
   rather than a runtime-added class so it can't fail if the editor's init throws before the class lands
   (that left the big preview canvas showing as a grey box). (owner white-screen fix 2026-07-09) */
#tankEditor:not(.editorStandalone) {
  background: transparent !important;   /* the live game canvas shows through */
  pointer-events: none;                 /* mouse/aim passes through to the game... */
}
#tankEditor:not(.editorStandalone) .tankEditorPanel {
  pointer-events: auto;                 /* ...except over the editor panels */
  background: rgba(11, 19, 34, 0.86) !important;
  border: 1px solid rgba(140, 170, 230, .18);
  backdrop-filter: blur(6px);
  color: #eef4ff;
}
#tankEditor:not(.editorStandalone) .tankEditorPreview { display: none !important; } /* game canvas is the live preview now */
/* preview-only controls (toggle background, reset view, grid-snap) do nothing in the in-game overlay — hide them */
#tankEditor:not(.editorStandalone) .tankEditorPreviewOnly { display: none !important; }
/* collapsible section headers in the tank editor's left panel */
.teSectionHeader {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
  margin: 12px 3px 7px; padding: 8px 11px;
  background: rgba(90, 139, 255, 0.15);
  border: 1px solid rgba(140, 170, 230, 0.28);
  border-radius: 8px;
  color: #dbe6ff; font-family: sans-serif; font-weight: 800; font-size: 12.5px;
  letter-spacing: 0.4px; text-transform: uppercase;
}
.teSectionHeader:first-child { margin-top: 2px; }
.teSectionHeader:hover { background: rgba(90, 139, 255, 0.24); border-color: rgba(140, 170, 230, 0.45); }
.teSectionTitle, .teCaret { pointer-events: none; }
.teCaret { font-size: 11px; opacity: 0.8; transition: transform 0.15s ease; }
.teSectionHeader.teCollapsed .teCaret { transform: rotate(-90deg); }
/* beginner help line under each editor control */
.tankEditorHelp {
  color: rgb(122, 138, 165);
  font-size: 10.5px;
  font-family: sans-serif;
  line-height: 1.3;
  margin: 3px 0 0 5px;
  max-width: 320px;
}

.tankEditorButton {
  background: rgba(0, 0, 0, 0.2);
  border: 5px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  color: rgb(100, 100, 100);
  font-size: 20px;
  display: inline;
  cursor: pointer;
}

.tankEditorButton:hover {
  background: rgba(0, 0, 0, 0.25);
}

.tankEditorButton:active {
  background: rgba(0, 0, 0, 0.3);
}

.tankEditorInput {
  background: rgba(0, 0, 0, 0.3);
  border: 5px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  color: rgb(250, 250, 250);
  font-size: 20px;
  display: inline;
}

.tankEditorEntry {
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.tankEditorEntry:hover {
  background: rgba(0, 0, 0, 0.15);
}

.tankEditorEntry:active {
  background: rgba(0, 0, 0, 0.2);
}

#overlay2 {
  background: radial-gradient(1100px 620px at 50% -6%, #18244e 0%, #0c1426 46%, #070b16 100%) !important;
}
/* Animated game-shape background canvas — full-viewport sibling behind the menu; shown only on the menu (toggled by JS). */
#menuBg {
  position: fixed !important;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  image-rendering: auto;
}
/* overlay2 must be see-through so the menuBg canvas shows; the panels carry their own glass backgrounds. */
#overlay2 { background: transparent !important; }
#panel { background: transparent !important; }

#title {
  -webkit-text-stroke: 0 !important;
  color: #eef4ff !important;
  animation: none !important;
  font-weight: 900 !important;
  letter-spacing: -2px;
  text-shadow: 0 0 46px rgba(122,92,255,.55), 0 6px 26px rgba(0,0,0,.55);
  text-transform: uppercase;
}

#serverSelectTitle {
  -webkit-text-stroke: 0 !important;
  color: #8ea3c9 !important;
  text-shadow: none !important;
}

#serverSelect {
  background: linear-gradient(180deg, rgba(46,230,198,.10), rgba(122,92,255,.06)) !important;
  box-shadow: 0 0 0 1px rgba(46,230,198,.35), 0 22px 60px rgba(0,0,0,.5) !important;
  border-radius: 16px !important;
}
#serverSelectSlide, #serverSelectLeft, #serverSelectRight { color: #eef4ff !important; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
#serverSelectLowerText { color: #2ee6c6 !important; }
#serverSelectArrow { color: #8ea3c9 !important; }

#playMenu {
  background-color: rgba(12,20,38,.9) !important;
  box-shadow: 0 0 0 1px rgba(140,170,230,.25), 0 16px 44px rgba(0,0,0,.5) !important;
  border-radius: 14px !important;
}
#name {
  background: transparent !important;
  color: #eef4ff !important;
}
#name::placeholder { color: #6f83ab !important; }
#playButton {
  background: linear-gradient(135deg,#2ee6c6,#37f0a6) !important;
  color: #04121a !important;
  border-radius: 10px !important;
}
#playButton:hover { background: linear-gradient(135deg,#3af0d2,#4dffb8) !important; }

#credits, #featured {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
  box-shadow: 0 0 0 1px rgba(140,170,230,.16), 0 18px 50px rgba(0,0,0,.45) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(8px);
}
#channel, #creditsTitle {
  background: rgba(255,255,255,.05) !important;
  border-radius: 10px !important;
}

#modals a {
  background: rgba(18,26,46,.92) !important;
  color: #cdd8f0 !important;
  border: 1px solid rgba(140,170,230,.22) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.38) !important;
  transition: color .15s, border-color .15s !important;
}
#modals a:hover { color: #fff !important; border-color: rgba(46,230,198,.55) !important; }

#b0, #b1, #b2 { border-color: rgba(140,170,230,.3) !important; }

#credits, #featured, #credits *, #featured * { text-shadow: none !important; }

#creditsTitle, #channel {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(140,170,230,.18) !important;
  height: 44px !important;
}
#creditsText, #channelName { color:#eef4ff !important; font-weight:800 !important; }
#credits .input, #featured .input, #channel .input {
  background: rgba(255,255,255,.06) !important;
  color:#8ea3c9 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(140,170,230,.16) !important;
  padding: 3px 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: color .15s, background .15s !important;
}
#credits .input:hover, #featured .input:hover, #channel .input:hover {
  color:#04121a !important; background: linear-gradient(135deg,#2ee6c6,#37f0a6) !important;
}

#creditsContent, #creditsContent2 {
  background: rgba(0,0,0,.30) !important;
  box-shadow: inset 0 0 0 1px rgba(140,170,230,.12) !important;
  border-radius: 12px !important;
  font-size: 19px !important;
}

#creditsContent > div { border-radius:6px; padding-left:4px; }
#creditsContent > div:hover { background: rgba(46,230,198,.08); }
#creditsContent > div > span:first-child { color:#6f83ab !important; font-weight:700; }
#creditsContent > div:nth-child(1) > span:first-child { color:#ffd54a !important; } 
#creditsContent > div:nth-child(2) > span:first-child { color:#cfd8e6 !important; } 
#creditsContent > div:nth-child(3) > span:first-child { color:#e39b57 !important; } 
#creditsContent > div > span:last-child { color:#2ee6c6 !important; font-weight:800; }

/* This size is what the Tips text actually renders at — the tips HTML is copied out of #tipsContent and injected
   here, carrying no size of its own, so it inherits this. 15px was too small for a 440x392 panel; .clItem sets
   its own size !important, so raising this moves Tips only. (zenitsv 2026-08-16) */
#creditsContent2 { line-height:1.45 !important; color:#c6d3ec !important; font-size:17px !important; font-weight:600 !important; }

#creditsContent, #creditsContent2 { height: 300px !important; }
#creditsContent { padding: 8px 12px !important; }
.lbRow {
  height: 22px !important; border-radius: 6px; overflow: hidden; box-sizing: border-box;
  display: flex !important; align-items: center;
}
.lbRow:hover { outline: 1px solid rgba(46,230,198,.35); }
.lbBar {
  position: absolute; left: 0; top: 0; height: 100%; z-index: 0; border-radius: 6px;
  background: linear-gradient(90deg, rgba(46,230,198,.26), rgba(122,92,255,.05));
}
.lbTop1 .lbBar { background: linear-gradient(90deg, rgba(255,213,74,.36), rgba(255,213,74,.04)); }
.lbTop2 .lbBar { background: linear-gradient(90deg, rgba(207,216,230,.30), rgba(207,216,230,.04)); }
.lbTop3 .lbBar { background: linear-gradient(90deg, rgba(227,155,87,.30), rgba(227,155,87,.04)); }
.lbRank {
  position: relative; z-index: 1; min-width: 24px; text-align: center;
  font-weight: 800; color: #8ea3c9; font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.6) !important;
}
.lbTop1 .lbRank { color: #ffd54a; }
.lbTop2 .lbRank { color: #eef2f8; }
.lbTop3 .lbRank { color: #e39b57; }
.lbName {
  position: relative; z-index: 1; flex: 1; padding-left: 7px;
  font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,.6) !important;
}
.lbScore {
  position: relative; z-index: 1; color: #eef4ff; font-weight: 800; font-size: 14px; padding-right: 8px;
  text-shadow: 0 1px 3px rgba(0,0,0,.6) !important;
}

/* ---- SKELETON LOADERS (errorx002 2026-09-02) -----------------------------------------------------
   *"el indicador de carga que aparece cuando cambias el leaderboard de estrellas a puntos es feo y rompe
   la ilusion, igual el panel de informacion de la derecha"*. Both used to blank the panel and print the
   word Loading, so switching tabs collapsed the list to a single line of text and then rebuilt it -- the
   panel visibly changed size twice per click.
   The fix is not a nicer spinner, it is not emptying the panel: these placeholders are laid out at the
   SAME coordinates the real rows and cards will occupy, so the arriving data replaces them in place and
   nothing reflows. That is the whole point, and it is why .sklRow repeats the 29px row pitch and the
   .sklStat grid mirrors .acGrid instead of being some generic bar.
   ⚠ The sweep is a background-position animation on an opaque-to-transparent gradient, NOT opacity
   pulsing on the whole element. A panel of blocks fading in and out together reads as a broken render;
   a highlight travelling across them reads as work in progress. */
@keyframes sklSweep { to { background-position: 200% 0 } }
.skl {
  border-radius: 6px;
  background: linear-gradient(100deg,
    rgba(140,170,230,.07) 0%, rgba(140,170,230,.07) 38%,
    rgba(140,170,230,.20) 50%,
    rgba(140,170,230,.07) 62%, rgba(140,170,230,.07) 100%);
  background-size: 200% 100%;
  animation: sklSweep 1.25s linear infinite;
}
/* Absolutely positioned on the same 29px pitch and 8px top offset as a real .lbRow, so the eight
   placeholders sit exactly where the first eight results will. */
.sklRow { position: absolute; height: 22px; width: calc(100% - 26px); }
.sklStat { height: 58px; }
.sklHead { height: 38px; width: 46%; margin: 0 auto 8px; }
.sklName { height: 22px; width: 30%; margin: 0 auto 16px; }
/* Each placeholder starts its sweep a little later than the one above it. Without this all eight pulse in
   lockstep, which looks like a single flashing block rather than a list being filled in. */
.skl:nth-child(2)  { animation-delay: .07s }
.skl:nth-child(3)  { animation-delay: .14s }
.skl:nth-child(4)  { animation-delay: .21s }
.skl:nth-child(5)  { animation-delay: .28s }
.skl:nth-child(6)  { animation-delay: .35s }
.skl:nth-child(7)  { animation-delay: .42s }
.skl:nth-child(8)  { animation-delay: .49s }
.skl:nth-child(n+9) { animation-delay: .56s }
@media (prefers-reduced-motion: reduce) {
  .skl { animation: none; background-position: 0 0 }
}


#creditsContent2 { padding: 6px !important; }
.clCard {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(140,170,230,.14);
  border-radius: 10px; padding: 9px 11px 10px; margin-bottom: 9px;
}
.clDate {
  display: inline-block; font-weight: 800; font-size: 12.5px; color: #04121a;
  background: linear-gradient(135deg,#2ee6c6,#37f0a6);
  border-radius: 6px; padding: 2px 10px; margin-bottom: 7px; letter-spacing: .3px;
}
.clItem {
  position: relative; padding-left: 15px; margin: 5px 0;
  font-size: 13px; line-height: 1.4; color: #c6d3ec; font-weight: 600;
}
.clItem::before {
  content: ''; position: absolute; left: 2px; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: #2ee6c6;
}
.clSub { margin-left: 16px; }
.clSub::before { background: #7a5cff; }

#b0, #b1, #b2, #panel > button:not([id]) {
  animation: none !important;
  border: 1px solid rgba(140,170,230,.28) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.4) !important;
  transition: filter .15s, border-color .15s !important;
}
#b0 { background: #5865f2 !important; color: #fff !important; border-color: rgba(120,130,255,.55) !important; }
#b1, #b2 { background: rgba(18,26,46,.92) !important; color: #cdd8f0 !important; }
#panel > button:not([id]) {
  background: rgba(18,26,46,.85) !important; color: #8ea3c9 !important;
  font-weight: 700 !important; font-size: 13px !important;
}
#b0:hover, #b1:hover, #b2:hover, #panel > button:not([id]):hover {
  filter: brightness(1.14); border-color: rgba(46,230,198,.5) !important;
}

#discordButton { display: none !important; }

.authOverlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(6,10,20,.72); backdrop-filter: blur(7px);
  display: flex; align-items: center; justify-content: center;
}
.authCard {
  width: min(90vw, 460px); box-sizing: border-box;
  max-height: 92vh; overflow-y: auto;   /* scroll inside the viewport instead of overflowing off-screen */
  background: linear-gradient(180deg, #111c34, #0b1322);
  border: 1px solid rgba(140,170,230,.22);
  border-radius: 16px; padding: 26px 26px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.authLabel { color:#eef4ff !important; font-weight:800; font-size:18px; margin-bottom:14px; text-shadow:none !important; }
.authInput {
  width:100%; box-sizing:border-box;
  background: rgba(0,0,0,.35) !important; border:1px solid rgba(140,170,230,.25) !important;
  border-radius:10px; color:#eef4ff !important; font-size:18px; font-weight:600;
  padding:12px 14px; outline:none;
}
.authInput:focus { border-color: rgba(46,230,198,.6) !important; }
.authRow { display:flex; gap:12px; margin-top:18px; }
.authBtn {
  flex:1; border:none !important; border-radius:10px; cursor:pointer;
  font-size:16px; font-weight:800; padding:12px 0; transition:filter .15s; text-shadow:none !important;
}
.authBtn:hover { filter: brightness(1.1); }
.authCancel { background: rgba(255,255,255,.08) !important; color:#cdd8f0 !important; }
.authSubmit { background: linear-gradient(135deg,#2ee6c6,#37f0a6) !important; color:#04121a !important; }

/* unified login/signup card */
.authTitle { color:#eef4ff; font-weight:900; font-size:24px; margin-bottom:18px; text-align:center; letter-spacing:-.5px; text-shadow:none; }
.authField { margin-bottom:12px; }
.authFieldLabel { color:#9fb2d8; font-size:13px; font-weight:700; margin-bottom:6px; text-shadow:none; }
.authInputWrap { position:relative; }
.authInputWrap.hasToggle .authInput { padding-right:62px; }
.authToggle {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.08); color:#cdd8f0; border:none !important; border-radius:7px;
  font-size:12px; font-weight:800; padding:6px 10px; cursor:pointer; text-shadow:none;
}
.authToggle:hover { filter:brightness(1.15); }
.authError { display:none; color:#ff8a8a; font-size:14px; font-weight:700; margin-top:12px; text-align:center; text-shadow:none; }

#modals a {
  text-decoration: none !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  border-radius: 10px !important;
  transition: transform .12s, border-color .15s, color .15s, box-shadow .12s !important;
}
#modals a:hover {
  transform: translateY(-2px);
  color: #2ee6c6 !important;
  border-color: rgba(46,230,198,.6) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.5) !important;
}

#modals a { display: none !important; }

#respawnPanel { background: radial-gradient(900px 620px at 50% 42%, #131f38 0%, #080d1a 100%) !important; }
#respawnTitle {
  color: #ff6b6b !important; -webkit-text-stroke: 0 !important; font-weight: 900 !important;
  text-shadow: 0 0 44px rgba(255,80,80,.4), 0 4px 22px rgba(0,0,0,.6) !important;
}
#killer { color: #c6d3ec !important; text-shadow: 0 2px 8px rgba(0,0,0,.6) !important; }
#respawnStats {
  position: absolute; bottom: 128px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; z-index: 6;
}
.rsRow {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(20,28,48,.88); border: 1px solid rgba(140,170,230,.2);
  border-radius: 12px; padding: 11px 22px; min-width: 96px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.rsRow span { font-size: 12px; color: #8ea3c9; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.rsRow b { font-size: 23px; color: #2ee6c6; font-weight: 800; margin-top: 4px; }
#respawnContinue {
  background: linear-gradient(135deg,#2ee6c6,#37f0a6) !important; color: #04121a !important;
  border: none !important; border-radius: 12px !important; font-weight: 800 !important;
}
#respawnContinue:hover { filter: brightness(1.08); }

#disconnectDark { background: rgba(6,10,20,.72) !important; backdrop-filter: blur(6px); }
#disconnect {
  background: linear-gradient(180deg,#141f38,#0b1322) !important;
  border: 1px solid rgba(140,170,230,.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.6) !important;
}
#disconnectTitle { color: #ff6b6b !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; font-weight: 900 !important; }
#disconnectText { color: #c6d3ec !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; }
#disconnectReload {
  background: linear-gradient(135deg,#2ee6c6,#37f0a6) !important; color: #04121a !important;
  border: none !important; border-radius: 12px !important; font-weight: 800 !important;
}
#disconnectReload:hover { filter: brightness(1.08); background: linear-gradient(135deg,#3af0d2,#4dffb8) !important; }

#credits, #featured { width: 500px !important; height: 486px !important; top: calc(50% - 30px) !important; }
#credits  { left: calc(50% - 545px) !important; }
#featured { left: calc(50% + 545px) !important; }
#creditsContent, #creditsContent2 { width: 440px !important; height: 392px !important; top: 80px !important; }
#creditsTitle, #channel { width: 470px !important; height: 48px !important; }
#creditsText, #channelName { font-size: 22px !important; }

.lbRow { height: 26px !important; }
.lbRank { font-size: 16px !important; min-width: 26px !important; }
.lbName { font-size: 16px !important; }
.lbScore { font-size: 15px !important; }

/* zenitsv 2026-08-16: "Changelog tiene un font demasiado grande y Tips tiene un font muy pequeño".
   He is right and they were wrong in opposite directions: these two were bumped to 27/28px when the panel grew
   to 440x392 and overshot badly, while the tips text is injected into #creditsContent2 and inherited its 15px,
   so it never grew at all. Both now land near 17-18px, which is where the leaderboard rows next to them sit. */
.clDate { font-size: 18px !important; }
.clItem { font-size: 17px !important; }
/* The bullet was placed for 13px text; at 17px/1.4 the line box is ~24px and it sat too high. */
.clItem::before { top: 9px; width: 6px; height: 6px; }
#connecting {
  -webkit-text-stroke: 0 !important;
  color: #eef4ff !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  letter-spacing: 2px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
#connecting::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(760px 540px at 50% 50%, rgba(17,28,52,.5), rgba(7,11,22,.84));
}
.connSpin {
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 78px; height: 78px;
  border-radius: 50%;
  border: 6px solid rgba(140,170,230,.28);
  border-top-color: #2ee6c6;
  border-right-color: #2ee6c6;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: connSpin .75s linear infinite;
}
.connLabel {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 44px rgba(46,230,198,.55), 0 6px 24px rgba(0,0,0,.6);
  animation: connPulse 1.7s ease-in-out infinite;
}
.connLabel::after { content: ''; animation: connDots 1.6s infinite; }
@keyframes connSpin { to { transform: rotate(360deg); } }
@keyframes connPulse { 50% { opacity: .55; } }
@keyframes connDots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }
/* Hidden = idle (n00bi 2026-09-29, client optimizations): the loops above kept running under visibility:hidden
   for the whole match, and connDots animates `content`, a main-thread style change. script2's setLargeConnecting
   toggles .connIdle; the id + !important beats every skin's own connSpin/connPulse timing. */
#connecting.connIdle .connSpin, #connecting.connIdle .connLabel, #connecting.connIdle .connLabel::after { animation: none !important; }
#connectingSmall {
  -webkit-text-stroke: 0 !important;
  color: #eef4ff !important;
  font-size: 46px !important;
  text-shadow: 0 0 30px rgba(46,230,198,.45), 0 4px 18px rgba(0,0,0,.5) !important;
}
#accountDark { background: rgba(6,10,20,.72) !important; backdrop-filter: blur(6px); }
#accountFull {
  background: linear-gradient(180deg,#111c34,#0b1322) !important;
  border: 1px solid rgba(140,170,230,.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.6) !important;
}
#accountContent, #accountContent * { -webkit-text-stroke: 0 !important; text-shadow: none !important; color: #c6d3ec; }
.acHead { color:#eef4ff !important; font-size:38px; font-weight:900; text-shadow:0 0 34px rgba(46,230,198,.5) !important; }
.acName { color:#2ee6c6 !important; font-size:22px; font-weight:800; margin:2px 0 14px; }
.acLoadBtn {
  background: rgba(255,255,255,.06); color:#cdd8f0 !important; border:1px solid rgba(140,170,230,.25);
  border-radius:9px; padding:8px 14px; font-weight:700; font-size:14px; cursor:pointer; margin-bottom:18px;
}
.acLoadBtn:hover { color:#2ee6c6 !important; border-color:rgba(46,230,198,.5); }
.acGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:8px; }
.acStat { background: rgba(255,255,255,.04); border:1px solid rgba(140,170,230,.14); border-radius:10px; padding:10px 12px; text-align:left; }
.acStat span { display:block; font-size:11.5px; color:#8ea3c9 !important; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.acStat b { display:block; font-size:20px; color:#eef4ff !important; font-weight:800; margin-top:3px; }
.acSectionTitle { color:#8ea3c9 !important; font-weight:800; font-size:16px; margin:18px 0 8px; padding-bottom:5px; border-bottom:1px solid rgba(140,170,230,.15); }
.acSection > div { background:rgba(255,255,255,.03); border-radius:9px; padding:9px 12px; margin-bottom:7px; font-size:14px; line-height:1.4; }
/* published tanks on a profile: up to 5 cards, each preview + name + copy button (zodus 2026-07-25) */
.acPubWrap { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.acPubWrap > div { background:none !important; padding:0 !important; margin:0 !important; }
.acPubTank { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px; background:rgba(255,255,255,.03) !important; border-radius:9px; }
.acPubTank > div { background:none !important; padding:0 !important; margin:0 !important; }
.acPubTank canvas { background:rgba(0,0,0,.18); border-radius:9px; }
.acPubName { color:#cfe0ff !important; font-weight:700; font-size:15px; }
.acEmpty { color:#6f83ab !important; font-style:italic; }
#accountBack {
  background: linear-gradient(135deg,#2ee6c6,#37f0a6) !important; color:#04121a !important;
  border:none !important; border-radius:12px !important; font-weight:800 !important;
}
#accountBack:hover { filter:brightness(1.08); }
#serverSelectLower { background: transparent !important; }
/* ---- Client Settings themes (persisted as localStorage.tsTheme, applied as body.theme-*) ---- */
:root, body.theme-midnight {
  --th-card: linear-gradient(180deg,#111c34,#0b1322);
  --th-border: rgba(140,170,230,.22);
  --th-line: rgba(140,170,230,.10);
  --th-text: #c6d3ec;
  --th-muted: #6f83ab;
  --th-accent: linear-gradient(135deg,#5a8bff,#6aa0ff);
  --th-accentc: #6aa0ff;
  --th-track: rgba(140,170,230,.18);
}
body.theme-teal {
  --th-card: linear-gradient(180deg,#0c2422,#071615);
  --th-border: rgba(120,230,210,.24);
  --th-line: rgba(120,230,210,.12);
  --th-text: #bfeee6; --th-muted: #6fa8a0;
  --th-accent: linear-gradient(135deg,#2ee6c6,#37f0a6);
  --th-accentc: #2ee6c6; --th-track: rgba(120,230,210,.16);
}
body.theme-emerald {
  --th-card: linear-gradient(180deg,#0f2a1e,#0a1a14);
  --th-border: rgba(120,230,170,.24);
  --th-line: rgba(120,230,170,.12);
  --th-text: #c3edd4; --th-muted: #6fa585;
  --th-accent: linear-gradient(135deg,#2fd873,#37f0a6);
  --th-accentc: #37f0a6; --th-track: rgba(120,230,170,.16);
}
body.theme-crimson {
  --th-card: linear-gradient(180deg,#2a1216,#1a0b0e);
  --th-border: rgba(230,140,150,.24);
  --th-line: rgba(230,140,150,.12);
  --th-text: #f0cdd2; --th-muted: #b07f86;
  --th-accent: linear-gradient(135deg,#ff5a6a,#ff7a5a);
  --th-accentc: #ff5a6a; --th-track: rgba(230,140,150,.16);
}
body.theme-amethyst {
  --th-card: linear-gradient(180deg,#1e1433,#130b22);
  --th-border: rgba(185,140,255,.24);
  --th-line: rgba(185,140,255,.12);
  --th-text: #dccdf0; --th-muted: #8f7fb0;
  --th-accent: linear-gradient(135deg,#b98cff,#8c6aff);
  --th-accentc: #b98cff; --th-track: rgba(185,140,255,.16);
}
body.theme-amber {
  --th-card: linear-gradient(180deg,#2a2113,#1a140b);
  --th-border: rgba(255,200,110,.24);
  --th-line: rgba(255,200,110,.12);
  --th-text: #f0e3cd; --th-muted: #b0a07f;
  --th-accent: linear-gradient(135deg,#ffb648,#ff9a48);
  --th-accentc: #ffb648; --th-track: rgba(255,200,110,.16);
}
body.theme-light {
  --th-card: linear-gradient(180deg,#f4f7ff,#e7edf9);
  --th-border: rgba(60,90,150,.30);
  --th-line: rgba(60,90,150,.14);
  --th-text: #1c2a44; --th-muted: #5a6b88;
  --th-accent: linear-gradient(135deg,#3a7afe,#5a8bff);
  --th-accentc: #3a7afe; --th-track: rgba(60,90,150,.16);
}
/* Depths theme (errorx002 2026-09-21): the dedicated "Subterranean Cavern" palette as a Tema swatch —
   dark-elegant's sober darkness with a cold graphite/steel accent instead of blue, so the GUI carries the
   "toques de Depths" even when the Depths SKIN isn't active. Gated to __aaiAllowed (AAI_THEMES) until zodus
   flips it public; the in-game field + faceted-dusty stone come from THEME_CANVAS.depths / THEME_GEM.depths. */
body.theme-depths {
  --th-card: linear-gradient(180deg,#181b20,#101216);
  --th-border: rgba(150,170,190,.20);
  --th-line: rgba(150,170,190,.10);
  --th-text: #cdd6e0; --th-muted: #7a8694;
  --th-accent: linear-gradient(135deg,#6f8194,#8ea2b6);
  --th-accentc: #8ea2b6; --th-track: rgba(150,170,190,.16);
}
/* Tankcore dedicated THEME (errorx002 2026-09-21: "ademas con su 'tema' dedicado"). A bright glossy
   Frutiger-Aero palette (aqua + lime on light glass) so the GUI carries the Tankcore look even without the
   SKIN. Gated to __aaiAllowed (AAI_THEMES) until zodus flips it public; the in-game Endless-Yard field comes
   from THEME_CANVAS.tankcore.
   The SKIN carries these tokens too (errorx002 2026-09-22: "tengo una skin elegida, se desconfigura el theme
   color dedicado"). The --th-* GUI tokens used to come ONLY from the theme swatch, so the Tankcore skin on e.g.
   Midnight/Crimson drew blue/red option cards inside the glass UI. `html body.skin-*` is (0,1,2), so it beats
   every `body.theme-*` (0,1,1) whatever the file order — the skin's own palette always wins over the swatch. */
body.theme-tankcore, html body.skin-tankcore {
  --th-card: linear-gradient(180deg,rgba(255,255,255,.92),rgba(214,234,244,.94));
  --th-border: rgba(52,116,150,.30);
  --th-line: rgba(52,116,150,.14);
  --th-text: #16323f; --th-muted: #5b7a86;
  --th-accent: linear-gradient(135deg,#12b3e6,#7ed957);
  --th-accentc: #12b3e6; --th-track: rgba(59,190,240,.18);
}
/* Shapeboat Willie dedicated THEME (errorx002 2026-09-21). A 1930s silent-film palette — bone-white paper card,
   pure black ink borders/text/accent — so the GUI carries the celluloid look even without the SKIN. Gated to
   __aaiAllowed (AAI_THEMES) until zodus flips it public; the animator-paper field comes from THEME_CANVAS.shapeboat.
   Carried by the SKIN as well — see the tankcore note above. */
body.theme-shapeboat, html body.skin-shapeboat {
  --th-card: linear-gradient(180deg,#f6f3ec,#eae6dd);
  --th-border: rgba(20,17,14,.62);
  --th-line: rgba(20,17,14,.14);
  --th-text: #141210; --th-muted: #5c554c;
  --th-accent: linear-gradient(135deg,#2b2622,#141210);
  --th-accentc: #141210; --th-track: rgba(20,17,14,.14);
}
/* Fruits And Pears dedicated THEME. The Fruits swatch had NO token block at all, so picking it fell straight
   through to the :root Midnight tokens: dark-blue cards and a blue accent under the meadow field. These are the
   skin's own --fr-* colours (kraft cream card, cocoa ink, leaf-green accent). Carried by the SKIN as well — see the
   tankcore note above. (errorx002 2026-09-22) */
body.theme-fruits, html body.skin-fruits {
  --th-card: linear-gradient(180deg,rgba(242,230,202,.97),rgba(230,214,178,.97));
  --th-border: rgba(104,78,40,.30);
  --th-line: rgba(104,78,40,.14);
  --th-text: #3a2c18; --th-muted: #7c6a45;
  --th-accent: linear-gradient(135deg,#6ba050,#7fb862);
  --th-accentc: #6ba050; --th-track: rgba(104,78,40,.16);
}
.optSwatches { display: flex; flex-wrap: wrap; gap: 9px; pointer-events: all; }
.optSwatch {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sw);
  cursor: pointer;
  border: 2px solid rgba(255,255,255,.16);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  transition: transform .12s ease, border-color .12s ease;
}
.optSwatch:hover { transform: scale(1.14); }
.optSwatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--sw), 0 2px 6px rgba(0,0,0,.5); }
.optSwitchRow { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.optSwitchRow .optLabel { margin-bottom: 0; }
.optSub { color: var(--th-muted); font-size: 11px; font-weight: 600; margin-top: 4px; max-width: 300px; line-height: 1.35; }
/* "(test)" marker on settings that are still experimental (acely777 2026-08-19, for the music rows).
   A SIBLING of the [data-i18n] span, never inside it — the i18n pass overwrites textContent on those. */
.optTestTag { color: var(--th-accent); font-size: 10px; font-weight: 800; margin-left: 6px;
  letter-spacing: .04em; text-transform: uppercase; opacity: .85; vertical-align: middle; }
.optToggle {
  flex: 0 0 auto; width: 46px; height: 26px; border-radius: 13px;
  background: var(--th-track); cursor: pointer; position: relative;
  transition: background .15s ease; pointer-events: all;
}
.optToggle.on { background: var(--th-accent); }
.optToggleKnob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: left .15s ease;
}
.optToggle.on .optToggleKnob { left: 23px; }

/* ── BRUTAL MODE toggle + activation drama (errorx002 2026-09-05) ─────────────────────────────────────
   Red switch, red centred title, a white line that sweeps across the title on select, and — when you
   turn it on — the whole settings card shakes, the labels flash red, and a message drops in from the top
   like an in-game announcement. Mode-specific accent, so the red deliberately wins over the neutral
   per-skin toggle colour (see [[inline-styles-beat-every-skin]]). Only the local player ever sees it. */
.optBrutalLabel { flex: 1 1 auto; text-align: center; }
.optBrutalTitle {
  display: inline-block; position: relative; overflow: hidden;
  color: #ff3b3b !important; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255,45,45,.5);
}
.optBrutalRow .optSub { color: rgba(255,150,150,.82) !important; max-width: none; }
.optBrutalRow .optToggle { background: rgba(120,22,22,.72) !important; }
.optBrutalRow .optToggle.on { background: #e42323 !important; box-shadow: 0 0 12px rgba(255,45,45,.65); }
/* the white shine — a skewed band that rides across the title on hover and, once, on activation */
.optBrutalTitle::after {
  content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.optBrutalRow:hover .optBrutalTitle::after { animation: brutalShine 900ms ease; }
.optBrutalTitle.brutalShineGo::after { animation: brutalShine 700ms ease; }
@keyframes brutalShine {
  0% { left: -70%; opacity: 0; }
  12% { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
#brutalToggle.brutalShineGo { animation: brutalTogPulse 700ms ease; }
@keyframes brutalTogPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,45,45,.65); }
  40% { box-shadow: 0 0 22px rgba(255,60,60,.95); }
}
/* activation shake — `translate` (not `transform`), so it never clobbers the card's own centring/scale */
#optionsCard.brutalShake { animation: brutalShake .55s cubic-bezier(.36,.07,.19,.97); }
@keyframes brutalShake {
  10% { translate: -3px 1px; } 20% { translate: 4px -2px; } 30% { translate: -5px 2px; }
  40% { translate: 4px -1px; } 50% { translate: -4px 2px; } 60% { translate: 3px -1px; }
  70% { translate: -2px 1px; } 80% { translate: 2px -1px; } 100% { translate: none; }
}
/* labels flash red then fall back to whatever colour the current GUI mode gives them. Implicit 0%/100%
   keyframes mean it animates FROM and back TO each element's own colour — skin-safe on every style. */
#optionsCard.brutalFlash .optLabel,
#optionsCard.brutalFlash .optSub,
#optionsCard.brutalFlash .sbTab { animation: brutalFlashText .9s ease; }
@keyframes brutalFlashText { 45% { color: #ff3030; text-shadow: 0 0 10px rgba(255,45,45,.8); } }
/* the drop-in message, styled like the in-game announcement toast. A direct child of #optionsMenu (NOT the
   card) so the card's overflow:auto can't clip it — it drops in at the top of the viewport like a real toast. */
#brutalMsg {
  position: absolute; top: 3vh; left: 50%; translate: -50% 0; z-index: 90005;
  max-width: min(560px, 88vw); padding: 10px 20px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(42,3,3,.97), rgba(20,1,1,.97));
  border: 1px solid rgba(255,55,55,.55); color: #ffe0e0;
  font-size: 14px; font-weight: 700; text-align: center; line-height: 1.4;
  text-shadow: 0 0 8px rgba(255,45,45,.6);
  box-shadow: 0 8px 26px rgba(120,0,0,.5), inset 0 0 14px rgba(255,45,45,.28);
  opacity: 0; pointer-events: none;
}
#brutalMsg.show { animation: brutalMsgIn 6s ease both; }
@keyframes brutalMsgIn {
  0% { opacity: 0; translate: -50% -160%; }
  8% { opacity: 1; translate: -50% 0; }
  86% { opacity: 1; translate: -50% 0; }
  100% { opacity: 0; translate: -50% -90%; }
}
/* Depths windows read a touch flat — a faint warm quartz wash on the settings card gives them depth
   without touching the diorama field (errorx002: "dale un poquito de color ... se ve un poco plano"). */
body.skin-depths #optionsCard {
  background-image: linear-gradient(155deg, rgba(224,189,122,.05), rgba(224,189,122,0) 42%, rgba(150,170,200,.045));
}
@media (prefers-reduced-motion: reduce) {
  #optionsCard.brutalShake, #brutalMsg.show, .optBrutalTitle.brutalShineGo::after,
  #optionsCard.brutalFlash .optLabel, #optionsCard.brutalFlash .optSub { animation-duration: .01ms; }
}

#optionsMenu {
  position: fixed;
  inset: 0;
  z-index: 90000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6,10,20,.66);
  backdrop-filter: blur(7px);
}
#optionsMenu.open { display: flex; }
#optionsCard {
  position: relative;
  width: min(92vw, 440px);
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
  /* A soft light line drifts diagonally across the panel so the flat background feels alive instead of "un
     color un tanto vacio" (errorx002 2026-09-06). It lives as the FIRST background layer on the card itself
     (over the --th-card colour) rather than a ::before — background-attachment defaults to `scroll`, which pins
     it to the card's frame, so it no longer scrolls out / gets cut when you scroll the settings list (his
     "si scrolleo abajo se ve como se corta ... pegado a medias"). Skins that set their own #optionsCard
     background override the whole thing and keep their look. */
  background:
    linear-gradient(115deg, transparent 42%, rgba(255,255,255,.05) 48%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 52%, transparent 58%) 170% 0 / 240% 100% no-repeat,
    var(--th-card);
  border: 1px solid var(--th-border);
  border-radius: 16px;
  padding: 24px 26px 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  pointer-events: all;
  animation: optSweep 6s linear infinite;
  transition: background-color .35s ease, border-color .35s ease;
}
@keyframes optSweep { from { background-position: 170% 0, 0 0 } to { background-position: -70% 0, 0 0 } }

/* Open the Brutal tab and the whole settings card slides grey -> dark red (errorx002 2026-09-11,
   "el color de ajustes de fondo pasa de ese gris a rojo oscuro"). Only background-color/border are
   overridden so the diagonal light-sweep layer from the base #optionsCard shorthand survives, and it
   crossfades via the transition declared just above. show() in __optTabs toggles the class. */
#optionsCard.optBrutalTabActive {
  background-color: #2a0d11;
  border-color: #5a1a20;
}

/* Brutal death title (errorx002 2026-09-10/11): the cycling ".!/..!/...!" goes red, not white. id+class
   beats the plain #respawnTitle colour without needing !important. */
#respawnTitle.brutalDeathTitle {
  color: #ff2a2a;
  -webkit-text-stroke-color: #2a0000;
}
@media (prefers-reduced-motion: reduce) { #optionsCard { animation: none; } }

/* ---- settings tabs (zenitsv 2026-08-16) -----------------------------------------------------------
   Eleven rows in one column made the panel scroll; these split it into Video / Interface / Effects /
   Controls. Built in script2.js (__optTabs) so the markup is untouched and the account gate stays the one
   in __refreshSkin — a tab whose rows are all gated off hides itself.
   Sits between #optionsTitle and the first row, so the title's own margin-bottom is what spaces it. */
.optTabs {
  display: flex; gap: 4px; margin: -8px 0 16px;
  background: var(--th-track); border: 1px solid var(--th-border);
  border-radius: 10px; padding: 4px;
}
.optTab {
  flex: 1; text-align: center; cursor: pointer; user-select: none;
  padding: 7px 6px; border-radius: 7px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--th-muted, #8ea3c9);
  transition: background .12s ease, color .12s ease;
  /* With the 6th "Brutal" tab a row of flex:1 items overflowed the card ("el boton no cabe en la ventana",
     errorx002 2026-09-11): flex items default to min-width:auto and refuse to shrink below their label, so
     six of them spilled past the rounded frame. min-width:0 lets them share the width, and a label too long
     for its slice ellipses instead of pushing the row wider. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.optTab:hover { color: var(--th-text, #eef4ff); }
.optTab.on { background: var(--th-accentc); color: #0d1420; }
/* Quartz accents are pale, so white-on-accent would vanish — take the panel ink instead. */
body.skin-elegant .optTab.on { background: var(--qz-tint-2); color: var(--qz-ink); }
body.skin-classic .optTab.on { background: var(--cl-edge); color: var(--cl-text); }

/* The 6th "Brutal" tab (errorx002 2026-09-10). Red-flavoured, and on a genuine switch-ON it grows in —
   animating max-width squeezes the sibling flex:1 tabs aside ("crece en X ... empujando los otros botones"),
   while the bar gives a short tremble. */
.optTab[data-tab="Brutal"] { color: #ff6a6a; }
.optTab[data-tab="Brutal"].on { background: #b3202a; color: #fff; }
.optTab[data-tab="Brutal"].brutalTabIn {
  overflow: hidden; white-space: nowrap;
  animation: brutalTabExpand .55s cubic-bezier(.2, .9, .2, 1.05) both;
}
@keyframes brutalTabExpand {
  0%   { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; transform: translateY(-5px); }
  55%  { opacity: 1; }
  100% { max-width: 120px; padding-left: 6px; padding-right: 6px; opacity: 1; transform: none; }
}
.optTabs.brutalTabsGrow { animation: brutalTabsWobble .5s ease; }
@keyframes brutalTabsWobble {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .optTab[data-tab="Brutal"].brutalTabIn { animation: none; }
  .optTabs.brutalTabsGrow { animation: none; }
}

/* Controls (rebindable keybinds) section in the settings panel */
#controlsSection { margin-top: 8px; border-top: 1px solid rgba(140,170,230,.18); padding-top: 6px; }
.optControlsTitle { color:#eef4ff; font-weight:800; font-size:16px; margin:8px 0 4px; }
.optControlsHint { color:#8ea3c9; font-size:11px; font-weight:600; margin-bottom:8px; line-height:1.35; }
.optCtrlRow { display:flex; align-items:center; justify-content:space-between; padding:4px 0; gap:10px; }
.optCtrlLabel { color:#cdd8f0; font-size:13px; font-weight:600; }
.optCtrlKey { min-width:78px; background:rgba(255,255,255,.08); color:#eef4ff; border:1px solid rgba(140,170,230,.25); border-radius:7px; font-weight:800; font-size:13px; padding:6px 10px; cursor:pointer; }
.optCtrlKey:hover { border-color:rgba(46,230,198,.6); }
.optCtrlKey.rebinding { border-color:#2ee6c6; color:#2ee6c6; background:rgba(46,230,198,.12); }
.optCtrlReset { margin-top:10px; width:100%; background:rgba(255,255,255,.08); color:#cdd8f0; border:none; border-radius:8px; font-weight:800; font-size:13px; padding:9px 0; cursor:pointer; }
.optCtrlReset:hover { filter:brightness(1.15); }
#optionsTitle {
  color: #eef4ff;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .3px;
  margin-bottom: 18px;
  text-shadow: 0 0 30px rgba(46,230,198,.4);
}
#optionsClose {
  position: absolute;
  top: 16px;
  right: 20px;
  color: #8ea3c9;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s;
}
#optionsClose:hover { color: #2ee6c6; }
.optRow {
  padding: 11px 0;
  border-top: 1px solid var(--th-line);
}
.optRow:first-of-type { border-top: none; }
.optLabel {
  color: var(--th-text);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 9px;
}
.optSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--th-track);
  outline: none;
  pointer-events: all;
  cursor: pointer;
}
.optSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--th-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  cursor: pointer;
}
.optSlider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--th-accent);
  cursor: pointer;
}
.optDisabled { opacity: .5; display: flex; align-items: center; justify-content: space-between; }
.optDisabled .optLabel { margin-bottom: 0; }
.optComing {
  color: #8ea3c9;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(140,170,230,.25);
  border-radius: 6px;
  padding: 3px 9px;
}
#optionsHint {
  text-align: center;
  color: var(--th-muted);
  font-size: 12px;
  margin-top: 16px;
}
#serverSelectTitle { display: none !important; }
#serverBrowser {
  position: absolute;
  left: 50%;
  bottom: calc(50% + 28px);
  transform: translateX(-50%);
  width: 470px;
  max-width: 92vw;
  box-sizing: border-box;
}
#sbTabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}
.sbTab {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 800;
  color: #8ea3c9;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(140,170,230,.16);
  border-radius: 10px;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  pointer-events: all;
}
.sbTab:hover { color: #cdd8f0; }
.sbTab.sbActive {
  color: #04121a;
  background: linear-gradient(135deg,#2ee6c6,#37f0a6);
  border-color: rgba(46,230,198,.5);
}

/* ---- SLIDING TAB HIGHLIGHT (zenitsv; opt-in via .sbFx, added by page.uiFx for one account) --------
   Stock behaviour cross-fades the highlight from one tab to the next, so it teleports. With .sbFx the
   colour lives on a single pill that TRANSLATES to the chosen tab on sine-in-out, and the tabs themselves
   go transparent so there is only ever one coloured thing on screen. The tabs need a stacking context of
   their own (position/z-index) or the pill paints straight over the labels. */
#sbTabs.sbFx { position: relative; }
#sbTabs.sbFx .sbTab {
  position: relative;
  z-index: 1;
  background: transparent;
  border-color: transparent;
  transition: color .26s cubic-bezier(0.65, 0, 0.25, 1);
}
#sbTabs.sbFx .sbTab.sbActive { background: transparent; border-color: transparent; }
/* zenitsv: "el color absolutamente solido de los botones ... es un poco rancio, dales un gradient o un blur
   ligeramente suave". The stock active tab does technically carry a gradient, but #2ee6c6 -> #37f0a6 are so
   close that it reads flat. Widened across three stops and given a soft bloom underneath (::after, blurred and
   scaled) so the pill sits in light rather than being a solid slab. */
.sbInd {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(135deg,#3ff0d4 0%,#2ee6c6 45%,#22c9a8 100%);
  border: 1px solid rgba(120,255,225,.55);
  box-shadow: 0 4px 18px rgba(46,230,198,.32), inset 0 1px 0 rgba(255,255,255,.28);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 0;
  /* Was sine-in-out at .32s, which zenitsv read as "lento ... linear y un poco soso" — and he is right,
     sine is nearly straight through its whole middle, so it reads as constant speed. This curve leaves and
     arrives much more gently while spending less time in the middle, so it is quicker AND smoother. */
  transition: transform .26s cubic-bezier(0.65, 0, 0.25, 1),
              width .26s cubic-bezier(0.65, 0, 0.25, 1);
}
.sbInd::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  background: linear-gradient(135deg,#3ff0d4,#22c9a8);
  filter: blur(9px);
  opacity: .5;
  z-index: -1;
}

/* ---- SLIDING ROW SELECTION (zenitsv: "cada que cambie, el seleccionado ... se mueve al elegido, en vez de
   cambiar bruscamente"). Same idea as the tab pill, one axis down: the FFA / 2 Teams / 4 Teams highlight
   becomes one bar that travels between rows instead of a background that swaps instantly. */
#sbList.sbFx { position: relative; }
#sbList.sbFx .sbRow { position: relative; z-index: 1; }
#sbList.sbFx .sbRow.sbSel { background: transparent; box-shadow: none; }
.sbRowInd {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 0;
  border-radius: 9px;
  background: rgba(46,230,198,.14);
  box-shadow: inset 0 0 0 1px rgba(46,230,198,.45);
  pointer-events: none;
  z-index: 0;
  transition: transform .26s cubic-bezier(0.65, 0, 0.25, 1),
              height .26s cubic-bezier(0.65, 0, 0.25, 1);
}
@media (prefers-reduced-motion: reduce) {
  .sbInd, .sbRowInd { transition: none; }
}

/* ---- SERVER ROWS ENTER WITH THE TAB (zenitsv 2026-08-16: "en vez de aparecer asi de golpe ... una
   transicion con eso de izquierda a derecha y derecha a izquierda"). The rows come in from the side you moved
   TOWARDS: picking a tab to the right slides them in from the right. sbRender() runs on every playercount
   poll, so the JS only applies these classes when the CATEGORY actually changed — otherwise the whole list
   would re-animate every few seconds. */
@keyframes sbRowInR {
  from { opacity: 0; transform: translateX(30px) }
  to   { opacity: 1; transform: none }
}
@keyframes sbRowInL {
  from { opacity: 0; transform: translateX(-30px) }
  to   { opacity: 1; transform: none }
}
/* The class goes on the ROWS, not on #sbList. sbRender() rebuilds the rows with innerHTML = '' on every
   render, so a class parked on the container would re-fire the animation for every newly built row — which is
   exactly what happened when zenitsv clicked FFA -> 4TDM: selectMode() re-renders, the container still
   carried .sbInR, and the fresh rows all animated at once with no stagger (the per-row delays are only set on
   a real tab switch). On the rows it is self-cleaning: a render that should not animate simply builds rows
   without the class. */
.sbRow.sbInR, .sbEmpty.sbInR {
  animation: sbRowInR .34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sbRow.sbInL, .sbEmpty.sbInL {
  animation: sbRowInL .34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---- INFORMATION PANEL, changelog <-> tips (zenitsv 2026-08-16: "agrega lo mismo de izquierda a derecha y
   derecha a izquierda anims como hicistes con leaderboard del main menu", then "el transition esta bien, pero
   solo como transition para todo"). Same direction rule as the server tabs: moving right along the tab row
   enters from the right, moving back enters from the left — but as ONE movement of the whole content, with no
   per-line stagger.
   IT MOVES .clWrap, NOT #creditsContent2. Putting it on the panel itself broke twice over: the panel is
   centred with a base `transform: translate(-50%, 0)` and these keyframes do not carry it, so the whole box
   jumped half its width to the right; and the panel is not clipped by anything, so the content slid out across
   the menu ("AHORA TODO SE CORRE FUERA DEL TAB"). Inside, the panel's own overflow does the clipping and the
   wrapper has no base transform to preserve. The wrapper is rebuilt on every toggle, so no reflow hack is
   needed to replay the animation. */
@keyframes clInR {
  from { opacity: 0; transform: translateX(26px) }
  to   { opacity: 1; transform: none }
}
@keyframes clInL {
  from { opacity: 0; transform: translateX(-26px) }
  to   { opacity: 1; transform: none }
}
#creditsContent2 > .clWrap.clInR { animation: clInR .3s cubic-bezier(0.22, 1, 0.36, 1) both; }
#creditsContent2 > .clWrap.clInL { animation: clInL .3s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  #creditsContent2 > .clWrap.clInR, #creditsContent2 > .clWrap.clInL { animation: none; }
}

/* ---- ACCOUNT / PROFILE PANEL (zenitsv 2026-08-16: "podria aparecer ligeramente desde abajo con opacidad 0
   a estar en el centro de la pantalla con 1"). The stock panel slides DOWN from top: -100% on a `top`
   transition; this replaces that with a short rise from below plus a fade, and staggers the contents in.
   The keyframe carries the base translate(-50%, -50%) — #accountFull is CENTRED on its top/left, so a bare
   translateY() here would drop it a full half-width to the right and half-height down. (Same trap as the
   upgrade boxes.) `transition: none` while the class is on, so the inherited `top` transition cannot fight
   the animation; the class is removed on close, which gives the exit its original upward slide back. */
/* REWORKED 2026-09-02 (errorx002: *"que la revelacion del panel empiece como en Y -250 hacia el centro,
   algo mas dinamico"*). It used to rise 34px, which he found too subtle to read as an entrance at all.
   Now it DROPS in from 250px above and settles, with a scale that opens out as it lands.
   ⚠ EVERY FRAME MUST RESTATE translate(-50%, -50%). #accountFull is centred on its top/left, so a bare
   translateY() in any one of these stops would drop it half its width right and half its height down for
   the length of that stop. This is the trap that produced the 'tank distribution' bug; it is why the
   percentages are repeated in all three frames instead of being factored out.
   ⚠ translate BEFORE scale. Percentage translates resolve against the element's own untransformed border
   box, but only while they are the left-hand operand -- swapping the order makes the centring shrink with
   the scale and the panel drifts toward its own top-left as it lands.
   The 68% stop overshoots 9px past centre and comes back; a single ease-out over 250px reads as the panel
   sliding to a stop, and the small overshoot is what makes it land instead. */
/* ⚠ THIS WAS A 250px DROP WITH AN OVERSHOOT, AND HE CALLED IT *"un poco cringe"*. He asked for it to be
   more striking and it was; striking and elegant turn out to be different requests. A panel that flies in
   from off-screen and bounces is a lot of motion to spend on opening a menu, and the overshoot in
   particular is the part that reads as cheap.
   It now resolves in place: a short rise, a small scale, and a blur that clears -- the same treatment the
   Elegant options card uses, which is the one in this file he has never complained about.
   ⚠ EVERY KEYFRAME THAT SETS transform MUST RESTATE translate(-50%, -50%). #accountFull is centred by that
   translate, so a keyframe that sets only a scale drops the centring and the panel jumps to the middle-
   right of the screen. The 55% frame deliberately sets no transform at all, so it interpolates. */
@keyframes acIn {
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + 20px)) scale(.964); filter: blur(9px) }
  55%  { opacity: 1; filter: blur(0) }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0) }
}
@keyframes acItemIn {
  from { opacity: 0; transform: translateY(16px) }
  to   { opacity: 1; transform: none }
}
#accountFull.acFx {
  transition: none;
  animation: acIn .52s cubic-bezier(0.16, 0.84, 0.28, 1) both;
}
#accountFull.acFx #accountContent > * {
  animation: acItemIn .3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* 0.10s lead-in, then 0.08s apart. Explicit nth-child rather than JS because the profile body is written by
   several different code paths (own account, another player's, the error strings) and replacing innerHTML
   restarts these animations on its own — no hook needed in any of them. Past the 10th child the delay simply
   stops growing, which is the right failure mode for a long profile. */
#accountFull.acFx #accountContent > *:nth-child(1) { animation-delay: .26s }
#accountFull.acFx #accountContent > *:nth-child(2) { animation-delay: .34s }
#accountFull.acFx #accountContent > *:nth-child(3) { animation-delay: .42s }
#accountFull.acFx #accountContent > *:nth-child(4) { animation-delay: .50s }
#accountFull.acFx #accountContent > *:nth-child(5) { animation-delay: .58s }
#accountFull.acFx #accountContent > *:nth-child(6) { animation-delay: .66s }
#accountFull.acFx #accountContent > *:nth-child(7) { animation-delay: .74s }
#accountFull.acFx #accountContent > *:nth-child(8) { animation-delay: .82s }
#accountFull.acFx #accountContent > *:nth-child(9) { animation-delay: .90s }
#accountFull.acFx #accountContent > *:nth-child(n+10) { animation-delay: .98s }
/* ---- MAIN MENU ENTRANCE (errorx002 2026-09-02) ---------------------------------------------------
   *"las animaciones de entrada de los elementos del menu principal son muy debiles, hazlas mas
   llamativas"*. There were in fact NO entrance animations on the menu blocks at all -- what existed was
   the server-row slide, the tab pill and the button hovers, all of which fire on interaction. Everything
   simply appeared. So this is the entrance, not a strengthening of one.
   Each block enters from the side it lives on: the leaderboard from the left, the video box from the
   right, the title down from above, the play controls up from below. That is what makes it read as the
   menu assembling rather than as one panel fading in six times.

   ⚠ THESE USE THE INDEPENDENT `translate` AND `scale` PROPERTIES, NOT `transform`, AND THAT IS LOAD-
   BEARING. Every single element here is positioned with a centring transform of its own -- #credits and
   #featured are translate(-50%, -50%), #title and #videoBox translate(-50%, 0), #serverBrowser
   translateX(-50%), #serverSelectTitle translate(-50%, -220px), and the three buttons carry theirs INLINE,
   where it also outranks any stylesheet rule. A keyframe animating `transform` overwrites that outright,
   so every one of these would jump half its own width right and half its height down for the length of the
   animation. (This is the same trap as [[keyframes-must-restate-centring-translate]]; the alternative is
   restating eight different centring transforms across sixteen keyframe stops and keeping them correct
   forever.) `translate` and `scale` are separate properties that COMPOSE with `transform` instead of
   replacing it, so none of the above has to be repeated or even known here.

   ⚠ transform-origin MUST be restated. `* { transform-origin: 0 0 }` at the top of this file means an
   unqualified scale() shrinks a box toward its top-left corner, so a centred panel would slide diagonally
   as it scales up. Origin does not affect translate, so setting it here cannot disturb the centring.

   ⚠ #playMenu AND #changelog ARE DELIBERATELY EXCLUDED. #playMenu carries an inline opacity:0 that JS
   raises once a server is picked, and #changelog an inline visibility. An animation with fill-mode `both`
   holds its final keyframe value forever and outranks the inline style, so animating opacity on either one
   would strand it -- permanently visible before you have a server, or permanently hidden. Do not add them.

   Gated on body.uiFx, like the rest of this batch. armInd() adds that class while script2 is still
   parsing, so it is present before the first paint and there is no flash of un-animated menu. */
@keyframes mnDrop  { from { opacity: 0; translate: 0 -64px; scale: .94 } }
@keyframes mnRise  { from { opacity: 0; translate: 0 52px;  scale: .96 } }
@keyframes mnFromL { from { opacity: 0; translate: -72px 0; scale: .96 } }
@keyframes mnFromR { from { opacity: 0; translate: 72px 0;  scale: .96 } }
body.uiFx #credits, body.uiFx #featured, body.uiFx #videoBox,
body.uiFx #serverSelectTitle, body.uiFx #serverBrowser, body.uiFx #menuAppearance,
body.uiFx #b0, body.uiFx #b1, body.uiFx #b2 {
  transform-origin: 50% 50%;
  animation-duration: .62s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
}
/* The title leads and everything else follows it, so the eye has somewhere to start. The two side panels
   arrive together rather than one after the other -- they are symmetrical, and staggering them made the
   menu look lopsided while it assembled. */
/* ⚠ #title NEEDS !important AND AN EXTRA SPECIFICITY POINT, unlike everything else in this block. Three
   separate rules kill animation on it -- the base #title (to stop the .radiantColor rainbow the element's
   own class would otherwise give it) and again inside body.skin-elegant and body.skin-depths -- and all
   three are `animation: none !important`. Without !important here the entrance simply never runs; with
   !important but at plain body.uiFx specificity it still loses to the two skin rules, which score the same
   0,2,0 and sit LATER in this file. Leading with `html` makes it 0,2,1 and settles it in every skin.
   This does NOT bring the rainbow back: the whole point is that a specific animation-name is named here,
   so radiantColor stays off and only the entrance plays. */
html body.uiFx #title {
  transform-origin: 50% 50%;
  animation-name: mnDrop !important;
  animation-duration: .62s !important;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation-fill-mode: both !important;
  animation-delay: .04s !important;
  animation-iteration-count: 1 !important;
  text-transform: uppercase;
}
body.uiFx #serverSelectTitle{ animation-name: mnDrop;  animation-delay: .16s; }
body.uiFx #credits          { animation-name: mnFromL; animation-delay: .22s; }
body.uiFx #featured         { animation-name: mnFromR; animation-delay: .22s; }
body.uiFx #videoBox         { animation-name: mnFromR; animation-delay: .30s; }
body.uiFx #serverBrowser    { animation-name: mnRise;  animation-delay: .30s; }
body.uiFx #b2               { animation-name: mnRise;  animation-delay: .40s; }
body.uiFx #b1               { animation-name: mnRise;  animation-delay: .46s; }
body.uiFx #b0               { animation-name: mnRise;  animation-delay: .52s; }
body.uiFx #menuAppearance   { animation-name: mnRise;  animation-delay: .58s; }
@media (prefers-reduced-motion: reduce) {
  html body.uiFx #title { animation: none !important;   text-transform: uppercase;
}
  body.uiFx #credits, body.uiFx #featured, body.uiFx #videoBox,
  body.uiFx #serverSelectTitle, body.uiFx #serverBrowser, body.uiFx #menuAppearance,
  body.uiFx #b0, body.uiFx #b1, body.uiFx #b2 { animation: none; }
}

/* ---- MENU BUTTON HOVER (zenitsv 2026-08-16: "agregales un hover mas llamativo, se ven un poco toscos").
   A lift, a scale and a coloured glow instead of a flat brightness bump, and a press that actually presses.
   Gated behind body.uiFx — the same account list as everything else in this batch; `armMenu()` puts the class
   on once the login response lands, because the gate is not decided when the menu is built.
   Each button keeps its OWN accent in the glow rather than everything turning teal.
   #editorReopen is centred with translateX(-50%): its hover carries that, or it jumps half its width left. */
body.uiFx #playButton,
body.uiFx #b0, body.uiFx #b1, body.uiFx #b2, body.uiFx #panel > button:not([id]),
body.uiFx #starShop, body.uiFx #achBtn, body.uiFx #editorReopen, body.uiFx #clanBtn, body.uiFx #dailyBtn {
  transition: transform .16s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow .16s cubic-bezier(0.22, 1, 0.36, 1),
              filter .16s ease,
              border-color .16s ease,
              background-color .2s ease !important;
}
body.uiFx #playButton:hover {
  transform: translateY(-2px) scale(1.035);
  box-shadow: 0 10px 26px rgba(56, 183, 100, .45), 0 0 0 1px rgba(120, 255, 170, .35);
}
body.uiFx #b0:hover, body.uiFx #b1:hover, body.uiFx #b2:hover,
body.uiFx #panel > button:not([id]):hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(46, 230, 198, .4) !important;
}
body.uiFx #b0:hover {
  box-shadow: 0 10px 24px rgba(88, 101, 242, .5), 0 0 0 1px rgba(150, 160, 255, .55) !important;
}
body.uiFx #starShop:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(255, 213, 74, .95);
  box-shadow: 0 10px 26px rgba(255, 213, 74, .3), 0 0 0 1px rgba(255, 213, 74, .45);
}
body.uiFx #achBtn:hover, body.uiFx #clanBtn:hover, body.uiFx #dailyBtn:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(120, 180, 255, .95);
  box-shadow: 0 10px 26px rgba(120, 180, 255, .3), 0 0 0 1px rgba(120, 180, 255, .45);
}
body.uiFx #editorReopen:hover {
  transform: translateX(-50%) translateY(-2px) scale(1.03);
  box-shadow: 0 10px 26px rgba(46, 230, 198, .4);
}
/* The press has to land AFTER the hover rules or it never wins — same specificity, later rule. */
body.uiFx #playButton:active,
body.uiFx #b0:active, body.uiFx #b1:active, body.uiFx #b2:active,
body.uiFx #panel > button:not([id]):active,
body.uiFx #starShop:active, body.uiFx #achBtn:active, body.uiFx #clanBtn:active, body.uiFx #dailyBtn:active {
  transform: translateY(0) scale(0.985);
  transition-duration: .06s;
}
body.uiFx #editorReopen:active {
  transform: translateX(-50%) scale(0.985);
  transition-duration: .06s;
}

@media (prefers-reduced-motion: reduce) {
  body.uiFx #playButton:hover, body.uiFx #b0:hover, body.uiFx #b1:hover, body.uiFx #b2:hover,
  body.uiFx #panel > button:not([id]):hover, body.uiFx #starShop:hover, body.uiFx #achBtn:hover,
  body.uiFx #editorReopen:hover, body.uiFx #clanBtn:hover, body.uiFx #dailyBtn:hover { transform: none; }
  body.uiFx #editorReopen:hover { transform: translateX(-50%); }
  .sbRow.sbInR, .sbRow.sbInL, .sbEmpty.sbInR, .sbEmpty.sbInL,
  #accountFull.acFx, #accountFull.acFx #accountContent > * { animation: none; }
}
#sbList {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(140,170,230,.16);
  border-radius: 12px;
  padding: 6px;
  max-height: 156px;
  overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.sbRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s;
  pointer-events: all;
}
.sbRow + .sbRow { margin-top: 2px; }
.sbRow:hover { background: rgba(46,230,198,.08); }
.sbRow.sbSel {
  background: rgba(46,230,198,.14);
  box-shadow: inset 0 0 0 1px rgba(46,230,198,.45);
}
.sbName {
  color: #eef4ff;
  font-size: 16px;
  font-weight: 700;
}
.sbCount {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #2ee6c6;
  font-size: 14px;
  font-weight: 800;
}
.sbDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ee6c6;
  box-shadow: 0 0 8px #2ee6c6;
}
.sbEmpty {
  text-align: center;
  color: #6f83ab;
  font-style: italic;
  font-size: 14px;
  padding: 22px 0;
}
.lbClickable { cursor: pointer; }
.lbClickable:hover { background: rgba(46,230,198,.1); }

#starBalance {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 50;
  background: rgba(18,26,46,.9);
  border: 1px solid rgba(255,213,74,.4);
  border-radius: 10px;
  padding: 8px 15px;
  font-size: 18px;
  font-weight: 800;
  color: #eef4ff;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  pointer-events: none;
}
#starBalance .sbStar { color: #ffd54a; }
.sbSub { color: #8ea3c9; font-size: 12px; font-weight: 600; }

/* "Logged in as {name}" indicator — shown centered where the Log in / Create Account buttons were */
#loggedInAs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 202px));
  z-index: 50;
  background: rgba(18,26,46,.9);
  border: 1px solid rgba(46,230,198,.4);
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 18px;
  font-weight: 700;
  color: #eef4ff;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  pointer-events: none;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
#loggedInAs .liaLabel { color: #8ea3c9; font-weight: 600; }
#loggedInAs #loggedInAsName { color: #2ee6c6; font-weight: 800; }

/* floating "reopen tank editor" toggle — only shown inside the editor dim when the editor is closed */
#editorReopen {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: linear-gradient(135deg,#2ee6c6,#37f0a6);
  color: #04121a;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
#editorReopen:hover { filter: brightness(1.08); }
.sbBuy {
  margin-top: 6px;
  text-align: center;
  padding: 11px;
  border-radius: 9px;
  background: linear-gradient(135deg,#2ee6c6,#37f0a6);
  color: #04121a;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  pointer-events: all;
  transition: filter .12s;
}
.sbBuy:hover { filter: brightness(1.08); }
.sbBuyDisabled {
  background: rgba(255,255,255,.06);
  color: #6f83ab;
  cursor: default;
}
.sbBuyDisabled:hover { filter: none; }
/* ---- SANDBOX TAB (n00bi 2026-09-29): permanent sandbox dims as one row of tiles, then player sandboxes, then
   the Create button. Tiles keep #sbList inside its old max-height so the menu above it doesn't move. The tiles
   are .sbRow too, so every skin's row styling reaches them. */
#sbList.sbSbx .sbTiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
/* FIT (n00bi 2026-09-29 "this design in all themes are bugged"). Tiles + header + one player sandbox + the button
   came to ~175px in a 156px list, so it scrolled and the tiles slid under the tabs. Now the tiles are one line and
   every row has a px line-height (skin fonts can't grow them), so tiles + header + TWO player sandboxes + the
   button fit in 142px of content with 6px spare; a third scrolls. Sizes only, so every skin keeps its look. */
#sbList.sbSbx .sbTiles .sbRow { margin-top: 0; flex-wrap: wrap; justify-content: center; column-gap: 8px; row-gap: 0; padding: 5px 6px; text-align: center; }
#sbList.sbSbx .sbTile .sbName { font-size: 13px; line-height: 17px; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sbList.sbSbx .sbTile .sbCount { font-size: 12px; line-height: 17px; }
#sbList.sbSbx > .sbRow { padding: 5px 12px; }
#sbList.sbSbx > .sbRow .sbName { font-size: 14px; line-height: 18px; }
#sbList.sbSbx > .sbRow .sbName .sbSub, #sbList.sbSbx > .sbRow .sbCount { line-height: 1; }
#sbList.sbSbx .sbHead { padding: 4px 8px 1px; line-height: 12px; }
#sbList.sbSbx .sbBuy { margin-top: 4px; padding: 6px; font-size: 14px; line-height: 18px; }
#sbList.sbSbx .sbBuySub { line-height: 1; }
#sbList.sbSbx .sbRowInd { transition: transform .26s cubic-bezier(0.65, 0, 0.25, 1), height .26s cubic-bezier(0.65, 0, 0.25, 1), width .26s cubic-bezier(0.65, 0, 0.25, 1); }
.sbHead { padding: 8px 8px 2px; text-transform: uppercase; letter-spacing: .06em; }
.sbHead .sbSub { font-size: 11px; font-weight: 800; }
.sbBuySub { margin-left: 8px; font-size: 12px; font-weight: 700; opacity: .7; }
.sbxLimits { margin: -2px 0 12px; }
.sbxHint { display: block; margin: -4px 0 12px; font-size: 12px; line-height: 1.35; }
.sbxPerms .bpTier { padding: 9px 4px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { #sbList.sbSbx .sbRowInd { transition: none; } }
.bpTiers { display: flex; gap: 10px; margin: 6px 0 16px; }
.bpTiersCards { align-items: stretch; }
.bpTierCard { padding: 14px 10px 12px; gap: 5px; }
.bpTierName { font-size: 16px; font-weight: 900; letter-spacing: .5px; text-align: center; width: 100%; }
.bpTierRate { color: #8ea3c9; font-size: 12px; font-weight: 700; text-align: center; width: 100%; margin-bottom: 3px; }
.bpTierSel .bpTierRate { color: #2ee6c6; }
.bpTierFeats { list-style: none; margin: 0; padding: 0; text-align: left; width: 100%; }
.bpTierFeats li { font-size: 11.5px; font-weight: 600; color: #c6d3ec; padding: 3px 1px; border-top: 1px solid rgba(140,170,230,.10); line-height: 1.3; }
.bpTierFeats li:first-child { border-top: none; }
.bpTierFeats em { color: #8ea3c9; font-style: normal; font-size: 10.5px; }
.bpTierFeats .bpFeatYes { color: #3ad29a; }
.bpTierFeats .bpFeatNo { color: #d98a8a; }
.bpCfg { margin: 4px 0 12px; }
.bpCfgTitle { color: #c6d3ec; font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.bpCfgRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.bpCfgRow label { color: #8ea3c9; font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.bpSel, .bpCfgIn { flex: 1 1 auto; max-width: 190px; padding: 6px 8px; border-radius: 7px;
  border: 1px solid rgba(140,170,230,.25); background: rgba(255,255,255,.05); color: #eef4ff;
  font-size: 14px; font-family: inherit; }
.bpSel option { background: #0b1322; color: #eef4ff; }
.bpTier {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 6px;
  border-radius: 10px;
  border: 1px solid rgba(140,170,230,.25);
  background: rgba(255,255,255,.04);
  color: #eef4ff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.bpTier span { color: #8ea3c9; font-size: 12px; font-weight: 600; }
.bpTier:hover { border-color: rgba(46,230,198,.5); }
.bpTierSel {
  border-color: rgba(46,230,198,.7);
  background: rgba(46,230,198,.14);
}
.bpTierSel span { color: #2ee6c6; }
.bpDur { color: #c6d3ec; font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.bpDur .authInput { width: 90px; display: inline-block; padding: 6px 8px; font-size: 16px; }
.bpRange { color: #6f83ab; font-size: 13px; }
.bpCost { color: #2ee6c6; font-size: 15px; font-weight: 800; margin-bottom: 6px; }

/* ---- Buy-private: visibility row + password reveal ------------------------------------------------
   LAYOUT FIX, EVERYONE (2026-08-18). .bpVis and .bpPw had no CSS at all. .bpTier is
   `flex: 1; flex-direction: column`, but with no display:flex on the PARENT the two buttons fell back to
   block layout and stacked vertically at their content width — the narrow Public-over-Private pair in
   errorx002's screenshot. This is a missing rule, not a style preference, so it is not account-gated:
   gating it would leave the panel visibly broken for everyone else. */
.bpVis { display: flex; gap: 10px; margin-bottom: 10px; }
.bpVis .bpTier { flex-direction: row; justify-content: center; padding: 10px 6px; }
.bpPw { margin-bottom: 10px; }

/* ---- Buy-private: animations (account-gated by body.bpFx) -----------------------------------------
   Everything below only applies when the buy panel is opened by an account on the animation gate, so the
   panel is byte-for-byte unchanged for everyone else. Scoped to #buyPickerOverlay so no other .authCard
   (login, password prompt) picks the entrance up by accident.
   Safe to animate 'transform' here: .authCard is centred by the overlay's flexbox, NOT by a base
   translate — so these keyframes have nothing to restate. That is the exact opposite of .upgradeBox and
   #accountFull, where a bare transform in a keyframe wipes the centring translate and shifts the element
   half its own size. Check which kind you have before copying this. */
body.bpFx #buyPickerOverlay { animation: bpOvIn .16s ease-out both; }
body.bpFx #buyPickerOverlay .authCard { animation: bpCardIn .30s cubic-bezier(.2,.9,.25,1) both; }
body.bpFx #buyPickerOverlay .bpTierCard { animation: bpTierIn .34s cubic-bezier(.2,.9,.25,1) both;
  animation-delay: var(--bpD, 0s); }
body.bpFx #buyPickerOverlay .bpTier {
  transition: border-color .12s, background .12s, transform .14s cubic-bezier(.2,.9,.25,1); }
body.bpFx #buyPickerOverlay .bpTier:hover { transform: translateY(-2px); }
body.bpFx #buyPickerOverlay .bpTier:active { transform: translateY(0); }
/* The password row slides instead of snapping. max-height rather than height because the row's real
   height is content-driven; 72px clears the input plus its margin at every font size we ship. */
body.bpFx #buyPickerOverlay .bpPw {
  max-height: 0; opacity: 0; overflow: hidden; margin-bottom: 0;
  transition: max-height .30s cubic-bezier(.15,.85,.25,1), opacity .2s ease,
              margin-bottom .30s cubic-bezier(.15,.85,.25,1); }
body.bpFx #buyPickerOverlay .bpPw.bpPwOpen { max-height: 72px; opacity: 1; margin-bottom: 10px; }
/* Price tint while it counts: warm when it goes up, green when it comes down. Removed when the count ends. */
body.bpFx #buyPickerOverlay .bpCost { transition: color .2s ease; }
body.bpFx #buyPickerOverlay .bpCost.bpCostUp { color: #ffb648; }
body.bpFx #buyPickerOverlay .bpCost.bpCostDown { color: #3ad29a; }
@keyframes bpOvIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes bpCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.965) }
  to   { opacity: 1; transform: translateY(0) scale(1) } }
@keyframes bpTierIn {
  from { opacity: 0; transform: translateY(12px) }
  to   { opacity: 1; transform: translateY(0) } }
@media (prefers-reduced-motion: reduce) {
  body.bpFx #buyPickerOverlay,
  body.bpFx #buyPickerOverlay .authCard,
  body.bpFx #buyPickerOverlay .bpTierCard { animation: none; }
  body.bpFx #buyPickerOverlay .bpPw { transition: none; }
}

/* ---- Buy-private, second pass (2026-08-18) — still entirely behind body.bpFx ----------------------- */
body.bpFx #buyPickerOverlay .authLabel { text-align: center; }
/* Selection feedback on the tier cards. Separate class from the entrance so the two never fight: the
   entrance uses 'both' fill and a per-card delay, and this resets the delay to 0 because 'animation' is
   one property — inheriting a 170ms delay would make the click feel broken. */
body.bpFx #buyPickerOverlay .bpTierCard.bpTierPop {
  animation: bpTierPop .34s cubic-bezier(.2,.9,.25,1) both; animation-delay: 0s; }
@keyframes bpTierPop {
  0%   { transform: scale(.975) }
  55%  { transform: scale(1.03) }
  100% { transform: scale(1) } }
body.bpFx #buyPickerOverlay .bpTierFeats li { transition: color .18s ease, border-color .18s ease; }
/* Duration + config get a panel of their own rather than floating on the card background. */
body.bpFx #buyPickerOverlay .bpDur {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(140,170,230,.16); }
body.bpFx #buyPickerOverlay .bpDur .authInput {
  transition: border-color .15s ease, box-shadow .15s ease; }
body.bpFx #buyPickerOverlay .bpDur .authInput:focus { box-shadow: 0 0 0 3px rgba(46,230,198,.14); }
body.bpFx #buyPickerOverlay .bpCfg {
  padding: 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(140,170,230,.16); }
body.bpFx #buyPickerOverlay .bpCfgRow {
  padding: 3px 6px; margin-left: -6px; margin-right: -6px;
  border-radius: 7px; transition: background .15s ease; }
body.bpFx #buyPickerOverlay .bpCfgRow:hover { background: rgba(255,255,255,.04); }
body.bpFx #buyPickerOverlay .bpSel,
body.bpFx #buyPickerOverlay .bpCfgIn { transition: border-color .15s ease, box-shadow .15s ease; }
body.bpFx #buyPickerOverlay .bpSel:focus,
body.bpFx #buyPickerOverlay .bpCfgIn:focus {
  border-color: rgba(46,230,198,.5); box-shadow: 0 0 0 3px rgba(46,230,198,.12); outline: none; }
/* The price sits in its own chip. tabular-nums is the load-bearing bit: without it the digits have
   different widths and the whole line jitters left and right while the number counts. */
body.bpFx #buyPickerOverlay .bpCost {
  display: inline-block; padding: 8px 12px; border-radius: 9px;
  background: rgba(46,230,198,.07); border: 1px solid rgba(46,230,198,.18);
  font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  body.bpFx #buyPickerOverlay .bpTierCard.bpTierPop { animation: none; }
}

/* Star Shop + Achievements (zy3nith 2026-07-25) — stacked under the star balance, top-right of the menu.
   #starBalance is top:18px/right:22px and ~37px tall, so the shop sits beside it and the achievements
   button below it. Kept in style.css AND script2.js's inline <style> in sync (the inline one wins). */
#starShop {
  position: absolute;
  top: 18px;
  right: 140px;
  z-index: 50;
  background: rgba(18,26,46,.9);
  border: 1px solid rgba(255,213,74,.4);
  border-radius: 10px;
  padding: 8px 15px;
  font-size: 18px;
  font-weight: 800;
  color: #eef4ff;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  cursor: pointer;
  user-select: none;
}
#starShop:hover { border-color: rgba(255,213,74,.9); }
#starShopToast {
  position: absolute;
  top: 62px;
  right: 140px;
  z-index: 60;
  background: rgba(18,26,46,.95);
  border: 1px solid rgba(255,213,74,.5);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 700;
  color: #ffd54a;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
#achBtn {
  position: absolute;
  top: 62px;
  right: 22px;
  z-index: 50;
  background: rgba(18,26,46,.9);
  border: 1px solid rgba(120,180,255,.4);
  border-radius: 10px;
  padding: 8px 15px;
  font-size: 16px;
  font-weight: 800;
  color: #eef4ff;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  cursor: pointer;
  user-select: none;
}
#achBtn:hover, #clanBtn:hover, #dailyBtn:hover { border-color: rgba(120,180,255,.9); }
#achBtnCount { opacity: .7; font-weight: 700; }
#achPanel {
  display: none;
  position: absolute;
  top: 106px;
  right: 22px;
  width: 420px;
  max-width: 92vw;
  max-height: 60vh;
  z-index: 60;
  background: rgba(14,20,36,.97);
  border: 1px solid rgba(120,180,255,.35);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  overflow: hidden;
}
#achPanelHead {
  padding: 12px 16px;
  font-size: 19px;
  font-weight: 900;
  color: #eef4ff;
  border-bottom: 1px solid rgba(120,180,255,.25);
}
#achPanelCount { opacity: .7; font-size: .8em; font-weight: 700; }
#achPanelClose { float: right; cursor: pointer; opacity: .7; }
#achPanelClose:hover { opacity: 1; }
#achPanelList { overflow-y: auto; max-height: calc(60vh - 50px); padding: 6px 0; }
.achRow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 16px; opacity: .45; }
.achRow.achDone { opacity: 1; }
.achIcon { flex: 0 0 auto; font-size: 17px; width: 22px; text-align: center; }
.achName { font-size: 16px; font-weight: 800; color: #eef4ff; }
.achRow.achDone .achName { color: #ffd54a; }
.achDesc { font-size: 13px; font-weight: 600; color: #b9c6de; line-height: 1.3; }

/* Radiant-name toggle + profile hint (zy3nith 2026-07-25) — the toggle glows green when on, red when off. */
#liaHint { font-size: 12px; font-weight: 700; opacity: .6; margin-top: 2px; }







/* Star Shop panel + name-colour selector (zy3nith 2026-07-25) */
#shopPanel {
  display: none; position: absolute; top: 62px; right: 140px; width: 320px; max-width: 92vw;
  max-height: 60vh; z-index: 60; background: rgba(14,20,36,.97);
  border: 1px solid rgba(255,213,74,.35); border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,.55); overflow: hidden;
}
#shopHead { padding: 11px 14px; font-size: 18px; font-weight: 900; color: #ffd54a; border-bottom: 1px solid rgba(255,213,74,.25); }
#shopClose { float: right; cursor: pointer; opacity: .7; color: #eef4ff; }
#shopClose:hover { opacity: 1; }
#shopNote { padding: 8px 14px 4px; font-size: 12px; font-weight: 600; color: #b9c6de; }
#shopList { overflow-y: auto; max-height: calc(60vh - 92px); padding: 4px 0 8px; }
.shopRow { display: flex; align-items: center; gap: 9px; padding: 6px 14px; }
.shopSwatch { width: 20px; height: 20px; border-radius: 5px; border: 1px solid rgba(255,255,255,.25); flex: 0 0 auto; }
.shopName { flex: 1 1 auto; font-size: 14px; font-weight: 700; color: #eef4ff; text-transform: capitalize; }
.shopOwned { font-size: 12px; font-weight: 700; color: #46e07a; }
.shopBuy {
  font-size: 12px; font-weight: 800; color: #ffd54a; background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,213,74,.45); border-radius: 7px; padding: 4px 9px; cursor: pointer;
}
.shopBuy:hover { border-color: #ffd54a; }

#ncCustomApply { margin-left: 8px; font-size: 13px; font-weight: 800; padding: 5px 12px; border-radius: 7px; cursor: pointer; }

/* Both top-right panels share one slot and are mutually exclusive, so they can never overlap
   (zy3nith 2026-07-25). Previously the shop sat at right:140px and the achievements panel at right:22px
   with a 420px width — the two rectangles intersected whenever both were open. */
#shopPanel { top: 106px; right: 22px; width: 420px; }

/* MOBILE (zy3nith 2026-07-25): these controls were unusable on a phone — they sat below the 45-row
   achievement list (now moved above it) and were desktop-sized. Bigger tap targets, and the panel scrolls
   with momentum so you can actually reach the rest. 44px is the usual minimum comfortable touch target. */



body.mobile #accountContent { -webkit-overflow-scrolling: touch; }
body.mobile .achRow { padding: 12px 16px; }
body.mobile #achBtn, body.mobile #starShop, body.mobile #clanBtn, body.mobile #dailyBtn { min-height: 44px; font-size: 18px; }

/* Standalone "View my profile" button (zy3nith 2026-07-25) — the hint inside the logged-in indicator was not
   tappable on mobile, so this is its own element with its own touch target. */
#profileBtn {
  display: none; position: absolute; z-index: 50;
  left: 50%; transform: translateX(-50%);
  top: calc(50% + 262px);
  padding: 10px 22px; font-size: 17px; font-weight: 800;
  color: #eef4ff; background: rgba(18,26,46,.92);
  border: 2px solid rgba(120,180,255,.45); border-radius: 9px;
  cursor: pointer; user-select: none; white-space: nowrap;
}
#profileBtn:hover { border-color: rgba(120,180,255,.95); }
body.mobile #profileBtn { min-height: 52px; font-size: 21px; padding: 14px 26px; }

/* Name-colour swatch picker (zy3nith 2026-07-25) — replaces the dropdown; pick by looking, not by reading. */
#ncGrid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ncCell {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25);
  font-size: 15px; font-weight: 800; color: #eef4ff; user-select: none;
}
.ncCell:hover { border-color: rgba(255,255,255,.5); }
.ncCell.ncOn { border-color: #46e07a; box-shadow: 0 0 12px rgba(70,224,122,.55); }
.ncDot { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.45); flex: 0 0 auto; }
.ncLbl { white-space: nowrap; }
#ncCustomRow { margin-top: 12px; font-size: 15px; font-weight: 700; }
#ncCustomRow #ncCustom { vertical-align: middle; margin: 0 8px; }
body.mobile .ncCell { padding: 14px 18px; font-size: 20px; min-height: 52px; }
body.mobile .ncDot { width: 28px; height: 28px; }
body.mobile #ncCustomRow #ncCustom { width: 64px; height: 44px; }

/* ============================================================================
   INTERFACE STYLE — a second, independent axis from the Theme swatches.
   Theme picks the COLOUR (--th-*), Style picks the MATERIAL. All 7 palettes work with all 3 styles.

   ACCOUNT-GATED to zenitsv's game account (zodus 2026-08-16: "делай всё что говорит zenitsv касательно
   визуализации … добавляй это пока только на его аккаунт"). The gate is in script2.js (SKIN_ACCOUNTS);
   this file only supplies the looks. "Modern" adds NO class at all, so the default is byte-for-byte what
   shipped and none of this can regress it — which matters, because everything here is appended after the
   modern restyle block and has to fight its !important rules.

   - Modern  (no class)   the neon/cyberpunk look the game ships with.
   - Classic (.skin-classic)  plain colours, no glow, no gradients. "menos excesivos para la GUI".
   - Elegant (.skin-elegant)  polished quartz: squared, whitish, a real specular sheen, light type.
   ============================================================================ */

/* ---------------------------------------------------------------- shared picker */
.optStyleRow .optStyles, .optStyles { display: flex; flex-wrap: wrap; gap: 8px; pointer-events: all; }
.optStyle {
  padding: 6px 16px; border-radius: 999px;
  border: 1px solid var(--th-border); background: var(--th-track); color: var(--th-text);
  font-size: 13px; font-weight: 700; cursor: pointer; user-select: none; white-space: nowrap;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.optStyle:hover  { border-color: var(--th-accentc); }
.optStyle.active { border-color: var(--th-accentc); box-shadow: 0 0 0 1px var(--th-accentc); }
/* ---- appearance cluster, BOTTOM-RIGHT --------------------------------------------------------------
   Was two centred rows at top:118 / top:158, directly under the logo and above the Gamemode selector
   (zenitsv 2026-08-16: *"recuerdas que el menu principal tiene arriba los modos? trata de ponerlos en
   otro lugar … que se vea mejor ese selector de estilo"*). Eight pills stacked across the top of the menu
   crowded the logo and read as the most important thing on the screen, which they are not — Gamemode and
   Play are. Moved into one small card in the bottom-right, where the corner is free: #discordButton takes
   bottom-left, and #statUpgradesRight is in-game only, never on the menu.
   z-index 3 matches #b0 — the menu buttons — so the card is not swallowed by #overlay2.
   ⚠️ Still absolutely positioned, and deliberately NOT `position: relative` on any ancestor — everything on
   this menu is absolute and a relative here drops the whole stack (the position trap in the elegant block).
   Both rows stay authored `display:none`; __refreshSkin reveals them per account, so this layout only ever
   appears for an allowed account and no other player's menu moves.

   ⚠️ The wrapper is what stacks them. They were anchored separately at bottom:84px and bottom:20px, which
   baked in an assumed height for the style card — and as soon as a translated label ("ELEGANTE OSCURO") was
   too wide to pair up, the pills reflowed one-per-row, the card grew and swallowed the language card below
   it. Anchor the WRAPPER and let flex+gap space the children; never give the two cards their own offsets. */
#menuAppearance {
  position: absolute; right: 18px; bottom: 20px; left: auto; transform: none;
  z-index: 3; pointer-events: all;
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  width: 214px; box-sizing: border-box;
}
#menuStyleRow, #menuLangRow {
  box-sizing: border-box;
  padding: 9px 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--th-border);
  background: var(--th-track);
}
/* Pills pair up when they fit and go full width when they don't — `88px` is a basis, not a floor, so a long
   translated label wraps to its own row instead of overflowing the card. */
#menuStyleRow .optStyles, #menuLangRow .optStyles { justify-content: center; gap: 6px; }
#menuStyleRow .optStyle, #menuLangRow .optStyle { flex: 1 1 88px; min-width: 0; text-align: center; padding: 6px 8px; }
/* The label is what turns four loose pills into a control. Generated in script2.js so the markup stays as
   it was, and read from data-i18n like every other menu string. */
.menuPickLbl {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--th-muted, #8ea3c9); margin: 0 0 7px 2px; text-shadow: none; pointer-events: none;
}
/* The card would sit on top of the mobile joysticks and eats real estate on a narrow screen, where the menu
   is already tight. Fall back to the old centred stack there. */
@media (max-width: 700px) {
  #menuAppearance {
    right: auto; left: 50%; transform: translateX(-50%);
    top: 118px; bottom: auto; width: auto; gap: 6px;
  }
  #menuStyleRow, #menuLangRow { background: none; border: none; padding: 0; }
  .menuPickLbl { display: none; }
}

/* ---- language length budgets --------------------------------------------------------------------------
   #leaderboard is a hard 244px wide at right:15px. "CLASIFICACIÓN" is 13 characters where "LEADERBOARD" is
   11, so at the stock 35px it measures roughly 273px and runs off the screen edge — the same overflow the
   elegant title hit twice. Any language added to I18N needs its longest HUD word checked against this panel,
   not just translated. */
body.lang-es #leaderboardTitle { font-size: 22px !important; letter-spacing: normal !important; }
body.skin-elegant.lang-es #leaderboardTitle {
  font-size: 22px !important; letter-spacing: .08em !important;
}
/* The stat bars used to be shrunk to 15px here for Spanish. zenitsv 2026-08-16: *"el font esta algo
   pequeño y se ve como raro en todos los modos visuales"* — and he was right, shrinking the type was the
   wrong lever. English already fits 19 characters at 20px ("Health Regeneration"), so the fix is to keep
   every Spanish stat label at or under that width instead: "Velocidad de Regeneración" (25) became
   "Regeneración" (12), "Penetración de Proyectiles" (26) became "Penetración" (11), and so on.
   RULE for any future language: budget the TRANSLATION to ~20 characters and leave the type alone. Only
   shrink when a word genuinely cannot be shortened without losing meaning. */

/* ================================================================ CLASSIC */
/* Not a recolour of the neon theme — the point is to REMOVE the excess: no gradients, no glow, no
   saturated accent, one flat panel colour and a hairline border. */
body.skin-classic {
  --cl-face:  rgba(24,28,36,.92);
  --cl-edge:  rgba(255,255,255,.14);
  --cl-text:  #dfe3ea;
  --cl-muted: #97a0ae;
}
body.skin-classic.theme-light { --cl-face: rgba(246,247,250,.96); --cl-edge: rgba(20,26,38,.18); --cl-text: #1e2430; --cl-muted: #5c6675; }
/* The shape minigame lives on the #menuBg canvas UNDER #overlay2, which the modern block sets to
   transparent precisely so it shows through. Painting overlay2 opaque here buried it — zenitsv:
   "el juego ese si tiene que estar en los 3 modos, porque por alguna razon se pierde en los otros 2 (se tapa)".
   Leave overlay2 transparent and leave menuBg at full opacity in every skin; the shapes get their material
   from skinFx() in script2.js instead, and the ground colour from the menuBg gradient themes. */
body.skin-classic #overlay2 { background: transparent !important; }
body.skin-classic #title {
  color: var(--cl-text) !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}
body.skin-classic #serverSelect,
body.skin-classic #playMenu,
body.skin-classic #credits,
body.skin-classic #featured,
body.skin-classic #videoBox,
body.skin-classic #serverBrowser,
body.skin-classic #optionsCard {
  background: var(--cl-face) !important;
  background-image: none !important;
  box-shadow: 0 0 0 1px var(--cl-edge) !important;
  border: none !important;
  border-radius: 6px !important;
  backdrop-filter: none !important;
}
body.skin-classic #serverSelectSlide,
body.skin-classic #serverSelectLeft,
body.skin-classic #serverSelectRight,
body.skin-classic #creditsText,
body.skin-classic #channelName { color: var(--cl-text) !important; text-shadow: none !important; }
body.skin-classic #serverSelectLowerText,
body.skin-classic #serverSelectArrow { color: var(--cl-muted) !important; }
body.skin-classic .optToggle.on { background: #6b7a90 !important; }
body.skin-classic .lbBar,
body.skin-classic .lbTop1 .lbBar,
body.skin-classic .lbTop2 .lbBar,
body.skin-classic .lbTop3 .lbBar { background: #6b7a90 !important; box-shadow: none !important; }
body.skin-classic .clItem::before { background: var(--cl-muted) !important; box-shadow: none !important; }
body.skin-classic #playButton { background-color: #4a7f5c !important; }
body.skin-classic #playButton:hover { background-color: #5a9a6f !important; }

/* ================================================================ ELEGANT */
/* Quartz, not glass. Whitish milky face, a squared edge, a hairline lit rim, and a real specular sheen —
   the diagonal band of light you get off polished stone. One soft diffuse shadow, never a glow. */
/* Alphas were pulled back across the board 2026-08-16 — zenitsv: "arregla un poco el color de cuarzo
   blanco de la GUI, que esta D E M A S I A D O blanco". The veil, the rim, the sheen and the inner top
   highlight all stack on the same pixel, so each one being merely bright adds up to a flat white card. The
   fix is to lower all four together; lowering only --qz-face leaves the edge and sheen doing the whitening. */
/* ── BRIGHT QUARTZ (the default `skin-elegant`) ───────────────────────────────────────────────────────
   ⚠️ THE INK IS DARK HERE, and that is the whole point. The first build inherited the game's white type
   because every other skin sits on a dark ground — but the elegant FIELD is now pale stone, so white text on
   a translucent white panel is white-on-white. zenitsv screenshotted exactly that: the logo, LEADERBOARD,
   PLAY, the scores and the changelog body were all invisible ("arreglate los textos porque son demasiado
   blancos que no son visibles"). Bright quartz = dark ink, always.
   `--qz-tint` is the veil colour used for bars, toggles and inset highlights. It is a TOKEN and not a
   hardcoded white precisely so the dark variant below can flip it in one place. */
body.skin-elegant {
  --qz-face:   rgba(255,255,255,.46);
  --qz-face-2: rgba(255,255,255,.60);
  --qz-edge:   rgba(28,34,54,.20);
  --qz-hair:   rgba(28,34,54,.11);
  --qz-ink:    #232a3a;
  --qz-muted:  rgba(35,42,58,.62);
  --qz-tint:   rgba(70,80,110,.20);
  --qz-tint-2: rgba(70,80,110,.34);
  --qz-inset:  inset 0 1px 0 rgba(255,255,255,.75);
  --qz-shadow: 0 20px 60px rgba(40,54,90,.16), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(40,54,90,.06);
  --qz-sheen:  linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.34) 46%, rgba(255,255,255,.10) 54%, rgba(255,255,255,0) 70%);
  --qz-scrim:  rgba(238,236,243,.86);
  --qz-font:   'Jost','Optima','Candara','Gill Sans','Gill Sans MT','Segoe UI',system-ui,-apple-system,sans-serif;
  --qz-radius: 2px;
}
/* ── DARK QUARTZ ──────────────────────────────────────────────────────────────────────────────────────
   zenitsv 2026-08-16: "un cuarzo oscuro, para los que les gusta mas el dark mode". Smoked quartz — the
   SAME cut, a darker stone. It carries `skin-elegant` too (see SKIN_CLASSES in script2.js), so every rule
   below this token block applies unchanged and the two variants cannot drift apart.
   Must stay AFTER the block above: same specificity, so source order decides.
   Neutral grey on purpose, no blue — blue is the "cyberpunk" he asked us to get away from. */
body.skin-elegant.skin-elegantdark {
  --qz-face:   rgba(22,21,26,.72);
  --qz-face-2: rgba(34,33,39,.80);
  --qz-edge:   rgba(255,255,255,.17);
  --qz-hair:   rgba(255,255,255,.09);
  --qz-ink:    #e6e4ea;
  --qz-muted:  rgba(230,228,234,.58);
  --qz-tint:   rgba(255,255,255,.16);
  --qz-tint-2: rgba(255,255,255,.34);
  --qz-inset:  inset 0 1px 0 rgba(255,255,255,.14);
  --qz-shadow: 0 20px 60px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.30);
  --qz-sheen:  linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.09) 46%, rgba(255,255,255,.03) 54%, rgba(255,255,255,0) 70%);
  --qz-scrim:  rgba(16,15,19,.80);
}
/* A quiet stone ground so the white panels read as stone rather than as glass over neon. */
body.skin-elegant #overlay2 { background: transparent !important; }

/* The sheen. A pseudo-element rather than a second background so it can be angled independently of the
   face and clipped by the panel's own radius. pointer-events:none — it sits over the content. */
body.skin-elegant #optionsCard::before,
body.skin-elegant #serverSelect::before,
body.skin-elegant #playMenu::before,
body.skin-elegant #credits::before,
body.skin-elegant #featured::before,
body.skin-elegant #videoBox::before,
body.skin-elegant #serverBrowser::before,
body.skin-elegant #adblock::before,
body.skin-elegant #disconnect::before,
body.skin-elegant #contact::before {
  content: ''; position: absolute; inset: 0;
  background: var(--qz-sheen);
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
}
/* CARDS ONLY. #changelogFull, #accountFull and #tips are 1600px x calc(100% - 200px) FULL-SCREEN WRAPPERS
   (style.css:670), not cards — painting them with the quartz face turned the whole viewport into one white
   sheet, which is the "cubo blanco de tamaño colosal" zenitsv screenshotted. Their inner *Content elements
   get the treatment further down instead, and the wrapper stays a dark scrim so the page behind it is still
   dimmed. #respawnPanel is out for the same reason: it has no width/height of its own. */
body.skin-elegant #optionsCard,
body.skin-elegant #serverSelect,
body.skin-elegant #playMenu,
body.skin-elegant #credits,
body.skin-elegant #featured,
body.skin-elegant #videoBox,
body.skin-elegant #serverBrowser,
body.skin-elegant #contact,
body.skin-elegant #disconnect,
body.skin-elegant #adblock {
  background: var(--qz-face) !important;
  background-image: none !important;
  border: 1px solid var(--qz-edge) !important;
  border-radius: var(--qz-radius) !important;
  box-shadow: var(--qz-shadow) !important;
  backdrop-filter: blur(26px) saturate(1.05) brightness(1.06);
  font-family: var(--qz-font);
  color: var(--qz-ink);
}
/* The three big wrappers: scrim only, no quartz face. */
body.skin-elegant #changelogFull,
body.skin-elegant #accountFull,
body.skin-elegant #tips {
  background: var(--qz-scrim) !important;
  background-image: none !important;
  border: 1px solid var(--qz-hair) !important;
  border-radius: var(--qz-radius) !important;
  box-shadow: none !important;
  font-family: var(--qz-font);
  color: var(--qz-ink);
}

/* ---- type: light everywhere, including the places the modern block forced to 900 ---- */
body.skin-elegant #title {
  font-family: var(--qz-font) !important;
  font-weight: 200 !important;
  letter-spacing: .22em !important;
  color: var(--qz-ink) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  animation: none !important;
  text-transform: lowercase;
}
body.skin-elegant #serverSelectTitle,
body.skin-elegant #creditsTitle,
body.skin-elegant #creditsText,
body.skin-elegant #channelName,
body.skin-elegant #videoBoxTitle,
body.skin-elegant #optionsTitle,
body.skin-elegant #changelogTitle,
body.skin-elegant #tipsTitle,
body.skin-elegant #contactTitle,
body.skin-elegant #disconnectTitle,
body.skin-elegant #adblockTitle,
body.skin-elegant #respawnTitle,
body.skin-elegant #changelog {
  font-family: var(--qz-font) !important;
  font-weight: 300 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  color: var(--qz-ink) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
body.skin-elegant .bold, body.skin-elegant .text, body.skin-elegant .light,
body.skin-elegant #name, body.skin-elegant #playButton, body.skin-elegant .input,
body.skin-elegant .optLabel, body.skin-elegant .optSub, body.skin-elegant .sbTab,
body.skin-elegant .lbName, body.skin-elegant .lbScore, body.skin-elegant .lbRank,
body.skin-elegant .clDate, body.skin-elegant .clItem, body.skin-elegant .clSub,
body.skin-elegant #serverSelectSlide, body.skin-elegant #serverSelectLeft,
body.skin-elegant #serverSelectRight, body.skin-elegant #serverSelectLowerText,
body.skin-elegant #creditsContent, body.skin-elegant #creditsContent2,
body.skin-elegant #changelogContent, body.skin-elegant #tipsContent, body.skin-elegant #accountContent {
  font-family: var(--qz-font) !important;
  font-weight: 400 !important;
  letter-spacing: .03em;
}
body.skin-elegant #b0, body.skin-elegant #b1, body.skin-elegant #b2 { font-weight: 400 !important; }

/* ---- controls ---- */
/* NEVER set `position` here. #playButton, #b0/#b1/#b2 and the modal buttons are all position:absolute, and
   overriding that drops them out of their placement and stacks them at the top of the page — that is exactly
   what broke the whole interface on the first try (zenitsv's screenshot, 2026-08-16). Same rule for the
   panel block above: everything in this file that looks like a "card" is already absolutely positioned, so
   it is already a containing block for ::before and needs nothing. */
body.skin-elegant .input, body.skin-elegant #playButton, body.skin-elegant .optStyle, body.skin-elegant .sbTab {
  background: var(--qz-face-2) !important;
  background-image: none !important;
  border: 1px solid var(--qz-edge) !important;
  border-radius: var(--qz-radius) !important;
  box-shadow: var(--qz-inset), 0 6px 18px rgba(40,54,90,.16) !important;
  color: var(--qz-ink) !important;
  text-transform: uppercase;
  letter-spacing: .12em;
}
body.skin-elegant .input:hover, body.skin-elegant #playButton:hover, body.skin-elegant .optStyle:hover {
  background: var(--qz-tint) !important;
}
body.skin-elegant .optStyle { font-size: 11px; padding: 6px 18px; }
body.skin-elegant .optStyle.active { border-color: var(--qz-ink) !important; box-shadow: inset 0 0 0 1px var(--qz-tint-2) !important; }
body.skin-elegant .red { background: rgba(255,150,158,.26) !important; border-color: rgba(255,150,158,.5) !important; }
body.skin-elegant .link { color: var(--qz-ink) !important; text-decoration: none; border-bottom: 1px solid var(--qz-tint-2); }
body.skin-elegant .optSwatch { border-radius: 1px; box-shadow: none; border: 1px solid var(--qz-edge); }
body.skin-elegant .optSwatch:hover { transform: none; }
body.skin-elegant .optSwatch.active { border-color: var(--qz-ink); box-shadow: 0 0 0 1px var(--qz-ink); }
body.skin-elegant .optToggle { background: var(--qz-tint) !important; border-radius: var(--qz-radius); }
body.skin-elegant .optToggle.on { background: var(--qz-tint-2) !important; }
body.skin-elegant .optToggleKnob { border-radius: 1px; }

/* ---- leaderboard + changelog rows: hairlines, not neon bars ---- */
body.skin-elegant #creditsContent, body.skin-elegant #creditsContent2 {
  background: var(--qz-tint) !important;
  border: 1px solid var(--qz-hair) !important;
  border-radius: var(--qz-radius) !important;
  box-shadow: none !important;
  color: var(--qz-ink) !important;
}
body.skin-elegant .lbRow { border-bottom: 1px solid var(--qz-hair) !important; background: none !important; }
body.skin-elegant .lbBar,
body.skin-elegant .lbTop1 .lbBar,
body.skin-elegant .lbTop2 .lbBar,
body.skin-elegant .lbTop3 .lbBar { background: var(--qz-tint-2) !important; box-shadow: none !important; border-radius: 0 !important; }
body.skin-elegant .clItem::before { background: var(--qz-muted) !important; border-radius: 0 !important; box-shadow: none !important; width: 10px !important; height: 1px !important; }
body.skin-elegant .clCard { background: var(--qz-tint) !important; border-radius: var(--qz-radius) !important; box-shadow: none !important; }

/* Nothing here touches the canvas, the HUD, the minimap or the FOV — the in-game name and LEADERBOARD are
   DRAWN, not styled, so their weight is handled by canvasFont() in script2.js instead. */

/* ---- LEGIBILITY SWEEP, BRIGHT QUARTZ (zenitsv 2026-08-16, screenshot) ------------------------------
   The game's chrome is white-on-dark everywhere, because until now every skin sat on a dark ground. Bright
   quartz does not, so anything left at the inherited white went invisible. This is deliberately a BROAD
   sweep rather than another hand-listed selector set — the previous list missed the logo nav, the panel
   headers, the leaderboard columns, the save-code line and the respawn text, and hunting them one at a time
   is how the next one gets missed too. Colour and text-shadow only; no layout, no `position`. */
body.skin-elegant #leaderboardTitle,
body.skin-elegant #loggedInAsName,
body.skin-elegant #tankName, body.skin-elegant #tankLevelDisplay, body.skin-elegant #tankScoreDisplay,
body.skin-elegant #respawnText, body.skin-elegant #respawnStats, body.skin-elegant #respawnContinue,
body.skin-elegant #statDisplayLeft, body.skin-elegant #statDisplayRight,
body.skin-elegant #ncPrevName, body.skin-elegant #sbTabs,
body.skin-elegant .bold, body.skin-elegant .text, body.skin-elegant .light,
body.skin-elegant .lbName, body.skin-elegant .lbScore, body.skin-elegant .lbRank,
body.skin-elegant .clDate, body.skin-elegant .clItem, body.skin-elegant .clSub,
body.skin-elegant .optLabel, body.skin-elegant .sbTab,
body.skin-elegant #changelogContent, body.skin-elegant #tipsContent, body.skin-elegant #accountContent,
body.skin-elegant #creditsContent, body.skin-elegant #creditsContent2 {
  color: var(--qz-ink) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
body.skin-elegant .optSub, body.skin-elegant #serverSelectLowerText,
body.skin-elegant #serverSelectArrow, body.skin-elegant .clSub {
  color: var(--qz-muted) !important; text-shadow: none !important;
}
body.skin-elegant #name::placeholder, body.skin-elegant .input::placeholder { color: var(--qz-muted) !important; }
/* The dark variant keeps the original white type — it has a dark ground again, so the sweep above would be
   wrong there. --qz-ink already flips, so nothing extra is needed; this comment exists so nobody "fixes" it. */

/* ---- LEADERBOARD: squarer, quieter (zenitsv: "podria tener un toque mas cuadrado, elegante") -------- */
body.skin-elegant #leaderboardTitle {
  font-family: var(--qz-font) !important; font-weight: 200 !important;
  letter-spacing: .30em !important; text-transform: uppercase;
}
body.skin-elegant .lbRow { border-radius: 0 !important; }

/* ================================================== DEATH SCREEN ENTRANCE (zenitsv 2026-08-16) ======
   "en vez de esa aparicion tan tosca … animaciones chidas de entrada, pero que varian segun el modo usado,
   como normales mas llamativas, y para elegantes mas caras las animaciones y mas elegantes".
   The panel itself still slides in via the inline `top` the script sets — untouched, because that is what
   the alive/dead check reads (`respawnPanel.style.top !== '-100%'`, script2.js ~14325). Everything here
   animates the CHILDREN only, so nothing about that contract changes.
   The `.dsIn` class is re-added on every death after a forced reflow; without that the animation only ever
   plays once, since it is the same DOM each time. */
#respawnPanel.dsIn > * { animation: dsPop .5s cubic-bezier(.16,1.1,.3,1) both; }
#respawnPanel.dsIn #respawnTitle    { animation-delay: .00s; }
#respawnPanel.dsIn #killer          { animation-delay: .07s; }
#respawnPanel.dsIn #respawnText     { animation-delay: .12s; }
#respawnPanel.dsIn #respawnCanvas   { animation-delay: .10s; }
#respawnPanel.dsIn #respawnContinue { animation-delay: .22s; }
#respawnPanel.dsIn #respawnStats    { animation-delay: .18s; }
/* ---- DEATH QUOTE SWAP (acely777 2026-08-18) -------------------------------------------------------
   "the line who killed you will get entirely removed and the quote will slide in smoothly".
   The quote sits in the SAME box as #killer so the swap reads as one line replacing another rather than
   the panel reflowing: killer rises out, quote rises in behind it.
   HISTORY, because it explains the shape of what follows: #respawnPanel.dsIn > * runs dsPop with fill-mode
   `both`, which outranks plain rules AND inline styles, so the first attempt (inline opacity:0) was invisible.
   !important fixed the cascade but not the motion — see the note below on why transitions cannot work here. */
/* ⚠️ ANIMATIONS, NOT TRANSITIONS — and this is the whole reason the first two attempts jumped instead of
   sliding (acely777 2026-08-18: "its not moving smoothly, its the same").
   A transition does NOT run on a property that a CSS animation is currently applying. Both of these elements
   are children of #respawnPanel.dsIn, which runs dsPop with fill-mode `both`, so opacity and transform stay
   under that animation's control for as long as the death screen is up. Every transition written against
   those two properties was therefore dead on arrival: the !important rules still WON the cascade, which is
   why the swap happened at all, but it happened in one frame with nothing to animate it.
   Expressing the swap as animations of its own puts it on the same footing as dsPop, and a more specific
   `animation` declaration simply replaces it. That also lets the !important go: it was only ever there to
   out-rank the filling animation, and these rules now out-rank it on specificity instead.
   ⚠️ Keep #killer's keyframes free of any centring translate — it is positioned with left/width, not a
   translate, so translateY alone is safe here. That is NOT true of most elements in this file. */

/* The quote must sit out the panel's entrance pop, or dsPop fades it in with everything else 3s early.
   Declared BEFORE the .quoteIn rule below: they have identical specificity, so source order decides. */
#respawnPanel.dsIn > #deathQuote { animation: none; }
#deathQuote {
  font-size: 26px; position: absolute; top: 150px; left: 15%; width: 70%;
  text-align: center; font-weight: 600; font-style: italic; pointer-events: none;
  opacity: 0;
}
#respawnPanel.quoteIn #killer {
  animation: quoteOut .5s cubic-bezier(.16,1,.3,1) both;
  /* the depths skin sets an !important animation-delay on #killer for its slow entrance; without this the
     exit would inherit that .95s wait and look like nothing had happened. */
  animation-delay: 0s !important;
}
/* Starts as the outgoing line is still clearing, not after it: a clean gap reads as a stall, not a hand-off. */
#respawnPanel.quoteIn #deathQuote {
  animation: quoteIn .6s cubic-bezier(.16,1,.3,1) .42s both;
}
@keyframes quoteOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-16px); }
}
@keyframes quoteIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stock look: punchy — overshoot up from below. */
@keyframes dsPop {
  from { opacity: 0; transform: translateY(26px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
/* Elegant: no bounce and no scale. A slow rise with the letter-spacing opening out — the "expensive" read
   comes from length and restraint, not from more movement. */
body.skin-elegant #respawnPanel.dsIn > * { animation: dsRise 1.05s cubic-bezier(.19,1,.22,1) both; }
body.skin-elegant #respawnPanel.dsIn #respawnTitle {
  animation: dsRiseTitle 1.35s cubic-bezier(.19,1,.22,1) both;
}
body.skin-elegant #respawnPanel.dsIn #killer          { animation-delay: .16s; }
body.skin-elegant #respawnPanel.dsIn #respawnText     { animation-delay: .24s; }
body.skin-elegant #respawnPanel.dsIn #respawnCanvas   { animation-delay: .20s; }
body.skin-elegant #respawnPanel.dsIn #respawnStats    { animation-delay: .34s; }
body.skin-elegant #respawnPanel.dsIn #respawnContinue { animation-delay: .46s; }
@keyframes dsRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dsRiseTitle {
  from { opacity: 0; letter-spacing: .02em; transform: translateY(10px); }
  to   { opacity: 1; letter-spacing: .34em; transform: none; }
}
/* Classic: no flourish at all — a plain fade. That IS the classic look. */
body.skin-classic #respawnPanel.dsIn > * { animation: dsFade .28s linear both; animation-delay: 0s !important; }
@keyframes dsFade { from { opacity: 0; } to { opacity: 1; } }
/* Anyone who asked the OS not to animate gets none of it. */
@media (prefers-reduced-motion: reduce) {
  #respawnPanel.dsIn > * { animation: none !important; }
}
/* Elegant death panel: square, quiet, and readable on either stone. */
body.skin-elegant #respawnStats .rsRow {
  background: var(--qz-tint) !important;
  border: 1px solid var(--qz-hair) !important;
  border-radius: var(--qz-radius) !important;
  box-shadow: none !important;
}
body.skin-elegant #respawnStats .rsRow span { color: var(--qz-muted) !important; }
body.skin-elegant #respawnStats .rsRow b {
  color: var(--qz-ink) !important;
  font-variant-numeric: tabular-nums;   /* the count-up must not reflow the row on every frame */
}
body.skin-elegant #respawnContinue {
  background: var(--qz-face-2) !important; background-image: none !important;
  border: 1px solid var(--qz-edge) !important; border-radius: var(--qz-radius) !important;
  color: var(--qz-ink) !important; box-shadow: var(--qz-inset) !important;
  letter-spacing: .14em; text-transform: uppercase; font-family: var(--qz-font) !important; font-weight: 400 !important;
  /* The button is a HARDCODED 140px at 25px type (style.css:437). "CONTINUE" uppercased with .14em of
     tracking measures ~152px, so the word hung out of both ends ("el texto de continue del you died es un
     poco mas grande que el boton, se sale"). This is the same trap as the leaderboard title two blocks up:
     elegant tracking always has to be paid for, in font-size or in width. Here it is paid for in both —
     the fixed width becomes intrinsic so the label can never outgrow its own box again. */
  font-size: 17px !important;
  width: auto !important; min-width: 150px; padding: 0 30px;
  white-space: nowrap;
}

/* ================================================== ELEGANT, ROUND 3 (zenitsv 2026-08-16) ==========
   ⚠️ FIX FIRST: the death-screen entrance broke the layout. #respawnTitle, #respawnContinue, #respawnStats
   and #respawnCanvas are all centred with `transform: translate(-50%, ...)`. Animating `transform` REPLACED
   that centring, so every element jumped to its raw left:50% and the panel looked shoved to the right — the
   "pantalla de game over esta corrida raro" screenshot. `.upgradeBox` has the identical trap and there is
   already a comment about it at style.css:1233; this is the second time it has bitten.
   The fix is to carry the base transform through the keyframes via a custom property. Each element declares
   its own --dsC and the keyframes compose on top of it, so centring survives every frame. */
#respawnPanel.dsIn > * { --dsC: translate(0, 0); }
#respawnPanel.dsIn #respawnTitle,
#respawnPanel.dsIn #respawnContinue,
#respawnPanel.dsIn #respawnStats { --dsC: translate(-50%, 0); }
#respawnPanel.dsIn #respawnCanvas { --dsC: translate(-50%, -50%); }
@keyframes dsPop {
  from { opacity: 0; transform: var(--dsC) translateY(26px) scale(.94); }
  to   { opacity: 1; transform: var(--dsC); }
}
@keyframes dsRise {
  from { opacity: 0; transform: var(--dsC) translateY(14px); }
  to   { opacity: 1; transform: var(--dsC); }
}
@keyframes dsRiseTitle {
  from { opacity: 0; letter-spacing: .02em; transform: var(--dsC) translateY(10px); }
  to   { opacity: 1; letter-spacing: .34em; transform: var(--dsC); }
}

/* ---- death screen, elegant layout ---- */
/* Stats above the button instead of under it (they were reading as a footnote to Continue), and the tank
   preview lifted so the three blocks read top-to-bottom: what killed you, what you were, what you scored. */
body.skin-elegant #respawnStats { bottom: 132px; gap: 18px; }
body.skin-elegant #respawnContinue { top: auto !important; bottom: 56px; }
body.skin-elegant #respawnCanvas { top: 46% !important; }
body.skin-elegant #respawnTitle {
  color: var(--qz-ink) !important; font-weight: 200 !important;
  text-shadow: none !important; -webkit-text-stroke: 0 !important;
}
body.skin-elegant #killer { color: var(--qz-muted) !important; text-shadow: none !important; font-weight: 400 !important; }
body.skin-elegant #respawnStats .rsRow { padding: 13px 26px; min-width: 108px; }

/* ---- leaderboard ---- */
/* THE TITLE OVERFLOWED THE SCREEN. #leaderboard is a fixed 244px wide anchored to right:15px, and .30em of
   letter-spacing on an 11-character word at 35px pushed it well past that, so it ran off the edge
   ("el texto de leaderboard sobrepasa el tamaño de la pantalla"). Elegant type is wide by nature — any
   letter-spacing here has to be paid for with font-size. 22px + .16em fits 244px with room to spare. */
/* 22px was too far the other way ("el texto de leaderboard esta muy pequeño, se ve algo feo asi"). The panel
   is 244px, so the budget is real: at weight 200 the word measures roughly `size * 0.62 * 11 + size * track
   * 10`. 26px + .12em lands near 210px, which fills the panel without touching the edge. */
body.skin-elegant #leaderboardTitle {
  font-size: 26px !important; letter-spacing: .12em !important; font-weight: 200 !important;
  white-space: nowrap; overflow: hidden;
}

/* ⚠️ `.lbRow` / `.lbBar` / `.lbName` / `.lbScore` / `.lbRank` ARE THE MAIN-MENU LEADERBOARD.
   The IN-GAME one is built by a completely different code path (script2.js ~13297) out of
   `.leaderboardEntry` > `.leaderboardBar` > `.leaderboardSlide` + `.leaderboardText` + `.leaderboardCanvas`.
   Round 2 styled only the menu classes, which is exactly why zenitsv reported "el leaderboard no cambio
   nada" while the TITLE did change — `#leaderboardTitle` is shared, and it was the one selector that hit.
   Both sets are styled below. Check which DOM you are actually looking at before adding another rule here. */
body.skin-elegant .leaderboardEntry {
  border-radius: 0 !important;
  background: none !important;
  border-bottom: 1px solid var(--qz-hair) !important;
  font-weight: 400 !important;
  color: var(--qz-ink) !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
/* The bar is the score fill behind the name. Inset + rounded reads as a pill; square and flush reads as a
   measure. It keeps a fill so rank is still legible at a glance — that is information, not decoration. */
body.skin-elegant .leaderboardBar {
  border-radius: 0 !important;
  width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important;
}
body.skin-elegant .leaderboardSlide {
  border-radius: 0 !important;
  filter: saturate(.34) brightness(1.06);
  opacity: .55;
}
body.skin-elegant.skin-elegantdark .leaderboardSlide { filter: saturate(.34) brightness(.9); opacity: .5; }
body.skin-elegant .leaderboardText {
  font-family: var(--qz-font) !important;
  font-size: 13px !important; font-weight: 400 !important; letter-spacing: .03em;
  padding-top: 4px;
  color: var(--qz-ink) !important; text-shadow: none !important;
}

/* ---- main-menu leaderboard (different DOM, same visual language) ---- */
body.skin-elegant .lbRow {
  height: 24px !important; border-radius: 0 !important;
  border-bottom: 1px solid var(--qz-hair) !important; background: none !important;
}
body.skin-elegant .lbRow:hover { outline: none !important; background: var(--qz-tint) !important; }
body.skin-elegant .lbBar,
body.skin-elegant .lbTop1 .lbBar,
body.skin-elegant .lbTop2 .lbBar,
body.skin-elegant .lbTop3 .lbBar {
  background: var(--qz-tint) !important; border-radius: 0 !important; box-shadow: none !important;
}
/* Rank keeps the medal colours — that is information, not decoration, so it is the one thing left saturated. */
body.skin-elegant .lbRank { font-weight: 400 !important; font-size: 13px !important; text-shadow: none !important; }
body.skin-elegant .lbName {
  font-weight: 400 !important; font-size: 14px !important; letter-spacing: .04em;
  text-shadow: none !important; color: var(--qz-ink) !important;
}
body.skin-elegant .lbScore {
  font-weight: 400 !important; font-size: 13px !important; color: var(--qz-muted) !important;
  text-shadow: none !important; font-variant-numeric: tabular-nums;
}

/* ---- 1st / 2nd / 3rd: real metals, not neon (zenitsv: "haz que sean dorado, plateado y bronze como en
   los modos normales, PERO ... si se debe ver como dorado chido, plateado y bronze") ------------------
   The flatten-everything rule above plus the legibility sweep had between them erased the medal colours, so
   the top three were indistinguishable from row 14 — which is what made them look "tosco e igual".
   The stock metals are LIGHT (#ffd54a / #eef2f8 / #e39b57) because they were drawn for a dark panel. On the
   pale quartz ground a light gold is barely a tint and silver is literally invisible, so bright quartz gets
   the DARK side of each metal and only the dark variant keeps the bright side. Same colour, opposite end.
   Kept low-saturation on purpose: a metal reads as metal from its hue and its gradient, not from chroma. */
body.skin-elegant .lbTop1 .lbBar {
  background: linear-gradient(90deg, rgba(154,117,20,.26), rgba(154,117,20,.03)) !important;
}
body.skin-elegant .lbTop2 .lbBar {
  background: linear-gradient(90deg, rgba(108,119,137,.24), rgba(108,119,137,.03)) !important;
}
body.skin-elegant .lbTop3 .lbBar {
  background: linear-gradient(90deg, rgba(138,90,43,.24), rgba(138,90,43,.03)) !important;
}
body.skin-elegant .lbTop1 .lbRank { color: #8a6710 !important; }
body.skin-elegant .lbTop2 .lbRank { color: #5d6779 !important; }
body.skin-elegant .lbTop3 .lbRank { color: #7d4f24 !important; }
/* The rank number is the only saturated thing left in the row, so it carries the medal on its own. A hairline
   left edge in the same metal gives the row an anchor without adding another coloured block. */
body.skin-elegant .lbTop1, body.skin-elegant .lbTop2, body.skin-elegant .lbTop3 { position: relative; }
body.skin-elegant .lbTop1 { box-shadow: inset 2px 0 0 rgba(154,117,20,.55) !important; }
body.skin-elegant .lbTop2 { box-shadow: inset 2px 0 0 rgba(108,119,137,.55) !important; }
body.skin-elegant .lbTop3 { box-shadow: inset 2px 0 0 rgba(138,90,43,.55) !important; }

body.skin-elegant.skin-elegantdark .lbTop1 .lbBar {
  background: linear-gradient(90deg, rgba(214,175,74,.28), rgba(214,175,74,.03)) !important;
}
body.skin-elegant.skin-elegantdark .lbTop2 .lbBar {
  background: linear-gradient(90deg, rgba(198,207,222,.22), rgba(198,207,222,.03)) !important;
}
body.skin-elegant.skin-elegantdark .lbTop3 .lbBar {
  background: linear-gradient(90deg, rgba(198,133,74,.24), rgba(198,133,74,.03)) !important;
}
body.skin-elegant.skin-elegantdark .lbTop1 .lbRank { color: #d6af4a !important; }
body.skin-elegant.skin-elegantdark .lbTop2 .lbRank { color: #c6cfde !important; }
body.skin-elegant.skin-elegantdark .lbTop3 .lbRank { color: #c6854a !important; }
body.skin-elegant.skin-elegantdark .lbTop1 { box-shadow: inset 2px 0 0 rgba(214,175,74,.5) !important; }
body.skin-elegant.skin-elegantdark .lbTop2 { box-shadow: inset 2px 0 0 rgba(198,207,222,.4) !important; }
body.skin-elegant.skin-elegantdark .lbTop3 { box-shadow: inset 2px 0 0 rgba(198,133,74,.45) !important; }

/* ---- SERVER BROWSER: the sweep missed it entirely (zenitsv image 2026-08-16) --------------------------
   `.sbName` is a hardcoded `#eef4ff`, `.sbCount`/`.sbDot` a hardcoded neon `#2ee6c6`, and none of the three
   were in the hand-listed sweep — so "Free For All / 2 Teams / 4 Teams" were white-on-white and unreadable.
   That is the third time a hand-listed set has missed something, so this one is scoped BY CONTAINER instead:
   everything inside #serverBrowser gets the ink, and the few things that should stay coloured are re-asserted
   after. Anything added to this panel later is legible by default rather than by remembering to list it. */
body.skin-elegant #serverBrowser,
body.skin-elegant #serverBrowser * { color: var(--qz-ink); text-shadow: none !important; }
body.skin-elegant .sbName { color: var(--qz-ink) !important; font-weight: 400 !important; letter-spacing: .03em; }
body.skin-elegant .sbCount { color: var(--qz-muted) !important; font-weight: 400 !important; }
/* The dot is the one deliberate accent — it is a status light, so it stays a colour, just not a neon one. */
body.skin-elegant .sbDot { background: #3f9c86 !important; box-shadow: none !important; }
body.skin-elegant .sbRow { border-radius: 0 !important; }
body.skin-elegant .sbRow:hover { background: var(--qz-tint) !important; }
body.skin-elegant .sbRow.sbSel {
  background: var(--qz-tint-2) !important;
  box-shadow: inset 2px 0 0 var(--qz-muted) !important;
}
body.skin-elegant .sbEmpty { color: var(--qz-muted) !important; }

/* ---- upgrade picker boxes ---- */
/* ⚠️ NEVER set `transform` here — .upgradeBox is `translate(-50%, 50%)` and the stagger animations already
   have to carry that (style.css:1233). Same trap as the death screen above.
   The box background is written INLINE by createUpgradeBox (render.polygonColors), so it cannot be
   overridden from a class without !important — and overriding it outright would lose the per-slot colour
   coding, which people navigate by. `filter` desaturates the inline colour in place instead: the slot is
   still recognisably "the yellow one", just not a poster paint square. */
body.skin-elegant .upgradeBox {
  border: 1px solid var(--qz-edge) !important;
  border-radius: var(--qz-radius) !important;
  filter: saturate(.42) brightness(1.04);
  box-shadow: 0 8px 22px rgba(20,28,50,.16), var(--qz-inset) !important;
}
body.skin-elegant.skin-elegantdark .upgradeBox {
  filter: saturate(.42) brightness(.82);
  box-shadow: 0 8px 22px rgba(0,0,0,.42), var(--qz-inset) !important;
}
body.skin-elegant .upgradeBox:hover { filter: saturate(.6) brightness(1.1); }
/* The label under each box: the stock one is a 16-copy black text-shadow used as a fake outline, which is
   the single heaviest piece of type in the game. */
body.skin-elegant .upgradeBoxLower {
  font-family: var(--qz-font) !important; font-weight: 400 !important;
  letter-spacing: .08em; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.55) !important; -webkit-text-stroke: 0 !important;
}

/* ================================ Star Shop / Achievements buttons, per GUI style =====================
   zenitsv 2026-08-16: *"los botones de arriba de Star Shop y Achievements … no cambian PARA NADA cuando
   cambias de modo de la GUI, se ven toscos ahi con el mismo estilo en los 4 estilos"*. They were written
   before the skins existed, so they kept the neon card look everywhere.
   The rule the other panels follow: each skin restyles face, edge, radius, shadow and type, and NEVER the
   position — these two are absolutely positioned at top:62px and must stay where they are or they will
   collide with the star balance above them. So no geometry below except the border radius.
   The gold/blue accent is information (stars vs achievements) and survives every skin, only re-pitched to
   that skin's contrast — the same mistake the leaderboard medals taught: a flatten-the-colour sweep must
   not eat colour that is carrying meaning. */

/* ---- CLASSIC: flat panel, hairline edge, no glow. Accent kept only on the border. */
body.skin-classic #starShop,
body.skin-classic #achBtn, body.skin-classic #clanBtn, body.skin-classic #dailyBtn {
  background: var(--cl-face) !important;
  border: 1px solid var(--cl-edge) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: var(--cl-text) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}
body.skin-classic #starShop { border-color: rgba(190,150,40,.55) !important; }
body.skin-classic #achBtn, body.skin-classic #clanBtn, body.skin-classic #dailyBtn   { border-color: rgba(90,130,190,.55) !important; }
body.skin-classic #starShop:hover { border-color: rgba(190,150,40,.95) !important; }
body.skin-classic #achBtn:hover, body.skin-classic #clanBtn:hover, body.skin-classic #dailyBtn:hover   { border-color: rgba(90,130,190,.95) !important; }
body.skin-classic #starShop .sbStar { color: #b9922a !important; text-shadow: none !important; }
body.skin-classic.theme-light #starShop .sbStar { color: #8a6710 !important; }
body.skin-classic #starShopToast {
  background: var(--cl-face) !important;
  border: 1px solid var(--cl-edge) !important;
  border-radius: 4px !important;
  color: var(--cl-text) !important;
  box-shadow: none !important;
}

/* ---- ELEGANT (light quartz): stone face, uppercase quartz type, dark metals for the accent so it reads
   on a near-white panel. Same light/dark metal split as the leaderboard medals. */
body.skin-elegant #starShop,
body.skin-elegant #achBtn, body.skin-elegant #clanBtn, body.skin-elegant #dailyBtn {
  background: var(--qz-face) !important;
  background-image: none !important;
  border: 1px solid var(--qz-edge) !important;
  border-radius: var(--qz-radius) !important;
  box-shadow: var(--qz-shadow) !important;
  backdrop-filter: blur(26px) saturate(1.05) brightness(1.06);
  font-family: var(--qz-font) !important;
  font-weight: 400 !important;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--qz-ink) !important;
  text-shadow: none !important;
}
body.skin-elegant #starShop:hover,
body.skin-elegant #achBtn:hover, body.skin-elegant #clanBtn:hover, body.skin-elegant #dailyBtn:hover { border-color: var(--qz-tint-2) !important; }
body.skin-elegant #starShop .sbStar { color: #8a6710 !important; text-shadow: none !important; }
body.skin-elegant #achBtnCount { color: var(--qz-muted) !important; opacity: 1; }
body.skin-elegant #starShopToast {
  background: var(--qz-face) !important;
  border: 1px solid var(--qz-edge) !important;
  border-radius: var(--qz-radius) !important;
  box-shadow: var(--qz-shadow) !important;
  font-family: var(--qz-font) !important;
  color: #8a6710 !important;
}
/* ---- ELEGANT DARK: same stone, bright metals — on a dark face the dark gold above goes invisible. */
body.skin-elegant.skin-elegantdark #starShop .sbStar,
body.skin-elegant.skin-elegantdark #starShopToast { color: #d6af4a !important; }

/* ---- "Logged in as" + "View my profile", per GUI style ------------------------------------------------
   Same omission as Star Shop / Achievements above: both predate the skins. Same rule — face, edge, radius,
   shadow and type only. Their positions are `transform: translate(-50%, …)` off the menu centre and must
   not be touched, or they detach from the play button they sit under. */
body.skin-classic #loggedInAs,
body.skin-classic #profileBtn {
  background: var(--cl-face) !important;
  border: 1px solid var(--cl-edge) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: var(--cl-text) !important;
  text-shadow: none !important;
}
body.skin-classic #loggedInAs .liaLabel { color: var(--cl-muted) !important; }
body.skin-classic #loggedInAs #loggedInAsName { color: var(--cl-text) !important; }
body.skin-classic #profileBtn:hover { border-color: var(--cl-text) !important; }

body.skin-elegant #loggedInAs,
body.skin-elegant #profileBtn {
  background: var(--qz-face) !important;
  background-image: none !important;
  border: 1px solid var(--qz-edge) !important;
  border-radius: var(--qz-radius) !important;
  box-shadow: var(--qz-shadow) !important;
  backdrop-filter: blur(26px) saturate(1.05) brightness(1.06);
  font-family: var(--qz-font) !important;
  font-weight: 400 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--qz-ink) !important;
  text-shadow: none !important;
}
body.skin-elegant #loggedInAs .liaLabel { color: var(--qz-muted) !important; font-weight: 400 !important; }
/* The account name is the one thing on this row worth reading, so it keeps weight where everything else in
   the elegant skin loses it. */
body.skin-elegant #loggedInAs #loggedInAsName { color: var(--qz-ink) !important; font-weight: 600 !important; }
body.skin-elegant #profileBtn:hover { border-color: var(--qz-tint-2) !important; }

/* ---- PLAY button: "JUGAR" is 5 characters where "PLAY" is 4 -------------------------------------------
   #playButton is a fixed 95px x 50px at 35px type, so the fifth character has nowhere to go and the word
   is clipped. Same budget rule as the leaderboard title: 35 * 4/5 = 28px. */
body.lang-es #playButton { font-size: 28px; }
/* Russian "ИГРАТЬ" is 6 wide Cyrillic capitals in the same 95px box: 35 * 4/6, rounded down for the wider glyphs. */
body.lang-ru #playButton { font-size: 22px; }

/* ---- Star balance + Discord button, per GUI style ----------------------------------------------------
   Two more that predate the skins. #starBalance is the anchor the Star Shop and Achievements buttons are
   positioned against, so as with those: material only, never geometry. */
body.skin-classic #starBalance {
  background: var(--cl-face) !important;
  border: 1px solid rgba(190,150,40,.55) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: var(--cl-text) !important;
  text-shadow: none !important;
}
body.skin-classic #starBalance .sbStar { color: #b9922a !important; }
body.skin-classic.theme-light #starBalance .sbStar { color: #8a6710 !important; }
body.skin-classic .sbSub { color: var(--cl-muted) !important; }

body.skin-elegant #starBalance {
  background: var(--qz-face) !important;
  background-image: none !important;
  border: 1px solid var(--qz-edge) !important;
  border-radius: var(--qz-radius) !important;
  box-shadow: var(--qz-shadow) !important;
  backdrop-filter: blur(26px) saturate(1.05) brightness(1.06);
  font-family: var(--qz-font) !important;
  font-weight: 500 !important;
  color: var(--qz-ink) !important;
  text-shadow: none !important;
}
body.skin-elegant #starBalance .sbStar { color: #8a6710 !important; }
body.skin-elegant.skin-elegantdark #starBalance .sbStar { color: #d6af4a !important; }
body.skin-elegant .sbSub { color: var(--qz-muted) !important; }

/* #b0 is the Discord button. It keeps Discord's blurple in every skin — that colour is the brand telling
   you where the button goes, not decoration, so it is re-pitched rather than replaced: flattened for
   classic, and given the quartz edge and type for elegant. */
body.skin-classic #b0 {
  background: #4b55c9 !important;
  border: 1px solid rgba(120,130,255,.5) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: #fff !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}
body.skin-elegant #b0 {
  background: #5865f2 !important;
  background-image: none !important;
  border: 1px solid var(--qz-edge) !important;
  border-radius: var(--qz-radius) !important;
  box-shadow: var(--qz-shadow) !important;
  font-family: var(--qz-font) !important;
  font-weight: 500 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff !important;
  text-shadow: none !important;
}
/* "Unirse al servidor de Discord" is 29 characters against "Join Discord Server"'s 19, in a 470px box at
   26px. Uppercase + tracking in the elegant skin makes it worse, so both get a budget. */
body.lang-es #b0 { font-size: 20px; }
body.skin-elegant.lang-es #b0 { font-size: 17px; letter-spacing: .04em; }

/* ================================================== HUD BARS, ELEGANT (zenitsv 2026-08-16) ===========
   *"hay un problema con lo de las barras de mejora, dales un estilo mas elegante, a estas barras de aqui
   tanto como la barras de mejora, las barras de punteo ... tambien la barra de punteo restante para subir a
   siguiente nivel dale el toque elegante tanto para elegant white y elegant dark porfa"*

   Every one of these bars is a black pill with a fully-rounded fill inside it — the one shape the elegant cut
   does not use anywhere else. Squared troughs, a stone face instead of pure black, a hairline edge and a
   single diagonal sheen over the fill.

   ⚠️ The FILL colour is written inline by drawFrame every frame (`bar[style].background = <team colour>`), and
   an inline `background:` shorthand wipes any `background-image` a rule here could set. So the sheen has to
   ride on a PSEUDO-ELEMENT, never on the fill's own background. Same reason the troughs are styled on the
   parent rather than by recolouring the fill.
   Both variants come free: every value below is a --qz-* token, and skin-elegantdark redefines the tokens. */
body.skin-elegant #tankScore,
body.skin-elegant #tankPartialLevel,
body.skin-elegant .statBarLeft,
body.skin-elegant .statBarRight {
  background: var(--qz-face) !important;
  border: 1px solid var(--qz-edge);
  border-radius: var(--qz-radius);
  box-shadow: var(--qz-inset);
  color: var(--qz-ink);
}
body.skin-elegant #tankScoreBar,
body.skin-elegant #tankLevelBar,
body.skin-elegant .statBarInner,
body.skin-elegant .statBarSlide,
body.skin-elegant .statBarSlide2 {
  border-radius: var(--qz-radius);
}
/* The fill needs a stacking context of its own for the sheen to sit on, and `position: absolute` (which all
   four already carry) gives it one. */
body.skin-elegant #tankScoreBar::after,
body.skin-elegant #tankLevelBar::after,
body.skin-elegant .statBarSlide::after,
body.skin-elegant .statBarSlide2::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--qz-sheen);
  pointer-events: none;
}
/* A quiet rim on the fill so it reads as a machined insert rather than a painted block. Inset, so it cannot
   change the bar's measured width — drawFrame drives that in whole pixels and a border would fight it. */
body.skin-elegant #tankScoreBar,
body.skin-elegant #tankLevelBar,
body.skin-elegant .statBarSlide,
body.skin-elegant .statBarSlide2 {
  box-shadow: inset 0 0 0 1px var(--qz-hair), inset 0 1px 0 rgba(255,255,255,.22);
}

/* ================================================== STAR SHOP, PER SKIN (zenitsv 2026-08-16) =========
   *"la tienda no cambia para nada de estilo, se ve igual en los 4 modos"* — and he's right: #shopPanel and
   everything in it were hardcoded to one navy-and-gold look with no `body.skin-*` rule anywhere, so all four
   interface styles rendered it identically.

   The GOLD is kept in every skin on purpose. It isn't decoration — it's the star currency's colour, shared
   with #starBalance and #starShop, and recolouring it per skin would break the one visual cue that says
   "this costs stars". What changes is the panel it sits on: the ground, the edges, the corner radius and the
   body text. Same approach the menu panels already take.
   The buttons keep `background: rgba(0,0,0,.3)` in the dark skins but need a light face on bright quartz,
   where a black chip on pale stone is the "cubo oscuro" problem from the first elegant pass. */

/* ---- ELEGANT (both variants; every value is a --qz-* token so dark comes free) ---------------------- */
body.skin-elegant #shopPanel {
  background: var(--qz-face-2);
  border: 1px solid var(--qz-edge);
  border-radius: var(--qz-radius);
  box-shadow: var(--qz-shadow);
  backdrop-filter: blur(14px);
  font-family: var(--qz-font);
}
body.skin-elegant #shopHead {
  border-bottom: 1px solid var(--qz-hair);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.skin-elegant #shopClose { color: var(--qz-ink); }
body.skin-elegant #shopNote { color: var(--qz-muted); font-weight: 500; }
body.skin-elegant .shopName { color: var(--qz-ink); font-weight: 500; letter-spacing: .01em; }
body.skin-elegant .shopSwatch { border-radius: var(--qz-radius); border: 1px solid var(--qz-edge); }
body.skin-elegant .shopRow { border-bottom: 1px solid var(--qz-hair); }
body.skin-elegant .shopBuy,
body.skin-elegant #ncCustomApply {
  background: var(--qz-tint);
  border: 1px solid var(--qz-edge);
  border-radius: var(--qz-radius);
  font-weight: 600;
  letter-spacing: .04em;
}
body.skin-elegant .shopBuy:hover,
body.skin-elegant #ncCustomApply:hover { background: var(--qz-tint-2); }
/* The star buttons that OPEN the panel were the other half of "no cambia" — they kept the round, glowing
   menu treatment while everything around them went square. */
body.skin-elegant #starShop,
body.skin-elegant #achBtn, body.skin-elegant #clanBtn, body.skin-elegant #dailyBtn {
  background: var(--qz-face);
  border: 1px solid var(--qz-edge);
  border-radius: var(--qz-radius);
  box-shadow: var(--qz-inset);
  font-family: var(--qz-font);
  font-weight: 600;
  letter-spacing: .05em;
}
body.skin-elegant #starShopToast {
  background: var(--qz-face-2);
  border: 1px solid var(--qz-edge);
  border-radius: var(--qz-radius);
  color: var(--qz-ink);
}

/* ---- CLASSIC (flat, no glow, no gradients — matches the rest of that skin) -------------------------- */
body.skin-classic #shopPanel {
  background: var(--cl-face);
  border: 1px solid var(--cl-edge);
  border-radius: 6px;
  box-shadow: none;
}
body.skin-classic #shopHead { border-bottom: 1px solid var(--cl-edge); font-weight: 700; }
body.skin-classic #shopClose { color: var(--cl-text); }
body.skin-classic #shopNote { color: var(--cl-muted); }
body.skin-classic .shopName { color: var(--cl-text); }
body.skin-classic .shopSwatch { border-radius: 3px; border: 1px solid var(--cl-edge); }
body.skin-classic .shopBuy,
body.skin-classic #ncCustomApply {
  background: transparent;
  border: 1px solid var(--cl-edge);
  border-radius: 4px;
  font-weight: 700;
}
body.skin-classic #starShop,
body.skin-classic #achBtn, body.skin-classic #clanBtn, body.skin-classic #dailyBtn {
  background: var(--cl-face);
  border: 1px solid var(--cl-edge);
  border-radius: 6px;
  box-shadow: none;
}
body.skin-classic #starShopToast {
  background: var(--cl-face);
  border: 1px solid var(--cl-edge);
  border-radius: 6px;
  color: var(--cl-text);
  box-shadow: none;
}

/* ==== MOBILE: NO BACKDROP BLUR ============================================================================
   zenitsv 2026-08-16 sent a phone screenshot of the elegant menu with stray white/coloured rectangles
   scattered over the background ("las shapes tienen esos cubitos glitcheados que aparecen en la version de
   telefono"). They are not shapes and they are not a canvas bug: every one of them sits on the bounding box
   of an element carrying `backdrop-filter: blur(26px)` — #loggedInAs, #profileBtn, #starShop, #achBtn,
   #starBalance, #contact. A backdrop blur layered over a canvas that repaints every frame forces the mobile
   compositor to re-snapshot the region BEHIND each panel every frame; when the tiles it reads back are stale
   you get exactly this, rectangular fragments of previously drawn UI stranded on the field. Desktop
   composites the whole thing in one pass and never shows it, which is why it only appears on phones.
   The blur was doing very little anyway (the face is already .46/.72 opaque and the panels sit on a blurred
   canvas), so mobile drops it everywhere and pays for the lost frosting with a more opaque face. One
   universal rule rather than a list, because the list would silently go stale the next time a panel is
   added — and this is a pure nicety, so there is nothing to lose by killing all of it on touch devices. */
body.mobile *,
body.mobile *::before,
body.mobile *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Opacity bought back. Higher specificity than the token blocks above (two classes on `body` vs one), so
   these win without !important and the dark variant still overrides the bright one by source order. */
body.mobile.skin-elegant {
  --qz-face:   rgba(255,255,255,.88);
  --qz-face-2: rgba(255,255,255,.94);
  --qz-scrim:  rgba(238,236,243,.95);
}
body.mobile.skin-elegant.skin-elegantdark {
  --qz-face:   rgba(22,21,26,.93);
  --qz-face-2: rgba(34,33,39,.96);
  --qz-scrim:  rgba(16,15,19,.94);
}

/* ==== ACHIEVEMENTS PANEL, PER SKIN =========================================================================
   zenitsv 2026-08-16: *"arregla el estilo que el de los logros no cambia en modo elegante"*. Same gap the
   Star Shop had — #achPanel and its children carried zero `body.skin-*` rules, so they kept the modern blue
   glass in every skin. Not a specificity fight, just missing rules.
   The earned-achievement gold is kept in every skin (it is the reward cue, the way the star glyph is in the
   shop), but the TONE moves: #ffd54a is invisible on the bright quartz face, so light elegant and classic
   take a darker leaf gold and only dark elegant keeps a bright one. */
body.skin-elegant #achPanel {
  background: var(--qz-face-2);
  border: 1px solid var(--qz-edge);
  border-radius: var(--qz-radius);
  box-shadow: var(--qz-shadow);
  backdrop-filter: blur(14px);
  font-family: var(--qz-font);
}
body.skin-elegant #achPanelHead {
  border-bottom: 1px solid var(--qz-hair);
  color: var(--qz-ink);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.skin-elegant #achPanelCount { color: var(--qz-muted); opacity: 1; font-weight: 500; }
body.skin-elegant #achPanelClose { color: var(--qz-ink); }
body.skin-elegant .achRow { opacity: 1; }
body.skin-elegant .achRow:not(.achDone) { color: var(--qz-muted); }
body.skin-elegant .achRow:not(.achDone) .achName,
body.skin-elegant .achRow:not(.achDone) .achDesc,
body.skin-elegant .achRow:not(.achDone) .achIcon { color: var(--qz-muted); }
/* A hairline between rows instead of the opacity wash — on a translucent stone face a 45%-opacity row reads
   as a rendering fault rather than as "not earned yet". The dimming moves to the ink colour above. */
body.skin-elegant .achRow + .achRow { border-top: 1px solid var(--qz-hair); }
body.skin-elegant .achName { color: var(--qz-ink); font-weight: 500; letter-spacing: .01em; }
body.skin-elegant .achDesc { color: var(--qz-muted); font-weight: 400; }
body.skin-elegant .achRow.achDone .achName { color: #8a6710; }
body.skin-elegant.skin-elegantdark .achRow.achDone .achName { color: #d6af4a; }

body.skin-classic #achPanel {
  background: var(--cl-face);
  border: none;
  box-shadow: 0 0 0 1px var(--cl-edge);
  border-radius: 6px;
}
body.skin-classic #achPanelHead { border-bottom: 1px solid var(--cl-edge); color: var(--cl-text); }
body.skin-classic #achPanelCount { color: var(--cl-muted); opacity: 1; }
body.skin-classic #achPanelClose { color: var(--cl-text); }
body.skin-classic .achName { color: var(--cl-text); }
body.skin-classic .achDesc { color: var(--cl-muted); }
body.skin-classic .achRow.achDone .achName { color: #d9a441; }

/* ================================================================ LIGHT ("Claro")
   zenitsv 2026-08-16, naming it himself: *"en vez de llamarlo old, podrias llamarlo ahora 'Claro' … Claro
   es High Opacity Classic"*. Asked for as *"colores mas directos como blanco … las GUIs son mas clasicas y
   no tienen esa transparencia … todo, absolutamente todo es mas simple"*.

   `light` carries BOTH .skin-classic and .skin-light (SKIN_CLASSES in script2.js). Classic already removes
   the gradients, the glow and the saturated accent, so everything below is only the LIGHT repaint: opaque
   white panels instead of the translucent dark face, dark ink, a hairline grey edge.
   ⚠️ `skin-light` (material) and `theme-light` (palette) are SEPARATE registries and can both be on at
   once. `body.skin-classic.theme-light` already sets pale --cl-* tokens at 0,2,0, so this block is written
   as `body.skin-classic.skin-light` (0,3,0) to beat it outright rather than relying on source order — with
   a bare `body.skin-light` the palette silently lost whenever the user's theme was also Light.

   The GAME is deliberately untouched — no canvas, HUD, minimap or FOV change. The white field is the MENU
   background (THEMES 'light' in script2.js), which is decoration; the in-game field is readability and
   therefore gameplay, and the grant here is visual-only.
   ⚠️ Ink is DARK in this skin. Every other skin except bright quartz sits on a dark ground, so the menu's
   chrome is white type throughout and inherits invisible here — same trap bright quartz hit. Legibility is
   swept BY CONTAINER below rather than by a hand-listed selector set, because the hand-listed one has
   missed something every single time. */
body.skin-classic.skin-light {
  --cl-face:  #ffffff;
  --cl-edge:  #c9ccd2;
  --cl-text:  #1a1d22;
  --cl-muted: #5f666f;
}
/* Opaque, flat, hairline — "no tienen esa transparencia" is the whole point, so no rgba faces anywhere. */
body.skin-classic.skin-light #serverSelect,
body.skin-classic.skin-light #playMenu,
body.skin-classic.skin-light #credits,
body.skin-classic.skin-light #featured,
body.skin-classic.skin-light #videoBox,
body.skin-classic.skin-light #serverBrowser,
body.skin-classic.skin-light #optionsCard,
body.skin-classic.skin-light #menuStyleRow,
body.skin-classic.skin-light #menuLangRow {
  background: var(--cl-face) !important;
  border: 1px solid var(--cl-edge) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
/* Container sweep: anything inside a menu panel takes the dark ink by default, then the few colours that
   carry INFORMATION are re-asserted after. New widgets added to these panels are then legible by default
   instead of by remembering to list them — the lesson from the server-browser miss. */
body.skin-classic.skin-light #credits, body.skin-classic.skin-light #credits *,
body.skin-classic.skin-light #featured, body.skin-classic.skin-light #featured *,
body.skin-classic.skin-light #serverBrowser, body.skin-classic.skin-light #serverBrowser *,
body.skin-classic.skin-light #playMenu, body.skin-classic.skin-light #playMenu *,
body.skin-classic.skin-light #optionsCard, body.skin-classic.skin-light #optionsCard *,
body.skin-classic.skin-light #serverSelect, body.skin-classic.skin-light #serverSelect * {
  color: var(--cl-text);
  text-shadow: none !important;
}
body.skin-classic.skin-light .optSub,
body.skin-classic.skin-light #serverSelectLowerText,
body.skin-classic.skin-light #serverSelectArrow,
body.skin-classic.skin-light .menuPickLbl,
body.skin-classic.skin-light .optTab { color: var(--cl-muted) !important; }
/* The logo is the one piece of chrome that must not go grey — it is the brand. Flat ink, no neon halo. */
body.skin-classic.skin-light #title {
  color: #1a1d22 !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  font-weight: 900 !important;
  text-transform: uppercase;
}
/* Bars and rails: classic paints these a slate blue that reads as a dark blob on white. */
body.skin-classic.skin-light .lbBar,
body.skin-classic.skin-light .lbTop1 .lbBar,
body.skin-classic.skin-light .lbTop2 .lbBar,
body.skin-classic.skin-light .lbTop3 .lbBar { background: #d7dae0 !important; box-shadow: none !important; }
body.skin-classic.skin-light .clItem::before { background: var(--cl-muted) !important; }
body.skin-classic.skin-light .optToggle { background: #d7dae0 !important; border: 1px solid var(--cl-edge) !important; }
body.skin-classic.skin-light .optToggle.on { background: #3f7d55 !important; }
body.skin-classic.skin-light .optSlider { background: #d7dae0 !important; }
body.skin-classic.skin-light .optTab.on { background: #d7dae0 !important; color: var(--cl-text) !important; }
body.skin-classic.skin-light .optStyle { background: #f3f4f6; border-color: var(--cl-edge); color: var(--cl-text); }
body.skin-classic.skin-light .optStyle.active { border-color: #3f7d55; box-shadow: 0 0 0 1px #3f7d55; }
/* Buttons keep their identity colour — the same rule the leaderboard medals and the Discord blurple follow:
   colour that carries information survives every skin, re-pitched for the ground rather than flattened. */
body.skin-classic.skin-light #playButton { background-color: #3f7d55 !important; }
body.skin-classic.skin-light #playButton:hover { background-color: #4c9467 !important; }
body.skin-classic.skin-light #b0 { background: #4a54c0 !important; border-color: #3a439b !important; color: #fff !important; }
body.skin-classic.skin-light #b1, body.skin-classic.skin-light #b2 {
  background: #e9ebef !important; border-color: var(--cl-edge) !important; color: var(--cl-text) !important;
}
body.skin-classic.skin-light #starShop, body.skin-classic.skin-light #achBtn, body.skin-classic.skin-light #clanBtn, body.skin-classic.skin-light #dailyBtn {
  background: var(--cl-face) !important; box-shadow: none !important;
}
body.skin-classic.skin-light #starShop .sbStar { color: #8a6710 !important; }
body.skin-classic.skin-light #loggedInAs, body.skin-classic.skin-light #profileBtn {
  background: var(--cl-face) !important; border: 1px solid var(--cl-edge) !important;
  color: var(--cl-text) !important; box-shadow: none !important;
}
body.skin-classic.skin-light #loggedInAs .liaLabel { color: var(--cl-muted) !important; }
/* The shape minigame lives on #menuBg UNDER #overlay2, which must stay transparent or the shapes are buried
   — the same thing that broke classic. Do not paint overlay2 here. */
body.skin-classic.skin-light #overlay2 { background: transparent !important; }

/* ── NAME FIELD ON THE LIGHT SKINS (zenitsv 2026-08-16) ─────────────────────────────────────────────
   "el color es puramente blanco, tanto en Claro y Elegante Claro no se ve el nombre".
   The modern redesign sets `#name { color: #eef4ff !important }` UNSCOPED, and neither light skin ever
   overrode it: Elegant never states an ink for the input at all, and Claro's container sweep
   (`#playMenu *`) carries no !important, so it loses to that one rule. White ink on a white panel.
   Scoped to the body class so specificity beats it. Elegantdark carries `skin-elegant` too and needs no
   line of its own: it redefines --qz-ink to a light grey, so the one rule reads correctly in both. */
body.skin-elegant #name { color: var(--qz-ink) !important; }
body.skin-classic.skin-light #name { color: var(--cl-text) !important; }
body.skin-classic.skin-light #name::placeholder { color: var(--cl-muted) !important; }

/* ── SETTINGS TAB SLIDE (zenitsv 2026-08-16) ────────────────────────────────────────────────────────
   "la animacion de derecha a izquierda e izquierda a derecha al cambiar entre las pestañas ... cada uno
   tenga dely de 0,1s". Direction is decided in __optTabs from the tab order; the per-row delay is stamped
   inline as index * 0.1s, so the rows cascade instead of arriving as one block.
   #optionsCard sets overflow-y:auto, which per spec makes overflow-x compute to auto too — so the 26px
   the rows start offset by would raise a horizontal scrollbar mid-animation. Clipping it is safe: the
   card is a single column and nothing in it is meant to overflow sideways. */
#optionsCard { overflow-x: hidden; }
.optRow.optSlideR, #controlsSection.optSlideR { animation: optSlideInR .3s cubic-bezier(.2,.7,.3,1) both; }
.optRow.optSlideL, #controlsSection.optSlideL { animation: optSlideInL .3s cubic-bezier(.2,.7,.3,1) both; }
@keyframes optSlideInR { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes optSlideInL { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
/* A staggered slide is exactly the kind of motion this setting exists to stop. */
@media (prefers-reduced-motion: reduce) {
  .optRow.optSlideR, .optRow.optSlideL,
  #controlsSection.optSlideR, #controlsSection.optSlideL { animation: none !important; }
}

/* ── DESIGN CREDIT ─────────────────────────────────────────────────────────────────────────────────────
   The five Interface Styles in this file — Modern, Classic, Light/Claro, Elegant (+ Elegant Dark) and
   Depths of Retris — and the reworked interface animations were DESIGNED BY zenitsv (in-game account
   `zenitsv`). The concepts, palettes, naming and motion are his; the CSS here is the implementation of
   his designs, not their origin. Re-attributed 2026-08-17 on zodus's instruction: an earlier session
   recorded this work under the wrong name.
   Attribution only — no rule below depends on this comment. If these are reused or reworked, credit him.
   ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/* ── DEPTHS OF RETRIS (`skin-depths`) ─────────────────────────────────────────────────────────────────
   zenitsv 2026-08-17: *"la clasificacion y todo usan igual un estilo de interfaz cuadrado, pero los
   colores son aun mas sobrios, como entre una mezcla entre elegancia, pero a la vez sobriedad … los fonts
   deben de verse delgados, pero tambien se ven bastante formales y elegantes … El titulo de retris.io debe
   de estar en mayuscula … las barras y todo eso se tiene que ver como una clase de barra tanto como formal,
   cuadrada"*.
   Where quartz is translucent stone, this is a facility readout: opaque graphite, no blur, no sheen, no
   radius anywhere, hairline rules instead of borders, and type that gets its formality from tracking rather
   than from weight. It shares NO tokens with --qz-*: the two skins are different materials and coupling
   them would make every future quartz tweak land here as well. */
body.skin-depths {
  --dp-face:   rgba(20,20,20,.93);
  --dp-face-2: rgba(30,30,30,.96);
  --dp-edge:   rgba(226,228,232,.20);
  --dp-hair:   rgba(226,228,232,.10);
  --dp-ink:    #e2e4e8;
  --dp-muted:  rgba(226,228,232,.55);
  --dp-tint:   rgba(226,228,232,.08);
  --dp-tint-2: rgba(226,228,232,.20);
  --dp-font:   'Outfit','Optima','Candara','Gill Sans MT','Gill Sans','Segoe UI',system-ui,-apple-system,sans-serif;
}
body.skin-depths #overlay2 { background: transparent !important; }

/* ---- panels: flat graphite, one hairline, nothing round ---- */
body.skin-depths #optionsCard,
body.skin-depths #serverSelect,
body.skin-depths #playMenu,
body.skin-depths #credits,
body.skin-depths #featured,
body.skin-depths #videoBox,
body.skin-depths #serverBrowser,
body.skin-depths #contact,
body.skin-depths #disconnect,
body.skin-depths #adblock {
  background: var(--dp-face) !important;
  background-image: none !important;
  border: 1px solid var(--dp-edge) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
  font-family: var(--dp-font);
  color: var(--dp-ink);
}
/* Same three full-screen wrappers the quartz block keeps as a scrim — painting them as a panel turns the
   whole viewport into one slab. */
body.skin-depths #changelogFull,
body.skin-depths #accountFull,
body.skin-depths #tips {
  background: rgba(12,12,12,.88) !important;
  background-image: none !important;
  border: 1px solid var(--dp-hair) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--dp-font);
  color: var(--dp-ink);
}

/* ---- type ---- */
body.skin-depths #title {
  font-family: var(--dp-font) !important;
  font-weight: 200 !important;
  letter-spacing: .30em !important;
  color: var(--dp-ink) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  animation: none !important;
  text-transform: uppercase;           /* "El titulo de retris.io, debe de estar en mayuscula" */
}
body.skin-depths #name, body.skin-depths #playButton, body.skin-depths .input,
body.skin-depths .optLabel, body.skin-depths .optSub, body.skin-depths .sbTab,
body.skin-depths .lbName, body.skin-depths .lbScore, body.skin-depths .lbRank,
body.skin-depths .clDate, body.skin-depths .clItem, body.skin-depths .clSub,
body.skin-depths #serverSelectSlide, body.skin-depths #serverSelectLeft,
body.skin-depths #serverSelectRight, body.skin-depths #serverSelectLowerText,
body.skin-depths #creditsContent, body.skin-depths #creditsContent2,
body.skin-depths #changelogContent, body.skin-depths #tipsContent, body.skin-depths #accountContent {
  font-family: var(--dp-font) !important;
  font-weight: 300 !important;
  letter-spacing: .06em;
}
body.skin-depths #serverSelectTitle, body.skin-depths #creditsTitle, body.skin-depths #leaderboardTitle {
  font-family: var(--dp-font) !important;
  font-weight: 300 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  color: var(--dp-ink) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
body.skin-depths #b0, body.skin-depths #b1, body.skin-depths #b2 { font-weight: 300 !important; }

/* ---- controls. Never set `position` here — see the note in the quartz block. ---- */
body.skin-depths .input, body.skin-depths #playButton, body.skin-depths .optStyle, body.skin-depths .sbTab {
  background: var(--dp-face-2) !important;
  background-image: none !important;
  border: 1px solid var(--dp-edge) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--dp-ink) !important;
  text-transform: uppercase;
  letter-spacing: .16em;
}
body.skin-depths .input:hover, body.skin-depths #playButton:hover, body.skin-depths .optStyle:hover {
  background: var(--dp-tint) !important;
}
body.skin-depths .optStyle { font-size: 11px; padding: 6px 18px; }
body.skin-depths .optStyle.active { border-color: var(--dp-ink) !important; box-shadow: inset 0 0 0 1px var(--dp-tint-2) !important; }
body.skin-depths .red { background: rgba(150,60,64,.30) !important; border-color: rgba(190,90,94,.45) !important; }
body.skin-depths .link { color: var(--dp-ink) !important; text-decoration: none; border-bottom: 1px solid var(--dp-tint-2); }
body.skin-depths .optSwatch { border-radius: 0; box-shadow: none; border: 1px solid var(--dp-edge); }
body.skin-depths .optSwatch:hover { transform: none; }
body.skin-depths .optSwatch.active { border-color: var(--dp-ink); box-shadow: 0 0 0 1px var(--dp-ink); }

/* ---- THE ACCENT (errorx002 2026-08-21) ---------------------------------------------------------------
   *"ese azul no se ve bien, se siente futurista en el mal sentido, no es corporativamente frio, sobrio,
   cruel"*. The settings panel's accent is a THEME variable, and Depths is a SKIN — so the tab pill, both
   slider thumbs and every toggle fell straight through to whatever swatch was picked, which for almost
   everyone is midnight's blue. Elegant and Classic each override the three controls one at a time; doing
   the same here would leave the next control that reads --th-accent blue again.
   So Depths redefines the VARIABLES instead, and every control that already reads them comes along.
   ⚠️ This deliberately overrides the theme swatch too. `body.skin-depths` and `body.theme-*` have the same
   specificity, so this block wins only because it is further down the file — do not move it above the theme
   definitions. Overriding the swatch is the intent: this style is monochrome by design, and a red or purple
   accent in it is the same mistake the blue was. */
body.skin-depths {
  --th-accent:  linear-gradient(180deg, rgba(226,228,232,.34), rgba(226,228,232,.20));
  --th-accentc: rgba(226,228,232,.22);
  --th-track:   var(--dp-tint);
  --th-border:  var(--dp-edge);
  --th-line:    var(--dp-hair);
  --th-text:    var(--dp-ink);
  --th-muted:   var(--dp-muted);
}
/* ...and then the SHAPES, because a graphite pill is still a pill. Nothing in this style is round. */
body.skin-depths .optTabs {
  border-radius: 0; background: none; border: 1px solid var(--dp-edge); padding: 3px; gap: 0;
}
body.skin-depths .optTab {
  border-radius: 0;
  font-family: var(--dp-font); font-weight: 300; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dp-muted);
}
body.skin-depths .optTab:hover { color: var(--dp-ink); }
body.skin-depths .optTab.on { background: var(--dp-tint-2); color: var(--dp-ink); }
/* A thin rail with a hard rectangular slug on it — a machine readout, not a volume knob. */
body.skin-depths .optSlider { border-radius: 0; height: 3px; background: var(--dp-tint); }
body.skin-depths .optSlider::-webkit-slider-thumb {
  border-radius: 0; width: 9px; height: 18px; background: var(--dp-ink); box-shadow: none;
}
body.skin-depths .optSlider::-moz-range-thumb {
  border-radius: 0; width: 9px; height: 18px; background: var(--dp-ink); box-shadow: none;
}
body.skin-depths .optToggle {
  border-radius: 0; background: var(--dp-tint); border: 1px solid var(--dp-edge);
}
/* The ON state has to be legible at a glance even in a monochrome style — --dp-tint-2 against
   --dp-tint is only a 0.08 -> 0.20 step, and a switch you have to squint at is a usability bug wearing a
   mood. The knob position carries it too, but the track should not need reading twice. */
body.skin-depths .optToggle.on { background: rgba(226,228,232,.38); }
body.skin-depths .optToggleKnob { border-radius: 0; background: var(--dp-ink); box-shadow: none; }
/* The last three hardcoded blues in the panel — they predate the variables and never got converted. */
body.skin-depths .optComing,
body.skin-depths .optControlsHint { color: var(--dp-muted); font-family: var(--dp-font); }
body.skin-depths .optControlsTitle {
  color: var(--dp-ink); font-family: var(--dp-font); font-weight: 300;
  letter-spacing: .16em; text-transform: uppercase;
}
body.skin-depths .optTestTag { color: var(--dp-muted); }

/* ---- bars: a measure, not a pill. Square, flush, hairline-separated. ---- */
body.skin-depths .leaderboardEntry {
  border-radius: 0 !important;
  background: none !important;
  border-bottom: 1px solid var(--dp-hair) !important;
  font-weight: 300 !important;
  color: var(--dp-ink) !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
body.skin-depths .leaderboardBar {
  border-radius: 0 !important;
  width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important;
}
body.skin-depths .leaderboardSlide { border-radius: 0 !important; filter: saturate(.28) brightness(.85); opacity: .45; }
body.skin-depths .leaderboardText {
  font-family: var(--dp-font) !important;
  font-size: 13px !important; font-weight: 300 !important; letter-spacing: .06em;
  padding-top: 4px;
  color: var(--dp-ink) !important; text-shadow: none !important;
}
body.skin-depths .lbRow {
  height: 24px !important; border-radius: 0 !important;
  border-bottom: 1px solid var(--dp-hair) !important; background: none !important;
}
body.skin-depths .lbRow:hover { outline: none !important; background: var(--dp-tint) !important; }

/* ── DEPTHS: the menu chrome the panel block doesn't reach ────────────────────────────────────────────
   zenitsv 2026-08-17: *"veo que hay cosas que la nueva GUI de Depths no cambia, tanto el boton de
   discord, la tienda, logros, el numero de estrellas, cuenta, y varias cosas se siguen viendo que aun
   siguen pareciendo al de Moderno … tienes que evitar ese neon cyberpunk, ademas … dales un ordenado mucho
   mas moderno, corporativo"*.
   These are built in JS with INLINE styles (#b0/#b1 carry their own border-radius and border) and several
   ride `.radiantColorBackground`, the animated rainbow — which is the neon he means. Inline styles beat a
   class, so every property that fights one is !important here and nowhere else. */
body.skin-depths #b0, body.skin-depths #b1, body.skin-depths #b2,
body.skin-depths #starBalance, body.skin-depths #starShop, body.skin-depths #achBtn,
body.skin-depths #shopPanel, body.skin-depths #achPanel, body.skin-depths #clanBtn, body.skin-depths #dailyBtn {
  background: var(--dp-face-2) !important;
  background-image: none !important;
  border: 1px solid var(--dp-edge) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--dp-ink) !important;
  font-family: var(--dp-font) !important;
  text-shadow: none !important;
  animation: none !important;          /* kills radiantColor + radiantBackground: no rainbow under Depths */
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.skin-depths #b0:hover, body.skin-depths #b1:hover, body.skin-depths #b2:hover,
body.skin-depths #starShop:hover, body.skin-depths #achBtn:hover, body.skin-depths #clanBtn:hover, body.skin-depths #dailyBtn:hover {
  background: var(--dp-tint) !important;
  border-color: var(--dp-ink) !important;
}
/* The gold is the one accent that stays, because it is INFORMATION — it marks a star value and an earned
   achievement. Desaturated to a brass so it reads as a stamped mark rather than as a glow. */
body.skin-depths #starBalance .sbStar,
body.skin-depths #shopHead,
body.skin-depths .achRow.achDone .achName { color: #c9a24a !important; }
body.skin-depths #shopHead { border-bottom: 1px solid var(--dp-hair) !important; }
body.skin-depths #achPanelHead { border-bottom: 1px solid var(--dp-hair) !important; }
/* Corporate ordering: rows are a list with hairline rules and tabular figures, not floating cards. */
body.skin-depths .achRow, body.skin-depths .shopRow {
  border-bottom: 1px solid var(--dp-hair);
  font-family: var(--dp-font) !important;
  font-weight: 300 !important;
  font-variant-numeric: tabular-nums;
}
body.skin-depths .achRow:last-child, body.skin-depths .shopRow:last-child { border-bottom: none; }
body.skin-depths #achBtnCount, body.skin-depths #achPanelCount { color: var(--dp-muted) !important; font-weight: 300 !important; }

/* ── ELEGANT + DEPTHS: the last of the neon green ─────────────────────────────────────────────────────
   zenitsv 2026-08-17: *"al hacer hover sobre los botones de por clasificacion del leaderboard y esos,
   tambien el de pestañas de modos siguen verdes, la de informacion tambien usa un verde neon que no me
   gusta … tambien pasa con el modo de Depths Of Retris"*.
   Everything below is a hardcoded `#2ee6c6` / `#37f0a6` from the Modern sheet that no skin had claimed:
   the mode-tab pill and its bloom, the sliding row bar, the leaderboard hover outline and score bar, the
   changelog date chip and bullets, and the info line under the server select.
   Scoped BY CONTAINER wherever the markup allows, for the reason the server-browser block above gives —
   a hand-listed sweep has now missed something three times. Both skins get the same rules with their own
   token set, kept adjacent so the next edit cannot fix one and forget the other. */

/* ---- ELEGANT ---- */
body.skin-elegant .sbTab.sbActive {
  background: var(--qz-tint-2) !important;
  border-color: var(--qz-edge) !important;
  color: var(--qz-ink) !important;
}
body.skin-elegant .sbInd {
  background: var(--qz-tint-2) !important;
  border-color: var(--qz-edge) !important;
  box-shadow: none !important;
  border-radius: var(--qz-radius) !important;
}
body.skin-elegant .sbInd::after { display: none !important; }   /* the bloom IS the neon */
body.skin-elegant .sbRowInd {
  background: var(--qz-tint) !important;
  box-shadow: inset 0 0 0 1px var(--qz-tint-2) !important;
  border-radius: var(--qz-radius) !important;
}
body.skin-elegant .lbRow:hover { outline: 1px solid var(--qz-tint-2) !important; }
body.skin-elegant .lbBar { background: linear-gradient(90deg, var(--qz-tint-2), transparent) !important; }
body.skin-elegant .clDate {
  background: var(--qz-tint-2) !important; color: var(--qz-ink) !important;
  border-radius: var(--qz-radius) !important;
}
body.skin-elegant .clItem::before { background: var(--qz-muted) !important; }
body.skin-elegant .clSub::before  { background: var(--qz-tint-2) !important; }
body.skin-elegant #serverSelectLowerText { color: var(--qz-muted) !important; }
body.skin-elegant #creditsContent > div:hover { background: var(--qz-tint) !important; }
body.skin-elegant #creditsContent > div > span:last-child { color: var(--qz-ink) !important; }

/* ---- DEPTHS ---- */
body.skin-depths .sbTab.sbActive {
  background: var(--dp-tint-2) !important;
  border-color: var(--dp-ink) !important;
  color: var(--dp-ink) !important;
}
body.skin-depths .sbInd {
  background: var(--dp-tint-2) !important;
  border: 1px solid var(--dp-edge) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.skin-depths .sbInd::after { display: none !important; }
body.skin-depths .sbRowInd {
  background: var(--dp-tint) !important;
  box-shadow: inset 0 0 0 1px var(--dp-tint-2) !important;
  border-radius: 0 !important;
}
body.skin-depths .sbTab { border-radius: 0 !important; }
body.skin-depths .sbRow { border-radius: 0 !important; }
body.skin-depths .sbRow:hover { background: var(--dp-tint) !important; }
body.skin-depths .sbRow.sbSel {
  background: var(--dp-tint-2) !important;
  box-shadow: inset 2px 0 0 var(--dp-ink) !important;
}
body.skin-depths .sbName  { color: var(--dp-ink) !important; font-weight: 300 !important; letter-spacing: .06em; }
body.skin-depths .sbCount { color: var(--dp-muted) !important; font-weight: 300 !important; }
body.skin-depths .sbDot   { background: #4a7f72 !important; box-shadow: none !important; }  /* a status light, not neon */
body.skin-depths .sbEmpty { color: var(--dp-muted) !important; }
body.skin-depths .lbRow:hover { outline: 1px solid var(--dp-tint-2) !important; }
body.skin-depths .lbBar { background: linear-gradient(90deg, var(--dp-tint-2), transparent) !important; }
body.skin-depths .clDate {
  background: var(--dp-tint-2) !important; color: var(--dp-ink) !important; border-radius: 0 !important;
}
body.skin-depths .clItem::before { background: var(--dp-muted) !important; }
body.skin-depths .clSub::before  { background: var(--dp-tint-2) !important; }
body.skin-depths #serverSelectLowerText { color: var(--dp-muted) !important; }
body.skin-depths #creditsContent > div:hover { background: var(--dp-tint) !important; }
body.skin-depths #creditsContent > div > span:last-child { color: var(--dp-ink) !important; }
body.skin-depths .clCard {
  background: var(--dp-face-2) !important; border: 1px solid var(--dp-hair) !important; border-radius: 0 !important;
}

/* ── THE PRIVATE-SERVER FLOW, IN EVERY SKIN ───────────────────────────────────────────────────────────
   zenitsv 2026-08-17: *"Los hovers de los botones de Clasificacion e Informacion aun hacen ese cambio a
   ese verde cyberpunk … el de crear server y todo eso tienen aun ese verde … tambien debes de arreglar el
   estilo para cuando quieres crear un nuevo servidor, porque el estilo choca demasiado, debes de hacerlo
   como el de elegante, tambien para los otros estilos"*.

   ⚠️ WHY THE SKINS LOST THIS ONE. `#credits .input:hover` is (1 id, 1 class, 1 pseudo) and
   `body.skin-elegant .input:hover` is (0 ids, 3 classes) — an id beats any number of classes, so the skin
   rule never applied no matter how many !importants it carried. The fix is to match the id scope, not to
   shout louder. Same trap as the inline-style one; specificity, not ordering.

   The purchase card (.authCard / .bp*) was never skinned at all, so it stayed a Modern dark-blue panel
   floating over quartz. It is styled per skin below rather than once, because a card that reads right on
   graphite reads wrong on pale stone. */

/* ---- ELEGANT ---- */
body.skin-elegant #credits .input:hover,
body.skin-elegant #featured .input:hover,
body.skin-elegant #channel .input:hover {
  color: var(--qz-ink) !important;
  background: var(--qz-tint-2) !important;
}
body.skin-elegant #credits .input,
body.skin-elegant #featured .input,
body.skin-elegant #channel .input {
  background: var(--qz-face-2) !important;
  color: var(--qz-muted) !important;
  border: 1px solid var(--qz-edge) !important;
  border-radius: var(--qz-radius) !important;
  font-weight: 400 !important;
}
body.skin-elegant .sbBuy {
  background: var(--qz-tint-2) !important;
  color: var(--qz-ink) !important;
  border: 1px solid var(--qz-edge) !important;
  border-radius: var(--qz-radius) !important;
}
body.skin-elegant .sbBuy:hover { filter: none; background: var(--qz-tint) !important; }
body.skin-elegant .authCard {
  background: var(--qz-face) !important;
  border: 1px solid var(--qz-edge) !important;
  border-radius: var(--qz-radius) !important;
  box-shadow: var(--qz-shadow) !important;
  font-family: var(--qz-font);
}
body.skin-elegant .authCard, body.skin-elegant .authCard *,
body.skin-elegant .authTitle, body.skin-elegant .authLabel,
body.skin-elegant .authFieldLabel, body.skin-elegant .bpDur, body.skin-elegant .bpRange,
body.skin-elegant .bpCfgTitle, body.skin-elegant .bpCfgRow label { color: var(--qz-ink) !important; }
body.skin-elegant .authInput, body.skin-elegant .bpSel, body.skin-elegant .bpCfgIn {
  background: var(--qz-face-2) !important;
  border: 1px solid var(--qz-edge) !important;
  border-radius: var(--qz-radius) !important;
  color: var(--qz-ink) !important;
  font-family: var(--qz-font);
}
body.skin-elegant .bpSel option { background: #eeecf3; color: #232a3a; }
body.skin-elegant.skin-elegantdark .bpSel option { background: #222127; color: #e6e4ea; }
body.skin-elegant .authBtn { border-radius: var(--qz-radius) !important; font-weight: 400 !important;
  text-transform: uppercase; letter-spacing: .12em; }
body.skin-elegant .authSubmit {
  background: var(--qz-tint-2) !important; color: var(--qz-ink) !important;
  border: 1px solid var(--qz-edge) !important;
}
body.skin-elegant .authCancel {
  background: var(--qz-face-2) !important; color: var(--qz-muted) !important;
  border: 1px solid var(--qz-edge) !important;
}
body.skin-elegant .bpTier, body.skin-elegant .bpTierCard {
  background: var(--qz-face-2) !important;
  border: 1px solid var(--qz-edge) !important;
  border-radius: var(--qz-radius) !important;
}
body.skin-elegant .bpTier:hover { border-color: var(--qz-ink) !important; }
body.skin-elegant .bpTierSel {
  border-color: var(--qz-ink) !important;
  background: var(--qz-tint) !important;
}
body.skin-elegant .bpTierSel .bpTierRate, body.skin-elegant .bpTier span,
body.skin-elegant .bpTierRate, body.skin-elegant .bpCost { color: var(--qz-ink) !important; }
body.skin-elegant .bpTierFeats li { border-top: 1px solid var(--qz-hair) !important; font-weight: 400 !important; }
/* yes / no stay coloured — they are the comparison, which is what the card is FOR. Muted to the palette. */
body.skin-elegant .bpTierFeats .bpFeatYes { color: #3f8f70 !important; }
body.skin-elegant .bpTierFeats .bpFeatNo  { color: #a86b6b !important; }

/* ---- DEPTHS ---- */
body.skin-depths #credits .input:hover,
body.skin-depths #featured .input:hover,
body.skin-depths #channel .input:hover {
  color: var(--dp-ink) !important;
  background: var(--dp-tint) !important;
}
body.skin-depths #credits .input,
body.skin-depths #featured .input,
body.skin-depths #channel .input {
  background: var(--dp-face-2) !important;
  color: var(--dp-muted) !important;
  border: 1px solid var(--dp-edge) !important;
  border-radius: 0 !important;
  font-weight: 300 !important;
  text-transform: uppercase;
  letter-spacing: .12em;
}
body.skin-depths .sbBuy {
  background: var(--dp-face-2) !important;
  color: var(--dp-ink) !important;
  border: 1px solid var(--dp-edge) !important;
  border-radius: 0 !important;
  font-weight: 300 !important;
  text-transform: uppercase;
  letter-spacing: .16em;
}
body.skin-depths .sbBuy:hover { filter: none; background: var(--dp-tint) !important; border-color: var(--dp-ink) !important; }
body.skin-depths .authCard {
  background: var(--dp-face) !important;
  border: 1px solid var(--dp-edge) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--dp-font);
}
body.skin-depths .authCard, body.skin-depths .authCard *,
body.skin-depths .authTitle, body.skin-depths .authLabel,
body.skin-depths .authFieldLabel, body.skin-depths .bpDur, body.skin-depths .bpRange,
body.skin-depths .bpCfgTitle, body.skin-depths .bpCfgRow label { color: var(--dp-ink) !important; }
body.skin-depths .authInput, body.skin-depths .bpSel, body.skin-depths .bpCfgIn {
  background: var(--dp-face-2) !important;
  border: 1px solid var(--dp-edge) !important;
  border-radius: 0 !important;
  color: var(--dp-ink) !important;
  font-family: var(--dp-font);
}
body.skin-depths .bpSel option { background: #1e1e1e; color: #e2e4e8; }
body.skin-depths .authBtn { border-radius: 0 !important; font-weight: 300 !important;
  text-transform: uppercase; letter-spacing: .16em; }
body.skin-depths .authSubmit {
  background: var(--dp-tint-2) !important; color: var(--dp-ink) !important;
  border: 1px solid var(--dp-ink) !important;
}
body.skin-depths .authCancel {
  background: var(--dp-face-2) !important; color: var(--dp-muted) !important;
  border: 1px solid var(--dp-edge) !important;
}
body.skin-depths .bpTier, body.skin-depths .bpTierCard {
  background: var(--dp-face-2) !important;
  border: 1px solid var(--dp-edge) !important;
  border-radius: 0 !important;
}
body.skin-depths .bpTier:hover { border-color: var(--dp-ink) !important; }
body.skin-depths .bpTierSel { border-color: var(--dp-ink) !important; background: var(--dp-tint) !important; }
body.skin-depths .bpTierSel .bpTierRate, body.skin-depths .bpTier span,
body.skin-depths .bpTierRate, body.skin-depths .bpCost { color: var(--dp-ink) !important; }
body.skin-depths .bpTierFeats li { border-top: 1px solid var(--dp-hair) !important; font-weight: 300 !important; }
body.skin-depths .bpTierFeats .bpFeatYes { color: #6f9a86 !important; }
body.skin-depths .bpTierFeats .bpFeatNo  { color: #a87a7a !important; }

/* ---- CLASSIC (and Light, which carries skin-classic) ---- */
body.skin-classic #credits .input:hover,
body.skin-classic #featured .input:hover,
body.skin-classic #channel .input:hover {
  color: var(--cl-text) !important;
  background: var(--cl-edge) !important;
}
body.skin-classic #credits .input,
body.skin-classic #featured .input,
body.skin-classic #channel .input {
  background: var(--cl-face) !important;
  color: var(--cl-muted) !important;
  border: 1px solid var(--cl-edge) !important;
  border-radius: 4px !important;
}
body.skin-classic .sbBuy {
  background: var(--cl-face) !important; color: var(--cl-text) !important;
  border: 1px solid var(--cl-edge) !important; border-radius: 4px !important;
}
body.skin-classic .sbBuy:hover { filter: none; background: var(--cl-edge) !important; }
body.skin-classic .authCard {
  background: var(--cl-face) !important;
  border: 1px solid var(--cl-edge) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
body.skin-classic .authCard, body.skin-classic .authCard *,
body.skin-classic .authTitle, body.skin-classic .authLabel,
body.skin-classic .authFieldLabel, body.skin-classic .bpDur, body.skin-classic .bpRange,
body.skin-classic .bpCfgTitle, body.skin-classic .bpCfgRow label { color: var(--cl-text) !important; }
body.skin-classic .authInput, body.skin-classic .bpSel, body.skin-classic .bpCfgIn {
  background: var(--cl-face) !important; border: 1px solid var(--cl-edge) !important;
  border-radius: 4px !important; color: var(--cl-text) !important;
}
body.skin-classic .authBtn { border-radius: 4px !important; }
body.skin-classic .authSubmit { background: var(--cl-edge) !important; color: var(--cl-text) !important; }
body.skin-classic .authCancel { background: var(--cl-face) !important; color: var(--cl-muted) !important; }
body.skin-classic .bpTier, body.skin-classic .bpTierCard {
  background: var(--cl-face) !important; border: 1px solid var(--cl-edge) !important; border-radius: 4px !important;
}
body.skin-classic .bpTier:hover { border-color: var(--cl-text) !important; }
body.skin-classic .bpTierSel { border-color: var(--cl-text) !important; background: var(--cl-edge) !important; }
body.skin-classic .bpTierSel .bpTierRate, body.skin-classic .bpTier span,
body.skin-classic .bpTierRate, body.skin-classic .bpCost { color: var(--cl-text) !important; }
body.skin-classic .bpTierFeats li { border-top: 1px solid var(--cl-edge) !important; }

/* ── DEPTHS: the logged-in row, profile / save-code / Google buttons ──────────────────────────────────
   zenitsv 2026-08-17: *"se ven horribles esos botones modern en Depths, se ven raros la verdad"*.
   Elegant already claimed #loggedInAs and #profileBtn; Depths never did, so they kept the Modern rounded
   blue-bordered look with a neon account name. The save-code button has no id at all — it is a bare
   <button> appended to #panel — so it is reached the same way the Modern sheet reaches it. */
body.skin-depths #loggedInAs,
body.skin-depths #profileBtn,
body.skin-depths #googleBtn,
body.skin-depths #panel > button:not([id]) {
  background: var(--dp-face) !important;
  background-image: none !important;
  border: 1px solid var(--dp-edge) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
  font-family: var(--dp-font) !important;
  font-weight: 300 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dp-ink) !important;
  text-shadow: none !important;
  animation: none !important;
}
body.skin-depths #loggedInAs .liaLabel { color: var(--dp-muted) !important; font-weight: 300 !important; }
/* The account name is the one thing on this row worth reading, so it keeps weight where the rest loses it. */
body.skin-depths #loggedInAs #loggedInAsName { color: var(--dp-ink) !important; font-weight: 500 !important; }
body.skin-depths #profileBtn:hover,
body.skin-depths #googleBtn:hover,
body.skin-depths #panel > button:not([id]):hover {
  filter: none;
  background: var(--dp-tint) !important;
  border-color: var(--dp-ink) !important;
}

/* ================================================== IN-GAME LEADERBOARD, DEPTHS + THE FOLD ARROW ======
   zenitsv 2026-08-17: "el leaderboard se veo algo feo, arreglao" and "podria tener una flechita para
   colapsarlo … con un stagger de 0.1s entre cada barra". The fold itself is in script2.js (the .lbFold class
   and the per-row transition-delay); everything here is only how it looks.
   ⚠️ Same warning as the elegant block above: `.leaderboardEntry` / `.leaderboardBar` / `.leaderboardSlide`
   / `.leaderboardText` are the IN-GAME board. `.lbRow` and friends are the MAIN-MENU one. */
body.skin-depths #leaderboardTitle {
  font-family: var(--dp-font) !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  letter-spacing: .26em !important;
  text-transform: uppercase;
  color: var(--dp-ink) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  white-space: nowrap; overflow: hidden;
  border-bottom: 1px solid var(--dp-edge);
  padding-bottom: 4px;
}
/* Rows are a ledger, not a stack of pills: no radius, no fill, one hairline rule between entries. */
body.skin-depths .leaderboardEntry {
  border-radius: 0 !important;
  background: none !important;
  border-bottom: 1px solid var(--dp-hair) !important;
  font-weight: 300 !important;
  color: var(--dp-ink) !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
body.skin-depths .leaderboardBar {
  border-radius: 0 !important;
  width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important;
}
/* The score fill stays — rank at a glance is information — but desaturated to graphite so it reads as a
   measure rather than as the neon bar it is on the stock skin. */
body.skin-depths .leaderboardSlide {
  border-radius: 0 !important;
  filter: saturate(.18) brightness(.85);
  opacity: .45;
}
body.skin-depths .leaderboardText {
  font-family: var(--dp-font) !important;
  font-size: 13px !important; font-weight: 300 !important; letter-spacing: .05em;
  padding-top: 4px;
  color: var(--dp-ink) !important; text-shadow: none !important;
}

/* (The fold arrow's rules lived here and came out with the feature.) */

/* ================================================== LOADING SCREEN, PER STYLE ==========================
   zenitsv 2026-08-17: "cada cual necesito que te las ingenies para que la pantalla de carga se vea bien,
   y no se vea igual en todos los estilos". The stock screen — a blue-black vignette, a teal ring and a teal
   glow on the word — was the same in every style, and it is also the loudest surviving piece of the neon
   look. The stock version is left exactly as it is for Normal / Classic / Light; the two styles that have
   their own palette get their own screen.

   ---- QUARTZ ---------------------------------------------------------------------------------------
   No vignette: bright quartz loads onto its own stone, so the ground is the pale face with a faint warm
   lean at the centre, the way light sits in milky quartz. The ring loses its glow and becomes a hairline
   arc — at 400 weight a glowing ring next to thin type reads as two different designs on one screen. */
body.skin-elegant #connecting {
  font-family: var(--qz-font) !important;
  color: var(--qz-ink) !important;
  font-size: 26px !important;
  font-weight: 200 !important;
  letter-spacing: .32em !important;
  text-transform: uppercase;
  gap: 34px;
}
/* Opaque on purpose: --qz-face is a TRANSLUCENT white meant to sit over the menu's own page background,
   and this overlay sits over the game canvas, so borrowing it would let the dark field show through. These
   are the same two stone tones the quartz canvas uses (THEME_CANVAS.elegant), written out. */
body.skin-elegant #connecting::before {
  background: radial-gradient(900px 620px at 50% 42%, #f4f2f7, #e6e4ea);
}
body.skin-elegant .connSpin {
  width: 62px; height: 62px;
  border: 1.5px solid var(--qz-hair);
  border-top-color: var(--qz-ink);
  animation-duration: 1.15s;
}
body.skin-elegant .connLabel {
  text-shadow: none;
  animation: connPulse 2.4s ease-in-out infinite;   /* slower: the quartz screen should breathe, not blink */
}
body.skin-elegant #connectingSmall {
  font-family: var(--qz-font) !important;
  color: var(--qz-ink) !important;
  font-size: 34px !important; font-weight: 200 !important; letter-spacing: .2em;
  text-shadow: none !important;
}
/* The dark half of the same stone — --qz-* already flips, so only the ground needs saying. */
body.skin-elegant.skin-elegantdark #connecting::before {
  background: radial-gradient(900px 620px at 50% 42%, rgba(46,45,52,.9), rgba(20,20,23,.98));
}

/* ---- DEPTHS --------------------------------------------------------------------------------------
   Nothing round: the whole style is square, so a spinning circle is the one shape it cannot use. The ring
   becomes a square outline turning on its own centre, the label sits on a hairline rule, and the ground is
   flat graphite with no vignette at all — a vignette is a lens effect, and this style has no lens. */
body.skin-depths #connecting {
  font-family: var(--dp-font) !important;
  color: var(--dp-ink) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  letter-spacing: .42em !important;
  text-transform: uppercase;
  gap: 40px;
}
body.skin-depths #connecting::before {
  background: #1b1b1d;
}
body.skin-depths .connSpin {
  width: 54px; height: 54px;
  border-radius: 0;
  border: 1px solid var(--dp-hair);
  border-top-color: var(--dp-ink);
  border-right-color: var(--dp-ink);
  animation: connSpin 2.6s linear infinite;   /* slow, so a square turning does not read as a wobble */
}
body.skin-depths .connLabel {
  text-shadow: none;
  animation: none;                            /* a pulsing label is a glow by another name */
  padding-bottom: 10px;
  border-bottom: 1px solid var(--dp-edge);
}
body.skin-depths #connectingSmall {
  font-family: var(--dp-font) !important;
  color: var(--dp-ink) !important;
  font-size: 30px !important; font-weight: 300 !important; letter-spacing: .3em;
  text-shadow: none !important;
}

/* ---- FRUITS AND PEARS -----------------------------------------------------------------------------
   errorx002 / femaleexpie_official, gated by body.skin-fruits (account-only while this is built).
   Elegant and Depths each get their own connecting screen; Fruits inherited the DARK night-sky one,
   which is exactly why the loading screen still read as unfinished under this skin. This makes it a
   sunny orchard instead: a light meadow ground with a soft midday-sun glow (no dark vignette — an
   orchard at noon has no lens shadow), a round fruit-green ring, and deep leaf-green ink so the label
   reads on the pale field. Same override pattern the other two skins use. */
body.skin-fruits #connecting {
  color: #35502a !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  letter-spacing: 1px;
  gap: 30px;
}
body.skin-fruits #connecting::before {
  background: radial-gradient(920px 640px at 50% 30%, #f6f1d2, #d3e2a4 58%, #b0cd7c);
}
body.skin-fruits .connSpin {
  width: 72px; height: 72px;
  border: 6px solid rgba(107,160,80,.28);
  border-top-color: #6ba050;
  border-right-color: #8fc65b;   /* two greens so the turning arc reads leaf-like, not a plain hoop */
  animation-duration: 1s;
}
body.skin-fruits .connLabel {
  text-shadow: 0 2px 10px rgba(120,150,70,.35);
  animation: connPulse 2s ease-in-out infinite;   /* slow, like the other calm skins */
}
body.skin-fruits #connectingSmall {
  color: #35502a !important;
  text-shadow: 0 2px 12px rgba(120,150,70,.3) !important;
}

/* ================================================== HUD RELAYOUT (body.hudAlt) =========================
   zenitsv 2026-08-17. `hudAlt` is set by applySkin for any non-stock Interface Style, which is already
   account-gated, so nobody who did not ask for this layout gets it.
   STEP 1 — both stat columns on the right. The container's `right` is written inline every frame by the
   show/hide slide in drawFrame, so all this rule can do is release `left` and move the growth anchor; the
   inline `left` is cleared there too, in the same branch. */
body.hudAlt #statUpgradesLeft {
  left: auto;
  transform-origin: right bottom;
}

/* ---- STEP 2 — VITALS, bottom-left ------------------------------------------------------------------
   Health big, shield small and under it, both reading 0-100%. Hidden entirely off the alt HUD: the stock
   layout has never had a vitals panel and adding one there would be a change nobody asked for. */
#hudVitals { display: none; }
body.hudAlt #hudVitals {
  display: block;
  pointer-events: none;
  position: absolute;
  left: 14px;
  bottom: 14px;
  /* 300 -> 360 (errorx002 2026-09-02: *"que la barra de vida y de escudo de abajo sean mas largas,
     se ven algo cortas"*), then 360 -> 420 (errorx002 2026-09-08: "podrias alargar otro poco las barras
     de vida y escudo"). Widening the CONTAINER rather than the bars keeps the shield's 74% relative
     to it, and the 30deg bevel is derived from each bar's height so neither cut skews. */
  width: 420px;
  transform-origin: left bottom;
  z-index: 35;
}
#hvHealth, #hvShield {
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,.55);
}
/* The health bar is the one you read in a fight, so it gets the height and the number. */
#hvHealth { height: 26px; }
/* Shield ON TOP, health under it, shield still the smaller of the two (zenitsv 2026-08-17). The order is
   the markup's — #hvShield is written first — so nothing here has to fight it. */
#hvShield { height: 11px; width: 74%; margin-bottom: 5px; }
/* The bevel is on the RIGHT END ONLY — square left edge, full-width bottom, the top edge running most of the
   way across and then falling to the bottom-right corner (zenitsv 2026-08-17, replacing the symmetric
   trapezoid he'd asked for the day before; he sent the outline). The left edge has to stay square because
   that is where the fill starts: an angled left edge makes a full bar and a 97% bar look identical.

   ⚠️ THE CUT IS DEFINED BY ITS ANGLE, NOT BY A PERCENTAGE OF THE WIDTH (errorx002 2026-08-21: *"la orilla
   de punta debe tener 30° en ambos aun por estiramiento o altura"*). The first version wrote 74% / 82%,
   two numbers hand-solved so that a 26px bar over 300px and an 11px bar over 62% of 300px happened to land
   on the same slope — which was ~18°, and which stops being true the moment either bar's height or width
   changes. A percentage run over a fixed height IS an angle that moves with the width.
   So the run is derived from the bar's own height instead: for a rise `h` at angle `a` from the horizontal,
   run = h / tan(a), and 1/tan(30°) = 1.7320508. Both bars now cut at exactly 30° whatever their height, and
   stretching the panel cannot skew them apart. --hv-h must match the element's height, and is the only
   number to touch if a bar is resized. */
#hvHealth, #hvShield {
  --hv-k: 1.7320508;                                  /* 1 / tan(30deg) */
  --hv-bev: calc(var(--hv-h) * var(--hv-k));
  clip-path: polygon(0 0, calc(100% - var(--hv-bev)) 0, 100% 100%, 0 100%);
}
#hvHealth { --hv-h: 26px; }
#hvShield { --hv-h: 11px; }
#hvHealthFill, #hvShieldFill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%;
  transform-origin: left center;
  will-change: transform;
}
#hvHealthFill { background: #cf3b46; }
#hvShieldFill { background: #dfe4ea; }
/* The lag / "chip" segment (zenitsv 2026-08-17: "suaviza la barra de salud cuando pierdes vida"). Same
   geometry as the fill and BEHIND it in DOM order, so what shows is the strip between the two — where the
   bar just was. Drives on scaleX from drawFrame like everything else in this panel; no width writes.
   Its own colour per style, because a pale chip on a pale bar is invisible. */
#hvHealthLag {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%;
  transform-origin: left center;
  will-change: transform;
  background: rgba(255,255,255,.62);
}
body.skin-depths #hvHealthLag { background: rgba(224,189,122,.55); }
body.skin-elegant #hvHealthLag { background: rgba(46,230,198,.62); }
body.skin-classic #hvHealthLag { background: rgba(235,235,240,.55); }
body.skin-classic.skin-light #hvHealthLag { background: rgba(255,255,255,.85); }
#hvHealthText {
  position: absolute; inset: 0;
  line-height: 26px;
  text-align: center;
  font-size: 15px;
  color: #fff;
}
#hvShieldText {
  position: absolute; inset: 0;
  line-height: 11px;
  text-align: center;
  font-size: 8px;
  letter-spacing: .22em;
  color: rgba(0,0,0,.62);
}

/* Quartz: the same panel in stone. */
body.skin-elegant #hvHealth, body.skin-elegant #hvShield {
  background: var(--qz-tint-2, rgba(0,0,0,.12));
  border: 1px solid var(--qz-hair);
}
body.skin-elegant #hvHealthText { color: var(--qz-ink); font-family: var(--qz-font); font-weight: 400;
  text-shadow: none; -webkit-text-stroke: 0; letter-spacing: .12em; }
body.skin-elegant #hvShieldText { color: var(--qz-muted); font-family: var(--qz-font); }

/* Depths: square, graphite, hairline — and the shield in the same near-white the armour line uses. */
body.skin-depths #hudVitals { left: 12px; bottom: 12px; }
body.skin-depths #hvHealth, body.skin-depths #hvShield {
  background: var(--dp-face);
  border: 1px solid var(--dp-edge);
  border-radius: 0;
}
body.skin-depths #hvHealthFill { background: #8f3038; }
body.skin-depths #hvShieldFill { background: var(--dp-ink); }
body.skin-depths #hvHealthText {
  color: var(--dp-ink); font-family: var(--dp-font); font-weight: 300;
  letter-spacing: .2em; text-shadow: none; -webkit-text-stroke: 0;
}
body.skin-depths #hvShieldText { color: #1b1b1d; font-family: var(--dp-font); }

/* Tankcore / nightmarecore vitals (errorx002 2026-09-21): the Depths health+shield layout, but made WRONG.
   He asked for the Depths bars "pero con otro orden de los elementos, colores raros, sin esquinas redondeadas,
   que se sienta incomodo". So: the two bars are swapped (health ON TOP of shield via column-reverse), the 30°
   bevel is killed for hard rectangles, corners are square, the fills clash (dusty magenta health / overexposed
   cyan shield), and the whole panel is tilted a hair so it never sits square. Tankcore always forces body.hudAlt
   (see __refreshHudAlt), so scoping to .hudAlt mirrors Depths' own visibility exactly. */
body.hudAlt:is(.skin-tankcore, .theme-tankcore) #hudVitals {
  display: flex !important;                     /* was block; flex is what lets column-reverse swap the bars */
  flex-direction: column-reverse !important;    /* markup is shield-then-health -> health ends up on top */
  gap: 6px;
  rotate: -1.4deg;                              /* off-true, uneasy — matches the tilted menu panels */
}
body:is(.skin-tankcore, .theme-tankcore) #hvHealth,
body:is(.skin-tankcore, .theme-tankcore) #hvShield {
  clip-path: none !important;                   /* kill the 30° bevel -> blunt rectangle */
  border-radius: 0 !important;                  /* square, nightmarecore */
  border: 2px solid var(--tc-edge) !important;
  background: rgba(20,40,34,.55) !important;    /* murky teal-black trough */
}
body:is(.skin-tankcore, .theme-tankcore) #hvHealthFill { background: #f4f7ef !important; }            /* white (errorx002 09-21) */
body:is(.skin-tankcore, .theme-tankcore) #hvShieldFill { background: #176b34 !important; }            /* dark green (errorx002 09-21) */
body:is(.skin-tankcore, .theme-tankcore) #hvHealthLag  { background: rgba(195,216,74,.5) !important; } /* bilious-green chip */
/* Health text is DARK now (the fill is white) but the trough behind it is dark — so a white glow keeps the
   number readable over BOTH the white fill (full) and the dark trough (low). */
body:is(.skin-tankcore, .theme-tankcore) #hvHealthText {
  color: #12241c !important; font-family: var(--tc-font) !important; letter-spacing: .14em;
  text-shadow: 0 0 3px rgba(255,255,255,.95), 0 1px 1px rgba(255,255,255,.8) !important; -webkit-text-stroke: 0 !important;
}
/* Shield text is LIGHT now (the fill is dark green). */
body:is(.skin-tankcore, .theme-tankcore) #hvShieldText { color: #eaf3e2 !important; font-family: var(--tc-font) !important; }

/* ---- DEPTHS VITALS: the heartbeat, and a bloom that is allowed to leave the bar ---------------------
   errorx002 2026-08-21: *"agrega eso de la linea que aparece por la barra que parece los latidos, ademas,
   bloom a la barra de vida y a la de escudo, pero que sea sutil"*. It is the one style whose time label
   already reads "Time your heart beat", so an ECG belongs to it and to nothing else.

   THE READER LINE is one gradient moved by background-position -- no per-frame layout, no second element,
   and nothing the compositor cannot handle. It sits at z-index 1: above the fill (which is unpositioned in
   the z sense, so it paints at auto) and below the percentage, which is pushed to 2. Without those two the
   ::after would cover the number, because a pseudo-element is the LAST child in paint order.

   ⚠ IT IS NOT A CSS ANIMATION, AND IT MUST NOT BECOME ONE (errorx002 2026-08-21: *"como que la animacion
   se reinicia"*). The first ECG ran animation: hvEkg var(--hv-bpm) and rewrote the duration as health
   changed. Changing animation-duration mid-flight does not restart the animation, but it DOES recompute
   where the current iteration is, so every write teleports it -- and health moves constantly in a fight.
   Quantising the duration only turned a continuous stutter into a rhythmic one. The position is written
   per frame from drawFrame instead. --hv-x is that position; the 0% fallback is what a browser sees before
   the first frame writes one.

   ⚠ WHY A PERCENTAGE BACKGROUND-POSITION AND NOT `left`. With background-size under 100%, a percentage
   position aligns the image's own p% point with the box's p% point -- so 0% puts the head flush against
   the left edge with the whole tail inside the bar, and 100% puts it flush against the right, with no
   clipping and no negative offsets to work out. Animating `left` on a positioned child would do the same
   job but costs a layout pass per frame; this is a paint-only change on a pseudo-element.
   The 34% tail is the sweep's history. Its head is the near-white stop at 99%: the gradient ends in
   transparent one stop later so the leading edge is a hard line and the trailing edge is a fade, which is
   what makes the direction readable. */
body.skin-depths #hvHealth::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Two multiplied factors, not one opacity. --hv-b is how loud the line is (it doubles below 30%, see
     the .hvLow rule); --hv-o is the per-sweep fade the JS writes, which is what stops the line popping
     into existence at the left edge and vanishing at the right. Multiplying keeps them independent --
     the low-health boost applies to the faded ends too, instead of overriding them. */
  opacity: calc(var(--hv-b, .34) * var(--hv-o, 1));
  background-repeat: no-repeat;
  background-position: var(--hv-x, 0%) center;
  background-size: 34% 100%;
  /* ⚠ THE HEAD FALLS OFF OVER 4%, NOT OVER 1%. The old .95 -> 0 across 99%..100% is a one-pixel cliff at
     the brightest point of the gradient, so the very front of the line had a hard edge that survived any
     amount of fading at the ends -- the second half of what read as "tosca". The peak also moved back off
     the boundary (96%) so the falloff has somewhere to happen. */
  /* ⚠ THE COLOUR IS A BARE r,g,b TRIPLE IN A VARIABLE, not a full colour. rgba() takes its channels as
     separate tokens and var() substitutes at the token level, so --hv-c can carry "226,228,232" and each
     stop keeps its own alpha. A var holding rgb(...) could not be given a per-stop alpha at all.
     drawFrame swings it red while health is falling (errorx002: *"estaria mejor que fuera roja cuando la
     vida va bajando"*) and the transition below carries it back rather than cutting. */
  transition: opacity .2s linear;
  background-image: linear-gradient(90deg,
    rgba(var(--hv-c, 226,228,232),0) 0%,
    rgba(var(--hv-c, 226,228,232),.08) 52%,
    rgba(var(--hv-c, 226,228,232),.40) 86%,
    rgba(var(--hv-cb, 255,255,255),.95) 96%,
    rgba(var(--hv-cb, 255,255,255),.55) 98.5%,
    rgba(var(--hv-c, 226,228,232),0) 100%);
}
body.skin-depths #hvHealthText { z-index: 2; }
/* ⚠ --hv-b IS WRITTEN BY drawFrame NOW, AS A CURVE. There used to be a .hvLow::after { --hv-b: .60 }
   step here, doubling the line's brightness under 30%. It was removed rather than left in place, because
   the curve has to come back DOWN near zero (errorx002: at 1% it should be *"casi nada"*) and a stylesheet
   step can only ever push it up. The .34 in the calc() above survives only as the pre-first-frame default. */
/* Reduced motion parks the line at the left edge rather than hiding it -- the reader is information about
   the style, the sweeping is the part that moves. The JS skips its accumulator when this matches, so
   --hv-x never changes and this rule is only here to cover the first frame. */
@media (prefers-reduced-motion: reduce) {
  body.skin-depths #hvHealth::after { background-position: 0% center }
}

/* THE BLOOM has to go on the PARENT. #hvHealth carries the clip-path, and clip-path is applied after the
   element's own filter and after its box-shadow — so a glow set on the bar itself is cut off at exactly the
   bevel it is supposed to spill past, which looks like a rendering bug rather than light. A drop-shadow on
   #hudVitals filters the already-clipped result of both children, so the halo traces the 30° silhouette.
   Two stacked shadows: a tight warm one for the health bar and a wider colourless one that reads on the
   near-white shield without tinting it. Kept low — he asked for subtle, and Depths has no glow anywhere
   else, so this is the exception that has to earn itself. */
body.skin-depths #hudVitals {
  filter: drop-shadow(0 0 5px rgba(143,48,56,.42)) drop-shadow(0 0 11px rgba(226,228,232,.10));
}
/* A flat fill is what made these read as placeholder rectangles. One hairline of light along the top edge
   and a barely-there falloff downward is enough to make them objects; it is the same treatment the panels
   in this style already get, so nothing new is being introduced to the look. */
body.skin-depths #hvHealthFill {
  background: linear-gradient(180deg, #a3373f 0%, #8f3038 46%, #7c2930 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
body.skin-depths #hvShieldFill {
  background: linear-gradient(180deg, #f2f4f8 0%, var(--dp-ink) 60%, #c9ccd2 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
}

/* ---- VITALS: TEAM TINT, HEAL/DAMAGE FLASH, RADIANT BLOOM (errorx002 2026-09-02) ------------------
   ⚠ THIS BLOCK MUST STAY BELOW body.skin-depths #hvHealthFill / #hvShieldFill. It was first placed above
   them and the Depths gradient silently won on equal specificity, so the team colour did nothing in that
   skin — which is exactly the skin he was testing in. Do not move it back up.
   drawFrame supplies the four state classes; everything about how they LOOK is decided here, per skin.

   ⚠ THE TEAM TINT WAS BUILT, SHIPPED, AND THEN PULLED (errorx002 2026-09-02, an hour apart: first
   *"la barra de salud de abajo cambia de color dependiendo equipo"*, then, seeing it: *"dejalo rojo la
   barra de vida ... que cambie de color como que luego no pega mucho"*). The health bar is RED, in every
   skin, on every team. Deliberately not left in behind a disabled flag -- a second colour source for this
   fill is the exact bug that made the first version invisible in Depths.
   --hv-team is no longer written by drawFrame either; if it comes back, it comes back on purpose.
   What survives from that pass is the heal/damage blend below, which is worth keeping on its own. */

/* HEAL / DAMAGE. Green while it climbs, red while it falls; the shield uses white for the climb because
   the shield itself is white and green on it read as a different bar entirely (his call, and correct).
   ⚠ The transition is on the FILL's background only. #hvHealthFill also carries a scaleX transform that
   drawFrame writes every frame -- putting `transition: all` here would smear the bar's LENGTH behind the
   real value and make the whole panel feel laggy. Name the property.
*/
#hvHealthFill, #hvShieldFill { transition: background .34s cubic-bezier(0.33, 0, 0.2, 1), box-shadow .34s ease; }
/* ⚠ THE FILL'S COLOUR IS NO LONGER TOUCHED BY EITHER STATE, AND THAT IS THE WHOLE FIX.
   Two rewrites of this recoloured #hvHealthFill itself -- first a flat swap, then a 55% blend -- and both
   read as harsh, because recolouring the bar is a whole-screen event for something as ordinary as a regen
   tick. It also made heal and damage MUTUALLY EXCLUSIVE: one background, one winner. That is exactly the
   bug he reported separately -- *"si recibes dano cuando estas curando, la barra se torna roja por medio
   segundo porque has perdido el efecto de regeneracion"*. It was not a timing bug to be tuned out; two
   states were fighting over one property, so one of them had to lose.
   They now live on DIFFERENT ELEMENTS and compose: regen is a moving overlay on ::before, damage is the
   lag chip behind the fill. Healing while being hit shows both at once, which is what is actually true. */

/* REGEN -- a light travelling along the healed part of the bar. Motion is the point: he said a blink reads
   as *"parpadea como si nada"*, and something regenerating should look like it is being filled.
   ⚠ ON THE BAR, NOT ON THE FILL. #hvHealthFill is scaleX'd every frame, so anything drawn on it is
   stretched horizontally by the current health -- a gradient that is 38% wide at full HP would be 380%
   wide at 10%, and the travelling highlight would visibly change size as you take damage. The bar is not
   scaled, so the overlay keeps its shape and is instead CLIPPED to the filled portion via --hv-hp. */
@keyframes hvRegen { to { background-position: 200% 0 } }
#hvHealth::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .34s ease;
  clip-path: inset(0 calc((1 - var(--hv-hp, 1)) * 100%) 0 0);
  background-repeat: repeat-x;
  background-size: 200% 100%;
  background-image: linear-gradient(100deg,
    rgba(58,210,154,0)    0%,
    rgba(58,210,154,.10) 16%,
    rgba(140,255,212,.58) 30%,
    rgba(58,210,154,.10) 44%,
    rgba(58,210,154,0)   62%);
  animation: hvRegen 1.5s linear infinite;
}
#hvHealth.hvHeal::before { opacity: 1 }
/* The readout has to clear BOTH pseudo-elements -- ::before is regen, ::after is the Depths reader line. */
#hvHealthText { z-index: 3 }
#hvShield.hvSHeal #hvShieldFill { box-shadow: 0 0 8px rgba(255,255,255,.60) }

/* DAMAGE -- the chip already existed and already drained smoothly; it just did not look like damage.
   It goes hot the moment you are hit and cools back over .45s as it drains, so the hit has a shape
   instead of being a flat pale block. No rule here touches the fill. */
#hvHealthLag { transition: background .45s ease, box-shadow .45s ease }
#hvHealth.hvHurt #hvHealthLag {
  background: linear-gradient(180deg, rgba(255,236,236,.95) 0%, rgba(255,128,138,.86) 100%);
  box-shadow: 0 0 9px rgba(255,90,105,.60);
  transition: background .06s linear, box-shadow .06s linear;
}

/* RADIANT BLOOM. body.radiantMe is set from drawFrame off me.radiant.
   ⚠ ON THE CONTAINERS, NOT THE BARS. #hvHealth carries a clip-path in Depths, and clip-path is applied
   AFTER the element's own filter -- a glow set on the bar is cut off at the exact bevel it is meant to
   spill past, which reads as a rendering fault rather than as light. Filtering the parent filters the
   already-clipped result, so the halo traces the silhouette. Same reason the Depths bloom sits on
   #hudVitals; this stacks with it rather than fighting it. */
/* ⚠ THE VITALS DO NOT TURN GOLD (errorx002 2026-09-02: *"el bloom de la barra de vida y barra de escudo
   no cambia si tienes radiant, solo brilla segun su color (blanco para escudo y rojo para la barra)"*).
   The score and next-level bars below DO go radiant-gold, and that split is the point: those two are
   about your progression, which is what radiant modifies, while the vitals are about your health, which
   it does not. A gold health bar also fights the low-health red it has to stay readable against.
   ⚠ THE GLOW IS ON A WRAPPER, AND IT HAS TO BE. #hvHealth / #hvShield carry the 30deg clip-path, and
   Chromium applies clip-path AFTER filter -- so a drop-shadow set on the bar itself is generated and then
   clipped entirely away. Measured, not assumed: a 200x26 clipped div with two 1.0-alpha red drop-shadows
   screenshots pure #000 at every sample point outside the bar. It is a silent no-op, which is worse than
   a visible mistake -- it would have shipped looking like the request was done.
   An outer box-shadow on the FILL is no better: overflow:hidden on the bar clips it, and at 100% health
   the fill spans the whole bar so there is no edge left for it to show on.
   #hvHealthGlow / #hvShieldGlow are unclipped, so the shadow is cast from the already-clipped bar and
   follows the 30deg bevel exactly. They are layout-transparent (plain blocks, no width of their own) so
   the shield keeps its 74% of the panel and nothing moves.
   ⚠ Two wrappers, not one on #hudVitals: a single filter there can only carry one colour, and the whole
   point of the request is that these two bars glow in DIFFERENT colours. */
body.radiantMe #hvHealthGlow {
  filter: drop-shadow(0 0 6px rgba(207,59,70,.80)) drop-shadow(0 0 14px rgba(207,59,70,.40));
}
body.radiantMe #hvShieldGlow {
  filter: drop-shadow(0 0 5px rgba(255,255,255,.75)) drop-shadow(0 0 12px rgba(255,255,255,.38));
}
body.radiantMe #tankScore, body.radiantMe #tankPartialLevel {
  filter: drop-shadow(0 0 5px rgba(255,213,74,.50)) drop-shadow(0 0 12px rgba(255,213,74,.24));
}
@media (prefers-reduced-motion: reduce) {
  #hvHealthFill, #hvShieldFill { transition: none; }
}


/* ---- STEP 3 — name / level / score / next-level beside the minimap ---------------------------------
   zenitsv: "el nombre, nivel, score y el score necesario para subir de nivel, deberia estar al lado del
   minimapa". The minimap is 180px wide at left:10px, and it grows to 1.25x on hover from its top-left
   corner, so the column starts past 10 + 180*1.25 = 235px and can never be swept by that. */
body.hudAlt #tankName,
body.hudAlt #tankLevel,
body.hudAlt #tankScore,
body.hudAlt #tankPartialLevel {
  left: 244px;
  bottom: auto;
  transform: none;
}
body.hudAlt #tankName        { top: 8px;   font-size: 24px; text-align: left; width: auto; }
body.hudAlt #tankLevel       { top: 38px;  font-size: 15px; text-align: left; }
/* The two bars keep their own internal geometry — #tankScoreBar / #tankLevelBar are driven inline every
   frame in px against these widths — so only the box moves and its width stays what the script expects. */
body.hudAlt #tankScore       { top: 60px;  }
body.hudAlt #tankPartialLevel{ top: 94px;  }

/* ---- STEP 4 — both upgrade grids up the left edge, smaller boxes -----------------------------------
   "los cuadros de mejoras de tanque deberian ser mas pequeños, y los cuerpos deberian estar arriba de las
   armas, en la parte izquierda". The grid pitch (98px vs 140px) is page.upgGrid() in script2.js; these are
   the box's own dimensions, which have to match that pitch or the boxes collide.
   Weapons clear the vitals panel at the bottom (26 + 5 + 11 + 14 ~= 56px), bodies sit one full 3-row grid
   above the weapons: 78 + 3*98 = 372. */
body.hudAlt .upgradeBox {
  width: 84px;
  height: 84px;
  border-width: 4px;
}
body.hudAlt .weaponUpgrades { bottom: 78px; }
body.hudAlt .bodyUpgrades {
  bottom: 372px;
  right: auto;
  /* Parked off-screen on the LEFT now, so the slide-in has somewhere to come from; the script writes
     left: 10px a moment later. Without this the panel has neither edge set and simply appears in place. */
  left: -450px;
  transform-origin: left bottom;
}
/* Bodies now hang off the LEFT edge, so they take the weapon grid's entrance and exit rather than the
   mirrored ones — the keyframes bake in which way a box is nudged. */
body.hudAlt .bodyUpgrades.upgStagger .upgradeBox { animation-name: upgPopL; }
body.hudAlt .bodyUpgrades.upgOut .upgradeBox { animation-name: upgOutL; }

/* ---- STEP 5 — the upgrade buttons, "un poco mas cinematico" ----------------------------------------
   zenitsv 2026-08-17: "los botones de mejora de tanque podrian ser un poco mas cinematicos, pero
   respetando el estilo de la GUI". Cinematic here means staging, not sparkle: a card that lifts, a name that
   arrives from under the frame, and a light that crosses the art once. No glow is added to Depths, which has
   none anywhere else.
   FIRST, the sizes. The stock hover grows the box from 120 to 130px; on the alt HUD a box is 84px, so that
   rule would have made hovering jump it to 130. */
body.hudAlt .upgradeBox:hover  { width: 92px; height: 92px; }
body.hudAlt .upgradeBox:active { width: 84px; height: 84px; }
body.hudAlt .upgradeName { font-size: 13px; bottom: 6px; }

/* The lift and the name have to be their own animation: width/height are already transitioned, and the box
   carries a translate that positions it, so anything moving it must compose with that translate. */
body.skin-elegant .upgradeBox,
body.skin-depths .upgradeBox {
  overflow: hidden;
  transition: width .2s cubic-bezier(0,0,.3,1), height .2s cubic-bezier(0,0,.3,1),
              border-color .22s ease, box-shadow .22s ease;
}
/* The name stays READABLE at rest and lifts when you point at the card. Hiding it until hover was the first
   version and it is the wrong trade: you would have to sweep the grid to find out what anything is. */
body.skin-elegant .upgradeName,
body.skin-depths .upgradeName {
  transition: transform .26s cubic-bezier(.16,1,.32,1), opacity .2s ease;
  transform: translate(-50%, 0);
  opacity: .74;
}
body.skin-elegant .upgradeBox:hover .upgradeName,
body.skin-depths .upgradeBox:hover .upgradeName {
  transform: translate(-50%, -3px);
  opacity: 1;
}
/* One light crossing the art, once, on hover — the closest thing to a camera move a static card can have.
   ::after on the box rather than a new element, so nothing in the JS has to know about it. */
body.skin-elegant .upgradeBox::after,
body.skin-depths .upgradeBox::after {
  content: '';
  position: absolute;
  inset: -20% -60%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.20) 50%, transparent 58%);
  transform: translateX(-60%);
  opacity: 0;
}
body.skin-elegant .upgradeBox:hover::after,
body.skin-depths .upgradeBox:hover::after {
  animation: upgSweep .62s cubic-bezier(.33,1,.68,1) forwards;
}
@keyframes upgSweep {
  from { transform: translateX(-60%); opacity: 1 }
  to   { transform: translateX(60%);  opacity: 0 }
}

/* Quartz: a cut-stone card — square-ish corners, a hairline frame, and a shadow that deepens on hover. */
body.skin-elegant .upgradeBox {
  border-radius: 2px;
  border-width: 2px;
  border-color: rgba(0,0,0,.45);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
body.skin-elegant .upgradeBox:hover {
  border-color: rgba(0,0,0,.72);
  box-shadow: 0 10px 26px rgba(0,0,0,.30);
}
body.skin-elegant .upgradeName {
  font-family: var(--qz-font); font-weight: 400; letter-spacing: .06em;
  text-shadow: none; -webkit-text-stroke: 0;
}
body.skin-elegant .upgradeBoxLower { background: rgba(0,0,0,.14); }

/* Depths: no radius, one hairline, and the frame itself brightens instead of glowing. The lower scrim
   deepens on hover so the name has something to sit against. */
body.skin-depths .upgradeBox {
  border-radius: 0;
  border-width: 2px;
  border-color: rgba(0,0,0,.7);
  box-shadow: inset 0 0 0 1px rgba(226,228,232,.10);
}
body.skin-depths .upgradeBox:hover {
  border-color: #000;
  box-shadow: inset 0 0 0 1px rgba(226,228,232,.42), 0 8px 22px rgba(0,0,0,.55);
}
body.skin-depths .upgradeName {
  font-family: var(--dp-font); font-weight: 300; letter-spacing: .16em;
  text-transform: uppercase; font-size: 11px;
  text-shadow: none; -webkit-text-stroke: 0;
  color: var(--dp-ink);
}
body.skin-depths .upgradeBoxLower {
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.42));
  height: 60%;
  transition: opacity .22s ease;
  opacity: .7;
}
body.skin-depths .upgradeBox:hover .upgradeBoxLower { opacity: 1; }
/* The sweep is a light source, and Depths has no lit surfaces — it gets a much fainter, cooler pass. */
body.skin-depths .upgradeBox::after {
  background: linear-gradient(105deg, transparent 42%, rgba(226,228,232,.10) 50%, transparent 58%);
}

@media (prefers-reduced-motion: reduce) {
  body.skin-elegant .upgradeBox::after, body.skin-depths .upgradeBox::after { animation: none !important; opacity: 0 !important }
  body.skin-elegant .upgradeName, body.skin-depths .upgradeName { transition: none; transform: translate(-50%, 0) }
}

/* ---- ROUND 2 on the HUD (zenitsv 2026-08-17) -----------------------------------------------------
   The column beside the minimap gets out of its way while it grows. `mapHoverOn` is set on <body> by the
   same mousemove handler that sets .mapHover on the canvas — #mapCanvas comes AFTER these elements in the
   markup, so no sibling selector can reach backwards to them. The map is 180px at left:10px and grows to
   1.25x from its top-left corner, so 235px is where it ends; 244 -> 268 keeps a hair of air at full size. */
body.hudAlt #tankName,
body.hudAlt #tankLevel,
body.hudAlt #tankScore,
body.hudAlt #tankPartialLevel {
  transition: left 0.9s cubic-bezier(0.16, 1.06, 0.3, 1);
}
body.hudAlt.mapHoverOn #tankName,
body.hudAlt.mapHoverOn #tankLevel,
body.hudAlt.mapHoverOn #tankScore,
body.hudAlt.mapHoverOn #tankPartialLevel {
  left: 268px;
}

/* ---- the stat bars, in the styles' own materials --------------------------------------------------
   "no se ve que cambiaron su estilo las barras de mejora, se ven feas". Depths had no rules of its own here
   at all, so it was still drawing the stock black pills. */
body.skin-depths .statBarLeft,
body.skin-depths .statBarRight {
  background: var(--dp-face);
  border: 1px solid var(--dp-edge);
  border-radius: 0;
}
body.skin-depths .statBarInner,
body.skin-depths .statBarSlide,
body.skin-depths .statBarSlide2 { border-radius: 0; }
/* The fills keep their stat colours — that is how you tell one bar from another at a glance — but pulled
   down to something that belongs next to graphite. */
body.skin-depths .statBarSlide  { filter: saturate(.42) brightness(.82); }
body.skin-depths .statBarSlide2 { filter: saturate(.42) brightness(.82); }
body.skin-depths .statBarText {
  font-family: var(--dp-font); font-weight: 300; font-size: 14px; letter-spacing: .1em;
  color: var(--dp-ink); text-shadow: none; -webkit-text-stroke: 0;
}
body.skin-depths .statButton,
body.skin-depths .statButtonDisabled {
  border-radius: 0;
  background: var(--dp-ink);
  color: #1b1b1d;
}
body.skin-depths .statButtonDisabled { opacity: .28; }

/* ---- and their 0.1s staggered entrance -------------------------------------------------------------
   animation-delay is stamped per bar in drawFrame (by ROW, so the wave runs up the column). `backwards`
   matters: without it a bar waiting out its delay would sit at full opacity first and then jump. */
body.hudAlt #statUpgradesLeft.statIn > div,
body.hudAlt #statUpgradesRight.statIn > div {
  animation: statPop .46s cubic-bezier(.22,.61,.24,1) backwards;
}
@keyframes statPop {
  from { opacity: 0; transform: translateX(46px) }
  to   { opacity: 1; transform: none }
}
@media (prefers-reduced-motion: reduce) {
  body.hudAlt #statUpgradesLeft.statIn > div,
  body.hudAlt #statUpgradesRight.statIn > div { animation: none }
}

/* ---- 5 boxes per line ------------------------------------------------------------------------------
   The pitch is page.upgGrid() in script2.js; with 5 across, nine weapons are 2 rows, so the body grid drops
   from 372px to 78 + 2*98 = 274px. */
body.hudAlt .bodyUpgrades { bottom: 274px; }

/* ==== ROUND 3 — zenitsv 2026-08-17 ==================================================================
   Six asks in one message plus two follow-ups. Everything here is HUD-wide unless it is scoped to a skin;
   the vignette and the low-health pulse are deliberately NOT gated to the alt HUD, because they are about
   the game state rather than the layout — Modern gets them too.
   ==================================================================================================== */

/* ---- the screen vignette ---------------------------------------------------------------------------
   Three states, picked in Options (localStorage.tsVignette): off / on / health. The element is always in
   the DOM and always transparent when off, so switching state never reflows anything.
   `--vg` is the strength (0..1) and `--vgRed` how far the tint has gone from black toward blood, both
   written from drawFrame in the `health` state; the other two states leave them at their defaults.
   A radial-gradient with a transparent middle rather than a box-shadow inset: the middle has to stay
   completely untouched, and an inset shadow of this size costs a full-screen composite every frame. */
#hudVignette {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  --vg: 0;
  --vgRed: 0;
  /* TWO stacked gradients, not one gradient with computed channels. A calc() inside an rgba() channel is
     valid CSS but is exactly the kind of thing that silently drops the whole declaration on an engine that
     disagrees, and a dropped background here means no vignette with no error anywhere. Alpha-only calc is
     safe, so the red layer simply rides ON TOP of the black one at its own opacity. */
  background:
    radial-gradient(ellipse 74% 68% at 50% 50%,
      rgba(96, 4, 8, 0) 40%,
      rgba(96, 4, 8, calc(0.34 * var(--vg) * var(--vgRed))) 74%,
      rgba(120, 2, 6, calc(0.78 * var(--vg) * var(--vgRed))) 100%),
    radial-gradient(ellipse 78% 72% at 50% 50%,
      rgba(0, 0, 0, 0) 42%,
      rgba(2, 2, 4, calc(0.30 * var(--vg))) 76%,
      rgba(0, 0, 0, calc(0.72 * var(--vg))) 100%);
  transition: opacity .35s linear;
}
/* BRUTAL MODE vignette (errorx002 2026-09-05). A SEPARATE red layer from #hudVignette, driven ONLY by
   --brv (written inline every frame from the heartbeat + low-health curve), so it is independent of the
   normal Vignette setting — it appears whenever Brutal Mode is on and never touches the other one. */
#brutalVig {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: var(--brv, 0);
  background:
    radial-gradient(ellipse 72% 66% at 50% 50%,
      rgba(150, 6, 10, 0) 36%,
      rgba(150, 6, 12, 0.48) 76%,
      rgba(86, 0, 4, 0.94) 100%);
  will-change: opacity;
}
/* BRUTAL MODE black tunnel-vision vignette (errorx002 2026-09-05). Its own layer beneath the red heartbeat;
   opacity is written inline as --brk from the low-health curve, so rising opacity reads as the view closing. */
#brutalDark {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: var(--brk, 0);
  background:
    radial-gradient(ellipse 70% 64% at 50% 50%,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0.72) 82%,
      rgba(0, 0, 0, 0.98) 100%);
  will-change: opacity;
}
/* BRUTAL MODE aura scorch (errorx002 2026-09-05). A burning ember vignette shown while you stand inside an
   enemy damage aura; opacity is written inline as --brn (scaled by the enemy aura's radius/level). Two stacked
   gradients: a charred near-black edge and a hot ember rim over it. */
#brutalBurn {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: var(--brn, 0);
  background:
    radial-gradient(ellipse 74% 70% at 50% 50%,
      rgba(0, 0, 0, 0) 40%,
      rgba(120, 30, 0, 0.35) 74%,
      rgba(60, 8, 0, 0.85) 92%,
      rgba(20, 2, 0, 0.98) 100%),
    radial-gradient(ellipse 92% 88% at 50% 50%,
      rgba(255, 110, 20, 0) 60%,
      rgba(255, 90, 20, 0.28) 88%,
      rgba(255, 60, 10, 0.50) 100%);
  will-change: opacity;
}
/* BRUTAL MODE heal-field wash (errorx002 2026-09-05). A calm green edge glow shown while you are inside a
   friendly/own healing aura; opacity is written inline as --brg. */
#brutalHealAura {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: var(--brg, 0);
  background:
    radial-gradient(ellipse 80% 76% at 50% 50%,
      rgba(40, 220, 120, 0) 46%,
      rgba(40, 210, 120, 0.22) 82%,
      rgba(30, 180, 100, 0.42) 100%);
  will-change: opacity;
}
/* BRUTAL MODE low-HP settings tint (errorx002 2026-09-05). Open Settings while badly hurt and the card's
   background beats red. Scoped to the brutalLowHp body class the render loop sets under 50% health; the inset
   fill sits behind the card's text, so nothing is obscured. */
body.brutalLowHp #optionsCard { animation: brutalOptRed 1.15s ease-in-out infinite; }
@keyframes brutalOptRed {
  0%, 100% { box-shadow: inset 0 0 0 2000px rgba(120, 6, 10, 0); }
  50%      { box-shadow: inset 0 0 0 2000px rgba(120, 6, 10, 0.32); }
}
@media (prefers-reduced-motion: reduce) {
  body.brutalLowHp #optionsCard { animation: none; }
}
/* BRUTAL death screen veil (errorx002 2026-09-11, dialled back same day). The first pass blacked the world out
   entirely — he pushed back ("la pantalla de gameover ... esta feo que ... se corte"): the world (where the
   shatter pieces fly) must STAY VISIBLE behind the gameover panel, just dimmed and softly blurred, not cut to
   a black void. So: light blur, gentle dim, a moderate vignette that keeps the centre clear. Inserted between
   #gameCanvas and #overlay1 so the respawn panel (in #overlay2) stays sharp. Blur is a class rule, not inline,
   so setOverlay's `gameCanvas.style.filter=''` reset can't clear it. */
body.brutalDead #gameCanvas {
  filter: blur(4px) brightness(.72) saturate(.82);
  transition: filter .5s ease;
}
/* While the in-world glass shatter is live the world canvas must be SHARP — the shards are drawn on it and
   the player is meant to watch them fly (errorx002 2026-09-11). This overrides the brutalDead blur above;
   equal specificity, so it wins by coming later. render._brWorldFX toggles body.brutalShatterLive. */
body.brutalShatterLive #gameCanvas {
  filter: brightness(.9);
}
/* THE reason the death shatter was invisible live but showed in the in-game "L" recording (gsfdabangg, Opera
   GX, 2026-09-11): #menuBg is a SEPARATE canvas stacked directly above #gameCanvas that paints an opaque
   themed gradient whenever the menu is up. A brutal death keeps page.overlay at 0 (the respawn panel slides
   over the menu, overlay2 stays visible — script2.js ~20097), so menuBg's own rAF loop kept filling the
   screen OVER the world, burying the shards. The "L" recorder captures #gameCanvas alone (below menuBg), which
   is why the shatter only ever appeared in recordings. Making #overlay2 and #respawnPanel transparent wasn't
   enough — menuBg sits between them and the world. Hide it while dead in Brutal so the world shows through;
   !important beats the loop's inline `display:block`, and it returns automatically once brutalDead clears. */
body.brutalDead #menuBg { display: none !important; }
#brutalDeathVeil {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background:
    radial-gradient(ellipse 68% 62% at 50% 48%,
      rgba(0,0,0,0) 40%,
      rgba(6,0,2,0.28) 74%,
      rgba(0,0,0,0.62) 100%),
    radial-gradient(ellipse 92% 86% at 50% 50%,
      rgba(40,0,2,0) 52%,
      rgba(40,0,3,0.24) 100%);
}
body.brutalDead #brutalDeathVeil { opacity: 1; }
/* Optional fade-to-black: an inner solid layer that eases to opaque black a couple seconds in, "como que tu
   tanque ya no ve nada porque se murio". Only when the blackout sub-option class is present (window.__brutal-
   Blackout, wired to a Brutal-tab toggle later); snaps back to clear otherwise. */
#brutalDeathVeil::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: #000; opacity: 0;
}
/* Fade to black via a keyframe ANIMATION, not a transition. __brutalDeadOn CREATES the veil element and adds
   the blackout class in the SAME frame, so a transition has no prior opacity:0 render to animate FROM — it
   snaps straight to solid black the instant you die, blacking out the whole world (and the death shatter you
   were meant to watch) with no fade. Reported on Opera GX with the in-game "L" recorder: the canvas-only
   capture (taken below this HTML veil) showed the shards flying, but live the veil hid everything — only the
   "..!" title, which sits ABOVE the veil, was visible. An animation runs from the element's first render, so
   0 -> 1 always eases; `forwards` holds it black. (gsfdabangg 2026-09-11) */
body.brutalDead.brutalDeathBlackout #brutalDeathVeil::after {
  animation: brutalBlackoutFade 7s ease 2.5s forwards;
}
@keyframes brutalBlackoutFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body.brutalDead #gameCanvas { transition: none; }
  #brutalDeathVeil { transition: none; }
  body.brutalDead.brutalDeathBlackout #brutalDeathVeil::after { animation: none; opacity: 1; }
}
/* ============================================================================
   BRUTAL restart-countdown takeover (errorx002 2026-09-11). Replaces the plain
   "SERVER UPDATING / you will be terminated in N" HUD text (drawn on hudCanvas in
   script2.js) with a full-screen dread screen ONLY in Brutal Mode: a pulsing red
   radial vignette, a giant translucent red MM:SS ODOMETER that fades toward full
   opacity as it nears 0, a depleting red arc-ring carrying the menu's "...!" dots
   that drifts softly, and a serif quote up top. Driven each frame by
   window.__brutalRestartOn(active, seconds, now); it writes --p (0..1 sweep of the
   current second), --op (digit opacity) and --cell (giant digit cell height, px)
   inline. Shows during gameplay; pointer-events:none so it never eats input. */
#brutalRestartScreen {
  position: fixed; inset: 0; z-index: 89000; pointer-events: none;
  opacity: 0; visibility: hidden;
  --p: 1; --op: 0.25; --cell: 220px; --ring: rgba(255,60,55,0.92);
  font-family: 'Arial Black', Arial, sans-serif;
}
#brutalRestartScreen.show { visibility: visible; animation: brRestartIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes brRestartIn { from { opacity: 0; } to { opacity: 1; } }
/* Pulsing red radial vignette: light warm centre, blood-dark reddened edges, beating. */
#brRestartVig {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255,225,222,0.10) 0%, rgba(120,20,18,0) 45%),
    radial-gradient(ellipse 96% 92% at 50% 50%, rgba(60,4,4,0) 40%, rgba(52,3,3,0.55) 82%, rgba(24,0,0,0.82) 100%);
  animation: brRestartPulse 2.4s ease-in-out infinite;
}
@keyframes brRestartPulse { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } }
/* Quote up top: condensed serif, faint, uppercase. */
#brRestartQuote {
  position: absolute; top: 4.5vh; left: 50%; translate: -50% 0;
  max-width: 92vw; text-align: center;
  font-family: 'Bahnschrift', 'DIN Alternate', 'Roboto Condensed', 'Segoe UI', system-ui, sans-serif; font-style: normal;
  font-weight: 700; font-size: clamp(14px, 2.2vh, 26px);
  letter-spacing: 0.5px; text-transform: uppercase;
  color: rgba(20,4,4,0.80); text-shadow: 0 1px 10px rgba(255,120,120,0.25);
}
/* Giant translucent MM:SS, centred. Opacity ramps to 1 as the clock hits 0 (--op). */
#brRestartClock {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(180,20,18,var(--op)); text-shadow: 0 0 40px rgba(255,40,36,calc(var(--op) * 0.5));
  line-height: 1;
}
.brOdoDigits { display: inline-flex; align-items: center; }
.brOdoFix { display: inline-block; text-align: center; width: calc(var(--cell) * 0.42); font-size: calc(var(--cell) * 0.9); }
.brOdoCol { display: inline-block; height: var(--cell); line-height: var(--cell); overflow: hidden; vertical-align: middle; }
.brOdoReel { display: block; will-change: transform; transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1); }
.brOdoReel > span { display: block; height: var(--cell); line-height: var(--cell); text-align: center; font-size: calc(var(--cell) * 0.9); width: calc(var(--cell) * 0.62); }
/* Depleting arc-ring + "...!" dots over the colon, drifting softly (soft-move). */
#brRestartRing {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--cell) * 0.92); height: calc(var(--cell) * 0.92);
  translate: -50% -50%; animation: brRestartDrift 9s ease-in-out infinite;
}
#brRestartRing::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--ring) calc(var(--p) * 360deg), rgba(255,60,55,0) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  filter: drop-shadow(0 0 6px rgba(255,50,46,0.65));
}
#brRestartDots {
  position: absolute; left: 46%; top: 50%; translate: -50% -50%;
  font-size: calc(var(--cell) * 0.16); font-weight: 900;
  color: var(--ring); letter-spacing: 2px; text-shadow: 0 0 8px rgba(255,50,46,0.7);
}
@keyframes brRestartDrift {
  0%   { translate: -50% -50%; }
  25%  { translate: -44% -56%; }
  50%  { translate: -55% -47%; }
  75%  { translate: -47% -54%; }
  100% { translate: -50% -50%; }
}
@media (prefers-reduced-motion: reduce) {
  #brutalRestartScreen.show { animation: none; opacity: 1; }
  #brRestartVig, #brRestartRing { animation: none; }
  .brOdoReel { transition: none; }
}
/* Constant vignette. Strength is fixed and the colour never leaves black. */
body.vignetteOn  #hudVignette { opacity: 1; --vg: 0.55; --vgRed: 0; }
/* Health-reactive. `--vg` / `--vgRed` are written inline every frame, so only the opacity is set here —
   an opacity transition on top of per-frame variable writes would fight itself. */
body.vignetteHealth #hudVignette { opacity: 1; transition: none; }

/* ---- low health: the bar pulses, faster the closer you are to dying ---------------------------------
   "se ve como la barra de salud va parpadeando rojo brillante, lento, aunque aumenta su velocidad, pero no
   al extremo, cuando su vida esta de 30% a 0%". The duration is written inline (1.5s at 30% down to 0.42s
   at 0%) — "no al extremo" is why it stops at 0.42s and not at a strobe.
   It animates `filter` on the FILL, not the bar: the bar carries the clip-path, and a filter on a clipped
   element is applied before the clip in some engines, which bleeds a glow past the bevel. */
@keyframes hvPulse {
  0%, 100% { filter: none }
  50%      { filter: brightness(1.85) saturate(1.35) }
}
#hvHealth.hvLow #hvHealthFill {
  animation: hvPulse 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #hvHealth.hvLow #hvHealthFill { animation: none }
}

/* ---- the score / level bars beside the minimap, per style ------------------------------------------
   "las barras de punteo que estan a lado del minimapa no cambian estilo". Only skin-elegant had rules for
   #tankScore / #tankPartialLevel (up at the quartz block) — Depths, Classic and Light all fell through to
   the stock black pill, which is why they looked identical in three of the styles.
   The BAR FILLS are driven inline in px by drawFrame, so nothing here may touch their width; only the
   trough, the corners and the type. */
body.skin-depths #tankScore,
body.skin-depths #tankPartialLevel {
  background: var(--dp-face) !important;
  border: 1px solid var(--dp-edge);
  border-radius: 0;
  box-shadow: none;
}
body.skin-depths #tankScoreBar,
body.skin-depths #tankLevelBar {
  border-radius: 0;
  filter: saturate(.42) brightness(.86);
}
body.skin-depths #tankScoreDisplay,
body.skin-depths #tankLevelDisplay,
body.skin-depths #tankLevel {
  font-family: var(--dp-font); font-weight: 300; letter-spacing: .08em;
  color: var(--dp-ink); text-shadow: none; -webkit-text-stroke: 0;
}
body.skin-classic #tankScore,
body.skin-classic #tankPartialLevel {
  background: rgba(20, 20, 22, .78) !important;
  border: 2px solid var(--cl-edge);
  border-radius: 4px;
  box-shadow: none;
}
body.skin-classic #tankScoreBar,
body.skin-classic #tankLevelBar { border-radius: 2px; }
/* Light is Classic on a white field, so the trough has to invert or the bars read as holes. */
body.skin-classic.skin-light #tankScore,
body.skin-classic.skin-light #tankPartialLevel {
  background: #eceef2 !important;
  border-color: var(--cl-edge);
}
body.skin-classic.skin-light #tankScoreDisplay,
body.skin-classic.skin-light #tankLevelDisplay { color: var(--cl-text); text-shadow: none; }

/* ---- name / level / score type: thin ---------------------------------------------------------------
   "esos fonts de ahi arreglalos, fuentes delgadas, pero no cambies eso del color cada que usas un color de
   nombre". Weight and stroke only — `color` is never mentioned here, and #tankName's colour is written
   INLINE every frame from the account's name colour, so it wins over this file regardless. Do not add a
   `color` to #tankName in any skin block: it would do nothing for the player who has a colour set and
   would silently change it for everyone who does not. */
body.hudAlt #tankName {
  font-weight: 300;
  letter-spacing: .01em;
  -webkit-text-stroke: 0;
}
body.hudAlt #tankLevel,
body.hudAlt #tankScoreDisplay,
body.hudAlt #tankLevelDisplay {
  font-weight: 300;
  letter-spacing: .06em;
  -webkit-text-stroke: 0;
}
/* .bold is set on these elements in the markup and is `font-weight: 900` — it has the same specificity as a
   bare id would, so the thin weight has to be stated on the id WITH the body class to outrank it. */
body.hudAlt #tankName.bold,
body.hudAlt #tankLevel.bold { font-weight: 300; }

/* ---- the chat input, per style ---------------------------------------------------------------------
   "el estilo de ese cuadro de texto es el mismo en TODOS, no se porque" — because #chat had exactly one
   rule in the whole sheet and no skin ever overrode it. `::placeholder` needs its own selector per skin;
   it does not inherit `color`. */
body.skin-elegant #chat {
  background-color: var(--qz-face);
  border: 1px solid var(--qz-edge);
  border-radius: var(--qz-radius);
  box-shadow: var(--qz-inset);
  color: var(--qz-ink);
  font-family: var(--qz-font);
  font-weight: 400;
}
body.skin-elegant #chat::placeholder { color: var(--qz-muted); }
body.skin-depths #chat {
  background-color: var(--dp-face);
  border: 1px solid var(--dp-edge);
  border-radius: 0;
  box-shadow: none;
  color: var(--dp-ink);
  font-family: var(--dp-font);
  font-weight: 300;
  letter-spacing: .06em;
}
body.skin-depths #chat::placeholder { color: rgba(220, 220, 224, .38); letter-spacing: .1em; }
body.skin-classic #chat {
  background-color: rgba(20, 20, 22, .82);
  border: 2px solid var(--cl-edge);
  border-radius: 4px;
  box-shadow: none;
  color: #e8e8ea;
}
body.skin-classic.skin-light #chat {
  background-color: #f3f4f6;
  border-color: var(--cl-edge);
  color: var(--cl-text);
}
body.skin-classic.skin-light #chat::placeholder { color: #6b7280; }

/* ==== LOW-HEALTH AGONY + THE DEPTHS DEATH SCREEN (zenitsv 2026-08-17) ==============================
   "al estar con poca vida … el color se va perdiendo ligeramente, ya que el tanque esta 'agonizando'",
   and the death screen he'd been holding back the description of all day.
   ==================================================================================================== */

/* ---- the colour split ------------------------------------------------------------------------------
   A real chromatic aberration is a per-pixel channel offset — an SVG filter or two extra full-screen
   drawImage passes, every frame, for the player who is one hit from dying. That is the worst moment in the
   game to spend frames, so this paints the fringe where aberration is actually visible in a real lens: at
   the PERIPHERY. Two ring gradients, red pulled one way and cyan the other, in `screen` so they add light
   to the edges instead of muddying them.
   `--ag` (0..1) is written from drawFrame; `body.agonyOn` is what turns the element on at all, so the
   aberration is independent of whether the vignette is enabled. */
#hudAberration {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  --ag: 0;
  mix-blend-mode: screen;
  /* Strengths raised hard after zenitsv: *"no veo el color aberration al tener baja vida, apenas se nota,
     y ni tiene"*. The first pass topped out at 0.20 alpha at the very corner, which on a dark field is
     invisible. Now it starts at 38% of the way out instead of 62% (so it covers real screen area rather
     than a rim), and the split is wide enough to actually read as two channels pulling apart. */
  background:
    radial-gradient(ellipse 88% 82% at 47.6% 50%,
      rgba(255, 0, 48, 0) 38%,
      rgba(255, 0, 48, calc(0.20 * var(--ag))) 72%,
      rgba(255, 0, 48, calc(0.46 * var(--ag))) 100%),
    radial-gradient(ellipse 88% 82% at 52.4% 50%,
      rgba(0, 224, 255, 0) 38%,
      rgba(0, 224, 255, calc(0.20 * var(--ag))) 72%,
      rgba(0, 224, 255, calc(0.46 * var(--ag))) 100%),
    /* A third, vertical split. One horizontal pair alone reads as "someone put a red glow on the left" —
       the cross is what makes it read as the lens coming apart. */
    radial-gradient(ellipse 82% 90% at 50% 47.4%,
      rgba(255, 40, 0, 0) 46%,
      rgba(255, 40, 0, calc(0.16 * var(--ag))) 100%),
    radial-gradient(ellipse 82% 90% at 50% 52.6%,
      rgba(0, 180, 255, 0) 46%,
      rgba(0, 180, 255, calc(0.16 * var(--ag))) 100%);
  transition: opacity .25s linear;
}
body.agonyOn #hudAberration { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #hudAberration { display: none }
}

/* ---- the periphery going out of focus ---------------------------------------------------------------
   errorx002 2026-08-21: *"es como el filtro inverso de ojo de pez, en vez de acercar lo del centro, lo
   aleja … lo mas lejano en las orillas es lo que se ve mas afectado, en el centro es donde esta mas
   enfocado, pero el efecto aumenta mientras menos vida tenes"*.

   A true inverse fisheye is a geometric warp — a mesh or a shader over the whole frame, every frame, at
   the exact moment the player can least afford it. What actually reads as one is the DEPTH OF FIELD it
   implies: a sharp centre falling out of focus toward the edges. That is one backdrop-filter under a
   radial mask, which the compositor does on the GPU without a second pass over the scene.

   ⚠️ z-index 45 is load-bearing. #overlay1 has no z-index, so it paints at auto and this layer sits
   above it — which is the only reason the HUD blurs too, and he asked for the GUI by name. It stays far
   below #optionsMenu (90000) and the death screen, because a settings panel you cannot read is a bug
   rather than atmosphere. Same line the colour drain already draws: that one skips #overlay1 entirely.

   ⚠️ display:none when not in agony, NOT opacity 0. A backdrop-filter element costs a full-screen
   readback every frame even at blur(0), so leaving it live would tax every player at full health for an
   effect none of them can see. There is no pop from switching it in: `body.agonyOn` is set at ag > 0.002,
   where the radius is still ~0.015px.

   --agb is the radius in px, written per frame (Low Detail pins it to 0 — see the note there). */
#hudDefocus {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 45;
  display: none;
  --agb: 0px;
  -webkit-backdrop-filter: blur(var(--agb));
  backdrop-filter: blur(var(--agb));
  /* The focal hole is generous — the fight is in the middle of the screen and taking that away would be
     a handicap, not a mood. Fully transparent to 40% of the way out, then ramping so the corners carry
     the whole radius. Ellipse rather than circle so a widescreen monitor blurs its long edges evenly. */
  -webkit-mask-image: radial-gradient(ellipse 74% 70% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.72) 82%, rgba(0,0,0,1) 100%);
  mask-image: radial-gradient(ellipse 74% 70% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.72) 82%, rgba(0,0,0,1) 100%);
}
body.agonyOn #hudDefocus { display: block; }
@media (prefers-reduced-motion: reduce) {
  #hudDefocus { display: none !important }
}

/* ---- Depths' death screen --------------------------------------------------------------------------
   "la pantalla de muerte se ve casi oscura". Almost black, not black: a completely flat screen loses the
   tank, and the tank barely showing through is the whole image he described. */
/* Darker still, and with an actual vignette on it — zenitsv: *"no veo que la viñeta de la pantalla de
   muerte sea de color negra oscura"*. The centre is only just light enough to hold the corpse; everything
   past 55% is black. Two layers so the falloff can be steep at the edge without crushing the middle. */
body.skin-depths #respawnPanel {
  background:
    radial-gradient(1000px 700px at 50% 46%, rgba(0,0,0,0) 34%, rgba(0,0,0,.72) 72%, #000 100%),
    radial-gradient(1100px 780px at 50% 46%, #0e0e10 0%, #030304 100%) !important;
}
/* The header is two lines now. The title is quiet — this style has no exclamation marks anywhere — and the
   second line is quieter still and arrives after it. */
body.skin-depths #respawnTitle {
  font-family: var(--dp-font) !important;
  font-weight: 200 !important;
  font-size: 46px !important;
  letter-spacing: .18em !important;
  color: #8c8c92 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  text-transform: none !important;
}
#respawnSub { display: none; }
body.skin-depths #respawnSub {
  font-family: var(--dp-font);
  font-weight: 200;
  font-size: 21px;
  letter-spacing: .22em;
  color: #55555c;
  text-shadow: none;
  -webkit-text-stroke: 0;
  margin-top: 2px;
}
body.skin-depths #killer {
  font-family: var(--dp-font) !important;
  font-weight: 300 !important;
  letter-spacing: .1em !important;
  color: #45454b !important;
  text-shadow: none !important;
}
/* The three rows, tidied: one rule of hairlines instead of three floating pills. */
body.skin-depths #respawnStats .rsRow {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 0 !important;
  padding: 10px 22px !important;
}
body.skin-depths #respawnStats .rsRow span {
  font-family: var(--dp-font) !important;
  font-weight: 300 !important;
  letter-spacing: .14em !important;
  color: #4a4a51 !important;
}
body.skin-depths #respawnStats .rsRow b {
  font-family: var(--dp-font) !important;
  font-weight: 300 !important;
  color: #9a9aa2 !important;
  letter-spacing: .06em !important;
}
body.skin-depths #respawnContinue {
  font-family: var(--dp-font) !important;
  font-weight: 300 !important;
  letter-spacing: .16em !important;
  border-radius: 0 !important;
  background: #1a1a1d !important;
  color: #8c8c92 !important;
  border: 1px solid #2a2a2f !important;
  box-shadow: none !important;
}
body.skin-depths #respawnContinue:hover { background: #232327 !important; filter: none !important; }

/* ---- the corpse ------------------------------------------------------------------------------------
   "en vez de aparecer arriba hacia abajo, este va apareciendo de 0 a 1, pero como esta en una viñeta muy
   oscura, apenas se puede ver". So the canvas overrides the shared dsPop entrance with a long straight
   opacity ramp and NO movement — it is already there, it just becomes visible.
   The grey/dark of the tank itself is a ctx filter in script2.js, not here: it has to leave the blood
   stain underneath it in colour, and a CSS filter would take both. */
body.skin-depths #respawnPanel.dsIn #respawnCanvas {
  animation: dsCorpse 2.8s linear both !important;
  animation-delay: .15s !important;
}
@keyframes dsCorpse {
  from { opacity: 0 }
  to   { opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  body.skin-depths #respawnPanel.dsIn #respawnCanvas { animation: none !important; opacity: 1 !important }
}
body.skin-depths #respawnPanel.dsIn #respawnTitle { animation-delay: .10s !important; }
body.skin-depths #respawnPanel.dsIn #respawnSub   { animation-delay: .55s !important; }
body.skin-depths #respawnPanel.dsIn #killer       { animation-delay: .95s !important; }
body.skin-depths #respawnPanel.dsIn #respawnStats { animation-delay: 1.35s !important; }
body.skin-depths #respawnPanel.dsIn #respawnContinue { animation-delay: 1.7s !important; }

/* ---- #respawnSub had no box of its own ---------------------------------------------------------------
   Every other child of #respawnPanel is absolutely positioned; a new one that is not lands at the panel's
   top-left corner, which is exactly where zenitsv found "Carente de esperanzas..." — 12px tall in the
   corner of the screen. Positioned here rather than in the Depths block so the element can never do that
   again if another style starts using it. */
#respawnSub {
  position: absolute;
  top: 112px;
  left: 15%;
  width: 70%;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
}
/* Depths sets a 46px title where the stock one is 80px, so the whole header closes up. */
body.skin-depths #respawnTitle { top: 54px !important; }
body.skin-depths #respawnSub   { top: 108px; display: block; }
body.skin-depths #killer       { top: 148px !important; }

/* ---- the death screen in the styles that never got one ---------------------------------------------
   "en varios de los otros modos el estilo de la pantalla de muerte no coincide". Only elegant and (now)
   Depths had rules; Classic and Light inherited the neon block at the top of this file, which is the Modern
   look and belongs to no other style. */
body.skin-classic #respawnPanel {
  background: radial-gradient(900px 620px at 50% 42%, #1c1c20 0%, #0b0b0d 100%) !important;
}
body.skin-classic #respawnTitle {
  color: #e8e8ea !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  -webkit-text-stroke-width: 3px !important;
}
body.skin-classic #killer { color: #b6b6bb !important; text-shadow: none !important; }
body.skin-classic .rsRow {
  background: rgba(24,24,27,.9) !important;
  border: 2px solid var(--cl-edge) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
body.skin-classic .rsRow span { color: #9a9aa2 !important; }
body.skin-classic .rsRow b    { color: #e8e8ea !important; }
body.skin-classic #respawnContinue {
  background: #e8e8ea !important;
  color: #1a1a1d !important;
  border: 2px solid var(--cl-edge) !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}
/* Light is the same skin on a white field, so the panel inverts with it. */
body.skin-classic.skin-light #respawnPanel {
  background: radial-gradient(900px 620px at 50% 42%, #ffffff 0%, #e7e9ee 100%) !important;
}
body.skin-classic.skin-light #respawnTitle {
  color: var(--cl-text) !important;
  -webkit-text-stroke-width: 0 !important;
}
body.skin-classic.skin-light #killer { color: #4b5563 !important; }
body.skin-classic.skin-light .rsRow {
  background: #f3f4f6 !important;
}
body.skin-classic.skin-light .rsRow span { color: #6b7280 !important; }
body.skin-classic.skin-light .rsRow b    { color: var(--cl-text) !important; }
body.skin-classic.skin-light #respawnContinue {
  background: var(--cl-text) !important;
  color: #f3f4f6 !important;
}

/* ---- Depths' entrance ------------------------------------------------------------------------------
   zenitsv: *"las animaciones de entrada de la pantalla de muerte son las por default, se ve feo y se ve
   generico, deberian ser mas lentas y mas cinematicamente tristes"*. It was still inheriting `dsPop` — the
   stock overshoot-up-from-below — with only the delays changed, so it read as the Modern animation played
   late.
   Everything here moves DOWNWARD and settles, the opposite of dsPop: nothing on this screen should look
   like it is arriving with energy. No scale and no overshoot anywhere; the length is what carries it.
   ⚠️ #respawnCanvas is excluded — the corpse has its own 2.8s `dsCorpse` opacity ramp with no movement at
   all, and a second animation on the same element would replace it. */
body.skin-depths #respawnPanel.dsIn > * {
  animation: dsSink 2.1s cubic-bezier(.18,.7,.2,1) both;
}
body.skin-depths #respawnPanel.dsIn #respawnTitle {
  animation: dsSinkTitle 3.2s cubic-bezier(.18,.7,.2,1) both;
}
/* ⚠️ THIRD time this trap has been hit (see the note at style.css:3110 and .upgradeBox at 1233): a keyframe
   that writes `transform` REPLACES the base `translate(-50%, 0)` that centres these elements, so `to
   { transform: none }` parked Score/Level/Time and the Continue button half their own width to the RIGHT of
   centre — zenitsv's *"estan a la derecha y no en el centro"*. Compose on top of --dsC, never write a bare
   transform in a death-panel keyframe. `none` is the worst version of it: it reads as "no movement". */
@keyframes dsSink {
  from { opacity: 0; transform: var(--dsC) translateY(-10px); filter: blur(2px); }
  60%  { opacity: .55; filter: blur(0); }
  to   { opacity: 1; transform: var(--dsC); filter: blur(0); }
}
/* The title arrives already in place and simply resolves out of the dark, its tracking closing as it does.
   Opening the tracking (which Elegant does) reads as a reveal; closing it reads as something settling. */
@keyframes dsSinkTitle {
  from { opacity: 0; letter-spacing: .52em; }
  to   { opacity: 1; letter-spacing: .18em; }
}
/* Re-stated after the block above, which resets animation-delay as part of the shorthand. */
body.skin-depths #respawnPanel.dsIn #respawnTitle    { animation-delay: .10s; }
body.skin-depths #respawnPanel.dsIn #respawnSub      { animation-delay: .95s; }
body.skin-depths #respawnPanel.dsIn #killer          { animation-delay: 1.55s; }
body.skin-depths #respawnPanel.dsIn #respawnStats    { animation-delay: 2.15s; }
body.skin-depths #respawnPanel.dsIn #respawnContinue { animation-delay: 2.70s; }
@media (prefers-reduced-motion: reduce) {
  body.skin-depths #respawnPanel.dsIn > * { animation: none !important; }
}

/* ---- settings panel open / close animation (errorx002 2026-08-19) ----------------------------------
   *"the animations resets so abruptly, fix it, more softer and more deluxe"*, clarified as *"solo es
   para cuando abres o cierras la configuracion para que se vea bien"*, and it also answers his earlier
   ask that each Interface Style open the panel its OWN way: Modern / Classic / Light plain, Elegant and
   Elegant Dark *"mas elegante y cara"*, Depths *"mas chido y mas dinamico"*.

   ⚠️ #optionsMenu is display:none -> display:flex, and `display` is not animatable — so the CLOSE has to
   be driven by a `closing` class that script2.js keeps on the element while the reverse keyframes run
   (window.__closeOptions). Without it the panel simply disappeared on one frame, which is the "abrupt"
   part of the report; the open side had no animation either.

   The card is centred by the flex container, NOT by a transform, so these keyframes are free to use
   transform without having to restate a centring translate. (That trap is real elsewhere in this file.) */
@keyframes optVeilIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes optVeilOut { from { opacity: 1 } to { opacity: 0 } }
/* The default skin's card used to slide 10px and fade over .20s, which is barely an animation at all --
   *"asi tambien como la aparicion y desaparicion de las opciones"*. It now resolves out of a blur like the
   Elegant one, just quicker, so the base style is not the poor relation of the three. */
@keyframes optCardIn {
  0%   { opacity: 0; transform: translateY(14px) scale(.972); filter: blur(6px) }
  60%  { opacity: 1; filter: blur(0) }
  100% { opacity: 1; transform: none; filter: blur(0) }
}
@keyframes optCardOut {
  0%   { opacity: 1; transform: none; filter: blur(0) }
  100% { opacity: 0; transform: translateY(8px) scale(.984); filter: blur(5px) }
}

#optionsMenu.open              { animation: optVeilIn .22s ease both }
#optionsMenu.open #optionsCard { animation: optCardIn .38s cubic-bezier(.16,.84,.28,1) both }
/* `display:flex` restated: `.open` is still present while closing, but be explicit so a future change to
   the JS ordering cannot leave the panel mid-animation with display:none. */
/* pointer-events off while it fades: a click landing on a panel that is already on its way out would
   toggle a setting the player can no longer see the result of. */
#optionsMenu.closing, #optionsMenu.closing #optionsCard { pointer-events: none }
#optionsMenu.closing              { display: flex; animation: optVeilOut .22s ease both }
#optionsMenu.closing #optionsCard { animation: optCardOut .22s cubic-bezier(.4,0,.7,.2) both }

/* Elegant / Elegant Dark — slower, softer, and it resolves out of a blur rather than sliding. The long
   tail on the easing curve is the whole "expensive" reading: nothing arrives at a constant speed. */
@keyframes optCardQuartzIn {
  0%   { opacity: 0; transform: translateY(16px) scale(.962); filter: blur(7px) }
  55%  { opacity: 1; filter: blur(0) }
  100% { opacity: 1; transform: none; filter: blur(0) }
}
@keyframes optCardQuartzOut {
  0%   { opacity: 1; transform: none; filter: blur(0) }
  100% { opacity: 0; transform: translateY(8px) scale(.985); filter: blur(5px) }
}
body.skin-elegant #optionsMenu.open                 { animation: optVeilIn .3s cubic-bezier(.22,.61,.36,1) both }
body.skin-elegant #optionsMenu.open #optionsCard    { animation: optCardQuartzIn .52s cubic-bezier(.16,.84,.28,1) both }
body.skin-elegant #optionsMenu.closing              { animation: optVeilOut .26s ease both }
body.skin-elegant #optionsMenu.closing #optionsCard { animation: optCardQuartzOut .26s cubic-bezier(.4,0,.7,.2) both }

/* Depths — the panel is a slab that rises into place and settles, with a small overshoot in the curve.
   Deliberately the shortest and the springiest of the three: dynamic, not stately. */
@keyframes optCardDepthsIn {
  0%   { opacity: 0; transform: translateY(54px) scale(.88) }
  100% { opacity: 1; transform: none }
}
@keyframes optCardDepthsOut {
  0%   { opacity: 1; transform: none }
  100% { opacity: 0; transform: translateY(30px) scale(.94) }
}
body.skin-depths #optionsMenu.open                 { animation: optVeilIn .14s ease both }
body.skin-depths #optionsMenu.open #optionsCard    { animation: optCardDepthsIn .44s cubic-bezier(.2,1.4,.32,1) both }
body.skin-depths #optionsMenu.closing              { animation: optVeilOut .18s ease both }
body.skin-depths #optionsMenu.closing #optionsCard { animation: optCardDepthsOut .18s cubic-bezier(.5,0,.9,.35) both }

/* Anyone who has asked their OS not to animate gets the old instant behaviour, not a slow one. */
@media (prefers-reduced-motion: reduce) {
  #optionsMenu.open, #optionsMenu.open #optionsCard,
  #optionsMenu.closing, #optionsMenu.closing #optionsCard { animation: none }
}

/* ---- Settings title (errorx002 2026-08-19) --------------------------------------------------------
   *"Fix the title of the Settings, ahi se ve raro, osea, centralo y que siga la fuente de cada estilo"*.
   It was left-aligned against a card whose close button sits top-right, and only Elegant ever restyled
   it — under Depths the panel is set in --dp-font everywhere EXCEPT its own title, which kept the stock
   face. Centring is safe: #optionsClose is absolutely positioned, so it is out of flow and the text can
   take the full width without colliding with it. */
#optionsTitle { text-align: center; }
/* Depths sets every other panel title in --dp-font, uppercase and widely tracked (see #serverSelectTitle
   / #creditsTitle / #leaderboardTitle above) — #optionsTitle was simply missing from that list. */
body.skin-depths #optionsTitle {
  font-family: var(--dp-font) !important;
  font-weight: 300 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  color: var(--dp-ink) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
/* Elegant already picks up --qz-font from the shared title list; it just never lost the Modern glow. */
body.skin-elegant #optionsTitle { text-shadow: none !important; }
/* Classic and Light are deliberately plain — flat colour, no glow, stock face. */
body.skin-classic #optionsTitle { text-shadow: none !important; }

/* ============================================================================
   BRUTAL death screen — let the WORLD show through (errorx002 2026-09-11)
   He kept seeing "el fondo de sobreponer": the respawn panel paints its own
   opaque radial-gradient background (base rule ~1826 and the skin variants at
   ~5977/6090), which sits OVER #gameCanvas and hides the flying glass shards.
   In a brutal death we want the shatter visible, so the panel goes transparent
   and its text floats over the (dimmed, blurred) world. Placed at end of file
   so it beats every skin's panel background by source order. ========= */
body.brutalDead #respawnPanel,
body.brutalDead.skin-depths #respawnPanel,
body.brutalDead.skin-classic #respawnPanel,
body.brutalDead.skin-elegant #respawnPanel {
  background: transparent !important;
  box-shadow: none !important;
}
/* The animated red death dots ("..!") must read as red even under skins that
   force a quiet grey title (skin-depths sets #respawnTitle grey !important). */
body.brutalDead #respawnTitle.brutalDeathTitle,
body.brutalDead.skin-depths #respawnTitle.brutalDeathTitle,
body.brutalDead.skin-classic #respawnTitle.brutalDeathTitle,
body.brutalDead.skin-elegant #respawnTitle.brutalDeathTitle {
  color: #ff2a2a !important;
  -webkit-text-stroke: 2px #2a0000 !important;
  text-shadow: 0 0 30px rgba(255,42,42,.5), 0 3px 14px rgba(0,0,0,.7) !important;
  font-weight: 900 !important;
}

/* EXP-F (and any gender-locked personality): disable the non-matching gender pills. */
.optGender.optLocked { opacity: 0.35; pointer-events: none; filter: grayscale(1); }

/* ================================================================ FRUITS AND PEARS (VA-X Corp / errorx002)
   The "relaxed picnic" skin. Modelled on Classic (flat, no glow) but flipped onto a warm cream field with
   dark cocoa ink, and — its signature per the doc — GENEROUSLY ROUNDED corners ("los queridos y suaves
   cuadrados redondeados … un ambiente relajado y divertido"), the opposite of Depths' sober square panels.
   GATED: body.skin-fruits is only ever on errorx002's client (femaleexpie_official) while this is built, so
   this whole block is inert for everyone else. Shapes get their fruit palette from SKIN_POLY_PALETTE in
   script2.js; this styles the GUI/HUD only. Stays on the STOCK HUD layout (SKIN_STOCK_HUD), so it deliberately
   does NOT flip body.hudAlt — this is a re-skin of the shipped layout, not a relayout. */
body.skin-fruits {
  /* Warm kraft/tan cream, NOT white — errorx002 2026-09-21: "ese blanco puro extremo de la GUI se ve
     HORRIBLE". Reads as picnic paper / wicker under the meadow field, with cocoa ink and a warm edge. */
  --fr-face:  rgba(238,224,193,.96);
  --fr-edge:  rgba(104,78,40,.22);
  --fr-text:  #3a2c18;
  --fr-muted: #7c6a45;
  --fr-accent: #6ba050;
  --fr-accent-hi: #7fb862;
  /* Quicksand Book — rounded/friendly, matches the orchard tone. errorx002 asked the custom font NOT feel
     "cinematico en feo", so this is a soft geometric sans, not a display face. Face + /fonts/ route already
     shipped (see custom-font-serving); declaring it here just points the Fruits UI at it. */
  --fr-font: 'Quicksand','Nunito','Varela Round','Segoe UI',system-ui,-apple-system,sans-serif;
}
/* Keep the menu shape-minigame visible through overlay2 (same reason as every other skin). */
body.skin-fruits #overlay2 { background: transparent !important; }
body.skin-fruits #title {
  color: var(--fr-text) !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  font-weight: 800 !important;
}
body.skin-fruits #serverSelect,
body.skin-fruits #playMenu,
body.skin-fruits #credits,
body.skin-fruits #featured,
body.skin-fruits #videoBox,
body.skin-fruits #serverBrowser,
body.skin-fruits #optionsCard {
  background: var(--fr-face) !important;
  background-image: none !important;
  box-shadow: 0 0 0 1px var(--fr-edge), 0 6px 20px rgba(70,54,20,.10) !important;
  border: none !important;
  /* Natural rounding, not extreme (errorx002 2026-09-21: "no toda tiene que ser redondeo extremo, sino un
     redondeo que se vea chido, naturalista"). */
  border-radius: 12px !important;
  backdrop-filter: none !important;
}
body.skin-fruits #serverSelectSlide,
body.skin-fruits #serverSelectLeft,
body.skin-fruits #serverSelectRight,
body.skin-fruits #creditsText,
body.skin-fruits #channelName { color: var(--fr-text) !important; text-shadow: none !important; }
body.skin-fruits #serverSelectLowerText,
body.skin-fruits #serverSelectArrow { color: var(--fr-muted) !important; }
/* Soft, natural rounding for the option chips and inputs — friendly, not extreme. */
body.skin-fruits .optStyle,
body.skin-fruits .optSwatch,
body.skin-fruits #name { border-radius: 9px !important; }
body.skin-fruits .optToggle.on { background: var(--fr-accent) !important; }
body.skin-fruits .lbBar,
body.skin-fruits .lbTop1 .lbBar,
body.skin-fruits .lbTop2 .lbBar,
body.skin-fruits .lbTop3 .lbBar { background: var(--fr-accent) !important; box-shadow: none !important; }
body.skin-fruits .clItem::before { background: var(--fr-muted) !important; box-shadow: none !important; }
body.skin-fruits #playButton {
  background-color: var(--fr-accent) !important;
  border-radius: 11px !important;
}
body.skin-fruits #playButton:hover { background-color: var(--fr-accent-hi) !important; }
/* FRUIT CHARACTER on the GUI itself — "las ramitas, estilo de la fruta" (errorx002 2026-09-21). A small
   leafy sprig tucked in the top-right of the main cards, so the panels read as an orchard/picnic thing and
   not just recoloured boxes. pointer-events:none so it never eats clicks; drawn as an inline SVG so no asset
   fetch. Same pattern as skin-elegant's ::before sheen (these cards are positioned, so absolute works). */
body.skin-fruits #optionsCard::after,
body.skin-fruits #playMenu::after,
body.skin-fruits #credits::after {
  content: ""; position: absolute; top: 8px; right: 10px;
  width: 46px; height: 46px; opacity: .85; pointer-events: none; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 56 C22 42 32 30 54 12' stroke='%235a3d1e' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M24 40 C13 36 11 25 19 21 C27 25 29 36 24 40 Z' fill='%236ba050'/%3E%3Cpath d='M36 27 C25 23 23 12 31 8 C39 12 41 23 36 27 Z' fill='%237fb862'/%3E%3Cpath d='M42 42 C46 33 56 31 60 37 C56 46 46 48 42 42 Z' fill='%235a8f3e'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* READABLE PANEL TEXT (errorx002 2026-09-21: "arregla los colores del texto de la interfaz de opciones y
   otros, que el color no cuadra y eso hace ilegible todo"). Base .optLabel/#optionsTitle use the dark-theme
   --th-text (a LIGHT ink) which vanished on the Fruits cream — headings were washed out while the mid-grey
   descriptions survived (his Audio-tab screenshot). Repaint all panel text in the warm fruit inks: headings
   and titles in cocoa (--fr-text), secondary/description text in muted brown (--fr-muted). Colour only — no
   font or letter-spacing change (Fruits keeps the soft rounded default; custom fonts are a separate pass). */
body.skin-fruits #optionsTitle,
body.skin-fruits #changelogTitle,
body.skin-fruits #tipsTitle,
body.skin-fruits #contactTitle,
body.skin-fruits #disconnectTitle,
body.skin-fruits #adblockTitle,
body.skin-fruits #respawnTitle,
body.skin-fruits .optLabel,
body.skin-fruits .bold,
body.skin-fruits .text,
body.skin-fruits .light,
body.skin-fruits .lbName,
body.skin-fruits .lbScore,
body.skin-fruits .lbRank,
body.skin-fruits .clItem,
body.skin-fruits .clDate,
body.skin-fruits #creditsContent,
body.skin-fruits #changelogContent,
body.skin-fruits #tipsContent,
body.skin-fruits #accountContent {
  color: var(--fr-text) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
body.skin-fruits .optSub,
body.skin-fruits .clSub,
body.skin-fruits .optComing { color: var(--fr-muted) !important; }
/* Settings tabs (Video / Interface / Effects / Audio / Controls): inactive = muted ink on the cream,
   active = fruit-green like the toggles and Play button, so the whole panel shares one accent. */
body.skin-fruits .optTab { color: var(--fr-muted) !important; }
body.skin-fruits .optTab.on { background: var(--fr-accent) !important; color: #fff !important; }
body.skin-fruits #optionsClose { color: var(--fr-muted) !important; }
/* Upgrade bar feel on Fruits (errorx002 2026-09-21, three reports converging): he wants the FILL to rise
   SMOOTHLY ("podrias agregarle suavizado a la barra al mejorar... subia asi de forma tiesa y fea") but WITHOUT
   the bouncy "saltito" where the whole bar grows/pops on each point ("la barra crece al subirle, da cringe").
   That pop is the BEAT (.statBeat -> statBeatAnim, scaleX 1 -> 1.08 -> 1), NOT the fill slide. So keep the base
   .statBarSlide 0.6s ease (the smoothing) and the sweep shine (the gracia) — an earlier pass wrongly killed the
   slide too, which is what made it feel stiff — and disable ONLY the scaleX beat here. Fruits-scoped, so Modern
   and the other skins keep the pop. */
body.skin-fruits .statBarLeft.statBeat,
body.skin-fruits .statBarRight.statBeat { animation: none !important; }
/* Interface Style + Language pickers were STILL illegible (errorx002 2026-09-21): the .optStyle pills (Modern /
   Classic / Elegant / ... and English / Español) inherit color:var(--th-text) + background:var(--th-track) from
   the theme, i.e. light ink on the Fruits cream. Repaint them in the fruit palette — face pill, cocoa ink, green
   accent for hover/active — matching how Elegant and Light skins restyle these same pills. */
body.skin-fruits .optStyle {
  background: var(--fr-face) !important;
  border-color: var(--fr-edge) !important;
  color: var(--fr-text) !important;
  text-shadow: none !important;
}
body.skin-fruits .optStyle:hover { border-color: var(--fr-accent) !important; }
body.skin-fruits .optStyle.active {
  border-color: var(--fr-accent) !important;
  box-shadow: 0 0 0 1px var(--fr-accent) !important;
  background: #d8ecc0 !important;
  color: var(--fr-text) !important;
}

/* ==== FRUITS — upgrade bars, tank-upgrade selectors, organic rounding (errorx002 2026-09-21) ==========
   Batch: "cambiale los colores de las barras de mejora", "los selectores de mejoras ... otros colores, mas
   conforme a la interfaz", "el redondeo ... mas organico, mas natural". All fruits-scoped — Modern and the
   other skins are untouched. Organic corners are DIAGONAL (TL/BR larger than TR/BL) so panels read hand-made
   instead of a uniform pill. Tune the radii and the .statBarSlide filter to taste.
   ==================================================================================================== */

/* upgrade / stat bars: warm cocoa track (was stark black) + fills warmed toward the orchard palette but kept
   distinguishable (same idea as Depths' graphite filter). Track stays dark so the stock light label text
   remains readable over both the track and the fill. */
body.skin-fruits .statBarLeft,
body.skin-fruits .statBarRight {
  background: #3a2c18;
  border: 1px solid var(--fr-edge);
  border-radius: 18px 11px 18px 11px;
}
body.skin-fruits .statBarInner { border-radius: 12px 8px 12px 8px; }
body.skin-fruits .statBarSlide,
body.skin-fruits .statBarSlide2 {
  border-radius: 12px 8px 12px 8px;
  filter: saturate(.72) brightness(.98) sepia(.14) hue-rotate(-6deg);
}
body.skin-fruits .statButton {
  background: var(--fr-accent);
  color: #fff8ec;
  border-radius: 11px 7px 11px 7px;
}
body.skin-fruits .statButtonDisabled {
  background: var(--fr-muted);
  color: var(--fr-face);
  opacity: .45;
  border-radius: 11px 7px 11px 7px;
}

/* tank-upgrade selector boxes: warm frame + cream face + organic corners, instead of the stark black chrome.
   The coloured centre is the tank preview itself (drawn on the canvas), so this restyles the FRAME/face to
   sit in the orchard palette. */
body.skin-fruits .upgradeBox {
  border-color: var(--fr-muted);
  border-width: 5px;
  border-radius: 24px 12px 24px 12px;
  background: var(--fr-face);
  box-shadow: 0 4px 12px rgba(70,54,20,.16);
}
body.skin-fruits .upgradeBox:hover { border-color: var(--fr-accent); }
body.skin-fruits .upgradeBoxLower { background: rgba(104,78,40,.12); }
body.skin-fruits .upgradeName {
  color: var(--fr-text);
  text-shadow: 0 1px 2px rgba(255,250,236,.9), 0 0 3px rgba(255,250,236,.7);
}

/* more organic rounding on the main panels + pills (diagonal, leaf-like) */
body.skin-fruits #optionsCard,
body.skin-fruits #playMenu,
body.skin-fruits #credits,
body.skin-fruits #changelog {
  border-radius: 24px 12px 24px 12px !important;
}
body.skin-fruits .optStyle,
body.skin-fruits .optSwatch {
  border-radius: 13px 7px 13px 7px !important;
}
body.skin-fruits #playButton {
  border-radius: 16px 9px 16px 9px !important;
}
/* ---- Quicksand type for the Fruits DOM UI (errorx002 2026-09-21) ---------------------------------------------
   Applied to the text-bearing menu/HUD elements the Fruits block already themes — scoped to those selectors,
   NOT `*`, so nothing icon/glyph-based is disturbed. In-game names/chat draw on the canvas text atlas and are
   unaffected by CSS entirely. Fruits-gated; --fr-font falls back to system rounded sans if the face is slow. */
body.skin-fruits #title,
body.skin-fruits #playMenu, body.skin-fruits #playButton, body.skin-fruits #optionsCard,
body.skin-fruits #credits, body.skin-fruits #creditsText, body.skin-fruits #creditsContent,
body.skin-fruits #featured, body.skin-fruits #serverSelect, body.skin-fruits #serverBrowser,
body.skin-fruits #serverSelectSlide, body.skin-fruits #serverSelectLeft, body.skin-fruits #serverSelectRight,
body.skin-fruits #serverSelectLowerText, body.skin-fruits #serverSelectArrow, body.skin-fruits #channelName,
body.skin-fruits #name, body.skin-fruits #optionsTitle, body.skin-fruits #optionsClose,
body.skin-fruits #changelog, body.skin-fruits #changelogTitle, body.skin-fruits #changelogContent,
body.skin-fruits #tipsTitle, body.skin-fruits #tipsContent, body.skin-fruits #accountContent,
body.skin-fruits #contactTitle, body.skin-fruits #disconnectTitle, body.skin-fruits #respawnTitle,
body.skin-fruits #adblockTitle, body.skin-fruits #connecting, body.skin-fruits #connectingSmall,
body.skin-fruits .connLabel, body.skin-fruits .optLabel, body.skin-fruits .optSub,
body.skin-fruits .optComing, body.skin-fruits .optTab, body.skin-fruits .optStyle,
body.skin-fruits .optSwatch, body.skin-fruits .bold, body.skin-fruits .text,
body.skin-fruits .light, body.skin-fruits .clItem, body.skin-fruits .clDate,
body.skin-fruits .clSub, body.skin-fruits .lbName, body.skin-fruits .lbRank,
body.skin-fruits .lbScore, body.skin-fruits .statButton, body.skin-fruits .statButtonDisabled,
body.skin-fruits .upgradeName {
  font-family: var(--fr-font) !important;
}
/* ---- HUD: name / level / score / next-level beside the minimap, FRUITS-ONLY (errorx002 2026-09-21 arrow) ---
   He wants the bottom-centre name/level/score/XP block moved UP beside the minimap. The shared body.hudAlt
   relayout already does this (style.css STEP 3 ~5424), but hudAlt affects EVERY non-stock skin and he stressed
   not to repeat that ("afecto a todos"). Fruits stays on the stock HUD (SKIN_STOCK_HUD.fruits) so hudAlt never
   fires for it — so this re-creates ONLY that name-block step, scoped to skin-fruits. Geometry copied verbatim
   from the hudAlt version: minimap is 180px at left:10px, grows to 1.25x (ends ~235px) on hover, so the column
   sits at left:244px and nudges to 268px while the map is hovered (body.mapHoverOn — set globally by the minimap
   mousemove handler @script2.js:9217, NOT skin-gated). The two bars keep their own inline px geometry; only the
   box moves. Just this block moves — the upgrade grids / vitals stay in their stock spots (he only pointed here). */
body.skin-fruits #tankName,
body.skin-fruits #tankLevel,
body.skin-fruits #tankScore,
body.skin-fruits #tankPartialLevel {
  left: 244px !important;
  bottom: auto !important;
  transform: none !important;
  transition: left 0.9s cubic-bezier(0.16, 1.06, 0.3, 1);
}
body.skin-fruits #tankName         { top: 8px !important;  font-size: 24px !important; text-align: left !important; width: auto !important; }
body.skin-fruits #tankLevel        { top: 38px !important; font-size: 15px !important; text-align: left !important; }
body.skin-fruits #tankScore        { top: 60px !important; }
body.skin-fruits #tankPartialLevel { top: 94px !important; }
body.skin-fruits.mapHoverOn #tankName,
body.skin-fruits.mapHoverOn #tankLevel,
body.skin-fruits.mapHoverOn #tankScore,
body.skin-fruits.mapHoverOn #tankPartialLevel {
  left: 268px !important;
}

/* ===== KONTAKT-STYLE SKIN MENU (errorx002 2026-09-21) ===================================================
   A big customization modal opened from the bottom-right #skinMenuBtn. Cloned from the #optionsMenu pattern
   (fixed full-screen veil + centered card, reuses optVeilIn/optVeilOut). Left column = big skin rows with a
   swatch + label; right column = a per-skin GUI preview mockup (top) and the selected skin's info (bottom).
   Row content + preview/info are populated by __buildSkinMenu in script2.js. Every var() has a fallback so it
   renders cleanly even under a theme that doesn't define that token. Gated to __aaiAllowed for now. */
#skinMenuBtn {
  /* NOTE: shown value is `flex`, NOT `none`. Visibility is driven by the INLINE style="display:none" in the
     markup, which __refreshSkin clears (sets .style.display='') to reveal for gated accounts. If this base rule
     were `display:none`, clearing the inline style would fall back to it and the button would stay hidden — the
     exact bug errorx002 hit 2026-09-21. The .optStyleRow rows work the same way and likewise have no display here. */
  display: flex;
  align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--th-track, rgba(20,26,40,.72));
  border: 1px solid var(--th-border, rgba(255,255,255,.12));
  color: var(--th-text, #e7ecf5);
  font-weight: 700; font-size: 14px; letter-spacing: .04em;
  cursor: pointer; user-select: none;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
#skinMenuBtn:hover { transform: translateY(-1px); border-color: var(--th-accent, rgba(120,170,255,.65)); }
#skinMenuBtn .smbIcon { font-size: 15px; opacity: .9; }

#skinMenu {
  position: fixed; inset: 0; z-index: 90000; display: none;
  align-items: center; justify-content: center;
  background: rgba(6,10,20,.66); backdrop-filter: blur(7px);
}
#skinMenu.open { display: flex; animation: optVeilIn .22s ease both; }
#skinMenu.closing { display: flex; animation: optVeilOut .22s ease both; }
#skinMenu.open #skinMenuCard { animation: smRise .40s cubic-bezier(.16,.84,.28,1) both; }
#skinMenu.closing #skinMenuCard { animation: smFall .22s cubic-bezier(.4,0,.7,.2) both; }
@keyframes smRise { 0%{opacity:0;transform:translateY(42px) scale(.97);filter:blur(6px)} 60%{opacity:1;filter:blur(0)} 100%{opacity:1;transform:none;filter:blur(0)} }
@keyframes smFall { 0%{opacity:1;transform:none;filter:blur(0)} 100%{opacity:0;transform:translateY(24px) scale(.985);filter:blur(5px)} }

#skinMenuCard {
  width: min(94vw, 900px); height: min(86vh, 560px);
  /* follows the THEME like #optionsCard (n00bi 2026-09-29: "text font color issue in Modern, Classic Light themes
     in the appearance popup"). It read only --th-panel, which no theme defines, so the card stayed navy #12182a
     while the text below followed --th-text: dark ink on navy under the Light / Aero swatches. */
  background: var(--th-panel, var(--th-card, #12182a));
  color: var(--th-text, #e7ecf5);
  border: 1px solid var(--th-border, rgba(255,255,255,.12));
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden;
}
#skinMenuHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--th-border, rgba(255,255,255,.10));
}
#skinMenuTitle { font-size: 18px; font-weight: 800; letter-spacing: .12em; }
#skinMenuClose { font-size: 26px; line-height: 1; cursor: pointer; opacity: .7; padding: 0 4px; }
#skinMenuClose:hover { opacity: 1; }

#skinMenuBody { flex: 1; display: flex; min-height: 0; }
#skinMenuList {
  width: 46%; padding: 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  border-right: 1px solid var(--th-border, rgba(255,255,255,.10));
}
.skinRow {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; min-height: 58px;
  border-radius: 12px; cursor: pointer;
  background: var(--th-track, rgba(255,255,255,.05));
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.skinRow:hover { transform: translateX(2px); background: var(--th-trackHi, rgba(255,255,255,.09)); }
.skinRow.active { border-color: var(--th-accent, #6aa6ff); background: var(--th-trackHi, rgba(255,255,255,.10)); }
.skinRow .srSwatch {
  width: 46px; height: 46px; border-radius: 9px; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.18); background-size: cover;
}
.skinRow .srText { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.skinRow .srName { font-size: 16px; font-weight: 700; }
.skinRow .srTag { font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skinRow .srLock { margin-left: auto; font-size: 11px; opacity: .6; letter-spacing: .1em; }

#skinMenuDetail { width: 54%; display: flex; flex-direction: column; min-width: 0; }
#skinMenuPreview {
  height: 50%; padding: 18px; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--th-border, rgba(255,255,255,.10));
}
#skinMenuPvHud {
  width: 100%; max-width: 330px; height: 84%; border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 11px; justify-content: flex-start;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  /* background / colours set inline per skin by __buildSkinMenu */
}
#skinMenuPvHud .pvTitle { font-size: 20px; font-weight: 800; letter-spacing: .12em; }
#skinMenuPvHud .pvBar { height: 12px; border-radius: 7px; overflow: hidden; }
#skinMenuPvHud .pvBar span { display: block; height: 100%; width: 68%; }
#skinMenuPvHud .pvBar2 span { width: 44%; }
#skinMenuPvHud .pvBoxes { display: flex; gap: 8px; margin-top: 4px; }
#skinMenuPvHud .pvBox { width: 40px; height: 40px; border-radius: 8px; }
#skinMenuInfo { flex: 1; padding: 16px 20px; overflow-y: auto; }
#skinMenuInfo .siName { font-size: 20px; font-weight: 800; margin-bottom: 3px; }
#skinMenuInfo .siTag { font-size: 13px; opacity: .8; margin-bottom: 12px; }
#skinMenuInfo .siH { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin: 12px 0 6px; }
#skinMenuInfo .siChars { display: flex; flex-wrap: wrap; gap: 6px; }
#skinMenuInfo .siChip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--th-track, rgba(255,255,255,.08)); }
#skinMenuInfo .siImp { font-size: 13px; line-height: 1.5; opacity: .9; }

@media (max-width: 720px) {
  #skinMenuCard { width: 96vw; height: 90vh; }
  #skinMenuBody { flex-direction: column; }
  #skinMenuList { width: auto; border-right: none; border-bottom: 1px solid var(--th-border, rgba(255,255,255,.10)); max-height: 44%; }
  #skinMenuDetail { width: auto; }
  #skinMenuPreview { height: auto; }
}
/* Fruits-cohesive skin (errorx002 tests on Fruits) — the modal + button pick up the orchard cream instead of
   the neutral dark default. Other skins get a follow-up override if wanted; the --th-* fallbacks already look
   fine on the dark themes. */
body.skin-fruits #skinMenuBtn { background: var(--fr-face); color: var(--fr-text); border-color: var(--fr-edge); font-family: var(--fr-font); }
body.skin-fruits #skinMenuBtn:hover { border-color: var(--fr-accent); }
body.skin-fruits #skinMenuCard { background: var(--fr-face); color: var(--fr-text); border-color: var(--fr-edge); font-family: var(--fr-font); }
body.skin-fruits #skinMenuHead, body.skin-fruits #skinMenuList, body.skin-fruits #skinMenuPreview { border-color: var(--fr-edge); }
body.skin-fruits .skinRow { background: rgba(124,106,69,.10); }
body.skin-fruits .skinRow:hover { background: rgba(124,106,69,.16); }
body.skin-fruits .skinRow.active { border-color: var(--fr-accent); background: rgba(107,160,80,.14); }
body.skin-fruits #skinMenuInfo .siChip { background: rgba(124,106,69,.14); }
/* Classic + Classic Light (n00bi 2026-09-29): the appearance card had no Classic rule, so it kept the stock navy
   card in both. Same flat --cl-* face, hairline and ink as the Classic Settings card; the rows are tints of the ink,
   so they read on the white Classic Light card too. */
body.skin-classic #skinMenuCard {
  background: var(--cl-face); color: var(--cl-text);
  border: 1px solid var(--cl-edge); border-radius: 6px;
  box-shadow: 0 12px 36px rgba(0,0,0,.45); backdrop-filter: none;
}
body.skin-classic.skin-light #skinMenuCard, body.skin-classic.theme-light #skinMenuCard { box-shadow: 0 12px 36px rgba(30,36,48,.2); }
body.skin-classic #skinMenuHead, body.skin-classic #skinMenuList, body.skin-classic #skinMenuPreview { border-color: var(--cl-edge); }
body.skin-classic .skinRow { background: color-mix(in srgb, var(--cl-text) 6%, transparent); border-radius: 5px; }
body.skin-classic .skinRow:hover { background: color-mix(in srgb, var(--cl-text) 10%, transparent); }
body.skin-classic .skinRow.active { border-color: #5a8ad8; background: color-mix(in srgb, #5a8ad8 14%, transparent); }
body.skin-classic .skinRow .srSwatch { border-color: var(--cl-edge); border-radius: 4px; }
body.skin-classic #skinMenuInfo .siChip { background: color-mix(in srgb, var(--cl-text) 8%, transparent); border-radius: 4px; }

/* ============================================ TANKCORE GUI (VA-X Corp / errorx002, doc 294-300) ==========
   "Frutiger Aero tosco y decrépito" pushed into WEIRDCORE (errorx002 2026-09-21: "colores toscos de interfaz
   rara weirdcore" + "los objetos de la interfaz tienen que tener posiciones raras ... que se sienta 'anormal'"):
   a mid-2000s glossy-plastic corporate UI with the colour grade gone wrong — sickly green-cast whites, an
   overexposed cyan, a bilious yellow-green, and a clashing dusty magenta "wrong note" — and every panel nudged a
   fraction off-true. A dead OS you are somehow still logged into. DUAL-AXIS: applies whether Tankcore is the SKIN
   (.skin-tankcore) or the THEME (.theme-tankcore) — the old skin-only block looked "vanilla" when he had it set
   as the theme. GATED to errorx002's client (femaleexpie_official) while built, so inert for everyone else.
   Shapes get their toxic neon palette from script2.js; this styles the GUI/HUD only and keeps the STOCK HUD
   layout (a re-skin, not a relayout). Off-kilter tilts use the independent `rotate:`/`translate:` props so they
   COMPOSE with panels' centering transforms instead of clobbering them (see
   [[css-independent-translate-scale-props]]). Team/tank colours stay 100% intact. */
body:is(.skin-tankcore, .theme-tankcore) {
  --tc-face:  rgba(228,238,214,.90);   /* off-white with a sickly green cast */
  --tc-face2: rgba(204,222,236,.94);   /* cool plastic body (bottom of the glass) */
  --tc-edge:  rgba(60,110,98,.42);     /* murky teal edge */
  --tc-text:  #1b3a30;                 /* deep murky teal-green ink */
  --tc-muted: #5f7c68;
  --tc-accent: #14c6e6;                /* overexposed cyan */
  --tc-accent2: #c3d84a;               /* bilious yellow-green (was clean lime) */
  --tc-accent-hi: #4ad9ec;
  --tc-clash: #cc6fb0;                 /* dusty weirdcore magenta — the deliberate "wrong" note */
  /* Desfasada system font (doc: "Tahoma o Trebuchet MS forzado") — the abandoned-corporate-software feel. */
  --tc-font: 'Trebuchet MS','Tahoma','Segoe UI',system-ui,sans-serif;
}
/* UPGRADE GLITCH (errorx002 2026-09-21: "quita ese crecimiento en X al mejorar ... podria ser que al mejorar,
   este tenga un pequeño glitch, para que se vea rebien"). The stock upgrade "beat" grows the bar in X (scaleX
   1.08 spring) — he finds it ugly. We reuse the SAME .statBeat class the render fn already adds on a genuine
   increase, but under Tankcore swap the scaleX growth for a brief weirdcore glitch: a jitter + hue/skew/invert
   flicker. Both axes so it fires whether Tankcore is the skin or the theme. Higher specificity + !important beats
   the base statBeatAnim; the inline per-stat colour bloom (set in JS) still flares underneath. */
body:is(.skin-tankcore, .theme-tankcore) .statBarLeft.statBeat,
body:is(.skin-tankcore, .theme-tankcore) .statBarRight.statBeat {
  animation: tcStatGlitch .3s linear 1 !important;
}
@keyframes tcStatGlitch {
  0%   { transform: translate(0,0);              filter: none; }
  15%  { transform: translate(-2px,1px) skewX(-4deg); filter: hue-rotate(45deg) saturate(1.7); }
  30%  { transform: translate(3px,-1px);         filter: invert(.18); }
  45%  { transform: translate(-3px,0) skewX(3deg);    filter: hue-rotate(-40deg); }
  60%  { transform: translate(2px,1px);          filter: none; }
  75%  { transform: translate(-1px,-1px) skewX(-2deg); filter: saturate(1.4); }
  100% { transform: translate(0,0);              filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  body:is(.skin-tankcore, .theme-tankcore) .statBarLeft.statBeat,
  body:is(.skin-tankcore, .theme-tankcore) .statBarRight.statBeat { animation: none !important; }
}
/* EYE-CHOSEN VIGNETTE (errorx002 2026-09-21): picking the eyed upgrade option makes a dark vignette rise out of
   nowhere over the whole screen — the GUI included — hold a beat, then fade. Replaces the earlier HUD jitter he
   found "cringe y muy sutil". render._tcEyeChosen appends a .tcEyeVeil to <body> (above every overlay) and toggles
   .tcEyeVeilOn; the CSS does the fade. Only ever created under Tankcore. Peak ≈ 14% centre / 42% edges (~"0 a 25%"). */
.tcEyeVeil {
  position: fixed; inset: 0; pointer-events: none; z-index: 100000; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.14) 32%, rgba(0,0,0,.42) 100%);
  transition: opacity .7s ease;
}
.tcEyeVeil.tcEyeVeilOn { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tcEyeVeil { transition: opacity .2s linear; } }
body:is(.skin-tankcore, .theme-tankcore) #overlay2 { background: transparent !important; }
body:is(.skin-tankcore, .theme-tankcore) #title {
  color: var(--tc-text) !important;
  text-shadow: 1px 1px 0 rgba(255,255,255,.55), -1px 0 0 rgba(204,111,176,.35) !important;  /* faint magenta mis-registration */
  letter-spacing: -.5px !important;   /* slightly "aplastado" */
  font-family: var(--tc-font) !important;
  rotate: -.8deg;                     /* off-true — independent prop composes with any centering transform */
  translate: -2px 0;
}
body:is(.skin-tankcore, .theme-tankcore) #serverSelect,
body:is(.skin-tankcore, .theme-tankcore) #playMenu,
body:is(.skin-tankcore, .theme-tankcore) #credits,
body:is(.skin-tankcore, .theme-tankcore) #featured,
body:is(.skin-tankcore, .theme-tankcore) #videoBox,
body:is(.skin-tankcore, .theme-tankcore) #serverBrowser,
body:is(.skin-tankcore, .theme-tankcore) #optionsCard {
  /* Glossy plastic glass with a wrong colour grade: sickly-green top sheen into a cool plastic body. */
  background: linear-gradient(177deg, rgba(240,246,220,.92), var(--tc-face) 42%, var(--tc-face2)) !important;
  background-image: linear-gradient(177deg, rgba(240,246,220,.92), var(--tc-face) 42%, var(--tc-face2)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -12px 24px rgba(120,180,210,.18), inset 0 0 40px rgba(204,111,176,.08), 0 0 0 1px var(--tc-edge), 0 10px 26px rgba(16,60,84,.22) !important;
  /* Nightmarecore (errorx002 2026-09-21): hard flat edge, NO rounding, NO blur — sharp and clinical, "sin
     esquinas redondeadas". A blunt 2px teal border box instead of soft glass. */
  border: 2px solid var(--tc-edge) !important;
  border-radius: 0 !important;
  color: var(--tc-text) !important;
  font-family: var(--tc-font) !important;
  rotate: .5deg;                      /* whole-panel tilt; per-panel overrides below de-align them */
  backdrop-filter: none !important;
}
/* Per-panel off-kilter — different small angles so nothing lines up ("que se sienta anormal"). */
body:is(.skin-tankcore, .theme-tankcore) #playMenu     { rotate: -.7deg; }
body:is(.skin-tankcore, .theme-tankcore) #serverSelect { rotate: .9deg; translate: 2px 0; }
body:is(.skin-tankcore, .theme-tankcore) #optionsCard  { rotate: -.5deg; }
body:is(.skin-tankcore, .theme-tankcore) #credits      { rotate: 1.1deg; }
body:is(.skin-tankcore, .theme-tankcore) #featured     { rotate: -.9deg; translate: -2px 1px; }
body:is(.skin-tankcore, .theme-tankcore) #serverSelectSlide,
body:is(.skin-tankcore, .theme-tankcore) #serverSelectLeft,
body:is(.skin-tankcore, .theme-tankcore) #serverSelectRight,
body:is(.skin-tankcore, .theme-tankcore) #creditsText,
body:is(.skin-tankcore, .theme-tankcore) #channelName { color: var(--tc-text) !important; text-shadow: 0 1px 0 rgba(255,255,255,.5) !important; }
body:is(.skin-tankcore, .theme-tankcore) #serverSelectLowerText,
body:is(.skin-tankcore, .theme-tankcore) #serverSelectArrow { color: var(--tc-muted) !important; }
body:is(.skin-tankcore, .theme-tankcore) .optStyle,
body:is(.skin-tankcore, .theme-tankcore) .optSwatch,
body:is(.skin-tankcore, .theme-tankcore) #name { border-radius: 0 !important; }   /* sharp, nightmarecore */
body:is(.skin-tankcore, .theme-tankcore) #name {
  background: rgba(236,242,220,.72) !important;   /* green-cast, off-white */
  border: 1px solid var(--tc-edge) !important;
  color: var(--tc-text) !important;
  font-family: var(--tc-font) !important;
  rotate: .8deg;                                  /* off-true */
}
body:is(.skin-tankcore, .theme-tankcore) .optToggle.on { background: var(--tc-accent) !important; }
/* Water bars — metallic/plastic aqua gradient, "demasiado metálicos/plásticos". */
body:is(.skin-tankcore, .theme-tankcore) .lbBar,
body:is(.skin-tankcore, .theme-tankcore) .lbTop1 .lbBar,
body:is(.skin-tankcore, .theme-tankcore) .lbTop2 .lbBar,
body:is(.skin-tankcore, .theme-tankcore) .lbTop3 .lbBar {
  background: linear-gradient(180deg, #cdf0b8, #3bbef0 50%, #1493c8) !important;  /* sickly-green top into plastic aqua */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(204,111,176,.25) !important;
}
body:is(.skin-tankcore, .theme-tankcore) .clItem::before { background: var(--tc-accent) !important; box-shadow: none !important; }
body:is(.skin-tankcore, .theme-tankcore) #playButton {
  background: linear-gradient(180deg, #6fe0d6, var(--tc-accent) 52%, #0a90bd) !important;
  background-color: var(--tc-accent) !important;
  /* hard magenta drop = the clashing "wrong" note, plus the soft glow */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 0 var(--tc-clash), 0 6px 14px rgba(16,120,160,.35) !important;
  border-radius: 0 !important;                       /* sharp, nightmarecore */
  font-family: var(--tc-font) !important;
  rotate: -1.2deg;                                  /* off-true */
}
body:is(.skin-tankcore, .theme-tankcore) #playButton:hover { background: linear-gradient(180deg, #74d9f5, var(--tc-accent-hi) 55%, #0e9ecb) !important; }
/* Readable panel text in the deep-teal ink (base .optLabel/#optionsTitle use a light dark-theme ink that
   would vanish on the pale glass — same fix Fruits needed). Colour + desfasada font, no layout change. */
body:is(.skin-tankcore, .theme-tankcore) #optionsTitle,
body:is(.skin-tankcore, .theme-tankcore) #changelogTitle,
body:is(.skin-tankcore, .theme-tankcore) #tipsTitle,
body:is(.skin-tankcore, .theme-tankcore) #contactTitle,
body:is(.skin-tankcore, .theme-tankcore) #disconnectTitle,
body:is(.skin-tankcore, .theme-tankcore) #adblockTitle,
body:is(.skin-tankcore, .theme-tankcore) #respawnTitle,
body:is(.skin-tankcore, .theme-tankcore) .optLabel,
body:is(.skin-tankcore, .theme-tankcore) .bold,
body:is(.skin-tankcore, .theme-tankcore) .text,
body:is(.skin-tankcore, .theme-tankcore) .light,
body:is(.skin-tankcore, .theme-tankcore) .lbName,
body:is(.skin-tankcore, .theme-tankcore) .lbScore,
body:is(.skin-tankcore, .theme-tankcore) .lbRank,
body:is(.skin-tankcore, .theme-tankcore) #changelogText,
body:is(.skin-tankcore, .theme-tankcore) #tipsText,
body:is(.skin-tankcore, .theme-tankcore) .clItem { color: var(--tc-text) !important; font-family: var(--tc-font) !important; text-shadow: none !important; }
body:is(.skin-tankcore, .theme-tankcore) .optSub,
body:is(.skin-tankcore, .theme-tankcore) .clSub,
body:is(.skin-tankcore, .theme-tankcore) .optComing { color: var(--tc-muted) !important; }
body:is(.skin-tankcore, .theme-tankcore) .optTab { color: var(--tc-muted) !important; font-family: var(--tc-font) !important; }
body:is(.skin-tankcore, .theme-tankcore) .optTab.on { color: var(--tc-accent) !important; }
body:is(.skin-tankcore, .theme-tankcore) #optionsClose { color: var(--tc-muted) !important; }
/* The option/style/language pills — repaint like Fruits does, so they read on the glass. */
body:is(.skin-tankcore, .theme-tankcore) .optStyle {
  background: rgba(236,242,220,.66) !important;   /* green-cast, off-white */
  border-color: var(--tc-edge) !important;
  color: var(--tc-text) !important;
  font-family: var(--tc-font) !important;
  text-shadow: none !important;
}
body:is(.skin-tankcore, .theme-tankcore) .optStyle:hover { border-color: var(--tc-accent) !important; }
/* Active pill leans on the clash magenta — the deliberately "wrong" selected state. */
body:is(.skin-tankcore, .theme-tankcore) .optStyle.active { border-color: var(--tc-clash) !important; background: rgba(204,111,176,.16) !important; box-shadow: 0 0 0 1px var(--tc-clash) !important; }

/* LOADING SCREEN — "Liminal Waiting" (doc 317-318): a frozen still of grass hills under a flat cloudless
   blue sky, with a glossy Frutiger-Aero ring. (The "Entering Simulation..." label text is a JS string swap —
   a small follow-up; this styles the visuals only.) Same override pattern the other gated skins use. */
body:is(.skin-tankcore, .theme-tankcore) #connecting {
  color: #17323f !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -.5px;
  gap: 28px;
  font-family: 'Trebuchet MS','Tahoma','Segoe UI',sans-serif !important;
}
body:is(.skin-tankcore, .theme-tankcore) #connecting::before {
  /* overexposed synthetic sky into a sickly-green XP-hills backyard, with a thin "wrong" magenta band at the
     horizon — the liminal grade gone off. No vignette. */
  background: linear-gradient(180deg, #9fe0ff 0%, #d8f2ee 45.6%, #d98cc0 46%, #b9d76a 46.4%, #6bb84a 100%);
}
body:is(.skin-tankcore, .theme-tankcore) .connSpin {
  width: 70px; height: 70px;
  border: 6px solid rgba(18,179,230,.26);
  border-top-color: #14c6e6;      /* overexposed cyan */
  border-right-color: #cc6fb0;    /* clash magenta — the "wrong" note */
  animation-duration: .9s;
}
body:is(.skin-tankcore, .theme-tankcore) .connLabel {
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  animation: connPulse 2.2s ease-in-out infinite;
}
body:is(.skin-tankcore, .theme-tankcore) #connectingSmall {
  color: #17323f !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.5) !important;
}

/* Kontakt skin-menu, Tankcore-cohesive (he'll pick Tankcore from this modal, so it should read glossy too). */
body:is(.skin-tankcore, .theme-tankcore) #skinMenuBtn { background: var(--tc-face); color: var(--tc-text); border-color: var(--tc-edge); font-family: var(--tc-font); }
body:is(.skin-tankcore, .theme-tankcore) #skinMenuBtn:hover { border-color: var(--tc-accent); }
body:is(.skin-tankcore, .theme-tankcore) #skinMenuCard { background: linear-gradient(180deg, rgba(255,255,255,.92), var(--tc-face) 46%, rgba(196,224,238,.94)); color: var(--tc-text); border-color: var(--tc-edge); font-family: var(--tc-font); }
body:is(.skin-tankcore, .theme-tankcore) #skinMenuHead, body:is(.skin-tankcore, .theme-tankcore) #skinMenuList, body:is(.skin-tankcore, .theme-tankcore) #skinMenuPreview { border-color: var(--tc-edge); }
body:is(.skin-tankcore, .theme-tankcore) .skinRow { background: rgba(120,180,210,.12); }
body:is(.skin-tankcore, .theme-tankcore) .skinRow:hover { background: rgba(120,180,210,.20); }
body:is(.skin-tankcore, .theme-tankcore) .skinRow.active { border-color: var(--tc-accent); background: rgba(59,190,240,.16); }
body:is(.skin-tankcore, .theme-tankcore) #skinMenuInfo .siChip { background: rgba(120,180,210,.18); }

/* ===== SHAPEBOAT WILLIE — "Silent Film Era" GUI (errorx002 / VA-X Corp 2026-09-21, doc 392-398) ==============
   A 1930s black-and-white cinema look: bone-white paper panels inside thick pure-black ink frames, an ornate
   serif (vaudeville / early art-deco) typeface, black ink text, and a black cinema-marquee play button. Dual-axis
   like the other VA-X skins (works as a SKIN or a THEME); gated to __aaiAllowed until zodus flips it public. */
body:is(.skin-shapeboat, .theme-shapeboat) {
  --sb-paper:  #f4f1ea;   /* bone-white celluloid paper */
  --sb-paper2: #eae6dd;   /* aged edge of the sheet */
  --sb-ink:    #141210;   /* pure ink black */
  --sb-ink2:   #2b2622;   /* softened ink for hover */
  --sb-muted:  #6a6258;   /* faded pencil grey */
  /* Display = a heavy 1930s poster face for title cards / marquee; body = a geometric deco sans. */
  --sb-display: 'DayPoster', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sb-font:   'JosefinSans', Georgia, 'Century Gothic', 'Trebuchet MS', sans-serif;
}
body:is(.skin-shapeboat, .theme-shapeboat) #overlay2 { background: transparent !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #title {
  color: var(--sb-ink) !important;
  font-family: var(--sb-display) !important;
  letter-spacing: .06em !important;
  text-shadow: 2px 2px 0 rgba(20,17,14,.18) !important;   /* a printed double-strike, like an old title card */
}
body:is(.skin-shapeboat, .theme-shapeboat) #serverSelect,
body:is(.skin-shapeboat, .theme-shapeboat) #playMenu,
body:is(.skin-shapeboat, .theme-shapeboat) #credits,
body:is(.skin-shapeboat, .theme-shapeboat) #featured,
body:is(.skin-shapeboat, .theme-shapeboat) #videoBox,
body:is(.skin-shapeboat, .theme-shapeboat) #serverBrowser,
body:is(.skin-shapeboat, .theme-shapeboat) #optionsCard {
  /* Bone paper inside a heavy black ink frame + a thin inner keyline = the ornate victorian title-card border. */
  background: var(--sb-paper) !important;
  background-image: linear-gradient(180deg, #f7f4ee, var(--sb-paper) 55%, var(--sb-paper2)) !important;
  border: 3px solid var(--sb-ink) !important;
  border-radius: 3px !important;
  box-shadow: inset 0 0 0 1px var(--sb-paper), inset 0 0 0 2px rgba(20,17,14,.55), 0 6px 20px rgba(0,0,0,.28) !important;
  color: var(--sb-ink) !important;
  font-family: var(--sb-font) !important;
  backdrop-filter: none !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #serverSelectSlide,
body:is(.skin-shapeboat, .theme-shapeboat) #serverSelectLeft,
body:is(.skin-shapeboat, .theme-shapeboat) #serverSelectRight,
body:is(.skin-shapeboat, .theme-shapeboat) #creditsText,
body:is(.skin-shapeboat, .theme-shapeboat) #channelName { color: var(--sb-ink) !important; text-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #serverSelectLowerText,
body:is(.skin-shapeboat, .theme-shapeboat) #serverSelectArrow { color: var(--sb-muted) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .optStyle,
body:is(.skin-shapeboat, .theme-shapeboat) .optSwatch,
body:is(.skin-shapeboat, .theme-shapeboat) #name { border-radius: 2px !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #name {
  background: #fbf9f4 !important;
  border: 2px solid var(--sb-ink) !important;
  color: var(--sb-ink) !important;
  font-family: var(--sb-font) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) .optToggle.on { background: var(--sb-ink) !important; }
/* Leaderboard bars: solid black ink on the bone sheet (period woodcut ink; keeps ranks legible). */
/* Menu leaderboard score bars: a FAINT ink wash, not solid black — the names/scores/rank are ink-black text
   drawn OVER these bars (z-index 1), so a solid --sb-ink bar made the leader's name black-on-black / invisible
   (errorx002 2026-09-22 "el texto ... esta MUY oscuro y no se ve"). A low-alpha wash reads as a printed
   ranking-table row and keeps the ink text legible; top-3 get a slightly stronger wash for rank hierarchy. */
body:is(.skin-shapeboat, .theme-shapeboat) .lbBar { background: rgba(20,17,14,.12) !important; box-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .lbTop1 .lbBar { background: rgba(20,17,14,.24) !important; box-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .lbTop2 .lbBar { background: rgba(20,17,14,.19) !important; box-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .lbTop3 .lbBar { background: rgba(20,17,14,.15) !important; box-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .clItem::before { background: var(--sb-ink) !important; box-shadow: none !important; }
/* The play button as a black cinema-marquee plate with bone lettering and a bone keyline. */
body:is(.skin-shapeboat, .theme-shapeboat) #playButton {
  background: var(--sb-ink) !important;
  background-image: none !important;
  color: var(--sb-paper) !important;
  border: 2px solid var(--sb-ink) !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 0 2px var(--sb-paper), inset 0 0 0 3px var(--sb-ink), 0 4px 0 rgba(20,17,14,.35) !important;
  font-family: var(--sb-display) !important;
  letter-spacing: .08em !important;
  text-shadow: none !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #playButton:hover { background: var(--sb-ink2) !important; }
/* Panel text -> black ink in the vaudeville serif. */
body:is(.skin-shapeboat, .theme-shapeboat) #optionsTitle,
body:is(.skin-shapeboat, .theme-shapeboat) #changelogTitle,
body:is(.skin-shapeboat, .theme-shapeboat) #tipsTitle,
body:is(.skin-shapeboat, .theme-shapeboat) #contactTitle,
body:is(.skin-shapeboat, .theme-shapeboat) #disconnectTitle,
body:is(.skin-shapeboat, .theme-shapeboat) #adblockTitle,
body:is(.skin-shapeboat, .theme-shapeboat) #respawnTitle,
body:is(.skin-shapeboat, .theme-shapeboat) .optLabel,
body:is(.skin-shapeboat, .theme-shapeboat) .bold,
body:is(.skin-shapeboat, .theme-shapeboat) .text,
body:is(.skin-shapeboat, .theme-shapeboat) .light,
body:is(.skin-shapeboat, .theme-shapeboat) .lbName,
body:is(.skin-shapeboat, .theme-shapeboat) .lbScore,
body:is(.skin-shapeboat, .theme-shapeboat) .lbRank,
body:is(.skin-shapeboat, .theme-shapeboat) #changelogText,
body:is(.skin-shapeboat, .theme-shapeboat) #tipsText,
body:is(.skin-shapeboat, .theme-shapeboat) .clItem { color: var(--sb-ink) !important; font-family: var(--sb-font) !important; text-shadow: none !important; }
/* Section headers wear the poster display face (title-card lettering); body copy stays in the deco sans above. */
body:is(.skin-shapeboat, .theme-shapeboat) #optionsTitle,
body:is(.skin-shapeboat, .theme-shapeboat) #changelogTitle,
body:is(.skin-shapeboat, .theme-shapeboat) #tipsTitle,
body:is(.skin-shapeboat, .theme-shapeboat) #contactTitle,
body:is(.skin-shapeboat, .theme-shapeboat) #disconnectTitle,
body:is(.skin-shapeboat, .theme-shapeboat) #adblockTitle,
body:is(.skin-shapeboat, .theme-shapeboat) #respawnTitle { font-family: var(--sb-display) !important; letter-spacing: .04em !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .optSub,
body:is(.skin-shapeboat, .theme-shapeboat) .clSub,
body:is(.skin-shapeboat, .theme-shapeboat) .optComing { color: var(--sb-muted) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .optTab { color: var(--sb-muted) !important; font-family: var(--sb-font) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .optTab.on { color: var(--sb-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #optionsClose { color: var(--sb-muted) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .optStyle {
  background: #fbf9f4 !important;
  border: 2px solid var(--sb-ink) !important;
  color: var(--sb-ink) !important;
  font-family: var(--sb-font) !important;
  text-shadow: none !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) .optStyle:hover { border-color: var(--sb-ink2) !important; background: #f2eee6 !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .optStyle.active { border-color: var(--sb-ink) !important; background: var(--sb-ink) !important; color: var(--sb-paper) !important; box-shadow: inset 0 0 0 2px var(--sb-paper) !important; }
/* LOADING SCREEN — "animator's light table" (doc 388-390): frozen bone paper, a black iris ring for the spinner,
   ink text. Fruits/Depths/Tankcore each override #connecting; Shapeboat gets its own so it doesn't inherit the
   dark night-sky default on the bright paper. */
body:is(.skin-shapeboat, .theme-shapeboat) #connecting { color: var(--sb-ink) !important; letter-spacing: 1px; }
body:is(.skin-shapeboat, .theme-shapeboat) #connecting::before { background: radial-gradient(920px 640px at 50% 34%, #f7f4ee, var(--sb-paper) 56%, var(--sb-paper2)) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .connSpin {
  border: 6px solid rgba(20,17,14,.18) !important;
  border-top-color: var(--sb-ink) !important;
  border-right-color: var(--sb-ink2) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) .connLabel { color: var(--sb-ink) !important; font-family: var(--sb-font) !important; letter-spacing: .1em !important; text-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #connectingSmall { color: var(--sb-muted) !important; font-family: var(--sb-font) !important; text-shadow: none !important; }
/* Kontakt skin-menu chrome under Shapeboat. */
body:is(.skin-shapeboat, .theme-shapeboat) #skinMenuBtn { background: var(--sb-paper); color: var(--sb-ink); border-color: var(--sb-ink); font-family: var(--sb-font); }
body:is(.skin-shapeboat, .theme-shapeboat) #skinMenuBtn:hover { background: #f2eee6; }
body:is(.skin-shapeboat, .theme-shapeboat) #skinMenuCard { background: var(--sb-paper); color: var(--sb-ink); border-color: var(--sb-ink); font-family: var(--sb-font); }
body:is(.skin-shapeboat, .theme-shapeboat) #skinMenuHead, body:is(.skin-shapeboat, .theme-shapeboat) #skinMenuList, body:is(.skin-shapeboat, .theme-shapeboat) #skinMenuPreview { border-color: var(--sb-ink); }
body:is(.skin-shapeboat, .theme-shapeboat) .skinRow { background: rgba(20,17,14,.05); }
body:is(.skin-shapeboat, .theme-shapeboat) .skinRow:hover { background: rgba(20,17,14,.10); }
body:is(.skin-shapeboat, .theme-shapeboat) .skinRow.active { border-color: var(--sb-ink); background: rgba(20,17,14,.12); }
body:is(.skin-shapeboat, .theme-shapeboat) #skinMenuInfo .siChip { background: rgba(20,17,14,.08); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   SHAPEBOAT WILLIE — full-GUI 1930s parity pass (errorx002 2026-09-22: "se debe sentir 1930 ... como pasa con
   Depths ... en Shapeboat se siente que hay cosas que faltan", + "el de comprar server no cambia" + "para ver
   tu perfil"). Depths themes many surfaces Shapeboat never touched — the buy-server panel, the profile/account
   view, the in-game upgrade cards, the stat bars, the bottom score/level bars, the in-game leaderboard, and the
   settings controls (tab pill / sliders / toggles). This block mirrors Depths' coverage in the silent-film
   material: bone paper, thick black ink frames, HARD corners everywhere (nothing round), display-face titles,
   and filmstrip-black bar fills. !important wherever it fights an inline style or a base rule, same as Depths.
   Both style axes (.skin-shapeboat / .theme-shapeboat).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Accent variables, the Depths trick (style.css:4538): the settings tab pill, both slider thumbs and the
   toggles read --th-accent/--th-track, so overriding those turns them ink in one move instead of leaving them
   on the theme's blue. Only the accent-family tokens — the theme-shapeboat block (~2058) owns the panel ones. */
body.skin-shapeboat, body.theme-shapeboat {
  --th-accent:  linear-gradient(180deg, #141210, #2b2622);
  --th-accentc: rgba(20,17,14,.55);
  --th-track:   rgba(20,17,14,.16);
}

/* ── Buy a private server ("Comprar un Servidor") — mirrors depths 4843-4893 ────────────────────────────── */
body:is(.skin-shapeboat, .theme-shapeboat) .sbBuy {
  background: var(--sb-paper2) !important; color: var(--sb-ink) !important;
  border: 2px solid var(--sb-ink) !important; border-radius: 0 !important;
  font-family: var(--sb-font) !important; letter-spacing: .1em;
}
body:is(.skin-shapeboat, .theme-shapeboat) .sbBuy:hover { filter: none; background: var(--sb-paper) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .authCard {
  background: var(--sb-paper) !important;
  background-image: linear-gradient(180deg, #f7f4ee, var(--sb-paper) 55%, var(--sb-paper2)) !important;
  border: 3px solid var(--sb-ink) !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 2px var(--sb-paper), inset 0 0 0 3px rgba(20,17,14,.5) !important;
  backdrop-filter: none !important;
  font-family: var(--sb-font) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) .authCard, body:is(.skin-shapeboat, .theme-shapeboat) .authCard *,
body:is(.skin-shapeboat, .theme-shapeboat) .authTitle, body:is(.skin-shapeboat, .theme-shapeboat) .authLabel,
body:is(.skin-shapeboat, .theme-shapeboat) .authFieldLabel, body:is(.skin-shapeboat, .theme-shapeboat) .bpDur,
body:is(.skin-shapeboat, .theme-shapeboat) .bpRange, body:is(.skin-shapeboat, .theme-shapeboat) .bpCfgTitle,
body:is(.skin-shapeboat, .theme-shapeboat) .bpCfgRow label { color: var(--sb-ink) !important; text-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .authTitle { font-family: var(--sb-display) !important; letter-spacing: .04em !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .authInput, body:is(.skin-shapeboat, .theme-shapeboat) .bpSel,
body:is(.skin-shapeboat, .theme-shapeboat) .bpCfgIn {
  background: #fbf9f4 !important; border: 2px solid var(--sb-ink) !important; border-radius: 0 !important;
  color: var(--sb-ink) !important; font-family: var(--sb-font) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) .bpSel option { background: #f4f1ea; color: #141210; }
body:is(.skin-shapeboat, .theme-shapeboat) .authBtn { border-radius: 0 !important; font-family: var(--sb-display) !important; letter-spacing: .08em; }
body:is(.skin-shapeboat, .theme-shapeboat) .authSubmit { background: var(--sb-ink) !important; color: var(--sb-paper) !important; border: 2px solid var(--sb-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .authCancel { background: var(--sb-paper2) !important; color: var(--sb-muted) !important; border: 2px solid var(--sb-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .bpTier, body:is(.skin-shapeboat, .theme-shapeboat) .bpTierCard {
  background: var(--sb-paper2) !important; border: 2px solid var(--sb-ink) !important; border-radius: 0 !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) .bpTier:hover { background: var(--sb-paper) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .bpTierSel { border-color: var(--sb-ink) !important; background: #e4ded2 !important; box-shadow: inset 0 0 0 2px var(--sb-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .bpTierRate, body:is(.skin-shapeboat, .theme-shapeboat) .bpCost,
body:is(.skin-shapeboat, .theme-shapeboat) .bpTier span { color: var(--sb-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .bpTierFeats li { border-top: 1px solid rgba(20,17,14,.28) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .bpTierFeats .bpFeatYes { color: var(--sb-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .bpTierFeats .bpFeatNo  { color: var(--sb-muted) !important; }

/* ── Profile / account view ("ver tu perfil") — mirrors depths 4459/4489 + the login row 4946 ──────────── */
body:is(.skin-shapeboat, .theme-shapeboat) #accountFull {
  background: var(--sb-paper) !important;
  background-image: linear-gradient(180deg, #f7f4ee, var(--sb-paper) 55%, var(--sb-paper2)) !important;
  border: 3px solid var(--sb-ink) !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 2px var(--sb-paper), inset 0 0 0 3px rgba(20,17,14,.5) !important;
  backdrop-filter: none !important; font-family: var(--sb-font); color: var(--sb-ink);
}
body:is(.skin-shapeboat, .theme-shapeboat) #accountContent,
body:is(.skin-shapeboat, .theme-shapeboat) .acHead, body:is(.skin-shapeboat, .theme-shapeboat) .acName,
body:is(.skin-shapeboat, .theme-shapeboat) .acStat, body:is(.skin-shapeboat, .theme-shapeboat) .acStat b,
body:is(.skin-shapeboat, .theme-shapeboat) .acStat span, body:is(.skin-shapeboat, .theme-shapeboat) .acSectionTitle,
body:is(.skin-shapeboat, .theme-shapeboat) .acSection, body:is(.skin-shapeboat, .theme-shapeboat) .acPubName,
body:is(.skin-shapeboat, .theme-shapeboat) .acEmpty { color: var(--sb-ink) !important; font-family: var(--sb-font) !important; text-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .acName, body:is(.skin-shapeboat, .theme-shapeboat) .acSectionTitle { font-family: var(--sb-display) !important; letter-spacing: .03em; }
body:is(.skin-shapeboat, .theme-shapeboat) .acStat { border: 1px solid rgba(20,17,14,.4); background: rgba(20,17,14,.04); border-radius: 0; }
body:is(.skin-shapeboat, .theme-shapeboat) .acLoadBtn, body:is(.skin-shapeboat, .theme-shapeboat) .acPubAdd {
  background: var(--sb-paper2) !important; border: 2px solid var(--sb-ink) !important; border-radius: 0 !important; color: var(--sb-ink) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) .acPubTank { border: 2px solid var(--sb-ink) !important; border-radius: 0 !important; background: var(--sb-paper2) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #loggedInAs, body:is(.skin-shapeboat, .theme-shapeboat) #profileBtn,
body:is(.skin-shapeboat, .theme-shapeboat) #googleBtn, body:is(.skin-shapeboat, .theme-shapeboat) #panel > button:not([id]) {
  background: var(--sb-paper2) !important; background-image: none !important;
  border: 2px solid var(--sb-ink) !important; border-radius: 0 !important; box-shadow: none !important;
  backdrop-filter: none; font-family: var(--sb-font) !important; letter-spacing: .06em;
  color: var(--sb-ink) !important; text-shadow: none !important; animation: none !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #loggedInAs .liaLabel { color: var(--sb-muted) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #loggedInAs #loggedInAsName { color: var(--sb-ink) !important; font-weight: 700 !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #profileBtn:hover, body:is(.skin-shapeboat, .theme-shapeboat) #googleBtn:hover,
body:is(.skin-shapeboat, .theme-shapeboat) #panel > button:not([id]):hover { filter: none; background: var(--sb-paper) !important; border-color: var(--sb-ink) !important; }

/* ── In-game upgrade cards — mirrors depths 5610-5636. Overrides the inline polygonColors bg with paper. ── */
body:is(.skin-shapeboat, .theme-shapeboat) .upgradeBox {
  background: var(--sb-paper) !important;
  background-image: linear-gradient(180deg, #f7f4ee, var(--sb-paper2)) !important;
  border-radius: 0 !important; border-width: 3px !important; border-color: var(--sb-ink) !important;
  box-shadow: inset 0 0 0 1px var(--sb-paper) !important; overflow: hidden;
}
body:is(.skin-shapeboat, .theme-shapeboat) .upgradeBox:hover { border-color: #000 !important; box-shadow: inset 0 0 0 1px var(--sb-paper), 0 4px 0 rgba(20,17,14,.3) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .upgradeName {
  font-family: var(--sb-display); letter-spacing: .04em; text-transform: uppercase;
  text-shadow: 0 0 3px #f4f1ea, 0 0 2px #f4f1ea; -webkit-text-stroke: 0; color: var(--sb-ink);
}
body:is(.skin-shapeboat, .theme-shapeboat) .upgradeBoxLower { background: linear-gradient(180deg, transparent, rgba(20,17,14,.14)); }

/* ── Stat bars (+/- upgrade stats) — mirrors depths 5664-5687 ──────────────────────────────────────────── */
body:is(.skin-shapeboat, .theme-shapeboat) .statBarLeft, body:is(.skin-shapeboat, .theme-shapeboat) .statBarRight {
  background: var(--sb-paper2); border: 2px solid var(--sb-ink); border-radius: 0;
}
body:is(.skin-shapeboat, .theme-shapeboat) .statBarInner { border-radius: 0; background: rgba(20,17,14,.06); }
body:is(.skin-shapeboat, .theme-shapeboat) .statBarSlide, body:is(.skin-shapeboat, .theme-shapeboat) .statBarSlide2 { border-radius: 0; filter: saturate(.3) brightness(.6); }
body:is(.skin-shapeboat, .theme-shapeboat) .statBarText { font-family: var(--sb-font); color: var(--sb-ink); text-shadow: none; -webkit-text-stroke: 0; }
body:is(.skin-shapeboat, .theme-shapeboat) .statButton, body:is(.skin-shapeboat, .theme-shapeboat) .statButtonDisabled {
  border-radius: 0; background: var(--sb-ink); color: var(--sb-paper); border: 1px solid var(--sb-ink);
}
body:is(.skin-shapeboat, .theme-shapeboat) .statButtonDisabled { opacity: .3; }

/* ── Bottom score / level bars — mirrors depths 5980-5996. Cyan fill filtered down to inked graphite. ───── */
body:is(.skin-shapeboat, .theme-shapeboat) #tankScore, body:is(.skin-shapeboat, .theme-shapeboat) #tankPartialLevel {
  background: var(--sb-paper2) !important; border: 2px solid var(--sb-ink); border-radius: 0; box-shadow: none;
}
body:is(.skin-shapeboat, .theme-shapeboat) #tankScoreBar, body:is(.skin-shapeboat, .theme-shapeboat) #tankLevelBar { border-radius: 0; filter: saturate(.2) brightness(.45); }
body:is(.skin-shapeboat, .theme-shapeboat) #tankScoreDisplay, body:is(.skin-shapeboat, .theme-shapeboat) #tankLevelDisplay,
body:is(.skin-shapeboat, .theme-shapeboat) #tankLevel { font-family: var(--sb-font); color: var(--sb-ink); text-shadow: 0 0 3px #f4f1ea, 0 0 2px #f4f1ea; -webkit-text-stroke: 0; }

/* ── In-game leaderboard "CLASIFICACIÓN" — mirrors depths 4585-4599/4981-5020 (NOT the menu .lb* one) ───── */
body:is(.skin-shapeboat, .theme-shapeboat) #leaderboardTitle {
  font-family: var(--sb-display) !important; letter-spacing: .1em !important; text-transform: uppercase;
  color: var(--sb-ink) !important; text-shadow: none !important; -webkit-text-stroke: 0 !important;
  border-bottom: 2px solid var(--sb-ink); padding-bottom: 4px;
}
body:is(.skin-shapeboat, .theme-shapeboat) .leaderboardEntry {
  border-radius: 0 !important; background: var(--sb-paper2) !important; border: 1px solid var(--sb-ink) !important;
  color: var(--sb-ink) !important; text-shadow: none !important; font-variant-numeric: tabular-nums;
}
body:is(.skin-shapeboat, .theme-shapeboat) .leaderboardBar { border-radius: 0 !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .leaderboardSlide { border-radius: 0 !important; filter: saturate(.18) brightness(.5); opacity: .5; }
body:is(.skin-shapeboat, .theme-shapeboat) .leaderboardText { font-family: var(--sb-font) !important; color: var(--sb-ink) !important; text-shadow: 0 0 3px #f4f1ea !important; }

/* ── Settings controls: kill the last rounded/modern pills (tab pill, sliders, toggles, inputs) 4506-4582 ─ */
body:is(.skin-shapeboat, .theme-shapeboat) .optTabs { border-radius: 0; background: none; border: 2px solid var(--sb-ink); padding: 3px; gap: 0; }
body:is(.skin-shapeboat, .theme-shapeboat) .optTab.on { background: var(--sb-ink); color: var(--sb-paper); border-radius: 0; }
body:is(.skin-shapeboat, .theme-shapeboat) .optSlider { border-radius: 0; height: 3px; background: rgba(20,17,14,.2); }
body:is(.skin-shapeboat, .theme-shapeboat) .optSlider::-webkit-slider-thumb { border-radius: 0; width: 9px; height: 18px; background: var(--sb-ink); box-shadow: none; }
body:is(.skin-shapeboat, .theme-shapeboat) .optSlider::-moz-range-thumb { border-radius: 0; width: 9px; height: 18px; background: var(--sb-ink); box-shadow: none; border: 0; }
body:is(.skin-shapeboat, .theme-shapeboat) .optToggle { border-radius: 0; background: rgba(20,17,14,.16); border: 2px solid var(--sb-ink); }
body:is(.skin-shapeboat, .theme-shapeboat) .optToggleKnob { border-radius: 0; background: var(--sb-ink); box-shadow: none; }
body:is(.skin-shapeboat, .theme-shapeboat) .input { background: #fbf9f4 !important; background-image: none !important; border: 2px solid var(--sb-ink) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--sb-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .input:hover { background: var(--sb-paper2) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .red { background: rgba(20,17,14,.1) !important; border-color: var(--sb-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .link { color: var(--sb-ink) !important; text-decoration: none; border-bottom: 1px solid var(--sb-ink); }
body:is(.skin-shapeboat, .theme-shapeboat) .optControlsTitle { color: var(--sb-ink); font-family: var(--sb-display); letter-spacing: .04em; text-transform: uppercase; }
body:is(.skin-shapeboat, .theme-shapeboat) .optControlsHint, body:is(.skin-shapeboat, .theme-shapeboat) .optComing,
body:is(.skin-shapeboat, .theme-shapeboat) .optTestTag { color: var(--sb-muted); font-family: var(--sb-font); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   TANKCORE — buy-server / profile / upgrade / stat / score / leaderboard / controls parity (errorx002
   2026-09-22: "cambia el de TankCore a algo que si se vea bien al estilo"). Same surfaces the Shapeboat block
   above covers, but in TankCore's weirdcore / abandoned-corporate-software material: sickly off-white faces,
   murky-teal edges, Trebuchet, hard corners, and the clash-magenta (--tc-clash) as the deliberate wrong note on
   selection/hover. Tokens defined at style.css ~6898. TankCore already styles the menu chrome + .optTab/.optStyle/
   .optToggle.on + the .statBeat glitch, so this only fills the gaps it left. Both axes.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
body.skin-tankcore, body.theme-tankcore {
  --th-accent:  linear-gradient(180deg, var(--tc-accent), #0f9fb8);
  --th-accentc: var(--tc-accent);
  --th-track:   var(--tc-edge);
}
/* buy-server */
body:is(.skin-tankcore, .theme-tankcore) .sbBuy { background: var(--tc-face2) !important; color: var(--tc-text) !important; border: 1px solid var(--tc-edge) !important; border-radius: 0 !important; font-family: var(--tc-font) !important; }
body:is(.skin-tankcore, .theme-tankcore) .sbBuy:hover { filter: none; background: var(--tc-face) !important; border-color: var(--tc-clash) !important; }
body:is(.skin-tankcore, .theme-tankcore) .authCard {
  background: var(--tc-face) !important; background-image: none !important;
  border: 2px solid var(--tc-edge) !important; border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(204,111,176,.25) !important; backdrop-filter: none !important; font-family: var(--tc-font) !important;
}
body:is(.skin-tankcore, .theme-tankcore) .authCard, body:is(.skin-tankcore, .theme-tankcore) .authCard *,
body:is(.skin-tankcore, .theme-tankcore) .authTitle, body:is(.skin-tankcore, .theme-tankcore) .authLabel,
body:is(.skin-tankcore, .theme-tankcore) .authFieldLabel, body:is(.skin-tankcore, .theme-tankcore) .bpDur,
body:is(.skin-tankcore, .theme-tankcore) .bpRange, body:is(.skin-tankcore, .theme-tankcore) .bpCfgTitle,
body:is(.skin-tankcore, .theme-tankcore) .bpCfgRow label { color: var(--tc-text) !important; text-shadow: none !important; }
body:is(.skin-tankcore, .theme-tankcore) .authTitle { font-family: var(--tc-font) !important; letter-spacing: -.5px !important; text-shadow: 1px 1px 0 rgba(255,255,255,.55), -1px 0 0 rgba(204,111,176,.4) !important; }
body:is(.skin-tankcore, .theme-tankcore) .authInput, body:is(.skin-tankcore, .theme-tankcore) .bpSel,
body:is(.skin-tankcore, .theme-tankcore) .bpCfgIn { background: var(--tc-face2) !important; border: 1px solid var(--tc-edge) !important; border-radius: 0 !important; color: var(--tc-text) !important; font-family: var(--tc-font) !important; }
body:is(.skin-tankcore, .theme-tankcore) .bpSel option { background: #dfe9dc; color: #1b3a30; }
body:is(.skin-tankcore, .theme-tankcore) .authBtn { border-radius: 0 !important; font-family: var(--tc-font) !important; }
body:is(.skin-tankcore, .theme-tankcore) .authSubmit { background: var(--tc-accent) !important; color: #06222a !important; border: 1px solid var(--tc-text) !important; }
body:is(.skin-tankcore, .theme-tankcore) .authCancel { background: var(--tc-face2) !important; color: var(--tc-muted) !important; border: 1px solid var(--tc-edge) !important; }
body:is(.skin-tankcore, .theme-tankcore) .bpTier, body:is(.skin-tankcore, .theme-tankcore) .bpTierCard { background: var(--tc-face2) !important; border: 1px solid var(--tc-edge) !important; border-radius: 0 !important; }
body:is(.skin-tankcore, .theme-tankcore) .bpTier:hover { border-color: var(--tc-clash) !important; }
body:is(.skin-tankcore, .theme-tankcore) .bpTierSel { border-color: var(--tc-clash) !important; background: rgba(204,111,176,.14) !important; box-shadow: inset 0 0 0 2px var(--tc-clash) !important; }
body:is(.skin-tankcore, .theme-tankcore) .bpTierRate, body:is(.skin-tankcore, .theme-tankcore) .bpCost, body:is(.skin-tankcore, .theme-tankcore) .bpTier span { color: var(--tc-text) !important; }
body:is(.skin-tankcore, .theme-tankcore) .bpTierFeats li { border-top: 1px solid var(--tc-edge) !important; }
body:is(.skin-tankcore, .theme-tankcore) .bpTierFeats .bpFeatYes { color: #2f8f5e !important; }
body:is(.skin-tankcore, .theme-tankcore) .bpTierFeats .bpFeatNo  { color: var(--tc-clash) !important; }
/* profile */
body:is(.skin-tankcore, .theme-tankcore) #accountFull {
  background: var(--tc-face) !important; background-image: none !important; border: 2px solid var(--tc-edge) !important; border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(204,111,176,.25) !important; backdrop-filter: none !important; font-family: var(--tc-font); color: var(--tc-text);
}
body:is(.skin-tankcore, .theme-tankcore) #accountContent,
body:is(.skin-tankcore, .theme-tankcore) .acHead, body:is(.skin-tankcore, .theme-tankcore) .acName,
body:is(.skin-tankcore, .theme-tankcore) .acStat, body:is(.skin-tankcore, .theme-tankcore) .acStat b,
body:is(.skin-tankcore, .theme-tankcore) .acStat span, body:is(.skin-tankcore, .theme-tankcore) .acSectionTitle,
body:is(.skin-tankcore, .theme-tankcore) .acSection, body:is(.skin-tankcore, .theme-tankcore) .acPubName,
body:is(.skin-tankcore, .theme-tankcore) .acEmpty { color: var(--tc-text) !important; font-family: var(--tc-font) !important; text-shadow: none !important; }
body:is(.skin-tankcore, .theme-tankcore) .acStat { border: 1px solid var(--tc-edge); background: var(--tc-face2); border-radius: 0; }
body:is(.skin-tankcore, .theme-tankcore) .acLoadBtn, body:is(.skin-tankcore, .theme-tankcore) .acPubAdd { background: var(--tc-face2) !important; border: 1px solid var(--tc-edge) !important; border-radius: 0 !important; color: var(--tc-text) !important; }
body:is(.skin-tankcore, .theme-tankcore) .acPubTank { border: 1px solid var(--tc-edge) !important; border-radius: 0 !important; background: var(--tc-face2) !important; }
body:is(.skin-tankcore, .theme-tankcore) #loggedInAs, body:is(.skin-tankcore, .theme-tankcore) #profileBtn,
body:is(.skin-tankcore, .theme-tankcore) #googleBtn, body:is(.skin-tankcore, .theme-tankcore) #panel > button:not([id]) {
  background: var(--tc-face2) !important; background-image: none !important; border: 1px solid var(--tc-edge) !important; border-radius: 0 !important;
  box-shadow: none !important; backdrop-filter: none; font-family: var(--tc-font) !important; color: var(--tc-text) !important; text-shadow: none !important; animation: none !important;
}
body:is(.skin-tankcore, .theme-tankcore) #loggedInAs .liaLabel { color: var(--tc-muted) !important; }
body:is(.skin-tankcore, .theme-tankcore) #loggedInAs #loggedInAsName { color: var(--tc-text) !important; }
body:is(.skin-tankcore, .theme-tankcore) #profileBtn:hover, body:is(.skin-tankcore, .theme-tankcore) #googleBtn:hover,
body:is(.skin-tankcore, .theme-tankcore) #panel > button:not([id]):hover { filter: none; background: var(--tc-face) !important; border-color: var(--tc-clash) !important; }
/* upgrade cards */
body:is(.skin-tankcore, .theme-tankcore) .upgradeBox {
  background: var(--tc-face) !important; background-image: none !important; border-radius: 0 !important; border-width: 2px !important; border-color: var(--tc-edge) !important;
  box-shadow: inset 0 0 0 1px rgba(204,111,176,.12) !important; overflow: hidden;
}
body:is(.skin-tankcore, .theme-tankcore) .upgradeBox:hover { border-color: var(--tc-clash) !important; box-shadow: inset 0 0 0 1px rgba(204,111,176,.4), 3px 3px 0 rgba(204,111,176,.25) !important; }
body:is(.skin-tankcore, .theme-tankcore) .upgradeName { font-family: var(--tc-font); letter-spacing: -.3px; text-shadow: 1px 1px 0 rgba(255,255,255,.5); -webkit-text-stroke: 0; color: var(--tc-text); }
body:is(.skin-tankcore, .theme-tankcore) .upgradeBoxLower { background: linear-gradient(180deg, transparent, rgba(27,58,48,.18)); }
/* stat bars */
body:is(.skin-tankcore, .theme-tankcore) .statBarLeft, body:is(.skin-tankcore, .theme-tankcore) .statBarRight { background: var(--tc-face2); border: 1px solid var(--tc-edge); border-radius: 0; }
body:is(.skin-tankcore, .theme-tankcore) .statBarInner { border-radius: 0; background: rgba(27,58,48,.08); }
body:is(.skin-tankcore, .theme-tankcore) .statBarSlide, body:is(.skin-tankcore, .theme-tankcore) .statBarSlide2 { border-radius: 0; }
body:is(.skin-tankcore, .theme-tankcore) .statBarText { font-family: var(--tc-font); color: var(--tc-text); text-shadow: none; -webkit-text-stroke: 0; }
body:is(.skin-tankcore, .theme-tankcore) .statButton, body:is(.skin-tankcore, .theme-tankcore) .statButtonDisabled { border-radius: 0; background: var(--tc-text); color: var(--tc-face); }
body:is(.skin-tankcore, .theme-tankcore) .statButtonDisabled { opacity: .3; }
/* score / level bars */
body:is(.skin-tankcore, .theme-tankcore) #tankScore, body:is(.skin-tankcore, .theme-tankcore) #tankPartialLevel { background: var(--tc-face2) !important; border: 1px solid var(--tc-edge); border-radius: 0; box-shadow: none; }
body:is(.skin-tankcore, .theme-tankcore) #tankScoreBar, body:is(.skin-tankcore, .theme-tankcore) #tankLevelBar { border-radius: 0; }
body:is(.skin-tankcore, .theme-tankcore) #tankScoreDisplay, body:is(.skin-tankcore, .theme-tankcore) #tankLevelDisplay,
body:is(.skin-tankcore, .theme-tankcore) #tankLevel { font-family: var(--tc-font); color: var(--tc-text); text-shadow: 0 0 3px rgba(228,238,214,.9); -webkit-text-stroke: 0; }
/* in-game leaderboard */
body:is(.skin-tankcore, .theme-tankcore) #leaderboardTitle {
  font-family: var(--tc-font) !important; letter-spacing: -.3px !important; color: var(--tc-text) !important;
  text-shadow: 1px 1px 0 rgba(255,255,255,.5), -1px 0 0 rgba(204,111,176,.35) !important; -webkit-text-stroke: 0 !important;
  border-bottom: 1px solid var(--tc-edge); padding-bottom: 4px;
}
body:is(.skin-tankcore, .theme-tankcore) .leaderboardEntry { border-radius: 0 !important; background: var(--tc-face2) !important; border: 1px solid var(--tc-edge) !important; color: var(--tc-text) !important; text-shadow: none !important; font-variant-numeric: tabular-nums; }
body:is(.skin-tankcore, .theme-tankcore) .leaderboardBar { border-radius: 0 !important; }
body:is(.skin-tankcore, .theme-tankcore) .leaderboardSlide { border-radius: 0 !important; }
body:is(.skin-tankcore, .theme-tankcore) .leaderboardText { font-family: var(--tc-font) !important; color: var(--tc-text) !important; text-shadow: 0 0 3px rgba(228,238,214,.9) !important; }
/* settings controls TankCore lacked (it already owns .optTab / .optStyle / .optToggle.on) */
body:is(.skin-tankcore, .theme-tankcore) .optTabs { border-radius: 0; background: none; border: 1px solid var(--tc-edge); padding: 3px; gap: 0; }
body:is(.skin-tankcore, .theme-tankcore) .optSlider { border-radius: 0; height: 3px; background: var(--tc-edge); }
body:is(.skin-tankcore, .theme-tankcore) .optSlider::-webkit-slider-thumb { border-radius: 0; width: 9px; height: 18px; background: var(--tc-accent); box-shadow: none; }
body:is(.skin-tankcore, .theme-tankcore) .optSlider::-moz-range-thumb { border-radius: 0; width: 9px; height: 18px; background: var(--tc-accent); box-shadow: none; border: 0; }
body:is(.skin-tankcore, .theme-tankcore) .optToggle { border-radius: 0; background: var(--tc-edge); border: 1px solid var(--tc-edge); }
body:is(.skin-tankcore, .theme-tankcore) .optToggleKnob { border-radius: 0; background: var(--tc-text); box-shadow: none; }
body:is(.skin-tankcore, .theme-tankcore) .input { background: var(--tc-face2) !important; background-image: none !important; border: 1px solid var(--tc-edge) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--tc-text) !important; }
body:is(.skin-tankcore, .theme-tankcore) .input:hover { background: var(--tc-face) !important; }
body:is(.skin-tankcore, .theme-tankcore) .red { background: rgba(204,111,176,.18) !important; border-color: var(--tc-clash) !important; }
body:is(.skin-tankcore, .theme-tankcore) .link { color: var(--tc-accent) !important; text-decoration: none; border-bottom: 1px solid var(--tc-accent); }
body:is(.skin-tankcore, .theme-tankcore) .optControlsTitle { color: var(--tc-text); font-family: var(--tc-font); }
body:is(.skin-tankcore, .theme-tankcore) .optControlsHint, body:is(.skin-tankcore, .theme-tankcore) .optTestTag { color: var(--tc-muted); font-family: var(--tc-font); }

/* ═══ SHAPEBOAT — rubber-hose SQUASH & STRETCH on stat-up (errorx002 2026-09-22 "mejora las animaciones de cuando
   suben los stats ... se creativo"). Reuses the .statBeat class the render fn toggles on a genuine increase; swaps
   the stock scaleX spring for a 1930s cartoon bounce — the bar squashes then springs tall like a character taking
   a hop, settling with two smaller bounces. Anchored left so the fill edge stays put. Both axes. ═══ */
body:is(.skin-shapeboat, .theme-shapeboat) .statBarLeft.statBeat,
body:is(.skin-shapeboat, .theme-shapeboat) .statBarRight.statBeat {
  animation: sbStatHop .44s cubic-bezier(.28,.84,.42,1) 1 !important;
  transform-origin: left center;
}
@keyframes sbStatHop {
  0%   { transform: scale(1,1); }
  20%  { transform: scale(1.07,.68); }   /* anticipation squash */
  46%  { transform: scale(.95,1.24); }   /* stretch tall */
  68%  { transform: scale(1.03,.9); }
  85%  { transform: scale(.99,1.05); }
  100% { transform: scale(1,1); }
}
@media (prefers-reduced-motion: reduce) {
  body:is(.skin-shapeboat, .theme-shapeboat) .statBarLeft.statBeat,
  body:is(.skin-shapeboat, .theme-shapeboat) .statBarRight.statBeat { animation: none !important; }
}

/* ═══ SHAPEBOAT — INTERTITLE COMPOSITION (errorx002 2026-09-22 "ingeniartelas con como van ordenadas las cosas en
   la GUI ... se sienta mas 1930"). 1930s films staged text on ornamented INTERTITLE CARDS: a centered title, a
   small deco ornament rule beneath it, and a double keyline frame around the card. Purely additive (pseudo-
   elements + text-align) — never sets `position` on the panels (they are position:absolute + transform-centered;
   see the depths note) — the ::after resolves against the already-positioned panel. ═══ */
body:is(.skin-shapeboat, .theme-shapeboat) #title,
body:is(.skin-shapeboat, .theme-shapeboat) .authTitle,
body:is(.skin-shapeboat, .theme-shapeboat) #optionsTitle,
body:is(.skin-shapeboat, .theme-shapeboat) #serverSelectTitle { text-align: center; }
body:is(.skin-shapeboat, .theme-shapeboat) #title::after,
body:is(.skin-shapeboat, .theme-shapeboat) .authTitle::after,
body:is(.skin-shapeboat, .theme-shapeboat) #optionsTitle::after,
body:is(.skin-shapeboat, .theme-shapeboat) #serverSelectTitle::after {
  content: '\2014\00A0\25C6\00A0\2014';   /* — ◆ —  a silent-film intertitle ornament */
  display: block; text-align: center; margin-top: 5px;
  font-family: var(--sb-font); font-size: 12px; letter-spacing: .12em; color: var(--sb-ink); opacity: .68;
}
/* Double keyline "title-card" frame on the modal panels (non-scrolling ones only, so it doesn't scroll away). */
body:is(.skin-shapeboat, .theme-shapeboat) .authCard::after,
body:is(.skin-shapeboat, .theme-shapeboat) #playMenu::after {
  content: ''; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid rgba(20,17,14,.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   FRUITS AND PEARS — buy-server + profile panel parity (errorx002 2026-09-22 "lo otro de los paneles de Fruits
   and Pears, arregla eso tambien"). The gap surfaces Fruits never themed (Depths did), now in Fruits' warm
   orchard material: kraft-cream faces, cocoa ink, soft green accent, Quicksand, and the skin's naturalistic
   ROUNDED corners (unlike TankCore/Shapeboat which go sharp). Tokens @style.css:6512. Fruits already styles the
   HUD/upgrade/stat/leaderboard surfaces elsewhere — this only fills the buy-server + profile panels. SKIN axis. */
/* buy-server */
body.skin-fruits .sbBuy { background: var(--fr-face) !important; color: var(--fr-text) !important; border: 1px solid var(--fr-edge) !important; border-radius: 10px !important; font-family: var(--fr-font) !important; }
body.skin-fruits .sbBuy:hover { background: #f0e6cd !important; border-color: var(--fr-accent) !important; }
body.skin-fruits .authCard {
  background: var(--fr-face) !important; background-image: none !important;
  border: 1px solid var(--fr-edge) !important; border-radius: 16px 12px 16px 12px !important;
  box-shadow: 0 6px 22px rgba(58,44,24,.18) !important; backdrop-filter: none !important; font-family: var(--fr-font) !important;
}
body.skin-fruits .authCard, body.skin-fruits .authCard *,
body.skin-fruits .authTitle, body.skin-fruits .authLabel, body.skin-fruits .authFieldLabel,
body.skin-fruits .bpDur, body.skin-fruits .bpRange, body.skin-fruits .bpCfgTitle,
body.skin-fruits .bpCfgRow label { color: var(--fr-text) !important; text-shadow: none !important; }
body.skin-fruits .authTitle { font-family: var(--fr-font) !important; }
body.skin-fruits .authInput, body.skin-fruits .bpSel, body.skin-fruits .bpCfgIn {
  background: #f6efdc !important; border: 1px solid var(--fr-edge) !important; border-radius: 9px !important; color: var(--fr-text) !important; font-family: var(--fr-font) !important;
}
body.skin-fruits .bpSel option { background: #f0e6cd; color: var(--fr-text); }
body.skin-fruits .authBtn { border-radius: 10px !important; font-family: var(--fr-font) !important; }
body.skin-fruits .authSubmit { background: var(--fr-accent) !important; color: #0f2a10 !important; border: 1px solid #4f7d38 !important; }
body.skin-fruits .authCancel { background: #f6efdc !important; color: var(--fr-muted) !important; border: 1px solid var(--fr-edge) !important; }
body.skin-fruits .bpTier, body.skin-fruits .bpTierCard { background: #f6efdc !important; border: 1px solid var(--fr-edge) !important; border-radius: 12px !important; }
body.skin-fruits .bpTier:hover { border-color: var(--fr-accent) !important; }
body.skin-fruits .bpTierSel { border-color: var(--fr-accent) !important; background: #eef3d8 !important; box-shadow: inset 0 0 0 2px var(--fr-accent) !important; }
body.skin-fruits .bpTierRate, body.skin-fruits .bpCost, body.skin-fruits .bpTier span { color: var(--fr-text) !important; }
body.skin-fruits .bpTierFeats li { border-top: 1px solid var(--fr-edge) !important; }
body.skin-fruits .bpTierFeats .bpFeatYes { color: #2f8f5e !important; }
body.skin-fruits .bpTierFeats .bpFeatNo  { color: #b0552e !important; }
/* profile */
body.skin-fruits #accountFull {
  background: var(--fr-face) !important; background-image: none !important; border: 1px solid var(--fr-edge) !important; border-radius: 16px 12px 16px 12px !important;
  box-shadow: 0 6px 22px rgba(58,44,24,.18) !important; backdrop-filter: none !important; font-family: var(--fr-font); color: var(--fr-text);
}
body.skin-fruits .acHead, body.skin-fruits .acName, body.skin-fruits .acStat, body.skin-fruits .acStat b,
body.skin-fruits .acStat span, body.skin-fruits .acSectionTitle, body.skin-fruits .acSection,
body.skin-fruits .acPubName, body.skin-fruits .acEmpty { color: var(--fr-text) !important; font-family: var(--fr-font) !important; text-shadow: none !important; }
body.skin-fruits .acStat { border: 1px solid var(--fr-edge); background: #f6efdc; border-radius: 9px; }
body.skin-fruits .acLoadBtn, body.skin-fruits .acPubAdd { background: #f6efdc !important; border: 1px solid var(--fr-edge) !important; border-radius: 9px !important; color: var(--fr-text) !important; }
body.skin-fruits .acPubTank { border: 1px solid var(--fr-edge) !important; border-radius: 9px !important; background: #f6efdc !important; }
body.skin-fruits #loggedInAs, body.skin-fruits #profileBtn, body.skin-fruits #googleBtn, body.skin-fruits #panel > button:not([id]) {
  background: var(--fr-face) !important; background-image: none !important; border: 1px solid var(--fr-edge) !important; border-radius: 10px !important;
  box-shadow: none !important; backdrop-filter: none; font-family: var(--fr-font) !important; color: var(--fr-text) !important; text-shadow: none !important;
}
body.skin-fruits #loggedInAs .liaLabel { color: var(--fr-muted) !important; }
body.skin-fruits #loggedInAs #loggedInAsName { color: var(--fr-text) !important; }
body.skin-fruits #profileBtn:hover, body.skin-fruits #googleBtn:hover, body.skin-fruits #panel > button:not([id]):hover { background: #f0e6cd !important; border-color: var(--fr-accent) !important; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   SHAPEBOAT — CARDBOARD-CUTOUT GUI DEPTH (errorx002 2026-09-22: "el estilo de la GUI ... mas cartonero que
   desesperador ... no que se sienta semi-moderno"). The panels already carry the thick ink frame + inner
   keylines, but they still cast a SOFT blurred drop-shadow (0 6px 20px) — that blur is the "semi-modern" tell.
   Swap it for a HARD, un-blurred offset shadow so every panel reads as a flat paper/cardboard cutout laid on the
   set (the era's cutout-animation look) rather than a floating modern card. Keeps the ink frame + bone keylines.
   Placed after the parity block so it wins on equal specificity. Both axes. ═══════════════════════════════════ */
body:is(.skin-shapeboat, .theme-shapeboat) #playMenu,
body:is(.skin-shapeboat, .theme-shapeboat) #credits,
body:is(.skin-shapeboat, .theme-shapeboat) #changelog,
body:is(.skin-shapeboat, .theme-shapeboat) #optionsCard,
body:is(.skin-shapeboat, .theme-shapeboat) .authCard,
body:is(.skin-shapeboat, .theme-shapeboat) #accountFull {
  box-shadow: inset 0 0 0 1px var(--sb-paper), inset 0 0 0 2px rgba(20,17,14,.55), 7px 7px 0 rgba(20,17,14,.72) !important;
}
/* Buttons/pills as little cutout props: a small hard offset shadow + firm ink edge, so they read pressed-out of
   card stock rather than as flat modern chips. Hover lifts the cutout a touch (shadow grows, edge darkens). */
body:is(.skin-shapeboat, .theme-shapeboat) #playButton,
body:is(.skin-shapeboat, .theme-shapeboat) .optStyle,
body:is(.skin-shapeboat, .theme-shapeboat) .authBtn,
body:is(.skin-shapeboat, .theme-shapeboat) .bpTier {
  box-shadow: 3px 3px 0 rgba(20,17,14,.55) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #playButton:hover,
body:is(.skin-shapeboat, .theme-shapeboat) .optStyle:hover,
body:is(.skin-shapeboat, .theme-shapeboat) .authBtn:hover,
body:is(.skin-shapeboat, .theme-shapeboat) .bpTier:hover {
  box-shadow: 4px 4px 0 rgba(20,17,14,.78) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   NEON-SELECTOR PURGE + STAR/SHOP/ACH BUTTONS + TAB LEGIBILITY (errorx002 2026-09-22: "algunos selectores usan
   neon de moderno ... textos ilegibles porque muy blanco ... quita ese neon verdoso ... eso tambien para fruits
   y tankcore" + "no olvides los botones de estrellas, la tienda y los logros"). Stock accent = teal→green
   linear-gradient(135deg,#2ee6c6,#37f0a6); it survived on surfaces none of the three light skins had overridden:
   the buy-server tabs (.sbTab/.sbActive), the leaderboard-mode + changelog/tips tabs (which are ID-scoped
   #credits/#channel/#featured .input, so a bare .input skin rule LOSES the specificity fight — style.css:4746),
   the changelog date bar (.clDate) + its bullet (.clItem::before), and the star/shop/ach chips (dark navy +
   #eef4ff, illegible-looking against paper). Repainted per skin. Shop/ach PANEL interiors left for a follow-up
   (their row text colours aren't verified here). ═════════════════════════════════════════════════════════════ */

/* ---- SHAPEBOAT: paper + ink, sharp, intertitle selected-state ---- */
body:is(.skin-shapeboat, .theme-shapeboat) .sbTab { background: var(--sb-paper2) !important; color: var(--sb-muted) !important; border: 1px solid rgba(20,17,14,.3) !important; border-radius: 0 !important; font-family: var(--sb-font) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .sbTab.sbActive { background: var(--sb-ink) !important; color: var(--sb-paper) !important; border-color: var(--sb-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #credits .input,
body:is(.skin-shapeboat, .theme-shapeboat) #featured .input,
body:is(.skin-shapeboat, .theme-shapeboat) #channel .input { background: var(--sb-paper2) !important; color: var(--sb-ink) !important; border: 1px solid rgba(20,17,14,.35) !important; border-radius: 0 !important; font-family: var(--sb-font) !important; text-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #credits .input:hover,
body:is(.skin-shapeboat, .theme-shapeboat) #featured .input:hover,
body:is(.skin-shapeboat, .theme-shapeboat) #channel .input:hover { background: var(--sb-ink) !important; color: var(--sb-paper) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .clDate { background: var(--sb-ink) !important; color: var(--sb-paper) !important; border-radius: 0 !important; font-family: var(--sb-font) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .clItem::before { background: var(--sb-ink) !important; box-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #starBalance,
body:is(.skin-shapeboat, .theme-shapeboat) #starShop,
body:is(.skin-shapeboat, .theme-shapeboat) #achBtn, body:is(.skin-shapeboat,.theme-shapeboat) #clanBtn, body:is(.skin-shapeboat,.theme-shapeboat) #dailyBtn { background: var(--sb-paper) !important; color: var(--sb-ink) !important; border: 1px solid var(--sb-ink) !important; border-radius: 0 !important; box-shadow: 2px 2px 0 rgba(20,17,14,.5) !important; font-family: var(--sb-font) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #starBalanceNum, body:is(.skin-shapeboat, .theme-shapeboat) #achBtnCount { color: var(--sb-ink) !important; }

/* ---- FRUITS: warm cream + cocoa + green, rounded ---- */
body.skin-fruits .sbTab { background: #f6efdc !important; color: var(--fr-muted) !important; border: 1px solid var(--fr-edge) !important; border-radius: 8px !important; font-family: var(--fr-font) !important; }
body.skin-fruits .sbTab.sbActive { background: var(--fr-accent) !important; color: #0f2a10 !important; border-color: #4f7d38 !important; }
body.skin-fruits #credits .input,
body.skin-fruits #featured .input,
body.skin-fruits #channel .input { background: #f6efdc !important; color: var(--fr-text) !important; border: 1px solid var(--fr-edge) !important; border-radius: 8px !important; font-family: var(--fr-font) !important; text-shadow: none !important; }
body.skin-fruits #credits .input:hover,
body.skin-fruits #featured .input:hover,
body.skin-fruits #channel .input:hover { background: var(--fr-accent) !important; color: #0f2a10 !important; }
body.skin-fruits .clItem::before { background: var(--fr-accent) !important; box-shadow: none !important; }
body.skin-fruits #starBalance,
body.skin-fruits #starShop,
body.skin-fruits #achBtn, body.skin-fruits #clanBtn, body.skin-fruits #dailyBtn { background: var(--fr-face) !important; color: var(--fr-text) !important; border: 1px solid var(--fr-edge) !important; border-radius: 10px !important; font-family: var(--fr-font) !important; }
body.skin-fruits #starBalanceNum, body.skin-fruits #achBtnCount { color: var(--fr-text) !important; }

/* ---- TANKCORE: sickly faces + murky teal edge + cyan accent / magenta clash, sharp ---- */
body:is(.skin-tankcore, .theme-tankcore) .sbTab { background: var(--tc-face2) !important; color: var(--tc-muted) !important; border: 1px solid var(--tc-edge) !important; border-radius: 0 !important; font-family: var(--tc-font) !important; }
body:is(.skin-tankcore, .theme-tankcore) .sbTab.sbActive { background: var(--tc-accent) !important; color: #06222a !important; border-color: var(--tc-text) !important; }
body:is(.skin-tankcore, .theme-tankcore) #credits .input,
body:is(.skin-tankcore, .theme-tankcore) #featured .input,
body:is(.skin-tankcore, .theme-tankcore) #channel .input { background: var(--tc-face2) !important; color: var(--tc-text) !important; border: 1px solid var(--tc-edge) !important; border-radius: 0 !important; font-family: var(--tc-font) !important; text-shadow: none !important; }
body:is(.skin-tankcore, .theme-tankcore) #credits .input:hover,
body:is(.skin-tankcore, .theme-tankcore) #featured .input:hover,
body:is(.skin-tankcore, .theme-tankcore) #channel .input:hover { background: var(--tc-face) !important; border-color: var(--tc-clash) !important; color: var(--tc-text) !important; }
body:is(.skin-tankcore, .theme-tankcore) .clDate { background: var(--tc-text) !important; color: var(--tc-face) !important; border-radius: 0 !important; font-family: var(--tc-font) !important; }
body:is(.skin-tankcore, .theme-tankcore) .clItem::before { background: var(--tc-accent) !important; box-shadow: none !important; }
body:is(.skin-tankcore, .theme-tankcore) #starBalance,
body:is(.skin-tankcore, .theme-tankcore) #starShop,
body:is(.skin-tankcore, .theme-tankcore) #achBtn, body:is(.skin-tankcore,.theme-tankcore) #clanBtn, body:is(.skin-tankcore,.theme-tankcore) #dailyBtn { background: var(--tc-face2) !important; color: var(--tc-text) !important; border: 1px solid var(--tc-edge) !important; border-radius: 0 !important; font-family: var(--tc-font) !important; }
body:is(.skin-tankcore, .theme-tankcore) #starBalanceNum, body:is(.skin-tankcore, .theme-tankcore) #achBtnCount { color: var(--tc-text) !important; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   SHAPEBOAT WILLIE — hand-drawn 1930s MENU FRAMES / deco corners (errorx002 2026-09-22 "lo de menu frames ...
   agregalo para que se vea 1930s ... que se sienta que hasta retris fue dibujado a mano"). The deeper
   Cuphead-style ornament I offered at the end of turn 6. Each primary paper panel gets four ink deco-corner
   flourishes (double bracket + scroll curl + stud) inked as SVG BACKGROUND layers on the panel itself, NOT a
   ::before overlay — background-attachment `scroll` pins them to the panel frame so they do NOT scroll away on
   the scrolling panels (#optionsCard / .authCard are overflow-y:auto; the ::before-inset trap is doc'd at
   #optionsCard/2189). Corners are listed before the paper gradient so they paint on top. Never sets `position`
   on these panels (position/absolute-transform trap). Plus a hand-drawn inner double keyline via inset
   box-shadow, pinned the same way. Gated to __aaiAllowed; public flip = zodus. ═══ */
body:is(.skin-shapeboat, .theme-shapeboat) {
  --sb-corner-tl: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'48'%20viewBox%3D'0%200%2048%2048'%3E%3Cg%20transform%3D'rotate(0%2024%2024)'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23141210'%20stroke-linecap%3D'square'%20stroke-linejoin%3D'miter'%3E%3Cpath%20d%3D'M46%205%20H5%20V46'%20stroke-width%3D'2.6'%2F%3E%3Cpath%20d%3D'M46%2011%20H11%20V46'%20stroke-width%3D'1.4'%2F%3E%3Cpath%20d%3D'M46%2016%20H16%20V46'%20stroke-width%3D'0.9'%2F%3E%3C%2Fg%3E%3Crect%20x%3D'3.6'%20y%3D'3.6'%20width%3D'5'%20height%3D'5'%20fill%3D'%23141210'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --sb-corner-tr: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'48'%20viewBox%3D'0%200%2048%2048'%3E%3Cg%20transform%3D'rotate(90%2024%2024)'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23141210'%20stroke-linecap%3D'square'%20stroke-linejoin%3D'miter'%3E%3Cpath%20d%3D'M46%205%20H5%20V46'%20stroke-width%3D'2.6'%2F%3E%3Cpath%20d%3D'M46%2011%20H11%20V46'%20stroke-width%3D'1.4'%2F%3E%3Cpath%20d%3D'M46%2016%20H16%20V46'%20stroke-width%3D'0.9'%2F%3E%3C%2Fg%3E%3Crect%20x%3D'3.6'%20y%3D'3.6'%20width%3D'5'%20height%3D'5'%20fill%3D'%23141210'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --sb-corner-br: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'48'%20viewBox%3D'0%200%2048%2048'%3E%3Cg%20transform%3D'rotate(180%2024%2024)'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23141210'%20stroke-linecap%3D'square'%20stroke-linejoin%3D'miter'%3E%3Cpath%20d%3D'M46%205%20H5%20V46'%20stroke-width%3D'2.6'%2F%3E%3Cpath%20d%3D'M46%2011%20H11%20V46'%20stroke-width%3D'1.4'%2F%3E%3Cpath%20d%3D'M46%2016%20H16%20V46'%20stroke-width%3D'0.9'%2F%3E%3C%2Fg%3E%3Crect%20x%3D'3.6'%20y%3D'3.6'%20width%3D'5'%20height%3D'5'%20fill%3D'%23141210'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --sb-corner-bl: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'48'%20viewBox%3D'0%200%2048%2048'%3E%3Cg%20transform%3D'rotate(270%2024%2024)'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23141210'%20stroke-linecap%3D'square'%20stroke-linejoin%3D'miter'%3E%3Cpath%20d%3D'M46%205%20H5%20V46'%20stroke-width%3D'2.6'%2F%3E%3Cpath%20d%3D'M46%2011%20H11%20V46'%20stroke-width%3D'1.4'%2F%3E%3Cpath%20d%3D'M46%2016%20H16%20V46'%20stroke-width%3D'0.9'%2F%3E%3C%2Fg%3E%3Crect%20x%3D'3.6'%20y%3D'3.6'%20width%3D'5'%20height%3D'5'%20fill%3D'%23141210'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
body:is(.skin-shapeboat, .theme-shapeboat) #playMenu {
  background-image: var(--sb-corner-tl), var(--sb-corner-tr), var(--sb-corner-br), var(--sb-corner-bl), linear-gradient(180deg, #f7f4ee, var(--sb-paper) 55%, var(--sb-paper2)) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position: 6px 6px, right 6px top 6px, right 6px bottom 6px, left 6px bottom 6px, 0 0 !important;
  background-size: 44px 44px, 44px 44px, 44px 44px, 44px 44px, cover !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #optionsCard {
  background-image: var(--sb-corner-tl), var(--sb-corner-tr), var(--sb-corner-br), var(--sb-corner-bl), linear-gradient(180deg, #f7f4ee, var(--sb-paper) 55%, var(--sb-paper2)) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position: 6px 6px, right 6px top 6px, right 6px bottom 6px, left 6px bottom 6px, 0 0 !important;
  background-size: 44px 44px, 44px 44px, 44px 44px, 44px 44px, cover !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) .authCard {
  background-image: var(--sb-corner-tl), var(--sb-corner-tr), var(--sb-corner-br), var(--sb-corner-bl), linear-gradient(180deg, #f7f4ee, var(--sb-paper) 55%, var(--sb-paper2)) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position: 6px 6px, right 6px top 6px, right 6px bottom 6px, left 6px bottom 6px, 0 0 !important;
  background-size: 44px 44px, 44px 44px, 44px 44px, 44px 44px, cover !important;
}
/* Hand-drawn inner double keyline (pinned inset box-shadow: an ink hairline set in from the ink border, plus a
   fainter second rule further in = a title-card frame). Restates the existing paper/ink keyline so it is not
   lost, then adds the inner rule. */
body:is(.skin-shapeboat, .theme-shapeboat) #playMenu,
body:is(.skin-shapeboat, .theme-shapeboat) #optionsCard,
body:is(.skin-shapeboat, .theme-shapeboat) .authCard {
  box-shadow: inset 0 0 0 1px var(--sb-paper), inset 0 0 0 2px rgba(20,17,14,.55),
              inset 0 0 0 9px transparent, inset 0 0 0 10px rgba(20,17,14,.30),
              0 8px 22px rgba(0,0,0,.30) !important;
}
/* ── Menu leaderboard text legibility: a light bone halo so ink names/scores/rank stay readable on the
   graduated ink wash bars (pairs with the .lbBar wash fix above). ── */
body:is(.skin-shapeboat, .theme-shapeboat) .lbName,
body:is(.skin-shapeboat, .theme-shapeboat) .lbScore,
body:is(.skin-shapeboat, .theme-shapeboat) .lbRank { color: var(--sb-ink) !important; text-shadow: 0 0 2px rgba(244,241,234,.95), 0 1px 1px rgba(244,241,234,.9) !important; }
/* ── In-game leaderboard: lift the score-bar overlay off the ink text and strengthen the bone halo so names/
   scores read over the (inked) team bar. ── */
body:is(.skin-shapeboat, .theme-shapeboat) .leaderboardSlide { border-radius: 0 !important; filter: saturate(.22) brightness(.72); opacity: .38; }
body:is(.skin-shapeboat, .theme-shapeboat) .leaderboardText { font-family: var(--sb-font) !important; color: var(--sb-ink) !important; text-shadow: 0 0 3px #f4f1ea, 0 0 2px #f4f1ea, 0 1px 1px #f4f1ea !important; }


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   STAR SHOP + ACHIEVEMENTS panel interiors — per-skin reskin (errorx002 2026-09-22 "tanto la tienda como el
   menu de logros no cambiaron nada, arreglalos"). These panels (#shopPanel / #achPanel, zy3nith 2026-07-25)
   predate the skins so no body.skin-* rule ever matched them — they opened as the default dark-navy panel on
   every skin (TURN 6 deferred item). Reskinned to each skin's material. INFORMATION is preserved: the name-colour
   .shopSwatch fills stay (that's the product), and the "owned"/"done" status colours are re-pitched to read on the
   skin's ground rather than flattened. Gated (these skins are __aaiAllowed). ═══ */

/* ---- SHAPEBOAT: bone paper + ink, sharp, cardboard cutout ---- */
body:is(.skin-shapeboat, .theme-shapeboat) #shopPanel,
body:is(.skin-shapeboat, .theme-shapeboat) #achPanel {
  background: var(--sb-paper) !important;
  background-image: linear-gradient(180deg, #f7f4ee, var(--sb-paper) 55%, var(--sb-paper2)) !important;
  border: 3px solid var(--sb-ink) !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px var(--sb-paper), inset 0 0 0 2px rgba(20,17,14,.5), 7px 7px 0 rgba(20,17,14,.5) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #shopHead,
body:is(.skin-shapeboat, .theme-shapeboat) #achPanelHead { color: var(--sb-ink) !important; font-family: var(--sb-display) !important; border-bottom: 2px solid var(--sb-ink) !important; text-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #achPanelCount { color: var(--sb-muted) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #shopClose, body:is(.skin-shapeboat, .theme-shapeboat) #achPanelClose { color: var(--sb-muted) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #shopClose:hover, body:is(.skin-shapeboat, .theme-shapeboat) #achPanelClose:hover { color: var(--sb-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #shopNote { color: var(--sb-muted) !important; font-family: var(--sb-font) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .shopRow, body:is(.skin-shapeboat, .theme-shapeboat) .achRow { border-bottom: 1px solid rgba(20,17,14,.14) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .shopName, body:is(.skin-shapeboat, .theme-shapeboat) .achName { color: var(--sb-ink) !important; font-family: var(--sb-font) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .achDesc { color: var(--sb-muted) !important; font-family: var(--sb-font) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .achRow.achDone .achName { color: #7a5c12 !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .shopOwned { color: #2f7d32 !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .shopBuy { color: var(--sb-ink) !important; background: var(--sb-paper2) !important; border: 2px solid var(--sb-ink) !important; border-radius: 0 !important; font-family: var(--sb-font) !important; box-shadow: 2px 2px 0 rgba(20,17,14,.4) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .shopBuy:hover { background: var(--sb-ink) !important; color: var(--sb-paper) !important; border-color: var(--sb-ink) !important; box-shadow: 3px 3px 0 rgba(20,17,14,.4) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .shopSwatch { border-radius: 0 !important; border: 1px solid var(--sb-ink) !important; }

/* ---- FRUITS: warm kraft cream + cocoa + green, rounded ---- */
body.skin-fruits #shopPanel,
body.skin-fruits #achPanel {
  background: var(--fr-face) !important; background-image: none !important;
  border: 1px solid var(--fr-edge) !important; border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(58,44,24,.20) !important; font-family: var(--fr-font) !important;
}
body.skin-fruits #shopHead,
body.skin-fruits #achPanelHead { color: var(--fr-text) !important; font-family: var(--fr-font) !important; border-bottom: 1px solid var(--fr-edge) !important; text-shadow: none !important; }
body.skin-fruits #achPanelCount { color: var(--fr-muted) !important; }
body.skin-fruits #shopClose, body.skin-fruits #achPanelClose { color: var(--fr-muted) !important; }
body.skin-fruits #shopClose:hover, body.skin-fruits #achPanelClose:hover { color: var(--fr-text) !important; }
body.skin-fruits #shopNote { color: var(--fr-muted) !important; font-family: var(--fr-font) !important; }
body.skin-fruits .shopRow, body.skin-fruits .achRow { border-bottom: 1px solid var(--fr-edge) !important; }
body.skin-fruits .shopName, body.skin-fruits .achName { color: var(--fr-text) !important; font-family: var(--fr-font) !important; }
body.skin-fruits .achDesc { color: var(--fr-muted) !important; font-family: var(--fr-font) !important; }
body.skin-fruits .achRow.achDone .achName { color: #a5761a !important; }
body.skin-fruits .shopOwned { color: #2f8f5e !important; }
body.skin-fruits .shopBuy { color: var(--fr-text) !important; background: #f6efdc !important; border: 1px solid var(--fr-edge) !important; border-radius: 10px !important; font-family: var(--fr-font) !important; }
body.skin-fruits .shopBuy:hover { background: var(--fr-accent) !important; color: #0f2a10 !important; border-color: #4f7d38 !important; }
body.skin-fruits .shopSwatch { border: 1px solid var(--fr-edge) !important; }

/* ---- TANKCORE: sickly plastic glass + cyan accent, sharp ---- */
body:is(.skin-tankcore, .theme-tankcore) #shopPanel,
body:is(.skin-tankcore, .theme-tankcore) #achPanel {
  background: var(--tc-face) !important; background-image: none !important;
  border: 1px solid var(--tc-edge) !important; border-radius: 0 !important;
  box-shadow: 0 10px 30px rgba(6,34,42,.35) !important; font-family: var(--tc-font) !important;
}
body:is(.skin-tankcore, .theme-tankcore) #shopHead,
body:is(.skin-tankcore, .theme-tankcore) #achPanelHead { color: var(--tc-text) !important; font-family: var(--tc-font) !important; border-bottom: 1px solid var(--tc-edge) !important; text-shadow: none !important; }
body:is(.skin-tankcore, .theme-tankcore) #achPanelCount { color: var(--tc-muted) !important; }
body:is(.skin-tankcore, .theme-tankcore) #shopClose, body:is(.skin-tankcore, .theme-tankcore) #achPanelClose { color: var(--tc-muted) !important; }
body:is(.skin-tankcore, .theme-tankcore) #shopClose:hover, body:is(.skin-tankcore, .theme-tankcore) #achPanelClose:hover { color: var(--tc-text) !important; }
body:is(.skin-tankcore, .theme-tankcore) #shopNote { color: var(--tc-muted) !important; font-family: var(--tc-font) !important; }
body:is(.skin-tankcore, .theme-tankcore) .shopRow, body:is(.skin-tankcore, .theme-tankcore) .achRow { border-bottom: 1px solid var(--tc-edge) !important; }
body:is(.skin-tankcore, .theme-tankcore) .shopName, body:is(.skin-tankcore, .theme-tankcore) .achName { color: var(--tc-text) !important; font-family: var(--tc-font) !important; }
body:is(.skin-tankcore, .theme-tankcore) .achDesc { color: var(--tc-muted) !important; font-family: var(--tc-font) !important; }
body:is(.skin-tankcore, .theme-tankcore) .achRow.achDone .achName { color: #b58a1f !important; }
body:is(.skin-tankcore, .theme-tankcore) .shopOwned { color: #1f8a5a !important; }
body:is(.skin-tankcore, .theme-tankcore) .shopBuy { color: var(--tc-text) !important; background: var(--tc-face2) !important; border: 1px solid var(--tc-edge) !important; border-radius: 0 !important; font-family: var(--tc-font) !important; }
body:is(.skin-tankcore, .theme-tankcore) .shopBuy:hover { background: var(--tc-accent) !important; color: #06222a !important; border-color: var(--tc-text) !important; }
body:is(.skin-tankcore, .theme-tankcore) .shopSwatch { border-radius: 0 !important; border: 1px solid var(--tc-edge) !important; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   SHAPEBOAT — deco corners on #credits/#changelog + a deeper 1930s KEYSTONE ornament (errorx002 2026-09-22
   "agrega lo otro para que si se sienta super 1930"). #credits already had the paper card; #changelog had only
   the cutout keyline — both now get the four ink deco corners AND a centred deco keystone on the bottom border,
   so every primary paper panel reads as a framed title-card/certificate. The keystone rides the BOTTOM border
   only and is applied to the NON-scrolling panels (#playMenu/#credits/#changelog) so it never lands over scrolled
   content (#optionsCard/.authCard keep corners only — see the earlier frame block). Corners geometry matches the
   shipped 6px inset / 44px. background-attachment stays default (scroll) so the layers pin to the panel FRAME.
   Never sets position (absolute-transform trap). Gated to __aaiAllowed; public flip = zodus. ═══ */
body:is(.skin-shapeboat, .theme-shapeboat) {
  --sb-flourish: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'132'%20height%3D'22'%20viewBox%3D'0%200%20132%2022'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23141210'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M12%2011%20H48'%2F%3E%3Cpath%20d%3D'M84%2011%20H120'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M66%203%20L75%2011%20L66%2019%20L57%2011%20Z'%20fill%3D'%23141210'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'11'%20r%3D'2.2'%20fill%3D'%23f4f1ea'%2F%3E%3Ccircle%20cx%3D'48'%20cy%3D'11'%20r%3D'2.4'%20fill%3D'%23141210'%2F%3E%3Ccircle%20cx%3D'84'%20cy%3D'11'%20r%3D'2.4'%20fill%3D'%23141210'%2F%3E%3Ccircle%20cx%3D'10'%20cy%3D'11'%20r%3D'1.8'%20fill%3D'%23141210'%2F%3E%3Ccircle%20cx%3D'122'%20cy%3D'11'%20r%3D'1.8'%20fill%3D'%23141210'%2F%3E%3C%2Fsvg%3E");
}
body:is(.skin-shapeboat, .theme-shapeboat) #playMenu,
body:is(.skin-shapeboat, .theme-shapeboat) #credits,
body:is(.skin-shapeboat, .theme-shapeboat) #changelog {
  background-image: var(--sb-corner-tl), var(--sb-corner-tr), var(--sb-corner-br), var(--sb-corner-bl), var(--sb-flourish), linear-gradient(180deg, #f7f4ee, var(--sb-paper) 55%, var(--sb-paper2)) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position: 6px 6px, right 6px top 6px, right 6px bottom 6px, left 6px bottom 6px, center bottom 8px, 0 0 !important;
  background-size: 44px 44px, 44px 44px, 44px 44px, 44px 44px, 132px 22px, cover !important;
  background-color: var(--sb-paper) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   SHAPEBOAT — "Join Discord" button (#b0) inked into the paper world (errorx002 2026-09-22 "el boton de
   unirse a Discord no encaja con el estilo"). #b0 carries Discord blurple via .radiantColorBackground plus
   inline border/border-radius; in the 1930s black-and-white sheet that colour block is the one thing that
   breaks the illusion. Re-cut as a paper title-card button: bone paper, hard ink keyline, squared, DayPoster
   display caps, with a hard cutout drop-shadow that presses IN on :active (rubber-stamp feel). !important is
   required to beat the button's INLINE border/border-radius (the inline-beats-skin rule only holds for
   non-important inline). The button keeps its inline translateX(-50%) centring — only :active re-states the
   transform (with -50% preserved) so it never jumps right. Gated to __aaiAllowed; public flip = zodus. ═══ */
body:is(.skin-shapeboat, .theme-shapeboat) #b0 {
  background: var(--sb-paper) !important;
  background-image: none !important;
  border: 3px solid var(--sb-ink) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 rgba(20,17,14,.55) !important;
  color: var(--sb-ink) !important;
  text-shadow: none !important;
  font-family: var(--sb-display) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  transition: box-shadow .07s ease, transform .07s ease !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #b0:hover {
  background: var(--sb-ink) !important;
  color: var(--sb-paper) !important;
  box-shadow: 6px 6px 0 rgba(20,17,14,.55) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #b0:active {
  box-shadow: 1px 1px 0 rgba(20,17,14,.55) !important;
  transform: translate(-50%, 3px) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   SHAPEBOAT — server list (#serverBrowser rows) (errorx002 2026-09-22 "la GUI aun tiene ese neon light en esta
   parte, ademas el texto no se lee"). Shapeboat only restyled the panel + .sbTab; the ROWS kept the stock look:
   .sbName is a hardcoded #eef4ff (white on bone paper = unreadable), .sbCount/.sbDot neon #2ee6c6 with a glow,
   and the selected row is the sliding .sbRowInd teal pill (+ the tab pill .sbInd with its blurred ::after bloom).
   Scoped BY CONTAINER first (like the elegant fix) so anything added to this panel later is ink by default,
   then the specific pieces. Never touches transform/transition — .sbRowInd/.sbInd slide via transform and the
   rows enter via keyframed transform. Gated to __aaiAllowed; public flip = zodus. ═══ */
body:is(.skin-shapeboat, .theme-shapeboat) #serverBrowser,
body:is(.skin-shapeboat, .theme-shapeboat) #serverBrowser * { color: var(--sb-ink); text-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #sbList {
  background: transparent !important;
  border: 1px solid rgba(20,17,14,.35) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) .sbRow { border-radius: 0 !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .sbRow:hover { background: rgba(20,17,14,.06) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .sbRow.sbSel,
body:is(.skin-shapeboat, .theme-shapeboat) .sbRowInd {
  background: rgba(20,17,14,.09) !important;
  box-shadow: inset 3px 0 0 var(--sb-ink), inset 0 0 0 1px rgba(20,17,14,.45) !important;
  border-radius: 0 !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #sbList.sbFx .sbRow.sbSel { background: transparent !important; box-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .sbName  { color: var(--sb-ink) !important; font-family: var(--sb-font) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .sbSub   { color: var(--sb-muted) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .sbCount { color: var(--sb-ink) !important; font-family: var(--sb-font) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .sbDot   { background: var(--sb-ink) !important; box-shadow: none !important; }   /* an ink status dot, not a neon light */
body:is(.skin-shapeboat, .theme-shapeboat) .sbEmpty { color: var(--sb-muted) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .sbInd {
  background: var(--sb-ink) !important;
  border: 1px solid var(--sb-ink) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) .sbInd::after { display: none !important; }   /* the blurred teal bloom IS the neon */


/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   FRUITS AND PEARS — per-dimension LOADING backdrop (errorx002 2026-09-22, doc 147-165: "la pantalla de carga
   ... cambia dinámicamente de estética según la dimensión"). #lfxFruitBg is a body child created by
   page.loadFx (script2.js) and ONLY given a class when the Fruits skin/theme is on AND __aaiAllowed() — so the
   public loading screen is untouched for everyone else. It sits under #loadFx (z 2 vs 3): zenitsv's bars still
   slide in on top, re-tinted per dim through --lfx-a/--lfx-b. 16 .lfxFrP spans are the particles; the per-dim
   class decides what they are (leaves/twigs, cave glints/drips, burrow dust, embers/ash, pollen/honey).
   Decorative only, pointer-events:none. Reduced motion stops every particle. ═══ */
#lfxFruitBg {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
#lfxFruitBg.lfxFrOn { visibility: visible; opacity: 1; transition: opacity .3s ease; }
#lfxFruitBg::before, #lfxFruitBg::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
#lfxFruitBg .lfxFrP { position: absolute; display: block; left: var(--x); top: 0; will-change: transform, opacity; }

/* Picnic surface (ffa / 2teams / 4teams): fresh grass, a gingham tablecloth hem, drifting leaves and twigs */
#lfxFruitBg.lfxFr-main { background: radial-gradient(ellipse at 50% 30%, #dcefb4 0%, #aad37a 55%, #7cab52 100%); }
#lfxFruitBg.lfxFr-main::after {
  top: auto;
  height: 16vh;
  background:
    repeating-linear-gradient(90deg, rgba(206,64,60,.30) 0 28px, transparent 28px 56px),
    repeating-linear-gradient(0deg, rgba(206,64,60,.30) 0 28px, rgba(255,250,238,.62) 28px 56px);
  border-top: 3px dashed rgba(160,56,46,.38);
}
#lfxFruitBg.lfxFr-main .lfxFrP {
  top: -8vh;
  width: calc(26px * var(--s));
  height: calc(15px * var(--s));
  border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, #74b348, #3d7729);
  opacity: .85;
  animation: lfxFrLeaf var(--t) linear var(--d) infinite;
}
#lfxFruitBg.lfxFr-main .lfxFrP:nth-child(4n) { width: calc(36px * var(--s)); height: 3px; border-radius: 2px; background: #7a5934; }
@keyframes lfxFrLeaf {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(6vw, 28vh) rotate(90deg); }
  50%  { transform: translate(-2vw, 56vh) rotate(200deg); }
  75%  { transform: translate(7vw, 84vh) rotate(290deg); }
  100% { transform: translate(2vw, 118vh) rotate(380deg); }
}

/* Stone cave (crossroads): wet slate gradient, stalactite fringe, faint cracks, twinkling glints + drips */
#lfxFruitBg.lfxFr-crossroads { background: linear-gradient(180deg, #3b4349 0%, #5b656b 45%, #737d82 100%); }
#lfxFruitBg.lfxFr-crossroads::before { bottom: auto; height: 90px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90'%3E%3Cpath d='M0 0H120V8L112 40L104 10L94 70L84 12L76 44L66 10L56 82L46 12L38 50L30 10L20 62L12 10L6 36L0 8Z' fill='%23262c30' fill-opacity='.85'/%3E%3C/svg%3E") repeat-x top left / 120px 90px; }
#lfxFruitBg.lfxFr-crossroads::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300'%3E%3Cg fill='none' stroke='%23222a2e' stroke-opacity='.35' stroke-width='1.5'%3E%3Cpath d='M30 210l40-18 22 14 38-30 18 6'/%3E%3Cpath d='M250 60l26 20 30-8 20 26'/%3E%3Cpath d='M300 250l-24-16-30 10-18-22'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0 / 420px 300px; }
#lfxFruitBg.lfxFr-crossroads .lfxFrP {
  top: var(--y);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #eaf4ff;
  box-shadow: 0 0 8px 2px rgba(210,235,255,.55);
  opacity: 0;
  animation: lfxFrTwinkle var(--t) ease-in-out var(--d) infinite;
}
#lfxFruitBg.lfxFr-crossroads .lfxFrP:nth-child(3n) {
  top: 60px;
  width: 3px;
  height: 8px;
  border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
  background: rgba(190,225,240,.8);
  box-shadow: none;
  animation: lfxFrDrip calc(var(--t) * .5) ease-in var(--d) infinite;
}
@keyframes lfxFrTwinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .9; transform: scale(1); } }
@keyframes lfxFrDrip { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .9; } 100% { transform: translateY(100vh); opacity: .9; } }

/* Earthy burrow (abyss / abyss hallway): deep clay, twisted roots hanging in, dust motes drifting up */
#lfxFruitBg.lfxFr-abyss { background: radial-gradient(ellipse at 50% 42%, #5c3b26 0%, #3a2418 60%, #20140c 100%); }
#lfxFruitBg.lfxFr-abyss::before { bottom: auto; height: 210px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='210'%3E%3Cg fill='none' stroke='%23150b05' stroke-opacity='.75' stroke-linecap='round'%3E%3Cpath d='M40 0c10 40-18 70 4 110s-6 60 2 90' stroke-width='6'/%3E%3Cpath d='M44 70c24 10 30 34 58 40' stroke-width='3'/%3E%3Cpath d='M190 0c-14 30 16 58-2 96s10 40 4 64' stroke-width='5'/%3E%3Cpath d='M188 60c-26 6-30 30-56 30' stroke-width='2.5'/%3E%3Cpath d='M300 0c8 24-12 44 6 70' stroke-width='4'/%3E%3Cpath d='M304 40c18 4 22 22 40 24' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") repeat-x top left / 360px 210px; }
#lfxFruitBg.lfxFr-abyss::after { background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(12,6,2,.55) 100%); }
#lfxFruitBg.lfxFr-abyss .lfxFrP {
  top: 102%;
  width: calc(3px * var(--s) + 1px);
  height: calc(3px * var(--s) + 1px);
  border-radius: 50%;
  background: rgba(214,180,140,.55);
  animation: lfxFrRise calc(var(--t) * 1.6) linear var(--d) infinite;
}

/* Volcanic zone (void): charcoal + ash, a faint ember glow at the base, embers rising and ash drifting */
#lfxFruitBg.lfxFr-void { background: linear-gradient(180deg, #15110f 0%, #221915 60%, #2c1a12 100%); }
#lfxFruitBg.lfxFr-void::after { background: radial-gradient(ellipse at 50% 118%, rgba(255,112,32,.45) 0%, rgba(255,80,20,.12) 35%, transparent 62%); }
#lfxFruitBg.lfxFr-void .lfxFrP {
  top: 102%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffb45e;
  box-shadow: 0 0 6px 2px rgba(255,120,30,.7);
  animation: lfxFrRise var(--t) linear var(--d) infinite;
}
#lfxFruitBg.lfxFr-void .lfxFrP:nth-child(3n) { width: 5px; height: 3px; border-radius: 1px; background: rgba(170,160,150,.6); box-shadow: none; animation-duration: calc(var(--t) * 1.8); }

/* Sacred hive (sanctuary): warm gold/amber, translucent honeycomb, floating pollen and slow honey drops */
#lfxFruitBg.lfxFr-sanctuary { background: radial-gradient(ellipse at 50% 35%, #ffe8a4 0%, #f1bd48 52%, #c7871b 100%); }
#lfxFruitBg.lfxFr-sanctuary::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66v32M28 0v-2' fill='none' stroke='%23965c12' stroke-opacity='.32' stroke-width='2.5'/%3E%3C/svg%3E") repeat 0 0 / 56px 98px; }
#lfxFruitBg.lfxFr-sanctuary .lfxFrP {
  top: 102%;
  width: calc(4px * var(--s) + 1px);
  height: calc(4px * var(--s) + 1px);
  border-radius: 50%;
  background: #fff3b8;
  box-shadow: 0 0 7px 2px rgba(255,236,150,.75);
  animation: lfxFrRise calc(var(--t) * 1.3) linear var(--d) infinite;
}
#lfxFruitBg.lfxFr-sanctuary .lfxFrP:nth-child(4n) {
  top: -3vh;
  width: 9px;
  height: 12px;
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  background: linear-gradient(160deg, #ffd766, #d98a12);
  box-shadow: none;
  animation: lfxFrDrip calc(var(--t) * 1.4) ease-in var(--d) infinite;
}
@keyframes lfxFrRise {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(3vw, -55vh); }
  90%  { opacity: 1; }
  100% { transform: translate(-2vw, -112vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #lfxFruitBg .lfxFrP { animation: none !important; }
}


/* TANKCORE "Liminal Waiting" loading (errorx002 doc 317-318) — rides #lfxFruitBg (same gate: tankcore skin/theme
   AND __aaiAllowed, set in page.loadFx). A frozen picture: flat cloudless sky, perfectly still green hills, and a
   glossy Frutiger-Aero progress bar labelled "Entering Simulation..." that races to ~88%, crawls to 97% and
   then STICKS a beat too long before finishing — the loop never quite feels right. No particles. */
#lfxFruitBg.lfxFr-tankcore { background: linear-gradient(180deg, #3d8ede 0%, #69b2ef 55%, #a8d7f6 100%); }
#lfxFruitBg.lfxFr-tankcore::before {
  top: auto;
  height: 48vh;
  background:
    radial-gradient(ellipse 72% 62% at 24% 100%, #62c23e 59.5%, transparent 60%),
    radial-gradient(ellipse 86% 74% at 82% 100%, #4ead31 59.5%, transparent 60%),
    linear-gradient(180deg, transparent 58%, #57b338 58%);
}
#lfxFruitBg.lfxFr-tankcore::after {
  inset: auto;
  left: 50%;
  bottom: 14vh;
  width: min(520px, 70vw);
  height: 22px;
  transform: translateX(-50%);
  border-radius: 11px;
  border: 1px solid rgba(20,70,120,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.15) 50%, rgba(255,255,255,0) 51%),
    linear-gradient(90deg, #33c547, #8cf06a) 0 0 / 0% 100% no-repeat,
    linear-gradient(180deg, #e9f3fb, #c6d9e8);
  box-shadow: 0 2px 8px rgba(0,40,80,.3), inset 0 1px 0 rgba(255,255,255,.8);
  animation: lfxTcBar 4.2s linear infinite;
}
@keyframes lfxTcBar {
  0%   { background-size: 100% 100%, 0% 100%, 100% 100%; }
  28%  { background-size: 100% 100%, 88% 100%, 100% 100%; }
  60%  { background-size: 100% 100%, 97% 100%, 100% 100%; }
  93%  { background-size: 100% 100%, 97% 100%, 100% 100%; }
  100% { background-size: 100% 100%, 100% 100%, 100% 100%; }
}
#lfxFruitBg.lfxFr-tankcore .lfxFrP { display: none; }
#lfxFruitBg.lfxFr-tankcore .lfxFrP:first-child {
  display: block;
  left: 50%;
  top: auto;
  bottom: calc(14vh + 32px);
  transform: translateX(-50%);
  animation: none;
  white-space: nowrap;
  font: 600 20px 'Segoe UI', Frutiger, 'Trebuchet MS', sans-serif;
  color: #0d3a66;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}
#lfxFruitBg.lfxFr-tankcore .lfxFrP:first-child::before { content: 'Entering Simulation...'; }
@media (prefers-reduced-motion: reduce) {
  #lfxFruitBg.lfxFr-tankcore::after { animation: none; background-size: 100% 100%, 97% 100%, 100% 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   SHAPEBOAT VITALS (errorx002 2026-09-23; doc 396-398: "enmarcadas en recuadros negros elegantes con esquinas
   rizadas victorianas de celuloide, con fondo blanco hueso y barra de vida negra sólida con achurado").
   Shapeboat now takes the shared alt-HUD layout (removed from SKIN_STOCK_HUD; the theme axis too, in
   __refreshHudAlt), and its health/shield panel becomes a silent-film title card: bone paper inside a heavy ink
   frame with the menu's deco corner curls, a hard cut-out shadow, and a double inner keyline. Health = solid ink
   with a paper hatch; shield = pencil-grey wash. The 30° bevel is dropped for square card bars.
   ⚠ The hatch sits on #hvHealth::after, clipped to --hv-hp, NOT on the fill: the fill is scaleX'd every frame and
   anything drawn on it would squeeze as health drops (same reason as the Depths overlays above). ═══ */
body.hudAlt:is(.skin-shapeboat, .theme-shapeboat) #hudVitals {
  padding: 12px 30px 13px;
  border: 3px solid var(--sb-ink);
  background-image: var(--sb-corner-tl), var(--sb-corner-tr), var(--sb-corner-br), var(--sb-corner-bl), linear-gradient(180deg, #f7f4ee, var(--sb-paper) 60%, var(--sb-paper2));
  background-repeat: no-repeat;
  background-position: 3px 3px, right 3px top 3px, right 3px bottom 3px, left 3px bottom 3px, 0 0;
  background-size: 24px 24px, 24px 24px, 24px 24px, 24px 24px, cover;
  box-shadow: inset 0 0 0 1px var(--sb-paper), inset 0 0 0 2px rgba(20,17,14,.5), 4px 4px 0 rgba(20,17,14,.55);
}
body:is(.skin-shapeboat, .theme-shapeboat) #hvHealth,
body:is(.skin-shapeboat, .theme-shapeboat) #hvShield {
  clip-path: none !important;
  border-radius: 0 !important;
  border: 2px solid var(--sb-ink) !important;
  background: var(--sb-paper) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #hvHealthFill { background: var(--sb-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #hvShieldFill { background: #9a9387 !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #hvHealthLag  { background: rgba(20,17,14,.26) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #hvHealth::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  clip-path: inset(0 calc((1 - var(--hv-hp, 1)) * 100%) 0 0);
  background: repeating-linear-gradient(135deg, rgba(244,241,234,.3) 0 1.5px, transparent 1.5px 6px);
}
body:is(.skin-shapeboat, .theme-shapeboat) #hvHealthText {
  color: var(--sb-paper) !important;
  font-family: var(--sb-display) !important;
  letter-spacing: .06em;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 0 2px var(--sb-ink), 0 0 2px var(--sb-ink), 1px 1px 0 var(--sb-ink) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #hvShieldText { color: var(--sb-ink) !important; font-family: var(--sb-font) !important; }
/* regen shimmer = a paper glint; damage chip = a scratchy ink-and-paper hatch instead of the hot red */
body:is(.skin-shapeboat, .theme-shapeboat) #hvHealth::before {
  background-image: linear-gradient(100deg, rgba(244,241,234,0) 0%, rgba(244,241,234,.08) 16%, rgba(244,241,234,.6) 30%, rgba(244,241,234,.08) 44%, rgba(244,241,234,0) 62%);
}
body:is(.skin-shapeboat, .theme-shapeboat) #hvHealth.hvHurt #hvHealthLag {
  background: repeating-linear-gradient(45deg, rgba(20,17,14,.6) 0 2px, rgba(244,241,234,.7) 2px 5px) !important;
  box-shadow: none;
}
body:is(.skin-shapeboat, .theme-shapeboat) #hvShield.hvSHeal #hvShieldFill { box-shadow: none; }
/* low health: the film flickers instead of glowing red. Opacity, not background — the fill's background is
   !important, and an !important declaration beats any animation of that property. */
@keyframes sbHvFlicker { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
body:is(.skin-shapeboat, .theme-shapeboat) #hvHealth.hvLow #hvHealthFill { animation: sbHvFlicker .5s steps(1) infinite; filter: none; }
/* no coloured radiant bloom on a black-and-white card */
body.radiantMe:is(.skin-shapeboat, .theme-shapeboat) #hvHealthGlow,
body.radiantMe:is(.skin-shapeboat, .theme-shapeboat) #hvShieldGlow { filter: none; }
@media (prefers-reduced-motion: reduce) {
  body:is(.skin-shapeboat, .theme-shapeboat) #hvHealth.hvLow #hvHealthFill { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   SHAPEBOAT "FILM LEADER" loading (errorx002 2026-09-23 — Fruits and Tankcore had themed loading screens,
   Shapeboat still showed the stock one). Rides #lfxFruitBg like the others (set in page.loadFx, same gate).
   An old projector countdown: grey leader with a vignette, the leader dial (two rings + crosshair) with a hand
   sweeping one turn per second, 3-2-1 in the display face in step with it, sprocket strips rolling down both
   edges, and a few scratches and dust specks popping for a frame. Spans 1-3 are the numbers, 4-16 the dirt.
   The frame also flickers a touch. Reduced motion: a still dial showing 3. ═══ */
@property --sbSweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#lfxFruitBg.lfxFr-shapeboat {
  background: radial-gradient(ellipse at 50% 50%, #d3cdc0 0%, #aea799 58%, #6d665b 100%);
  animation: lfxSbFlicker .16s steps(1) infinite;
}
@keyframes lfxSbFlicker { 0%, 100% { filter: none } 50% { filter: brightness(.95) } }
#lfxFruitBg.lfxFr-shapeboat::before {
  inset: auto;
  left: 50%; top: 50%;
  width: min(66vh, 84vw); height: min(66vh, 84vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 55.6%, #141210 56% 57.2%, transparent 57.6% 70%, #141210 70.4% 71.8%, transparent 72.2%),
    linear-gradient(#141210, #141210) center / 100% 2px no-repeat,
    linear-gradient(#141210, #141210) center / 2px 100% no-repeat,
    conic-gradient(rgba(20,17,14,.5) 0 var(--sbSweep), transparent var(--sbSweep) 360deg);
  animation: lfxSbSweep 1s linear infinite;
}
@keyframes lfxSbSweep { from { --sbSweep: 0deg } to { --sbSweep: 360deg } }
#lfxFruitBg.lfxFr-shapeboat::after {
  background:
    repeating-linear-gradient(180deg, transparent 0 12px, #e9e4d8 12px 30px, transparent 30px 44px) 13px 0 / 18px 100%,
    repeating-linear-gradient(180deg, transparent 0 12px, #e9e4d8 12px 30px, transparent 30px 44px) right 13px top 0 / 18px 100%,
    linear-gradient(90deg, #141210 0 44px, transparent 44px calc(100% - 44px), #141210 calc(100% - 44px));
  background-repeat: repeat-y, repeat-y, no-repeat;
  animation: lfxSbRoll .5s linear infinite;
}
@keyframes lfxSbRoll {
  from { background-position: 13px 0, right 13px top 0, 0 0; }
  to   { background-position: 13px 44px, right 13px top 44px, 0 0; }
}
#lfxFruitBg.lfxFr-shapeboat .lfxFrP:nth-child(-n+3) {
  left: 50%; top: 50%;
  transform: translate(-50%, -54%);
  font: 400 min(38vh, 48vw)/1 var(--sb-display);
  color: #141210;
  opacity: 0;
  animation: lfxSbNum 3s steps(1) infinite;
}
#lfxFruitBg.lfxFr-shapeboat .lfxFrP:nth-child(1)::before { content: '3'; }
#lfxFruitBg.lfxFr-shapeboat .lfxFrP:nth-child(2)::before { content: '2'; }
#lfxFruitBg.lfxFr-shapeboat .lfxFrP:nth-child(3)::before { content: '1'; }
#lfxFruitBg.lfxFr-shapeboat .lfxFrP:nth-child(2) { animation-delay: -2s; }
#lfxFruitBg.lfxFr-shapeboat .lfxFrP:nth-child(3) { animation-delay: -1s; }
@keyframes lfxSbNum { 0% { opacity: 1 } 33.333% { opacity: 0 } 100% { opacity: 0 } }
/* dirt: thin vertical scratches, every third one a dust speck, each flashing for a frame now and then */
#lfxFruitBg.lfxFr-shapeboat .lfxFrP:nth-child(n+4) {
  width: 1.5px; height: 100vh;
  background: rgba(20,17,14,.55);
  opacity: 0;
  animation: lfxSbDirt var(--t) steps(1) var(--d) infinite;
}
#lfxFruitBg.lfxFr-shapeboat .lfxFrP:nth-child(3n+4) {
  top: var(--y);
  width: calc(5px * var(--s)); height: calc(4px * var(--s));
  border-radius: 50%;
  background: rgba(20,17,14,.7);
}
@keyframes lfxSbDirt { 0% { opacity: 0 } 6% { opacity: .8 } 8% { opacity: 0 } 52% { opacity: .5 } 53% { opacity: 0 } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
  #lfxFruitBg.lfxFr-shapeboat, #lfxFruitBg.lfxFr-shapeboat::before, #lfxFruitBg.lfxFr-shapeboat::after,
  #lfxFruitBg.lfxFr-shapeboat .lfxFrP:nth-child(n) { animation: none; }   /* :nth-child(n) = same weight as the rules it beats */
  #lfxFruitBg.lfxFr-shapeboat .lfxFrP:nth-child(1) { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   TANKYTER AERO (VA-X Corp / errorx002 2026-09-24, doc 431-555) — "Frutiger Aero Peak Experience".
   The calm counterpart to Tankcore: Aero glass everywhere. Panels are translucent sky glass with the classic
   horizon line (bright upper half, clearer lower half), a white inner keyline and a soft blue drop shadow.
   Buttons are glossy 3D plastic capsules that SINK when pressed. Bars are glass capsules full of lime / aqua
   liquid with a curved white gloss over the top half and bubbles inside. Rounded Segoe/Frutiger-style type in
   deep aqua ink with a soft white shadow for legibility on any field.
   GATED like the other VA-X skins (applySkin: errorx002 + T5+). Keeps the STOCK HUD layout (SKIN_STOCK_HUD.aero),
   so this is a re-skin of the shipped layout, not a relayout. Shapes/field come from script2.js (aeroMaterial,
   SKIN_CANVAS.aero, render.skinGround). ═══ */
body.theme-aero, html body.skin-aero {
  --th-card: linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(232,247,255,.66) 49%,rgba(200,236,252,.58) 51%,rgba(226,246,255,.70) 100%);
  --th-border: rgba(0,110,170,.34);
  --th-line: rgba(0,110,170,.14);
  --th-text: #08466e; --th-muted: #3d7596;
  --th-accent: linear-gradient(180deg,#7fe0ff 0%,#22b4ee 49%,#0096d6 51%,#3cc8f5 100%);
  --th-accentc: #00a4e4; --th-track: rgba(0,110,170,.14);
}
body.skin-aero {
  --ae-glass: linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(236,249,255,.68) 49%,rgba(204,238,253,.60) 51%,rgba(228,247,255,.72) 100%);
  --ae-edge: rgba(0,110,170,.34);
  --ae-key: rgba(255,255,255,.9);
  --ae-text: #08466e;
  --ae-muted: #3d7596;
  --ae-sky: #00a4e4;
  --ae-cyan: #00e5ff;
  --ae-lime: #76ff03;
  --ae-shadow: 0 8px 24px rgba(0,90,150,.22), 0 2px 6px rgba(0,70,120,.18);
  --ae-btn: linear-gradient(180deg,#8ee6ff 0%,#2cb8f0 48%,#0098d8 52%,#46cef7 100%);
  --ae-btn-lime: linear-gradient(180deg,#e0ffb0 0%,#9cf04e 48%,#62cc16 52%,#96f24a 100%);
  --ae-font: 'Segoe UI','Frutiger','Frutiger Linotype','Myriad Pro','Quicksand','Nunito',system-ui,-apple-system,sans-serif;
}
body.skin-aero #overlay2 { background: transparent !important; }
body.skin-aero #title {
  color: #ffffff !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 0 rgba(0,90,150,.55), 0 0 18px rgba(0,164,228,.55), 0 6px 18px rgba(0,60,110,.35) !important;
}
/* Aero glass cards */
body.skin-aero #serverSelect,
body.skin-aero #playMenu,
body.skin-aero #credits,
body.skin-aero #featured,
body.skin-aero #videoBox,
body.skin-aero #serverBrowser,
body.skin-aero #optionsCard,
body.skin-aero #changelog {
  background: var(--ae-glass) !important;
  border: 1px solid var(--ae-edge) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 var(--ae-key), inset 0 0 0 1px rgba(255,255,255,.35), var(--ae-shadow) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
}
/* ink: deep aqua text with a soft white lift */
body.skin-aero #serverSelectSlide,
body.skin-aero #serverSelectLeft,
body.skin-aero #serverSelectRight,
body.skin-aero #creditsText,
body.skin-aero #channelName,
body.skin-aero #optionsTitle,
body.skin-aero #changelogTitle,
body.skin-aero #tipsTitle,
body.skin-aero #contactTitle,
body.skin-aero #disconnectTitle,
body.skin-aero #adblockTitle,
body.skin-aero #respawnTitle,
body.skin-aero .optLabel,
body.skin-aero .bold,
body.skin-aero .text,
body.skin-aero .light,
body.skin-aero .lbName,
body.skin-aero .lbScore,
body.skin-aero .lbRank,
body.skin-aero .clItem,
body.skin-aero .clDate,
body.skin-aero #creditsContent,
body.skin-aero #changelogContent,
body.skin-aero #tipsContent,
body.skin-aero #accountContent {
  color: var(--ae-text) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.75) !important;
  -webkit-text-stroke: 0 !important;
}
body.skin-aero #serverSelectLowerText,
body.skin-aero #serverSelectArrow,
body.skin-aero .optSub,
body.skin-aero .clSub,
body.skin-aero .optComing,
body.skin-aero #optionsClose { color: var(--ae-muted) !important; text-shadow: 0 1px 0 rgba(255,255,255,.6) !important; }
body.skin-aero .clItem::before { background: var(--ae-sky) !important; box-shadow: none !important; }
/* glossy plastic pills (styles, languages, tabs) */
body.skin-aero .optStyle,
body.skin-aero .optTab {
  background: linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(236,248,255,.9) 48%,rgba(212,238,252,.9) 52%,rgba(232,247,255,.95) 100%) !important;
  border: 1px solid var(--ae-edge) !important;
  border-radius: 999px !important;
  color: var(--ae-text) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(0,80,130,.16) !important;
  transition: transform .08s ease, box-shadow .08s ease, border-color .12s ease !important;
}
body.skin-aero .optStyle:hover,
body.skin-aero .optTab:hover { border-color: var(--ae-sky) !important; }
body.skin-aero .optStyle.active,
body.skin-aero .optTab.on {
  background: var(--ae-btn) !important;
  border-color: rgba(0,90,140,.6) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,60,100,.55) !important;
}
body.skin-aero .optStyle:active,
body.skin-aero .optTab:active {
  transform: translateY(2px) !important;
  box-shadow: inset 0 2px 4px rgba(0,60,100,.3) !important;
}
body.skin-aero .optSwatch { border-radius: 50% !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 5px rgba(0,70,120,.3) !important; }
body.skin-aero .optToggle.on { background: var(--ae-btn) !important; }
body.skin-aero #name {
  border-radius: 999px !important;
  background: linear-gradient(180deg,#ffffff,#eef9ff) !important;
  border: 1px solid var(--ae-edge) !important;
  color: var(--ae-text) !important;
  box-shadow: inset 0 2px 3px rgba(0,80,130,.14) !important;
}
/* The PLAY button: a big lime Aero capsule that sinks when you press it */
body.skin-aero #playButton {
  background: var(--ae-btn-lime) !important;
  border: 1px solid rgba(40,110,10,.6) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(20,80,0,.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 0 #3f9a0a, 0 6px 12px rgba(30,90,0,.3) !important;
  transition: transform .07s ease, box-shadow .07s ease !important;
}
body.skin-aero #playButton:hover { filter: brightness(1.06) saturate(1.08); }
body.skin-aero #playButton:active {
  transform: translateY(4px) !important;
  box-shadow: inset 0 2px 4px rgba(30,90,0,.35), 0 0 0 #3f9a0a, 0 2px 4px rgba(30,90,0,.25) !important;
}
body.skin-aero .lbBar,
body.skin-aero .lbTop1 .lbBar,
body.skin-aero .lbTop2 .lbBar,
body.skin-aero .lbTop3 .lbBar {
  background: var(--ae-btn) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}
/* ---- Glass-capsule bars: score/level (bottom centre) and the stat bars. Deep aqua glass track so the stock white
   labels stay readable, a liquid fill, and a curved white gloss across the top half of the whole capsule. ---- */
body.skin-aero #tankScore,
body.skin-aero #tankPartialLevel,
body.skin-aero .statBarLeft,
body.skin-aero .statBarRight {
  background: linear-gradient(180deg,rgba(6,70,112,.86) 0%,rgba(4,52,88,.9) 100%) !important;
  border: 1px solid rgba(160,230,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 10px rgba(0,50,90,.28);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,40,70,.8);
}
body.skin-aero #tankScore::after,
body.skin-aero #tankPartialLevel::after,
body.skin-aero .statBarLeft::after,
body.skin-aero .statBarRight::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px; top: 2px;
  height: 46%;
  border-radius: 999px;
  background: linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.08));
  pointer-events: none;
  z-index: 3;
}
body.skin-aero #tankLevelBar {
  background: linear-gradient(180deg,#d6ff9e 0%,#8cf23a 45%,#5fd000 55%,#9cff4a 100%) !important;
  box-shadow: inset 0 -2px 3px rgba(40,110,0,.35);
}
body.skin-aero #tankScoreBar {
  background: linear-gradient(180deg,#b8f6ff 0%,#3fdcff 45%,#00b8e8 55%,#5ce6ff 100%) !important;
  box-shadow: inset 0 -2px 3px rgba(0,80,130,.35);
}
/* bubbles rising inside the liquid of the two big bars */
body.skin-aero #tankLevelBar::before,
body.skin-aero #tankScoreBar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.85) 0 1.4px, rgba(255,255,255,.35) 2.2px, transparent 3px) 0 0 / 38px 24px,
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.7) 0 1px, rgba(255,255,255,.3) 1.6px, transparent 2.2px) 17px 9px / 29px 21px;
  animation: aeBarBubbles 3.6s linear infinite;
  pointer-events: none;
}
@keyframes aeBarBubbles {
  from { background-position: 0 24px, 17px 30px; }
  to   { background-position: 0 0, 17px 9px; }
}
body.skin-aero .statBarLeft,
body.skin-aero .statBarRight { border-radius: 999px; }
body.skin-aero .statBarInner,
body.skin-aero .statBarSlide,
body.skin-aero .statBarSlide2 { border-radius: 999px; }
body.skin-aero .statBarSlide,
body.skin-aero .statBarSlide2 {
  filter: saturate(1.15) brightness(1.08);
  box-shadow: inset 0 -3px 4px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.35);
}
body.skin-aero .statButton {
  background: var(--ae-btn);
  color: #fff;
  border-radius: 999px;
  text-shadow: 0 1px 1px rgba(0,60,100,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 0 #0078b0, 0 4px 8px rgba(0,60,100,.3);
  transition: transform .07s ease, box-shadow .07s ease;
}
body.skin-aero .statButton:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 4px rgba(0,50,90,.35), 0 0 0 #0078b0;
}
body.skin-aero .statButtonDisabled {
  background: linear-gradient(180deg,#e8f4fa,#bcd6e4);
  color: #6f93a8;
  border-radius: 999px;
  opacity: .6;
}
/* tank-upgrade selectors: glass tiles */
body.skin-aero .upgradeBox {
  border-color: rgba(120,210,245,.9);
  border-width: 4px;
  border-radius: 18px;
  background: var(--ae-glass);
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(0,80,130,.25);
}
body.skin-aero .upgradeBox:hover { border-color: var(--ae-cyan); }
body.skin-aero .upgradeBox:active { translate: 0 2px; }   /* never `transform`: it is the box's centring */
body.skin-aero .upgradeBoxLower { background: rgba(0,110,170,.10); }
body.skin-aero .upgradeName { color: var(--ae-text); text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 0 4px rgba(255,255,255,.7); }
/* rounded Segoe/Frutiger-style type on the DOM UI (in-game names/chat are canvas text and unaffected) */
body.skin-aero #title,
body.skin-aero #playMenu, body.skin-aero #playButton, body.skin-aero #optionsCard,
body.skin-aero #credits, body.skin-aero #creditsText, body.skin-aero #creditsContent,
body.skin-aero #featured, body.skin-aero #serverSelect, body.skin-aero #serverBrowser,
body.skin-aero #serverSelectSlide, body.skin-aero #serverSelectLeft, body.skin-aero #serverSelectRight,
body.skin-aero #serverSelectLowerText, body.skin-aero #serverSelectArrow, body.skin-aero #channelName,
body.skin-aero #name, body.skin-aero #optionsTitle, body.skin-aero #optionsClose,
body.skin-aero #changelog, body.skin-aero #changelogTitle, body.skin-aero #changelogContent,
body.skin-aero #tipsTitle, body.skin-aero #tipsContent, body.skin-aero #accountContent,
body.skin-aero #contactTitle, body.skin-aero #disconnectTitle, body.skin-aero #respawnTitle,
body.skin-aero #adblockTitle, body.skin-aero .optLabel, body.skin-aero .optSub,
body.skin-aero .optComing, body.skin-aero .optTab, body.skin-aero .optStyle,
body.skin-aero .bold, body.skin-aero .text, body.skin-aero .light, body.skin-aero .clItem,
body.skin-aero .clDate, body.skin-aero .clSub, body.skin-aero .lbName, body.skin-aero .lbRank,
body.skin-aero .lbScore, body.skin-aero .statButton, body.skin-aero .statButtonDisabled,
body.skin-aero .upgradeName, body.skin-aero #tankScore, body.skin-aero #tankPartialLevel,
body.skin-aero .statBarText {
  font-family: var(--ae-font) !important;
}
/* a little glass bubble + leaf tucked in the corner of the main cards (Aero's answer to Fruits' sprig) */
body.skin-aero #optionsCard::after,
body.skin-aero #playMenu::after,
body.skin-aero #credits::after {
  content: ""; position: absolute; top: 8px; right: 10px;
  width: 44px; height: 44px; opacity: .9; pointer-events: none; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.35' cy='.3' r='.75'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='.45' stop-color='%23d9f6ff' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%2300a4e4' stop-opacity='.45'/%3E%3C/radialGradient%3E%3ClinearGradient id='l' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d4ff8a'/%3E%3Cstop offset='1' stop-color='%234fbf10'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 50 C14 34 28 26 44 28 C40 42 28 52 10 50 Z' fill='url(%23l)' stroke='%23358a0c' stroke-width='1.5'/%3E%3Cpath d='M12 49 C22 42 30 36 42 29' stroke='%23fff' stroke-opacity='.6' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='42' cy='18' r='13' fill='url(%23b)' stroke='%23fff' stroke-opacity='.9' stroke-width='1.5'/%3E%3Cellipse cx='37' cy='12' rx='4.5' ry='2.6' fill='%23fff' transform='rotate(-30 37 12)'/%3E%3Ccircle cx='54' cy='40' r='5' fill='url(%23b)' stroke='%23fff' stroke-opacity='.9'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* chat / connecting spinner */
body.skin-aero #connecting { background: radial-gradient(ellipse at 50% 20%, #e8f8ff 0%, #94d8f6 55%, #2aa7e0 100%) !important; }
body.skin-aero .connLabel { color: var(--ae-text) !important; text-shadow: 0 1px 0 rgba(255,255,255,.8) !important; font-family: var(--ae-font) !important; }
@media (prefers-reduced-motion: reduce) {
  body.skin-aero #tankLevelBar::before,
  body.skin-aero #tankScoreBar::before { animation: none; }
}

/* TANKYTER AERO loading (rides #lfxFruitBg like the other VA-X loaders; gated in page.loadFx): a bright Aero sky
   over rolling green hills, cumulus drifting, oxygen bubbles rising, and a glossy glass capsule filling with lime
   liquid - calm and steady (the opposite of Tankcore's bar that sticks). */
#lfxFruitBg.lfxFr-aero { background: linear-gradient(180deg, #1f9be0 0%, #5cc4f2 40%, #b6e8fb 72%, #e6f8ff 100%); }
#lfxFruitBg.lfxFr-aero::before {
  top: auto;
  height: 44vh;
  background:
    radial-gradient(ellipse 60% 18% at 50% 8%, rgba(255,255,255,.45) 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 22% 100%, #8ee05a 59.5%, transparent 60%),
    radial-gradient(ellipse 84% 70% at 80% 100%, #6cc93c 59.5%, transparent 60%),
    linear-gradient(180deg, transparent 58%, #74cc48 58%);
}
#lfxFruitBg.lfxFr-aero::after {
  inset: auto;
  left: 50%;
  bottom: 14vh;
  width: min(520px, 70vw);
  height: 24px;
  transform: translateX(-50%);
  border-radius: 12px;
  border: 1px solid rgba(0,90,140,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.2) 48%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #d6ff9e 0%, #8cf23a 45%, #5fd000 55%, #9cff4a 100%) 0 0 / 0% 100% no-repeat,
    linear-gradient(180deg, rgba(232,247,255,.9), rgba(186,226,246,.9));
  box-shadow: 0 3px 10px rgba(0,60,100,.3), inset 0 1px 0 rgba(255,255,255,.9);
  animation: lfxAeBar 3.2s ease-in-out infinite;
}
@keyframes lfxAeBar {
  0%   { background-size: 100% 100%, 0% 100%, 100% 100%; }
  85%  { background-size: 100% 100%, 100% 100%, 100% 100%; }
  100% { background-size: 100% 100%, 100% 100%, 100% 100%; }
}
#lfxFruitBg.lfxFr-aero .lfxFrP {
  top: auto;
  bottom: -6vh;
  width: calc(18px * var(--s));
  height: calc(18px * var(--s));
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.85);
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0 18%, rgba(255,255,255,.18) 30%, rgba(0,164,228,.12) 100%);
  animation: lfxAeBubble var(--t) linear var(--d) infinite;
}
#lfxFruitBg.lfxFr-aero .lfxFrP:nth-child(4n) {
  width: calc(120px * var(--s)); height: calc(38px * var(--s));
  bottom: auto; top: var(--y);
  border: none; border-radius: 40px;
  background:
    radial-gradient(circle at 30% 60%, #fff 0 34%, transparent 35%),
    radial-gradient(circle at 55% 40%, #fff 0 42%, transparent 43%),
    radial-gradient(circle at 78% 62%, #fff 0 30%, transparent 31%);
  opacity: .85;
  animation: lfxAeCloud calc(var(--t) * 4) linear var(--d) infinite;
}
#lfxFruitBg.lfxFr-aero .lfxFrP:first-child {
  display: block;
  left: 50%;
  top: auto;
  bottom: calc(14vh + 34px);
  width: auto; height: auto;
  border: none; background: none;
  transform: translateX(-50%);
  animation: none;
  white-space: nowrap;
  font: 600 20px 'Segoe UI', Frutiger, 'Myriad Pro', 'Quicksand', sans-serif;
  color: #08466e;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
#lfxFruitBg.lfxFr-aero .lfxFrP:first-child::before { content: 'Loading...'; }
@keyframes lfxAeBubble {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: .9; }
  50%  { transform: translate(2vw, -55vh); }
  90%  { opacity: .9; }
  100% { transform: translate(-1vw, -112vh); opacity: 0; }
}
@keyframes lfxAeCloud {
  from { transform: translateX(-30vw); }
  to   { transform: translateX(110vw); }
}
@media (prefers-reduced-motion: reduce) {
  #lfxFruitBg.lfxFr-aero::after { animation: none; background-size: 100% 100%, 60% 100%, 100% 100%; }
  #lfxFruitBg.lfxFr-aero .lfxFrP:nth-child(n) { animation: none; }
}

/* ═══ SERVER SELECTOR per skin (errorx002 2026-09-24: "arregla lo de seleccion entre oficial, sandbox y private ...
   ese cyan horrendo, ese neon feo" — Fruits "la poca luz celeste", Tankcore "más o menos", Aero "donde falta").
   Same leftovers the Shapeboat fix removed: .sbName hardcoded #eef4ff, .sbCount/.sbDot neon #2ee6c6 with a glow,
   the teal selected-row bar (.sbRow.sbSel / sliding .sbRowInd) and the teal tab pill (.sbInd + blurred ::after
   bloom). Scoped by container first, then the pieces. Never touches transform/transition: .sbInd/.sbRowInd
   slide via transform and rows enter via keyframed transform. Fruits' PLAY also kept the stock teal gradient:
   its rule set only background-color, and the stock `background: linear-gradient(...) !important` image won. ═══ */

/* ---- FRUITS: cocoa ink on picnic paper, leaf-green accents, no light ---- */
body.skin-fruits #serverBrowser,
body.skin-fruits #serverBrowser * { color: var(--fr-text); text-shadow: none !important; }
body.skin-fruits #sbList {
  background: rgba(255,250,236,.55) !important;
  border: 1px solid var(--fr-edge) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 2px rgba(70,54,20,.10) !important;
}
body.skin-fruits .sbRow:hover { background: rgba(107,160,80,.10) !important; }
body.skin-fruits .sbRow.sbSel,
body.skin-fruits .sbRowInd {
  background: rgba(107,160,80,.18) !important;
  box-shadow: inset 0 0 0 1px rgba(79,125,56,.42) !important;
}
body.skin-fruits #sbList.sbFx .sbRow.sbSel { background: transparent !important; box-shadow: none !important; }
body.skin-fruits .sbName  { color: var(--fr-text) !important; font-family: var(--fr-font) !important; }
body.skin-fruits .sbSub   { color: var(--fr-muted) !important; }
body.skin-fruits .sbCount { color: var(--fr-muted) !important; font-family: var(--fr-font) !important; }
body.skin-fruits .sbDot   { background: var(--fr-accent) !important; box-shadow: none !important; border-radius: 50% 50% 50% 0 !important; }   /* a little seed, not a neon light */
body.skin-fruits .sbEmpty { color: var(--fr-muted) !important; }
/* sliding-pill mode (uiFx): the tabs go see-through so the pill shows as it travels; the chosen one drops its edge */
body.skin-fruits #sbTabs.sbFx .sbTab { background: transparent !important; }
body.skin-fruits #sbTabs.sbFx .sbTab.sbActive { border-color: transparent !important; }
body.skin-fruits #serverBrowser .sbTab.sbActive { color: #0f2a10 !important; }
body.skin-fruits .sbInd {
  background: var(--fr-accent) !important;
  border: 1px solid #4f7d38 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25) !important;
  border-radius: 8px !important;
}
body.skin-fruits .sbInd::after { display: none !important; }
body.skin-fruits #playButton {
  background: linear-gradient(180deg, #86bd68, var(--fr-accent) 55%, #5a8d42) !important;
  color: #fffaf0 !important;
}
body.skin-fruits #playButton:hover { background: linear-gradient(180deg, #96cb78, var(--fr-accent-hi) 55%, #66994c) !important; }
body.uiFx.skin-fruits #playButton:hover { box-shadow: 0 8px 18px rgba(79,125,56,.35) !important; }

/* ---- TANKCORE: murky teal ink, clinical square edges; the cyan stays flat (no glow) and the one "wrong" note
   is the magenta bar on the chosen row ---- */
body:is(.skin-tankcore, .theme-tankcore) #serverBrowser,
body:is(.skin-tankcore, .theme-tankcore) #serverBrowser * { color: var(--tc-text); text-shadow: none !important; }
body:is(.skin-tankcore, .theme-tankcore) #sbList {
  background: rgba(204,222,236,.55) !important;
  border: 1px solid var(--tc-edge) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}
body:is(.skin-tankcore, .theme-tankcore) .sbRow { border-radius: 0 !important; }
body:is(.skin-tankcore, .theme-tankcore) .sbRow:hover { background: rgba(60,110,98,.08) !important; }
body:is(.skin-tankcore, .theme-tankcore) .sbRow.sbSel,
body:is(.skin-tankcore, .theme-tankcore) .sbRowInd {
  background: rgba(228,238,214,.8) !important;
  box-shadow: inset 3px 0 0 var(--tc-clash), inset 0 0 0 1px var(--tc-edge) !important;
  border-radius: 0 !important;
}
body:is(.skin-tankcore, .theme-tankcore) #sbList.sbFx .sbRow.sbSel { background: transparent !important; box-shadow: none !important; }
body:is(.skin-tankcore, .theme-tankcore) .sbName  { color: var(--tc-text) !important; font-family: var(--tc-font) !important; }
body:is(.skin-tankcore, .theme-tankcore) .sbSub   { color: var(--tc-muted) !important; }
body:is(.skin-tankcore, .theme-tankcore) .sbCount { color: var(--tc-muted) !important; font-family: var(--tc-font) !important; }
body:is(.skin-tankcore, .theme-tankcore) .sbDot   { background: var(--tc-accent2) !important; box-shadow: none !important; border-radius: 0 !important; }
body:is(.skin-tankcore, .theme-tankcore) .sbEmpty { color: var(--tc-muted) !important; }
body:is(.skin-tankcore, .theme-tankcore) #sbTabs.sbFx .sbTab { background: transparent !important; }
body:is(.skin-tankcore, .theme-tankcore) #sbTabs.sbFx .sbTab.sbActive { border-color: transparent !important; }
body:is(.skin-tankcore, .theme-tankcore) #serverBrowser .sbTab.sbActive { color: #06222a !important; }
body:is(.skin-tankcore, .theme-tankcore) .sbInd {
  background: var(--tc-accent) !important;
  border: 1px solid var(--tc-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
  border-radius: 0 !important;
}
body:is(.skin-tankcore, .theme-tankcore) .sbInd::after { display: none !important; }

/* ---- TANKYTER AERO: aqua ink on glass, glossy capsules; the highlight is LIME gloss (like PLAY), never a neon
   cyan light. Dots are little lime bubbles. ---- */
body.skin-aero #serverBrowser,
body.skin-aero #serverBrowser * { color: var(--ae-text); text-shadow: none !important; }
body.skin-aero #sbList {
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(226,246,255,.45)) !important;
  border: 1px solid var(--ae-edge) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 2px 6px rgba(0,80,130,.10) !important;
}
body.skin-aero .sbRow { border-radius: 999px !important; }
body.skin-aero .sbRow:hover { background: rgba(255,255,255,.55) !important; }
body.skin-aero .sbRow.sbSel,
body.skin-aero .sbRowInd {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(222,244,255,.85) 50%, rgba(200,234,250,.85) 51%, rgba(236,249,255,.92)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,110,170,.30), 0 2px 5px rgba(0,80,130,.14) !important;
  border-radius: 999px !important;
}
body.skin-aero #sbList.sbFx .sbRow.sbSel { background: transparent !important; box-shadow: none !important; }
body.skin-aero .sbName  { color: var(--ae-text) !important; font-family: var(--ae-font) !important; }
body.skin-aero .sbSub   { color: var(--ae-muted) !important; }
body.skin-aero .sbCount { color: var(--ae-muted) !important; font-family: var(--ae-font) !important; }
body.skin-aero .sbDot   {
  background: radial-gradient(circle at 35% 30%, #ffffff 0 18%, #b6f76a 30%, #5fc414 100%) !important;
  box-shadow: 0 0 0 1px rgba(60,140,10,.45) !important;
  width: 9px !important; height: 9px !important;
}
body.skin-aero .sbEmpty { color: var(--ae-muted) !important; }
body.skin-aero .sbTab {
  background: linear-gradient(180deg, #ffffff, #eaf8ff 50%, #d6f0fc 51%, #eefaff) !important;
  color: var(--ae-muted) !important;
  border: 1px solid var(--ae-edge) !important;
  border-radius: 999px !important;
  font-family: var(--ae-font) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0,80,130,.12) !important;
}
body.skin-aero .sbTab:hover { color: var(--ae-text) !important; }
body.skin-aero #serverBrowser .sbTab.sbActive {
  background: var(--ae-btn-lime) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(20,80,0,.6) !important;
  border-color: rgba(40,110,10,.6) !important;
}
body.skin-aero #sbTabs.sbFx .sbTab { background: transparent !important; box-shadow: none !important; }
body.skin-aero #serverBrowser #sbTabs.sbFx .sbTab.sbActive { background: transparent !important; border-color: transparent !important; }
body.skin-aero .sbInd {
  background: var(--ae-btn-lime) !important;
  border: 1px solid rgba(40,110,10,.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(30,90,0,.25) !important;
  border-radius: 999px !important;
}
body.skin-aero .sbInd::after { display: none !important; }

/* ═══ FEEL FRIENDLY, DEAR TANK~ (VA-X Corp / errorx002 2026-09-24, doc 558-712). GATED like the other VA-X
   skins (AAI_SKINS: errorx002 + T5+). Since 2026-09-24 it takes the Depths layout (body.hudAlt; velvet left
   SKIN_STOCK_HUD) - its HUD materials are in VELVET HUD at the end of this file. Shapes and field come from script2.js (velvetMaterial, SKIN_CANVAS.velvet,
   render.skinGround). ═══ */
/* ── FEEL FRIENDLY, DEAR TANK~ (skin-velvet) ─────────────────────────────────────────────────────────────
   errorx002 2026-09-24, on the first pass: "hay cosas aun neon, y no se siente elegante, elegante en el
   sentido de un anochecer aleman ... y sutil". So: a quiet bar in the evening, not a boudoir. Smoked glass
   panels with one rose-gold hairline, bordeaux as the only filled colour, brass for what matters (the rank-1
   bar, dates, your name), warm ivory type, set light and tracked. No glows, no gradients on controls, no
   pink, no teal, no rainbow. Type (his fonts, 2026-09-24, "que se sienta elegante y sexy"): Bodoni Moda for
   titles and PLAY (a fashion-magazine Didone), Space Grotesk light for text, Syne for small tracked labels.
   ⚠️ NEVER set `position` on #playButton / #b0-#b2 / the modal buttons here: they are all position:absolute,
   and overriding it drops them out of place (that is what clipped the play button to "JUGA" on the first
   pass). Same rule for the panels: every card is already a containing block. */
body.theme-velvet, html body.skin-velvet {
  --th-card: rgba(26,13,19,.92);
  --th-border: rgba(205,170,150,.24);
  --th-line: rgba(205,170,150,.10);
  --th-text: #ece3da; --th-muted: #a39096;
  --th-accent: linear-gradient(180deg,#7a2440,#5e1a31);
  --th-accentc: #7a2440; --th-track: rgba(205,170,150,.14);
}
body.skin-velvet {
  --vv-face:   rgba(26,13,19,.86);
  --vv-face-2: rgba(38,19,28,.92);
  --vv-edge:   rgba(205,170,150,.26);
  --vv-hair:   rgba(205,170,150,.12);
  --vv-ink:    #ece3da;
  --vv-muted:  #a39096;
  --vv-brass:  #c2a36b;
  --vv-bord:   #6b1e36;
  --vv-bord-hi:#7d2642;
  --vv-tint:   rgba(205,170,150,.07);
  --vv-tint-2: rgba(205,170,150,.15);
  --vv-font:   'SpaceGrotesk','Bahnschrift','Segoe UI',system-ui,sans-serif;
  --vv-display: 'BodoniModa','Gloock','Bodoni 72',Didot,Georgia,serif;
  --vv-label:  'Syne','SpaceGrotesk','Segoe UI',system-ui,sans-serif;
}
body.skin-velvet #overlay2 { background: transparent !important; }
/* ---- panels: smoked glass, one rose-gold hairline ---- */
body.skin-velvet #serverSelect,
body.skin-velvet #playMenu,
body.skin-velvet #credits,
body.skin-velvet #featured,
body.skin-velvet #videoBox,
body.skin-velvet #serverBrowser,
body.skin-velvet #optionsCard,
body.skin-velvet #changelog,
body.skin-velvet #contact,
body.skin-velvet #disconnect,
body.skin-velvet #adblock {
  background: var(--vv-face) !important;
  background-image: none !important;
  border: 1px solid var(--vv-edge) !important;
  border-radius: 6px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.35) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--vv-ink);
}
body.skin-velvet #changelogFull,
body.skin-velvet #accountFull,
body.skin-velvet #tips {
  background: rgba(16,8,12,.9) !important;
  background-image: none !important;
  border: 1px solid var(--vv-hair) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: var(--vv-ink);
}
/* ---- type: DIN, light, a little air between the letters ---- */
body.skin-velvet #playMenu, body.skin-velvet #playButton, body.skin-velvet #optionsCard,
body.skin-velvet #credits, body.skin-velvet #creditsText, body.skin-velvet #creditsContent, body.skin-velvet #creditsContent2,
body.skin-velvet #featured, body.skin-velvet #videoBoxTitle, body.skin-velvet #serverSelect, body.skin-velvet #serverBrowser,
body.skin-velvet #serverSelectSlide, body.skin-velvet #serverSelectLeft, body.skin-velvet #serverSelectRight,
body.skin-velvet #serverSelectLowerText, body.skin-velvet #serverSelectArrow, body.skin-velvet #channelName,
body.skin-velvet #name, body.skin-velvet #optionsClose, body.skin-velvet .input,
body.skin-velvet #changelog, body.skin-velvet #changelogContent,
body.skin-velvet #tipsContent, body.skin-velvet #accountContent,
body.skin-velvet .optLabel, body.skin-velvet .optSub,
body.skin-velvet .optComing, body.skin-velvet .optTab, body.skin-velvet .optStyle,
body.skin-velvet .bold, body.skin-velvet .text, body.skin-velvet .light, body.skin-velvet .clItem,
body.skin-velvet .clDate, body.skin-velvet .clSub, body.skin-velvet .lbName, body.skin-velvet .lbRank,
body.skin-velvet .lbScore, body.skin-velvet .statButton, body.skin-velvet .statButtonDisabled,
body.skin-velvet .upgradeName, body.skin-velvet #tankScore, body.skin-velvet #tankPartialLevel,
body.skin-velvet .statBarText {
  font-family: var(--vv-font) !important;
}
body.skin-velvet #serverSelectSlide,
body.skin-velvet #serverSelectLeft,
body.skin-velvet #serverSelectRight,
body.skin-velvet #creditsText,
body.skin-velvet #channelName,
body.skin-velvet #videoBoxTitle,
body.skin-velvet .optLabel,
body.skin-velvet .bold:not([id="tankName"]),   /* #tankName's colour is the player's name colour, set inline */
body.skin-velvet .text,
body.skin-velvet .light,
body.skin-velvet .lbName,
body.skin-velvet .lbScore,
body.skin-velvet .lbRank,
body.skin-velvet .clItem,
body.skin-velvet #creditsContent,
body.skin-velvet #changelogContent,
body.skin-velvet #tipsContent,
body.skin-velvet #accountContent {
  color: var(--vv-ink) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  font-weight: 300;
  letter-spacing: .03em;
}
body.skin-velvet .lbScore, body.skin-velvet .lbRank, body.skin-velvet .clDate { font-variant-numeric: tabular-nums; }
body.skin-velvet #title {
  font-family: var(--vv-font) !important;
  font-weight: 200 !important;
  letter-spacing: .32em !important;
  text-transform: uppercase;
  color: var(--vv-ink) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  animation: none !important;
}
/* panel titles: uppercase, widely tracked, light */
body.skin-velvet #optionsTitle,
body.skin-velvet #changelogTitle,
body.skin-velvet #tipsTitle,
body.skin-velvet #contactTitle,
body.skin-velvet #disconnectTitle,
body.skin-velvet #adblockTitle,
body.skin-velvet #respawnTitle,
body.skin-velvet #serverSelectTitle,
body.skin-velvet #leaderboardTitle {
  font-family: var(--vv-font) !important;
  font-weight: 300 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  color: var(--vv-ink) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
body.skin-velvet #serverSelectLowerText,
body.skin-velvet #serverSelectArrow,
body.skin-velvet .optSub,
body.skin-velvet .clSub,
body.skin-velvet .optComing,
body.skin-velvet .optControlsHint,
body.skin-velvet .optTestTag,
body.skin-velvet #optionsClose { color: var(--vv-muted) !important; text-shadow: none !important; }
body.skin-velvet .optControlsTitle { color: var(--vv-ink); font-family: var(--vv-font); font-weight: 300; letter-spacing: .16em; text-transform: uppercase; }
body.skin-velvet .clItem::before { background: var(--vv-brass) !important; box-shadow: none !important; }
body.skin-velvet .clSub::before { background: var(--vv-tint-2) !important; }
/* dates: a brass hairline tag, not a filled badge */
body.skin-velvet .clDate {
  background: transparent !important;
  color: var(--vv-brass) !important;
  border: 1px solid rgba(194,163,107,.5) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 400 !important;
  letter-spacing: .08em;
}
body.skin-velvet .clCard { background: transparent !important; border-color: var(--vv-hair) !important; box-shadow: none !important; }
body.skin-velvet .link { color: var(--vv-ink) !important; text-decoration: none; border-bottom: 1px solid rgba(194,163,107,.45); }
/* ---- controls ---- */
body.skin-velvet .input,
body.skin-velvet .optStyle,
body.skin-velvet .optTab,
body.skin-velvet .sbTab {
  background: var(--vv-face-2) !important;
  background-image: none !important;
  border: 1px solid var(--vv-edge) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: var(--vv-muted) !important;
  text-shadow: none !important;
  font-weight: 300 !important;
  letter-spacing: .08em !important;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease !important;
}
body.skin-velvet .input:hover,
body.skin-velvet .optStyle:hover,
body.skin-velvet .optTab:hover,
body.skin-velvet .sbTab:hover { background: var(--vv-tint-2) !important; color: var(--vv-ink) !important; border-color: rgba(205,170,150,.45) !important; }
body.skin-velvet .optStyle.active,
body.skin-velvet .optTab.on,
body.skin-velvet #serverBrowser .sbTab.sbActive {
  background: var(--vv-bord) !important;
  border-color: rgba(194,163,107,.6) !important;
  color: var(--vv-ink) !important;
  box-shadow: none !important;
}
body.skin-velvet .optTabs { border-radius: 5px; background: none; border: 1px solid var(--vv-hair); }
body.skin-velvet .optSwatch { border-radius: 50% !important; box-shadow: 0 0 0 1px var(--vv-edge) !important; }
body.skin-velvet .optSwatch.active { box-shadow: 0 0 0 1px var(--vv-ink) !important; }
body.skin-velvet .optToggle { background: var(--vv-tint); border: 1px solid var(--vv-edge); }
body.skin-velvet .optToggle.on { background: var(--vv-bord) !important; border-color: rgba(194,163,107,.6); }
body.skin-velvet .optToggleKnob { background: var(--vv-ink); box-shadow: none; }
body.skin-velvet .optSlider { height: 3px; background: var(--vv-tint-2); }
body.skin-velvet .optSlider::-webkit-slider-thumb { background: var(--vv-ink); box-shadow: none; }
body.skin-velvet .optSlider::-moz-range-thumb { background: var(--vv-ink); box-shadow: none; }
body.skin-velvet .red { background: rgba(120,40,52,.35) !important; border-color: rgba(170,90,100,.5) !important; }
body.skin-velvet #name {
  background: rgba(14,7,10,.7) !important;
  background-image: none !important;
  border: 1px solid var(--vv-edge) !important;
  border-radius: 4px !important;
  color: var(--vv-ink) !important;
  font-weight: 300 !important;
  letter-spacing: .04em !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
body.skin-velvet #name::placeholder { color: var(--vv-muted) !important; }
body.skin-velvet #name:focus { border-color: rgba(194,163,107,.75) !important; outline: none; box-shadow: none !important; }
/* PLAY: flat bordeaux with a brass hairline */
body.skin-velvet #playButton {
  background: var(--vv-bord) !important;
  background-image: none !important;
  border: 1px solid rgba(194,163,107,.6) !important;
  border-radius: 4px !important;
  color: var(--vv-ink) !important;
  font-weight: 400 !important;
  letter-spacing: .04em !important;
  text-shadow: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
  animation: none !important;
}
body.skin-velvet #playButton:hover { background: var(--vv-bord-hi) !important; border-color: rgba(194,163,107,.9) !important; filter: none !important; }
/* ---- the menu chrome built in JS with inline styles (Discord, stars, shop, achievements, account) ---- */
body.skin-velvet #b0, body.skin-velvet #b1, body.skin-velvet #b2,
body.skin-velvet #starBalance, body.skin-velvet #starShop, body.skin-velvet #achBtn,
body.skin-velvet #shopPanel, body.skin-velvet #achPanel,
body.skin-velvet #loggedInAs, body.skin-velvet #profileBtn, body.skin-velvet #googleBtn,
body.skin-velvet #panel > button:not([id]), body.skin-velvet #clanBtn, body.skin-velvet #dailyBtn {
  background: var(--vv-face-2) !important;
  background-image: none !important;
  border: 1px solid var(--vv-edge) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: var(--vv-ink) !important;
  font-family: var(--vv-font) !important;
  font-weight: 300 !important;
  text-shadow: none !important;
  animation: none !important;
  letter-spacing: .06em;
}
body.skin-velvet #b0:hover, body.skin-velvet #b1:hover, body.skin-velvet #b2:hover,
body.skin-velvet #starShop:hover, body.skin-velvet #achBtn:hover,
body.skin-velvet #profileBtn:hover, body.skin-velvet #googleBtn:hover,
body.skin-velvet #panel > button:not([id]):hover, body.skin-velvet #clanBtn:hover, body.skin-velvet #dailyBtn:hover {
  background: var(--vv-tint-2) !important;
  border-color: rgba(205,170,150,.5) !important;
  filter: none !important;
}
body.skin-velvet #loggedInAs .liaLabel { color: var(--vv-muted) !important; font-weight: 300 !important; }
body.skin-velvet #loggedInAs #loggedInAsName { color: var(--vv-brass) !important; font-weight: 400 !important; }
body.skin-velvet #starBalance .sbStar,
body.skin-velvet #shopHead,
body.skin-velvet .achRow.achDone .achName { color: var(--vv-brass) !important; }
body.skin-velvet #shopHead, body.skin-velvet #achPanelHead { border-bottom: 1px solid var(--vv-hair) !important; }
body.skin-velvet .achRow, body.skin-velvet .shopRow { border-bottom: 1px solid var(--vv-hair); font-family: var(--vv-font) !important; font-weight: 300 !important; font-variant-numeric: tabular-nums; }
body.skin-velvet .achRow:last-child, body.skin-velvet .shopRow:last-child { border-bottom: none; }
body.skin-velvet #achBtnCount, body.skin-velvet #achPanelCount { color: var(--vv-muted) !important; font-weight: 300 !important; }
/* the hover lift from the uiFx batch stays; its coloured glows (green, teal, blue, gold) go */
body.uiFx.skin-velvet #playButton:hover,
body.uiFx.skin-velvet #b0:hover, body.uiFx.skin-velvet #b1:hover, body.uiFx.skin-velvet #b2:hover,
body.uiFx.skin-velvet #panel > button:not([id]):hover,
body.uiFx.skin-velvet #starShop:hover, body.uiFx.skin-velvet #achBtn:hover, body.uiFx.skin-velvet #clanBtn:hover, body.uiFx.skin-velvet #dailyBtn:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,.4) !important;
}
/* ---- private servers: buy button and the tier picker ---- */
body.skin-velvet .sbBuy {
  background: var(--vv-bord) !important;
  background-image: none !important;
  color: var(--vv-ink) !important;
  border: 1px solid rgba(194,163,107,.55) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: var(--vv-font) !important;
  font-weight: 300 !important;
  letter-spacing: .08em;
}
body.skin-velvet .sbBuy:hover { filter: none !important; background: var(--vv-bord-hi) !important; border-color: rgba(194,163,107,.9) !important; }
body.skin-velvet .authCard {
  background: rgba(22,11,16,.96) !important;
  border: 1px solid var(--vv-edge) !important;
  border-radius: 6px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.5) !important;
  font-family: var(--vv-font);
}
body.skin-velvet .authCard, body.skin-velvet .authCard *,
body.skin-velvet .authTitle, body.skin-velvet .authLabel,
body.skin-velvet .authFieldLabel, body.skin-velvet .bpDur, body.skin-velvet .bpRange,
body.skin-velvet .bpCfgTitle, body.skin-velvet .bpCfgRow label { color: var(--vv-ink) !important; text-shadow: none !important; }
body.skin-velvet .authInput, body.skin-velvet .bpSel, body.skin-velvet .bpCfgIn {
  background: rgba(14,7,10,.8) !important;
  border: 1px solid var(--vv-edge) !important;
  border-radius: 4px !important;
  color: var(--vv-ink) !important;
  font-family: var(--vv-font);
}
body.skin-velvet .bpSel option { background: #1e0f16; color: #ece3da; }
body.skin-velvet .authBtn { border-radius: 4px !important; font-weight: 300 !important; letter-spacing: .08em; box-shadow: none !important; text-shadow: none !important; }
body.skin-velvet .authSubmit { background: var(--vv-bord) !important; color: var(--vv-ink) !important; border: 1px solid rgba(194,163,107,.6) !important; }
body.skin-velvet .authCancel { background: var(--vv-face-2) !important; color: var(--vv-muted) !important; border: 1px solid var(--vv-edge) !important; }
body.skin-velvet .bpTier, body.skin-velvet .bpTierCard { background: var(--vv-face-2) !important; border: 1px solid var(--vv-edge) !important; border-radius: 5px !important; box-shadow: none !important; }
body.skin-velvet .bpTier:hover { border-color: rgba(205,170,150,.5) !important; }
body.skin-velvet .bpTierSel { border-color: rgba(194,163,107,.8) !important; background: var(--vv-tint) !important; }
body.skin-velvet .bpTierSel .bpTierRate, body.skin-velvet .bpTier span,
body.skin-velvet .bpTierRate, body.skin-velvet .bpCost { color: var(--vv-ink) !important; }
body.skin-velvet .bpTierFeats li { border-top: 1px solid var(--vv-hair) !important; font-weight: 300 !important; }
body.skin-velvet .bpTierFeats .bpFeatYes { color: #9fb08a !important; }
body.skin-velvet .bpTierFeats .bpFeatNo  { color: #b08a8a !important; }
/* ---- the menu leaderboard: a ledger. Bordeaux wash for the measure, brass for first place ---- */
body.skin-velvet .lbRow { border-radius: 3px !important; }
body.skin-velvet .lbRow:hover { outline: 1px solid var(--vv-tint-2) !important; }
body.skin-velvet .lbBar,
body.skin-velvet .lbTop1 .lbBar,
body.skin-velvet .lbTop2 .lbBar,
body.skin-velvet .lbTop3 .lbBar {
  background: linear-gradient(90deg, rgba(122,36,64,.62), rgba(122,36,64,.22)) !important;
  box-shadow: none !important;
  border-radius: 3px !important;
}
body.skin-velvet .lbTop1 .lbBar { background: linear-gradient(90deg, rgba(194,163,107,.55), rgba(194,163,107,.16)) !important; }
/* ---- the in-game leaderboard: same ledger, the team-colour fill kept but quietened ---- */
body.skin-velvet .leaderboardEntry { text-shadow: none !important; font-family: var(--vv-font) !important; font-weight: 300 !important; font-variant-numeric: tabular-nums; }
body.skin-velvet .leaderboardSlide { filter: saturate(.55) brightness(.8); }
body.skin-velvet .leaderboardText { font-family: var(--vv-font) !important; font-weight: 300 !important; letter-spacing: .03em; text-shadow: 0 1px 2px rgba(0,0,0,.6) !important; }
/* ---- score / level and the stat bars: smoked tracks, a flat fill with one hairline of light on top ---- */
body.skin-velvet #tankScore,
body.skin-velvet #tankPartialLevel,
body.skin-velvet .statBarLeft,
body.skin-velvet .statBarRight {
  background: rgba(20,10,15,.86) !important;
  border: 1px solid var(--vv-edge);
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  color: var(--vv-ink);
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
body.skin-velvet #tankLevelBar {
  background: linear-gradient(180deg,#d2b67e 0%,#b0925a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,244,220,.35);
}
body.skin-velvet #tankScoreBar {
  background: linear-gradient(180deg,#8e2b4a 0%,#6b1e36 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,220,230,.18);
}
body.skin-velvet .statBarSlide,
body.skin-velvet .statBarSlide2 {
  filter: saturate(.7) brightness(.95);
  box-shadow: inset 0 1px 0 rgba(255,236,226,.18);
}
body.skin-velvet .statButton {
  background: var(--vv-bord);
  color: var(--vv-ink);
  border: 1px solid rgba(194,163,107,.5);
  text-shadow: none;
  box-shadow: none;
}
body.skin-velvet .statButton:active { transform: translateY(1px); }
body.skin-velvet .statButtonDisabled {
  background: rgba(30,15,22,.8);
  color: #6f5d63;
  border: 1px solid var(--vv-hair);
  opacity: .8;
}
/* tank-upgrade selectors */
body.skin-velvet .upgradeBox {
  border-color: var(--vv-edge);
  border-width: 1px;
  border-radius: 6px;
  background: var(--vv-face);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
body.skin-velvet .upgradeBox:hover { border-color: rgba(194,163,107,.8); }
body.skin-velvet .upgradeBox:active { translate: 0 1px; }   /* never `transform`: it is the box's centring */
body.skin-velvet .upgradeBoxLower { background: rgba(107,30,54,.22); }
body.skin-velvet .upgradeName { color: var(--vv-ink); text-shadow: 0 1px 2px rgba(0,0,0,.8); letter-spacing: .04em; font-weight: 300; }
body.skin-velvet #connecting { background: radial-gradient(ellipse at 50% 30%, #2e1520 0%, #1a0c12 55%, #0c0609 100%) !important; }
body.skin-velvet .connLabel { color: var(--vv-ink) !important; text-shadow: none !important; font-family: var(--vv-font) !important; font-weight: 300 !important; letter-spacing: .2em !important; text-transform: uppercase; }

/* FEEL FRIENDLY, DEAR TANK~ loading (rides #lfxFruitBg like the other VA-X loaders; gated in page.loadFx): the
   curtain of a quiet bar at dusk - dark bordeaux drapes with a brass rule either side, one warm lamp in the
   middle, a few dark petals drifting down, a little dust in the lamplight, and a brass hairline filling. */
#lfxFruitBg.lfxFr-velvet { background: radial-gradient(ellipse at 50% 38%, #3a1826 0%, #1f0e16 45%, #0c0609 100%); }
#lfxFruitBg.lfxFr-velvet::before {
  background:
    linear-gradient(rgba(194,163,107,.55), rgba(194,163,107,.55)) left 20vw top 0 / 1px 100% no-repeat,
    linear-gradient(rgba(194,163,107,.55), rgba(194,163,107,.55)) right 20vw top 0 / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(0,0,0,.6), transparent) left 0 top 0 / 20vw 100% no-repeat,
    linear-gradient(270deg, rgba(0,0,0,.6), transparent) right 0 top 0 / 20vw 100% no-repeat,
    repeating-linear-gradient(90deg, #1e0911 0, #4a1729 1.6vw, #1e0911 3.2vw) left 0 top 0 / 20vw 100% no-repeat,
    repeating-linear-gradient(90deg, #1e0911 0, #4a1729 1.6vw, #1e0911 3.2vw) right 0 top 0 / 20vw 100% no-repeat;
}
#lfxFruitBg.lfxFr-velvet::after {
  inset: auto;
  left: 50%;
  bottom: 14vh;
  width: min(420px, 56vw);
  height: 1px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, #8a6d45, #c2a36b 70%, #ece3da) 0 0 / 0% 100% no-repeat,
    rgba(205,170,150,.16);
  box-shadow: none;
  animation: lfxVvPour 3.6s ease-in-out infinite;
}
@keyframes lfxVvPour {
  0%   { background-size: 0% 100%, 100% 100%; }
  88%  { background-size: 100% 100%, 100% 100%; }
  100% { background-size: 100% 100%, 100% 100%; }
}
#lfxFruitBg.lfxFr-velvet .lfxFrP {
  top: -6vh;
  width: calc(14px * var(--s));
  height: calc(18px * var(--s));
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  background: linear-gradient(160deg, #7e2a40 0%, #5a1428 55%, #2e0a16 100%);
  opacity: .7;
  animation: lfxVvPetal var(--t) linear var(--d) infinite;
}
#lfxFruitBg.lfxFr-velvet .lfxFrP:nth-child(3n) {
  top: auto;
  bottom: -2vh;
  width: calc(2px * var(--s));
  height: calc(2px * var(--s));
  border-radius: 50%;
  background: rgba(236,220,190,.8);
  box-shadow: none;
  animation: lfxVvDust calc(var(--t) * 1.4) linear var(--d) infinite;
}
#lfxFruitBg.lfxFr-velvet .lfxFrP:first-child {
  display: block;
  left: 50%;
  top: auto;
  bottom: calc(14vh + 20px);
  width: auto; height: auto;
  border: none; border-radius: 0; background: none; box-shadow: none;
  transform: translateX(-50%);
  animation: none;
  opacity: 1;
  white-space: nowrap;
  font: 400 19px 'BodoniModa','Gloock','Bodoni 72',Didot,Georgia,serif;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #ece3da;
  text-shadow: none;
}
#lfxFruitBg.lfxFr-velvet .lfxFrP:first-child::before { content: 'Loading'; }
@keyframes lfxVvPetal {
  0%   { transform: translate(0, 0) rotate(0deg) scaleX(1); }
  25%  { transform: translate(4vw, 28vh) rotate(80deg) scaleX(.4); }
  50%  { transform: translate(-3vw, 56vh) rotate(170deg) scaleX(1); }
  75%  { transform: translate(5vw, 84vh) rotate(250deg) scaleX(.35); }
  100% { transform: translate(1vw, 116vh) rotate(340deg) scaleX(1); }
}
@keyframes lfxVvDust {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: .9; }
  85%  { opacity: .6; }
  100% { transform: translate(2vw, -100vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #lfxFruitBg.lfxFr-velvet::after { animation: none; background-size: 60% 100%, 100% 100%; }
  #lfxFruitBg.lfxFr-velvet .lfxFrP:nth-child(n) { animation: none; }
}

/* ---- FEEL FRIENDLY, DEAR TANK~ server selector: ivory on smoked glass, bordeaux for the chosen tab, a brass
   rule on the chosen row, the dots small brass beads. ---- */
body.skin-velvet #serverBrowser,
body.skin-velvet #serverBrowser * { color: var(--vv-ink); text-shadow: none !important; }
body.skin-velvet #sbList {
  background: rgba(12,6,9,.5) !important;
  border: 1px solid var(--vv-hair) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}
body.skin-velvet .sbRow { border-radius: 4px !important; }
body.skin-velvet .sbRow:hover { background: var(--vv-tint) !important; }
body.skin-velvet .sbRow.sbSel,
body.skin-velvet .sbRowInd {
  background: var(--vv-tint-2) !important;
  box-shadow: inset 2px 0 0 var(--vv-brass) !important;
  border-radius: 4px !important;
}
body.skin-velvet #sbList.sbFx .sbRow.sbSel { background: transparent !important; box-shadow: none !important; }
body.skin-velvet .sbName  { color: var(--vv-ink) !important; font-family: var(--vv-font) !important; font-weight: 300 !important; letter-spacing: .04em; }
body.skin-velvet .sbSub   { color: var(--vv-muted) !important; }
body.skin-velvet .sbCount { color: var(--vv-muted) !important; font-family: var(--vv-font) !important; font-weight: 300 !important; font-variant-numeric: tabular-nums; }
body.skin-velvet .sbDot   { background: var(--vv-brass) !important; box-shadow: none !important; width: 6px !important; height: 6px !important; }
body.skin-velvet .sbEmpty { color: var(--vv-muted) !important; }
body.skin-velvet .sbTab { font-family: var(--vv-font) !important; }
body.skin-velvet #sbTabs.sbFx .sbTab { background: transparent !important; box-shadow: none !important; }
body.skin-velvet #serverBrowser #sbTabs.sbFx .sbTab.sbActive { background: transparent !important; border-color: transparent !important; }
body.skin-velvet .sbInd {
  background: var(--vv-bord) !important;
  border: 1px solid rgba(194,163,107,.6) !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}
body.skin-velvet .sbInd::after { display: none !important; }
/* ---- type: Bodoni Moda for the masthead, panel titles and PLAY; Syne for small labels ---- */
body.skin-velvet #title {
  font-family: var(--vv-display) !important;
  font-weight: 400 !important;
  letter-spacing: .18em !important;
}
body.skin-velvet #optionsTitle,
body.skin-velvet #changelogTitle,
body.skin-velvet #tipsTitle,
body.skin-velvet #contactTitle,
body.skin-velvet #disconnectTitle,
body.skin-velvet #adblockTitle,
body.skin-velvet #respawnTitle,
body.skin-velvet #serverSelectTitle,
body.skin-velvet #leaderboardTitle {
  font-family: var(--vv-display) !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
}
body.skin-velvet #playButton {
  font-family: var(--vv-display) !important;
  font-weight: 500 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
}
body.skin-velvet .optTab,
body.skin-velvet .sbTab,
body.skin-velvet .clDate,
body.skin-velvet .optControlsTitle,
body.skin-velvet .connLabel {
  font-family: var(--vv-label) !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
}

/* ═══ FEEL FRIENDLY, DEAR TANK~ — SECOND PASS (errorx002 2026-09-24) ════════════════════════════════════
   (1) "algunas cosas aun tienen el neon que NO QUEDA PARA NADA bien ... el boton de discord, esos botones".
   The leaderboard / information tabs are ID-scoped in the Modern sheet (#credits .input = 1,1,0 and its
   :hover = 1,2,0, both !important), so the class-level velvet rule above LOST: they stayed Modern blue-grey
   with the mint #2ee6c6 gradient on hover. Same for the panel title strips, the content wells, the row hover,
   the rainbow .radiantColor headings (Keybinds / CHANGELOG) and a few cool-white #eef4ff texts. Every rule
   here matches the ID scope it has to beat. Verified with an offline cascade probe (jsdom + css-tree), since
   nothing here may be opened in a browser.
   (2) "que la GUI tenga la misma apariencia que la de Depths, pero elegante ... botones de tanques ... dorado
   con negro con el tanque, y animaciones elegantes". Velvet left SKIN_STOCK_HUD, so body.hudAlt now gives it
   the Depths layout; the materials below are black lacquer and brass. The upgrade boxes keep a whisper of
   their slot colour under the lacquer (the inline tint shows through at ~8%), so the slots still differ.
   ⚠️ Never `transform` on .upgradeBox (it is translate(-50%,50%) + the stagger keyframes): the press uses the
   independent `translate` property. Never `position`/`overflow` on #b0-#b2 / #playButton. ═══ */
body.skin-velvet {
  --vv-lac:     #0d090b;
  --vv-lac-2:   #161013;
  --vv-brass-hi:#e2c78e;
  --vv-brass-lo:#8a6d45;
  --vv-rule:    rgba(194,163,107,.34);
}
/* ---- panel title strips and the wells under them ---- */
body.skin-velvet #creditsTitle,
body.skin-velvet #channel,
body.skin-velvet #videoBoxTitle {
  background: rgba(8,5,6,.42) !important;
  border: 1px solid var(--vv-hair) !important;
  border-radius: 3px !important;
  box-shadow: inset 0 -1px 0 rgba(194,163,107,.18) !important;
}
body.skin-velvet #creditsText,
body.skin-velvet #channelName {
  font-family: var(--vv-display) !important;
  font-weight: 500 !important;
  letter-spacing: .05em !important;
  color: var(--vv-ink) !important;
}
body.skin-velvet #creditsContent,
body.skin-velvet #creditsContent2 {
  background: rgba(8,5,6,.40) !important;
  box-shadow: inset 0 0 0 1px var(--vv-hair) !important;
  border-radius: 4px !important;
}
body.skin-velvet #creditsContent > div:hover { background: rgba(194,163,107,.06) !important; }
body.skin-velvet #creditsContent > div > span:first-child { color: var(--vv-muted) !important; font-weight: 300 !important; }
body.skin-velvet #creditsContent > div:nth-child(1) > span:first-child { color: var(--vv-brass) !important; }
/* ---- the tabs: black, a brass hairline, Syne caps. Hover turns the type and the rule to brass. ---- */
body.skin-velvet #credits .input,
body.skin-velvet #featured .input,
body.skin-velvet #channel .input {
  background: rgba(8,5,6,.6) !important;
  background-image: none !important;
  color: var(--vv-muted) !important;
  border: 1px solid var(--vv-rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: var(--vv-label) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  padding: 4px 11px !important;
  vertical-align: middle;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease !important;
}
body.skin-velvet #credits .input:hover,
body.skin-velvet #featured .input:hover,
body.skin-velvet #channel .input:hover,
body.skin-velvet #credits .input:focus-visible,
body.skin-velvet #featured .input:focus-visible,
body.skin-velvet #channel .input:focus-visible {
  background: rgba(194,163,107,.10) !important;
  background-image: none !important;
  color: var(--vv-brass-hi) !important;
  border-color: rgba(194,163,107,.75) !important;
  outline: none;
}
/* ---- no rainbow anywhere: headings become brass Bodoni, names stay ivory ---- */
body.skin-velvet .radiantColor { animation: none !important; }
body.skin-velvet #creditsContent2 .radiantColor,
body.skin-velvet #tipsContent .radiantColor,
body.skin-velvet #changelogContent .radiantColor,
body.skin-velvet #accountContent .radiantColor {
  color: var(--vv-brass) !important;
  font-family: var(--vv-display) !important;
  font-weight: 500 !important;
  font-size: 1.1em;
  letter-spacing: .05em;
  text-shadow: none !important;
}
body.skin-velvet #connectingSmall,
body.skin-velvet .shopName,
body.skin-velvet #achPanelHead { color: var(--vv-ink) !important; }
/* ---- Discord / Create Account / Log in: black lacquer with a double brass rule; a slow champagne light
   crosses the face on hover (background-position, so no overflow is needed on the button) ---- */
body.skin-velvet #b0, body.skin-velvet #b1, body.skin-velvet #b2 {
  background-color: var(--vv-lac) !important;
  background-image: linear-gradient(105deg, transparent 38%, rgba(236,214,170,.16) 50%, transparent 62%) !important;
  background-size: 260% 100% !important;
  background-position: 135% 0 !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(194,163,107,.55) !important;
  border-radius: 2px !important;
  color: var(--vv-brass) !important;
  font-family: var(--vv-label) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: .26em !important;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 3px var(--vv-lac), inset 0 0 0 4px rgba(194,163,107,.22), 0 8px 20px rgba(0,0,0,.35) !important;
  transition: background-position .9s cubic-bezier(.22,1,.36,1), color .3s ease, border-color .3s ease,
              box-shadow .3s ease, transform .16s cubic-bezier(.22,1,.36,1) !important;
}
body.skin-velvet #b1, body.skin-velvet #b2 { font-size: 16px !important; padding: 6px 18px !important; }
body.skin-velvet #b0:hover, body.skin-velvet #b1:hover, body.skin-velvet #b2:hover,
body.uiFx.skin-velvet #b0:hover, body.uiFx.skin-velvet #b1:hover, body.uiFx.skin-velvet #b2:hover {
  background-color: var(--vv-lac) !important;
  background-position: -35% 0 !important;
  color: var(--vv-brass-hi) !important;
  border-color: rgba(226,199,142,.9) !important;
  box-shadow: inset 0 0 0 3px var(--vv-lac), inset 0 0 0 4px rgba(226,199,142,.42), 0 10px 24px rgba(0,0,0,.45) !important;
  filter: none !important;
}
/* PLAY keeps its bordeaux; it gets the same light crossing it */
body.skin-velvet #playButton {
  background-image: linear-gradient(105deg, transparent 38%, rgba(255,236,214,.14) 50%, transparent 62%) !important;
  background-size: 260% 100% !important;
  background-position: 135% 0 !important;
  background-repeat: no-repeat !important;
  transition: background-position .9s cubic-bezier(.22,1,.36,1), background-color .3s ease, border-color .3s ease,
              box-shadow .16s ease, transform .16s cubic-bezier(.22,1,.36,1) !important;
}
body.skin-velvet #playButton:hover { background-position: -35% 0 !important; }
body.uiFx.skin-velvet #playButton:hover { box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(194,163,107,.35) !important; }
@media (prefers-reduced-motion: reduce) {
  body.skin-velvet #b0, body.skin-velvet #b1, body.skin-velvet #b2, body.skin-velvet #playButton { transition: none !important; }
}
/* ---- the Appearance button and its modal ---- */
body.skin-velvet #skinMenuBtn {
  background: rgba(10,6,8,.82);
  color: var(--vv-ink);
  border: 1px solid var(--vv-rule);
  border-radius: 3px;
  font-family: var(--vv-label);
  font-weight: 500; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
}
body.skin-velvet #skinMenuBtn:hover { border-color: rgba(226,199,142,.85); color: var(--vv-brass-hi); }
body.skin-velvet #skinMenu { background: rgba(8,4,6,.7); }
body.skin-velvet #skinMenuCard {
  background: rgba(18,10,14,.97);
  color: var(--vv-ink);
  border: 1px solid var(--vv-rule);
  border-radius: 6px;
  font-family: var(--vv-font);
}
body.skin-velvet #skinMenuHead, body.skin-velvet #skinMenuList, body.skin-velvet #skinMenuPreview { border-color: var(--vv-hair); }
body.skin-velvet #skinMenuTitle, body.skin-velvet #skinMenuInfo .siName, body.skin-velvet .skinRow .srName {
  font-family: var(--vv-display); font-weight: 500; letter-spacing: .06em;
}
body.skin-velvet #skinMenuTitle { letter-spacing: .16em; text-transform: uppercase; }
body.skin-velvet #skinMenuInfo .siH { font-family: var(--vv-label); color: var(--vv-brass); opacity: .85; }
body.skin-velvet .skinRow { background: rgba(236,227,218,.03); border-radius: 4px; }
body.skin-velvet .skinRow:hover { background: rgba(194,163,107,.07); }
body.skin-velvet .skinRow.active { border-color: rgba(194,163,107,.7); background: rgba(107,30,54,.25); }
body.skin-velvet #skinMenuInfo .siChip { background: rgba(194,163,107,.10); border-radius: 2px; }

/* ═══ VELVET HUD — the Depths layout (body.hudAlt) in black lacquer and brass ═══ */
/* vitals, bottom-left: garnet health, champagne shield, brass frame */
body.skin-velvet #hvHealth, body.skin-velvet #hvShield {
  background: rgba(8,5,6,.82);
  border: 1px solid rgba(194,163,107,.45);
  border-radius: 0;
}
body.skin-velvet #hvHealthFill {
  background: linear-gradient(180deg, #8e2b4a 0%, #6b1e36 60%, #52142a 100%);
  box-shadow: inset 0 1px 0 rgba(255,220,230,.20);
}
body.skin-velvet #hvShieldFill { background: linear-gradient(180deg, #f0e4c8, #cbb688); }
body.skin-velvet #hvHealthLag { background: rgba(226,199,142,.55); }
body.skin-velvet #hvHealthText {
  color: var(--vv-ink) !important; font-family: var(--vv-label) !important; font-weight: 500; font-size: 12px;
  letter-spacing: .26em; text-shadow: 0 1px 2px rgba(0,0,0,.7); -webkit-text-stroke: 0;
}
body.skin-velvet #hvShieldText { color: #1a1113 !important; font-family: var(--vv-label) !important; font-weight: 600; }
body.radiantMe.skin-velvet #hvHealthGlow { filter: drop-shadow(0 0 6px rgba(194,163,107,.45)); }
body.radiantMe.skin-velvet #hvShieldGlow { filter: drop-shadow(0 0 5px rgba(236,214,170,.40)); }
body.radiantMe.skin-velvet #tankScore, body.radiantMe.skin-velvet #tankPartialLevel { filter: drop-shadow(0 0 5px rgba(194,163,107,.35)); }
/* name / level beside the minimap: Bodoni for the name (its colour stays the player's own, set inline),
   Syne brass caps for the level line */
body.skin-velvet.hudAlt #tankName {
  font-family: var(--vv-display) !important;
  font-weight: 500;
  font-size: 27px;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(0,0,0,.75);
}
body.skin-velvet.hudAlt #tankLevel {
  font-family: var(--vv-label) !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--vv-brass) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
body.skin-velvet #tankScore, body.skin-velvet #tankPartialLevel { border-color: rgba(194,163,107,.42); }
body.skin-velvet #tankScoreDisplay, body.skin-velvet #tankLevelDisplay {
  font-family: var(--vv-font); font-weight: 400; letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
/* minimap: a black mat and one brass hairline outside it */
body.skin-velvet #mapCanvas {
  border-color: rgba(8,5,6,.72);
  box-shadow: 0 0 0 1px rgba(194,163,107,.45), 0 10px 24px rgba(0,0,0,.45);
}
/* chat */
body.skin-velvet #chat {
  background-color: rgba(10,6,8,.8);
  border: 1px solid var(--vv-rule);
  border-radius: 2px;
  box-shadow: none;
  color: var(--vv-ink);
  font-family: var(--vv-font);
  font-weight: 300;
  letter-spacing: .04em;
}
body.skin-velvet #chat::placeholder { color: rgba(194,163,107,.55); letter-spacing: .1em; }
body.skin-velvet #chat:focus { border-color: rgba(194,163,107,.75); }
/* stat bars: lacquer tracks with a brass hairline; the per-stat inline glow (the last neon on the HUD) is
   replaced, and the stat colours are aged rather than removed so the bars still tell apart */
body.skin-velvet .statBarLeft,
body.skin-velvet .statBarRight {
  background: rgba(10,6,8,.86) !important;
  border: 1px solid rgba(194,163,107,.30);
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
}
body.skin-velvet .statBarSlide,
body.skin-velvet .statBarSlide2 {
  filter: saturate(.38) sepia(.32) brightness(.86);
  box-shadow: inset 0 1px 0 rgba(255,236,210,.20) !important;
}
body.skin-velvet .statBarText {
  font-family: var(--vv-label) !important;
  font-weight: 500; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vv-ink); text-shadow: 0 1px 2px rgba(0,0,0,.85); -webkit-text-stroke: 0;
}
body.skin-velvet .statButton {
  background: linear-gradient(180deg, #dcc18a, #a8894f);
  color: #120c0e;
  border: none;
  transition: background .25s ease;
}
body.skin-velvet .statButton:hover { background: linear-gradient(180deg, #ecd6a6, #c2a36b); }
body.skin-velvet .statButton:active { background: #a8894f; }
body.skin-velvet .statButtonInner { font-family: var(--vv-font); font-weight: 300; }
body.skin-velvet .statButtonDisabled { background: rgba(40,28,32,.85); color: #6f5d63; border: none; opacity: .75; }
/* upgrade boxes: black lacquer, brass keyline and four brass corner brackets, the tank on top. The inline
   slot colour stays underneath at ~8% so each slot keeps a faint hue of its own. */
body.skin-velvet .upgradeBox {
  --vvk: rgba(194,163,107,.85);
  background-image:
    linear-gradient(var(--vvk), var(--vvk)), linear-gradient(var(--vvk), var(--vvk)),
    linear-gradient(var(--vvk), var(--vvk)), linear-gradient(var(--vvk), var(--vvk)),
    linear-gradient(var(--vvk), var(--vvk)), linear-gradient(var(--vvk), var(--vvk)),
    linear-gradient(var(--vvk), var(--vvk)), linear-gradient(var(--vvk), var(--vvk)),
    radial-gradient(ellipse at 50% 38%, rgba(60,40,44,.30), transparent 70%),
    linear-gradient(165deg, rgba(26,18,21,.90) 0%, rgba(10,7,8,.93) 58%, rgba(4,2,3,.96) 100%) !important;
  background-position:
    left 5px top 5px, left 5px top 5px, right 5px top 5px, right 5px top 5px,
    left 5px bottom 5px, left 5px bottom 5px, right 5px bottom 5px, right 5px bottom 5px, 0 0, 0 0 !important;
  background-size:
    10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 100% 100%, 100% 100% !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(194,163,107,.55) !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 10px 22px rgba(0,0,0,.45) !important;
  overflow: hidden;
  transition: width .2s cubic-bezier(0,0,.3,1), height .2s cubic-bezier(0,0,.3,1),
              border-color .3s ease, box-shadow .3s ease;
}
body.skin-velvet .upgradeBox:hover {
  --vvk: rgba(236,214,170,.95);
  border-color: rgba(226,199,142,.95) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 0 0 1px rgba(194,163,107,.22), 0 14px 28px rgba(0,0,0,.55) !important;
}
body.skin-velvet .upgradeBoxLower {
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  height: 55%;
}
body.skin-velvet .upgradeName {
  font-family: var(--vv-display) !important;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--vv-ink);
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  -webkit-text-stroke: 0;
  transform: translate(-50%, 0);
  opacity: .82;
  transition: transform .3s cubic-bezier(.16,1,.32,1), opacity .25s ease, color .3s ease;
}
body.skin-velvet .upgradeBox:hover .upgradeName { transform: translate(-50%, -3px); opacity: 1; color: var(--vv-brass-hi); }
/* entrance: a brass rule draws itself under the name, on each box's own stagger delay */
body.skin-velvet .upgradeBox::before {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(194,163,107,.8), transparent);
  transform: scaleX(0);
  animation: vvUpgRule .8s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: inherit;
}
body.skin-velvet .upgradeBox:hover::before { background: linear-gradient(90deg, transparent, rgba(236,214,170,1), transparent); }
@keyframes vvUpgRule { from { transform: scaleX(0) } to { transform: scaleX(1) } }
/* hover: one champagne light crosses the lacquer */
body.skin-velvet .upgradeBox::after {
  content: '';
  position: absolute;
  inset: -20% -60%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(236,214,170,.16) 50%, transparent 58%);
  transform: translateX(-60%);
  opacity: 0;
}
body.skin-velvet .upgradeBox:hover::after { animation: upgSweep .8s cubic-bezier(.33,1,.68,1) forwards; }
@media (prefers-reduced-motion: reduce) {
  body.skin-velvet .upgradeBox::before { animation: none; transform: none; }
  body.skin-velvet .upgradeBox::after { animation: none !important; opacity: 0 !important; }
  body.skin-velvet .upgradeName { transition: none; }
}
/* the connecting screen: a thin brass ring instead of the teal one, turning slower */
body.skin-velvet #connecting { color: var(--vv-ink) !important; }
body.skin-velvet .connSpin {
  border-width: 2px;
  border-color: rgba(194,163,107,.16);
  border-top-color: var(--vv-brass);
  border-right-color: rgba(194,163,107,.45);
  animation-duration: 1.4s;
}

/* ═══ TANKL STUDIO (VA-X Corp / errorx002 2026-09-24, doc 712-834) "Native DAW Dark Theme". GATED like the
   other VA-X skins (AAI_SKINS: errorx002 + T5+). Takes the Depths layout (body.hudAlt; tankl is not in
   SKIN_STOCK_HUD) - its HUD is in TANKL HUD at the end of this block. Shapes and field come from script2.js
   (tanklMaterial, SKIN_CANVAS.tankl, render.skinGround). ═══ */
/* ── TANKL STUDIO (skin-tankl) ─────────────────────────────────────────────────────────────────────────────
   FL Studio's own GUI, sober and precise (doc 714, 750-756): modular windows in matte charcoal, a header strip
   a shade lighter, 1px cold-grey borders, 2px corners, the system face (Segoe UI / Roboto) in light grey
   #D0D4DC. The track colours - mango orange, lime, cyan, muted magenta - are used only as clean accents:
   orange for what is selected, lime for what is on / playing. No glows, no textures, no musical clip-art.
   ⚠️ NEVER set `position`/`overflow` on #playButton / #b0-#b2 / the modal buttons / the cards here: they are
   position:absolute and already containing blocks. Never `transform` on .upgradeBox (use `translate`). */
body.theme-tankl, html body.skin-tankl {
  --th-card: rgba(43,48,55,.97);
  --th-border: #3a404a;
  --th-line: rgba(58,64,74,.7);
  --th-text: #d0d4dc; --th-muted: #8a93a0;
  --th-accent: linear-gradient(180deg,#ff9a22,#e67a00);
  --th-accentc: #ff8a00; --th-track: #202327;
}
body.skin-tankl {
  --tl-chassis: #202327;
  --tl-slate:   #2b3037;
  --tl-head:    #353b45;
  --tl-border:  #3a404a;
  --tl-well:    #1b1e21;
  --tl-ink:     #d0d4dc;
  --tl-muted:   #8a93a0;
  --tl-orange:  #ff8a00;
  --tl-lime:    #52d172;
  --tl-cyan:    #2bb7da;
  --tl-mag:     #c25993;
  --tl-hover:   rgba(255,255,255,.05);
  --tl-bevel:   inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.25);
  --tl-font:    'TLSegoe','Segoe UI','SegoeUI',Roboto,'Helvetica Neue',system-ui,sans-serif;
}
body.skin-tankl #overlay2 { background: transparent !important; }
/* ---- panels: FL windows. Slate body, a 22px header strip a shade lighter, 1px border, 2px corners ---- */
body.skin-tankl #serverSelect,
body.skin-tankl #playMenu,
body.skin-tankl #credits,
body.skin-tankl #featured,
body.skin-tankl #videoBox,
body.skin-tankl #serverBrowser,
body.skin-tankl #optionsCard,
body.skin-tankl #changelog,
body.skin-tankl #contact,
body.skin-tankl #disconnect,
body.skin-tankl #adblock {
  background: linear-gradient(180deg, var(--tl-head), var(--tl-head)) 0 0 / 100% 22px no-repeat,
              linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)) 0 22px / 100% 1px no-repeat,
              var(--tl-slate) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 2px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--tl-ink);
}
body.skin-tankl #changelogFull,
body.skin-tankl #accountFull,
body.skin-tankl #tips {
  background: var(--tl-chassis) !important;
  background-image: none !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--tl-ink);
}
/* ---- type: the system face, light grey, no tricks ---- */
body.skin-tankl #playMenu, body.skin-tankl #playButton, body.skin-tankl #optionsCard,
body.skin-tankl #credits, body.skin-tankl #creditsText, body.skin-tankl #creditsContent, body.skin-tankl #creditsContent2,
body.skin-tankl #featured, body.skin-tankl #videoBoxTitle, body.skin-tankl #serverSelect, body.skin-tankl #serverBrowser,
body.skin-tankl #serverSelectSlide, body.skin-tankl #serverSelectLeft, body.skin-tankl #serverSelectRight,
body.skin-tankl #serverSelectLowerText, body.skin-tankl #serverSelectArrow, body.skin-tankl #channelName,
body.skin-tankl #name, body.skin-tankl #optionsClose, body.skin-tankl .input,
body.skin-tankl #changelog, body.skin-tankl #changelogContent,
body.skin-tankl #tipsContent, body.skin-tankl #accountContent,
body.skin-tankl .optLabel, body.skin-tankl .optSub,
body.skin-tankl .optComing, body.skin-tankl .optTab, body.skin-tankl .optStyle,
body.skin-tankl .bold, body.skin-tankl .text, body.skin-tankl .light, body.skin-tankl .clItem,
body.skin-tankl .clDate, body.skin-tankl .clSub, body.skin-tankl .lbName, body.skin-tankl .lbRank,
body.skin-tankl .lbScore, body.skin-tankl .statButton, body.skin-tankl .statButtonDisabled,
body.skin-tankl .upgradeName, body.skin-tankl #tankScore, body.skin-tankl #tankPartialLevel,
body.skin-tankl .statBarText {
  font-family: var(--tl-font) !important;
}
body.skin-tankl #serverSelectSlide,
body.skin-tankl #serverSelectLeft,
body.skin-tankl #serverSelectRight,
body.skin-tankl #creditsText,
body.skin-tankl #channelName,
body.skin-tankl #videoBoxTitle,
body.skin-tankl .optLabel,
body.skin-tankl .bold:not([id="tankName"]),   /* #tankName's colour is the player's name colour, set inline */
body.skin-tankl .text,
body.skin-tankl .light,
body.skin-tankl .lbName,
body.skin-tankl .lbScore,
body.skin-tankl .lbRank,
body.skin-tankl .clItem,
body.skin-tankl #creditsContent,
body.skin-tankl #changelogContent,
body.skin-tankl #tipsContent,
body.skin-tankl #accountContent {
  color: var(--tl-ink) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  font-weight: 400;
  letter-spacing: 0;
}
body.skin-tankl .lbScore, body.skin-tankl .lbRank, body.skin-tankl .clDate { font-variant-numeric: tabular-nums; }
body.skin-tankl #title {
  font-family: var(--tl-font) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  color: var(--tl-ink) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.35) !important;
  animation: none !important;
}
/* window titles: the caption of an FL window - small, semibold, light grey, left of the strip */
body.skin-tankl #optionsTitle,
body.skin-tankl #changelogTitle,
body.skin-tankl #tipsTitle,
body.skin-tankl #contactTitle,
body.skin-tankl #disconnectTitle,
body.skin-tankl #adblockTitle,
body.skin-tankl #respawnTitle,
body.skin-tankl #serverSelectTitle,
body.skin-tankl #leaderboardTitle {
  font-family: var(--tl-font) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  color: var(--tl-ink) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
body.skin-tankl #serverSelectLowerText,
body.skin-tankl #serverSelectArrow,
body.skin-tankl .optSub,
body.skin-tankl .clSub,
body.skin-tankl .optComing,
body.skin-tankl .optControlsHint,
body.skin-tankl .optTestTag,
body.skin-tankl #optionsClose { color: var(--tl-muted) !important; text-shadow: none !important; }
body.skin-tankl .optControlsTitle { color: var(--tl-ink); font-family: var(--tl-font); font-weight: 600; letter-spacing: 0; }
body.skin-tankl .clItem::before { background: var(--tl-orange) !important; box-shadow: none !important; }
body.skin-tankl .clSub::before { background: var(--tl-border) !important; }
/* dates: a flat clip label - orange header strip colour, dark text */
body.skin-tankl .clDate {
  background: rgba(255,138,0,.16) !important;
  color: var(--tl-orange) !important;
  border: 1px solid rgba(255,138,0,.5) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: 0;
}
body.skin-tankl .clCard { background: transparent !important; border-color: var(--tl-border) !important; box-shadow: none !important; }
body.skin-tankl .link { color: var(--tl-cyan) !important; text-decoration: none; border-bottom: 1px solid rgba(43,183,218,.4); }
/* ---- controls: flat buttons with the Channel Rack bevel ---- */
body.skin-tankl .input,
body.skin-tankl .optStyle,
body.skin-tankl .optTab,
body.skin-tankl .sbTab {
  background: var(--tl-head) !important;
  background-image: none !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 2px !important;
  box-shadow: var(--tl-bevel) !important;
  color: var(--tl-muted) !important;
  text-shadow: none !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  transition: border-color .1s ease, background-color .1s ease, color .1s ease !important;
}
body.skin-tankl .input:hover,
body.skin-tankl .optStyle:hover,
body.skin-tankl .optTab:hover,
body.skin-tankl .sbTab:hover { background: #3d4450 !important; color: var(--tl-ink) !important; border-color: #4a515d !important; }
/* selected = orange text and an orange rule under it, like FL's selected tab / pattern */
body.skin-tankl .optStyle.active,
body.skin-tankl .optTab.on,
body.skin-tankl #serverBrowser .sbTab.sbActive {
  background: var(--tl-slate) !important;
  border-color: var(--tl-border) !important;
  color: var(--tl-orange) !important;
  box-shadow: inset 0 -2px 0 var(--tl-orange) !important;
}
body.skin-tankl .optTabs { border-radius: 2px; background: var(--tl-chassis); border: 1px solid var(--tl-border); }
body.skin-tankl .optSwatch { border-radius: 2px !important; box-shadow: 0 0 0 1px var(--tl-border) !important; }
body.skin-tankl .optSwatch.active { box-shadow: 0 0 0 1px var(--tl-orange) !important; }
/* toggles: an LED switch - dark when off, lime when on */
body.skin-tankl .optToggle { background: var(--tl-well); border: 1px solid var(--tl-border); border-radius: 2px; }
body.skin-tankl .optToggle.on { background: #24402e !important; border-color: rgba(82,209,114,.6); }
body.skin-tankl .optToggleKnob { background: #6a727e; border-radius: 1px; box-shadow: none; }
body.skin-tankl .optToggle.on .optToggleKnob { background: var(--tl-lime); }
/* sliders: a mixer fader - a dark slot and a light grey cap */
body.skin-tankl .optSlider { height: 4px; background: var(--tl-well); border-radius: 1px; box-shadow: inset 0 1px 0 rgba(0,0,0,.5); }
body.skin-tankl .optSlider::-webkit-slider-thumb { background: #d6dce4; border-radius: 1px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
body.skin-tankl .optSlider::-moz-range-thumb { background: #d6dce4; border-radius: 1px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
body.skin-tankl .red { background: rgba(229,57,53,.22) !important; border-color: rgba(229,57,53,.55) !important; }
body.skin-tankl #name {
  background: var(--tl-well) !important;
  background-image: none !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 2px !important;
  color: var(--tl-ink) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.4) !important;
}
body.skin-tankl #name::placeholder { color: var(--tl-muted) !important; }
body.skin-tankl #name:focus { border-color: var(--tl-orange) !important; outline: none; box-shadow: inset 0 1px 0 rgba(0,0,0,.4) !important; }
/* PLAY: the transport play button - slate with the bevel, lime type and a lime keyline */
body.skin-tankl #playButton {
  background: linear-gradient(180deg, #3d4450, #313741) !important;
  border: 1px solid rgba(82,209,114,.7) !important;
  border-radius: 2px !important;
  color: var(--tl-lime) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-shadow: none !important;
  box-shadow: var(--tl-bevel), 0 3px 10px rgba(0,0,0,.3) !important;
  animation: none !important;
}
body.skin-tankl #playButton:hover { background: linear-gradient(180deg, #454c59, #373e49) !important; border-color: var(--tl-lime) !important; filter: none !important; }
body.skin-tankl #playButton:active { background: #2b3037 !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.45) !important; }
/* ---- the menu chrome built in JS with inline styles (Discord, stars, shop, achievements, account) ---- */
body.skin-tankl #b0, body.skin-tankl #b1, body.skin-tankl #b2,
body.skin-tankl #starBalance, body.skin-tankl #starShop, body.skin-tankl #achBtn,
body.skin-tankl #shopPanel, body.skin-tankl #achPanel,
body.skin-tankl #loggedInAs, body.skin-tankl #profileBtn, body.skin-tankl #googleBtn,
body.skin-tankl #panel > button:not([id]), body.skin-tankl #clanBtn, body.skin-tankl #dailyBtn {
  background: var(--tl-head) !important;
  background-image: none !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 2px !important;
  box-shadow: var(--tl-bevel) !important;
  color: var(--tl-ink) !important;
  font-family: var(--tl-font) !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  animation: none !important;
  letter-spacing: 0;
}
body.skin-tankl #shopPanel, body.skin-tankl #achPanel { background: var(--tl-slate) !important; box-shadow: 0 6px 18px rgba(0,0,0,.35) !important; }
body.skin-tankl #b0:hover, body.skin-tankl #b1:hover, body.skin-tankl #b2:hover,
body.skin-tankl #starShop:hover, body.skin-tankl #achBtn:hover,
body.skin-tankl #profileBtn:hover, body.skin-tankl #googleBtn:hover,
body.skin-tankl #panel > button:not([id]):hover, body.skin-tankl #clanBtn:hover, body.skin-tankl #dailyBtn:hover {
  background: #3d4450 !important;
  border-color: #4a515d !important;
  filter: none !important;
}
body.skin-tankl #loggedInAs .liaLabel { color: var(--tl-muted) !important; font-weight: 400 !important; }
body.skin-tankl #loggedInAs #loggedInAsName { color: var(--tl-orange) !important; font-weight: 600 !important; }
body.skin-tankl #starBalance .sbStar,
body.skin-tankl #shopHead,
body.skin-tankl .achRow.achDone .achName { color: var(--tl-orange) !important; }
body.skin-tankl #shopHead, body.skin-tankl #achPanelHead { border-bottom: 1px solid var(--tl-border) !important; background: var(--tl-head); }
body.skin-tankl .achRow, body.skin-tankl .shopRow { border-bottom: 1px solid rgba(58,64,74,.7); font-family: var(--tl-font) !important; font-weight: 400 !important; font-variant-numeric: tabular-nums; }
body.skin-tankl .achRow:last-child, body.skin-tankl .shopRow:last-child { border-bottom: none; }
body.skin-tankl #achBtnCount, body.skin-tankl #achPanelCount { color: var(--tl-muted) !important; font-weight: 400 !important; }
/* the hover lift from the uiFx batch stays; its coloured glows go */
body.uiFx.skin-tankl #playButton:hover,
body.uiFx.skin-tankl #b0:hover, body.uiFx.skin-tankl #b1:hover, body.uiFx.skin-tankl #b2:hover,
body.uiFx.skin-tankl #panel > button:not([id]):hover,
body.uiFx.skin-tankl #starShop:hover, body.uiFx.skin-tankl #achBtn:hover, body.uiFx.skin-tankl #clanBtn:hover, body.uiFx.skin-tankl #dailyBtn:hover {
  box-shadow: var(--tl-bevel), 0 6px 14px rgba(0,0,0,.4) !important;
}
/* ---- private servers: buy button and the tier picker ---- */
body.skin-tankl .sbBuy {
  background: var(--tl-orange) !important;
  background-image: none !important;
  color: #1a1d20 !important;
  border: 1px solid #ffa640 !important;
  border-radius: 2px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25) !important;
  text-shadow: none !important;
  font-family: var(--tl-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0;
}
body.skin-tankl .sbBuy:hover { filter: none !important; background: #ff9a22 !important; }
body.skin-tankl .authCard {
  background: linear-gradient(180deg, var(--tl-head), var(--tl-head)) 0 0 / 100% 22px no-repeat, var(--tl-slate) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 2px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.5) !important;
  font-family: var(--tl-font);
}
body.skin-tankl .authCard, body.skin-tankl .authCard *,
body.skin-tankl .authTitle, body.skin-tankl .authLabel,
body.skin-tankl .authFieldLabel, body.skin-tankl .bpDur, body.skin-tankl .bpRange,
body.skin-tankl .bpCfgTitle, body.skin-tankl .bpCfgRow label { color: var(--tl-ink) !important; text-shadow: none !important; }
body.skin-tankl .authInput, body.skin-tankl .bpSel, body.skin-tankl .bpCfgIn {
  background: var(--tl-well) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 2px !important;
  color: var(--tl-ink) !important;
  font-family: var(--tl-font);
}
body.skin-tankl .bpSel option { background: #202327; color: #d0d4dc; }
body.skin-tankl .authBtn { border-radius: 2px !important; font-weight: 600 !important; letter-spacing: 0; box-shadow: var(--tl-bevel) !important; text-shadow: none !important; }
body.skin-tankl .authSubmit { background: var(--tl-orange) !important; color: #1a1d20 !important; border: 1px solid #ffa640 !important; }
body.skin-tankl .authCancel { background: var(--tl-head) !important; color: var(--tl-muted) !important; border: 1px solid var(--tl-border) !important; }
body.skin-tankl .bpTier, body.skin-tankl .bpTierCard { background: var(--tl-head) !important; border: 1px solid var(--tl-border) !important; border-radius: 2px !important; box-shadow: var(--tl-bevel) !important; }
body.skin-tankl .bpTier:hover { border-color: #4a515d !important; }
body.skin-tankl .bpTierSel { border-color: var(--tl-orange) !important; background: rgba(255,138,0,.1) !important; }
body.skin-tankl .bpTierSel .bpTierRate, body.skin-tankl .bpTier span,
body.skin-tankl .bpTierRate, body.skin-tankl .bpCost { color: var(--tl-ink) !important; }
body.skin-tankl .bpTierFeats li { border-top: 1px solid rgba(58,64,74,.7) !important; font-weight: 400 !important; }
body.skin-tankl .bpTierFeats .bpFeatYes { color: var(--tl-lime) !important; }
body.skin-tankl .bpTierFeats .bpFeatNo  { color: #e57373 !important; }
/* ---- the menu leaderboard: playlist clips. Cyan clips for the measure, the orange clip for first place ---- */
body.skin-tankl .lbRow { border-radius: 2px !important; }
body.skin-tankl .lbRow:hover { outline: 1px solid var(--tl-border) !important; }
body.skin-tankl .lbBar,
body.skin-tankl .lbTop1 .lbBar,
body.skin-tankl .lbTop2 .lbBar,
body.skin-tankl .lbTop3 .lbBar {
  background: linear-gradient(180deg, rgba(43,183,218,.5) 0 3px, rgba(43,183,218,.2) 3px) !important;
  box-shadow: none !important;
  border-radius: 2px !important;
}
body.skin-tankl .lbTop1 .lbBar { background: linear-gradient(180deg, rgba(255,138,0,.65) 0 3px, rgba(255,138,0,.24) 3px) !important; }
/* ---- the in-game leaderboard: the team colour fill kept, flat ---- */
body.skin-tankl .leaderboardEntry { text-shadow: none !important; font-family: var(--tl-font) !important; font-weight: 400 !important; font-variant-numeric: tabular-nums; }
body.skin-tankl .leaderboardSlide { filter: saturate(.8) brightness(.9); }
body.skin-tankl .leaderboardText { font-family: var(--tl-font) !important; font-weight: 600 !important; letter-spacing: 0; text-shadow: 0 1px 1px rgba(0,0,0,.6) !important; }
/* ---- score / level and the stat bars: charcoal wells, flat fills with one bevel line ---- */
body.skin-tankl #tankScore,
body.skin-tankl #tankPartialLevel,
body.skin-tankl .statBarLeft,
body.skin-tankl .statBarRight {
  background: var(--tl-chassis) !important;
  border: 1px solid var(--tl-border);
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
  color: var(--tl-ink);
  text-shadow: 0 1px 1px rgba(0,0,0,.8);
}
body.skin-tankl #tankLevelBar {
  background: var(--tl-orange) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
body.skin-tankl #tankScoreBar {
  background: var(--tl-cyan) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
body.skin-tankl .statBarSlide,
body.skin-tankl .statBarSlide2 {
  filter: saturate(.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2) !important;
}
body.skin-tankl .statButton {
  background: var(--tl-head);
  color: var(--tl-ink);
  border: 1px solid var(--tl-border);
  text-shadow: none;
  box-shadow: var(--tl-bevel);
}
body.skin-tankl .statButton:active { transform: translateY(1px); }
body.skin-tankl .statButtonDisabled {
  background: var(--tl-well);
  color: #5c6470;
  border: 1px solid rgba(58,64,74,.6);
  opacity: .85;
}
body.skin-tankl .upgradeBoxLower { background: rgba(0,0,0,.28); }
body.skin-tankl .upgradeName { color: var(--tl-ink); text-shadow: 0 1px 1px rgba(0,0,0,.8); letter-spacing: 0; font-weight: 600; }
body.skin-tankl #connecting { background: #202327 !important; color: var(--tl-ink) !important; }
body.skin-tankl .connLabel { color: var(--tl-ink) !important; text-shadow: none !important; font-family: var(--tl-font) !important; font-weight: 400 !important; letter-spacing: .02em !important; }

/* TANKL STUDIO loading (rides #lfxFruitBg like the other VA-X loaders; gated in page.loadFx): the project
   opening in the Playlist - a charcoal workspace with the ruler, lanes and bar lines, muted clips dropping
   onto their lanes one by one, the orange playhead crossing, and a 16-step sequencer row lighting up in orange
   under "Loading project". Every clip sits on a lane (explicit per-child tops), nothing floats. */
#lfxFruitBg.lfxFr-tankl { background: #23272a; }
#lfxFruitBg.lfxFr-tankl::before {
  background:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)) 0 20px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(208,212,220,.45) 0 1px, transparent 1px 120px) 0 8px / 100% 12px no-repeat,
    linear-gradient(#353b45, #353b45) 0 0 / 100% 20px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 45px, rgba(0,0,0,.3) 45px 46px) 0 20px / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(0,0,0,.32) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, transparent 0 120px, rgba(0,0,0,.08) 120px 240px);
}
#lfxFruitBg.lfxFr-tankl::after {
  inset: auto;
  left: 50%;
  bottom: 14vh;
  width: min(432px, 64vw);
  height: 20px;
  transform: translateX(-50%);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(6.25% - 3px), #23272a calc(6.25% - 3px) 6.25%),
    linear-gradient(#ff8a00, #ff8a00) 0 0 / 0% 100% no-repeat,
    linear-gradient(90deg, transparent 25%, rgba(194,89,147,.28) 25% 50%, transparent 50% 75%, rgba(194,89,147,.28) 75%),
    linear-gradient(180deg, #4a515d, #3a404a);
  box-shadow: 0 0 0 1px #1b1e21;
  animation: lfxTlSteps 2.4s steps(17, end) infinite;
}
@keyframes lfxTlSteps {
  0%   { background-size: 100% 100%, 0% 100%, 100% 100%, 100% 100%; }
  100% { background-size: 100% 100%, 106.25% 100%, 100% 100%, 100% 100%; }
}
/* the clips: a flat body, a stronger header strip, a 1px keyline; they slide onto their lane and settle */
#lfxFruitBg.lfxFr-tankl .lfxFrP {
  width: calc(150px * var(--s));
  height: 40px;
  border-radius: 2px;
  --c: 255,138,0;
  background:
    linear-gradient(rgba(var(--c),.34), rgba(var(--c),.34)) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(var(--c),.4) 14px 26px, transparent 26px 34px) 4px 16px / calc(100% - 8px) 3px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(var(--c),.4) 22px 30px, transparent 30px 38px) 4px 26px / calc(100% - 8px) 3px no-repeat,
    rgba(var(--c),.13);
  box-shadow: inset 0 0 0 1px rgba(var(--c),.38);
  opacity: 0;
  animation: lfxTlClip var(--t) cubic-bezier(.2,.8,.2,1) var(--d) infinite;
}
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(4n+1) { --c: 82,209,114; }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(4n+2) { --c: 43,183,218; }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(4n+3) { --c: 194,89,147; }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(3)  { top: calc(20px + 46px * 0 + 3px); }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(4)  { top: calc(20px + 46px * 1 + 3px); }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(5)  { top: calc(20px + 46px * 2 + 3px); }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(6)  { top: calc(20px + 46px * 3 + 3px); }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(7)  { top: calc(20px + 46px * 4 + 3px); }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(8)  { top: calc(20px + 46px * 5 + 3px); }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(9)  { top: calc(20px + 46px * 6 + 3px); }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(10) { top: calc(20px + 46px * 7 + 3px); }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(11) { top: calc(20px + 46px * 1 + 3px); }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(12) { top: calc(20px + 46px * 3 + 3px); }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(13) { top: calc(20px + 46px * 5 + 3px); }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(14) { top: calc(20px + 46px * 8 + 3px); }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(15) { top: calc(20px + 46px * 9 + 3px); }
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(16) { top: calc(20px + 46px * 10 + 3px); }
@keyframes lfxTlClip {
  0%   { opacity: 0; transform: translateX(-14px); }
  10%  { opacity: .95; transform: translateX(0); }
  82%  { opacity: .95; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}
/* the playhead: an orange line down the playlist with its marker in the ruler, crossing at 120 BPM */
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(2) {
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  height: auto;
  border-radius: 0;
  background: #ff8a00;
  box-shadow: none;
  opacity: .85;
  animation: lfxTlHead 8s linear infinite;
}
#lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(2)::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 0;
  border-left: 6px solid transparent;
  border-right: 7px solid transparent;
  border-top: 14px solid #ff8a00;
}
@keyframes lfxTlHead { from { transform: translateX(0); } to { transform: translateX(100vw); } }
#lfxFruitBg.lfxFr-tankl .lfxFrP:first-child {
  display: block;
  left: 50%;
  top: auto;
  bottom: calc(14vh + 30px);
  width: auto; height: auto;
  border: none; border-radius: 0; background: none; box-shadow: none;
  transform: translateX(-50%);
  animation: none;
  opacity: 1;
  white-space: nowrap;
  font: 600 14px 'Segoe UI','SegoeUI',Roboto,system-ui,sans-serif;
  letter-spacing: .02em;
  color: #d0d4dc;
  text-shadow: none;
}
#lfxFruitBg.lfxFr-tankl .lfxFrP:first-child::before { content: 'Loading project'; }
@media (prefers-reduced-motion: reduce) {
  #lfxFruitBg.lfxFr-tankl::after { animation: none; background-size: 100% 100%, 50% 100%, 100% 100%, 100% 100%; }
  #lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(n) { animation: none; opacity: .95; }
  #lfxFruitBg.lfxFr-tankl .lfxFrP:nth-child(2) { opacity: .85; left: 38%; }
}

/* ---- TANKL STUDIO server selector: a browser window. Orange selection bar, lime LED dots ---- */
body.skin-tankl #serverBrowser,
body.skin-tankl #serverBrowser * { color: var(--tl-ink); text-shadow: none !important; }
body.skin-tankl #sbList {
  background: var(--tl-well) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 2px !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.4) !important;
}
body.skin-tankl .sbRow { border-radius: 0 !important; }
body.skin-tankl .sbRow:hover { background: var(--tl-hover) !important; }
body.skin-tankl .sbRow.sbSel,
body.skin-tankl .sbRowInd {
  background: rgba(255,138,0,.14) !important;
  box-shadow: inset 3px 0 0 var(--tl-orange) !important;
  border-radius: 0 !important;
}
body.skin-tankl #sbList.sbFx .sbRow.sbSel { background: transparent !important; box-shadow: none !important; }
body.skin-tankl .sbName  { color: var(--tl-ink) !important; font-family: var(--tl-font) !important; font-weight: 600 !important; letter-spacing: 0; }
body.skin-tankl .sbSub   { color: var(--tl-muted) !important; }
body.skin-tankl .sbCount { color: var(--tl-muted) !important; font-family: var(--tl-font) !important; font-weight: 400 !important; font-variant-numeric: tabular-nums; }
body.skin-tankl .sbDot   { background: var(--tl-lime) !important; box-shadow: none !important; width: 6px !important; height: 6px !important; border-radius: 1px !important; }
body.skin-tankl .sbEmpty { color: var(--tl-muted) !important; }
body.skin-tankl .sbTab { font-family: var(--tl-font) !important; }
body.skin-tankl #sbTabs.sbFx .sbTab { background: transparent !important; box-shadow: none !important; }
body.skin-tankl #serverBrowser #sbTabs.sbFx .sbTab.sbActive { background: transparent !important; border-color: transparent !important; }
body.skin-tankl .sbInd {
  background: var(--tl-slate) !important;
  border: 1px solid var(--tl-border) !important;
  box-shadow: inset 0 -2px 0 var(--tl-orange) !important;
  border-radius: 2px !important;
}
body.skin-tankl .sbInd::after { display: none !important; }

/* ---- the ID-scoped Modern rules (#credits .input = 1,1,0, its :hover = 1,2,0, both !important) need their
   own scope to lose; same for the title strips, content wells, row hovers and the rainbow headings ---- */
body.skin-tankl #creditsTitle,
body.skin-tankl #channel,
body.skin-tankl #videoBoxTitle {
  background: var(--tl-head) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 2px !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.35) !important;
}
body.skin-tankl #creditsText,
body.skin-tankl #channelName {
  font-family: var(--tl-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--tl-ink) !important;
}
body.skin-tankl #creditsContent,
body.skin-tankl #creditsContent2 {
  background: var(--tl-well) !important;
  box-shadow: inset 0 0 0 1px var(--tl-border) !important;
  border-radius: 2px !important;
}
body.skin-tankl #creditsContent > div:hover { background: var(--tl-hover) !important; }
body.skin-tankl #creditsContent > div > span:first-child { color: var(--tl-muted) !important; font-weight: 400 !important; }
body.skin-tankl #creditsContent > div:nth-child(1) > span:first-child { color: var(--tl-orange) !important; }
body.skin-tankl #credits .input,
body.skin-tankl #featured .input,
body.skin-tankl #channel .input {
  background: var(--tl-head) !important;
  background-image: none !important;
  color: var(--tl-muted) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 2px !important;
  box-shadow: var(--tl-bevel) !important;
  text-shadow: none !important;
  font-family: var(--tl-font) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  padding: 4px 11px !important;
  vertical-align: middle;
  transition: color .1s ease, border-color .1s ease, background-color .1s ease !important;
}
body.skin-tankl #credits .input:hover,
body.skin-tankl #featured .input:hover,
body.skin-tankl #channel .input:hover,
body.skin-tankl #credits .input:focus-visible,
body.skin-tankl #featured .input:focus-visible,
body.skin-tankl #channel .input:focus-visible {
  background: #3d4450 !important;
  background-image: none !important;
  color: var(--tl-orange) !important;
  border-color: #4a515d !important;
  box-shadow: var(--tl-bevel), inset 0 -2px 0 var(--tl-orange) !important;
  outline: none;
}
body.skin-tankl .radiantColor { animation: none !important; }
body.skin-tankl #creditsContent2 .radiantColor,
body.skin-tankl #tipsContent .radiantColor,
body.skin-tankl #changelogContent .radiantColor,
body.skin-tankl #accountContent .radiantColor {
  color: var(--tl-orange) !important;
  font-family: var(--tl-font) !important;
  font-weight: 600 !important;
  font-size: 1.1em;
  letter-spacing: 0;
  text-shadow: none !important;
}
body.skin-tankl #connectingSmall,
body.skin-tankl .shopName,
body.skin-tankl #achPanelHead { color: var(--tl-ink) !important; }
body.skin-tankl #b1, body.skin-tankl #b2 { font-size: 16px !important; font-weight: 600 !important; }
@media (prefers-reduced-motion: reduce) {
  body.skin-tankl #b0, body.skin-tankl #b1, body.skin-tankl #b2, body.skin-tankl #playButton { transition: none !important; }
}
/* ---- the Appearance button and its modal: a plugin window ---- */
body.skin-tankl #skinMenuBtn {
  background: var(--tl-head);
  color: var(--tl-ink);
  border: 1px solid var(--tl-border);
  border-radius: 2px;
  box-shadow: var(--tl-bevel);
  font-family: var(--tl-font);
  font-weight: 600; font-size: 12px; letter-spacing: 0;
}
body.skin-tankl #skinMenuBtn:hover { border-color: #4a515d; color: var(--tl-orange); }
body.skin-tankl #skinMenu { background: rgba(10,11,13,.6); }
body.skin-tankl #skinMenuCard {
  background: var(--tl-slate);
  color: var(--tl-ink);
  border: 1px solid var(--tl-border);
  border-radius: 2px;
  font-family: var(--tl-font);
}
body.skin-tankl #skinMenuHead { background: var(--tl-head); }
body.skin-tankl #skinMenuHead, body.skin-tankl #skinMenuList, body.skin-tankl #skinMenuPreview { border-color: var(--tl-border); }
body.skin-tankl #skinMenuTitle, body.skin-tankl #skinMenuInfo .siName, body.skin-tankl .skinRow .srName {
  font-family: var(--tl-font); font-weight: 600; letter-spacing: 0;
}
body.skin-tankl #skinMenuInfo .siH { font-family: var(--tl-font); color: var(--tl-orange); opacity: .9; }
body.skin-tankl .skinRow { background: rgba(255,255,255,.02); border-radius: 2px; }
body.skin-tankl .skinRow:hover { background: var(--tl-hover); }
body.skin-tankl .skinRow.active { border-color: var(--tl-orange); background: rgba(255,138,0,.1); }
body.skin-tankl #skinMenuInfo .siChip { background: var(--tl-head); border-radius: 2px; }

/* ═══ TANKL HUD — the Depths layout (body.hudAlt) as the TankL Control Panel (doc 752-756) ═══ */
/* vitals, bottom-left: a flat signal meter, lime to dark orange; the shield a cyan meter; charcoal frames */
body.skin-tankl #hvHealth, body.skin-tankl #hvShield {
  background: var(--tl-well);
  border: 1px solid var(--tl-border);
  border-radius: 0;
}
body.skin-tankl #hvHealthFill {
  background: linear-gradient(90deg, #d06a12 0%, #c9a032 22%, #6ccd5e 55%, #52d172 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
body.skin-tankl #hvShieldFill { background: var(--tl-cyan); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
body.skin-tankl #hvHealthLag { background: rgba(208,212,220,.5); }
body.skin-tankl #hvHealthText {
  color: #16181b !important; font-family: var(--tl-font) !important; font-weight: 700; font-size: 12px;
  letter-spacing: .02em; text-shadow: 0 1px 0 rgba(255,255,255,.25); -webkit-text-stroke: 0;
}
body.skin-tankl #hvShieldText { color: #16181b !important; font-family: var(--tl-font) !important; font-weight: 700; }
body.radiantMe.skin-tankl #hvHealthGlow { filter: drop-shadow(0 0 4px rgba(255,138,0,.35)); }
body.radiantMe.skin-tankl #hvShieldGlow { filter: drop-shadow(0 0 4px rgba(43,183,218,.35)); }
body.radiantMe.skin-tankl #tankScore, body.radiantMe.skin-tankl #tankPartialLevel { filter: drop-shadow(0 0 4px rgba(255,138,0,.3)); }
/* name / level beside the minimap: the name in its own colour (set inline), the level as a small caption */
body.skin-tankl.hudAlt #tankName {
  font-family: var(--tl-font) !important;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
body.skin-tankl.hudAlt #tankLevel {
  font-family: var(--tl-font) !important;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--tl-orange) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.8);
}
body.skin-tankl #tankScore, body.skin-tankl #tankPartialLevel { border-color: var(--tl-border); }
body.skin-tankl #tankScoreDisplay, body.skin-tankl #tankLevelDisplay {
  font-family: var(--tl-font); font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
/* minimap: a charcoal frame and a 1px border, like a docked window */
body.skin-tankl #mapCanvas {
  border-color: rgba(32,35,39,.9);
  box-shadow: 0 0 0 1px var(--tl-border), 0 6px 16px rgba(0,0,0,.4);
}
/* chat: the hint bar at the top-left of FL - a dark well, 1px border */
body.skin-tankl #chat {
  background-color: rgba(27,30,33,.9);
  border: 1px solid var(--tl-border);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.4);
  color: var(--tl-ink);
  font-family: var(--tl-font);
  font-weight: 400;
  letter-spacing: 0;
}
body.skin-tankl #chat::placeholder { color: var(--tl-muted); }
body.skin-tankl #chat:focus { border-color: var(--tl-orange); }
/* stat bars: charcoal wells, 1px border; the per-stat inline glow is replaced, the stat colours kept flat */
body.skin-tankl .statBarLeft,
body.skin-tankl .statBarRight {
  background: var(--tl-well) !important;
  border: 1px solid var(--tl-border);
  border-radius: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,.3) !important;
}
body.skin-tankl .statBarText {
  font-family: var(--tl-font) !important;
  font-weight: 600; font-size: 12.5px; letter-spacing: 0;
  color: var(--tl-ink); text-shadow: 0 1px 1px rgba(0,0,0,.85); -webkit-text-stroke: 0;
}
body.skin-tankl .statButton { background: linear-gradient(180deg, #454c59, #353b45); color: var(--tl-ink); border: 1px solid var(--tl-border); transition: background .1s ease; }
body.skin-tankl .statButton:hover { background: linear-gradient(180deg, #ff9a22, #e67a00); color: #16181b; border-color: #ffa640; }
body.skin-tankl .statButton:active { background: #e67a00; }
body.skin-tankl .statButtonInner { font-family: var(--tl-font); font-weight: 700; }
body.skin-tankl .statButtonDisabled { background: var(--tl-well); color: #5c6470; border: 1px solid rgba(58,64,74,.6); opacity: .8; }
/* upgrade boxes: Channel Rack buttons - slate with the top bevel and a 1px border; the slot colour stays as a
   thin strip down the left edge (the rack's channel colour) and an LED at the top-left lights lime on hover */
body.skin-tankl .upgradeBox {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #353b45 0%, #2b3037 100%) !important;
  background-position: 4px 0, 4px 0 !important;
  background-size: calc(100% - 4px) 100%, calc(100% - 4px) 100% !important;
  background-repeat: no-repeat !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 2px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 12px rgba(0,0,0,.4) !important;
  overflow: hidden;
  transition: width .2s cubic-bezier(0,0,.3,1), height .2s cubic-bezier(0,0,.3,1), border-color .1s ease;
}
body.skin-tankl .upgradeBox:hover { border-color: var(--tl-orange) !important; }
body.skin-tankl .upgradeBox:active { translate: 0 1px; }   /* never `transform`: it is the box's centring */
body.skin-tankl .upgradeBoxLower { background: linear-gradient(180deg, transparent, rgba(0,0,0,.4)); height: 50%; }
body.skin-tankl .upgradeName {
  font-family: var(--tl-font) !important;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--tl-ink);
  text-shadow: 0 1px 1px rgba(0,0,0,.9);
  -webkit-text-stroke: 0;
}
body.skin-tankl .upgradeBox:hover .upgradeName { color: var(--tl-orange); }
body.skin-tankl .upgradeBox::before {
  content: '';
  position: absolute;
  left: 10px; top: 7px;
  width: 6px; height: 6px;
  border-radius: 1px;
  pointer-events: none;
  background: #3a4a3f;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.4);
  transition: background .1s ease;
}
body.skin-tankl .upgradeBox:hover::before { background: var(--tl-lime); }
@media (prefers-reduced-motion: reduce) {
  body.skin-tankl .upgradeBox, body.skin-tankl .upgradeBox::before { transition: none; }
}
/* the connecting screen: an orange ring on charcoal */
body.skin-tankl .connSpin {
  border-width: 2px;
  border-color: rgba(255,138,0,.14);
  border-top-color: var(--tl-orange);
  border-right-color: rgba(255,138,0,.4);
}

/* ==== NO NEON ON THE DEATH SCREEN OR THE ACCOUNT MENU (errorx002 2026-09-24) ====================================
   "tanto esos botones neon, y tambien en lo de menu de login, aun se encuentra ese neon feo, y eso pasa en todos
   los nuevos". Under every skin sit the old stock accents: teal #2ee6c6/#37f0a6 buttons (#respawnContinue,
   #accountBack, #disconnectReload), teal death-stat values and username, and a green glow round the chosen name
   colour. The new skins themed the panels round them and never these pieces, so each one gets them here in its
   own palette, on the model of the Depths death screen (~6237).
   ⚠️ Colour, border, radius, shadow and type ONLY. #respawnContinue and #respawnStats are centred with
   transform: translate(-50%, 0) and the dsPop entrance animates on top of that, so nothing here may set
   position or transform. The death screen sits on a dark ground in every skin (the stock navy panel, or the
   dimmed world in a brutal death), so the light skins show their stat cards as cards of their own material.
   "#accountContent *" paints every descendant the stock pale blue #c6d3ec at id specificity; each skin
   re-inks it with a body-scoped copy, which still loses to the !important class rules and to inline styles. */

/* ---- TankL Studio: slate plates, the Play button's lime outline, orange for the selected thing ---- */
body.skin-tankl #respawnStats .rsRow {
  background: linear-gradient(180deg, var(--tl-head), var(--tl-slate)) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: 2px !important;
  box-shadow: var(--tl-bevel), 0 8px 22px rgba(0,0,0,.45) !important;
}
body.skin-tankl #respawnStats .rsRow span { font-family: var(--tl-font) !important; font-weight: 600 !important; letter-spacing: .06em !important; color: var(--tl-muted) !important; }
body.skin-tankl #respawnStats .rsRow b { font-family: var(--tl-font) !important; font-weight: 600 !important; color: var(--tl-ink) !important; font-variant-numeric: tabular-nums; }
body.skin-tankl #respawnContinue, body.skin-tankl #accountBack, body.skin-tankl #disconnectReload,
body.skin-tankl #contactSubmit, body.skin-tankl #contactCancel, body.skin-tankl #adblockContinue {
  background: linear-gradient(180deg, #3d4450, #313741) !important;
  border: 1px solid rgba(82,209,114,.7) !important;
  border-radius: 2px !important;
  color: var(--tl-lime) !important;
  font-family: var(--tl-font) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-shadow: none !important;
  box-shadow: var(--tl-bevel), 0 3px 10px rgba(0,0,0,.3) !important;
}
body.skin-tankl #respawnContinue:hover, body.skin-tankl #accountBack:hover, body.skin-tankl #disconnectReload:hover,
body.skin-tankl #contactSubmit:hover, body.skin-tankl #contactCancel:hover, body.skin-tankl #adblockContinue:hover {
  background: linear-gradient(180deg, #454c59, #373e49) !important; border-color: var(--tl-lime) !important; filter: none !important;
}
body.skin-tankl #accountContent * { color: var(--tl-ink); }
body.skin-tankl .acHead { color: var(--tl-ink) !important; font-family: var(--tl-font) !important; font-weight: 600 !important; }
body.skin-tankl .acName { color: var(--tl-orange) !important; font-family: var(--tl-font) !important; font-weight: 600 !important; }
body.skin-tankl .acLoadBtn, body.skin-tankl .acPubAdd {
  background: linear-gradient(180deg, var(--tl-head), var(--tl-slate)) !important; border: 1px solid var(--tl-border) !important;
  border-radius: 2px !important; color: var(--tl-ink) !important; box-shadow: var(--tl-bevel) !important; font-family: var(--tl-font) !important;
}
body.skin-tankl .acLoadBtn:hover { color: var(--tl-ink) !important; border-color: var(--tl-orange) !important; }
body.skin-tankl .acStat { background: var(--tl-slate) !important; border: 1px solid var(--tl-border) !important; border-radius: 2px !important; box-shadow: var(--tl-bevel); }
body.skin-tankl .acStat span, body.skin-tankl .acSectionTitle, body.skin-tankl .acEmpty { color: var(--tl-muted) !important; }
body.skin-tankl .acStat b, body.skin-tankl .acPubName { color: var(--tl-ink) !important; }
body.skin-tankl .acSectionTitle { border-bottom-color: var(--tl-border) !important; }
body.skin-tankl .acSection > div { border-radius: 2px; }
body.skin-tankl .ncCell { background: var(--tl-well) !important; border-color: var(--tl-border) !important; border-radius: 2px !important; color: var(--tl-ink) !important; }
body.skin-tankl .ncCell:hover { border-color: #525a66 !important; }
body.skin-tankl .ncCell.ncOn { border-color: var(--tl-orange) !important; box-shadow: inset 0 0 0 1px rgba(255,138,0,.3) !important; }

/* ---- Feel Friendly (velvet): bordeaux button with the brass hairline, brass for the selected thing ---- */
body.skin-velvet #respawnStats .rsRow {
  background: var(--vv-face-2) !important;
  border: 1px solid var(--vv-edge) !important;
  border-radius: 4px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.45) !important;
}
body.skin-velvet #respawnStats .rsRow span { font-family: var(--vv-label) !important; font-weight: 500 !important; letter-spacing: .14em !important; color: var(--vv-muted) !important; }
body.skin-velvet #respawnStats .rsRow b { font-family: var(--vv-display) !important; font-weight: 500 !important; color: var(--vv-ink) !important; }
body.skin-velvet #respawnContinue, body.skin-velvet #accountBack, body.skin-velvet #disconnectReload,
body.skin-velvet #contactSubmit, body.skin-velvet #contactCancel, body.skin-velvet #adblockContinue {
  background: var(--vv-bord) !important;
  border: 1px solid rgba(194,163,107,.6) !important;
  border-radius: 4px !important;
  color: var(--vv-ink) !important;
  font-family: var(--vv-font) !important;
  font-weight: 400 !important;
  letter-spacing: .04em !important;
  text-shadow: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
}
body.skin-velvet #respawnContinue:hover, body.skin-velvet #accountBack:hover, body.skin-velvet #disconnectReload:hover,
body.skin-velvet #contactSubmit:hover, body.skin-velvet #contactCancel:hover, body.skin-velvet #adblockContinue:hover {
  background: var(--vv-bord-hi) !important; border-color: rgba(194,163,107,.9) !important; filter: none !important;
}
body.skin-velvet #accountContent * { color: var(--vv-ink); }
body.skin-velvet .acHead { color: var(--vv-ink) !important; font-family: var(--vv-display) !important; font-weight: 500 !important; }
body.skin-velvet .acName { color: var(--vv-brass) !important; font-family: var(--vv-font) !important; font-weight: 500 !important; letter-spacing: .03em; }
body.skin-velvet .acLoadBtn, body.skin-velvet .acPubAdd {
  background: var(--vv-tint) !important; border: 1px solid var(--vv-edge) !important; border-radius: 4px !important;
  color: var(--vv-ink) !important; font-family: var(--vv-font) !important; font-weight: 400 !important;
}
body.skin-velvet .acLoadBtn:hover { color: var(--vv-ink) !important; border-color: var(--vv-brass) !important; }
body.skin-velvet .acStat { background: var(--vv-tint) !important; border: 1px solid var(--vv-hair) !important; border-radius: 4px !important; }
body.skin-velvet .acStat span, body.skin-velvet .acSectionTitle { color: var(--vv-muted) !important; font-family: var(--vv-label) !important; letter-spacing: .1em !important; }
body.skin-velvet .acEmpty { color: var(--vv-muted) !important; }
body.skin-velvet .acStat b, body.skin-velvet .acPubName { color: var(--vv-ink) !important; font-weight: 500 !important; }
body.skin-velvet .acSectionTitle { border-bottom-color: var(--vv-hair) !important; }
body.skin-velvet .acSection > div { border-radius: 4px; }
body.skin-velvet .ncCell { background: rgba(0,0,0,.28) !important; border-color: var(--vv-edge) !important; border-radius: 4px !important; color: var(--vv-ink) !important; font-weight: 500 !important; }
body.skin-velvet .ncCell:hover { border-color: rgba(205,170,150,.5) !important; }
body.skin-velvet .ncCell.ncOn { border-color: var(--vv-brass) !important; box-shadow: inset 0 0 0 1px rgba(194,163,107,.35) !important; }

/* ---- Tankyter Aero: glass cards, the glossy aqua key; the account menu becomes a pane of glass on a sky scrim ---- */
body.skin-aero #respawnStats .rsRow {
  background: var(--ae-glass) !important;
  border: 1px solid var(--ae-edge) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 var(--ae-key), inset 0 0 0 1px rgba(255,255,255,.35), var(--ae-shadow) !important;
}
body.skin-aero #respawnStats .rsRow span { font-family: var(--ae-font) !important; color: var(--ae-muted) !important; text-shadow: 0 1px 0 rgba(255,255,255,.6) !important; }
body.skin-aero #respawnStats .rsRow b { font-family: var(--ae-font) !important; font-weight: 700 !important; color: var(--ae-text) !important; text-shadow: 0 1px 0 rgba(255,255,255,.75) !important; }
body.skin-aero #respawnContinue, body.skin-aero #accountBack, body.skin-aero #disconnectReload,
body.skin-aero #contactSubmit, body.skin-aero #contactCancel, body.skin-aero #adblockContinue {
  background: var(--ae-btn) !important;
  border: 1px solid rgba(0,90,150,.45) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-family: var(--ae-font) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 1px rgba(0,60,110,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 0 #0a78b0, 0 6px 12px rgba(0,70,120,.28) !important;
}
body.skin-aero #respawnContinue:hover, body.skin-aero #accountBack:hover, body.skin-aero #disconnectReload:hover,
body.skin-aero #contactSubmit:hover, body.skin-aero #contactCancel:hover, body.skin-aero #adblockContinue:hover {
  background: var(--ae-btn) !important; filter: brightness(1.06) saturate(1.08) !important;
}
body.skin-aero #accountDark { background: rgba(170,215,240,.42) !important; }
body.skin-aero #accountFull {
  background: var(--ae-glass) !important;
  border: 1px solid var(--ae-edge) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 var(--ae-key), inset 0 0 0 1px rgba(255,255,255,.35), var(--ae-shadow) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  font-family: var(--ae-font);
  color: var(--ae-text);
}
body.skin-aero #accountContent { background: rgba(255,255,255,.3) !important; }
body.skin-aero #accountContent * { color: var(--ae-text); }
body.skin-aero .acHead, body.skin-aero .acStat b, body.skin-aero .acPubName { color: var(--ae-text) !important; }
body.skin-aero .acName { color: var(--ae-sky) !important; }
body.skin-aero .acStat span, body.skin-aero .acSectionTitle, body.skin-aero .acEmpty { color: var(--ae-muted) !important; }
body.skin-aero .acSectionTitle { border-bottom-color: rgba(0,110,170,.2) !important; }
body.skin-aero .acLoadBtn, body.skin-aero .acPubAdd {
  background: linear-gradient(180deg, #ffffff, #e2f3fc) !important; border: 1px solid var(--ae-edge) !important; border-radius: 999px !important;
  color: var(--ae-text) !important; box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0,70,120,.15) !important;
}
body.skin-aero .acLoadBtn:hover { color: var(--ae-text) !important; border-color: var(--ae-sky) !important; }
body.skin-aero .acStat { background: rgba(255,255,255,.5) !important; border: 1px solid rgba(0,110,170,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
body.skin-aero .acSection > div { background: rgba(255,255,255,.42); }
body.skin-aero .acPubTank { background: rgba(255,255,255,.4) !important; }
body.skin-aero .ncCell { background: linear-gradient(180deg, #ffffff, #e6f5fc) !important; border-color: rgba(0,110,170,.25) !important; color: var(--ae-text) !important; }
body.skin-aero .ncCell:hover { border-color: rgba(0,110,170,.5) !important; }
body.skin-aero .ncCell.ncOn { border-color: var(--ae-sky) !important; box-shadow: inset 0 1px 0 #ffffff, 0 0 0 2px rgba(0,164,228,.22) !important; }

/* ---- Shapeboat: paper cards with the ink rule; paper key on the dark death screen, ink key on the paper menu ---- */
body:is(.skin-shapeboat, .theme-shapeboat) #respawnStats .rsRow {
  background: var(--sb-paper) !important;
  border: 2px solid var(--sb-ink) !important;
  border-radius: 2px !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,.55) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #respawnStats .rsRow span { font-family: var(--sb-font) !important; letter-spacing: .08em !important; color: var(--sb-muted) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #respawnStats .rsRow b { font-family: var(--sb-display) !important; font-weight: 400 !important; color: var(--sb-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #respawnContinue {
  background: var(--sb-paper) !important;
  border: 2px solid var(--sb-ink) !important;
  border-radius: 2px !important;
  color: var(--sb-ink) !important;
  font-family: var(--sb-display) !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
  text-shadow: none !important;
  box-shadow: inset 0 0 0 2px var(--sb-paper), inset 0 0 0 3px var(--sb-ink), 0 4px 0 rgba(0,0,0,.55) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #respawnContinue:hover { background: var(--sb-paper2) !important; filter: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #accountBack, body:is(.skin-shapeboat, .theme-shapeboat) #disconnectReload,
body:is(.skin-shapeboat, .theme-shapeboat) #contactSubmit, body:is(.skin-shapeboat, .theme-shapeboat) #contactCancel,
body:is(.skin-shapeboat, .theme-shapeboat) #adblockContinue {
  background: var(--sb-ink) !important;
  border: 2px solid var(--sb-ink) !important;
  border-radius: 2px !important;
  color: var(--sb-paper) !important;
  font-family: var(--sb-display) !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
  text-shadow: none !important;
  box-shadow: inset 0 0 0 2px var(--sb-paper), inset 0 0 0 3px var(--sb-ink), 0 4px 0 rgba(20,17,14,.35) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #accountBack:hover, body:is(.skin-shapeboat, .theme-shapeboat) #disconnectReload:hover,
body:is(.skin-shapeboat, .theme-shapeboat) #contactSubmit:hover, body:is(.skin-shapeboat, .theme-shapeboat) #contactCancel:hover,
body:is(.skin-shapeboat, .theme-shapeboat) #adblockContinue:hover { background: var(--sb-ink2) !important; filter: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #accountContent * { color: var(--sb-ink); }
body:is(.skin-shapeboat, .theme-shapeboat) .acSection > div { background: rgba(20,17,14,.05); border-radius: 0; }
body:is(.skin-shapeboat, .theme-shapeboat) .ncCell { background: var(--sb-paper) !important; border-color: var(--sb-ink) !important; border-radius: 2px !important; color: var(--sb-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .ncCell:hover { background: var(--sb-paper2) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) .ncCell.ncOn { background: var(--sb-paper2) !important; box-shadow: 3px 3px 0 var(--sb-ink) !important; }

/* ---- Tankcore: off-white plastic with the magenta drop (the Play button's "wrong" note), never the cyan glow ---- */
body:is(.skin-tankcore, .theme-tankcore) #respawnStats .rsRow {
  background: var(--tc-face2) !important;
  border: 1px solid var(--tc-edge) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(204,111,176,.45), 0 8px 20px rgba(0,0,0,.35) !important;
}
body:is(.skin-tankcore, .theme-tankcore) #respawnStats .rsRow span { font-family: var(--tc-font) !important; color: var(--tc-muted) !important; }
body:is(.skin-tankcore, .theme-tankcore) #respawnStats .rsRow b { font-family: var(--tc-font) !important; color: var(--tc-text) !important; }
body:is(.skin-tankcore, .theme-tankcore) #respawnContinue, body:is(.skin-tankcore, .theme-tankcore) #accountBack, body:is(.skin-tankcore, .theme-tankcore) #disconnectReload,
body:is(.skin-tankcore, .theme-tankcore) #contactSubmit, body:is(.skin-tankcore, .theme-tankcore) #contactCancel, body:is(.skin-tankcore, .theme-tankcore) #adblockContinue {
  background: linear-gradient(180deg, rgba(255,255,255,.96), var(--tc-face2)) !important;
  border: 1px solid var(--tc-edge) !important;
  border-radius: 0 !important;
  color: var(--tc-text) !important;
  font-family: var(--tc-font) !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 0 var(--tc-clash) !important;
}
body:is(.skin-tankcore, .theme-tankcore) #respawnContinue:hover, body:is(.skin-tankcore, .theme-tankcore) #accountBack:hover, body:is(.skin-tankcore, .theme-tankcore) #disconnectReload:hover,
body:is(.skin-tankcore, .theme-tankcore) #contactSubmit:hover, body:is(.skin-tankcore, .theme-tankcore) #contactCancel:hover, body:is(.skin-tankcore, .theme-tankcore) #adblockContinue:hover {
  background: linear-gradient(180deg, #ffffff, var(--tc-face)) !important; filter: none !important;
}
body:is(.skin-tankcore, .theme-tankcore) #accountContent * { color: var(--tc-text); }
body:is(.skin-tankcore, .theme-tankcore) .acSection > div { background: rgba(60,110,98,.07); border-radius: 0; }
body:is(.skin-tankcore, .theme-tankcore) .ncCell { background: var(--tc-face2) !important; border-color: var(--tc-edge) !important; border-radius: 0 !important; color: var(--tc-text) !important; }
body:is(.skin-tankcore, .theme-tankcore) .ncCell:hover { border-color: var(--tc-text) !important; }
body:is(.skin-tankcore, .theme-tankcore) .ncCell.ncOn { border-color: var(--tc-clash) !important; box-shadow: 3px 3px 0 rgba(204,111,176,.45) !important; }

/* ---- Fruits: cream cards, the leaf-green key ---- */
body.skin-fruits #respawnStats .rsRow {
  background: var(--fr-face) !important;
  border: 1px solid var(--fr-edge) !important;
  border-radius: 16px 12px 16px 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}
body.skin-fruits #respawnStats .rsRow span { font-family: var(--fr-font) !important; color: var(--fr-muted) !important; }
body.skin-fruits #respawnStats .rsRow b { font-family: var(--fr-font) !important; font-weight: 700 !important; color: var(--fr-text) !important; }
body.skin-fruits #respawnContinue, body.skin-fruits #accountBack, body.skin-fruits #disconnectReload,
body.skin-fruits #contactSubmit, body.skin-fruits #contactCancel, body.skin-fruits #adblockContinue {
  background: var(--fr-accent) !important;
  border: 1px solid rgba(58,44,24,.25) !important;
  border-radius: 16px 9px 16px 9px !important;
  color: #fffaf0 !important;
  font-family: var(--fr-font) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #50803c !important;
}
body.skin-fruits #respawnContinue:hover, body.skin-fruits #accountBack:hover, body.skin-fruits #disconnectReload:hover,
body.skin-fruits #contactSubmit:hover, body.skin-fruits #contactCancel:hover, body.skin-fruits #adblockContinue:hover {
  background: var(--fr-accent-hi) !important; filter: none !important;
}
body.skin-fruits #accountContent * { color: var(--fr-text); }
body.skin-fruits .acSection > div { background: rgba(104,78,40,.06); }
body.skin-fruits .ncCell { background: #f6efdc !important; border-color: var(--fr-edge) !important; border-radius: 9px !important; color: var(--fr-text) !important; }
body.skin-fruits .ncCell:hover { border-color: rgba(104,78,40,.45) !important; }
body.skin-fruits .ncCell.ncOn { border-color: var(--fr-accent) !important; box-shadow: 0 0 0 2px rgba(107,160,80,.25) !important; }

/* ---- Depths: its death screen was already done (~6237); the account menu still had the teal ---- */
body.skin-depths #accountBack, body.skin-depths #disconnectReload,
body.skin-depths #contactSubmit, body.skin-depths #contactCancel, body.skin-depths #adblockContinue {
  font-family: var(--dp-font) !important; font-weight: 300 !important; letter-spacing: .16em !important;
  border-radius: 0 !important; background: #1a1a1d !important; color: #8c8c92 !important;
  border: 1px solid #2a2a2f !important; box-shadow: none !important; text-shadow: none !important;
}
body.skin-depths #accountBack:hover, body.skin-depths #disconnectReload:hover,
body.skin-depths #contactSubmit:hover, body.skin-depths #contactCancel:hover, body.skin-depths #adblockContinue:hover { background: #232327 !important; filter: none !important; }
body.skin-depths #accountContent * { color: var(--dp-ink); }
body.skin-depths .acHead, body.skin-depths .acStat b, body.skin-depths .acPubName { color: var(--dp-ink) !important; font-weight: 300 !important; }
body.skin-depths .acName { color: var(--dp-ink) !important; font-weight: 300 !important; letter-spacing: .08em; }
body.skin-depths .acStat span, body.skin-depths .acSectionTitle, body.skin-depths .acEmpty { color: var(--dp-muted) !important; }
body.skin-depths .acSectionTitle { font-weight: 300 !important; letter-spacing: .14em; border-bottom-color: var(--dp-hair) !important; }
body.skin-depths .acStat { background: var(--dp-tint) !important; border: 1px solid var(--dp-hair) !important; border-radius: 0 !important; }
body.skin-depths .acSection > div { border-radius: 0; }
body.skin-depths .acLoadBtn, body.skin-depths .acPubAdd { background: transparent !important; border: 1px solid var(--dp-edge) !important; border-radius: 0 !important; color: var(--dp-ink) !important; font-weight: 300 !important; }
body.skin-depths .acLoadBtn:hover { color: var(--dp-ink) !important; border-color: var(--dp-ink) !important; }
body.skin-depths .ncCell { background: rgba(255,255,255,.03) !important; border-color: var(--dp-hair) !important; border-radius: 0 !important; color: var(--dp-ink) !important; font-weight: 300 !important; }
body.skin-depths .ncCell:hover { border-color: var(--dp-edge) !important; }
body.skin-depths .ncCell.ncOn { border-color: var(--dp-ink) !important; box-shadow: inset 0 0 0 1px var(--dp-tint-2) !important; }
/* ---- the custom name-colour menu (its stock CSS is the <style> block in script2.js ~2769): green-tinted Apply,
   green slider thumbs, and a hex field painted dark for a dark menu. Same per-skin treatment. ---- */
body.skin-tankl #ncCustomMenu { background: rgba(0,0,0,.18); border-color: var(--tl-border); border-radius: 2px; }
body.skin-tankl #ncCustomMenu input[type=color] { border-color: var(--tl-border); border-radius: 2px; }
body.skin-tankl #ncHex { background: var(--tl-well) !important; border: 1px solid var(--tl-border) !important; border-radius: 2px !important; color: var(--tl-ink) !important; }
body.skin-tankl #ncCustomMenu .nccSliders input[type=range] { accent-color: var(--tl-orange); }
body.skin-tankl #ncCustomApply, body.skin-tankl #ncGradApply {
  background: linear-gradient(180deg, #3d4450, #313741) !important; border: 1px solid rgba(82,209,114,.7) !important;
  border-radius: 2px !important; color: var(--tl-lime) !important; box-shadow: var(--tl-bevel) !important;
}
body.skin-tankl #ncCustomApply:hover, body.skin-tankl #ncGradApply:hover { background: linear-gradient(180deg, #454c59, #373e49) !important; border-color: var(--tl-lime) !important; }

body.skin-velvet #ncCustomMenu { background: rgba(0,0,0,.2); border-color: var(--vv-hair); border-radius: 4px; }
body.skin-velvet #ncCustomMenu input[type=color] { border-color: var(--vv-edge); border-radius: 4px; }
body.skin-velvet #ncHex { background: rgba(0,0,0,.35) !important; border: 1px solid var(--vv-edge) !important; border-radius: 4px !important; color: var(--vv-ink) !important; }
body.skin-velvet #ncCustomMenu .nccSliders input[type=range] { accent-color: var(--vv-brass); }
body.skin-velvet #ncCustomApply, body.skin-velvet #ncGradApply {
  background: var(--vv-bord) !important; border: 1px solid rgba(194,163,107,.6) !important; border-radius: 4px !important; color: var(--vv-ink) !important;
}
body.skin-velvet #ncCustomApply:hover, body.skin-velvet #ncGradApply:hover { background: var(--vv-bord-hi) !important; border-color: rgba(194,163,107,.9) !important; }

body.skin-aero #ncCustomMenu { background: rgba(255,255,255,.35); border-color: rgba(0,110,170,.2); }
body.skin-aero #ncCustomMenu input[type=color] { border-color: var(--ae-edge); }
body.skin-aero #ncHex { background: #ffffff !important; border: 1px solid var(--ae-edge) !important; color: var(--ae-text) !important; }
body.skin-aero #ncCustomMenu .nccSliders input[type=range] { accent-color: var(--ae-sky); }
body.skin-aero #ncCustomApply, body.skin-aero #ncGradApply {
  background: var(--ae-btn) !important; border: 1px solid rgba(0,90,150,.45) !important; border-radius: 999px !important; color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(0,70,120,.2) !important;
}
body.skin-aero #ncCustomApply:hover, body.skin-aero #ncGradApply:hover { background: var(--ae-btn) !important; filter: brightness(1.06) saturate(1.08); }

body:is(.skin-shapeboat, .theme-shapeboat) #ncCustomMenu { background: rgba(20,17,14,.04); border-color: rgba(20,17,14,.4); border-radius: 0; }
body:is(.skin-shapeboat, .theme-shapeboat) #ncCustomMenu input[type=color] { border-color: var(--sb-ink); border-radius: 2px; }
body:is(.skin-shapeboat, .theme-shapeboat) #ncHex { background: var(--sb-paper) !important; border: 2px solid var(--sb-ink) !important; border-radius: 2px !important; color: var(--sb-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #ncCustomMenu .nccSliders input[type=range] { accent-color: var(--sb-ink); }
body:is(.skin-shapeboat, .theme-shapeboat) #ncCustomApply, body:is(.skin-shapeboat, .theme-shapeboat) #ncGradApply {
  background: var(--sb-ink) !important; border: 2px solid var(--sb-ink) !important; border-radius: 2px !important; color: var(--sb-paper) !important;
  font-family: var(--sb-display) !important; letter-spacing: .06em !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #ncCustomApply:hover, body:is(.skin-shapeboat, .theme-shapeboat) #ncGradApply:hover { background: var(--sb-ink2) !important; }

body:is(.skin-tankcore, .theme-tankcore) #ncCustomMenu { background: rgba(60,110,98,.06); border-color: var(--tc-edge); border-radius: 0; }
body:is(.skin-tankcore, .theme-tankcore) #ncCustomMenu input[type=color] { border-color: var(--tc-edge); border-radius: 0; }
body:is(.skin-tankcore, .theme-tankcore) #ncHex { background: #ffffff !important; border: 1px solid var(--tc-edge) !important; border-radius: 0 !important; color: var(--tc-text) !important; }
body:is(.skin-tankcore, .theme-tankcore) #ncCustomMenu .nccSliders input[type=range] { accent-color: var(--tc-clash); }
body:is(.skin-tankcore, .theme-tankcore) #ncCustomApply, body:is(.skin-tankcore, .theme-tankcore) #ncGradApply {
  background: linear-gradient(180deg, rgba(255,255,255,.96), var(--tc-face2)) !important; border: 1px solid var(--tc-edge) !important; border-radius: 0 !important;
  color: var(--tc-text) !important; box-shadow: inset 0 1px 0 #ffffff, 0 3px 0 var(--tc-clash) !important;
}
body:is(.skin-tankcore, .theme-tankcore) #ncCustomApply:hover, body:is(.skin-tankcore, .theme-tankcore) #ncGradApply:hover { background: linear-gradient(180deg, #ffffff, var(--tc-face)) !important; }

body.skin-fruits #ncCustomMenu { background: rgba(104,78,40,.05); border-color: var(--fr-edge); }
body.skin-fruits #ncCustomMenu input[type=color] { border-color: var(--fr-edge); }
body.skin-fruits #ncHex { background: #fffaf0 !important; border: 1px solid var(--fr-edge) !important; border-radius: 9px !important; color: var(--fr-text) !important; }
body.skin-fruits #ncCustomMenu .nccSliders input[type=range] { accent-color: var(--fr-accent); }
body.skin-fruits #ncCustomApply, body.skin-fruits #ncGradApply {
  background: var(--fr-accent) !important; border: 1px solid rgba(58,44,24,.25) !important; border-radius: 12px 8px 12px 8px !important; color: #fffaf0 !important;
}
body.skin-fruits #ncCustomApply:hover, body.skin-fruits #ncGradApply:hover { background: var(--fr-accent-hi) !important; }

body.skin-depths #ncCustomMenu { background: rgba(255,255,255,.02); border-color: var(--dp-hair); border-radius: 0; }
body.skin-depths #ncCustomMenu input[type=color] { border-color: var(--dp-edge); border-radius: 0; }
body.skin-depths #ncHex { background: rgba(0,0,0,.35) !important; border: 1px solid var(--dp-hair) !important; border-radius: 0 !important; color: var(--dp-ink) !important; }
body.skin-depths #ncCustomMenu .nccSliders input[type=range] { accent-color: #8c8c92; }
body.skin-depths #ncCustomApply, body.skin-depths #ncGradApply {
  background: #1a1a1d !important; border: 1px solid #2a2a2f !important; border-radius: 0 !important; color: #8c8c92 !important;
  font-weight: 300 !important; letter-spacing: .12em !important;
}
body.skin-depths #ncCustomApply:hover, body.skin-depths #ncGradApply:hover { background: #232327 !important; }

/* ==== DEATH SCREEN GROUND + THE SMALL POP-UPS, PER SKIN (errorx002 2026-09-24) ================================
   "¿Alguna que otra cosa falte?" What was still stock under the new skins:
   1. The death screen's own ground: the stock navy radial (~1853) sat behind every skin, and the light skins
      ink their titles dark, so "You died!" and the death quote were dark ink on navy. Each skin gets a dark
      ground of its own, with the title, killer line and quote re-inked light on it.
      The ground is gated on :not(.brutalDead), because a brutal death needs the panel transparent so the
      shatter shows (~6521). The text colours are not gated: light text also reads over the dimmed world.
   2. The disconnect, feedback and adblock pop-ups: still the stock navy / black glass in the four light
      skins, the same dark ink titles on them, and stock buttons and textarea in every skin. (The buttons
      join each skin's key in the NO NEON block above.)
   ⚠️ Colour, background, border, radius, shadow and type ONLY. The pop-ups and their buttons are placed with
   position + transform: translate, and #respawnTitle/#respawnContinue/#respawnStats are centred the same way
   under the dsPop entrance, so nothing here may set position or transform (or rotate). */

/* ---- 1. death screen ground ---- */
/* TankL Studio: the chassis, with the playlist's bar lines very faint across it */
body.skin-tankl:not(.brutalDead) #respawnPanel {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, rgba(255,255,255,0) 1px 96px),
    radial-gradient(900px 620px at 50% 42%, #2b3037 0%, #1b1e21 70%, #131517 100%) !important;
}
body.skin-tankl #killer { color: var(--tl-muted) !important; text-shadow: none !important; }
body.skin-tankl #deathQuote { color: var(--tl-ink) !important; text-shadow: none !important; }

/* Feel Friendly: bordeaux into the black lacquer, a room with the lamp turned down */
body.skin-velvet:not(.brutalDead) #respawnPanel {
  background: radial-gradient(900px 620px at 50% 40%, #2a1119 0%, #160a10 60%, var(--vv-lac) 100%) !important;
}
body.skin-velvet #killer { color: var(--vv-muted) !important; text-shadow: none !important; }
body.skin-velvet #deathQuote { color: var(--vv-ink) !important; text-shadow: none !important; }

/* Shapeboat: a silent-film intertitle, sepia black with the double rule round the card */
body:is(.skin-shapeboat, .theme-shapeboat):not(.brutalDead) #respawnPanel {
  background: radial-gradient(820px 580px at 50% 42%, #2b2622 0%, #15120f 64%, #090807 100%) !important;
  box-shadow:
    inset 0 0 0 18px #090807, inset 0 0 0 20px rgba(244,241,234,.5),
    inset 0 0 0 25px #090807, inset 0 0 0 26px rgba(244,241,234,.26) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #respawnTitle { color: var(--sb-paper) !important; text-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #killer { color: rgba(244,241,234,.66) !important; font-family: var(--sb-font) !important; text-shadow: none !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #deathQuote { color: var(--sb-paper) !important; text-shadow: none !important; }

/* Tankcore: murky teal-black with a faint scanline, the title off-white with the magenta drop */
body:is(.skin-tankcore, .theme-tankcore):not(.brutalDead) #respawnPanel {
  background:
    repeating-linear-gradient(0deg, rgba(228,238,214,.022) 0 1px, rgba(228,238,214,0) 1px 3px),
    radial-gradient(900px 620px at 50% 42%, #1d3d36 0%, #0d201b 62%, #06100d 100%) !important;
}
body:is(.skin-tankcore, .theme-tankcore) #respawnTitle { color: #e4eee0 !important; text-shadow: 0 3px 0 rgba(204,111,176,.55) !important; }
body:is(.skin-tankcore, .theme-tankcore) #killer { color: rgba(228,238,214,.62) !important; text-shadow: none !important; }
body:is(.skin-tankcore, .theme-tankcore) #deathQuote { color: #e4eee0 !important; text-shadow: none !important; }

/* Fruits: the orchard after sunset, earth brown, cream lettering */
body.skin-fruits:not(.brutalDead) #respawnPanel {
  background: radial-gradient(900px 620px at 50% 42%, #3b2c17 0%, #22190d 62%, #140e07 100%) !important;
}
body.skin-fruits #respawnTitle { color: #f3e6c8 !important; text-shadow: none !important; }
body.skin-fruits #killer { color: rgba(243,230,200,.62) !important; text-shadow: none !important; }
body.skin-fruits #deathQuote { color: #f3e6c8 !important; text-shadow: none !important; }

/* Tankyter Aero: the sky-blue logon screen, a soft sheen from the top left, white lettering */
body.skin-aero:not(.brutalDead) #respawnPanel {
  background:
    linear-gradient(168deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(1100px 760px at 50% 36%, #4cb4e6 0%, #1f86c8 42%, #0b5c9c 78%, #073f73 100%) !important;
}
body.skin-aero #respawnTitle { color: #ffffff !important; text-shadow: 0 1px 0 rgba(0,50,100,.5), 0 4px 14px rgba(0,40,90,.35) !important; }
body.skin-aero #killer { color: rgba(255,255,255,.85) !important; text-shadow: 0 1px 2px rgba(0,50,100,.45) !important; }
body.skin-aero #deathQuote { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,50,100,.45) !important; }

/* ---- 2. disconnect / feedback / adblock ---- */
/* scrims in the skin's own dark (the stock one is navy) */
body.skin-tankl #contactDark, body.skin-tankl #disconnectDark, body.skin-tankl #adblockDark { background: rgba(16,18,20,.72) !important; }
body.skin-velvet #contactDark, body.skin-velvet #disconnectDark, body.skin-velvet #adblockDark { background: rgba(13,9,11,.72) !important; }
body.skin-depths #contactDark, body.skin-depths #disconnectDark, body.skin-depths #adblockDark { background: rgba(0,0,0,.75) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #contactDark,
body:is(.skin-shapeboat, .theme-shapeboat) #disconnectDark,
body:is(.skin-shapeboat, .theme-shapeboat) #adblockDark { background: rgba(20,17,14,.55) !important; }
body:is(.skin-tankcore, .theme-tankcore) #contactDark,
body:is(.skin-tankcore, .theme-tankcore) #disconnectDark,
body:is(.skin-tankcore, .theme-tankcore) #adblockDark { background: rgba(10,30,26,.5) !important; }
body.skin-fruits #contactDark, body.skin-fruits #disconnectDark, body.skin-fruits #adblockDark { background: rgba(40,30,14,.45) !important; }
body.skin-aero #contactDark, body.skin-aero #disconnectDark, body.skin-aero #adblockDark { background: rgba(170,215,240,.42) !important; }

/* panels for the four light skins, on the model of each one's #optionsCard */
body:is(.skin-shapeboat, .theme-shapeboat) #contact,
body:is(.skin-shapeboat, .theme-shapeboat) #disconnect,
body:is(.skin-shapeboat, .theme-shapeboat) #adblock {
  background: var(--sb-paper) !important;
  background-image: linear-gradient(180deg, #f7f4ee, var(--sb-paper) 55%, var(--sb-paper2)) !important;
  border: 3px solid var(--sb-ink) !important;
  border-radius: 3px !important;
  box-shadow: inset 0 0 0 1px var(--sb-paper), inset 0 0 0 2px rgba(20,17,14,.55), 7px 7px 0 rgba(20,17,14,.72) !important;
  backdrop-filter: none !important;
  font-family: var(--sb-font);
  color: var(--sb-ink);
}
body:is(.skin-tankcore, .theme-tankcore) #contact,
body:is(.skin-tankcore, .theme-tankcore) #disconnect,
body:is(.skin-tankcore, .theme-tankcore) #adblock {
  background: linear-gradient(177deg, rgba(240,246,220,.92), var(--tc-face) 42%, var(--tc-face2)) !important;
  background-image: linear-gradient(177deg, rgba(240,246,220,.92), var(--tc-face) 42%, var(--tc-face2)) !important;
  border: 2px solid var(--tc-edge) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -12px 24px rgba(120,180,210,.18), 3px 3px 0 rgba(204,111,176,.45), 0 10px 26px rgba(16,60,84,.22) !important;
  backdrop-filter: none !important;
  font-family: var(--tc-font);
  color: var(--tc-text);
}
body.skin-fruits #contact,
body.skin-fruits #disconnect,
body.skin-fruits #adblock {
  background: var(--fr-face) !important;
  background-image: none !important;
  border: 1px solid var(--fr-edge) !important;
  border-radius: 16px 12px 16px 12px !important;
  box-shadow: 0 6px 22px rgba(58,44,24,.18) !important;
  backdrop-filter: none !important;
  font-family: var(--fr-font);
  color: var(--fr-text);
}
body.skin-aero #contact,
body.skin-aero #disconnect,
body.skin-aero #adblock {
  background: var(--ae-glass) !important;
  border: 1px solid var(--ae-edge) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 var(--ae-key), inset 0 0 0 1px rgba(255,255,255,.35), var(--ae-shadow) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  font-family: var(--ae-font);
  color: var(--ae-text);
}

/* the message text: #disconnectText was the stock pale blue everywhere, #adblockText/#contactHeader wear the
   stock black outline (.bold/.light) wherever a skin had not re-inked them */
body.skin-tankl #disconnectText, body.skin-tankl #adblockText, body.skin-tankl #contactHeader { color: var(--tl-ink) !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
body.skin-velvet #disconnectText, body.skin-velvet #adblockText, body.skin-velvet #contactHeader { color: var(--vv-ink) !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #disconnectText,
body:is(.skin-shapeboat, .theme-shapeboat) #adblockText,
body:is(.skin-shapeboat, .theme-shapeboat) #contactHeader { color: var(--sb-ink) !important; font-family: var(--sb-font) !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
body:is(.skin-tankcore, .theme-tankcore) #disconnectText,
body:is(.skin-tankcore, .theme-tankcore) #adblockText,
body:is(.skin-tankcore, .theme-tankcore) #contactHeader { color: var(--tc-text) !important; font-family: var(--tc-font) !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
body.skin-fruits #disconnectText, body.skin-fruits #adblockText, body.skin-fruits #contactHeader { color: var(--fr-text) !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
body.skin-aero #disconnectText, body.skin-aero #adblockText, body.skin-aero #contactHeader { color: var(--ae-text) !important; text-shadow: 0 1px 0 rgba(255,255,255,.75) !important; -webkit-text-stroke: 0 !important; }

/* Depths: the pop-up panels were already done (~4487); their titles and text were still stock
   (the red disconnect title, white-with-black-outline on the other two). Same voice as its other titles. */
body.skin-depths #contactTitle, body.skin-depths #disconnectTitle, body.skin-depths #adblockTitle {
  font-family: var(--dp-font) !important;
  font-weight: 300 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  color: var(--dp-ink) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
body.skin-depths #disconnectText, body.skin-depths #adblockText, body.skin-depths #contactHeader {
  font-family: var(--dp-font) !important;
  font-weight: 300 !important;
  letter-spacing: .06em;
  color: var(--dp-muted) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* the feedback textarea: a well in each skin's material instead of the stock black glass */
body.skin-tankl #contactContent {
  background: var(--tl-well) !important; border: 1px solid var(--tl-border) !important; border-radius: 2px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.45) !important; color: var(--tl-ink) !important; font-family: var(--tl-font) !important;
}
body.skin-velvet #contactContent {
  background: rgba(0,0,0,.28) !important; border: 1px solid var(--vv-edge) !important; border-radius: 4px !important;
  box-shadow: none !important; color: var(--vv-ink) !important; font-family: var(--vv-font) !important;
}
body.skin-depths #contactContent {
  background: #0e0e10 !important; border: 1px solid #2a2a2f !important; border-radius: 0 !important;
  box-shadow: none !important; color: var(--dp-ink) !important; font-family: var(--dp-font) !important; font-weight: 300 !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #contactContent {
  background: #fbf9f4 !important; border: 2px solid var(--sb-ink) !important; border-radius: 2px !important;
  box-shadow: inset 0 0 0 2px #fbf9f4, inset 0 0 0 3px rgba(20,17,14,.3) !important; color: var(--sb-ink) !important; font-family: var(--sb-font) !important;
}
body:is(.skin-tankcore, .theme-tankcore) #contactContent {
  background: rgba(255,255,255,.7) !important; border: 1px solid var(--tc-edge) !important; border-radius: 0 !important;
  box-shadow: inset 0 1px 3px rgba(16,60,84,.15) !important; color: var(--tc-text) !important; font-family: var(--tc-font) !important;
}
body.skin-fruits #contactContent {
  background: #f8f1df !important; border: 1px solid var(--fr-edge) !important; border-radius: 12px 9px 12px 9px !important;
  box-shadow: inset 0 1px 3px rgba(58,44,24,.12) !important; color: var(--fr-text) !important; font-family: var(--fr-font) !important;
}
body.skin-aero #contactContent {
  background: rgba(255,255,255,.72) !important; border: 1px solid var(--ae-edge) !important; border-radius: 8px !important;
  box-shadow: inset 0 1px 2px rgba(0,70,120,.15) !important; color: var(--ae-text) !important; font-family: var(--ae-font) !important;
}

/* ==== STOCK LEFTOVERS UNDER THE NEW SKINS (errorx002 2026-09-24, second "¿algo que falte?") =====================
   A whole-page sweep (/tmp/cvtest/stock-left.js) for rules whose winning selector is not skin-scoped and whose
   value is from the stock navy/teal palette. What it found, per skin:
   - the navy scrims behind the account menu, the settings menu and the style menu
   - the style menu itself (#skinMenuCard, stock navy #12182a) in Aero and Depths
   - Aero's connecting spinner, still the stock teal
   - the Discord / Create Account / Log in buttons (#b0-#b2) in the light skins: Discord blurple and the stock
     navy, with a teal border on hover (b1/b2 only show when logged out)
   - the Leaderboard / Information wells: a 30% black well with a blue hairline on the paper and glass panels,
     and #creditsContent2 (the tips text) in the stock pale blue in every skin
   - the grey-blue "Gamemode" label, the blue hairlines round the panel headers, and three Depths strays
   ⚠️ Colour, background, border, radius, shadow and type ONLY. #b0-#b2 are placed by INLINE position/transform
   and shapeboat's #b0:active re-states its translate; nothing here touches either. */

/* ---- scrims (the stock ones are navy) ---- */
body.skin-tankl #accountDark, body.skin-tankl #optionsMenu { background: rgba(16,18,20,.66) !important; }
body.skin-velvet #accountDark, body.skin-velvet #optionsMenu { background: rgba(8,4,6,.7) !important; }
body.skin-depths #accountDark, body.skin-depths #optionsMenu, body.skin-depths #skinMenu { background: rgba(0,0,0,.72) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #accountDark,
body:is(.skin-shapeboat, .theme-shapeboat) #optionsMenu,
body:is(.skin-shapeboat, .theme-shapeboat) #skinMenu { background: rgba(20,17,14,.55) !important; }
body:is(.skin-tankcore, .theme-tankcore) #accountDark,
body:is(.skin-tankcore, .theme-tankcore) #optionsMenu,
body:is(.skin-tankcore, .theme-tankcore) #skinMenu { background: rgba(10,30,26,.5) !important; }
body.skin-fruits #accountDark, body.skin-fruits #optionsMenu, body.skin-fruits #skinMenu { background: rgba(40,30,14,.45) !important; }
body.skin-aero #optionsMenu, body.skin-aero #skinMenu { background: rgba(170,215,240,.42) !important; }

/* ---- the style menu in Aero (a glass pane) and Depths (a quiet black slab, like its other panels) ---- */
body.skin-aero #skinMenuCard {
  background: var(--ae-glass);
  color: var(--ae-text);
  border: 1px solid var(--ae-edge);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 var(--ae-key), inset 0 0 0 1px rgba(255,255,255,.35), var(--ae-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  font-family: var(--ae-font);
}
body.skin-aero #skinMenuHead, body.skin-aero #skinMenuList, body.skin-aero #skinMenuPreview { border-color: rgba(0,110,170,.2); }
body.skin-aero .skinRow { background: rgba(255,255,255,.5); border-radius: 12px; }
body.skin-aero .skinRow:hover { background: rgba(255,255,255,.72); }
body.skin-aero .skinRow.active { border-color: var(--ae-sky); background: rgba(255,255,255,.8); }
body.skin-aero #skinMenuInfo .siH { color: var(--ae-muted); opacity: 1; }
body.skin-aero #skinMenuInfo .siChip { background: rgba(0,110,170,.1); }

body.skin-depths #skinMenuCard {
  background: rgba(16,16,17,.97);
  color: var(--dp-ink);
  border: 1px solid var(--dp-edge);
  border-radius: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
  font-family: var(--dp-font);
}
body.skin-depths #skinMenuHead, body.skin-depths #skinMenuList, body.skin-depths #skinMenuPreview { border-color: var(--dp-hair); }
body.skin-depths #skinMenuTitle { font-weight: 300; letter-spacing: .22em; text-transform: uppercase; }
body.skin-depths #skinMenuInfo .siName, body.skin-depths .skinRow .srName { font-weight: 300; letter-spacing: .08em; }
body.skin-depths .skinRow { background: var(--dp-tint); border-radius: 0; }
body.skin-depths .skinRow:hover { background: rgba(226,228,232,.11); }
body.skin-depths .skinRow.active { border-color: rgba(226,228,232,.5); background: rgba(226,228,232,.1); }
body.skin-depths #skinMenuInfo .siChip { background: var(--dp-tint); border-radius: 0; }

/* ---- Aero's connecting spinner: the sky blue, not the stock teal ---- */
body.skin-aero .connSpin {
  border-color: rgba(0,164,228,.22);
  border-top-color: #00a4e4;
  border-right-color: #46cef7;
}

/* ---- #b0-#b2 in the light skins: Discord in the skin's key, the two account buttons in its plain material ---- */
body.skin-aero #b0 {
  background: var(--ae-btn) !important; color: #ffffff !important;
  border: 1px solid rgba(0,90,150,.45) !important; border-radius: 999px !important;
  text-shadow: 0 1px 1px rgba(0,60,110,.55) !important; font-family: var(--ae-font) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 0 #0a78b0, 0 6px 12px rgba(0,70,120,.28) !important;
}
body.skin-aero #b1, body.skin-aero #b2 {
  background: linear-gradient(180deg, #ffffff, #e2f3fc) !important; color: var(--ae-text) !important;
  border: 1px solid var(--ae-edge) !important; border-radius: 999px !important;
  text-shadow: none !important; font-family: var(--ae-font) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 6px rgba(0,70,120,.18) !important;
}
body.skin-aero #b0:hover, body.skin-aero #b1:hover, body.skin-aero #b2:hover { border-color: var(--ae-sky) !important; filter: brightness(1.05) !important; }

body.skin-fruits #b0 {
  background: var(--fr-accent) !important; color: #fffaf0 !important;
  border: 1px solid rgba(58,44,24,.25) !important; border-radius: 16px 9px 16px 9px !important;
  text-shadow: none !important; font-family: var(--fr-font) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #50803c !important;
}
body.skin-fruits #b1, body.skin-fruits #b2 {
  background: var(--fr-face) !important; color: var(--fr-text) !important;
  border: 1px solid var(--fr-edge) !important; border-radius: 12px 8px 12px 8px !important;
  text-shadow: none !important; font-family: var(--fr-font) !important;
  box-shadow: 0 3px 0 rgba(104,78,40,.22) !important;
}
body.skin-fruits #b0:hover { background: var(--fr-accent-hi) !important; border-color: rgba(58,44,24,.35) !important; filter: none !important; }
body.skin-fruits #b1:hover, body.skin-fruits #b2:hover { border-color: rgba(104,78,40,.45) !important; filter: none !important; }

body:is(.skin-tankcore, .theme-tankcore) #b0,
body:is(.skin-tankcore, .theme-tankcore) #b1,
body:is(.skin-tankcore, .theme-tankcore) #b2 {
  background: linear-gradient(180deg, rgba(255,255,255,.96), var(--tc-face2)) !important; color: var(--tc-text) !important;
  border: 1px solid var(--tc-edge) !important; border-radius: 0 !important;
  text-shadow: none !important; font-family: var(--tc-font) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 0 var(--tc-clash) !important;
}
body:is(.skin-tankcore, .theme-tankcore) #b1,
body:is(.skin-tankcore, .theme-tankcore) #b2 { box-shadow: inset 0 1px 0 #ffffff, 0 3px 0 rgba(60,110,98,.35) !important; }
body:is(.skin-tankcore, .theme-tankcore) #b0:hover,
body:is(.skin-tankcore, .theme-tankcore) #b1:hover,
body:is(.skin-tankcore, .theme-tankcore) #b2:hover { background: linear-gradient(180deg, #ffffff, var(--tc-face)) !important; border-color: var(--tc-text) !important; filter: none !important; }

body:is(.skin-shapeboat, .theme-shapeboat) #b1,
body:is(.skin-shapeboat, .theme-shapeboat) #b2 {
  background: var(--sb-paper) !important; background-image: none !important; color: var(--sb-ink) !important;
  border: 2px solid var(--sb-ink) !important; border-radius: 0 !important;
  text-shadow: none !important; font-family: var(--sb-display) !important; font-weight: 400 !important;
  box-shadow: 3px 3px 0 rgba(20,17,14,.55) !important;
}
body:is(.skin-shapeboat, .theme-shapeboat) #b1:hover,
body:is(.skin-shapeboat, .theme-shapeboat) #b2:hover { background: var(--sb-ink) !important; color: var(--sb-paper) !important; border-color: var(--sb-ink) !important; filter: none !important; }

/* ---- Leaderboard / Information: the wells, their headers, and the tips text ---- */
body:is(.skin-shapeboat, .theme-shapeboat) #creditsContent,
body:is(.skin-shapeboat, .theme-shapeboat) #creditsContent2 { background: rgba(20,17,14,.05) !important; box-shadow: inset 0 0 0 1px rgba(20,17,14,.3) !important; border-radius: 2px !important; }
body:is(.skin-tankcore, .theme-tankcore) #creditsContent,
body:is(.skin-tankcore, .theme-tankcore) #creditsContent2 { background: rgba(60,110,98,.08) !important; box-shadow: inset 0 0 0 1px var(--tc-edge) !important; border-radius: 0 !important; }
body.skin-fruits #creditsContent, body.skin-fruits #creditsContent2 { background: rgba(104,78,40,.07) !important; box-shadow: inset 0 0 0 1px var(--fr-edge) !important; }
body.skin-aero #creditsContent, body.skin-aero #creditsContent2 { background: rgba(255,255,255,.42) !important; box-shadow: inset 0 1px 0 #ffffff, inset 0 0 0 1px rgba(0,110,170,.18) !important; }
body.skin-depths #creditsContent, body.skin-depths #creditsContent2 { box-shadow: inset 0 0 0 1px var(--dp-hair) !important; border-radius: 0 !important; }

body:is(.skin-shapeboat, .theme-shapeboat) :is(#creditsTitle, #channel, #videoBoxTitle) { border-color: rgba(20,17,14,.35) !important; }
body:is(.skin-tankcore, .theme-tankcore) :is(#creditsTitle, #channel, #videoBoxTitle) { border-color: var(--tc-edge) !important; }
body.skin-fruits :is(#creditsTitle, #channel, #videoBoxTitle) { border-color: var(--fr-edge) !important; }
body.skin-aero :is(#creditsTitle, #channel, #videoBoxTitle) { border-color: rgba(0,110,170,.2) !important; }
body.skin-depths :is(#creditsTitle, #channel, #videoBoxTitle) { border-color: var(--dp-hair) !important; }

body.skin-tankl #creditsContent2 { color: var(--tl-ink) !important; }
body.skin-velvet #creditsContent2 { color: var(--vv-ink) !important; }
body.skin-depths #creditsContent2 { color: var(--dp-ink) !important; }
body:is(.skin-shapeboat, .theme-shapeboat) #creditsContent2 { color: var(--sb-ink) !important; }
body:is(.skin-tankcore, .theme-tankcore) #creditsContent2 { color: var(--tc-text) !important; }
body.skin-fruits #creditsContent2 { color: var(--fr-text) !important; }
body.skin-aero #creditsContent2 { color: var(--ae-text) !important; }

/* ---- the "Gamemode" label, and the Depths strays ---- */
body:is(.skin-shapeboat, .theme-shapeboat) #serverSelectTitle { color: var(--sb-muted) !important; }
body:is(.skin-tankcore, .theme-tankcore) #serverSelectTitle { color: var(--tc-muted) !important; }
body.skin-fruits #serverSelectTitle { color: var(--fr-muted) !important; }
body.skin-aero #serverSelectTitle { color: var(--ae-muted) !important; }
body.skin-depths #serverSelectArrow { color: var(--dp-muted) !important; }
body.skin-depths #optionsClose { color: var(--dp-muted); }
body.skin-depths #sbList { border-color: var(--dp-hair); }
body.skin-depths #accountContent { color: var(--dp-ink); }

/* ==== MENU CHIPS AND HOVERS STILL STOCK (errorx002 2026-09-24, same "¿algo que falte?" sweep) ================
   /tmp/cvtest/neon-sweep.js over the menu, normal + hover, per skin. Velvet and TankL came back clean. Aero had
   never themed the menu's floating chips: stars, shop, achievements, "logged in as", profile, the style button,
   the changelog cards and the Leaderboard / Information tab buttons were all the stock navy with teal/gold/blue
   neon. The others kept a few stock hovers: the uiFx hover glow on #b0-#b2 and the chips, the teal row hover
   on the leaderboard, the blue changelog card rule, and Fruits' teal date badge and near-white name field.
   ⚠️ Colour, background, border, radius, shadow and type ONLY. The chips are placed with position/transform, and
   the stock uiFx hovers carry their own lift transform, which stays. */

/* ---- Tankyter Aero: every chip a white glass pill with the sky edge ---- */
body.skin-aero #starBalance, body.skin-aero #starShop, body.skin-aero #achBtn,
body.skin-aero #loggedInAs, body.skin-aero #profileBtn, body.skin-aero #panel > button:not([id]), body.skin-aero #clanBtn, body.skin-aero #dailyBtn {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(226,243,252,.88)) !important;
  border: 1px solid var(--ae-edge) !important;
  border-radius: 12px !important;
  color: var(--ae-text) !important;
  font-family: var(--ae-font) !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 10px rgba(0,70,120,.18) !important;
}
body.skin-aero #starShop:hover, body.skin-aero #achBtn:hover, body.skin-aero #profileBtn:hover,
body.skin-aero #panel > button:not([id]):hover, body.skin-aero #clanBtn:hover, body.skin-aero #dailyBtn:hover { border-color: var(--ae-sky) !important; }
body.skin-aero #starBalance .sbStar { color: #e0a000; }
body.skin-aero .sbSub, body.skin-aero #loggedInAs .liaLabel { color: var(--ae-muted) !important; }
body.skin-aero #loggedInAs #loggedInAsName { color: #0a7fc0 !important; }
body.skin-aero #starBalanceNum, body.skin-aero #achBtnCount { color: var(--ae-text) !important; }

body.skin-aero #shopPanel, body.skin-aero #achPanel {
  background: var(--ae-glass) !important;
  border: 1px solid var(--ae-edge) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 var(--ae-key), var(--ae-shadow) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  font-family: var(--ae-font) !important;
}
body.skin-aero #shopHead, body.skin-aero #achPanelHead { color: var(--ae-text) !important; border-bottom: 1px solid rgba(0,110,170,.2) !important; text-shadow: none !important; }
body.skin-aero #achPanelCount, body.skin-aero #shopNote, body.skin-aero .achDesc { color: var(--ae-muted) !important; }
body.skin-aero #shopClose, body.skin-aero #achPanelClose { color: var(--ae-muted) !important; }
body.skin-aero #shopClose:hover, body.skin-aero #achPanelClose:hover { color: var(--ae-text) !important; }
body.skin-aero .shopName, body.skin-aero .achName { color: var(--ae-text) !important; }
body.skin-aero .achRow.achDone .achName { color: #0a7fc0 !important; }
body.skin-aero .shopOwned { color: #3f9a14 !important; }
body.skin-aero .shopSwatch { border-color: rgba(0,70,120,.3) !important; }
body.skin-aero .shopBuy {
  background: linear-gradient(180deg, #ffffff, #e2f3fc) !important; color: var(--ae-text) !important;
  border: 1px solid var(--ae-edge) !important; border-radius: 999px !important;
}
body.skin-aero .shopBuy:hover { border-color: var(--ae-sky) !important; }

body.skin-aero #skinMenuBtn {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(226,243,252,.88));
  border-color: var(--ae-edge); color: var(--ae-text); font-family: var(--ae-font);
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 10px rgba(0,70,120,.18);
}
body.skin-aero #skinMenuBtn:hover { border-color: var(--ae-sky); }

body.skin-aero #credits .input, body.skin-aero #featured .input, body.skin-aero #channel .input {
  background: rgba(255,255,255,.6) !important; color: var(--ae-muted) !important;
  border: 1px solid rgba(0,110,170,.22) !important; border-radius: 999px !important;
}
body.skin-aero #credits .input:hover, body.skin-aero #featured .input:hover, body.skin-aero #channel .input:hover {
  background: var(--ae-btn) !important; color: #ffffff !important;
}
body.skin-aero .clCard { background: rgba(255,255,255,.4); border-color: rgba(0,110,170,.16); }
body.skin-aero .clDate { background: var(--ae-btn) !important; color: #ffffff !important; text-shadow: 0 1px 1px rgba(0,60,110,.5) !important; }
body.skin-aero #connectingSmall { color: #ffffff !important; text-shadow: 0 2px 10px rgba(0,60,110,.45) !important; }

/* ---- changelog cards and the date badge ---- */
body:is(.skin-shapeboat, .theme-shapeboat) .clCard { border-color: rgba(20,17,14,.25); }
body:is(.skin-tankcore, .theme-tankcore) .clCard { border-color: var(--tc-edge); }
body.skin-fruits .clCard { border-color: var(--fr-edge); }
body.skin-fruits .clDate { background: var(--fr-accent) !important; color: #fffaf0 !important; }

/* ---- the leaderboard row hover (stock: teal wash + teal outline) ---- */
body:is(.skin-shapeboat, .theme-shapeboat) #creditsContent > div:hover { background: rgba(20,17,14,.06); }
body:is(.skin-shapeboat, .theme-shapeboat) .lbRow:hover { outline: 1px solid rgba(20,17,14,.4); }
body:is(.skin-tankcore, .theme-tankcore) #creditsContent > div:hover { background: rgba(204,111,176,.1); }
body:is(.skin-tankcore, .theme-tankcore) .lbRow:hover { outline: 1px solid rgba(204,111,176,.45); }
body.skin-fruits #creditsContent > div:hover { background: rgba(107,160,80,.12); }
body.skin-fruits .lbRow:hover { outline: 1px solid rgba(107,160,80,.45); }
body.skin-aero #creditsContent > div:hover { background: rgba(0,164,228,.1); }
body.skin-aero .lbRow:hover { outline: 1px solid rgba(0,164,228,.4); }

/* ---- the uiFx hover glow on #b0-#b2, the bare panel buttons, stars and achievements ---- */
body.uiFx.skin-aero #b0:hover, body.uiFx.skin-aero #b1:hover, body.uiFx.skin-aero #b2:hover,
body.uiFx.skin-aero #panel > button:not([id]):hover,
body.uiFx.skin-aero #starShop:hover, body.uiFx.skin-aero #achBtn:hover, body.uiFx.skin-aero #clanBtn:hover, body.uiFx.skin-aero #dailyBtn:hover {
  box-shadow: inset 0 1px 0 #ffffff, 0 8px 20px rgba(0,110,170,.25) !important;
}
body.uiFx.skin-fruits #b0:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #50803c, 0 8px 16px rgba(58,44,24,.18) !important; }
body.uiFx.skin-fruits #b1:hover, body.uiFx.skin-fruits #b2:hover,
body.uiFx.skin-fruits #panel > button:not([id]):hover,
body.uiFx.skin-fruits #starShop:hover, body.uiFx.skin-fruits #achBtn:hover, body.uiFx.skin-fruits #clanBtn:hover, body.uiFx.skin-fruits #dailyBtn:hover { box-shadow: 0 3px 0 rgba(104,78,40,.22), 0 8px 16px rgba(58,44,24,.14) !important; }
body.uiFx:is(.skin-tankcore, .theme-tankcore) #b0:hover,
body.uiFx:is(.skin-tankcore, .theme-tankcore) #b1:hover,
body.uiFx:is(.skin-tankcore, .theme-tankcore) #b2:hover,
body.uiFx:is(.skin-tankcore, .theme-tankcore) #panel > button:not([id]):hover { box-shadow: inset 0 1px 0 #ffffff, 0 3px 0 var(--tc-clash) !important; }
body.uiFx:is(.skin-tankcore, .theme-tankcore) #starShop:hover,
body.uiFx:is(.skin-tankcore, .theme-tankcore) #achBtn:hover, body.uiFx:is(.skin-tankcore,.theme-tankcore) #clanBtn:hover, body.uiFx:is(.skin-tankcore,.theme-tankcore) #dailyBtn:hover { box-shadow: 3px 3px 0 rgba(204,111,176,.45) !important; }
body.uiFx:is(.skin-shapeboat, .theme-shapeboat) #b1:hover,
body.uiFx:is(.skin-shapeboat, .theme-shapeboat) #b2:hover,
body.uiFx:is(.skin-shapeboat, .theme-shapeboat) #panel > button:not([id]):hover { box-shadow: 5px 5px 0 rgba(20,17,14,.55) !important; }
body.uiFx.skin-depths #b0:hover, body.uiFx.skin-depths #b1:hover, body.uiFx.skin-depths #b2:hover,
body.uiFx.skin-depths #panel > button:not([id]):hover { box-shadow: none !important; }

/* ---- small ones ---- */
body.skin-fruits #name { color: var(--fr-text) !important; }
body.skin-fruits #name::placeholder { color: var(--fr-muted) !important; }
body:is(.skin-tankcore, .theme-tankcore) #playButton { color: #06222a !important; }
body.skin-depths #skinMenuBtn {
  background: #1a1a1d; border-color: #2a2a2f; border-radius: 0; color: #8c8c92;
  font-family: var(--dp-font); font-weight: 300; letter-spacing: .16em;
}
body.skin-depths #skinMenuBtn:hover { background: #232327; border-color: rgba(226,228,232,.3); }

/* ---- IDLE ANIMATIONS PAUSED (n00bi 2026-09-29, client optimisation) ----
   A running CSS animation costs style (and, for background/filter ones, paint) every frame even on an element
   nobody can see: visibility:hidden and opacity:0 do not stop it, only display:none does. These are the infinite
   ones that sat invisible most of the time: the regen shine is opacity 0 unless you are healing, the low-HP pulse
   survives a low-HP death into the menu (hvLow is only re-tested while alive), the Aero score-bar bubbles and
   both live on #overlay1, which the menu hides with visibility; the Brutal restart screen keeps its pulsing
   children after it fades out. Paused rather than removed: each resumes where it stopped and no look changes.
   body.hudOff is set by page.setOverlay whenever #overlay1 is hidden (every state but 2 = alive). */
#hvHealth:not(.hvHeal)::before { animation-play-state: paused !important; }
body.hudOff #hvHealthFill, body.hudOff #tankScoreBar::before { animation-play-state: paused !important; }
#brutalRestartScreen:not(.show) #brRestartVig, #brutalRestartScreen:not(.show) #brRestartRing { animation-play-state: paused !important; }

/* ===== THE WILDS HUD x INTERFACE SKINS (errorx002 2026-10-02) =====
   "necesito que el nuevo modo ... tambien tenga sus cosas para las demas skins": the Wilds HUD (#wlHud, built by
   wlHudCss in script2.js) wore the Modern look under every skin. Each skin sets --wk-* tokens from its own palette
   (on body, so .wlGhostDrag, which lives outside #wlHud, gets them too) and ONE shared block maps them onto the HUD.
   Material only: colour, edge, corner, shadow, type. No size, position or layout change, the rarity borders (--rc)
   and their glow (--rg) stay, and Modern (no skin class) is byte-for-byte what shipped.
   Specificity: the shared rules are body:is(skins) #wlHud .x = 1,2,1, which beats every wlHudCss rule (1,1,0 and
   1,2,0) - including the state variants (.wlEmpty, .wlOn, .wlReady, .wlRiftOn ...). So each state variant that sets
   a property the shared rules set is restated below it, or the skin would erase the state. */
body.skin-classic {
  --wk-panel: var(--cl-face); --wk-edge: var(--cl-edge); --wk-shadow: none; --wk-rad: 6px; --wk-crad: 4px; --wk-srad: 4px;
  --wk-cell: var(--cl-face); --wk-cellhi: var(--cl-face); --wk-empty: rgba(0,0,0,.18); --wk-emptyedge: var(--cl-edge);
  --wk-btn: var(--cl-face); --wk-btnhi: var(--cl-face); --wk-btnedge: var(--cl-edge); --wk-btnink: var(--cl-text);
  --wk-ink: var(--cl-text); --wk-muted: var(--cl-muted); --wk-faint: rgba(151,160,174,.6);
  --wk-tint: rgba(255,255,255,.05); --wk-tint2: rgba(255,255,255,.1); --wk-track: rgba(255,255,255,.16);
  --wk-go: #3d4655; --wk-goink: #fff; --wk-alt: rgba(255,255,255,.08); --wk-altink: var(--cl-text); --wk-rbgo: #8a6a3a;
  --wk-warn: #d9b36a; --wk-good: #8fb27a; --wk-bad: #d49a6a; --wk-hi: #b3a2d6; --wk-sel: var(--cl-text);
  --wk-font: inherit; --wk-tfont: inherit; --wk-tweight: 700; --wk-tcase: none; --wk-tls: .02em;
}
/* Light ("Claro") = classic + light: opaque white, dark ink. 0,3,0 like its own block, so theme-light can't win. */
body.skin-classic.skin-light {
  --wk-empty: rgba(255,255,255,.55); --wk-faint: rgba(95,102,111,.7);
  --wk-tint: rgba(0,0,0,.04); --wk-tint2: rgba(0,0,0,.08); --wk-track: rgba(0,0,0,.12);
  --wk-go: #2f3a4a; --wk-alt: rgba(0,0,0,.07); --wk-rbgo: #9a6418;
  --wk-warn: #8a5a00; --wk-good: #2f6b1f; --wk-bad: #9a4a12; --wk-hi: #5b3c9a; --wk-sel: #1a1d22;
}
/* Elegant: quartz. Opaque enough to read over the moving field (the menu's veil leans on a blur the HUD can't afford
   every frame), hairline edge, ink-filled buttons, light uppercase titles. Dark quartz flips the faces and the ink. */
body.skin-elegant {
  --wk-panel: rgba(250,250,253,.92); --wk-edge: var(--qz-edge); --wk-shadow: var(--qz-shadow); --wk-rad: var(--qz-radius); --wk-crad: 3px; --wk-srad: 2px;
  --wk-cell: rgba(248,248,252,.86); --wk-cellhi: rgba(255,255,255,.94); --wk-empty: rgba(248,248,252,.32); --wk-emptyedge: var(--qz-edge);
  --wk-btn: rgba(248,248,252,.86); --wk-btnhi: rgba(255,255,255,.94); --wk-btnedge: var(--qz-edge); --wk-btnink: var(--qz-ink);
  --wk-ink: var(--qz-ink); --wk-muted: var(--qz-muted); --wk-faint: rgba(35,42,58,.4);
  --wk-tint: rgba(70,80,110,.07); --wk-tint2: rgba(70,80,110,.14); --wk-track: rgba(70,80,110,.18);
  --wk-go: var(--qz-ink); --wk-goink: #f4f3f7; --wk-alt: rgba(70,80,110,.12); --wk-altink: var(--qz-ink); --wk-rbgo: #8a6414;
  --wk-warn: #8a6414; --wk-good: #3e7a3a; --wk-bad: #a2541c; --wk-hi: #5e4aa0; --wk-sel: var(--qz-ink);
  --wk-font: var(--qz-font); --wk-tfont: var(--qz-font); --wk-tweight: 400; --wk-tcase: uppercase; --wk-tls: .14em;
}
body.skin-elegant.skin-elegantdark {
  --wk-panel: rgba(28,27,33,.92); --wk-cell: rgba(30,29,35,.86); --wk-cellhi: rgba(40,39,46,.92); --wk-empty: rgba(0,0,0,.26);
  --wk-btn: rgba(30,29,35,.86); --wk-btnhi: rgba(40,39,46,.92); --wk-faint: rgba(230,228,234,.38);
  --wk-tint: rgba(255,255,255,.05); --wk-tint2: rgba(255,255,255,.1); --wk-track: rgba(255,255,255,.14);
  --wk-goink: #16151a; --wk-alt: rgba(255,255,255,.1); --wk-rbgo: #b08a4a;
  --wk-warn: #d8b97a; --wk-good: #93bf86; --wk-bad: #e0a777; --wk-hi: #bba8e6;
}
/* Depths: monochrome, square, a gold glint. */
body.skin-depths {
  --wk-panel: var(--dp-face); --wk-edge: var(--dp-edge); --wk-shadow: 0 12px 32px rgba(0,0,0,.5), inset 0 0 0 1px var(--dp-hair); --wk-rad: 0; --wk-crad: 0; --wk-srad: 0;
  --wk-cell: var(--dp-face); --wk-cellhi: var(--dp-face-2); --wk-empty: rgba(0,0,0,.3); --wk-emptyedge: var(--dp-hair);
  --wk-btn: var(--dp-face); --wk-btnhi: var(--dp-face-2); --wk-btnedge: var(--dp-edge); --wk-btnink: var(--dp-ink);
  --wk-ink: var(--dp-ink); --wk-muted: var(--dp-muted); --wk-faint: rgba(226,228,232,.3);
  --wk-tint: var(--dp-tint); --wk-tint2: var(--dp-tint-2); --wk-track: var(--dp-tint-2);
  --wk-go: linear-gradient(180deg, rgba(226,228,232,.34), rgba(226,228,232,.20)); --wk-goink: var(--dp-ink); --wk-alt: var(--dp-tint); --wk-altink: var(--dp-ink);
  --wk-rbgo: linear-gradient(180deg, rgba(224,189,122,.5), rgba(224,189,122,.3));
  --wk-warn: #e0bd7a; --wk-good: #9fbf9a; --wk-bad: #d9a27a; --wk-hi: #b8b8d8; --wk-sel: var(--dp-ink);
  --wk-font: var(--dp-font); --wk-tfont: var(--dp-font); --wk-tweight: 500; --wk-tcase: uppercase; --wk-tls: .12em;
}
/* Fruits And Pears: kraft cream, cocoa ink, leaf green, the organic corners of its upgrade boxes. */
body.skin-fruits {
  --wk-panel: var(--fr-face); --wk-edge: var(--fr-edge); --wk-shadow: 0 0 0 1px var(--fr-edge), 0 6px 20px rgba(70,54,20,.16); --wk-rad: 12px; --wk-crad: 16px 8px 16px 8px; --wk-srad: 11px 7px 11px 7px;
  --wk-cell: rgba(238,224,193,.92); --wk-cellhi: rgba(244,233,208,.96); --wk-empty: rgba(238,224,193,.4); --wk-emptyedge: rgba(104,78,40,.35);
  --wk-btn: rgba(238,224,193,.92); --wk-btnhi: #f4e9d0; --wk-btnedge: rgba(104,78,40,.35); --wk-btnink: var(--fr-text);
  --wk-ink: var(--fr-text); --wk-muted: var(--fr-muted); --wk-faint: rgba(124,106,69,.6);
  --wk-tint: rgba(104,78,40,.07); --wk-tint2: rgba(104,78,40,.13); --wk-track: rgba(104,78,40,.16);
  --wk-go: var(--fr-accent); --wk-goink: #fff8ec; --wk-alt: rgba(104,78,40,.12); --wk-altink: var(--fr-text); --wk-rbgo: #d9822b;
  --wk-warn: #9a5f0c; --wk-good: #4f8a35; --wk-bad: #b0531d; --wk-hi: #7a3f8f; --wk-sel: var(--fr-text);
  --wk-font: var(--fr-font); --wk-tfont: var(--fr-font); --wk-tweight: 700; --wk-tcase: none; --wk-tls: .01em;
}
/* Tankcore: glossy plastic with a wrong colour grade, hard square edges, a pink clash. */
body.skin-tankcore {
  --wk-panel: linear-gradient(177deg, rgba(240,246,220,.94), var(--tc-face) 42%, var(--tc-face2)); --wk-edge: var(--tc-edge);
  --wk-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 0 40px rgba(204,111,176,.08), 0 10px 26px rgba(16,60,84,.22); --wk-rad: 0; --wk-crad: 0; --wk-srad: 0;
  --wk-cell: var(--tc-face); --wk-cellhi: var(--tc-face2); --wk-empty: rgba(228,238,214,.4); --wk-emptyedge: var(--tc-edge);
  --wk-btn: var(--tc-face); --wk-btnhi: var(--tc-face2); --wk-btnedge: var(--tc-edge); --wk-btnink: var(--tc-text);
  --wk-ink: var(--tc-text); --wk-muted: var(--tc-muted); --wk-faint: rgba(95,124,104,.6);
  --wk-tint: rgba(60,110,98,.07); --wk-tint2: rgba(60,110,98,.14); --wk-track: rgba(59,190,240,.18);
  --wk-go: linear-gradient(180deg, var(--tc-accent), #0f9fb8); --wk-goink: #fff; --wk-alt: rgba(60,110,98,.12); --wk-altink: var(--tc-text); --wk-rbgo: linear-gradient(180deg, var(--tc-accent2), #9ab02e);
  --wk-warn: #9a6a00; --wk-good: #3c8a3a; --wk-bad: #b0482a; --wk-hi: var(--tc-clash); --wk-sel: var(--tc-clash);
  --wk-font: var(--tc-font); --wk-tfont: var(--tc-font); --wk-tweight: 700; --wk-tcase: none; --wk-tls: .02em;
}
/* Shapeboat Willie: bone paper in a heavy ink frame, the title in the poster face. */
body.skin-shapeboat {
  --wk-panel: linear-gradient(180deg, #f7f4ee, var(--sb-paper) 55%, var(--sb-paper2)); --wk-edge: var(--sb-ink);
  --wk-shadow: inset 0 0 0 1px var(--sb-paper), inset 0 0 0 2px rgba(20,17,14,.55), 0 6px 20px rgba(0,0,0,.28); --wk-rad: 3px; --wk-crad: 0; --wk-srad: 2px;
  --wk-cell: rgba(244,241,234,.94); --wk-cellhi: #fbf9f4; --wk-empty: rgba(244,241,234,.45); --wk-emptyedge: rgba(20,17,14,.5);
  --wk-btn: var(--sb-paper); --wk-btnhi: #fbf9f4; --wk-btnedge: var(--sb-ink); --wk-btnink: var(--sb-ink);
  --wk-ink: var(--sb-ink); --wk-muted: var(--sb-muted); --wk-faint: rgba(106,98,88,.6);
  --wk-tint: rgba(20,17,14,.05); --wk-tint2: rgba(20,17,14,.1); --wk-track: rgba(20,17,14,.16);
  --wk-go: var(--sb-ink); --wk-goink: var(--sb-paper); --wk-alt: rgba(20,17,14,.1); --wk-altink: var(--sb-ink); --wk-rbgo: var(--sb-ink2);
  --wk-warn: #7a5200; --wk-good: #2f5f22; --wk-bad: #8a3a10; --wk-hi: #4a2a6a; --wk-sel: var(--sb-ink);
  --wk-font: var(--sb-font); --wk-tfont: var(--sb-display); --wk-tweight: 400; --wk-tcase: none; --wk-tls: .04em;
}
/* Tankyter Aero: glossy glass, sky ink, pill buttons. More opaque than the menu's glass for the same reason as quartz. */
body.skin-aero {
  --wk-panel: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(236,249,255,.9) 49%, rgba(210,240,253,.88) 51%, rgba(230,247,255,.92) 100%);
  --wk-edge: var(--ae-edge); --wk-shadow: var(--ae-shadow), inset 0 1px 0 var(--ae-key); --wk-rad: 18px; --wk-crad: 14px; --wk-srad: 999px;
  --wk-cell: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(232,247,255,.84) 49%, rgba(204,238,253,.8) 51%, rgba(226,246,255,.86) 100%);
  --wk-cellhi: linear-gradient(180deg, #fff 0%, rgba(240,251,255,.94) 49%, rgba(214,243,255,.9) 51%, rgba(236,250,255,.94) 100%);
  --wk-empty: rgba(220,242,252,.4); --wk-emptyedge: rgba(0,110,170,.3);
  --wk-btn: var(--wk-cell); --wk-btnhi: var(--wk-cellhi); --wk-btnedge: rgba(120,210,245,.9); --wk-btnink: var(--ae-text);
  --wk-ink: var(--ae-text); --wk-muted: var(--ae-muted); --wk-faint: rgba(61,117,150,.6);
  --wk-tint: rgba(0,110,170,.06); --wk-tint2: rgba(0,110,170,.12); --wk-track: rgba(0,110,170,.14);
  --wk-go: var(--ae-btn); --wk-goink: #fff; --wk-alt: rgba(0,110,170,.1); --wk-altink: var(--ae-text);
  --wk-rbgo: linear-gradient(180deg, #ffd27a 0%, #f2a62c 48%, #e08a10 52%, #f7b84a 100%);
  --wk-warn: #a05f00; --wk-good: #3d8f12; --wk-bad: #b4501a; --wk-hi: #6a3fb0; --wk-sel: var(--ae-sky);
  --wk-font: var(--ae-font); --wk-tfont: var(--ae-font); --wk-tweight: 700; --wk-tcase: none; --wk-tls: .01em;
}
/* Velvet: lacquer and brass, the Bodoni display face on titles. */
body.skin-velvet {
  --wk-panel: var(--vv-face-2); --wk-edge: var(--vv-edge); --wk-shadow: 0 12px 32px rgba(0,0,0,.5), inset 0 0 0 1px var(--vv-hair); --wk-rad: 6px; --wk-crad: 6px; --wk-srad: 4px;
  --wk-cell: var(--vv-face); --wk-cellhi: var(--vv-face-2); --wk-empty: rgba(13,9,11,.4); --wk-emptyedge: var(--vv-hair);
  --wk-btn: var(--vv-face); --wk-btnhi: var(--vv-face-2); --wk-btnedge: var(--vv-edge); --wk-btnink: var(--vv-ink);
  --wk-ink: var(--vv-ink); --wk-muted: var(--vv-muted); --wk-faint: rgba(163,144,150,.55);
  --wk-tint: var(--vv-tint); --wk-tint2: var(--vv-tint-2); --wk-track: var(--vv-tint-2);
  --wk-go: linear-gradient(180deg, #dcc18a, #a8894f); --wk-goink: #120c0e; --wk-alt: var(--vv-tint-2); --wk-altink: var(--vv-ink); --wk-rbgo: linear-gradient(180deg, var(--vv-bord-hi), var(--vv-bord));
  --wk-warn: var(--vv-brass-hi); --wk-good: #9fc08a; --wk-bad: #e0a07a; --wk-hi: #d79ab4; --wk-sel: var(--vv-brass);
  --wk-font: var(--vv-font); --wk-tfont: var(--vv-display); --wk-tweight: 600; --wk-tcase: none; --wk-tls: .02em;
}
/* TankL Studio: a DAW rack - chassis grey, bevelled slate, orange and lime. */
body.skin-tankl {
  --wk-panel: var(--tl-chassis); --wk-edge: var(--tl-border); --wk-shadow: 0 12px 32px rgba(0,0,0,.5), var(--tl-bevel); --wk-rad: 3px; --wk-crad: 2px; --wk-srad: 2px;
  --wk-cell: var(--tl-slate); --wk-cellhi: var(--tl-head); --wk-empty: var(--tl-well); --wk-emptyedge: var(--tl-border);
  --wk-btn: linear-gradient(180deg, #454c59, #353b45); --wk-btnhi: linear-gradient(180deg, #4d5563, #3b424d); --wk-btnedge: var(--tl-border); --wk-btnink: var(--tl-ink);
  --wk-ink: var(--tl-ink); --wk-muted: var(--tl-muted); --wk-faint: rgba(138,147,160,.55);
  --wk-tint: var(--tl-hover); --wk-tint2: rgba(255,255,255,.08); --wk-track: var(--tl-well);
  --wk-go: linear-gradient(180deg, #ff9a22, #e67a00); --wk-goink: #1b1e21; --wk-alt: var(--tl-head); --wk-altink: var(--tl-ink); --wk-rbgo: linear-gradient(180deg, #d06aa2, var(--tl-mag));
  --wk-warn: #ffb547; --wk-good: var(--tl-lime); --wk-bad: #ff7a45; --wk-hi: var(--tl-mag); --wk-sel: var(--tl-orange);
  --wk-font: var(--tl-font); --wk-tfont: var(--tl-font); --wk-tweight: 600; --wk-tcase: none; --wk-tls: .02em;
}

/* -- the shared map: every skin above, one set of rules -- */
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud { color: var(--wk-ink); }
/* the font goes on every element, not just #wlHud: style.css's universal "* { font-family }" sits on each child and
   would beat an inherited one */
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) :is(#wlHud, #wlHud *) { font-family: var(--wk-font); }
/* the bar */
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlSep { background: var(--wk-faint); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCell {
  background: var(--wk-cell); border-radius: var(--wk-crad);
  box-shadow: inset 0 -20px 24px -16px var(--rg,transparent), 0 2px 6px rgba(0,0,0,.3);
}
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCell:hover { background: var(--wk-cellhi); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCell.wlEmpty { background: var(--wk-empty); border-color: var(--wk-emptyedge); box-shadow: none; }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCell.wlLocked { background: var(--wk-empty); border-color: var(--wk-tint2); box-shadow: none; opacity: .8; }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlLock { color: var(--wk-faint); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCd { border-radius: var(--wk-crad); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlItem.wlSel { outline-color: var(--wk-sel); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlDrop { border-color: var(--wk-sel); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlBtn {
  background: var(--wk-btn); border-color: var(--wk-btnedge); color: var(--wk-btnink); border-radius: var(--wk-crad);
}
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlBtn:hover { background: var(--wk-btnhi); border-color: var(--wk-sel); color: var(--wk-btnink); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlBtn.wlOn { background: var(--wk-btnhi); border-color: var(--wk-sel); color: var(--wk-btnink); box-shadow: inset 0 0 0 1px var(--wk-sel); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlBtn.wlReady { border-color: var(--wk-warn); color: var(--wk-warn); }
/* panels, and everything else that is a little panel: the tooltip, the toast, the top banner, the Rift board */
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud :is(.wlPanel, .wlTip, .wlToast, .wlBan, .wlBoard) {
  background: var(--wk-panel); border-color: var(--wk-edge); box-shadow: var(--wk-shadow); border-radius: var(--wk-rad); color: var(--wk-ink);
}
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud :is(.wlToast, .wlBoard) { border: 1px solid var(--wk-edge); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlBan.wlRiftOn { border-color: rgba(190,110,255,.8); box-shadow: 0 0 14px rgba(190,110,255,.35), var(--wk-shadow); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlBan.wlInvOn { border-color: rgba(230,80,60,.9); box-shadow: 0 0 14px rgba(255,96,72,.4), var(--wk-shadow); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlTitle {
  font-family: var(--wk-tfont); font-weight: var(--wk-tweight); text-transform: var(--wk-tcase); letter-spacing: var(--wk-tls);
}
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlX { color: var(--wk-muted); border-radius: var(--wk-srad); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlX:hover { background: var(--wk-tint2); color: var(--wk-ink); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlAuto { color: var(--wk-muted); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlAuto i { background: var(--wk-track); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlAuto.wlOn i { background: var(--wk-good); }
/* buttons */
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlGo { background: var(--wk-go); color: var(--wk-goink); border-radius: var(--wk-srad); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlGo.wlAlt { background: var(--wk-alt); color: var(--wk-altink); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlGo.wlRbGo { background: var(--wk-rbgo); color: #fff; }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlTrN button { background: var(--wk-tint2); color: var(--wk-ink); border-radius: var(--wk-srad); }
/* muted / faint type */
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud :is(.wlHint, .wlSub, .wlInfo .wlMiss, .wlTip em, .wlBS, .wlBH, .wlBR span, .wlBxZ em, .wlBxM i, .wlQT em, .wlTrBox, .wlTrL em, .wlRbTxt) { color: var(--wk-muted); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud :is(.wlSetHint, .wlTrArr, .wlBxM.wlBxL) { color: var(--wk-faint); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlTrN { color: var(--wk-ink); }
/* the semantic colours, deepened on the pale skins so they still read on cream, paper and glass */
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud :is(.wlNote, .wlRbLock, .wlRbNow b, .wlBxZ.wlBxDone em, .wlQR.wlQD .wlQT em, .wlRbBoard .wlBR em) { color: var(--wk-warn); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud :is(.wlTrV.wlTrEq, .wlTrSt.wlTrRd) { color: var(--wk-good); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlTrV { color: var(--wk-bad); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlTrV.wlTrEq { color: var(--wk-good); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlBR em { color: var(--wk-hi); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlRbBoard .wlBR em { color: var(--wk-warn); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlQB i { background: var(--wk-good); }
/* rows and cards inside the panels */
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud :is(.wlBxM, .wlQR, .wlTrL) { background: var(--wk-tint); border-radius: var(--wk-srad); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlQB { background: var(--wk-track); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlSet { background: var(--wk-tint); border-color: var(--wk-tint2); border-radius: var(--wk-srad); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlSet:hover { background: var(--wk-tint2); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlSet.wlCur { background: var(--wk-tint2); border-color: var(--wk-sel); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlSets.wlSaving .wlSet { border: 1px dashed var(--wk-warn); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlMini { background: var(--wk-cell); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlRbBoard { border-top-color: var(--wk-tint2); }
body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) .wlGhostDrag { background: var(--wk-cell); border-radius: var(--wk-crad); }

/* -- each skin's own touch -- */
/* Fruits: a leaf in front of every panel title */
body.skin-fruits #wlHud .wlTitle::before {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 8px; vertical-align: 1px;
  background: linear-gradient(135deg, var(--fr-accent-hi), var(--fr-accent)); border-radius: 0 11px 0 11px;
  box-shadow: inset -1px 1px 0 rgba(255,255,255,.35);
}
/* Tankcore: the panels sit a half degree off true, like its options card */
body.skin-tankcore #wlHud .wlPanel { rotate: -.5deg; }
/* Shapeboat: the title-card corner flourishes, and a heavier ink frame on panels and buttons */
body.skin-shapeboat #wlHud .wlPanel {
  border-width: 3px;
  background-image: var(--sb-corner-tl), var(--sb-corner-tr), var(--sb-corner-br), var(--sb-corner-bl), linear-gradient(180deg, #f7f4ee, var(--sb-paper) 55%, var(--sb-paper2));
  background-repeat: no-repeat; background-position: 5px 5px, right 5px top 5px, right 5px bottom 5px, left 5px bottom 5px, 0 0;
  background-size: 30px 30px, 30px 30px, 30px 30px, 30px 30px, cover;
}
/* Aero: the glossy key line along the top of every cell and button */
body.skin-aero #wlHud :is(.wlCell, .wlBtn) { box-shadow: inset 0 1px 0 var(--ae-key), inset 0 -20px 24px -16px var(--rg,transparent), 0 3px 10px rgba(0,80,130,.25); }
body.skin-aero #wlHud :is(.wlCell.wlEmpty, .wlCell.wlLocked) { box-shadow: none; }
body.skin-aero #wlHud .wlGo { text-shadow: 0 1px 1px rgba(0,60,100,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 0 #0078b0, 0 3px 6px rgba(0,60,100,.3); }
body.skin-aero #wlHud .wlGo.wlAlt { text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
/* Velvet: a brass rule under the head, brass on the gold-edged things */
body.skin-velvet #wlHud .wlHead { box-shadow: 0 1px 0 var(--vv-rule); padding-bottom: 6px; }
/* TankL: the panel head is a slate strip, like a plugin window's title bar */
body.skin-tankl #wlHud .wlPanel > .wlHead {
  margin: -12px -12px 10px; padding: 7px 12px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #454c59, var(--tl-head)); border-bottom: 1px solid var(--tl-border);
}
body.skin-tankl #wlHud .wlTitle { font-size: 15px; }

/* Fruits x Wilds (errorx002 2026-10-02): the Wilds lifts the bottom-centre name/level/score block 84px (96px on
   phones) to clear its parts bar (wlHudCss, body.wlOn:not(.hudAlt)). Fruits already moved that block to the
   top beside the minimap, so the lift pushed it off the screen. Fruits keeps its own spot; !important because
   wlHudCss is a later <style> with equal specificity. */
body.skin-fruits.wlOn #tankName,
body.skin-fruits.wlOn #tankLevel,
body.skin-fruits.wlOn #tankScore,
body.skin-fruits.wlOn #tankPartialLevel { translate: none !important; }

/* ===== THE WILDS WINDOWS x INTERFACE SKINS, part 2 (errorx002 2026-10-04; body:where(.aaiTest) = their account only until it is stable) =====
   "Hola :3, Como van las skins ahora con soporte para el nuevo juego Wilds?" ... "si estaria bastante bien ...
   Depths estaria bastante bien que tuviera su estilo al igual que los otros, pero, tambien que sea creativo".
   The windows built after part 1 (Eggs, the Craft queue, the Zone Trials board, the Trader / Shrine banners, the trade
   window, part locks, caps, the K buttons) still wore the Modern look under every skin. Same rules as part 1: material
   only (colour, edge, corner, shadow, type), no size / position / layout change, rarity colours stay, Modern (no skin
   class) is byte-for-byte what shipped. The Trials board stays a BOARD in every skin, in that skin's own material.
   Specificity: body:is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .x = 1,2,1 beats wlHudCss's 1,1,0 / 1,2,0; the board rules restate wlHudCss's selector
   behind S, so they beat its 1,3,0 / 1,4,0. Each state variant a skin rule would erase is restated below it. */

/* -- semantic colours the pale skins need deeper (gems, fragments, the Modern rarity's steel blue) -- */
body:where(.aaiTest).skin-classic.skin-light, body:where(.aaiTest).skin-elegant:not(.skin-elegantdark), body:where(.aaiTest).skin-fruits, body:where(.aaiTest).skin-tankcore, body:where(.aaiTest).skin-shapeboat, body:where(.aaiTest).skin-aero {
  --wk-gem: #0f8a76; --wk-frag: #6a3fb0; --wk-md: #3d6894;
}

/* -- the board material per skin: --wkb-* (frame, beam, head band, notes, pin, stamp, tilt) and the Trader's awning -- */
body:where(.aaiTest).skin-classic {
  --wkb-frame: var(--cl-face); --wkb-edge: var(--cl-edge); --wkb-bw: 1px; --wkb-rad: 6px; --wkb-shadow: 0 12px 32px rgba(0,0,0,.45);
  --wkb-beam: transparent; --wkb-head: transparent; --wkb-headline: 1px solid var(--cl-edge); --wkb-headink: var(--cl-text); --wkb-titlesh: none;
  --wkb-btn: rgba(255,255,255,.06); --wkb-ink: var(--cl-text);
  --wkb-note: rgba(255,255,255,.05); --wkb-noteink: var(--cl-text); --wkb-noterad: 4px; --wkb-notesh: inset 0 0 0 1px var(--cl-edge);
  --wkb-accent: #d9b36a; --wkb-done: #8fb27a; --wkb-pip: var(--cl-edge);
  --wkb-pin: var(--cl-muted); --wkb-pinw: 8px; --wkb-pinh: 8px; --wkb-pinrad: 50%; --wkb-pinrot: 0deg; --wkb-pinsh: none;
  --wkb-stamp: #8fb27a; --wkb-stampink: #8fb27a; --wkb-stampbg: transparent; --wkb-tilt: 0;
  --wkb-aw1: #3d4655; --wkb-aw2: #9aa3b0;
}
body:where(.aaiTest).skin-classic.skin-light {
  --wkb-shadow: 0 10px 26px rgba(0,0,0,.16); --wkb-btn: rgba(0,0,0,.05); --wkb-note: rgba(0,0,0,.04);
  --wkb-accent: #8a5a00; --wkb-done: #2f6b1f; --wkb-stamp: #2f6b1f; --wkb-stampink: #2f6b1f; --wkb-aw1: #2f3a4a; --wkb-aw2: #e6e8ec;
}
/* Elegant: a quartz plaque, white cards on hairlines, a tiny ink diamond for a pin */
body:where(.aaiTest).skin-elegant {
  --wkb-frame: linear-gradient(180deg, rgba(252,252,255,.96), rgba(238,239,246,.95)); --wkb-edge: var(--qz-edge); --wkb-bw: 1px; --wkb-rad: var(--qz-radius); --wkb-shadow: var(--qz-shadow);
  --wkb-beam: transparent; --wkb-head: transparent; --wkb-headline: 1px solid var(--qz-edge); --wkb-headink: var(--qz-ink); --wkb-titlesh: none;
  --wkb-btn: rgba(70,80,110,.07); --wkb-ink: var(--qz-ink);
  --wkb-note: #fff; --wkb-noteink: var(--qz-ink); --wkb-noterad: 3px; --wkb-notesh: 0 0 0 1px var(--qz-edge), 0 6px 16px rgba(35,42,58,.08);
  --wkb-accent: var(--qz-ink); --wkb-done: #3e7a3a; --wkb-pip: rgba(70,80,110,.3);
  --wkb-pin: var(--qz-ink); --wkb-pinw: 7px; --wkb-pinh: 7px; --wkb-pinrad: 1px; --wkb-pinrot: 45deg; --wkb-pinsh: none;
  --wkb-stamp: #3e7a3a; --wkb-stampink: #3e7a3a; --wkb-stampbg: transparent; --wkb-tilt: 0;
  --wkb-aw1: #2a3040; --wkb-aw2: #f4f3f7;
}
body:where(.aaiTest).skin-elegant.skin-elegantdark {
  --wkb-frame: linear-gradient(180deg, rgba(34,33,40,.96), rgba(24,23,29,.95)); --wkb-shadow: 0 12px 32px rgba(0,0,0,.5);
  --wkb-btn: rgba(255,255,255,.06); --wkb-note: rgba(44,43,51,.96); --wkb-notesh: 0 0 0 1px var(--qz-edge), 0 6px 16px rgba(0,0,0,.3);
  --wkb-done: #93bf86; --wkb-pip: rgba(255,255,255,.25); --wkb-stamp: #93bf86; --wkb-stampink: #93bf86; --wkb-aw1: #e6e4ea; --wkb-aw2: #2c2b33;
}
/* Depths: a carved basalt slab - engraved tablets, gold rivets, a gold seam under the lintel */
body:where(.aaiTest).skin-depths {
  --wkb-frame: repeating-linear-gradient(115deg, rgba(255,255,255,.014) 0 2px, transparent 2px 7px), linear-gradient(180deg, #1d1f22, #121315);
  --wkb-edge: var(--dp-edge); --wkb-bw: 1px; --wkb-rad: 0;
  --wkb-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 0 0 1px var(--dp-hair), inset 0 0 0 5px #141517, inset 0 0 0 6px rgba(224,189,122,.3);
  --wkb-beam: linear-gradient(180deg, transparent calc(100% - 2px), rgba(224,189,122,.6) calc(100% - 2px)), linear-gradient(180deg, #2c2e32, #17181b);
  --wkb-head: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.22)); --wkb-headline: 1px solid rgba(224,189,122,.4); --wkb-headink: var(--dp-ink); --wkb-titlesh: none;
  --wkb-btn: var(--dp-tint); --wkb-ink: var(--dp-ink);
  --wkb-note: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); --wkb-noteink: var(--dp-ink); --wkb-noterad: 0;
  --wkb-notesh: inset 0 2px 5px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(0,0,0,.5);
  --wkb-accent: #e0bd7a; --wkb-done: #9fbf9a; --wkb-pip: var(--dp-edge);
  --wkb-pin: radial-gradient(circle at 35% 35%, #f3dca6, #c89a4e 55%, #6e5124); --wkb-pinw: 8px; --wkb-pinh: 8px; --wkb-pinrad: 50%; --wkb-pinrot: 0deg; --wkb-pinsh: 0 1px 2px rgba(0,0,0,.8);
  --wkb-stamp: #e0bd7a; --wkb-stampink: #e0bd7a; --wkb-stampbg: transparent; --wkb-tilt: 0;
  --wkb-aw1: #2a2c30; --wkb-aw2: rgba(224,189,122,.85);
}
/* Fruits: a cork board in a fruit-crate frame, recipe cards with a gingham top, cherry pins */
body:where(.aaiTest).skin-fruits {
  --wkb-frame: radial-gradient(circle at 3px 3px, rgba(90,55,20,.26) 0 1px, transparent 1.6px) 0 0/7px 7px, radial-gradient(circle at 5px 6px, rgba(255,240,210,.2) 0 1px, transparent 1.6px) 0 0/9px 9px, linear-gradient(180deg, #c99a62, #b3824a);
  --wkb-edge: #8a5a2b; --wkb-bw: 6px; --wkb-rad: 12px;
  --wkb-shadow: 0 14px 34px rgba(70,54,20,.35), inset 0 0 0 2px rgba(255,236,200,.25), inset 0 -8px 16px rgba(90,55,20,.2);
  --wkb-beam: repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 46px), linear-gradient(180deg, #a8743f, #8a5a2b);
  --wkb-head: linear-gradient(180deg, #9c6a37, #84552a); --wkb-headline: 3px solid #6d4420; --wkb-headink: #fff8ec; --wkb-titlesh: 0 2px 0 rgba(70,40,10,.4);
  --wkb-btn: rgba(255,248,236,.18); --wkb-ink: #3d2a14;
  --wkb-note: linear-gradient(180deg, transparent 7px, #fbf3e2 7px), repeating-linear-gradient(90deg, #e06a5a 0 6px, #fff3e0 6px 12px);
  --wkb-noteink: var(--fr-text); --wkb-noterad: 4px; --wkb-notesh: 0 3px 0 rgba(90,55,20,.25), 0 6px 12px rgba(70,40,10,.18);
  --wkb-accent: #9a5f0c; --wkb-done: #4f8a35; --wkb-pip: rgba(104,78,40,.45);
  --wkb-pin: radial-gradient(circle at 35% 30%, #ff9a8a, #d63a2e 55%, #8a1c14); --wkb-pinw: 14px; --wkb-pinh: 14px; --wkb-pinrad: 50%; --wkb-pinrot: 0deg; --wkb-pinsh: 0 2px 2px rgba(0,0,0,.35);
  --wkb-stamp: #4f8a35; --wkb-stampink: #4f8a35; --wkb-stampbg: transparent; --wkb-tilt: 1;
  --wkb-aw1: #d9534f; --wkb-aw2: #fff3e0;
}
/* Tankcore: an office board in an empty building - ceiling-tile grid, a strip light, sticky notes held by tape */
body:where(.aaiTest).skin-tankcore {
  --wkb-frame: linear-gradient(90deg, rgba(60,110,98,.07) 1px, transparent 1px) 0 0/44px 44px, linear-gradient(180deg, rgba(60,110,98,.07) 1px, transparent 1px) 0 0/44px 44px, linear-gradient(180deg, #ebf0dc, #d8e1c5);
  --wkb-edge: #b5bca8; --wkb-bw: 4px; --wkb-rad: 0;
  --wkb-shadow: 0 10px 26px rgba(16,60,84,.22), inset 0 0 60px rgba(204,111,176,.08), inset 0 1px 0 rgba(255,255,255,.9);
  --wkb-beam: linear-gradient(180deg, #fff, #eafbe2 40%, #cfe9c2);
  --wkb-head: linear-gradient(180deg, rgba(255,255,255,.75), rgba(228,238,214,.6)); --wkb-headline: 1px solid var(--tc-edge); --wkb-headink: var(--tc-text); --wkb-titlesh: none;
  --wkb-btn: rgba(60,110,98,.08); --wkb-ink: var(--tc-text);
  --wkb-note: linear-gradient(180deg, #fbf6b4, #f2ea94); --wkb-noteink: #3a3f2a; --wkb-noterad: 0; --wkb-notesh: 0 1px 0 rgba(0,0,0,.08), 0 9px 10px -6px rgba(16,60,84,.4);
  --wkb-accent: var(--tc-text); --wkb-done: #3c8a3a; --wkb-pip: rgba(60,110,98,.35);
  --wkb-pin: rgba(255,255,255,.62); --wkb-pinw: 34px; --wkb-pinh: 11px; --wkb-pinrad: 1px; --wkb-pinrot: -3deg; --wkb-pinsh: 0 1px 1px rgba(0,0,0,.08);
  --wkb-stamp: var(--tc-clash); --wkb-stampink: var(--tc-clash); --wkb-stampbg: transparent; --wkb-tilt: .6;
  --wkb-aw1: #8fd8c8; --wkb-aw2: #f7c6dc;
}
/* Shapeboat Willie: a 1930s cartoon poster - halftone paper, an ink marquee with bulbs, cards with hard ink shadows */
body:where(.aaiTest).skin-shapeboat {
  --wkb-frame: radial-gradient(circle, rgba(20,17,14,.08) 0 1px, transparent 1.4px) 0 0/6px 6px, linear-gradient(180deg, #f7f4ee, var(--sb-paper) 55%, var(--sb-paper2));
  --wkb-edge: var(--sb-ink); --wkb-bw: 3px; --wkb-rad: 3px;
  --wkb-shadow: inset 0 0 0 3px var(--sb-paper), inset 0 0 0 5px var(--sb-ink), 6px 6px 0 rgba(20,17,14,.85);
  --wkb-beam: radial-gradient(circle, #fff6d8 0 3px, transparent 3.6px) 4px 50%/16px 16px repeat-x, var(--sb-ink);
  --wkb-head: var(--sb-ink); --wkb-headline: 3px solid var(--sb-ink); --wkb-headink: var(--sb-paper); --wkb-titlesh: none;
  --wkb-btn: rgba(244,241,234,.14); --wkb-ink: var(--sb-ink);
  --wkb-note: #fbf9f4; --wkb-noteink: var(--sb-ink); --wkb-noterad: 2px; --wkb-notesh: 0 0 0 2px var(--sb-ink), 4px 4px 0 var(--sb-ink);
  --wkb-accent: var(--sb-ink); --wkb-done: #2f5f22; --wkb-pip: var(--sb-ink);
  --wkb-pin: radial-gradient(circle at 35% 35%, #fff 0 2px, var(--sb-ink) 2.6px); --wkb-pinw: 14px; --wkb-pinh: 14px; --wkb-pinrad: 50%; --wkb-pinrot: 0deg; --wkb-pinsh: none;
  --wkb-stamp: var(--sb-ink); --wkb-stampink: var(--sb-ink); --wkb-stampbg: transparent; --wkb-tilt: 1.2;
  --wkb-aw1: var(--sb-ink); --wkb-aw2: var(--sb-paper);
}
/* Tankyter Aero: glossy glass from sky to grass with bubbles, glass cards, orb pins */
body:where(.aaiTest).skin-aero {
  --wkb-frame: radial-gradient(circle at 10% 86%, rgba(255,255,255,.6) 0 7px, transparent 8px), radial-gradient(circle at 17% 76%, rgba(255,255,255,.45) 0 4px, transparent 5px), radial-gradient(circle at 90% 80%, rgba(255,255,255,.5) 0 10px, transparent 11px), linear-gradient(180deg, rgba(226,246,255,.96), rgba(170,224,250,.93) 62%, rgba(140,214,160,.92));
  --wkb-edge: var(--ae-edge); --wkb-bw: 2px; --wkb-rad: 18px;
  --wkb-shadow: var(--ae-shadow), inset 0 1px 0 var(--ae-key), inset 0 0 30px rgba(255,255,255,.35);
  --wkb-beam: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(214,243,255,.92) 49%, rgba(140,210,245,.92) 51%, rgba(200,236,252,.94) 100%);
  --wkb-head: var(--ae-btn); --wkb-headline: 1px solid rgba(255,255,255,.7); --wkb-headink: #fff; --wkb-titlesh: 0 1px 2px rgba(0,60,100,.55);
  --wkb-btn: rgba(255,255,255,.22); --wkb-ink: var(--ae-text);
  --wkb-note: linear-gradient(180deg, #fff 0%, rgba(240,251,255,.97) 49%, rgba(214,243,255,.95) 51%, rgba(236,250,255,.97) 100%); --wkb-noteink: var(--ae-text); --wkb-noterad: 14px;
  --wkb-notesh: inset 0 1px 0 #fff, 0 0 0 1px rgba(120,210,245,.9), 0 4px 12px rgba(0,80,130,.22);
  --wkb-accent: #0a6fa8; --wkb-done: #3d8f12; --wkb-pip: rgba(0,110,170,.35);
  --wkb-pin: radial-gradient(circle at 35% 30%, #fff 0 2px, #9fe3ff 3px, #2aa7e0 72%); --wkb-pinw: 14px; --wkb-pinh: 14px; --wkb-pinrad: 50%; --wkb-pinrot: 0deg; --wkb-pinsh: 0 1px 3px rgba(0,80,130,.4);
  --wkb-stamp: #3d8f12; --wkb-stampink: #3d8f12; --wkb-stampbg: rgba(255,255,255,.6); --wkb-tilt: 0;
  --wkb-aw1: #2aa7e0; --wkb-aw2: #fff;
}
/* Feel Friendly, Dear Tank~: the club's guest list - black lacquer with a wine damask, a brass plate, ivory invitations, wax seals */
body:where(.aaiTest).skin-velvet {
  --wkb-frame: radial-gradient(ellipse 9px 14px at 50% 50%, rgba(107,30,54,.2) 0 45%, transparent 48%) 0 0/28px 36px, radial-gradient(ellipse 9px 14px at 50% 50%, rgba(107,30,54,.2) 0 45%, transparent 48%) 14px 18px/28px 36px, linear-gradient(180deg, #1a1215, #0f0a0c);
  --wkb-edge: var(--vv-brass); --wkb-bw: 2px; --wkb-rad: 4px;
  --wkb-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 0 0 4px #120c0e, inset 0 0 0 5px var(--vv-hair);
  --wkb-beam: linear-gradient(180deg, #e2c992, #b8995c 55%, #8f7442);
  --wkb-head: linear-gradient(180deg, rgba(107,30,54,.55), rgba(60,16,30,.55)); --wkb-headline: 1px solid var(--vv-brass); --wkb-headink: var(--vv-brass-hi); --wkb-titlesh: none;
  --wkb-btn: var(--vv-tint); --wkb-ink: var(--vv-ink);
  --wkb-note: #ece3da; --wkb-noteink: #2a1d22; --wkb-noterad: 2px;
  --wkb-notesh: inset 0 0 0 3px #ece3da, inset 0 0 0 4px rgba(194,163,107,.85), 0 6px 14px rgba(0,0,0,.45);
  --wkb-accent: #6b1e36; --wkb-done: #3f6a2a; --wkb-pip: rgba(107,30,54,.45);
  --wkb-pin: radial-gradient(circle at 35% 35%, #f6e2b0, #c2a36b 55%, #7a6236); --wkb-pinw: 10px; --wkb-pinh: 10px; --wkb-pinrad: 50%; --wkb-pinrot: 0deg; --wkb-pinsh: 0 1px 2px rgba(0,0,0,.6);
  --wkb-stamp: #4a1224; --wkb-stampink: #f3e6d2; --wkb-stampbg: radial-gradient(circle at 40% 35%, #a33a55, #6b1e36 60%, #4a1224); --wkb-tilt: .3;
  --wkb-aw1: #6b1e36; --wkb-aw2: #ece3da;
}
/* TankL Studio: a rack unit - screwed rail on top, clips with an orange strip, an LED for a pin */
body:where(.aaiTest).skin-tankl {
  --wkb-frame: var(--tl-chassis); --wkb-edge: var(--tl-border); --wkb-bw: 1px; --wkb-rad: 3px; --wkb-shadow: 0 12px 32px rgba(0,0,0,.5), var(--tl-bevel);
  --wkb-beam: radial-gradient(circle at 14px 60%, #9aa3b0 0 3px, #2a2f36 3.6px, transparent 4.6px), radial-gradient(circle at calc(100% - 14px) 60%, #9aa3b0 0 3px, #2a2f36 3.6px, transparent 4.6px), linear-gradient(180deg, #4d5563, #2c3139);
  --wkb-head: linear-gradient(180deg, #454c59, var(--tl-head)); --wkb-headline: 1px solid var(--tl-border); --wkb-headink: var(--tl-ink); --wkb-titlesh: none;
  --wkb-btn: rgba(255,255,255,.06); --wkb-ink: var(--tl-ink);
  --wkb-note: linear-gradient(180deg, var(--tl-orange) 0 4px, transparent 4px), var(--tl-slate); --wkb-noteink: var(--tl-ink); --wkb-noterad: 3px; --wkb-notesh: inset 0 0 0 1px var(--tl-border), 0 2px 0 rgba(0,0,0,.35);
  --wkb-accent: #ffb547; --wkb-done: var(--tl-lime); --wkb-pip: var(--tl-border);
  --wkb-pin: radial-gradient(circle, #f1ffc8 0 1.6px, var(--tl-lime) 2.6px, transparent 6px); --wkb-pinw: 12px; --wkb-pinh: 12px; --wkb-pinrad: 50%; --wkb-pinrot: 0deg; --wkb-pinsh: none;
  --wkb-stamp: var(--tl-lime); --wkb-stampink: var(--tl-lime); --wkb-stampbg: transparent; --wkb-tilt: 0;
  --wkb-aw1: #ff9a22; --wkb-aw2: #3b424d;
}

/* -- the Zone Trials board, in every skin's material -- */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb {
  background: var(--wkb-frame); border: var(--wkb-bw) solid var(--wkb-edge); border-radius: var(--wkb-rad); box-shadow: var(--wkb-shadow); color: var(--wkb-ink);
}
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb::before { background: var(--wkb-beam); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlHead { background: var(--wkb-head); border-bottom: var(--wkb-headline); box-shadow: none; }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlTitle { color: var(--wkb-headink); text-shadow: var(--wkb-titlesh); text-transform: var(--wk-tcase); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlHI { background: var(--wkb-note); color: var(--wkb-accent); border-radius: var(--wk-srad); box-shadow: var(--wkb-notesh); rotate: calc(-4deg * var(--wkb-tilt)); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlX, body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlIb { color: var(--wkb-headink); background: var(--wkb-btn); border-radius: var(--wk-srad); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlX:hover, body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlIb:hover, body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb.wlHelpOn .wlIb { background: var(--wk-tint2); color: var(--wkb-headink); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlHelp { background: var(--wkb-note); color: var(--wkb-noteink); border: 1px solid var(--wkb-edge); border-radius: var(--wkb-noterad); box-shadow: var(--wkb-notesh), 0 8px 20px rgba(0,0,0,.3); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlChip { background: var(--wkb-note); color: var(--wkb-noteink); border-radius: var(--wk-srad); box-shadow: var(--wkb-notesh); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlChip:nth-child(odd) { rotate: calc(-2deg * var(--wkb-tilt)); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlChip:nth-child(even) { rotate: calc(1.5deg * var(--wkb-tilt)); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlChip .wlIc { color: var(--wkb-accent); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlChip.wlOk, body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlChip.wlOk .wlIc { color: var(--wkb-done); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlZtN { background: var(--wkb-note); color: var(--wkb-noteink); border-radius: var(--wkb-noterad); box-shadow: var(--wkb-notesh); rotate: calc(var(--r, 0deg) * var(--wkb-tilt)); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlZtPin {
  width: var(--wkb-pinw); height: var(--wkb-pinh); margin-left: calc(var(--wkb-pinw) / -2); border-radius: var(--wkb-pinrad); rotate: var(--wkb-pinrot);
  background: var(--wkb-pin); box-shadow: var(--wkb-pinsh);
}
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlZtV { color: var(--wkb-accent); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlZtD .wlZtV { color: var(--wkb-done); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlZtPp i { border-color: var(--wkb-pip); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlZtPp i.wlOn { background: var(--wkb-done); border-color: var(--wkb-done); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlZtSt { border-color: var(--wkb-stamp); color: var(--wkb-stampink); background: var(--wkb-stampbg); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlZtOne .wlZtT .wlIc { color: var(--wkb-accent); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlPanel.wlZtP.wlNb .wlZtOne.wlZtD .wlZtT .wlIc { color: var(--wkb-done); }
/* Tankcore: every other sticky note is pink */
body:where(.aaiTest).skin-tankcore #wlHud .wlPanel.wlZtP.wlNb .wlZtN:nth-child(even) { background: linear-gradient(180deg, #fbd5e7, #f3bdd6); }
/* the board's tag over the K / gate on the field */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlZtTag { background: var(--wk-panel); border-color: var(--wkb-edge); color: var(--wk-ink); box-shadow: var(--wk-shadow); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlZtTag .wlIc { color: var(--wk-warn); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlZtTag b { color: var(--wk-ink); background: var(--wk-tint2); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlZtTag.wlZtAll b { color: var(--wk-good); }

/* -- the Trader's banner: the skin's panel under an awning in the skin's two colours; the jackpot stays gold -- */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlWtBan { background: var(--wk-panel); color: var(--wk-ink); border-color: var(--wk-warn); box-shadow: var(--wk-shadow); border-radius: var(--wk-rad); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlWtAw { background: repeating-linear-gradient(90deg, var(--wkb-aw1) 0 18px, var(--wkb-aw2) 18px 36px); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlWtIc { background: var(--wk-cell); box-shadow: inset 0 0 0 2px var(--wk-edge); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlWtK { color: var(--wk-warn); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlWtW { color: var(--wk-ink); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlWtS { color: var(--wk-muted); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlWtX { color: var(--wk-faint); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlWtBan.wlJp { background: linear-gradient(180deg, #ffe08a, #f2b240); border-color: #fff4c2; color: #2d1a0c; box-shadow: 0 0 22px rgba(255,200,80,.55), 0 6px 22px rgba(40,20,6,.45); }
/* -- the Shrine's banner and its window: the skin's panel, the rune frieze and glows in the skin's mystic colour (--wk-hi) -- */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlShBan { background: var(--wk-panel); color: var(--wk-ink); border-color: var(--wk-hi); box-shadow: var(--wk-shadow); border-radius: var(--wk-rad); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlShBanR { background: repeating-linear-gradient(90deg, transparent 0 6px, var(--wk-hi) 6px 8px, transparent 8px 12px, var(--wk-good) 12px 13px, transparent 13px 20px), var(--wk-tint2); border-bottom-color: var(--wk-hi); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlShBanI { border-color: var(--wk-hi); color: var(--wk-ink); background: var(--wk-tint2); box-shadow: none; }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlShBanK { color: var(--wk-hi); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlShBanFx { color: var(--wk-good); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud :is(.wlShBanC, .wlShBanP, .wlShBanU) { color: var(--wk-muted); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlShBanP .wlIc { color: var(--wk-hi); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlShBan .wlWtX { color: var(--wk-faint); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlShR { border-color: var(--wk-hi); color: var(--wk-ink); background: var(--wk-tint2); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlShC.wlLit .wlShR { border-color: var(--wk-good); color: var(--wk-ink); box-shadow: 0 0 10px var(--wk-good); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlShT { color: var(--wk-good); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlShV { color: var(--wk-hi); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlShC.wlLit .wlShV { color: var(--wk-good); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlShQ i { border-color: var(--wk-hi); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlShQ i.wlOn { background: var(--wk-hi); border-color: var(--wk-hi); }
/* -- the K button over an NPC: the skin's panel, the NPC's own edge colour kept -- */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlNpcGo { background: var(--wk-panel); color: var(--wk-ink); border-radius: var(--wk-rad); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlNpcGo .wlNpcI { color: var(--wk-warn); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlNpcGo.wlNpc_sh .wlNpcI { color: var(--wk-hi); }

/* -- Eggs -- */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlHtChip { background: var(--wk-tint2); color: var(--wk-ink); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlHtBar { background: var(--wk-track); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlHtBar i { background: var(--wk-good); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlHtG .wlCell.wlHtOn { box-shadow: 0 0 0 3px var(--wk-good), 0 0 14px var(--wk-good); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlHtOff { background: var(--wk-alt); color: var(--wk-altink); border-radius: var(--wk-srad); }
/* -- the Craft queue -- */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCqFo .wlCqT { stroke: var(--wk-track); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCqP { border-color: var(--wk-faint); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCqP.wlQ { border: 0; }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCqP.wlSel { outline-color: var(--wk-sel); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCqW { background: rgba(0,0,0,.45); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCqWC { background: var(--wk-panel); color: var(--wk-ink); border-color: var(--wk-bad); box-shadow: var(--wk-shadow); border-radius: var(--wk-rad); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud :is(.wlCqWC > b, .wlCqWI) { color: var(--wk-bad); }
/* -- part caps, locks, KEEP, the tooltip's extra lines -- */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCapH { color: var(--wk-faint); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCap i { color: var(--wk-warn); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCap.wlMax { box-shadow: inset 0 0 0 1px var(--wk-warn); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlExCap i { background: var(--wk-warn); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlLkC { background: var(--wk-tint2); color: var(--wk-warn); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlLkC.wlFull { color: var(--wk-warn); opacity: .62; }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlLkC.wlOn { background: #ffd77a; color: #2a1d05; opacity: 1; }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlLkPips { color: var(--wk-warn); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlLkPips i { background: var(--wk-tint2); box-shadow: inset 0 0 0 1px var(--wk-edge); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlLkPips i.wlU { background: var(--wk-warn); box-shadow: none; }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlLkPips i.wlF { background: transparent; box-shadow: inset 0 0 0 2px var(--wk-warn); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlRbLkR em { color: var(--wk-muted); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlRbCqW { color: var(--wk-warn); background: var(--wk-tint); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlQW { color: var(--wk-warn); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlTip .wlTipCap { color: var(--wk-warn); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlTip .wlTipMd { color: var(--wk-md, #9cc0ea); }
/* Modern parts keep their steel shimmer over the skin's cell (part 1's cell rule had covered it) */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlCell.wlMd { background: linear-gradient(115deg, transparent 28%, rgba(110,150,200,.3) 42%, rgba(196,220,248,.46) 50%, rgba(110,150,200,.3) 58%, transparent 72%) 50% 0/300% 100%, var(--wk-cell); }
/* -- the Gems window, the offers, fragments -- */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlOcS { background: var(--wk-go); color: var(--wk-goink); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlOcS.wlNo { background: #b8423a; color: #fff; }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlOcS.wlDone { background: #3f8a46; color: #fff; }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud :is(.wlEcBo .wlBoP, .wlEcTile.wlEcFr, .wlEcR > .wlIc.wlRune) { color: var(--wk-frag, #c9a6ff); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlEcTile.wlEcFr .wlMeter i { background: var(--wk-frag, #b278ff); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlEcR > .wlIc.wlRowI { color: var(--wk-warn); }
/* -- the trade window -- */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlT4S { background: var(--wk-tint); border-color: var(--wk-tint2); border-radius: var(--wk-srad); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlT4F { border-top-color: var(--wk-tint2); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud :is(.wlT4Fee, .wlT4Pay, .wlT4Go) { color: var(--wk-muted); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlT4Go.wlT4On { color: var(--wk-hi); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlT4Note { color: var(--wk-faint); text-decoration-color: var(--wk-faint); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlT4Short { color: var(--wk-bad); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlT4U { background: var(--wk-tint); border-color: var(--wk-warn); border-radius: var(--wk-srad); }

/* -- Depths' own touch (it had none in part 1): a readout case - gold corner ticks on every window, thin wide-tracked
   titles, a gold hairline under the head -- */
body:where(.aaiTest).skin-depths { --wk-tweight: 300; --wk-tls: .2em; }
body:where(.aaiTest).skin-depths #wlHud :is(.wlPanel, .wlBoard) {
  background:
    linear-gradient(var(--dp-tick), var(--dp-tick)) 5px 5px/11px 1px no-repeat, linear-gradient(var(--dp-tick), var(--dp-tick)) 5px 5px/1px 11px no-repeat,
    linear-gradient(var(--dp-tick), var(--dp-tick)) right 5px top 5px/11px 1px no-repeat, linear-gradient(var(--dp-tick), var(--dp-tick)) right 5px top 5px/1px 11px no-repeat,
    linear-gradient(var(--dp-tick), var(--dp-tick)) right 5px bottom 5px/11px 1px no-repeat, linear-gradient(var(--dp-tick), var(--dp-tick)) right 5px bottom 5px/1px 11px no-repeat,
    linear-gradient(var(--dp-tick), var(--dp-tick)) left 5px bottom 5px/11px 1px no-repeat, linear-gradient(var(--dp-tick), var(--dp-tick)) left 5px bottom 5px/1px 11px no-repeat,
    var(--dp-face);
}
body:where(.aaiTest).skin-depths { --dp-tick: rgba(224,189,122,.55); }
body:where(.aaiTest).skin-depths #wlHud .wlHead { box-shadow: 0 1px 0 rgba(224,189,122,.32); padding-bottom: 6px; }
body:where(.aaiTest).skin-depths #wlHud .wlPanel.wlZtP.wlNb .wlHead { box-shadow: none; padding-bottom: 10px; }

/* the popups' tile names and counts (big popups 10-04): skin ink on the pale skins instead of white with a black halo */
body:where(.aaiTest):is(.skin-classic.skin-light, .skin-elegant:not(.skin-elegantdark), .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero) #wlHud .wlCell :is(.wlName, .wlCount) { color: var(--wk-ink); text-shadow: 0 1px 0 rgba(255,255,255,.75), 0 0 3px rgba(255,255,255,.9); }
/* inline rarity colours (Common grey, Unusual green ...) are made for dark panels: a pale skin shows them darker, same hue */
body:where(.aaiTest):is(.skin-classic.skin-light, .skin-elegant:not(.skin-elegantdark), .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero) #wlHud .wlInfo [style*="color"] { filter: brightness(.6) saturate(1.5); }

/* ----- GUI fit pass (errorx002 10-04: "que al menos encaje con el estilo la GUI segun el que eligas") -----
   The last Wilds HUD pieces that kept the Modern colours under every skin: the craft queue badge on the bar, the
   Rebirth button ink, the "Lv N" gate label on locked parts and the loadout well in Parts. The NPC button's glow
   follows the skin's highlight like its border already does. Semantic colours (rarity, ready dots, gems) stay. */
/* craft queue badge: the skin's main button colour; classic and depths keep their own gold */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlBtn .wlCqBd { background: var(--wk-badge, var(--wk-go)); color: var(--wk-badgeink, var(--wk-goink)); border-radius: var(--wk-srad); }
body:where(.aaiTest).skin-classic { --wk-badge: var(--wk-warn); --wk-badgeink: #1d1206; }
body:where(.aaiTest).skin-classic.skin-light { --wk-badge: var(--wk-go); --wk-badgeink: #fff; }
body:where(.aaiTest).skin-depths { --wk-badge: var(--wk-warn); --wk-badgeink: #0d0d0f; }
/* Rebirth button: dark ink where the skin's rebirth colour is pale (aero amber, tankcore lime, dark quartz gold) */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlGo.wlRbGo { color: var(--wk-rbink, #fff); }
body:where(.aaiTest).skin-aero { --wk-rbink: #4a2800; }
body:where(.aaiTest).skin-aero #wlHud .wlGo.wlRbGo { text-shadow: 0 1px 0 rgba(255,255,255,.55); }
body:where(.aaiTest).skin-tankcore { --wk-rbink: var(--tc-text); }
body:where(.aaiTest).skin-elegant.skin-elegantdark { --wk-rbink: #16151a; }
/* "Lv N" gate label: the skin's warm accent, haloed in the cell colour instead of black on pale skins */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlGate { color: var(--wk-warn); }
body:where(.aaiTest):is(.skin-classic.skin-light, .skin-elegant:not(.skin-elegantdark), .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero) #wlHud .wlGate { text-shadow: 0 0 2px rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.9); }
/* loadout well in Parts: a tint of the skin's ink on pale skins, a darker well on dark ones, the skin's corner */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlLo { background: var(--wk-well, var(--wk-tint2)); border-radius: var(--wk-rad); }
body:where(.aaiTest).skin-classic { --wk-well: rgba(0,0,0,.2); }
body:where(.aaiTest).skin-classic.skin-light { --wk-well: var(--wk-tint2); }
body:where(.aaiTest).skin-elegant.skin-elegantdark { --wk-well: rgba(0,0,0,.24); }
body:where(.aaiTest).skin-depths { --wk-well: rgba(0,0,0,.3); }
body:where(.aaiTest).skin-velvet { --wk-well: rgba(13,9,11,.4); }
body:where(.aaiTest).skin-tankl { --wk-well: var(--tl-well); }
/* NPC button glow: the skin's highlight at 40% (its border is already var(--wk-hi)); the shop / waystone glows stay */
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlNpcGo { box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 18px var(--wk-higlow, rgba(242,194,107,.35)); }
body:where(.aaiTest).skin-classic { --wk-higlow: rgba(179,162,214,.4); }
body:where(.aaiTest).skin-classic.skin-light { --wk-higlow: rgba(91,60,154,.4); }
body:where(.aaiTest).skin-elegant { --wk-higlow: rgba(94,74,160,.4); }
body:where(.aaiTest).skin-elegant.skin-elegantdark { --wk-higlow: rgba(187,168,230,.4); }
body:where(.aaiTest).skin-depths { --wk-higlow: rgba(184,184,216,.4); }
body:where(.aaiTest).skin-fruits { --wk-higlow: rgba(122,63,143,.4); }
body:where(.aaiTest).skin-tankcore { --wk-higlow: rgba(204,111,176,.4); }
body:where(.aaiTest).skin-shapeboat { --wk-higlow: rgba(74,42,106,.4); }
body:where(.aaiTest).skin-aero { --wk-higlow: rgba(106,63,176,.4); }
body:where(.aaiTest).skin-velvet { --wk-higlow: rgba(215,154,180,.4); }
body:where(.aaiTest).skin-tankl { --wk-higlow: rgba(194,89,147,.4); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlNpcGo.wlNpc_sh { box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 18px rgba(178,120,255,.4); }
body:where(.aaiTest):is(.skin-classic, .skin-elegant, .skin-depths, .skin-fruits, .skin-tankcore, .skin-shapeboat, .skin-aero, .skin-velvet, .skin-tankl) #wlHud .wlNpcGo.wlNpc_wt { box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 18px rgba(214,150,86,.4); }