:root{--paper:#f7f4ee;--cream:#f2eee5;--orange:#ff6517;--orange2:#ff8a2b;--sky:#47aedf;--blue:#1f87b8;--navy:#0e3247;--lime:#c9ff4a;--ink:#14161c;--muted:#6f747f;--line:rgba(20,22,28,.1);--head:"Manrope",sans-serif;--body:"DM Sans",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}button,input{font:inherit}a{color:inherit}img{display:block;max-width:100%}#confetti{position:fixed;inset:0;z-index:60;pointer-events:none;display:none}

/* ---------- header ---------- */
.game-header{position:fixed;z-index:10;top:18px;left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 36px));height:72px;padding:0 20px;border:1px solid rgba(71,174,223,.28);border-radius:20px;background:rgba(255,255,255,.78);box-shadow:0 10px 34px rgba(14,50,71,.1),inset 0 1px 0 #fff;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);color:var(--ink);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.back,.help{color:#3d4a55;font-size:11px;font-weight:700;text-decoration:none;transition:color .2s}.back:hover,.help:hover{color:var(--ink)}.help{text-align:right}
.game-brand{justify-self:center;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(155deg,#1a5878,#0a1f2d);box-shadow:0 6px 16px rgba(10,31,45,.26),inset 0 1px 0 rgba(255,255,255,.18);overflow:hidden}
.game-brand img{width:33px;height:24px;object-fit:cover;object-position:center top;mix-blend-mode:screen}

/* ---------- arena ---------- */
.arena{position:relative;min-height:100svh;padding:96px max(4vw,calc((100vw - 1320px)/2)) 44px;display:grid;grid-template-columns:minmax(215px,.7fr) minmax(450px,1.25fr) minmax(275px,.72fr);gap:42px;align-items:center;overflow:hidden;color:var(--ink);background:radial-gradient(1000px 820px at 50% 42%,#fff 0,#f8f4ee 46%,#efe8dd 100%)}
.arena::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(20,22,28,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,22,28,.035) 1px,transparent 1px);background-size:55px 55px;mask-image:linear-gradient(#000,transparent 92%);-webkit-mask-image:linear-gradient(#000,transparent 92%)}
.arena::after{content:"";position:absolute;width:70vw;height:70vw;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(20,22,28,.06);border-radius:50%;box-shadow:0 0 0 8vw rgba(20,22,28,.014),0 0 0 17vw rgba(20,22,28,.009)}
.ambient{position:absolute;border-radius:50%;filter:blur(20px)}.ambient-one{width:450px;height:450px;right:-10%;top:10%;background:rgba(71,174,223,.2)}.ambient-two{width:420px;height:420px;left:-12%;bottom:-18%;background:rgba(255,101,23,.15)}
.arena-festoon{position:absolute;z-index:0;right:0;bottom:0;left:0;height:50%;background:url("assets/dashain-tihar-hero-light.jpg") center bottom/cover no-repeat;opacity:.55;mask-image:linear-gradient(transparent,#000 72%);-webkit-mask-image:linear-gradient(transparent,#000 72%);pointer-events:none}
.arena>*:not(.ambient):not(.arena-festoon):not(.fest-scene){position:relative;z-index:2}

/* ---------- Dashain + Tihar strip ---------- */
.festival-strip{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:clamp(60px,7vw,90px) max(4vw,calc((100vw - 1320px)/2));background:var(--paper);border-top:1px solid var(--line)}
.fest-tile{position:relative;min-height:340px;border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 22px 54px rgba(14,50,71,.14);transition:transform .4s,box-shadow .4s}
.fest-tile:hover{transform:translateY(-6px);box-shadow:0 34px 70px rgba(14,50,71,.2)}
.fest-tile img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.fest-tile::after{content:"";position:absolute;inset:34% 0 0;background:linear-gradient(transparent,rgba(6,20,30,.92))}
.fest-tile>div{position:absolute;z-index:2;right:28px;bottom:26px;left:28px;color:#fff}
.fest-tile small{color:var(--orange2);font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.fest-tile h3{margin:8px 0 7px;font:800 28px/1.05 var(--head);letter-spacing:-.045em}
.fest-tile p{margin:0;max-width:40ch;color:rgba(255,255,255,.7);font-size:12.5px;line-height:1.55}
.overline{margin:0;color:var(--blue);font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.arena-copy{top:24px}
.arena-copy h1{margin:16px 0 20px;font:800 clamp(48px,5vw,78px)/.92 var(--head);letter-spacing:-.07em}
.arena-copy h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.8px var(--sky)}
.arena-copy>p:not(.overline){max-width:400px;margin:0;color:var(--muted);font-size:16.5px;line-height:1.65}.arena-copy>p b{color:var(--ink)}
.cash-stack{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.cash-stack span{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:11.5px;font-weight:800;box-shadow:0 4px 12px rgba(20,22,28,.05)}
.cash-stack span:last-child{border-color:#bfe957;background:rgba(201,255,74,.4);color:#46600a}
.fairness{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:grid;grid-template-columns:25px 1fr;gap:10px;color:var(--muted);font-size:12.5px}.fairness span{color:var(--orange);font-weight:800}

/* ---------- wheel ---------- */
/* --wheel is the wheel face; the frame adds 8.5% on every side and the pointer
   medallion rises ~10% above it, so the margins below are in the same unit. */
.wheel-stage{top:22px;text-align:center;perspective:1100px;--wheel:min(700px,calc((100svh - 238px)/1.2),47vw)}
.wheel-shell{width:var(--wheel);aspect-ratio:1;margin:calc(var(--wheel)*.11) auto calc(var(--wheel)*.09);position:relative;border-radius:50%;filter:drop-shadow(0 34px 42px rgba(75,16,29,.3));transform:rotateX(2deg);transform-style:preserve-3d;transition:filter .4s,transform .4s,width .6s,margin .6s}
.wheel-shell:hover{transform:rotateX(0) translateY(-5px)}

.wheel-shell #wheel{position:relative;z-index:2;width:100%;height:100%;border-radius:50%;display:block;will-change:transform}   /* turned frame by frame in game.js */
.wheel-shell.locked{filter:saturate(.96) brightness(.98) drop-shadow(0 34px 42px rgba(75,16,29,.25))}

/* ---------- the frame: lotus crown, lamp band, bead ring (drawn in game.js) ---------- */
.wheel-frame{position:absolute;z-index:3;inset:-8.5%;pointer-events:none;transition:filter .6s}
.wheel-frame svg{display:block;width:100%;height:100%;overflow:visible}

/* the lamps: a slow twinkle while locked, a running chase once the spin is
   unlocked, a fast chase while the wheel turns, and a flash on a win */
.lamp{--t:2.8s;animation:lampWave var(--t) ease-in-out infinite;animation-delay:calc(var(--i)/24*var(--t) - var(--t))}
@keyframes lampWave{0%,42%,100%{opacity:.28}16%{opacity:1}}
.wheel-shell.locked .lamp{--t:5s}
.wheel-shell.locked .lamps{opacity:.75}
.wheel-shell.spinning .lamp{--t:.62s}
.wheel-shell.won .lamp{opacity:1;animation:lampFlash .42s steps(1,end) 9;animation-delay:0s}
.wheel-shell.won .lamp.odd{animation-delay:-.21s}
@keyframes lampFlash{50%{opacity:.12}}
.wheel-shell.won .wheel-frame{filter:drop-shadow(0 0 22px rgba(255,196,84,.6))}

.pointer{position:absolute;z-index:7;top:-10.5%;left:50%;width:10.5%;height:15.75%;transform:translateX(-50%);transform-origin:50% 26.7%;filter:drop-shadow(0 8px 7px rgba(71,20,24,.42))}
.pointer svg{display:block;width:100%;height:100%;overflow:visible}
.wheel-hub{position:absolute;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%) translateZ(40px);width:16.5%;height:16.5%;border:3px solid #ffe197;border-radius:50%;background:radial-gradient(circle at 36% 28%,#cb3650,#8d1730 64%,#600d23);box-shadow:0 0 0 4px #741128,0 0 0 7px #e9bd5f,0 13px 27px rgba(78,11,29,.42),inset 0 1px rgba(255,255,255,.3);color:#ffe9b4;font:800 12px var(--head);letter-spacing:.15em;cursor:pointer;transition:transform .25s,background .3s,box-shadow .3s}
.wheel-hub::before{display:none}
.wheel-hub.ready{border-color:#fff0b8;background:radial-gradient(circle at 34% 26%,#ff5c70,#bd1f40 55%,#7b102b);box-shadow:0 0 0 4px #80142d,0 0 0 8px #f0ca70,0 0 0 17px rgba(228,45,76,.16),0 16px 34px rgba(91,12,31,.48);color:#fffdf4;animation:ready 1.9s ease-in-out infinite}
.wheel-hub.ready:hover{transform:translate(-50%,-50%) scale(1.08);animation:none}
.wheel-hub:disabled{cursor:not-allowed}
@keyframes ready{50%{box-shadow:0 0 0 4px #80142d,0 0 0 8px #f0ca70,0 0 0 25px rgba(228,45,76,0),0 18px 42px rgba(91,12,31,.52)}}
.status{min-height:21px;margin:0;color:var(--muted);font-size:13px}.status b{color:#762033}


/* ---------- entry panel ---------- */
.entry-panel{max-width:390px;padding:31px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.86);box-shadow:0 28px 70px rgba(14,50,71,.13),inset 0 1px 0 #fff;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:var(--ink);transition:transform .35s,box-shadow .35s}
.entry-panel:hover{transform:translateY(-7px);box-shadow:0 36px 82px rgba(14,50,71,.18)}
.panel-no{color:var(--orange);font:800 8px var(--head);letter-spacing:.18em}
.entry-panel h2{margin:13px 0 8px;font:800 29px/1.1 var(--head);letter-spacing:-.045em}
.entry-panel>p{color:var(--muted);font-size:11.5px;line-height:1.55}
.entry-panel form{margin-top:22px}
.entry-panel label{display:block;margin:13px 0 5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.entry-panel input{width:100%;height:45px;padding:0 2px;border:0;border-bottom:1px solid rgba(20,22,28,.18);border-radius:0;outline:0;background:transparent;color:var(--ink);font-size:14px;transition:border .2s}
.entry-panel input::placeholder{color:rgba(20,22,28,.3)}
.entry-panel input:focus{border-color:var(--sky)}
.primary{width:100%;min-height:51px;margin-top:18px;border:0;border-radius:13px;background:var(--orange);box-shadow:0 13px 30px rgba(255,101,23,.25);color:#fff;font-weight:800;cursor:pointer;transition:transform .2s,box-shadow .2s}
.primary:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(255,101,23,.4)}
.primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.form-error{min-height:16px;margin:9px 0 0!important;color:#cf3a11!important;font-size:10.5px!important}
.privacy{text-align:center;color:var(--muted);font-size:9.5px!important}

/* ---------- bumper story ---------- */
.prize-story{display:grid;grid-template-columns:.9fr 1.05fr 1.05fr;background:var(--paper);border-top:1px solid var(--line)}
.story-lead,.draw-column{padding:80px 5vw}
.story-lead h2{margin:17px 0 23px;font:800 clamp(40px,4.3vw,62px)/.95 var(--head);letter-spacing:-.055em}
.story-lead>p:not(.overline){color:var(--muted);font-size:14.5px;line-height:1.75}
.story-lead a{display:inline-block;margin-top:24px;color:#d94d0a;font-size:11.5px;font-weight:800;text-underline-offset:4px}
.draw-column{border-left:1px solid var(--line);background:#fff}
.draw-label{margin:0 0 26px;color:var(--blue);font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.draw-column article{display:grid;grid-template-columns:58px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line);transition:padding-left .25s}
.draw-column article:hover{padding-left:10px}
.draw-column article>b{color:var(--orange);font:800 34px/1 var(--head);letter-spacing:-.06em}
.draw-column small{color:var(--blue);font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.draw-column h3{margin:5px 0 3px;font:800 18px var(--head)}
.draw-column article p{margin:0;color:var(--muted);font-size:11.5px}
.special-draw{background:#f0f8fc}
.draw-date{margin-top:22px;padding:20px;border-radius:15px;background:linear-gradient(150deg,#15506f,#0b2434);color:#fff}
.draw-date small{color:var(--orange2)}
.draw-date strong{display:block;margin-top:6px;font:800 16px var(--head)}
.draw-date p{margin:7px 0 0;color:rgba(255,255,255,.62);font-size:10px;line-height:1.5}
.rules-bar{display:grid;grid-template-columns:repeat(3,1fr);background:var(--orange);color:#fff}
.rules-bar div{padding:28px 5vw;border-right:1px solid rgba(255,255,255,.22)}
.rules-bar small{display:block;margin-bottom:6px;font-size:8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.rules-bar b{font:700 12px var(--head)}

/* ---------- result ---------- */
.result{position:fixed;z-index:50;inset:0;display:none;place-items:center;padding:18px;background:rgba(14,50,71,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.result.open{display:grid}
.result-card{position:relative;width:min(470px,100%);padding:38px 32px 30px;border:1px solid rgba(255,255,255,.7);border-radius:25px;background:#fff;box-shadow:0 40px 110px rgba(14,50,71,.4);animation:resultIn .45s cubic-bezier(.2,.9,.25,1.15)}
@keyframes resultIn{from{opacity:0;transform:translateY(30px) scale(.94)}}
.result-card .close{position:absolute;right:16px;top:13px;width:34px;height:34px;border:0;border-radius:50%;background:var(--cream);color:var(--ink);font-size:24px;cursor:pointer}
.result-card h2{margin:13px 0 15px;font:800 39px/1 var(--head);letter-spacing:-.055em}
.result-card p{color:var(--muted);font-size:13px;line-height:1.6}
.coupon{position:relative;margin:21px 0;padding:20px;border-radius:15px;background:linear-gradient(150deg,#15506f,#0b2434);color:#fff;text-align:center;font:800 24px var(--head);letter-spacing:.08em;overflow:hidden}
.coupon::after{content:"";position:absolute;width:100px;height:100px;right:-30px;top:-45px;border-radius:50%;background:var(--orange);filter:blur(35px);opacity:.5}
.coupon small{position:relative;z-index:1;display:block;margin-bottom:6px;color:var(--lime);font:800 8px var(--body);letter-spacing:.15em}
.result-list{padding:16px 18px;border-radius:13px;background:var(--cream);color:var(--muted);font-size:11.5px;line-height:1.7}.result-list b{color:var(--ink)}

@media(max-width:1180px){.arena{grid-template-columns:.8fr 1.2fr;padding-top:118px}.festival-strip{gap:14px}.entry-panel{grid-column:1/3;max-width:none;display:grid;grid-template-columns:.55fr 1.45fr;gap:25px}.entry-panel form{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16px;margin:0}.entry-panel form label{display:none}.entry-panel .primary,.entry-panel .form-error{grid-column:1/4}.entry-panel .privacy{display:none}.wheel-stage{--wheel:min(600px,56vw)}.prize-story{grid-template-columns:1fr 1fr}.story-lead{grid-column:1/3}}
@media(max-width:700px){.game-header{top:8px;width:calc(100% - 16px);height:62px;padding:0 12px}.game-brand{width:42px;height:42px;border-radius:12px}.game-brand img{width:30px;height:22px}.back{font-size:0}.back::after{content:"←";font-size:18px}.help{font-size:10px}.arena{display:flex;flex-direction:column;min-height:auto;padding:96px 16px 58px}.arena-copy{width:100%}.arena-copy h1{font-size:52px}.arena-copy>p:not(.overline){font-size:14px}.cash-stack{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.cash-stack span{flex:0 0 auto}.fairness{display:none}.wheel-stage{order:3;width:100%;--wheel:min(420px,80vw)}.wheel-hub{border-width:3px;font-size:9.5px;letter-spacing:.08em}.entry-panel{order:2;display:block;width:100%;margin-top:14px;padding:25px 21px}.entry-panel form{display:block}.entry-panel form label{display:block}.prize-story{display:block}.story-lead,.draw-column{padding:58px 21px}.draw-column{border-left:0;border-top:1px solid var(--line)}.rules-bar{grid-template-columns:1fr}.rules-bar div{padding:22px;border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}.festival-strip{grid-template-columns:1fr;gap:12px;padding:56px 16px}.fest-tile{min-height:300px}.fest-tile>div{right:22px;bottom:22px;left:22px}.fest-tile h3{font-size:25px}.result-card{padding:30px 22px 24px}.result-card h2{font-size:30px}.coupon{font-size:19px;letter-spacing:.05em}.arena-festoon{height:38%;opacity:.4}}
@media(prefers-reduced-motion:reduce){.lamp,.wheel-hub.ready{animation:none}}


/* ---------- spin focus mode ----------
   Once the entry is accepted, everything except the wheel steps aside so the
   customer is looking at one thing only. It all comes back when the result
   dialog is closed. */
.game-header{transition:opacity .55s,transform .55s}
.arena-festoon{transition:opacity .55s}
.spotlight .game-header{opacity:0;transform:translateX(-50%) translateY(-26px);pointer-events:none}
.spotlight .arena{display:grid;grid-template-columns:1fr;place-items:center;min-height:100svh;padding:clamp(22px,3.5vh,44px) 12px;
  --spot-wheel:min(1000px,calc((100svh - 100px)/1.21),82vw)}   /* shared with the festival poster below */
.spotlight .arena-copy,.spotlight .entry-panel,.spotlight .festival-strip,.spotlight .prize-story,.spotlight .rules-bar{display:none}
.spotlight .arena-festoon{opacity:.24}
.spotlight .wheel-stage{top:0;width:100%;--wheel:var(--spot-wheel)}
.spotlight .wheel-shell{animation:takeStage .7s cubic-bezier(.2,.9,.25,1.1)}
.spotlight .status{font-size:15px}

@keyframes takeStage{from{transform:rotateX(3deg) scale(.82);opacity:.35}}
@media(prefers-reduced-motion:reduce){.spotlight .wheel-shell{animation:none}}

/* ---------- the result takes over the left column ---------- */
.arena-copy.slide-in{animation:resultSlide .75s cubic-bezier(.2,.9,.25,1.05) both}
@keyframes resultSlide{from{opacity:0;transform:translateX(-64px)}}
.result-head{font:800 clamp(38px,3.7vw,60px)/.95 var(--head)!important;letter-spacing:-.05em;overflow-wrap:break-word}
.result-head em{display:block;font-size:.8em;-webkit-text-stroke-width:1.4px}
.arena-coupon{margin:26px 0 20px;padding:20px 22px;border-radius:18px;background:linear-gradient(150deg,#15506f,#0b2434);color:#fff;box-shadow:0 20px 44px rgba(14,50,71,.24)}
.arena-coupon small{display:block;margin-bottom:9px;color:var(--lime);font-size:8.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.arena-coupon b{display:block;font:800 27px var(--head);letter-spacing:.07em}
.arena-coupon.plain b{font-size:22px;letter-spacing:-.02em}
.arena-note{max-width:380px;margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.65}
.arena-note b{color:var(--ink)}
.arena-link{display:inline-block;margin-top:6px;color:#d94d0a;font-size:12px;font-weight:800;text-underline-offset:4px}
@media(prefers-reduced-motion:reduce){.arena-copy.slide-in{animation:none}}

/* the coupon box while the code is still on its way from the backend */
.coupon.pending{letter-spacing:0}
.coupon-wait{display:inline-flex;gap:9px;align-items:center;height:29px}
.coupon-wait i{width:9px;height:9px;border-radius:50%;background:var(--lime);opacity:.35;animation:couponWait 1.1s ease-in-out infinite}
.coupon-wait i:nth-child(2){animation-delay:.16s}
.coupon-wait i:nth-child(3){animation-delay:.32s}
@keyframes couponWait{30%{opacity:1;transform:translateY(-4px)}}
.coupon.plain{font-size:20px;letter-spacing:.04em}
@media(prefers-reduced-motion:reduce){.coupon-wait i{animation:none;opacity:.7}}

/* the entry form's message line while it is still waiting on the backend -
   grey and calm, not the red of a real error */
.form-error.waiting{color:var(--muted)!important;font-weight:600}

/* ---------- festival greeting above the wheel ----------
   Styled like a Dashain-Tihar poster: heavy Devanagari, red over green, each
   line cut out with a thick white outline and dropped on a soft shadow. The
   outline is eight stacked text-shadows rather than -webkit-text-stroke,
   because stroke paints over the letter and closes up Devanagari's joins. */
.greeting{margin:0 0 13px;text-align:center;line-height:1.08;
  font-family:"Mukta","Manrope",sans-serif;font-weight:800;letter-spacing:.01em}
.greeting span,.greeting b{display:block;font-weight:800;
  text-shadow:-3px -3px 0 #fff,0 -3px 0 #fff,3px -3px 0 #fff,3px 0 0 #fff,
              3px 3px 0 #fff,0 3px 0 #fff,-3px 3px 0 #fff,-3px 0 0 #fff,
              0 7px 14px rgba(14,50,71,.22)}
.greeting span{font-size:clamp(17px,1.9vw,25px);color:#e01b24}
.greeting b{margin-top:1px;font-size:clamp(22px,2.6vw,34px);color:#1f9d4d}
.greeting i{font-style:normal}
.greeting>svg{display:none}   /* jamara + flags: poster mode only */
.spotlight .greeting{margin-bottom:22px}
@media(max-width:700px){
  .greeting{margin-bottom:14px}
  .greeting span,.greeting b{text-shadow:-2px -2px 0 #fff,0 -2px 0 #fff,2px -2px 0 #fff,2px 0 0 #fff,
    2px 2px 0 #fff,0 2px 0 #fff,-2px 2px 0 #fff,-2px 0 0 #fff,0 5px 10px rgba(14,50,71,.22)}
  .greeting span{font-size:17px}
  .greeting b{font-size:22px}
}

/* ---------- the festival poster ----------
   While the wheel has the screen on a wide display, the greeting leaves the
   top of the wheel and becomes a Dashain-Tihar poster in the empty space to
   its left: big 3D lettering, jamara behind it, a string of flags under it.
   Kites, bunting, marigold garlands and a row of diyo dress the rest. The
   wheel keeps exactly the size it had. --side / --gside is the width of the
   space either side of the wheel frame (the frame is 1.17 x the wheel).
   Phones get the same poster stacked above the wheel - see the block after
   this one, which only overrides where things sit. Tablets and squarish
   screens in between keep the plain greeting. */
.fest-scene{display:none}
@media (min-width:1100px) and (min-aspect-ratio:8/5),(min-width:1400px) and (min-aspect-ratio:7/5),(min-width:1800px) and (min-aspect-ratio:5/4),(max-width:700px){
  .spotlight .greeting{--gside:calc((100% - var(--wheel)*1.17)/2);--pad:max(18px,calc(var(--gside)/2 - 270px));
    position:absolute;z-index:1;top:50%;left:0;width:var(--gside);margin:0;padding:0 var(--pad);
    container-type:inline-size;transform:translateY(-55%);animation:posterIn .9s cubic-bezier(.2,.9,.25,1.08) .1s both}
  /* same cut-out trick as above, scaled in em so it grows with the type: a
     white outline, a dark 3D block under it, then a soft drop shadow */
  .spotlight .greeting .g-top,.spotlight .greeting .g-main i{display:block;white-space:nowrap;
    font-family:"Baloo 2","Mukta",sans-serif;font-weight:800;line-height:1.08;letter-spacing:0;
    text-shadow:.06em 0 0 #fff,.055em .023em 0 #fff,.042em .042em 0 #fff,.023em .055em 0 #fff,
      0 .06em 0 #fff,-.023em .055em 0 #fff,-.042em .042em 0 #fff,-.055em .023em 0 #fff,
      -.06em 0 0 #fff,-.055em -.023em 0 #fff,-.042em -.042em 0 #fff,-.023em -.055em 0 #fff,
      0 -.06em 0 #fff,.023em -.055em 0 #fff,.042em -.042em 0 #fff,.055em -.023em 0 #fff,
      -.05em .075em 0 var(--deep),.07em .075em 0 var(--deep),-.045em .1em 0 var(--deep),.075em .1em 0 var(--deep),
      -.04em .125em 0 var(--deep),.08em .125em 0 var(--deep),-.035em .15em 0 var(--deep),.085em .15em 0 var(--deep),
      .025em .16em 0 var(--deep),.05em .26em .18em rgba(60,15,10,.28)}
  .spotlight .greeting .g-top{--deep:#7d0f12;font-size:11.5cqi;color:#e8141c}
  .spotlight .greeting .g-main{margin:0;text-shadow:none}
  .spotlight .greeting .g-main i{--deep:#0b5227;color:#22a447}
  .spotlight .greeting .g-main i:first-child{font-size:14.8cqi}
  .spotlight .greeting .g-main i:last-child{font-size:20.2cqi;line-height:1}
  .spotlight .greeting>svg{display:block;height:auto}
  .g-jamara{position:absolute;z-index:-1;top:-15cqi;right:calc(var(--pad) - 2cqi);width:21cqi;transform:rotate(24deg);transform-origin:50% 100%}
  .g-flags{position:relative;width:64%;margin:2.6cqi auto 0}

  .spotlight .fest-scene{--side:calc((100% - var(--spot-wheel)*1.17)/2);display:block;position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none;animation:sceneIn 1.1s ease .15s both}
  .fest-scene svg{position:absolute;display:block;height:auto;overflow:visible}

  /* bunting under a marigold mala, hung from each top corner */
  .garland{top:0;width:var(--side);animation:garlandDrop 1s cubic-bezier(.2,.9,.25,1.12) .1s both}
  .garland-l{left:0}.garland-r{right:0}
  .bunting-line{fill:none;stroke:#6b4423;stroke-width:1.6}
  .flag{transform-box:fill-box;transform-origin:50% 0;animation:flutter 2.8s ease-in-out infinite}
  .garland g:nth-child(3n)>.flag{animation-delay:-.9s}
  .garland g:nth-child(3n+1)>.flag{animation-delay:-1.9s}
  .flag .fold{fill:rgba(0,0,0,.14)}
  .mala{fill:none;stroke:#f57c00;stroke-width:14;stroke-linecap:round;stroke-dasharray:0 13}
  .mala-2{stroke:#ffb300;stroke-width:9;stroke-dashoffset:-6.5}
  .mala-3{stroke:#d84315;stroke-width:3.5}

  /* kites: the whole string swings from its end off-screen, the kite bobs on it */
  .kite{filter:drop-shadow(0 10px 8px rgba(40,20,10,.16));animation:kiteSway 8s ease-in-out infinite}
  .kite-1{left:calc(var(--side)*-.2);top:4%;width:calc(var(--side)*.8);transform-origin:0 100%}
  .kite-2{right:calc(var(--side)*-.1);top:14%;width:calc(var(--side)*.88);transform-origin:100% 100%;animation-name:kiteSwayR;animation-duration:9.5s}
  .kite-3{right:calc(var(--side)*-.05);top:8%;width:calc(var(--side)*.5);transform-origin:100% 100%;opacity:.85;animation-name:kiteSwayR;animation-duration:7s;animation-delay:-3s}
  .kite-line{fill:none;stroke:rgba(70,45,30,.42);stroke-width:1.3;vector-effect:non-scaling-stroke}
  .kite-edge{fill:none;stroke:#fff;stroke-width:3;stroke-linejoin:round}
  .kite-spar{fill:none;stroke:rgba(60,30,10,.4);stroke-width:1.5}
  .kite-body{transform-box:fill-box;transform-origin:50% 40%;animation:kiteBob 3.2s ease-in-out infinite}
  .kite-2 .kite-body{animation-duration:3.8s;animation-delay:-1.2s}
  .kite-3 .kite-body{animation-duration:2.6s;animation-delay:-.6s}
  .birds{fill:none;stroke:rgba(40,40,50,.45);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:birdsDrift 12s ease-in-out infinite}
  .birds-l{left:calc(var(--side)*.58);top:17%;width:calc(var(--side)*.15)}
  .birds-r{right:calc(var(--side)*.72);top:30%;width:calc(var(--side)*.13);animation-delay:-5s}

  /* Tihar diyo on a rangoli, bottom left */
  .diyos{left:calc(var(--side)*.1);bottom:2.5%;width:calc(var(--side)*.8)}
  .diyo-dots{fill:#fff1d0;opacity:.85}
  .diyo-wick{fill:none;stroke:#3b1a0a;stroke-width:2.2;stroke-linecap:round}
  .flame{transform-box:fill-box;transform-origin:50% 100%;animation:flicker 1.4s ease-in-out infinite}
  .diyo-glow{animation:glow 2.2s ease-in-out infinite}
}
/* phones: bunting across the top with a kite in each corner, the greeting
   back above the wheel (just bigger), and the diyo row under the wheel. The
   arena's top and bottom padding make room for them. --gw is capped by the
   screen height so the whole wheel still fits on a short phone. */
@media (max-width:700px){
  .spotlight .arena{padding-top:calc(21vw + 8px);padding-bottom:calc(19vw + 10px)}
  .spotlight .greeting{--gw:min(100%,440px,max(210px,calc((100svh - var(--wheel)*1.2 - 21vw - 50px)/.61)));
    position:relative;top:auto;left:auto;width:var(--gw);margin:0 auto 10px;padding:0;
    transform:none;animation:posterDrop .8s cubic-bezier(.2,.9,.25,1.08) .1s both}
  .spotlight .greeting>.g-jamara{display:none}   /* no room beside the kites */
  .garland{width:50%}
  .kite-1{left:-9vw;top:3vw;width:30vw}
  .kite-2{right:-9vw;top:3vw;width:30vw}
  .fest-scene .kite-3,.fest-scene .birds-r{display:none}
  .birds-l{left:42vw;top:11vw;width:14vw}
  .diyos{left:20vw;bottom:6px;width:60vw}
}
@keyframes posterIn{from{opacity:0;transform:translate(-40px,-55%) scale(.94)}}
@keyframes posterDrop{from{opacity:0;transform:translateY(-18px) scale(.96)}}
@keyframes sceneIn{from{opacity:0}}
@keyframes garlandDrop{from{transform:translateY(-70%)}}
@keyframes flutter{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes kiteSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.2deg)}}
@keyframes kiteSwayR{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-2.2deg)}}
@keyframes kiteBob{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(5deg) translateY(-4px)}}
@keyframes birdsDrift{50%{transform:translate(10px,-6px)}}
@keyframes flicker{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(.93,1.08) skewX(3deg)}50%{transform:scale(1.04,.94) skewX(-2deg)}75%{transform:scale(.96,1.05) skewX(2deg)}}
@keyframes glow{50%{opacity:.6}}
@media(prefers-reduced-motion:reduce){.fest-scene,.fest-scene *,.spotlight .greeting{animation:none!important}}