@font-face {
    font-family: 'DM Mono';
    src: url('https://fonts.gstatic.com/s/dmmono/v14/aFTU7PB1QTsUX8KYthqQBK6PYK0.woff2');
    font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { font-family: 'DM Mono', monospace; background-color: #0b0b1a; color: white; overflow: hidden; }

/* HACK CONTRO IL TASTO PLAY NATIVO SU iOS/Android */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none !important; }
video { pointer-events: none !important; outline: none; }

/* ========== LANDING ========== */
#landing-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10000; background-color: #000;
    transition: opacity 1s ease-in-out, visibility 1s;
    display: flex; flex-direction: column;
}
.landing-video-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; background: #000 url('../assets/images/fallback.gif') center center / cover no-repeat;
}
#bgVideo {
    position: absolute; min-width: 100%; min-height: 100%; width: auto; height: auto;
    top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;
}
.landing-content {
    height: 100vh; display: flex; flex-direction: column;
    align-items: center; padding: 2rem; position: relative; z-index: 2;
}
.landing-logo-container {
    flex-grow: 1; display: flex; align-items: center; justify-content: center;
    width: 100%; position: relative; isolation: isolate;
}
.landing-logo-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    cursor: pointer; z-index: 10;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.landing-logo {
    max-width: 80%; max-height: 50vh; opacity: 0;
    animation: fadeIn 1s ease-in forwards, burnEffect 4s ease-in-out infinite 2s;
    filter: drop-shadow(0 0 0 transparent); mix-blend-mode: normal; transform-origin: center;
    -webkit-user-select: none; user-select: none;
}
@keyframes burnEffect {
    0%   { filter: drop-shadow(0 0 90px rgba(0,255,128,0.9)); transform: scale(1); mix-blend-mode: normal; }
    25%  { filter: drop-shadow(0 0 10px rgba(255,0,128,0.9)) drop-shadow(0 0 20px rgba(0,255,255,0.7)); transform: scale(1.03) rotate(0.5deg); mix-blend-mode: screen; opacity: 0.85; }
    50%  { filter: drop-shadow(0 0 15px rgba(128,0,255,0.8)) drop-shadow(0 0 25px rgba(255,255,0,0.6)); transform: scale(1.02) rotate(-0.5deg); mix-blend-mode: color-dodge; opacity: 0.95; }
    75%  { filter: drop-shadow(0 0 90px rgba(0,255,128,0.9)) drop-shadow(0 0 90px rgba(255,0,255,0.7)); transform: scale(1.03) rotate(0.25deg); mix-blend-mode: difference; opacity: 0.95; }
    100% { filter: drop-shadow(0 0 90px rgba(0,255,128,0.9)); transform: scale(1); mix-blend-mode: normal; opacity: 1; }
}
.landing-bottom-content {
    display: flex; flex-direction: column; align-items: center;
    margin-bottom: 2rem; width: 100%; gap: 2rem; margin-top: -2rem;
}
.landing-tagline {
    font-size: clamp(1rem, 4vw, 2rem); text-align: center; opacity: 0;
    animation: fadeIn 1s ease-in forwards 1s, blink 1s step-end infinite 3s;
    letter-spacing: 2px; padding: 0 1rem; line-height: 1.4;
}
.landing-links { display: flex; justify-content: center; gap: 2rem; font-size: clamp(0.8rem, 3vw, 1.2rem); width: 100%; }
.landing-links a { color: white; text-decoration: none; transition: opacity 0.3s ease; opacity: 0; animation: fadeIn 1s ease-in forwards; animation-delay: 1.5s; cursor: pointer; }
.landing-links a:hover { opacity: 0.7; }

