* { box-sizing:border-box; } body { margin:0; background:#0e1426; color:#eef2ff; font:16px/1.7 system-ui,"PingFang SC",sans-serif; } header,main,footer { max-width:1200px; padding:24px; margin:auto; } header { padding-top:36px; } a { color:#ffdc67; } h1 { font-size:clamp(32px,5vw,54px); line-height:1.2; text-shadow:4px 4px #000; margin:12px 0; } .kicker { color:#ffdc67; font:14px monospace; } .lead { max-width:800px; color:#c9d2e7; } .watch-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(250px,1fr); gap:24px; } .watch-layout .qq-panel { margin-top:0; } aside { align-self:start; } .prize { font-size:26px; color:#ffdc67; text-align:center; font-weight:bold; } .gb-seats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; text-align:center; } .gb-seat { padding:12px; border:2px solid #455372; background:#10182c; overflow-wrap:anywhere; } .gb-seat h3 { min-height:2em; font-size:18px; } .ball { display:grid; place-items:center; width:90px; height:90px; margin:12px auto; border:6px solid #ffdc67; border-radius:50%; background:#63461e; font-weight:bold; color:#ffdc67; transition:transform .4s; } .revealed .ball { transform:rotateY(360deg); background:#ffdc67; color:#211b18; } .payout { color:#91e8bd; font-size:18px; min-height:2em; } .dialogue { display:flex; flex-direction:column; gap:12px; margin-top:20px; min-height:120px; } .bubble { max-width:85%; border:2px solid #475477; background:#27334e; padding:12px; overflow-wrap:anywhere; } .bubble.seat-1 { align-self:flex-end; border-color:#8f7444; background:#3b3227; } .bubble p { margin:4px 0; } :focus-visible { outline:3px solid #ffdc67; outline-offset:4px; } @media(max-width:820px) { .watch-layout { grid-template-columns:1fr; } } @media(max-width:450px) { header,main,footer { padding:16px; } .gb-seats { gap:10px; } .gb-seat { padding:8px; } } @media(prefers-reduced-motion:reduce) { .ball { transition:none; } }