:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff4d5;
  background: #110c04;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid #fff0a4; outline-offset: 5px; }
button:disabled { cursor: wait; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.landing {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  background: #110c04 url('../img/Frame-2.webp') center / 100% 100% no-repeat;
  padding: 155px 30px 24px;
}
.brand { position: absolute; width: 240px; top: 20px; left: 50%; transform: translateX(-50%); }
.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; max-width: 1480px; margin: auto; }
.wheel-column { position: relative; padding-top: 90px; align-self: start; }
.countdown { position: absolute; width: 350px; max-width: 65%; top: -16px; left: 50%; transform: translateX(-50%); }
.countdown img { width: 100%; }
.countdown time { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(40px, 4.5vw, 65px); font-weight: 900; font-variant-numeric: tabular-nums; color: #ffe376; -webkit-text-stroke: 1px #ffc790; text-shadow: 0 3px 5px #5c2d00; }
.wheel { position: relative; isolation: isolate; width: min(100%, 560px); margin: auto; aspect-ratio: 1; }
.wheel::before { content: ''; position: absolute; inset: -14%; z-index: -1; background: url('../img/HUABAN_5673271429@3x-1.webp') center / contain no-repeat; pointer-events: none; }
.wheel-frame { width: 100%; }
.wheel-disc { position: absolute; width: 86.1%; left: 6.95%; top: 6.8%; transition: transform 3000ms cubic-bezier(.22, 1, .36, 1); }
.wheel-pointer { position: absolute; z-index: 2; width: 10.7%; top: .9%; left: 44.65%; }
.image-button { padding: 0; border: 0; background: transparent; }
.image-button img { width: 100%; }
.spin-button { position: absolute; z-index: 3; width: 25%; top: 37.85%; left: 37.5%; border-radius: 50%; }
.spin-button:hover:not(:disabled) { filter: brightness(1.15); }
.horses { position: relative; width: 100%; margin: -30% auto 0; pointer-events: none; }
.spin-status { position: relative; margin: 0; min-height: 20px; text-align: center; font-size: 13px; color: #ead5a1; }
.character-column { position: relative; align-self: center; padding-bottom: 60px; }
.character { width: 100%; }
.alliance { position: absolute; width: 343px; max-width: 60%; left: 50%; bottom: -10px; transform: translateX(-50%); }
.partners { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 40px 0 0 auto; width: 50%; }
.partners img { width: auto; height: clamp(35px, 4.5vw, 78px); max-width: 22%; object-fit: contain; }
dialog { color: #fff4d5; border: 0; padding: 0; }
dialog::backdrop { background: #000c; backdrop-filter: blur(10px); }
body:has(dialog[open]) { overflow: hidden; }
.close-button { position: absolute; z-index: 5; top: 12px; right: 12px; width: 40px; height: 40px; border: 1px solid #dba94d; border-radius: 50%; background: #211705; color: #ffdf8e; font-size: 28px; line-height: 1; }
.reward-dialog { width: min(1000px, 95vw); max-height: 95svh; background: url('../img/aura-2.webp') center / contain no-repeat; text-align: center; overflow-x: hidden; padding: 24px 0; }
.reward-art { width: 100%; max-height: 70svh; object-fit: contain; }
.claim-button { display: block; width: min(449px, 56%); margin: -7% auto 0; position: relative; }
.claim-button:hover { filter: brightness(1.12); }
.demo-note { margin: 18px 12px 0; font-size: 13px; color: #eedcaf; }
.register-dialog { width: min(720px, calc(100vw - 32px), calc(100svh - 48px)); max-height: none; overflow: visible; background: transparent; }
.register-frame { position: relative; width: 100%; aspect-ratio: 754 / 650; padding: 16% 17% 7.5% 25%; background: url('../img/form-3.webp') center / 100% 100% no-repeat; }
.register-frame > .close-button { top: 11.5%; right: 8.5%; width: 38px; height: 38px; border: 2px solid #ffe183; background: #241703; box-shadow: 0 0 0 4px #1b1208aa, 0 4px 15px #0008; font-size: 25px; }
.register-heading { display: flex; align-items: center; gap: 18px; margin: 0 0 10px; padding-right: 20px; }
.register-heading img { width: 108px; flex: 0 0 auto; }
.register-heading h2 { margin: 0; color: #ffe083; font-size: 24px; letter-spacing: .045em; text-shadow: 0 2px 8px #000; }
label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
input { width: 100%; min-height: 48px; padding: 12px 16px; background: #fffaf0; color: #2c210b; border: 1px solid #d2aa52; border-radius: 10px; box-shadow: inset 0 1px 2px #5a3b1617, 0 2px 8px #0004; font-size: 16px; transition: border-color .2s, box-shadow .2s; }
input:hover { border-color: #f0ca70; }
input:focus { border-color: #ffdc73; box-shadow: 0 0 0 3px #ffc83c2e, inset 0 1px 2px #5a3b1617; }
input[aria-invalid='true'] { border: 2px solid #ff8989; }
.password-field { position: relative; }
.password-field input { padding-right: 65px; }
.password-field button { position: absolute; right: 5px; top: 5px; height: 38px; padding: 0 10px; background: transparent; border: 0; color: #705116; }
.field-error { min-height: 0; color: #ffb6a9; font-size: 12px; line-height: 1.4; margin: 6px 0 14px; }
.field-error:empty { margin: 0 0 12px; }
.register-button { width: 100%; min-height: 48px; border: 1px solid #ffeeb0; border-radius: 8px; color: #4f2201; background: linear-gradient(#fff1aa, #f3b82c); font-size: 20px; font-weight: 800; }
.form-intro { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: #ead7ad; }
.form-note { font-size: 12px; line-height: 1.5; color: #cabb9b; margin: 12px 0 0; }
.form-status { font-size: 13px; line-height: 1.5; color: #ffcf8c; margin: 10px 0 0; overflow-wrap: anywhere; }
.form-status:empty { display: none; }
.register-button { margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 16px; border-radius: 10px; box-shadow: inset 0 1px 0 #fff5bd, 0 5px 16px #0007; }
.register-button:hover { filter: brightness(1.08); }
.register-dialog { overscroll-behavior: contain; scrollbar-width: thin; }
.redirect-state { min-height: 365px; padding: 38px 8px 24px; text-align: center; }
.redirect-state[hidden] { display: none; }
.redirect-state h2 { margin: 24px 0 12px; color: #ffe083; font-size: 24px; letter-spacing: .05em; }
.redirect-state p { margin: 0 0 14px; color: #fff8e5; font-size: 16px; line-height: 1.5; }
.redirect-state strong { display: block; color: #ffcf75; font-size: 14px; line-height: 1.6; }
.redirect-spinner { display: block; width: 70px; height: 70px; margin: auto; border: 6px solid #806729; border-top-color: #ffe582; border-radius: 50%; animation: redirect-spin .8s linear infinite; box-shadow: 0 0 20px #ffc94255; }
.register-frame > .close-button:disabled { opacity: .35; cursor: wait; }
@keyframes redirect-spin { to { transform: rotate(360deg); } }
@media (min-width: 1600px) { .landing { padding-top: 175px; } }
@media (max-width: 1024px) {
  .landing { background-image: url('../img/iPad-mini-8.3-1.webp'); padding: 240px 20px 24px; }
  .hero { grid-template-columns: 1fr; max-width: 700px; }
  .countdown time { font-size: 65px; }
  .horses { max-width: 700px; margin-top: -28%; }
  .character-column { width: min(100%, 430px); margin: 35px auto 0; }
  .partners { width: 100%; margin-top: 65px; }
  .partners img { height: 60px; }
}
@media (max-width: 700px) {
  .landing { padding: 215px 12px 22px; }
  .brand { width: 190px; }
  .wheel-column { padding-top: 58px; }
  .wheel { width: min(100%, 350px); }
  .countdown { width: 284px; max-width: 85%; top: -40px; }
  .countdown time { font-size: 48px; }
  .horses { width: 116%; max-width: none; margin-left: -8%; margin-top: -26%; }
  .character-column { margin-top: 26px; padding-bottom: 40px; }
  .alliance { max-width: 70%; }
  .partners { gap: 6px; margin-top: 50px; }
  .partners img { height: 44px; max-width: 20%; }
  .register-dialog {
    width: min(420px, calc(100vw - 20px));
    max-height: calc(100svh - 16px);
    overflow-y: auto;
    border-radius: 22px;
  }
  .register-frame {
    min-height: 0;
    aspect-ratio: auto;
    padding: 72px 20px 24px;
    border: 2px solid #f4c247;
    border-radius: 22px;
    background:
      linear-gradient(180deg, transparent 0 74px, #12100c 122px),
      url('../img/form-3.webp') top center / 100% auto no-repeat,
      #12100c;
    box-shadow: inset 0 0 25px #f4bd2726, 0 10px 40px #000a;
  }
  .register-frame > .close-button {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border-color: #ffd66c;
    background: #2a1b02;
    font-size: 26px;
  }
  .register-heading { gap: 12px; flex-wrap: nowrap; margin-bottom: 8px; padding-right: 48px; }
  .register-heading img { width: 92px; flex: 0 0 auto; }
  .register-heading h2 { font-size: 20px; }
  .form-intro { margin-bottom: 14px; font-size: 14px; line-height: 1.45; }
  label { margin-bottom: 6px; font-size: 14px; }
  input { min-height: 46px; padding: 10px 14px; }
  .password-field button { top: 4px; height: 38px; }
  .field-error { margin: 4px 0 9px; }
  .field-error:empty { min-height: 0; margin-bottom: 9px; }
  .register-button { min-height: 48px; margin-top: 0; font-size: 19px; }
  .form-note { margin-top: 10px; text-align: center; }
  .redirect-state { min-height: 455px; padding: 65px 4px 20px; }
  .redirect-state h2 { font-size: 20px; }
  .reward-dialog { padding-top: 55px; }
}
@media (min-width: 541px) and (max-height: 700px) {
  .register-heading { gap: 14px; margin-bottom: 5px; }
  .register-heading img { width: 80px; }
  .register-heading h2 { font-size: 20px; }
  .form-intro { margin-bottom: 8px; font-size: 13px; line-height: 1.4; }
  label { margin-bottom: 3px; font-size: 13px; }
  input { min-height: 40px; padding: 8px 14px; }
  .password-field button { top: 1px; height: 38px; }
  .field-error:empty { margin-bottom: 4px; }
  .register-button { min-height: 42px; font-size: 18px; }
  .form-note { margin-top: 4px; font-size: 11px; line-height: 1.35; text-align: center; }
}
@media (max-width: 360px) and (max-height: 700px) {
  .register-frame { padding: 58px 16px 18px; }
  .register-heading { margin-bottom: 5px; }
  .register-heading img { width: 78px; }
  .register-heading h2 { font-size: 18px; }
  .form-intro { margin-bottom: 10px; font-size: 13px; }
  input { min-height: 43px; }
  .password-field button { top: 3px; height: 37px; }
  .field-error:empty { margin-bottom: 6px; }
  .register-button { min-height: 46px; }
  .form-note { margin-top: 7px; }
  .redirect-state { min-height: 500px; padding-top: 105px; }
}
@media (prefers-reduced-motion: reduce) {
  .redirect-spinner { animation-duration: 1.6s; }
}