.landing-language-switcher { 
    position: absolute; top: 20px; right: 20px; z-index: 20; 
    opacity: 0; animation: fadeIn 1s ease-in forwards 2s; 
    display: flex; align-items: center; gap: 8px;
    font-family: 'DM Mono', monospace; font-size: 1rem;
}
.main-lang-btn { 
    background: transparent; border: none; color: white; 
    padding: 0; cursor: pointer; opacity: 0.4; 
    transition: opacity 0.3s ease, color 0.3s ease, text-shadow 0.3s ease; 
}
.main-lang-btn:hover { opacity: 0.8; }
.main-lang-btn.active { 
    opacity: 1; 
    color: #d65d0e;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(214,93,14,0.4);
}
.lang-separator { color: white; opacity: 0.3; font-size: 0.9rem; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

/* ========== MOBILE ADJUSTMENTS ========== */
@media (max-width: 768px) {
    .landing-content { padding: 1rem; }
    .landing-logo-container { flex-grow: 0.5; padding-top: 6rem; }
    .landing-logo { max-height: 35vh; }
    .landing-tagline { font-size: clamp(0.9rem, 5vw, 1.4rem); letter-spacing: 1px; padding: 0 3.5rem; margin-top: 2.5rem; }
    .spaceship-img { height: 100px !important; }
}

/* ========== INTRO LAYER ========== */
#intro-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999; background: #000;
    transition: opacity 1.5s ease-out, visibility 1.5s;
    display: none; align-items: center; justify-content: center;
}
.video-bg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%; width: auto; height: auto;
    object-fit: cover; z-index: -2; opacity: 0.6;
}
.logo-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.logo { max-width: 80%; max-height: 40vh; opacity: 0; will-change: transform, filter, opacity; z-index: 1; position: relative; }
.anim-logo { animation: logoFadeInImage 2s ease-out forwards, continuousPsycho 3s infinite alternate; }
.logo-stick { position: absolute; top: 50%; left: 50%; width: 10px; background-color: white; border-radius: 0 0 10px 10px; height: 50vh; transform: translateX(-50%); z-index: 0; opacity: 0; }
.anim-stick { animation: logoFadeInStick 2s ease-out forwards; }
@keyframes logoFadeInImage { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }
@keyframes logoFadeInStick { 0% { opacity: 0; transform: translateX(-50%) scaleY(0); transform-origin: top; } 100% { opacity: 1; transform: translateX(-50%) scaleY(1); transform-origin: top; } }
@keyframes continuousPsycho { 0% { filter: hue-rotate(0deg) brightness(100%) blur(0px); transform: scale(1); } 50% { filter: hue-rotate(180deg) brightness(130%) blur(2px); transform: scale(1.02); } 100% { filter: hue-rotate(360deg) brightness(100%) blur(0px); transform: scale(1); } }
.fade-out { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* ========== MAIN LAYER ========== */
#main-layer { position: relative; width: 100%; min-height: 100vh; opacity: 0; transition: opacity 2s ease-in; display: none; justify-content: center; align-items: center; }
.house-container {
    position: relative; width: 100%; max-width: 800px; margin: 0 auto; height: max-content;
    overflow: hidden;
}
.house-img { display: block; width: 100%; height: auto; pointer-events: none; transition: opacity 0.3s; }
.house-svg-map { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 20; }
.house-svg-map polygon { pointer-events: all; cursor: pointer; fill: transparent; }

/* ========== HAWK LAYER ========== */
#hawk-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 25; overflow: hidden; }
.hawk-sprite {
    position: absolute; height: 180px; width: 50px; top: 8%; left: 100%;
    animation: hawkFlyAcross 15s linear 1 forwards; animation-delay: 2s;
}
.hawk-sprite.hawk-repeat { animation-delay: 0s; }
.hawk-sprite .hawk-flap {
    position: absolute; inset: 0;
    background-image: url('../assets/images/HawkFlySprite.png'); background-size: 600% 100%;
    background-repeat: no-repeat; image-rendering: pixelated;
    animation: hawkFlap 500ms steps(1) infinite;
}
.hawk-sprite.hawk-pause-flap .hawk-flap { animation-play-state: paused; }
.hawk-sprite { pointer-events: auto; cursor: pointer; }
.hawk-tooltip { position: absolute; background-color: #eaddcf; border: 2px solid #bda88e; padding: 6px 14px; border-radius: 8px; font-family: 'DM Mono', monospace; font-size: 0.85rem; font-weight: bold; pointer-events: none; opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 10000; transform: translate(-50%, -10px) scale(0.9); box-shadow: 0 4px 10px rgba(0,0,0,0.5); text-align: center; text-transform: uppercase; color: #d65d0e; }
.hawk-tooltip.active { opacity: 1; pointer-events: auto; transform: translate(-50%, -35px) scale(1); }

@keyframes hawkFlyAcross {
    0%      { left: 100%; transform: translateY(-90px) scaleX(1); }
    20%     { left: 75%; transform: translateY(-12px) scaleX(1); }
    43.33%  { left: 60%; transform: translateY(4px) scaleX(1); }
    56.67%  { left: 60%; transform: translateY(4px) scaleX(1); }
    80%     { left: 25%; transform: translateY(-90px) scaleX(1); }
    100%    { left: -8%; transform: translateY(-180px) scaleX(1); }
}
@keyframes hawkFlap {
    0%, 16%   { background-position: 0% 0; }
    17%, 33%  { background-position: 20% 0; }
    34%, 50%  { background-position: 40% 0; }
    51%, 66%  { background-position: 60% 0; }
    67%, 83%  { background-position: 80% 0; }
    84%, 100% { background-position: 100% 0; }
}

/* ========== ASTRONAVE LAYER ========== */
.spaceship-link { position: absolute; top: 45%; left: 0; width: 100%; height: 100px; pointer-events: none; z-index: 10000; }
.spaceship-img { position: absolute; height: 180px; width: auto; cursor: pointer; pointer-events: auto; left: 100%; animation: spaceshipFly 34s linear infinite; }
@keyframes spaceshipFly { 0% { left: 100%; } 100% { left: -40%; } }

/* ========== GATTINI, PERSONAGGI & ARREDI ========== */
#kittens-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; transition: opacity 0.4s ease; }
body.lights-off #kittens-layer { opacity: 0; pointer-events: none; }

.kitten-unit { position: absolute; width: 32px; height: 32px; background-image: url('../assets/images/CatRecolors1.png'); background-size: 1200% 800%; image-rendering: pixelated; transform: translate(-50%, -100%); transition: left 4s linear, top 4s linear, opacity 0.6s ease; opacity: 1; pointer-events: auto; cursor: pointer; }
.kitten-unit { background-position: calc(var(--col, 0) * 100% / 11) calc(var(--row, 0) * 100% / 7); }
.kitten-unit:not(.idle) { --col: calc(var(--base-col, 0) + var(--global-sprite-frame, 1)); }
.kitten-unit.idle { --col: calc(var(--base-col, 0) + 1); }
.kitten-unit.teleporting { opacity: 0; transition: left 0s, top 0s, opacity 0.6s ease; pointer-events: none; }

/* Personaggi Statici (Gif) */
#marla-char, #dodi-char, #milko-char, #hamaka-char, #corasan-char, #febo-char, #marlo-char, #fish-char, #anthonio-char {
    position: absolute; width: auto; transform: translate(-50%, -100%); cursor: pointer; pointer-events: auto; transition: transform 0.2s;
}
#marla-char { height: 13%; }
#dodi-char { height: 10%; }
#milko-char { height: 10%; }
#hamaka-char { height: 12%; }
#corasan-char { height: 8%; }
#febo-char { height: 14%; }
#marlo-char { height: 7%; }
#fish-char { height: 8%; }
#anthonio-char { height: 21%; }

#marla-char:hover, #dodi-char:hover, #milko-char:hover, #hamaka-char:hover, #corasan-char:hover, #febo-char:hover, #marlo-char:hover, #fish-char:hover, #anthonio-char:hover {
    transform: translate(-50%, -100%) scale(1.05);
}

