/* =========================================================
   FamGames — interface polish
   Floating squircle nav, squircle marquee, the premium library
   button, the library's sliding tier control + swipeable pages,
   and the shared physics feel (elastic pulls, spring settles).
   Loaded last so it can refine earlier rules.
========================================================= */

:root{
  --fg-spring:cubic-bezier(.16,1,.3,1);
  --fg-sq:22px;
}

/* ---------- 1. Floating squircle nav ---------- */

.site-nav{
  top:12px;
  margin-top:12px;
  height:66px;
  padding:0 10px 0 14px;
  border-radius:var(--fg-sq);
  border:1px solid rgba(121,219,168,.13);
  border-bottom-color:rgba(121,219,168,.08);
  background:
    linear-gradient(180deg, rgba(16,42,31,.74), rgba(6,20,14,.66));
  -webkit-backdrop-filter:blur(18px) saturate(150%);
          backdrop-filter:blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(220,255,238,.07),
    0 1px 0 rgba(0,0,0,.25),
    0 18px 44px -22px rgba(0,0,0,.7),
    0 0 0 0 rgba(64,201,133,0);
  transition:
    box-shadow .6s var(--fg-spring),
    border-color .6s var(--fg-spring),
    background .6s var(--fg-spring),
    transform .7s var(--fg-spring);
  transform:translate3d(0,0,0);
}
.site-nav.fg-floating{
  border-color:rgba(121,219,168,.2);
  background:linear-gradient(180deg, rgba(14,38,28,.84), rgba(5,17,12,.78));
  box-shadow:
    inset 0 1px 0 rgba(220,255,238,.09),
    0 24px 60px -24px rgba(0,0,0,.85),
    0 10px 40px -26px rgba(64,201,133,.55);
  transform:translate3d(0,0,0) scale(.992);
}
@supports (corner-shape:squircle){
  .site-nav{ corner-shape:squircle; border-radius:40px; }
}
/* soft light along the top edge so the bar reads as a floating object */
.site-nav{ isolation:isolate; }
.site-nav::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(60% 120% at 50% -40%, rgba(121,219,168,.12), transparent 70%);
  opacity:.9;
}
/* the drop-down menu belongs to the bar, so it gets the same shape */
.nav-links{ border-radius:20px; }

@media (max-width:1060px){
  .site-nav{ top:10px; margin-top:10px; height:60px; padding:0 8px 0 12px; border-radius:20px; }
}
@media (max-width:680px){
  .site-nav{ top:8px; margin-top:8px; height:58px; border-radius:19px; }
  .nav-links{ top:66px; }
}
html.fg-playing .site-nav{ display:none; }

/* ---------- 2. Squircle marquee ---------- */

.marquee{
  position:relative;
  width:min(1180px, calc(100% - 32px));
  max-width:calc(100% - 32px);
  margin:30px auto;
  border:1px solid rgba(121,219,168,.16) !important;
  border-radius:28px;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg, rgba(13,36,26,.78), rgba(4,17,12,.7)) !important;
  box-shadow:
    inset 0 1px 0 rgba(220,255,238,.07),
    0 22px 60px -30px rgba(0,0,0,.8),
    0 0 50px -28px rgba(64,201,133,.5);
}
@supports (corner-shape:squircle){
  .marquee{ corner-shape:squircle; border-radius:48px; }
}
/* the words fade out before they reach the rounded ends */
.marquee::before,
.marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:90px;
  z-index:2;
  pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg, rgba(8,26,18,1), rgba(8,26,18,0)); }
.marquee::after{ right:0; background:linear-gradient(-90deg, rgba(8,26,18,1), rgba(8,26,18,0)); }
.marquee-track{ padding:17px 0; }
@media (max-width:680px){
  .marquee{ margin:20px auto; border-radius:22px; width:calc(100% - 28px); max-width:calc(100% - 28px); }
  .marquee::before, .marquee::after{ width:48px; }
}

