/* Curiosand Live: classroom quiz screens (host projector, student phone, teacher dashboard). */
.live-wrap { max-width: 72rem; margin: 0 auto; }
.live-card { background: rgba(30, 41, 59, .72); border: 1px solid rgba(255, 255, 255, .1); border-radius: 1.25rem; padding: 1.25rem; }
.live-big { font-size: clamp(2.2rem, 7vw, 5rem); font-weight: 900; letter-spacing: .06em; font-variant-numeric: tabular-nums; line-height: 1; }
.live-q { font-size: clamp(1.25rem, 3.2vw, 2.3rem); font-weight: 800; line-height: 1.25; }
.live-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .8rem; }
.live-opt { display: flex; align-items: center; gap: .8rem; min-height: 4.5rem; padding: .8rem 1rem; border-radius: 1rem; color: #fff; font-weight: 800;
  font-size: clamp(1rem, 2.2vw, 1.4rem); text-align: left; border: 0; position: relative; overflow: hidden; transition: transform .1s, opacity .2s, filter .2s; }
button.live-opt { cursor: pointer; } button.live-opt:active { transform: scale(.97); }
.live-opt .letter { flex: none; width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: rgba(255, 255, 255, .25); display: grid; place-items: center; font-size: 1.2rem; }
.live-opt .bar { position: absolute; left: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, .85); }
.live-opt .count { margin-left: auto; font-size: 1.3rem; }
.live-opt.dim { opacity: .35; filter: grayscale(.4); }
.live-opt.right { outline: 4px solid #fff; box-shadow: 0 0 0 7px rgba(52, 211, 153, .65); }
.opt-0 { background: #0284c7; } .opt-1 { background: #d97706; } .opt-2 { background: #059669; } .opt-3 { background: #7c3aed; }
.live-timer { height: 10px; border-radius: 999px; background: rgba(148, 163, 184, .3); overflow: hidden; }
.live-timer > span { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #eab308, #ef4444); transition: width .9s linear; }
.live-chip { display: inline-flex; align-items: center; gap: .35rem; margin: .25rem; padding: .35rem .75rem; border-radius: 999px; background: rgba(56, 189, 248, .18);
  border: 1px solid rgba(56, 189, 248, .4); font-weight: 700; cursor: pointer; animation: livepop .35s ease-out; }
.live-chip:hover { background: rgba(239, 68, 68, .25); border-color: #ef4444; }
@keyframes livepop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.live-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .75rem 1.3rem; border-radius: .9rem; font-weight: 800;
  background: linear-gradient(90deg, #0ea5e9, #6366f1); color: #fff; border: 0; cursor: pointer; font-size: 1rem; text-decoration: none; }
.live-btn:disabled { opacity: .45; cursor: not-allowed; }
.live-btn.ghost { background: rgba(148, 163, 184, .2); color: inherit; }
.live-btn.danger { background: #dc2626; }
.live-rank { display: flex; align-items: center; gap: .8rem; padding: .55rem .9rem; border-radius: .8rem; background: rgba(15, 23, 42, .55); margin-bottom: .4rem; font-weight: 700; }
.live-rank .n { width: 2rem; text-align: center; font-weight: 900; }
.live-rank .s { margin-left: auto; font-variant-numeric: tabular-nums; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 1rem; margin: 1.5rem 0; }
.podium > div { text-align: center; width: 9rem; }
.podium .block { border-radius: 1rem 1rem 0 0; display: grid; place-items: center; font-size: 2.5rem; font-weight: 900; color: #fff; }
.podium .p1 .block { height: 11rem; background: linear-gradient(#fbbf24, #d97706); }
.podium .p2 .block { height: 8rem; background: linear-gradient(#cbd5e1, #64748b); }
.podium .p3 .block { height: 6rem; background: linear-gradient(#fdba74, #c2410c); }
.live-input { width: 100%; padding: .9rem 1rem; border-radius: .9rem; font-size: 1.3rem; font-weight: 700; text-align: center; background: #0f172a; color: #f8fafc; border: 2px solid #334155; }
.live-input:focus { outline: none; border-color: #38bdf8; }
.live-msg { min-height: 1.4rem; font-weight: 700; color: #fca5a5; }
.live-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.live-table th, .live-table td { padding: .45rem .6rem; border-bottom: 1px solid rgba(148, 163, 184, .25); text-align: left; }
.pulse { animation: livepulse 1.6s ease-in-out infinite; } @keyframes livepulse { 50% { opacity: .55; } }
:root[data-theme="light"] .live-card { background: #ffffff; border-color: var(--lt-line); box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .25); }
:root[data-theme="light"] .live-rank { background: var(--lt-tint); }
:root[data-theme="light"] .live-input { background: #fff; color: var(--lt-text); border-color: #cbd5e1; }
:root[data-theme="light"] .live-msg { color: #b91c1c; }
:root[data-theme="light"] .live-chip { background: #e0f2fe; border-color: #7dd3fc; color: #0c4a6e; }
:root[data-theme="light"] .live-btn.ghost { background: #e2e8f0; color: var(--lt-text); }
@media (prefers-reduced-motion: reduce) { .live-chip, .pulse { animation: none; } }
.live-sub { background: rgba(15, 23, 42, .35); border: 1px solid rgba(148, 163, 184, .3); }
:root[data-theme="light"] .live-sub { background: #f8fafc; border-color: var(--lt-line); }

/* Teacher trial: "ends soon" banner, "trial ended" columns, and the keep-going request form */
.trial-soon { background: rgba(250, 204, 21, .1); border: 1px solid rgba(250, 204, 21, .45); border-radius: .8rem; padding: .8rem 1rem; color: #fde68a; }
.trial-col { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: .7rem; padding: .7rem .9rem; color: #cbd5e1; }
.trial-col ul { list-style: disc; padding-left: 1.1rem; margin: 0; }
.trial-col li { margin: .15rem 0; }
.keep-going { display: block; }
.keep-going > .live-btn { margin: .25rem .4rem .25rem 0; }
.keep-going .live-input { font-size: 1rem; text-align: left; padding: .55rem .7rem; width: 100%; }
.keep-going label { color: #cbd5e1; display: block; }
:root[data-theme="light"] .trial-soon { background: #fefce8; border-color: #fde68a; color: #713f12; }
:root[data-theme="light"] .trial-col { background: #f8fafc; border-color: #e2e8f0; color: #334155; }
:root[data-theme="light"] .keep-going label { color: #334155; }