/* ========== PERSONAGGIO ANIMA ========== */
#anima-char {
    position: absolute;
    height: 18%; 
    transform: translate(-50%, -100%);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.4s ease-out, opacity 0.2s;
    z-index: 50;
}
#anima-char:hover {
    transform: translate(-50%, -100%) scale(1.1) !important;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.8));
}
.anima-reflect {
    transform: translate(-50%, -100%) scaleX(-1) !important;
}
.anima-glitch {
    animation: animaGlitchAnim 0.4s cubic-bezier(.25, .46, .45, .94) both infinite;
}
@keyframes animaGlitchAnim {
    0% { transform: translate(-50%, -100%) skew(0deg); opacity: 1; filter: drop-shadow(0 0 0 rgba(0,255,255,0)); }
    20% { transform: translate(-52%, -100%) skew(-10deg); opacity: 0.7; filter: drop-shadow(-3px 0 0 rgba(255,0,255,0.9)); }
    40% { transform: translate(-48%, -100%) skew(10deg); opacity: 0.9; filter: drop-shadow(3px 0 0 rgba(0,255,255,0.9)); }
    60% { transform: translate(-50%, -102%) skew(0deg); opacity: 0.7; }
    80% { transform: translate(-50%, -98%) skew(0deg); opacity: 0.9; }
    100% { transform: translate(-50%, -100%) skew(0deg); opacity: 1; filter: drop-shadow(0 0 0 rgba(0,255,255,0)); }
}

