:root { color-scheme:dark; font-family:Arial,'Yu Gothic','Meiryo',sans-serif; color:#ffe1a3; background:#080604; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
.back { display:flex; align-items:center; gap:8px; width:min(100%,2400px); margin:0 auto; padding:10px 16px 4px; text-decoration:none; color:#e4d9bf; font-size:12px; letter-spacing:1px; }
.back span { font-size:18px; line-height:1; }
.back:focus-visible { outline:3px solid #fff7d5; outline-offset:4px; }
a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
button:focus-visible { outline:3px solid #fff7d5; outline-offset:6px; }
.page { width:100%; max-width:2400px; margin:auto; container-type:inline-size; }
.scene { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; isolation:isolate; background:#080503 url('./assets/lottery-stage-hd.png') center/100% 100% no-repeat; }
.scene::after { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 85%,#080604bb); }
.gold { color:#f5cd80; background:linear-gradient(#fff1bb 5%,#f6cf7c 43%,#d49a42 70%,#ffe4a0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 2px #281200); }
.heading { position:absolute; z-index:3; top:7.6%; left:4%; width:36%; padding:0.5cqw 1.8cqw 1.2cqw; text-align:center; background:radial-gradient(ellipse,#090703e8 30%,#09070375 65%,transparent 73%); }
.heading::before,.heading::after { content:''; position:absolute; height:1px; left:6%; right:6%; background:linear-gradient(90deg,transparent,#dfb76d,transparent); }
.heading::before { top:-.6cqw; } .heading::after { bottom:0; }
h1 { font-size:2.75cqw; line-height:1.25; white-space:nowrap; margin:0 0 .55cqw; font-weight:900; letter-spacing:-.1cqw; }
.heading p { margin:0; font-size:1.08cqw; white-space:nowrap; color:#f7dca6; }
.laurel { position:absolute; top:-1cqw; width:3.6cqw; height:8cqw; fill:#f2d38c; color:#f2d38c; filter:drop-shadow(0 2px 2px #4c2e0a); }
.laurel.left { left:-.3cqw; } .laurel.right { right:-1.1cqw; transform:scaleX(-1); }
.grand-summary { position:absolute; left:3.8%; top:22.5%; width:27%; height:16%; display:flex; align-items:center; gap:1.3cqw; padding:1cqw; border:1px solid #a57d3d99; border-radius:1.7cqw; background:linear-gradient(100deg,#100b04c9,#060503b3); box-shadow:inset 0 0 0 3px #e6b25515,0 0 0 3px #05040388; }
.medal { position:relative; display:grid; place-items:center; flex-shrink:0; width:7.2cqw; height:7.2cqw; border-radius:50%; border:.4cqw double #fff0b8; background:radial-gradient(ellipse at 35% 20%,#fff0ae,#edb660 65%,#b96e23); box-shadow:0 0 0 .25cqw #d69e51,0 .4cqw 1cqw #0009; color:#120c04; font-weight:900; font-size:2.1cqw; }
.medal::after { content:''; position:absolute; z-index:-1; top:73%; left:4%; width:92%; height:44%; background:linear-gradient(90deg,#e08729,#a0220c 40%,#eaa434 50%,#a0220c 70%,#e08729); clip-path:polygon(15% 0,85% 0,100% 85%,73% 72%,63% 100%,50% 55%,35% 100%,26% 74%,0 90%); }
.grand-summary h2 { margin:0 0 .45cqw; font-size:2.05cqw; white-space:nowrap; }
.grand-summary p { margin:0; font-size:.85cqw; white-space:nowrap; }
.wheel-wrap { position:absolute; z-index:2; width:40.8%; aspect-ratio:1; left:29.4%; top:6.9%; filter:drop-shadow(0 1cqw 1.3cqw #000b); }
.wheel-rim { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 15deg,#65300b,#fff0b2 10%,#c07725 17%,#ffdf80 24%,#70400e 34%,#ffdd7b 43%,#9b4c08 49%,#ffe3a0 57%,#ab621b 65%,#ffedba 74%,#8e420d 80%,#ffe5a0 90%,#65300b); box-shadow:inset 0 0 0 .22cqw #ffe4a0,inset 0 0 .9cqw #ffbd5977,0 0 .7cqw #f0a13499; }
.wheel-rim::before { content:''; position:absolute; inset:3%; border-radius:50%; background:linear-gradient(140deg,#311703,#090502 35%,#5e300d 72%,#110903); border:.2cqw solid #70400e; box-shadow:inset 0 0 0 .25cqw #080501,0 0 0 .14cqw #ffe8a2; }
.rotor { position:absolute; inset:6.6%; border-radius:50%; overflow:hidden; background:conic-gradient(from -30deg,#100b06 0deg 60deg,#24160a 60deg 120deg,#100b06 120deg 180deg,#201308 180deg 240deg,#100b06 240deg 300deg,#24160a 300deg); box-shadow:0 0 0 .23cqw #f5bf60,0 0 .9cqw #c68128; }
.sector-lines { position:absolute; inset:0; width:100%; height:100%; }
.sector-lines line { stroke:#d9ad5f; stroke-width:.65; filter:drop-shadow(0 0 1px #ffdb83); }
.prize { position:absolute; width:31%; height:28%; text-align:center; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; mix-blend-mode:screen; }
.product { width:100%; aspect-ratio:1.5; background-image:url('./assets/lottery-prizes-hd.png'); background-size:300% auto; background-repeat:no-repeat; mix-blend-mode:screen; }
.product.car { background-position:0 12.766%; } .product.phone { background-position:50% 12.766%; } .product.laptop { background-position:100% 12.766%; }
.product.digital { background-position:0 87.234%; } .product.travel { background-position:50% 87.234%; } .product.cash { background-position:100% 87.234%; }
.prize b { display:block; font-weight:600; font-size:1.03cqw; line-height:1.35; white-space:nowrap; text-shadow:0 1px 3px #000; }
.prize small { display:block; font-size:.59cqw; white-space:nowrap; margin-top:.2cqw; }
.p0 { left:50%; top:17%; width:35%; } .p1 { left:79%; top:34%; } .p2 { left:79%; top:68%; }
.p3 { left:50%; top:84%; } .p4 { left:21%; top:68%; } .p5 { left:21%; top:34%; }
.lamp { position:absolute; width:2.5%; height:2.5%; border-radius:50%; transform:translate(-50%,-50%); background:#fffce2; box-shadow:0 0 .35cqw .18cqw #ffe191,0 0 1cqw .35cqw #f7a530,0 0 1.8cqw #ffad35; }
.spin { position:absolute; z-index:4; left:36.8%; top:36.8%; width:26.4%; height:26.4%; border-radius:50%; padding:1cqw .2cqw 0; border:.55cqw solid #ffd079; outline:.12cqw solid #9f621e; background:radial-gradient(ellipse at 50% 15%,#976128,#392009 70%,#221102); box-shadow:inset 0 0 0 .18cqw #ffedb8,inset 0 0 .6cqw #ffbc6480,0 0 .3cqw .1cqw #ffbb5099,0 .4cqw .7cqw #0009; color:#ffdf96; cursor:pointer; text-shadow:0 2px 2px #422307; font-size:1.4cqw; font-weight:800; line-height:1.25; }
.spin::before { content:''; position:absolute; left:39%; top:-31%; width:22%; height:44%; background:linear-gradient(90deg,#a75c15,#fff9cb 45%,#ffd47b 53%,#ae641d); clip-path:polygon(50% 0,100% 52%,50% 100%,0 52%); filter:drop-shadow(0 0 5px #ffbd57); }
.spin .crown { position:absolute; top:12%; left:0; width:100%; font-size:1.8cqw; color:#ffe6a0; }
.spin:hover:enabled { filter:brightness(1.16); } .spin:disabled { cursor:wait; }
.showcase { position:absolute; left:71.5%; top:19.5%; width:26.5%; height:40%; text-align:center; }
.showcase h2 { margin:0; font-size:3.3cqw; line-height:1.2; font-weight:900; }
.showcase h2::before,.showcase h2::after { content:'❧'; display:inline-block; margin:0 2cqw; font-size:2.1cqw; vertical-align:middle; color:#e8c477; } .showcase h2::after { transform:scaleX(-1); }
.showcase .mobile-car { display:none; }
.nameplate { position:absolute; left:13%; right:7%; bottom:0; padding:.5cqw .3cqw; border:.16cqw solid #d7ad62; border-radius:1cqw; background:linear-gradient(#30200ed9,#090604eb); box-shadow:inset 0 0 0 .17cqw #0c0804,0 0 0 .1cqw #553416,0 0 1cqw #dea4394d; }
.nameplate h3 { font-size:1.6cqw; margin:0 0 .2cqw; } .nameplate p { font-size:.84cqw; margin:0; }
.prize-strip { position:absolute; z-index:3; left:14.2%; right:14%; top:79.2%; height:16.2%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:.17cqw solid #a67d40; border-radius:1.5cqw; padding:.25cqw; background:#090704dc; box-shadow:0 0 0 .15cqw #100c07,inset 0 0 0 .08cqw #efd9a557,0 .4cqw 1cqw #000; }
.prize-card { margin:0; display:flex; align-items:center; justify-content:center; flex-direction:column; border:1px solid #94734688; border-radius:1.05cqw; background:linear-gradient(120deg,#5b421b22,#09070488); }
.prize-card .product { width:65%; height:auto; aspect-ratio:1.5; }
.prize-card figcaption { font-size:1.03cqw; padding:.2cqw 0; white-space:nowrap; }
.preview-note { margin:0; padding:10px 16px; text-align:center; color:#a99169; background:#080604; font-size:11px; line-height:1.6; letter-spacing:.03em; }
dialog { width:min(430px,calc(100vw - 32px)); padding:30px; text-align:center; border:1px solid #d5a755; border-radius:20px; background:radial-gradient(ellipse at top,#422b12,#100b06 70%); color:#f8d798; box-shadow:0 0 70px #b87e2438; }
dialog::backdrop { background:#000b; backdrop-filter:blur(7px); }
dialog .overline { font-size:11px; letter-spacing:4px; color:#bea47b; margin:0 0 16px; }
dialog h2 { font-size:23px; margin:12px 0; }
dialog .product { width:230px; max-width:100%; margin:auto; }
dialog p { font-size:12px; line-height:1.8; color:#c6b398; }
dialog button { margin-top:10px; width:100%; padding:12px; border:1px solid #f3cf88; border-radius:8px; background:linear-gradient(#fce1a3,#c68f3c); color:#251507; font-weight:700; cursor:pointer; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:700px) {
  .scene { height:235cqw; aspect-ratio:auto; background-size:auto 140cqw; background-position:50% 10cqw; background-color:#080604; }
  .scene::after { background:linear-gradient(180deg,#08060411 25%,#080604 65%); }
  .heading { left:7%; top:5cqw; width:86%; padding:2cqw 3cqw 3cqw; }
  h1 { font-size:6.3cqw; margin-bottom:2cqw; } .heading p { font-size:2.55cqw; }
  .laurel { width:7cqw; height:17cqw; top:-1cqw; } .laurel.left { left:-4cqw; } .laurel.right { right:-4cqw; }
  .grand-summary { left:12%; top:26cqw; width:76%; height:17cqw; justify-content:center; gap:4cqw; border-radius:3cqw; }
  .medal { width:13cqw; height:13cqw; font-size:4cqw; } .grand-summary h2 { font-size:4.7cqw; } .grand-summary p { font-size:2.1cqw; }
  .wheel-wrap { left:4%; top:48cqw; width:92%; }
  .prize b { font-size:2.45cqw; } .prize small { font-size:1.35cqw; }
  .spin { font-size:3.4cqw; border-width:1.2cqw; padding-top:3cqw; } .spin .crown { font-size:4.5cqw; }
  .wheel-rim { box-shadow:inset 0 0 0 .5cqw #ffe4a0,0 0 2cqw #e0a032; }
  .showcase { left:7%; top:147cqw; width:86%; height:44cqw; border:1px solid #866332; border-radius:4cqw; background:radial-gradient(ellipse at bottom,#68441750,#0e0a05); }
  .showcase h2 { position:absolute; left:5%; top:7cqw; font-size:7cqw; } .showcase h2::before,.showcase h2::after { display:none; }
  .showcase .mobile-car { display:block; position:absolute; right:0; top:0; width:63%; }
  .nameplate { bottom:3cqw; left:6%; right:6%; border-radius:2cqw; padding:1cqw; } .nameplate h3 { font-size:4cqw; } .nameplate p { font-size:2.1cqw; }
  .prize-strip { left:4%; right:4%; top:199cqw; height:29cqw; border-radius:3cqw; padding:1cqw; }
  .prize-card { border-radius:2cqw; } .prize-card .product { width:94%; height:auto; aspect-ratio:1.5; }
  .prize-card figcaption { font-size:2.25cqw; white-space:normal; line-height:1.5; text-align:center; padding:1cqw; }
}