*, *::before, *::after { box-sizing: border-box; }

/* ==================== CHICAGOFLF – Mac OS 8 Nostalgia Font ==================== */
@font-face {
  font-family: 'ChicagoFLF';
  src: url('fonts/ChicagoFLF.woff2') format('woff2'),
       url('fonts/ChicagoFLF.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==================== GLOBAL RESET – NO RADIUS (except buttons) ==================== */
* { border-radius: 0 !important; }

/* ==================== MAC OS 8 PLATINUM FRAME STYLING ==================== */
:root {
  --platinum-bg:     #c0c0c0;
  --platinum-light:  #e8e8e8;
  --platinum-mid:    #a8a8a8;
  --platinum-dark:   #606060;
  --platinum-black:  #000000;
  --platinum-white:  #ffffff;
  --title-grad-1:    #888888;
  --title-grad-2:    #eeeeee;
  --inner-bg:        #d8d8d8;
  --status-text:     #000000;
}

/* ────────────────────────────────────────
WINDOW SHELL
──────────────────────────────────────── */
.window {
  width: 100%;
  /* Platinum 3-D border: light top/left, dark bottom/right */
  border-top:    1px solid var(--platinum-light);
  border-left:   1px solid var(--platinum-light);
  border-bottom: 1px solid var(--platinum-dark);
  border-right:  1px solid var(--platinum-dark);
  /* outer 1-px black frame */
  outline: 1px solid var(--platinum-black);
  background: var(--platinum-bg);
  padding: 2px;
  position: relative;
  box-shadow: 5px 5px 0 0 rgba(0,0,0,0.2);
  user-select: none;
}

/* ────────────────────────────────────────
TITLE BAR
──────────────────────────────────────── */
.title-bar {
  height: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Platinum pinstripe gradient (horizontal lines) */
  background:
  /* Top solid bar (2px) */
  linear-gradient(#c0c0c0, #c0c0c0) top / 100% 2px no-repeat,
  /* Bottom solid bar (2px) */
  linear-gradient(#c0c0c0, #c0c0c0) bottom / 100% 4px no-repeat,
  /* The pinstripe fill */
  repeating-linear-gradient(
  to bottom,
  #b8b8b8 0px,
  #b8b8b8 1px,
  #d4d4d4 1px,
  #d4d4d4 2px
  ) right center / calc(97% - 8px) 100% no-repeat,
  /* 1px debug line on the right */
  linear-gradient(#a8a8a8, #a8a8a8) right top / 1px 100% no-repeat;
  border-bottom: 1px solid var(--platinum-black);
}

/* Active-window stripe effect — the famous alternating dark/light lines */
.title-bar.active {
  background:
  /* Top solid bar (2px) */
  linear-gradient(#c0c0c0, #c0c0c0) top / 100% 2px no-repeat,
  /* Bottom solid bar (2px) */
  linear-gradient(#c0c0c0, #c0c0c0) bottom / 100% 4px no-repeat,
  /* The pinstripe fill */
  repeating-linear-gradient(
  to bottom,
  #888888 0px,
  #888888 1px,
  #dddddd 1px,
  #dddddd 2px
  ) right center / calc(97% - 8px) 100% no-repeat,
  /* 1px debug line on the right */
  linear-gradient(#a8a8a8, #a8a8a8) right top / 1px 100% no-repeat;
}

.title-bar .title-text {
  font-size: 12px;
  /* font-weight: bold; */
  color: var(--platinum-black);
  letter-spacing: 0;
  padding: 0 24px;         /* leave room for close box */
  white-space: nowrap;
  position: relative;
  z-index: 1;
  /* White "label" backing behind title text */
  background: var(--platinum-bg);
  padding: 0 6px;
  line-height: 18px;
}

/* ── Close box ── */
.close-box {
  position: absolute;
  left: 1px;
  top: 45%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background: var(--platinum-bg);
  border-top:    1px solid var(--platinum-light);
  border-left:   1px solid var(--platinum-light);
  border-bottom: 1px solid var(--platinum-dark);
  border-right:  1px solid var(--platinum-dark);
  outline: 1px solid var(--platinum-black);
  z-index: 2;
  cursor: default;
}

.close-box:hover {
  background: #aaaaaa;
}

.close-box:active::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 auto 0;
  background: var(--platinum-dark);
}

/* ── Zoom / collapse box (top-right) ── */
.zoom-box {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background: var(--platinum-bg);
  border-top:    1px solid var(--platinum-light);
  border-left:   1px solid var(--platinum-light);
  border-bottom: 1px solid var(--platinum-dark);
  border-right:  1px solid var(--platinum-dark);
  outline: 1px solid var(--platinum-black);
  z-index: 2;
  cursor: default;
  /* contains the small resize indicator */
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoom-box::before {
  content: '';
  width: 5px;
  height: 5px;
  border-top:   1px solid var(--platinum-black);
  border-right: 1px solid var(--platinum-black);
  background: transparent;
}

.zoom-box:hover { background: #aaaaaa; }

/* ────────────────────────────────────────
STATUS BAR  (below title, above content)
──────────────────────────────────────── */
.status-bar {
  height: 18px;
  background: var(--platinum-bg);
  /* border-bottom: 1px solid var(--platinum-dark); */
  border-right: 1px solid var(--platinum-dark);
  border-left: 1px solid var(--platinum-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight:lighter;
  color: var(--status-text);
}

/* ────────────────────────────────────────
CONTENT AREA
──────────────────────────────────────── */
.content {
  width: 100%;
  height: auto;
  background: var(--inner-bg);
  /* Inset shadow: light at bottom-right, dark at top-left */
  border-top:    2px solid var(--platinum-dark);
  border-left:   2px solid var(--platinum-dark);
  border-bottom: 2px solid var(--platinum-light);
  border-right:  2px solid var(--platinum-light);
  position: relative;
  overflow: hidden;
}

/* ────────────────────────────────────────
SCROLL BARS  (cosmetic only)
──────────────────────────────────────── */
.scrollbar-v {
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: calc(100% - 15px);
  background: var(--platinum-bg);
  border-left: 1px solid var(--platinum-black);
  display: flex;
  flex-direction: column;
}
.scrollbar-h {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 15px);
  height: 15px;
  background: var(--platinum-bg);
  border-top: 1px solid var(--platinum-black);
  display: flex;
  flex-direction: row;
}
/* scroll arrows */
.scroll-arrow {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background: var(--platinum-bg);
  border-top:    1px solid var(--platinum-light);
  border-left:   1px solid var(--platinum-light);
  border-bottom: 1px solid var(--platinum-dark);
  border-right:  1px solid var(--platinum-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  font-size: 7px;
  color: var(--platinum-black);
}
.scroll-arrow:hover { background: #b0b0b0; }
.scroll-arrow:active {
  border-top:    1px solid var(--platinum-dark);
  border-left:   1px solid var(--platinum-dark);
  border-bottom: 1px solid var(--platinum-light);
  border-right:  1px solid var(--platinum-light);
}
/* scroll track */
.scroll-track {
  flex: 1;
  /* classic greyed-out track pattern */
  background-color:#bbbbbb;
}
/* scroll thumb */
.scroll-thumb-v {
  position: absolute;
  top: 15px;
  right: 0;
  width: 15px;
  height: 32px;
  background: var(--platinum-bg);
  border-top:    1px solid var(--platinum-light);
  border-left:   1px solid var(--platinum-light);
  border-bottom: 1px solid var(--platinum-dark);
  border-right:  1px solid var(--platinum-dark);
  outline: 1px solid var(--platinum-black);
  cursor: default;
}
/* corner square at scroll bar intersection */
.scroll-corner {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 15px;
  height: 15px;
  background: var(--platinum-light);
}

/* ==================== BODY ==================== */
body {
  background-color: #bfbfbf;
  background-image: url('img/bg-tile2.png');
  background-repeat: repeat;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  font-family: 'ChicagoFLF', "Chicago", "Geneva", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: #111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ==================== TOP BAR: Fortune Marquee + Flags ==================== */
#top-bar {
  display: flex;
  align-items: center;
  background: #111;
  color: #e8e8e8;
  padding: 6px 16px;
  min-height: 32px;
  gap: 16px;
}

#gang-bar {
  text-align: center;
  padding: 10px;
  line-height: 0;
}
#gang-bar img {
  width: 342px;
  height: 100%;
  display: inline-block;
}

#fortune-marquee {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

#marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  padding-left: 4rem;
  animation: marquee 35s linear infinite;
  font-size: 11px;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

#fortune-marquee:hover #marquee-track {
  animation-play-state: paused;
}

#language-switcher {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

#language-switcher a {
  font-family: "Segoe UI Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
  line-height: 1;
  vertical-align: middle;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

#language-switcher a:hover { opacity: 1; }

#language-switcher img {
  border: 1px solid #808080;
  vertical-align: middle;
  width: 18px;
  height: 12px;
  opacity: 0.85;
  transition: opacity 0.15s ease-in-out;
}

/* ==================== BRANDING HEADER ==================== */
#branding-header {
  background-image: url('img/black-tile.png');
  border-bottom: 3px solid #000;
  border-top: 3px solid #000;
  padding: 18px 0;
  width: 100%;
}

#branding-header .content-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 0 20px;
}

#branding-logo-area h1 {
  margin: 0;
  font-family: 'ChicagoFLF', "Chicago", "Geneva", sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -1.5px;
  text-shadow: 2px 2px 0 #000;
  line-height: 1;
}

#branding-logo-area h1 span { color: #c42b2c; }

#branding-tagline {
  color: #aaa;
  font-size: 11px;
  margin: 4px 0 0 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#branding-copy {
  flex: 1;
  padding-left: 20px;
  color: #ccc;
  font-size: 11px;
  line-height: 1.4;
}

#branding-copy strong { color: #fff; font-weight: 800; }

@media (max-width: 600px) {
  #branding-copy {
    flex-basis: 100%;
    border-top: 1px solid #333;
    padding-top: 12px;
    padding-left: 0;
  }
}

@media (max-width: 900px) {
  #branding-header .content-wrapper { padding: 0 15px; }
}

/* ==================== CONTENT WIDTH CONTROL ==================== */
.content-wrapper {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  width: 100%;
}

@media (max-width: 900px) {
  .content-wrapper {
    max-width: 100%;
    padding: 0 15px;
  }
}

/* AD BANNERS */
.ad-banner {
  width: 728px;
  max-width: 98%;      /* Prevents overflow on smaller windows */
  height: 90px;
  background: #c8c8c8;
  border: 1px dashed #888;
  
  /* THIS CENTERS THE TEXT INSIDE THE BOX */
  display: flex;
  align-items: center;
  justify-content: center;

  /* THIS CENTERS THE BOX ON THE PAGE */
  margin: 24px auto !important; 
  display: flex; /* Ensure it stays flex for the internal text */
  
  font-size: 11px;
  color: #777;
  letter-spacing: 0.05em;
  clear: both; /* Prevents it from trying to float next to sidebars */
}

/* Optional: Small banner for the bottom if you want it shorter */
.ad-banner-small {
  height: 60px;
}

/* ==================== APP SHELL (wide, for the tool window) ==================== */
.app-shell-wide {
  width: 90%;
  max-width: 1800px;
  margin: 18px auto;
}

/* ==================== APP LAYOUT ==================== */
#app-container {
  display: flex;
  height: 75vh;
  min-height: 600px; /* Minimum safety height */
}

/* ==================== SIDEBARS ==================== */
#sidebar-left {
  width: 250px;
  padding: 12px;
  display: flex;
  flex-direction: column; /* Keeps items stacked */
  background: #c0c0c0;
  border-right: 2px solid #808080;
}

