:root {
    --cream: #f5ead8;
    --warm-white: #fdf6ec;
    --orange: #d4703a;
    --burnt: #b85c2a;
    --brown: #6b3d1e;
    --dark-brown: #2e1a0e;
    --tan: #c9a87c;
    --light-tan: #e8d5b7;
    --wood: #865d3e;
    --maroon: #4b0d0d;
    --shadow: rgba(46, 26, 14, 0.35);
    --glow: rgba(92, 48, 25, 0.25);
  }

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

  body {
    background: var(--dark-brown);
    font-family: 'Lora', serif;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    cursor: default;
    user-select: none;
  }

  /* ── SCENE WRAPPER ── */
  #scene {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* ══════════════════════════════
     DOOR SCREEN
  ══════════════════════════════ */

#door-screen {
  position: absolute;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  transition: opacity 0.8s ease;
}

#door-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* ── SKY ── */
.ext-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
    #020508 0%,
    #060c14 30%,
    #0e1520 60%,
    #151510 80%,
    #1a1208 100%
  );
}

/* ── STARS ── */
.ext-stars {
  position: absolute;
  inset: 0 0 40% 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 5%  8%,  rgba(255,245,200,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 18%, rgba(255,245,200,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 5%,  rgba(255,245,200,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 22%, rgba(255,245,200,.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 32% 10%, rgba(255,240,180,1) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 6%,  rgba(255,245,200,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 19%, rgba(255,245,200,.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 4%, rgba(255,240,180,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 66% 24%, rgba(255,245,200,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 12%, rgba(255,245,200,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 20%, rgba(255,245,200,.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 86% 7%, rgba(255,240,180,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 16%, rgba(255,245,200,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 14%, rgba(255,245,200,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 30%, rgba(255,245,200,.3) 0%, transparent 100%);
}

/* ── MOON ── */
.ext-moon {
  position: absolute;
  top: 2%; right: 10%;
  width: 128px; height: 128px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 38% 38%, #faf49c, #fef596 40%, #d4c860 70%, #a89040);
  box-shadow:
    0 0 30px 12px rgba(240,220,120,.2),
    0 0 70px 28px rgba(200,180,80,.1);
  overflow: hidden;
}

/* ── SIDING (house wall, covers middle band) ── */
.ext-siding {
  position: absolute;
  top: 12%; bottom: 18%;
  left: 0; right: 0;
  z-index: 3;
  background-color: #3a2a1e;
  background-image:
    repeating-linear-gradient(
      180deg,
      transparent 0px, transparent 16px,
      rgba(0,0,0,0.28) 16px, rgba(0,0,0,0.28) 18px,
      rgba(255,255,255,0.02) 18px, rgba(255,255,255,0.02) 20px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 80px,
      rgba(0,0,0,0.06) 80px, rgba(0,0,0,0.06) 82px
    );
  /* Roofline at top */
  border-top: 20px solid #2a1c0e;
  box-shadow:
    inset 0 -60px 100px rgba(180,100,30,0.12),
    0 -4px 0 #5a3a18;
}

/* ── GROUND ── */
.ext-ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 20%;
  z-index: 4;
  background: linear-gradient(180deg,
    #0c1605 0%,
    #111e06 30%,
    #0a1204 100%
  );
  /* Grass texture suggestion */
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 6px,
      rgba(0, 0, 0, 0.08) 6px, rgba(0,0,0,0.08) 7px
    ),
    linear-gradient(180deg, #1c330c 0%, #101f04 100%);
}

/* ── WINDOWS ── */
.ext-window {
  position: absolute;
  top: 40%;
  width: clamp(90px, 11vw, 140px);
  z-index: 5;
}

.ext-window.left  { left: 420px; }
.ext-window.right { right: 420px; }

.ext-win-frame {
  width: 100%;
  aspect-ratio: 3/4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  padding: 6px;
  background: #1e1006;
  border: 5px solid #6a4020;
  box-shadow:
    0 0 0 2px #1a0c04,
    4px 4px 16px rgba(0,0,0,.8),
    inset 0 0 10px rgba(0,0,0,.5);
}

.ext-win-pane {
  background: linear-gradient(135deg,
    rgba(200,160,50,.4) 0%,
    rgba(230,190,80,.5) 50%,
    rgba(180,130,40,.35) 100%
  );
  box-shadow: inset 0 0 8px rgba(220,180,60,.2);
}

/* Curtain hint on left/right panes */
.ext-win-pane:nth-child(1) {
  background: linear-gradient(160deg,
    rgba(120,60,20,.6) 0%,
    rgba(180,120,40,.3) 100%
  );
}
.ext-win-pane:nth-child(2) {
  background: linear-gradient(200deg,
    rgba(120,60,20,.6) 0%,
    rgba(180,120,40,.3) 100%
  );
}

.ext-win-sill {
  width: calc(100% + 14px);
  height: 9px;
  background: linear-gradient(180deg, #8a5a28, #4a2e10);
  margin-left: -7px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,.6);
}

/* Light spilling out of window onto siding */
.ext-win-glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 150%;
  background: radial-gradient(
    ellipse at 50% 30%,
    rgba(220,170,50,.14) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: -1;
}

/* ── DOOR WRAP — centered over siding ── */
.ext-door-wrap {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
}


  .door-screen-bg { display: none; } /* no longer needed */
  
  #door-screen.fade-out {
    opacity: 0;
    pointer-events: none;
  }

  .door-frame {
    position: relative;
    width: 320px;
    height: 480px;
    transform-style: flat;
  }


.door-screen-bg {
  position: absolute;
  inset: -1800px -1280px;
  /* House siding — horizontal lap boards */
  background-color: #4a3525;
  background-image:
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 18px,
      rgba(0,0,0,0.2) 18px,
      rgba(0,0,0,0.2) 20px,
      rgba(255,255,255,0.03) 20px,
      rgba(255,255,255,0.03) 22px
    ),
    /* Vertical shadow every so often for depth */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 78px,
      rgba(0,0,0,0.08) 78px,
      rgba(0,0,0,0.08) 80px
    );
}

  /* Warm light above door */
  .door-light {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    z-index: 5;
    background: radial-gradient(circle, rgba(241, 185, 64, 0.9) 0%, rgba(235, 148, 61, 0.5) 40%, transparent 80%);
    border-radius: 50%;
    animation: flicker 3s ease-in-out infinite;
    cursor: pointer;
    pointer-events: none;
  }

  @keyframes flicker {
    0%,100% { opacity: 1; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.85; transform: translateX(-50%) scale(1.05); }
    75% { opacity: 0.95; transform: translateX(-50%) scale(0.97); }
  }
  .image-door{
    object-fit: contain;
    height: 100%;
    width: 100%;
  }
  .door-light-off {
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .door-backing {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 0;
}
  .door-outer {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(160deg, #743705 0%, #3d210a 100%);
    border-radius: 4px 4px 0 0;
    border: 6px solid #493324;
    box-shadow:
      inset 2px 2px 8px rgba(255,180,80,0.1),
      inset -2px -2px 8px rgba(0,0,0,0.5),
      0 0 40px rgba(0,0,0,0.8),
      4px 0 20px rgba(0,0,0,0.6);
  }

  /* Door panels */
  .door-panel {
    position: absolute;
    background: linear-gradient(135deg, #66443ead 0%, #b65903e1 50%, #fa8a2ffb 100%);
    border: 2px solid #000000;
    border-radius: 4px;
    box-shadow: inset 1px 1px 4px rgba(255,150,50,0.08), inset -1px -1px 4px rgba(0,0,0,0.4);
  }
  .panel-top    { top: 48px; left: 18px; right: 18px; height: 120px; }
  .panel-middle { top: 188px; left: 18px; right: 18px; height: 100px; }
  .panel-bottom { top: 308px; left: 18px; right: 18px; height: 100px; }

  /* Doorknob */
  #doorknob {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: radial-gradient(circle at 35% 35%, #b89652, #b8812f 50%, #be7624 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow:
      0 2px 6px rgba(0,0,0,0.6),
      0 0 12px rgba(255,180,50,0.3),
      inset -2px -2px 4px rgba(0,0,0,0.4),
      inset 2px 2px 4px rgba(255,220,100,0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 10;
  }

  #doorknob:hover {
    box-shadow:
      0 2px 6px rgba(0,0,0,0.6),
      0 0 22px rgba(255,180,50,0.6),
      inset -2px -2px 4px rgba(0,0,0,0.4),
      inset 2px 2px 4px rgba(255,220,100,0.4);
    transform: translateY(-50%) scale(1.1);
  }

  #doorknob:active { transform: translateY(-50%) rotate(25deg) scale(1.05); }

  .door-step {
    position: absolute;
    bottom: -16px;
    left: -20px;
    right: -20px;
    height: 16px;
    background: linear-gradient(180deg, #5f3c27 0%, #66351d 100%);
    border-radius: 0 0 4px 4px;
    z-index: 0;
  }

  .welcome-text {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: var(--cream);
    font-size: 32px;
    opacity: 0.7;
    animation: pulse-text 2s ease-in-out infinite;
  }

  @keyframes pulse-text {
    0%,100% { opacity: 0.7; }
    50% { opacity: 1; }
  }

  /* door swing */
  .door-swing {
    transform-origin: left center;
    animation: swingOpen 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  @keyframes swingOpen {
    0%   { transform: perspective(800px) rotateY(0deg); }
    100% { transform: perspective(800px) rotateY(-85deg); }
  }

  /* ══════════════════════════════
     ROOM SCREEN
  ══════════════════════════════ */
  #room-screen {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease 0.6s;
    overflow: hidden;
  }

  #room-screen.visible {
    opacity: 1;
    pointer-events: all;
  }

  /* Room perspective */
  .room {
    position: relative;
    width: 100%;
    height: 100%;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(255,160,60,0.18) 0%, transparent 60%),
      linear-gradient(180deg, #5b4435 0%, #c47d4e 30%, #b5712a 60%, #8b5220 100%);
  }

  /* Ceiling */
  .ceiling {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 18%;
    background: linear-gradient(180deg, #6a593f 0%, #b6996c 100%);
    border-bottom: 3px solid #b8906a;
  }

  /* Crown molding */
  .crown-molding {
    position: absolute;
    top: 14%;
    left: 0; right: 0;
    height: 14px;
    background: linear-gradient(180deg, #e0c090 0%, #c8a070 50%, #b08050 100%);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    z-index: 2;
  }

  /* Floor */
  .floor {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 22%;
    background:
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 79px,
        rgba(0,0,0,0.08) 79px,
        rgba(0,0,0,0.08) 80px
      ),
      linear-gradient(90deg, #1e1814 0%, #241806 100%);
    border-top: 4px solid #b4783c26;
  }

  /* Wall */
  .wall {
    position: absolute;
    top: 14%; bottom: 22%;
    left: 0; right: 0;
    background:
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 39px,
        #34255026 39px,
        #00000026 40px
      ),
      linear-gradient(180deg, #76098c 0%, #eaac1c 100%);
  }

  /* Wainscoting */
  .wainscoting {
    position: absolute;
    bottom: 22%;
    left: 0; right: 0;
    height: 80px;
    background: linear-gradient(180deg, #3b2d1e 0%, #503a22 100%);
    border-top: 4px solid #b88244;
    border-bottom: 4px solid #59381a;
  }

  /* Ceiling lamp */
  .ceiling-lamp {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
  }

  .lamp-cord {
    width: 3px;
    height: 120px;
    background: #56371a;
    margin: 0 auto;
  }

  .lamp-shade {
    width: 80px;
    height: 50px;
    background: radial-gradient(ellipse at 50% 30%, hsl(41, 97%, 54%) 0%, #d48d00 60%, #392d1c 100%);
    clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
    box-shadow: 0 4px 30px rgba(255,180,50,0.5);
  }

  .lamp-glow {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(235, 173, 41, 0.15) 0%, transparent 70%);
    pointer-events: none;
  }

  /* ══ FURNITURE ══ */

  /* Bookshelf */
  .bookshelf {
    position: absolute;
    left: 3%;
    bottom: 22%;
    width: 220px;
    height: 280px;
    background: linear-gradient(180deg, #3d2a1d 0%, #542e12 100%);
    border: 3px solid #fbcf3d;
    box-shadow: 4px 0 12px rgba(0,0,0,0.4), inset -2px 0 8px rgba(0,0,0,0.3);
    z-index: 3;
    cursor: pointer;
    transition: filter 0.2s;
  }

  .bookshelf:hover { filter: brightness(1.1); }
  .bookshelf:hover .hover-hint { opacity: 1; }

  .shelf-row {
    position: absolute;
    left: 0; right: 0;
    height: 4px;
    background: #79461a;
  }
  .shelf-row:nth-child(1) { top: 60px; }
  .shelf-row:nth-child(2) { top: 120px; }
  .shelf-row:nth-child(3) { top: 180px; }

  /* Books */
  .book {
    position: absolute;
    bottom: 0;
    width: 16px;
    border-radius: 1px 0 0 1px;
  }

  /* Sofa */
  .sofa {
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    z-index: 3;
  }

  .sofa-back {
    width: 280px;
    height: 100px;
    background: linear-gradient(120deg, #353232 0%, #353232 100%);
    border-radius: 8px 8px 0 0;
    border: 3px solid #fbcf3d;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.3), inset 0 4px 8px rgba(255,180,100,0.1);
  }

  .sofa-arm {
    position: absolute;
    bottom: 0;
    width: 25px;
    height: 100px;
    background: linear-gradient(160deg, #353232 0%, #353232 100%);
    border: 3px solid #fbcf3d;
    border-radius: 4px;
  }
  .sofa-arm.left  { left: -15px; }
  .sofa-arm.right { right: -15px; }

  .sofa-seat {
    width: 280px;
    height: 65px;
    background: linear-gradient(160deg, #353232 0%, #353232 100%);
    border: 3px solid #fbcf3d;
    border-top: none;
    border-radius: 0 0 6px 6px;
  }

  /* Cushions */
  .cushion {
    position: absolute;
    top: 10px;
    width: 75px;
    height: 60px;
    background: linear-gradient(135deg, #353232 0%, #353232 100%);
    border-radius: 6px;
    border: 2px solid #fbcf3d;
    box-shadow: inset 0 2px 6px rgba(255,200,150,0.2);
  }
  .cushion:nth-child(1) { left: 18px; }
  .cushion:nth-child(2) { left: 103px; }
  .cushion:nth-child(3) { right: 18px; }

  /* Coffee table */
  .coffee-table {
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    z-index: 4;
    cursor: pointer;
    transition: filter 0.2s;
  }

  .coffee-table:hover { filter: brightness(1.12); }
  .coffee-table:hover .hover-hint { opacity: 1; }

  .table-top {
    width: 220px;
    height: 18px;
    background: linear-gradient(180deg, #4a2c10 0%, #624428 100%);
    border-radius: 3px;
    border: 2px solid #4b2e0e;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  }

  .table-legs {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
  }

  .table-leg {
    width: 10px;
    height: 50px;
    background: linear-gradient(180deg, #4a2c10 0%, #624428 100%);
    border-radius: 0 0 2px 2px;
  }

  /* Record player */
  .record-player {
    position: absolute;
    right: 25%;
    bottom: 19%;
    width: 120px;
    height: 100px;
    z-index: 3;
    cursor: pointer;
    transition: filter 0.2s;
  }

  .record-player:hover { filter: brightness(1.12); }
  .record-player:hover .hover-hint { opacity: 1; }

  .player-body {
    width: 120px;
    height: 80px;
    background: linear-gradient(160deg, #4a2c10 0%, #2e1a08 100%);
    border: 3px solid #6b3d1e;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
  }

  .vinyl {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 50px;
    height: 50px;
    background:
      radial-gradient(circle at 50% 50%, #888 0%, #555 20%, #222 40%, #111 100%);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  }

  .vinyl.spinning {
    animation: spin 3s linear infinite;
  }

  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  .vinyl-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    background: radial-gradient(circle, #d4703a 0%, #a04820 100%);
    border-radius: 50%;
  }

  .player-arm {
    position: absolute;
    top: 12px;
    right: 15px;
    width: 40px;
    height: 4px;
    background: #c0a060;
    border-radius: 2px;
    transform-origin: right center;
    transform: rotate(-20deg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }

  /* Plant */
  .plant {
    position: absolute;
    left: 25%;
    bottom: 22%;
    z-index: 3;
  }

  .pot {
    width: 40px;
    height: 35px;
    background: linear-gradient(160deg, #90432c 0%, #7b2f19 100%);
    clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
    border-top: 3px solid #d07848;
  }

  .plant-stem {
    position: absolute;
    bottom: 30px;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
  }

  .leaf {
    position: absolute;
    background: linear-gradient(135deg, #4a8040 0%, #2e5820 100%);
    border-radius: 50% 0 50% 0;
    box-shadow: inset 1px 1px 3px rgba(150,255,100,0.1);
  }

  /* Window */
  .window {
    position: absolute;
    top: 40%;
    right: 30%;
    width: 130px;
    height: 160px;
    z-index: 2;
    cursor: pointer;
    transition: filter 0.2s;
  }
  .window:hover { filter: brightness(1.1); }
  .window:hover .hover-hint { opacity: 1; }

  .window-frame {
    position: absolute;
    inset: 0;
    border: 8px solid #6b3d1e;
    background:
      linear-gradient(135deg,
        rgba(255,220,150,0.4) 0%,
        rgba(255,180,80,0.6) 50%,
        rgba(200,140,60,0.4) 100%
      );
    box-shadow: inset 0 0 20px rgba(255,200,80,0.3), 0 0 15px rgba(0,0,0,0.4);
  }

  .window-cross-h {
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 6px;
    background: #6b3d1e;
    transform: translateY(-50%);
  }

  .window-cross-v {
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 6px;
    background: #6b3d1e;
    transform: translateX(-50%);
  }

  /* Curtains */
  .curtain {
    position: absolute;
    top: 40%;
    width: 2.5%;
    height: 180px;
    z-index: 2;
  }
  .curtain.left  { right: 34%; }
  .curtain.right { right: 30%; }

  .curtain-fabric {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #97701a 0%, #785a18 40%, #5c3f02 100%);
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
    box-shadow: inset 3px 0 8px rgba(0,0,0,0.2);
  }

  /* Rug */
  .rug {
    position: absolute;
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    height: 80px;
    background:
      radial-gradient(ellipse at 50% 50%, #3f4101 0%, #040a0b 50%, #2a2d04 100%);
    border-radius: 8px;
    border: 4px solid #fbcf3d;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }

  .rug-pattern {
    position: absolute;
    inset: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
  }

  /* Picture frame */
  .picture-frame {
    position: absolute;
    top: 40%;
    left: 25%;
    width: 100px;
    height: 80px;
    z-index: 2;
    cursor: pointer;
    transition: filter 0.2s;
  }
  .picture-frame:hover { filter: brightness(1.1); }
  .picture-frame:hover .hover-hint { opacity: 1; }

  .frame-border {
    position: absolute;
    inset: 0;
    border: 8px solid #6b3d1e;
    background: linear-gradient(135deg, #e8c89a 0%, #d4a870 100%);
    box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 0 8px rgba(0,0,0,0.1);
  }

  /* Hover hint */
  .hover-hint {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(46,26,14,0.9);
    color: var(--tan);
    font-family: 'Lora', serif;
    font-size: 12px;
    font-style: italic;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid var(--wood);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 20;
  }

  /* ══════════════════════════════
     MODAL OVERLAY
  ══════════════════════════════ */
  #modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 10, 4, 0.75);
    backdrop-filter: blur(3px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  #modal-overlay.open {
    opacity: 1;
    pointer-events: all;
  }

  .modal-card {
    background: linear-gradient(160deg, #282222 0%, #282222 100%);
    border: 3px solid #fbcf3d;
    border-radius: 12px;
    padding: 36px 40px;
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow:
      0 20px 60px rgba(0,0,0,0.5),
      inset 0 1px 0 rgba(255,220,150,0.5);
    animation: modal-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  @keyframes modal-pop {
    from { transform: scale(0.85) translateY(20px); opacity: 0; }
    to   { transform: scale(1) translateY(0);       opacity: 1; }
  }

  .modal-close {
    position: absolute;
    top: 14px; right: 18px;
    background: none;
    border: none;
    font-size: 22px;
    color: #fbcf3d;
    cursor: pointer;
    font-family: serif;
    transition: color 0.2s, transform 0.2s;
  }
  .modal-close:hover { color: #d4703a; transform: scale(1.2) rotate(10deg); }

  .modal-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: var(--cream);
    margin-bottom: 18px;
    border-bottom: 2px solid rgba(160,100,40,0.3);
    padding-bottom: 10px;
  }

  .modal-body {
    color: #fbcf3d;
    font-size: 15px;
    line-height: 1.8;
  }

  .modal-body p { margin-bottom: 12px; }

  .social-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
  }

  .social-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(160,90,30,0.1);
    border: 1px solid #fbcf3d;
    border-radius: 8px;
    color: #fbcf3d;
    text-decoration: none;
    font-family: 'Lora', serif;
    font-size: 14px;
    transition: background 0.2s, transform 0.15s;
    cursor: pointer;
  }

  .social-link:hover {
    background: rgba(160,90,30,0.2);
    transform: translateX(4px);
  }

  .social-icon {
    font-size: 20px;
    width: 28px;
    text-align: center;
  }

  /* Project cards */
  .project-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
  }

  .project-card {
    background: #592004;
    border: 1px solid #fbcf3d91;
    border-radius: 8px;
    padding: 14px;
    transition: background 0.2s;
    display: block;
    color: inherit;
  }

  .project-card:hover { background: rgba(160,90,30,0.2); }

  .project-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: bold;
    color: #ffc400;
    margin-bottom: 6px;
  }

  .project-card p {
    font-size: 11px;
    color: #fbcf3d;
    margin: 0;
    line-height: 1.5;
  }

  .project-tag {
    display: inline-block;
    font-size: 10px;
    padding: 2px 7px;
    background: #6f6134;
    color: #000000;
    border-radius: 10px;
    margin-top: 6px;
  }
  .music-player {
    background: linear-gradient(160deg, #2e1a08 0%, #1a0c04 100%);
    border-radius: 10px;
    padding: 20px;
    color: var(--cream);
    margin-top: 10px;
  }

  /* Mini game */
  .game-area {
    background: linear-gradient(160deg, #1a0c04 0%, #0e0804 100%);
    border-radius: 8px;
    padding: 16px;
    margin-top: 8px;
    text-align: center;
    color: var(--cream);
  }

  #snake-canvas {
    border: 2px solid #fbcf3d;
    border-radius: 4px;
    background: #1a0c04;
  }

  .game-score {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: #fbcf3d;
    margin-bottom: 10px;
  }

  .game-info {
    font-size: 12px;
    color: #fbcf3d;
    margin-top: 10px;
    font-style: italic;
  }

  .game-btn {
    margin-top: 10px;
    padding: 8px 20px;
    background: #fbcf3d;
    border: none;
    border-radius: 20px;
    color: rgb(0, 0, 0);
    font-family: 'Lora', serif;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .game-btn:hover { background: var(--burnt); }

  /* About section */
  .about-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #fbcf3d 0%, #fbcf3d 60%, #b49634 100%);
    margin: 0 auto 16px;
    border: 3px solid var(--maroon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
  }

  .skill-bar {
    margin-bottom: 10px;
  }

  .skill-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #fbcf3d;
    margin-bottom: 4px;
  }

  .skill-track {
    height: 8px;
    background: rgba(223, 222, 221, 0.15);
    border-radius: 4px;
    overflow: hidden;
  }

  .skill-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbcf3d, #f7be05);
    border-radius: 4px;
    transition: width 1s cubic-bezier(0.4,0,0.2,1);
  }

  /* ══ NAV DOTS ══ */
  #nav-dots {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    gap: 8px;
    z-index: 50;
    background: rgba(46,26,14,0.6);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(160,100,40,0.3);
  }

  #nav-dots.visible { display: flex; }

  .nav-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(200,160,80,0.4);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    border: none;
    padding: 0;
  }

  .nav-dot.active {
    background: #fbcf3d;
    transform: scale(1.3);
  }

  /* Scrollbar */
  .modal-card::-webkit-scrollbar { width: 6px; }
  .modal-card::-webkit-scrollbar-track { background: transparent; }
  .modal-card::-webkit-scrollbar-thumb { background: rgba(160,90,30,0.4); border-radius: 3px; }

  /* TV */
.tv {
  position: absolute;
  right: 61.75%;
  bottom: 22%;
  width: clamp(90px, 11vw, 150px);
  z-index: 3;
  cursor: pointer;
  transition: filter 0.2s;
}

.tv:hover { filter: brightness(1.1); }
.tv:hover .hover-hint { opacity: 1; }

.tv-body {
  width: 100%;
  background: linear-gradient(160deg, #2a2a2a 0%, #1a1a1a 100%);
  border: 3px solid #111;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 8px;
}

.tv-screen {
  width: 100%;
  aspect-ratio: 16/9;
  background: #0a0a0a;
  border: 2px solid #000;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

/* Idle static effect */
.tv-static {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 80px;
  opacity: 0.4;
  animation: static-flicker 0.12s steps(1) infinite;
}

@keyframes static-flicker {
  0%   { background-position: 0px 0px; }
  25%  { background-position: -10px 5px; }
  50%  { background-position: 5px -8px; }
  75%  { background-position: -5px 10px; }
  100% { background-position: 8px -3px; }
}

.tv-stand-neck {
  width: 25%;
  height: 12px;
  background: linear-gradient(180deg, #222, #111);
  margin: 0 auto;
}

.tv-stand-base {
  width: 55%;
  height: 8px;
  background: linear-gradient(180deg, #222, #111);
  border-radius: 0 0 4px 4px;
  margin: 0 auto;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
#volume-tab {
  position: fixed;
  right: 0;
  bottom: 80px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0;
}

#volume-toggle {
  width: 36px;
  height: 36px;
  background: rgba(46, 26, 14, 0.85);
  border: 1px solid rgba(160, 100, 40, 0.4);
  border-right: none;
  border-radius: 6px 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s;
}

#volume-toggle:hover { background: rgba(80, 40, 10, 0.95); }

#volume-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(46, 26, 14, 0.92);
  border: 1px solid rgba(160, 100, 40, 0.4);
  border-radius: 6px 0 0 6px;
  padding: 0 12px;
  height: 36px;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
  padding-left: 0;
  padding-right: 0;
}

#volume-panel.open {
  max-width: 180px;
  opacity: 1;
  padding: 0 12px;
}

#volume-panel label {
  font-family: 'Lora', serif;
  font-size: 11px;
  font-style: italic;
  color: rgba(200, 160, 80, 0.8);
  white-space: nowrap;
}

#volume-slider {
  -webkit-appearance: none;
  width: 90px;
  height: 3px;
  background: rgba(160, 100, 40, 0.3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c8882a;
  cursor: pointer;
  transition: background 0.15s;
}

#volume-slider::-webkit-slider-thumb:hover { background: #e0a840; }