/* floople.ca in the Windows 95 style: sign-in box, desktop, taskbar, Start menu, game windows.
   Window frames, menus and dialogs come from /newbeat/css/nbtm.css (loaded first on the desktop). */
:root {
  --face: #c0c0c0; --hi: #ffffff; --lite: #dfdfdf; --shadow: #808080; --dark: #000000;
  --title: #000080; --title2: #1084d0; --desk: #008080;
  --font: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif;
  --raised: inset -1px -1px var(--dark), inset 1px 1px var(--hi), inset -2px -2px var(--shadow), inset 2px 2px var(--lite);
  --pressed: inset -1px -1px var(--hi), inset 1px 1px var(--dark), inset -2px -2px var(--lite), inset 2px 2px var(--shadow);
  --sunken: inset 1px 1px var(--shadow), inset -1px -1px var(--hi), inset 2px 2px var(--dark), inset -2px -2px var(--lite);
}

/* ---------------------------------------------------------------- sign-in box */
body.signin { margin: 0; min-height: 100vh; background: var(--desk); display: flex; align-items: center; justify-content: center;
  font: 11px var(--font); color: #000; padding: 16px; box-sizing: border-box; }
.win95 { background: var(--face); padding: 3px; box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--lite), inset -2px -2px var(--shadow), inset 2px 2px var(--hi); }
.win95 .title { height: 18px; display: flex; align-items: center; padding: 0 4px; color: #fff; font-weight: bold;
  background: linear-gradient(90deg, var(--title), var(--title2)); }