/* ---------- 3. Shared physics buttons ---------- */
/* JS drives the transform (spring lift, press, elastic pull), CSS handles light. */

[data-elastic]{
  --ex:0px; --ey:0px; --es:1;
  transform:translate3d(var(--ex), var(--ey), 0) scale(var(--es)) !important;
  transition:box-shadow .45s var(--fg-spring), background .45s var(--fg-spring), border-color .45s var(--fg-spring), color .3s, filter .45s !important;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
  will-change:transform;
}

/* ---------- 4. Premium library button ---------- */

.library-btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  gap:14px;
  min-height:58px;
  padding:0 26px 0 14px;
  border-radius:999px;
  border:1px solid rgba(121,219,168,.32) !important;
  color:#eafff4;
  font-size:16px;
  letter-spacing:-.01em;
  background:
    linear-gradient(135deg, rgba(73,201,137,.28) 0%, rgba(24,74,52,.55) 45%, rgba(8,28,20,.75) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(220,255,238,.16),
    inset 0 -10px 24px -14px rgba(0,0,0,.5),
    0 18px 44px -20px rgba(64,201,133,.55),
    0 0 0 0 rgba(64,201,133,0);
}
/* light sweep that follows the cursor */
.library-btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:inherit;
  background:radial-gradient(160px 90px at var(--mx, 50%) var(--my, 50%), rgba(140,255,200,.32), transparent 70%);
  opacity:0;
  transition:opacity .5s var(--fg-spring);
}
/* gradient rim */
.library-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg, rgba(160,255,210,.75), rgba(64,201,133,.05) 40%, rgba(64,201,133,.05) 60%, rgba(160,255,210,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events:none;
  opacity:.55;
  transition:opacity .5s var(--fg-spring);
}
.library-btn:hover,
.library-btn:focus-visible{
  border-color:rgba(140,255,200,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(220,255,238,.22),
    inset 0 -10px 24px -14px rgba(0,0,0,.45),
    0 22px 54px -18px rgba(64,201,133,.75),
    0 0 70px -10px rgba(64,201,133,.65);
}
.library-btn:hover::before,
.library-btn.fg-pressing::before{ opacity:1; }
.library-btn:hover::after{ opacity:1; }
.library-btn .lb-arrow{
  display:inline-block;
  transition:transform .6s var(--fg-spring);
}
.library-btn:hover .lb-arrow{ transform:translateX(4px); }

/* the mini die: a real little cube that rolls on a spring */
.mini-die{
  --s:30px;
  position:relative;
  width:var(--s);
  height:var(--s);
  flex:none;
  perspective:220px;
}
.mini-die-cube{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx, -22deg)) rotateY(var(--ry, 32deg)) rotateZ(var(--rz, 0deg));
}
.mini-die-cube i{
  position:absolute;
  inset:0;
  border-radius:5px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.3), transparent 50%),
    linear-gradient(150deg, #5fe0a3, #2a9a63);
  border:1px solid rgba(220,255,238,.45);
  box-shadow:inset 0 0 6px rgba(0,40,20,.3), 0 0 0 .5px #2a9a63;
}
.mini-die-cube i::before{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
}
.mini-die-cube i:nth-child(1){ transform:translateZ(calc(var(--s) / 2)); }
.mini-die-cube i:nth-child(2){ transform:rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.mini-die-cube i:nth-child(3){ transform:rotateY(90deg) translateZ(calc(var(--s) / 2)); filter:brightness(.85); }
.mini-die-cube i:nth-child(4){ transform:rotateY(-90deg) translateZ(calc(var(--s) / 2)); filter:brightness(.85); }
.mini-die-cube i:nth-child(5){ transform:rotateX(90deg) translateZ(calc(var(--s) / 2)); filter:brightness(1.1); }
.mini-die-cube i:nth-child(6){ transform:rotateX(-90deg) translateZ(calc(var(--s) / 2)); filter:brightness(.7); }
/* pips (1, 6, 3, 4, 5, 2) */
.mini-die-cube i::before{ --p:radial-gradient(circle, #06301b 0 2.4px, transparent 3px); }
.mini-die-cube i:nth-child(1)::before{ background:var(--p) 50% 50% / 8px 8px no-repeat; }
.mini-die-cube i:nth-child(2)::before{ background:var(--p) 28% 24% / 8px 8px no-repeat, var(--p) 28% 50% / 8px 8px no-repeat, var(--p) 28% 76% / 8px 8px no-repeat, var(--p) 72% 24% / 8px 8px no-repeat, var(--p) 72% 50% / 8px 8px no-repeat, var(--p) 72% 76% / 8px 8px no-repeat; }
.mini-die-cube i:nth-child(3)::before{ background:var(--p) 24% 24% / 8px 8px no-repeat, var(--p) 50% 50% / 8px 8px no-repeat, var(--p) 76% 76% / 8px 8px no-repeat; }
.mini-die-cube i:nth-child(4)::before{ background:var(--p) 28% 28% / 8px 8px no-repeat, var(--p) 72% 28% / 8px 8px no-repeat, var(--p) 28% 72% / 8px 8px no-repeat, var(--p) 72% 72% / 8px 8px no-repeat; }
.mini-die-cube i:nth-child(5)::before{ background:var(--p) 26% 26% / 8px 8px no-repeat, var(--p) 74% 26% / 8px 8px no-repeat, var(--p) 50% 50% / 8px 8px no-repeat, var(--p) 26% 74% / 8px 8px no-repeat, var(--p) 74% 74% / 8px 8px no-repeat; }
.mini-die-cube i:nth-child(6)::before{ background:var(--p) 30% 30% / 8px 8px no-repeat, var(--p) 70% 70% / 8px 8px no-repeat; }
.mini-die-shadow{
  position:absolute;
  left:12%;
  right:12%;
  bottom:-7px;
  height:6px;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.45), transparent);
  transform:scaleX(var(--shadow, 1));
}
.mini-die-glow{
  position:absolute;
  inset:-60%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(120,255,190,.35), transparent);
  opacity:var(--glow, .25);
  pointer-events:none;
}

