@font-face {
  font-family: 'ARIALBI_LOCAL';
  src: url('ARIALBI.TTF') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'XPSystem';
  src: url('windows-xp-tahoma.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  /* XP-like taskbar height */
  --taskbar-height: 40px;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body,#desktop{height:100%;width:100%}
body{font-family: XPSystem, system-ui, sans-serif;background:#000;overflow:hidden;-webkit-user-select:none;-ms-user-select:none;user-select:none;}

/* Desktop area */
#desktop{position:relative;touch-action:none}

/* Wallpaper */
#wallpaper{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:0;
}

/* Startup overlay (full screen) */
#startup{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  z-index:9998;
}

/* Welcome screen - full screen background */
#welcome{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9997;
  opacity:0;
  pointer-events:none;
  transition:opacity 360ms ease;
  background:transparent;
}
.welcome-bg-full{
  position:absolute;
  inset:0;
  z-index:1;
}
.welcome-bg-full img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Logon screen styles */
#logon{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99985;
  pointer-events:none;
  opacity:0;
  transition:opacity 260ms ease;
  background:transparent;
}
#logon[aria-hidden="false"]{
  pointer-events:auto;
  opacity:1;
}
.logon-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:1;
}
.logon-card{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  justify-content:center;
  /* remove decorative card so the background's own text/artwork is used */
  background:transparent;
  padding:8px 0;
  border-radius:0;
  box-shadow:none;
  pointer-events:auto;
  min-width:220px;
  /* place the profile area to the right side to match the logon background artwork */
  margin-left:auto;
  margin-right:8vw;
}
/* keep the avatar visible but remove any text/borders from the clickable area */
.logon-user{
  width:120px;
  height:auto;
  image-rendering:pixelated;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  background:transparent;
  border:0;
  padding:0;
}
/* hide the username and instructions so only the background artwork's text remains visible */
.logon-username,
.logon-instructions{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Responsive: keep logon card compact on small screens */
@media (max-width:420px){
  /* keep logon card compact but larger avatar and nudged right for mobile */
  .logon-card{ padding:10px; gap:8px; min-width:140px; margin-left:auto; margin-right:6vw; }
  .logon-user{ width:140px; }
}

/* Fullscreen shutdown screen: ensure the shutdown image covers the entire viewport */
#fake-shutdown-screen{
  position:fixed;
  inset:0;
  z-index:100000;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
}
#fake-shutdown-screen img{
  width:100vw;
  height:100vh;
  object-fit:cover;
  display:block;
  image-rendering:pixelated;
  background:#000;
  margin:0;
  padding:0;
}

/* welcome text uses provided ARIALBI.TTF and lowercase */
.welcome-text{
  position:relative;
  z-index:2;
  font-family: 'ARIALBI_LOCAL', XPSystem, sans-serif;
  font-size:72px;
  color:#ffffff;
  text-shadow:0 2px 0 rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.45);
  letter-spacing:2px;
  text-transform:lowercase;
  pointer-events:none;
  line-height:1;
  text-align:center;
}

/* Recycle bin positioned bottom-right above the taskbar with caption */
#recycle{
  position:absolute;
  /* anchor firmly to the bottom-right inside the desktop area above the taskbar */
  right:16px;
  bottom: calc(var(--taskbar-height) + 8px);
  width:64px;
  z-index:50; /* ensure desktop icons sit above most UI but below start menu */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  user-drag:none;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:auto;
}
#recycle img{
  width:64px;
  height:64px;
  display:block;
  object-fit:contain;
  image-rendering:pixelated;
}
.recycle-label{
  font-family: XPSystem, system-ui, sans-serif;
  font-size:12px;
  color:#ffffff;
  text-shadow:0 1px 0 rgba(0,0,0,0.7);
  line-height:1;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}

/* Taskbar - XP-like compact sizing */
#taskbar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--taskbar-height);
  background: url('taskbar_background_color.png') repeat-x;
  display:flex;
  align-items:center;
  padding:0; /* remove default padding so edges align perfectly */
  gap:0;
  z-index:15;
  box-shadow:0 -2px 10px rgba(0,0,0,0.32);
}

