/* ========= Tokens ========= */
:root{
  --bg:#0a0016;
  --grid:#4a1f7a;
  --ink:#fdf7ff;
  --muted:#cdb8ff;
  --brand:#ff6bd6;   /* pink neon */
  --brand2:#7bf0ff;  /* cyan neon */
  --ok:#98ffa8;
  --danger:#ff6b8b;
  --titlebar:linear-gradient(90deg,#ffb3ef 0%, #9fd3ff 100%);
  --shadow:0 18px 45px rgba(0,0,0,.55);
}
.window{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border:1px solid rgba(255,255,255,.20);
}

  .crt::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
    background:
      linear-gradient(transparent 95%, rgba(255,255,255,.04) 96%) 0 0/100% 3px;
    mix-blend-mode:soft-light; opacity:.35;
  }
  .crt::after{
    content:""; position:fixed; inset:-10%; pointer-events:none; z-index:9998;
    background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 55%);
    filter: blur(18px);
  }

/* ========= Base ========= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font-family:'VT323', monospace;
  font-size:20px; line-height:1.45;
  background:
    radial-gradient(1500px 800px at 80% -10%, rgba(139,243,255,.25), transparent 60%),
    radial-gradient(1200px 700px at 10% 10%, rgba(255,112,215,.15), transparent 60%),
    linear-gradient(135deg,#0b0018 0%, #16002a 100%);
  min-height:100svh;
  overflow:hidden;
}

/* Subtle neon grid wallpaper */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(transparent 31px, rgba(255,255,255,.06) 32px, transparent 33px) 0 0/100% 32px,
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.06) 32px, transparent 33px) 0 0/32px 100%;
  mask: radial-gradient(ellipse at center, rgba(255,255,255,.9), transparent 70%);
  opacity:.25; filter: drop-shadow(0 0 16px var(--grid));
}

/* Desktop grid */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  gap: 28px; /* spacing between icons */
  margin-top: 20px;
}

/* Bare desktop icons */
.icon.pixel {
  background: none;
  border: none;
  padding: 0;
  width: 100px;
  text-align: center;
  cursor: default;
  color: inherit;
}

/* Pixel icons themselves */
.pixel-icon {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto 6px;
  image-rendering: pixelated;   /* keeps blocky retro look */
}

/* Labels under icons */
.icon.pixel .label {
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  color: #2a0e4a;                 /* dark purple */
  text-shadow: 1px 1px 0 #fff;    /* retro light outline */
  line-height: 1.2;
}

/* Hover/focus effect */
.icon.pixel:hover .label,
.icon.pixel:focus .label {
  color: #ff9bd6;                 /* pastel pink glow */
  text-shadow: 1px 1px 2px rgba(0,0,0,.4);
}

/* Make the desktop icon layer a free-position canvas */
.icon-grid{
  position: relative;
  /* Fill available desktop space; adjust if your taskbar/header differs */
  height: calc(100svh - 64px); 
  margin: 0;
  /* Optional: a faint snap grid so you can see the cells */
  --cell: 100px; /* will be updated by JS to match icon width */
  background-size: var(--cell) var(--cell);
  border-radius: 8px;
}

/* Icons become absolutely positioned tiles */
.icon.pixel{
  position: absolute;
  width: 100px; /* the “cell width”; JS reads this to set snap size */
  text-align: center;
  background: none;
  border: none;
  padding: 0;
  cursor: default; /* changes to move cursor while dragging via JS */
  user-select: none;
  -webkit-user-drag: none;
}

.pixel-icon{
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto 6px;
  image-rendering: pixelated;
}

.icon.pixel .label{
  font-size: 14px;
  text-transform: uppercase;
  color: #2a0e4a;
  text-shadow: 1px 1px 0 #fff;
  line-height: 1.2;
}

/* visual feedback while dragging */
.icon.pixel.is-dragging{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  cursor: move;
}

/* ========= Desktop Layer ========= */
.desktop{
  position:fixed; inset:0; padding:18px 18px 54px; /* leave space for taskbar */
}

