:root{
  /* Controls the browser width responsively. The webbar and iframe share this. */
  --browser-w: clamp(320px, 80vw, 1200px);
  --iframe-border: 4px;
  --iframe-radius: 4px;
  --gap: 20px;
}

/* load Pixel Sans Unicode */
@font-face{
  font-family: 'Pixel Sans Unicode';
  src: url('PixelSansUnicode.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#eee;
  


  /* BG should not look zoomed — fit the whole image to the screen, no crop */
  background-color: #1e2127;
  background-image: url("bg-grid.png");
  background-position: center center;
  background-size: cover;     
  background-repeat: no-repeat; /* no tiling */
  display:grid;
  grid-template-rows: 1fr auto; /* content + taskbar */
  overflow-x:hidden;
}

/* Shortcuts (desktop left column) */
.shortcuts{
  position:fixed;
  top: min(14vh, 120px);
  left: clamp(8px, 2vw, 28px);
  display:flex;
  flex-direction:column;
  gap: clamp(8px, 1.8vh, 18px);
  z-index: 2;
}

.shortcut img{
  display:block;
  width: clamp(64px, 9vh, 96px);
  height:auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 #000);
  transition: transform .15s;
  cursor:pointer;
}
.shortcut img:active{ transform: translateY(1px) }

/* Main stage centers the browser */
.stage{
  display:grid;
  place-items:start center;
  padding: clamp(16px, 4vh, 40px) 16px;
}

/* Retro browser */
.browser{
  width: var(--browser-w);
}

.webbar{
  position: relative;
  width: 100%;
}

.webbar-img{
  width:100%;
  height:auto;
  display:block;
  image-rendering: pixelated;
}

/* Julie logo (default mobile/tablet: left-center) */
.julie-logo{
  position:absolute;
  right: auto;
  left: 53%;
  top: -15px;
  transform: translateX(-50%);
  width: clamp(320px, 50vw, 800px);
  height:auto;
  image-rendering: pixelated;
  pointer-events:none; /* purely decorative */
}

/* Iframe wrapper matches webbar width and sits right under it */
.frame-wrap{
  position: relative;
  margin-top: clamp(8px, 1.6vh, 14px);
  width:100%;
  border: var(--iframe-border) solid #000;
  border-radius: var(--iframe-radius);
  overflow:hidden;
  background:#15171c;
}

/* Iframe scales with the webbar (same width), height is responsive */
.frame-wrap > iframe{
  display:block;
  width:100%;
  height: clamp(420px, 58vh, 820px);
  border:0;
}

/* Loading shimmer bar (appears on navigation) */
.loading{
  position:absolute;
  left:0; right:0; top:0;
  height: 6px;
  background:
    linear-gradient(90deg,
      #0000 0%,
      #c85bb0 25%,
      #f3b2ff 40%,
      #c85bb0 55%,
      #0000 100%);
  background-size: 180% 100%;
  animation: shine 1.1s linear infinite;
  opacity:0;
  pointer-events:none;
}
.loading.on{ opacity:1 }
@keyframes shine{
  0%   { background-position: 0% 0 }
  100% { background-position: 180% 0 }
}

/* Taskbar */
.taskbar{
  position:sticky;
  bottom:0;
  width:100%;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 16px;
  background:#6b3a55;
  border-top: 3px solid #2b1a24;
}

.start{
  font: inherit;
  color:#fff;
  background:#1e8f31;
  border:3px solid #000;
  padding: 10px 16px;
  cursor:pointer;
  image-rendering: pixelated;
}
.spacer{ flex:1 }
.clock{
  display:block;
  text-align:center;
  border:3px solid #000;
  padding: 6px 14px;
  background:#5b2f47;
  line-height:1.15;
}

/* Start menu popover */
.start-menu{
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  bottom: calc(56px + 16px); /* float above taskbar */
  display:none;
  flex-direction:column;
  gap:8px;
  background:#1a1c21;
  border:3px solid #000;
  padding:12px;
  z-index: 2147483647 !important; /* higher than any other layer */
}
.start-menu.open{ display:flex }
.start-menu a{
  color:#f0c4ff;
  text-decoration:none;
  padding:6px 8px;
  border:2px solid #000;
  background:#242730;
}
.start-menu a:hover{ background:#2c3040 }

/* Apply Pixel Sans Unicode to the entire start menu UI */
.start-menu,
.start-menu a,
 {
  font-family: 'Pixel Sans Unicode', sans-serif;
  font-size: 40px;  /* tweak for crisp pixel look */
  line-height: 0.9;
}

/* ------- MOBILE LAYOUT ------- */
@media (max-width: 900px){
  :root{ --browser-w: min(92vw, 720px) }

  /* Hide the fixed desktop column on mobile */
  .shortcuts{ display:none; }

  /* Show the mobile bar and place it 30px BELOW the iframe */
  .shortcuts--mobile{
    display:grid;
    margin-top: 30px;                 /* <-- exactly 30px below the iframe */
    width: var(--browser-w);
    justify-self: center;             /* center under the browser */
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: clamp(6px, 1.8vw, 12px);
    place-items:center;
  }

  /* Icon size on mobile */
  .shortcuts--mobile .shortcut img{
    width: clamp(56px, 16vw, 84px);
  }

  /* Keep iframe comfortable on small screens */
  .frame-wrap > iframe{
    height: clamp(360px, 58vh, 680px);
  }

  .taskbar{ padding: 8px 12px }
  .start{  padding: 8px 12px }

/* Mobile logo scaling */
.julie-logo{
  width: clamp(280px, 65vw, 560px); /* bigger on mobile */
  top: -10px;                       /* 5px lower than -15px */
  left: 60%;                        /* keep it centered */
  transform: translateX(-50%);
  }
}

/* remove baseline/descender gap under the webbar image */
.webbar { display:block; line-height:0; }
.webbar-img { display:block; width:100%; height:auto; vertical-align:bottom; }

/* sit the iframe wrapper immediately under the webbar */
.frame-wrap { margin-top:0; }

/* (optional) nudge up 1–4px if your PNG has transparent gutter at the bottom */
:root { --webbar-overlap-fix: 0px; }
.frame-wrap { margin-top: var(--webbar-overlap-fix); }

/* === Adjustable tweaks (logo and icon placement) === */
:root{
  /* Raise desktop shortcuts (smaller value = closer to the top) */
  --shortcuts-top-desktop: min(8vh, 80px);
}

/* Desktop shortcuts higher */
.shortcuts{
  top: var(--shortcuts-top-desktop);
}

/* --- Desktop: right-align the whole browser block (webbar + iframe + logo) --- */
@media (min-width: 901px){
  /* Push the .browser grid item to the right edge */
  .stage{
    justify-items: end; /* from 'center' to 'end' */
  }

/* Mobile shortcuts are hidden by default (desktop/tablet) */
.shortcuts--mobile { display: none; }

  }

  .shortcuts{
    gap: clamp(10px, 2.2vh, 22px);
  }
  .shortcut img{
    /* was clamp(64px, 9vh, 96px) */
    width: clamp(78px, 10vh, 110px);
  }
  
/* Make sure the start menu is above EVERYTHING on desktop (Safari-safe) */
.start-menu{
  z-index: 2147483647 !important; /* top layer */
}

/* When the start menu is open, don’t let the desktop icons eat clicks */
.start-open .shortcuts{
  pointer-events: none;
}

/* Start button customization */
.start{
  display: flex;                 /* flex centers text easily */
  align-items: center;           /* vertical center */
  justify-content: center;       /* horizontal center */

  font-family: 'Pixel Sans Unicode', sans-serif; /* keep your pixel font */
  font-size: 46px;  /* tweak for crisp pixel look */
  line-height: 0.75;
  color: #fff;                   /* text color */

  background: #9a4f7e;           /* NEW box background color */
  border: 3px solid #000000;     /* NEW frame/border color */

  padding: 0px 16px 4px 16px; 
  cursor: pointer;
  image-rendering: pixelated;
}

/* Taskbar clock + Wonderland text: Pixel Sans Unicode */
.clock {
  font-family: 'Pixel Sans Unicode', sans-serif !important;
  font-size: 26px;
  line-height: 0.75;          /* tighter line spacing */
  text-align: center;

  display: flex;           /* flexbox for centering */
  flex-direction: column;  /* stack time and WONDERLAND vertically */
  align-items: center;     /* horizontal centering */
  justify-content: center; /* vertical centering */
  
  padding: 0px 16px 4px 16px; 
       /* adjust if you want more/less space around */
}