/* ---------- 5. Library: sliding tier control ---------- */

.lib-filters{
  position:sticky;
  top:92px;
  isolation:isolate;
  display:inline-grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:0;
  padding:5px;
  border-radius:999px;
  border:1px solid rgba(121,219,168,.16);
  background:linear-gradient(180deg, rgba(14,38,28,.86), rgba(5,18,12,.86));
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(220,255,238,.06), 0 16px 40px -22px rgba(0,0,0,.8);
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  cursor:pointer;
  transition:box-shadow .5s var(--fg-spring), border-color .5s var(--fg-spring);
}
.lib-filters:hover{
  border-color:rgba(121,219,168,.3);
  box-shadow:inset 0 1px 0 rgba(220,255,238,.08), 0 16px 40px -22px rgba(0,0,0,.8), 0 0 46px -16px rgba(64,201,133,.55);
}
.lib-filters button{
  position:relative;
  z-index:1;
  min-width:86px;
  padding:10px 18px;
  border-radius:999px;
  background:none !important;
  color:var(--muted);
  font-weight:650;
  font-size:14px;
  white-space:nowrap;
  transition:color .35s var(--fg-spring);
  -webkit-tap-highlight-color:transparent;
}
.lib-filters button b{ transition:color .35s var(--fg-spring); }
.lib-filters button.on{ background:none !important; color:#03140b; }
.lib-filters button.on b{ color:#0b3a22; }
.lib-filters button:not(.on):hover{ color:var(--text); }
@supports (color:color-mix(in srgb, red 50%, blue)){
  .lib-filters button,
  .lib-filters button.on{
    transition:none;
    color:color-mix(in srgb, #03140b calc(var(--on, 0) * 100%), #91a29a);
  }
  .lib-filters button b,
  .lib-filters button.on b{
    transition:none;
    color:color-mix(in srgb, #0b3a22 calc(var(--on, 0) * 100%), #5f716a);
  }
  .lib-filters button:not(.on):hover{ color:color-mix(in srgb, #03140b calc(var(--on, 0) * 100%), #e8f4ee); }
}
.seg-pill{
  position:absolute;
  z-index:0;
  top:5px;
  bottom:5px;
  left:0;
  width:80px;
  border-radius:999px;
  pointer-events:none;
  transform-origin:50% 50%;
  background:linear-gradient(135deg, #8ff0bf 0%, #49c989 45%, #2a9e66 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -6px 14px -8px rgba(0,60,30,.5),
    0 8px 22px -8px rgba(64,201,133,.75),
    0 0 0 0 rgba(64,201,133,0);
  transition:box-shadow .45s var(--fg-spring), filter .45s var(--fg-spring);
  will-change:transform, width;
}
.lib-filters:hover .seg-pill,
.lib-filters.fg-holding .seg-pill{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -6px 14px -8px rgba(0,60,30,.45),
    0 10px 30px -8px rgba(64,201,133,.95),
    0 0 40px -6px rgba(110,240,180,.7);
}
.lib-filters.fg-holding .seg-pill{ filter:brightness(1.08) saturate(1.1); }
.lib-filters:focus-visible{ outline:2px solid var(--green2); outline-offset:3px; }

@media (max-width:640px){
  .lib-filters{ top:76px; width:100%; display:grid; }
  .lib-filters button{ min-width:0; padding:10px 6px; font-size:13px; }
}

/* ---------- 6. Library: swipeable tier pages ---------- */

.lib-pager{
  position:relative;
  /* room for card shadows + hover lift inside the clip */
  margin:-26px -24px -46px;
  padding:26px 24px 46px;
  overflow:hidden;
  touch-action:pan-y;
  contain:layout paint;
}
.lib-track{
  display:flex;
  align-items:flex-start;
  gap:60px;
  will-change:transform;
}
.lib-page{
  flex:0 0 100%;
  min-width:0;
}
.lib-page .lib-grid{ margin:0; }
.lib-page-empty{
  padding:60px 20px;
  text-align:center;
  color:var(--muted);
}
.lib-pager.fg-dragging{ cursor:grabbing; }
.lib-pager.fg-dragging .lib-card{ pointer-events:none; }
.lib-instant, .lib-instant *{ transition:none !important; }

@media (max-width:640px){
  .lib-pager{ margin:-20px -14px -40px; padding:20px 14px 40px; }
  .lib-track{ gap:28px; }
}

/* the Pro banner's button */
#libUnlock{
  position:relative;
  overflow:hidden;
}

/* ---------- 7. Cards that tilt into the screen (modals) ---------- */

.auth-panel,
.pl-modal-card{
  transform-origin:50% 60%;
  backface-visibility:hidden;
}
/* JS plays the entrance now — switch off the old one-shot keyframes */
.auth-modal .auth-panel,
.pl-modal .pl-modal-card{ animation:none !important; }
.fg-modal-anim{ will-change:opacity, backdrop-filter; }
.fg-modal-anim .auth-panel,
.fg-modal-anim .pl-modal-card{ will-change:transform, opacity, filter; }

/* store: spotlight when arriving from "Unlock Pro" */
.store-pro.fg-arrive{
  animation:fg-arrive 1.6s var(--fg-spring) both;
}
@keyframes fg-arrive{
  0%{ box-shadow:0 0 0 0 rgba(121,219,168,0), 0 40px 90px rgba(0,0,0,.4); transform:scale(.97); }
  30%{ box-shadow:0 0 0 3px rgba(121,219,168,.65), 0 0 90px -10px rgba(64,201,133,.8); transform:scale(1.01); }
  100%{ box-shadow:0 0 0 1px rgba(121,219,168,.25), 0 40px 90px rgba(0,0,0,.4); transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .site-nav, .seg-pill, .library-btn{ transition:none; }
}