/* Loaded last: shared input sizing and a flowing host layout on compact screens. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-block:16px}
button,input,select{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a45e15;outline-offset:3px}
.registration-page{margin:0;width:100%;font-family:Arial,sans-serif;background:#180c03;display:grid;justify-items:center;align-content:start;padding:24px max(12px,env(safe-area-inset-right)) 24px max(12px,env(safe-area-inset-left))}
.registration-page #registration-dialog{max-height:none;margin:0;overflow:visible;min-width:0}
#registration-form input:not([type=radio]):not([type=checkbox]),#registration-form select{font-size:16px;min-height:44px}
#registration-form .gender-options label,button.registration-save,#retry-photo{min-height:44px}
#registration-form .consent{display:flex;align-items:flex-start;line-height:1.5}
#registration-form .consent input{width:20px;height:20px;flex:0 0 20px;margin:0}
#registration-message,.registration-help{overflow-wrap:anywhere}
dialog{width: min(780px,calc(100% - 24px));max-height:calc(100dvh - 24px)}
dialog header>div{min-width:0}dialog header>button{flex-shrink:0}
dialog h2{overflow-wrap:anywhere}
.registration-close{min-width:44px;min-height:44px}
.toolbar button{min-height:44px;min-width:44px}
.admin-header{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
@media(max-width:1024px){
 body[data-view=admin] .stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'heading' 'navigation' 'prizes' 'progress' 'reels' 'message' 'photo' 'name' 'grand' 'controls' 'winners';align-content:start;gap:20px;width:100%;height:auto;min-height:620px;aspect-ratio:auto;margin:0;padding:24px 14px;isolation:isolate}
 body[data-view=admin] .scene{object-fit:cover;z-index:-2}
 body[data-view=admin] .stage::before{content:'';position:absolute;inset:0;background:linear-gradient(#2a090950,#2a0909b8);z-index:-1;pointer-events:none}
 body[data-view=admin] .stage .machine{top:14%;z-index:-1}
 body[data-view=admin] .decorations,body[data-view=admin] #winner-panel{display:none}
 body[data-view=admin] .stage .game-heading{position:static;grid-area:heading;width:100%;margin:0;padding:4px 0 12px;transform:none;font-size:clamp(32px,10vw,68px);line-height:1.1}
 body[data-view=admin] #round-navigation{position:static;grid-area:navigation;transform:none;justify-content:center;flex-wrap:wrap;font-size:16px}
 body[data-view=admin] .prize-panel{position:relative;inset:auto;grid-area:prizes;width:100%;height:auto;min-height:260px;padding:14px 8px;gap:8px;border-radius:20px}
 body[data-view=admin] .prize-panel .prize-card{min-width:0;grid-template-rows:minmax(100px,1fr) auto auto;gap:10px;font-size:12px}
 body[data-view=admin] .prize-panel .card-face{width:100%;height:auto;max-width:130px;aspect-ratio:200/276;border-radius:18px}
 body[data-view=admin] .prize-panel strong{font-size:clamp(14px,4vw,28px)}
 body[data-view=admin] .prize-panel .prize-owner{display:block;overflow:visible;font-size:12px;line-height:1.4;overflow-wrap:anywhere;-webkit-line-clamp:unset}
 body[data-view=admin] .progress{position:static;grid-area:progress;width:100%;margin:0;font-size:14px}
 body[data-view=admin] .stage .draw-panel{position:relative;inset:auto;grid-area:reels;width:100%;height:194px;margin:0;border:2px solid #d49c31;border-radius:18px}
 body[data-view=admin] .draw-panel>div{width:33.333%;min-width:0;border:0}
 body[data-view=admin] .draw-panel h2{left:3%;top:8px;width:94%;padding:8px 0;margin:0;border:2px solid #e6bc37;border-radius:12px;font:800 clamp(10px,2.8vw,16px)/1.2 Arial,sans-serif;color:#542010;text-shadow:none;box-shadow:none}
 body[data-view=admin] .reel-window{display:none}
 body[data-view=admin] .stage .machine-slots{position:relative;inset:auto;grid-area:reels;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;height:194px;padding:52px 10px 12px;margin:0}
 body[data-view=admin] .stage[data-screen=result] .machine-slot:nth-child(n){position:relative;inset:auto;width:100%;height:100%;border:2px solid #b67a22;border-radius:12px;background:linear-gradient(#fff3d6,#fffdf4,#ffe9ab)}
 body[data-view=admin] .stage .machine-slot .slot-value,body[data-view=admin] .stage .machine-slot .slot-strip span{font:800 clamp(14px,4vw,24px)/1.2 Arial,sans-serif;color:#542010;text-shadow:none;overflow-wrap:anywhere;padding-inline:4px}
 body[data-view=admin] .stage .machine-slot:nth-child(3) .slot-value,body[data-view=admin] .stage .machine-slot:nth-child(3) .slot-strip span{font-size:clamp(12px,3.2vw,19px)}
 body[data-view=admin] #winner-photo{position:relative;inset:auto;grid-area:photo;justify-self:center;width:min(58vw,240px);height:auto;aspect-ratio:1;border:2px solid #d6a230;border-radius:18px;background:#ffd944;padding:6px}
 body[data-view=admin] .stage #winner-note{position:static;grid-area:name;width:100%;max-height:none;overflow:visible;margin:0;text-align:center;font-size:clamp(18px,5vw,28px);line-height:1.4;overflow-wrap:anywhere}
 body[data-view=admin] #controls{grid-area:controls;display:flex;justify-content:center;min-width:0}
 body[data-view=admin] .stage #controls .hotspot{position:static;width:min(100%,300px);height:auto;min-height:54px;aspect-ratio:auto;padding:12px; background:linear-gradient(#ffdc83,#ffb532);border:3px solid #b77b14;border-radius:22px;color:#65270f;font:400 23px/1.3 AdumuFull,Arial,sans-serif;text-shadow:none}
 body[data-view=admin] #draw-message{position:static;grid-area:message;width:100%;margin:0;font-size:14px;overflow-wrap:anywhere}
 body[data-view=admin] .stage .winners-dashboard{position:static;grid-area:winners;width:100%;height:auto;min-height:54px;padding:8px}
 body[data-view=admin] .winners-dashboard header{flex-wrap:wrap;height:auto;gap:8px}
 body[data-view=admin] #open-winners{min-height:44px}
 body[data-view=admin] .grand-prize{position:relative;inset:auto;grid-area:grand;justify-self:center;width:min(100%,400px);height:340px;padding:16px}
 body[data-view=admin] .admin-header .connection-badge{flex-shrink:1;overflow-wrap:anywhere}
}
@media(max-width:360px){
 #participants-dialog,#registration-dialog,#winners-dialog{padding:14px}
 .participant-tools input{min-width:0;flex-basis:100%}
 .gender-options{gap:4px}
}

/* Keep the name flush with the portrait's bottom edge. */
@media(min-width:1025px){
 body[data-view] .stage #winner-photo{left:74.7%;top:6%;width:22%;height:57%}
 body[data-view] .stage #winner-note{left:72.7%;top:63%;width:26%;margin:0;font-size:clamp(26px,2.8cqw,54px);line-height:1.05}
}
@media(max-width:1024px){
 body[data-view] .stage #winner-photo{width:min(70vw,300px)}
 body[data-view] .stage #winner-note{margin-top:-24px;font-size:clamp(30px,7.5vw,46px);line-height:1.1}
}