* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Inter', system-ui, sans-serif;
}

:root {
    --bg-color: #0d0a1a;
    --snd-bg-color: #141024;
    --card-bg: #1c1533;
    --text-color: #ece9f5;
    --text-muted: #6b6085;
    --main-color: #7c3aed;
    --accent-color: #a78bfa;
    --border-color: #231d3a;
    --main-color-rgb: 124, 58, 237;
    --accent-color-rgb: 167, 139, 250;
    --bg-color-rgb: 13, 10, 26;
    --rating-color: #c9a84c;
    --status-reading: #64b4ff;
    --status-on-hold: #ffc850;
    --status-dropped: #dc5050;
    --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --section-padding: 10rem 9% 6rem;
}

/* Slate Theme */
body.theme-slate {
    --bg-color: #0d0f1a;
    --snd-bg-color: #131625;
    --card-bg: #1a1f35;
    --text-color: #e8eaf6;
    --text-muted: #5c6894;
    --main-color: #6366f1;
    --accent-color: #a5b4fc;
    --border-color: #1e2440;
    --main-color-rgb: 99, 102, 241;
    --accent-color-rgb: 165, 180, 252;
    --bg-color-rgb: 13, 15, 26;
}

/* Crimson Theme */
body.theme-crimson {
    --bg-color: #130a0d;
    --snd-bg-color: #1e0f14;
    --card-bg: #2a1520;
    --text-color: #fde8ec;
    --text-muted: #8a4a58;
    --main-color: #e11d48;
    --accent-color: #fb7185;
    --border-color: #3a1a24;
    --main-color-rgb: 225, 29, 72;
    --accent-color-rgb: 251, 113, 133;
    --bg-color-rgb: 19, 10, 13;
}

/* Theme overrides for html element (fixes scrollbar color) */
html.theme-slate {
    --main-color-rgb: 99, 102, 241;
    --bg-color: #0d0f1a;
    --bg-color-rgb: 13, 15, 26;
    scrollbar-color: rgba(99, 102, 241, 0.3) #0d0f1a;
}

html.theme-crimson {
    --main-color-rgb: 225, 29, 72;
    --bg-color: #130a0d;
    --bg-color-rgb: 19, 10, 13;
    scrollbar-color: rgba(225, 29, 72, 0.3) #130a0d;
}

/* Webkit scrollbar theme overrides */
html.theme-slate::-webkit-scrollbar-track { background: #0d0f1a; }
html.theme-slate::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); }
html.theme-slate::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.5); }

html.theme-crimson::-webkit-scrollbar-track { background: #130a0d; }
html.theme-crimson::-webkit-scrollbar-thumb { background: rgba(225, 29, 72, 0.3); }
html.theme-crimson::-webkit-scrollbar-thumb:hover { background: rgba(225, 29, 72, 0.5); }

/* Lights Off Mode — overrides surface colors only */
body.lights-off {
    --bg-color: #000000;
    --snd-bg-color: #040404;
    --card-bg: #0a0a0a;
    --border-color: #1a1a1a;
    --bg-color-rgb: 0, 0, 0;
    background-image: radial-gradient(circle, rgba(var(--main-color-rgb), 0.04) 1px, transparent 1px);
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
}

/* Parallax Dot Pattern */
.parallax-dots {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(var(--main-color-rgb), 0.12) 1px, transparent 1px);
    background-size: 30px 30px;
    will-change: transform;
}

body.lights-off .parallax-dots {
    background-image: radial-gradient(circle, rgba(var(--main-color-rgb), 0.04) 1px, transparent 1px);
}

/* Hero Load Sequence */
.hero-hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-hidden.hero-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

canvas.hero-hidden {
    opacity: 0;
    transform: none;
    transition: opacity 0.8s ease;
}

canvas.hero-hidden.hero-visible {
    opacity: 1;
}

.home-img.hero-hidden {
    transform: translateY(20px) scale(0.92);
}

.home-img.hero-hidden.hero-visible {
    transform: translateY(0) scale(1);
}

section {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 10rem 9% 2rem;
    position: relative;
}

/* Custom Scrollbar */

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--main-color-rgb), 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--main-color-rgb), 0.5);
}

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--main-color-rgb), 0.3) var(--bg-color);
}

/* Scroll Progress Bar */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--main-color), var(--accent-color));
    z-index: 1001;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.05s linear;
}

/* Particles Canvas */

.particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.home {
    position: relative;
}

.home > *:not(.particles-canvas) {
    position: relative;
    z-index: 1;
}

/* Gradient Name */

.gradient-name {
    background: linear-gradient(135deg, var(--text-color) 0%, var(--accent-color) 50%, var(--text-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: nameGlow 3s ease-in-out infinite alternate;
    font-family: var(--font-heading);
}

@keyframes nameGlow {
    0%   { filter: drop-shadow(0 0 6px rgba(var(--accent-color-rgb), 0.15)); }
    100% { filter: drop-shadow(0 0 18px rgba(var(--accent-color-rgb), 0.35)); }
}

/* Skip Link */

.skip-link {
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-bg);
    color: var(--text-color);
    padding: 1rem 2rem;
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    font-size: 1.5rem;
    z-index: 9999;
    transition: top 0.2s ease;
    white-space: nowrap;
}

.skip-link:focus {
    top: 1rem;
}

/* Visually hidden but accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus Styles */

:focus-visible {
    outline: 2px solid var(--text-muted);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Cursor Spotlight */

.cursor-spotlight {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(var(--spotlight-rgb, var(--main-color-rgb)), var(--spotlight-intensity, 0.1)) 0%, rgba(var(--spotlight-rgb, var(--main-color-rgb)), calc(var(--spotlight-intensity, 0.1) * 0.4)) 40%, transparent 70%);
    transition: background 0.6s ease, opacity 0.3s ease;
    left: -300px;
    top: -300px;
}

.cursor-spotlight.spotlight-hover {
    background: radial-gradient(circle, rgba(var(--spotlight-rgb, var(--main-color-rgb)), calc(var(--spotlight-intensity, 0.1) + 0.08)) 0%, rgba(var(--spotlight-rgb, var(--main-color-rgb)), calc(var(--spotlight-intensity, 0.1) * 0.7)) 40%, transparent 70%);
}

@media (hover: none) {
    .cursor-spotlight { display: none; }
}

/* Header */

.header {
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 5%;
    background: rgba(var(--bg-color-rgb), 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.5s ease;
}

.logo {
    font-size: 2.8rem;
    color: var(--text-color);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: -0.02em;
}

.logo:hover {
    color: var(--accent-color);
}

.navbar {
    margin-left: auto;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: calc(100% - 320px);
    mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 1rem), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 1rem), transparent);
}

.navbar::-webkit-scrollbar {
    display: none;
}

.navbar a {
    font-size: 1.4rem;
    color: var(--text-muted);
    margin-left: 2rem;
    font-weight: 500;
    transition: 0.3s ease;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.navbar a:hover,
.navbar a.active {
    color: var(--text-color);
}

.theme-toggle {
    margin-left: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color, #444);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 2rem;
    transition: 0.3s ease;
}

.theme-toggle:hover {
    color: var(--text-color);
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.1);
}

.lights-toggle {
    margin-left: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color, #444);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 2rem;
    transition: 0.3s ease;
}

.lights-toggle:hover {
    color: var(--text-color);
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.1);
}

body.lights-off .lights-toggle {
    color: var(--accent-color);
    border-color: var(--accent-color);
}


.logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 0.8rem;
}

#menu-icon {
    font-size: 3.2rem;
    color: var(--text-color);
    cursor: pointer;
    display: none;
    margin-left: 1.2rem;
    transition: transform 0.3s ease;
}

@keyframes menuOpenAnim {
    from { transform: rotate(-45deg) scale(0.7); opacity: 0; }
    to   { transform: rotate(0deg) scale(1); opacity: 1; }
}

#menu-icon.bx-x {
    animation: menuOpenAnim 0.25s ease forwards;
}

/* Home */

.home {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6rem;
}

.home-img {
    flex-shrink: 0;
}

.home-img img {
    width: 22vw;
    max-width: 280px;
    border-radius: 50%;
    border: 2px solid rgba(var(--main-color-rgb), 0.3);
    box-shadow: 0 0 25px rgba(var(--main-color-rgb), 0.15), 0 0 60px rgba(var(--main-color-rgb), 0.05);
    cursor: pointer;
    animation: floatImage 4s ease-in-out infinite;
    transition: 0.4s;
}

.home-img img:hover {
    border-color: rgba(var(--main-color-rgb), 0.5);
    box-shadow: 0 0 35px rgba(var(--main-color-rgb), 0.25), 0 0 80px rgba(var(--main-color-rgb), 0.1);
}

@keyframes floatImage {
    0% { transform: translateY(0); }
    50% { transform: translateY(-1.8rem); }
    100% { transform: translateY(0); }
}


.home-content {
    margin-left: 2rem;
    flex: 1;
}

.home-content h3 {
    font-size: 2.8rem;
    font-weight: 400;
    color: var(--text-muted);
}

.home-content h3:nth-of-type(2) {
    margin-bottom: 1.5rem;
    display: inline-block;
    white-space: nowrap;
}

.home-content h3 span {
    color: var(--accent-color);
}

.home-content h1 {
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-color);
    letter-spacing: -0.02em;
    font-family: var(--font-heading);
}

/* Section color accent transitions */
.heading span {
    color: var(--accent-color);
    transition: color 0.6s ease;
}

section .watchlist-item:hover {
    border-color: rgba(var(--section-accent-rgb, var(--main-color-rgb)), 0.5);
}

section .thought-card:hover {
    border-color: rgba(var(--section-accent-rgb, var(--main-color-rgb)), 0.4);
}

.tagline {
    font-size: 1.6rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 1.5rem;
    letter-spacing: 0.02em;
    min-height: 2.4rem;
    white-space: nowrap;
}

.social-media {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.social-media a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    font-size: 1.8rem;
    color: var(--text-muted);
    margin: 2.5rem 1rem 2rem 0;
    transition: 0.3s ease;
    position: relative;
}

.social-media a:hover {
    border-color: var(--accent-color);
    color: var(--text-color);
    background: rgba(200, 200, 200, 0.05);
}

.social-media a[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    font-size: 1.1rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

.btn {
    display: inline-block;
    padding: 1rem 1.2rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4rem;
    font-size: 1.5rem;
    color: var(--text-color);
    letter-spacing: 0.05em;
    font-weight: 500;
    transition: 0.3s ease;
    cursor: pointer;
}

.btn:hover {
    background: var(--accent-color);
    color: var(--bg-color);
    border-color: var(--accent-color);
}

.btn-ghost {
    padding: 1rem;
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-muted);
}

.btn-ghost:hover {
    background: rgba(var(--main-color-rgb), 0.1);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.hero-buttons {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.hero-status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.4rem;
    background: rgba(var(--main-color-rgb), 0.1);
    border: 1px solid rgba(var(--main-color-rgb), 0.25);
    border-radius: 4rem;
    font-size: 1.3rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.chester-status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1.2rem;
    background: rgba(var(--main-color-rgb), 0.08);
    border: 1px solid rgba(var(--main-color-rgb), 0.2);
    border-radius: 4rem;
    font-size: 1.3rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.chester-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    animation: statusPulse 2.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
    50%       { opacity: 0.7; box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

.hero-status i {
    font-size: 1.5rem;
    color: var(--accent-color);
}

.scroll-indicator {
    position: absolute;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    color: var(--text-muted);
    text-decoration: none;
    animation: scrollBounce 2s ease-in-out infinite;
    transition: opacity 0.4s ease;
    z-index: 2;
}

.scroll-indicator.hidden {
    opacity: 0;
    pointer-events: none;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* About */

.about {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rem;
    background: var(--snd-bg-color);
}

.about-img img {
    width: 28vw;
    max-width: 350px;
    border-radius: 50%;
    border: 2px solid rgba(var(--main-color-rgb), 0.3);
    box-shadow: 0 0 25px rgba(var(--main-color-rgb), 0.15), 0 0 60px rgba(var(--main-color-rgb), 0.05);
    cursor: pointer;
    transition: 0.4s;
}

.about-img img:hover {
    border-color: rgba(var(--main-color-rgb), 0.5);
    box-shadow: 0 0 35px rgba(var(--main-color-rgb), 0.25), 0 0 80px rgba(var(--main-color-rgb), 0.1);
}

.about-img {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heading {
    font-size: 5.5rem;
    text-align: center;
    font-weight: 700;
    margin-bottom: 3rem;
    letter-spacing: -0.02em;
    color: var(--text-color);
    font-family: var(--font-heading);
}

.about-content {
    padding: 0 2rem;
    flex: 1 1 55%;
    text-align: left;
}

.about-content h2 {
    text-align: left;
    margin-bottom: 2rem;
}

.about-content p {
    max-width: 56ch;
    font-size: 1.7rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 1.6rem;
}

.about-content .section-subtitle {
    text-align: left;
    margin-bottom: 2rem;
}

.about-pullquote {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-color);
    border-radius: 0 1.2rem 1.2rem 0;
    padding: 2rem 2.4rem 2rem 3.6rem;
    font-size: 1.8rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 1.6rem;
    max-width: 56ch;
}

.about-pullquote .bx-quote-left {
    position: absolute;
    top: 1.4rem;
    left: 1rem;
    font-size: 2.2rem;
    color: var(--accent-color);
    opacity: 0.5;
}

.about-pullquote strong {
    color: var(--accent-color);
    font-style: normal;
}

.about-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

.about-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1.2rem;
    background: rgba(var(--main-color-rgb), 0.08);
    border: 1px solid rgba(var(--main-color-rgb), 0.2);
    border-radius: 4rem;
    font-size: 1.25rem;
    color: var(--text-muted);
    transition: 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.about-chip:hover {
    background: rgba(var(--main-color-rgb), 0.15);
    border-color: rgba(var(--main-color-rgb), 0.4);
    color: var(--text-color);
}

.about-chip i {
    font-size: 1.4rem;
    color: var(--accent-color);
}

.about-fact {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    margin-top: 2rem;
    max-width: 56ch;
    transition: border-color 0.3s ease;
}

.about-fact[open] {
    border-color: rgba(var(--main-color-rgb), 0.4);
}

.about-fact summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.2rem 1.6rem;
    font-size: 1.4rem;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    transition: color 0.3s ease;
}

.about-fact summary::-webkit-details-marker {
    display: none;
}

.about-fact summary i {
    font-size: 1.6rem;
    color: var(--accent-color);
}

.about-fact summary:hover {
    color: var(--accent-color);
}

.about-fact p {
    padding: 0 1.6rem 1.4rem;
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* Stats */

.stats {
    background: var(--snd-bg-color);
    padding: 6rem 9%;
    text-align: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 3rem auto 0;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 2.4rem 1.6rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1.2rem;
    transition: 0.3s ease;
}

.stat-card:hover {
    border-color: var(--main-color);
    box-shadow: 0 0 20px rgba(var(--main-color-rgb), 0.15);
}

.stat-number {
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.stat-card:hover .stat-number {
    transform: scale(1.08);
    text-shadow: 0 0 20px rgba(var(--main-color-rgb), 0.4);
}

.stat-label {
    transition: color 0.3s ease;
}

.stat-card:hover .stat-label {
    color: var(--accent-color);
}

.stat-number {
    font-size: 4rem;
    font-weight: 700;
    color: var(--main-color);
    line-height: 1;
    letter-spacing: -0.02em;
    font-family: var(--font-heading);
}

.stat-label {
    font-size: 1.3rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Interests */

.interests {
    background: var(--bg-color);
    padding-bottom: 8rem;
}

.interests-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.interest-card {
    background: var(--snd-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 1.2rem;
    padding: 3.5rem 3rem;
    transition: 0.3s ease;
}

.interest-card:hover {
    border-color: var(--main-color);
    box-shadow: 0 0 20px rgba(var(--main-color-rgb), 0.12);
}

.interest-card i {
    font-size: 3.5rem;
    color: var(--main-color);
    margin-bottom: 1.5rem;
    display: block;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.interest-card:hover i {
    transform: translateY(-4px) scale(1.1);
    text-shadow: 0 0 16px rgba(var(--main-color-rgb), 0.5);
}

.interest-card h3 {
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.interest-card:hover h3 {
    color: var(--main-color);
}

.interest-card p {
    font-size: 1.5rem;
    line-height: 1.7;
    color: var(--text-muted);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.interest-card:hover p {
    opacity: 1;
}

/* Currently Watching */

.currently-watching {
    background: var(--snd-bg-color);
    position: relative;
    min-height: auto;
    padding-bottom: 8rem;
}

/* Currently Watching banner (merged into watchlist) */
.watching-banner {
    margin-bottom: 3rem;
}

.watching-banner-label {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--main-color);
    margin-bottom: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.watching-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    max-width: 800px;
    margin: 0 auto;
}

.watch-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1.2rem;
    padding: 3rem;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    transform-style: preserve-3d;
}

.watch-item:hover {
    border-color: var(--main-color);
    box-shadow: 0 8px 30px rgba(var(--main-color-rgb), 0.10),
                0 0 20px rgba(var(--main-color-rgb), 0.06);
}

.watch-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--main-color);
    border-radius: 0 3px 3px 0;
    transition: transform 0.3s ease;
}

.watch-item:hover::after {
    transform: translateY(-50%) scaleY(1);
}

.watch-label {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--main-color);
    margin-bottom: 2.2rem;
    padding: 0.5rem 1.4rem;
    background: rgba(var(--main-color-rgb), 0.08);
    border: 1px solid rgba(var(--main-color-rgb), 0.15);
    border-radius: 0.6rem;
    display: inline-block;
    transition: letter-spacing 0.3s ease;
}

.watch-item:hover .watch-label {
    letter-spacing: 0.18em;
}

.watch-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.watch-entry {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.2rem 1.4rem;
    border-radius: 0.8rem;
    transition: background 0.25s ease;
    opacity: 0;
    animation: fadeInUp 0.4s ease forwards;
}

.watch-entry:nth-child(1) { animation-delay: 0.05s; }
.watch-entry:nth-child(2) { animation-delay: 0.10s; }
.watch-entry:nth-child(3) { animation-delay: 0.15s; }
.watch-entry:nth-child(4) { animation-delay: 0.20s; }
.watch-entry:nth-child(5) { animation-delay: 0.25s; }
.watch-entry:nth-child(6) { animation-delay: 0.30s; }
.watch-entry:nth-child(7) { animation-delay: 0.35s; }
.watch-entry:nth-child(8) { animation-delay: 0.40s; }

.watch-entry:hover {
    background: rgba(var(--main-color-rgb), 0.04);
}

.watch-entry > i {
    font-size: 1.3rem;
    color: var(--main-color);
    margin-top: 0.5rem;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.watch-entry:hover > i {
    opacity: 1;
    transform: translateX(3px);
}

.watch-entry h4 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.3;
    transition: color 0.2s ease;
}

.watch-entry:hover h4 {
    color: var(--accent-color);
}

.watch-detail {
    font-size: 1.2rem;
    color: var(--text-muted);
    font-style: normal;
    letter-spacing: 0.02em;
}

.watch-entry-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
}

.watch-progress-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.6rem;
}

.watch-progress-wrap {
    height: 6px;
    background: rgba(var(--main-color-rgb), 0.10);
    border-radius: 6px;
    overflow: hidden;
    flex: 1;
    position: relative;
}

.watch-progress-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--main-color), var(--accent-color));
    border-radius: 6px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 8px rgba(var(--main-color-rgb), 0.3);
    position: relative;
    overflow: hidden;
}

