@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
@import url('./home-foundation.css');
@import url('./navigation.css');

/* The production contract. Explicit body tokens shield website chrome from
   legacy games which define their own variables on body.light/dark-mode. */
:root, body[data-site='creative-circuit'] {
  --bg:#edf2f0; --surface:#f8faf6; --surface-raised:#e1eae7;
  --text:#152d38; --muted:#4d626b; --line:#91a8af;
  --accent:#18bce5; --accent-ink:#092c39; --accent-text:#086c84;
  --warm:#ef9b53; --ink:#102a36; --danger:#b73438;
  --heading-font:'Space Grotesk','Inter',Arial,sans-serif;
  --body-font:'Inter',Arial,sans-serif; --radius:3px;
  --page-pad:clamp(20px,5vw,86px); --gutter:var(--page-pad);
  --page-width:1440px; --motion-fast:180ms; --motion-panel:280ms;
  --shadow-plate:0 18px 38px #102a3614,6px 6px 0 #c6d5d7;
}
html[data-theme='dark'], html[data-theme='dark'] body[data-site='creative-circuit'] {
  --bg:#10171c; --surface:#1b2a32; --surface-raised:#243740;
  --text:#f1f4ee; --muted:#b5c3c7; --line:#50646e;
  --accent-text:#69d8ef; --danger:#ff8981;
  --shadow-plate:0 18px 38px #030b104d,6px 6px 0 #06131b;
}
html { scroll-behavior:smooth; scroll-padding-top:110px; }
/* Keep wheel, touch and keyboard scrolling; only remove the visible tracks. */
html, body[data-site], body[data-site] * { scrollbar-width:none; }
::-webkit-scrollbar { display:none; width:0; height:0; }
body[data-site='creative-circuit'] { margin:0; padding:0; min-width:0; background:var(--bg); color:var(--text); font:400 16px/1.65 var(--body-font); overflow-wrap:break-word; }
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none!important; }
:where(body[data-site]) img, :where(body[data-site]) video { max-width:100%; }
body[data-site] main { min-width:0; }
:where(body[data-site]) a { color:inherit; text-underline-offset:5px; text-decoration-thickness:1px; }
:where(body[data-site]) :is(button,input,select,textarea) { font-family:inherit; }
body[data-site] button, body[data-site] a { -webkit-tap-highlight-color:transparent; }
body[data-site] button { cursor:pointer; }
body[data-site] button:disabled { cursor:not-allowed; }
.ambient-toggle { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 14px; border:1px solid currentColor; border-radius:3px; background:transparent; color:var(--muted); font:600 11px/1.4 var(--body-font); cursor:pointer; transition:background 180ms,transform 180ms; }
.ambient-toggle:hover:not(:disabled) { background:var(--surface-raised); color:var(--text); transform:translateY(-1px); }
.ambient-toggle:disabled { opacity:.7; }
body[data-site] .site-footer .ambient-toggle { justify-self:start; background:#20343f; color:#eaf3f3; border-color:#7799a7; }
html:not([data-site-ready=true]) [data-ambient-toggle] { display:none; }
body[data-site] :focus-visible { outline:3px solid var(--accent-text); outline-offset:4px; }
body[data-site] :is(.site-header,.site-footer) :focus-visible { outline-color:#69d8ef; }
body[data-site] ::selection { background:var(--accent); color:var(--accent-ink); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important; }
body[data-site] .skip-link { position:fixed; top:12px; left:12px; z-index:10000; opacity:0; pointer-events:none; transform:translateY(-160%); background:#f4f9f5; color:#102a36; padding:12px 18px; font-weight:600; }
body[data-site] .skip-link:focus { transform:none; opacity:1; pointer-events:auto; }
.ui-icon { display:inline-block; width:22px; height:22px; flex-shrink:0; vertical-align:middle; }

/* An ink-coloured navigation instrument stays legible in both site modes. */
body[data-site] .site-header { display:grid; grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr); align-items:center; gap:20px; padding:19px var(--page-pad); font-family:var(--body-font); color:#edf5f5; line-height:1.4; }
body[data-site] .brand-link { justify-self:start; display:block; flex-shrink:0; margin:0; padding:0; }
body[data-site] .brand-link img { display:block; width:190px; height:auto; }
body[data-site] .header-actions { display:flex; gap:12px; align-items:center; justify-self:end; min-width:0; }
body[data-site] .theme-switch { display:grid; place-items:center; width:44px; min-width:44px; height:44px; padding:0; border:1px solid #6e8c9b; border-radius:3px; color:#e1eef0; background:#294552; transition:background 180ms,transform 180ms; }
body[data-site] .theme-switch:hover { background:#3a5b69; }
body[data-site] .theme-switch:active { transform:translateY(1px); }
body[data-site] .theme-switch[aria-pressed=true] .ui-icon { fill:#18bce520; }
body[data-site] .site-header .armino-account-slot { position:relative; inset:auto; min-width:46px; margin:0; z-index:45; }
body[data-site] .account-fallback { min-width:44px; min-height:44px; display:grid; place-items:center; color:#e7f0f3; text-decoration:none; font-size:11px; }
body[data-site] .circuit-nav-panel { display:contents; }
body[data-site] .primary-nav { margin:0; padding:0; border:0; }
body[data-site] .primary-nav ul { display:flex; align-items:center; gap:clamp(14px,1.35vw,24px); list-style:none; padding:0; margin:0; }
body[data-site] .primary-nav a { position:relative; display:block; font-size:12px; font-weight:600; padding:12px 0; min-height:44px; white-space:nowrap; text-decoration:none; }
body[data-site] .primary-nav a::after { content:''; position:absolute; inset:auto 0 2px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform 180ms; }
body[data-site] .primary-nav a::before { content:''; position:absolute; width:5px; height:5px; right:-3px; bottom:0; background:var(--accent); opacity:0; transition:opacity 180ms; }
body[data-site] .primary-nav a:hover::after, body[data-site] .primary-nav a:focus-visible::after, body[data-site] .primary-nav a[aria-current=page]::after { transform:scaleX(1); }
body[data-site] .primary-nav a[aria-current=page]::before { opacity:1; }
body[data-site] .site-menu-toggle { display:none; align-items:center; justify-content:center; gap:8px; min-width:44px; min-height:44px; border:1px solid #86aab9; border-radius:3px; padding:8px; color:#f2f6f6; background:#294552; }
body[data-site] .circuit-nav-top, body[data-site] .circuit-nav-footer, body[data-site] .circuit-nav-backdrop { display:none; }
/* Static navigation remains usable before or without the enhancement module. */
html:not([data-site-ready=true]) .site-header :is([data-site-menu],[data-theme-switch]) { display:none; }
body[data-site] .site-footer { display:grid; grid-template-columns:1fr auto; gap:30px 38px; margin:0; padding:48px var(--page-pad) 30px; background:radial-gradient(ellipse at 90% 0,#255364,transparent 65%),linear-gradient(125deg,#122f3d,#10232e 65%,#173b49); border-top:3px solid #4b9bb4; color:#c1d3d8; font:400 12px/1.6 var(--body-font); }
body[data-site] .footer-brand { display:block; justify-self:start; align-self:start; padding:16px 18px; background:#173947; border:1px solid #618697; border-left:3px solid var(--accent); box-shadow:4px 4px 0 #071b25; }
body[data-site] .footer-brand img { display:block; width:200px; height:auto; }
body[data-site] .footer-links, body[data-site] .footer-legal { display:flex; gap:10px 22px; flex-wrap:wrap; align-items:center; }
body[data-site] .footer-links { justify-self:end; align-self:start; gap:10px; padding:10px; background:#122f3d; border:1px solid #618697; box-shadow:4px 4px 0 #071b25; }
body[data-site] .footer-legal { justify-content:flex-end; padding-top:16px; border-top:1px solid #618697; }
body[data-site] .site-footer a { display:inline-flex; min-height:44px; align-items:center; color:#eaf3f3; text-decoration:none; font-size:12px; }
body[data-site] .site-footer a:hover { text-decoration:underline; }
body[data-site] .footer-links a { display:inline-flex; justify-content:center; gap:10px; min-height:52px; padding:10px 12px; color:#fff; background:#254c5e; border:1px solid #7396a6; box-shadow:0 3px 0 #081d28; transition:background 180ms,transform 180ms,box-shadow 180ms; }
body[data-site] .footer-links a:hover { background:#356c81; transform:translateY(-2px); box-shadow:0 5px 0 #081d28; text-decoration:none; }
body[data-site] .footer-links a:active { transform:translateY(1px); box-shadow:0 1px 0 #081d28; }
body[data-site] .footer-links .footer-social { width:52px; padding:10px; }
body[data-site] .footer-social img { width:26px; height:26px; object-fit:contain; }
body[data-site] .footer-contact { font-weight:600; }
body[data-site] .footer-copy { margin:0; align-self:center; padding-top:16px; border-top:1px solid #618697; font-size:11px; color:#c1d3d8; }

/* Inner-page family: generous titles, registered edges and tactile controls. */
.page-hero { position:relative; isolation:isolate; padding:82px var(--page-pad) 64px; background:var(--surface); border-bottom:1px solid var(--line); overflow:hidden; }
.hero-inner { position:relative; max-width:1320px; margin-inline:auto; z-index:1; }
.section-label, .eyebrow { display:block; margin:0 0 18px; color:var(--accent-text); font:700 10px/1.6 var(--body-font); letter-spacing:.14em; text-transform:uppercase; }
.page-hero h1 { margin:0; max-width:1000px; font:700 clamp(40px,5.5vw,78px)/1.02 var(--heading-font); letter-spacing:-.055em; text-wrap:balance; }
.page-hero p:not(.section-label) { margin:23px 0 0; max-width:66ch; font-size:clamp(16px,1.35vw,20px); color:var(--muted); line-height:1.7; }
.page-hero .hero-actions { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:30px; }
.section { max-width:1440px; padding:68px var(--page-pad); margin-inline:auto; }
.section-heading, .section-header { margin-bottom:32px; }
.section-heading h2, .section-header h2 { margin:0 0 14px; font:700 clamp(29px,3.4vw,48px)/1.08 var(--heading-font); letter-spacing:-.045em; }
.section-heading p, .section-header p { max-width:64ch; color:var(--muted); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:48px; padding:13px 22px; color:var(--accent-ink)!important; background:var(--accent); border:1px solid #73dcf5; border-radius:3px; box-shadow:0 3px 0 #065a73; text-decoration:none; font-size:13px; font-weight:700; line-height:1.45; transition:transform 180ms,box-shadow 180ms,background 180ms; }
.btn:hover { background:#4ed1ef; transform:translateY(-2px); box-shadow:0 5px 0 #065a73; }
.btn:active { transform:translateY(2px); box-shadow:0 1px 0 #065a73; }
.btn-outline, .btn-secondary { color:var(--text)!important; background:var(--surface); border-color:var(--line); box-shadow:0 3px 0 var(--line); }
.btn-outline:hover, .btn-secondary:hover { background:var(--surface-raised); border-color:var(--accent-text); box-shadow:0 5px 0 var(--line); }
.btn:disabled, .btn[aria-disabled=true] { opacity:.55; transform:none; box-shadow:none; }

/* Account forms keep their original logic, but belong to the circuit family. */
body[data-site] .an-root, body[data-site].an-profile-page { --an-blue:var(--accent); --an-blue-deep:var(--accent-text); --an-panel:var(--surface); --an-soft:var(--surface-raised); --an-line:var(--line); --an-text:var(--text); --an-muted:var(--muted); --an-danger:var(--danger); font-family:var(--body-font); }
body[data-site] .an-modal { border-radius:4px; border-top:3px solid var(--accent); padding-top:34px; }
body[data-site] .an-modal h2, body[data-site] .an-modal h3 { font-family:var(--heading-font); letter-spacing:-.04em; padding-right:34px; }
body[data-site] .an-close { width:44px; height:44px; min-width:44px; top:10px; right:10px; border-radius:3px; }
body[data-site] :is(.an-auth-tabs,.an-profile-tabs,.an-auth-tab,.an-profile-tab,.an-field input,.an-field select,.an-primary,.an-secondary,.an-danger) { border-radius:3px; }
body[data-site] :is(.an-auth-tab,.an-profile-tab) { min-height:44px; font-size:12px; }
body[data-site] .an-menu { border-radius:3px; border-top:3px solid var(--accent); }
body[data-site] .an-menu-item { min-height:44px; }
body[data-site] .an-modal input, body[data-site] .an-modal select { font-size:16px; }

@media (max-width:1200px) {
  body[data-site] .site-header { gap:12px; padding-inline:30px; grid-template-columns:minmax(150px,1fr) auto minmax(106px,1fr); }
  body[data-site] .brand-link img { width:166px; }
  body[data-site] .primary-nav ul { gap:14px; }
}
@media (max-width:1100px) {
  body[data-site] .site-header { grid-template-columns:minmax(0,1fr) auto auto; gap:14px; padding:16px var(--page-pad); }
  body[data-site] .site-menu-toggle { display:flex; order:3; }
  body[data-site] .site-menu-toggle span { font-size:11px; }
  body[data-site] .header-actions { order:2; gap:10px; }
  body[data-site] .site-header > .primary-nav { grid-column:1/-1; order:4; width:100%; border-top:1px solid #476575; }
  body[data-site] .site-header > .primary-nav ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }
  body[data-site] .site-header > .primary-nav a { white-space:normal; }
  body[data-site] .circuit-nav-backdrop { display:block; position:fixed; inset:0; z-index:80; background:#030e17b3; backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity 160ms; }
  body[data-site] .circuit-nav-panel { display:flex; flex-direction:column; position:fixed; inset:0 0 0 auto; width:min(470px,100%); padding:max(24px,env(safe-area-inset-top)) 28px max(24px,env(safe-area-inset-bottom)); z-index:90; background:#142731; border-left:1px solid #6894a7; box-shadow:-20px 0 70px #030b1066; overflow-y:auto; overscroll-behavior:contain; visibility:hidden; transform:translateX(100%); transition:transform 160ms cubic-bezier(.2,.8,.2,1); }
  body[data-site][data-circuit-menu=open] .circuit-nav-panel { transform:none; visibility:visible; }
  body[data-site][data-circuit-menu=closing] .circuit-nav-panel { visibility:visible; }
  body[data-site].circuit-menu-open .circuit-nav-backdrop { opacity:1; pointer-events:auto; }
  body[data-site] .circuit-nav-top { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:26px; margin-bottom:20px; border-bottom:1px solid #476575; }
  body[data-site] .circuit-nav-top p { margin:0 0 10px; color:var(--accent); font:10px/1.5 ui-monospace,monospace; text-transform:uppercase; letter-spacing:.1em; }
  body[data-site] .circuit-nav-top h2 { margin:0; color:#f1f4ee; font:700 31px/1.1 var(--heading-font); letter-spacing:-.05em; }
  body[data-site] .circuit-nav-close { display:grid; place-items:center; flex-shrink:0; min-width:48px; min-height:48px; border:1px solid #698793; border-radius:3px; background:#223d4c; color:#f1f4ee; }
  body[data-site] .circuit-nav-close:hover { background:#365969; }
  body[data-site] .circuit-nav-close span:first-child { font-size:24px; line-height:1; }
  body[data-site] .circuit-nav-close span:last-child { font-size:9px; }
  body[data-site] .circuit-nav-panel .primary-nav { flex:1; order:0; padding:0; border:0; }
  body[data-site] .circuit-nav-panel .primary-nav ul { display:block; counter-reset:nav; }
  body[data-site] .circuit-nav-panel .primary-nav li { counter-increment:nav; }
  body[data-site] .circuit-nav-panel .primary-nav a { display:flex; align-items:center; gap:22px; white-space:normal; font:600 23px/1.25 var(--heading-font); min-height:62px; padding:16px 0; border-bottom:1px solid #355363; }
  body[data-site] .circuit-nav-panel .primary-nav a::before { content:'0' counter(nav); position:static; background:none; width:auto; height:auto; opacity:1; color:#82a8ba; font:10px ui-monospace,monospace; }
  body[data-site] .circuit-nav-panel .primary-nav a::after { bottom:0; }
  body[data-site] .circuit-nav-panel .primary-nav a[aria-current=page] { color:#72e0f7; }
  body[data-site] .circuit-nav-footer { display:block; margin:30px 0 0; color:#a6c0cc; font:10px/1.7 ui-monospace,monospace; }
}
@media (max-width:760px) {
  .page-hero { padding-block:60px 45px; }
  .section { padding-block:48px; }
  body[data-site] .site-footer { grid-template-columns:1fr; gap:22px; padding:42px 20px 24px; }
  body[data-site] .footer-legal { justify-content:flex-start; }
  body[data-site] .footer-links { justify-self:start; max-width:100%; }
}
@media (max-width:560px) {
  body[data-site] .site-header { padding:14px 16px; gap:8px; }
  body[data-site] .brand-link img { width:clamp(115px,34vw,164px); }
  body[data-site] .header-actions { gap:7px; }
  body[data-site] .site-menu-toggle span { display:none; }
  body[data-site] .an-player-button { width:44px; height:44px; }
  body[data-site] .site-header .armino-account-slot { min-width:44px; }
  body[data-site] .circuit-nav-panel { padding-inline:23px; }
  body[data-site] .circuit-nav-panel .primary-nav a { font-size:22px; min-height:60px; }
  .page-hero h1 { font-size:clamp(36px,9vw,50px); }
}
@media (max-height:520px) and (max-width:1100px) {
  body[data-site] .circuit-nav-panel { width:min(600px,90%); padding-block:20px; }
  body[data-site] .circuit-nav-top { padding-bottom:15px; margin-bottom:12px; }
  body[data-site] .circuit-nav-panel .primary-nav ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; }
  body[data-site] .circuit-nav-panel .primary-nav a { font-size:18px; min-height:55px; gap:13px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  body[data-site] :is(.btn,.theme-switch,.site-header,.primary-nav a)::after, body[data-site] :is(.btn,.theme-switch,.site-header,.primary-nav a,.circuit-nav-panel,.circuit-nav-backdrop) { transition:none; }
  .btn:hover { transform:none; }
  body[data-site] .footer-links a { transition:none; }
  body[data-site] .footer-links a:hover { transform:none; }
}