:root {
  --space:#010205;
  --space-blue:#030912;
  --panel:rgba(3,14,25,.92);
  --panel-soft:rgba(5,25,39,.78);
  --line:rgba(54,126,151,.58);
  --line-soft:rgba(88,145,164,.24);
  --text:#c7e0eb;
  --paper:#f1f8fb;
  --muted:#7b99a6;
  --cyan:#0db8ff;
  --cyan-soft:#78d9ff;
  --green:#40eb4d;
  --orange:#ff8014;
  --purple:#ad3bff;
  --display:"Arial Narrow","Roboto Condensed","Segoe UI",sans-serif;
  --mono:Consolas,"Roboto Mono","Courier New",monospace;
  --body:"Segoe UI",Arial,sans-serif;
  --pad:clamp(22px,5vw,80px);
}
*{box-sizing:border-box}
html{background:var(--space);scroll-behavior:smooth}
body{margin:0;background:var(--space);color:var(--text);font-family:var(--body);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
::selection{background:var(--cyan);color:#00101a}

.qr-header{
  position:absolute;z-index:30;inset:0 0 auto;height:88px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 var(--pad);border-bottom:1px solid rgba(13,184,255,.34);
  background:linear-gradient(180deg,rgba(0,4,10,.92),rgba(0,4,10,.52));
  backdrop-filter:blur(9px)
}
.qr-header:after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:-2px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent 28%,transparent 72%,var(--purple));opacity:.48}
.qr-wordmark,.footer-wordmark{display:inline-grid;justify-self:start;font-family:var(--display);font-style:normal;line-height:.78;letter-spacing:.055em;text-transform:uppercase}
.qr-wordmark strong,.footer-wordmark strong{font-size:20px;font-weight:800;color:var(--paper)}
.qr-wordmark span,.footer-wordmark span{font:700 11px/1 var(--mono);letter-spacing:.28em;color:var(--cyan)}
.studio-link{display:flex;align-items:center;gap:11px;color:#8199a3;font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.studio-link span{color:var(--cyan);font-size:17px}
.studio-link:hover{color:var(--paper)}
.qr-header nav{justify-self:end;display:flex;gap:12px}
.qr-header nav a{position:relative;color:#68808b;font:700 10px/1 var(--mono);letter-spacing:.14em}
.qr-header nav a[aria-current=true]{color:var(--cyan)}
.qr-header nav a[aria-current=true]:after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

.qr-hero{
  position:relative;min-height:100svh;display:grid;
  grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr);
  align-items:center;gap:clamp(42px,6vw,105px);
  padding:140px var(--pad) 90px;overflow:hidden;
  background:#01050b url("../assets/qr/qr-mode-selection-background.jpg") center/cover no-repeat
}
.qr-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,3,8,.98) 0%,rgba(0,7,15,.92) 38%,rgba(0,7,14,.5) 72%,rgba(0,3,8,.72) 100%),linear-gradient(0deg,rgba(1,2,5,.98),transparent 34%,rgba(1,2,5,.36))}
.qr-hero:after{content:"";position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(13,184,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(13,184,255,.13) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,black,rgba(0,0,0,.65) 55%,transparent)}
.qr-hero-copy,.qr-hero-visual{position:relative;z-index:2}
.qr-hero-copy{container-type:inline-size;padding:clamp(24px,3vw,46px) clamp(20px,3.2vw,48px);border-left:1px solid rgba(13,184,255,.62);background:linear-gradient(100deg,rgba(2,12,22,.94),rgba(2,12,22,.52) 72%,transparent);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)}
.eyebrow{margin:0;color:var(--cyan-soft);font:700 10px/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.eyebrow i{display:inline-block;width:7px;height:7px;margin:0 11px 1px 0;background:var(--green);box-shadow:0 0 13px rgba(64,235,77,.9)}
.game-index{margin:24px 0 0;color:#55717d;font:700 9px/1 var(--mono);letter-spacing:.18em}
.qr-hero h1{margin:28px 0 0;color:var(--paper);font:700 clamp(70px,8.2vw,132px)/.78 var(--display);font-size:clamp(58px,19cqi,132px);letter-spacing:-.065em;text-transform:uppercase}
.qr-hero h1 span,.qr-hero h1 em{display:inline-block}
.qr-hero h1 em{color:var(--cyan);font-style:normal;transform:translateX(-.055em);text-shadow:0 0 34px rgba(13,184,255,.24)}
.qr-hero h2{margin:44px 0 14px;color:#e7f3f7;font:650 clamp(23px,2.35vw,35px)/1.1 var(--display);letter-spacing:-.02em}
.intro{max-width:620px;margin:0;color:#9cb2bc;font-size:clamp(16px,1.3vw,19px);line-height:1.72}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0;padding:0;list-style:none}
.tags li{position:relative;padding:9px 13px 9px 20px;border:1px solid var(--line-soft);background:rgba(4,22,34,.68);color:#a9c5d0;font:700 9px/1 var(--mono);letter-spacing:.11em}
.tags li:before{content:"";position:absolute;left:8px;top:50%;width:4px;height:4px;background:var(--cyan);transform:translateY(-50%);box-shadow:0 0 7px var(--cyan)}

.qr-hero-visual{min-width:0;padding:5vw 0}
.qr-hero-visual figure{position:relative;z-index:2;margin:0;overflow:hidden;border:1px solid rgba(13,184,255,.55);background:#01050a;box-shadow:0 34px 90px rgba(0,0,0,.66),0 0 80px rgba(13,184,255,.09);clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,22px 100%,0 calc(100% - 22px))}
.qr-hero-visual figure:before,.qr-hero-visual figure:after{content:"";position:absolute;z-index:4;width:44px;height:2px;background:var(--orange);box-shadow:0 0 8px rgba(255,128,20,.7)}
.qr-hero-visual figure:before{top:0;right:30px}.qr-hero-visual figure:after{bottom:0;left:22px}
.qr-hero-visual figure>div{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(13,184,255,.32);background:rgba(1,12,22,.92);color:#73b7cc;font:700 8px/1 var(--mono);letter-spacing:.16em}
.qr-hero-visual figure img{width:100%;height:auto;filter:saturate(.88) contrast(1.08)}
.orbit{position:absolute;border:1px solid rgba(13,184,255,.2);border-radius:50%;box-shadow:inset 0 0 40px rgba(13,184,255,.025)}
.orbit:before,.orbit:after{content:"";position:absolute;background:var(--cyan)}
.orbit:before{width:5px;height:5px;left:50%;top:-3px;box-shadow:0 0 9px var(--cyan)}
.orbit:after{width:1px;height:18px;left:50%;top:-9px}
.orbit-a{width:82%;aspect-ratio:1;right:0;top:0}.orbit-b{width:54%;aspect-ratio:1;right:14%;top:14%;border-color:rgba(173,59,255,.26)}
.orbit-b:before,.orbit-b:after{background:var(--purple)}

.qr-concept{position:relative;padding:clamp(100px,11vw,170px) var(--pad);overflow:hidden;background:#02060b url("../assets/qr/qr-skirmish-background.jpg") center/cover no-repeat}
.qr-concept:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(1,5,10,.98),rgba(2,13,22,.92) 48%,rgba(2,10,18,.78)),linear-gradient(0deg,#02060b,transparent 25%,transparent 75%,#02060b)}
.qr-concept:after{content:"MECHANIC // PHASE CONTROL";position:absolute;right:var(--pad);top:38px;color:rgba(13,184,255,.26);font:700 9px/1 var(--mono);letter-spacing:.18em}
.concept-head,.principles{position:relative;z-index:1}
.concept-head{display:grid;grid-template-columns:.55fr 1.15fr .9fr;gap:5vw;align-items:start}
.concept-head h2,.factions-copy h2{margin:0;color:var(--paper);font:700 clamp(50px,6.1vw,90px)/.92 var(--display);letter-spacing:-.045em;text-transform:uppercase}
.concept-head>p:last-child,.factions-copy>p:last-child{margin:4px 0 0;color:#8ea5af;font-size:16px;line-height:1.75}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:88px}
.principles article{position:relative;min-height:280px;padding:30px 30px 34px;border:1px solid var(--line-soft);background:linear-gradient(145deg,rgba(4,22,34,.92),rgba(2,10,18,.82));clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.principles article:before{content:"";position:absolute;left:0;top:0;width:42%;height:2px;background:var(--cyan);box-shadow:0 0 9px rgba(13,184,255,.45)}
.principles span,.faction-list>button>span{color:var(--orange);font:700 10px/1 var(--mono);letter-spacing:.14em}
.principles h3{margin:58px 0 15px;color:#d8e8ee;font:650 clamp(23px,2.1vw,32px)/1.08 var(--display);text-transform:uppercase}
.principles p{max-width:360px;margin:0;color:#7f98a3;font-size:14px;line-height:1.72}

.qr-factions-section{position:relative;display:grid;grid-template-columns:.72fr 1.28fr;gap:7vw;align-items:center;padding:clamp(100px,11vw,170px) var(--pad);overflow:hidden;background:radial-gradient(circle at 85% 45%,rgba(84,25,130,.24),transparent 34%),linear-gradient(125deg,#01050a,#04101b 54%,#07101c)}
.qr-factions-section:before{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(13,184,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(13,184,255,.12) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(90deg,transparent,black)}
.factions-copy,.faction-list{position:relative;z-index:1}
.factions-copy .eyebrow{margin-bottom:34px}.factions-copy>p:last-child{max-width:580px;margin-top:30px}
.faction-list{display:flex;gap:10px;min-width:0}
.faction-card{--faction:var(--cyan);appearance:none;position:relative;flex:1 1 0;min-width:0;min-height:350px;display:flex;flex-direction:column;justify-content:flex-end;padding:25px;border:1px solid rgba(93,148,167,.3);background:linear-gradient(180deg,rgba(4,15,25,.78),rgba(3,19,31,.96));color:inherit;text-align:left;cursor:pointer;overflow:hidden;clip-path:polygon(0 0,calc(100% - 17px) 0,100% 17px,100% 100%,0 100%);transition:flex .55s cubic-bezier(.2,.7,.2,1),opacity .4s ease,transform .4s ease,border-color .4s ease,background .4s ease}
.faction-card:nth-child(1){--faction:var(--orange)}.faction-card:nth-child(2){--faction:var(--cyan)}.faction-card:nth-child(3){--faction:var(--purple)}
.faction-card:before{content:"";position:absolute;inset:0 auto auto 0;width:45%;height:2px;background:var(--faction);box-shadow:0 0 11px color-mix(in srgb,var(--faction) 68%,transparent)}
.faction-card:after{content:"SELECT // DATA";position:absolute;top:18px;right:18px;color:#53717d;font:700 7px/1 var(--mono);letter-spacing:.12em}
.faction-card:hover,.faction-card:focus-visible{border-color:color-mix(in srgb,var(--faction) 68%,#fff 10%);outline:0;transform:translateY(-5px)}
.faction-card.is-active{flex:2.2;border-color:var(--faction);background:linear-gradient(145deg,rgba(5,29,43,.98),rgba(5,15,27,.98))}
.faction-list.has-active .faction-card:not(.is-active){flex:.66;opacity:.42}
.faction-list img{width:100px;height:100px;margin:auto;object-fit:contain;filter:drop-shadow(0 0 20px color-mix(in srgb,var(--faction) 28%,transparent));transition:transform .5s ease,filter .4s ease}
.faction-card.is-active img{transform:scale(1.08);filter:drop-shadow(0 0 28px color-mix(in srgb,var(--faction) 48%,transparent))}
.faction-list>button>span{color:var(--faction)}
.faction-list h3{margin:12px 0 0;color:#dcebf0;font:700 clamp(19px,2vw,27px)/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.faction-lore{max-width:440px;max-height:0;margin:0;color:#8fa9b4;font-size:14px;line-height:1.65;opacity:0;overflow:hidden;transform:translateY(14px);transition:max-height .55s cubic-bezier(.2,.7,.2,1),margin .45s ease,opacity .35s ease .08s,transform .45s ease}
.faction-card.is-active .faction-lore{max-height:160px;margin-top:22px;opacity:1;transform:none}

footer{min-height:142px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:35px;padding:28px var(--pad);border-top:1px solid rgba(13,184,255,.28);background:#010409}
.footer-wordmark{justify-self:start}
footer>div{display:flex;align-items:center;gap:24px;color:#627b86;font:700 9px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
footer a:hover,footer button:hover{color:var(--cyan)}
.studio-credit{color:#8ca4ae}
.privacy-settings-button{color:inherit;font:inherit;text-transform:inherit}

.qr-page .privacy-panel{border-color:rgba(13,184,255,.58);background:linear-gradient(145deg,#020812,#041522 72%,#07172a)}
.qr-page .privacy-kicker,.qr-page .privacy-on{color:var(--cyan)}
.qr-page .privacy-accept,.qr-page .privacy-save{border-color:var(--cyan);background:#061d2a;color:var(--paper)}
.qr-page .privacy-button:focus-visible{outline-color:var(--cyan)}

@media(min-width:1001px) and (max-width:1600px){
  .qr-hero h1{font-size:clamp(64px,6vw,96px)}
}
@media(max-width:1000px){
  .qr-hero{grid-template-columns:1fr;padding-top:130px}
  .qr-hero-copy{max-width:790px}
  .qr-hero h1{font-size:clamp(70px,10vw,104px)}
  .qr-hero-visual{padding:35px 4vw 20px}
  .concept-head{grid-template-columns:1fr;gap:28px}
  .qr-factions-section{grid-template-columns:1fr}
  .faction-list{margin-top:22px}
}
@media(max-width:680px){
  .qr-header{height:72px;grid-template-columns:1fr auto;padding:0 22px}
  .qr-header:after{left:22px;right:22px}
  .qr-wordmark strong{font-size:17px}.qr-wordmark span{font-size:9px}
  .studio-link{display:none}
  .qr-hero{min-height:auto;padding:112px 22px 68px;background-position:64% center}
  .qr-hero:before{background:linear-gradient(90deg,rgba(0,3,8,.98),rgba(0,7,15,.84)),linear-gradient(0deg,rgba(1,2,5,.98),transparent 38%)}
  .qr-hero-copy{padding:26px 10px 28px 15px;background:linear-gradient(90deg,rgba(2,12,22,.94),transparent);clip-path:none}
  .qr-hero h1{font-size:clamp(58px,17vw,80px);line-height:.82}
  .qr-hero h1 em{transform:translateX(-.045em)}
  .qr-hero h2{margin-top:36px}
  .qr-hero-visual{
    width:calc(100vw - 44px);
    max-width:calc(100vw - 44px);
    justify-self:start;
    padding:28px 0 10px
  }
  .qr-hero-visual figure{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,12px 100%,0 calc(100% - 12px))}
  .orbit{display:none}
  .concept-head h2,.factions-copy h2{font-size:clamp(45px,13.5vw,60px)}
  .principles{grid-template-columns:1fr;margin-top:55px}
  .principles article{min-height:0}
  .principles h3{margin-top:34px}
  .faction-list{flex-direction:column}
  .faction-card{flex:1 1 auto;min-height:220px}
  .faction-card.is-active{flex:1 1 auto;min-height:330px}
  .faction-list.has-active .faction-card:not(.is-active){flex:1 1 auto;opacity:.48}
  .faction-list img{width:82px;height:82px}
  footer{grid-template-columns:1fr}
  footer>div{align-items:flex-start;flex-direction:column;gap:11px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .faction-card,.faction-list img,.faction-lore{transition:none}
}