/* Ensure the sidebar doesn't hide content if the window is tiny */
#sidebar-right {
  width: 250px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  background: #dcd8d0;
  border-left: 2px solid #808080;
  overflow-y: auto; 
}



#sidebar-left  { border-right: 2px solid #808080; }
#sidebar-right { border-left: 2px solid #808080; background: #dcd8d0; }

/* ==================== MAIN VIEW ==================== */
#main-view {
  flex: 1;
  background: #111;
  position: relative;
  overflow: hidden;
  display: flex;
  box-shadow: inset 0 0 50px #000;
}

.workspace-viewport {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
}

.canvas-wrapper {
  margin: auto;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#canvas {
  display: block;
  cursor: crosshair;
  image-rendering: pixelated;
  flex-shrink: 0;
}

/* ==================== ZOOM TOOLBAR ==================== */
.zoom-toolbar {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #c0c0c0;
  padding: 5px 10px;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.zoom-toolbar button {
  padding: 2px 8px;
  font-size: 10px;
}

#zoomSlider {
  width: 100px;
  height: 4px;
  cursor: pointer;
}

.canvas-hint {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  color: #888;
  font-size: 10px;
  pointer-events: none;
  z-index: 1000;
}

/* ==================== LAYER LIST ==================== */
#layerList {
  flex: 1; /* This is the key change: it now takes all available vertical space */
  background: #fff;
  border: 2px solid #000;
  box-shadow: inset 1px 1px 2px #000;
  margin: 10px 0;
  overflow-y: auto;
}

