/* ============================================================
   unosanity.neocities.org  —  THEME
   Layers a neon / CRT / commieblock vibe on top of 98.css.
   Loaded by index.html AND by every page in /apps.
   ------------------------------------------------------------
   EDITING TIP: colours live in :root below. Change them once,
   they update everywhere.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Micro+5&display=swap');

:root{
  --mag:#ff2bbf;
  --pur:#b06bff;
  --amb:#ffb24c;
  --teal:#39e6c8;
  --crt:#3dff7a;
  --night:#0c0a14;
  --header-h:104px;
  --taskbar-h:40px;
  --accent:var(--teal);
}

*{ box-sizing:border-box; }
.mono{ font-family:'VT323','Courier New',monospace; }
.pix { font-family:'Micro 5','VT323',monospace; }

/* ============================================================
   DESKTOP WALLPAPER
   Path is relative to this CSS file (css/style.css),
   so wallpaper lives at ../assets/wallpaper.jpg
   ============================================================ */
html,body{ height:100%; margin:0; }
body.desktop{
  overflow:hidden;
  background:#0c0a14 url('../assets/wallpaper.jpg') repeat;
  background-size:auto 560px;
  image-rendering:auto;
}
body.desktop::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 45% at 22% 28%, rgba(176,107,255,.20), transparent 60%),
    radial-gradient(55% 40% at 78% 20%, rgba(255,43,191,.18), transparent 60%),
    radial-gradient(60% 55% at 85% 85%, rgba(255,178,76,.15), transparent 60%),
    linear-gradient(180deg, rgba(12,10,20,.40), rgba(20,8,30,.48));
}
body.desktop::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1.5px, transparent 1.5px 4px);
  mix-blend-mode:multiply;
}

/* ============================================================
   LOCKED HEADER
   ============================================================ */
#header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:5000;
  display:flex; align-items:center; gap:18px; padding:0 18px;
  background:linear-gradient(180deg,#100a1c 0%, #15101f 70%, rgba(21,16,31,.86) 100%);
  border-bottom:2px solid var(--mag);
  box-shadow:0 0 26px rgba(255,43,191,.35), 0 6px 18px rgba(0,0,0,.6);
}
#wordmark{
  font-family:'Micro 5','VT323',monospace; font-size:74px; line-height:.8;
  letter-spacing:.02em; white-space:nowrap;
  background:linear-gradient(180deg,#fff 0%, var(--amb) 32%, var(--mag) 66%, var(--pur) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(2px 2px 0 #000) drop-shadow(0 0 8px rgba(255,43,191,.35));
}
#header .tagline{
  font-family:'VT323',monospace; color:#c8ffd5; font-size:18px;
  text-shadow:1px 1px 0 #000, 0 0 2px rgba(61,255,122,.45); margin-top:-6px;
}
#header .header-right{ margin-left:auto; display:flex; align-items:center; gap:16px; }

/* header marquee */
#marquee{
  position:fixed; top:var(--header-h); left:0; right:0; z-index:4999;
  background:#000; border-bottom:1px solid var(--mag); overflow:hidden; white-space:nowrap;
}
#marquee b{
  display:inline-block; padding:3px 0; padding-left:100%;
  font-family:'VT323',monospace; font-size:18px; color:#c8ffd5;
  text-shadow:1px 1px 0 #000;
  animation:mq 26s linear infinite;
}
@keyframes mq{ to{ transform:translateX(-100%); } }

/* visitor counter */
#visitorCounter{
  height:auto !important; width:auto !important; border:none !important;
  flex-direction:row !important; gap:8px;
  font-family:'VT323',monospace !important; font-size:26px !important;
  color:var(--crt); text-shadow:0 0 6px var(--crt);
  background:#000; padding:4px 10px; border:2px inset #444 !important;
}
#visitorCounter::before{ content:"visitors:" !important; font-size:14px !important; color:#7d9; }

/* ============================================================
   DESKTOP ICONS
   ============================================================ */
