:root{color-scheme:light;font-family:Arial,'Helvetica Neue',sans-serif;color:#080808;background:#fff;font-synthesis:none;--red:#ed1a3d;--u:min(1vw,.7142857vh)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#fff;overscroll-behavior:none}
button{font:inherit;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button:focus-visible{outline:calc(var(--u)*.5) solid #111;outline-offset:calc(var(--u)*.5)}
[hidden]{display:none!important}
main{position:relative;isolation:isolate;width:100%;height:100%;overflow:hidden;background:#fff;font-size:calc(var(--u)*3.4)}
svg{display:block;width:100%;height:100%}img{object-fit:contain;user-select:none;-webkit-user-drag:none}
h1,h2,p{margin:0}h1{font-weight:900;letter-spacing:-.065em;line-height:.96;font-size:calc(var(--u)*9)}h1 em,h2 em{font-style:normal;color:var(--red)}h2{font-size:calc(var(--u)*4.2);line-height:1.1;font-weight:800;letter-spacing:-.035em}
.brand-bar{position:absolute;left:50%;top:2%;width:calc(var(--u)*92);height:9%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;z-index:30}.brand-logo{width:calc(var(--u)*27);height:100%;filter:url(#singtel-on-white)}
.icon-button{position:absolute;left:0;top:50%;transform:translateY(-50%);width:calc(var(--u)*8);height:calc(var(--u)*8);border:1px solid #eee;border-radius:50%;padding:calc(var(--u)*1.8);color:var(--red);background:#fff;box-shadow:0 calc(var(--u)*.6) calc(var(--u)*1.5) #00000015}.close-button{left:auto;right:0;color:#151515}.sound-slash{display:none}.muted .sound-slash{display:block}.muted .sound-waves{display:none}
.screen{position:absolute;inset:0;z-index:5}.start-screen{top:14%;bottom:3%;left:50%;width:calc(var(--u)*88);transform:translateX(-50%);display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:calc(var(--u)*1.2);text-align:center}.start-screen h1{transform:rotate(-3deg);margin-bottom:calc(var(--u)*1.5)}
.duration-card{background:#f4f4f5;border-radius:calc(var(--u)*3);display:flex;align-items:center;justify-content:center;padding:calc(var(--u)*1.4);gap:calc(var(--u)*2);position:relative}.duration-card svg{width:calc(var(--u)*16);height:calc(var(--u)*16);color:var(--red)}.duration-card>strong{position:absolute;left:calc(var(--u)*8);top:50%;transform:translateY(-30%);font-size:calc(var(--u)*4);line-height:1}.duration-card>strong small{display:none}.duration-card p{font-size:calc(var(--u)*3.4);text-align:left;line-height:1.22}.duration-card p b{color:var(--red)}
.prize-table{background:#f8f8f8;border-radius:calc(var(--u)*3);overflow:hidden}.prize-table h2{padding:calc(var(--u)*1.5)}.tier{display:grid;grid-template-columns:calc(var(--u)*10) 1fr 1fr;align-items:center;min-height:calc(var(--u)*11);padding:calc(var(--u)*.8) calc(var(--u)*3);gap:calc(var(--u)*1.5);border-top:1px solid #ddd;text-align:left}.tier:first-of-type{background:#ffedf1;color:#d71033}.tier svg{width:calc(var(--u)*9);height:calc(var(--u)*9)}.tier b{font-size:calc(var(--u)*4.2)}.tier strong{font-size:calc(var(--u)*3.7);text-align:center;border-left:1px solid #ddd;padding-left:calc(var(--u)*2)}.tier small{display:block;font-size:calc(var(--u)*2.7);line-height:1.15}
.bubble-guide h2{margin-bottom:calc(var(--u)*1.2)}.bubble-guide-items{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*3)}.bubble-guide-item{display:flex;flex-direction:column;align-items:center}.bubble-guide-item>strong{font-size:calc(var(--u)*4.5);color:var(--red);line-height:1.2}.bubble-guide-item>small{font-size:calc(var(--u)*2.3);color:#555;white-space:nowrap}
.guide-orb{width:calc(var(--u)*12);height:calc(var(--u)*12);border-radius:50%;background:radial-gradient(circle at 30% 20%,white,#eee 45%,#cfd0d3);box-shadow:calc(var(--u)*.6) calc(var(--u)*1.5) calc(var(--u)*1.3) #0003;display:grid;place-items:center;margin-bottom:calc(var(--u)*1)}.guide-orb.blue{width:calc(var(--u)*14);height:calc(var(--u)*14);background:radial-gradient(circle at 30% 20%,#555,#151521 70%)}.guide-orb.pink{width:calc(var(--u)*16);height:calc(var(--u)*16);background:radial-gradient(circle at 30% 20%,#ff8494,#ed1a3d 55%,#a7062b)}.guide-orb img{width:55%;height:55%}.guide-orb.white img{filter:brightness(0)}
.primary-button{flex-shrink:0;position:relative;width:100%;height:calc(var(--u)*12);border:calc(var(--u)*.3) solid #ffafbc;border-radius:calc(var(--u)*3);background:linear-gradient(#f6264b,#ed1a3d 60%,#dd0b30);color:#fff;box-shadow:0 calc(var(--u)*.8) 0 #a7092a,0 calc(var(--u)*1.2) calc(var(--u)*2) #94092224;font-size:calc(var(--u)*5.7);font-weight:900;letter-spacing:-.045em;line-height:1;padding:0 calc(var(--u)*3)}.primary-button>span{position:absolute;right:calc(var(--u)*4);font-size:calc(var(--u)*8);top:50%;transform:translateY(-57%)}.primary-button:active{translate:0 calc(var(--u)*.4);box-shadow:0 calc(var(--u)*.35) 0 #a7092a}
.instruction-subtitle{font-size:calc(var(--u)*3.6);line-height:1.25}.instruction-clock{position:relative;color:var(--red);width:calc(var(--u)*30);height:calc(var(--u)*30);align-self:center;filter:drop-shadow(0 calc(var(--u)*1) calc(var(--u)*.6) #0002)}.instruction-clock>strong{position:absolute;top:57%;left:50%;transform:translate(-50%,-50%);background:white;font-size:calc(var(--u)*7);line-height:1.4;color:#000}
.how-to{background:#f5f5f6;text-align:left;border-radius:calc(var(--u)*3);padding:calc(var(--u)*3);font-size:calc(var(--u)*3.2)}.how-to h2{margin-bottom:calc(var(--u)*2)}ol{list-style:none;counter-reset:steps;margin:0;padding:0}li{position:relative;counter-increment:steps;padding-left:calc(var(--u)*6);margin-top:calc(var(--u)*1.8);line-height:1.22}li::before{content:counter(steps);position:absolute;left:0;top:-.15em;display:grid;place-items:center;width:calc(var(--u)*4.5);height:calc(var(--u)*4.5);background:#ffe0e6;color:var(--red);font-weight:800;border-radius:50%}
.ready-screen,.playing-screen{text-align:center}.ready-screen h1,.playing-screen h1{position:absolute;top:19%;left:0;width:100%;font-size:calc(var(--u)*8);color:var(--red);transform:rotate(-3deg)}.ready-screen p,.running-label{position:absolute;top:30%;width:100%;font-size:calc(var(--u)*3.8);color:#555}.ready-screen .primary-button{position:absolute;left:50%;top:43%;width:calc(var(--u)*78);transform:translateX(-50%)}.running-label{top:30%;font-size:calc(var(--u)*3);letter-spacing:.08em;font-weight:700}.running-label i{display:inline-block;width:.65em;height:.65em;background:var(--red);border-radius:50%;margin-right:.4em;animation:breathe 1.2s ease-in-out infinite}
#watchSlot{position:absolute;left:50%;top:71%;width:calc(var(--u)*57);height:calc(var(--u)*64);transform:translate(-50%,-50%);padding:0;z-index:4;border:0;background:none;cursor:default}[data-state="playing"] #watchSlot{top:57%;cursor:pointer;z-index:6}.playing-screen .primary-button{position:absolute;left:50%;bottom:9%;width:calc(var(--u)*78);transform:translateX(-50%);font-size:calc(var(--u)*7)}
.fallback-watch{position:absolute;inset:9% 5%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,#343943,#080a10);border:calc(var(--u)*1.5) solid #d5d8db;border-radius:50%;box-shadow:0 0 0 calc(var(--u)*.6) var(--red),calc(var(--u)*1) calc(var(--u)*2) calc(var(--u)*2) #0004;transform:perspective(calc(var(--u)*120)) rotateY(-17deg) rotateZ(-4deg);color:white;gap:calc(var(--u)*2)}.fallback-watch::before{content:'';position:absolute;left:43%;bottom:104%;width:14%;height:12%;border-radius:calc(var(--u)*1);background:var(--red)}.fallback-watch strong{font-size:calc(var(--u)*13);font-variant-numeric:tabular-nums}.fallback-watch small{font-size:calc(var(--u)*2.6);color:#ccd0d9}.fallback-watch small:first-of-type{color:#fa3354;font-weight:800}[data-spatial-ready] .fallback-watch{opacity:0}[data-spatial-ready] .guide-orb{background:none;box-shadow:none}[data-spatial-ready] .guide-orb img{opacity:0}
.spatial-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.play-area{position:absolute;inset:12% 0 0;z-index:3}.hud{position:absolute;z-index:4;left:50%;top:1%;transform:translateX(-50%);width:calc(var(--u)*92);height:calc(var(--u)*14);display:grid;grid-template-columns:1fr 1fr .75fr;gap:calc(var(--u)*2)}.hud-pill{border:1px solid #eee;border-radius:calc(var(--u)*2);background:#f4f4f4;padding:calc(var(--u)*1.5) calc(var(--u)*2.5);display:flex;flex-direction:column;justify-content:center}.hud-pill small{font-size:calc(var(--u)*2.5);color:#777;font-weight:700}.hud-pill strong{font-size:calc(var(--u)*6.7);line-height:1.1;font-variant-numeric:tabular-nums}.timer-dial{background:var(--red);color:#fff;border-radius:calc(var(--u)*2);display:flex;flex-direction:column;align-items:center;justify-content:center}.timer-dial strong{font-size:calc(var(--u)*6.7);line-height:1}.timer-dial small{font-size:calc(var(--u)*2.5);font-weight:700}.timer-dial.urgent{animation:alarmWiggle .26s ease-in-out infinite alternate;box-shadow:0 0 0 calc(var(--u)*.7) #ed1a3d22}
#bubbleLayer,#effectsLayer{position:absolute;inset:0;overflow:hidden}#effectsLayer{pointer-events:none}.bubble{position:absolute;left:0;top:0;padding:0;border:0;border-radius:50%;background:radial-gradient(circle at 29% 23%,#ffbdc7,#ed1a3d 57%,#aa062c);box-shadow:calc(var(--u)*1) calc(var(--u)*2) calc(var(--u)*2) #0004;touch-action:none;will-change:transform}.bubble[data-tone="white"]{background:radial-gradient(circle at 30% 20%,#fff,#f2f3f4 60%,#c5c5cc)}.bubble[data-tone="blue"]{background:radial-gradient(circle at 30% 20%,#656571,#161621 65%)}.bubble[data-tone="white"] .bubble-icon{filter:brightness(0)}.bubble-icon{position:absolute;inset:23%;width:54%;height:54%}.hit-badge{position:absolute;bottom:-2%;right:-2%;background:var(--red);color:white;border:calc(var(--u)*.3) solid #fff;border-radius:calc(var(--u)*1.3);font-size:calc(var(--u)*3.1);font-weight:800;padding:calc(var(--u)*.4) calc(var(--u)*.8)}[data-spatial-ready] .bubble{background:none;box-shadow:none}[data-spatial-ready] .bubble-icon{opacity:0}.score-float{position:absolute;pointer-events:none;font-weight:900;font-size:calc(var(--u)*6);color:var(--red);text-shadow:0 2px white;animation:scoreFloat .65s ease-out both}
.countdown-screen{display:grid;place-items:center;background:#ffffffdf;z-index:15;backdrop-filter:blur(3px)}#countdownValue{font-size:calc(var(--u)*32);font-weight:900;color:var(--red);line-height:1}.time-up-screen{display:grid;place-items:center;background:#0006;z-index:40;backdrop-filter:blur(2px)}.time-up-card{width:calc(var(--u)*76);border-radius:calc(var(--u)*5);background:#fff;padding:calc(var(--u)*8) calc(var(--u)*4);box-shadow:0 calc(var(--u)*3) calc(var(--u)*8) #0004;text-align:center;animation:panelIn .4s cubic-bezier(.2,1.4,.4,1) both}.time-up-card svg{color:var(--red);width:calc(var(--u)*31);height:calc(var(--u)*31);margin:0 auto calc(var(--u)*5)}.time-up-card h2{font-size:calc(var(--u)*9);font-weight:900;letter-spacing:-.06em}
.pending-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*5);background:white}.pending-orb{display:grid;place-items:center;border-radius:50%;width:calc(var(--u)*20);height:calc(var(--u)*20);font-size:calc(var(--u)*13);background:var(--red);color:white;animation:breathe 1s infinite}
.result-screen{top:13%;bottom:3%;background:none;text-align:center}.result-card{width:calc(var(--u)*87);height:100%;margin:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:calc(var(--u)*2);animation:panelIn .4s ease-out both}.result-card h1{font-size:calc(var(--u)*6.6);color:var(--red);letter-spacing:-.055em;white-space:nowrap}.result-art{height:calc(var(--u)*23);position:relative;flex-shrink:0;display:grid;place-items:center}.celebration-orb{display:grid;place-items:center;position:relative;width:calc(var(--u)*17);height:calc(var(--u)*17);background:radial-gradient(circle at 30% 18%,#ff9eaf,#ed1a3d 55%,#b0002c);border-radius:50%;color:white;box-shadow:calc(var(--u)*.6) calc(var(--u)*1.5) calc(var(--u)*2) #0002;animation:orbFloat 2.8s ease-in-out infinite}.celebration-orb i{font-size:calc(var(--u)*13);line-height:1;font-style:normal}.celebration-orb b,.celebration-orb em{position:absolute;width:calc(var(--u)*2.5);height:calc(var(--u)*2.5);border-radius:50%;background:var(--red);left:-30%;top:18%;box-shadow:calc(var(--u)*27) calc(var(--u)*2) 0 #ed1a3d,calc(var(--u)*4) calc(var(--u)*16) 0 #ed1a3d}.celebration-orb em{left:-10%;top:-12%;width:calc(var(--u)*1.5);height:calc(var(--u)*1.5);background:#ccc;box-shadow:calc(var(--u)*23) calc(var(--u)*15) 0 #ccc}
.score-summary{display:flex;flex-direction:column;align-items:center;margin:calc(var(--u)*3) 0}.score-summary small{font-size:calc(var(--u)*3);letter-spacing:.18em;color:#888;font-weight:700}.score-summary strong{font-size:calc(var(--u)*19);line-height:1.15;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.result-card.missed h1{font-size:calc(var(--u)*10)}.you-won{font-size:calc(var(--u)*3);color:#888;font-weight:700;margin-bottom:calc(var(--u)*2)}.reward-heading{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*3);background:linear-gradient(110deg,#fff0f4,#fff9fa);border-radius:calc(var(--u)*3);padding:calc(var(--u)*2);text-align:left}.reward-heading>span{width:calc(var(--u)*19);height:calc(var(--u)*19);flex-shrink:0}.reward-heading b{display:block;font-size:calc(var(--u)*5.5);color:var(--red);line-height:1.1}.reward-heading strong{display:block;font-size:calc(var(--u)*4.4);line-height:1.1;letter-spacing:-.04em}.reward-heading small{display:block;font-size:calc(var(--u)*2.8);line-height:1.4;color:#555}
#rewardInstructions{font-size:calc(var(--u)*2.8);line-height:1.35;margin:calc(var(--u)*2.5) calc(var(--u)*1)}#viuInstructions{padding:calc(var(--u)*2.5);border:1px solid #d8d8dc;border-radius:calc(var(--u)*2.5);text-align:left;background:#fbfcff}#viuInstructions ol{font-size:calc(var(--u)*2.6)}#viuInstructions h2{font-size:calc(var(--u)*3.8);margin-top:calc(var(--u)*1.5)}.viu-brands{display:flex;gap:calc(var(--u)*3);align-items:center}.viu-brands b{font-size:calc(var(--u)*4.6);color:var(--red)}.viu-brands strong{color:#e6a900;font-size:calc(var(--u)*5.8);line-height:1}.viu-brands+ h2{color:#111}#promoCode{font-size:calc(var(--u)*3.5);color:var(--red);overflow-wrap:anywhere}#rewardImage{width:100%;max-height:calc(var(--u)*48);object-fit:contain}#rewardCard .thank-you{font-size:calc(var(--u)*2.8);margin:calc(var(--u)*2) 0 0}.preview-note{font-size:calc(var(--u)*2.3);letter-spacing:.04em;color:#865d18}.reset-note{font-size:calc(var(--u)*2.8);color:#888;margin-top:calc(var(--u)*1)}.replay-button{margin-top:calc(var(--u)*2);height:calc(var(--u)*10);font-size:calc(var(--u)*5)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.duration-clock{position:relative;flex-shrink:0}.duration-clock>strong{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);background:#fff;font-size:calc(var(--u)*4);line-height:1.2}.duration-clock svg{width:calc(var(--u)*16);height:calc(var(--u)*16)}
[data-studio="pop"][data-spatial-ready] .celebration-orb{visibility:hidden}
[data-state="score_menu"].time-missed .result-screen{inset:0}
.time-missed .result-card{position:relative;width:100%;display:block;animation:none}
.time-missed .result-art,.time-missed .score-summary{display:none}
.time-missed .result-card h1{position:absolute;top:19%;width:100%;font-size:calc(var(--u)*9)}
.time-missed #resultDelta{position:absolute;top:30%;width:100%;font-size:calc(var(--u)*3.8);color:#666}
.time-missed .replay-button{position:absolute;left:50%;top:43%;transform:translateX(-50%);width:calc(var(--u)*78);height:calc(var(--u)*12);margin:0}
.time-missed .reset-note{position:absolute;top:55%;width:100%}
.time-missed #watchSlot{top:77%;width:calc(var(--u)*48);height:calc(var(--u)*53)}
.reward-unavailable .result-card h1{font-size:calc(var(--u)*6.6)}
/* Let rising bubbles cross the arena inset; main clips at the actual viewport.
   This keeps the CSS fallback/hit target aligned with the full-height 3D pass. */
#bubbleLayer{overflow:visible}
@keyframes alarmWiggle{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}@keyframes scoreFloat{from{opacity:1;translate:-50% 0;scale:.7}to{opacity:0;translate:-50% -140%;scale:1.2}}@keyframes panelIn{from{opacity:0;scale:.87;translate:0 2%}to{opacity:1;scale:1;translate:0 0}}@keyframes orbFloat{50%{transform:translateY(calc(var(--u)*-1)) rotate(-6deg)}}@keyframes breathe{50%{opacity:.55;scale:.95}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* R5: full-width original VIU sheet; no cropped instructions or redemption code. */
.viu-artwork .result-art,.viu-artwork .you-won,.viu-artwork .reward-heading{display:none}
.viu-artwork #rewardImage{display:block;width:100%;height:auto;max-height:none;object-fit:contain;border-radius:calc(var(--u)*3)}
.viu-artwork #rewardInstructions{margin-top:0}