/* Sloptown.com - Main Styles */
/* Extracted from index.html for better organization */

/* Google Fonts - Fredoka for consistent cross-platform rendering */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

/* ===== GAME BASE RESET =====
   Universal reset shared by ALL pages (homepage + games).
   Games no longer need to repeat this in their inline <style> blocks.
   Games still set their own: body background, overflow:hidden, font-family. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
body {
    margin: 0;
    overflow: auto;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    font-family: 'Fredoka', 'Comic Sans MS', 'Chalkboard SE', Arial, sans-serif;
    touch-action: manipulation;
    /* Safe area for notched devices */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body.world-active {
    overflow: hidden;
}
canvas { display: block; touch-action: none; position: relative; z-index: 1; }
/* Re-enable text selection for inputs and text areas */
input, textarea, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}
#homepage {
    min-height: 100vh;
    width: 100%;
    background:
        radial-gradient(ellipse at 15% 10%, rgba(78,205,196,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 90%, rgba(255,215,0,0.08) 0%, transparent 50%),
        linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: 20px;
    position: relative;
}
/* Welcome content container */
.welcome-content {
    position: relative;
    z-index: 10;
    width: 100%;
    margin: 0 auto;
    padding: 30px 24px 20px;
    box-sizing: border-box;
}

/* Town Entrance Sign */
.town-sign {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 15px;
    animation: signSway 4s ease-in-out infinite;
}
@keyframes signSway {
    0%, 100% { transform: rotate(-1deg); }
    50% { transform: rotate(1deg); }
}
.sign-post {
    width: 18px;
    height: 120px;
    background: linear-gradient(90deg, #5D4037 0%, #8D6E63 30%, #5D4037 70%, #3E2723 100%);
    border-radius: 4px;
    position: relative;
    box-shadow: 2px 4px 8px rgba(0,0,0,0.4);
}
.sign-post::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 15px;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(200,220,255,0.8) 40%,
        rgba(150,180,220,0.6) 100%);
    border-radius: 4px 4px 0 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.sign-board {
    position: relative;
    background: linear-gradient(180deg, #1a472a 0%, #2d5a3d 50%, #1a472a 100%);
    border: 6px solid #8B4513;
    border-radius: 8px;
    padding: 20px 35px 15px;
    box-shadow:
        inset 0 2px 8px rgba(0,0,0,0.3),
        4px 6px 15px rgba(0,0,0,0.4),
        0 0 20px rgba(255,215,0,0.2);
    text-align: center;
    min-width: 280px;
}
.sign-board::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 2px solid rgba(255,215,0,0.3);
    border-radius: 4px;
    pointer-events: none;
}
.sign-snow {
    position: absolute;
    top: -12px;
    left: -10px;
    right: -10px;
    height: 25px;
    background: linear-gradient(180deg,
        rgba(255,255,255,1) 0%,
        rgba(240,248,255,0.95) 40%,
        rgba(200,220,255,0.8) 70%,
        rgba(150,180,220,0.3) 100%);
    border-radius: 50% 50% 30% 30% / 80% 80% 40% 40%;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.2));
}
.sign-snow::before,
.sign-snow::after {
    content: '';
    position: absolute;
    background: linear-gradient(180deg,
        rgba(255,255,255,1) 0%,
        rgba(220,240,255,0.9) 100%);
    border-radius: 50%;
}
.sign-snow::before {
    width: 40px;
    height: 18px;
    top: 5px;
    left: 20px;
}
.sign-snow::after {
    width: 50px;
    height: 20px;
    top: 3px;
    right: 30px;
}
.sign-icicles {
    position: absolute;
    bottom: -20px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-around;
    pointer-events: none;
}
.icicle {
    width: 8px;
    height: 25px;
    background: linear-gradient(180deg,
        rgba(200,230,255,0.9) 0%,
        rgba(150,200,255,0.7) 50%,
        rgba(100,180,255,0.4) 100%);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    animation: icicleGrow 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}
