:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: #020913;
  --gold: #f8d77a;
  --cyan: #5ae6ff;
  --ink: #071832;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 15%, rgba(31, 101, 155, .34), transparent 38%),
    linear-gradient(135deg, #020710 0%, #071b31 50%, #020710 100%);
}

.game-shell {
  position: relative;
  width: min(100vw, calc(100vh * 420 / 740));
  height: min(100vh, calc(100vw * 740 / 420));
  max-width: 520px;
  max-height: 916px;
  overflow: hidden;
  isolation: isolate;
  background: #071832;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .65), 0 0 0 1px rgba(128, 226, 255, .12);
}

canvas { width: 100%; height: 100%; display: block; }

.screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 42px 30px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
  background: linear-gradient(180deg, rgba(2, 11, 24, .12), rgba(2, 9, 20, .76));
}

.screen--visible { opacity: 1; visibility: visible; transform: none; }

#loading { background: #06172c; gap: 14px; }
.crest {
  display: grid; place-items: center; width: 76px; aspect-ratio: 1;
  color: var(--gold); border: 2px solid rgba(248, 215, 122, .7); transform: rotate(45deg);
  font: 700 34px/1 serif; box-shadow: inset 0 0 24px rgba(248, 215, 122, .14), 0 0 34px rgba(90, 230, 255, .12);
}
.crest::first-letter { transform: rotate(-45deg); }
.loadbar { width: min(260px, 70vw); height: 5px; overflow: hidden; background: rgba(255,255,255,.12); }
.loadbar span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #36aeea, #8ff7ff); transition: width .2s; }

