/* ================= dj SPIN ================= */
@keyframes djSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.dj-spinning{animation:djSpin 3s linear infinite;}

/* ================= tv VOLUME ================= */
.tv-vol{
  writing-mode:vertical-lr;
  direction:rtl;
  -webkit-appearance:none;
  appearance:none;
  width:28px;
  height:120px;
  background:transparent;
  cursor:pointer;
  outline:none;
}
.tv-vol::-webkit-slider-runnable-track{
  width:4px;
  background:#000;
  border-radius:0;
}
.tv-vol::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:44px;
  height:14px;
  background:#fff;
  border:2.5px solid #000;
  border-radius:0;
  margin-left:-20px;
  cursor:pointer;
}
/* Firefox equivalents (::-webkit-slider-* rules are ignored there) */
.tv-vol::-moz-range-track{
  width:4px;
  background:#000;
  border-radius:0;
}
.tv-vol::-moz-range-thumb{
  width:44px;
  height:14px;
  background:#fff;
  border:2.5px solid #000;
  border-radius:0;
  cursor:pointer;
}
.nl-scroll::-webkit-scrollbar{width:12px;}
.nl-scroll::-webkit-scrollbar-track{background:#fff;border-left:2px solid #000;}
.nl-scroll::-webkit-scrollbar-thumb{background:#000;border-radius:0;min-height:30px;}
.nl-scroll{scrollbar-width:thin;scrollbar-color:#000 #fff;}
.nl-scroll{scrollbar-width:thin;scrollbar-color:#000 #fff;}

.justv-tooltip{
  position:absolute;
  bottom:0;
  left:0;right:0;
  background:#000;
  color:#fff;
  font-size:13px;
  font-weight:bold;
  text-align:center;
  padding:5px 4px;
  opacity:0;
  transition:opacity 0.15s;
  pointer-events:none;
  white-space:nowrap;
}
a:hover .justv-tooltip{
  opacity:1;
}

.dj-cross{
  -webkit-appearance:none;
  appearance:none;
  width:140px;
  background:transparent;
  cursor:pointer;
  outline:none;
  display:block;
}
.dj-cross::-webkit-slider-runnable-track{
  height:4px;
  background:#000;
  border-radius:0;
}
.dj-cross::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:44px;
  background:#fff;
  border:2.5px solid #000;
  border-radius:0;
  margin-top:-20px;
  cursor:pointer;
}
/* Firefox equivalents */
.dj-cross::-moz-range-track{
  height:4px;
  background:#000;
  border-radius:0;
}
.dj-cross::-moz-range-thumb{
  width:14px;
  height:44px;
  background:#fff;
  border:2.5px solid #000;
  border-radius:0;
  cursor:pointer;
}
.tv-btn{
  width:50px;height:50px;
  border:3px solid #000;
  background:#fff;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.tv-btn:active{background:#eee;}

/* ================= BADGE ================= */
.badge{
  position:absolute;
  top:2px;
  right:4px;
  background:#ff0000;
  color:#fff;
  font-size:14px;
  font-weight:bold;
  font-style:normal;
  border-radius:3px;
  min-width:18px;
  height:18px;
  line-height:18px;
  text-align:center;
  padding:0 4px;
  box-sizing:border-box;
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ================= SMART CURSOR ================= */
#jusCursor {
  position: fixed;
  pointer-events: none;
  z-index: 30000;
  font-family:monospace;
  font-size:13px;
  background: #fff;
  color: #000;
  padding: 4px 6px;
  border: 1.5px solid #000;
  box-shadow: 2px 2px 0 #000;
  max-width: 180px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* ================= dj ================= */
.dj-disk{
  width:96px;
  height:96px;
  margin:auto;
}

.dj-disk img{
  width:100%;
  height:100%;
  animation:spin 2s linear infinite;
  animation-play-state:paused;
}

.dj-disk.playing img{animation-play-state:running;}

@keyframes spin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

/* ================= JUS MODE TOPBAR ================= */
#topBar{
  position:fixed;
  top:0;left:0;right:0;
  height:36px;
  background:transparent;
  color:var(--jus-fg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  font-family:monospace;
  font-size:22px;
  z-index:5000;
  border-bottom:2px solid #000;
}

#topBarLeft{display:flex;align-items:center;gap:8px;}
#topBarLeft > * {
  display:inline-flex;
  align-items:center;
  height:20px;
  line-height:1;
}

#aboutOSBtn{
  background:transparent;
  border:0;
  padding:0 4px;
  cursor:pointer;
}
#aboutOSBtn img{
  width:24px;
  height:24px;
  display:block;
  image-rendering:pixelated;
  transform:scaleX(-1);
  filter:drop-shadow(0 0 2px rgba(0,0,0,0.4));
  transition:transform .15s ease;
}
#aboutOSBtn:hover img{ transform:scaleX(-1) scale(1.1); }
#topBarRight{display:flex;align-items:center;gap:6px;}
#topBarRight > * {
  display:inline-flex;
  align-items:center;
  height:20px;
  line-height:1;
}
#topClock{margin-left:20px;}

#settingsBtn{
  background:transparent;
  border:0;
  color:inherit;
  cursor:pointer;
  padding:0 4px;
  font:inherit;
}
#settingsBtn svg{display:block;transition:transform .2s ease;}
#settingsBtn:hover svg{transform:rotate(45deg);}

.bg-preset{
  width:36px;
  height:36px;
  border:2px solid #000;
  cursor:pointer;
  image-rendering:pixelated;
  flex-shrink:0;
}
.bg-preset:hover{outline:2px solid #8FFF73;outline-offset:2px;}


/* pixel toggle */
#jusToggle{
  display:inline-flex;
  width:38px;
  height:20px;
  background:#fff;
  border:2px solid #fff;
  cursor:pointer;
  position:relative;
  flex-shrink:0;
  image-rendering:pixelated;
  align-items:center;
}
#jusToggleThumb{
  position:absolute;
  width:14px;
  height:14px;
  background:#000;
  top:1px;
  left:1px;
  transition:left 0.15s steps(4);
}
body.jus-mode #jusToggleThumb{
  left:21px;
}

#desktop{
  padding-top:44px; /* clearance for topbar */
}

/* ================= IN MY HEAD MODE ================= */

body.jus-mode #desktop,
body.jus-mode #dockWrap {
  filter: blur(8px);
  transition: filter 0.6s ease;
}

#jusExit {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20000;
}

#jusExit button {
  background: #fff;
  border: 4px solid #000;
  padding: 16px 24px;
  font-family:monospace;
  font-size:22px;
  cursor: pointer;
  box-shadow: 6px 6px 0 #000;
}

/* ================= SCREENSAVER ================= */
#screensaver{
  position:fixed;
  inset:0;
  background:#000;
  display:none;
  z-index:9999;
}

#dvd{
  position:absolute;
  font-size:96px;
  font-weight:bold;
  color:#fff;
}