.icicle:nth-child(1) { height: 20px; animation-delay: 0s; }
.icicle:nth-child(2) { height: 30px; animation-delay: 0.5s; }
.icicle:nth-child(3) { height: 22px; animation-delay: 1s; }
.icicle:nth-child(4) { height: 28px; animation-delay: 1.5s; }
.icicle:nth-child(5) { height: 18px; animation-delay: 2s; }
@keyframes icicleGrow {
    0%, 100% { transform: scaleY(1); opacity: 0.9; }
    50% { transform: scaleY(1.1); opacity: 1; }
}
.sign-welcome {
    display: block;
    font-family: 'Georgia', serif;
    font-size: 14px;
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.sign-town {
    display: block;
    font-family: 'Comic Sans MS', 'Verdana', sans-serif;
    font-size: 42px;
    color: #FFD700;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow:
        2px 2px 0 #FF6B6B,
        4px 4px 0 #4ECDC4,
        0 0 20px rgba(255,215,0,0.6);
    animation: signGlow 2s ease-in-out infinite alternate;
}
@keyframes signGlow {
    0% { text-shadow: 2px 2px 0 #FF6B6B, 4px 4px 0 #4ECDC4, 0 0 20px rgba(255,215,0,0.6); }
    100% { text-shadow: 2px 2px 0 #FF6B6B, 4px 4px 0 #4ECDC4, 0 0 35px rgba(255,215,0,0.9); }
}
.sign-subtitle {
    font-family: 'Comic Sans MS', 'Verdana', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    margin-top: 8px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-style: italic;
}
/* Responsive adjustments for town sign */
@media (max-width: 600px) {
    .sign-board {
        min-width: 220px;
        padding: 15px 25px 12px;
    }
    .sign-town { font-size: 32px; letter-spacing: 2px; }
    .sign-welcome { font-size: 12px; letter-spacing: 4px; }
    .sign-subtitle { font-size: 13px; }
    .sign-post { height: 100px; width: 14px; }
    .sign-snow { top: -10px; height: 20px; }
    .icicle { width: 6px; }
    .icicle:nth-child(1) { height: 15px; }
    .icicle:nth-child(2) { height: 22px; }
    .icicle:nth-child(3) { height: 17px; }
    .icicle:nth-child(4) { height: 20px; }
    .icicle:nth-child(5) { height: 14px; }
}
@media (max-width: 400px) {
    .sign-board {
        min-width: 180px;
        padding: 12px 18px 10px;
        border-width: 4px;
    }
    .sign-town { font-size: 24px; letter-spacing: 1px; }
    .sign-welcome { font-size: 10px; letter-spacing: 3px; }
    .sign-subtitle { font-size: 11px; }
    .sign-post { height: 80px; width: 12px; }
}
@media (max-height: 600px) {
    .town-sign { margin-bottom: 8px; }
    .sign-board { padding: 12px 20px 10px; min-width: 200px; }
    .sign-town { font-size: 28px; }
    .sign-welcome { font-size: 11px; }
    .sign-subtitle { font-size: 12px; }
    .sign-post { height: 80px; }
    .sign-snow { height: 18px; top: -8px; }
    .sign-icicles { bottom: -15px; }
    .icicle { height: 15px !important; }
}

/* Hidden h1 for accessibility - visual title is in the sign */
#homepage h1.hidden-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
#homepage h1 {
    font-family: 'Comic Sans MS', 'Verdana', sans-serif;
    font-size: 64px;
    color: #FFD700;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: bold;
    text-shadow: 4px 4px 0 #FF6B6B, 8px 8px 0 #4ECDC4, 0 0 30px rgba(255,215,0,0.5);
    animation: titleBounce 2s ease-in-out infinite;
}
@media (max-width: 600px) {
    #homepage h1 { font-size: 42px; letter-spacing: 2px; }
    .welcome-content { padding: 15px 10px; }
    .tagline { font-size: 18px; margin-bottom: 12px; }
    .stats-row { gap: 8px; }
    .stat-badge { padding: 6px 10px; font-size: 12px; }
    .stat-badge .emoji { font-size: 16px; }
    .daily-challenge { padding: 10px 15px; margin-bottom: 12px; }
    .daily-challenge h3 { font-size: 11px; }
    .daily-challenge .challenge-text { font-size: 14px; }
    .character-selector h3 { font-size: 13px; }
    .characters { gap: 8px; }
    .character { width: 50px; height: 50px; font-size: 26px; }
    .achievements-preview { padding: 10px; margin-top: 12px; }
    .badges { gap: 6px; }
    .badge { width: 35px; height: 35px; font-size: 16px; }
    #homepage .controls { font-size: 11px; padding: 10px 12px; }
    #homepage .attribution { font-size: 11px; margin-top: 10px; }
}
@media (max-width: 400px) {
    #homepage h1 { font-size: 32px; letter-spacing: 1px; text-shadow: 2px 2px 0 #FF6B6B, 4px 4px 0 #4ECDC4; }
    .tagline { font-size: 15px; }
    .stat-badge { padding: 5px 8px; font-size: 11px; }
    .character { width: 44px; height: 44px; font-size: 22px; border-width: 3px; }
    .badge { width: 32px; height: 32px; font-size: 14px; }
}
@media (max-height: 600px) {
    .welcome-content { padding: 10px; }
    #homepage h1 { font-size: 36px; margin-bottom: 5px; }
    .tagline { margin-bottom: 8px; }
    .stats-row { margin-bottom: 8px; }
    .daily-challenge { margin-bottom: 8px; padding: 8px 12px; }
    .character-selector { margin-bottom: 10px; }
    .character-selector h3 { margin-bottom: 5px; }
    .achievements-preview { margin-top: 8px; padding: 8px; }
    #homepage .controls { margin: 8px auto; padding: 8px 12px; }
}
@keyframes titleBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.tagline {
    font-size: 22px;
    color: white;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    font-weight: bold;
}
/* Streak and stats bar */
.stats-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.stat-badge {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 20px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 2px solid rgba(255,255,255,0.3);
}
.stat-badge .emoji { font-size: 20px; }
.streak-fire { animation: fireGlow 0.5s ease-in-out infinite alternate; }
@keyframes fireGlow { 0% { transform: scale(1); } 100% { transform: scale(1.2); } }
/* Daily Challenge card */
.daily-challenge {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    padding: 12px 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(255,165,0,0.4);
    border: 3px solid #FFE55C;
    animation: challengePulse 3s ease-in-out infinite;
}
@keyframes challengePulse {
    0%, 100% { box-shadow: 0 8px 25px rgba(255,165,0,0.4); }
    50% { box-shadow: 0 8px 40px rgba(255,165,0,0.7); }
}
.daily-challenge h3 {
    margin: 0 0 5px;
    color: #8B4513;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.daily-challenge .challenge-text {
    font-size: 16px;
    color: #5D3A1A;
    font-weight: bold;
    margin: 0;
}
.daily-challenge .reward {
    font-size: 12px;
    color: #8B4513;
    margin-top: 5px;
}
/* Character selector */
.character-selector {
    margin-bottom: 15px;
}
.character-selector h3 {
    color: white;
    font-size: 14px;
    margin-bottom: 8px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.characters {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.character {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 4px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}
.character:hover {
    background: rgba(255,255,255,0.3);
    animation: characterWiggle 0.3s ease-in-out infinite;
}
@keyframes characterWiggle {
    0%, 100% { transform: scale(1.1) rotate(-5deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}
.character.selected {
    border-color: #FFD700;
    background: rgba(255,215,0,0.3);
    box-shadow: 0 0 20px rgba(255,215,0,0.5);
    animation: selectedBounce 0.5s ease-out;
}
@keyframes selectedBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
/* Start/Explore button styles in .home-explore-btn below */
/* Achievements row */
.achievements-preview {
    margin-top: 15px;
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 15px;
}
.achievements-preview h3 {
    color: #FFD700;
    font-size: 12px;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 2px solid rgba(255,255,255,0.2);
    transition: all 0.3s;
    position: relative;
}
.badge.unlocked {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border-color: #FFE55C;
    box-shadow: 0 0 15px rgba(255,215,0,0.5);
}
.badge.locked { opacity: 0.4; filter: grayscale(1); }
.badge:hover { transform: scale(1.15); }
.badge-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    margin-bottom: 5px;
}
.badge:hover .badge-tooltip { opacity: 1; }
/* Controls - collapsed style */
#homepage .controls {
    color: white;
    margin: 12px auto;
    font-size: 13px;
    max-width: 500px;
    background: rgba(0,0,0,0.2);
    padding: 12px 18px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}
#homepage .controls p {
    margin: 4px 0;
    line-height: 1.3;
}
#homepage .attribution {
    color: rgba(255,255,255,0.7);
    margin-top: 15px;
    font-size: 12px;
    line-height: 1.4;
}
#homepage .attribution a {
    color: #FFD700;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}
#homepage .attribution a:hover {
    color: #FFF;
    text-decoration: underline;
}
/* New player welcome banner */
.welcome-banner {
    background: linear-gradient(90deg, #4ECDC4, #45B7D1);
    color: white;
    padding: 12px 24px;
    border-radius: 20px;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 18px;
    animation: bannerShine 2s ease-in-out infinite;
    display: none;
}
@keyframes bannerShine {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}
/* New player mode: hide discouraging zeros, show welcome banner */
.welcome-content.new-player .welcome-banner { display: block; }
.welcome-content.new-player .stats-row { display: none; }
.welcome-content.new-player .achievements-preview { display: none; }
.welcome-content.new-player .games-directory { display: none; }
.welcome-content.new-player .character-selector { margin-bottom: 20px; }
.welcome-content.new-player .character-selector h3 { font-size: 18px; margin-bottom: 12px; }
/* Character name labels (visible on all devices, not just hover) */
.character-name {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,0.8);
    margin-top: 4px;
    text-align: center;
    font-weight: bold;
}
.character-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (max-width: 600px) {
    .character-name { font-size: 10px; }
    .welcome-banner { font-size: 15px; padding: 10px 18px; }
}
/* Games Directory */
.games-directory {
    margin-top: 20px;
    padding: 15px;
    background: rgba(0,0,0,0.25);
    border-radius: 20px;
    max-width: 100%;
}
.games-directory h3 {
    color: #FFD700;
    font-size: 18px;
    margin: 0 0 12px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.games-directory-toggle {
    background: linear-gradient(135deg, #4ECDC4, #45B7D1);
    border: none;
    color: white;
    padding: 10px 25px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(78,205,196,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}
.games-directory-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(78,205,196,0.6);
}
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 5px;
}
.game-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 15px;
    padding: 12px 8px;
    text-decoration: none;
    color: white;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.game-card:hover {
    transform: translateY(-5px) scale(1.05);
    background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(255,165,0,0.2));
    border-color: #FFD700;
    box-shadow: 0 8px 25px rgba(255,215,0,0.3);
}
.game-card .game-emoji {
    font-size: 28px;
    animation: cardBounce 2s ease-in-out infinite;
}
.game-card:nth-child(2n) .game-emoji { animation-delay: 0.2s; }
.game-card:nth-child(3n) .game-emoji { animation-delay: 0.4s; }
.game-card:nth-child(4n) .game-emoji { animation-delay: 0.6s; }
@keyframes cardBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.game-card .game-name {
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.game-card .multiplayer-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.5);
}
.game-card {
    position: relative;
}
@media (max-width: 600px) {
    .games-directory { padding: 10px; margin-top: 15px; }
    .games-directory h3 { font-size: 15px; }
    .games-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 250px; }
    .game-card { padding: 10px 6px; font-size: 11px; }
    .game-card .game-emoji { font-size: 24px; }
}
/* Homepage Tab Bar */
.homepage-tabs {
    display: flex;
    gap: 4px;
    padding: 0 4px 20px 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
    flex-wrap: wrap;
}
.homepage-tab {
    padding: 10px 20px;
    border: none;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
    border-radius: 14px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(8px);
}
.homepage-tab:hover {
    background: rgba(255,255,255,0.22);
    color: white;
    transform: translateY(-1px);
}
.homepage-tab.active {
    background: linear-gradient(135deg, #4ECDC4, #45B7D1);
    color: white;
    box-shadow: 0 4px 18px rgba(78,205,196,0.4);
}
.homepage-content {
    display: none;
    width: 100%;
    padding: 0;
}
.homepage-content.active {
    display: block;
}
@media (max-width: 600px) {
    .homepage-tabs { gap: 6px; padding: 0 4px 14px 4px; }
    .homepage-tab { padding: 8px 14px; font-size: 12px; }
}
/* Explore CTA button — extends sm-btn sm-btn-primary */
.home-explore-btn {
    width: 100%;
    padding: 20px 32px;
    font-size: 18px;
    border-radius: 16px;
    margin: 8px 0 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.home-explore-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}
@media (max-width: 600px) {
    .home-explore-btn { padding: 16px 24px; font-size: 16px; }
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
    padding: 15px;
    font-family: Arial;
    font-size: 16px;
    display: none;
    z-index: 1000;
}
#footer a {
    color: #00aaff;
    text-decoration: none;
    font-weight: bold;
}
#footer a:hover {
    text-decoration: underline;
}
#debug {
    position: absolute;
    top: 0;
    left: 0;
    color: #ff4444;
    pointer-events: none;
    font-family: Arial;
    font-size: 14px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0 0 5px 0;
    display: none;
}
/* Touch controls for iPad/mobile */
#touchControls {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    z-index: 1001;
    pointer-events: none;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.joystick-zone {
    position: absolute;
    bottom: calc(20px + env(safe-area-inset-bottom, 0));
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: 3px solid rgba(255, 255, 255, 0.5);
    pointer-events: auto;
    touch-action: none;
}
#leftJoystick {
    left: calc(30px + env(safe-area-inset-left, 0));
}
#lookZone {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: 999;
    touch-action: none;
}
#jumpButton {
    position: absolute;
    bottom: calc(30px + env(safe-area-inset-bottom, 0));
    right: calc(50px + env(safe-area-inset-right, 0));
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(100, 200, 255, 0.6);
    border: 3px solid rgba(150, 220, 255, 0.8);
    pointer-events: auto;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    font-weight: bold;
    z-index: 1002;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.joystick-knob {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
#downButton {
    position: absolute;
    bottom: calc(30px + env(safe-area-inset-bottom, 0));
    right: calc(150px + env(safe-area-inset-right, 0));
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 100, 100, 0.6);
    border: 3px solid rgba(255, 150, 150, 0.8);
    pointer-events: auto;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    font-weight: bold;
    z-index: 1002;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
