/* 店内大屏：电视 / 投影 / 平板横放，2 米外也看得清 */
html, body { height: 100%; }
body.screen { margin: 0; overflow: hidden; background: #08090C; color: #F1F5F9; font-size: clamp(14px, 1.15vw, 22px); cursor: default; }
body.screen.idle { cursor: none; }
.bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.bg i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; animation: drift 26s ease-in-out infinite alternate; }
.bg i:nth-child(1) { width: 60vw; height: 50vh; left: -10vw; top: -20vh; background: radial-gradient(circle, rgba(249,115,22,.45), transparent 70%); }
.bg i:nth-child(2) { width: 50vw; height: 50vh; right: -12vw; bottom: -22vh; background: radial-gradient(circle, rgba(245,158,11,.25), transparent 70%); animation-delay: -9s; }
@keyframes drift { to { transform: translate(6vw, 5vh) scale(1.1); } }

.top { position: relative; z-index: 1; display: flex; align-items: center; gap: 2em; padding: 2.2vh 3vw; }
.brand { display: flex; align-items: center; gap: .8em; }
.brand .logo { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: .75em; color: #FDBA74; background: radial-gradient(circle at 50% 35%, #1E293B, #0B1220); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px -10px rgba(249,115,22,.6); }
.brand .logo svg { width: 1.5em; height: 1.5em; }
.brand b { display: block; font-size: 1.25em; font-weight: 800; letter-spacing: -.01em; }
.brand small { display: block; color: #94A3B8; font-size: .85em; }
.live { display: inline-flex; align-items: center; gap: .6em; padding: .35em 1em; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #CBD5E1; font-size: .9em; }
.live i { width: .55em; height: .55em; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 .25em rgba(52,211,153,.15); animation: mk-pulse 2.4s ease-in-out infinite; }
.live.off i { background: #64748B; box-shadow: none; animation: none; }
.clock { margin-left: auto; text-align: right; }
.clock b { display: block; font-size: 2.2em; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.clock small { color: #94A3B8; font-size: .85em; }

.stage { position: relative; z-index: 1; height: calc(100vh - 12vh); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .62fr); gap: 3vw; padding: 2vh 3vw 4vh; align-items: center; }
.hero .where { margin: 0 0 .4em; color: #FDBA74; font-size: 1.35em; font-weight: 700; }
.big { display: flex; align-items: flex-end; gap: .25em; line-height: .85; }
.big b { font-size: clamp(120px, 15vw, 300px); font-weight: 900; letter-spacing: -.06em; background: linear-gradient(180deg, #FFFFFF 30%, #FDBA74); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.big b.bump { animation: bump .8s cubic-bezier(.16,1,.3,1); }
@keyframes bump { 30% { transform: scale(1.08) translateY(-2%); } }
.big span { padding-bottom: .5em; font-size: 2em; font-weight: 800; line-height: 1.15; color: #E2E8F0; }
.stats { margin-top: 5vh; display: grid; grid-template-columns: repeat(3, auto); gap: 2.4em; justify-content: start; }
.stats b { display: block; font-size: 2.8em; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.stats div:first-child b { color: #FB923C; }
.stats span { color: #94A3B8; font-size: .9em; }

.room { height: 100%; display: grid; align-content: center; min-width: 0; }
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2em, 1fr)); gap: 1em; max-height: 76vh; overflow: hidden; }
.seat { position: relative; display: grid; justify-items: center; gap: .35em; padding: 1.1em .6em .9em; border-radius: 1.1em; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); animation: sit .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes sit { from { opacity: 0; transform: translateY(14px) scale(.94); } }
.seat.focus { border-color: rgba(249,115,22,.5); background: linear-gradient(180deg, rgba(249,115,22,.12), rgba(255,255,255,.03)); }
.seat .av { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 50%; font-size: 1.7em; background: rgba(255,255,255,.08); }
.seat.focus .av { box-shadow: 0 0 0 3px rgba(249,115,22,.7), 0 0 30px rgba(249,115,22,.35); }
.seat .nm { font-weight: 700; font-size: .95em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .st { font-size: .8em; color: #94A3B8; font-variant-numeric: tabular-nums; }
.seat.focus .st { color: #FDBA74; font-weight: 700; }
.seat.break .st { color: #60A5FA; }
.seat.more { align-content: center; color: #94A3B8; font-weight: 700; font-size: 1.2em; }
.seat.cheered { animation: wiggle .7s cubic-bezier(.16,1,.3,1); }
@keyframes wiggle { 30% { transform: rotate(-4deg) scale(1.06); } 65% { transform: rotate(3deg); } }
.empty { margin: 0; text-align: center; color: #94A3B8; font-size: 1.6em; line-height: 1.6; }

.join { display: grid; justify-items: center; text-align: center; gap: .9em; padding: 2.2em 1.6em; border-radius: 1.6em; background: rgba(255,255,255,.04); border: 1px solid rgba(249,115,22,.35); box-shadow: 0 0 0 1px rgba(249,115,22,.1), 0 30px 80px -30px rgba(249,115,22,.45); }
.qr { padding: .8em; border-radius: 1em; background: #fff; }
.qr img { display: block; width: min(15vw, 30vh); height: auto; aspect-ratio: 1; }
.join b { font-size: 1.6em; font-weight: 800; }
.join p { margin: 0; color: #CBD5E1; font-size: .95em; line-height: 1.6; }
.join .gift { margin-top: .3em; padding: .5em 1em; border-radius: 99px; color: #FDBA74; background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.35); font-weight: 700; font-size: .85em; }

.floats { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.float { position: absolute; font-size: 4em; line-height: 1; animation: floatUp 3.2s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(20px) scale(.5); } 15% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: translateY(-34vh) scale(1); } }

.fs { position: fixed; right: 2vw; bottom: 2vh; z-index: 6; padding: .6em 1.2em; border-radius: 99px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: #E2E8F0; font: inherit; font-size: .85em; cursor: pointer; transition: opacity .4s; }
body.idle .fs, :fullscreen .fs { opacity: 0; pointer-events: none; }

/* 竖屏 / 平板竖放 */
@media (max-aspect-ratio: 1/1) {
  body.screen { overflow: auto; font-size: clamp(14px, 2.4vw, 24px); }
  .stage { height: auto; grid-template-columns: 1fr; gap: 4vh; }
  .room { height: auto; }
  .seats { max-height: none; }
  .qr img { width: min(40vw, 260px); }
}
@media (prefers-reduced-motion: reduce) { .bg i { animation: none; } }