/* Clueffy: the Monkey Business jungle. Sky and treetops up top, everything else on the jungle floor.
   The CLUEFFY blocks and their monkeys are the loud part; everything else stays plain. */
:root {
  --sky: #a1dbe6;        /* matches the sky in art/jungle.png */
  --floor: #244a2a;      /* matches the ground at the bottom of art/jungle.png */
  --floor-deep: #193620;
  --leaf: #cde77f;
  --panel: #fff8e6;
  --bark: #3b2a16;       /* text on panels and sky */
  --bark-soft: #5c4224;  /* 8:1 on panel */
  --banana: #ffcf3f;
  --banana-shadow: #d08a1c;
  --focus: #e0458a;
  --title: "Jersey 10", system-ui, sans-serif;
  --body: "Pixelify Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--floor); color: var(--bark); font: 17px/1.5 var(--body); }
img { image-rendering: pixelated; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-family: var(--title); font-size: 1.2em; line-height: 1; }
.top, .hero, .ground > *, .official { max-width: 1040px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }

/* ---------- Sky ---------- */
.sky { position: relative; background: var(--sky); overflow: hidden; }
.top { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding-top: 10px; }
.ig { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
      color: var(--bark); font-weight: 600; text-decoration: none; }
.ig svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

.hero { --tile: clamp(40px, 11vw, 96px); position: relative; z-index: 1; padding-top: 8px; padding-bottom: 10px; }
h1 { margin: 0 0 calc(var(--tile) * .65 + 22px); }  /* room for the hanging monkey */
.tiles { display: flex; gap: clamp(5px, 1.4vw, 12px); padding-top: calc(var(--tile) * .65); }
.tile {
  position: relative; display: grid; place-items: center; width: var(--tile); aspect-ratio: 1;
  background: var(--banana); color: var(--bark);
  border: clamp(3px, .6vw, 4px) solid var(--bark); border-radius: 6px;
  box-shadow: inset 0 -6px 0 var(--banana-shadow), 0 6px 0 var(--bark);
  font: 400 calc(var(--tile) * .86)/1 var(--title);
  animation: drop .45s steps(6) both; animation-delay: calc(var(--i) * 80ms);
}
.tile.soft { background: var(--panel); box-shadow: inset 0 -6px 0 #e7c98f, 0 6px 0 var(--bark); }
@keyframes drop { from { transform: translateY(-60px); opacity: 0; } }

/* Monkey sitting on top of a tile, and one hanging upside down underneath another */
.sitter { position: absolute; bottom: calc(100% + 1px); left: 0; width: 100%; height: auto; }
.hanger { position: absolute; top: calc(100% + 6px); left: 50%; width: 100%; transform-origin: 50% -10px;
          animation: dangle 2.2s ease-in-out .9s both; }
.hanger::before { content: ""; position: absolute; left: 14%; bottom: 100%; width: 4px; height: 12px; background: #763517; }
.hanger img { display: block; width: 100%; height: auto; transform: scaleY(-1); }
@keyframes dangle {
  0% { transform: translateX(-50%) rotate(14deg); } 30% { transform: translateX(-50%) rotate(-9deg); }
  60% { transform: translateX(-50%) rotate(5deg); } 100% { transform: translateX(-50%) rotate(0); }
}

/* Vine swingers: each has its own spot, vine length and timing */
.swinger { position: absolute; top: 0; left: var(--x); z-index: 1; width: var(--w, 88px);
           transform-origin: 50% 0; animation: swing var(--t, 2.8s) ease-in-out var(--d, .3s) both; }
/* The tiles fill most of the width, so swingers stay above them or off to the right on wide screens. */
.s1 { --x: 40%; --len: 16px; --w: 52px; }
.s2 { --x: 77%; --len: 200px; --t: 3.2s; --d: .6s; display: none; }
.s3 { --x: 86%; --len: 110px; --t: 2.5s; --d: .9s; display: none; }
@media (min-width: 900px) { .s1 { --x: 44%; --len: 14px; --w: 72px; } }
@media (min-width: 1200px) { .s2, .s3 { display: block; } }
.vine { display: block; width: 6px; height: var(--len); margin: 0 auto;
        background: repeating-linear-gradient(#3f7a2c 0 10px, #2c5a20 10px 14px); }
.swinger .monkey { display: block; width: var(--w, 88px); height: auto; margin: -8px auto 0; transform: rotate(-90deg); }
@keyframes swing {
  0% { transform: rotate(38deg); } 25% { transform: rotate(-24deg); } 50% { transform: rotate(13deg); }
  75% { transform: rotate(-5deg); } 100% { transform: rotate(0); }
}

.intro { margin: 0 0 18px; max-width: 30em; font-size: 19px; }
.follow, .play, .more {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px;
  background: var(--banana); color: var(--bark); text-decoration: none;
  border: 3px solid var(--bark); border-radius: 4px;
  box-shadow: inset 0 -5px 0 var(--banana-shadow), 0 4px 0 var(--bark);
  font-weight: 700; font-size: 18px;
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.follow:hover, .more:hover { transform: translateY(-2px); }
.follow:active, .more:active { transform: translateY(3px); box-shadow: inset 0 -5px 0 var(--banana-shadow), 0 1px 0 var(--bark); }
.jungle { height: clamp(150px, 26vw, 248px); background: url(art/jungle.png) repeat-x left bottom / auto 100%;
          image-rendering: pixelated; margin-top: -10px; }

/* ---------- Jungle floor ---------- */
.ground { color: var(--panel); padding-bottom: 8px; }
.ground > section { padding-top: 34px; padding-bottom: 14px; }
h2 { margin: 0 0 4px; font: 400 42px/1 var(--title); color: var(--banana); }
.sub { margin: 0 0 22px; color: var(--leaf); }

/* Top 3: ranked cards */
.podium { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: n; }
.podium li { counter-increment: n; }
.pick {
  position: relative; display: grid; align-items: center; gap: 2px 14px;
  grid-template-columns: 104px 1fr auto; grid-template-areas: "thumb name play" "thumb count play";
  padding: 10px 12px 10px 10px; min-height: 80px;
  background: var(--panel); color: var(--bark); text-decoration: none;
  border: 4px solid var(--bark); border-radius: 6px; box-shadow: 0 6px 0 var(--floor-deep);
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.pick:hover { transform: translateY(-2px); }
.pick:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--floor-deep); }
.pick::before {
  content: counter(n); position: absolute; top: -16px; left: -10px;
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--bark); color: var(--banana); border-radius: 4px;
  font: 400 30px/1 var(--title);
}
.podium li:first-child .pick::before { background: var(--banana); color: var(--bark); box-shadow: 0 0 0 3px var(--bark); }
.pick .thumb { grid-area: thumb; }
.pick .name { grid-area: name; align-self: end; font-size: 20px; font-weight: 700; line-height: 1.2; }
.pick .count { grid-area: count; align-self: start; color: var(--bark-soft); font-size: 15px; }
.pick .play { grid-area: play; min-height: 44px; padding: 0 14px; font-size: 17px; box-shadow: inset 0 -4px 0 var(--banana-shadow); }
@media (min-width: 760px) {
  .podium { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .pick { grid-template-columns: 1fr; grid-template-areas: "thumb" "name" "count" "play"; align-content: start; height: 100%; padding: 14px; }
  .pick .play { justify-self: start; margin-top: 10px; }
}

/* Game logos sit in a chunky pixel 'screen' so they match the art around them */
.thumb { display: block; padding: 3px; background: var(--bark); border-radius: 4px; box-shadow: inset 0 0 0 1px #6b4c2a; }
.thumb img, .thumb .nologo { border-radius: 1px; }
.thumb img, .nologo { display: block; width: 100%; height: auto; aspect-ratio: 600 / 315; object-fit: cover; image-rendering: auto; }
.nologo { display: grid; place-items: center; font: 400 32px var(--title); color: var(--panel); }

/* Latest videos: a sideways row of phone-shaped players */
.reels { list-style: none; margin: 0 -16px; padding: 4px 16px 14px; display: flex; gap: 16px;
         overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-color: var(--banana) var(--floor-deep); }
.reel { flex: 0 0 clamp(200px, 56vw, 250px); scroll-snap-align: start; }
.reel video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #0f2414;
              border: 4px solid var(--bark); border-radius: 6px; box-shadow: 0 6px 0 var(--floor-deep); }
.reel p { margin: 10px 2px 0; }
.reel span { color: var(--leaf); }
.more { margin-top: 10px; font-size: 17px; }

/* Every game: a quiet shelf */
.shelf { list-style: none; margin: 0; padding: 0 0 34px; display: grid; gap: 12px;
         grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.chip { display: flex; flex-direction: column; gap: 6px; padding: 8px; height: 100%;
        background: var(--floor-deep); color: var(--panel); text-decoration: none;
        border: 2px solid #3f6b3c; border-radius: 4px; transition: border-color .15s ease-out, transform .15s ease-out; }
.chip:hover { border-color: var(--banana); transform: translateY(-2px); }
.chip .thumb { background: #0f2414; box-shadow: inset 0 0 0 1px #3f6b3c; }
.chip .name { padding: 0 2px 2px; font-weight: 600; font-size: 15px; }

.official { padding-top: 26px; padding-bottom: 44px; border-top: 4px solid var(--floor-deep); color: var(--leaf); font-size: 15px; }
.official p { max-width: 42em; }
.official strong { color: var(--panel); }
.credits { font-size: 13px; opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .tile, .hanger, .swinger { animation: none; }
  .hanger { transform: translateX(-50%); }
  .pick:hover, .pick:active, .chip:hover, .follow:hover, .follow:active, .more:hover, .more:active { transform: none; }
  .pick, .chip, .follow, .more { transition: none; }
}

.on-ig { color: var(--banana); font-size: 15px; }