#boostButton {
    position: absolute;
    bottom: calc(130px + env(safe-area-inset-bottom, 0));
    right: calc(100px + env(safe-area-inset-right, 0));
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 165, 0, 0.6);
    border: 3px solid rgba(255, 200, 0, 0.8);
    pointer-events: auto;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    font-weight: bold;
    z-index: 1002;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
@media (pointer: coarse) {
    #touchControls.active {
        display: block;
    }
}
@media (pointer: coarse) and (max-width: 480px) {
    .joystick-zone { width: 120px; height: 120px; }
    .joystick-knob { width: 50px; height: 50px; }
    #leftJoystick { left: calc(15px + env(safe-area-inset-left, 0)); }
    #jumpButton { width: 65px; height: 65px; font-size: 22px; right: calc(30px + env(safe-area-inset-right, 0)); }
    #downButton { width: 65px; height: 65px; font-size: 22px; right: calc(110px + env(safe-area-inset-right, 0)); }
    #boostButton { width: 55px; height: 55px; font-size: 18px; right: calc(70px + env(safe-area-inset-right, 0)); bottom: calc(110px + env(safe-area-inset-bottom, 0)); }
}
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
    .joystick-zone { width: 100px; height: 100px; bottom: calc(10px + env(safe-area-inset-bottom, 0)); }
    .joystick-knob { width: 40px; height: 40px; }
    #jumpButton { width: 60px; height: 60px; font-size: 20px; bottom: calc(10px + env(safe-area-inset-bottom, 0)); }
    #downButton { width: 60px; height: 60px; font-size: 20px; bottom: calc(10px + env(safe-area-inset-bottom, 0)); }
    #boostButton { width: 50px; height: 50px; font-size: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0)); }
}
/* Unified Game HUD - matches multiplayer badge style */
#gameHUD {
    position: fixed;
    top: calc(15px + env(safe-area-inset-top, 0));
    right: calc(15px + env(safe-area-inset-right, 0));
    display: none;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Fredoka', 'Comic Sans MS', 'Chalkboard SE', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
