/* assets/css/videowall.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html,body { width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text); }
body { display:flex;flex-direction:column; }

header { flex-shrink:0;background:var(--bg2);padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border); }
.header-left { display:flex;align-items:center;gap:1rem; }
.brand { display:flex;align-items:center;gap:.5rem; }
.brand-icon { width:38px;height:38px;background:linear-gradient(135deg,var(--accent),var(--pink));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem; }
.brand-text { font-size:1.3rem;font-weight:800;letter-spacing:-.5px;color:var(--text); }
.brand-text span { color:var(--accent); }
.ev-name { color:var(--muted2);font-size:.8rem;font-weight:500;background:var(--surface);border:1px solid var(--border2);padding:.35rem .85rem;border-radius:99px; }
.clock { color:var(--text);font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums;font-family:ui-monospace,'Courier New',monospace;background:var(--surface);border:1px solid var(--border2);padding:.5rem 1rem;border-radius:var(--radius); }

#lottery-banner { flex-shrink:0;display:none;background:rgba(245,158,11,0.18);padding:.85rem 2rem;font-size:1.1rem;font-weight:700;text-align:center;color:var(--gold);letter-spacing:.5px;border-bottom:1px solid rgba(245,158,11,0.3);animation:bannerPulse 2s ease-in-out infinite; }
@keyframes bannerPulse { 0%,100%{opacity:.85}50%{opacity:1} }

#grid { flex:1;display:grid;padding:.75rem;gap:.5rem;overflow:hidden;background:var(--bg); }

.tile { border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;position:relative;border:1px solid transparent;overflow:hidden;will-change:background-color,border-color;transition:background .3s ease,border-color .3s ease; }
.tile .num { font-size:1em;line-height:1;font-weight:800; }
.tile .lbl { font-size:.48em;font-weight:500;margin-top:.2em;opacity:.8;line-height:1;text-transform:uppercase;letter-spacing:.5px; }
.tile .dot { position:absolute;top:4px;right:4px;width:10px;height:10px;background:var(--accent);border-radius:50%;border:2px solid var(--bg);display:none; }

.tile.none { background:var(--surface);color:var(--muted);border-color:var(--border); }
.tile.registered { background:rgba(59,130,246,0.18);color:var(--blue);border-color:rgba(59,130,246,0.4); }
.tile.read { background:rgba(245,158,11,0.18);color:var(--gold);border-color:rgba(245,158,11,0.4); }
.tile.unread { background:rgba(236,72,153,0.22);color:var(--pink);border-color:rgba(236,72,153,0.5);box-shadow:0 0 20px rgba(236,72,153,0.25);animation:unreadPulse 2s ease-in-out infinite alternate; }
.tile.unread .dot { display:block; }
@keyframes unreadPulse { from{opacity:.85}to{opacity:1} }
.tile.winner { background:rgba(245,158,11,0.25);color:var(--gold);border-color:var(--gold);box-shadow:0 0 24px rgba(245,158,11,0.35);animation:winnerPulse 1.5s ease-in-out infinite alternate;z-index:2; }
@keyframes winnerPulse { from{opacity:.9;transform:scale(1)}to{opacity:1;transform:scale(1.02)} }
.tile.winner .lbl { opacity:1;font-weight:700; }
.tile.claimed { background:rgba(16,185,129,0.2);color:var(--green);border-color:rgba(16,185,129,0.5);animation:none; }

.legend { flex-shrink:0;display:flex;gap:1.25rem;justify-content:center;align-items:center;padding:.65rem 1rem;flex-wrap:wrap;background:var(--bg2);border-top:1px solid var(--border); }
.li { display:flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:500;color:var(--muted2); }
.ld { width:14px;height:14px;border-radius:4px;flex-shrink:0;border:1px solid rgba(255,255,255,0.1); }

footer { flex-shrink:0;text-align:center;font-size:.68rem;color:var(--muted);padding:.5rem;background:var(--bg2);border-top:1px solid var(--border); }
footer a { color:var(--muted2);text-decoration:none; }
footer a:hover { color:var(--accent); }

#lottery-overlay,#match-overlay { display:none;position:fixed;inset:0;z-index:100;background:rgba(8,8,15,0.93);align-items:center;justify-content:center;flex-direction:column; }
#lottery-overlay.active,#match-overlay.active { display:flex; }

.lottery-vw-box { background:var(--surface);border:2px solid rgba(245,158,11,0.4);border-radius:var(--radius-lg);padding:3rem 2.5rem;text-align:center;max-width:600px;width:90%;box-shadow:0 0 60px rgba(245,158,11,0.15),var(--shadow-lg);animation:lotPop .7s cubic-bezier(0.34,1.56,0.64,1);z-index:102; }
@keyframes lotPop { from{transform:scale(0.3);opacity:0}to{transform:scale(1);opacity:1} }
.lot-vw-emoji { font-size:5rem;display:block;margin-bottom:1rem; }
.lot-vw-title { color:var(--gold);font-size:2.5rem;font-weight:900;margin-bottom:.5rem;letter-spacing:2px; }
.lot-vw-name { color:var(--text);font-size:1.5rem;font-weight:700;margin-bottom:.5rem; }
.lot-vw-winners { margin-top:1.5rem; }
.lot-vw-winner-chip { display:inline-block;background:rgba(245,158,11,0.15);border:2px solid var(--gold);border-radius:99px;padding:.6rem 1.4rem;font-size:1.2rem;font-weight:800;color:var(--gold);margin:.3rem;animation:chipIn .5s cubic-bezier(0.34,1.56,0.64,1) backwards; }
@keyframes chipIn { from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1} }

.match-vw-box { text-align:center;max-width:700px;width:90%;animation:matchVwPop .8s cubic-bezier(0.34,1.56,0.64,1);z-index:102; }
@keyframes matchVwPop { from{transform:scale(0.2);opacity:0}to{transform:scale(1);opacity:1} }
.match-vw-hearts { font-size:6rem;display:block;margin-bottom:1rem;animation:heartbeatVw 1s ease-in-out infinite alternate; }
@keyframes heartbeatVw { from{transform:scale(1)}to{transform:scale(1.12)} }
.match-vw-title { font-size:5rem;font-weight:900;color:var(--pink);letter-spacing:6px;margin-bottom:.5rem; }
.match-vw-sub { color:var(--text);font-size:1.6rem;font-weight:700;opacity:.9; }
.match-vw-detail { color:var(--pink);font-size:1.1rem;margin-top:1rem;opacity:.7; }

#vw-confetti,#match-confetti-canvas { position:fixed;inset:0;pointer-events:none;display:none;z-index:201; }

.error-screen { display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;padding:2rem;text-align:center; }
.error-icon { font-size:4rem;margin-bottom:1rem; }
.error-title { font-size:1.5rem;font-weight:700;color:var(--accent);margin-bottom:.5rem; }
.error-text { color:var(--muted2);font-size:.95rem;max-width:400px;line-height:1.6; }
.error-code { margin-top:1rem;font-family:ui-monospace,monospace;font-size:.8rem;color:var(--muted);background:var(--surface);padding:.5rem 1rem;border-radius:var(--radius);border:1px solid var(--border); }

  #quiz-overlay {
    display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.95);
    z-index: 2000; color: white; text-align: center; flex-direction: column;
    justify-content: center; align-items: center; font-family: sans-serif;
  }
  .quiz-answer {
    flex: 1 1 40%; background: #374151; border-radius: 12px; padding: 30px;
    font-size: 2.5rem; border: 4px solid transparent; transition: all 0.3s;
  }
  .quiz-answer.correct { background: #10b981; border-color: #059669; }
  .quiz-answer.wrong { opacity: 0.4; }
  .quiz-bar-container {
    height: 20px; background: rgba(255,255,255,0.2); border-radius: 10px;
    margin-top: 15px; overflow: hidden; position: relative;
  }
  .quiz-bar {
    height: 100%; background: #3b82f6; width: 0%; transition: width 0.5s ease-out;
    display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-size: 1rem;
  }