/* Volana UI — pixel-art aesthetic matching the in-game art (m5x7 "pixel" font, black boxes with gray borders, gamebutton-style buttons). The landing sits over the live game world canvas, just like the original Adventure Land login. */ :root { --v-border: #6f6f6f; --v-border-hi: #D8DAE6; --v-bg: #0D0B1F; --v-bgx: rgba(13, 11, 31, 0.92); --v-text: #D8DAE6; --v-muted: #A8AEC4; --v-green: #7456D9; --v-cyan: #3276A8; --v-purple: #A785FF; --v-gold: #D5A84B; --v-red: #df5a5a; --v-space: #0D0B1F; --v-midnight: #1C153A; --v-lunar-violet: #7456D9; --v-bright-violet: #A785FF; --v-silver: #D8DAE6; --v-charcoal: #242533; --volana-footer-h: 0px; } /* ---------- Login shell (landing + panels + footer, no overlap) ---------- */ .volana-login-shell { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; color: var(--v-text); font-family: pixel, "Courier New", monospace; background: #030208; overflow: hidden; height: 100dvh; max-height: 100dvh; --mooners-footer-h: 52px; } .volana-login-shell .volana-panel { top: 0; left: 0; right: 0; bottom: 0; } /* ---------- Landing ---------- */ .volana-landing { position: relative; flex: 1 1 auto; min-height: 0; z-index: 1; display: flex; flex-direction: column; overflow: hidden; background: transparent; } /* transparent so the live game-world canvas (PIXI, on ) shows through; body is black, so worst case is a clean dark backdrop like the AL login */ .volana-landing__bg { position: absolute; inset: 0; z-index: 0; background-color: #1a0828; background-size: cover; background-position: center 72%; background-repeat: no-repeat; } .volana-landing__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, rgba(255, 180, 80, 0.12) 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, transparent 0%, rgba(10, 8, 20, 0.35) 70%, rgba(8, 6, 16, 0.82) 100%), linear-gradient(180deg, rgba(18, 8, 40, 0.42) 0%, rgba(8, 6, 16, 0.08) 38%, rgba(8, 10, 18, 0.55) 100%); } .volana-landing__top { position: relative; z-index: 3; display: flex; justify-content: flex-end; padding: 14px 16px; } .volana-landing__status { display: flex; gap: 8px; align-items: center; font-size: 24px; line-height: 24px; } .volana-landing__online { padding: 8px 12px; border: 4px solid var(--v-green); color: #bff4c6; background: var(--v-bg); } .volana-landing__load { padding: 8px 10px; min-width: 46px; text-align: center; border: 4px solid var(--v-border); background: var(--v-bg); cursor: pointer; } .volana-landing__main { position: relative; z-index: 3; flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; justify-content: center; padding: 12px 16px calc(var(--mooners-footer-h, 72px) + 12px); box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; } .volana-landing__hero { width: min(480px, 94vw); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 8px 0 16px; } .volana-landing__hero .volana-landing__tagline, .volana-landing__hero .volana-landing__subtitle, .volana-landing__hero .volana-landing__actions, .volana-landing__hero .volana-landing__links { margin: 0; } /* Volana crest logo — used on landing, about, earn, and headers */ .volana-logo { display: block; margin: 0; width: min(360px, 92vw); max-width: 100%; height: auto; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55)); } .volana-logo--sm { width: min(320px, 88vw); max-height: 110px; margin-bottom: 18px; } /* Legacy text wordmark — kept for any stragglers */ .volana-wordmark { display: inline-block; margin: 0 auto 20px; padding: 10px 28px 14px; background: var(--v-bg); border: 5px solid var(--v-border); font-size: clamp(56px, 12vw, 96px); line-height: 1; letter-spacing: 2px; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.6); } .volana-wordmark__dot { color: var(--v-gold); } .volana-page-home { display: inline-flex !important; align-items: center; gap: 8px; } .volana-page-home__mark { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; } .volana-landing__tagline { margin: 0 0 12px; font-size: clamp(28px, 5vw, 40px); font-weight: normal; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7); line-height: 1.15; } .volana-landing__subtitle { margin: 0; max-width: 420px; font-size: 20px; line-height: 1.45; color: var(--v-muted); background: rgba(0, 0, 0, 0.55); padding: 10px 14px; } /* contract-address chip (memecoin copy-paste) */ .volana-ca { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 22px; padding: 6px 12px; background: #000; border: 4px solid var(--v-gold); cursor: pointer; font-size: 20px; max-width: 92vw; } .volana-ca__label { color: var(--v-gold); font-weight: normal; } .volana-ca__addr { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; } .volana-ca__copy { color: var(--v-cyan); border-left: 2px solid #333; padding-left: 8px; } .volana-ca:hover { border-color: #ffd76a; } .volana-landing__actions { display: flex; flex-direction: column; gap: 16px; align-items: stretch; width: min(320px, 100%); } .volana-landing__actions .volana-btn { min-width: 0; width: 100%; box-sizing: border-box; } @media (min-width: 560px) { .volana-landing__actions { flex-direction: row; justify-content: center; width: auto; gap: 18px; } .volana-landing__actions .volana-btn { width: auto; min-width: 220px; max-width: 240px; } } /* ---------- Buttons (gamebutton-style) ---------- */ .volana-btn { display: inline-block; min-width: 240px; padding: 14px 22px; background: var(--v-bg); border: 5px solid var(--v-border); font-family: pixel, "Courier New", monospace; font-size: 26px; line-height: 1.2; color: #fff; cursor: pointer; text-align: center; text-decoration: none; box-sizing: border-box; } .volana-btn:hover { border-color: var(--v-border-hi); } .volana-btn:active { transform: translateY(1px); } .volana-btn--primary { border-color: var(--v-green); color: #d8ffdc; } .volana-btn--primary:hover { border-color: #9fe9aa; } .volana-btn--wallet { border-color: var(--v-purple); color: #e3ddff; } .volana-btn--wallet:hover:not(:disabled) { border-color: #c4bbff; } .volana-btn--wallet:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--v-border); } .volana-btn--ghost { min-width: 200px; border-color: var(--v-border); color: var(--v-muted); } .volana-landing__links { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; font-size: 20px; background: rgba(0, 0, 0, 0.55); padding: 8px 14px; margin-top: 4px; } .volana-link { color: var(--v-cyan); text-decoration: none; } .volana-link:hover { color: #9fe5f2; text-decoration: underline; } .volana-link--muted { color: var(--v-muted); } .volana-link-sep { color: #4a4a4a; } .volana-landing__footer { position: relative; z-index: 3; padding: 12px 16px 16px; text-align: center; font-size: 20px; color: var(--v-muted); } /* Footer — pinned to bottom of shell, never overlaps hero */ .volana-login-footer { position: relative; flex-shrink: 0; z-index: 4; padding: 10px 16px max(12px, env(safe-area-inset-bottom)); text-align: center; font-family: pixel, "Courier New", monospace; font-size: 16px; color: var(--v-muted); background: rgba(0, 0, 0, 0.94); border-top: 3px solid #2a2838; pointer-events: auto; } .volana-login-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 0; } .volana-login-footer__row--links { margin-bottom: 6px; } .volana-login-footer__tagline { margin: 0; font-size: 14px; color: #6a6a78; line-height: 1.35; } .volana-login-footer__earn { color: var(--v-green); } .volana-login-footer__x { color: var(--v-cyan); } .volana-ca--footer { display: inline-flex; margin: 0 auto; padding: 8px 12px; font-size: 16px; border-width: 3px; max-width: min(520px, 96vw); } .volana-ca--footer .volana-ca__addr { max-width: min(280px, 68vw); font-size: 15px; } .mooners-ca-wrap { display: flex; justify-content: center; width: 100%; } .mooners-ca-wrap--hero { margin: 0; width: 100%; } .wf-hero-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; width: 100%; margin: 4px 0 8px; } .wf-hero-social__x { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(110, 181, 217, 0.45); background: rgba(10, 14, 20, 0.55); color: #d8dae6; font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color 0.15s, color 0.15s; } .wf-hero-social__x:hover { border-color: #6eb5d9; color: #fff; } .mooners-ca-wrap--hero .volana-ca { margin: 0; width: 100%; max-width: 100%; box-sizing: border-box; justify-content: center; } .mooners-ca-wrap--footer { margin: 0 auto 10px; } .mooners-ca-wrap--play { margin: 16px auto 0; } .mooners-ca-wrap--modal { margin: 14px auto 0; } .volana-ca--hero { margin: 0; max-width: min(520px, 96vw); } .volana-ca--hero .volana-ca__addr { max-width: min(320px, 72vw); font-size: 17px; } #mooners-ca-chip { display: none; position: fixed; bottom: 8px; left: 8px; z-index: 200; pointer-events: auto; } body.volana-simple-mode.mooners-in-game #mooners-ca-chip:not(:empty) { display: block; } .volana-ca--ingame { margin: 0; padding: 4px 8px; font-size: 14px; border-width: 3px; max-width: min(420px, 94vw); } .volana-ca--ingame .volana-ca__addr { max-width: min(220px, 58vw); font-size: 13px; } body.volana-landing-active #content { position: static; } .volana-landing__devlink { position: fixed; bottom: 8px; right: 12px; z-index: 201; margin: 0; font-size: 18px; } .volana-landing__devlink a { color: #4a4a4a; text-decoration: none; } .volana-landing__devlink a:hover { color: var(--v-muted); } /* ---------- Overlay panels (guest / wallet / earn / account) ---------- */ .volana-panel { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; align-items: center; justify-content: center; overflow-y: auto; padding: 24px 16px; background: rgba(3, 2, 8, 0.94); font-family: pixel, "Courier New", monospace; backdrop-filter: blur(6px); } .volana-panel__card { width: 100%; max-width: 460px; padding: 22px 22px 24px; border: 5px solid var(--v-border); background: var(--v-bg); text-align: left; color: #fff; } .volana-panel__card--wide { max-width: 560px; } .volana-panel__title { margin: 0 0 14px; font-size: 34px; line-height: 1; color: #fff; font-weight: normal; } .volana-panel__text, .volana-panel__note { margin: 0 0 16px; font-size: 22px; line-height: 1.35; color: var(--v-muted); } .volana-panel__note { margin-top: 12px; font-size: 19px; color: #7c8087; } .volana-panel__hint, .mooners-try-callsign { margin: -6px 0 14px; font-size: 16px; line-height: 1.35; color: var(--v-lunar-violet); } .volana-panel__label { display: block; margin-bottom: 6px; font-size: 22px; color: #cfd2d6; } .volana-panel__input { width: 100%; box-sizing: border-box; margin-bottom: 14px; } .volana-panel__submit { width: 100%; margin-bottom: 10px; min-width: 0; } .volana-panel__status { margin-bottom: 14px; padding: 10px 12px; border: 4px solid var(--v-border); font-size: 20px; color: var(--v-muted); background: rgba(255, 255, 255, 0.03); } .volana-earn-list { margin: 0 0 12px 22px; padding: 0; color: #e6e6e6; font-size: 22px; line-height: 1.45; } .volana-earn-list li { margin-bottom: 8px; } /* token chip used in earn copy */ .volana-token { color: var(--v-gold); } /* Hide legacy Adventure Land login chrome when the Volana landing is active */ body.volana-landing-active #features, body.volana-landing-active #topleftcorner { display: none !important; } body.volana-landing-active #content > #pagewrapper { display: none; } /* ---------- Simple play lobby (one character, auto-enter) ---------- */ .volana-play { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; color: var(--v-text); font-family: pixel, "Courier New", monospace; background: transparent; } .volana-play::before { content: ""; position: absolute; inset: 0; z-index: 0; background: #07070b; } .volana-play__top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 4px solid var(--v-border); background: var(--v-bgx); } .volana-play__mark { width: 36px; height: 36px; object-fit: contain; } .volana-play__user { flex: 1; font-size: 26px; color: #9fe5f2; } .volana-play__top-actions { display: flex; align-items: center; gap: 10px; } .volana-play__load { padding: 6px 8px; min-width: 44px; text-align: center; border: 4px solid var(--v-border); background: var(--v-bg); cursor: pointer; font-size: 22px; } .volana-play__logout { font-family: pixel, "Courier New", monospace; font-size: 22px; color: #f3b0b0; background: var(--v-bg); border: 4px solid #7a2a2a; padding: 6px 12px; cursor: pointer; } .volana-play__logout:hover { border-color: #c44; color: #fff; } .volana-hud-btn--logout { color: #f3b0b0; } .mooners-logout-btn { color: #f3b0b0; border-color: #7a2a2a; } .volana-link--logout { font-family: pixel, "Courier New", monospace; font-size: inherit; color: #f3b0b0; background: transparent; border: none; padding: 0; cursor: pointer; text-decoration: underline; } .volana-link--logout:hover { color: #fff; } .volana-play__main { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .volana-play__card { width: min(440px, 94vw); border: 5px solid var(--v-border); background: var(--v-bg); padding: 22px 20px 24px; text-align: center; } .volana-play__title { margin: 0 0 10px; font-size: 36px; font-weight: normal; color: #fff; } .volana-play__text, .volana-play__hint { margin: 0 0 14px; font-size: 22px; line-height: 1.35; color: var(--v-muted); } .volana-play__hero-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0 16px; } .volana-play__avatar { display: inline-block; image-rendering: pixelated; } .volana-play__char-name { font-size: 30px; color: #8be79a; text-align: left; } .volana-play__char-class { font-size: 22px; color: var(--v-muted); text-align: left; } .volana-play__char-gold { font-size: 20px; color: var(--v-silver); text-align: left; margin-top: 4px; } .volana-play__char-gold-label { color: var(--v-gold); font-weight: bold; } .volana-play__classes, .volana-play__looks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 14px; } .volana-play__classes .textbutton.selected, .volana-play__looks .textbutton.selected { outline: 3px solid var(--v-border-hi); } .volana-play__play-btn, .volana-play-create-btn { width: 100%; margin-top: 6px; } .volana-play--entering .volana-play__card { border-color: var(--v-green); } .volana-play__card--entering .volana-play__title { color: var(--v-green); } body.volana-play-active #features { display: none !important; } /* In-game: hide Adventure Land cruft for Volana simple mode */ body.volana-simple-mode #codeui, body.volana-simple-mode #bottomrightcodecorner, body.volana-simple-mode #features, body.volana-simple-mode .codebuttons, body.volana-simple-mode .servername { display: none !important; } body.volana-simple-mode #toprightcorner .promode { display: none !important; } body.volana-simple-mode #toprightcorner .gamebutton[onclick*="show_game_guide"], body.volana-simple-mode #toprightcorner .gamebutton[onclick*="render_com"] { display: none !important; } /* hide the Adventure Land tutorial tracker in the simple Volana experience */ body.volana-simple-mode .tutorialui { display: none !important; } body.volana-simple-mode #bottomleftcorner2 .clickable { font-size: 22px; } /* ---------- Volana HUD hint strip + controls guide ---------- */ .volana-hud-hint { display: block; max-width: 420px; margin-top: 6px; padding: 6px 10px; border: 3px solid var(--v-border); background: rgba(0, 0, 0, 0.92); color: var(--v-muted); font-family: pixel, "Courier New", monospace; font-size: 18px; line-height: 1.35; text-align: right; } body.volana-simple-mode .volana-hud-btn { font-size: 22px; } body.volana-simple-mode .volana-hud-help-btn { min-width: 36px; text-align: center; color: var(--v-gold); } .volana-controls-modal { font-family: pixel, "Courier New", monospace; color: #fff; padding: 4px 6px 8px; } .volana-controls-modal__head { font-size: 34px; margin-bottom: 8px; color: var(--v-gold); } .volana-controls-modal__lead { font-size: 22px; color: var(--v-cyan); margin: 0 0 14px; line-height: 1.4; } .volana-controls-grid { border: 4px solid var(--v-border); background: #000; margin-bottom: 14px; } .volana-controls-row { display: flex; gap: 12px; padding: 8px 10px; border-bottom: 2px solid #1c1c22; font-size: 20px; line-height: 1.35; } .volana-controls-row:last-child { border-bottom: none; } .volana-controls-row__label { flex: 0 0 110px; color: var(--v-green); } .volana-controls-row__text { flex: 1; color: #c9ccd1; } .volana-controls-tip { font-size: 19px; color: var(--v-purple); border-left: 4px solid var(--v-purple); padding: 6px 10px; margin-bottom: 14px; line-height: 1.4; } .volana-controls-modal__btn { width: 100%; box-sizing: border-box; font-size: 24px; } .volana-earn-note--inline { margin-bottom: 8px; padding: 0 0 0 8px; } /* ---------- Earn modal (in-game $VOLANA menu) ---------- */ .volana-earn-modal { font-family: pixel, "Courier New", monospace; color: #fff; min-width: 460px; padding: 4px 6px 8px; } .volana-earn-modal__head { font-size: 34px; margin-bottom: 12px; } .volana-earn-balance { border: 4px solid var(--v-border); background: #000; padding: 12px 14px; margin-bottom: 14px; text-align: center; } .volana-earn-balance__num { font-size: 44px; color: var(--v-gold); } .volana-earn-balance__sub { font-size: 18px; color: var(--v-muted); margin-top: 4px; } .volana-earn-balance__stats { font-size: 18px; color: var(--v-cyan); margin-top: 2px; } .volana-earn-note { font-size: 19px; color: var(--v-muted); border-left: 4px solid var(--v-purple); padding: 4px 10px; margin-bottom: 14px; } .volana-earn-section { margin-bottom: 16px; } .volana-earn-section__title { font-size: 24px; color: var(--v-gold); margin-bottom: 8px; } .volana-earn-action { display: block; width: 100%; box-sizing: border-box; min-width: 0; margin-top: 8px; font-size: 24px; padding: 10px 16px; } .volana-earn-ms__row { display: flex; align-items: center; gap: 10px; font-size: 21px; padding: 5px 8px; border-bottom: 2px solid #1c1c22; } .volana-earn-ms__mark { width: 22px; text-align: center; } .volana-earn-ms__label { flex: 1; } .volana-earn-ms__amt { color: var(--v-gold); } .volana-earn-ms__row.is-collected { color: #6b7280; } .volana-earn-ms__row.is-collected .volana-earn-ms__mark { color: var(--v-green); } .volana-earn-ms__row.is-collected .volana-earn-ms__amt { color: #4b5563; } .volana-earn-ms__row.is-ready .volana-earn-ms__mark { color: var(--v-green); } .volana-earn-ms__row.is-locked { color: #6b7280; } .volana-earn-ms__row.is-locked .volana-earn-ms__amt { color: #6b7280; } .volana-earn-foot { margin-top: 6px; font-size: 19px; } /* claim section + success */ .volana-earn-claim { border: 4px solid var(--v-purple); padding: 10px 12px; background: rgba(155, 140, 255, 0.05); } .volana-earn-claim__wallet { font-size: 19px; color: var(--v-purple); margin-bottom: 4px; } .volana-earn-claim__total { font-size: 18px; color: var(--v-muted); margin-top: 6px; text-align: center; } .volana-mono { color: #cfd2d6; } .volana-claim-success { font-family: pixel, "Courier New", monospace; color: #fff; min-width: 420px; padding: 18px 16px 10px; text-align: center; } .volana-claim-success__check { font-size: 64px; line-height: 1; color: var(--v-green); margin-bottom: 8px; } .volana-claim-success__title { font-size: 32px; margin-bottom: 8px; } .volana-claim-success__amt { font-size: 40px; color: var(--v-gold); margin-bottom: 10px; } .volana-claim-success__row { font-size: 21px; color: var(--v-muted); margin-bottom: 4px; } .volana-claim-success__sim { color: #7c8087; } .volana-claim-success__sig { font-size: 18px; color: #6b7280; word-break: break-all; margin: 8px 0 6px; } .volana-claim-success .volana-earn-action { margin-top: 14px; } .volana-earn-btn { cursor: pointer; } @media (max-width: 540px) { .mooners-landing__grid { gap: 12px; } .mooners-hero--card { padding: 18px 14px 16px; } .mooners-hero__actions-row { grid-template-columns: 1fr; } .mooners-hero__tagline { font-size: 22px; } .mooners-hero__sub, .mooners-hero__pitch { font-size: 15px; } .volana-btn { font-size: 22px; padding: 12px 16px; } .volana-login-footer { font-size: 14px; padding: 8px 10px max(10px, env(safe-area-inset-bottom)); } .volana-login-footer__tagline { font-size: 13px; } .volana-ca--hero .volana-ca__addr { max-width: 52vw; font-size: 15px; } .volana-earn-modal { min-width: 0; } } /* ---------- The Mooners landing & progression ---------- */ .mooners-landing__bg { background-position: center center; background-size: cover; image-rendering: pixelated; image-rendering: crisp-edges; animation: wf-sunset-drift 60s ease-in-out infinite alternate; } @keyframes wf-sunset-drift { 0% { transform: scale(1.04) translateY(0); } 100% { transform: scale(1.06) translateY(-1.5%); } } .mooners-landing__overlay { background: radial-gradient(ellipse at 50% 38%, rgba(255, 196, 120, 0.18) 0%, transparent 48%), radial-gradient(ellipse at 82% 18%, rgba(255, 140, 90, 0.1) 0%, transparent 40%), radial-gradient(ellipse at 12% 82%, rgba(40, 60, 100, 0.2) 0%, transparent 42%), linear-gradient(180deg, rgba(20, 10, 36, 0.22) 0%, rgba(12, 8, 20, 0.06) 42%, rgba(10, 12, 22, 0.62) 100%); } .mooners-landing .volana-landing__main { justify-content: center; align-items: center; overflow: hidden; padding: 6px 12px calc(var(--mooners-footer-h, 52px) + 6px); scroll-padding-bottom: calc(var(--mooners-footer-h, 52px) + 8px); overscroll-behavior-y: contain; } .mooners-landing__main { width: 100%; max-width: 920px; margin: 0 auto; padding-top: 0; padding-bottom: calc(var(--mooners-footer-h, 52px) + 8px); max-height: calc(100dvh - var(--mooners-footer-h, 52px) - 44px); } .mooners-landing__grid { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; align-items: center; max-height: 100%; } @media (min-width: 860px) { .mooners-landing__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 12px; align-items: center; } .mooners-landing__side { display: flex; flex-direction: column; justify-content: center; max-height: calc(100dvh - var(--mooners-footer-h, 52px) - 56px); overflow: hidden; } } .mooners-landing__top { padding: 6px 10px; } .mooners-landing__online { border-color: var(--v-lunar-violet); color: var(--v-bright-violet); font-size: 15px; padding: 4px 8px; } .mooners-landing .volana-landing__load { font-size: 15px; padding: 4px 6px; min-width: 36px; } .mooners-landing__side { display: none; } @media (min-width: 860px) { .mooners-landing__side { display: flex; flex-direction: column; gap: 8px; } } .mooners-logo-slot { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0; } .mooners-logo, .mooners-logo-slot .volana-logo { width: min(300px, 88vw); max-height: 88px; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; margin: 0; } .volana-play__mark { object-fit: contain; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mooners-hero__tokens { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 2px 0 4px; } .mooners-token-pill { display: inline-block; padding: 5px 12px; font-size: 15px; letter-spacing: 0.06em; border: 3px solid var(--v-border); background: rgba(13, 11, 31, 0.75); } .mooners-token-pill--mc { color: var(--v-gold); border-color: var(--v-gold); } .mooners-token-pill--mooner { color: var(--v-bright-violet); border-color: var(--v-lunar-violet); } .mooners-scroll-hint { margin: 8px 0 0; font-size: 14px; color: var(--v-muted); opacity: 0.85; text-align: center; animation: mooners-scroll-pulse 2.4s ease-in-out infinite; } @keyframes mooners-scroll-pulse { 0%, 100% { opacity: 0.45; transform: translateY(0); } 50% { opacity: 0.95; transform: translateY(3px); } } .mooners-hero { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .mooners-hero--card { padding: 14px 16px 12px; border: 4px solid rgba(201, 162, 39, 0.55); background: rgba(10, 8, 20, 0.82); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 0 48px rgba(255, 160, 80, 0.04); box-sizing: border-box; backdrop-filter: blur(2px); } .mooners-hero__entry { font-size: 14px; line-height: 1.35; color: var(--v-gold); margin: 0; max-width: 340px; } .mooners-hero__actions { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 320px; margin-top: 2px; } .mooners-hero__actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; } .mooners-hero__actions .volana-btn, .mooners-hero__actions-row .volana-btn { min-width: 0; width: 100%; font-size: 18px; padding: 10px 8px; } .mooners-hero__actions .mooners-btn--enter { font-size: 20px; padding: 12px 10px; } .mooners-hero__title { font-size: clamp(28px, 5vw, 42px); line-height: 1.1; letter-spacing: 0.12em; color: var(--v-silver); text-shadow: 2px 3px 0 var(--v-midnight); margin: 0; } .mooners-hero__tagline { font-size: clamp(17px, 3vw, 22px); color: var(--v-bright-violet); margin: 0; } .mooners-hero__sub, .mooners-hero__pitch { display: none; } .volana-btn--land, .volana-btn--moon, .mooners-btn--enter { border-color: var(--v-lunar-violet) !important; } .volana-btn--land, .volana-btn--moon { background: var(--v-midnight); color: var(--v-silver); border: 4px solid var(--v-gold) !important; } .volana-btn--land:hover, .volana-btn--moon:hover { border-color: var(--v-bright-violet) !important; color: var(--v-bright-violet); } .mooners-plots--compact { padding: 12px 12px 10px; } .mooners-plots--compact .mooners-section__title { font-size: 16px; margin-bottom: 8px; } .mooners-plots--compact .mooners-plots__grid { gap: 6px; } .mooners-plots--compact .mooners-plots__stat { padding: 6px 8px; } .mooners-plots--compact .mooners-plots__k { font-size: 11px; } .mooners-plots--compact .mooners-plots__v { font-size: 14px; } .mooners-plots--compact .mooners-plots__hint { font-size: 12px; margin: 6px 0 0; } .mooners-plots--compact .mooners-plots__map-btn { font-size: 16px; padding: 8px 10px; margin-top: 8px; } .mooners-section__title { font-size: 20px; letter-spacing: 0.08em; color: var(--v-gold); margin: 0 0 14px; text-align: center; } .mooners-journey, .mooners-plots, .mooners-whats-new { width: 100%; padding: 16px 14px; border: 4px solid rgba(110, 181, 217, 0.35); background: rgba(10, 8, 20, 0.82); box-sizing: border-box; backdrop-filter: blur(2px); } .mooners-whats-new__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .mooners-whats-new__item { font-size: 15px; line-height: 1.4; color: var(--v-muted); padding-left: 14px; position: relative; } .mooners-whats-new__item::before { content: "▸"; position: absolute; left: 0; color: var(--v-gold); } .mooners-journey__track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 6px; justify-content: center; } .mooners-journey__step { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--v-muted); padding: 6px 8px; border: 2px solid transparent; } .mooners-journey__step.is-active { color: var(--v-silver); border-color: var(--v-lunar-violet); } .mooners-journey__dot { width: 8px; height: 8px; background: var(--v-lunar-violet); flex-shrink: 0; } .mooners-plots__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; } .mooners-plots__stat--wide { grid-column: 1 / -1; } .mooners-plots__stat { border: 2px solid var(--v-border); padding: 10px; background: var(--v-charcoal); } .mooners-plots__k { display: block; font-size: 14px; color: var(--v-muted); margin-bottom: 4px; } .mooners-plots__v { font-size: 20px; color: var(--v-silver); } .mooners-plots__progress-label { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 6px; color: var(--v-muted); } .mooners-plots__bar { height: 14px; border: 2px solid var(--v-border); background: var(--v-charcoal); } .mooners-plots__bar-fill { height: 100%; background: linear-gradient(90deg, var(--v-lunar-violet), var(--v-gold)); transition: width 0.4s ease; } .mooners-plots__hint { font-size: 14px; line-height: 1.4; color: var(--v-muted); margin: 0 0 10px; text-align: center; } .mooners-plots__hint--deed { margin-top: 8px; margin-bottom: 12px; } .mooners-plots__map-btn { width: 100%; } /* In-game Mooners HUD bar */ #mooners-hud-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 190; display: none; padding: 6px 10px; font-size: 16px; line-height: 20px; color: var(--v-silver); background: rgba(13, 11, 31, 0.92); border-bottom: 3px solid var(--v-lunar-violet); text-align: center; pointer-events: none; font-family: pixel, "Courier New", monospace; } body.volana-simple-mode.mooners-in-game #mooners-hud-bar { display: block; } body.volana-simple-mode.mooners-in-game #topmid { margin-top: 32px; } .mooners-lunar-map { min-width: 520px; max-width: 92vw; } .mooners-lunar-map__head { font-size: 26px; color: var(--v-gold); margin-bottom: 10px; text-align: center; } .mooners-lunar-map__filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; justify-content: center; } .mooners-lunar-map__filter { font-size: 14px; padding: 6px 10px; border: 2px solid var(--v-border); background: var(--v-charcoal); cursor: pointer; color: var(--v-muted); } .mooners-lunar-map__filter.is-on { border-color: var(--v-bright-violet); color: var(--v-silver); } .mooners-lunar-grid { display: grid; gap: 2px; margin: 0 auto 12px; width: max-content; max-width: 100%; max-height: min(52vh, 420px); overflow: auto; border: 3px solid var(--v-border); padding: 4px; background: #0a0818; } .mooners-lunar-cell { width: 14px; height: 14px; border: none; padding: 0; cursor: pointer; } .mooners-lunar-cell.is-available { background: var(--v-silver); opacity: 0.35; } .mooners-lunar-cell.is-owned { background: var(--v-lunar-violet); } .mooners-lunar-cell.is-listed { background: var(--v-gold); } .mooners-lunar-cell.is-guild { background: var(--v-cyan); } .mooners-lunar-cell.is-founder { background: #ece6ff; box-shadow: 0 0 4px var(--v-bright-violet); } .mooners-lunar-card { border: 3px solid var(--v-border); padding: 12px; margin-top: 10px; font-size: 16px; line-height: 1.45; } .mooners-lunar-card__title { color: var(--v-gold); font-size: 20px; margin-bottom: 8px; } @media (max-width: 540px) { .mooners-journey__step { font-size: 13px; } #mooners-hud-bar { font-size: 13px; padding: 5px 6px; } } /* ---------- Static pages (/about, /earn, /moon) ---------- */ .volana-static-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; color: var(--v-text); font-family: pixel, "Courier New", monospace; background: radial-gradient(ellipse at 80% 0%, rgba(116, 86, 217, 0.15) 0%, transparent 50%), linear-gradient(180deg, #0D0B1F 0%, #12101f 100%); } .volana-static-page__nav { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: rgba(13, 11, 31, 0.94); border-bottom: 4px solid #2a2a30; } .volana-static-page__links { display: flex; flex-wrap: wrap; gap: 12px 16px; font-size: 18px; } .volana-static-page__links .volana-link--play { color: var(--v-gold); } .volana-static-page__main { flex: 1 1 auto; width: min(720px, 94vw); margin: 0 auto; padding: 28px 16px 48px; box-sizing: border-box; } .volana-static-page__main--moon, .volana-static-page__main--about { width: min(680px, 94vw); } .volana-static-page__footer { flex-shrink: 0; padding: 16px; text-align: center; font-size: 16px; color: var(--v-muted); border-top: 4px solid #2a2a30; background: #000; } .volana-static-page__card { border: 4px solid var(--v-border); background: var(--v-bg); padding: 18px; font-size: 22px; line-height: 1.45; color: var(--v-muted); } .mooners-page { text-align: center; font-family: pixel, "Courier New", monospace; } .mooners-page__title { font-size: clamp(32px, 6vw, 44px); color: var(--v-silver); margin: 0 0 12px; } .mooners-page__lead { font-size: 20px; line-height: 1.45; color: var(--v-muted); max-width: 520px; margin: 0 auto 24px; } .mooners-page__note { font-size: 16px; color: var(--v-muted); }