/* AIANDGRACE / MYTHIC CODE SYSTEM v7
   Shared public-site design. Game canvases keep their own dedicated styles. */

:root{
  --ink:#030506;
  --ink-2:#080b0d;
  --panel:#0d1114;
  --paper:#f4f7f3;
  --muted:#9aa4a6;
  --line:rgba(244,247,243,.18);
  --line-hot:rgba(244,247,243,.62);
  --cyan:#72f7e8;
  --cyan-soft:rgba(114,247,232,.12);
  --gold:#f1c75b;
  --gold-soft:rgba(241,199,91,.12);
  --violet:#a994ff;
  --danger:#ff5a52;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --max:1240px;
  --ease:cubic-bezier(.2,.75,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{
  min-height:100%;overflow-x:hidden;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.24;
  background-image:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.025) 4px);
  mix-blend-mode:screen;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 78% 18%,rgba(114,247,232,.07),transparent 28%),radial-gradient(circle at 22% 70%,rgba(169,148,255,.055),transparent 30%);
}
a{color:inherit}
button,input,textarea,select{font:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--cyan);color:var(--ink)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cyan);color:var(--ink);padding:14px 20px;font:700 .72rem/1 var(--mono);letter-spacing:.14em;text-decoration:none}
.skip-link:focus{left:12px;top:12px}

