[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #05070d; overflow: hidden; color: #fff; font-family: "Arial Black", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

#brand { position: fixed; z-index: 3; top: 3vmin; left: 3.5vmin; display: flex; align-items: center; gap: 1.6vmin; font-size: 3.4vmin; font-weight: 800; letter-spacing: .04em; text-shadow: 0 .2vmin 1.2vmin #000c; transition: opacity .3s; }
#brand img { height: 7vmin; max-width: 22vmin; object-fit: contain; }
.phase-reveal #brand { opacity: 0; }

/* 號碼牆：平常是旁邊的小面板，開出新球後放大成全畫面 */
#wall { position: fixed; z-index: 2; display: flex; gap: 3vmin; padding: 2.4vmin; box-sizing: border-box; border-radius: 2.4vmin;
  background: linear-gradient(160deg, #141b33e6, #080b16e6); border: 1px solid #ffffff22; box-shadow: 0 2vmin 6vmin #0009, inset 0 0 0 1px #ffffff0a;
  right: 2.5vw; top: 14vh; width: 37vw; height: 76vh; transition: opacity .35s, transform .35s; }
@media (max-aspect-ratio: 6/5) { #wall { left: 3vw; right: 3vw; width: auto; top: auto; bottom: 2.5vh; height: 36vh; } }
.phase-reveal #wall { opacity: 0; transform: scale(.97); pointer-events: none; }
.phase-board #wall { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; padding: 6vmin; background: radial-gradient(circle at 30% 40%, #1b2550f2, #060810f7); }

#latest { display: none; flex: 0 0 34%; flex-direction: column; align-items: center; justify-content: center; gap: 3vmin; container-type: size; }
.phase-board #latest { display: flex; }
@media (max-aspect-ratio: 6/5) { .phase-board #wall { flex-direction: column; } .phase-board #latest { flex-basis: 30%; flex-direction: row; } }
#latestBall { width: min(78cqw, 70cqh); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 34% 28%, #fff9, #fff0 38%), radial-gradient(circle at 50% 50%, var(--ball, #f2c200), color-mix(in srgb, var(--ball, #f2c200) 55%, #000));
  box-shadow: 0 3cqmin 8cqmin #000a, inset 0 -3cqmin 6cqmin #0006; animation: pop .5s cubic-bezier(.2, 1.5, .4, 1); }
#latestBall::before { content: attr(data-n); width: 62%; aspect-ratio: 1; border-radius: 50%; background: #fdfdfb; color: #15171c; display: grid; place-items: center; font-size: min(30cqw, 27cqh); font-weight: 900; }
#latestSeq { font-size: min(9cqw, 9cqh); color: #ffffffcc; letter-spacing: .08em; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

#gridBox { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 1.4vmin; }
#count { font-size: 2.6vmin; color: #ffffffb0; letter-spacing: .08em; }
.phase-board #count { display: none; }
#gridFit { flex: 1; min-height: 0; container-type: size; display: grid; place-items: center; }
#grid { --cols: 10; --rows: 10; --cell: min(100cqw / var(--cols), 100cqh / var(--rows)); display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-auto-rows: var(--cell); font-size: calc(var(--cell) * .44); }
#grid span { margin: 7%; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #ffffff38; background: #ffffff0d; border: 1px solid #ffffff14; }
#grid span.on { color: #15171c; background: radial-gradient(circle at 35% 28%, #fff, var(--ball) 78%); border-color: transparent; box-shadow: 0 0 calc(var(--cell) * .18) color-mix(in srgb, var(--ball) 70%, transparent); }
#grid span.new { outline: calc(var(--cell) * .07) solid #fff; animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.14); } }

#start { position: fixed; inset: 0; z-index: 9; border: 0; background: #05070dcc; color: #fff; font: inherit; font-size: 5vmin; letter-spacing: .1em; cursor: pointer; }
#offline { position: fixed; z-index: 8; left: 50%; bottom: 1.5vh; transform: translateX(-50%); padding: .8vmin 2vmin; border-radius: 99px; background: #7a1d22; font: 600 2vmin "Noto Sans TC", sans-serif; }