#gameHUD .hud-divider {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.3);
    margin: 0 4px;
}
.hud-left, .hud-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hud-coins, .hud-fps {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Yellow coin icon matching world coins */
.coin-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
    border-radius: 50%;
    border: 2px solid #B8860B;
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.6), inset 0 -2px 4px rgba(0,0,0,0.2);
    position: relative;
}
.coin-icon::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 4px;
    width: 4px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}
#chatButton, #gamesButton {
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s;
    font-size: 16px;
}
#chatButton:hover, #gamesButton:hover {
    transform: scale(1.2);
}
#musicToggle, #musicSkip {
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s;
    font-size: 16px;
}
#musicToggle:hover, #musicSkip:hover {
    transform: scale(1.2);
}
#musicToggle.muted {
    opacity: 0.5;
}
#musicVolume {
    width: 60px;
    height: 4px;
    cursor: pointer;
    accent-color: #fff;
}
@media (max-width: 500px) {
    #gameHUD { padding: 6px 12px; font-size: 12px; }
    #musicVolume { width: 40px; }
}
@keyframes coinBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
#gameHUD.coin-collected {
    animation: coinBounce 0.3s ease-out;
}
#optionsButton {
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s;
    font-size: 16px;
}
#optionsButton:hover {
    transform: scale(1.2) rotate(45deg);
}
/* Player username in HUD */
#playerUsername {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.9;
    font-size: 13px;
}
@media (max-width: 500px) {
    #playerUsername { max-width: 60px; font-size: 11px; }
}
/* HUD inside SlopNav bar (games) - keeps purple gradient, positioned inline */
.slop-nav #gameHUD {
    position: static;
    top: auto;
    right: auto;
    display: flex !important;
    box-shadow: none;
    margin: 0;
}
/* Old Avatar Selector Modal - REMOVED
   Now using unified SlopModal system (js/slop-modal.js + js/slop-settings-modal.js)
   All modals share consistent styling via SlopModal */
/* =====================================================================
   ACCESSIBILITY ENHANCEMENTS - Keyboard Navigation & Focus Indicators
   ===================================================================== */
/* Enhanced focus indicators for all interactive elements */
button:focus-visible,
a:focus-visible,
.character:focus-visible,
.badge:focus-visible,
.game-card:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.joystick-zone:focus-visible,
#jumpButton:focus-visible,
#downButton:focus-visible,
#boostButton:focus-visible,
#chatButton:focus-visible,
#gamesButton:focus-visible,
#musicToggle:focus-visible,
#musicSkip:focus-visible,
#optionsButton:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.3);
}

/* Specific focus styles for primary call-to-action buttons */
#homepage .home-explore-btn:focus-visible {
    outline: 4px solid #FFD700;
    outline-offset: 4px;
    box-shadow: 0 0 0 7px rgba(255, 215, 0, 0.4), 0 6px 20px rgba(78,205,196,0.4);
}

/* Focus styles for character selection - make it extra fun */
.character:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.3), 0 0 20px rgba(255,215,0,0.5);
    transform: scale(1.1);
}

/* Focus styles for game cards - maintain hover effect feel */
.game-card:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: 2px;
    transform: translateY(-5px) scale(1.05);
    background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(255,165,0,0.2));
    border-color: #FFD700;
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.3), 0 8px 25px rgba(255,215,0,0.4);
}

/* Focus styles for badges - glow effect */
.badge:focus-visible {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.3), 0 0 15px rgba(255,215,0,0.6);
}

/* Focus styles for games directory toggle */
.games-directory-toggle:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.3), 0 6px 20px rgba(78,205,196,0.6);
    transform: scale(1.05);
}

/* Focus styles for touch controls on mobile */
@media (pointer: coarse) {
    .joystick-zone:focus-visible,
    #jumpButton:focus-visible,
    #downButton:focus-visible,
    #boostButton:focus-visible {
        outline: 3px solid #FFD700;
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.4);
    }
}

/* Focus styles for airplane exit button */
.airplane-exit-btn:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.4), 0 4px 15px rgba(255, 0, 0, 0.4);
}

/* Ensure links in attribution have good focus indicators */
#homepage .attribution a:focus-visible,
#footer a:focus-visible {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
    border-radius: 3px;
    background: rgba(255, 215, 0, 0.2);
}

/* Focus styles for HUD interactive elements */
#musicVolume:focus-visible {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* Ensure all interactive elements have proper cursor and focus behavior */
.character,
.badge,
.game-card,
.games-directory-toggle,
.home-explore-btn,
#chatButton,
#gamesButton,
#musicToggle,
#musicSkip,
#optionsButton {
    /* Ensure these are keyboard-focusable if they're interactive */
    position: relative;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Keep essential transitions for focus indicators */
    button:focus-visible,
    a:focus-visible,
    .character:focus-visible,
    .badge:focus-visible,
    .game-card:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        transition: outline 0.15s ease, box-shadow 0.15s ease;
    }
}

/* Skip to content link for screen readers and keyboard users */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: #FFD700;
    color: #1a1a2e;
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    z-index: 10000;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid #FF6B6B;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    button,
    a,
    .character,
    .badge,
    .game-card {
        border-width: 2px;
    }

    button:focus-visible,
    a:focus-visible,
    .character:focus-visible,
    .badge:focus-visible,
    .game-card:focus-visible {
        outline-width: 4px;
        outline-offset: 4px;
    }
}