/* NAVIGATION */
.site-header{position:sticky;top:0;z-index:80;border-bottom:1px solid var(--line);background:rgba(3,5,6,.78);backdrop-filter:blur(18px) saturate(140%)}
.nav{width:min(var(--max),calc(100% - 40px));min-height:74px;margin:auto;display:flex;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--paper);font:800 .81rem/1 var(--mono);letter-spacing:.24em;text-decoration:none;white-space:nowrap}
.brand-sigil{display:grid;place-items:center;width:29px;height:29px;border:1px solid var(--line-hot);color:var(--gold);font:400 1.35rem/1 var(--sans);letter-spacing:0;box-shadow:0 0 18px rgba(241,199,91,.1)}
.nav-status{display:flex;align-items:center;gap:8px;margin-right:auto;color:var(--muted);font:500 .59rem/1 var(--mono);letter-spacing:.13em;white-space:nowrap}
.nav-status i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.nav-status span{color:#596366}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links a{display:flex;align-items:center;min-height:42px;padding:0 12px;text-decoration:none;color:#cbd1d1;font:600 .63rem/1 var(--mono);letter-spacing:.14em;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--cyan);background:var(--cyan-soft)}
.nav-links a.nav-volva{color:var(--gold)}
.nav-links a.nav-volva:hover{color:var(--gold);background:var(--gold-soft)}
.nav-links a.nav-play{margin-left:8px;padding:0 18px;border:1px solid var(--line-hot);color:var(--paper);background:rgba(255,255,255,.04)}
.nav-links a.nav-play:hover{border-color:var(--cyan);color:var(--ink);background:var(--cyan)}
.nav-toggle{display:none;min-height:42px;padding:0 14px;border:1px solid var(--line-hot);background:transparent;color:var(--paper);font:700 .65rem/1 var(--mono);letter-spacing:.15em;cursor:pointer}

/* HOME HERO */
.mythic-hero{position:relative;isolation:isolate;min-height:calc(100svh - 74px);display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);align-items:center;gap:5vw;width:min(1480px,100%);margin:auto;padding:80px clamp(24px,5vw,84px) 94px;overflow:hidden}
.hero-grid{position:absolute;inset:0;z-index:-2;opacity:.48;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 92%)}
.mythic-hero::before{content:"";position:absolute;z-index:-1;width:min(62vw,850px);aspect-ratio:1;right:-16%;top:-32%;border:1px solid rgba(114,247,232,.13);border-radius:50%;box-shadow:0 0 0 70px rgba(114,247,232,.018),0 0 0 140px rgba(114,247,232,.012)}
.hero-copy{position:relative;z-index:2}
.system-line{display:flex;flex-wrap:wrap;gap:8px 24px;padding:10px 0;margin-bottom:48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:#758083;font:500 .58rem/1.3 var(--mono);letter-spacing:.12em}
.system-line span:last-child{color:var(--cyan)}
.eyebrow{color:var(--cyan);font:600 .66rem/1.5 var(--mono);letter-spacing:.22em;text-transform:uppercase;margin-bottom:20px}
.mythic-hero h1,.section-heading h2,.system-copy h2,.studio-copy h2,.contact-section h2{font-family:var(--sans);font-weight:850;line-height:.83;letter-spacing:-.072em;text-transform:uppercase}
.mythic-hero h1{font-size:clamp(4.2rem,9.4vw,9.5rem);margin-left:-.07em}
.mythic-hero h1 span{color:var(--paper);-webkit-text-stroke:0 transparent}
.mythic-hero h1 em,.section-heading h2 em,.system-copy h2 em,.studio-copy h2 em,.contact-section h2 em{color:transparent;font-style:normal;-webkit-text-stroke:1px var(--paper)}
.hero-lead{max-width:520px;margin:34px 0 30px;color:#bac2c2;font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.65}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:54px;padding:0 22px;border:1px solid var(--line-hot);text-decoration:none;font:700 .68rem/1 var(--mono);letter-spacing:.15em;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-3px)}
.btn-solar,.btn-solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-solar b{color:var(--ink);font-size:1rem}
.btn-solar:hover,.btn-solid:hover{background:var(--cyan);border-color:var(--cyan)}
.btn-ghost{background:rgba(3,5,6,.58);color:var(--paper)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-soft)}
.hero-readout{display:flex;margin-top:52px;padding-top:22px;border-top:1px solid var(--line)}
.hero-readout>li{display:grid;gap:4px;min-width:125px;padding-right:24px;margin-right:24px;border-right:1px solid var(--line);list-style:none}
.hero-readout>li:last-child{border:0}
.hero-readout strong{font:500 1.12rem/1 var(--mono);color:var(--paper)}
.hero-readout span{font:500 .54rem/1.4 var(--mono);letter-spacing:.12em;color:#6e797c}

/* SOLAR CROSS / COSMOLOGICAL INTERFACE */
.cosmos-interface{--rx:0deg;--ry:0deg;position:relative;width:min(100%,640px);aspect-ratio:1;margin:auto;transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .3s var(--ease);transform-style:preserve-3d}
.cosmos-interface::before{content:"";position:absolute;inset:13%;border-radius:50%;background:radial-gradient(circle,rgba(241,199,91,.13),rgba(114,247,232,.025) 42%,transparent 70%);filter:blur(18px)}
.solar-engine{position:absolute;inset:3%;width:94%;height:94%;overflow:visible;filter:drop-shadow(0 0 18px rgba(114,247,232,.08))}
.solar-orbits{stroke:rgba(244,247,243,.25);stroke-width:1}
.solar-orbits circle:nth-child(2){stroke:rgba(114,247,232,.34)}
.realm-nodes{fill:var(--ink);stroke:var(--cyan);stroke-width:1.5}
.sun-cross{stroke:var(--gold);stroke-width:2.5;filter:drop-shadow(0 0 8px rgba(241,199,91,.22))}
.sun-cross circle:first-child{stroke-width:3.5}
.sun-cross circle:last-child{fill:var(--ink);stroke:var(--paper);stroke-width:1}
.rune-ring{fill:var(--paper);font:400 21px/1 var(--serif);opacity:.86}
.solar-orbits{transform-box:fill-box;transform-origin:center;animation:orbit-spin 55s linear infinite}
.realm-nodes{transform-box:fill-box;transform-origin:center;animation:orbit-back 55s linear infinite}
.solar-core{position:absolute;left:50%;top:50%;display:grid;place-items:center;gap:4px;transform:translate(-50%,-50%) translateZ(35px);text-align:center}
.solar-core span{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--line-hot);border-radius:50%;background:rgba(3,5,6,.9);color:var(--gold);font-size:2.7rem;line-height:1;box-shadow:0 0 42px rgba(241,199,91,.17)}
.solar-core small{color:var(--muted);font:500 .5rem/1 var(--mono);letter-spacing:.15em;white-space:nowrap}
.orbit-label{position:absolute;padding:6px 9px;background:var(--ink);border:1px solid var(--line);color:#788285;font:500 .52rem/1 var(--mono);letter-spacing:.12em}
.orbit-label-a{top:8%;left:12%}.orbit-label-b{right:1%;top:47%}.orbit-label-c{bottom:10%;left:7%}
.interface-caption{position:absolute;left:16%;right:16%;bottom:0;display:flex;justify-content:space-between;gap:14px;padding-top:10px;border-top:1px solid var(--line);font:500 .52rem/1.4 var(--mono);letter-spacing:.1em;color:#6f797c}
.code-accent{color:var(--cyan)}
.scroll-signal{position:absolute;bottom:24px;left:50%;display:flex;align-items:center;gap:12px;color:#5e686a;font:500 .52rem/1 var(--mono);letter-spacing:.16em;transform:translateX(-50%)}
.scroll-signal span{display:block;width:42px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);animation:scan-x 2s ease-in-out infinite}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes orbit-back{to{transform:rotate(-360deg)}}
@keyframes scan-x{0%,100%{transform:scaleX(.35);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}}

.signal-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);color:var(--ink)}
.signal-marquee>div{display:flex;align-items:center;width:max-content;min-width:100%;height:52px;gap:28px;padding-left:20px;font:800 .68rem/1 var(--mono);letter-spacing:.16em;animation:marquee 28s linear infinite}
.signal-marquee b{color:#7c7f7d;font-size:1.2rem}
@keyframes marquee{to{transform:translateX(-25%)}}

/* SHARED HOME SECTIONS */
.site-shell{width:min(var(--max),calc(100% - 48px));margin:auto}
.worlds-section,.system-section,.studio-section{padding:clamp(90px,12vw,160px) 0;border-bottom:1px solid var(--line)}
.section-index{color:var(--cyan);font:600 .62rem/1.4 var(--mono);letter-spacing:.18em}
.section-heading{display:grid;grid-template-columns:1.1fr .8fr;gap:30px;align-items:end;margin-bottom:68px}
.section-heading>div{grid-column:1/-1;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:13px}
.section-code{color:#5f6a6d;font:500 .57rem/1 var(--mono)}
.section-heading h2{font-size:clamp(3.2rem,7vw,6.5rem)}
.section-heading p{max-width:360px;color:var(--muted);font-size:1.02rem}
.world-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:20px}
.world-card{position:relative;min-height:620px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);background:var(--panel);transition:border-color .3s,transform .3s var(--ease)}
.world-card:hover{transform:translateY(-6px);border-color:var(--line-hot)}
.odin-card{background:radial-gradient(circle at 70% 25%,rgba(114,247,232,.13),transparent 28%),linear-gradient(135deg,#10161a,#060809 62%)}
.classic-card{background:linear-gradient(160deg,#111417,#060708)}
.card-code{position:absolute;top:25px;left:26px;z-index:3;color:rgba(114,247,232,.58);font:500 .52rem/1.7 var(--mono);letter-spacing:.08em}
.odin-visual{position:absolute;right:-6%;top:2%;width:68%;height:56%;display:grid;place-items:center;pointer-events:none}
.odin-visual img{position:relative;z-index:2;width:min(76%,360px);height:auto;image-rendering:pixelated;filter:brightness(1.45) contrast(1.08) drop-shadow(0 0 34px rgba(114,247,232,.25));transform:scaleX(-1)}
.odin-halo{position:absolute;width:65%;aspect-ratio:1;border:1px solid rgba(241,199,91,.4);border-radius:50%;box-shadow:0 0 0 24px rgba(241,199,91,.018),0 0 0 74px rgba(114,247,232,.018)}
.odin-halo::before,.odin-halo::after{content:"";position:absolute;background:rgba(241,199,91,.55)}
.odin-halo::before{left:50%;top:-22%;bottom:-22%;width:1px}.odin-halo::after{top:50%;left:-22%;right:-22%;height:1px}
.world-card-content{position:relative;z-index:4;margin-top:auto;padding:34px}
.world-meta{display:flex;justify-content:space-between;margin-bottom:22px;color:#738083;font:500 .56rem/1 var(--mono);letter-spacing:.14em}
.world-meta span:first-child{color:var(--cyan)}
.world-card h3{font-size:clamp(2rem,4vw,4rem);line-height:.93;letter-spacing:-.045em;text-transform:uppercase}
.world-card h3 em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--paper)}
.world-card p{max-width:580px;margin:22px 0;color:#aeb7b8;font-size:.94rem}
.world-tags{display:flex;gap:7px;flex-wrap:wrap;list-style:none;margin-bottom:25px}
.world-tags li{padding:6px 9px;border:1px solid var(--line);color:#849093;font:500 .53rem/1 var(--mono);letter-spacing:.1em}
.world-link{display:flex;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid var(--line);text-decoration:none;font:700 .67rem/1 var(--mono);letter-spacing:.14em}
.world-link b{font-size:1.1rem;color:var(--cyan)}
.world-link:hover{color:var(--cyan)}
.classic-sky{position:absolute;inset:0 0 48%;overflow:hidden;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:34px 34px}
.classic-sky i{position:absolute;width:2px;height:2px;background:var(--paper);box-shadow:0 0 8px white}
.classic-sky i:nth-child(1){left:12%;top:22%}.classic-sky i:nth-child(2){left:76%;top:16%}.classic-sky i:nth-child(3){left:43%;top:34%}.classic-sky i:nth-child(4){left:89%;top:58%}.classic-sky i:nth-child(5){left:22%;top:68%}
.pixel-route{position:absolute;left:13%;right:13%;top:53%;height:1px;background:repeating-linear-gradient(90deg,var(--paper) 0 5px,transparent 5px 15px);transform:rotate(-8deg)}
.pixel-route::after{content:"▸";position:absolute;right:-5px;top:-12px;color:var(--gold);font-size:20px}

/* SYSTEM / CODE */
.system-section{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;align-items:start}
.system-copy{position:sticky;top:120px}
.system-copy h2{font-size:clamp(3rem,6vw,5.8rem);margin:28px 0 34px}
.system-copy p{max-width:440px;color:#c3c9c9;font-size:1.05rem}
.system-copy .system-note{margin-top:24px;padding-left:18px;border-left:2px solid var(--gold);color:var(--muted);font-size:.88rem}
.code-window{border:1px solid var(--line);background:#070a0c;box-shadow:24px 28px 0 rgba(255,255,255,.018)}
.code-window-bar,.code-window-foot{display:flex;align-items:center;gap:18px;min-height:46px;padding:0 16px;border-bottom:1px solid var(--line);font:500 .56rem/1 var(--mono);letter-spacing:.1em;color:#6f7a7d}
.code-window-bar>span{display:flex;gap:6px}.code-window-bar i{width:7px;height:7px;border:1px solid #697174;border-radius:50%}.code-window-bar b{color:#aab2b3;font-weight:500}.code-window-bar em{margin-left:auto;color:#596366;font-style:normal}
.code-window pre{overflow:auto;padding:32px 26px;font:500 clamp(.7rem,1.25vw,.9rem)/2 var(--mono);tab-size:2;color:#d7dddd}
.code-dim{color:#465054;user-select:none}.code-violet{color:var(--violet)}.code-gold{color:var(--gold)}.code-cyan{color:var(--cyan)}.code-comment{color:#687477}
.code-window-foot{border-top:1px solid var(--line);border-bottom:0;flex-wrap:wrap}.terminal-cursor{margin-left:auto;color:var(--cyan);animation:cursor-blink 1s steps(1) infinite}
@keyframes cursor-blink{50%{opacity:.25}}
.realm-map{grid-column:2;border:1px solid var(--line);background:rgba(255,255,255,.015);padding:20px}
.realm-map-title{display:flex;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line);color:#697477;font:500 .56rem/1 var(--mono);letter-spacing:.11em}
.realm-map-note{margin:12px 0 0;color:#697477;font:500 .52rem/1.6 var(--mono);letter-spacing:.09em}
.realm-tree{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px 13px;padding:42px 0 18px}
.realm-tree::before,.realm-tree::after,.realm-tree .trunk{content:"";position:absolute;background:var(--line)}
.realm-tree .trunk{left:50%;top:23px;bottom:0;width:1px}
.realm-tree::before{left:16.6%;right:16.6%;top:68px;height:1px}.realm-tree::after{left:16.6%;right:16.6%;bottom:43px;height:1px}
.realm{position:relative;z-index:2;justify-self:center;min-width:105px;padding:9px 8px;border:1px solid var(--line);background:var(--ink);color:#707b7e;text-align:center;font:500 .52rem/1 var(--mono);letter-spacing:.08em;font-style:normal}
.realm.active{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 24px rgba(114,247,232,.09)}

/* STUDIO */
.studio-section{display:grid;grid-template-columns:.45fr 1.05fr;gap:60px 90px;align-items:start}
.studio-mark{font:850 clamp(6rem,14vw,12rem)/.8 var(--sans);letter-spacing:-.1em;color:transparent;-webkit-text-stroke:1px rgba(244,247,243,.14);writing-mode:vertical-rl;transform:rotate(180deg);justify-self:center}
.studio-copy h2{font-size:clamp(3.1rem,6.4vw,6.3rem);margin:26px 0 34px}
.studio-copy p{max-width:680px;margin-bottom:16px;color:#aeb7b8;font-size:1.02rem}
.principles{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.principles>div{min-height:190px;padding:23px;border-right:1px solid var(--line)}
.principles>div:last-child{border:0}
.principles b{display:block;margin-bottom:40px;color:var(--cyan);font:500 .58rem/1 var(--mono)}
.principles span{display:block;margin-bottom:10px;font:700 .66rem/1 var(--mono);letter-spacing:.13em}
.principles p{color:#778286;font-size:.8rem}

/* CONTACT */
.contact-section{position:relative;min-height:620px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:110px 0;overflow:hidden}
.contact-section h2{position:relative;z-index:2;font-size:clamp(4rem,10vw,9.5rem);margin:28px 0 36px}
.contact-section>p{color:var(--muted);margin-bottom:28px}
.contact-symbol{position:absolute;right:0;top:50%;color:rgba(241,199,91,.07);font:300 clamp(24rem,46vw,44rem)/1 var(--sans);transform:translate(18%,-50%)}
.contact-open{position:relative;z-index:2;margin-bottom:26px}
.contact-actions{position:relative;z-index:2;width:min(100%,780px)}
.contact-link{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 0;color:var(--paper);background:transparent;border:0;border-top:1px solid var(--line-hot);border-bottom:1px solid var(--line-hot);text-align:left;text-decoration:none;font:600 clamp(.85rem,2vw,1.15rem)/1 var(--mono);letter-spacing:.08em;cursor:pointer;-webkit-appearance:none;appearance:none}
.contact-link b{color:var(--cyan);font:700 .58rem/1 var(--mono);letter-spacing:.13em}
.contact-link:hover{color:var(--cyan);border-color:var(--cyan)}
.contact-status{position:relative;z-index:2;min-height:18px;margin-top:12px;color:var(--cyan);font:600 .55rem/1.4 var(--mono);letter-spacing:.1em}

/* SHARED INNER PAGES */
.screen{width:min(920px,calc(100% - 40px));margin:auto}
.hero{width:min(var(--max),calc(100% - 40px));margin:auto;padding:96px 0 70px;text-align:left}
.hero-compact{padding-top:100px;padding-bottom:46px}
.hero .eyebrow{margin-bottom:20px}.hero h1{font-size:clamp(2.8rem,7vw,6.2rem);line-height:.9;letter-spacing:-.055em;text-transform:uppercase}.hero .intro{max-width:700px;margin:24px 0 0;color:#aab3b4;font-size:1rem}.hero .dim{color:#738083}
.mark{width:min(300px,75vw);margin-bottom:28px;image-rendering:pixelated}
.block{padding:70px 0;border-top:1px solid var(--line)}
.block h2{margin-bottom:28px;color:var(--paper);font:750 .72rem/1.4 var(--mono);letter-spacing:.17em;text-transform:uppercase}.block h2::before{content:"// ";color:var(--cyan)}
.body p{max-width:70ch;margin-bottom:15px;color:#bcc3c3}.body ul{max-width:70ch;list-style:none}.body li{margin-bottom:9px;padding-left:1.4em;color:#bcc3c3}.body li::before{content:"↳ ";color:var(--cyan);margin-left:-1.4em}.dim{color:#788387!important}
.games-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.game-card{padding:30px;border:1px solid var(--line);background:var(--panel);box-shadow:12px 14px 0 rgba(255,255,255,.025)}
.game-card-war{border-color:rgba(114,247,232,.38);background:linear-gradient(145deg,rgba(114,247,232,.08),var(--panel) 45%)}
.game-label{display:inline-block;margin-bottom:20px;padding:6px 10px;background:var(--paper);color:var(--ink);font:800 .56rem/1 var(--mono);letter-spacing:.15em}.game-label-war{background:var(--cyan)}
.game-byline{margin-bottom:12px;color:#788387;font:500 .6rem/1.4 var(--mono);letter-spacing:.16em}.game-tag{margin-bottom:16px;font-size:1.12rem}.story-line{color:var(--paper)!important;font:650 .77rem/1.8 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.game-card .btn-row{margin-top:24px}.game-card .btn{min-height:48px;padding:0 18px}
.mail{display:inline-flex;margin-top:10px;padding:13px 17px;border:1px solid var(--line-hot);text-decoration:none;font-family:var(--mono)}.mail:hover{color:var(--cyan);border-color:var(--cyan)}
.article{padding:72px 0 100px}.article h1{font-size:clamp(2.1rem,5vw,4rem);line-height:1;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:12px}.updated{margin-bottom:38px;color:#758083;font:500 .62rem/1 var(--mono);letter-spacing:.12em}.article h2{margin:38px 0 15px;font:750 .76rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}.article h3{margin:25px 0 10px;font:700 .68rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}.article p,.article li{max-width:72ch;margin-bottom:14px;color:#bbc3c3}.article ul{list-style:none}.article li{padding-left:1.4em}.article li::before{content:"↳ ";color:var(--cyan);margin-left:-1.4em}.backlink{display:inline-block;margin-bottom:38px;padding:9px 13px;border:1px solid var(--line);text-decoration:none;font:600 .62rem/1 var(--mono);letter-spacing:.13em}.backlink:hover{color:var(--cyan);border-color:var(--cyan)}

/* FOOTER */
.site-footer{width:min(var(--max),calc(100% - 48px));margin:auto;padding:70px 0 34px;border-top:1px solid var(--line)}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:start;padding-bottom:58px}.footer-top>p{font-size:clamp(1.3rem,2.5vw,2.1rem);font-weight:800;line-height:1.05;letter-spacing:-.035em}.footer-coordinates{justify-self:end;display:grid;gap:7px;color:#717d80;text-align:right;font:500 .56rem/1 var(--mono);letter-spacing:.12em}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:22px;border-top:1px solid var(--line)}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none}.footer-nav a{color:#858f91;text-decoration:none;font:500 .59rem/1 var(--mono);letter-spacing:.1em}.footer-nav a:hover{color:var(--cyan)}.copyright{color:#596467;font:500 .55rem/1.4 var(--mono);letter-spacing:.08em;text-align:right}

/* Translation-safe progressive enhancement.
   Content must never depend on a transient JS class for visibility: browser
   translators can rebuild text nodes and invalidate reveal state. */
.js [data-reveal],.js [data-reveal].is-visible{opacity:1;transform:none;transition:none}

/* RESPONSIVE */
@media (max-width:1080px){
  .nav-status{display:none}.nav-links a{padding:0 8px}
  .mythic-hero{grid-template-columns:1fr .85fr;gap:2vw}.mythic-hero h1{font-size:clamp(4rem,9vw,7rem)}
  .world-grid{grid-template-columns:1fr 1fr}.odin-visual{width:78%;right:-14%}
  .system-section{gap:45px}.principles{grid-template-columns:1fr}.principles>div{min-height:130px;border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:820px){
  .nav{width:calc(100% - 30px);min-height:66px;flex-wrap:wrap;padding:12px 0}.nav-toggle{display:block}.js .nav-links{display:none}.js .nav-links.open{display:flex}.nav-links{width:100%;flex-direction:column;align-items:stretch;padding:10px 0 4px;border-top:1px solid var(--line)}.nav-links a{justify-content:flex-start;padding:0 8px}.nav-links a.nav-play{justify-content:center;margin:5px 0 0}
  .mythic-hero{min-height:auto;grid-template-columns:1fr;padding-top:64px}.hero-copy{max-width:700px}.cosmos-interface{width:min(100%,580px);margin-top:20px}.scroll-signal{display:none}
  .section-heading{grid-template-columns:1fr}.section-heading p{max-width:580px}
  .world-grid{grid-template-columns:1fr}.world-card{min-height:590px}.classic-card{min-height:480px}
  .system-section{grid-template-columns:1fr}.system-copy{position:static}.realm-map{grid-column:1}
  .studio-section{grid-template-columns:1fr}.studio-mark{display:none}.principles{grid-column:1}
  .footer-top{grid-template-columns:1fr 1fr}.footer-coordinates{grid-column:2;grid-row:1/3}.footer-bottom{align-items:flex-start;flex-direction:column}.copyright{text-align:left}
}
@media (max-width:560px){
  .site-shell,.site-footer{width:calc(100% - 30px)}
  .mythic-hero{padding:52px 18px 72px}.system-line{margin-bottom:36px}.mythic-hero h1{font-size:clamp(3.6rem,20vw,5.4rem)}.hero-lead{margin-top:25px}.hero-actions .btn{width:100%}.hero-readout{justify-content:space-between}.hero-readout>li{min-width:0;margin-right:12px;padding-right:12px}.hero-readout span{font-size:.46rem}
  .cosmos-interface{margin-top:34px}.orbit-label{display:none}.interface-caption{left:8%;right:8%}
  .signal-marquee>div{height:46px}
  .worlds-section,.system-section,.studio-section{padding:88px 0}.section-heading{margin-bottom:42px}.section-heading h2,.system-copy h2,.studio-copy h2{font-size:clamp(3rem,17vw,4.8rem)}.section-heading>div{align-items:flex-start;gap:8px;flex-direction:column}.section-code{display:none}
  .world-card{min-height:600px}.world-card-content{padding:24px}.odin-visual{top:8%;width:102%;right:-30%}.world-card h3{font-size:2.6rem}.card-code{left:20px;top:20px}
  .code-window pre{padding:24px 16px;font-size:.67rem}.code-window-bar em{display:none}.code-window-foot{gap:12px}.terminal-cursor{margin-left:0}
  .realm-tree{grid-template-columns:1fr 1fr}.realm-tree::before,.realm-tree::after,.realm-tree .trunk{display:none}.realm{min-width:115px}.r9{grid-column:1/-1}
  .contact-section{min-height:500px}.contact-section h2{font-size:clamp(3.5rem,19vw,5.5rem)}.contact-link{font-size:.72rem;gap:14px}.contact-link b{font-size:.5rem;white-space:nowrap}
  .footer-top{grid-template-columns:1fr}.footer-coordinates{grid-column:1;grid-row:auto;justify-self:start;text-align:left}.footer-brand{margin-bottom:20px}
  .games-grid{grid-template-columns:1fr}.hero{padding-top:74px}.game-card{padding:23px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.solar-orbits,.realm-nodes,.signal-marquee>div,.terminal-cursor,.scroll-signal span{animation:none!important}.cosmos-interface{transform:none!important}.js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* CONTROLLER SUPPORT BADGE — informational metadata, not a call-to-action */
.pad-badge{display:inline-block;margin:0 0 18px;padding:5px 9px;border:1px solid var(--line);
  color:#8a9497;background:transparent;font:600 .52rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap}
.world-card .pad-badge{margin:-10px 0 20px}
.game-card .pad-badge{margin-left:8px;vertical-align:top}
.pad-badge[data-pad-connected]{color:var(--paper);border-color:var(--line-hot)}

/* HÁVAMÁL THRESHOLD QUOTATION */
.gate-quote{margin:64px auto 0;padding:26px 0 22px;max-width:56ch;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.gate-quote blockquote{margin:0}
.gate-quote p{margin:0;color:#c3cbcb;font:500 clamp(.92rem,1.9vw,1.12rem)/1.85 var(--mono);
  letter-spacing:.02em;overflow-wrap:break-word}
.gate-quote figcaption{margin-top:16px;color:#778285;font:500 .56rem/1.6 var(--mono);
  letter-spacing:.14em;text-transform:uppercase}
.gate-actions{justify-content:center;margin-top:30px}
@media (max-width:640px){
  .gate-quote{margin-top:44px;padding:20px 0 18px}
  .gate-quote p{font-size:.9rem;line-height:1.75}
}

/* ODIN / MYTHIC SYSTEM — grid placement for the threshold block.
   Cause of the desktop overlap: .system-section is a two-column grid whose
   first column holds .system-copy at position:sticky (top:120px). The
   quotation and its call-to-action were auto-placed into the next free cell,
   which is COLUMN 1, ROW 3 — directly beneath the sticky block. As the section
   scrolls, the pinned copy travels down over that cell and the text layers
   collide. Placing the threshold block in column 2, alongside .code-window and
   .realm-map, keeps the sticky column free and every block in normal flow.
   Below 821px the section is already a single column with position:static,
   so the mobile layout is left exactly as it is. */
.gate-threshold{grid-column:1}
@media (min-width:821px){
  .system-section .gate-threshold{grid-column:2;justify-self:stretch}
  .system-section .gate-threshold .gate-quote{margin-top:0}
  .system-section .gate-threshold .gate-actions{margin-top:26px}
}

/* Below 821px the section is a single column and the threshold block is the
   only child of its row. Wrapping the quotation and the button together removed
   one 45px grid row-gap between them, so it is restored here explicitly and the
   mobile rhythm stays pixel-identical to v28. */
@media (max-width:820px){
  .gate-threshold .gate-actions{margin-top:75px}
}

/* Fixed-header clearance for in-page anchor navigation, so a section heading
   never lands beneath the sticky header after a jump. */
#worlds,#system,#about,#contact{scroll-margin-top:96px}