/* Approved option A. Scope the TV home layout so detail panels retain their design. */
#tvMenu.home-open{container-type:inline-size;padding:0;background:#202b29;background-image:none;color:#f5f5ec;color-scheme:dark;box-shadow:inset 0 0 0 1px #45514a;overflow:hidden}
#tvMenu #menuHome{height:100%;padding:2.8cqw 4.8cqw 1.5cqw;display:flex;flex-direction:column;box-sizing:border-box}
#tvMenu #menuHome[hidden]{display:none}
#menuHome .menu-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:2cqw;flex:none}
#menuHome .wordmark{font-size:1.18cqw;font-weight:700;letter-spacing:.22cqw;display:block}
#menuHome .wordmark span{font-weight:400;color:#b3bcb6;letter-spacing:.16cqw}
#tvMenu #menuHome #menuTitle{font-size:2.65cqw;line-height:1.15;letter-spacing:-.06cqw;font-weight:400;margin:.65cqw 0 0}
#menuHome .welcome-dot{height:.8cqw;width:.8cqw;background:#efca57;border-radius:50%;margin-right:.25cqw}
#tvMenu #menuHome .menu-tour{flex:none;display:flex;align-items:center;justify-content:flex-start;text-align:left;height:8.2cqw;min-height:0!important;padding:0 2.4cqw;gap:0!important;background:#f1cc5b!important;color:#202b29!important;border:0;border-radius:.85cqw;box-shadow:none;filter:none;font-weight:400}
#menuHome .play{display:grid;place-items:center;width:4.5cqw;height:4.5cqw;flex:none;border:1px solid #28322d66;border-radius:50%;margin-right:2cqw;background:transparent;color:inherit;animation:menu-play-pulse 2.4s ease-in-out infinite}
#menuHome .play svg{width:2.7cqw;fill:currentColor}
#menuHome .tour-words{display:flex;flex-direction:column;gap:.35cqw;flex:1}
#menuHome .menu-tour strong{font-weight:600;font-size:2.65cqw;letter-spacing:-.04cqw;line-height:1.15}
#menuHome .tour-words>span{font-size:1.25cqw;line-height:1.2}
#menuHome .tour-arrow{font-size:3cqw;margin-left:auto}
#menuHome .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6cqw;width:83%;align-self:center;flex:1;min-height:0;margin-top:1.9cqw}
#tvMenu #menuHome .menu-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;min-width:0;min-height:0;text-align:left;background:#2e3a36;color:#f3f4e9;border:1px solid #45514a;border-radius:.85cqw;padding:0;overflow:hidden;filter:none;order:0;transition:background .18s,border-color .18s,transform .18s}
#menuHome .card-visual{flex:1;min-height:0;position:relative;display:grid;place-items:center;overflow:hidden}
#menuHome .line-icon{width:9.2cqw;height:9.2cqw;flex:none;color:#efca57;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#menuHome .card-bottom{display:flex;align-items:flex-end;justify-content:space-between;flex:none;padding:1.6cqw 1.7cqw 1.8cqw;border-top:1px solid #ffffff14}
#menuHome .card-label{font-size:2.6cqw;line-height:1.09;letter-spacing:-.06cqw;font-weight:500}
#menuHome .card-arrow{font-size:2.25cqw;color:#bdc5bd;line-height:1}
#menuHome .menu-foot{flex:none;margin:1.4cqw 0 0;color:#a3afa5;font-size:1.13cqw;text-align:center;letter-spacing:.035cqw;line-height:1.2}
#tvMenu #menuHome button:focus-visible{outline:2px solid #fff3bd;outline-offset:-3px}
#tvMenu.tour-complete #menuHome #homeAccess{border-color:#efca57;background:#36463d}
#tvMenu.tour-complete #menuHome #homeAccess .line-icon{animation:menu-access-pulse 2.4s ease-in-out infinite}
#tvMenu.tour-complete #menuHome #takeTour .play-symbol{display:grid;animation:none}
#tvMenu.tour-complete #menuHome #takeTour{order:0}
@keyframes menu-play-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes menu-access-pulse{0%,100%{opacity:1}50%{opacity:.65}}
@media(hover:hover){#tvMenu #menuHome .menu-card:hover{border-color:#efca57;background:#36463d;transform:translateY(-.2cqw)}#menuHome .menu-tour:hover .play{background:#28322d;color:#f1cc5b}}
/* On a phone the existing enlarged menu remains readable and easy to tap. */
@media(max-width:600px) and (orientation:portrait){
 #picture.menu-ready #tvMenu.home-open{padding:0}
 #tvMenu #menuHome{padding:5cqw 4.5cqw 3cqw}
 #menuHome .menu-heading{margin-bottom:3cqw}
 #menuHome .wordmark{font-size:2.2cqw;letter-spacing:.28cqw}
 #tvMenu #menuHome #menuTitle{font-size:5.1cqw;margin-top:1.1cqw}
 #menuHome .welcome-dot{width:1.4cqw;height:1.4cqw}
 #picture.menu-ready #tvMenu #menuHome .menu-tour{height:16cqw;min-height:56px!important;padding:0 3.2cqw;border-radius:1.6cqw}
 #menuHome .menu-tour strong{font-size:4.8cqw}
 #menuHome .tour-words>span{font-size:2.7cqw}
 #menuHome .play{width:8.8cqw;height:8.8cqw;margin-right:3cqw}
 #menuHome .play svg{width:5cqw}
 #menuHome .tour-arrow{font-size:5.5cqw}
 #menuHome .cards{width:100%;gap:2cqw;margin-top:3cqw}
 #picture.menu-ready #tvMenu #menuHome .menu-card{padding:0;min-height:0;border-radius:1.6cqw}
 #menuHome .line-icon{width:14cqw;height:14cqw}
 #menuHome .card-label{font-size:3.8cqw}
 #menuHome .card-bottom{padding:3cqw 2cqw}
 #menuHome .card-arrow{font-size:3.3cqw}
 #menuHome .menu-foot{font-size:2.3cqw;margin-top:2.8cqw}
}
@media(max-height:500px) and (orientation:landscape){#picture.menu-ready #tvMenu.home-open{left:12%;top:12%;width:76%;height:76%}#tvMenu #menuHome .menu-tour{min-height:44px!important}}
@media(prefers-reduced-motion:reduce){#menuHome .play,#tvMenu.tour-complete #menuHome #homeAccess .line-icon{animation:none}#tvMenu #menuHome .menu-card{transition:none}#tvMenu #menuHome .menu-card:hover{transform:none}}
/* Preserve leaving the TV by dragging or scrolling, without another button. */
#tvExitHint{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);margin:0;padding:5px 10px;color:#fffdf3;background:#183a30b8;border-radius:999px;font-size:clamp(11px,1cqw,15px);line-height:1.3;white-space:nowrap;pointer-events:none}
#tvExitHint[hidden]{display:none}
#picture.menu-ready #roomStill{cursor:grab}
@media(max-width:600px) and (orientation:portrait){#tvExitHint{bottom:1%;padding:3px 8px;font-size:11px}}