/* ===================================================================== */
/* Robot Control Mode HUD */
#robotControlUI {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 999;
}
#robotControlUI .robot-hud {
    position: absolute;
    top: calc(80px + env(safe-area-inset-top, 0));
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(20, 20, 40, 0.9));
    border: 3px solid;
    border-radius: 15px;
    padding: 15px 30px;
    color: #00FF00;
    font-family: 'Courier New', monospace;
    text-align: center;
    animation: hudFlicker 0.1s infinite alternate;
}
#robotControlUI.james .robot-hud { border-color: #00FF00; color: #00FF00; }
#robotControlUI.nina .robot-hud { border-color: #FF69B4; color: #FF69B4; }
@keyframes hudFlicker {
    0% { opacity: 0.95; }
    100% { opacity: 1; }
}
#robotControlUI .robot-name {
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 0 0 10px currentColor;
}
#robotControlUI .robot-status {
    display: flex;
    gap: 20px;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 10px;
}
#robotControlUI .robot-controls {
    font-size: 12px;
    opacity: 0.8;
    border-top: 1px solid currentColor;
    padding-top: 10px;
}
#robotControlUI::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
}
/* Airplane Control Mode HUD */
#airplaneControlUI {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 999;
}
#airplaneControlUI .airplane-hud {
    position: absolute;
    top: calc(80px + env(safe-area-inset-top, 0));
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(0, 20, 40, 0.9), rgba(0, 40, 80, 0.95));
    border: 3px solid #00BFFF;
    border-radius: 15px;
    padding: 15px 30px;
    color: #00BFFF;
    font-family: 'Courier New', monospace;
    text-align: center;
    animation: hudFlicker 0.1s infinite alternate;
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.3);
}
#airplaneControlUI .airplane-name {
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 0 10px #00BFFF;
}
#airplaneControlUI .airplane-controls {
    font-size: 12px;
    opacity: 0.8;
    border-top: 1px solid currentColor;
    padding-top: 10px;
    margin-top: 10px;
}
#airplaneControlUI::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.05) 0px,
        rgba(0, 0, 0, 0.05) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
}
.airplane-exit-btn {
    position: absolute;
    bottom: calc(30px + env(safe-area-inset-bottom, 0));
    right: 20px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF4444, #CC0000);
    border: 3px solid #FF6666;
    color: white;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
    z-index: 1000;
}
.airplane-exit-btn:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, #CC0000, #990000);
}
/* Hide airplane exit button on desktop (use E key) */
@media (min-width: 769px) and (pointer: fine) {
    .airplane-exit-btn {
        display: none;
    }
}
/* Taxi prompt */
#taxiPrompt {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #FFD700;
    padding: 10px 24px;
    border-radius: 20px;
    border: 2px solid #FFD700;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    z-index: 100;
    pointer-events: none;
}
/* Taxi control HUD */
#taxiControlUI .taxi-hud {
    position: absolute;
    top: calc(80px + env(safe-area-inset-top, 0));
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(40, 30, 0, 0.9), rgba(80, 60, 0, 0.95));
    border: 3px solid #FFD700;
    border-radius: 15px;
    padding: 15px 30px;
    color: #FFD700;
    font-family: 'Courier New', monospace;
    text-align: center;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    z-index: 100;
}
#taxiControlUI .taxi-name {
    font-size: 20px;
    font-weight: bold;
    text-shadow: 0 0 10px #FFD700;
}
#taxiControlUI .taxi-controls {
    font-size: 12px;
    opacity: 0.8;
    border-top: 1px solid currentColor;
    padding-top: 10px;
    margin-top: 10px;
}
/* Welcome greeting */
#welcomeGreeting {
    position: fixed;
    top: calc(80px + env(safe-area-inset-top, 0));
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 24px;
    font-weight: bold;
    z-index: 1001;
    display: none;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5);
    text-align: center;
    max-width: calc(100% - 40px);
}
@media (max-width: 480px) {
    #welcomeGreeting { font-size: 18px; padding: 12px 20px; }
}
#welcomeGreeting.show {
    display: block;
    animation: greetingPopIn 3s ease-out forwards;
}
@keyframes greetingPopIn {
    0% { transform: translateX(-50%) scale(0); opacity: 0; }
    15% { transform: translateX(-50%) scale(1.1); opacity: 1; }
    25% { transform: translateX(-50%) scale(1); opacity: 1; }
    80% { transform: translateX(-50%) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) scale(0.8); opacity: 0; }
}
/* Confetti */
.confetti {
    position: fixed;
    width: 12px;
    height: 12px;
    pointer-events: none;
    z-index: 9999;
    animation: confettiFall 3s ease-out forwards;
}
@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg) scale(0.5);
    }
}
#milestoneMessage {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 48px;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 3px 3px 0 #FF6B6B, -3px -3px 0 #4ECDC4, 6px 6px 10px rgba(0,0,0,0.5);
    z-index: 9998;
    pointer-events: none;
    animation: none;
    max-width: calc(100% - 40px);
    text-align: center;
}
@media (max-width: 480px) {
    #milestoneMessage { font-size: 32px; }
}
#milestoneMessage.show {
    animation: milestonePopIn 2s ease-out forwards;
}
@keyframes milestonePopIn {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.3) rotate(5deg); opacity: 1; }
    40% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.8) rotate(0deg); opacity: 0; }
}

/* fpsDisplay moved to unified #gameHUD */


/* ==========================================================================
   EXTRACTED FROM JS FILES (Phase 7 refactor)
   Previously embedded as template literal strings inside JS files and injected
   via createElement('style'). Now loaded once via styles.css <link>.
   ========================================================================== */


/* ===== NAV STYLES (from slop-nav.js) ===== */

/* Push all page content down to make room for fixed nav (except main world) */
body:not(.slop-main-world) {
    padding-top: 50px !important;
}

.slop-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #FF6B6B, #FF8E53, #FFE66D, #4ECDC4, #45B7D1, #96E6A1, #DDA0DD, #FF6B6B);
    background-size: 200% 100%;
    animation: slopNavRainbow 8s linear infinite;
    padding: 8px 15px;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    font-family: 'Fredoka', 'Comic Sans MS', cursive, sans-serif;
}

@keyframes slopNavRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.slop-nav-back {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
    transition: transform 0.2s;
}

.slop-nav-back:hover {
    transform: scale(1.05);
}

.slop-nav-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .slop-nav-title {
        display: none;
    }
    .slop-nav-back {
        font-size: 13px;
    }
}

/* Main world specific styles */
.slop-nav-main-world {
    justify-content: center;
}
.slop-nav-main-world .slop-nav-title {
    position: static;
    transform: none;
    margin-right: auto;
}
.slop-nav-title-clickable:hover {
    text-shadow: 0 0 20px rgba(255,255,255,0.8), 2px 2px 4px rgba(0,0,0,0.5);
    transform: scale(1.05);
}
.slop-nav-title-clickable {
    transition: transform 0.2s, text-shadow 0.2s;
}

/* Share button */
.slop-nav-share {
    background: rgba(255,255,255,0.25);
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    padding: 4px 10px;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    white-space: nowrap;
    font-family: inherit;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    flex-shrink: 0;
}
.slop-nav-share:hover, .slop-nav-share:active {
    transform: scale(1.1);
    background: rgba(255,255,255,0.4);
}
.slop-nav-share-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-family: 'Fredoka', 'Comic Sans MS', cursive, sans-serif;
    z-index: 10001;
    animation: shareToastIn 0.3s ease-out;
    pointer-events: none;
}
@keyframes shareToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (max-width: 600px) {
    .slop-nav-share span { display: none; }
    .slop-nav-share { padding: 4px 8px; font-size: 14px; }
}

