.live-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(248, 250, 252, 0.96);
border: 1px solid rgba(15, 23, 42, 0.08);
color: #334155;
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
@media (hover: hover) and (pointer: fine) {
.live-trigger:hover { background: #fff; border-color: rgba(10, 132, 255, 0.35); }
}
.live-trigger:focus-visible { outline: 2px solid var(--accent, #0a84ff); outline-offset: 2px; }
.live-trigger-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; flex: 0 0 auto; }
.live-trigger.is-live {
border-color: rgba(52, 199, 89, 0.5);
color: #166534;
background: linear-gradient(180deg, rgba(52, 199, 89, 0.14), rgba(52, 199, 89, 0.08));
box-shadow: 0 6px 18px rgba(52, 199, 89, 0.14);
}
.live-trigger.is-live .live-trigger-dot,
.live-panel .live-trigger-dot { background: #34c759; }
.live-trigger-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; }
.live-trigger-sep { color: rgba(22, 101, 52, 0.5); }
.live-trigger-count { font-weight: 600; }
.live-trigger-timer {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-variant-numeric: tabular-nums;
padding: 2px 8px; border-radius: 999px;
background: rgba(255, 255, 255, 0.85); color: #0f172a;
}
.live-trigger-timer.is-urgent { background: var(--danger, #ff453a); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
.live-trigger.is-live .live-trigger-dot { animation: live-pulse 2s ease-in-out infinite; }
.live-trigger-timer.is-urgent { animation: live-blink 1s steps(2) infinite; }
@keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45); } 50% { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); } }
@keyframes live-blink { 50% { opacity: .55; } }
}
.live-btn {
font: inherit; font-size: 13px; font-weight: 700;
padding: 11px 16px; border-radius: 999px; cursor: pointer;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(15, 23, 42, 0.10);
color: var(--text, #111318);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
@media (hover: hover) and (pointer: fine) {
.live-btn:hover:not(:disabled) { border-color: rgba(10, 132, 255, 0.4); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); }
}
.live-btn:active:not(:disabled) { transform: scale(.98); }
.live-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.live-btn--primary {
background: linear-gradient(180deg, #2b95ff, var(--accent, #0a84ff));
border-color: transparent; color: #fff; width: 100%; padding: 13px 16px;
box-shadow: 0 10px 24px rgba(10, 132, 255, 0.28);
}
@media (hover: hover) and (pointer: fine) {
.live-btn--primary:hover:not(:disabled) { background: linear-gradient(180deg, #1f8dff, var(--accent-strong, #0066cc)); border-color: transparent; }
}
.live-btn--danger { color: var(--danger, #ff453a); border-color: rgba(255, 69, 58, 0.3); background: rgba(255, 69, 58, 0.06); box-shadow: none; }
.live-panel {
position: fixed;
right: 24px;
top: 96px;
width: 300px;
max-height: calc(100vh - 120px);
max-height: calc(100dvh - 120px);
overflow-y: auto;
z-index: 1302;
background: var(--surface-strong, rgba(255, 255, 255, 0.96));
border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
border-radius: var(--radius-lg, 24px);
box-shadow: var(--shadow-lg, 0 30px 80px rgba(15, 23, 42, 0.12));
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 12px;
color: var(--text, #111318);
font-size: 14px;
}
.live-panel[hidden], .live-board[hidden] { display: none !important; }
.live-panel-head { display: flex; justify-content: space-between; align-items: center; }
.live-panel-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.live-panel-x { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted, #667085); padding: 0 4px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) {
.live-panel-x:hover { color: var(--text, #111318); }
}
.live-panel-copy { margin: 0; color: var(--muted-strong, #475467); line-height: 1.5; }
.live-panel-err { margin: 0; min-height: 1.2em; color: var(--danger, #ff453a); font-size: 13px; }
.live-join-card {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 14px 12px 12px;
border-radius: var(--radius-md, 18px);
background: linear-gradient(180deg, rgba(10, 132, 255, 0.06), rgba(10, 132, 255, 0.02));
border: 1px solid rgba(10, 132, 255, 0.14);
}
.live-code {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-weight: 700; font-size: 44px; letter-spacing: .28em; line-height: 1;
padding-left: .28em;
color: var(--text, #111318);
}
.live-qr { display: block; width: 168px; height: 168px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
.live-qr svg, .live-qr canvas, .live-qr img { width: 156px; height: 156px; }
.arena-builder-actions .live-trigger { align-self: center; }
.live-board {
position: fixed;
left: 24px;
bottom: 24px;
width: 300px;
z-index: 1301;
background: var(--surface-strong, rgba(255, 255, 255, 0.96));
border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
border-radius: var(--radius-lg, 24px);
box-shadow: var(--shadow-lg, 0 30px 80px rgba(15, 23, 42, 0.14));
padding: 14px 16px 12px;
color: var(--text, #111318);
font-size: 14px;
opacity: 0;
transform: translateY(16px) scale(.98);
transition: opacity .24s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
pointer-events: none;
}
.live-board.is-on { opacity: 1; transform: none; pointer-events: auto; }
.live-board-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-weight: 700; cursor: grab; user-select: none; touch-action: none; }
.live-panel-head { cursor: grab; user-select: none; touch-action: none; }
.live-board.is-dragging, .live-panel.is-dragging { cursor: grabbing; transition: none; box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22); }
.live-board.is-dragging .live-board-head, .live-panel.is-dragging .live-panel-head { cursor: grabbing; }
.live-board-sub { font-size: 12px; font-weight: 600; color: var(--muted, #667085); letter-spacing: .04em; text-transform: uppercase; }
.live-board-row {
display: grid; grid-template-columns: 28px minmax(0, 1fr) 22px 34px; align-items: center; gap: 8px;
padding: 7px 0; border-top: 1px solid var(--line, rgba(15, 23, 42, 0.08));
}
.live-board-row:first-of-type { border-top: 0; }
.live-board-row.is-left { color: var(--muted, #667085); }
.live-board-row.is-empty { grid-template-columns: 1fr; color: var(--muted, #667085); text-align: center; }
.live-board-rank { font-size: 15px; text-align: center; color: var(--muted-strong, #475467); font-weight: 700; }
.live-board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.live-board-streak { margin-left: 6px; font-size: 12px; color: #b45309; font-weight: 700; }
.live-board-last { text-align: center; font-weight: 800; }
.live-board-last.is-right { color: #16a34a; }
.live-board-last.is-wrong { color: var(--danger, #ff453a); }
.live-board-last.is-none { color: #cbd5e1; }
.live-board-score { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; }
.live-board-foot { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line, rgba(15, 23, 42, 0.08)); }
.live-board-count { font-size: 12.5px; font-weight: 600; color: var(--muted-strong, #475467); }
.live-board-foot .live-btn { padding: 9px 12px; font-size: 12.5px; }
.live-board-foot .live-btn--primary { width: auto; }
.live-board.is-final { width: 340px; padding: 18px 20px 16px; border-color: rgba(10, 132, 255, 0.25); box-shadow: 0 30px 80px rgba(10, 132, 255, 0.18); }
.live-board.is-final .live-board-head { font-size: 18px; margin-bottom: 10px; }
.live-board.is-final .live-board-row { padding: 9px 0; font-size: 15px; }
.live-board.is-final .live-board-row:first-of-type .live-board-name { font-weight: 800; font-size: 17px; }
.live-board.is-final .live-board-row:first-of-type .live-board-score { font-size: 19px; color: var(--accent-strong, #0066cc); }
@media (prefers-reduced-motion: no-preference) {
.live-board.is-final.is-on .live-board-row { animation: live-row-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.live-board.is-final.is-on .live-board-row:nth-child(2) { animation-delay: .08s; }
.live-board.is-final.is-on .live-board-row:nth-child(3) { animation-delay: .16s; }
.live-board.is-final.is-on .live-board-row:nth-child(4) { animation-delay: .24s; }
.live-board.is-final.is-on .live-board-row:nth-child(5) { animation-delay: .32s; }
.live-board.is-final.is-on .live-board-row:nth-child(n+6) { animation-delay: .4s; }
@keyframes live-row-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .live-board { transition: none; } }
.live-toast {
position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
z-index: 1303; opacity: 0; pointer-events: none;
background: #111318; color: #fff; padding: 12px 16px; border-radius: 14px;
font-size: 14px; max-width: min(90vw, 520px); box-shadow: var(--shadow-md, 0 18px 40px rgba(15, 23, 42, 0.18));
transition: opacity .2s ease, transform .2s ease;
}
.live-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 720px) {
.live-panel { right: 12px; left: 12px; width: auto; top: auto; bottom: 12px; max-height: 70vh; }
.live-board { left: 12px; right: 12px; width: auto; bottom: 12px; }
}
.live-board-away { margin-left: 6px; font-size: 11px; font-weight: 700; color: #b45309; text-transform: uppercase; letter-spacing: .04em; }
.hoad-choice-pct--live { background: rgba(10, 132, 255, 0.10); color: var(--accent-strong, #0066cc); }
.arena-live-history-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); font-size: 13.5px; }
.arena-live-history-item:last-child { border-bottom: 0; }
.arena-live-history-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.arena-live-history-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; letter-spacing: .14em; color: var(--text, #111318); }
.arena-live-history-sets { color: var(--muted-strong, #475467); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-live-history-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: rgba(52, 199, 89, 0.12); color: #166534; }
.arena-live-history-meta { display: flex; gap: 12px; flex: 0 0 auto; font-size: 12.5px; color: var(--muted, #667085); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
.arena-live-history-item { flex-direction: column; align-items: flex-start; gap: 4px; }
}
.live-admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.live-admin-head h3 { margin: 0 0 4px; font-size: 20px; }
.live-admin-head p { margin: 0; color: var(--muted-strong, #475467); font-size: 14px; }
.live-admin-head select { font: inherit; font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.12); background: #fff; }
.live-admin-now { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(248, 250, 252, 0.96); border: 1px solid rgba(15, 23, 42, 0.08); color: #475467; }
.live-admin-now .live-trigger-dot { background: #94a3b8; }
.live-admin-now.is-live { color: #166534; border-color: rgba(52, 199, 89, 0.5); background: rgba(52, 199, 89, 0.10); }
.live-admin-now.is-live .live-trigger-dot { background: #34c759; }
.live-admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.live-admin-tile { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 18px; padding: 14px 16px; display: grid; gap: 2px; }
.live-admin-tile strong { font-size: 26px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.live-admin-tile span { font-size: 12.5px; font-weight: 600; color: var(--muted-strong, #475467); text-transform: uppercase; letter-spacing: .05em; }
.live-admin-tile small { font-size: 12px; color: var(--muted, #667085); }
.live-admin-sub { margin: 18px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-strong, #475467); }
.live-admin-table { overflow-x: auto; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 14px; background: rgba(255, 255, 255, 0.92); }
.live-admin-table table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.live-admin-table th, .live-admin-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); white-space: nowrap; }
.live-admin-table th { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #667085); background: rgba(248, 250, 252, 0.9); }
.live-admin-table tr:last-child td { border-bottom: 0; }
.live-admin-table .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; letter-spacing: .1em; }
.live-admin-state { padding: 18px; color: var(--muted, #667085); font-size: 14px; }
.live-admin-state--error { color: var(--danger, #ff453a); }
.live-av { display: inline-block; margin-right: 6px; font-size: 16px; vertical-align: -1px; }
.live-board.is-final .live-board-row:first-of-type .live-av { font-size: 22px; }
.live-av--img { border-radius: 50%; vertical-align: -5px; object-fit: cover; background: #eef2f7; }
.live-board.is-final .live-board-row:first-of-type .live-av--img { width: 28px; height: 28px; vertical-align: -8px; }
.live-panel-lede { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text, #111318); }
.live-panel-copy--quiet { font-size: 12.5px; color: var(--muted, #667085); text-align: center; }
.live-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: live-step; }
.live-steps li {
counter-increment: live-step;
display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: start;
}
.live-steps li::before {
content: counter(live-step);
grid-row: 1 / span 2;
display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
font-size: 13px; font-weight: 800; color: var(--accent-strong, #0066cc);
background: var(--accent-soft, rgba(10, 132, 255, 0.10)); border: 1px solid rgba(10, 132, 255, 0.22);
}
.live-steps strong { font-size: 13.5px; line-height: 1.3; padding-top: 4px; }
.live-steps span { grid-column: 2; font-size: 12.5px; line-height: 1.45; color: var(--muted-strong, #475467); }
.live-steps span b { color: var(--text, #111318); font-weight: 700; }
.live-checklist { list-style: none; margin: 0; padding: 10px 12px; display: grid; gap: 8px; border-radius: 14px; background: rgba(248, 250, 252, 0.9); border: 1px solid var(--line, rgba(15, 23, 42, 0.08)); }
.live-checklist[hidden] { display: none; }
.live-checklist li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 12.5px; line-height: 1.4; color: var(--muted-strong, #475467); }
.live-checklist li.is-done { color: var(--muted, #667085); }
.live-checklist li.is-todo { color: var(--text, #111318); font-weight: 600; }
.live-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800; border: 1.5px solid #cbd5e1; color: #fff; }
.live-checklist li.is-done .live-check { background: #34c759; border-color: #34c759; }
.live-checklist li.is-todo .live-check { border-color: var(--accent, #0a84ff); }
.live-coach {
display: inline-flex; align-items: center; gap: 2px;
padding: 0 4px 0 0; border-radius: 999px;
background: var(--accent-soft, rgba(10, 132, 255, 0.10)); border: 1px solid rgba(10, 132, 255, 0.25);
max-width: 100%;
}
.live-coach-main { font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-strong, #0066cc); background: transparent; border: 0; padding: 9px 6px 9px 12px; cursor: pointer; text-align: left; }
.live-coach-main b { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; margin-right: 6px; border-radius: 999px; background: var(--accent, #0a84ff); color: #fff; }
.live-coach-x { font: inherit; font-size: 17px; line-height: 1; color: var(--accent-strong, #0066cc); background: transparent; border: 0; padding: 4px 8px; border-radius: 999px; cursor: pointer; opacity: .7; }
@media (hover: hover) and (pointer: fine) {
.live-coach-x:hover { opacity: 1; background: rgba(10, 132, 255, 0.12); }
}
.live-panel.is-page { top: calc(var(--nav-offset, 122px) + 12px); max-height: calc(100vh - var(--nav-offset, 122px) - 36px); max-height: calc(100dvh - var(--nav-offset, 122px) - 36px); }
.live-peek {
position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1304;
display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px;
background: #111318; color: #fff; font-size: 14px; font-weight: 700;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
}
.live-peek[hidden] { display: none; }
.live-peek .live-btn { padding: 8px 14px; font-size: 13px; }
.live-finale {
position: fixed; inset: 0; z-index: 1400;
display: grid; place-items: center; padding: 24px;
background: rgba(15, 23, 42, 0.42);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
animation: live-finale-in .35s ease both;
}
.live-finale-rain { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.live-finale-piece {
position: absolute; top: -6vh; width: 12px; height: 22px; border-radius: 4px; opacity: .95;
animation-name: live-finale-fall; animation-timing-function: cubic-bezier(.25, .6, .4, 1); animation-fill-mode: forwards;
}
.live-finale-inner { position: relative; z-index: 1; width: min(560px, 100%); display: grid; justify-items: center; gap: 14px; }
.live-finale-title {
color: #fff; font-size: clamp(38px, 6vw, 72px); font-weight: 900; line-height: 1; text-align: center;
text-shadow: 0 8px 28px rgba(15, 23, 42, 0.42), 0 0 34px rgba(52, 199, 89, 0.55);
}
.live-finale-sub { margin: 0; color: rgba(255, 255, 255, 0.92); font-size: 17px; font-weight: 600; text-align: center; text-shadow: 0 2px 10px rgba(15, 23, 42, 0.4); }
.live-finale-card {
width: 100%; max-height: 52vh; overflow-y: auto;
background: rgba(255, 255, 255, 0.97); border-radius: 28px; padding: 10px 22px;
box-shadow: 0 40px 100px rgba(15, 23, 42, 0.35);
color: var(--text, #111318);
}
.live-finale-row {
display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
padding: 13px 0; border-top: 1px solid rgba(15, 23, 42, 0.08); font-size: 19px;
animation: live-finale-row .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.18s + var(--i, 0) * .09s);
}
.live-finale-row:first-child { border-top: 0; }
.live-finale-rank { font-size: 24px; text-align: center; font-weight: 800; color: var(--muted-strong, #475467); }
.live-finale-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-finale-name .live-av { margin-right: 0; font-size: 26px; }
.live-finale-name .live-av--img { width: 30px; height: 30px; vertical-align: middle; }
.live-finale-score { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.live-finale-row.is-first { font-size: 24px; padding: 16px 0; }
.live-finale-row.is-first .live-finale-rank { font-size: 32px; }
.live-finale-row.is-first .live-finale-score { font-size: 34px; color: var(--accent-strong, #0066cc); }
.live-finale-row.is-first .live-av { font-size: 34px; }
.live-finale-row.is-first .live-av--img { width: 40px; height: 40px; }
.live-finale-done { width: auto; min-width: 180px; padding: 15px 40px; font-size: 17px; margin-top: 4px; }
@keyframes live-finale-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes live-finale-row { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes live-finale-fall {
0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
100% { transform: translate3d(var(--drift, 0), 112vh, 0) rotate(var(--spin, 540deg)); }
}
@media (prefers-reduced-motion: reduce) { .live-finale, .live-finale-row { animation: none; } }
.live-panel { width: 328px; gap: 14px; padding: 16px 16px 14px; }
.live-panel-x, .live-join, .live-join-qr, .live-link, .live-seg button, .live-switch-row, .live-end, .live-person-x {
box-shadow: none; transform: none;
}
@media (hover: hover) and (pointer: fine) {
.live-join:hover,
.live-join-qr:hover,
.live-link:hover,
.live-seg button:hover,
.live-switch-row:hover,
.live-end:hover,
.live-person-x:hover { transform: none; }
}
.live-idle, .live-room { display: grid; gap: 14px; }
.live-idle, .live-room, .live-now, .live-sec, .live-players, .live-opts, .live-opt { grid-template-columns: minmax(0, 1fr); }
.live-idle[hidden], .live-room[hidden] { display: none; }
.live-idle .live-panel-err:empty, .live-room .live-panel-err:empty { display: none; }
.live-join-card { gap: 12px; padding: 16px 14px 14px; border-radius: 20px; background: rgba(10, 132, 255, 0.045); }
.live-code { font-size: 40px; }
.live-join-row { display: flex; gap: 8px; width: 100%; }
.live-join {
flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 5px 0 12px;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.10); background: #fff; cursor: pointer;
font: inherit; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--muted-strong, #475467);
transition: border-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
.live-join:hover { border-color: rgba(10, 132, 255, 0.4); }
}
.live-join > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-join-copy {
flex: 0 0 auto; padding: 5px 10px; border-radius: 999px;
font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif; font-size: 12px; font-weight: 700;
color: var(--accent-strong, #0066cc); background: var(--accent-soft, rgba(10, 132, 255, 0.10));
}
.live-join-qr {
flex: 0 0 auto; height: 36px; padding: 0 12px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(15, 23, 42, 0.10); background: #fff;
font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text, #111318);
}
@media (hover: hover) and (pointer: fine) {
.live-join-qr:hover { border-color: rgba(10, 132, 255, 0.4); }
}
.live-join-qr[hidden] { display: none; }
.live-join-card.is-compact { padding: 12px; gap: 10px; }
.live-join-card.is-compact .live-qr { display: none; }
.live-join-card.is-compact .live-code { font-size: 28px; }
.live-now {
display: grid; gap: 12px; padding: 14px;
border-radius: 18px; background: #fff; border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.live-now[hidden] { display: none; }
.live-now-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.live-now-status { display: grid; gap: 2px; min-width: 0; }
.live-now-status b { font-size: 16px; font-weight: 700; color: var(--text, #111318); }
.live-now-status span { font-size: 13px; color: var(--muted-strong, #475467); font-variant-numeric: tabular-nums; }
.live-now-clock {
flex: 0 0 auto; display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 999px;
font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em;
background: rgba(15, 23, 42, 0.05); color: var(--text, #111318);
}
.live-now-clock[hidden] { display: none; }
.live-now-clock.is-low { background: rgba(255, 69, 58, 0.12); color: #c81e1e; }
.live-now .live-btn--primary { padding: 13px 16px; font-size: 15px; }
.live-link {
justify-self: center; border: 0; background: transparent; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: var(--muted-strong, #475467);
padding: 4px 10px; border-radius: 8px;
}
@media (hover: hover) and (pointer: fine) {
.live-link:hover { color: var(--text, #111318); background: rgba(15, 23, 42, 0.05); }
}
.live-link[hidden] { display: none; }
.live-sec { display: grid; gap: 6px; }
.live-sec-head {
display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px;
font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #667085);
}
.live-sec-count { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.live-players {
display: grid; max-height: 232px; overflow-y: auto;
border-radius: 16px; background: #fff; border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
}
.live-person {
display: grid; grid-template-columns: 26px minmax(0, 1fr) auto minmax(22px, auto) 22px; align-items: center; gap: 10px;
padding: 9px 8px 9px 12px; border-top: 1px solid rgba(15, 23, 42, 0.06); font-size: 14px;
}
.live-person:first-child { border-top: 0; }
.live-person.is-empty { display: block; padding: 14px; text-align: center; color: var(--muted, #667085); }
.live-person-av { width: 26px; height: 26px; display: grid; place-items: center; }
.live-person-av .live-av { margin: 0; font-size: 20px; vertical-align: 0; }
.live-person-av .live-av--img { width: 26px; height: 26px; vertical-align: 0; }
.live-person-initial {
width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
background: var(--accent-soft, rgba(10, 132, 255, 0.10)); color: var(--accent-strong, #0066cc); font-size: 12px; font-weight: 800;
}
.live-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text, #111318); }
.live-person-name small {
margin-left: 7px; padding: 2px 7px; border-radius: 999px; vertical-align: 1px;
font-size: 11px; font-weight: 700; color: var(--accent-strong, #0066cc); background: var(--accent-soft, rgba(10, 132, 255, 0.10));
}
.live-person.is-away .live-person-name { color: var(--muted, #667085); }
.live-chip { padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: rgba(15, 23, 42, 0.05); color: var(--muted, #667085); }
.live-chip.is-blank { padding: 0; background: none; }
.live-chip.is-done { background: rgba(52, 199, 89, 0.13); color: #15803d; }
.live-chip.is-away { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.live-person-score { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-person-x {
width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent;
font-size: 16px; line-height: 1; color: transparent;
}
button.live-person-x { cursor: pointer; }
button.live-person-x:focus-visible { color: var(--muted, #667085); }
@media (hover: hover) and (pointer: fine) {
.live-person:hover button.live-person-x { color: var(--muted, #667085); }
}
@media (hover: hover) and (pointer: fine) {
button.live-person-x:hover { color: var(--danger, #ff453a); background: rgba(255, 69, 58, 0.08); }
}
.live-opts { display: grid; border-radius: 16px; background: #fff; border: 1px solid var(--line, rgba(15, 23, 42, 0.08)); overflow: hidden; }
.live-opt { display: grid; gap: 10px; padding: 12px; border-top: 1px solid rgba(15, 23, 42, 0.06); }
.live-opts > :first-child { border-top: 0; }
.live-opt-text { display: grid; gap: 2px; min-width: 0; text-align: left; }
.live-opt-text b { font-size: 14px; font-weight: 600; color: var(--text, #111318); }
.live-opt-text small { font-size: 12px; line-height: 1.35; color: var(--muted, #667085); }
.live-seg {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px;
border-radius: 11px; background: rgba(15, 23, 42, 0.06);
}
.live-seg button {
height: 30px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: var(--muted-strong, #475467); font-variant-numeric: tabular-nums;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
@media (hover: hover) and (pointer: fine) {
.live-seg button:hover { color: var(--text, #111318); }
}
.live-seg button[aria-checked="true"] {
background: #fff; color: var(--text, #111318); font-weight: 700;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14), 0 0 0 .5px rgba(15, 23, 42, 0.06);
}
.live-switch-row {
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%;
padding: 12px; border: 0; border-top: 1px solid rgba(15, 23, 42, 0.06); background: transparent;
font: inherit; color: inherit; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.live-switch-row:hover { background: rgba(15, 23, 42, 0.02); }
}
.live-switch { position: relative; width: 44px; height: 26px; border-radius: 999px; background: rgba(15, 23, 42, 0.16); transition: background .18s ease; }
.live-switch i {
position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25); transition: transform .18s ease;
}
.live-switch-row[aria-checked="true"] .live-switch { background: #34c759; }
.live-switch-row[aria-checked="true"] .live-switch i { transform: translateX(18px); }
.live-seg button:focus-visible, .live-switch-row:focus-visible, .live-join:focus-visible, .live-join-qr:focus-visible, .live-end:focus-visible, .live-link:focus-visible {
outline: 2px solid var(--accent, #0a84ff); outline-offset: 2px;
}
.live-end {
height: 42px; border-radius: 999px; cursor: pointer;
border: 1px solid rgba(255, 69, 58, 0.28); background: transparent;
font: inherit; font-size: 14px; font-weight: 700; color: var(--danger, #ff453a);
transition: background .15s ease;
}
@media (hover: hover) and (pointer: fine) {
.live-end:hover { background: rgba(255, 69, 58, 0.06); }
}
@media (prefers-reduced-motion: reduce) { .live-switch, .live-switch i, .live-seg button { transition: none; } }
@media (max-width: 720px) { .live-panel { width: auto; } }