/* RPMH S.r.l. - stile del sito. Grafica in pixel art originale, unità di pixel 3px. */

@font-face {
  font-family: "DotGothic16";
  src: url("fonts/dotgothic16.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("fonts/pixelify-sans.woff2") format("woff2-variations"), url("fonts/pixelify-sans.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Silkscreen";
  src: url("fonts/silkscreen.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --night: #0a0d2a;
  --night-2: #0f1338;
  --ink: #06091c;
  --line: #f2f5ff;
  --text: #ffffff;
  --text-2: #c9d6ff;
  --gold: #ffd76a;
  --f-body: "DotGothic16", "MS Gothic", ui-monospace, monospace;
  --f-head: "Pixelify Sans", "DotGothic16", ui-monospace, monospace;
  --f-label: "Silkscreen", "Pixelify Sans", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --win-bg: linear-gradient(180deg, #3264d9 0 11%, #2d5bd0 11% 23%, #2852c3 23% 35%, #2349b5 35% 48%, #1e40a6 48% 61%, #1a3797 61% 74%, #162e87 74% 87%, #122678 87% 100%);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--text);
  font-family: var(--f-body); font-size: 18px; line-height: 1.7;
  -webkit-font-smoothing: none;
}
img, canvas { max-width: 100%; }
a { color: var(--gold); text-decoration-style: dotted; text-underline-offset: 4px; }
a:hover { color: #fff1b8; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 700; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.px { display: inline-block; flex: none; background-repeat: no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- il percorso ---------- */
body.gioco { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; touch-action: none; background: #0a0c2e; }
#mondo { position: fixed; left: 0; top: 0; display: block; max-width: none; image-rendering: pixelated; image-rendering: crisp-edges; cursor: pointer; touch-action: none; }
#mondo:focus-visible { outline: none; }

.hud { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 10; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px var(--gutter); pointer-events: none; }
.hud a, .hud button { pointer-events: auto; }
.hud-sx { display: flex; flex-direction: column; gap: 6px; }
.hud-logo { display: block; width: 168px; height: 51px; }
.hud-logo img { display: block; width: 168px; height: 51px; image-rendering: pixelated; }
.metri { font-family: var(--f-label); font-size: 13px; letter-spacing: 0.08em; color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.hud-dx { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.hud-btns { display: flex; gap: 10px; }
.trofei { display: grid; grid-template-columns: repeat(8, 24px); gap: 4px; margin: 0; padding: 6px; list-style: none; background: rgba(6, 9, 28, 0.8); box-shadow: 0 0 0 3px var(--ink); }
.trofei li { width: 24px; height: 24px; background: url("px/icone.png") no-repeat; background-size: 456px 24px; image-rendering: pixelated; filter: grayscale(1) brightness(0.9); opacity: 0.35; }
.trofei li.on { filter: none; opacity: 1; }
.hud-btn { position: relative; width: 44px; height: 44px; padding: 0; border: 3px solid var(--line); background: var(--night-2); box-shadow: 0 0 0 3px var(--ink); cursor: pointer; }
.hud-btn::before { content: ""; position: absolute; left: 7px; top: 7px; width: 24px; height: 24px; background: url("px/icone.png") no-repeat; background-size: 456px 24px; image-rendering: pixelated; }
.hud-btn:hover { background: #1c2c78; }
.i-suono::before { background-position: 0 0; }
.i-muto::before { background-position: -24px 0; }
.i-auto::before { background-position: -48px 0; }
.i-pausa::before { background-position: -72px 0; }
.trofei .t-fuochi { background-position: -288px 0; }
.trofei .t-mantello { background-position: -312px 0; }
.trofei .t-stella { background-position: -240px 0; }
.trofei .t-gatto { background-position: -336px 0; }
.trofei .t-cubo { background-position: -96px 0; }
.trofei .t-piuma { background-position: -360px 0; }
.trofei .t-tempo { background-position: -384px 0; }
.trofei .t-lettera { background-position: -408px 0; }

.aiuto { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); z-index: 10; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 10px 14px; background: rgba(6, 9, 28, 0.72); box-shadow: 0 0 0 3px var(--ink); pointer-events: none; animation: lampeggia 1.2s steps(1) infinite; }
.aiuto .px { image-rendering: pixelated; }
.p-tasti { width: 57px; height: 27px; background-image: url("px/tasti.png"); background-size: 57px 27px; }
.p-mouse { width: 27px; height: 30px; background-image: url("px/mouse.png"); background-size: 27px 30px; }
.p-mano { width: 24px; height: 24px; background-image: url("px/icone.png"); background-size: 456px 24px; background-position: -432px 0; }
@keyframes lampeggia { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0.35; } }
@media (hover: none) { .p-tasti, .p-mouse { display: none; } }
@media (hover: hover) { .p-mano { display: none; } }

.legale { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 6px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 7px); background: rgba(6, 9, 28, 0.84); border-top: 3px solid var(--ink); font-size: 12px; line-height: 1.6; color: var(--text-2); text-align: center; }
.legale strong { font-weight: 400; color: #fff; }
.legale a { color: var(--gold); }

.nojs { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: #0a0c2e; text-align: center; }
.nojs img { width: min(100%, 900px); image-rendering: pixelated; }

@media (max-width: 640px) {
  .hud { padding: 10px 12px; }
  .hud-logo, .hud-logo img { width: 112px; height: 34px; }
  .hud-dx { flex-direction: column-reverse; align-items: flex-end; gap: 10px; }
  .hud-btns { display: flex; gap: 8px; }
  .trofei { grid-template-columns: repeat(8, 16px); gap: 4px; padding: 5px; }
  .trofei li { width: 16px; height: 16px; background-size: 304px 16px; }
  .trofei .t-fuochi { background-position: -192px 0; } .trofei .t-mantello { background-position: -208px 0; } .trofei .t-stella { background-position: -160px 0; } .trofei .t-gatto { background-position: -224px 0; }
  .trofei .t-cubo { background-position: -64px 0; } .trofei .t-piuma { background-position: -240px 0; } .trofei .t-tempo { background-position: -256px 0; } .trofei .t-lettera { background-position: -272px 0; }
  .hud-btn { width: 40px; height: 40px; }
  .hud-btn::before { left: 5px; top: 5px; }
  .legale { font-size: 11px; line-height: 1.5; }
}

/* ---------- pagine di testo (privacy, 404) ---------- */
.win {
  position: relative;
  border: 9px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%2306091c' d='M1 0h6v1H1zM0 1h1v6H0zM7 1h1v6H7zM1 7h6v1H1z'/%3E%3Cpath fill='%23f2f5ff' d='M1 1h6v1H1zM1 2h1v4H1zM6 2h1v4H6zM1 6h6v1H1z'/%3E%3Cpath fill='%239fb0e6' d='M2 2h4v1H2zM2 3h1v2H2zM5 3h1v2H5zM2 5h4v1H2z'/%3E%3C/svg%3E") 3 / 9px / 0 stretch;
  background: var(--win-bg); background-clip: padding-box;
  padding: 18px 22px; text-shadow: 2px 2px 0 var(--ink);
}
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 8px 14px; background: var(--gold); color: var(--ink); font-family: var(--f-head); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(1100px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--night-2); border-bottom: 3px solid var(--line); box-shadow: 0 3px 0 var(--ink); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 60px; }
.bar-brand { display: inline-flex; align-items: center; min-height: 44px; }
.bar-brand img { width: 112px; height: 34px; image-rendering: pixelated; }
.bar-link { font-family: var(--f-head); font-weight: 600; font-size: 17px; color: var(--text); text-decoration: none; text-shadow: 2px 2px 0 var(--ink); }
.bar-link:hover { color: var(--gold); }
.label { font-family: var(--f-label); font-size: 12px; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
body.testo { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page-main { flex: 1 0 auto; }
.page-main > .wrap { padding-block: 48px 64px; }
.doc { max-width: 900px; display: flex; flex-direction: column; gap: 14px; padding: 26px 30px 30px; background: linear-gradient(180deg, #3264d9 0 90px, #2c5acf 90px 180px, #2750c2 180px 270px, #2248b5 270px); background-clip: padding-box; }
.doc h1 { font-family: var(--f-head); font-size: clamp(28px, 2vw + 20px, 40px); line-height: 1.15; }
.doc h2 { font-family: var(--f-head); font-size: 23px; margin-top: 18px; color: var(--gold); }
.doc ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.doc strong { font-weight: 400; color: var(--gold); }
.lost { max-width: 640px; display: flex; flex-direction: column; gap: 14px; }
.lost h1 { font-family: var(--f-head); font-size: 34px; line-height: 1.2; }
.btn { display: inline-flex; align-items: center; align-self: flex-start; min-height: 46px; padding: 6px 16px; background: var(--night-2); color: var(--text); border: 3px solid var(--line); box-shadow: 0 0 0 3px var(--ink), inset -3px -3px 0 #26306c; font-family: var(--f-head); font-weight: 700; font-size: 18px; text-decoration: none; text-shadow: 2px 2px 0 var(--ink); }
.btn:hover { background: #1c2c78; color: var(--gold); }
.foot { border-top: 3px solid var(--ink); background: var(--night-2); }
.foot > .wrap { padding-block: 18px calc(env(safe-area-inset-bottom, 0px) + 22px); }
.legal { font-size: 15px; line-height: 1.75; color: var(--text-2); }
.legal strong { color: var(--text); font-weight: 400; }
@media (max-width: 640px) { body { font-size: 17px; } .doc { padding: 18px 16px 22px; } .win { padding: 14px; } }