/*
Theme Name: Ravixa
Description: Custom theme for Ravixa, a vibrant creature-collecting adventure game. Bright jewel-tone palette (coral/emerald/gold — not neon), Fredoka display type, flip creature cards, interactive biome map, live battle-arena widget with animated HP bars.
Version: 1.0
*/

:root{
  --bg:        #FFF9F2;
  --surface:   #FFFFFF;
  --surface-2: #FFF0DC;
  --ink:       #1B1F3B;
  --ink-dim:   #5C6088;
  --coral:     #FF5D73;
  --coral-deep:#D93F55;
  --emerald:   #1FAE8E;
  --gold:      #FFC93C;
  --sky:       #3E8EDE;
  --violet:    #7C5CFF;
  --font-display:'Fredoka', sans-serif;
  --font-body: 'Mulish', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --radius:    18px;
  --container: 1200px;
}

@media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); margin:0; line-height:1.65; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.1; margin:0 0 .5em; color:var(--ink); }
h1{ font-size:clamp(2.6rem,5.4vw,4.4rem); }
h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; color:var(--ink-dim); }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.eyebrow{ font-family:var(--font-mono); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--coral-deep); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; font-weight:700; }
.eyebrow::before{ content:'✦'; color:var(--gold); font-size:1rem; }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:15px 32px; border-radius:999px; font-family:var(--font-display); font-weight:600; font-size:1.05rem; cursor:pointer; border:none; transition:transform .15s ease, box-shadow .15s ease; }
.btn-primary{ background:var(--coral); color:#fff; box-shadow:0 6px 0 var(--coral-deep); }
.btn-primary:hover{ transform:translateY(2px); box-shadow:0 4px 0 var(--coral-deep); }
.btn-ghost{ background:var(--surface); color:var(--ink); border:2px solid var(--ink); }
.btn-ghost:hover{ background:var(--surface-2); }

/* HEADER */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,249,242,.94); backdrop-filter:blur(8px); border-bottom:2px solid rgba(27,31,59,.08); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:82px; }
.logo svg{ height:42px; width:auto; }
.primary-nav ul{ list-style:none; display:flex; gap:22px; margin:0; padding:0; }
.primary-nav a{ font-family:var(--font-display); font-weight:500; font-size:1.02rem; color:var(--ink-dim); }
.primary-nav a.current{ color:var(--coral); }
.menu-toggle{ display:none; background:var(--surface-2); border:2px solid var(--ink); border-radius:10px; cursor:pointer; padding:8px 12px; font-family:var(--font-display); }
@media (max-width:900px){
  .primary-nav{ position:fixed; inset:82px 0 0 0; background:var(--bg); transform:translateY(-110%); transition:transform .3s ease; overflow-y:auto; }
  .primary-nav.open{ transform:translateY(0); }
  .primary-nav ul{ flex-direction:column; padding:24px; gap:0; }
  .primary-nav a{ display:block; padding:16px 4px; font-size:1.2rem; border-bottom:1px solid var(--surface-2); }
  .menu-toggle{ display:block; }
  .header-cta .btn-primary{ display:none; }
}
.header-cta{ display:flex; align-items:center; gap:14px; }

/* HERO — immersive full-bleed collage with floating overlapping cards */
.hero{ position:relative; padding:0; overflow:visible; }
.hero-bg{ position:relative; min-height:92vh; display:flex; align-items:center; background-image:url('images/hero-world.png'); background-size:cover; background-position:center; overflow:hidden; }
.hero-bg::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 40%, rgba(255,249,242,.15), rgba(255,249,242,.75) 65%); }
.hero-grid{ position:relative; z-index:2; width:100%; text-align:center; padding:40px 0; }
.hero h1{ max-width:16ch; margin:0 auto .3em; }
.hero .lede{ max-width:52ch; margin:0 auto 1em; font-size:1.2rem; }
.hero-actions{ display:flex; gap:16px; margin-top:10px; flex-wrap:wrap; justify-content:center; }
.hero-badges{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; justify-content:center; }

