/* =========================================
   GLOBAL
========================================= */

:root{
  --bg:#ffffff;
  --text:#1a1a1a;
  --muted:rgba(26,26,26,.65);
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
  margin:0;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  overflow:hidden;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

/* =========================================
   LOADING SCREEN
========================================= */

#loader-screen{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#fff;
  background-image:
    radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.5px),
    radial-gradient(rgba(0,0,0,.10) 1px, transparent 1px);
  background-size:300px 300px, 30px 30px;
  background-position:0 0, 0 0;
  transition:opacity .5s ease, visibility .5s ease;
}
#loader-screen.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.loader-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

.loader-icon{
  width:64px;
  height:64px;
  animation: loaderSpin 1s linear infinite;
}

.loader-text{
  margin:0;
  font-size:14px;
  color:var(--muted);
  min-height:1.2em;
}

@keyframes loaderSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* =========================================
   HUD — Apple Liquid Glass
========================================= */

#hud{
  position:fixed;
  top:20px;
  left:20px;
  z-index:99998;

  padding:20px 30px;
  border-radius:16px;

  /* glass base */
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);

  /* crisp but soft edge */
  border: 1px solid rgba(255,255,255,.38);

  /* depth */
  box-shadow:
    0 18px 45px rgba(0,0,0,.10),
    0 2px 10px rgba(0,0,0,.06);

  /* helps the highlights look “wet” */
  isolation: isolate;
  overflow: hidden;
}

/* glossy top sheen + subtle side lighting */
#hud::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;

  background:
    radial-gradient(120% 140% at 15% 10%,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.18) 32%,
      rgba(255,255,255,0) 60%
    ),
    radial-gradient(120% 140% at 85% 0%,
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,0) 55%
    ),
    linear-gradient(to bottom,
      rgba(255,255,255,.18),
      rgba(255,255,255,.08) 28%,
      rgba(255,255,255,.04) 55%,
      rgba(0,0,0,.02)
    );

  mix-blend-mode: screen;
  opacity: .95;
}

/* inner shadow + micro texture (noise) */
#hud::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  /* inner shadow + edge darkening */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -14px 22px rgba(0,0,0,.10),
    inset 0 0 0 1px rgba(255,255,255,.10);

  /* tiny noise (SVG turbulence) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: .10;
}

/* keep your content above the glass layers */
#hud > *{
  position: relative;
  z-index: 1;
}

/* optional: slightly “wet” text rendering inside glass */
#hud{
  color: rgba(26,26,26,.92);
  font-size:12px;
  font-family:inherit;
}
#hud .hint{
  color: rgba(26,26,26,.62);
}

.brand-lockup{
  display:flex;
  align-items:center;
  gap:8px;
}

.sound-logo-link{
  display:inline-block;
  color:inherit;
  text-decoration:none;
}
.sound-logo-link:hover{ opacity:.85; }
.sound-logo{
  height:36px;
  width:auto;
  display:block;
  padding-bottom:8px;
}

#hud .hint{
  color:var(--muted);
  margin-top:4px;
}

.leaderboard-section{
  position:relative;
}
.leaderboard-title{
  margin-top:12px;
  padding-top:8px;
  padding-bottom:4px;
  border-top:1px solid rgba(26,26,26,.12);
  color:var(--muted);
}
.leaderboard{
  margin-top:4px;
}
.leaderboard-toggle{
  display:none;
  width:100%;
  margin-top:8px;
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  touch-action:manipulation;
  justify-content:center;
  align-items:center;
}
.leaderboard-toggle-icon{
  display:block;
  transition:transform .2s ease;
}
.leaderboard-section.is-collapsed .leaderboard-toggle-icon{
  transform:rotate(180deg);
}
.leaderboard:empty{
  display:none;
}
.leaderboard-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:4px 0;
  cursor:pointer;
  border-radius:4px;
  transition:background .15s ease;
}
.leaderboard-item:hover{
  background:rgba(0,0,0,.06);
}
.leaderboard-filename{
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:140px;
}
.leaderboard-count{
  color:#e74c3c;
  flex-shrink:0;
}
.leaderboard-empty{
  color:var(--muted);
  font-style:italic;
}