.watch-progress-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%
    );
    animation: progressShine 2.5s ease-in-out infinite;
}

@keyframes progressShine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.watch-progress-bar--ongoing {
    transform: scaleX(1);
    opacity: 0.5;
    animation: ongoingPulse 2s ease-in-out infinite;
}

@keyframes ongoingPulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.6; }
}

.watch-ep-label {
    font-size: 1.1rem;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.watch-pct-badge {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--main-color);
    background: rgba(var(--main-color-rgb), 0.10);
    padding: 0.2rem 0.7rem;
    border-radius: 1rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .watch-entry { animation: none; opacity: 1; }
    .watch-progress-bar::after { animation: none; }
    .watch-progress-bar { transition-duration: 0.01s; }
    .watch-progress-bar--ongoing { animation: none; opacity: 0.4; }
}

/* Contact */

.contact {
    background: var(--bg-color);
}

.contact h2 {
    margin-bottom: 1rem;
}

.contact-subtitle {
    text-align: center;
    font-size: 1.6rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
}

.contact form {
    max-width: 60rem;
    margin: 0 auto;
    text-align: center;
}

.contact form .input-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.contact form .input-box input,
.contact form textarea {
    width: 100%;
    padding: 1.4rem 1.6rem;
    font-size: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    color: var(--text-color);
    background: var(--snd-bg-color);
    margin: 0.5rem 0;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.contact form .input-box input:focus,
.contact form textarea:focus {
    border-color: var(--main-color);
}

.contact form textarea {
    min-height: 14rem;
    line-height: 1.5;
}

.contact form .input-box input {
    width: 48%;
}

.contact form .btn {
    margin-top: 1rem;
    padding: 1.2rem 4rem;
}

/* Contact form helpers */
.honeypot-wrapper { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.honeypot { position: absolute; left: -9999px; }

.contact-feedback { margin-top: 1rem; min-height: 2.4rem; font-size: 1.5rem; }
.contact-feedback.success { color: #4caf50; }
.contact-feedback.error { color: #ef5350; }

/* Page Load Animation */

body.loading {
    opacity: 0;
}

body {
    transition: opacity 0.6s ease;
}

/* Scroll Reveal */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* Active Nav Link */

.navbar a.active-link {
    color: var(--text-color);
}

/* Picks Filter */

.picks-filter {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.7rem 2rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4rem;
    font-size: 1.4rem;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--card-bg);
    color: var(--text-color);
    border-color: var(--main-color);
    box-shadow: 0 0 12px rgba(var(--main-color-rgb), 0.25);
}

.pick-card.hidden {
    display: none;
}

/* Top Picks */

.picks {
    background: var(--snd-bg-color);
}

.picks-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.pick-card {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem 2.2rem;
    transition: 0.3s ease;
}

.pick-card:hover {
    border-color: var(--main-color);
    box-shadow: 0 4px 24px rgba(var(--main-color-rgb), 0.15);
}

.pick-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--snd-bg-color);
    border-radius: 0.8rem;
    transition: transform 0.3s ease, background 0.3s ease;
}

.pick-card:hover .pick-icon {
    transform: scale(1.12);
    background: rgba(var(--main-color-rgb), 0.15);
}

.pick-icon i {
    font-size: 2.2rem;
    color: var(--main-color);
}

.pick-info h4 {
    transition: color 0.25s ease;
}

.pick-card:hover .pick-info h4 {
    color: var(--main-color);
}

.pick-info h4 {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.3;
}

.pick-tag {
    display: inline-block;
    font-size: 1.1rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0.3rem 0 0.5rem;
}

.pick-info p {
    font-size: 1.4rem;
    color: var(--text-muted);
    line-height: 1.4;
    font-style: italic;
}

/* Random Quote */

.quotes {
    background: var(--bg-color);
    min-height: auto;
    padding: 6rem 9%;
}

.quote-box {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
    padding: 4rem 3rem;
    background: var(--snd-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 1.2rem;
}

.quote-icon {
    font-size: 4rem;
    color: var(--border-color);
    margin-bottom: 1.5rem;
    display: block;
}

.quote-text {
    font-size: 2rem;
    color: var(--text-color);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 1.2rem;
    min-height: 3.2rem;
    overflow-wrap: break-word;
}

.quote-source {
    font-size: 1.4rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 2rem;
}

.quote-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.quote-btn i {
    font-size: 1.8rem;
    color: inherit;
    transition: transform 0.1s ease;
}

@keyframes spinOnce {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.quote-btn i.spinning {
    animation: spinOnce 0.5s ease;
}

/* What I Listen To */

.listen-section {
    background: var(--snd-bg-color);
}

.listen-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.rounded-embed {
    border-radius: 12px;
}

.listen-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1.2rem;
    padding: 2rem;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.listen-card:hover {
    border-color: rgba(var(--main-color-rgb), 0.4);
    box-shadow: 0 0 20px rgba(var(--main-color-rgb), 0.08);
}

.listen-card iframe {
    display: block;
}

.listen-label {
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--main-color);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.listen-note {
    text-align: center;
    font-size: 1.3rem;
    color: var(--text-muted);
    margin-top: 2.5rem;
    font-style: italic;
}

/* ============================================================
   MUSIC TASTE
   ============================================================ */

.music-taste {
    background: var(--bg-color);
    min-height: auto;
    padding-bottom: 8rem;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.5rem;
    margin-bottom: 3.5rem;
}

.music-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 4rem;
    align-items: start;
    max-width: 1100px;
    margin: 4rem auto 0;
}

.music-sub-heading {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.6rem;
}

.artist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.artist-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.4rem 1.6rem;
    transition: border-color 0.2s, transform 0.2s;
}

.artist-card:hover {
    border-color: var(--main-color);
    transform: translateY(-2px);
}

.artist-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.4rem;
}

.artist-genre {
    font-size: 1.1rem;
    color: var(--main-color);
    margin-bottom: 0.5rem;
}

.artist-note {
    font-size: 1.2rem;
    color: var(--text-muted);
    font-style: italic;
}

.vibes-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.vibe-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    padding: 1.2rem 1.4rem;
}

.vibe-mood {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--accent-color);
    white-space: nowrap;
    min-width: 9rem;
}

.vibe-what {
    font-size: 1.3rem;
    color: var(--text-muted);
}

/* ============================================================
   THOUGHTS SECTION
   ============================================================ */

.thoughts-section {
    background: var(--bg-color);
}

.thoughts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
    max-width: 1000px;
    margin: 0 auto 2.5rem;
}

.thought-card {
    background: var(--snd-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 1.2rem;
    padding: 2rem 2rem;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.3s ease, background 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: relative;
    overflow: hidden;
}

.thought-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--main-color), transparent);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.thought-card:hover {
    border-color: var(--main-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(var(--main-color-rgb), 0.1);
    background: linear-gradient(180deg, var(--snd-bg-color) 0%, rgba(var(--main-color-rgb), 0.03) 100%);
}

.thought-card:hover::after {
    transform: scaleX(1);
}

.thought-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.thought-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.thought-category {
    font-size: 1.1rem;
    padding: 0.2rem 0.8rem;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.15);
    background: color-mix(in srgb, var(--main-color) 15%, transparent);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border: 1px solid color-mix(in srgb, var(--main-color) 30%, transparent);
    color: var(--accent-color);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.thought-text {
    font-size: 1.4rem;
    color: var(--text-muted);
    line-height: 1.65;
    flex: 1;
}

.thought-date {
    font-size: 1.1rem;
    color: var(--text-muted);
    opacity: 0.6;
}

/* Thoughts filter bar */
.thoughts-filter {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 3rem;
}

.thoughts-filter-btn {
    padding: 0.6rem 1.6rem;
    border-radius: 2rem;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.thoughts-filter-btn:hover,
.thoughts-filter-btn.active {
    background: var(--main-color);
    color: var(--bg-color);
    border-color: var(--main-color);
}

/* What I'm Playing */

.playing {
    background: var(--bg-color);
}

.playing-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
    row-gap: 1.6rem;
    max-width: 1000px;
    margin: 0 auto 4rem;
    align-items: stretch;
}

.playing-col-title {
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.4rem;
}

.play-card-empty {
    visibility: hidden;
}

.play-card {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
    background: var(--snd-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 1.2rem;
    padding: 2.5rem;
    transition: 0.3s ease;
}

.play-card:hover {
    border-color: var(--main-color);
    box-shadow: 0 4px 24px rgba(var(--main-color-rgb), 0.15);
}

.play-card > i {
    font-size: 3rem;
    color: var(--main-color);
    flex-shrink: 0;
    margin-top: 0.2rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.play-card:hover > i {
    transform: scale(1.15);
    color: var(--accent-color);
}

.play-info h4 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.3;
}

.play-status {
    display: inline-block;
    font-size: 1.1rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0.4rem 0 0.6rem;
}

.play-info p {
    font-size: 1.4rem;
    color: var(--text-muted);
    line-height: 1.5;
    font-style: italic;
}

.play-status--playing {
    color: var(--main-color);
}

.play-status--finished {
    color: var(--text-muted);
}

/* Recommend */

.recommend {
    background: var(--snd-bg-color);
    min-height: auto;
    padding: 6rem 9%;
}

.recommend-box {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.recommend-subtitle {
    font-size: 1.6rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
}

.recommend-input-row {
    display: flex;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

.recommend-input-row input {
    flex: 1;
    padding: 1.2rem 1.6rem;
    font-size: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4rem;
    color: var(--text-color);
    background: var(--card-bg);
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.recommend-input-row input:focus {
    border-color: var(--main-color);
}

.recommend-btn {
    flex-shrink: 0;
}

/* Konami Easter Egg */

.konami-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease;
}

.konami-overlay.active {
    opacity: 1;
    visibility: visible;
}

.konami-content {
    text-align: center;
    animation: konamiBounce 0.5s ease;
}

.konami-content .konami-emoji {
    font-size: 8rem;
    display: block;
    margin-bottom: 2rem;
}

.konami-content p {
    font-size: 2.4rem;
    color: var(--text-color);
    font-style: italic;
    line-height: 1.5;
}

.konami-content span {
    font-size: 1.4rem;
    color: var(--text-muted);
    display: block;
    margin-top: 1.5rem;
}

@keyframes konamiBounce {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* Back to Top */

.back-to-top {
    position: fixed;
    bottom: 2.5rem;
    right: 3.5rem;
    width: 46px;
    height: 46px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-color);
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 999;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--accent-color);
    color: var(--bg-color);
    border-color: var(--accent-color);
}

/* Watchlist */

.watchlist {
    background: var(--bg-color);
}

.watchlist-subtitle {
    text-align: center;
    font-size: 1.6rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
}

.watchlist-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.watchlist-tab,
.played-tab,
.reading-tab {
    padding: 0.8rem 2.4rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4rem;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: 0.3s ease;
}

.watchlist-tab:hover,
.watchlist-tab.active,
.played-tab:hover,
.played-tab.active,
.reading-tab:hover,
.reading-tab.active {
    background: var(--card-bg);
    color: var(--text-color);
    border-color: var(--main-color);
    box-shadow: 0 0 12px rgba(var(--main-color-rgb), 0.2);
}

.watchlist-content {
    max-width: 820px;
    margin: 0 auto;
}

.watchlist-panel {
    display: none;
}

.watchlist-panel.active {
    display: block;
}

.watchlist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
}

.watchlist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.6rem;
    background: var(--snd-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    transition: 0.3s ease;
    position: relative;
    overflow: hidden;
}

.watchlist-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: rgba(var(--main-color-rgb), 0.06);
    transition: width 0.3s ease;
}

.watchlist-item:hover::before {
    width: 100%;
}

.watchlist-item:hover {
    border-color: rgba(var(--main-color-rgb), 0.3);
}

.watchlist-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-color);
    position: relative;
    z-index: 1;
    transition: color 0.25s ease;
}

.watchlist-item:hover .watchlist-title {
    color: var(--main-color);
}

.watchlist-year {
    font-size: 1.2rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 1rem;
    position: relative;
    z-index: 1;
}

.watchlist-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.watchlist-season {
    font-size: 1.1rem;
    color: var(--main-color);
    opacity: 0.8;
}

.item-rating {
    font-size: 1.1rem;
    color: var(--rating-color);
    letter-spacing: 0.05em;
}

/* Watchlist see more / see less */

.watchlist-item.wl-hidden {
    display: none;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.watchlist-item.fade-in-item,
.thought-card.fade-in-item,
.play-card.fade-in-item,
.pick-card.fade-in-item {
    animation: fadeInUp 0.3s ease forwards;
}

/* Loading skeleton */
@keyframes shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.skeleton-item {
    min-height: 62px;
    background: var(--card-bg);
    border-radius: 0.8rem;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.skeleton-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    animation: shimmer 1.5s infinite;
}

.skeleton-photo {
    min-height: 180px;
    border-radius: 1rem;
}

.skeleton-artist {
    min-height: 100px;
}

.watchlist-toggle-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.6rem;
}

.watchlist-count {
    font-size: 1.2rem;
    color: var(--text-muted);
}

.watchlist-toggle {
    padding: 0.7rem 2rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4rem;
    font-size: 1.4rem;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: 0.3s ease;
}

.watchlist-toggle:hover {
    background: var(--card-bg);
    color: var(--text-color);
    border-color: var(--main-color);
}

.picks-toggle-wrapper {
    margin-top: 2rem;
}

/* What I've Played */

.played {
    background: var(--snd-bg-color);
    padding: 10rem 9% 6rem;
}

.played-content {
    max-width: 820px;
    margin: 0 auto;
}

.played-panel {
    display: none;
}

.played-panel.active {
    display: block;
}


.top-pick-badge {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--main-color);
    flex-shrink: 0;
    margin-left: 1rem;
    letter-spacing: 0.03em;
}

/* ============================================================
   What I've Read (Reading)
   ============================================================ */

.reading {
    background: var(--bg-color);
    padding: 10rem 9% 6rem;
}

.reading-content {
    max-width: 820px;
    margin: 0 auto;
}

.reading-panel {
    display: none;
}

.reading-panel.active {
    display: block;
}

/* reading-tab styles consolidated with .watchlist-tab, .played-tab above */

.reading-status {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.2rem 0.8rem;
    border-radius: 1rem;
    flex-shrink: 0;
    margin-left: 1rem;
    white-space: nowrap;
}

.reading-status--reading {
    background: rgba(100, 180, 255, 0.12);
    color: var(--status-reading);
    border: 1px solid rgba(100, 180, 255, 0.25);
}

.reading-status--completed {
    background: rgba(var(--main-color-rgb), 0.12);
    color: var(--accent-color);
    border: 1px solid rgba(var(--main-color-rgb), 0.25);
}

.reading-status--on-hold {
    background: rgba(255, 200, 80, 0.10);
    color: var(--status-on-hold);
    border: 1px solid rgba(255, 200, 80, 0.25);
}

.reading-status--dropped {
    background: rgba(220, 80, 80, 0.10);
    color: var(--status-dropped);
    border: 1px solid rgba(220, 80, 80, 0.25);
}

/* Guestbook */

.guestbook {
    background: var(--snd-bg-color);
    min-height: auto;
    padding: 6rem 9%;
}

.guestbook-box {
    max-width: 580px;
    margin: 0 auto;
    text-align: center;
}

.guestbook-subtitle {
    font-size: 1.6rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
}

.guestbook-form {
    text-align: left;
}

.guestbook-form input,
.guestbook-form textarea {
    width: 100%;
    padding: 1.2rem 1.6rem;
    font-size: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    color: var(--text-color);
    background: var(--card-bg);
    margin-bottom: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.guestbook-form input:focus,
.guestbook-form textarea:focus {
    border-color: var(--main-color);
}

.guestbook-form textarea {
    min-height: 10rem;
    resize: vertical;
    line-height: 1.5;
}

.guestbook-form .btn {
    width: 100%;
    padding: 1.2rem 2rem;
    font-size: 1.5rem;
}

.guestbook-entries {
    margin-bottom: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 8rem;
}

.guestbook-entry {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    padding: 1.2rem 1.6rem;
    text-align: left;
}

.guestbook-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.guestbook-entry-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
}

.guestbook-entry-date {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.guestbook-entry-message {
    font-size: 1.4rem;
    color: var(--text-muted);
    line-height: 1.5;
    word-break: break-word;
}

.guestbook-loading,
.guestbook-empty {
    font-size: 1.4rem;
    color: var(--text-muted);
    text-align: center;
    padding: 1.6rem 0;
}

/* Guestbook Pagination */

.guestbook-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 2.4rem;
    flex-wrap: wrap;
}