.eyebrow { color: #8defff; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; }
h1, h2, p { margin: 0; }
.muted { color: rgba(226, 245, 255, .66); font-size: 13px; letter-spacing: .08em; }

#startScreen { justify-content: center; padding: 24px 22px; background: linear-gradient(180deg, rgba(2, 11, 24, .02) 0%, rgba(2, 9, 20, .18) 31%, rgba(2, 9, 20, .92) 55%); }
.start-card {
  width: min(370px, 100%); padding: 21px 20px 16px; border: 1px solid rgba(130, 223, 255, .2);
  background: linear-gradient(160deg, rgba(7, 31, 56, .95), rgba(3, 14, 29, .97));
  box-shadow: 0 22px 55px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.04);
}
.creator-heading { text-align: left; }
.creator-heading h1 { margin: 6px 0 2px; color: #f8fbff; font-size: 25px; line-height: 1.15; letter-spacing: .01em; }
.creator-heading p { color: var(--gold); font: italic 14px/1.3 Georgia, serif; letter-spacing: .04em; }
.creator-works { margin-top: 17px; }
.creator-works h2 { margin: 0 0 8px; color: rgba(216,241,248,.58); font-size: 10px; line-height: 1; text-align: left; letter-spacing: .18em; }
.creator-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.creator-links a {
  position: relative; min-width: 0; padding: 10px 9px 9px; color: #e6f6f8; text-align: left; text-decoration: none;
  border: 1px solid rgba(141,239,255,.16); background: rgba(83,173,194,.07);
  transition: transform .16s, border-color .16s, background .16s;
}
.creator-links a:hover, .creator-links a:focus-visible { transform: translateY(-2px); border-color: rgba(248,215,122,.65); background: rgba(248,215,122,.08); outline: none; }
.creator-links small { display: block; margin-bottom: 3px; color: rgba(130,234,255,.54); font-size: 8px; }
.creator-links b { display: block; overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.creator-links span { position: absolute; top: 7px; right: 7px; color: rgba(248,215,122,.5); font-size: 9px; }
.start-card > .primary-button { width: 100%; min-width: 0; margin-top: 17px; padding-block: 12px 10px; }
.start-card > .tip-row { justify-content: center; margin-top: 15px; }
.creator-footer { margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.08); }
.creator-footer p { display: flex; align-items: center; justify-content: center; gap: 7px; color: rgba(220,239,244,.34); font-size: 8px; line-height: 1.6; letter-spacing: .04em; }
.creator-footer a { color: rgba(189,229,239,.46); text-decoration: none; }
.creator-footer a:hover, .creator-footer a:focus-visible { color: var(--gold); outline: none; }
.creator-footer i { width: 2px; height: 2px; border-radius: 50%; background: rgba(248,215,122,.45); }

button { font: inherit; }
.primary-button {
  min-width: 220px; padding: 15px 32px 13px; color: #071525; cursor: pointer;
  border: 0; border-radius: 3px; background: linear-gradient(135deg, #fff1b0, #dcae4f);
  box-shadow: 0 9px 0 #7b5421, 0 15px 32px rgba(0,0,0,.42); transition: transform .12s, box-shadow .12s;
}
.primary-button:active { transform: translateY(6px); box-shadow: 0 3px 0 #7b5421, 0 8px 18px rgba(0,0,0,.45); }
.primary-button span { display: block; font-weight: 900; font-size: 19px; letter-spacing: .1em; }
.primary-button small { display: block; margin-top: 3px; opacity: .68; font-size: 10px; }
.tip-row { display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.48); font-size: 11px; }
.tip-row i { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }

.result-card {
  position: relative;
  width: min(356px, 90vw); padding: 28px 24px 26px; border: 1px solid rgba(130, 223, 255, .26);
  background: linear-gradient(160deg, rgba(9, 37, 66, .96), rgba(4, 17, 34, .98));
  box-shadow: 0 26px 70px rgba(0,0,0,.55), inset 0 0 38px rgba(70, 183, 232, .06);
}
#gameOverScreen { gap: 0; background: rgba(0, 0, 0, .8); }
.result-dizzy-player {
  position: relative; z-index: 1; width: min(184px, 50vw); height: auto; margin-bottom: -25px;
  image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 9px 13px rgba(0,0,0,.62));
  animation: dizzy-hover 1.15s ease-in-out infinite alternate;
}
@keyframes dizzy-hover { from { transform: translateY(1px) rotate(-1.5deg); } to { transform: translateY(-5px) rotate(1.5deg); } }
h2 { margin: 7px 0 22px; font-size: 31px; }
.score-grid { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 17px; }
.score-grid > div:first-child { border-right: 1px solid rgba(255,255,255,.12); }
.score-grid span { display: block; color: rgba(255,255,255,.5); font-size: 11px; letter-spacing: .18em; }
.score-grid strong { display: block; margin-top: 5px; color: var(--gold); font: 700 42px/1 Georgia, serif; }
.result-hero { margin-bottom: 20px; color: #a9dbea; font-size: 12px; }
.result-card .primary-button { min-width: 100%; }
.works-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 20px; }
.works-links a {
  min-width: 0; padding: 10px 4px 9px; color: #d9eef4; text-decoration: none;
  border: 1px solid rgba(141, 239, 255, .18); background: rgba(87, 183, 196, .07);
  transition: border-color .16s, background .16s, transform .16s;
}
.works-links a:hover, .works-links a:focus-visible { border-color: rgba(248, 215, 122, .7); background: rgba(248, 215, 122, .1); transform: translateY(-2px); outline: none; }
.works-links b { display: block; overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.works-links small { display: block; margin-top: 4px; color: rgba(185, 239, 255, .48); font-size: 8px; }

.hud { position: absolute; z-index: 3; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s; }
.hud--visible { opacity: 1; }
.brand-chip { position: absolute; top: calc(19px + env(safe-area-inset-top)); left: 18px; color: rgba(255,255,255,.46); font: 700 10px/1 Georgia, serif; letter-spacing: .22em; }
.live-score { position: absolute; top: calc(22px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); color: #fff; font: 900 38px/1 Georgia, serif; text-shadow: 0 3px 0 #0b3b62, 0 5px 14px rgba(0,0,0,.65); }
.sound-button { pointer-events: auto; position: absolute; top: calc(15px + env(safe-area-inset-top)); right: 15px; width: 32px; height: 32px; padding: 0; color: #b9efff; border: 1px solid rgba(185,239,255,.28); border-radius: 50%; background: rgba(3,17,34,.45); cursor: pointer; }
.sound-button.is-muted { color: rgba(255,255,255,.35); text-decoration: line-through; }

.desktop-note { position: fixed; left: 50%; bottom: 15px; transform: translateX(-50%); margin: 0; color: rgba(255,255,255,.34); font-size: 11px; letter-spacing: .08em; pointer-events: none; }
kbd { padding: 2px 6px; color: rgba(255,255,255,.56); border: 1px solid rgba(255,255,255,.16); border-radius: 3px; background: rgba(255,255,255,.06); }

@media (max-width: 600px) {
  .game-shell { width: 100vw; height: 100dvh; max-width: none; max-height: none; box-shadow: none; }
  .desktop-note { display: none; }
}

@media (max-height: 700px) {
  #startScreen { padding: 14px 18px; }
  .start-card { padding: 16px 17px 12px; }
  .creator-works { margin-top: 12px; }
  .start-card > .primary-button { margin-top: 12px; }
  .start-card > .tip-row { margin-top: 12px; }
  .creator-footer { margin-top: 10px; padding-top: 8px; }
  .result-dizzy-player { width: 142px; margin-bottom: -24px; }
  .result-card { padding-block: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }