/* EcoGame original cosmic theme; public React Bits text patterns adapted with attribution. */
body { background: #071210; color: #e9f9ef; }
.eco-audio-controls { position:fixed; right:18px; bottom:18px; z-index:90; display:flex; flex-wrap:wrap; align-items:center; gap:10px; max-width:300px; padding:10px 14px; border:1px solid #b5eed650; border-radius:18px; background:#12352ff2; color:#e3f7dc; box-shadow:0 8px 32px #0005; font:12px/1.5 sans-serif; }
.eco-audio-controls button { border:0; border-radius:10px; padding:7px 10px; background:#d3ed9d; color:#16352a; font-weight:700; cursor:pointer; }
.eco-audio-controls input { width:65px; accent-color:#d3ed9d; }
.eco-audio-status:not(:empty) { width:100%; color:#ffe0af; }
.eco-audio-status:empty { display:none; }
.eco-rights-notice { padding-bottom:100px; }
body::before, body::after { display: none; }
header { background: rgba(9,27,24,.88); border-color: #b8f7df26; color:#e1f8ed; box-shadow:0 12px 40px #0005; }
header .logo, header nav a { color:#e9f9ef; }
header button { border-color:#b6e7d32b; }
header .sound { background:#183a31; color:#cdecac; }
header .login-btn { color:#d9eedd; }
.hero { position:relative; isolation:isolate; max-width:1320px; margin:24px auto 0; min-height:650px; padding:60px 64px 80px; gap:28px; border:1px solid #86e9c01c; border-radius:36px; background:radial-gradient(ellipse at 78% 45%,#152a3822,transparent 60%),#07110f; }
.hero::after { content:''; pointer-events:none; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(90deg,#07110fbd,transparent 70%); }
.eco-space-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-2; border-radius:inherit; }
.hero .eyebrow { color:#b3cfbf; font-size:12px; letter-spacing:.06em; }
.hero .eyebrow>span { color:#0b271d; background:#c8f37a; }
.hero h1 { color:#f0f9ed; font-size:clamp(48px,5.6vw,76px); letter-spacing:-.07em; line-height:1.2; }
.eco-depth-line { display:block; perspective:1000px; margin:6px 0; }
.eco-depth-stage { position:relative; display:inline-grid; transform-style:preserve-3d; transform:rotateX(-6deg) rotateY(-9deg); animation:eco-depth-orbit 9s ease-in-out infinite alternate; }
.eco-depth-layer,.eco-depth-face { grid-area:1/1; white-space:nowrap; backface-visibility:hidden; }
.eco-depth-layer { position:absolute; inset:0; pointer-events:none; }
.eco-depth-face { position:relative; color:#f2f8e9; transform:translateZ(1px); text-shadow:0 14px 22px #0004; }
.eco-depth-line:last-child .eco-depth-face { color:#d3f69a; }
@keyframes eco-depth-orbit { to { transform:rotateX(7deg) rotateY(8deg); } }
.hero-copy>p { color:#bbd0c7; }
.hero-note p,.hero-note b { color:#aac8b8; }
.hero-buttons .primary { background:linear-gradient(110deg,#cbee80,#82dfc0,#cbee80); background-size:200%; color:#132c22; box-shadow:0 0 28px #9bdf8140; animation:eco-gradient-flow 6s ease infinite; }
.hero-buttons .secondary { background:#122e26; border:1px solid #badbce3b; color:#e5f5e8; }
.hero-visual { height:500px; border-radius:0; background:none; box-shadow:none; }
.hero-visual > :not(.eco-universe-display) { display:none; }
.eco-universe-display { position:relative; height:100%; display:grid; place-items:center; transform-style:preserve-3d; }
.eco-friend-card[hidden] { display:none; }
.eco-earth-scene { position:absolute; width:min(440px,100%); aspect-ratio:1; left:50%; top:47%; transform:translate(-50%,-50%); animation:eco-earth-bob 7s ease-in-out infinite; }
.eco-earth-canvas { width:100%; height:100%; }
.eco-earth-routes { position:absolute; inset:0; pointer-events:none; }
.eco-earth-routes svg { width:100%; height:100%; overflow:visible; }
.eco-earth-routes path { stroke:#e3ffbf; stroke-width:1.8; stroke-dasharray:8 12 28 130; animation:eco-route-flow 12s linear infinite; opacity:.8; }
.eco-earth-routes path:nth-child(2) { stroke:#dfc7ff; animation-delay:-4s; }
.eco-earth-routes circle { fill:#e8ffd0; stroke:#91e8d5; stroke-width:2; }
@keyframes eco-route-flow { to { stroke-dashoffset:-534; } }
.eco-earth-scene::before { content:''; position:absolute; inset:2%; border:1px solid #a7ffe35e; border-radius:50%; transform:rotate(-24deg) scaleY(.35) scaleX(1.16); pointer-events:none; box-shadow:0 0 22px #87eab521; }
.hero-visual:hover .eco-earth-smile { scale:1.15; transition:scale .25s ease; }
:is(header,.hero,.game-card,.mission,footer,.game-modal,.eco-audio-controls) :is(button,a) { transition:transform .22s ease,box-shadow .22s ease,background .22s ease; }
:is(header,.hero,.game-card,.mission,footer,.game-modal) :is(button,a) svg { transition:transform .25s cubic-bezier(.2,.9,.3,1.5); transform-origin:center; }
@media(hover:hover) and (pointer:fine){
 :is(header,.hero,.mission,footer,.eco-audio-controls) :is(button,a):hover { transform:translateY(-3px); }
 :is(header,.hero,.game-card,.mission,footer,.game-modal) :is(button,a):hover svg { transform:scale(1.22) rotate(-9deg); }
 .game-card:hover .game-art { scale:1.09; transition:scale .3s ease; }
 .quick-stats>div:hover svg { transform:scale(1.25) rotate(10deg); transition:transform .25s ease; }
 .hero-note .avatars span:hover { transform:translateY(-6px) scale(1.2); transition:transform .25s ease; }
}
:is(button,a):focus-visible { outline:3px solid #b8e97d; outline-offset:4px; }
.eco-earth-face { position:absolute; inset:0; pointer-events:none; }
.eco-earth-eye { position:absolute; top:40%; width:5%; height:7%; background:#163d36; border-radius:50%; box-shadow:inset 1px 2px #061c17; animation:eco-earth-blink 6s infinite; }
.eco-earth-eye::after { content:''; position:absolute; width:27%; height:22%; top:15%; left:19%; background:#fff; border-radius:50%; }
.eco-earth-eye.left { left:36%; }.eco-earth-eye.right { right:36%; }
.eco-earth-cheek { position:absolute; width:9%; height:4%; top:49%; border-radius:50%; background:#f8a89c80; }
.eco-earth-cheek.left { left:27%; }.eco-earth-cheek.right { right:27%; }
.eco-earth-smile { position:absolute; width:17%; height:10%; left:41.5%; top:50%; background:#183d37; border-radius:10% 10% 55% 55%/10% 10% 90% 90%; overflow:hidden; }
.eco-earth-smile>i { position:absolute; width:65%; height:55%; left:18%; bottom:-12%; border-radius:50%; background:#ed8c91; }
.eco-earth-fallback { border-radius:50%; width:76%; background:radial-gradient(ellipse at 35% 34%,#acd974 0 16%,transparent 17%),radial-gradient(ellipse at 66% 72%,#9bcb67 0 22%,transparent 23%),radial-gradient(circle at 30% 25%,#8bddc8,#39a6ad 60%,#1c6872); box-shadow:inset -25px -18px 45px #061e4055,0 0 50px #5acfaf33; }
@keyframes eco-earth-bob { 50% { transform:translate(-50%,calc(-50% - 12px)) rotate(-2deg); } }
@keyframes eco-earth-blink { 0%,43%,47%,100% { scale:1 1; } 45% { scale:1 .12; } }
.eco-orbit-label { position:absolute; top:18px; left:30px; letter-spacing:.26em; font:700 11px/1.5 Manrope,sans-serif; color:#a2e5d1; }
.eco-orbit-label.eco-shiny { position:absolute; }
.eco-friend-card { position:absolute; width:150px; aspect-ratio:1; border-radius:24px; padding:7px; background:linear-gradient(130deg,#f1ffe6c9,#87d8b74d); border:1px solid #d3ffe29e; box-shadow:0 20px 60px #0009,0 0 28px #92e6c225; animation:eco-friend-float 7s ease-in-out infinite; }
.eco-friend-card img { width:100%; height:100%; object-fit:cover; border-radius:18px; }
.eco-friend-card:nth-of-type(1) { width:205px; left:18%; top:21%; rotate:-12deg; z-index:3; }
.eco-friend-card:nth-of-type(2) { right:1%; top:39%; rotate:13deg; animation-delay:-2s; z-index:4; }
.eco-friend-card:nth-of-type(3) { left:8%; bottom:5%; rotate:5deg; animation-delay:-4s; z-index:5; }
.eco-orbit-caption { position:absolute; right:7%; bottom:6%; text-align:right; color:#e1f5e3; font-size:12px; line-height:1.8; }
.eco-orbit-caption b { display:block; font-size:18px; color:#d7f295; }
@keyframes eco-friend-float { 50% { translate:0 -16px; } }
.eco-rotate-copy { display:flex; align-items:center; gap:8px; margin:22px 0 16px; color:#a3c7b8; font-size:13px; }
.eco-rotate-word { display:inline-block; min-width:100px; color:#ddf89d; font-weight:800; }
.eco-word-in { animation:eco-word-turn .6s ease both; }
@keyframes eco-word-turn { from { opacity:0; transform:translateY(10px) rotateX(-70deg); } to { opacity:1; transform:none; } }
.quick-stats { position:relative; z-index:2; background:linear-gradient(120deg,#123228,#112023); color:#e4f8e4; border-color:#b4ffcb26; margin:24px auto 80px; box-shadow:0 16px 40px #0004; }
.quick-stats>div { border-color:#c2f7dc26; }
.quick-stats span { color:#a9c8b8; }
.quick-stats b { color:#cffb9c; font-size:23px; }
.games-section { background:linear-gradient(180deg,#09181c,#10222a 45%,#081915); isolation:isolate; overflow:hidden; }
.games-section::before { opacity:.3; }
.section-heading { gap:24px; }
.section-heading h2 { font-size:clamp(34px,4vw,54px); }
.eco-masked-heading { color:#b9eaca; background-image:radial-gradient(ellipse at 30% 50%,#fff4b2 0%,#93f4bc 23%,#8fbeff 42%,#d8b9ff 62%,#a3f4d1 80%,#fff0aa); background-size:240% 180%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:eco-mask-drift 12s ease-in-out infinite alternate; }
.section-heading h2.eco-masked-heading { background-image:linear-gradient(110deg,#d5ffa533,#d8c2ff44),url('/assets/memory/forest-20261002/fox.png'); background-size:180% auto; background-position:30% 50%; filter:brightness(1.65); }
@keyframes eco-mask-drift { to { background-position:95% 80%; } }
.eco-split-char { display:inline-block; white-space:pre; }
.eco-split-active .eco-split-char { animation:eco-letter-rise .65s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--char-index)*35ms); }
@keyframes eco-letter-rise { from { opacity:0; transform:translateY(24px) rotateX(-40deg); } to { opacity:1; transform:none; } }
.eco-blur-active { animation:eco-blur-enter 1s ease both; }
@keyframes eco-blur-enter { from { filter:blur(9px); opacity:0; translate:0 16px; } to { filter:blur(0); opacity:1; translate:0 0; } }
.eco-gradient-text { color:#acddbc; background:linear-gradient(90deg,#d5f4a0,#75e6d8,#9fbdff,#e0b9fa,#d5f4a0); background-size:250% auto; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:eco-gradient-flow 7s linear infinite; }
@keyframes eco-gradient-flow { to { background-position:250% center; } }
.eco-shiny { position:relative; background:linear-gradient(110deg,#a8d4bf 20%,#fff 43%,#d5ffa5 50%,#a8d4bf 63%); background-size:220% 100%; color:transparent; background-clip:text; -webkit-background-clip:text; animation:eco-gradient-flow 5s linear infinite; }
.game-card { background:#f2f6eb; border-color:#c6efdd55; box-shadow:0 22px 50px #0006; }
.game-card h3 { min-height:1.3em; }
.game-card:hover { box-shadow:0 30px 70px #0009,0 0 0 1px #b1e59988,0 0 32px #b1e59925; }
.game-card .card-top { position:relative; }
.game-card .card-top::before { content:''; position:absolute; width:80%; height:180%; left:-100%; top:-40%; rotate:25deg; background:linear-gradient(90deg,transparent,#ffffff70,transparent); transition:left .75s ease; pointer-events:none; }
.game-card:hover .card-top::before { left:150%; }
.game-card .game-art { animation:eco-art-drift 5s ease-in-out infinite alternate; }
.game-card:nth-child(even) .game-art { animation-delay:-2s; }
@keyframes eco-art-drift { to { translate:0 -7px; rotate:2deg; } }
.match-art span { overflow:hidden; }
.match-art span img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.mission { background:radial-gradient(ellipse at 10% 20%,#376249,#112e29 68%); border:1px solid #a8e5b342; box-shadow:0 28px 80px #0005; }
.mission h2 { color:#dcf3c4; }
.mission-label { color:#b4d490; }
.mission-copy p { color:#b0cfc0; }
.mission-copy button { background:#d0ed93; color:#183c30; }
.mission-card { color:#173c34; }
.about { color:#dbeddf; position:relative; background:radial-gradient(ellipse at center,#183a332b,transparent 68%); }
.about p { color:#a9c9b9; }
.about h2 { color:#e4fae2; }
.about h2 em { color:#b9f3b8; }
.eco-scroll-word { display:inline-block; margin-right:.18em; transition:opacity .5s,color .5s; }
.eco-scroll-word.is-lit { color:#d6f99c; }
.eco-rights-notice { background:#0d211c; border-color:#ccffe224; color:#a6c8b6; }
.eco-rights-notice strong { color:#d8ecd7; }
.eco-rights-notice a { color:#b7e9a6; }
.memory-mix-info { display:flex; flex-wrap:wrap; gap:5px 8px; align-items:center; }
.memory-mix-info>span { background:#ffffffb3; color:#254f3e; border:1px solid #45744d22; border-radius:99px; padding:3px 8px; font-size:11px; font-weight:700; }
.memory-mix-info small { font-size:10px; color:#466255; margin-left:auto; }
.memory-card[data-kind="forest"] .card-face b { max-width:calc(100% - 12px); white-space:nowrap; }
.game-modal { color:#173c34; }
html.eco-game-open .hero *,html.eco-game-open .games-section .game-art { animation-play-state:paused !important; }
@media(max-width:1000px){
 .hero { margin:18px 18px 0; padding:44px 28px; grid-template-columns:1fr; }
 .hero-copy { text-align:center; }
 .eco-rotate-copy { justify-content:center; }
 .hero-visual { width:min(500px,100%); margin:auto; }
 .quick-stats { margin-inline:18px; }
}
@media(max-width:600px){
 .hero { margin:12px 10px 0; padding:35px 18px 30px; border-radius:26px; gap:12px; }
 .hero h1 { font-size:48px; letter-spacing:-.065em; }
 .hero-copy>p { font-size:13px; margin:22px 0; }
 .hero-visual { height:335px; }
 .eco-earth-scene { width:330px; max-width:108%; top:45%; }
 .eco-friend-card:nth-of-type(1) { width:150px; top:18%; left:15%; }
 .eco-friend-card:nth-of-type(2) { width:108px; right:0%; top:40%; }
 .eco-friend-card:nth-of-type(3) { width:105px; left:4%; bottom:2%; }
 .eco-orbit-label { left:20px; top:0; font-size:9px; }
 .eco-orbit-caption { bottom:0; right:0; font-size:10px; }
 .eco-orbit-caption b { font-size:15px; }
 .quick-stats { margin:20px 12px 55px; }
 .quick-stats b { font-size:17px; }
 .section-heading h2 { font-size:34px; }
 .games-section { padding-inline:20px; }
 .memory-mix-info small { width:100%; margin:2px 0 0; }
}
@media(prefers-reduced-motion:reduce){
 .hero *, .games-section *, .mission *, .about *, .eco-shiny { animation:none !important; transition:none !important; }
 .eco-depth-stage { transform:rotateX(-4deg) rotateY(-6deg); }
 .eco-split-char, .eco-blur-active { opacity:1; filter:none; translate:none; }
 .eco-earth-scene,.eco-earth-eye { animation:none !important; }
 .eco-earth-routes path { animation:none !important; }
}