:root {
  --navy: #020617; --deep: #04102e; --blue: #1d6bff; --sky: #3b82f6; --cyan: #5ee7ff; --orange: #ff8a1f; --yellow: #ffd23f; --red: #ff3b3b; --violet: #a78bfa;
  --ink: #eaf2ff; --muted: #9fb3d9; --glass: rgba(4, 16, 46, .72); --line: rgba(94, 231, 255, .22);
  --f-logo: 'Luckiest Guy', system-ui, sans-serif; --f-pix: 'Press Start 2P', ui-monospace, monospace; --f-body: 'Outfit', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--navy); color: var(--ink); font-family: var(--f-body); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }
body.retro #game { image-rendering: pixelated; }
.crt { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .6s;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px), radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55)); }
body.retro .crt { opacity: 1; }
#flash { position: fixed; inset: 0; z-index: 40; pointer-events: none; background: radial-gradient(circle, #fff 0%, var(--cyan) 40%, var(--blue) 100%); opacity: 0; }
kbd { font-family: var(--f-pix); font-size: .58rem; padding: .25em .5em; border: 1px solid var(--line); border-radius: 4px; background: rgba(94,231,255,.08); color: var(--cyan); }
.screen { position: fixed; inset: 0; z-index: 20; }

/* ---------- boot ---------- */
#boot { display: grid; place-items: center; align-content: center; gap: 2.4rem; background: radial-gradient(60% 50% at 50% 45%, #061a55 0%, #010410 70%); }
.boot__logo { font-family: var(--f-logo); font-size: clamp(5rem, 14vw, 9rem); line-height: 1; display: flex; letter-spacing: -.02em; color: #e9fbff;
  text-shadow: 0 0 12px var(--cyan), 0 0 38px var(--blue), 0 0 90px var(--blue); animation: hum 2.2s ease-in-out infinite; }