/* Floating collage cards, positioned over the hero art */
.float-card{ position:absolute; z-index:3; background:var(--surface); border-radius:20px; padding:16px 20px; box-shadow:0 16px 30px -10px rgba(27,31,59,.3); display:flex; align-items:center; gap:12px; animation:float-bob 5s ease-in-out infinite; }
.float-card .emoji{ font-size:1.8rem; }
.float-card strong{ display:block; font-family:var(--font-display); font-size:1.05rem; }
.float-card span{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-dim); }
@keyframes float-bob{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-14px) rotate(var(--r,0deg)); } }
.float-1{ top:12%; left:6%; --r:-6deg; animation-delay:0s; }
.float-2{ top:20%; right:6%; --r:5deg; animation-delay:1s; }
.float-3{ bottom:14%; left:9%; --r:4deg; animation-delay:2s; }
.float-4{ bottom:10%; right:8%; --r:-4deg; animation-delay:1.6s; }
@media (max-width:1000px){ .float-card{ display:none; } }

.sparkle{ position:absolute; color:var(--gold); font-size:1.4rem; animation:sparkle-twinkle 2.4s ease-in-out infinite; z-index:2; }
@keyframes sparkle-twinkle{ 0%,100%{ opacity:.2; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.2); } }
.hero-badge{ background:var(--surface); border:2px solid var(--ink); border-radius:999px; padding:8px 16px; font-family:var(--font-display); font-size:.85rem; }

/* Organic wave divider — replaces straight-edge colored bands */
.wave-top{ display:block; width:100%; height:70px; margin-bottom:-2px; }
.wave-bottom{ display:block; width:100%; height:70px; margin-top:-2px; }