/* Data notice banner (COPPA-friendly) */
.slop-data-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #2d1b69, #1a1a2e);
    color: #fff;
    padding: 16px 20px;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: 'Fredoka', 'Comic Sans MS', cursive, sans-serif;
    font-size: 15px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    animation: slideUpNotice 0.4s ease-out;
}
@keyframes slideUpNotice {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.slop-data-notice-icon {
    font-size: 28px;
    flex-shrink: 0;
}
.slop-data-notice-text {
    line-height: 1.4;
    max-width: 600px;
}
.slop-data-notice-btn {
    background: #4ECDC4;
    color: #1a1a2e;
    border: none;
    border-radius: 12px;
    padding: 8px 20px;
    font-size: 15px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s, background 0.2s;
    flex-shrink: 0;
}
.slop-data-notice-btn:hover, .slop-data-notice-btn:active {
    transform: scale(1.05);
    background: #45B7D1;
}
@media (max-width: 600px) {
    .slop-data-notice {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 14px 16px;
        font-size: 13px;
    }
    .slop-data-notice-icon { font-size: 24px; }
}

/* Coin reward popup - shared across all games */
.coin-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    pointer-events: none;
    z-index: 10002;
    animation: coinFloat 1.2s ease-out forwards;
}
@keyframes coinFloat {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    20% { opacity: 1; transform: translate(-50%, -70%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -120%) scale(1); }
}


/* ===== MODAL STYLES (from slop-modal.js) ===== */

/* Modal frame */
.slop-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.slop-modal-overlay.open { opacity: 1; visibility: visible; }
.slop-modal { background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); border-radius: 24px; max-width: 900px; max-height: 85vh; width: 100%; display: flex; flex-direction: column; box-shadow: 0 25px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.1); transform: scale(0.9); transition: transform 0.3s; overflow: hidden; }
.slop-modal-overlay.open .slop-modal { transform: scale(1); }
.slop-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; background: linear-gradient(90deg, rgba(255,107,107,0.2), rgba(78,205,196,0.2), rgba(69,183,209,0.2)); border-bottom: 1px solid rgba(255,255,255,0.1); }
.slop-modal-title { font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif; font-size: 32px; color: #fff; text-shadow: 0 0 20px rgba(255,215,0,0.5), 2px 2px 4px rgba(0,0,0,0.5); margin: 0; background: linear-gradient(90deg, #FFD700, #FFA500, #FF6B6B); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.slop-modal-close { background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.2); color: white; font-size: 28px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; line-height: 1; }
.slop-modal-close:hover { background: rgba(255,107,107,0.3); border-color: #FF6B6B; transform: scale(1.1) rotate(90deg); }
.slop-modal-body { flex: 1; overflow-y: auto; padding: 20px 28px; color: white; font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif; }
.slop-modal-body::-webkit-scrollbar { width: 10px; }
.slop-modal-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 5px; }
.slop-modal-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #4ECDC4, #45B7D1); border-radius: 5px; }

/* Shared components */
.sm-section { margin-bottom: 20px; }
.sm-section-title { font-size: 13px; font-weight: bold; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; }

.sm-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: rgba(255,255,255,0.06); border-radius: 12px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.08); }
.sm-row-stack { flex-direction: column; align-items: flex-start; gap: 12px; }
.sm-label { color: white; font-size: 15px; }
.sm-value { color: rgba(255,255,255,0.6); font-size: 14px; font-family: monospace; }