.boot__logo span:last-child { color: var(--orange); text-shadow: 0 0 12px var(--orange), 0 0 40px #ff5a00; transform: translateY(.08em) rotate(6deg); }
@keyframes hum { 50% { filter: brightness(1.25); } }
.boot__pill { font-family: var(--f-pix); font-size: .75rem; padding: .9em 1.4em; border-radius: 999px; border: 1px solid var(--line); background: rgba(10,40,90,.5); box-shadow: 0 0 20px rgba(29,107,255,.35) inset; }
.boot__tip { position: fixed; bottom: 28px; left: 0; right: 0; text-align: center; font-size: .8rem; color: var(--muted); }

/* ---------- title ---------- */
#title { display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 45%, rgba(2,6,23,.15), rgba(2,6,23,.72)); }
.title__inner { text-align: center; padding: 0 16px; display: flex; flex-direction: column; align-items: center; }
.title__pre { font-family: var(--f-pix); font-size: clamp(.5rem, 1.1vw, .7rem); color: var(--cyan); letter-spacing: .1em; text-shadow: 0 0 10px var(--blue); }
.logo { font-family: var(--f-logo); font-weight: 400; line-height: .86; margin: 1.2rem 0 1.4rem; display: flex; flex-direction: column; align-items: center; transform: rotate(-3deg); }
.logo span { display: block; background: linear-gradient(180deg, #fff6a8 0%, var(--yellow) 30%, var(--orange) 62%, #e0430f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .045em #071a4d; paint-order: stroke fill; filter: drop-shadow(0 .06em 0 #071a4d) drop-shadow(0 .12em 0 #0b2d7a) drop-shadow(0 0 .35em rgba(29,107,255,.8)); }
.logo__a { font-size: clamp(3.2rem, 10vw, 8.4rem); letter-spacing: .02em; }
.logo__b { font-size: clamp(2.4rem, 7.6vw, 6.4rem); transform: translateX(.35em) rotate(2deg); }
.title__tag { max-width: 46ch; font-size: clamp(1rem, 1.5vw, 1.2rem); color: #cfe0ff; line-height: 1.5; text-shadow: 0 2px 10px #000; }
.title__tag b { color: var(--yellow); }
.menu { list-style: none; margin-top: 2rem; display: flex; flex-direction: column; gap: .45rem; }
.menu button { font-family: var(--f-logo); font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: .03em; color: #8fb0e8; padding: .15em .8em; position: relative; transition: color .15s, transform .15s; text-shadow: 0 3px 0 #061440; }
.menu button.is-sel { color: #fff; transform: scale(1.08); text-shadow: 0 3px 0 #061440, 0 0 18px var(--blue); }
.menu button.is-sel::before { content: '▶'; position: absolute; left: -.6em; top: .12em; font-size: .7em; color: var(--orange); animation: blink .6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.press { font-family: var(--f-pix); font-size: .62rem; color: var(--yellow); margin-top: 1.6rem; animation: blink 1.1s steps(2) infinite; }
.title__foot { position: fixed; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 1.6rem; flex-wrap: wrap; font-size: .75rem; color: var(--muted); }
.snd-toggle { font-family: var(--f-pix); font-size: .55rem; color: var(--cyan); }

/* ---------- story ---------- */
#story { pointer-events: none; }
#story button { pointer-events: auto; }
.story__box { position: absolute; left: clamp(16px, 7vw, 120px); bottom: clamp(90px, 16vh, 170px); max-width: 560px; }
.story__k { font-family: var(--f-pix); font-size: .62rem; color: var(--cyan); letter-spacing: .08em; text-shadow: 0 0 10px var(--blue); }
.story__t { font-family: var(--f-logo); font-weight: 400; font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: .95; margin: .9rem 0 1rem; color: #fff; text-shadow: 0 4px 0 #061440, 0 0 30px rgba(29,107,255,.8); }
.story__b { font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.55; color: #d3e2ff; max-width: 44ch; text-shadow: 0 2px 12px #000; }
.story__t .y { color: var(--yellow); }
.story__dots { position: absolute; right: clamp(16px, 3vw, 48px); top: 50%; transform: translateY(-50%); list-style: none; display: flex; flex-direction: column; gap: 22px; }
.story__dots li { width: 10px; height: 10px; border-radius: 50%; background: #6b7fa8; transition: background .3s, box-shadow .3s, transform .3s; }
.story__dots li.is-on { background: var(--cyan); box-shadow: 0 0 14px var(--cyan); transform: scale(1.3); }
.story__skip { position: absolute; right: clamp(16px, 3vw, 48px); bottom: 26px; font-family: var(--f-pix); font-size: .58rem; color: var(--muted); padding: .8em 1em; border: 1px solid var(--line); border-radius: 999px; background: rgba(4,16,46,.5); }
.story__skip:hover { color: #fff; border-color: var(--cyan); }
.story__hint { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); font-family: var(--f-pix); font-size: .55rem; color: var(--muted); display: flex; align-items: center; gap: .8em; }
.story__hint i { width: 14px; height: 22px; border: 2px solid var(--muted); border-radius: 8px; position: relative; }
.story__hint i::after { content: ''; position: absolute; left: 50%; top: 4px; width: 2px; height: 5px; background: var(--cyan); transform: translateX(-50%); animation: wheel 1.4s infinite; }
@keyframes wheel { to { transform: translate(-50%, 7px); opacity: 0; } }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
#hud a, #hud button, #hud .touch, #hud .joy { pointer-events: auto; }
.hud__tl { position: absolute; left: clamp(12px, 2.4vw, 32px); top: clamp(12px, 2.4vw, 28px); }
.hud__ore { display: flex; align-items: center; gap: .55rem; font-family: var(--f-logo); font-size: clamp(2rem, 3.6vw, 3rem); color: #fff; text-shadow: 0 3px 0 #061440, 0 0 18px rgba(255,138,31,.7); }
.hud__ore small { font-family: var(--f-pix); font-size: .5rem; color: var(--yellow); text-shadow: none; width: min-content; line-height: 1.5; } /* min-content: the box grows to the longest word (RECUPERATE) instead of letting it overflow */
.orb { width: .8em; height: .8em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2c4, var(--orange) 45%, #c2410c); box-shadow: 0 0 14px var(--orange); display: inline-block; outline: 2px solid rgba(255,210,63,.6); outline-offset: 3px; }
.hud__ore.pop { animation: pop .35s; }
@keyframes pop { 40% { transform: scale(1.18); } }
.hud__row { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; font-family: var(--f-pix); font-size: .58rem; color: #ffd9a3; }
.hud__crate { width: 16px; height: 16px; background: #b5652a; border: 2px solid #5e2e0e; box-shadow: inset 0 0 0 2px #e8a25a; }
.hud__totem { margin-left: .6rem; padding: .35em .6em; border-radius: 6px; border: 1px dashed #47608f; color: #47608f; }
.hud__totem.is-on { border: 1px solid var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(94,231,255,.5); }
.hud__tr { position: absolute; right: clamp(12px, 2.4vw, 28px); top: clamp(12px, 2.4vw, 24px); display: flex; align-items: center; gap: .3rem; padding: .35rem; border-radius: 999px; background: rgba(4,16,46,.55); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.hud__tr button { font-family: var(--f-pix); font-size: .55rem; padding: .85em 1.05em; border-radius: 999px; color: #cfe0ff; transition: background .2s, color .2s; }
.hud__tr button:hover { background: rgba(94,231,255,.14); color: #fff; }
.hud__tr button.is-hot { background: var(--orange); color: #2a0e00; }
.hud__tr .ico { font-family: var(--f-body); font-size: 1rem; padding: .35em .6em; }
.hud__tr .ico.is-on { color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }
.hud__sep { width: 1px; height: 20px; background: var(--line); margin: 0 .2rem; }
.hud__hint { position: absolute; left: clamp(12px, 2.4vw, 32px); bottom: clamp(12px, 2.4vw, 28px); max-width: 470px; padding: 1rem 1.2rem; border-radius: 14px; background: rgba(4,16,46,.7); border: 1px solid var(--line); backdrop-filter: blur(10px); font-size: .85rem; color: #cfe0ff; line-height: 1.9; transition: opacity .6s, transform .6s; }
.hud__hint.is-gone { opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity .6s, transform .6s, visibility 0s .6s; }
.hud__hint p { padding-right: 1.6rem; }
.hud__x { position: absolute; top: .35rem; right: .35rem; width: 32px; height: 32px; border-radius: 50%; color: #cfe0ff; font-size: .9rem; line-height: 1; }
.hud__x:hover, .hud__x:focus-visible { background: rgba(94,231,255,.14); color: #fff; }
.hud__hint:not(.is-auto) .hud__bar { display: none; }
.hud__bar { height: 3px; background: rgba(94,231,255,.15); border-radius: 2px; margin-top: .5rem; overflow: hidden; }
.hud__hint.is-auto .hud__bar i { animation: bar 9s linear forwards; }
.hud__bar i { display: block; height: 100%; background: var(--cyan); transform-origin: 0 50%; }
@keyframes bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.touch { position: absolute; right: 16px; bottom: 70px; display: none; gap: 12px; }
.touch button { width: 74px; height: 74px; border-radius: 50%; font-family: var(--f-pix); font-size: .5rem; background: rgba(29,107,255,.35); border: 2px solid var(--cyan); box-shadow: 0 0 18px rgba(94,231,255,.4); color: #fff; }
.touch button:last-child { background: rgba(255,138,31,.35); border-color: var(--orange); box-shadow: 0 0 18px rgba(255,138,31,.4); }
@media (hover: none) { .touch { display: flex; } .hud__hint .hint__keys { display: none; } }

#prompt { position: fixed; left: 50%; top: 22%; transform: translate(-50%, 10px); z-index: 16; font-family: var(--f-pix); font-size: .65rem; padding: .9em 1.3em; border-radius: 999px; background: rgba(4,16,46,.8); border: 1px solid var(--pc, var(--cyan)); color: #fff; box-shadow: 0 0 22px color-mix(in srgb, var(--pc, var(--cyan)) 50%, transparent); opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none;
  /* wraps instead of running off narrow screens */ width: max-content; max-width: min(560px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); text-align: center; line-height: 1.8; text-wrap: balance; border-radius: 18px; top: max(22%, 96px); }
#prompt.is-on { opacity: 1; transform: translate(-50%, 0); }
#prompt small { font-size: inherit; opacity: .85; }
#prompt small::before { content: " · "; }
@media (max-width: 760px) { #prompt small { display: block; margin-top: .25em; } #prompt small::before { content: none; } }
#toast { position: fixed; left: 50%; top: 84px; transform: translate(-50%, -20px); z-index: 30; padding: 1rem 1.4rem; border-radius: 14px; background: linear-gradient(180deg, #1342b5, #0a2166); border: 2px solid var(--yellow); box-shadow: 0 0 30px rgba(255,210,63,.4), 0 6px 0 #061440; text-align: center; opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s; max-width: min(90vw, 520px); }
#toast.is-on { opacity: 1; transform: translate(-50%, 0); }
#toast b { display: block; font-family: var(--f-pix); font-size: .58rem; color: var(--yellow); margin-bottom: .6rem; }
#toast span { font-size: .98rem; line-height: 1.45; }

#dialog { position: fixed; left: 50%; bottom: clamp(18px, 4vh, 40px); transform: translateX(-50%); z-index: 25; width: min(640px, calc(100vw - 24px)); display: flex; gap: 1rem; align-items: center; padding: 1rem 1.2rem; border-radius: 16px; background: rgba(2,10,34,.9); border: 2px solid var(--cyan); box-shadow: 0 0 30px rgba(94,231,255,.35), 0 6px 0 #061440; cursor: pointer; }
.dlg__face { width: 54px; flex: 0 0 auto; filter: drop-shadow(0 0 8px rgba(94,231,255,.7)); animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
#dialog b { font-family: var(--f-pix); font-size: .58rem; color: var(--cyan); }
#dialog p { font-size: 1.02rem; line-height: 1.45; margin: .45rem 0 .3rem; min-height: 2.9em; }
#dialog small { font-family: var(--f-pix); font-size: .45rem; color: var(--muted); }

/* ---------- panels ---------- */
#panel { position: fixed; inset: 0; z-index: 35; background: radial-gradient(90% 80% at 50% 0%, rgba(13,40,110,.85), rgba(2,6,23,.95)); backdrop-filter: blur(8px); display: flex; flex-direction: column; }
.pn__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px clamp(12px, 3vw, 36px); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pn__back { font-family: var(--f-pix); font-size: .58rem; color: #fff; display: flex; gap: .8em; align-items: center; padding: .8em 1em; border-radius: 999px; background: rgba(94,231,255,.1); border: 1px solid var(--line); }
.pn__back:hover { border-color: var(--cyan); }
.pn__tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.pn__tabs button { font-family: var(--f-pix); font-size: .52rem; padding: .8em 1em; border-radius: 999px; color: var(--muted); }
.pn__tabs button.is-on { color: #fff; background: color-mix(in srgb, var(--pc, var(--sky)) 30%, transparent); box-shadow: inset 0 0 0 1px var(--pc, var(--sky)); }
.pn__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: clamp(28px, 5vw, 64px) clamp(16px, 5vw, 64px) 80px; }
.pn { max-width: 1120px; margin: 0 auto; display: none; }
.pn.is-on { display: block; animation: pnIn .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes pnIn { from { opacity: 0; transform: translateY(26px) scale(.98); } }
.pn__k { font-family: var(--f-pix); font-size: .62rem; color: var(--pc); letter-spacing: .06em; text-shadow: 0 0 12px var(--pc); }
.pn__h { font-family: var(--f-logo); font-weight: 400; font-size: clamp(2.2rem, 5vw, 4rem); line-height: .98; margin: .8rem 0 1rem; text-shadow: 0 4px 0 #061440; }
.pn__h3 { font-family: var(--f-logo); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 3.4rem 0 1.2rem; color: #fff; text-shadow: 0 3px 0 #061440; }
.pn__lead { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: #cfe0ff; max-width: 62ch; line-height: 1.55; }
.pn__note { margin-top: 1rem; font-size: .8rem; color: var(--muted); }
.pn__bonus { margin-top: 1.4rem; font-size: .95rem; color: #cfe0ff; line-height: 1.6; padding: 1rem 1.2rem; border-radius: 12px; border: 1px dashed var(--line); }
.pn__bonus b { font-family: var(--f-pix); font-size: .55rem; color: var(--yellow); margin-right: .6rem; }
/* game cards */
.lv, .shop { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; margin-top: 2rem; }
.lv__c, .it { position: relative; padding: 1.3rem 1.3rem 1.4rem; border-radius: 16px; background: linear-gradient(180deg, rgba(20,60,160,.45), rgba(4,16,46,.75)); border: 2px solid color-mix(in srgb, var(--pc) 55%, transparent); box-shadow: 0 6px 0 #061440, 0 0 0 1px rgba(255,255,255,.04) inset; transition: transform .25s cubic-bezier(.2,1.6,.4,1), box-shadow .25s; }
.lv__c:hover, .it:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 12px 0 #061440, 0 0 30px color-mix(in srgb, var(--pc) 40%, transparent); }
.lv__c header { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lv__n { font-family: var(--f-logo); font-size: 1.5rem; color: var(--yellow); text-shadow: 0 2px 0 #061440; }
.lv__s { font-size: .85rem; color: var(--muted); }
.lv__ok { margin-left: auto; font-family: var(--f-pix); font-size: .42rem; color: #062a12; background: #5ef38c; padding: .5em .6em; border-radius: 4px; }
.lv__c h3, .it h3 { font-family: var(--f-logo); font-weight: 400; font-size: 1.35rem; margin-top: .9rem; color: #fff; }
.lv__big { font-family: var(--f-logo); font-size: clamp(2.8rem, 4.4vw, 3.6rem); line-height: 1; margin-top: .8rem; background: linear-gradient(180deg, #fff6a8, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #061440); }
.lv__u { font-size: .92rem; color: #ffd9a3; }
.lv dl { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.5; }
.lv dt { font-family: var(--f-pix); font-size: .45rem; color: var(--cyan); margin-top: .7rem; }
.lv dt:first-child { margin-top: 0; }
.lv dd { color: #cfe0ff; margin-top: .35rem; }
.worlds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.wd { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; padding: .7rem .7rem 1rem; border-radius: 14px; background: rgba(4,16,46,.6); border: 1px solid var(--line); }
.wd img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; border-radius: 8px; image-rendering: auto; }
.wd b { font-family: var(--f-logo); font-weight: 400; font-size: 1.2rem; margin-top: .3rem; }
.wd span { font-size: .88rem; color: #cfe0ff; line-height: 1.45; }
.wd i { font-style: normal; font-family: var(--f-pix); font-size: .42rem; color: var(--cyan); line-height: 1.8; }
.it { display: flex; flex-direction: column; }
.it__ico { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: rgba(94,231,255,.12); border: 2px solid var(--cyan); box-shadow: 0 0 18px rgba(94,231,255,.35); }
.it__ico::after { font-size: 1.7rem; }
.it__ico--map::after { content: '🗺'; } .it__ico--shield::after { content: '🛡'; } .it__ico--turbo::after { content: '⚡'; }
.it__k { font-family: var(--f-pix); font-size: .45rem; color: var(--cyan); margin-top: 1rem; }
.it p { font-size: .93rem; color: #cfe0ff; line-height: 1.55; margin-top: .6rem; }
.it ul { list-style: none; margin: 1rem 0 1.4rem; font-size: .9rem; }
.it li { padding: .45rem 0 .45rem 1.3rem; border-top: 1px solid var(--line); position: relative; }
.it li::before { content: '+'; position: absolute; left: 0; color: var(--yellow); font-weight: 700; }
.it footer { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding-top: .9rem; border-top: 2px dashed var(--line); }
.it footer span { font-size: .8rem; color: var(--muted); }
.it footer b { font-family: var(--f-logo); font-weight: 400; font-size: 1.6rem; color: var(--yellow); text-shadow: 0 2px 0 #061440; white-space: nowrap; }
.path { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; counter-reset: p; }
.path li { padding: 1.1rem 1.2rem; border-radius: 14px; border: 1px solid var(--line); background: rgba(4,16,46,.55); position: relative; }
.path span { font-family: var(--f-logo); font-size: 2.2rem; color: var(--orange); text-shadow: 0 3px 0 #061440; }
.path b { display: block; font-family: var(--f-logo); font-weight: 400; font-size: 1.3rem; }
.path i { display: block; font-style: normal; font-family: var(--f-pix); font-size: .45rem; color: var(--cyan); margin: .6rem 0; line-height: 1.7; }
.path p { font-size: .9rem; color: #cfe0ff; line-height: 1.55; }
/* profile */
.card { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; margin-top: 1.4rem; }
.card__pic { position: relative; border-radius: 18px; padding: 8px; background: linear-gradient(135deg, var(--violet), var(--blue)); box-shadow: 0 8px 0 #061440, 0 0 40px rgba(167,139,250,.4); transform: rotate(-2deg); }
.card__pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; display: block; }
.card__pic figcaption { position: absolute; right: -10px; bottom: -12px; font-family: var(--f-pix); font-size: .55rem; background: var(--yellow); color: #2a1600; padding: .7em .8em; border-radius: 8px; box-shadow: 0 4px 0 #061440; }
.card p { color: #cfe0ff; line-height: 1.6; margin-top: .8rem; max-width: 60ch; }
.card__cls { font-family: var(--f-pix); font-size: .5rem; color: var(--violet) !important; line-height: 1.9; }
.card__move { padding: .9rem 1rem; border-radius: 12px; background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.4); }
.card__move b { font-family: var(--f-pix); font-size: .5rem; color: var(--yellow); margin-right: .6rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: .8rem 1.6rem; margin-top: 2.6rem; }
.stats div { display: grid; grid-template-columns: 1fr auto; gap: .4rem; align-items: baseline; }
.stats span { font-size: .9rem; color: var(--muted); }
.stats b { font-family: var(--f-logo); font-weight: 400; font-size: 1.7rem; color: #fff; }
.stats i { grid-column: 1 / -1; height: 12px; border-radius: 3px; background: rgba(255,255,255,.08); border: 1px solid var(--line); position: relative; overflow: hidden; }
.stats i::after { content: ''; position: absolute; inset: 2px; right: auto; width: calc((100% - 4px) * var(--v)); background: repeating-linear-gradient(90deg, var(--cyan) 0 10px, var(--sky) 10px 12px); border-radius: 2px; box-shadow: 0 0 10px var(--cyan); }
.inv { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: .6rem; }
.inv li { padding: .9rem 1rem; border-radius: 12px; border: 2px solid var(--line); background: rgba(4,16,46,.6); font-family: var(--f-logo); font-size: 1.15rem; display: flex; flex-direction: column; gap: .3rem; }
.inv small { font-family: var(--f-pix); font-size: .42rem; color: var(--cyan); }
.troph { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 1rem; }
.troph > * { padding: 1.2rem; border-radius: 14px; border: 2px solid rgba(255,210,63,.35); background: rgba(40,30,0,.25); }
.troph__score b { font-family: var(--f-logo); font-weight: 400; font-size: 3.4rem; line-height: 1; display: block; color: var(--yellow); }
.troph__score span { color: var(--yellow); letter-spacing: .2em; }
.troph__score small { display: block; font-size: .8rem; color: var(--muted); margin-top: .4rem; }
.troph blockquote { font-family: var(--f-logo); font-size: 1.25rem; line-height: 1.25; }
.troph cite { display: block; margin-top: .9rem; font-style: normal; font-family: var(--f-pix); font-size: .45rem; color: var(--muted); }
/* faq */
.faq { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .6rem; max-width: 860px; }
.faq details { border-radius: 14px; border: 1px solid var(--line); background: rgba(4,16,46,.6); }
.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 1.2rem; font-family: var(--f-logo); font-size: 1.25rem; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--cyan); font-family: var(--f-pix); font-size: .8rem; }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 1.2rem 1.2rem; color: #cfe0ff; line-height: 1.6; }
/* save */
.save { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.save__btn { font-family: var(--f-logo); font-size: 1.5rem; text-decoration: none; padding: .7em 1.2em .6em; border-radius: 16px; background: linear-gradient(180deg, #ffb057, var(--orange) 50%, #f2601a); color: #2a0e00; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); box-shadow: 0 6px 0 #7a2400, 0 0 30px rgba(255,138,31,.45); transition: transform .15s, box-shadow .15s; }
.save__btn:hover { color: #2a0e00; transform: translateY(-3px); box-shadow: 0 9px 0 #7a2400, 0 0 40px rgba(255,138,31,.6); }
.save__btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #7a2400; }
.save__btn--2, .save__btn--2:hover { color: #fff; }
.save__btn--2 { background: linear-gradient(180deg, #2563eb, #1a56d6 55%, #0b3fb3); text-shadow: 0 2px 0 #061440; box-shadow: 0 6px 0 #061440, 0 0 30px rgba(29,107,255,.45); font-size: 1.2rem; }
.contacts { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .8rem; margin-top: 2.6rem; }
.contacts li { padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(4,16,46,.6); display: flex; flex-direction: column; gap: .4rem; }
.contacts small { font-family: var(--f-pix); font-size: .45rem; color: var(--orange); }
.contacts a, .contacts span { font-size: 1.05rem; text-decoration: none; overflow-wrap: anywhere; }
.contacts a:hover { color: var(--orange); }
@media (max-width: 760px) {
  .card, .troph { grid-template-columns: minmax(0, 1fr); }
  .card__pic { max-width: 220px; }
  .hud__tr button:not(.ico):not(.is-hot) { display: none; }
  .story__box { right: 16px; bottom: 120px; }
  .story__dots { display: none; }
  .hud__hint { right: 12px; max-width: none; font-size: .78rem; }
  .pn__tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}
.eur { font-family: var(--f-body); font-style: normal; font-weight: 700; margin: 0 .05em; }
.pn__tabs { scrollbar-width: none; } .pn__tabs::-webkit-scrollbar { display: none; }
.pn__tabs button { white-space: nowrap; }
.hud__tl { padding: .55rem 1rem .7rem .7rem; border-radius: 16px; background: rgba(2,8,28,.55); border: 1px solid var(--line); backdrop-filter: blur(10px); }

/* joystick */
.joy { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(28px, env(safe-area-inset-bottom)); width: 128px; height: 128px; border-radius: 50%; display: none; pointer-events: auto; touch-action: none;
  background: radial-gradient(circle, rgba(29,107,255,.18), rgba(29,107,255,.06) 60%, transparent 70%); border: 2px solid rgba(94,231,255,.45); box-shadow: inset 0 0 24px rgba(94,231,255,.15); }
.joy i { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9ff3ff, var(--blue)); box-shadow: 0 0 18px rgba(94,231,255,.6); transition: transform .12s; }
.joy.is-on i { transition: none; }
@media (hover: none) {
  .joy { display: block; }
  .touch { bottom: max(36px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); }
  .hud__hint { bottom: 178px; }
  #dialog { bottom: 176px; }
}
@media (max-width: 760px) {
  .hud__tl { padding: .4rem .7rem .5rem .5rem; }
  .hud__ore { font-size: 1.7rem; }
  .hud__ore small { display: none; }
  .hud__row { font-size: .5rem; }
  .hud__tr { padding: .25rem; }
  .hud__tr .ico { padding: .3em .45em; }
}

/* ================= v3: SEO links inside the game ================= */
h1.title__pre { font-weight: 400; margin: 0; }
h1.title__pre::before { content: "P1 · "; } /* game decoration, kept out of the H1 text read by search engines */
.title__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem; margin-top: 1.4rem; font-size: .82rem; }
.title__nav a { color: #9fb3d9; text-decoration: none; border-bottom: 1px solid rgba(159,179,217,.3); }
.title__nav a:hover { color: #fff; border-color: #fff; }
.hud__tr a { font-family: var(--f-pix); font-size: .55rem; padding: .85em 1.05em; border-radius: 999px; color: #cfe0ff; text-decoration: none; transition: background .2s, color .2s; }
.hud__tr a:hover { background: rgba(94,231,255,.14); color: #fff; }
.hud__tr a.is-hot { background: var(--orange); color: #2a0e00; }
/* the full text menu needs about 860px next to the counter: below that only Prenota stays (the portals lead to the same pages) */
@media (max-width: 880px) { .hud__tr a:not(.is-hot) { display: none; } }
.lv__more { display: inline-block; margin-top: .9rem; font-size: .9rem; color: var(--cyan); }
.pn__links { margin-top: 1.4rem; line-height: 2; color: var(--muted); }
.pn__links a { color: var(--cyan); }
.archive { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 1.6rem; }
.ar { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.15rem; border-radius: 16px; text-decoration: none; color: inherit; background: linear-gradient(180deg, rgba(60,45,0,.35), rgba(4,16,46,.75)); border: 2px solid rgba(255,210,63,.4); box-shadow: 0 6px 0 #061440; transition: transform .25s cubic-bezier(.2,1.6,.4,1); }
.ar:hover { transform: translateY(-5px) rotate(-.5deg); }
.ar__c { font-family: var(--f-pix); font-size: .45rem; color: var(--yellow); }
.ar b { font-family: var(--f-logo); font-weight: 400; font-size: 1.25rem; line-height: 1.15; }
.ar span:not(.ar__c) { font-size: .9rem; color: #cfe0ff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ar i { margin-top: auto; font-style: normal; font-size: .8rem; color: var(--muted); }

/* ================= title screen: centred content + legal footer bar (never overlaps the menu) ================= */
#title { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
#title .title__inner { margin: auto; padding: 72px 16px 28px; }
.title__foot { position: static; display: grid; justify-items: center; gap: .55rem; padding: 16px 16px max(14px, env(safe-area-inset-bottom)); text-align: center;
  background: linear-gradient(0deg, rgba(2,6,23,.94) 0%, rgba(2,6,23,.78) 60%, rgba(2,6,23,0) 100%); }
.title__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem 1.4rem; font-size: .8rem; }
.title__links a, .title__links .lnk { color: #b9c8e8; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(185,200,232,.35); padding: .35em 0; }
.title__links a:hover, .title__links .lnk:hover { color: #fff; text-decoration-color: #fff; }
.title__links .snd-toggle { padding: .55em .9em; border: 1px solid rgba(94,231,255,.35); border-radius: 999px; }
.title__legal { display: grid; gap: .15rem; font-size: .72rem; line-height: 1.45; color: #8ea2c9; max-width: 72ch; text-wrap: balance; }
@media (max-width: 600px) {
  #title .title__inner { padding-top: 64px; }
  .title__links { gap: .2rem 1rem; font-size: .76rem; }
  .title__legal { font-size: .66rem; }
}
#title { align-items: stretch; }
.title__foot { align-self: stretch; width: 100%; }

/* ================= v4: HUD top bar on phones ================= */
/* counter and menu each keep their own space, clear of the notch */
.hud__tl { left: max(clamp(12px, 2.4vw, 32px), env(safe-area-inset-left)); top: max(clamp(12px, 2.4vw, 28px), env(safe-area-inset-top)); }
.hud__tr { right: max(clamp(12px, 2.4vw, 28px), env(safe-area-inset-right)); top: max(clamp(12px, 2.4vw, 24px), env(safe-area-inset-top)); }
@media (hover: none) {
  .hud__tr .ico { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }
  .hud__tr a.is-hot { min-height: 40px; display: flex; align-items: center; }
}
/* portrait phones: Prenota on one row, the four controls under it; the Totem badge goes under the crates */
@media (max-width: 560px) {
  .hud__row { display: grid; grid-template-columns: auto auto; justify-content: start; row-gap: .45rem; }
  .hud__totem { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
  .hud__tr { display: grid; grid-template-columns: repeat(4, 40px); gap: 2px; padding: 3px; border-radius: 22px; }
  .hud__tr a.is-hot { grid-column: 1 / -1; justify-content: center; min-height: 40px; display: flex; align-items: center; }
  .hud__tr .ico { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }
  .hud__sep { display: none; }
}
/* short portrait screens (iPhone SE): a slimmer top bar so the portal signs stay clear */
@media (max-width: 560px) and (max-height: 700px) {
  .hud__tr a.is-hot { min-height: 32px; }
  .hud__row { margin-top: .3rem; row-gap: .3rem; }
}
/* landscape phones: the guide sits between the joystick and SALTA/SPIN instead of over the top bar */
@media (hover: none) and (orientation: landscape) and (max-height: 500px) {
  .hud__hint { left: calc(max(18px, env(safe-area-inset-left)) + 140px); right: calc(max(16px, env(safe-area-inset-right)) + 172px); bottom: max(12px, env(safe-area-inset-bottom)); max-width: none; font-size: .78rem; line-height: 1.6; }
  #dialog { left: calc(max(18px, env(safe-area-inset-left)) + 140px); right: calc(max(16px, env(safe-area-inset-right)) + 172px); bottom: max(12px, env(safe-area-inset-bottom)); width: auto; transform: none; padding: .7rem .9rem; }
  #dialog .dlg__face { display: none; }
  #dialog p { font-size: .84rem; margin: .3rem 0 .2rem; min-height: 0; }
}