/* =========================================================================
 * Stream Timer — estilos do widget + presets de design (TURBO)
 *
 * Cores controladas pelos Fields (via applyStyle no JS), setadas no #timer-wrap:
 *   --tcolor   = Cor do texto
 *   --accent   = Cor de destaque 1 (brilhos, bordas, gradientes)
 *   --accent2  = Cor de destaque 2 (gradientes)
 *   --bg       = Cor do fundo + opacidade (rgba)
 *   --bgsolid  = Cor do fundo (sólida)
 *   --urg      = Cor de urgência (segundos finais)
 * ========================================================================= */

#timer-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: 'Outfit', sans-serif;
}

#timer-box {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1.05; position: relative;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
  animation: tw-in .55s cubic-bezier(.2,.9,.3,1.25) both;
}

#timer-clock {
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px; white-space: nowrap;
  color: var(--tcolor, #fff);
  transition: color .3s ease;
}

#timer-end {
  display: none; font-size: var(--endsize, 48px); text-align: center;
  opacity: 0; transition: opacity .35s ease; color: var(--tcolor, #fff);
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
  line-height: 1.1; max-width: 90vw;
}
/* Ao finalizar, a mensagem SUBSTITUI o relógio (não fica embaixo). */
#timer-box.ended #timer-clock { display: none; }
#timer-box.ended #timer-bar { display: none; }
#timer-box.ended #timer-end { display: block; opacity: 1; animation: tw-endpop .5s ease; }

/* Entrada e urgência (universais) */
@keyframes tw-in   { 0% { opacity: 0; transform: translateY(12px) scale(.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tw-endpop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
@keyframes tw-low  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
#timer-box.low #timer-clock {
  color: var(--urg, #ff4655) !important;
  -webkit-text-fill-color: var(--urg, #ff4655) !important;
  animation: tw-low .85s ease-in-out infinite !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--urg) 75%, transparent),
               0 0 28px color-mix(in srgb, var(--urg) 45%, transparent) !important;
}

/* Reflexo/shine reutilizável */
@keyframes tw-shine { 0% { background-position: 180% 0; } 55%,100% { background-position: -80% 0; } }

/* Cantos decorativos (usados por alguns presets) */
.deco { display: none; position: absolute; width: 22px; height: 22px; pointer-events: none; z-index: 2; }
.deco-tl { top: 9px; left: 9px; }
.deco-tr { top: 9px; right: 9px; }
.deco-bl { bottom: 9px; left: 9px; }
.deco-br { bottom: 9px; right: 9px; }

/* ===================== PRESETS ===================== */

/* 1. Simples — texto puro, só uma sombra leve para legibilidade */
.preset-simple #timer-clock { text-shadow: 0 2px 12px rgba(0,0,0,.55); }

/* 2. Com fundo — gradiente sutil + brilho interno */
.preset-background {
  padding: 24px 38px; border-radius: 20px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--bgsolid) 100%, transparent), var(--bg));
  box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
.preset-background #timer-clock { text-shadow: 0 2px 12px rgba(0,0,0,.5); }

/* 3. Neon — borda + glow pulsante + flicker */
.preset-neon {
  padding: 22px 44px; border-radius: 16px; background: var(--bg);
  border: 2px solid color-mix(in srgb, var(--accent) 80%, transparent);
  animation: tw-pulse 2.6s ease-in-out infinite;
}
.preset-neon #timer-clock {
  color: var(--tcolor);
  animation: tw-flicker 4.5s steps(1) infinite;
  text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 95%, transparent),
               0 0 18px color-mix(in srgb, var(--accent) 75%, transparent),
               0 0 42px color-mix(in srgb, var(--accent) 55%, transparent);
}
@keyframes tw-pulse {
  0%,100% { box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 0 16px color-mix(in srgb, var(--accent) 16%, transparent); }
  50%     { box-shadow: 0 0 38px color-mix(in srgb, var(--accent) 75%, transparent), inset 0 0 26px color-mix(in srgb, var(--accent) 26%, transparent); }
}
@keyframes tw-flicker { 0%,100%,42%,46% { opacity: 1; } 43% { opacity: .55; } 45% { opacity: .85; } }

/* 4. Vidro — glassmorphism com reflexo deslizante */
.preset-glass {
  padding: 24px 44px; border-radius: 22px; background: var(--bg);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 12px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.1);
  position: relative; overflow: hidden; z-index: 0;
}
.preset-glass::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  background-size: 250% 100%; animation: tw-shine 5s ease-in-out infinite;
}
.preset-glass #timer-clock { text-shadow: 0 2px 18px rgba(0,0,0,.4); }

