:root{
  --vh: 1vh;
  --bg0:#070b14;
  --bg1:#0b1020;
  --overlay-center-y: 50%;
  --overlay-radius: 120vmax;
}

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  background: transparent;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
}

canvas{
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#scroll-spacer{
  position: relative;
  z-index: 0;
  height: calc(var(--vh) * 100 + 320px);
  background: transparent;
  pointer-events: none;
}

#onboarding{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  z-index: 10000;
  isolation: isolate;
  pointer-events: none;
}

#onboarding.show{
  display: flex;
  pointer-events: auto;
}

.finger-only{
  width: min(420px, 92vw);
  height: min(260px, 42vh);
  border-radius: 26px;
  background: rgba(18,18,18,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 70px rgba(0,0,0,0.52);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  z-index: 1;
}

.finger-only:before{
  content: "";
  position: absolute;
  inset: -40% -40%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,0.08), transparent 55%);
  transform: translate3d(0,0,0);
  pointer-events: none;
}

.touch-ring{
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  left: -5%;
  top: 8%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.18) 30%,
    transparent 72%
  );

  animation: ringPulse 1.45s ease-out infinite;
  pointer-events: none;

  z-index: 2;
}

@keyframes ringPulse{
  0%   { transform: scale(0.45); opacity: 1; }
  60%  { transform: scale(2.1); opacity: 0.15; }
  100% { transform: scale(2.6); opacity: 0; }
}

.finger-wrap{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 180px;
  transform: translate(-50%, -35%);
  display: flex;
  align-items: flex-end;
  justify-content: center;

  z-index: 3;
}

.finger-img{
  width: 120px;
  height: auto;
  animation: fingerUpPng 1.45s cubic-bezier(.4,0,.2,1) infinite;
  will-change: transform;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45));
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

@keyframes fingerUpPng{
  0%   { transform: translateY(48px); }
  50%  { transform: translateY(-14px); }
  100% { transform: translateY(48px); }
}

.mini-arrows{
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  display: grid;
  gap: 18px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 4;
}

.mini-arrows i{
  width: 38px;
  height: 38px;
  border-right: 6px solid rgba(255,255,255,0.95);
  border-bottom: 6px solid rgba(255,255,255,0.95);
  transform: rotate(225deg);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}

.mini-arrows i:nth-child(1){ animation: chev 1.2s ease-in-out infinite; }
.mini-arrows i:nth-child(2){ animation: chev 1.2s ease-in-out infinite 0.15s; }
.mini-arrows i:nth-child(3){ animation: chev 1.2s ease-in-out infinite 0.30s; }

@keyframes chev{
  0%   { transform: translateY(16px) rotate(225deg); opacity: 0.1; }
  40%  { transform: translateY(-6px) rotate(225deg); opacity: 1; }
  100% { transform: translateY(16px) rotate(225deg); opacity: 0.1; }
}

#pfs-stage{
  position: fixed;
  inset: 0;
  width: 100%;
  height: calc(var(--vh) * 100);
  z-index: 1;
}

#GameDiv, #Cocos3dGameContainer, #IntroOverlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#GameCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #101525;
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: auto;
}

#IntroOverlay{
  z-index: 9999;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  background:
    radial-gradient(var(--overlay-radius) var(--overlay-radius) at 50% var(--overlay-center-y),
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.15) 40%,
      rgba(0,0,0,0) 100%
    ),
    radial-gradient(900px 500px at 20% 10%, rgba(77,163,255,.16), transparent 55%),
    radial-gradient(800px 500px at 85% 25%, rgba(109,220,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-repeat: no-repeat;
}

@supports (top: env(safe-area-inset-top)){
  @media (max-width:768px){
    :root{
      --overlay-center-y: calc(
        50% + (env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 2
      );
    }
  }
}

@media (max-width:480px){
  :root{ --overlay-center-y: calc(var(--overlay-center-y) + 2vh); }
}

#IntroOverlayInner{
  position: absolute;
  inset: 0;
  background-image: url("/HomeFavicons/olympiclogo.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: clamp(120px, 36vw, 400px) auto;
  filter: blur(8px);
  transform: scale(0);
  transform-origin: 50% 50%;
  opacity: 0;
  will-change: clip-path, filter, transform, opacity;
  clip-path: circle(0 at 10% 50%);
}

@supports not (clip-path: circle(50%)){
  #IntroOverlayInner{ clip-path: none; }
}

@media (max-width:1024px){
  #IntroOverlayInner{ background-size: clamp(120px, 36vw, 400px) auto; }
}
@media (max-width:768px){
  #IntroOverlayInner{ background-size: clamp(170px, 40vw, 560px) auto; }
}
@media (max-width:480px){
  #IntroOverlayInner{ background-size: clamp(240px, 52vw, 720px) auto; }
}

@keyframes introOpen{
  0%   { clip-path: circle(0 at 50% 50%);       filter: blur(8px); transform: scale(0);    opacity:0; }
  84%  { clip-path: circle(120vmax at 50% 50%); filter: blur(2px); transform: scale(1.06); opacity:1; }
  100% { clip-path: circle(150vmax at 50% 50%); filter: blur(0px); transform: scale(1.00); opacity:1; }
}
@keyframes introHold{ from{opacity:1;} to{opacity:1;} }
@keyframes introFade{ from{opacity:1;} to{opacity:0;} }

.fallback-open{ animation: introOpen 1000ms cubic-bezier(.16,.84,.44,1) forwards; }
.fallback-hold{ animation: introHold 500ms linear forwards; }
.fallback-fade{ animation: introFade 1000ms cubic-bezier(.33,1,.68,1) forwards; }

@media (max-width:1024px){ :root{ --overlay-radius: 90vmax; } }
@media (max-width:768px){  :root{ --overlay-radius: 70vmax; } }
@media (max-width:480px){  :root{ --overlay-radius: 55vmax; } }

@media (hover: hover) and (pointer: fine) {
  #scroll-spacer { display: none; height: 0 !important; }
  html, body { overflow: hidden; }
}

#pfs-stage{
  background:
    radial-gradient(var(--overlay-radius) var(--overlay-radius) at 50% var(--overlay-center-y),
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.15) 40%,
      rgba(0,0,0,0) 100%
    ),
    radial-gradient(900px 500px at 20% 10%, rgba(77,163,255,.16), transparent 55%),
    radial-gradient(800px 500px at 85% 25%, rgba(109,220,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-repeat: no-repeat;
}

#GameCanvas{
  background: transparent !important;
}      

#IntroOverlay{
  background: transparent !important;
}


#pfs-stage,
#GameDiv,
#Cocos3dGameContainer,
#IntroOverlay,
#GameCanvas{
  position: absolute;
  inset: 0;              
  width: auto;
  height: calc(var(--vh) * 100);  
}
#pfs-stage{ position: fixed; }