.coord-display{
  position:fixed;
  top:20px;
  right:20px;
  z-index:99998;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.zoom-controls{
  display:none;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  position:fixed;
  bottom:60px;
  left:50%;
  transform:translateX(-50%);
  z-index:99998;
  gap:32px;
}
.zoom-controls button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  touch-action:manipulation;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 18px 45px rgba(0,0,0,.10), 0 2px 10px rgba(0,0,0,.06);
  color:rgba(26,26,26,.92);
  font-size:20px;
  font-family:inherit;
  font-weight:400;
  line-height:1;
  cursor:pointer;
  transition:opacity .15s ease;
}
.zoom-controls .zoom-icon{
  display:block;
  object-fit:contain;
  filter:brightness(0) saturate(100%);
  opacity:.92;
}
.zoom-controls button:hover{
  opacity:.85;
}
.zoom-controls button:active{
  opacity:.7;
}

/* =========================================
   BACKDROP
========================================= */

#backdrop{
  position:fixed;
  inset:0;
  z-index:9000;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(8px);
}

/* =========================================
   VIEWPORT + WORLD
========================================= */

#viewport{
  width:100vw;
  height:100vh;
  overflow:scroll;
  overscroll-behavior:none;
  cursor:grab;
}
#viewport::-webkit-scrollbar{ width:0; height:0; }

#world{
  position:relative;
  width:8000px;
  height:8000px;
}

/* =========================================
   DOT PAPER
========================================= */

.paper-dots{
  background-color:#fff;
  background-image:
    radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.5px),
    radial-gradient(rgba(0,0,0,.10) 1px, transparent 1px);
  background-size:300px 300px, 30px 30px;
  background-position:0 0, 0 0;
}

/* =========================================
   COVER CARD
========================================= */

.cover{
  position:absolute;
  width:280px;
  height:280px;
  overflow:visible;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(22,22,22,.15);
  user-select:none;
  -webkit-user-drag:none;
  isolation:isolate; /* important for blend modes */
  background:#1a1a1a;
  transition:box-shadow .25s ease;
}
.cover.img-loading img{
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

.cover:focus,
.cover.focused{
  outline:none;
  z-index:100;
}

.cover-vote-stack{
  position:absolute;
  top:90%;
  right:-48px;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  z-index:4;
  pointer-events:none;
}
.cover.is-active .cover-vote-stack{
  display:none;
}
.cover-crown{
  font-size:28px;
  line-height:1;
  opacity:0;
}
.cover.is-voted .cover-crown{
  opacity:1;
}
.cover-vote-count{
  min-width:24px;
  height:22px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:600;
  color:#e74c3c;
  background:rgba(255,255,255,.9);
  border-radius:11px;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.cover-vote-count:not(.has-votes){
  opacity:.5;
  color:var(--muted);
}

.cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  position:relative;
  z-index:1;
  transition:opacity .3s ease;
}

/* Full-res clarity in active/enlarged mode - render at 2x and scale down for sharper tilt */
.cover.is-active img{
  position:absolute;
  top:50%;
  left:50%;
  width:200%;
  height:200%;
  margin-left:-100%;
  margin-top:-100%;
  object-fit:cover;
  object-position:center;
  image-rendering: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0) scale(0.5);
  transform-origin: center center;
}

/* While swapping from thumb -> full-res, avoid “pixelated” look */
.cover.hires-loading img{
  image-rendering: auto !important;
}


/* =========================================
   TOOLTIP
========================================= */