.arredo-unit { position: absolute; width: auto; transform: translate(-50%, -100%); pointer-events: none; }

.kitten-tooltip { position: absolute; background-color: #eaddcf; border: 2px solid #bda88e; padding: 6px 14px; border-radius: 8px; font-family: 'DM Mono', monospace; font-size: 0.85rem; font-weight: bold; pointer-events: none; opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 99999; transform: translate(-50%, -10px) scale(0.9); box-shadow: 0 4px 10px rgba(0,0,0,0.5); text-align: center; }
.kitten-tooltip.active { opacity: 1; pointer-events: auto; transform: translate(-50%, -35px) scale(1); }
.kitten-tooltip a { color: #d65d0e; text-decoration: none; display: block; text-transform: uppercase; }
.kitten-tooltip a:hover { text-shadow: 0 0 5px rgba(214,93,14,0.4); }

#light-flash-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; opacity: 0; pointer-events: none; z-index: 8000; transition: opacity 0.1s; }
.flash-active { opacity: 0.8 !important; }

/* ========== TOOLBAR E MENU A TENDINA ========== */
.toolbar { position: fixed; top: 20px; right: 20px; z-index: 9000; display: flex; gap: 15px; opacity: 0; transition: opacity 2s ease-in; pointer-events: none; align-items: center; }
.toolbar.active { pointer-events: auto; opacity: 1; }
.tool-btn { width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; opacity: 0.6; transition: opacity 0.3s, transform 0.3s; animation: gentlePulse 3s infinite ease-in-out; display: flex; align-items: center; justify-content: center; }
.tool-btn svg { width: 100%; height: 100%; fill: white; filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); }
.tool-btn:hover { opacity: 1; transform: scale(1.1); }

.dropdown-wrapper { position: relative; display: flex; }
.rooms-dropdown {
    position: absolute; top: 50px; right: 0;
    background-color: #eaddcf; border: 2px solid #bda88e; border-radius: 12px;
    padding: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    transform: translateY(-10px); z-index: 10000; min-width: 160px;
}
.rooms-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); }
.room-dropdown-item {
    color: #3e3228; font-family: 'DM Mono', monospace; font-weight: bold; font-size: 0.85rem;
    padding: 0.6rem 1rem; cursor: pointer; text-transform: uppercase; text-align: center;
    border-radius: 6px; transition: background-color 0.2s, color 0.2s;
    text-decoration: none; display: block;
}
.room-dropdown-item:hover { color: #d65d0e; background-color: rgba(62,50,40,0.1); }

@keyframes gentlePulse { 0% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 0.5; } }
@keyframes attentionPulse { 0% { transform: scale(1); opacity: 0.7; filter: drop-shadow(0 0 8px rgba(255,230,100,0.6)); } 50% { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 25px rgba(255,230,100,1)); } 100% { transform: scale(1); opacity: 0.7; filter: drop-shadow(0 0 8px rgba(255,230,100,0.6)); } }
.needs-light { animation: attentionPulse 0.8s infinite ease-in-out !important; opacity: 1 !important; }
.needs-light svg { fill: #ffeba1; }

/* ========== TUTORIAL LAYER ========== */
#tutorial-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(11, 11, 26, 0.95); z-index: 10005;
    display: none; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.5s ease;
}
#tutorial-overlay.active { display: flex; opacity: 1; }
.tutorial-content {
    position: relative; width: 90%; max-width: 800px;
    display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
#tutorial-video {
    width: 100%; max-height: 60vh; border-radius: 12px;
    border: 2px solid #bda88e; box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    background: #000; object-fit: contain;
}
#close-tutorial {
    position: absolute; top: -15px; right: -15px;
    width: 45px; height: 45px; border-radius: 50%;
    background: #d65d0e; color: white; border: 2px solid #eaddcf;
    font-size: 1.2rem; cursor: pointer; font-family: 'DM Mono', monospace;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); z-index: 10;
    transition: transform 0.2s, background 0.2s;
}
#close-tutorial:hover { transform: scale(1.1); background: #b0490b; }
.tutorial-text {
    font-size: clamp(0.9rem, 4vw, 1.4rem); text-align: center;
    color: #eaddcf; text-transform: uppercase; font-weight: bold;
    min-height: 4.5rem; text-shadow: 0 2px 5px rgba(0,0,0,0.8);
    transition: opacity 0.3s ease; padding: 0 1rem; line-height: 1.4;
}

