/* The approved master artwork is the visual layer. Controls are transparent
   unless their live state differs from the default printed in that artwork. */
#screen-home,.template-screen{padding:0!important;min-height:100dvh!important;height:100dvh!important;background:#052846;overflow:hidden!important}
#screen-home.active,.template-screen.active{display:flex!important;align-items:center;justify-content:center}
.template-overlay{padding:0!important;background:#001522!important;overflow:hidden;align-items:center;justify-content:center}
.home-template-shell,.approved-template-shell{position:relative;flex:none;line-height:0;overflow:hidden;width:min(100%,56.28dvh);aspect-ratio:941/1672;max-height:100dvh;margin:auto;transform:none;background:#052846}
.home-picture,.approved-template-picture{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.home-template-image,.approved-template-image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.home-template-shell button,.approved-template-shell button{position:absolute;border:0!important;background:transparent!important;color:transparent!important;padding:0;margin:0;box-shadow:none!important;min-width:0;min-height:0;max-width:none;border-radius:999px;line-height:1;cursor:pointer;z-index:4;outline:none;-webkit-tap-highlight-color:transparent}
.home-template-shell button>*,.approved-template-shell .tpl-start>*,.how-details>*,.settings-template-shell .selection-check{visibility:hidden}
.home-template-shell button:focus-visible,.approved-template-shell button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.home-template-shell button::before,.home-template-shell button::after,.approved-template-shell button::before,.approved-template-shell button::after{content:none}
.template-button-group{position:absolute;inset:0;pointer-events:none}
.template-button-group button{pointer-events:auto}
.template-hidden-data,.template-state-text,.flow-back,.instructions-icon{display:none!important}
.flow-nav{position:absolute;left:auto;right:4.3%;top:1.9%;width:21.2%;height:4.6%;z-index:5}
.flow-nav .flow-next{inset:0;width:100%;height:100%}
.approved-template-shell .tpl-back{left:4.3%;top:1.9%;width:21.2%;height:4.6%}
.settings-template-shell .flow-nav,.settings-template-shell .tpl-back{top:2.9%}
.mic-template-shell .flow-nav,.mic-template-shell .tpl-back{top:3.8%}
.home-hotspot.settings{left:6.3%;top:3.9%;width:10.8%;height:6.4%}
.home-hotspot.stats{right:6.3%;top:3.9%;width:10.8%;height:6.4%}
.home-hotspot.how,.home-hotspot.play,.home-hotspot.team,.home-hotspot.join{left:20.8%;width:58.4%;height:6.4%}
.home-hotspot.how{top:57.8%}.home-hotspot.play{top:64.1%}.home-hotspot.team{top:71%}.home-hotspot.join{top:77.8%}
.how-details{left:34%;top:86.6%;width:32%;height:3.5%}
.tpl-how-close{left:18%;top:92%;width:64%;height:5.1%}
.tpl-difficulty button{top:60.2%;height:4.8%}
.tpl-difficulty button:nth-child(1){left:4.6%;width:27.4%}.tpl-difficulty button:nth-child(2){left:33.4%;width:27.6%}.tpl-difficulty button:nth-child(3){left:62.2%;width:33.4%}
.tpl-time button{top:69.3%;height:5.1%}
.tpl-time button:nth-child(1){left:9.1%;width:40.6%}.tpl-time button:nth-child(2){left:50.6%;width:40.5%}
.tpl-voice button{top:78.4%;height:5.1%}
.tpl-voice button:nth-child(1){left:13.6%;width:36.1%}.tpl-voice button:nth-child(2){left:50.6%;width:36.1%}
.tpl-start{left:14.2%;top:85.2%;width:71.9%;height:8.1%}
.tpl-setup-mic{left:7.7%;top:75.3%;width:8%;height:4%}
.selection-check{display:none}
.setup-template-shell[data-custom='true'] button.active .selection-check{position:absolute;display:flex;visibility:visible;align-items:center;justify-content:center;right:4%;top:-6%;width:clamp(16px,4.6vw,40px);aspect-ratio:1;border-radius:50%;background:#087a3d;color:#fff;font:900 clamp(12px,3.3vw,28px)/1 Arial,sans-serif}
.settings-template-shell{container-type:inline-size}
.settings-sound,.settings-voice{inset:auto;left:58.5%;width:28.3%;height:4.5%;pointer-events:auto;border-radius:999px;overflow:hidden}
.settings-sound{top:53.3%}.settings-voice{top:59.6%}
.settings-sound button,.settings-voice button{top:0;width:50%;height:100%;border-radius:0}
.settings-sound button:first-child,.settings-voice button:first-child{left:0}
.settings-sound button:last-child,.settings-voice button:last-child{left:50%}
.settings-sound,.settings-voice{background:#0b2c50;border:1px solid #75b5db;display:flex}
.settings-sound button,.settings-voice button{color:#fff!important;font-weight:600;font-family:Arial,sans-serif;font-size:2.85cqw}
.settings-sound button:first-child::before,.settings-voice button:first-child::before{content:'ON'}
.settings-sound button:last-child::before,.settings-voice button:last-child::before{content:'OFF'}
.settings-sound button.active,.settings-voice button.active{background:#198843!important}
.settings-sound button:last-child.active,.settings-voice button:last-child.active{background:#ce2e3d!important}
.settings-sound::after,.settings-voice::after{content:'✓';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:19%;aspect-ratio:1;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#138345;font-family:Arial,sans-serif;font-weight:900;font-size:2.6cqw;pointer-events:none;z-index:6;line-height:1}
.settings-sound[data-on='false']::after,.settings-voice[data-on='false']::after{color:#c92b39}
.settings-test,.settings-how,.settings-clear{left:52.7%;width:34%;height:4.5%}
.settings-test{top:65.4%}.settings-how{top:71.6%}.settings-clear{top:77.8%}
.settings-about{left:25.4%;top:83.3%;width:49%;height:3.5%}
.settings-to-setup{left:22%;top:92.2%;width:56%;height:5.2%}
.mic-tap{left:3.5%;top:67.2%;width:33.5%;height:19%}
.mic-live-panel{position:absolute;left:37.2%;top:66.1%;width:60.8%;height:25.7%;z-index:5;pointer-events:none;background:transparent;line-height:1.25;color:#fff}
.mic-live-panel>strong{display:none}
.mic-live-panel #micTranscript{display:none;position:absolute;left:4.8%;top:16%;width:90.4%;height:22.8%;padding:3%;background:#f3f8ff;border-radius:clamp(6px,2.3vw,22px);color:#13223b;font:800 clamp(10px,2.7vw,27px)/1.25 Arial,sans-serif;overflow:auto;pointer-events:auto}
.mic-live-panel[data-live='true'] #micTranscript{display:flex;align-items:center}
.mic-live-panel .mic-result{position:absolute;left:5%;top:42%;width:90%;max-height:35%;font-size:clamp(10px,2.5vw,23px);line-height:1.3;overflow:auto}
.mic-live-panel #micRetryBtn{left:5%;top:81%;width:90%;height:14%;pointer-events:auto;color:#fff!important;background:#087db5!important;font-size:clamp(10px,2.5vw,20px)}
.mic-to-settings{left:22%;top:93%;width:56%;height:4.7%}
.template-error{position:absolute;left:9%;right:9%;bottom:1.2%;line-height:1.2;background:#920909;color:white;border-radius:10px;padding:5px;text-align:center;font-size:12px;z-index:8}.template-error:empty{display:none}
@media (orientation:landscape){
 .home-template-shell,.approved-template-shell{width:min(100%,177.68dvh);aspect-ratio:1672/941}
 .home-hotspot.settings,.home-hotspot.stats{top:4%;width:5.3%;height:9.4%}.home-hotspot.settings{left:2.4%}.home-hotspot.stats{right:2.4%}
 .home-hotspot.how,.home-hotspot.play,.home-hotspot.team,.home-hotspot.join{left:15.6%;width:29.7%;height:9.5%}
 .home-hotspot.how{top:45%}.home-hotspot.play{top:55.8%}.home-hotspot.team{top:66.5%}.home-hotspot.join{top:77.2%}
 .approved-template-shell .tpl-back,.settings-template-shell .tpl-back,.mic-template-shell .tpl-back{left:2.1%;top:3.5%;width:12.7%;height:7.8%}
 .flow-nav,.settings-template-shell .flow-nav,.mic-template-shell .flow-nav{right:1.5%;top:3.5%;width:12.7%;height:7.8%}
 .how-details{left:38.7%;top:88.3%;width:22.6%;height:5.1%}.tpl-how-close{left:36.2%;top:94.8%;width:27.6%;height:4.8%}
 .tpl-difficulty button{top:43.1%;height:7.6%}.tpl-difficulty button:nth-child(1){left:11.5%;width:13.3%}.tpl-difficulty button:nth-child(2){left:25.3%;width:13.5%}.tpl-difficulty button:nth-child(3){left:39.3%;width:14.9%}
 .tpl-time button{top:57%;height:7.7%}.tpl-time button:nth-child(1){left:12%;width:20.3%}.tpl-time button:nth-child(2){left:32.9%;width:19.8%}
 .tpl-voice button{top:71.2%;height:7.9%}.tpl-voice button:nth-child(1){left:13.8%;width:18.5%}.tpl-voice button:nth-child(2){left:32.9%;width:18.6%}
 .tpl-start{left:12.8%;top:81.7%;width:39%;height:12%}.tpl-setup-mic{left:11.9%;top:65.8%;width:3.2%;height:6%}
 .setup-template-shell[data-custom='true'] button.active .selection-check{width:clamp(16px,2.6vw,42px);font-size:clamp(12px,1.8vw,28px);right:-3px;top:-10%;border:1px solid #fff}
 .settings-sound,.settings-voice{left:29.3%;width:13.9%;height:6.1%}.settings-sound{top:44.7%}.settings-voice{top:52.3%}
 .settings-sound button,.settings-voice button{font-size:1.15cqw}
 .settings-sound::after,.settings-voice::after{font-size:1.6cqw}
 .settings-test,.settings-how,.settings-clear{left:26.7%;width:16.5%;height:6.5%}.settings-test{top:60%}.settings-how{top:67.8%}.settings-clear{top:75.7%}
 .settings-about{left:12.1%;top:83.3%;width:27.5%;height:5.2%}.settings-to-setup{left:11.5%;top:90.4%;width:29%;height:7.6%}
 .mic-tap{left:9.2%;top:53.8%;width:17.3%;height:29.9%}
 .mic-live-panel{left:27.2%;top:53.9%;width:29.5%;height:29.9%}
 .mic-live-panel #micTranscript{top:23%;height:31%;font-size:clamp(10px,1.6vw,27px)}
 .mic-live-panel .mic-result{top:56%;max-height:24%;font-size:clamp(10px,1.4vw,22px)}
 .mic-live-panel #micRetryBtn{top:81%;height:16%;font-size:clamp(10px,1.3vw,20px)}
 .mic-to-settings{left:28.2%;top:85%;width:27.6%;height:7.8%}
 #micTestOverlay[data-return-to='setup'] .mic-to-settings{left:35.8%;top:86.8%;width:28.4%;height:8%}
 .template-error{left:12%;right:46%;font-size:clamp(10px,1.2vw,18px)}
}

.settings-sound::after,.settings-voice::after{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m6%2012%204%204%208-10%22%20fill%3D%22none%22%20stroke%3D%22%23138345%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");background-position:center;background-size:70% 70%;background-repeat:no-repeat}

.settings-sound[data-on='false']::after,.settings-voice[data-on='false']::after{content:"";background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m6%2012%204%204%208-10%22%20fill%3D%22none%22%20stroke%3D%22%23c92b39%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");background-position:center;background-size:70% 70%;background-repeat:no-repeat}
