*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;color:white;min-height:100vh;background:repeating-linear-gradient(90deg,#2c0958 0,#6f2ca8 32px,#a94cda 65px,#35116a 90px);background-attachment:fixed}.layout{max-width:1200px;margin:auto;min-height:100vh;padding:24px}header{display:flex;align-items:center;justify-content:center;gap:10px;font-size:55px;color:#bd47ec;text-shadow:0 3px 9px #29114a}header span:not(.crown){color:#ffd52e}.crown{font-size:80px}.content{display:flex;align-items:center;justify-content:space-around;gap:45px;min-height:70vh}.wheelbox{position:relative;width:min(56vw,560px);flex-shrink:0}.wheelbox canvas{width:100%;display:block;filter:drop-shadow(0 0 15px #46c6ff)}.arrow{position:absolute;top:1%;left:50%;transform:translateX(-50%);z-index:1;font-size:38px;color:#10294e;text-shadow:0 0 3px white}#spinForm{width:330px;text-align:center}h2{font-size:24px;color:#160b26}input,select,textarea{display:block;width:100%;padding:17px;border:2px solid #7dd7ff;border-radius:9px;font:inherit;margin:14px 0;background:#fff;color:#333}button{background:#209bf0;border:0;border-radius:4px;color:white;font-weight:bold;font-size:18px;padding:15px 34px;cursor:pointer;box-shadow:0 5px 9px #301449}button:disabled{opacity:.5}#message{min-height:55px;font-size:20px;font-weight:bold;text-shadow:0 2px 4px #230c39}.admin{background:#120b27}.panel{max-width:980px;margin:30px auto;padding:25px;background:#251643;border-radius:16px}.panel h1,.panel h2{color:#fff}.panel form{margin:15px 0 30px}.panel a{color:#86d8ff}.panel label{display:block}.panel table{border-collapse:collapse;width:100%;background:#fff;color:#222}.panel td,.panel th{border:1px solid #bbb;padding:10px;text-align:left}.panel td button{font-size:13px;padding:8px}.panel td form{margin:0}.scroll{overflow:auto}.err{color:#ff9d9d}.ok{color:#a3ffb8}@media(max-width:760px){header{font-size:32px}.crown{font-size:45px}.content{flex-direction:column;gap:15px}.wheelbox{width:min(95vw,500px)}#spinForm{width:min(95%,350px)}}
/* Pixel-aligned layout based on the supplied 1195 x 678 reference. */
.spin-page{background:#39156b;min-height:100vh;display:grid;place-items:center;overflow-x:hidden}
.reference-stage{position:relative;width:min(100vw,176.25vh);aspect-ratio:1195/678;background:url('reference.png') center/100% 100% no-repeat;overflow:hidden;isolation:isolate}
.reference-stage .wheelbox{position:absolute;left:17.5%;top:35.1%;width:36%;height:auto;z-index:2}
.reference-stage .wheelbox canvas{display:block;width:100%;height:auto;filter:drop-shadow(0 0 4px #5fc7ff)}
.reference-stage .pointer{position:absolute;left:50%;top:4.2%;transform:translateX(-50%);width:0;height:0;border-left:1.5vw solid transparent;border-right:1.5vw solid transparent;border-top:3vw solid #102b4d;filter:drop-shadow(0 0 2px #fff);pointer-events:none}
.reference-stage #spinForm{position:absolute;left:59.2%;top:43.5%;width:25.1%;text-align:center;z-index:3}
.reference-stage h2{margin:0 0 6%;font-size:clamp(12px,1.9vw,26px);line-height:1.2;color:#160d22}
.reference-stage input{display:block;width:100%;height:auto;aspect-ratio:300/65;margin:0 0 7%;border:1.5px solid #54c6ff;border-radius:9px;background:#fff;color:#555;text-align:center;font-size:clamp(10px,1.85vw,24px);padding:3%;box-shadow:0 0 0 2px #fff}
.reference-stage button{padding:4.5% 15%;font-size:clamp(11px,1.5vw,21px);background:#239bed;border-radius:4px}
.reference-stage #message{position:absolute;top:100%;left:-15%;width:130%;font-size:clamp(12px,1.6vw,20px);color:#fff;text-shadow:0 2px 4px #240c48;background:#24134dbd;border-radius:8px;padding:5px;min-height:0}
.reference-stage #message:empty{display:none}
@media(max-aspect-ratio:9/10){.spin-page{display:block}.reference-stage{width:100vw;min-height:100vh;aspect-ratio:auto;background-size:auto 100%;background-position:center}.reference-stage .wheelbox{left:8%;top:31%;width:84%}.reference-stage #spinForm{left:12%;top:69%;width:76%}.reference-stage h2{font-size:22px;margin-bottom:15px}.reference-stage input{font-size:17px;height:52px;margin-bottom:14px}.reference-stage button{font-size:18px}.reference-stage .pointer{border-left-width:14px;border-right-width:14px;border-top-width:28px}}

/* BANGAUJP red and gold theme; supplied background remains unmodified. */
.spin-page{background:#170300;display:block;min-height:100vh}
.reference-stage{width:100%;max-width:1920px;aspect-ratio:1660/960;margin:auto;background-image:url('bangaujp-background.png');background-size:100% 100%;overflow:visible}
.reference-stage .wheelbox{left:35%;top:31.5%;width:30%;z-index:2}
.reference-stage .wheelbox canvas{filter:drop-shadow(0 0 12px #ffb900)}
.reference-stage .pointer{top:0;border-left:1.1vw solid transparent;border-right:1.1vw solid transparent;border-top:2.3vw solid #ffde56;filter:drop-shadow(0 0 5px #ef1b00)}
.reference-stage #spinForm{left:74%;top:48%;width:23%;padding:16px;background:linear-gradient(135deg,#320300ee,#8a0907ee);border:2px solid #ffb82b;border-radius:18px;box-shadow:0 0 18px #ffb90088}
.reference-stage h2{color:#ffe3a0;font-size:clamp(16px,1.65vw,27px);margin-bottom:14px}
.reference-stage input{font-size:clamp(13px,1.25vw,21px);border-color:#ffd15b;margin-bottom:12px;aspect-ratio:auto;height:50px}
.reference-stage button{background:linear-gradient(#ffe07d,#e78b04);color:#5b0a00;text-shadow:none;box-shadow:0 3px 10px #ffbc36aa;font-size:clamp(15px,1.4vw,22px)}
.reference-stage #message{position:static;left:auto;top:auto;width:100%;margin:12px 0 0;font-size:clamp(14px,1.2vw,19px);background:#2c0505;padding:9px}
.admin{background:linear-gradient(145deg,#230000,#650700)}.panel{background:#2d0909;border:1px solid #d68a18}.panel a{color:#ffd278}.panel button{background:linear-gradient(#ffcf5a,#a65b00);color:#240900}
@media(max-width:800px){.reference-stage{width:100%;min-height:100vh;aspect-ratio:auto;background-size:100% auto;background-repeat:no-repeat;background-color:#270100;padding-top:0;overflow:visible}.reference-stage .wheelbox{position:relative;left:auto;top:auto;width:min(75vw,430px);margin:37vw auto 0}.reference-stage .pointer{border-left-width:12px;border-right-width:12px;border-top-width:25px}.reference-stage #spinForm{position:relative;left:auto;top:auto;width:min(90%,440px);margin:16px auto 35px;padding:16px}.reference-stage h2{font-size:21px}.reference-stage input{font-size:17px;height:50px}.reference-stage button{font-size:18px}}