/* ========== MODALS ========== */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 10000; display: none; opacity: 0; transition: opacity 0.3s ease; }
.modal-overlay.active { display: block; opacity: 1; }
.menu-box { background-color: #eaddcf; color: #3e3228; border: 2px solid #bda88e; padding: 1.5rem 2rem; width: fit-content; min-width: 200px; max-width: 300px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 0 20px rgba(160,140,100,0.2); text-align: center; position: absolute; top: 50%; transform: translateY(-50%) scale(0.9); transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); }
.modal-overlay.active .menu-box { transform: translateY(-50%) scale(1); }
.menu-pos-right { left: calc(50% + 250px); right: auto; }
.menu-pos-left { right: calc(50% + 250px); left: auto; }
.menu-box.vision-box { max-width: 600px; width: 80%; min-height: 50vh; text-align: left; display: flex; flex-direction: column; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0.9); position: absolute; }
.modal-overlay.active .menu-box.vision-box { transform: translate(-50%,-50%) scale(1); }
.room-title { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 1rem; border-bottom: 2px solid rgba(62,50,40,0.3); padding-bottom: 0.5rem; font-weight: 900; }
.room-title a { color: #3e3228; text-decoration: none; transition: color 0.2s ease, text-shadow 0.2s ease; display: inline-block; }
.room-title a:hover { color: #d65d0e; text-shadow: 0 0 8px rgba(214,93,14,0.3); }
.artist-list { list-style: none; font-size: 1.1rem; font-weight: bold; padding: 0; }
.artist-list li { margin: 0.6rem 0; cursor: pointer; transition: color 0.2s, transform 0.2s; }
.artist-list li:hover { color: #d65d0e; transform: scale(1.05); }
.artist-list li a { color: inherit; text-decoration: none; display: block; }
#typewriter { white-space: pre-wrap; text-transform: uppercase; font-size: 0.9rem; line-height: 1.6; flex-grow: 1; color: #3e3228; }
.lang-switch { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 1rem; }
.lang-btn { background: transparent; border: 1px solid #3e3228; color: #3e3228; font-family: 'DM Mono', monospace; padding: 2px 8px; font-size: 0.7rem; cursor: pointer; opacity: 0.5; border-radius: 5px; transition: opacity 0.2s; }
.lang-btn.active { opacity: 1; background: #3e3228; color: #eaddcf; }

@media (max-width: 768px) {
    .logo { max-width: 55%; max-height: 35vh; margin: 0 auto; }
    .logo-stick { width: 8px; }
    #roomMenuBox { position: fixed; top: auto; left: auto; right: auto; transform: scale(0.9); margin: 0; }
    .menu-pos-right, .menu-pos-left { left: auto; right: auto; }
    .modal-overlay.active { display: flex; justify-content: center; align-items: center; }
    #roomModal.active { display: block; }
    .menu-box.vision-box { transform: scale(0.9); position: relative; top: auto; left: auto; }
    .modal-overlay.active .menu-box.vision-box { transform: scale(1); }
    .toolbar { top: 10px; right: 10px; gap: 10px; }
}