@import url('/fonts.css');
:root{color-scheme:dark;--bg:#1d1e26;--panel:#23242d;--ink:#f9fafb;--muted:#a5a8b7;--line:#3a3c4b;--green:#35ca70;--bright:#6be398;font-family:'Source Sans 3',sans-serif;font-weight:400;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-size:16px}
button,input{font:inherit}
strong{font-weight:400}
button,a,input{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{cursor:pointer;color:#fff;border:0;text-transform:none}
a{color:inherit;text-decoration:none}
button:disabled{cursor:not-allowed;opacity:.4}
button:focus-visible,a:focus-visible{outline:3px solid var(--green);outline-offset:5px}
/* Keep fields at 16px so iOS does not zoom when they receive focus. */
input{font-size:16px;width:100%;padding:15px 16px;border:1px solid var(--line);background:#1d1e26;border-radius:9px;color:var(--ink);outline:none}
input:focus{border-color:var(--green)}
button{transition:background .18s,transform .18s}
button:hover:not(:disabled){filter:brightness(1.1)}
button:active:not(:disabled){transform:translateY(1px)}
[hidden]{display:none!important}
.muted{color:var(--muted);line-height:1.6}
.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:400;color:var(--muted)}
h1,h2,p{margin-top:0}
h1{font-family:'Montserrat',sans-serif;font-weight:500;letter-spacing:-.04em}
h1 span{color:var(--green)}
h2{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:500;letter-spacing:-.025em}
.primary,.secondary{font-family:'Source Sans 3',sans-serif;padding:15px 22px;border-radius:8px;font-weight:600;text-transform:none;display:inline-flex;align-items:center;justify-content:center;gap:16px}
.primary{background:#67c679;color:#fff}
.secondary{background:#343644;color:#fff;border:1px solid #4a4d60}
.quiet,.text-button{background:transparent;color:#fff;font-size:14px}
.quiet:hover,.text-button:hover{color:white}
.utility-button{min-height:36px;padding:8px;font-size:13px;white-space:nowrap;background:#292a35;color:#fff;border:1px solid var(--line);border-radius:6px}
.utility-button.active{border-color:var(--green)}
.login-screen{min-height:100svh;background:radial-gradient(ellipse at 90% 40%,#293e35 0,transparent 48%),var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px}
.brand,.login-brand{--brand-height:36px}
.login-brand{display:flex;align-items:center;gap:24px;margin-bottom:48px}
.login-brand img{width:174px;height:auto}
.login-card{width:440px;max-width:100%;padding:32px;border:1px solid var(--line);border-radius:20px;background:#23242dd9}
.login-card h1{font-size:44px;line-height:1.07;margin:22px 0}
.login-card label{display:block;font-size:14px;margin:20px 0 0;color:#d2d5df}
.login-card input{margin-top:9px}
.login-card .primary{width:100%;justify-content:center;margin-top:24px}
.login-card #login-error{color:#ffb7a9;margin:16px 0 0;font-size:14px}
.login-footer{font-size:14px;color:var(--muted);margin:28px 0 0}
#app{--sidebar-width:clamp(260px,27vw,400px);--column-gap:clamp(18px,2.5vw,40px);height:100dvh;max-width:1720px;margin:auto;padding:0 clamp(16px,3vw,48px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(10px,2dvh,24px)}
header{min-height:60px;padding:clamp(10px,1.8dvh,22px) 0;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:24px}
.brand img{width:176px}
.brand-divider{height:var(--brand-height);width:1px;flex-shrink:0;background:#4a4c59}
.event-time{white-space:nowrap}
.event-time strong{font-family:'Montserrat',sans-serif;font-size:22px;font-weight:500;letter-spacing:-.04em}
.header-tools{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.icon-button{width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:50%;background:#292a35;color:#fff;display:grid;place-items:center}
.icon-button svg{width:21px;height:21px}
.icon-button.active{border-color:var(--green)}
.sound-waves,.fullscreen-exit{display:none}
#sound.active .sound-muted,#fullscreen.active .fullscreen-enter{display:none}
#sound.active .sound-waves,#fullscreen.active .fullscreen-exit{display:block}
.mode-control{position:relative;width:100%;background:#14151b;border:1px solid var(--line);border-radius:8px;padding:4px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px}
.mode-option{min-width:0;display:flex;position:relative}
.mode-control button{width:100%;min-height:40px;padding:8px 15px;background:transparent;border-radius:5px;font-size:14px;color:#fff}
.mode-control .selected{background:#343644;color:#fff}
main{display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar-width);gap:var(--column-gap);min-height:0;min-width:0}
aside{display:flex;flex-direction:column;min-width:0;min-height:0}
.wheel-panel{--heading-size:clamp(23px,2.2vw,31px);border:1px solid var(--line);border-radius:22px;background:radial-gradient(ellipse at 50% 50%,#2e303c 0%,#23242d 65%);padding:clamp(14px,2.5dvh,28px) clamp(16px,2vw,32px);position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;min-width:0}
.wheel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.wheel-heading h1,.ticket-count strong,.winning-ticket>strong,#claim-time{font-family:'Montserrat',sans-serif;font-size:var(--heading-size);font-weight:500;letter-spacing:-.04em;line-height:1.2}
.wheel-heading h1{margin-bottom:0}
.wheel-heading .eyebrow{margin-bottom:9px}
.ticket-count{text-align:right;flex-shrink:0}
.ticket-count strong{display:block}
.wheel-space{min-height:0;min-width:0;margin:24px 28px 16px 16px;container-type:size;display:grid;place-items:center}
.wheel-stage{width:min(100cqi,100cqb,760px);aspect-ratio:1;position:relative;display:grid;place-items:center}
.wheel-frame{height:100%;width:100%;border-radius:50%;overflow:hidden;outline:2px solid #55cd85;outline-offset:7px;box-shadow:0 0 0 15px #35ca7009,0 12px 24px #11131b50}
.wheel-frame canvas{display:block;width:100%;height:100%;border-radius:50%;will-change:transform}
.wheel-pointer{position:absolute;z-index:4;top:50%;right:-27px;transform:translateY(-50%);width:15px;height:18px;background:#f4f5f8;clip-path:polygon(100% 0,100% 100%,0 50%)}
.wheel-hub{position:absolute;z-index:2;border-radius:50%;width:24%;height:24%;background:linear-gradient(145deg,#363846,#22232c 75%);border:clamp(4px,.5vw,6px) solid #414452;box-shadow:0 9px 18px #0005,inset 0 1px 0 #ffffff0c;display:grid;place-items:center}
.wheel-hub img{width:46%;height:56%;object-fit:contain}
.wheel-empty{position:absolute;inset:0;background:#1d1e26d9;border-radius:50%;z-index:3;display:grid;place-items:center;text-align:center;color:#b5b9c7;font-size:clamp(12px,4cqi,22px);line-height:1.4}
.draw-status{height:clamp(54px,8dvh,80px);min-width:0}
.draw-controls{text-align:center;position:relative;min-width:0;flex-shrink:0;margin-top:clamp(10px,2dvh,23px)}
/* Matches the main Create an account CTA on melbicom.net. */
.spin-button{font-family:'Source Sans 3',sans-serif;font-weight:600;width:100%;min-height:44px;font-size:16px;line-height:24px;letter-spacing:normal;justify-content:center;text-transform:none;padding:clamp(10px,1.6dvh,18px) 18px;border:0;border-radius:8px;background:#67c679;color:#fff;box-shadow:none;backdrop-filter:blur(6px)}
.spin-button:hover:not(:disabled){filter:none;background:#67c679}

.prize-heading{display:flex;align-items:center;justify-content:space-between;margin:3px 0 clamp(10px,1.8dvh,20px);gap:10px;flex-shrink:0}
.prize-heading h2{margin:0}
.prize-heading>span{font-size:12px;color:var(--muted)}
#prizes{display:grid;gap:11px;flex-shrink:0}
.prize{--prize-size:18px;width:100%;min-width:0;text-align:left;display:flex;align-items:center;gap:14px;background:#292a35;border:1px solid var(--line);padding:clamp(10px,2dvh,22px) clamp(12px,1.4vw,18px);border-radius:12px;position:relative}
.prize.selected{border-color:var(--green);background:linear-gradient(100deg,#314a3c 0%,#292a35 85%)}
.prize.awarded{opacity:1;background:#26332c;border-color:#405849;cursor:default}.prize.awarded .prize-number{display:none}.prize.awarded .ticket-code{color:var(--green);white-space:nowrap;flex-shrink:0}
.prize-number{font-size:13px;color:#fff;align-self:flex-start;padding-top:2px}
.prize-name,.prize.awarded .ticket-code{font-family:'Montserrat',sans-serif;font-size:var(--prize-size);font-weight:500;letter-spacing:-.03em;line-height:1.2}
.prize-name{min-width:0}
.prize-name small{font-family:'Source Sans 3',sans-serif;display:block;font-size:11px;letter-spacing:0;color:#fff;margin-top:9px;font-weight:400}
.prize-check{margin-left:auto;font-size:22px;color:#fff}
.prize-art{flex:1;min-height:0;margin-top:clamp(10px,2dvh,23px);border-radius:16px;overflow:hidden;background:#fff;position:relative}
.prize-art>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;padding:14px 5px 12px}
/* Compact hints are controlled by pointer, touch and keyboard events. */
.mode-area{width:100%;position:relative;flex-shrink:0;padding-top:clamp(10px,2dvh,26px)}
.help-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;width:max-content;max-width:calc(100vw - 32px);padding:7px 10px;background:#343644;color:#eceef4;border:1px solid #4a4d60;border-radius:8px;box-shadow:0 6px 18px #0004;font-size:12px;line-height:1.3;white-space:nowrap;z-index:8;visibility:hidden;opacity:0;transform:translate(-50%,4px);transition:opacity .12s,transform .12s}
.help-tooltip::before{content:'';position:absolute;left:0;right:0;top:100%;height:10px}
.mode-option.hint-open .help-tooltip{visibility:visible;opacity:1;transform:translate(-50%,0)}

.result{height:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.winning-ticket{text-align:right}
.winning-ticket>.eyebrow,.claim-timer>.eyebrow{display:block;margin-bottom:3px;font-size:10px}
.winning-ticket>strong{color:var(--bright);display:block}
.claim-timer{color:#fff;font-variant-numeric:tabular-nums}
#claim-time{display:block;opacity:.7}
.resolve-buttons{display:flex;gap:8px;justify-content:center}
.resolve-buttons button{font-size:14px;padding:12px;min-height:42px}
.draw-controls .resolve-buttons{display:grid;grid-template-columns:1fr 1fr}
.draw-controls .resolve-buttons button{font-size:16px;line-height:24px;font-weight:600;padding:clamp(10px,1.6dvh,18px) 12px;min-height:44px}
footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:clamp(10px,1.6dvh,20px) 0;border-top:1px solid var(--line);color:var(--muted);font-size:12px;min-width:0}
footer>div{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 14px}
footer a{font-size:14px;color:#fff}
dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:20px;width:min(860px,calc(100% - 32px));padding:32px;box-shadow:0 30px 100px #0008}
dialog::backdrop{background:#08090fcf;backdrop-filter:blur(7px)}
.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.dialog-top h2{font-size:28px;margin:0}
.dialog-top .eyebrow{margin-bottom:9px}
.list-toolbar{display:flex;gap:16px}
.list-toolbar input{flex:1;min-width:0}
.list-toolbar a{font-size:14px;white-space:nowrap}
.table-scroll{overflow:auto;max-height:60vh;margin-top:22px}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:15px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:12px;color:var(--muted);font-weight:400}
td:first-child{font-variant-numeric:tabular-nums;font-size:16px;color:var(--bright)}
td small{display:block;color:var(--muted);margin-top:5px}
.status{font-size:12px;padding:5px 8px;border-radius:5px;background:#343644}
.status.active{color:var(--bright)}
#settings-dialog{max-width:440px;padding:clamp(22px,4vw,28px);border-radius:18px}
#settings-dialog .dialog-top{gap:12px;margin-bottom:12px}
#settings-title{font-size:24px;line-height:1.3;outline:none}
#settings-dialog .icon-button{width:36px;height:36px;flex-shrink:0}
#settings-dialog .icon-button svg{width:18px;height:18px}
#settings-dialog .settings-schedule{color:var(--muted);font-size:14px;line-height:1.5;margin:0}
#save-settings{width:100%;min-height:46px;padding:10px 16px;font-size:16px}
#confirm-dialog{max-width:440px;padding:28px;border-radius:18px}
#confirm-title{font-size:24px;line-height:1.3;margin:0 0 26px;outline:none}
#confirm-dialog .resolve-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#confirm-dialog .resolve-buttons button{min-height:46px;font-size:16px;padding:10px 16px}
.switch-label{display:flex;gap:12px;align-items:center;margin:22px 0 18px;padding:14px;background:#292a35;border:1px solid var(--line);border-radius:10px;cursor:pointer}
#registration-label{white-space:nowrap}
.switch-label input{appearance:none;-webkit-appearance:none;width:22px;height:22px;padding:0;margin:0;flex-shrink:0;display:grid;place-items:center;border:1px solid #616575;border-radius:6px;background:#1d1e26;cursor:pointer;transition:background .15s,border-color .15s}
.switch-label input::before{content:'';width:6px;height:11px;border:solid white;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);opacity:0}
.switch-label input:checked{background:#67c679;border-color:#67c679}
.switch-label input:checked::before{opacity:1}
.switch-label input:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.switch-label:has(input:checked){border-color:#4b805b;background:#2b3a31}
#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#e3f7eb;color:#12331f;padding:15px 24px;border-radius:10px;box-shadow:0 5px 30px #0008;z-index:99;max-width:90%;font-size:14px}
.celebrate .wheel-panel{border-color:var(--green)}
#effects{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:90}
.confetti{position:absolute;width:7px;height:11px;pointer-events:none;animation:fall 1.8s ease-in forwards}
@keyframes fall{from{transform:translateY(-15vh) rotate(0);opacity:1}
to{transform:translateY(100vh) rotate(600deg);opacity:0}
}
@media(max-width:1150px){
.wheel-panel{--heading-size:23px}
.wheel-heading .eyebrow{font-size:10px}
.prize{--prize-size:16px;gap:10px}
.prize-heading h2{font-size:18px}
.header-tools{gap:8px}
.event-time strong{font-size:18px}
.brand{gap:15px}
.brand img{width:148px}
footer .quiet,footer .text-button,footer a{font-size:12px}
}
@media(max-width:850px) and (min-height:651px){
main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:14px}
aside{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.prize-heading{grid-column:1/-1;margin:0}
.prize-art{min-height:0;margin:0;grid-column:2;grid-row:2}
.draw-controls{grid-column:1/-1;margin-top:0}
.mode-area{grid-column:1/-1;padding-top:0}
.prize{padding:10px 12px}
.prize-name small{font-size:10px}
footer{gap:8px}
}
@media(max-width:600px){
#app{padding:0 12px;gap:10px}
header{min-height:52px;flex-wrap:wrap;gap:6px 10px;padding:8px 0}
.brand img{width:88px}
.brand,.login-brand{--brand-height:25px}
.brand{gap:8px}
.event-time strong{font-size:14px}
.header-tools{gap:4px}
.header-tools .icon-button{width:32px;height:32px}
.icon-button svg{width:17px;height:17px}
main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px}
.wheel-panel{padding:12px 14px;border-radius:16px}
.wheel-panel{--heading-size:20px}
.wheel-heading{gap:12px}
.wheel-heading .eyebrow{font-size:8px;margin-bottom:4px}
.wheel-space{margin:24px 24px 14px 12px}
.wheel-pointer{right:-24px;width:13px;height:16px}
.spin-button,.draw-controls .resolve-buttons button{padding:8px 14px;min-height:40px;font-size:14px}
aside{display:grid;grid-template-columns:1fr;gap:8px}
.prize-heading{grid-column:1;margin:0}
.prize-heading h2{font-size:16px}
.prize-heading>span{font-size:11px}
#prizes{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.prize{--prize-size:12px;height:auto;min-height:54px;padding:9px 8px;gap:4px;align-items:center;justify-content:space-between}
.prize-number{display:none}
.prize-name small{display:none}
.prize-name .watch-brand{display:none}
.prize-art{display:none}
.mode-area{grid-column:1;padding-top:0}
.mode-control button{min-height:32px;font-size:12px;padding:5px 10px}
.draw-controls{grid-column:1;margin-top:0}
.winning-ticket>.eyebrow,.claim-timer>.eyebrow{font-size:8px}
footer{padding:4px 0 6px;font-size:11px}
footer>#sync-status{display:none}
footer>div{width:100%;flex-wrap:nowrap;justify-content:space-between;gap:8px}
footer .quiet,footer .text-button,footer a{font-size:13px;padding:0;min-height:32px;min-width:0;flex:1;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
footer>div>:first-child{justify-content:flex-start}
footer>div>:last-child{justify-content:flex-end}
.list-toolbar{flex-direction:column}
dialog{padding:22px}
.login-card{padding:25px}
.login-brand{gap:12px}
.login-brand img{width:128px}
.login-card h1{font-size:35px}
}
@media(max-height:650px) and (min-width:601px){
#app{--sidebar-width:clamp(220px,29vw,320px);--column-gap:16px;gap:10px;padding:0 18px}
header{min-height:50px;padding:8px 0}
.brand img{width:130px}
.brand{gap:12px;--brand-height:28px}
.event-time strong{font-size:18px}
.header-tools .icon-button{width:34px;height:34px}
.wheel-panel{padding:12px 16px}
.wheel-panel{--heading-size:20px}
.wheel-heading{gap:12px}
.wheel-heading .eyebrow{font-size:9px;margin-bottom:4px}
.wheel-space{margin-top:24px;margin-bottom:14px}
.prize-heading{margin-bottom:8px}
.prize-heading h2{font-size:16px}
.prize-heading>span{font-size:10px}
#prizes{gap:7px}
.prize{--prize-size:14px;padding:8px 10px;gap:8px}
.prize-name small{margin-top:5px;font-size:10px}
.prize-art{margin-top:8px}
.prize-art>img{padding:5px}
.mode-area{padding-top:8px}
.mode-control button{min-height:32px;padding:5px 8px;font-size:12px}
.spin-button,.draw-controls .resolve-buttons button{min-height:40px;padding:8px 14px;font-size:14px}
footer{padding:8px 0;font-size:10px;gap:8px}
footer>div{gap:5px 9px}
footer .quiet,footer .text-button,footer a{font-size:11px}
}
@media(max-height:420px) and (min-width:601px){
.prize{min-height:34px;padding:6px 10px}
.prize-heading{margin-top:0;margin-bottom:6px}
.wheel-panel{--heading-size:18px}
.wheel-heading .eyebrow{font-size:8px}
.draw-status{height:44px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
.confetti{display:none}
}