/* KidCore shared styles — mode picker, header actions, toast, confetti,
   fat-finger hit expansion, LITTLE-mode sizing. Scoped with kc- prefixes so
   it never collides with per-game CSS. */

/* ── OVERLAY ── */
.kc-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(20, 16, 12, 0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity 0.2s ease;
}
.kc-overlay.kc-show { opacity: 1; }

.kc-mode-box {
  background: #fffdf9;
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  padding: 28px 24px;
  text-align: center;
  max-width: 480px; width: 100%;
  transform: scale(0.95); transition: transform 0.2s ease;
}
.kc-overlay.kc-show .kc-mode-box { transform: scale(1); }

.kc-mode-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 20px; color: #1a1a1a; }

.kc-mode-btns { display: flex; gap: 16px; justify-content: center; }

.kc-mode-btn {
  flex: 1; max-width: 190px;
  min-height: 170px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 3px solid rgba(0,0,0,0.1);
  border-radius: 20px;
  cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  padding: 18px 12px;
}
.kc-mode-btn:hover, .kc-mode-btn:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.14); }
.kc-mode-btn:active { transform: scale(0.96); }
.kc-mode-little { background: linear-gradient(160deg, #fefce8, #ecfdf5); border-color: #86efac; }
.kc-mode-little:hover { border-color: #10b981; }
.kc-mode-big { background: linear-gradient(160deg, #eff6ff, #f5f3ff); border-color: #93c5fd; }
.kc-mode-big:hover { border-color: #3b82f6; }

.kc-mb-art   { font-size: 3.4rem; line-height: 1; }
.kc-mb-icons { font-size: 1.05rem; letter-spacing: 0.2em; }
.kc-mb-label { font-size: 1.05rem; font-weight: 800; color: #1a1a1a; }

.kc-mode-cancel {
  margin-top: 18px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: #6b7280; font-size: 0.88rem; font-weight: 600;
  padding: 10px 16px; border-radius: 10px;
}
.kc-mode-cancel:hover { color: #1a1a1a; background: rgba(0,0,0,0.05); }

/* ── HEADER ACTIONS ── */
.kc-header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.kc-hbtn {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  background: transparent;
  border: 2px solid rgba(0,0,0,0.09);
  border-radius: 12px;
  cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
  position: relative;
}
.kc-hbtn::after { content: ''; position: absolute; inset: -8px; } /* invisible fat-finger pad */
.kc-hbtn:hover { background: rgba(0,0,0,0.045); }
.kc-hbtn:active { transform: scale(0.92); }

body[data-mode="little"] .kc-hbtn { min-width: 52px; min-height: 52px; font-size: 1.35rem; }

/* ── RESTART CONFIRM POP ── */
.kc-restart-pop {
  position: fixed; z-index: 2100;
  background: #fffdf9;
  border: 2px solid rgba(0,0,0,0.1);
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);
  padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  animation: kc-pop-in 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
.kc-rp-q { font-size: 0.9rem; font-weight: 700; color: #1a1a1a; }
.kc-rp-yes, .kc-rp-no {
  min-width: 48px; min-height: 48px;
  font-size: 1.3rem;
  border: 2px solid rgba(0,0,0,0.09); border-radius: 12px;
  background: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kc-rp-yes:active, .kc-rp-no:active { transform: scale(0.92); }

@keyframes kc-pop-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── TOAST ── */
#kc-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(90px);
  background: #1a1a1a; color: #fff;
  padding: 13px 26px; border-radius: 26px;
  font-size: 0.95rem; font-weight: 700;
  z-index: 1900; pointer-events: none;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s;
  max-width: calc(100vw - 32px);
  text-align: center;
}
#kc-toast.kc-show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ── CONFETTI CANVAS ── */
#kc-confetti {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1800;
}

/* ── FAT-FINGER HIT EXPANSION UTILITY ──
   Add .kc-fat to any interactive element (it must create a positioning
   context) to grow its touch target ~16px past its visual bounds. */
.kc-fat { position: relative; }
.kc-fat::after { content: ''; position: absolute; inset: -16px; }
body[data-mode="little"] .kc-fat::after { inset: -22px; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .kc-overlay, .kc-mode-box, .kc-hbtn, #kc-toast { transition: none !important; }
  .kc-restart-pop { animation: none; }
}