/* ============================================================
   FAMILY PC 99 — system chrome
   Late-90s operating system look: bevels, silver chrome, teal
   desktop, tactile states. All original hand-authored CSS.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: #1c2b33;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #000;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
  touch-action: manipulation;
}

/* ---------- scaled stage (mobile & small windows stay usable) ---------- */
#fitwrap { position: fixed; inset: 0;
  background:
    radial-gradient(120% 100% at 50% 0%, #35505c 0%, #22343d 45%, #131e24 100%);
}
#stage {
  position: absolute; left: 50%; top: 50%; width: 1024px; height: 700px; flex: none;
  background: #008080;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  box-shadow: 0 18px 70px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4);
  border-radius: 6px;
  overflow: hidden;
  outline: 10px solid #23282b; outline-offset: 0px; /* monitor bezel feel */
}
/* when viewport is narrower/shorter than design size JS sets --s scale */

.boot-layer { position: absolute; inset: 0; background: #000; z-index: 5000; }
[hidden] { display: none !important; }

/* ============================ BOOT POST ============================ */
#boot-post {
  color: #d8d8d8; font-family: "Courier New", monospace; font-size: 13px;
  padding: 26px 34px; line-height: 1.55; letter-spacing: .02em;
  background: #000; white-space: pre-wrap;
}
#boot-post .dim { color: #8a8a8a; }
#boot-post .hi { color: #ffe89a; }
#boot-post .ok { color: #7fe07f; }

