.app-container{min-height:100vh;background:linear-gradient(135deg,#064e3b,#065f46,#0f766e,#0d9488,#14b8a6);color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.bg-pattern{position:fixed;top:0;right:0;bottom:0;left:0;opacity:.1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:60px 60px}.content-wrapper{position:relative;z-index:10}.header{background:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);padding:2rem 1rem}.container{max-width:1400px;margin:0 auto}.header-content{text-align:center;margin-bottom:2rem}.main-title{font-size:clamp(2rem,5vw,3rem);font-weight:900;margin-bottom:1rem;background:linear-gradient(135deg,#4ade80,#10b981);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 30px rgba(74,222,128,.3)}.subtitle{font-size:clamp(1rem,2.5vw,1.25rem);color:#d1d5db;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.6}.cta-buttons{display:flex;flex-direction:column;gap:1rem;align-items:center;margin-bottom:2rem}@media (min-width: 640px){.cta-buttons{flex-direction:row;justify-content:center}}.subscribe-btn{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;padding:.75rem 2rem;border-radius:50px;font-weight:700;font-size:1.125rem;text-decoration:none;display:flex;align-items:center;gap:.5rem;transition:all .3s ease;box-shadow:0 10px 25px #dc26264d;border:2px solid transparent}.subscribe-btn:hover{background:linear-gradient(135deg,#b91c1c,#991b1b);transform:translateY(-2px) scale(1.05);box-shadow:0 15px 35px #dc262666}.watch-btn{background:linear-gradient(135deg,#264adc,#1c3bb9);color:#fff;padding:.75rem 2rem;border-radius:50px;font-weight:700;font-size:1.125rem;text-decoration:none;display:flex;align-items:center;gap:.5rem;transition:all .3s ease;box-shadow:0 10px 25px #263edc4d;border:2px solid transparent}.watch-btn:hover{background:linear-gradient(135deg,#1c1cb9,#341b99);transform:translateY(-2px) scale(1.05);box-shadow:0 15px 35px #4726dc66}.btn-icon{font-size:1.5rem}.youtube-link{color:#60a5fa;text-decoration:underline;font-size:1.125rem;font-weight:500;transition:color .3s ease}.youtube-link:hover{color:#93c5fd}.progress-card{background:linear-gradient(135deg,#00000080,#37415180);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;padding:2rem;max-width:600px;margin:0 auto;border:1px solid rgba(255,255,255,.2);box-shadow:0 25px 50px #0000004d}.progress-title{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:900;margin-bottom:1.5rem;background:linear-gradient(135deg,#4ade80,#10b981,#14b8a6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.progress-bar-container{position:relative;width:100%;background:#37415180;border-radius:50px;height:24px;margin-bottom:1.5rem;overflow:hidden;box-shadow:inset 0 2px 4px #0000004d}.progress-bar{background:linear-gradient(90deg,#4ade80,#10b981,#22c55e);height:100%;border-radius:50px;transition:width 1s ease-out;position:relative;box-shadow:0 2px 8px #4ade804d}.progress-shine{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(255,255,255,.3) 0%,transparent 100%);animation:pulse 2s ease-in-out infinite}.progress-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#fff3,#0003)}.progress-stats{display:flex;justify-content:space-between;align-items:center;font-size:1.125rem;flex-wrap:wrap;gap:.5rem}.progress-complete{color:#4ade80;font-weight:600}.progress-remaining{color:#d1d5db}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:2rem;max-width:800px;margin-left:auto;margin-right:auto}.stat-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:1.5rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 25px #0003;transition:all .3s ease}.stat-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px #0000004d}.stat-card.planted{background:linear-gradient(135deg,#22c55e33,#15803d4d);border-color:#22c55e33}.stat-card.water{background:linear-gradient(135deg,#3b82f633,#1e40af4d);border-color:#3b82f633}.stat-card.broken{background:linear-gradient(135deg,#ef444433,#991b1b4d);border-color:#ef444433}.stat-card.empty{background:linear-gradient(135deg,#f59e0b33,#92400e4d);border-color:#f59e0b33}.stat-number{font-size:2rem;font-weight:900;margin-bottom:.5rem;color:#ffffffe6}.stat-label{font-size:.875rem;font-weight:500;color:#ffffffb3}.toggle-container{display:flex;justify-content:center;margin-bottom:1rem}.toggle-wrapper{background:linear-gradient(135deg,#111827cc,#000c);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:.5rem;border:1px solid rgba(255,255,255,.2);box-shadow:0 25px 50px #0000004d;display:flex;gap:.5rem;max-width:400px;width:100%}.toggle-btn{flex:1;padding:.75rem 1rem;border-radius:12px;font-weight:700;font-size:1rem;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;justify-content:center;background:transparent;border:none;color:#9ca3af;cursor:pointer}.toggle-btn.active{background:linear-gradient(135deg,#10b981,#22c55e);color:#fff;box-shadow:0 10px 25px #10b98140;transform:scale(1.05)}.toggle-btn:hover:not(.active){color:#fff;background:#4b556366}.btn-text{display:none}@media (min-width: 640px){.btn-text{display:inline}}.main-content{padding:2rem 1rem}.content-card{background:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:2rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px #0003}.card-title{font-size:1.875rem;font-weight:900;margin-bottom:1rem;text-align:center;color:#4ade80}.card-description{text-align:center;color:#d1d5db;margin-bottom:1.5rem}.dynmap-container{border-radius:12px;overflow:hidden;box-shadow:0 25px 50px #0000004d;border:1px solid rgba(255,255,255,.2);background:#37415180;min-height:500px;display:flex;align-items:center;justify-content:center}.dynmap-placeholder{text-align:center;color:#9ca3af}.placeholder-icon{font-size:4rem;margin-bottom:1rem}.placeholder-title{font-size:1.5rem;margin-bottom:.5rem;color:#d1d5db}.placeholder-desc{font-size:1rem;margin-bottom:1rem}.placeholder-url{font-size:.75rem;color:#6b7280;font-family:monospace}.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:1.5rem;font-size:.875rem}.legend-item{display:flex;align-items:center;gap:.5rem;background:#0006;padding:.5rem .75rem;border-radius:8px}.legend-color{width:16px;height:16px;border-radius:4px}.legend-color.planted{background:#22c55e}.legend-color.water{background:#3b82f6}.legend-color.broken{background:#ef4444}.legend-color.empty{background:#b45309}.grid-wrapper{display:flex;justify-content:center}.grid-container{background:#00000080;padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,.1);overflow:hidden;max-width:100%;max-height:90vh;overflow:auto}.grid-display{display:grid;grid-template-columns:repeat(102,1fr);gap:1px;background:#000;padding:2px;border:2px solid rgba(255,255,255,.2);border-radius:8px;min-width:102 * 6px;min-height:102 * 6px}.tile-pixel{width:7px;height:7px;transition:all .2s ease;cursor:pointer}.tile-pixel.empty{background:#b45309}.tile-pixel.planted{background:#22c55e}.tile-pixel.water{background:#3b82f6}.tile-pixel.broken{background:#ef4444}.tile-pixel:hover{transform:scale(2);z-index:10;box-shadow:0 0 10px #fffc;position:relative}.grid-container::-webkit-scrollbar{width:8px;height:8px}.grid-container::-webkit-scrollbar-track{background:#0000004d;border-radius:4px}.grid-container::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.grid-container::-webkit-scrollbar-thumb:hover{background:#ffffff80}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px}.spinner{width:64px;height:64px;border:2px solid transparent;border-top:2px solid #4ade80;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.loading-text{font-size:1.25rem;color:#d1d5db}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (max-width: 640px){.tile-pixel{width:2px;height:2px}.grid-display{min-width:102* 2px;min-height:102 * 2px}.header{padding:1.5rem 1rem}.progress-card{padding:1.5rem}.stat-card{padding:1rem}}