/* ============================================================
   FAZO 98 — CORE / THEME / WINDOW MANAGER
   Windows 98 classic-gray material, themed as a custom "FAZO 98"
   skin: navy title bars (stock 98), teal-blue desktop + dithered
   ZO wallpaper, angel-sigil Start flag, ZO lore boot.
   Reference bar: windows93.net.
   ============================================================ */
@font-face{font-family:"MS Sans Serif";src:url("https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif.woff2") format("woff2");font-display:swap}
@font-face{font-family:"MS Sans Serif";font-weight:bold;src:url("https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif_bold.woff2") format("woff2");font-display:swap}

:root{
  /* 98 material */
  --gray:#c0c0c0;
  --gray-d:#808080;
  --gray-dd:#0a0a0a;
  --gray-l:#dfdfdf;
  --white:#ffffff;
  --ink:#000000;
  --navy:#000080;
  --navy2:#1084d0;
  --sel:#000080;
  --sel-ink:#ffffff;
  --desk:#0d3b4a;          /* FAZO teal-blue desktop */
  /* FAZO identity accents (used sparingly: LCD screens, boot, game) */
  --cyan:#5fb6da;
  --moon:#bfe6f7;
  --good:#108010;
  --danger:#a80000;
  /* bevels */
  --bo:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff;
  --bi:inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  --bo1:inset -1px -1px #808080, inset 1px 1px #ffffff;
  --bi1:inset -1px -1px #ffffff, inset 1px 1px #808080;
  --ui:"MS Sans Serif","Pixelated MS Sans Serif",Tahoma,Geneva,sans-serif;
  --term:"VT323",monospace;
  --pixel:"Press Start 2P",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:var(--desk);
  color:var(--ink);
  font-family:var(--ui);
  font-size:13px;
  -webkit-font-smoothing:none;
  user-select:none;-webkit-user-select:none;
  cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3E%3Cpath%20d='M1,0L1,12L4,9L6,13L8,12L6,8L10,8Z'%20fill='%23ffffff'%20stroke='%23000000'/%3E%3C/svg%3E") 1 0, default;
}
.hidden{display:none !important}
img{image-rendering:pixelated}
a{color:var(--navy)}

/* CRT overlay (toggleable) */
.scanlines{position:fixed;inset:0;z-index:9000;pointer-events:none;display:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.16) 2px 3px);
  mix-blend-mode:multiply;opacity:.5}
body.crt .scanlines{display:block}
body.crt .desktop{filter:saturate(1.05) contrast(1.02)}

