:root {
  --bg: #ffffff;
  --bg2: #f8fafc;
  --bg3: #f1f5f9;
  --card: #ffffff;
  --border: #e2e8f0;
  --accent: #0ea5e9;
  --accent2: #7c3aed;
  --accent3: #10b981;
  --accent4: #f59e0b;
  --accent5: #ef4444;
  --text: #1e293b;
  --text2: #475569;
  --text3: #64748b;
  --sidebar-bg: #0f172a;
  --sidebar-fg: #cbd5e1;
  --sidebar-muted: #64748b;
  --sidebar-hover: #1e293b;
  --sidebar-width: 236px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px; min-height: 100vh; line-height: 1.6;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(14,165,233,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Auth gate */
#auth-gate {
  position: relative; z-index: 1; max-width: 460px;
  margin: 60px auto 40px; background: var(--card);
  border: 1.5px solid var(--border); border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10); overflow: hidden;
}
#auth-gate::before {
  content: ''; display: block; height: 4px;
  background: linear-gradient(90deg, var(--accent), #6366f1);
}
.auth-card-body { padding: 36px 40px 32px; }
.auth-header { text-align: center; margin-bottom: 28px; }
.auth-logo-tag {
  display: inline-block; font-family: Consolas, monospace;
  font-size: 0.72rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--accent); border: 2px solid var(--accent);
  padding: 3px 12px; border-radius: 4px; margin-bottom: 12px; font-weight: 700;
}
.auth-header h2 { font-size: 1.55rem; font-weight: 700; margin-bottom: 4px; }
.auth-header p  { color: var(--text3); font-size: 0.88rem; }
#auth-gate input {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 0.95rem; font-family: inherit;
  background: var(--bg2); margin-bottom: 12px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
#auth-gate input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14,165,233,0.12); background: #fff; }
#auth-btn, #reg-btn {
  width: 100%; padding: 11px;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  color: #fff; border: none; border-radius: 8px;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  letter-spacing: 0.3px; transition: opacity .2s, transform .1s;
  box-shadow: 0 2px 8px rgba(14,165,233,0.25);
}
#auth-btn:hover, #reg-btn:hover { opacity: 0.92; transform: translateY(-1px); }
#auth-btn:disabled, #reg-btn:disabled { opacity: 0.55; cursor: not-allowed; }
#auth-error, #auth-info {
  font-size: 0.84rem; margin-bottom: 14px;
  padding: 9px 12px; border-radius: 8px; display: none; line-height: 1.5;
}
#auth-error { background: #fef2f2; border: 1.5px solid #fecaca; color: var(--accent5); }
#auth-info  { background: #f0fdf4; border: 1.5px solid #bbf7d0; color: #15803d; }
.auth-help  { margin-top: 14px; font-size: 0.8rem; color: var(--text3); text-align: center; }
.auth-link  { color: var(--accent); cursor: pointer; background: none; border: none; font-weight: 600; padding: 0; }
.auth-link:hover { text-decoration: underline; }
.auth-mode-toggle {
  display: flex; margin-bottom: 22px;
  border: 1.5px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--bg3);
}
.auth-mode-btn {
  flex: 1; padding: 10px 8px; border: none; background: transparent;
  font-size: 0.88rem; font-weight: 700; cursor: pointer;
  color: var(--text3); transition: background .18s, color .18s;
}
.auth-mode-btn.active {
  background: var(--accent); color: #fff;
  border-radius: 8px; margin: 2px;
  box-shadow: 0 1px 6px rgba(14,165,233,0.3);
}
.auth-field { margin-bottom: 14px; }
.auth-field input { margin-bottom: 0; }
.auth-label {
  display: block; font-size: 0.76rem; font-weight: 700;
  color: var(--text2); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: 0.8px;
}

/* Status screens */
.status-screen {
  display: none; position: relative; z-index: 1;
  max-width: 420px; margin: 120px auto;
  background: var(--card); border-radius: 12px;
  padding: 40px 36px; text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
#pending-approval { border: 2px solid var(--accent4); }
#access-rejected  { border: 2px solid var(--accent5); }
#access-denied {
  display: none; position: relative; z-index: 1;
  max-width: 420px; margin: 120px auto;
  background: var(--card); border: 2px solid var(--accent5);
  border-radius: 12px; padding: 36px; text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.status-screen .st-icon { font-size: 2.8rem; margin-bottom: 14px; }
#pending-approval h2 { color: var(--accent4); margin-bottom: 10px; }
#access-rejected  h2 { color: var(--accent5); margin-bottom: 10px; }
#access-denied    h2 { color: var(--accent5); margin-bottom: 12px; }
.status-screen p { color: var(--text2); font-size: 0.92rem; margin-bottom: 8px; }
.status-screen .btn-back, #access-denied button {
  display: inline-block; padding: 10px 28px;
  border: none; border-radius: 8px; font-size: 0.95rem;
  font-weight: 600; cursor: pointer; margin-top: 8px;
}
#pending-approval .btn-back { background: var(--accent4); color: #fff; }
#access-rejected  .btn-back { background: var(--accent5); color: #fff; }
#access-denied    button   { background: var(--accent);  color: #fff; }

