:root { --void:#05050b; --night:#0a0b16; --glass:rgba(15,17,34,.8); --glass-strong:rgba(9,10,22,.93); --line:rgba(96,226,255,.27); --ink:#f5f7ff; --muted:#a1a9c4; --cyan:#2fe8ff; --pink:#ff39d1; --lime:#c7ff4a; --red:#ff5472; --blue:#697dff; font-family:"SFMono-Regular", "Cascadia Code", "Noto Sans SC", "Microsoft YaHei", monospace; color:var(--ink); }
* { box-sizing:border-box; } body { min-width:320px; margin:0; color:var(--ink); background:var(--void); } body::before { content:""; pointer-events:none; position:fixed; z-index:-2; inset:0; background:radial-gradient(ellipse 65% 45% at 50% -14%,rgba(68,66,190,.26),transparent 72%),radial-gradient(circle at 90% 78%,rgba(255,57,209,.1),transparent 30%),#05050b; } body::after { content:""; pointer-events:none; position:fixed; z-index:-1; inset:0; opacity:.12; background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(125,232,255,.25) 4px); mix-blend-mode:screen; }
button,input { font:inherit; } button { cursor:pointer; border:0; transition:transform 180ms ease,filter 180ms ease,box-shadow 180ms ease,background 180ms ease; } button:active:not(:disabled) { transform:translateY(2px) scale(.985); } button:focus-visible,input:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }.hidden { display:none !important; }.eyebrow { margin:0 0 6px; color:var(--cyan); font-size:11px; letter-spacing:3px; font-weight:900; text-shadow:0 0 8px var(--cyan),0 0 18px rgba(47,232,255,.58); }.muted { color:var(--muted); font-size:13px; line-height:1.6; }.center { text-align:center; }
.host-page,.play-page { isolation:isolate; }.host-shell { min-height:100vh; padding:30px clamp(18px,4vw,72px); position:relative; overflow:hidden; }.host-shell::before { content:""; position:absolute; inset:auto -6vw 0; height:178px; z-index:-1; opacity:.72; background:linear-gradient(90deg,#0b1020 0 3%,transparent 3% 4%,#0b1020 4% 8%,transparent 8% 10%,#0b1020 10% 15%,transparent 15% 17%,#0b1020 17% 23%,transparent 23% 25%,#0b1020 25% 34%,transparent 34% 36%,#0b1020 36% 41%,transparent 41% 44%,#0b1020 44% 52%,transparent 52% 54%,#0b1020 54% 62%,transparent 62% 65%,#0b1020 65% 73%,transparent 73% 75%,#0b1020 75% 85%,transparent 85% 87%,#0b1020 87%); clip-path:polygon(0 42%,4% 42%,4% 14%,8% 14%,8% 55%,13% 55%,13% 6%,17% 6%,17% 43%,23% 43%,23% 0,28% 0,28% 57%,34% 57%,34% 18%,39% 18%,39% 44%,45% 44%,45% 7%,52% 7%,52% 48%,57% 48%,57% 22%,62% 22%,62% 56%,69% 56%,69% 5%,74% 5%,74% 44%,80% 44%,80% 20%,85% 20%,85% 48%,91% 48%,91% 0,96% 0,96% 56%,100% 56%,100% 100%,0 100%); filter:drop-shadow(0 -4px 10px rgba(47,232,255,.21)); }.topbar,.host-footer,.game-meta,.qr-panel,.player-summary { display:flex; align-items:center; }.topbar { justify-content:space-between; gap:18px; border-bottom:1px solid rgba(47,232,255,.42); padding-bottom:20px; box-shadow:0 13px 25px -22px var(--cyan); }.topbar h1 { margin:0; font-size:clamp(24px,3vw,42px); letter-spacing:-1px; text-shadow:0 0 18px rgba(105,125,255,.45); }.game-meta { gap:11px; }.game-meta span { padding:8px 12px; border:1px solid rgba(47,232,255,.32); border-radius:4px; color:var(--cyan); font-size:12px; background:rgba(12,31,51,.46); box-shadow:inset 0 0 13px rgba(47,232,255,.1),0 0 13px rgba(47,232,255,.12); }.game-meta strong { color:var(--lime); font-size:13px; text-shadow:0 0 9px rgba(199,255,74,.7); }.seat-grid { display:grid; grid-template-columns:repeat(10,1fr); gap:10px; margin:25px 0; }.seat { min-height:82px; display:grid; place-items:center; position:relative; overflow:hidden; color:#65708d; background:rgba(8,11,25,.77); border:1px solid rgba(99,119,164,.42); border-radius:3px; font-weight:900; clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px)); }.seat::after { content:""; position:absolute; width:5px; height:5px; top:4px; right:4px; background:var(--cyan); box-shadow:0 0 10px 2px var(--cyan); }.seat img { width:41px; height:41px; object-fit:cover; border-radius:50%; border:1px solid var(--pink); box-shadow:0 0 10px var(--pink); }.seat .seat-name { max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:10px; }.seat .seat-number { position:absolute; top:6px; left:8px; color:var(--cyan); font-size:10px; }.seat.occupied { border-color:var(--pink); background:rgba(50,10,48,.48); box-shadow:inset 0 0 18px rgba(255,57,209,.14),0 0 13px rgba(255,57,209,.21); animation:seatPulse 2.5s ease-in-out infinite; }.question-card { position:relative; overflow:hidden; padding:clamp(26px,4vw,54px); min-height:350px; border:1px solid rgba(47,232,255,.5); background:linear-gradient(105deg,rgba(12,14,31,.96),rgba(12,14,31,.78)); clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px)); box-shadow:inset 0 0 30px rgba(47,232,255,.05),0 0 0 1px rgba(255,57,209,.1),0 0 35px rgba(25,53,129,.2); }.question-card::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 0 84%,rgba(47,232,255,.08) 84% 84.4%,transparent 84.4%); }.phase-label { position:relative; z-index:1; color:var(--lime); font-size:13px; font-weight:900; letter-spacing:1px; text-shadow:0 0 10px rgba(199,255,74,.76); }.question-card h2 { position:relative; z-index:1; max-width:1050px; margin:12px 0 30px; font-size:clamp(26px,3.2vw,48px); line-height:1.35; letter-spacing:-1.5px; }.option-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.option { padding:16px 18px; border:1px solid rgba(105,125,255,.38); border-left:3px solid var(--blue); background:rgba(38,43,79,.42); font-size:16px; font-weight:700; }.option b { display:inline-grid; place-items:center; width:25px; height:25px; margin-right:10px; color:var(--void); background:var(--cyan); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); box-shadow:0 0 13px var(--cyan); }.answer-feed { position:relative; z-index:1; min-height:30px; margin-top:21px; color:var(--pink); font-weight:800; text-shadow:0 0 8px rgba(255,57,209,.62); }.host-footer { justify-content:space-between; gap:20px; margin-top:22px; }.start-panel { padding-left:13px; border-left:2px solid var(--pink); }.start-panel label { display:block; margin-bottom:7px; color:var(--muted); font-size:12px; }.start-panel input { width:180px; margin-right:8px; padding:12px; color:var(--ink); border:1px solid rgba(105,125,255,.5); border-radius:2px; background:rgba(4,6,17,.7); }.primary-button { position:relative; overflow:hidden; padding:13px 20px; color:#fff; background:#c718a5; border:1px solid #ff68dd; border-radius:2px; font-weight:900; letter-spacing:.5px; box-shadow:0 0 8px rgba(255,57,209,.8),0 0 22px rgba(255,57,209,.38),inset 0 0 12px rgba(255,255,255,.18); }.primary-button:hover:not(:disabled) { filter:brightness(1.2); box-shadow:0 0 12px var(--pink),0 0 36px rgba(255,57,209,.6),inset 0 0 16px rgba(255,255,255,.28); }.primary-button:disabled,.buzz-button:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }.qr-panel { padding:9px 14px; gap:12px; border:1px solid rgba(47,232,255,.52); background:rgba(10,15,31,.85); box-shadow:inset 0 0 18px rgba(47,232,255,.07),0 0 18px rgba(47,232,255,.13); }.qr-panel img { width:84px; height:84px; background:#fff; }.qr-panel p { margin:0 0 5px; color:var(--cyan); font-weight:900; text-shadow:0 0 8px var(--cyan); }.qr-panel a { max-width:220px; display:block; overflow:hidden; color:var(--ink); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.play-shell { width:min(100%,520px); min-height:100vh; margin:auto; padding:clamp(25px,7vw,48px) 20px; position:relative; }.play-shell::before { content:""; position:absolute; top:0; right:12px; width:1px; height:100%; background:linear-gradient(transparent,rgba(47,232,255,.4),transparent); box-shadow:0 0 10px var(--cyan); }.play-shell h1 { margin:0; font-size:32px; letter-spacing:-1px; text-shadow:0 0 15px rgba(255,57,209,.4); }.panel { position:relative; margin-top:24px; padding:26px 22px; overflow:hidden; border:1px solid rgba(96,226,255,.42); border-radius:3px; background:var(--glass-strong); box-shadow:inset 0 0 22px rgba(47,232,255,.035),0 0 25px rgba(27,63,142,.13); }.panel::before { content:""; position:absolute; top:0; left:0; width:54px; height:2px; background:var(--pink); box-shadow:0 0 12px var(--pink); }.panel h2 { margin:0 0 17px; font-size:24px; }.panel label { display:block; margin-top:17px; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.5px; }.panel input:not([type=file]) { width:100%; margin-top:7px; padding:13px; color:var(--ink); border:1px solid rgba(105,125,255,.48); border-radius:2px; background:rgba(5,7,17,.86); }.panel .primary-button { width:100%; margin-top:21px; }.avatar-picker { width:88px; height:88px; display:grid !important; place-items:center; position:relative; overflow:hidden; margin:10px auto 4px !important; color:var(--cyan) !important; border:1px solid var(--cyan); border-radius:50%; background:rgba(47,232,255,.08); cursor:pointer; box-shadow:0 0 10px rgba(47,232,255,.55),inset 0 0 15px rgba(47,232,255,.12); }.avatar-picker:hover { filter:brightness(1.35); box-shadow:0 0 20px var(--cyan); }.avatar-picker img { display:none; width:100%; height:100%; object-fit:cover; }.avatar-picker.has-image img { display:block; }.avatar-picker span { font-size:11px; }.avatar-picker.has-image span { display:none; }.player-summary { gap:12px; }.player-summary img { width:48px; height:48px; object-fit:cover; border:1px solid var(--pink); border-radius:50%; box-shadow:0 0 11px var(--pink); }.player-summary p { margin:4px 0 0; }.waiting-message { padding:43px 10px 24px; color:var(--ink); font-size:18px; font-weight:900; line-height:1.6; text-align:center; }.buzz-button { position:relative; width:100%; aspect-ratio:1.8; overflow:hidden; color:#09030c; border:1px solid #ff79e3; border-radius:3px; background:#ff39d1; box-shadow:0 0 8px var(--pink),0 0 24px rgba(255,57,209,.8),0 0 55px rgba(255,57,209,.25),inset 0 0 18px rgba(255,255,255,.45); font-size:35px; font-weight:900; letter-spacing:10px; animation:breathe 2.2s ease-in-out infinite; }.buzz-button::after { content:""; position:absolute; top:-30%; left:-17%; width:15%; height:160%; background:rgba(255,255,255,.4); transform:rotate(25deg); animation:scan 3.2s linear infinite; }.buzz-button:hover:not(:disabled) { filter:brightness(1.18); box-shadow:0 0 14px var(--pink),0 0 38px rgba(255,57,209,.9),0 0 75px rgba(255,57,209,.35); }.player-options { display:grid; gap:11px; }.player-option { padding:17px; color:var(--ink); border:1px solid rgba(105,125,255,.42); border-left:3px solid var(--blue); border-radius:2px; background:rgba(38,43,79,.5); font-weight:800; text-align:left; }.player-option:hover:not(:disabled) { color:var(--cyan); border-color:var(--cyan); border-left-color:var(--cyan); background:rgba(47,232,255,.1); box-shadow:0 0 15px rgba(47,232,255,.16); }.timer-copy { color:var(--pink); font-weight:900; text-align:center; text-shadow:0 0 9px var(--pink); }.success-mark { width:64px; height:64px; display:grid; place-items:center; margin:0 auto 16px; color:var(--lime); border:1px solid var(--lime); border-radius:50%; font-size:35px; font-weight:900; text-shadow:0 0 10px var(--lime); box-shadow:0 0 12px rgba(199,255,74,.5),inset 0 0 18px rgba(199,255,74,.15); }.seat-options { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:20px; }.seat-choice { min-height:52px; color:var(--cyan); border:1px solid rgba(47,232,255,.63); border-radius:2px; background:rgba(47,232,255,.07); font-weight:900; text-shadow:0 0 6px rgba(47,232,255,.65); }.seat-choice:hover:not(:disabled) { color:var(--void); background:var(--lime); border-color:var(--lime); text-shadow:none; box-shadow:0 0 15px var(--lime); }.error-message { min-height:22px; color:var(--red); font-size:13px; font-weight:800; text-align:center; text-shadow:0 0 8px rgba(255,84,114,.65); }
@keyframes breathe { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.2); } } @keyframes scan { from { transform:translateX(0) rotate(25deg); } to { transform:translateX(900%) rotate(25deg); } } @keyframes seatPulse { 0%,100% { box-shadow:inset 0 0 18px rgba(255,57,209,.14),0 0 13px rgba(255,57,209,.21); } 50% { box-shadow:inset 0 0 22px rgba(255,57,209,.22),0 0 21px rgba(255,57,209,.4); } }
@media (max-width:700px) { .host-shell { padding:18px; }.topbar,.host-footer { align-items:flex-start; flex-direction:column; }.seat-grid { grid-template-columns:repeat(5,1fr); }.seat { min-height:72px; }.option-grid { grid-template-columns:1fr; }.host-footer { margin-bottom:20px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

.seat-grid { gap:6px; margin:16px 0; }
.host-countdown { position:absolute; z-index:2; top:40px; right:clamp(24px,5vw,72px); width:96px; height:96px; display:grid; place-items:center; color:var(--void); border:2px solid var(--lime); border-radius:50%; background:var(--lime); box-shadow:0 0 15px var(--lime),0 0 45px rgba(199,255,74,.7); font-size:56px; font-weight:900; text-shadow:none; animation:countdownPulse .8s ease-in-out infinite; }
.seat { min-height:56px; }
.seat::after { width:4px; height:4px; top:3px; right:3px; box-shadow:0 0 8px 1px var(--cyan); }
.seat img { width:29px; height:29px; box-shadow:0 0 8px var(--pink); }
.seat .seat-name { max-width:86%; font-size:8px; }
.seat .seat-number { top:4px; left:6px; font-size:8px; }
.next-button { margin-left:8px; padding:13px 16px; color:var(--cyan); border:1px solid rgba(47,232,255,.62); border-radius:2px; background:rgba(47,232,255,.08); font-weight:900; }
.next-button:hover:not(:disabled) { color:var(--void); background:var(--cyan); box-shadow:0 0 18px var(--cyan); }
.next-button:disabled { opacity:.32; cursor:not-allowed; }
.skip-button { margin-left:8px; padding:13px 16px; color:#ffb7c9; border:1px solid rgba(255,84,114,.7); border-radius:2px; background:rgba(255,84,114,.08); font-weight:900; }
.skip-button:hover:not(:disabled) { color:#fff; background:rgba(255,84,114,.5); box-shadow:0 0 18px rgba(255,84,114,.7); }.skip-button:disabled { opacity:.32; cursor:not-allowed; }
.online-panel { flex:1; min-width:260px; max-width:520px; padding:11px 15px; border:1px solid rgba(105,125,255,.38); background:rgba(8,12,27,.7); box-shadow:inset 0 0 18px rgba(105,125,255,.08); }
.online-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; color:var(--cyan); font-size:11px; font-weight:900; letter-spacing:1px; }
.online-heading strong { color:var(--lime); text-shadow:0 0 7px var(--lime); }
.online-players { display:flex; align-items:center; gap:8px; min-height:46px; overflow-x:auto; padding-bottom:3px; }
.online-player { flex:0 0 42px; position:relative; color:#b7c0dc; font-size:8px; text-align:center; }
.online-player img { width:34px; height:34px; display:block; margin:0 auto 3px; object-fit:cover; border:1px solid rgba(47,232,255,.75); border-radius:50%; box-shadow:0 0 7px rgba(47,232,255,.37); }
.online-player span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.online-player.buzzing img { border-color:var(--pink); box-shadow:0 0 8px var(--pink),0 0 20px var(--pink),0 0 39px rgba(255,57,209,.85); animation:buzzerFlash .44s ease-in-out infinite alternate; }
.online-player.buzzing span { color:var(--pink); text-shadow:0 0 7px var(--pink); }
.online-empty { margin:0; color:var(--muted); font-size:11px; }
@keyframes buzzerFlash { from { transform:scale(.96); filter:brightness(1); } to { transform:scale(1.13); filter:brightness(1.5); } }
@keyframes countdownPulse { 0%,100% { transform:scale(.95); filter:brightness(1); } 50% { transform:scale(1.08); filter:brightness(1.2); } }
@media (max-width:700px) { .seat { min-height:50px; }.online-panel { width:100%; max-width:none; }.next-button,.skip-button { margin:8px 0 0; }.host-countdown { top:18px; right:18px; width:66px; height:66px; font-size:38px; } }