.single-placeholder[data-page="questions"] {
width: 100%;
max-width: none;
}
#arena-builder-page {
position: relative;
padding: 30px;
border-radius: 34px;
background:
radial-gradient(circle at top right, rgba(103, 193, 255, 0.16), transparent 28%),
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243,248,255,0.96));
border: 1px solid rgba(15, 23, 42, 0.05);
box-shadow: 0 22px 42px rgba(15, 23, 42, 0.08);
overflow: hidden;
overflow: clip;
}
.arena-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr);
align-items: center;
gap: 24px 32px;
padding: 28px 28px 28px 30px;
border-radius: 30px;
background:
radial-gradient(60% 120% at 100% 0%, rgba(103, 193, 255, 0.18), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(238,246,255,0.9));
border: 1px solid rgba(10, 132, 255, 0.1);
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}
.arena-hero-main {
display: grid;
gap: 12px;
min-width: 0;
}
.arena-hero h3 {
margin: 0;
font-size: clamp(38px, 6vw, 58px);
line-height: 0.95;
letter-spacing: -0.07em;
}
.arena-hero-subtitle {
margin: 0;
max-width: 780px;
color: #475569;
font-size: 18px;
line-height: 1.65;
}
.arena-builder-stats {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
}
.arena-builder-stat {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(248, 250, 252, 0.94);
border: 1px solid rgba(15, 23, 42, 0.05);
color: #334155;
font-size: 13px;
font-weight: 700;
}
.arena-builder-grid {
margin-top: 22px;
display: grid;
grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.2fr);
gap: 20px;
align-items: start;
}
.arena-builder-panel,
.arena-filter-card {
padding: 24px;
border-radius: 28px;
background: rgba(255,255,255,0.88);
border: 1px solid rgba(15, 23, 42, 0.05);
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}
.arena-builder-panel h4,
.arena-filter-card h4 {
margin: 8px 0 0;
font-size: 26px;
letter-spacing: -0.05em;
}
.arena-builder-panel p,
.arena-filter-card p {
margin: 10px 0 0;
color: #64748b;
font-size: 14px;
line-height: 1.65;
}
.arena-pill-grid {
margin-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.arena-pill-grid.is-grouped { display: block; }
.arena-topic-subject + .arena-topic-subject { margin-top: 22px; }
.arena-topic-subject-head {
margin-bottom: 12px;
color: #0f172a;
font-size: 17px;
font-weight: 800;
letter-spacing: -0.01em;
}
.arena-topic-subject-pills {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.arena-module-grid {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
gap: 12px;
}
.arena-module-card,
.arena-filter-pill {
width: auto;
min-width: 0;
padding: 14px 16px;
border-radius: 22px;
background: rgba(248, 250, 252, 0.94);
border: 1px solid rgba(15, 23, 42, 0.06);
color: #334155;
box-shadow: none;
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.arena-module-card {
width: 100%;
min-height: 86px;
padding: 18px 16px;
border-radius: 24px;
text-align: left;
}
@media (hover: hover) and (pointer: fine) {
.arena-module-card:hover,
.arena-filter-pill:hover {
transform: translateY(-2px);
box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
border-color: rgba(10, 132, 255, 0.14);
}
}
.arena-module-card.is-selected,
.arena-filter-pill.is-selected {
background: linear-gradient(180deg, rgba(239,246,255,0.98), rgba(229,239,255,0.94));
border-color: rgba(10, 132, 255, 0.2);
color: #0f3d91;
box-shadow: 0 14px 24px rgba(10, 132, 255, 0.08);
}
.arena-module-card strong,
.arena-filter-pill strong {
display: block;
font-size: 15px;
letter-spacing: -0.02em;
}
.arena-module-card strong {
font-size: 20px;
letter-spacing: -0.045em;
}
.arena-module-card span,
.arena-filter-pill span {
display: block;
margin-top: 4px;
font-size: 12px;
color: inherit;
opacity: 0.86;
}
.arena-goal {
margin-top: 18px;
padding: 18px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(239,246,255,0.9), rgba(248,251,255,0.86));
border: 1px solid rgba(10, 132, 255, 0.12);
}
.arena-goal[hidden] { display: none; }
.arena-goal-options {
margin-top: 12px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.arena-goal-option {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 14px 16px;
border-radius: 18px;
background: rgba(255,255,255,0.94);
border: 1px solid rgba(15, 23, 42, 0.08);
color: #0f172a;
box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset;
text-align: left;
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
@media (hover: hover) and (pointer: fine) {
.arena-goal-option:hover {
transform: translateY(-2px);
border-color: rgba(10, 132, 255, 0.28);
box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}
}
.arena-goal-option:focus-visible {
outline: 3px solid rgba(10, 132, 255, 0.4);
outline-offset: 2px;
}
.arena-goal-icon {
display: grid;
place-items: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(10, 132, 255, 0.10);
color: #0a6fe0;
}
.arena-goal-option.is-nbme .arena-goal-icon {
background: rgba(16, 185, 129, 0.12);
color: #047857;
}
.arena-goal-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.arena-goal-copy {
display: grid;
gap: 2px;
min-width: 0;
}
.arena-goal-copy strong {
font-size: 16px;
font-weight: 800;
letter-spacing: -0.02em;
}
.arena-goal-copy span {
font-size: 12.5px;
line-height: 1.35;
color: #334155;
}
.arena-goal-option.is-selected {
background: linear-gradient(180deg, #0a84ff, #0f6fe0);
border-color: rgba(10, 132, 255, 0.3);
color: #ffffff;
box-shadow: 0 14px 26px rgba(10, 132, 255, 0.24);
}
.arena-goal-option.is-nbme.is-selected {
background: linear-gradient(135deg, #0f9f76, #0a84ff);
border-color: rgba(16, 185, 129, 0.3);
box-shadow: 0 14px 26px rgba(16, 185, 129, 0.24);
}
.arena-goal-option.is-selected .arena-goal-copy span { color: rgba(255,255,255,0.9); }
.arena-goal-option.is-selected .arena-goal-icon { background: rgba(255,255,255,0.2); color: #ffffff; }
.arena-filter-card.is-nbme-goal .arena-mode-block { display: none; }
.arena-mode-block.is-outside-school,
.arena-mode-block[hidden] { display: none; }
.arena-goal-note {
margin: 12px 0 0;
color: #0f172a;
font-size: 13.5px;
line-height: 1.55;
}
.arena-goal-note[hidden] { display: none; }
@media (max-width: 480px) {
.arena-goal-options { grid-template-columns: 1fr; }
}
.arena-mode-block {
margin-top: 18px;
padding: 18px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(239,246,255,0.9), rgba(248,251,255,0.86));
border: 1px solid rgba(10, 132, 255, 0.12);
}
.arena-mode-label {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #0f3d91;
}
.arena-mode-selector {
margin-top: 12px;
display: flex;
flex-wrap: nowrap;
gap: 10px;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: rgba(10, 132, 255, 0.3) transparent;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
}
.arena-mode-selector::-webkit-scrollbar {
height: 6px;
}
.arena-mode-selector::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.05);
border-radius: 999px;
}
.arena-mode-selector::-webkit-scrollbar-thumb {
background: rgba(10, 132, 255, 0.28);
border-radius: 999px;
}
@media (hover: hover) and (pointer: fine) {
.arena-mode-selector::-webkit-scrollbar-thumb:hover {
background: rgba(10, 132, 255, 0.45);
}
}
.arena-mode-pill {
flex: 0 0 auto;
white-space: nowrap;
padding: 12px 18px;
border-radius: 999px;
background: rgba(255,255,255,0.92);
border: 1px solid rgba(15, 23, 42, 0.08);
color: #334155;
text-align: left;
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
@media (hover: hover) and (pointer: fine) {
.arena-mode-pill:hover {
transform: translateY(-2px);
box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
border-color: rgba(10, 132, 255, 0.18);
}
}
.arena-mode-pill strong {
display: block;
font-size: 15px;
letter-spacing: -0.02em;
}
.arena-mode-pill span {
display: block;
margin-top: 2px;
font-size: 12px;
opacity: 0.78;
}
.arena-mode-pill.is-selected {
background: linear-gradient(180deg, #0a84ff, #0f6fe0);
border-color: rgba(10, 132, 255, 0.3);
color: #ffffff;
box-shadow: 0 14px 26px rgba(10, 132, 255, 0.24);
}
.arena-mode-pill.is-empty:not(.is-selected) {
color: #94a3b8;
}
.arena-mode-blurb {
margin-top: 12px;
color: #475569;
font-size: 13px;
line-height: 1.55;
}
.arena-collection-grid {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px;
}
.arena-collection-card {
padding: 16px;
border-radius: 22px;
background: rgba(255,255,255,0.94);
border: 1px solid rgba(15, 23, 42, 0.06);
color: #334155;
text-align: left;
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
@media (hover: hover) and (pointer: fine) {
.arena-collection-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
border-color: rgba(10, 132, 255, 0.14);
}
}
.arena-collection-card.is-selected {
background: linear-gradient(180deg, rgba(239,246,255,0.98), rgba(229,239,255,0.94));
border-color: rgba(10, 132, 255, 0.24);
color: #0f3d91;
box-shadow: 0 14px 24px rgba(10, 132, 255, 0.08);
}
.arena-collection-card strong {
display: block;
font-size: 16px;
letter-spacing: -0.03em;
}
.arena-collection-card span {
display: block;
margin-top: 4px;
font-size: 12px;
opacity: 0.86;
}
.arena-collection-count {
font-weight: 700;
}
.arena-filter-grid {
margin-top: 18px;
display: grid;
gap: 18px;
}
.arena-filter-group {
padding: 18px;
border-radius: 22px;
background: rgba(248, 250, 252, 0.86);
border: 1px solid rgba(15, 23, 42, 0.05);
}
.arena-filter-group-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.arena-filter-group-head strong {
font-size: 16px;
letter-spacing: -0.02em;
color: #111827;
}
.arena-filter-group-head span {
color: #64748b;
font-size: 12px;
line-height: 1.5;
}
.arena-builder-column {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.arena-notice {
padding: 16px 18px;
border-radius: 20px;
background: linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(254, 252, 243, 0.92));
border: 1px solid rgba(217, 119, 6, 0.32);
}
.arena-notice-head {
display: flex;
align-items: flex-start;
gap: 9px;
}
.arena-notice-icon {
flex: none;
font-size: 15px;
line-height: 1.4;
}
.arena-notice-head strong {
font-size: 14px;
line-height: 1.4;
letter-spacing: -0.01em;
color: #92400e;
}
.arena-notice p {
margin: 8px 0 0;
font-size: 12.5px;
line-height: 1.6;
color: #78350f;
}
.arena-saved-tests {
padding: 16px 18px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.6);
border: 1px dashed rgba(15, 23, 42, 0.12);
}
.arena-saved-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.arena-saved-head strong {
font-size: 14px;
letter-spacing: -0.015em;
color: #334155;
}
.arena-saved-head span {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #94a3b8;
}
.arena-saved-list {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.arena-saved-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 13px;
border-radius: 14px;
background: rgba(248, 250, 252, 0.94);
border: 1px solid rgba(15, 23, 42, 0.06);
}
.arena-saved-row.is-finished {
background: linear-gradient(180deg, rgba(240, 253, 244, 0.9), rgba(247, 254, 250, 0.86));
border-color: rgba(16, 185, 129, 0.22);
}
.arena-saved-info {
min-width: 0;
}
.arena-saved-info strong {
display: block;
font-size: 13px;
letter-spacing: -0.01em;
color: #111827;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.arena-saved-info span {
display: block;
margin-top: 3px;
font-size: 12px;
color: #64748b;
}
.arena-saved-actions {
flex: none;
display: flex;
gap: 8px;
}
.arena-saved-open,
.arena-saved-remove {
padding: 6px 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.arena-saved-open {
border-color: rgba(10, 132, 255, 0.28);
background: rgba(10, 132, 255, 0.09);
color: #0a84ff;
}
@media (hover: hover) and (pointer: fine) {
.arena-saved-open:hover {
background: rgba(10, 132, 255, 0.15);
}
}
.arena-saved-remove {
background: none;
border-color: rgba(15, 23, 42, 0.1);
color: #94a3b8;
}
@media (hover: hover) and (pointer: fine) {
.arena-saved-remove:hover {
color: #dc2626;
border-color: rgba(220, 38, 38, 0.28);
}
}
.arena-coverage {
margin-top: 18px;
padding: 16px 18px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(239, 246, 255, 0.9), rgba(248, 251, 255, 0.86));
border: 1px solid rgba(10, 132, 255, 0.14);
}
.arena-coverage.is-complete {
background: linear-gradient(180deg, rgba(240, 253, 244, 0.92), rgba(247, 254, 250, 0.88));
border-color: rgba(16, 185, 129, 0.24);
}
.arena-coverage-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.arena-coverage-head strong {
font-size: 15px;
letter-spacing: -0.015em;
color: #0f3d91;
}
.arena-coverage.is-complete .arena-coverage-head strong {
color: #047857;
}
.arena-coverage-reset {
flex: none;
padding: 5px 11px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: none;
color: #94a3b8;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.arena-coverage-reset:hover {
color: #dc2626;
border-color: rgba(220, 38, 38, 0.28);
}
}
.arena-coverage-bar {
margin-top: 10px;
height: 8px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.08);
overflow: hidden;
}
.arena-coverage-bar span {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: linear-gradient(90deg, #0a84ff, #4dabff);
transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.arena-coverage.is-complete .arena-coverage-bar span {
background: linear-gradient(90deg, #10b981, #34d399);
}
.arena-coverage-note {
margin-top: 8px;
font-size: 12.5px;
color: #64748b;
}
.arena-coverage-toggle {
margin-top: 12px;
display: flex;
align-items: center;
gap: 9px;
font-size: 13px;
font-weight: 600;
color: #334155;
cursor: pointer;
}
.arena-coverage-toggle input {
width: 16px;
height: 16px;
accent-color: #0a84ff;
cursor: pointer;
}
.arena-filter-group-collapsible {
padding: 0;
overflow: hidden;
}
.arena-disclosure-head {
width: 100%;
padding: 18px;
background: none;
border: 0;
text-align: left;
cursor: pointer;
align-items: center;
font: inherit;
color: inherit;
border-radius: 22px;
transition: background 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
.arena-disclosure-head:hover {
background: rgba(10, 132, 255, 0.05);
}
}
.arena-disclosure-head:focus-visible {
outline: 2px solid rgba(10, 132, 255, 0.55);
outline-offset: -3px;
}
.arena-disclosure-icon {
flex: none;
width: 9px;
height: 9px;
margin-right: 4px;
border-right: 2px solid #64748b;
border-bottom: 2px solid #64748b;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.arena-filter-group-collapsible.is-open .arena-disclosure-icon {
transform: rotate(225deg) translate(-2px, -2px);
}
.arena-filter-group-collapsible.has-selection {
background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(248, 251, 255, 0.9));
border-color: rgba(10, 132, 255, 0.2);
}
.arena-filter-group-collapsible.has-selection .arena-disclosure-head span {
color: #0f3d91;
font-weight: 650;
}
.arena-disclosure-panel {
padding: 0 18px 18px;
}
.arena-topic-tools {
display: flex;
align-items: center;
gap: 10px;
}
.arena-topic-search {
flex: 1 1 auto;
min-width: 0;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: #fff;
font: inherit;
font-size: 14px;
color: #334155;
}
.arena-topic-search:focus {
outline: none;
border-color: rgba(10, 132, 255, 0.45);
box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}
.arena-topic-clear {
flex: none;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(10, 132, 255, 0.28);
background: rgba(10, 132, 255, 0.07);
color: #0a84ff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.arena-topic-clear:hover {
background: rgba(10, 132, 255, 0.12);
}
}
.arena-pill-grid-scroll {
max-height: 320px;
overflow-y: auto;
padding-right: 4px;
align-content: flex-start;
}
.arena-pill-grid-scroll .arena-filter-pill {
padding: 9px 14px;
border-radius: 999px;
}
.arena-pill-grid-scroll .arena-filter-pill strong {
font-size: 13.5px;
}
@media (hover: hover) and (pointer: fine) {
.arena-pill-grid-scroll .arena-filter-pill:hover {
transform: none;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.07);
}
}
.arena-filter-meta {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.arena-filter-meta .field-stack {
margin: 0;
}
.arena-count-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
#arenaQuestionCountInput {
flex: 0 0 auto;
width: 84px;
height: 40px;
padding: 0 8px;
border-radius: 12px;
text-align: center;
font-size: 18px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #0f172a;
-moz-appearance: textfield;
appearance: textfield;
}
#arenaQuestionCountInput::-webkit-inner-spin-button,
#arenaQuestionCountInput::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.arena-count-picks {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.arena-count-picks .arena-progress-chip { padding: 6px 13px; }
.arena-count-picks .arena-progress-chip:disabled { opacity: 0.4; cursor: default; border-color: rgba(148, 163, 184, 0.45); }
.arena-count-picks .arena-progress-chip[hidden] { display: none; }
.arena-filter-meta .label,
.arena-study-mode-field .label {
font-size: 16px;
font-weight: 800;
letter-spacing: -0.02em;
color: #0f172a;
}
.arena-study-mode-field {
margin-top: 18px;
}
.arena-study-mode {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 10px;
}
.arena-study-mode-option {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
text-align: left;
border-radius: 16px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: rgba(248, 250, 252, 0.85);
cursor: pointer;
transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.arena-study-mode-option strong {
font-size: 15px;
color: #0f172a;
}
.arena-study-mode-option span {
font-size: 12.5px;
line-height: 1.45;
color: #64748b;
}
@media (hover: hover) and (pointer: fine) {
.arena-study-mode-option:hover {
border-color: rgba(10, 132, 255, 0.3);
background: #ffffff;
}
}
.arena-study-mode-option.is-active {
border-color: rgba(10, 132, 255, 0.55);
background: rgba(10, 132, 255, 0.08);
box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}
.arena-study-mode-option.is-active strong {
color: #0a84ff;
}
.arena-timed-note {
margin: 8px 0 0;
color: #64748b;
font-size: 13px;
}
.arena-study-mode-option.is-wiggling {
animation: arena-study-mode-wiggle 0.6s ease-in-out;
}
@keyframes arena-study-mode-wiggle {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-5px) rotate(-1deg); }
35% { transform: translateX(5px) rotate(1deg); }
55% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
.arena-study-mode-option.is-wiggling { animation: none; }
}
.arena-filter-note,
.arena-filter-empty {
margin-top: 14px;
color: #64748b;
font-size: 13px;
line-height: 1.55;
}
.arena-filter-empty {
padding: 14px 16px;
border-radius: 18px;
background: rgba(255,255,255,0.8);
border: 1px dashed rgba(15, 23, 42, 0.08);
}
.arena-toggle-row {
margin-top: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.arena-toggle-copy strong {
display: block;
font-size: 16px;
font-weight: 800;
letter-spacing: -0.02em;
color: #0f172a;
}
.arena-toggle-copy span {
display: block;
margin-top: 4px;
color: #64748b;
font-size: 13px;
}
.arena-builder-actions {
position: sticky;
bottom: 12px;
z-index: 30;
margin-top: 20px;
padding: 10px 12px 10px 16px;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 18px;
background: linear-gradient(101deg,
rgba(255, 255, 255, 0.66) 0%,
rgba(244, 248, 255, 0.54) 55%,
rgba(234, 242, 255, 0.46) 100%);
box-shadow:
0 18px 44px rgba(15, 23, 42, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.85),
inset 26px 0 44px -34px rgba(96, 165, 250, 0.6),
inset -26px 0 44px -34px rgba(129, 140, 248, 0.55);
-webkit-backdrop-filter: blur(16px) saturate(1.7);
backdrop-filter: blur(16px) saturate(1.7);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.arena-builder-actions { background: rgba(255, 255, 255, 0.95); }
}
.arena-builder-summary {
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.arena-builder-summary[hidden] { display: none; }
.arena-builder-summary-label {
margin-right: 2px;
color: #0f172a;
font-size: 14px;
font-weight: 800;
}
.arena-sum-chip {
max-width: 100%;
padding: 4px 10px;
border: 1px solid rgba(201, 220, 248, 0.9);
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
color: #0b3d8f;
font-size: 13.5px;
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.arena-sum-chip.is-more { color: #1e293b; }
.arena-builder-go {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
}
.arena-builder-go > .arena-start-button { flex: 0 1 auto; padding: 10px 18px; }
.arena-builder-actions > .arena-builder-match { display: none; }
.arena-builder-actions + .live-coach { margin-top: 10px; }
.arena-builder-go > #arenaResetButton {
padding: 6px 8px;
background: transparent;
color: #1e293b;
font-weight: 700;
box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
.arena-builder-go > #arenaResetButton:hover { text-decoration: underline; transform: none; }
}
.arena-builder-go > [data-live-trigger] { padding: 6px 12px; background: rgba(255, 255, 255, 0.72); border-color: rgba(201, 220, 248, 0.9); }
.arena-start-button {
width: auto;
}
.arena-builder-match {
margin-left: auto;
padding: 10px 14px;
border-radius: 999px;
background: rgba(248, 250, 252, 0.94);
border: 1px solid rgba(15, 23, 42, 0.05);
color: #334155;
font-size: 13px;
font-weight: 700;
}
.arena-builder-inline-note {
margin-top: 12px;
color: #64748b;
font-size: 13px;
line-height: 1.55;
}
.arena-strand-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.arena-strand-row[hidden] { display: none; }
.arena-strand-label {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
}
.arena-strand-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.arena-strand-chip {
display: flex;
align-items: baseline;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(15, 23, 42, 0.12);
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.arena-strand-chip strong { font-size: 13px; font-weight: 700; color: #1f2937; }
.arena-strand-chip span { font-size: 11px; color: #94a3b8; }
@media (hover: hover) and (pointer: fine) {
.arena-strand-chip:hover { transform: translateY(-1px); border-color: rgba(10, 132, 255, 0.3); }
}
.arena-strand-chip.is-selected {
background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.94));
border-color: rgba(10, 132, 255, 0.4);
}
.arena-strand-chip.is-selected strong { color: #0f3d91; }
.arena-strand-chip.is-selected span { color: #3b7fd4; }
.arena-saved-progress {
margin-top: 8px;
height: 6px;
border-radius: 999px;
background: rgba(51, 65, 92, 0.10);
overflow: hidden;
}
.arena-saved-progress-fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #2563eb, #4f8df9);
transition: width 240ms ease;
}
.arena-saved-row.is-finished .arena-saved-progress-fill {
background: linear-gradient(90deg, #16805a, #2fa87c);
}
.arena-performance {
background: #ffffff;
border-radius: 18px;
padding: 18px 20px;
box-shadow: 0 10px 30px rgba(15, 30, 60, 0.06);
}
.arena-perf-modules { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.arena-perf-row {
display: grid;
grid-template-columns: 56px 1fr 44px 30px;
align-items: center;
gap: 10px;
font-size: 0.85rem;
}
.arena-perf-name { font-weight: 700; color: #33415c; }
.arena-perf-track {
height: 8px;
border-radius: 999px;
background: rgba(51, 65, 92, 0.10);
overflow: hidden;
display: block;
}
.arena-perf-fill {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #2563eb, #4f8df9);
}
.arena-perf-pct { font-weight: 700; color: #16233c; text-align: right; font-variant-numeric: tabular-nums; }
.arena-perf-count { color: #7a8699; font-size: 0.78rem; text-align: right; font-variant-numeric: tabular-nums; }
.arena-perf-weak { margin-top: 14px; }
.arena-perf-weak-label {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #a02c2c;
margin-bottom: 8px;
}
.arena-perf-weak-chip {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 7px 12px;
border-radius: 10px;
background: rgba(190, 42, 42, 0.07);
color: #6b2020;
font-size: 0.82rem;
margin-bottom: 6px;
}
.arena-perf-weak-chip strong { font-variant-numeric: tabular-nums; }
.arena-retest-button {
margin-top: 14px;
width: 100%;
padding: 12px;
border: none;
border-radius: 12px;
background: #2563eb;
color: #fff;
font-weight: 700;
font-size: 0.92rem;
cursor: pointer;
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
transition: transform 100ms ease, background 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
.arena-retest-button:hover { background: #1d4fd7; transform: translateY(-1px); }
}
.arena-progress-card {
display: flex;
align-items: center;
gap: 18px;
background: linear-gradient(135deg, #ffffff 0%, #f2f7ff 100%);
border: 1px solid rgba(37, 99, 235, 0.10);
border-radius: 20px;
padding: 18px 20px;
box-shadow: 0 14px 34px rgba(15, 30, 60, 0.08);
}
.arena-progress-ring-wrap { position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
.arena-progress-ring { width: 84px; height: 84px; transform: rotate(-90deg); }
.arena-progress-ring circle { fill: none; stroke-width: 8; }
.arena-progress-ring-track { stroke: rgba(37, 99, 235, 0.10); }
.arena-progress-ring-fill {
stroke: url(#arenaRingGradient), #2563eb;
stroke: #2563eb;
stroke-linecap: round;
transition: stroke-dashoffset 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.arena-progress-card.is-complete .arena-progress-ring-fill { stroke: #16805a; }
.arena-progress-ring-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1.05;
}
.arena-progress-ring-center strong { font-size: 1.15rem; color: #16233c; font-variant-numeric: tabular-nums; }
.arena-progress-ring-center span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7a8699; }
.arena-progress-body { min-width: 0; }
.arena-progress-eyebrow {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #2563eb;
}
.arena-progress-module { font-size: 1.25rem; font-weight: 800; color: #16233c; margin: 2px 0; }
.arena-progress-counts { font-size: 0.88rem; color: #33415c; font-weight: 600; }
.arena-progress-note { font-size: 0.82rem; color: #4a5872; margin-top: 2px; }
.arena-progress-card .arena-coverage-toggle { margin-top: 10px; }
.arena-progress-card .arena-coverage-reset { margin-top: 8px; }
.arena-saved-row {
background: #ffffff;
border: 1px solid rgba(51, 65, 92, 0.08);
border-radius: 16px;
padding: 14px 16px;
box-shadow: 0 6px 18px rgba(15, 30, 60, 0.05);
transition: transform 140ms ease, box-shadow 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
.arena-saved-row:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(15, 30, 60, 0.10);
}
}
.arena-saved-open {
background: #2563eb;
color: #fff;
border: none;
border-radius: 999px;
padding: 8px 16px;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
transition: background 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
.arena-saved-open:hover { background: #1d4fd7; }
}
.arena-saved-row.is-finished .arena-saved-open { background: #16805a; }
@media (hover: hover) and (pointer: fine) {
.arena-saved-row.is-finished .arena-saved-open:hover { background: #12689a; background: #126b4b; }
}
.arena-saved-remove {
background: none;
border: none;
color: #a02c2c;
font-weight: 600;
font-size: 0.82rem;
cursor: pointer;
opacity: 0.65;
transition: opacity 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
.arena-saved-remove:hover { opacity: 1; text-decoration: underline; }
}
.arena-saved-list {
max-height: 430px;
overflow-y: auto;
padding-right: 6px;
scrollbar-width: thin;
scrollbar-color: rgba(51, 65, 92, 0.25) transparent;
}
.arena-saved-list::-webkit-scrollbar { width: 5px; }
.arena-saved-list::-webkit-scrollbar-thumb { background: rgba(51, 65, 92, 0.22); border-radius: 999px; }
.arena-saved-list::-webkit-scrollbar-track { background: transparent; }
.arena-progress-card,
.arena-performance {
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(238, 242, 248, 0.90) 55%, rgba(225, 231, 240, 0.92) 100%);
border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 1px 2px rgba(15, 30, 60, 0.05),
0 16px 40px rgba(15, 30, 60, 0.10);
}
.arena-progress-filter {
display: flex;
gap: 6px;
margin-top: 12px;
flex-wrap: wrap;
}
.arena-progress-chip {
border: 1px solid rgba(148, 163, 184, 0.45);
background: linear-gradient(180deg, #ffffff, #eef2f7);
color: #33415c;
border-radius: 999px;
padding: 5px 13px;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(15,30,60,0.06);
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease, scale 120ms ease, opacity 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
.arena-progress-chip:hover { border-color: rgba(37, 99, 235, 0.45); }
}
.arena-progress-chip.is-active {
background: linear-gradient(180deg, #2f6bf0, #2258d8);
border-color: #1d4fd7;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 12px rgba(37, 99, 235, 0.30);
}
.arena-progress-banks-toggle {
margin-top: 12px;
background: none;
border: none;
padding: 0;
color: #2563eb;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
}
.arena-progress-banks { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.arena-progress-bank-row {
display: grid;
grid-template-columns: minmax(70px, 38%) 1fr 58px;
align-items: center;
gap: 8px;
font-size: 0.78rem;
}
.arena-progress-bank-name { font-weight: 700; color: #33415c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arena-progress-bank-track { height: 5px; border-radius: 999px; background: rgba(51, 65, 92, 0.12); overflow: hidden; display: block; }
.arena-progress-bank-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #64748b, #94a3b8); }
.arena-progress-bank-count { color: #4a5872; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.arena-perf-scope {
width: 100%;
margin-top: 10px;
padding: 9px 12px;
border-radius: 11px;
border: 1px solid rgba(148, 163, 184, 0.45);
background: linear-gradient(180deg, #ffffff, #eef2f7);
color: #16233c;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(15,30,60,0.06);
}
.arena-perf-row { grid-template-columns: minmax(56px, 42%) 1fr 44px 30px; }
.arena-perf-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arena-history-filter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 12px 14px;
margin-bottom: 14px;
border-radius: 14px;
background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(236,240,247,0.9));
border: 1px solid rgba(148, 163, 184, 0.30);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.arena-history-filter-label strong { display: block; font-size: 0.9rem; color: #16233c; }
.arena-history-filter-label span { font-size: 0.78rem; color: #4a5872; }
.arena-history-filter .arena-progress-filter { margin-top: 0; }
.arena-progress-scope-hint {
margin-top: 6px;
font-size: 0.78rem;
font-weight: 700;
color: #2563eb;
letter-spacing: 0.01em;
}
.arena-pass-insight { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.8rem; color: #33415c; flex-wrap: wrap; }
.arena-pass-insight[hidden] { display: none; }
.arena-pass-badge { padding: 3px 9px; border-radius: 999px; background: linear-gradient(90deg, rgba(37,99,235,0.12), rgba(16,185,129,0.12)); border: 1px solid rgba(37,99,235,0.2); color: #1d4fd7; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.arena-pass-insight strong { color: #16233c; }
.arena-pass-insight em { font-style: normal; font-weight: 800; }
.arena-pass-insight em.is-up { color: #0f7a5a; }
.arena-pass-insight em.is-down { color: #a02c2c; }
.arena-optional {
margin-left: 8px;
font-size: 12px;
font-style: normal;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #94a3b8;
vertical-align: 2px;
}
.arena-filter-group-head > div { display: flex; flex-direction: column; min-width: 0; }
.arena-filter-group-head strong { display: block; }
.arena-filter-group-head > div > span { display: block; margin-top: 3px; }
#arenaTopicGroupGroup .arena-disclosure-head {
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: inherit;
align-items: center;
}
@media (hover: hover) and (pointer: fine) {
#arenaTopicGroupGroup .arena-disclosure-head:hover { background: none; transform: none; box-shadow: none; }
}
#arenaTopicGroupGroup .arena-disclosure-glyph {
flex: none;
font-size: 14px;
color: #64748b;
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
#arenaTopicGroupGroup .arena-disclosure-head.is-open .arena-disclosure-glyph { transform: rotate(180deg); }
#arenaTopicGroupGroup .arena-disclosure-panel { padding: 0; }
#arenaTopicGroupGroup.has-selection {
background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(248, 251, 255, 0.9));
border-color: rgba(10, 132, 255, 0.2);
}
#arenaTopicGroupGroup.has-selection #arenaTopicGroupSummary { color: #0f3d91; font-weight: 650; }
.arena-lecture-bubble {
position: relative;
flex: none;
margin-left: auto;
padding: 7px 12px;
border-radius: 999px;
background: linear-gradient(180deg, #fff6d6, #ffeeb3);
border: 1px solid rgba(217, 119, 6, 0.35);
color: #92400e;
font-size: 12.5px;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 6px 14px rgba(217, 119, 6, 0.12);
}
.arena-lecture-bubble::after {
content: '';
position: absolute;
right: -6px;
top: 50%;
width: 10px;
height: 10px;
transform: translateY(-50%) rotate(45deg);
background: #ffeeb3;
border-right: 1px solid rgba(217, 119, 6, 0.35);
border-top: 1px solid rgba(217, 119, 6, 0.35);
}
.arena-lecture-bubble[hidden] { display: none; }
@keyframes arena-nudge {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-2px); }
80% { transform: translateX(2px); }
}
#arenaTopicGroupGroup.is-nudging { animation: arena-nudge 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1; }
@media (prefers-reduced-motion: reduce) {
#arenaTopicGroupGroup.is-nudging { animation: none; }
}
.arena-lecture-note {
margin-top: 14px;
font-size: 13px;
line-height: 1.5;
color: #64748b;
}
.arena-filter-grid > .arena-filter-group,
.arena-filter-card { min-width: 0; }
.arena-collection-grid.is-forms {
display: grid;
width: 100%;
min-width: 0;
box-sizing: border-box;
grid-auto-flow: column;
grid-template-rows: repeat(3, auto);
grid-auto-columns: minmax(190px, 1fr);
gap: 12px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: rgba(10, 132, 255, 0.3) transparent;
padding: 4px 4px 10px;
margin: 14px 0 0;
-webkit-overflow-scrolling: touch;
}
.arena-collection-grid.is-forms::-webkit-scrollbar { height: 6px; }
.arena-collection-grid.is-forms::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.05); border-radius: 999px; }
.arena-collection-grid.is-forms::-webkit-scrollbar-thumb { background: rgba(10, 132, 255, 0.28); border-radius: 999px; }
.arena-collection-grid.is-forms .arena-collection-card { scroll-snap-align: start; }
.arena-collection-nav { display: flex; gap: 6px; flex: none; }
.arena-collection-nav[hidden] { display: none; }
.arena-collection-nav-button {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(15, 23, 42, 0.1);
background: #fff;
box-shadow: none;
color: #334155;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.arena-collection-nav-button:hover { border-color: rgba(10, 132, 255, 0.4); color: #0a84ff; transform: none; box-shadow: none; }
}
.arena-inline-link {
padding: 0;
border: 0;
background: none;
box-shadow: none;
color: #0a84ff;
font: inherit;
font-weight: 700;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.arena-inline-link:hover { text-decoration: underline; transform: none; box-shadow: none; }
}
.arena-filter-pill:not(.is-selected) {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.12);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.05);
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.arena-filter-pill:not(.is-selected):hover {
border-color: rgba(10, 132, 255, 0.4);
background: linear-gradient(180deg, #ffffff, #f4f8ff);
}
}
.arena-shelf {
padding: 0;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 18px;
background: #ffffff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.05);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
.arena-shelf:hover { border-color: rgba(10, 132, 255, 0.35); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 24px rgba(10, 132, 255, 0.1); }
}
.arena-shelf-head {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin: 0;
padding: 14px 16px;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
.arena-shelf-head:hover { transform: none; box-shadow: none; background: rgba(10, 132, 255, 0.04); }
}
.arena-shelf-head:focus-visible { outline: 2px solid rgba(10, 132, 255, 0.5); outline-offset: -3px; }
.arena-shelf-head > strong { font-size: 14.5px; color: #0f172a; }
.arena-shelf-head > span:not(.arena-shelf-chevron) { margin-left: auto; }
.arena-shelf-chevron {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-left: 4px;
border-radius: 50%;
border: 1px solid rgba(15, 23, 42, 0.14);
background: #fff;
font-size: 12px;
color: #334155;
transition: transform 0.22s ease, border-color 0.18s ease, color 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
.arena-shelf-head:hover .arena-shelf-chevron { border-color: rgba(10, 132, 255, 0.5); color: #0a84ff; }
}
.arena-shelf.is-open .arena-shelf-chevron { transform: rotate(180deg); }
.arena-shelf-body { display: none; padding: 0 16px 16px; border-top: 1px solid rgba(15, 23, 42, 0.06); }
.arena-shelf.is-open .arena-shelf-body { display: block; }
.arena-shelf .arena-saved-list { margin-top: 12px; }
.arena-shelf .arena-perf-scope { margin-top: 12px; }
.arena-shelf-more {
margin-top: 10px;
padding: 4px 0;
border: 0;
background: none;
box-shadow: none;
color: #0a84ff;
font: inherit;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
}
.arena-shelf-more[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
.arena-shelf-more:hover { transform: none; box-shadow: none; text-decoration: underline; }
}
.arena-active-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 8px;
margin-top: 18px;
padding: 0 4px;
}
.arena-active-filters[hidden] { display: none; }
.arena-active-filters-label { font-size: 13px; color: #64748b; margin-right: 2px; }
.arena-active-filters-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.arena-active-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(10, 132, 255, 0.28);
background: rgba(10, 132, 255, 0.07);
box-shadow: none;
color: #0f3d91;
font: inherit;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.arena-active-chip b { font-weight: 800; color: #0a84ff; }
@media (hover: hover) and (pointer: fine) {
.arena-active-chip:hover { transform: none; box-shadow: none; background: rgba(220, 38, 38, 0.07); border-color: rgba(220, 38, 38, 0.35); color: #991b1b; }
}
@media (hover: hover) and (pointer: fine) {
.arena-active-chip:hover b { color: #dc2626; }
}
.arena-active-filters-clear {
flex: none;
padding: 0 4px;
border: 0;
background: none;
box-shadow: none;
color: #64748b;
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.arena-active-filters-clear:hover { transform: none; box-shadow: none; color: #0f172a; text-decoration: underline; }
}
.arena-alert {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 16px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: #fff;
}
.arena-alert[hidden] { display: none; }
.arena-alert.is-error { border-color: rgba(220, 38, 38, 0.32); background: linear-gradient(180deg, #fff5f5, #fffafa); }
.arena-alert.is-warn { border-color: rgba(217, 119, 6, 0.32); background: linear-gradient(180deg, #fffbeb, #fffdf5); }
.arena-alert.is-info { border-color: rgba(10, 132, 255, 0.25); background: linear-gradient(180deg, #eff6ff, #f8fbff); }
.arena-alert-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 13px;
font-weight: 800;
color: #fff;
background: #64748b;
}
.arena-alert.is-error .arena-alert-icon { background: #dc2626; }
.arena-alert.is-warn .arena-alert-icon { background: #d97706; }
.arena-alert.is-info .arena-alert-icon { background: #0a84ff; }
.arena-alert-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.arena-alert-body strong { font-size: 14.5px; letter-spacing: -0.01em; color: #0f172a; }
.arena-alert-body span { font-size: 13px; line-height: 1.55; color: #334155; }
.arena-alert.is-error .arena-alert-body strong { color: #991b1b; }
.arena-alert.is-warn .arena-alert-body strong { color: #92400e; }
.arena-alert-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.arena-alert-button {
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: #fff;
box-shadow: none;
color: #0f172a;
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.arena-alert-button:first-child { background: #0f172a; color: #fff; border-color: #0f172a; }
@media (hover: hover) and (pointer: fine) {
.arena-alert-button:hover { transform: none; box-shadow: none; opacity: 0.88; }
}
.arena-start-count {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.22);
font-size: 12.5px;
font-weight: 800;
font-variant-numeric: tabular-nums;
vertical-align: middle;
}
.arena-continue-card {
display: flex;
align-items: center;
gap: 16px;
margin-top: 18px;
padding: 16px 18px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(240, 253, 244, 0.95), rgba(236, 253, 245, 0.9));
border: 1px solid rgba(16, 185, 129, 0.32);
box-shadow: 0 12px 24px rgba(16, 185, 129, 0.08);
}
.arena-continue-card[hidden] { display: none; }
.arena-continue-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.arena-continue-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #047857; }
.arena-continue-body strong { font-size: 16px; letter-spacing: -0.02em; color: #0f172a; }
.arena-continue-body > span { font-size: 12.5px; color: #475569; }
.arena-continue-body .arena-saved-progress { margin-top: 6px; }
.arena-continue-button {
flex: none;
padding: 11px 20px;
border-radius: 999px;
border: 0;
background: #16805a;
color: #fff;
font: inherit;
font-size: 14px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 10px 20px rgba(22, 128, 90, 0.22);
}
@media (hover: hover) and (pointer: fine) {
.arena-continue-button:hover { background: #126b4b; }
}
.arena-module-notice {
display: flex;
align-items: center;
gap: 14px;
margin-top: 16px;
padding: 14px 16px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(229, 239, 255, 0.94));
border: 1px solid rgba(10, 132, 255, 0.28);
box-shadow: 0 10px 22px rgba(10, 132, 255, 0.1);
}
.arena-module-notice[hidden] { display: none; }
.arena-module-notice-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.arena-module-notice-body strong { font-size: 14.5px; letter-spacing: -0.01em; color: #0f3d91; }
.arena-module-notice-body span { font-size: 13px; line-height: 1.5; color: #334155; }
.arena-module-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; justify-content: flex-end; max-width: 45%; }
.arena-module-notice-button {
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(10, 132, 255, 0.3);
background: #ffffff;
box-shadow: none;
color: #0f3d91;
font: inherit;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
.arena-module-notice-button.is-primary { background: linear-gradient(180deg, #1491ff, #0077ed); border-color: transparent; color: #fff; }
@media (hover: hover) and (pointer: fine) {
.arena-module-notice-button:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(10, 132, 255, 0.16); }
}
@keyframes arena-panel-pulse {
0% { box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06), 0 0 0 0 rgba(10, 132, 255, 0.45); }
60% { box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06), 0 0 0 10px rgba(10, 132, 255, 0); }
100% { box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06), 0 0 0 0 rgba(10, 132, 255, 0); }
}
.arena-builder-panel.is-highlight {
border-color: rgba(10, 132, 255, 0.5);
animation: arena-panel-pulse 1.2s ease-out 2;
}
@media (prefers-reduced-motion: reduce) {
.arena-builder-panel.is-highlight { animation: none; }
}
.arena-difficulty-note {
margin-top: 14px;
padding: 10px 14px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(254, 252, 243, 0.92));
border: 1px solid rgba(217, 119, 6, 0.28);
font-size: 12.5px;
line-height: 1.55;
color: #78350f;
}
.arena-difficulty-note strong { color: #92400e; }
@media (max-width: 960px) {
.arena-builder-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.arena-builder-column,
.arena-filter-card,
.arena-builder-panel { min-width: 0; }
}
@media (max-width: 640px) {
.arena-builder-panel,
.arena-filter-card { padding: 16px; border-radius: 22px; }
.arena-builder-panel h4,
.arena-filter-card h4 { font-size: 22px; }
.arena-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.arena-module-card { min-height: 0; padding: 12px 10px; border-radius: 16px; }
.arena-module-card strong { font-size: 16px; }
.arena-module-card span { font-size: 11px; }
.arena-filter-group { padding: 14px; border-radius: 18px; }
.arena-filter-meta { grid-template-columns: 1fr; }
.arena-study-mode { grid-template-columns: 1fr; }
.arena-lecture-bubble { display: none; }
.arena-alert { flex-wrap: wrap; }
.arena-alert-actions { width: 100%; padding-left: 36px; }
.arena-continue-card { flex-wrap: wrap; }
.arena-continue-button { width: 100%; }
.arena-builder-actions { position: static; padding: 12px; gap: 10px; border-radius: 18px; }
.arena-builder-go > .arena-start-button { flex: 1 1 100%; min-width: 0; padding: 12px 14px; }
.arena-mode-pill { padding: 10px 14px; }
.arena-progress-card { flex-wrap: wrap; }
.arena-module-notice { flex-wrap: wrap; }
.arena-module-notice-actions { max-width: none; width: 100%; justify-content: flex-start; }
}
#arenaFormsToggle {
display: flex;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: inherit;
align-items: center;
}
#arenaFormsToggle[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
#arenaFormsToggle:hover { background: none; transform: none; box-shadow: none; }
}
#arenaFormsToggle .arena-disclosure-glyph {
flex: none;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.10);
background: #ffffff;
font-size: 13px;
color: #334155;
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
#arenaFormsToggle:hover .arena-disclosure-glyph { border-color: rgba(10, 132, 255, 0.35); }
}
#arenaFormsToggle.is-open .arena-disclosure-glyph { transform: rotate(180deg); }
#arenaFormsToggle #arenaFormsSummary { color: #0f172a; }
.arena-collection-panel[hidden] { display: none; }
.is-forms-dropdown .arena-collection-panel { margin-top: 14px; }
.is-forms-dropdown #arenaCollectionTitle { display: none; }
#arenaCollectionGroup.has-selection {
background: linear-gradient(180deg, rgba(236, 253, 245, 0.96), rgba(248, 251, 255, 0.9));
border-color: rgba(16, 185, 129, 0.28);
}
#arenaCollectionGroup.has-selection #arenaFormsSummary { color: #047857; font-weight: 700; }
.arena-goal-note.is-soon {
padding: 10px 12px;
border-radius: 14px;
background: rgba(245, 158, 11, 0.10);
border: 1px solid rgba(245, 158, 11, 0.28);
color: #78350f;
}
.arena-goal-note.is-soon strong { color: #92400e; }
.arena-quote {
margin: 0;
display: grid;
min-width: 0;
border-radius: 24px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(15, 23, 42, 0.06);
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
.arena-quote-art {
display: block;
width: 100%;
height: 128px;
padding: 16px 14px 0;
box-sizing: border-box;
background: linear-gradient(180deg, rgba(10, 132, 255, 0.05), rgba(255, 255, 255, 0));
}
.arena-quote-art .arena-art-draw { stroke-width: 1.5; opacity: 0.75; }
.arena-quote-art .arena-art-arch { stroke-width: 1.3; fill: rgba(10, 132, 255, 0.04); }
.arena-quote-art .arena-art-thin { stroke-width: 1; opacity: 0.55; }
.arena-quote-body {
position: relative;
display: grid;
justify-items: center;
gap: 5px;
margin: 4px 12px 10px;
padding: 10px 18px 10px;
border-radius: 12px;
text-align: center;
background:
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.42) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.035) 0 1px, rgba(15, 23, 42, 0) 1px 7px),
linear-gradient(104deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 46%, rgba(255, 255, 255, 0) 62%),
linear-gradient(180deg, #f3f5f7 0%, #e2e6ea 46%, #eaedf0 54%, #d6dbe0 100%);
border: 1px solid rgba(15, 23, 42, 0.16);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(15, 23, 42, 0.1),
0 1px 2px rgba(15, 23, 42, 0.16),
0 8px 18px rgba(15, 23, 42, 0.1);
overflow: hidden;
}
.arena-quote-body::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(104deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 58%) no-repeat;
background-size: 300% 100%;
background-position: 100% 0;
opacity: 0;
}
.arena-quote.is-glint .arena-quote-body::after,
.arena-quote:hover .arena-quote-body::after {
animation: arena-plate-glint 1100ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes arena-plate-glint {
0% { opacity: 1; background-position: 100% 0; }
100% { opacity: 1; background-position: 0% 0; }
}
.arena-bolt {
position: absolute;
width: 11px;
height: 11px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #ffffff 0 12%, #c9cfd6 40%, #8a939d 100%);
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.22),
0 1px 1px rgba(255, 255, 255, 0.9),
inset 0 -1px 1px rgba(15, 23, 42, 0.25);
transform: rotate(var(--turn, 30deg));
}
.arena-bolt::after {
content: "";
position: absolute;
left: 1.5px;
right: 1.5px;
top: 4.5px;
height: 2px;
border-radius: 1px;
background: rgba(51, 60, 71, 0.7);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.arena-bolt:nth-of-type(1) { top: 9px; left: 9px; --turn: 28deg; }
.arena-bolt:nth-of-type(2) { top: 9px; right: 9px; --turn: -52deg; }
.arena-bolt:nth-of-type(3) { bottom: 9px; left: 9px; --turn: 74deg; }
.arena-bolt:nth-of-type(4) { bottom: 9px; right: 9px; --turn: -16deg; }
.arena-quote-label {
color: #4d5660;
font-family: Optima, "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.32em;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(15, 23, 42, 0.18);
}
.arena-quote-text {
margin: 0;
color: #3f4750;
font-family: Optima, "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
font-size: 20px;
font-weight: 700;
line-height: 1.26;
letter-spacing: 0.05em;
text-transform: uppercase;
text-wrap: balance;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.95),
0 -1px 0 rgba(15, 23, 42, 0.28);
}
.arena-quote-sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.arena-quote-text.is-long { font-size: 18px; letter-spacing: 0.04em; }
.arena-quote-word { white-space: nowrap; }
.arena-quote-ch { display: inline-block; }
.arena-quote.is-typing .arena-quote-ch { opacity: 0; }
.arena-quote.is-typing .arena-quote-ch.is-on {
opacity: 1;
animation: arena-stamp 200ms cubic-bezier(0.3, 0.7, 0.4, 1.3);
}
@keyframes arena-stamp {
0% { opacity: 0; transform: scale(1.9); text-shadow: 0 8px 10px rgba(15, 23, 42, 0.18); }
55% { opacity: 1; transform: scale(0.94); }
100% { transform: none; }
}
.arena-quote.is-typing .arena-bolt { opacity: 0; }
.arena-quote.is-typing.is-bolted .arena-bolt {
opacity: 1;
animation: arena-bolt-in 420ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
.arena-quote.is-typing.is-bolted .arena-bolt:nth-of-type(2) { animation-delay: 70ms; }
.arena-quote.is-typing.is-bolted .arena-bolt:nth-of-type(3) { animation-delay: 140ms; }
.arena-quote.is-typing.is-bolted .arena-bolt:nth-of-type(4) { animation-delay: 210ms; }
@keyframes arena-bolt-in {
from { opacity: 0; transform: rotate(calc(var(--turn, 30deg) - 300deg)) scale(1.6); }
to { opacity: 1; transform: rotate(var(--turn, 30deg)); }
}
.arena-quote-by {
color: #4f5862;
font-family: Optima, "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(15, 23, 42, 0.18);
transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}
.arena-quote.is-typing .arena-quote-by {
opacity: 0;
transform: translateY(4px);
transition: none;
}
.arena-hero-tiles {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
max-width: 660px;
margin-top: 6px;
}
.arena-hero-tiles[hidden] { display: none; }
.arena-hero-tile {
--mh-a: #0a84ff;
--mh-b: #10b981;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 12px;
row-gap: 1px;
padding: 14px 16px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(15, 23, 42, 0.06);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}
.arena-hero-tile > svg,
.arena-hero-tile > i { grid-row: span 2; }
.arena-hero-tile strong {
color: #1d1d1f;
font-size: 26px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.arena-hero-tile span {
color: #475569;
font-size: 12.5px;
font-weight: 600;
line-height: 1.3;
}
.arena-hero-tile.is-total {
background: linear-gradient(180deg, #ffffff, rgba(10, 132, 255, 0.06));
border-color: rgba(10, 132, 255, 0.14);
}
.arena-hero-tile.is-total strong { font-size: 30px; }
.arena-hero-tile-icon {
width: 24px;
height: 24px;
fill: none;
stroke: #0a84ff;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.arena-hero-tile-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: linear-gradient(135deg, var(--mh-a), var(--mh-b));
}
.arena-hero-ring {
width: 28px;
height: 28px;
transform: rotate(-90deg);
}
.arena-hero-ring circle { fill: none; stroke-width: 4; }
.arena-hero-ring-track { stroke: rgba(15, 23, 42, 0.1); }
.arena-hero-ring-fill { stroke: #10b981; stroke-linecap: round; }
.arena-quote {
transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.arena-quote-art .arena-art-draw { transition: opacity 0.35s ease; }
@media (hover: hover) and (pointer: fine) {
.arena-quote:hover {
transform: translateY(-4px);
border-color: rgba(10, 132, 255, 0.18);
box-shadow: 0 26px 50px rgba(15, 23, 42, 0.12);
}
}
.arena-quote:hover .arena-quote-art .arena-art-draw { opacity: 0.95; }
.arena-quote:hover .arena-quote-art .arena-art-arch {
animation: arena-arch-wave 1100ms cubic-bezier(0.4, 0, 0.2, 1) both;
animation-delay: calc(var(--w, 0) * 40ms);
}
@keyframes arena-arch-wave {
0%, 100% { fill: rgba(10, 132, 255, 0.04); }
45% { fill: rgba(10, 132, 255, 0.2); }
}
.arena-splash {
position: fixed;
inset: 0;
z-index: 2200;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: radial-gradient(120% 90% at 50% 22%, #ffffff 0%, var(--bg) 48%, var(--bg-strong) 100%);
cursor: pointer;
}
.arena-splash-inner {
display: grid;
justify-items: center;
gap: 16px;
max-width: 100%;
padding: 24px;
text-align: center;
animation: arena-splash-rise 480ms cubic-bezier(0.22, 0.68, 0.36, 1) both;
}
.arena-splash-label {
color: var(--muted);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.26em;
text-transform: uppercase;
animation: arena-splash-label 480ms ease 120ms both;
}
.arena-splash-art { width: min(360px, 82vw); }
.arena-splash-svg { display: block; width: 100%; height: auto; }
.arena-splash .arena-art-draw {
stroke-width: 1.6;
opacity: 0.85;
stroke-dasharray: 1;
animation: arena-draw 700ms cubic-bezier(0.33, 0.9, 0.4, 1) both;
animation-delay: calc(var(--d, 400ms) * 0.55);
}
.arena-splash .arena-art-arch { stroke-width: 1.4; fill: rgba(10, 132, 255, 0.05); }
.arena-splash .arena-art-thin { stroke-width: 1.1; opacity: 0.55; }
.arena-splash-rule {
width: min(240px, 60vw);
height: 2px;
margin-top: 2px;
border-radius: 2px;
background: rgba(15, 23, 42, 0.08);
overflow: hidden;
}
.arena-splash-rule::after {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 2px;
background: linear-gradient(90deg, #0a84ff, #10b981);
transform-origin: left center;
animation: arena-splash-fill 1150ms cubic-bezier(0.3, 0.8, 0.35, 1) 150ms both;
}
.arena-splash-title {
margin: 4px 0 0;
color: var(--text);
font-size: clamp(22px, 3.4vw, 28px);
font-weight: 800;
letter-spacing: -0.02em;
animation: arena-splash-up 420ms cubic-bezier(0.22, 0.68, 0.36, 1) 560ms both;
}
.arena-splash-sub {
margin: -6px 0 0;
color: var(--muted-strong);
font-size: 15px;
font-weight: 600;
animation: arena-splash-up 420ms cubic-bezier(0.22, 0.68, 0.36, 1) 660ms both;
}
.arena-splash.is-leaving {
animation: arena-splash-open 520ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
pointer-events: none;
}
@keyframes arena-splash-rise { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes arena-splash-label { from { opacity: 0; letter-spacing: 0.42em; } to { opacity: 0.95; letter-spacing: 0.26em; } }
@keyframes arena-splash-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes arena-splash-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes arena-splash-open { from { opacity: 1; transform: scale(1); filter: blur(0); } to { opacity: 0; transform: scale(1.12); filter: blur(10px); } }
@media (prefers-reduced-motion: reduce) {
@media (hover: hover) and (pointer: fine) {
.arena-quote:hover { transform: none; }
}
.arena-quote:hover .arena-quote-art .arena-art-arch { animation: none; }
}
@keyframes arena-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes arena-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.arena-hero.is-intro .arena-hero-eyebrow,
.arena-hero.is-intro .arena-hero-title,
.arena-hero.is-intro .arena-sample-line,
.arena-hero.is-intro .arena-hero-subtitle,
.arena-hero.is-intro .arena-hero-tile,
.arena-hero.is-intro .arena-builder-stats,
.arena-hero.is-intro .arena-quote-body {
animation: arena-rise 560ms cubic-bezier(0.22, 0.68, 0.36, 1) backwards;
}
.arena-hero.is-intro .arena-hero-eyebrow { animation-delay: 60ms; }
.arena-hero.is-intro .arena-hero-title { animation-delay: 160ms; }
.arena-hero.is-intro .arena-sample-line { animation-delay: 300ms; }
.arena-hero.is-intro .arena-hero-subtitle { animation-delay: 360ms; }
.arena-hero.is-intro .arena-builder-stats { animation-delay: 480ms; }
.arena-hero.is-intro .arena-hero-tile { animation-delay: calc(440ms + var(--tile, 0) * 70ms); }
.arena-hero.is-intro .arena-hero-tile:nth-child(2) { --tile: 1; }
.arena-hero.is-intro .arena-hero-tile:nth-child(3) { --tile: 2; }
.arena-hero.is-intro .arena-quote-body { animation-delay: 1250ms; }
.arena-hero.is-intro .arena-art-draw {
stroke-dasharray: 1;
animation: arena-draw 900ms cubic-bezier(0.33, 0.9, 0.4, 1) backwards;
animation-delay: var(--d, 400ms);
}
@media (prefers-reduced-motion: reduce) {
.arena-hero.is-intro * { animation: none !important; }
}
.arena-sample-line {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 3px 10px;
width: fit-content;
max-width: 100%;
margin: 2px 0 0;
padding: 11px 16px 11px 13px;
border-radius: 16px;
background: rgba(15, 23, 42, 0.05);
color: #1d1d1f;
font-size: 16px;
font-weight: 500;
line-height: 1.4;
}
.arena-sample-line b { font-weight: 800; }
.arena-sample-icon {
grid-row: span 2;
width: 20px;
height: 20px;
margin-top: 1px;
fill: none;
stroke: #0071e3;
stroke-width: 2;
stroke-linecap: round;
}
.arena-sample-unlock {
grid-column: 2;
justify-self: start;
margin: 0;
padding: 0;
text-align: left;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: #0071e3;
font: inherit;
font-size: 15px;
font-weight: 650;
cursor: pointer;
}
.arena-sample-unlock:focus-visible {
background: none;
box-shadow: none;
transform: none;
text-decoration: underline;
text-underline-offset: 3px;
outline: none;
}
@media (hover: hover) and (pointer: fine) {
.arena-sample-unlock:hover {
background: none;
box-shadow: none;
transform: none;
text-decoration: underline;
text-underline-offset: 3px;
outline: none;
}
}
@media (max-width: 1180px) {
.arena-hero { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.85fr); }
.arena-quote-body { padding: 12px 20px 12px; }
.arena-quote-text { font-size: 18px; letter-spacing: 0.045em; }
.arena-quote-text.is-long { font-size: 16px; letter-spacing: 0.035em; }
}
@media (max-width: 900px) {
.arena-hero { grid-template-columns: minmax(0, 1fr); }
.arena-quote { max-width: 560px; }
}
@media (max-width: 560px) {
.arena-hero-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.arena-hero { padding: 22px 18px; border-radius: 24px; }
.arena-quote-art { height: 104px; }
.arena-quote-body { margin: 2px 8px 8px; padding: 10px 14px 10px; }
.arena-quote-text { font-size: 16.5px; letter-spacing: 0.04em; }
.arena-quote-text.is-long { font-size: 14.5px; letter-spacing: 0.03em; }
.arena-quote-by { font-size: 11.5px; letter-spacing: 0.12em; }
.arena-sample-line { font-size: 15px; }
}
.arena-bar-ask[hidden] { display: none; }
.arena-bar-ask {
display: grid;
gap: 8px;
color: #0f172a;
font-size: 15px;
}
.arena-bar-ask-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
@media (max-width: 640px) {
#arena-builder-page {
margin-left: -16px;
margin-right: -16px;
padding: 18px 12px;
border-radius: 0;
}
.arena-builder-panel,
.arena-filter-card { padding: 14px; }
.arena-filter-group { padding: 12px; }
.arena-pill-grid { gap: 8px; }
.arena-builder-actions {
position: sticky;
bottom: calc(8px + env(safe-area-inset-bottom, 0px));
padding: 8px;
gap: 8px;
}
.arena-builder-actions > .arena-builder-summary { display: none; }
.arena-builder-go { flex-wrap: nowrap; gap: 6px; }
.arena-builder-go > .arena-start-button { flex: 1 1 auto; min-width: 0; padding: 10px 12px; }
.arena-builder-go > #arenaResetButton,
.arena-builder-go > [data-live-trigger] { flex: 0 0 auto; }
}