.guestbook-page-btn {
    min-width: 3.2rem;
    height: 3.2rem;
    padding: 0 0.6rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.6rem;
    font-size: 1.3rem;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.guestbook-page-btn:hover:not(:disabled) {
    background: var(--card-bg);
    color: var(--text-color);
    border-color: var(--main-color);
}

.guestbook-page-btn.active {
    background: var(--main-color);
    color: #fff;
    border-color: var(--main-color);
    box-shadow: 0 0 12px rgba(var(--main-color-rgb), 0.3);
    cursor: default;
}

.guestbook-page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.guestbook-page-prev,
.guestbook-page-next {
    font-size: 1.8rem;
    font-weight: 700;
}

.guestbook-page-ellipsis {
    font-size: 1.3rem;
    color: var(--text-muted);
    padding: 0 0.2rem;
    user-select: none;
}

/* Footer Quote Widget */
.footer-quote {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 600px;
    width: 100%;
    padding: 1.6rem 2rem;
    margin: 0 auto 2rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    font-size: 1.3rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.footer-quote-icon {
    font-size: 1.6rem;
    color: var(--main-color);
    flex-shrink: 0;
}

.footer-quote-text {
    flex: 1;
    font-style: italic;
    min-width: 0;
    overflow-wrap: break-word;
}

.footer-quote-source {
    font-size: 1.1rem;
    opacity: 0.7;
    white-space: normal;
    overflow-wrap: break-word;
}

.footer-quote-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    font-size: 1.4rem;
    transition: color 0.2s;
    flex-shrink: 0;
}

.footer-quote-btn:hover {
    color: var(--main-color);
}

/* Tier List Collapsible (inside #picks) */
.tierlist-collapse {
    margin-top: 2.4rem;
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
    text-align: center;
}

.tierlist-collapse-toggle {
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    padding: 0.8rem 1.6rem;
    border-radius: 0.8rem;
}

.tierlist-collapse-body {
    margin-top: 2rem;
}

/* Footer */

.footer {
    width: 100%;
    padding: 3rem 0;
    background: var(--snd-bg-color);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer .social {
    text-align: center;
    padding-bottom: 2rem;
}

.footer .social a {
    font-size: 2rem;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    margin: 0 0.8rem;
    transition: 0.3s ease;
}

.footer .social a:hover {
    border-color: var(--accent-color);
    color: var(--text-color);
    background: rgba(var(--text-color-rgb, 200,200,200), 0.05);
}

.footer .copyright {
    text-align: center;
    font-size: 1.3rem;
    color: var(--text-muted);
}

/* Responsive */

@media (max-width: 1200px) {
    html {
        font-size: 55%;
    }
}

@media (max-width: 991px) {
    .header {
        padding: 1.6rem 3%;
    }

    .logo {
        font-size: 2.2rem;
    }

    section {
        min-height: auto;
        padding: 8rem 5% 4rem;
    }

    .interests-container {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .watching-container {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .contact form .input-box input {
        width: 100%;
    }

    .footer {
        padding: 2rem 3%;
    }

    #menu-icon {
        display: block;
    }

    .navbar {
        position: absolute;
        top: 100%;
        right: -100%;
        width: 240px;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        background: rgba(var(--bg-color-rgb), 0.95);
        border-left: 1px solid var(--border-color);
        transition: all 0.5s ease;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        overflow-x: visible;
        max-width: none;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .navbar a {
        display: block;
        padding: 1.6rem 2rem;
        font-size: 1.8rem;
        margin-left: 0;
        color: var(--text-muted);
    }

    .navbar a:hover {
        color: var(--text-color);
    }

    .navbar.active {
        right: 0;
    }

    .home {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 2rem;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .home-content {
        margin-left: 0;
        flex: initial;
    }

    .home-content h3 {
        font-size: 2.2rem;
    }

    .home-content h3:nth-of-type(2) {
        white-space: normal;
    }

    .home-content h1 {
        font-size: 4.2rem;
    }

    .tagline {
        font-size: 1.4rem;
        line-height: 1.6;
        max-width: 36ch;
        margin: 1.5rem auto 0;
        white-space: normal;
    }

    .home-img {
        width: auto;
        max-width: none;
    }

    .home-img img {
        width: 40vw;
        max-width: 160px;
        margin-top: 2rem;
    }

    .social-media {
        justify-content: center;
        flex-wrap: wrap;
    }

    .social-media a {
        width: 44px;
        height: 44px;
        font-size: 2rem;
        margin: 2.5rem 0.5rem 2rem;
    }

    .btn {
        padding: 1.2rem 3rem;
        font-size: 1.6rem;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-status {
        justify-content: center;
    }

    .scroll-indicator {
        bottom: 4rem;
    }

    .about {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2.5rem;
        padding: 6rem 5% 4rem;
    }

    .about-content h2 {
        text-align: center;
    }

    .about-content .section-subtitle {
        text-align: center;
    }

    .about-pullquote {
        margin-left: auto;
        margin-right: auto;
    }

    .about-chips {
        justify-content: center;
    }

    .about-fact {
        margin-left: auto;
        margin-right: auto;
    }

    .about-content p {
        max-width: 80ch;
        margin: 1rem auto 1.6rem;
    }

    .about-img img {
        width: 50vw;
        max-width: 200px;
    }

    .interest-card {
        padding: 2.5rem 2rem;
    }

    .picks-container {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .quotes {
        padding: 4rem 5%;
    }

    .quote-box {
        padding: 3rem 2rem;
    }

    .quote-text {
        font-size: 1.8rem;
    }

    .watch-item {
        padding: 2.2rem 1.8rem;
    }

    .watch-entry {
        padding: 1rem;
    }

    .listen-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .music-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .thoughts-grid {
        grid-template-columns: 1fr;
    }

    .playing-container {
        grid-template-columns: 1fr;
    }

    .recommend {
        padding: 4rem 5%;
    }

    .watchlist-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .played {
        padding: 6rem 5% 4rem;
    }

    .reading {
        padding: 6rem 5% 4rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .guestbook {
        padding: 4rem 5%;
    }

    .guestbook-page-btn {
        min-width: 2.8rem;
        height: 2.8rem;
        font-size: 1.2rem;
    }

    .recommend-input-row {
        flex-direction: column;
    }

    .recommend-input-row input {
        border-radius: 0.8rem;
    }

    .recommend-btn {
        width: 100%;
        border-radius: 4rem;
    }

    .contact form .input-box input,
    .contact form textarea {
        padding: 1.4rem 1.4rem;
        font-size: 1.6rem;
    }

    .contact form .btn {
        width: 100%;
        padding: 1.4rem 2rem;
        font-size: 1.6rem;
    }
}

@media (max-width: 900px) {
    .heading {
        font-size: 4rem;
        margin-bottom: 2rem;
    }
}

/* Tablet breakpoint — bridges 991px and 480px */
@media (max-width: 768px) {
    /* Give the footer clearance above the mobile bottom nav + reactions bar */
    .footer { padding-bottom: 8rem; }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .watchlist-grid {
        grid-template-columns: 1fr;
    }

    .watchlist-controls {
        flex-direction: column;
        align-items: stretch;
    }

    #watchlist-sort {
        width: 100%;
    }

    .genre-chips {
        justify-content: flex-start;
    }

    .picks-container {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .playing-container {
        grid-template-columns: 1fr;
    }

    .played-panel .watchlist-grid {
        grid-template-columns: 1fr;
    }

    .reading-panel .watchlist-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 50%;
    }

    .header {
        padding: 1.4rem 4%;
    }

    .logo {
        font-size: 1.9rem;
    }

    section {
        padding: 7rem 4% 3rem;
    }

    .home {
        padding-top: 8rem;
    }

    .home-content h1 {
        font-size: 3.6rem;
    }

    .home-content h3 {
        font-size: 1.9rem;
    }

    .tagline {
        font-size: 1.3rem;
        max-width: 30ch;
    }

    .home-img img {
        width: 40vw;
        max-width: 140px;
    }

    .heading {
        font-size: 3.4rem;
        margin-bottom: 1.8rem;
    }

    .about-content p {
        font-size: 1.5rem;
    }

    .about-img img {
        width: 45vw;
        max-width: 160px;
    }

    .interest-card h3 {
        font-size: 1.9rem;
    }

    .interest-card p {
        font-size: 1.4rem;
    }

    .watch-entry h4 {
        font-size: 1.4rem;
    }

    .watch-progress-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .watch-pct-badge {
        font-size: 1rem;
    }

    .contact-subtitle {
        font-size: 1.4rem;
    }

    .footer .social a {
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 1.8rem;
    }

    .pick-card {
        padding: 1.6rem;
        gap: 1.2rem;
    }

    .pick-info h4 {
        font-size: 1.5rem;
    }

    .pick-info p {
        font-size: 1.3rem;
    }

    .quote-text {
        font-size: 1.6rem;
    }

    .quote-icon {
        font-size: 3rem;
    }

    .back-to-top {
        bottom: 2rem;
        right: 2rem;
        width: 40px;
        height: 40px;
        font-size: 2rem;
    }
    /* Dot-nav hidden here — bring fab-stack closer to edge */
    .fab-stack { right: 2rem; }
    /* Tighten reactions bar left offset on narrower viewports */
    .reactions-bar { left: 0.8rem; }

    .play-card {
        padding: 2rem 1.6rem;
        gap: 1.2rem;
    }

    .play-info h4 {
        font-size: 1.5rem;
    }

    .playing-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .konami-content p {
        font-size: 1.8rem;
        padding: 0 2rem;
    }

    .konami-content .konami-emoji {
        font-size: 6rem;
    }

    .artist-grid {
        grid-template-columns: 1fr;
    }

    .vibe-item {
        flex-direction: column;
        gap: 0.4rem;
    }

    .vibe-mood {
        min-width: unset;
    }
}

/* ============================================================
   SEARCH BAR
   ============================================================ */

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

.search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    font-size: 2rem;
    display: flex;
    align-items: center;
    padding: 0.4rem;
    border-radius: 6px;
    transition: color 0.2s;
}

.search-toggle:hover {
    color: var(--accent-color);
}

.search-box {
    position: absolute;
    right: 0;
    top: calc(100% + 1rem);
    width: 32rem;
    background: var(--snd-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s;
    z-index: 1002;
}

.search-box.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

#search-input {
    width: 100%;
    padding: 1.2rem 1.6rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 1.4rem;
    outline: none;
}

#search-input::placeholder {
    color: var(--text-muted);
}

.search-results {
    max-height: 32rem;
    overflow-y: auto;
}

.search-result-item {
    padding: 1rem 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border-color);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item:focus {
    background: var(--card-bg);
    outline: none;
}

.search-result-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: 1.4rem;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-meta {
    font-size: 1.1rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}

.search-more {
    padding: 0.8rem 1.6rem;
    color: var(--text-muted);
    font-size: 1.2rem;
    text-align: center;
    font-style: italic;
    border-top: 1px solid var(--border-color);
}

.search-result-badge {
    font-size: 1.1rem;
    padding: 0.2rem 0.7rem;
    border-radius: 4px;
    background: var(--border-color);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.search-empty {
    padding: 1.6rem;
    color: var(--text-muted);
    font-size: 1.3rem;
    text-align: center;
}

/* Highlight animation when search result is clicked */
@keyframes itemHighlight {
    0%   { background: var(--main-color); }
    100% { background: transparent; }
}

.search-highlight {
    animation: itemHighlight 1.2s ease-out forwards;
}

/* ============================================================
   WATCHLIST CONTROLS (Sort + Genre Chips)
   ============================================================ */

.watchlist-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.4rem;
}

#watchlist-sort {
    padding: 0.6rem 1.2rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    font-size: 1.3rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

#watchlist-sort:hover,
#watchlist-sort:focus {
    border-color: var(--main-color);
}

.genre-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.genre-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    background: rgba(124, 58, 237, 0.15);
    background: color-mix(in srgb, var(--main-color) 15%, transparent);
    border: 1px solid rgba(124, 58, 237, 0.35);
    border: 1px solid color-mix(in srgb, var(--main-color) 35%, transparent);
    border-radius: 12px;
    color: var(--accent-color);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Card Hover Micro-interactions */

@keyframes badgeBounce {
    0% { transform: translateY(0); }
    40% { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

@keyframes starPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; transform: scale(1.15); }
}

@keyframes tagPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.watchlist-item:hover .genre-badge {
    animation: badgeBounce 0.4s ease forwards;
}

.watchlist-item:hover .genre-badge:nth-child(2) { animation-delay: 0.06s; }
.watchlist-item:hover .genre-badge:nth-child(3) { animation-delay: 0.12s; }
.watchlist-item:hover .genre-badge:nth-child(4) { animation-delay: 0.18s; }

.watchlist-item:hover .item-rating {
    animation: starPulse 0.6s ease;
}

.pick-card:hover .pick-tag {
    animation: tagPop 0.35s ease;
}

.play-card:hover .play-status {
    animation: starPulse 0.6s ease;
}

.genre-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.genre-chip {
    padding: 0.4rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.genre-chip:hover {
    border-color: var(--main-color);
    color: var(--text-color);
}

.genre-chip.active {
    background: var(--main-color);
    border-color: var(--main-color);
    color: var(--bg-color);
}

.watchlist-filter-count {
    font-size: 1.2rem;
    color: var(--text-muted);
    width: 100%;
    text-align: center;
    margin-left: 0;
}

/* ============================================================
   DOT NAVIGATION
   ============================================================ */

.dot-nav {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    z-index: 500;
}

.dot-nav-item {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: all 0.25s;
    border: none;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.dot-nav-item::after {
    content: attr(data-label);
    position: absolute;
    right: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 1.1rem;
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    border: 1px solid var(--border-color);
}

.dot-nav-item:hover::after,
.dot-nav-item:focus::after {
    opacity: 1;
}

.dot-nav-item:hover,
.dot-nav-item.active {
    background: var(--main-color);
    transform: scale(1.4);
}

.dot-nav-item.active {
    background: var(--accent-color);
}

@media (max-width: 991px) {
    .dot-nav {
        display: none;
    }

    .search-box {
        width: 26rem;
        right: 0;
    }

    .watchlist-controls {
        gap: 0.8rem;
    }
}

@media (max-width: 480px) {
    .search-box {
        position: fixed;
        right: 0;
        left: 0;
        top: 6rem;
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .watchlist-filter-count {
        width: 100%;
        margin-left: 0;
    }
}

/* ============================================================
   SECTION DIVIDERS
   ============================================================ */

.home, .stats, .interests, .picks, .quotes, .currently-watching, .watching, .playing, .thoughts-section, .guestbook, .contact, .know-me, .photo-journal {
    position: relative;
}

.section-divider {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
    z-index: 2;
}

.section-divider svg {
    display: block;
    width: 100%;
    height: 40px;
}

.section-divider--snd svg path {
    fill: var(--snd-bg-color);
}

.section-divider--primary svg path {
    fill: var(--bg-color);
}

/* Gradient fade divider */
.section-divider--gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.section-divider--gradient.to-snd {
    background: linear-gradient(to bottom, transparent, var(--snd-bg-color));
}

.section-divider--gradient.to-primary {
    background: linear-gradient(to bottom, transparent, var(--bg-color));
}

/* Subtle line divider */
.section-divider--line {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    max-width: 300px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    pointer-events: none;
    z-index: 2;
}

.wave-path-1 {
    animation: waveMove1 9s ease-in-out infinite alternate;
}

.wave-path-2 {
    opacity: 0.45;
    animation: waveMove2 6s ease-in-out infinite alternate;
}

@keyframes waveMove1 {
    from { transform: translateX(0); }
    to { transform: translateX(-28px); }
}

@keyframes waveMove2 {
    from { transform: translateX(0); }
    to { transform: translateX(22px); }
}

/* ============================================================
   NOISE / GRAIN OVERLAY
   ============================================================ */

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9997;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* ============================================================
   CARD VISUAL HIERARCHY — Tier 1 (Hero) / Tier 3 (Compact)
   ============================================================ */

/* Tier 1 — Hero cards: glassmorphism + stronger hover */
.battle-card,
.wrapped-stat-card {
    background: rgba(var(--bg-color-rgb), 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(var(--main-color-rgb), 0.15);
}

.battle-card:hover,
.wrapped-stat-card:hover,
.values-card:hover,
.know-me-card:hover {
    box-shadow: 0 8px 40px rgba(var(--main-color-rgb), 0.18),
                0 0 20px rgba(var(--main-color-rgb), 0.08);
}

/* Tier 3 — Compact cards: subtle bg-shift hover only */
.guestbook-entry,
.rec-inbox-card,
.activity-item {
    transition: background 0.2s ease, border-color 0.2s ease;
}

.guestbook-entry:hover,
.rec-inbox-card:hover,
.activity-item:hover {
    background: rgba(var(--main-color-rgb), 0.04);
    transform: none;
    box-shadow: none;
}

/* ============================================================
   ANIMATED GRADIENT BORDERS
   ============================================================ */

@property --border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes rotateBorder {
    to { --border-angle: 360deg; }
}

.pick-card,
.interest-card,
.stat-card,
.play-card {
    position: relative;
    transform-style: preserve-3d;
}

.pick-card::before,
.interest-card::before,
.stat-card::before,
.play-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--border-angle),
        transparent 40%,
        var(--main-color) 50%,
        var(--accent-color) 55%,
        transparent 60%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
    pointer-events: none;
}

.pick-card:hover::before,
.interest-card:hover::before,
.stat-card:hover::before,
.play-card:hover::before {
    opacity: 1;
    animation: rotateBorder 3s linear infinite;
}

/* ============================================================
   3D CARD TILT GLARE
   ============================================================ */

.tilt-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
        circle at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(255, 255, 255, 0.07) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.tilt-active .tilt-glare {
    opacity: 1;
}

@media (hover: none) {
    .tilt-glare { display: none; }
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.8rem;
    z-index: 9998;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    padding: 1.2rem 2rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    color: var(--text-color);
    font-size: 1.4rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    max-width: 32rem;
}

.toast.toast-visible {
    transform: translateX(0);
    opacity: 1;
}

.toast.toast-exit {
    transform: translateX(120%);
    opacity: 0;
}

.toast-success { border-left: 3px solid #4caf50; }
.toast-info    { border-left: 3px solid var(--accent-color); }
.toast-error   { border-left: 3px solid #ef5350; }

@media (max-width: 480px) {
    .toast-container { right: 1rem; left: 1rem; bottom: 1rem; }
    .toast { max-width: 100%; }
}

/* ============================================================
   SURPRISE ME / RANDOM PICK
   ============================================================ */

.surprise-wrapper {
    text-align: center;
    margin-bottom: 2rem;
}

.surprise-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.surprise-btn i {
    font-size: 1.8rem;
}

.random-pick-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9996;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.random-pick-modal.active {
    opacity: 1;
    visibility: visible;
}

.random-pick-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1.2rem;
    padding: 4rem 3.5rem;
    text-align: center;
    max-width: 440px;
    width: 90%;
    transform: scale(0.85);
    transition: transform 0.3s ease;
}

.random-pick-modal.active .random-pick-card {
    transform: scale(1);
}

.random-pick-category {
    display: inline-block;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--main-color);
    margin-bottom: 1rem;
}

.random-pick-card h3 {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 1.2rem;
    line-height: 1.3;
}

.random-pick-quote {
    font-size: 1.5rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    min-height: 2rem;
}

.random-pick-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn.random-pick-close {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-muted);
}

.btn.random-pick-close:hover {
    color: var(--text-color);
    border-color: var(--text-muted);
}

/* ============================================================
   KEYBOARD SHORTCUTS TOOLTIP
   ============================================================ */

.shortcuts-tooltip {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 998;
}

.shortcuts-trigger {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

.shortcuts-trigger:hover {
    color: var(--text-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 12px rgba(var(--main-color-rgb), 0.2);
}

.shortcuts-list {
    position: absolute;
    bottom: calc(100% + 0.8rem);
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    padding: 1.2rem 1.6rem;
    min-width: 22rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.shortcuts-tooltip:hover .shortcuts-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.shortcut-row {
    font-size: 1.3rem;
    color: var(--text-muted);
    padding: 0.4rem 0;
    white-space: nowrap;
}

.shortcut-row kbd {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: var(--snd-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1.2rem;
    color: var(--text-color);
    margin: 0 0.2rem;
    min-width: 2rem;
    text-align: center;
}

@media (hover: none), (max-width: 480px) {
    .shortcuts-tooltip { display: none; }
}

/* ============================================================
   WATCHTIME ESTIMATE
   ============================================================ */

.watchtime-estimate {
    text-align: center;
    font-size: 1.4rem;
    color: var(--text-muted);
    margin-top: 2rem;
    font-style: italic;
}

/* ============================================================
   SHARE PICKS
   ============================================================ */

.pick-share-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--snd-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    z-index: 2;
}

.pick-card:hover .pick-share-btn {
    opacity: 1;
}

.pick-share-btn:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* ============================================================
   DOT NAV SCROLL PROGRESS FILL
   ============================================================ */

.dot-nav-item::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--dot-progress, 0%);
    background: var(--accent-color);
    border-radius: inherit;
    z-index: -1;
}

/* ============================================================
   CV PAGE
   ============================================================ */

.cv-page {
    min-height: 100vh;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 3rem 6rem;
}

/* Top Bar */

.cv-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0 3rem;
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(var(--bg-color-rgb), 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin: 0 -3rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

body.theme-slate .cv-topbar {
    background: rgba(13, 15, 26, 0.85);
}

body.theme-crimson .cv-topbar {
    background: rgba(19, 10, 13, 0.85);
}

.cv-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    padding: 0.8rem 1.8rem;
}

.cv-theme-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
}

.cv-theme-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Hero */

.cv-hero {
    text-align: center;
    padding: 4rem 0 3rem;
}

.cv-hero-label {
    font-size: 1.2rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.cv-name {
    font-size: 4.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--text-color) 0%, var(--accent-color) 50%, var(--text-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.cv-name-divider {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--main-color), var(--accent-color));
    margin: 0 auto;
    border-radius: 2px;
}

/* Sections */

.cv-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1.6rem;
    padding: 2.8rem 3rem;
    margin-bottom: 2rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cv-section:hover {
    border-color: rgba(var(--main-color-rgb), 0.35);
    box-shadow: 0 0 20px rgba(var(--main-color-rgb), 0.06);
}

.cv-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.cv-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* About */

.cv-about-card {
    padding: 0.5rem 0;
}

.cv-about-text {
    font-size: 1.6rem;
    color: var(--text-color);
    line-height: 1.7;
    opacity: 0.85;
}

/* Timeline */

.cv-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.cv-timeline::before {
    content: '';
    position: absolute;
    left: 130px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(to bottom, var(--main-color), transparent);
    opacity: 0.3;
}

.cv-timeline-item {
    display: grid;
    grid-template-columns: 120px 24px 1fr;
    gap: 0 1.6rem;
    align-items: start;
    padding-bottom: 2.8rem;
}

.cv-timeline-item:last-child {
    padding-bottom: 0;
}

.cv-timeline-left {
    text-align: right;
    padding-top: 0.2rem;
}

.cv-timeline-date {
    font-size: 1.15rem;
    color: var(--accent-color);
    font-weight: 500;
    white-space: nowrap;
}

.cv-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--main-color);
    margin-top: 0.4rem;
    box-shadow: 0 0 8px rgba(var(--main-color-rgb), 0.5);
    flex-shrink: 0;
}

.cv-timeline-school {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.4rem;
}

.cv-timeline-degree {
    font-size: 1.35rem;
    color: var(--text-muted);
    margin-bottom: 0.8rem;
    font-style: italic;
}

.cv-timeline-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cv-timeline-bullets li {
    font-size: 1.35rem;
    color: var(--text-color);
    opacity: 0.7;
    padding: 0.25rem 0 0.25rem 1.4rem;
    position: relative;
}

.cv-timeline-bullets li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--accent-color);
}

/* Skills Row */

.cv-skills-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.cv-skills-card {
    margin-bottom: 0;
}

.cv-skill-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.cv-skill-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.5rem;
    color: var(--text-color);
}