.layer-row {
  padding: 6px;
  margin-bottom: 3px;
  background: #c0c0c0;
  border: 1px solid #808080;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  cursor: pointer;
}

.layer-row:hover { background: #d8d8d8; }

.layer-row.selected {
  background: #000080;
  color: #fff;
}

.layer-row .layer-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  cursor: pointer;
}

.layer-controls {
  display: flex;
  gap: 2px;
}

.layer-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: #c0c0c0;
  border: 1px solid #000;
  box-shadow: inset 1px 1px #fff;
}

.layer-row.selected .layer-btn {
  border-color: #fff;
  color: #000;
}

.layer-btn:hover { background: #eee; }
.layer-btn.active { background: #808080; box-shadow: inset -1px -1px #fff; }

/* ==================== STICKIES APP STYLES ==================== */
/* Ensure the gallery can wrap items if there are many */
/* 1. Expand the container width specifically for stickies */
.content-wrapper-wide {
    max-width: 1400px; /* Much wider than the standard 860px */
    margin: 0 auto;
    width: 95%;
}

/* 2. Add more variety in rotations */
.note-rotate-left         { transform: rotate(-2deg); }
.note-rotate-right        { transform: rotate(2.5deg); }
.note-rotate-slight-left  { transform: rotate(-1deg); }
.note-rotate-slight-right { transform: rotate(1.2deg); }

/* 3. Add vertical 'scattering' (staggering) */
.note-offset-up   { margin-top: -15px; }
.note-offset-down { margin-top: 15px; }

/* 4. Improve the gallery flex behavior */
.stickies-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 30px 20px;
    width: 100%;
    padding: 20px 0 30px 0;
}

/* 5. Ensure they don't look identical on hover */
.sticky-note:hover {
    transform: rotate(0deg) scale(1.1) !important; /* Force straight and big on hover */
    z-index: 1000;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.3);
}

