/* La porta · entra nel Discord */
:root {
    --dani: #1f8bff; --ome: #9b3cff;
    --both: linear-gradient(100deg, #06b6ff, #424dff 50%, #b625ff);
    --lamp: #ffc477; --room: #0d0b13; --discord: #5865f2;
    --text: #f1ecf8; --dim: #aaa2bf; --paper: #fff6d8;
  }
body { margin: 0; color: var(--text); font: 17px/1.6 Rubik, system-ui, sans-serif; overflow-x: hidden;
    background: radial-gradient(60% 45% at 50% 18%, rgb(255 196 119 / .18), transparent 70%), var(--room); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0 0 8px; font-weight: 800; text-align: center; }
.sub { text-align: center; color: var(--dim); margin: 0 0 32px; }
.kicker { font: 600 .82rem "JetBrains Mono", monospace; color: var(--lamp); margin: 0 0 12px; }
/* ========== LA PORTA ========== */
.threshold { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; padding: 60px 0 40px; }
.threshold h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; margin: 0 0 16px; font-weight: 900; letter-spacing: -.02em; }
.threshold h1 em { font-style: normal; color: var(--lamp); text-shadow: 0 0 34px rgb(255 196 119 / .5); }
.threshold p { color: var(--dim); margin: 0 0 26px; max-width: 32em; }
.ring {
    display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--discord); color: #fff; font: 800 1.2rem Rubik, sans-serif; text-decoration: none;
    box-shadow: 0 14px 40px rgb(88 101 242 / .55), inset 0 1px 0 rgb(255 255 255 / .25); transition: transform .2s;
  }
.ring:hover { transform: translateY(-3px) scale(1.02); }
.ring .b { display: inline-block; transform-origin: 50% 10%; }
.ring:hover .b { animation: ding .6s ease-in-out 2; }
@keyframes ding { 25% { transform: rotate(18deg); } 75% { transform: rotate(-18deg); } }
.online { display: flex; align-items: center; gap: 10px; margin-top: 18px; font: .85rem "JetBrains Mono", monospace; color: var(--dim); }
.online i { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 10px #3ddc84; }
.door-art { width: 100%; max-width: 420px; justify-self: center; filter: drop-shadow(0 30px 50px rgb(0 0 0 / .5)); }
.door-art .leaf { transform-box: fill-box; transform-origin: left center; animation: breeze 6s ease-in-out infinite; }
@keyframes breeze { 50% { transform: skewY(-1.5deg) scaleX(.96); } }
@media (max-width: 860px) {
.threshold { grid-template-columns: 1fr; text-align: center; }
.threshold p { margin-inline: auto; }
.online { justify-content: center; }
.door-art { max-width: 300px; order: -1; }
}
/* ========== I PASSI ========== */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 34px; border-top: 3px dashed #4a3f63; z-index: 0; }
.steps li { position: relative; z-index: 1; text-align: center; }
.steps .n { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%; background: #1a1526; border: 3px solid var(--lamp); font: 700 1.6rem Kalam, cursive; color: var(--lamp); box-shadow: 0 0 24px rgb(255 196 119 / .3); }
.steps li:last-child .n { background: var(--lamp); color: #2b2233; }
.steps b { display: block; font-size: 1.15rem; margin-bottom: 4px; }
.steps span { color: var(--dim); font-size: .95rem; }
@media (max-width: 760px) {
.steps { grid-template-columns: 1fr 1fr; row-gap: 30px; }
.steps::before { display: none; }
}
/* ========== LE REGOLE DI CASA ========== */
.rules-wrap { margin-top: 110px; display: grid; justify-items: center; }
.frame { position: relative; max-width: 720px; width: 100%; padding: 16px; background: linear-gradient(135deg, #7a5233, #4e3220); border-radius: 6px; box-shadow: 0 30px 60px rgb(0 0 0 / .6); transform: rotate(-.6deg); }
.frame::before { content: ""; position: absolute; top: -30px; left: 50%; width: 120px; height: 30px; transform: translateX(-50%); border: 2px solid #8a7a66; border-bottom: 0; border-radius: 60px 60px 0 0; }
.frame::after { content: ""; position: absolute; top: -36px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: #c9a36a; transform: translateX(-50%); }
.sign { background: var(--paper); color: #2b2233; padding: 30px 34px 28px; border-radius: 2px; box-shadow: inset 0 0 40px rgb(160 120 60 / .25); }
.sign h3 { font: 700 2rem Kalam, cursive; text-align: center; margin: 0 0 4px; }
.sign .hint { text-align: center; font: .9rem Kalam, cursive; color: #7a6d5a; margin: 0 0 18px; }
.sign ol { margin: 0; padding-left: 1.6em; display: grid; gap: 8px; font: 1.12rem/1.35 Kalam, cursive; }
.sign ol li::marker { font-weight: 700; color: #6a3fb0; }
.sign .sig { text-align: right; font: 700 1.05rem Kalam, cursive; color: #6a3fb0; margin: 16px 0 0; }
/* ========== COSA TROVI DENTRO ========== */
.inside { margin-top: 110px; }
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rooms li { list-style: none; background: #15121e; border: 1px solid #2a2338; border-radius: 14px; padding: 16px 18px; position: relative; overflow: hidden; }
.rooms li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); box-shadow: 0 0 14px var(--c); }
.rooms b { display: block; font-size: 1.08rem; margin-bottom: 2px; }
.rooms span { color: var(--dim); font-size: .95rem; }
.rooms-wrap ul { margin: 0; padding: 0; }
@media (max-width: 760px) {
.rooms { grid-template-columns: 1fr; }
}
/* ========== FAQ ========== */
.faq { margin: 110px auto 0; max-width: 760px; display: grid; gap: 10px; }
.faq details { background: #15121e; border: 1px solid #2a2338; border-radius: 12px; padding: 0 18px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 1.3rem Kalam, cursive; color: var(--lamp); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 16px; color: var(--dim); }
/* ========== CHIUSURA ========== */
.final { text-align: center; padding: 110px 0 120px; }
.final h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.final p { color: var(--dim); margin: 0 0 30px; }
.final .back { display: block; margin-top: 24px; color: var(--dim); font-size: .95rem; }