.logon { width: 100%; max-width: 420px; margin: 0; }
.logon-body { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px 12px; padding: 14px 10px 12px; align-items: start; }
.logon-fields p { margin: 0 0 10px; line-height: 1.35; }
.logon-fields label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.logon-fields label span { width: 64px; flex: none; }
.logon-fields input { flex: 1; min-width: 0; font: 11px var(--font); border: 0; padding: 3px 4px; height: 21px; background: #fff; box-shadow: var(--sunken); }
.logon-fields input:focus { outline: none; }
.logon-error { color: #800000; font-weight: bold; }
.logon-buttons { display: flex; flex-direction: column; gap: 6px; }
.signin button { font: 11px var(--font); background: var(--face); border: 0; min-width: 75px; min-height: 23px; padding: 3px 10px; box-shadow: var(--raised); color: #000; }
.signin button.default { outline: 1px solid #000; outline-offset: -1px; }
.signin button:active { box-shadow: var(--pressed); }
@media (max-width: 420px) { .logon-body { grid-template-columns: 1fr; } .logon-body > img { display: none; } .logon-buttons { flex-direction: row; justify-content: flex-end; } }

/* ---------------------------------------------------------------- desktop */
body.desk { margin: 0; height: 100vh; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; }
#shell { position: relative; width: 100vw; height: 100vh; display: flex; flex-direction: column; flex: none; transform-origin: center center; background: var(--desk); }
#fdesk { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--desk); }
.noscript { color: #fff; padding: 16px; font-size: 16px; position: fixed; top: 0; }

.ficon { position: absolute; width: 86px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; text-align: center;
  font: 11px var(--font); cursor: default; outline: none; padding: 2px 0; }
.ficon img { width: 32px; height: 32px; }
.ficon span { padding: 0 2px; line-height: 13px; max-width: 84px; overflow-wrap: break-word; }
.ficon.sel span { background: var(--title); outline: 1px dotted #ff0; }
.ficon.sel img { filter: sepia(1) hue-rotate(190deg) saturate(4) brightness(.7); }
.ficon:focus-visible span { outline: 1px dotted #fff; }

/* ---------------------------------------------------------------- taskbar */
#taskbar { height: 28px; flex: none; background: var(--face); box-shadow: inset 0 1px var(--lite), inset 0 2px var(--hi);
  display: flex; align-items: center; gap: 3px; padding: 2px 2px 0; position: relative; z-index: 100000; font: 11px var(--font); }
#taskbar button { font: bold 11px var(--font); background: var(--face); border: 0; height: 22px; padding: 0 4px; box-shadow: var(--raised);
  display: flex; align-items: center; gap: 3px; color: #000; flex: none; }
#taskbar button.down { box-shadow: var(--pressed); background-image: repeating-conic-gradient(var(--face) 0 25%, var(--hi) 0 50%); background-size: 2px 2px; }
#taskbar .startbtn { padding: 0 5px 0 3px; }
#taskbar .startbtn img { width: 16px; height: 16px; }
#taskbar .tasks { flex: 1; display: flex; gap: 3px; min-width: 0; overflow: hidden; }
#taskbar .task { font-weight: normal; width: 160px; min-width: 40px; flex-shrink: 1; overflow: hidden; justify-content: flex-start; }
#taskbar .task img { width: 16px; height: 16px; flex: none; }
#taskbar .task span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#taskbar .task.active { font-weight: bold; }
#taskbar .tray { height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 8px; box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--hi); flex: none; }
#taskbar .tray .who { color: #000; }

/* ---------------------------------------------------------------- Start menu */
.menu.startmenu { padding-left: 24px; min-width: 190px; }
.menu.startmenu::before { content: "Floople"; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 21px;
  background: linear-gradient(0deg, #000080, #808080); color: #c0c0c0; font: bold 16px Arial, sans-serif; letter-spacing: 1px;
  writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; padding: 6px 0; box-sizing: border-box; }
.menu .item.hasicon { padding-left: 28px; }
.menu.startmenu > .item, .menu.startmenu > .item.hasicon { min-height: 40px; align-items: center; padding: 4px 24px 4px 48px; }
.menu.startmenu > .item .mico { width: 32px; height: 32px; left: 8px; top: 50%; margin-top: -16px; }
.menu .item .mico { position: absolute; left: 4px; top: 50%; width: 16px; height: 16px; margin-top: -8px; }

/* ---------------------------------------------------------------- windows holding a game or a page */
.framewin .body { display: flex; background: #000; }
.framewin iframe { flex: 1; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.framewin .cover { position: absolute; inset: 0; display: none; }
.win.inactive .cover, body.win-dragging .framewin .cover { display: block; }

/* folder window (New Beat Trancemission) */
.folderwin .body { display: flex; flex-direction: column; }
.folderwin .icons { flex: 1; background: #fff; box-shadow: var(--sunken); margin: 0 0 2px; padding: 8px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; overflow: auto; }
.folderwin .ficon { position: static; color: #000; }
.folderwin .ficon.sel span { color: #fff; }

/* Shut Down box */
.shutdown .body { padding: 12px; }
.shutdown .row { align-items: flex-start; gap: 14px; }
.shutdown .opts label { padding: 3px 0; }

/* ---------------------------------------------------------------- Netscape Navigator 3 / Internet Explorer 3 */
.browserwin .body { display: flex; flex-direction: column; background: var(--face); }
.browserwin .menubar { background: var(--face); }
.b-head { display: flex; flex: none; border-top: 1px solid var(--shadow); box-shadow: inset 0 1px var(--hi); }
.b-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.b-tools { display: flex; gap: 0; padding: 2px 3px; align-items: stretch; flex-wrap: nowrap; overflow: hidden; }
.b-tools[hidden], .b-loc[hidden], .b-dir[hidden], .b-status[hidden] { display: none; }
.b-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 46px; padding: 2px 3px !important; font: 11px var(--font) !important; flex: none; }
.b-tool .b-ic { width: 24px; height: 22px; display: block; background-repeat: no-repeat; background-position: center; }
.b-tool:disabled .b-ic { filter: grayscale(1) opacity(.45); }
.b-loc { display: flex; align-items: center; gap: 6px; padding: 3px 6px; }
.b-addrlbl { flex: none; min-width: 48px; }
.b-addr { flex: 1; min-width: 0; font: 11px var(--font); border: 0; height: 21px; padding: 2px 4px; background: #fff; box-shadow: var(--sunken); }
.b-addr:focus { outline: none; }
.b-dir { display: flex; gap: 3px; padding: 2px 6px 4px; overflow: hidden; align-items: center; }
.b-dirbtn { font: 11px var(--font) !important; min-height: 20px !important; padding: 1px 8px !important; flex: none; }
.b-logo { flex: none; display: flex; align-items: center; justify-content: center; padding: 3px; }
.b-logo canvas { display: block; box-shadow: var(--sunken); }
.b-view { position: relative; flex: 1; min-height: 0; display: flex; margin: 0 2px; box-shadow: var(--sunken); padding: 2px; background: #fff; }
.browserwin .b-page { flex: 1; width: 100%; height: 100%; border: 0; display: block; }
/* a page with no background colour of its own shows the browser's default: grey in Navigator 3, white in IE 3 */
.browserwin.netscape .b-page, .browserwin.netscape .b-view { background: #c0c0c0; }
.browserwin.ie .b-page, .browserwin.ie .b-view { background: #fff; }
.b-status { display: flex; align-items: center; gap: 4px; height: 22px; flex: none; padding: 2px 2px 0; }
.b-stext { flex: 1; min-width: 0; height: 18px; line-height: 16px; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--hi); }
.b-meter { width: 120px; height: 18px; flex: none; box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--hi); padding: 3px; overflow: hidden; }
.b-meterfill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--title) 0 8px, transparent 8px 10px); }
.b-meter.on .b-meterfill { animation: b-progress 3s ease-out forwards; }
@keyframes b-progress { from { width: 0; } to { width: 92%; } }
.b-key, .b-mailic, .b-zone { width: 22px; height: 18px; flex: none; background-repeat: no-repeat; background-position: center; box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--hi); }
.b-src { margin: 0; flex: 1; overflow: auto; background: #fff; padding: 6px; font: 12px "Courier New", monospace; white-space: pre-wrap; }
.srcwin .body { display: flex; }

/* Internet Explorer 3: flat "coolbar" buttons that rise on hover, the "e" at the end of the toolbar */
.browserwin.ie .b-band { display: flex; align-items: stretch; }
.browserwin.ie .b-band .b-tools { flex: 1; }
.browserwin.ie .b-tool { box-shadow: none !important; background: transparent; min-width: 50px; }
.browserwin.ie .b-tool:hover:not(:disabled) { box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--hi) !important; }
.browserwin.ie .b-tool:active:not(:disabled) { box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--hi) !important; }
.browserwin.ie .b-loc, .browserwin.ie .b-dir, .browserwin.ie .b-band { border-top: 1px solid var(--shadow); box-shadow: inset 0 1px var(--hi); }
.browserwin.ie .b-dirbtn { box-shadow: none !important; background: transparent; }
.browserwin.ie .b-dirbtn:hover { box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--hi) !important; }
.browserwin.ie .b-linkslbl { padding-right: 6px; }
.browserwin.ie .b-logo canvas { box-shadow: none; }

/* WinPicView Pro 95: folder tree, thumbnails, Imaging, ActiveMovie, slide show */
.picwin .body, .imagingwin .body { display: flex; flex-direction: column; background: var(--face); }
.picwin .toolbar .tb.on { box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--hi); }
.pv-main { flex: 1; min-height: 0; display: flex; gap: 3px; padding: 2px 2px 0; }
.pv-tree { width: 210px; flex: none; background: #fff; box-shadow: var(--sunken); overflow: auto; padding: 4px 2px; }
.pv-row { display: flex; align-items: center; gap: 3px; height: 18px; white-space: nowrap; cursor: default; }
.pv-row img { width: 16px; height: 16px; flex: none; }
.pv-row .pv-name { padding: 0 2px; }
.pv-row.sel .pv-name { background: var(--title); color: #fff; }
.pv-exp { width: 9px; height: 9px; flex: none; border: 1px solid var(--shadow); background: #fff; font: 9px/8px Arial, sans-serif; text-align: center; color: #000; }
.pv-exp.none { visibility: hidden; }
.pv-kids[hidden] { display: none; }
.pv-grid { --t: 88px; flex: 1; min-width: 0; background: #fff; box-shadow: var(--sunken); overflow: auto; padding: 8px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px 6px; outline: none; }
.pv-tile { width: calc(var(--t) + 18px); display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: default; }
.pv-box { position: relative; width: var(--t); height: var(--t); display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--lite); }
.pv-box img { max-width: calc(var(--t) - 6px); max-height: calc(var(--t) - 6px); display: block; }
.pv-box img.pv-folder { width: 32px; height: 32px; }
.pv-vid { position: absolute; right: 3px; bottom: 3px; background: #000; color: #fff; font: bold 9px Arial, sans-serif; padding: 0 2px; }
.pv-tile > span { max-width: 100%; text-align: center; line-height: 13px; max-height: 26px; overflow: hidden; overflow-wrap: anywhere; padding: 0 2px; }
.pv-tile.sel > span { background: var(--title); color: #fff; }
.pv-tile.sel .pv-box { outline: 1px dotted #000; outline-offset: 1px; }
.pv-status > div:last-child { flex: 1.4; }
.statusbar[hidden] { display: none; }
.im-tools { gap: 2px; }
.im-btn { font: 11px var(--font) !important; min-height: 21px !important; padding: 1px 8px !important; }
.im-view { flex: 1; min-height: 0; overflow: auto; display: flex; margin: 0 2px; padding: 4px; background: var(--shadow); box-shadow: var(--sunken); }
.im-view img { margin: auto; flex: none; display: block; background: #fff; box-shadow: 2px 2px #000; }
.imagingwin .statusbar > div.fixed { width: 90px; }
.moviewin .body { display: flex; background: #000; }
.moviewin video { flex: 1; width: 100%; min-height: 0; background: #000; }
.pv-show { position: fixed; inset: 0; z-index: 300000; background: #000; display: flex; align-items: center; justify-content: center; cursor: none; outline: none; }
.pv-show img { display: block; }
.pv-cap { position: absolute; left: 10px; bottom: 8px; color: #666; font: 12px var(--font); }
.pv-note { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); color: #ccc; font: 14px var(--font); background: rgba(0, 0, 0, .6); padding: 4px 10px; opacity: 0; transition: opacity .3s; }
.pv-note.on { opacity: 1; }

/* RealPlayer 5 */
.realwin .body { display: flex; flex-direction: column; background: var(--face); }
.r-top { display: flex; gap: 8px; padding: 6px; }
.r-logo { width: 96px; height: 72px; flex: none; background: radial-gradient(circle at 35% 30%, #4a7ad8, #002a80 70%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: var(--sunken); font: italic bold 26px Arial, sans-serif; letter-spacing: -1px; }
.r-logo small { font: bold 10px Arial, sans-serif; letter-spacing: 1px; font-style: normal; }
.r-info { flex: 1; min-width: 0; background: #000; color: #0f0; font: 11px var(--font); padding: 6px; box-shadow: var(--sunken); display: flex; flex-direction: column; gap: 4px; }
.r-info div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-info b { color: #8f8; font-weight: normal; }
.r-ctl { display: flex; align-items: center; gap: 4px; padding: 0 6px 4px; }
.r-btn { width: 30px; min-height: 24px !important; padding: 0 !important; font: 12px Arial, sans-serif !important; }
.r-pos { flex: 1; min-width: 0; }
.r-vol { width: 64px; }
.r-spk { padding: 0 2px; }
.r-status { display: flex; justify-content: space-between; gap: 6px; padding: 2px 6px 4px; }
.r-status span { flex: 1; padding: 1px 4px; box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--hi); white-space: nowrap; }
.r-status .r-time { flex: none; }