/* ============================================================
   Animum Rege Studio — shared subpage styles.
   Consumes the color/motion engine in assets/theme.css (palette
   tokens: --bg --ink --ink-2 --accent --hairline --surface
   --surface-veil --wash-* etc.). Subpages link theme.css FIRST,
   then this file. Type + chrome match the hub so the whole site
   reads as one identity.

   Used by: games / about / faq / contact (and any future page).
   Canonical header/footer markup: agent-guides/shared-chrome.html
   ============================================================ */

:root{
  --ease:cubic-bezier(.16,.84,.44,1);
  --container:980px;
  --measure:62ch;
  --font-display:"Fraunces","Iowan Old Style",Cambria,Georgia,serif;
  --font-body:"Atkinson Hyperlegible",system-ui,-apple-system,sans-serif;
  --font-mono:"Spline Sans Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--bg);scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  position:relative;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:60;}
.skip:focus{left:16px;top:16px;background:var(--surface);color:var(--ink);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  padding:10px 14px;border:1px solid var(--accent);border-radius:8px;}

.mono{font-family:var(--font-mono);font-weight:500;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);}

/* ---------- backdrop atmosphere (washes + grain; full Field canvas optional) ---------- */
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg);}
#field{position:absolute;inset:0;width:100%;height:100%;}
.bd{position:absolute;aspect-ratio:1;border-radius:50%;filter:blur(80px);mix-blend-mode:var(--bd-blend);opacity:var(--lo);}
.bd--ember{--lo:.55;width:85vw;background:radial-gradient(circle,var(--wash-1) 0%,transparent 62%);top:-20%;left:-15%;}
.bd--verdigris{--lo:.45;width:78vw;background:radial-gradient(circle,var(--wash-2) 0%,transparent 60%);bottom:-25%;right:-12%;}
.bd--madder{--lo:.40;width:75vw;background:radial-gradient(circle,var(--wash-3) 0%,transparent 58%);top:55%;left:60%;translate:-50% -50%;}
.bd-grain{position:absolute;inset:0;opacity:var(--grain-o);mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");}
.bd-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 38%,var(--vignette) 100%);}
@keyframes drift-e{0%,100%{transform:translate(0,0) scale(.92);}50%{transform:translate(12vw,9vw) scale(1.10);}}
@keyframes drift-v{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-10vw,-11vw) scale(1.12);}}
@keyframes drift-m{0%,100%{transform:translate(0,0) scale(.95);}50%{transform:translate(9vw,-9vw) scale(1.08);}}
html.js .bd--ember{animation:drift-e 40s ease-in-out infinite;}
html.js .bd--verdigris{animation:drift-v 34s ease-in-out infinite;}
html.js .bd--madder{animation:drift-m 28s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){html.js .bd{animation:none;}}

/* ---------- house mark: pulsing diamond ---------- */
.tick{position:relative;display:inline-block;width:8px;height:8px;background:var(--accent);transform:rotate(45deg);flex:none;}
.tick::after{content:"";position:absolute;inset:-4px;border:1px solid var(--accent);opacity:0;}
html.js .tick{animation:tick-pulse 2.4s ease-in-out infinite;}
html.js .tick::after{animation:tick-ring 2.4s ease-out infinite;}
@keyframes tick-pulse{0%,100%{transform:rotate(45deg) scale(1);}50%{transform:rotate(45deg) scale(1.15);}}
@keyframes tick-ring{0%{opacity:.7;transform:scale(.6);}70%,100%{opacity:0;transform:scale(1.6);}}
@media (prefers-reduced-motion:reduce){html.js .tick,html.js .tick::after{animation:none;}}

/* ---------- layout shell ---------- */
main{position:relative;z-index:1;max-width:var(--container);margin:0 auto;
  padding:0 clamp(20px,5vw,44px) clamp(40px,8vh,72px);
  display:flex;flex-direction:column;gap:clamp(28px,5vh,48px);min-height:100vh;}

/* ---------- topbar ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:24px 0;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink);font-weight:500;}
/* legacy .brand .mark / .brand small from the old teal theme: neutralized so old
   markup still renders cleanly until pages adopt the .tick markup */
.brand .mark{display:none;}
.brand small{color:var(--ink-2);font-weight:400;margin-left:.4rem;letter-spacing:0;text-transform:none;}

.nav{display:flex;gap:clamp(14px,2.6vw,26px);flex-wrap:wrap;align-items:center;}
.nav a{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);position:relative;padding:4px 0;
  transition:color .3s var(--ease);}
.nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;
  background:var(--accent);transition:left .5s var(--ease),right .5s var(--ease);}
.nav a:hover,.nav a:focus-visible{color:var(--ink);}
.nav a:hover::after,.nav a:focus-visible::after{left:0;right:0;}
.nav a[aria-current="page"]{color:var(--accent);}
.nav a[aria-current="page"]::after{left:0;right:0;opacity:.5;}

