/*
Theme Name: Mylvex
Description: Custom theme for Mylvex, a fictional toxic-world battle royale shooter. Eccentric acid-lime/hot-magenta/violet palette on near-black, Lilita One display type, dripping "melt" section edges, "Strefa" (shrinking zone circle) signature motif reused across every page as a genuine battle-royale mechanic.
Version: 1.0
*/

:root{
  --bg:        #0A0014;
  --surface:   #170826;
  --surface-2: #230F38;
  --ink:       #F5EFFF;
  --ink-dim:   #B8A8D9;
  --acid:      #C8FF3D;
  --hot:       #FF1F8F;
  --violet:    #8B2FE0;
  --orange:    #FF6B00;
  --font-display:'Lilita One', sans-serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'Chivo Mono', monospace;
  --radius:    14px;
  --container: 1180px;
}

@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:400; line-height:1.1; margin:0 0 .5em; letter-spacing:.01em; }
h1{ font-size:clamp(2.6rem,5.6vw,4.6rem); }
h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); }
h3{ font-size:1.2rem; }
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:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--acid); display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; }
.eyebrow::before{ content:''; width:10px; height:10px; border-radius:50%; background:var(--hot); box-shadow:0 0 10px 2px var(--hot); }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:15px 30px; border-radius:999px; font-family:var(--font-display); font-weight:400; font-size:1rem; cursor:pointer; border:3px solid var(--ink); }
.btn-primary{ background:var(--hot); color:var(--bg); border-color:var(--hot); }
.btn-primary:hover{ background:var(--acid); border-color:var(--acid); color:var(--bg); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ border-color:var(--acid); color:var(--acid); }