/* ========= Window (Pop-up) ========= */
.window{
  position:absolute; top:120px; left:160px; width:min(780px, calc(100vw - 48px));
  background:linear-gradient(180deg,#1a0735,#0f0426);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow);
  border-radius:16px; overflow:hidden; display:none;
}
.window.active{ display:block }
.titlebar{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  background:var(--titlebar); color:#120c2b; cursor:move; user-select:none;
}
.titlebar .dot{
  width:12px; height:12px; border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.15);
}
.dot.red{ background:#ff5f56 } .dot.yellow{ background:#ffbd2e } .dot.green{ background:#27c93f }
.title{ font-weight:700; letter-spacing:.5px; font-size:22px; flex:1; padding-left:4px}
.win-actions{ display:flex; gap:8px }
.btn{
  font:inherit; color:var(--ink); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16); padding:6px 12px; border-radius:10px;
  cursor:pointer;
}
.btn:hover{ background:rgba(255,255,255,.12) }
.close{
  width:28px; height:28px; border-radius:8px; background:#2a0a3f; border:1px solid rgba(255,255,255,.18);
  display:grid; place-items:center; cursor:pointer;
}
.close:hover{ background:#3a0f58 }
.close:before{
  content:"✕"; font-size:18px; line-height:1;
}

.content{
  padding:16px 16px 18px; max-height:min(70svh, 720px); overflow:auto;
}
.content h2, .content h3{ margin:.5rem 0 }
.muted{ color:var(--muted) }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr }}

/* Smaller “system” window feel */
#win-tip .content { max-height:none }
#win-tip .cta-strip { margin-top:8px }


/* Cards */
.card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:14px;
}
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:16px;
  background:linear-gradient(90deg,rgba(255,112,215,.25), rgba(139,243,255,.25));
  border:1px solid rgba(255,255,255,.18);
}


/* --- Portfolio grid --- */
.work-grid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width:900px){
  .work-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* --- Card shell (.case) with text UNDER the preview --- */
.case{
  display:flex; flex-direction:column; gap:8px;
  text-decoration:none; color:inherit;
}

/* --- Permanent square preview area (.preview) --- */
.preview{
  position:relative;
  aspect-ratio:1/1;                  /* square */
  border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow, 0 8px 24px rgba(0,0,0,.25));
  background:#0b0f1a center/cover no-repeat;
  background-image:var(--shot);      /* fallback screenshot */
}


/* Under-preview text */
.meta{ display:flex; flex-direction:column; gap:2px; }
.meta .title{ font-weight:800; line-height:1.1; font-size:.95rem; }
.meta .sub{ color:var(--muted,#cdb8ff); font-size:.85rem; }

/* Bigger portfolio cards (columns + spacing) */
.work-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(1, minmax(0,1fr));
}
@media (min-width:700px){
  .work-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1200px){
  .work-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* Wider preview frame */
.preview{ aspect-ratio:16/10; }

/* Slightly larger meta text */
.meta .title{ font-size:1.05rem; }
.meta .sub{ font-size:.95rem; }

/* 2–3 line description under each card */
.meta .desc{
  color:var(--muted, #9fb0d4);
  font-size:.95rem;
  line-height:1.35;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  overflow:hidden;
  margin-top:2px;
}

/* CTA strip */
.cta-strip{
  display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 0;
}
.cta{
  background:linear-gradient(90deg, var(--brand), var(--brand2));
  color:#120c2b; border:none; padding:10px 16px; border-radius:12px; cursor:pointer; font-weight:700;
}
.cta.secondary{
  background:transparent; color:var(--ink);
  border:1px solid rgba(255,255,255,.18);
}

/* ===== Taskbar: readable colours + contrast ===== */
.taskbar{
  position:fixed; left:0; right:0; bottom:0; height:48px;
  display:flex; align-items:center; gap:10px; padding:6px 10px;
  background:linear-gradient(0deg, #0a0217 0%, #1b0b34 100%); /* deeper purple */
  border-top:1px solid rgba(255,255,255,.18);
  color:#f8f5ff;
  z-index:9998;
}

/* Taskbar (unchanged if you already have this) */
.taskbar{
  position:fixed; left:0; right:0; bottom:0; height:48px;
  display:flex; align-items:center; gap:8px; padding:0 8px;
  background:linear-gradient(0deg,#0a0217 0%, #1b0b34 100%);
  border-top:1px solid rgba(255,255,255,.18);
  color:#f8f5ff; z-index:9998;
}

/* Windows-like Start segment (integrated, not pill) */
.start{
  display:flex; align-items:center; gap:8px;
  height:100%;
  padding:0 14px;
  border-radius:0;                 /* no rounded corners */
  border-right:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)); /* subtle slab */
  color:#f8f5ff;
  font-weight:700;
  cursor:pointer;
  user-select:none;
}

/* hover/pressed like Windows */
.start:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.16));
}
.start:active,
.start[aria-expanded="true"]{
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(255,255,255,.06));
  box-shadow: inset 0 1px 0 rgba(0,0,0,.35);
}

