/* Sun & Star Arcade — shared look for the home page and every game.
   Every class here starts with "ss-" so it can never collide with a game's own CSS. */

:root {
  --ss-ink: #10204d;
  --ss-ink-soft: #5d73a1;
  --ss-sun: #ff9a2e;
  --ss-sun-light: #ffc23d;
  --ss-star: #7d68ff;
  --ss-star-light: #9a89ff;
  --ss-pink: #fa74c7;
  --ss-mint: #2bd4a7;
  --ss-sky: #249cff;
  --ss-card: rgba(255, 255, 255, .8);
  --ss-line: rgba(255, 255, 255, .92);
  --ss-shadow: 0 18px 40px rgba(18, 61, 127, .16);
  --ss-font: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  --ss-font-head: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
}

* { box-sizing: border-box; }

body.ss-body {
  margin: 0;
  min-height: 100vh;
  color: var(--ss-ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(255, 194, 61, .26), transparent 20rem),
    radial-gradient(circle at 90% 10%, rgba(125, 104, 255, .2), transparent 19rem),
    linear-gradient(135deg, #fff8ec 0%, #f1f4ff 50%, #fff3fb 100%);
  font-family: var(--ss-font);
  overflow-x: hidden;
}

/* Zero specificity, so each game's own button sizes still win. */
:where(.ss-body button) { font: inherit; }

/* ---------- Header ---------- */

.ss-header {
  position: relative;
  z-index: 30;
  display: flex;
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 24px 8px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ss-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.ss-brand-mascots { display: flex; flex: 0 0 auto; }
.ss-brand-mascots svg { width: 46px; height: 46px; }
.ss-brand-mascots svg + svg { margin-left: -12px; }

.ss-brand-text { min-width: 0; }

.ss-brand-text small {
  display: block;
  color: #8a6a3a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.ss-brand-text b {
  display: block;
  overflow: hidden;
  color: #173a7b;
  font-family: var(--ss-font-head);
  font-size: clamp(19px, 2.6vw, 27px);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }

.ss-chip, .ss-icon-btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid var(--ss-line);
  border-radius: 15px;
  color: #3d5795;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 6px 15px rgba(42, 85, 150, .1);
  font-weight: 900;
  text-decoration: none;
  transition: transform .16s ease, background .16s ease;
}

button.ss-chip, .ss-icon-btn { cursor: pointer; }
.ss-icon-btn { width: 44px; font-size: 19px; }
.ss-icon-btn:hover, button.ss-chip:hover, a.ss-chip:hover { transform: translateY(-2px); background: #fff; }
.ss-icon-btn[aria-pressed="false"] { opacity: .55; }

.ss-chip { padding: 0 12px; font-size: 15px; }
.ss-star-chip { color: #9a5a00; background: linear-gradient(145deg, #fff7d6, #ffe9b8); }
.ss-star-chip .ss-star-icon { color: #ffb020; font-size: 19px; }
.ss-star-chip.ss-pop { animation: ssPop .5s ease; }

.ss-home-btn {
  padding: 0 14px 0 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--ss-sun), #ff6f7d);
  box-shadow: 0 5px 0 #d4566a;
}
.ss-home-btn svg { width: 30px; height: 30px; }
.ss-home-btn:hover { background: linear-gradient(135deg, var(--ss-sun), #ff6f7d) !important; }

/* ---------- Mascots ---------- */

.ss-mascot { display: inline-block; overflow: visible; }
.ss-mascot .ss-rays { transform-origin: 0 0; animation: ssSpin 26s linear infinite; }
.ss-mascot.ss-bounce { animation: ssBounce 1.6s ease-in-out infinite alternate; }
.ss-mascot.ss-wiggle .ss-star-body { transform-origin: 0 0; animation: ssWiggle 2.4s ease-in-out infinite; }
.ss-mascot.ss-hop { animation: ssHop .6s ease; }

/* ---------- Toast ---------- */

.ss-toast {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 22px;
  display: flex;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  align-items: center;
  gap: 10px;
  border: 3px solid #fff;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #223d88, var(--ss-star));
  box-shadow: 0 14px 28px rgba(17, 41, 103, .25);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: .25s ease;
}
.ss-toast.ss-show { opacity: 1; transform: translate(-50%, 0); }
.ss-toast .ss-toast-icon { font-size: 30px; line-height: 1; }

/* ---------- Modals ---------- */

.ss-overlay {
  position: fixed;
  z-index: 70;
  display: grid;
  inset: 0;
  padding: 16px;
  place-items: center;
  overflow-y: auto;
  background: rgba(7, 20, 54, .66);
  backdrop-filter: blur(10px);
}

.ss-modal {
  position: relative;
  width: min(620px, 100%);
  margin: auto;
  padding: 28px 26px 24px;
  border: 3px solid rgba(255, 255, 255, .85);
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 194, 61, .25), transparent 16rem),
    radial-gradient(circle at 0 100%, rgba(125, 104, 255, .16), transparent 16rem),
    #fbfcff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .27);
  text-align: center;
  animation: ssModalIn .25s ease;
}

.ss-modal h2 {
  margin: 6px 0 0;
  color: #173a7b;
  font-family: var(--ss-font-head);
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.05;
}

.ss-modal p {
  max-width: 470px;
  margin: 12px auto 0;
  color: #5f78a3;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
}

.ss-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 30px;
  color: #fff;
  background: linear-gradient(135deg, var(--ss-sun), var(--ss-star));
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.ss-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  color: #6380ad;
  background: #e8f0fe;
  font-size: 17px;
  font-weight: 900;
}

.ss-btn {
  display: inline-flex;
  min-height: 52px;
  padding: 13px 22px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: 0;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(135deg, #ff8d57, #ff5e7f);
  box-shadow: 0 6px 0 #d54c6a;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .4px;
  text-decoration: none;
  transition: transform .16s ease;
}
.ss-btn:hover { transform: translateY(-2px); }
.ss-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #d54c6a; }
.ss-btn.ss-btn-soft { color: #4a6699; background: #edf3ff; box-shadow: 0 5px 0 #c9d7f0; }
.ss-btn.ss-btn-danger { background: linear-gradient(135deg, #f0607a, #d94263); box-shadow: 0 6px 0 #a8304a; }
.ss-btn:disabled { cursor: default; opacity: .45; transform: none; }

.ss-row { display: flex; margin-top: 20px; flex-wrap: wrap; justify-content: center; gap: 10px; }

.ss-link {
  margin-top: 14px;
  cursor: pointer;
  border: 0;
  color: #7890b5;
  background: transparent;
  font-size: 14px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Age picker */
.ss-welcome-mascots { display: flex; margin-top: 10px; justify-content: center; gap: 10px; }
.ss-welcome-mascots svg { width: 104px; height: 104px; }

.ss-age-grid { display: grid; margin-top: 20px; gap: 12px; grid-template-columns: repeat(3, 1fr); }

.ss-age-btn {
  display: grid;
  min-height: 140px;
  padding: 14px 8px;
  place-items: center;
  align-content: center;
  gap: 4px;
  cursor: pointer;
  border: 4px solid transparent;
  border-radius: 22px;
  color: #173a7b;
  background: #fff;
  box-shadow: 0 7px 0 rgba(42, 85, 150, .14), 0 12px 22px rgba(42, 85, 150, .1);
  transition: transform .16s ease;
}
.ss-age-btn:hover { transform: translateY(-3px); }
.ss-age-btn.ss-selected { border-color: var(--ss-sun); }
.ss-age-btn .ss-age-emoji { font-size: 40px; line-height: 1; }
.ss-age-btn b { font-family: var(--ss-font-head); font-size: 26px; }
.ss-age-btn span { color: #6a7fa8; font-size: 13px; font-weight: 900; }
.ss-age-btn.little { background: linear-gradient(160deg, #fff6d9, #fff); }
.ss-age-btn.junior { background: linear-gradient(160deg, #e2f4ff, #fff); }
.ss-age-btn.pro { background: linear-gradient(160deg, #efe9ff, #fff); }

/* Sticker book */
.ss-sticker-grid {
  display: grid;
  margin-top: 18px;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  text-align: center;
}

.ss-sticker {
  display: grid;
  min-height: 132px;
  padding: 12px 8px;
  align-content: start;
  justify-items: center;
  gap: 6px;
  border-radius: 20px;
  color: #8b9cbc;
  background: #eef3fb;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.ss-sticker .ss-sticker-art {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 3px dashed #c5d3e8;
  border-radius: 50%;
  color: #b3c2da;
  font-size: 28px;
}

.ss-sticker b { color: #7a8db0; font-size: 13px; }

.ss-sticker.ss-earned { color: #4a6699; background: linear-gradient(160deg, #fffbe9, #f0f6ff); box-shadow: inset 0 0 0 2px #fff; }
.ss-sticker.ss-earned b { color: #173a7b; }
.ss-sticker.ss-earned .ss-sticker-art {
  border: 4px solid #fff;
  background: linear-gradient(145deg, #ffe7a3, #ffd0e8 60%, #d9d2ff);
  box-shadow: 0 6px 14px rgba(125, 104, 255, .25);
  font-size: 34px;
  transform: rotate(-6deg);
}

.ss-progress-pill {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 30px;
  color: #4a6699;
  background: #eaf2ff;
  font-size: 13px;
  font-weight: 900;
}

.ss-result-stars { margin-top: 8px; color: #ffb020; font-size: 44px; letter-spacing: 6px; }

/* How to play */
.ss-how-emoji { margin-top: 6px; font-size: 54px; line-height: 1; }
.ss-steps { margin: 16px auto 0; padding: 0; max-width: 500px; counter-reset: step; list-style: none; text-align: left; }
.ss-steps li { position: relative; margin-top: 8px; padding: 10px 12px 10px 48px; border-radius: 14px; color: #2c4377; background: #f1f5fd; font-size: 16px; font-weight: 800; line-height: 1.4; counter-increment: step; }
.ss-steps li::before { position: absolute; top: 8px; left: 10px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--ss-sun), var(--ss-star)); content: counter(step); font-size: 14px; font-weight: 900; }

/* Parent gate */
.ss-hold-btn {
  position: relative;
  overflow: hidden;
  min-width: 260px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.ss-hold-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: rgba(255, 255, 255, .35);
  pointer-events: none;
}
.ss-hold-btn span { position: relative; }

.ss-gate-input {
  width: 160px;
  margin-top: 14px;
  padding: 12px;
  border: 3px solid #d4e1f5;
  border-radius: 16px;
  color: #173a7b;
  background: #fff;
  font: 900 24px var(--ss-font);
  text-align: center;
}

.ss-error { min-height: 20px; margin-top: 8px; color: #d23c5c; font-size: 14px; font-weight: 900; }

.ss-parent-list { display: grid; margin-top: 18px; gap: 10px; text-align: left; }
.ss-parent-item {
  display: flex;
  padding: 12px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 16px;
  color: #4a6699;
  background: #f0f5ff;
  font-size: 14px;
  font-weight: 800;
}
.ss-parent-item .ss-btn { min-height: 42px; padding: 8px 14px; font-size: 14px; }

/* Speaker button used inside games */
.ss-speak {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  cursor: pointer;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--ss-star-light), var(--ss-star));
  box-shadow: 0 4px 0 #5a46c9;
  font-size: 18px;
  vertical-align: middle;
}
.ss-speak:active { transform: translateY(3px); box-shadow: 0 1px 0 #5a46c9; }
.ss-speak.ss-speaking { animation: ssPulse .8s ease-in-out infinite alternate; }

/* Confetti */
.ss-confetti {
  position: fixed;
  z-index: 95;
  width: 10px;
  height: 17px;
  top: -22px;
  border-radius: 4px;
  pointer-events: none;
  animation: ssFall linear forwards;
}

@keyframes ssSpin { to { transform: rotate(360deg); } }
@keyframes ssBounce { to { transform: translateY(-8px); } }
@keyframes ssWiggle { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes ssHop { 40% { transform: translateY(-18px) scale(1.06); } }
@keyframes ssPop { 40% { transform: scale(1.25); } }
@keyframes ssPulse { to { box-shadow: 0 0 0 7px rgba(125, 104, 255, .25); } }
@keyframes ssFall { to { transform: translateY(108vh) rotate(760deg); } }
@keyframes ssModalIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }

/* Narrow phones (360–420 px): icon-only Home button and slightly smaller buttons so the header fits. */
@media (max-width: 420px) {
  .ss-home-label { display: none; }
  .ss-home-btn { padding: 0 8px; }
  .ss-icon-btn { width: 40px; min-height: 40px; font-size: 17px; }
  .ss-chip { min-height: 40px; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-mascot .ss-rays, .ss-mascot.ss-bounce, .ss-mascot.ss-wiggle .ss-star-body { animation: none; }
}

@media (max-width: 640px) {
  .ss-header { padding: 10px 12px 6px; flex-wrap: wrap; }
  .ss-brand-mascots svg { width: 38px; height: 38px; }
  .ss-actions { width: 100%; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .ss-home-btn { margin-right: auto; }
  .ss-age-grid { grid-template-columns: 1fr; }
  .ss-age-btn { min-height: 0; grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 14px; }
  .ss-age-btn .ss-age-emoji { grid-row: span 2; }
  .ss-modal { padding: 24px 16px 20px; border-radius: 24px; }
  .ss-welcome-mascots svg { width: 84px; height: 84px; }
}