/* Il divano · anime e cinema */
:root {
    --dani: #1f8bff; --ome: #9b3cff;
    --both: linear-gradient(100deg, #06b6ff, #424dff 50%, #b625ff);
    --lamp: #ffc477; --room: #0c0a12; --wall: #17131f;
    --text: #f1ecf8; --dim: #aaa2bf; --paper: #fff6d8;
    --tv: #1f8bff; /* cambia con l'anime in onda */
  }
body { margin: 0; color: var(--text); font: 17px/1.6 Rubik, system-ui, sans-serif; overflow-x: hidden; background: var(--room); }
.note { font-family: Kalam, cursive; color: #2b2233; background: var(--paper); padding: 12px 16px 10px; line-height: 1.35; font-size: 1.08rem; box-shadow: 0 10px 24px rgb(0 0 0 / .45); position: relative; }
.note .sig { display: block; text-align: right; font-weight: 700; margin-top: 4px; color: #6a5cff; }
/* ========== LA STANZA ========== */
.room { position: relative; padding: 50px 0 40px; overflow: hidden; isolation: isolate; }
/* la luce della TV che invade la stanza */
.room::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: background 1s ease;
    background: radial-gradient(55% 60% at 50% 34%, color-mix(in srgb, var(--tv) 32%, transparent), transparent 75%); }
.head { text-align: center; margin-bottom: 30px; }
.kicker { font: 600 .82rem "JetBrains Mono", monospace; color: #8cc6ff; margin: 0 0 10px; }
h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); line-height: 1.02; margin: 0 0 12px; font-weight: 900; letter-spacing: -.02em; }
h1 em { font-style: normal; color: var(--dani); text-shadow: 0 0 30px rgb(31 139 255 / .6); }
.head p { color: var(--dim); max-width: 36em; margin: 0 auto; }
.tv-wall { display: grid; grid-template-columns: 1fr minmax(0, 560px) 1fr; gap: 26px; align-items: center; }
.tv {
    position: relative; aspect-ratio: 16/9; border-radius: 14px; border: 14px solid #08070c; outline: 2px solid #26212f;
    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tv) 40%, #0a0a14), #05050a 80%);
    box-shadow: 0 0 80px color-mix(in srgb, var(--tv) 55%, transparent), 0 30px 60px rgb(0 0 0 / .6);
    display: grid; place-items: center; text-align: center; overflow: hidden; transition: background 1s, box-shadow 1s;
  }