/* ============================ OS SPLASH ============================ */
#boot-os { overflow: hidden;
  background: linear-gradient(#000006 0%, #101a38 30%, #27344f 62%, #6a86a5 88%, #9fb2c4 100%);
}
.os-logo { position:absolute; left:64px; top:96px; z-index:3; }
.os-flagflag { display:grid; grid-template-columns:19px 19px; gap:2px; transform: skewY(-4deg); margin-bottom:18px; filter: drop-shadow(2px 3px 2px rgba(0,0,0,.5)); }
.ff { width:19px; height:19px; border-radius:2px; opacity:.94; }
.ff.r{background:#d23b2e;} .ff.g{background:#3a9c3a;} .ff.b{background:#2c58c4;} .ff.y{background:#eec43d;}
.ff.g, .ff.y { transform: skewY(8deg); }
.os-brand { font-size:40px; color:#fff; font-weight:bold; letter-spacing:.01em; text-shadow: 2px 3px 3px rgba(0,0,0,.55); }
.os-brand em { color:#ffd24a; font-style:italic; }
.os-ver { color:#cfe0f0; margin-top:6px; font-size:14px; letter-spacing:.14em; text-transform:uppercase; }
.os-clouds { position:absolute; inset:0; z-index:1; opacity:.8;}
.cloud { position:absolute; height:60px; border-radius:60px; filter: blur(14px);
  background: radial-gradient(50% 120% at 50% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);}
.c1{width:420px;left:-80px;top:49%;animation:drift 14s linear infinite;}
.c2{width:520px;left:180px;top:63%;opacity:.75;animation:drift 19s linear infinite 2s;}
.c3{width:340px;left:520px;top:52%;opacity:.55;animation:drift 11s linear infinite 1s;}
@keyframes drift { from { transform: translateX(-160px);} to { transform: translateX(1240px);} }
.swoosh { position:absolute; left:52%; top:38%; width:520px; height:150px; border-radius:50%;
  border-bottom:16px solid rgba(255,214,110,.65); border-top:16px solid transparent;
  transform: rotate(-14deg); filter: blur(2px);
  animation: swooshmove 7s ease-in-out infinite alternate; }
@keyframes swooshmove { from{transform:rotate(-17deg) translateY(6px)} to{transform:rotate(-10deg) translateY(-8px)} }
.os-progress { position:absolute; left:64px; bottom:74px; width:230px; height:16px; z-index:3;
  border:2px solid #5b6b83; background:#0b1226; border-radius:2px; box-shadow: inset 2px 2px 4px rgba(0,0,0,.7); }
.os-progress i { display:block; height:100%; width:0%;
  background: repeating-linear-gradient(90deg,#59d0ff 0 8px, #2f7dd1 8px 12px);
  animation: osbar 7.5s linear forwards; }
@keyframes osbar { 0%{width:2%} 12%{width:14%} 30%{width:22%} 44%{width:47%} 70%{width:66%} 100%{width:100%} }
.os-foot { position:absolute; left:66px; bottom:48px; color:#bcd0e4; z-index:3; }

/* ============================ DESKTOP ============================ */
#desktop { position:absolute; inset:0; bottom:28px; }
#wallpaper { position:absolute; inset:0;
  background:
    radial-gradient(140% 110% at 78% 112%, rgba(0,0,0,.32) 0 46%, transparent 47%),
    #008080;
}
/* classic subtle tile pattern overlay */
#wallpaper::after { content:""; position:absolute; inset:0; opacity:.35; mix-blend-mode:multiply;
  background-image:
    linear-gradient(45deg, rgba(0,64,64,.25) 25%, transparent 25%, transparent 75%, rgba(0,64,64,.25) 75%),
    linear-gradient(45deg, rgba(0,64,64,.25) 25%, transparent 25%, transparent 75%, rgba(0,64,64,.25) 75%);
  background-size: 32px 32px; background-position: 0 0, 16px 16px;
}
#wallpaper.wp-waves::after { background-image:none;
  background:
   radial-gradient(120% 90% at 10% 115%, rgba(255,190,84,.42), transparent 60%),
   radial-gradient(130% 95% at 90% 118%, rgba(255,140,60,.38), transparent 65%), #00726e;
}
#wallpaper.wp-weave::after { background-image:
  repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 6px),
  repeating-linear-gradient(90deg, rgba(0,30,30,.09) 0 2px, transparent 2px 6px);
  opacity:1; mix-blend-mode:normal;
}

#icons { position:absolute; top:12px; left:8px; right:0; bottom:0; }
#windows { position:absolute; inset:0; z-index:10; pointer-events:none; }
#windows > .window { pointer-events:auto; }
.dicon { width:76px; padding:5px 2px 4px; margin:0 0 7px 3px; border-radius:2px;
  display:flex; flex-direction:column; align-items:center; gap:4px; border:1px dotted transparent; }
.dicon svg, .dicon img { width:34px; height:34px; image-rendering:auto; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.4)); }
.dicon span { color:#fff; text-align:center; line-height:1.15; font-size:11px;
  text-shadow: 1px 1px 2px #000, 0 0 3px rgba(0,0,0,.6); max-width:74px; word-break:break-word;}
.dicon.selected { background: rgba(22,66,139,.87); border-color:dotted #fff; }
.dicon.selected span { color:#fff; background:rgba(22,66,139,.0); }
.dicon:focus-visible { outline:1px dotted #fff; outline-offset:-1px; }

#marquee { position:absolute; border:1px dotted #fff; background:rgba(16,35,139,.22); z-index:400; pointer-events:none;}

/* ============================ WINDOWS ============================ */
.window { position:absolute; min-width:180px; min-height:110px;
  background:#c0c0c0; padding:3px;
  border-top:1px solid #dfdfdf; border-left:1px solid #dfdfdf;
  border-right:1px solid #000; border-bottom:1px solid #000;
  box-shadow: 1px 1px 0 #6d6d6d inset, -1px -1px 0 #808080 inset, 3px 3px 6px rgba(0,0,0,.35);
  display:flex; flex-direction:column; }
.window.inactive .titlebar { background: linear-gradient(90deg,#c8c4bc,#bdb7ac); color:#777; }
.window.inactive .tb-btn i { background:#c0c0c0; }
.window.dragging, .window.resizing { user-select:none; }
.window.dragging iframe, .window.resizing iframe { pointer-events:none; }
.window.maximized { box-shadow:none; }

.titlebar { height:22px; flex:none; display:flex; align-items:stretch; gap:3px; padding:2px 2px 2px 3px;
  background: linear-gradient(90deg,#00016a 0%, #1236ad 60%, #3a6bd6 92%, #7ba2e8 100%);
  color:#fff; font-weight:bold; letter-spacing:.02em; cursor:default; touch-action:none;}
.window.plex .titlebar { cursor: move; }
.ti-icon { align-self:center; width:15px; height:15px; flex:none; display:grid; place-items:center;}
.ti-text { flex:1; display:flex; align-items:center; overflow:hidden; white-space:nowrap; text-shadow:1px 1px 1px rgba(0,0,0,.6); font-size:12px;}
.tb-btns { display:flex; gap:2px; align-self:center; }
.tb-btn { width:16px; height:14px; background:#c0c0c0; border:none; position:relative; cursor:pointer; padding:0;
  border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #4a4a4a; border-bottom:1px solid #4a4a4a;
  box-shadow: 1px 1px 0 #000; }
.tb-btn:active { border-color:#4a4a4a #fff #fff #4a4a4a; box-shadow:none; }
.tb-btn i { position:absolute; inset:0; margin:auto; pointer-events:none;}
.tb-btn.min i { width:6px;height:2px;background:#000;bottom:2px;top:auto; }
.tb-btn.max i { width:8px;height:7px;border:1px solid #000;border-top-width:2px;background:#c0c0c0;}
.tb-btn.restore i { width:8px;height:7px;border:1px solid #000;border-top-width:2px; background:#c0c0c0;
  box-shadow:-2px -2px 0 -1px #000; }
.tb-btn.close i::before, .tb-btn.close i::after { content:""; position:absolute; left:1px; top:6px; width:12px; height:2px; background:#000;}
.tb-btn.close i::before { transform: rotate(45deg);} .tb-btn.close i::after { transform: rotate(-45deg);}
.tb-btn:hover { filter:brightness(1.06);}

.win-body { flex:1; min-height:0; position:relative; display:flex; flex-direction:column;
  border-top:1px solid #808080; border-left:1px solid #808080;
  border-right:1px solid #fff; border-bottom:1px solid #fff;
  background:#c0c0c0; padding:2px; }
.win-view { flex:1; min-height:0; overflow:hidden; background:#fff; position:relative;
  border-top:1px solid #808080; border-left:1px solid #808080;
  border-right:1px solid #fff; border-bottom:1px solid #fff; }
.win-statusbar { flex:none; display:flex; gap:0; margin-top:2px; font-size:11px; }
.sb-panel { padding:2px 6px; border-top:1px solid #808080; border-left:1px solid #808080;
  border-right:1px solid #fff; border-bottom:1px solid #fff; white-space:nowrap; overflow:hidden;}
.sb-grow { flex:1; }

.rs-edge { position:absolute; z-index:30; touch-action:none; }
.rs-n { top:-2px; left:6px; right:6px; height:5px; cursor:n-resize; }
.rs-s { bottom:-2px; left:6px; right:6px; height:5px; cursor:s-resize; }
.rs-e { right:-2px; top:6px; bottom:6px; width:5px; cursor:e-resize; }
.rs-w { left:-2px; top:6px; bottom:6px; width:5px; cursor:w-resize; }
.rs-ne { top:-2px; right:-2px; width:10px; height:10px; cursor:ne-resize; }
.rs-nw { top:-2px; left:-2px; width:10px; height:10px; cursor:nw-resize; }
.rs-se { bottom:-2px; right:-2px; width:12px; height:12px; cursor:se-resize; }
.rs-sw { bottom:-2px; left:-2px; width:10px; height:10px; cursor:sw-resize; }
.window.maximized .rs-edge { display:none; }

/* menubar / dropdown menus inside windows */
.menubar { flex:none; display:flex; background:#c0c0c0; padding:1px 2px; border-bottom:1px solid #dbdbdb; }
.menubar > button { border:none; background:transparent; font:inherit; padding:3px 7px; cursor:default; }
.menubar > button.open, .menubar > button:hover.open, .menubar > button[data-open="1"] { background:#000080; color:#fff; }
.dropdown { position:absolute; z-index:600; background:#c0c0c0; min-width:150px; padding:2px;
  border-top:1px solid #dfdfdf; border-left:1px solid #dfdfdf; border-right:1px solid #000; border-bottom:1px solid #000;
  box-shadow: 1px 1px 0 #6d6d6d inset, -1px -1px 0 #808080 inset, 3px 3px 5px rgba(0,0,0,.3);}
.dropdown button { display:flex; width:100%; border:none; background:transparent; font:inherit; padding:3px 18px 3px 22px; text-align:left; cursor:default; position:relative;}
.dropdown button:hover:not([disabled]) { background:#000080; color:#fff; }
.dropdown button[disabled] { color:#888; }
.dropdown hr { border:none; border-top:1px solid #808080; border-bottom:1px solid #fff; margin:3px 2px; }
.dropdown button .chk::before { content:"✔"; position:absolute; left:7px; }
.dropdown button .subar { position:absolute; right:6px; }

/* ============================ FORM CONTROLS ============================ */
.btn { font:inherit; min-width:68px; padding:4px 10px; background:#c0c0c0; border:none; cursor:pointer;
  border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #4a4a4a; border-bottom:1px solid #4a4a4a;
  box-shadow: 1px 1px 0 #000; }
.btn:active, .btn.pressed { border-color:#4a4a4a #fff #fff #4a4a4a; box-shadow:none; padding:5px 9px 3px 11px; }
.btn:focus-visible { outline:1px dotted #000; outline-offset:-4px; }
.btn.defaultbtn { box-shadow: 1px 1px 0 #000, inset 0 0 0 1px #000; font-weight:bold; }
.field { font:inherit; background:#fff; padding:3px 5px; border:none;
  border-top:1px solid #4a4a4a; border-left:1px solid #4a4a4a; border-right:1px solid #fff; border-bottom:1px solid #fff;
  box-shadow: 1px 1px 0 #808080 inset, -1px -1px 0 #808080 inset;}
.field:focus { outline:none; }
select.field { padding:2px; }
.groupbox { border:1px solid #808080; border-right-color:#fff; border-bottom-color:#fff; padding:10px 10px 8px; position:relative; margin-top:8px;}
.groupbox>legend, .groupbox>.gblab { position:absolute; top:-8px; left:8px; background:#c0c0c0; padding:0 4px; }
.radioline, .checkline { display:flex; align-items:center; gap:6px; padding:3px 2px; }
.radioline input, .checkline input { accent-color:#000080; }

.dialog-body { padding:14px 14px 8px; display:flex; gap:14px; background:#c0c0c0; }
.dlg-icon { width:34px; height:34px; flex:none; }
.dlg-text { max-width:340px; line-height:1.5; }
.dlg-actions { display:flex; justify-content:flex-end; gap:8px; padding:8px 14px 14px; background:#c0c0c0; }

/* ============================ CONTEXT MENU / TOOLTIP ============================ */
#ctxmenu .dropdown { position:static; box-shadow:none; border:none; }
.tooltip { position:absolute; z-index:900; background:#ffffe1; border:1px solid #000; padding:3px 7px; font-size:11px;
  box-shadow:2px 2px 3px rgba(0,0,0,.3); pointer-events:none; max-width:260px;}

/* ============================ TASKBAR ============================ */
#taskbar { position:absolute; left:0; right:0; bottom:0; height:28px; z-index:3000; display:flex; align-items:stretch; gap:3px;
  background:#c0c0c0; border-top:1px solid #fff; box-shadow: 0 -1px 0 #000 inset; padding:2px 2px 2px 3px; }
.tb-sep { width:3px; border-left:1px solid #808080; border-right:1px solid #fff; margin:2px 1px; }
#startbtn { display:flex; align-items:center; gap:4px; font-weight:bold; font-size:12px; padding:1px 7px 1px 4px;
  background:#c0c0c0; border:none; cursor:pointer;
  border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #4a4a4a; border-bottom:1px solid #4a4a4a;
  box-shadow: 1px 1px 0 #000; }
#startbtn:active, #startbtn.open { border-color:#4a4a4a #fff #fff #4a4a4a; box-shadow:none; }
.winflag { display:inline-grid; grid-template-columns:7px 7px; gap:1px; transform:skewY(-6deg); margin-right:1px;}
.winflag i { width:7px; height:7px; border-radius:1px;}
.w-r{background:#d23b2e} .w-g{background:#3a9c3a} .w-b{background:#2c58c4} .w-y{background:#eec43d}
.w-g,.w-y{transform:skewY(9deg)}
#taskbuttons { flex:1; display:flex; gap:3px; overflow:hidden; padding:0 2px; min-width:0;}
.taskbtn { max-width:164px; min-width:40px; flex:0 1 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  display:flex; align-items:center; gap:5px; padding:0 6px; background:#c0c0c0; border:none; font:inherit; cursor:pointer;
  border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #4a4a4a; border-bottom:1px solid #4a4a4a;
  box-shadow: 1px 1px 0 #000; }
.taskbtn.active { font-weight:bold; background-image:linear-gradient(rgba(255,255,255,.35),rgba(0,0,0,.06));
  border-color:#4a4a4a #fff #fff #4a4a4a; box-shadow:none; background-color:#bdbdbd; }
.taskbtn svg, .taskbtn img { width:14px; height:14px; flex:none; }
#tray { display:flex; align-items:center; gap:5px; padding:0 8px 0 6px; margin-left:2px;
  border-top:1px solid #808080; border-left:1px solid #808080; border-bottom:1px solid #fff; border-right:1px solid #fff; }
#volbtn { background:none; border:none; cursor:pointer; padding:1px; display:flex; }
#trayclock { font-size:11px; padding:0 2px; min-width:54px; text-align:center; }

/* ============================ START MENU ============================ */
#startmenu { position:absolute; left:2px; bottom:29px; z-index:3500; width:196px;
  background:#c0c0c0; padding:3px; display:flex; border-top:1px solid #dfdfdf; border-left:1px solid #dfdfdf;
  border-right:1px solid #000; border-bottom:1px solid #000;
  box-shadow: 1px 1px 0 #6d6d6d inset, -1px -1px 0 #808080 inset, 4px 4px 8px rgba(0,0,0,.4);}
.sm-banner { width:26px; flex:none; margin:-3px; margin-right:3px; border-right:1px solid #808080;
  background: linear-gradient(#08237a, #0c3fae);
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden;}
.sm-banner b { writing-mode:vertical-rl; transform:rotate(180deg); color:#cfe0ff; font-size:15px; font-weight:bold;
  letter-spacing:2px; padding:10px 3px; text-shadow:1px 1px 2px #000;}
.sm-items { flex:1; display:flex; flex-direction:column; padding:2px 0; }
.sm-item { display:flex; align-items:center; gap:9px; padding:5px 8px; font:inherit; border:none; background:none; cursor:pointer; text-align:left; width:100%;}
.sm-item:hover:not(.disabled), .sm-item.hot { background:#000080; color:#fff; }
.sm-item .smic { width:22px; height:22px; flex:none; display:grid; place-items:center; }
.sm-item .arr { margin-left:auto; font-size:9px; }
.sm-item.bold > b { font-weight:bold; }
.sm-hr { border:none; border-top:1px solid #808080; border-bottom:1px solid #fff; margin:3px 2px; }
.submenu { position:absolute; z-index:3600; }

/* ============================ SHUTDOWN / WAIT ============================ */
#shutdown-screen { background:#000; color:#ffb000; font-family:"Courier New",monospace;
  display:grid; place-items:center; text-align:center; cursor:pointer;}
.sd-box h2 { font-size:30px; line-height:1.4; letter-spacing:.03em; text-shadow:0 0 12px rgba(255,176,0,.6); }
.sd-icon { font-size:54px; margin-bottom:26px; filter:saturate(.4) brightness(1.2); }
.sd-box p { margin-top:26px; color:#7a7a7a; font-size:13px; }
#wait-screen { background:#0a1428; color:#dbe6f5; display:grid; place-items:center; font-family:inherit; font-size:15px;}

/* ============================ BUSY CURSOR ============================ */
body.busy-cursor, body.busy-cursor * { cursor: wait !important; }
#hourglass-indicator { position:absolute; z-index:4999; right:10px; top:8px; background:#ffffe1; border:1px solid #000;
  padding:3px 8px; font-size:11px; box-shadow:2px 2px 3px rgba(0,0,0,.35); }
#hourglass-indicator span { display:inline-block; animation: spin180 .8s steps(2) infinite; }
@keyframes spin180 { to { transform: rotate(180deg); } }

/* generic scrollbar coloring (webkit) in period gray */
::-webkit-scrollbar { width:16px; height:16px; }
::-webkit-scrollbar-track { background:#dfdfdf;
  background-image: radial-gradient(#c0c0c0 1px, transparent 1px); background-size:4px 4px;}
::-webkit-scrollbar-thumb { background:#c0c0c0; border-top:1px solid #fff; border-left:1px solid #fff;
  border-right:1px solid #4a4a4a; border-bottom:1px solid #4a4a4a; box-shadow:1px 1px 0 #000; }
::-webkit-scrollbar-button:single-button { background:#c0c0c0; height:16px; width:16px;
  border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #4a4a4a; border-bottom:1px solid #4a4a4a;
  box-shadow:1px 1px 0 #000; background-repeat:no-repeat; background-position:center; }
::-webkit-scrollbar-button:single-button.vertical:decrement { background-image: conic-gradient(from -45deg at 50% 60%, #000 25%, transparent 25% 75%, #000 75%); }
::-webkit-scrollbar-button:single-button.vertical:increment { background-image: conic-gradient(from 135deg at 50% 40%, #000 25%, transparent 25% 75%, #000 75%); }