/* Keep tasks snug after Start */
.task-items{ display:flex; gap:8px; flex:1; overflow:auto; }

/* Optional: Windows logo sizing inside Start */
.start svg{ width:16px; height:16px; display:block }
.start span{ letter-spacing:.2px }


.task-items{ display:flex; gap:8px; flex:1; overflow:auto; }
.task{
  padding:6px 12px; border-radius:10px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#f5f0ff; white-space:nowrap;
}
.task:hover{ background:rgba(255,255,255,.16) }

.right{ display:flex; gap:10px; align-items:center; color:#eae4ff }
.dot-live{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok) }
#clock{ font-variant-numeric:tabular-nums; opacity:.9 }

/* ===== Start menu ===== */
.start-menu{
  position:fixed; bottom:52px; left:10px; /* aligns above the Start button */
  width:min(520px, calc(100vw - 20px));
  background:linear-gradient(180deg, rgba(24,8,48,.95), rgba(14,4,32,.95));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 18px 48px rgba(0,0,0,.55);
  border-radius:14px; overflow:hidden; display:none; z-index:9999;
  color:#fdf7ff; backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.start-menu[aria-hidden="false"]{ display:block; }

.start-menu .menu-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:0; 
}

.start-menu .menu-col{ padding:8px; }

.menu-item{
  width:100%; text-align:left; padding:10px 12px;
  border-radius:10px; border:1px solid transparent;
  background:transparent; color:#fdf7ff; font:inherit; cursor:pointer;
  display:flex; align-items:center; gap:10px;
}
.menu-item:hover, .menu-item:focus{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.16);
  outline:none;
}
.menu-item.danger{ color:#ffd6de }
.menu-item.danger:hover{ background:rgba(255,107,139,.10); border-color:rgba(255,107,139,.35) }

.menu-sep{ height:1px; margin:8px 0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent) }

@media (max-width:640px){
  .start-menu{ width:calc(100vw - 20px) }
  .start-menu .menu-inner{ grid-template-columns:1fr; }
}

/* ========= Accessibility helpers ========= */
.visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; clip:rect(0 0 0 0); overflow:hidden; border:0; padding:0 }
kbd{ border:1px solid rgba(255,255,255,.15); padding:1px 6px; border-radius:6px; font-size:16px; background:rgba(255,255,255,.06)}
a{ color:inherit }
ul{ margin:0 0 10px 18px }
h1{ font-size:44px; margin:0 0 6px }

/* ===== Bigger portfolio cards + more copy under each ===== */
#win-work .work-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(1, minmax(0,1fr));
}
@media (min-width:700px){
  #win-work .work-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1200px){
  #win-work .work-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
}

/* Larger preview frame for a bigger “card” feel */
#win-work .case .preview{
  aspect-ratio:16/10;               /* taller snippet */
  background:#0b0f1a center/cover no-repeat;
  background-image:var(--shot);
  border-radius:12px;
  box-shadow:var(--shadow, 0 8px 24px rgba(0,0,0,.25));
  overflow:hidden;
}

/* Meta text sizing */
#win-work .meta{ padding:10px 2px 0 }
#win-work .meta .title{ font-size:1.1rem; line-height:1.2 }
#win-work .meta .sub{ font-size:.98rem; color:var(--muted,#9fb0d4) }

/* 2–3+ lines under each card (clamped) */
#win-work .meta .desc{
  margin-top:6px;
  color:var(--muted,#a9b6d6);
  font-size:.98rem;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clam: 4;             /* shows 2–3 lines on most sizes */
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Bigger, flexible modal that fits all content */
#case-modal .modal-window{
  width:min(98vw, 1320px);
  max-height:94vh;
}

/* Optional size presets (use data-size on the trigger) */
#case-modal .modal-window[data-size="xl"]{
  width:min(98vw, 1440px);
  max-height:96vh;
}
#case-modal .modal-window[data-size="full"]{
  width:100vw; height:100svh; max-height:100svh; border-radius:0;
}


/* Make the image fit instead of crop when space is tight */
#case-modal .modal-image{
  width:100%; height:100%;
  object-fit:contain;             /* use 'cover' if you prefer full-bleed */
}

/* Stack on mobile and cap media height */
@media (max-width:900px){
  #case-modal .modal-body{ grid-template-columns:1fr; }
  #case-modal .modal-media{ max-height:50vh; }
  #case-modal .modal-image{ max-height:50vh; }
}

/* Show/hide behaviour for the CTA window */
#win-cta.is-open{ display:block; }


