/*
Theme Name: DMFirst
Theme URI: https://dmfir.st
Author: DMFirst
Description: Custom block theme for the DMFirst independent gaming information website. Dark navy design system, sidebar layouts, article components and no page builder. SEO output (titles, meta, schema) is left to Yoast SEO or Rank Math.
Version: 1.6.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dmfirst
*/

/* DMFirst global stylesheet — one system for every page */
:root{
  --primary:#D4AF37;--secondary:#F5C542;--accent:#FFD700;
  --bg:#080D18;--surface:#111827;--surface-2:#18243A;--border:#29364A;
  --text:#fff;--muted:#A8B2C4;--soft:#7F8CA3;
  --ok:#F5C542;--warn:#FBBF24;
  --r:14px;--r-sm:9px;--wrap:1160px;--gap:clamp(48px,7vw,88px);
  --font-h:"Sora","Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans","Noto Sans Devanagari",sans-serif;
  --font-b:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans",sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.7 var(--font-b);overflow-wrap:anywhere;overflow-x:hidden}
.wp-site-blocks{min-height:100vh;display:flex;flex-direction:column}
main,.site-main{flex:1}
img,svg,video{max-width:100%;height:auto}
a{color:var(--secondary);text-underline-offset:3px}
a:hover{color:#FFD700}
:focus-visible{outline:3px solid var(--secondary);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--primary);color:#111827;padding:10px 16px;border-radius:8px;z-index:200}
.skip:focus{left:8px}
.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.icon{width:1.25em;height:1.25em;flex:none;vertical-align:-.2em}
h1,h2,h3,h4{font-family:var(--font-h);line-height:1.2;margin:0 0 .6em;letter-spacing:-.01em;font-weight:700}
h1{font-size:clamp(30px,5.2vw,42px)}
h2{font-size:clamp(24px,3.6vw,32px);margin-top:1.6em}
h3{font-size:clamp(19px,2.6vw,23px);margin-top:1.4em}
p{margin:0 0 1.1em}
ul,ol{padding-left:1.3em;margin:0 0 1.2em}
li{margin-bottom:.4em}
.muted{color:var(--muted)}
.small{font-size:14px}
.grad{background:linear-gradient(90deg,var(--accent),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Header (WordPress Navigation block) */
.site-header{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border)}
/* blur lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile menu inside the header height */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,13,24,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.admin-bar .site-header{top:32px}
.header-in{display:flex;align-items:center;gap:20px;min-height:60px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font:800 21px/1 var(--font-h);letter-spacing:-.02em}
.brand img{width:36px;height:36px}
.brand-wm img{width:auto;height:34px}
.brand b{color:var(--secondary);font-weight:800}
.site-header .wp-block-navigation{margin-inline:auto;font:600 11.5px/1 var(--font-b)}
.site-header .wp-block-navigation-item__content{padding:9px 11px;font-size:11.5px;color:#D7E0F0;border-radius:8px;position:relative;text-decoration:none}
.site-header .wp-block-navigation-item__content:hover{color:#fff;background:rgba(255,215,0,.12)}
.site-header .wp-block-navigation-item__content[aria-current="page"]{color:#fff}
.site-header .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--secondary))}
.site-header .wp-block-navigation__submenu-container{background:var(--surface-2)!important;color:#fff!important;border:1px solid var(--border)!important;border-radius:14px;padding:8px!important;min-width:230px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content{padding:10px 12px;font-weight:500;font-size:11px}
.site-header .wp-block-navigation__responsive-container-open,.site-header .wp-block-navigation__responsive-container-close{color:#fff;border:1px solid var(--border);border-radius:10px;width:40px;height:40px;align-items:center;justify-content:center}
.site-header .wp-block-navigation__responsive-container.is-menu-open{background:var(--bg)!important;color:#fff!important;padding:22px 20px 30px}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{font-size:12.5px;padding:14px 4px;border-bottom:1px solid var(--border);border-radius:0;color:#fff}
.site-header .is-menu-open .wp-block-navigation__submenu-container{background:var(--surface)!important;border:0!important;box-shadow:none}
.mobile-only{display:none}
.is-menu-open .mobile-only{display:block}
.header-cta{display:flex;gap:10px;align-items:center}
@media (max-width:900px){.header-cta{display:none}}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
.wp-block-post-title{margin-top:0}
.page-hero h1.wp-block-post-title,.page-hero h1.wp-block-query-title{margin:0 0 .5em}
.page-hero .lead,.page-hero .lead p{color:var(--muted);font-size:18px;max-width:68ch;margin:0}
.layout>.wp-block-template-part{align-self:stretch}
.mt0{margin-top:0}
.cat a,.wp-block-post-terms.cat a{color:var(--secondary);text-decoration:none;font:600 12px/1 var(--font-h);letter-spacing:.1em;text-transform:uppercase}
.wp-block-post-terms.cat{margin:0}
/* Core blocks inside the design system */
.prose p,.prose .wp-block-paragraph{margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em}
.prose ul.checks{list-style:none;padding-left:0}
.prose h2{margin-top:1.9em}
.prose h3{margin-top:1.4em}
.prose .mt0{margin-top:0;border-top:0;padding-top:0}
.faq details>:not(summary){padding:0 20px 18px;color:var(--muted);margin:0}
.faq details>:not(summary) p{margin:0}
.wp-block-details summary{font-family:var(--font-h)}
.sidebar .widget ul{list-style:none;padding:0;margin:0}
.sidebar .widget li{margin:0;border-bottom:1px solid var(--border)}
.sidebar .widget li:last-child{border:0}
.sidebar .widget li a{display:block;padding:9px 0;color:#DCE5F5;text-decoration:none;font-size:15px;line-height:1.45}
.sidebar .widget li a:hover{color:var(--secondary)}
.sidebar .widget .chips{display:flex;flex-wrap:wrap;gap:8px}
.sidebar .widget .chips li{border:0}
.sidebar .widget .chips a{padding:8px 14px;border:1px solid var(--border);border-radius:99px;display:inline-block}
.chips.wp-block-categories{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.chips.wp-block-categories li{margin:0}
.chips.wp-block-categories a{display:inline-block;padding:8px 14px;border:1px solid var(--border);border-radius:99px;color:#D7E0F0;text-decoration:none;font:500 14.5px var(--font-b);background:var(--surface)}
.chips.wp-block-categories a:hover{border-color:var(--secondary);color:#fff}
.wp-block-search__inside-wrapper{display:flex;gap:8px}
.wp-block-search__input{flex:1;min-width:0;min-height:46px;padding:10px 14px;border-radius:11px;border:1px solid var(--border);background:var(--bg);color:#fff;font:400 16px var(--font-b)}
.wp-block-search__button{min-height:46px;border-radius:11px;border:1px solid var(--border);background:var(--primary);color:#fff;padding:0 14px;cursor:pointer}
.wp-block-latest-posts{list-style:none;padding:0;margin:0}
.wp-block-latest-posts li{border-bottom:1px solid var(--border);margin:0}
.wp-block-latest-posts li:last-child{border:0}
.wp-block-latest-posts a{display:block;padding:9px 0;color:#DCE5F5;text-decoration:none;font-size:15px}
.pager .page-numbers{min-width:44px;min-height:44px;display:grid;place-items:center;padding:0 14px;border:1px solid var(--border);border-radius:11px;text-decoration:none;color:#fff;font-weight:600}
.pager .page-numbers.current{background:var(--primary);border-color:var(--primary)}
.wp-block-image.article-img{margin:1.4em 0}
.wp-block-image.article-img img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;height:auto}
.wp-block-image.article-img figcaption{padding:10px 16px;font-size:13.5px;color:var(--soft);background:var(--surface);margin:0}
.footer-wrap{margin:0}


/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 22px;border-radius:11px;font:600 15.5px/1.2 var(--font-b);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#111827;box-shadow:0 8px 24px -8px rgba(212,175,55,.8)}
.btn-primary:hover{background:linear-gradient(135deg,var(--secondary),var(--accent));color:#111827}
.btn-ghost{background:transparent;color:#fff;border-color:var(--border)}
.btn-ghost:hover{border-color:var(--secondary);color:#fff;background:rgba(245,197,66,.08)}
.btn-sm{min-height:36px;padding:7px 14px;font-size:11px}
.btn-block{width:100%}

/* Hero */
.hero{position:relative;padding:clamp(40px,7vw,84px) 0 clamp(48px,7vw,80px);overflow:hidden;border-bottom:1px solid var(--border)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 85% 10%,rgba(212,175,55,.28),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(245,197,66,.14),transparent 70%);pointer-events:none}
.hero-grid{position:relative;display:grid;gap:36px;grid-template-columns:1.05fr .95fr;align-items:center}
.hero .eyebrow{margin-bottom:18px}
.hero p.lead{font-size:18px;color:var(--muted);max-width:54ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:0;color:var(--muted);font-size:14px}
.hero-meta li{display:flex;gap:7px;align-items:center;margin:0}
.hero-meta .icon{color:var(--secondary)}
.hero-art{position:relative}
.hero-art img{width:100%;border-radius:22px;border:1px solid var(--border);box-shadow:0 30px 80px -30px rgba(212,175,55,.55)}
.hero-art::after{content:"";position:absolute;inset:-12px 12px 12px -12px;border:1px solid rgba(245,197,66,.35);border-radius:26px;z-index:-1}
.page-hero{padding:clamp(32px,5vw,60px) 0 clamp(24px,4vw,40px);border-bottom:1px solid var(--border);background:radial-gradient(70% 120% at 100% 0,rgba(212,175,55,.18),transparent 70%)}
.page-hero p.lead{color:var(--muted);font-size:18px;max-width:68ch;margin:0}

/* Eyebrow / section */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--font-h);letter-spacing:.14em;text-transform:uppercase;color:var(--secondary)}
.eyebrow::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--accent),var(--secondary))}
.section{padding:var(--gap) 0}
.section.alt{background:var(--surface);border-block:1px solid var(--border)}
.section-head{max-width:680px;margin-bottom:34px}
.section-head h2{margin:.5em 0 .4em}
.section-head p{color:var(--muted);margin:0}
.num{font:700 13px/1 var(--font-h);color:var(--soft);letter-spacing:.1em}

/* Cards */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:24px;position:relative;transition:border-color .2s,transform .2s}
.card:hover{border-color:rgba(245,197,66,.55)}
.card h3{margin:14px 0 8px;font-size:19px}
.card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.card .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(212,175,55,.35),rgba(245,197,66,.22));border:1px solid rgba(255,215,0,.4);color:#FDE9A8}
.card .ico .icon{width:24px;height:24px}
.card .more{display:inline-flex;gap:6px;align-items:center;margin-top:14px;font:600 14.5px var(--font-b);text-decoration:none}
.card.link{display:flex;flex-direction:column;color:#fff;text-decoration:none}
.card.link:hover{transform:translateY(-3px)}
.card.link .more{margin-top:auto;padding-top:14px}
.cat{font:600 12px/1 var(--font-h);letter-spacing:.1em;text-transform:uppercase;color:var(--secondary)}
.post-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.post-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.post-card .body{padding:20px;display:flex;flex-direction:column;flex:1}
.post-card h3{margin:10px 0 8px;font-size:19px}
.post-card h3 a{color:#fff;text-decoration:none}
.post-card h3 a:hover{color:var(--secondary)}
.post-card .meta{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13.5px;color:var(--soft)}
.featured{display:grid;grid-template-columns:1.1fr 1fr;padding:0;overflow:hidden;margin-bottom:28px}
.featured img{width:100%;height:100%;object-fit:cover;min-height:260px}
.featured .body{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;justify-content:center;gap:4px}
.featured h2{margin:8px 0 10px;font-size:clamp(23px,3vw,30px)}
.featured p{color:var(--muted)}

/* Steps */
.steps{list-style:none;padding:0;margin:0 0 1.4em;counter-reset:st;display:grid;gap:14px}
.steps li{counter-increment:st;position:relative;margin:0;padding:18px 20px 18px 74px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r)}
.steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:18px;top:16px;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font:700 16px var(--font-h);background:linear-gradient(135deg,var(--primary),var(--secondary));color:#111827}
.steps strong{display:block;font:700 17px/1.3 var(--font-h);margin-bottom:4px}
.steps span{color:var(--muted);font-size:16px}

/* Notices */
.notice{position:relative;border:1px solid var(--border);background:var(--surface-2);border-radius:var(--r);padding:18px 20px 18px 56px;margin:1.4em 0;font-size:16px}
.notice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--r) 0 0 var(--r);background:var(--accent)}
.notice .icon{position:absolute;left:20px;top:20px;color:var(--accent);width:24px;height:24px}
.notice strong{display:block;font-family:var(--font-h);margin-bottom:2px}
.notice p:last-child{margin-bottom:0}
.notice.warn::before{background:var(--warn)}.notice.warn .icon{color:var(--warn)}
.notice.ok::before{background:var(--ok)}.notice.ok .icon{color:var(--ok)}
.notice.cyan::before{background:var(--secondary)}.notice.cyan .icon{color:var(--secondary)}

/* Tables — stacked on phones so the page never scrolls sideways */
.table-wrap{width:100%;margin:1.4em 0}
table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;font-size:15.5px}
th,td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
thead th{background:var(--surface-2);font:600 13px var(--font-h);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody th{font-weight:600;color:#fff;background:rgba(24,36,58,.5)}
td{color:#D5DEEE}
@media (max-width:720px){
  table,thead,tbody,tr,th,td{display:block;width:100%}
  thead{position:absolute;left:-9999px}
  tr{border-bottom:1px solid var(--border);padding:6px 0}
  tbody tr:last-child{border-bottom:0}
  th,td{border:0;padding:8px 16px;background:none!important}
  td::before,tbody th::before{content:attr(data-label);display:block;font:600 11.5px var(--font-h);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:2px}
}

/* FAQ */
.faq{display:grid;gap:10px;margin:1.2em 0}
.faq details{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:17px 54px 17px 20px;font:600 16.5px/1.4 var(--font-h);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;border-right:2px solid var(--secondary);border-bottom:2px solid var(--secondary);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details[open]{border-color:rgba(245,197,66,.5)}
.faq .ans{padding:0 20px 18px;color:var(--muted)}
.faq .ans p:last-child{margin:0}
.faq-group{margin-top:2.2em}

/* Layout with sidebar */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,52px);padding:clamp(28px,4vw,48px) 0 var(--gap);align-items:start}
.sidebar{position:sticky;top:90px;display:grid;gap:18px}
.widget{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px}
.widget h2,.widget h3{font-size:16px;margin:0 0 12px;letter-spacing:.02em}
.widget ul{list-style:none;padding:0;margin:0}
.widget li{margin:0;border-bottom:1px solid var(--border)}
.widget li:last-child{border:0}
.widget li a{display:block;padding:9px 0;color:#DCE5F5;text-decoration:none;font-size:15px;line-height:1.45}
.widget li a:hover{color:var(--secondary)}
.search{position:relative}
.search input{width:100%;min-height:46px;padding:10px 14px 10px 42px;border-radius:11px;border:1px solid var(--border);background:var(--bg);color:#fff;font:400 16px var(--font-b)}
.search .icon{position:absolute;left:14px;top:13px;color:var(--soft)}
.search-results{margin-top:8px}
.search-results:empty{display:none}

/* Article */
.crumbs{font-size:14px;color:var(--soft);padding:18px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;padding:0;margin:0}
.crumbs li{margin:0;display:flex;gap:8px}
.crumbs li+li::before{content:"/";color:var(--border)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--secondary)}
.article-head .lead{font-size:19px;color:var(--muted);line-height:1.6}
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--soft);margin:18px 0;padding:14px 0;border-block:1px solid var(--border)}
.byline b{color:var(--muted);font-weight:600}
.article-img{margin:1.4em 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.article-img img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.article-img figcaption{padding:10px 16px;font-size:13.5px;color:var(--soft);background:var(--surface)}
.toc{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:18px 22px;margin:1.6em 0}
.toc strong{font:700 15px var(--font-h)}
.toc ol{margin:10px 0 0;padding-left:1.2em;font-size:15.5px}
.toc a{color:#DCE5F5;text-decoration:none}
.toc a:hover{color:var(--secondary)}
.prose{font-size:clamp(16.5px,1.6vw,18px);line-height:1.8}
.prose h2{padding-top:.4em;border-top:1px solid var(--border);margin-top:1.9em;padding-top:1.1em}
.prose li{margin-bottom:.55em}
.prose .steps li{margin:0}
.sources{font-size:14.5px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{margin:0}
.chips a{display:inline-block;padding:8px 14px;border:1px solid var(--border);border-radius:99px;color:#D7E0F0;text-decoration:none;font:500 14.5px var(--font-b);background:var(--surface)}
.chips a:hover,.chips a[aria-current="page"]{border-color:var(--secondary);color:#fff;background:rgba(245,197,66,.1)}
.pager{display:flex;gap:8px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.pager a,.pager span{min-width:44px;min-height:44px;display:grid;place-items:center;padding:0 14px;border:1px solid var(--border);border-radius:11px;text-decoration:none;color:#fff;font-weight:600}
.pager [aria-current="page"]{background:var(--primary);border-color:var(--primary);color:#111827}
.pager a:hover{border-color:var(--secondary)}
.pager .off{opacity:.4}

/* Info lists / spec */
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.spec div{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 16px}
.spec dt{font:600 12px var(--font-h);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:4px}
.spec dd{margin:0;color:#fff;font-weight:500}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.split img{width:100%;border-radius:var(--r);border:1px solid var(--border)}
.checks{list-style:none;padding:0}
.checks li{position:relative;padding-left:30px}
.checks li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;background:rgba(245,197,66,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C542' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.500l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.cross li::before{background:rgba(251,191,36,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBBF24' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/11px no-repeat}

/* Game cards + simulator */
.game-card .ico{margin-bottom:2px}
.sim{background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:20px;padding:clamp(20px,3vw,32px);position:relative;overflow:hidden}
.sim-badge{display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border-radius:99px;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);color:#FDE68A;font:600 13px var(--font-b)}
.sim-top{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:20px}
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.reel{aspect-ratio:1/1;max-height:130px;border-radius:14px;border:1px solid var(--border);background:var(--bg);display:grid;place-items:center;font:800 clamp(26px,6vw,44px) var(--font-h);color:#fff}
.reel.hit{border-color:var(--secondary);box-shadow:0 0 0 1px var(--secondary) inset,0 0 24px rgba(245,197,66,.3)}
.sim-out{min-height:3.2em;font:600 17px/1.5 var(--font-h)}
.sim-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.stat{background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:12px 14px}
.stat b{display:block;font:700 21px var(--font-h);color:#fff}
.stat span{font-size:12.5px;color:var(--soft)}
.sim-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Forms */
.form{display:grid;gap:16px}
.field label{display:block;font:600 14.5px var(--font-b);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;min-height:48px;border-radius:11px;border:1px solid var(--border);background:var(--bg);color:#fff;font:400 16px var(--font-b)}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--secondary);outline:2px solid rgba(245,197,66,.35)}
.field .err{display:none;color:#FCA5A5;font-size:14px;margin-top:6px}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#F87171}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{padding:14px 16px;border-radius:11px;display:none;font-size:15.5px}
.form-msg.show{display:block}
.form-msg.ok{background:rgba(245,197,66,.12);border:1px solid rgba(245,197,66,.4)}
.form-msg.bad{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.4)}

/* Footer */
.site-footer{background:var(--surface);border-top:1px solid var(--border);margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding:44px 0 30px}
.site-footer h2{font:700 11px var(--font-h);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0}
.site-footer li a{display:inline-block;padding:5px 0;color:#DCE5F5;text-decoration:none;font-size:11px}
.site-footer li a:hover{color:var(--secondary)}
.footer-about p{color:var(--muted);font-size:11px;max-width:38ch}
.footer-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.badge{display:inline-flex;align-items:center;padding:6px 11px;border:1px solid var(--border);border-radius:8px;font:600 10.5px var(--font-h);color:#DCE5F5}
.badge.age{border-color:var(--warn);color:#FDE68A}
.footer-bottom{border-top:1px solid var(--border);padding:22px 0 34px;display:grid;gap:8px;font-size:10.5px;color:var(--soft)}
.footer-bottom p{margin:0}

/* Utility pages */
.cols-list{columns:2;column-gap:32px;list-style:none;padding:0}
.cols-list li{break-inside:avoid}
.sitemap h2{font-size:21px;margin:1.8em 0 .6em}
.center{text-align:center}
.cta-band{border:1px solid var(--border);border-radius:22px;padding:clamp(26px,5vw,48px);background:radial-gradient(80% 140% at 100% 0,rgba(212,175,55,.28),transparent 65%),var(--surface-2);display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.cta-band h2{margin:0 0 6px;font-size:clamp(22px,3vw,28px)}
.cta-band p{margin:0;color:var(--muted);max-width:56ch}
.fil{border-left:3px solid var(--secondary);padding-left:18px}
.back-top{position:fixed;right:16px;bottom:16px;width:46px;height:46px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);color:#fff;display:none;place-items:center;cursor:pointer;z-index:60}
.back-top.show{display:grid}

/* Responsive */
@media (max-width:1020px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero-grid,.split,.featured{grid-template-columns:1fr}
  .layout{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:static}
  .hero-art{order:-1;max-width:560px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .grid-2,.grid-3,.grid-4,.spec{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .cols-list{columns:1}
  .sim-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps li{padding:16px 16px 16px 66px}
  .steps li::before{left:14px;width:38px;height:38px}
  .hero-actions .btn{flex:1 1 100%}
  .cta-band .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Footer: community layout (4 columns, support band, notice) */
.site-footer{background:var(--surface);border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.25fr;gap:34px;padding:44px 0 34px}
.site-footer h2{font:700 12.5px var(--font-h);letter-spacing:0;text-transform:none;color:var(--secondary);margin:0 0 14px}
.site-footer h2.f-name{font-size:14px;margin:12px 0 10px}
.f-logo{display:inline-block;width:72px;height:72px;border-radius:50%;overflow:hidden;border:2px solid var(--secondary);background:var(--bg)}
.f-logo img{display:block;width:100%;height:100%;object-fit:cover}
.footer-about p,.footer-team p{color:var(--muted);font-size:11px;max-width:40ch}
.f-more{display:inline-flex;align-items:center;gap:6px;color:var(--secondary);font:700 11px var(--font-b);text-decoration:none}
.f-more:hover{color:var(--accent)}
.footer-band{border-top:1px solid var(--border);padding:30px 0;text-align:center}
.footer-band h2{font-size:14px;margin:0 0 10px}
.footer-band p{color:var(--muted);font-size:11px;max-width:70ch;margin:0 auto}
.f-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.f-pills a{display:inline-flex;align-items:center;padding:9px 16px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:#fff;font:600 11px var(--font-b);text-decoration:none}
.f-pills a:hover{border-color:var(--secondary);color:var(--secondary)}
.f-pills a[hidden]{display:none}
.footer-bottom{border-top:1px solid var(--border);padding:22px 0 34px;display:grid;gap:8px;font-size:10.5px;color:var(--soft);text-align:center}
@media (max-width:1020px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.footer-grid{grid-template-columns:minmax(0,1fr);gap:26px;padding:34px 0 24px}}

/* Mobile menu overlay: compact submenus, comfortable tap targets */
.site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{font-size:11.5px;padding:11px 14px;border-bottom:1px solid var(--border)}
.site-header .is-menu-open .wp-block-navigation__submenu-container{padding:4px 6px;margin:0 0 6px;border-radius:12px}
.site-header .is-menu-open .wp-block-navigation__container{gap:0;width:100%}
.site-header .is-menu-open .wp-block-navigation-item{width:100%}
.site-header .is-menu-open .mobile-only .wp-block-navigation-item__content{justify-content:center;border:1px solid var(--border);border-radius:12px;margin-top:10px}
.site-header .is-menu-open .mobile-only:last-child .wp-block-navigation-item__content{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#111827;border-color:transparent}

/* Phone header: logo on the left, menu toggle pinned to the right corner */
@media (max-width:600px){
  .site-header .header-in{justify-content:space-between}
  .site-header .wp-block-navigation{margin-inline:auto 0;justify-content:flex-end;flex:0 0 auto}
  .site-header .wp-block-navigation__responsive-container-open{margin-left:auto}
}