:root {
    --red:#B82020; --green:#D7E7A1; --green-mid:#BFD36B; --gold:#D4A017; --gold-lt:#F5C518;
    --cream:#FFF8E7; --sky:#a8dcf0; --dark:#1A0A00;
    --stripe:repeating-linear-gradient(-45deg,var(--red) 0px,var(--red) 20px,var(--cream) 20px,var(--cream) 40px);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{background:var(--sky);font-family:'Cormorant Garamond',Georgia,serif;color:var(--dark);overflow-x:hidden;}

  /* STICKY BUNTING */
  .bunting-sticky{position:sticky;top:0;left:0;right:0;height:62px;z-index:999;pointer-events:none;}
  .bunting-sticky svg{width:100%;height:62px;}

  /* COUNTDOWN BAR */
  #countdown-bar {
    position: relative;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: linear-gradient(135deg, var(--gold-lt) 0%, var(--red) 25%, var(--red) 75%, var(--gold-lt) 100%);
    border-bottom: 3px solid var(--gold);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 4px 18px rgba(0,0,0,.45);
    flex-wrap: nowrap;
  }
  #countdown-bar .cd-label {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(.5rem, 1.1vw, .72rem);
    color: var(--gold);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-right: 6px;
    white-space: nowrap;
    display: none; /* hidden on mobile, shown on wider screens */
  }
  @media (min-width: 480px) {
    #countdown-bar .cd-label { display: inline; }
  }
  .cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,.07);
    border: 2px solid var(--gold);
    border-radius: 10px;
    padding: 4px 10px 3px;
    min-width: 52px;
    flex-shrink: 0;
  }
  .cd-unit .cd-num {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(1.4rem, 5vw, 2.6rem);
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -1px;
  }
  .cd-unit .cd-name {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(.5rem, 1.5vw, .7rem);
    font-weight: 700;
    color: var(--gold-lt);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 2px;
  }
  .cd-sep {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(1.2rem, 4vw, 2rem);
    font-weight: 900;
    color: var(--gold);
    margin: 0 1px;
    line-height: 1;
    flex-shrink: 0;
    animation: blink 1s step-end infinite;
  }
  @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.2;} }
  #countdown-bar.countdown-single .cd-unit { min-width: 155px; }
  #countdown-bar.countdown-single .cd-unit .cd-num { font-size: clamp(1.8rem, 5vw, 3rem); }
  #countdown-bar.countdown-single .cd-sep { display: none; }
  #countdown-bar.countdown-single .cd-unit:not(:first-of-type) { display: none; }

  /* HERO */
  .hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px 0;overflow:hidden;background:linear-gradient(180deg,#a8dcf0 0%,#a8dcf0 55%,#7ec8e3 100%);}

  .sirkus-word{display:block;margin:30px auto 0;width:min(760px,92vw);animation:floatIn 1s cubic-bezier(.17,.67,.3,1.3) both;filter:drop-shadow(0 6px 20px rgba(0,0,0,.22));mix-blend-mode:multiply;}

  .date-wrap{display:flex;flex-direction:column;align-items:center;margin:22px 0 6px;animation:floatIn 1s .15s cubic-bezier(.17,.67,.3,1.3) both;}
  .date-rule{display:flex;align-items:center;gap:14px;justify-content:center;}
  .date-rule hr{flex:1;max-width:80px;border:none;border-top:2px solid var(--gold);}
  .date-main{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4.5vw,3rem);font-weight:900;color:var(--red);letter-spacing:1px;text-shadow:1px 1px 0 rgba(255,255,255,.6);text-align:center;width:100%;}
  .date-sub{font-family:'Nunito',sans-serif;font-size:clamp(1rem,2.2vw,1.35rem);font-weight:600;color:var(--dark);letter-spacing:3px;margin-top:4px;opacity:.85;text-align:center;width:100%;}
  .location-line{font-family:'Cinzel Decorative',serif;font-size:clamp(.75rem,1.8vw,1.05rem);color:var(--red);letter-spacing:3px;margin:10px 0 16px;animation:floatIn 1s .25s cubic-bezier(.17,.67,.3,1.3) both;text-align:center;}
  .juba-logo{display:block;width:110px;margin:0 auto 18px;animation:floatIn 1s .35s cubic-bezier(.17,.67,.3,1.3) both;}
  .banner-wrap{width:min(880px,95vw);margin:0 auto;animation:floatIn 1.1s .45s ease both;filter:drop-shadow(0 14px 36px rgba(0,0,0,.28));}
  .banner-wrap img{width:100%;border-radius:14px;}

  /* STRIPE */
  .stripe-divider{height:28px;background:var(--stripe);border-top:3px solid var(--red);border-bottom:3px solid var(--red);}

  /* MONSTERS */
  .monsters-section{background:var(--cream);padding:64px 20px 24px;text-align:center;overflow:hidden;position:relative;}
  .section-eyebrow{font-family:'Cinzel Decorative',serif;font-size:clamp(.7rem,1.5vw,.9rem);letter-spacing:5px;color:var(--gold);margin-bottom:8px;}
  .monsters-section h2{font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,3.4rem);font-weight:900;font-style:italic;color:var(--red);text-shadow:2px 2px 0 rgba(212,160,23,.4);margin-bottom:12px;line-height:1.1;}
  .monsters-section p{font-family:'Nunito',sans-serif;font-size:clamp(1rem,2.2vw,1.2rem);font-weight:600;color:#555;max-width:560px;margin:0 auto 44px;line-height:1.6;}

  /* Monster row with flex + transition for swapping */
  .monsters-row{display:flex;justify-content:center;align-items:flex-end;max-width:860px;margin:0 auto;gap:0;}
  .monster-card{flex:1;min-width:0;display:flex;align-items:flex-end;justify-content:center;position:relative;}
  .monster-card img{
    width:100%;max-width:190px;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.15));
    transition:transform .35s cubic-bezier(.17,.67,.3,1.3);
    cursor:pointer;
    user-select:none;
    -webkit-user-drag:none;
  }
  .monster-card img:hover{transform:translateY(-16px) scale(1.1);}

  /* Shuffle animation */
  .monster-card.shuffle-out{animation:shuffleOut .22s ease forwards;}
  .monster-card.shuffle-in{animation:shuffleIn .28s ease forwards;}
  @keyframes shuffleOut{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-40px) scale(.7) rotate(20deg);}}
  @keyframes shuffleIn{0%{opacity:0;transform:translateY(60px) scale(.7) rotate(-15deg);}100%{opacity:1;transform:translateY(0) scale(1) rotate(0deg);}}

  /* Hold effect: spin + rainbow */
  .monster-card img.holding{
    animation:holdSpin .6s linear infinite, rainbow 1s linear infinite !important;
    filter:drop-shadow(0 0 18px var(--gold-lt)) drop-shadow(0 0 36px #ff69b4) !important;
    transform:scale(1.2) !important;
  }
  @keyframes holdSpin{from{transform:scale(1.2) rotate(0deg);}to{transform:scale(1.2) rotate(360deg);}}
  @keyframes rainbow{
    0%  {filter:drop-shadow(0 0 18px #ff0000);}
    16% {filter:drop-shadow(0 0 18px #ff8800);}
    33% {filter:drop-shadow(0 0 18px #ffff00);}
    50% {filter:drop-shadow(0 0 18px #00ff00);}
    66% {filter:drop-shadow(0 0 18px #0088ff);}
    83% {filter:drop-shadow(0 0 18px #ff00ff);}
    100%{filter:drop-shadow(0 0 18px #ff0000);}
  }

  /* Juba logo hold pulse */
  .juba-logo.juba-disco{
    animation:jubaDisco .3s linear infinite !important;
    filter:drop-shadow(0 0 20px var(--gold-lt));
  }
  @keyframes jubaDisco{
    0%  {transform:scale(1)   rotate(-8deg);filter:hue-rotate(0deg)   drop-shadow(0 0 16px #ff0);}
    25% {transform:scale(1.3) rotate(8deg); filter:hue-rotate(90deg)  drop-shadow(0 0 24px #0ff);}
    50% {transform:scale(.9)  rotate(-5deg);filter:hue-rotate(180deg) drop-shadow(0 0 20px #f0f);}
    75% {transform:scale(1.2) rotate(5deg); filter:hue-rotate(270deg) drop-shadow(0 0 18px #0f0);}
    100%{transform:scale(1)   rotate(-8deg);filter:hue-rotate(360deg) drop-shadow(0 0 16px #ff0);}
  }

  /* Burst particle */
  .burst{position:fixed;pointer-events:none;font-size:1.6rem;z-index:9999;animation:burstFly .8s ease forwards;}
  @keyframes burstFly{
    0%  {opacity:1;transform:translate(0,0) scale(1);}
    100%{opacity:0;transform:translate(var(--bx),var(--by)) scale(.3);}
  }

  /* Sparkles & stars */
  .sparkle{position:absolute;pointer-events:none;font-size:1.4rem;animation:sparkleFloat linear infinite;opacity:0;}
  @keyframes sparkleFloat{0%{opacity:0;transform:translateY(0) rotate(0deg) scale(.6);}20%{opacity:.9;}80%{opacity:.9;}100%{opacity:0;transform:translateY(-120px) rotate(360deg) scale(1.2);}}
  .gold-star{position:absolute;pointer-events:none;color:var(--gold-lt);font-size:1.2rem;opacity:0;animation:starDrift linear infinite;}
  @keyframes starDrift{0%{opacity:0;transform:translateY(60px) rotate(0deg);}15%{opacity:.7;}85%{opacity:.7;}100%{opacity:0;transform:translateY(-80px) rotate(540deg);}}

  /* INFO */
  .info-section{background:var(--red);padding:64px 20px 56px;text-align:center;position:relative;overflow:hidden;}
  .info-section::before{content:'';display:block;height:4px;background:linear-gradient(90deg,transparent,var(--gold-lt),transparent);margin-bottom:44px;}
  .info-section .section-eyebrow{color:var(--gold-lt);}
  .info-section h2{font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:900;font-style:italic;color:var(--gold-lt);margin-bottom:44px;text-shadow:2px 2px 6px rgba(0,0,0,.4);line-height:1.15;}
  .info-cards{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;max-width:880px;margin:0 auto 44px;}
  .info-card{background:var(--cream);border:3px solid var(--gold);border-radius:14px;padding:28px 26px 24px;width:200px;box-shadow:4px 5px 0 rgba(0,0,0,.35);transition:transform .25s ease,box-shadow .25s ease;position:relative;overflow:hidden;}
  .info-card::after{content:'✦';position:absolute;bottom:8px;right:10px;font-size:.8rem;color:var(--gold);opacity:.4;}
  .info-card:hover{transform:translateY(-8px) rotate(-1.5deg);box-shadow:6px 12px 0 rgba(0,0,0,.3);}
  .info-card .icon{font-size:2.2rem;margin-bottom:10px;}
  .info-card h3{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;color:var(--gold-lt);margin-bottom:7px;}
  .info-card p{font-family:'Nunito',sans-serif;font-size:.92rem;font-weight:600;color:#444;line-height:1.5;}

  .cta{display:inline-block;font-family:'Cinzel Decorative',serif;font-size:clamp(.9rem,2vw,1.15rem);letter-spacing:2px;background:var(--gold-lt);color:var(--dark);padding:16px 46px;border-radius:50px;border:3px solid var(--dark);box-shadow:4px 4px 0 rgba(0,0,0,.4);text-decoration:none;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;}
  .cta::before{content:'';position:absolute;top:-50%;left:-75%;width:50%;height:200%;background:rgba(255,255,255,.45);transform:skewX(-20deg);animation:shimmer 3s 1.5s infinite;}
  @keyframes shimmer{0%{left:-75%;opacity:1;}60%{left:125%;opacity:1;}100%{left:125%;opacity:0;}}
  .cta:hover{transform:translateY(-3px);box-shadow:6px 8px 0 rgba(0,0,0,.4);}

  footer{background:var(--dark);color:#999;text-align:center;padding:30px 20px;font-family:'Nunito',sans-serif;font-size:.95rem;line-height:1.7;}
  footer img{width:72px;margin-bottom:10px;opacity:.75;}
  footer a{color:var(--gold-lt);text-decoration:none;}

  @keyframes floatIn{from{opacity:0;transform:translateY(28px) scale(.92);}to{opacity:1;transform:translateY(0) scale(1);}}
  .confetti-dot{position:absolute;border-radius:50%;pointer-events:none;animation:drift linear infinite;}
  @keyframes drift{from{transform:translateY(-20px) rotate(0deg);opacity:.75;}to{transform:translateY(110vh) rotate(720deg);opacity:0;}}
  .reveal{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease;}
  .reveal.visible{opacity:1;transform:translateY(0);}
  @media(max-width:560px){.info-card{width:150px;padding:20px 14px;}}

  /* JOOMLA REGIONS */
  .jl-modules-top{background:var(--cream);padding:10px 20px;text-align:center;}
  .jl-modules-bottom{background:var(--green);padding:10px 20px;text-align:center;}
  .jl-modules-menu{position:fixed;top:0;right:0;z-index: 1010;padding:10px 20px;text-align:center;}
  .component-content{max-width:880px;margin:0 auto;padding:0 20px;font-family:'Nunito',sans-serif;color:#333;line-height:1.6;}
  .component-content:empty{display:none;}