.cover-tooltip{
  position:absolute;
  color:#1a1a1a;
  background:rgba(255,255,255,.95);
  padding:6px 12px;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
  pointer-events:none;
  z-index:200;
  transform:translateX(-50%);
  left:50%;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  border:1px solid rgba(0,0,0,.08);
  border-radius:8px;
}

/* =========================================
   HOLO LAYERS (exist but hidden unless active)
========================================= */

.cover .shine{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
}

/* =========================================
   SPECULAR HIGHLIGHT (dynamic glossy light)
========================================= */

.cover .spec{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
  mix-blend-mode:screen;
  filter: blur(.15px) contrast(1.05);
}

/* Only show in focused/active mode */
.cover.is-active .spec{
  opacity:1;
}

.cover .spec{
  background:
    radial-gradient(
      circle 140px at var(--hx, 50%) var(--hy, 50%),
      rgba(255,255,255, calc(var(--hi, .18) * 1.25)) 0%,
      rgba(255,255,255, calc(var(--hi, .18) * .55)) 18%,
      rgba(255,255,255, calc(var(--hi, .18) * .18)) 35%,
      transparent 62%
    ),
    radial-gradient(
      circle 260px at calc(var(--hx, 50%) + 10%) calc(var(--hy, 50%) - 10%),
      rgba(255,255,255, calc(var(--hi, .18) * .22)) 0%,
      transparent 70%
    );
}

/* =========================================
   ACTIVE MODE
========================================= */

.cover.is-active{
  z-index:9501;
  overflow:hidden;
  transform-style:preserve-3d;
  transform-origin:center center;
  perspective: 900px;
  will-change:transform;
  box-shadow:0 35px 95px rgba(0,0,0,.45);
  touch-action:none;
}

/* =========================================
   VMAX HOLO EFFECT
   - only visible in .is-active
   - cursor-driven rainbow foil
========================================= */

.cover .shine{
  --space: 1.5%;
  --angle: 133deg;
  --imgsize: 28% 15%;

  background-image:
    url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/vmaxbg.webp"),
    repeating-linear-gradient(
      -33deg,
      rgba(206, 42, 36, 0.38) calc(var(--space) * 1),
      rgba(157, 170, 223, 0.38) calc(var(--space) * 2),
      rgba(45, 153, 146, 0.38) calc(var(--space) * 3),
      rgba(29, 151, 36, 0.38) calc(var(--space) * 4),
      rgba(181, 64, 228, 0.38) calc(var(--space) * 5),
      rgba(206, 42, 36, 0.38) calc(var(--space) * 6)
    ),
    repeating-linear-gradient(
      var(--angle),
      rgba(14, 21, 46, 0.22) 0%,
      hsla(180, 10%, 50%, 0.28) 2.5%,
      hsla(83, 50%, 35%, 0.28) 5%,
      hsla(180, 10%, 50%, 0.28) 7.5%,
      rgba(14, 21, 46, 0.22) 10%,
      rgba(14, 21, 46, 0.22) 15%
    ),
    radial-gradient(
      farthest-corner circle at var(--mx, 50%) var(--my, 50%),
      rgba(6, 218, 255, 0.35) 0%,
      rgba(38, 235, 127, 0.35) 25%,
      rgba(155, 78, 228, 0.35) 50%,
      rgba(228, 78, 90, 0.35) 75%
    );
  background-blend-mode: color-burn, screen, soft-light;
  background-size: var(--imgsize), 280% 280%, 180% 180%, 200% 200%;
  background-position: center, 0% var(--posy, 50%), var(--posx, 50%) var(--posy, 50%), var(--posx, 50%) var(--posy, 50%);

  mix-blend-mode: screen;
  filter: brightness(calc((var(--hyp, 0.25) * 0.2) + 0.75)) contrast(1.55) saturate(1.05);
}