.sticky-note {
    width: 200px;
    min-height: 200px;
    padding: 15px;
    position: relative;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.1);
    color: #111;
}

.sticky-handle {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 12px;
    background: rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.sticky-note h3 {
    margin: 10px 0 8px 0;
    font-size: 13px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 4px;
}

.sticky-note p strong {
    color: #000;
    font-weight: 800;
}

/* Make emojis slightly larger than the text for clarity */
.sticky-note p {
    font-size: 11px;
    line-height: 1.6;
}

/* Classic Stickies Colors */
.note-yellow { background: #ffffa5; }
.note-blue   { background: #a5ffff; }
.note-pink   { background: #e66cb5; }
.note-green  { background: #caffca; }
.note-cyan  { background: #30b4f1; }
/* New Retro Stickies Colors */
.note-orange { background: #f78e2d; }
.note-purple { background: #e2caff; }
.note-lime { background: #f5d833; }

/* Rotation for organic look */
.note-rotate-left  { transform: rotate(-1.5deg); }
.note-rotate-right { transform: rotate(1.5deg); }

.sticky-note:hover {
    transform: rotate(0deg) scale(1.05);
    z-index: 100;
    transition: transform 0.2s ease-out;
}

/* envelope */

.retro-contact-link {
  display: inline-block;
  text-decoration: none;
  padding: 4px;
  transition: transform 0.1s ease;
}

.retro-contact-link:hover {
  transform: scale(1.1); /* Slight pop out on hover */
}

.retro-contact-link:active {
  transform: scale(0.95); /* Clicks down */
}

/* ==================== PREVIEW BOX ==================== */
.preview-header {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  color: #333;
}

.preview-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #eee;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

#previewCanvas {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  object-fit: contain;
}

/* ==================== SETTINGS BOX ==================== */
.settings-box {
  background: #b0b0b0;
  padding: 8px;
  border: 1px solid #000;
  font-size: 11px;
}

/* ==================== BUTTONS ==================== */
button {
  background: #c0c0c0;
  border: 2px solid #000;
  border-radius: 6px !important;
  box-shadow: inset -2px -2px 0 #ffffff, inset 2px 2px 0 #808080;
  padding: 8px;
  cursor: pointer;
  font-family: 'ChicagoFLF', "Chicago", "Geneva", sans-serif;
  font-size: 12px;
}

button:active {
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
  border-radius: 6px !important;
  transform: translate(1px, 1px);
}

button:disabled { color: black; }

button.btn-green { background: #90ee90; }

/* ==================== INPUTS ==================== */
input[type="range"]  { width: 100%; }
input[type="number"] { width: 55px; border: 1px solid #000; }

hr {
  border: 0;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #fff;
  margin: 10px 0;
}

/* ==================== FOOTER ==================== */
#site-footer {
  background-image: url('img/black-tile.png');
  color: #888;
  font-size: 10px;
  padding: 18px 24px;
  margin-top: 16px;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  text-align: center;
  line-height: 1.8;
}

#site-footer a { color: #aaa; text-decoration: none; }
#site-footer a:hover { text-decoration: underline; color: #ccc; }
#site-footer .footer-links { margin-bottom: 6px; }
#site-footer .footer-links span { margin: 0 6px; color: #444; }

/* ==================== VISITOR COUNTER ==================== */
#visit-counter {
  text-align: center;
  padding: 10px 0 4px;
}

#visit-counter div {
  font-size: 11px;
  color: #fff;
  margin-bottom: 4px;
}

#visit-counter img {
  border: 2px solid #000;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
  background: #c0c0c0;
  padding: 4px;
  image-rendering: pixelated;
}

/* ==================== TOS MODAL (compulsory) ==================== */
#tos-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tos-modal-overlay.tos-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#tos-modal {
  background: #c0c0c0;
  border: 2px solid #000;
  box-shadow: inset -2px -2px 0 #808080, inset 2px 2px 0 #ffffff, 4px 4px 0 #000;
  width: 480px;
  max-width: 94vw;
  font-size: 11px;
}

#tos-modal .modal-titlebar {
  height: 26px;
  background-image: url('img/hazard-tile.png');
  background-color: #000080; /* fallback if tile not found */
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: #fff;
  text-shadow: 2px 2px #101010;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.03em;
}

#tos-modal .modal-body {
  padding: 16px 18px;
  line-height: 1.7;
  color: #111;
  max-height: 52vh;
  overflow-y: auto;
}

#tos-modal .modal-body h3 {
  font-size: 12px;
  text-transform: uppercase;
  margin: 0 0 10px 0;
  letter-spacing: 0.05em;
}

#tos-modal .modal-body p { margin: 0 0 8px 0; }

#tos-modal .modal-footer {
  padding: 10px 18px 14px;
  text-align: right;
  border-top: 1px solid #808080;
}

/* ==================== GENERAL MODAL OVERLAY (Privacy / About) ==================== */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-overlay.show { display: flex; }

.modal-window {
  background: #c0c0c0;
  border: 2px solid #000;
  box-shadow: inset -2px -2px 0 #808080, inset 2px 2px 0 #ffffff, 4px 4px 0 #00000042;
  width: 460px;
  max-width: 94vw;
  font-family: 'ChicagoFLF', "Chicago", "Geneva", sans-serif;
  font-size: 12px;
}

.modal-titlebar {
  height: 24px;
  background: repeating-linear-gradient(to bottom, #dcdcdc 0px, #dcdcdc 1px, #c0c0c0 1px, #c0c0c0 2px);
  border-bottom: 1px solid #7f7f7f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  padding: 0 8px;
  white-space: nowrap;
}

.modal-body {
  padding: 20px 24px 16px;
  line-height: 1.55;
  color: #111;
  max-height: 58vh;
  overflow-y: auto;
}

.modal-body h3 {
  font-size: 12px;
  text-transform: uppercase;
  margin: 0 0 10px 0;
  letter-spacing: 0.05em;
}

.modal-body p { margin: 0 0 10px 0; }

.modal-footer {
  padding: 12px 18px 14px;
  text-align: right;
  border-top: 1px solid #808080;
}

.modal-footer button {
  min-width: 80px;
  border: 2px solid #000;
  border-radius: 4px !important;
  box-shadow: inset -2px -2px 0 #ffffff, inset 2px 2px 0 #808080;
}

/* About window */
.about-window { width: 400px; }

.about-body {
  padding: 20px 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  line-height: 1.45;
}

.about-text { flex: 1; }

/* ==================== LINKS SECTION ==================== */
#links-section {
  background: #d4d0c8;
  border: 1px solid #808080;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
  padding: 16px 20px;
  font-size: 12px;
  line-height: 1.65;
  color: #222;
  margin: 20px 0;
}

#links-section h2 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 10px 0;
  color: #333;
}

