/* ============================================================
   MOSSAGE NEIGHBOURHOOD - GAME UI REDESIGN
   Pixel Art Interface - Stardew Valley / Retro RPG Style
   FULLY UPDATED - Works with new JS features
   VERSION 2.0 - Seasonal Rank System + UI Improvements
   ============================================================ */

/* ========== CSS VARIABLES ========== */
:root {
    /* Core Colors - Deep Forest Theme */
    --bg-primary: #0a1410;
    --bg-secondary: #0f1f14;
    --bg-card: #14281a;
    --bg-modal: #1a2e1e;
    --bg-panel: #0f1f14;
    
    /* Borders & Accents */
    --border-light: #2a6a3a;
    --border-mid: #1a4a2a;
    --border-dark: #0f2a1a;
    --border-glow: #00ff88;
    --border-glow-dim: rgba(0, 255, 136, 0.2);
    
    /* Text Colors */
    --text-primary: #e8f5e9;
    --text-secondary: #a8c8a8;
    --text-muted: #6a8a6a;
    --text-gold: #f5c842;
    --text-green: #00ff88;
    
    /* Button Colors */
    --btn-primary-bg: #1a4a2a;
    --btn-primary-border: #2a7a3a;
    --btn-primary-hover: #2a6a3a;
    --btn-secondary-bg: #1a2a1a;
    --btn-secondary-border: #2a4a2a;
    --btn-danger-bg: #3a1a1a;
    --btn-danger-border: #5a2a2a;
    
    /* Rank Colors */
    --rank-bronze: #CD7F32;
    --rank-silver: #C0C0C0;
    --rank-gold: #FFD700;
    --rank-platinum: #E5E4E2;
    --rank-diamond: #B9F2FF;
    --rank-master: #FF6B6B;
    --rank-grandmaster: #FF4500;
    --rank-eternal: #FFD700;
    
    /* Shadows */
    --shadow-pixel: 3px 3px 0 rgba(0, 0, 0, 0.6);
    --shadow-modal: 6px 6px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(40, 100, 60, 0.3);
    --shadow-inset: inset -2px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(40, 100, 60, 0.2);
    --shadow-hover: 0 0 20px rgba(0, 255, 136, 0.15), 0 0 40px rgba(0, 255, 136, 0.05);
    
    /* Typography */
    --font-pixel: 'Press Start 2P', monospace;
    --font-mono: 'VT323', 'Courier New', monospace;
    --font-body: 'VT323', 'Courier New', monospace;
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    
    /* Border Radius - Pixel style (minimal) */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    
    /* Transitions */
    --transition-fast: 0.1s ease;
    --transition-med: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* ========== BASE & RESET ========== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-primary);
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0, 255, 136, 0.02) 19px, rgba(0, 255, 136, 0.02) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(0, 255, 136, 0.02) 19px, rgba(0, 255, 136, 0.02) 20px);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    position: relative;
}

/* ========== PARTICLES - Subtle Ambient ========== */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.particle {
    position: absolute;
    bottom: -10px;
    width: 3px;
    height: 3px;
    background: rgba(0, 255, 136, 0.15);
    border-radius: 50%;
    animation: floatUp linear infinite;
    opacity: 0.3;
}

@keyframes floatUp {
    0%   { transform: translateY(0) scale(1); opacity: 0.15; }
    100% { transform: translateY(-110vh) scale(0.3); opacity: 0; }
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border: 1px solid var(--border-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border: 1px solid var(--border-mid);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-glow);
}

/* ========== LAYOUT & HERO ========== */
.hero {
    width: 100%;
    max-width: 1200px;
    margin: var(--space-md) auto 0;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    text-align: center;
    position: relative;
    z-index: 10;
}

.hero-title {
    font-family: var(--font-pixel);
    font-size: 2.4rem;
    color: var(--text-gold);
    text-shadow: 4px 4px 0 var(--bg-primary), 0 0 30px rgba(245, 200, 66, 0.15);
    letter-spacing: 8px;
    margin-bottom: var(--space-sm);
    position: relative;
    display: inline-block;
}

.hero-title::after {
    content: '™';
    font-size: 0.6rem;
    position: absolute;
    top: -8px;
    right: -28px;
    color: var(--text-muted);
    letter-spacing: 0;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.2rem;
    color: var(--text-secondary);
    letter-spacing: 2px;
    margin-bottom: var(--space-md);
    font-weight: 300;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.hero-stats .stat {
    background: var(--bg-card);
    border: 2px solid var(--border-mid);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
    min-width: 80px;
}

.hero-stats .stat-label {
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: var(--space-xs);
    letter-spacing: 1px;
}

.hero-stats .stat-value {
    font-family: var(--font-pixel);
    font-size: 1rem;
    color: var(--text-green);
    letter-spacing: 1px;
}

/* ========== MAIN CONTAINER ========== */
.garden-container {
    width: 100%;
    max-width: 1200px;
    flex: 1;
    padding: 0 var(--space-md) var(--space-xl);
    position: relative;
    z-index: 5;
}

/* ========== TOOLBAR ========== */
.garden-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border: 2px solid var(--border-dark);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
}

.toolbar-left { display: flex; flex: 0 0 auto; gap: var(--space-sm); }
.toolbar-center { display: flex; gap: var(--space-xs); flex: 1 1 auto; justify-content: center; flex-wrap: wrap; }
.toolbar-right { display: flex; flex: 0 0 auto; gap: var(--space-sm); }

/* ========== NAV BUTTONS ========== */
.nav-btn {
    background: var(--btn-secondary-bg);
    border: 2px solid var(--border-mid);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
    white-space: nowrap;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

.nav-btn:hover {
    background: var(--btn-primary-bg);
    border-color: var(--border-light);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-inset), var(--shadow-pixel), var(--shadow-hover);
}

.nav-btn:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4), inset -1px -1px 0 rgba(40, 100, 60, 0.1), 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.nav-btn.active {
    background: var(--btn-primary-bg);
    border-color: var(--border-glow);
    color: var(--text-primary);
    box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(40, 100, 60, 0.3), 0 0 20px rgba(0, 255, 136, 0.1), var(--shadow-pixel);
}

/* ========== GARDEN BUTTONS ========== */
.garden-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    background-color: var(--btn-primary-bg);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
    min-height: 36px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.garden-btn:hover:not(:disabled) {
    background-color: var(--btn-primary-hover);
    border-color: var(--border-glow);
    transform: translateY(-1px);
    box-shadow: var(--shadow-inset), var(--shadow-pixel), var(--shadow-hover);
}

.garden-btn:active:not(:disabled) {
    transform: translateY(1px) scale(0.97);
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4), inset -1px -1px 0 rgba(40, 100, 60, 0.1), 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.garden-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.5);
}

/* Primary Action Button (List a Shop) */
.add-btn {
    background: var(--btn-primary-bg);
    border-color: var(--border-glow);
    font-size: 0.55rem;
    padding: var(--space-sm) var(--space-lg);
    min-height: 40px;
}

.add-btn .plus-icon {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1;
    color: var(--text-gold);
}

.add-btn:hover {
    background: #2a6a3a;
    border-color: #00ff88;
    box-shadow: var(--shadow-inset), var(--shadow-pixel), 0 0 30px rgba(0, 255, 136, 0.2);
}

/* Search Button */
.search-btn {
    background: var(--btn-secondary-bg);
    border-color: var(--border-mid);
}

.search-btn .search-svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* ========== BUSINESS GRID ========== */
.garden-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-md);
    padding: var(--space-md);
    background-color: var(--bg-secondary);
    border: 3px solid var(--border-dark);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5), var(--shadow-pixel);
    min-height: 300px;
    position: relative;
}

/* ========== BUSINESS CARDS ========== */
.flower-card {
    position: relative;
    background: var(--bg-card);
    border: 2px solid var(--border-mid);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
    animation: plantPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm);
    min-height: 160px;
    overflow: hidden;
}

.flower-card:hover {
    border-color: var(--border-glow);
    transform: translateY(-3px);
    box-shadow: var(--shadow-inset), var(--shadow-pixel), var(--shadow-hover);
    z-index: 10;
}

.flower-card:active {
    transform: scale(0.95);
}

@keyframes plantPop {
    0%   { transform: scale(0.8); opacity: 0; }
    70%  { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Category Badge on Card */
.category-badge {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    background: var(--bg-modal);
    border: 2px solid var(--border-light);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
    z-index: 5;
    transition: all var(--transition-fast);
}

.flower-card:hover .category-badge {
    border-color: var(--border-glow);
    transform: scale(1.1);
}

/* Rank Badge Small on Card */
.rank-badge-small {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    font-family: var(--font-pixel);
    font-size: 0.3rem;
    color: var(--text-gold);
    background: rgba(20, 32, 16, 0.85);
    padding: 2px 6px;
    border: 1px solid var(--text-gold);
    border-radius: var(--radius-sm);
    z-index: 5;
    pointer-events: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

/* Sprite Container */
.flower-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.sprite-animated-container {
    position: relative;
    overflow: hidden;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    will-change: transform;
    contain: strict;
    backface-visibility: hidden;
    transform: translateZ(0);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    flex-shrink: 0;
}

.sprite-sheet {
    position: relative;
    width: 300%;
    height: 300%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    will-change: background-position;
    transition: opacity var(--transition-med);
}

@keyframes spriteSheetAnim {
    0%     { background-position: 0% 0%; }
    11.111%{ background-position: 50% 0%; }
    22.222%{ background-position: 100% 0%; }
    33.333%{ background-position: 0% 50%; }
    44.444%{ background-position: 50% 50%; }
    55.555%{ background-position: 100% 50%; }
    66.666%{ background-position: 0% 100%; }
    77.777%{ background-position: 50% 100%; }
    88.888%{ background-position: 100% 100%; }
    100%   { background-position: 0% 0%; }
}

.sprite-animated-container.animate .sprite-sheet {
    animation: spriteSheetAnim 1.8s steps(1) infinite;
}

/* Shop Nameplate */
.flower-card-id {
    display: block !important;
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.3px;
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    margin-top: auto;
    background: rgba(10, 20, 16, 0.8);
    border-top: 2px solid var(--border-mid);
    border-bottom: 2px solid var(--border-mid);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Status Badge */
.shop-status-badge {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    font-family: var(--font-pixel);
    font-size: 0.25rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    z-index: 5;
    pointer-events: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    border: 1px solid;
}

.shop-status-badge.closed {
    background: rgba(60, 20, 20, 0.9);
    color: #ff6b6b;
    border-color: #ff4444;
}

.shop-status-badge.open {
    background: rgba(20, 60, 20, 0.9);
    color: #66ff66;
    border-color: #44ff44;
}

/* Closed state */
.flower-card.closed .sprite-sheet {
    filter: brightness(0.4) saturate(0.3);
    opacity: 0.7;
}

.flower-card.closed .sprite-animated-container.animate .sprite-sheet {
    animation-play-state: paused;
}

.flower-card.closed {
    border-color: #3a2a2a;
}

/* ========== EMPTY STATE ========== */
.empty-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    z-index: 2;
    transition: opacity var(--transition-med);
}
.empty-state.hidden { opacity: 0; }

.empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--space-sm);
    animation: bob 2s ease-in-out infinite;
}

.empty-state p {
    font-family: var(--font-pixel);
    font-size: 0.6rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    margin: var(--space-xs) 0;
}
.empty-sub { font-size: 0.45rem !important; color: #4a6a4a !important; }

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ========== PAGINATION ========== */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-md) auto;
    padding: var(--space-sm);
}

.pagination-container .garden-btn {
    min-width: 80px;
}

#pageDisplay {
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    color: var(--text-secondary);
    min-width: 80px;
    text-align: center;
}

/* ========== TOOLTIP ========== */
.tooltip {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    background: var(--bg-modal);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    min-width: 160px;
    max-width: 260px;
    z-index: 100;
    box-shadow: var(--shadow-pixel), var(--shadow-inset);
    transition: opacity var(--transition-fast);
    font-family: var(--font-body);
}

.tooltip.visible {
    opacity: 1;
    pointer-events: auto;
}

.tooltip-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}
.tooltip-flower-emoji { font-size: 1.2rem; }
.tooltip-title {
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    color: var(--text-gold);
    letter-spacing: 1px;
}
.tooltip-message {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-wrap;
}

/* ========== MODALS ========== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-med);
    padding: var(--space-md);
}
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

body.modal-open .user-menu,
body.modal-open .welcome-guide {
    display: none !important;
}

.modal {
    background: var(--bg-modal);
    border: 3px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-modal);
    animation: modalIn 0.25s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

@keyframes modalIn {
    0%   { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.modal-close {
    position: absolute;
    top: 0.9px;
    right: var(--space-sm);
    background: var(--btn-secondary-bg);
    border: 2px solid var(--border-mid);
    color: var(--text-secondary);
    font-size: 1rem;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-family: var(--font-pixel);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-inset);
    z-index: 10;
}
.modal-close:hover {
    border-color: var(--border-glow);
    color: var(--text-primary);
    background: var(--btn-primary-bg);
}
.modal-close:active {
    transform: scale(0.9);
}

.modal-heading {
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: var(--text-gold);
    text-align: center;
    margin-bottom: var(--space-md);
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

/* ========== CATEGORY CHOICES ========== */
.flower-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: var(--space-sm);
    max-height: 50vh;
    overflow-y: auto;
    padding: var(--space-xs);
}

.flower-choice {
    background: var(--bg-card);
    border: 2px solid var(--border-mid);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
    padding: var(--space-sm) var(--space-xs);
    min-height: 64px;
}

.flower-choice:hover {
    border-color: var(--border-light);
    background: var(--btn-primary-bg);
    transform: translateY(-2px);
    box-shadow: var(--shadow-inset), var(--shadow-pixel), var(--shadow-hover);
}

.flower-choice:active {
    transform: scale(0.95);
}

.flower-choice.selected {
    border-color: var(--border-glow);
    background: var(--btn-primary-bg);
    box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(40, 100, 60, 0.3), 0 0 20px rgba(0, 255, 136, 0.1), var(--shadow-pixel);
}

.flower-choice-emoji {
    font-size: 1.6rem;
    line-height: 1;
    pointer-events: none;
}
.flower-choice-name {
    font-family: var(--font-pixel);
    font-size: 0.35rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: var(--space-xs);
    line-height: 1.2;
    word-break: break-word;
}

/* ========== SHOP DETAIL MODAL ========== */
.flower-detail-modal {
    max-width: 580px;
    padding: var(--space-lg);
}

.detail-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 var(--space-sm) 0;
    border-bottom: 2px solid var(--border-mid);
    margin-bottom: var(--space-md);
}

.detail-shop-id {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    margin-top: 25px !important;
}

/* Report Button - Small icon only in top-right */
.detail-report-btn {
    background: none !important;
    border: 2px solid var(--border-mid) !important;
    color: var(--text-muted) !important;
    font-family: var(--font-pixel) !important;
    font-size: 0.5rem !important;
    padding: 4px 8px !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    box-shadow: var(--shadow-inset) !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-xs) !important;
    margin-top: 25px !important;
}

.detail-report-btn:hover {
    border-color: #ff6b6b !important;
    color: #ff6b6b !important;
    background: rgba(255, 107, 107, 0.1) !important;
}

.detail-sprite-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm) 0;
    width: 100%;
}

.detail-sprite-wrapper {
    position: relative;
    display: inline-block;
    padding: 20px;
    margin: -10px;
}

.detail-sprite-container {
    width: 180px;
    height: 180px;
    position: relative;
    overflow: hidden;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border: 3px solid var(--border-mid);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
}

.detail-sprite-container .sprite-sheet {
    width: 160px;
    height: 160px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    animation: spriteSheetAnim 1.8s steps(1) infinite;
}

/* ========== CORNER BUTTONS - VISIBLE GAME STYLE ========== */
.corner-btn {
    position: absolute;
    width: 44px;
    height: 44px;
    background: var(--bg-card, #1a2e1e);
    border: 3px solid var(--border-light, #2a6a3a);
    border-radius: var(--radius-sm, 3px);
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
    z-index: 10;
    padding: 0;
    line-height: 1;
    color: var(--text-primary, #e8f5e9);
}

.corner-btn:hover {
    border-color: var(--border-glow, #00ff88);
    background: var(--btn-primary-bg, #1a4a2a);
    transform: scale(1.1);
    box-shadow: var(--shadow-inset), var(--shadow-pixel), var(--shadow-hover);
}

.corner-btn:active {
    transform: scale(0.9);
}

.corner-btn.active {
    border-color: var(--border-glow, #00ff88);
    background: var(--btn-primary-bg, #1a4a2a);
    box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(40, 100, 60, 0.3), 0 0 20px rgba(0, 255, 136, 0.15);
}

/* Position each corner button INSIDE the sprite area */
.corner-btn-top-left {
    top: -6px !important;
    left: -60px !important;
    right: auto;
    bottom: auto;
}

.corner-btn-top-right {
    top: -6px !important;
    right: -60px !important;
    left: auto;
    bottom: auto;
}

.corner-btn-bottom-left {
    bottom: 15px !important;
    left: -60px !important;
    top: auto;
    right: auto;
}

.corner-btn-bottom-right {
    bottom: 15px !important;
    right: -60px !important;
    top: auto;
    left: auto;
}

/* Pixel icons inside buttons */
.pixel-rose,
.pixel-wilted-rose,
.pixel-crystal-heart,
.pixel-trophy {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    width: 100%;
    height: 100%;
}

/* Rank badge on rank button */
.rank-badge {
    position: absolute;
    bottom: -8px;
    right: -8px;
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    color: var(--text-gold);
    background: rgba(20, 32, 16, 0.9);
    padding: 1px 5px;
    border: 1px solid var(--text-gold);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.detail-shop-name {
    font-family: var(--font-pixel);
    font-size: 1rem;
    color: var(--text-primary);
    text-align: center;
    margin-top: var(--space-sm);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

/* Badge Strip - Horizontal badges below sprite */
.detail-badge-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin: var(--space-sm) 0;
    flex-wrap: wrap;
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border: 2px solid var(--border-dark);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-inset);
    width: 100%;
}

.detail-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: var(--font-pixel);
    font-size: 0.35rem;
    color: var(--text-secondary);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    min-width: 50px;
}

.detail-badge .badge-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.detail-badge .badge-label {
    font-size: 0.3rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-badge .badge-value {
    color: var(--text-gold);
}

.detail-badge .badge-value.likes {
    color: #ff6b8a;
}

.detail-badge .badge-value.dislikes {
    color: #a08a7a;
}

/* Detail Status */
.detail-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    margin: var(--space-xs) 0;
}

.detail-status.open {
    color: #66ff66;
    background: rgba(0, 255, 0, 0.05);
    border: 1px solid rgba(68, 255, 68, 0.3);
}

.detail-status.closed {
    color: #ff6666;
    background: rgba(255, 0, 0, 0.05);
    border: 1px solid rgba(255, 68, 68, 0.3);
}

.detail-status .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.detail-status.open .status-dot {
    background: #44ff44;
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.3);
}

.detail-status.closed .status-dot {
    background: #ff4444;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.3);
}

/* Info Grid - 2 columns with icons */
.detail-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs) var(--space-md);
    padding: var(--space-sm) 0;
    border-top: 2px solid var(--border-dark);
    border-bottom: 2px solid var(--border-dark);
    margin: var(--space-sm) 0;
    width: 100%;
}

.detail-info-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
}

.detail-info-icon {
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.detail-info-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.detail-info-label {
    font-family: var(--font-pixel);
    font-size: 0.35rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-info-value {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-primary);
    word-break: break-word;
    line-height: 1.3;
}

/* Description Box */
.detail-description-box {
    background: var(--bg-secondary);
    border: 2px solid var(--border-dark);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-sm) 0;
    width: 100%;
    box-shadow: var(--shadow-inset);
}

.detail-description-label {
    font-family: var(--font-pixel);
    font-size: 0.35rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}

.detail-description-text {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 80px;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.detail-description-text.expanded {
    max-height: 400px;
}

.read-more-btn {
    display: inline-block;
    font-family: var(--font-pixel);
    font-size: 0.3rem;
    color: var(--text-green);
    cursor: pointer;
    margin-top: var(--space-xs);
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    transition: color var(--transition-fast);
}
.read-more-btn:hover {
    color: var(--text-gold);
}

.detail-date-footer {
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-sm) 0;
    border-top: 2px solid var(--border-dark);
    width: 100%;
    margin-top: var(--space-xs);
}

.detail-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    margin-top: var(--space-xs);
}

.detail-actions .garden-btn {
    width: 100%;
    justify-content: center;
    font-size: 0.5rem;
    padding: var(--space-sm) var(--space-md);
}

.detail-listed-by {
    font-family: var(--font-pixel);
    font-size: 0.35rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--space-xs);
    cursor: pointer;
    text-decoration: underline;
    transition: color var(--transition-fast);
}
.detail-listed-by:hover {
    color: var(--text-primary);
}

.detail-toggle-btn {
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid;
    margin-top: var(--space-xs);
    width: auto;
    min-height: 32px;
}

.detail-toggle-btn.open {
    background: rgba(255, 0, 0, 0.1);
    color: #ff6666;
    border-color: #ff4444;
}
.detail-toggle-btn.open:hover {
    background: rgba(255, 0, 0, 0.2);
}

.detail-toggle-btn.closed {
    background: rgba(0, 255, 0, 0.05);
    color: #66ff66;
    border-color: #44ff44;
}
.detail-toggle-btn.closed:hover {
    background: rgba(0, 255, 0, 0.15);
}

.detail-toggle-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.detail-owner-warning {
    font-family: var(--font-pixel);
    font-size: 0.3rem;
    color: #ffaa66;
    margin-top: var(--space-xs);
    text-align: center;
}

/* ========== QR MODAL - FIXED ========== */
.qr-modal {
    max-width: 420px;
    text-align: center;
    padding: var(--space-lg);
}

.qr-modal .modal-heading {
    font-size: 0.6rem;
    margin-bottom: var(--space-sm);
}

#qrCodeContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background: var(--bg-primary);
    border: 3px solid var(--border-mid);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-inset);
    min-height: 220px;
}

#qrCodeContainer canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    max-width: 100%;
    height: auto;
}

#qrShopUrl {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-muted);
    word-break: break-all;
    margin: var(--space-sm) 0 var(--space-md);
    padding: var(--space-sm);
    background: var(--bg-primary);
    border: 2px solid var(--border-dark);
    border-radius: var(--radius-sm);
    user-select: all;
}

#downloadQrBtn {
    width: 100%;
    justify-content: center;
    font-size: 0.5rem;
    padding: var(--space-md);
    min-height: 44px;
}

/* ========== RANK SCREEN (Separate from Shop Modal) ========== */
.rank-modal {
    max-width: 560px;
    width: 95%;
    padding: var(--space-lg);
    max-height: 90vh;
    overflow-y: auto;
}

.rank-modal .rank-header {
    text-align: center;
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--border-dark);
    margin-bottom: var(--space-md);
}

.rank-modal .rank-badge-large {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--space-xs);
}

.rank-modal .rank-title {
    font-family: var(--font-pixel);
    font-size: 0.65rem;
    color: var(--text-gold);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.rank-modal .rank-division {
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    color: var(--text-muted);
}

.rank-modal .rank-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-sm);
    margin: var(--space-sm) 0;
}

.rank-modal .rank-stat-box {
    background: var(--bg-card);
    border: 2px solid var(--border-dark);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    text-align: center;
    box-shadow: var(--shadow-inset);
}

.rank-modal .rank-stat-box .stat-value {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    color: var(--text-gold);
    display: block;
}

.rank-modal .rank-stat-box .stat-label {
    font-family: var(--font-pixel);
    font-size: 0.3rem;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

.rank-modal .progress-container {
    background: var(--bg-primary);
    border: 2px solid var(--border-dark);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    margin: var(--space-sm) 0;
    box-shadow: var(--shadow-inset);
}

.rank-modal .progress-bar {
    height: 14px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-dark);
}

.rank-modal .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--border-light), var(--border-glow), var(--text-gold));
    border-radius: var(--radius-sm);
    transition: width 0.6s ease;
}

.rank-modal .progress-text {
    font-family: var(--font-pixel);
    font-size: 0.3rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-xs);
}

.rank-modal .shop-legacy {
    background: rgba(20, 32, 16, 0.5);
    border: 2px solid var(--border-dark);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-sm) 0;
}

.rank-modal .shop-legacy .legacy-title {
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    display: block;
}

.rank-modal .shop-legacy .legacy-item {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-family: var(--font-pixel);
    font-size: 0.3rem;
    color: var(--text-muted);
}

.rank-modal .shop-legacy .legacy-item .value {
    color: var(--text-gold);
}

.rank-modal .shop-legacy .legacy-item .value.likes {
    color: #ff6b8a;
}

.rank-modal .shop-legacy .legacy-item .value.dislikes {
    color: #a08a7a;
}

.rank-modal .season-history {
    margin: var(--space-sm) 0;
    max-height: 120px;
    overflow-y: auto;
}

.rank-modal .season-history::-webkit-scrollbar {
    width: 4px;
}
.rank-modal .season-history::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
.rank-modal .season-history::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: var(--radius-sm);
}

.rank-modal .season-history-item {
    display: flex;
    justify-content: space-between;
    padding: 3px 8px;
    font-family: var(--font-pixel);
    font-size: 0.28rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-dark);
}

.rank-modal .season-history-item.current {
    background: rgba(0, 255, 136, 0.05);
    color: var(--text-primary);
    border-left: 2px solid var(--border-glow);
}

.rank-modal .next-level-info {
    font-family: var(--font-pixel);
    font-size: 0.35rem;
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-sm);
    background: var(--bg-card);
    border: 2px solid var(--border-dark);
    border-radius: var(--radius-sm);
    margin: var(--space-sm) 0;
}

.rank-modal .next-level-info .highlight {
    color: var(--text-gold);
}

.rank-modal .cooldown-message {
    font-family: var(--font-pixel);
    font-size: 0.3rem;
    color: #ffa07a;
    text-align: center;
    padding: var(--space-xs);
    background: rgba(255, 160, 122, 0.05);
    border: 1px solid #ffa07a;
    border-radius: var(--radius-sm);
    margin: var(--space-xs) 0;
}

/* ========== ABOUT MODAL ========== */
.about-modal {
    max-width: 600px;
    padding: var(--space-lg);
}

.tab-container { margin-top: var(--space-sm); }
.tab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
    margin-bottom: var(--space-md);
    border-bottom: 2px solid var(--border-dark);
    padding-bottom: var(--space-sm);
}

.tab-btn {
    background: var(--btn-secondary-bg);
    border: 2px solid var(--border-mid);
    color: var(--text-secondary);
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-inset);
    min-height: 28px;
}
.tab-btn:hover {
    background: var(--btn-primary-bg);
    color: var(--text-primary);
    border-color: var(--border-light);
}
.tab-btn.active {
    background: var(--btn-primary-bg);
    border-color: var(--border-glow);
    color: var(--text-primary);
}

.tab-content {
    display: none;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: left;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: var(--space-sm);
}
.tab-content.active { display: block; }
.tab-content a {
    color: var(--text-green);
    text-decoration: none;
    border-bottom: 1px dotted var(--text-green);
}
.tab-content a:hover {
    color: var(--text-gold);
    border-bottom: 1px solid var(--text-gold);
}
.tab-content ul {
    padding-left: var(--space-lg);
    margin: var(--space-sm) 0;
}
.tab-content li {
    margin: var(--space-xs) 0;
}

/* ========== AMOUNT SECTION ========== */
.amount-section {
    margin: var(--space-md) 0 var(--space-sm);
    text-align: center;
}
.amount-label {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: var(--space-sm);
}
.amount-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-sm);
}
.amount-btn {
    background: var(--btn-secondary-bg);
    border: 2px solid var(--border-mid);
    color: var(--text-secondary);
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-inset);
    min-height: 32px;
}
.amount-btn:hover {
    background: var(--btn-primary-bg);
    border-color: var(--border-light);
    color: var(--text-primary);
}
.amount-btn.active {
    background: var(--btn-primary-bg);
    border-color: var(--border-glow);
    color: var(--text-primary);
    box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(40, 100, 60, 0.3), 0 0 20px rgba(0, 255, 136, 0.1), var(--shadow-pixel);
}

/* ========== CONSENT CHECKBOX ========== */
.consent-checkbox {
    margin: var(--space-md) 0 var(--space-sm);
    background: var(--bg-secondary);
    padding: var(--space-sm);
    border: 2px solid var(--border-dark);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-inset);
}
.consent-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.consent-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--border-glow);
    cursor: pointer;
}
.consent-text { line-height: 1.4; }
.consent-text a {
    color: var(--text-green);
    text-decoration: none;
    border-bottom: 1px dotted var(--text-green);
}
.consent-text a:hover {
    color: var(--text-gold);
    border-bottom: 1px solid var(--text-gold);
}

/* ========== PLANT BUTTON ========== */
.plant-btn {
    display: block;
    width: 100%;
    padding: var(--space-md);
    background: var(--btn-primary-bg);
    border: 3px solid var(--border-light);
    color: var(--text-primary);
    font-family: var(--font-pixel);
    font-size: 0.6rem;
    cursor: pointer;
    letter-spacing: 2px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
.plant-btn:hover:not(:disabled) {
    background: var(--btn-primary-hover);
    border-color: var(--border-glow);
    box-shadow: var(--shadow-inset), var(--shadow-pixel), var(--shadow-hover);
}
.plant-btn:active:not(:disabled) {
    transform: scale(0.97);
}
.plant-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========== BACK BUTTON ========== */
.back-btn {
    background: var(--btn-secondary-bg);
    border: 2px solid var(--border-mid);
    color: var(--text-secondary);
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-inset);
    min-height: 32px;
}
.back-btn:hover {
    border-color: var(--border-light);
    color: var(--text-primary);
    background: var(--btn-primary-bg);
}

/* ========== TEXTAREA ========== */
.textarea-wrapper { position: relative; margin-bottom: var(--space-sm); }
.message-textarea {
    width: 100%;
    background: var(--bg-primary);
    border: 2px solid var(--border-mid);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1.1rem;
    padding: var(--space-sm);
    resize: vertical;
    min-height: 80px;
    max-height: 160px;
    border-radius: var(--radius-sm);
    line-height: 1.5;
    box-shadow: var(--shadow-inset);
    outline: none;
}
.message-textarea:focus {
    border-color: var(--border-light);
}
.message-textarea::placeholder { color: var(--text-muted); }

.char-counter {
    display: block;
    text-align: right;
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    color: var(--text-muted);
    margin-top: var(--space-xs);
}
.char-counter.near-limit { color: #ffa07a; }

/* ========== REPORT MODAL ========== */
.report-modal { max-width: 500px; }
.report-field {
    margin-bottom: var(--space-md);
    text-align: left;
}
.report-field label {
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: var(--space-xs);
}
#reportMossageId,
#reportReason,
#reportDetails {
    width: 100%;
    background: var(--bg-primary);
    border: 2px solid var(--border-mid);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-inset);
}
#reportMossageId { font-family: var(--font-pixel); font-size: 0.4rem; }
#reportDetails { resize: vertical; }
#reportCharCounter {
    display: block;
    text-align: right;
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

/* ========== COMMUNITY CHAT ========== */
.talks-container {
    background: var(--bg-secondary);
    border: 3px solid var(--border-dark);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    height: 70vh;
    min-height: 400px;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4), var(--shadow-pixel);
}

.talks-header {
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    color: var(--text-secondary);
    text-align: center;
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--border-dark);
    margin-bottom: var(--space-md);
    flex-shrink: 0;
}

.talks-messages {
    flex: 1;
    overflow-y: auto;
    padding-right: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.talk-message {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    max-width: 80%;
    animation: fadeInUp 0.3s ease-out;
}
.talk-message.in { align-self: flex-start; }
.talk-message.out { align-self: flex-end; flex-direction: row-reverse; }

.talk-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border-mid);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-card);
}
.talk-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.talk-avatar .avatar-emoji {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.talk-content {
    flex: 1;
    min-width: 0;
    background: var(--bg-card);
    border: 2px solid var(--border-mid);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    box-shadow: var(--shadow-inset);
}
.talk-message.out .talk-content {
    background: var(--btn-primary-bg);
    border-color: var(--border-light);
}

.talk-header {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
    flex-wrap: wrap;
    gap: var(--space-xs);
}
.talk-message.out .talk-header { color: var(--text-secondary); }
.talk-name {
    cursor: pointer;
    text-decoration: underline;
    color: var(--text-green);
}
.talk-name:hover { color: var(--text-gold); }
.talk-time { color: var(--text-muted); }
.talk-text {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-primary);
    word-break: break-word;
}
.talk-message.out .talk-text { color: var(--text-primary); }

.talks-input-area {
    display: flex;
    gap: var(--space-sm);
    border-top: 2px solid var(--border-dark);
    padding-top: var(--space-sm);
    flex-shrink: 0;
}
#talksInput {
    flex: 1;
    background: var(--bg-primary);
    border: 2px solid var(--border-mid);
    color: var(--text-primary);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: 1rem;
    border-radius: var(--radius-sm);
    outline: none;
    box-shadow: var(--shadow-inset);
}
#talksInput:focus { border-color: var(--border-light); }
#talksSendBtn {
    background: var(--btn-primary-bg);
    border: 2px solid var(--border-light);
    color: var(--text-primary);
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
    min-height: 36px;
}
#talksSendBtn:hover {
    background: var(--btn-primary-hover);
    border-color: var(--border-glow);
}

.talks-join-cta {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    background: var(--bg-card);
    border: 2px solid var(--border-mid);
    border-radius: var(--radius-sm);
    margin: auto;
}
.talks-join-cta p {
    font-family: var(--font-body);
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}
.talk-empty {
    font-family: var(--font-body);
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-lg);
}

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

/* ========== FOOTER ========== */
.footer {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    text-align: center;
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    z-index: 5;
}

/* ========== USER MENU - DROPDOWN WITH BACKDROP ========== */
.user-menu {
    position: fixed;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 1000;
}

/* Dropdown Backdrop */
.user-dropdown-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 998;
    display: none;
    animation: fadeIn 0.15s ease;
}

.user-dropdown-backdrop.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-sm));
    right: 0;
    background: var(--bg-modal);
    border: 3px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    min-width: 200px;
    box-shadow: var(--shadow-pixel), var(--shadow-modal);
    z-index: 999;
    margin-top: var(--space-xs);
}

.user-dropdown.active {
    display: block;
}

.user-dropdown button {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
    min-height: 36px;
}
.user-dropdown button:hover {
    background: var(--btn-primary-bg);
    color: var(--text-primary);
}
.user-dropdown .divider {
    border-top: 2px solid var(--border-mid);
    margin: var(--space-xs) 0;
}

#userBtn {
    min-height: 40px;
    min-width: 40px;
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
    font-size: 0.6rem;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-pixel);
}
#userBtn:hover {
    border-color: var(--border-glow);
    box-shadow: var(--shadow-inset), var(--shadow-pixel), var(--shadow-hover);
}

/* ========== PROFILE MODAL ========== */
.profile-modal {
    max-width: 500px;
    padding: var(--space-lg);
}

.profile-header {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.profile-avatar-container {
    width: 72px;
    height: 72px;
    border: 3px solid var(--border-light);
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-primary);
    flex-shrink: 0;
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
}
.profile-avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-name-section {
    flex: 1;
    min-width: 0;
}
.profile-name-section h2 {
    font-family: var(--font-pixel);
    font-size: 0.9rem;
    color: var(--text-primary);
    margin: 0;
    word-break: break-word;
}
.profile-name-section p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: var(--space-xs) 0;
}

/* Profile Stats - Unified Horizontal Bar */
.profile-stats-bar {
    display: flex;
    align-items: stretch;
    background: var(--bg-secondary);
    border: 2px solid var(--border-dark);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-inset);
    margin: var(--space-md) 0;
    overflow: hidden;
    width: 100%;
}

.profile-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm);
    text-align: center;
    border-right: 1px solid var(--border-dark);
    min-width: 0;
}

.profile-stat-item:last-child {
    border-right: none;
}

.profile-stat-item .stat-icon {
    font-size: 1.1rem;
    line-height: 1;
}
.profile-stat-item .stat-number {
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: var(--text-gold);
    margin-top: 2px;
}
.profile-stat-item .stat-label {
    font-family: var(--font-pixel);
    font-size: 0.35rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#viewMyGardenBtn {
    width: 100%;
    justify-content: center;
}

/* Profile controls */
.profile-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-sm) 0;
    flex-wrap: wrap;
}

.profile-controls label {
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}
.profile-controls input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--border-glow);
}

#changeAvatarBtn {
    font-size: 0.4rem;
    padding: var(--space-xs) var(--space-md);
    min-height: 28px;
}

/* ========== MY LISTINGS MODAL - REMOVED SETTINGS BUTTON ========== */
.my-garden-modal {
    max-width: 1100px;
    width: 95%;
    padding: var(--space-lg);
}

.my-garden-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    align-items: center;
}

.my-garden-toolbar input,
.my-garden-toolbar select {
    background: var(--bg-primary);
    border: 2px solid var(--border-mid);
    color: var(--text-primary);
    padding: var(--space-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-inset);
    outline: none;
    min-height: 36px;
}
.my-garden-toolbar input:focus,
.my-garden-toolbar select:focus {
    border-color: var(--border-light);
}
.my-garden-toolbar input {
    flex: 1;
    min-width: 120px;
}
.my-garden-toolbar select {
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    padding: var(--space-sm) var(--space-md);
}

/* Shop options button - REMOVED (no longer needed) */
/* .shop-options-btn styles removed */

/* Shop Options Popup - REMOVED (no longer needed) */
/* .shop-options-overlay and .shop-options-popup styles removed */

/* ========== FAVORITES MODAL - REMOVED SETTINGS BUTTON ========== */
.favorites-modal {
    max-width: 1100px;
    width: 95%;
    padding: var(--space-lg);
}
.favorites-modal .garden-grid {
    min-height: 200px;
}

/* ========== LEADERBOARD MODAL ========== */
.leaderboard-modal {
    max-width: 600px;
    width: 95%;
    padding: var(--space-lg);
}
.leaderboard-modal .leaderboard-list {
    max-height: 55vh;
    overflow-y: auto;
    padding: var(--space-xs);
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    margin-bottom: var(--space-xs);
    box-shadow: var(--shadow-inset);
}
.leaderboard-item:hover {
    border-color: var(--border-light);
    background: var(--bg-modal);
}
.leaderboard-item .rank-number {
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    color: var(--text-muted);
    min-width: 28px;
    text-align: center;
}
.leaderboard-item .rank-medal {
    font-size: 1.2rem;
    min-width: 28px;
    text-align: center;
}
.leaderboard-item .shop-info {
    flex: 1;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-primary);
}
.leaderboard-item .rank-stats {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-pixel);
    font-size: 0.35rem;
    color: var(--text-muted);
}
.leaderboard-item .rank-stats .points {
    color: var(--text-gold);
}
.leaderboard-item.medal {
    border-left: 3px solid var(--text-gold);
}

#yourRank {
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-dark);
    margin-top: var(--space-sm);
}

