/* Fun Zone: the space mini-games. */
#funScreen { z-index: 12; }
.fun-card { width: min(720px, calc(100vw - 32px)); }
.fun-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 20px 0; }
.fun-tile {
  font: inherit; color: var(--ink); cursor: pointer; display: grid; gap: 6px; justify-items: center; text-align: center;
  padding: 20px 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07);
  transition: transform .15s, background .2s;
}
.fun-tile:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .13); }
.fun-tile:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.fun-tile .ft-icon { font-size: 44px; line-height: 1; }
.fun-tile b { font-size: 19px; }
.fun-tile span:last-child { font-size: 13px; color: var(--ink-dim); }
.fun-actions { margin-top: 16px; }

/* Planet Puzzle */
.puzzle-slots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: 16px 0; }
.puzzle-slots .sun { font-size: 40px; margin-right: 4px; }
.slot {
  width: 58px; height: 70px; border-radius: 14px; display: grid; place-items: center; align-content: center; gap: 2px;
  border: 2px dashed rgba(255, 255, 255, .25); font-size: 11px; font-weight: 800; color: var(--ink-dim);
}
.slot canvas { width: 40px; height: 40px; }
.slot.next { border-color: var(--gold); animation: slotPulse 1s ease-in-out infinite; }
.slot.filled { border-style: solid; border-color: var(--mint); background: rgba(143, 247, 207, .1); color: var(--ink); }
@keyframes slotPulse { 50% { box-shadow: 0 0 0 4px rgba(255, 211, 90, .35); } }
.puzzle-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 92px; }
.pool-btn {
  font: 700 12px var(--font); color: var(--ink); cursor: pointer; display: grid; justify-items: center; gap: 2px;
  width: 76px; padding: 8px 4px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07);
}
.pool-btn canvas { width: 48px; height: 48px; }
.pool-btn:hover { background: rgba(255, 255, 255, .14); }
.pool-btn:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.pool-btn.wiggle { animation: wiggle .45s ease; border-color: var(--pink); }
@keyframes wiggle { 20%, 60% { transform: translateX(-6px) rotate(-4deg); } 40%, 80% { transform: translateX(6px) rotate(4deg); } }