/* ===== FAQ accordion ===== */
.faq{ display:grid; gap:10px; }

.faq-item{ padding:0; overflow:hidden; }              /* reuse .card chrome, but tighter */
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:14px;
  background:transparent; border:0; color:inherit; font:inherit; cursor:pointer;
  text-align:left;
}
.faq-q:focus{ outline:2px solid rgba(255,255,255,.25); outline-offset:2px; border-radius:10px; }

.faq-q::after{
  content:"▾";
  font-size:18px; line-height:1;
  transform:rotate(0deg);
  transition:transform .2s ease;
  opacity:.9;
}

.faq-q[aria-expanded="true"]::after{
  transform:rotate(-180deg);
}

.faq-a{
  padding:0 14px 14px;
  color:var(--muted);
  /* smooth open/close */
  grid-template-rows: 1fr;
  animation: faq-reveal .2s ease;
}

@keyframes faq-reveal{
  from{ opacity:.6; transform:translateY(-2px) }
  to{ opacity:1; transform:translateY(0) }
}

/* optional: subtle divider between q and a when open */
.faq-item[open] .faq-a,
.faq-q[aria-expanded="true"] + .faq-a{
  border-top:1px solid rgba(255,255,255,.12);
}

/* Make windows flex so content can scroll inside */
.window{ display:none; position:absolute; }
.window.active{ display:flex; flex-direction:column; }

/* Keep title visible while scrolling */
.titlebar{ position:relative; z-index:1; }

/* Mobile viewport fit */
@media (max-width: 740px){
  /* Pin windows inside the viewport, above the taskbar */
  .window{
    position:fixed;
    inset:8px 8px calc(56px + env(safe-area-inset-bottom, 0px)) 8px; /* top right bottom left */
    width:auto; max-width:none;
    height:auto; max-height:none;
    left:auto; top:auto; transform:none;  /* cancel desktop offsets */
    border-radius:14px;
  }

  /* Sticky titlebar so controls are always reachable */
  .titlebar{
    position:sticky; top:0;
    cursor:default; /* dragging off on very small screens */
  }

  /* Content fills remaining space and scrolls if needed */
  .content{
    flex:1 1 auto;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tip window width on mobile */
  #win-tip{
    width:auto !important;
    max-width:none !important;
  }
}

/* Mobile: windows size to content, never exceed viewport */
@media (max-width: 740px){
  :root{
    --tb: 56px;         /* taskbar height */
    --win-m: 8px;       /* window margin */
    --titlebarH: 44px;  /* approx titlebar height */
  }

  /* Let content define height/width; cap only if needed */
  .window{
    position: fixed;
    left: var(--win-m);
    right: var(--win-m);
    top: var(--win-m);
    bottom: auto;
    width: auto;
    max-width: calc(100vw - (var(--win-m) * 2));
    height: auto; /* <- no forced stretch */
    max-height: calc(100svh - var(--tb) - (var(--win-m) * 2));
    transform: none;
    border-radius: 14px;
  }

  /* Don’t stretch the body; only scroll if needed */
  .window.active{ display: block; }       /* was flex earlier */
  .content{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100svh - var(--tb) - (var(--win-m) * 2) - var(--titlebarH));
  }

  /* Sticky controls so close/minimise stay visible */
  .titlebar{
    position: sticky;
    top: 0;
    cursor: default;
    z-index: 1;
  }

  /* Tip can stay compact */
  #win-tip{
    width: auto !important;
    max-width: calc(100vw - (var(--win-m) * 2)) !important;
  }
}

/* Mobile: keep win-tip wide and shallow (rectangle, longer lengthways) */
@media (max-width: 740px){
  #win-tip{
    /* make it wide */
    width: calc(100vw - 32px) !important;  /* override any inline width */
    max-width: 640px;                       /* caps on bigger phones/tablets */
    /* keep it from getting tall */
    max-height: calc(100svh - 56px - 24px); /* viewport minus taskbar + margins */
  }
  #win-tip .content{
    /* if text grows, only content scrolls (titlebar stays) */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width:740px){
  .titlebar{ position:relative; } /* disable sticky during drag on phones */
}
/* Let finger-drag win over page scroll on the titlebar */
.titlebar{ touch-action: none; }

/* If you had mobile rules that set .window with inset/right/bottom,
   they will block dragging. Make sure they don't apply while dragging. */
@media (max-width:740px){
  .window{
    /* OK to keep position:fixed; but avoid inset locking all sides during drag */
    right:auto; bottom:auto; /* ensure left/top take effect */
  }
}