/* ========== WELCOME GUIDE ========== */
.welcome-guide {
    position: fixed;
    bottom: var(--space-md);
    right: var(--space-md);
    max-width: 320px;
    background: var(--bg-modal);
    border: 3px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    box-shadow: var(--shadow-pixel), var(--shadow-modal);
    z-index: 1000;
    font-family: var(--font-body);
}
.guide-content { text-align: left; }
.guide-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.guide-icon { font-size: 1.6rem; }
.guide-title {
    font-family: var(--font-pixel);
    font-size: 0.6rem;
    color: var(--text-gold);
    margin: 0;
    letter-spacing: 1px;
}
.guide-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: var(--space-xs) 0;
    line-height: 1.4;
}
.guide-subtitle {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    color: var(--text-secondary);
    margin: var(--space-sm) 0 var(--space-xs);
}
.guide-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-sm);
}
.guide-list li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: var(--space-xs) 0;
    line-height: 1.3;
}
.guide-divider {
    height: 1px;
    background: var(--border-dark);
    margin: var(--space-sm) 0;
}
.guide-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    margin: var(--space-sm) 0;
}
.guide-btn {
    background: var(--btn-primary-bg);
    border: 2px solid var(--border-light);
    color: var(--text-primary);
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
}
.guide-btn:hover {
    background: var(--btn-primary-hover);
    border-color: var(--border-glow);
}

/* ========== RESPONSIVE ========== */

/* Tablet */
@media (max-width: 900px) {
    .garden-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: var(--space-sm);
        padding: var(--space-sm);
    }
    .hero-title { font-size: 1.8rem; letter-spacing: 4px; }
    .hero-subtitle { font-size: 1rem; }
    .hero-stats .stat { padding: var(--space-xs) var(--space-md); }
    .hero-stats .stat-label { font-size: 0.4rem; }
    .hero-stats .stat-value { font-size: 0.85rem; }
    
    .sprite-animated-container { width: 64px; height: 64px; }
    .flower-card-id { font-size: 0.3rem; }
    
    .detail-sprite-container { width: 150px; height: 150px; }
    .detail-info-grid { grid-template-columns: 1fr 1fr; }
    
    .rank-modal .rank-stats-grid { grid-template-columns: 1fr 1fr; }
    
    .corner-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        border-width: 2px;
    }
    .corner-btn-top-left { top: -12px; left: -12px; }
    .corner-btn-top-right { top: -12px; right: -12px; }
    .corner-btn-bottom-left { bottom: -12px; left: -12px; }
    .corner-btn-bottom-right { bottom: -12px; right: -12px; }
    .rank-badge { font-size: 0.35rem; }
}

/* Mobile */
@media (max-width: 768px) {
    .garden-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
        padding: var(--space-sm);
    }
    .toolbar-center {
        order: 2;
        justify-content: center;
        flex-wrap: wrap;
    }
    .toolbar-left { order: 1; }
    .toolbar-right { order: 3; }
    .toolbar-left .garden-btn,
    .toolbar-right .garden-btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero { margin-top: var(--space-xs); padding: var(--space-sm); }
    .hero-title { font-size: 1.4rem; letter-spacing: 3px; }
    .hero-title::after { display: none; }
    .hero-subtitle { font-size: 0.85rem; }
    .hero-stats { gap: var(--space-sm); }
    .hero-stats .stat { padding: var(--space-xs) var(--space-sm); min-width: 60px; }
    .hero-stats .stat-value { font-size: 0.75rem; }
    
    .garden-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: var(--space-sm);
        padding: var(--space-sm);
        border-width: 2px;
    }
    
    .sprite-animated-container { width: 56px; height: 56px; }
    .flower-card { min-height: 130px; padding: var(--space-xs); }
    .flower-card-id { font-size: 0.28rem; padding: 2px var(--space-xs); }
    .category-badge { width: 22px; height: 22px; font-size: 0.6rem; }
    
    .modal { padding: var(--space-md); max-width: 95vw; }
    .modal-heading { font-size: 0.55rem; }
    
    .flower-detail-modal { padding: var(--space-md); }
    .detail-sprite-container { width: 140px; height: 140px; }
    .detail-shop-name { font-size: 1.25rem; }
    .detail-badge-strip { gap: var(--space-sm); }
    .detail-badge { font-size: 0.3rem; min-width: 40px; padding: var(--space-xs); }
    .detail-badge .badge-icon { font-size: 0.7rem; }
    .detail-info-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
    .detail-info-value { font-size: 0.85rem; }
    .detail-actions .garden-btn { font-size: 0.45rem; padding: var(--space-sm); }
    
    .profile-stats-bar { flex-wrap: wrap; }
    .profile-stat-item { 
        flex: 1 1 50%; 
        border-right: none; 
        border-bottom: 1px solid var(--border-dark);
        padding: var(--space-sm);
    }
    .profile-stat-item:nth-child(odd) { border-right: 1px solid var(--border-dark); }
    .profile-stat-item:nth-child(3), .profile-stat-item:nth-child(4) { border-bottom: none; }
    
    .user-menu { top: var(--space-sm); right: var(--space-sm); }
    .user-dropdown { min-width: 170px; right: 0; left: auto; }
    
    .talk-message { max-width: 90%; }
    .talk-avatar { width: 30px; height: 30px; }
    .talks-container { height: 60vh; min-height: 300px; padding: var(--space-sm); }
    
    .rank-modal .rank-stats-grid { grid-template-columns: 1fr 1fr; }
    .rank-modal .rank-badge-large { font-size: 2.2rem; }
    .rank-modal .rank-title { font-size: 0.5rem; }
    
    .flower-choices { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
    .flower-choice { min-height: 54px; padding: var(--space-xs); }
    .flower-choice-emoji { font-size: 1.3rem; }
    .flower-choice-name { font-size: 0.3rem; }
    
    .welcome-guide {
        bottom: var(--space-sm);
        right: var(--space-sm);
        left: var(--space-sm);
        max-width: none;
        width: auto;
    }
    
    .corner-btn {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
        border-width: 2px;
    }
    .corner-btn-top-left { top: -10px; left: -10px; }
    .corner-btn-top-right { top: -10px; right: -10px; }
    .corner-btn-bottom-left { bottom: -10px; left: -10px; }
    .corner-btn-bottom-right { bottom: 14px; right: -10px; }
    .rank-badge { font-size: 0.3rem; bottom: -6px; right: -6px; }
    .detail-sprite-wrapper { padding: 16px; margin: -8px; }
}

/* Small phones */
@media (max-width: 360px) {
    .garden-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); padding: var(--space-xs); }
    .hero-title { font-size: 1rem; }
    .hero-subtitle { font-size: 0.7rem; }
    
    .sprite-animated-container { width: 44px; height: 44px; }
    .flower-card { min-height: 100px; padding: 4px; }
    .flower-card-id { font-size: 0.22rem; padding: 2px 4px; }
    .category-badge { width: 18px; height: 18px; font-size: 0.5rem; top: 2px; left: 2px; }
    .shop-status-badge { font-size: 0.2rem; padding: 1px 4px; }
    
    .detail-sprite-container { width: 120px; height: 120px; }
    .detail-badge { font-size: 0.25rem; min-width: 32px; padding: 2px var(--space-xs); }
    .detail-badge .badge-icon { font-size: 0.6rem; }
    .detail-info-grid { grid-template-columns: 1fr; }
    .detail-shop-name { font-size: 1.2rem; }
    
    .profile-stat-item { flex: 1 1 100%; border-right: none !important; }
    .profile-stat-item:nth-child(3) { border-bottom: 1px solid var(--border-dark); }
    
    .modal { padding: var(--space-sm); }
    .modal-heading { font-size: 0.45rem; }
    
    .garden-btn { font-size: 0.4rem; padding: var(--space-xs) var(--space-sm); min-height: 30px; }
    .nav-btn { font-size: 0.4rem; padding: var(--space-xs) var(--space-sm); min-height: 30px; }
    .add-btn { font-size: 0.45rem; padding: var(--space-xs) var(--space-md); min-height: 34px; }
    
    .rank-modal .rank-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
    .rank-modal .rank-stat-box .stat-value { font-size: 0.4rem; }
    .rank-modal .rank-badge-large { font-size: 1.8rem; }
    
    .corner-btn {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
        border-width: 2px;
    }
    .corner-btn-top-left { top: -8px; left: -8px; }
    .corner-btn-top-right { top: -8px; right: -8px; }
    .corner-btn-bottom-left { bottom: -8px; left: -8px; }
    .corner-btn-bottom-right { bottom: -8px; right: -8px; }
    .rank-badge { font-size: 0.25rem; bottom: -4px; right: -4px; }
    .detail-sprite-wrapper { padding: 12px; margin: -4px; }
}

/* ========== UTILITY ========== */
.hidden { display: none !important; }

/* ========== MISC STYLES ========== */
.detail-share-actions {
    display: flex;
    gap: var(--space-sm);
    width: 100%;
    margin-top: var(--space-xs);
}
.detail-share-actions .garden-btn {
    flex: 1;
    justify-content: center;
    font-size: 0.4rem;
    padding: var(--space-sm);
}

.selected-flower-preview {
    text-align: center;
    margin: var(--space-sm) 0;
}
.preview-emoji {
    font-size: 2.5rem;
    display: inline-block;
    padding: var(--space-sm);
    background: var(--bg-primary);
    border: 2px solid var(--border-mid);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-inset);
}

.detail-emoji { font-size: 3rem; display: block; margin-bottom: var(--space-xs); }
.detail-title { font-family: var(--font-pixel); font-size: 0.6rem; color: var(--text-gold); }
.detail-date { font-family: var(--font-pixel); font-size: 0.4rem; color: var(--text-muted); }

#aboutOverlay.active { z-index: 210; }

/* Ensure search input works */
#searchInput {
    background: var(--bg-primary) !important;
    border: 2px solid var(--border-mid) !important;
    color: var(--text-primary) !important;
    padding: var(--space-sm) var(--space-md) !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-inset) !important;
    min-height: 36px !important;
    width: 160px !important;
}
#searchInput:focus {
    border-color: var(--border-light) !important;
    outline: none !important;
}

/* QR Modal close button fix */
#qrClose {
    position: absolute !important;
    top: var(--space-sm) !important;
    right: var(--space-sm) !important;
    background: var(--btn-secondary-bg) !important;
    border: 2px solid var(--border-mid) !important;
    color: var(--text-secondary) !important;
    font-size: 1rem !important;
    width: 36px !important;
    height: 36px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-pixel) !important;
    transition: all var(--transition-fast) !important;
    box-shadow: var(--shadow-inset) !important;
    z-index: 10 !important;
}
#qrClose:hover {
    border-color: var(--border-glow) !important;
    color: var(--text-primary) !important;
    background: var(--btn-primary-bg) !important;
}
#qrClose:active {
    transform: scale(0.9) !important;
}

/* ============================================================
   TOAST NOTIFICATION - NEW
   ============================================================ */
@keyframes toastIn {
    0%   { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.9); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes toastOut {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.9); }
}

#mossageToast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a2e1e;
    border: 3px solid #44ff44;
    color: #e8f5e9;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    padding: 12px 24px;
    border-radius: 3px;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.6), inset -2px -2px 0 rgba(0,0,0,0.4), inset 2px 2px 0 rgba(40,100,60,0.2);
    z-index: 9999;
    text-align: center;
    max-width: 90vw;
    animation: toastIn 0.3s ease-out;
    letter-spacing: 1px;
}

#mossageToast.toast-out {
    animation: toastOut 0.3s ease-in forwards;
}
/* Fix modal close button overlap */
.modal-heading {
    padding-right: 24px !important;
}
.amount-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 14px;
    min-width: 80px;
    background: #1a2e1e;
    border: 3px solid #2a6a3a;
    border-radius: 3px;
    color: #e8f5e9;
    font-family: 'Press Start 2P', monospace;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: inset -2px -2px 0 rgba(0,0,0,0.4), 3px 3px 0 rgba(0,0,0,0.6);
}

.amount-btn .plan-emoji {
    font-size: 1.2rem;
}

.amount-btn .plan-name {
    font-size: 0.4rem;
    color: #a8c8a8;
}
/* ============================================================
   LOCATION BANNER – CITY SELECTOR VERSION
   ============================================================ */

.location-banner {
    background: #1a2e1e;
    border: 3px solid #2a6a3a;
    border-radius: var(--radius-sm, 4px);
    padding: 10px 16px;
    margin: 0 0 12px 0;
    font-family: var(--font-pixel, 'Press Start 2P', monospace);
    font-size: 0.45rem;
    color: #b8e090;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    box-shadow: var(--shadow-inset), var(--shadow-pixel);
}

.location-banner-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.location-banner-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.location-icon {
    font-size: 1rem;
}

.location-label {
    font-size: 0.4rem;
    color: #8aa878;
}

.city-selector {
    background: #0a1410;
    border: 2px solid #2a6a3a;
    border-radius: var(--radius-sm, 3px);
    color: #e0ffc0;
    padding: 4px 12px;
    font-family: var(--font-pixel, 'Press Start 2P');
    font-size: 0.45rem;
    cursor: pointer;
    min-width: 120px;
    max-width: 200px;
    box-shadow: var(--shadow-inset);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a8e4a' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px;
}

.city-selector:focus {
    border-color: #b8e090;
}

.city-selector option {
    background: #1a2e1e;
    color: #e0ffc0;
    padding: 4px;
}

.location-banner .shop-count {
    color: #ffd700;
}

#refreshLocationBtn {
    font-size: 0.4rem;
    padding: 4px 12px;
}

/* City badge on shop cards (instead of distance) */
.city-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-family: var(--font-pixel, 'Press Start 2P');
    font-size: 0.25rem;
    color: #a8c8a8;
    background: rgba(10, 20, 16, 0.85);
    padding: 2px 6px;
    border: 1px solid #2a6a3a;
    border-radius: var(--radius-sm, 2px);
    pointer-events: none;
    z-index: 5;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

/* Mobile Responsive for location banner */
@media (max-width: 600px) {
    .location-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .location-banner-left {
        flex-wrap: wrap;
    }
    .location-banner-right {
        justify-content: space-between;
    }
    .city-selector {
        min-width: 100px;
        max-width: 160px;
        font-size: 0.4rem;
        padding: 4px 24px 4px 10px;
    }
}
/* ============================================================
   FIX: Ensure location banner is visible on mobile
   ============================================================ */
@media (max-width: 768px) {
    #locationBanner,
    .location-banner {
        display: flex !important;
        flex-wrap: wrap;
        width: 100%;
        box-sizing: border-box;
    }
    .location-banner-left {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
    .location-banner-right {
        flex: 0 1 auto;
        margin-top: 4px;
    }
    .city-selector {
        min-width: 120px !important;
        max-width: 100% !important;
        flex: 1 1 auto;
    }
}
/* ============================================================
   FIX: Ensure dropdown option text is visible on mobile
   ============================================================ */
@media (max-width: 768px) {
    /* Force option colors with !important to beat native overrides */
    .city-selector option {
        color: #e0ffc0 !important;
        background: #1a2e1e !important;
        -webkit-text-fill-color: #e0ffc0 !important;
        font-size: 0.5rem !important; /* Slightly larger for readability */
        font-family: 'VT323', 'Courier New', monospace !important; /* Reliable fallback */
    }
    /* Also ensure the select itself doesn't override */
    .city-selector {
        color: #e0ffc0 !important;
        background: #0a1410 !important;
    }
}
.search-go-btn {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-green, #00ff88);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 6px;
    transition: color 0.15s ease, transform 0.1s ease;
    line-height: 1;
}

.search-go-btn:hover {
    color: var(--text-primary, #e8f5e9);
}

.search-go-btn:active {
    transform: scale(0.9);
}
/* ============================================================
   ROLE SELECTION OVERLAY – Pixel‑Art
   ============================================================ */

.role-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: roleFadeIn 0.4s ease-out;
}

@keyframes roleFadeIn {
  0%   { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.role-modal {
  background: var(--bg-modal);
  border: 4px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 32px 24px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-modal);
  animation: modalIn 0.3s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

.role-header {
  margin-bottom: 12px;
}

.role-logo {
  font-size: 3rem;
  display: block;
}

.role-title {
  font-family: var(--font-pixel);
  font-size: 1.8rem;
  color: var(--text-gold);
  text-shadow: 4px 4px 0 var(--bg-primary);
  letter-spacing: 6px;
  margin: 4px 0;
}

.role-subtitle {
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--text-secondary);
  letter-spacing: 2px;
}

.role-divider {
  font-size: 1.2rem;
  color: var(--text-muted);
  margin: 16px 0;
  opacity: 0.6;
}

.role-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 8px 0 16px;
}

.role-btn {
  background: var(--bg-card);
  border: 3px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-inset), var(--shadow-pixel);
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  color: var(--text-primary);
  font-family: var(--font-body);
}

.role-btn:hover {
  border-color: var(--border-glow);
  background: var(--btn-primary-bg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-inset), var(--shadow-pixel), var(--shadow-hover);
}

.role-btn:active {
  transform: scale(0.97);
}

.role-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.role-name {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: var(--text-gold);
  display: block;
}

.role-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-secondary);
  display: block;
  margin-top: 2px;
}

.role-footer {
  margin-top: 8px;
}

.role-auth-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.role-signin-btn {
  background: var(--btn-secondary-bg);
  border: 2px solid var(--border-mid);
  color: var(--text-secondary);
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-inset), var(--shadow-pixel);
}

.role-signin-btn:hover {
  border-color: var(--border-glow);
  color: var(--text-primary);
  background: var(--btn-primary-bg);
}

/* Responsive tweaks */
@media (max-width: 480px) {
  .role-modal { padding: 24px 16px; }
  .role-title { font-size: 1.4rem; }
  .role-btn { padding: 12px; gap: 12px; }
  .role-icon { font-size: 1.8rem; }
  .role-name { font-size: 0.6rem; }
}
/* ============================================================
   FIX: Bigger shop name on mobile cards
   ============================================================ */
@media (max-width: 768px) {
    .flower-card-id {
        font-size: 0.4rem !important;
        padding: 4px 6px !important;
    }
}

@media (max-width: 360px) {
    .flower-card-id {
        font-size: 0.4rem !important;
        padding: 3px 4px !important;
    }
}
/* ============================================================
   FIX: Bigger shop name in detail modal on mobile
   ============================================================ */
@media (max-width: 768px) {
    .detail-shop-name {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-top: 8px !important;
        word-break: break-word !important;
    }
}

@media (max-width: 360px) {
    .detail-shop-name {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }
}
/* Prevent shop count from jumping when loading */
#flowerCount,
#shopCount {
    min-width: 24px;
    display: inline-block;
}

/* ============================================================
   MOSSAGE 2.0 - SHOP DETAIL REDESIGN (Pokemon GO Inspired)
   ============================================================ */

/* Override parent modal constraints when modern design is active */
.detail-overlay-modern.modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    background: rgba(0, 0, 0, 0.9) !important;
}

.detail-overlay-modern .modal {
    all: initial !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    animation: none !important;
}

.detail-overlay-modern .modal-close {
    display: none !important;
}

.detail-overlay-modern .modal-view {
    height: 100% !important;
    padding: 0 !important;
}

/* Main overlay - darken background more */
.detail-overlay-modern {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Main container: full screen, flex column */
.detail-modern {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 999 !important;
}

/* ===== TOP SECTION (40%) ===== */
.detail-top-section {
    flex: 0 0 40%;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 16px 20px;
    transition: background 0.5s ease;
}

.detail-top-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, #0f1f14 100%);
    pointer-events: none;
    z-index: 1;
}

/* Like count - top left */
.detail-like-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(10, 20, 16, 0.85);
    border: 2px solid #ff6b8a;
    border-radius: 3px;
    padding: 6px 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: #ff6b8a;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}

.detail-like-badge .heart-icon {
    font-size: 0.8rem;
    line-height: 1;
}

.detail-like-badge .like-count {
    font-size: 0.5rem;
    color: #ff8baa;
}

/* Rank badge - top right */
.detail-rank-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(10, 20, 16, 0.85);
    border: 2px solid #f5c842;
    border-radius: 3px;
    padding: 6px 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    color: #f5c842;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
    cursor: pointer;
    transition: all 0.15s ease;
}

.detail-rank-badge:hover {
    border-color: #00ff88;
    transform: scale(1.05);
}

.detail-rank-badge .rank-emoji {
    font-size: 0.9rem;
    line-height: 1;
}

.detail-rank-badge .rank-name {
    font-size: 0.3rem;
    color: #e8f5e9;
}

/* Close button */
.detail-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    background: rgba(10, 20, 16, 0.7);
    border: 2px solid #2a6a3a;
    color: #a8c8a8;
    width: 36px;
    height: 36px;
    border-radius: 3px;
    font-size: 1rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-family: 'Press Start 2P', monospace;
}

.detail-close-btn:hover {
    border-color: #ff6b6b;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.15);
}

/* Sprite */
.detail-sprite-modern {
    position: relative;
    z-index: 2;
    width: 120px;
    height: 120px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border: 3px solid rgba(42, 106, 58, 0.4);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.1), inset 0 0 20px rgba(0,0,0,0.3);
    animation: spriteFloat 2s ease-in-out infinite;
    overflow: hidden;
}

.detail-sprite-modern .sprite-sheet {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.detail-sprite-modern.closed .sprite-sheet {
    filter: brightness(0.4) saturate(0.3);
    opacity: 0.7;
    animation-play-state: paused;
}

@keyframes spriteFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Shop name */
.detail-shop-name-modern {
    position: relative;
    z-index: 2;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.75rem;
    color: #e8f5e9;
    text-align: center;
    margin-top: 12px;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.7);
    line-height: 1.4;
    max-width: 90%;
}

/* Location */
.detail-location-modern {
    position: relative;
    z-index: 2;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 0.9rem;
    color: #a8c8a8;
    text-align: center;
    margin-top: 4px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
}

/* ===== BOTTOM SECTION (60%) - Card ===== */
.detail-bottom-card {
    flex: 1;
    background: #0f1f14;
    border-top: 3px solid #2a6a3a;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 3;
    animation: cardSlideUp 300ms cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

@keyframes cardSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Tabs */
.detail-tabs {
    display: flex;
    border-bottom: 2px solid #1a4a2a;
    flex-shrink: 0;
}

.detail-tab {
    flex: 1;
    padding: 12px 4px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    color: #6a8a6a;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-tab:hover {
    color: #a8c8a8;
}

.detail-tab.active {
    color: #e8f5e9;
}

.detail-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: #00ff88;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

/* Tab content */
.detail-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: none;
}

.detail-tab-content.active {
    display: block;
    animation: tabFadeIn 200ms ease;
}

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

/* Scrollbar styling */
.detail-tab-content::-webkit-scrollbar {
    width: 4px;
}
.detail-tab-content::-webkit-scrollbar-track {
    background: #0a1a08;
}
.detail-tab-content::-webkit-scrollbar-thumb {
    background: #2a6a3a;
    border-radius: 2px;
}

/* ===== INFO TAB ===== */
.info-call-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: #0a1410;
    border: 2px solid #00ff88;
    border-radius: 4px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: #e8f5e9;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 12px;
    animation: callPulse 2s ease-in-out infinite;
    text-decoration: none;
}

.info-call-btn:hover {
    background: #1a4a2a;
    border-color: #00ff88;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.15);
}

@keyframes callPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.01); opacity: 0.9; }
}

.info-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.info-card-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: #0a1410;
    border: 2px solid #1a4a2a;
    border-radius: 4px;
}

.info-card-item .info-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.3rem;
    color: #6a8a6a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-card-item .info-value {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 0.95rem;
    color: #e8f5e9;
    word-break: break-word;
    line-height: 1.3;
}

.info-card-item .info-value.clickable {
    color: #00ff88;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.15s ease;
}

.info-card-item .info-value.clickable:hover {
    color: #f5c842;
}

.info-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 3px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    border: 1px solid;
}

.info-status-pill.open {
    color: #44ff44;
    background: rgba(0, 255, 0, 0.08);
    border-color: rgba(68, 255, 68, 0.3);
}

.info-status-pill.closed {
    color: #ff4444;
    background: rgba(255, 0, 0, 0.08);
    border-color: rgba(255, 68, 68, 0.3);
}

.info-status-pill .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.info-status-pill.open .status-dot {
    background: #44ff44;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
}

.info-status-pill.closed .status-dot {
    background: #ff4444;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
}

.info-directions-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #0a1410;
    border: 2px solid #2a6a3a;
    border-radius: 4px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: #a8c8a8;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 4px;
}

.info-directions-btn:hover {
    border-color: #00ff88;
    color: #e8f5e9;
    background: #1a4a2a;
    transform: translateY(-2px);
}

/* Owner toggle button */
.info-owner-toggle {
    width: 100%;
    padding: 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid;
    margin-top: 8px;
    text-align: center;
}

.info-owner-toggle.open {
    background: rgba(255,0,0,0.1);
    color: #ff6666;
    border-color: #ff4444;
}

.info-owner-toggle.open:hover {
    background: rgba(255,0,0,0.2);
}

.info-owner-toggle.closed {
    background: rgba(0,255,0,0.05);
    color: #66ff66;
    border-color: #44ff44;
}

.info-owner-toggle.closed:hover {
    background: rgba(0,255,0,0.15);
}

/* Description in info tab */
.info-description {
    margin-top: 10px;
    padding: 10px 14px;
    background: #0a1410;
    border: 2px solid #1a4a2a;
    border-radius: 4px;
}

.info-description .desc-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.3rem;
    color: #6a8a6a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.info-description .desc-text {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 0.95rem;
    color: #a8c8a8;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ===== ITEMS TAB ===== */
.items-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: #a8c8a8;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #1a4a2a;
}

.items-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #0a1410;
    border: 2px solid #1a4a2a;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.item-row:hover {
    border-color: #2a6a3a;
}

.item-emoji {
    font-size: 1.2rem;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.item-name {
    flex: 1;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 1rem;
    color: #e8f5e9;
}

.item-price {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    color: #f5c842;
    flex-shrink: 0;
}

.item-price-na {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.3rem;
    color: #6a8a6a;
    flex-shrink: 0;
}

.items-empty {
    text-align: center;
    padding: 30px 20px;
    color: #6a8a6a;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 1.1rem;
}

.items-empty .empty-emoji {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
}

/* Add item form (owner only) */
.items-add-form {
    margin-top: 12px;
    padding: 12px;
    background: #0a1410;
    border: 2px solid #2a6a3a;
    border-radius: 4px;
}

.items-add-form .add-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    color: #a8c8a8;
    margin-bottom: 8px;
}

.items-add-form .add-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.items-add-form input {
    flex: 1;
    background: #111;
    border: 2px solid #1a4a2a;
    color: #e8f5e9;
    padding: 8px 10px;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 0.9rem;
    border-radius: 3px;
    outline: none;
    min-width: 0;
}

.items-add-form input:focus {
    border-color: #00ff88;
}

.items-add-form input::placeholder {
    color: #4a6a4a;
}

.items-add-form .price-input {
    max-width: 80px;
    text-align: right;
}

.items-add-form .add-item-btn {
    padding: 8px 14px;
    background: #1a4a2a;
    border: 2px solid #2a6a3a;
    color: #e8f5e9;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.items-add-form .add-item-btn:hover {
    background: #2a6a3a;
    border-color: #00ff88;
}

.items-add-form .add-item-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Item count */
.items-count {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.3rem;
    color: #6a8a6a;
    text-align: right;
    margin-bottom: 8px;
}

/* ===== SHARE TAB ===== */
.share-qr-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
}

.share-qr-box {
    width: 180px;
    height: 180px;
    background: #fff;
    padding: 8px;
    border-radius: 4px;
    border: 3px solid #2a6a3a;
    margin-bottom: 8px;
}

.share-qr-box canvas, 
.share-qr-box img {
    width: 100% !important;
    height: 100% !important;
}

.share-url {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 0.7rem;
    color: #6a8a6a;
    word-break: break-all;
    text-align: center;
    margin-bottom: 16px;
}

.share-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #0a1410;
    border: 2px solid #2a6a3a;
    border-radius: 4px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: #a8c8a8;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 8px;
}

.share-btn:hover {
    border-color: #00ff88;
    color: #e8f5e9;
    background: #1a4a2a;
    transform: translateY(-2px);
}

/* ===== REPORT TAB ===== */
.report-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: #ff6666;
    margin-bottom: 12px;
}

.report-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.report-form label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.3rem;
    color: #6a8a6a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.report-form select,
.report-form textarea {
    width: 100%;
    background: #111;
    border: 2px solid #1a4a2a;
    color: #e8f5e9;
    padding: 10px;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 0.9rem;
    border-radius: 3px;
    outline: none;
}

.report-form select:focus,
.report-form textarea:focus {
    border-color: #ff6666;
}

.report-form select {
    cursor: pointer;
}

.report-form select option {
    background: #111;
    color: #e8f5e9;
}

.report-form textarea {
    resize: vertical;
    min-height: 80px;
}

.report-form .char-count {
    text-align: right;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.3rem;
    color: #6a8a6a;
}

.report-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 0, 0, 0.08);
    border: 2px solid #ff4444;
    border-radius: 4px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: #ff6666;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 4px;
}

.report-submit-btn:hover {
    background: rgba(255, 0, 0, 0.15);
    border-color: #ff6666;
    color: #ff8888;
}