/* ---------- page header ---------- */
.page-header{display:flex;flex-direction:column;gap:14px;padding-top:clamp(20px,5vh,52px);}
.page-header .eyebrow{font-family:var(--font-mono);font-weight:500;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:12px;}
.page-header h1{font-family:var(--font-display);font-weight:300;
  font-variation-settings:"opsz" 144;font-size:clamp(2.4rem,7vw,4.2rem);
  line-height:.98;letter-spacing:-.03em;color:var(--ink);}
.page-header h1 em{font-style:italic;font-weight:350;color:var(--accent);}
.page-header .rule{width:96px;height:1px;background:var(--accent);margin:6px 0 4px;}
.page-header p.lede,.page-header .lede{color:var(--ink-2);
  font-size:clamp(1.05rem,1.6vw,1.24rem);line-height:1.55;max-width:var(--measure);}
.page-header .lede strong{color:var(--ink);font-weight:400;}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:14px;}

.card{position:relative;background:var(--surface-veil);
  border:1px solid var(--hairline);border-radius:16px;
  padding:clamp(20px,3vw,28px);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.card h2{font-family:var(--font-display);font-weight:340;
  font-variation-settings:"opsz" 60;font-size:1.4rem;letter-spacing:-.012em;
  line-height:1.1;margin:0 0 10px;color:var(--ink);}
.card h2 em{font-style:italic;color:var(--accent);}
.card p{margin:0;color:var(--ink-2);max-width:var(--measure);}
.card p + p{margin-top:.6rem;}
.card a{color:var(--accent);text-decoration:none;position:relative;}
.card a:hover,.card a:focus-visible{text-decoration:underline;text-underline-offset:3px;}

/* linked card (e.g. games index) */
a.card-link{display:flex;flex-direction:column;gap:.55rem;color:inherit;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);}
a.card-link:hover,a.card-link:focus-visible{transform:translateY(-3px);
  border-color:rgba(var(--accent-rgb),.45);
  box-shadow:0 18px 50px -22px rgba(var(--accent-rgb),.4);outline:none;}
a.card-link h2{margin:0;}
a.card-link .badge{display:inline-flex;align-items:center;align-self:flex-start;
  gap:7px;padding:4px 11px;border-radius:999px;
  background:rgba(var(--accent-2-rgb),.14);color:var(--accent-2);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;}
a.card-link .meta{font-family:var(--font-mono);color:var(--ink-2);
  font-size:.74rem;letter-spacing:.06em;}
a.card-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){a.card-link{transition:none;}}

/* status dot used in badges / rows */
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 0 4px rgba(var(--accent-2-rgb),.16);flex:none;}

/* ---------- contact rows ---------- */
.contact-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;}
.contact-row .label{font-family:var(--font-mono);color:var(--ink-2);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;min-width:5rem;}

/* ---------- button / portal-style CTA ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.55rem;padding:.7rem 1.5rem;border-radius:999px;
  border:1px solid var(--hairline);overflow:hidden;
  background:color-mix(in srgb,var(--surface) 55%,transparent);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  color:var(--ink);cursor:pointer;font-family:var(--font-mono);
  font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .42s var(--ease),box-shadow .52s var(--ease),transform .52s var(--ease);}
.btn:hover,.btn:focus-visible{border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  box-shadow:0 16px 50px -16px color-mix(in srgb,var(--accent) 38%,transparent);
  transform:translateY(-2px);outline:none;}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.btn:active{transform:translateY(0);}
.btn--solid{background:var(--accent);color:var(--on-accent);border-color:transparent;}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--accent-hi);}
@media (prefers-reduced-motion:reduce){.btn{transition:none;}}

/* ---------- footer ---------- */
.page-footer{margin-top:auto;padding-top:clamp(24px,4vh,40px);
  border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;}
.page-footer .foot__brand,.page-footer > span:first-child{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2);}
.page-footer a{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  color:var(--ink-2);position:relative;transition:color .3s var(--ease);}
.page-footer a::after{content:"";position:absolute;left:50%;right:50%;bottom:-3px;
  height:1px;background:var(--accent);transition:left .5s var(--ease),right .5s var(--ease);}
.page-footer a:hover,.page-footer a:focus-visible{color:var(--ink);}
.page-footer a:hover::after,.page-footer a:focus-visible::after{left:0;right:0;}
.page-footer .nav{gap:clamp(14px,2.6vw,22px);}
.foot__controls{display:inline-flex;gap:18px;align-items:center;}

/* ---------- field shuffle + scheme cycle controls ---------- */
.field-mode{background:none;border:0;cursor:pointer;position:relative;padding:3px 0;
  font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:.08em;
  text-transform:lowercase;color:var(--ink-2);transition:color .3s var(--ease);}
.field-mode:hover,.field-mode:focus-visible{color:var(--accent);outline:none;}
.field-mode::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;
  background:var(--accent);transition:left .56s var(--ease),right .56s var(--ease);}
.field-mode:hover::after,.field-mode:focus-visible::after{left:0;right:0;}
.field-mode:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .topbar{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 0;}
  main{gap:clamp(22px,4vh,36px);}
  .page-footer{flex-direction:column;align-items:flex-start;gap:16px;}
}