/* JM Spin to Win. Portal: JM red on near-black. Kiosk screen: themed by the event (CSS variables set by screen.js). */
:root{color-scheme:dark;--pbg:#111012;--panel:#1b1a1d;--panel2:#252327;--line:#38353b;--fg:#f4f1ef;--muted:#aaa4a7;--red:#d0021b;--redh:#e5182e;--good:#3ecf7a;--warn:#f2b632;--bad:#ff6470;
--bg:#0f1226;--rim:#fff;--pointer:#ffcc00;--hub:#ffcc00;--segtext:#fff;--lights:#fff6c2;--font:Montserrat,sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--pbg);color:var(--fg);font:16px/1.45 Barlow,"Helvetica Neue",Arial,sans-serif}
a{color:#ff8a96}
h1,h2,h3{margin:0 0 10px;line-height:1.1}h1{font-size:30px}h2{font-size:22px}h3{font-size:17px;margin-top:16px}
button,input,select,textarea{font:inherit;color:inherit}
label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600;color:var(--muted)}
label.check{flex-direction:row;align-items:flex-start;gap:10px;color:var(--fg);font-weight:500;font-size:15px;margin:8px 0}
label.check input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--red)}
input:not([type=checkbox]):not([type=color]):not([type=file]),select,textarea{width:100%;min-width:0;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:10px 11px;font-size:16px;color:var(--fg)}
input[type=color]{width:56px;height:40px;padding:2px;background:var(--panel2);border:1px solid var(--line);border-radius:6px}
textarea{min-height:70px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--red);color:#fff;border:0;border-radius:6px;padding:10px 15px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--redh)}.btn.alt{background:var(--panel2);border:1px solid var(--line);color:var(--fg)}
.btn.small{padding:6px 10px;font-size:13px}.btn.big{padding:15px;font-size:18px;width:100%}.btn.danger{background:#5a1219;color:#ffd4d8}.btn:disabled{opacity:.5}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:12px 0}
.two>*,.grid3>*,.grid4>*{min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;margin:0 0 16px}
.card>label,.card>.two,.card>.grid3{margin-bottom:12px}
.small{font-size:13px;color:var(--muted)}.err{color:var(--bad);min-height:1.2em;margin:6px 0}.warn{color:var(--warn)}.center{text-align:center}
.narrow{max-width:520px;margin:0 auto;padding:24px 16px}.wide{max-width:1200px;margin:0 auto;padding:16px}
.jf{display:flex;flex-direction:column;gap:12px}
.brand{font:900 28px Montserrat,sans-serif;text-transform:uppercase;margin:10px 0 18px}.brand span,.brandsm span{color:var(--red)}
.jmcopy{font-size:11px;color:var(--muted);text-align:center;margin:20px 0;opacity:.7}.jmcopy.fixed{position:fixed;bottom:4px;right:10px;margin:0;z-index:50;color:#fff;opacity:.35}
header.top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:8px}
.brandsm{font:900 18px Montserrat,sans-serif;text-transform:uppercase}header nav a{margin-left:14px;color:var(--fg);text-decoration:none;font-size:14px}
table.list,table.segs{width:100%;border-collapse:collapse;font-size:14px}table.list td,table.list th,table.segs td,table.segs th{padding:7px 6px;border-bottom:1px solid var(--line);text-align:left}
table.segs input:not([type=checkbox]):not([type=color]){padding:6px 8px;font-size:14px}table.segs input[type=number]{width:72px}table.segs td:nth-child(5) input{width:64px}
.tinyfile{width:90px;font-size:11px}img.icon{width:28px;height:28px;object-fit:contain;vertical-align:middle}
.evhead{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin:6px 0 12px}
.evname{font-size:22px!important;font-weight:700;max-width:520px;background:transparent!important;border-color:transparent!important}
.tabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:16px;border-bottom:1px solid var(--line)}
.tabs button{background:none;border:0;padding:10px 14px;color:var(--muted);cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent}.tabs button.on{color:var(--fg);border-color:var(--red)}
.split{display:grid;grid-template-columns:3fr 2fr;gap:16px}.split>*{min-width:0}
.previewcard svg.pv{width:100%;border-radius:10px}
.imgpick{display:flex;flex-direction:column;gap:6px;font-size:14px}.imgpick .lbl{font-weight:600;color:var(--muted)}.imgpick img{max-height:70px;max-width:160px;object-fit:contain;background:#0006;border-radius:6px;padding:4px}
.sponsorlist{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.sponsorlist span{display:flex;align-items:center;gap:4px}.sponsorlist img{height:44px;max-width:120px;object-fit:contain;background:#fff;border-radius:4px;padding:3px}
.days{display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 12px}
.linkrow{display:flex;gap:8px;margin:8px 0}.qrimg{width:180px;background:#fff;border-radius:8px;padding:8px;margin-top:8px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}.tile b{display:block;font-size:30px;font-family:Montserrat,sans-serif}.tile span{font-size:13px;color:var(--muted)}
.bars{display:flex;align-items:flex-end;gap:3px;height:120px;border-bottom:1px solid var(--line)}.bars i{flex:1;background:var(--red);min-height:2px;border-radius:2px 2px 0 0}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:-1px}
ul.recent,ol.queue{padding-left:18px;margin:6px 0}ul.recent li,ol.queue li{margin:5px 0}ol.queue li.pending{color:var(--warn)}
@media (max-width:800px){.split,.grid3,.grid4,.grid5{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}}

/* ---------- Phone ---------- */
body.phone .card h1{font-family:Montserrat,sans-serif}.plogo{display:block;max-height:80px;max-width:70%;margin:0 auto 10px}
.prizebig{font:900 34px Montserrat,sans-serif;color:var(--warn);margin:8px 0}.card.won{border-color:var(--warn)}p.big{font-size:20px;font-weight:700}

/* ---------- Kiosk screen ---------- */
body.screen{background:var(--bg) center/cover no-repeat;height:100vh;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation;font-family:var(--font);color:#fff;cursor:default}
#stage{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2vmin}
.toplogo{position:absolute;top:2vmin;left:50%;transform:translateX(-50%);max-height:11vmin;max-width:40vw;object-fit:contain;z-index:3}
.layout{display:flex;align-items:center;justify-content:center;gap:5vmin;width:100%;height:100%}
@media (orientation:portrait){.layout{flex-direction:column;gap:3vmin;padding-top:10vmin}}
.wheelslot{width:min(78vh,58vw);flex:none}
@media (orientation:portrait){.wheelslot{width:88vw}}
.wheelwrap{position:relative;width:100%;aspect-ratio:1}
.wheel,.wheel-bg{position:absolute;inset:0;width:100%;height:100%}
.wheel-bg .rim{fill:var(--rim);filter:drop-shadow(0 0 2.5px #000a)}
.rimline{stroke:var(--rim);stroke-width:1.2}
.seg{stroke:var(--rim);stroke-width:.6}.seg.out{opacity:.35}
.segtxt{fill:var(--segtext);font-weight:900;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:#0007;stroke-width:1.1px;font-family:var(--font);text-transform:uppercase}
.track{fill:none;stroke:#0005;stroke-width:5}
.bulb{fill:var(--lights);stroke:#0006;stroke-width:.4;opacity:.4}
body[data-mode=welcome] .bulb{animation:chase 1.2s steps(1) infinite}body[data-mode=welcome] .bulb.odd{animation-delay:.6s}
body.spinning .bulb{animation:chase .18s steps(1) infinite}body.spinning .bulb.odd{animation-delay:.09s}
body.stopped .bulb{animation:flash .25s steps(1) infinite}
@keyframes chase{0%{opacity:1;filter:drop-shadow(0 0 2px var(--lights))}50%{opacity:.3;filter:none}}
@keyframes flash{0%{opacity:1;filter:drop-shadow(0 0 3px var(--lights))}50%{opacity:.15}}
.seg.winner{animation:segwin .3s ease-in-out infinite alternate;stroke:#fff;stroke-width:2}
@keyframes segwin{to{filter:brightness(1.6)}}
.pointer{position:absolute;left:50%;top:-3.5%;width:12%;aspect-ratio:.8;transform:translateX(-50%);z-index:3;background:var(--pointer);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 4px 4px #000a);transform-origin:50% 15%}
.pointer.flick{animation:flick .12s ease-out}
@keyframes flick{40%{transform:translateX(-50%) rotate(-14deg)}}
.hub{position:absolute;inset:0;margin:auto;width:20%;height:20%;border-radius:50%;background:var(--hub);color:#111;border:.8vmin solid #fff;font:900 3.2vmin var(--font);cursor:pointer;z-index:2;box-shadow:0 0 3vmin #0008;padding:0;overflow:hidden}
.hub.img{background:#fff}.hub img{width:100%;height:100%;object-fit:contain;padding:8%}
body[data-mode=ready] .hub{animation:hubpulse 1s ease-in-out infinite}@keyframes hubpulse{50%{transform:scale(1.08);box-shadow:0 0 6vmin var(--pointer)}}
.side{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2.4vmin;max-width:38vw}
@media (orientation:portrait){.side{max-width:90vw}}
.title{font:900 7vmin/1 var(--font);text-transform:uppercase;margin:0;text-shadow:0 .6vmin 0 #0006;animation:titlepulse 2.4s ease-in-out infinite}
@keyframes titlepulse{50%{transform:scale(1.05)}}
.sub{font-size:2.8vmin;opacity:.9;margin:0}
.player{font:900 9vmin/1 var(--font);text-transform:uppercase;margin:0;color:var(--pointer);text-shadow:0 0 3vmin #0009;animation:namein .5s ease-out}
@keyframes namein{from{transform:scale(.4);opacity:0}}
.entry{display:flex;gap:4vmin;align-items:center;flex-wrap:wrap;justify-content:center}
.qr{display:flex;flex-direction:column;align-items:center;gap:1vmin;font-weight:700;font-size:2.4vmin}.qr img{width:20vmin;background:#fff;border-radius:1.4vmin;padding:1vmin}
.cta{background:var(--pointer);color:#111;border:0;border-radius:99px;font:900 3.6vmin var(--font);padding:2.2vmin 6vmin;text-transform:uppercase;cursor:pointer;box-shadow:0 1vmin 0 #0007}
.cta:active{transform:translateY(.6vmin);box-shadow:0 .4vmin 0 #0007}.cta.pulse{animation:hubpulse 1.4s ease-in-out infinite}
.ghost{background:transparent;border:.3vmin solid #fff8;color:#fff;border-radius:99px;font:700 2.6vmin var(--font);padding:1.6vmin 4vmin;cursor:pointer}
.nextup{display:flex;flex-direction:column;align-items:center;gap:1vmin;background:#0006;border:.3vmin solid var(--pointer);border-radius:2vmin;padding:2vmin 4vmin}
.nextup small{font-size:2vmin;opacity:.8;text-transform:uppercase}.nextup b{font-size:5vmin;text-transform:uppercase}
.kform{background:#000b;border-radius:2.4vmin;padding:3.4vmin;width:min(900px,92vw);display:flex;flex-direction:column;gap:1.6vmin;user-select:text}
.kform h2{font:900 4.4vmin var(--font);text-transform:uppercase;text-align:center}
.kform label{font-size:max(15px,2vmin);color:#ddd}.kform input:not([type=checkbox]){font-size:max(18px,2.6vmin)!important;padding:1.4vmin 1.6vmin!important;background:#fff!important;color:#111!important;border-radius:1vmin!important}
.kform label.check{font-size:max(15px,2vmin);color:#fff}.kform label.check input{width:3.4vmin;height:3.4vmin;min-width:22px;min-height:22px}
.kform .row{justify-content:space-between;margin-top:1vmin}.kform .err{font-size:max(15px,2.2vmin)}
.result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.6vmin;animation:resin .6s cubic-bezier(.2,1.6,.4,1);z-index:2;padding:0 4vw}
@keyframes resin{from{transform:scale(.3);opacity:0}}
.result .head{font:900 9vmin/1 var(--font);text-transform:uppercase;margin:0;text-shadow:0 .8vmin 0 #0007}
.result .who{font:800 5vmin var(--font);margin:0;text-transform:uppercase}
.result .youwon{font-size:3.2vmin;margin:0;opacity:.85;text-transform:uppercase;letter-spacing:.2em}
.result .prize{font:900 12vmin/1 var(--font);color:var(--pointer);margin:0;text-transform:uppercase;text-shadow:0 0 4vmin var(--pointer);animation:prizeglow 1s ease-in-out infinite alternate}
.result .prize.small{font-size:7vmin;animation:none;text-shadow:none}
@keyframes prizeglow{to{transform:scale(1.06)}}
.result .msg{font-size:3vmin;max-width:70vw;margin:0}
.closed{text-align:center}.closed h1{font:900 8vmin var(--font);text-transform:uppercase}.closed p{font-size:3.4vmin}
.sponsors{position:absolute;left:0;right:0;bottom:0;height:10vmin;background:#000a;overflow:hidden;z-index:3}
.sponsors .track{display:flex;gap:8vmin;align-items:center;height:100%;width:max-content;animation:ticker 40s linear infinite;padding:0 4vmin}
.sponsors img{height:7vmin;max-width:24vmin;object-fit:contain}
@keyframes ticker{to{transform:translateX(-33.333%)}}
.net{position:absolute;top:1vmin;right:1vmin;background:#b00;color:#fff;font:600 1.6vmin Barlow,sans-serif;padding:.6vmin 1.2vmin;border-radius:1vmin;z-index:9}
.toast{position:absolute;bottom:14vmin;left:50%;transform:translateX(-50%);background:#000d;border:.3vmin solid var(--pointer);padding:2vmin 4vmin;border-radius:2vmin;font-size:3vmin;z-index:9}
canvas.confetti,video.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:8;object-fit:contain}
.staffmenu{position:fixed;inset:0;background:#000c;display:grid;place-items:center;z-index:100}
.staffmenu .menu{display:flex;flex-direction:column;gap:1.6vmin;margin:2vmin 0}
.staffmenu .small{color:#ccc;font-size:max(13px,1.6vmin);text-align:center}
body.totem .evlist{display:flex;flex-direction:column;gap:10px}.brand img{border-radius:8px}
/* ---------- External display (second screen) ---------- */
body.display{background:var(--bg) center/cover no-repeat;height:100vh;overflow:hidden;color:#fff;font-family:var(--font);cursor:none}
.dsp{position:fixed;inset:0;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto 1fr auto;gap:3vmin;padding:4vmin 4vmin 14vmin}
.dsp header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:3vmin}
.dsp header h1{font:900 7vmin/1 var(--font);text-transform:uppercase;margin:0;text-shadow:0 .6vmin 0 #0006}
.dsp header img{max-height:10vmin;max-width:30vw;object-fit:contain}
.dsp .panel{display:flex;flex-direction:column;background:#0007;border:.3vmin solid #fff3;border-radius:2.4vmin;padding:3vmin;min-height:0;overflow:hidden}
.dsp h2{font:900 3.6vmin var(--font);text-transform:uppercase;margin:0 0 2vmin;color:var(--pointer)}
.winners{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.4vmin}
.winners li{display:flex;justify-content:space-between;gap:2vmin;font-size:3.4vmin;padding:1.2vmin 2vmin;background:#ffffff12;border-radius:1.2vmin;animation:namein .5s ease-out}
.winners li b{text-transform:uppercase}.winners li span{color:var(--pointer);font-weight:900;text-align:right}.winners li.lose span{color:#fff9;font-weight:600}
.winners li.new{background:var(--pointer);color:#111}.winners li.new span{color:#111}
.prizes{list-style:none;margin:0;padding:0;display:grid;gap:1.2vmin}.prizes li{display:flex;justify-content:space-between;font-size:3vmin}.prizes i{display:inline-block;width:2.4vmin;height:2.4vmin;border-radius:50%;margin-right:1.4vmin;vertical-align:-.3vmin}
.dsp .stats{display:flex;gap:2vmin;margin-top:3vmin}.dsp .stats div{flex:1;background:#ffffff12;border-radius:1.4vmin;padding:2vmin;text-align:center}.dsp .stats b{display:block;font-size:6vmin}.dsp .stats small{font-size:2vmin;opacity:.8;text-transform:uppercase}
.dsp .scan{display:flex;align-items:center;gap:3vmin;margin-top:3vmin;font-size:3vmin;font-weight:800}.dsp .scan img{width:15vmin;background:#fff;border-radius:1.4vmin;padding:1vmin}
.dsp .now{grid-column:1/-1;text-align:center;font:900 5vmin var(--font);text-transform:uppercase}
.bigwin{position:fixed;inset:0;display:grid;place-items:center;background:#000b;z-index:20;text-align:center;animation:resin .6s cubic-bezier(.2,1.6,.4,1)}
.bigwin h1{font:900 10vmin/1 var(--font);margin:0;text-transform:uppercase}.bigwin p{font:900 12vmin/1 var(--font);color:var(--pointer);margin:2vmin 0;text-transform:uppercase;text-shadow:0 0 4vmin var(--pointer)}.bigwin small{font-size:4vmin;text-transform:uppercase}
@media (orientation:portrait){.dsp{grid-template-columns:1fr;grid-template-rows:auto 1.3fr 1fr auto}}
.override{background:#f2b632;color:#111;padding:10px 16px;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;font-weight:600}
.modal{position:fixed;inset:0;background:#000b;display:grid;place-items:center;z-index:50;padding:16px}.modal .card{width:min(620px,100%)}.modal textarea{font:14px/1.4 "IBM Plex Mono",monospace;min-height:220px}
.good{color:var(--good)}.bad{color:var(--bad)}tr.off td{opacity:.55}table.codes select{padding:5px 8px;font-size:13px;width:auto}table.codes code{font-size:13px;white-space:nowrap}
.pcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.pc{background:var(--panel2);border:1px solid var(--line);border-left:4px solid #555;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:3px}
.pc.on{border-left-color:var(--good)}.pc span{font-size:13px;color:var(--muted)}.pc.on span{color:var(--good)}.pc small{color:var(--muted)}