/* ======================================================================
   KingdomsMC — Stile condiviso (home, regole, staff)
   Tema Halloween: notte viola, zucca arancione, luna.
   Font (ospitati in /fonts): Unbounded per i titoli, Onest per il testo,
   Pixelify Sans per gli elementi "presi dal gioco" (chat, cartelli, toast).
   Lo store (store.html) usa ancora animations.css: non va toccato qui.
   ====================================================================== */

:root {
    --night: #0b0812;
    --night-2: #110c1b;
    --panel: #171024;
    --panel-2: #21173a;
    --line: rgba(255, 196, 140, 0.11);
    --line-strong: rgba(255, 196, 140, 0.24);
    --text: #f5eee3;
    --muted: #b9abc6;
    --pumpkin: #ff7a1a;
    --pumpkin-hi: #ff9a45;
    --pumpkin-deep: #c2500a;
    --pumpkin-ink: #1f0c00;
    --witch: #8b5cf6;
    --witch-deep: #5b21b6;
    --slime: #9be15d;
    --blood: #ff4d5e;

    /* colori "di Minecraft" */
    --mc-yellow: #ffff55;
    --mc-aqua: #55ffff;
    --mc-red: #ff5555;
    --mc-green: #55ff55;

    --font-display: 'Unbounded', 'Onest', system-ui, sans-serif;
    --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-pixel: 'Pixelify Sans', 'Onest', monospace;

    --radius-lg: 22px;
    --radius: 16px;
    --radius-sm: 12px;
    --nav-h: 72px;
    --shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}

body.light-mode,
html.theme-light body {
    --night: #faf5ee;
    --night-2: #f3ebe0;
    --panel: #ffffff;
    --panel-2: #f6eee4;
    --line: rgba(80, 40, 10, 0.12);
    --line-strong: rgba(80, 40, 10, 0.24);
    --text: #1d1226;
    --muted: #5f5068;
    --shadow: 0 30px 60px -34px rgba(70, 30, 0, 0.35);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--night);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.03rem;
    line-height: 1.6;
    transition: background-color .35s ease, color .35s ease;
}
/* gli elementi che entrano da destra non devono creare scroll orizzontale */
main { flex: 1; overflow-x: clip; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--pumpkin-hi); outline-offset: 3px; border-radius: 6px; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
::selection { background: var(--pumpkin); color: var(--pumpkin-ink); }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.mt-1 { margin-top: 1rem; }

/* Link "salta al contenuto" per chi usa la tastiera */
.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
    padding: .6rem 1rem;
    border-radius: 10px;
    background: var(--pumpkin);
    color: var(--pumpkin-ink);
    font-weight: 800;
    transform: translateY(-160%);
    transition: transform .2s ease;
}
.skip-link:focus { transform: none; }