.tv::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgb(0 0 0 / .22) 2px 4px); }
.tv__live { position: absolute; top: 12px; left: 14px; font: 600 .72rem "JetBrains Mono", monospace; color: #fff; display: flex; gap: 6px; align-items: center; }
.tv__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; animation: rec 1.4s infinite; }
@keyframes rec { 50% { opacity: .2; } }
.tv__screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px 20px 54px; }
.tv__screen svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.player { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: linear-gradient(transparent, rgb(0 0 0 / .75)); font: .72rem "JetBrains Mono", monospace; color: rgb(255 255 255 / .85); }
.player__play { font-size: .9rem; }
.player__bar { flex: 1; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .25); overflow: hidden; }
.player__bar i { display: block; height: 100%; width: 0; background: var(--tv); box-shadow: 0 0 8px var(--tv); animation: progress 24s linear infinite; }
@keyframes progress { to { width: 100%; } }
.player__where b { color: #fff; }
@media (max-width: 560px) {
.player__where { font-size: .62rem; }
}
.tv__title { font: 900 clamp(1.6rem, 4vw, 2.8rem)/1.05 Rubik, sans-serif; padding: 0 20px; color: #fff; text-shadow: 0 0 24px var(--tv); }
.tv__sub { font: .8rem "JetBrains Mono", monospace; color: rgb(255 255 255 / .7); margin-top: 8px; }
.tv.switching .tv__screen { animation: static .45s steps(4); }
@keyframes static { 0% { filter: brightness(3) contrast(.4) blur(2px); opacity: .3; } 100% { filter: none; opacity: 1; } }
.stand { width: 46%; height: 16px; margin: 0 auto; background: #1c1824; border-radius: 0 0 8px 8px; }
.tv-note { transform: rotate(-3deg); max-width: 300px; justify-self: center; transition: opacity .4s; }
.lamp { justify-self: center; display: grid; justify-items: center; }
.lamp__shade { width: 90px; height: 60px; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); background: #3a2b22; position: relative; }
.lamp__shade::after { content: ""; position: absolute; left: 50%; bottom: -120px; width: 260px; height: 220px; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(255 196 119 / .28), transparent); pointer-events: none; }
.lamp__pole { width: 6px; height: 150px; background: #2a2230; }
.lamp__base { width: 60px; height: 10px; border-radius: 6px; background: #2a2230; }
/* il divano visto da dietro: la sagoma di chi guarda */
.couch-row { position: relative; margin: 36px auto 0; max-width: 760px; height: 150px; }
.couch { position: absolute; inset: auto 0 0; height: 96px; border-radius: 40px 40px 14px 14px; background: linear-gradient(#24365e, #18243f); box-shadow: inset 0 10px 0 #2c4171, 0 -12px 50px color-mix(in srgb, var(--tv) 35%, transparent); transition: box-shadow 1s; }
.couch::before, .couch::after { content: ""; position: absolute; bottom: 0; width: 70px; height: 120px; border-radius: 30px 30px 14px 14px; background: #1d2c4e; }
.couch::before { left: -26px; }
.couch::after { right: -26px; }
.heads { position: absolute; inset: 0 60px auto; display: flex; justify-content: space-around; z-index: 2; }
.heads span { width: 54px; height: 64px; border-radius: 50% 50% 44% 44%; background: #0c0a12; box-shadow: 0 -2px 0 color-mix(in srgb, var(--tv) 70%, transparent); transition: box-shadow 1s; margin-top: 20px; }
.heads span.empty { background: transparent; border: 2px dashed rgb(255 196 119 / .6); box-shadow: none; display: grid; place-items: center; font: 700 .7rem Kalam, cursive; color: var(--lamp); text-align: center; line-height: 1.1; }
.heads span:nth-child(2) { margin-top: 10px; }
.heads span:nth-child(4) { margin-top: 14px; }
@media (max-width: 860px) {
.tv-wall { grid-template-columns: 1fr; }
.lamp { display: none; }
.tv-note { order: 3; }
.heads { inset: 0 34px auto; }
.heads span { width: 40px; height: 48px; }
}
/* ========== LE LOCANDINE ========== */
.posters { padding: 60px 0 30px; }
.posters h2, .ritual h2 { text-align: center; font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0 0 6px; font-weight: 800; }
.posters > .wrap > p, .ritual > .wrap > p.lead { text-align: center; color: var(--dim); margin: 0 0 34px; }
.rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; padding-top: 14px; }
.poster { position: relative; display: grid; gap: 10px; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: var(--text); }
.poster svg { width: 100%; aspect-ratio: 2/3; display: block; border-radius: 3px; box-shadow: 0 18px 36px rgb(0 0 0 / .55); transition: transform .35s, box-shadow .35s; }
.poster:nth-child(odd) svg { transform: rotate(-1.5deg); }
.poster:nth-child(even) svg { transform: rotate(1.5deg); }
.poster::before { content: ""; position: absolute; top: 7px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #c9a36a; transform: translateX(-50%); box-shadow: 0 2px 0 #7a5a33; z-index: 2; }
.poster:hover svg, .poster[aria-pressed="true"] svg { transform: translateY(-8px) rotate(0); box-shadow: 0 0 0 3px #fff, 0 24px 50px rgb(0 0 0 / .6), 0 0 50px var(--pc); }
.poster__cap { font: 700 .95rem Kalam, cursive; color: var(--dim); text-align: center; }
.poster[aria-pressed="true"] .poster__cap { color: var(--text); }
@media (max-width: 860px) {
.rail { grid-template-columns: repeat(2, 1fr); }
.poster:last-child { grid-column: 1 / -1; max-width: 50%; justify-self: center; width: 100%; }
}
/* ========== IL RITO ========== */
.ritual { padding: 40px 0 30px; }
.steps { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps li { background: var(--wall); border: 1px solid #2a2338; border-radius: 16px; padding: 20px; position: relative; }
.steps b { display: block; font-size: 1.1rem; margin-bottom: 4px; }
.steps span { color: var(--dim); font-size: .95rem; }
.steps i { font-style: normal; font: 700 1.6rem Kalam, cursive; color: #8cc6ff; display: block; margin-bottom: 4px; }
@media (max-width: 760px) {
.steps { grid-template-columns: 1fr; }
}
.invite { text-align: center; padding: 60px 0 110px; }
.invite h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 8px; }
.invite p { color: var(--dim); margin: 0 0 24px; }
.invite .links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.invite a { text-decoration: none; padding: 12px 20px; border-radius: 999px; border: 1px solid #3a3150; font-weight: 700; }
.invite a.main { background: #5865f2; border-color: #5865f2; }