.links-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.link-chip {
  border: 2px solid #000;
  border-radius: 6px !important;
  box-shadow: inset -2px -2px 0 #ffffff, inset 2px 2px 0 #808080;
  padding: 4px 12px;
  font-size: 11px;
  color: #00008b;
  text-decoration: none;
  cursor: pointer;
  background: #c0c0c0;
}

.link-chip:hover { background: #d4d0c8; text-decoration: underline; }

/* ==================== SETTINGS BOX LABELS ==================== */
.settings-box label {
  font-size: 10px;
  margin-right: 10px;
  cursor: pointer;
}

/* ============================================================
   MOBILE RESPONSIVE — CrunchyRip Web
   Strategy: Tab-based panel switching below 768px
   ============================================================ */

/* ── Mobile Tab Bar ── */
#mobile-tab-bar {
  display: none;
}

@media (max-width: 767px) {

  /* ── Global spacing ── */
  .app-margin { margin: 0 !important; }
  .app-shell-wide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* ── Top bar: shrink flags, shorten marquee ── */
  #top-bar {
    padding: 4px 8px;
    gap: 8px;
    min-height: 28px;
  }

  #marquee-track {
    font-size: 10px;
  }

  #language-switcher {
    gap: 5px;
  }

  #language-switcher img {
    width: 15px;
    height: 10px;
  }

  /* ── Branding header ── */
  #branding-header {
    padding: 12px 0;
  }

  #branding-header .content-wrapper {
    flex-wrap: wrap;
    padding: 0 12px;
    gap: 10px 12px;
  }

  #branding-logo-area h1 {
    font-size: 26px;
  }

  #branding-tagline {
    font-size: 9px;
  }

  #mascot-frame {
    width: 44px !important;
    height: 44px !important;
  }

  #mascot-frame img, .mascot-placeholder {
    width: 44px !important;
    height: 44px !important;
    font-size: 28px !important;
  }

  #branding-copy {
    flex-basis: 100%;
    border-top: 1px solid #333;
    padding-top: 8px;
    padding-left: 0;
    font-size: 10px;
  }

  /* ── Ad banner ── */
  .ad-banner {
    width: 100% !important;
    height: 50px !important;
    margin: 8px auto !important;
    font-size: 10px;
  }

  /* ── Mobile Tab Bar ── */
  #mobile-tab-bar {
    display: flex;
    background: #000080;
    border-bottom: 2px solid #000;
    position: sticky;
    top: 0;
    z-index: 500;
    width: 100%;
  }

  .mob-tab {
    flex: 1;
    padding: 8px 4px;
    font-family: 'ChicagoFLF', "Chicago", "Geneva", sans-serif;
    font-size: 10px;
    color: #aaa;
    background: #000080;
    border: none;
    border-right: 1px solid #00006a;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.1s;
  }

  .mob-tab:last-child { border-right: none; }

  .mob-tab.active {
    background: #c0c0c0;
    color: #000;
    font-weight: bold;
    box-shadow: inset 0 -2px 0 #c42b2c !important;
  }

  .mob-tab:active {
    transform: none !important;
  }

  /* ── App container: stack panels vertically, show only active ── */
  #app-container {
    display: block !important;
    height: auto !important;
    min-height: unset !important;
  }

  #sidebar-left,
  #main-view,
  #sidebar-right {
    display: none !important;
    width: 100% !important;
  }

  #sidebar-left.mob-active,
  #main-view.mob-active,
  #sidebar-right.mob-active {
    display: flex !important;
  }

  /* ── Left sidebar on mobile ── */
  #sidebar-left.mob-active {
    flex-direction: column;
    padding: 10px;
    border-right: none !important;
    min-height: 60vh;
  }

  /* ── Canvas/workspace on mobile ── */
  #main-view.mob-active {
    flex-direction: column;
    height: 70vh !important;
    min-height: 320px;
  }

  .zoom-toolbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
    border-left: none;
    border-right: none;
    border-top: none;
    flex-shrink: 0;
  }

  #zoomSlider {
    width: 80px !important;
    flex: 1;
    min-width: 60px;
  }

  .zoom-toolbar button {
    padding: 4px 8px;
    font-size: 11px;
  }

  .workspace-viewport {
    flex: 1;
    min-height: 0;
  }

  .canvas-hint {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    text-align: center;
    padding: 4px 8px;
    background: rgba(0,0,0,0.6);
    color: #888;
    font-size: 9px;
    flex-shrink: 0;
  }

  /* ── Right sidebar on mobile ── */
  #sidebar-right.mob-active {
    flex-direction: column;
    padding: 10px;
    border-left: none !important;
    min-height: 60vh;
  }

  /* ── Window title bar stays visible ── */
  .title-bar {
    position: sticky;
    top: 40px; /* below mobile tab bar */
    z-index: 400;
  }

  /* ── Window frame ── */
  .window {
    box-shadow: none !important;
  }

  /* ── Settings boxes ── */
  .settings-box {
    font-size: 12px;
  }

  .settings-box button {
    font-size: 11px;
    padding: 9px 6px;
  }

  /* ── Stickies: single column on mobile ── */
  .stickies-gallery {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 12px;
  }

  .sticky-note {
    width: 90% !important;
    max-width: 320px;
    transform: none !important; /* no rotation on mobile */
    margin-top: 0 !important;
  }

  .sticky-note:hover {
    transform: none !important;
  }

  .content-wrapper-wide {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 30px;
  }

  /* ── Footer ── */
  #site-footer {
    padding: 14px 12px;
    font-size: 9px;
  }

  #site-footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 6px;
  }

  #site-footer .footer-links span { display: none; } /* hide pipe separators */

  #site-footer .footer-links a {
    background: #1a1a1a;
    padding: 3px 7px;
    border: 1px solid #333;
  }

  /* ── Gang bar ── */
  #gang-bar img {
    width: 240px;
  }

  /* ── Visit counter ── */
  #visit-counter {
    padding: 6px 0;
  }

  /* ── Modals: full screen on mobile ── */
  #tos-modal,
  .modal-window {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
  }

  .modal-body {
    max-height: 65vh !important;
    overflow-y: auto;
    padding: 14px 14px 10px !important;
    font-size: 11px;
  }

  .about-body {
    flex-direction: column !important;
    align-items: center !important;
    padding: 14px !important;
    gap: 12px;
  }

  /* ── Atlas modal ── */
  #atlas-modal {
    width: 98vw !important;
    max-width: 98vw !important;
  }

  #workbench-body {
    height: 50vh !important;
  }

  /* ── Layer list ── */
  #layerList {
    min-height: 80px;
    max-height: 200px;
  }

  /* ── Input fields ── */
  input[type="number"] {
    width: 60px;
    font-size: 14px;
    padding: 3px 4px;
  }

  input[type="range"] {
    height: 20px;
  }

  /* Bigger tap targets for buttons */
  button {
    min-height: 36px;
  }

  /* ── Global output cap inline layout ── */
  .settings-box input[type="number"] {
    width: 65px;
  }
}

