@font-face {
  font-family: 'PPNeueBit';
  src: url('../fonts/ppneuebit-bold.woff2') format('woff2'),
       url('../fonts/ppneuebit-bold.otf')   format('opentype');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PPNeueBit';
  src: url('../fonts/ppneuebit-bold.woff2') format('woff2'),
       url('../fonts/ppneuebit-bold.otf')   format('opentype');
  font-weight: bold;
  font-display: swap;
}

:root{
  --jus-fg: #fff;
  --jus-icon-filter: none;
}

/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'PPNeueBit', monospace;
  font-size:22px;
}

body{
  background:#000;
  color:#fff;
  height:100vh;
  overflow:hidden;
}

/* ================= BOOT ================= */
#boot{
  position:fixed;
  inset:0;
  background:#000;
  color:#00ff9c;
  padding:32px 40px;
  font-size:22px;
  line-height:1.6;
  z-index:10000;
}

.cursor{
  display:inline-block;
  width:8px;
  height:16px;
  background:#00ff9c;
  margin-left:4px;
  animation:blink 1s infinite;
}

@keyframes blink{50%{opacity:0;}}

/* ================= DESKTOP ================= */
#desktop{
  position:relative;
  width:100%;
  height:100%;
  padding:24px;
  display:none;
}


/* ================= ICONS ================= */
.desktop-icons{
  display:grid;
  grid-template-columns:96px;
  gap:36px;
}

.icon{
  width:96px;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  cursor:pointer;
}

.icon img{width:48px;image-rendering:pixelated;filter:var(--jus-icon-filter);}
.icon span{color:var(--jus-fg);}
.icon span{
  position:absolute;
  bottom:0;
  width:100%;
  font-size:22px;
  text-align:center;
}

/* ================= WINDOWS ================= */
.window{
  position:absolute;
  background:#fff;
  color:#000;
  border:2px solid #000;
  box-shadow:6px 6px 0 #000;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}

.win-edge{
  position:absolute;
  z-index:5;
  cursor:move;
  background:transparent;
  user-select:none;
  -webkit-user-select:none;
}
.win-edge-left  {top:0;bottom:0;left:-3px;width:6px;}
.win-edge-right {top:0;bottom:0;right:-3px;width:6px;}
.win-edge-bottom{left:0;right:0;bottom:-3px;height:6px;}

.win-resize{
  position:absolute;
  right:2px;
  bottom:2px;
  width:12px;
  height:12px;
  cursor:nwse-resize;
  z-index:6;
  user-select:none;
  -webkit-user-select:none;
}
.win-resize::before,
.win-resize::after{
  content:'';
  position:absolute;
  right:0;
  background:#000;
  width:2px;
  height:2px;
}
.win-resize::before { bottom:0; }
.win-resize::after  { right:4px; bottom:4px; }

.window-header{ user-select:none; -webkit-user-select:none; }

body.is-dragging, body.is-dragging *{
  user-select:none !important;
  -webkit-user-select:none !important;
  cursor:move !important;
}

.window-header{
  height:32px;
  background:#eee;
  border-bottom:3px solid #000;
  display:flex;
  align-items:center;
  padding:0 8px;
  gap:8px;
  cursor:move;
  font-weight:bold;
  font-size:22px;
}

.win-title{
  white-space:nowrap;
}

.win-deco{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
  justify-content:center;
}

.win-deco span{
  display:block;
  height:2px;
  background:#000;
}

.win-btns{
  display:flex;
  gap:3px;
  flex-shrink:0;
}

.win-btn{
  width:20px;
  height:20px;
  background:#000;
  color:#fff;
  text-align:center;
  line-height:1;
  font-size:24px;
  padding-top:5px;
  cursor:pointer;
  flex-shrink:0;
  font-style:normal;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Two overlapping squares pixel icon */
.win-btn-resize{
  position:relative;
  background:#000;
}
.win-btn-resize::before{
  content:'';
  position:absolute;
  bottom:3px;
  left:3px;
  width:10px;
  height:10px;
  border:2px solid #fff;
  background:#000;
  box-sizing:border-box;
}
.win-btn-resize::after{
  content:'';
  position:absolute;
  top:3px;
  right:3px;
  width:10px;
  height:10px;
  border:2px solid #fff;
  border-bottom:none;
  border-left:none;
  background:transparent;
  box-sizing:border-box;
}

/* keep old close selector working */
.window-close{ display:none; }

.window-content{
  padding:16px;
  font-size:22px;
  flex:1;
  overflow-y: scroll;
  overflow-x: auto;
}

/* ================= SCROLLBAR ================= */
.window-content::-webkit-scrollbar,
.txt::-webkit-scrollbar {
  width: 12px;
}
.window-content::-webkit-scrollbar-track,
.txt::-webkit-scrollbar-track {
  background: #fff;
  border-left: 2px solid #000;
}
.window-content::-webkit-scrollbar-thumb,
.txt::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 0;
  min-height: 30px;
}
.window-content::-webkit-scrollbar-thumb:hover,
.txt::-webkit-scrollbar-thumb:hover {
  background: #222;
}
/* Firefox */
.window-content,
.txt {
  scrollbar-width: thin;
  scrollbar-color: #000 #fff;
}

/* ================= FILE GRID ================= */
.file-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.file{text-align:center;cursor:pointer;}
.file img{width:48px;}
.file span{font-size:22px;margin-top:6px;display:block;}

/* ================= TXT ================= */
.txt{white-space:pre-line;font-size:22px;}

/* ================= DOCK ================= */
#dockWrap{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:stretch;
  max-width:calc(100vw - 32px);
}

#dock{
  background:#d4d4d4;
  border:none;
  padding:8px 4px;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:76px;
  overflow-x:auto;
  gap:2px;
}

/* ================= WINDOW DARK ================= */
.window-dark{
  background:#1a1a1a;
  color:#fff;
  border:2px solid #000;
}
.window-dark .window-header{
  color:#fff;
}
.window-dark .window-content{
  background:#1a1a1a;
}

.dock-item{
  width:76px;
  height:82px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  position:relative;
}

.dock-item img{
  width:52px;
  height:52px;
  object-fit:contain;
  image-rendering:pixelated;
  filter:var(--jus-icon-filter);
}
.dock-item span{font-size:22px;color:#000;text-align:center;}