/* Gem Jam game page: /games/gemjam/ (en), /games/gemjam/es/, /games/gemjam/sv/.
   Loaded after /styles.css (reset). The HTML is generated by colopath/ArtSource/web/make_site_pages.py;
   this file and gemjam.js are edited here. Motion is calm and only about the game: no idle loops. */

@font-face{font-family:"Baloo 2";src:url("fonts/baloo2-latin.woff2") format("woff2");font-weight:400 800;font-display:swap}

:root{
  --gj-font:"Baloo 2",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
  --gj-950:#050b26;--gj-900:#08113a;--gj-850:#0b1747;--gj-800:#0f1f5c;--gj-key:#0e1b4d;--gj-tray:#13284a;
  --gj-royal:#2f5bff;--gj-sky:#46c7ff;--gj-gold-hi:#ffe08a;--gj-gold:#e7b94a;--gj-gold-lo:#9a6a1c;
  --gj-text:#eef2ff;--gj-text-2:#c6d1f7;--gj-text-3:#9fb0e6;
  --gj-yellow:#ffc928;--gj-purple:#8e5bff;--gj-pink:#ff5cb3;--gj-orange:#ff8a1e;--gj-teal:#12d6b4;
  --gj-red:#ff3b4e;--gj-emerald:#23c552;--gj-lime:#a8e62c;--gj-blue:#2f5bff;
  /* one content width and one left edge for everything, the nav included */
  --gj-content:1284px;--gj-pad:clamp(20px,5vw,56px);
  --gj-ease:cubic-bezier(.22,1,.36,1);
  --gj-gold-grad:linear-gradient(180deg,#fff3c4 0%,#ffe08a 28%,#e7b94a 62%,#b98326 100%);
  --gj-rail:linear-gradient(180deg,#fff1b8 0%,#ffe08a 22%,#e7b94a 58%,#9a6a1c 100%);
}

/* ===================== BASE ===================== */
html{background:var(--gj-950)}
body.gj{background:var(--gj-900);color:var(--gj-text);font-family:var(--gj-font);font-weight:500;font-size:18px;line-height:1.55;overflow-x:clip}
.gj ::selection{background:var(--gj-yellow);color:var(--gj-key)}
.gj ul,.gj ol{list-style:none}
.gj-wrap{max-width:calc(var(--gj-content) + var(--gj-pad) * 2);margin:0 auto;padding-inline:var(--gj-pad)}
.gj a:focus-visible,.gj button:focus-visible,.gj summary:focus-visible,.gj [tabindex]:focus-visible,.gj input:focus-visible{outline:3px solid var(--gj-yellow);outline-offset:3px;border-radius:10px}
.gj-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gj-yellow);color:var(--gj-key);font-weight:800;padding:10px 16px;border-radius:12px;transition:top .2s}
.gj-skip:focus{top:12px}
.gj-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* headings: white with a navy keyline and a soft drop, like the game's captions */
.gj-h2{font-weight:800;font-size:clamp(36px,5.2vw,64px);line-height:1.02;letter-spacing:-.012em;color:#fff;text-wrap:balance;
  text-shadow:0 3px 0 var(--gj-key),0 5px 0 rgba(14,27,77,.55),0 14px 30px rgba(0,0,0,.35)}
.gj-h2 .gold{background:var(--gj-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 3px 0 var(--gj-key)) drop-shadow(0 12px 22px rgba(0,0,0,.3))}
.gj-lead{font-size:clamp(18px,1.5vw,20px);line-height:1.55;color:var(--gj-text-2);max-width:46ch;margin-top:clamp(14px,2vh,20px);text-wrap:pretty}
.gj-sec{position:relative;padding:clamp(64px,9vh,104px) 0;isolation:isolate}
.gj-head{max-width:760px}
/* grid children may shrink below their content, so a long row (the mine areas) can never widen the page */
.gj-hero-grid > *,.gj-play-grid > *,.gj-vs-grid > *,.gj-mine-grid > *,.gj-faq-grid > *{min-width:0}

