/* Size Safari: calm preschool size games. One question, two choices, no timers. */
.ss-wrap { max-width: 1000px; margin: 0 auto; padding: 0 12px; }
.ss {
  position: relative; overflow: hidden;
  height: clamp(560px, calc(100svh - 72px), 860px);
  border-radius: 28px; background: #F4FBFF; color: #1C1C1E;
  box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 18px 40px rgba(0,0,0,.08);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ss button { font: inherit; color: inherit; cursor: pointer; }
.ss :focus-visible { outline: 4px solid #007AFF; outline-offset: 3px; }
.ss .ss-screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0; margin: 0; }
.ss-screen[hidden], .ss-over[hidden] { display: none; }

/* buttons */
.ss-ib {
  width: 60px; height: 60px; flex: none; border: 0; border-radius: 20px; background: #fff;
  font-size: 26px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.ss-ib[aria-pressed="true"] { background: #E8F1FF; box-shadow: inset 0 0 0 3px #007AFF; }
.ss-lang { display: flex; flex: none; background: #fff; border-radius: 20px; padding: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.ss-lang button { border: 0; background: transparent; border-radius: 15px; min-width: 64px; height: 50px; font-weight: 800; font-size: 18px; }
.ss-lang button[aria-pressed="true"] { background: #007AFF; color: #fff; }

/* home */
.ss-home { background: linear-gradient(180deg, #E9FAFF 0%, #FFF8EC 100%); overflow-y: auto; }
.ss-hhead { display: flex; align-items: center; gap: 8px; padding: 12px; flex-wrap: wrap; }
.ss-title { flex: 1; min-width: 150px; font-size: clamp(26px, 5vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.ss-note { margin: 0 14px 6px; font-size: 15px; color: #8A5A00; background: #FFF3CF; border-radius: 12px; padding: 8px 12px; }
.ss-note[hidden] { display: none; }
.ss-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 6px 14px 18px; }
@media (min-width: 640px) { .ss-tiles { grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 8px 20px 20px; } .ss-tile b { font-size: 20px; } }
.ss-tile {
  position: relative; border: 0; background: #fff; border-radius: 24px; padding: 8px 8px 12px;
  display: flex; flex-direction: column; gap: 8px; text-align: center; box-shadow: 0 3px 10px rgba(0,0,0,.07);
  transition: transform .15s;
}
.ss-tile:active { transform: scale(.97); }
.ss-tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; pointer-events: none; display: block; }
.ss-tile b { font-size: 18px; line-height: 1.2; }
.ss-tile .star { position: absolute; top: 14px; right: 14px; font-size: 24px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
.ss-tile .go { position: absolute; top: -8px; left: -6px; background: #FF9500; color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 20px; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.ss-hold { position: relative; overflow: hidden; }
.ss-hold .fill { position: absolute; left: 0; bottom: 0; height: 0; width: 100%; background: rgba(0,122,255,.25); transition: height 0s; }
.ss-hold.holding .fill { height: 100%; transition: height 1.5s linear; }

/* activity */
.ss-play { background: #F4FBFF; }
.ss-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0; }
.ss-dots { flex: 1; display: flex; justify-content: center; gap: 10px; }
.ss-dots i { width: 18px; height: 18px; border-radius: 50%; background: #D9E6EE; transition: background .3s, transform .3s; }
.ss-dots i.on { background: #FFC93C; transform: scale(1.12); }
.ss-dots i.now { box-shadow: 0 0 0 4px rgba(255,201,60,.4); }
.ss-ask {
  margin: 10px 12px 0; padding: 8px 14px; min-height: 68px; border-radius: 22px; background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center;
  font-size: clamp(20px, 4.6vw, 30px); font-weight: 800; line-height: 1.25; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.ss-ask .w { background: #FFE58A; color: #6B4300; border-radius: 12px; padding: 1px 12px; }
.ss-stagewrap { position: relative; flex: 1; min-height: 0; margin-top: 8px; }
#ssStage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* svg pieces */
#ssStage .pick { cursor: pointer; outline: none; }
#ssStage .pick:focus-visible .hit { stroke: #007AFF; stroke-width: 8; }
#ssStage .hit { fill: transparent; }
#ssStage .anim { transform-box: fill-box; transform-origin: 50% 100%; }
#ssStage .ghost { opacity: .5; pointer-events: none; }
#ssStage .goal { opacity: .22; pointer-events: none; }
#ssStage .guide { fill: none; stroke: #FF9500; stroke-width: 6; stroke-dasharray: 14 10; stroke-linecap: round; pointer-events: none; }
#ssStage .glow { fill: rgba(255,201,60,.14); stroke: #FFC93C; stroke-width: 9; pointer-events: none; animation: ssGlow 1.2s ease-in-out infinite; }
@keyframes ssGlow { 50% { stroke-opacity: .3; } }
#ssStage .hand { pointer-events: none; animation: ssBob 1s ease-in-out infinite; }
@keyframes ssBob { 50% { transform: translateY(-10px); } }
#ssStage .handle { cursor: grab; }
#ssStage .handle .vis { fill: #fff; stroke: #007AFF; stroke-width: 7; }
#ssStage .handle .hit { fill: rgba(0,122,255,.10); }
#ssStage .handle text { fill: #007AFF; font-weight: 800; pointer-events: none; }
#ssStage .handle-pulse { animation: ssPulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ssPulse { 50% { transform: scale(1.12); } }
#ssStage .lbl { font-weight: 800; fill: #0051D5; pointer-events: none; }

/* overlays */
.ss-over {
  position: absolute; inset: 0; z-index: 30; background: rgba(244,251,255,.96);
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  gap: 16px; padding: 20px; overflow-y: auto; text-align: center;
}
.ss-over h2 { font-size: clamp(28px, 5vw, 38px); font-weight: 800; }
.ss-bigrow { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.ss-bigbtn { width: 100px; height: 100px; border: 0; border-radius: 30px; background: #fff; font-size: 44px; box-shadow: 0 6px 0 #D4E3EE; }
.ss-bigbtn.primary { background: #34C759; box-shadow: 0 6px 0 #248A3D; }
.ss-bigbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #D4E3EE; }
.ss-donestar { font-size: 84px; line-height: 1; }

/* grown-ups screen */
.ss-parent { text-align: left; justify-content: flex-start; }
.ss-parent .inner { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.ss-parent h2 { text-align: center; }
.ss-parent h3 { font-size: 19px; margin-bottom: 6px; }
.ss-parent section { background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.ss-parent table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ss-parent th, .ss-parent td { padding: 7px 4px; border-bottom: 1px solid #EEF2F5; text-align: left; vertical-align: middle; }
.ss-parent th { color: #636366; font-weight: 600; }
.ss-parent .pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 700; }
.ss-parent .p-none { background: #F2F2F7; color: #636366; }
.ss-parent .p-prac { background: #FFF3CF; color: #8A5A00; }
.ss-parent .p-got { background: #DDF6E4; color: #1F7A3A; }
.ss-parent label { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 16px; }
.ss-parent input[type="checkbox"] { width: 24px; height: 24px; }
.ss-parent .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ss-parent .btn2 { border: 0; border-radius: 14px; padding: 12px 18px; font-weight: 700; background: #F2F2F7; min-height: 48px; }
.ss-parent .btn2.blue { background: #007AFF; color: #fff; }
.ss-parent .btn2.red { background: #FFE5E5; color: #B42318; }
.ss-parent ul { padding-left: 20px; font-size: 15px; line-height: 1.5; }
.ss-parent small { color: #636366; }

/* calm mode and reduced motion: keep everything still */
.ss.calm *, .ss.calm *::before, .ss.calm *::after { animation: none !important; transition-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) {
  .ss *, .ss *::before, .ss *::after { animation: none !important; transition-duration: .01ms !important; }
}
@media (max-width: 420px) {
  .ss { border-radius: 22px; }
  .ss-ib { width: 54px; height: 54px; font-size: 24px; }
  .ss-lang button { min-width: 54px; height: 44px; font-size: 16px; }
  .ss-tiles { grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 10px 14px; }
  .ss-tile b { font-size: 15px; }
}