/* ============ POWER SCREEN ============ */
.power-screen{position:fixed;inset:0;z-index:10000;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.power-btn{width:108px;height:108px;background:#1a1a1a;color:var(--cyan);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  box-shadow:var(--bo);font-family:var(--ui)}
.power-btn:active{box-shadow:var(--bi)}
.power-glyph{font-size:42px;line-height:1;text-shadow:0 0 14px var(--cyan)}
.power-label{font-size:12px;letter-spacing:1px;color:#9aa}
.power-tag{font-size:13px;color:#778;letter-spacing:2px;font-family:var(--term)}

/* ============ BOOT (VGA POST) ============ */
.boot-screen{position:fixed;inset:0;z-index:9500;background:#000;display:flex;align-items:center;justify-content:center;font-family:var(--term);
  cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3E%3Crect%20x='4'%20y='1'%20width='8'%20height='2'%20fill='%23fff'/%3E%3Crect%20x='4'%20y='13'%20width='8'%20height='2'%20fill='%23fff'/%3E%3Cpath%20d='M5,3h6l-3,4z'%20fill='%23fff'/%3E%3Cpath%20d='M5,13h6l-3,-4z'%20fill='%23fff'/%3E%3C/svg%3E") 8 8, wait}
.boot-inner{width:min(820px,94vw);padding:16px}
.boot-sigil{color:#bfe6f7;font-size:9px;line-height:9px;text-align:center;margin-bottom:14px;white-space:pre;font-family:var(--term)}
.boot-log{font-size:19px;line-height:1.2;color:#d8d8d8;min-height:46vh;max-height:46vh;overflow:hidden}
.boot-log .ok{color:#5ad15a}
.boot-log .warn{color:#e9c46a}
.boot-log .acc{color:#79c0e0}
.boot-log .dim{color:#888}
.boot-log .fact{color:#fff}
.boot-bar{margin-top:18px;height:22px;box-shadow:var(--bi);background:#000;padding:3px}
.boot-bar-fill{height:100%;width:0;background:repeating-linear-gradient(90deg,#1084d0 0 12px,#000080 12px 18px);transition:width .2s}
.boot-enter{margin-top:20px;text-align:center;color:#fff;font-size:23px;animation:blink 1.1s steps(1) infinite;cursor:pointer}
@keyframes blink{50%{opacity:0}}
.boot-credit{position:fixed;bottom:10px;right:14px;font-family:var(--term);font-size:17px;color:#667}
.boot-credit a{color:#79c0e0}

/* ============ FAZO 98 SPLASH ============ */
.splash{position:fixed;inset:0;z-index:9400;background:#0d3b4a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.splash-box{width:min(440px,86vw);background:var(--gray);box-shadow:var(--bo);padding:22px;text-align:center}
.splash-logo{width:84px;height:84px;object-fit:cover;box-shadow:var(--bi);margin-bottom:10px;background:#000}
.splash-title{font-family:var(--pixel);font-size:18px;color:var(--navy);margin-bottom:4px}
.splash-sub{font-size:13px;color:#333;margin-bottom:14px}
.splash-bar{height:18px;background:#fff;box-shadow:var(--bi);padding:2px;overflow:hidden}
.splash-bar i{display:block;height:100%;width:40%;background:repeating-linear-gradient(90deg,#000080 0 8px,transparent 8px 12px);animation:march 1s linear infinite}
@keyframes march{to{background-position:24px 0}}

/* ============ DESKTOP ============ */
.desktop{position:fixed;inset:0;z-index:100;background:var(--desk) center/cover no-repeat}
.desktop-glow{display:none}

.icons{position:absolute;top:8px;left:6px;display:flex;flex-direction:column;flex-wrap:wrap;gap:2px;max-height:calc(100vh - 60px);align-content:flex-start}
.icon{width:86px;padding:6px 3px 5px;text-align:center;cursor:inherit;display:flex;flex-direction:column;align-items:center;gap:4px}
.icon .glyph{width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.icon .glyph svg{width:32px;height:32px;image-rendering:pixelated}
.icon .label{font-size:12px;line-height:1.1;color:#fff;letter-spacing:0;padding:1px 3px;
  text-shadow:1px 1px 0 #000,-1px 0 0 #000,1px 0 0 #000,0 1px 0 #000}
.icon.sel .glyph{filter:drop-shadow(0 0 0 #000);background:rgba(0,0,128,.35)}
.icon.sel .label{background:var(--sel);color:var(--sel-ink);text-shadow:none;outline:1px dotted #fff;outline-offset:-1px}

/* ============ WINDOWS ============ */
.windows{position:absolute;inset:0;pointer-events:none}
.win{position:absolute;pointer-events:auto;min-width:200px;min-height:120px;background:var(--gray);
  box-shadow:var(--bo);padding:3px;display:flex;flex-direction:column}
.win-title{height:20px;flex:0 0 20px;display:flex;align-items:center;gap:4px;padding:0 2px 0 3px;cursor:default;
  background:linear-gradient(90deg,var(--navy),var(--navy2));color:#fff}
.win.inactive .win-title{background:linear-gradient(90deg,#808080,#b5b5b5);color:#dcdcdc}
.win-title .wt-ico{width:16px;height:16px;flex:0 0 16px;display:flex;align-items:center;justify-content:center}
.win-title .wt-ico svg{width:16px;height:16px;image-rendering:pixelated}
.win-title .wt-name{flex:1;font-size:12px;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-btns{display:flex;gap:2px}
.win-btn{width:18px;height:16px;cursor:inherit;font-size:9px;line-height:1;display:flex;align-items:center;justify-content:center;
  color:#000;background:var(--gray);box-shadow:var(--bo1);font-family:var(--ui);font-weight:bold;padding:0}
.win-btn:active{box-shadow:var(--bi1)}
.win-btn.close{font-size:11px}
/* menu bar */
.win-menu{flex:0 0 19px;height:19px;display:flex;align-items:center;gap:0;padding:1px 2px;background:var(--gray);font-size:12px}
.win-menu .mi{padding:2px 7px;cursor:inherit;color:#000}
.win-menu .mi:hover,.win-menu .mi.open{background:var(--navy);color:#fff}
.menu-pop{position:fixed;z-index:7000;min-width:150px;background:var(--gray);box-shadow:var(--bo);padding:2px}
.menu-pop button{display:flex;width:100%;justify-content:space-between;gap:18px;align-items:center;padding:4px 18px 4px 22px;background:transparent;border:0;color:#000;font-family:var(--ui);font-size:12px;cursor:inherit;text-align:left}
.menu-pop button:hover{background:var(--navy);color:#fff}
.menu-pop button:disabled{color:var(--gray-d)}
.menu-pop .sep{height:1px;margin:3px 2px;border-top:1px solid #808080;border-bottom:1px solid #fff}
.win-body{flex:1;overflow:auto;position:relative;background:var(--gray);box-shadow:var(--bi1)}
.win-status{flex:0 0 20px;height:20px;display:flex;align-items:center;padding:0 2px;gap:3px;background:var(--gray);font-size:12px;color:#000}
.win-status .sb{box-shadow:var(--bi1);padding:1px 7px;height:18px;display:flex;align-items:center}
.win-status .sb.grow{flex:1}
.win-resize{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;z-index:5}

/* classic scrollbars */
.win-body::-webkit-scrollbar{width:16px;height:16px}
.win-body::-webkit-scrollbar-track,.app-merch::-webkit-scrollbar-track,.app-updates::-webkit-scrollbar-track{background:#fff}
.win-body::-webkit-scrollbar-thumb{background:var(--gray);box-shadow:var(--bo1);border:1px solid #808080}
.win-body::-webkit-scrollbar-button{background:var(--gray);box-shadow:var(--bo1);height:16px;width:16px;display:block}
*{scrollbar-color:var(--gray) #fff}

/* UI atoms */
.btn{font-family:var(--ui);font-size:12px;color:#000;cursor:inherit;background:var(--gray);padding:4px 12px;min-height:23px;box-shadow:var(--bo1);border:0}
.btn:hover{}
.btn:active{box-shadow:var(--bi1);padding-top:5px;padding-bottom:3px}
.btn:focus{outline:1px dotted #000;outline-offset:-4px}
.btn:disabled{color:var(--gray-d);text-shadow:1px 1px 0 #fff;cursor:inherit}
.btn.primary{font-weight:bold}
.field{font-family:var(--ui);font-size:12px;color:#000;background:#fff;padding:3px 5px;width:100%;box-shadow:var(--bi1);border:0}
.field:focus{outline:none}
.inset{box-shadow:var(--bi);background:#fff}

/* ============ TASKBAR ============ */
.taskbar{position:absolute;left:0;right:0;bottom:0;height:30px;z-index:4000;display:flex;align-items:center;gap:4px;padding:2px 3px;
  background:var(--gray);box-shadow:inset 0 1px #fff,inset 0 2px #dfdfdf}
.start-btn{display:flex;align-items:center;gap:5px;height:23px;padding:0 8px 0 4px;cursor:inherit;
  font-family:var(--ui);font-size:12px;font-weight:bold;color:#000;background:var(--gray);box-shadow:var(--bo1)}
.start-btn.open,.start-btn:active{box-shadow:var(--bi1)}
.start-logo{width:18px;height:18px;object-fit:contain;background:#000;padding:1px}
.task-list{flex:1;display:flex;gap:3px;overflow:hidden}
.task-btn{height:23px;max-width:160px;flex:0 1 150px;padding:0 6px;cursor:inherit;text-align:left;
  font-family:var(--ui);font-size:12px;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:5px;background:var(--gray);box-shadow:var(--bo1)}
.task-btn.active{box-shadow:var(--bi1);font-weight:bold;background:repeating-conic-gradient(#bdbdbd 0% 25%,#c8c8c8 0% 50%) 0 0/4px 4px}
.task-btn svg{width:14px;height:14px;flex:0 0 14px;image-rendering:pixelated}
.tray{display:flex;align-items:center;gap:6px;height:23px;padding:0 6px;box-shadow:var(--bi1)}
.tray-clock{font-size:12px;color:#000}
.tray-net,.tray-now{font-size:12px;color:#000;max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tray-btn{cursor:inherit;font-size:13px;background:transparent;border:0;padding:0 1px}
.tray-join{font-family:var(--ui);font-size:12px;font-weight:bold;color:#000;background:var(--gray);cursor:inherit;box-shadow:var(--bo1);padding:2px 6px}
.tray-join:active{box-shadow:var(--bi1)}

/* ============ START MENU ============ */
.start-menu{position:absolute;left:3px;bottom:31px;z-index:4500;width:240px;background:var(--gray);display:flex;flex-direction:column;box-shadow:var(--bo)}
.start-rail{position:absolute;left:0;top:0;bottom:0;width:30px;background:linear-gradient(var(--navy),#202060)}
.start-rail span{position:absolute;bottom:10px;left:4px;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--pixel);font-size:13px;color:#fff;letter-spacing:2px}
.start-rail span b{color:var(--cyan)}
.start-items,.start-menu>.start-item{margin-left:30px}
.start-items{display:flex;flex-direction:column;padding:2px 0}
.start-item{display:flex;align-items:center;gap:9px;padding:5px 12px;cursor:inherit;text-align:left;font-family:var(--ui);font-size:13px;color:#000;background:transparent;border:0}
.start-item:hover{background:var(--navy);color:#fff}
.start-item .si-ico{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.start-item .si-ico svg{width:22px;height:22px;image-rendering:pixelated}
.start-sep{height:1px;margin:3px 6px 3px 36px;border-top:1px solid #808080;border-bottom:1px solid #fff}

/* ============ CONTEXT MENU ============ */
.ctxmenu{position:fixed;z-index:8000;min-width:170px;background:var(--gray);padding:2px;box-shadow:var(--bo)}
.ctxmenu button{display:flex;width:100%;gap:10px;align-items:center;padding:4px 18px 4px 22px;background:transparent;border:0;color:#000;font-family:var(--ui);font-size:12px;cursor:inherit;text-align:left;white-space:nowrap}
.ctxmenu button:hover{background:var(--navy);color:#fff}
.ctxmenu button:disabled{color:var(--gray-d)}
.ctxmenu .sep{height:1px;margin:3px 2px;border-top:1px solid #808080;border-bottom:1px solid #fff}

/* ============ DIALOGS (modal) ============ */
.dlg-mask{position:fixed;inset:0;z-index:8500;display:flex;align-items:center;justify-content:center}
.dlg{min-width:280px;max-width:90vw;background:var(--gray);box-shadow:var(--bo);padding:3px;display:flex;flex-direction:column}
.dlg-title{height:20px;display:flex;align-items:center;gap:5px;padding:0 2px 0 4px;background:linear-gradient(90deg,var(--navy),var(--navy2));color:#fff;font-size:12px;font-weight:bold}
.dlg-title .dlg-x{margin-left:auto;width:18px;height:16px;font-size:11px;font-weight:bold;background:var(--gray);color:#000;box-shadow:var(--bo1);display:flex;align-items:center;justify-content:center;cursor:inherit}
.dlg-main{display:flex;gap:14px;padding:18px 16px 12px}
.dlg-ico{font-size:30px;flex:0 0 auto;line-height:1}
.dlg-msg{font-size:13px;color:#000;line-height:1.45;align-self:center}
.dlg-msg b{font-weight:bold}
.dlg-btns{display:flex;gap:8px;justify-content:center;padding:4px 12px 14px}
.dlg-btns .btn{min-width:76px;justify-content:center;text-align:center}

/* ============ SHUTDOWN ============ */
.shutdown{position:fixed;inset:0;z-index:11000;background:#000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;text-align:center}
.shutdown .big{font-family:var(--term);font-size:34px;color:#e8a020;text-shadow:0 0 10px rgba(232,160,32,.4);letter-spacing:1px;line-height:1.3}
.shutdown .sub{font-family:var(--term);font-size:20px;color:#888}

/* ============ BSOD ============ */
.bsod{position:fixed;inset:0;z-index:11500;background:#0000aa;color:#fff;font-family:var(--term);display:flex;align-items:center;justify-content:center;padding:8vw;cursor:inherit}
.bsod-inner{max-width:680px;font-size:20px;line-height:1.5}
.bsod h1{background:#aaa;color:#0000aa;display:inline-block;padding:0 8px;font-size:20px;margin-bottom:18px}
.bsod p{margin:12px 0}
.bsod .blink{animation:blink 1.1s steps(1) infinite}

/* ============ BOOT LOGO PULSE ============ */
.boot-logo{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:5}
.boot-logo-img{width:min(46vw,420px);height:auto;image-rendering:pixelated;
  animation:bootpulse 1.1s ease-in-out infinite;filter:drop-shadow(0 0 24px rgba(95,182,218,.35))}
@keyframes bootpulse{0%,100%{opacity:.45;transform:scale(.98)}50%{opacity:1;transform:scale(1.03)}}

/* ============ REAL (PNG) APP ICONS ============ */
.appico{image-rendering:pixelated;display:block}
.icon .glyph .appico{width:32px;height:32px}
.win-title .wt-ico .appico{width:16px;height:16px}
.si-ico .appico{width:22px;height:22px}
.task-btn .appico{width:16px;height:16px;flex:0 0 16px}
.ei-ico .appico{width:32px;height:32px}
.web-tile .appico{width:28px;height:28px}

/* ============ WINGY (office assistant) ============ */
.wingy-char{position:absolute;right:10px;bottom:40px;z-index:3500;width:150px;cursor:inherit;animation:wingyfloat 3s ease-in-out infinite}
.wingy-char.bump{animation:wingybump .4s ease}
@keyframes wingyfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes wingybump{0%{transform:translateY(0)}30%{transform:translateY(-8px) scale(1.05)}100%{transform:translateY(0)}}
.wingy-sprite{width:150px;height:auto;display:block;image-rendering:pixelated;transform-origin:center;
  animation:wingflap .7s ease-in-out infinite;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.4)) drop-shadow(0 0 10px rgba(95,182,218,.45))}
@keyframes wingflap{0%,100%{transform:scaleX(1) scaleY(1)}50%{transform:scaleX(.9) scaleY(1.06)}}
@media (max-width:720px){.wingy-char{width:108px}.wingy-sprite{width:108px}}
.wingy-bubble{position:absolute;right:18px;bottom:118px;width:288px;z-index:3600;background:#ffffe1;color:#000;
  box-shadow:var(--bo);padding:12px 12px 10px;font-size:13px;line-height:1.45}
.wingy-bubble::after{content:"";position:absolute;right:36px;bottom:-12px;border:7px solid transparent;border-top-color:#ffffe1;filter:drop-shadow(0 1px 0 #0a0a0a)}
.wingy-bubble .wb-x{position:absolute;top:3px;right:5px;cursor:inherit;color:#666;font-size:12px}
.wingy-bubble .wb-msg b{font-weight:bold}
.wb-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.wb-btn{font-family:var(--ui);font-size:12px;background:var(--gray);box-shadow:var(--bo1);padding:3px 8px;cursor:inherit;border:0}
.wb-btn:active{box-shadow:var(--bi1)}
.wb-step{font-size:11px;color:#666;margin-top:7px}
.wb-input{display:flex;gap:5px;margin-top:9px}
.wb-input .field{flex:1;min-width:0}
.wb-input .btn{min-height:0;padding:3px 10px}
@media (max-width:560px){.wingy-bubble{width:220px}}

@media (max-width:720px){
  body{font-size:13px}
  .icon{width:74px}
  .win{left:1vw !important;right:1vw;width:98vw !important}
  .tray-now,.tray-net{display:none}
  .boot-log{min-height:54vh;max-height:54vh;font-size:17px}
}