/* =========================================================
   GAMEON — link hub
   Flat colour only. The guideline's colourways (p.5) and the
   creatives (p.9-11) are solid blocks, so nothing here uses a
   decorative gradient — depth comes from shadow and value steps.
   The one brand mark that IS a gradient (Instagram) keeps it,
   because that is its actual logo.
   ========================================================= */

/* Surfaces match the reference: flat neutral near-black page, flat
   dark-grey icon circles. Brand blue is reserved for the centre disc. */
:root{
  /* brand — GAMEON Short Guideline p.6 */
  --brand:      #00AFFF;   /* Bright Blue, Pantone 306 C  */
  --brand-deep: #00568B;   /* Venice Blue, Pantone 7462 C */

  /* surface */
  --ink:        #1B1C1F;   /* page              */
  --tile:       #2A2B2E;   /* icon circle       */
  --tile-hi:    #3A3B3F;   /* icon circle hover */
  --line:       rgba(255,255,255,.07);
  --text:       #FFFFFF;
  --body:       #B4B7BD;
  --muted:      #7C7F86;

  /* geometry — the centre is the mascot bust. Every radius is a multiple of its
     SEMI-height. The bust is near-square (trimmed aspect 0.871 w/h) and its
     bounding circle reaches 1.08 semi-heights — the hand tips, at 0.82 of the
     height — so the ring clears it at 1.10 in every direction as it turns.
     The envelope is 1.82 semi-heights, so --figure <= .549 x --stage. */
  --stage:      clamp(300px, 72vmin, 540px);
  --figure:     calc(var(--stage)  * .54);   /* mascot height */
  --t-lg:       calc(var(--figure) * .30);
  --t-md:       calc(var(--figure) * .24);
  --t-sm:       calc(var(--figure) * .19);

  --spin:       120s;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100svh;
  background:var(--ink);
  color:var(--text);
  font:400 16px/1.5 "Baloo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.page{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:
    calc(clamp(20px,4vh,40px) + env(safe-area-inset-top))
    calc(20px + env(safe-area-inset-right))
    calc(clamp(20px,3vh,32px) + env(safe-area-inset-bottom))
    calc(20px + env(safe-area-inset-left));
}

/* =========================================================
   STAGE + ORBIT
   ========================================================= */

.stage{
  position:relative;
  width:var(--stage); height:var(--stage);
  flex:none;
  display:grid; place-items:center;
}

/* ---------- centre figure ------------------------------- */

.core{
  position:relative;
  z-index:2;
  height:var(--figure);
  pointer-events:none;
}

.core__mascot{
  height:100%; width:auto;
  display:block;
  /* the source art is cropped at its lower edge, so soften that hard cut into
     the background. The hands sit at .82 of the height — fade below them. */
  -webkit-mask-image:linear-gradient(to bottom, #000 88%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 88%, transparent 100%);
  animation:hover-float 9s ease-in-out infinite;
}

/* ---------- ring --------------------------------------- */

.ring{
  position:absolute; inset:0; z-index:1;
  margin:0; padding:0; list-style:none;
  transform-origin:50% 50%;
  animation:spin var(--spin) linear infinite;
  will-change:transform;
}

/* A slot is a zero-size point in the cluster: --ad is its angle, --rd its
   radius as a multiple of the mascot's semi-height. Both are inline inputs
   mapped onto --a / --rr here, so the cluster scales as a single unit. */
.slot{
  --a:var(--ad);
  --rr:var(--rd);
  position:absolute; left:50%; top:50%;
  width:0; height:0;
  transform:rotate(var(--a)) translateY(calc(-1 * var(--rr) * var(--figure) / 2));
}

/* cancels the ring's rotation so tiles never tumble */
.despin{
  position:absolute; left:0; top:0; width:0; height:0; display:block;
  animation:spin-rev var(--spin) linear infinite;
  will-change:transform;
}

/* ---------- tiles --------------------------------------- */

.tile{
  --s:1;
  --t:var(--t-md);
  position:absolute; left:50%; top:50%;
  width:var(--t); height:var(--t);
  display:grid; place-items:center;
  /* translate centres it, then we undo the slot's own rotation */
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--a))) scale(var(--s));
  transition:transform .3s cubic-bezier(.2,.8,.25,1);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.tile--lg{ --t:var(--t-lg); }
.tile--md{ --t:var(--t-md); }
.tile--sm{ --t:var(--t-sm); }

.bob{
  display:grid; place-items:center;
  width:100%; height:100%;
  animation:bob 7s ease-in-out infinite;
  animation-delay:var(--d, 0s);
}

