/* Presentation Timer – character + card styles (shared by overlay and portal preview) */
.ts-root{position:relative;overflow:hidden;--k:1;
  --c-bg:#fff;--c-ink:#1d2433;--c-sub:#4b5563;--c-border:#23262f;--d-bg:#0b1220;--d-ink:#ffbf3c;--d-glow:rgba(255,191,60,.65)}
.ts-root.theme-dark{--c-bg:#111827;--c-ink:#f9fafb;--c-sub:#9ca3af;--c-border:#4b5563;--d-bg:#000;--d-ink:#22d3ee;--d-glow:rgba(34,211,238,.6)}
.ts-root.theme-neon{--c-bg:#14002e;--c-ink:#fff;--c-sub:#f0abfc;--c-border:#d946ef;--d-bg:#05000f;--d-ink:#39ff88;--d-glow:rgba(57,255,136,.7)}
.ts-root.theme-sunny{--c-bg:#fff7d6;--c-ink:#7c2d12;--c-sub:#9a3412;--c-border:#f97316;--d-bg:#7c2d12;--d-ink:#fde68a;--d-glow:rgba(253,230,138,.5)}
.ts-root.theme-redgrey{--c-bg:#fff;--c-ink:#1f2937;--c-sub:#6b7280;--c-border:#cf2030;--d-bg:#374151;--d-ink:#fff;--d-glow:rgba(255,255,255,.25)}

.ts-actor{position:absolute;left:0;display:flex;align-items:flex-start;transform-origin:50% 50%;will-change:transform}
.ts-actor.hidden{visibility:hidden}
.ts-root.pos-top .ts-actor{top:calc(18px * var(--k))}
.ts-root.pos-bottom .ts-actor{bottom:calc(10px * var(--k));align-items:flex-end}
.ts-char{width:calc(170px * var(--k));height:calc(304px * var(--k));flex:none;transition:transform .25s}
.ts-char svg{width:100%;height:100%;overflow:visible;display:block}
.ts-char img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block}
.ts-actor.face-left .ts-char{transform:scaleX(-1)}

.ts-card{margin-left:calc(-18px * var(--k));margin-top:calc(26px * var(--k));margin-bottom:calc(120px * var(--k));
  width:calc(460px * var(--k));box-sizing:border-box;background:var(--c-bg);color:var(--c-ink);
  border:calc(6px * var(--k)) solid var(--c-border);border-radius:calc(20px * var(--k));
  padding:calc(16px * var(--k)) calc(20px * var(--k)) calc(18px * var(--k));
  box-shadow:0 calc(14px * var(--k)) calc(40px * var(--k)) rgba(0,0,0,.45);
  transform-origin:left center;animation:ts-sway 3s ease-in-out infinite;font-family:"Segoe UI",system-ui,sans-serif}
.ts-root.pos-top .ts-card{margin-bottom:0}
.ts-actor.custom .ts-card{margin-left:calc(10px * var(--k))}
.ts-card.pop{animation:ts-pop .45s ease-out, ts-sway 3s ease-in-out .45s infinite}
.ts-head{font-size:calc(30px * var(--k));font-weight:800;line-height:1.15;text-transform:uppercase;letter-spacing:.5px}
.ts-msg{font-size:calc(18px * var(--k));font-weight:600;color:var(--c-sub);margin-top:calc(4px * var(--k));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-msg:empty{display:none}
.ts-digits{font-family:Consolas,"Courier New",monospace;font-size:calc(68px * var(--k));font-weight:700;line-height:1.25;
  background:var(--d-bg);color:var(--d-ink);border-radius:calc(12px * var(--k));text-align:center;
  margin-top:calc(10px * var(--k));font-variant-numeric:tabular-nums;text-shadow:0 0 calc(14px * var(--k)) var(--d-glow);letter-spacing:3px}

/* time is over – same alarm look for every theme */
.ts-actor.over .ts-card{background:#e5383b;color:#fff;border-color:#6d0d10;animation:ts-shake .5s ease-in-out infinite}
.ts-actor.over .ts-msg{color:#ffe0e0}
.ts-actor.over .ts-digits{background:#0b1220;color:#ff4d4f;text-shadow:0 0 16px rgba(255,77,79,.9);animation:ts-blink 1s steps(2) infinite}

/* body animation */
.ts-char .leg,.ts-char .arm-l{transform-box:fill-box;transform-origin:50% 0}
.ts-char .tail{transform-box:fill-box;transform-origin:100% 100%;animation:ts-wag 1.2s ease-in-out infinite}
.ts-char .cape{transform-box:fill-box;transform-origin:50% 0;animation:ts-cape 1.6s ease-in-out infinite}
.ts-char .led{animation:ts-blink 1.4s steps(2) infinite}.ts-char .led2{animation-delay:.7s}
.ts-actor.walking .leg-l{animation:ts-stepA .5s ease-in-out infinite}
.ts-actor.walking .leg-r{animation:ts-stepB .5s ease-in-out infinite}
.ts-actor.walking .arm-l{animation:ts-stepB .5s ease-in-out infinite}
.ts-actor.walking .bob{animation:ts-bob .25s ease-in-out infinite alternate}
.ts-actor.walking.custom .ts-char img{animation:ts-waddle .5s ease-in-out infinite}

.ts-char .eye{transform-box:fill-box;transform-origin:center;animation:ts-blinkEye 4s infinite}
.ts-char .mouth-sad{display:none}
.ts-actor.over .mouth-happy{display:none}
.ts-actor.over .mouth-sad{display:block}

@keyframes ts-stepA{0%,100%{transform:rotate(22deg)}50%{transform:rotate(-22deg)}}
@keyframes ts-stepB{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(22deg)}}
@keyframes ts-bob{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@keyframes ts-waddle{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-6px)}}
@keyframes ts-jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-18px)}}
@keyframes ts-sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes ts-shake{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes ts-pop{0%{transform:scale(.6)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes ts-blink{50%{opacity:.25}}
@keyframes ts-blinkEye{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes ts-wag{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
@keyframes ts-cape{0%,100%{transform:skewX(-3deg)}50%{transform:skewX(4deg)}}

/* ===================== festivals ===================== */
.ts-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ts-card{position:relative}
.ts-deco{position:absolute;left:calc(6px * var(--k));right:calc(6px * var(--k));top:calc(-36px * var(--k));height:calc(44px * var(--k));pointer-events:none}
.ts-deco:empty{display:none}
.ts-deco svg{width:100%;height:100%;overflow:visible;display:block}
.ts-greet{margin-top:calc(9px * var(--k));font-size:calc(17px * var(--k));font-weight:700;text-align:center;color:var(--g-ink,var(--c-sub));
  font-family:"Segoe UI","Nirmala UI","Latha",system-ui,sans-serif;line-height:1.25;max-height:2.5em;overflow:hidden}
.ts-greet:empty{display:none}
.ts-actor.over .ts-greet{color:#ffe0e0}
.ts-root[class*="fest-"] .ts-card{margin-top:calc(40px * var(--k))}

.ts-root.fest-deepavali{--c-bg:#3b0a1e;--c-ink:#ffe9a8;--c-sub:#ffc46b;--c-border:#f5b301;--d-bg:#1a0410;--d-ink:#ffb703;--d-glow:rgba(255,183,3,.75);--g-ink:#ffd166}
.ts-root.fest-karthigai{--c-bg:#2b1405;--c-ink:#fff1c1;--c-sub:#ffcf70;--c-border:#ff9f1c;--d-bg:#140800;--d-ink:#ffd166;--d-glow:rgba(255,209,102,.7);--g-ink:#ffb703}
.ts-root.fest-pongal{--c-bg:#fffbea;--c-ink:#5b3a00;--c-sub:#8d5a00;--c-border:#2e7d32;--d-bg:#2e7d32;--d-ink:#fff59d;--d-glow:rgba(255,245,157,.5);--g-ink:#e65100}
.ts-root.fest-puthandu{--c-bg:#f1fff0;--c-ink:#1b4d1b;--c-sub:#2e7d32;--c-border:#f4a300;--d-bg:#1b4d1b;--d-ink:#ffe066;--d-glow:rgba(255,224,102,.5);--g-ink:#c2185b}
.ts-root.fest-christmas{--c-bg:#ffffff;--c-ink:#b71c1c;--c-sub:#1b5e20;--c-border:#1b5e20;--d-bg:#1b5e20;--d-ink:#ffffff;--d-glow:rgba(255,255,255,.45);--g-ink:#c62828}
.ts-root.fest-newyear{--c-bg:#0d0d0d;--c-ink:#ffd700;--c-sub:#f5f5f5;--c-border:#ffd700;--d-bg:#000;--d-ink:#ffd700;--d-glow:rgba(255,215,0,.7);--g-ink:#ffd700}
.ts-root.fest-ramzan{--c-bg:#0b2545;--c-ink:#f6e7b4;--c-sub:#cfe3ff;--c-border:#d4af37;--d-bg:#061a33;--d-ink:#f6e7b4;--d-glow:rgba(246,231,180,.55);--g-ink:#f6d365}

/* prop / decoration animations */
.fx-flame{transform-box:fill-box;transform-origin:50% 100%;animation:ts-flame .35s ease-in-out infinite alternate}
.ts-deco .fx-flame{transform-box:view-box}
.fx-glow{animation:ts-glow 1.2s ease-in-out infinite alternate}
.fx-glowfill{animation:ts-glow .9s ease-in-out infinite alternate}
.fx-spark{animation:ts-spin .6s linear infinite}
.fx-foam{transform-box:fill-box;transform-origin:50% 100%;animation:ts-foam 1s ease-in-out infinite alternate}
.fx-bulb{animation:ts-blink 1.2s steps(2) infinite}
.fx-twinkle{animation:ts-blink 1.6s ease-in-out infinite}
.fx-conf{animation:ts-blink .8s steps(2) infinite}
@keyframes ts-flame{from{transform:scale(1,1) rotate(-3deg)}to{transform:scale(.88,1.12) rotate(3deg)}}
@keyframes ts-glow{from{opacity:.45}to{opacity:1}}
@keyframes ts-spin{to{transform:rotate(360deg)}}
@keyframes ts-foam{from{transform:scale(1,1)}to{transform:scale(1.08,1.2)}}

/* card only (no character) */
.ts-actor.nochar .ts-char{display:none}
.ts-actor.nochar .ts-card{margin-left:0}
/* real photo character: slightly larger and with a soft shadow so cut-out photos sit nicely */
.ts-actor.photo .ts-char{width:calc(200px * var(--k));height:calc(320px * var(--k))}
.ts-actor.photo .ts-char img{filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.ts-actor.photo .ts-card{margin-left:calc(6px * var(--k))}

/* ===================== idle + time-over animations (animations.js) ===================== */
.ts-char[class*="idle-"],.ts-char[class*="over-"]{transform-origin:50% 100%}
.ts-char.idle-breathe{animation:ti-breathe 3s ease-in-out infinite alternate}
.ts-char.idle-bob{animation:ti-bob 1.2s ease-in-out infinite alternate}
.ts-char.idle-sway{animation:ti-sway 2.6s ease-in-out infinite alternate}
.ts-char.idle-float{animation:ti-float 2.4s ease-in-out infinite alternate}
.ts-char.idle-hop{animation:ti-hop 1.4s ease-in-out infinite}
.ts-char.idle-nod{animation:ti-nod .9s ease-in-out infinite alternate}
.ts-char.idle-lean{animation:ti-lean 2s ease-in-out infinite alternate}
.ts-char.idle-pulse{animation:ti-pulse 1s ease-in-out infinite alternate}
.ts-char.idle-heartbeat{animation:ti-heart 1.3s ease-in-out infinite}
.ts-char.idle-wiggle{animation:ti-wiggle .35s ease-in-out infinite alternate}
.ts-char.idle-dance{animation:ti-dance 1s ease-in-out infinite}
.ts-char.idle-tilt{animation:ti-tilt 3s ease-in-out infinite alternate}
.ts-char.over-jump{animation:ts-jump .6s ease-in-out infinite}
.ts-char.over-shake{animation:ti-shake .12s linear infinite alternate}
.ts-char.over-pulse{animation:ti-bigpulse .5s ease-in-out infinite alternate}
.ts-char.over-spin{animation:ti-spin 1.6s linear infinite}
.ts-char.over-dance{animation:ti-dance .6s ease-in-out infinite}
@keyframes ti-breathe{from{transform:scale(1,1)}to{transform:scale(1.015,1.035)}}
@keyframes ti-bob{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes ti-sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@keyframes ti-float{from{transform:translateY(0)}to{transform:translateY(-14px)}}
@keyframes ti-hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-18px)}}
@keyframes ti-nod{from{transform:rotate(0)}to{transform:rotate(3deg)}}
@keyframes ti-lean{from{transform:rotate(0)}to{transform:rotate(4deg)}}
@keyframes ti-pulse{from{transform:scale(1)}to{transform:scale(1.05)}}
@keyframes ti-heart{0%,28%,70%,100%{transform:scale(1)}14%,42%{transform:scale(1.08)}}
@keyframes ti-wiggle{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes ti-dance{0%,100%{transform:rotate(-6deg) translateY(0)}25%,75%{transform:rotate(0) translateY(-10px)}50%{transform:rotate(6deg) translateY(0)}}
@keyframes ti-tilt{from{transform:rotate(0)}to{transform:rotate(-3deg)}}
@keyframes ti-shake{from{transform:translateX(-8px)}to{transform:translateX(8px)}}
@keyframes ti-bigpulse{from{transform:scale(1)}to{transform:scale(1.12)}}
@keyframes ti-spin{from{transform:perspective(600px) rotateY(0)}to{transform:perspective(600px) rotateY(360deg)}}