/* Dashboard shell */
#dashboard { display: none; position: relative; z-index: 1; }
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg); color: var(--sidebar-fg);
  overflow-y: auto; z-index: 100;
  display: flex; flex-direction: column;
  transition: transform 200ms ease;
}
#dashboard.sidebar-collapsed .sidebar      { transform: translateX(-100%); }
#dashboard.sidebar-collapsed .main-content { margin-left: 0; }

.sidebar-toggle {
  background: none; border: 1px solid #475569; color: #cbd5e1;
  padding: 4px 10px; border-radius: 4px; cursor: pointer;
  font-size: 1rem; line-height: 1; margin-right: 10px;
  font-family: inherit;
}
.sidebar-toggle:hover { background: #334155; color: #fff; }
.sidebar-brand {
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(148,163,184,0.12);
  display: flex; align-items: center; gap: 10px;
}
.brand-logo {
  font-family: Consolas, monospace; font-size: 0.7rem;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); border: 2px solid var(--accent);
  padding: 3px 9px; border-radius: 4px; font-weight: 700;
}
.brand-title { font-size: 0.95rem; font-weight: 700; color: #e2e8f0; }

.sidebar-nav { flex: 1; padding: 10px 0 20px; }
.nav-category {
  padding: 14px 20px 6px;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--sidebar-muted);
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px 9px 18px;
  font-size: 0.89rem; font-weight: 500;
  color: var(--sidebar-fg); cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  user-select: none;
}
.nav-item:hover { background: var(--sidebar-hover); color: #f1f5f9; }
.nav-item.active {
  background: var(--sidebar-hover);
  border-left-color: var(--accent);
  color: #fff; font-weight: 600;
}
.nav-icon { width: 18px; text-align: center; color: var(--sidebar-muted); }
.nav-item.active .nav-icon { color: var(--accent); }
.nav-badge {
  margin-left: auto; font-size: 0.62rem; font-weight: 700;
  padding: 1px 6px; border-radius: 10px;
  background: rgba(14,165,233,0.15); color: var(--accent);
  letter-spacing: 0.3px;
}
.nav-badge.legacy { background: rgba(245,158,11,0.18); color: #fbbf24; }

.sidebar-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(148,163,184,0.12);
  font-size: 0.75rem; color: var(--sidebar-muted);
}
.sidebar-footer a { color: var(--accent); text-decoration: none; }
.sidebar-footer a:hover { text-decoration: underline; }

.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh; display: flex; flex-direction: column;
  transition: margin-left 200ms ease;
}
.top-bar {
  position: sticky; top: 0;
  background: #1e293b; color: #e2e8f0;
  padding: 10px 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Consolas', monospace; font-size: 13px;
  z-index: 50; border-bottom: 1px solid rgba(148,163,184,0.15);
}
.top-bar .tb-crumb { color: #94a3b8; }
.top-bar button {
  background: none; border: 1px solid #475569;
  color: #94a3b8; padding: 4px 12px; border-radius: 4px;
  cursor: pointer; font-family: inherit; font-size: 12px;
}
.top-bar button:hover { background: #334155; color: #cbd5e1; }
.role-badge {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 0.72rem; font-weight: 700;
}
.badge-admin      { background: #dbeafe; color: #1e40af; }
.badge-instructor { background: #d1fae5; color: #065f46; }

.section-header {
  padding: 24px 28px 8px;
  border-bottom: 1px solid var(--border);
}
.section-header h1 { font-size: 1.4rem; margin-bottom: 2px; }
.section-header .crumb {
  font-size: 0.72rem; color: var(--text3);
  font-family: Consolas, monospace;
  text-transform: uppercase; letter-spacing: 1.2px;
}
.section-header p { color: var(--text2); font-size: 0.9rem; margin-bottom: 14px; }
.section-body { padding: 22px 28px 60px; max-width: 1400px; }
.section-pane { display: none; }
.section-pane.active { display: block; }

/* Stub cards */
.stub-card {
  background: var(--card); border: 2px dashed var(--border);
  border-radius: 14px; padding: 40px 36px;
  text-align: center; max-width: 640px; margin: 20px auto;
}
.stub-card .stub-icon {
  font-size: 2.2rem; display: inline-block;
  width: 64px; height: 64px; line-height: 64px;
  background: var(--bg3); border-radius: 50%; color: var(--accent);
  margin-bottom: 12px;
}
.stub-card h3 { margin: 6px 0; font-size: 1.15rem; }
.stub-card p  { color: var(--text2); font-size: 0.92rem; margin-bottom: 14px; }
.stub-card .stub-pill {
  display: inline-block; font-size: 0.7rem; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 3px 12px; border-radius: 20px;
  font-weight: 700; margin-bottom: 8px;
}
.stub-pill.soon   { background: #fef3c7; color: #92400e; }
.stub-pill.legacy { background: #dbeafe; color: #1e40af; }
.stub-card ul {
  text-align: left; max-width: 420px;
  margin: 10px auto 16px; color: var(--text2); font-size: 0.88rem;
}
.stub-card ul li { margin-bottom: 4px; }
.stub-card .btn-redirect {
  display: inline-block; padding: 10px 22px;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  color: #fff; border: none; border-radius: 8px;
  font-weight: 600; font-size: 0.92rem;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 8px rgba(14,165,233,0.25);
}
.stub-card .btn-redirect:hover { opacity: 0.92; }

/* Filters / controls / tables */
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.filters select, .filters input {
  padding: 8px 12px; border: 2px solid var(--border);
  border-radius: 8px; font-size: 0.9rem;
}
.filters select { min-width: 180px; }
.btn {
  padding: 8px 16px; border: none; border-radius: 8px;
  font-size: 0.9rem; cursor: pointer; font-weight: 600; font-family: inherit;
}
.btn-primary   { background: var(--accent); color: #fff; }
.btn-success   { background: var(--accent3); color: #fff; }
.btn-warn      { background: var(--accent4); color: #fff; }
.btn-danger    { background: var(--accent5); color: #fff; }
.btn-secondary { background: var(--bg3); color: var(--text2); }
.btn:hover { opacity: 0.9; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.inline-form { display: none; align-items: center; gap: 8px; margin-bottom: 12px; }
.inline-form.visible { display: flex; }
.inline-form input {
  padding: 8px 12px; border: 2px solid var(--border);
  border-radius: 8px; font-size: 0.9rem;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--card); }
.data-table th {
  text-align: left; padding: 10px 12px;
  background: var(--bg3); border-bottom: 2px solid var(--border);
  font-family: Consolas, monospace; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text3); white-space: nowrap;
}
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.data-table tr:hover { background: var(--bg2); }
.bulk-area { display: none; margin-bottom: 16px; }
.bulk-area.visible { display: block; }
.bulk-area textarea {
  width: 100%; height: 120px; padding: 12px;
  border: 2px solid var(--border); border-radius: 8px;
  font-family: Consolas, monospace; font-size: 0.85rem;
  margin-bottom: 8px; resize: vertical;
}
.status-msg {
  padding: 8px 12px; border-radius: 8px;
  font-size: 0.85rem; margin-bottom: 12px; display: none;
}
.status-msg.success { display: block; background: #dcfce7; color: #166534; }
.status-msg.error   { display: block; background: #fee2e2; color: #991b1b; }
#loading {
  position: relative; z-index: 1; text-align: center;
  padding: 120px 20px; color: var(--text3); font-size: 1.1rem;
}

@media (max-width: 900px) {
  :root { --sidebar-width: 56px; }
  .nav-item { padding: 10px 0; justify-content: center; }
  .nav-label, .nav-badge, .nav-category, .brand-title, .sidebar-footer { display: none; }
}
@media (max-width: 768px) {
  .filters { flex-direction: column; align-items: stretch; }
  .data-table { font-size: 0.8rem; }
  .section-body { padding: 18px 16px 40px; }
  .section-header { padding: 18px 16px 6px; }
}

/* ── Game Center ── */
.game-room-code { font-family:'Consolas',monospace; font-size:3rem; font-weight:700;
  letter-spacing:0.12em; color:var(--accent2); }
.game-timer-bar { height:10px; border-radius:6px; background:var(--bg3);
  overflow:hidden; margin:12px 0 4px; }
.game-timer-fill { height:100%; border-radius:6px;
  background:linear-gradient(90deg,#10b981,#f59e0b,#ef4444); transition:width .1s linear; }
.game-q-text { font-size:1.25rem; font-weight:700; padding:18px 20px;
  background:var(--bg2); border:2px solid var(--border); border-radius:12px; margin:14px 0; line-height:1.5; }
.game-opts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.game-opt { padding:16px 14px; border:none; border-radius:10px;
  font-size:1rem; font-weight:700; cursor:default; }
.game-opt.correct { outline:4px solid #10b981; }
.game-opt[data-c="0"] { background:#fde8ea; color:#9f1239; }
.game-opt[data-c="1"] { background:#dbeafe; color:#1e40af; }
.game-opt[data-c="2"] { background:#fef3c7; color:#92400e; }
.game-opt[data-c="3"] { background:#d1fae5; color:#065f46; }
.game-players-list { max-height:240px; overflow-y:auto;
  border:2px solid var(--border); border-radius:10px; }
.game-player-row { display:flex; justify-content:space-between; align-items:center;
  padding:9px 14px; border-bottom:1px solid var(--border); font-size:0.88rem; }
.game-player-row:last-child { border-bottom:none; }
.gm-recent-card { border:2px solid var(--border); border-radius:10px;
  padding:14px 18px; margin-bottom:10px; display:flex; align-items:center; gap:16px; }
.gm-recent-card .rc-code { font-family:'Consolas',monospace; font-size:1.4rem; font-weight:700; color:var(--accent2); }
.gm-recent-card .rc-meta { flex:1; font-size:0.85rem; color:var(--text2); }
.gm-recent-card .rc-status { font-size:0.8rem; font-weight:700;
  padding:3px 10px; border-radius:20px; }
.rc-lobby   { background:#dbeafe; color:#1e40af; }
.rc-active  { background:#d1fae5; color:#065f46; }
.rc-done    { background:var(--bg3); color:var(--text3); }
.gm-podium  { display:flex; justify-content:center; align-items:flex-end; gap:10px; margin:20px 0; }
.gm-podium-place { text-align:center; border-radius:10px 10px 0 0; padding:14px 12px;
  min-width:110px; max-width:140px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
.gm-p1 { background:linear-gradient(180deg,#fef3c7,#fde68a); min-height:160px; order:2; }
.gm-p2 { background:linear-gradient(180deg,#f1f5f9,#e2e8f0); min-height:130px; order:1; }
.gm-p3 { background:linear-gradient(180deg,#fff7ed,#fed7aa); min-height:115px; order:3; }
.gm-podium-place .pm-icon { font-size:1.6rem; flex-shrink:0; }
.gm-podium-place .pm-name { font-weight:700; font-size:0.78rem; margin:4px 0 2px; line-height:1.3; word-break:break-word; }
.gm-podium-place .pm-score { font-family:'Consolas',monospace; font-size:0.85rem; color:var(--text2); flex-shrink:0; }

/* ── Instructors Admin ── */
.instructor-section-title {
  font-size: 1rem; font-weight: 700; margin: 24px 0 12px;
  padding-bottom: 6px; border-bottom: 2px solid var(--border);
  color: var(--text);
}
.instructor-section-title:first-child { margin-top: 0; }
.course-checkbox-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.course-checkbox-list label {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1.5px solid var(--border);
  border-radius: 8px; cursor: pointer; font-size: 0.88rem;
  background: var(--card);
  text-transform: none; letter-spacing: 0;
  color: var(--text); font-weight: 400;
}
.course-checkbox-list label:has(input:checked) {
  border-color: var(--accent); background: #eff6ff;
}

/* ── Summary cards ── */
.summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.summary-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.summary-card .val { font-family: 'Consolas', monospace; font-size: 1.8rem; font-weight: 700; color: var(--accent); }
.summary-card .lbl { font-size: 0.85rem; color: var(--text3); }

/* ── Bonus / Tags ── */
.bonus-badge { display:inline-block; padding:2px 10px; border-radius:20px;
  font-family:'Consolas',monospace; font-size:0.85rem; font-weight:700;
  background:#fef3c7; color:#d97706; }
.bonus-badge.zero { background:var(--bg3); color:var(--text3); }
.bx-half { background:#dbeafe; color:#1d4ed8; }
.bx-full { background:#d1fae5; color:#065f46; }
.bx-reset { background:#fee2e2; color:#dc2626; }
.tag-pip { display:inline-block; font-size:0.75rem; vertical-align:middle; margin-left:3px; line-height:1; }
.has-tags-row { background:#fff5f5 !important; border-left:3px solid var(--accent5); }
.tag-badge { display:inline-block; background:#fee2e2; color:#dc2626; border-radius:20px; padding:2px 10px; font-size:0.82rem; font-weight:700; font-family:'Consolas',monospace; }
.tag-badge.zero { background:var(--bg3); color:var(--text3); }

/* ── Random Picker animations ── */
@keyframes orbFloat1 {
  0%,100% { transform:translate(0,0) scale(1); opacity:.6; }
  33%     { transform:translate(60px,-40px) scale(1.2); opacity:.8; }
  66%     { transform:translate(-30px,50px) scale(.85); opacity:.5; }
}
@keyframes orbFloat2 {
  0%,100% { transform:translate(0,0) scale(1); opacity:.5; }
  40%     { transform:translate(-50px,30px) scale(1.15); opacity:.7; }
  70%     { transform:translate(40px,-60px) scale(.9); opacity:.4; }
}
@keyframes borderGlow {
  0%,100% { box-shadow:0 0 20px rgba(124,58,237,.4),0 0 60px rgba(124,58,237,.15),inset 0 0 20px rgba(124,58,237,.05); }
  50%     { box-shadow:0 0 40px rgba(124,58,237,.75),0 0 110px rgba(124,58,237,.3),inset 0 0 30px rgba(124,58,237,.12); }
}
@keyframes scanSweep {
  0%   { top:0%;   opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { top:100%; opacity:0; }
}
@keyframes resultReveal {
  0%   { transform:scale(.72) rotateX(18deg); opacity:0; filter:blur(10px); }
  55%  { transform:scale(1.05) rotateX(-4deg); opacity:1; filter:blur(0); }
  78%  { transform:scale(.98) rotateX(1deg); }
  100% { transform:scale(1) rotateX(0deg); opacity:1; }
}
@keyframes nameReveal {
  0%   { opacity:0; filter:blur(14px); letter-spacing:.6em; transform:scale(1.35); }
  65%  { opacity:1; filter:blur(0);    letter-spacing:.04em; transform:scale(1.02); }
  100% { opacity:1; filter:blur(0);    letter-spacing:normal; transform:scale(1); }
}
@keyframes spotlightExpand {
  from { opacity:0; transform:scale(0); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes sparklePop {
  0%   { transform:rotate(var(--r)) translateY(0) scale(0); opacity:0; }
  30%  { opacity:1; transform:rotate(var(--r)) translateY(var(--d)) scale(1); }
  100% { transform:rotate(var(--r)) translateY(calc(var(--d)*2)) scale(0); opacity:0; }
}
#pickerResultCard { animation:resultReveal .65s cubic-bezier(.34,1.4,.64,1) forwards; }
#pickerResultName { animation:nameReveal .75s cubic-bezier(.22,1,.36,1) .25s both; }
@keyframes confetti3D {
  from { transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity:1; }
  to   { transform:translate3d(var(--tx),var(--ty),var(--tz)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(.12); opacity:0; }
}
@keyframes shatter3D {
  0%   { transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); opacity:1; }
  55%  { opacity:.7; }
  100% { transform:translate3d(var(--tx),var(--ty),var(--tz)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(0); opacity:0; }
}
@keyframes shockRing3D {
  0%   { transform:perspective(500px) rotateX(68deg) scale(0);   opacity:.95; }
  70%  { opacity:.35; }
  100% { transform:perspective(500px) rotateX(68deg) scale(4.8); opacity:0; }
}
@keyframes exLabelWin {
  0%   { opacity:0; transform:translate(-50%,-50%) perspective(600px) rotateX(55deg) scale(.28); filter:blur(10px); }
  32%  { opacity:1; transform:translate(-50%,-50%) perspective(600px) rotateX(-6deg) scale(1.28); filter:blur(0); }
  58%  { opacity:1; transform:translate(-50%,-50%) perspective(600px) rotateX(2deg)  scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) perspective(600px) rotateX(-12deg) scale(1.45); }
}
@keyframes exLabelWrong {
  0%   { opacity:0; transform:translate(-50%,-50%) perspective(600px) rotateZ(-20deg) scale(.22); filter:blur(12px); }
  28%  { opacity:1; transform:translate(-50%,-50%) perspective(600px) rotateZ(5deg)   scale(1.24); filter:blur(0); }
  52%  { opacity:1; transform:translate(-50%,-50%) perspective(600px) rotateZ(-2deg)  scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) perspective(600px) rotateZ(8deg)   scale(.6); }
}
@keyframes overlayFlashWin   { 0%,100%{background:transparent;} 12%{background:rgba(16,185,129,.2);} }
@keyframes overlayFlashWrong { 0%,100%{background:transparent;} 12%{background:rgba(245,158,11,.18);} }