/* ===================== Base ===================== */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #030718;
  overflow: hidden;
  font-family: 'ZCOOL QingKe HuangYou', 'Baloo 2', 'Noto Sans SC', sans-serif;
  color: #EAF2FF;
  -webkit-user-select: none; user-select: none;
}
a { color: #FFC94D; text-decoration: none; }
a:hover { color: #FFE08A; }

@keyframes dsePop { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes dseToast { from { transform: translateY(-14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes dseShrink { from { width: 100%; } to { width: 0%; } }
@keyframes dseGlow { 0%,100% { text-shadow: 0 0 18px rgba(255,201,77,.55), 0 0 46px rgba(255,158,61,.25); } 50% { text-shadow: 0 0 30px rgba(255,201,77,.95), 0 0 72px rgba(255,158,61,.5); } }
@keyframes dseBlink { 0%,100% { opacity: .95; } 50% { opacity: .25; } }
@keyframes dseFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-.35em); } }
@keyframes dseSpin { to { transform: rotate(360deg); } }

/* ===================== Game stage ===================== */
.stage {
  position: fixed; inset: 0;
  background: #030718;
  container-type: size;
  display: flex; align-items: center; justify-content: center;
}
#frame {
  position: relative;
  width: min(97vw, 172.44vh);
  aspect-ratio: 16 / 9;
  font-size: min(1.2125cqw, 2.1556cqh);
  overflow: hidden;
  border-radius: 1em;
  box-shadow: 0 0 0 1px rgba(110,160,255,.18), 0 0 60px rgba(30,80,220,.25), 0 30px 80px rgba(0,0,0,.6);
  background: #040A1E;
  touch-action: none;
  cursor: default;
}
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
}
#overlay { position: absolute; inset: 0; pointer-events: none; }
#overlay > * { pointer-events: auto; }

body:not(.authed) #overlay { display: none; }
body:not(.authed) #topbar { display: none; }
body.booting #auth { display: none; }
body.authed  #auth { display: none; }

/* ===================== Top bar ===================== */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1.1rem;
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.brand {
  font-size: 1.15rem; color: #FFE08A; letter-spacing: .04em;
  text-shadow: 0 0 16px rgba(255,201,77,.35);
}
.brand-en {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: .6rem;
  letter-spacing: .28em; color: #6FC6FF; margin-left: .4rem;
}
.topbar-actions { display: flex; align-items: center; gap: .5rem; }
.user-chip {
  display: flex; align-items: center; gap: .45rem;
  background: rgba(10,20,50,.72); border: 1px solid rgba(110,160,255,.28);
  border-radius: 2em; padding: .34rem .9rem; font-size: .85rem; color: #BFE2FF;
  backdrop-filter: blur(6px);
}
.user-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #4DE8C2; box-shadow: 0 0 8px #4DE8C2; }
.tb-btn {
  font-family: inherit; font-size: .85rem; cursor: pointer;
  color: #BFE2FF; background: rgba(12,26,64,.7);
  border: 1px solid rgba(110,198,255,.4); border-radius: 2em;
  padding: .4rem 1rem; transition: transform .12s ease, background .12s ease;
  backdrop-filter: blur(6px);
}
.tb-btn:hover { background: rgba(20,40,96,.95); transform: translateY(-1px); }
.tb-btn.ghost { color: #FFB4B4; border-color: rgba(255,120,120,.4); background: rgba(50,12,18,.5); }
.tb-btn.ghost:hover { background: rgba(80,16,24,.85); }

/* ===================== Auth screen ===================== */
#auth {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(18,34,92,.55), rgba(3,7,20,.82) 70%);
  backdrop-filter: blur(3px);
}
.auth-card {
  width: min(92vw, 27rem);
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 2rem 2.2rem 1.7rem;
  background: rgba(9,17,42,.92);
  border: 1px solid rgba(110,160,255,.28);
  border-radius: 1.3rem;
  box-shadow: 0 0 60px rgba(30,80,220,.3), 0 24px 60px rgba(0,0,0,.55);
  animation: dsePop .4s cubic-bezier(.34,1.56,.64,1);
}
.auth-badge {
  font-size: .68rem; letter-spacing: .3em; color: #6FC6FF;
  border: 1px solid rgba(110,198,255,.4); border-radius: 2em;
  padding: .4em 1.1em; background: rgba(8,20,50,.6);
}
.auth-title {
  margin: .3rem 0 0; font-weight: 400; font-size: 3rem; line-height: 1;
  background: linear-gradient(180deg, #FFF3D6 15%, #FFC94D 55%, #FF9E3D);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: dseGlow 2.6s ease-in-out infinite;
}
.auth-sub {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: .7rem;
  letter-spacing: .5em; text-indent: .5em; color: #6FC6FF;
}
.auth-lead { margin: .3rem 0 .2rem; font-size: .82rem; color: #9FB4D8; text-align: center; line-height: 1.6; }

.auth-tabs { display: flex; gap: .3rem; background: rgba(6,14,36,.7); border-radius: 2em; padding: .25rem; margin-top: .2rem; }
.auth-tab {
  font-family: inherit; cursor: pointer; font-size: .9rem;
  color: #8FA6D9; background: none; border: none; border-radius: 2em;
  padding: .4rem 1.4rem; transition: all .15s ease;
}
.auth-tab.active { color: #2A1804; background: linear-gradient(160deg, #FFE08A, #FFB020); box-shadow: 0 0 18px rgba(255,180,50,.4); }

#auth-form { width: 100%; display: flex; flex-direction: column; gap: .7rem; margin-top: .7rem; }
.field { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: #9FB4D8; }
.field input {
  font-family: inherit; font-size: 1rem; color: #EAF2FF;
  background: rgba(6,14,36,.85); border: 1px solid rgba(110,160,255,.28);
  border-radius: .7rem; padding: .7rem .9rem; outline: none;
  -webkit-user-select: text; user-select: text;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus { border-color: rgba(255,201,77,.65); box-shadow: 0 0 0 3px rgba(255,201,77,.14); }
.auth-msg { min-height: 1.1rem; font-size: .8rem; text-align: center; color: #FF8A8A; }
.auth-msg.ok { color: #4DE8C2; }
.auth-submit {
  font-family: inherit; cursor: pointer; font-size: 1.05rem; color: #2A1804;
  background: linear-gradient(160deg, #FFE08A, #FFB020); border: none;
  border-radius: 2em; padding: .7rem; margin-top: .2rem;
  box-shadow: 0 0 24px rgba(255,180,50,.5), inset 0 -3px 0 rgba(140,80,0,.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.auth-submit:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(255,190,60,.8), inset 0 -3px 0 rgba(140,80,0,.35); }
.auth-submit:active { transform: scale(.98); }
.auth-submit:disabled { opacity: .6; cursor: default; transform: none; }
.auth-hint { font-size: .78rem; color: #8FA6D9; margin-top: .2rem; }

/* ===================== Modal (history / leaderboard) ===================== */
.modal-back {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3,7,20,.66); backdrop-filter: blur(3px);
}
.modal-back[hidden] { display: none; }
.modal-card {
  width: min(94vw, 40rem); max-height: 82vh;
  display: flex; flex-direction: column;
  background: rgba(9,17,42,.96); border: 1px solid rgba(110,160,255,.3);
  border-radius: 1.2rem; box-shadow: 0 0 60px rgba(30,80,220,.28), 0 24px 60px rgba(0,0,0,.55);
  animation: dsePop .3s cubic-bezier(.34,1.56,.64,1); overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem; border-bottom: 1px solid rgba(110,160,255,.16);
}
.modal-head h2 { margin: 0; font-weight: 400; font-size: 1.5rem; color: #FFE08A; }
.modal-close {
  font-family: inherit; cursor: pointer; font-size: 1rem; color: #8FA6D9;
  background: rgba(12,26,64,.7); border: 1px solid rgba(110,160,255,.28);
  border-radius: .6rem; width: 2rem; height: 2rem; line-height: 1;
}
.modal-close:hover { color: #EAF2FF; background: rgba(20,40,96,.95); }
.modal-body { padding: 1rem 1.4rem 1.4rem; overflow-y: auto; }

/* summary stat row */
.stat-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.stat-box {
  flex: 1 1 7rem; background: rgba(10,20,50,.6); border: 1px solid rgba(110,160,255,.18);
  border-radius: .8rem; padding: .7rem .9rem; display: flex; flex-direction: column; gap: .15rem;
}
.stat-box .k { font-size: .68rem; letter-spacing: .12em; color: #8FA6D9; }
.stat-box .v { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.45rem; color: #FFE08A; }

/* history table */
.htable { width: 100%; border-collapse: collapse; font-size: .84rem; }
.htable th {
  text-align: left; font-weight: 700; color: #8FA6D9; font-size: .72rem; letter-spacing: .08em;
  padding: .5rem .6rem; border-bottom: 1px solid rgba(110,160,255,.2);
}
.htable td { padding: .55rem .6rem; border-bottom: 1px solid rgba(110,160,255,.08); color: #DCE7FB; }
.htable tr:hover td { background: rgba(110,160,255,.05); }
.htable .score { font-family: 'Baloo 2', sans-serif; font-weight: 800; color: #FFE08A; }
.rank { font-family: 'Baloo 2', sans-serif; font-weight: 800; color: #6FC6FF; width: 2.5rem; }
.rank.top { color: #FFC94D; }
.badge {
  display: inline-block; font-size: .68rem; padding: .12em .6em; border-radius: 1em;
  border: 1px solid currentColor;
}
.badge.over { color: #FF8A8A; }
.badge.clear { color: #4DE8C2; }
.badge.hell { color: #FF6B6B; }
.empty { text-align: center; color: #8FA6D9; padding: 2rem 0; font-size: .9rem; }
.spinner {
  width: 1.6rem; height: 1.6rem; margin: 1.5rem auto; display: block;
  border: 3px solid rgba(110,160,255,.25); border-top-color: #FFC94D; border-radius: 50%;
  animation: dseSpin .8s linear infinite;
}
.me-row td { background: rgba(255,201,77,.08); }