/* Peaces — Creative Studio */

@import url('https://fonts.googleapis.com/css2?family=Geneva:wght@400&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* ==================== Nostalgia: Windows 98 cursor (everywhere) ==================== */
  /* Tiny inline SVG arrow, white fill + black outline. !important so it beats
     element-level cursor rules like .desktop-icon { cursor: pointer }. Text
     inputs still get the I-beam cursor for usability. */
  *, *::before, *::after {
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDE4IDIyIj48cG9seWdvbiBwb2ludHM9IjAsMCAwLDIwIDYsMTQgOSwyMSAxMiwyMCA4LDE0IDE2LDE0IiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PC9zdmc+") 0 0, default !important;
  }
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  textarea {
    cursor: text !important;
  }


  :root {
    --brand-blue: #5B6AE6;
    --brand-cyan: #4CC9F0;
    --brand-gradient: linear-gradient(135deg, #4CC9F0 0%, #5B6AE6 100%);
    --menu-bg: rgba(200, 205, 215, 0.88);
    --desktop-bg: #C0C0C8;
    --sticky-yellow: #FDFD96;
    --folder-blue: #6BBBF7;
    --peaces-purple: #7B5EC9;
    --peaces-purple-dark: #6A4DB5;
    --text-dark: #222;
    --shadow: 0 2px 8px rgba(0,0,0,0.18);
  }

  html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    font-family: 'Geneva', 'Lucida Grande', 'Segoe UI', sans-serif;
    font-size: 13px;
    cursor: default;
    user-select: none;
    background: #C8C8D0;
    letter-spacing: 0.6px;   /* applied site-wide; inherits to all text descendants */
  }
  /* Form elements don't inherit letter-spacing automatically — apply explicitly */
  input, textarea, select, button {
    letter-spacing: inherit;
  }

  /* ==================== MENU BAR ==================== */
  .menu-bar {
    position: fixed; top: 0; left: 0; right: 0;
    height: 32px;
    background: linear-gradient(to bottom, #fafafa 0%, #d8d8d8 100%);
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 0 rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    padding: 0 16px;
    z-index: 1000;
    border-bottom: 2px solid #000;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Chicago', 'Geneva', monospace;
    letter-spacing: 0;
    line-height: 1;
    /* Phosphor glow inherited by brand name, menu items, and clock */
    text-shadow:
      0 0 1px currentColor,
      0 0 4px rgba(255, 180, 80, 0.55),
      0 0 8px rgba(255, 140, 40, 0.25);
    letter-spacing: 0.6px;
  }
  .menu-bar > * {
    display: flex;
    align-items: center;
  }
  .menu-bar .apple-logo {
    font-size: 18px;
    margin-right: 16px;
    opacity: 0.85;
    line-height: 1;
  }
  .menu-bar .brand-name {
    font-family: 'Futura', 'Futura PT', 'Century Gothic', sans-serif;
    font-weight: 700;
    color: var(--brand-blue);
    margin-right: 24px;
    font-size: 16px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
  }
  .menu-bar .menu-items {
    display: flex; gap: 18px;
    color: #000;
  }
  .menu-bar .menu-items span {
    cursor: pointer;
    transition: background 0.1s;
    padding: 2px 8px;
    display: inline-flex;
    align-items: center;
  }
  .menu-bar .menu-items span:hover { background: #000; color: #fff; }
  .menu-bar .right-section {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #000;
  }
  .menu-bar .social-icons {
    display: flex; gap: 10px; align-items: center;
  }
  .menu-bar .social-icons a,
  .menu-bar .social-icons .soon {
    display: inline-flex;
  }
  .menu-bar .social-icons svg {
    width: 16px; height: 16px;
    fill: #000;
    cursor: pointer;
    transition: fill 0.1s;
  }
  /* YouTube's logo is a wide-short shape, so it reads smaller at the same box
     size — nudge it up a touch to visually match the other social icons. */
  .menu-bar .social-icons a.yt svg { width: 19px; height: 19px; }
  .menu-bar .social-icons a:hover svg { fill: #666; }
  /* Icons with no link yet — greyed out and not clickable */
  .menu-bar .social-icons .soon { opacity: 0.3; }
  .menu-bar .social-icons .soon svg { cursor: default; }
  .menu-bar .clock {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    min-width: 65px;
    text-align: right;
    font-family: 'Chicago', 'Geneva', monospace;
  }

  /* ==================== DESKTOP ==================== */
  .desktop {
    position: absolute;
    inset: 34px 0 0 0;
    background: transparent;
    overflow: hidden;
  }

  /* ==================== VIDEO BACKGROUND ==================== */
  .video-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
  }
  .bg-vid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(0.70) contrast(1.1) brightness(0.92) sepia(0.08);
    /* Hidden until JS confirms playback has actually started. Until then,
       the .video-bg::before pseudo-element shows the poster image with the
       same filter applied — visually identical to the video's first frame.
       This is what removes Safari's stuck "play button" overlay: a hidden
       <video> element renders no controls. */
    visibility: hidden;
  }
  .bg-vid.is-playing { visibility: visible; }
  /* Filtered poster image rendered behind the video. The pseudo-element
     carries its own filter so it matches the video element's look exactly. */
  .video-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    /* --poster-url is set by JS once the cached/Firestore poster URL is
       known. No fallback image — if no poster exists yet, the parent's
       solid black shows through until the video starts. */
    background-image: var(--poster-url);
    background-size: cover;
    background-position: center top;
    filter: saturate(0.70) contrast(1.1) brightness(0.92) sepia(0.08);
    z-index: 0;
  }



  /* ==================== CRT / RETRO FILTER ==================== */
  /* Scanlines */
  .crt-scanlines {
    position: absolute;
    inset: 0;
    z-index: 9991;
    pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 3px,
      rgba(0, 0, 0, 0.04) 3px,
      rgba(0, 0, 0, 0.04) 4px
    );
    mix-blend-mode: multiply;
  }

  /* RGB sub-pixel / chromatic aberration hint */
  .crt-rgb {
    position: absolute;
    inset: 0;
    z-index: 9992;
    pointer-events: none;
    background: repeating-linear-gradient(
      to right,
      rgba(255, 0, 0, 0.015) 0px,
      rgba(0, 255, 0, 0.015) 1px,
      rgba(0, 0, 255, 0.015) 2px,
      transparent 3px
    );
    background-size: 3px 100%;
  }

  /* Vignette — darker edges like a CRT tube */
  .crt-vignette {
    position: absolute;
    inset: 0;
    z-index: 9993;
    pointer-events: none;
    background: radial-gradient(
      ellipse at center,
      transparent 60%,
      rgba(0, 0, 0, 0.18) 100%
    );
  }



  /* Slight barrel / curvature glow at edges */
  .crt-glow {
    position: absolute;
    inset: -2px;
    z-index: 9990;
    pointer-events: none;
    border-radius: 12px;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.15),
                inset 0 0 20px rgba(0, 0, 0, 0.08);
  }



  /* ==================== DESKTOP ICONS ==================== */
  .desktop-icon {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    z-index: 90;
    transition: transform 0.15s ease;
    min-width: 100px;
  }
  .desktop-icon:hover { transform: scale(1.05); }
  .desktop-icon:active { transform: scale(0.95); }

  .desktop-icon .icon-img {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    image-rendering: pixelated;
  }
  /* "Local Art" folder label — 16-bit pixel + brand gradient (Option 1).
     Keeps the original 13px icon-label size; only the font + fill change. */
  .desktop-icon .icon-label.art-gradient {
    /* Same font/size as the other desktop icon labels (13px Chicago) — only the
       fill is the brand gradient. */
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 13px;
    letter-spacing: 0.6px;
    line-height: 1.3;
    background: linear-gradient(95deg, #CC6213, #CC3F93 45%, #624BA1 70%, #149AA1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Gradient (clipped) text needs filter:drop-shadow, NOT text-shadow (a
       text-shadow bleeds white over the FRONT of clipped text). Uses a dark edge
       + amber phosphor glow — matches the mobile menu version exactly and keeps
       the gradient rich/deep (a white drop shadow washed the colors out). */
    text-shadow: none;
    filter:
      drop-shadow(0 0 1px rgba(0,0,0,0.45))
      drop-shadow(0 0 4px rgba(255,180,80,0.55))
      drop-shadow(0 0 8px rgba(255,140,40,0.25));
  }
  /* Same 16-bit pixel + brand gradient for the "Local Art" item in the mobile
     hamburger menu. Keeps the menu's own font-size; only font + fill change. */
  .menu-dropdown .md-item.art-gradient {
    /* Same font/size/weight as the other menu items (14px Chicago, 700) — only
       the fill is the brand gradient. */
    font-family: 'Chicago', 'Geneva', monospace;
    font-weight: 700;
    font-size: 14px;
    background: linear-gradient(95deg, #CC6213, #CC3F93 45%, #624BA1 70%, #149AA1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Override the menu bar's inherited text-shadow (it bleeds on clipped text)
       and use filter:drop-shadow to match the neighbors' amber glow while giving
       the gradient letters comparable weight. */
    text-shadow: none;
    filter:
      drop-shadow(0 0 1px rgba(0,0,0,0.45))
      drop-shadow(0 0 4px rgba(255,180,80,0.55))
      drop-shadow(0 0 8px rgba(255,140,40,0.25));
  }
  .desktop-icon .icon-label {
    font-size: 13px;
    color: #000;
    text-align: center;
    max-width: 100px;
    /* White legibility shadow + phosphor glow stack (desktop) */
    text-shadow:
      0 1px 0 rgba(255,255,255,0.9),
      0 0 1px currentColor,
      0 0 4px rgba(255, 180, 80, 0.55),
      0 0 8px rgba(255, 140, 40, 0.25);
    letter-spacing: 0.6px;
    line-height: 1.3;
    font-family: 'Chicago', 'Geneva', monospace;
  }
  /* Inner span used for per-line pill on mobile only — transparent on desktop */
  .desktop-icon .icon-label-text {
    display: inline;
  }

  /* Folder icon — Classic Mac manila folder */
  .folder-icon {
    width: 54px; height: 42px;
    position: relative;
    image-rendering: pixelated;
  }
  .folder-tab {
    position: absolute; top: 0; left: 4px;
    width: 20px; height: 8px;
    background: #E8C86A;
    border: 2px solid #000;
    border-bottom: none;
    border-radius: 0;
  }
  .folder-body {
    position: absolute; top: 6px; left: 0; right: 0; bottom: 0;
    background: #F2D978;
    border: 2px solid #000;
    border-radius: 0;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  }
  .folder-body::before {
    content: '';
    position: absolute;
    top: 2px; left: 3px; right: 3px;
    height: 2px;
    background: #E8C86A;
    box-shadow: 0 5px 0 #E8C86A, 0 10px 0 #E8C86A;
  }

  /* Hat-blue folders */
  .folder-blue .folder-tab { background: #7AAAC8; }
  .folder-blue .folder-body { background: #8BB8D8; }
  .folder-blue .folder-body::before {
    background: #7AAAC8;
    box-shadow: 0 5px 0 #7AAAC8, 0 10px 0 #7AAAC8;
  }

  /* White folders */
  .folder-white .folder-tab { background: #E8E8E8; }
  .folder-white .folder-body { background: #fff; }
  .folder-white .folder-body::before {
    background: #E0E0E0;
    box-shadow: 0 5px 0 #E0E0E0, 0 10px 0 #E0E0E0;
  }

  /* Document icon — Friendly retro doc */
  .doc-icon {
    width: 42px; height: 52px;
    background: #f0f6fa;
    border: 2px solid #000;
    border-radius: 2px;
    position: relative;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
    overflow: visible;
  }
  .doc-icon::before {
    content: '';
    position: absolute; top: 10px; left: 5px; right: 5px;
    height: 2px; background: #6A9AB8;
    box-shadow: 0 6px 0 #6A9AB8, 0 12px 0 #6A9AB8, 0 18px 0 #6A9AB8, 0 24px 0 #6A9AB8;
  }
  .doc-icon::after {
    content: '';
    position: absolute; top: -2px; right: -2px;
    width: 12px; height: 12px;
    background: linear-gradient(225deg, #8BB8D8 50%, #f0f6fa 50%);
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  .doc-icon.pdf::before {
    content: '';
    position: absolute; top: 10px; left: 5px; right: 5px;
    height: 2px; background: #000;
    box-shadow: 0 6px 0 #000, 0 12px 0 #000, 0 18px 0 #000;
  }
  .doc-icon.pdf::after {
    content: 'PDF';
    position: absolute;
    bottom: 3px; left: 50%;
    top: auto; right: auto;
    width: auto; height: auto;
    transform: translateX(-50%);
    font-size: 8px; font-weight: 700;
    color: #fff;
    background: #000;
    padding: 1px 4px;
    border: none;
    border-radius: 0;
    font-family: 'Chicago', 'Geneva', monospace;
  }

  /* Trash icon — Classic Mac trash can */
  .trash-icon {
    width: 44px; height: 56px;
    position: relative;
  }
  .trash-body-svg { width: 100%; height: 100%; }

  /* Logo icon */
  .logo-file-icon {
    width: 60px; height: 60px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
    padding: 6px;
  }
  .logo-file-icon img {
    width: 100%; height: auto;
  }





  /* Eyes in menu bar */
  .menu-eyes {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
  }
  .eyes-svg {
    cursor: pointer;
    display: block;
  }

  /* Animated characters at bottom */
  .characters {
    position: absolute;
    bottom: 8px;
    left: 40px;
    display: flex;
    gap: 6px;
    z-index: 90;
  }
  .character {
    font-size: 24px;
    animation: charBounce 2s ease-in-out infinite;
  }
  .character:nth-child(2) { animation-delay: 0.3s; }
  .character:nth-child(3) { animation-delay: 0.6s; }
  @keyframes charBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(-5deg); }
    75% { transform: translateY(-3px) rotate(5deg); }
  }

  /* About window background */
  #aboutWindow .window-body {
    background: var(--bg-about, url('IMAGES/BACKGROUNDS/FOREST_PIXAL_01.webp')) center/cover no-repeat;
    position: relative;
    color: #fff;
    image-rendering: pixelated;
  }
  #aboutWindow .window-body .content-box {
    background: rgba(245,247,250,0.85);
    border: 2px solid #000;
    padding: 8px 10px;
    font-size: 1.4em;
    color: #000;
    margin: 0 50px 8px 50px;
  }
  #aboutWindow .window-body .content-box p { margin-bottom: 0; }
  #aboutWindow .os-window { width: min(700px, 55vw); }

  /* Window animation for About Me */
  .window-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0,0,0,0.1);
  }
  .window-overlay.active { display: block; }

  .os-window {
    position: absolute;
    top: 6%; left: 3%;
    width: min(560px, 40vw);
    background: #fff;
    border: 2px solid #000;
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
    overflow: hidden;
    will-change: transform;
  }
  /* ==================== Nostalgia: genie zoom on window open ====================
     Animation runs only when JS adds the .zoom-open class. The transform-origin
     is set inline by JS to the click source's position so the window appears to
     grow from the icon that was clicked. */
  .os-window.zoom-open {
    animation: windowGenieOpen 0.32s cubic-bezier(0.18, 0.85, 0.4, 1);
  }
  @keyframes windowGenieOpen {
    0%   { transform: scale(0.06); opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  .window-titlebar {
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-bottom: 2px solid #000;
    position: relative;
    /* Blue title bar (a muted, less-saturated take on the folder-icon blue) */
    background: linear-gradient(to bottom, #A3C1D5 0%, #87AAC1 58%, #6E91AD 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  }
  .window-btn {
    width: 16px; height: 16px;
    border-radius: 0;
    border: 2px solid #000;
    background: #fff;
    cursor: pointer;
    z-index: 1;
    position: relative;
    order: 2;          /* push the close box to the right of the title */
    margin-left: 6px;
    flex-shrink: 0;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.4);   /* hard-edged drop shadow, matches window */
  }
  /* X inside the close button — two rotated bars */
  .window-btn.close::before,
  .window-btn.close::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 10px;
    height: 2px;
    background: #000;
  }
  .window-btn.close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .window-btn.close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
  .window-btn.close:hover { background: #000; }
  .window-btn.close:hover::before,
  .window-btn.close:hover::after { background: #fff; }
  /* Pressed-in animation while the user holds the click */
  .window-btn.close:active {
    background: #000;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.7);
    transform: translate(1px, 1px);
  }
  .window-btn.close:active::before,
  .window-btn.close:active::after { background: #fff; }
  .window-btn.minimize { display: none; }
  .window-btn.maximize { display: none; }
  .window-title {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    font-family: 'Chicago', 'Geneva', 'Helvetica Neue', Arial, sans-serif;
    z-index: 1;
    padding: 0 10px;
    position: relative;
    order: 1;
    letter-spacing: 0.6px;
    /* extra heft so the name reads boldly on the blue bar */
    -webkit-text-stroke: 0.4px #fff;
    /* white title on the blue bar, with a subtle dark shadow for legibility */
    text-shadow: 0 1px 1px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.35);
  }
  /* (Pixel bullets beside the title removed.) */
  .window-body {
    padding: 20px;
    font-size: 12px;
    line-height: 1.6;
    color: #000;
    max-height: 500px;
    overflow-y: auto;
    font-family: 'Geneva', 'Chicago', monospace;
  }
  /* ==================== Nostalgia: phosphor glow on window text ====================
     Soft warm halo around text inside windows, like an old amber CRT terminal.
     text-shadow inherits to children, so this applies to anything inside .window-body. */
  .window-body {
    text-shadow:
      0 0 1px currentColor,
      0 0 4px rgba(255, 180, 80, 0.55),
      0 0 8px rgba(255, 140, 40, 0.25);
    letter-spacing: 0.6px;
  }
  .window-body h2 {
    font-size: 16px;
    color: #000;
    margin-bottom: 12px;
    font-family: 'Chicago', 'Geneva', monospace;
    font-weight: 700;
  }
  .window-body p { margin-bottom: 10px; }

  /* Contact form window */
  .contact-window {
    top: 6%; right: 3%; left: auto;
    width: min(480px, 35vw);
  }
  #contactWindow .window-body {
    background: var(--bg-contact, url('IMAGES/BACKGROUNDS/GOLDENGATE_PIXAL_01.webp')) center/cover no-repeat;
    image-rendering: pixelated;
  }
  #contactWindow .window-body .content-box {
    background: rgba(255,250,240,0.85);
    border: 2px solid #000;
    padding: 14px 16px;
    color: #000;
    margin: 0 18px 8px 18px;
    position: relative;
  }
  #contactWindow .window-body .content-box::before {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px dashed #c4977a;
    pointer-events: none;
  }
  #contactWindow .contact-postcard {
    background: rgba(255,250,240,0.85);
    border: 2px solid #000;
    margin: 0 18px 8px 18px;
    padding: 14px 16px;
    position: relative;
  }
  #contactWindow .contact-postcard::before {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px dashed #c4977a;
    pointer-events: none;
  }
  #contactWindow .cp-greeting {
    font-family: 'Chicago','Geneva',monospace;
    font-size: 13px;
    color: #000;
    text-align: center;
    margin: 0 0 10px 0;
  }
  #contactWindow .cp-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 10px;
    margin-bottom: 8px;
    background: linear-gradient(to bottom, #ffffff 0%, #fbf6ec 55%, #efe5d1 100%);
    border: 1px solid #000;
    border-radius: 3px;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px -1px 0 rgba(0,0,0,0.08), 2px 2px 0 #000;
    text-decoration: none;
    color: #000;
    text-align: center;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
  }
  #contactWindow .cp-line:last-child { margin-bottom: 0; }
  #contactWindow .cp-line:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 55%, #f5ecd9 100%);
    transform: translate(-1px, -1px);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px -1px 0 rgba(0,0,0,0.08), 3px 3px 0 #000;
  }
  #contactWindow .cp-line:active {
    transform: translate(2px, 2px);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.5), 0 0 0 #000;
    background: linear-gradient(to bottom, #f0e8d8 0%, #f8f1e0 100%);
  }
  #contactWindow .cp-lbl {
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }
  #contactWindow .cp-val {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    font-family: 'Geneva','Chicago',monospace;
  }
  .contact-window input,
  .contact-window textarea {
    width: 100%;
    padding: 6px 8px;
    border: 2px solid #000;
    border-radius: 0;
    font-size: 11px;
    font-family: 'Geneva', 'Chicago', monospace;
    margin-bottom: 10px;
    background: #fff;
  }
  .contact-window textarea { height: 80px; resize: vertical; }
  .contact-window button {
    background: var(--peaces-purple);
    color: #fff;
    border: 2px solid var(--peaces-purple-dark);
    padding: 6px 24px;
    border-radius: 0;
    cursor: pointer;
    font-weight: 700;
    font-size: 11px;
    font-family: 'Chicago', 'Geneva', monospace;
    transition: background 0.1s;
    /* Center the button (sized to its text) and pull it up a touch */
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: -8px auto 0;
  }
  .contact-window button:hover { background: var(--peaces-purple-dark); }

  /* Join the Team window */
  .join-window {
    top: 20%; left: 3%;
    width: min(520px, 40vw);
  }
  #joinWindow .window-body {
    background: var(--bg-join, url('IMAGES/BACKGROUNDS/OCEAN_PIXAL_01.webp')) center/cover no-repeat;
    image-rendering: pixelated;
  }
  #joinWindow .window-body .content-box {
    background: rgba(245,247,250,0.85);
    border: 2px solid #000;
    padding: 8px 10px;
    color: #000;
    margin: 0 30px 8px 30px;
  }
  #joinWindow .window-body .content-box .form-label,
  #joinWindow .window-body .content-box .required {
    color: #000;
    text-shadow: none;
  }
  .join-window input,
  .join-window select {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 2px solid #000;
    border-radius: 0;
    font-size: 11px;
    font-family: 'Geneva', 'Chicago', monospace;
    margin-bottom: 12px;
    background: #fff;
  }
  .join-window select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0 L5 6 L10 0 Z' fill='%23000'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    cursor: pointer;
  }
  .join-window button {
    width: 100%;
    background: #006496;
    color: #fff;
    border: 2px solid #000;
    padding: 8px 24px;
    border-radius: 0;
    cursor: pointer;
    font-weight: 700;
    font-size: 11px;
    font-family: 'Chicago', 'Geneva', monospace;
    transition: background 0.1s;
    margin-top: 4px;
  }
  .join-window button:hover { background: #004678; }

  /* Calendar window */
  .calendar-window {
    top: 30%; left: 3%;
    width: min(700px, 55vw);
  }
  #calendarWindow .window-body {
    background: var(--bg-calendar, url('IMAGES/BACKGROUNDS/SUNSHINE_PIXAL_01.webp')) center/cover no-repeat;
    image-rendering: pixelated;
    padding: 14px 50px;
  }

  /* Service hours card */
  #calendarWindow .hours-card {
    background: rgba(245,247,250,0.88);
    border: 2px solid #000;
    margin-bottom: 12px;
  }
  #calendarWindow .hours-slots {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
  }
  #calendarWindow .hours-slot {
    padding: 12px 8px;
    text-align: center;
  }
  #calendarWindow .hours-title {
    padding: 12px 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  #calendarWindow .hours-slot-head {
    display: inline-block;
    padding: 1px 8px;
    border: 1.5px solid #000;
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 4px;
  }
  #calendarWindow .hours-slot-time { font-size: 13px; font-weight: 700; }
  #calendarWindow .hours-slot-days { font-size: 10px; color: #444; margin-top: 2px; }
  #calendarWindow .hours-foot {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    padding: 6px 10px;
    border-top: 1.5px solid #000;
    background: #f7f3e7;
  }
  #calendarWindow .hours-foot-text {
    text-align: center;
  }
  #calendarWindow .pill-am { background: #FFD93D; }
  #calendarWindow .pill-pm { background: #FF9A56; }

  /* Closed Dates pill + popover */
  #calendarWindow .hours-card { position: relative; }
  #calendarWindow .closed-dates-pill {
    background: linear-gradient(to bottom, #fff, #efe8d4);
    border: 1.5px solid #000;
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Chicago','Geneva',monospace;
    cursor: pointer;
    box-shadow: 1.5px 1.5px 0 #000;
    white-space: nowrap;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
  }
  #calendarWindow .closed-dates-pill:hover {
    background: linear-gradient(to bottom, #ffffff, #f5efd8);
  }
  #calendarWindow .closed-dates-pill:active,
  #calendarWindow .closed-dates-pill.open {
    transform: translate(1.5px, 1.5px);
    box-shadow: 0 0 0 #000;
  }
  #calendarWindow .closed-dates-popover {
    position: absolute;
    right: 10px;
    top: 100%;
    margin-top: 4px;
    background: #fffef5;
    border: 2px solid #000;
    padding: 8px 12px;
    min-width: 240px;
    max-width: 280px;
    z-index: 5;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
    font-size: 11px;
  }
  #calendarWindow .closed-dates-popover[hidden] { display: none; }
  #calendarWindow .closed-dates-popover h4 {
    margin: 0 0 6px;
    font-size: 12px;
    border-bottom: 1px solid #000;
    padding-bottom: 4px;
  }
  #calendarWindow .closed-dates-list .cd-year-head {
    font-weight: 800;
    font-size: 11px;
    color: #5B6AE6;
    letter-spacing: 0.04em;
    margin: 9px 0 3px;
    padding-bottom: 3px;
    border-bottom: 1.5px solid rgba(0,0,0,0.25);
  }
  #calendarWindow .closed-dates-list .cd-year-head:first-child { margin-top: 0; }
  #calendarWindow .closed-dates-list .cd-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.15);
  }
  #calendarWindow .closed-dates-list .cd-row:last-child { border-bottom: none; }
  #calendarWindow .closed-dates-list .cd-date {
    font-weight: 700;
    font-family: monospace;
    white-space: nowrap;
  }
  #calendarWindow .closed-dates-list .cd-name {
    color: #444;
    text-align: right;
  }

  /* Month grid */
  #calendarWindow .cal-wrap {
    background: rgba(245,247,250,0.88);
    border: 2px solid #000;
    padding: 10px 12px 12px;
  }
  #calendarWindow .cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 6px;
  }
  #calendarWindow .cal-title {
    font-weight: 700;
    font-size: 14px;
    flex: 1;
    text-align: center;
  }
  #calendarWindow .cal-btn {
    background: #dcdcdc;
    border: 2px solid #000;
    border-radius: 0;
    padding: 2px 10px;
    font-family: 'Chicago','Geneva',monospace;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.4);
  }
  #calendarWindow .cal-btn:hover { background: #c8c8c8; }
  #calendarWindow .cal-btn:active {
    background: #000;
    color: #fff;
    transform: translate(1px, 1px);
    box-shadow: none;
  }
  #calendarWindow .cal-today { padding: 2px 8px; font-size: 11px; }
  #calendarWindow .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }
  #calendarWindow .cal-dow {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 0;
    background: #EDC86F;
    color: #3a2a0a;
    letter-spacing: 1px;
    border: 1.5px solid #000;
  }
  #calendarWindow .cal-dow.weekend {
    background: #F5DC9C;
  }
  #calendarWindow .cal-cell {
    aspect-ratio: 1 / 1;
    border: 1.5px solid #000;
    background: #fafafa;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4px 5px;
    font-size: 12px;
    font-weight: 600;
    color: #000;
    position: relative;
    overflow: hidden;
  }
  #calendarWindow .cal-cell.weekend { background: #e5e3dc; color: #888; }
  #calendarWindow .cal-cell.muted   { background: #eeeae0; color: #bbb; }
  #calendarWindow .cal-cell.today   {
    background: #5B6AE6;
    color: #fff;
  }

  /* Closed / holiday days — pixel-art X overlay fills the cell */
  #calendarWindow .cal-cell.closed .x-mark {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
  }
  #calendarWindow .cal-cell.closed .x-mark img {
    width: 100%; height: 100%;
    display: block;
    image-rendering: pixelated;
  }
  #calendarWindow .cal-cell.closed { color: #999; }

  /* Days with one or more events — pixel star badge in the corner */
  #calendarWindow .cal-cell.has-event { cursor: pointer; }
  #calendarWindow .cal-cell .cal-evt-badge {
    position: absolute;
    top: 2px; right: 2px;
    width: 30px; height: 30px;
    padding: 0;
    border: none;
    box-shadow: none;
    cursor: pointer;
    line-height: 0;
    background: url("data:image/png;base64,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") center / contain no-repeat;
    image-rendering: pixelated;
    transition: transform 0.08s ease;
  }
  #calendarWindow .cal-cell .cal-evt-badge:hover { transform: scale(1.12); }
  #calendarWindow .cal-cell .cal-evt-badge:active { transform: scale(0.9); }
  #calendarWindow .cal-cell.has-event:hover { outline: 2px solid #5B6AE6; outline-offset: -2px; }

  /* Upcoming events list */
  #calendarWindow .cal-events { margin-top: 14px; }
  #calendarWindow .cal-events[hidden] { display: none; }
  #calendarWindow .cal-events-title {
    font-weight: 800; font-size: 13px; color: #000; margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  #calendarWindow .cal-events-list { display: flex; flex-direction: column; gap: 8px; }
  #calendarWindow .cal-evt-card {
    display: flex; align-items: center; gap: 10px;
    border: 1.5px solid #000; background: #fafafa; border-radius: 8px;
    padding: 8px 10px; cursor: pointer; text-align: left; width: 100%;
  }
  #calendarWindow .cal-evt-card:hover { background: #eef0ff; }
  #calendarWindow .cal-evt-chip {
    flex-shrink: 0; width: 46px; text-align: center;
    border: 1.5px solid #000; border-radius: 6px; background: #5B6AE6; color: #fff;
    padding: 4px 0; line-height: 1.1;
  }
  #calendarWindow .cal-evt-chip .m { font-size: 9px; text-transform: uppercase; font-weight: 700; display: block; }
  #calendarWindow .cal-evt-chip .d { font-size: 16px; font-weight: 800; display: block; }
  #calendarWindow .cal-evt-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  #calendarWindow .cal-evt-info .t { display: block; font-weight: 700; font-size: 13px; color: #000; line-height: 1.25; }
  #calendarWindow .cal-evt-info .sub { display: block; font-size: 11px; color: #555; line-height: 1.3; }

  /* Event detail — full-window dim backdrop + centered modal card (covers the
     titlebar too, so the calendar never peeks above the card) */
  #calendarWindow .cal-event-detail {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(16, 20, 34, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow-y: auto;
  }
  #calendarWindow .cal-event-detail[hidden] { display: none; }
  #calendarWindow .cal-event-card {
    position: relative;
    width: 100%;
    max-width: 340px;
    max-height: 100%;
    overflow-y: auto;
    background: linear-gradient(180deg, #fffdf3 0%, #fdf6e3 100%);
    border: 2px solid #000;
    border-radius: 12px;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.45);
    padding: 16px 16px 18px;
  }
  /* Reuse the site-standard X close box, pinned to the card corner */
  #calendarWindow .cal-event-card .cal-event-close {
    position: absolute;
    top: 10px; right: 10px;
    order: 0; margin: 0;
    z-index: 2;
  }
  #calendarWindow .cal-evt-daygroup-title { font-weight: 800; font-size: 14px; margin: 0 28px 10px 0; color: #000; }
  #calendarWindow .cal-evt-flyer {
    width: 100%; height: 200px; display: block;
    object-fit: cover; object-position: top center;
    border: 2px solid #000; border-radius: 10px;
    background: #f3eedd; margin: 4px 0 14px;
    cursor: zoom-in;
  }
  /* Expanded flyer lightbox — covers the whole window (incl. titlebar) so no
     calendar shows above the image, and only one X is visible */
  #calendarWindow .cal-flyer-light {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(8, 10, 22, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
  }
  #calendarWindow .cal-flyer-light[hidden] { display: none; }
  /* Wrapper shrink-wraps the image so the X can pin to the flyer's corner */
  #calendarWindow .cal-flyer-wrap {
    position: relative;
    display: flex;
    max-width: 100%;
    max-height: 100%;
  }
  #calendarWindow .cal-flyer-wrap img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain; display: block;
    border: 2px solid #000; border-radius: 8px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.6);
  }
  #calendarWindow .cal-flyer-wrap .cal-flyer-close {
    position: absolute; top: 8px; right: 8px;
    order: 0; margin: 0; z-index: 2;
  }
  #calendarWindow .cal-evt-detail-title {
    font-size: 19px; font-weight: 800; color: #000; margin: 0 28px 8px 0; line-height: 1.2;
  }
  #calendarWindow .cal-evt-meta {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 13px;
    color: #222;
    margin: 7px 0;
    line-height: 1.4;
  }
  #calendarWindow .cal-evt-meta b {
    flex: 0 0 46px;
    color: #5B6AE6;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
  }
  #calendarWindow .cal-evt-meta span { flex: 1; min-width: 0; }
  #calendarWindow .cal-evt-desc {
    font-size: 13px; color: #222; line-height: 1.55;
    margin: 12px 0 4px; padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.15);
    white-space: pre-wrap;
  }
  #calendarWindow .cal-evt-rsvp {
    display: inline-block; margin-top: 14px;
    background: #5B6AE6; color: #fff; border: 2px solid #000; border-radius: 8px;
    padding: 10px 18px; font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
  }
  #calendarWindow .cal-evt-rsvp:hover { background: #4856c9; }
  #calendarWindow .cal-evt-rsvp:active { transform: translate(2px,2px); box-shadow: 0 0 0 rgba(0,0,0,0.4); }

  /* Pills row (Closed Dates + Upcoming Events) */
  #calendarWindow .hours-pills {
    display: flex; gap: 6px; align-items: center;
    justify-content: flex-end; flex-wrap: wrap;
  }
  #calendarWindow .upcoming-pill { display: inline-flex; align-items: center; gap: 5px; }
  /* `hidden` must win over the inline-flex above (no upcoming events → no pill/star) */
  #calendarWindow .upcoming-pill[hidden] { display: none; }
  #calendarWindow .pill-star {
    display: inline-block; width: 15px; height: 15px; line-height: 0;
    background: url("data:image/png;base64,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") center / contain no-repeat;
    image-rendering: pixelated;
  }
  /* Each pill anchors its own popover directly beneath it */
  #calendarWindow .pill-wrap { position: relative; }
  #calendarWindow .hours-pills .closed-dates-popover { right: 0; left: auto; }
  #calendarWindow .upcoming-popover h4 { display: flex; align-items: center; gap: 6px; }
  #calendarWindow .upcoming-popover .cal-events-list { max-height: 260px; overflow-y: auto; }

  /* Program Activities folder window */
  .activities-window {
    top: 6%; right: 3%; left: auto;
    width: min(720px, 60vw);
  }
  .activities-body {
    background: var(--bg-activities, url('IMAGES/BACKGROUNDS/NATURE_PIXAL_01.webp')) center/cover no-repeat;
    image-rendering: pixelated;
    padding: 16px !important;
    display: flex;
    flex-direction: column;
  }
  /* Generous horizontal breathing room on desktop only.
     Mobile (<=600px) keeps the original 16px padding. */
  @media (min-width: 601px) {
    .activities-body { padding: 18px 40px !important; }
  }
  .activities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 4px;
    max-width: 488px;
    margin: 0 auto 24px;
  }
  .activity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    cursor: pointer;
    border: 2px solid #ccc;
    text-align: center;
    border-radius: 4px;
    background: rgba(245,247,250,0.9);
  }
  .activity-item { transition: background 0.2s ease; }
  /* Hover color + animation effects only on devices with real hover (desktop).
     Touch devices "stick" :hover state after a tap, which caused tiles to
     appear permanently highlighted on mobile. */
  @media (hover: hover) {
    .activity-item:nth-child(1):hover { background: hsl(208, 82%, 86%); } /* Outdoor  — blue   */
    .activity-item:nth-child(2):hover { background: hsl(270, 83%, 86%); } /* Creative — purple */
    .activity-item:nth-child(3):hover { background: hsl(135, 82%, 86%); } /* Social   — green  */
    .activity-item:nth-child(4):hover { background: hsl( 54,100%, 86%); } /* Life     — cream  */
    .activity-item:nth-child(5):hover { background: hsl( 28,100%, 86%); } /* Career   — peach  */
  }
  .activity-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 8px;
    display: block;
    image-rendering: pixelated;
    position: relative;
    z-index: 2;
    object-fit: contain;
    transform-origin: center bottom;
  }

  /* Each activity icon has its own "dance" on hover (desktop only) */
  @media (hover: hover) {
    .activity-item:nth-child(1):hover .activity-icon { animation: pa-hop    0.80s ease-in-out infinite; } /* Outdoor  */
    .activity-item:nth-child(2):hover .activity-icon { animation: pa-wobble 1.40s ease-in-out infinite; } /* Creative */
    .activity-item:nth-child(3):hover .activity-icon { animation: pa-groove 1.00s ease-in-out infinite; } /* Social   */
    .activity-item:nth-child(4):hover .activity-icon { animation: pa-bop    0.90s ease-in-out infinite; } /* Life     */
    .activity-item:nth-child(5):hover .activity-icon { animation: pa-squash 0.80s ease-in-out infinite; } /* Career   */
  }

  @keyframes pa-hop {
    0%,100% { transform: translateY(0); }
    40%     { transform: translateY(-2.5px); }
    50%     { transform: translateY(-3px); }
    60%     { transform: translateY(-2.5px); }
  }
  @keyframes pa-wobble {
    0%,100% { transform: rotate(-2deg); }
    50%     { transform: rotate(2deg); }
  }
  @keyframes pa-groove {
    0%,100% { transform: translateY(0)      rotate(0deg); }
    25%     { transform: translateY(-1.5px) rotate(2deg); }
    50%     { transform: translateY(0)      rotate(0deg); }
    75%     { transform: translateY(-1.5px) rotate(-2deg); }
  }
  @keyframes pa-squash {
    0%,100% { transform: scale(1, 1)       translateY(0); }
    40%     { transform: scale(1.06, 0.94) translateY(1px); }
    60%     { transform: scale(0.96, 1.05) translateY(-2px); }
  }
  @keyframes pa-bop {
    0%   { transform: translateX(-1px); }
    50%  { transform: translateX(1px); }
    100% { transform: translateX(-1px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .activity-item:hover .activity-icon { animation: none !important; }
  }
  .activity-label {
    font-family: 'Geneva', 'Chicago', monospace;
    font-size: 13px;
    line-height: 1.3;
    color: #000;
    word-break: break-word;
  }
  .activities-status {
    height: 22px;
    border-top: 2px solid #000;
    margin: 16px -16px -16px -16px;   /* matches the .activities-body 16px padding (mobile) */
    margin-top: auto;                  /* push bar to the bottom of the body */
    padding: 0 12px;
    display: flex;
    align-items: center;
    font-family: 'Geneva', 'Chicago', monospace;
    font-size: 10px;
    color: #555;
    background: #ECECEC;
    flex-shrink: 0;
  }
  /* Desktop: body padding is 18px 40px, so negative margins must match
     to keep the status bar flush with the window edges at any width. */
  @media (min-width: 601px) {
    .activities-status {
      margin: 16px -40px -18px -40px;
      margin-top: auto;
    }
  }

  /* Games folder window — open lower on the desktop, near the Games folder icon */
  .games-window {
    top: 40%; right: 5%; left: auto;
    width: min(540px, 48vw);
  }
  /* Arcade desktop icon — slightly larger than the standard 64px icons,
     so the arcade cabinet reads with more presence in the bottom-left. */
  .desktop-icon[onclick*="'arcade'"] .icon-img,
  .desktop-icon[onclick*="'arcade'"] .icon-img img {
    width: 76px;
    height: 76px;
  }

  /* Arcade icon sits bottom-left; open its window anchored from the bottom
     so it floats just above the icon — same pattern the Radio window uses
     above the Radio icon. */
  .arcade-window {
    /* --arc drives the whole square: body height = --arc minus titlebar+border.
       Floats bottom-left, just above the arcade icon. */
    --arc: 400px;
    top: auto; right: auto;
    left: 2%; bottom: 18%;
    width: var(--arc);
  }
  @media (max-width: 720px) {
    /* On mobile a global rule forces every window to top: 5% !important.
       If we also set a bottom here, the window stretches between the two and
       leaves a huge empty area. Let it size to content and stay square. The
       width override must beat the later `.games-window { width:auto }` rule,
       so it lives in the games-window media block further down. */
    .arcade-window {
      --arc: min(400px, 92vw);
      bottom: auto;
    }
  }
  .games-body {
    background: var(--bg-games, url('IMAGES/BACKGROUNDS/FARM_PIXAL_01.webp')) center/cover no-repeat;
    image-rendering: pixelated;
    /* extra bottom padding reserves room for the absolutely-positioned
       status bar (22px) plus its border, so tiles aren't covered. */
    padding: 18px 18px 42px 18px !important;
    position: relative;
  }
  /* Arcade window gets a CRT-screen background instead of the farm. Override
     after .games-body so it wins, but only for windows that also carry the
     .arcade-window class. */
  .arcade-window .games-body {
    background: var(--bg-arcade, url('IMAGES/BACKGROUNDS/ARCADE_PIXELS_01.webp')) center/cover no-repeat;
  }

  /* ═══════════════ ARCADE CAROUSEL ═══════════════
     Square CRT screen laid out as three stacked rows: neon marquee (top),
     rotating game carousel (middle), PLAY GAME button (bottom). Sizing is
     driven by the --arc custom property so the window stays square. */
  .arcade-window .games-body {
    height: calc(var(--arc) - 36px);
    max-height: none;
    overflow: hidden;
    padding: 0 !important;
    position: relative;
  }
  /* Marquee pinned to the top, PLAY GAME pinned to the bottom (above the status
     bar), and the carousel fills the screen so the card + arrows sit at the
     true center. */
  .arcade-zone {
    position: absolute;
    left: 0; right: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
  }
  .arcade-zone-top { top: 60px; }
  .arcade-zone-bottom { bottom: 42px; flex-direction: column; gap: 5px; }

  /* neon marquee — shows the current game name, with a flicker (the buzz reads
     this element's opacity to stay in sync) */
  .arcade-marquee {
    font-family: 'Chicago', 'Geneva', monospace;
    font-weight: 700; font-size: 24px; letter-spacing: 2px;
    color: #fff; white-space: nowrap;
    text-shadow: 0 0 4px #fff, 0 0 10px #FF4FB8, 0 0 22px #FF4FB8, 0 0 38px #FF4FB8;
    animation: arcadeFlicker 4s infinite;
  }
  /* the name itself fades + shrinks out, then the new name fades in, on switch */
  .arcade-marquee-name {
    display: inline-block;
    transform-origin: center;
    transition: opacity 0.16s ease, transform 0.16s ease;
  }
  .arcade-marquee-name.out { opacity: 0; transform: scale(0.6); }
  .arcade-star { color: #4FE9FF; text-shadow: 0 0 8px #4FE9FF, 0 0 18px #4FE9FF; }
  @keyframes arcadeFlicker {
    0%,18%,22%,25%,53%,57%,100% { opacity: 1; }
    20%,24%,55% { opacity: 0.55; }
  }

  /* carousel: cards stacked at center, side cards translated out, blurred + dim */
  .arcade-carousel { position: absolute; top: 0; left: 0; right: 0; bottom: 22px; }
  /* outer card = position + carousel slide; inner panel = the visible card that
     floats (so the slide transform and the float transform don't fight) */
  .arcade-card {
    position: absolute; left: 50%; top: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: default;   /* display-only — rotate with the arrows */
    transition: transform 0.32s ease, filter 0.32s ease, opacity 0.32s ease;
  }
  .arcade-card-panel {
    width: 132px;
    position: relative;            /* anchor the scanline overlay */
    display: flex; align-items: center; justify-content: center;
    background: rgba(20,12,40,0.82);
    border: 2px solid #FF4FB8; border-radius: 6px;
    box-shadow: 0 0 0 2px #000, 0 0 14px rgba(255,79,184,0.55), inset 0 0 18px rgba(255,79,184,0.18);
    padding: 18px;
  }
  /* CRT scanlines + faint RGB shimmer laid OVER the card, so the icon reads as
     pixels being drawn by the screen rather than a sticker on top of it. */
  .arcade-card-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    pointer-events: none;
    z-index: 4;
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0.24) 0, rgba(0,0,0,0.24) 1px,
        transparent 1px, transparent 3px),
      repeating-linear-gradient(
        to right,
        rgba(255,0,128,0.05) 0, rgba(255,0,128,0.05) 1px,
        rgba(0,200,255,0.05) 1px, rgba(0,200,255,0.05) 2px,
        transparent 2px, transparent 3px);
  }
  .arcade-card img {
    width: 84px; height: 84px; image-rendering: pixelated; display: block;
    /* Neon phosphor glow so the icon reads as lit-up on the CRT screen,
       matching the cabinet's pink neon (border, marquee). drop-shadow hugs
       the icon's pixel shape, so the art stays crisp while the halo glows. */
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,0.7))
      drop-shadow(0 0 6px rgba(255,79,184,0.75))
      drop-shadow(0 0 13px rgba(255,79,184,0.45));
  }
  .arcade-card.pos-center { transform: translate(-50%,-50%) scale(1); filter: none; opacity: 1; z-index: 3; }
  /* fluid drift on the front game's whole card: independent horizontal and
     vertical sine waves at different periods, so the motion flows continuously
     instead of ticking through corners. (translate handles Y, transform handles
     X — two animations compose without fighting.) */
  .arcade-card.pos-center .arcade-card-panel {
    animation: arcadeFloatY 6s ease-in-out infinite,
               arcadeFloatX 8.5s ease-in-out infinite;
  }
  @keyframes arcadeFloatY {
    0%,100% { translate: 0 -3px; }
    50%     { translate: 0 2px; }
  }
  @keyframes arcadeFloatX {
    0%,100% { transform: translateX(-2.5px); }
    50%     { transform: translateX(2.5px); }
  }
  .arcade-card.pos-right  { transform: translate(calc(-50% + 70px),-50%) scale(0.56); filter: blur(2px) brightness(0.4); opacity: 0.8; z-index: 1; }
  .arcade-card.pos-left   { transform: translate(calc(-50% - 70px),-50%) scale(0.56); filter: blur(2px) brightness(0.4); opacity: 0.8; z-index: 1; }

  /* 16-bit pixel arrows */
  .arcade-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5; background: none; border: 0; cursor: pointer; padding: 8px;
    filter: drop-shadow(0 0 6px #FF4FB8);
    transition: filter 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .arcade-arrow.left  { left: 36px; }
  .arcade-arrow.right { right: 36px; }
  .arcade-arrow svg { display: block; width: 26px; height: 40px; }
  .arcade-arrow.left svg { transform: scaleX(-1); }
  .arcade-arrow svg rect { fill: #FF4FB8; }
  .arcade-arrow:active { transform: translateY(-50%) scale(0.86); }
  @media (hover: hover) {
    .arcade-arrow:hover { filter: drop-shadow(0 0 12px #FF4FB8); }
  }

  /* PLAY GAME button */
  .arcade-play-btn {
    z-index: 5;
    background: rgba(7,3,15,0.55);
    border: 2px solid #4FE9FF; border-radius: 4px;
    font-family: 'Chicago','Geneva',monospace; font-weight: 700; font-size: 11px; letter-spacing: 1.5px;
    color: #4FE9FF; padding: 6px 14px; cursor: pointer;
    text-shadow: 0 0 8px #4FE9FF;
    box-shadow: 0 0 12px rgba(79,233,255,0.45), inset 0 0 12px rgba(79,233,255,0.18);
    -webkit-tap-highlight-color: transparent;
  }
  .arcade-play-btn:active { transform: scale(0.96); }
  @media (hover: hover) {
    .arcade-play-btn:hover { background: rgba(79,233,255,0.18); }
  }

  /* Loading… line (sits just below PLAY GAME; reserves its height so the
     button doesn't jump when it appears) */
  .arcade-toast {
    z-index: 7; min-height: 15px; line-height: 15px; text-align: center;
    font-family: 'Chicago','Geneva',monospace; font-size: 12px; letter-spacing: 1px;
    color: #fff; text-shadow: 0 0 8px #FF4FB8;
    opacity: 0; transition: opacity 0.25s; pointer-events: none;
  }
  .arcade-toast.show { opacity: 1; }
  .games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 440px;
    margin: 0 auto;
  }
  .game-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 6px 10px;
    cursor: pointer;
    border: 2px solid #ccc;
    text-align: center;
    border-radius: 6px;
    background: rgba(245,247,250,0.92);
    transition: background 0.15s ease, transform 0.1s ease;
  }
  @media (hover: hover) {
    .game-item:hover { background: #fff; transform: translateY(-1px); }
  }
  .game-tile {
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
    image-rendering: pixelated;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .game-label {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 12px;
    color: #000;
  }
  /* (Arcade tile styling removed — the arcade now uses the carousel above.) */
  .games-empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border: 2px dashed rgba(0, 0, 0, 0.35);
    color: #555;
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 13px;
    text-align: center;
    padding: 24px;
    font-style: italic;
  }
  /* Art folder — same tile aesthetic as Program Activities (white card,
     border, label below) but with a landscape thumbnail since paintings
     aren't square pixel icons. */
  .art-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 440px;
    margin: 0 auto;
  }
  .art-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    border: 2px solid #ccc;
    border-radius: 6px;
    background: rgba(245,247,250,0.92);
    padding: 8px 8px 10px;
    overflow: hidden;
    transition: background 0.2s ease, transform 0.1s ease;
  }
  @media (hover: hover) {
    .art-item:hover { background: #fff; transform: translateY(-1px); }
  }
  .art-thumb {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border: 1.5px solid #000;
    margin-bottom: 8px;
    image-rendering: auto;        /* paintings aren't pixel art */
    display: block;
  }
  .art-label {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 1.25;
  }
  @media (max-width: 600px) {
    .art-grid {
      grid-template-columns: 1fr;
      max-width: 280px;
      gap: 10px;
    }
    .art-thumb { height: 140px; }
  }
  .games-status {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 22px;
    border-top: 2px solid #000;
    padding: 0 12px;
    display: flex;
    align-items: center;
    font-family: 'Geneva', 'Chicago', monospace;
    font-size: 10px;
    color: #555;
    background: #ECECEC;
  }
  @media (max-width: 720px) {
    .games-window {
      top: 4%; right: 4%; left: 4%;
      width: auto;
    }
    .games-grid { grid-template-columns: repeat(3, 1fr); }
    .game-tile { width: 48px; height: 48px; }
    /* Arcade keeps its own square sizing instead of the games-window default —
       this comes after `.games-window` so it wins at equal specificity.
       Centered horizontally without a transform (so the genie-zoom isn't fought). */
    .arcade-window {
      width: var(--arc);
      left: calc(50% - var(--arc) / 2);
      right: auto;
      bottom: auto;
    }
  }

  /* ==================== JIGSAW ==================== */
  .jigsaw-window {
    width: min(540px, 48vw);
  }
  /* Center on the desktop. Mobile media query below handles small screens. */
  @media (min-width: 601px) {
    .jigsaw-window {
      top: 0; left: 0; right: 0; bottom: 0;
      margin: auto;
      height: fit-content;
    }
  }
  .jigsaw-body {
    background: var(--bg-arcade, url('IMAGES/BACKGROUNDS/ARCADE_PIXELS_01.webp')) center/cover no-repeat;
    image-rendering: pixelated;
    padding: 14px !important;
    position: relative;
    max-height: calc(100vh - 80px);   /* override default 500px so the full puzzle is visible */
  }
  .jg-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(12, 6, 24, 0.6);
    border: 2px solid #4FE9FF;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(79,233,255,0.4), inset 0 0 16px rgba(79,233,255,0.12);
    padding: 8px 10px;
    margin-bottom: 10px;
  }
  .jg-picker { display: flex; gap: 6px; }
  .jg-pick-btn {
    width: 48px;
    height: 36px;
    border: 2px solid rgba(79,233,255,0.4);
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: transform 0.08s, box-shadow 0.12s, border-color 0.12s;
  }
  .jg-pick-btn.active {
    border-color: #4FE9FF;
    box-shadow: 0 0 12px rgba(79,233,255,0.6);
  }
  .jg-pick-btn:hover { transform: translateY(-2px); }
  .jg-difficulty {
    display: flex;
    border: 2px solid #4FE9FF;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(79,233,255,0.35);
  }
  .jg-diff-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    font: inherit;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    color: #4FE9FF;
    text-shadow: 0 0 6px rgba(79,233,255,0.6);
  }
  .jg-diff-btn.active {
    background: #4FE9FF;
    color: #06121a;
    text-shadow: none;
    box-shadow: 0 0 14px rgba(79,233,255,0.6);
  }
  .jg-hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(12, 6, 24, 0.6);
    border: 2px solid #FF4FB8;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(255,79,184,0.4), inset 0 0 16px rgba(255,79,184,0.12);
    padding: 8px 12px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: bold;
  }
  .jg-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 3px;
  }
  .jg-stat-label {
    font-size: 10px;
    color: #b6a6d8;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .jg-stat-value {
    font-size: 18px;
    color: #4FE9FF;
    text-shadow: 0 0 9px rgba(79,233,255,0.7);
  }
  .jg-btn {
    background: rgba(7, 3, 15, 0.55);
    color: #4FE9FF;
    border: 2px solid #4FE9FF;
    border-radius: 4px;
    text-shadow: 0 0 8px rgba(79,233,255,0.7);
    padding: 8px 13px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-shadow: 0 0 12px rgba(79,233,255,0.45), inset 0 0 12px rgba(79,233,255,0.18);
    transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
  }
  .jg-btn:hover { background: rgba(79,233,255,0.18); }
  .jg-btn:active { transform: scale(0.96); }
  .jg-btn.secondary {
    background: rgba(7, 3, 15, 0.55);
    color: #FF4FB8;
    border-color: #FF4FB8;
    text-shadow: 0 0 8px rgba(255,79,184,0.7);
    box-shadow: 0 0 12px rgba(255,79,184,0.45), inset 0 0 12px rgba(255,79,184,0.18);
  }
  .jg-btn.secondary:hover { background: rgba(255,79,184,0.18); }
  .jg-btn-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .jg-board-wrap {
    position: relative;
    border: 2px solid #FF4FB8;
    border-radius: 6px;
    box-shadow: 0 0 14px rgba(255,79,184,0.45), inset 0 0 10px rgba(255,79,184,0.12);
    background: #0c0720;
    overflow: hidden;
  }
  .jg-board {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    display: grid;
    gap: 3px;
    background: rgba(255, 79, 184, 0.22);
  }
  .jg-piece {
    background-repeat: no-repeat;
    background-size: 300% 300%;
    cursor: pointer;
    transition: transform 0.12s ease;
    position: relative;
    overflow: hidden;
  }
  .jg-piece.movable {
    outline: 2px solid #4FE9FF;
    outline-offset: -2px;
    box-shadow: inset 0 0 14px rgba(79,233,255,0.35);
  }
  .jg-piece.empty {
    background: rgba(6, 3, 14, 0.85);
    box-shadow: inset 0 0 16px rgba(255,79,184,0.18);
    cursor: default;
  }
  .jg-piece:not(.empty):not(.movable) { cursor: default; }
  @media (hover: hover) {
    .jg-piece.movable:hover { filter: brightness(1.15); }
  }
  .jg-peek {
    position: absolute;
    inset: 0;
    background: #000;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5;
    animation: jg-fade-in 0.2s ease;
  }
  .jg-peek.show { display: flex; }
  .jg-peek img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
  }
  .jg-win {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }
  .jg-win.show { display: flex; animation: jg-fade-in 0.3s ease; }
  .jg-win-card {
    background: rgba(14, 8, 28, 0.96);
    border: 2px solid #FF4FB8;
    border-radius: 8px;
    box-shadow: 0 0 22px rgba(255,79,184,0.5), inset 0 0 22px rgba(255,79,184,0.12);
    padding: 20px 26px;
    text-align: center;
    width: min(360px, 90%);
    animation: jg-pop-in 0.35s cubic-bezier(.4, 0, .3, 1.4);
  }
  /* Scoped to .jg-win-card to beat `.window-body h2 { color: #000; font-size: 16px }`
     (0,1,1), which otherwise renders this as black 16px instead of cyan 22px. */
  .jg-win-card .jg-win-title {
    font-size: 22px;
    font-weight: bold;
    color: #4FE9FF;
    text-shadow: 0 0 12px rgba(79,233,255,0.7);
    margin: 0 0 4px;
    letter-spacing: 0.5px;
    font-family: inherit;
  }
  .jg-win-sub {
    font-size: 13px;
    color: #b6a6d8;
    margin: 0 0 10px;
  }
  .jg-win-card .game-new-best { margin: 4px auto 10px; }
  .jg-win-stats {
    display: flex;
    gap: 32px;
    justify-content: center;
    margin-bottom: 10px;
  }
  .jg-win-card .game-best-row {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-top: 1px dashed rgba(255,79,184,0.35);
    border-radius: 0;
    padding: 8px 0 0;
    margin: 4px 0 14px;
  }
  .jg-win-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: #b6a6d8;
  }
  .jg-win-stat b {
    font-size: 22px;
    color: #4FE9FF;
    text-shadow: 0 0 9px rgba(79,233,255,0.7);
    font-weight: bold;
  }
  @keyframes jg-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes jg-pop-in {
    0%   { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  @media (max-width: 480px) {
    .jigsaw-window {
      top: 4%; bottom: auto; right: 4%; left: 4%;
      width: auto;
    }
    .jigsaw-body { padding: 10px !important; }
    .jg-topbar { padding: 6px 8px; flex-wrap: wrap; gap: 6px; }
    .jg-pick-btn { width: 40px; height: 30px; }
    .jg-diff-btn { padding: 4px 8px; font-size: 10px; }
    .jg-hud {
      padding: 6px 10px;
      font-size: 12px;
      gap: 6px;
      flex-wrap: wrap;
    }
    .jg-stat-value { font-size: 15px; }
    .jg-stat-label { font-size: 9px; }
    .jg-btn { padding: 6px 10px; font-size: 10px; }
    .jg-win-card .jg-win-title { font-size: 18px; }
    .jg-win-card { padding: 18px 20px; }
    .jg-win-stat b { font-size: 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .jg-piece { transition: none; }
  }

  /* ==================== TIC-TAC-TOE ==================== */
  .tictactoe-window {
    width: min(460px, 44vw);
  }
  /* Center on the desktop. Mobile media query below handles small screens. */
  @media (min-width: 601px) {
    .tictactoe-window {
      top: 0; left: 0; right: 0; bottom: 0;
      margin: auto;
      height: fit-content;
    }
  }
  .tictactoe-body {
    background: var(--bg-arcade, url('IMAGES/BACKGROUNDS/ARCADE_PIXELS_01.webp')) center/cover no-repeat;
    image-rendering: pixelated;
    padding: 14px !important;
    position: relative;
    max-height: calc(100vh - 80px);   /* override default 500px so the full board is visible */
  }
  .tt-hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(12, 6, 24, 0.6);
    border: 2px solid #FF4FB8;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(255,79,184,0.4), inset 0 0 16px rgba(255,79,184,0.12);
    padding: 8px 12px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: bold;
  }
  .tt-turn { display: flex; align-items: center; gap: 9px; }
  .tt-turn-icon {
    width: 24px; height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .tt-turn-text {
    color: #FF4FB8;
    text-shadow: 0 0 8px rgba(255,79,184,0.7);
    letter-spacing: 0.3px;
  }
  .tt-difficulty {
    display: flex;
    border: 2px solid #4FE9FF;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(79,233,255,0.35);
  }
  .tt-diff-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    font: inherit;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    color: #4FE9FF;
    text-shadow: 0 0 6px rgba(79,233,255,0.6);
    transition: background 0.1s;
  }
  .tt-diff-btn.active {
    background: #4FE9FF;
    color: #06121a;
    text-shadow: none;
    box-shadow: 0 0 14px rgba(79,233,255,0.6);
  }
  .tt-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }
  .tt-cell {
    aspect-ratio: 1 / 1;
    border: 2px solid #FF4FB8;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    position: relative;
    min-width: 0;          /* don't let the X/O mark's intrinsic size expand the grid track */
    min-height: 0;
    overflow: hidden;
    background: rgba(22, 13, 44, 0.88);
    box-shadow:
      0 0 0 2px #000,
      0 0 13px rgba(255,79,184,0.5),
      inset 0 0 18px rgba(255,79,184,0.16);
    transition: transform 0.08s;
  }
  /* CRT scanlines over each cell so marks read as drawn by the screen */
  .tt-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 4px;
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
  }
  .tt-cell.locked { cursor: default; }
  @media (hover: hover) {
    .tt-cell.empty:not(.locked):hover { transform: translateY(-2px); }
  }
  .tt-cell.empty:not(.locked):active { transform: translateY(1px); }
  /* X / O drawn as SVG (centers perfectly regardless of font metrics) */
  .tt-cell .xo {
    width: 76%;
    height: 76%;
    display: block;
    animation: tt-stamp 0.35s cubic-bezier(.3, 0, .3, 1.5);
  }
  .xo.mark-x line { stroke: #FF4FB8; stroke-width: 13; stroke-linecap: round; }
  .xo.mark-x { filter: drop-shadow(0 0 5px #FF4FB8) drop-shadow(0 0 13px rgba(255,79,184,0.7)); }
  .xo.mark-o circle { fill: none; stroke: #4FE9FF; stroke-width: 12; }
  .xo.mark-o { filter: drop-shadow(0 0 5px #4FE9FF) drop-shadow(0 0 13px rgba(79,233,255,0.7)); }
  .tt-turn-icon .xo { width: 22px; height: 22px; display: block; }
  @keyframes tt-stamp {
    0%   { transform: scale(0.2) rotate(-12deg); opacity: 0; }
    70%  { transform: scale(1.12) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
  }
  .tt-cell.win-cell {
    border-color: #5dff9b;
    box-shadow:
      0 0 0 2px #000,
      0 0 18px rgba(93,255,155,0.75),
      inset 0 0 18px rgba(93,255,155,0.28);
    animation: tt-win-pulse 1s ease infinite;
  }
  @keyframes tt-win-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
  }
  .tt-score {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    background: rgba(12, 6, 24, 0.6);
    border: 2px solid #FF4FB8;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(255,79,184,0.4), inset 0 0 16px rgba(255,79,184,0.12);
    padding: 9px 10px;
  }
  .tt-score-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: #b6a6d8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-right: 1px solid rgba(255,79,184,0.3);
  }
  .tt-score-cell:last-child { border-right: none; }
  .tt-score-cell b {
    font-size: 22px;
    color: #4FE9FF;
    text-shadow: 0 0 9px rgba(79,233,255,0.7);
    font-weight: bold;
  }
  .tt-score-cell.draws b  { color: #b6a6d8; text-shadow: 0 0 7px rgba(176,107,255,0.7); }
  .tt-score-cell.losses b { color: #FF4FB8; text-shadow: 0 0 9px rgba(255,79,184,0.7); }
  /* TTT's best-row only wraps the Reset Scores button, so it drops the neon
     panel/border — the button keeps its own border (no double frame). */
  .tictactoe-body .game-best-row {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 8px 0 0;
  }
  .tt-win-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }
  .tt-win-overlay.show { display: flex; animation: tt-fade-in 0.3s ease; }
  .tt-win-card {
    background: rgba(14, 8, 28, 0.96);
    border: 2px solid #FF4FB8;
    border-radius: 8px;
    box-shadow: 0 0 22px rgba(255,79,184,0.5), inset 0 0 22px rgba(255,79,184,0.12);
    padding: 22px 26px;
    text-align: center;
    max-width: 90%;
    animation: tt-pop-in 0.35s cubic-bezier(.4, 0, .3, 1.4);
  }
  /* Scoped to .tt-win-card to beat `.window-body h2 { color: #000; font-size: 16px }`
     (0,1,1), which otherwise shrinks this to 16px. The state-variant rules
     below are already at (0,2,0) so their colors land regardless. */
  .tt-win-card .tt-win-title {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 8px;
    letter-spacing: 0.5px;
    color: #4FE9FF;
    font-family: inherit;
  }
  .tt-win-card .tt-win-title.win  { color: #5dff9b; text-shadow: 0 0 12px rgba(93,255,155,0.7); }
  .tt-win-card .tt-win-title.loss { color: #FF4FB8; text-shadow: 0 0 12px rgba(255,79,184,0.7); }
  .tt-win-card .tt-win-title.draw { color: #b6a6d8; text-shadow: 0 0 10px rgba(176,107,255,0.6); }
  .tt-win-sub {
    font-size: 13px;
    color: #b6a6d8;
    margin: 0 0 16px;
  }
  .tt-btn {
    background: rgba(7, 3, 15, 0.55);
    color: #4FE9FF;
    border: 2px solid #4FE9FF;
    border-radius: 4px;
    text-shadow: 0 0 8px rgba(79,233,255,0.7);
    padding: 9px 18px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-shadow: 0 0 12px rgba(79,233,255,0.45), inset 0 0 12px rgba(79,233,255,0.18);
    transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
  }
  .tt-btn:hover { background: rgba(79,233,255,0.18); }
  .tt-btn:active { transform: scale(0.96); }
  @keyframes tt-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tt-pop-in {
    0%   { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  @media (max-width: 480px) {
    .tictactoe-window {
      top: 4%; bottom: auto; right: 4%; left: 4%;
      width: auto;
    }
    .tictactoe-body { padding: 10px !important; }
    .tt-hud {
      padding: 6px 10px;
      font-size: 12px;
      flex-wrap: wrap;
      gap: 6px;
    }
    .tt-turn-icon { width: 18px; height: 18px; }
    .tt-diff-btn { padding: 4px 8px; font-size: 10px; }
    .tt-board { gap: 6px; }
    .tt-cell { padding: 8%; }
    .tt-score-cell b { font-size: 17px; }
    .tt-score-cell { font-size: 10px; }
    .tt-win-card .tt-win-title { font-size: 18px; }
    .tt-win-card { padding: 18px 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tt-cell img,
    .tt-cell.win-cell {
      animation: none;
    }
  }

  /* ==================== SHARED GAME UI (mute + best scores) ==================== */
  /* Pixel-art speaker icon button — matches the cart icon's silhouette
     style. Tap-friendly (≥44px on mobile). */
  .game-mute-btn {
    background: rgba(7, 3, 15, 0.55);
    border: 2px solid #4FE9FF;
    border-radius: 4px;
    cursor: pointer;
    color: #4FE9FF;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(79,233,255,0.4), inset 0 0 10px rgba(79,233,255,0.16);
    transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .game-mute-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    shape-rendering: crispEdges;     /* keep pixel edges sharp */
    filter: drop-shadow(0 0 3px currentColor);
  }
  .game-mute-btn:hover { background: rgba(79,233,255,0.18); }
  .game-mute-btn:active { transform: scale(0.94); }
  .game-mute-btn.muted {
    color: #ff6b8a; border-color: #ff6b8a;
    box-shadow: 0 0 10px rgba(255,107,138,0.4), inset 0 0 10px rgba(255,107,138,0.16);
  }
  @media (max-width: 600px) {
    .game-mute-btn { width: 34px; height: 34px; min-width: 34px; }
    .game-mute-btn svg { width: 20px; height: 20px; }
  }
  /* "Best" stats row shown beneath HUDs and inside win screens. Lives on
     top of whatever game-body background (clouds, grass, etc.), so it
     carries its own white plate to stay legible everywhere. */
  .game-best-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    margin: 0 0 10px;
    padding: 7px 10px;
    background: rgba(12, 6, 24, 0.6);
    border: 2px solid #FF4FB8;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(255,79,184,0.4), inset 0 0 16px rgba(255,79,184,0.12);
    font-size: 11px;
    color: #b6a6d8;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  @media (max-width: 480px) {
    .game-best-row { font-size: 10px; gap: 6px 10px; padding: 5px 8px; }
  }
  .game-best-row .best-label { color: #b6a6d8; font-weight: bold; }
  .game-best-row .best-value { color: #FF4FB8; text-shadow: 0 0 7px rgba(255,79,184,0.7); }
  .game-new-best {
    display: inline-block;
    background: #FFD93D;
    color: #5a3d00;
    border: 2px solid #000;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 8px auto;
    box-shadow: 2px 2px 0 #000;
    animation: game-new-best-pop 0.5s ease;
  }
  @keyframes game-new-best-pop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  .game-reset-best-btn {
    background: rgba(7, 3, 15, 0.55);
    border: 2px solid #FF4FB8;
    border-radius: 4px;
    color: #FF4FB8;
    text-shadow: 0 0 6px rgba(255,79,184,0.7);
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 11px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 0 10px rgba(255,79,184,0.4), inset 0 0 10px rgba(255,79,184,0.16);
    transition: transform 0.08s, box-shadow 0.08s, background 0.15s, color 0.15s;
  }
  .game-reset-best-btn:hover { background: rgba(255,79,184,0.18); color: #fff; }
  .game-reset-best-btn:active { transform: scale(0.95); }

  /* ==================== MEMORY MATCH ==================== */
  .memory-window {
    width: min(560px, 48vw);
  }
  /* Center on the desktop. Mobile media query below handles small screens. */
  @media (min-width: 601px) {
    .memory-window {
      top: 0; left: 0; right: 0; bottom: 0;
      margin: auto;
      height: fit-content;
    }
  }
  .memory-body {
    background: var(--bg-arcade, url('IMAGES/BACKGROUNDS/ARCADE_PIXELS_01.webp')) center/cover no-repeat;
    image-rendering: pixelated;
    padding: 14px !important;
    position: relative;
    max-height: calc(100vh - 80px);   /* override default 500px so the full board is visible */
  }
  .mm-hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(12, 6, 24, 0.6);
    border: 2px solid #FF4FB8;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(255,79,184,0.4), inset 0 0 16px rgba(255,79,184,0.12);
    padding: 8px 12px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: bold;
  }
  .mm-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 3px;
  }
  .mm-stat-label {
    font-size: 10px;
    color: #b6a6d8;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .mm-stat-value {
    font-size: 18px;
    color: #4FE9FF;
    text-shadow: 0 0 9px rgba(79,233,255,0.7);
  }
  .mm-reset {
    background: rgba(7, 3, 15, 0.55);
    color: #4FE9FF;
    border: 2px solid #4FE9FF;
    border-radius: 4px;
    text-shadow: 0 0 8px rgba(79,233,255,0.7);
    padding: 8px 14px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-shadow: 0 0 12px rgba(79,233,255,0.45), inset 0 0 12px rgba(79,233,255,0.18);
    transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
  }
  .mm-reset:hover { background: rgba(79,233,255,0.18); }
  .mm-reset:active { transform: scale(0.96); }
  .mm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    perspective: 900px;
  }
  .mm-card {
    aspect-ratio: 1 / 1;
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(.4, 0, .3, 1.3);
  }
  .mm-card.flipped { transform: rotateY(180deg); }
  .mm-card.matched { cursor: default; }
  .mm-card.matched .mm-card-front {
    border-color: #5dff9b;
    box-shadow:
      0 0 0 2px #000,
      0 0 16px rgba(93,255,155,0.6),
      inset 0 0 18px rgba(93,255,155,0.20);
    animation: mm-match-pop 0.5s ease;
  }
  .mm-card.shake { animation: mm-shake 0.4s ease; }
  @keyframes mm-match-pop {
    /* Keep the rotateY(180deg) so the flipped face stays toward the viewer —
       without it the card briefly turns away (back is hidden) and vanishes. */
    0%, 100% { transform: rotateY(180deg) scale(1); }
    40%      { transform: rotateY(180deg) scale(1.08); }
  }
  @keyframes mm-shake {
    0%, 100% { transform: rotateY(180deg) translateX(0); }
    25%      { transform: rotateY(180deg) translateX(-4px); }
    75%      { transform: rotateY(180deg) translateX(4px); }
  }
  .mm-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 2px solid #000;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
    overflow: hidden;
    background: linear-gradient(160deg, #1a2240 0%, #0d1227 100%);
    box-shadow:
      inset 0 0 14px rgba(0,0,0,0.45),
      2px 2px 0 #000;
  }
  /* CRT scanlines so the cards read as part of the neon screen */
  .mm-card-face::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 4px;
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.20) 0 1px, transparent 1px 3px);
  }
  .mm-card-back {
    /* face-down: dark card + soft glossy sheen (top corner) + Peace's logo */
    background:
      radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.16), transparent 55%),
      url('IMAGES/ICONS/PEACES_LOGO_VERTICAL.png') center/64% no-repeat,
      linear-gradient(160deg, #1a2240 0%, #0d1227 100%);
  }
  .mm-card-front {
    transform: rotateY(180deg);
    padding: 10%;
    /* clean dark face behind the icon (the shine lives on the back) */
    background: linear-gradient(160deg, #1a2240 0%, #0d1227 100%);
  }
  .mm-card-front img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
  }
  @media (hover: hover) {
    .mm-card:not(.flipped):not(.matched):hover {
      transform: translateY(-3px);
    }
  }
  .mm-win {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }
  .mm-win.show { display: flex; animation: mm-fade-in 0.3s ease; }
  .mm-win-card {
    background: rgba(14, 8, 28, 0.96);
    border: 2px solid #FF4FB8;
    border-radius: 8px;
    box-shadow: 0 0 22px rgba(255,79,184,0.5), inset 0 0 22px rgba(255,79,184,0.12);
    padding: 18px 22px 22px;
    text-align: center;
    width: min(280px, 92%);
    animation: mm-pop-in 0.35s cubic-bezier(.4, 0, .3, 1.4);
  }
  /* Trophy banner at the top — only shows when the player set a new best. */
  .mm-win-banner {
    margin: 0 auto 14px;
  }
  /* Scoped to .mm-win-card to beat `.window-body h2 { color: #000; font-size: 16px }`
     which sits at higher specificity (0,1,1) than the bare class selector. */
  .mm-win-card .mm-win-title {
    font-size: 28px;
    font-weight: bold;
    color: #4FE9FF;
    text-shadow:
      0 0 14px rgba(79, 233, 255, 0.85),
      0 0 28px rgba(79, 233, 255, 0.45);
    margin: 0 0 16px;
    letter-spacing: 0.04em;
    font-family: inherit;
  }
  .mm-win-stats {
    display: flex;
    gap: 26px;
    justify-content: center;
    margin-bottom: 4px;
  }
  .mm-win-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b6a6d8;
  }
  .mm-win-stat b {
    font-size: 26px;
    line-height: 1;
    color: #4FE9FF;
    text-shadow: 0 0 9px rgba(79,233,255,0.7);
    font-weight: bold;
  }
  .mm-win-divider {
    border: 0;
    border-top: 1px dashed rgba(255, 79, 184, 0.35);
    margin: 14px 0 10px;
  }
  .mm-win-prev-best {
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: #b6a6d8;
    margin: 0 0 16px;
  }
  .mm-win-prev-best .best-value {
    color: #FF4FB8;
    text-shadow: 0 0 6px rgba(255,79,184,0.45);
    font-weight: 700;
  }
  /* Play Again — full mockup spec. Scoped to .mm-win-card to beat both
     the base .mm-reset rule (HUD "New Game" stays small) and the mobile
     `.mm-reset { padding: 6px 11px; font-size: 11px }` override. */
  .mm-win-card .mm-reset {
    display: inline-block;
    background: transparent;
    color: #4FE9FF;
    border: 2px solid #4FE9FF;
    border-radius: 4px;
    padding: 8px 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(79, 233, 255, 0.7);
    box-shadow:
      0 0 12px rgba(79, 233, 255, 0.45),
      inset 0 0 12px rgba(79, 233, 255, 0.16);
  }
  .mm-win-card .mm-reset:hover {
    background: rgba(79, 233, 255, 0.14);
  }
  .mm-win-card .mm-reset:active {
    transform: scale(0.97);
  }
  @keyframes mm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes mm-pop-in {
    0%   { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  @media (max-width: 720px) {
    .memory-window {
      top: 4%; bottom: auto; right: 4%; left: 4%;
      width: auto;
    }
    .memory-body { padding: 10px !important; }
    .mm-grid { gap: 8px; }
    .mm-hud {
      padding: 6px 10px;
      font-size: 12px;
      gap: 6px;
      flex-wrap: wrap;
    }
    .mm-stat-value { font-size: 15px; }
    .mm-stat-label { font-size: 9px; }
    .mm-reset { padding: 6px 11px; font-size: 11px; }
    .mm-card-front { padding: 8%; }
    .mm-win-card .mm-win-title { font-size: 24px; margin-bottom: 14px; }
    .mm-win-card { padding: 16px 18px 20px; }
    .mm-win-stats { gap: 22px; }
    .mm-win-stat b { font-size: 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mm-card { transition: none; }
    .mm-card.shake { animation: none; }
    .mm-card.matched .mm-card-front { animation: none; }
  }

  .detail-subwindow {
    width: min(420px, 80vw);
    top: 10%;
    left: auto;
    right: 20%;
  }
  .detail-body {
    position: relative;
    overflow: hidden;
  }
  .detail-body .detail-bg-icon {
    position: absolute;
    right: -16px;
    bottom: -20px;
    width: 180px;
    height: 180px;
    opacity: 0.22;
    filter: blur(3px);
    transform: rotate(-10deg) scale(1.15);
    pointer-events: none;
    z-index: 0;
    object-fit: contain;
    image-rendering: pixelated;
  }
  .detail-body h3,
  .detail-body p {
    position: relative;
    z-index: 1;
  }

  /* Shop window */
  .shop-window {
    top: 6%; left: 10%;
    right: auto;
    width: min(700px, 56vw);
  }
  #shopWindow .window-body {
    background: var(--bg-shop, url('IMAGES/BACKGROUNDS/CITY_PIXELS_01.webp')) center/cover no-repeat;
    image-rendering: pixelated;
  }
  /* Generous horizontal breathing room on desktop only.
     On mobile (<=600px) the global mobile rule keeps padding tight (12px). */
  @media (min-width: 601px) {
    #shopWindow .window-body { padding: 12px 26px; }
  }
  /* Mobile: pull the inner shop tile in from the window edges so the
     product panel feels less edge-to-edge — window itself stays the
     standard global 94vw. */
  /* Shop tile — single off-white translucent panel that holds all products
     side-by-side (replaces the old per-item paper posters). */
  /* Products sit directly on the window background (no panel, no dividers),
     up to three across and centered for any item count. */
  .shop-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  .shop-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    width: 180px;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
    position: relative;
  }
  /* Hover zooms only the product image; name/price/button stay put. Skipped for
     "coming soon" items. z-index keeps the enlarged image above its neighbors. */
  .shop-item:not(.coming-soon):hover { z-index: 5; }
  @media (hover: hover) {
    .shop-item:not(.coming-soon):hover .shop-item-img img,
    .shop-item:not(.coming-soon):hover .shop-item-img svg { transform: scale(1.12); }
  }
  /* Fixed-height image area so the names below it line up across items.
     Images scale to fit (contain) within this area. */
  .shop-item-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    image-rendering: pixelated;
  }
  .shop-item-img svg,
  .shop-item-img img {
    image-rendering: pixelated;
    max-width: 160px;
    max-height: 136px;
    object-fit: contain;
    transition: transform 0.2s ease;
  }
  /* Mobile shop — compact tile, items a bit larger than the smallest variant.
     Divider hairlines are removed since items stack into a single column. */
  @media (max-width: 600px) {
    .shop-grid {
      gap: 10px;
    }
    .shop-item {
      width: 150px;
      padding: 4px 6px;
      gap: 6px;
    }
    .shop-item-img { height: 116px; }
    .shop-item-img svg,
    .shop-item-img img {
      max-width: 124px;
      max-height: 116px;
    }
    .shop-buy-btn {
      width: 125px;
      height: 25px;
    }
  }
  .shop-item-name {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #000;
    text-align: center;
  }
  /* Price tag — uses the PRICE_TAG_01 artwork as the background, with the price
     in Press Start 2P (8-bit). Padded left so the text sits on the tag body,
     clear of the eyelet/point. Enlarged so the chunky pixel price fills the tag. */
  .shop-price-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 32px;
    padding-left: 13px;
    margin-top: auto;   /* push price + button to the bottom so they align across items */
    background: url('IMAGES/ICONS/PRICE_TAG_01.png') center/100% 100% no-repeat;
    image-rendering: auto;
    font-family: 'Press Start 2P', 'Chicago', monospace;
    font-size: 12px;
    color: #000;
  }
  .shop-buy-btn {
    background: url('IMAGES/add-to-cart-btn.png?v=5') center/contain no-repeat;
    border: none;
    display: block;
    margin: 0 auto;
    width: 140px;
    height: 27px;
    padding: 0;
    font-size: 0;
    color: transparent;
    cursor: pointer;
    image-rendering: pixelated;
    transition: transform 0.06s ease, filter 0.1s ease;
  }
  .shop-buy-btn:hover { filter: brightness(1.05); }
  .shop-buy-btn:active { transform: translateY(1px); filter: brightness(0.95); }
  .shop-buy-btn:disabled { opacity: 0.6; cursor: default; }
  .shop-item-img img { cursor: pointer; }

  /* Coming Soon state — dims card, spray-paint overlay, non-clickable */
  .shop-item.coming-soon {
    cursor: default;
    justify-content: center;
  }
  .shop-item.coming-soon .cs-overlay { pointer-events: none; }
  .shop-item.coming-soon > *:not(.cs-overlay):not(.shop-item-name) {
    filter: blur(2px) grayscale(0.4) brightness(0.85);
    position: relative;
    z-index: 1;
  }
  .shop-item.coming-soon .shop-item-name {
    position: relative;
    z-index: 2;
    color: #000;
  }
  .shop-item.coming-soon .shop-price-tag,
  .shop-item.coming-soon .shop-buy-btn { display: none; }
  .cs-overlay {
    position: absolute;
    top: 0;
    left: -5%;
    right: -5%;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 4;
  }
  .cs-overlay img {
    width: 84%;
    height: auto;
    max-width: none;
    transform: rotate(-5deg);
  }

  /* Service Locations window (interactive map) — overlay flex-centers it */
  #infoWindow.active {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #infoWindow .info-window {
    position: relative !important;
    top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
    width: min(960px, 82vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
  }
  .info-body {
    background: var(--bg-info, url('IMAGES/BACKGROUNDS/WAVES_PIXAL_01.webp')) center/cover no-repeat;
    image-rendering: pixelated;
    padding: 32px !important;
    flex: 1;
    min-height: 0;
    /* override .window-body's default max-height:500px and overflow:auto so
       the body can flex-grow inside the window cap and grid layout works */
    max-height: none !important;
    overflow: hidden !important;
    display: grid;
    /* 1fr row + 1fr col forces the single grid cell to span the full body
       height/width. Without this, the cell auto-sizes to content and the
       child's max-height:100% can't constrain the image. */
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    place-items: center;
    box-sizing: border-box;
  }
  /* The frame uses aspect-ratio + max-width/max-height: 100% to letterbox
     itself within the 1fr grid cell. Browsers correctly pick the larger of
     the two valid sizes (limited by the smaller dimension), so the frame
     always fits and keeps the map's shape. The img fills the frame exactly
     since their ratios match — keeps dot positions accurate. */
  .map-frame {
    position: relative;
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px #fff, 2px 2px 0 rgba(0,0,0,0.25);
    line-height: 0;
    aspect-ratio: 2440 / 1494;
    max-width: 100%;
    max-height: 100%;
  }
  .map-frame img {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: auto;
  }
  /* Meet-up dot markers */
  .spot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    cursor: pointer;
    z-index: 5;
    background: transparent;
    border: 0;
    padding: 0;
  }
  .spot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid #e6398c;
    border-radius: 50%;
    animation: spotPulse 1.6s ease-out infinite;
    opacity: 0.9;
    box-sizing: border-box;
  }
  .spot::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #e6398c;
    border: 2px solid #000;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #fff;
    box-sizing: border-box;
  }
  .spot.hub::after  { background: #7B5EC9; }
  .spot.hub::before { border-color: #7B5EC9; }
  /* Muted spots — no pulse, no color fill. Used for cities that aren't
     actively highlighted (currently Fairfield, Dixon, Sonoma). The dot is
     still clickable and shows its popup; it just doesn't draw attention. */
  .spot.muted {
    pointer-events: none;
    cursor: default;
  }
  .spot.muted::before { display: none; }
  .spot.muted::after {
    background: #8a8a8a;
    border-color: #2b2b2b;
  }
  .spot.muted:hover::after { transform: none; }
  .spot:hover::after { transform: scale(1.15); }
  .spot:focus { outline: none; }
  .spot:focus::after { box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000; }
  @keyframes spotPulse {
    0%   { transform: scale(1);   opacity: 0.9; }
    70%  { transform: scale(2.4); opacity: 0;   }
    100% { transform: scale(2.4); opacity: 0;   }
  }
  @media (max-width: 700px) {
    .spot { width: 12px; height: 12px; }
  }
  /* Popup tooltip — fixed-position so it can never be cut off by the map frame */
  .spot-popup {
    position: fixed;
    transform: translate(-50%, calc(-100% - 18px));
    background: #e0ecf6;
    border: 2px solid #2d5f8a;
    box-shadow: 2px 2px 0 rgba(45, 95, 138, 0.4);
    padding: 5px 10px;
    font-family: 'Chicago', 'Geneva', monospace;
    color: #1a2b4a;
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
    image-rendering: pixelated;
    text-align: center;
    text-shadow:
      0 0 1px currentColor,
      0 0 3px rgba(255, 180, 80, 0.45),
      0 0 6px rgba(255, 140, 40, 0.2);
    letter-spacing: 0.6px;
  }
  .spot-popup-city {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .spot-popup-label {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin-top: 1px;
    opacity: 0.85;
  }
  .spot-popup::before,
  .spot-popup::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .spot-popup::before {
    bottom: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #2d5f8a;
  }
  .spot-popup::after {
    bottom: -5px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #e0ecf6;
  }

  /* Login / Portal window */
  .portal-window {
    top: 3%; left: 0; right: 0;
    margin: 0 auto;
    width: min(700px, 85vw);
    height: auto;
    max-height: 88vh;
  }
  .portal-body {
    padding: 20px !important;
    max-height: 80vh;
    overflow-y: auto;
    background: url('IMAGES/BACKGROUNDS/STARS_PIXAL_01.webp?v=2') center/cover no-repeat;
    image-rendering: pixelated;
  }
  .portal-body .content-box {
    background: rgba(245,247,250,0.92);
    border: 2px solid #000;
    padding: 16px 20px;
    color: #000;
  }
  .portal-body input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 2px solid #000;
    font-family: 'Geneva','Chicago',monospace;
    font-size: 12px;
    box-sizing: border-box;
  }
  .portal-body button {
    width: 100%;
    padding: 8px;
    background: #000;
    color: #fff;
    border: 2px solid #000;
    font-family: 'Chicago','Geneva',monospace;
    font-size: 12px;
    cursor: pointer;
  }
  .portal-body button:hover { background: #333; }
  /* Clock In/Out — make the portal's main action read as a real, pressable
     button. Colours stay inline (JS toggles green for in / red for out); this
     only adds a raised "ledge" shadow, a top bevel highlight, and a press-down
     on tap. #clockBtn beats .portal-body button on specificity. */
  #clockBtn {
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    box-shadow: 0 4px 0 rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.40);
    transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.12s ease;
  }
  #clockBtn:hover { filter: brightness(1.05); }
  #clockBtn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.30);
  }
  /* Support-type chooser: action sheet on mobile, centered on desktop.
     Reason it lives here and not inline on the element: the iOS Safari
     virtual keyboard reflow + the retro Mac OS aesthetic are easier to
     tune from one place. */
  .support-type-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: auto;
  }
  .support-type-modal[hidden] { display: none; }
  .support-type-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .support-type-sheet {
    position: relative;
    width: calc(100% - 24px);
    max-width: 420px;
    margin: 0 12px 12px;
    background: rgba(245,247,250,0.96);
    border: 2px solid #000;
    padding: 20px;
    box-shadow: 4px 4px 0 #000;
    font-family: 'Chicago','Geneva',monospace;
  }
  .support-type-title {
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 16px;
    color: #000;
    letter-spacing: 0.3px;
  }
  /* Selectors are scoped to .support-type-modal so they beat the generic
     `.portal-body button` rule on specificity (0,2,0 > 0,1,1). Without
     this, the Cancel link gets re-styled as a solid black button. */
  .support-type-modal .support-type-choice {
    display: block;
    width: 100%;
    padding: 16px;
    margin-bottom: 12px;
    border: 2px solid #000;
    font-family: 'Chicago','Geneva',monospace;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.3px;
    cursor: pointer;
    min-height: 52px;
    box-sizing: border-box;
    position: relative;
    /* Chiseled raised-button look: bright inset highlight on top edge,
       dark inset shadow on bottom edge, plus a hard outer drop so the
       button reads as "lifted off the sheet." */
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,0.45),
      inset 0 -2px 0 rgba(0,0,0,0.18),
      0 3px 0 #000;
    transition: transform 60ms ease, box-shadow 60ms ease;
  }
  .support-type-modal .support-type-choice:active {
    /* Press the button down: drop its outer shadow, flip the inset
       highlight to bottom, nudge the element 3px down. */
    box-shadow:
      inset 0 -2px 0 rgba(255,255,255,0.25),
      inset 0 2px 0 rgba(0,0,0,0.22),
      0 0 0 #000;
    transform: translateY(3px);
  }
  /* Color pair "C": pale gold for Direct, periwinkle for Admin. Both
     sampled from the stars background tile. */
  .support-type-modal .support-type-choice[data-type="direct"] { background: #F0D68A; color: #2b2200; }
  .support-type-modal .support-type-choice[data-type="direct"]:hover,
  .support-type-modal .support-type-choice[data-type="direct"]:active { background: #E0C570; }
  .support-type-modal .support-type-choice[data-type="admin"]  { background: #6A85B0; color: #fff; }
  .support-type-modal .support-type-choice[data-type="admin"]:hover,
  .support-type-modal .support-type-choice[data-type="admin"]:active { background: #5A7298; }
  .support-type-modal .support-type-cancel {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 2px;
    background: none;
    border: none;
    font-family: 'Chicago','Geneva',monospace;
    font-size: 12px;
    color: #777;
    cursor: pointer;
    text-decoration: underline;
  }
  .support-type-modal .support-type-cancel:hover { background: none; color: #000; }
  /* Desktop: center the sheet instead of bottom-docking it. */
  @media (min-width: 600px) {
    .support-type-modal { align-items: center; }
    .support-type-sheet { margin: 0 16px; }
  }

  /* ==================== ACCOUNT DROPDOWN + CHANGE PASSWORD (portal) ==================== */
  /* One "Account ▾" chip in each portal header replaces the old Sign Out
     button. Selectors are scoped under .portal-body so they beat the generic
     `.portal-body button` rule (same trick the support-type sheet uses). */
  .acct-wrap { position: relative; display: inline-block; }
  .portal-body .portal-acct-btn {
    font-size: 10px;
    padding: 4px 12px;
    width: auto;
    background: #8BB8D8;
    color: #000;
    border: 2px solid #6A9AB8;
    font-family: 'Chicago','Geneva',monospace;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
  }
  .portal-body .portal-acct-btn:hover { background: #7BA8C8; }
  .acct-chev { font-size: 7px; }
  /* Classic Mac pull-down menu */
  .acct-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 170px;
    background: #fff;
    border: 2px solid #000;
    box-shadow: 3px 3px 0 #000;
    padding: 2px;
    z-index: 60;
    text-align: left;
  }
  .acct-menu[hidden] { display: none; }
  .portal-body .acct-menu .acct-item {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    color: #000;
    border: none;
    padding: 8px 14px;
    font-family: 'Chicago','Geneva',monospace;
    font-size: 12px;
    white-space: nowrap;   /* keep "Change Password" on one line (mobile font is larger) */
    /* Stop iOS from auto-inflating the longer "Change Password" line so it
       no longer dwarfs "Sign Out" on iPhone. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    cursor: pointer;
  }
  .portal-body .acct-menu .acct-item:hover { background: #000; color: #fff; }
  .acct-divider { height: 2px; background: #000; margin: 2px 4px; }

  /* Change Password sheet — retro modal matching the support-type chooser.
     Lives inside .portal-body (never inside a display:none view) so it's
     available from the Parent, Employee, and Media portals alike. */
  .cpw-modal {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
  }
  .cpw-modal[hidden] { display: none; }
  .cpw-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .cpw-sheet {
    position: relative;
    width: calc(100% - 32px);
    max-width: 340px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: rgba(245,247,250,0.97);
    border: 2px solid #000;
    box-shadow: 4px 4px 0 #000;
    padding: 18px;
    font-family: 'Chicago','Geneva',monospace;
    -webkit-text-size-adjust: 100%;   /* keep popup text sizes consistent on iOS */
    text-size-adjust: 100%;
  }
  /* The X marks come from the inherited .window-btn.close ::before/::after
     pseudo-elements; these props just position + size the box. */
  .cpw-modal .cpw-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 2px solid #000;
    border-radius: 0;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    font-size: 0;
    line-height: 0;
    box-sizing: content-box;
    cursor: pointer;
  }
  .cpw-title {
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 16px;
    color: #000;
  }
  .cpw-modal .cpw-sheet input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 2px solid #000;
    font-family: 'Geneva','Chicago',monospace;
    font-size: 12px;
    box-sizing: border-box;
    background: #fff;
  }
  .cpw-msg {
    font-size: 11px;
    margin: 2px 0 10px;
    text-align: center;
    font-family: 'Geneva','Chicago',monospace;
  }
  .cpw-msg[hidden] { display: none; }
  .cpw-modal .cpw-save {
    display: block;
    width: 100%;
    padding: 13px;
    margin-top: 2px;
    border: 2px solid #000;
    background: #9CC195;
    color: #143a10;
    font-family: 'Chicago','Geneva',monospace;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,0.45),
      inset 0 -2px 0 rgba(0,0,0,0.18),
      0 3px 0 #000;
  }
  .cpw-modal .cpw-save:active { transform: translateY(3px); box-shadow: 0 0 0 #000; }
  .cpw-modal .cpw-save:disabled { opacity: 0.7; cursor: default; }
  .cpw-modal .cpw-cancel {
    display: block;
    width: 100%;
    padding: 9px;
    margin-top: 6px;
    background: none;
    border: none;
    color: #777;
    font-family: 'Chicago','Geneva',monospace;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
  }
  .cpw-modal .cpw-cancel:hover { color: #000; background: none; }

  /* Reconfirm modal — same retro sheet pattern as the support-type
     chooser. Blocking, so no backdrop click-through and no Cancel. */
  .reconfirm-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: auto;
  }
  .reconfirm-modal[hidden] { display: none; }
  .reconfirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .reconfirm-sheet {
    position: relative;
    width: calc(100% - 24px);
    max-width: 440px;
    margin: 0 12px 12px;
    background: rgba(245, 247, 250, 0.97);
    border: 2px solid #000;
    padding: 20px;
    box-shadow: 4px 4px 0 #000;
    font-family: 'Chicago', 'Geneva', monospace;
    color: #000;
  }
  .reconfirm-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    gap: 8px;
  }
  .reconfirm-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.3px;
  }
  .reconfirm-progress {
    font-size: 11px;
    color: #555;
    font-weight: 700;
  }
  .reconfirm-progress:empty { display: none; }
  .reconfirm-intro {
    font-size: 12px;
    line-height: 1.4;
    margin: 0 0 14px;
    color: #333;
  }
  .reconfirm-shift-card {
    background: #fff;
    border: 2px solid #000;
    padding: 12px;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 2px 2px 0 #000;
  }
  .reconfirm-shift-card .reconfirm-shift-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
  }
  .reconfirm-shift-card .reconfirm-shift-label {
    font-weight: 700;
    color: #555;
  }
  .reconfirm-shift-card .reconfirm-shift-value {
    text-align: right;
    color: #000;
    font-weight: 700;
  }
  .reconfirm-input-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333;
    margin-bottom: 12px;
  }
  .reconfirm-input-label input {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 4px;
    border: 2px solid #000;
    background: #fff;
    box-sizing: border-box;
    text-transform: uppercase;
  }
  .reconfirm-error {
    font-size: 11px;
    color: #B22;
    margin-bottom: 10px;
    font-weight: 700;
  }
  .reconfirm-modal .reconfirm-submit {
    display: block;
    width: 100%;
    padding: 14px;
    border: 2px solid #000;
    background: #5FCF80;
    color: #fff;
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.3px;
    cursor: pointer;
    min-height: 50px;
    box-sizing: border-box;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.45),
      inset 0 -2px 0 rgba(0, 0, 0, 0.18),
      0 3px 0 #000;
    transition: transform 60ms ease, box-shadow 60ms ease;
  }
  .reconfirm-modal .reconfirm-submit:active {
    box-shadow:
      inset 0 -2px 0 rgba(255, 255, 255, 0.25),
      inset 0 2px 0 rgba(0, 0, 0, 0.22),
      0 0 0 #000;
    transform: translateY(3px);
  }
  .reconfirm-modal .reconfirm-submit:disabled {
    background: #aaa;
    cursor: wait;
  }
  @media (min-width: 600px) {
    .reconfirm-modal { align-items: center; }
    .reconfirm-sheet { margin: 0 16px; }
  }

  /* Reuse the retro window-close button (.window-btn.close) for the
     reconfirm modal — same black-bordered 16x16 square + rotated-bars X.
     Selector needs the #parentPortalWindow prefix to beat the mobile rule
     `#parentPortalWindow .portal-body button { padding:14px; min-height:48px }`
     which has specificity (1,1,1). Hover/active states keep working
     because .window-btn.close:hover/:active has higher specificity than
     .portal-body button:hover. */
  #parentPortalWindow .reconfirm-modal .reconfirm-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 16px;
    height: 16px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 2px solid #000;
    border-radius: 0;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    flex-shrink: 0;
    box-sizing: content-box;
  }
  /* Match the mobile bump that .window-btn gets sitewide — touch target. */
  @media (max-width: 600px) {
    #parentPortalWindow .reconfirm-modal .reconfirm-close {
      width: 22px;
      height: 22px;
      top: 10px;
      right: 10px;
    }
  }

  /* Persistent banner — sits at top of employee portal, count of pending
     reconfirms. Tap to reopen the modal. Hidden when count is zero.
     Selector is #parentPortalWindow-scoped to beat the mobile rule
     `#parentPortalWindow .portal-body button` (1,1,1) which would
     otherwise paint it black-on-white with 14px padding. */
  #parentPortalWindow .reconfirm-banner {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 14px;
    min-height: 0;
    background: #F5A23A;
    color: #2b1900;
    border: 2px solid #000;
    border-radius: 0;
    box-shadow: 2px 2px 0 #000;
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 60ms ease, box-shadow 60ms ease;
  }
  #parentPortalWindow .reconfirm-banner:hover { background: #E89030; }
  #parentPortalWindow .reconfirm-banner:active {
    box-shadow: 0 0 0 #000;
    transform: translate(2px, 2px);
  }
  #parentPortalWindow .reconfirm-banner[hidden] { display: none; }
  /* Support-type pill used in Recent Activity entries. Colors mirror
     the clock-in modal buttons: pale gold for Direct, periwinkle for
     Admin. */
  .ts-type-pill {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 6px;
    border: 1px solid #000;
    font-size: 10px;
    font-weight: 700;
    background: #F0D68A;
    color: #2b2200;
  }
  .ts-type-pill.admin { background: #6A85B0; color: #fff; }

  .timesheet-entry {
    background: rgba(245,247,250,0.88);
    border: 2px solid #000;
    padding: 8px 12px;
    margin-bottom: 6px;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
  }
  /* Today's Shift card — sits above the clock-in card on the employee portal.
     Same retro tan paper as .content-box but tighter, with a small label. */
  .portal-today-shift {
    background: #f0e8d8;
    border: 2px solid #000;
    padding: 12px 14px;
    text-align: center;
    margin-bottom: 12px;
    box-shadow: inset -1px -1px 0 #999, inset 1px 1px 0 #fff;
  }
  .portal-today-shift .pt-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #666;
    margin-bottom: 6px;
  }
  .portal-today-shift .pt-time {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin-bottom: 6px;
  }
  .portal-today-shift .pt-meta {
    font-size: 11px;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  /* Individual shift pill — used when an employee has multiple shifts today
     so each shift reads as its own little card instead of running together. */
  .portal-today-shift .pt-shift-pill {
    background: #fff;
    border: 1.5px solid #000;
    padding: 6px 10px;
    box-shadow: inset -1px -1px 0 #c0b8a8, inset 1px 1px 0 #fffdf6;
    white-space: nowrap;
  }
  .portal-today-shift.empty .pt-time {
    font-size: 13px;
    color: #555;
    font-style: italic;
    font-weight: 600;
  }
  /* Past shift — already ended today. Dim the whole card, or just the
     individual pill if multiple shifts and only some are over. */
  .portal-today-shift.past { opacity: 0.5; }
  .portal-today-shift .pt-shift-pill.past { opacity: 0.5; }

  /* Weekly calendar (employee portal) — 7 squares Sun → Sat, retro 16-bit.
     Cells are deliberately chunky: black 2px borders, pixel inset highlights,
     cream paper. Compact font so shifts fit inside the cell. */
  .portal-section-label {
    font-size: 12px;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    margin-top: 14px;
    margin-bottom: 6px;
    font-weight: 700;
  }
  /* Collapsible Recent Activity — native <details>/<summary> with the
     same label styling plus a rotating chevron indicator. */
  .portal-collapsible { margin: 0; }
  .portal-collapsible-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
  }
  .portal-collapsible-summary::-webkit-details-marker { display: none; }
  .portal-collapsible-chevron {
    display: inline-block;
    font-size: 9px;
    transition: transform 0.15s ease;
  }
  .portal-collapsible[open] > .portal-collapsible-summary .portal-collapsible-chevron {
    transform: rotate(90deg);
  }
  /* Month subgroups inside Recent Activity. Each month is its own
     nested <details>. Chevron rotates 90° when open; small count chip
     on the right indicates how many entries are in the month. */
  .portal-month-group {
    margin: 4px 0;
  }
  .portal-month-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    user-select: none;
  }
  .portal-month-summary::-webkit-details-marker { display: none; }
  .portal-month-label { flex: 1; letter-spacing: 0.5px; }
  .portal-month-count {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 10px;
    min-width: 18px;
    text-align: center;
  }
  .portal-month-group[open] > .portal-month-summary .portal-collapsible-chevron {
    transform: rotate(90deg);
  }
  .portal-month-entries {
    padding: 6px 0 4px 4px;
  }
  /* Vertical weekly calendar — 7 rows Sun → Sat, each row a retro 16-bit
     "paper" card. Date block sits left, shift details right. */
  .portal-week-vert {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
    font-family: 'Geneva', 'Chicago', 'Helvetica', sans-serif;
  }
  .portal-day-row {
    background: #f0e8d8;
    border: 2px solid #000;
    box-shadow: inset -1px -1px 0 #999, inset 1px 1px 0 #fff;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 10px;
    align-items: center;
    color: #000;
    min-height: 46px;
  }
  /* Today's row uses a soft mint green so it stays distinct from the gold
     (Direct) and periwinkle (Admin) type stripes used on the shift cards. */
  .portal-day-row.today { background: #d4ecc8; }
  .portal-day-row.past { opacity: 0.55; }
  .portal-day-row .pd-date {
    text-align: center;
    border-right: 1px solid rgba(0,0,0,0.25);
    padding-right: 8px;
  }
  .portal-day-row .pd-dow {
    font-size: 10px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    display: block;
  }
  .portal-day-row .pd-dom {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    line-height: 1.1;
    display: block;
    margin-top: 2px;
  }
  .portal-day-row.today .pd-dow { color: #2c6b1f; }
  .portal-day-row .pd-today-tag {
    display: block;
    font-size: 7px;
    font-weight: 700;
    color: #2c6b1f;
    letter-spacing: 0.5px;
    margin-top: 1px;
  }
  .portal-day-row .pd-shifts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  /* Shift block: white paper with a sharp black border and a 4px colored
     stripe on the left for type. Clearly readable at this row size. */
  .portal-day-row .pd-shift {
    background: #fff;
    border: 1px solid #000;
    border-left-width: 4px;
    border-left-color: #C8A030;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #000;
    min-width: 0;
  }
  .portal-day-row .pd-shift.admin { border-left-color: #6A85B0; }
  .portal-day-row .pd-shift .pd-shift-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }
  .portal-day-row .pd-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: #000;
    line-height: 1.2;
  }
  .portal-day-row .pd-loc {
    font-size: 10px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
  }
  /* Type label as the same gold/periwinkle pill used elsewhere in the app. */
  .portal-day-row .pd-type {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
    background: #F0D68A;
    color: #2b2200;
    border: 1px solid #000;
    padding: 2px 6px;
  }
  .portal-day-row .pd-shift.admin .pd-type {
    background: #6A85B0;
    color: #fff;
  }
  .portal-day-row .pd-empty {
    font-size: 11px;
    color: #777;
    font-style: italic;
  }
  .portal-week-empty {
    background: rgba(245,247,250,0.65);
    border: 2px dashed #555;
    padding: 10px;
    text-align: center;
    font-size: 11px;
    color: #444;
    font-style: italic;
  }

  @media (max-width: 420px) {
    .portal-day-row {
      grid-template-columns: 50px 1fr;
      gap: 8px;
      padding: 5px 7px;
    }
    .portal-day-row .pd-dom { font-size: 18px; }
    .portal-day-row .pd-shift { padding: 5px 7px; }
    .portal-day-row .pd-time { font-size: 11px; }
    .portal-day-row .pd-loc { font-size: 9px; }
  }
  .video-card {
    background: rgba(245,247,250,0.88);
    border: 2px solid #000;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
  }
  .video-card:hover { filter: brightness(0.95); }
  .video-card h4 { margin: 0 0 4px 0; font-size: 13px; }
  .video-card p { margin: 0; font-size: 10px; color: #666; }
  .parent-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
  .parent-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 10px;
    background: rgba(245,247,250,0.9);
    border-radius: 4px;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .parent-video:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    filter: none;
  }
  .parent-video-screen {
    width: 100%;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, #2a2a3a, #3a3a5a);
    border: 2px solid #000;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    image-rendering: pixelated;
  }
  .parent-video-label {
    font-family: 'Chicago','Geneva',monospace;
    font-size: 11px;
    font-weight: 700;
    color: #000;
    margin-bottom: 2px;
    word-break: break-word;
  }
  .parent-video-date {
    font-family: 'Geneva','Chicago',monospace;
    font-size: 9px;
    color: #888;
  }

  /* Product Detail Window */
  .product-detail-window {
    top: 8%;
    left: 15%;
    width: min(480px, 50vw);
  }
  .product-detail-window {
    background: rgba(245,247,250,0.92);
  }
  #productDetailWindow .window-body {
    background: rgba(245,247,250,0.85) !important;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.06);
  }
  #productDetailWindow .window-body { text-shadow: none; }
  .product-detail-body {
    display: flex;
    gap: 20px;
    padding: 20px !important;
  }
  .product-detail-imgs {
    flex-shrink: 0;
  }
  .product-detail-imgs .main-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    border: 2px solid #000;
    background: rgba(255,255,255,0.5);
    image-rendering: pixelated;
    display: block;
  }
  .product-detail-imgs .thumbs {
    display: flex;
    gap: 4px;
    margin-top: 6px;
  }
  .product-detail-imgs .thumb {
    width: 36px;
    height: 36px;
    border: 2px solid #000;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    object-fit: contain;
  }
  .product-detail-imgs .thumb.active {
    border-color: #5B6AE6;
  }
  .product-detail-info h2 {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #000;
  }
  .product-detail-info .detail-desc {
    font-size: 12px;
    color: #444;
    line-height: 1.5;
    margin-bottom: 14px;
    text-shadow:
      0 0 1px currentColor,
      0 0 4px rgba(255, 180, 80, 0.7),
      0 0 9px rgba(255, 140, 40, 0.3);
  }
  .product-detail-info .detail-price {
    font-family: 'Press Start 2P', 'Chicago', monospace;
    font-size: 16px;
    color: #000;
    margin: 4px 0 16px;
    /* amber CRT phosphor glow — subtle */
    text-shadow:
      0 0 1px currentColor,
      0 0 4px rgba(255, 180, 80, 0.5),
      0 0 8px rgba(255, 140, 40, 0.22);
  }

  /* Lightbox */
  .lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .lightbox-overlay.active {
    display: flex;
  }
  .lightbox-overlay img {
    max-width: 80vw;
    max-height: 80vh;
    image-rendering: pixelated;
    border: 4px solid #fff;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
  }
  .form-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #000;
    margin-bottom: 3px;
    font-family: 'Chicago', 'Geneva', monospace;
  }
  .form-label .required {
    font-weight: 400;
    color: #666;
  }

  /* Status bar link on hover */
  .status-bar {
    position: fixed;
    bottom: 0; left: 0;
    height: 18px;
    background: #fff;
    border-top: 2px solid #000;
    padding: 0 8px;
    font-size: 10px;
    color: #000;
    font-family: 'Chicago', 'Geneva', monospace;
    display: flex;
    align-items: center;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .status-bar.visible { opacity: 1; }



  /* ==================== KIDS PARADE ==================== */
  .parade {
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    will-change: transform;
    z-index: 95;
    pointer-events: none;
  }
  .parade .kid {
    image-rendering: pixelated;
    height: 130px;
    display: block;
  }
  /* Two-frame walk cycle: frame A = legs spread, frame B = legs passing.
     Driven by JS (single setInterval) which toggles .frame-b on every
     kid-step simultaneously every 500ms — one timer = no drift between
     kids. We use visibility (not display) so A always reserves layout
     height — otherwise the kid-step collapses and B renders off-screen
     beneath the parade. */
  .parade .kid-step {
    position: relative;
  }
  .parade .kid-step .kid-b {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
  }
  .parade .kid-step.frame-b .kid-a { visibility: hidden; }
  .parade .kid-step.frame-b .kid-b { visibility: visible; }
  @keyframes kidStepA {
    0%, 49.99% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  @keyframes kidStepB {
    0%, 49.99% { opacity: 0; }
    50%, 100% { opacity: 1; }
  }
  .parade .kid-wrap {
    margin-bottom: 0;            /* feet sit right at the bottom edge of the screen (was -5px, which clipped them) */
  }
  /* (kid-bob hop animation removed — kids walk without bobbing) */
  @media (prefers-reduced-motion: reduce) {
    /* JS timer also checks reduced-motion and stops toggling .frame-b. */
    .parade .kid-step .kid-b { visibility: hidden; }
  }
  .parade .banner-wrap {
    align-self: flex-start;
    margin-bottom: 30px;
    zoom: 0.85;
  }
  .parade .banner-flutter {
    animation: bannerFlutter 3s ease-in-out infinite alternate;
  }
  @keyframes bannerFlutter {
    0% { transform: skewY(0deg) translateY(0); }
    30% { transform: skewY(-0.5deg) translateY(-2px); }
    70% { transform: skewY(0.5deg) translateY(2px); }
    100% { transform: skewY(0deg) translateY(0); }
  }

  /* Hide Safari native video controls */
  video::-webkit-media-controls {
    display: none !important;
  }
  video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
  }
  video::-webkit-media-controls-panel {
    display: none !important;
  }
  video::-webkit-media-controls-play-button {
    display: none !important;
  }

  /* Radio window */
  /* ==================== PORTAL VIDEO PLAYER ==================== */
  .video-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .video-player {
    display: flex;
    flex-direction: column;
    max-width: 92vw;
    max-height: 92vh;
    cursor: default;
  }
  .video-el {
    display: block;
    max-width: 92vw;
    max-height: 78vh;
    border: 3px solid #000;
    background: #000;
    cursor: pointer;
  }
  .video-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #1a1a1a;
    border: 3px solid #000;
    border-top: 0;
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 12px;
    color: #fff;
  }
  .vc-btn {
    background: #333;
    border: 2px solid #fff;
    color: #fff;
    width: 32px;
    height: 28px;
    font-size: 11px;
    font-family: 'Chicago', 'Geneva', monospace;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.1s;
  }
  .vc-btn:hover { background: #555; }
  .vc-btn:active { background: #777; }
  .vc-close { margin-left: 4px; }
  .vc-time {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 12px;
    color: #fff;
    min-width: 40px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .vc-scrub {
    flex: 1;
    position: relative;
    height: 14px;
    background: #333;
    border: 2px solid #fff;
    cursor: pointer;
    min-width: 80px;
  }
  .vc-scrub-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #8BB8D8;
    width: 0;
    pointer-events: none;
  }
  .vc-scrub-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 18px;
    background: #fff;
    border: 2px solid #000;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  /* Hidden YouTube iframe player for audio-only radio playback */
  #ytPlayerHidden,
  #ytPlayerHidden iframe {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: 320px;
    height: 180px;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
  }

  .radio-window {
    top: auto; bottom: 34%; left: 2%;
    width: min(380px, 84vw);
  }
  .radio-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 22px !important;
    background: var(--bg-radio, url('IMAGES/BACKGROUNDS/TWIGHLIGHT_HOMES_PIXEL_02.webp')) center/cover no-repeat;
    image-rendering: pixelated;
  }
  .radio-disc {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .radio-disc.spinning {
    animation: spin-disc 3s linear infinite;
  }
  @keyframes spin-disc {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .radio-info {
    flex: 1;
    min-width: 0;
  }
  #radioWindow .content-box {
    background: rgba(245,247,250,0.85);
    border: 2px solid #000;
    color: #000;
    text-align: center;
  }
  .radio-station-name {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .radio-station-desc {
    font-size: 9px;
    color: #666;
  }
  .radio-controls {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
  }
  .radio-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #000;
    background: #e0e0e0;
    cursor: pointer;
    font-size: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-family: sans-serif;
  }
  .radio-btn:hover { background: #ccc; }
  .radio-btn.radio-play {
    width: 28px;
    height: 28px;
    font-size: 11px;
    background: var(--brand-blue);   /* matches the volume slider accent color */
    color: #fff;
  }
  .radio-btn.radio-play:hover { background: #4856D0; }
  .radio-vol {
    flex: 1;
    min-width: 40px;
    margin-left: 4px;
    height: 14px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    accent-color: var(--brand-blue);   /* native filled-track and thumb both use brand blue */
  }
  /* iOS Safari blocks programmatic media volume — the slider does nothing
     on iPhone/iPad. JS adds .ios-no-vol to <html> on those devices and we
     swap the slider for a small note pointing at the hardware volume buttons.
     Styled to match the slider (white box, black border) so it stays legible
     against any background video frame. */
  html.ios-no-vol .radio-vol { display: none; }
  html.ios-no-vol .radio-vol-note { display: inline-block !important; }
  .radio-vol-note {
    flex: 1;
    min-width: 60px;
    margin-left: 4px;
    height: 14px;
    background: #fff;
    border: 2px solid #000;
    box-sizing: border-box;
    font-size: 8px;
    font-weight: bold;
    color: #000;
    text-align: center;
    line-height: 10px;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: 0;
  }

  /* Sound wave pulses around CD icon */
  #radioIcon .icon-img {
    position: relative;
  }
  #radioIcon.playing .icon-img::before,
  #radioIcon.playing .icon-img::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 2px solid hsl(205, 70%, 62%);
    animation: sound-pulse 2s ease-out infinite, radio-rainbow 6s linear infinite;
  }
  #radioIcon.playing .icon-img::after {
    animation-delay: 1s;
  }
  @keyframes sound-pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
  }
  @keyframes radio-rainbow {
    0%   { border-color: hsl(205, 70%, 62%); }  /* soft blue */
    25%  { border-color: hsl(180, 75%, 55%); }  /* cyan */
    50%  { border-color: hsl(140, 60%, 52%); }  /* green */
    75%  { border-color: hsl(180, 75%, 55%); }  /* cyan */
    100% { border-color: hsl(205, 70%, 62%); }  /* back to blue */
  }

  /* ==================== CART & CHECKOUT (public site) ==================== */

  /* Menu bar cart icon */
  .menu-cart {
    cursor: pointer;
    padding: 2px 6px 2px 4px;
    transition: background 0.1s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #000;
    position: relative;
    line-height: 0;
    margin-right: -8px;
  }
  .cart-icon {
    display: inline-block;
    width: 22px;
    height: 17px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('IMAGES/ICONS/CART_ICON.png') center/contain no-repeat;
            mask: url('IMAGES/ICONS/CART_ICON.png') center/contain no-repeat;
  }
  .cart-badge-menu {
    display: none;
    background: #D44;
    color: #fff;
    border: 1.5px solid #000;
    border-radius: 12px;
    min-width: 22px;
    height: 22px;
    font-size: 9px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    padding: 2px 5px 0 5px;
    line-height: 1;
    font-family: 'Press Start 2P', 'Chicago', 'Geneva', monospace;
    margin-left: 3px;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .cart-badge-menu.has-items {
    display: inline-flex;
  }

  /* Toast for cart additions — retro Mac OS dialog look */
  .cart-toast {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: max-content;
    max-width: 320px;
    background: #b5e0b5;
    border: 3px solid #000;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.5);
    padding: 0;
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #000;
    z-index: 10000;
    animation: cartToastIn 0.18s ease-out;
    display: flex;
    align-items: stretch;
    image-rendering: pixelated;
  }
  .cart-toast .toast-icon {
    background: #1a7a1a;
    color: #fff;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    border-right: 3px solid #000;
    flex-shrink: 0;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  }
  .cart-toast .toast-msg {
    padding: 13px 20px 13px 18px;
    display: flex;
    align-items: center;
    background:
      repeating-linear-gradient(
        135deg,
        rgba(255,255,255,0.15) 0 2px,
        transparent 2px 6px
      ),
      #b5e0b5;
    letter-spacing: 0.3px;
  }
  @keyframes cartToastIn {
    from { transform: translateY(-12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* Quantity stepper (used in cart and product detail) */
  .qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 2px solid #000;
    background: #fff;
  }
  .qty-stepper button {
    width: 24px;
    height: 24px;
    border: none;
    background: #fff;
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
  }
  .qty-stepper button:first-child { border-right: 2px solid #000; }
  .qty-stepper button:last-child { border-left: 2px solid #000; }
  .qty-stepper button:hover { background: #f0f0f0; }
  .qty-stepper .qty {
    padding: 0 12px;
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 12px;
    font-weight: 700;
    min-width: 14px;
    text-align: center;
  }

  /* Product detail — qty row */
  .detail-qty-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  .detail-qty-label {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #000;
  }

  /* Cart Window */
  .cart-window {
    top: 8%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: min(390px, 92vw);
  }
  .cart-window-body {
    background: #F5F0E6;
    padding: 16px 16px !important;
    max-height: 75vh;
    overflow-y: auto;
  }
  .cart-lines-wrap {
    margin-bottom: 4px;
  }
  /* Compact 2-row grid so cart lines read cleanly in the narrow cart:
     image on the left, name + remove on top, qty + line price below. */
  .cart-line {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "img  info      remove"
      "img  controls  price";
    column-gap: 12px;
    row-gap: 6px;
    padding: 10px 12px;
    border: 2px solid #000;
    background: #fff;
    margin-bottom: 8px;
  }
  .cart-line-img {
    grid-area: img;
    align-self: center;
    width: 56px;
    height: 56px;
    border: 2px solid #000;
    background: #F5ECD7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }
  .cart-line-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
  }
  .cart-line-placeholder {
    font-size: 24px;
  }
  .cart-line-info {
    grid-area: info;
    min-width: 0;
  }
  .cart-line .qty-stepper { grid-area: controls; align-self: center; justify-self: start; }
  .cart-line-name {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    margin-bottom: 3px;
  }
  .cart-line-meta {
    font-size: 10px;
    color: #666;
  }
  .cart-line-price {
    grid-area: price;
    align-self: center;
    justify-self: end;
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 12px;
    font-weight: 700;
    min-width: 55px;
    text-align: right;
  }
  /* Retro 16-bit pixel trash button (replaces the old "✕") */
  .cart-line-remove {
    grid-area: remove;
    align-self: start;
    justify-self: end;
    font-size: 0;
    color: transparent;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1.5px solid #000;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges' fill='%23666'><rect x='5' y='1' width='4' height='1'/><rect x='2' y='2' width='10' height='1'/><rect x='3' y='4' width='1' height='9'/><rect x='10' y='4' width='1' height='9'/><rect x='4' y='12' width='7' height='1'/><rect x='5' y='5' width='1' height='7'/><rect x='7' y='5' width='1' height='7'/><rect x='9' y='5' width='1' height='7'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    box-shadow: 1.5px 1.5px 0 #000;
    image-rendering: pixelated;
    cursor: pointer;
  }
  .cart-line-remove:active { transform: translate(1.5px, 1.5px); box-shadow: 0 0 0 #000; }
  .cart-summary {
    border-top: 2px solid #000;
    padding-top: 14px;
    margin-top: 14px;
  }
  .cart-summary-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 12px;
    padding: 4px 0;
    color: #000;
  }
  .cart-summary-row.total {
    font-size: 15px;
    font-weight: 700;
    border-top: 2px dashed #000;
    margin-top: 8px;
    padding-top: 10px;
  }
  .cart-summary-row .muted {
    color: #888;
    font-size: 10px;
    font-style: italic;
  }
  .cart-empty {
    text-align: center;
    padding: 40px 20px;
  }
  .cart-empty-icon {
    display: block;
    margin: 0 auto 10px;
    opacity: 0.5;
    width: 72px;
    height: 56px;
    background-color: #000;
    -webkit-mask: url('IMAGES/ICONS/CART_ICON.png') center/contain no-repeat;
            mask: url('IMAGES/ICONS/CART_ICON.png') center/contain no-repeat;
  }
  .cart-empty-msg {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 13px;
    color: #555;
    margin-bottom: 16px;
  }

  /* Big shop button (used in cart, checkout) */
  .big-shop-btn {
    display: block;
    width: 100%;
    background: #5B6AE6;
    color: #fff;
    border: 2px solid #000;
    padding: 11px;
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
    margin-top: 12px;
    box-sizing: border-box;
  }
  .big-shop-btn:hover { background: #4858d6; }
  .big-shop-btn:disabled { background: #999; cursor: not-allowed; }
  /* Checkout button — uses the CHECKOUT_01 artwork (transparent bg). Text is
     kept for screen readers but hidden visually. Wired to the same Stripe flow. */
  .cart-checkout-btn {
    display: block;
    width: min(180px, 52%);
    aspect-ratio: 894 / 228;
    margin: 16px auto 4px;
    background: url('IMAGES/ICONS/CHECKOUT_01.png') center/contain no-repeat;
    border: 0;
    padding: 0;
    font-size: 0;
    color: transparent;
    cursor: pointer;
    image-rendering: pixelated;
    transition: transform 0.08s ease, filter 0.12s ease;
    -webkit-tap-highlight-color: transparent;
  }
  @media (hover: hover) { .cart-checkout-btn:hover { filter: brightness(1.05); } }
  .cart-checkout-btn:active { transform: translateY(1px); }
  .cart-checkout-btn:disabled { opacity: 0.55; cursor: default; }
  .text-link-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    font-size: 11px;
    color: #1a1a7a;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    font-family: 'Geneva', sans-serif;
    padding: 4px;
  }

  /* Checkout window */
  .checkout-window {
    top: 5%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: min(560px, 94vw);
  }
  .checkout-window-body {
    background: #F5F0E6;
    padding: 18px 22px !important;
    max-height: 85vh;
    overflow-y: auto;
  }
  .checkout-window.wide {
    width: min(800px, 96vw);
  }

  /* Checkout step indicator */
  .checkout-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 8px 0;
    border-bottom: 2px solid #000;
  }
  .checkout-step {
    flex: 1;
    text-align: center;
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 10px;
    color: #888;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .checkout-step.active { color: #000; font-weight: 700; }
  .checkout-step.done { color: #1a7a1a; }
  .checkout-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid #888;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    font-family: 'Press Start 2P', 'Chicago', 'Geneva', monospace;
    font-size: 8px;
    line-height: 1;
    padding-top: 1px;
  }
  .checkout-step.active .checkout-step-num {
    border-color: #000;
    background: #5B6AE6;
    color: #fff;
  }
  .checkout-step.done .checkout-step-num {
    border-color: #1a7a1a;
    background: #1a7a1a;
    color: #fff;
  }

  /* Checkout form inputs */
  .checkout-pane { display: block; }
  .form-label-sm {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 10px;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
    color: #000;
  }
  .checkout-input {
    width: 100%;
    padding: 7px 10px;
    border: 2px solid #000;
    background: #fff;
    font-family: 'Geneva', sans-serif;
    font-size: 12px;
    margin-bottom: 10px;
    box-sizing: border-box;
    box-shadow: inset 2px 2px 0 rgba(0,0,0,0.06);
  }
  .checkout-input:focus {
    outline: none;
    background: #fffce8;
  }
  .checkout-row {
    display: flex;
    gap: 10px;
  }
  .checkout-row > div { flex: 1; }
  .checkout-row > input { flex: 1; }

  /* Shipping rate options */
  .ship-to-line {
    font-size: 11px;
    color: #555;
    margin-bottom: 12px;
  }
  .ship-to-line strong { color: #000; }
  .rate-option {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    border: 2px solid #000;
    background: #fff;
    margin-bottom: 8px;
    cursor: pointer;
    gap: 12px;
    transition: background 0.1s;
  }
  .rate-option.selected {
    background: #ffeab5;
    box-shadow: inset 3px 3px 0 rgba(0,0,0,0.1);
  }
  .rate-option:hover:not(.selected) { background: #f5f5f5; }
  .rate-radio {
    width: 14px;
    height: 14px;
    border: 2px solid #000;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    background: #fff;
  }
  .rate-option.selected .rate-radio::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #000;
  }
  .rate-info { flex: 1; }
  .rate-name {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #000;
  }
  .rate-eta {
    font-size: 10px;
    color: #666;
  }
  .rate-price {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #000;
  }

  /* Review/pay step */
  .review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .review-block {
    background: #fff;
    border: 2px solid #000;
    padding: 11px 14px;
    margin-bottom: 10px;
  }
  .review-block h4 {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 11px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #888;
    color: #000;
  }
  .review-line {
    font-size: 11px;
    color: #333;
    line-height: 1.55;
  }
  .review-divider {
    border-top: 1px dashed #888;
    margin: 8px 0;
    padding-top: 6px;
  }
  .review-text {
    font-size: 11px;
    color: #333;
    line-height: 1.55;
  }

  /* Stripe panel (simulated) */
  .stripe-panel {
    background: #fff;
    border: 2px solid #000;
    padding: 14px;
  }
  .stripe-logo {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #635bff;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .stripe-logo .secure {
    font-size: 9px;
    color: #888;
    font-weight: 400;
  }
  .sim-note {
    background: rgba(245,158,11,0.10);
    border: 1px solid rgba(245,158,11,0.30);
    color: #92400e;
    font-size: 9px;
    text-align: center;
    padding: 4px;
    margin-bottom: 10px;
    font-family: 'Geneva', sans-serif;
    font-style: italic;
  }
  .express-btn {
    width: 100%;
    background: #000;
    color: #fff;
    border: 2px solid #000;
    padding: 9px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .express-btn.light {
    background: #fff;
    color: #000;
    border-color: #ccc;
  }
  .or-divider {
    text-align: center;
    font-size: 10px;
    color: #888;
    margin: 10px 0;
    position: relative;
  }
  .or-divider::before, .or-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 38%;
    height: 1px;
    background: #ddd;
  }
  .or-divider::before { left: 0; }
  .or-divider::after { right: 0; }
  .pay-now-btn {
    width: 100%;
    background: #635bff;
    color: #fff;
    border: 2px solid #000;
    padding: 12px;
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
    box-sizing: border-box;
  }
  .pay-now-btn:hover:not(:disabled) { background: #5048e0; }
  .pay-now-btn:disabled { background: #999; cursor: not-allowed; }
  .stripe-note {
    font-size: 9px;
    color: #888;
    text-align: center;
    margin-top: 8px;
  }

  /* Order confirmation window */
  .order-confirm-window {
    top: 10%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: min(480px, 92vw);
  }
  .order-confirm-body {
    background: url('IMAGES/BACKGROUNDS/CITY_PIXELS_01.webp') center/cover no-repeat;
    image-rendering: pixelated;
    text-align: center;
    padding: 30px !important;
  }

  /* reCAPTCHA Enterprise badge — hidden intentionally. Per Google's ToS, when
     the badge is hidden you must show the disclosure text instead, which we do
     under every public form and the admin login screen (see .recaptcha-disclosure). */
  .grecaptcha-badge {
    display: none !important;
    visibility: hidden !important;
  }
  /* Small ToS disclosure that appears inside public forms. Shown even if the
     badge is clipped/missing on some devices so we stay compliant. */
  .recaptcha-disclosure {
    font-size: 10px;
    color: #666;
    margin-top: 8px;
    line-height: 1.4;
    text-align: center;
  }
  .recaptcha-disclosure a {
    color: #666;
    text-decoration: underline;
  }
  .confirm-content-box {
    background: rgba(245, 247, 250, 0.92);
    border: 2px solid #000;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
    padding: 24px 22px;
    max-width: 380px;
    margin: 0 auto;
  }
  .confirm-check {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    border: 3px solid #1a7a1a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #1a7a1a;
    background: #fff;
  }
  .confirm-title {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #000;
  }
  .confirm-order-num {
    font-family: 'Chicago', 'Geneva', monospace;
    font-size: 12px;
    color: #1a1a7a;
    margin-bottom: 16px;
  }
  .confirm-msg {
    font-size: 11px;
    color: #555;
    max-width: 360px;
    margin: 0 auto 18px;
    line-height: 1.55;
  }
  .confirm-msg strong { color: #000; }
  .confirm-items-box {
    text-align: left;
    background: #fff;
    border: 2px solid #000;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 11px;
  }
  .confirm-items-title {
    font-family: 'Chicago', 'Geneva', monospace;
    font-weight: 700;
    margin-bottom: 6px;
    border-bottom: 1px dashed #888;
    padding-bottom: 4px;
    color: #000;
  }
  .confirm-item {
    color: #333;
    padding: 1px 0;
  }
  .confirm-items-total {
    margin-top: 6px;
    font-family: 'Chicago', 'Geneva', monospace;
    font-weight: 700;
    color: #000;
  }

  /* Mobile adjustments */
  @media (max-width: 700px) {
    .cart-window, .checkout-window, .order-confirm-window {
      width: 94vw;
      top: 4%;
    }
    .review-grid {
      grid-template-columns: 1fr;
    }
    .checkout-row { flex-direction: column; gap: 0; }
  }

  /* Mobile hamburger — hidden on desktop */
  .menu-hamburger {
    display: none;
    width: 34px; height: 24px;
    border: 1.5px solid #000;
    background: linear-gradient(to bottom, #fff, #e0e0e0);
    padding: 5px 6px; box-sizing: border-box;
    cursor: pointer;
    box-shadow: 1.5px 1.5px 0 #000;
    margin-left: 8px;
    flex-direction: column;
    justify-content: space-between;
  }
  .menu-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    align-self: stretch;
  }
  /* Cart notification dot on hamburger (numberless) */
  .menu-hamburger { position: relative; }
  .menu-hamburger.has-items::after {
    content: '';
    position: absolute;
    top: -2px; left: -5px;
    width: 10px; height: 10px;
    background: #c0392b;
    border: 1.5px solid #000;
    border-radius: 50%;
    box-shadow: 1px 1px 0 rgba(0,0,0,0.4);
  }
  .menu-dropdown {
    display: none;
    position: fixed;
    top: 34px; right: 8px;
    background: #fff;
    border: 2px solid #000;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
    width: max-content;
    z-index: 1001;
    color: #000;
    font-family: 'Chicago','Geneva',monospace;
  }
  .menu-dropdown[hidden] { display: none; }
  .menu-dropdown .md-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #000;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    cursor: pointer;
    text-decoration: none;
  }
  .menu-dropdown .md-item:last-of-type { border-bottom: 1px solid #000; }
  .menu-dropdown .md-item:active { background: #000; color: #fff; }
  .menu-dropdown .md-cart-count {
    width: 20px;
    height: 20px;
    padding: 0;
    background: #c0392b;
    color: #fff;
    border: 1.5px solid #000;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
  }
  .menu-dropdown .md-cart-icon {
    display: inline-block;
    width: 28px;
    height: 22px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('IMAGES/ICONS/CART_ICON.png') center/contain no-repeat;
            mask: url('IMAGES/ICONS/CART_ICON.png') center/contain no-repeat;
  }
  .menu-dropdown .md-socials {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px 18px;
    padding: 12px 14px;
    background: #f4f4f4;
    justify-content: center;
    justify-items: center;
    align-items: center;
  }
  /* Center the odd-one-out (5th) icon across the two columns */
  .menu-dropdown .md-socials a:nth-child(5):last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .menu-dropdown .md-socials a,
  .menu-dropdown .md-socials .soon { color: #333; display: inline-flex; }
  .menu-dropdown .md-socials .soon { opacity: 0.3; cursor: default; }
  .menu-dropdown .md-socials svg { width: 24px; height: 24px; fill: currentColor; }
  .menu-dropdown .md-socials a.yt svg { width: 28px; height: 28px; }

  /* ─────────────────────────────────────────────
     Portal — Mobile Optimizations (≤ 600px)
     Only applies on small screens; desktop is untouched.
     ───────────────────────────────────────────── */
  @media (max-width: 600px) {
    /* Portal window flush with menu bar, fills available height.
       Use dvh (dynamic viewport height) so iOS Safari's URL bar doesn't
       cover the bottom of the scroll area. */
    #parentPortalWindow .portal-window {
      top: 34px;                     /* menu bar is 32px + 2px bottom border */
      width: 100vw;
      max-width: 100vw;
      max-height: calc(100dvh - 34px);
      height: calc(100dvh - 34px);
      margin: 0;
      left: 0;
      right: 0;
      border-left: none;
      border-right: none;
      display: flex;
      flex-direction: column;
    }
    #parentPortalWindow .portal-body {
      padding: 14px !important;
      max-height: none;
      flex: 1;                       /* fill remaining window height */
      min-height: 0;                 /* so flex child can shrink + scroll */
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }

    /* Kill iOS auto-zoom: any focusable input/select needs ≥ 16px */
    #parentPortalWindow .portal-body input,
    #parentPortalWindow .portal-body select,
    #parentPortalWindow .portal-body textarea {
      font-size: 16px;
      padding: 12px;
    }
    /* Portal action buttons — large tap target */
    #parentPortalWindow .portal-body button {
      font-size: 15px;
      padding: 14px;
      min-height: 48px;
    }

    /* Bigger window close button on all windows — portal keeps its own size */
    .window-btn {
      width: 22px;
      height: 22px;
    }
    .window-btn.close::before,
    .window-btn.close::after {
      width: 12px;
      height: 2.2px;
    }
    /* Portal close button — already larger for flush-fullscreen layout */
    #parentPortalWindow .window-btn {
      width: 26px;
      height: 26px;
    }
    #parentPortalWindow .window-btn.close::before,
    #parentPortalWindow .window-btn.close::after {
      width: 14px;
      height: 2.5px;
    }

    /* Sign-out / small portal buttons — bump size */
    #parentPortalWindow .portal-body .content-box > div > button,
    #parentPortalWindow .portal-body button[onclick*="portalLogout"],
    #parentPortalWindow .portal-body button[onclick*="signOut"] {
      font-size: 13px !important;
      padding: 10px 16px !important;
      min-height: 40px;
    }
    /* Employee Sign Out lives next to the heading — keep it tight so the
     * pair stays centered on one row. Beats the rule above on specificity
     * (2 IDs) AND uses !important to win the !important contest. */
    #parentPortalWindow #portalEmployee button[onclick*="portalLogout"],
    #parentPortalWindow #portalMedia button[onclick*="portalLogout"],
    #parentPortalWindow #portalParent button[onclick*="portalLogout"] {
      font-size: 9px !important;
      padding: 3px 10px !important;
      min-height: 0 !important;
    }
    /* Media Video Manager — inline Watch + Delete buttons stacked
       on the right of each card. Scoped to #portalMedia + !important
       to beat the generic .portal-body button rule. */
    #parentPortalWindow #portalMedia .mv-actions {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex-shrink: 0;
    }
    #parentPortalWindow #portalMedia .mv-watch,
    #parentPortalWindow #portalMedia .mv-delete {
      width: auto !important;
      padding: 4px 12px !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      min-height: 0 !important;
      border: 1px solid #000 !important;
      cursor: pointer;
    }
    #parentPortalWindow #portalMedia .mv-watch {
      background: #9CC195 !important;
      border-color: #7FA078 !important;
      color: #2b3a22 !important;
    }
    #parentPortalWindow #portalMedia .mv-watch:hover {
      background: #8EB287 !important;
    }
    #parentPortalWindow #portalMedia .mv-delete {
      background: #C99494 !important;
      border-color: #A87171 !important;
      color: #4a2222 !important;
    }
    #parentPortalWindow #portalMedia .mv-delete:hover {
      background: #BA8585 !important;
    }
    #parentPortalWindow #portalMedia .mv-menu-item {
      display: block !important;
      width: 100% !important;
      text-align: left !important;
      background: transparent !important;
      color: #000 !important;
      border: 0 !important;
      padding: 8px 12px !important;
      font-size: 12px !important;
      min-height: 0 !important;
      cursor: pointer;
    }
    #parentPortalWindow #portalMedia .mv-menu-item:hover {
      background: rgba(0, 0, 0, 0.06) !important;
    }
    #parentPortalWindow #portalMedia .mv-menu-item.danger {
      color: #c33 !important;
    }
    #parentPortalWindow #portalMedia .mv-menu-item.danger:hover {
      background: rgba(204, 51, 51, 0.08) !important;
    }
    /* Family folder grid — one card per family that has videos. Click
       opens the overlay with that family's video list. */
    #parentPortalWindow #portalMedia .mv-folder-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 12px;
      padding: 4px 0 8px;
    }
    #parentPortalWindow #portalMedia .mv-folder-card {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 100% !important;
      padding: 8px 6px !important;
      background: transparent !important;
      color: #fff !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      cursor: pointer;
      min-height: 0 !important;
      transition: transform 0.08s;
    }
    #parentPortalWindow #portalMedia .mv-folder-card:hover .mv-folder-icon {
      transform: scale(1.05);
    }
    #parentPortalWindow #portalMedia .mv-folder-card:active .mv-folder-icon {
      transform: scale(0.96);
    }
    #parentPortalWindow #portalMedia .mv-folder-icon {
      width: 64px;
      height: 64px;
      image-rendering: pixelated;
      display: block;
      object-fit: contain;
      transition: transform 0.08s;
    }
    #parentPortalWindow #portalMedia .mv-folder-label {
      font-size: 11px;
      font-weight: 700;
      text-align: center;
      word-break: break-word;
      line-height: 1.25;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
      letter-spacing: 0.2px;
    }

    /* Overlay that opens when a folder is clicked. */
    #parentPortalWindow #portalMedia .mv-folder-overlay {
      position: fixed;
      inset: 0;
      z-index: 2200;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #parentPortalWindow #portalMedia .mv-folder-overlay[hidden] { display: none; }
    #parentPortalWindow #portalMedia .mv-folder-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }
    #parentPortalWindow #portalMedia .mv-folder-sheet {
      position: relative;
      width: calc(100% - 24px);
      max-width: 480px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      background: #f0eee5;
      border: 2px solid #000;
      box-shadow: 4px 4px 0 #000;
    }
    #parentPortalWindow #portalMedia .mv-folder-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 12px;
      background: linear-gradient(to bottom, #A3C1D5 0%, #87AAC1 58%, #6E91AD 100%);
      border-bottom: 2px solid #000;
    }
    #parentPortalWindow #portalMedia .mv-folder-title {
      font-size: 13px;
      font-weight: 800;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45);
      letter-spacing: 0.3px;
    }
    /* `position: relative` (NOT static) gives the .window-btn.close::before
       and ::after pseudo-elements a positioning context so the X draws
       inside this button. Static would punt them up to .mv-folder-sheet
       and the X would float in the middle of the overlay body. */
    #parentPortalWindow #portalMedia .mv-folder-close {
      position: relative !important;
      width: 16px !important;
      height: 16px !important;
      min-width: 0 !important;
      min-height: 0 !important;
      padding: 0 !important;
      margin: 0 0 0 8px !important;
      background: #fff !important;
      color: #000 !important;
      border: 2px solid #000 !important;
      border-radius: 0 !important;
      box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4) !important;
      cursor: pointer;
      font-size: 0 !important;
      line-height: 0 !important;
      flex-shrink: 0;
      box-sizing: content-box;
    }
    #parentPortalWindow #portalMedia .mv-folder-body {
      padding: 12px;
      overflow-y: auto;
      flex: 1;
    }

    /* Readable body text on phones */
    #parentPortalWindow .portal-body .content-box,
    #parentPortalWindow .portal-body p,
    #parentPortalWindow .portal-body label {
      font-size: 14px;
    }

    /* Video card — bigger title & date for readability */
    #parentPortalWindow .video-card { padding: 14px; }
    #parentPortalWindow .video-card h4 { font-size: 15px; margin-bottom: 4px; }
    #parentPortalWindow .video-card p { font-size: 12px; }

    /* Parent video grid — single column on narrow phones, larger items */
    #parentPortalWindow .parent-video-grid {
      grid-template-columns: repeat(auto-fill, minmax(44%, 1fr));
      gap: 10px;
    }
    #parentPortalWindow .parent-video-label { font-size: 12px; }
    #parentPortalWindow .parent-video-date { font-size: 11px; }

    /* Timesheet entries — stack on very narrow screens so columns don't squash */
    #parentPortalWindow .timesheet-entry {
      font-size: 13px;
      flex-direction: column;
      gap: 3px;
      padding: 10px 12px;
    }

    /* Video player — bigger controls and draggable scrubber */
    .vc-btn {
      width: 44px;
      height: 40px;
      font-size: 14px;
    }
    .vc-time { font-size: 13px; min-width: 48px; }
    .vc-scrub { height: 20px; }
    .vc-scrub-thumb {
      width: 18px;
      height: 26px;
    }

    /* ── Window titlebar: keep title on one line on mobile ── */
    .os-window .window-title {
      font-size: 12px;
      padding: 0 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    /* ── Kids parade + ad banner: scale down on mobile ── */
    .parade .kid {
      height: 95px;                 /* was 130px */
    }
    .parade .banner-wrap {
      zoom: 0.65;                   /* was 0.85 */
    }
    .parade {
      gap: 6px;                     /* was 10px */
    }
    /* Drop the swoosh/string lower on mobile */
    .parade .parade-swoosh {
      margin-bottom: 15px !important;  /* was 55px */
    }
    /* Shrink banner headline font on mobile */
    #bannerHeadlineText {
      font-size: 18px;
    }

    /* (Cart lines now use the compact grid by default — see base .cart-line.) */

    /* ── Calendar window — tighten for mobile ── */
    /* Reduce window-body padding so inner cards get more width */
    #calendarWindow .window-body { padding: 8px !important; }
    #calendarWindow .hours-slots {
      grid-template-columns: 1fr 1fr;     /* title on top row, AM + PM side by side */
    }
    #calendarWindow .hours-title {
      grid-column: 1 / -1;
      padding: 8px 8px 4px;
      font-size: 13px;
      border-bottom: 1px solid rgba(0,0,0,0.15);
    }
    #calendarWindow .hours-slot { padding: 10px 4px; }
    #calendarWindow .hours-slot-time { font-size: 12px; white-space: nowrap; }
    #calendarWindow .hours-slot-days { font-size: 10px; }

    /* Footer: stack text + pill vertically, centered */
    #calendarWindow .hours-foot {
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 6px;
      padding: 8px 10px;
    }
    #calendarWindow .hours-foot-text {
      font-size: 11px;
      line-height: 1.4;
    }

    /* Popovers (Closed Dates + Upcoming Events): anchor to the hours card and
       center almost-full-width on phones. pill-wrap goes static so the popover
       measures against the full-width hours card, not the narrow pill. */
    #calendarWindow .pill-wrap { position: static; }
    #calendarWindow .hours-pills .closed-dates-popover,
    #calendarWindow .closed-dates-popover {
      right: auto;
      left: 50%;
      transform: translateX(-50%);
      top: 100%;
      margin-top: 6px;
      width: 92%;
      max-width: 320px;
    }

    /* Event detail modal — roomier on phones */
    #calendarWindow .cal-event-detail { padding: 12px; }
    #calendarWindow .cal-event-card { max-width: 100%; padding: 14px; }
    #calendarWindow .cal-evt-flyer { height: 170px; }
    #calendarWindow .cal-evt-detail-title { font-size: 18px; }
    #calendarWindow .cal-evt-meta { font-size: 13.5px; }

    /* Expanded flyer view — tighter padding on phones */
    #calendarWindow .cal-flyer-light { padding: 12px; }

    /* Star marker sized for the smaller mobile cells */
    #calendarWindow .cal-cell .cal-evt-badge { width: 22px; height: 22px; top: 1px; right: 1px; }

    /* Month nav: hide year-jump buttons, smaller paddings */
    #calendarWindow #calPrevYear,
    #calendarWindow #calNextYear { display: none; }
    #calendarWindow .cal-btn { padding: 6px 10px; font-size: 14px; }
    #calendarWindow .cal-today { padding: 6px 8px; font-size: 12px; }
    #calendarWindow .cal-title { font-size: 13px; }

    /* Month grid cells sized for touch */
    #calendarWindow .cal-grid { gap: 3px; }
    #calendarWindow .cal-cell { min-height: 36px; font-size: 13px; }

    /* ── About window: widen inner content boxes ── */
    #aboutWindow .window-body .content-box {
      margin: 0 12px 8px 12px;
    }

    /* ── Locations window on mobile ──
       Tighten padding around the map so it can fill more of the window. */
    #infoWindow .info-body {
      padding: 14px !important;
    }
    /* Open the Map at the top on mobile, matching the other windows
       (desktop keeps the centered map via the base rules). */
    #infoWindow.active {
      align-items: flex-start;
    }
    #infoWindow .info-window {
      margin-top: 5vh;
    }

    /* ── App/folder windows on mobile ──
       All non-portal windows get a consistent size: 94vw wide, leaving
       some background visible. Portal fills the screen (handled separately).
       Radio window keeps its original desktop sizing. */
    .os-window:not(.portal-window):not(.radio-window) {
      width: 94vw !important;
      max-width: 94vw !important;
      top: 5% !important;
      left: 3% !important;
      right: auto !important;
      max-height: 88vh;
    }
    .os-window:not(.portal-window):not(.radio-window) .window-body {
      max-height: calc(88vh - 40px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    /* Scale window content paddings down a little on small screens */
    .os-window:not(.portal-window):not(.radio-window) .window-body { padding: 12px; }

    /* ── Arcade on mobile ──
       The global rule above forces the window to 94vw / top:5%. Make the body
       a matching square and shrink the carousel pieces so everything fits a
       phone screen. !important is needed to beat the generic window-body rule. */
    .arcade-window .games-body {
      height: calc(94vw - 36px) !important;
      max-height: 84vh !important;
      overflow: hidden !important;
      padding: 0 !important;
    }
    .arcade-window .arcade-marquee { font-size: 20px; }
    .arcade-window .arcade-card-panel { width: 120px; padding: 14px; }
    .arcade-window .arcade-card img { width: 64px; height: 64px; }
    .arcade-window .arcade-arrow { padding: 10px; }
    .arcade-window .arcade-arrow svg { width: 24px; height: 38px; }
    .arcade-window .arcade-arrow.left  { left: 18px; }
    .arcade-window .arcade-arrow.right { right: 18px; }

    /* ── Desktop icons — switch to uniform grid on mobile ── */
    .desktop {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px 8px;
      padding: 48px 12px 24px;
      align-content: start;
      overflow-y: auto;
    }
    .desktop-icon {
      position: static !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      width: auto !important;
      justify-self: center;
    }
    /* Games sits in row 2 col 3 on mobile, matching desktop layout */
    .desktop-icon.games-icon {
      grid-column: 3;
      grid-row: 2;
    }
    /* Calendar, Map (info) and Art (games) live in the hamburger menu on
       mobile, so they are removed from the desktop grid here. */
    .desktop-icon[onclick*="'calendar'"],
    .desktop-icon[onclick*="'info'"],
    .desktop-icon[onclick*="'games'"] {
      display: none !important;
    }
    .desktop-icon .icon-label {
      max-width: 92px;
      font-size: 12px;
      line-height: 1.6;
    }
    .desktop-icon .icon-label-text {
      /* Each wrapped line renders its own pill (hugs its own text width)
         via box-decoration-break, but with zero gap between lines they
         read as one jagged shape. */
      background: rgba(255,255,255,0.45);
      color: #000;
      padding: 1px 4px;
      border-radius: 0;
      border: 1px solid #000;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      image-rendering: pixelated;
      /* Phosphor amber glow on the text itself */
      text-shadow:
        0 0 1px currentColor,
        0 0 4px rgba(255, 180, 80, 0.55),
        0 0 8px rgba(255, 140, 40, 0.25);
    }
    /* Match desktop visual order — left→right, top→bottom:
       Row 1: About Us · Shop · Program Activities
       Row 2: Calendar · Locations · Games
       Row 3: Join The Team · Radio
       Row 4: Arcade */
    .desktop-icon[onclick*="'about'"]       { order: 1; }
    .desktop-icon[onclick*="'shop'"]        { order: 2; }
    .desktop-icon[onclick*="'activities'"]  { order: 3; }
    .desktop-icon[onclick*="'calendar'"]    { order: 4; }
    .desktop-icon[onclick*="'info'"]        { order: 5; }
    .desktop-icon[onclick*="'games'"]       { order: 6; }
    .desktop-icon[onclick*="'join'"]        { order: 7; }
    .desktop-icon[onclick*="'radio'"]       { order: 8; }
    /* Arcade lives alone in row 4, column 1 — explicit placement so it
       doesn't slide into the empty row-3 col-3 slot. */
    .desktop-icon[onclick*="'arcade'"] {
      order: 9;
      grid-column: 1;
      grid-row: 4;
    }
    /* Column 1 (left) — nudge left */
    .desktop-icon[onclick*="'about'"],
    .desktop-icon[onclick*="'calendar'"],
    .desktop-icon[onclick*="'join'"],
    .desktop-icon[onclick*="'arcade'"] {
      transform: translateX(-18px);
    }
    /* Column 2 (middle) — nudge further left */
    .desktop-icon[onclick*="'shop'"],
    .desktop-icon[onclick*="'info'"],
    .desktop-icon[onclick*="'radio'"] {
      transform: translateX(-56px);
    }
    /* Column 3 (right) — nudge right */
    .desktop-icon[onclick*="'activities'"],
    .desktop-icon[onclick*="'games'"] {
      transform: translateX(18px);
    }

    /* ── Menu bar mobile layout ── */
    .menu-bar {
      padding: 0 10px;
      gap: 8px;
    }
    .menu-bar .apple-logo { font-size: 16px; order: 0; margin-right: 4px; }
    .menu-bar .brand-name {
      font-size: 13px;
      order: 1;
      margin-right: auto;  /* push everything after brand to the right */
    }
    .menu-bar .menu-eyes { order: 2; margin-left: 0; }
    .menu-bar .menu-items { order: 3; display: flex; }
    .menu-bar .menu-items span {
      font-size: 13px;
      padding: 6px 10px;
    }
    .menu-bar .menu-hamburger { order: 4; }

    /* Hide cart, contact, socials, clock — Cart & Contact live in the dropdown */
    .menu-bar .menu-cart,
    .menu-bar .right-section > span[onclick*="contact"],
    .menu-bar .social-icons,
    .menu-bar .clock {
      display: none;
    }
    .menu-bar .right-section { display: none; }
    /* Show the hamburger */
    .menu-hamburger {
      display: flex;
    }
    /* Center dropdown items within the dropdown */
    .menu-dropdown .md-item {
      justify-content: center;
      gap: 10px;
    }
    /* When open, show the dropdown */
    .menu-dropdown:not([hidden]) {
      display: block;
    }
    .menu-hamburger.open {
      background: linear-gradient(to bottom, #e0e0e0, #c0c0c0);
      transform: translate(1.5px, 1.5px);
      box-shadow: 0 0 0 #000;
    }
  }
  /* ↑ closes @media (max-width: 600px) which opened far above */

  /* ===== Draggable / resizable windows (desktop only) =====
     Title bar gets a move cursor, bottom-right corner gets a subtle grip.
     The body fills the window only while/after the user resizes — JS handles that
     so the default open size stays exactly as it was before this feature shipped.
     Hidden below 700px — mobile keeps full-width fixed layout. */
  @media (min-width: 701px) {
    .os-window .window-titlebar { cursor: move; }
    .os-window .window-titlebar .window-btn,
    .os-window .window-titlebar button,
    .os-window .window-titlebar a { cursor: pointer; }

    .os-window .resize-grip {
      position: absolute;
      right: 0; bottom: 0;
      width: 14px; height: 14px;
      cursor: nwse-resize;
      z-index: 50;
      opacity: 0.45;
      transition: opacity 0.15s;
    }
    .os-window .resize-grip::before {
      content: '';
      position: absolute;
      inset: 2px;
      background:
        linear-gradient(135deg,
          transparent 0%, transparent 55%,
          #000 55%, #000 65%,
          transparent 65%, transparent 78%,
          #000 78%, #000 88%,
          transparent 88%);
    }
    .os-window .resize-grip:hover { opacity: 1; }
  }