/* 1. Theme & base */
:root {
  color-scheme: light;
  --ink: #603b1d;
  --muted: #85663d;
  --orange: #e99514;
  --cream: #fffaf0;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  color: var(--ink);
  background: #fff3c4;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 38%, #fffcf0 0%, #fff6d7 36%, transparent 70%), linear-gradient(125deg, #fff0b3, #fff6d8 48%, #ffe6a0);
}
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #8b4c0c; outline-offset: 5px; }

/* 2. Quiet, decorative background */
.scenery { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.sun-glow { position: absolute; width: 42vw; height: 42vw; left: -19vw; top: 10%; background: #ffd55b; opacity: .15; filter: blur(60px); border-radius: 50%; }
.orbit { position: absolute; border: 1px solid #d9a84426; border-radius: 50%; width: 580px; height: 580px; }
.orbit-one { left: -365px; top: 22%; }
.orbit-two { right: -365px; bottom: -350px; width: 780px; height: 780px; }
.cloud { position: absolute; width: 116px; height: 27px; background: #ffffff80; border-radius: 60px; animation: cloud-drift 10s ease-in-out infinite alternate; }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: 8px; background: inherit; border-radius: 50%; }
.cloud::before { width: 47px; height: 47px; left: 21px; }
.cloud::after { width: 61px; height: 61px; left: 49px; }
.cloud-left { top: 30%; left: 13%; transform: rotate(-6deg); }
.cloud-right { top: 66%; right: 12%; width: 87px; opacity: .65; animation-delay: -4s; }
.spark { position: absolute; color: #deb353; }
.spark-one { left: 26%; top: 63%; font-size: 25px; transform: rotate(12deg); }
.spark-two { right: 22%; top: 25%; font-size: 17px; opacity: .65; }
.dot { position: absolute; border-radius: 50%; background: #e8b747; }
.dot-one { width: 8px; height: 8px; top: 21%; left: 32%; opacity: .5; }
.dot-two { width: 5px; height: 5px; top: 75%; left: 37%; opacity: .5; }
.dot-three { width: 9px; height: 9px; right: 28%; top: 60%; opacity: .4; }
.flight-path { position: absolute; width: 205px; right: 8%; top: 31%; color: #ca9b3c; opacity: .5; transform: rotate(-8deg); }

/* 3. Header, centered hero & footer */
.site-header { display: flex; align-items: center; gap: 12px; padding: 29px 42px; font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.brand-mark { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: #f6bd3e; color: #fffdf0; font-size: 21px; }
.header-divider { height: 13px; width: 1px; background: #b3976470; margin: 0 2px; }
.header-caption { font-weight: 400; font-size: 12px; color: var(--muted); letter-spacing: .12em; }
.welcome { width: 100%; margin: auto; padding: 24px 24px 45px; text-align: center; animation: enter .7s ease-out both; }
.mascot-scene { position: relative; width: 248px; height: 248px; margin: 0 auto 32px; animation: mascot-float 5.5s ease-in-out infinite; }
.mascot-ring { width: 100%; height: 100%; padding: 12px; border: 1px solid #fffef5; border-radius: 50%; background: #fff9e4b3; box-shadow: 0 0 0 12px #fffdf94d, 0 0 0 25px #fff9e42e, 0 21px 46px -20px #c4913c60; }
.mascot-image { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 50%; background: #ffdb69; }
.mascot-media { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #ffdb69; isolation: isolate; }
.mascot-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; object-position: var(--video-position, 50% 50%); transform: scale(var(--video-zoom, 1)); }
.mascot-video[hidden] { display: none; }
.mascot-spark { position: absolute; right: -18px; top: 27px; color: #e8ad28; font-size: 28px; transform: rotate(14deg); }
.mascot-dot { position: absolute; width: 12px; height: 12px; left: -14px; bottom: 48px; border: 3px solid #edbb50; border-radius: 50%; }
.hello-badge { position: absolute; bottom: 3px; right: -33px; padding: 9px 16px; border: 1px solid #fff; border-radius: 12px 12px 12px 3px; background: #fffdf4; box-shadow: 0 5px 18px #ae792619; font-size: 12px; letter-spacing: .04em; transform: rotate(-7deg); }
.eyebrow { font-size: 12px; letter-spacing: .25em; margin: 0 0 12px; color: #a37c35; }
h1 { margin: 0; font-size: clamp(29px, 3vw, 42px); font-weight: 800; line-height: 1.5; letter-spacing: .035em; text-wrap: balance; }
h1 span { white-space: nowrap; }
.intro { font-size: 14px; color: var(--muted); letter-spacing: .08em; margin: 10px 0 29px; }
.redirect-panel { width: min(340px, 100%); margin: 0 auto; }
.progress-track { height: 8px; border-radius: 20px; background: #e7cf994a; box-shadow: inset 0 1px 3px #b8904020; overflow: hidden; }
.progress-fill { height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #f9cf50, #eda01d); transform: scaleX(0); transform-origin: left; position: relative; }
.progress-fill::after { content: ""; position: absolute; height: 2px; top: 1px; left: 3px; right: 3px; border-radius: inherit; background: #fff8cc66; }
.countdown { font-size: 13px; color: #85683e; margin: 13px 0 22px; font-variant-numeric: tabular-nums; }
.redirect-button { min-width: 202px; min-height: 52px; padding: 13px 26px; border: 1px solid #e99a1c; border-radius: 16px; color: #53300d; background: linear-gradient(135deg, #ffd15b, #f6b437); box-shadow: 0 8px 20px -7px #dd921c80, inset 0 1px #fff0a9; font-weight: 700; font-size: 16px; letter-spacing: .05em; transition: transform .2s, box-shadow .2s, filter .2s; }
.redirect-button span { display: inline-block; margin-left: 23px; font-size: 21px; line-height: 1; }
.redirect-button:disabled { cursor: wait; }
.redirect-note { color: #907246; font-size: 11px; letter-spacing: .1em; margin: 16px 0 0; }
.site-footer { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 20px 90px 25px; color: #8e7249; font-size: 11px; letter-spacing: .08em; }
.footer-dot { width: 4px; height: 4px; border-radius: 50%; background: #c59f53; }
.disclaimer-trigger { position: fixed; right: 27px; bottom: max(23px, env(safe-area-inset-bottom)); min-width: 52px; min-height: 42px; border: 1px solid #b8944f40; border-radius: 12px; color: #8e7241; background: #fffdf27d; backdrop-filter: blur(10px); font-size: 12px; transition: background .2s, transform .2s; }
.noscript-note { max-width: 340px; margin: 16px auto; color: #794a1e; font-size: 13px; }

/* 4. Native modal dialog: focus trapping and background inertness */
.disclaimer-dialog { border: 1px solid #fff9e8; border-radius: 25px; padding: 0; width: min(500px, calc(100% - 36px)); max-height: calc(100svh - 48px); color: var(--ink); background: #fffdf5; box-shadow: 0 30px 100px #3f2c2240; overflow-y: auto; }
.disclaimer-dialog::backdrop { background: #42382c65; backdrop-filter: blur(5px); }
.disclaimer-dialog[open] { animation: modal-enter .2s ease-out both; }
.disclaimer-dialog[open]::backdrop { animation: backdrop-enter .2s ease-out both; }
.disclaimer-dialog.is-closing { animation: modal-exit .18s ease-in both; }
.disclaimer-dialog.is-closing::backdrop { animation: backdrop-exit .18s ease-in both; }
.dialog-card { padding: 39px 35px 28px; }
.dialog-close { position: absolute; top: 13px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f5eddb; color: #846a46; font-size: 26px; line-height: 1; transition: background .2s; }
.dialog-kicker { font-size: 11px; color: #a28553; letter-spacing: .12em; }
.dialog-card h2 { font-size: 23px; margin: 10px 0 22px; }
.disclaimer-body { color: #795e3e; font-size: 14px; line-height: 1.95; }
.disclaimer-body p { margin: 0 0 16px; }
.dialog-hint { padding-top: 17px; border-top: 1px solid #eadfc9; font-size: 11px; color: #9a835e; margin: 22px 0 0; }
body:has(dialog[open]) { overflow: hidden; }

/* 5. Motion & responsive adjustments */
@media (hover: hover) {
  .redirect-button:hover { transform: translateY(-3px); filter: brightness(1.035); box-shadow: 0 12px 24px -7px #dd921c90; }
  .disclaimer-trigger:hover { background: #fffdf2; transform: translateY(-2px); }
  .dialog-close:hover { background: #efdfbc; }
}
.redirect-button:active { transform: translateY(0); }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mascot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes cloud-drift { from { translate: 0 0; } to { translate: 12px -5px; } }
@keyframes modal-enter { from { opacity: 0; transform: scale(.96) translateY(5px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes modal-exit { to { opacity: 0; transform: scale(.97) translateY(4px); } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-exit { to { opacity: 0; } }
@media (max-height: 800px) and (min-width: 641px) {
  .site-header { padding-top: 22px; padding-bottom: 20px; }
  .welcome { padding-top: 15px; padding-bottom: 20px; }
  .mascot-scene { width: 208px; height: 208px; margin-bottom: 25px; }
  .intro { margin-bottom: 24px; }
}
@media (max-width: 640px) {
  .site-header { padding: 23px 23px; gap: 9px; font-size: 12px; }
  .header-caption { font-size: 11px; }
  .welcome { padding: 28px 23px 35px; }
  .mascot-scene { width: 198px; height: 198px; margin-bottom: 34px; }
  .hello-badge { right: -23px; font-size: 11px; padding: 8px 12px; }
  h1 { font-size: clamp(26px, 6.8vw, 34px); line-height: 1.55; }
  h1 span { display: block; }
  .eyebrow { font-size: 11px; }
  .intro { font-size: 12px; margin-top: 11px; margin-bottom: 27px; }
  .redirect-panel { width: min(300px, 100%); }
  .redirect-button { min-width: 205px; min-height: 52px; }
  .flight-path { width: 115px; right: -19px; top: 25%; opacity: .3; }
  .cloud-left { left: -53px; top: 35%; opacity: .5; }
  .cloud-right { right: -44px; top: 65%; opacity: .4; }
  .spark-one { left: 9%; top: 61%; font-size: 17px; opacity: .5; }
  .spark-two { right: 12%; top: 19%; }
  .dot-one { left: 15%; }
  .dot-three { right: 7%; }
  .orbit-one { left: -480px; opacity: .45; }
  .orbit-two { right: -560px; bottom: -400px; opacity: .45; }
  .site-footer { padding: 18px 72px 25px 24px; justify-content: flex-start; font-size: 10px; }
  .disclaimer-trigger { right: 18px; bottom: max(17px, env(safe-area-inset-bottom)); }
  .dialog-card { padding: 38px 24px 24px; }
  .dialog-close { width: 44px; height: 44px; top: 9px; right: 10px; }
}
@media (max-width: 640px) and (max-height: 740px) {
  .site-header { padding-top: 17px; padding-bottom: 15px; }
  .welcome { padding-top: 17px; padding-bottom: 20px; }
  .mascot-scene { width: 162px; height: 162px; margin-bottom: 25px; }
  .intro { margin-bottom: 22px; }
  .countdown { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}