/* Shared shell for TimeNinja learning games. Calm colours, huge targets,
   no timers, no lives, no scores. */
.game-wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.game {
  position: relative; overflow: hidden;
  border-radius: 28px; min-height: 540px;
  padding: 14px 14px 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 18px 40px rgba(0,0,0,.08);
  display: flex; flex-direction: column;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  color: #1C1C1E;
}
.game button { font: inherit; color: inherit; cursor: pointer; }
.game :focus-visible { outline: 4px solid #007AFF; outline-offset: 3px; }

.g-stage { margin: auto 0; padding: 10px 0; }
.g-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.g-dots { display: flex; gap: 4px; flex-wrap: wrap; font-size: 22px; line-height: 1; }
.g-dots span { opacity: .22; filter: grayscale(1); transition: opacity .3s, transform .3s, filter .3s; }
.g-dots span.full { opacity: 1; filter: none; transform: scale(1.15); }
.g-icon-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.75); font-size: 22px; flex: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.g-say {
  text-align: center; font-size: clamp(19px, 3.6vw, 26px); font-weight: 700;
  min-height: 2.6em; margin: 10px 8px 0; line-height: 1.3;
}
.g-say .sym { font-size: 1.35em; letter-spacing: .06em; color: #0051D5; }
.g-keys { text-align: center; font-size: 14px; color: rgba(28,28,30,.6); margin-top: 6px; }
.g-keys kbd {
  display: inline-block; min-width: 28px; padding: 2px 7px; border-radius: 7px;
  background: #fff; border: 1px solid #D1D1D6; border-bottom-width: 3px;
  font: 600 14px/1.3 -apple-system, BlinkMacSystemFont, sans-serif; color: #1C1C1E;
}

.g-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  gap: 14px; padding: 20px 16px; text-align: center; overflow-y: auto;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.g-overlay[hidden] { display: none; }
.g-overlay h2 { font-size: clamp(28px, 5vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.g-overlay p { font-size: 18px; color: #3A3A3C; max-width: 460px; }
.g-big-emoji { font-size: 72px; line-height: 1; }
.g-levels { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 560px; }
.g-levels button {
  border: 2px solid #D1D1D6; background: #fff; border-radius: 999px;
  padding: 10px 16px; min-height: 48px; font-size: 16px; font-weight: 600;
}
.g-levels button[aria-pressed="true"] { border-color: #007AFF; background: #E8F1FF; color: #0051D5; }
.g-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* .game .g-btn, not .g-btn: ".game button { font: inherit }" above is more specific and was resetting the
   size and weight, so the main button (Play, Play again) rendered thin and small. */
.game .g-btn, .g-btn {
  border: 0; border-radius: 999px; min-height: 60px; padding: 14px 34px;
  font-size: 21px; font-weight: 800; background: #007AFF; color: #fff !important;
  box-shadow: 0 6px 0 #0051D5; transition: transform .1s, box-shadow .1s;
}
.g-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #0051D5; }
.g-btn.soft { background: #fff; color: #0051D5 !important; box-shadow: 0 6px 0 #C7D7F2; border: 2px solid #C7D7F2; }
.game .g-link, .g-link { border: 0; background: none; color: #0051D5 !important; font-size: 16px; font-weight: 700; padding: 8px 14px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.g-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 520px; }
.g-chips span { background: #fff; border-radius: 12px; padding: 6px 12px; font-size: 20px; font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.g-note { font-size: 15px !important; color: #636366 !important; }

@keyframes g-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes g-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,204,0,.0), 0 4px 14px rgba(0,0,0,.08); } 50% { box-shadow: 0 0 0 10px rgba(255,204,0,.55), 0 4px 14px rgba(0,0,0,.08); } }
@keyframes g-bounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-16px); } 70% { transform: translateY(-4px); } }
@keyframes g-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Grown-up section under each game */
.game-guide h2 { margin-top: 34px; }
.game-guide .tip { background: #fff; border-radius: 16px; padding: 16px 18px; margin: 14px 0; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.game-next { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 18px; padding: 16px 18px; margin: 26px 0 8px; box-shadow: 0 1px 3px rgba(0,0,0,.05); color: inherit; }
.game-next:hover { text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.game-next .e { font-size: 40px; }

@media (max-width: 420px) {
  .g-overlay { gap: 11px; }
  .g-big-emoji { font-size: 52px; }
  .g-overlay p { font-size: 16px; }
  .g-levels button { padding: 8px 13px; font-size: 15px; min-height: 44px; }
  .g-row .g-btn { padding: 12px 20px; font-size: 18px; min-height: 54px; }
  .g-chips span { font-size: 17px; padding: 5px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .game *, .game *::before, .game *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Phones: the game comes first and fills the screen. Small children cannot read the title
   and should never have to scroll to reach the game, so the title and guide move below it. */
@media (max-width: 760px) {
  body.game-page { display: flex; flex-direction: column; }
  body.game-page > .game-hero { order: 1; padding: 22px 0 4px !important; }
  body.game-page > .game-info, body.game-page > footer { order: 2; }
  body.game-page > .game-stage { padding: 0 !important; }
  body.game-page .game-wrap, body.game-page .ss-wrap, body.game-page .hc-wrap, body.game-page .lg-wrap { padding: 0; max-width: none; }
  /* #ss and #hc are the Size Safari and Happy Calendar panels. Ids, not classes: Teddy Seesaw has its own .ss (the seesaw). */
  body.game-page .game, body.game-page #ss, body.game-page #hc, body.game-page #lg { border-radius: 0; box-shadow: none; }
  body.game-page .game { min-height: calc(100svh - 57px); }
  body.game-page #ss, body.game-page #hc, body.game-page #lg { height: calc(100svh - 57px); min-height: 480px; }
}

/* Play mode (see playMode in games.js): the game panel is pinned over the whole window and the page
   behind it cannot scroll. On wide screens the game keeps its own width in the middle. */
html.tn-play, html.tn-play body { overflow: hidden !important; overscroll-behavior: none; }
.game.tn-full, #ss.tn-full, #hc.tn-full, #lg.tn-full {
  position: fixed !important; inset: 0; z-index: 3000;
  width: auto !important; max-width: none !important; margin: 0 !important;
  height: 100vh !important; height: 100dvh !important; min-height: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
  overscroll-behavior: contain;
  padding-left: max(env(safe-area-inset-left), calc((100vw - 900px) / 2));
  padding-right: max(env(safe-area-inset-right), calc((100vw - 900px) / 2));
}
.game.tn-full { padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right), calc((100vw - 900px) / 2)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left), calc((100vw - 900px) / 2)); }
/* A phone held sideways is shorter than some rounds: let the panel itself scroll then, rather than cut the game off. */
.game.tn-full { overflow-x: hidden; overflow-y: auto; }
.tn-close { display: none; }
.tn-full .tn-close { display: block; margin-right: 4px; }
.tn-full .g-top .g-dots { flex: 1; }

/* "See all games" under each guide: a full-size tap target, not a 20px line of text. */
.game-guide p[style*="text-align:center"] > a:only-child { display: inline-block; padding: 12px 8px; }