.cv-skill-list li i {
    color: var(--accent-color);
    font-size: 1.6rem;
    flex-shrink: 0;
}

/* References */

.cv-references-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

.cv-reference-card {
    background: var(--snd-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 1.2rem;
    padding: 2rem 1.8rem;
    text-align: center;
    transition: 0.3s ease;
    cursor: default;
}

.cv-reference-card:hover {
    border-color: rgba(var(--main-color-rgb), 0.4);
    box-shadow: 0 0 18px rgba(var(--main-color-rgb), 0.1);
    transform: translateY(-3px);
}

.cv-reference-icon {
    font-size: 2.4rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.cv-reference-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.8rem;
}

.cv-reference-desc {
    font-size: 1.3rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Closing Quote */

.cv-closing {
    text-align: center;
    padding: 4rem 2rem 3rem;
}
.cv-closing-sig1 {
    font-size: 1.5rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 0.5rem;
    margin-left: -180px;
}

.cv-closing-text {
    font-size: 3rem;
    font-style: italic;
    font-weight: 300;
    background: linear-gradient(135deg, var(--accent-color), var(--text-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.cv-closing-sig2 {
    font-size: 1.5rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-left: 240px;
}

/* Footer Actions */

.cv-footer-actions {
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    padding-bottom: 2rem;
}

.cv-footer-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
}

/* ── CV Responsive ── */

@media (max-width: 768px) {
    .cv-page {
        padding: 0 2rem 5rem;
    }

    .cv-topbar {
        margin: 0 -2rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .cv-name {
        font-size: 3.2rem;
    }

    .cv-skills-row {
        grid-template-columns: 1fr;
    }

    .cv-references-grid {
        grid-template-columns: 1fr;
    }

    .cv-timeline::before {
        left: 90px;
    }

    .cv-timeline-item {
        grid-template-columns: 80px 20px 1fr;
        gap: 0 1.2rem;
    }

    .cv-timeline-date {
        font-size: 1rem;
    }

    .cv-section {
        padding: 2.2rem 2rem;
    }

    .cv-footer-actions {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .cv-name {
        font-size: 2.6rem;
    }

    .cv-hero {
        padding: 3rem 0 2rem;
    }

    .cv-timeline-item {
        grid-template-columns: 70px 18px 1fr;
        gap: 0 1rem;
    }

    .cv-timeline::before {
        left: 78px;
    }

    .cv-closing-text {
        font-size: 2.4rem;
    }
}

/* ============================================================
   GET TO KNOW ME
   ============================================================ */

.know-me {
    background: var(--bg-color);
    padding: 8rem 2rem 10rem;
}

.know-me .section-subtitle {
    font-size: 1.6rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 4rem;
}

.know-me-banner {
    max-width: 700px;
    margin: 0 auto 3.5rem;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1.6rem;
    padding: 3rem 2.5rem 2.5rem;
    position: relative;
    overflow: hidden;
}

.know-me-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    opacity: 0.5;
    border-radius: 2px;
}

.know-me-banner:empty {
    display: none;
}

.know-me-banner-type {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 0.08em;
    line-height: 1.2;
}

.know-me-banner-title {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text-color);
    margin-top: 0.3rem;
}

.know-me-banner-tagline {
    font-size: 1.4rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.6rem;
    margin-bottom: 1.8rem;
}

.know-me-banner-traits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.know-me-banner-chip {
    font-size: 1.2rem;
    padding: 0.35rem 1rem;
    border-radius: 2rem;
    background: rgba(var(--accent-color-rgb), 0.12);
    color: var(--accent-color);
    border: 1px solid rgba(var(--accent-color-rgb), 0.2);
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.know-me-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.know-me-card {
    margin-bottom: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1.4rem;
    padding: 2.4rem 2.2rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.know-me-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    opacity: 0.35;
    border-radius: 2px;
    transition: opacity 0.3s ease;
}

.know-me-card:hover {
    border-color: rgba(var(--accent-color-rgb), 0.4);
    box-shadow: 0 4px 24px rgba(var(--main-color-rgb), 0.1),
                0 0 0 1px rgba(var(--accent-color-rgb), 0.08);
    transform: translateY(-2px);
}

.know-me-card:hover::before {
    opacity: 0.75;
}

.know-me-icon {
    font-size: 2.4rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    display: inline-block;
    opacity: 0.8;
}

.know-me-label {
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 0.8rem;
    font-weight: 500;
}

.know-me-content {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.know-me-note {
    font-size: 1.4rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.6;
}

.know-me-list {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
}

.know-me-list li {
    font-size: 1.5rem;
    color: var(--text-color);
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(var(--main-color-rgb), 0.07);
    line-height: 1.6;
    opacity: 0.85;
}

.know-me-list li:last-child {
    border-bottom: none;
}

.know-me-list li::before {
    content: '~';
    color: var(--accent-color);
    margin-right: 0.8rem;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .know-me-banner {
        padding: 2.5rem 2rem 2rem;
    }

    .know-me-banner-type {
        font-size: 2.6rem;
    }
}

@media (max-width: 480px) {
    .know-me {
        padding: 6rem 1.6rem 8rem;
    }

    .know-me-banner {
        padding: 2rem 1.5rem 1.8rem;
        margin-bottom: 2.5rem;
    }

    .know-me-banner-type {
        font-size: 2.2rem;
    }

    .know-me-banner-title {
        font-size: 1.5rem;
    }

    .know-me-banner-chip {
        font-size: 1.1rem;
        padding: 0.3rem 0.8rem;
    }
}

/* ============================================================
   PHOTO JOURNAL
   ============================================================ */

.photo-journal {
    background: var(--bg-color);
    padding: 8rem 9% 10rem;
}

.photo-journal .section-subtitle {
    font-size: 1.6rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 2.5rem;
}

.photo-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 3rem;
}

.photo-filter-btn {
    padding: 0.6rem 1.6rem;
    font-size: 1.4rem;
    border-radius: 2rem;
    background: var(--card-bg);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}

.photo-filter-btn:hover,
.photo-filter-btn.active {
    background: var(--main-color);
    color: #fff;
    border-color: var(--main-color);
}

.photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto 2.5rem;
    line-height: 0;
}

.photo-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 6rem 2rem;
    color: var(--text-muted);
    font-size: 1.6rem;
    font-style: italic;
}

.photo-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--snd-bg-color);
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    /* width and height set by JS justified layout */
}

.photo-card:hover {
    opacity: 0.88;
}

.photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

.photo-card:hover img {
    transform: scale(1.05);
}

.photo-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 1.6rem 1.4rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-style: italic;
}

.photo-card:hover .photo-caption {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   PHOTO LIGHTBOX
   ============================================================ */

.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.photo-lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.photo-lightbox-content {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 6rem;
}

.photo-lightbox-content img {
    max-width: 100%;
    max-height: 72vh;
    border-radius: 1rem;
    object-fit: contain;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.photo-lightbox-caption {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.5rem;
    font-style: italic;
    margin-top: 1.6rem;
    text-align: center;
    max-width: 60ch;
}

.photo-lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 2.8rem;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    z-index: 2001;
}

.photo-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    transform: scale(1.1);
}

.photo-lightbox-prev,
.photo-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 2.6rem;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.photo-lightbox-prev { left: 2rem; }
.photo-lightbox-next { right: 2rem; }

.photo-lightbox-prev:hover,
.photo-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

@media (max-width: 768px) {
    .photo-lightbox-content {
        padding: 0 5rem;
    }

    .photo-lightbox-prev,
    .photo-lightbox-next {
        width: 3.6rem;
        height: 3.6rem;
        font-size: 2rem;
    }

    .photo-lightbox-prev { left: 1rem; }
    .photo-lightbox-next { right: 1rem; }
}

@media (max-width: 480px) {
    .photo-caption {
        opacity: 1;
        transform: translateY(0);
        font-size: 1.4rem;
        padding: 1.8rem 0.8rem 0.8rem;
    }

    .photo-journal {
        padding: 6rem 1.6rem 8rem;
    }

    .photo-lightbox-content {
        padding: 0 3.5rem;
    }

    .photo-lightbox-prev,
    .photo-lightbox-next {
        width: 3rem;
        height: 3rem;
        font-size: 1.8rem;
    }

    .photo-lightbox-prev { left: 0.5rem; }
    .photo-lightbox-next { right: 0.5rem; }
}

/* ============================================================
   GAME HUNT LIST
   ============================================================ */

.game-hunt {
    background: var(--snd-bg-color);
    padding: 8rem 9% 10rem;
}

.game-hunt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.6rem;
    margin-top: 3rem;
    justify-content: center;
}

.hunt-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.8rem 2rem;
    transition: 0.3s ease;
    position: relative;
}

.hunt-card:hover {
    border-color: rgba(var(--main-color-rgb), 0.4);
    box-shadow: 0 4px 20px rgba(var(--main-color-rgb), 0.1);
    transform: translateY(-2px);
}

.hunt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.hunt-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
}

