/* Shared viewport rules for admin, live audience and registration. */
html{min-height:100%;overflow-x:hidden;overflow-y:auto}
body[data-view]{height:auto;min-height:100dvh;overflow:visible;padding:64px 0 52px}
body[data-view] .stage{width:min(100%,calc((100dvh - 116px)*16/9));height:auto;min-height:0;aspect-ratio:16/9}
body[data-view] button{touch-action:manipulation}
.toolbar{bottom:max(8px,env(safe-area-inset-bottom));max-width:calc(100% - 24px);flex-wrap:wrap}
.registration-launch,.participants-launch,.review-prize-button{min-height:44px;font-size:12px;padding:8px 12px;top:8px}
.participants-launch{right:190px}
.connection-badge{top:20px;max-width:36%;text-align:center}
#round-navigation{top:calc(40.2% - 52px);font-size:clamp(12px,1.2cqw,20px);gap:1cqw}
#round-navigation button{min-width:44px;min-height:44px}
dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.participant-tools{flex-wrap:wrap}.participant-tools input{flex:1;min-width:140px}
#admin-participant-list li{flex-wrap:wrap}#admin-participant-list li>div{min-width:120px}
#registration-form input,#host-login input,.participant-tools input{font-size:16px}
.registration-page{min-height:100dvh;padding:20px 12px;overflow:auto}
.registration-page #registration-dialog{width:min(540px,100%);padding:clamp(16px,4vw,28px)}
.registration-page h1{font-size:clamp(23px,6vw,32px)}
@media(max-width:1100px){
 body[data-view]{padding-top:108px}
 body[data-view] .stage{width:min(100%,calc((100dvh - 160px)*16/9))}
 .connection-badge{top:64px;max-width:90%;font-size:10px}
 .participants-launch{right:8px;top:8px}.registration-launch{right:8px;top:56px}
 .connection-badge{left:12px;transform:none;max-width:55%;text-align:left}
 .review-prize-button{left:8px}
}
@media(max-width:1024px) and (orientation:portrait){
 body[data-view]{display:block;padding:108px 0 60px}
 body[data-view] .stage{width:100%;height:max(700px,calc(100dvh - 168px));min-height:700px;aspect-ratio:auto}
 .scene{object-fit:cover}
 .stage .machine{left:-17%;top:19%;width:135%}
 .stage[data-screen=title] .game-heading{left:4%;top:26%;width:92%;font-size:15cqw;line-height:1}
 .hotspot.start-button{left:29%;top:66%;width:42%;height:auto;aspect-ratio:3.15}
 .stage[data-screen=board] .game-heading{left:10%;top:7%;width:80%;font-size:14cqw}
 .prize-panel{left:4%;top:31%;width:92%;height:37%;padding:3cqw 2cqw;gap:2cqw;border-radius:6cqw}
 .prize-panel .prize-card{font-size:clamp(11px,2.8cqw,20px);gap:1cqw}
 .prize-panel .prize-card strong{font-size:4.6cqw}
 .prize-panel .prize-owner{font-size:clamp(11px,2.8cqw,20px)}
 #round-navigation{top:22%;gap:12px;font-size:16px}
 .progress{left:5%;top:71%;width:90%;font-size:clamp(12px,2.8cqw,20px)}
 .stage[data-screen=result] .machine{left:-13%;top:13%;width:130%}
 .stage[data-screen=result] .game-heading{left:10%;top:4%;width:80%;font-size:11cqw}
 .draw-panel{left:3%;top:20%;width:94%;height:30%;border-radius:6cqw}
 .draw-panel h2{left:3%;top:-9%;width:94%;font-size:4cqw;padding:2cqw 0}
 .reel-window{left:12%;width:76%;top:16%;height:76%}
 .stage[data-screen=result] .machine-slot{left:7%;top:26%;width:22%;height:20%}
 .stage[data-screen=result] .machine-slot:nth-child(2){left:39%}
 .stage[data-screen=result] .machine-slot:nth-child(3){left:70%}
 .stage[data-screen=result] .machine-slot .slot-value,.stage[data-screen=result] .machine-slot .slot-strip span{font-size:clamp(18px,5cqw,42px)}
 .stage[data-screen=result] .machine-slot:nth-child(3) .slot-value,.stage[data-screen=result] .machine-slot:nth-child(3) .slot-strip span{font-size:clamp(12px,3.2cqw,26px)}
 .winner-panel{left:6%;top:55%;width:40%;height:30%}
 #winner-photo{left:9%;top:57%;width:34%;height:25%}
 #winner-note{left:5%;top:86%;width:42%;font-size:clamp(14px,3cqw,24px);max-height:8%;overflow:auto}
 .stage .hotspot.draw-button{left:52%;top:66%;width:43%;height:auto;aspect-ratio:2.38;font-size:8cqw}
 .stage .hotspot.reveal-button{font-size:6cqw}
 .stage[data-screen=result] .decoration.ace,.stage[data-screen=result] .decoration.chip,.stage[data-screen=result] .decoration.dice{display:none}
 .winners-dashboard,.stage[data-screen=result] .winners-dashboard{left:4%;width:92%;height:48px;bottom:0;padding:8px 10px}
 .winners-dashboard header{height:100%;border:0;padding:0;gap:8px}
 .winners-dashboard h2{font-size:14px}#winners-count,#open-winners{font-size:12px}
 .winners-dashboard #winners-list,.winners-dashboard #winners-empty{display:none}
 .stage[data-screen=grand] .game-heading{left:4%;top:8%;width:92%;font-size:10cqw}
 .grand-prize{left:18%;top:26%;width:64%;height:42%}
 .grand-prize>strong{font-size:6cqw}#grand-name{font-size:4cqw}
 .stage[data-screen=grand] .draw-button{left:28%;top:76%;width:44%;font-size:5cqw}
 .toolbar{bottom:max(8px,env(safe-area-inset-bottom))}
}
@media(orientation:landscape) and (max-height:600px){
 body[data-view]{padding:100px 0 52px;display:grid}
 body[data-view] .stage{width:min(100%,1100px);height:auto;aspect-ratio:16/9}
 .connection-badge{top:64px;left:12px;transform:none;max-width:55%}
 .registration-launch{top:56px;right:8px}.participants-launch{top:8px;right:8px}
}
@media(max-width:600px) and (orientation:portrait){
 body[data-view]{padding-top:148px}
 .connection-badge{top:108px;left:50%;transform:translateX(-50%);max-width:94%;width:max-content;text-align:center}
 body[data-view] .stage{height:max(700px,calc(100dvh - 208px))}
}
/* Host navigation flows above the game instead of overlapping it. */
body[data-view=admin]{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 12px}
.admin-header{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(12px,2vw,32px);background:#240e08;border-bottom:1px solid #e9b84e55}
.admin-header .connection-badge{position:static;transform:none;max-width:none;width:auto;text-align:left;flex-shrink:0}
.admin-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.admin-header .admin-actions button{position:static;margin:0;max-width:none;min-height:44px;border-radius:12px;padding:10px 16px;font:400 14px/1.3 AdumuFull,Arial,sans-serif;white-space:normal}
body[data-view=admin] .stage{margin-block:auto}
@media(max-width:700px){
 .admin-header{justify-content:center;gap:10px;padding:12px}
 .admin-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px}
 .admin-actions #review-prize{grid-column:1/-1}
 .admin-header .admin-actions button{font-size:12px;padding:10px 8px}
 #registration-dialog .open-live-link{margin:10px 0;display:block;text-align:center}
 #registration-dialog>button:not(.registration-close){min-height:44px}
 #admin-participant-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px}
 #admin-participant-list li>div{min-width:0}
 #admin-participant-list li>button{grid-column:2;justify-self:start;min-height:44px}
 #admin-participant-list img{width:44px;height:52px}
}
/* Phone layout: compact page chrome and an independent portrait game board. */
@media(max-width:700px) and (orientation:portrait){
 body[data-view]{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0;min-height:100dvh}
 body[data-view] .stage{flex:none;width:100%;height:620px;min-height:620px;margin:0;aspect-ratio:auto}
 .admin-header{padding:8px 10px;gap:8px}
 .admin-header .connection-badge{font-size:9px;padding:6px 10px}
 .admin-actions{gap:6px}
 .admin-header .admin-actions button{min-height:44px;font-size:12px;padding:8px}
 .admin-actions #review-prize{grid-column:auto}
 .admin-actions:has(#review-prize:not([hidden])) #open-registration{grid-column:1/-1}
 body[data-view=audience] .connection-badge{order:-1;position:static;transform:none;max-width:calc(100% - 24px);width:auto;margin:10px auto;font-size:10px;text-align:center}
 body[data-view=audience] .toolbar{position:static;order:2;flex:none;margin:10px auto max(10px,env(safe-area-inset-bottom));max-width:calc(100% - 24px);opacity:1}
 .stage .machine{display:block}
 .stage .decorations{opacity:.45}
 .stage .decoration.dice,.stage .decoration.spade,.stage .decoration.ace{display:none}
 .stage .game-heading,.stage[data-screen=title] .game-heading{left:5%;top:13%;width:90%;font-size:14cqw;line-height:1.05}
 .stage[data-screen=title] .start-button{left:25%;top:57%;width:50%;height:60px;aspect-ratio:auto;background:linear-gradient(#fff439,#f4b731);border:3px solid #ae7100;color:#633209;font:400 7cqw AdumuFull,Arial,sans-serif;text-shadow:none}
 .stage[data-screen=board] .game-heading{top:5%;font-size:13cqw}
 #round-navigation{top:18%;font-size:14px;gap:12px}
 .prize-panel{left:3%;top:29%;width:94%;height:43%;padding:14px 8px;gap:8px;border-radius:22px}
 .prize-panel .prize-card{grid-template-rows:minmax(0,1fr) auto 3.8em;font-size:11px;gap:8px}
 .prize-panel .prize-card .card-face{width:100%;height:auto;max-height:100%;border-radius:18px}
 .prize-panel .prize-card strong{font-size:4.5cqw}
 .prize-panel .prize-owner{font:400 11px/1.25 AdumuFull,Arial,sans-serif;-webkit-line-clamp:3}
 .progress{top:76%;font-size:12px}
 .stage[data-screen=result] .game-heading{left:5%;top:4%;width:90%;font-size:11cqw}
 .stage[data-screen=result] .draw-panel{left:3%;top:20%;width:94%;height:25%;border-radius:20px}
 .draw-panel h2{left:2%;top:-18%;width:96%;font-size:3.6cqw;padding:8px 0;border-width:3px}
 .draw-panel .reel-window{left:8%;top:8%;width:84%;height:84%;background:linear-gradient(#fff2cb,#fffdf4,#ffe5a4);border:3px solid #b96a20;border-radius:12px}
 .stage[data-screen=result] .machine-slot{left:7%;top:23%;width:22%;height:18%;border-radius:8px;background:transparent;box-shadow:none}
 .stage[data-screen=result] .machine-slot:nth-child(2){left:39%}
 .stage[data-screen=result] .machine-slot:nth-child(3){left:71%}
 .winner-panel{left:29%;top:49%;width:42%;height:27%;border-radius:18px}
 #winner-photo{left:31%;top:50%;width:38%;height:24%;border-radius:12px}
 #winner-note{left:8%;top:77%;width:84%;max-height:8%;font:400 17px/1.3 AdumuFull,Arial,sans-serif;overflow:auto}
 .stage .hotspot.draw-button{left:25%;top:84%;width:50%;height:54px;aspect-ratio:auto;background:linear-gradient(#ffdc83,#ffb532);border:4px solid #ef1830;outline:2px solid #b77b14;border-radius:22px;color:#65270f;font:400 23px AdumuFull,Arial,sans-serif;text-shadow:none}
 .stage[data-screen=result]:has(#winner-photo[hidden]) .winner-panel{display:none}
 .stage[data-screen=result]:has(#winner-photo[hidden]) .hotspot.draw-button{top:58%}
 .winners-dashboard,.stage[data-screen=result] .winners-dashboard{left:3%;width:94%;bottom:0;height:38px;padding:5px 8px}
 .winners-dashboard h2{font-size:12px}#winners-count,#open-winners{font-size:11px}
 .stage[data-screen=grand] .game-heading{top:6%;font-size:10cqw}
 .grand-prize{left:12%;top:23%;width:76%;height:48%;padding:16px}
 .stage[data-screen=grand] .hotspot.draw-button{left:20%;top:80%;width:60%;font-size:20px}
 #game-notice{bottom:10px;max-width:94%;font-size:12px}
 #participants-dialog,#registration-dialog{padding:18px;max-height:calc(100dvh - 24px);border-radius:16px}
 #participants-dialog h2,#registration-dialog h2{font-size:22px}
}
@media(max-height:500px) and (orientation:landscape){
 body[data-view=audience]{padding:0 0 60px;display:flex;flex-direction:column}
 body[data-view=audience] .connection-badge{position:static;transform:none;margin:8px;max-width:95%}
 body[data-view=audience] .toolbar{position:static;margin:8px auto;order:2}
 body[data-view] .stage{flex:none;margin:0 auto}
}
@media(max-width:700px) and (orientation:portrait){
 .stage[data-screen=result] .machine-slot .slot-value,.stage[data-screen=result] .machine-slot .slot-strip span{color:#542010;text-shadow:none;font-family:Arial,sans-serif;font-weight:800}
 .stage[data-screen=result] .machine-slot:first-child .slot-value,.stage[data-screen=result] .machine-slot:first-child .slot-strip span{font-size:clamp(16px,4.5cqw,24px)}
 .stage[data-screen=result] .machine-slot:nth-child(2) .slot-value,.stage[data-screen=result] .machine-slot:nth-child(2) .slot-strip span{font-size:28px}
 .stage[data-screen=result] .machine-slot:nth-child(3) .slot-value,.stage[data-screen=result] .machine-slot:nth-child(3) .slot-strip span{font-size:clamp(13px,3.4cqw,18px)}
}
/* Center the complete machine artwork on phone and tablet screens. */
@media(max-width:1024px){
 body[data-view] .stage .machine{left:50%;right:auto;width:100%;height:auto;transform:translateX(-50%);transition:none}
}
/* Use the complete heading typeface so every letter in a winner's name renders. */
body[data-view] .stage #winner-note{font-family:AdumuFull,AdumuWinner,Arial,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em}