/* ── Tablet (768px - 1024px): narrow but functional ── */
@media (min-width: 768px) and (max-width: 1024px) {

  .app-shell-wide {
    width: 98% !important;
  }

  #app-container {
    height: 70vh !important;
  }

  #sidebar-left,
  #sidebar-right {
    width: 190px !important;
  }

  .zoom-toolbar {
    flex-wrap: wrap;
    gap: 4px;
  }

  #zoomSlider {
    width: 70px !important;
  }

  .sticky-note {
    width: 160px;
  }

  #branding-logo-area h1 {
    font-size: 28px;
  }

  .ad-banner {
    width: 90% !important;
  }
}
/* ==================== CTA SCROLL BAR ==================== */
#cta-scroll-bar {
  background: #ffffa5;
  border: 2px solid #111;
  border-bottom: none;
  box-shadow: 4px 4px 0 #333;
  padding: 9px 16px;
  font-size: 12px;
  color: #111;
  text-align: center;
  line-height: 1.5;
  max-width: 860px;
  margin: 16px auto 0;
}
#cta-scroll-bar a.cta-scroll-link { color: #00008b; text-decoration: underline; font-weight: bold; cursor: pointer; }
#cta-scroll-bar a.cta-scroll-link:hover { color: #0000cc; }

/* ==================== SECTION HEADER ==================== */
.section-header {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: #111;
  color: #fff;
  padding: 7px 14px;
  margin-bottom: 0;
  border: 2px solid #111;
  box-shadow: 4px 4px 0 #333;
}

