/* House of Nerds — casa di tutti noi */
:root {
    --dani: #1f8bff;       /* blu elettrico */
    --dani-glow: rgb(31 139 255 / .55);
    --ome: #9b3cff;        /* viola EVA-01 */
    --ome-glow: rgb(155 60 255 / .55);
    --both: linear-gradient(100deg, #06b6ff, #424dff 50%, #b625ff);
    --lamp: #ffc477;       /* luce calda di casa */
    --night: #090812;
    --wall: #15121f;
    --wall-2: #1c1829;
    --wood: #2a2130;
    --text: #f1ecf8;
    --dim: #aaa2bf;
    --paper: #fff6d8;
  }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--text); font: 17px/1.6 Rubik, system-ui, sans-serif; overflow-x: hidden; }
/* biglietto scritto a mano */
.note {
    font-family: Kalam, cursive; color: #2b2233; background: var(--paper);
    padding: 12px 16px 10px; line-height: 1.35; font-size: 1.05rem;
    box-shadow: 0 10px 24px rgb(0 0 0 / .45); position: relative; max-width: 300px;
  }
.note .sig { display: block; text-align: right; font-weight: 700; margin-top: 4px; }
.note--dani .sig { color: var(--dani); }
.note--ome .sig { color: var(--ome); }
/* ========== NAV ========== */
/* ========== L'ARRIVO: sei davanti alla porta, qualcuno ti apre ========== */
.arrival {
    position: relative; min-height: 100vh; overflow: hidden; isolation: isolate;
    display: grid; align-items: center;
    background: radial-gradient(120% 70% at 50% 0%, #17142b, var(--night) 70%);
  }
/* stelle */
.arrival::before {
    content: ""; position: absolute; inset: 0 0 40% 0; z-index: -3; opacity: .7;
    background-image:
      radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, #cfd8ff, transparent),
      radial-gradient(1.5px 1.5px at 44% 12%, #fff, transparent), radial-gradient(1px 1px at 63% 30%, #e3d2ff, transparent),
      radial-gradient(1.5px 1.5px at 78% 16%, #fff, transparent), radial-gradient(1px 1px at 88% 44%, #cfd8ff, transparent),
      radial-gradient(1px 1px at 6% 52%, #fff, transparent), radial-gradient(1px 1px at 94% 8%, #fff, transparent);
    animation: twinkle 5s ease-in-out infinite alternate;
  }
@keyframes twinkle { to { opacity: .35; } }
/* --- la facciata ---
   La scena cresce con lo schermo: la facciata prende tutta l'altezza (meno lo spazio per "Bussa")
   e ogni misura interna è in u = 1/840 della sua altezza, così porta, lampade e zerbino restano in proporzione. */
.arrival {
    --fh: calc(100svh - 120px);
    --fw: min(96vw, calc(var(--fh) * .9286));
    /* su schermi stretti (telefono) la casa diventa alta e stretta: le misure seguono anche la larghezza */
    --u: min(calc(var(--fh) / 840), calc(var(--fw) / 430));
  }
.facade {
    position: absolute; left: 50%; top: calc(100svh - var(--fh)); z-index: 1;
    width: var(--fw); height: var(--fh);
    transform: translateX(-50%); transform-origin: 50% 74%;
    transition: transform 1.7s cubic-bezier(.7, 0, .25, 1), opacity 1.3s ease .35s;
  }
.facade__wall {
    position: absolute; inset: 0; border-radius: 22px 22px 0 0;
    background:
      repeating-linear-gradient(0deg, transparent 0 27px, rgb(0 0 0 / .22) 27px 29px),
      repeating-linear-gradient(90deg, transparent 0 58px, rgb(0 0 0 / .14) 58px 60px),
      linear-gradient(#221c33, #191427);
    box-shadow: inset 0 0 120px rgb(0 0 0 / .6);
  }
.sign { position: absolute; top: 6%; left: 50%; width: 58%; transform: translateX(-50%); animation: neon 6s infinite; }
.sign img { width: 100%; filter: drop-shadow(0 0 16px rgb(66 77 255 / .9)) drop-shadow(0 0 40px rgb(182 37 255 / .5)); }
@keyframes neon { 0%, 92%, 96%, 100% { opacity: 1; } 94% { opacity: .55; } }
.lamp { position: absolute; top: 44%; width: calc(16 * var(--u)); height: calc(26 * var(--u)); border-radius: 4px 4px 8px 8px; }
.lamp::after { content: ""; position: absolute; left: 50%; top: 60%; width: calc(240 * var(--u)); height: calc(240 * var(--u)); transform: translate(-50%, -30%); border-radius: 50%; pointer-events: none; }
.lamp--l { left: calc(50% - 170 * var(--u)); background: var(--dani); box-shadow: 0 0 18px var(--dani); }
.lamp--l::after { background: radial-gradient(closest-side, rgb(31 139 255 / .28), transparent); }
.lamp--r { right: calc(50% - 170 * var(--u)); background: var(--ome); box-shadow: 0 0 18px var(--ome); }
.lamp--r::after { background: radial-gradient(closest-side, rgb(155 60 255 / .28), transparent); }
/* --- vano porta: dietro c'è la casa illuminata --- */
.doorway {
    position: absolute; left: 50%; bottom: 9%; width: calc(190 * var(--u)); height: calc(330 * var(--u)); transform: translateX(-50%);
    border: calc(12 * var(--u)) solid #120e1c; border-bottom: 0; border-radius: calc(95 * var(--u)) calc(95 * var(--u)) 0 0;
    perspective: 900px;
    background:
      radial-gradient(80% 60% at 50% 30%, #ffe2ab, #ffb25e 45%, #c4602e 100%);
  }
.doorway::before { /* sagome di casa dentro: si intravede qualcuno */
    content: ""; position: absolute; inset: auto 0 0 0; height: 58%;
    background:
      radial-gradient(14px 16px at 30% 28%, rgb(60 30 30 / .55), transparent 70%),
      radial-gradient(24px 46px at 30% 62%, rgb(60 30 30 / .5), transparent 70%),
      radial-gradient(13px 15px at 70% 34%, rgb(60 30 30 / .45), transparent 70%),
      radial-gradient(22px 42px at 70% 66%, rgb(60 30 30 / .42), transparent 70%);
  }
.fdoor {
    position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 0 50%; border-radius: calc(83 * var(--u)) calc(83 * var(--u)) 0 0;
    background: linear-gradient(160deg, #4b3a8a, #2c2258 70%);
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / .05);
    transition: transform 1.3s cubic-bezier(.55, 0, .2, 1);
    cursor: pointer; border: 0; padding: 0;
  }
.fdoor::before { /* pannelli */
    content: ""; position: absolute; inset: 28% 16% 8%;
    border: 2px solid rgb(255 255 255 / .07); border-radius: 6px;
    box-shadow: inset 0 0 0 14px transparent, inset 0 -110px 0 -96px rgb(255 255 255 / .05);
  }
.fdoor__plate {
    position: absolute; top: 13%; left: 50%; transform: translateX(-50%);
    font: 700 max(.7rem, calc(13 * var(--u))) "JetBrains Mono", monospace; letter-spacing: .1em; color: #ffd59a;
    padding: 3px 9px; border: 1px solid rgb(255 213 154 / .5); border-radius: 4px;
  }
.fdoor__knob { position: absolute; right: 14%; top: 56%; width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; background: #ffcc7a; box-shadow: 0 0 10px #ffb54d; }
.fdoor:hover:not([disabled]) { filter: brightness(1.15); }
/* luce che filtra sotto la porta */
.leak { position: absolute; left: 50%; bottom: 9%; width: calc(166 * var(--u)); height: 3px; transform: translateX(-50%); background: #ffcf8a; box-shadow: 0 0 14px 4px rgb(255 190 110 / .7); }
/* fascio di luce sul pavimento quando si apre */
.spill {
    position: absolute; left: 50%; bottom: 0; width: calc(520 * var(--u)); height: 9%; transform: translateX(-50%);
    clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
    background: linear-gradient(rgb(255 196 120 / .7), rgb(255 160 80 / .05));
    opacity: 0; transition: opacity 1s ease .3s;
  }
.mat {
    position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%);
    width: calc(210 * var(--u)); padding: calc(7 * var(--u)) 0; text-align: center; border-radius: 4px;
    background: repeating-linear-gradient(90deg, #4a3a2c 0 3px, #3d2f24 3px 6px);
    font: 800 max(.65rem, calc(13 * var(--u))) Rubik, sans-serif; letter-spacing: .3em; color: #d9b98a;
  }
.ground { position: absolute; inset: auto 0 0; height: 9%; background: #0e0b16; z-index: -1; }
/* bussare */
.knock {
    position: absolute; left: 50%; top: max(16px, calc(100svh - var(--fh) - 104px)); transform: translateX(-50%); z-index: 4;
    display: grid; justify-items: center; gap: 10px; text-align: center; transition: opacity .4s;
  }
.knock p { margin: 0; font: 700 1.25rem Kalam, cursive; color: var(--paper); }
.knock button {
    font: 700 1rem Rubik, sans-serif; color: #2b2233; background: var(--paper); border: 0; cursor: pointer;
    padding: 10px 20px; border-radius: 999px; box-shadow: 0 8px 24px rgb(0 0 0 / .45);
    animation: nudge 2.4s ease-in-out infinite;
  }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-6deg); } 85% { transform: rotate(6deg); } }
.toc {
    position: absolute; left: calc(50% + 110 * var(--u)); top: calc(100svh - 300 * var(--u)); z-index: 4;
    font: 700 max(1.1rem, calc(26 * var(--u))) Kalam, cursive; color: var(--paper); opacity: 0; pointer-events: none;
  }
.is-knocking .toc { animation: toc 1s ease-out; }
.is-knocking .fdoor { animation: thud .5s ease-in-out 2; }
@keyframes toc { 0% { opacity: 0; transform: translateY(8px); } 25%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes thud { 25% { transform: translateX(2px); } 75% { transform: translateX(-2px); } }
/* --- stati: closed → open → inside --- */
.arrival[data-state="open"] .fdoor, .arrival[data-state="inside"] .fdoor { transform: rotateY(-105deg); }
.arrival[data-state="open"] .spill, .arrival[data-state="inside"] .spill { opacity: 1; }
.arrival:not([data-state="closed"]) .knock { opacity: 0; pointer-events: none; }
.arrival[data-state="inside"] .facade { transform: translateX(-50%) scale(7); opacity: 0; }
/* l'interno: la luce calda riempie lo schermo */
.inside-light {
    position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.2s ease .5s;
    background:
      radial-gradient(60% 50% at 50% 0%, rgb(255 180 100 / .32), transparent 70%),
      radial-gradient(45% 60% at 0% 60%, rgb(31 139 255 / .22), transparent 70%),
      radial-gradient(45% 60% at 100% 60%, rgb(155 60 255 / .22), transparent 70%),
      #120e18;
  }
.arrival[data-state="inside"] .inside-light { opacity: 1; }
/* --- il benvenuto --- */
.welcome {
    position: relative; z-index: 2; padding: 110px 0 70px;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center;
    opacity: 0; visibility: hidden; transform: translateY(20px);
    transition: opacity .9s ease 1.2s, transform .9s ease 1.2s, visibility 0s 1.2s;
  }
.arrival[data-state="inside"] .welcome { opacity: 1; visibility: visible; transform: none; }
.welcome__logo { width: min(400px, 72vw); margin: 0 0 22px -6px; filter: drop-shadow(0 0 18px rgb(66 77 255 / .75)) drop-shadow(0 0 50px rgb(182 37 255 / .4)); }
.welcome .kicker { font: 600 .82rem "JetBrains Mono", monospace; color: var(--lamp); margin: 0 0 14px; }
.welcome h1 { margin-bottom: 18px; }
.welcome .lead { margin-bottom: 28px; }
.welcome .lead strong { color: var(--text); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-main { display: inline-flex; gap: 10px; align-items: center; padding: 15px 26px; border-radius: 999px; background: #5865f2; color: #fff; font-weight: 800; font-size: 1.08rem; text-decoration: none; box-shadow: 0 10px 34px rgb(88 101 242 / .55); transition: transform .2s; }
.btn-main:hover { transform: translateY(-2px); }
.btn-soft { color: var(--dim); text-decoration: none; font-weight: 600; padding: 14px 10px; }
.btn-soft:hover { color: var(--text); }
.replay { position: absolute; z-index: 3; bottom: 18px; left: 50%; transform: translateX(-50%); background: none; border: 0; color: #6f6887; font: .78rem "JetBrains Mono", monospace; cursor: pointer; opacity: 0; transition: opacity .5s 2s; }
.arrival[data-state="inside"] .replay { opacity: 1; }
/* chat del canale #ingresso */
.chat { background: rgb(22 18 32 / .85); border: 1px solid #2d2640; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgb(0 0 0 / .45); }
.chat__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #2d2640; font: 600 .85rem "JetBrains Mono", monospace; color: var(--dim); }
.chat__head b { color: var(--text); }
.chat__head .live { display: inline-flex; gap: 7px; align-items: center; font-size: .75rem; }
.chat__head .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.chat ol { list-style: none; margin: 0; padding: 14px 16px 18px; display: grid; gap: 12px; min-height: 330px; align-content: start; }
.msg { display: grid; grid-template-columns: 36px 1fr; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.msg.show { opacity: 1; transform: none; }
.msg .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; color: #fff; }
.av--b { background: #1f6fd6; }
.av--v { background: #7a2fd6; }
.av--w { background: #b8742c; }
.msg .who { font-weight: 700; font-size: .9rem; }
.msg .who small { font: .7rem "JetBrains Mono", monospace; color: #6f6887; margin-left: 6px; font-weight: 400; }
.msg p { margin: 1px 0 0; color: #d6d0e4; font-size: .95rem; line-height: 1.45; }
.msg--sys { grid-template-columns: 1fr; }
.msg--sys p { font: .8rem "JetBrains Mono", monospace; color: #7fe0a6; }
.typing { display: none; gap: 4px; padding: 0 16px 14px 62px; }
.typing.on { display: flex; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #6f6887; animation: dots 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 50% { transform: translateY(-4px); opacity: .5; } }
@media (max-width: 900px) {
.welcome { grid-template-columns: 1fr; padding-top: 96px; }
.chat ol { min-height: 0; }
}
@media (max-width: 520px) {
.sign { width: 62%; }
}
/* nav visibile solo una volta dentro */
body:has(.arrival[data-state="closed"]) .nav, body:has(.arrival[data-state="open"]) .nav { opacity: 0; pointer-events: none; transition-delay: 0s; }
/* ========== LA CASA IN SEZIONE ========== */
.house-section { padding: 60px 0 120px; }
.house-head { text-align: center; margin-bottom: 40px; }
.house-head h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 0 0 8px; font-weight: 800; }
.house-head p { color: var(--dim); margin: 0; }
.legend { display: flex; justify-content: center; gap: 20px; margin-top: 16px; font: .8rem "JetBrains Mono", monospace; color: var(--dim); flex-wrap: wrap; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 0; }
.legend .l-d::before { background: var(--dani); box-shadow: 0 0 10px var(--dani); }
.legend .l-o::before { background: var(--ome); box-shadow: 0 0 10px var(--ome); }
.legend .l-b::before { background: var(--both); }
.house { max-width: 1040px; margin-inline: auto; position: relative; }
.roof {
    height: 150px; margin: 0 -30px; position: relative;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(#241d33, #1a1526);
    display: grid; place-items: end center; padding-bottom: 18px;
  }
.roof img { width: 150px; filter: drop-shadow(0 0 18px rgb(66 77 255 / .7)); }
.floors { border: 10px solid var(--wood); border-top: 0; background: var(--wood); display: grid; gap: 10px; }
.floor { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.floor--ground { grid-template-columns: 1.15fr 1fr .62fr; }
.floor--top { grid-template-columns: 1.1fr .8fr 1.1fr; }
.room--family { --c: #ffb054; --glow: rgb(255 176 84 / .45); }
.toys { display: flex; gap: 6px; margin: 22px auto auto; }
.toys span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; font-weight: 900; font-size: 1.2rem; color: #fff; box-shadow: inset 0 -5px 0 rgb(0 0 0 / .25); }
.toys span:nth-child(1) { background: #1f8bff; transform: rotate(-6deg); }
.toys span:nth-child(2) { background: #ffb054; transform: translateY(-14px) rotate(4deg); }
.toys span:nth-child(3) { background: #9b3cff; transform: rotate(3deg); }
.family-line { margin: -10px 0 26px; font-size: .95rem; color: var(--dim); }
.family-line a { color: #ffc477; font-weight: 700; }
.floor-label { font: .7rem "JetBrains Mono", monospace; color: #7b7093; padding: 2px 4px 0; grid-column: 1 / -1; margin-bottom: -6px; }
.room {
    --c: var(--lamp); --glow: rgb(255 196 119 / .35);
    position: relative; min-height: 250px; padding: 18px; overflow: hidden; isolation: isolate;
    background: var(--wall); text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end;
    transition: background .4s;
  }
.room--dani { --c: var(--dani); --glow: var(--dani-glow); }
.room--ome { --c: var(--ome); --glow: var(--ome-glow); }
.room--both { --c: #6a5cff; --glow: rgb(100 90 255 / .45); }
/* lampadario + cono di luce: si accende al passaggio */
.room::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(70% 80% at 50% 0%, var(--glow), transparent 70%);
    opacity: .45; transition: opacity .4s;
  }
.room::after {
    content: ""; position: absolute; top: 0; left: 50%; width: 46px; height: 7px; transform: translateX(-50%);
    border-radius: 0 0 20px 20px; background: var(--c); box-shadow: 0 0 22px 4px var(--c);
  }
.room:hover::before, .room:focus-visible::before { opacity: 1; }
.room:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; }
.room__sign { display: inline-flex; align-self: flex-start; gap: 8px; align-items: center; font: 600 .72rem "JetBrains Mono", monospace; color: var(--c); filter: brightness(1.35); text-transform: uppercase; letter-spacing: .08em; }
.room h3 { margin: 4px 0 2px; font-size: 1.5rem; font-weight: 800; }
.room p { margin: 0; color: var(--dim); font-size: .92rem; max-width: 32ch; }
.room__go { position: absolute; top: 14px; right: 16px; font-size: 1.3rem; color: var(--dim); transition: transform .3s, color .3s; }
.room:hover .room__go { transform: translateX(4px); color: var(--text); }
/* arredi delle singole stanze */
.frames { display: flex; gap: 10px; margin-bottom: auto; padding-top: 18px; }
.frames img { width: 30%; aspect-ratio: 4/3; object-fit: cover; border: 5px solid #e9e1d0; box-shadow: 0 8px 18px rgb(0 0 0 / .5); }
.frames img:nth-child(1) { transform: rotate(-4deg); }
.frames img:nth-child(2) { transform: rotate(2deg) translateY(6px); }
.frames img:nth-child(3) { transform: rotate(-1deg); }
.table-seats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: auto; padding-top: 20px; }
.table-seats span {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 800; font-size: .78rem; background: var(--wall-2); border: 2px solid #3a3150;
  }
.table-seats .s-d { border-color: var(--dani); color: #8cc6ff; }
.table-seats .s-o { border-color: var(--ome); color: #cfa6ff; }
.table-seats .s-more { color: var(--dim); font-weight: 500; }
/* la TV del divano: un'app di streaming di casa */
.tv {
  position: relative; margin: 18px auto auto; width: 84%; aspect-ratio: 16 / 9; overflow: hidden;
  border: 6px solid #07060b; border-radius: 8px; background: #050409;
  box-shadow: 0 0 0 2px #1d1b26, 0 0 50px var(--dani-glow);
}
.stream { position: absolute; inset: 0; }
.stream__hero { position: absolute; inset: 0 0 34% 0; }
.stream__hero svg { width: 100%; height: 100%; display: block; transition: opacity .6s; }
.stream__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(5 4 9 / .92) 0, rgb(5 4 9 / .55) 45%, transparent 75%), linear-gradient(transparent 55%, #050409); }
.stream.switch .stream__hero svg { opacity: .2; }
.stream__info { position: absolute; left: 7%; top: 9%; display: grid; gap: 3px; justify-items: start; max-width: 58%; z-index: 1; }
.stream__brand { font: 900 .62rem Rubik, sans-serif; letter-spacing: .06em; color: #fff; }
.stream__brand b { color: #b46bff; margin-left: 1px; }
.stream__info strong { font: 900 clamp(.8rem, 1.6vw, 1.15rem)/1.05 Rubik, sans-serif; color: #fff; text-shadow: 0 2px 8px rgb(0 0 0 / .8); }
.stream__btns { display: flex; gap: 4px; margin-top: 3px; }
.stream__btns i { font: 700 .52rem Rubik, sans-serif; font-style: normal; padding: 3px 7px; border-radius: 3px; background: #fff; color: #111; }
.stream__btns i + i { background: rgb(255 255 255 / .22); color: #fff; }
.stream__row { position: absolute; left: 5%; right: 5%; bottom: 7%; z-index: 1; }
.stream__row small { display: block; font: 700 .5rem Rubik, sans-serif; color: rgb(255 255 255 / .8); margin-bottom: 3px; }
.stream__row div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.stream__thumb { position: relative; aspect-ratio: 16 / 10; border-radius: 3px; overflow: hidden; outline: 1px solid rgb(255 255 255 / .08); transition: transform .3s, outline-color .3s; }
.stream__thumb svg { width: 100%; height: 100%; display: block; }
.stream__thumb i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(255 255 255 / .25); }
.stream__thumb i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); background: #b46bff; }
.stream__thumb.on { outline: 2px solid #fff; transform: scale(1.06); z-index: 1; }
.tv::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 2px, rgb(0 0 0 / .25) 2px 4px); }
.couch { width: 70%; height: 26px; margin: 10px auto 0; border-radius: 14px 14px 4px 4px; background: #283a63; box-shadow: inset 0 6px 0 #34497a; }
.screen-shot { position: absolute; inset: 0; z-index: -2; }
.screen-shot img { width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: saturate(.8); transition: opacity .4s; }
.room:hover .screen-shot img { opacity: .5; }
.terminal { font: .75rem/1.55 "JetBrains Mono", monospace; color: #c9a3ff; margin-bottom: auto; padding-top: 18px; }
.terminal .off { color: #ff8a8a; }
.terminal .soon { color: #7cffb0; }
.terminal .cur { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tools { display: flex; gap: 10px; margin-bottom: auto; padding-top: 22px; flex-wrap: wrap; }
.tools span { font: .7rem "JetBrains Mono", monospace; padding: 5px 9px; border-radius: 6px; background: rgb(255 255 255 / .05); border: 1px solid #3a3150; color: var(--dim); }
.room--door { background: #1e1830; align-items: center; text-align: center; justify-content: center; }
.door {
    width: 64%; aspect-ratio: 1/1.7; margin: 10px auto 12px; border-radius: 50% 50% 4px 4px / 22% 22% 4px 4px;
    background: linear-gradient(#5865f2, #3c45b8); position: relative; box-shadow: 0 0 40px rgb(88 101 242 / .55);
  }
.door::after { content: ""; position: absolute; right: 16%; top: 54%; width: 9px; height: 9px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 8px var(--lamp); }
.room--door p { margin-inline: auto; }
.basement .room { background: #110f19; }
.floor.basement { grid-template-columns: 1fr 1fr .72fr; }
.room--lab { --c: #ffc477; --glow: rgb(255 196 119 / .4); }
.lab-bits { display: flex; gap: 8px; margin: 22px 0 auto; }
.lab-bits span { width: 26px; height: 26px; border-radius: 6px; background: #7a2ee0; box-shadow: inset 0 -4px 0 rgb(0 0 0 / .3); }
.lab-bits span:nth-child(2) { background: #c79a52; border-radius: 50%; }
.lab-bits span:nth-child(3) { background: #ffb547; transform: rotate(12deg); }
.house .note { position: absolute; z-index: 3; }
.house .note--dani { left: -50px; top: -46px; transform: rotate(-5deg); max-width: 200px; }
.house .note--ome { right: -50px; top: -46px; transform: rotate(4deg); max-width: 210px; }
@media (max-width: 1180px) {
.house .note { display: none; }
}
@media (max-width: 760px) {
.roof { height: 90px; margin: 0 -14px; }
.roof img { width: 100px; }
.floors { border-width: 6px; }
.floor, .floor--ground, .floor--top, .floor.basement { grid-template-columns: 1fr; }
.room { min-height: 210px; }
}
/* ========== ULTIME FOTO APPESE ========== */
.wall { padding: 40px 0 120px; }
.wall h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 6px; font-weight: 800; }
.wall > .wrap > p { color: var(--dim); margin: 0 0 36px; }
.string { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 30px; }
.string::before { content: ""; position: absolute; top: 12px; left: -2%; right: -2%; height: 30px; border-top: 2px solid #5a4d6e; border-radius: 50%; }
.pol { background: #f3ecdf; padding: 9px 9px 36px; position: relative; box-shadow: 0 16px 30px rgb(0 0 0 / .5); transition: transform .3s; }
.pol::before { content: ""; position: absolute; top: -18px; left: 50%; width: 12px; height: 26px; transform: translateX(-50%); background: #b98c5a; border-radius: 3px; }
.pol img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.pol span { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font: 700 .95rem Kalam, cursive; color: #3b3150; }
.pol:nth-child(1) { transform: rotate(-3deg); }
.pol:nth-child(2) { transform: rotate(2deg) translateY(10px); }
.pol:nth-child(3) { transform: rotate(-1deg) translateY(14px); }
.pol:nth-child(4) { transform: rotate(3deg) translateY(4px); }
.pol:hover { transform: rotate(0) scale(1.04); z-index: 2; }
@media (max-width: 760px) {
.string { grid-template-columns: 1fr 1fr; }
}

/* sull'ingresso la barra galleggia sopra la scena della porta */
.stanza-ingresso .nav { position: fixed; left: 0; right: 0; transition: opacity .8s ease 1.4s; }

/* i siti di casa, subito sotto la casa in sezione */
.home-sites { padding: 10px 0 90px; text-align: center; }
.home-sites h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 6px; font-weight: 800; }
.home-sites > p { color: var(--dim); margin: 0 0 26px; }
.home-sites .sites { text-align: left; }