/* Start button aligned flush to bottom-left corner and sized to be more prominent while staying flush */
#start-btn{
  height:var(--taskbar-height);
  /* increase width so the start button is larger but still anchored in the corner */
  width: calc(var(--taskbar-height) + 12px);
  min-width:44px;
  object-fit:cover; /* cover so the asset fills the box */
  margin:0;
  padding:0; /* remove inner padding so edges align perfectly */
  box-sizing:border-box;
  user-drag:none;
  -webkit-user-drag:none;
  cursor:pointer;
  display:block;
}

/* center area flexes between start and right */
#taskbar-center{flex:1; display:flex; align-items:center; justify-content:center; padding:0 8px}

/* right section aligned flush to bottom-right corner */
#taskbar-right{display:flex; align-items:center; justify-content:flex-end; padding-right:6px; min-width:120px}

/* size taskbar icons to fit the taskbar height precisely */
.tbar-img{
  height: calc(var(--taskbar-height) - 10px);
  margin:0 6px;
  user-drag:none;
  -webkit-user-drag:none;
}

/* specifically size the provided taskbar_section_3.png to sit perfectly in the corner */
#taskbar-right .tbar-img {
  height: calc(var(--taskbar-height) - 8px);
  width: auto;
  max-width: 140px; /* prevent overflow while keeping aspect */
}

/* START MENU (asset-driven layout) - header, middle row with two panels side-by-side, footer */
#start-menu{
  position:absolute;
  left:0;
  bottom:calc(var(--taskbar-height));
  width:auto;
  max-width:92vw;
  /* solid XP-like background so assets don't show transparent corners */
  background:#0b61a8;
  border:0;
  box-shadow:0 8px 30px rgba(0,0,0,0.45);
  border-radius:0;
  padding:0;
  z-index:160;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease, transform 180ms ease;
  transform-origin:left bottom;
  overflow:visible;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
}

/* header and footer use full width but constrained to viewport */
#start-menu .start-asset{
  width:100%;            /* force assets to fill the menu width so no transparent corners show */
  max-width:100%;
  height:auto;
  display:block;
  user-drag:none;
  -webkit-user-drag:none;
  image-rendering:pixelated;
  border-radius:0;       /* remove rounding so artwork sits flush */
  background:transparent; /* keep image content as-is but menu background hides transparency */
}

/* Footer row: place background artwork and overlay the two action buttons */
.start-footer-row{
  position:relative;
  width:100%;
  display:block;
}
.start-footer-bg{ display:block; width:100%; height:auto; object-fit:cover; pointer-events:none; }

/* buttons container sits on top of the footer artwork, aligned to the right */
.footer-buttons{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  gap:8px;
  align-items:center;
  pointer-events:auto;
}

/* button images sized to match the footer height while remaining crisp */
.footer-btn{
  height:36px;
  width:auto;
  display:block;
  object-fit:contain;
  image-rendering:pixelated;
  cursor:pointer;
  user-drag:none;
  -webkit-user-drag:none;
  -webkit-tap-highlight-color: transparent;
  background:transparent;
  border:0;
  padding:0;
}

/* Slightly reduce button size on smaller heights */
@media (max-height:700px){
  .footer-btn{ height:30px; }
}

/* Ensure footer buttons scale on narrow viewports */
@media (max-width:420px){
  .footer-buttons{ right:6px; gap:6px; }
  .footer-btn{ height:28px; }
}
#start-menu .start-middle-row > .start-left,
#start-menu .start-middle-row > .start-right{
  flex:1 1 0%;
  width:50%;             /* panels sit side-by-side and fill available width evenly */
  max-width:50%;
  height:auto;
  object-fit:cover;
  display:block;
}

/* middle row places left and right panels side-by-side */
#start-menu .start-middle-row{
  display:flex;
  flex-direction:row;
  gap:6px;
  align-items:flex-start;
  justify-content:center;
  width:100%;
}

/* left/right panel wrappers (use background artwork plus an icons container) */
.start-asset.start-left-panel,
.start-asset.start-right-panel{
  position:relative;
  flex:1 1 0%;
  max-width:50%;
  display:block;
  width:100%;
  min-height:120px; /* ensure some height to display icons */
  background:transparent;
  overflow:visible;
}

/* preserve the original panel artwork but let us overlay icons */
.start-asset .panel-bg{
  width:100%;
  height:auto;
  display:block;
  user-drag:none;
  -webkit-user-drag:none;
  image-rendering:pixelated;
  pointer-events:none;
}

