/* Create By Asking: fireworks simulator and New Year countdown (projects/fireworks-simulator.html).
   Loaded after style.css, tools.css and advanced.css; reuses .adv-shell, .adv-label, .adv-group and .chip-dark.
   Same visual language as gravity.css. */

.fw { gap: 12px; }

/* top row: the two modes, sound and full screen */
.fw-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.fw-tabs, .fw-top-right { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fw-tab { border: 0; cursor: pointer; border-radius: 999px; padding: 9px 15px; background: rgba(255, 255, 255, 0.08); color: #E2DAFA; font: 700 var(--step--1)/1 var(--body); white-space: nowrap; transition: background 0.15s, transform 0.1s; }
.fw-tab:hover { background: rgba(255, 255, 255, 0.16); }
.fw-tab:active { transform: scale(0.97); }
.fw-tab[aria-pressed="true"] { background: #FFC93C; color: #1C0F3F; }

/* the night sky */
.fw-stage { position: relative; aspect-ratio: 16 / 9; max-height: 72vh; border-radius: 14px; overflow: hidden; background: #0A0620; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px -18px rgba(0, 0, 0, 0.7); touch-action: none; user-select: none; -webkit-user-select: none; container-type: inline-size; }
.fw-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; -webkit-tap-highlight-color: transparent; outline: none; }
.fw-stage canvas:focus-visible { box-shadow: inset 0 0 0 3px #FFC93C; }
.fw-stage.is-fs, .fw-stage:fullscreen { aspect-ratio: auto; max-height: none; width: 100%; height: 100%; border-radius: 0; }

.fw-hint { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); font: 700 0.92rem/1.25 var(--body); color: #fff; background: rgba(12, 6, 30, 0.72); padding: 10px 16px; border-radius: 99px; pointer-events: none; text-align: center; box-shadow: 0 6px 20px -8px #000; animation: fw-bob 2.2s ease-in-out infinite; }
.fw-hint[hidden] { display: none; }
@keyframes fw-bob { 50% { transform: translate(-50%, 4px); } }

.fw-paused { position: absolute; left: 10px; bottom: 10px; font: 800 0.78rem/1 var(--body); letter-spacing: 0.04em; color: #1C0F3F; background: #FFC93C; padding: 6px 10px; border-radius: 8px; pointer-events: none; }
.fw-paused[hidden] { display: none; }

.fw-toast { position: absolute; left: 50%; top: 14px; transform: translate(-50%, -6px); width: max-content; max-width: min(520px, calc(100% - 24px)); background: rgba(255, 201, 60, 0.96); color: #1C0F3F; font: 700 0.85rem/1.3 var(--body); padding: 9px 14px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; text-align: center; z-index: 3; }
.fw-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* countdown, over the sky */
.fw-cd { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; pointer-events: none; text-align: center; color: #fff; width: max-content; max-width: calc(100% - 20px); }
.fw-cd[hidden], .fw-big[hidden], .fw-msg[hidden] { display: none; }
.fw-cd-label { font: 700 clamp(0.8rem, 2.4cqw, 1.5rem)/1.2 var(--body); color: #FFE9A8; background: rgba(12, 6, 30, 0.55); padding: 6px 12px; border-radius: 99px; }
.fw-cd-days { font: 800 clamp(1.1rem, 4cqw, 2.6rem)/1.1 var(--display); color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); margin-top: 4px; }
.fw-cd-time { display: flex; align-items: flex-start; gap: clamp(2px, 1cqw, 14px); margin-top: 2px; }
.fw-cd-time > i { font: 800 clamp(2.4rem, 11cqw, 9rem)/1 var(--display); font-style: normal; color: rgba(255, 255, 255, 0.55); }
.fw-u { display: grid; justify-items: center; gap: 2px; }
.fw-u b { font: 800 clamp(2.4rem, 11cqw, 9rem)/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-shadow: 0 0 24px rgba(255, 201, 60, 0.45), 0 2px 20px rgba(0, 0, 0, 0.7); }
.fw-u small { font: 600 clamp(0.62rem, 1.5cqw, 1rem)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #CBBFE8; }

.fw-big { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); font: 800 clamp(7rem, 36cqw, 20rem)/1 var(--display); font-variant-numeric: tabular-nums; color: #fff; pointer-events: none; text-shadow: 0 0 40px rgba(255, 201, 60, 0.7), 0 0 90px rgba(255, 105, 190, 0.5), 0 4px 30px rgba(0, 0, 0, 0.6); }
.fw-big.pop { animation: fw-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes fw-pop { from { transform: translate(-50%, -50%) scale(1.5); opacity: 0.2; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

.fw-msg { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: max-content; max-width: calc(100% - 24px); text-align: center; font: 400 clamp(2rem, 8.5cqw, 6.5rem)/1.05 "Shrikhand", var(--display); color: #FFE27A; pointer-events: none; text-shadow: 0 0 22px rgba(255, 140, 60, 0.75), 0 0 60px rgba(255, 105, 190, 0.5), 0 3px 0 #7A2E00, 0 6px 26px rgba(0, 0, 0, 0.7); }
.fw-msg span { display: block; font-size: 1.15em; color: #fff; }
.fw-msg.pop { animation: fw-msg-in 0.9s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes fw-msg-in { from { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* only in full screen: sound and a way out */
.fw-fsbar { display: none; position: absolute; right: 12px; top: 12px; gap: 6px; z-index: 4; }
.fw-stage.is-fs .fw-fsbar { display: flex; }
.fw-fsbar .chip-dark { background: rgba(12, 6, 30, 0.7); color: #fff; }

/* controls */
.fw-bar { display: grid; gap: 10px; }
.fw-bar[hidden] { display: none; }
.fw-bar .adv-group { gap: 5px; }
.fw .chip-dark { padding: 8px 12px; white-space: nowrap; }
.fw .chip-dark:hover { background: rgba(255, 255, 255, 0.16); }
.fw .chip-dark[aria-pressed="true"]:hover { background: #FFD766; }
.fw-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; border-radius: 999px; padding: 7px 13px 7px 9px; background: rgba(255, 255, 255, 0.08); color: #E2DAFA; font: 700 var(--step--1)/1 var(--body); white-space: nowrap; transition: background 0.15s; }
.fw-chip:hover { background: rgba(255, 255, 255, 0.16); }
.fw-chip[aria-pressed="true"] { background: #FFC93C; color: #1C0F3F; }
.fw-chip.no-ic { padding-left: 13px; }
.fw-ic { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--c); box-shadow: 0 0 8px 1px var(--c); }
.fw-ic-mix { background: conic-gradient(#FF485C 0 25%, #FFD45A 0 50%, #46D7FF 0 75%, #BE73FF 0); box-shadow: none; }
.fw-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fw-go { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 20px; background: #FFC93C; color: #1C0F3F; font: 800 var(--step-0)/1 var(--body); cursor: pointer; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(255, 201, 60, 0.8); }
.fw-go:hover { background: #FFD766; }
.fw-go:disabled { opacity: 0.6; cursor: default; }
.fw-go[aria-pressed="true"] { background: #FF6FA5; color: #fff; }
.fw-time { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--step--1)/1 var(--body); color: #CBBFE8; }
.fw-time input { font: 700 var(--step--1)/1 var(--body); color: #F2ECFF; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 6px 10px; color-scheme: dark; min-height: 32px; }
.fw-kids-note { margin: 0; font-size: var(--step--1); color: #A597CC; }

@media (max-width: 560px) {
  .fw-stage { aspect-ratio: 4 / 5; max-height: 68vh; }
  .fw-stage.is-fs { aspect-ratio: auto; max-height: none; }
  .fw-hint { font-size: 0.84rem; padding: 9px 13px; border-radius: 14px; }
  .fw-toast { font-size: 0.8rem; }
  .fw-tab { padding: 9px 12px; }
  .fw-chip { padding: 7px 11px 7px 8px; }
  .fw-go { padding: 11px 16px; }
  .fw-cd { top: 36%; }
  .fw-hide-sm { display: none; }
  .fw-cd-time > i, .fw-u b { font-size: clamp(2.4rem, 18cqw, 4.6rem); }
  .fw-msg { font-size: clamp(2.2rem, 12cqw, 3.4rem); }
}