.face{
  width:100%; height:100%;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--tile);
  box-shadow:
    0 0 0 1px var(--line) inset,
    0 6px 16px -6px rgba(0,0,0,.65);
  transition:background-color .3s ease, box-shadow .3s ease;
}
.face svg{ width:52%; height:52%; overflow:visible; }
.face--x svg, .face--web svg{ width:47%; height:47%; }

/* One hover treatment for every tile, not seven coloured glows:
   lift, one value step lighter, brand-blue hairline. */
.tile:hover, .tile:focus-visible{ --s:1.14; }
.tile:focus-visible{ outline:none; }
.tile:hover .face,
.tile:focus-visible .face{
  background:var(--tile-hi);
  box-shadow:
    0 0 0 1px var(--brand) inset,
    0 8px 20px -6px rgba(0,0,0,.7);
}
.tile:focus-visible .face{ box-shadow:0 0 0 3px var(--brand); }

/* ---------- tile label ---------------------------------- */

.label{
  position:absolute; top:calc(100% + 9px); left:50%;
  transform:translate(-50%,4px);
  padding:4px 10px;
  border-radius:999px;
  background:var(--tile);
  box-shadow:0 0 0 1px var(--line) inset;
  color:var(--text);
  font:600 12px/1.2 "Baloo 2", sans-serif;
  letter-spacing:.02em;
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.tile:hover .label,
.tile:focus-visible .label{ opacity:1; transform:translate(-50%,0); }

/* ---------- hold the orbit while browsing --------------- */

.stage:hover .ring,        .stage:hover .despin,
.stage:focus-within .ring, .stage:focus-within .despin,
.stage.is-held .ring,      .stage.is-held .despin{
  animation-play-state:paused;
}

/* =========================================================
   IDENTITY
   ========================================================= */

.ident{ text-align:center; margin-top:clamp(0px,1.2vh,12px); }

.ident__logo{
  display:flex; justify-content:center;
  margin:0; line-height:0;
  color:var(--brand);
}

/* min. logo height is 30px per guideline p.4 — the clamp floor honours it */
.ident__logo svg{ width:clamp(148px,30vw,214px); height:auto; display:block; }

.ident__domain{
  display:inline-block;
  margin-top:10px;
  font:500 clamp(13px,3vw,15px)/1 "Baloo 2", sans-serif;
  color:var(--body);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);
  transition:color .2s ease, border-color .2s ease;
}
.ident__domain:hover,
.ident__domain:focus-visible{ color:var(--brand); border-bottom-color:var(--brand); }

.ident__tag{
  margin:15px auto 0;
  max-width:46ch;
  font-size:clamp(13.5px,3.2vw,15.5px);
  line-height:1.45;
  color:var(--body);
}

.save{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:18px;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:transparent;
  color:var(--text);
  font:600 14px/1 "Baloo 2", sans-serif;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.save svg{ width:17px; height:17px; }
.save:hover,
.save:focus-visible{
  border-color:var(--brand);
  color:var(--brand);
  background:rgba(0,175,255,.08);
}
.save:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }

.ident__hint{
  margin:14px 0 0;
  font-size:12px; font-weight:500;
  color:var(--muted);
}

.foot{
  margin-top:clamp(22px,5vh,52px);
  font-size:12px;
  color:var(--muted);
}

/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes spin     { from{ transform:rotate(0) } to{ transform:rotate(360deg)  } }
@keyframes spin-rev { from{ transform:rotate(0) } to{ transform:rotate(-360deg) } }
@keyframes bob      { 0%,100%{ transform:translateY(-4%) } 50%{ transform:translateY(4%) } }
@keyframes hover-float { 0%,100%{ transform:translateY(-1.4%) } 50%{ transform:translateY(1.4%) } }

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

   Phones keep the same scatter — angles, radii and the size
   hierarchy are all shared with desktop. Only --stage and the
   three size ratios change, so the composition reads identically,
   just smaller.
   ========================================================= */

@media (max-width:600px){
  :root{
    --stage: min(90vw, 400px);
    /* same scatter as desktop — only the two smaller tiles step up,
       so they stay near a 44px tap target */
    --t-md:  calc(var(--figure) * .27);
    --t-sm:  calc(var(--figure) * .23);
  }
  .page{ padding-left:14px; padding-right:14px; }
  .ident__tag{ max-width:34ch; }
}

/* landscape phones and short windows */
@media (max-height:560px){
  :root{ --stage:min(70vh,360px); }
  .ident__tag, .ident__hint, .foot{ display:none; }
}

/* touch devices have no hover — drop that half of the hint */
@media (hover:none){
  .hint-hover{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .ring, .despin, .bob, .core__mascot{ animation:none !important; }
  .tile{ transition:none; }
}