:root {
--bg: #0f1020;
--bg-card: #1a1b35;
--bg-card-hover: #232544;
--text: #f1f1f5;
--text-dim: #9b9bb0;
--accent: #ff6fa8;
--holo-blue: #00a3ee;
--bang: #ff3b3b;
--wife: #facc15;
--friend: #5fc9f8;
--border: #2c2e4f;
--shadow: 0 8px 32px rgba(0,0,0,0.4);
--radius: 16px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: radial-gradient(ellipse at top, #1c1e3f 0%, #0f1020 60%);
color: var(--text);
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
min-height: 100vh;
}
.site-header {
text-align: center;
padding: 28px 16px 8px;
}
.site-header h1 {
margin: 0;
font-size: 2.6rem;
letter-spacing: 0.08em;
color: var(--holo-blue);
text-shadow: 0 0 18px rgba(0,163,238,0.35);
font-weight: 800;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 16px;
position: relative;
}
/* ---------- Category legend ---------- */
.legend {
display: flex;
justify-content: center;
gap: 36px;
margin: 20px auto 28px;
font-size: 1.6rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.legend-item { text-shadow: 0 0 14px currentColor; }
.legend-bang { color: var(--bang); }
.legend-wife { color: var(--wife); }
.legend-friend { color: var(--friend); }
@media (max-width: 540px) {
.legend { gap: 18px; font-size: 1.2rem; letter-spacing: 0.12em; }
}
/* ---------- Cards ---------- */
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 32px;
}
@media (max-width: 720px) {
.cards { grid-template-columns: 1fr; }
}
.card {
background: var(--bg-card);
border: 2px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
position: relative;
user-select: none;
}
.card:hover {
background: var(--bg-card-hover);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.card.cat-bang { border-color: var(--bang); box-shadow: 0 0 0 2px var(--bang) inset, var(--shadow); }
.card.cat-wife { border-color: var(--wife); box-shadow: 0 0 0 2px var(--wife) inset, var(--shadow); }
.card.cat-friend { border-color: var(--friend); box-shadow: 0 0 0 2px var(--friend) inset, var(--shadow); }
.card-image-wrap {
aspect-ratio: 1 / 1;
background: #0a0b18;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.card-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 3.2rem;
font-weight: 800;
color: var(--text);
background: linear-gradient(135deg, var(--placeholder-a, #6f6fff), var(--placeholder-b, #ff6fa8));
letter-spacing: 0.05em;
}
.placeholder small {
margin-top: 12px;
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.7);
}
.badge {
position: absolute;
top: 12px;
right: 12px;
padding: 6px 14px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
pointer-events: none;
}
.badge.cat-bang { background: var(--bang); }
.badge.cat-wife { background: var(--wife); color: #1a1300; text-shadow: none; }
.badge.cat-friend { background: var(--friend); }
.card-info {
padding: 12px 16px 16px;
text-align: center;
}
.card-name {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
}
.card-meta {
margin: 4px 0 0;
font-size: 0.8rem;
color: var(--text-dim);
}
/* ---------- Buttons ---------- */
.actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
padding-bottom: 32px;
}
.btn {
font: inherit;
font-weight: 600;
letter-spacing: 0.04em;
padding: 12px 28px;
border-radius: 12px;
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.1s, opacity 0.15s, background 0.15s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
background: var(--holo-blue);
color: #fff;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding-left: 36px;
padding-right: 36px;
}
.btn-secondary {
background: transparent;
color: var(--text);
border-color: var(--border);
}
.btn-tertiary {
background: transparent;
color: var(--text-dim);
border-color: transparent;
}
.btn-tertiary:hover { color: var(--text); }
/* Secondary actions row (scoring buttons) */
.actions-secondary {
margin-top: -16px;
padding-bottom: 16px;
}
/* Locked button (Global Scores until enabled) */
.btn-locked {
background: transparent;
color: var(--text-dim);
border: 2px dashed var(--border);
cursor: not-allowed;
position: relative;
}
.btn-locked:hover { transform: none !important; }
.btn-locked[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: #0f1029;
color: var(--text);
padding: 8px 14px;
border-radius: 8px;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
border: 1px solid var(--border);
box-shadow: 0 8px 20px rgba(0,0,0,0.35);
z-index: 80;
}
.btn-locked[data-tooltip]:hover::before,
.btn-locked[data-tooltip]:focus-visible::before {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.hidden { display: none !important; }
footer {
text-align: center;
color: var(--text-dim);
padding: 16px;
}
/* ---------- Level ticker ---------- */
.ticker {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 16px 22px 18px;
margin: 8px auto 16px;
max-width: 760px;
}
.ticker-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: 12px;
}
.ticker-level {
display: flex;
align-items: baseline;
gap: 8px;
}
.ticker-label {
color: var(--text-dim);
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ticker-level-num {
font-size: 1.6rem;
font-weight: 800;
color: var(--holo-blue);
text-shadow: 0 0 12px rgba(0,163,238,0.5);
display: inline-block;
transition: transform 0.25s ease-out;
}
.ticker-level-num.maxed { color: #ffd84d; text-shadow: 0 0 14px rgba(255,216,77,0.6); }
.ticker-level-num.bump { transform: scale(1.4); }
.archivist-btn {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 10px;
padding: 4px 12px;
background: linear-gradient(135deg, #ffd84d 0%, #ff9f1c 100%);
color: #1a0f00;
border: none;
border-radius: 999px;
font: inherit;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 0 0 1px rgba(255,216,77,0.5), 0 0 14px rgba(255,179,29,0.45);
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.archivist-btn:hover {
transform: translateY(-1px);
box-shadow: 0 0 0 1px rgba(255,216,77,0.8), 0 0 22px rgba(255,179,29,0.7);
}
.archivist-btn-icon { font-size: 0.95rem; line-height: 1; }
.archivist-btn.hidden { display: none; }
.ticker-progress-text {
font-variant-numeric: tabular-nums;
font-size: 0.95rem;
color: var(--text);
letter-spacing: 0.04em;
}
.ticker-progress-text .ticker-sep { color: var(--text-dim); margin: 0 4px; }
.ticker-progress-text .ticker-suffix { color: var(--text-dim); margin-left: 6px; font-size: 0.85rem; }
#ticker-current { font-weight: 700; transition: transform 0.2s ease-out; display: inline-block; }
#ticker-current.bump { transform: scale(1.25); color: var(--holo-blue); }
.ticker-bar {
height: 10px;
background: rgba(255,255,255,0.06);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.ticker-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--holo-blue), #6fe0ff);
border-radius: 999px;
transition: width 0.55s cubic-bezier(0.2, 0.7, 0.25, 1);
box-shadow: 0 0 12px rgba(0,163,238,0.5);
}
.ticker-fill.maxed {
background: linear-gradient(90deg, #facc15, #ffe97a, #facc15);
background-size: 200% 100%;
animation: maxedShimmer 2.4s linear infinite;
box-shadow: 0 0 16px rgba(250,204,21,0.55);
}
@keyframes maxedShimmer {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
/* ---------- Level-up banner ---------- */
.level-up-banner {
position: fixed;
top: 88px;
left: 50%;
transform: translateX(-50%) translateY(-16px) scale(0.85);
pointer-events: none;
padding: 14px 36px;
border-radius: 14px;
background: linear-gradient(135deg, var(--holo-blue), #7ee0ff);
color: #06223a;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: 0 12px 40px rgba(0,163,238,0.45), 0 0 0 2px rgba(255,255,255,0.15) inset;
opacity: 0;
transition: opacity 0.25s, transform 0.25s;
white-space: nowrap;
z-index: 100;
}
.level-up-banner.show {
opacity: 1;
animation: bannerPop 0.6s cubic-bezier(0.2, 1.2, 0.4, 1) forwards;
}
.level-up-banner.maxed {
background: linear-gradient(135deg, #facc15, #ffe97a);
color: #2a1d00;
box-shadow: 0 12px 40px rgba(250,204,21,0.5), 0 0 0 2px rgba(255,255,255,0.2) inset;
}
@keyframes bannerPop {
0% { transform: translateX(-50%) translateY(-16px) scale(0.85); }
60% { transform: translateX(-50%) translateY(8px) scale(1.06); }
100% { transform: translateX(-50%) translateY(0) scale(1.00); }
}
/* ---------- Personal scoring modal ---------- */
.modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: modalFadeIn 0.2s ease-out;
}
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(5, 6, 18, 0.7);
backdrop-filter: blur(6px);
}
.modal-content {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 24px 80px rgba(0,0,0,0.55);
padding: 28px 32px 32px;
max-width: 980px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
animation: modalPop 0.28s cubic-bezier(0.2, 1.1, 0.4, 1);
}
.modal-close {
position: absolute;
top: 12px;
right: 14px;
background: transparent;
color: var(--text-dim);
border: none;
font-size: 1.6rem;
line-height: 1;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.modal-title {
margin: 0 0 4px;
font-size: 1.6rem;
color: var(--holo-blue);
letter-spacing: 0.04em;
}
.modal-subtitle {
margin: 0 0 20px;
color: var(--text-dim);
font-size: 0.95rem;
}
.rank-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 720px) {
.rank-grid { grid-template-columns: 1fr; }
}
.rank-col {
background: rgba(0,0,0,0.18);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 14px 18px;
}
.rank-col-title {
margin: 0 0 12px;
text-align: center;
font-size: 1.1rem;
letter-spacing: 0.16em;
text-transform: uppercase;
text-shadow: 0 0 12px currentColor;
}
.rank-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.rank-row {
display: grid;
grid-template-columns: 22px 44px 1fr auto;
align-items: center;
gap: 10px;
padding: 6px 8px;
border-radius: 8px;
background: rgba(255,255,255,0.02);
}
.rank-pos {
color: var(--text-dim);
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: center;
}
.rank-thumb {
width: 44px;
height: 44px;
border-radius: 8px;
overflow: hidden;
background: #0a0b18;
display: block;
}
.rank-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rank-name {
font-size: 0.95rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rank-count {
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--text);
background: rgba(255,255,255,0.08);
padding: 2px 10px;
border-radius: 999px;
font-size: 0.85rem;
}
.rank-empty {
text-align: center;
color: var(--text-dim);
font-style: italic;
margin: 24px 0 8px;
}
.rank-empty-all {
grid-column: 1 / -1;
font-size: 1.05rem;
padding: 32px 0;
}
.modal-subtitle .dot { color: var(--border); margin: 0 6px; }
#my-scores-title-name { color: var(--holo-blue); font-weight: 700; }
/* ---------- Badges row ---------- */
.badges-row {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 8px;
padding: 14px 4px 18px;
border-bottom: 1px solid var(--border);
margin-bottom: 16px;
}
@media (max-width: 720px) {
.badges-row { grid-template-columns: repeat(5, 1fr); }
}
.badge-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
cursor: help;
}
.badge-icon {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.1rem;
font-variant-numeric: tabular-nums;
border: 2px solid var(--border);
background: rgba(255,255,255,0.03);
color: var(--text-dim);
transition: transform 0.2s, box-shadow 0.2s;
}
.badge-item.earned .badge-icon {
color: #fff;
border-color: transparent;
background: linear-gradient(135deg, var(--holo-blue), #7ee0ff);
box-shadow: 0 4px 14px rgba(0,163,238,0.4);
}
.badge-item.earned.latest .badge-icon {
background: linear-gradient(135deg, #facc15, #ffe97a);
color: #2a1d00;
box-shadow: 0 0 20px rgba(250,204,21,0.55);
animation: badgePulse 2.4s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
.badge-item.locked .badge-icon {
border-style: dashed;
opacity: 0.5;
}
.badge-name {
font-size: 0.7rem;
color: var(--text-dim);
text-align: center;
letter-spacing: 0.04em;
line-height: 1.1;
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.badge-item.earned .badge-name { color: var(--text); font-weight: 600; }
.badge-item.earned.latest .badge-name { color: #ffe97a; }
.badge-unlock {
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--holo-blue);
text-align: center;
margin-top: 1px;
font-weight: 700;
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.badge-item.locked .badge-unlock { opacity: 0.55; }
/* ---------- Tabs ---------- */
.tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border);
margin-bottom: 18px;
}
.tab {
background: transparent;
border: none;
color: var(--text-dim);
font: inherit;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.04em;
padding: 10px 18px;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
position: relative;
transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active {
color: var(--holo-blue);
border-bottom-color: var(--holo-blue);
}
.tab.locked {
color: var(--text-dim);
opacity: 0.85;
}
.tab.locked::after {
content: "•";
margin-left: 6px;
color: var(--wife);
font-size: 1.4rem;
line-height: 0.5;
vertical-align: middle;
}
.tab[data-tooltip] {
position: relative;
}
.tab.locked[data-tooltip]:hover::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: #0f1029;
color: var(--text);
padding: 6px 12px;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0;
white-space: nowrap;
border: 1px solid var(--border);
box-shadow: 0 6px 16px rgba(0,0,0,0.4);
z-index: 10;
}
.tab-content { display: none; }
.tab-content.active { display: block; }
/* ---------- Locked pane (Stat Rankings before Lv5) ---------- */
.locked-pane {
text-align: center;
padding: 48px 20px;
border: 2px dashed var(--border);
border-radius: 12px;
background: rgba(0,0,0,0.18);
}
.locked-pane h3 {
margin: 0 0 8px;
font-size: 1.3rem;
color: var(--wife);
letter-spacing: 0.06em;
}
.locked-pane p { margin: 8px 0; color: var(--text-dim); }
.locked-pane .locked-pane-hint {
max-width: 540px;
margin: 18px auto 0;
font-size: 0.9rem;
line-height: 1.5;
}
/* ---------- Stat Rankings table ---------- */
.stats-blurb {
margin: 0 0 14px;
color: var(--text-dim);
font-size: 0.9rem;
line-height: 1.5;
}
.stats-table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: 10px;
}
.stat-rankings {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
}
.stat-rankings th, .stat-rankings td {
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.stat-rankings th {
background: #0f1029;
color: var(--text-dim);
cursor: pointer;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
user-select: none;
position: sticky;
top: 0;
}
.stat-rankings th.sorted { color: var(--text); }
.stat-rankings th.sorted::after { content: " ▼"; font-size: 0.7rem; }
.stat-rankings th.sorted.asc::after { content: " ▲"; }
.stat-rankings tbody tr:hover { background: rgba(255,255,255,0.025); }
.stat-talent {
display: flex;
align-items: center;
gap: 10px;
min-width: 200px;
}
.stat-thumb {
width: 36px;
height: 36px;
border-radius: 6px;
overflow: hidden;
background: #0a0b18;
display: block;
flex: 0 0 auto;
}
.stat-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.stat-talent-name {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stat-impressions {
color: var(--text-dim);
font-variant-numeric: tabular-nums;
text-align: center;
width: 60px;
}
.stat-cell {
min-width: 130px;
}
.stat-cell .stat-bar {
display: inline-block;
width: 64px;
height: 8px;
background: rgba(255,255,255,0.06);
border-radius: 999px;
overflow: hidden;
vertical-align: middle;
margin-right: 8px;
}
.stat-bar-fill {
height: 100%;
border-radius: 999px;
transition: width 0.4s ease;
}
.stat-bar-bang { background: linear-gradient(90deg, #4a2034, var(--bang)); box-shadow: 0 0 8px rgba(255,59,59,0.4); }
.stat-bar-wife { background: linear-gradient(90deg, #4a3820, var(--wife)); box-shadow: 0 0 8px rgba(250,204,21,0.4); }
.stat-bar-friend { background: linear-gradient(90deg, #1f3a4a, var(--friend)); box-shadow: 0 0 8px rgba(95,201,248,0.4); }
.stat-bar-favor { background: linear-gradient(90deg, #003355, var(--holo-blue), #7ee0ff); box-shadow: 0 0 10px rgba(0,163,238,0.55); }
/* Favor column header: room for a category-toggle pill on the right */
.stat-rankings th[data-sort="favorScore"] {
position: relative;
padding-right: 80px;
min-width: 220px;
}
.favor-cat-toggle {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
padding: 3px 10px;
border: none;
border-radius: 999px;
font: inherit;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
cursor: pointer;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
transition: transform 0.1s, filter 0.15s;
}
.favor-cat-toggle:hover { filter: brightness(1.15); transform: translateY(-50%) scale(1.05); }
.favor-cat-toggle:active { transform: translateY(-50%) scale(0.96); }
.favor-cat-toggle.cat-bang { background: var(--bang); color: #fff; }
.favor-cat-toggle.cat-wife { background: var(--wife); color: #1a1300; }
.favor-cat-toggle.cat-friend { background: var(--friend); color: #052636; }
/* Hide the toggle pill while the column is locked */
.stat-rankings th[data-sort="favorScore"].locked .favor-cat-toggle { display: none; }
/* Locked Favor column (below Lv7) */
.stat-rankings th.locked {
cursor: not-allowed;
color: var(--text-dim);
opacity: 0.7;
position: relative;
border-bottom: 1px dashed var(--border);
}
.stat-rankings th.locked.sorted::after { content: ""; }
.stat-rankings th.locked[data-tooltip]:hover::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: #0f1029;
color: var(--text);
padding: 6px 12px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
border: 1px solid var(--border);
box-shadow: 0 6px 16px rgba(0,0,0,0.4);
z-index: 10;
}
.stat-cell.stat-locked {
text-align: center;
background: rgba(255,255,255,0.015);
border-left: 1px dashed var(--border);
}
.stat-locked-text {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-dim);
padding: 4px 10px;
border-radius: 999px;
border: 1px dashed var(--border);
}
.stat-num {
display: inline-block;
min-width: 28px;
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--text);
}
.stat-count {
color: var(--text-dim);
font-size: 0.8rem;
margin-left: 4px;
}
/* ---------- Matchmaker Reveal ---------- */
.matchmaker-intro {
text-align: center;
margin-bottom: 18px;
}
.matchmaker-intro h3 {
margin: 0 0 4px;
color: var(--holo-blue);
font-size: 1.3rem;
letter-spacing: 0.06em;
}
.matchmaker-intro p {
margin: 0;
color: var(--text-dim);
font-size: 0.95rem;
}
.present-stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
padding: 24px 0 32px;
transition: opacity 0.4s, transform 0.4s, max-height 0.4s ease;
}
#matchmaker-content.opened .present-stage {
opacity: 0;
transform: scale(0.9);
pointer-events: none;
max-height: 0;
padding: 0;
overflow: hidden;
}
/* Present box (CSS-only; no images / emoji) */
.present-box {
position: relative;
width: 180px;
height: 180px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
outline: none;
animation: presentBob 2.4s ease-in-out infinite;
}
.present-box:hover { filter: brightness(1.08); }
.present-box:focus-visible { outline: 2px solid var(--holo-blue); outline-offset: 6px; border-radius: 12px; }
.present-shadow {
position: absolute;
bottom: -18px;
left: 10%;
right: 10%;
height: 16px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 70%);
filter: blur(4px);
}
.present-base {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 130px;
background: linear-gradient(135deg, var(--holo-blue), #6fb6ee 60%, #2a82c8);
border-radius: 8px;
box-shadow: inset 0 -8px 14px rgba(0,0,0,0.25), 0 8px 22px rgba(0,163,238,0.35);
}
.present-lid {
position: absolute;
left: -4%; right: -4%;
top: 30px;
height: 38px;
background: linear-gradient(135deg, #29bfff, var(--holo-blue) 60%, #006fad);
border-radius: 6px;
box-shadow: 0 6px 14px rgba(0,0,0,0.35), inset 0 -3px 6px rgba(0,0,0,0.25);
transform-origin: center bottom;
transition: transform 0.55s cubic-bezier(0.4, -0.2, 0.6, 1.4), opacity 0.55s;
}
.present-ribbon-v {
position: absolute;
left: 50%; top: 30px; bottom: 0;
width: 22px;
margin-left: -11px;
background: linear-gradient(90deg, #ffd84d, #ffe97a, #ffd84d);
box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset;
transition: opacity 0.4s;
}
.present-ribbon-h {
position: absolute;
left: 0; right: 0;
top: 90px;
height: 22px;
background: linear-gradient(180deg, #ffd84d, #ffe97a, #ffd84d);
box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset;
transition: opacity 0.4s;
}
.present-bow {
position: absolute;
left: 50%; top: 16px;
width: 56px; height: 36px;
margin-left: -28px;
background: radial-gradient(circle at 30% 30%, #ffe97a, #ffd84d 60%, #c69d00);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset -3px -3px 6px rgba(0,0,0,0.2);
transition: transform 0.55s cubic-bezier(0.5, 0, 0.5, 1.4), opacity 0.55s;
z-index: 2;
}
.present-bow::before, .present-bow::after {
content: "";
position: absolute;
top: 50%;
width: 22px; height: 26px;
background: radial-gradient(circle at 30% 30%, #ffe97a, #ffd84d 70%);
border-radius: 50%;
transform: translateY(-50%);
}
.present-bow::before { left: -14px; }
.present-bow::after { right: -14px; }
.present-sparkles {
position: absolute;
inset: -20px;
pointer-events: none;
}
.present-sparkles span {
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: #ffe97a;
box-shadow: 0 0 12px #ffe97a;
opacity: 0;
}
.present-sparkles span:nth-child(1) { left: 10%; top: 14%; }
.present-sparkles span:nth-child(2) { left: 88%; top: 22%; }
.present-sparkles span:nth-child(3) { left: 4%; top: 60%; }
.present-sparkles span:nth-child(4) { left: 96%; top: 70%; }
.present-sparkles span:nth-child(5) { left: 30%; top: 4%; }
.present-sparkles span:nth-child(6) { left: 70%; top: 92%; }
.present-sparkles span:nth-child(7) { left: 50%; top: 10%; }
.present-sparkles span:nth-child(8) { left: 50%; top: 96%; }
@keyframes presentBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* Opened state: lid pops, bow flies, sparkles burst */
#matchmaker-content.opened .present-lid {
transform: translateY(-90px) rotate(-22deg);
opacity: 0;
}
#matchmaker-content.opened .present-bow {
transform: translateY(-130px) rotate(35deg) scale(1.4);
opacity: 0;
}
#matchmaker-content.opened .present-ribbon-v,
#matchmaker-content.opened .present-ribbon-h {
opacity: 0;
}
#matchmaker-content.opened .present-sparkles span {
animation: sparkleBurst 1.1s ease-out forwards;
}
#matchmaker-content.opened .present-sparkles span:nth-child(2n) { animation-delay: 0.08s; }
#matchmaker-content.opened .present-sparkles span:nth-child(3n) { animation-delay: 0.16s; }
@keyframes sparkleBurst {
0% { opacity: 1; transform: scale(0.5); }
60% { opacity: 1; transform: scale(1.6); }
100% { opacity: 0; transform: scale(0.4); }
}
.present-open-btn {
font-size: 1rem;
letter-spacing: 0.18em;
}
/* Reveal cards */
.matchmaker-reveal {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 8px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;
pointer-events: none;
}
#matchmaker-content.opened .matchmaker-reveal {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
@media (max-width: 720px) {
.matchmaker-reveal { grid-template-columns: 1fr; }
}
.reveal-card {
background: rgba(0,0,0,0.22);
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px 16px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.reveal-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: 14px;
box-shadow: 0 0 0 2px transparent inset;
transition: box-shadow 0.3s;
}
.reveal-card-bang::before { box-shadow: 0 0 24px rgba(255,59,59,0.18) inset, 0 0 0 1px rgba(255,59,59,0.35) inset; }
.reveal-card-wife::before { box-shadow: 0 0 24px rgba(250,204,21,0.18) inset, 0 0 0 1px rgba(250,204,21,0.35) inset; }
.reveal-card-friend::before { box-shadow: 0 0 24px rgba(95,201,248,0.18) inset, 0 0 0 1px rgba(95,201,248,0.35) inset; }
.reveal-label {
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 14px;
text-shadow: 0 0 12px currentColor;
}
.reveal-thumb {
width: 130px;
height: 130px;
margin: 0 auto 12px;
border-radius: 50%;
overflow: hidden;
background: #0a0b18;
box-shadow: 0 6px 20px rgba(0,0,0,0.45);
border: 3px solid rgba(255,255,255,0.08);
}
.reveal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reveal-name {
font-size: 1.15rem;
font-weight: 700;
margin: 0 0 2px;
}
.reveal-meta {
color: var(--text-dim);
font-size: 0.8rem;
margin-bottom: 14px;
}
.reveal-favorability {
display: flex;
align-items: baseline;
justify-content: center;
gap: 8px;
margin: 6px 0 8px;
padding: 8px 12px;
background: linear-gradient(135deg, rgba(0,163,238,0.15), rgba(0,163,238,0.05));
border: 1px solid rgba(0,163,238,0.35);
border-radius: 999px;
}
.reveal-fav-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-dim);
}
.reveal-fav-value {
font-size: 1.05rem;
font-weight: 800;
color: var(--holo-blue);
font-variant-numeric: tabular-nums;
}
.reveal-fav-delta {
font-size: 0.78rem;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
}
.reveal-personal {
margin: 12px 0 14px;
padding: 10px 8px;
background: rgba(255,255,255,0.03);
border-radius: 10px;
}
.reveal-stat-value {
font-size: 1.6rem;
font-weight: 800;
color: var(--holo-blue);
font-variant-numeric: tabular-nums;
display: block;
}
.reveal-stat-label {
font-size: 0.78rem;
color: var(--text-dim);
display: block;
margin-top: 2px;
}
.reveal-global {
border-top: 1px solid var(--border);
padding-top: 12px;
text-align: left;
}
.reveal-global-row {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
margin-bottom: 6px;
}
.reveal-global-key { color: var(--text-dim); }
.reveal-global-value {
font-weight: 700;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
}
.reveal-global-note {
margin: 8px 0 0;
font-size: 0.72rem;
color: var(--text-dim);
font-style: italic;
text-align: center;
}
.reveal-empty {
padding: 32px 12px;
color: var(--text-dim);
font-style: italic;
font-size: 0.9rem;
}
/* ---------- Hot Takes ---------- */
.hot-takes-intro {
text-align: center;
margin-bottom: 22px;
}
.hot-takes-title {
font-size: 3.4rem;
font-weight: 800;
margin: 0 0 4px;
color: var(--holo-blue);
letter-spacing: -0.02em;
text-shadow: 0 0 26px rgba(0,163,238,0.5);
line-height: 1;
}
.hot-takes-intro p {
margin: 0;
color: var(--text-dim);
font-size: 0.95rem;
}
.hot-takes-podium {
/* Reuses .podium-stage flex/baseline behavior, just lifts the floor up
a bit so the "vs avg" text doesn't crowd the bottom of the modal. */
min-height: 280px;
margin-bottom: 16px;
}
.hot-take-cat {
display: inline-block;
margin-top: 8px;
padding: 2px 10px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 10px currentColor;
border: 1px solid currentColor;
}
.hot-take-cat.cat-bang { color: var(--bang); }
.hot-take-cat.cat-wife { color: var(--wife); }
.hot-take-cat.cat-friend { color: var(--friend); }
.hot-take-delta {
font-size: 1.05rem;
font-weight: 800;
margin-top: 8px;
font-variant-numeric: tabular-nums;
color: var(--holo-blue);
text-shadow: 0 0 10px rgba(0,163,238,0.4);
}
.hot-take-rates {
font-size: 0.78rem;
color: var(--text-dim);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.hot-takes-loading {
width: 100%;
text-align: center;
color: var(--text-dim);
padding: 40px 0;
font-style: italic;
}
/* ---------- Simulation modal ---------- */
.sim-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin: 6px 0 18px;
}
@media (max-width: 540px) {
.sim-summary { grid-template-columns: repeat(2, 1fr); }
}
.sim-stat-box {
background: rgba(0,0,0,0.22);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
text-align: center;
}
.sim-stat-key {
color: var(--text-dim);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 4px;
}
.sim-stat-val {
color: var(--text);
font-size: 1.3rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.sim-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.sim-legend {
margin: 0;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
font-size: 0.78rem;
color: var(--text-dim);
}
.sim-band {
display: inline-block;
width: 20px;
height: 8px;
border-radius: 999px;
vertical-align: middle;
margin-right: 6px;
}
.sim-table .sim-count-cell {
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.sim-count-num {
font-weight: 800;
font-size: 1rem;
}
.sim-count-delta {
color: var(--text-dim);
font-size: 0.78rem;
margin-left: 6px;
}
.sim-table .sim-distribution { width: 50%; }
.sim-bar {
height: 10px;
background: rgba(255,255,255,0.06);
border-radius: 999px;
overflow: hidden;
}
.sim-bar-fill {
height: 100%;
border-radius: 999px;
transition: width 0.3s ease;
}
.sim-bar-low { background: linear-gradient(90deg, #4a2034, var(--bang)); box-shadow: 0 0 8px rgba(255,59,59,0.4); }
.sim-bar-normal { background: linear-gradient(90deg, #1f3a4a, var(--friend)); box-shadow: 0 0 8px rgba(95,201,248,0.35); }
.sim-bar-high { background: linear-gradient(90deg, #4a3820, var(--wife)); box-shadow: 0 0 8px rgba(250,204,21,0.4); }
/* ---------- Global Scores modal ---------- */
.modal-content-wide { max-width: min(1900px, 98vw); }
.modal-content-narrow { max-width: 640px; }
/* First-open explainer for Global Scores */
.global-intro-body {
margin: 4px 0 24px;
color: var(--text);
font-size: 1.02rem;
line-height: 1.6;
}
.global-intro-body p { margin: 0 0 14px; }
.global-intro-body p:last-child { margin-bottom: 0; }
.global-intro-body strong { color: var(--holo-blue); }
.global-intro-ok { width: 100%; }
/* ---------- Site footer + privacy modal ---------- */
.site-footer {
text-align: center;
padding: 24px 16px 32px;
}
.footer-link {
background: transparent;
border: none;
color: var(--text-dim);
font: inherit;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-decoration: underline;
text-decoration-color: rgba(255,255,255,0.18);
text-underline-offset: 4px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: color 0.15s, background 0.15s;
}
.footer-link:hover {
color: var(--text);
background: rgba(255,255,255,0.04);
text-decoration-color: var(--text);
}
#btn-feedback {
color: #f5c542;
font-size: 0.95rem;
text-decoration-color: rgba(245,197,66,0.45);
}
#btn-feedback:hover {
color: #ffd866;
background: rgba(245,197,66,0.08);
text-decoration-color: #ffd866;
}
.feedback-content { text-align: left; }
.feedback-intro {
color: var(--text-dim);
font-size: 0.92rem;
line-height: 1.5;
margin: 0 0 14px;
}
#feedback-textarea {
width: 100%;
min-height: 140px;
padding: 10px 12px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
font: inherit;
font-size: 0.95rem;
line-height: 1.45;
resize: vertical;
box-sizing: border-box;
}
#feedback-textarea:focus {
outline: none;
border-color: var(--accent, #5fc9f8);
background: rgba(255,255,255,0.06);
}
.feedback-actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
gap: 12px;
}
.feedback-counter {
font-size: 0.8rem;
color: var(--text-dim);
}
.feedback-error {
color: #ef6f6f;
font-size: 0.85rem;
margin: 8px 0 0;
}
.feedback-thanks {
text-align: center;
padding: 20px 8px;
}
.feedback-thanks h3 {
margin: 0 0 10px;
font-size: 1.1rem;
color: var(--text);
}
.feedback-thanks p {
margin: 0;
color: var(--text-dim);
line-height: 1.5;
}
.privacy-content {
text-align: left;
font-size: 0.95rem;
line-height: 1.55;
color: var(--text);
}
.privacy-content h3 {
margin: 22px 0 8px;
font-size: 1rem;
letter-spacing: 0.06em;
color: var(--holo-blue);
text-transform: uppercase;
}
.privacy-content h3:first-child { margin-top: 0; }
.privacy-content p {
margin: 0 0 10px;
color: var(--text);
}
.privacy-content ul {
margin: 0 0 10px;
padding-left: 22px;
}
.privacy-content li {
margin-bottom: 4px;
}
.privacy-content code {
background: rgba(255,255,255,0.06);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 6px;
font-size: 0.85rem;
font-family: ui-monospace, "Cascadia Mono", monospace;
}
.privacy-content em { color: var(--text-dim); font-style: italic; }
.privacy-content strong { color: var(--text); }
.global-loading,
.global-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 24px;
gap: 18px;
color: var(--text-dim);
}
.global-error {
text-align: center;
}
.global-error.hidden {
display: none;
}
.global-error p {
margin: 0;
max-width: 380px;
}
.loading-spinner {
width: 48px;
height: 48px;
border-radius: 50%;
border: 4px solid rgba(0,163,238,0.2);
border-top-color: var(--holo-blue);
animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.global-controls {
display: flex;
justify-content: flex-end;
margin-bottom: 14px;
}
.global-table-wrap {
/* Same self-contained horizontal-scroll behavior as the personal Stat
Rankings wrap — wide table scrolls inside its own box, no special
mobile layout needed. (Side effect: any tooltip on a th may be vertically
clipped because overflow-x silently affects both axes; acceptable, the
tooltips are nice-to-have, not essential.) */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--border);
border-radius: 10px;
}
/* Auto-layout (intentionally NOT table-layout: fixed) — cells size to their
content and the table can grow beyond 100%, letting the wrap's overflow-x
handle horizontal scroll exactly like the personal Stat Rankings table.
The desktop podium/medals section already sets the visible width; the
table just needs to render its rows cleanly. */
.global-table { font-size: 0.9rem; width: 100%; }
.global-table th, .global-table td { padding: 7px 10px; }
.global-table .stat-thumb { width: 32px; height: 32px; }
.global-table .stat-talent-name { font-size: 0.9rem; }
.stat-cell-compact {
white-space: nowrap;
min-width: 80px;
}
.stat-cell-compact .stat-bar {
width: 44px;
height: 7px;
margin-right: 6px;
}
.stat-cell-compact .stat-num { min-width: 22px; font-size: 0.85rem; }
.stat-cell-compact .stat-count { font-size: 0.7rem; margin-left: 3px; }
/* Visually pair each Favor cell with its category percentage cell. */
.stat-cell-favor {
background: rgba(255,255,255,0.025);
border-left: 1px dashed rgba(255,255,255,0.05);
}
/* Generic tooltip for table headers in the global table.
No `position: relative` — the th is already `position: sticky`, which acts
as the containing block for the absolutely-positioned ::before. */
.global-table th[data-tooltip]:hover::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #0f1029;
color: var(--text);
padding: 8px 14px;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
border: 1px solid var(--border);
box-shadow: 0 8px 20px rgba(0,0,0,0.5);
z-index: 100;
pointer-events: none;
}
/* ---------- Medals stack (two banner+row sections) ---------- */
.medals-stack {
display: flex;
flex-direction: column;
gap: 28px;
margin-bottom: 24px;
}
.medals-section-banner {
text-align: center;
margin: 0 0 14px;
font-size: 1.05rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--holo-blue);
text-shadow: 0 0 18px rgba(0,163,238,0.45);
padding-bottom: 10px;
position: relative;
}
.medals-section-banner::after {
content: "";
display: block;
width: 80px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--holo-blue), transparent);
margin: 8px auto 0;
}
.medals-podium-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 980px) {
.medals-podium-row { grid-template-columns: 1fr; }
}
.podium {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 10px 16px;
min-width: 0; /* let grid cell shrink instead of overflowing */
}
.podium-heading {
margin: 0 0 14px;
text-align: center;
font-size: 0.95rem;
letter-spacing: 0.16em;
text-transform: uppercase;
text-shadow: 0 0 12px currentColor;
}
.podium-stage {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 10px;
min-height: 240px;
padding-bottom: 4px;
}
.podium-spot {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 0 0 auto;
}
/* Vertical stagger: gold highest, silver below, bronze lowest. */
.podium-spot.podium-gold { margin-bottom: 36px; }
.podium-spot.podium-silver { margin-bottom: 18px; }
.podium-spot.podium-bronze { margin-bottom: 0; }
.podium-image-wrap {
position: relative;
border-radius: 50%;
}
.podium-spot.podium-gold .podium-image-wrap { width: 176px; height: 176px; }
.podium-spot.podium-silver .podium-image-wrap,
.podium-spot.podium-bronze .podium-image-wrap { width: 132px; height: 132px; }
/* Mid-width screens: scale spots down so the row still fits in one viewport. */
@media (max-width: 1500px) and (min-width: 981px) {
.podium-spot.podium-gold .podium-image-wrap { width: 140px; height: 140px; }
.podium-spot.podium-silver .podium-image-wrap,
.podium-spot.podium-bronze .podium-image-wrap { width: 100px; height: 100px; }
.podium-spot.podium-gold { margin-bottom: 28px; }
.podium-spot.podium-silver { margin-bottom: 14px; }
}
.podium-image-wrap img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
background: #0a0b18;
border: 3px solid rgba(255,255,255,0.08);
box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
.podium-spot.podium-gold .podium-image-wrap img {
border-color: rgba(255,215,0,0.55);
box-shadow: 0 10px 32px rgba(255,200,0,0.35), 0 0 0 4px rgba(255,215,0,0.18);
}
.podium-spot.podium-silver .podium-image-wrap img {
border-color: rgba(200,200,200,0.4);
box-shadow: 0 8px 24px rgba(220,220,220,0.18);
}
.podium-spot.podium-bronze .podium-image-wrap img {
border-color: rgba(205,127,50,0.4);
box-shadow: 0 8px 24px rgba(205,127,50,0.18);
}
.podium-medal {
position: absolute;
bottom: 4px;
left: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
color: #1a1300;
border: 3px solid var(--bg-card);
box-shadow: 0 4px 10px rgba(0,0,0,0.55);
font-variant-numeric: tabular-nums;
}
.podium-spot.podium-gold .podium-medal {
width: 50px; height: 50px;
font-size: 1.4rem;
bottom: 6px; left: -2px;
}
.podium-spot.podium-silver .podium-medal,
.podium-spot.podium-bronze .podium-medal {
width: 38px; height: 38px;
font-size: 1.1rem;
}
.podium-medal-gold {
background: radial-gradient(circle at 30% 25%, #fff5b8, #ffd700 50%, #b8860b);
}
.podium-medal-silver {
background: radial-gradient(circle at 30% 25%, #ffffff, #d8d8d8 50%, #909090);
}
.podium-medal-bronze {
background: radial-gradient(circle at 30% 25%, #ffd9a0, #cd7f32 50%, #6b3a16);
color: #fff5e6;
}
.podium-name {
margin-top: 12px;
font-weight: 700;
font-size: 0.95rem;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.podium-spot.podium-gold .podium-name {
font-size: 1.1rem;
max-width: 200px;
color: #ffd966;
}
.podium-spot.podium-silver .podium-name { color: #d8d8d8; }
.podium-spot.podium-bronze .podium-name { color: #d4a37a; }
.podium-rating {
color: var(--text-dim);
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
@keyframes modalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modalPop {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ===== Mode toggle (Lv 10) ===== */
.mode-toggle {
display: flex;
justify-content: center;
gap: 0;
margin: 0 auto 18px;
max-width: 640px;
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
background: var(--bg-card);
}
.mode-toggle.hidden { display: none; }
.mode-toggle .mode-btn {
flex: 1 1 0;
padding: 9px 16px;
background: transparent;
border: none;
color: var(--text-dim);
font: inherit;
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
}
.mode-toggle .mode-btn + .mode-btn { border-left: 1px solid var(--border); }
.mode-toggle .mode-btn:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.mode-toggle .mode-btn.active {
background: linear-gradient(135deg, #ffd84d 0%, #ff9f1c 100%);
color: #1a0f00;
text-shadow: none;
}
.mode-pane { display: none; }
.mode-pane.active { display: block; }
/* ===== Tournament Mode ===== */
.tour-screen {
max-width: 1100px;
margin: 0 auto;
}
.tour-empty {
text-align: center;
padding: 48px 24px;
background: var(--bg-card);
border: 1px dashed var(--border);
border-radius: 14px;
color: var(--text-dim);
}
.tour-empty h3 { color: var(--text); margin: 0 0 10px; }
.tour-cat-picker {
display: flex;
gap: 12px;
justify-content: center;
margin: 18px 0 0;
flex-wrap: wrap;
}
.tour-cat-btn {
padding: 10px 20px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text);
font: inherit;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
}
.tour-cat-btn:hover { background: rgba(255,255,255,0.10); }
.tour-cat-btn.cat-bang { border-color: rgba(255,59,59,0.50); }
.tour-cat-btn.cat-bang:hover { background: rgba(255,59,59,0.12); }
.tour-cat-btn.cat-wife { border-color: rgba(250,204,21,0.50); }
.tour-cat-btn.cat-wife:hover { background: rgba(250,204,21,0.12); }
.tour-cat-btn.cat-friend { border-color: rgba(95,201,248,0.50); }
.tour-cat-btn.cat-friend:hover { background: rgba(95,201,248,0.12); }
.tour-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.tour-title {
margin: 0;
font-size: 1.2rem;
letter-spacing: 0.02em;
}
.tour-progress {
color: var(--text-dim);
font-variant-numeric: tabular-nums;
font-size: 0.88rem;
}
.tour-roundbar {
height: 6px;
background: rgba(255,255,255,0.06);
border-radius: 999px;
overflow: hidden;
margin-bottom: 18px;
}
.tour-roundbar-fill {
height: 100%;
background: linear-gradient(90deg, #ffd84d, #ff9f1c);
width: 0%;
transition: width 0.3s ease;
}
.tour-toolbar {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin: 0 0 14px;
}
.tour-duel-wrap { margin-bottom: 18px; }
/* ---- Past Champions panel ---- */
.tour-champions {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
margin: 16px 0;
}
.tour-champions.hidden { display: none; }
.tour-champions-title {
margin: 0 0 10px;
font-size: 0.82rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-dim);
}
.tour-champions-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.tour-champions-row {
display: grid;
grid-template-columns: 80px 56px 1fr auto;
gap: 12px;
align-items: center;
padding: 8px 10px;
background: rgba(255,255,255,0.03);
border-radius: 10px;
}
.tour-champions-row.tour-champions-empty {
grid-template-columns: 80px 1fr;
color: var(--text-dim);
font-style: italic;
}
.tour-champions-cat {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 800;
}
.tour-champions-cat.cat-bang { color: var(--bang); }
.tour-champions-cat.cat-wife { color: var(--wife); }
.tour-champions-cat.cat-friend { color: var(--friend); }
.tour-champions-portrait {
width: 56px; height: 56px;
border-radius: 50%;
overflow: hidden;
background: rgba(255,255,255,0.04);
}
.tour-champions-portrait img { width: 100%; height: 100%; object-fit: cover; }
.tour-champions-info { display: flex; flex-direction: column; min-width: 0; }
.tour-champions-name { font-weight: 800; color: var(--text); }
.tour-champions-meta { color: var(--text-dim); font-size: 0.78rem; }
/* ---- Visual bracket ---- */
.tour-bracket-wrap {
margin: 12px 0 18px;
border: 1px solid var(--border);
border-radius: 12px;
background: rgba(0,0,0,0.18);
padding: 12px;
overflow-x: auto;
}
.tour-bracket {
display: flex;
align-items: stretch;
gap: 6px;
min-height: 320px;
}
.tour-bracket-side {
display: flex;
align-items: stretch;
gap: 6px;
}
.tour-bracket-final-side {
display: flex;
align-items: center;
padding: 0 8px;
}
.tour-bracket-round {
display: flex;
flex-direction: column;
min-width: 134px;
}
.tour-bracket-round-label {
text-align: center;
font-size: 0.62rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 4px;
}
.tour-bracket-stack {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 4px;
}
.tour-bracket-match {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 5px;
padding: 3px 6px;
font-size: 0.72rem;
display: flex;
flex-direction: column;
gap: 1px;
}
.tour-bracket-match.current {
border-color: var(--holo-blue);
box-shadow: 0 0 0 2px rgba(0,163,238,0.30), 0 0 12px rgba(0,163,238,0.30);
}
.tour-bracket-match.bye {
background: rgba(255,255,255,0.01);
opacity: 0.65;
}
.tour-bracket-match.resolved { background: rgba(0,0,0,0.20); }
.tour-bracket-final-side .tour-bracket-match {
min-width: 160px;
padding: 8px 10px;
font-size: 0.82rem;
background: linear-gradient(135deg, rgba(255,216,77,0.10), rgba(255,179,29,0.04));
border-color: rgba(255,216,77,0.45);
}
.tour-bracket-row {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-dim);
padding: 1px 0;
}
.tour-bracket-row.winner {
color: var(--text);
font-weight: 800;
}
.tour-bracket-row.loser { text-decoration: line-through; opacity: 0.55; }
.tour-bracket-row.bye { font-style: italic; opacity: 0.6; }
.tour-bracket-name {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.tour-bracket-tbd { color: rgba(255,255,255,0.30); }
.tour-current {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
position: relative;
}
.tour-current-head {
font-size: 0.78rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-dim);
}
.tour-duel {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 14px;
width: 100%;
align-items: stretch;
}
@media (max-width: 540px) {
.tour-duel { grid-template-columns: 1fr; }
.tour-duel-vs { display: none; }
}
.tour-duel-card {
background: rgba(0,0,0,0.30);
border: 2px solid rgba(255,255,255,0.10);
border-radius: 12px;
padding: 14px 12px;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.tour-duel-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.22); }
.tour-duel-card.selected {
border-color: var(--holo-blue);
box-shadow: 0 0 0 3px rgba(0,163,238,0.25), 0 0 24px rgba(0,163,238,0.35);
}
.tour-duel-portrait {
width: 200px;
max-width: 100%;
aspect-ratio: 1 / 1;
border-radius: 12px;
background: rgba(255,255,255,0.04);
overflow: hidden;
}
.tour-duel-portrait img { width: 100%; height: 100%; object-fit: cover; }
.tour-duel-name { font-weight: 800; font-size: 1.1rem; color: var(--text); }
.tour-duel-seed {
font-variant-numeric: tabular-nums;
color: var(--text-dim);
font-size: 0.82rem;
}
.tour-duel-vs {
display: flex;
align-items: center;
font-weight: 900;
font-size: 1.4rem;
color: var(--text-dim);
letter-spacing: 0.1em;
}
.tour-vote {
display: flex;
gap: 10px;
margin-top: 6px;
flex-wrap: wrap;
justify-content: center;
}
.tour-final {
text-align: center;
padding: 36px 20px;
background: radial-gradient(ellipse at center, rgba(255,216,77,0.15), transparent 70%), var(--bg-card);
border: 1px solid rgba(255,216,77,0.40);
border-radius: 16px;
}
.tour-final-banner {
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #ffd84d;
margin-bottom: 10px;
}
.tour-final-portrait {
width: 280px;
max-width: 80%;
aspect-ratio: 1 / 1;
margin: 14px auto;
border-radius: 50%;
overflow: hidden;
border: 4px solid #ffd84d;
box-shadow: 0 0 0 4px rgba(255,216,77,0.20), 0 0 80px rgba(255,179,29,0.55);
animation: tourCrown 1.4s ease-out;
}
@keyframes tourCrown {
0% { transform: scale(0.6); opacity: 0; box-shadow: 0 0 0 0 rgba(255,216,77,0.0); }
60% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1.0); }
}
.tour-final-portrait img { width: 100%; height: 100%; object-fit: cover; }
.tour-final-name {
font-size: 2.4rem;
font-weight: 900;
margin: 12px 0 4px;
background: linear-gradient(135deg, #ffd84d, #ff9f1c);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: tourCrown 1.4s ease-out 0.2s both;
}
.tour-final-meta { color: var(--text-dim); }
.tour-final-actions {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 22px;
flex-wrap: wrap;
}
/* ===== Hanging Out ===== */
.hangout-screen { max-width: 980px; margin: 0 auto; }
.hangout-intro {
text-align: center;
margin: 0 0 14px;
color: var(--text-dim);
font-size: 0.95rem;
font-style: italic;
}
.hangout-picker-instructions {
margin-top: 6px;
color: var(--text);
font-size: 0.92rem;
}
.hangout-picker-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.hangout-picker-count {
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--text-dim);
letter-spacing: 0.04em;
}
.hangout-picker-count.at-target { color: var(--holo-blue); }
.hangout-picker-actions { display: flex; gap: 8px; }
.hangout-picker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 8px;
}
.hangout-picker-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 6px 4px;
background: rgba(0,0,0,0.20);
border: 2px solid rgba(255,255,255,0.06);
border-radius: 10px;
color: var(--text);
font: inherit;
cursor: pointer;
text-align: center;
transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.hangout-picker-tile:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.18); }
.hangout-picker-tile.selected {
border-color: var(--holo-blue);
box-shadow: 0 0 0 2px rgba(0,163,238,0.35), 0 0 16px rgba(0,163,238,0.30);
background: rgba(0,163,238,0.08);
}
.hangout-picker-portrait {
width: 84px;
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
background: rgba(255,255,255,0.04);
}
.hangout-picker-portrait img { width: 100%; height: 100%; object-fit: cover; }
.hangout-picker-name {
font-size: 0.74rem;
line-height: 1.15;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.hangout-activities {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 18px;
}
@media (max-width: 720px) { .hangout-activities { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hangout-activities { grid-template-columns: 1fr; } }
.hangout-act-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--text);
font: inherit;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.hangout-act-btn:hover { background: rgba(255,255,255,0.10); }
.hangout-act-btn.active {
border-color: var(--holo-blue);
background: rgba(0,163,238,0.12);
}
.hangout-act-btn .hangout-act-check {
font-size: 1.2rem;
color: var(--holo-blue);
text-shadow: 0 0 10px rgba(0,163,238,0.50);
}
.hangout-act-btn.in-progress::after {
content: "...";
color: var(--text-dim);
font-weight: 800;
}
.hangout-stage {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px;
}
.hangout-prompt {
text-align: center;
margin: 0 0 14px;
}
.hangout-prompt h3 { margin: 0; color: var(--holo-blue); }
.hangout-prompt p { margin: 6px 0 0; color: var(--text-dim); font-size: 0.92rem; }
.hangout-progress {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 0.82rem;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
}
.hangout-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 720px) { .hangout-cards { grid-template-columns: 1fr; } }
.hangout-card {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(0,0,0,0.30);
border: 2px solid rgba(255,255,255,0.10);
border-radius: 12px;
padding: 12px 10px;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
gap: 6px;
}
.hangout-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.22); }
.hangout-card.selected {
border-color: var(--friend);
box-shadow: 0 0 0 3px rgba(95,201,248,0.30), 0 0 28px rgba(95,201,248,0.30);
}
.hangout-portrait {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 10px;
overflow: hidden;
background: rgba(255,255,255,0.04);
}
.hangout-portrait img { width: 100%; height: 100%; object-fit: cover; }
.hangout-name { font-weight: 800; color: var(--text); text-align: center; font-size: 1rem; }
.hangout-hearts {
display: flex;
gap: 2px;
font-size: 1rem;
color: var(--bang);
letter-spacing: 0.04em;
}
.hangout-heart-empty { color: rgba(255,255,255,0.18); }
.hangout-actions {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 14px;
}
.hangout-ladder-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
margin-bottom: 14px;
}
.hangout-ladder-chip {
padding: 4px 10px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.04em;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text-dim);
font-variant-numeric: tabular-nums;
}
.hangout-ladder-chip.past {
background: rgba(255,255,255,0.10);
color: var(--text);
border-color: rgba(255,255,255,0.18);
}
.hangout-ladder-chip.current {
background: linear-gradient(135deg, #ffd84d 0%, #ff9f1c 100%);
color: #1a0f00;
border-color: rgba(255,216,77,0.6);
box-shadow: 0 0 14px rgba(255,179,29,0.40);
}
.hangout-ladder-chip.upcoming { opacity: 0.65; }
.hangout-cards[data-duel] {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 620px;
margin: 0 auto;
}
@media (max-width: 720px) {
.hangout-cards[data-duel] { grid-template-columns: 1fr; }
}
.hangout-ladder-seed {
color: var(--text-dim);
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
}
.hangout-results { padding: 12px 0; }
.hangout-results-podium {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 18px;
}
@media (max-width: 540px) { .hangout-results-podium { grid-template-columns: 1fr; } }
.hangout-results-spot {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 10px;
border-radius: 12px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
}
.hangout-results-spot.tier-3 { border-color: #ffd84d; box-shadow: 0 0 24px rgba(255,179,29,0.30); }
.hangout-results-spot.tier-2 { border-color: #d6d6d6; }
.hangout-results-spot.tier-1 { border-color: #e0a070; }
.hangout-results-tier {
font-size: 0.72rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-dim);
font-weight: 800;
}
.hangout-results-portrait {
width: 130px; height: 130px;
border-radius: 50%;
overflow: hidden;
}
.hangout-results-portrait img { width: 100%; height: 100%; object-fit: cover; }
.hangout-results-name { font-weight: 800; }
.hangout-results-score {
color: var(--text-dim);
font-variant-numeric: tabular-nums;
font-size: 0.85rem;
}
.hangout-results-leaderboard {
margin-top: 14px;
}
.hangout-results-leaderboard table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
.hangout-results-leaderboard th, .hangout-results-leaderboard td {
padding: 6px 10px;
text-align: left;
border-bottom: 1px solid var(--border);
}
.hangout-results-leaderboard th {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
font-weight: 700;
}
/* ===== Hangout v3 — scene/pair-slot play loop ===== */
.hangout-progress-bar {
flex: 1 1 auto;
max-width: 240px;
height: 6px;
margin-left: 12px;
background: rgba(255,255,255,0.07);
border-radius: 999px;
overflow: hidden;
}
.hangout-progress-bar > span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--holo-blue), var(--holo-orange));
transition: width 240ms ease-out;
}
/* The scene host — 8 pair-slots arranged per activity. */
.hangout-scene {
position: relative;
display: grid;
gap: 24px 24px;
padding: 24px;
border-radius: 14px;
border: 1px solid var(--border);
overflow: hidden;
min-height: 760px;
background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.04), transparent 70%), #0c1118;
}
/* Default arrangement: 2 columns × 4 rows. Thumbs are big enough now that 4
across feels cramped on most screens. */
.hangout-scene { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Stacked-row scenes (trail, bus, theater): single column, 8 rows. */
.hangout-scene.scene-trail,
.hangout-scene.scene-bus,
.hangout-scene.scene-theater {
grid-template-columns: 1fr;
gap: 16px;
}
/* Scenes with a big top decoration need padding so rows don't collide. */
.hangout-scene.scene-theater { padding-top: 124px; }
.hangout-scene.scene-bus { padding-top: 116px; }
.hangout-scene.scene-livingroom { padding-top: 154px; }
@media (max-width: 720px) {
.hangout-scene { grid-template-columns: 1fr; }
}
/* A pair-slot — clickable unit. No box: two thumbs floating with a center gap. */
.pair-slot {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 4px;
padding: 2px;
background: transparent;
border: 0;
border-radius: 10px;
cursor: pointer;
color: inherit;
font: inherit;
text-align: left;
transition: transform 120ms ease-out;
z-index: 1;
}
.pair-slot:hover { transform: translateY(-1px); }
.pair-slot:active { transform: translateY(0); }
/* Thumbnails — round portrait + label, with a livelier wobble. */
.pair-slot .thumb {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
min-width: 0;
animation: hangout-wobble 2.6s ease-in-out infinite;
}
.pair-slot .thumb img {
width: 108px; height: 108px;
object-fit: cover;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.22);
background: #1a1f29;
box-shadow: 0 6px 18px rgba(0,0,0,0.60);
}
.pair-slot .thumb-name {
font-size: 0.82rem;
color: var(--text);
max-width: 128px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
text-shadow: 0 1px 4px rgba(0,0,0,0.90), 0 0 2px rgba(0,0,0,0.85);
}
/* The center gap — the hover target ("Sit here" / "Walk here" / etc.). */
.pair-slot .slot-gap {
position: relative;
width: 68px;
height: 88px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.32);
border-radius: 8px;
border: 1px dashed rgba(255,255,255,0.28);
transition: border-color 140ms ease-out, background 140ms ease-out, box-shadow 140ms ease-out;
}
.pair-slot:hover .slot-gap {
border-color: var(--holo-blue);
background: rgba(43,164,255,0.22);
box-shadow: 0 0 20px rgba(43,164,255,0.40);
}
.pair-slot .slot-cta {
font-size: 0.6rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.60);
text-align: center;
line-height: 1.05;
padding: 0 4px;
text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.pair-slot:hover .slot-cta { color: var(--holo-blue); }
/* Wobble — 50% bigger amplitude than v1, plus a small downward bounce. */
@keyframes hangout-wobble {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-3px) rotate(-1.8deg); }
50% { transform: translateY(1px) rotate(0.3deg); }
75% { transform: translateY(-2px) rotate(2.1deg); }
}
@media (prefers-reduced-motion: reduce) {
.pair-slot .thumb { animation: none; }
}
/* "row" slot style (theater, bus, hiking) — thumbs sit close to the empty
middle, centered on the row. No big spread. */
.hangout-scene.slot-row .pair-slot,
.hangout-scene.scene-trail .pair-slot {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
grid-template-columns: none;
}
.hangout-scene.slot-row .slot-gap {
width: 124px;
height: 100px;
border-style: solid;
border-color: rgba(255,255,255,0.32);
}
/* --- Scene: Hiking (trail) — pines on each side, dirt path down the middle --- */
.hangout-scene.scene-trail {
background:
/* Left-edge pine trees */
url("data:image/svg+xml;utf8,") left top / 60px 90px repeat-y,
/* Right-edge pine trees */
url("data:image/svg+xml;utf8,") right top / 60px 90px repeat-y,
/* Dirt path down the center */
linear-gradient(90deg, transparent 22%, rgba(155,115,75,0.22) 30%, rgba(170,128,84,0.32) 50%, rgba(155,115,75,0.22) 70%, transparent 78%),
/* Sky → forest floor */
linear-gradient(180deg, #3a4a3a 0%, #1f2d1c 18%, #1a2418 100%);
}
.hangout-scene.scene-trail .pair-slot:nth-child(2n) { margin-left: 36px; }
.hangout-scene.scene-trail .pair-slot:nth-child(2n+1) { margin-right: 36px; }
.hangout-scene.scene-trail .slot-gap {
background: rgba(155,115,75,0.18);
border-color: rgba(255,210,160,0.40);
}
/* --- Scene: Watching Movies (theater) — bright screen, side curtains --- */
.hangout-scene.scene-theater {
background:
linear-gradient(90deg, rgba(140,30,30,0.45) 0, rgba(140,30,30,0.28) 32px, transparent 64px),
linear-gradient(270deg, rgba(140,30,30,0.45) 0, rgba(140,30,30,0.28) 32px, transparent 64px),
linear-gradient(180deg, #0c0d14 0%, #08080d 60%, #06060a 100%);
}
.hangout-scene.scene-theater::before {
/* The screen */
content: "";
position: absolute;
top: 16px; left: 10%; right: 10%;
height: 92px;
background: linear-gradient(180deg, #fff8d8 0%, #ffe2a0 55%, rgba(255,200,100,0.55) 100%);
border-radius: 6px;
box-shadow:
0 0 70px rgba(255,235,180,0.50),
0 14px 40px rgba(0,0,0,0.60);
pointer-events: none;
}
/* The empty middle seat looks like a red theater chair */
.hangout-scene.scene-theater .slot-gap {
background: linear-gradient(180deg, rgba(140,40,40,0.55), rgba(80,20,20,0.70));
border: 2px solid rgba(180,70,70,0.65);
border-radius: 6px 6px 4px 4px;
box-shadow: inset 0 -4px 0 rgba(0,0,0,0.30);
}
/* --- Scene: Road Trip (bus) — side windows, windshield, steering wheel --- */
.hangout-scene.scene-bus {
background:
/* Left column of windows */
url("data:image/svg+xml;utf8,") left top / 52px 100px repeat-y,
/* Right column of windows */
url("data:image/svg+xml;utf8,") right top / 52px 100px repeat-y,
linear-gradient(180deg, #1a2436 0%, #14182a 100%);
}
.hangout-scene.scene-bus::before {
/* Windshield */
content: "";
position: absolute;
top: 14px; left: 18%; right: 18%; height: 58px;
background: linear-gradient(180deg, rgba(150,210,255,0.35), rgba(80,120,180,0.18));
border-radius: 16px 16px 4px 4px;
border: 2px solid rgba(120,180,255,0.50);
pointer-events: none;
}
.hangout-scene.scene-bus::after {
/* Steering wheel below windshield */
content: "";
position: absolute;
top: 78px; left: 50%; transform: translateX(-50%);
width: 40px; height: 40px;
border: 5px solid rgba(120,180,255,0.55);
border-radius: 50%;
box-shadow: inset 0 0 0 3px rgba(0,0,0,0.40);
pointer-events: none;
}
/* Middle seat = bus seat */
.hangout-scene.scene-bus .slot-gap {
background: linear-gradient(180deg, rgba(70,90,140,0.45), rgba(35,45,80,0.55));
border: 2px solid rgba(100,140,200,0.60);
border-radius: 6px 6px 4px 4px;
}
/* --- Scene: Tryhard Gaming (LAN) — neon RGB strips top and bottom --- */
.hangout-scene.scene-lan {
background:
radial-gradient(circle at 30% 20%, rgba(43,164,255,0.30), transparent 40%),
radial-gradient(circle at 70% 80%, rgba(255,80,180,0.24), transparent 40%),
radial-gradient(circle at 50% 50%, rgba(80,255,160,0.10), transparent 60%),
linear-gradient(180deg, #0a0d18 0%, #06070d 100%);
}
.hangout-scene.scene-lan::before {
content: "";
position: absolute;
top: 6px; left: 6%; right: 6%; height: 6px;
background: linear-gradient(90deg, #ff44aa, #44aaff, #44ffaa, #ffaa44, #ff44aa);
border-radius: 3px;
opacity: 0.70;
filter: blur(1.5px);
pointer-events: none;
}
.hangout-scene.scene-lan::after {
content: "";
position: absolute;
bottom: 6px; left: 6%; right: 6%; height: 6px;
background: linear-gradient(270deg, #ff44aa, #44aaff, #44ffaa, #ffaa44, #ff44aa);
border-radius: 3px;
opacity: 0.70;
filter: blur(1.5px);
pointer-events: none;
}
/* Middle gap = a monitor between two players */
.hangout-scene.scene-lan .slot-gap {
background: radial-gradient(ellipse at 50% 50%, rgba(43,164,255,0.35), rgba(0,30,60,0.55));
border: 2px solid rgba(43,164,255,0.60);
box-shadow: inset 0 0 12px rgba(43,164,255,0.30);
}
/* --- Scene: Casual Gaming (living room) — TV at top center, warm light --- */
.hangout-scene.scene-livingroom {
background:
radial-gradient(ellipse 32% 80px at 50% 86px, rgba(140,210,255,0.40), transparent 70%),
radial-gradient(ellipse at 50% 100%, rgba(255,180,90,0.12), transparent 70%),
linear-gradient(180deg, #2a201a 0%, #1d1612 100%);
}
.hangout-scene.scene-livingroom::before {
/* The TV */
content: "";
position: absolute;
top: 18px; left: 50%; transform: translateX(-50%);
width: 230px; height: 120px;
background:
repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 5px),
linear-gradient(135deg, #4080a0 0%, #88b0c8 50%, #4080a0 100%);
border: 5px solid #1a0e08;
border-radius: 10px;
box-shadow:
0 0 42px rgba(120,200,255,0.45),
inset 0 0 28px rgba(0,0,0,0.45);
pointer-events: none;
}
.hangout-scene.scene-livingroom::after {
/* TV stand */
content: "";
position: absolute;
top: 142px; left: 50%; transform: translateX(-50%);
width: 120px; height: 10px;
background: #1a0e08;
border-radius: 3px;
pointer-events: none;
}
/* Couch cushion vibe for the middle slot */
.hangout-scene.scene-livingroom .slot-gap {
background: linear-gradient(180deg, rgba(140,90,50,0.45), rgba(80,50,30,0.55));
border: 2px solid rgba(180,120,70,0.55);
border-radius: 14px;
}
/* --- Scene: Office Party — disco ball + confetti + cubicle + copy machine --- */
.hangout-scene.scene-office {
background:
/* Cubicle partition on the left edge */
url("data:image/svg+xml;utf8,") left center / 60px 220px no-repeat,
/* Copy machine in the bottom-right corner */
url("data:image/svg+xml;utf8,") right 18px bottom 18px / 80px 100px no-repeat,
/* Confetti */
url("data:image/svg+xml;utf8,") 0 0 / 140px 140px,
radial-gradient(circle at 20% 30%, rgba(255,80,160,0.24), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(255,200,60,0.24), transparent 40%),
radial-gradient(circle at 50% 50%, rgba(80,200,255,0.16), transparent 60%),
linear-gradient(180deg, #181820 0%, #14141c 100%);
}
.hangout-scene.scene-office::before {
/* Disco ball */
content: "";
position: absolute;
top: 18px; left: 50%; transform: translateX(-50%);
width: 56px; height: 56px;
background:
repeating-conic-gradient(rgba(255,255,255,0.15) 0deg, transparent 25deg, rgba(255,255,255,0.15) 50deg),
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95) 0%, rgba(220,220,240,0.55) 35%, rgba(120,120,160,0.45) 100%);
border-radius: 50%;
box-shadow:
0 0 50px rgba(255,200,255,0.60),
inset -6px -6px 14px rgba(0,0,0,0.45);
pointer-events: none;
}
.hangout-scene.scene-office::after {
/* Hanging cord */
content: "";
position: absolute;
top: 0; left: 50%; transform: translateX(-50%);
width: 1px; height: 18px;
background: rgba(255,255,255,0.40);
pointer-events: none;
}
/* --- Scene: Causing Mischief (alley) — brick wall + streetlamp --- */
.hangout-scene.scene-alley {
background:
radial-gradient(circle at 85% 14%, rgba(255,200,80,0.40), transparent 22%),
url("data:image/svg+xml;utf8,") 0 0 / 80px 40px,
linear-gradient(180deg, #0a0c10 0%, #060708 100%);
}
.hangout-scene.scene-alley::before {
/* Streetlamp pole */
content: "";
position: absolute;
top: 0; right: 14%;
width: 4px; height: 72px;
background: linear-gradient(180deg, #2a1f0e, #1a1006);
pointer-events: none;
}
.hangout-scene.scene-alley::after {
/* Lamp head + glow */
content: "";
position: absolute;
top: 66px; right: 11%;
width: 32px; height: 18px;
background: radial-gradient(ellipse at 50% 30%, #ffe890 0%, #ff9c30 60%, #aa5010 100%);
border-radius: 16px 16px 6px 6px;
box-shadow:
0 0 30px rgba(255,200,80,0.60),
inset 0 -2px 6px rgba(0,0,0,0.40);
pointer-events: none;
}
/* --- Scene: Bar Hopping — bottle shelf at top, counter line --- */
.hangout-scene.scene-bar {
background:
url("data:image/svg+xml;utf8,") top center / 80px 70px repeat-x,
linear-gradient(180deg, transparent 70%, rgba(120,70,30,0.40) 70%, rgba(120,70,30,0.40) 73%, transparent 73%),
radial-gradient(circle at 50% 5%, rgba(255,140,60,0.22), transparent 40%),
linear-gradient(180deg, #1a1410 0%, #0e0a08 100%);
}
/* Bar stool seat */
.hangout-scene.scene-bar .slot-gap {
background: radial-gradient(ellipse at 50% 30%, rgba(200,140,70,0.45), rgba(80,40,20,0.60));
border: 2px solid rgba(220,160,80,0.60);
border-radius: 50% 50% 6px 6px;
}
/* --- Scene: Chillin' (lounge) — living room with throw rug + couches --- */
.hangout-scene.scene-lounge {
background:
/* Throw rug — big warm oval centered, with concentric pattern hints */
radial-gradient(ellipse 64% 50% at 50% 56%, rgba(220,120,80,0.18) 0%, rgba(220,120,80,0.06) 48%, transparent 52%),
radial-gradient(ellipse 60% 47% at 50% 56%, transparent 47%, rgba(180,90,60,0.55) 48%, rgba(180,90,60,0.55) 50%, transparent 51%),
radial-gradient(ellipse 55% 43% at 50% 56%, rgba(200,110,70,0.40) 0%, rgba(160,80,55,0.30) 60%, transparent 75%),
/* Hardwood floor planks at the bottom */
repeating-linear-gradient(90deg, rgba(70,45,28,0.20) 0 92px, rgba(50,32,20,0.20) 92px 96px),
/* Wall → floor gradient (warm room) */
linear-gradient(180deg, #3a2a20 0%, #2a1f18 45%, #221912 100%);
}
.hangout-scene.scene-lounge::before {
/* Houseplant leaves + pot, top-left corner */
content: "";
position: absolute;
top: 10px; left: 14px;
width: 86px; height: 130px;
background:
/* Pot at the bottom */
linear-gradient(180deg, transparent 73%, #8a6040 73%, #5a3a20 96%, #5a3a20 100%),
/* Leaf clusters above */
radial-gradient(ellipse 60% 22% at 50% 22%, #3a7a4a 0%, transparent 70%),
radial-gradient(ellipse 55% 22% at 28% 42%, #2a5a3a 0%, transparent 65%),
radial-gradient(ellipse 55% 22% at 72% 46%, #4a8a5a 0%, transparent 65%),
radial-gradient(ellipse 50% 18% at 50% 58%, #3a7a4a 0%, transparent 65%);
pointer-events: none;
}
.hangout-scene.scene-lounge::after {
/* Floor lamp top-right corner */
content: "";
position: absolute;
top: 14px; right: 22px;
width: 50px; height: 140px;
background:
/* Lamp glow */
radial-gradient(ellipse 60% 22% at 50% 18%, rgba(255,220,160,0.55) 0%, transparent 70%),
/* Lamp shade */
linear-gradient(180deg, transparent 8%, #c8a070 10%, #a07a48 32%, transparent 34%),
/* Lamp pole */
linear-gradient(180deg, transparent 32%, rgba(40,30,18,0.85) 32%, rgba(40,30,18,0.85) 92%, transparent 92%),
/* Lamp base */
linear-gradient(180deg, transparent 90%, #5a3a20 90%, #5a3a20 100%);
pointer-events: none;
}
/* Each pair sits on its own couch silhouette. Pair packs tight in the middle
of its grid cell so the couch is reasonably sized. */
.hangout-scene.scene-lounge .pair-slot {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
grid-template-columns: none;
width: fit-content;
margin: 0 auto;
padding: 14px 22px 18px;
}
.hangout-scene.scene-lounge .pair-slot::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, #6a4830 0%, #543624 55%, #3e2818 100%);
border-radius: 26px 26px 14px 14px;
z-index: -1;
box-shadow:
inset 0 -4px 0 rgba(0,0,0,0.40),
0 10px 22px rgba(0,0,0,0.45);
}
.hangout-scene.scene-lounge .pair-slot::after {
/* Couch front lip */
content: "";
position: absolute;
bottom: -2px; left: 8px; right: 8px;
height: 6px;
background: linear-gradient(180deg, #7a5638, #4a321e);
border-radius: 0 0 12px 12px;
z-index: -1;
}
/* Empty cushion in the middle of the couch */
.hangout-scene.scene-lounge .slot-gap {
background: linear-gradient(180deg, rgba(150,100,70,0.55), rgba(90,60,40,0.65));
border: 2px solid rgba(200,150,100,0.55);
border-radius: 14px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.30);
}
/* ===== Reorder stage (top-5 manual ranking) ===== */
.hangout-reorder-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 14px;
}
.reorder-card {
display: grid;
grid-template-columns: 56px 56px 1fr auto;
align-items: center;
gap: 14px;
padding: 10px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
cursor: grab;
user-select: none;
transition: transform 120ms ease-out, border-color 120ms ease-out, background 120ms ease-out;
}
.reorder-card:hover {
border-color: rgba(255,255,255,0.25);
background: rgba(255,255,255,0.06);
}
.reorder-card.dragging {
opacity: 0.55;
cursor: grabbing;
border-style: dashed;
}
.reorder-card.drag-target {
border-color: var(--holo-blue);
background: rgba(43,164,255,0.10);
}
.reorder-rank {
font-size: 1.3rem;
font-weight: 800;
color: var(--holo-orange);
text-align: center;
font-variant-numeric: tabular-nums;
}
.reorder-portrait {
width: 56px; height: 56px;
border-radius: 50%;
overflow: hidden;
background: #1a1f29;
border: 2px solid rgba(255,255,255,0.18);
}
.reorder-portrait img { width: 100%; height: 100%; object-fit: cover; }
.reorder-name {
font-weight: 700;
color: var(--text);
}
.reorder-cta {
font-size: 0.72rem;
color: var(--text-dim);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Mobile fix — at ≤540px the original 4-column grid (rank | portrait | name |
CTA) overflows because the right-side CTA copy ("Tap to swap into top 5")
has nowhere to wrap. Compress to 3 columns and let the CTA sit on a second
line under the name. Also trim the container's outer gap so the cards use
the full viewport width. */
@media (max-width: 540px) {
.hangout-reorder-list {
margin: 0 -4px 14px;
}
.reorder-card {
grid-template-columns: 32px 48px 1fr;
grid-template-areas:
"rank portrait name"
"rank portrait cta";
grid-template-rows: auto auto;
gap: 4px 10px;
padding: 8px 10px;
align-items: center;
}
.reorder-rank { grid-area: rank; font-size: 1.1rem; }
.reorder-portrait { grid-area: portrait; width: 48px; height: 48px; }
.reorder-name { grid-area: name; align-self: end; font-size: 0.95rem; line-height: 1.15; }
.reorder-cta { grid-area: cta; align-self: start; font-size: 0.7rem; }
}
/* "Wildcard Slot" divider between #5 and the wildcard card. */
.reorder-divider {
display: flex;
align-items: center;
gap: 14px;
margin: 14px 0 2px;
color: var(--holo-orange);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.reorder-divider::before,
.reorder-divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,179,29,0.55), transparent);
}
/* Wildcard card — amber accent so it reads as separate from the top 5. */
.reorder-card.wildcard {
border-color: rgba(255,179,29,0.45);
background: rgba(255,179,29,0.06);
}
.reorder-card.wildcard:hover {
border-color: rgba(255,179,29,0.70);
background: rgba(255,179,29,0.10);
}
.reorder-card.wildcard.drag-target {
border-color: var(--holo-orange);
background: rgba(255,179,29,0.18);
}
.reorder-card.wildcard .reorder-rank {
color: var(--holo-orange);
font-size: 1rem;
letter-spacing: 0.05em;
}
.reorder-card.wildcard .reorder-cta {
color: rgba(255,179,29,0.75);
}
/* Results podium accommodates 5 spots instead of 3. */
.hangout-results-podium-5 {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 900px) {
.hangout-results-podium-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
.hangout-results-podium-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ===== Typecast (Lv 8) ===== */
.typecast-card {
margin: 8px 0 18px;
}
.typecast-card-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 26px 22px;
background:
radial-gradient(ellipse at center, rgba(255,143,29,0.14), transparent 70%),
rgba(255,255,255,0.02);
border: 1px solid rgba(255,179,29,0.30);
border-radius: 14px;
}
.typecast-card-empty {
background: rgba(255,255,255,0.02);
border: 1px dashed rgba(255,255,255,0.12);
}
.typecast-empty-title {
font-weight: 800;
color: var(--text);
margin-bottom: 6px;
}
.typecast-empty-blurb {
color: var(--text-dim);
font-size: 0.9rem;
}
.typecast-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 72px;
height: 72px;
padding: 0 14px;
margin-bottom: 14px;
background: linear-gradient(135deg, #ffd84d 0%, #ff9f1c 100%);
color: #1a0f00;
border-radius: 18px;
font-family: ui-monospace, Menlo, Consolas, monospace;
font-weight: 800;
font-size: 1.6rem;
box-shadow: 0 0 0 2px rgba(255,216,77,0.4), 0 0 24px rgba(255,179,29,0.45);
letter-spacing: 0.02em;
}
.typecast-label {
font-size: 1.85rem;
font-weight: 900;
color: var(--text);
letter-spacing: 0.01em;
line-height: 1.15;
}
.typecast-blurb {
margin-top: 6px;
color: var(--text-dim);
font-size: 0.95rem;
font-style: italic;
}
.typecast-stats {
margin-top: 14px;
color: var(--text);
font-weight: 700;
font-size: 0.92rem;
}
.typecast-rates {
margin-top: 4px;
color: var(--text-dim);
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
}
.typecast-rates .typecast-sep { margin: 0 6px; opacity: 0.5; }
.typecast-runners {
margin-top: 6px;
}
.typecast-runners-title {
margin: 8px 0 8px;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-dim);
}
.typecast-runners-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.typecast-runner {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
overflow: hidden;
}
.typecast-runner-row {
display: grid;
grid-template-columns: 56px 1fr auto auto;
align-items: center;
gap: 12px;
padding: 8px 12px;
}
.typecast-runner-badge {
font-family: ui-monospace, Menlo, Consolas, monospace;
font-weight: 800;
background: rgba(255,179,29,0.18);
color: #ffd84d;
padding: 4px 8px;
border-radius: 8px;
text-align: center;
}
.typecast-runner-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.typecast-runner-label {
color: var(--text);
font-weight: 600;
}
.typecast-runner-blurb {
color: var(--text-dim);
font-size: 0.78rem;
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.typecast-runner-dev {
color: var(--text-dim);
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
align-self: center;
}
/* Members expand toggle on the winner card + each also-ran row */
.typecast-members-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
margin-top: 14px;
background: rgba(0,163,238,0.12);
border: 1px solid rgba(0,163,238,0.40);
border-radius: 999px;
color: var(--text);
font: inherit;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.15s ease;
}
.typecast-members-toggle:hover { background: rgba(0,163,238,0.22); }
.typecast-members-toggle-chev {
display: inline-block;
font-size: 0.80rem;
transition: transform 0.18s ease;
}
.typecast-members-toggle.open .typecast-members-toggle-chev { transform: rotate(180deg); }
.typecast-members-toggle.compact {
margin-top: 0;
padding: 4px 8px;
background: transparent;
border-color: rgba(255,255,255,0.10);
color: var(--text-dim);
}
.typecast-members-toggle.compact:hover {
background: rgba(255,255,255,0.06);
color: var(--text);
}
/* Members panel (chips of matching talents) */
.typecast-members {
padding: 12px 14px 14px;
background: rgba(0,0,0,0.20);
border-top: 1px solid rgba(255,255,255,0.06);
}
.typecast-card-inner > .typecast-members {
margin: 12px -22px -26px;
padding: 12px 22px 16px;
border-radius: 0 0 14px 14px;
}
.typecast-members.hidden { display: none; }
.typecast-members-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
}
.typecast-members-empty {
color: var(--text-dim);
font-style: italic;
text-align: center;
font-size: 0.88rem;
}
.typecast-member-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 3px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 999px;
font-size: 0.82rem;
color: var(--text);
}
.typecast-member-img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
background: rgba(255,255,255,0.08);
}
.typecast-member-name { white-space: nowrap; }
/* Typecast strip inside Archivist summary */
.archivist-typecast {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0 0 22px;
padding: 14px 18px;
background: linear-gradient(135deg, rgba(255,216,77,0.10), rgba(255,179,29,0.04));
border: 1px solid rgba(255,216,77,0.30);
border-radius: 12px;
}
.archivist-typecast-head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.archivist-typecast-key { color: #ffd84d; font-weight: 800; }
.archivist-typecast-dev { color: var(--text-dim); }
.archivist-typecast-body {
display: flex;
align-items: center;
gap: 12px;
}
.archivist-typecast-badge {
font-family: ui-monospace, Menlo, Consolas, monospace;
background: linear-gradient(135deg, #ffd84d, #ff9f1c);
color: #1a0f00;
padding: 6px 12px;
border-radius: 10px;
font-weight: 800;
font-size: 1.1rem;
}
.archivist-typecast-label {
font-size: 1.5rem;
font-weight: 900;
color: var(--text);
}
.archivist-typecast-blurb {
color: var(--text-dim);
font-style: italic;
font-size: 0.9rem;
}
/* ===== Archivist (Lv 10) ===== */
.archivist-loading {
text-align: center;
color: var(--text-dim);
padding: 36px 0;
}
.archivist-totalvotes {
display: flex;
flex-direction: column;
align-items: center;
margin: 8px 0 22px;
padding: 18px 0;
background:
radial-gradient(ellipse at center, rgba(255,216,77,0.10), transparent 70%),
rgba(255,255,255,0.02);
border: 1px solid rgba(255,216,77,0.18);
border-radius: 12px;
}
.archivist-totalvotes-num {
font-size: 2.6rem;
font-weight: 900;
color: #ffd84d;
text-shadow: 0 0 18px rgba(255,216,77,0.45);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.archivist-totalvotes-label {
margin-top: 6px;
color: var(--text-dim);
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.archivist-reveal-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 0 0 24px;
}
@media (max-width: 720px) {
.archivist-reveal-row { grid-template-columns: 1fr; }
}
.archivist-runners-section {
margin-bottom: 24px;
}
.archivist-runners-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 760px) {
.archivist-runners-grid { grid-template-columns: 1fr; }
}
.archivist-runners-col {
background: var(--bg-card, rgba(255,255,255,0.03));
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-radius: 12px;
padding: 12px 12px 14px;
}
.archivist-runners-col-title {
margin: 0 0 10px;
font-size: 0.78rem;
letter-spacing: 0.10em;
text-transform: uppercase;
text-align: center;
font-weight: 800;
}
.archivist-runners-list-mini {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.archivist-runner-mini {
display: grid;
grid-template-columns: 32px 36px 1fr auto;
align-items: center;
gap: 10px;
padding: 6px 8px;
border-radius: 8px;
background: rgba(0,0,0,0.18);
}
.archivist-runner-mini-2 {
background: linear-gradient(90deg, rgba(192,192,192,0.14), rgba(0,0,0,0.18));
border: 1px solid rgba(192,192,192,0.22);
}
.archivist-runner-mini-3 {
background: linear-gradient(90deg, rgba(205,127,50,0.14), rgba(0,0,0,0.18));
border: 1px solid rgba(205,127,50,0.22);
}
.archivist-runner-rank {
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--text);
text-align: center;
}
.archivist-runner-mini-2 .archivist-runner-rank { color: #d6d6d6; }
.archivist-runner-mini-3 .archivist-runner-rank { color: #e0a070; }
.archivist-runner-thumb {
width: 36px; height: 36px;
border-radius: 50%;
overflow: hidden;
background: rgba(255,255,255,0.04);
}
.archivist-runner-thumb img { width: 100%; height: 100%; object-fit: cover; }
.archivist-runner-info { display: flex; flex-direction: column; min-width: 0; }
.archivist-runner-name {
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.88rem;
}
.archivist-runner-meta {
color: var(--text-dim);
font-size: 0.7rem;
font-variant-numeric: tabular-nums;
}
.archivist-runner-rating {
font-weight: 800;
font-variant-numeric: tabular-nums;
font-size: 0.85rem;
}
.archivist-podium-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-bottom: 24px;
}
@media (max-width: 760px) {
.archivist-podium-grid { grid-template-columns: 1fr; }
}
.archivist-podium {
background: var(--bg-card, rgba(255,255,255,0.03));
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-radius: 12px;
padding: 14px 14px 16px;
}
.archivist-podium-title {
margin: 0 0 12px;
font-size: 0.95rem;
letter-spacing: 0.10em;
text-transform: uppercase;
text-align: center;
}
.archivist-podium-true { font-weight: 800; }
.archivist-podium-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.archivist-podium-row {
display: grid;
grid-template-columns: 36px 44px 1fr auto;
align-items: center;
gap: 10px;
padding: 6px 8px;
border-radius: 8px;
background: rgba(0,0,0,0.18);
}
.archivist-podium-row-1 {
background: linear-gradient(90deg, rgba(255,215,0,0.18), rgba(0,0,0,0.18));
border: 1px solid rgba(255,215,0,0.30);
}
.archivist-podium-row-2 {
background: linear-gradient(90deg, rgba(192,192,192,0.16), rgba(0,0,0,0.18));
border: 1px solid rgba(192,192,192,0.25);
}
.archivist-podium-row-3 {
background: linear-gradient(90deg, rgba(205,127,50,0.16), rgba(0,0,0,0.18));
border: 1px solid rgba(205,127,50,0.25);
}
.archivist-podium-rank {
font-weight: 800;
font-size: 0.82rem;
letter-spacing: 0.06em;
color: var(--text);
text-align: center;
}
.archivist-podium-row-1 .archivist-podium-rank { color: #ffd84d; }
.archivist-podium-row-2 .archivist-podium-rank { color: #d6d6d6; }
.archivist-podium-row-3 .archivist-podium-rank { color: #e0a070; }
.archivist-podium-thumb {
width: 44px; height: 44px;
border-radius: 50%;
overflow: hidden;
background: rgba(255,255,255,0.04);
display: flex; align-items: center; justify-content: center;
}
.archivist-podium-thumb img {
width: 100%; height: 100%; object-fit: cover;
}
.archivist-podium-info {
display: flex; flex-direction: column; min-width: 0;
}
.archivist-podium-name {
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.archivist-podium-meta {
color: var(--text-dim);
font-size: 0.74rem;
font-variant-numeric: tabular-nums;
}
.archivist-podium-rating {
font-weight: 800;
color: var(--text);
font-variant-numeric: tabular-nums;
font-size: 0.95rem;
}
.archivist-podium-empty {
text-align: center;
color: var(--text-dim);
font-size: 0.85rem;
padding: 14px 6px;
}
.archivist-section-title {
margin: 6px 0 10px;
font-size: 1rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text);
}
.archivist-hottakes {
margin-bottom: 24px;
}
.archivist-hottakes-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.archivist-hottake {
display: grid;
grid-template-columns: 44px 1fr auto;
align-items: center;
gap: 12px;
padding: 8px 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
}
.archivist-hottake-thumb {
width: 44px; height: 44px;
border-radius: 50%;
overflow: hidden;
background: rgba(255,255,255,0.04);
}
.archivist-hottake-thumb img { width: 100%; height: 100%; object-fit: cover; }
.archivist-hottake-info { display: flex; flex-direction: column; min-width: 0; }
.archivist-hottake-name { font-weight: 700; color: var(--text); }
.archivist-hottake-cat {
font-size: 0.72rem;
letter-spacing: 0.10em;
text-transform: uppercase;
font-weight: 700;
}
.archivist-hottake-rates {
text-align: right;
font-variant-numeric: tabular-nums;
}
.archivist-hottake-delta {
display: block;
font-weight: 800;
color: var(--text);
}
.archivist-hottake-vs {
display: block;
color: var(--text-dim);
font-size: 0.74rem;
}
.archivist-share {
background: rgba(0, 163, 238, 0.06);
border: 1px dashed rgba(0,163,238,0.35);
border-radius: 12px;
padding: 16px 18px;
}
.archivist-share-blurb {
margin: 4px 0 12px;
color: var(--text-dim);
font-size: 0.88rem;
}
.archivist-share-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.archivist-share-url {
flex: 1 1 240px;
min-width: 200px;
padding: 8px 12px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 8px;
color: var(--text);
font: inherit;
font-size: 0.9rem;
font-family: ui-monospace, "Cascadia Mono", monospace;
}
.archivist-share-url:focus { outline: 2px solid var(--holo-blue); outline-offset: 1px; }
.archivist-share-status {
margin: 10px 0 0;
color: var(--text-dim);
font-size: 0.82rem;
min-height: 1.2em;
}
.archive-viewer-cta {
display: flex;
justify-content: center;
margin-top: 18px;
}
/* ===== Feedback admin-reply inbox (user side) ===== */
/* Red unread badge on the footer's Feedback button */
.feedback-inbox-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: #d83838;
color: #fff;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
margin-left: 6px;
box-shadow: 0 0 8px rgba(216, 56, 56, 0.45);
animation: feedback-pulse 1.8s ease-in-out infinite;
}
.feedback-inbox-badge.hidden { display: none; }
@keyframes feedback-pulse {
0%, 100% { box-shadow: 0 0 6px rgba(216, 56, 56, 0.45); }
50% { box-shadow: 0 0 14px rgba(216, 56, 56, 0.85); }
}
/* Replies pane (top of feedback modal). */
.feedback-replies {
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.feedback-replies.hidden { display: none; }
.feedback-replies-heading {
margin: 0 0 12px;
font-size: 1.02rem;
color: var(--holo-blue);
letter-spacing: 0.02em;
}
.feedback-reply-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
border-left: 3px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 10px;
}
.feedback-reply-card.unread {
background: rgba(43, 164, 255, 0.06);
border-left-color: var(--holo-blue);
}
.feedback-reply-row { margin-bottom: 8px; }
.feedback-reply-row:last-child { margin-bottom: 0; }
.feedback-reply-label {
display: block;
font-size: 0.72rem;
color: var(--text-dim);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 4px;
}
.feedback-reply-new {
background: #d83838;
color: #fff;
padding: 1px 6px;
border-radius: 4px;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.06em;
margin-left: 4px;
}
.feedback-reply-text {
font-size: 0.95rem;
line-height: 1.5;
color: var(--text);
white-space: pre-wrap;
word-break: break-word;
}
.feedback-reply-orig .feedback-reply-text {
color: var(--text-dim);
font-style: italic;
}
.feedback-reply-actions {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.feedback-reply-actions .btn { padding: 4px 12px; font-size: 0.82rem; }
/* ===== Suggest a Survey Question modal (shared by /survey + /feud) ===== */
#suggest-textarea {
width: 100%;
background: rgba(0, 0, 0, 0.42);
border: 1px solid var(--border);
color: var(--text);
font: inherit;
font-size: 0.95rem;
line-height: 1.45;
padding: 10px 14px;
border-radius: 8px;
resize: vertical;
min-height: 100px;
}
#suggest-textarea:focus {
outline: 2px solid var(--holo-blue);
outline-offset: 1px;
}
.suggest-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 10px;
}
.suggest-thanks {
background: rgba(80, 220, 120, 0.08);
border: 1px solid rgba(80, 220, 120, 0.30);
border-radius: 10px;
padding: 14px 16px;
text-align: center;
}
.suggest-thanks h3 { color: #5ed27a; margin: 0 0 8px; }
.suggest-thanks-foot { margin: 0; }
/* ===== Reset Profile — small link under the level ticker + confirmation modal ===== */
.reset-profile-btn {
background: linear-gradient(180deg, rgba(216, 56, 56, 0.20), rgba(216, 56, 56, 0.10));
color: var(--text);
border: 2px solid rgba(216, 56, 56, 0.85);
border-radius: 10px;
padding: 10px 18px;
font-size: 0.98rem;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: background 140ms ease, transform 120ms ease, box-shadow 140ms ease;
box-shadow: 0 4px 14px rgba(216, 56, 56, 0.18), 0 0 0 1px rgba(216, 56, 56, 0.10);
}
.reset-profile-btn:hover {
background: linear-gradient(180deg, rgba(216, 56, 56, 0.34), rgba(216, 56, 56, 0.20));
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(216, 56, 56, 0.32), 0 0 0 1px rgba(216, 56, 56, 0.30);
}
.reset-profile-btn:active { transform: translateY(0); }
.reset-profile-btn-icon {
font-size: 1.2rem;
line-height: 1;
color: #ff8a8a;
}
/* Confirmation modal */
.reset-modal-body p {
margin: 0 0 12px;
line-height: 1.55;
color: var(--text);
}
.reset-bullets {
margin: 0 0 14px;
padding-left: 20px;
color: var(--text-dim);
line-height: 1.6;
}
.reset-bullets li strong { color: var(--text); }
.reset-callout {
background: rgba(43, 164, 255, 0.08);
border: 1px solid rgba(43, 164, 255, 0.30);
border-radius: 10px;
padding: 10px 14px;
font-size: 0.92rem;
}
.reset-callout strong { color: var(--holo-blue); }
.reset-warning {
color: #ef6f6f;
font-weight: 700;
text-align: center;
margin: 14px 0 0 !important;
}
.reset-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 18px;
flex-wrap: wrap;
}
@media (max-width: 480px) {
.reset-actions { justify-content: stretch; }
.reset-actions .btn { flex: 1; }
}
.btn-danger {
background: linear-gradient(180deg, #d83838, #a02828);
color: #fff;
border: 2px solid #c43030;
font-weight: 700;
letter-spacing: 0.04em;
padding: 10px 22px;
border-radius: 10px;
cursor: pointer;
transition: transform 120ms ease, box-shadow 140ms ease;
}
.btn-danger:hover {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(200, 40, 40, 0.40);
}
/* ===== Custom Gen Filter button + panel (lives in #my-scores-modal) ===== */
/* Modal-header button (top-right, beside the close X). Made deliberately
prominent so users can find their gen filter — the rankings screen is busy
and this control is easy to miss otherwise. */
.modal-header-actions {
position: absolute;
top: 14px;
right: 64px;
display: inline-flex;
align-items: center;
gap: 10px;
z-index: 5;
}
.modal-header-btn {
background: linear-gradient(180deg, rgba(43, 164, 255, 0.18), rgba(43, 164, 255, 0.08));
color: var(--text);
border: 2px solid var(--holo-blue);
border-radius: 10px;
padding: 10px 18px;
font-size: 0.98rem;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: background 140ms ease, transform 120ms ease, box-shadow 140ms ease;
box-shadow: 0 4px 14px rgba(43, 164, 255, 0.18), 0 0 0 1px rgba(43, 164, 255, 0.10);
}
.modal-header-btn:hover {
background: linear-gradient(180deg, rgba(43, 164, 255, 0.32), rgba(43, 164, 255, 0.18));
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(43, 164, 255, 0.32), 0 0 0 1px rgba(43, 164, 255, 0.30);
}
.modal-header-btn:active { transform: translateY(0); }
.modal-header-btn-icon { font-size: 1.2rem; line-height: 1; color: var(--holo-blue); }
.modal-header-btn-pill {
background: rgba(255, 179, 29, 0.22);
color: var(--holo-orange, #ffb31d);
border: 1px solid rgba(255, 179, 29, 0.55);
border-radius: 999px;
padding: 2px 9px;
font-size: 0.68rem;
letter-spacing: 0.10em;
font-weight: 800;
text-transform: uppercase;
}
.modal-header-btn-pill.hidden { display: none; }
@media (max-width: 720px) {
/* Mobile: lift the action buttons out of the absolute top-right corner
(where they overlapped the "Your Rankings" title) and flow them at the
top of the modal, before the title. Wrap if they don't fit one row. */
.modal-header-actions {
position: static;
top: auto;
right: auto;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
padding-right: 44px; /* leave room for the × close button in the corner */
}
.modal-header-btn,
.reset-profile-btn {
padding: 8px 14px;
font-size: 0.85rem;
gap: 8px;
}
.modal-header-btn-icon,
.reset-profile-btn-icon { font-size: 1.05rem; }
/* Reclaim horizontal space so the rankings tables fit without side-scroll. */
.modal-content { padding: 22px 14px 26px; }
}
@media (max-width: 640px) {
/* Compact the rankings tables (Stat Rankings + Global Scores share this
class) so all columns fit the screen — no more side-scrolling. */
.stat-rankings { font-size: 0.8rem; }
.stat-rankings th,
.stat-rankings td { padding: 6px 5px; }
.stat-talent { min-width: 0; gap: 6px; }
.stat-thumb { width: 26px; height: 26px; }
.stat-talent-name { font-size: 0.8rem; line-height: 1.15; white-space: normal; }
.stat-rankings .stat-bar { display: none; } /* keep the % numbers, drop the bars */
.stat-rankings .stat-count { display: none; } /* drop the (count) detail */
.favor-cat-toggle { padding: 1px 4px; font-size: 0.58rem; }
}
/* The filter panel itself — overlays inside the scoring modal. */
.gen-filter-panel {
position: absolute;
top: 56px;
right: 16px;
z-index: 10;
width: min(520px, calc(100% - 32px));
max-height: 80vh;
display: flex;
flex-direction: column;
background: #0f1322;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
overflow: hidden;
}
.gen-filter-panel.hidden { display: none; }
.gen-filter-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.gen-filter-panel-header h3 {
margin: 0;
color: var(--holo-blue);
font-size: 1.05rem;
letter-spacing: 0.02em;
}
.gen-filter-close {
background: transparent;
border: 0;
color: var(--text-dim);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
padding: 0 4px;
}
.gen-filter-close:hover { color: var(--text); }
.gen-filter-blurb {
margin: 12px 16px;
font-size: 0.88rem;
color: var(--text-dim);
line-height: 1.5;
}
.gen-filter-blurb strong { color: var(--text); }
.gen-filter-list {
flex: 1;
overflow-y: auto;
padding: 0 16px 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 12px;
}
@media (max-width: 540px) {
.gen-filter-list { grid-template-columns: 1fr; }
}
.gen-filter-row {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.gen-filter-row:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(43, 164, 255, 0.40);
}
.gen-filter-row.disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.gen-filter-row input[type="checkbox"] {
margin: 0;
cursor: pointer;
width: 18px;
height: 18px;
accent-color: var(--holo-blue);
}
.gen-filter-row-label {
flex: 1;
display: flex;
flex-direction: column;
font-size: 0.92rem;
color: var(--text);
min-width: 0;
}
.gen-filter-row-count {
font-size: 0.74rem;
color: var(--text-dim);
margin-top: 1px;
}
.gen-filter-footer {
border-top: 1px solid var(--border);
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.gen-filter-counter {
font-size: 0.88rem;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
}
.gen-filter-counter strong { color: var(--text); }
.gen-filter-warning {
color: #ef6f6f;
margin-left: 6px;
font-weight: 600;
}
.gen-filter-warning.hidden { display: none; }
.gen-filter-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
flex-wrap: wrap;
}
.gen-filter-actions .btn { padding: 8px 18px; font-size: 0.9rem; }
/* ===== Global Scores — mobile-only layout fixes ===== */
@media (max-width: 720px) {
/* Slim down the modal padding so the table-wrap has more horizontal room
before it needs to scroll. */
#global-scores-modal .modal-content {
padding: 22px 12px 18px;
}
/* === Podium: stack vertically (gold on top, silver in the middle, bronze at the bottom) === */
/* The per-category podiums also stack vertically so all 3 categories are
readable in order: Fling → Wife → Friend, each with their own 3-medalist column. */
.medals-podium-row {
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
}
.podium {
width: 100% !important;
}
.podium-stage {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
height: auto !important;
min-height: 0 !important;
}
/* The desktop DOM order is silver/gold/bronze (PODIUM_VISUAL_ORDER = [1,0,2])
to make the trophy-stage look. On mobile we want gold first, then silver,
then bronze. Reorder via flex `order`. */
.podium-spot { order: 99; }
.podium-spot.podium-gold { order: 1 !important; }
.podium-spot.podium-silver { order: 2 !important; }
.podium-spot.podium-bronze { order: 3 !important; }
/* Each spot becomes a horizontal strip — thumb left, name + rating right. */
.podium-spot {
display: grid !important;
grid-template-columns: 64px 1fr auto !important;
align-items: center !important;
gap: 12px !important;
padding: 8px 12px !important;
width: 100% !important;
height: auto !important;
max-width: none !important;
min-width: 0 !important;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
border-radius: 10px;
transform: none !important;
}
.podium-image-wrap {
width: 64px !important;
height: 64px !important;
margin: 0 !important;
}
.podium-image-wrap img {
width: 100%; height: 100%; object-fit: cover;
border-radius: 50%;
}
.podium-medal {
width: 22px !important; height: 22px !important;
font-size: 0.8rem !important;
bottom: -2px !important;
right: -2px !important;
}
.podium-name {
font-size: 0.98rem;
text-align: left;
margin: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.podium-rating {
font-size: 0.86rem;
color: var(--text-dim);
text-align: right;
white-space: nowrap;
}
.podium-heading {
text-align: center;
margin-bottom: 6px !important;
}
}
/* Inline BETA badge for the Survey link on the main page. */
.survey-link {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.survey-link-badge {
background: rgba(255, 179, 29, 0.20);
color: #ffb31d;
border: 1px solid rgba(255, 179, 29, 0.40);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.10em;
padding: 1px 6px;
border-radius: 4px;
}
/* ============================================================================
Mobile layout — promoted from /mobile-test on 2026-05-16.
Three breakpoints, in increasing specificity order so the last match wins:
1) ≤540px wide — portrait phones, horizontal strip cards
2) 541-720px wide — landscape phones / small tablets, 3-col with overlay
3) landscape ≤540 tall — short landscape, tightens vertical chrome
All rules scoped under media queries; desktop layout is unchanged.
============================================================================ */
/* ----- (1) PORTRAIT PHONES (≤ 540px) ----- */
@media (max-width: 540px) {
body { padding: 0; }
.site-header { padding: 6px 0 2px; }
.site-header h1 { font-size: 1.5rem; margin: 0; }
#game-screen { padding: 0 10px; }
.legend {
padding: 6px 0 8px;
gap: 14px;
font-size: 1rem;
letter-spacing: 0.08em;
}
/* Three horizontal strips, no spacing waste */
.cards {
display: flex !important;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.card {
display: grid !important;
grid-template-columns: 40% 1fr;
grid-template-rows: 1fr;
/* dvh accounts for mobile browser chrome (URL bar etc) on iOS Safari */
height: clamp(140px, 26dvh, 220px);
align-items: stretch;
position: relative;
}
/* Let the badge escape image-wrap and anchor to .card. overflow:visible +
position:static makes the absolutely-positioned badge climb up to .card
(the next positioned ancestor) instead of image-wrap. */
.card-image-wrap {
aspect-ratio: unset !important;
height: 100% !important;
width: 100%;
overflow: visible !important;
position: static !important;
}
.card-image-wrap img {
height: 100%;
object-fit: cover;
object-position: center top;
border-radius: 6px 0 0 6px;
}
/* Category text ("FLING" / "WIFE" / "FRIEND") sits centered in the empty
space above the name, spanning the info column. No background pill —
just colored text so it doesn't push or crowd anything. */
.card .badge {
position: absolute;
top: 10px;
left: 40%; /* matches grid column 1 width */
right: 0;
margin: 0;
padding: 0 8px;
background: transparent !important;
color: inherit;
box-shadow: none;
text-align: center;
text-transform: uppercase;
font-size: 0.95rem;
font-weight: 800;
letter-spacing: 0.14em;
text-shadow: 0 1px 4px rgba(0,0,0,0.55);
pointer-events: none;
}
.card.cat-bang .badge { color: var(--bang); }
.card.cat-wife .badge { color: var(--wife); }
.card.cat-friend .badge { color: var(--friend); }
.card-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 32px 12px 12px;
text-align: center;
}
.card-name {
font-size: 1.15rem;
line-height: 1.18;
margin: 0;
}
.card-meta {
font-size: 0.76rem;
color: var(--text-dim);
margin: 3px 0 0;
}
/* Selection ring wraps the WHOLE card with an outer glow so it's
unambiguously framing both the image and the info column. */
.card.cat-bang {
border-color: var(--bang);
box-shadow: 0 0 0 3px var(--bang) inset, 0 0 16px 1px var(--bang), var(--shadow);
}
.card.cat-wife {
border-color: var(--wife);
box-shadow: 0 0 0 3px var(--wife) inset, 0 0 16px 1px var(--wife), var(--shadow);
}
.card.cat-friend {
border-color: var(--friend);
box-shadow: 0 0 0 3px var(--friend) inset, 0 0 16px 1px var(--friend), var(--shadow);
}
/* Sticky Vote/Reset bar at the bottom of the viewport */
#mode-standard .actions {
position: sticky;
bottom: 0;
background: rgba(10, 11, 24, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 10px 0 12px;
margin: 0 -10px;
border-top: 1px solid var(--border);
z-index: 50;
flex-wrap: nowrap;
justify-content: center;
gap: 10px;
}
#mode-standard .actions .btn {
padding: 10px 22px;
font-size: 0.95rem;
}
.actions-secondary {
margin-top: 6px;
padding-bottom: 8px;
}
.actions-secondary .btn {
padding: 8px 14px;
font-size: 0.85rem;
}
.ticker { padding: 4px 8px; }
}
/* ----- (2) SMALL TABLETS / LANDSCAPE PHONES (541-720px wide) ----- */
@media (min-width: 541px) and (max-width: 720px) {
body { padding: 0; }
.site-header { padding: 6px 0; }
.site-header h1 { font-size: 1.6rem; margin: 0; }
.legend {
padding: 6px 0 8px;
gap: 16px;
font-size: 1rem;
}
.cards {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px;
margin-bottom: 12px;
}
.card { position: relative; }
.card-image-wrap { aspect-ratio: 3 / 4; }
.card-info {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 30px 10px 8px;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 70%);
text-align: center;
pointer-events: none;
}
.card-name {
margin: 0;
color: #fff;
font-size: 0.98rem;
line-height: 1.15;
text-shadow: 0 1px 4px rgba(0,0,0,0.85);
}
.card-meta { display: none; }
.card .badge {
top: 6px;
right: 6px;
padding: 4px 10px;
font-size: 0.72rem;
}
#mode-standard .actions {
position: sticky;
bottom: 0;
background: rgba(10, 11, 24, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 8px 0 10px;
border-top: 1px solid var(--border);
z-index: 50;
margin-top: 4px;
flex-wrap: nowrap;
}
#mode-standard .actions .btn { padding: 10px 24px; }
.actions-secondary {
margin-top: 6px;
padding-bottom: 8px;
}
}
/* ----- (3) LANDSCAPE PHONES (short viewport, ≤540px tall) ----- */
@media (orientation: landscape) and (max-height: 540px) {
body { padding: 0; }
.site-header { padding: 2px 0; }
.site-header h1 { font-size: 1.2rem; margin: 0; }
.legend {
padding: 2px 0 4px;
gap: 14px;
font-size: 0.9rem;
}
.cards {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px;
margin-bottom: 6px;
}
.card { position: relative; }
.card-image-wrap {
aspect-ratio: unset !important;
height: clamp(140px, 62dvh, 380px);
}
.card-image-wrap img {
height: 100%;
width: 100%;
object-fit: cover;
}
.card-info {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 22px 8px 6px;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 70%);
text-align: center;
pointer-events: none;
}
.card-name {
margin: 0;
color: #fff;
font-size: 0.92rem;
line-height: 1.1;
text-shadow: 0 1px 4px rgba(0,0,0,0.85);
}
.card-meta { display: none; }
.card .badge {
position: absolute;
top: 6px; right: 6px;
padding: 3px 8px;
font-size: 0.68rem;
margin: 0;
align-self: auto;
}
#mode-standard .actions {
position: sticky;
bottom: 0;
background: rgba(10, 11, 24, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 6px 0 8px;
border-top: 1px solid var(--border);
z-index: 50;
margin-top: 4px;
flex-wrap: nowrap;
}
#mode-standard .actions .btn {
padding: 8px 22px;
font-size: 0.9rem;
}
/* Save vertical room — hide secondary chrome below the fold in landscape */
.ticker { display: none; }
.actions-secondary { display: none; }
}
/* ===== Sync Profile modal ===== */
.import-modal-body { display: flex; flex-direction: column; gap: 12px; }
.import-modal-body p { margin: 0; color: var(--text-dim); }
.import-section-label { color: var(--text) !important; font-weight: 600; margin-top: 4px !important; }
.import-hint { font-size: 0.85rem; }
.import-row { display: flex; gap: 8px; }
.import-row input {
flex: 1; padding: 10px 12px; border-radius: 8px;
border: 1px solid var(--border); background: var(--bg); color: var(--text);
font-size: 1.1rem; letter-spacing: 0.15em; font-variant-numeric: tabular-nums;
}
.import-row input:focus { outline: none; border-color: var(--accent); }
.import-status { font-size: 0.88rem; color: var(--holo-blue); }
.import-status.import-status-error { color: var(--bang); }
.import-divider { width: 100%; border: none; border-top: 1px solid var(--border); margin: 6px 0; }
.import-code-display {
margin-top: 8px; padding: 14px; border-radius: 10px;
background: var(--bg); border: 1px solid var(--border); text-align: center;
}
.import-code-value {
font-size: 1.8rem; font-weight: 700; letter-spacing: 0.18em;
color: var(--text); font-variant-numeric: tabular-nums; user-select: all;
}
.import-code-note { font-size: 0.8rem; margin-top: 6px !important; }
.import-code-warning {
font-size: 0.82rem; margin-top: 8px !important; color: var(--wife) !important; font-weight: 600;
}
/* ===== Hot Takes — per-category outliers ===== */
.hot-takes-outliers-section { margin-top: 28px; }
.hot-takes-outliers-section.hidden { display: none; }
.hot-takes-outliers-heading {
margin: 0 0 12px;
font-size: 0.95rem;
font-weight: 700;
color: var(--text-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hot-takes-outliers {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px;
}
.outlier-col {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.outlier-cat-head {
font-weight: 700; font-size: 0.95rem; text-align: center;
padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.outlier-cat-head.cat-bang { color: var(--bang); }
.outlier-cat-head.cat-wife { color: var(--wife); }
.outlier-cat-head.cat-friend { color: var(--friend); }
.outlier-row { display: flex; align-items: center; gap: 8px; }
.outlier-rank { width: 14px; color: var(--text-dim); font-size: 0.8rem; flex: none; text-align: center; }
.outlier-img {
width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none;
background: var(--bg);
}
.outlier-name { flex: 1; font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outlier-stat { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.outlier-delta { font-weight: 700; font-size: 0.9rem; }
.outlier-rates { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; }
.outlier-empty { color: var(--text-dim); font-size: 0.85rem; text-align: center; padding: 8px 0; }
@media (max-width: 640px) {
.hot-takes-outliers { grid-template-columns: 1fr; }
}