/* container for icons inside panels */
.panel-icons{
  position:absolute;
  top:10px;
  left:8px;
  right:8px;
  bottom:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  justify-content:flex-start;
  padding:6px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* ensure icons are touch-friendly and scaled to panel */
.panel-icons img{
  /* fill the available icon column width so all items in left/right panels match exactly */
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  image-rendering:pixelated;
  user-drag:none;
  -webkit-user-drag:none;
  border-radius:0;
  box-sizing:border-box;
}

/* right-icons should match the same sizing as other panel icons so all items are uniform */
.right-icons img{
  /* smaller fixed size for more accurate XP-like right-panel items (reduced for compact XP look) */
  width:120px;
  max-width:120px;
  height:22px;
  display:block;
  object-fit:cover;
  image-rendering:pixelated;
  user-drag:none;
  -webkit-user-drag:none;
  border-radius:0;
}

/* If panel becomes narrow, reduce icon size and spacing */
@media (max-width:420px){
  .panel-icons{ gap:6px; padding:4px; top:6px; left:6px; right:6px; bottom:6px }
  .panel-icons img{ max-width:120px; }
  .right-icons img{ max-width:110px; }
}

/* mobile tweak: reduce spacing and ensure panels remain side-by-side where possible */
@media (max-width:420px){
  #start-menu{ left:4px; bottom:calc(var(--taskbar-height) + 6px); max-width:88vw; padding:4px; gap:6px; }
  #start-menu .start-middle-row{ gap:4px; }
  #start-menu .start-left,
  #start-menu .start-right{ max-width:calc(44vw - 12px); }
}

/* mobile tweak: keep it constrained but visible */
@media (max-width:420px){
  #start-menu{ left:4px; bottom:calc(var(--taskbar-height) + 6px); max-width:88vw; padding:4px; }
  #start-menu .start-asset-full{ max-width:100%; }
}

/* Mobile cursor */
#mobile-cursor{
  position:fixed;
  width:36px;
  height:36px;
  z-index:9999;
  pointer-events:none;
  transform:translate(-50%,-50%);
  display:none; /* enabled on touch devices via JS */
  image-rendering:pixelated;
}

/* Simple program window styling for IE mock */
.program-window{
  position:fixed;
  width:78vw;
  max-width:820px;
  height:66vh;
  min-height:320px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#ffffff;
  border:2px solid rgba(0,0,0,0.28);
  box-shadow:0 12px 40px rgba(0,0,0,0.45);
  z-index:200000;
  display:none;
  flex-direction:column;
  overflow:hidden;
  border-radius:4px;
  image-rendering:pixelated;
}

