/* Arrow Escape 3D — game-specific UI (modals, level grid). Dock lives in /games/kit/tz-game-dock.css */

/* Brand the modals + buttons to the game's blue. One block re-themes the whole
   app: kit modal primary buttons, ad offers (win/lose/reward gate), and the
   game's own .ae3d-btn-primary. (Was var(--accent), which resolved to lime and
   clashed with the blue dock.) White text for contrast on the blue. */
#game-root.tz-game-themed {
  --tz-game-primary: #2563eb;
  --tz-game-primary-on: #ffffff;
  --tz-game-btn-primary-bg: #2563eb;
  --tz-game-btn-primary-color: #ffffff;
  --tz-game-btn-primary-border: #2563eb;
}

/* ── Layout ── */
.ae3d-wrap { position: relative; width: 100%; aspect-ratio: 1.05 / 1; max-height: 620px; min-height: 380px; background: #f6f7f9; border: 1px solid #e8ecf1; border-radius: 16px; overflow: hidden; touch-action: none; transition: background .25s, border-color .25s; }
/* App-theme-based board (light default; dark when html has no data-theme="light") */
html:not([data-theme="light"]) .ae3d-wrap { background: #262d38; border-color: #2f3743; }
.ae3d-wrap canvas { display: block; width: 100%; height: 100%; outline: none; }

html.tz-app-mode .ae3d-wrap {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  aspect-ratio: unset;
  border: none;
  border-radius: 0;
}

.ae3d-status,
.ae3d-controls {
  display: none !important;
}

/* ── Status / tutorial ── */
.ae3d-status { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; font-size: 11px; color: var(--text); font-weight: 600; text-align: center; max-width: 92%; z-index: 4; pointer-events: none; transition: background 0.2s, color 0.2s; }
.ae3d-status.is-blocked { background: #fff5f5; border-color: #fecaca; color: #b91c1c; }
.ae3d-status.is-combo { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; font-weight: 700; }
.ae3d-status.is-tutorial { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.ae3d-tutorial { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); background: #E53935; color: #ffffff; padding: 8px 14px; border-radius: 10px; font-size: 12px; font-weight: 800; z-index: 3; pointer-events: none; animation: ae3dBob 1.6s ease-in-out infinite; }
@keyframes ae3dBob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-4px)} }

/* ── Controls below canvas (hidden; kit dock replaces) ── */
.ae3d-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ae3d-btn { flex: 1; min-width: 120px; padding: 12px 14px; border: 1px solid var(--tz-game-btn-border, var(--border)); border-radius: 12px; background: var(--tz-game-btn-bg, var(--surface)); color: var(--tz-game-btn-color, var(--heading)); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .15s, opacity .15s; }
.ae3d-btn:hover { border-color: var(--tz-game-modal-heading, var(--heading)); }
.ae3d-btn-primary { background: var(--tz-game-btn-primary-bg, #01875f); color: var(--tz-game-btn-primary-color, #ffffff); border-color: var(--tz-game-btn-primary-border, #01875f); }
.ae3d-btn-primary:hover { opacity: 0.88; border-color: var(--tz-game-btn-primary-border, #01875f); }
.ae3d-btn-icon { display: inline-flex; align-items: center; margin-right: 6px; vertical-align: middle; }
.ae3d-svg-icon { width: 18px; height: 18px; display: block; }

/* ── Modal (layout; colors from /games/kit/tz-game-theme.css) ── */
.ae3d-modal:not(.tz-game-modal) { position: absolute; inset: 0; background: var(--tz-game-modal-backdrop, rgba(0,0,0,0.55)); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.ae3d-modal.show { display: flex; }
.ae3d-panel { border-radius: 16px; max-width: 420px; width: 100%; padding: 22px 20px; text-align: center; }
.ae3d-panel h2 { margin: 0 0 6px; font-size: var(--text-xl); font-weight: 800; }
.ae3d-panel p { margin: 0 0 16px; font-size: 0.92rem; line-height: 1.5; }
.ae3d-panel .ae3d-emoji { font-size: 38px; margin-bottom: 4px; line-height: 1; }
.ae3d-win-hint { margin: 0 0 10px; font-size: 0.82rem; color: var(--text-muted, #6b7280); line-height: 1.4; }
.ae3d-lose-undo { width: 100%; margin-bottom: 10px; }
.ae3d-modal-actions { display: flex; flex-direction: column; gap: 8px; }
.ae3d-modal-actions .ae3d-btn { flex: none; min-width: 0; }

/* ── Level grid (layout; colors from tz-game-theme.css) ── */
.ae3d-level-jump { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; }
.ae3d-level-jump label { font-size: 0.85rem; color: var(--text-muted, #6b7280); white-space: nowrap; }
.ae3d-level-jump input { width: 5.5rem; padding: 8px 10px; border: 1px solid var(--border, #e8ecf1); border-radius: 10px; font-size: 0.95rem; background: var(--surface, #fff); color: var(--heading, #1a1a2e); }
.ae3d-level-jump .ae3d-btn { min-width: 0; padding: 8px 14px; }
.ae3d-level-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 10px 0 14px; max-height: 320px; overflow-y: auto; padding: 4px; }
.ae3d-tier-label { grid-column: 1 / -1; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin: 6px 0 2px; text-align: left; }
.ae3d-tier-label:first-child { margin-top: 0; }
.ae3d-lvl { aspect-ratio: 1; border: 2px solid transparent; border-radius: 8px; font-family: inherit; font-weight: 800; font-size: 0.78rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.ae3d-lvl[disabled] { opacity: 0.32; cursor: not-allowed; }
.ae3d-lvl.dense { grid-column: span 2; aspect-ratio: 2 / 1; font-size: 0.85rem; }

/* ── Hint badge ── */
.ae3d-hint-row { display: flex; justify-content: center; gap: 14px; font-size: 11px; color: var(--text-muted); margin-bottom: 8px; flex-wrap: wrap; }
.ae3d-hint-row span { display: inline-flex; align-items: center; gap: 4px; }
.ae3d-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }

@media (max-width: 600px) {
  .tool-calculator h2, .tool-content h2 { font-size: var(--text-lg); }
  .ae3d-wrap { aspect-ratio: 1 / 1.1; max-height: none; }
  .ae3d-btn { min-width: 0; width: 100%; }
  .ae3d-level-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
}

/* Hint bulb — warm amber icon (steady) with a soft CIRCULAR halo that pulses
   gently every few seconds, then rests. Set only when hints are unlockable;
   never a constant square glow. */
#tz-game-dock-action-hint.ae3d-hint-pulse {
  position: relative;
  color: #f5a623;
  /* The bulb itself glows (not just the halo) — pulses brighter each breath. */
  animation: ae3d-hint-bulb 3.4s ease-in-out infinite;
}
#tz-game-dock-action-hint.ae3d-hint-pulse::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 165%;
  aspect-ratio: 1; /* perfect circle */
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(circle, rgba(245, 166, 35, 0.3) 0%, rgba(245, 166, 35, 0) 70%);
  opacity: 0;
  pointer-events: none;
  animation: ae3d-hint-halo 3.4s ease-in-out infinite;
}
/* Stronger, steady breathing glow that advertises the rewarded hint. Still a
   soft circular pulse — never a hard constant square glow. */
@keyframes ae3d-hint-halo {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  50% { opacity: 0.38; transform: translate(-50%, -50%) scale(0.95); }
}
@keyframes ae3d-hint-bulb {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(245, 166, 35, 0.3)); }
  50% { filter: drop-shadow(0 0 5px rgba(245, 166, 35, 0.55)); }
}
@media (prefers-reduced-motion: reduce) {
  #tz-game-dock-action-hint.ae3d-hint-pulse::before { animation: none; opacity: 0; }
  #tz-game-dock-action-hint.ae3d-hint-pulse { animation: none; }
}

/* ════════════════ Juice layer (score · combo · stars · celebration) ════════════════ */

/* ── In-level progress bar (top edge of board; clears the notch in app mode) ── */
.ae3d-progress { position: absolute; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 4px; background: rgba(120, 132, 152, 0.18); z-index: 5; pointer-events: none; }
.ae3d-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #2563eb, #60a5fa); border-radius: 0 3px 3px 0; transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.ae3d-progress.is-hot .ae3d-progress-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); box-shadow: 0 0 8px rgba(245, 158, 11, 0.6); }

/* ── Score chip (top center) ── */
.ae3d-score-chip { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(150, 160, 180, 0.25); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 800; color: #1e293b; z-index: 5; pointer-events: none; transition: opacity 0.25s; }
.ae3d-score-chip.is-zero { opacity: 0; }
.ae3d-score-chip-ic { color: #2563eb; font-size: 10px; }
.ae3d-score-chip.is-pop { animation: ae3dChipPop 0.28s ease-out; }
@keyframes ae3dChipPop { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.14); } 100% { transform: translateX(-50%) scale(1); } }
html:not([data-theme="light"]) .ae3d-score-chip { background: rgba(30, 38, 50, 0.92); border-color: rgba(255, 255, 255, 0.12); color: #e2e8f0; }
html:not([data-theme="light"]) .ae3d-score-chip-ic { color: #60a5fa; }

/* ── Combo meter (drains under the score chip) ── */
.ae3d-combo-meter { position: absolute; top: calc(38px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: 92px; height: 5px; border-radius: 4px; background: rgba(120, 132, 152, 0.22); overflow: hidden; z-index: 5; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.ae3d-combo-meter.show { opacity: 1; }
.ae3d-combo-meter-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #2563eb, #60a5fa); border-radius: 4px; }
.ae3d-combo-meter.is-hot .ae3d-combo-meter-fill { background: linear-gradient(90deg, #ef4444, #f59e0b); }

/* ── Floating "+points ×N" ── */
.ae3d-float-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.ae3d-float { position: absolute; transform: translate(-50%, -50%); font-size: 16px; font-weight: 900; color: #2563eb; text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7); animation: ae3dFloatUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; white-space: nowrap; }
.ae3d-float.is-hot { font-size: 21px; color: #f59e0b; text-shadow: 0 0 12px rgba(245, 158, 11, 0.55); }
.ae3d-float.is-gray { font-size: 12px; color: #94a3b8; }
html:not([data-theme="light"]) .ae3d-float { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); color: #93c5fd; }
html:not([data-theme="light"]) .ae3d-float.is-hot { color: #fbbf24; }
html:not([data-theme="light"]) .ae3d-float.is-gray { color: #8a93a3; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
@keyframes ae3dFloatUp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  18% { opacity: 1; transform: translate(-50%, -68%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1); }
}

/* ── Big center milestone flash ("GREAT ×5") ── */
/* Stroke pairs with the BACKGROUND: dark outline on the light board, dark
   outline swapped for a light one on the dark board — amber/red/green fills
   alone are ~2:1 against a light canvas. */
.ae3d-flash { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%) scale(0.6); font-size: clamp(30px, 8.5vw, 54px); font-weight: 900; letter-spacing: 0.04em; color: #f59e0b; -webkit-text-stroke: 1.75px rgba(15, 23, 42, 0.65); text-shadow: 0 0 30px rgba(245, 158, 11, 0.7), 0 3px 8px rgba(0, 0, 0, 0.22); z-index: 8; opacity: 0; pointer-events: none; white-space: nowrap; }
.ae3d-flash.show { animation: ae3dFlashPop 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ae3d-flash.is-tier { color: #10b981; text-shadow: 0 2px 18px rgba(16, 185, 129, 0.55); }
.ae3d-flash.is-tension { color: #ef4444; font-size: clamp(18px, 5vw, 28px); text-shadow: 0 2px 14px rgba(239, 68, 68, 0.5); }
html:not([data-theme="light"]) .ae3d-flash { -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.75); }
@keyframes ae3dFlashPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-4deg); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.32) rotate(2deg); }
  26% { transform: translate(-50%, -50%) scale(0.94) rotate(0deg); }
  34% { transform: translate(-50%, -50%) scale(1.04); }
  44% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1.06); }
}

/* ── Wrong-tap feedback: shake + red vignette ── */
.ae3d-shake { animation: ae3dShake 0.32s linear; }
@keyframes ae3dShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 2px); }
  40% { transform: translate(5px, -2px); }
  60% { transform: translate(-4px, -1px); }
  80% { transform: translate(3px, 1px); }
}
.ae3d-vignette { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(229, 57, 53, 0) 55%, rgba(229, 57, 53, 0.38) 100%); }
.ae3d-vignette.show { animation: ae3dVignette 0.5s ease-out; }
@keyframes ae3dVignette { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* ── Confetti canvas (above modals — celebration rains over the win panel;
      kit tz-game-modal sits at z 10000, so this must clear it) ── */
.ae3d-confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10010; pointer-events: none; }

/* ── Win modal: PREMIUM celebration (bounce-in, big glowing stars, score punch) ── */
/* Panel bounces in (win only) — a static appear read flat. */
#modal-win.show .tz-game-modal-panel { animation: ae3dWinIn 0.5s cubic-bezier(0.22, 1.4, 0.42, 1) both; }
@keyframes ae3dWinIn {
  0% { opacity: 0; transform: scale(0.72) translateY(24px); }
  60% { transform: scale(1.04) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Soft gold celebration glow behind the emoji + stars. */
#modal-win .ae3d-panel { position: relative; overflow: hidden; }
#modal-win .ae3d-panel::before {
  content: ''; position: absolute; top: -50px; left: 50%; width: 300px; height: 220px;
  transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.30), rgba(251, 191, 36, 0) 68%);
}
#modal-win .ae3d-panel > * { position: relative; z-index: 1; }
#modal-win .ae3d-emoji { font-size: 46px; animation: ae3dWinEmoji 0.7s ease-out 0.12s both; }
@keyframes ae3dWinEmoji { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }

/* Big, dramatic stars with a glowing halo burst on reveal. */
.ae3d-star-row { display: flex; justify-content: center; gap: 16px; margin: 4px 0 10px; font-size: 48px; line-height: 1; }
.ae3d-star { color: rgba(140, 150, 170, 0.28); transform: scale(0.6); display: inline-block; position: relative; }
.ae3d-star.on { color: #fbbf24; text-shadow: 0 0 20px rgba(251, 191, 36, 0.75), 0 3px 6px rgba(0, 0, 0, 0.18); animation: ae3dStarPop 0.55s cubic-bezier(0.34, 1.7, 0.5, 1) forwards; }
.ae3d-star.on::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; z-index: -1;
  transform: translate(-50%, -50%) scale(0.4); border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.55), rgba(251, 191, 36, 0) 65%);
  animation: ae3dStarHalo 0.7s ease-out forwards;
}
@keyframes ae3dStarPop {
  0% { transform: scale(0) rotate(-40deg); opacity: 0; }
  55% { transform: scale(1.35) rotate(8deg); opacity: 1; }
  78% { transform: scale(0.92) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes ae3dStarHalo { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); } }

/* Big score that punches + glows when the count-up lands. */
.ae3d-win-score { margin: 2px 0 12px; }
.ae3d-win-score-num { font-size: 40px; font-weight: 900; color: var(--tz-game-primary, #2563eb); line-height: 1.05; letter-spacing: -0.5px; display: inline-block; }
.ae3d-win-score-num.is-punch { animation: ae3dScorePunch 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes ae3dScorePunch { 0% { transform: scale(1); } 35% { transform: scale(1.22); text-shadow: 0 0 22px rgba(37, 99, 235, 0.5); } 100% { transform: scale(1); } }
.ae3d-win-score-sub { font-size: 0.78rem; color: var(--text-muted, #6b7280); margin-top: 3px; }
.ae3d-tier-progress { position: relative; height: 18px; border-radius: 9px; background: rgba(120, 132, 152, 0.16); overflow: hidden; margin: 0 0 10px; }
/* Translucent fill so the centered label keeps contrast whichever side of the
   fill edge it lands on. */
.ae3d-tier-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, rgba(37, 99, 235, 0.30), rgba(96, 165, 250, 0.30)); border-radius: 9px; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.ae3d-tier-progress span { position: relative; z-index: 1; display: block; text-align: center; font-size: 10.5px; font-weight: 800; line-height: 18px; color: var(--heading, #1e293b); letter-spacing: 0.02em; }
html:not([data-theme="light"]) .ae3d-tier-progress span { color: #e2e8f0; }
.ae3d-next-tease { font-size: 0.8rem; color: var(--text-muted, #6b7280); margin: 0 0 12px !important; }
.ae3d-lifetime { font-size: 0.74rem; color: var(--text-muted, #94a3b8); margin: 10px 0 0 !important; }

/* Next-level button pulses after a beat — "just one more" nudge */
.ae3d-modal.show .ae3d-btn-primary.ae3d-next-pulse { animation: ae3dNextPulse 1.8s ease-in-out 1.2s infinite; }
@keyframes ae3dNextPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
  50% { box-shadow: 0 0 0 9px rgba(37, 99, 235, 0); }
}

/* ── Level grid stars ── */
.ae3d-lvl { flex-direction: column; line-height: 1.05; gap: 1px; }
.ae3d-lvl-stars { font-size: 9px; letter-spacing: 0.5px; color: #f59e0b; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .ae3d-float, .ae3d-flash.show, .ae3d-score-chip.is-pop, .ae3d-star.on,
  .ae3d-shake, .ae3d-vignette.show,
  .ae3d-modal.show .ae3d-btn-primary.ae3d-next-pulse { animation: none; }
  .ae3d-star.on { transform: scale(1); }
  .ae3d-flash.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .ae3d-progress-fill, .ae3d-tier-progress-fill, .ae3d-score-chip { transition: none; }
}