/* --- the choice screen: the very first screen, split in two (src/ui/slopGate.js, 25 Oct 2026) --- */
.sg { position: fixed; inset: 0; z-index: 60; overflow: hidden; background: #08040f; --split: 50%; pointer-events: auto; cursor: pointer;
  font-family: Bangers, Impact, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
.sg-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sg-half { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.sg-half.l { left: 0; width: var(--split); }
.sg-half.r { right: 0; width: calc(100% - var(--split)); }
.sg-dim { position: absolute; inset: 0; background: rgba(8, 4, 16, 0); transition: background .35s, backdrop-filter .35s; }
.sg-half.off .sg-dim { background: rgba(8, 4, 16, .42); backdrop-filter: grayscale(.85) brightness(.75); -webkit-backdrop-filter: grayscale(.85) brightness(.75); }

/* the titles */
.sg-head { position: absolute; left: 0; right: 0; top: 6vh; text-align: center; transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), opacity .3s; transform-origin: 50% 20%; }
.sg-half.on .sg-head { transform: scale(1.1); }
.sg-half.off .sg-head { transform: scale(.88); opacity: .55; }
.sg-ai, .sg-64 { display: block; white-space: nowrap; font-weight: normal; letter-spacing: .04em; line-height: .92; font-size: min(12vh, 8.5vw); }
.sg-v { font-size: min(7vh, 5vw); }
/* AI SLOP: glossy chrome, pink glow, a shine that sweeps over */
.sg-ai { background: linear-gradient(180deg, #ffffff 0%, #ffe3fb 34%, #d7a2ff 49%, #7b2fd2 56%, #c76bff 72%, #ffe0fb 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 2px #1a0626; filter: drop-shadow(0 0 1.4vh rgba(255, 90, 210, .75)) drop-shadow(.35vh .45vh 0 #1a0626);
  position: relative; animation: sg-float 3s ease-in-out infinite; }
.sg-ai.sg-v { animation-delay: -.6s; }
.sg-ai::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .9) 50%, transparent 60%);
  -webkit-background-clip: text; background-clip: text; background-size: 300% 100%; animation: sg-shine 2.6s linear infinite; }
