/* MR Halloween – mini sito (mobile-first, nessun framework)
   Font ospitati in locale (niente richieste a Google al caricamento): Lilita One, Fredoka, Nunito – licenze in fonts/ */

@font-face { font-family: "Lilita One"; src: url("../fonts/LilitaOne-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("../fonts/Fredoka-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito-latin.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

:root {
  --bg: #12082a;
  --bg-2: #1b0d3c;
  --surface: #241148;
  --surface-2: #2e1660;
  --line: rgba(255, 255, 255, .10);
  --text: #f7f3ff;
  --muted: #cdc2ea;
  --orange: #ff8a1f;
  --orange-2: #ffb347;
  --orange-ink: #1a0b33;
  --purple: #7c4dff;
  --ghost: #ffffff;
  --navy: #141b3d;
  --focus: #ffd166;
  --easy: #ffb347;
  --normal: #4d8dff;
  --hard: #ff5d8f;
  --radius: 18px;
  --radius-sm: 12px;
  --font-title: "Lilita One", "Fredoka", system-ui, sans-serif;
  --font-head: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --gutter: 16px;
  --maxw: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(124, 77, 255, .22), transparent 60%),
    radial-gradient(900px 500px at 100% 30%, rgba(255, 138, 31, .10), transparent 60%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}
:lang(zh-Hans) body, html:lang(zh-Hans) body { font-family: var(--font-body), var(--cjk); }
html:lang(zh-Hans) .h2, html:lang(zh-Hans) .h3, html:lang(zh-Hans) .btn, html:lang(zh-Hans) .badge { font-family: var(--cjk); font-weight: 700; letter-spacing: 0; }

img, svg { display: block; max-width: 100%; }
a { color: var(--orange-2); }
a:hover { color: #ffd08a; }

/* Focus ben visibile */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.ico { width: 1.25em; height: 1.25em; flex: none; }
.ico--lg { width: 1.9rem; height: 1.9rem; }
.ico--xl { width: 2.6rem; height: 2.6rem; }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--orange); color: var(--orange-ink); font-weight: 800;
  padding: .6rem 1rem; border-radius: 10px; text-decoration: none;
}
.skip:focus { top: 8px; }

/* ---------- Barra in alto con le bandiere ---------- */
.topbar { background: rgba(18, 8, 42, .92); border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.topbar__in { max-width: var(--maxw); margin: 0 auto; padding: 10px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.brand__icon { width: 34px; height: 34px; }
.brand__name { font-family: var(--font-title); font-size: 1.35rem; letter-spacing: .5px; line-height: 1; }
.langs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.flag {
  appearance: none; border: 2px solid transparent; background: transparent; color: var(--muted);
  min-width: 48px; min-height: 48px; padding: 5px 4px 3px; border-radius: 12px; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: 800 .7rem/1 var(--font-body); letter-spacing: .5px;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.flag:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.flag[aria-pressed="true"] { border-color: var(--orange); background: rgba(255, 138, 31, .12); color: var(--text); }
.flag:active { transform: scale(.95); }
.flag__img { height: 20px; width: 30px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.flag__img--uk { width: 40px; }
.flag__img--de { width: 33.3px; }
.flag__code { font-family: var(--font-body), var(--cjk); }

@media (min-width: 760px) {
  .topbar__in { justify-content: space-between; }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__media { display: block; position: relative; }
.hero__media img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 30%; max-height: 88svh; }
.hero__media::after { /* sfuma il fondo dell'immagine nel colore della pagina */
  content: ""; position: absolute; inset: auto 0 0 0; height: 32%;
  background: linear-gradient(to bottom, rgba(18, 8, 42, 0), var(--bg));
  pointer-events: none;
}
.hero__brand { position: absolute; top: 0; left: 0; right: 0; padding: clamp(18px, 7vw, 48px) var(--gutter) 0; text-align: center; }
.hero__kicker {
  display: inline-block; margin: 0 0 .4rem; padding: .25rem .8rem; border-radius: 999px;
  background: rgba(18, 8, 42, .55); border: 1px solid rgba(255, 255, 255, .18);
  font: 700 .9rem/1.3 var(--font-head); color: #fff; letter-spacing: .3px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.hero__title { margin: 0; line-height: 0; }
.hero__title img { width: min(92vw, 640px); height: auto; margin: 0 auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.hero__body { position: relative; z-index: 1; margin-top: -14%; padding: 0 var(--gutter) 2.5rem; text-align: center; }
.hero__subtitle { margin: 0 auto 1.1rem; max-width: 34rem; font: 600 clamp(1.15rem, 4.6vw, 1.5rem)/1.35 var(--font-head); text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hero__platforms { margin: 1rem 0 0; color: var(--muted); font-size: .95rem; }

@media (min-width: 700px) {
  .hero { min-height: clamp(540px, 46vw, 860px); display: flex; align-items: center; justify-content: center; }
  .hero__media { position: absolute; inset: 0; z-index: -1; }
  .hero__media img { height: 100%; max-height: none; aspect-ratio: auto; object-position: 50% 50%; }
  .hero__media::before { /* alone scuro al centro per leggere bene i testi */
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(ellipse 36% 52% at 50% 50%, rgba(18, 8, 42, .62), rgba(18, 8, 42, 0) 100%);
  }
  .hero__media::after { height: 22%; z-index: 1; }
  .hero__inner { position: relative; z-index: 1; padding: 3rem var(--gutter) 4rem; max-width: 46rem; }
  .hero__brand { position: static; padding: 0; }
  .hero__title img { width: min(44vw, 620px); }
  .hero__body { margin-top: .6rem; padding: 0; }
  .hero__subtitle { max-width: 30rem; }
}

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .7rem 1.35rem; border-radius: 999px; border: 2px solid transparent;
  font: 700 1.05rem/1.1 var(--font-head); text-decoration: none; cursor: pointer;
  transition: transform .15s, background-color .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn--primary { background: linear-gradient(180deg, #ffb347, var(--orange)); color: var(--orange-ink); box-shadow: 0 6px 0 #b4530a, 0 10px 24px rgba(255, 138, 31, .35); }
.btn--primary:hover { color: var(--orange-ink); background: linear-gradient(180deg, #ffc56b, #ff9a3a); }
.btn--ghost { background: rgba(18, 8, 42, .55); color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* ---------- Sezioni ---------- */
.section { padding: clamp(3rem, 8vw, 5.5rem) 0; position: relative; }
.section + .section { border-top: 1px solid var(--line); }
.h2 { font: 700 clamp(1.7rem, 6vw, 2.5rem)/1.15 var(--font-head); margin: 0 0 .8rem; letter-spacing: .2px; }
.h2::after { content: ""; display: block; width: 64px; height: 5px; margin-top: .6rem; border-radius: 5px; background: linear-gradient(90deg, var(--orange), var(--purple)); }
.h3 { font: 700 1.3rem/1.25 var(--font-head); margin: 0 0 .5rem; }
.lead { max-width: 46rem; color: var(--muted); font-size: 1.1rem; margin: 0 0 1.4rem; }

.about .lead { color: var(--text); }
.badges { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font: 600 1rem/1.2 var(--font-head);
}
.badge .ico { color: var(--orange); }

/* fantasmini decorativi */
.float { position: absolute; width: 70px; height: 74px; opacity: .9; pointer-events: none; animation: bob 4.5s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(124, 77, 255, .45)); }
.float--a { right: var(--gutter); top: -1.5rem; }
.float--b { right: var(--gutter); top: -1rem; width: 58px; height: 62px; animation-delay: -2s; }
@media (max-width: 520px) { .float { width: 50px; height: 54px; top: -2.2rem; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .float, .level__dots--cycle i { animation: none !important; } }

/* lingue */
.langlist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.langlist li {
  display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); font: 600 1.05rem/1.2 var(--font-head);
}
.langlist li[lang="zh-Hans"] { font-family: var(--cjk); }
.langlist__flag { width: 36px; height: 24px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); flex: none; }
.langlist__flag--uk { width: 48px; }
.langlist__flag--de { width: 40px; }
@media (min-width: 760px) { .langlist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* come si gioca */
.cards { display: grid; gap: 14px; margin-top: 1rem; }
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.3rem; }
.card p { margin: 0 0 .8rem; }
.card__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 138, 31, .14); color: var(--orange); margin-bottom: .9rem; }
.card__devices { color: var(--orange-2); font-weight: 800; font-size: .95rem; margin: 0 !important; }
.score-note { margin: 1.2rem 0 0; padding: .9rem 1.1rem; border-radius: var(--radius-sm); background: rgba(124, 77, 255, .14); border: 1px dashed rgba(124, 77, 255, .5); }

.levels__title { margin-top: 2.2rem; }
.levels { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .levels { grid-template-columns: repeat(3, 1fr); } }
.level { display: grid; gap: .3rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--lv); }
.level--easy { --lv: var(--easy); }
.level--normal { --lv: var(--normal); }
.level--hard { --lv: var(--hard); }
.level__name { font: 700 1.2rem/1.2 var(--font-head); color: var(--lv); }
.level__dots { display: flex; gap: 5px; }
.level__dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.level__dots--cycle i { animation: pulse 3s ease-in-out infinite; }
.level__dots--cycle i:nth-child(2) { animation-delay: .6s; } .level__dots--cycle i:nth-child(3) { animation-delay: 1.2s; }
.level__dots--cycle i:nth-child(4) { animation-delay: 1.8s; } .level__dots--cycle i:nth-child(5) { animation-delay: 2.4s; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.35); } 20% { transform: scale(1); } }

.safety { margin-top: 2rem; display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.3rem; border-radius: var(--radius); background: rgba(255, 209, 102, .09); border: 2px solid rgba(255, 209, 102, .45); }
.safety__ico { color: var(--focus); }
.safety p { margin: 0; }

/* video 16:9 */
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.video__placeholder:hover .video__play, .video__placeholder:focus-visible .video__play { transform: scale(1.08); }
.video__placeholder:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.video__text { display: block; }
.video__placeholder img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.55) blur(1px); }
.video__overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .8rem; text-align: center; padding: 1rem; }
.video__play { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 138, 31, .92); color: var(--orange-ink); box-shadow: 0 0 0 10px rgba(255, 138, 31, .25); }
.video__play svg { margin-left: 5px; }
.video__text { margin: 0; font: 700 clamp(1.1rem, 4vw, 1.5rem)/1.2 var(--font-head); text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }

/* ---------- Classifica: stile per l'HTML di board_html.php ---------- */
.board-slot { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; }
.board-slot :has(> .mrh-board) { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; grid-column: 1 / -1; }
.board-status { grid-column: 1 / -1; margin: 0; padding: 1.2rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); text-align: center; color: var(--muted); }
.board-status--error { color: var(--text); border-color: rgba(255, 93, 143, .55); background: rgba(255, 93, 143, .10); }
.mrh-board { --lv: var(--orange); background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--lv); border-radius: var(--radius); padding: 1rem 1rem 1.1rem; min-width: 0; overflow: hidden; }
.mrh-board--easy { --lv: var(--easy); }
.mrh-board--normal { --lv: var(--normal); }
.mrh-board--hard { --lv: var(--hard); }
.mrh-board__title { font: 700 1.25rem/1.2 var(--font-head); color: var(--lv); margin: 0 0 .7rem; }
html:lang(zh-Hans) .mrh-board__title { font-family: var(--cjk); }
.mrh-board p { margin: .4rem 0; color: var(--muted); font-size: .95rem; }
/* tabella vera */
table.mrh-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; table-layout: auto; }
table.mrh-table caption { text-align: left; color: var(--muted); font-size: .9rem; padding-bottom: .4rem; }
table.mrh-table th { text-align: left; font: 700 .78rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: .35rem .4rem; border-bottom: 1px solid var(--line); }
table.mrh-table td { padding: .45rem .4rem; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: middle; }
table.mrh-table tr:last-child td { border-bottom: 0; }
/* lista o div al posto della tabella */
.mrh-table:not(table) { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.mrh-table:not(table) .mrh-row { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; grid-template-areas: "rank nick score" "rank date date"; align-items: center; column-gap: .6rem; padding: .45rem .5rem; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.mrh-table:not(table) .mrh-rank { grid-area: rank; }
.mrh-table:not(table) .mrh-nick { grid-area: nick; }
.mrh-table:not(table) .mrh-score { grid-area: score; }
.mrh-table:not(table) .mrh-date { grid-area: date; }
.mrh-row:nth-child(even) { background: rgba(255, 255, 255, .03); }
.mrh-rank { font: 800 1rem/1 var(--font-head); color: var(--lv, var(--orange)); width: 2.2em; text-align: center; }
.mrh-nick { font-weight: 700; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.mrh-score { font: 800 1.05rem/1 var(--font-head); color: #fff; text-align: right; white-space: nowrap; }
.mrh-date { color: var(--muted); font-size: .8rem; white-space: nowrap; }
table.mrh-table .mrh-date { text-align: right; }
@media (max-width: 380px) { table.mrh-table .mrh-date, table.mrh-table th.mrh-date { display: none; } }

/* ---------- Store ---------- */
.stores { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .stores { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .stores { grid-template-columns: repeat(3, 1fr); } }
.store {
  display: flex; align-items: center; gap: .9rem; min-height: 68px; padding: .8rem 1.1rem; border-radius: 16px;
  background: #0b0518; color: #fff; text-decoration: none; border: 2px solid rgba(255, 255, 255, .22);
  transition: border-color .15s, transform .15s, background-color .15s;
}
.store:hover { color: #fff; border-color: var(--orange); background: #160a2e; transform: translateY(-2px); }
.store .ico { color: var(--orange); }
.store__txt { display: grid; line-height: 1.15; }
.store__txt small { font: 600 .8rem/1.2 var(--font-body); color: var(--muted); }
html:lang(zh-Hans) .store__txt small { font-family: var(--cjk); }
.store__txt b { font: 700 1.2rem/1.2 var(--font-head); }
.store--later { border-style: dashed; }
.store--later .ico { color: var(--muted); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: #0d0620; padding: 2rem 0 2.5rem; }
.footer__in { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.footer__madvf { display: inline-flex; align-items: center; gap: .8rem; color: var(--text); text-decoration: none; }
.footer__madvf img { width: 56px; height: 56px; border-radius: 50%; }
.footer__madvf small { display: block; color: var(--muted); font-size: .85rem; }
.footer__madvf b { font: 700 1.3rem/1 var(--font-head); }
.footer__links a { color: var(--muted); text-underline-offset: 3px; }
.footer__links a:hover { color: #fff; }
.footer__copy { margin: 0; color: var(--muted); font-size: .9rem; }
@media (min-width: 760px) { .footer__in { grid-template-columns: auto 1fr auto; text-align: left; justify-items: start; align-items: center; } .footer__links { justify-self: center; } }

/* ---------- Popup "Coming soon" ---------- */
.modal { border: 0; padding: 48px 0 0; overflow: visible; background: transparent; color: var(--text); max-width: min(92vw, 420px); width: 100%; }
.modal::backdrop { background: rgba(8, 3, 20, .75); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal[open] { animation: pop .22s ease-out; }
.modal.is-fallback { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 1000; box-shadow: 0 0 0 100vmax rgba(8, 3, 20, .75); }
.modal__box { position: relative; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 2px solid rgba(255, 138, 31, .55); border-radius: 22px; padding: 3.2rem 1.5rem 1.5rem; text-align: center; }
.modal__ghost { position: absolute; left: 50%; top: -44px; width: 84px; height: 88px; transform: translateX(-50%); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.modal .h2::after { margin-left: auto; margin-right: auto; }
.modal p { margin: 0 0 1.3rem; font-size: 1.1rem; }
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } .btn, .store, .flag { transition: none; } }