/* Weigh Me */
.weigh-label { display: block; margin-top: 12px; font-size: 17px; }
.weigh-label b { color: var(--gold); font-size: 22px; }
#weighInput { width: min(360px, 100%); margin: 10px auto 4px; display: block; accent-color: var(--gold); height: 28px; cursor: pointer; }
.weigh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 14px 0 6px; }
.weigh-item { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.weigh-item canvas { width: 52px; height: 52px; }
.weigh-item .wn { font-size: 13px; font-weight: 800; }
.weigh-item .wk { font-size: 20px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.weigh-item .wf { font-size: 11px; color: var(--ink-dim); line-height: 1.25; text-align: center; }
.weigh-item.home { outline: 2px solid var(--mint); }
@media (max-width: 520px) {
  .slot { width: 48px; height: 60px; }
  .slot canvas { width: 32px; height: 32px; }
}

/* Dress Up */
.dress-bani { display: flex; gap: 16px; align-items: center; margin: 14px 0; text-align: left; }
.bani-preview { flex: none; width: 96px; height: 110px; display: grid; place-items: center; border-radius: 20px; background: rgba(255, 255, 255, .06); }
.bani-preview svg { width: 72px; height: 86px; overflow: visible; }
.dress-col { display: grid; gap: 8px; flex: 1; }
.dress-label { display: block; text-align: left; margin-top: 6px; }
.dress-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dress-opt {
  font: 700 12px var(--font); color: var(--ink); cursor: pointer; display: grid; justify-items: center; gap: 2px;
  min-width: 84px; padding: 8px 6px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06);
}
.dress-opt .di { font-size: 26px; line-height: 1.1; }
.dress-opt[aria-checked="true"] { border-color: var(--mint); background: rgba(143, 247, 207, .16); }
.dress-opt:disabled { cursor: default; opacity: .55; }
.dress-opt .lock { font-size: 11px; color: var(--gold); }
.dress-opt:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
@media (max-width: 520px) { .dress-bani { flex-direction: column; } }

/* Alien Friends */
.alien-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 16px 0 6px; }
.alien-card { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.alien-card canvas { width: 76px; height: 76px; }
.alien-card b { font-size: 15px; }
.alien-card .ah { font-size: 11px; color: var(--ink-dim); }
.alien-card .aq { font-size: 11px; line-height: 1.3; text-align: center; color: var(--ink); }
.alien-card.missing canvas { filter: brightness(0) opacity(.35); }
.alien-card.missing b { color: var(--ink-dim); }

/* Star Pictures */
.sky-pick { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.sky-chip {
  font: 700 13px var(--font); color: var(--ink); cursor: pointer; padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06);
}
.sky-chip[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 211, 90, .14); }
.sky-chip:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.sky-board {
  position: relative; width: 100%; aspect-ratio: 10 / 7; margin: 12px 0 8px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #1d1850, #0a0820 75%); border: 1px solid rgba(255, 255, 255, .12);
}
.sky-dust { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; }
.sky-pic {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: min(38vw, 220px); line-height: 1;
  opacity: 0; transform: scale(.6); transition: opacity .8s, transform .8s cubic-bezier(.2, 1.4, .4, 1); pointer-events: none;
}
.sky-pic.show { opacity: .35; transform: none; }
.sky-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sky-lines line { stroke: #9fe8ff; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px #7fd8ff); }
.sky-star {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.sky-star .dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(200, 220, 255, .7); transition: transform .2s, background .2s; }
.sky-star .num { position: absolute; top: -8px; right: -6px; font: 800 13px var(--font); color: var(--ink-dim); }
.sky-star.next .dot { animation: starPulse 1s ease-in-out infinite; background: var(--gold); }
.sky-star.next .num { color: var(--gold); }
.sky-star.lit .dot { background: var(--gold); transform: scale(1.3); box-shadow: 0 0 16px 6px rgba(255, 211, 90, .75); }
.sky-star.wiggle { animation: wiggle .45s ease; }
.sky-star:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; border-radius: 50%; }
@keyframes starPulse { 50% { transform: scale(1.5); box-shadow: 0 0 18px 8px rgba(255, 211, 90, .7); } }
.sky-fact { min-height: 1.4em; font-size: 15px; line-height: 1.45; }

/* Memory Match: cards flip over to show a planet (or its name) */
.mem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 110px)); gap: 10px; justify-content: center; margin: 14px 0 6px; }
.mem-card {
  position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px;
}
.mem-card span {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; backface-visibility: hidden;
  transition: transform .4s ease;
}
.mem-back {
  font-size: 30px; color: var(--gold); background: linear-gradient(145deg, #5b3fb8, #2a1d6b); border: 2px solid rgba(255, 255, 255, .2);
}
.mem-front { transform: rotateY(180deg); background: rgba(255, 255, 255, .1); border: 2px solid rgba(255, 255, 255, .2); }
.mem-front canvas { width: 80%; height: auto; }
.mem-front.word { font: 800 17px var(--font); color: var(--ink); padding: 4px; text-align: center; }
.mem-card.up .mem-back { transform: rotateY(-180deg); }
.mem-card.up .mem-front { transform: rotateY(0); }
.mem-card.match .mem-front { border-color: var(--mint); background: rgba(143, 247, 207, .14); }
.mem-card:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 14px; }
@media (max-width: 520px) {
  .mem-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .mem-front.word { font-size: 13px; }
  .sky-star .num { font-size: 12px; }
}

/* Phones: six games fit as a compact two-column grid instead of one long list. */
@media (max-width: 520px) {
  .fun-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
  .fun-tile { padding: 12px 8px; gap: 4px; }
  .fun-tile .ft-icon { font-size: 32px; }
  .fun-tile b { font-size: 15px; }
  .fun-tile span:last-child { display: none; }
}