/**
 * ============================================
 * Stylesheet: auction-house.css
 * Area:   海豹拍賣行 毛氈質感主題
 * Version: v1.0
 * ============================================
 */

:root {
  --felt-cream: #FFF8F0;
  --felt-warm-white: #FFFBF5;
  --felt-light-blue: #E8F4FD;
  --felt-deep-ocean: #1B2D4F;
  --felt-ocean-mid: #2A4A6B;
  --felt-tiffany: #81D8D0;
  --felt-coral: #FF7F7F;
  --felt-gold: #FFD700;
  --felt-shadow: 0 4px 20px rgba(139, 115, 85, 0.1);
  --felt-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  --stitch-border: 2px dashed rgba(180, 160, 140, 0.35);
  --auction-red: #E74C3C;
  --auction-green: #2ECC71;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Nunito', 'Quicksand', -apple-system, sans-serif;
  background: var(--felt-cream);
  color: #4A3728;
  overflow-x: hidden;
}

#auction-app {
  position: relative;
  background: var(--felt-cream);
  background-image: var(--felt-noise);
  background-size: 200px 200px;
}

/* Particles */
.felt-particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.felt-particle { position: absolute; border-radius: 50%; opacity: 0; animation: feltParticleFall linear infinite; }
@keyframes feltParticleFall {
  0% { transform: translateY(-20px) rotate(0deg) scale(0.5); opacity: 0; }
  10% { opacity: 0.5; transform: scale(1); }
  90% { opacity: 0.3; }
  100% { transform: translateY(100vh) rotate(720deg) scale(0.3); opacity: 0; }
}

/* Header */
.au-header {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(135deg, #2C1810, #4A2520);
  background-image: var(--felt-noise), linear-gradient(135deg, #2C1810, #4A2520);
  background-size: 200px 200px, 100% 100%;
  border-bottom: 3px solid var(--felt-gold);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.au-header-inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; }
.au-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.au-logo-img { width: 36px; height: 36px; border-radius: 50%; animation: au-logo-breathe 3s ease-in-out infinite; }
@keyframes au-logo-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.au-logo-text { font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.3rem; color: var(--felt-gold); text-shadow: 0 2px 8px rgba(255,215,0,0.3); }
.au-nav { display: flex; gap: 20px; }
.au-nav-link { color: rgba(255,255,255,0.8); text-decoration: none; font-weight: 600; font-size: 0.9rem; padding: 6px 14px; border-radius: 20px; transition: all 0.3s; border: 1px solid transparent; }
.au-nav-link:hover { color: white; background: rgba(255,215,0,0.15); border-color: rgba(255,215,0,0.3); }

/* Hero */
.au-hero { position: relative; padding: 80px 24px 60px; text-align: center; overflow: hidden; min-height: 400px; display: flex; align-items: center; justify-content: center; }
.au-hero-bg { position: absolute; inset: 0; background: linear-gradient(180deg, #2C1810 0%, #4A2520 40%, var(--felt-cream) 100%); z-index: 0; }
.au-hero-felt-texture { position: absolute; inset: 0; background-image: var(--felt-noise); background-size: 200px 200px; opacity: 0.5; }
.au-hero-sparkles { position: absolute; inset: 0; }
.au-sparkle { position: absolute; width: 4px; height: 4px; background: var(--felt-gold); border-radius: 50%; animation: au-sparkle-twinkle ease-in-out infinite; }
@keyframes au-sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 8px var(--felt-gold); }
}
.au-hero-content { position: relative; z-index: 1; }
.au-hero-seal { position: relative; display: inline-block; margin-bottom: 20px; }
.au-hero-seal-img { width: 130px; height: 130px; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3)); }
.au-hero-gavel { position: absolute; bottom: -5px; right: -15px; font-size: 2rem; animation: au-gavel-hit 2s ease-in-out infinite; }
@keyframes au-gavel-hit {
  0%, 70%, 100% { transform: rotate(0deg); }
  80% { transform: rotate(-30deg); }
  90% { transform: rotate(5deg); }
}
.au-hero-title { font-family: 'ZCOOL KuaiLe', cursive; font-size: 2.6rem; color: white; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 12px; text-shadow: 0 3px 12px rgba(0,0,0,0.3); }
.au-title-icon { font-size: 2rem; }
.au-hero-subtitle { color: rgba(255,255,255,0.85); font-size: 1.1rem; margin-bottom: 24px; }
.au-hero-stats { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.au-stat-pill { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,215,0,0.2); border-radius: 30px; padding: 10px 24px; display: flex; flex-direction: column; align-items: center; transition: transform 0.3s; }
.au-stat-pill:hover { transform: translateY(-3px) scale(1.05); }
.au-stat-num { font-size: 1.4rem; font-weight: 800; color: var(--felt-gold); }
.au-stat-label { font-size: 0.75rem; color: rgba(255,255,255,0.7); }

