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

        /* === Theme Variables (default palette matches original) === */
        :root {
          --color-header-text:#8B4A9C;
          --color-header-border:#D4AF37;
          --color-header-bg:#F0E68C;
          --color-time-bg:#CD5C5C;
          --color-time-text:#FFFFFF;
          --color-apartment-bg:#FFFFFF;
          --color-apartment-border:#C0C0C0;
          --color-panel-bg:#E0E0E0;
          --color-panel-border:#808080;
          --color-btn-bg:#C0C0C0;
          --color-btn-border:#C0C0C0;
          --color-btn-hover-bg:#E0E0E0;
          --color-accent-1:#2C3E50;
          --color-accent-2:#8B4A9C;
                  --body-background:#4A90A4; /* base page background (was patterned) */
                  --color-modal-bg:#dde1e7;
                  --color-modal-border:#555b66;
                  --color-btn-text:#1d1d1f;
                  --color-btn-text-contrast:#ffffff;
                  --font-body:'Times New Roman', serif;
                  --font-heading:'Times New Roman', serif;
                  --shadow-button:2px 2px 0 var(--color-accent-2, #8B4A9C);
                  --shadow-panel:8px 8px 0 #808080;
                  --shadow-header:4px 4px 0 var(--color-accent-2, #8B4A9C);
                  --shadow-modal:8px 8px 0 rgba(0,0,0,0.45);
                  /* New semantic surfaces */
                  --color-surface-1:#FFFFFF;
                  --color-surface-2:#f7f7f7;
                  --color-surface-inset:#FFFFFF;
                  --color-surface-accent:#F5F5DC; /* beige accent used in some panels */
                  /* Neutral text */
                  --color-text-primary:var(--color-accent-1,#2C3E50);
                  --color-text-strong:#2C3E50;
                  --color-heading-primary:var(--color-accent-2,#8B4A9C);
                  --color-text-muted:#666666;
                  --color-text-invert:#FFFFFF;
                  --color-empty-state-text:#999999;
                  /* Generic borders */
                  --color-border-strong:#C0C0C0;
                  --color-border-muted:#DDDDDD;
                  --color-border-inset:#C0C0C0;
                  --color-border-accent:var(--color-accent-2,#8B4A9C);
                  /* Status surfaces / borders */
                  --color-surface-danger:#fff5f5;
                  --color-border-danger:#e74c3c;
                  --color-surface-success:#e8f5e8;
                  --color-border-success:#4caf50;
                  --color-surface-warning:#fff3cd;
                  --color-border-warning:#ffa502;
                  --color-surface-info:#e3f2fd;
                  --color-border-info:#2196f3;
                  /* Status text */
                  --color-text-danger:#c0392b;
                  --color-text-success:#2f9e44;
                  --color-text-warning:#856404;
                  --color-text-info:#2f5edc;
                  /* Button gradients */
                  --grad-danger-start:#ff6b6b; --grad-danger-end:#d94b4b; --btn-danger-border:#b93b3b;
                  --grad-success-start:#4caf50; --grad-success-end:#45a049; --btn-success-border:#3b8d40;
                  --grad-info-start:#3a7bff; --grad-info-end:#2f5edc; --btn-info-border:#2f5edc;
                  --grad-warning-start:#ff9800; --grad-warning-end:#f57c00; --btn-warning-border:#d97800;
                  --grad-purple-start:#9c27b0; --grad-purple-end:#7b1fa2; --btn-purple-border:#6b1b8f;
                  /* Ribbon / special */
                  --ribbon-danger-shadow:#8B4A9C;
                  /* Aether tint default */
                  --color-aether-tint-default:#aaccff;
        }

    body {
      font-family: var(--font-body, 'Times New Roman', serif);
      background: var(--body-background, #4A90A4);
      min-height: 100vh;
      overflow-x: auto;
      color: var(--color-accent-1);
      transition: background .4s ease;
    }
        
        .modal.chat-mode .modal-content {
          border: 2px solid var(--color-accent-2,#6aa0ff);
          background-color: var(--color-modal-bg,#eef5ff);
        }

        /* Generic modal theming */
        .modal .modal-content, .modal-content {
          background: var(--color-modal-bg, #dde1e7);
          border: 3px solid var(--color-modal-border, #555b66);
          color: var(--color-accent-1);
        }

        /* Generic themed buttons */
        .btn, button.btn {
          color: var(--color-btn-text,#1d1d1f);
        }

/* Status / semantic button classes (will replace inline styles in HTML) */
.btn-danger { background:linear-gradient(135deg,var(--grad-danger-start),var(--grad-danger-end)); border:1px solid var(--btn-danger-border); color:var(--color-btn-text-contrast); }
.btn-success{ background:linear-gradient(135deg,var(--grad-success-start),var(--grad-success-end)); border:1px solid var(--btn-success-border); color:var(--color-btn-text-contrast); }
.btn-info   { background:linear-gradient(135deg,var(--grad-info-start),var(--grad-info-end)); border:1px solid var(--btn-info-border); color:var(--color-btn-text-contrast); }
.btn-warning{ background:linear-gradient(135deg,var(--grad-warning-start),var(--grad-warning-end)); border:1px solid var(--btn-warning-border); color:var(--color-btn-text-contrast); }
.btn-purple { background:linear-gradient(135deg,var(--grad-purple-start),var(--grad-purple-end)); border:1px solid var(--btn-purple-border); color:var(--color-btn-text-contrast); }
.btn-danger:hover, .btn-success:hover, .btn-info:hover, .btn-warning:hover, .btn-purple:hover { filter:brightness(1.05); }
.btn-danger:active, .btn-success:active, .btn-info:active, .btn-warning:active, .btn-purple:active { filter:brightness(.9); }

/* Missing system & search/rescue helpers */
.missing-ribbon { position:absolute; top:8px; left:-40px; transform:rotate(-35deg); background:var(--color-text-danger,#c0392b); color:#fff; padding:6px 50px; font-weight:900; letter-spacing:1px; text-shadow:1px 1px 0 var(--color-text-strong,#2C3E50); box-shadow:3px 3px 0 var(--ribbon-danger-shadow,#8B4A9C); }
.missing-item { padding:10px; border-left:4px solid var(--color-border-danger,#e74c3c); background:var(--color-surface-danger,#fff5f5); margin-bottom:8px; border-radius:0 4px 4px 0; }
.missing-meta { font-size:0.85rem; color:var(--color-text-muted,#555); }
.search-btn-inline { margin-top:8px; display:inline-block; background:var(--color-btn-bg,#C0C0C0); border:3px outset var(--color-btn-border,#C0C0C0); padding:6px 10px; font-weight:bold; cursor:pointer; }
.search-btn-inline:hover { background:var(--color-btn-hover-bg,#E0E0E0); border:3px outset var(--color-btn-hover-bg,#E0E0E0); }

/* Alerts / blocks (replace inline HTML blocks) */
.alert { padding:8px; border:1px solid var(--color-border-muted); border-radius:4px; margin-bottom:10px; font-size:0.85rem; }
.alert-danger  { background:var(--color-surface-danger);  border-color:var(--color-border-danger);  color:var(--color-text-danger); }
.alert-success { background:var(--color-surface-success); border-color:var(--color-border-success); color:var(--color-text-success); }
.alert-warning { background:var(--color-surface-warning); border-color:var(--color-border-warning); color:var(--color-text-warning); }
.alert-info    { background:var(--color-surface-info);    border-color:var(--color-border-info);    color:var(--color-text-info); }

/* Project & dynamic UI helpers */
.project-issue { margin-top:10px; padding:10px; border:1px solid var(--color-border-danger); background:var(--color-surface-danger); font-size:.95rem; }
.project-issue .issue-actions { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.btn-cancel-project { background:linear-gradient(135deg,var(--grad-danger-start),var(--grad-danger-end)); border:1px solid var(--btn-danger-border); color:var(--color-btn-text-contrast); width:auto; margin-top:10px; padding:8px 14px; font-size:.85rem; }
.btn-cancel-project:hover { filter:brightness(1.05); }

/* Save/Load panel classic theme button color restoration */
body:not(.theme-midnight):not(.theme-sunset):not(.theme-verdant):not(.theme-noir):not(.theme-boiler):not(.theme-floorboards):not(.theme-diner):not(.theme-staticwave):not(.theme-accessible) #save-load .btn-success { background:linear-gradient(135deg,#4caf50 0%, #45a049 100%); border:1px solid #3b8d40; color:#fff; }
body:not(.theme-midnight):not(.theme-sunset):not(.theme-verdant):not(.theme-noir):not(.theme-boiler):not(.theme-floorboards):not(.theme-diner):not(.theme-staticwave):not(.theme-accessible) #save-load .btn-info { background:linear-gradient(135deg,#2196f3 0%, #1976d2 100%); border:1px solid #2f5edc; color:#fff; }
body:not(.theme-midnight):not(.theme-sunset):not(.theme-verdant):not(.theme-noir):not(.theme-boiler):not(.theme-floorboards):not(.theme-diner):not(.theme-staticwave):not(.theme-accessible) #save-load .btn-warning { background:linear-gradient(135deg,#ff9800 0%, #f57c00 100%); border:1px solid #d97800; color:#fff; }
body:not(.theme-midnight):not(.theme-sunset):not(.theme-verdant):not(.theme-noir):not(.theme-boiler):not(.theme-floorboards):not(.theme-diner):not(.theme-staticwave):not(.theme-accessible) #save-load .btn-purple { background:linear-gradient(135deg,#9c27b0 0%, #7b1fa2 100%); border:1px solid #6b1b8f; color:#fff; }
body:not(.theme-midnight):not(.theme-sunset):not(.theme-verdant):not(.theme-noir):not(.theme-boiler):not(.theme-floorboards):not(.theme-diner):not(.theme-staticwave):not(.theme-accessible) #save-load .btn-danger { background:linear-gradient(135deg,#f44336 0%, #d32f2f 100%); border:1px solid #b93b3b; color:#fff; }
/* Hover brightness bump */
#save-load .btn-success:hover,#save-load .btn-info:hover,#save-load .btn-warning:hover,#save-load .btn-purple:hover,#save-load .btn-danger:hover { filter:brightness(1.08); }

/* Segmented project progress bar (11 segments red -> green) */
.project-progress { display:flex; gap:2px; height:22px; align-items:stretch; }
.project-progress .seg { flex:1; position:relative; border:1px solid #555; border-radius:2px; background:#222; box-shadow:1px 1px 0 #444; overflow:hidden; }
.project-progress .seg-inner { position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,0.55),rgba(255,255,255,0.05)); mix-blend-mode:overlay; pointer-events:none; }
.project-progress .seg.filled { box-shadow:1px 1px 0 #222; }
.project-progress .seg.filled:before { content:""; position:absolute; inset:0; }
/* Individual segment hues (approx spectrum) */
.project-progress .seg.idx-0 { background:linear-gradient(180deg,#ff1d00,#cc0500); }
.project-progress .seg.idx-1 { background:linear-gradient(180deg,#ff3600,#d42600); }
.project-progress .seg.idx-2 { background:linear-gradient(180deg,#ff5a00,#d44700); }
.project-progress .seg.idx-3 { background:linear-gradient(180deg,#ff8400,#d46a00); }
.project-progress .seg.idx-4 { background:linear-gradient(180deg,#ffaa00,#d48500); }
.project-progress .seg.idx-5 { background:linear-gradient(180deg,#ffd400,#d4aa00); }
.project-progress .seg.idx-6 { background:linear-gradient(180deg,#efff00,#c3d400); }
.project-progress .seg.idx-7 { background:linear-gradient(180deg,#c7f500,#9aba00); }
.project-progress .seg.idx-8 { background:linear-gradient(180deg,#9be000,#6fa300); }
.project-progress .seg.idx-9 { background:linear-gradient(180deg,#63c800,#3d9200); }
.project-progress .seg.idx-10 { background:linear-gradient(180deg,#00b31b,#008210); }
.project-progress .seg:not(.filled) { filter:grayscale(.85) brightness(.5); opacity:.5; }
.project-progress .seg.filled .seg-inner { opacity:.6; }

/* Empty state text helper */
.empty-hint { text-align:center; color:var(--color-empty-state-text); font-style:italic; }
        .btn:hover, button.btn:hover { color: var(--color-btn-text,#1d1d1f); }

        /* High-contrast mini variant override */
        .btn.mini { color: var(--color-btn-text,#1d1d1f); }

/* ===== Interaction Menu Styling ===== */
.interact-menu {
  min-width: 210px;
  max-width: 260px;
  font-size: 0.95rem;
  line-height: 1.3;
  border: 3px ridge #b8b8b8 !important;
  background: linear-gradient(135deg,#ffffff 0%, #f2f4f6 60%, #e9eef2 100%);
  border-radius: 6px;
  padding: 8px 10px;
}
.interact-menu .verb { 
  padding: 4px 6px; 
  border-radius: 4px; 
  margin-bottom: 4px; 
  transition: background .15s, transform .1s;
}
.interact-menu .verb:hover { 
  background: #dde9f9; 
  transform: translateX(2px);
}
.interact-menu .verb.disabled:hover { background: none; transform:none; }
.interact-menu:before {
  content:""; position:absolute; top:-8px; left:14px; width:14px; height:14px; background:inherit; border:3px ridge #b8b8b8; transform:rotate(45deg); border-bottom:none; border-right:none;
}
.interact-menu h4 { margin:0 0 6px; font-size:0.85rem; letter-spacing:.5px; text-transform:uppercase; color:var(--color-heading-primary,var(--color-accent-2,#8B4A9C)); text-shadow:1px 1px 0 var(--color-surface-1,#FFFFFF); }
.interact-menu .section { margin-top:6px; padding-top:4px; border-top:1px dotted #bbb; }
.interact-menu input[type='text'] { width:100%; padding:4px 6px; font-size:0.85rem; margin:4px 0 6px; border:1px solid #999; border-radius:4px; }
.interact-menu button.action-btn { display:block; width:100%; background:#2c3e50; color:#fff; border:none; padding:6px 8px; font-size:0.85rem; cursor:pointer; border-radius:4px; box-shadow:2px 2px 0 #999; }
.interact-menu button.action-btn:hover { background:#355676; }
.interact-menu .topic { cursor:pointer; padding:3px 4px; border-radius:4px; }
.interact-menu .topic:hover { background:#f0f6ff; }
.interact-menu .response { font-style:italic; margin-top:4px; color:#394555; }
.interact-menu .cooldown-note { font-size:0.7rem; opacity:0.7; margin-top:2px; }



        .game-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            display: grid;
            grid-template-columns: 1fr 350px;
            gap: 30px;
        }

        .main-content {
            min-width: 0;
        }

    .header {
      text-align: center;
      color: var(--color-header-text);
      margin-bottom: 20px;
      border: 5px ridge var(--color-header-border);
      background: var(--color-header-bg);
      padding: 16px 20px 12px;
  box-shadow: var(--shadow-header, 4px 4px 0 var(--color-accent-2));
    }

        .header h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            font-weight: bold;
            text-decoration: underline;
              font-family: var(--font-heading, var(--font-body));
        }

        /* New: tidy header toolbar */
        .header-toolbar {
          display: grid;
          grid-template-columns: 1fr auto; /* controls on left, time on right */
          align-items: center;
          gap: 10px;
          margin-top: 6px;
        }

        .row-collapse-controls {
          display: inline-flex;
          gap: 6px;
          justify-content: center;
        }

        /* Unified themed buttons */
        .btn, button.btn, .tab-button {
          font-family: var(--font-body, 'Times New Roman', serif);
          box-shadow: var(--shadow-button, 2px 2px 0 var(--color-accent-2));
          color: var(--color-btn-text,#1d1d1f) !important;
        }
        .btn:hover, button.btn:hover, .tab-button:hover { filter: brightness(1.07); }
        .btn.mini { padding:4px 8px; font-size:1rem; line-height:1.1; border-width:2px; background:#E8E8E8; }
        .btn.mini:hover { background:#f2f2f2; }

    .time-display {
      background: var(--color-time-bg);
      border: 3px solid var(--color-accent-1);
      padding: 10px 20px;
      display: inline-block;
      font-size: 1.2rem;
      color: var(--color-time-text);
      font-weight: bold;
  box-shadow: var(--shadow-button, 2px 2px 0 var(--color-accent-2));
    }

        .apartment-complex {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

    .apartment {
      background: var(--color-apartment-bg);
      border: 4px outset var(--color-apartment-border);
      padding: 15px;
  box-shadow: var(--shadow-panel, 8px 8px 0 #808080);
      position: relative;
      min-height: 200px;
      transition: none;
    }
        
        /* Photo in chat modal */
.chat-photo-wrap {
  margin: 12px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chat-photo {
  max-width: min(520px, 90vw);
  width: 100%;
  border-radius: 8px;
  outline: 2px solid #e2e8f6;
  box-shadow: 0 4px 18px rgba(20, 35, 90, 0.15);
  background: #fff;
}

.chat-photo-caption {
  margin-top: 6px;
  color: #334;
  font-size: 0.95rem;
  opacity: 0.85;
  text-align: center;
}

/* Optional: slightly different accent when the chat includes a photo */
        .modal.chat-mode .modal-content {
  border-color: var(--color-accent-2,#6aa0ff);
  background: var(--color-modal-bg,#f4f8ff);
}


        .apartment:hover {
              border: 4px inset var(--color-apartment-border,#C0C0C0);
              box-shadow: 4px 4px 0px var(--color-accent-2,#808080);
            }

        .apartment.has-problem {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
            50% { box-shadow: 0 8px 25px rgba(255,0,0,0.4); }
        }

        .problem-indicator {
            position: absolute;
            top: -10px;
            right: -10px;
            background: #ff4757;
            color: white;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            text-shadow:none;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            animation: bounce 1s infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .resident-avatar {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            margin: 0 auto 10px;
            display: block;
            cursor: pointer;
            border: 3px solid #ddd;
            transition: transform 0.2s ease;
        }

        .resident-avatar:hover {
            transform: scale(1.1);
        }

        .resident-name {
            text-align: center;
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 10px;
            margin: 5px;
            padding: 5px;
            color: #2C3E50;
background-color: rgba(255, 255, 255, 0.45);
            font-family: 'Times New Roman', serif;
        }

        .resident-status {
            text-align: center;
            font-size: 1rem;
            color: #3a1f4a;
            margin-bottom: 15px;
            margin: 5px;
            padding: 5px;
            font-weight: bold;
            font-family: 'Times New Roman', serif;
            background-color: rgba(255, 255, 255, 0.45);
        }

        .relationship-display {
            font-size: 1rem;
            color: #000;
            margin-top: 10px;
            margin: 5px;
            padding: 5px;
            background-color: rgba(255, 255, 255, 0.45);
        }

        .controls {
            position: sticky;
            top: 20px;
            height: fit-content;
        }

    .tab-container {
      background: var(--color-panel-bg);
      border: 3px ridge var(--color-panel-border);
      box-shadow: 6px 6px 0px #404040;
    }
        
        select {
        resize:vertical;}

    .tab-buttons {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr)); /* two columns */
      gap: 8px; /* space between buttons */
      padding: 8px; /* breathing room around buttons */
  background: var(--color-panel-bg);
      border-bottom: 3px ridge #808080;
    }
        
        /* container already uses your .personality-traits styles; these polish the collapsible */
.traits-collapsible summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;           /* hide default marker */
  cursor: pointer;
}
.traits-collapsible summary::-webkit-details-marker { display: none; }

.trait-more {
  display: inline-block;
  background: #e8e8e8;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #333;
  border: 1px solid #c8c8c8;
}

.traits-rest {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* optional: keep pill look consistent */
.trait {
  display: inline-block;
  background: #e0f7fa;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: bold;
}


    .tab-button {
      background: var(--color-btn-bg);
      border: 2px outset var(--color-btn-border); /* full border for tidy tiles */
      padding: 10px 10px;
      cursor: pointer;
      font-family: 'Times New Roman', serif;
      font-weight: bold;
      font-size: 0.9rem;
      color: var(--color-accent-1);
      transition: background 0.2s, border-color 0.2s;
      text-align: left;
      width: 100%;
    }

  /* legacy single-column override removed; keep borders on all tiles */
  .tab-button:last-child { border-bottom: 2px outset #9a9a9a; }

    .tab-button:hover {
      background: var(--color-btn-hover-bg);
      border-color: #8f8f8f;
    }

    .tab-button.active {
      background: var(--color-btn-hover-bg); /* slightly brighter */
      border: 2px inset #8a8a8a; /* pressed look for active */
    }

    .tab-button:focus {
      outline: 2px solid #2C3E50;
      outline-offset: 1px;
    }

        .tab-content {
            display: none;
            padding: 20px;
        }

        .tab-content.active {
            display: block;
        }
        
        /* =============== Quarantine Cards (Missing-like) =============== */
#quarantine .control-panel { background: var(--color-panel-bg,#E0E0E0); padding: 15px; }

.q-empty {
  text-align: center;
  color: var(--color-empty-state-text,#999999);
  font-style: italic;
  padding: 16px;
  background: var(--color-surface-1,#FFFFFF);
  border: 2px inset var(--color-border-inset,#C0C0C0);
}

.q-case-card {
  background: var(--color-apartment-bg,#FFFFFF);
  border: 3px ridge var(--color-apartment-border,#C0C0C0);
  box-shadow: var(--shadow-panel,4px 4px 0px #808080);
  padding: 12px;
  margin-bottom: 12px;
}

.q-card-head {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.q-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid var(--color-border-muted,#dddddd);
  object-fit: cover;
}

.q-title { display: flex; flex-direction: column; line-height: 1.2; }
.q-name { font-weight: 800; color: var(--color-accent-1,#2C3E50); }
.q-reason { color: var(--color-accent-2,#8B4A9C); font-weight: 600; }

.q-badge {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  font-weight: 800;
  border-radius: 12px;
  padding: 4px 8px;
  border: 2px solid var(--color-border-strong,#C0C0C0);
  background: var(--color-surface-2,#f7f7f7);
  color: var(--color-text-primary,#2C3E50);
}
.q-badge.sev-1 { background: #e8fff2; border-color: #a3e4b2; }
.q-badge.sev-2 { background: #f1fff0; border-color: #cfe9a3; }
.q-badge.sev-3 { background: #fff9e6; border-color: #ffd27a; }
.q-badge.sev-4 { background: #ffece6; border-color: #ffb199; }
.q-badge.sev-5 { background: #ffe5e5; border-color: #ff9999; }

.q-meta {
  display: flex;
  gap: 20px;
  font-size: 0.92rem;
  color: var(--color-text-primary,#2C3E50);
  margin: 6px 0 10px;
}

.q-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.q-actions .option-btn { width: 100%; }
.q-actions .q-release {
  background: var(--color-surface-success,#e6ffe6);
  border-color: var(--color-border-success,#b5ecb5);
}


 .control-panel { background: var(--color-panel-bg); padding: 15px; }


    .control-panel h3 {
      color: var(--color-heading-primary,var(--color-header-text,#8B4A9C));
      margin-bottom: 12px;
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing:.5px;
      text-shadow:1px 1px 0 var(--color-surface-1,#FFFFFF);
      text-decoration:none;
    }

        .form-group {
            margin-bottom: 15px;
        }

    .form-group label {
            display: block;
            margin-bottom: 5px;
      color: var(--color-accent-1,#2C3E50);
            font-weight: bold;
            font-family: 'Times New Roman', serif;
      text-shadow: 1px 1px 0px var(--color-header-bg,#F0E68C);
        }

        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 8px;
            border: 2px inset #C0C0C0;
            font-size: 1rem;
            background: #FFFFFF;
            font-family: 'Times New Roman', serif;
        }

        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            outline: none;
            border: 2px inset #0000FF;
            background: #FFFFCC;
        }

    .btn {
      background: var(--color-btn-bg);
      color: var(--color-btn-text, #000000);
      border: 3px outset var(--color-btn-border, var(--color-btn-bg));
      padding: 6px 8px;
      cursor: pointer;
      font-size: 1rem;
      font-weight: bold;
      font-family: 'Times New Roman', serif;
      width: 100%;
      box-shadow: var(--shadow-button, 3px 3px 0px var(--color-accent-2,#808080));
    }

    .btn:hover {
      background: var(--color-btn-hover-bg);
      border: 3px outset var(--color-btn-hover-bg);
    }

        .btn:active {
            border: 3px inset #C0C0C0;
            box-shadow: 1px 1px 0px #808080;
        }
        
        .btn.danger {
  background-color: #b33636;
  color: white;
}

.btn.danger:hover {
  background-color: #a12c2c;
}


        .notifications {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            max-width: 350px;
        }

        .notification {
            background: #F5F5DC;
            padding: 12px;
            margin-bottom: 8px;
            border: 2px solid #2C3E50;
            box-shadow: 3px 3px 0px #8B4A9C;
            font-family: 'Times New Roman', serif;
            font-weight: bold;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }

    .modal-content {
      background: var(--color-modal-bg,#F0F0F0);
      padding: 25px;
      border: 4px ridge var(--color-modal-border,#808080);
      max-width: 500px;
      width: 90%;
      max-height: 80vh;
      overflow-y: auto;
      box-shadow: var(--shadow-modal, 8px 8px 0px #404040);
    }

        .modal h3 {
            margin-bottom: 20px;
            color: #333;
        }

        .close-btn {
            float: right;
            font-size: 1.5rem;
            cursor: pointer;
            color: #999;
        }

        .speech-bubble {
            position: absolute;
            background: #F5F5DC;
            padding: 12px;
            border: 2px solid #2C3E50;
            box-shadow: 3px 3px 0px #8B4A9C;
            z-index: 100;
            max-width: 200px;
            font-size: 0.9rem;
            font-family: 'Times New Roman', serif;
            font-weight: bold;
        }

        .speech-bubble::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 20px;
            width: 0;
            height: 0;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-top: 12px solid #F5F5DC;
        }

        .personality-traits {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 10px;
        }

        .trait {
            background: #f0f0f0;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            color: #666;
        }

        .gift-section {
            margin: 5px;
            padding: 5px;
            color:#150926;
            background-color: rgba(255, 255, 255, 0.45);
        }

        .minigame-container {
            text-align: center;
        }

.minigame-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin: 20px 0;
}


    .option-btn {
      padding: 12px;
      background: var(--color-btn-bg,#D0D0D0);
      border: 3px outset var(--color-btn-border,#C0C0C0);
      cursor: pointer;
      font-family: 'Times New Roman', serif;
      font-weight: bold;
      color: var(--color-btn-text,#1d1d1f);
      box-shadow: var(--shadow-button,3px 3px 0px var(--color-accent-2,#808080));
    }

    .option-btn:hover {
      background: var(--color-btn-hover-bg,#E0E0E0);
      border: 3px outset var(--color-btn-hover-bg,#E0E0E0);
    }

    .option-btn:active {
      border: 3px inset var(--color-btn-border,#C0C0C0);
      box-shadow: 1px 1px 0px var(--color-accent-2,#808080);
    }

        .age-verification {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 10px;
            border-radius: 8px;
            margin: 10px 0;
            font-size: 1rem;
        }

        .adult-content-warning {
            color: #856404;
            font-weight: bold;
        }

        .event-item {
            padding: 8px 12px;
            margin-bottom: 8px;
            border-left: 4px solid #ddd;
            background: #f9f9f9;
            font-size: 0.9rem;
            border-radius: 0 4px 4px 0;
        }

        .event-item.friendship {
            border-left-color: #4CAF50;
            background: #f1f8e9;
        }

        .event-item.romance {
            border-left-color: #E91E63;
            background: #fce4ec;
        }

        .event-item.visit {
            border-left-color: #2196F3;
            background: #e3f2fd;
        }

        .event-item.problem {
            border-left-color: #FF9800;
            background: #fff3e0;
        }

        .event-item.gift {
            border-left-color: #9C27B0;
            background: #f3e5f5;
        }

        .event-item.general {
            border-left-color: #607D8B;
            background: #eceff1;
        }

        .event-item.minigame {
            border-left-color: #FF5722;
            background: #fbe9e7;
        }

    /* Ensure trait events in the feed are not bolded like trait chips */
    .event-item.trait {
      font-weight: normal;
      color:#000;
    }

        .event-timestamp {
            font-size: 0.7rem;
            color: #666;
            float: right;
            font-style: italic;
        }

        @media (max-width: 768px) {
            .game-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .apartment-complex {
                grid-template-columns: 1fr;
            }
            
            .controls {
                position: relative;
                top: auto;
            }
            
            .tab-buttons {
                flex-direction: row;
                overflow-x: auto;
            }
            
            .tab-button {
                border-bottom: 2px solid #808080;
                border-right: 2px solid #808080;
                white-space: nowrap;
                text-align: center;
            }
            
            .tab-button:last-child {
                border-right: none;
            }
            
            .tab-button.active {
                border-bottom: 2px solid #E0E0E0;
                border-right: 2px solid #808080;
                margin-right: 0;
                margin-bottom: -2px;
            }
            
            .notifications {
                position: relative;
                top: auto;
                right: auto;
                max-width: 100%;
                margin-bottom: 20px;
            }
        }
/* === Missing / Rescue System === */
.apartment.missing {
  filter: grayscale(0.4) contrast(0.9);
  position: relative;
}

.missing-overlay {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,0,0,0.12) 0 10px,
    rgba(255,0,0,0.18) 10px 20px
  );
  pointer-events: none;
  border: 4px dashed rgba(255,0,0,0.4);
}

.missing-ribbon {
  position: absolute;
  top: 8px; left: -40px;
  transform: rotate(-35deg);
  background: #c0392b;
  color: #fff;
  padding: 6px 50px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #2C3E50;
  box-shadow: 3px 3px 0 #8B4A9C;
}

.searching-spin {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid #2C3E50;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.missing-item {
  padding: 10px;
  border-left: 4px solid #e74c3c;
  background: #fff5f5;
  margin-bottom: 8px;
  border-radius: 0 4px 4px 0;
}
.missing-meta {
  font-size: 0.85rem;
  color: #555;
}

.search-btn-inline {
  margin-top: 8px;
  display: inline-block;
  background: #C0C0C0;
  border: 3px outset #C0C0C0;
  padding: 6px 10px;
  font-weight: bold;
  cursor: pointer;
}
.search-btn-inline:hover {
  background: #E0E0E0;
  border: 3px outset #E0E0E0;
}

#tutorial ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1em;
}

#tutorial ul li {
  background: #f4f4f8;
  border-left: 5px solid #4a90e2;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 6px;
  font-size: 0.95rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: background 0.3s;
}

#tutorial ul li:hover {
  background: #e9f1ff;
}

#tutorial details {
  background: #f4f4f8;
  border-left: 4px solid #4a90e2;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 6px;
  font-size: 0.95rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: background 0.3s;
}

.quarantine-entry {
  background: #fff0f0;
  border: 1px solid #ff9999;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 5px;
}

#quarantinedList {
  background: #ffffff;
  padding: 10px;
  border: 2px inset #C0C0C0;
  color: #2C3E50;
  font-family: "Segoe UI", sans-serif;
}



#tutorial details summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  outline: none;
}

#tutorial details[open] summary {
  color: #2c3e50;
}

#tutorial details p {
  margin-top: 8px;
  line-height: 1.5;
}

/* --- Quarantine tab polish --- */
#quarantine .control-panel {
  background: var(--color-panel-bg,#E0E0E0);  /* matches other panels */
  padding: 15px;        /* fix bad 'padding: px' */
}

.quarantine-stats {
  margin-bottom: 10px;
  font-weight: bold;
  color: var(--color-text-strong,#2C3E50);
}

#quarantinedList {
  max-height: 350px;
  overflow-y: auto;
  border: 2px inset var(--color-border-inset,#C0C0C0);
  background: var(--color-surface-1,#FFFFFF);
  padding: 10px;
}

.quarantine-entry {
  background: var(--color-surface-danger,#fff0f0);
  border: 1px solid var(--color-border-danger,#ff9999);
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 5px;
}

/* Utility classes for injected quarantine markup cleanup */
.panel-stat { margin-bottom:10px; font-weight:700; color:var(--color-heading-primary,var(--color-text-strong,#2C3E50)); letter-spacing:.5px; text-shadow:1px 1px 0 var(--color-surface-1,#FFFFFF); }
.scroll-pane { max-height:260px; overflow-y:auto; border:2px inset var(--color-border-inset,#C0C0C0); background:var(--color-surface-1,#FFFFFF); padding:10px; }
.treatment-panel { display:none; margin-top:15px; }
.machine-hint { margin:6px 0 10px; font-size:.9rem; color:var(--color-text-muted,#666666); }

#treatmentPanel {
  margin-top: 15px;
}

#treatmentPanel h4, .modal-content h2, .modal-content h3, .modal-content h4 {
  margin:0 0 8px;
  color: var(--color-heading-primary,var(--color-accent-2,#8B4A9C));
  font-weight:800;
  letter-spacing:.5px;
  text-shadow:1px 1px 0 var(--color-surface-1,#FFFFFF);
}


/* Subtle chat indicator, positioned top-left */
.talk-indicator {
  position: absolute;
  top: 6px;
  left: 6px;               /* 👈 moved to left */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 26px;
  background: #d0e4ff;     /* softer blue */
  color: #1e4da1;          /* darker icon */
  font-size: 0.9rem;
  font-weight: bold;
  border: 1px solid #91b7e0;
  box-shadow: none;        /* no glow */
  text-shadow:none;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.talk-indicator:hover {
  opacity: 1;              /* a little brighter on hover */
}
/* base .apartment styles live earlier */

/* ===== Quarantine overlay (blue) ===== */
.apartment.is-quarantined {
  position: relative;
  background:
    repeating-linear-gradient(-45deg, #eaf2ff 0 12px, #dbe9ff 12px 24px);
  border-color: #9bbcff;
  box-shadow: 8px 8px 0 #7089c1;
}
.apartment.is-quarantined::after {
  content: "QUARANTINED";
  position: absolute;
  top: 10px;
  left: -38px;
  transform: rotate(-45deg);
  background: linear-gradient(135deg,#3a7bff,#2f5edc);
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 6px 40px;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  pointer-events: none;
}
.apartment.is-quarantined .resident-avatar {
  filter: grayscale(0.2) hue-rotate(190deg) saturate(1.2);
  border-color: #9bbcff;
}

.apartment.is-quarantined::after {
  content: "QUARANTINED";
  position: absolute;
  top: -12px;
  left: -12px;
  background: rgba(47, 94, 220, 0.9);
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transform: rotate(-5deg);
  pointer-events: none;
}

.decorate-grid {
  display: grid;
  grid-template-columns: repeat(6, 40px);
  grid-template-rows: repeat(6, 40px);
  gap: 4px;

  background: #e0e0e0;
  padding: 10px;
  margin: 20px auto;

  position: relative; /* Anchor for absolutely positioned tiles */
  width: max-content; /* Cleaner alternative to fit-content */
  border: 2px solid #999;
  border-radius: 8px;
}


.grid-cell {
  width: 40px;
  height: 40px;
  border: 1px solid #999;
  background: #fff;
  position: relative;
}

.grid-cell.occupied {
  background: #ccc;
  cursor: not-allowed;
}

.decoration-tile {
  border-radius: 6px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
  font-family: 'Times New Roman', serif;
  font-weight: bold;
  text-align: center;
  overflow: hidden;
  padding: 2px;
  left: calc(10px);
    top: calc(10px);
      position: absolute;
  z-index: 10;
}

#decorateModal {
  flex-direction: column;
  align-items: center;
}

#decorateGrid {
  position: relative;
  width: fit-content;
  margin: 0 auto 20px auto; /* ✅ push space between grid and buttons */
  z-index: 1;
}

.decoration-tile {
  z-index: 2; /* ✅ Ensure it stays above the grid cells */
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    left: calc(10px);
    top: calc(10px);
}
.grid-wrapper {
  position: relative;  /* ⬅️ Anchors decoration-tile absolute positions */
  width: fit-content;
  margin: 0 auto 20px auto;
}

.grid-cell {
  width: 40px;
  height: 40px;
  border: 1px solid #999;
  box-sizing: border-box;
  position: relative; /* just in case we add children */
}

.decoration {
    position: absolute;
  left: calc(10px);
    top: calc(10px);
    width: 100%;
    height: 100%;
    object-fit: contain; /* If image */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Optional: make decoration not clickable */
}

#decorateGrid {
  display: grid;
  grid-template-columns: repeat(6, 40px);
  grid-template-rows: repeat(6, 40px);
  gap: 4px;
  position: relative;
}

.decorations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 10px;
  padding: 5px;
  background: #f8f8f8;
  border: 1px dashed #aaa;
}

.decoration-item {
  padding: 5px;
  text-align: center;
  font-weight: bold;
  color: #333;
  border-radius: 6px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  font-family: 'Times New Roman', serif;
}

.count-badge{
  position:absolute; right:6px; top:6px;
  font: 600 12px/1 system-ui, sans-serif;
  background:#e8f3ff; color:#2b5cff; border:1px solid #bcd0ff;
  border-radius:10px; padding:2px 6px;
}

/* Add to 13style.css */
.decorations-grid .decoration-item{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 8px;          /* a little breathing room */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;        /* slightly smaller for tight tiles */
}

.machine-controls {
  background: #fff;
  border: 2px inset #C0C0C0;
  padding: 12px;
  margin-bottom: 12px;
  font-family: 'Times New Roman', serif;
}

.machine-controls label {
  display: block;
  margin: 6px 0;
  font-weight: bold;
}

.machine-controls input[type="range"] {
  width: 100%;
}
.machine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.group {
  background: #fff;
  border: 2px inset #C0C0C0;
  padding: 10px;
}
.group legend {
  font-weight: 800;
  color: #2C3E50;
  padding: 0 6px;
}
.group label { display: block; margin: 6px 0; font-weight: bold; }
.group input[type="range"] { width: 100%; }
.radio-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; }
.machine-actions { display: flex; gap: 8px; margin-top: 10px; }

.apartment-decal {
  position: absolute;
  top: -12px;
  left: -12px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 8px;
  box-shadow: 2px 2px 0px #333;
  z-index: 5;
}

.decal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.decal-option { user-select: none; }

.decal-legend { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.chip {
  display:inline-block; padding:2px 8px; border-radius:10px; font-size:.8rem; font-weight:700;
  background:#eef; color:#223; border:1px solid #99a;
}
.chip.eerie { background:#111; color:#eee; border-color:#333; }
.chip.meta { background:#ffd; color:#553; border-color:#cc9; }

.decal-count { margin-top:6px; font-weight:700; color:#2C3E50; }

.tutorial-note { color:#555; font-size:.9rem; margin-top:8px; }

.tutorial-decal {
  user-select: none;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  font-weight: 800;
  box-shadow: 2px 2px 0 #333;
}
/* ================= DECAL OVERLAYS — visible + quarantine-safe ================= */
.apartment.has-decal {
  position: relative;
  isolation: isolate;           /* makes blend modes behave consistently */
  --decal-opacity: 0.38;        /* tweak 0.25–0.45 to taste */
  --decal-blend: overlay;       /* stronger than soft-light; try multiply */
}

/* The overlay (below content, above bg) */
.apartment.has-decal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-repeat: repeat;
  background-size: var(--decal-bg-size, 140px 140px); /* <— critical: size lives here */
  background-position: center;
  opacity: var(--decal-opacity);
  mix-blend-mode: var(--decal-blend);
}

/* Quarantine stays readable; ribbon always above decals */
.apartment.is-quarantined.has-decal::before { opacity: calc(var(--decal-opacity) * 0.6); }
.apartment.is-quarantined::after { z-index: 3; }

/* ===== Stickers (user-uploaded) ===== */
.sticker-layer {
  position: absolute;
  inset: 0;
  pointer-events: none; /* purely decorative; managed via modal */
  z-index:-1;
}
.apartment { position: relative; }
.sticker-layer .sticker {
  position: absolute;
  width: 50px; /* fixed sticker width for consistency */
  border: none; /* transparent images look cleaner */
  border-radius: 0;
  box-shadow: none;
  outline: none;
  user-select: none;
}

/* Sticker Manager modal grid */
.stickers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.sticker-tile {
  background: #fff;
  border: 2px inset #C0C0C0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.sticker-tile img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.sticker-meta { font-size: 0.75rem; color: #555; }
.sticker-buttons { display: flex; gap: 6px;}
button.btn.sticker-buttons {padding:5px;}

/* Center modals on screen */
.modal {
  display: none; /* default hidden */
  position: fixed;
  z-index: 1000;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.25);
  display: none;
}
.modal[style*="display: block"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.modal .modal-content {
  margin: 0; /* center via flex, not margins */
}

/* ---------- Modal preview tiles ---------- */
.decal-option.decal-preview { position: relative; background:#fff; }
.decal-option.decal-preview::before {
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: var(--decal-overlay);
  background-repeat: repeat;
  background-size: var(--decal-bg-size, 140px 140px);
  background-position: center;
  opacity: .5;
  mix-blend-mode: overlay;
}

/* ================= PER-DECAL ARTWORK ================= */
/* Each decal now also sets --decal-bg-size so patterns render at the intended scale. */

/* ⭐ Month survivor — speckled stars */
.decal--stars {
  --decal-bg-size: 110px 110px;
      background-image: url(overlay/month.png);
  background-size: 150%;
      background-position:top center;
}

/* 🏆 Year survivor — soft gold sweep */
.decal--laurel {
  --decal-bg-size: cover;
    background-image: url(overlay/365c.png);
  background-size: 150%;
    background-position:top center;
    

}

/* 🎭 All traits — confetti dots */
.decal--confetti {
  --decal-bg-size: 120px 120px;
  background-image: url(overlay/everytrait3.png);
  background-size: 150%;
    background-position:top center;
}


/* 🛠️ Problem solver — bold diagonal ribbons */
.decal--ribbons {
  --decal-bg-size: 416px 608;
      background-image: url(overlay/problemsolver.png);
  background-size: 150%;
    background-position:top center;
}


/* 🤝 Eternal friendship — corner hearts */
.decal--heartCorners {
  --decal-bg-size: 416px 608;
    background-image: url(overlay/eternalfriendship.png);
  background-size: 150%;
    background-position:top center;
}


/* ☣️ Quarantine master — hazard stripes */
.decal--caution {
  --decal-bg-size: 416px 608;
      background-image: url(overlay/quara.png);
  background-size: 150%;
    background-position:top center;
}


/* 🕳️ Q+Missing — top drip */
.decal--slime {
  --decal-bg-size: cover;
        background-image: url(overlay/quaramissing.png);
  background-size: 150%;
    background-position:top center;
}


/* 🌀️ The Where-was-ie — concentric rings */
.decal--where {
  --decal-bg-size: 416px 608;
          background-image: url(overlay/where.png);
  background-size: 150%;
    background-position:top center;
}


/* 🌀️ The Where-was-ie — concentric rings */
.decal--basement {
  --decal-bg-size: 416px 608;
          background-image: url(overlay/basement.png);
  background-size: 150%;
    background-position:top center;
}


/* 🌀️ The Where-was-ie — concentric rings */
.decal--neversunny {
  --decal-bg-size: 416px 608;
          background-image: url(overlay/neversunny.png);
  background-size: 120%;
  background-position:top center;
}

/* 🌀️ The Where-was-ie — concentric rings */
.decal--onlytune {
  --decal-bg-size: 416px 608;
          background-image: url(overlay/onlytune.png);
  background-size: 150%;
    background-position:top center;

}

/* 🌀️ The Where-was-ie — concentric rings */
.decal--hearth {
  --decal-bg-size: 416px 608;
          background-image: url(overlay/hearth.png);
  background-size: 150%;
      background-position:top center;
}

/* 🌀️ The Where-was-ie — concentric rings */
.decal--landlord {
  --decal-bg-size: 416px 608;
          background-image: url(overlay/landlord.png);
  background-size: 150%;
}

/* 🚪 Empty room — subtle spiral */
.decal--spiral {
  --decal-bg-size: 416px 608;
            background-image: url(overlay/spiral.png);
  background-size: 150%;
}

/* 👈 Serial Poke-r — finger-themed overlay */
.decal--fingerpoke {
  --decal-bg-size: 416px 608;
  background-image: url(overlay/pokehand.png);
  background-size: 150%;
      background-position:top center;
}

/* 👈 Serial Poke-r — finger-themed overlay */
.decal--phone {
  --decal-bg-size: 416px 608;
  background-image: url(overlay/phone.png);
  background-size: 150%;
      background-position:top center;
}

.decal--hoarder {
  --decal-bg-size: 416px 608;
  background-image: url(overlay/giftpile1.png);
  background-size: 150%;
      background-position:top center;
}

.decal--hacker {
  --decal-bg-size: 416px 608;
  background-image: url(overlay/hacker.png);
  background-size: 120%;
      background-position:top center;
}

.decal--running {
  --decal-bg-size: 416px 608;
  background-image: url(overlay/running.png);
  background-size: 105%;
      background-position:top center;
}

.decal--trouble {
  --decal-bg-size: 416px 608;
  background-image: url(overlay/trouble.png);
  background-size: 105%;
      background-position:top center;
}

.decal--tempsec {
  --decal-bg-size: 416px 608;
  background-image: url(overlay/tempsec.png);
  background-size: 105%;
      background-position:top center;
}

.decal--minerva {
  --decal-bg-size: 416px 608;
  background-image: url(overlay/minerva.png);
  background-size: 105%;
      background-position:top center;
}

.decal--maris {
  --decal-bg-size: 416px 608;
  background-image: url(overlay/maris.png);
  background-size: 105%;
      background-position:top center;
}

.decal--selene {
  --decal-bg-size: 416px 608;
  background-image: url(overlay/selene.png);
  background-size: 105%;
      background-position:top center;
}

.decal--minervaignore {
  --decal-bg-size: 416px 608;
  background-image: url(overlay/minervaignore.png);
  background-size: 105%;
      background-position:top center;
}

.decal--foundingTrio {
  --decal-bg-size: 416px 608;
  background-image: url(overlay/trio.png);
  background-size: 105%;
      background-position:top center;
}

.decal-preview-label hr {
  border: none;
  border-top: 2px dashed #8B4A9C; /* Or whatever thickness you want */
  margin: 10px 0;
}


/* Debug helper: add .decal-debug to any apartment to outline while testing */
.apartment.has-decal.decal-debug { outline: 3px dashed #c03; }

.madlibs-form .madlibs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.madlibs-form .madlibs-field {
  display: flex; flex-direction: column; font-weight: 700; color: #2C3E50;
}
.madlibs-form .madlibs-field input {
  margin-top: 4px; padding: 8px; border: 2px inset #C0C0C0; background: #F8FAFF;
}
.madlibs-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px;
}

/* Row-collapsible apartments */
.apartment.is-row-collapsed { min-height: unset; padding-bottom: 10px; }
.apartment.is-row-collapsed .resident-avatar { margin-bottom: 6px; }
.apartment.is-row-collapsed .resident-name,
.apartment.is-row-collapsed .resident-status { margin-bottom: 6px; }
.apartment.is-row-collapsed .personality-traits,
.apartment.is-row-collapsed .relationship-display,
.apartment.is-row-collapsed .gift-section,
.apartment.is-row-collapsed .decoration-controls,
.apartment.is-row-collapsed .decorations-grid { display: none !important; }

.apartment.is-row-leader .row-utilbar {
  position: absolute; top: 6px; left: 6px; display: flex; gap: 6px; z-index: 5;
}
.mini-btn.row-toggle { font: inherit; line-height: 1; padding: 2px 6px; border: 2px outset #C0C0C0; margin-top:75px; background: #E8E8E8; cursor: pointer; }
.mini-btn.row-toggle:active { border: 2px inset #C0C0C0; }
.header .row-collapse-controls { margin-top: 10px; display: flex; gap: 8px; justify-content: center; }
.header .row-collapse-controls .btn { width: auto; padding: 12px 12px; }
.header .row-collapse-controls .btn {
  background: var(--color-btn-bg);
  color: var(--color-btn-text, #1d1d1f);
  box-shadow: var(--shadow-button, 2px 2px 0 var(--color-accent-2));
}
.header .row-collapse-controls .btn:hover { background: var(--color-btn-hover-bg); }

@media (prefers-reduced-motion: reduce) {
  body::before { transition: none; }
}


/* Apartment action buttons: 2-column grid with adaptive 3rd button span */
.decoration-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.decoration-controls .btn { width: 100%; }

/* Floor navigation bar */
.floor-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 12px 0 6px;
}
.floor-nav select {
  min-width: 140px;
  padding: 4px 6px;
}
/* When we have exactly 3 buttons, make the last span both columns */
.decoration-controls.btn-count-3 .btn:nth-child(3) {
  grid-column: 1 / -1;
}
/* When 4 buttons, 2x2 grid is default via two columns */
.decoration-controls.btn-count-4 .btn { grid-column: auto; }

/* =============================================================
   MOBILE UX ENHANCEMENTS (navigation, readability, tap targets)
   Target: phones & very small tablets. Keeps existing tablet
   rules (@max-width: 768px) and adds more opinionated tweaks
   for narrower widths. Non-destructive: only additive.
   ============================================================= */

/* Global touch polish */
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: contain; }
button, .btn, .tab-button { -webkit-tap-highlight-color: rgba(0,0,0,0.18); }

/* Narrow screens: tighten layout & improve scroll behavior */
@media (max-width: 600px) {
  .game-container { padding: 14px 12px 70px; /* leave room for sticky nav */ }
  .header { padding: 14px 14px 10px; }
  .header h1 { font-size: 2.3rem; }
  .time-display { font-size: 1rem; padding: 8px 14px; }

  /* Make apartments a vertical scroll list with clearer separation */
  .apartment-complex { gap: 14px; }
  .apartment { padding: 12px; box-shadow: 4px 4px 0 #606060; }
  .apartment:hover { box-shadow: 3px 3px 0 #606060; }
  .resident-avatar { width: 72px; height: 72px; }
  .resident-name { font-size: 1.1rem; }
  .resident-status, .relationship-display { font-size: 0.9rem; }

  /* Scrollable tab strip with snap */
  .tab-buttons {
    display: flex; /* override grid here */
    overflow-x: auto;
    gap: 6px;
    padding: 8px 6px 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .tab-buttons::-webkit-scrollbar { height: 6px; }
  .tab-buttons::-webkit-scrollbar-track { background: #c8c8c8; }
  .tab-buttons::-webkit-scrollbar-thumb { background: #9a9a9a; border-radius: 10px; }
  .tab-button {
    flex: 0 0 auto;
    min-width: 140px;
    scroll-snap-align: start;
    font-size: 0.85rem;
    padding: 10px 12px;
  }

  /* Sticky floor navigation at top for quicker paging */
  .floor-nav {
    position: sticky;
    top: 0;
    z-index: 950;
    background: rgba(240,230,140,0.92); /* tie into header palette */
    backdrop-filter: blur(4px);
    padding: 6px 8px;
    margin-top: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    border: 2px ridge #d4c778;
  }
  .floor-nav select { font-size: 0.9rem; padding: 4px 6px; }

  /* Action buttons: bigger tap targets */
  .btn, .option-btn, .q-actions .option-btn, .decoration-controls .btn {
    padding: 12px 10px;
    font-size: 0.9rem;
  }
  .mini-btn.row-toggle { padding: 4px 8px; }

  /* Prevent decoration grid overflow squish */
  .decorate-grid, #decorateGrid { transform: scale(.9); transform-origin: top left; }

  /* Notifications: full width on very small screens */
  .notifications { right: 8px; left: 8px; max-width: none; }
  .notification { font-size: 0.85rem; }

  /* Modal: edge-to-edge feel */
  .modal-content { width: 94%; max-width: 480px; padding: 18px 18px 22px; }

  /* Event feed readability */
  .event-item { font-size: 0.8rem; padding: 6px 10px; }
}

/* Ultra-small phones */
@media (max-width: 480px) {
  .header h1 { font-size: 2rem; }
  .apartment { padding: 10px; }
  .resident-avatar { width: 64px; height: 64px; }
  .tab-button { min-width: 120px; font-size: 0.8rem; }
  .btn, .option-btn { font-size: 0.8rem; }
  .time-display { font-size: 0.85rem; }
  .decorate-grid, #decorateGrid { transform: scale(.85); }
}

/* Landscape phones: tighten vertical spacing but keep horizontal flow */
@media (max-height: 520px) and (orientation: landscape) {
  .game-container { padding-top: 8px; }
  .header { margin-bottom: 10px; }
  .apartment { min-height: 170px; }
  .notifications { top: 8px; }
}

/* Optional: reduce heavy decorative blend effects if user prefers reduced motion or battery saving (heuristic) */
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .apartment.has-decal::before { opacity: 0.25; mix-blend-mode: multiply; }
  .apartment.has-problem { animation: none; }
}