#ttAdOverlay{--ink:#2b1712;--cream:#fff4e0;--red:#ff5a3c;--mustard:#ffc93c;--top:env(safe-area-inset-top,0px);--bottom:env(safe-area-inset-bottom,0px);font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito","Varela Round",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink)}
#ttAdOverlay *{box-sizing:border-box}
#ttAdOverlay main{position:relative;min-height:100dvh;padding:calc(max(20px,var(--top)) + 12px) 20px calc(max(20px,var(--bottom)) + 12px);display:grid;place-items:center}
#ttAdOverlay .popup{width:min(100%,380px);background:var(--cream);border:3px solid var(--ink);border-radius:26px;box-shadow:inset 0 2px #fff,0 7px 0 var(--ink),0 18px 40px #190c1244;overflow:hidden}
#ttAdOverlay button{font-family:inherit;color:var(--ink);cursor:pointer;touch-action:manipulation}
#ttAdOverlay button:focus-visible{outline:3px solid #13766d;outline-offset:3px}
#ttAdOverlay .close{width:42px;height:42px;border:2px solid var(--ink);border-radius:14px;background:#fff4e0;display:grid;place-items:center;flex-shrink:0;box-shadow:0 2px var(--ink)}
#ttAdOverlay .close svg{width:16px;height:16px;stroke:currentColor;stroke-width:3;fill:none}
#ttAdOverlay header{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-bottom:3px solid var(--ink);background:linear-gradient(#ff805f,#ff5a3c);gap:8px}
#ttAdOverlay .ribbon{font-size:22px;letter-spacing:.5px;font-weight:1000;color:#fff4e0;-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;text-shadow:0 2px var(--ink);margin:0}
#ttAdOverlay .hero{position:relative;height:200px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 90%,#e6f7ed,#9adeef);overflow:hidden;border-bottom:2px solid #2b171226}
#ttAdOverlay .hero::before{content:"";position:absolute;width:280px;height:280px;border:34px solid #fff3;border-radius:50%;left:calc(50% - 140px);top:5px}
#ttAdOverlay .burger{width:200px;height:200px;object-fit:contain;position:relative;transform:translateX(-35px) rotate(-6deg)}
#ttAdOverlay .reward{position:absolute;right:19px;bottom:32px;transform:rotate(7deg);width:111px;height:102px;background:linear-gradient(#ffe57a,#ffc93c);border:3px solid var(--ink);border-radius:24px;box-shadow:0 5px var(--ink),inset 0 2px #fff9;display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:1000;line-height:1}
#ttAdOverlay .reward b{font-size:43px;letter-spacing:-2px}
#ttAdOverlay .reward span{font-size:14px;letter-spacing:2px;margin-top:5px}
#ttAdOverlay .offer{text-align:center;padding:21px 20px 17px}
#ttAdOverlay .offer h1{font-size:29px;font-weight:950;line-height:1.08;letter-spacing:-1px;margin:0 0 11px}
#ttAdOverlay .description{font-size:14px;line-height:1.5;margin:0 0 19px;font-weight:550;color:#684633}
#ttAdOverlay .cta{width:100%;min-height:60px;border:3px solid var(--ink);border-radius:19px;padding:13px 10px;background:linear-gradient(#ffe57a,#ffc93c 55%,#f5a800);box-shadow:inset 0 3px #fff9,0 5px var(--ink);display:flex;justify-content:center;align-items:center;gap:10px;font-weight:950;font-size:21px;letter-spacing:.8px}
#ttAdOverlay .cta svg{width:21px;height:21px;fill:currentColor}
#ttAdOverlay .cta:active{transform:translateY(3px);box-shadow:0 2px var(--ink)}
#ttAdOverlay .decline{display:block;background:none;border:0;font-size:15px;font-weight:800;min-height:44px;padding:14px 8px 6px;width:100%;margin-top:7px}
#ttAdOverlay .fine{font-size:11px;font-weight:650;color:#80654e;margin:3px 0 0}
#ttAdOverlay .ad header{background:var(--cream);border-bottom:0;padding:17px}
#ttAdOverlay .wordmark{font-size:19px;line-height:.93;font-weight:1000;letter-spacing:-.8px;transform:rotate(-3deg);color:#ffc93c;-webkit-text-stroke:1.8px var(--ink);paint-order:stroke fill;text-shadow:0 2px var(--ink)}
#ttAdOverlay .wordmark span{display:block;color:#fff4e0}
#ttAdOverlay .ad-label{font-size:10px;letter-spacing:2px;font-weight:800;color:#80654e;margin:0 0 9px;text-align:center}
#ttAdOverlay .ad-content{margin:0 14px;border:2px solid #d8c8ae;border-radius:13px;min-height:250px;height:clamp(250px,54dvh,480px);display:grid;place-content:center;text-align:center;background:repeating-linear-gradient(135deg,#fffaf0 0px,#fffaf0 17px,#f5eddd 17px,#f5eddd 18px);gap:11px;padding:12px}
#ttAdOverlay .ad-content h1{font-size:23px;font-weight:850;margin:0;letter-spacing:-.7px}
#ttAdOverlay .ad-content p{font-size:13px;color:#937b60;margin:0}
#ttAdOverlay .ad-frame{width:52px;height:38px;margin:0 auto 5px;border:2px solid #bea98d;border-radius:7px;display:grid;place-items:center}
#ttAdOverlay .ad-frame svg{width:18px;height:18px;fill:#bea98d}
#ttAdOverlay footer{padding:17px 16px 20px}
#ttAdOverlay .progress{height:6px;background:#ead7b9;border-radius:10px;overflow:hidden}
#ttAdOverlay .progress i{height:100%;display:block;background:var(--red);width:0;transition:width .3s linear}
#ttAdOverlay .progress-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:750;margin-bottom:10px}
#ttAdOverlay .closed{padding:28px;text-align:center}
#ttAdOverlay .closed h1{font-size:25px}
#ttAdOverlay .closed p{font-size:14px;line-height:1.5}
#ttAdOverlay .closed button{margin-top:22px}
@media(max-height:680px){#ttAdOverlay main{padding:calc(var(--top) + 12px) 16px calc(var(--bottom) + 15px)}
#ttAdOverlay header{padding:9px 12px}
#ttAdOverlay .ribbon{font-size:20px}
#ttAdOverlay .hero{height:150px}
#ttAdOverlay .burger{width:150px;height:150px;transform:translateX(-30px) rotate(-6deg)}
#ttAdOverlay .reward{width:90px;height:83px;right:20px;bottom:24px;border-radius:20px}
#ttAdOverlay .reward b{font-size:36px}
#ttAdOverlay .reward span{font-size:12px}
#ttAdOverlay .offer{padding:15px 17px 13px}
#ttAdOverlay .offer h1{font-size:25px;margin-bottom:8px}
#ttAdOverlay .description{font-size:13px;margin-bottom:13px}
#ttAdOverlay .cta{min-height:54px;font-size:19px}
#ttAdOverlay .decline{margin-top:4px;padding-top:10px}
#ttAdOverlay .ad-content{height:48dvh;min-height:230px}
#ttAdOverlay .ad header{padding:12px 15px}
#ttAdOverlay footer{padding:14px 16px 17px}
}
#ttAdOverlay main{height:100dvh;padding:calc(var(--top) + 10px) 10px calc(var(--bottom) + 14px)}
#ttAdOverlay .popup{width:min(100%,430px);height:100%;max-height:850px;display:flex;flex-direction:column;border-radius:24px}
#ttAdOverlay .awning{height:35px;flex:0 0 35px;background:repeating-linear-gradient(90deg,#ff5a3c 0 27px,#fffaf0 27px 54px);border-bottom:3px solid var(--ink);box-shadow:inset 0 4px #ffffff38;position:relative}
#ttAdOverlay .awning::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 65%,#2b17121a)}
#ttAdOverlay header{flex-shrink:0}
#ttAdOverlay .hero{height:auto;flex:1;min-height:175px;max-height:330px}
#ttAdOverlay .hero::before{width:330px;height:330px;left:calc(50% - 165px);top:25px}
#ttAdOverlay .burger{width:235px;height:235px;max-width:65%;max-height:100%;transform:translateX(-34px) rotate(-6deg)}
#ttAdOverlay .reward{width:119px;height:111px;right:22px;bottom:36px}
#ttAdOverlay .offer{flex:0 0 auto;padding:25px 22px 20px}
#ttAdOverlay .offer h1{font-size:32px;margin-bottom:12px}
#ttAdOverlay .description{font-size:15px;margin-bottom:22px}
#ttAdOverlay .cta{min-height:64px}
#ttAdOverlay .decline{margin-top:10px;min-height:46px}
#ttAdOverlay .fine{margin-top:5px}
#ttAdOverlay .ad header{padding:15px 18px}
#ttAdOverlay .ad-content{height:auto;flex:1;min-height:0;margin:0 15px}
#ttAdOverlay .ad-label{margin:0 0 12px}
#ttAdOverlay .ad footer{flex-shrink:0;padding:20px 18px 23px}
#ttAdOverlay .closed{margin:auto}
@media(max-height:680px){#ttAdOverlay main{padding:calc(var(--top) + 8px) 8px calc(var(--bottom) + 10px)}
#ttAdOverlay .awning{height:26px;flex-basis:26px;background-size:auto}
#ttAdOverlay .hero{min-height:130px;max-height:none}
#ttAdOverlay .burger{width:170px;height:170px;transform:translateX(-30px) rotate(-6deg)}
#ttAdOverlay .reward{width:96px;height:88px;bottom:20px;right:20px}
#ttAdOverlay .reward b{font-size:37px}
#ttAdOverlay .reward span{font-size:12px}
#ttAdOverlay .offer{padding:14px 17px 13px}
#ttAdOverlay .offer h1{font-size:26px;margin-bottom:8px}
#ttAdOverlay .description{font-size:13px;margin-bottom:13px}
#ttAdOverlay .cta{min-height:54px}
#ttAdOverlay .decline{margin-top:4px;min-height:44px}
#ttAdOverlay .fine{margin-top:2px}
#ttAdOverlay .ad header{padding:11px 15px}
#ttAdOverlay .ad footer{padding:15px 16px 18px}
#ttAdOverlay .ad-label{margin-bottom:10px}
}
#ttAdOverlay .awning{display:flex;background:none;border-bottom:0;box-shadow:none;height:38px;flex-basis:38px;z-index:1;margin-bottom:-4px}
#ttAdOverlay .awning::after{display:none}
#ttAdOverlay .awning i{flex:1;background:linear-gradient(#ff7658,#ff5a3c);border:1px solid var(--ink);border-top:0;border-bottom-width:2px;border-radius:0 0 45% 45%;box-shadow:inset 0 3px #ffffff33}
#ttAdOverlay .awning i:nth-child(even){background:linear-gradient(#fffdf7,#fff4e0)}
#ttAdOverlay .popup:not(.ad) .awning{background:#ff805f}
#ttAdOverlay .ad .awning{background:var(--cream)}
@media(max-height:680px){#ttAdOverlay .awning{height:29px;flex-basis:29px}
}
#ttAdOverlay .awning i{border-left:0;border-right:1.5px solid var(--ink);border-bottom:2px solid var(--ink);border-radius:0 0 48% 48%;box-shadow:inset 0 3px #ffffff33}
#ttAdOverlay .awning i:last-child{border-right:0}
#ttAdOverlay .close{width:44px;height:44px;border-radius:14px;box-shadow:inset 0 2px #fff9,0 2px var(--ink)}
#ttAdOverlay .ribbon{letter-spacing:.6px}
#ttAdOverlay .wordmark{transform:rotate(-3deg) translateY(-1px)}
#ttAdOverlay .cta{box-shadow:inset 0 3px #ffffffa6,inset 0 -3px #c8860026,0 5px var(--ink)}
#ttAdOverlay .progress-meta{font-variant-numeric:tabular-nums;line-height:1.4}
#ttAdOverlay .progress{box-shadow:inset 0 1px 2px #2b17121a}
#ttAdOverlay .progress i{border-radius:inherit}
#ttAdOverlay .fine{line-height:1.4}
#ttAdOverlay .reward{box-shadow:inset 0 3px #ffffff99,0 5px var(--ink)}
#ttAdOverlay .reward span{letter-spacing:1.7px}
#ttAdOverlay .ad-content{border-color:#d4c4a9;box-shadow:inset 0 1px 0 #fff}
#ttAdOverlay .decline:hover{color:#a83a22}
#ttAdOverlay .cta:hover{filter:brightness(1.025)}
@media(prefers-reduced-motion:reduce){#ttAdOverlay .progress i{transition:none}
}