/* HEADER */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(10,0,20,.92); backdrop-filter:blur(8px); border-bottom:3px solid var(--surface-2); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.logo svg{ height:40px; width:auto; }
.primary-nav ul{ list-style:none; display:flex; gap:24px; margin:0; padding:0; }
.primary-nav a{ font-family:var(--font-mono); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim); }
.primary-nav a.current{ color:var(--acid); }
.menu-toggle{ display:none; background:none; border:2px solid var(--ink); color:var(--ink); cursor:pointer; padding:8px 12px; font-family:var(--font-mono); }
@media (max-width:900px){
  .primary-nav{ position:fixed; inset:80px 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.1rem; 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 with zone-circle backdrop */
.hero{ position:relative; padding:80px 0 60px; overflow:hidden; }
.hero::before{ content:''; position:absolute; inset:-20% -10% auto -10%; height:640px; background:radial-gradient(ellipse at 25% 15%, rgba(255,31,143,.22), transparent 55%), radial-gradient(ellipse at 80% 30%, rgba(200,255,61,.14), transparent 50%); pointer-events:none; }
.hero-grid{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.hero .lede{ font-size:1.1rem; max-width:48ch; }
.hero-actions{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

/* STREFA — signature shrinking-zone circle, reused per page with different labels */
.strefa{ position:relative; width:280px; height:280px; margin:0 auto; }
.strefa svg{ width:100%; height:100%; }
.strefa-label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.strefa-label strong{ font-family:var(--font-display); font-size:2.4rem; color:var(--acid); }
.strefa-label span{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.08em; }

/* DRIP EDGE — signature section divider (smooth melting drip-drops,
   made of plain circles via radial-gradient so the edge is round,
   not jagged). --drip-c controls the drip colour per section. */
.drip-edge{ position:relative; --drip-c: var(--bg); margin-bottom:26px; }
.drip-edge::after{
  content:''; position:absolute; left:0; right:0; bottom:-26px; height:34px; pointer-events:none;
  background-image:radial-gradient(circle at 22px 0px, var(--drip-c) 18px, transparent 19px);
  background-size:44px 34px; background-repeat:repeat-x; background-position:0 0;
}
.drip-edge.violet{ --drip-c: var(--violet); }
.drip-edge.surface{ --drip-c: var(--surface); }

section{ padding:64px 0; }
.section-head{ max-width:640px; margin-bottom:40px; }
.alt-bg{ background:var(--surface); }
.violet-band{ background:var(--violet); }
.violet-band h2, .violet-band .eyebrow{ color:var(--bg); }
.violet-band p{ color:#EBDBFF; }
.violet-band .eyebrow::before{ background:var(--acid); box-shadow:0 0 10px 2px var(--acid); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.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:2px solid var(--surface-2); border-radius:var(--radius); padding:26px; }
.card .num{ font-family:var(--font-mono); color:var(--hot); font-size:.85rem; }

/* LOADOUT BUILDER (Features) — click-to-equip widget */
.loadout{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
@media (max-width:800px){ .loadout{ grid-template-columns:1fr; } }
.loadout-slot h4{ font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; color:var(--acid); margin-bottom:10px; }
.loadout-option{ background:var(--surface); border:2px solid var(--surface-2); border-radius:10px; padding:12px 14px; margin-bottom:8px; cursor:pointer; font-size:.9rem; }
.loadout-option.selected{ border-color:var(--hot); background:var(--surface-2); }
.loadout-summary{ background:var(--surface-2); border:2px dashed var(--acid); border-radius:var(--radius); padding:20px; margin-top:20px; font-family:var(--font-mono); font-size:.9rem; }

/* PATCH-NOTE STYLE REVIEWS (circular score gauge) */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .review-grid{ grid-template-columns:1fr; } }
.review-gauge{ display:flex; gap:16px; align-items:center; margin-bottom:14px; }
.gauge-circle{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.1rem; border:3px solid var(--acid); color:var(--acid); flex-shrink:0; }
.review-who{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-dim); }

/* PATCH NOTES LIST (Blog) */
.patch-list{ display:flex; flex-direction:column; gap:22px; }
.patch-item{ display:grid; grid-template-columns:100px 1fr; gap:22px; background:var(--surface); border:2px solid var(--surface-2); border-radius:var(--radius); padding:22px; align-items:start; }
@media (max-width:600px){ .patch-item{ grid-template-columns:1fr; } }
.patch-ver{ font-family:var(--font-display); font-size:1.6rem; color:var(--hot); text-align:center; }
.patch-item h2{ font-size:1.3rem; margin-bottom:6px; }
.patch-item h2 a:hover{ color:var(--acid); }

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

/* DROP-IN SQUAD FORM (Contact) */
.form-box{ background:var(--surface); border:2px solid var(--surface-2); border-radius:var(--radius); padding:36px; }
.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-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:6px; color:var(--acid); }
input, textarea, select{ width:100%; background:var(--bg); border:2px solid var(--surface-2); border-radius:10px; padding:12px 14px; font-family:var(--font-body); font-size:.95rem; color:var(--ink); }
input:focus, textarea:focus{ outline:2px solid var(--hot); outline-offset:1px; }
.hp-field{ position:absolute; left:-9999px; opacity:0; }
.form-success{ background:rgba(200,255,61,.1); border:2px solid var(--acid); border-radius:10px; padding:16px 20px; margin-bottom:18px; }
.form-error{ background:rgba(255,31,143,.1); border:2px solid var(--hot); border-radius:10px; 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.6rem; color:var(--surface-2); cursor:pointer; margin:0; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label{ color:var(--acid); }

.cta-band{ background:linear-gradient(120deg, rgba(255,31,143,.2), rgba(139,47,224,.25)); border:2px solid var(--surface-2); border-radius:24px; padding:56px; text-align:center; }

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

.site-footer{ border-top:2px solid var(--surface-2); padding:50px 0 26px; 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:.9rem; color:var(--acid); 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(--hot); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid var(--surface-2); padding-top:20px; font-size:.82rem; color:var(--ink-dim); }

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

/* COOKIE BAR — full-width bottom, high contrast */
.cookie-bar{ position:fixed; left:0; right:0; bottom:0; z-index:300; display:none; background:var(--surface); color:var(--ink); border-top:5px solid var(--acid); padding:26px 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:var(--ink-dim); margin:0; max-width:70ch; font-size:.98rem; }
.cookie-bar a{ color:var(--acid); text-decoration:underline; }
.cookie-actions{ display:flex; gap:14px; flex-wrap:wrap; flex-shrink:0; }
.cookie-actions .btn{ padding:12px 24px; }