/* Sections */
.au-section { max-width: 1200px; margin: 0 auto; padding: 50px 24px; position: relative; z-index: 1; }
.au-section-title { font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.8rem; color: var(--felt-deep-ocean); text-align: center; margin-bottom: 36px; }
.felt-stitch-border::after { content: ''; display: block; width: 80px; height: 3px; margin: 12px auto 0; background: repeating-linear-gradient(90deg, var(--felt-gold) 0, var(--felt-gold) 8px, transparent 8px, transparent 12px); }
.felt-card { background: var(--felt-warm-white); background-image: var(--felt-noise); background-size: 200px 200px; border-radius: 20px; border: var(--stitch-border); box-shadow: var(--felt-shadow); transition: transform 0.3s, box-shadow 0.3s; }
.felt-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(139,115,85,0.15); }

/* Filter Bar */
.au-filter-bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.au-filter-btn { background: var(--felt-warm-white); border: var(--stitch-border); border-radius: 24px; padding: 8px 20px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.85rem; color: #7A6B5D; cursor: pointer; transition: all 0.3s; }
.au-filter-btn:hover { background: rgba(255,215,0,0.1); border-color: var(--felt-gold); color: var(--felt-deep-ocean); }
.au-filter-active { background: linear-gradient(135deg, var(--felt-gold), #FFA500); color: white; border-color: var(--felt-gold); }

/* Auction Grid */
.au-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

.au-card { background: var(--felt-warm-white); background-image: var(--felt-noise); background-size: 200px 200px; border-radius: 20px; border: var(--stitch-border); box-shadow: var(--felt-shadow); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; position: relative; }
.au-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(139,115,85,0.18); }

.au-card-badge { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 12px; font-size: 0.7rem; font-weight: 800; z-index: 2; }
.au-badge-live { background: var(--auction-red); color: white; animation: au-badge-pulse 1.5s ease-in-out infinite; }
@keyframes au-badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.4); } 50% { box-shadow: 0 0 0 8px rgba(231,76,60,0); } }
.au-badge-upcoming { background: var(--felt-tiffany); color: white; }
.au-badge-ended { background: #95A5A6; color: white; }
.au-badge-rare { position: absolute; top: 12px; right: 12px; font-size: 1.2rem; z-index: 2; animation: au-rare-glow 2s ease-in-out infinite; }
@keyframes au-rare-glow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255,215,0,0.3)); } 50% { filter: drop-shadow(0 0 12px rgba(255,215,0,0.6)); transform: scale(1.1); } }

.au-card-img-wrap { position: relative; height: 200px; overflow: hidden; background: var(--felt-light-blue); }
.au-card-img { width: 100%; height: 100%; object-fit: contain; padding: 20px; transition: transform 0.5s; }
.au-card:hover .au-card-img { transform: scale(1.08); }