/* Titlebar */
.program-titlebar{
  height:38px;
  background:linear-gradient(#2b78c5,#1f5f9e);
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 8px;
  font-weight:700;
  box-sizing:border-box;
}
.program-icon{
  width:20px;
  height:20px;
  object-fit:contain;
  image-rendering:pixelated;
}
.program-title{
  flex:1;
  font-family: 'ARIALBI_LOCAL', XPSystem, sans-serif;
  font-size:14px;
  letter-spacing:0.6px;
  text-shadow:0 1px 0 rgba(0,0,0,0.25);
}

/* window control group (min, max, close) */
.program-title-controls{
  display:flex;
  gap:6px;
  align-items:center;
}
.program-control{
  width:28px;
  height:28px;
  display:block;
  object-fit:contain;
  image-rendering:pixelated;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  background:transparent;
  border:0;
}

/* maximized window state for program-window */
.program-window.maximized{
  width:100vw !important;
  height:100vh !important;
  left:0 !important;
  top:0 !important;
  transform:none !important;
  border-radius:0 !important;
  max-width:none !important;
  min-height:100vh !important;
}

/* Content area */
.program-content{
  padding:12px;
  height:calc(100% - 38px);
  overflow:auto;
  background: linear-gradient(180deg,#fff,#f3f7fb);
  color:#222;
  font-size:14px;
}

/* IE mock homepage layout */
.ie-home{ display:flex; gap:12px; align-items:center; }
.ie-home img{ width:96px; height:auto; object-fit:contain; image-rendering:pixelated; }
.ie-home h1{ margin:0 0 6px 0; font-size:20px; }
.ie-links{ margin-top:8px; display:flex; gap:8px; }
.ie-links button{
  padding:8px 10px;
  background:#2b78c5;
  color:#fff;
  border:0;
  border-radius:4px;
  cursor:pointer;
  font-weight:600;
  -webkit-tap-highlight-color:transparent;
}

/* show when visible */
#ie-window[aria-hidden="false"]{
  display:flex;
}

/* Make sure everything fits on one screen height */
@media (max-height:700px){
  .welcome-text{font-size:54px}
  #recycle{top:60px; width:48px; height:48px}
  :root{--taskbar-height:36px}
  #start-btn{height:24px}
  .tbar-img{height:20px}
}

/* Shutdown popup overlay and dim/grayscale effect */
#shutdown-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
  pointer-events:none; /* enabled when visible */
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.18s, opacity 160ms ease;
}
/* when visible, make overlay interactive and visible immediately */
#shutdown-overlay[aria-hidden="false"]{
  pointer-events:auto;
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}
.sdpopup{
  position:relative;
  width:420px;
  max-width:92vw;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  transform:translateY(0);
  transition:transform 180ms ease, opacity 160ms ease;
  opacity:1;
  user-select:none;
}
.sdpopup-main{
  width:100%;
  height:auto;
  display:block;
  image-rendering:pixelated;
  pointer-events:none;
}
/* place the three middle action buttons centered over the sdpopup middle area */
.sdpopup-middle{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  pointer-events:auto;
  padding:0 12px;
}
.sdpopup-btn{
  height:68px;
  width:auto;
  display:block;
  image-rendering:pixelated;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  background:transparent;
  border:0;
  padding:0;
}
.sdpopup-footer{
  position:absolute;
  left:0;
  right:0;
  bottom:8px;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.sdpopup-cancel{
  height:28px;
  width:auto;
  display:block;
  image-rendering:pixelated;
  cursor:pointer;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}

/* dim and grayscale everything inside the desktop EXCEPT the shutdown or logoff overlay itself,
   so the dialogs remain colored while the background becomes grayscale/dim */
#desktop.dimmed > :not(#shutdown-overlay):not(#logoff-overlay){
  filter:grayscale(100%) contrast(0.9) brightness(0.9);
  transition:filter 200ms ease;
  pointer-events:auto;
}

/* ensure the shutdown overlay/dialog sits on top and is not affected by the desktop filter */
#shutdown-overlay .sdpopup,
#shutdown-overlay .sdpopup *{
  filter:none !important;
}

/* responsive adjustments */
@media (max-width:480px){
  .sdpopup{ width:360px; }
  .sdpopup-btn{ height:56px; }
  .sdpopup-cancel{ height:24px; }
}

/* LOGOFF DIALOG STYLES (mirrors shutdown popup but uses ldpopup classes) */
#logoff-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99998;
  pointer-events:none;
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.18s, opacity 160ms ease;
}
#logoff-overlay[aria-hidden="false"]{
  pointer-events:auto;
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}
.ldpopup{
  position:relative;
  width:420px;
  max-width:92vw;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  transform:translateY(0);
  transition:transform 180ms ease, opacity 160ms ease;
  opacity:1;
  user-select:none;
}
.ldpopup-main{
  width:100%;
  height:auto;
  display:block;
  image-rendering:pixelated;
  pointer-events:none;
}
/* place the two middle action buttons centered over the ldpopup middle area */
.ldpopup-middle{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  pointer-events:auto;
  padding:0 12px;
}
.ldpopup-btn{
  height:68px;
  width:auto;
  display:block;
  image-rendering:pixelated;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  background:transparent;
  border:0;
  padding:0;
}
.ldpopup-footer{
  position:absolute;
  left:0;
  right:0;
  bottom:8px;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.ldpopup-cancel{
  height:28px;
  width:auto;
  display:block;
  image-rendering:pixelated;
  cursor:pointer;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}

/* full-screen fake logoff screen */
#fake-logoff-screen{
  position:fixed;
  inset:0;
  z-index:100000;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
}
#fake-logoff-screen img{
  width:100vw;
  height:100vh;
  object-fit:cover;
  display:block;
  image-rendering:pixelated;
  background:#000;
  margin:0;
  padding:0;
}