/*
Theme Name: Luna Lexuz
Author: Luna Lexuz
Description: A one-page pink-neon profile arcade with a playful fortune machine and Lucky Coins.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: luna-lexuz
Tags: one-column, custom-logo, custom-colors, entertainment
*/

:root {
  --background: hsl(280 50% 5%);
  --foreground: hsl(210 20% 98%);
  --primary: hsl(330 100% 50%);
  --primary-foreground: hsl(210 20% 98%);
  --muted-foreground: hsl(280 10% 65%);
  --accent: hsl(45 100% 50%);
  --accent-foreground: hsl(280 50% 5%);
  --neon: hsl(330 100% 60%);
  --border: hsl(210 20% 98% / .15);
  --surface: hsl(280 50% 10% / .6);
  --surface-highlight: hsl(210 20% 98% / .1);
  --pink-shadow: hsl(330 100% 50% / .3);
  --pink-shadow-strong: hsl(330 100% 50% / .6);
  --gold-light: hsl(48 96% 80%);
  --gold-shadow: hsl(45 100% 50% / .4);
  --shine: hsl(210 20% 98% / .35);
  --title-gradient: linear-gradient(to bottom, var(--foreground), var(--primary));
  --coin-gradient: linear-gradient(45deg, var(--accent), var(--gold-light), var(--accent));
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: 'Outfit', 'Noto Emoji', sans-serif; }
a { color: inherit; }
button, input { font: inherit; }
[hidden] { display: none !important; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 10; padding: 12px 20px; background: var(--primary); color: var(--primary-foreground); }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.arcade { min-height: 100vh; max-width: 1100px; margin: auto; padding: 64px 24px 32px; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.profile { text-align: center; }
.profile h1 { margin: 0; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 104px; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; background: var(--title-gradient); background-clip: text; -webkit-background-clip: text; color: transparent; }
.profile p { margin: 18px 0 0; color: var(--muted-foreground); font-size: 14px; text-transform: uppercase; }
.custom-logo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); margin-bottom: 22px; }
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 0; }
.stat, .glass { background: var(--surface); border: 1px solid var(--border); box-shadow: inset 0 1px var(--surface-highlight); backdrop-filter: blur(16px); }
.stat { padding: 14px 22px; border-radius: 16px; text-align: center; }
.stat dt { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; color: var(--primary); }
.stat:nth-child(2) dt { color: var(--accent); }
.stat:nth-child(3) dt { color: var(--neon); }
.stat dd { margin: 5px 0 0; font-size: 12px; color: var(--muted-foreground); }
.oracle { width: 100%; max-width: 512px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.machine { width: 100%; border-radius: 32px; padding: 38px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.machine::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, var(--shine) 50%, transparent 60%); background-size: 200% 100%; animation: shine 5s infinite; }
.crystal { font-size: 72px; line-height: 1.2; }
.prompt { font-size: 18px; color: var(--muted-foreground); margin: 0; }
.fortune { width: 100%; margin: 0; padding: 18px 0; border-top: 1px solid var(--border); font-size: 20px; line-height: 1.5; animation: reveal .4s ease-out; }
.reward { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: reveal .4s ease-out; }
.coin { width: 56px; height: 56px; border-radius: 50%; background: var(--coin-gradient); border: 2px solid var(--border); color: var(--accent-foreground); display: grid; place-items: center; font-size: 24px; font-weight: 700; animation: spin 3s linear infinite; }
.reward p { margin: 0; font-size: 14px; color: var(--muted-foreground); }
.ask { position: relative; width: 100%; min-height: 60px; border: 0; padding: 16px 20px; border-radius: 16px; background: var(--primary); color: var(--primary-foreground); font-weight: 600; font-size: 18px; white-space: normal; cursor: pointer; box-shadow: 0 0 24px var(--pink-shadow); transition: transform .15s, box-shadow .15s; }
.ask:hover { transform: translateY(-2px); box-shadow: 0 0 36px var(--pink-shadow-strong); }
.ask:active { transform: scale(.97); }
.ask:disabled { opacity: .6; cursor: wait; }
.counter { border-radius: 16px; padding: 16px 24px; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.counter-icon { font-size: 24px; }
.counter output { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.counter.updated output { animation: glow 1.5s ease-in-out; }
.machine.thinking { animation: shake .8s ease-in-out; }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.social { display: flex; gap: 10px; align-items: center; padding: 12px 20px; border-radius: 16px; text-decoration: none; font-size: 14px; transition: transform .15s; }
a.social:hover { transform: translateY(-3px); }
span.social { color: var(--muted-foreground); }
.page-content { width: 100%; max-width: 720px; line-height: 1.7; overflow-wrap: anywhere; }
.page-content img { max-width: 100%; height: auto; }
.copyright { margin: 0; font-size: 12px; color: var(--muted-foreground); text-align: center; }
.no-script { color: var(--muted-foreground); text-align: center; }
@keyframes shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotateY(360deg); } }
@keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shake { 0%,100% { transform: rotate(0); } 20%,60% { transform: rotate(-3deg); } 40%,80% { transform: rotate(3deg); } }
@keyframes glow { 50% { text-shadow: 0 0 24px var(--gold-shadow); } }
@media (max-width: 700px) { .arcade { padding: 40px 16px 24px; gap: 34px; } .profile h1 { font-size: 60px; } .stats { gap: 12px; } .stat { padding: 12px 16px; } .machine { padding: 28px 24px; } }
@media (max-width: 400px) { .profile h1 { font-size: 46px; } .ask { font-size: 16px; } .stat { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }