@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');

:root { font-family: 'DM Sans','Noto Sans KR','Malgun Gothic',sans-serif; color: #f8f2de; background: #062719; font-synthesis:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
*, *::before, *::after { box-sizing:border-box; }
html, body { padding:0; margin:0; height:100%; width:100%; overflow:hidden; }
button, input { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible, input:focus-visible {outline:3px solid #f0d68f;outline-offset:3px;}
#app {height:100vh; height:100dvh; width:100vw; display:grid; grid-template-rows:minmax(0, 22fr) minmax(0, 57fr) minmax(0, 21fr); background:radial-gradient(ellipse at 52% 45%, #164a31 0%,#092d1d 40%,#061f16 95%); isolation:isolate; position:relative; overflow:hidden;}
#app::after{content:'';pointer-events:none;position:absolute;inset:0;border:clamp(7px,.8vw,14px) solid rgba(226,202,145,.05);z-index:4;}
.ambient-light{position:absolute;pointer-events:none;border-radius:50%; filter:blur(62px); z-index:-1;}
.ambient-light-one{width:38vw;height:38vw;top:-14vw;right:-10vw;background:rgba(192,164,94,.12);}
.ambient-light-two{width:38vw;height:38vw;bottom:-18vw;left:-15vw;background:rgba(43,142,95,.17);}
.hero{padding:clamp(22px,3.4vh,72px) clamp(22px,5vw,110px) 0; display:flex; flex-direction:column; justify-content:space-between; z-index:2; min-height:0;}
.hero-topline{display:flex;align-items:center;gap:clamp(11px,1.9vw,26px);color:#f2e6bf;min-height:28px;}
.brand-mark{font-size:clamp(13px,1.5vw,23px);font-weight:800;letter-spacing:.28em; white-space:nowrap;}
.brand-gem{font-size:.65em; vertical-align:middle; color:#e6c47b;}
.hero-topline .line{height:1px;max-width:80px;min-width:16px;flex:1;background:rgba(238,212,152,.38);}
.event-edition{font-size:clamp(7px,.8vw,12px);letter-spacing:.22em;color:#c2ba9c;white-space:nowrap;}
.hero-main{text-align:center; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.1vh,20px);padding:0;}
.eyebrow{font-weight:700;font-size:clamp(9px,1vw,15px);letter-spacing:.25em;color:#e3c688;}
.tiny-star{font-size:1.15em;padding:0 .8em;}
h1{font-family:'Noto Sans KR','Malgun Gothic',sans-serif;letter-spacing:-.07em;font-size:clamp(30px,4.35vw,75px);line-height:1.26;font-weight:700;margin:0;white-space:nowrap;color:#fff8e8;text-shadow:0 2px 32px rgba(0,0,0,.12);}
h1 em{font-style:normal;color:#f0d391;}
.hero-description{color:#cbdacb;letter-spacing:-.03em;font-size:clamp(11px,1.2vw,20px);margin:0;}
.hero-lower{display:flex;align-items:center;justify-content:space-between;color:#a3b5a8;font-size:clamp(8px,.75vw,12px);letter-spacing:.17em;}
.round-label{display:flex;align-items:center;gap:8px;}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#e9d39e;box-shadow:0 0 13px #e9d39e;}
.stage{position:relative;min-height:0;min-width:0;overflow:hidden;}
.stage-glow{position:absolute;top:9%;left:14%;width:72%;height:78%;background:radial-gradient(circle,rgba(75,172,112,.26),rgba(26,102,63,.09) 45%,transparent 76%);filter:blur(25px);pointer-events:none;}
.stage-grid{pointer-events:none;position:absolute;inset:4%;background-image:linear-gradient(90deg,rgba(221,202,138,.035) 1px,transparent 1px),linear-gradient(rgba(221,202,138,.035) 1px,transparent 1px);background-size:35px 35px;mask-image:radial-gradient(ellipse at center,#000 5%,transparent 73%);}
.webgl{height:100%;width:100%;position:absolute;inset:0;touch-action:manipulation;}
.webgl canvas{width:100%;height:100%;display:block;}
.pointer-badge{pointer-events:none;white-space:nowrap;position:absolute;top:9%;left:50%;transform:translate(-50%,-100%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px;color:#f6e3a3;text-shadow:0 0 15px #0d462e; font-weight:800;font-size:clamp(9px,1.15vw,16px);letter-spacing:.19em;z-index:3;}
.pointer-badge-arrow{font-size:clamp(13px,1.5vw,24px);color:#ffd78d;line-height:1;}
.stage-bottom-caption{pointer-events:none;position:absolute;bottom:3%;left:clamp(22px,5vw,110px);right:clamp(22px,5vw,110px);display:flex;justify-content:space-between;color:#bdc4ac;font-size:clamp(7px,.75vw,11px);letter-spacing:.14em;opacity:.68;}
.webgl-error{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;font-size:15px;}
.webgl-error[hidden]{display:none;}
.controls{padding:0 clamp(22px,5vw,110px) clamp(17px,3.4vh,70px);display:flex;flex-direction:column;justify-content:space-between;position:relative;z-index:3;min-height:0;}
.controls-head{display:flex;justify-content:space-between;align-items:center;}
.step-label{color:#e5c98e;font-size:clamp(9px,1.1vw,15px);letter-spacing:.24em;font-weight:700;display:flex;align-items:center;gap:12px;}
.step-dash{background:#e5c98e;width:21px;height:1px;}
.controls-top-right{display:flex;gap:9px;}
.icon-button{border:1px solid rgba(222,204,157,.29);background:rgba(255,255,255,.035);border-radius:50%;width:clamp(31px,3.2vw,48px);height:clamp(31px,3.2vw,48px);display:grid;place-items:center;font-size:clamp(15px,1.6vw,22px);color:#f0dba8;transition:background .2s ease;}
.icon-button:hover{background:rgba(255,255,255,.12)}
.action-area{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.5vh,24px);padding-top:1vh;}
.spin-button{display:flex;align-items:center;justify-content:center;gap:clamp(15px,3vw,55px);width:min(100%,610px);height:clamp(58px,7.4vh,115px);background:linear-gradient(116deg,#f5e7bf,#cda867 47%,#f2d9a5);color:#153721;border:0;border-radius:8px;position:relative;overflow:hidden;box-shadow:inset 0 1px 1px rgba(255,255,255,.85),0 18px 30px rgba(0,0,0,.22);transition:transform .18s ease,filter .18s ease;}
.spin-button:active{transform:scale(.98)}
.spin-button:hover{filter:brightness(1.06)}
.spin-button:disabled{cursor:default;opacity:.72;filter:grayscale(.15)}
.spin-button-text{font-size:clamp(17px,2.1vw,33px);font-weight:800;letter-spacing:.15em;z-index:1;}
.button-arrow{font-size:clamp(20px,2.5vw,36px);font-weight:400;z-index:1;}
.spin-button-shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 34%,rgba(255,255,255,.46) 48%,transparent 60%);transform:translateX(-150%);animation:shine 6s ease-in-out infinite;}
@keyframes shine{0%,58%{transform:translateX(-150%)}75%,100%{transform:translateX(150%)}}
.action-subtitle{color:#becdbd;font-size:clamp(10px,1.1vw,18px);text-align:center;letter-spacing:-.03em;min-height:1.5em;}
.controls-bottom{display:flex;align-items:center;justify-content:space-between;font-size:clamp(7px,.8vw,13px);letter-spacing:.18em;color:#879f89;border-top:1px solid rgba(209,201,164,.13);padding-top:clamp(8px,1.3vh,20px);}
.mini-sparkle{color:#cbb37b;font-size:14px;}
/* Result and staff settings */
.hidden{display:none!important;}
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:22px;}
.result-backdrop,.admin-backdrop{position:absolute;inset:0;background:rgba(1,16,10,.78);backdrop-filter:blur(15px);}
.result-card{z-index:1;position:relative;width:min(92vw,520px);max-height:94dvh;overflow:auto;background:linear-gradient(146deg,#faf3dc,#e9dbc0);border-radius:18px;padding:clamp(28px,4.5vh,54px) clamp(22px,5vw,55px) clamp(28px,4vh,42px);color:#163c28;text-align:center;box-shadow:0 36px 130px rgba(0,0,0,.56),inset 0 0 0 8px rgba(255,255,255,.23);animation:result-pop .55s cubic-bezier(.18,1.5,.32,1) both;}
.result-card::after{content:'';position:absolute;inset:12px;border:1px solid rgba(116,99,53,.33);border-radius:12px;pointer-events:none;}
@keyframes result-pop{from{opacity:0;transform:scale(.65) translateY(25px)}to{opacity:1;transform:scale(1) translateY(0)}}
.result-stars{font-size:23px;color:#b58c48;letter-spacing:.35em;}
.result-kicker{font-size:clamp(11px,1.5vh,15px);font-weight:800;letter-spacing:.26em;color:#a48045;margin:18px 0 7px;}
.result-card h2{font-size:clamp(32px,5vh,56px);letter-spacing:-.075em;margin:0;}
.result-support{font-size:clamp(12px,1.8vh,18px);color:#6c7765;margin:7px 0 25px;}
.prize-medallion{border-radius:50%;width:clamp(175px,26vh,260px);aspect-ratio:1;margin:0 auto 18px;background:radial-gradient(circle at 32% 25%,#2f7550,#0d3b28 63%,#062519);border:9px solid #cba763;outline:1px solid #886537;box-shadow:0 8px 28px rgba(20,53,33,.28),inset 0 0 14px rgba(232,198,123,.22);color:#ffedb7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;}
.prize-medallion span{font-size:11px;letter-spacing:.2em;}
.prize-medallion strong{color:#fff6df;line-height:1.28;font-size:clamp(19px,3.2vh,30px);padding:0 12px;word-break:keep-all;}
.medallion-star{font-size:28px!important;}
.result-meta{font-size:12px;color:#66725f;margin:0 0 24px;}
.result-close{border:0;border-radius:8px;background:#143d29;color:#fbecc7;font-size:clamp(14px,1.8vh,19px);font-weight:700;width:100%;padding:clamp(13px,2vh,21px);display:flex;justify-content:center;gap:14px;}
.result-close:hover{background:#24533a;}
.confetti-container{position:absolute;pointer-events:none;inset:0;overflow:hidden;z-index:2;}
.confetti{position:absolute;left:50%;top:40%;width:var(--w);height:var(--h);border-radius:2px;background:var(--color);animation:confetti-burst var(--duration) cubic-bezier(.14,.64,.21,1) both;animation-delay:var(--delay);}
@keyframes confetti-burst{0%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rotate)) scale(.6)}}
.admin-panel{position:relative;z-index:3;width:min(95vw,850px);max-height:min(92dvh,970px);overflow:auto;background:#f4f0e8;color:#183829;border-radius:12px;padding:clamp(18px,3vw,32px);box-shadow:0 20px 90px #001d11;}
.admin-heading{display:flex;justify-content:space-between;align-items:start;gap:15px;}
.admin-kicker{color:#85734c;letter-spacing:.15em;font-size:10px;font-weight:800;}
.admin-heading h2{margin:6px 0;font-size:27px;}
.admin-x{border:0;background:#e6ddcf;padding:10px 14px;border-radius:7px;}
.admin-notice{color:#636f62;font-size:12px;line-height:1.6;margin:6px 0 17px;}
.prize-rows{display:grid;gap:8px;}
.prize-row{display:grid;grid-template-columns:33px minmax(80px,1fr) 90px 60px;align-items:center;gap:10px;font-size:12px;font-weight:600;}
.prize-row input[type='text'],.prize-row input[type='number']{font-size:13px;width:100%;padding:11px 9px;border:1px solid #cbd2c7;background:#fff;border-radius:5px;color:#163721;}
.prize-row input[type='color']{height:38px;width:100%;border:1px solid #cbd2c7;border-radius:5px;background:#fff;cursor:pointer;}
.admin-stats{font-size:12px;padding:14px;margin:16px 0;background:#e5e8de;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.admin-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.admin-button{font-size:13px;border:1px solid #b7c2af;padding:12px 6px;background:#fff;color:#244532;border-radius:5px;font-weight:700;}
.admin-button.primary{background:#0d3d29;color:#fff;}
.admin-button.danger{color:#962e26;}
.admin-hint{font-size:11px;color:#65705f;line-height:1.6;}
.toast{position:fixed;z-index:40;bottom:25px;left:50%;transform:translateX(-50%);background:#f5e4b4;color:#163f29;border-radius:6px;padding:12px 18px;font-size:13px;box-shadow:0 5px 20px #0007;opacity:0;pointer-events:none;transition:opacity .2s;}
.toast.visible{opacity:1;}
@media (min-aspect-ratio: 11/10) {
  #app{grid-template-columns:minmax(0, 28fr) minmax(0, 48fr) minmax(0, 24fr);grid-template-rows:minmax(0,1fr);}
  .hero{padding:clamp(24px,4vh,64px) 0 clamp(20px,4vh,54px) clamp(25px,3vw,60px);}
  .hero-main{align-items:start;text-align:left;gap:18px;padding-left:0;}
  .eyebrow{letter-spacing:.12em;font-size:clamp(9px,.85vw,13px);white-space:nowrap;}
  .tiny-star{padding:0 .25em;}
  h1{font-size:clamp(26px,2.65vw,57px);}
  .hero-description{font-size:clamp(11px,1vw,19px);}
  .hero-lower{padding-right:24px;}
  .stage-bottom-caption{bottom:6%;left:2%;right:2%;}
  .stage-bottom-caption span:last-child{display:none;}
  .controls{padding:clamp(24px,4vh,64px) clamp(25px,3vw,60px) clamp(20px,4vh,54px) 0;}
  .controls-head{align-items:flex-start;gap:10px;}
  .step-label{font-size:clamp(8px,.9vw,12px);white-space:nowrap;}
  .controls-top-right{flex-wrap:wrap;justify-content:end;}
  .action-area{gap:20px;}
  .spin-button{height:clamp(65px,11vh,106px);}
  .spin-button-text{font-size:clamp(14px,1.55vw,29px);letter-spacing:.07em;}
  .button-arrow{font-size:24px;}
  .action-subtitle{line-height:1.7;font-size:clamp(11px,1vw,17px);max-width:18ch;}
  .controls-bottom span:last-child{display:none;}
}
@media (orientation: portrait) and (max-width:600px) {
  #app{grid-template-rows:minmax(0, 23fr) minmax(0, 55fr) minmax(0, 22fr);}
  .hero{padding:18px 22px 0;}
  .hero-topline{gap:7px;}
  .brand-mark{letter-spacing:.19em;font-size:12px;}
  .event-edition{font-size:7px;letter-spacing:.10em;}
  .hero-main{gap:7px;}
  .eyebrow{font-size:8px;letter-spacing:.13em;}
  h1{font-size:clamp(27px,8vw,42px);line-height:1.27;}
  .hero-description{font-size:11px;}
  .stage-bottom-caption span:last-child{display:none;}
  .controls{padding:0 22px 18px;}
  .spin-button{height:clamp(57px,8.2vh,76px);}
  .spin-button-text{font-size:20px;}
  .action-subtitle{font-size:10px;}
  .controls-bottom{font-size:8px;}
}
@media (max-height:600px) and (min-aspect-ratio: 11/10){
  .hero,.controls{padding-top:16px;padding-bottom:15px;}
  .hero-topline{align-items:flex-start;}
  .hero-main{gap:8px;}
  .hero-description{font-size:11px;}
  .controls-bottom{display:none;}
  .action-area{gap:10px;}
}
@media(prefers-reduced-motion:reduce){.spin-button-shine{animation:none}.result-card{animation:none}.confetti{animation-duration:.2s!important}}