.sm-input { background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 12px 16px; font-size: 15px; color: white; font-family: inherit; outline: none; transition: all 0.2s; }
.sm-input:focus { border-color: #4ECDC4; box-shadow: 0 0 15px rgba(78,205,196,0.3); background: rgba(255,255,255,0.12); }
.sm-input::placeholder { color: rgba(255,255,255,0.4); }
.sm-input-row { display: flex; gap: 10px; }

.sm-search { width: 100%; padding: 14px 20px; border-radius: 25px; margin-bottom: 16px; }

.sm-btn { border: none; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: bold; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.sm-btn:hover { transform: scale(1.05); }
.sm-btn-primary { background: linear-gradient(135deg, #4ECDC4, #45B7D1); color: white; box-shadow: 0 4px 15px rgba(78,205,196,0.3); }
.sm-btn-primary:hover { box-shadow: 0 6px 20px rgba(78,205,196,0.4); }
.sm-btn-success { background: linear-gradient(135deg, #22c55e, #16a34a); color: white; box-shadow: 0 4px 15px rgba(34,197,94,0.3); }
.sm-btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
.sm-btn-disabled { background: #6b7280; color: #9ca3af; cursor: not-allowed; }
.sm-btn-disabled:hover { transform: none; }

.sm-toggle { position: relative; width: 52px; height: 28px; background: rgba(255,255,255,0.2); border-radius: 14px; cursor: pointer; transition: all 0.3s; flex-shrink: 0; }
.sm-toggle.active { background: linear-gradient(135deg, #22c55e, #16a34a); }
.sm-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: white; border-radius: 50%; transition: all 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.sm-toggle.active::after { left: 27px; }

.sm-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sm-pill { background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); padding: 10px 18px; border-radius: 25px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.sm-pill:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.25); color: white; }
.sm-pill.active { background: linear-gradient(135deg, #4ECDC4, #45B7D1); color: white; border-color: transparent; }

.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.sm-grid-lg { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.sm-card { background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; cursor: pointer; transition: all 0.25s; text-decoration: none; color: white; position: relative; }
.sm-card:hover { transform: translateY(-4px); border-color: rgba(255,215,0,0.5); box-shadow: 0 12px 30px rgba(0,0,0,0.3), 0 0 20px rgba(255,215,0,0.15); background: rgba(255,255,255,0.12); }
.sm-card-icon { font-size: 40px; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3)); transition: transform 0.3s; }
.sm-card:hover .sm-card-icon { transform: scale(1.1); }
.sm-card-title { font-size: 13px; font-weight: bold; line-height: 1.3; }
.sm-card-desc { font-size: 11px; color: rgba(255,255,255,0.6); }
.sm-card-badge { position: absolute; top: 8px; right: 8px; background: #22c55e; color: white; padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: bold; }

.sm-card-common { border-color: rgba(156,163,175,0.4); }
.sm-card-rare { border-color: rgba(59,130,246,0.5); box-shadow: 0 0 10px rgba(59,130,246,0.2); }
.sm-card-epic { border-color: rgba(168,85,247,0.5); box-shadow: 0 0 12px rgba(168,85,247,0.25); }
.sm-card-legendary { border-color: rgba(245,158,11,0.6); box-shadow: 0 0 15px rgba(245,158,11,0.3); }

.sm-coin { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #fbbf24, #f59e0b); padding: 6px 14px; border-radius: 20px; font-size: 14px; font-weight: bold; color: #1a1a2e; }
.sm-coin-icon { width: 14px; height: 14px; background: linear-gradient(135deg, #FFD700, #FFA500); border-radius: 50%; border: 2px solid #B8860B; box-shadow: 0 0 4px rgba(255,215,0,0.6); }
.sm-coin-lg { padding: 8px 18px; font-size: 16px; }
.sm-coin-lg .sm-coin-icon { width: 18px; height: 18px; }

.sm-avatars { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-avatar { width: 50px; height: 50px; font-size: 28px; background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.2); border-radius: 14px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.sm-avatar:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
.sm-avatar.selected { background: linear-gradient(135deg, #FFD700, #FFA500); border-color: #FFD700; box-shadow: 0 0 15px rgba(255,215,0,0.4); }

.sm-messages { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; margin-bottom: 16px; }
.sm-message { background: rgba(255,255,255,0.08); padding: 10px 14px; border-radius: 12px; }
.sm-message-self { background: rgba(78,205,196,0.2); }
.sm-message-name { color: #4ECDC4; font-weight: bold; font-size: 12px; margin-right: 6px; }
.sm-message-self .sm-message-name { color: #88D8B0; }
.sm-message-text { color: white; font-size: 14px; }
.sm-message-empty { color: rgba(255,255,255,0.4); text-align: center; padding: 30px; }
.sm-message-status { color: rgba(255,255,255,0.5); text-align: center; font-size: 12px; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px; margin-bottom: 12px; }

.sm-empty { text-align: center; color: rgba(255,255,255,0.5); font-size: 18px; padding: 40px 20px; }
.sm-empty::before { content: attr(data-icon); display: block; font-size: 48px; margin-bottom: 12px; }

.sm-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #22c55e, #16a34a); color: white; padding: 14px 28px; border-radius: 30px; font-size: 16px; font-weight: bold; z-index: 10002; box-shadow: 0 10px 30px rgba(0,0,0,0.3); font-family: 'Comic Sans MS', cursive; animation: smToastIn 0.3s ease; }
@keyframes smToastIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

@media (max-width: 600px) {
    .slop-modal { max-height: 95vh; border-radius: 20px; margin: 10px; }
    .slop-modal-header { padding: 16px 20px; }
    .slop-modal-title { font-size: 24px; }
    .slop-modal-body { padding: 16px 20px; }
    .sm-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
    .sm-card { padding: 12px; border-radius: 12px; }
    .sm-card-icon { font-size: 32px; }
    .sm-card-title { font-size: 11px; }
    .sm-pills { gap: 6px; }
    .sm-pill { padding: 8px 14px; font-size: 12px; }
    .sm-row { padding: 12px; flex-wrap: wrap; gap: 10px; }
    .sm-input { padding: 10px 14px; }
}


/* ===== HUD STYLES (from slop-hud.js) ===== */

/* Standalone HUD (when not embedded in nav) */
.slop-global-hud {
    display: flex;
    align-items: center;
    gap: 6px;
    color: white;
    font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
    font-size: 14px;
    font-weight: bold;
}

.slop-global-hud.slop-hud-standalone {
    position: fixed;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 8px 16px;
    border-radius: 20px;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.slop-global-hud.slop-hud-embedded {
    background: rgba(0,0,0,0.25);
    padding: 5px 12px;
    border-radius: 20px;
}

.slop-global-hud .hud-divider {
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.3);
    margin: 0 4px;
}

.slop-global-hud .hud-coins {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: transform 0.15s;
}

.slop-global-hud .hud-coins:hover {
    transform: scale(1.1);
}

.slop-global-hud .hud-coin-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
    border-radius: 50%;
    border: 2px solid #B8860B;
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
}

.slop-global-hud .hud-btn {
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s;
    font-size: 16px;
    padding: 2px;
}

.slop-global-hud .hud-btn:hover {
    transform: scale(1.2);
}

.slop-global-hud .hud-btn.muted {
    opacity: 0.5;
}

.slop-global-hud .hud-username {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slop-global-hud .hud-music-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.slop-global-hud .hud-volume {
    width: 50px;
    height: 4px;
    cursor: pointer;
    accent-color: #fff;
}

.slop-global-hud .hud-players {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}

@keyframes hudCoinBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.slop-global-hud.coin-collected {
    animation: hudCoinBounce 0.3s ease-out;
}

@media (max-width: 700px) {
    .slop-global-hud {
        gap: 4px;
    }
    .slop-global-hud.slop-hud-embedded {
        padding: 4px 8px;
    }
    .slop-global-hud .hud-btn {
        font-size: 14px;
    }
    .slop-global-hud .hud-coins {
        font-size: 12px;
    }
    .slop-global-hud .hud-volume {
        width: 35px;
    }
    .slop-global-hud .hud-players {
        display: none;
    }
}

@media (max-width: 500px) {
    .slop-global-hud.slop-hud-standalone {
        padding: 6px 12px;
        font-size: 12px;
        top: 5px;
        right: 5px;
    }
}


/* ===== HUB MODAL STYLES (from slop-hub-modal.js) ===== */

/* Hub-specific tab & layout styles (unique to hub modal) */
.slop-hub-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.slop-hub-tab {
    padding: 10px 18px;
    border: none;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    border-radius: 12px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.slop-hub-tab:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}
.slop-hub-tab.active {
    background: linear-gradient(135deg, #4ECDC4, #45B7D1);
    color: white;
    box-shadow: 0 4px 15px rgba(78,205,196,0.3);
}
.slop-hub-tab-icon {
    font-size: 16px;
}
.slop-hub-content {
    display: none;
    flex: 1;
    overflow-y: auto;
}
.slop-hub-content.active {
    display: flex;
    flex-direction: column;
}

/* Full screen hub modal */
#slop-hub-overlay { padding: 0; }
#slop-hub-overlay .slop-modal { width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 0; }
#slop-hub-overlay .slop-modal-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* Home tab: challenge card (unique gradient) */
.hub-challenge { background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,165,0,0.15)); border-color: rgba(255,215,0,0.3); }
.hub-challenge .sm-card-title { color: #FFD700; font-size: 18px; }

/* Home tab: badge locked state & tooltip (extend sm-avatar) */
.sm-avatar.locked { opacity: 0.4; filter: grayscale(100%); }
.hub-badge-tooltip {
    position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.9); color: white; padding: 4px 10px;
    border-radius: 8px; font-size: 10px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.sm-avatar:hover .hub-badge-tooltip { opacity: 1; }

/* Roadmap tab styles */
.roadmap-login { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 20px; }
.roadmap-login-title { font-size: 20px; font-weight: bold; color: white; }
.roadmap-login-row { display: flex; gap: 8px; width: 100%; max-width: 300px; }
.roadmap-filters { display: flex; gap: 6px; padding: 0 20px 12px; flex-wrap: wrap; }
.roadmap-filter { padding: 6px 12px; border: none; border-radius: 20px; font-size: 12px; font-weight: bold; cursor: pointer; font-family: inherit; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); transition: all 0.2s; }
.roadmap-filter:hover { background: rgba(255,255,255,0.15); color: white; }
.roadmap-filter.active { background: linear-gradient(135deg, #4ECDC4, #45B7D1); color: white; }
.roadmap-add { display: flex; gap: 8px; padding: 0 20px 12px; flex-wrap: wrap; align-items: center; }
.roadmap-add input { flex: 1; min-width: 150px; }
.roadmap-add select { padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: white; font-family: inherit; font-size: 13px; }
.roadmap-add select option { background: #1a1a2e; color: white; }
.roadmap-list { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.roadmap-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.06); transition: all 0.2s; }
.roadmap-item:hover { background: rgba(255,255,255,0.1); }
.roadmap-item.done { opacity: 0.6; }
.roadmap-item.done .roadmap-text { text-decoration: line-through; }
.roadmap-item.done .roadmap-edit { color: rgba(255,255,255,0.5); }
.roadmap-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.3); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; transition: all 0.2s; color: white; }
.roadmap-check:hover { border-color: #4ECDC4; background: rgba(78,205,196,0.2); }
.roadmap-check.checked { border-color: #4ECDC4; background: #4ECDC4; }
.roadmap-badge { padding: 3px 8px; border-radius: 12px; font-size: 10px; font-weight: bold; text-transform: uppercase; flex-shrink: 0; }
.roadmap-badge.feature { background: rgba(78,205,196,0.2); color: #4ECDC4; }
.roadmap-badge.bug { background: rgba(255,107,107,0.2); color: #FF6B6B; }
.roadmap-badge.idea { background: rgba(255,215,0,0.2); color: #FFD700; }
.roadmap-badge.improvement { background: rgba(155,89,182,0.2); color: #BB8FCE; }
.roadmap-priority { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.roadmap-priority.high { background: #FF6B6B; box-shadow: 0 0 6px rgba(255,107,107,0.5); }
.roadmap-priority.medium { background: #FFD700; }
.roadmap-priority.low { background: rgba(255,255,255,0.3); }
.roadmap-text { flex: 1; color: white; font-size: 14px; line-height: 1.4; cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.roadmap-text:hover { background: rgba(255,255,255,0.05); }
.roadmap-text-edit { flex: 1; background: rgba(255,255,255,0.1); border: 1px solid rgba(78,205,196,0.5); color: white; font-size: 14px; line-height: 1.4; border-radius: 6px; padding: 6px 8px; font-family: inherit; outline: none; }
.roadmap-status { padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: bold; cursor: pointer; border: none; font-family: inherit; flex-shrink: 0; }
.roadmap-status.todo { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.roadmap-status.in-progress { background: rgba(255,165,0,0.2); color: #FFA500; }
.roadmap-status.done { background: rgba(78,205,196,0.2); color: #4ECDC4; }
.roadmap-edit { width: 28px; height: 28px; border-radius: 8px; border: none; background: none; color: rgba(255,255,255,0.3); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.roadmap-edit:hover { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); }
.roadmap-edit-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.roadmap-edit-form .sm-input { font-size: 13px; padding: 6px 10px; }
.roadmap-edit-select { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 6px 8px; font-size: 12px; cursor: pointer; }
.roadmap-edit-select option { background: #1a1a2e; color: white; }
.roadmap-delete { width: 28px; height: 28px; border-radius: 8px; border: none; background: none; color: rgba(255,255,255,0.3); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.roadmap-delete:hover { background: rgba(255,107,107,0.2); color: #FF6B6B; }
.roadmap-stats { display: flex; gap: 16px; padding: 0 20px 12px; }
.roadmap-stat { font-size: 12px; color: rgba(255,255,255,0.5); }
.roadmap-stat strong { color: white; }
.roadmap-empty { text-align: center; padding: 40px 20px; color: rgba(255,255,255,0.4); font-size: 16px; }
.roadmap-changelog-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; color: rgba(255,255,255,0.5); font-size: 13px; font-weight: bold; border-radius: 10px; transition: all 0.2s; user-select: none; }
.roadmap-changelog-header:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); }
.roadmap-changelog-header .changelog-arrow { transition: transform 0.2s; display: inline-block; }
.roadmap-changelog-header .changelog-arrow.open { transform: rotate(90deg); }
.roadmap-changelog-items { display: flex; flex-direction: column; gap: 6px; }
.roadmap-changelog-items .roadmap-item { opacity: 0.65; }
.roadmap-changelog-items .roadmap-item:hover { opacity: 0.9; }
.roadmap-changelog-items .roadmap-date { font-size: 11px; color: rgba(78,205,196,0.7); background: rgba(78,205,196,0.1); padding: 2px 8px; border-radius: 8px; flex-shrink: 0; white-space: nowrap; }

@media (max-width: 600px) {
    .slop-hub-tabs { gap: 6px; padding: 0 12px 12px 12px; }
    .slop-hub-tab { padding: 8px 12px; font-size: 12px; }
    .slop-hub-tab-icon { font-size: 14px; }
    .roadmap-add { flex-direction: column; }
    .roadmap-add select { width: 100%; }
    .roadmap-item { flex-wrap: wrap; }
}


/* ===== GAMES MODAL STYLES (from slop-games-modal.js) ===== */

/* Favorite button on game cards */
.sm-fav-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.4);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    line-height: 1;
}
.sm-fav-btn:hover {
    transform: scale(1.15);
    background: rgba(0,0,0,0.6);
}
.sm-fav-btn.is-favorite {
    background: rgba(255,20,147,0.4);
}
/* Controls row (search + sort) */
.sm-controls-row {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
    max-width: 500px;
}
.sm-controls-row .sm-search {
    flex: 1;
    margin-bottom: 0;
}
.sm-sort-select {
    width: auto;
    min-width: 150px;
    cursor: pointer;
}
/* NEW badge */
.sm-new-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #FF6B6B, #FF4757);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
}
/* Category section titles */
.sm-category-section {
    margin-top: 24px;
}
.sm-category-section:first-child {
    margin-top: 0;
}
.sm-category-title {
    font-size: 18px;
    font-weight: bold;
    color: #FFE66D;
    margin-bottom: 12px;
    padding-left: 8px;
    border-left: 4px solid #4ECDC4;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}