:root {font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#f2f3f7; background:#0b0d12; font-synthesis:none;}
* {box-sizing:border-box;}
body {margin:0; min-height:100dvh; background:radial-gradient(circle at 50% -18%,#20253b 0%,#0b0d12 58%);}
.app {width:min(100%,490px); padding:calc(17px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); margin:0 auto; min-height:100dvh; display:flex; flex-direction:column; gap:16px;}
.heading {display:flex; justify-content:space-between; align-items:center; padding:3px 0;}
.brand {font-size:12px; letter-spacing:.16em; font-weight:850; white-space:nowrap;}
.brand-mark {font-size:21px; vertical-align:-2px; margin-right:8px; color:#aab8ff;}
.status {display:flex; align-items:center; gap:6px; color:#afb3c1; font-size:10px; font-weight:750; letter-spacing:.08em;}
.status-dot {height:7px; width:7px; border-radius:50%; background:#3dd3a0; box-shadow:0 0 11px #3dd3a077;}
.stage {position:relative; flex:1; min-height:270px; max-height: min(70dvh, 710px); overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid #34394b; border-radius:20px; background:linear-gradient(145deg,#1e2130 0%,#13151e 50%,#181a25 100%); box-shadow:0 20px 55px #0004; isolation:isolate;}
.stage::before {content:""; position:absolute; z-index:-1; inset:0; background: radial-gradient(ellipse at 50% 28%,#7587f719, transparent 68%);}
.placeholder {text-align:center; padding:24px; color:#adb2c2;}
.placeholder-icon {font-size:75px; line-height:1.3; color:#7988d6; text-shadow:0 0 35px #7187ff66;}
h1 {font-size:21px; letter-spacing:.01em; color:#edeefa; margin:8px 0 10px; font-weight:650;}
.placeholder p {font-size:13px; margin:0; color:#8d94a8;}
#photo {height:100%; width:100%; object-fit:contain; display:block; position:absolute; inset:0; opacity:1; transition:opacity .24s ease, transform .35s ease, filter .25s ease;}
#photo[hidden] {display:none;}
.stage.is-spinning #photo {filter:blur(7px) brightness(.52); transform:scale(1.025);}
.spin-layer {pointer-events:none; position:absolute; inset:0; display:grid; place-items:center; background:#0c0e16a0; opacity:0; transition:opacity .2s ease;}
.stage.is-spinning .spin-layer {opacity:1;}
.spin-wheel {font-size:48px; color:#bac4ff; text-shadow:0 0 30px #a2b0ff; animation:rotate .65s linear infinite;}
@keyframes rotate {to {transform:rotate(360deg);}}
.spin-button {border:0; display:flex; align-items:center; justify-content:center; width:100%; min-height:58px; border-radius:15px; background:linear-gradient(120deg,#6576e9,#7e73f0); box-shadow:0 7px 22px #656bef33; color:white; font-size:15px; letter-spacing:.11em; font-weight:800; cursor:pointer; transition:transform .15s, filter .15s;}
.spin-button:active {transform:scale(.985);}
.spin-button:disabled {cursor:wait; filter:saturate(.6);}
.spin-symbol {font-size:25px; margin-right:12px; font-weight:400;}
.footer {display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:12px; color:#8e95aa; padding:0 2px;}
.footer p {margin:0;}
.counter {white-space:nowrap; color:#9fa7bf; font-variant-numeric:tabular-nums;}
@media(min-width:600px) {.app {padding-top:32px;padding-bottom:32px}.stage {max-height:700px;}}
@media(max-height:650px) {.app {gap:10px}.stage{min-height:180px}.spin-button{min-height:50px}.heading{padding:0}}
@media(prefers-reduced-motion:reduce) {.spin-wheel{animation-duration:1.2s}#photo{transition:none}}

/* NOPEEK v3: disclosure on first open and a compact permanent reminder. */
[hidden] {display:none !important;}
.server-disclaimer {border:1px solid #42404e; border-radius:13px; padding:11px 13px; background:linear-gradient(120deg,#29232d,#1b1d28); color:#c4c3d0; font-size:11px; line-height:1.5;}
.server-disclaimer-title {color:#eee3d8; font-weight:750; font-size:12px; margin-bottom:4px;}
.server-disclaimer p {margin:0;}
.server-disclaimer .server-disclaimer-end {margin-top:4px; font-weight:750; color:#d3bbd6;}
body.has-disclaimer {overflow:hidden;}
.disclaimer-overlay {position:fixed; z-index:999; inset:0; padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)); background:#05060be0; backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center;}
.disclaimer-dialog {width:min(100%,425px); max-height:100%; overflow-y:auto; overscroll-behavior:contain; border:1px solid #51516b; border-radius:22px; padding:23px 22px 20px; background:linear-gradient(160deg,#272337 0%,#171923 65%,#171520 100%); box-shadow:0 24px 95px #000a;}
.disclaimer-eyebrow {font-size:10px; font-weight:800; letter-spacing:.18em; color:#a5a0dc; margin-bottom:12px;}
.disclaimer-dialog h2 {margin:0 0 16px; color:#fff3ed; font-size:23px; line-height:1.18; font-weight:800;}
.disclaimer-copy {color:#ccd0db; font-size:13px; line-height:1.6;}
.disclaimer-copy p {margin:0 0 11px;}
.disclaimer-copy .disclaimer-gg {color:#c7b4e7; font-weight:800; font-size:15px; margin:10px 0 20px;}
.disclaimer-button {width:100%; min-height:51px; padding:12px; border:0; border-radius:12px; background:linear-gradient(110deg,#6879e8,#8370ed); color:#fff; font-size:13px; letter-spacing:.08em; font-weight:850; cursor:pointer;}
.disclaimer-button:focus-visible {outline:3px solid #d9d2ff; outline-offset:3px;}
@media(max-height:620px) {.disclaimer-dialog{padding:15px 17px}.disclaimer-dialog h2{font-size:19px;margin-bottom:10px}.disclaimer-copy{font-size:12px;line-height:1.45}.disclaimer-copy p{margin-bottom:7px}.disclaimer-copy .disclaimer-gg{margin-bottom:12px}}