.report-submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== CATEGORY ACCENT COLORS ===== */
.cat-medical { background: linear-gradient(180deg, #5a2a2a 0%, #0a1410 100%); }
.cat-grocery { background: linear-gradient(180deg, #2a4a2a 0%, #0a1410 100%); }
.cat-bakery { background: linear-gradient(180deg, #5a3a1a 0%, #0a1410 100%); }
.cat-flower { background: linear-gradient(180deg, #4a2a4a 0%, #0a1410 100%); }
.cat-fish { background: linear-gradient(180deg, #1a3a5a 0%, #0a1410 100%); }
.cat-workshop { background: linear-gradient(180deg, #3a3a1a 0%, #0a1410 100%); }
.cat-restaurant { background: linear-gradient(180deg, #4a2a1a 0%, #0a1410 100%); }
.cat-tea { background: linear-gradient(180deg, #3a2a1a 0%, #0a1410 100%); }
.cat-fastfood { background: linear-gradient(180deg, #5a3a1a 0%, #0a1410 100%); }
.cat-meat { background: linear-gradient(180deg, #3a1a1a 0%, #0a1410 100%); }
.cat-fruit { background: linear-gradient(180deg, #3a3a1a 0%, #0a1410 100%); }
.cat-veg { background: linear-gradient(180deg, #1a3a1a 0%, #0a1410 100%); }
.cat-mobile { background: linear-gradient(180deg, #1a2a3a 0%, #0a1410 100%); }
.cat-pc { background: linear-gradient(180deg, #1a1a3a 0%, #0a1410 100%); }
.cat-electro { background: linear-gradient(180deg, #2a1a3a 0%, #0a1410 100%); }
.cat-fashion { background: linear-gradient(180deg, #3a1a2a 0%, #0a1410 100%); }
.cat-footwear { background: linear-gradient(180deg, #2a1a1a 0%, #0a1410 100%); }
.cat-beauty { background: linear-gradient(180deg, #3a1a3a 0%, #0a1410 100%); }
.cat-book { background: linear-gradient(180deg, #1a2a2a 0%, #0a1410 100%); }
.cat-autoparts { background: linear-gradient(180deg, #2a2a1a 0%, #0a1410 100%); }
.cat-petrol { background: linear-gradient(180deg, #2a2a1a 0%, #0a1410 100%); }
.cat-music { background: linear-gradient(180deg, #2a1a2a 0%, #0a1410 100%); }
.cat-hotel { background: linear-gradient(180deg, #3a2a1a 0%, #0a1410 100%); }
.cat-sports { background: linear-gradient(180deg, #1a2a3a 0%, #0a1410 100%); }
.cat-gym { background: linear-gradient(180deg, #1a2a1a 0%, #0a1410 100%); }
.cat-barber { background: linear-gradient(180deg, #2a2a2a 0%, #0a1410 100%); }
.cat-parlour { background: linear-gradient(180deg, #3a1a2a 0%, #0a1410 100%); }
.cat-bank { background: linear-gradient(180deg, #1a2a3a 0%, #0a1410 100%); }
.cat-post { background: linear-gradient(180deg, #2a2a1a 0%, #0a1410 100%); }
.cat-pet { background: linear-gradient(180deg, #2a3a2a 0%, #0a1410 100%); }
.cat-thrift { background: linear-gradient(180deg, #2a2a2a 0%, #0a1410 100%); }
.cat-general { background: linear-gradient(180deg, #2a3a1a 0%, #0a1410 100%); }
.cat-stationery { background: linear-gradient(180deg, #1a2a3a 0%, #0a1410 100%); }

/* ===== RESPONSIVE ===== */
@media (max-width: 500px) {
    .detail-top-section {
        min-height: 220px;
        padding: 12px 16px;
    }
    
    .detail-sprite-modern {
        width: 90px;
        height: 90px;
    }
    
    .detail-shop-name-modern {
        font-size: 0.55rem;
        margin-top: 8px;
    }
    
    .detail-location-modern {
        font-size: 0.75rem;
    }
    
    .detail-like-badge {
        top: 10px;
        left: 10px;
        padding: 4px 8px;
        font-size: 0.35rem;
    }
    
    .detail-like-badge .like-count {
        font-size: 0.4rem;
    }
    
    .detail-rank-badge {
        top: 10px;
        right: 10px;
        padding: 4px 8px;
        font-size: 0.3rem;
    }
    
    .detail-rank-badge .rank-emoji {
        font-size: 0.7rem;
    }
    
    .detail-rank-badge .rank-name {
        display: none;
    }
    
    .detail-tab {
        font-size: 0.3rem;
        padding: 10px 2px;
    }
    
    .detail-tab-content {
        padding: 12px;
    }
    
    .info-call-btn {
        font-size: 0.4rem;
        padding: 12px;
    }
    
    .info-grid-2col {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .detail-bottom-card {
        border-radius: 16px 16px 0 0;
    }
}

@media (min-width: 768px) {
    .detail-modern {
        max-width: 480px !important;
        margin: 0 auto !important;
        border-left: 3px solid #2a6a3a !important;
        border-right: 3px solid #2a6a3a !important;
        box-shadow: 0 0 60px rgba(0,0,0,0.8) !important;
    }
    
    .detail-top-section {
        min-height: 320px;
    }
    
    .detail-sprite-modern {
        width: 140px;
        height: 140px;
    }
    
    .detail-shop-name-modern {
        font-size: 0.9rem;
    }
}

/* ============================================================
   MOSSAGE 2.0 UI UPGRADE — Fixes 1-5
   ============================================================ */

/* Fix 1: SOS button hidden when detail is open */
body.detail-open .sos-btn,
body.detail-open #sosBtn {
    display: none !important;
}

/* Fix 2: Status pill - single dot only */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 2px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
}

.status-pill.open {
    background: #0a2a0a;
    border: 1px solid #00ff88;
    color: #00ff88;
}

.status-pill.closed {
    background: #2a0a0a;
    border: 1px solid #ff4444;
    color: #ff4444;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Fix 4: WhatsApp button (like Call Now) */
.detail-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #005a20 0%, #003a14 100%);
    border: 2px solid #00ff88;
    border-radius: 2px;
    color: #00ff88;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0,255,136,0.3),
                inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all 0.15s ease;
}

.detail-whatsapp-btn:hover {
    transform: scale(0.98);
    box-shadow: 0 0 25px rgba(0,255,136,0.5);
}

.detail-whatsapp-btn:active {
    transform: scale(0.95);
}

/* Fix 5: Complete color upgrade */

/* Main background */
body {
    background: #0a1410;
}

/* Flower cards */
.flower-card {
    background: linear-gradient(
        180deg,
        #0d1f12 0%,
        #091509 100%
    ) !important;
    border: 1px solid #1a4a2a !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    transition: all 0.2s ease !important;
}

.flower-card:hover {
    border-color: #00ff88 !important;
    box-shadow: 0 0 12px rgba(0,255,136,0.2) !important;
    transform: translateY(-2px);
}

.flower-card.closed {
    border-color: #4a1a1a !important;
    opacity: 0.7;
}

/* Shop name glow */
.detail-shop-name,
.detail-shop-name-modern {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    color: #ffffff !important;
    text-shadow: 2px 2px 0px #00ff88,
                 0 0 20px rgba(0,255,136,0.3) !important;
    text-align: center;
    margin-top: 8px;
}

/* Call Now button upgrade */
.info-call-btn,
.detail-call-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #005a20 0%, #003a14 100%) !important;
    border: 2px solid #00ff88 !important;
    border-radius: 2px !important;
    color: #00ff88 !important;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0,255,136,0.4),
                inset 0 1px 0 rgba(255,255,255,0.1) !important;
    transition: all 0.15s ease;
    margin-bottom: 12px;
}

.info-call-btn:hover,
.detail-call-btn:hover {
    transform: scale(0.98);
    box-shadow: 0 0 25px rgba(0,255,136,0.6) !important;
}

.info-call-btn:active,
.detail-call-btn:active {
    transform: scale(0.95);
}

/* Get Directions button gold style */
.info-directions-btn,
.detail-directions-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #3d2a00 0%, #1a1500 100%) !important;
    border: 2px solid #f5c842 !important;
    border-radius: 2px !important;
    color: #f5c842 !important;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(245,200,66,0.3),
                inset 0 1px 0 rgba(255,255,255,0.05) !important;
    transition: all 0.15s ease;
    margin-top: 4px;
}

.info-directions-btn:hover,
.detail-directions-btn:hover {
    transform: scale(0.98);
    box-shadow: 0 0 25px rgba(245,200,66,0.5) !important;
}

/* Like/Dislike/Saved action row */
.detail-action-row {
    display: flex;
    gap: 8px;
    margin: 8px 0 12px;
    justify-content: center;
}

.detail-action-btn {
    flex: 1;
    max-width: 120px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(0,255,136,0.3);
    background: rgba(0,255,136,0.05);
    border-radius: 2px;
    color: #6a9a7a;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.detail-action-btn.liked {
    border-color: #ff6b8a;
    background: rgba(255,107,138,0.1);
    color: #ff6b8a;
}

.detail-action-btn.disliked {
    border-color: #a08a7a;
    background: rgba(160,138,122,0.1);
    color: #a08a7a;
}

.detail-action-btn.saved {
    border-color: #f5c842;
    background: rgba(245,200,66,0.1);
    color: #f5c842;
}

.detail-action-btn:active {
    transform: scale(0.95);
}

/* Tab bar */
.detail-tabs {
    display: flex;
    gap: 0;
    background: #050f08;
    border-top: 2px solid #1a4a2a;
    margin: 0;
    padding: 0 8px;
}

.detail-tab {
    flex: 1;
    padding: 10px 8px;
    text-align: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: #3a6a4a;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.detail-tab.active {
    color: #00ff88;
    border-bottom: 2px solid #00ff88;
}

.detail-tab:hover {
    color: #6a9a7a;
}

/* Field boxes in INFO tab */
.info-card-item,
.detail-field-box {
    background: rgba(0,255,136,0.03) !important;
    border: 1px solid #1a4a2a !important;
    border-radius: 2px !important;
    padding: 12px !important;
    margin-bottom: 8px;
}

.info-label,
.detail-field-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    color: #3a7a5a;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.info-value,
.detail-field-value {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 0.95rem;
    color: #c8e5d0;
    display: block;
    word-break: break-word;
}

/* Rank badge gold glow */
.detail-rank-badge {
    background: rgba(245,200,66,0.1) !important;
    border: 1px solid #f5c842 !important;
    color: #f5c842 !important;
    padding: 6px 12px !important;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem !important;
    border-radius: 2px !important;
    box-shadow: 0 0 10px rgba(245,200,66,0.2) !important;
    white-space: nowrap;
}

/* Hero stats */
.hero-stats .stat {
    background: linear-gradient(135deg, #0d1f12 0%, #091509 100%) !important;
    border: 1px solid #1a4a2a !important;
    box-shadow: inset 0 1px 0 rgba(0,255,136,0.05) !important;
}

.hero-stats .stat-value {
    color: #00ff88 !important;
    text-shadow: 0 0 10px rgba(0,255,136,0.5) !important;
}

/* Navigation buttons */
.nav-btn.active {
    background: linear-gradient(135deg, #0a2a14 0%, #051509 100%) !important;
    border: 2px solid #00ff88 !important;
    box-shadow: 0 0 10px rgba(0,255,136,0.2) !important;
}

.nav-btn:not(.active) {
    background: #0a150c !important;
    border: 1px solid #1a3a22 !important;
}

/* Description box */
.info-description,
.detail-description-box {
    background: rgba(0,255,136,0.02) !important;
    border: 1px solid #1a4a2a !important;
    border-radius: 2px !important;
    padding: 12px !important;
    margin: 8px 0;
}

.desc-text,
.detail-description-text {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 1rem;
    color: #c8e5d0 !important;
    line-height: 1.6;
}

/* Bottom card */
.detail-bottom-card {
    background: linear-gradient(180deg, #0f1f14 0%, #0a1a0f 100%) !important;
    border-top: 2px solid #2a6a3a !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important;
}

/* Sprite floating animation */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.detail-sprite-container.floating {
    animation: float 2s ease-in-out infinite;
}

/* Items list */
.detail-items-list {
    margin: 8px 0;
}

.detail-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(26,74,42,0.3);
}

.detail-item-row .item-emoji {
    font-size: 1.2rem;
    width: 28px;
    text-align: center;
}

.detail-item-row .item-name {
    flex: 1;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 1rem;
    color: #c8e5d0;
}

.detail-item-row .item-price {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    color: #f5c842;
    margin-right: 8px;
}

.detail-item-row .item-actions {
    display: flex;
    gap: 4px;
}

.detail-item-row .item-actions button {
    background: none;
    border: none;
    color: #6a8a6a;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 6px;
    transition: color 0.15s ease;
}

.detail-item-row .item-actions .edit-btn:hover {
    color: #f5c842;
}

.detail-item-row .item-actions .delete-btn:hover {
    color: #ff6b6b;
}

/* Item add form */
.items-add-form,
.detail-add-item-form {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 2px solid rgba(26,74,42,0.3);
    flex-wrap: wrap;
}

.items-add-form input,
.detail-add-item-form input {
    background: #0a1410;
    border: 2px solid #1a4a2a;
    border-radius: 2px;
    color: #e8f5e9;
    padding: 6px 10px;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 0.9rem;
}

.items-add-form input:focus,
.detail-add-item-form input:focus {
    border-color: #00ff88;
    outline: none;
}

.items-add-form .item-name-input,
.detail-add-item-form .item-name-input {
    flex: 2;
    min-width: 100px;
}

.items-add-form .price-input,
.detail-add-item-form .item-price-input {
    flex: 1;
    min-width: 60px;
    max-width: 80px;
}

.items-add-form .add-item-btn,
.detail-add-item-form .add-btn {
    background: linear-gradient(135deg, #005a20 0%, #003a14 100%);
    border: 2px solid #00ff88;
    border-radius: 2px;
    color: #00ff88;
    padding: 6px 16px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.items-add-form .add-item-btn:hover,
.detail-add-item-form .add-btn:hover {
    transform: scale(0.97);
    box-shadow: 0 0 15px rgba(0,255,136,0.3);
}

.items-add-form .add-item-btn:disabled,
.detail-add-item-form .add-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Empty state */
.items-empty,
.detail-items-empty {
    text-align: center;
    padding: 24px 0;
}

.items-empty .empty-emoji,
.detail-items-empty .empty-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 8px;
}

.items-empty .empty-text,
.detail-items-empty .empty-text {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 1rem;
    color: #6a8a6a;
    line-height: 1.6;
}

/* Share tab */
.share-qr-container,
.detail-share-section {
    text-align: center;
    padding: 12px 0;
}

.share-qr-box,
.detail-share-section .qr-container {
    display: flex;
    justify-content: center;
    margin: 12px auto;
    padding: 16px;
    background: #0a1410;
    border: 2px solid #1a4a2a;
    border-radius: 2px;
    width: 180px;
    height: 180px;
}

.share-url,
.detail-share-section .shop-url {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 0.8rem;
    color: #6a8a6a;
    word-break: break-all;
    margin: 8px 0 12px;
}

.share-btn,
.detail-share-section .share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: #0a1a0f;
    border: 2px solid #1a4a2a;
    border-radius: 2px;
    color: #a8c8a8;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 8px;
}

.share-btn:hover,
.detail-share-section .share-btn:hover {
    border-color: #00ff88;
    color: #e8f5e9;
}

.share-btn:active,
.detail-share-section .share-btn:active {
    transform: scale(0.97);
}

/* Report tab */
.report-title,
.detail-report-section .report-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: #ff6666;
    margin-bottom: 12px;
}

.report-form label,
.detail-report-section .report-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    color: #6a8a6a;
    display: block;
    margin-bottom: 4px;
}

.report-form select,
.report-form textarea,
.detail-report-section select,
.detail-report-section textarea {
    width: 100%;
    background: #0a1410;
    border: 2px solid #1a4a2a;
    border-radius: 2px;
    color: #e8f5e9;
    padding: 8px 10px;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.report-form select:focus,
.report-form textarea:focus,
.detail-report-section select:focus,
.detail-report-section textarea:focus {
    border-color: #ff6b6b;
    outline: none;
}

.report-form textarea,
.detail-report-section textarea {
    resize: vertical;
    min-height: 80px;
}

.report-submit-btn,
.detail-report-section .submit-report-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #3a0a0a 0%, #1a0505 100%);
    border: 2px solid #ff4444;
    border-radius: 2px;
    color: #ff6666;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.report-submit-btn:hover,
.detail-report-section .submit-report-btn:hover {
    transform: scale(0.98);
    box-shadow: 0 0 15px rgba(255,68,68,0.2);
}

.report-submit-btn:disabled,
.detail-report-section .submit-report-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Layout fixes for responsive */
@media (max-width: 500px) {
    .detail-rank-badge .rank-name {
        display: none;
    }
    
    .detail-action-btn {
        font-size: 0.3rem;
        max-width: 90px;
        height: 38px;
    }
    
    .detail-tab {
        font-size: 0.35rem;
        padding: 8px 4px;
    }
    
    .info-call-btn,
    .detail-whatsapp-btn,
    .info-directions-btn {
        font-size: 0.4rem;
        padding: 12px;
    }
}

/* ============================================================
   HOME PAGE UI IMPROVEMENT — Cleaner & More User Friendly
   ============================================================ */

/* Hero section - more compact and polished */
.hero {
    padding: var(--space-md) var(--space-md) var(--space-sm) !important;
    margin-top: var(--space-sm) !important;
}

.hero-title {
    font-size: 1.8rem !important;
    letter-spacing: 6px !important;
    margin-bottom: 4px !important;
}

.hero-title::after {
    font-size: 0.5rem !important;
    top: -4px !important;
    right: -22px !important;
}

.hero-subtitle {
    font-size: 0.95rem !important;
    margin-bottom: var(--space-sm) !important;
    color: #8aa878 !important;
}

.hero-stats {
    gap: 10px !important;
    margin-bottom: var(--space-sm) !important;
}

.hero-stats .stat {
    padding: 6px 16px !important;
    min-width: 70px !important;
    background: linear-gradient(135deg, #0d1f12 0%, #091509 100%) !important;
    border: 1px solid #1a4a2a !important;
    box-shadow: inset 0 1px 0 rgba(0,255,136,0.05) !important;
}

.hero-stats .stat-label {
    font-size: 0.35rem !important;
    margin-bottom: 2px !important;
}

.hero-stats .stat-value {
    font-size: 0.8rem !important;
    color: #00ff88 !important;
    text-shadow: 0 0 10px rgba(0,255,136,0.3) !important;
}

/* Garden grid - cleaner layout */
.garden-container {
    padding: 0 var(--space-md) var(--space-lg) !important;
}

.garden-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 12px !important;
    padding: 14px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 200px !important;
}

/* Flower cards - cleaner, more modern */
.flower-card {
    background: linear-gradient(180deg, #0d1f12 0%, #0a1610 100%) !important;
    border: 1px solid #1a4a2a !important;
    border-radius: 4px !important;
    padding: 10px !important;
    min-height: 150px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    transition: all 0.2s ease !important;
}

.flower-card:hover {
    border-color: #00ff88 !important;
    box-shadow: 0 0 16px rgba(0,255,136,0.15), 0 4px 12px rgba(0,0,0,0.4) !important;
    transform: translateY(-3px) !important;
}

.flower-card:active {
    transform: scale(0.96) !important;
}

.flower-card.closed {
    border-color: #3a1a1a !important;
    opacity: 0.7;
}

/* Card sprite */
.sprite-animated-container {
    width: 72px !important;
    height: 72px !important;
}

/* Category badge - cleaner */
.category-badge {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.7rem !important;
    border-width: 1px !important;
    top: 6px !important;
    left: 6px !important;
    background: rgba(10, 20, 16, 0.85) !important;
}

/* Rank badge small */
.rank-badge-small {
    top: 6px !important;
    right: 6px !important;
    font-size: 0.25rem !important;
    padding: 2px 5px !important;
}

/* Card shop name - more readable */
.flower-card-id {
    font-size: 0.45rem !important;
    padding: 5px 8px !important;
    margin-top: auto !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid rgba(26, 74, 42, 0.4) !important;
    border-bottom: none !important;
    border-radius: 0 0 3px 3px !important;
}

/* Card description tooltip area */
.flower-inner {
    gap: 4px;
}

/* Status badge on cards */
.shop-status-badge {
    font-size: 0.2rem !important;
    padding: 1px 5px !important;
    border-width: 1px !important;
}

/* Empty state - centered */
.empty-state {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center;
}

/* Compact toolbar improvements */
.garden-toolbar-compact {
    max-width: 1200px;
    margin: 0 auto var(--space-sm) !important;
    background: rgba(15, 31, 20, 0.9) !important;
    border: 1px solid #1a4a2a !important;
    border-radius: 4px !important;
    padding: 6px 10px 8px !important;
}

@media (min-width: 768px) {
    .garden-toolbar-compact {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

.toolbar-stats {
    height: 30px !important;
}

.stat-pill {
    padding: 1px 10px !important;
    height: 22px !important;
    font-size: 0.3rem !important;
    border-width: 1px !important;
}

.stat-pill-value {
    font-size: 0.4rem !important;
}

.stat-pill-label {
    font-size: 0.2rem !important;
}

.toolbar-icons {
    height: 54px !important;
}

.icon-btn {
    min-height: 42px !important;
    min-width: 42px !important;
    border-width: 1px !important;
    background: rgba(10, 20, 16, 0.7) !important;
}

.icon-btn .icon-emoji {
    font-size: 1.1rem !important;
}

.icon-btn .icon-label {
    font-size: 0.25rem !important;
}

/* Toolbar search bar */
.search-input-wrap {
    height: 36px !important;
    border-width: 1px !important;
}

.search-input-wrap input {
    font-size: 0.85rem !important;
}

/* Particles - subtle */
.particles {
    opacity: 0.3;
}

/* Welcome guide / onboarding */
.welcome-guide {
    background: linear-gradient(135deg, #0d1f12, #0a1610) !important;
    border: 1px solid #1a4a2a !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .hero-title {
        font-size: 1.3rem !important;
        letter-spacing: 4px !important;
    }
    
    .hero-subtitle {
        font-size: 0.8rem !important;
    }
    
    .hero-stats .stat {
        padding: 4px 12px !important;
        min-width: 60px !important;
    }
    
    .hero-stats .stat-label {
        font-size: 0.3rem !important;
    }
    
    .hero-stats .stat-value {
        font-size: 0.65rem !important;
    }
    
    .garden-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    
    .flower-card {
        padding: 8px !important;
        min-height: 130px !important;
    }
    
    .sprite-animated-container {
        width: 60px !important;
        height: 60px !important;
    }
    
    .flower-card-id {
        font-size: 0.4rem !important;
        padding: 4px 6px !important;
    }
    
    .category-badge {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.6rem !important;
        top: 4px !important;
        left: 4px !important;
    }
    
    .rank-badge-small {
        top: 4px !important;
        right: 4px !important;
        font-size: 0.2rem !important;
        padding: 1px 4px !important;
    }
    
    .garden-toolbar-compact {
        padding: 4px 6px 6px !important;
    }
    
    .toolbar-icons {
        height: 46px !important;
    }
    
    .icon-btn {
        min-height: 36px !important;
        min-width: 36px !important;
    }
    
    .icon-btn .icon-emoji {
        font-size: 0.9rem !important;
    }
    
    .icon-btn .icon-label {
        font-size: 0.2rem !important;
    }
    
    .stat-pill {
        padding: 1px 6px !important;
        height: 18px !important;
        font-size: 0.25rem !important;
    }
    
    .stat-pill-value {
        font-size: 0.35rem !important;
    }
}

/* Hero section particles effect */
@keyframes twinkle {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.6; }
}

/* Scrollbar styling for the page */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0a1410;
}
::-webkit-scrollbar-thumb {
    background: #1a4a2a;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #2a6a3a;
}/* ============================================================
   MOSSAGE NEIGHBOURHOOD - UI REDESIGN V3
   Dark world bg + light card surfaces + green accents only
   where important (Nintendo DS style game menus)
   ============================================================ */

/* ---------- BACKGROUND TEXTURE ---------- */
body {
    background-image:
        linear-gradient(rgba(0, 255, 136, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 136, 0.02) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ---------- HEADER / HERO ---------- */
.hero-title {
    color: #f5c842 !important;
    text-shadow: 0 0 20px rgba(245, 200, 66, 0.4), 4px 4px 0 #0a1410 !important;
}

.hero-title::after {
    color: rgba(245, 200, 66, 0.5);
}

.hero-subtitle {
    color: #c8d8c8 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    font-weight: 400;
}

/* Stat boxes - light panels */
.hero-stats .stat {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

.hero-stats .stat-label {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 8px !important;
}

.hero-stats .stat-value {
    font-size: 1rem;
    text-shadow: 0 0 12px rgba(0, 255, 136, 0.35);
}

/* Shops & Owners = green, Date = gold */
#statPlants,
#statMemories {
    color: #00ff88 !important;
}

#statStarted {
    color: #f5c842 !important;
    text-shadow: 0 0 12px rgba(245, 200, 66, 0.4) !important;
}

/* Stat entrance animation (count-up feel, pure CSS) */
.hero-stats .stat-value {
    animation: statPopIn 0.8s ease-out both;
}
.hero-stats .stat:nth-child(1) .stat-value { animation-delay: 0.05s; }
.hero-stats .stat:nth-child(2) .stat-value { animation-delay: 0.2s; }
.hero-stats .stat:nth-child(3) .stat-value { animation-delay: 0.35s; }

@keyframes statPopIn {
    0%   { opacity: 0; transform: translateY(10px) scale(0.6); }
    60%  { opacity: 1; transform: translateY(-2px) scale(1.06); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- NAV TOOLBAR ---------- */
.garden-toolbar-compact {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px !important;
    padding: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

/* Inactive nav buttons */
.toolbar-icons .icon-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
}

.toolbar-icons .icon-btn:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #e8f5e9 !important;
}

/* Active nav button - solid green, like a selected game menu item */
.toolbar-icons .icon-btn.active {
    background: #00ff88 !important;
    border: 1px solid #00ff88 !important;
    border-radius: 3px !important;
    color: #0a1410 !important;
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.3) !important;
}

.toolbar-icons .icon-btn.active:hover {
    background: #00ff88 !important;
    border-color: #00ff88 !important;
    color: #0a1410 !important;
}

.toolbar-icons .icon-btn.active .icon-emoji,
.toolbar-icons .icon-btn.active .icon-label {
    color: #0a1410 !important;
    text-shadow: none !important;
}

/* Slightly larger labels for readability */
.toolbar-icons .icon-btn .icon-label {
    font-size: 0.3rem !important;
}

/* Search bar - match the light panel theme */
.search-input-wrap {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}

.search-input-wrap input {
    color: #e8f5e9 !important;
}

.search-input-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* ---------- LOCATION / FILTER BAR ---------- */
.location-banner {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    color: #e8f5e9 !important;
    box-shadow: none !important;
}

.location-label {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 9px !important;
}

.city-selector {
    background: rgba(0, 255, 136, 0.08) !important;
    border: 1px solid rgba(0, 255, 136, 0.3) !important;
    color: #00ff88 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}

.city-selector:focus {
    border-color: #00ff88 !important;
    box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.15) !important;
}

.city-selector option {
    background: #111f14 !important;
    color: #e8f5e9 !important;
}

/* ---------- SHOP CARDS - BIG REDESIGN ---------- */
.garden-grid {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* Card container - light surface on dark world */
.flower-card {
    background: #111f14 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    padding: 0 !important;
    min-height: 150px !important;
    touch-action: manipulation;
}

/* Card hover - lift + green ring (desktop) */
.flower-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 255, 136, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Card tap (mobile) */
.flower-card:active {
    transform: scale(0.98) !important;
}

/* Sprite / top area */
.flower-inner {
    background: #0d1a10 !important;
    padding: 16px 16px 0 !important;
    min-height: 140px !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

/* Shop nameplate = bottom info bar */
.flower-card-id {
    background: rgba(255, 255, 255, 0.04) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: none !important;
    padding: 10px 12px !important;
    margin: auto -16px 0 !important;
    width: auto !important;
    color: #e8f5e9 !important;
    font-size: 9px !important;
    letter-spacing: 0.5px !important;
    text-shadow: none !important;
}

/* Category icon - top left circle */
.category-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    box-shadow: none !important;
    top: 6px !important;
    left: 6px !important;
}

/* Rank badge - top right */
.rank-badge-small {
    background: rgba(245, 200, 66, 0.15) !important;
    border: 1px solid rgba(245, 200, 66, 0.4) !important;
    border-radius: 2px !important;
    color: #f5c842 !important;
    padding: 3px 7px !important;
    font-size: 8px !important;
    top: 6px !important;
    right: 6px !important;
    text-shadow: none !important;
}

/* City badge = location pill */
.city-badge {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 9px !important;
    padding: 3px 10px !important;
    text-shadow: none !important;
}

/* ---------- CLOSED STATE ---------- */
/* Dim overlay over the sprite area */
.flower-card.closed .sprite-animated-container {
    position: relative;
}
.flower-card.closed .sprite-animated-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 4;
    pointer-events: none;
}

/* Solid red CLOSED pill */
.shop-status-badge.closed {
    background: #ff4444 !important;
    color: #ffffff !important;
    border: 1px solid #ff4444 !important;
    border-radius: 2px !important;
    padding: 3px 8px !important;
    font-size: 8px !important;
    text-shadow: none !important;
    top: 4px !important;
    left: 4px !important;
    z-index: 6 !important;
    line-height: 1.2;
}

/* ---------- PLAN BADGE (STANDARD) ---------- */
/* Blue text pill - no star icon (wrapper div injected by JS) */
.flower-card > div[style*="inset:0"] > div[style*="#00b450"] {
    background: rgba(100, 100, 255, 0.2) !important;
    border: 1px solid rgba(100, 100, 255, 0.4) !important;
    border-radius: 20px !important;
    padding: 2px 8px !important;
    gap: 0 !important;
    box-shadow: none !important;
}
/* Remove the star icon */
.flower-card > div[style*="inset:0"] > div[style*="#00b450"] > span:first-child {
    display: none !important;
}
/* Just text: STANDARD */
.flower-card > div[style*="inset:0"] > div[style*="#00b450"] > span[style*="color:#00b450"] {
    color: #aaaaff !important;
    font-size: 7px !important;
    letter-spacing: 0.5px !important;
    text-shadow: none !important;
}

/* ---------- PAGE INDICATOR ---------- */
#pageDisplay {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 9px !important;
    padding: 16px !important;
    min-width: 0 !important;
}

/* ---------- EMPTY STATE ---------- */
.empty-state p {
    color: rgba(255, 255, 255, 0.4) !important;
}
.empty-sub {
    color: rgba(255, 255, 255, 0.25) !important;
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: #0a1410;
}
::-webkit-scrollbar-thumb {
    background: #1a4a2a;
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: #00ff88;
}
/* ============================================================
   MOSSAGE NEIGHBOURHOOD - UI REDESIGN V4 "CLASH OF CLANS"
   Warm raised panels, bright gold, high-contrast white text,
   full-screen pages, 3D depth via border-bottom shadows
   ============================================================ */

/* ---------- 1. GLOBAL DESIGN LANGUAGE ---------- */
:root {
    /* Deep forest night - CoC world */
    --bg-primary: #030a04;
    --bg-secondary: #0a1a0e;
    --bg-card: #0f2412;
    --bg-modal: #14281a;
    --bg-panel: #0f2412;

    /* Raised 3D borders */
    --border-light: #3a7a3a;
    --border-mid: #2a5a2a;
    --border-dark: #0a1a0a;
    --border-glow: #00ff88;

    /* High contrast text */
    --text-primary: #ffffff;
    --text-secondary: #c8e5c8;
    --text-muted: rgba(255, 255, 255, 0.4);
    --text-gold: #f5c842;
    --text-green: #00ff88;

    /* CoC buttons */
    --btn-primary-bg: #009944;
    --btn-primary-border: #00ff88;
    --btn-primary-hover: #00b355;
    --btn-secondary-bg: #122812;
    --btn-secondary-border: #2a4a2a;
    --btn-danger-bg: #cc2222;
    --btn-danger-border: #5a2a2a;

    /* Soft rounded - less harsh pixel */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;

    /* Depth shadows */
    --shadow-pixel: 0 4px 0 #061008, 0 8px 20px rgba(0, 0, 0, 0.6);
    --shadow-modal: 0 8px 0 #061008, 0 12px 30px rgba(0, 0, 0, 0.7);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 0 20px rgba(0, 255, 136, 0.2), 0 0 40px rgba(0, 255, 136, 0.05);
}

/* World background - deep gradient + center glow */
body {
    background-color: #061208 !important;
    background-image:
        radial-gradient(ellipse at 50% 30%, rgba(0, 255, 136, 0.04) 0%, transparent 70%),
        linear-gradient(180deg, #0a1f0a 0%, #061208 50%, #030a04 100%) !important;
    background-attachment: fixed, fixed;
    min-height: 100vh;
    color: #ffffff;
}

/* CoC PRIMARY button */
.garden-btn {
    background: linear-gradient(180deg, #00dd66 0%, #009944 100%) !important;
    border: 2px solid #00ff88 !important;
    border-bottom: 3px solid #006630 !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 3px 0 #004420, 0 0 10px rgba(0, 255, 136, 0.3) !important;
}
.garden-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #00ee6a 0%, #00aa4a 100%) !important;
    border-color: #00ff88 !important;
    box-shadow: 0 3px 0 #004420, 0 0 16px rgba(0, 255, 136, 0.45) !important;
}
.garden-btn:active:not(:disabled) {
    transform: translateY(2px) !important;
    box-shadow: 0 1px 0 #004420 !important;
}

/* ---------- 2. HEADER - CoC RESOURCE BAR ---------- */
.hero {
    background: linear-gradient(180deg, #1a3a1a 0%, #122812 100%) !important;
    border: 2px solid #2a5a2a !important;
    border-top-color: #3a7a3a !important;
    border-bottom-color: #0a1a0a !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 0 #061008, 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    padding: 20px 16px 16px !important;
}

.hero-title {
    color: #f5c842 !important;
    font-size: 22px !important;
    letter-spacing: 2px !important;
    text-shadow: 2px 2px 0 #a07800, 0 0 20px rgba(245, 200, 66, 0.5) !important;
    margin-bottom: 6px !important;
}
.hero-title::after {
    color: rgba(245, 200, 66, 0.5);
    top: -4px;
    right: -20px;
    font-size: 0.5rem;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 1px !important;
    margin-bottom: 12px !important;
    font-weight: 400 !important;
}

/* Stats = single CoC resource strip */
.hero-stats {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    margin-bottom: 0 !important;
}

.hero-stats .stat {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 4px 12px !important;
    min-width: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.hero-stats .stat:last-child {
    border-right: none !important;
}

.hero-stats .stat-label {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 8px !important;
    font-family: var(--font-pixel) !important;
    margin-bottom: 0 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
}

.hero-stats .stat-value {
    color: #00ff88 !important;
    font-size: 14px !important;
    font-family: var(--font-pixel) !important;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.35) !important;
    letter-spacing: 0 !important;
}

#statStarted {
    color: #f5c842 !important;
    text-shadow: 0 0 10px rgba(245, 200, 66, 0.4) !important;
}

/* ---------- 3. NAVIGATION - CoC TAB STYLE ---------- */
.garden-toolbar-compact {
    background: linear-gradient(180deg, #1a3a1a 0%, #0f2a0f 100%) !important;
    border: 2px solid #2a5a2a !important;
    border-top-color: #3a7a3a !important;
    border-bottom-color: #0a1a0a !important;
    border-radius: 8px !important;
    padding: 6px !important;
    box-shadow: 0 4px 0 #061008, 0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

.toolbar-icons {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    height: auto !important;
    padding: 0 !important;
}

.toolbar-icons .icon-btn {
    background: linear-gradient(180deg, #152815 0%, #0a1a0a 100%) !important;
    border: 2px solid #1a3a1a !important;
    border-top-color: #2a4a2a !important;
    border-bottom-color: #061008 !important;
    border-radius: 6px !important;
    padding: 10px 4px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4) !important;
    cursor: pointer;
    min-height: 62px !important;
    transition: all 0.1s ease;
}

.toolbar-icons .icon-btn:hover {
    border-color: #2a5a2a !important;
    background: linear-gradient(180deg, #1a3a1a 0%, #0f2a0f 100%) !important;
}

.toolbar-icons .icon-btn .icon-emoji {
    font-size: 20px !important;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.toolbar-icons .icon-btn .icon-label {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 7px !important;
    font-family: var(--font-pixel) !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
}

/* ACTIVE tab = filled green */
.toolbar-icons .icon-btn.active {
    background: linear-gradient(180deg, #00dd66 0%, #009944 100%) !important;
    border: 2px solid #00ff88 !important;
    border-bottom: 3px solid #006630 !important;
    box-shadow: 0 3px 0 #004420, 0 0 10px rgba(0, 255, 136, 0.3) !important;
}

.toolbar-icons .icon-btn.active .icon-emoji,
.toolbar-icons .icon-btn.active .icon-label {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.toolbar-icons .icon-btn.active .icon-emoji {
    filter: none !important;
}

/* Search bar - dark CoC input */
.search-input-wrap {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 2px solid #2a5a2a !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}
.search-input-wrap input {
    color: #e8f5e9 !important;
    font-size: 15px !important;
}
.search-input-wrap input:focus {
    outline: none;
}
.search-input-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 14px !important;
}
.search-go-btn,
.search-close-btn {
    color: rgba(255, 255, 255, 0.5) !important;
}
.search-close-btn:hover {
    color: #00ff88 !important;
}

/* ---------- LOCATION / FILTER BAR ---------- */
.location-banner {
    background: linear-gradient(180deg, #162a18 0%, #0d1f0f 100%) !important;
    border: 2px solid #2a5a2a !important;
    border-top-color: #3a7a3a !important;
    border-bottom-color: #0a1a0a !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 0 #061008 !important;
    padding: 8px 12px !important;
    margin-top: 8px !important;
    color: #e8f5e9 !important;
}

.location-label {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 9px !important;
    font-family: var(--font-mono) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.city-selector {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 2px solid #2a5a2a !important;
    border-radius: 6px !important;
    color: #c8e5c8 !important;
    padding: 4px 8px !important;
    font-family: var(--font-mono) !important;
    font-size: 14px !important;
    box-shadow: none !important;
}
.city-selector:focus {
    border-color: #00ff88 !important;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.2) !important;
}
.city-selector option {
    background: #0d1f0f !important;
    color: #c8e5c8 !important;
}

/* ---------- 4. SHOP CARDS - CoC BUILDING STYLE ---------- */
.garden-grid {
    background-color: rgba(0, 0, 0, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.flower-card {
    background: linear-gradient(180deg, #162a18 0%, #0d1f0f 100%) !important;
    border: 2px solid #2a5a2a !important;
    border-top-color: #3a7a3a !important;
    border-bottom-color: #0a1a0a !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 0 #061008, 0 6px 15px rgba(0, 0, 0, 0.5) !important;
    padding: 0 !important;
    min-height: 172px !important;
    overflow: hidden;
    touch-action: manipulation;
}

.flower-card:hover {
    border-color: #00ff88 !important;
    border-top-color: #00ff88 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 0 #061008, 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 14px rgba(0, 255, 136, 0.25) !important;
    z-index: 10;
}

.flower-card:active {
    transform: scale(0.98) !important;
}

/* Sprite / top area */
.flower-inner {
    background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.05) 0%, transparent 70%) !important;
    padding: 12px !important;
    min-height: 130px !important;
    gap: 8px !important;
}

/* Category icon - top left circle */
.category-badge {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    top: 6px !important;
    left: 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px !important;
    line-height: 1;
}

/* Rank badge - gold coin top right */
.rank-badge-small {
    background: linear-gradient(180deg, #f5c842 0%, #d4a010 100%) !important;
    border: 1px solid #f5d060 !important;
    border-bottom: 2px solid #a07800 !important;
    border-radius: 4px !important;
    color: #3a2000 !important;
    font-size: 7px !important;
    padding: 3px 7px !important;
    box-shadow: 0 2px 0 #806000 !important;
    top: 6px !important;
    right: 6px !important;
    text-shadow: none !important;
    font-family: var(--font-pixel) !important;
    letter-spacing: 0 !important;
}

/* Shop nameplate = bottom info bar */
.flower-card-id {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.4) !important;
    border-bottom: none !important;
    padding: 14px 12px 20px !important;
    margin: auto -16px 0 !important;
    width: auto !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-family: var(--font-pixel) !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
}

/* LOCATION - clean single line, no pill */
.city-badge {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 11px !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    bottom: 4px !important;
    left: 12px !important;
    right: auto !important;
    top: auto !important;
    z-index: 6 !important;
    max-width: 58% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* PLAN BADGE - moves BELOW shop name, inside info bar */
.flower-card > div[style*="inset:0"] > div[style*="#00b450"] {
    /* STANDARD - blue text badge */
    background: rgba(100, 100, 255, 0.15) !important;
    border: 1px solid rgba(100, 100, 255, 0.3) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    position: absolute !important;
    bottom: 4px !important;
    left: auto !important;
    right: 12px !important;
    top: auto !important;
    transform: none !important;
    gap: 3px !important;
    padding: 1px 6px !important;
    pointer-events: none;
}
.flower-card > div[style*="inset:0"] > div[style*="#00b450"] > span:first-child {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 8px !important;
    margin-left: 0 !important;
    display: inline-flex !important; /* re-show star (V3 hid it) - CoC spec shows "⭐ STANDARD" */
}
.flower-card > div[style*="inset:0"] > div[style*="#00b450"] > span[style*="color:#00b450"] {
    color: #aaaaff !important;
    font-size: 7px !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

/* PREMIUM & ELITE - same repositioning, keep their gold/red colors */
.flower-card > div[style*="inset:0"] > div[style*="#d4af37"],
.flower-card > div[style*="inset:0"] > div[style*="#ff4444"] {
    position: absolute !important;
    bottom: 4px !important;
    left: auto !important;
    right: 12px !important;
    top: auto !important;
    transform: none !important;
    pointer-events: none;
}

/* ---------- CLOSED STATE ---------- */
.flower-card.closed::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 4;
    pointer-events: none;
}

.shop-status-badge.closed {
    background: linear-gradient(180deg, #ff4444 0%, #cc2222 100%) !important;
    border: 2px solid #ff6666 !important;
    border-bottom-color: #880000 !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    font-size: 8px !important;
    font-family: var(--font-pixel) !important;
    padding: 3px 8px !important;
    box-shadow: 0 2px 0 #660000 !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 6 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 0 !important;
    line-height: 1.2;
}

/* ---------- 5. FULL-SCREEN PAGES ---------- */
/* Chat mode: hide hero + location bar, chat fills the screen */
body:has(#chatBtn.active) .hero {
    display: none !important;
}
body:has(#chatBtn.active) #locationBanner {
    display: none !important;
}

/* ---------- 6. COMMUNITY CHAT - FULL SCREEN CoC ---------- */
.talks-container {
    background: linear-gradient(180deg, #0d1f0f 0%, #081308 100%) !important;
    border: 2px solid #2a5a2a !important;
    border-radius: 8px !important;
    padding: 0 !important;
    box-shadow: 0 4px 0 #061008, 0 8px 20px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
    height: calc(100vh - 170px) !important;
    min-height: 420px !important;
}

.talks-header {
    background: linear-gradient(180deg, #1a3a1a 0%, #0f2a0f 100%) !important;
    border-bottom: 2px solid #0a2a0a !important;
    color: #f5c842 !important;
    font-size: 12px !important;
    font-family: var(--font-pixel) !important;
    padding: 12px 16px !important;
    text-align: left !important;
    margin-bottom: 0 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

.talks-messages {
    background: rgba(0, 0, 0, 0.3) !important;
    border-left: 2px solid #2a5a2a !important;
    border-right: 2px solid #2a5a2a !important;
    flex: 1;
    overflow-y: auto;
    padding: 12px !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
}

.talk-message {
    max-width: 80% !important;
    gap: 8px !important;
}

.talk-avatar {
    width: 36px !important;
    height: 36px !important;
    border: 2px solid #3a7a3a !important;
    background: #0d1f0f !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Others' messages - dark bubble */
.talk-content {
    background: linear-gradient(135deg, #1a2a1a 0%, #0f1a0f 100%) !important;
    border: 1px solid #2a4a2a !important;
    border-radius: 8px 8px 8px 2px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    padding: 8px 12px !important;
}

/* Own messages - green bubble */
.talk-message.out .talk-content {
    background: linear-gradient(135deg, #1a4a2a 0%, #0f2a18 100%) !important;
    border: 1px solid #2a7a4a !important;
    border-radius: 8px 8px 2px 8px !important;
}

.talk-header {
    font-family: var(--font-pixel) !important;
    font-size: 8px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    margin-bottom: 4px !important;
    gap: 6px !important;
}
.talk-message.out .talk-header {
    color: rgba(255, 255, 255, 0.3) !important;
}
.talk-name {
    color: #00ff88 !important;
    font-size: 8px !important;
    text-decoration: none !important;
}
.talk-name:hover {
    color: #f5c842 !important;
}
.talk-time {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 8px !important;
}
.talk-text {
    font-family: var(--font-mono) !important;
    font-size: 16px !important;
    color: #e8f5e9 !important;
    word-break: break-word;
}

/* Chat input bar */
.talks-input-area {
    background: linear-gradient(180deg, #1a3a1a 0%, #0f2a0f 100%) !important;
    border-top: 2px solid #0a1a0a !important;
    border-bottom: 2px solid #2a5a2a !important;
    padding: 10px !important;
    gap: 8px !important;
    flex-shrink: 0;
}

#talksInput {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 2px solid #1a4a1a !important;
    border-radius: 6px !important;
    color: #e8f5e9 !important;
    font-family: var(--font-mono) !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
    outline: none;
}
#talksInput:focus {
    border-color: #00ff88 !important;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.2) !important;
}
#talksInput::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

#talksSendBtn {
    background: linear-gradient(180deg, #00dd66 0%, #009944 100%) !important;
    border: 2px solid #00ff88 !important;
    border-bottom: 3px solid #006630 !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-family: var(--font-pixel) !important;
    padding: 8px 16px !important;
    min-height: auto !important;
    box-shadow: 0 3px 0 #004420 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#talksSendBtn:hover {
    background: linear-gradient(180deg, #00ee6a 0%, #00aa4a 100%) !important;
    border-color: #00ff88 !important;
}

/* Join CTA panel */
.talks-join-cta {
    background: linear-gradient(180deg, #1a3a1a 0%, #0f2a0f 100%) !important;
    border: 2px solid #2a5a2a !important;
    border-top-color: #3a7a3a !important;
    border-bottom-color: #0a1a0a !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 0 #061008, 0 0 12px rgba(0, 255, 136, 0.1) !important;
    margin: auto;
}
.talks-join-cta p {
    color: #c8e5c8 !important;
    font-size: 16px !important;
}
.talk-empty {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 16px !important;
}

/* ---------- 7. CATEGORY PICKER - CoC CHEST ---------- */
.flower-choices {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
    max-height: 60vh !important;
}

.flower-choice {
    background: linear-gradient(180deg, #1a3a1a 0%, #102510 100%) !important;
    border: 2px solid #2a5a2a !important;
    border-top-color: #3a7a3a !important;
    border-bottom-color: #0a1a0a !important;
    border-radius: 8px !important;
    padding: 10px 6px !important;
    box-shadow: 0 3px 0 #061008 !important;
    gap: 6px !important;
    min-height: 70px !important;
}

.flower-choice:hover {
    transform: translateY(-2px) !important;
    border-color: #00ff88 !important;
    border-top-color: #00ff88 !important;
    background: linear-gradient(180deg, #1a4a2a 0%, #0f2a18 100%) !important;
    box-shadow: 0 5px 0 #061008, 0 0 10px rgba(0, 255, 136, 0.2) !important;
}

.flower-choice:active {
    transform: translateY(2px) !important;
    box-shadow: 0 1px 0 #061008 !important;
}

.flower-choice.selected {
    background: linear-gradient(180deg, #1a4a2a 0%, #0f2a18 100%) !important;
    border-color: #00ff88 !important;
    border-top-color: #00ff88 !important;
    box-shadow: 0 5px 0 #061008, 0 0 12px rgba(0, 255, 136, 0.25) !important;
}

.flower-choice-emoji {
    font-size: 24px !important;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.flower-choice-name {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 7px !important;
    font-family: var(--font-pixel) !important;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0 !important;
}

/* ---------- MODALS - CoC CHEST PANELS ---------- */
.modal-overlay {
    background: rgba(2, 6, 3, 0.8) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.modal {
    background: linear-gradient(180deg, #1a3a1a 0%, #0d200d 100%) !important;
    border: 2px solid #2a6a2a !important;
    border-top-color: #4a9a4a !important;
    border-bottom-color: #0a1a0a !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 0 #061008, 0 12px 30px rgba(0, 0, 0, 0.7) !important;
}

.modal-heading {
    font-size: 0.75rem !important;
    color: #f5c842 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.modal-close {
    background: linear-gradient(180deg, #3a2a1a 0%, #1a0f0a 100%) !important;
    border: 2px solid #5a3a2a !important;
    border-radius: 6px !important;
    color: #f5d0a0 !important;
    box-shadow: 0 2px 0 #2a1a0a !important;
    width: 34px !important;
    height: 34px !important;
}
.modal-close:hover {
    background: linear-gradient(180deg, #ff4444 0%, #cc2222 100%) !important;
    border-color: #ff6666 !important;
    color: #ffffff !important;
}

/* ---------- 8. DROPDOWN MENU - CoC SETTINGS STYLE ---------- */
.user-dropdown {
    background: linear-gradient(180deg, #1e3a1e 0%, #122212 100%) !important;
    border: 2px solid #2a5a2a !important;
    border-top-color: #3a7a3a !important;
    border-bottom-color: #0a1a0a !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 0 #061008, 0 12px 25px rgba(0, 0, 0, 0.7) !important;
    padding: 8px !important;
    min-width: 200px !important;
}

.user-dropdown button {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 12px 16px !important;
    display: flex;
    align-items: center;
    gap: 12px !important;
    color: #c8e5c8 !important;
    font-family: var(--font-mono) !important;
    font-size: 18px !important;
    border-radius: 4px !important;
    text-align: left !important;
    min-height: auto !important;
    cursor: pointer;
}
.user-dropdown button:hover {
    background: rgba(0, 255, 136, 0.08) !important;
    color: #ffffff !important;
}
.user-dropdown .divider {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    height: 1px !important;
    margin: 4px 0 !important;
}

#dropdownLogout {
    color: #ff6666 !important;
}
#dropdownLogout:hover {
    background: rgba(255, 68, 68, 0.1) !important;
    color: #ff8888 !important;
}
#dropdownAbout {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* User avatar button */
#userBtn {
    background: linear-gradient(180deg, #1a3a1a 0%, #0f2a0f 100%) !important;
    border: 2px solid #2a5a2a !important;
    border-top-color: #3a7a3a !important;
    border-bottom-color: #0a1a0a !important;
    border-radius: 6px !important;
    box-shadow: 0 3px 0 #061008, 0 0 10px rgba(0, 255, 136, 0.12) !important;
    min-height: 40px !important;
    min-width: 40px !important;
    font-size: 1rem !important;
    padding: 6px 12px !important;
}
#userBtn:hover {
    border-color: #00ff88 !important;
    box-shadow: 0 3px 0 #061008, 0 0 14px rgba(0, 255, 136, 0.3) !important;
}

/* ---------- MISC POLISH ---------- */
#pageDisplay {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 9px !important;
    font-family: var(--font-pixel) !important;
}

.empty-state .empty-icon {
    color: #f5c842 !important;
    text-shadow: 0 0 14px rgba(245, 200, 66, 0.35);
}
.empty-state p {
    color: rgba(255, 255, 255, 0.4) !important;
}
.empty-sub {
    color: rgba(255, 255, 255, 0.25) !important;
}

.tooltip {
    background: linear-gradient(180deg, #1a3a1a 0%, #0f2a0f 100%) !important;
    border: 2px solid #2a5a2a !important;
    border-top-color: #3a7a3a !important;
    border-bottom-color: #0a1a0a !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 0 #061008, 0 8px 20px rgba(0, 0, 0, 0.6) !important;
}
.tooltip-title {
    color: #f5c842 !important;
}
.tooltip-message {
    color: #c8e5c8 !important;
}
/* ============================================================
   MOSSAGE 2.0 - UI REDESIGN V5 "LIGHT PREMIUM"
   Stardew Valley warmth + Notion clean cards + Google Maps clarity
   Dark green prototype -> bright, premium, professional platform
   ============================================================ */

/* ---------- DESIGN SYSTEM ---------- */
:root {
    /* Warm white world */
    --bg-primary: #F9F9F3;
    --bg-secondary: #F0F2EC;
    --bg-card: #FFFFFF;
    --bg-modal: #FFFFFF;
    --bg-panel: #F5F7F5;

    /* Premium borders */
    --border-light: #4A7A5A;
    --border-mid: #E8EDE8;
    --border-dark: #D5DCD5;
    --border-glow: #4A7A5A;
    --border-glow-dim: rgba(74, 122, 90, 0.2);

    /* High contrast text */
    --text-primary: #1A1A1A;
    --text-secondary: #6A7A6A;
    --text-muted: #9AA8A0;
    --text-gold: #C99600;
    --text-green: #4A7A5A;

    /* Buttons */
    --btn-primary-bg: #4A7A5A;
    --btn-primary-border: #4A7A5A;
    --btn-primary-hover: #3A6A4A;
    --btn-secondary-bg: #FFFFFF;
    --btn-secondary-border: #4A7A5A;
    --btn-danger-bg: #FF6B6B;
    --btn-danger-border: #FF6B6B;

    /* Soft rounded premium */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Soft shadows - no hard pixel */
    --shadow-pixel: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.15);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 6px 24px rgba(74, 122, 90, 0.12);
}

/* Warm white world with subtle pixel texture */
body {
    background-color: #F9F9F3 !important;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(74, 122, 90, 0.02) 23px, rgba(74, 122, 90, 0.02) 24px),
        repeating-linear-gradient(90deg, transparent, transparent 23px, rgba(74, 122, 90, 0.02) 23px, rgba(74, 122, 90, 0.02) 24px) !important;
    background-attachment: fixed !important;
    color: #1A1A1A !important;
    padding-bottom: 78px !important; /* clear bottom nav */
}

.particles {
    opacity: 0.12 !important;
}

/* ---------- BUTTONS - Premium ---------- */
.garden-btn {
    background: linear-gradient(135deg, #4A7A5A 0%, #3A6A4A 100%) !important;
    border: 2px solid #4A7A5A !important;
    border-bottom: 2px solid #3A6A4A !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 2px 8px rgba(74, 122, 90, 0.2) !important;
}
.garden-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #5A8A6A 0%, #4A7A5A 100%) !important;
    border-color: #5A8A6A !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(74, 122, 90, 0.3) !important;
}
.garden-btn:active:not(:disabled) {
    transform: scale(0.97) !important;
    box-shadow: 0 2px 8px rgba(74, 122, 90, 0.2) !important;
}

/* ---------- BOTTOM NAVIGATION ---------- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 190;
    display: flex;
    background: #FFFFFF;
    border-top: 2px solid #E8EDE8;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    padding-bottom: env(safe-area-inset-bottom);
}
.bnav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px 10px;
    background: transparent;
    border: none;
    border-top: 3px solid transparent;
    color: #9AA8A0;
    font-family: var(--font-pixel);
    font-size: 7px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    touch-action: manipulation;
}
.bnav-btn .bnav-icon {
    font-size: 19px;
    line-height: 1;
    filter: grayscale(0.4);
    transition: filter 0.15s ease, transform 0.1s ease;
}
.bnav-btn:active .bnav-icon {
    transform: scale(0.85);
}
.bnav-btn.active {
    color: #4A7A5A;
    border-top-color: #4A7A5A;
    background: rgba(74, 122, 90, 0.06);
}
.bnav-btn.active .bnav-icon {
    filter: none;
}

/* Bottom nav active state follows the existing tab system */
body:has(#chatBtn.active) .bnav-btn[data-nav="chat"] {
    color: #4A7A5A;
    border-top-color: #4A7A5A;
    background: rgba(74, 122, 90, 0.06);
}
body:has(#chatBtn.active) .bnav-btn[data-nav="chat"] .bnav-icon {
    filter: none;
}
body:has(#exploreBtn.active) .bnav-btn[data-nav="explore"] {
    color: #4A7A5A;
    border-top-color: #4A7A5A;
    background: rgba(74, 122, 90, 0.06);
}
body:has(#exploreBtn.active) .bnav-btn[data-nav="explore"] .bnav-icon {
    filter: none;
}

/* ---------- HEADER / HOME ---------- */
.hero {
    background: #FFFFFF !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 20px 16px 16px !important;
    margin-top: 16px !important;
}

.hero-title {
    color: #1A1A1A !important;
    font-size: 1.4rem !important;
    letter-spacing: 3px !important;
    text-shadow: none !important;
    margin-bottom: 4px !important;
}
.hero-title::after {
    color: #C99600 !important;
    top: -6px;
    right: -18px;
    font-size: 0.45rem;
}

.hero-subtitle {
    color: #6A7A6A !important;
    font-size: 14px !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 14px !important;
}

/* Stats = three clean white cards */
.hero-stats {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
}

.hero-stats .stat {
    background: #F5F7F5 !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    border-right: 2px solid #E8EDE8 !important;
    padding: 10px 20px !important;
    min-width: 96px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.hero-stats .stat:last-child {
    border-right: 2px solid #E8EDE8 !important;
}

.hero-stats .stat-label {
    color: #6A7A6A !important;
    font-size: 8px !important;
    font-family: var(--font-pixel) !important;
    margin-bottom: 0 !important;
    white-space: nowrap;
}

.hero-stats .stat-value {
    color: #4A7A5A !important;
    font-size: 15px !important;
    font-family: var(--font-pixel) !important;
    font-weight: bold;
    text-shadow: none !important;
}

#statStarted {
    color: #C99600 !important;
    text-shadow: none !important;
}

/* Hero CTA */
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}
.hero-cta {
    min-height: 44px;
    padding: 10px 24px !important;
    font-size: 0.45rem !important;
}

/* ---------- TOP TOOLBAR (replaced by bottom nav) ---------- */
.toolbar-icons {
    display: none !important;
}
.garden-toolbar-compact {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Search strip */
.toolbar-search.open {
    max-height: 64px !important;
    margin-top: 8px !important;
}
.search-input-wrap {
    background: #FFFFFF !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    height: 44px !important;
}
.search-input-wrap input {
    color: #1A1A1A !important;
    font-size: 16px !important;
}
.search-input-wrap input::placeholder {
    color: #9AA8A0 !important;
    font-size: 15px !important;
}
.search-input-wrap:focus-within {
    border-color: #4A7A5A !important;
    box-shadow: 0 0 0 3px rgba(74, 122, 90, 0.12) !important;
}
.search-go-btn,
.search-close-btn {
    color: #6A7A6A !important;
}
.search-close-btn:hover {
    color: #4A7A5A !important;
}

/* ---------- LOCATION / FILTER BAR ---------- */
.location-banner {
    background: #FFFFFF !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    padding: 8px 12px !important;
    margin-top: 10px !important;
}

.location-label {
    color: #6A7A6A !important;
    font-size: 9px !important;
    font-family: var(--font-mono) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.city-selector {
    background: #F5F7F5 !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 8px !important;
    color: #1A1A1A !important;
    padding: 5px 10px !important;
    font-family: var(--font-mono) !important;
    font-size: 15px !important;
    box-shadow: none !important;
}
.city-selector:focus {
    border-color: #4A7A5A !important;
    box-shadow: 0 0 0 3px rgba(74, 122, 90, 0.12) !important;
}
.city-selector option {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
}

/* ---------- SHOP CARDS - Premium White ---------- */
.garden-grid {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.flower-card {
    background: #FFFFFF !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 0 !important;
    min-height: 160px !important;
    overflow: hidden;
    touch-action: manipulation;
}

.flower-card:hover {
    border-color: #4A7A5A !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
    z-index: 10;
}

.flower-card:active {
    transform: scale(0.97) !important;
}

/* Sprite area - soft green glow */
.flower-inner {
    background: radial-gradient(ellipse at center, rgba(74, 122, 90, 0.05) 0%, transparent 70%) !important;
    padding: 12px !important;
    min-height: 118px !important;
    gap: 8px !important;
}

/* Category icon - clean white circle */
.category-badge {
    background: #FFFFFF !important;
    border: 1px solid #E8EDE8 !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    top: 8px !important;
    left: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px !important;
    line-height: 1;
}

/* Rank badge - soft gold */
.rank-badge-small {
    background: rgba(245, 200, 66, 0.15) !important;
    border: 1px solid rgba(201, 150, 0, 0.4) !important;
    border-bottom: 2px solid rgba(201, 150, 0, 0.3) !important;
    border-radius: 6px !important;
    color: #B8860B !important;
    font-size: 7px !important;
    padding: 3px 7px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    top: 8px !important;
    right: 8px !important;
    text-shadow: none !important;
    font-family: var(--font-pixel) !important;
}

/* Nameplate = info bar */
.flower-card-id {
    background: #FAFBFA !important;
    border-top: 1px solid #E8EDE8 !important;
    border-bottom: none !important;
    padding: 12px 12px 18px !important;
    margin: auto -16px 0 !important;
    width: auto !important;
    color: #1A1A1A !important;
    font-size: 9px !important;
    font-family: var(--font-pixel) !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
}

/* Location - clean grey line */
.city-badge {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: #6A7A6A !important;
    font-size: 11px !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    bottom: 4px !important;
    left: 12px !important;
    right: auto !important;
    top: auto !important;
    z-index: 6 !important;
    max-width: 58% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* PLAN BADGE - soft info blue, below shop name */
.flower-card > div[style*="inset:0"] > div[style*="#00b450"] {
    background: rgba(74, 154, 217, 0.1) !important;
    border: 1px solid rgba(74, 154, 217, 0.3) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    position: absolute !important;
    bottom: 4px !important;
    left: auto !important;
    right: 12px !important;
    top: auto !important;
    transform: none !important;
    gap: 3px !important;
    padding: 1px 7px !important;
    pointer-events: none;
}
.flower-card > div[style*="inset:0"] > div[style*="#00b450"] > span:first-child {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 9px !important;
    margin-left: 0 !important;
    display: inline-flex !important;
}
.flower-card > div[style*="inset:0"] > div[style*="#00b450"] > span[style*="color:#00b450"] {
    color: #2E7DB5 !important;
    font-size: 7px !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

/* PREMIUM & ELITE - reposition, keep their colors */
.flower-card > div[style*="inset:0"] > div[style*="#d4af37"],
.flower-card > div[style*="inset:0"] > div[style*="#ff4444"] {
    position: absolute !important;
    bottom: 4px !important;
    left: auto !important;
    right: 12px !important;
    top: auto !important;
    transform: none !important;
    pointer-events: none;
}

/* ---------- CLOSED STATE - soft light ---------- */
.flower-card.closed::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
    z-index: 4;
    pointer-events: none;
}

.shop-status-badge.closed {
    background: linear-gradient(135deg, #FF6B6B 0%, #E55555 100%) !important;
    border: 2px solid #FF6B6B !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    font-size: 8px !important;
    font-family: var(--font-pixel) !important;
    padding: 4px 9px !important;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3) !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 6 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 0 !important;
    line-height: 1.2;
}

/* ---------- FULL SCREEN PAGES ---------- */
body:has(#chatBtn.active) .hero {
    display: none !important;
}
body:has(#chatBtn.active) #locationBanner {
    display: none !important;
}

/* ---------- COMMUNITY CHAT - Clean Light ---------- */
.talks-container {
    background: #FFFFFF !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden;
    height: calc(100vh - 210px) !important;
    min-height: 400px !important;
}

/* Chat app bar */
.talks-header {
    background: #FFFFFF !important;
    border-bottom: 2px solid #E8EDE8 !important;
    color: #1A1A1A !important;
    font-size: 12px !important;
    font-family: var(--font-pixel) !important;
    padding: 14px 16px !important;
    text-align: left !important;
    margin-bottom: 0 !important;
    letter-spacing: 0.5px !important;
    text-shadow: none !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.app-back {
    background: #F5F7F5 !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 50% !important;
    color: #1A1A1A !important;
    font-size: 14px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    font-family: var(--font-mono) !important;
}
.app-back:hover {
    border-color: #4A7A5A !important;
    color: #4A7A5A !important;
}
.app-back:active {
    transform: scale(0.9);
}

.talks-messages {
    background: #FAFBFA !important;
    border-left: none !important;
    border-right: none !important;
    flex: 1;
    overflow-y: auto;
    padding: 14px !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
}

.talk-message {
    max-width: 80% !important;
    gap: 8px !important;
}

.talk-avatar {
    width: 36px !important;
    height: 36px !important;
    border: 2px solid #E8EDE8 !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* Others - white bubble */
.talk-content {
    background: #FFFFFF !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 12px 12px 12px 4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    padding: 8px 12px !important;
}

/* Own - moss green bubble */
.talk-message.out .talk-content {
    background: linear-gradient(135deg, #4A7A5A 0%, #3A6A4A 100%) !important;
    border: 2px solid #4A7A5A !important;
    border-radius: 12px 12px 4px 12px !important;
}

.talk-header {
    font-family: var(--font-pixel) !important;
    font-size: 8px !important;
    color: #9AA8A0 !important;
    margin-bottom: 4px !important;
    gap: 6px !important;
}
.talk-message.out .talk-header {
    color: rgba(255, 255, 255, 0.7) !important;
}
.talk-name {
    color: #4A7A5A !important;
    font-size: 8px !important;
    text-decoration: none !important;
}
.talk-name:hover {
    color: #2A5A3A !important;
}
.talk-time {
    color: #9AA8A0 !important;
    font-size: 8px !important;
}
.talk-message.out .talk-time {
    color: rgba(255, 255, 255, 0.6) !important;
}
.talk-text {
    font-family: var(--font-mono) !important;
    font-size: 16px !important;
    color: #1A1A1A !important;
    word-break: break-word;
}
.talk-message.out .talk-text {
    color: #FFFFFF !important;
}

/* Chat input bar */
.talks-input-area {
    background: #FFFFFF !important;
    border-top: 2px solid #E8EDE8 !important;
    border-bottom: none !important;
    padding: 12px !important;
    gap: 8px !important;
    flex-shrink: 0;
}

#talksInput {
    background: #F5F7F5 !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 10px !important;
    color: #1A1A1A !important;
    font-family: var(--font-mono) !important;
    font-size: 16px !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
    outline: none;
}
#talksInput:focus {
    border-color: #4A7A5A !important;
    box-shadow: 0 0 0 3px rgba(74, 122, 90, 0.12) !important;
}
#talksInput::placeholder {
    color: #9AA8A0;
}

#talksSendBtn {
    background: linear-gradient(135deg, #4A7A5A 0%, #3A6A4A 100%) !important;
    border: 2px solid #4A7A5A !important;
    border-radius: 10px !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-family: var(--font-pixel) !important;
    padding: 10px 18px !important;
    min-height: auto !important;
    box-shadow: 0 2px 8px rgba(74, 122, 90, 0.25) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#talksSendBtn:hover {
    background: linear-gradient(135deg, #5A8A6A 0%, #4A7A5A 100%) !important;
    border-color: #5A8A6A !important;
}

.talks-join-cta {
    background: #FFFFFF !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    margin: auto;
}
.talks-join-cta p {
    color: #6A7A6A !important;
    font-size: 16px !important;
}
.talk-empty {
    color: #9AA8A0 !important;
    font-size: 16px !important;
}

/* ---------- CATEGORY PICKER - Clean White ---------- */
.flower-choices {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
    max-height: 60vh !important;
}

.flower-choice {
    background: #FFFFFF !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 10px !important;
    padding: 12px 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    gap: 6px !important;
    min-height: 72px !important;
}

.flower-choice:hover {
    transform: translateY(-2px) !important;
    border-color: #4A7A5A !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(74, 122, 90, 0.12) !important;
}

.flower-choice:active {
    transform: scale(0.97) !important;
}

.flower-choice.selected {
    background: rgba(74, 122, 90, 0.06) !important;
    border-color: #4A7A5A !important;
    box-shadow: 0 0 0 2px rgba(74, 122, 90, 0.15) !important;
}

.flower-choice-emoji {
    font-size: 24px !important;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}

.flower-choice-name {
    color: #1A1A1A !important;
    font-size: 7px !important;
    font-family: var(--font-pixel) !important;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0 !important;
}

/* ---------- MODALS = FULL PAGE APP SHELL ---------- */
.modal-overlay {
    background: rgba(26, 26, 26, 0.45) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.modal {
    background: #FFFFFF !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 16px !important;
    animation: modalFade 0.25s ease-out !important;
    color: #1A1A1A;
}

/* App bar heading - sticks to top while scrolling */
.modal-heading {
    position: sticky !important;
    top: -16px !important;
    background: #FFFFFF !important;
    padding: 18px 56px !important;
    margin: -16px -16px 14px !important;
    border-bottom: 2px solid #E8EDE8 !important;
    z-index: 5 !important;
    color: #1A1A1A !important;
    font-size: 0.65rem !important;
    text-shadow: none !important;
    letter-spacing: 1px !important;
}

/* Back arrow button - sticks top-left */
.modal-close {
    position: sticky !important;
    float: left !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    margin: 0 0 -34px 0 !important;
    z-index: 7 !important;
    background: #F5F7F5 !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 50% !important;
    color: #1A1A1A !important;
    width: 34px !important;
    height: 34px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    font-size: 15px !important;
}
.modal-close:hover {
    background: #FFFFFF !important;
    border-color: #4A7A5A !important;
    color: #4A7A5A !important;
}

/* Mobile = true full-screen page */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 0 !important;
        align-items: stretch !important;
    }
    .modal {
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* ---------- DROPDOWN MENU - Clean White ---------- */
.user-dropdown {
    background: #FFFFFF !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 6px !important;
    min-width: 210px !important;
}

.user-dropdown button {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 12px 16px !important;
    display: flex;
    align-items: center;
    gap: 12px !important;
    color: #1A1A1A !important;
    font-family: var(--font-mono) !important;
    font-size: 17px !important;
    border-radius: 8px !important;
    text-align: left !important;
    min-height: auto !important;
    cursor: pointer;
}
.user-dropdown button:hover {
    background: rgba(74, 122, 90, 0.06) !important;
    color: #4A7A5A !important;
}
.user-dropdown .divider {
    background: rgba(0, 0, 0, 0.06) !important;
    border: none !important;
    height: 1px !important;
    margin: 4px 0 !important;
}

#dropdownLogout {
    color: #D64545 !important;
}
#dropdownLogout:hover {
    background: rgba(255, 107, 107, 0.08) !important;
    color: #D64545 !important;
}
#dropdownAbout {
    color: #6A7A6A !important;
}

/* User avatar button - circular */
#userBtn {
    background: #FFFFFF !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    min-height: 44px !important;
    min-width: 44px !important;
    font-size: 1.1rem !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
#userBtn:hover {
    border-color: #4A7A5A !important;
    box-shadow: 0 2px 12px rgba(74, 122, 90, 0.2) !important;
}

/* ---------- MISC POLISH ---------- */
#pageDisplay {
    color: #9AA8A0 !important;
    font-size: 9px !important;
    font-family: var(--font-pixel) !important;
}

.empty-state {
    background: #F5F7F5 !important;
    border-radius: 12px !important;
    border: 2px dashed #D5DCD5 !important;
}
.empty-state .empty-icon {
    color: #4A7A5A !important;
    text-shadow: none;
}
.empty-state p {
    color: #1A1A1A !important;
}
.empty-sub {
    color: #6A7A6A !important;
}

.tooltip {
    background: #FFFFFF !important;
    border: 2px solid #E8EDE8 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}
.tooltip-title {
    color: #1A1A1A !important;
}
.tooltip-message {
    color: #6A7A6A !important;
}

/* Scrollbar - light */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: #F9F9F3;
}
::-webkit-scrollbar-thumb {
    background: #D5DCD5;
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: #4A7A5A;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 480px) {
    .hero-title { font-size: 1rem !important; letter-spacing: 2px !important; }
    .hero-stats { gap: 8px !important; }
    .hero-stats .stat { min-width: 0 !important; flex: 1; }
    .flower-choices { grid-template-columns: repeat(3, 1fr) !important; }
    .bnav-btn { font-size: 6px; }
    .bnav-btn .bnav-icon { font-size: 17px; }
    .talks-container { height: calc(100vh - 200px) !important; }
    .talk-message { max-width: 88% !important; }
}

/* ---------- ANIMATIONS ---------- */
@keyframes modalFade {
    0%   { opacity: 0; transform: scale(0.96) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes pageIn {
    0%   { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes badgeGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(245, 200, 66, 0.2); }
    50%      { box-shadow: 0 0 16px rgba(245, 200, 66, 0.45); }
}

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

@keyframes slideUp {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes heartPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Detail modal content - readable on white */
.flower-detail-modal,
.rank-modal,
.qr-modal,
.about-modal {
    background: #F9F9F3 !important;
}
/* ============================================================
   MOSSAGE 2.0 - UI REDESIGN V6 "CLASH OF CLANS PREMIUM"
   Game-inspired depth: layered panels, wood/leather frames,
   cream paper content, gold + moss accents, pixel identity.
   (Supersedes V5 flat-white direction)
   ============================================================ */

:root {
    /* --- CoC world --- */
    --coc-bg-top: #0C2414;
    --coc-bg-mid: #07160C;
    --coc-bg-bot: #040B06;
    --coc-wood: #3B2A1A;
    --coc-wood-dark: #241809;
    --coc-wood-light: #5A4430;
    --coc-cream: #F2E8CD;
    --coc-cream-2: #E8DDBE;
    --coc-cream-3: #F7F0DD;
    --coc-gold: #F5C842;
    --coc-gold-dark: #C99600;
    --coc-gold-deep: #7A5200;
    --coc-moss: #3E8E4A;
    --coc-moss-bright: #4ADE80;
    --coc-moss-dark: #1E5A2A;
    --coc-leather: #1B2E18;
    --coc-leather-2: #12240F;
    --coc-text: #2A2015;
    --coc-text-muted: #6E5F43;
    --coc-danger: #E5553F;
    --coc-cream-text: #F2E8CD;
    --coc-muted-text: #A9A68A;
    --coc-hard-shadow: 0 5px 0 rgba(0,0,0,0.5);
    --coc-bevel: inset 0 2px 0 rgba(255,255,255,0.28), inset 0 -2px 0 rgba(0,0,0,0.25);
}

/* ---------- WORLD: deep mossy forest + glow + vignette ---------- */
/* V7.29 — body carries NO scrollable background at all. The whole
   visual lives in fixed layers (#bg-fixed base, body::before forest,
   .bg-scene life). background-attachment: fixed is NOT relied on
   (broken on iOS Safari / some Android), so nothing here can shift
   with the scroll — zero parallax glitch on any browser. */
body {
    background: none !important;
    background-color: #07160C !important;
    background-attachment: fixed !important;
    color: #F2E8CD !important;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
}

/* soft pixel grid over the world */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(74,222,128,0.035) 23px, rgba(74,222,128,0.035) 24px),
        repeating-linear-gradient(90deg, transparent, transparent 23px, rgba(74,222,128,0.035) 23px, rgba(74,222,128,0.035) 24px);
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9), transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9), transparent 80%);
}

.particles {
    opacity: 0.35 !important;
    z-index: 1 !important;
}
.particles span, .particles div {
    box-shadow: 0 0 6px rgba(74,222,128,0.8);
}

.garden-container {
    position: relative;
    z-index: 2;
}

/* ---------- PREMIUM BUTTONS ---------- */
.garden-btn {
    background: linear-gradient(180deg, #4AA85A 0%, #2E7A3A 60%, #1E5A2A 100%) !important;
    border: 2px solid #8ED08A !important;
    border-radius: 10px !important;
    color: #FFFFFF !important;
    font-family: var(--font-pixel) !important;
    text-shadow: 1px 2px 0 rgba(0,0,0,0.45) !important;
    box-shadow: 0 4px 0 #12301A, 0 8px 18px rgba(0,0,0,0.35), inset 0 2px 0 rgba(255,255,255,0.25) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease !important;
    letter-spacing: 0.5px;
}
.garden-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #5CC96C 0%, #3E8E4A 60%, #2E7A3A 100%) !important;
    filter: brightness(1.05);
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 0 #12301A, 0 12px 24px rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.3) !important;
}
.garden-btn:active:not(:disabled) {
    transform: translateY(3px) !important;
    box-shadow: 0 1px 0 #12301A, 0 4px 10px rgba(0,0,0,0.3) !important;
}

/* ---------- BOTTOM NAV: CoC tab bar ---------- */
.bottom-nav {
    background: linear-gradient(180deg, #2A1D0F 0%, #1C1207 100%) !important;
    border-top: 2px solid #5A4430 !important;
    box-shadow: 0 -4px 0 rgba(0,0,0,0.6), 0 -10px 30px rgba(0,0,0,0.5) !important;
    padding-top: 4px !important;
}
.bnav-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    color: #A9A68A !important;
    position: relative;
    transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease !important;
}
.bnav-btn .bnav-icon {
    filter: grayscale(0.6) brightness(0.9);
}
.bnav-btn:active .bnav-icon {
    transform: scale(0.85);
}
.bnav-btn.active,
body:has(#chatBtn.active) .bnav-btn[data-nav="chat"],
body:has(#exploreBtn.active) .bnav-btn[data-nav="home"] {
    color: #F5C842 !important;
    background: linear-gradient(180deg, rgba(245,200,66,0.16) 0%, rgba(245,200,66,0.05) 100%) !important;
    border-top: 3px solid #F5C842 !important;
    text-shadow: 0 0 12px rgba(245,200,66,0.6);
}
.bnav-btn.active .bnav-icon,
body:has(#chatBtn.active) .bnav-btn[data-nav="chat"] .bnav-icon,
body:has(#exploreBtn.active) .bnav-btn[data-nav="home"] .bnav-icon {
    filter: none;
}
.bnav-btn::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: transparent;
}
.bnav-btn.active::after,
body:has(#chatBtn.active) .bnav-btn[data-nav="chat"]::after,
body:has(#exploreBtn.active) .bnav-btn[data-nav="home"]::after {
    background: #F5C842;
    box-shadow: 0 0 10px rgba(245,200,66,0.8);
}

/* ---------- HERO: CoC wood banner ---------- */
.hero {
    background:
        linear-gradient(180deg, rgba(245,200,66,0.08) 0%, transparent 30%),
        linear-gradient(180deg, #2A1D0F 0%, #1C1207 100%) !important;
    border: 3px solid #5A4430 !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 0 rgba(0,0,0,0.55), 0 18px 40px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.12) !important;
    padding: 18px 16px 20px !important;
    margin-top: 16px !important;
    position: relative;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px solid rgba(245,200,66,0.22);
    border-radius: 10px;
    pointer-events: none;
    z-index: 0;
}

.hero-title {
    color: #F5C842 !important;
    font-size: 1.5rem !important;
    letter-spacing: 4px !important;
    text-shadow: 2px 3px 0 #7A5200, 0 0 24px rgba(245,200,66,0.45) !important;
    position: relative;
    z-index: 1;
    margin-bottom: 6px !important;
}
.hero-title::after {
    color: #FFFFFF !important;
    font-size: 0.5rem !important;
    right: -22px;
    top: -8px;
    text-shadow: 1px 1px 0 #7A5200 !important;
}

.hero-subtitle {
    color: #C9C2A4 !important;
    font-family: var(--font-mono) !important;
    font-size: 15px !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.6) !important;
    margin-bottom: 16px !important;
    position: relative;
    z-index: 1;
}

/* Stats = CoC resource cards */
.hero-stats {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
    position: relative;
    z-index: 1;
}
.hero-stats .stat {
    background: linear-gradient(180deg, #1F3320 0%, #142315 100%) !important;
    border: 2px solid #5A7A4A !important;
    border-radius: 10px !important;
    border-right: 2px solid #5A7A4A !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.1) !important;
    padding: 10px 18px !important;
    min-width: 96px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.hero-stats .stat:last-child {
    border-right: 2px solid #5A7A4A !important;
}
.hero-stats .stat-label {
    color: #A9A68A !important;
    font-size: 8px !important;
    font-family: var(--font-pixel) !important;
    white-space: nowrap;
}
.hero-stats .stat-value {
    color: #4ADE80 !important;
    font-size: 16px !important;
    font-family: var(--font-pixel) !important;
    text-shadow: 0 2px 0 rgba(0,0,0,0.5) !important;
}
#statStarted {
    color: #F5C842 !important;
    text-shadow: 0 2px 0 rgba(0,0,0,0.5) !important;
}

/* Hero CTA */
.hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}
.hero-cta {
    min-height: 46px;
    padding: 12px 26px !important;
    font-size: 0.5rem !important;
    background: linear-gradient(180deg, #F5C842 0%, #D9A323 60%, #B8860B 100%) !important;
    border: 2px solid #FFE9A8 !important;
    color: #3A2400 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35) !important;
    box-shadow: 0 4px 0 #6B4A00, 0 10px 20px rgba(0,0,0,0.4) !important;
}
.hero-cta:hover {
    background: linear-gradient(180deg, #FFD966 0%, #F5C842 60%, #D9A323 100%) !important;
}

/* ---------- TOP TOOLBAR (hidden; nav = bottom) ---------- */
.toolbar-icons {
    display: none !important;
}
.garden-toolbar-compact {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Search strip - CoC field */
.toolbar-search.open {
    max-height: 66px !important;
    margin-top: 10px !important;
}
.search-input-wrap {
    background: #141F10 !important;
    border: 2px solid #5A7A4A !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.5), inset 0 2px 6px rgba(0,0,0,0.5) !important;
    height: 46px !important;
}
.search-input-wrap input {
    color: #F2E8CD !important;
    font-size: 17px !important;
    font-family: var(--font-mono) !important;
}
.search-input-wrap input::placeholder {
    color: #6E7A5E !important;
}
.search-input-wrap:focus-within {
    border-color: #F5C842 !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.5), 0 0 0 3px rgba(245,200,66,0.2) !important;
}
.search-go-btn, .search-close-btn {
    color: #A9A68A !important;
    background: transparent !important;
}
.search-go-btn:hover, .search-close-btn:hover {
    color: #F5C842 !important;
}

/* ---------- LOCATION BANNER ---------- */
.location-banner {
    background: linear-gradient(180deg, #1F3320 0%, #142315 100%) !important;
    border: 2px solid #5A7A4A !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.5) !important;
    padding: 8px 12px !important;
    margin-top: 12px !important;
}
.location-label {
    color: #A9A68A !important;
    font-family: var(--font-mono) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 9px !important;
}
.city-selector {
    background: #0E180C !important;
    border: 2px solid #5A7A4A !important;
    border-radius: 8px !important;
    color: #F2E8CD !important;
    font-family: var(--font-mono) !important;
    font-size: 15px !important;
    padding: 5px 10px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5) !important;
}
.city-selector:focus {
    border-color: #F5C842 !important;
}
.city-selector option {
    background: #0E180C !important;
    color: #F2E8CD !important;
}

/* ---------- SHOP CARDS: CoC building tiles ---------- */
.garden-grid {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    gap: 14px !important;
}

.flower-card {
    background: linear-gradient(180deg, #4A3824 0%, #332413 100%) !important;
    border: 2px solid #6B5438 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 0 rgba(0,0,0,0.5), 0 12px 24px rgba(0,0,0,0.35), inset 0 2px 0 rgba(255,255,255,0.15) !important;
    padding: 5px !important;
    min-height: 172px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.flower-card:hover {
    transform: translateY(-5px) !important;
    border-color: #F5C842 !important;
    box-shadow: 0 8px 0 rgba(0,0,0,0.5), 0 20px 40px rgba(0,0,0,0.45), 0 0 24px rgba(245,200,66,0.15), inset 0 2px 0 rgba(255,255,255,0.2) !important;
}
.flower-card:active {
    transform: translateY(2px) scale(0.98) !important;
}

/* sprite area - cream paper with glow */
.flower-inner {
    background:
        radial-gradient(ellipse at 50% 55%, rgba(74,222,128,0.16) 0%, transparent 65%),
        linear-gradient(180deg, #F7F0DD 0%, #EADFC0 100%) !important;
    border-radius: 9px !important;
    border: 2px solid #6B5438 !important;
    padding: 10px !important;
    min-height: 124px !important;
    gap: 8px !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), inset 0 -3px 0 rgba(0,0,0,0.12) !important;
}

/* category badge - gold coin */
.category-badge {
    background: radial-gradient(circle at 30% 25%, #FFE9A8 0%, #F5C842 55%, #C99600 100%) !important;
    border: 2px solid #7A5200 !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.5) !important;
    top: 10px !important;
    left: 10px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
    line-height: 1;
}

/* rank badge - emerald gem */
.rank-badge-small {
    background: linear-gradient(180deg, #4ADE80 0%, #2E9A4A 60%, #1E6A30 100%) !important;
    border: 2px solid #B0F0C0 !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    font-size: 7px !important;
    padding: 4px 8px !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.3) !important;
    top: 10px !important;
    right: 10px !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5) !important;
    font-family: var(--font-pixel) !important;
    display: flex !important;
    align-items: center;
    gap: 3px;
}

/* nameplate - dark wood strip */
.flower-card-id {
    background: linear-gradient(180deg, #1E2E18 0%, #14230F 100%) !important;
    border-top: 2px solid #6B5438 !important;
    border-bottom: none !important;
    border-radius: 0 0 9px 9px !important;
    padding: 10px 12px 14px !important;
    margin: 0 !important;
    width: auto !important;
    color: #F5C842 !important;
    font-size: 8px !important;
    font-family: var(--font-pixel) !important;
    letter-spacing: 0.5px !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.6) !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
}

/* location - muted cream line on wood */
.city-badge {
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid rgba(245,200,66,0.25) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    box-shadow: none !important;
    color: #D8D2B8 !important;
    font-size: 11px !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    bottom: 5px !important;
    left: 14px !important;
    right: auto !important;
    top: auto !important;
    z-index: 6 !important;
    max-width: 54% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* PLAN BADGES - gems at bottom right of nameplate */
.flower-card > div[style*="inset:0"] > div[style*="#00b450"] {
    background: linear-gradient(180deg, rgba(74,154,217,0.25) 0%, rgba(30,80,140,0.35) 100%) !important;
    border: 1px solid #6AB0E8 !important;
    border-radius: 7px !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.4) !important;
    position: absolute !important;
    bottom: 5px !important;
    left: auto !important;
    right: 14px !important;
    top: auto !important;
    transform: none !important;
    gap: 3px !important;
    padding: 1px 8px !important;
    pointer-events: none;
}
.flower-card > div[style*="inset:0"] > div[style*="#00b450"] > span:first-child {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 9px !important;
    display: inline-flex !important;
}
.flower-card > div[style*="inset:0"] > div[style*="#00b450"] > span[style*="color:#00b450"] {
    color: #A8D8F8 !important;
    font-size: 7px !important;
    letter-spacing: 0 !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5) !important;
}
.flower-card > div[style*="inset:0"] > div[style*="#d4af37"],
.flower-card > div[style*="inset:0"] > div[style*="#ff4444"] {
    position: absolute !important;
    bottom: 5px !important;
    left: auto !important;
    right: 14px !important;
    top: auto !important;
    transform: none !important;
    pointer-events: none;
    border-radius: 7px !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.4) !important;
}

/* ---------- CLOSED STATE ---------- */
.flower-card.closed::before {
    content: '';
    position: absolute;
    inset: 5px;
    background: rgba(6,10,6,0.45);
    border-radius: 10px;
    z-index: 4;
    pointer-events: none;
}
.shop-status-badge.closed {
    background: linear-gradient(180deg, #FF6B5A 0%, #D93A28 100%) !important;
    border: 2px solid #FFB0A0 !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    font-size: 8px !important;
    font-family: var(--font-pixel) !important;
    padding: 5px 10px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.5), 0 0 16px rgba(255,80,60,0.4) !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 6 !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    letter-spacing: 0.5px !important;
}

/* ---------- FULL-SCREEN PAGES ---------- */
body:has(#chatBtn.active) .hero { display: none !important; }
body:has(#chatBtn.active) #locationBanner { display: none !important; }

/* ---------- COMMUNITY CHAT ---------- */
.talks-container {
    background: linear-gradient(180deg, #2A1D0F 0%, #1C1207 100%) !important;
    border: 3px solid #5A4430 !important;
    border-radius: 16px !important;
    padding: 5px !important;
    box-shadow: 0 6px 0 rgba(0,0,0,0.55), 0 18px 40px rgba(0,0,0,0.5) !important;
    overflow: hidden;
    height: calc(100vh - 215px) !important;
    min-height: 420px !important;
}

/* gold app bar */
.talks-header {
    background: linear-gradient(180deg, #F5C842 0%, #D9A323 60%, #B8860B 100%) !important;
    border-bottom: 3px solid #6B4A00 !important;
    border-radius: 12px 12px 0 0 !important;
    color: #3A2400 !important;
    font-size: 11px !important;
    font-family: var(--font-pixel) !important;
    padding: 13px 16px !important;
    text-align: left !important;
    margin-bottom: 0 !important;
    letter-spacing: 1px !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.app-back {
    background: linear-gradient(180deg, #3A2A18 0%, #241809 100%) !important;
    border: 2px solid #8A6E48 !important;
    border-radius: 50% !important;
    color: #F5C842 !important;
    font-size: 14px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.15) !important;
}
.app-back:hover {
    border-color: #F5C842 !important;
    color: #FFFFFF !important;
}
.app-back:active { transform: scale(0.9); }

.talks-messages {
    background: linear-gradient(180deg, #F2E8CD 0%, #EADFC0 100%) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px !important;
    gap: 12px !important;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.talk-message { max-width: 82% !important; gap: 8px !important; }
.talk-avatar {
    width: 38px !important;
    height: 38px !important;
    border: 2px solid #6B5438 !important;
    background: linear-gradient(180deg, #F7F0DD, #E0D3AC) !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.35) !important;
}
.talk-content {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5EEDC 100%) !important;
    border: 2px solid #B8A87E !important;
    border-radius: 12px 12px 12px 4px !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.25), inset 0 2px 0 rgba(255,255,255,0.7) !important;
    padding: 9px 13px !important;
}
.talk-message.out .talk-content {
    background: linear-gradient(180deg, #4AA85A 0%, #2E7A3A 60%, #1E5A2A 100%) !important;
    border: 2px solid #8ED08A !important;
    border-radius: 12px 12px 4px 12px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.35) !important;
}
.talk-header { color: #8A7A55 !important; font-size: 8px !important; font-family: var(--font-pixel) !important; margin-bottom: 4px !important; gap: 6px !important; }
.talk-message.out .talk-header { color: rgba(255,255,255,0.75) !important; }
.talk-name { color: #2E6A3A !important; font-size: 8px !important; text-decoration: none !important; }
.talk-name:hover { color: #1E5A2A !important; text-decoration: underline; }
.talk-time { color: #A39B80 !important; font-size: 8px !important; }
.talk-message.out .talk-time { color: rgba(255,255,255,0.65) !important; }
.talk-text { font-family: var(--font-mono) !important; font-size: 16px !important; color: #2A2015 !important; word-break: break-word; }
.talk-message.out .talk-text { color: #FFFFFF !important; text-shadow: 0 1px 0 rgba(0,0,0,0.3); }

.talks-input-area {
    background: linear-gradient(180deg, #241809 0%, #1C1207 100%) !important;
    border-top: 2px solid #5A4430 !important;
    border-radius: 0 0 12px 12px !important;
    padding: 12px !important;
    gap: 8px !important;
    flex-shrink: 0;
}
#talksInput {
    background: #0E180C !important;
    border: 2px solid #5A7A4A !important;
    border-radius: 10px !important;
    color: #F2E8CD !important;
    font-family: var(--font-mono) !important;
    font-size: 16px !important;
    padding: 10px 14px !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5) !important;
    outline: none;
}
#talksInput:focus { border-color: #F5C842 !important; }
#talksInput::placeholder { color: #6E7A5E; }
#talksSendBtn {
    background: linear-gradient(180deg, #4AA85A 0%, #2E7A3A 60%, #1E5A2A 100%) !important;
    border: 2px solid #8ED08A !important;
    border-radius: 10px !important;
    color: #FFFFFF !important;
    font-size: 9px !important;
    font-family: var(--font-pixel) !important;
    padding: 12px 18px !important;
    min-height: auto !important;
    box-shadow: 0 3px 0 #12301A, inset 0 2px 0 rgba(255,255,255,0.2) !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}
#talksSendBtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #12301A !important; }

.talks-join-cta {
    background: linear-gradient(180deg, #F7F0DD 0%, #E8DDBE 100%) !important;
    border: 3px solid #5A4430 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 0 rgba(0,0,0,0.45) !important;
}
.talks-join-cta p { color: #2A2015 !important; font-size: 16px !important; }
.talk-empty { color: #8A7A55 !important; font-size: 16px !important; }

/* ---------- CATEGORY PICKER: CoC treasure chest ---------- */
.flower-choices {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
    max-height: 62vh !important;
}
.flower-choice {
    background: linear-gradient(180deg, #4A3824 0%, #2E2014 100%) !important;
    border: 2px solid #6B5438 !important;
    border-radius: 12px !important;
    padding: 12px 6px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.15) !important;
    gap: 6px !important;
    min-height: 74px !important;
    transition: transform 0.12s ease, border-color 0.12s ease !important;
}
.flower-choice:hover {
    transform: translateY(-3px) !important;
    border-color: #F5C842 !important;
    box-shadow: 0 6px 0 rgba(0,0,0,0.5), 0 0 20px rgba(245,200,66,0.2), inset 0 2px 0 rgba(255,255,255,0.2) !important;
}
.flower-choice:active {
    transform: translateY(2px) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.5) !important;
}
.flower-choice.selected {
    border-color: #4ADE80 !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.5), 0 0 0 3px rgba(74,222,128,0.25) !important;
    background: linear-gradient(180deg, #1E5A2A 0%, #14321A 100%) !important;
}
.flower-choice-emoji { font-size: 24px !important; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4)); }
.flower-choice-name { color: #F2E8CD !important; font-size: 7px !important; font-family: var(--font-pixel) !important; text-align: center; line-height: 1.3; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); }

/* ---------- MODALS: wood frame + cream paper ---------- */
.modal-overlay {
    background: rgba(4, 8, 4, 0.72) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal {
    background:
        linear-gradient(180deg, rgba(245,200,66,0.05) 0%, transparent 25%),
        linear-gradient(180deg, #F7F0DD 0%, #EADFC0 100%) !important;
    border: 3px solid #5A4430 !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 0 rgba(0,0,0,0.55), 0 20px 50px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,255,255,0.4) !important;
    padding: 14px !important;
    animation: modalFade 0.25s ease-out !important;
    color: #2A2015;
}

/* gold app bar heading */
.modal-heading {
    position: sticky !important;
    top: -14px !important;
    background: linear-gradient(180deg, #F5C842 0%, #D9A323 60%, #B8860B 100%) !important;
    padding: 16px 56px !important;
    margin: -14px -14px 14px !important;
    border-bottom: 3px solid #6B4A00 !important;
    border-radius: 12px 12px 0 0 !important;
    z-index: 5 !important;
    color: #3A2400 !important;
    font-size: 0.65rem !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35) !important;
    letter-spacing: 1px !important;
}

/* back arrow - gold coin */
.modal-close {
    position: sticky !important;
    float: left !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    margin: 0 0 -36px 0 !important;
    z-index: 7 !important;
    background: radial-gradient(circle at 30% 25%, #FFE9A8 0%, #F5C842 55%, #C99600 100%) !important;
    border: 2px solid #7A5200 !important;
    border-radius: 50% !important;
    color: #3A2400 !important;
    width: 36px !important;
    height: 36px !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.5) !important;
    font-size: 15px !important;
}
.modal-close:hover {
    filter: brightness(1.1);
    border-color: #FFE9A8 !important;
}

/* mobile = full-screen page */
@media (max-width: 768px) {
    .modal-overlay { padding: 0 !important; align-items: stretch !important; }
    .modal {
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .modal-heading { border-radius: 0 !important; }
}

/* form fields inside modals */
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="tel"],
.modal textarea,
.modal select {
    background: #FFFFFF !important;
    border: 2px solid #B8A87E !important;
    border-radius: 8px !important;
    color: #2A2015 !important;
    font-family: var(--font-mono) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.08) !important;
}
.modal input:focus, .modal textarea:focus, .modal select:focus {
    border-color: #2E7A3A !important;
    box-shadow: 0 0 0 3px rgba(62,142,74,0.2) !important;
}

/* ---------- DROPDOWN: leather settings panel ---------- */
.user-dropdown {
    background: linear-gradient(180deg, #2A1D0F 0%, #1C1207 100%) !important;
    border: 3px solid #5A4430 !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 0 rgba(0,0,0,0.55), 0 20px 50px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,255,255,0.1) !important;
    padding: 6px !important;
    min-width: 220px !important;
}
.user-dropdown button {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(245,200,66,0.12) !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center;
    gap: 12px !important;
    color: #F2E8CD !important;
    font-family: var(--font-mono) !important;
    font-size: 17px !important;
    border-radius: 8px !important;
    text-align: left !important;
    min-height: auto !important;
    cursor: pointer;
}
.user-dropdown button:hover {
    background: rgba(245,200,66,0.12) !important;
    color: #F5C842 !important;
}
.user-dropdown .divider {
    background: rgba(245,200,66,0.2) !important;
    border: none !important;
    height: 2px !important;
    margin: 4px 0 !important;
}
#dropdownLogout { color: #FF8A70 !important; }
#dropdownLogout:hover { background: rgba(229,85,63,0.15) !important; color: #FFB0A0 !important; }
#dropdownAbout { color: #A9A68A !important; }
/* Profile removed from menu (moved to bottom nav) */
#dropdownProfile { display: none !important; }

#userBtn {
    background: linear-gradient(180deg, #4AA85A 0%, #2E7A3A 60%, #1E5A2A 100%) !important;
    border: 2px solid #8ED08A !important;
    border-radius: 50% !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.25) !important;
    min-height: 46px !important;
    min-width: 46px !important;
    font-size: 1.2rem !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#userBtn:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 0 rgba(0,0,0,0.5), 0 0 20px rgba(74,222,128,0.35) !important;
}

/* ---------- PROFILE PAGE (V6) ---------- */
.profile-v6 { max-width: 520px !important; }

.p6-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(180deg, #1E3320 0%, #122612 100%) !important;
    border: 2px solid #5A7A4A !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.08) !important;
    padding: 14px;
    margin-bottom: 12px;
}
.p6-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.p6-avatar-wrap .profile-avatar-container {
    width: 74px !important;
    height: 74px !important;
    border: 3px solid #F5C842 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 18px rgba(245,200,66,0.3), 0 3px 0 rgba(0,0,0,0.5) !important;
    background: linear-gradient(180deg, #F7F0DD, #D8C89C) !important;
    overflow: hidden;
}
.p6-avatar-wrap .profile-avatar-container img { width: 100%; height: 100%; object-fit: cover; }
.p6-avatar-wrap #changeAvatarBtn { font-size: 0.4rem !important; padding: 5px 8px !important; min-height: 0 !important; }
.p6-id { flex: 1; min-width: 0; }
.p6-id h2 {
    font-family: var(--font-pixel) !important;
    font-size: 0.9rem !important;
    color: #F5C842 !important;
    text-shadow: 1px 2px 0 rgba(0,0,0,0.6) !important;
    margin: 0 0 10px 0;
    word-break: break-word;
}
.p6-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.p6-toggle span {
    font-family: var(--font-pixel) !important;
    font-size: 0.42rem !important;
    color: #C9C2A4 !important;
}
.p6-toggle input {
    accent-color: #4ADE80 !important;
    width: 20px !important;
    height: 20px !important;
}

.p6-section-title {
    font-family: var(--font-pixel) !important;
    font-size: 0.48rem !important;
    color: #6E5F43 !important;
    letter-spacing: 2px !important;
    margin: 14px 2px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.p6-section-title::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(110,95,67,0.4), transparent);
}

/* trophy stat cards */
.p6-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.p6-stat {
    background: linear-gradient(180deg, #FCF7E8 0%, #F0E5C6 100%) !important;
    border: 2px solid #B8A87E !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.25), inset 0 2px 0 rgba(255,255,255,0.8) !important;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}
.p6-stat::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 12px;
    right: 12px;
    height: 4px;
    border-radius: 4px;
}
.p6-t1::before { background: linear-gradient(90deg, #C99600, #F5C842); }
.p6-t2::before { background: linear-gradient(90deg, #8E8E9A, #C9C9D4); }
.p6-t3::before { background: linear-gradient(90deg, #B8860B, #FFD966); }
.p6-t4::before { background: linear-gradient(90deg, #2E7A3A, #4ADE80); }
.p6-stat-icon { font-size: 20px; line-height: 1; }
.p6-stat-value {
    font-family: var(--font-pixel) !important;
    font-size: 0.8rem !important;
    color: #2A2015 !important;
    word-break: break-word;
    text-align: center;
    max-width: 100%;
}
.p6-stat-label {
    font-family: var(--font-pixel) !important;
    font-size: 0.4rem !important;
    color: #6E5F43 !important;
}

/* recent activity log */
.p6-activity {
    background: linear-gradient(180deg, #FCF7E8 0%, #F0E5C6 100%) !important;
    border: 2px solid #B8A87E !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.25), inset 0 2px 0 rgba(255,255,255,0.8) !important;
    overflow: hidden;
}
.p6-act-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(110,95,67,0.18);
    cursor: pointer;
    transition: background 0.12s ease;
}
.p6-act-row:last-child { border-bottom: none; }
.p6-act-row:hover { background: rgba(245,200,66,0.12); }
.p6-act-icon { font-size: 16px; }
.p6-act-text {
    flex: 1;
    font-family: var(--font-mono) !important;
    font-size: 16px !important;
    color: #2A2015 !important;
}
.p6-act-arrow { color: #B8860B !important; font-size: 18px; }
.p6-cta { width: 100% !important; font-size: 0.5rem !important; padding: 14px !important; margin-top: 14px !important; }

/* ---------- RANK PAGE: premium panels ---------- */
.rank-modal {
    background:
        radial-gradient(ellipse at 50% -5%, rgba(245,200,66,0.12) 0%, transparent 55%),
        linear-gradient(180deg, #1E3320 0%, #0F1F12 100%) !important;
    border: 3px solid #5A7A4A !important;
    box-shadow: 0 6px 0 rgba(0,0,0,0.55), 0 20px 50px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,255,255,0.08) !important;
    color: #F2E8CD;
}
.rank-modal .modal-heading {
    border-radius: 12px 12px 0 0 !important;
}

/* header block (badge/name/level/rank) */
#rankModalContent > div[style*="border-bottom:2px solid #0f2a1a"] {
    border-bottom: 2px solid rgba(245,200,66,0.3) !important;
    padding-bottom: 20px !important;
    margin-bottom: 18px !important;
}
#rankModalContent > div[style*="border-bottom:2px solid #0f2a1a"] img {
    width: 96px !important;
    height: 96px !important;
    filter: drop-shadow(0 0 18px rgba(245,200,66,0.35));
}
#rankModalContent > div[style*="border-bottom:2px solid #0f2a1a"] div[style*="font-size:0.65rem"] {
    font-size: 0.9rem !important;
    color: #F5C842 !important;
    text-shadow: 1px 2px 0 rgba(0,0,0,0.6) !important;
    margin-top: 6px !important;
}
#rankModalContent > div[style*="border-bottom:2px solid #0f2a1a"] div[style*="font-size:0.4rem"],
#rankModalContent > div[style*="border-bottom:2px solid #0f2a1a"] div[style*="font-size:0.45rem"] {
    font-size: 0.5rem !important;
    color: #C9C2A4 !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5) !important;
    margin-top: 5px !important;
}
#rankModalContent > div[style*="border-bottom:2px solid #0f2a1a"] div[style*="color:#d4af37"] {
    color: #FFD966 !important;
}

/* points formula box */
#rankModalContent > div[style*="background:#0a1410"] {
    background: linear-gradient(180deg, #162A18 0%, #0E1C10 100%) !important;
    border: 2px solid #3E6A44 !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.06) !important;
    padding: 10px 14px !important;
    margin: 10px 0 !important;
}
#rankModalContent > div[style*="background:#0a1410"] div {
    font-size: 0.42rem !important;
    color: #A9A68A !important;
}
#rankModalContent > div[style*="background:#0a1410"] span[style*="color:#f5c842"] {
    color: #F5C842 !important;
    font-size: 0.5rem !important;
}

/* progress bar */
#rankModalContent > div[style*="box-shadow:inset 2px 2px"] {
    background: linear-gradient(180deg, #162A18 0%, #0E1C10 100%) !important;
    border: 2px solid #3E6A44 !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.06) !important;
    padding: 12px 14px !important;
    margin: 12px 0 !important;
}
#rankModalContent > div[style*="box-shadow:inset 2px 2px"] > div:first-child {
    height: 18px !important;
    background: #0A140C !important;
    border: 1px solid #2A4A30 !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}
#rankModalContent > div[style*="box-shadow:inset 2px 2px"] > div:first-child > div {
    background: linear-gradient(90deg, #2E9A4A 0%, #4ADE80 60%, #F5C842 100%) !important;
    box-shadow: 0 0 14px rgba(74,222,128,0.5);
}
#rankModalContent > div[style*="box-shadow:inset 2px 2px"] > div:nth-child(2) span {
    font-size: 0.4rem !important;
    color: #C9C2A4 !important;
}

/* stat cards (likes/dislikes/points) */
#rankModalContent > div[style*="grid-template-columns:1fr 1fr 1fr"] {
    gap: 10px !important;
    margin: 14px 0 !important;
}
#rankModalContent > div[style*="grid-template-columns:1fr 1fr 1fr"] > div {
    background: linear-gradient(180deg, #1F3320 0%, #142315 100%) !important;
    border: 2px solid #3E6A44 !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.07) !important;
    padding: 12px 8px !important;
}
#rankModalContent > div[style*="grid-template-columns:1fr 1fr 1fr"] > div > div:first-child {
    font-size: 0.85rem !important;
    text-shadow: 0 2px 0 rgba(0,0,0,0.5) !important;
}
#rankModalContent > div[style*="grid-template-columns:1fr 1fr 1fr"] > div > div:nth-child(2) {
    font-size: 0.4rem !important;
    color: #A9A68A !important;
}

/* description / reward box */
#rankModalContent > div[style*="background:rgba(20,32,16,0.5)"] {
    background: linear-gradient(180deg, #1F3320 0%, #142315 100%) !important;
    border: 2px solid #3E6A44 !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.4) !important;
    padding: 12px 14px !important;
    margin: 12px 0 !important;
}
#rankModalContent > div[style*="background:rgba(20,32,16,0.5)"] div {
    font-size: 0.45rem !important;
    line-height: 1.6 !important;
    color: #C9C2A4 !important;
}

/* next rank box (gold trim) */
#rankModalContent > div[style*="background:rgba(20,32,16,0.5)"][style*="padding:8px"] {
    border-color: rgba(245,200,66,0.45) !important;
}
#rankModalContent > div[style*="background:rgba(20,32,16,0.5)"][style*="padding:8px"] div,
#rankModalContent > div[style*="background:rgba(20,32,16,0.5)"][style*="padding:8px"] span {
    font-size: 0.42rem !important;
    line-height: 1.7 !important;
    color: #F2E8CD !important;
}
#rankModalContent span[style*="color:#f5c842"] {
    color: #F5C842 !important;
}

/* ============================================================
   SHOP DETAILS - PREMIUM PAGE (replaces old UI look)
   ============================================================ */
.detail-modern {
    z-index: 999 !important;
}

/* --- top banner: keep per-category gradient, add gold trim --- */
.detail-top-section {
    flex: 0 0 38% !important;
    min-height: 270px !important;
    padding: 18px 20px !important;
    position: relative;
}
.detail-top-section::before {
    background: linear-gradient(180deg, transparent 55%, rgba(10,20,12,0.75) 100%) !important;
}
.detail-top-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(180deg, #F5C842, #B8860B);
    box-shadow: 0 -2px 8px rgba(245,200,66,0.3);
    z-index: 4;
}

/* close button - gold coin */
.detail-modern button[style*="background: rgba(10, 20, 16, 0.7)"] {
    background: radial-gradient(circle at 30% 25%, #FFE9A8 0%, #F5C842 55%, #C99600 100%) !important;
    border: 2px solid #7A5200 !important;
    border-radius: 50% !important;
    color: #3A2400 !important;
    width: 38px !important;
    height: 38px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.5) !important;
    font-size: 1rem !important;
}
.detail-modern button[style*="background: rgba(10, 20, 16, 0.7)"]:hover {
    border-color: #FFE9A8 !important;
    color: #3A2400 !important;
    background: radial-gradient(circle at 30% 25%, #FFE9A8 0%, #FFD966 55%, #D9A323 100%) !important;
}

/* rank badge - emerald gem */
.detail-rank-badge {
    background: linear-gradient(180deg, #4ADE80 0%, #2E9A4A 60%, #1E6A30 100%) !important;
    border: 2px solid #B0F0C0 !important;
    border-radius: 10px !important;
    padding: 7px 12px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.3) !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5) !important;
}
.detail-rank-badge:hover {
    border-color: #F5C842 !important;
    transform: scale(1.06);
}
.detail-rank-badge .rank-emoji { font-size: 0.9rem !important; }
.detail-rank-badge .rank-name { color: #FFFFFF !important; font-size: 0.32rem !important; }

/* sprite - premium wood frame */
.detail-top-section div[style*="width: 120px"] {
    border: 4px solid #6B5438 !important;
    border-radius: 10px !important;
    background:
        radial-gradient(ellipse at 50% 60%, rgba(245,200,66,0.18) 0%, transparent 70%),
        rgba(10,18,12,0.55) !important;
    box-shadow: 0 6px 0 rgba(0,0,0,0.5), 0 0 34px rgba(74,222,128,0.3), inset 0 0 20px rgba(0,0,0,0.4) !important;
}

/* shop name - gold */
.detail-top-section div[style*="font-family: 'Press Start 2P'"],
.detail-modern div[style*="font-family: 'Press Start 2P', monospace"] {
    color: #F5C842 !important;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.8), 0 0 18px rgba(245,200,66,0.25) !important;
    font-size: 0.85rem !important;
}
/* location - cream */
.detail-top-section div[style*="font-family: 'VT323'"] {
    color: #E8E2C8 !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.8) !important;
    font-size: 1rem !important;
}

/* action buttons (like/dislike/save) - CoC buttons */
.detail-top-section div[style*="max-width: 320px"] > button {
    border-radius: 9px !important;
    border-width: 2px !important;
    padding: 8px 6px !important;
    font-size: 0.32rem !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.5) !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(2px);
}
.detail-top-section div[style*="max-width: 320px"] > button:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
}

/* --- bottom card: cream paper panel --- */
.detail-bottom-card {
    background:
        linear-gradient(180deg, rgba(245,200,66,0.05) 0%, transparent 20%),
        linear-gradient(180deg, #F7F0DD 0%, #EADFC0 100%) !important;
    border-top: 4px solid #6B5438 !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.5) !important;
}

/* tab bar - wood strip */
.detail-tabs {
    background: linear-gradient(180deg, #2A1D0F 0%, #1C1207 100%) !important;
    border-bottom: 3px solid #5A4430 !important;
    padding: 6px 8px !important;
    gap: 6px !important;
}
.detail-tab {
    background: linear-gradient(180deg, #3A2A18 0%, #241809 100%) !important;
    border: 2px solid #6B5438 !important;
    border-radius: 8px !important;
    color: #C9C2A4 !important;
    font-size: 0.32rem !important;
    font-family: var(--font-pixel) !important;
    padding: 8px 10px !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.4) !important;
}
.detail-tab:hover {
    border-color: #F5C842 !important;
    color: #F5C842 !important;
}
.detail-tab.active {
    background: linear-gradient(180deg, #F5C842 0%, #D9A323 60%, #B8860B 100%) !important;
    border-color: #FFE9A8 !important;
    color: #3A2400 !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.35) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3) !important;
}
.detail-tab.active::after { display: none !important; }

/* tab content - cream paper */
.detail-tab-content {
    background: transparent !important;
    padding: 16px !important;
    gap: 12px !important;
}
.detail-tab-content.active { display: flex !important; flex-direction: column; }

/* INFO tab */
.info-call-btn {
    background: linear-gradient(180deg, #4AA85A 0%, #2E7A3A 60%, #1E5A2A 100%) !important;
    border: 2px solid #8ED08A !important;
    border-radius: 10px !important;
    color: #FFFFFF !important;
    font-family: var(--font-pixel) !important;
    font-size: 0.4rem !important;
    padding: 12px !important;
    box-shadow: 0 3px 0 #12301A, inset 0 2px 0 rgba(255,255,255,0.2) !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4) !important;
}
.info-call-btn:hover { filter: brightness(1.1); }

.info-grid-2col { gap: 10px !important; }

.info-card-item {
    background: linear-gradient(180deg, #FCF7E8 0%, #F0E5C6 100%) !important;
    border: 2px solid #B8A87E !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,0.8) !important;
    padding: 10px 12px !important;
}
.info-card-item .info-label {
    font-family: var(--font-pixel) !important;
    font-size: 0.35rem !important;
    color: #6E5F43 !important;
}
.info-card-item .info-value {
    font-family: var(--font-mono) !important;
    font-size: 15px !important;
    color: #2A2015 !important;
}
.info-card-item .info-value.clickable { color: #2E6A3A !important; }

.info-status-pill {
    border-radius: 8px !important;
    padding: 4px 9px !important;
    font-family: var(--font-pixel) !important;
    font-size: 0.35rem !important;
}
.info-status-pill.open {
    background: linear-gradient(180deg, #2E9A4A, #1E6A30) !important;
    border: 2px solid #8ED08A !important;
    color: #FFFFFF !important;
}
.info-status-pill.closed {
    background: linear-gradient(180deg, #FF6B5A, #D93A28) !important;
    border: 2px solid #FFB0A0 !important;
    color: #FFFFFF !important;
}
.info-status-pill .status-dot { box-shadow: 0 0 6px rgba(255,255,255,0.8); }

.info-description {
    background: linear-gradient(180deg, #FCF7E8 0%, #F0E5C6 100%) !important;
    border: 2px solid #B8A87E !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.2) !important;
    padding: 12px !important;
}
.info-description .desc-label {
    font-family: var(--font-pixel) !important;
    font-size: 0.38rem !important;
    color: #6E5F43 !important;
    margin-bottom: 6px;
}
.info-description .desc-text {
    font-family: var(--font-mono) !important;
    font-size: 16px !important;
    color: #2A2015 !important;
    line-height: 1.5;
}
.info-description button {
    color: #2E6A3A !important;
    font-size: 0.35rem !important;
}

.info-directions-btn {
    background: linear-gradient(180deg, #F5C842 0%, #D9A323 60%, #B8860B 100%) !important;
    border: 2px solid #FFE9A8 !important;
    border-radius: 10px !important;
    color: #3A2400 !important;
    font-family: var(--font-pixel) !important;
    font-size: 0.4rem !important;
    padding: 13px !important;
    box-shadow: 0 3px 0 #6B4A00, inset 0 2px 0 rgba(255,255,255,0.4) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3) !important;
}
.info-directions-btn:hover { filter: brightness(1.08); }

.info-owner-toggle { border-radius: 10px !important; font-family: var(--font-pixel) !important; font-size: 0.4rem !important; padding: 13px !important; box-shadow: 0 3px 0 rgba(0,0,0,0.4) !important; }
.info-owner-toggle.open { background: linear-gradient(180deg, #FF6B5A, #D93A28) !important; border: 2px solid #FFB0A0 !important; color: #FFF !important; }
.info-owner-toggle.closed { background: linear-gradient(180deg, #2E9A4A, #1E6A30) !important; border: 2px solid #8ED08A !important; color: #FFF !important; }

/* listed-by + date (inline styled) */
.detail-tab-content div[style*="color:#6a8a6a"] {
    color: #8A7A55 !important;
    font-size: 0.38rem !important;
}
.detail-tab-content div[style*="border-top:1px solid #1a4a2a"] {
    border-top: 1px solid rgba(110,95,67,0.3) !important;
    padding-top: 10px !important;
    margin-top: 8px !important;
    color: #8A7A55 !important;
}

/* ITEMS tab */
.items-title {
    font-family: var(--font-pixel) !important;
    font-size: 0.45rem !important;
    color: #6E5F43 !important;
}
.items-count { color: #8A7A55 !important; font-size: 0.4rem !important; font-family: var(--font-pixel) !important; }
.items-empty {
    background: linear-gradient(180deg, #FCF7E8, #F0E5C6) !important;
    border: 2px dashed #B8A87E !important;
    border-radius: 10px !important;
    color: #6E5F43 !important;
    font-family: var(--font-mono) !important;
    font-size: 15px !important;
    padding: 20px !important;
}
.item-row {
    background: linear-gradient(180deg, #FCF7E8 0%, #F0E5C6 100%) !important;
    border: 2px solid #B8A87E !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.18) !important;
    padding: 9px 12px !important;
    display: flex !important;
    align-items: center;
    gap: 10px !important;
}
.item-row:hover { border-color: #2E7A3A !important; }
.item-row > span[style*="color:#e8f5e9"] {
    color: #2A2015 !important;
    font-size: 1.05rem !important;
    flex: 1;
}
.item-row > span[style*="color:#f5c842"] {
    color: #B8860B !important;
    font-size: 0.42rem !important;
}
.item-row > span[style*="color:#6a8a6a"] {
    color: #8A7A55 !important;
    font-size: 0.38rem !important;
}
.item-row button {
    background: linear-gradient(180deg, #3A2A18, #241809) !important;
    border: 2px solid #6B5438 !important;
    border-radius: 8px !important;
    color: #F5C842 !important;
}
.item-row button:hover { border-color: #F5C842 !important; }

/* item edit inputs */
.item-row input {
    background: #FFFFFF !important;
    border: 2px solid #2E7A3A !important;
    border-radius: 8px !important;
    color: #2A2015 !important;
    font-family: var(--font-mono) !important;
    font-size: 15px !important;
    padding: 7px 9px !important;
}

.items-add-form {
    background: linear-gradient(180deg, #FCF7E8, #F0E5C6) !important;
    border: 2px dashed #B8A87E !important;
    border-radius: 10px !important;
    padding: 12px !important;
}
.items-add-form input {
    background: #FFFFFF !important;
    border: 2px solid #B8A87E !important;
    border-radius: 8px !important;
    color: #2A2015 !important;
}
.items-add-form button {
    background: linear-gradient(180deg, #4AA85A 0%, #2E7A3A 60%, #1E5A2A 100%) !important;
    border: 2px solid #8ED08A !important;
    border-radius: 8px !important;
    color: #FFF !important;
    font-family: var(--font-pixel) !important;
    font-size: 0.35rem !important;
    padding: 9px 14px !important;
    box-shadow: 0 2px 0 #12301A !important;
}

/* SHARE tab */
.share-qr-container { gap: 12px !important; }
.share-qr-box {
    background: linear-gradient(180deg, #FCF7E8, #F0E5C6) !important;
    border: 3px solid #6B5438 !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.3) !important;
    padding: 12px !important;
}
.share-url {
    background: #FFFFFF !important;
    border: 2px solid #B8A87E !important;
    border-radius: 8px !important;
    color: #2A2015 !important;
    font-family: var(--font-mono) !important;
    font-size: 14px !important;
    padding: 10px !important;
}
.share-btn {
    background: linear-gradient(180deg, #F5C842 0%, #D9A323 60%, #B8860B 100%) !important;
    border: 2px solid #FFE9A8 !important;
    border-radius: 10px !important;
    color: #3A2400 !important;
    font-family: var(--font-pixel) !important;
    font-size: 0.38rem !important;
    padding: 11px 16px !important;
    box-shadow: 0 3px 0 #6B4A00 !important;
}
.share-btn:hover { filter: brightness(1.08); }

/* REPORT tab content */
.detail-tab-content textarea {
    background: #FFFFFF !important;
    border: 2px solid #B8A87E !important;
    border-radius: 8px !important;
    color: #2A2015 !important;
    font-family: var(--font-mono) !important;
}

/* ============================================================
   SOS BUTTON - Home screen only, premium
   ============================================================ */
#sosBtn {
    display: none !important;
    background: linear-gradient(180deg, #FF6B5A 0%, #E5553F 55%, #B83020 100%) !important;
    border: 2px solid #FFB0A0 !important;
    color: #FFFFFF !important;
    font-family: var(--font-pixel) !important;
    font-size: 0.4rem !important;
    padding: 10px 18px !important;
    box-shadow: 0 4px 0 #6B1A0E, 0 0 20px rgba(255,80,60,0.35), inset 0 2px 0 rgba(255,255,255,0.3) !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    border-radius: 12px !important;
    z-index: 9999 !important;
    align-items: center;
    justify-content: center;
    animation: sosPulse 2.2s ease-in-out infinite;
}
#sosBtn:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
}
/* visible ONLY on Home */
body:not(.modal-open):not(:has(#chatBtn.active)):not(:has(#toolbarSearch.open)) #sosBtn {
    display: flex !important;
}
@media (max-width: 768px) {
    #sosBtn {
        border-radius: 50% !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 1rem !important;
        padding: 0 !important;
    }
}

@keyframes sosPulse {
    0%, 100% { box-shadow: 0 4px 0 #6B1A0E, 0 0 14px rgba(255,80,60,0.3), inset 0 2px 0 rgba(255,255,255,0.3); }
    50%      { box-shadow: 0 4px 0 #6B1A0E, 0 0 28px rgba(255,80,60,0.6), inset 0 2px 0 rgba(255,255,255,0.3); }
}

/* ============================================================
   MISC POLISH
   ============================================================ */
#pageDisplay { color: #6E7A5E !important; font-size: 9px !important; font-family: var(--font-pixel) !important; }

.empty-state {
    background: linear-gradient(180deg, #1F3320 0%, #142315 100%) !important;
    border: 2px dashed #5A7A4A !important;
    border-radius: 12px !important;
    color: #C9C2A4;
}
.empty-state .empty-icon { color: #F5C842 !important; text-shadow: 0 0 14px rgba(245,200,66,0.4); }
.empty-state p { color: #F2E8CD !important; }
.empty-sub { color: #A9A68A !important; }

.tooltip {
    background: linear-gradient(180deg, #2A1D0F 0%, #1C1207 100%) !important;
    border: 2px solid #5A4430 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 0 rgba(0,0,0,0.5) !important;
}
.tooltip-title { color: #F5C842 !important; }
.tooltip-message { color: #C9C2A4 !important; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #0A140C; }
::-webkit-scrollbar-thumb { background: #3E6A44; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #F5C842; }

/* other secondary pages hidden behind modal-open */
.my-garden-modal, .report-modal, .auth-modal, .qr-modal, .about-modal {
    max-width: 560px !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
    .hero-title { font-size: 1.05rem !important; letter-spacing: 2px !important; }
    .hero-stats { gap: 8px !important; }
    .hero-stats .stat { min-width: 0 !important; flex: 1; padding: 9px 8px !important; }
    .hero-stats .stat-value { font-size: 14px !important; }
    .flower-choices { grid-template-columns: repeat(3, 1fr) !important; }
    .bnav-btn { font-size: 6px; }
    .bnav-btn .bnav-icon { font-size: 17px; }
    .talks-container { height: calc(100vh - 205px) !important; }
    .talk-message { max-width: 88% !important; }
    .p6-stats { grid-template-columns: repeat(2, 1fr) !important; }
    .p6-header { flex-direction: column; text-align: center; }
    .p6-toggle { justify-content: center; }
    .detail-top-section { flex: 0 0 36% !important; min-height: 250px !important; }
    .detail-top-section div[style*="width: 120px"] { width: 96px !important; height: 96px !important; }
}

/* keyframes */
@keyframes modalFade {
    0%   { opacity: 0; transform: scale(0.96) translateY(12px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   V6.1 - LIVING BACKGROUND (fireflies, leaves, stars, glows)
   Pure CSS ambient life - no JS
   ============================================================ */
.bg-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.4s ease;
}

/* --- breathing light glows --- */
.bg-glow {
    position: absolute;
    border-radius: 50%;
    animation: glowBreathe 9s ease-in-out infinite;
}
.bg-glow-1 {
    top: -14%;
    left: -10%;
    width: 58vw;
    height: 58vw;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.13) 0%, transparent 65%);
}
.bg-glow-2 {
    bottom: -20%;
    right: -12%;
    width: 66vw;
    height: 66vw;
    background: radial-gradient(circle, rgba(245, 200, 66, 0.10) 0%, transparent 65%);
    animation-duration: 13s;
    animation-delay: 2.5s;
}
@keyframes glowBreathe {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%      { opacity: 0.9;  transform: scale(1.18); }
}

/* --- twinkling stars --- */
.bg-stars span {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.55);
    animation: starTwinkle 3.4s ease-in-out infinite;
}
@keyframes starTwinkle {
    0%, 100% { opacity: 0.1;  transform: scale(0.6); }
    50%      { opacity: 0.85; transform: scale(1.3); }
}

/* --- drifting fireflies --- */
.bg-fireflies span {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    color: #c8ff70;
    animation: firefly 15s linear infinite;
}
.bg-fireflies span:nth-child(3n) { width: 4px; height: 4px; }
.bg-fireflies span:nth-child(4n) { width: 6px; height: 6px; }
@keyframes firefly {
    0%   { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; box-shadow: 0 0 4px 1px currentColor; }
    10%  { opacity: 1; box-shadow: 0 0 10px 4px currentColor; }
    35%  { transform: translate3d(26px, -70px, 0) scale(1); opacity: 0.85; box-shadow: 0 0 6px 2px currentColor; }
    60%  { transform: translate3d(-18px, -135px, 0) scale(0.9); opacity: 0.9; box-shadow: 0 0 14px 6px currentColor; }
    85%  { transform: translate3d(14px, -185px, 0) scale(0.7); opacity: 0.6; box-shadow: 0 0 5px 1px currentColor; }
    100% { transform: translate3d(0, -225px, 0) scale(0.5); opacity: 0; }
}

/* --- falling pixel leaves --- */
.bg-leaves span {
    position: absolute;
    top: -20px;
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 1px;
    animation: leafFall 16s linear infinite;
}
.bg-leaves span:nth-child(3n) { width: 5px; height: 5px; }
.bg-leaves span:nth-child(4n) { width: 7px; height: 7px; }
@keyframes leafFall {
    0%   { transform: translate3d(0, -6vh, 0) rotate(0deg); opacity: 0; }
    10%  { opacity: 0.95; }
    45%  { transform: translate3d(-32px, 48vh, 0) rotate(150deg); }
    70%  { opacity: 0.85; }
    100% { transform: translate3d(26px, 110vh, 0) rotate(330deg); opacity: 0.4; }
}

/* --- calm down behind modals --- */
body.modal-open .bg-scene {
    opacity: 0.3;
}
body.modal-open .bg-scene span {
    animation-play-state: paused;
}

/* --- respect reduced motion + keep mobile light --- */
@media (prefers-reduced-motion: reduce) {
    .bg-scene span { animation: none !important; opacity: 0 !important; }
    .bg-glow-1, .bg-glow-2 { animation: none !important; opacity: 0.5 !important; }
}
@media (max-width: 480px) {
    .bg-leaves span:nth-child(even) { display: none; }
    .bg-fireflies span:nth-child(3n) { display: none; }
}

/* ============================================================
   V6.2 - CLEAN BACKGROUND (remove pixel squares)
   Kill: JS particle squares + grid overlay + boxy leaves
   Add: soft leaf shapes + drifting mist
   ============================================================ */

/* 1. remove the old JS pixel squares entirely (CSS-only, JS untouched) */
.particles {
    display: none !important;
}

/* 2. remove the pixel grid overlay */
body::before {
    content: none !important;
}

/* 3. boxy squares -> real pixel leaves (teardrop + two-tone) */
.bg-leaves span {
    width: 9px !important;
    height: 12px !important;
    border-radius: 50% 0 50% 50% !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, transparent 40%),
        linear-gradient(160deg, currentColor 0%, rgba(0, 0, 0, 0.35) 100%) !important;
    box-shadow:
        inset -2px -2px 0 rgba(0, 0, 0, 0.22),
        inset 2px 2px 0 rgba(255, 255, 255, 0.18),
        0 0 8px rgba(74, 222, 128, 0.12) !important;
    opacity: 0.9;
    animation-name: leafFall2 !important;
    animation-timing-function: ease-in-out !important;
}
.bg-leaves span:nth-child(3n) { width: 8px !important; height: 10px !important; }
.bg-leaves span:nth-child(4n) { width: 11px !important; height: 14px !important; }
.bg-leaves span:nth-child(2n) { animation-direction: reverse; }

@keyframes leafFall2 {
    0%   { transform: translate3d(0, -8vh, 0) rotate(0deg);  opacity: 0; }
    8%   { opacity: 0.9; }
    40%  { transform: translate3d(26px, 42vh, 0) rotate(130deg); }
    62%  { transform: translate3d(-20px, 64vh, 0) rotate(210deg); }
    100% { transform: translate3d(16px, 114vh, 0) rotate(350deg); opacity: 0.3; }
}

/* 4. drifting mist bands - soft atmosphere */
.bg-mist {
    position: absolute;
    left: -18%;
    width: 136%;
    height: 26vh;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(150, 210, 150, 0.05) 22%,
        rgba(150, 210, 150, 0.10) 50%,
        rgba(150, 210, 150, 0.05) 78%,
        transparent 100%);
    animation: mistDrift 26s ease-in-out infinite alternate;
}
.bg-mist-1 { bottom: 4%; }
.bg-mist-2 {
    bottom: 24%;
    height: 18vh;
    animation-duration: 36s;
    animation-delay: -14s;
}
@keyframes mistDrift {
    from { transform: translateX(-4%); }
    to   { transform: translateX(4%); }
}

/* keep reduced-motion clean */
@media (prefers-reduced-motion: reduce) {
    .bg-leaves span, .bg-mist { animation: none !important; }
    .bg-leaves span { opacity: 0 !important; }
}

/* ============================================================
   V6.3 - ROLE-SYNCED LIST SHOP CTA
   Hide hero "＋ List Your Shop" for watchers / during role pick
   JS already sets inline display:none on #addFlowerBtn for
   non-owners - we mirror that signal onto the hero CTA.
   ============================================================ */
body:has(#addFlowerBtn[style*="display: none"]) .hero-cta {
    display: none !important;
}

/* ============================================================
   V6.4 - SEARCH NAV FIXES
   1. Bottom-nav Search works (stopPropagation on the click so
      the document "click outside closes search" listener
      doesn't kill it instantly)
   2. Search button shows ONLY on the Home page (hidden in Chat)
   3. Top toolbar hidden in Chat view = clean full-screen page
   ============================================================ */
body:has(#chatBtn.active) .bnav-btn[data-nav="search"] {
    display: none !important;
}
body:has(#chatBtn.active) .garden-toolbar-compact {
    display: none !important;
}

/* ============================================================
   V6.5 - FORCE READABLE ITEM / FORM INPUTS (everywhere)
   Big dark text on white + -webkit-text-fill-color so mobile
   (iOS/Safari) never shows white/small text again.
   ============================================================ */
/* --- Item add/edit inputs (shop detail ITEMS tab) --- */
.items-add-form input,
.item-row input,
.detail-add-item-form input {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;
    caret-color: #1A1A1A !important;
    font-size: 18px !important;
    font-weight: bold;
    font-family: 'VT323', 'Courier New', monospace !important;
    border: 2px solid #2E7A3A !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    min-height: 42px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}
.item-row input[type="number"],
.items-add-form .price-input {
    font-size: 17px !important;
    max-width: 90px;
    text-align: right !important;
}
.items-add-form input::placeholder,
.item-row input::placeholder {
    color: #6E5F43 !important;
    -webkit-text-fill-color: #6E5F43 !important;
    font-size: 16px !important;
    opacity: 1;
}

/* --- List Business modal fields --- */
.modal #businessName,
.modal #businessOwner,
.modal #businessDescription,
.modal #businessAddress,
.modal #businessPlusCode,
.modal #businessPhone,
.modal #businessWhatsapp,
.modal #businessTimings {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;
    caret-color: #1A1A1A !important;
    font-size: 18px !important;
    font-family: 'VT323', 'Courier New', monospace !important;
    border: 2px solid #B8A87E !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}
.modal #businessName::placeholder,
.modal #businessOwner::placeholder,
.modal #businessDescription::placeholder,
.modal #businessAddress::placeholder,
.modal #businessPlusCode::placeholder,
.modal #businessPhone::placeholder,
.modal #businessWhatsapp::placeholder,
.modal #businessTimings::placeholder {
    color: #6E5F43 !important;
    -webkit-text-fill-color: #6E5F43 !important;
    font-size: 16px !important;
    opacity: 1;
}

/* --- My Listings search + any other modal field --- */
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="tel"],
.modal textarea,
.modal select {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;
    caret-color: #1A1A1A !important;
    font-size: 17px !important;
    font-family: 'VT323', 'Courier New', monospace !important;
}
.modal input::placeholder,
.modal textarea::placeholder {
    color: #6E5F43 !important;
    -webkit-text-fill-color: #6E5F43 !important;
    font-size: 16px !important;
    opacity: 1;
}

/* item name/price DISPLAY text - dark & readable */
.item-row > span[style*="color:#e8f5e9"] {
    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;
    font-size: 1.1rem !important;
}
.item-row > span[style*="color:#f5c842"] {
    color: #B8860B !important;
    font-size: 0.5rem !important;
}

/* ============================================================
   V6.6 - ITEM ROWS: guaranteed readable + bigger price
   Solid light bg (not just gradient) + larger price text.
   ============================================================ */
.item-row {
    background-color: #F7F0DD !important;
    background-image: linear-gradient(180deg, #FCF7E8 0%, #F0E5C6 100%) !important;
    border: 2px solid #B8A87E !important;
    color: #1A1A1A !important;
    min-height: 46px;
}
.item-row > span[style*="color:#e8f5e9"],
.item-row span[style*="font-size:1rem"] {
    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;
    font-size: 1.15rem !important;
}
.item-row > span[style*="color:#f5c842"],
.item-row span[style*="color:#f5c842"] {
    color: #A87200 !important;
    -webkit-text-fill-color: #A87200 !important;
    font-size: 0.6rem !important;
    text-shadow: none !important;
}
.item-row > span[style*="color:#6a8a6a"],
.item-row span[style*="color:#6a8a6a"] {
    color: #6E5F43 !important;
    -webkit-text-fill-color: #6E5F43 !important;
    font-size: 0.55rem !important;
}
.items-list {
    color: #1A1A1A !important;
}
.items-count {
    color: #6E5F43 !important;
}

/* ============================================================
   V6.7 - ITEMS TAB TEXT VISIBILITY (spec)
   Dark brown text on parchment | bold gold prices |
   gray placeholders | dark caret | buttons untouched
   ============================================================ */

/* 1. Item name - dark brown, fully opaque */
.item-row > span[style*="color:#e8f5e9"],
.item-row span[style*="color:#e8f5e9"] {
    color: #2B1D0E !important;
    -webkit-text-fill-color: #2B1D0E !important;
    opacity: 1 !important;
    font-size: 1.15rem !important;
    font-weight: 600;
    text-shadow: none !important;
}

/* 2. Price - dark amber, bold, readable */
.item-row > span[style*="color:#f5c842"],
.item-row span[style*="color:#f5c842"] {
    color: #C98B00 !important;
    -webkit-text-fill-color: #C98B00 !important;
    font-weight: bold;
    font-size: 0.62rem !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* "Price on request" - readable tan */
.item-row > span[style*="color:#6a8a6a"],
.item-row span[style*="color:#6a8a6a"] {
    color: #6E5F43 !important;
    -webkit-text-fill-color: #6E5F43 !important;
    opacity: 1 !important;
    font-size: 0.55rem !important;
}

/* 3+5. Inputs - typed text ALWAYS dark, dark caret, gray placeholder */
.items-add-form input,
.item-row input {
    background-color: #FFFFFF !important;
    background-image: none !important;
    color: #2B1D0E !important;
    -webkit-text-fill-color: #2B1D0E !important;
    caret-color: #2B1D0E !important;
    opacity: 1 !important;
    font-size: 18px !important;
    font-weight: 600;
    font-family: 'VT323', 'Courier New', monospace !important;
    border: 2px solid #2E7A3A !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    min-height: 42px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}
.items-add-form input::placeholder,
.item-row input::placeholder {
    color: #9A8F7A !important;
    -webkit-text-fill-color: #9A8F7A !important;
    font-size: 16px !important;
    font-weight: normal;
    opacity: 1;
}
/* price input: dark typed text (spec #5), amber is for the displayed price */
.items-add-form .price-input,
.item-row input[type="number"] {
    color: #2B1D0E !important;
    -webkit-text-fill-color: #2B1D0E !important;
    caret-color: #2B1D0E !important;
    font-weight: 600;
    max-width: 90px;
    text-align: right !important;
}

/* 4. Item card - solid parchment, everything on it readable */
.item-row {
    background-color: #F7F0DD !important;
    background-image: linear-gradient(180deg, #FCF7E8 0%, #F0E5C6 100%) !important;
    border: 2px solid #B8A87E !important;
    color: #2B1D0E !important;
}

/* headings / meta - dark, opaque */
.items-title,
.items-add-form .add-title {
    color: #2B1D0E !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
.items-count {
    color: #6E5F43 !important;
    opacity: 1 !important;
}
.items-empty,
.items-empty .empty-text {
    color: #2B1D0E !important;
    opacity: 1 !important;
}
.items-empty .empty-emoji {
    opacity: 1 !important;
}

/* 6. Buttons: Add (green) + edit/delete (brown) left exactly as-is */

/* ============================================================
   V6.8 - ITEMS TEXT: match the REAL serialized inline styles
   JS sets styles property-by-property, so the browser stores
   the style attribute as `color: rgb(232, 245, 233)` (NOT
   `#e8f5e9`). Hex-only selectors never matched -> this fixes it.
   ============================================================ */

/* Item NAME - dark brown, fully opaque (rgb serialization) */
.item-row span[style*="color: rgb(232, 245, 233)"],
.item-row span[style*="color:rgb(232, 245, 233)"],
.item-row span[style*="color:#e8f5e9"] {
    color: #2B1D0E !important;
    -webkit-text-fill-color: #2B1D0E !important;
    opacity: 1 !important;
    font-size: 1.15rem !important;
    font-weight: 600;
    text-shadow: none !important;
}

/* Price - bold dark amber */
.item-row span[style*="color: rgb(245, 200, 66)"],
.item-row span[style*="color:rgb(245, 200, 66)"],
.item-row span[style*="color:#f5c842"] {
    color: #C98B00 !important;
    -webkit-text-fill-color: #C98B00 !important;
    font-weight: bold !important;
    font-size: 0.7rem !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* "Price on request" - readable tan */
.item-row span[style*="color: rgb(106, 138, 106)"],
.item-row span[style*="color:rgb(106, 138, 106)"],
.item-row span[style*="color:#6a8a6a"] {
    color: #6E5F43 !important;
    -webkit-text-fill-color: #6E5F43 !important;
    opacity: 1 !important;
    font-size: 0.6rem !important;
    font-weight: bold !important;
}

/* STRUCTURAL fallback - matches regardless of serialization.
   Row layout is stable: [emoji] [name] [price-or-NA] */
.item-row > span:nth-child(2) {
    color: #2B1D0E !important;
    -webkit-text-fill-color: #2B1D0E !important;
    opacity: 1 !important;
    font-size: 1.15rem !important;
    font-weight: 600;
    text-shadow: none !important;
}
.item-row > span:nth-child(3) {
    color: #C98B00 !important;
    -webkit-text-fill-color: #C98B00 !important;
    font-weight: bold !important;
    font-size: 0.7rem !important;
    opacity: 1 !important;
}

/* ============================================================
   V6.9 - EMOJI PICKER for items (CoC premium style)
   ============================================================ */
.items-add-form .emoji-picker {
    margin: 10px 0 8px;
    padding: 10px;
    background: linear-gradient(180deg, #FFF8E7 0%, #F0E5C6 100%) !important;
    border: 2px solid #8B6F3C !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 3px 0 rgba(0,0,0,0.18) !important;
}
.items-add-form .emoji-picker-label {
    color: #2B1D0E !important;
    font-family: 'VT323','Courier New',monospace !important;
    font-size: 16px !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 6px 2px;
    opacity: 1;
}
.items-add-form .emoji-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.items-add-form .emoji-opt {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    line-height: 1 !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F3E9CF 100%) !important;
    border: 2px solid #B8A87E !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.15) !important;
}
.items-add-form .emoji-opt:hover {
    transform: translateY(-2px) scale(1.08) !important;
    border-color: #8B6F3C !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.18), 0 0 8px rgba(139,111,60,0.35) !important;
}
.items-add-form .emoji-opt.selected {
    background: linear-gradient(180deg, #F5C842 0%, #D9A323 100%) !important;
    border-color: #7A5A10 !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.3), 0 0 12px rgba(245,200,66,0.6) !important;
    transform: scale(1.1) !important;
}
@media (max-width: 480px) {
    .items-add-form .emoji-opt {
        width: 33px !important;
        height: 33px !important;
        min-width: 33px !important;
        font-size: 19px !important;
    }
}

/* ============================================================
   V6.10 - EMOJI: small trigger button + popup (mini modal)
   ============================================================ */
/* Small emoji button inside the add row */
.items-add-form .emoji-trigger {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F3E9CF 100%) !important;
    border: 2px solid #B8A87E !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.15) !important;
    position: relative !important;
    transition: transform 0.12s ease, border-color 0.12s ease !important;
}
.items-add-form .emoji-trigger:hover {
    border-color: #8B6F3C !important;
    transform: translateY(-1px) !important;
}
.items-add-form .emoji-trigger::after {
    content: '▾';
    position: absolute !important;
    right: 3px !important;
    bottom: 2px !important;
    font-size: 9px !important;
    color: #8B6F3C !important;
    line-height: 1 !important;
    pointer-events: none !important;
}
.items-add-form .emoji-trigger-icon {
    font-size: 24px !important;
    line-height: 1 !important;
}

/* Popup: centered mini modal over everything */
.items-add-form .emoji-popup {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2000 !important;
    align-items: center !important;
    justify-content: center !important;
}
.items-add-form .emoji-popup.open { display: flex !important; }
.items-add-form .emoji-popup-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(4, 8, 4, 0.6) !important;
    backdrop-filter: blur(3px) !important;
    cursor: pointer !important;
}
.items-add-form .emoji-popup-panel {
    position: relative !important;
    z-index: 1 !important;
    width: min(340px, calc(100vw - 32px)) !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    padding: 14px !important;
    background: linear-gradient(180deg, #FFF8E7 0%, #F0E5C6 100%) !important;
    border: 3px solid #8B6F3C !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 0 rgba(0,0,0,0.35), 0 0 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.7) !important;
    animation: emojiPop 0.18s ease-out !important;
}
@keyframes emojiPop {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.items-add-form .emoji-popup-title {
    color: #2B1D0E !important;
    font-family: 'VT323','Courier New',monospace !important;
    font-size: 17px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center !important;
    margin: 0 0 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #B8A87E !important;
}

/* add-row wraps gracefully on small screens */
.items-add-form .add-row {
    flex-wrap: wrap !important;
}
.items-add-form .item-name-input {
    min-width: 140px !important;
}

/* V6.11 - bigger emoji grid: wider popup panel */
.items-add-form .emoji-popup-panel {
    width: min(420px, calc(100vw - 32px)) !important;
}

/* ============================================================
   V6.12 - EMOJI POPUP CLIPPING FIX
   backdrop-filter on the shop-detail overlay creates a
   containing block for position:fixed descendants, so
   .detail-bottom-card / .detail-tab-content (overflow) clip
   the popup to a tiny area ("small page", title/emojis cut).
   Neutralize it so the popup anchors to the viewport instead.
   ============================================================ */
#flowerDetailOverlay,
.detail-overlay-modern {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* V6.13 - emoji popup title stays pinned while scrolling the grid */
.items-add-form .emoji-popup-title {
    position: sticky !important;
    top: -14px !important;
    z-index: 2 !important;
    background: linear-gradient(180deg, #FFF8E7 0%, #F0E5C6 100%) !important;
    margin: -14px -14px 10px !important;
    padding: 14px 14px 8px !important;
    border-bottom: 2px solid #B8A87E !important;
}

/* ============================================================
   V7 - WATCHER ORDER POPUP (tap item -> Buy -> WhatsApp)
   ============================================================ */
.order-popup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.order-popup-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(2, 6, 3, 0.72) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    cursor: pointer !important;
    animation: orderFade 0.15s ease-out !important;
}
@keyframes orderFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.order-popup-panel {
    position: relative !important;
    z-index: 1 !important;
    width: min(340px, calc(100vw - 32px)) !important;
    text-align: center !important;
    padding: 22px 18px 18px !important;
    background: linear-gradient(180deg, #FFF8E7 0%, #F0E5C6 100%) !important;
    border: 3px solid #8B6F3C !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 0 rgba(0,0,0,0.35), 0 0 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.7) !important;
    animation: orderPop 0.2s ease-out !important;
}
@keyframes orderPop {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.order-popup-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    border: none !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 30% 25%, #FFE9A8 0%, #F5C842 55%, #C99600 100%) !important;
    color: #3A2400 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.4) !important;
    line-height: 1 !important;
}
.order-popup-emoji {
    font-size: 52px !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
}
.order-popup-name {
    color: #2B1D0E !important;
    font-family: 'VT323','Courier New',monospace !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    opacity: 1 !important;
}
.order-popup-price {
    color: #C98B00 !important;
    font-weight: bold !important;
    font-family: 'Press Start 2P', monospace !important;
    font-size: 12px !important;
    margin-top: 8px !important;
    opacity: 1 !important;
}
.order-popup-shop {
    color: #6E5F43 !important;
    font-family: 'VT323','Courier New',monospace !important;
    font-size: 17px !important;
    margin-top: 6px !important;
    opacity: 1 !important;
}
.order-popup-buy {
    display: block !important;
    width: 100% !important;
    margin: 16px auto 0 !important;
    padding: 13px 0 !important;
    background: linear-gradient(180deg, #2EE06A 0%, #1EBE56 100%) !important;
    border: 2px solid #0E7A35 !important;
    border-radius: 10px !important;
    color: #FFFFFF !important;
    font-family: 'VT323','Courier New',monospace !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 0 #0E7A35, inset 0 2px 0 rgba(255,255,255,0.35) !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}
.order-popup-buy:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 0 #0E7A35, inset 0 2px 0 rgba(255,255,255,0.35) !important;
}
.order-popup-buy:active {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 0 #0E7A35, inset 0 2px 0 rgba(255,255,255,0.35) !important;
}
.order-popup-hint {
    color: #9A8F7A !important;
    font-size: 13px !important;
    margin-top: 10px !important;
    opacity: 1 !important;
}

/* subtle hover affordance on item rows */
.item-row:hover {
    border-color: #F5C842 !important;
}

/* ============================================================
   V7.1 - PROFILE → FAVORITES / LEADERBOARD LAYERING FIX
   All .modal-overlay share z-index:200; #profileOverlay comes
   AFTER #favoritesOverlay / #leaderboardOverlay in the DOM, so
   it stacked on top and their modals opened "in the background".
   While the profile modal is open, raise every OTHER modal above
   it so Favorites/Leaderboard appear in front. Safe: opening a
   shop detail already closes favorites/leaderboard first, and the
   detail itself runs at z 999.
   ============================================================ */
body:has(#profileOverlay.active) .modal-overlay.active:not(#profileOverlay) {
    z-index: 350 !important;
}

/* ============================================================
   V7.2 - WATCHER ROLE: hide owner-only profile items
   Rank / Your listings / View My Listings are owner features.
   Watchers only need Favorites + Leaderboard. The role signal
   is the same one applyRole() sets on #addFlowerBtn:
   (role==='owner') ? '' : 'none'
   ============================================================ */
body:has(#addFlowerBtn[style*="display: none"]) .p6-act-row[onclick*="dropdownRanks"],
body:has(#addFlowerBtn[style*="display: none"]) .p6-act-row[onclick*="dropdownMyGarden"],
body:has(#addFlowerBtn[style*="display: none"]) #viewMyGardenBtn {
    display: none !important;
}

/* ============================================================
   V7.3 - TOP MENU: hide My Listings / Favorites / Leaderboard /
   Ranks (they live in #userDropdown). Kept in the DOM with
   display:none so the Profile page rows (which .click() these
   buttons) keep working - same pattern as #dropdownProfile.
   ============================================================ */
#userDropdown #dropdownMyGarden,
#userDropdown #dropdownFavorites,
#userDropdown #dropdownLeaderboard,
#userDropdown #dropdownRanks {
    display: none !important;
}

/* ============================================================
   V7.4 - SOS moved from Home into the top menu button
   Same selector as the old "show on Home" rule (equal
   specificity, later in file) so the floating SOS is ALWAYS
   hidden. It stays in the DOM so the menu item can click it.
   ============================================================ */
body:not(.modal-open):not(:has(#chatBtn.active)):not(:has(#toolbarSearch.open)) #sosBtn {
    display: none !important;
}

/* ============================================================
   V7.5 - TOP MENU: compact 3-dot kebab button (CoC premium)
   ============================================================ */
#userBtn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 1 !important;
    padding: 0 !important;
    font-size: 0 !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #4A3420 0%, #2E1F12 100%) !important;
    border: 2px solid #C99600 !important;
    box-shadow: 0 4px 0 rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.12), inset 0 -2px 0 rgba(0,0,0,0.35) !important;
    position: relative !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
    cursor: pointer !important;
}
#userBtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 0 rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.15), 0 0 12px rgba(245,200,66,0.35) !important;
}
#userBtn:active {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.5) !important;
}

/* three gold dots (kebab) */
#userBtn::before {
    content: '' !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #F5C842 !important;
    box-shadow: 0 -8px 0 #F5C842, 0 8px 0 #F5C842 !important;
    display: block !important;
}

/* the avatar emoji span stays in the DOM (JS updates it) but is hidden */
#userAvatarDisplay {
    display: none !important;
}

/* ============================================================
   V7.6 - ROLE MODAL FOOTER: Sign Out state for logged-in users
   ============================================================ */
#roleSigninBtn.role-logout {
    border-color: #ff4444 !important;
    color: #ff8888 !important;
    background: linear-gradient(180deg, rgba(255,68,68,0.15) 0%, rgba(255,68,68,0.05) 100%) !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.08), 0 3px 0 rgba(0,0,0,0.4) !important;
}
#roleSigninBtn.role-logout:hover {
    border-color: #ff6666 !important;
    color: #ffaaaa !important;
}
.role-auth-text {
    color: #C9C2A4 !important;
    font-family: 'VT323','Courier New',monospace !important;
    font-size: 15px !important;
    opacity: 1 !important;
}

/* ============================================================
   V7.7 - MOBILE HERO STATS: compact single row (was 3 stacked
   full-width boxes eating ~200px). Now 3 slim chips in a row.
   ============================================================ */
@media (max-width: 480px) {
    .hero-stats {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
    }
    .hero-stats .stat {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 7px 4px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
    }
    .hero-stats .stat-label {
        font-size: 8px !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 0 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    .hero-stats .stat-value {
        font-size: 12px !important;
        line-height: 1.2 !important;
        letter-spacing: 0.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   V7.8 - COMMUNITY CHAT: full-page group chat (WhatsApp-style)
   Flush layout, chat header, cream bubbles area, chat bubbles.
   ============================================================ */

/* Flush the section so the chat reaches edge-to-edge */
#gardenTalksView {
    padding: 0 !important;
    margin-left: calc(-1 * var(--space-md)) !important;
    margin-right: calc(-1 * var(--space-md)) !important;
    width: auto !important;
}

.talks-container {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vh - 58px) !important;
    height: calc(100dvh - 58px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    background: #E9E4D5 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden;
}

/* ---- Chat header bar ---- */
.talks-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(180deg, #1E4D3B 0%, #143527 100%) !important;
    border-bottom: 2px solid #B8860B !important;
    padding: 10px 14px !important;
    min-height: 60px !important;
    text-align: left !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
}
.app-back {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(245, 200, 66, 0.4) !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    color: #F5C842 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
    text-shadow: none !important;
    flex-shrink: 0;
}
.app-back:hover { background: rgba(0, 0, 0, 0.4) !important; }
.talks-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #2A7A4E 0%, #1A5A38 100%) !important;
    border: 2px solid #F5C842 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0;
}
.talks-title-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}
.talks-title {
    font-family: var(--font-pixel) !important;
    font-size: 14px !important;
    color: #F5C842 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.talks-status {
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ---- Messages area: cream chat wall ---- */
.talks-messages {
    background-color: #E9E4D5 !important;
    background-image: radial-gradient(rgba(43, 29, 14, 0.05) 1px, transparent 1px) !important;
    background-size: 18px 18px !important;
    border: none !important;
    padding: 14px 12px 20px !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
    scrollbar-width: thin;
}

/* ---- Bubbles ---- */
.talk-message {
    max-width: 78% !important;
    gap: 8px !important;
}
/* others: left, white-cream bubble */
.talk-content {
    background: #FFFDF6 !important;
    border: 1px solid #D9CFB5 !important;
    border-radius: 14px 14px 14px 4px !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07) !important;
    padding: 7px 12px !important;
}
/* mine: right, green bubble */
.talk-message.out .talk-content {
    background: linear-gradient(180deg, #1E8E4E 0%, #15703C 100%) !important;
    border: 1px solid #13713B !important;
    border-radius: 14px 14px 4px 14px !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}

/* WhatsApp-style: hide avatar on own messages */
.talk-message.out .talk-avatar { display: none !important; }
.talk-avatar {
    width: 38px !important;
    height: 38px !important;
    border: 2px solid #C99600 !important;
    background: linear-gradient(180deg, #2A7A4E 0%, #1A5A38 100%) !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
.talk-avatar .avatar-emoji {
    font-size: 17px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* message meta */
.talk-header {
    font-family: var(--font-body) !important;
    font-size: 0 !important;
    margin-bottom: 2px !important;
    gap: 6px !important;
}
.talk-name {
    font-family: var(--font-pixel) !important;
    font-size: 11px !important;
    color: #1E8E4E !important;
    text-decoration: none !important;
}
.talk-message.out .talk-name { color: #B7F5CD !important; }
.talk-time {
    font-family: var(--font-body) !important;
    font-size: 10px !important;
    color: #9A9178 !important;
    margin-left: auto !important;
}
.talk-message.out .talk-time { color: rgba(255, 255, 255, 0.75) !important; }
.talk-message.out .talk-header { justify-content: flex-end !important; }

/* message text */
.talk-text {
    font-family: var(--font-body) !important;
    font-size: 15.5px !important;
    color: #2B1D0E !important;
    line-height: 1.4 !important;
    word-break: break-word;
}
.talk-message.out .talk-text { color: #FFFFFF !important; }

/* ---- Input bar: chat style (display: flex WITHOUT !important so the
   JS can hide it for non-public users — initTalks sets display:none) ---- */
.talks-input-area {
    background: #F2EDE0 !important;
    border-top: 1px solid #D9CFB5 !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    display: flex;
    align-items: center !important;
    flex-shrink: 0;
}
#talksInput {
    background: #FFFFFF !important;
    border: 1px solid #CBBF9E !important;
    border-radius: 22px !important;
    color: #2B1D0E !important;
    caret-color: #1E8E4E !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    padding: 10px 16px !important;
    flex: 1 !important;
    min-width: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    outline: none !important;
}
#talksInput:focus {
    border-color: #1E8E4E !important;
    box-shadow: 0 0 0 2px rgba(30, 142, 78, 0.18) !important;
}
#talksInput::placeholder { color: #A79E85 !important; }
#talksSendBtn {
    background: linear-gradient(180deg, #2EE06A 0%, #1EBE56 100%) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    font-size: 0 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#talksSendBtn::after {
    content: '➤' !important;
    font-size: 17px !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
    margin-left: 2px !important;
}
#talksSendBtn:hover {
    background: linear-gradient(180deg, #34F075 0%, #22CE5E 100%) !important;
}
#talksSendBtn:disabled {
    filter: grayscale(0.7) brightness(0.9) !important;
}

/* ---- Empty + join CTA ---- */
.talk-empty {
    color: #8A8270 !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    text-align: center !important;
    padding: 44px 20px !important;
}
.talks-join-cta {
    background: #FFFDF6 !important;
    border: 1px solid #D9CFB5 !important;
    border-radius: 12px !important;
    margin: 12px !important;
    padding: 18px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    text-align: center !important;
}
.talks-join-cta p { color: #2B1D0E !important; font-family: var(--font-body) !important; font-size: 13px !important; }

/* ---- Desktop: centered chat column ---- */
@media (min-width: 769px) {
    .talks-container {
        max-width: 820px !important;
        border-left: 1px solid #D9CFB5 !important;
        border-right: 1px solid #D9CFB5 !important;
    }
    .talks-messages { padding: 18px 24px 24px !important; }
}

/* ============================================================
   V7.9 - CHAT = FULLY OPAQUE APP PAGE (WhatsApp feel)
   Kill the animated living bg + prevent page scroll while the
   chat is open, so it feels like its own complete app screen.
   ============================================================ */
body:has(#chatBtn.active) .bg-scene,
body:has(#chatBtn.active) .bg-mist,
body:has(#chatBtn.active) .particles {
    display: none !important;
    animation: none !important;
}
body:has(#chatBtn.active) {
    overflow: hidden !important;
    height: 100% !important;
}
body:has(#chatBtn.active) .garden-container {
    padding-bottom: 0 !important;
}

/* ---- Header: taller WhatsApp app bar, online status in green ---- */
.talks-header {
    min-height: 66px !important;
    padding: 10px 14px !important;
}
.talks-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 21px !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(245, 200, 66, 0.25) !important;
}
.talks-title {
    font-size: 15px !important;
    color: #F5C842 !important;
}
.talks-status {
    color: #9ED8B4 !important;   /* whatsapp-style green online text */
    font-size: 11.5px !important;
}

/* ---- Borderless bubbles with real chat tails ---- */
.talk-content {
    background: #FFFDF6 !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10) !important;
    position: relative !important;
}
.talk-message.in .talk-content::before {
    content: '' !important;
    position: absolute !important;
    left: -7px !important;
    top: 12px !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-right: 7px solid #FFFDF6 !important;
}
.talk-message.out .talk-content {
    background: linear-gradient(180deg, #1E8E4E 0%, #15703C 100%) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}
.talk-message.out .talk-content::before {
    content: '' !important;
    position: absolute !important;
    right: -7px !important;
    top: 12px !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-left: 7px solid #1A8449 !important;
}

/* ---- Wall pattern a touch richer (WhatsApp wallpaper vibe) ---- */
.talks-messages {
    background-image:
        radial-gradient(rgba(43, 29, 14, 0.055) 1.2px, transparent 1.2px),
        radial-gradient(rgba(43, 29, 14, 0.04) 1px, transparent 1px) !important;
    background-size: 26px 26px, 13px 13px !important;
}
:root:has(#chatBtn.active) {
    overflow: hidden !important;
}

/* ---- Empty state: friendly centered chat prompt ---- */
.talk-empty {
    color: #9A9178 !important;
    font-size: 14.5px !important;
    padding: 56px 24px !important;
    line-height: 1.5 !important;
}

/* ============================================================
   V7.10 - CHAT CLEANUP: no tutorial card over chat + nicer
   join panel + CoC-styled welcome guide card (first visit).
   ============================================================ */
body:has(#chatBtn.active) .welcome-guide {
    display: none !important;
}

/* Join panel for non-public users — fills the chat cleanly */
.talks-join-cta {
    background: #FFFDF6 !important;
    border: 1px solid #D9CFB5 !important;
    border-radius: 14px !important;
    margin: 14px !important;
    padding: 22px 18px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    text-align: center !important;
}
.talks-join-cta p {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: #2B1D0E !important;
    margin-bottom: 12px !important;
}
#talksCtaBtn {
    font-family: var(--font-pixel) !important;
    font-size: 11px !important;
    background: linear-gradient(180deg, #1E8E4E 0%, #15703C 100%) !important;
    border: 2px solid #C99600 !important;
    border-radius: 10px !important;
    color: #FFFFFF !important;
    padding: 10px 18px !important;
    box-shadow: 0 3px 0 #0E4A24 !important;
}
#talksCtaBtn:hover {
    background: linear-gradient(180deg, #28A25C 0%, #1B8448 100%) !important;
}

/* Welcome guide card — CoC premium (cream + gold + wood) */
.welcome-guide {
    background: linear-gradient(180deg, #FFFDF6 0%, #F4EFE0 100%) !important;
    border: 2px solid #C99600 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    max-width: 300px !important;
    z-index: 1100 !important;
}
.welcome-guide .guide-title {
    color: #B8860B !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}
.welcome-guide .guide-text,
.welcome-guide .guide-subtitle,
.welcome-guide .guide-note,
.welcome-guide .guide-list li {
    color: #2B1D0E !important;
    font-size: 12px !important;
}
.welcome-guide .guide-divider {
    border-color: #D9CFB5 !important;
}
.welcome-guide .guide-btn {
    background: linear-gradient(180deg, #1E8E4E 0%, #15703C 100%) !important;
    border: 2px solid #C99600 !important;
    border-radius: 10px !important;
    color: #FFFFFF !important;
    font-family: var(--font-pixel) !important;
    font-size: 10px !important;
    padding: 8px 18px !important;
    box-shadow: 0 3px 0 #0E4A24 !important;
}

/* ============================================================
   V7.11 - MODAL OPEN = BACKGROUND LOCKED (like the chat)
   Pure CSS: whenever ANY .modal-overlay gets .active, the page
   behind stays fixed — only the modal content and its
   tabs/options scroll. (The JS modal-open class hook is broken;
   :has() is bulletproof.) Overscroll containment stops iOS
   Safari from chain-scrolling the background.
   ============================================================ */
/* body:has overflow lock REMOVED — it snapped scroll to 0 before the
   JS freeze could preserve position. The JS scroll-lock (V7.11) handles
   freezing without jumping. */
:root:has(.modal-overlay.active),
html.mossage-scroll-frozen {
    overflow: hidden !important;
    height: 100% !important;
}
/* NOTE: html.mossage-scroll-frozen overflow lock is applied by the
   JS freeze which also preserves scroll position; the :has() rules
   below snap the page BEFORE JS can read the position, so they must
   NOT set overflow:hidden. The JS freeze handles everything. */
.modal-overlay,
#flowerDetailOverlay {
    overscroll-behavior: contain !important;
}
.detail-tab-content,
.detail-bottom-card {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   V7.12 - MENU BUTTON: always pinned, never scrolls
   position:fixed enforced with !important so no ancestor
   quirk or cached rule can break it. Hidden while any modal
   is open (it would otherwise float over the shop modal).
   ============================================================ */
#userMenu {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 99999 !important;
}
body:has(.modal-overlay.active) #userMenu,
body:has(#roleSelectionOverlay[style*="flex"]) #userMenu,
body:has(.modal-overlay.active) .user-dropdown,
body:has(.modal-overlay.active) .user-dropdown-backdrop {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ---- V7.14 MOBILE: the 3-dot menu belongs to the Home header.
   It sits at the page's top-right and scrolls away naturally
   with the header — it NEVER floats over the shop cards and
   reappears when the user scrolls back to the top. ---- */
@media (max-width: 480px) {
    #userMenu {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 1000 !important;
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto !important;
    }
    /* Home page only — never over the chat view */
    body:has(#chatBtn.active) #userMenu {
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ============================================================
   V7.15 - MOBILE: show the "List Shop" button
   A V5-era rule ("TOP TOOLBAR replaced by bottom nav") hid
   .toolbar-icons on mobile, which also hid the List Shop
   button. On mobile, Home/Chat/Search live in the bottom nav,
   so ONLY the List Shop button is restored — a full-width
   CoC-gold button above the garden grid. Visibility is still
   JS-driven (owner only): the button's display uses NO
   !important so the JS inline style keeps winning.
   ============================================================ */
@media (max-width: 600px) {
    .toolbar-icons {
        display: flex !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 6px !important;
        padding: 0 !important;
    }
    /* bottom nav already provides Explore/Chat/Search */
    .toolbar-icons .icon-btn:not(#addFlowerBtn) {
        display: none !important;
    }
    #addFlowerBtn {
        display: flex;
        width: 100% !important;
        min-height: 42px !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        background: linear-gradient(180deg, #F5C842 0%, #D4A010 100%) !important;
        border: 2px solid #F5D060 !important;
        border-bottom: 3px solid #A07800 !important;
        border-radius: 8px !important;
        box-shadow: 0 3px 0 #806000, 0 6px 12px rgba(0, 0, 0, 0.35) !important;
    }
    #addFlowerBtn .icon-emoji {
        font-size: 1rem !important;
    }
    #addFlowerBtn .icon-label {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        color: #2B1D0E !important;
        letter-spacing: 0.02em !important;
    }
}

/* ============================================================
   V7.16 - MOBILE MODAL: fit the REAL viewport (URL-bar aware)
   The full-screen modal used min/max-height:100vh, which on
   mobile includes the area hidden BEHIND the browser URL bar —
   so the bottom of the List Business form (and its "List
   Business" button) was permanently cut off. Now it uses
   100dvh (dynamic viewport height) which tracks the visible
   area as the URL bar shows/hides, plus safe bottom padding so
   the button always scrolls fully into view. Desktop untouched.
   ============================================================ */
@media (max-width: 768px) {
    .modal {
        /* fallback for browsers without dvh support */
        min-height: 100vh !important;
        max-height: 100vh !important;
        /* URL-bar aware: tracks the visible viewport */
        min-height: 100dvh !important;
        max-height: 100dvh !important;
    }
    /* List Business button always reachable — safe space below
       it (24px + iPhone home-indicator safe area) */
    #modalOverlay .modal {
        padding-bottom: 24px !important;
        padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    }
}

/* ============================================================
   V7.17 - REMOVE DUPLICATE BACK BUTTON on "Your Business
   Details" (step 2 of the List Business modal)
   The gold circular #modalClose coin and the "← Back" pill
   both appeared on step 2. The pill is kept as the top-left
   back nav; the coin is hidden ONLY on step 2 — it stays on
   step 1 and in every other modal where it is the close
   button. The heading uses symmetric 56px padding + centered
   text, so no empty space remains where the coin was.
   ============================================================ */
#modalOverlay:has(#stepMessage[style*="block"]) #modalClose {
    display: none !important;
}

/* ============================================================
   V7.18 - MOBILE HOME: compact top section (same style, less
   vertical space). Stats ~37% shorter, month-year never
   truncates, "List Shop" banner becomes a compact centered
   gold pill, and gaps between header/filter/grid tighten so
   the first row of shop cards is visible on open.
   ============================================================ */

/* --- 1+2. Stats: shorter cards + month-year no truncation --- */
@media (max-width: 480px) {
    .hero {
        padding-bottom: 10px !important;
        margin-bottom: 4px !important;
    }
    .hero-stats {
        gap: 5px !important;
        margin-bottom: 6px !important;
    }
    .hero-stats .stat {
        padding: 2px 4px !important;
        gap: 0 !important;
    }
    .hero-stats .stat-label {
        font-size: 7px !important;
        line-height: 1.1 !important;
    }
    .hero-stats .stat-value {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }
    /* Month & Year card: more width share so "July 2026" fits
       on one line; falls back to wrapping (July / 2026) on
       ultra-narrow screens — never truncated with "..." */
    .hero-stats .stat:nth-child(3) {
        flex: 1.6 1 0 !important;
    }
    #statStarted {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: 100% !important;
    }
}

/* --- 3+4. "List Shop" gold banner -> compact centered pill --- */
@media (max-width: 600px) {
    .toolbar-icons {
        justify-content: center !important;
    }
    #addFlowerBtn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-height: 48px !important;
        padding: 0 22px !important;
        margin: 2px 0 !important;
    }
}

/* --- 5. Tighter gaps: header -> city bar -> grid --- */
@media (max-width: 480px) {
    .garden-toolbar-compact {
        margin-bottom: 4px !important;
    }
    #locationBanner {
        margin-top: 4px !important;
        margin-bottom: 6px !important;
        padding: 6px 12px !important;
    }
}

/* ============================================================
   V7.19 - ONE list option on mobile: remove the 🦊 "List Shop"
   pill (keep the gold "＋ List Your Shop" hero button).
   Hide-don't-remove: the hero-cta's .click() still targets it,
   and the role signal reads the INLINE display attribute which
   applyRole() still sets. The toolbar collapses to zero height.
   ============================================================ */
@media (max-width: 600px) {
    #addFlowerBtn {
        display: none !important;
    }
    .toolbar-icons {
        min-height: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}


/* ============================================================
   V7.21 - BACKGROUND V2: peaceful pixel forest at night
   Keeps: thin pixel grid (6-8%), dark green, particles, vignette.
   Adds: soft radial glow behind the shop area, tiny slow
   fireflies, faint pixel grass (5-10%), occasional leaves,
   subtle noise grain, depth blur on distant particles.
   All layers sit BEHIND the cards (z-index 0, fixed) and are
   slow + calm — nothing competes with shop cards.
   ============================================================ */
body::before {
    content: '' !important;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-color: transparent;
    background-image:
        /* sparse pixel grass tile (faint 5-10%, includes noise grain) */
        url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'96'%20height%3D'96'%20viewBox%3D'0%200%2096%2096'%3E%3Crect%20x%3D'42'%20y%3D'20'%20width%3D'1'%20height%3D'3'%20fill%3D'%2523489858'%20opacity%3D'0.05'%2F%3E%3Crect%20x%3D'69'%20y%3D'13'%20width%3D'1'%20height%3D'3'%20fill%3D'%2523489858'%20opacity%3D'0.05'%2F%3E%3Crect%20x%3D'65'%20y%3D'28'%20width%3D'1'%20height%3D'2'%20fill%3D'%252358a868'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'9'%20y%3D'31'%20width%3D'1'%20height%3D'2'%20fill%3D'%2523489858'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'73'%20y%3D'16'%20width%3D'1'%20height%3D'2'%20fill%3D'%2523489858'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'8'%20y%3D'74'%20width%3D'1'%20height%3D'3'%20fill%3D'%252358a868'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'6'%20y%3D'72'%20width%3D'1'%20height%3D'2'%20fill%3D'%252368b878'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'70'%20y%3D'16'%20width%3D'1'%20height%3D'3'%20fill%3D'%2523489858'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'24'%20y%3D'14'%20width%3D'1'%20height%3D'2'%20fill%3D'%252368b878'%20opacity%3D'0.05'%2F%3E%3Crect%20x%3D'92'%20y%3D'9'%20width%3D'1'%20height%3D'2'%20fill%3D'%2523489858'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'88'%20y%3D'69'%20width%3D'1'%20height%3D'3'%20fill%3D'%252368b878'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'59'%20y%3D'47'%20width%3D'1'%20height%3D'3'%20fill%3D'%252358a868'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'90'%20y%3D'32'%20width%3D'1'%20height%3D'2'%20fill%3D'%2523489858'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'64'%20y%3D'44'%20width%3D'1'%20height%3D'3'%20fill%3D'%252368b878'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'10'%20y%3D'16'%20width%3D'1'%20height%3D'3'%20fill%3D'%252358a868'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'20'%20y%3D'63'%20width%3D'1'%20height%3D'3'%20fill%3D'%252358a868'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'10'%20y%3D'72'%20width%3D'1'%20height%3D'3'%20fill%3D'%252368b878'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'77'%20y%3D'64'%20width%3D'1'%20height%3D'3'%20fill%3D'%252358a868'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'35'%20y%3D'61'%20width%3D'1'%20height%3D'2'%20fill%3D'%252358a868'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'40'%20y%3D'83'%20width%3D'1'%20height%3D'3'%20fill%3D'%252368b878'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'86'%20y%3D'45'%20width%3D'1'%20height%3D'2'%20fill%3D'%252368b878'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'79'%20y%3D'15'%20width%3D'1'%20height%3D'3'%20fill%3D'%252358a868'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'37'%20y%3D'17'%20width%3D'1'%20height%3D'2'%20fill%3D'%252368b878'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'64'%20y%3D'11'%20width%3D'1'%20height%3D'2'%20fill%3D'%252368b878'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'36'%20y%3D'18'%20width%3D'1'%20height%3D'3'%20fill%3D'%2523489858'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'54'%20y%3D'46'%20width%3D'1'%20height%3D'3'%20fill%3D'%252358a868'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'23'%20y%3D'20'%20width%3D'1'%20height%3D'2'%20fill%3D'%2523489858'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'63'%20y%3D'76'%20width%3D'1'%20height%3D'2'%20fill%3D'%252368b878'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'19'%20y%3D'54'%20width%3D'1'%20height%3D'3'%20fill%3D'%2523489858'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'17'%20y%3D'89'%20width%3D'1'%20height%3D'2'%20fill%3D'%252368b878'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'88'%20y%3D'72'%20width%3D'1'%20height%3D'3'%20fill%3D'%2523307040'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'14'%20y%3D'62'%20width%3D'1'%20height%3D'3'%20fill%3D'%25232a6038'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'27'%20y%3D'57'%20width%3D'1'%20height%3D'2'%20fill%3D'%25232a6038'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'7'%20y%3D'14'%20width%3D'1'%20height%3D'2'%20fill%3D'%25232a6038'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'47'%20y%3D'79'%20width%3D'1'%20height%3D'2'%20fill%3D'%25232a6038'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'79'%20y%3D'49'%20width%3D'1'%20height%3D'2'%20fill%3D'%2523307040'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'78'%20y%3D'47'%20width%3D'1'%20height%3D'3'%20fill%3D'%25232a6038'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'63'%20y%3D'60'%20width%3D'1'%20height%3D'3'%20fill%3D'%2523307040'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'19'%20y%3D'14'%20width%3D'2'%20height%3D'2'%20fill%3D'%2523b0bca8'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'34'%20y%3D'62'%20width%3D'2'%20height%3D'2'%20fill%3D'%2523b0bca8'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'3'%20y%3D'27'%20width%3D'2'%20height%3D'2'%20fill%3D'%2523b0bca8'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'89'%20y%3D'70'%20width%3D'2'%20height%3D'2'%20fill%3D'%2523aab8a2'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'39'%20y%3D'83'%20width%3D'2'%20height%3D'2'%20fill%3D'%2523aab8a2'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'34'%20y%3D'67'%20width%3D'2'%20height%3D'2'%20fill%3D'%252398a890'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'46'%20y%3D'29'%20width%3D'2'%20height%3D'2'%20fill%3D'%2523b0bca8'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'65'%20y%3D'43'%20width%3D'2'%20height%3D'2'%20fill%3D'%2523b0bca8'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'25'%20y%3D'31'%20width%3D'3'%20height%3D'2'%20fill%3D'%2523306840'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'64'%20y%3D'46'%20width%3D'2'%20height%3D'3'%20fill%3D'%2523306840'%20opacity%3D'0.1'%2F%3E%3Crect%20x%3D'61'%20y%3D'34'%20width%3D'2'%20height%3D'3'%20fill%3D'%2523387a48'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'45'%20y%3D'47'%20width%3D'2'%20height%3D'3'%20fill%3D'%2523306840'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'61'%20y%3D'26'%20width%3D'3'%20height%3D'2'%20fill%3D'%2523306840'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'79'%20y%3D'1'%20width%3D'3'%20height%3D'2'%20fill%3D'%2523387a48'%20opacity%3D'0.1'%2F%3E%3Crect%20x%3D'11'%20y%3D'85'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523c8e0b8'%20opacity%3D'0.04'%2F%3E%3Crect%20x%3D'92'%20y%3D'26'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523305040'%20opacity%3D'0.04'%2F%3E%3Crect%20x%3D'56'%20y%3D'82'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523305040'%20opacity%3D'0.02'%2F%3E%3Crect%20x%3D'93'%20y%3D'51'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523305040'%20opacity%3D'0.03'%2F%3E%3Crect%20x%3D'11'%20y%3D'93'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523c8e0b8'%20opacity%3D'0.02'%2F%3E%3Crect%20x%3D'17'%20y%3D'4'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523c8e0b8'%20opacity%3D'0.03'%2F%3E%3Crect%20x%3D'60'%20y%3D'84'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523c8e0b8'%20opacity%3D'0.03'%2F%3E%3Crect%20x%3D'77'%20y%3D'61'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523608070'%20opacity%3D'0.04'%2F%3E%3Crect%20x%3D'20'%20y%3D'71'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523608070'%20opacity%3D'0.02'%2F%3E%3Crect%20x%3D'2'%20y%3D'93'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523608070'%20opacity%3D'0.02'%2F%3E%3Crect%20x%3D'18'%20y%3D'56'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523c8e0b8'%20opacity%3D'0.04'%2F%3E%3Crect%20x%3D'28'%20y%3D'4'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523305040'%20opacity%3D'0.02'%2F%3E%3Crect%20x%3D'65'%20y%3D'31'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523608070'%20opacity%3D'0.03'%2F%3E%3Crect%20x%3D'70'%20y%3D'54'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523c8e0b8'%20opacity%3D'0.02'%2F%3E%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'96'%20height%3D'96'%20viewBox%3D'0%200%2096%2096'%3E%3Crect%20x%3D'42'%20y%3D'20'%20width%3D'1'%20height%3D'3'%20fill%3D'%2523489858'%20opacity%3D'0.05'%2F%3E%3Crect%20x%3D'69'%20y%3D'13'%20width%3D'1'%20height%3D'3'%20fill%3D'%2523489858'%20opacity%3D'0.05'%2F%3E%3Crect%20x%3D'65'%20y%3D'28'%20width%3D'1'%20height%3D'2'%20fill%3D'%252358a868'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'9'%20y%3D'31'%20width%3D'1'%20height%3D'2'%20fill%3D'%2523489858'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'73'%20y%3D'16'%20width%3D'1'%20height%3D'2'%20fill%3D'%2523489858'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'8'%20y%3D'74'%20width%3D'1'%20height%3D'3'%20fill%3D'%252358a868'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'6'%20y%3D'72'%20width%3D'1'%20height%3D'2'%20fill%3D'%252368b878'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'70'%20y%3D'16'%20width%3D'1'%20height%3D'3'%20fill%3D'%2523489858'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'24'%20y%3D'14'%20width%3D'1'%20height%3D'2'%20fill%3D'%252368b878'%20opacity%3D'0.05'%2F%3E%3Crect%20x%3D'92'%20y%3D'9'%20width%3D'1'%20height%3D'2'%20fill%3D'%2523489858'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'88'%20y%3D'69'%20width%3D'1'%20height%3D'3'%20fill%3D'%252368b878'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'59'%20y%3D'47'%20width%3D'1'%20height%3D'3'%20fill%3D'%252358a868'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'90'%20y%3D'32'%20width%3D'1'%20height%3D'2'%20fill%3D'%2523489858'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'64'%20y%3D'44'%20width%3D'1'%20height%3D'3'%20fill%3D'%252368b878'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'10'%20y%3D'16'%20width%3D'1'%20height%3D'3'%20fill%3D'%252358a868'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'20'%20y%3D'63'%20width%3D'1'%20height%3D'3'%20fill%3D'%252358a868'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'10'%20y%3D'72'%20width%3D'1'%20height%3D'3'%20fill%3D'%252368b878'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'77'%20y%3D'64'%20width%3D'1'%20height%3D'3'%20fill%3D'%252358a868'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'35'%20y%3D'61'%20width%3D'1'%20height%3D'2'%20fill%3D'%252358a868'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'40'%20y%3D'83'%20width%3D'1'%20height%3D'3'%20fill%3D'%252368b878'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'86'%20y%3D'45'%20width%3D'1'%20height%3D'2'%20fill%3D'%252368b878'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'79'%20y%3D'15'%20width%3D'1'%20height%3D'3'%20fill%3D'%252358a868'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'37'%20y%3D'17'%20width%3D'1'%20height%3D'2'%20fill%3D'%252368b878'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'64'%20y%3D'11'%20width%3D'1'%20height%3D'2'%20fill%3D'%252368b878'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'36'%20y%3D'18'%20width%3D'1'%20height%3D'3'%20fill%3D'%2523489858'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'54'%20y%3D'46'%20width%3D'1'%20height%3D'3'%20fill%3D'%252358a868'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'23'%20y%3D'20'%20width%3D'1'%20height%3D'2'%20fill%3D'%2523489858'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'63'%20y%3D'76'%20width%3D'1'%20height%3D'2'%20fill%3D'%252368b878'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'19'%20y%3D'54'%20width%3D'1'%20height%3D'3'%20fill%3D'%2523489858'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'17'%20y%3D'89'%20width%3D'1'%20height%3D'2'%20fill%3D'%252368b878'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'88'%20y%3D'72'%20width%3D'1'%20height%3D'3'%20fill%3D'%2523307040'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'14'%20y%3D'62'%20width%3D'1'%20height%3D'3'%20fill%3D'%25232a6038'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'27'%20y%3D'57'%20width%3D'1'%20height%3D'2'%20fill%3D'%25232a6038'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'7'%20y%3D'14'%20width%3D'1'%20height%3D'2'%20fill%3D'%25232a6038'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'47'%20y%3D'79'%20width%3D'1'%20height%3D'2'%20fill%3D'%25232a6038'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'79'%20y%3D'49'%20width%3D'1'%20height%3D'2'%20fill%3D'%2523307040'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'78'%20y%3D'47'%20width%3D'1'%20height%3D'3'%20fill%3D'%25232a6038'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'63'%20y%3D'60'%20width%3D'1'%20height%3D'3'%20fill%3D'%2523307040'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'19'%20y%3D'14'%20width%3D'2'%20height%3D'2'%20fill%3D'%2523b0bca8'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'34'%20y%3D'62'%20width%3D'2'%20height%3D'2'%20fill%3D'%2523b0bca8'%20opacity%3D'0.06'%2F%3E%3Crect%20x%3D'3'%20y%3D'27'%20width%3D'2'%20height%3D'2'%20fill%3D'%2523b0bca8'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'89'%20y%3D'70'%20width%3D'2'%20height%3D'2'%20fill%3D'%2523aab8a2'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'39'%20y%3D'83'%20width%3D'2'%20height%3D'2'%20fill%3D'%2523aab8a2'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'34'%20y%3D'67'%20width%3D'2'%20height%3D'2'%20fill%3D'%252398a890'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'46'%20y%3D'29'%20width%3D'2'%20height%3D'2'%20fill%3D'%2523b0bca8'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'65'%20y%3D'43'%20width%3D'2'%20height%3D'2'%20fill%3D'%2523b0bca8'%20opacity%3D'0.07'%2F%3E%3Crect%20x%3D'25'%20y%3D'31'%20width%3D'3'%20height%3D'2'%20fill%3D'%2523306840'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'64'%20y%3D'46'%20width%3D'2'%20height%3D'3'%20fill%3D'%2523306840'%20opacity%3D'0.1'%2F%3E%3Crect%20x%3D'61'%20y%3D'34'%20width%3D'2'%20height%3D'3'%20fill%3D'%2523387a48'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'45'%20y%3D'47'%20width%3D'2'%20height%3D'3'%20fill%3D'%2523306840'%20opacity%3D'0.08'%2F%3E%3Crect%20x%3D'61'%20y%3D'26'%20width%3D'3'%20height%3D'2'%20fill%3D'%2523306840'%20opacity%3D'0.09'%2F%3E%3Crect%20x%3D'79'%20y%3D'1'%20width%3D'3'%20height%3D'2'%20fill%3D'%2523387a48'%20opacity%3D'0.1'%2F%3E%3Crect%20x%3D'11'%20y%3D'85'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523c8e0b8'%20opacity%3D'0.04'%2F%3E%3Crect%20x%3D'92'%20y%3D'26'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523305040'%20opacity%3D'0.04'%2F%3E%3Crect%20x%3D'56'%20y%3D'82'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523305040'%20opacity%3D'0.02'%2F%3E%3Crect%20x%3D'93'%20y%3D'51'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523305040'%20opacity%3D'0.03'%2F%3E%3Crect%20x%3D'11'%20y%3D'93'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523c8e0b8'%20opacity%3D'0.02'%2F%3E%3Crect%20x%3D'17'%20y%3D'4'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523c8e0b8'%20opacity%3D'0.03'%2F%3E%3Crect%20x%3D'60'%20y%3D'84'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523c8e0b8'%20opacity%3D'0.03'%2F%3E%3Crect%20x%3D'77'%20y%3D'61'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523608070'%20opacity%3D'0.04'%2F%3E%3Crect%20x%3D'20'%20y%3D'71'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523608070'%20opacity%3D'0.02'%2F%3E%3Crect%20x%3D'2'%20y%3D'93'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523608070'%20opacity%3D'0.02'%2F%3E%3Crect%20x%3D'18'%20y%3D'56'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523c8e0b8'%20opacity%3D'0.04'%2F%3E%3Crect%20x%3D'28'%20y%3D'4'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523305040'%20opacity%3D'0.02'%2F%3E%3Crect%20x%3D'65'%20y%3D'31'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523608070'%20opacity%3D'0.03'%2F%3E%3Crect%20x%3D'70'%20y%3D'54'%20width%3D'1'%20height%3D'1'%20fill%3D'%2523c8e0b8'%20opacity%3D'0.02'%2F%3E%3C%2Fsvg%3E"),
        /* THIN pixel grid lines - 1px every 20px (classic look), 7% opacity */
        repeating-linear-gradient(0deg, transparent 0 19px, rgba(88,168,104,0.07) 19px 20px),
        repeating-linear-gradient(90deg, transparent 0 19px, rgba(88,168,104,0.07) 19px 20px),
        /* soft radial glow behind the shop area */
        radial-gradient(ellipse at 50% 58%, rgba(70,150,90,0.14) 0%, transparent 55%),
        /* natural ground variation (mossy pockets) */
        radial-gradient(ellipse at 15% 78%, rgba(20,60,32,0.26) 0%, transparent 42%),
        radial-gradient(ellipse at 84% 22%, rgba(18,52,28,0.22) 0%, transparent 40%),
        radial-gradient(ellipse at 68% 88%, rgba(26,72,38,0.20) 0%, transparent 45%),
        radial-gradient(ellipse at 28% 14%, rgba(24,64,34,0.18) 0%, transparent 38%),
        /* soft centre brightness for readability */
        radial-gradient(ellipse at 50% 40%, rgba(70,140,80,0.10) 0%, transparent 62%),
        /* subtle vignette around the edges */
        radial-gradient(ellipse at 50% 42%, transparent 46%, rgba(0,0,0,0.52) 100%),
        /* V7.28 — sky glow + ground gradient moved off <body> into this
           fixed layer (body's background-attachment:fixed is ignored on
           iOS, making those glows scroll with the content on phones). */
        radial-gradient(ellipse at 50% -10%, rgba(62,142,74,0.28) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 110%, rgba(245,200,66,0.08) 0%, transparent 40%),
        linear-gradient(180deg, #0C2414 0%, #07160C 45%, #040B06 100%);
    background-repeat: repeat, repeat, repeat, repeat,
        no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
        no-repeat, no-repeat, no-repeat;
    background-size: 96px 96px, 79px 79px, auto, auto,
        auto, auto, auto, auto, auto, auto, auto,
        auto, auto, auto;
    background-position: 0 0, 13px 29px, 0 0, 0 0,
        center, center, center, center, center, center, center,
        center, center, center;
}

/* --- fireflies: tiny, slow, glowing, with depth blur --- */
.bg-fireflies span {
    width: 4px !important;
    height: 4px !important;
    animation-duration: 22s !important;
    animation-timing-function: ease-in-out !important;
}
.bg-fireflies span:nth-child(3n) { width: 3px !important; height: 3px !important; animation-duration: 26s !important; }
/* distant fireflies - blurred + dimmer (depth) */
.bg-fireflies span:nth-child(5n) {
    filter: blur(2.5px);
    width: 3px !important;
    height: 3px !important;
    animation-duration: 30s !important;
}
.bg-fireflies span:nth-child(7n) {
    filter: blur(1.5px);
    animation-duration: 26s !important;
}

/* --- leaves: occasional + a few blurred far ones --- */
.bg-leaves span {
    animation-duration: 26s !important;
    animation-timing-function: ease-in-out !important;
}
.bg-leaves span:nth-child(4n) {
    filter: blur(1.5px);
    animation-duration: 34s !important;
}

/* --- slow the breathing glows --- */
.bg-glow-1, .bg-glow-2 {
    animation-duration: 14s !important;
}

/* mobile: keep even lighter */
@media (max-width: 480px) {
    .bg-fireflies span:nth-child(5n),
    .bg-fireflies span:nth-child(7n) { display: none; }
}

/* ============================================================
   V7.23 - Profile stats: only the "Listed" card remains
   (Chats / Favorites / Oldest cards removed - they had no real
   data source). The single card now spans the full width.
   ============================================================ */
.p6-stats {
    grid-template-columns: 1fr !important;
}

/* ============================================================
   V7.24 — gold back-arrow coin: vertically centered on the
   gold heading bar (it was hanging low, poking below the bar).
   Rest position: y 8 → coin center (26) == bar center (26).
   Scroll: sticky keeps the coin visible inside the bar.
   The coin's sticky position is clamped to the modal's content
    box top (y=14), so the gold heading bar is grown to 64px
    (padding 16px -> 22px) — its center (32) now matches the
    coin's center (32): perfectly aligned in every modal.
   ============================================================ */
.modal-close {
    top: -20px !important;
}
.modal-heading {
    padding: 22px 56px !important;
}

/* ============================================================
   V7.29 — bulletproof static background (zero parallax glitch)
   ------------------------------------------------------------
   #bg-fixed: a real <div>, position:fixed to the viewport, sits
   at z-index:-1 behind everything. Content scrolls over it, the
   background never moves — works on iOS Safari, Android Chrome,
   Samsung Internet and WebViews (unlike background-attachment,
   position:fixed on a div is universal).
   ============================================================ */
#bg-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #0a1a0a;
    background-image:
        radial-gradient(
            ellipse at 50% 50%,
            #0f2a0f 0%,
            #0a1a0a 60%,
            #061008 100%);
    pointer-events: none;
}

/* Background texture layers: no transform / will-change / animation
   that could cause compositing (layer-recreation) glitches while
   the page scrolls. The animated life (fireflies/leaves/mist) lives
   in .bg-scene children and is untouched — a separate feature. */
#bg-fixed,
body::before,
.background-element {
    transform: none !important;
    will-change: auto !important;
    backface-visibility: hidden;
}

/* ============================================================
   V7.30 — APP FRAME: the page never scrolls.
   ------------------------------------------------------------
   Body is a locked 100dvh flex column:
     [ Hero — compact, pinned ]
     [ Shop Panel — fills the rest ]
          ├ Filter row (🔍 Filter + Category dropdown)
          ├ Scrollable shop list  ← the ONLY thing that scrolls
          └ Pagination bar (pinned)
   [ Bottom nav — fixed ]
   Background stays decorative + fixed. No parallax, no glitch.
   ============================================================ */
html, body {
    height: 100%;
}
body {
    overflow: hidden !important;
    height: 100dvh !important;
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    overscroll-behavior: none;
}

/* ---------- HERO: compact pinned header ---------- */
.hero {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 10px 12px 0 !important;
    padding: 10px 12px 12px !important;
    border-radius: 14px !important;
}
.hero-title {
    font-size: 1.1rem !important;
    letter-spacing: 3px !important;
    margin-bottom: 2px !important;
}
.hero-subtitle {
    font-size: 12px !important;
    margin-bottom: 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero-stats {
    gap: 6px !important;
    margin-bottom: 8px !important;
}
.hero-stats .stat {
    padding: 6px 10px !important;
    min-width: 84px !important;
    border-radius: 8px !important;
    gap: 2px !important;
}
.hero-stats .stat-value {
    font-size: 13px !important;
}
.hero-stats .stat-label {
    font-size: 7px !important;
}
.hero-actions {
    margin: 0 !important;
}
.hero-cta {
    min-height: 34px !important;
    padding: 7px 16px !important;
    font-size: 0.4rem !important;
}

/* ---------- SHOP PANEL: pixel game inventory frame ---------- */
body:has(#exploreBtn.active) .garden-container {
    flex: 1 1 auto;
    min-height: 0;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 8px 12px calc(64px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, #14240F 0%, #0C1808 100%) !important;
    border: 3px solid #5A4430 !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 0 rgba(0,0,0,0.55), 0 18px 40px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.08) !important;
    margin: 8px 12px 0 !important;
    max-width: none !important;
}

/* Filter row */
.panel-filter-row {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.panel-filter-btn {
    background: linear-gradient(180deg, #1F3320 0%, #142315 100%) !important;
    border: 2px solid #5A7A4A !important;
    border-radius: 8px !important;
    color: #F2E8CD !important;
    font-family: var(--font-pixel) !important;
    font-size: 0.42rem !important;
    letter-spacing: 1px !important;
    padding: 8px 12px !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.1) !important;
    cursor: pointer;
}
.panel-filter-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.5) !important;
}
.filter-label {
    color: #A9A68A !important;
    font-family: var(--font-pixel) !important;
    font-size: 0.4rem !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    white-space: nowrap;
}
.panel-category-select {
    flex: 1 1 auto;
    min-width: 0;
    background: #0E180C !important;
    border: 2px solid #5A7A4A !important;
    border-radius: 8px !important;
    color: #F2E8CD !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    padding: 8px 8px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5) !important;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23F5C842'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 26px !important;
    cursor: pointer;
}
.panel-category-select:focus {
    border-color: #F5C842 !important;
}
.panel-category-select option {
    background: #0E180C !important;
    color: #F2E8CD !important;
}

/* Location banner inside the panel */
body:has(#exploreBtn.active) .location-banner {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    flex: 0 0 auto;
}

/* ---------- THE ONLY SCROLLER: the shop list ---------- */
body:has(#exploreBtn.active) #gardenView {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #5A7A4A rgba(0,0,0,0.3);
}
#gardenView::-webkit-scrollbar {
    width: 6px;
}
#gardenView::-webkit-scrollbar-thumb {
    background: #5A7A4A;
    border-radius: 3px;
}
#gardenView::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3);
}

/* Empty state inside the scroller */
body:has(#exploreBtn.active) .empty-state {
    margin: 0 !important;
    padding: 40px 12px !important;
}

/* ---------- Pinned pagination bar ---------- */
.panel-pagination-bar {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 8px;
}
.panel-pagination-bar .pagination-container {
    margin: 0 !important;
}

/* ---------- Chat view fills the same frame ---------- */
body:has(#chatBtn.active) .garden-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}
body:has(#chatBtn.active) #gardenPaginationBar {
    display: none !important;
}
body:has(#chatBtn.active) #gardenTalksView {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
#gardenTalksView .talks-container {
    height: 100% !important;
    max-height: 100% !important;
}

/* Desktop: keep the panel readable but still framed */
@media (min-width: 768px) {
    body:has(#exploreBtn.active) .garden-container {
        margin: 12px auto 0 !important;
        width: min(760px, calc(100vw - 24px)) !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }
    .hero {
        margin: 12px auto 0 !important;
        width: min(760px, calc(100vw - 24px)) !important;
    }
    .hero-title {
        font-size: 1.3rem !important;
    }
    .hero-stats .stat {
        min-width: 110px !important;
        padding: 8px 16px !important;
    }
    .hero-cta {
        font-size: 0.5rem !important;
        min-height: 40px !important;
    }
}

/* ============================================================
   V7.31 — BUG-FIX PASS: RESPONSIVE & LAYOUT
   Only responsive/layout fixes. No UI redesign.
   Firebase logic, filters, search, pagination untouched.
   ============================================================ */

/* ------------------------------------------------------------
   2. COMMUNITY CHAT = header + messages + input ONLY
   The shop filter panel + location banner belong on Home only.
   ------------------------------------------------------------ */
body:has(#chatBtn.active) .panel-filter-row,
body:has(#chatBtn.active) .location-banner {
    display: none !important;
}

/* ------------------------------------------------------------
   3. FOOTER = Home (Explore) page only
   Hidden on Chat, Search, and anywhere else.
   ------------------------------------------------------------ */
.footer {
    display: none !important;
}
body:has(#exploreBtn.active) .footer {
    display: block !important;
}
body:has(#toolbarSearch.open) .footer {
    display: none !important;
}

/* ------------------------------------------------------------
   4. SHOP PANEL = fills most of the remaining screen height
   - hero + filters stay on top; the panel stretches below
   - pagination stays pinned at the panel bottom
   - footer stays OUTSIDE the panel (below it)
   - max-height leaves room for footer + bottom nav so the
     footer is always visible and the panel never overflows
   ------------------------------------------------------------ */
body:has(#exploreBtn.active) .garden-container {
    flex: 0 0 auto !important;       /* fixed panel height (no grow/shrink interference) */
    height: calc(100vh - 270px);
    height: calc(100dvh - 270px) !important;   /* fills most of the remaining screen */
    min-height: 240px !important;    /* sensible minimum */
}
@media (min-width: 769px) {
    body:has(#exploreBtn.active) .garden-container {
        min-height: 320px !important;
        height: calc(100vh - 295px);
        height: calc(100dvh - 295px) !important;
    }
}
/* the footer must never be squeezed out by the flex column */
.footer {
    flex: 0 0 auto !important;
}

/* ------------------------------------------------------------
   5. ONLY THE SHOP GRID SCROLLS
   gardenView = the scroller. The grid fills it entirely and
   rows stretch so cards use the whole panel height — no empty
   space between the last card row and the pagination. When
   there are more cards than fit, the grid overflows and
   gardenView scrolls internally (body never scrolls).
   ------------------------------------------------------------ */
body:has(#exploreBtn.active) #gardenView {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
body:has(#exploreBtn.active) #gardenGrid {
    flex: 1 0 auto !important;       /* fill the panel; never shrink below content */
    grid-auto-rows: 1fr !important;  /* rows stretch → cards fill vertical space */
}
/* stretched cards: paper area flexes, name bar sticks to the bottom */
body:has(#exploreBtn.active) #gardenGrid .flower-card {
    justify-content: space-between !important;
}
body:has(#exploreBtn.active) #gardenGrid .flower-inner {
    align-self: stretch !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    justify-content: center !important;
}

/* ------------------------------------------------------------
   1. MOBILE SHOP GRID = 2 cards per row
   Cards fill the panel height and the scroll area continues
   after the last visible row (no blank area before pagination).
   (Desktop layout untouched — this block is ≤600px only)
   ------------------------------------------------------------ */
@media (max-width: 600px) {
    body:has(#exploreBtn.active) #gardenGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    body:has(#exploreBtn.active) #gardenGrid .flower-card {
        min-height: 0 !important;
    }
    body:has(#exploreBtn.active) #gardenGrid .flower-inner {
        padding: 8px 6px 6px !important;
        gap: 4px !important;
    }
    body:has(#exploreBtn.active) #gardenGrid .sprite-animated-container {
        width: 52px !important;
        height: 52px !important;
    }
    body:has(#exploreBtn.active) #gardenGrid .flower-card-id {
        font-size: 0.38rem !important;
        padding: 4px 6px !important;
    }
}

/* ============================================================
   V7.32 — FULL-SCREEN SHOP MODEL
   Flipkart/Amazon/Meesho/Myntra search-result style: Home is a
   thin top bar + the shop grid fills the ENTIRE screen down to
   the bottom nav. No big hero banner, no footer on phones —
   the shops ARE the screen. Brand + "＋ List Your Shop" stay
   in the top bar. Chat/Search/Profile/etc. untouched.
   ============================================================ */

/* --- 1. Hero → thin full-width app header (brand left, CTA right) --- */
body:has(#exploreBtn.active) .hero {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    text-align: left !important;
    background: rgba(10, 20, 12, 0.92) !important;
    border: none !important;
    border-bottom: 2px solid #1a4a2a !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}
body:has(#exploreBtn.active) .hero-title {
    margin: 0 !important;
    font-size: 1.05rem !important;
    letter-spacing: 3px !important;
    text-shadow: 2px 2px 0 var(--bg-primary), 0 0 24px rgba(245, 200, 66, 0.2) !important;
}
body:has(#exploreBtn.active) .hero-subtitle,
body:has(#exploreBtn.active) .hero-stats {
    display: none !important;
}
body:has(#exploreBtn.active) .hero-actions {
    margin: 0 !important;
    flex: 0 0 auto !important;
}
body:has(#exploreBtn.active) .hero-cta {
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 0.4rem !important;
    white-space: nowrap !important;
}

/* --- 2. Panel: stretches to the bottom nav (grid = full screen) ---
   No footer on Home anymore (mobile AND desktop) — the shop
   grid fills the whole screen, Flipkart/Amazon style. */
body:has(#exploreBtn.active) .footer {
    display: none !important;
}

@media (max-width: 600px) {
    body:has(#exploreBtn.active) .garden-container {
        height: calc(100vh - 156px - env(safe-area-inset-bottom));
        height: calc(100dvh - 156px - env(safe-area-inset-bottom)) !important;
    }
}

@media (min-width: 601px) and (max-width: 768px) {
    body:has(#exploreBtn.active) .garden-container {
        height: calc(100vh - 180px - env(safe-area-inset-bottom));
        height: calc(100dvh - 180px - env(safe-area-inset-bottom)) !important;
    }
}

@media (min-width: 769px) {
    body:has(#exploreBtn.active) .garden-container {
        height: calc(100vh - 184px - env(safe-area-inset-bottom));
        height: calc(100dvh - 184px - env(safe-area-inset-bottom)) !important;
    }
    body:has(#exploreBtn.active) .hero {
        padding: 10px 16px !important;
    }
    body:has(#exploreBtn.active) .hero-title {
        font-size: 1.2rem !important;
    }
}

/* ============================================================
   V7.33 — DASHBOARD STATS RESTORED (slim strip under the header)
   🏪 Shops / 🟢 Online / 📅 Month-Year come back as a compact
   stat strip inside the thin header — the full-screen shop grid
   keeps its dashboard numbers without losing screen space.
   ============================================================ */
body:has(#exploreBtn.active) .hero {
    flex-wrap: wrap !important;
}
body:has(#exploreBtn.active) .hero-title {
    order: 1 !important;
}
body:has(#exploreBtn.active) .hero-actions {
    order: 2 !important;
}
body:has(#exploreBtn.active) .hero-stats {
    order: 3 !important;
    flex: 1 1 100% !important;         /* own row under brand + CTA */
    display: flex !important;
    justify-content: space-evenly !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 6px 0 0 !important;
    flex-wrap: nowrap !important;
}
body:has(#exploreBtn.active) .hero-stats .stat {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    padding: 4px 6px !important;
    background: rgba(0, 255, 136, 0.05) !important;
    border: 1px solid #1a4a2a !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}
body:has(#exploreBtn.active) .hero-stats .stat-label {
    margin: 0 !important;
    font-size: 0.3rem !important;
    color: #8aa878 !important;
    letter-spacing: 1px !important;
}
body:has(#exploreBtn.active) .hero-stats .stat-value {
    font-size: 0.62rem !important;
    color: #00ff88 !important;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.35) !important;
    line-height: 1.1 !important;
}

/* ============================================================
   V7.34 — "＋ List Your Shop" + 3-dot menu collision fix
   The CTA sat under the fixed top-right kebab menu. Push it
   left by reserving the kebab's corner (top-right 16px + 44px
   button) so they never overlap on any width.
   ============================================================ */
body:has(#exploreBtn.active) .hero {
    justify-content: flex-start !important;   /* brand + CTA grouped left */
}
body:has(#exploreBtn.active) .hero-actions {
    margin: 0 0 0 10px !important;            /* CTA sits right after the title */
    flex: 0 0 auto !important;
}
/* compact CTA on phones so brand + CTA always fit left of the 3-dot menu */
@media (max-width: 600px) {
    body:has(#exploreBtn.active) .hero-cta {
        min-height: 28px !important;
        padding: 4px 8px !important;
        font-size: 0.32rem !important;
    }
}
/* very small phones: shrink the brand a touch so nothing wraps */
@media (max-width: 360px) {
    body:has(#exploreBtn.active) .hero-title {
        font-size: 0.92rem !important;
        letter-spacing: 2px !important;
    }
    body:has(#exploreBtn.active) .hero-actions {
        margin-left: 8px !important;
    }
}
@media (max-width: 340px) {
    body:has(#exploreBtn.active) .hero-title {
        font-size: 0.85rem !important;
    }
    body:has(#exploreBtn.active) .hero-cta {
        font-size: 0.28rem !important;
        padding: 3px 6px !important;
    }
}

/* ============================================================
   V7.35 — COMPACT PAGINATION + MOBILE "+" FAB
   (1) The pagination strip is now ~50px tall: the grid ends
       right above "Page X / Y" and the panel's huge 64px
       bottom padding is gone — the last card row sits close
       to the pagination. Grid keeps all remaining height.
   (2) The wide "＋ List Your Shop" button becomes a 44×44 pixel
       FAB with a centered "+" — mobile AND laptop/desktop.
   ============================================================ */

/* ---------- 1. COMPACT PAGINATION (all sizes) ---------- */
body:has(#exploreBtn.active) .garden-container {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
}
.panel-pagination-bar {
    padding-top: 2px !important;
}
.panel-pagination-bar .pagination-container {
    padding: 0 !important;
    margin: 0 !important;
}
#gardenPaginationBar .garden-btn {
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 3px 12px !important;
    font-size: 0.4rem !important;
}

/* ---------- 2. "+" FAB (ALL sizes — mobile AND laptop/desktop) ---------- */
body:has(#exploreBtn.active) .hero {
    justify-content: space-between !important;   /* title left, FAB right */
}
body:has(#exploreBtn.active) .hero-actions {
    margin: 0 60px 0 0 !important;   /* clears the fixed 3-dot menu */
}
body:has(#exploreBtn.active) .hero-cta {
    position: relative !important;   /* anchor for the absolute "+" */
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    letter-spacing: 0 !important;    /* stray text can't nudge the "+" */
    border-radius: 10px !important;  /* rounded square, NOT a circle */
    background: linear-gradient(180deg, #F8D05A 0%, #F0B62E 55%, #B07F1E 100%) !important;
    border: 3px solid #5A4430 !important;
    box-shadow: 0 3px 0 #2A1D0F, 0 5px 12px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.35) !important;
    font-size: 0 !important;         /* hide the wide text label */
    overflow: hidden;
}
body:has(#exploreBtn.active) .hero-cta::before {
    content: '';
    position: absolute !important;   /* out of flex flow → ignores the hidden text */
    inset: 0 !important;
    margin: auto !important;         /* dead-center of the button, always */
    width: 18px;
    height: 18px;
    /* chunky pixel "+" drawn with two gradient strips */
    background:
        linear-gradient(#FFFFFF, #FFFFFF) center / 100% 4px no-repeat,
        linear-gradient(#FFFFFF, #FFFFFF) center / 4px 100% no-repeat;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}
/* retro press: sinks 2px + soft glow, then opens List Shop */
body:has(#exploreBtn.active) .hero-cta:active {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 0 #2A1D0F, 0 0 20px rgba(245, 200, 66, 0.75), inset 0 2px 0 rgba(255, 255, 255, 0.35) !important;
    animation: fabGlow 0.3s ease !important;
}

/* mobile keeps its tuned panel reserve (44px FAB header) */
@media (max-width: 600px) {
    body:has(#exploreBtn.active) .garden-container {
        height: calc(100vh - 172px - env(safe-area-inset-bottom));
        height: calc(100dvh - 172px - env(safe-area-inset-bottom)) !important;
    }
}

@keyframes fabGlow {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(1.3); }
    100% { filter: brightness(1); }
}

/* ---------- 3. FIRST-VISIT FAB TOOLTIP (all sizes) ---------- */
.fab-tooltip {
    position: absolute;
    top: 66px;
    right: 66px;
    z-index: 60;
    display: none;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #2A1D0F 0%, #1C1207 100%);
    border: 2px solid #5A4430;
    border-radius: 8px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.4);
    padding: 6px 10px;
    font-family: var(--font-pixel);
    font-size: 0.32rem;
    color: #F5C842;
    letter-spacing: 1px;
    white-space: nowrap;
}
.fab-tooltip-close {
    background: none;
    border: none;
    padding: 0;
    color: #A9A68A;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}
.fab-tooltip-close:hover {
    color: #F5C842;
}
/* laptop/desktop: tooltip sits below the FAB (top: 74px) with readable pixel type */
@media (min-width: 769px) {
    .fab-tooltip {
        top: 74px;
        padding: 8px 14px;
        font-size: 0.6rem;
    }
    .fab-tooltip-close {
        font-size: 1.1rem;
    }
}

/* V7.35b — re-assert role sync: non-owners never see the "+" FAB
   (the FAB's display:flex must not beat the V6.3 role rule) */
body:has(#addFlowerBtn[style*="display: none"]) .hero-cta {
    display: none !important;
}

/* ============================================================
   V7.36 — SHOP CARD 4-SECTION LAYOUT (alignment/hierarchy only)
   Every .flower-card becomes a clean 4-row stack:
     ROW 1  top bar:  [category icon]  [PLAN badge]  [#rank]
     ROW 2  sprite area: dedicated, sprite centered, no floats
     ROW 3  name strip: full width, centered
     ROW 4  location:   📍 small, truncated with …
   Same sizes, colors, fonts, plan badges — pure repositioning.
   ============================================================ */

/* --- card = 4-row grid --- */
.flower-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    align-content: stretch !important;
}

/* --- ROW 1 · category icon (left, same circle/size/colors) --- */
.category-badge {
    position: static !important;
    top: auto !important;
    left: auto !important;
    grid-area: 1 / 1;
    justify-self: start;
    align-self: center;
}

/* --- ROW 1 · plan badge (center) — the pill itself is untouched ---
   The JS wrapper has inline style "position:absolute;inset:0" which Chrome
   serializes as "inset: 0px" — that's the only card child using `inset`,
   so it's a safe unique hook. */
.flower-card > div[style*="inset: 0px"] {
    grid-area: 1 / 2;
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none !important;
    z-index: 6;
}
.flower-card > div[style*="inset: 0px"] > div {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
}

/* --- ROW 1 · shop id / rank badge (right, same style) --- */
.rank-badge-small {
    position: static !important;
    top: auto !important;
    right: auto !important;
    grid-area: 1 / 3;
    justify-self: end;
    align-self: center;
}

/* --- CLOSED badge → top bar center slot (never covers the icon) --- */
.shop-status-badge {
    position: static !important;
    top: auto !important;
    left: auto !important;
    grid-area: 1 / 2;
    justify-self: center;
    align-self: center;
    z-index: 7;
}

/* --- ROW 2+3 · sprite area + name strip --- */
.flower-inner {
    grid-area: 2 / 1 / 4 / 4;
    justify-self: stretch;
    align-self: stretch;
    min-height: 0;
}
.flower-card .sprite-animated-container {
    margin: auto !important;            /* sprite dead-centered in its area */
}
.flower-card-id {
    margin-top: 0 !important;           /* name strip owns its row, sticks to bottom */
    flex-shrink: 0;
}

/* --- ROW 4 · location below the name — small, pinned, truncates --- */
.city-badge {
    grid-area: 4 / 1 / 5 / 4;
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    justify-self: start;
    align-self: start;
    margin: 2px 0 0 2px !important;
    max-width: calc(100% - 4px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- narrow cards: keep the 3 top-bar items inside the card ---
   Same colors/order/shape; only the two text pills get slightly
   smaller so category + plan + rank never overlap on small phones. */
@media (max-width: 600px) {
    .rank-badge-small {
        font-size: 0.22rem !important;
        padding: 1px 4px !important;
    }
    .flower-card > div[style*="inset: 0px"] > div {
        zoom: 0.85;
    }
}
@media (max-width: 360px) {
    .category-badge {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.68rem !important;
    }
    .rank-badge-small {
        font-size: 0.18rem !important;
        padding: 1px 3px !important;
    }
    .flower-card > div[style*="inset: 0px"] > div {
        zoom: 0.65;
    }
}

/* ============================================================
   V7.37 - CHAT INPUT CLEARS THE BOTTOM NAV (incl. safe area)
   The bottom nav is position:fixed and grows by
   env(safe-area-inset-bottom) on phones with a home indicator
   (~34px). The old fixed 78px body padding only cleared a 53px
   nav, so on such phones the community-chat typing bar slipped
   UNDER the nav and couldn't be tapped/typed. Adding the inset
   keeps the same 25px of slack at every screen.
   ============================================================ */
body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
}

/* --- Chat input focused = keyboard open: keep the typing bar
   above the keyboard and out from under the fixed bottom nav.
   The chat layout cannot scroll, so collapse the locked body to
   the SMALL viewport while typing (harmless on desktop, where
   svh == dvh) and hide the nav so it never covers the input. --- */
body:has(#talksInput:focus) {
    height: 100svh !important;
}
body:has(#talksInput:focus) .bottom-nav {
    display: none !important;
}

/* ============================================================
   V7.38 - REMOVE DEAD "🔍 Filter" BUTTON (home page)
   Its only handler focuses the toolbar search field, which is
   hidden — clicking it does nothing. The Category dropdown next
   to it still works, so only the lens button is removed.
   ============================================================ */
#panelFilterBtn {
    display: none !important;
}

/* ============================================================
   V7.39 - SHOP OFFERS (detail modal, between Items & Share)
   Time-limited offer card: readable VT323 text, gold badge,
   live countdown. Owner gets an editor to post/remove offers.
   ============================================================ */
.offer-card {
    background: linear-gradient(180deg, #1E2F1A 0%, #14220F 100%);
    border: 2px solid #F5C842;
    border-radius: 10px;
    padding: 16px 14px;
    box-shadow: 0 0 0 2px #0a1410, 0 0 18px rgba(245, 200, 66, 0.14), inset 0 2px 0 rgba(255, 255, 255, 0.06);
    margin-bottom: 12px;
}
.offer-badge {
    display: inline-block;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: #0a1410;
    background: linear-gradient(180deg, #F8D05A 0%, #E8B62E 100%);
    border: 2px solid #5A4430;
    border-radius: 4px;
    padding: 4px 8px;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}
.offer-text {
    font-family: var(--font-body);
    font-size: 1.25rem;
    line-height: 1.45;
    color: #F2E8CD;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 10px;
}
.offer-expiry {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.3rem;
    color: #F5C842;
    border-top: 1px dashed #3a5a2a;
    padding-top: 8px;
}
.offer-countdown {
    color: #00ff88;
}
.offer-empty {
    text-align: center;
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: #a8c8a8;
    padding: 30px 10px;
    line-height: 1.5;
    border: 2px dashed #2a4a2a;
    border-radius: 10px;
    margin-bottom: 12px;
}
.offer-empty-sub {
    font-size: 0.95rem;
    color: #6a8a6a;
}
.offer-editor {
    background: #0f1f14;
    border: 2px solid #2a6a3a;
    border-radius: 10px;
    padding: 12px;
}
.offer-editor-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    color: #F5C842;
    margin-bottom: 10px;
}
.offer-input {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    box-sizing: border-box;
    background: #0a1410;
    border: 2px solid #2a6a3a;
    border-radius: 6px;
    color: #F2E8CD;
    font-family: var(--font-body);
    font-size: 1.1rem;
    padding: 8px 10px;
    outline: none;
}
.offer-input:focus {
    border-color: #00ff88;
}
.offer-input::placeholder {
    color: #5a7a5a;
}
.offer-duration-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.3rem;
    color: #a8c8a8;
}
.offer-duration-select {
    flex: 1;
    min-width: 0;
    background: #0a1410;
    border: 2px solid #2a6a3a;
    border-radius: 6px;
    color: #F2E8CD;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    padding: 6px 8px;
}
.offer-set-btn {
    width: 100%;
    background: linear-gradient(180deg, #2EE06A 0%, #1EBE56 100%);
    border: 2px solid #0f4a2a;
    border-radius: 8px;
    color: #07120A;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    padding: 12px;
    cursor: pointer;
    box-shadow: 0 3px 0 #0a3a1a;
}
.offer-set-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #0a3a1a;
}
.offer-set-btn:disabled {
    opacity: 0.5;
}
.offer-clear-btn {
    width: 100%;
    margin-top: 8px;
    background: rgba(120, 20, 20, 0.35);
    border: 2px solid #7a2a2a;
    border-radius: 8px;
    color: #ff9a9a;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    padding: 10px;
    cursor: pointer;
}
.offer-clear-btn:active {
    transform: translateY(2px);
}
.offer-clear-btn:disabled {
    opacity: 0.5;
}

/* ============================================================
   V7.40 — MULTIPLE OFFERS (subcollection)
   Each offer card gets its own small Remove button (owner only).
   ============================================================ */
.offer-card .offer-del-btn {
    margin-top: 10px;
    align-self: flex-end;
    background: rgba(120, 20, 20, 0.35);
    border: 2px solid #7a2a2a;
    border-radius: 6px;
    color: #ff9a9a;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    padding: 7px 10px;
    cursor: pointer;
    box-shadow: 0 2px 0 #3a1010;
}
.offer-card .offer-del-btn:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 #3a1010;
}
.offer-card .offer-del-btn:disabled {
    opacity: 0.5;
}

/* ============================================================
   V7.42 — ADMIN PANEL (hidden dashboard, role-gated)
   ============================================================ */
.admin-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(4, 10, 6, 0.82);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.admin-overlay.active {
    display: flex;
}
.admin-panel {
    width: min(980px, 100%);
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    background: #0b1a10;
    border: 3px solid #2a6a3a;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    overflow: hidden;
}
.admin-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #12331c 0%, #0b1a10 100%);
    border-bottom: 2px solid #2a6a3a;
}
.admin-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    color: #F2E8CD;
    letter-spacing: 1px;
}
.admin-role-tag {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.42rem;
    color: #FFD700;
    border: 1px solid #8a6d00;
    border-radius: 6px;
    padding: 4px 8px;
    background: rgba(255, 215, 0, 0.08);
}
.admin-close {
    margin-left: auto;
    background: rgba(120, 20, 20, 0.4);
    border: 2px solid #7a2a2a;
    border-radius: 8px;
    color: #ff9a9a;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    padding: 8px 12px;
    cursor: pointer;
}
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    background: #08120b;
    border-bottom: 2px solid #1a3a22;
}
.admin-tab-btn {
    background: #10241a;
    border: 2px solid #2a5a3a;
    border-radius: 6px;
    color: #B8D9B0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.35rem;
    padding: 7px 9px;
    cursor: pointer;
}
.admin-tab-btn.active {
    background: #1e5a2e;
    border-color: #2EE06A;
    color: #fff;
}
.admin-tab-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
}
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.admin-stat-card {
    background: #10241a;
    border: 2px solid #2a5a3a;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.admin-stat-icon { font-size: 1.4rem; }
.admin-stat-value {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1rem;
    color: #2EE06A;
    margin: 6px 0 4px;
}
.admin-stat-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.32rem;
    color: #9db89a;
}
.admin-tip {
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: #8fa890;
}
.admin-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-search-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-search {
    flex: 1;
    min-width: 120px;
    background: #0a1410;
    border: 2px solid #2a6a3a;
    border-radius: 6px;
    color: #F2E8CD;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 8px 10px;
}
.admin-search.narrow {
    flex: 0 1 auto;
    width: 110px;
    min-width: 90px;
}
.admin-btn {
    background: #1a2e1e;
    border: 2px solid #2a6a3a;
    border-radius: 6px;
    color: #d8e8d0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.34rem;
    padding: 9px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.admin-btn.green {
    background: linear-gradient(180deg, #2EE06A 0%, #1EBE56 100%);
    border-color: #0f4a2a;
    color: #07120A;
}
.admin-btn.red {
    background: rgba(120, 20, 20, 0.4);
    border-color: #7a2a2a;
    color: #ff9a9a;
}
.admin-btn.small {
    font-size: 0.3rem;
    padding: 6px 8px;
}
.admin-btn:disabled {
    opacity: 0.5;
}
.admin-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0e1d13;
    border: 2px solid #1e4028;
    border-radius: 8px;
    padding: 8px 10px;
    flex-wrap: wrap;
}
.admin-row-main {
    flex: 1;
    min-width: 160px;
}
.admin-row-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.4rem;
    color: #F2E8CD;
    word-break: break-word;
}
.admin-row-sub {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: #7fa088;
    margin-top: 3px;
    word-break: break-word;
}
.admin-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    /* V7.43 — always give actions their own full-width line so the
       buttons (Stop/Resume/Delete/Set Days) never get squeezed or
       hidden next to the info text on narrow phones */
    flex: 1 1 100%;
    justify-content: flex-end;
}
.admin-status {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.3rem;
    padding: 4px 6px;
    border-radius: 5px;
    border: 1px solid;
    white-space: nowrap;
}
.admin-status.approved { color: #2EE06A; border-color: #2EE06A; }
.admin-status.pending { color: #FFD700; border-color: #FFD700; }
.admin-status.rejected { color: #ff6a6a; border-color: #ff6a6a; }
.admin-empty {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: #8fa890;
    padding: 20px;
    text-align: center;
}
.admin-plans-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.admin-plan-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #0e1d13;
    border: 2px solid #1e4028;
    border-radius: 8px;
    padding: 10px;
}
.admin-plan-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.34rem;
    color: #FFD700;
}
.admin-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: #B8D9B0;
    margin: 12px 0;
}
/* V7.42 — claim shop box (info tab) */
.info-claim-box {
    margin-top: 10px;
    background: rgba(255, 215, 0, 0.05);
    border: 2px dashed #8a6d00;
    border-radius: 8px;
    padding: 10px;
}
.info-claim-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.32rem;
    color: #FFD700;
    margin-bottom: 8px;
}
.info-claim-row {
    display: flex;
    gap: 6px;
}
.info-claim-input {
    flex: 1;
    min-width: 0;
    background: #0a1410;
    border: 2px solid #2a6a3a;
    border-radius: 6px;
    color: #F2E8CD;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 8px 10px;
}
.info-claim-btn {
    background: linear-gradient(180deg, #FFD700 0%, #E0B800 100%);
    border: 2px solid #8a6d00;
    border-radius: 6px;
    color: #3a2d00;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.34rem;
    padding: 8px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.info-claim-btn:disabled {
    opacity: 0.5;
}

/* ============================================================
   V7.44 — Toast always on top (above the admin panel overlay).
   The toast (z 9999) rendered BEHIND the admin overlay (z 100000),
   so success/error messages looked like a blurry rectangle at the
   bottom of the screen when the admin panel was open.
   ============================================================ */
#mossageToast {
    z-index: 200000 !important;
}

/* ============================================================
   V7.48 — ADMIN PANEL UI POLISH (visual only — no layout or
   behavior changes; same palette, chunky pixel style)
   ============================================================ */
.admin-panel {
    border-color: #2a6a3a;
    box-shadow: 0 0 0 2px #08120b, 0 0 0 5px rgba(46, 224, 106, 0.12), 0 12px 48px rgba(0, 0, 0, 0.75);
}
.admin-overlay {
    backdrop-filter: blur(6px);
}
.admin-head {
    background: linear-gradient(180deg, #14401f 0%, #0b1a10 100%);
    box-shadow: inset 0 2px 0 rgba(46, 224, 106, 0.10);
}
.admin-title {
    text-shadow: 0 0 12px rgba(46, 224, 106, 0.35);
}
.admin-role-tag {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
    background: rgba(255, 215, 0, 0.10);
}
.admin-close {
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.admin-close:hover {
    background: rgba(160, 30, 30, 0.55);
    border-color: #a03030;
    color: #ffd0d0;
}
.admin-tab-btn {
    background: #0f2118;
    border-color: #244d30;
    color: #9dba96;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}
.admin-tab-btn:hover {
    background: #163522;
    border-color: #2EE06A;
    color: #ffffff;
}
.admin-tab-btn.active {
    background: linear-gradient(180deg, #25c95c 0%, #1a9e47 100%);
    border-color: #2EE06A;
    color: #06130a;
    text-shadow: none;
    box-shadow: 0 0 12px rgba(46, 224, 106, 0.35), 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.admin-stat-card {
    background: linear-gradient(180deg, #12281c 0%, #0e1d13 100%);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.admin-stat-card:hover {
    border-color: #2EE06A;
    transform: translateY(-2px);
    box-shadow: 0 0 14px rgba(46, 224, 106, 0.18), 2px 4px 0 rgba(0, 0, 0, 0.4);
}
.admin-stat-value {
    text-shadow: 0 0 10px rgba(46, 224, 106, 0.4);
}
.admin-row {
    background: #0d1c12;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}
.admin-row:hover {
    border-color: #2a6a3a;
    background: #10241a;
}
.admin-status {
    background: rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.admin-status.approved { background: rgba(46, 224, 106, 0.10); }
.admin-status.pending { background: rgba(255, 215, 0, 0.10); }
.admin-status.rejected { background: rgba(255, 106, 106, 0.10); }
.admin-btn {
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.admin-btn:hover {
    background: #22432a;
    border-color: #2EE06A;
    color: #ffffff;
}
.admin-btn.green:hover {
    background: linear-gradient(180deg, #46ff85 0%, #28d163 100%);
    border-color: #0f4a2a;
    color: #06130a;
}
.admin-btn.red:hover {
    background: rgba(160, 30, 30, 0.55);
    border-color: #a03030;
    color: #ffd0d0;
}
.admin-btn:active {
    transform: translateY(1px);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}
.admin-search:focus {
    outline: none;
    border-color: #2EE06A;
    box-shadow: 0 0 0 2px rgba(46, 224, 106, 0.15);
}
.admin-tab-body::-webkit-scrollbar { width: 10px; }
.admin-tab-body::-webkit-scrollbar-track { background: #08120b; }
.admin-tab-body::-webkit-scrollbar-thumb { background: #1e4028; border-radius: 6px; border: 2px solid #08120b; }
.admin-tab-body::-webkit-scrollbar-thumb:hover { background: #2a6a3a; }
.admin-empty {
    border: 2px dashed #1e4028;
    border-radius: 10px;
    background: rgba(14, 29, 19, 0.4);
}
.admin-tip {
    background: rgba(46, 224, 106, 0.06);
    border: 1px solid #1e4028;
    border-left: 4px solid #2EE06A;
    border-radius: 8px;
    padding: 10px 12px;
}
.admin-plan-box:hover {
    border-color: #2a6a3a;
}
.admin-plan-label {
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

/* ============================================================
   V7.49 — ADMIN PANEL "DARK COMMAND CENTER" (war-room skin)
   Visual-only redesign. No layout/behavior changes to JS logic.
   Same real class names as V7.42 markup.
   ============================================================ */

/* ---------- OVERLAY + PANEL ---------- */
.admin-overlay {
    background: rgba(2, 8, 4, 0.92);
    backdrop-filter: blur(6px);
}
.admin-panel {
    background: linear-gradient(180deg, #0a1f0f 0%, #060f07 100%);
    border: 2px solid #1a4a2a;
    border-radius: 12px;
    box-shadow: 0 0 0 1px #0a2a14, 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 255, 136, 0.05);
}

/* ---------- HEADER ---------- */
.admin-head {
    background: linear-gradient(90deg, #0f2a18 0%, #0a1f12 100%);
    border-bottom: 2px solid #1a4a2a;
    border-radius: 10px 10px 0 0;
    padding: 14px 16px;
    box-shadow: none;
}
.admin-title {
    color: #ffffff;
    font-size: 11px;
    letter-spacing: 2px;
    text-shadow: 0 0 14px rgba(0, 255, 136, 0.25);
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-title::before {
    content: '🛡';
    font-size: 20px;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}
.admin-role-tag {
    background: linear-gradient(135deg, #f5c842 0%, #d4a010 100%);
    border: 1px solid #f5d060;
    border-radius: 4px;
    color: #1a0f00;
    font-size: 8px;
    padding: 4px 10px;
    box-shadow: 0 2px 8px rgba(245, 200, 66, 0.3);
    text-shadow: none;
}
.admin-close {
    background: linear-gradient(180deg, #cc3333 0%, #991111 100%);
    border: 2px solid #ff5555;
    border-bottom: 3px solid #661111;
    border-radius: 6px;
    color: #ffffff;
    width: 36px;
    height: 36px;
    font-size: 14px;
    box-shadow: 0 3px 0 #440000;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-close:hover {
    background: linear-gradient(180deg, #e84444 0%, #b01818 100%);
    color: #ffffff;
    border-color: #ff7777;
}

/* ---------- TABS ---------- */
.admin-tabs {
    background: #060f07;
    border-bottom: 2px solid #0f2a14;
    padding: 10px 12px;
}
.admin-tab-btn {
    background: #0a1f0f;
    border: 1px solid #1a3a22;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 7px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: none;
    line-height: 1.4;
}
.admin-tab-btn:hover {
    background: #0f2a18;
    border-color: #2a5a36;
    color: rgba(255, 255, 255, 0.7);
}
.admin-tab-btn.active {
    background: linear-gradient(180deg, #1a4a2a 0%, #0f2a18 100%);
    border: 1px solid #00ff88;
    border-bottom: 2px solid #006630;
    color: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.2), inset 0 1px 0 rgba(0, 255, 136, 0.1);
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

/* ---------- DASHBOARD STATS ---------- */
.admin-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px;
}
@media (min-width: 640px) {
    .admin-stats-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        padding: 16px;
    }
}
.admin-stat-card {
    background: linear-gradient(180deg, #0d1f12 0%, #080f09 100%);
    border: 1px solid #1a3a22;
    border-radius: 8px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: none;
    transition: border-color 0.15s, transform 0.15s;
}
.admin-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ff88, transparent);
    opacity: 0.5;
}
.admin-stat-card:hover {
    border-color: #2a5a36;
    transform: translateY(-2px);
    box-shadow: 0 0 14px rgba(0, 255, 136, 0.12);
}
.admin-stat-icon {
    font-size: 28px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
.admin-stat-value {
    color: #00ff88;
    font-size: 20px;
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
    margin: 0;
}
.admin-stat-label {
    color: rgba(255, 255, 255, 0.35);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.6;
}
/* Per-stat colors (dashboard order: Shops, Pending Reports, Admins, Users, Chat) */
.admin-stat-card:nth-child(2) {
    border-color: rgba(255, 68, 68, 0.35);
}
.admin-stat-card:nth-child(2)::before {
    background: linear-gradient(90deg, transparent, #ff4444, transparent);
    animation: v749-pulse-border 2s infinite;
}
.admin-stat-card:nth-child(2) .admin-stat-value {
    color: #ff4444;
    text-shadow: 0 0 15px rgba(255, 68, 68, 0.5);
}
.admin-stat-card:nth-child(3)::before {
    background: linear-gradient(90deg, transparent, #f5c842, transparent);
}
.admin-stat-card:nth-child(3) .admin-stat-value {
    color: #f5c842;
    text-shadow: 0 0 15px rgba(245, 200, 66, 0.5);
}
.admin-stat-card:nth-child(4)::before {
    background: linear-gradient(90deg, transparent, #66aaff, transparent);
}
.admin-stat-card:nth-child(4) .admin-stat-value {
    color: #66aaff;
    text-shadow: 0 0 15px rgba(102, 170, 255, 0.5);
}
.admin-stat-card:nth-child(5)::before {
    background: linear-gradient(90deg, transparent, #aa88ff, transparent);
}
.admin-stat-card:nth-child(5) .admin-stat-value {
    color: #aa88ff;
    text-shadow: 0 0 15px rgba(170, 136, 255, 0.5);
}
@keyframes v749-pulse-border {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ---------- SECURITY NOTICE (dashboard tip) ---------- */
.admin-tip {
    background: rgba(0, 255, 136, 0.04);
    border: 1px solid rgba(0, 255, 136, 0.15);
    border-left: 3px solid #00ff88;
    border-radius: 4px;
    padding: 10px 14px;
    margin: 0 14px 14px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 7px;
    line-height: 1.8;
}
@media (min-width: 640px) {
    .admin-tip {
        margin: 0 16px 16px;
    }
}

/* ---------- SEARCH + INPUTS ---------- */
.admin-search {
    background: #0a1a0d;
    border: 1px solid #1a3a22;
    border-radius: 6px;
    color: #c8e5c8;
    font-family: 'VT323', var(--font-mono);
    font-size: 16px;
    padding: 10px 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-search:focus {
    border-color: #00ff88;
    outline: none;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.15);
}
.admin-search.narrow {
    width: 110px;
    min-width: 90px;
    font-size: 14px;
    padding: 8px 10px;
}
select.admin-search {
    color: #00ff88;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0l4 6 4-6z' fill='%2300ff88'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 26px;
    width: auto;
}
select.admin-search option {
    background: #0a1a0d;
    color: #c8e5c8;
}

/* ---------- BUTTONS ---------- */
.admin-btn {
    background: linear-gradient(180deg, #1a3a2a 0%, #0f2218 100%);
    border: 1px solid #2a6a3a;
    border-radius: 6px;
    color: #d8e8d0;
    font-size: 8px;
    padding: 9px 12px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
    transition: all 0.15s;
    line-height: 1.4;
}
.admin-btn:hover {
    background: linear-gradient(180deg, #24563a 0%, #163024 100%);
    border-color: #3a8a4a;
    color: #ffffff;
    transform: translateY(-1px);
}
.admin-btn:active {
    transform: translateY(1px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
}
.admin-btn.small {
    font-size: 8px;
    padding: 7px 10px;
    border-radius: 4px;
}
/* Primary green (Add Admin / Save Plans / Approve) */
.admin-btn.green {
    background: linear-gradient(180deg, #00cc55 0%, #009940 100%);
    border: 2px solid #00ff88;
    border-bottom: 3px solid #006630;
    border-radius: 6px;
    color: #ffffff;
    font-size: 8px;
    padding: 10px 16px;
    box-shadow: 0 3px 0 #004420;
}
.admin-btn.green:hover {
    background: linear-gradient(180deg, #14e065 0%, #00a848 100%);
    color: #ffffff;
    border-color: #46ff96;
}
/* Danger red (Reject / Remove / Delete) */
.admin-btn.red {
    background: linear-gradient(180deg, #4a1a1a 0%, #2a0f0f 100%);
    border: 1px solid #7a2a2a;
    border-radius: 4px;
    color: #ff8888;
    box-shadow: 0 2px 0 #1a0000;
}
.admin-btn.red:hover {
    background: linear-gradient(180deg, #6a2525 0%, #3a1414 100%);
    border-color: #a03030;
    color: #ffaaaa;
}

/* ---------- LISTINGS ROWS (scoped via :has status badge) ---------- */
.admin-row {
    background: linear-gradient(180deg, #0d1f12 0%, #080f09 100%);
    border: 1px solid #1a3a22;
    border-radius: 8px;
    padding: 12px;
    box-shadow: none;
    transition: border-color 0.15s, background 0.15s;
}
.admin-row:hover {
    border-color: #2a5a36;
    background: linear-gradient(180deg, #10241a 0%, #0a140c 100%);
}
.admin-row:has(> .admin-status) {
    position: relative;
}
.admin-row:has(> .admin-status) .admin-row-main {
    padding-right: 104px;
}
.admin-row-title {
    font-size: 9px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.6;
}
.admin-row-sub {
    color: rgba(255, 255, 255, 0.35);
    font-family: 'VT323', var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.5px;
    margin-top: 4px;
    line-height: 1.5;
}
/* Status badge (listings only) — top-right of the row header */
.admin-status {
    font-size: 7px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: none;
}
.admin-status.approved {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: #00ff88;
}
.admin-status.pending {
    background: rgba(245, 200, 66, 0.1);
    border: 1px solid rgba(245, 200, 66, 0.3);
    color: #f5c842;
}
.admin-status.rejected {
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    color: #ff6666;
}
/* Listing action buttons by position:
   1=Edit(gray-green) 2=Approve(green) 3=Reject(red) 4=Unlist(gold) 5=Delete(dark red) 6=Transfer(blue) */
.admin-row:has(> .admin-status) .admin-row-actions .admin-btn:nth-child(1) {
    background: #1a3a2a;
    border: 1px solid #2a5a3a;
    color: #88cc88;
}
.admin-row:has(> .admin-status) .admin-row-actions .admin-btn:nth-child(2) {
    background: linear-gradient(180deg, #1a5a2a 0%, #0f3a1a 100%);
    border: 1px solid #2a8a3a;
    color: #00ff88;
    box-shadow: 0 2px 0 #074a14;
}
.admin-row:has(> .admin-status) .admin-row-actions .admin-btn:nth-child(2):hover {
    background: linear-gradient(180deg, #227a36 0%, #14521f 100%);
    color: #46ff96;
}
.admin-row:has(> .admin-status) .admin-row-actions .admin-btn:nth-child(3) {
    background: linear-gradient(180deg, #4a1a1a 0%, #2a0f0f 100%);
    border: 1px solid #7a2a2a;
    color: #ff8888;
    box-shadow: 0 2px 0 #1a0000;
}
.admin-row:has(> .admin-status) .admin-row-actions .admin-btn:nth-child(4) {
    background: linear-gradient(180deg, #3a2a0a 0%, #221a06 100%);
    border: 1px solid #6a4a1a;
    color: #f5c842;
    box-shadow: 0 2px 0 #1a1202;
}
.admin-row:has(> .admin-status) .admin-row-actions .admin-btn:nth-child(4):hover {
    background: linear-gradient(180deg, #4a380f 0%, #2e2408 100%);
    color: #ffe06a;
}
.admin-row:has(> .admin-status) .admin-row-actions .admin-btn:nth-child(5) {
    background: linear-gradient(180deg, #5a0a0a 0%, #3a0606 100%);
    border: 1px solid #8a1a1a;
    color: #ff4444;
    box-shadow: 0 2px 0 #220000;
}
.admin-row:has(> .admin-status) .admin-row-actions .admin-btn:nth-child(5):hover {
    background: linear-gradient(180deg, #7a1010 0%, #4a0808 100%);
    color: #ff6666;
}
.admin-row:has(> .admin-status) .admin-row-actions .admin-btn:nth-child(6) {
    background: #1a1a3a;
    border: 1px solid #2a2a6a;
    color: #8888ff;
    box-shadow: 0 2px 0 #0a0a22;
}
.admin-row:has(> .admin-status) .admin-row-actions .admin-btn:nth-child(6):hover {
    background: #242458;
    border-color: #3a3a8a;
    color: #aaaaff;
}
/* Refresh / Generate (first neutral button in a search row) */
.admin-search-row > .admin-btn:not(.green):not(.red) {
    background: linear-gradient(180deg, #1a3a2a 0%, #0f2218 100%);
    border: 1px solid #2a6a3a;
    color: #00ff88;
}
.admin-search-row > .admin-btn:not(.green):not(.red):hover {
    background: linear-gradient(180deg, #24563a 0%, #163024 100%);
    border-color: #3a8a4a;
    color: #46ff96;
}

/* ---------- PLANS ---------- */
.admin-plan-box {
    background: linear-gradient(180deg, #0d1f12 0%, #080f09 100%);
    border: 1px solid #1a3a22;
    border-radius: 8px;
    padding: 12px;
    transition: border-color 0.15s;
}
.admin-plan-box:hover {
    border-color: #2a5a36;
}
.admin-plan-label {
    color: #f5c842;
    font-size: 8px;
    text-shadow: 0 0 8px rgba(245, 200, 66, 0.2);
}
.admin-check-row {
    color: #c8e5c8;
    font-size: 14px;
}

/* ---------- LOADING / EMPTY / ERROR ---------- */
.admin-empty {
    background: #0a1a0d;
    border: 1px dashed #1a3a22;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin: 14px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 9px;
    line-height: 1.8;
    animation: v749-softpulse 2.4s ease-in-out infinite;
}
@keyframes v749-softpulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

/* ---------- SCROLLBAR ---------- */
.admin-panel::-webkit-scrollbar { width: 4px; }
.admin-panel::-webkit-scrollbar-track { background: #050f08; }
.admin-panel::-webkit-scrollbar-thumb { background: #1a4a2a; border-radius: 0; }
.admin-panel::-webkit-scrollbar-thumb:hover { background: #00ff88; }
.admin-tab-body::-webkit-scrollbar { width: 4px; }
.admin-tab-body::-webkit-scrollbar-track { background: #050f08; }
.admin-tab-body::-webkit-scrollbar-thumb { background: #1a4a2a; border-radius: 0; }
.admin-tab-body::-webkit-scrollbar-thumb:hover { background: #00ff88; }

/* ============================================================
   V7.54 — MOSSAGE ID CARD (digital ID like Aadhaar/PAN)
   ============================================================ */
.mossage-id-modal { background: linear-gradient(180deg, #0b2215 0%, #0e2c1b 100%) !important; }
.mid-preview { display: flex; justify-content: center; padding: 12px 0 18px; }
.mid-card {
    width: 100%;
    max-width: 580px;
    aspect-ratio: 580 / 372;
    position: relative;
    background: linear-gradient(135deg, #0d2818 0%, #1a4d2e 55%, #0a1a10 100%);
    border: 3px solid rgba(212, 175, 55, 0.9);
    border-radius: 18px;
    padding: 22px 26px;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15), 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 0 60px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}
.mid-card::after {
    content: '🌿';
    position: absolute;
    right: -14px;
    bottom: -26px;
    font-size: 170px;
    opacity: 0.06;
    transform: rotate(-12deg);
    pointer-events: none;
}
.mid-top { display: flex; align-items: center; gap: 12px; }
.mid-logo { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #d4af37; background: #fff; object-fit: cover; }
.mid-brand { display: flex; flex-direction: column; line-height: 1.1; }
.mid-brand-name { font-family: 'Press Start 2P', monospace; font-size: 1.05rem; color: #fff; letter-spacing: 1px; }
.mid-brand-tag { font-size: 0.55rem; color: #d4af37; letter-spacing: 3px; font-weight: 700; }
.mid-role {
    margin-left: auto;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border: 2px solid;
    white-space: nowrap;
}
.mid-role.admin { background: rgba(212, 175, 55, 0.15); color: #ffd76a; border-color: #d4af37; }
.mid-role.owner { background: rgba(0, 255, 136, 0.12); color: #5dffa8; border-color: #00c46a; }
.mid-role.watcher { background: rgba(88, 166, 255, 0.12); color: #8ec2ff; border-color: #3b82d6; }
.mid-id-wrap { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.mid-id-label { font-size: 0.55rem; color: #7fb08a; letter-spacing: 4px; font-weight: 700; }
.mid-id {
    font-family: 'Courier New', monospace;
    font-size: clamp(1.15rem, 4.2vw, 1.9rem);
    color: #ffd76a;
    letter-spacing: 4px;
    font-weight: 700;
    text-shadow: 0 0 18px rgba(255, 215, 106, 0.35);
}
.mid-name { font-size: 1.05rem; color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.mid-bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 0.6rem; color: #8fc9a0; letter-spacing: 1px; gap: 8px; }
.mid-site { color: #d4af37; font-weight: 700; white-space: nowrap; }
.mid-actions { display: flex; gap: 10px; justify-content: center; padding: 4px 0 10px; flex-wrap: wrap; }
.mid-actions .garden-btn { flex: 1; max-width: 220px; justify-content: center; }
@media (max-width: 480px) {
    .mid-card { padding: 16px 18px; }
    .mid-brand-name { font-size: 0.8rem; }
    .mid-logo { width: 40px; height: 40px; }
    .mid-role { font-size: 0.5rem; padding: 4px 8px; }
}

/* ============================================================
   V7.55 — ABOUT VERSION BADGE
   ============================================================ */
.about-version {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(42, 106, 58, 0.18);
    border: 2px solid rgba(42, 106, 58, 0.5);
    border-radius: 8px;
    font-size: 0.7rem;
    color: #a8c8a8;
}
.about-version a { color: #6de36d; text-decoration: none; }
.about-version strong { color: #fff; }
.av-icon { font-size: 1rem; }

/* ============================================================
   V7.56 — MOSSAGE ID CARD: PREMIUM GOLD & BLACK (pixel luxury)
   ============================================================ */
.mossage-id-modal { background: linear-gradient(180deg, #0a0a0a 0%, #141005 100%) !important; }
.mid-card {
    background:
        radial-gradient(ellipse at 18% 0%, rgba(212, 175, 55, 0.16), transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(212, 175, 55, 0.08), transparent 50%),
        linear-gradient(135deg, #0c0c0c 0%, #171205 60%, #000000 100%);
    border: 3px solid #d4af37;
    box-shadow:
        0 0 0 4px rgba(212, 175, 55, 0.16),
        0 0 42px rgba(212, 175, 55, 0.18),
        0 18px 40px rgba(0, 0, 0, 0.8),
        inset 0 0 90px rgba(212, 175, 55, 0.05);
}
.mid-card::after { /* gold leaf watermark */
    content: '🌿';
    opacity: 0.07;
    filter: sepia(1) saturate(3) hue-rotate(-15deg);
}
.mid-card::before { /* pixel-dashed gold divider (retro) */
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 52px;
    height: 5px;
    background-image: repeating-linear-gradient(90deg, #d4af37 0 9px, transparent 9px 18px);
    opacity: 0.55;
    pointer-events: none;
}
.mid-logo { border-color: #d4af37; box-shadow: 0 0 14px rgba(212, 175, 55, 0.5); }
.mid-brand-name { color: #f5d67b; text-shadow: 0 0 12px rgba(212, 175, 55, 0.45); }
.mid-brand-tag { color: #d4af37; letter-spacing: 4px; }
.mid-role.admin { background: rgba(212, 175, 55, 0.18); color: #ffd76a; border-color: #d4af37; box-shadow: 0 0 12px rgba(212, 175, 55, 0.35); }
.mid-role.owner { background: rgba(240, 180, 41, 0.12); color: #ffc96b; border-color: #f0b429; }
.mid-role.watcher { background: rgba(200, 200, 200, 0.08); color: #d8d8d8; border-color: #9a9a9a; }
.mid-id-label { color: #a88a3a; }
.mid-id {
    color: #ffd76a;
    text-shadow: 0 0 22px rgba(255, 215, 106, 0.45), 0 0 60px rgba(212, 175, 55, 0.25);
}
.mid-name { color: #ffffff; }
.mid-bottom { color: #b99a4a; }
.mid-date { color: #c9a94e; }
.mid-site { color: #f5d67b; }