/* show only in active mode */
.cover.is-active .shine{
  opacity: calc(0.38 + (var(--hyp, 0.25) * 0.45));
  animation: holoFlash .22s ease-out;
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes legendaryGalaxy{
  0%{
    background-position:
      0 0,0 0,0 0,0 0,
      0 0,0 0,0 0,0 0,
      0 0,0 0,0 0,0 0,
      50% 50%,
      0% 0%,
      center;
  }
  50%{
    background-position:
      18% 14%,-12% 22%,22% -14%,-14% -10%,
      10% 18%,-8% -12%,16% 10%,-18% 14%,
      14% -8%,-10% 18%,12% 16%,-16% -6%,
      55% 45%,
      20% 10%,
      center;
  }
  100%{
    background-position:
      0 0,0 0,0 0,0 0,
      0 0,0 0,0 0,0 0,
      0 0,0 0,0 0,0 0,
      50% 50%,
      0% 0%,
      center;
  }
}

@keyframes holoFlash{
  0%{ filter:brightness(1.1) saturate(1.2); }
  100%{ filter:brightness(calc((var(--hyp, 0.25) * 0.3) + 0.5)) contrast(2.5) saturate(0.6); }
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:600px){
  #hud{
    top: 15px;  
    left:30%;
    transform:translateX(-50%);
    padding:20px 20px 10px 20px;
    max-width:calc(100vw - 12px);
  }
  body.cover-active #hud{
    z-index:1;
  }
  .cover{ width:280px; height:280px; }
  .paper-dots{ background-size:180px 180px, 18px 18px; }
  #loader-screen{ background-size:180px 180px, 18px 18px; }
  .sound-logo{ height:30px; }
  .coord-display{
    font-size: 14px;
    top:auto;
    right:auto;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
  }
  .zoom-controls{
    display:flex;
  }
  body.cover-active .zoom-controls{
    z-index:8999;
  }
  .leaderboard-toggle{
    display:flex;
  }
  .leaderboard-section.is-collapsed .leaderboard-title,
  .leaderboard-section.is-collapsed .leaderboard{
    display:none;
  }
  .leaderboard-section.is-collapsed .leaderboard-toggle{
    margin-top:4px;
  }
}



@media (max-height:500px){
  #hud{ top:6px; padding:6px 8px; }
  .sound-logo{ height:26px; }
  #hud .hint{ margin-top:2px; }
}


/* =========================================
   HOLO / SPEC OVERRIDES
========================================= */
.cover { position:absolute; }
.cover img { position:relative; z-index:1; }
.cover .shine,
.cover .spec{
  z-index:2;
}

.cover.is-active .shine{
  opacity: calc(0.28 + (var(--hyp, 0.25) * 0.55)) !important;
}

.cover .shine{
  transform: translateZ(1px);
  will-change: background-position, filter, opacity;
  mask-image: radial-gradient(circle at 50% 50%, #000 65%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 65%, transparent 100%);
}

.cover .spec{
  z-index:3;
  transform: translateZ(2px);
  will-change: opacity, background;
}

.cover .spec{
  background:
    radial-gradient(
      circle 110px at var(--hx, 50%) var(--hy, 50%),
      rgba(255,255,255, calc(var(--hi, .18) * 1.45)) 0%,
      rgba(255,255,255, calc(var(--hi, .18) * .70)) 16%,
      rgba(255,255,255, calc(var(--hi, .18) * .25)) 34%,
      transparent 62%
    ),
    radial-gradient(
      circle 260px at calc(var(--hx, 50%) + 12%) calc(var(--hy, 50%) - 12%),
      rgba(255,255,255, calc(var(--hi, .18) * .18)) 0%,
      transparent 72%
    );
  mix-blend-mode: screen;
  filter: blur(.25px) contrast(1.12);
}

/* Optional: tiny edge “lamination” sheen on active card */
.cover.is-active::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  border-radius:0px; /* keep square unless you round cards */
  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,.22),
    transparent 25%,
    transparent 75%,
    rgba(255,255,255,.14)
  );
  mix-blend-mode: soft-light;
  opacity:.55;
}