:root{
  /* Browser shell */
  --browser-w: clamp(320px, 80vw, 1200px);
  --iframe-border: 4px;
  --iframe-radius: 4px;
  --gap: 20px;

  /* Portfolio tweaks */
  --pf-gap: 12px;
  --pf-pad-side: 10px;       /* 0 = flush with iframe edges */
  --pf-chip-h: 34px;
  --pf-header-w: min(760px, 58%);
  --pf-corner-left-w: clamp(90px, 12vw, 180px);
  --pf-corner-right-w: clamp(20px, 10vw, 56px);

  /* Optional: overlap fix if your webbar PNG has a bottom gutter */
  --webbar-overlap-fix: 0px;
}

/* Pixel Sans */
@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;

  background-color:#1e2127;
  background-image:url("bg-grid.png");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;

  display:grid;
  grid-template-rows: 1fr auto; /* content + taskbar */
  overflow-x:hidden;
}

/* ---------- Desktop shortcuts ---------- */
.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:50;
}
.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) }

/* ---------- Stage & Browser ---------- */
.stage{
  display:grid;
  place-items:start center;
  padding:clamp(16px,4vh,40px) 16px;
}
.browser{ width:var(--browser-w); }

.webbar{ position:relative; width:100%; display:block; line-height:0; }
.webbar-img{ width:100%; height:auto; display:block; image-rendering:pixelated; vertical-align:bottom; }

.julie-logo{
  position:absolute;
  left:53%;
  top:-15px;
  transform:translateX(-50%);
  width:clamp(320px,50vw,800px);
  height:auto;
  image-rendering:pixelated;
  pointer-events:auto;
}

/* Iframe shell */
.frame-wrap{
  position:relative;
  margin-top:var(--webbar-overlap-fix);
  width:100%;
  border:var(--iframe-border) solid #000;
  border-radius:var(--iframe-radius);
  overflow:hidden;
  background:#15171c;
}
.frame-wrap > iframe{
  display:block;
  width:100%;
  height:clamp(420px,58vh,820px);
  border:0;
}

/* Loading bar */
.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{
  display:flex; align-items:center; justify-content:center;
  font-family:'Pixel Sans Unicode',sans-serif; font-size:46px; line-height:.75;
  color:#fff; background:#9a4f7e; border:3px solid #000; padding:0 16px 4px 16px;
  cursor:pointer; image-rendering:pixelated;
}
.spacer{ flex:1 }
.clock{
  font-family:'Pixel Sans Unicode',sans-serif !important;
  font-size:26px; line-height:.75; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:3px solid #000; padding:0 16px 4px 16px; background:#5b2f47;
}
.start-menu{
  position:fixed; left:clamp(12px,2vw,24px); bottom:calc(56px + 16px);
  display:none; flex-direction:column; gap:8px;
  background:#1a1c21; border:3px solid #000; padding:12px;
  z-index:2147483647 !important;
  font-family:'Pixel Sans Unicode',sans-serif; font-size:40px; line-height:.9;
}
.start-menu a{ color:#f0c4ff; text-decoration:none; padding:6px 8px; border:2px solid #000; background:#242730; }
.start-menu a:hover{ background:#2c3040 }
.start-menu.open{ display:flex }
.start-open .shortcuts{ pointer-events:none; }

/* ---------- Mobile tweaks ---------- */
@media (max-width:900px){
  :root{ --browser-w:min(92vw,720px) }
  .shortcuts{ display:none; }
  .shortcuts--mobile{
    display:grid; margin-top:30px; width:var(--browser-w);
    justify-self:center; grid-template-columns:repeat(5, minmax(0,1fr));
    gap:clamp(6px,1.8vw,12px); place-items:center;
  }
  .shortcuts--mobile .shortcut img{ width:clamp(56px,16vw,84px); }
  .frame-wrap > iframe{ height:clamp(360px,58vh,680px); }

  .julie-logo{
    width:clamp(280px,65vw,560px);
    top:-10px; left:60%; transform:translateX(-50%);
  }

  .shortcut img{
    width: clamp(96px, 12vh, 140px);  /* adjust values until you like the size */
  }
}

/* ===================== PORTFOLIO ===================== */

/* Stationary bunny background (inside iframe pages only) */
.pf-body{
  margin:0; background:transparent; font-family:'Pixel Sans Unicode', ui-monospace, monospace;
  position:relative;
}
.pf-body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:#1b1a1e url("Bg-bunny.jpeg") no-repeat center center;
  background-size:cover;
  transform:translateZ(0); will-change:transform;
}

/* Inner wrapper: flush with iframe edges (no side padding) */
.pf-wrap{
  width:100%;
  padding-left:var(--pf-pad-side);
  padding-right:var(--pf-pad-side);
  padding-top:12px; padding-bottom:24px;
  box-sizing:border-box;
  position:relative; /* for corner icons */
}

/* Header */
.pf-header{ position:relative; margin:20px 0 var(--pf-gap) 0; }
.pf-header-img{ display:block; width:var(--pf-header-w); height:auto; object-fit:contain; }

/* Bleed corners aligned to inner edges */
.pf-corner-left{
  position:absolute; top:6px; left:var(--pf-pad-side);
  width:var(--pf-corner-left-w); height:auto; image-rendering:pixelated; pointer-events:auto; z-index:5;
}
.pf-corner{
  position:absolute; top:6px; right:var(--pf-pad-side);
  width:var(--pf-corner-right-w); height:auto; image-rendering:pixelated; pointer-events:auto; z-index:5;
}

/* Filter bar */
.pf-filterbar{
  margin:6px 0 16px 0; padding:12px;
  border:2px solid #000; background:transparent; box-shadow:4px 4px 0 #000;
}
.pf-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }

/* FILTER CHIPS: pixel frame, white text, transparent fill */
.pf-chip{
  position: relative;
  height: var(--pf-chip-h);
  padding: 4px 12px;

  /* text + behavior */
  color: #fff;                   /* white text */
  background: transparent;       /* no fill */
  border: none;                  /* we'll draw the frame ourselves */
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  image-rendering: pixelated;
  box-shadow: 2px 2px 0 #000;    /* pixel shadow */
}

/* draw a 2px frame with 1px “missing” at each corner */
.pf-chip::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    /* top & bottom lines (2px tall, 1px gap on each end) */
    linear-gradient(#000 0 0) top,
    linear-gradient(#000 0 0) bottom,
    /* left & right lines (2px wide, 1px gap on each end) */
    linear-gradient(#000 0 0) left,
    linear-gradient(#000 0 0) right;
  background-repeat:no-repeat;
  background-size:
    calc(100% - 2px) 2px,        /* top */
    calc(100% - 2px) 2px,        /* bottom */
    2px calc(100% - 2px),        /* left */
    2px calc(100% - 2px);        /* right */
}

/* active/hover states: keep white text, add a subtle dark fill */
.pf-chip.is-active,
.pf-chip:hover{
  background: rgba(255,255,255,0.06); /* very light darkening */
}

/* (optional) focus ring for keyboard users */
.pf-chip:focus-visible{
  outline: 2px dashed #fff;
  outline-offset: 2px;
}

/* Grid: 3 columns desktop, 2 columns mobile */
.pf-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--pf-gap);
}

/* Tiles: perfect 1:1 squares; remove hairline gaps on iOS */
.pf-tile{
  margin:0;
  border:2px solid #000;
  background:#fff;
  box-shadow:4px 4px 0 #000;
  aspect-ratio:1/1;          /* square */
  overflow:hidden;           /* clips any sub-pixel overdraw */
  font-size:0; line-height:0;/* kill inline line boxes */
}
.pf-open{ display:block; height:100%; }
.pf-tile img{
  display:block; width:100%; height:100%;
  object-fit:cover;
  -webkit-backface-visibility:hidden; transform:translateZ(0);
}
.pf-meta{ font-size:10px; padding:6px 8px; border-top:2px solid #000; background:#f9f9ff; }

/* Overlay viewer */
.pf-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.86);
  display:none; z-index:9999;
}
.pf-overlay.is-open{ display:block; }
.pf-overlay-inner{
  position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; padding:0;
}
.pf-overlay-img{
  max-width:100vw; max-height:100vh; object-fit:contain; align-self:flex-start;
  border:2px solid #000; box-shadow:6px 6px 0 #000; background:#111;
}
.pf-close,.pf-prev,.pf-next{
  position:absolute; border:2px solid #000; background:#fff;
  height:34px; min-width:34px; font-size:20px; line-height:1; cursor:pointer; box-shadow:3px 3px 0 #000;
}
.pf-close{ top:12px; right:12px; }
.pf-prev{  top:50%; left:12px;  transform:translateY(-50%); }
.pf-next{  top:50%; right:12px; transform:translateY(-50%); }


/* Desktop: right-align the browser block */
@media (min-width: 901px){
  .stage{
    justify-items: end;   /* was center; aligns webbar/iframe to the right */
  }
/* Hide mobile shortcut bar by default (desktop/tablet) */
.shortcuts--mobile { 
  display: none; 
  }
  
  .shortcut img{
    width: clamp(88px, 11vh, 124px);  /* adjust values until you like the size */
}
  .shortcuts{
    top: min(8vh, 60px);   /* lower value = less gap from the top */
  }
}

/* ------ Mobile portfolio layout ------ */
@media (max-width:700px){
  /* Filters stay on one line and auto-shrink */
  .pf-filters{
    display:flex; flex-wrap:nowrap; justify-content:space-between; gap:6px;
  }
  .pf-chip{
    flex:1 1 auto; min-width:0;
    padding:3px 6px; height:30px; font-size:11px;
    white-space:nowrap;
  }
  .pf-year{
    flex:1 1 auto; min-width:0;
    display:flex; align-items:center; justify-content:flex-end; gap:4px;
  }
  .pf-year-label{ font-size:11px }
  .pf-select{ height:28px; font-size:11px; }

  /* Grid switches to 2 columns */
  .pf-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
}