/* Floating stat strip under hero — dense, no empty space */
.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--ink); border-radius:20px; margin-top:-50px; position:relative; z-index:2; box-shadow:0 14px 30px -10px rgba(27,31,59,.35); }
.stat-strip .stat{ padding:26px 20px; text-align:center; border-right:1px solid rgba(255,255,255,.12); }
.stat-strip .stat:last-child{ border-right:none; }
.stat-strip .stat strong{ display:block; font-family:var(--font-display); font-size:2rem; color:var(--gold); }
.stat-strip .stat span{ font-family:var(--font-mono); font-size:.72rem; color:#C9CCE6; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:800px){ .stat-strip{ grid-template-columns:repeat(2,1fr); } .stat-strip .stat:nth-child(2){ border-right:none; } }

section{ padding:80px 0; }
.section-head{ max-width:660px; margin-bottom:44px; }
.emerald-band{
  background:
    radial-gradient(ellipse 60% 80% at 15% 20%, rgba(255,201,60,.35), transparent 60%),
    radial-gradient(ellipse 70% 90% at 85% 80%, rgba(62,142,222,.3), transparent 60%),
    var(--emerald);
  color:#fff; position:relative;
}
.emerald-band h2, .emerald-band .eyebrow{ color:#fff; }
.emerald-band p{ color:#D3F3EC; }
.emerald-band .eyebrow::before{ color:var(--gold); }
.violet-band{
  background:
    radial-gradient(ellipse 65% 80% at 80% 15%, rgba(255,93,115,.35), transparent 60%),
    radial-gradient(ellipse 60% 85% at 10% 85%, rgba(255,201,60,.28), transparent 60%),
    var(--violet);
  color:#fff;
}
.violet-band h2, .violet-band .eyebrow{ color:#fff; }
.violet-band p{ color:#E4DCFF; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:1fr 1fr; } }
.card{ background:var(--surface); border-radius:var(--radius); padding:28px; box-shadow:0 8px 24px -8px rgba(27,31,59,.15); border:2px solid rgba(27,31,59,.06); }
.card .num{ font-family:var(--font-mono); color:var(--coral); font-size:.85rem; font-weight:700; }

/* CREATURE SCRAPBOOK — signature widget, varied size/rotation, not a uniform scroller */
.creature-scrapbook{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; padding:20px 10px 30px; }
.creature-card{ perspective:1000px; height:270px; cursor:pointer; margin:14px -18px; transition:transform .2s ease, z-index 0s; position:relative; }
.creature-card:hover{ transform:translateY(-10px) scale(1.05) !important; z-index:9; }
.creature-card:nth-child(1){ width:210px; transform:rotate(-7deg); z-index:1; }
.creature-card:nth-child(2){ width:230px; transform:rotate(4deg) translateY(-16px); z-index:2; }
.creature-card:nth-child(3){ width:250px; transform:rotate(-2deg) translateY(10px); z-index:3; }
.creature-card:nth-child(4){ width:230px; transform:rotate(6deg) translateY(-8px); z-index:2; }
.creature-card:nth-child(5){ width:210px; transform:rotate(-5deg); z-index:1; }
.creature-card-inner{ position:relative; width:100%; height:100%; transition:transform .5s; transform-style:preserve-3d; }
.creature-card.flipped .creature-card-inner{ transform:rotateY(180deg); }
.creature-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:22px; border:4px solid var(--ink); padding:20px; display:flex; flex-direction:column; box-shadow:0 12px 26px -8px rgba(27,31,59,.3); }
.creature-front{ background:var(--surface-2); align-items:center; justify-content:center; text-align:center; }
.creature-front .icon{ font-size:4rem; margin-bottom:10px; }
.creature-back{ background:var(--ink); color:#fff; transform:rotateY(180deg); justify-content:center; }
.creature-back h4{ color:var(--gold); margin-bottom:8px; }
.creature-back p{ color:#C9CCE6; font-size:.85rem; }
.creature-type{ font-family:var(--font-mono); font-size:.72rem; padding:3px 10px; border-radius:999px; display:inline-block; margin-top:8px; }
@media (max-width:800px){ .creature-card{ margin:14px -6px; } .creature-card:nth-child(n){ transform:rotate(0); } }

/* BIOME TRAIL — winding path connecting biome nodes, replaces plain grid */
.biome-trail{ position:relative; padding:40px 20px; }
.trail-line{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
.biome-nodes{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; }
.biome-tile{ position:relative; border-radius:50%; width:130px; height:130px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; cursor:pointer; border:4px solid var(--ink); transition:transform .2s ease; color:#fff; box-shadow:0 10px 22px -6px rgba(27,31,59,.35); }
.biome-tile:nth-child(odd){ transform:translateY(-18px); }
.biome-tile:hover, .biome-tile.active{ transform:translateY(-30px) scale(1.06); }
.biome-tile .icon{ font-size:2rem; }
.biome-tile h4{ font-size:.85rem; margin:2px 0 0; color:#fff; }
@media (max-width:900px){ .biome-nodes{ justify-content:center; } .biome-tile:nth-child(odd){ transform:translateY(0); } }
.biome-detail{ display:none; background:var(--surface); border-radius:var(--radius); padding:26px; margin-top:24px; border:2px solid rgba(27,31,59,.08); }
.biome-detail.active{ display:block; }

/* BATTLE ARENA — signature live widget */
.battle-arena{ background:var(--ink); border-radius:24px; padding:32px; color:#fff; }
.battle-row{ display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.battle-row .name{ font-family:var(--font-display); width:120px; flex-shrink:0; }
.hp-bar{ flex:1; height:20px; background:rgba(255,255,255,.12); border-radius:999px; overflow:hidden; }
.hp-fill{ height:100%; border-radius:999px; transition:width 1s ease; }
.hp-fill.you{ background:var(--emerald); }
.hp-fill.foe{ background:var(--coral); }
.battle-log{ font-family:var(--font-mono); font-size:.85rem; color:#C9CCE6; background:rgba(255,255,255,.06); border-radius:10px; padding:14px; margin-top:16px; }

/* REVIEWS carousel */
.review-track{ display:flex; gap:22px; overflow-x:auto; padding:6px 4px 24px; }
.review-card{ flex:0 0 300px; background:var(--surface); border-radius:var(--radius); padding:26px; box-shadow:0 8px 24px -8px rgba(27,31,59,.15); }
.review-stars{ color:var(--gold); font-size:1.2rem; margin-bottom:10px; }
.review-who{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-dim); margin-top:12px; display:block; }

/* NEWS (blog) */
.news-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:28px; }
.news-card{ background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:0 8px 24px -8px rgba(27,31,59,.15); }
.news-card img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.news-card .inner{ padding:22px; }
.news-card .date{ font-family:var(--font-mono); font-size:.75rem; color:var(--coral-deep); font-weight:700; }

article.single-post img.featured{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); margin-bottom:26px; }
.entry-content img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); margin:8px 0 22px; }
.entry-content h2{ margin-top:1.3em; font-size:1.5rem; }
.post-meta{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-dim); margin-bottom:20px; }

/* FORMS */
.form-box{ background:var(--surface); border-radius:var(--radius); padding:36px; box-shadow:0 8px 24px -8px rgba(27,31,59,.15); }
.form-grid{ display:grid; gap:16px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .form-row{ grid-template-columns:1fr; } }
label{ font-family:var(--font-display); font-weight:500; font-size:.9rem; display:block; margin-bottom:6px; }
input, textarea, select{ width:100%; background:var(--bg); border:2px solid rgba(27,31,59,.15); border-radius:12px; padding:12px 14px; font-family:var(--font-body); font-size:.95rem; color:var(--ink); }
input:focus, textarea:focus{ outline:3px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.hp-field{ position:absolute; left:-9999px; opacity:0; }
.form-success{ background:rgba(31,174,142,.12); border:2px solid var(--emerald); border-radius:12px; padding:16px 20px; margin-bottom:18px; }
.form-error{ background:rgba(255,93,115,.12); border:2px solid var(--coral); border-radius:12px; padding:16px 20px; margin-bottom:18px; }
.star-input{ display:flex; gap:6px; direction:rtl; justify-content:flex-end; }
.star-input input{ display:none; }
.star-input label{ font-size:1.7rem; color:var(--surface-2); cursor:pointer; margin:0; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label{ color:var(--gold); }

.cta-band{ background:linear-gradient(120deg, var(--coral), var(--violet)); border-radius:28px; padding:60px; text-align:center; color:#fff; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.85); }

.legal-content{ max-width:760px; }
.legal-content h2{ font-size:1.5rem; margin-top:1.5em; }

.site-footer{ border-top:2px solid rgba(27,31,59,.08); padding:54px 0 28px; margin-top:20px; background:var(--surface); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:36px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ font-family:var(--font-display); font-size:1rem; color:var(--coral); margin-bottom:14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a:hover{ color:var(--coral); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid rgba(27,31,59,.08); padding-top:20px; font-size:.85rem; color:var(--ink-dim); }

.text-center{ text-align:center; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--coral); color:#fff; padding:10px 16px; z-index:100; }
.skip-link:focus{ left:16px; top:16px; }

/* COOKIE BAR */
.cookie-bar{ position:fixed; left:0; right:0; bottom:0; z-index:300; display:none; background:var(--ink); color:#fff; border-top:5px solid var(--gold); padding:24px 0; }
.cookie-bar.show{ display:block; }
.cookie-bar .container{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.cookie-bar p{ color:#C9CCE6; margin:0; max-width:70ch; font-size:.95rem; }
.cookie-bar a{ color:var(--gold); text-decoration:underline; }
.cookie-actions{ display:flex; gap:14px; flex-wrap:wrap; flex-shrink:0; }
.cookie-actions .btn{ padding:12px 24px; }