.au-card-body { padding: 16px 20px; }
.au-card-title { font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.05rem; color: var(--felt-deep-ocean); margin-bottom: 6px; }
.au-card-meta { font-size: 0.78rem; color: #9A8B7D; margin-bottom: 12px; }

.au-card-price-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.au-price-label { font-size: 0.7rem; color: #9A8B7D; }
.au-price-value { font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.3rem; color: var(--auction-red); }
.au-price-start { font-size: 0.85rem; color: #7A6B5D; text-decoration: line-through; }

.au-card-timer { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--auction-red); font-weight: 700; margin-bottom: 12px; }
.au-timer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--auction-red); animation: au-timer-blink 1s ease-in-out infinite; }
@keyframes au-timer-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.au-card-bids { font-size: 0.78rem; color: #9A8B7D; margin-bottom: 12px; }

.au-bid-btn { width: 100%; background: linear-gradient(135deg, var(--felt-gold), #FFA500); color: white; border: none; border-radius: 24px; padding: 10px; font-family: 'ZCOOL KuaiLe', cursive; font-size: 0.95rem; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; }
.au-bid-btn::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%); transform: rotate(45deg) translateX(-100%); transition: transform 0.6s; }
.au-bid-btn:hover::before { transform: rotate(45deg) translateX(100%); }
.au-bid-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255,165,0,0.3); }
.au-bid-btn:disabled { background: #CCC; cursor: not-allowed; }

/* Rules */
.au-rules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.au-rule-card { padding: 28px; text-align: center; }
.au-rule-icon { font-size: 2rem; margin-bottom: 12px; display: inline-block; animation: au-rule-bounce 3s ease-in-out infinite; }
@keyframes au-rule-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.au-rule-card h3 { font-family: 'ZCOOL KuaiLe', cursive; font-size: 1rem; color: var(--felt-deep-ocean); margin-bottom: 8px; }
.au-rule-card p { font-size: 0.82rem; color: #7A6B5D; line-height: 1.5; }

/* History */
.au-history-list { display: grid; gap: 12px; }
.au-history-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--felt-warm-white); border-radius: 14px; border: var(--stitch-border); box-shadow: var(--felt-shadow); transition: transform 0.3s; animation: au-history-slide 0.5s ease-out; }
@keyframes au-history-slide { 0% { transform: translateX(-20px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
.au-history-item:hover { transform: translateX(4px); }
.au-history-thumb { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; border: var(--stitch-border); }
.au-history-info { flex: 1; }
.au-history-name { font-weight: 700; font-size: 0.9rem; color: var(--felt-deep-ocean); }
.au-history-meta { font-size: 0.75rem; color: #9A8B7D; }
.au-history-price { font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.1rem; color: var(--auction-red); }

/* Footer */
.au-footer { text-align: center; padding: 40px 24px; background: linear-gradient(180deg, transparent, rgba(44,24,16,0.05)); }
.au-footer-seal-img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 12px; opacity: 0.6; }
.au-footer p { font-size: 0.85rem; color: #9A8B7D; }

/* Animations */
.au-float { animation: au-float 4s ease-in-out infinite; }
@keyframes au-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.au-fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s, transform 0.6s; }
.au-fade-up.au-visible { opacity: 1; transform: translateY(0); }

/* Bid Modal */
.au-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); animation: fadeIn 0.3s; }
.au-modal { background: var(--felt-warm-white); border-radius: 24px; padding: 36px; max-width: 400px; width: 90%; text-align: center; border: var(--stitch-border); box-shadow: 0 20px 60px rgba(0,0,0,0.2); animation: au-modal-pop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes au-modal-pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.au-modal-title { font-family: 'ZCOOL KuaiLe', cursive; font-size: 1.4rem; color: var(--felt-deep-ocean); margin-bottom: 16px; }
.au-modal-price { font-family: 'ZCOOL KuaiLe', cursive; font-size: 2rem; color: var(--auction-red); margin-bottom: 16px; }
.au-modal-input { width: 100%; border: var(--stitch-border); border-radius: 14px; padding: 12px 16px; font-size: 1.1rem; text-align: center; font-family: inherit; margin-bottom: 16px; background: var(--felt-warm-white); }
.au-modal-input:focus { outline: none; border-color: var(--felt-gold); box-shadow: 0 0 0 3px rgba(255,215,0,0.2); }
.au-modal-btns { display: flex; gap: 12px; }
.au-modal-btn { flex: 1; padding: 12px; border-radius: 20px; font-family: 'ZCOOL KuaiLe', cursive; font-size: 1rem; cursor: pointer; border: none; transition: all 0.3s; }
.au-modal-confirm { background: linear-gradient(135deg, var(--felt-gold), #FFA500); color: white; }
.au-modal-confirm:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255,165,0,0.3); }
.au-modal-cancel { background: #EEE; color: #666; }
.au-modal-cancel:hover { background: #DDD; }

/* Responsive */
@media (max-width: 768px) {
  .au-rules-grid { grid-template-columns: repeat(2, 1fr); }
  .au-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .au-hero-title { font-size: 2rem; }
}
@media (max-width: 480px) {
  .au-rules-grid { grid-template-columns: 1fr; }
  .au-nav { gap: 8px; }
  .au-nav-link { font-size: 0.8rem; padding: 4px 10px; }
}