/* TEMPORARY: the four colours of a certain grey console's logo, blocky 3D, letters that bounce */
.sg-64 i { display: inline-block; font-style: normal; color: #e8262b; -webkit-text-stroke: 2px #111; paint-order: stroke fill;
  text-shadow: .25vh .25vh 0 #111, .5vh .5vh 0 #111, .75vh .75vh 0 #111, 1vh 1vh 0 #111; animation: sg-hop 1.4s calc(var(--i) * 90ms) ease-in-out infinite; }
.sg-64 i:nth-child(4n + 2) { color: #1fa64a; }
.sg-64 i:nth-child(4n + 3) { color: #2a5fe0; }
.sg-64 i:nth-child(4n + 4) { color: #f6c018; }
.sg-badge { display: inline-block; margin-top: 1.4vh; padding: .5vh 1.6vh; border-radius: 99px; font-size: min(2.8vh, 2.1vw); letter-spacing: .08em; color: #fff;
  -webkit-text-stroke: 1px #120a1a; paint-order: stroke fill; box-shadow: 0 0 0 .3vh #120a1a, .4vh .5vh 0 .3vh #120a1a; }
.l .sg-badge { background: linear-gradient(90deg, #ff4fb6, #a64dff, #45d9ff); }
.r .sg-badge { background: #2a5fe0; font-family: 'Courier New', monospace; font-weight: 900; letter-spacing: .02em; image-rendering: pixelated; }
.sg-sub { margin: 1.4vh auto 0; max-width: 88%; font: 700 min(2.6vh, 2vw)/1.2 'Barlow Condensed', sans-serif; color: #fff3d6; text-shadow: 0 .25vh 0 #120a1a, 0 0 1vh #120a1a; }
.sg-last { display: inline-block; margin-top: 1.4vh; padding: .3vh 1.2vh; background: #ffd84a; color: #120a1a; font-size: min(2.2vh, 1.7vw); letter-spacing: .06em;
  transform: rotate(-3deg); box-shadow: .3vh .4vh 0 #120a1a; animation: sg-wiggle 2.2s ease-in-out infinite; }
/* "A CHOISIR": shows on the side under the cursor */
.sg-go { position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%) scale(.6); opacity: 0; transition: transform .25s cubic-bezier(.2, 1.8, .4, 1), opacity .2s;
  font-size: min(4.2vh, 3vw); color: #fff; letter-spacing: .06em; -webkit-text-stroke: 2px #120a1a; paint-order: stroke fill; text-shadow: .3vh .35vh 0 #120a1a; white-space: nowrap; }
.sg-half.on .sg-go { opacity: 1; transform: translateX(-50%) scale(1); animation: sg-pulse 1s ease-in-out infinite; }
.sg-a { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; margin-right: .2em; border-radius: 50%; font-style: normal;
  background: radial-gradient(circle at 35% 30%, #8cf07a, #2fae3c 55%, #17702a); border: .25vh solid #120a1a; box-shadow: .2vh .3vh 0 #120a1a; -webkit-text-stroke: 1.5px #120a1a; }

/* the seam: a zigzag bolt, and OU ? in its middle */
.sg-seam { position: absolute; top: -2vh; height: 104vh; width: 5vh; left: calc(var(--split) - 2.5vh); pointer-events: none; overflow: visible;
  filter: drop-shadow(0 0 1.2vh rgba(255, 230, 80, .9)); }
.sg-seam polyline { fill: none; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.sg-bolt-k { stroke: #120a1a; stroke-width: 11; }
.sg-bolt { stroke: #ffe14a; stroke-width: 5; animation: sg-flick .12s steps(2) infinite; }
.sg-or { position: absolute; left: var(--split); top: 50%; width: 15vh; height: 15vh; margin: -7.5vh 0 0 -7.5vh; border-radius: 50%; pointer-events: none;
  display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 35%, #fff07a, #ffb21a 45%, #e8302a 100%);
  border: .5vh solid #120a1a; box-shadow: .6vh .8vh 0 #120a1a, 0 0 4vh rgba(255, 170, 40, .7); animation: sg-or 1.3s ease-in-out infinite; }
.sg-or b { font-size: 7vh; color: #fff; -webkit-text-stroke: 2px #120a1a; paint-order: stroke fill; text-shadow: .3vh .4vh 0 #120a1a; transform: rotate(-8deg); font-weight: normal; }
.sg-or i { position: absolute; right: -1.2vh; top: -1.6vh; font-style: normal; font-size: 6vh; color: #ff5ccf; -webkit-text-stroke: 2px #120a1a; paint-order: stroke fill; transform: rotate(14deg); animation: sg-wiggle 1s ease-in-out infinite; }
.sg-hint { position: absolute; left: 50%; bottom: 2.6vh; transform: translateX(-50%); display: flex; gap: 2.4vh; align-items: center; white-space: nowrap; pointer-events: none;
  padding: .8vh 2.2vh; border-radius: 99px; background: rgba(18, 10, 26, .78); box-shadow: 0 0 0 .3vh #120a1a; font: 700 min(2.4vh, 1.8vw) 'Barlow Condensed', sans-serif; color: #fff3d6; }
.sg-hint em { font-style: normal; color: #ffd84a; font-family: Bangers, sans-serif; font-size: 1.15em; margin-right: .3em; }
.sg-hint .sg-a { width: 1.3em; height: 1.3em; color: #fff; }
.sg-hint .sg-later { opacity: .6; font-weight: 600; }
.sg .jx-burst { position: absolute; pointer-events: none; z-index: 5; }
.sg .jx-burst svg { position: absolute; inset: 0; overflow: visible; }
.sg .jx-burst b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Bangers, sans-serif; font-weight: normal; letter-spacing: 1px; white-space: nowrap; transform: rotate(-6deg); }
.sg-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

/* coming in: the halves slide in, the bolt strikes, OU pops */
.sg .sg-half.l .sg-head { animation: sg-in-l .7s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.sg .sg-half.r .sg-head { animation: sg-in-r .7s .08s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.sg .sg-seam { animation: sg-strike .35s .25s ease-out both; }
.sg .sg-or { animation: sg-pop .5s .45s cubic-bezier(.2, 1.8, .4, 1) both, sg-or 1.3s 1s ease-in-out infinite; }
.sg .sg-hint { animation: sg-up .5s .7s ease-out both; }
/* picked: a flash, the rest goes */
.sg.picked { cursor: default; }
.sg.picked .sg-flash { animation: sg-flash .5s ease-out; }
.sg.picked .sg-seam, .sg.picked .sg-or, .sg.picked .sg-hint, .sg.picked .sg-half.off { opacity: 0; transition: opacity .25s; }
.sg.picked .sg-half.on .sg-head { transform: scale(1.25); }
.sg.picked .sg-half.on .sg-go { opacity: 0; }
.sg.leave { animation: sg-out .45s ease-in forwards; }

/* without 3D (a small machine, a slow connection): the portraits of both versions */
.sg-flat .sg-half.l { background: radial-gradient(ellipse at 50% 85%, #b8337f 0%, #3a0d5c 45%, #12041f 100%); }
.sg-flat .sg-half.r { background: linear-gradient(#1d5fd6, #6fb8ff 55%, #59c84a 55%, #59c84a 100%); }
.sg-cards { position: absolute; left: 0; right: 0; bottom: 18vh; display: flex; justify-content: center; gap: 1vh; }
.sg-cards img { width: min(20vh, 7vw); height: auto; animation: sg-hop 1.6s calc(var(--i) * 140ms) ease-in-out infinite; filter: drop-shadow(.4vh .5vh 0 #120a1a); }
.sg-flat .r .sg-cards img { image-rendering: pixelated; }

@keyframes sg-float { 50% { transform: translateY(-.8vh) rotate(-1deg); } }
@keyframes sg-shine { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@keyframes sg-hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-1.2vh) rotate(-3deg); } 60% { transform: translateY(0) rotate(2deg); } }
@keyframes sg-wiggle { 50% { transform: rotate(3deg) scale(1.05); } }
@keyframes sg-pulse { 50% { transform: translateX(-50%) scale(1.08); } }
@keyframes sg-flick { 50% { stroke: #fff6c2; } }
@keyframes sg-or { 50% { transform: scale(1.08) rotate(-4deg); } }
@keyframes sg-in-l { from { transform: translateX(-60vw) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sg-in-r { from { transform: translateX(60vw) rotate(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sg-strike { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sg-pop { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
@keyframes sg-up { from { transform: translate(-50%, 6vh); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes sg-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes sg-out { to { opacity: 0; } }

/* (25 Oct 2026, the creator: « on doit être incité à prendre la version AI slop ») the AI side louder, the N64 side smaller */
.l .sg-ai { font-size: min(13vh, 9vw); }
.l .sg-ai.sg-v { font-size: min(7.5vh, 5.2vw); }
.r .sg-64 { font-size: min(9vh, 6vw); }
.r .sg-64.sg-v { font-size: min(5.5vh, 3.8vw); }
.r .sg-sub { font-size: min(2.2vh, 1.7vw); opacity: .8; }
.sg-tt { position: relative; display: inline-block; }
/* sparkles around the AI title */
.sg-tw { position: absolute; font-style: normal; font-size: 4.5vh; color: #fff; text-shadow: 0 0 1vh #ff7ad9, 0 0 2vh #ff7ad9; pointer-events: none;
  animation: sg-tw 1.8s ease-in-out infinite; }
@keyframes sg-tw { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 40% { transform: scale(1.2) rotate(90deg); opacity: 1; } 70% { transform: scale(.6) rotate(160deg); opacity: .8; } }
/* RECOMMANDÉ: a rubber stamp slammed onto the AI side */
.sg-stamp { position: absolute; left: 106%; top: 4%; padding: .6vh 1.8vh; font-size: min(4.6vh, 3.2vw); letter-spacing: .06em; color: #fff; white-space: nowrap; pointer-events: none;
  background: linear-gradient(180deg, #ff4b6e, #d4123e); border: .5vh solid #fff; border-radius: 1vh; box-shadow: 0 0 0 .45vh #120a1a, .6vh .8vh 0 .45vh #120a1a, 0 0 3vh rgba(255, 70, 120, .7);
  -webkit-text-stroke: 1.5px #120a1a; paint-order: stroke fill; transform: rotate(-12deg) scale(3); opacity: 0; }
.sg.stamped .sg-stamp { animation: sg-stamp .45s cubic-bezier(.3, 1.6, .5, 1) forwards, sg-stamp-b 1.6s .5s ease-in-out infinite; }
@keyframes sg-stamp { 0% { transform: rotate(-12deg) scale(3); opacity: 0; } 60% { transform: rotate(-10deg) scale(.92); opacity: 1; } 100% { transform: rotate(-12deg) scale(1); opacity: 1; } }
@keyframes sg-stamp-b { 0%, 100% { transform: rotate(-12deg) scale(1); opacity: 1; } 50% { transform: rotate(-9deg) scale(1.08); opacity: 1; } }
.sg-half.off .sg-stamp { filter: grayscale(.6); }
/* the whole screen shakes (the stamp, the choice) */
.sg.shake { animation: sg-shake .42s ease-out; }
@keyframes sg-shake { 0% { transform: translate(0, 0); } 15% { transform: translate(-1.2vh, .8vh) rotate(-.4deg); } 30% { transform: translate(1vh, -.6vh) rotate(.3deg); } 45% { transform: translate(-.7vh, .4vh); } 60% { transform: translate(.5vh, -.3vh); } 80% { transform: translate(-.2vh, .1vh); } 100% { transform: none; } }
/* OU ? jumps when the side changes */
.sg-or.bump { animation: sg-bump .4s cubic-bezier(.2, 1.8, .4, 1), sg-or 1.3s .4s ease-in-out infinite; }
@keyframes sg-bump { 0% { transform: scale(1.45) rotate(18deg); } 100% { transform: none; } }
.sg.leave.shake { animation: sg-out .45s ease-in forwards; } /* (the fade out wins over a shake still on) */
.sg-stamp small { display: block; margin-top: -.2vh; font-size: .55em; letter-spacing: .1em; text-align: center; color: #ffe9f0; } /* (« pour l'instant ») */