/* ==================== ADDITIONAL STICKY COLORS ==================== */
.note-peach { background: #ffe0d0; }
.note-blue  { background: #a5d8ff; }

/* ==================== TIPS PANEL ==================== */
.tips-panel { border: 2px solid #111; border-top: none; box-shadow: 4px 4px 0 #333; overflow: hidden; }
.tips-body  { background: #ffffa5; padding: 14px 16px; }
.tip-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: 11px;
  line-height: 1.6;
  color: #111;
}
.tip-row:last-child { margin-bottom: 0; }
.tip-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-top: 1px;
}
.tip-text { color: #111; }
.tip-text strong { color: #000; font-weight: 800; }

/* ==================== FAQ ACCORDION ==================== */
.faq-list { border: 2px solid #111; border-top: none; box-shadow: 4px 4px 0 #333; overflow: hidden; }
.faq-item { border-bottom: 1px solid #888; overflow: hidden; }
.faq-item:last-child { border-bottom: none; }
.faq-question {
  width: 100%;
  background: #d8d8d8;
  border: none;
  border-radius: 0 !important;
  box-shadow: none;
  padding: 10px 14px;
  text-align: left;
  font-family: 'ChicagoFLF', "Chicago", "Geneva", sans-serif;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.02em;
  color: #111;
  transition: background 0.15s;
}
.faq-question:hover { background: #c8c8c8; }
.faq-question.open  { background: #bbb; }
.faq-arrow { font-size: 10px; transition: transform 0.2s; flex-shrink: 0; margin-left: 8px; color: #111; }
.faq-question.open .faq-arrow { transform: rotate(90deg); }
.faq-answer {
  display: none;
  padding: 10px 14px 12px;
  background: #f0f0f0;
  font-size: 11px;
  line-height: 1.7;
  color: #111;
  border-top: 1px dashed #999;
}
.faq-answer.open { display: block; }

/* ==================== COMPARISON TABLE ==================== */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #111;
  border-top: none;
  box-shadow: 4px 4px 0 #333;
  font-size: 11px;
}
.compare-table th {
  background: #333;
  color: #fff;
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.compare-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #bbb;
  vertical-align: top;
  line-height: 1.5;
  color: #111;
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:nth-child(even) td { background: #e8e8e8; }
.compare-table tr:nth-child(odd)  td { background: #f2f2f2; }
.check-yes { color: #004d00; font-weight: bold; }
.check-no  { color: #7a0000; font-weight: bold; }
.table-footnote {
  font-size: 11px;
  color: #111;
  background: #e8e8e8;
  border: 2px solid #111;
  border-top: none;
  padding: 7px 12px;
  line-height: 1.6;
  box-shadow: 4px 4px 0 #333;
}

/* ==================== LINKS SECTION ==================== */
#links-section {
  background: #d4d0c8;
  border: 1px solid #808080;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
  padding: 16px 20px;
  font-size: 12px;
  line-height: 1.65;
  color: #222;
  margin: 20px 0;
}
#links-section h2 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 10px 0;
  color: #333;
}
.links-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.link-chip {
  border: 2px solid #000;
  border-radius: 6px !important;
  box-shadow: inset -2px -2px 0 #ffffff, inset 2px 2px 0 #808080;
  padding: 4px 12px;
  font-size: 11px;
  color: #00008b;
  text-decoration: none;
  cursor: pointer;
  background: #c0c0c0;
}
.link-chip:hover { background: #d4d0c8; text-decoration: underline; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 640px) {
  .compare-table th, .compare-table td { padding: 6px 8px; font-size: 10px; }
  #cta-scroll-bar { margin: 10px 12px 0; }
}