/* GFJ Modos: one real playable mode, told as a route through the server. */
.gfj-modes{display:grid;gap:clamp(1.25rem,3vw,2.25rem);color:#f8f7ff}
.gfj-modes *{box-sizing:border-box}
.modes-new-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);align-items:center;gap:clamp(1rem,4vw,4rem);min-height:520px;overflow:hidden;padding:clamp(2rem,5vw,4.5rem);border:1px solid #bc9cff5c;border-radius:36px;background:radial-gradient(circle at 81% 45%,#9e5be955,transparent 31%),radial-gradient(circle at 18% 100%,#328bc944,transparent 43%),linear-gradient(133deg,#221a45,#10152e 58%,#142c41);box-shadow:0 32px 85px #05061880,inset 0 1px #fff3}
.modes-new-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 46%,#ffffff08 47%,transparent 48%);background-size:34px 34px;mask-image:linear-gradient(90deg,transparent,#000)}
.modes-new-hero-copy{position:relative;z-index:2;min-width:0}
.modes-new-kicker,.modes-new-section-head>span{display:inline-flex;align-items:center;gap:.55rem;color:#c5adff!important;font-size:.73rem;font-weight:900;letter-spacing:.17em;line-height:1.4;text-transform:uppercase}
.modes-new-kicker i{width:.48rem;height:.48rem;flex:none;border-radius:50%;background:#67f7c7;box-shadow:0 0 0 5px #67f7c71b,0 0 13px #67f7c7}
.modes-new-hero h1{max-width:10ch;margin:1rem 0 1.15rem!important;color:#fff!important;font:850 clamp(3.7rem,7vw,6.7rem)/.94 Outfit,Inter,sans-serif!important;letter-spacing:-.075em!important;text-wrap:balance}
.modes-new-hero p{max-width:55ch;margin:0!important;color:#dedcf0!important;font-size:clamp(1rem,1.3vw,1.17rem)!important;line-height:1.67!important}
.modes-new-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.modes-new-primary,.modes-new-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:3.1rem;padding:.75rem 1.18rem;border-radius:14px;text-decoration:none!important;font-weight:850;font-size:.89rem;transition:transform .2s,box-shadow .2s,border-color .2s}
.modes-new-primary{background:linear-gradient(110deg,#f9d99d,#efa5d0 54%,#b89bff);box-shadow:0 10px 26px #8c6adb30;color:#17132c!important}
.modes-new-secondary{border:1px solid #c8b6f45c;background:#ffffff0d;color:#f4ebff!important}
.modes-new-primary:hover,.modes-new-secondary:hover{transform:translateY(-2px);box-shadow:0 15px 32px #7b4ee84c}
.modes-new-visual{position:relative;display:grid;place-items:center;width:min(100%,460px);aspect-ratio:1;margin:auto}
.modes-new-orbit{position:absolute;inset:5%;border:1px solid #d2b9ff38;border-radius:50%;box-shadow:0 0 0 30px #caa7ff0c,0 0 0 63px #caa7ff08,inset 0 0 66px #9760de2c;animation:modes-turn 30s linear infinite}
.modes-new-orbit::before,.modes-new-orbit::after{content:"";position:absolute;width:.8rem;height:.8rem;border-radius:50%;background:#c79eff;box-shadow:0 0 24px #bc86ff}
.modes-new-orbit::before{top:12%;left:12%}.modes-new-orbit::after{right:4%;bottom:24%;background:#86eaff;box-shadow:0 0 24px #86eaff}
.modes-new-portal{position:relative;display:grid;place-items:center;width:58%;aspect-ratio:1;border:1px solid #d6c1ff80;border-radius:30%;background:radial-gradient(circle,#8d60e96e,#2d225e 57%,#19183e);box-shadow:0 0 0 11px #b597ff18,0 24px 60px #0503179c,inset 0 1px #fff7;transform:rotate(-7deg)}
.modes-new-portal img{width:52%;height:52%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 10px 12px #06041b9e) drop-shadow(0 0 28px #79ebffb9);transform:rotate(7deg);animation:modes-float 5s ease-in-out infinite}
.modes-new-orbit-card{position:absolute;display:grid;place-items:center;width:21%;aspect-ratio:1;border:1px solid #e4d1ff55;border-radius:21px;background:linear-gradient(145deg,#392963,#1c2045);box-shadow:0 12px 32px #050514a6;transform:rotate(8deg)}
.modes-new-orbit-card img{width:62%;height:62%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 13px #caa4ff)}
.modes-new-orbit-card-a{top:10%;right:0}.modes-new-orbit-card-b{bottom:15%;left:0;transform:rotate(-9deg)}
.modes-new-visual-label{position:absolute;right:0;bottom:0;padding:.55rem .75rem;border:1px solid #83f0d369;border-radius:999px;background:#122f38e8;color:#b5fce5;font-size:.69rem;font-weight:900;letter-spacing:.1em;white-space:nowrap}
.modes-new-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.modes-new-facts span{display:flex;align-items:center;gap:.7rem;min-width:0;min-height:4.4rem;padding:.8rem 1.1rem;border:1px solid #b7a9e039;border-radius:18px;background:#191b38;color:#ece7ff;font-size:.84rem;font-weight:750}
.modes-new-facts img{width:2rem;height:2rem;flex:none;object-fit:contain;image-rendering:pixelated}
.modes-new-section{padding:clamp(2rem,5vw,4rem) 0 .5rem}
.modes-new-section-head{max-width:55rem;margin-bottom:1.5rem}
.modes-new-section-head h2{margin:.6rem 0 .7rem!important;color:#fff!important;font:800 clamp(2.35rem,4.8vw,4.4rem)/1.02 Outfit,Inter,sans-serif!important;letter-spacing:-.055em!important;text-wrap:balance}
.modes-new-section-head p{max-width:64ch;margin:0!important;color:#bebbd7!important;font-size:1.03rem!important;line-height:1.6!important}
.modes-new-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.modes-new-step{position:relative;display:flex;flex-direction:column;min-width:0;min-height:320px;padding:1.4rem;border:1px solid #b9a2ec45;border-radius:25px;background:radial-gradient(circle at 90% 10%,#8163d02c,transparent 48%),linear-gradient(145deg,#202044,#11162c);box-shadow:0 18px 42px #04051255}
.modes-new-step:nth-child(2){background:radial-gradient(circle at 90% 10%,#52bfe031,transparent 48%),linear-gradient(145deg,#1b3150,#11162c)}
.modes-new-step:nth-child(3){background:radial-gradient(circle at 90% 10%,#eca76f30,transparent 48%),linear-gradient(145deg,#392b43,#11162c)}
.modes-new-step-top{display:flex;align-items:start;justify-content:space-between;gap:.8rem}.modes-new-step-top span{color:#c1ade8;font-size:.73rem;font-weight:900;letter-spacing:.14em}.modes-new-step-top img{width:4.4rem;height:4.4rem;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 9px 18px #7c74ec70)}
.modes-new-step h3{margin:1.7rem 0 .45rem!important;color:#fff!important;font-size:1.56rem!important;letter-spacing:-.035em}.modes-new-step p{margin:0!important;color:#c8c6de!important;font-size:.91rem!important;line-height:1.57!important}.modes-new-step a{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;margin-top:auto;padding-top:1.5rem;color:#cfb9ff!important;font-size:.83rem;font-weight:850;text-decoration:none!important}.modes-new-step a:hover{color:#fff!important}
.modes-new-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.modes-new-system{display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto;align-items:center;gap:.85rem;min-width:0;min-height:8rem;padding:1.1rem;border:1px solid #aea1d338;border-radius:20px;background:#191b34;color:#fff;text-decoration:none!important;transition:background .2s,border-color .2s,transform .2s}
.modes-new-system:hover,.modes-new-system:focus-visible{transform:translateY(-3px);border-color:#c5a6ff88;background:#282249}
.modes-new-system>img{width:3.5rem;height:3.5rem;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 5px 14px #9a7aff70)}
.modes-new-system h3{margin:0 0 .2rem!important;color:#fff!important;font-size:1rem!important}.modes-new-system p{margin:0!important;color:#bdbbd5!important;font-size:.77rem!important;line-height:1.45!important}.modes-new-system>span{align-self:start;color:#c2aaf2}
.modes-new-note{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:clamp(1.5rem,4vw,2.5rem);border:1px solid #b9a4ec50;border-radius:25px;background:linear-gradient(120deg,#211d3f,#17182c)}
.modes-new-note h2{margin:.45rem 0!important;color:#fff!important;font-size:clamp(1.5rem,3vw,2.2rem)!important}.modes-new-note p{max-width:70ch;margin:0!important;color:#cbc7df!important;line-height:1.6!important}.modes-new-note img{width:5.2rem;height:5.2rem;flex:none;object-fit:contain;image-rendering:pixelated;opacity:.8}
.modes-new-final{display:flex;align-items:center;gap:1.2rem;margin-bottom:3rem;padding:1.6rem;border:1px solid #c9aaff55;border-radius:25px;background:linear-gradient(105deg,#463574,#232149)}
.modes-new-final>img{width:4.2rem;height:4.2rem;flex:none;object-fit:contain;image-rendering:pixelated}.modes-new-final>div{flex:1;min-width:0}.modes-new-final h2{margin:0 0 .3rem!important;color:#fff!important;font-size:1.35rem!important}.modes-new-final p{margin:0!important;color:#e2d9f2!important;line-height:1.45!important}
@keyframes modes-turn{to{transform:rotate(360deg)}}@keyframes modes-float{50%{transform:rotate(7deg) translateY(-10px)}}
@media(max-width:1049px){
  .modes-new-hero{grid-template-columns:1fr;min-height:0;gap:0;padding:clamp(1.35rem,5vw,2rem);border-radius:26px}
  .modes-new-hero h1{font-size:clamp(3.25rem,11vw,5rem)!important;max-width:10ch}
  .modes-new-hero p{font-size:.99rem!important}
  .modes-new-visual{grid-row:1;max-width:340px;max-height:280px;aspect-ratio:1.25;margin:0 auto 1rem}
  .modes-new-portal{width:45%}.modes-new-orbit{inset:12%}.modes-new-orbit-card{width:17%}.modes-new-visual-label{bottom:3%}
  .modes-new-actions{display:grid;grid-template-columns:1fr;gap:.55rem}.modes-new-primary,.modes-new-secondary{width:100%}
  .modes-new-facts{grid-template-columns:1fr;gap:.55rem}.modes-new-facts span{min-height:3.5rem}
  .modes-new-steps,.modes-new-grid{grid-template-columns:1fr}.modes-new-step{min-height:0;padding:1.2rem}.modes-new-step h3{margin:.8rem 0 .4rem!important}.modes-new-step a{margin-top:0}
  .modes-new-section{padding:2.4rem 0 0}.modes-new-section-head h2{font-size:clamp(2.25rem,9vw,3.3rem)!important}
  .modes-new-system{min-height:6.5rem}.modes-new-note img{display:none}.modes-new-final{display:grid;grid-template-columns:3rem 1fr;gap:.75rem;padding:1.2rem}.modes-new-final>img{width:3rem;height:3rem}.modes-new-final .modes-new-primary{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){.gfj-modes *, .gfj-modes *::before,.gfj-modes *::after{animation:none!important;transition:none!important}}