.hunt-platform {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.hunt-note {
    font-size: 1.3rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
}

.hunt-priority {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

.hunt-priority--high {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.hunt-priority--medium {
    background: rgba(234, 179, 8, 0.15);
    color: #facc15;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.hunt-priority--low {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

@media (max-width: 480px) {
    .game-hunt-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   UNPOPULAR OPINIONS
   ============================================================ */

.opinions-section {
    background: var(--bg-color);
    padding: 8rem 9% 10rem;
}

.opinions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 3rem auto 0;
}

.opinion-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem 2.2rem;
    transition: 0.3s ease;
}

.opinion-card:hover {
    border-color: rgba(var(--main-color-rgb), 0.4);
    box-shadow: 0 4px 20px rgba(var(--main-color-rgb), 0.1);
}

.opinion-category {
    display: inline-block;
    font-size: 1.05rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.8rem;
}

.opinion-text {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
    margin-bottom: 1.4rem;
}

.opinion-poll {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.opinion-bar-wrap {
    flex: 1;
    height: 8px;
    background: rgba(var(--main-color-rgb), 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.opinion-bar {
    height: 100%;
    background: var(--main-color);
    border-radius: 4px;
    transition: width 0.6s ease;
}

.opinion-pct {
    font-size: 1.2rem;
    color: var(--text-muted);
    min-width: 3.6rem;
    text-align: right;
}

.opinion-votes {
    display: flex;
    gap: 0.8rem;
    margin-top: 1rem;
}

.opinion-vote-btn {
    flex: 1;
    padding: 0.6rem 1rem;
    background: rgba(var(--main-color-rgb), 0.08);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    transition: 0.3s ease;
}

.opinion-vote-btn:hover {
    background: rgba(var(--main-color-rgb), 0.2);
    color: var(--text-color);
    border-color: var(--main-color);
}

.opinion-vote-btn.voted-agree {
    background: rgba(34, 197, 94, 0.2);
    border-color: #4ade80;
    color: #4ade80;
}

.opinion-vote-btn.voted-disagree {
    background: rgba(239, 68, 68, 0.2);
    border-color: #f87171;
    color: #f87171;
}

.opinion-vote-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

@media (max-width: 480px) {
    .opinions-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   RECOMMENDATION WIDGET (inside Top Picks)
   ============================================================ */

.reco-widget {
    margin-top: 4rem;
    padding: 2.4rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1.2rem;
    text-align: center;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.reco-heading {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1.4rem;
}

.reco-heading span {
    color: var(--accent-color);
}

.reco-search {
    width: 100%;
    max-width: 400px;
    padding: 0.8rem 1.4rem;
    background: var(--snd-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
    transition: border-color 0.3s ease;
}

.reco-search:focus {
    border-color: var(--main-color);
    outline: none;
}

.reco-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 1.4rem;
}

.reco-chip {
    padding: 0.4rem 1rem;
    background: rgba(var(--main-color-rgb), 0.1);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.3s ease;
}

.reco-chip:hover, .reco-chip.active {
    background: rgba(var(--main-color-rgb), 0.25);
    border-color: var(--main-color);
    color: var(--text-color);
}

.reco-result {
    padding: 1.4rem;
    background: var(--snd-bg-color);
    border-radius: 10px;
    display: none;
}

.reco-result.active {
    display: block;
}

.reco-result-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 0.4rem;
}

.reco-result-reason {
    font-size: 1.35rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================================
   READING BOOKSHELF
   ============================================================ */

.book-spine-shelf {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
    padding: 1rem 0 0;
    border-bottom: 3px solid var(--border-color);
    overflow-x: auto;
    min-height: 180px;
}

.book-spine {
    width: 48px;
    min-height: 140px;
    max-height: 170px;
    border-radius: 3px 6px 6px 3px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.book-spine:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.book-spine-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 130px;
    padding: 0.4rem 0;
}

.book-spine[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-size: 1.15rem;
    white-space: nowrap;
    z-index: 10;
    writing-mode: horizontal-tb;
    text-orientation: initial;
    font-weight: 400;
    pointer-events: none;
}

/* Spine color variations */
.book-spine:nth-child(6n+1) { background: linear-gradient(180deg, #6366f1, #4f46e5); }
.book-spine:nth-child(6n+2) { background: linear-gradient(180deg, #e11d48, #be123c); }
.book-spine:nth-child(6n+3) { background: linear-gradient(180deg, #059669, #047857); }
.book-spine:nth-child(6n+4) { background: linear-gradient(180deg, #d97706, #b45309); }
.book-spine:nth-child(6n+5) { background: linear-gradient(180deg, #7c3aed, #6d28d9); }
.book-spine:nth-child(6n+6) { background: linear-gradient(180deg, #0891b2, #0e7490); }

/* ============================================================
   VISITOR COUNTER
   ============================================================ */

.visitor-count {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-top: 0.8rem;
    opacity: 0.7;
    text-align: center;
}

.visitor-count--returning {
    color: var(--accent-color);
    opacity: 0.85;
    animation: fadeInUp 0.6s ease;
}

/* People Here Now */
.people-here {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* Solo / dim pulse dot — warm amber for quiet/offline states */
.pulse-dot--solo,
.pulse-dot--dim {
    background: #f59e0b;
    animation: pulseDotWarm 3s ease-in-out infinite;
}
.pulse-dot--dim { opacity: 0.6; }

@keyframes pulseDotWarm {
    0%, 100% { opacity: 0.8; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { opacity: 0.5; box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}

/* Presence bump animation — fires when new visitor arrives */
.people-here--bump { animation: presenceBump 0.4s ease; }

@keyframes presenceBump {
    0%   { transform: scale(1); color: var(--text-muted); }
    40%  { transform: scale(1.06); color: var(--accent-color); }
    100% { transform: scale(1); color: var(--text-muted); }
}

/* Returning visitor secondary count span */
.visitor-current-count {
    opacity: 0;
    transition: opacity 0.6s ease;
    font-size: 1.05rem;
    color: var(--text-muted);
}
.visitor-current-count--visible { opacity: 0.65; }

/* Dev mode indicators */
.visitor-count--dev {
    font-style: italic;
    opacity: 0.85;
    color: var(--text-muted);
}
.pulse-dot--dev {
    background-color: var(--accent-color);
    opacity: 0.35;
    animation: none;
}

/* Nickname prompt */
.nickname-prompt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.875rem;
}
.nickname-prompt-label {
    color: var(--text-muted);
}
.nickname-input {
    background: var(--snd-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
    font-family: inherit;
    width: 9rem;
    outline: none;
    transition: border-color 0.2s;
}
.nickname-input:focus {
    border-color: var(--accent-color);
}
.nickname-save-btn,
.nickname-cancel-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.nickname-save-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.nickname-cancel-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-color);
}
.visitor-nickname {
    color: var(--accent-color);
    font-weight: 600;
}
.nickname-edit-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 0.2rem;
    opacity: 0.55;
    transition: opacity 0.2s, color 0.2s;
    vertical-align: middle;
    font-family: inherit;
    line-height: 1;
}
.nickname-edit-btn:hover {
    opacity: 1;
    color: var(--accent-color);
}
@media (max-width: 768px) {
    .nickname-prompt {
        flex-direction: column;
        align-items: flex-start;
    }
    .nickname-input {
        width: 100%;
        max-width: 13rem;
    }
}

/* Milestone Overlay */
.milestone-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease;
}

.milestone-overlay.active {
    opacity: 1;
    visibility: visible;
}

.milestone-content {
    text-align: center;
    animation: konamiBounce 0.5s ease;
}

.milestone-emoji {
    font-size: 8rem;
    display: block;
    margin-bottom: 1.5rem;
}

.milestone-content h3 {
    font-size: 3rem;
    color: #fbbf24;
    margin-bottom: 0.8rem;
}

.milestone-content p {
    font-size: 1.6rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.milestone-close {
    background: var(--accent-color);
    color: #fff;
    border: none;
    padding: 0.8rem 2.4rem;
    border-radius: 0.6rem;
    font-size: 1.4rem;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.milestone-close:hover {
    transform: scale(1.05);
    background: var(--accent-secondary);
}
.milestone-overlay.milestone-major .milestone-content h3 { color: #fbbf24; text-shadow: 0 0 20px rgba(251,191,36,0.5); }
.milestone-overlay.milestone-major .milestone-emoji { animation: konamiBounce 0.5s ease, milestoneGlow 2s ease infinite; }
@keyframes milestoneGlow { 0%,100% { filter: drop-shadow(0 0 8px rgba(251,191,36,0.4)); } 50% { filter: drop-shadow(0 0 18px rgba(251,191,36,0.8)); } }

/* Visitor Sparkline */
.visitor-sparkline {
    max-width: 600px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: var(--card-bg);
    border-radius: 1.2rem;
    border: 1px solid var(--border-color);
}

.sparkline-title {
    font-size: 1.3rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sparkline-title i {
    color: var(--accent-color);
}

.sparkline-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 60px;
}

.sparkline-bar {
    flex: 1;
    background: var(--accent-color);
    border-radius: 2px 2px 0 0;
    height: var(--bar-height);
    min-height: 2px;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

.sparkline-bar:hover {
    opacity: 1;
    transform: scaleY(1.1);
    transform-origin: bottom;
}

/* ============================================================
   MUSIC VIBE PLAYER
   ============================================================ */

.vibe-item--clickable {
    cursor: pointer;
    transition: 0.3s ease;
}

.vibe-item--clickable:hover {
    color: var(--accent-color);
}

.vibe-item--clickable .vibe-play-icon {
    margin-left: 0.4rem;
    font-size: 1.4rem;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.vibe-item--clickable:hover .vibe-play-icon {
    opacity: 1;
}

.vibes-embed-container {
    margin-top: 1.4rem;
    animation: fadeSlideIn 0.3s ease;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RECENTLY FINISHED / ACTIVITY FEED
   ============================================================ */

.recently-finished-section {
    background: var(--bg-color);
    padding: 8rem 9% 6rem;
}

.activity-feed {
    padding: 100px 9%;
    background: var(--snd-bg-color);
}

.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    max-width: 760px;
    margin: 0 auto;
}

.activity-item {
    display: flex;
    gap: 1.8rem;
    padding: 1.8rem 2.2rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    border-left: 3px solid var(--main-color);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    opacity: 0;
    transform: translateX(-20px);
    animation: activitySlideIn 0.4s ease forwards;
}

.activity-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 20px rgba(var(--main-color-rgb), 0.1);
}

@keyframes activitySlideIn {
    to { opacity: 1; transform: translateX(0); }
}

.activity-icon {
    font-size: 2.2rem;
    color: var(--main-color);
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.activity-body { flex: 1; min-width: 0; }

.activity-meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.activity-type {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--accent-color);
}

.activity-category-badge {
    font-size: 1rem;
    padding: 0.15rem 0.8rem;
    border-radius: 100px;
    background: rgba(var(--main-color-rgb), 0.15);
    color: var(--accent-color);
}

.activity-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-note {
    font-size: 1.3rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.activity-date {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-top: 0.6rem;
}

.activity-item {
    border-left-color: #4ade80;
}
.activity-item .activity-icon { color: #4ade80; }

/* Stagger animation delay */
.activity-item:nth-child(1)  { animation-delay: 0.05s; }
.activity-item:nth-child(2)  { animation-delay: 0.10s; }
.activity-item:nth-child(3)  { animation-delay: 0.15s; }
.activity-item:nth-child(4)  { animation-delay: 0.20s; }
.activity-item:nth-child(5)  { animation-delay: 0.25s; }
.activity-item:nth-child(6)  { animation-delay: 0.30s; }
.activity-item:nth-child(7)  { animation-delay: 0.35s; }
.activity-item:nth-child(8)  { animation-delay: 0.40s; }
.activity-item:nth-child(9)  { animation-delay: 0.45s; }
.activity-item:nth-child(10) { animation-delay: 0.50s; }

@media (max-width: 768px) {
    .activity-item { flex-direction: column; gap: 0.8rem; padding: 1.6rem; }
    .activity-icon { font-size: 2rem; }
    .activity-title { white-space: normal; font-size: 1.4rem; }
}

/* ============================================================
   2025 WRAPPED
   ============================================================ */

.wrapped-section {
    padding: 100px 9%;
    background: var(--bg-color);
}

.wrapped-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 4rem 0;
}

.wrapped-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2.8rem 2rem;
    text-align: center;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.wrapped-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--main-color), var(--accent-color));
}

.wrapped-stat-card:hover { transform: translateY(-5px); }

.wrapped-stat-icon {
    font-size: 2.4rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    display: block;
}

.wrapped-stat-value {
    font-size: 5rem;
    font-weight: 700;
    color: var(--main-color);
    line-height: 1;
    margin-bottom: 0.6rem;
    font-family: var(--font-heading);
}

.wrapped-stat-label {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.4rem;
}

.wrapped-stat-note {
    font-size: 1.15rem;
    color: var(--text-muted);
}

.wrapped-section-sub {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 4rem 0 2rem;
    text-align: center;
}

.wrapped-section-sub span { color: var(--main-color); }

.wrapped-highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.wrapped-highlight-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    transition: transform 0.25s ease;
}

.wrapped-highlight-card:hover { transform: translateY(-3px); }

.wrapped-highlight-label {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.wrapped-highlight-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.4rem;
}

.wrapped-highlight-note {
    font-size: 1.3rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.wrapped-top-picks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.wrapped-top-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: transform 0.25s ease;
}

.wrapped-top-card:hover { transform: translateY(-4px); }

.wrapped-top-category {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--main-color);
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.wrapped-top-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

.wrapped-top-reason {
    font-size: 1.2rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Genre bars */
.wrapped-genres { max-width: 600px; margin: 0 auto; }

.wrapped-genre-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.4rem;
}

.wrapped-genre-label {
    font-size: 1.3rem;
    color: var(--text-color);
    width: 9rem;
    flex-shrink: 0;
}

.wrapped-genre-bar-track {
    flex: 1;
    background: var(--border-color);
    border-radius: 100px;
    height: 8px;
    overflow: hidden;
}

.wrapped-genre-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--main-color), var(--accent-color));
    border-radius: 100px;
    width: 0;
    transition: width 1.2s ease;
}

.wrapped-genre-pct {
    font-size: 1.2rem;
    color: var(--text-muted);
    width: 4rem;
    text-align: right;
}

@media (max-width: 991px) {
    .wrapped-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .wrapped-top-picks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .wrapped-stats-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
    .wrapped-highlights-grid { grid-template-columns: 1fr; }
    .wrapped-top-picks { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
    .wrapped-stat-value { font-size: 3.8rem; }
}

@media (max-width: 480px) {
    .wrapped-stats-grid { grid-template-columns: 1fr; }
    .wrapped-top-picks { grid-template-columns: 1fr; }
}

/* ============================================================
   2025 YEARLY ROUNDUP
   ============================================================ */

.wrapped2025-section {
    background: var(--bg-color);
    position: relative;
}

.wrapped2025-year-badge {
    position: absolute;
    top: 4rem;
    right: 9%;
    font-size: 9rem;
    font-weight: 800;
    color: rgba(var(--main-color-rgb),0.06);
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.02em;
    line-height: 1;
}

@media (max-width: 768px) {
    .wrapped2025-year-badge { font-size: 6rem; top: 2rem; }
}

/* ============================================================
   STATS DASHBOARD PANELS
   ============================================================ */

.dashboard-panel {
    max-width: 860px;
    margin: 5rem auto 0;
    text-align: center;
}

.dashboard-label {
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.6rem;
}

.dashboard-label span { color: var(--main-color); }

.dashboard-sublabel {
    font-size: 1.45rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
}

/* ── Radar chart ── */
.radar-container { display: flex; justify-content: center; }

.radar-chart {
    display: block;
    max-width: 340px;
    width: 100%;
    height: auto;
}

@media (max-width: 480px) {
    .radar-chart { max-width: 260px; }
}

/* ── Rating distribution ── */
.rating-dist {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 560px;
    margin: 0 auto;
}

.rating-row {
    display: grid;
    grid-template-columns: 8rem 1fr 4rem;
    align-items: center;
    gap: 1rem;
}

.rating-row-label {
    font-size: 1.4rem;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}

.rating-bar-track {
    height: 10px;
    background: rgba(var(--main-color-rgb),0.12);
    border-radius: 999px;
    overflow: hidden;
}

.rating-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 0.8s cubic-bezier(.4,0,.2,1);
}

.rating-row-count {
    font-size: 1.35rem;
    color: var(--text-muted);
    text-align: left;
}

/* ── Taste card CTA ── */
.taste-card-cta {
    text-align: center;
    margin-top: 5rem;
}

.taste-card-btn { gap: 0.7rem; }

.taste-card-hint {
    font-size: 1.3rem;
    color: var(--text-muted);
    margin-top: 1rem;
}

/* ============================================================
   MILESTONE BADGES
   ============================================================ */

.milestones-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1.8rem;
    padding: 1rem 0;
    justify-content: center;
}

.milestone-badge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 1.8rem 1rem 1.4rem;
    border-radius: 1.2rem;
    background: var(--card-bg, var(--snd-bg-color));
    border: 2px solid var(--border-color, rgba(var(--main-color-rgb),0.12));
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.milestone-badge.unlocked {
    border-color: rgba(var(--main-color-rgb),0.4);
    opacity: 0;
}

.milestone-badge.unlocked.animate-in {
    animation: badgeUnlock 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
}

.milestone-badge.locked {
    opacity: 0.45;
    filter: grayscale(0.6);
}

@keyframes badgeUnlock {
    0%   { opacity: 0; transform: scale(0.6) rotate(-6deg); }
    70%  { transform: scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

.milestone-badge.unlocked:hover {
    transform: translateY(-4px);
    border-color: var(--main-color);
}

.milestone-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.milestone-icon {
    font-size: 2.8rem;
    color: var(--main-color);
}

.milestone-badge.locked .milestone-icon {
    color: var(--text-muted);
}

.milestone-lock {
    position: absolute;
    bottom: -4px;
    right: -6px;
    font-size: 1.2rem;
    color: var(--text-muted);
}

.milestone-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
}

.milestone-count {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.milestone-check {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    font-size: 1.4rem;
    color: var(--main-color);
}

/* Glow ring on unlocked badges */
.milestone-badge.unlocked::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 1.4rem;
    background: conic-gradient(
        rgba(var(--main-color-rgb),0.6),
        rgba(var(--main-color-rgb),0),
        rgba(var(--main-color-rgb),0.6)
    );
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.milestone-badge.unlocked:hover::after { opacity: 1; }

@media (max-width: 480px) {
    .milestones-shelf { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1.2rem; }
    .milestone-icon { font-size: 2.2rem; }
    .milestone-label { font-size: 1.1rem; }
}

/* ============================================================
   THIS OR THAT BATTLES
   ============================================================ */

.battles-section {
    background: var(--snd-bg-color);
    text-align: center;
}

.battle-arena {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2.4rem;
    max-width: 860px;
    margin: 0 auto 3rem;
}

.battle-card {
    background: var(--card-bg, var(--bg-color));
    border: 2px solid var(--border-color, rgba(var(--main-color-rgb),0.15));
    border-radius: 1.6rem;
    padding: 3rem 2.4rem;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}

.battle-card:hover:not(.voted) {
    transform: translateY(-4px);
    border-color: var(--main-color);
    box-shadow: 0 0 24px rgba(var(--main-color-rgb),0.2);
}

.battle-card:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 3px;
}

.battle-card.winner {
    border-color: var(--main-color);
    box-shadow: 0 0 32px rgba(var(--main-color-rgb),0.25);
    animation: battleWin 0.4s ease;
}

.battle-card.loser {
    opacity: 0.5;
    filter: grayscale(0.5);
}

.battle-card.voted { cursor: default; }

@keyframes battleWin {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

.battle-category {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--main-color);
    opacity: 0.8;
}

.battle-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.3;
    font-family: var(--font-heading);
}

.battle-quote {
    font-size: 1.3rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
}

.battle-vs {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--main-color);
    opacity: 0.7;
    text-shadow: 0 0 20px rgba(var(--main-color-rgb),0.4);
}

.battle-bar-wrap {
    width: 100%;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.5rem;
}

.battle-bar {
    flex: 1;
    height: 6px;
    background: var(--main-color);
    border-radius: 999px;
    width: 0;
    transition: width 0.7s cubic-bezier(.4,0,.2,1);
}

.battle-pct {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--main-color);
    min-width: 3.5rem;
}

.battle-actions { margin-bottom: 2rem; }

@media (max-width: 768px) {
    .battle-arena {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
    .battle-vs { order: -1; font-size: 2rem; }
    .battle-card { min-height: unset; padding: 2.4rem; }
}

/* ============================================================
   INTERACTIVE TIER LIST
   ============================================================ */

.tierlist-section {
    background: var(--bg-color);
}

.tierlist-actions {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.tierlist-btn { min-width: 18rem; }

.btn-outline {
    background: transparent;
    border: 2px solid var(--main-color);
    color: var(--main-color);
}

.btn-outline:hover {
    background: var(--main-color);
    color: #fff;
}

.tierlist-wrapper {
    max-width: 980px;
    margin: 0 auto;
    border: 1px solid rgba(var(--main-color-rgb),0.15);
    border-radius: 1.4rem;
    overflow: hidden;
}

.tier-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(var(--main-color-rgb),0.1);
}

.tier-row:last-child { border-bottom: none; }

.tier-label {
    width: 6rem;
    min-width: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 800;
    flex-shrink: 0;
}

.tier-s { background: #ef4444; color: #fff; }
.tier-a { background: #f97316; color: #fff; }
.tier-b { background: #eab308; color: #111; }
.tier-c { background: #22c55e; color: #111; }
.tier-d { background: #3b82f6; color: #fff; }

.tier-drop-zone {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    min-height: 72px;
    background: var(--snd-bg-color);
    transition: background 0.15s ease;
}

.tier-drop-zone.drag-over {
    background: rgba(var(--main-color-rgb),0.08);
    outline: 2px dashed rgba(var(--main-color-rgb),0.5);
    outline-offset: -2px;
}

.tier-unranked-wrap {
    border-top: 2px solid rgba(var(--main-color-rgb),0.15);
    background: var(--bg-color);
}

.tier-unranked-label {
    padding: 1rem 1.2rem 0;
    font-size: 1.2rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tier-unranked {
    min-height: 100px;
    background: transparent;
}

.tier-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--card-bg, var(--bg-color));
    border: 1px solid rgba(var(--main-color-rgb),0.2);
    border-radius: 0.8rem;
    padding: 0.7rem 1.1rem;
    cursor: grab;
    user-select: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    touch-action: none;
}

.tier-item:hover {
    box-shadow: 0 2px 12px rgba(var(--main-color-rgb),0.2);
    transform: scale(1.02);
}

.tier-item.dragging { opacity: 0.4; cursor: grabbing; }

.tier-item--dragging-clone {
    border-radius: 0.8rem;
    padding: 0.7rem 1.1rem;
    background: var(--snd-bg-color);
    border: 1px solid var(--main-color);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    pointer-events: none;
}

.tier-item-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.3;
}

.tier-item-cat {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

@media (max-width: 600px) {
    .tier-label { width: 4rem; min-width: 4rem; font-size: 1.8rem; }
    .tier-item-title { font-size: 1.15rem; }
}

/* ============================================================
   TASTE COMPATIBILITY QUIZ
   ============================================================ */

.quiz-section { background: var(--snd-bg-color); }

.quiz-container {
    max-width: 680px;
    margin: 0 auto;
}

.quiz-start {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--bg-color);
    border-radius: 1.6rem;
    border: 1px solid rgba(var(--main-color-rgb),0.15);
}

.quiz-intro {
    font-size: 1.6rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
    line-height: 1.6;
}

.quiz-question {
    background: var(--bg-color);
    border-radius: 1.6rem;
    border: 1px solid rgba(var(--main-color-rgb),0.15);
    padding: 3.6rem 3.2rem;
}

.quiz-progress-wrap {
    height: 5px;
    background: rgba(var(--main-color-rgb),0.12);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 1.2rem;
}

.quiz-progress-bar {
    height: 100%;
    width: 0;
    background: var(--main-color);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.quiz-progress-label {
    font-size: 1.25rem;
    color: var(--text-muted);
    text-align: right;
    margin-bottom: 2.4rem;
}

.quiz-q-text {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 2.8rem;
    line-height: 1.4;
    font-family: var(--font-heading);
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.quiz-option-btn {
    padding: 1.4rem 2rem;
    border-radius: 1rem;
    border: 2px solid rgba(var(--main-color-rgb),0.2);
    background: var(--snd-bg-color);
    color: var(--text-color);
    font-size: 1.6rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.quiz-option-btn:hover:not(:disabled) {
    border-color: var(--main-color);
    background: rgba(var(--main-color-rgb),0.08);
    transform: translateX(4px);
}

.quiz-option-btn.selected {
    border-color: var(--main-color);
    background: rgba(var(--main-color-rgb),0.15);
}

.quiz-option-btn:disabled { cursor: default; }

/* Quiz Result */
.quiz-result {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    background: var(--bg-color);
    border-radius: 1.6rem;
    border: 1px solid rgba(var(--main-color-rgb),0.15);
    padding: 4rem 3rem;
}

.quiz-score-ring {
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    border: 5px solid var(--ring-color, var(--main-color));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(var(--main-color-rgb),0.2);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.quiz-score-num {
    font-size: 4rem;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1;
}

.quiz-score-label {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

.quiz-verdict {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--main-color);
}

.quiz-verdict-desc {
    font-size: 1.6rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 44rem;
}

.quiz-result-actions {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 600px) {
    .quiz-question { padding: 2.4rem 2rem; }
    .quiz-q-text { font-size: 1.7rem; }
    .quiz-option-btn { font-size: 1.45rem; padding: 1.2rem 1.6rem; }
    .quiz-score-ring { width: 13rem; height: 13rem; }
    .quiz-score-num { font-size: 3.2rem; }
}

/* LAZY RENDERING — defer off-screen section paint cost */
#watchlist, #played, #reading {
    content-visibility: auto;
    contain-intrinsic-size: 0 800px;
}

/* SITE TOUR */
.tour-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9990; pointer-events: none; }
.tour-tooltip { position: absolute; background: var(--snd-bg-color); border: 1px solid rgba(var(--main-color-rgb),0.3); border-radius: 16px; padding: 1.8rem 2rem; width: 340px; max-width: calc(100vw - 32px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); z-index: 9995; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
.tour-tooltip.active { opacity: 1; visibility: visible; }
.tour-step-count { font-size: 1.1rem; color: var(--main-color); font-weight: 600; margin-bottom: 0.6rem; }
.tour-title { font-size: 1.5rem; font-weight: 700; color: var(--text-color); margin-bottom: 0.7rem; line-height: 1.3; }
.tour-body { font-size: 1.3rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.4rem; }
.tour-actions { display: flex; gap: 0.6rem; justify-content: space-between; }
.tour-skip { font-size: 1.2rem; padding: 0.5rem 1rem; }
.tour-next { font-size: 1.3rem; padding: 0.5rem 1.4rem; display: flex; align-items: center; gap: 0.4rem; }
/* Tour prompt */
.tour-prompt { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: var(--snd-bg-color); border: 1px solid rgba(var(--main-color-rgb),0.25); border-radius: 16px; padding: 1.2rem 1.6rem; box-shadow: 0 8px 28px rgba(0,0,0,0.25); z-index: 9980; max-width: calc(100vw - 32px); animation: slideUpIn 0.35s ease; }
.tour-prompt--hiding { animation: slideDownOut 0.35s ease forwards; }
@keyframes slideUpIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes slideDownOut { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(20px); } }
.tour-prompt-content { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tour-prompt-emoji { font-size: 2rem; flex-shrink: 0; }
.tour-prompt-title { font-size: 1.4rem; font-weight: 600; color: var(--text-color); }
.tour-prompt-sub { font-size: 1.2rem; color: var(--text-muted); }
.tour-prompt-yes { font-size: 1.2rem; padding: 0.5rem 1.2rem; margin-top: 0; }
.tour-prompt-no { font-size: 1.2rem; padding: 0.5rem 1rem; margin-top: 0; }

/* TWO TRUTHS AND A LIE */
.truths-lies-section { padding: var(--section-padding); }
.truths-lies-wrap { max-width: 600px; margin: 0 auto; }
.ttl-start { text-align: center; padding: 3rem 2rem; }
.ttl-intro { font-size: 1.5rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.6rem; }
.ttl-hs { font-size: 1.3rem; color: var(--text-muted); margin-bottom: 1.2rem; }
.ttl-start-btn { font-size: 1.6rem; padding: 1rem 2.8rem; }
.ttl-round { background: var(--snd-bg-color); border: 1px solid rgba(var(--main-color-rgb),0.15); border-radius: 18px; padding: 2.4rem; }
.ttl-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; font-size: 1.3rem; color: var(--text-muted); }
.ttl-score-live { font-weight: 600; color: var(--main-color); }
.ttl-progress-bar { height: 4px; background: rgba(var(--main-color-rgb),0.12); border-radius: 2px; margin-bottom: 1.8rem; overflow: hidden; }
.ttl-progress-fill { height: 100%; background: var(--main-color); border-radius: 2px; transition: width 0.4s ease; }
.ttl-question { font-size: 1.7rem; font-weight: 600; color: var(--text-color); margin-bottom: 1.4rem; text-align: center; }
.ttl-lie-word { color: var(--main-color); }
.ttl-options { display: flex; flex-direction: column; gap: 0.8rem; }
.ttl-option { display: flex; align-items: flex-start; gap: 1.2rem; padding: 1.2rem 1.4rem; border-radius: 12px; background: rgba(var(--main-color-rgb),0.04); border: 1.5px solid rgba(var(--main-color-rgb),0.12); cursor: pointer; color: var(--text-color); font-size: 1.4rem; text-align: left; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.ttl-option:hover:not(:disabled) { background: rgba(var(--main-color-rgb),0.1); border-color: rgba(var(--main-color-rgb),0.3); transform: translateX(3px); }
.ttl-option:disabled { cursor: default; }
.ttl-option-letter { font-weight: 700; color: var(--main-color); flex-shrink: 0; width: 1.8rem; }
.ttl-option-text { flex: 1; line-height: 1.5; }
.ttl-option--correct { background: rgba(34,197,94,0.1) !important; border-color: #22c55e !important; color: #22c55e !important; }
.ttl-option--correct .ttl-option-letter { color: #22c55e; }
.ttl-option--wrong { background: rgba(239,68,68,0.1) !important; border-color: #ef4444 !important; color: #ef4444 !important; }
.ttl-option--wrong .ttl-option-letter { color: #ef4444; }
.ttl-option--wrong-neutral { opacity: 0.5; }
.ttl-feedback { gap: 0.6rem; align-items: flex-start; margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: 10px; font-size: 1.3rem; line-height: 1.5; }
.ttl-feedback--correct { background: rgba(34,197,94,0.1); color: #22c55e; }
.ttl-feedback--wrong { background: rgba(239,68,68,0.1); color: #ef4444; }
.ttl-feedback i { font-size: 1.6rem; flex-shrink: 0; margin-top: 0.1rem; }
.ttl-result { text-align: center; padding: 3rem 2rem; }
.ttl-result-emoji { font-size: 6rem; display: block; margin-bottom: 1.2rem; }
.ttl-result-score { font-size: 3rem; font-weight: 800; color: var(--main-color); margin-bottom: 0.4rem; }
.ttl-result-verdict { font-size: 1.6rem; color: var(--text-color); margin-bottom: 0.3rem; }
.ttl-result-pct { font-size: 1.3rem; color: var(--text-muted); margin-bottom: 2rem; }

/* QUIZ SHARE CARD */
.quiz-share-card { background: linear-gradient(135deg, rgba(var(--main-color-rgb),0.15) 0%, rgba(var(--main-color-rgb),0.05) 100%); border: 1px solid rgba(var(--main-color-rgb),0.3); border-radius: 16px; padding: 2rem; text-align: center; margin: 1.6rem 0; }
.qsc-score { font-size: 4rem; font-weight: 800; color: var(--main-color); line-height: 1; margin-bottom: 0.4rem; font-family: 'Space Grotesk', 'Inter', sans-serif; }
.qsc-verdict { font-size: 1.6rem; font-weight: 600; color: var(--text-color); margin-bottom: 0.3rem; }
.qsc-name { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.qsc-site { font-size: 1.1rem; color: var(--text-muted); opacity: 0.6; }

/* QUIZ LEADERBOARD */
.quiz-leaderboard { margin-top: 2.4rem; background: rgba(var(--main-color-rgb),0.05); border: 1px solid rgba(var(--main-color-rgb),0.15); border-radius: 16px; padding: 1.6rem 2rem; }
.quiz-lb-title { font-size: 1.5rem; font-weight: 600; color: var(--main-color); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
.quiz-lb-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; }
.quiz-lb-item { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1rem; border-radius: 10px; background: rgba(var(--main-color-rgb),0.04); font-size: 1.4rem; }
.quiz-lb-item--me { background: rgba(var(--main-color-rgb),0.12); border: 1px solid rgba(var(--main-color-rgb),0.25); font-weight: 600; }
.quiz-lb-rank { width: 2.2rem; text-align: center; font-weight: 700; color: var(--main-color); font-size: 1.2rem; }
.quiz-lb-name { flex: 1; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiz-lb-score { font-weight: 600; color: var(--main-color); }

/* ============================================================
   HUNT LIST VOTE BUTTONS
   ============================================================ */

.hunt-vote {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--main-color-rgb),0.1);
}

.hunt-vote-btn {
    background: none;
    border: 2px solid rgba(var(--main-color-rgb),0.25);
    border-radius: 50%;
    width: 3.4rem;
    height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.6rem;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.hunt-vote-btn:hover:not(:disabled):not(.voted) {
    border-color: var(--main-color);
    color: var(--main-color);
    background: rgba(var(--main-color-rgb),0.1);
    transform: scale(1.12);
}

.hunt-vote-btn.voted {
    border-color: var(--main-color);
    color: var(--main-color);
    background: rgba(var(--main-color-rgb),0.12);
    cursor: default;
}

.hunt-vote-count {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 2rem;
}



/* PAGE TRANSITION ANIMATION */
@keyframes sectionFadeIn {
    from { opacity: 0.6; transform: translateY(10px); }
    to   { opacity: 1;   transform: translateY(0); }
}
.section-entering { animation: sectionFadeIn 0.3s ease forwards; }

/* SEASONAL THEMING */
[data-season="spring"] .home::before { background: radial-gradient(ellipse at 60% 0%, rgba(255,182,193,0.06) 0%, transparent 70%); }
[data-season="summer"] .home::before { background: radial-gradient(ellipse at 60% 0%, rgba(255,215,100,0.05) 0%, transparent 70%); }
[data-season="autumn"] .home::before { background: radial-gradient(ellipse at 60% 0%, rgba(255,140,60,0.05) 0%, transparent 70%); }
[data-season="winter"] .home::before { background: radial-gradient(ellipse at 60% 0%, rgba(180,210,255,0.05) 0%, transparent 70%); }

/* TASTE CARD share buttons */
.taste-card-btns { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }

/* STATS - Year Distribution Chart */
.year-distribution { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 1.2rem 0 0; overflow-x: auto; scrollbar-width: thin; }
.year-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.year-bar-fill { width: 18px; height: 100%; background: var(--main-color); border-radius: 3px 3px 0 0; opacity: 0.75; transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s cubic-bezier(.22,.68,0,1.2); }
.year-bar-label { font-size: 1rem; color: var(--text-muted); white-space: nowrap; }

/* QUIZ - What We Have In Common */
#quiz-common { width: 100%; max-width: 520px; margin: 1.6rem 0; }
.quiz-common-group { margin-bottom: 1.2rem; }
.quiz-common-heading { font-size: 1.3rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.5rem; }
.quiz-common-heading i { color: var(--main-color); }
.quiz-common-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.quiz-common-tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 1rem; border-radius: 99px; font-size: 1.25rem; font-weight: 500; }
.quiz-common-tag.shared { background: rgba(var(--main-color-rgb),0.15); color: var(--main-color); border: 1px solid rgba(var(--main-color-rgb),0.3); }
.quiz-common-tag.differ { background: rgba(148,163,184,0.1); color: var(--text-muted); border: 1px solid rgba(148,163,184,0.2); }

/* GUESS MY RATING */
.guess-rating-section { background: var(--bg-color); text-align: center; }
.guess-game { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.guess-title-display { font-size: 2.4rem; font-weight: 700; color: var(--text-color); line-height: 1.3; max-width: 100%; }
.guess-genre-hints { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.guess-genre-tag, .guess-type-tag { padding: 0.3rem 0.9rem; border-radius: 99px; font-size: 1.2rem; background: rgba(var(--main-color-rgb),0.12); color: var(--accent-color); border: 1px solid rgba(var(--main-color-rgb),0.2); }
.guess-options { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.guess-option-btn { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1rem 1.4rem; background: var(--snd-bg-color); border: 2px solid rgba(var(--main-color-rgb),0.2); border-radius: 12px; color: var(--text-color); font-size: 1.6rem; cursor: pointer; font-family: inherit; transition: border-color 0.2s, transform 0.15s, background 0.2s; }
.guess-option-btn:hover:not(:disabled) { border-color: var(--main-color); transform: translateY(-2px); }
.guess-option-btn.correct { border-color: #22c55e; background: rgba(34,197,94,0.12); color: #22c55e; }
.guess-option-btn.wrong { border-color: #ef4444; background: rgba(239,68,68,0.1); color: #ef4444; }
.guess-star-num { font-size: 1.1rem; color: var(--text-muted); }
.guess-result { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.4rem 2rem; border-radius: 12px; border: 2px solid transparent; width: 100%; max-width: 400px; }
.guess-result--exact { border-color: #22c55e; background: rgba(34,197,94,0.08); }
.guess-result--close { border-color: #eab308; background: rgba(234,179,8,0.08); }
.guess-result--off { border-color: #ef4444; background: rgba(239,68,68,0.06); }
.guess-result-icon { font-size: 2.4rem; }
.guess-result-msg { font-size: 1.6rem; font-weight: 600; }
.guess-result-actual { font-size: 1.4rem; color: var(--text-muted); }
.guess-result-pts { font-size: 1.3rem; font-weight: 700; color: var(--main-color); }
.guess-score-row { display: flex; gap: 2rem; font-size: 1.3rem; color: var(--text-muted); font-weight: 500; flex-wrap: wrap; justify-content: center; }
.guess-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ANONYMOUS POLLS */
.polls-section { background: var(--snd-bg-color); text-align: center; }
.polls-container { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.4rem; }
.poll-card { background: var(--card-bg, var(--bg-color)); border: 1px solid rgba(var(--main-color-rgb),0.15); border-radius: 16px; padding: 2.4rem; text-align: left; }
.poll-question { font-size: 1.7rem; font-weight: 700; color: var(--text-color); margin-bottom: 1.6rem; line-height: 1.4; }
.poll-options { display: flex; flex-direction: column; gap: 0.8rem; }
.poll-option-btn { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 0.3rem 1rem; padding: 0.9rem 1.2rem; text-align: left; border-radius: 10px; font-size: 1.4rem; font-family: inherit; overflow: hidden; transition: border-color 0.2s, background 0.2s; cursor: pointer; width: 100%; background: transparent; border: 1.5px solid rgba(var(--main-color-rgb),0.2); color: var(--text-color); }
.poll-option-btn:hover:not(:disabled) { border-color: var(--main-color); background: rgba(var(--main-color-rgb),0.06); }
.poll-option-btn:disabled { cursor: default; }
.poll-opt-label { grid-column: 1; grid-row: 1; font-weight: 500; }
.poll-opt-count { grid-column: 2; grid-row: 1; font-size: 1.2rem; color: var(--text-muted); white-space: nowrap; }
.poll-opt-bar { grid-column: 1 / -1; grid-row: 2; height: 4px; background: rgba(var(--main-color-rgb),0.1); border-radius: 2px; overflow: hidden; margin-top: 0.4rem; }
.poll-opt-fill { height: 100%; width: 100%; background: var(--main-color); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(.22,.68,0,1.2); }
.poll-opt-pct { grid-column: 2; grid-row: 2; font-size: 1.1rem; color: var(--main-color); font-weight: 600; text-align: right; }
.poll-total { margin-top: 1.2rem; font-size: 1.25rem; color: var(--text-muted); }

/* FAB STACK — vertically centered like reactions bar */
.fab-stack {
    position: fixed;
    right: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    z-index: 1001;
}
.nickname-fab-wrapper {
    position: relative;
}

/* ACHIEVEMENT BADGE SYSTEM */
.badge-fab { position: relative; width: 5rem; height: 5rem; border-radius: 50%; background: var(--main-color); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; box-shadow: 0 4px 20px rgba(var(--main-color-rgb),0.4); z-index: 1000; transition: transform 0.2s, box-shadow 0.2s; }
.badge-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(var(--main-color-rgb),0.5); }
@keyframes badgeFabPulse { 0%,100% { transform: scale(1); } 40% { transform: scale(1.18); } }
.badge-fab--pulse { animation: badgeFabPulse 0.5s ease; }
.badge-count { position: absolute; top: -4px; right: -4px; background: #ef4444; color: #fff; font-size: 1.1rem; font-weight: 700; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-color); }
.badge-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 9997; display: flex; align-items: center; justify-content: center; padding: 2rem; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.badge-modal.active { opacity: 1; visibility: visible; }
.badge-modal-content { background: var(--snd-bg-color); border: 1px solid rgba(var(--main-color-rgb),0.2); border-radius: 20px; padding: 2.8rem; width: 100%; max-width: 560px; max-height: 80vh; overflow-y: auto; position: relative; }
.badge-modal-close { position: absolute; top: 1.2rem; right: 1.6rem; background: none; border: none; color: var(--text-muted); font-size: 2.4rem; cursor: pointer; line-height: 1; transition: color 0.2s; }
.badge-modal-close:hover { color: var(--text-color); }
.badge-modal-title { font-size: 2rem; font-weight: 700; color: var(--main-color); margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.6rem; }
.badge-modal-subtitle { font-size: 1.3rem; color: var(--text-muted); margin-bottom: 2rem; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 120px)); gap: 1.2rem; justify-content: center; }
.badge-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.4rem 0.8rem; border-radius: 14px; border: 1.5px solid; text-align: center; transition: transform 0.2s; }
.badge-item--unlocked { border-color: rgba(var(--main-color-rgb),0.35); background: rgba(var(--main-color-rgb),0.07); }
.badge-item--locked { border-color: rgba(148,163,184,0.12); background: rgba(148,163,184,0.04); opacity: 0.55; }
.badge-item--unlocked:hover { transform: translateY(-3px); }
.badge-icon { width: 4rem; height: 4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.badge-item--unlocked .badge-icon { background: rgba(var(--main-color-rgb),0.15); color: var(--main-color); }
.badge-item--locked .badge-icon { background: rgba(var(--text-color-rgb, 148,163,184), 0.1); color: var(--text-muted); }
.badge-name { font-size: 1.2rem; font-weight: 600; color: var(--text-color); }
.badge-desc { font-size: 1.1rem; color: var(--text-muted); line-height: 1.4; }
/* MOOD NAVIGATOR */
.mood-navigator { position: relative; z-index: 1001; }
.mood-nav-btn { width: 4.8rem; height: 4.8rem; border-radius: 50%; background: var(--snd-bg-color); color: var(--text-muted); border: 1.5px solid var(--border-color); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 2px 12px rgba(0,0,0,0.1); transition: transform 0.2s, color 0.2s, border-color 0.2s; }
.mood-nav-btn:hover, .mood-nav-btn[aria-expanded="true"] { transform: scale(1.08); color: var(--main-color); border-color: var(--main-color); }
.mood-nav-panel { position: absolute; bottom: calc(100% + 0.8rem); right: 0; background: var(--snd-bg-color); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.4rem 1.2rem; min-width: 22rem; box-shadow: 0 8px 28px rgba(0,0,0,0.2); opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.97); transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease; transform-origin: bottom right; }
.mood-nav-panel.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.mood-panel-heading { font-size: 1.3rem; color: var(--text-muted); text-align: center; margin-bottom: 1rem; }
.mood-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.mood-option { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.8rem 0.4rem; border-radius: 10px; background: rgba(var(--main-color-rgb),0.04); border: 1px solid rgba(var(--main-color-rgb),0.1); cursor: pointer; color: var(--text-color); font-size: 1.2rem; transition: background 0.2s, border-color 0.2s, transform 0.15s; }
.mood-option:hover { background: rgba(var(--main-color-rgb),0.1); border-color: rgba(var(--main-color-rgb),0.3); transform: translateY(-2px); }
.mood-icon { font-size: 1.8rem; line-height: 1; }
.mood-label { font-size: 1.1rem; font-weight: 500; }

/* VISITOR PROFILE FAB */
.visitor-profile-fab { width: 4.8rem; height: 4.8rem; border-radius: 50%; background: var(--snd-bg-color); color: var(--text-muted); border: 1.5px solid var(--border-color); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 2px 12px rgba(0,0,0,0.1); z-index: 1000; transition: transform 0.2s, box-shadow 0.2s, color 0.2s, border-color 0.2s; }
.visitor-profile-fab:hover { transform: scale(1.08); color: var(--main-color); border-color: var(--main-color); }
/* VISITOR PROFILE MODAL */
.visitor-profile-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9997; display: flex; align-items: center; justify-content: center; padding: 2rem; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.visitor-profile-modal.active { opacity: 1; visibility: visible; }
.visitor-profile-content { background: var(--snd-bg-color); border: 1px solid rgba(var(--main-color-rgb),0.2); border-radius: 20px; padding: 2.8rem; width: 100%; max-width: 380px; position: relative; }
.visitor-profile-close { position: absolute; top: 1.2rem; right: 1.6rem; background: none; border: none; color: var(--text-muted); font-size: 2.4rem; cursor: pointer; line-height: 1; transition: color 0.2s; }
.visitor-profile-close:hover { color: var(--text-color); }
.vp-header { display: flex; align-items: center; gap: 1.6rem; margin-bottom: 2rem; }
.vp-avatar { width: 5.6rem; height: 5.6rem; border-radius: 50%; background: rgba(var(--main-color-rgb),0.12); color: var(--main-color); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; flex-shrink: 0; }
.vp-identity { display: flex; flex-direction: column; gap: 0.3rem; }
.vp-name { font-size: 2rem; font-weight: 700; color: var(--text-color); }
.vp-visitor-num { font-size: 1.3rem; color: var(--main-color); font-weight: 600; }
.vp-since { font-size: 1.2rem; color: var(--text-muted); }
.vp-tier-row { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.2rem; background: rgba(var(--main-color-rgb),0.07); border-radius: 10px; margin-bottom: 1.4rem; font-size: 1.4rem; }
.vp-tier-row i { font-size: 1.8rem; color: var(--main-color); }
.vp-tier-label { font-weight: 600; color: var(--text-color); flex: 1; }
.vp-points { font-size: 1.2rem; color: var(--text-muted); }
.vp-badges-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.vp-stat-label { display: flex; align-items: center; gap: 0.4rem; font-size: 1.3rem; color: var(--text-muted); flex: 1; }
.vp-stat-label i { font-size: 1.5rem; }
.vp-stat-value { font-size: 1.3rem; font-weight: 600; color: var(--text-color); }
.vp-badge-progress { height: 0.5rem; background: rgba(var(--main-color-rgb),0.12); border-radius: 4px; margin-bottom: 2rem; overflow: hidden; }
.vp-badge-bar { height: 100%; background: rgba(var(--main-color-rgb),0.12); border-radius: 4px; }
.vp-badge-fill { height: 100%; background: var(--main-color); border-radius: 4px; transition: width 0.6s ease; }
.vp-share-btn { width: 100%; justify-content: center; }

/* SURPRISE ME FAB */
.surprise-fab { width: 4.8rem; height: 4.8rem; border-radius: 50%; background: var(--snd-bg-color); color: var(--main-color); border: 1.5px solid rgba(var(--main-color-rgb),0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 2px 14px rgba(var(--main-color-rgb),0.2); z-index: 1000; transition: transform 0.2s, box-shadow 0.2s; }
.surprise-fab:hover { transform: scale(1.1); box-shadow: 0 4px 22px rgba(var(--main-color-rgb),0.35); }
@keyframes surpriseSpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } }
.surprise-fab--spin { animation: surpriseSpin 0.5s ease; }

/* NICKNAME FAB */
.nickname-fab { width: 4.8rem; height: 4.8rem; border-radius: 50%; background: var(--snd-bg-color); color: var(--text-muted); border: 1.5px solid var(--border-color); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; box-shadow: 0 2px 12px rgba(0,0,0,0.12); z-index: 999; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s; }
.nickname-fab:hover { transform: scale(1.08); box-shadow: 0 4px 18px rgba(0,0,0,0.18); border-color: var(--main-color); color: var(--main-color); }
.nickname-fab.has-name { border-color: var(--main-color); color: var(--main-color); }
.nickname-popover { position: absolute; bottom: calc(100% + 0.8rem); right: 0; background: var(--snd-bg-color); border: 1px solid var(--border-color); border-radius: 16px; padding: 2rem 2.2rem; min-width: 24rem; max-width: 30rem; box-shadow: 0 8px 32px rgba(0,0,0,0.22); z-index: 1001; display: flex; flex-direction: column; gap: 1.2rem; opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.97); transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease; transform-origin: bottom right; }
.nickname-popover.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.nickname-popover-greeting { font-size: 1.6rem; color: var(--text-color); font-weight: 500; }
.nickname-popover-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.nickname-popover-edit-btn { align-self: flex-start; font-size: 1.3rem; padding: 0.5rem 1rem; }
/* Larger prompt label and input inside the popover */
.nickname-popover .nickname-prompt-label { font-size: 1.5rem; color: var(--text-color); font-weight: 500; }
.nickname-popover .nickname-input { font-size: 1.4rem; padding: 0.6rem 0.8rem; width: 100%; box-sizing: border-box; }
.nickname-popover .nickname-save-btn,
.nickname-popover .nickname-cancel-btn { font-size: 1.3rem; padding: 0.5rem 1.2rem; }

@media (max-width: 480px) {
    /* font-size: 50% → 1rem = 8px on mobile. All values in rem, converted to px for clarity. */
    /* back-to-top:  bottom 5rem=40px,  height 40px → top edge 80px */
    .fab-stack { display: contents; }
    .back-to-top { bottom: 5rem; right: 1.5rem; }
    /* nickname-fab: bottom 10rem=80px,  height 4.5rem=36px → top edge 116px */
    .nickname-fab { position: fixed; bottom: 10rem; right: 1.5rem; width: 4.5rem; height: 4.5rem; font-size: 2rem; }
    /* badge-fab:    bottom 15.5rem=124px, height 4.2rem=34px → top edge 158px */
    .badge-fab { position: fixed; bottom: 15.5rem; right: 1.5rem; width: 4.2rem; height: 4.2rem; font-size: 2rem; }
    /* surprise-fab: bottom 21rem=168px */
    .surprise-fab { position: fixed; bottom: 21rem; right: 1.5rem; width: 4.2rem; height: 4.2rem; font-size: 1.8rem; }
    /* Hide less-critical FABs on smallest screens to avoid crowding */
    .visitor-profile-fab, .mood-navigator { display: none; }
    .badge-grid { grid-template-columns: repeat(2, 1fr); }
    /* popover: full-width, above the stack */
    .nickname-popover { position: fixed; right: 1.5rem; left: 1.5rem; min-width: unset; max-width: unset; bottom: 16rem; }
}

/* ============================================================
   COMMUNITY DASHBOARD
   ============================================================ */

.community-dashboard {
    background: var(--snd-bg-color);
    padding: 8rem 9% 4rem;
}

.community-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.6rem;
    max-width: 1100px;
    margin: 2rem auto 0;
    justify-content: center;
}

.community-loading {
    color: var(--text-muted);
    font-size: 1.4rem;
    text-align: center;
    grid-column: 1 / -1;
    padding: 3rem;
}

.community-skeleton {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem;
    min-height: 100px;
    position: relative;
    overflow: hidden;
}

.community-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    animation: shimmer 1.5s infinite;
}

.community-error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-color);
    opacity: 0.7;
}

.community-error i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.community-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation-delay: calc(var(--stagger) * 0.08s);
}

.community-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(var(--main-color-rgb), 0.1);
}

.community-stat-icon {
    font-size: 2.4rem;
    color: var(--main-color);
    margin-bottom: 0.8rem;
    display: block;
}

.community-stat-value {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--text-color);
    display: block;
    margin-bottom: 0.4rem;
}

.community-stat-label {
    font-size: 1.3rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ============================================================
   EMOJI REACTIONS BAR (Floating)
   ============================================================ */

.reactions-bar {
    position: fixed;
    left: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.reactions-bar.visible {
    opacity: 1;
    pointer-events: auto;
}

.reactions-bar-inner {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    padding: 0.8rem 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.reaction-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.6rem 0.8rem;
    background: transparent;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    position: relative;
    overflow: visible;
}

.reaction-btn:hover {
    background: rgba(var(--main-color-rgb), 0.1);
    transform: scale(1.15);
}

.reaction-btn.reacted {
    background: rgba(var(--main-color-rgb), 0.15);
}

.reaction-btn.reacted::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--main-color);
}

.reaction-btn:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
    border-radius: 0.6rem;
}

.reaction-sending {
    opacity: 0.6;
    pointer-events: none;
}

.reaction-emoji {
    font-size: 1.8rem;
    line-height: 1;
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}

.reaction-count {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 600;
}

.reaction-float {
    position: absolute;
    font-size: 2rem;
    animation: emojiFloat 1s ease-out forwards;
    pointer-events: none;
    z-index: 10;
}

@keyframes emojiFloat {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-60px) scale(1.4); }
}

/* Section emoji badges on headings */
.section-emoji-badge {
    display: inline-flex;
    gap: 0.8rem;
    margin-left: 1rem;
    vertical-align: middle;
}

.emoji-badge-item {
    font-size: 1.3rem;
    background: rgba(var(--main-color-rgb), 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 2rem;
    color: var(--text-muted);
    white-space: nowrap;
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}

/* Site Vibes widget */
#site-vibes { margin-top: 1rem; max-width: 600px; margin-left: auto; margin-right: auto; text-align: center; }
.vibes-stat {
    font-size: 1.3rem;
    color: var(--text-muted);
    margin: 0.3rem 0;
}
.vibes-number {
    font-weight: 700;
    color: var(--main-color);
}

/* Activity Pulse */
.activity-pulse-wrap {
    margin-top: 2.5rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.pulse-heading {
    font-size: 1.5rem;
    color: var(--text-muted);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--heading-font);
}

.activity-pulse {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 480px;
    margin: 0 auto;
}

.pulse-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1.2rem;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    animation: pulseItemIn 0.4s ease both;
    animation-delay: calc(var(--stagger, 0) * 0.06s);
}

@keyframes pulseItemIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.pulse-icon {
    font-size: 1.6rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

.pulse-label {
    display: block;
    font-size: 1.3rem;
    color: var(--text-muted);
}

.pulse-time {
    display: block;
    font-size: 1.1rem;
    color: var(--text-muted);
    opacity: 0.55;
}

.pulse-empty {
    font-size: 1.3rem;
    color: var(--text-muted);
    opacity: 0.5;
}

@media (max-width: 768px) {
    .reactions-bar {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        transform: none;
        width: 100%;
    }
    .reactions-bar-inner {
        flex-direction: row;
        justify-content: center;
        border-radius: 1.2rem 1.2rem 0 0;
        padding: 0.6rem 1rem;
    }
    .reaction-btn { padding: 0.4rem 0.6rem; }
    .reaction-emoji { font-size: 1.5rem; }
}

/* ============================================================
   WHISPER BOX
   ============================================================ */

.whisper-section {
    background: var(--bg-color);
    padding: 8rem 9% 4rem;
}

.whisper-box {
    max-width: 580px;
    margin: 0 auto;
    text-align: center;
}

.whisper-counter {
    font-size: 1.6rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.whisper-counter #whisper-count {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--main-color);
}

.whisper-form textarea {
    width: 100%;
    padding: 1.2rem 1.6rem;
    font-size: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    color: var(--text-color);
    background: var(--card-bg);
    font-family: inherit;
    resize: vertical;
    min-height: 8rem;
    transition: border-color 0.3s ease;
    line-height: 1.5;
}

.whisper-form textarea:focus {
    border-color: var(--main-color);
}

.whisper-form textarea::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.whisper-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.8rem;
    gap: 1rem;
}

.whisper-char-count {
    font-size: 1.2rem;
    color: var(--text-muted);
}

.whisper-char-count.warning {
    color: var(--main-color);
    font-weight: 600;
}

.whisper-feedback {
    font-size: 1.3rem;
    flex: 1;
    text-align: center;
}

.whisper-feedback--error { color: #f87171; }
.whisper-feedback--success { color: #34d399; }

.whisper-success {
    text-align: center;
    padding: 3rem 0;
}

.whisper-lock-icon {
    font-size: 3rem;
    color: var(--main-color);
    animation: sealPulse 0.6s ease;
    display: block;
    margin-bottom: 1rem;
}

@keyframes sealPulse {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.whisper-success p {
    font-size: 1.6rem;
    color: var(--text-color);
}

.whisper-sent-msg {
    font-size: 1.6rem;
    color: var(--text-muted);
    padding: 2rem 0;
}

/* Featured whispers carousel */
.whisper-featured {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.whisper-featured.hidden { display: none; }

.whisper-featured-heading {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1.4rem;
}

.whisper-carousel {
    position: relative;
    min-height: 7rem;
}

.whisper-featured-item {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.whisper-featured-item.active {
    position: relative;
    opacity: 1;
}

.whisper-featured-text {
    font-size: 1.5rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.6;
}

/* ============================================================
   RECOMMENDATION INBOX
   ============================================================ */

.rec-inbox-section {
    background: var(--snd-bg-color);
    padding: 8rem 9% 4rem;
}

.rec-inbox-form {
    max-width: 580px;
    margin: 0 auto 3rem;
}

.rec-inbox-fields {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rec-field-group { margin: 0 auto; }

.rec-inbox-form input,
.rec-inbox-form select {
    width: 100%;
    padding: 1.2rem 1.6rem;
    font-size: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    color: var(--text-color);
    background: var(--card-bg);
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.rec-inbox-form input:focus,
.rec-inbox-form select:focus {
    border-color: var(--main-color);
}

.rec-inbox-form select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23999999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    padding-right: 3rem;
}

.rec-inbox-form .rec-field-group input[name="pitch"] {
    margin-bottom: 1rem;
}

.rec-inbox-form .btn {
    display: block;
    width: 100%;
    max-width: 580px;
    margin: 1rem auto 0;
}

.rec-inbox-feedback { text-align: center; }
.rec-inbox-feedback--error { color: #f87171; font-size: 1.3rem; }

.rec-submitted-msg {
    font-size: 1.6rem;
    color: var(--text-muted);
    text-align: center;
    padding: 2rem 0;
}

/* Recommendation cards list */
.rec-inbox-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.4rem;
    max-width: 900px;
    margin: 0 auto;
}

.rec-loading, .rec-empty {
    color: var(--text-muted);
    font-size: 1.4rem;
    text-align: center;
    grid-column: 1 / -1;
    padding: 2rem;
}

.rec-skeleton {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    padding: 1.4rem 1.6rem;
    min-height: 90px;
    position: relative;
    overflow: hidden;
}

.rec-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    animation: shimmer 1.5s infinite;
}

.rec-inbox-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    padding: 1.4rem 1.6rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rec-inbox-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--main-color-rgb), 0.08);
}

.rec-inbox-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.rec-category-badge {
    font-size: 1.2rem;
    background: rgba(var(--main-color-rgb), 0.12);
    color: var(--accent-color);
    padding: 0.3rem 0.8rem;
    border-radius: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.rec-status-badge {
    font-size: 1.1rem;
    padding: 0.2rem 0.7rem;
    border-radius: 2rem;
    font-weight: 600;
}

.rec-status--watched { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.rec-status--added { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.rec-status--seen { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }

.rec-inbox-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.4rem;
}

.rec-inbox-pitch {
    font-size: 1.3rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 0.8rem;
}

.rec-inbox-footer {
    display: flex;
    justify-content: flex-end;
}

.rec-upvote-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    background: rgba(var(--main-color-rgb), 0.08);
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.rec-upvote-btn:hover:not(.upvoted) {
    background: rgba(var(--main-color-rgb), 0.18);
    color: var(--main-color);
    border-color: rgba(var(--main-color-rgb), 0.3);
}

.rec-upvote-btn.upvoted {
    background: rgba(var(--main-color-rgb), 0.2);
    color: var(--main-color);
    cursor: not-allowed;
}

.rec-upvote-btn.upvoting {
    animation: upvotePulse 0.3s ease forwards;
}

@keyframes upvotePulse {
    50% { transform: scale(1.2); }
}

.rec-inbox-more {
    display: block;
    margin: 2rem auto 0;
}

.rec-inbox-more.hidden { display: none; }

/* ============================================================
   TIME CAPSULE
   ============================================================ */

.capsule-section {
    background: var(--bg-color);
    padding: 8rem 9% 4rem;
}

.capsule-box {
    max-width: 580px;
    margin: 0 auto;
    text-align: center;
}

.capsule-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

.capsule-stat { text-align: center; }

.capsule-stat-number {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--main-color);
    display: block;
}

.capsule-stat-label {
    font-size: 1.3rem;
    color: var(--text-muted);
}

.capsule-form textarea {
    width: 100%;
    padding: 1.2rem 1.6rem;
    font-size: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    color: var(--text-color);
    background: var(--card-bg);
    font-family: inherit;
    resize: vertical;
    min-height: 8rem;
    transition: border-color 0.3s ease;
    line-height: 1.5;
}

.capsule-form textarea:focus {
    border-color: var(--main-color);
}

.capsule-horizons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.2rem;
    flex-wrap: wrap;
}

.capsule-horizon {
    cursor: pointer;
}

.capsule-horizon input {
    display: none;
}

.capsule-horizon span {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    font-size: 1.3rem;
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    color: var(--text-muted);
    background: var(--card-bg);
    transition: all 0.2s ease;
}

.capsule-horizon input:checked + span {
    border-color: var(--main-color);
    background: rgba(var(--main-color-rgb), 0.15);
    color: var(--main-color);
    font-weight: 600;
}

.capsule-horizon:hover span {
    border-color: rgba(var(--main-color-rgb), 0.4);
}

.capsule-horizon input:focus-visible + span {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

.capsule-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    gap: 1rem;
}

.capsule-char-count {
    font-size: 1.2rem;
    color: var(--text-muted);
}

.capsule-char-count.warning {
    color: var(--main-color);
    font-weight: 600;
}

.capsule-feedback { font-size: 1.3rem; flex: 1; text-align: center; }
.capsule-feedback--error { color: #f87171; }

.capsule-success {
    text-align: center;
    padding: 3rem 0;
}

.capsule-seal-icon {
    font-size: 3.5rem;
    color: var(--main-color);
    animation: sealPulse 0.6s ease;
    display: block;
    margin-bottom: 1rem;
}

.capsule-success p {
    font-size: 1.6rem;
    color: var(--text-color);
}

/* Revealed capsules carousel */
.capsule-revealed {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.capsule-revealed.hidden { display: none; }

.capsule-revealed-heading {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1.4rem;
}

.capsule-carousel {
    position: relative;
    min-height: 7rem;
}

.capsule-revealed-item {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.capsule-revealed-item.active {
    position: relative;
    opacity: 1;
}

.capsule-revealed-text {
    font-size: 1.5rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 0.6rem;
}

.capsule-revealed-meta {
    font-size: 1.1rem;
    color: var(--text-muted);
}

/* ============================================================
   RESPONSIVE — New Features
   ============================================================ */

@media (max-width: 768px) {
    .community-dashboard { padding: 6rem 5% 3rem; }
    .community-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .community-stat-value { font-size: 2rem; }

    .whisper-section { padding: 6rem 5% 3rem; }
    .whisper-form-footer { flex-wrap: wrap; }

    .rec-inbox-section { padding: 6rem 5% 3rem; }
    .rec-inbox-fields { grid-template-columns: 1fr; }
    .rec-inbox-list { grid-template-columns: 1fr; }

    .capsule-section { padding: 6rem 5% 3rem; }
    .capsule-stats { gap: 2rem; }
    .capsule-horizons { gap: 0.6rem; }
    .capsule-form-footer { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .community-stats-grid { grid-template-columns: 1fr; }
    .community-stat-card { padding: 1.4rem; }

    .capsule-stats { flex-direction: column; gap: 1rem; }

    .reactions-bar { bottom: 6rem; left: 0; }

    .milestone-emoji { font-size: 6rem; }
    .milestone-content h3 { font-size: 2.2rem; }
    .milestone-content p { font-size: 1.3rem; }

    .visitor-sparkline { margin: 1.5rem 1rem; padding: 1rem; }
    .sparkline-chart { height: 45px; }
}

/* ============================================================
   OPINION REASON TEXT
   ============================================================ */

.opinion-reason {
    font-size: 1.35rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.2rem;
    font-style: italic;
    padding-left: 0.8rem;
    border-left: 2px solid rgba(var(--main-color-rgb), 0.25);
}

/* ============================================================
   A DAY IN MY LIFE TIMELINE
   ============================================================ */

.day-in-life {
    padding: 6rem 9%;
}

.day-timeline {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding-top: 1rem;
}

.day-timeline::before {
    content: '';
    position: absolute;
    left: 110px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(var(--main-color-rgb), 0.3), transparent);
}

.day-entry {
    display: grid;
    grid-template-columns: 100px 36px 1fr;
    gap: 0 1.6rem;
    align-items: flex-start;
    margin-bottom: 2.8rem;
    position: relative;
}

.day-entry-time {
    text-align: right;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-muted);
    padding-top: 0.3rem;
    letter-spacing: 0.03em;
}

.day-entry-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid rgba(var(--main-color-rgb), 0.3);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.day-entry:hover .day-entry-dot {
    border-color: var(--main-color);
    box-shadow: 0 0 12px rgba(var(--main-color-rgb), 0.25);
}

.day-entry-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.day-entry-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.4rem 1.6rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.day-entry:hover .day-entry-content {
    border-color: rgba(var(--main-color-rgb), 0.3);
    box-shadow: 0 4px 16px rgba(var(--main-color-rgb), 0.08);
}

.day-entry-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.4rem;
}

.day-entry-note {
    font-size: 1.35rem;
    color: var(--text-muted);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .day-timeline::before { left: 80px; }
    .day-entry { grid-template-columns: 70px 32px 1fr; gap: 0 1rem; }
    .day-entry-time { font-size: 1.05rem; }
}

@media (max-width: 480px) {
    .day-timeline::before { display: none; }
    .day-entry { grid-template-columns: 32px 1fr; gap: 0 1rem; }
    .day-entry-time { display: none; }
}

/* ============================================================
   WHAT I BELIEVE (VALUES)
   ============================================================ */

.values-section {
    padding: 6rem 9%;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

/* Glassmorphism values card */
.values-card {
    background: rgba(var(--bg-color-rgb), 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--main-color-rgb), 0.15);
    border-radius: 1.4rem;
    padding: 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.values-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--main-color-rgb), 0.05) 0%, transparent 60%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.values-card:hover {
    border-color: rgba(var(--main-color-rgb), 0.35);
    box-shadow: 0 8px 32px rgba(var(--main-color-rgb), 0.12),
                0 0 0 1px rgba(var(--main-color-rgb), 0.08);
    transform: translateY(-3px);
}

.values-card:hover::before {
    opacity: 1.5;
}

.values-icon {
    font-size: 2.6rem;
    line-height: 1;
}

.values-belief {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.4;
}

.values-reason {
    font-size: 1.35rem;
    color: var(--text-muted);
    line-height: 1.65;
}

@media (max-width: 768px) {
    .values-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .values-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FRIENDSHIP TIERS
   ============================================================ */

.tier-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 1.1rem;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    cursor: default;
    transition: all 0.4s ease;
    opacity: 0.65;
}

.tier-indicator i {
    font-size: 1.3rem;
    transition: color 0.4s ease;
}

.tier-indicator[data-tier="acquaintance"] { color: var(--accent-color); opacity: 0.75; }
.tier-indicator[data-tier="friend"]       { color: var(--accent-color); opacity: 0.85; border-color: rgba(var(--main-color-rgb), 0.25); }
.tier-indicator[data-tier="close-friend"] { color: var(--main-color);   opacity: 1;    border-color: rgba(var(--main-color-rgb), 0.4); background: rgba(var(--main-color-rgb), 0.08); }
.tier-indicator[data-tier="inner-circle"] { color: #f59e0b; opacity: 1; border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); animation: tierGlow 3s ease-in-out infinite; }

/* Override .tier-label collision from Tier List section — friendship badge uses same class */
.tier-indicator .tier-label {
    font-size: 1rem;
    font-weight: 500;
    width: auto;
    min-width: auto;
}

@keyframes tierGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(245,158,11,0.2); }
    50%       { box-shadow: 0 0 16px rgba(245,158,11,0.5); }
}

/* ============================================================
   SECRETS SECTION
   ============================================================ */

.secrets-section { }

.secrets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2rem;
    margin: 0 auto 3rem;
    max-width: 960px;
    justify-content: center;
}

.secrets-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid rgba(var(--main-color-rgb), 0.12);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.25s ease;
    min-height: 160px;
}

.secrets-card:hover { transform: translateY(-2px); }

.secrets-card--hidden { display: none; }

.secrets-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(13,10,26,0.5);
    z-index: 2;
    border-radius: 14px;
}

.secrets-lock-icon {
    font-size: 2.8rem;
    color: var(--main-color);
    opacity: 0.6;
}

.secrets-card-body {
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    filter: blur(6px);
}

.secrets-card--unlocked .secrets-card-body {
    filter: none;
    animation: secretReveal 0.5s ease;
}

@keyframes secretReveal {
    from { opacity: 0; filter: blur(8px); transform: scale(0.98); }
    to   { opacity: 1; filter: none;      transform: scale(1); }
}

.secrets-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.secrets-cat-icon {
    font-size: 1.8rem;
    color: var(--main-color);
}

.secrets-category {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--accent-color);
    font-family: var(--heading-font);
}

.secrets-night-badge {
    font-size: 1.05rem;
    padding: 0.15rem 0.55rem;
    background: rgba(var(--main-color-rgb), 0.15);
    border-radius: 10px;
    color: var(--main-color);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
}

.secrets-teaser {
    font-size: 1.3rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
}

.secrets-content {
    font-size: 1.4rem;
    color: var(--text-color);
    line-height: 1.6;
}

.secrets-unlock {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    text-align: center;
}

.secrets-status {
    font-size: 1.2rem;
    color: var(--text-color);
    font-style: italic;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(var(--main-color-rgb), 0.2);
    border-radius: 10px;
    padding: 0.7rem 1.6rem;
    line-height: 1.5;
    width: 100%;
}

.secrets-code-row {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.secrets-code-row input {
    flex: 1;
    min-width: 180px;
    padding: 0.7rem 1.2rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(var(--main-color-rgb), 0.25);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 1.35rem;
    font-family: var(--body-font);
}

.secrets-code-row input:focus {
    outline: none;
    border-color: var(--main-color);
}

.secrets-request-btn {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .secrets-section { padding: 6rem 5% 3rem; }
    .secrets-grid { grid-template-columns: 1fr 1fr; }
    .secrets-unlock { max-width: 100%; }
    .secrets-status { font-size: 1.1rem; }
}
@media (max-width: 480px) {
    .secrets-grid { grid-template-columns: 1fr; }
    .secrets-status { font-size: 1rem; padding: 0.6rem 1rem; }
}

/* ============================================================
   NIGHT OWL MODE
   ============================================================ */

.nightowl-greeting {
    font-size: 1.4rem;
    color: var(--text-muted);
    font-style: italic;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.6s ease, height 0.4s ease, margin 0.4s ease;
    margin: 0;
}

.nightowl-greeting--visible {
    opacity: 0.75;
    height: auto;
    margin-bottom: 0.8rem;
}

/* Floating 3am thoughts panel */
.nightowl-thoughts {
    position: fixed;
    bottom: 5rem;
    left: 5rem;
    max-width: 280px;
    background: rgba(13, 10, 26, 0.92);
    border: 1px solid rgba(var(--main-color-rgb), 0.25);
    border-radius: 14px;
    padding: 1.2rem 1.5rem;
    backdrop-filter: blur(12px);
    z-index: 90;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.nightowl-thoughts--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nightowl-thoughts-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    color: var(--main-color);
    margin-bottom: 0.7rem;
    font-weight: 600;
}

.nightowl-thoughts p {
    font-size: 1.3rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

/* Close button (hidden on desktop, shown on mobile) */
.nightowl-thoughts-close {
    display: none;
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.2rem;
    opacity: 0.6;
}
.nightowl-thoughts-close:hover { opacity: 1; }

/* Mobile: move to top-center to avoid overlapping footer/reactions */
@media (max-width: 768px) {
    .nightowl-thoughts {
        bottom: auto;
        top: 5rem;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        max-width: calc(100vw - 2rem);
        width: 260px;
        z-index: 50;
        font-size: 0.85rem;
    }
    .nightowl-thoughts--visible {
        transform: translateX(-50%) translateY(0);
    }
    .nightowl-thoughts-close {
        display: block;
    }
    .nightowl-thoughts p {
        font-size: 1.1rem;
    }
}

/* Time-period CSS variable tweaks */
[data-time-period="nightowl"] {
    --ambient-glow: rgba(var(--main-color-rgb), 0.06);
}

[data-time-period="earlybird"] {
    --ambient-glow: rgba(251, 191, 36, 0.04);
}

/* ============================================================
   BUCKET LIST / DREAM BOARD
   ============================================================ */

.bucketlist-section {
    padding: var(--section-padding);
}

.bucketlist-filters {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 2.5rem;
    align-items: center;
}

.bucketlist-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.bucketlist-filter-btn,
.bucketlist-status-btn {
    padding: 0.45rem 1.1rem;
    border-radius: 20px;
    border: 1px solid rgba(var(--main-color-rgb), 0.2);
    background: transparent;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: var(--body-font);
}

.bucketlist-filter-btn:hover,
.bucketlist-status-btn:hover,
.bucketlist-filter-btn.active,
.bucketlist-status-btn.active {
    background: rgba(var(--main-color-rgb), 0.15);
    color: var(--main-color);
    border-color: var(--main-color);
}

.bucketlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.bucketlist-card {
    background: var(--card-bg);
    border: 1px solid rgba(var(--main-color-rgb), 0.1);
    border-radius: 14px;
    padding: 2rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation-delay: calc(var(--stagger, 0) * 0.08s);
}

.bucketlist-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

.bucketlist-card--done {
    border-color: rgba(34, 197, 94, 0.25);
}

.bucketlist-card--planning {
    border-color: rgba(251, 191, 36, 0.2);
}

.bucketlist-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bucketlist-icon {
    font-size: 2rem;
    color: var(--main-color);
}

.bucketlist-card--done .bucketlist-icon { color: #22c55e; }
.bucketlist-card--planning .bucketlist-icon { color: #fbbf24; }

.bucketlist-status-badge {
    font-size: 1.1rem;
    padding: 0.2rem 0.7rem;
    border-radius: 12px;
    font-weight: 500;
}

.bucketlist-badge--dreaming  { background: rgba(var(--main-color-rgb), 0.15); color: var(--accent-color); }
.bucketlist-badge--planning  { background: rgba(251,191,36,0.15); color: #fbbf24; }
.bucketlist-badge--done      { background: rgba(34,197,94,0.15);  color: #22c55e; }

.bucketlist-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
    font-family: var(--heading-font);
    margin: 0;
}

.bucketlist-desc {
    font-size: 1.35rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.bucketlist-story-btn {
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    font-family: var(--body-font);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: auto;
    transition: opacity 0.2s;
}

.bucketlist-story-btn:hover { opacity: 0.75; }

.bucketlist-story {
    background: rgba(var(--main-color-rgb), 0.06);
    border-left: 2px solid rgba(var(--main-color-rgb), 0.3);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.2rem;
    font-size: 1.3rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.bucketlist-empty {
    color: var(--text-muted);
    font-size: 1.4rem;
    text-align: center;
    padding: 3rem;
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .bucketlist-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   GLASSMORPHISM — Know Me cards upgrade
   ============================================================ */

.know-me-card {
    background: rgba(var(--bg-color-rgb), 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(var(--main-color-rgb), 0.12);
}

/* ── Season badge ────────────────────────────────────────── */
.season-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted, rgba(236,233,245,0.5));
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(124,58,237,0.08);
    border: 1px solid rgba(124,58,237,0.15);
    margin-top: 0.5rem;
}
.season-badge i { font-size: 1rem; }

/* ── Achievement progress bar ────────────────────────────── */
.badge-progress-wrap { margin-bottom: 1.2rem; text-align: center; }
.badge-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(124,58,237,0.15);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.badge-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
    border-radius: 999px;
    transition: width 0.6s ease;
}
.badge-progress-text {
    font-size: 0.85rem;
    color: var(--text-muted, rgba(236,233,245,0.5));
}
.badge-share-btn {
    margin-top: 1rem;
    width: 100%;
    font-size: 0.85rem;
}
.badge-item--locked .badge-desc { font-style: italic; opacity: 0.6; }

/* ── What's New banner ───────────────────────────────────── */
.whats-new-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background: linear-gradient(90deg, rgba(124,58,237,0.95), rgba(99,47,189,0.95));
    color: #fff;
    padding: 0.6rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    backdrop-filter: blur(8px);
    animation: slideDown 0.4s ease;
    box-shadow: 0 2px 12px rgba(124,58,237,0.3);
}
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.whats-new-content { display: flex; align-items: center; gap: 0.5rem; }
.whats-new-content i { font-size: 1.1rem; }
.whats-new-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 0.3rem;
    opacity: 0.8;
}
.whats-new-close:hover { opacity: 1; }

/* ============================================================
   MOBILE BOTTOM NAVIGATION BAR
   ============================================================ */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--snd-bg-color);
    border-top: 1px solid var(--border-color);
    z-index: 998;
    padding: 0.6rem 0 max(0.6rem, env(safe-area-inset-bottom));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.mobile-bottom-nav.visible { transform: translateY(0); }
.mobile-bottom-nav { justify-content: space-around; align-items: center; }
.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 10px;
    transition: color 0.2s, background 0.2s;
    flex: 1;
}
.mobile-nav-item i { font-size: 2rem; }
.mobile-nav-item.active,
.mobile-nav-item:hover { color: var(--main-color); }
.mobile-nav-item.active { background: rgba(var(--main-color-rgb), 0.08); }
@media (max-width: 768px) {
    .mobile-bottom-nav { display: flex; }
    /* Ensure reactions bar doesn't overlap the mobile nav */
    .reactions-bar { bottom: 6rem; }
    /* Dissolve wrapper — restore individual fixed positioning for mobile */
    .fab-stack { display: contents; }
    .back-to-top { bottom: 7rem; }
    .nickname-fab { position: fixed; right: 1.5rem; bottom: 12.5rem; }
    .badge-fab { position: fixed; right: 1.5rem; bottom: 18rem; }
    .surprise-fab { position: fixed; right: 1.5rem; bottom: 24rem; }
    .nickname-popover { position: fixed; right: 1.5rem; bottom: 17.7rem; }
    .visitor-profile-fab, .mood-navigator { display: none; }
}