#icons{
  position:fixed; left:14px; top:calc(var(--header-h) + 34px); z-index:10;
  display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start;
  gap:18px 20px;
  max-height: calc(100vh - var(--header-h) - var(--taskbar-h) - 54px);
}
.dicon{
  text-align:center; cursor:pointer; user-select:none; padding:4px 2px;
  border:1px dotted transparent;
  width:88px;
}
.dicon:hover{ border-color:rgba(255,255,255,.4); background:rgba(176,107,255,.18); }
.dicon .glyph{ font-size:34px; line-height:1; filter:drop-shadow(1px 2px 0 #000); }
.dicon .label{
  display:block; margin-top:3px; font:12px/1.2 Tahoma,sans-serif;
  color:#fff; text-shadow:1px 1px 2px #000, 0 0 4px #000;
  overflow-wrap:break-word;
}

/* ============================================================
   APP WINDOWS
   ============================================================ */
.window.app{
  position:fixed; z-index:100; display:flex; flex-direction:column;
  min-width:240px; min-height:160px;
  box-shadow:3px 4px 0 rgba(0,0,0,.55), 0 0 22px var(--accent);
}
.window.app .title-bar{
  background:linear-gradient(90deg, var(--accent), #06006e);
  cursor:grab;
}
.window.app.dragging .title-bar{ cursor:grabbing; }
.window.app .title-bar.inactive{ filter:grayscale(.5) brightness(.8); }
.window.app .title-bar-text{ font-weight:bold; text-shadow:0 1px 0 rgba(0,0,0,.5); }
.window.app .window-body{
  flex:1; margin:0; padding:0; display:flex; min-height:0;
  background:var(--night);
}
.window.app .app-frame{ flex:1; width:100%; border:0; background:transparent; display:block; }
.window.app .resize{
  position:absolute; right:0; bottom:0; width:16px; height:16px;
  cursor:nwse-resize; z-index:5;
  background:repeating-linear-gradient(135deg,transparent 0 2px, rgba(255,255,255,.5) 2px 3px);
}
.window.app.minim{ display:none; }

/* ============================================================
   TASKBAR
   ============================================================ */
#taskbar{
  position:fixed; left:0; right:0; bottom:0; height:var(--taskbar-h); z-index:6000;
  display:flex; align-items:center; gap:5px; padding:4px 6px;
  background:#c3c3c3; border-top:2px solid #fff;
  box-shadow:0 -2px 0 #7b7b7b inset;
}
#startbtn{ font-weight:bold; display:flex; align-items:center; gap:6px; height:28px; }
#startbtn .flag{ font-size:15px; }
.task-sep{ width:2px; align-self:stretch; margin:3px 2px; box-shadow:1px 0 0 #fff, -1px 0 0 #7b7b7b; }
#tasks{ display:flex; gap:5px; flex:1; min-width:0; overflow:hidden; }
.taskbtn{ height:28px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.taskbtn.active{ box-shadow:inset 1px 1px 0 #7b7b7b, inset -1px -1px 0 #fff; background:#bcbcbc; font-weight:bold; }
#tray{ display:flex; align-items:center; gap:8px; padding:3px 8px; border:1px inset #9a9a9a; height:28px; font:12px Tahoma,sans-serif; }
#clock{ font-family:'VT323',monospace; font-size:17px; }

/* ============================================================
   START MENU
   ============================================================ */
#startmenu{
  position:fixed; left:6px; bottom:var(--taskbar-h); z-index:6100; width:250px;
  display:none; padding:3px;
}
#startmenu.open{ display:block; }
#startmenu .sm-banner{
  position:absolute; left:3px; top:3px; bottom:3px; width:34px;
  background:linear-gradient(180deg,#06006e,var(--pur));
  writing-mode:vertical-rl; transform:rotate(180deg);
  color:#fff; font:bold 17px Tahoma,sans-serif; text-align:center; padding:8px 0;
  letter-spacing:.08em;
}
#startmenu .sm-list{ margin-left:38px; }
.sm-item{ display:flex; align-items:center; gap:10px; padding:7px 10px; cursor:pointer; font:14px Tahoma,sans-serif; }
.sm-item:hover{ background:#06006e; color:#fff; }
.sm-item .glyph{ font-size:20px; width:22px; text-align:center; }
.sm-sep{ height:1px; background:#808080; box-shadow:0 1px 0 #fff; margin:4px 6px; }

/* ============================================================
   CRT SCREEN
   ============================================================ */
.crt{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 130% at 50% 50%, #0a1f12 0%, #06120a 70%, #030a06 100%);
  color:var(--crt); font-family:'VT323',monospace; font-size:20px; line-height:1.32;
  border:2px solid; border-color:#7b7b7b #fff #fff #7b7b7b;
  text-shadow:0 0 5px rgba(61,255,122,.6);
}
.crt::before{ content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 1px, transparent 1px 3px); }
.crt::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(130% 130% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%); }
.crt .crt-pad{ position:relative; z-index:1; padding:14px 16px; }
.crt a{ color:var(--crt); }
.crt .amber{ color:var(--amb); text-shadow:0 0 5px var(--amb); }
.crt .mag  { color:var(--mag); text-shadow:0 0 6px var(--mag); }
.crt .pur  { color:var(--pur); text-shadow:0 0 6px var(--pur); }
.crt .teal { color:var(--teal);text-shadow:0 0 6px var(--teal);}
.cursor::after{ content:'\2588'; animation:blink 1s steps(1) infinite; }

/* ============================================================
   WEB JUNK
   ============================================================ */
@keyframes blink{ 50%{ opacity:0; } }
.blink{ animation:blink 1.05s steps(1) infinite; }

.neon-mag { color:var(--mag);  text-shadow:0 0 4px var(--mag), 0 0 12px var(--mag); }
.neon-pur { color:var(--pur);  text-shadow:0 0 4px var(--pur), 0 0 12px var(--pur); }
.neon-amb { color:var(--amb);  text-shadow:0 0 4px var(--amb), 0 0 12px var(--amb); }
.neon-teal{ color:var(--teal); text-shadow:0 0 4px var(--teal),0 0 12px var(--teal);}

.btn88{
  width:88px; height:31px; border:1px solid #000; box-shadow:0 0 0 1px #fff inset;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font:bold 9px/1.05 Tahoma,sans-serif; padding:2px; overflow:hidden; cursor:pointer;
}
.odometer{ display:inline-flex; gap:2px; background:#000; padding:3px; border:2px inset #555; }
.odometer span{
  background:#111; color:var(--crt); font-family:'VT323',monospace; font-size:22px;
  width:16px; text-align:center; border:1px solid #2a2a2a; text-shadow:0 0 5px var(--crt);
}
.mq{ overflow:hidden; white-space:nowrap; }
.mq > span{ display:inline-block; padding-left:100%; animation:mq 18s linear infinite; }

/* ============================================================
   APP PAGES  (inside windows + standalone)
   ============================================================ */
body.app-page{
  margin:0; background:transparent;
  font-family:'Pixelated MS Sans Serif',Tahoma,sans-serif; color:#eee;
}
.app-content{ padding:14px; }
.app-content h1,.app-content h2{ font-family:'Micro 5','VT323',monospace; letter-spacing:.02em; }

.app-content fieldset{
  margin:0;
  min-width:0;
  padding:10px 12px 12px;
  border:2px groove #8b8b8b;
  background:rgba(18, 16, 28, .92);
}

.app-content legend{
  display:inline-block;
  margin-left:8px;
  padding:1px 8px 2px;
  font:700 12px/1.2 Tahoma,sans-serif;
  letter-spacing:.04em;
  color:#fff;
  background:#6c6c6c;
  border:1px solid #2b2b2b;
  box-shadow:1px 1px 0 #bfbfbf inset;
}

.webring-box{
  border:2px groove #8b8b8b;
  background:rgba(18, 16, 28, .92);
  padding:8px 10px 10px;
}

.webring-box legend{
  padding:1px 8px 2px;
  font:700 12px/1.2 Tahoma,sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  background:#6c6c6c;
  border:1px solid #2b2b2b;
  box-shadow:1px 1px 0 #bfbfbf inset;
}

body.app-standalone{
  background:#0c0a14 url('../assets/wallpaper.jpg') repeat;
  background-size:auto 560px; min-height:100vh;
  display:flex; align-items:flex-start; justify-content:center; padding:34px 16px;
}
body.app-standalone::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,10,20,.6), rgba(20,8,30,.68)); }
body.app-standalone .standalone-win{ position:relative; z-index:2; width:min(680px,96vw); }
body.app-standalone .standalone-win .window-body{ background:var(--night); padding:0; }

/* ============================================================
   MOBILE / RESPONSIVE  (≤759px)
   On phones: no persistent icon column, smaller header,
   windows fill the whole desktop area (JS handles sizing),
   taskbar buttons show icons only to save space.
   ============================================================ */
@media (max-width:759px){
  :root{
    --header-h:68px;
    --taskbar-h:46px;
  }
  #header{ padding:0 10px; gap:10px; }
  #wordmark{ font-size:46px; }
  #header .tagline{ display:none; }
  #header .header-right{ gap:8px; }
  #visitorCounter{ font-size:18px !important; padding:2px 6px; }

  /* icons go into a horizontal scroll row instead of a column */
  #icons{
    top:calc(var(--header-h) + 24px); left:0; right:0; width:100%;
    flex-direction:row; overflow-x:auto; overflow-y:hidden;
    gap:4px; padding:4px 8px;
    background:rgba(12,10,20,.72); border-bottom:1px solid rgba(176,107,255,.3);
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  #icons::-webkit-scrollbar{ display:none; }
  .dicon{ flex-shrink:0; width:64px; padding:4px; }
  .dicon .glyph{ font-size:28px; }
  .dicon .label{ font-size:10px; }

  /* windows fill the desktop — no resize grip on mobile */
  .window.app .resize{ display:none; }

  /* taskbar: shrink label text, allow icon-only at very narrow widths */
  .taskbtn{ max-width:120px; font-size:12px; }
  .tb-label{ display:none; }   /* hide text labels, keep icons */

  /* start menu full-width */
  #startmenu{ left:0; right:0; width:100%; bottom:var(--taskbar-h); }

  /* standalone pages don't need padding on mobile */
  body.app-standalone{ padding:8px; }

  /* CRT font slightly smaller */
  .crt{ font-size:17px; }
}

/* ultra-narrow (fold / very old phones) */
@media (max-width:360px){
  #wordmark{ font-size:36px; }
}