/* gold rail with crystal studs, the board's frame used as a section divider */
.gj-rail{position:relative;height:14px;background:var(--gj-rail);box-shadow:0 -3px 0 var(--gj-key),0 3px 0 var(--gj-key),0 8px 18px rgba(0,0,0,.35);z-index:3}
.gj-rail::before,.gj-rail::after{content:"";position:absolute;top:50%;width:14px;height:14px;transform:translate(-50%,-50%) rotate(45deg);
  background:linear-gradient(135deg,#fff 0%,#ffe08a 40%,#b98326 100%);border:2px solid var(--gj-key);left:calc(50% - 74px)}
.gj-rail::after{left:calc(50% + 74px)}
.gj-rail i{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%) rotate(45deg);border-radius:6px;
  background:linear-gradient(135deg,#d9fffb 0%,#5ff0dc 30%,#12d6b4 60%,#0a8f7a 100%);border:3px solid var(--gj-gold);box-shadow:0 0 0 3px var(--gj-key),0 0 22px rgba(18,214,180,.65)}
.gj-rail i::after{content:"";position:absolute;left:5px;top:5px;width:9px;height:9px;border-radius:2px;background:rgba(255,255,255,.85)}

/* candy button (the nav's Play free, Try it yourself) */
.gj-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:800 18px/1 var(--gj-font);color:var(--gj-key);
  padding:15px 26px 17px;border-radius:999px;background:linear-gradient(180deg,#5ef08a 0%,#22c055 55%,#14a043 100%);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.16),0 0 0 3px var(--gj-key),0 6px 0 3px #0a5a26,0 14px 26px rgba(0,0,0,.4);
  text-shadow:0 1px 0 rgba(255,255,255,.35);transition:transform .25s var(--gj-ease),box-shadow .25s var(--gj-ease);white-space:nowrap;cursor:pointer}
.gj-btn::before{content:"";position:absolute;left:14px;right:14px;top:4px;height:40%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.06));pointer-events:none}
.gj-btn:hover{transform:translateY(-2px)}
.gj-btn:active{transform:translateY(2px);box-shadow:inset 0 -4px 0 rgba(0,0,0,.16),0 0 0 3px var(--gj-key),0 2px 0 3px #0a5a26,0 6px 14px rgba(0,0,0,.4)}

/* ---- where to play: black store badges of one height. The browser version leads; Google Play and the App Store
   travel as one pair that never splits (on Android, html.is-android, the pair leads). On iPhone and iPad
   (html.is-ios) the App Store badge leads alone: Google Play is hidden there. Until the App Store version is
   out, Apple's badge is greyed and unlinked with a short "Coming soon" right under it. */
.gj-stores{--badge-h:56px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 14px}
.gj-stores .gj-web{order:1}.gj-stores-pair{order:2}
.is-android .gj-stores-pair{order:1}.is-android .gj-stores .gj-web{order:2}
.is-ios .gj-stores-pair{order:1}.is-ios .gj-stores .gj-web{order:2}.is-ios .gj-play{display:none}
.gj-stores-pair{display:inline-flex;align-items:flex-start;gap:inherit}
.gj-play,.gj-apple-badge,a.gj-apple{display:inline-block;line-height:0;border-radius:10px}
.gj-play img,.gj-apple img{height:var(--badge-h);width:auto}
.gj-play,a.gj-apple{transition:transform .25s var(--gj-ease)}
.gj-play:hover,.gj-web:hover,a.gj-apple:hover{transform:translateY(-2px)}
.gj-apple-soon{display:inline-flex;flex-direction:column;align-items:center;gap:5px}
.gj-apple-badge{opacity:.42;filter:grayscale(1);cursor:default}
/* a dark outline that hugs the letters keeps the caption readable where the cave's light shaft falls (no shape behind it) */
.gj-apple-cap{font-weight:700;font-size:13px;line-height:1.2;color:#e6ecff;white-space:nowrap;
  text-shadow:0 0 1px #050b26,0 0 2px #050b26,0 1px 3px rgba(5,11,38,.95),0 0 10px rgba(5,11,38,.85)}
.gj-web{display:inline-flex;align-items:center;gap:11px;height:var(--badge-h);padding:0 18px 0 13px;border-radius:10px;background:#000;color:#fff;
  box-shadow:inset 0 0 0 1.5px #a6a6a6;transition:transform .25s var(--gj-ease),box-shadow .25s var(--gj-ease)}
.gj-web:hover{box-shadow:inset 0 0 0 1.5px #fff}
.gj-web-ico{width:28px;height:28px;flex:none}
.gj-web-txt{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.gj-web-txt b{font-weight:800;font-size:17px;white-space:nowrap}
.gj-web-txt span{font-weight:600;font-size:13px;color:#cfd8f6;white-space:nowrap}

/* the trailer: a quiet text link with its play icon */
.gj-trailer-btn{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:4px 0;font:700 16px/1.2 var(--gj-font);color:var(--gj-text-2);
  text-decoration:underline;text-decoration-color:rgba(198,209,247,.45);text-decoration-thickness:1.5px;text-underline-offset:5px;transition:color .2s,text-decoration-color .2s}
.gj-trailer-btn:hover{color:#fff;text-decoration-color:#fff}
.gj-play-ico{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:2px solid currentColor}
.gj-play-ico::after{content:"";position:absolute;left:9px;top:6px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent currentColor}
.gj-trailer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(3,7,26,.94);overflow:hidden}
.gj-trailer[open]{display:flex;align-items:center;justify-content:center}
.gj-trailer:focus,.gj-lightbox:focus{outline:none}
.gj-trailer::backdrop{background:rgba(3,7,26,.6)}
.gj-trailer-box{width:min(92vw,calc(86vh * 16 / 9),1280px);aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 0 0 3px rgba(255,224,138,.6),0 30px 80px rgba(0,0,0,.6)}
.gj-trailer-box video{display:block;width:100%;height:100%}
.gj-trailer-close{position:absolute;top:18px;right:18px}


/* ===================== NAV =====================
   The bar's own 18px inner padding sits outside the shared edge, so its content lines up with the page. */
.gj-nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:14px calc(var(--gj-pad) - 18px);transition:padding .4s var(--gj-ease)}
.gj-nav-bar{display:flex;align-items:center;gap:20px;max-width:calc(var(--gj-content) + 36px);margin:0 auto;padding:8px 18px;border-radius:22px;
  transition:background .4s var(--gj-ease),box-shadow .4s var(--gj-ease),backdrop-filter .4s}
.gj-nav.is-scrolled{padding-top:10px}
.gj-nav.is-scrolled .gj-nav-bar,.gj-nav.is-open .gj-nav-bar{background:rgba(8,17,58,.86);backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 0 0 2px rgba(231,185,74,.38),0 14px 40px rgba(0,0,0,.4)}
.gj-brand{display:flex;align-items:center;gap:14px;flex:none}
.gj-ll{display:inline-flex;line-height:0;opacity:.92;transition:opacity .2s}
.gj-ll:hover{opacity:1}
.gj-ll img{height:19px;width:auto}
.gj-crumb{font-weight:700;font-size:16px;color:var(--gj-text-2);padding-left:14px;border-left:2px solid rgba(255,255,255,.22);transition:color .2s}
.gj-crumb:hover{color:#fff}
.gj-mark{display:inline-flex;line-height:0;margin-left:4px}
.gj-nav:not(.is-scrolled) .gj-mark{display:none}
.gj-mark img{height:46px;width:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.gj-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.gj-links a{position:relative;font-weight:700;font-size:16px;color:#fff;padding:8px 12px;transition:color .2s;white-space:nowrap}
.gj-links a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;border-radius:2px;background:var(--gj-rail);transform:scaleX(0);transition:transform .35s var(--gj-ease)}
.gj-links a:hover{color:var(--gj-gold-hi)}
.gj-links a.is-active{color:var(--gj-gold-hi)}
.gj-links a.is-active::after{transform:none}
/* language: a small text button with a menu of the three names */
.gj-lang{position:relative;flex:none}
.gj-lang summary{list-style:none;display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;font-weight:700;font-size:16px;color:#fff;cursor:pointer;transition:background .2s;white-space:nowrap}
.gj-lang summary::-webkit-details-marker{display:none}
.gj-lang summary:hover,.gj-lang[open] summary{background:rgba(255,255,255,.1)}
.gj-globe{width:18px;height:18px;flex:none;color:var(--gj-text-2)}
.gj-lang-list{position:absolute;right:0;top:calc(100% + 10px);z-index:5;display:grid;gap:2px;min-width:170px;padding:8px;border-radius:16px;
  background:#0b1747;box-shadow:0 0 0 2px rgba(231,185,74,.38),0 18px 40px rgba(0,0,0,.45)}
.gj-lang-list a{display:block;padding:10px 14px;border-radius:10px;font-weight:700;font-size:16px;color:var(--gj-text-2);transition:background .2s,color .2s}
.gj-lang-list a:hover{background:rgba(255,255,255,.08);color:#fff}
.gj-lang-list a[aria-current]{color:#fff;background:rgba(255,224,138,.14)}
/* language as plain links (mobile menu, footer) */
.gj-langs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px}
.gj-langs a{font-weight:600;font-size:15px;color:var(--gj-text-3);text-underline-offset:5px;transition:color .2s}
.gj-langs a:hover{color:#fff}
.gj-langs a[aria-current]{color:#fff;text-decoration:underline;text-decoration-color:var(--gj-gold);text-decoration-thickness:2px}
.gj-nav-cta{padding:11px 18px 13px;font-size:16px}
.gj-burger{display:none;width:44px;height:44px;border-radius:14px;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:rgba(255,255,255,.1);margin-left:auto}
.gj-burger span{display:block;width:20px;height:2.5px;border-radius:2px;background:#fff;transition:transform .35s var(--gj-ease),opacity .2s}
.gj-nav.is-open .gj-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.gj-nav.is-open .gj-burger span:nth-child(2){opacity:0}
.gj-nav.is-open .gj-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.gj-menu{display:none}

/* ===================== HERO ===================== */
.gj-hero{position:relative;min-height:max(640px,100svh);display:flex;align-items:center;overflow:hidden;isolation:isolate;padding:100px 0 52px}
.gj-hero-bg{position:absolute;inset:-6% -2% 0;z-index:-4}
.gj-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.gj-hero::before{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(80% 90% at 18% 46%,rgba(5,11,38,.86) 0%,rgba(5,11,38,.55) 46%,rgba(5,11,38,0) 76%),
    linear-gradient(180deg,rgba(5,11,38,.55) 0%,rgba(5,11,38,0) 22%,rgba(5,11,38,0) 62%,var(--gj-900) 100%)}
.gj-rays{position:absolute;left:50%;top:-18%;width:150vmax;height:150vmax;transform:translateX(-50%);z-index:-2;pointer-events:none;opacity:.45;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 180deg at 50% 0%,rgba(150,215,255,.0) 0deg 7deg,rgba(150,215,255,.16) 9deg 12deg,rgba(150,215,255,0) 14deg 22deg);
  -webkit-mask:radial-gradient(60% 55% at 50% 0%,#000 0%,transparent 70%);mask:radial-gradient(60% 55% at 50% 0%,#000 0%,transparent 70%)}

.gj-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px;width:100%}
.gj-hero-copy{position:relative;z-index:2}
.gj-h1{margin:0;line-height:0}
/* sized by width and by height, so the whole first column fits a 1366 x 768 screen */
.gj-wordmark{display:block;width:clamp(200px,min(21vw,36vh),300px);height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.gj-h1-sub{display:block;margin-top:10px;font-weight:800;font-size:clamp(22px,2.2vw,32px);line-height:1.05;letter-spacing:.005em;
  background:var(--gj-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 var(--gj-key)) drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.gj-pitch{margin:14px 0 22px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:#e6ecff;max-width:49ch;text-shadow:0 2px 12px rgba(5,11,38,.6);text-wrap:pretty}

/* the phone with Pip and Ember standing clear of it on either side */
.gj-stage{--phone-w:clamp(220px,min(25vw,44vh),400px);position:relative;isolation:isolate;display:flex;align-items:flex-end;justify-content:center;gap:0}
/* a dark pool behind the stage, so the phone and the friends stand in their own light, not on the cave's crystals */
.gj-stage::before{content:"";position:absolute;left:50%;top:56%;z-index:-1;width:calc(var(--phone-w) * 4.2);height:calc(var(--phone-w) * 3.3);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(5,11,38,.6) 0%,rgba(5,11,38,.45) 38%,rgba(5,11,38,.2) 68%,rgba(5,11,38,0) 100%)}
/* one soft contact shadow under the friends and the phone */
.gj-stage::after{content:"";position:absolute;left:50%;bottom:calc(var(--phone-w) * -.09);z-index:0;width:calc(var(--phone-w) * 2.5);height:calc(var(--phone-w) * .24);transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,2,12,.9) 0%,rgba(0,2,12,.6) 45%,rgba(0,2,12,0) 100%)}
.gj-phone-wrap{position:relative;z-index:3;flex:none}
.gj-phone{position:relative;width:var(--phone-w);aspect-ratio:886/1612;border-radius:38px;padding:11px;
  background:linear-gradient(145deg,#2a3772 0%,#111a46 40%,#060b26 100%);
  box-shadow:0 0 0 2px rgba(255,224,138,.55),0 0 0 6px #0b1440,0 30px 60px rgba(0,0,0,.55),0 0 80px rgba(70,199,255,.25)}
.gj-phone::before{content:"";position:absolute;left:50%;top:18px;width:30%;height:12px;transform:translateX(-50%);border-radius:999px;background:#03061a;z-index:2}
.gj-phone-screen{position:relative;width:100%;height:100%;border-radius:28px;overflow:hidden;background:#0b1640}
.gj-phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gj-vid-toggle{position:absolute;right:12px;bottom:12px;z-index:3;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(5,11,38,.62);box-shadow:0 0 0 1.5px rgba(255,255,255,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s}
.gj-vid-toggle:hover{background:rgba(5,11,38,.85)}
.gj-vid-toggle[hidden]{display:none}
.gj-vid-toggle svg{width:18px;height:18px}
.gj-vid-toggle .i-play,.gj-vid-toggle.is-paused .i-pause{display:none}
.gj-vid-toggle.is-paused .i-play{display:block}
.gj-phone-screen::after{content:"";position:absolute;inset:0;border-radius:28px;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.gj-char{position:relative;z-index:4;flex:none;pointer-events:none}
.gj-char img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.gj-char.pip{width:calc(var(--phone-w) * .6);margin-right:calc(var(--phone-w) * -.12)}
.gj-char.ember{width:calc(var(--phone-w) * .5);margin-left:calc(var(--phone-w) * -.1)}

/* slanted section edges: the colorful sections cut into the one before them */
.gj-slant{margin-top:calc(var(--slant) * -1);padding-top:calc(clamp(64px,9vh,104px) + var(--slant));--slant:clamp(28px,3.6vw,56px);
  clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%)}
.gj-slant.rev{clip-path:polygon(0 0,100% var(--slant),100% 100%,0 100%)}

/* ===================== HOW TO PLAY ===================== */
/* one navy for every dark section, one cream for the light ones; the Versus colors are the single accent */
.gj-play-sec,.gj-friends,.gj-mine,.gj-shots{background:var(--gj-900)}
.gj-play-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.gj-steps{margin-top:clamp(28px,4vh,40px);display:grid;gap:14px}
.gj-step{position:relative;display:grid;grid-template-columns:76px 1fr;gap:18px;align-items:center;padding:18px 22px 20px 18px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1.5px solid rgba(255,255,255,.1)}
.gj-step-ico{position:relative;display:block;width:76px;height:56px;--cell:26px}
.gj-step-ico .jl{position:absolute;top:0;width:56px;height:56px;background:center/contain no-repeat}
.gj-step-ico .jl.y{background-image:url(img/demo/block-y1.webp)}.gj-step-ico .jl.p{background-image:url(img/demo/block-p1.webp)}
.gj-step-ico.slide .jl:nth-child(1){left:-5px}.gj-step-ico.slide .jl:nth-child(2){left:24px}
.gj-step-ico.gate .jl{left:-1px}
.gj-step-ico.gate b{position:absolute;left:46px;top:9px;width:12px;height:38px;border-radius:6px;background:linear-gradient(180deg,#d9c4ff,var(--gj-purple) 55%,#4d2aa8);box-shadow:0 0 0 2px var(--gj-key),0 0 16px rgba(142,91,255,.8)}
.gj-step-ico.stars{display:flex;align-items:flex-end;justify-content:center;gap:0}
/* the game's own stars (star_spin's front frame), the side ones leaning in like the arc on the win screen */
.gj-step-ico.stars i{width:26px;height:26px;background:url(img/demo/star-96.webp) center/contain no-repeat}
.gj-step-ico.stars i:nth-child(1){transform:rotate(8deg)}.gj-step-ico.stars i:nth-child(3){transform:rotate(-8deg)}
.gj-step-ico.stars i:nth-child(2){width:35px;height:35px;margin-bottom:7px}
.gj-step h3{font-weight:800;font-size:22px;line-height:1.2;color:#fff}
.gj-step p{color:var(--gj-text-2);font-size:17px;line-height:1.5}

.gj-demo-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;align-self:start}
.gj-demo-ui [hidden]{display:none!important}
.gj-demo-ui{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:96px;text-align:center}
.gj-demo-restart{font:800 17px/1.2 var(--gj-font);color:var(--gj-gold-hi);padding:8px 4px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.gj-demo-restart:hover{color:#fff}
.gj-demo-hint{min-height:1.5em;font-weight:700;font-size:16px;color:var(--gj-text-2);max-width:34ch}
.gj-demo-win{display:flex;flex-direction:column;align-items:center;gap:12px}
.gj-demo-win-h{font-weight:800;font-size:18px;color:#fff}
/* the win panel's badges: 44 px, one row where the column is wide enough, two rows otherwise (the pair never splits) */
.gj-demo-win .gj-stores{--badge-h:44px;justify-content:center;gap:10px}
.gj-demo-win .gj-web{gap:9px;padding:0 13px 0 10px}
.gj-demo-win .gj-web-ico{width:22px;height:22px}
.gj-demo-win .gj-web-txt b{font-size:14.5px}
.gj-demo-win .gj-web-txt span{font-size:11.5px}
/* while the board is played it owns every touch that starts on it: no page pan, no pointercancel mid-drag (iOS) */
.gj-demo.is-playing .gj-demo-tray,.gj-demo.is-playing .gj-block,.gj-demo.is-playing .gj-block *{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.gj-demo.is-playing .gj-block{cursor:grab;transition:filter .2s}
.gj-demo.is-playing .gj-block:hover{filter:brightness(1.12) saturate(1.05)}
.gj-demo.is-playing .gj-block:active{cursor:grabbing}
.gj-demo.is-playing .gj-block:focus-visible{outline:3px solid #fff;outline-offset:3px}
.gj-demo.is-playing .gj-done{pointer-events:none}
/* before play a tap on the board starts it, as the button does */
.gj-demo:not(.is-playing) .gj-demo-tray{cursor:pointer}

/* the frame: an outer polished-gold tube (bright top left, dark bottom right, a highlight band along it), an inner
   recessed ledge the gates sit in, and the game's diamond rivet in each corner (style lock: walls and rails) */
.gj-demo{--cell:clamp(46px,4.6vw,62px);--gap:3px;--rail:calc(var(--cell)*.5);position:relative;padding:var(--rail);border-radius:calc(var(--rail)*.95);
  background:linear-gradient(135deg,#fff7d6 0%,#ffe08a 16%,#f2c75e 34%,#e7b94a 52%,#c28c2e 74%,#8f6118 100%);
  box-shadow:inset 0 0 0 calc(var(--rail)*.06) rgba(255,251,230,.75),inset 0 0 0 calc(var(--rail)*.1) rgba(126,84,18,.35),
    0 0 0 3px #4a300a,0 calc(var(--rail)*.28) 0 3px #2f1e05,0 30px 60px rgba(0,0,0,.5)}
.gj-demo::before{content:"";position:absolute;inset:calc(var(--rail)*.12);border-radius:calc(var(--rail)*.83);border:calc(var(--rail)*.15) solid transparent;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,246,206,.55) 28%,rgba(255,240,190,.06) 56%,rgba(80,50,8,.28) 100%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0)}
.gj-demo::after{content:"";position:absolute;inset:calc(var(--rail)*.62);border-radius:calc(var(--cell)*.14 + var(--rail)*.38);pointer-events:none;
  background:linear-gradient(135deg,#d6a03c 0%,#b07a22 45%,#7a5012 100%);
  box-shadow:0 0 0 1.5px rgba(255,243,200,.85),inset 0 calc(var(--rail)*.06) calc(var(--rail)*.12) rgba(60,36,4,.5)}
.gj-rivet{position:absolute;z-index:3;width:calc(var(--rail)*.82);height:calc(var(--rail)*.82);background:url(img/demo/rivet-96.webp) center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(40,24,4,.55))}
.gj-rivet.tl{left:calc(var(--rail)*.09);top:calc(var(--rail)*.09)}.gj-rivet.tr{right:calc(var(--rail)*.09);top:calc(var(--rail)*.09)}
.gj-rivet.bl{left:calc(var(--rail)*.09);bottom:calc(var(--rail)*.09)}.gj-rivet.br{right:calc(var(--rail)*.09);bottom:calc(var(--rail)*.09)}
/* the tray: frosted midnight glass under a grid of slightly inset tiles; blocks that leave vanish into its edge */
.gj-demo-tray{position:relative;z-index:1;width:calc(var(--cell)*5 + var(--gap)*6);height:calc(var(--cell)*5 + var(--gap)*6);border-radius:calc(var(--cell)*.14);overflow:hidden;
  background:linear-gradient(170deg,#0e2350 0%,#0a1a3d 100%);box-shadow:0 0 0 2px #2a1b05,inset 0 calc(var(--cell)*.06) calc(var(--cell)*.22) rgba(0,0,0,.5)}
.gj-demo-cellbg{position:absolute;width:var(--cell);height:var(--cell);border-radius:calc(var(--cell)*.07);
  background:linear-gradient(160deg,#25508f 0%,#1e447f 50%,#1a3b70 100%);box-shadow:inset 1px 1px 0 rgba(160,200,255,.18),inset -1px -1px 0 rgba(0,0,0,.3)}
/* the gates are the game's crystal inserts set in the rail: an octagon-cut gem with a light table face, darker facets,
   light streaks and white double chevrons pointing out of the board (part of the puzzle, not decoration) */
.gj-gate{position:absolute;z-index:2;--k:calc(var(--rail)*.13);border-radius:calc(var(--rail)*.1);background:#3a2507;box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 0 0 1px rgba(255,236,170,.55);
  filter:drop-shadow(0 0 calc(var(--rail)*.22) color-mix(in srgb,var(--c) 70%,transparent)) drop-shadow(0 1px 0 rgba(40,24,4,.55))}
.gj-gem,.gj-gem::before{clip-path:polygon(var(--k) 0,calc(100% - var(--k)) 0,100% var(--k),100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,var(--k) 100%,0 calc(100% - var(--k)),0 var(--k))}
.gj-gem{position:absolute;inset:calc(var(--rail)*.05);
  background:linear-gradient(var(--fa,180deg),color-mix(in srgb,var(--c) 30%,#fff) 0%,color-mix(in srgb,var(--c) 78%,#fff) 20%,var(--c) 50%,color-mix(in srgb,var(--c) 70%,#000) 80%,color-mix(in srgb,var(--c) 50%,#000) 100%)}
.gj-gem::before{content:"";position:absolute;inset:calc(var(--rail)*.09);--k:calc(var(--rail)*.07);
  background:repeating-linear-gradient(118deg,rgba(255,255,255,0) 0 14%,rgba(255,255,255,.26) 17% 21%,rgba(255,255,255,0) 24% 40%),
    linear-gradient(var(--fa,180deg),color-mix(in srgb,var(--c) 55%,#fff),color-mix(in srgb,var(--c) 80%,#fff) 45%,color-mix(in srgb,var(--c) 92%,#000));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.gj-chev{position:absolute;left:50%;top:50%;width:calc(var(--rail)*.6);height:calc(var(--rail)*.6);transform:translate(-50%,-50%) rotate(var(--rot,0deg));overflow:visible}
.gj-chev path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.gj-chev .o{stroke:rgba(14,27,77,.75);stroke-width:7}
.gj-chev .w{stroke:#fff;stroke-width:3.6}
/* blocks: the game's own 3D jelly, rendered from Unity (Assets/Editor/WebBlockRender.cs) with its contact shadow; the
   picture has half a cell of room around the cells, for the shadow and the top that overhangs them a little */
.gj-block{position:absolute;z-index:2;will-change:transform}
.gj-jelly{position:absolute;pointer-events:none;background:center/100% 100% no-repeat}
.gj-block.y .gj-jelly{background-image:url(img/demo/block-y.webp)}.gj-block.b .gj-jelly{background-image:url(img/demo/block-b.webp)}
.gj-block.o .gj-jelly{background-image:url(img/demo/block-o.webp)}.gj-block.k .gj-jelly{background-image:url(img/demo/block-k.webp)}
.gj-block.p .gj-jelly{background-image:url(img/demo/block-p.webp)}.gj-block.g .gj-jelly{background-image:url(img/demo/block-g.webp)}
.gj-burst{position:absolute;z-index:4;width:0;height:0;pointer-events:none}
.gj-burst i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:3px;transform:rotate(45deg);background:var(--c);box-shadow:0 0 8px var(--c)}
.gj-touch{position:absolute;z-index:200;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.35);border:3px solid #fff;box-shadow:0 0 20px rgba(255,255,255,.7);opacity:0;pointer-events:none}
.gj-done{--m:calc(var(--cell)*1.6);position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0}
/* "Completed!" wears the game's own stars (UIGameSuccess): an arc of empty slots, the middle one biggest and highest,
   that the 3D gold stars (star_spin, 12 frames in a 4 x 3 sheet) fly into. The art loads once the board is near. */
.gj-done-stars{position:relative;width:calc(var(--m)*2.75);height:calc(var(--m)*1.1);margin-bottom:calc(var(--m)*-.05)}
.gj-win-star{position:absolute;left:50%;top:0;width:var(--m);height:var(--m);margin-left:calc(var(--m)*-.5)}
.gj-win-star.l,.gj-win-star.r{--s:calc(var(--m)*.77);width:var(--s);height:var(--s);margin-left:calc(var(--s)*-.5);top:calc(var(--m)*.325)}
.gj-win-star.l{left:calc(50% - var(--m)*.95)}
.gj-win-star.r{left:calc(50% + var(--m)*.95)}
.gj-win-slot,.gj-win-spin{position:absolute;inset:0;background:center/contain no-repeat}
.gj-win-slot{inset:5%}
.gj-win-spin{background-size:400% 300%;background-position:0 0;opacity:0;filter:drop-shadow(0 6px 10px rgba(5,11,38,.45))}
.gj-demo.has-stars .gj-win-slot{background-image:url(img/demo/star-slot-200.webp)}
.gj-demo.has-stars .gj-win-spin{background-image:url(img/demo/star-spin-220.webp)}
/* the slam (UIGameSuccess.StarLanded): a gold flash with a white-hot core, light streaks, a ring and sparkles */
.gj-win-fx{position:absolute;left:50%;top:50%;opacity:0;pointer-events:none}
.gj-win-fx.glow{width:160%;height:160%;margin:-80% 0 0 -80%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,235,153,.95),rgba(255,235,153,.4) 45%,rgba(255,235,153,0))}
.gj-win-fx.core{width:90%;height:90%;margin:-45% 0 0 -45%;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,255,255,.6) 40%,rgba(255,255,255,0))}
.gj-win-fx.flash{width:180%;height:180%;margin:-90% 0 0 -90%;background:center/contain no-repeat}
.gj-win-fx.ring{width:160%;height:160%;margin:-80% 0 0 -80%;border-radius:50%;border:calc(var(--m)*.045) solid rgba(255,230,140,.95);box-shadow:0 0 12px rgba(255,214,102,.8),inset 0 0 12px rgba(255,214,102,.8)}
.gj-win-fx.spark{width:34%;height:34%;margin:-17% 0 0 -17%;background:center/contain no-repeat}
.gj-demo.has-stars .gj-win-fx.flash{background-image:url(img/demo/fx-flash-192.webp)}
.gj-demo.has-stars .gj-win-fx.spark{background-image:url(img/demo/fx-sparkle-96.webp)}
/* the word sits on the game's emerald rail (hdr9_emerald, a 3-slice: gold caps and a stretched crystal window), sized
   to the stars as in the game, in white with its dark green outline and shadow; a shine sweeps the crystal. The game's
   Baloo2UI draws its letters 1.135 times as large as Baloo 2 at the same size, so the size here is scaled up to match. */
.gj-done-label{--rh:calc(var(--m)*.72);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:calc(var(--m)*3.17);height:var(--rh);border:0 solid transparent;border-width:0 calc(var(--rh)*.47);
  font-weight:800;font-size:calc(var(--m)*.402);line-height:1;color:#fff;--o:#042c18;--d:.049em;
  text-shadow:var(--d) 0 var(--o),calc(var(--d)*-1) 0 var(--o),0 var(--d) var(--o),0 calc(var(--d)*-1) var(--o),var(--d) var(--d) var(--o),
    calc(var(--d)*-1) var(--d) var(--o),var(--d) calc(var(--d)*-1) var(--o),calc(var(--d)*-1) calc(var(--d)*-1) var(--o),.018em .11em rgba(6,55,26,.55)}
.gj-demo.has-stars .gj-done-label{border-image:url(img/demo/rail-emerald-160.webp) 0 75 fill stretch}
.gj-done-text{position:relative;z-index:1;white-space:nowrap}
.gj-done-text i{display:inline-block;font-style:normal;white-space:pre}
.gj-rail-window{position:absolute;left:2px;right:2px;top:15%;bottom:15%;overflow:hidden;border-radius:calc(var(--rh)*.06)}
.gj-rail-shine{position:absolute;left:0;top:-35%;width:calc(var(--m)*.34);height:170%;margin-left:calc(var(--m)*-.17);opacity:0;
  transform:rotate(-24deg);background:center/100% 100% no-repeat}
.gj-demo.has-stars .gj-rail-shine{background-image:url(img/demo/fx-shine-64.webp)}

/* ===================== CHARACTERS AND THE INTRO STORY ===================== */
.gj-cast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(120px,15vh,150px)}
/* deep card colors so the white and gold text passes AA */
.gj-card{position:relative;border-radius:30px;padding:clamp(150px,13vw,186px) 26px 28px;text-align:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 80%,#fff) 0%,var(--c) 30%,color-mix(in srgb,var(--c) 62%,#0b1747) 100%);
  box-shadow:0 0 0 4px var(--gj-gold),0 0 0 7px var(--gj-key),0 26px 50px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.4)}
.gj-card-img{position:absolute;left:50%;bottom:calc(100% - clamp(150px,13vw,186px) + 8px);width:clamp(160px,14vw,210px);transform:translateX(-50%)}
.gj-card-img img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 18px rgba(0,0,0,.4))}
.gj-card h3{font-weight:800;font-size:clamp(30px,2.8vw,38px);line-height:1;color:#fff;text-shadow:0 3px 0 var(--gj-key),0 8px 16px rgba(0,0,0,.3)}
.gj-card-role{margin-top:6px;font-weight:800;font-size:19px;color:var(--gj-gold-hi);text-shadow:0 2px 0 var(--gj-key)}
.gj-card p{margin-top:12px;font-size:17px;line-height:1.5;color:#fff}
.gj-card .gj-card-role{margin-top:6px}
.gj-card.pip{--c:#8a5a12}.gj-card.rocco{--c:#1d5fc0}.gj-card.ember{--c:#b53a17}

/* ===================== VERSUS ===================== */
.gj-versus{background:var(--gj-950);overflow:hidden}
.gj-versus::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(112deg,#c3123a 0%,#7d0f3f 40%,#3a0d55 50%,#12227a 60%,#1747d4 100%)}
.gj-vs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.gj-vs-badge{position:relative;display:flex;align-items:center;justify-content:center;height:clamp(240px,28vw,360px)}
.gj-vs-badge img{position:relative;width:clamp(200px,24vw,320px);height:auto;z-index:2;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
.gj-vs-badge::before{content:"";position:absolute;width:clamp(220px,26vw,340px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,224,138,.45) 0%,rgba(255,224,138,0) 65%)}
.gj-vs-letters{position:absolute;z-index:3;font-weight:800;font-size:clamp(70px,8vw,120px);line-height:1;color:#fff;letter-spacing:-.04em;
  text-shadow:0 5px 0 var(--gj-key),0 10px 0 rgba(14,27,77,.5),0 20px 40px rgba(0,0,0,.5);transform:rotate(-8deg)}
.gj-modes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(26px,4vh,40px)}
.gj-mode{padding:22px 22px 24px;border-radius:24px;background:rgba(5,11,38,.42);border:2px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gj-mode h3{font-weight:800;font-size:24px;line-height:1.15;color:#fff}
.gj-mode p{margin-top:6px;color:#e3e8ff;font-size:17px;line-height:1.5}
.gj-mode.ranked{border-color:rgba(255,224,138,.6);box-shadow:0 0 30px rgba(255,224,138,.18)}
.gj-leagues{margin-top:clamp(40px,6vh,72px)}
.gj-leagues h3{font-weight:800;font-size:clamp(26px,2.6vw,34px);color:#fff;text-shadow:0 3px 0 var(--gj-key)}
.gj-ladder-wrap{position:relative;margin-top:clamp(26px,4vh,40px)}
.gj-ladder-track{position:absolute;left:8%;right:8%;bottom:66px;height:10px;border-radius:999px;background:rgba(5,11,38,.55);box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)}
.gj-ladder-fill{position:absolute;inset:0;border-radius:999px;background:var(--gj-rail);transform-origin:0 50%;box-shadow:0 0 16px rgba(255,224,138,.75)}
.gj-ladder{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:end}
.gj-league{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
.gj-league img{position:relative;width:var(--w);height:auto;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}
.gj-league:nth-child(1){--w:80px}.gj-league:nth-child(2){--w:88px}.gj-league:nth-child(3){--w:96px}.gj-league:nth-child(4){--w:104px}.gj-league:nth-child(5){--w:114px}.gj-league:nth-child(6){--w:128px}
.gj-league span{font-weight:800;font-size:17px;color:#fff;text-shadow:0 2px 0 var(--gj-key)}
.gj-vs-note{margin-top:clamp(34px,5vh,50px);max-width:62ch;color:#e3e8ff;font-size:16px}

/* ===================== PIP'S MINE ===================== */
.gj-mine-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.gj-mine-chest{display:flex;align-items:center;gap:18px;margin-top:clamp(22px,3vh,32px);padding:16px 20px 16px 16px;border-radius:24px;background:rgba(255,224,138,.08);border:2px solid rgba(255,224,138,.3)}
.gj-mine-chest img{width:110px;height:auto;flex:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.gj-mine-chest p{font-weight:700;color:#fff;font-size:18px;line-height:1.4}
.gj-ba{position:relative;width:min(100%,calc(70vh * .75));justify-self:end}
/* the four areas, as a list of buttons under the chest card: the name and what you rebuild there */
.gj-areas{display:grid;gap:8px;margin-top:20px}
.gj-areas li{display:flex} /* buttons in one row of the grid share its height */
.gj-areas button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:12px 18px 13px 22px;border-radius:16px;text-align:left;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1);transition:background .25s var(--gj-ease),box-shadow .25s var(--gj-ease)}
.gj-areas button::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:4px;border-radius:2px;background:var(--gj-rail);transform:scaleY(0);transition:transform .3s var(--gj-ease)}
.gj-areas button b{font-weight:800;font-size:18px;line-height:1.2;color:var(--gj-text-2);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
.gj-areas button span{font-weight:600;font-size:15px;line-height:1.35;color:var(--gj-text-3)}
.gj-areas button:hover{background:rgba(255,255,255,.07)}
.gj-areas button:hover b{color:#fff}
.gj-areas button[aria-pressed="true"]{background:rgba(255,224,138,.1);box-shadow:inset 0 0 0 1.5px rgba(255,224,138,.45)}
.gj-areas button[aria-pressed="true"]::before{transform:none}
.gj-areas button[aria-pressed="true"] b{color:#fff}
.gj-areas button[aria-pressed="true"] span{color:var(--gj-text-2)}
.gj-ba-frame{--pos:50%;position:relative;aspect-ratio:3/4;max-height:70vh;border-radius:28px;overflow:hidden;background:#060c2c;box-shadow:0 0 0 5px var(--gj-gold),0 0 0 8px var(--gj-key),0 30px 60px rgba(0,0,0,.5);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.gj-ba-frame picture,.gj-ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gj-ba-after{clip-path:inset(0 0 0 var(--pos))}
.gj-ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:var(--gj-rail);box-shadow:0 0 0 2px var(--gj-key);z-index:3;pointer-events:none}
.gj-ba-knob{position:absolute;top:50%;left:var(--pos);width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;z-index:4;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:14px;
  background:var(--gj-gold-grad);box-shadow:0 0 0 3px var(--gj-key),0 8px 18px rgba(0,0,0,.5)}
.gj-ba-knob::before,.gj-ba-knob::after{content:"";width:10px;height:10px;border-left:3px solid var(--gj-key);border-bottom:3px solid var(--gj-key);transform:rotate(45deg)}
.gj-ba-knob::after{transform:rotate(-135deg)}
.gj-ba-label{position:absolute;top:16px;z-index:3;font-weight:800;font-size:20px;color:#fff;text-shadow:0 2px 0 var(--gj-key),0 0 14px rgba(5,11,38,.9)}
.gj-ba-label.before{left:20px}.gj-ba-label.after{right:20px}
.gj-ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;z-index:5;touch-action:pan-y}
.gj-ba-hint{margin-top:14px;text-align:center;font-weight:700;font-size:15px;color:var(--gj-text-3)}

/* ===================== WORLDS ===================== */
.gj-worlds,.gj-faq{background:linear-gradient(180deg,#fff7e3 0%,#fdeec6 100%);color:var(--gj-key)}
.gj-worlds .gj-h2,.gj-faq .gj-h2{color:#14246b;text-shadow:0 2px 0 rgba(255,255,255,.9)}
.gj-worlds .gj-lead{color:#2a3b78}
.gj-world-row{display:flex;gap:clamp(12px,1.4vw,20px);margin-top:clamp(30px,4vh,48px);height:clamp(400px,54vh,540px)}
.gj-world{position:relative;flex:1 1 0;min-width:0;border-radius:28px;overflow:hidden;background:#0b1747;color:#fff;
  box-shadow:0 0 0 4px var(--gj-gold),0 0 0 7px var(--gj-key),0 24px 44px rgba(14,27,77,.3)}
.gj-world picture,.gj-world img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--gj-ease)}
.gj-world::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,11,38,0) 34%,rgba(5,11,38,.72) 56%,rgba(5,11,38,.88) 100%);pointer-events:none}
/* the text starts at the same height on every card, so the four titles share one line whatever their captions' length */
.gj-world-txt{position:absolute;left:0;right:0;top:58%;z-index:2;padding:0 24px 24px}
.gj-world h3{font-weight:800;font-size:clamp(24px,2.2vw,32px);line-height:1.05;text-shadow:0 3px 0 var(--gj-key),0 8px 16px rgba(0,0,0,.35)}
.gj-world p{margin-top:8px;font-size:16px;line-height:1.45;color:#eef2ff;max-width:34ch}
@media(hover:hover) and (min-width:961px){
  .gj-world:hover img{transform:scale(1.04)}
}

/* ===================== SCREENSHOTS ===================== */
.gj-shots{padding-bottom:clamp(40px,6vh,80px)}
.gj-shots-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.gj-shots-ctrl{display:flex;gap:10px;flex:none}
.gj-round{width:54px;height:54px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);transition:background .2s}
.gj-round:hover{background:rgba(255,255,255,.2)}
.gj-round:disabled{opacity:.35;cursor:default}
.gj-round svg{width:22px;height:22px}
/* room around the cards so their shadow and glow are never cut into a hard edge */
.gj-shots-viewport{--edge:max(var(--gj-pad),calc((100% - var(--gj-content)) / 2));margin-top:clamp(12px,2vh,24px);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);cursor:grab}
.gj-shots-viewport::-webkit-scrollbar{display:none}
.gj-shots-viewport.is-drag{cursor:grabbing;scroll-snap-type:none}
.gj-shots-track{display:flex;gap:clamp(14px,1.6vw,24px);padding:28px var(--edge) 64px;width:max-content}
.gj-shot{flex:none;width:clamp(200px,19vw,262px);scroll-snap-align:start}
.gj-shot button{display:block;width:100%;padding:0;border-radius:24px;overflow:hidden;background:#0b1747;box-shadow:0 0 0 3px rgba(255,224,138,.5),0 18px 36px rgba(0,0,0,.45);transition:transform .3s var(--gj-ease),box-shadow .3s}
.gj-shot button:hover{transform:translateY(-4px);box-shadow:0 0 0 3px var(--gj-gold-hi),0 24px 44px rgba(0,0,0,.55)}
.gj-shot img{display:block;width:100%;height:auto;aspect-ratio:1320/2868;pointer-events:none;-webkit-user-drag:none}

.gj-lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(3,7,26,.92);color:#fff;overflow:hidden}
.gj-lightbox::backdrop{background:rgba(3,7,26,.6)}
.gj-lightbox[open]{display:flex;align-items:center;justify-content:center}
.gj-lb-fig{position:relative;margin:0;height:min(88vh,1100px);display:flex;flex-direction:column;align-items:center;gap:12px}
.gj-lb-fig img{height:calc(100% - 36px);width:auto;max-width:92vw;object-fit:contain;border-radius:22px;box-shadow:0 0 0 3px rgba(255,224,138,.6),0 30px 80px rgba(0,0,0,.6)}
.gj-lb-count{font-weight:700;font-size:15px;color:var(--gj-text-2)}
.gj-lb-close{position:absolute;top:18px;right:18px}
.gj-lb-prev{position:absolute;left:max(16px,calc(50% - 420px));top:50%;transform:translateY(-50%)}
.gj-lb-next{position:absolute;right:max(16px,calc(50% - 420px));top:50%;transform:translateY(-50%)}

/* ===================== FAQ ===================== */
.gj-faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,80px);align-items:start}
.gj-faq-side{position:sticky;top:120px}
.gj-faq-mail{margin-top:18px;max-width:30ch;font-size:18px;line-height:1.55;color:#2b3a72}
.gj-faq-mail a{color:#1f45d6;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.gj-qa{display:grid;gap:12px}
.gj-qa details{border-radius:22px;background:#fff;box-shadow:0 0 0 2px rgba(14,27,77,.12),0 8px 20px rgba(14,27,77,.08);overflow:hidden;transition:box-shadow .3s}
.gj-qa details[open]{box-shadow:0 0 0 3px var(--gj-gold),0 12px 26px rgba(14,27,77,.14)}
.gj-qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-weight:800;font-size:19px;line-height:1.3;cursor:pointer}
.gj-qa summary::-webkit-details-marker{display:none}
.gj-qa summary i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:var(--gj-gold-grad);box-shadow:0 0 0 2px var(--gj-key)}
.gj-qa summary i::before,.gj-qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:3px;border-radius:2px;background:var(--gj-key);transform:translate(-50%,-50%)}
.gj-qa summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s var(--gj-ease)}
.gj-qa details[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.gj-qa-a{padding:0 22px 22px;color:#2b3a72;font-size:17px;line-height:1.6}
.gj-qa-a p + p{margin-top:10px}
.gj-qa-a a{color:#1f45d6;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ===================== CTA BAND ===================== */
.gj-cta{position:relative;overflow:hidden;padding:clamp(84px,12vh,136px) 0;text-align:center;isolation:isolate}
.gj-cta.gj-slant{padding-top:calc(clamp(84px,12vh,136px) + var(--slant))}
.gj-cta-bg{position:absolute;inset:0;z-index:-2}
.gj-cta-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.gj-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 75% at 50% 45%,rgba(5,11,38,.35) 0%,rgba(5,11,38,.8) 100%),linear-gradient(180deg,var(--gj-950) 0%,rgba(5,11,38,0) 18%)}
.gj-cta .gj-wrap{position:relative;z-index:1}
.gj-cta .gj-h2{max-width:18ch;margin:0 auto}
.gj-nw{white-space:nowrap}
.gj-cta .gj-lead{margin-inline:auto;color:#e6ecff}
.gj-cta .gj-stores{justify-content:center;margin-top:clamp(26px,4vh,38px)}

/* ===================== FOOTER (slim, the game's own) ===================== */
.gj-foot{background:var(--gj-950);color:var(--gj-text-3);padding:clamp(34px,5vh,52px) 0 clamp(28px,4vh,40px);border-top:1px solid rgba(255,255,255,.08)}
.gj-foot-row{display:flex;align-items:center;gap:20px 36px;flex-wrap:wrap}
.gj-foot-mark{display:inline-flex;line-height:0;opacity:.92;transition:opacity .2s}
.gj-foot-mark:hover{opacity:1}
.gj-foot-mark img{height:22px;width:auto}
.gj-foot-links{display:flex;flex-wrap:wrap;gap:6px 24px;margin-right:auto}
.gj-foot-links a{font-weight:600;font-size:15px;color:var(--gj-text-2);transition:color .2s}
.gj-foot-links a:hover{color:#fff}
.gj-foot-legal{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.07);font-size:13px;line-height:1.5;color:var(--gj-text-3)}

/* ===================== REDUCED MOTION ===================== */
@media(prefers-reduced-motion:reduce){
  .gj-world,.gj-world img,.gj-btn,.gj-web,.gj-play,.gj-shot button{transition:none}
  .gj-btn:hover,.gj-web:hover,.gj-play:hover,.gj-shot button:hover{transform:none}
}

/* ===================== RESPONSIVE ===================== */
@media(min-width:961px){
  /* the hero's three badges: 52 px, so the longest row (Spanish) fits beside the phone */
  .gj-hero .gj-stores{--badge-h:52px;gap:10px 12px}
  .gj-hero .gj-web{gap:10px;padding:0 16px 0 12px}
  .gj-hero .gj-web-ico{width:26px;height:26px}
  .gj-hero .gj-web-txt b{font-size:16px}
  .gj-hero .gj-web-txt span{font-size:12.5px}
}
@media(max-width:1400px){
  /* three badges stay on one row in the hero on a 1366 px laptop */
  .gj-stores{--badge-h:52px;gap:10px 12px}
  .gj-web{gap:10px;padding:0 16px 0 12px}
  .gj-web-ico{width:26px;height:26px}
  .gj-web-txt b{font-size:16px}
  .gj-web-txt span{font-size:12.5px}
}
@media(max-width:1180px) and (min-width:961px){
  /* narrow cards wrap captions onto more lines, so their text starts higher */
  .gj-world-txt{top:47%}
}
@media(min-width:961px) and (max-width:1200px){
  .gj-mark{display:none}
}
@media(max-width:1120px){
  .gj-links a{padding:8px 9px;font-size:15px}
  .gj-links a::after{left:9px;right:9px}
  .gj-crumb{display:none}
}
@media(max-width:960px){
  /* the bar on phones and tablets: the studio mark, Play free, and the menu */
  .gj-links,.gj-nav-bar > .gj-lang,.gj-mark{display:none}
  .gj-nav-cta{margin-left:auto;padding:9px 15px 11px;font-size:15px}
  .gj-burger{display:flex;margin-left:8px}
  /* closed, the menu is hidden from Tab and screen readers too: visibility switches off after the slide ends, on at once when opening */
  .gj-menu{display:block;flex-basis:100%;max-height:0;overflow:hidden;visibility:hidden;transition:max-height .55s var(--gj-ease),visibility 0s linear .55s}
  .gj-nav-bar{flex-wrap:wrap;row-gap:0} /* the closed menu wraps to its own row; no gap may open above it */
  .gj-nav.is-open .gj-menu{max-height:calc(100vh - 90px);max-height:calc(100svh - 90px);overflow-y:auto;overscroll-behavior:contain;visibility:visible;transition:max-height .55s var(--gj-ease),visibility 0s linear 0s}
  .gj-menu-in{display:grid;gap:4px;padding:12px 0 10px;width:100%}
  .gj-menu a.gj-menu-link{font-weight:800;font-size:22px;color:#fff;padding:10px 0}
  .gj-menu a.gj-menu-link:hover{color:var(--gj-gold-hi)}
  .gj-menu-langs{margin:8px 0 6px;gap:6px 22px}
  .gj-menu-langs a{font-size:17px}
  .gj-menu .gj-btn{justify-self:start;margin:10px 0 6px}
  /* the first screen on a phone: the wordmark, what it is, where to play, then the game playing */
  .gj-hero{padding:84px 0 48px;min-height:0}
  .gj-hero-grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:0}
  .gj-hero-copy{display:contents}
  .gj-h1{order:1}
  .gj-stores{order:2;justify-content:center;margin-top:18px;position:relative}
  /* the cave's light shaft falls right on the store row here: a soft, shapeless shade keeps the caption readable */
  .gj-hero .gj-stores::before{content:"";position:absolute;inset:-26px -34px -22px;z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side,rgba(5,11,38,.66) 0%,rgba(5,11,38,.5) 62%,rgba(5,11,38,0) 100%)}
  .gj-stage{order:4;margin-top:26px}
  .gj-pitch{order:5;margin:24px auto 8px}
  .gj-trailer-btn{order:6}
  .gj-wordmark{width:180px;margin-inline:auto}
  .gj-stage{--phone-w:min(46vw,200px)}
  .gj-char.pip{width:calc(var(--phone-w) * .5);margin-right:calc(var(--phone-w) * -.1)}
  .gj-char.ember{width:calc(var(--phone-w) * .44);margin-left:calc(var(--phone-w) * -.09)}
  .gj-play-grid,.gj-vs-grid,.gj-mine-grid,.gj-faq-grid{grid-template-columns:1fr}
  .gj-faq-side{position:static}
  .gj-ba{justify-self:center}
  .gj-areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gj-areas button{padding:10px 12px 11px 20px}
  .gj-areas button b{font-size:16px}
  .gj-areas button span{font-size:14px}
  .gj-demo-wrap{margin-top:10px}
  .gj-vs-badge{order:-1;height:200px}
  /* character cards become compact rows */
  .gj-cast{grid-template-columns:1fr;gap:16px;margin-top:28px;max-width:600px}
  .gj-card{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto 1fr;column-gap:16px;align-items:start;padding:16px 18px 18px 12px;text-align:left;
    background:linear-gradient(180deg,var(--c) 0%,color-mix(in srgb,var(--c) 70%,#0b1747) 100%)}
  .gj-card-img{position:static;transform:none;grid-row:1 / span 3;width:96px;align-self:center}
  .gj-card h3{font-size:26px}
  .gj-card .gj-card-role{margin-top:2px;font-size:17px}
  .gj-card p{margin-top:4px;font-size:16px}
  .gj-ladder{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .gj-ladder-track{display:none}
  .gj-league img{width:min(var(--w),22vw)}
  .gj-world-row{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gj-pad)*-1);padding:10px var(--gj-pad) 20px;scroll-padding-inline:var(--gj-pad);scrollbar-width:none}
  .gj-world-row::-webkit-scrollbar{display:none}
  .gj-world{flex:0 0 min(72vw,320px);aspect-ratio:2/3;scroll-snap-align:start}
  .gj-foot-row{flex-direction:column;align-items:flex-start;gap:18px}
  .gj-foot-links{margin-right:0}
}
@media(min-width:641px) and (max-width:960px){
  /* tablets in portrait: the wordmark and the phone scale with the screen instead of staying phone-sized
     (capped by the height, so a phone held sideways keeps them small) */
  .gj-wordmark{width:min(36vw,36vh)}
  .gj-stage{--phone-w:min(36vw,44vh)}
}
@media(max-width:960px) and (max-height:520px){
  /* phones held sideways: a short screen keeps the wordmark small so the store badges stay in the first screen */
  .gj-wordmark{width:min(180px,34vh)}
}
@media(max-height:520px){
  /* the whole mini board fits between the floating nav and the bottom of a short screen */
  .gj-demo{--cell:min(46px,calc((100vh - 122px) / 6));--cell:min(46px,calc((100svh - 122px) / 6))}
}
@media(max-width:640px){
  body.gj{font-size:17px}
  /* the board is 6 cells wide with its rail: it always fits the content column, 320 px phones included */
  .gj-demo{--cell:min(46px,calc((100vw - 2 * var(--gj-pad) - 6 * var(--gap)) / 6),calc((100vh - 122px) / 6));--cell:min(46px,calc((100vw - 2 * var(--gj-pad) - 6 * var(--gap)) / 6),calc((100svh - 122px) / 6))}
  .gj-sec{padding:56px 0}
  .gj-slant{padding-top:calc(56px + var(--slant))}
  .gj-stores{--badge-h:48px;gap:10px}
  .gj-web{gap:9px;padding:0 14px 0 11px}
  .gj-web-ico{width:24px;height:24px}
  .gj-web-txt b{font-size:15px}
  .gj-web-txt span{font-size:12px}
  .gj-vs-badge{height:150px}
  .gj-vs-badge img{width:150px}
  .gj-vs-letters{font-size:64px}
  .gj-leagues{margin-top:40px}
  .gj-cta{padding:76px 0}
  .gj-cta.gj-slant{padding-top:calc(76px + var(--slant))}
  .gj-nav{padding:10px 8px}
  .gj-nav-bar{padding:6px 6px 6px 12px}
  .gj-modes{grid-template-columns:1fr}
  .gj-shots-head{flex-direction:column;align-items:flex-start}
  .gj-shots-ctrl{display:none}
  .gj-step{grid-template-columns:64px 1fr;gap:14px;padding:16px}
  .gj-step-ico{transform:scale(.85);transform-origin:0 50%}
  .gj-lb-prev,.gj-lb-next{top:auto;bottom:18px;transform:none}
  .gj-lb-fig{height:76vh}
}

@media(max-width:400px){
  .gj-demo-win .gj-stores{--badge-h:40px}
  /* the studio mark, Play free and the menu stay on one row down to 320 px */
  .gj-nav-bar{column-gap:10px}
  .gj-ll img{height:17px}
  .gj-nav-cta{padding:8px 12px 10px;font-size:14px}
  .gj-burger{margin-left:4px}
}
@media(max-width:340px){
  /* Google Play and the App Store share a row on the narrowest phones */
  .gj-stores{--badge-h:42px;gap:8px}
  .gj-web-txt b{font-size:14px}
  .gj-web-txt span{font-size:11.5px}
}

/* Without JavaScript only what works is shown: the trailer and menu buttons, the playable board and the mine's slider
   need the script, so they stay hidden and the mine keeps its before and after split down the middle. */
html:not(.js) .gj-trailer-btn,html:not(.js) .gj-burger,html:not(.js) .gj-demo-wrap,
html:not(.js) .gj-ba-knob,html:not(.js) .gj-ba-range,html:not(.js) .gj-ba-hint{display:none}
html:not(.js) .gj-play-grid{grid-template-columns:minmax(0,760px)}
/* the nav only gets its backdrop once the script sees the page scroll, so without it the nav stays at the top of the page
   instead of floating over the text */
html:not(.js) .gj-nav{position:absolute}

/* Nothing may widen the page on phones: the demo board's blocks slide out past their gates, so the board clips them,
   and the root clips anything else (WebKit does not apply body's overflow-x:clip to the page). */
.gj-demo{overflow:hidden}
html{overflow-x:hidden}
@supports (overflow:clip){html{overflow-x:clip}}
/* the mine's area tabs share the width on small phones instead of running past the edge ("Cruce de Vagonetas" at 320 px) */
@media(max-width:400px){
  .gj-ba-tabs:not(.is-row){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .gj-ba-tabs:not(.is-row) button{white-space:normal;font-size:16px;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
}

/* a block pushed at its own gate before it lines up: the gate pulses so the player sees where it has to stand */
@keyframes gj-gate-hint{0%,100%{filter:none}35%{filter:brightness(1.7) drop-shadow(0 0 8px var(--c,#fff))}70%{filter:brightness(1.25)}}
.gj-gate.is-hint{animation:gj-gate-hint 1.2s ease-in-out}
@media (prefers-reduced-motion:reduce){.gj-gate.is-hint{animation:none;filter:brightness(1.5)}}