/* 5. Gradiente animado (texto) */
.preset-gradient #timer-clock {
  background: linear-gradient(110deg, var(--accent), var(--accent2), var(--tcolor), var(--accent2), var(--accent));
  background-size: 260% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: tw-grad 4s linear infinite;
  filter: drop-shadow(0 3px 16px color-mix(in srgb, var(--accent) 50%, transparent));
}
@keyframes tw-grad { to { background-position: 260% center; } }

/* 6. Moldura luminosa — borda em gradiente girando + glow externo */
.preset-frame { padding: 26px 48px; border-radius: 20px; position: relative; z-index: 0; overflow: hidden;
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 30%, transparent); }
.preset-frame::before {
  content: ''; position: absolute; inset: -150%; z-index: -2;
  background: conic-gradient(var(--accent), var(--accent2), #60a5fa, #1ed760, var(--accent2), var(--accent));
  animation: tw-spin 5s linear infinite;
}
.preset-frame::after { content: ''; position: absolute; inset: 3px; border-radius: 17px;
  background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--bgsolid) 80%, #000), var(--bgsolid)); z-index: -1; }
.preset-frame #timer-clock { text-shadow: 0 2px 14px rgba(0,0,0,.55); }
@keyframes tw-spin { to { transform: rotate(360deg); } }

/* 7. Cápsula com brilho + shine que cruza */
.preset-glow-pill {
  padding: 20px 50px; border-radius: 999px; position: relative; overflow: hidden; z-index: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 10px 34px color-mix(in srgb, var(--accent2) 60%, transparent),
              0 0 60px color-mix(in srgb, var(--accent) 45%, transparent),
              inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 12px rgba(0,0,0,.2);
}
.preset-glow-pill::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
  background-size: 250% 100%; animation: tw-shine 3.8s ease-in-out infinite;
}
.preset-glow-pill #timer-clock { color: var(--tcolor); text-shadow: 0 2px 12px rgba(0,0,0,.4); }

/* 8. Contorno — texto vazado com glow pulsante */
.preset-outline #timer-clock {
  color: transparent; -webkit-text-stroke: 2px var(--tcolor);
  animation: tw-outline 3s ease-in-out infinite;
}
@keyframes tw-outline {
  0%,100% { text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent); }
  50%     { text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 60px color-mix(in srgb, var(--accent2) 35%, transparent); }
}

/* 9. Digital / LED — bezel + glow + flicker */
.preset-digital {
  padding: 22px 40px; border-radius: 14px; background: linear-gradient(180deg, #05080a, var(--bgsolid));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, #0a0a0a);
  box-shadow: inset 0 0 28px rgba(0,0,0,.9), inset 0 2px 4px rgba(0,0,0,.8),
              0 0 18px color-mix(in srgb, var(--accent) 35%, transparent), 0 8px 24px rgba(0,0,0,.5);
}
.preset-digital #timer-clock {
  font-family: 'JetBrains Mono', monospace !important; letter-spacing: 5px; color: var(--tcolor);
  animation: tw-flicker 6s steps(1) infinite;
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 85%, transparent),
               0 0 22px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* 10. Aurora — brilhos suaves + leve rotação de matiz */
.preset-aurora {
  padding: 28px 50px; border-radius: 26px; background: var(--bg);
  border: 1px solid rgba(255,255,255,.12); overflow: hidden; position: relative; z-index: 0;
  box-shadow: 0 14px 46px rgba(0,0,0,.5);
}
.preset-aurora::before {
  content: ''; position: absolute; inset: -45%; z-index: -1;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 75%, transparent), transparent 45%),
    radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--accent2) 70%, transparent), transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(96,165,250,.55), transparent 45%);
  filter: blur(20px); animation: tw-aurora 9s ease-in-out infinite, tw-hue 16s linear infinite;
}
.preset-aurora #timer-clock { text-shadow: 0 2px 18px rgba(0,0,0,.55); }
@keyframes tw-aurora {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(7%,-5%) scale(1.1); }
  66%     { transform: translate(-6%,6%) scale(1.05); }
}
@keyframes tw-hue { to { filter: blur(20px) hue-rotate(360deg); } }

