:root{--stage-bg:#10131f;--stage-bg-2:#19283b;--frame-border:#24334a;--frame-inner:#111a29;--ink:#fdf6e3;--ink-dim:#a5b2c5;--gold:#f5d685;--gold-soft:#f5d68540;}
html,body{background:var(--navy-2);}
#gameShell{max-width:var(--game-max-width);width:100%;height:100vh;height:100dvh;min-height:540px;margin:0 auto;display:flex;flex-direction:column;}
#shellHeader{flex-shrink:0;min-height:54px;}
#brandLogo{font-family:Bungee,sans-serif;}
#watchContent{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding:0 24px;background:linear-gradient(#07122030,#07122018 55%,#07122055),url('/watch/assets/night-gallery-v1.png') center/cover no-repeat,var(--navy-2);}
#stage{order:2;flex:1;min-height:0;height:auto;padding:12px 0;cursor:pointer;background:none;justify-content:center;}
#frameWrap{width:min(100%,calc(100dvh - 456px),420px);min-width:120px;}
#frame{border:1px solid #f5d68555;border-radius:16px;outline:6px solid #ffffff04;outline-offset:1px;box-shadow:0 24px 50px #0005,0 3px 8px #0004;}
#countdownWrap{top:10px;right:10px;width:38px;height:38px;}
#countdownInner{width:32px;height:32px;font-size:13px;background:#182438;}
#countdownRing{box-shadow:0 3px 12px #0003;}
#revealPanel{position:relative;width:100%;max-width:420px;margin-top:22px;--answer-fs:25px;height:140px;flex-shrink:0;opacity:1;transform:none;padding:12px 8px 0;}
#revealPanel:not(.in)>*{visibility:hidden;}
#revealPanel:not(.in)::before{content:'LOOK CLOSELY';display:block;position:absolute;top:22px;left:0;right:0;font-size:10px;letter-spacing:.22em;color:#91c7c3;font-weight:600;}
#revealPanel:not(.in)::after{content:'What do you see?';display:block;position:absolute;top:47px;left:0;right:0;font-size:21px;color:#fdf6e3;letter-spacing:-.02em;}
#revealAnswer{font-family:inherit;}
#revealHint{font-style:normal;}
.corner{position:static;flex-shrink:0;}
#topLeft{order:0;display:block;padding:14px 16px 8px;margin-top:16px;background:#102034a6;border:1px solid #ffffff28;border-bottom:0;border-radius:14px 14px 0 0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
#topLeft::before{content:'WATCH / DISCOVER';display:block;font:600 10px/1.2 system-ui,sans-serif;letter-spacing:.18em;color:#8cddd0;margin-bottom:10px;}
#packTitle{display:block;max-width:100%;font-size:clamp(15px,3.4vw,20px);line-height:1.4;font-weight:600;letter-spacing:-.025em;}
#topRight{order:1;margin-top:0;justify-content:flex-end;min-height:44px;padding:0 12px 9px;background:#102034a6;border:1px solid #ffffff28;border-top:0;border-radius:0 0 14px 14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
#progressLabel{margin-right:auto;color:#a5b2c5;font-size:11px;letter-spacing:.12em;}
#progressLabel::before{content:'CARD ';font-size:9px;color:#6e8099;}
#bottomLeft{order:3;justify-content:center;gap:6px;padding:7px;margin:0 auto 16px;background:#152538a6;border:1px solid #ffffff30;border-radius:16px;box-shadow:0 6px 20px #0003;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
#bottomRight{display:none;}
.icon-btn-quiet{min-width:44px;min-height:40px;border-radius:8px;}
#watchPause{min-width:108px;background:#f5d685;color:#172235;border:1px solid #f5d685;border-radius:10px;font-weight:600;}
#previousCard,#nextCard{background:transparent;border-color:transparent;font-size:18px;}
#switcherBtn{border-radius:8px;font-size:11px;min-height:34px;color:#fdf6e3;}
#switcherPanel{position:absolute;top:110px;right:14px;width:min(300px,calc(100% - 28px));background:var(--navy);}
.switcher-item{min-height:44px;}
#loadingScreen,#errorScreen{position:absolute;inset:0;z-index:20;background:var(--navy-2);}
#gameShell footer{flex-shrink:0;}
#gamesMenuPanel{position:absolute;top:100%;right:8px;z-index:100;background:var(--navy);border:1px solid #ffffff30;border-radius:10px;padding:8px;min-width:170px;}
#gamesMenuPanel[hidden]{display:none;}.games-menu-item{display:flex;align-items:center;gap:10px;padding:10px;color:var(--text-on-dark);text-decoration:none;font-size:13px;}.games-menu-item:hover{background:#ffffff16;}.games-menu-icon svg{width:18px;height:18px;}
@media(max-height:620px){#topLeft{padding-top:8px;}#topLeft::before{font-size:16px;}#revealPanel{--answer-fs:20px;height:120px;margin-top:8px;}#stage{padding:8px 0;}#bottomLeft{padding-bottom:8px;}}
@media(max-height:540px){html,body{overflow:auto;}}
#revealPanel{background:#1020349e;border:1px solid #ffffff24;border-radius:14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px #0002;}
#revealHint{color:#d2dce5;}#progressLabel{color:#c3d5e3;}#progressLabel::before{color:#9eb5c9;}
@media(max-width:420px){#watchContent{padding:0 18px;}#topLeft{padding-top:14px;}#topLeft::before{font-size:9px;}#frame{border-radius:12px;}#revealPanel{margin-top:16px;}#bottomLeft{margin-bottom:12px;}}

/* Play's teal glass, with the same below-the-fold music column. */
html,body{overflow-x:hidden;overflow-y:auto;}
#topLeft,#topRight,#bottomLeft,#revealPanel{background:linear-gradient(120deg,#0a303bcc,#173d3c99);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-color:#dce6c344;box-shadow:inset 0 1px #ffffff22,0 8px 24px #001e2944;}
#topRight{box-shadow:0 8px 24px #001e2944;}
#packTitle,#revealAnswer{color:#e4ddc8;}
#topLeft::before,#progressLabel,#progressLabel::before,#revealHint{color:#b9cbb7;}
#switcherBtn,#previousCard,#nextCard{color:#e5ead7;}
#watchPause{background:#dcecab;color:#18382f;border-color:#dcecab;}
#switcherPanel{background:#103139ed;border-color:#dce6c344;color:#e5ead7;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);}
#watchMusic{background:var(--navy-2);}
@media(min-width:1200px){html,body{background:radial-gradient(circle at 50% -10%,#1c2755 0%,var(--navy-2) 55%,#05070d 100%);}}

/* Artwork-first mobile layout; reserve a stable, compact answer area. */
#watchContent{padding:0 14px;}
#watchHeader{order:0;flex-shrink:0;display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;border:1px solid #dce6c344;border-radius:14px;background:linear-gradient(120deg,#0a303bcc,#173d3c99);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:inset 0 1px #ffffff22,0 8px 24px #001e2944;}
#topLeft,#topRight{margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
#topLeft{flex:1;min-width:0;}
#topLeft::before{content:'WATCH';font:600 10px/1.2 system-ui,sans-serif;letter-spacing:.16em;margin-bottom:6px;}
#packTitle{font-size:13px;line-height:1.4;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#topRight{display:flex;flex-direction:column;align-items:flex-end;gap:0;min-height:0;flex-shrink:0;}
#progressLabel{margin:0;font-size:10px;letter-spacing:.04em;}
#progressLabel::before{content:'';}
#switcherBtn{min-height:44px;padding:6px 10px;background:transparent;border:0;}
#pauseBadge{position:static;}
#stage{order:1;container-type:size;padding:10px 0;gap:10px;justify-content:center;}
#frameWrap{width:min(100%,max(140px,calc(100dvh - 360px)),420px);min-width:0;flex-shrink:0;}
@supports(width:1cqh){#frameWrap{width:min(100%,max(120px,calc(100cqh - 122px)),420px);}}
#revealPanel{height:112px;min-height:112px;margin:0;width:100%;max-width:420px;padding:8px 12px;--answer-fs:20px;}
#revealPanel:not(.in)::before{top:22px;font-size:9px;}
#revealPanel:not(.in)::after{top:43px;font-size:18px;}
#revealAnswer{font-size:20px;line-height:1.25;margin:0;}
#revealMeta{font-size:10px;line-height:14px;margin:4px 0;}
#revealHint{font-size:12px;line-height:16px;margin:0;}
#countdownWrap{width:32px;height:32px;top:8px;right:8px;}
#countdownInner{width:26px;height:26px;font-size:12px;}
#bottomLeft{order:2;width:100%;max-width:420px;gap:8px;padding:4px;margin:0 auto 10px;border-radius:12px;}
#previousCard,#nextCard{flex:1;min-height:44px;}
#watchPause{flex:2;min-height:44px;min-width:0;}
#switcherPanel{top:96px;z-index:40;max-height:calc(100% - 112px);}

/* The transport button already communicates pause; avoid an extra header row. */
#pauseBadge{display:none;}

/* Let the artwork use the stage; reveal its caption over the image only on answer. */
#stage{padding:8px 0;gap:0;}
#frameWrap{position:relative;width:min(100%,max(160px,calc(100dvh - 242px)),460px);}
@supports(width:1cqh){#frameWrap{width:min(100%,100cqh,460px);}}
#revealPanel{position:absolute;left:0;right:0;bottom:0;width:100%;max-width:none;height:auto;min-height:0;margin:0;padding:24px 12px 10px;border:0;border-radius:0 0 12px 12px;background:linear-gradient(transparent,#092c34ed 30%,#092c34fa);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;pointer-events:none;}
#revealPanel:not(.in){visibility:hidden;}
#revealPanel:not(.in)::before,#revealPanel:not(.in)::after{content:none;}
#revealAnswer{font-size:19px;line-height:23px;color:#fff7e6;}
#revealMeta{display:none;}
#revealHint{font-size:11px;line-height:15px;margin-top:4px;color:#dce6d8;}
#bottomLeft{max-width:280px;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;margin-bottom:4px;gap:12px;}
#watchPause{background:#173d3c99;color:#e5ead7;border:1px solid #dce6c344;min-height:44px;}
#previousCard,#nextCard{min-height:44px;}

/* Player controls overlay the picture, never participate in layout. */
#watchHeader #pauseBadge,#watchHeader #pauseBadge.show{display:none;}
#stage{position:relative;}
#frameWrap{width:min(100%,max(160px,calc(100dvh - 196px)),460px);}
@supports(width:1cqh){#frameWrap{width:min(100%,100cqh,460px);}}
#bottomLeft{position:absolute;inset:0;z-index:6;width:100%;max-width:none;margin:0;padding:0;pointer-events:none;opacity:0;transition:opacity .18s;display:flex;justify-content:space-between;align-items:center;}
#bottomLeft button{pointer-events:none;flex:none;min-width:44px;width:44px;height:44px;min-height:44px;border-radius:50%;background:#092c34d9;border:1px solid #e5ead766;color:#fff7e6;font-size:20px;box-shadow:0 3px 15px #0003;}
#bottomLeft #watchPause{width:64px;height:64px;font-size:0;}
#watchPause::before{content:'Ⅱ';font-size:26px;}
.is-paused #watchPause::before{content:'▶';font-size:24px;}
#stage.is-paused #bottomLeft{opacity:1;}
#stage.is-paused #bottomLeft button{pointer-events:auto;}

#revealPanel{padding:30px 16px 16px;text-align:left;}
#revealPanel.in::before{content:'THE ANSWER';display:block;font:700 9px/1.4 system-ui,sans-serif;letter-spacing:.2em;color:#dcecab;margin-bottom:5px;}
#revealAnswer{font-size:clamp(22px,6vw,32px);line-height:1.12;letter-spacing:-.025em;font-weight:800;}
#revealHint{font-size:12px;line-height:1.4;margin-top:6px;}
#revealPanel.in #revealAnswer{animation:watch-title-in .4s cubic-bezier(.2,.7,.2,1) both;}
#revealPanel.in #revealHint{animation:watch-title-in .35s .12s ease-out both;}
#stage.is-paused #revealPanel *{animation-play-state:paused;}
@keyframes watch-title-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){#revealPanel.in #revealAnswer,#revealPanel.in #revealHint{animation:none;}#bottomLeft{transition:none;}}

/* Consistent optical icons and inset player controls. */
#bottomLeft{padding:0 16px;}
#bottomLeft button{width:44px;height:44px;background:#0a2633a8;border:1px solid #fff5;box-shadow:0 4px 16px #00192333,inset 0 1px #ffffff20;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;padding:0;transition:background .16s,transform .16s;}
#bottomLeft #watchPause{width:60px;height:60px;background:#0a2633c9;border-color:#fff7;}
#watchPause::before,.is-paused #watchPause::before{content:none;}
#bottomLeft svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#bottomLeft #watchPause svg{width:26px;height:26px;}
#bottomLeft #watchPause .play-icon{display:none;fill:currentColor;stroke:none;transform:translateX(1px);}
#stage.is-paused #watchPause .pause-icon{display:none;}
#stage.is-paused #watchPause .play-icon{display:block;}
#bottomLeft button:active{transform:scale(.94);background:#0a2633ed;}
#bottomLeft button:focus-visible{outline:2px solid #f4eccf;outline-offset:4px;}
@media(hover:hover){#bottomLeft button:hover{background:#0a2633e6;border-color:#fff9;}}

/* Playback always clears the overlay, including retained pointer/focus. */
#stage:not(.is-paused) #bottomLeft{opacity:0;visibility:hidden;transition:none;}
#stage.is-paused #bottomLeft{visibility:visible;}
#bottomLeft{padding:0 20px;}
#bottomLeft button{background:#0b202b80;border-color:#ffffff26;box-shadow:0 3px 12px #0002;}
#bottomLeft #watchPause{width:56px;height:56px;background:#f6f1e8e8;color:#15313b;border:1px solid #fff9;box-shadow:0 4px 20px #0003;}
#bottomLeft #watchPause svg{width:24px;height:24px;}
@media(hover:hover){#bottomLeft #watchPause:hover{background:#fff;color:#15313b;}}

/* Caption above image/mask layers, below playback controls. */
#revealPanel{z-index:4;}
#revealPanel.in{visibility:visible;}

/* A unified glass transport, with an optically centered primary control. */
#bottomLeft #watchPause{width:64px;height:64px;border-radius:20px;background:linear-gradient(145deg,#183c48e8,#09212de8);color:#fff8e9;border:1px solid #edf6ed66;box-shadow:inset 0 1px 0 #ffffff24,0 6px 20px #00192240;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
#bottomLeft #watchPause svg{width:28px;height:28px;}
#bottomLeft #watchPause .play-icon{transform:translateX(-1px);}
#bottomLeft button:not(#watchPause){background:#0b283599;border-color:#edf6ed33;box-shadow:0 3px 12px #00192226;}
@media(hover:hover){#bottomLeft #watchPause:hover{background:#204956ed;color:#fff8e9;border-color:#edf6ed99;}}
#bottomLeft #watchPause:active{background:#09212df5;transform:scale(.94);}