#ttAdOverlay{position:fixed;inset:0;z-index:160;background:#2b171273;backdrop-filter:blur(2px);--top:var(--sat,env(safe-area-inset-top,0px));--bottom:var(--safe-b,env(safe-area-inset-bottom,0px));touch-action:manipulation}#ttAdOverlay[hidden]{display:none!important}#ttAdOverlay main{height:100%;min-height:0}#ttAdOverlay .popup{min-height:0}#ttAdOverlay .fine{font-size:10px}#ttAdOverlay button{touch-action:manipulation}#ttAdOverlay .popup:focus{outline:none}
/* Landscape room ads use a generous TV creative area; phone ads keep their original layout. */
@media(min-width:701px) and (orientation:landscape){body.tt-room-page[data-role=host] #ttAdOverlay main{padding:16px}body.tt-room-page[data-role=host] #ttAdOverlay .popup.ad{width:min(97vw,1600px);height:min(94dvh,900px);display:flex;flex-direction:column}body.tt-room-page[data-role=host] #ttAdOverlay .ad header{padding:10px 24px}body.tt-room-page[data-role=host] #ttAdOverlay .ad-label{font-size:clamp(11px,1.5vw,22px);margin:0 0 10px}body.tt-room-page[data-role=host] #ttAdOverlay .ad-content{flex:1;height:auto;min-height:0;margin:0 24px}body.tt-room-page[data-role=host] #ttAdOverlay .ad-content h1{font-size:clamp(30px,5vw,80px)}body.tt-room-page[data-role=host] #ttAdOverlay .ad-frame{width:clamp(60px,9vw,140px);height:clamp(45px,6vw,90px)}body.tt-room-page[data-role=host] #ttAdOverlay footer{padding:16px 30px 22px}body.tt-room-page[data-role=host] #ttAdOverlay .progress-meta{font-size:clamp(14px,1.6vw,24px)}body.tt-room-page[data-role=host] #ttAdOverlay .progress{height:10px}}
@media(min-width:701px) and (orientation:landscape){
 body.tt-room-page[data-role=host] #ttAdOverlay .popup.ad{position:relative}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad header{min-height:clamp(72px,9vw,120px);align-items:center}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad .wordmark{display:block;width:clamp(115px,16vw,245px);height:clamp(52px,7vw,105px);background:none;transform:none;font-size:0;text-shadow:none}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad .wordmark span{display:none}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad .close{width:clamp(48px,6vw,80px);height:clamp(48px,6vw,80px);font-size:clamp(23px,3vw,40px)}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad .close svg{width:clamp(22px,2.7vw,42px);height:clamp(22px,2.7vw,42px)}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad .ad-label{position:absolute;top:clamp(70px,8vw,120px);left:50%;transform:translateX(-50%);white-space:nowrap}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad-frame svg{width:40%;height:40%}
}
#ttAdOverlay .reference-logo{display:none}
#ttAdOverlay .wordmark>.logo-fallback{display:contents;color:inherit}
@media(min-width:701px) and (orientation:landscape){body.tt-room-page[data-role=host] #ttAdOverlay .ad .reference-logo{display:block;width:100%;height:100%}body.tt-room-page[data-role=host] #ttAdOverlay .ad .logo-fallback{display:none}}

/* TV ad: preserve phone presentation and dynamic progress, while matching the approved composition. */
@media(min-width:701px) and (orientation:landscape){
 body.tt-room-page[data-role=host] #ttAdOverlay .ad header{min-height:clamp(86px,10vw,140px)}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad footer{min-height:clamp(84px,11vh,110px);box-sizing:border-box;padding:20px 30px 25px}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad-content h1{font-size:clamp(32px,5.4vw,84px)}
}

/* Large-screen ad alignment; phone ads and progress timing remain unchanged. */
@media(min-width:701px) and (orientation:landscape){
 body.tt-room-page[data-role=host] #ttAdOverlay .ad .ad-label{top:clamp(55px,6vw,100px)}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad-frame{width:clamp(70px,10vw,168px);height:clamp(50px,7vw,116px);transform:translateY(-12px)}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad-content h1{transform:translateY(-12px)}
}

/* Keep the television creative and footer in the approved proportions. */
@media(min-width:701px) and (orientation:landscape){
 body.tt-room-page[data-role=host] #ttAdOverlay .ad header{min-height:clamp(78px,9.3vw,130px)}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad footer{min-height:clamp(98px,13vh,125px)}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad-content h1{font-size:clamp(32px,5vw,80px)}
}

/* Match the depth of the approved television awning while retaining the ad layout. */
@media(min-width:701px) and (orientation:landscape){
 body.tt-room-page[data-role=host] #ttAdOverlay .ad .awning{height:clamp(42px,4vw,68px);flex-basis:clamp(42px,4vw,68px)}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad header{min-height:clamp(62px,7.6vw,112px)}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad .wordmark,body.tt-room-page[data-role=host] #ttAdOverlay .ad .close{transform:translateY(-9px)}
}

/* Bring TV ad frame and footer closer to the approved reference. */
@media(min-width:701px) and (orientation:landscape){
 body.tt-room-page[data-role=host] #ttAdOverlay .ad header{min-height:clamp(56px,6.8vw,102px)}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad footer{min-height:clamp(106px,14.5vh,135px)}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad .wordmark{width:clamp(125px,17.5vw,265px)}
}

/* Align the TV creative contents with the approved composition. */
@media(min-width:701px) and (orientation:landscape){
 body.tt-room-page[data-role=host] #ttAdOverlay .ad-frame,body.tt-room-page[data-role=host] #ttAdOverlay .ad-content h1{transform:translateY(-20px)}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad-content h1{font-family:ui-rounded,'Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;font-size:clamp(32px,5.2vw,82px)}
}

/* Fixed ad placeholder title retains its semantic heading text. */
@media(min-width:701px) and (orientation:landscape) and (forced-colors:none){
 body.tt-room-page[data-role=host] #ttAdOverlay .ad-content h1{width:min(56%,860px);aspect-ratio:860 / 96;color:transparent;text-shadow:none;background:url('../assets/tv-ad-lettering-v008.png') center / contain no-repeat}
}

/* Give the fixed artwork a full-width grid track so it stays centered. */
@media(min-width:701px) and (orientation:landscape) and (forced-colors:none){
 body.tt-room-page[data-role=host] #ttAdOverlay .ad-content{grid-template-columns:minmax(0,1fr);justify-items:center}
 body.tt-room-page[data-role=host] #ttAdOverlay .ad-content h1{width:min(56%,860px);min-width:0}
}

/* Reduce the gap between the play icon and reference lettering on TV. */
@media(min-width:701px) and (orientation:landscape){
 body.tt-room-page[data-role=host] #ttAdOverlay .ad-frame{transform:translateY(4px)}
}

/* AdSense display fill */
#ttAdOverlay .ad-content.lp-adsense-slot{display:block;place-content:normal;overflow:hidden;padding:6px}
#ttAdOverlay .ad-content.lp-adsense-slot ins.adsbygoogle{width:100%}
#ttAdOverlay .tt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}