/* 11. Holográfico — iridescente + flutua */
.preset-holographic #timer-clock {
  background: linear-gradient(110deg, var(--accent), var(--accent2), #22d3ee, var(--tcolor), var(--accent2), var(--accent));
  background-size: 340% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: tw-holo 5s linear infinite, tw-float 4s ease-in-out infinite;
  filter: drop-shadow(0 2px 14px color-mix(in srgb, var(--accent) 60%, transparent));
}
@keyframes tw-holo  { to { background-position: 340% center; } }
@keyframes tw-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* 12. Cyber — scanlines + feixe + borda neon + cantos */
.preset-cyber {
  padding: 28px 54px; border-radius: 6px; background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 40%, transparent),
              inset 0 0 30px color-mix(in srgb, var(--accent) 14%, transparent);
  overflow: hidden; position: relative; z-index: 0;
}
.preset-cyber::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--accent) 16%, transparent) 3px 4px),
    linear-gradient(0deg, transparent, color-mix(in srgb, var(--accent) 22%, transparent) 50%, transparent) ;
  background-size: 100% 4px, 100% 60px;
  animation: tw-scan 5s linear infinite, tw-beam 3s ease-in-out infinite;
}
@keyframes tw-scan { to { background-position: 0 220px, 0 0; } }
@keyframes tw-beam { 0%,100% { background-position-y: 0, -60px; } 50% { background-position-y: 0, 120%; } }
.preset-cyber .deco { display: block; filter: drop-shadow(0 0 4px var(--accent)); }
.preset-cyber .deco-tl { border-top: 3px solid var(--accent); border-left: 3px solid var(--accent); }
.preset-cyber .deco-tr { border-top: 3px solid var(--accent); border-right: 3px solid var(--accent); }
.preset-cyber .deco-bl { border-bottom: 3px solid var(--accent); border-left: 3px solid var(--accent); }
.preset-cyber .deco-br { border-bottom: 3px solid var(--accent); border-right: 3px solid var(--accent); }
.preset-cyber #timer-clock {
  color: var(--tcolor); letter-spacing: 3px;
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 75%, transparent);
}

/* 13. Luxo — metálico com brilho que varre + moldura dupla + cantos */
.preset-luxury {
  padding: 30px 58px; border-radius: 14px; background: var(--bg); position: relative; overflow: hidden; z-index: 0;
  border: 2px solid color-mix(in srgb, var(--accent) 80%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
              0 16px 48px rgba(0,0,0,.6),
              inset 0 0 34px color-mix(in srgb, var(--accent) 12%, transparent);
}
.preset-luxury::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%);
  background-size: 250% 100%; animation: tw-shine 4.5s ease-in-out infinite;
}
.preset-luxury .deco { display: block; width: 16px; height: 16px; }
.preset-luxury .deco-tl { border-top: 2px solid var(--accent2); border-left: 2px solid var(--accent2); }
.preset-luxury .deco-tr { border-top: 2px solid var(--accent2); border-right: 2px solid var(--accent2); }
.preset-luxury .deco-bl { border-bottom: 2px solid var(--accent2); border-left: 2px solid var(--accent2); }
.preset-luxury .deco-br { border-bottom: 2px solid var(--accent2); border-right: 2px solid var(--accent2); }
.preset-luxury #timer-clock {
  background: linear-gradient(180deg, var(--tcolor), var(--accent) 55%, var(--accent2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.55));
}

/* 14. Plasma — blobs girando atrás + sheen */
.preset-plasma {
  padding: 30px 52px; border-radius: 28px; background: var(--bg);
  overflow: hidden; position: relative; z-index: 0; box-shadow: 0 14px 50px rgba(0,0,0,.55);
}
.preset-plasma::before {
  content: ''; position: absolute; inset: -65%; z-index: -1;
  background:
    radial-gradient(circle at 25% 30%, var(--accent), transparent 40%),
    radial-gradient(circle at 75% 35%, var(--accent2), transparent 40%),
    radial-gradient(circle at 50% 75%, #22d3ee, transparent 42%);
  filter: blur(32px); opacity: .92; animation: tw-plasma 8s ease-in-out infinite, tw-hue 14s linear infinite;
}
@keyframes tw-plasma { 0%,100% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.3); } }
.preset-plasma #timer-clock { text-shadow: 0 2px 20px rgba(0,0,0,.6); }