/* Contact popup: same sizing as CTA on mobile */
@media (max-width: 740px){
  #win-contact{
    width: calc(100vw - 32px) !important;  /* leave some margin */
    max-width: 420px;                      /* match win-cta cap */
    left: 50% !important;                  /* center horizontally */
    transform: translateX(-50%) !important;
    right: auto !important;                /* override any inset */
  }
}

/* Prevent buttons being cut off inside tall popups — mobile */
@media (max-width: 740px){
  /* Window sizing/capping */
  #win-work{
    height: auto !important;
    max-height: calc(100svh - 72px);   /* fit viewport with a little breathing space */
  }

  /* Only show as flex when it's OPEN */
  #win-work.active{
    display: flex;                      /* <-- moved here */
    flex-direction: column;
  }

  /* Scroll only the content area */
  #win-work .content{
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 50px;               /* keep bottom CTA/buttons clear */
  }

  /* Keep controls from shrinking */
  #win-work .win-actions,
  #win-work .cta-strip{
    flex-shrink: 0;
  }
}

/* -- Mobile fix: keep Services/Contact from being cut off -- */
@media (max-width: 740px){
  /* Size within safe viewport (above taskbar), allow drag-free centering */
  #win-services{
    position: fixed;
    left: var(--win-m,8px);
    right: var(--win-m,8px);
    top: var(--win-m,8px);
    bottom: calc(var(--tb,56px) + var(--win-m,8px));
    width: auto;
    max-width: none;
    height: auto;
    max-height: calc(100svh - var(--tb,56px) - (var(--win-m,8px) * 2));
    transform: none;
    border-radius: 14px;
  }

  /* Force flex layout even if another block sets display:block */
  #win-services.active,
  #win-contact.active{
    display: flex !important;
    flex-direction: column;
  }

  /* Scroll only inner content; leave controls/CTAs visible */
  #win-services .content,
  #win-contact .content{
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px; /* protects bottom buttons/CTAs */
    max-height: calc(100svh - var(--tb,56px) - (var(--win-m,8px) * 2) - var(--titlebarH,44px));
  }

  /* Keep top actions + bottom CTA from shrinking */
  #win-services .win-actions, #win-services .cta-strip,
  #win-contact .win-actions, #win-contact .cta-strip{
    flex-shrink: 0;
  }

  /* Ensure the close/minimise bar stays reachable */
  #win-services .titlebar,
  #win-contact .titlebar{
    position: sticky !important;
    top: 0;
    cursor: default;
    z-index: 1;
  }
}

/* Keep windows above the taskbar, especially while dragging */
.window{ z-index: 10000; }            /* taskbar is 9998 */
.window.dragging{ z-index: 10020; }   /* ensure titlebar stays reachable */

/* Mobile: smaller + centred Services window */
@media (max-width:740px){
  #win-services{
    width: min(420px, calc(100vw - 32px));
    max-width: 420px;
    top: var(--win-m, 8px);
    bottom: auto !important;        /* don't stretch to the taskbar */
    height: auto;                    /* size to content */
  }
  #win-services .content{
    padding: 14px 14px 30px;        /* keep room for buttons */
    max-height: calc(80svh - var(--titlebarH,44px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Put Recycle Bin near the bottom on phones */
@media (max-width:740px){
  /* Make sure the icon canvas is tall enough (above your taskbar) */
  .icon-grid{
    position: relative;
    min-height: calc(100svh - 72px); /* adjust 72px if your taskbar is taller/shorter */
    margin-top: 20px;
    gap: 10px; /* spacing between icons */
  }

  /* Target the Recycle Bin button by its window target */
  .icon-grid .icon.pixel[data-open="win-random"]{
    position: absolute;
    right: 16px;                       /* bottom-right; swap to left:16px if you prefer */
    bottom: calc(16px + env(safe-area-inset-bottom));
    top: auto !important;              /* override any top set elsewhere */
    left: auto !important;
  }
}

:root{ --taskbar:56px; } /* match your taskbar height */

/* Start menu sizing: never taller than visible viewport on iOS */
#startMenu{
  position: fixed;
  bottom: calc(var(--taskbar) + 6px + env(safe-area-inset-bottom));
  max-height: calc(100svh - var(--taskbar) - 12px - env(safe-area-inset-bottom));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0); /* avoid odd clipping on iOS */
}

/* Recycle Bin always bottom-right */
.icon-grid{ position:relative; }
.icon-grid .icon.pixel[data-open="win-random"]{
  position:absolute;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  top:auto !important;
  left:auto !important;
}