/* ---------- Tipografia ---------- */
.display { font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.h1 { font-size: clamp(2.6rem, 6.6vw, 5.2rem); }
.h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
.h3 { font-size: 1.25rem; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 58ch; }
.pixel { font-family: var(--font-pixel); letter-spacing: .01em; }
.text-link {
    display: inline-block;
    color: var(--pumpkin-hi);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.text-link:hover { color: var(--pumpkin); }
body.light-mode .text-link { color: var(--pumpkin-deep); }

/* ---------- Bottoni ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 52px;
    padding: .8rem 1.4rem;
    border-radius: 12px;
    background: var(--pumpkin);
    color: var(--pumpkin-ink);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.15;
    white-space: nowrap;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
    transition: transform .12s ease, background-color .15s ease, box-shadow .12s ease;
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn:hover { background: var(--pumpkin-hi); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.22); }
.btn-witch { background: var(--witch); color: #fff; }
.btn-witch:hover { background: #9d74ff; }
.btn-ghost {
    background: rgba(255, 255, 255, 0.07);
    color: #f5eee3;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: none;
    backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.13); }
.btn-bone { background: #f5eee3; color: #2a1636; }
.btn-bone:hover { background: #fff; }
.btn-sm { min-height: 42px; padding: .55rem 1rem; font-size: .92rem; border-radius: 10px; }

/* Conferma "Copiato!" */
.ico-check { display: none; }
.is-copied .ico-check { display: block; animation: checkIn .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.is-copied svg:not(.ico-check) { display: none; }
.is-copied { animation: copiedPulse .5s ease; }
@keyframes checkIn { from { transform: scale(0) rotate(-45deg); } }
@keyframes copiedPulse { 40% { transform: scale(1.06); } }
/* site.js aggiunge un ripple ai bottoni (serve allo store): qui no */
.btn-ripple { display: none; }

/* ---------- Navigazione ---------- */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: var(--nav-h);
    background: linear-gradient(180deg, rgba(7, 5, 12, 0.7), rgba(7, 5, 12, 0));
    border-bottom: 1px solid transparent;
    transition: background-color .25s ease, border-color .25s ease;
}
.nav.scrolled {
    background: rgba(10, 7, 16, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: rgba(255, 196, 140, 0.12);
}
.nav-inner { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.nav-logo img { height: 46px; width: auto; }
.nav-links { position: relative; display: flex; align-items: center; gap: .25rem; }
.nav-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: .55rem .85rem;
    border-radius: 999px;
    color: rgba(245, 238, 227, 0.75);
    font-weight: 600;
    font-size: .95rem;
    transition: color .15s ease, background-color .15s ease;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.nav-link.active { color: var(--pumpkin-ink); background: var(--pumpkin); font-weight: 700; }
/* Pillola che scivola tra le voci (creata da effects.js) */
.nav-pill {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    border-radius: 999px;
    background: var(--pumpkin);
    opacity: 0;
    transition: transform .4s cubic-bezier(.3, 1.3, .5, 1), width .4s cubic-bezier(.3, 1.3, .5, 1), opacity .2s ease;
    pointer-events: none;
}
.nav-pill.no-anim { transition: none; }
.has-pill .nav-link.active, .has-pill .nav-link:hover { background: transparent; }
.has-pill .nav-link:hover { color: var(--pumpkin-ink); }
.has-pill.hovering .nav-link.active { color: rgba(245, 238, 227, 0.75); font-weight: 600; }

.nav-spacer { flex: 1; }
.nav-tools { display: flex; align-items: center; gap: .3rem; }
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    color: rgba(245, 238, 227, 0.8);
    transition: background-color .15s ease, color .15s ease;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.icon-btn svg { width: 20px; height: 20px; }
.nav-store { margin-left: .3rem; }
.burger { display: none; }

.scroll-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--witch), var(--pumpkin), var(--pumpkin-hi));
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

.flag-badge { display: inline-block; width: 22px; height: 16px; border-radius: 3px; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); }
.flag-it { background-image: linear-gradient(90deg, #009246 34%, #f1f2f1 34% 66%, #ce2b37 66%); }
.flag-en { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'><rect width='60' height='36' fill='%23012169'/><path d='M0,0 L60,36 M60,0 L0,36' stroke='%23ffffff' stroke-width='7'/><path d='M0,0 L60,36 M60,0 L0,36' stroke='%23C8102E' stroke-width='3'/><path d='M30,0 V36 M0,18 H60' stroke='%23ffffff' stroke-width='11'/><path d='M30,0 V36 M0,18 H60' stroke='%23C8102E' stroke-width='6'/></svg>"); }
.flag-fr { background-image: linear-gradient(90deg, #0055a4 34%, #fff 34% 66%, #ef4135 66%); }
.flag-de { background-image: linear-gradient(180deg, #000 33%, #dd0000 33% 66%, #ffce00 66%); }
.flag-ru { background-image: linear-gradient(180deg, #fff 33%, #0039a6 33% 66%, #d52b1e 66%); }

.lang-dropdown { position: relative; }
.lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 180px;
    padding: .4rem;
    display: none;
    background: #171024;
    border: 1px solid rgba(255, 196, 140, 0.18);
    border-radius: 14px;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
}
.lang-menu.open { display: grid; }
.lang-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .6rem .7rem;
    border-radius: 9px;
    color: rgba(245, 238, 227, 0.8);
    font-weight: 600;
    font-size: .92rem;
    text-align: left;
}
.lang-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

.mobile-menu {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    z-index: 49;
    width: min(86vw, 340px);
    height: calc(100dvh - var(--nav-h));
    padding: 1.25rem 1rem;
    display: grid;
    align-content: start;
    gap: .25rem;
    background: #110c1b;
    border-right: 1px solid rgba(255, 196, 140, 0.14);
    transform: translateX(-105%);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
    visibility: hidden;
}
.mobile-menu.open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.mobile-menu a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem .8rem;
    border-radius: 12px;
    color: rgba(245, 238, 227, 0.85);
    font-weight: 700;
    font-size: 1.05rem;
}
.mobile-menu a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.mobile-menu a.active { background: rgba(255, 122, 26, 0.16); color: var(--pumpkin-hi); }
.mobile-menu .btn { margin-top: .75rem; color: var(--pumpkin-ink); }
.mobile-menu-backdrop {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    z-index: 48;
    display: none;
    background: rgba(4, 2, 8, 0.65);
}
.mobile-menu-backdrop.open { display: block; }

@media (max-width: 940px) {
    .nav-links, .nav-store { display: none; }
    .burger { display: inline-flex; }
    .nav-inner { gap: .75rem; }
}

/* ======================================================================
   Pezzi "presi dal gioco"
   ====================================================================== */

/* Icone pixel (generate a mano, 16x16) */
.px { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* Slot dell'inventario */
.slot {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    padding: 9px;
    background: #2b2238;
    box-shadow: inset 3px 3px 0 #120c1c, inset -3px -3px 0 #4a3d5e;
}
.slot-sm { width: 42px; height: 42px; padding: 7px; box-shadow: inset 2px 2px 0 #120c1c, inset -2px -2px 0 #4a3d5e; }
/* Tooltip dell'oggetto, come quando passi il mouse su uno slot in gioco */
.slot[data-tip] { position: relative; }
.slot[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 8px);
    top: -8px;
    z-index: 5;
    padding: .25rem .55rem .35rem;
    background: rgba(16, 0, 16, 0.94);
    border: 2px solid #3a0f8a;
    box-shadow: 0 0 0 2px rgba(16, 0, 16, 0.94);
    color: #fff;
    font-family: var(--font-pixel);
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: 2px 2px 0 #3f3f3f;
    pointer-events: none;
}
body.light-mode .slot { background: #8b8b8b; box-shadow: inset 3px 3px 0 #373737, inset -3px -3px 0 #ffffff; }
body.light-mode .slot-sm { box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #ffffff; }

/* Notifica "progresso" (come quelle in alto a destra in gioco) */
.toast {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: .9rem 1.1rem .95rem .9rem;
    background: #1c1626;
    border: 2px solid #5b4a75;
    border-radius: 6px;
    box-shadow: 0 0 0 2px #07040c, 0 22px 34px -22px rgba(0, 0, 0, 0.85);
    color: #f5eee3;
}
.toast-kicker { display: block; font-family: var(--font-pixel); color: var(--mc-yellow); font-size: .95rem; line-height: 1.3; }
.toast-title { display: block; font-family: var(--font-pixel); font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
.toast p { color: #c7b9d4; font-size: .97rem; margin-top: .25rem; }
.toast .slot { width: 56px; height: 56px; }

.ip-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .7rem;
    padding: .35rem .35rem .35rem .75rem;
    background: #0b0812;
    border: 2px solid #3d3150;
    font-family: var(--font-pixel);
    font-size: 1.05rem;
}
.ip-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-mini {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    padding: .4rem .7rem;
    border-radius: 6px;
    background: var(--pumpkin);
    color: var(--pumpkin-ink);
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 800;
    transition: background-color .15s ease;
}
.copy-mini:hover { background: var(--pumpkin-hi); }
.copy-mini svg { width: 15px; height: 15px; }

/* Chat del gioco */
.chat {
    padding: 1.1rem 1.25rem;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    font-family: var(--font-pixel);
    font-size: 1.12rem;
    line-height: 1.5;
    color: #fff;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
body.light-mode .chat { background: #1c1626; }
.chat-line + .chat-line { margin-top: .3rem; }
.chat-line.ask { margin-top: 1rem; }
.chat-line:first-child { margin-top: 0; }
.chat-name { color: var(--mc-aqua); }
.chat-line.reply .chat-name { color: var(--mc-red); }
.chat-input {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
    padding: .45rem .7rem;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
}
.chat-input::after {
    content: '';
    width: .6em;
    height: 2px;
    margin-top: .7em;
    background: #fff;
    animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* Cartello appeso */
.sign { display: grid; justify-items: center; width: min(600px, 100%); margin: 0 auto; }
.sign-chains { display: flex; justify-content: space-between; width: 62%; height: 54px; }
.sign-chains span {
    width: 8px;
    background: repeating-linear-gradient(180deg, #6f6a78 0 7px, #3b3742 7px 9px, #8d8796 9px 13px, #3b3742 13px 15px);
    box-shadow: 0 0 0 1px #1c1a20;
}
.sign-board {
    position: relative;
    width: 100%;
    padding: 1.5rem 1.25rem 1.6rem;
    background:
        radial-gradient(14px 6px at 18% 30%, rgba(90, 55, 25, 0.45), transparent 70%),
        radial-gradient(10px 5px at 78% 72%, rgba(90, 55, 25, 0.4), transparent 70%),
        repeating-linear-gradient(180deg, #b78c53 0 26px, #9c7442 26px 29px),
        #b78c53;
    border: 7px solid #6b4a2b;
    box-shadow: inset 0 0 0 3px #8c6337, 0 34px 60px -28px rgba(0, 0, 0, 0.85);
    color: #22140a;
    font-family: var(--font-pixel);
    font-size: clamp(1.35rem, 3.4vw, 2rem);
    line-height: 1.32;
    text-align: center;
    transform-origin: 50% -54px;
}
.sign-board p { margin: 0; }
.sign-board .sign-big { font-weight: 700; font-size: 1.15em; }

/* Targhetta col nome sopra la testa */
.nametag {
    display: inline-block;
    padding: .2rem .6rem .25rem;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-family: var(--font-pixel);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.nametag .rank { color: var(--mc-red); }

/* Scritta gialla del menu principale */
.splash {
    position: absolute;
    left: 78%;
    top: 58%;
    z-index: 2;
    max-width: 16ch;
    color: var(--mc-yellow);
    font-family: var(--font-pixel);
    font-weight: 700;
    font-size: clamp(1rem, 1.7vw, 1.3rem);
    line-height: 1.1;
    text-align: center;
    text-shadow: 2px 2px 0 #3f3f15;
    white-space: nowrap;
    transform: rotate(-17deg);
    animation: splash .5s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes splash {
    from { transform: rotate(-17deg) scale(1); }
    to { transform: rotate(-17deg) scale(1.08); }
}

/* Riga della lista server, dentro una finta schermata "Multigiocatore" */
.mp-screen {
    display: grid;
    gap: .9rem;
    padding: 1.1rem;
    background: #2a1d14 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 shape-rendering=%27crispEdges%27%3E%3Cpath fill=%27%232a1d14%27 d=%27M0 0h16v16H0z%27/%3E%3Cpath fill=%27%2333241a%27 d=%27M4 0h2v1h-2zM7 0h5v1h-5zM15 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM7 1h1v1h-1zM9 1h3v1h-3zM7 2h2v1h-2zM12 2h2v1h-2zM4 3h1v1h-1zM6 3h1v1h-1zM13 3h2v1h-2zM3 4h5v1h-5zM10 4h1v1h-1zM12 4h1v1h-1zM10 5h1v1h-1zM13 5h1v1h-1zM4 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM8 7h1v1h-1zM14 7h2v1h-2zM3 8h1v1h-1zM5 8h3v1h-3zM13 8h1v1h-1zM4 9h1v1h-1zM7 9h1v1h-1zM13 9h1v1h-1zM15 9h1v1h-1zM0 10h1v1h-1zM2 10h1v1h-1zM8 10h1v1h-1zM12 10h1v1h-1zM15 10h1v1h-1zM0 11h1v1h-1zM6 11h5v1h-5zM12 11h1v1h-1zM15 11h1v1h-1zM1 12h1v1h-1zM4 12h1v1h-1zM7 12h1v1h-1zM11 12h1v1h-1zM14 12h2v1h-2zM0 13h1v1h-1zM8 13h1v1h-1zM13 13h1v1h-1zM2 14h2v1h-2zM12 14h1v1h-1zM15 14h1v1h-1zM3 15h2v1h-2z%27/%3E%3Cpath fill=%27%233d2b1e%27 d=%27M1 0h1v1h-1zM12 0h1v1h-1zM4 1h2v1h-2zM8 1h1v1h-1zM12 1h2v1h-2zM0 2h1v1h-1zM9 2h1v1h-1zM0 3h1v1h-1zM5 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM0 5h2v1h-2zM3 5h1v1h-1zM15 5h1v1h-1zM0 6h4v1h-4zM0 7h1v1h-1zM3 7h1v1h-1zM7 7h1v1h-1zM9 7h1v1h-1zM11 7h1v1h-1zM11 8h1v1h-1zM14 8h1v1h-1zM0 9h2v1h-2zM8 9h1v1h-1zM12 9h1v1h-1zM9 10h2v1h-2zM8 12h3v1h-3zM1 13h1v1h-1zM8 14h1v1h-1zM11 14h1v1h-1zM15 15h1v1h-1z%27/%3E%3Cpath fill=%27%2324180f%27 d=%27M6 2h1v1h-1zM8 4h1v1h-1zM8 5h1v1h-1zM13 7h1v1h-1zM2 9h2v1h-2zM6 10h2v1h-2zM1 11h1v1h-1zM12 12h1v1h-1zM9 13h1v1h-1zM0 14h1v1h-1zM9 14h1v1h-1zM6 15h1v1h-1z%27/%3E%3C/svg%3E") 0 0 / 64px 64px;
    image-rendering: pixelated;
    border: 2px solid #07040c;
    box-shadow: var(--shadow);
}
.mp-title { text-align: center; color: #fff; font-family: var(--font-pixel); font-size: 1.15rem; text-shadow: 2px 2px 0 #000; }
.mc-entry {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: .9rem;
    align-items: center;
    padding: .55rem;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #9a9a9a;
    color: #e8e3f0;
    font-family: var(--font-pixel);
}
.mc-icon { width: 64px; height: 64px; image-rendering: pixelated; background: #1d1430; }
.mc-top { display: flex; align-items: center; gap: .6rem; }
.mc-name { color: #fff; font-size: 1.1rem; }
.mc-count { margin-left: auto; font-size: 1rem; color: #aaa; font-variant-numeric: tabular-nums; }
.mc-ping { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.mc-ping i { display: block; width: 3px; background: #4a4258; transform-origin: 50% 100%; }
.mc-ping i:nth-child(1) { height: 4px; }
.mc-ping i:nth-child(2) { height: 6px; }
.mc-ping i:nth-child(3) { height: 9px; }
.mc-ping i:nth-child(4) { height: 11px; }
.mc-ping i:nth-child(5) { height: 14px; }
.mc-entry[data-state="online"] .mc-ping i { background: #3fd457; }
.mc-entry[data-state="offline"] .mc-ping i { background: #d44a4a; }
.mc-motd { font-size: 1rem; line-height: 1.3; color: #aa77ff; margin-top: .15rem; overflow-wrap: anywhere; }
.mp-caption { color: #d8cbbd; font-size: .92rem; text-align: center; text-shadow: 1px 1px 0 #000; }

/* ======================================================================
   Scena notturna: cielo, luna, pipistrelli, castello, nebbia
   ====================================================================== */
.scene-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* clip: niente scroll interno quando il browser porta in vista un elemento */
    overflow: clip;
    color: #f5eee3;
    background:
        radial-gradient(90% 60% at 70% 100%, rgba(255, 110, 20, 0.35), transparent 70%),
        linear-gradient(180deg, #05030a 0%, #120a22 38%, #2a1236 70%, #4a1a2a 100%);
}
.scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stars {
    position: absolute;
    inset: 0 0 35% 0;
    opacity: .75;
    background:
        radial-gradient(1.3px 1.3px at 22px 34px, #fff, transparent) 0 0 / 190px 150px,
        radial-gradient(1px 1px at 120px 80px, #ffe9c4, transparent) 0 0 / 230px 170px,
        radial-gradient(1.6px 1.6px at 60px 120px, #fff, transparent) 0 0 / 310px 210px,
        radial-gradient(1px 1px at 160px 20px, #d9c8ff, transparent) 0 0 / 270px 130px;
    mask-image: linear-gradient(180deg, #000 40%, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
}
.moon {
    position: absolute;
    top: calc(var(--nav-h) + 6%);
    right: 9%;
    width: clamp(150px, 19vw, 280px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 36%, rgba(120, 70, 20, 0.14) 0 7%, transparent 7.5%),
        radial-gradient(circle at 64% 60%, rgba(120, 70, 20, 0.12) 0 10%, transparent 10.5%),
        radial-gradient(circle at 44% 76%, rgba(120, 70, 20, 0.1) 0 5%, transparent 5.5%),
        radial-gradient(circle at 72% 30%, rgba(120, 70, 20, 0.09) 0 4%, transparent 4.5%),
        radial-gradient(circle at 40% 38%, #fffaea, #ffe6a8 58%, #f0b765);
    box-shadow: 0 0 70px 14px rgba(255, 205, 130, 0.35), 0 0 220px 80px rgba(255, 130, 40, 0.16);
}
.moon::before {
    content: '';
    position: absolute;
    inset: -45%;
    border-radius: 50%;
    /* trasparente al centro, così l'alone non copre la luna */
    background: radial-gradient(circle closest-side, rgba(255, 200, 120, 0) 53%, rgba(255, 200, 120, 0.3) 60%, rgba(255, 200, 120, 0) 100%);
    pointer-events: none;
}
.bat-track { position: absolute; left: 0; width: 54px; animation: batFly var(--d, 26s) linear var(--delay, 0s) infinite; }
.bat-track svg { width: 100%; height: auto; fill: #07040c; animation: batFlap .32s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.bat-1 { top: calc(var(--nav-h) + 9%); --d: 24s; --delay: -4s; }
.bat-2 { top: calc(var(--nav-h) + 17%); --d: 31s; --delay: -16s; width: 38px; }
.bat-3 { top: calc(var(--nav-h) + 4%); --d: 37s; --delay: -25s; width: 30px; }
@keyframes batFly {
    0% { transform: translate3d(-80px, 0, 0); }
    25% { transform: translate3d(25vw, 30px, 0); }
    50% { transform: translate3d(50vw, -10px, 0); }
    75% { transform: translate3d(75vw, 24px, 0); }
    100% { transform: translate3d(calc(100vw + 80px), 0, 0); }
}
@keyframes batFlap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

.castle { position: absolute; left: 0; bottom: 0; width: 100%; }
.castle-far { height: clamp(170px, 25vw, 470px); }
.castle-near { height: clamp(150px, 21vw, 410px); }
.fog {
    position: absolute;
    left: 0;
    bottom: -30px;
    width: 200%;
    height: 200px;
    background: radial-gradient(closest-side, rgba(200, 180, 235, 0.17), transparent) 0 0 / 520px 200px repeat-x;
    filter: blur(6px);
    animation: fogDrift 70s linear infinite;
}
.fog-2 { bottom: -60px; opacity: .7; background-size: 760px 220px; animation-duration: 110s; animation-direction: reverse; }
@keyframes fogDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Hero home ---------- */
.hero {
    min-height: min(100svh, 940px);
    display: flex;
    align-items: center;
    padding: calc(var(--nav-h) + 48px) 0 clamp(170px, 20vw, 380px);
}
.hero-content { max-width: 640px; display: grid; gap: 1.4rem; justify-items: start; }
.hero-brand { position: relative; }
.hero-logo { width: clamp(170px, 20vw, 230px); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6)); }
.hero-title { text-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
.hero-sub { color: rgba(245, 238, 227, 0.88); font-size: clamp(1.05rem, 1.7vw, 1.22rem); max-width: 50ch; }
.hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.hero-links .text-link { color: #ffd0a1; }

/* Barra IP: la cosa più importante della pagina */
.ipbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 560px;
    padding: .5rem .5rem .5rem 1.1rem;
    border-radius: 16px;
    background: rgba(10, 6, 16, 0.75);
    border: 1px solid rgba(255, 162, 74, 0.4);
    box-shadow: 0 20px 50px -24px rgba(255, 122, 26, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.ipbar-text { display: grid; min-width: 0; flex: 1; }
.ipbar-ip { font-weight: 800; font-size: clamp(1.05rem, 2vw, 1.3rem); letter-spacing: .01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; color: rgba(245, 238, 227, 0.78); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #8f82a0; flex-shrink: 0; }
[data-state="online"] .status-dot { background: var(--slime); animation: ping 1.8s ease-out infinite; }
[data-state="offline"] .status-dot { background: var(--blood); }
/* facce di chi è online in questo momento */
.heads { display: inline-flex; }
.heads:empty { display: none; }
.heads img { width: 20px; height: 20px; border-radius: 4px; image-rendering: pixelated; box-shadow: 0 0 0 2px #0a0610; }
.heads img + img { margin-left: -5px; }
@keyframes ping {
    0% { box-shadow: 0 0 0 0 rgba(155, 225, 93, 0.6); }
    100% { box-shadow: 0 0 0 10px rgba(155, 225, 93, 0); }
}

/* ---------- Pagine interne: testata più bassa ---------- */
.page-head { padding: calc(var(--nav-h) + 56px) 0 clamp(150px, 20vw, 250px); }
.page-head .wrap { display: grid; gap: 1rem; justify-items: start; }
.page-head p { color: rgba(245, 238, 227, 0.88); max-width: 56ch; font-size: 1.12rem; }
.page-head .moon { width: clamp(110px, 14vw, 200px); }

/* ---------- Sezioni ---------- */
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.section--flush { padding-top: 0; }
.section-head { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 720px; }

/* Lo SMP */
.smp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.shot {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 0 0 1px rgba(255, 162, 74, 0.25), 0 40px 80px -34px rgba(255, 100, 20, 0.45), var(--shadow);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(40, 10, 40, 0.5)), linear-gradient(0deg, rgba(255, 110, 20, 0.16), transparent 40%);
    pointer-events: none;
}
.facts { display: grid; gap: 1.1rem; margin: 1.8rem 0; }
.fact { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 1rem; align-items: center; }
.fact strong { display: block; font-size: 1.08rem; }
.fact span { color: var(--muted); font-size: .98rem; }

/* Come entrare */
.join { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.toasts { display: grid; gap: 1rem; margin-top: 2rem; }

/* Community */
.community { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.25rem; }
.dc-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: clamp(1.8rem, 4vw, 2.8rem);
    border-radius: var(--radius-lg);
    color: #f5eee3;
    background:
        radial-gradient(70% 90% at 100% 100%, rgba(255, 122, 26, 0.45), transparent 60%),
        linear-gradient(135deg, #2b1458 0%, #4c1d95 55%, #6d28d9 100%);
    background-size: 100% 100%, 180% 180%;
    box-shadow: var(--shadow);
}
.dc-card p { color: rgba(245, 238, 227, 0.86); max-width: 46ch; }
.dc-count { display: flex; align-items: baseline; gap: .6rem; margin: .4rem 0 .6rem; }
.dc-count strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.dc-count span { font-weight: 700; color: rgba(245, 238, 227, 0.8); }
.dc-card .btn { justify-self: start; }
.dc-pumpkin {
    position: absolute;
    right: -18px;
    bottom: -22px;
    z-index: -1;
    width: clamp(140px, 18vw, 200px);
    height: auto;
    aspect-ratio: 1;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 30px rgba(255, 140, 40, 0.55));
    transform-origin: 50% 100%;
}

.socials { display: grid; gap: .75rem; align-content: start; }
/* Bottoni come quelli del menu di Minecraft, con i colori degli slot */
.social-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: .9rem;
    align-items: center;
    padding: .5rem .9rem .55rem .5rem;
    background: #3a2f4d;
    border: 2px solid #07040c;
    box-shadow: inset 3px 3px 0 #5e4f78, inset -3px -3px 0 #1d1628;
    color: #fff;
    font-family: var(--font-pixel);
    text-shadow: 2px 2px 0 #1d1628;
}
.social-row:hover { border-color: #fff; background: #463a5c; }
.social-icon { display: grid; place-items: center; width: 44px; height: 44px; background: #1d1628; box-shadow: inset 2px 2px 0 #0b0812; color: #fff; }
.social-icon svg { width: 22px; height: 22px; }
.social-row strong { display: block; font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.social-row span { color: #c9bcd8; font-size: .95rem; }

/* ---------- Regole ---------- */
.rules-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: clamp(3rem, 6vw, 4.5rem); }
.rules-box {
    padding: clamp(1.4rem, 3vw, 2rem);
    border-radius: var(--radius-lg);
    background: var(--panel);
    border: 1px solid var(--line);
}
.rules-box.banned { border-color: rgba(255, 77, 94, 0.35); background: linear-gradient(180deg, rgba(255, 77, 94, 0.08), transparent 60%), var(--panel); }
.rules-box.allowed { border-color: rgba(155, 225, 93, 0.3); background: linear-gradient(180deg, rgba(155, 225, 93, 0.07), transparent 60%), var(--panel); }
.rules-box h2 { margin-bottom: 1.2rem; }
.rule-list { display: grid; gap: .9rem; }
.rule-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .9rem; align-items: center; }
/* Sanzione sotto ogni regola, rossa come i messaggi del server in chat */
.rule-item .sanction { display: block; margin-top: .15rem; color: var(--mc-red); font-family: var(--font-pixel); font-size: .92rem; }
body.light-mode .rule-item .sanction { color: #b3261e; }
.rules-notes { margin-top: 1.25rem; padding: 1.4rem 1.6rem; border-radius: var(--radius-lg); background: var(--panel-2); }
.notes-list { display: grid; gap: .6rem; margin-top: .9rem; color: var(--muted); }
.notes-list li { display: flex; gap: .7rem; }
.notes-list li::before { content: ''; flex-shrink: 0; width: 10px; height: 10px; margin-top: .5rem; background: var(--pumpkin); box-shadow: inset -2px -2px 0 var(--pumpkin-deep); }
.faq-block { margin-top: clamp(3rem, 6vw, 4.5rem); max-width: 860px; }
.faq-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

/* ---------- Staff ---------- */
.staff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.staff-card {
    display: grid;
    justify-items: center;
    align-content: start;
    text-align: center;
    gap: .8rem;
    padding: 1.2rem 1.2rem 1.6rem;
    border-radius: var(--radius-lg);
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.staff-stage {
    position: relative;
    width: 100%;
    height: 280px;
    display: grid;
    place-items: end center;
    border-radius: var(--radius);
    overflow: hidden;
    background:
        radial-gradient(55% 16% at 50% 94%, rgba(0, 0, 0, 0.55), transparent 70%),
        radial-gradient(70% 70% at 50% 100%, rgba(255, 122, 26, 0.45), transparent 70%),
        linear-gradient(180deg, #120a22, #2a1236);
}
.staff-stage .nametag { position: absolute; top: 22px; left: 50%; translate: -50% 0; z-index: 1; }
.staff-skin { position: relative; bottom: 16px; height: 196px; width: auto; image-rendering: pixelated; }
.staff-card p { color: var(--muted); font-size: .98rem; max-width: 34ch; }

/* ---------- Candidature ---------- */
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 1.5rem 0 clamp(3rem, 6vw, 4.5rem); }
/* Ogni ruolo ha il suo colore, lo stesso del grado in chat */
.role-helper { --role: #55ff55; }
.role-mod { --role: #55ffff; }
.role-builder { --role: #ffaa00; }
.role-creator { --role: #ff55ff; }
.role-card {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--panel);
    border: 1px solid var(--line);
    transition: border-color .2s ease, translate .25s ease;
}
.role-card:hover { border-color: color-mix(in srgb, var(--role) 55%, transparent); translate: 0 -4px; }
.role-art {
    position: relative;
    display: grid;
    place-items: center;
    height: 160px;
    background:
        radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--role) 32%, transparent), transparent 62%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 10px, transparent 10px 20px),
        #150e21;
    border-bottom: 2px solid color-mix(in srgb, var(--role) 45%, transparent);
}
.role-icon { width: 88px; height: 88px; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.6)); animation: itemFloat 3.2s ease-in-out infinite; }
.role-card:nth-child(2) .role-icon { animation-delay: -.8s; }
.role-card:nth-child(3) .role-icon { animation-delay: -1.6s; }
.role-card:nth-child(4) .role-icon { animation-delay: -2.4s; }
.role-card:hover .role-icon { animation-duration: 1.1s; }
@keyframes itemFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-9px) rotate(5deg); }
}
.role-art .badge-open { position: absolute; top: 12px; right: 12px; }
.role-body { display: grid; align-content: start; gap: .7rem; padding: 1.3rem 1.4rem 1.5rem; }
.role-body p:not(.role-tag) { color: var(--muted); }
.role-tag { justify-self: start; font-size: 1rem; }
.role-tag .rank { color: var(--role); }
.role-btn { justify-self: start; margin-top: .2rem; background: var(--role); color: #120a1a; }
.role-btn:hover { background: var(--role); filter: brightness(1.12); }
.badge-open {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .15rem .6rem .2rem;
    background: rgba(85, 255, 85, 0.1);
    border: 2px solid rgba(85, 255, 85, 0.45);
    color: var(--mc-green);
    font-family: var(--font-pixel);
    font-size: .95rem;
}
.badge-open::before { content: ''; width: 8px; height: 8px; background: var(--mc-green); box-shadow: 0 0 8px var(--mc-green); animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: .25; } }
body.light-mode .badge-open { color: #1d7a1d; border-color: rgba(30, 140, 30, 0.45); }
/* Come funziona: passi + finto ticket Discord */
.ticket { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.ticket-steps { display: grid; gap: 1.4rem; margin: 1.6rem 0 2rem; counter-reset: s; }
.ticket-steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 1rem; align-items: start; counter-increment: s; }
.ticket-steps li::before {
    content: counter(s);
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    background: var(--pumpkin);
    color: var(--pumpkin-ink);
    font-family: var(--font-pixel);
    font-size: 1.8rem;
    font-weight: 700;
    box-shadow: inset -4px -4px 0 var(--pumpkin-deep), inset 4px 4px 0 var(--pumpkin-hi);
}
.ticket-steps strong { display: block; font-size: 1.1rem; }
.ticket-steps span { color: var(--muted); }

.dc-mock {
    border-radius: 12px;
    overflow: hidden;
    background: #313338;
    border: 1px solid #1e1f22;
    color: #dbdee1;
    font-size: .95rem;
    box-shadow: var(--shadow);
}
.dc-mock-head { display: flex; align-items: center; gap: .45rem; padding: .8rem 1rem; border-bottom: 1px solid #1f2023; color: #f2f3f5; font-weight: 700; }
.dc-mock-head svg { width: 20px; height: 20px; color: #80848e; }
.dc-msgs { display: grid; gap: 1.1rem; padding: 1.1rem 1rem; }
.dc-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .8rem; }
.dc-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #1e1f22; }
.dc-avatar img { width: 100%; height: 100%; image-rendering: pixelated; }
.dc-avatar-bot { background: #5865f2; color: #fff; }
.dc-avatar-bot svg { width: 22px; height: 22px; }
.dc-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; }
.dc-name { color: #f2f3f5; font-weight: 700; }
.dc-staff { color: var(--pumpkin-hi); }
.dc-tag { padding: 0 .3rem; border-radius: 3px; background: #5865f2; color: #fff; font-size: .62rem; font-weight: 700; line-height: 1.45; }
.dc-time { color: #949ba4; font-size: .75rem; }
.dc-text { margin-top: .1rem; }
.dc-input { margin: 0 1rem 1rem; padding: .7rem 1rem; border-radius: 8px; background: #383a40; color: #6d6f78; }
/* i messaggi arrivano uno alla volta (ritardi da effects.js) */
html.fx .dc-mock .dc-msg { opacity: 0; transform: translateY(10px); }
html.fx .dc-mock.revealed .dc-msg { animation: chatIn .45s ease forwards; animation-delay: calc(var(--n, 0) * 900ms + .3s); }

/* Cosa cerchiamo: una pagina di libro come in gioco */
.careers-end { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: stretch; }
.book {
    position: relative;
    padding: 2.2rem 1.9rem 1.9rem;
    background: radial-gradient(120% 90% at 50% 0%, #fbf3dc, #eadbb8 70%);
    color: #2b1a10;
    font-family: var(--font-pixel);
    font-size: 1.15rem;
    line-height: 1.5;
    box-shadow: 0 0 0 5px #5a3a1e, 0 0 0 7px #2a1a0c, 0 30px 50px -26px rgba(0, 0, 0, 0.8);
}
.book h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.book-page { position: absolute; top: .7rem; right: 1rem; color: #7a5a3a; font-size: .9rem; }
.book-list { display: grid; gap: .6rem; }
.book-list li::before { content: '- '; }
.help-stack { flex-direction: column; align-items: flex-start; justify-content: center; margin-top: 0; }

/* Riquadro aiuto */
.help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-top: 2rem;
    padding: 1.6rem 1.8rem;
    border-radius: var(--radius-lg);
    background: var(--panel);
    border: 1px solid var(--line);
}
.help p { color: var(--muted); margin-top: .35rem; max-width: 60ch; }

/* ---------- Footer ---------- */
.footer { padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; border-top: 1px solid var(--line); background: var(--night-2); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; }
.footer-brand img { height: 64px; width: auto; margin-bottom: 1rem; }
.footer-brand p { color: var(--muted); font-size: .95rem; max-width: 40ch; }
.footer-title { font-weight: 800; margin-bottom: .9rem; }
.footer-links { display: grid; gap: .55rem; }
.footer-links a { color: var(--muted); font-size: .95rem; transition: color .15s ease; }
.footer-links a:hover { color: var(--text); }
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .85rem;
}

/* ======================================================================
   Animazioni
   ====================================================================== */

/* Ingresso dei testi dell'hero, dopo luna e castello */
.rise { opacity: 0; transform: translateY(18px); animation: rise .9s cubic-bezier(.2, .8, .2, 1) forwards; }
.rise-1 { animation-delay: .3s; }
.rise-2 { animation-delay: .95s; }
.rise-3 { animation-delay: 1.05s; }
.rise-4 { animation-delay: 1.2s; }
.rise-5 { animation-delay: 1.35s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Titolo parola per parola (diviso da effects.js) */
.split-title .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(.45em) rotate(3deg);
    filter: blur(10px);
    animation: wordIn 1s cubic-bezier(.2, .8, .2, 1) forwards;
    animation-delay: calc(.5s + var(--i, 0) * .1s);
}
@keyframes wordIn { to { opacity: 1; transform: none; filter: blur(0); } }

/* La scritta gialla spunta dopo il logo */
.hero-brand .splash { animation: splashIn .6s cubic-bezier(.3, 1.7, .5, 1) 1.5s both, splash .5s ease-in-out 2.1s infinite alternate; }
@keyframes splashIn { from { transform: rotate(-17deg) scale(0); } to { transform: rotate(-17deg) scale(1); } }

/* Scena */
.moon { animation: moonRise 1.8s cubic-bezier(.2, .8, .2, 1) both; }
.moon::before { animation: halo 5s ease-in-out infinite alternate; }
@keyframes moonRise { from { opacity: 0; transform: translateY(90px) scale(.85); } }
@keyframes halo { from { opacity: .5; transform: scale(.98); } to { opacity: 1; transform: scale(1.06); } }

.stars { animation: twinkle 4.5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .5; } to { opacity: .85; } }

.castle-far { animation: castleRise 1.5s cubic-bezier(.2, .8, .2, 1) .15s both; }
.castle-near { animation: castleRise 1.5s cubic-bezier(.2, .8, .2, 1) .3s both; }
@keyframes castleRise { from { opacity: 0; transform: translateY(30%); } }

/* Finestre: partono spente e si accendono una alla volta (ritardi da effects.js) */
.castle .win { fill: #07040c; animation: winOn .45s steps(3, end) forwards, flicker 3.2s ease-in-out infinite; }
@keyframes winOn { to { fill: #ffb347; } }
@keyframes flicker {
    0%, 100% { opacity: 1; }
    40% { opacity: .78; }
    45% { opacity: .55; }
    50% { opacity: .92; }
}
.castle-near use { transform-box: fill-box; transform-origin: 50% 100%; animation: pkPop .7s cubic-bezier(.3, 1.7, .5, 1) 1.3s both; }
@keyframes pkPop { from { transform: scale(0); } }
.castle path[fill="#ffe08a"] { animation: flicker 2.6s ease-in-out infinite; }
.castle-near path[fill="url(#gateGlow)"] { animation: gateGlow 1.2s ease 1.1s both, flicker 4s ease-in-out 2.3s infinite; }
@keyframes gateGlow { from { opacity: 0; } }

/* Fantasma dietro la torre (aggiunto da effects.js) */
.ghost { animation: ghostPeek 11s ease-in-out 3s infinite; filter: drop-shadow(0 0 6px rgba(230, 220, 255, 0.7)); }
@keyframes ghostPeek {
    0%, 52% { transform: translateY(0) rotate(0); }
    60% { transform: translateY(-80px) rotate(-6deg); }
    66% { transform: translateY(-72px) rotate(5deg); }
    72% { transform: translateY(-80px) rotate(-4deg); }
    78% { transform: translateY(-74px) rotate(3deg); }
    88%, 100% { transform: translateY(0) rotate(0); }
}

/* Lampo lontano, raro e tenue */
.flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 55% at 28% 0%, rgba(215, 200, 255, 0.55), transparent 70%);
    opacity: 0;
    animation: flash 14s linear 5s infinite;
    pointer-events: none;
}
@keyframes flash {
    0%, 92%, 100% { opacity: 0; }
    92.6% { opacity: .5; }
    93.2% { opacity: .08; }
    93.8% { opacity: .35; }
    95.5% { opacity: 0; }
}

/* Stella cadente */
.shooting-star {
    position: absolute;
    top: 14%;
    left: 8%;
    width: 140px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
    opacity: 0;
    transform: rotate(-18deg);
    animation: shoot 9s ease-in 2.5s infinite;
    pointer-events: none;
}
@keyframes shoot {
    0% { opacity: 0; transform: rotate(-18deg) translateX(0); }
    1% { opacity: 1; }
    7% { opacity: 0; transform: rotate(-18deg) translateX(520px); }
    100% { opacity: 0; transform: rotate(-18deg) translateX(520px); }
}

/* Torcia che segue il mouse */
.torch {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 280px at var(--mx, 50%) var(--my, 40%), rgba(255, 170, 90, 0.17), transparent 70%);
    opacity: 0;
    transition: opacity .6s ease;
    mix-blend-mode: screen;
    pointer-events: none;
}
.torch-on .torch { opacity: 1; }

/* Comparsa allo scroll (attiva solo con html.fx, messa da boot.js) */
html.fx [data-reveal] {
    opacity: 0;
    transition:
        opacity .9s cubic-bezier(.2, .8, .2, 1),
        transform 1s cubic-bezier(.2, .8, .2, 1),
        filter 1s cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(var(--d, 0) * 90ms);
}
html.fx [data-reveal="up"] { transform: translateY(44px); }
html.fx [data-reveal="right"] { transform: translateX(60px); }
html.fx [data-reveal="pop"] { transform: scale(.9) translateY(24px); }
/* Niente clip-path sull'elemento osservato: Chrome non lo segnalerebbe come visibile */
html.fx [data-reveal="title"] { transform: translateY(30px) skewY(4deg); filter: blur(8px); }
html.fx [data-reveal="wipe"] { opacity: 1; }
html.fx [data-reveal="wipe"] .shot { clip-path: inset(0 100% 0 0 round 22px); transition: clip-path 1.3s cubic-bezier(.7, 0, .2, 1); }
html.fx [data-reveal="wipe"] img { transform: scale(1.2); transition: transform 1.8s cubic-bezier(.2, .8, .2, 1); }
html.fx [data-reveal="swing"] .sign-board { transform: rotate(-9deg); }
html.fx [data-reveal].in { opacity: 1; transform: none; filter: none; }
html.fx [data-reveal="wipe"].in .shot { clip-path: inset(0 0 0 0 round 22px); }
html.fx [data-reveal="wipe"].in img { transform: none; }
html.fx [data-reveal="swing"].in .sign-board { animation: swing 2.4s cubic-bezier(.3, .2, .3, 1) both; }
@keyframes swing {
    0% { transform: rotate(-9deg); }
    22% { transform: rotate(6deg); }
    42% { transform: rotate(-3.5deg); }
    62% { transform: rotate(2deg); }
    80% { transform: rotate(-.8deg); }
    100% { transform: rotate(0); }
}

/* Slot che "saltano" quando compaiono */
html.fx .fact.in .slot,
html.fx .rule-item.in .slot,
html.fx .toast.in .slot { animation: iconPop .7s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d, 0) * 90ms + .25s); }
@keyframes iconPop { from { transform: scale(0) rotate(-20deg); } }

/* Chat: le righe arrivano una alla volta */
html.fx .chat[data-reveal] { transform: none; }
html.fx .chat .chat-line { opacity: 0; transform: translateY(8px); }
html.fx .chat.revealed .chat-line { animation: chatIn .35s ease forwards; animation-delay: calc(var(--n, 0) * 220ms + .2s); }
@keyframes chatIn { to { opacity: 1; transform: none; } }

/* Ping della lista server: le tacche "cercano", poi si riempiono */
.mc-entry[data-state="loading"] .mc-ping i { animation: pingScan 1.1s ease-in-out infinite; }
.mc-entry[data-state="online"] .mc-ping i,
.mc-entry[data-state="offline"] .mc-ping i { animation: pingFill .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.mc-ping i:nth-child(2) { animation-delay: .08s; }
.mc-ping i:nth-child(3) { animation-delay: .16s; }
.mc-ping i:nth-child(4) { animation-delay: .24s; }
.mc-ping i:nth-child(5) { animation-delay: .32s; }
@keyframes pingScan { 50% { background: #a69bb8; } }
@keyframes pingFill { from { transform: scaleY(0); } }

/* Card Discord: zucca che dondola, sfondo che si muove piano */
.dc-card { animation: dcShift 12s ease-in-out infinite alternate; }
@keyframes dcShift { to { background-position: 0 0, 100% 100%; } }
.dc-pumpkin { animation: sway 4s ease-in-out infinite; transition: translate .3s cubic-bezier(.3, 1.6, .5, 1); }
.dc-card:hover .dc-pumpkin { translate: 0 -14px; }
@keyframes sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

.social-row:hover .social-icon { animation: wiggle .5s ease; color: var(--pumpkin-hi); }
@keyframes wiggle { 25% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } }

/* Staff: skin che respirano e saltano all'hover */
.staff-skin { animation: bob 3.4s ease-in-out infinite; transition: translate .35s cubic-bezier(.3, 1.6, .5, 1), rotate .9s cubic-bezier(.3, 1.2, .5, 1); }
.staff-card:nth-child(2) .staff-skin { animation-delay: -1.1s; }
.staff-card:nth-child(3) .staff-skin { animation-delay: -2.2s; }
/* salta e si gira, come un giocatore che si volta */
.staff-card:hover .staff-skin { translate: 0 -12px; rotate: y 360deg; }

/* Oggetti negli slot: al passaggio fluttuano come quelli lasciati a terra in gioco */
.slot:hover .px { animation: itemBob 1.4s ease-in-out infinite; }
@keyframes itemBob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-4px) rotate(8deg); }
}

/* Cartello: dondola quando ci passi sopra */
.sign:hover .sign-board { animation: nudge 1.6s cubic-bezier(.3, .2, .3, 1); }
@keyframes nudge {
    20% { transform: rotate(4deg); }
    40% { transform: rotate(-3deg); }
    60% { transform: rotate(1.5deg); }
    80% { transform: rotate(-.6deg); }
}

/* Logo nel menu e riga del server (bordo bianco come quando la selezioni in gioco) */
.nav-logo img { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.nav-logo:hover img { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
.mc-entry { transition: border-color .15s ease; }
.mc-entry:hover { border-color: #fff; }

/* Lucciole che salgono dal castello (create da effects.js) */
.firefly {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background: #ffd27a;
    box-shadow: 0 0 8px 2px rgba(255, 190, 90, 0.8);
    opacity: 0;
    animation: firefly var(--d, 9s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes firefly {
    0% { opacity: 0; transform: translate(0, 0); }
    20% { opacity: 1; }
    50% { transform: translate(var(--x, 20px), -70px); }
    80% { opacity: .8; }
    100% { opacity: 0; transform: translate(calc(var(--x, 20px) * -1), -140px); }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Inclinazione 3D con riflesso (effects.js) */
.tilt { transition: transform .3s ease-out; will-change: transform; }
.tilt-glare {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.2), transparent 55%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.tilt:hover .tilt-glare { opacity: 1; }

/* Esplosione "Copia IP" */
.burst { position: fixed; z-index: 1001; width: 0; height: 0; pointer-events: none; }
.burst-ember, .burst-bat { position: absolute; left: 0; top: 0; }
.burst-ember { box-shadow: 0 0 10px rgba(255, 140, 40, 0.9); }
.burst-bat { width: 30px; }
.burst-bat svg { width: 100%; height: auto; fill: #1a0f2e; filter: drop-shadow(0 0 4px rgba(255, 160, 80, 0.7)); animation: batFlap .14s ease-in-out infinite alternate; }

/* Transizione morbida tra le pagine (nei browser che la supportano) */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root) { animation: vtOut .3s ease both; }
::view-transition-new(root) { animation: vtIn .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vtOut { to { opacity: 0; transform: scale(.985); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root) { animation-name: fadeOut; }
    ::view-transition-new(root) { animation-name: fadeIn; }
}

/* ======================================================================
   Pezzi "da gioco" in più: terreno, nuvole, blocco da rompere,
   hotbar con barra XP, notifiche "Progresso fatto!"
   ====================================================================== */

/* Terreno pixel sotto il castello: la scena "poggia" su erba e terra */
.scene-hero { --ground: 32px; }
.scene::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--ground);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 8' shape-rendering='crispEdges'%3E%3Cpath fill='%2333552a' d='M0 0h1v1h-1zM1 0h1v1h-1zM7 0h1v1h-1zM16 0h1v1h-1zM19 0h1v1h-1zM21 0h1v1h-1zM23 0h1v1h-1zM24 0h1v1h-1zM1 1h1v1h-1zM2 1h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM12 1h1v1h-1zM13 1h1v1h-1zM16 1h1v1h-1zM30 1h1v1h-1zM2 2h1v1h-1zM11 2h1v1h-1zM20 2h1v1h-1zM25 2h1v1h-1z'/%3E%3Cpath fill='%233c6131' d='M2 0h1v1h-1zM4 0h1v1h-1zM10 0h1v1h-1zM13 0h1v1h-1zM14 0h1v1h-1zM27 0h1v1h-1zM29 0h1v1h-1zM30 0h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM21 1h1v1h-1zM22 1h1v1h-1zM23 1h1v1h-1zM29 1h1v1h-1zM31 1h1v1h-1zM15 2h1v1h-1zM19 2h1v1h-1zM27 2h1v1h-1z'/%3E%3Cpath fill='%23294320' d='M3 0h1v1h-1zM5 0h1v1h-1zM6 0h1v1h-1zM9 0h1v1h-1zM11 0h1v1h-1zM12 0h1v1h-1zM15 0h1v1h-1zM17 0h1v1h-1zM18 0h1v1h-1zM31 0h1v1h-1zM0 1h1v1h-1zM3 1h1v1h-1zM10 1h1v1h-1zM14 1h1v1h-1zM15 1h1v1h-1zM20 1h1v1h-1zM24 1h1v1h-1zM25 1h1v1h-1zM27 1h1v1h-1zM4 2h1v1h-1zM24 2h1v1h-1z'/%3E%3Cpath fill='%232c4a22' d='M8 0h1v1h-1zM20 0h1v1h-1zM22 0h1v1h-1zM25 0h1v1h-1zM26 0h1v1h-1zM28 0h1v1h-1zM9 1h1v1h-1zM11 1h1v1h-1zM17 1h1v1h-1zM18 1h1v1h-1zM19 1h1v1h-1zM26 1h1v1h-1zM28 1h1v1h-1zM5 2h1v1h-1zM26 2h1v1h-1zM28 2h1v1h-1zM31 2h1v1h-1z'/%3E%3Cpath fill='%232c1e16' d='M0 2h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM14 2h1v1h-1zM18 2h1v1h-1zM0 3h1v1h-1zM11 3h1v1h-1zM13 3h1v1h-1zM17 3h1v1h-1zM23 3h1v1h-1zM27 3h1v1h-1zM30 3h1v1h-1zM2 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM14 4h1v1h-1zM29 4h1v1h-1zM31 4h1v1h-1z'/%3E%3Cpath fill='%2333231a' d='M8 2h1v1h-1zM13 2h1v1h-1zM22 2h1v1h-1zM29 2h1v1h-1zM30 2h1v1h-1zM4 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM10 3h1v1h-1zM12 3h1v1h-1zM15 3h1v1h-1zM18 3h1v1h-1zM20 3h1v1h-1zM21 3h1v1h-1zM1 4h1v1h-1zM4 4h1v1h-1zM7 4h1v1h-1zM13 4h1v1h-1zM15 4h1v1h-1zM16 4h1v1h-1zM22 4h1v1h-1zM23 4h1v1h-1zM28 4h1v1h-1z'/%3E%3Cpath fill='%233a281c' d='M9 2h1v1h-1zM10 2h1v1h-1zM17 2h1v1h-1zM23 2h1v1h-1zM5 3h1v1h-1zM14 3h1v1h-1zM19 3h1v1h-1zM22 3h1v1h-1zM24 3h1v1h-1zM28 3h1v1h-1zM31 3h1v1h-1zM0 4h1v1h-1zM5 4h1v1h-1zM10 4h1v1h-1zM17 4h1v1h-1zM18 4h1v1h-1zM19 4h1v1h-1zM20 4h1v1h-1zM21 4h1v1h-1zM26 4h1v1h-1zM27 4h1v1h-1zM30 4h1v1h-1z'/%3E%3Cpath fill='%2340301f' d='M12 2h1v1h-1zM16 2h1v1h-1zM21 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM16 3h1v1h-1zM25 3h1v1h-1zM26 3h1v1h-1zM29 3h1v1h-1zM3 4h1v1h-1zM6 4h1v1h-1zM11 4h1v1h-1zM12 4h1v1h-1zM24 4h1v1h-1zM25 4h1v1h-1z'/%3E%3Cpath fill='%2322170f' d='M0 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM10 5h1v1h-1zM11 5h1v1h-1zM12 5h1v1h-1zM15 5h1v1h-1zM16 5h1v1h-1zM23 5h1v1h-1zM27 5h1v1h-1zM28 5h1v1h-1zM30 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM9 6h1v1h-1zM11 6h1v1h-1zM14 6h1v1h-1zM15 6h1v1h-1zM16 6h1v1h-1zM17 6h1v1h-1zM24 6h1v1h-1zM30 6h1v1h-1z'/%3E%3Cpath fill='%232a1c15' d='M1 5h1v1h-1zM4 5h1v1h-1zM13 5h1v1h-1zM17 5h1v1h-1zM18 5h1v1h-1zM19 5h1v1h-1zM20 5h1v1h-1zM22 5h1v1h-1zM25 5h1v1h-1zM29 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM18 6h1v1h-1zM21 6h1v1h-1zM26 6h1v1h-1zM28 6h1v1h-1zM29 6h1v1h-1z'/%3E%3Cpath fill='%231e140f' d='M2 5h1v1h-1zM8 5h1v1h-1zM9 5h1v1h-1zM14 5h1v1h-1zM21 5h1v1h-1zM24 5h1v1h-1zM26 5h1v1h-1zM31 5h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM13 6h1v1h-1zM19 6h1v1h-1zM20 6h1v1h-1zM22 6h1v1h-1zM23 6h1v1h-1zM25 6h1v1h-1zM27 6h1v1h-1zM31 6h1v1h-1z'/%3E%3Cpath fill='%23140d0b' d='M0 7h1v1h-1zM1 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM8 7h1v1h-1zM9 7h1v1h-1zM10 7h1v1h-1zM11 7h1v1h-1zM12 7h1v1h-1zM13 7h1v1h-1zM14 7h1v1h-1zM15 7h1v1h-1zM16 7h1v1h-1zM17 7h1v1h-1zM18 7h1v1h-1zM19 7h1v1h-1zM20 7h1v1h-1zM21 7h1v1h-1zM22 7h1v1h-1zM23 7h1v1h-1zM24 7h1v1h-1zM25 7h1v1h-1zM26 7h1v1h-1zM27 7h1v1h-1zM28 7h1v1h-1zM29 7h1v1h-1zM30 7h1v1h-1zM31 7h1v1h-1z'/%3E%3C/svg%3E") 0 0 / calc(var(--ground) * 4) var(--ground) repeat-x;
    image-rendering: pixelated;
}
.castle { bottom: calc(var(--ground) - 2px); }

/* Nuvole squadrate come in gioco (create da effects.js) */
.clouds { position: absolute; inset: 0 0 45% 0; pointer-events: none; }
.cloud {
    position: absolute;
    left: 0;
    background-size: 100% 100%;
    image-rendering: pixelated;
    opacity: .11;
    animation: cloudDrift var(--d, 120s) linear var(--delay, 0s) infinite;
}
@keyframes cloudDrift {
    from { transform: translateX(-420px); }
    to { transform: translateX(calc(100vw + 60px)); }
}

/* Riflesso "incantato" che passa sul titolo, come sugli oggetti incantati */
.hero-title { text-shadow: none; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6)); }
.split-title .word {
    background: linear-gradient(100deg, #f5eee3 0 40%, #d9c2ff 46%, #fff 50%, #d9c2ff 54%, #f5eee3 60% 100%) 100% 0 / 300% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation:
        wordIn 1s cubic-bezier(.2, .8, .2, 1) calc(.5s + var(--i, 0) * .1s) forwards,
        glint 8s linear calc(3.2s + var(--i, 0) * .12s) infinite;
}
@keyframes glint {
    0% { background-position: 100% 0; }
    16%, 100% { background-position: 0 0; }
}

/* ---------- Blocco d'erba da rompere (nella home, creato da effects.js) ---------- */
.drop {
    --s: clamp(78px, 7.4vw, 112px);
    position: absolute;
    z-index: 1;
    right: 31%;
    top: 38%;
    width: var(--s);
    height: var(--s);
    padding: 0;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='32' height='32' shape-rendering='crispEdges'%3E%3Cpath fill='%230d1b1a' d='M3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM2 2h1v1h-1zM9 2h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM10 3h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM11 4h1v1h-1zM7 5h1v1h-1zM9 5h1v1h-1zM10 5h1v1h-1zM12 5h1v1h-1zM6 6h1v1h-1zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1zM11 7h1v1h-1zM13 7h1v1h-1zM4 8h1v1h-1zM6 8h1v1h-1zM11 8h1v1h-1zM13 8h1v1h-1zM3 9h1v1h-1zM5 9h1v1h-1zM12 9h1v1h-1zM13 9h1v1h-1zM2 10h1v1h-1zM4 10h1v1h-1zM1 11h1v1h-1zM3 11h1v1h-1zM0 12h1v1h-1zM2 12h1v1h-1zM0 13h1v1h-1zM1 13h1v1h-1z'/%3E%3Cpath fill='%23c8fff5' d='M3 2h1v1h-1zM4 2h1v1h-1z'/%3E%3Cpath fill='%233fd3c6' d='M5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM10 4h1v1h-1zM11 5h1v1h-1zM11 6h1v1h-1zM12 7h1v1h-1zM12 8h1v1h-1z'/%3E%3Cpath fill='%238a5a2b' d='M8 5h1v1h-1zM7 6h1v1h-1zM6 7h1v1h-1zM5 8h1v1h-1zM4 9h1v1h-1zM3 10h1v1h-1zM2 11h1v1h-1zM1 12h1v1h-1z'/%3E%3C/svg%3E") 6 6, pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    animation: dropIn 1s cubic-bezier(.3, 1.5, .5, 1) 1.6s both;
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-60px) scale(.6); } }
.drop:focus-visible { outline-offset: 14px; }
/* bagliore dietro, così si vede sul cielo scuro */
.drop::before {
    content: '';
    position: absolute;
    inset: -60%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(190, 255, 150, 0.2), rgba(190, 255, 150, 0));
    animation: halo 3s ease-in-out infinite alternate;
    pointer-events: none;
}
.drop-bob { position: absolute; inset: 0; perspective: 700px; animation: dropBob 3s ease-in-out infinite; }
@keyframes dropBob { 50% { transform: translateY(-14px); } }
.drop-spin { display: block; width: 100%; height: 100%; transform-style: preserve-3d; animation: dropSpin 9s linear infinite; }
@keyframes dropSpin {
    from { transform: rotateX(-24deg) rotateY(0deg); }
    to { transform: rotateX(-24deg) rotateY(360deg); }
}
.drop:hover .drop-spin, .drop:focus-visible .drop-spin { animation-duration: 20s; }
.drop-hint {
    position: absolute;
    left: 50%;
    top: calc(100% + 26px);
    padding: .2rem .55rem .3rem;
    background: rgba(16, 0, 16, 0.94);
    border: 2px solid #3a0f8a;
    color: #fff;
    font-family: var(--font-pixel);
    font-size: .95rem;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: 2px 2px 0 #3f3f3f;
    translate: -50% 0;
    transition: opacity .2s ease;
    animation: hintBob 1.6s ease-in-out 2.6s infinite;
    pointer-events: none;
}
/* freccetta verso il blocco */
.drop-hint::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-bottom-color: #3a0f8a;
}
@keyframes hintBob { 50% { transform: translateY(-5px); } }
/* dopo il primo blocco rotto la scritta compare solo passandoci sopra */
.drop.known .drop-hint { opacity: 0; animation: none; }
.drop.known:hover .drop-hint, .drop.known:focus-visible .drop-hint { opacity: 1; }

/* Cubo 3D: 6 facce con texture pixel */
.cube { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.cube > i { position: absolute; inset: 0; background-size: 100% 100%; image-rendering: pixelated; backface-visibility: hidden; }
.cube-front { transform: translateZ(calc(var(--s) / 2)); }
.cube-back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube-right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube-left { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube-top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cube-bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.5); }
/* luce: la faccia che guarda verso di te è più chiara (segue la rotazione) */
.drop .cube-front, .drop .cube-back, .drop .cube-right, .drop .cube-left { animation: faceLight 9s linear infinite; }
.drop .cube-left { animation-delay: -6.75s; }
.drop .cube-back { animation-delay: -4.5s; }
.drop .cube-right { animation-delay: -2.25s; }
@keyframes faceLight {
    0%, 100% { filter: brightness(.95); }
    25%, 75% { filter: brightness(.62); }
    50% { filter: brightness(.5); }
}
.drop:hover .cube-front, .drop:hover .cube-back, .drop:hover .cube-right, .drop:hover .cube-left { animation-duration: 20s; }
.drop.hit .cube { animation: hitTap .1s ease; }
@keyframes hitTap { 50% { transform: scale(.93); } }
.drop.broken .cube { transform: scale(0); transition: transform .12s ease-in; }
.drop.broken::before { animation: none; opacity: 0; }

/* Cubo piccolo, fermo, come le icone dell'inventario */
.cube-icon { --s: 22px; display: block; width: var(--s); height: var(--s); }
.cube-icon .cube { transform: rotateX(-30deg) rotateY(45deg); transition: none; }
.cube-icon .cube-front { filter: brightness(.82); }
.cube-icon .cube-left { filter: brightness(.62); }
.cube-icon.flying { position: fixed; z-index: 1002; --s: 34px; margin: -17px 0 0 -17px; pointer-events: none; }

/* Pezzetti che volano quando rompi il blocco */
.burst-pixel { position: absolute; left: 0; top: 0; }

/* ---------- HUD: barra XP + hotbar con le sezioni della pagina ---------- */
.hud {
    position: fixed;
    left: 50%;
    bottom: 14px;
    z-index: 40;
    display: grid;
    gap: 5px;
    translate: -50% calc(100% + 30px);
    opacity: 0;
    transition: translate .5s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
    pointer-events: none;
}
.hud.on { translate: -50% 0; opacity: 1; }
.hud.on .hotbar { pointer-events: auto; }
.hud-name {
    justify-self: center;
    min-height: 1.3em;
    color: #fff;
    font-family: var(--font-pixel);
    font-size: 1.1rem;
    line-height: 1.3;
    text-shadow: 2px 2px 0 #3f3f3f;
    white-space: nowrap;
    opacity: 0;
}
.hud-name.show { animation: hudName 2.2s ease forwards; }
body.light-mode .hud-name { padding: 0 .5rem; background: rgba(0, 0, 0, 0.55); }
@keyframes hudName {
    0% { opacity: 0; transform: translateY(4px); }
    10%, 72% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}
.hud-xp { position: relative; height: 10px; margin: 0 4px; background: #262626; border: 2px solid #000; }
.hud-xp-fill { position: absolute; inset: 0; background: linear-gradient(180deg, #c3ff7d, #80e02c 55%, #4f9c18); transform: scaleX(0); transform-origin: 0 50%; }
.hud-xp::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 18 - 2px), #000 calc(100% / 18 - 2px) calc(100% / 18)); }
.hud-lvl {
    position: absolute;
    left: 50%;
    bottom: 2px;
    z-index: 1;
    translate: -50% 0;
    color: #80ff20;
    font-family: var(--font-pixel);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000;
}
.hotbar {
    display: flex;
    padding: 2px;
    background: rgba(18, 18, 22, 0.72);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 2px rgba(160, 160, 170, 0.5), 0 14px 30px -12px rgba(0, 0, 0, 0.8);
}
.hb-slot { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 9px; }
.hb-slot + .hb-slot { box-shadow: inset 2px 0 0 rgba(160, 160, 170, 0.35); }
a.hb-slot:hover { background: rgba(255, 255, 255, 0.12); }
.hb-slot.sel::before {
    content: '';
    position: absolute;
    inset: -5px;
    z-index: 1;
    border: 3px solid #f2f2f2;
    box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000;
    pointer-events: none;
}
.hb-slot .cube-icon { --s: 22px; }
.hb-count {
    position: absolute;
    right: 3px;
    bottom: 0;
    z-index: 2;
    color: #fff;
    font-family: var(--font-pixel);
    font-size: 1.05rem;
    line-height: 1;
    text-shadow: 2px 2px 0 #3f3f3f;
}
.hb-slot.got { animation: slotGot .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes slotGot { 40% { transform: scale(1.25); } }
/* con la hotbar visibile la barra sotto il menu non serve */
html.has-hud .scroll-progress { display: none; }

/* ---------- Notifica "Progresso fatto!" in alto a destra ---------- */
.adv-stack {
    position: fixed;
    top: calc(var(--nav-h) + 12px);
    right: 16px;
    z-index: 60;
    display: grid;
    gap: 8px;
    pointer-events: none;
}
.adv {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: min(320px, calc(100vw - 32px));
    padding: 9px 14px 10px 10px;
    background: #202020;
    border: 2px solid #000;
    border-radius: 4px;
    box-shadow: inset 0 0 0 2px #5a5a5a, 0 18px 34px -14px rgba(0, 0, 0, 0.8);
    color: #fff;
    font-family: var(--font-pixel);
    text-shadow: 2px 2px 0 #3f3f3f;
    animation: advIn .5s cubic-bezier(.2, .8, .2, 1) both;
}
.adv.out { animation: advOut .45s ease-in forwards; }
@keyframes advIn { from { transform: translateX(calc(100% + 30px)); } }
@keyframes advOut { to { transform: translateX(calc(100% + 30px)); } }
.adv-icon { display: grid; place-items: center; width: 40px; height: 40px; }
.adv-icon img { width: 34px; height: 34px; image-rendering: pixelated; }
.adv-icon .cube-icon { --s: 24px; }
.adv-kicker { display: block; color: var(--mc-yellow); font-size: 1rem; line-height: 1.25; }
.adv-title { display: block; font-size: 1.12rem; line-height: 1.25; }
.adv-extra { display: block; margin-top: 2px; color: #b8b8b8; font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }

/* Barra di scorrimento a tema */
html { scrollbar-color: #4a3d5e #0b0812; }

/* Bedrock in cima al footer: la pagina parte dall'erba e finisce qui */
.footer { position: relative; border-top: 0; padding-top: calc(clamp(3rem, 6vw, 4.5rem) + 16px); }
.footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 4' shape-rendering='crispEdges'%3E%3Cpath fill='%235b5b5b' d='M0 0h1v1h-1zM1 0h1v1h-1zM7 0h1v1h-1zM8 0h1v1h-1zM11 0h1v1h-1zM13 0h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM12 2h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM8 3h1v1h-1zM10 3h1v1h-1zM12 3h1v1h-1zM14 3h1v1h-1z'/%3E%3Cpath fill='%23262626' d='M2 0h1v1h-1zM4 0h1v1h-1zM6 0h1v1h-1zM15 0h1v1h-1zM1 2h1v1h-1zM5 2h1v1h-1zM9 2h1v1h-1zM10 2h1v1h-1zM14 2h1v1h-1zM15 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM5 3h1v1h-1z'/%3E%3Cpath fill='%233b3b3b' d='M3 0h1v1h-1zM1 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM11 1h1v1h-1zM14 1h1v1h-1zM7 2h1v1h-1zM11 2h1v1h-1zM13 2h1v1h-1zM4 3h1v1h-1z'/%3E%3Cpath fill='%237a7a7a' d='M5 0h1v1h-1zM12 0h1v1h-1zM14 0h1v1h-1zM13 1h1v1h-1zM15 1h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM8 2h1v1h-1zM2 3h1v1h-1zM13 3h1v1h-1z'/%3E%3Cpath fill='%23141414' d='M9 0h1v1h-1zM10 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM4 1h1v1h-1zM7 1h1v1h-1zM10 1h1v1h-1zM12 1h1v1h-1zM2 2h1v1h-1zM3 3h1v1h-1zM9 3h1v1h-1zM11 3h1v1h-1zM15 3h1v1h-1z'/%3E%3C/svg%3E") 0 0 / 64px 16px repeat-x;
    image-rendering: pixelated;
}

/* Bottone grigio come quelli dei menu di Minecraft */
.mc-btn {
    display: block;
    padding: .7rem 1rem .8rem;
    background: #6e6e6e linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.12));
    border: 2px solid #000;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -3px 0 rgba(0, 0, 0, 0.35);
    color: #fff;
    font-family: var(--font-pixel);
    font-size: 1.15rem;
    line-height: 1.2;
    text-align: center;
    text-shadow: 2px 2px 0 #3f3f3f;
}
.mc-btn:hover, .mc-btn:focus-visible { background-color: #7c80c0; border-color: #fff; color: #ffffa0; }

/* ---------- 404: la schermata "Sei morto!" ---------- */
.death {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 3rem 16px calc(var(--ground) + 130px);
}
.death::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(90, 0, 0, 0.42), rgba(170, 12, 12, 0.6));
    animation: fadeIn 1.2s ease both;
    pointer-events: none;
}
.death-screen {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1rem;
    color: #fff;
    font-family: var(--font-pixel);
    text-align: center;
    text-shadow: 3px 3px 0 #3f1515;
}
.death-title { font-size: clamp(2.6rem, 8vw, 5rem); font-weight: 700; line-height: 1.05; animation: deathIn .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes deathIn { from { opacity: 0; transform: scale(1.5); filter: blur(6px); } }
.death-msg { max-width: 34ch; font-size: clamp(1.1rem, 2.4vw, 1.4rem); line-height: 1.35; animation: fadeIn .8s ease .5s both; }
.death-score { font-size: 1.25rem; animation: fadeIn .8s ease .7s both; }
.death-num { color: var(--mc-yellow); }
/* come in gioco, i bottoni arrivano dopo un attimo */
.death-actions { display: grid; gap: .7rem; width: min(400px, 100%); margin-top: 1.4rem; animation: fadeIn .6s ease 1.4s both; }

/* Easter egg: il creeper che sale dal fondo dello schermo ed esplode */
.creeper {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 1001;
    width: 150px;
    height: 150px;
    margin-left: -75px;
    background-size: 100% 100%;
    image-rendering: pixelated;
    box-shadow: 0 0 0 4px #000;
    animation: creeperUp .8s cubic-bezier(.2, .8, .2, 1) both;
    pointer-events: none;
}
@keyframes creeperUp { from { transform: translateY(110%); } }
.creeper::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; }
.creeper.fuse::after { animation: fuse .32s steps(1) 5; }
@keyframes fuse { 50% { opacity: .75; } }
main.shake { animation: shake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
    10%, 90% { transform: translate(-2px, 1px); }
    20%, 80% { transform: translate(4px, -2px); }
    30%, 50%, 70% { transform: translate(-6px, 3px); }
    40%, 60% { transform: translate(6px, -3px); }
}
.adv-face { display: block; width: 32px; height: 32px; background-size: 100% 100%; image-rendering: pixelated; }

/* Scoreboard sopra lo screenshot, come la barra a destra in gioco */
.scoreboard {
    position: absolute;
    right: 14px;
    top: 50%;
    z-index: 3;
    min-width: 170px;
    translate: 0 -50%;
    color: #fff;
    font-family: var(--font-pixel);
    font-size: .98rem;
    line-height: 1.35;
    text-shadow: 2px 2px 0 #3f3f3f;
    pointer-events: none;
}
.sb-title { padding: .2rem .7rem; background: rgba(0, 0, 0, 0.55); color: var(--mc-yellow); font-weight: 700; text-align: center; }
.sb-lines { padding: .35rem .7rem .45rem; background: rgba(0, 0, 0, 0.38); }
.sb-lines b { font-weight: 500; }
.sb-gap { height: .7em; }
.sb-y, .sb-ip { color: var(--mc-yellow); }
.sb-g { color: var(--mc-green); }
.sb-r { color: var(--mc-red); }
html.fx [data-reveal="wipe"] .scoreboard { opacity: 0; translate: 30px -50%; transition: opacity .6s ease 1s, translate .6s cubic-bezier(.2, .8, .2, 1) 1s; }
html.fx [data-reveal="wipe"].in .scoreboard { opacity: 1; translate: 0 -50%; }

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width: 960px) {
    .smp, .join, .community, .rules-cols, .roles, .ticket, .careers-end { grid-template-columns: minmax(0, 1fr); }
    .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .hud { display: none; }
    /* sul telefono il blocco galleggia sopra il castello, sotto ai bottoni */
    .hero { padding-bottom: 250px; }
    .drop { --s: 62px; top: auto; bottom: calc(var(--ground) + 168px); right: 12%; }
    .drop-hint { top: auto; bottom: calc(100% + 22px); }
    .drop-hint::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: #3a0f8a; }
}
@media (max-width: 640px) {
    .scoreboard { right: 8px; min-width: 0; font-size: .8rem; }
    .sb-lines, .sb-title { padding-inline: .45rem; }
    .nav-logo img { height: 40px; }
    .moon { top: calc(var(--nav-h) + 12px); right: -26px; width: 130px; opacity: .9; }
    .hero { min-height: 0; padding-top: calc(var(--nav-h) + 110px); }
    .ipbar { flex-wrap: wrap; padding: .9rem; gap: .75rem; }
    .ipbar .btn, .hero-links .btn { width: 100%; }
    .splash { left: 66%; top: 70%; font-size: .95rem; }
    .staff-grid { grid-template-columns: minmax(0, 1fr); }
    .footer-grid { grid-template-columns: 1fr; }
    .help { flex-direction: column; align-items: flex-start; }
    .bat-2, .bat-3 { display: none; }
    .scene-hero { --ground: 24px; }
    .toast { grid-template-columns: 44px minmax(0, 1fr); gap: .8rem; padding: .8rem; }
    .toast .slot { width: 44px; height: 44px; padding: 7px; }
    .chat { font-size: 1.02rem; padding: 1rem; }
    .sign-chains { height: 40px; }
    .sign-board { transform-origin: 50% -40px; }
}

/* ======================================================================
   Movimento ridotto
   html.rm viene messo da boot.js quando il sistema chiede meno movimento
   (su Windows: "Effetti animazione" disattivati). Restano dissolvenze,
   luci e contatori; spariscono parallasse, voli, lampi e spostamenti.
   Con ?motion=full nell'indirizzo si vede comunque la versione completa.
   ====================================================================== */
html.rm { scroll-behavior: auto; }
html.rm .bat-track, html.rm .flash, html.rm .shooting-star, html.rm .burst-bat, html.rm .firefly { display: none; }
html.rm .slot:hover .px, html.rm .sign:hover .sign-board, html.rm .role-icon { animation: none; }
html.rm.fx .dc-mock .dc-msg { transform: none; }
html.rm .role-card:hover { translate: none; }
html.rm .nav-logo:hover img { transform: none; }
html.rm .rise,
html.rm .split-title .word { transform: none; filter: none; animation-name: fadeIn; }
html.rm .moon, html.rm .castle-far, html.rm .castle-near,
html.rm .castle-near use { animation-name: fadeIn; }
html.rm .fog, html.rm .dc-pumpkin, html.rm .staff-skin, html.rm .is-copied,
html.rm .dc-card, html.rm .social-row:hover .social-icon, html.rm .moon::before { animation: none; }
html.rm .hero-brand .splash { animation: fadeIn .6s ease 1.5s both; }
html.rm.fx [data-reveal] { transform: none; filter: none; }
html.rm.fx [data-reveal="wipe"] { opacity: 0; }
html.rm.fx [data-reveal="wipe"].in { opacity: 1; }
html.rm.fx [data-reveal="wipe"] .shot { clip-path: none; }
html.rm.fx [data-reveal="wipe"] img,
html.rm.fx [data-reveal="swing"] .sign-board { transform: none; }
html.rm.fx [data-reveal="swing"].in .sign-board { animation: none; }
html.rm.fx .fact.in .slot,
html.rm.fx .rule-item.in .slot,
html.rm.fx .toast.in .slot { animation-name: fadeIn; }
html.rm.fx .chat .chat-line { transform: none; }
html.rm .dc-card:hover .dc-pumpkin, html.rm .staff-card:hover .staff-skin { translate: none; rotate: none; }
/* nuvole ferme dove sono, blocco fermo di tre quarti (si può rompere lo stesso) */
html.rm .cloud { animation-play-state: paused; }
html.rm .drop, html.rm .drop::before, html.rm .drop-bob, html.rm .drop .cube > i { animation: none; }
html.rm .drop-spin { animation: none; transform: rotateX(-24deg) rotateY(40deg); }
html.rm .drop .cube-front { filter: brightness(.85); }
html.rm .drop .cube-left { filter: brightness(.62); }
html.rm .drop.hit .cube { animation: none; }
html.rm .hud { translate: -50% 0; transition: opacity .3s ease; }
html.rm .adv { animation-name: fadeIn; }
html.rm .adv.out { animation-name: fadeOut; }
html.rm .hb-slot.got { animation: none; }
html.rm .death-title { animation-name: fadeIn; }
html.rm .creeper { animation-name: fadeIn; }
html.rm .drop-hint { animation: none; }
html.rm.fx [data-reveal="wipe"] .scoreboard { translate: 0 -50%; }