/* 15. Glitch — split RGB + fatias */
.preset-glitch #timer-clock {
  color: var(--tcolor); position: relative;
  animation: tw-glitch 1.8s steps(2) infinite;
}
@keyframes tw-glitch {
  0%,100% { text-shadow: 2px 0 var(--accent), -2px 0 var(--accent2); transform: translate(0,0); clip-path: none; }
  20%     { text-shadow: -3px 0 var(--accent), 3px 0 var(--accent2); transform: translate(2px,-1px); clip-path: inset(0 0 55% 0); }
  40%     { text-shadow: 3px 0 var(--accent2), -3px 0 var(--accent); transform: translate(-2px,1px); clip-path: inset(60% 0 0 0); }
  60%     { text-shadow: 1px 0 var(--accent), -1px 0 var(--accent2); transform: translate(1px,0); clip-path: none; }
  80%     { text-shadow: -2px 0 var(--accent2), 2px 0 var(--accent); transform: translate(-1px,0); clip-path: inset(0 0 30% 0); }
}

/* 16. Anéis pulsantes — 3 ondas + glow */
.preset-ring-pulse { padding: 28px 50px; border-radius: 18px; background: var(--bg); position: relative; z-index: 0;
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 25%, transparent); }
.preset-ring-pulse::before, .preset-ring-pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 18px; z-index: -1;
  border: 2px solid color-mix(in srgb, var(--accent) 75%, transparent);
  animation: tw-ring 2.4s ease-out infinite;
}
.preset-ring-pulse::after { animation-delay: 1.2s; }
@keyframes tw-ring { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.45); opacity: 0; } }
.preset-ring-pulse #timer-clock { color: var(--tcolor); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); }

/* ===================== Extras: barra de meta, flash e "+tempo" ===================== */

#timer-bar {
  display: none; width: 100%; max-width: 440px; height: 8px; margin-top: 14px;
  border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
#timer-bar.show { display: block; }
#timer-bar-fill {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 65%, transparent);
  transition: width .35s ease;
}

#timer-flash {
  position: absolute; inset: -6px; border-radius: inherit; pointer-events: none;
  opacity: 0; z-index: 4;
  box-shadow: 0 0 40px 10px color-mix(in srgb, var(--accent) 75%, transparent);
}
#timer-flash.go { animation: tw-flashpop .55s ease-out; }
@keyframes tw-flashpop { 0% { opacity: .95; } 100% { opacity: 0; } }

#timer-floats { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 6; }
.tw-float {
  position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 800;
  text-shadow: 0 2px 12px rgba(0,0,0,.7); animation: tw-floatup 1.7s ease-out forwards;
}
.tw-float.plus  { color: #46e08a; }
.tw-float.minus { color: #f87171; }
@keyframes tw-floatup {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
  15%  { opacity: 1; transform: translate(-50%, -95%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -240%) scale(1); }
}

/* ===================== Preset: Banner reativo ===================== */
#timer-stack { display: inline-flex; flex-direction: column; align-items: center; }

#timer-banner {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  position: relative; z-index: 3; margin-bottom: -16px; overflow: hidden;
  padding: 12px 26px; border-radius: 16px;
  background: linear-gradient(135deg, var(--bnr1), var(--bnr2));
  color: var(--bnrtext); font-weight: 800; text-align: center; line-height: 1.15;
  white-space: pre-line; max-width: 92%;
  box-shadow: 0 12px 26px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 10px rgba(0,0,0,.2);
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
#timer-banner.pos-bottom { margin-bottom: 0; margin-top: -16px; }
#timer-banner-sub { font-size: .68em; font-weight: 600; opacity: .85; }
#timer-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%);
  background-size: 250% 100%; animation: tw-shine 4.2s ease-in-out infinite;
}
#timer-banner.event { background: linear-gradient(135deg, var(--bnr2), var(--bnr1)); }
#timer-banner.pop { animation: tw-bannerpop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes tw-bannerpop { 0% { transform: scale(.78); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }

.preset-banner {
  padding: 20px 46px; border-radius: 20px; position: relative; overflow: hidden; z-index: 0;
  background: linear-gradient(180deg, rgba(250,250,253,.98), rgba(224,224,236,.94));
  box-shadow: 0 16px 36px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.95), inset 0 -2px 8px rgba(0,0,0,.12);
}
.preset-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 44%, rgba(255,255,255,.5) 50%, transparent 56%);
  background-size: 250% 100%; animation: tw-shine 6s ease-in-out infinite;
}
.preset-banner #timer-clock {
  color: var(--accent);
  text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 3px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.preset-banner #timer-bar { background: rgba(0,0,0,.12); }
