@import url("https://fonts.googleapis.com/css?family=Fredoka+One&display=swap");body{position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:url(/img/Progenx_Saat_logo.svg);background-repeat:no-repeat;background-position:50%;background-size:600px 600px;opacity:.5;z-index:-1;pointer-events:none}.page_404:before{display:none}:root{--bg:#fff;--text:#222;--muted:#6b7280;--card:#fff;--primary:#dc3c41;--primary-600:#c83237;--green:#79d16b;--sky:#7fd3ff;--pink:#ff89c1;--board-light:#e6f4d6;--board-dark:#bfe2a6;--ring:rgba(205,23,25,.1);--radius:14px}*{box-sizing:border-box}body,html{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,Noto Sans;background:var(--bg);color:var(--text)}.container{max-width:1100px;padding:20px}.site-header{justify-content:space-between;gap:12px;margin-bottom:14px}.brand,.site-header{display:flex;align-items:center}.brand{gap:10px;text-decoration:none;color:inherit}.brand-logo{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;overflow:hidden}.brand-icon{width:100%;height:100%;object-fit:cover;border-radius:50%}.brand h1{font-size:22px;margin:0}.nav{display:flex;align-items:center;gap:20px}.nav a{text-decoration:none;color:var(--text);padding:8px 16px;border-radius:10px;font-weight:500;transition:all .2s ease}.nav a:hover{background:var(--ring);transform:translateY(-1px)}.user-btn{background:#fff;border:none;color:var(--text);padding:8px 16px;border-radius:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:12px;transition:all .2s ease;font-size:inherit;font-family:inherit;min-width:200px}.user-btn:hover{background:#fff;transform:translateY(-1px)}.user-btn:hover .dropdown-arrow{transform:rotate(180deg)}.user-avatar{width:32px;height:32px;font-size:16px}.user-info{flex-direction:column;align-items:flex-start;gap:2px}.user-name{font-weight:600;font-size:14px;color:var(--text)}.user-status{font-size:12px;color:var(--muted)}.dropdown-arrow{font-size:10px;transition:transform .2s ease;margin-left:auto}.dropdown-menu{border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease;margin-top:8px}.dropdown-menu.show{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-header{padding:20px;background:linear-gradient(135deg,#f8fafc,#e2e8f0);display:flex;align-items:center;gap:12px;border-bottom:1px solid #e2e8f0}.user-avatar-large{width:48px;height:48px;background:#007680;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff}.user-details{gap:4px}.user-name-large{font-weight:700;font-size:16px;color:var(--text)}.user-email{font-size:13px;color:var(--muted)}.dropdown-divider{height:1px;background:#e2e8f0;margin:8px 0}.dropdown-item{gap:12px;padding:12px 20px;color:var(--text);border-bottom:1px solid #f1f5f9}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{color:var(--primary)}.dropdown-item.logout:hover{color:#dc2626}.item-icon{font-size:18px;width:20px;text-align:center}.item-text{flex:1 1;font-weight:500;font-size:14px}.item-badge{background:var(--primary);color:#fff;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600}.hero{border:1px solid #ffe4c7;padding:24px;border-radius:20px;margin:10px 0 24px;display:grid;grid-gap:12px;gap:12px}.hero h2{font-size:28px;margin:0;color:#fff}.hero p{font-size:16px;color:#fff}.featured-book{display:grid;grid-template-columns:300px 1fr;grid-gap:32px;gap:32px;align-items:start;margin:32px 0;padding:24px;background:linear-gradient(135deg,hsla(0,0%,100%,.95),rgba(248,250,252,.95));border-radius:24px;box-shadow:0 12px 40px rgba(0,0,0,.1);border:2px solid hsla(0,0%,100%,.3)}.book-image{width:100%;max-width:280px;height:auto;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.2);transition:transform .3s ease;object-fit:cover;aspect-ratio:3/4}.book-image:hover{transform:scale(1.02)}.book-badge{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 4px 12px rgba(0,0,0,.2)}.book-info h3{font-size:24px;color:#1a202c;font-weight:800}.author{font-size:16px;margin:0 0 16px;color:#4a5568;font-weight:600}.description{font-size:15px;margin:0 0 20px;color:#2d3748;line-height:1.6}.book-features{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.feature{background:hsla(0,0%,100%,.7);padding:6px 12px;border-radius:20px;font-size:13px;color:#2d3748;border:1px solid rgba(0,0,0,.05)}.cta,.feature{font-weight:600}.cta{display:inline-block;padding:12px 20px;border-radius:12px;text-decoration:none;margin-right:12px;margin-bottom:8px;transition:all .2s ease;text-align:center;color:#fff}.cta.primary{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(255,143,91,.3)}.cta.primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,143,91,.4)}.cta.secondary{background:var(--green);color:#fff;box-shadow:0 4px 12px rgba(121,209,107,.3);margin-right:8px;margin-bottom:8px;display:inline-block}.cta.secondary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(121,209,107,.4)}.other-books{margin:32px 0}.other-books h3{font-size:20px;margin:0 0 20px;color:#1a202c;font-weight:700}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:20px;gap:20px}.card{background:var(--card);border:1px solid #eee5d8;border-radius:var(--radius);padding:20px;box-shadow:0 6px 16px rgba(0,0,0,.06);position:relative;transition:transform .2s ease}.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.12)}.card.coming-soon{opacity:.7;background:linear-gradient(135deg,rgba(248,250,252,.8),hsla(0,0%,100%,.8))}.coming-badge{padding:4px 8px;border-radius:12px;font-size:11px;font-weight:600}.card h4{font-size:16px;margin:0 0 8px;color:#1a202c;font-weight:700}.card p{font-size:14px;margin:0;color:#4a5568;line-height:1.5}.footer{margin:32px 0;color:var(--muted);text-align:center}.footer-content{display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto}.footer-right{display:flex;justify-content:flex-end}.progenx-logo{display:flex;align-items:center;gap:6px;color:#06c;font-size:14px;font-weight:500}.copyright-symbol{color:#06c;font-size:16px;font-weight:700}.progenx-text{color:#06c;font-weight:500;font-size:14px}@media (max-width:900px){.featured-book{grid-template-columns:1fr;gap:24px;text-align:center}.book-cover{order:2}.book-info{order:1}.footer-content{flex-direction:column;gap:16px;text-align:center}.footer-left,.footer-right{flex:none;justify-content:center}.book-image{max-width:240px}}.page_404{padding:40px 0;background:#fff;font-family:Arvo,serif;min-height:100vh;display:flex;align-items:center}.page_404 img{width:100%}.four_zero_four_bg{background-image:url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);height:400px;background-position:50%;background-repeat:no-repeat;background-size:contain}.four_zero_four_bg h1{font-size:80px;color:#333;margin:0;padding-top:50px}.four_zero_four_bg h3{font-size:80px}.link_404{color:#fff!important;padding:10px 20px;background:#39ac31;margin:20px 0;display:inline-block;text-decoration:none;border-radius:5px;transition:all .3s ease}.link_404:hover{background:#2d8a2d;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.2)}.contant_box_404{margin-top:-50px}.contant_box_404 h3{font-size:2rem;color:#333;margin:20px 0}.contant_box_404 p{font-size:1.1rem;color:#666;margin:20px 0}.container{max-width:1200px;margin:0 auto;padding:0 20px}.row{display:flex;flex-wrap:wrap;margin:0 -15px}.col-sm-12{flex:0 0 100%;max-width:100%;padding:0 15px}.col-sm-10{flex:0 0 83.333333%;max-width:83.333333%;padding:0 15px}.col-sm-offset-1{margin-left:8.333333%}.hero-section,.text-center{text-align:center}.hero-section{background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;padding:100px 0;margin-bottom:80px;position:relative;overflow:hidden;border-radius:24px;margin-left:20px;margin-right:20px}.hero-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');opacity:.3}.hero-content{position:relative;z-index:1}.hero-content h1{font-size:3.5rem;font-weight:800;margin:0 0 20px;text-shadow:0 2px 4px rgba(0,0,0,.3);background:linear-gradient(45deg,#fff,#e0e7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-content p{font-size:1.25rem;margin:0;opacity:.9;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.2)}.books-section{padding:0 20px;margin-bottom:80px}.section-header{text-align:center;margin-bottom:50px}.section-header h2{font-size:2.5rem;font-weight:700;color:#1a202c;margin:0 0 15px}.section-header p{font-size:1.1rem;color:#4a5568;margin:0}.books-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:1200px;margin:0 auto}.book-card{box-shadow:0 8px 32px rgba(0,0,0,.08);border:1px solid #e2e8f0;position:relative}.book-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#dc3c41,#c83237);opacity:0;transition:opacity .3s ease}.book-card:hover:before{opacity:1}.book-card:hover{transform:translateY(-8px);box-shadow:0 16px 48px rgba(0,0,0,.15)}.book-cover{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8fafc,#e2e8f0)}.book-cover img{transition:transform .3s ease;border-radius:8px}.book-card:hover .book-cover img{transform:scale(1.05)}.book-actions-overlay{top:12px;left:12px;flex-direction:column}.action-btn{font-size:16px;box-shadow:0 2px 8px rgba(0,0,0,.15)}.action-btn.active,.action-btn:hover{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2)}.favorite-btn.active{background:linear-gradient(135deg,#ff6b6b,#ee5a24)}.wishlist-btn.active{background:linear-gradient(135deg,#f59e0b,#d97706)}.discount-badge{top:12px;right:12px;background:linear-gradient(135deg,#ff6b6b,#ee5a24);font-size:12px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.2)}.book-info{padding:24px}.book-title{font-size:1.1rem;font-weight:600;color:#1a202c;line-height:1.4;height:2.8em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.book-author{color:#4a5568;margin:0 0 16px;font-weight:500}.price-info{display:flex;align-items:center;gap:12px;margin-bottom:20px}.current-price{font-size:1.25rem;color:#2d3748}.original-price{color:#a0aec0}.buy-button{width:100%;padding:14px 20px;border-radius:12px;font-size:1rem;box-shadow:0 4px 12px rgba(102,126,234,.3)}.buy-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(102,126,234,.4)}.buy-button:active{transform:translateY(0)}.book-card.coming-soon{opacity:.7;background:linear-gradient(135deg,rgba(248,250,252,.8),hsla(0,0%,100%,.8))}.coming-badge{position:absolute;top:12px;right:12px;background:hsla(220,9%,46%,.8);color:#fff;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.2)}.coming-soon-btn{background:#a0aec0!important;cursor:not-allowed!important;opacity:.6}.coming-soon-btn:hover{transform:none!important;box-shadow:0 4px 12px rgba(160,174,192,.3)!important}.book-card.purchased{border-left:4px solid #10b981}.progress-badge{position:absolute;top:12px;left:12px;background:#10b981;color:#fff;padding:4px 8px;border-radius:12px;font-size:11px;font-weight:600}.progress-text{font-size:11px}.purchase-info{margin-bottom:12px}.progress-bar{height:6px;background:#e5e7eb;border-radius:3px;margin-bottom:16px}.progress-fill{background:linear-gradient(90deg,#10b981,#059669);border-radius:3px}.continue-btn{width:100%;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:12px 20px;border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;text-align:center;display:block}.continue-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,185,129,.4)}.account-section{padding:0 20px;margin-bottom:80px}.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));grid-gap:30px;gap:30px;max-width:1200px;margin:0 auto}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.card-header h3{margin:0;color:#1f2937;font-size:1.25rem;font-weight:600}.edit-profile-btn{background:linear-gradient(135deg,#3b82f6,#1d4ed8);padding:.5rem 1rem;border-radius:8px;font-size:.875rem;font-weight:500;transition:all .2s ease}.edit-profile-btn:hover{background:linear-gradient(135deg,#2563eb,#1e40af);transform:translateY(-1px)}.form-actions{display:flex;gap:.5rem}.save-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-1px)}.cancel-btn{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;font-size:.875rem;font-weight:500;transition:all .2s ease}.cancel-btn:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-1px)}.edit-form{display:flex;flex-direction:column;gap:1rem}.form-input{padding:.75rem;border:2px solid #e5e7eb;border-radius:8px;font-size:.875rem;transition:border-color .2s ease}.form-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.form-row{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;gap:1rem}.book-demo-container{background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;padding:20px;border-radius:12px;margin:20px 0;box-shadow:0 8px 32px rgba(0,0,0,.1)}.demo-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:15px}.book-info h3{margin:0 0 8px;font-size:1.5rem;font-weight:700}.book-info p{margin:0;opacity:.9;font-size:.9rem}.demo-controls button{padding:12px 24px;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:all .3s ease;font-size:.9rem}.start-demo-btn{background:#4caf50;color:#fff;box-shadow:0 4px 15px rgba(76,175,80,.3)}.start-demo-btn:hover{background:#45a049;transform:translateY(-2px);box-shadow:0 6px 20px rgba(76,175,80,.4)}.start-demo-btn:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.stop-demo-btn{background:#f44336;color:#fff;box-shadow:0 4px 15px rgba(244,67,54,.3)}.stop-demo-btn:hover{background:#da190b;transform:translateY(-2px);box-shadow:0 6px 20px rgba(244,67,54,.4)}.demo-timer{background:#ff4757;color:#fff;padding:12px 20px;border-radius:25px;font-weight:700;text-align:center;margin-bottom:20px;font-size:1.1rem;box-shadow:0 4px 15px rgba(255,71,87,.3);animation:pulse 2s infinite}.demo-game{padding:20px}.demo-expired,.demo-game{background:hsla(0,0%,100%,.1);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.demo-expired{text-align:center;padding:40px;margin-top:20px}.demo-expired h4{margin:0 0 15px;font-size:1.3rem;color:#ffeb3b}.demo-expired p{margin:0 0 20px;opacity:.9;line-height:1.6}.purchase-btn{background:linear-gradient(135deg,#ff6b6b,orange);color:#fff;border:none;padding:15px 30px;border-radius:25px;font-weight:700;font-size:1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px hsla(0,100%,71%,.3)}.demo-expired-actions{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-top:20px}.retry-btn{background:linear-gradient(135deg,#6c757d,#5a6268);color:#fff;border:none;padding:15px 30px;border-radius:25px;font-weight:700;font-size:1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px hsla(208,7%,46%,.3)}.retry-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px hsla(208,7%,46%,.4)}.guest-restriction{background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;padding:40px;text-align:center;border-radius:12px;margin:20px 0}.restriction-card{max-width:600px;margin:0 auto}.restriction-icon{font-size:4rem;margin-bottom:20px}.restriction-card h2{margin:0 0 15px;font-size:2rem}.restriction-card p{margin:0 0 30px;font-size:1.1rem;line-height:1.6;opacity:.9}.book-showcase{margin:30px 0}.book-showcase h3{margin:0 0 20px;font-size:1.3rem}.book-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:20px;gap:20px;margin-top:20px}.cta-section{margin-top:30px}.primary-cta{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;padding:18px 36px;border-radius:25px;font-weight:700;font-size:1.1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px rgba(76,175,80,.3)}.primary-cta:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(76,175,80,.4)}.cta-subtitle{margin:15px 0 0;font-size:.9rem;opacity:.8}.key-verification-section{padding:40px 20px;max-width:600px;margin:0 auto}.key-verification-card{background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;padding:30px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.2);text-align:center}.key-verification-card h3{margin:0 0 15px;font-size:1.8rem;font-weight:700}.key-verification-card p{margin:0 0 25px;font-size:1.1rem;opacity:.9}.key-input-group{gap:15px;flex-wrap:wrap;justify-content:center}.key-input{min-width:200px;padding:15px 20px;border:none;border-radius:12px;font-size:1.1rem;font-weight:700;text-align:center;letter-spacing:2px;background:hsla(0,0%,100%,.9);color:#333;transition:all .3s ease}.key-input:focus{background:#fff;box-shadow:0 0 0 3px hsla(0,0%,100%,.3);transform:translateY(-2px)}.key-input::placeholder{color:#999;letter-spacing:1px}.verify-btn{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;padding:15px 30px;border-radius:12px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px rgba(76,175,80,.3);min-width:140px}.verify-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(76,175,80,.4)}.verify-btn:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.verification-message{padding:15px 20px;border-radius:12px;margin-bottom:20px;font-weight:600;font-size:1rem}.verification-message.success{background:rgba(76,175,80,.2);border:2px solid #4caf50;color:#4caf50}.verification-message.error{background:rgba(244,67,54,.2);border:2px solid #f44336;color:#f44336}.key-help{background:hsla(0,0%,100%,.1);padding:20px;border-radius:12px;text-align:left;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.key-help p{margin:0 0 15px;font-weight:600;font-size:1rem}.key-help ul{margin:0;padding-left:20px;list-style:none}.key-help li{margin-bottom:8px;position:relative;padding-left:20px}.key-help li:before{content:"•";color:#ffeb3b;font-weight:700;position:absolute;left:0}.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));grid-gap:2rem;gap:2rem;margin-bottom:2rem}.admin-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 6px rgba(0,0,0,.1);border:1px solid #e5e7eb}.admin-card.full-width{grid-column:1/-1}.admin-card h3{margin:0 0 1rem;color:#1f2937;font-size:1.25rem;font-weight:600}.create-btn{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%;margin-top:15px}.create-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(76,175,80,.4)}.create-btn:disabled{background:#ccc;cursor:not-allowed;transform:none}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:1rem;gap:1rem}.stat-card{background:#f8f9fa;padding:1rem;border-radius:8px;border:1px solid #e9ecef}.stat-card h4{margin:0 0 10px;font-size:.9rem;color:#495057}.stat-numbers{display:flex;flex-direction:column;gap:5px}.stat-label{font-size:.8rem;color:#6c757d}.stat-value{font-size:.9rem}.stat-value.used{color:#dc3545}.stat-value.available{color:#28a745}.export-btn{background:linear-gradient(135deg,#17a2b8,#138496);padding:12px 24px;width:100%}.export-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(23,162,184,.4)}.export-btn:disabled{background:#ccc;cursor:not-allowed;transform:none}.export-btn-small{background:linear-gradient(135deg,#6c757d,#5a6268);color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:10px;width:100%}.export-btn-small:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 15px hsla(208,7%,46%,.4)}.export-info{margin-top:10px;font-size:.9rem;color:#6c757d;text-align:center}.table-container{overflow-x:auto;margin-top:1rem}.admin-table{width:100%;border-collapse:collapse;font-size:.9rem}.admin-table td,.admin-table th{padding:12px;text-align:left;border-bottom:1px solid #e5e7eb}.admin-table th{background:#f8f9fa;font-weight:600;color:#374151}.key-cell{font-family:Courier New,monospace;background:#f1f3f4;padding:8px 12px;border-radius:4px;font-size:.8rem}.status-badge{padding:4px 8px;border-radius:12px;font-size:.8rem;font-weight:600}.status-badge.used{background:#fee2e2;color:#dc2626}.status-badge.available{background:#dcfce7;color:#16a34a}.table-note{margin-top:10px;font-size:.8rem;color:#6b7280;text-align:center;font-style:italic}.admin-layout{display:flex;min-height:100vh;background:#f8f9fa}.admin-nav{width:250px;background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;padding:20px 0;position:fixed;height:100vh;overflow-y:auto;z-index:1000}.admin-nav-header{padding:0 20px 20px;border-bottom:1px solid hsla(0,0%,100%,.2);display:flex;justify-content:space-between;align-items:center}.admin-nav-header h2{margin:0;font-size:1.2rem;font-weight:700}.admin-logout-btn{background:hsla(0,0%,100%,.2);color:#fff;border:none;padding:8px 12px;border-radius:6px;font-size:.8rem;cursor:pointer;transition:all .3s ease}.admin-logout-btn:hover{background:hsla(0,0%,100%,.3);transform:translateY(-1px)}.admin-nav-list{list-style:none;padding:0;margin:20px 0}.admin-nav-item{display:flex;align-items:center;padding:12px 20px;color:#fff;text-decoration:none;transition:all .3s ease;border-left:3px solid transparent}.admin-nav-item:hover{background:hsla(0,0%,100%,.1);border-left-color:#ffeb3b}.admin-nav-item.active{background:hsla(0,0%,100%,.2);border-left-color:#4caf50}.nav-icon{margin-right:10px;font-size:1.1rem}.nav-label{font-weight:500}.admin-nav-footer{margin-top:auto;padding:20px 0 0;border-top:1px solid hsla(0,0%,100%,.2)}.admin-main{flex:1 1;margin-left:250px;padding:20px}.admin-loading{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#f8f9fa}.loading-spinner{text-align:center}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top-color:#dc3c41;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}.loading-spinner p{color:#666;font-size:1rem;margin:0}.admin-login-container{padding:20px}.admin-login-card{border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.1);padding:40px;max-width:400px}.login-header{margin-bottom:30px}.admin-logo{margin-bottom:20px}.admin-logo img{width:60px;height:60px;border-radius:12px}.login-header h1{margin:0 0 10px;color:#1f2937}.login-header h2{color:#6b7280;font-size:1.1rem}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{text-align:left}.form-group label{font-size:.9rem}.form-group input{width:100%;padding:12px 16px;border:2px solid #e5e7eb;transition:all .3s ease}.error-message{padding:12px 16px;font-size:.9rem;font-weight:500}.login-btn{padding:14px 24px;border-radius:8px}.login-btn:hover:not(:disabled){box-shadow:0 8px 25px rgba(102,126,234,.4)}.login-btn:disabled{background:#9ca3af;transform:none}.demo-credentials{margin-top:30px;padding:20px;background:#f8f9fa;border-radius:8px;text-align:left}.demo-credentials h3{margin:0 0 15px}.demo-credentials p{margin:0 0 8px}.demo-credentials strong{color:#1f2937}.hero{text-align:center;padding:60px 20px;background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;margin-bottom:40px;border-radius:24px;margin-left:20px;margin-right:20px}.hero h1{font-size:3rem;margin:0 0 20px;font-weight:700;background:linear-gradient(45deg,#fff,#f0f0f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero p{font-size:1.2rem;margin:0;opacity:.9}.books-section{padding:40px 20px}.filters-section{justify-content:space-between;margin-bottom:30px;gap:20px}.filter-group{gap:15px;align-items:center}.filter-select{padding:8px 12px;border:2px solid #e5e7eb;border-radius:8px}.books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:30px;gap:30px;margin-top:30px}.book-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,.1);transition:all .3s ease;border:1px solid #e5e7eb}.book-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,.15);border-top:3px solid #dc3c41}.book-cover{position:relative;height:280px;overflow:hidden}.book-cover img{width:100%;height:100%;object-fit:contain;padding:20px}.discount-badge{position:absolute;top:15px;right:15px;background:#ff4757;color:#fff;padding:6px 12px;border-radius:20px;font-size:.8rem;font-weight:600}.book-actions-overlay{position:absolute;top:15px;left:15px;display:flex;gap:8px;opacity:0;transition:opacity .3s ease}.book-card:hover .book-actions-overlay{opacity:1}.action-btn{width:36px;height:36px;border-radius:50%;justify-content:center;font-size:1.2rem;background:hsla(0,0%,100%,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.action-btn:hover{transform:scale(1.1)}.favorite-btn.active{background:#ff6b6b;color:#fff}.wishlist-btn.active{background:#4ecdc4;color:#fff}.book-info{padding:20px}.book-title{font-size:1.2rem;font-weight:700;margin:0 0 8px;color:#1f2937;line-height:1.3}.book-author{color:#6b7280;font-size:.9rem;margin:0 0 15px}.book-meta{gap:10px;margin-bottom:15px}.book-category{background:#e0f2fe;color:#0277bd}.book-age-group,.book-category{padding:4px 8px;font-size:.8rem;font-weight:500}.book-age-group{background:#f3e8ff;color:#7c3aed}.price-info{margin-bottom:15px}.current-price{font-size:1.3rem;font-weight:700;color:#1f2937;margin-right:8px}.original-price{font-size:1rem;color:#9ca3af}.book-actions{gap:10px;margin-top:15px;flex-wrap:wrap}.buy-button{flex:1 1;background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;border:none;padding:12px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.9rem}.buy-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,.4)}.buy-button:disabled{background:#9ca3af;cursor:not-allowed;transform:none}.view-button{background:linear-gradient(135deg,#2196f3,#1976d2);color:#fff;text-decoration:none;padding:12px 24px;border-radius:8px;font-weight:600;font-size:.9rem;transition:all .3s ease;box-shadow:0 4px 15px rgba(33,150,243,.3);flex:1 1;text-align:center;min-width:120px}.view-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(33,150,243,.4);color:#fff;text-decoration:none}.toast-container{position:fixed;bottom:20px;right:20px;z-index:1000}.toast{background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:1rem 1.5rem;border-radius:12px;box-shadow:0 10px 25px rgba(16,185,129,.3);display:flex;align-items:center;gap:.75rem;min-width:300px;transform:translateX(100%);opacity:0;visibility:hidden;transition:all .4s cubic-bezier(.68,-.55,.265,1.55);position:relative;z-index:1001}.toast.show{transform:translateX(0)!important;opacity:1!important;visibility:visible!important}.toast-icon{font-size:1.5rem;animation:bounce .6s ease-in-out}.toast-content{flex:1 1}.toast-title{font-weight:600;font-size:1rem;margin:0 0 .25rem}.toast-message{font-size:.875rem;opacity:.9;margin:0}.toast-close{background:none;border:none;color:#fff;font-size:1.25rem;cursor:pointer;opacity:.7;transition:opacity .2s ease;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.toast-close:hover{opacity:1}.account-card{background:#fff;border-radius:20px;padding:24px;box-shadow:0 8px 32px rgba(0,0,0,.08);border:1px solid #e2e8f0}.account-card h3{font-size:1.25rem;font-weight:700;color:#1a202c;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid #e2e8f0}.account-info{display:flex;flex-direction:column;gap:12px}.info-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.info-item .label{font-weight:500;color:#4a5568}.info-item .value{font-weight:600;color:#1a202c}.payment-methods{display:flex;flex-direction:column;gap:16px}.payment-method{display:flex;justify-content:space-between;align-items:center;padding:16px;border:2px solid #e2e8f0;border-radius:12px;transition:all .2s ease}.payment-method.default{border-color:#10b981;background:#f0fdf4}.method-info{display:flex;flex-direction:column;gap:4px}.method-type{font-weight:600;color:#1a202c}.method-number{font-size:.9rem;color:#6b7280}.method-expiry{font-size:.8rem;color:#9ca3af}.method-actions{display:flex;align-items:center;gap:12px}.default-badge{background:#10b981;color:#fff;padding:4px 8px;border-radius:8px;font-size:.8rem;font-weight:600}.edit-btn{background:#f3f4f6;color:#374151;border:none;padding:6px 12px;border-radius:8px;font-size:.8rem;cursor:pointer;transition:all .2s ease}.edit-btn:hover{background:#e5e7eb}.add-payment-btn{width:100%;background:#f8fafc;color:#374151;border:2px dashed #d1d5db;padding:16px;border-radius:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.add-payment-btn:hover{background:#f1f5f9;border-color:#9ca3af}.purchases-list{display:flex;flex-direction:column;gap:12px}.purchase-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f8fafc;border-radius:8px}.purchase-info{display:flex;flex-direction:column;gap:4px}.purchase-book{font-weight:600;color:#1a202c}.purchase-date{font-size:.8rem;color:#6b7280}.purchase-details{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.purchase-amount{font-weight:600;color:#1a202c}.purchase-status{font-size:.8rem;padding:2px 8px;border-radius:8px;font-weight:500}.purchase-status.completed{background:#d1fae5;color:#065f46}.purchase-status.pending{background:#fef3c7;color:#92400e}.profile-section{padding:0 20px;margin-bottom:80px}.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));grid-gap:30px;gap:30px;max-width:1200px;margin:0 auto}.profile-card{background:#fff;border-radius:20px;padding:24px;box-shadow:0 8px 32px rgba(0,0,0,.08);border:1px solid #e2e8f0}.profile-card h3{font-size:1.25rem;font-weight:700;color:#1a202c;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid #e2e8f0}.profile-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}.profile-avatar-large{width:64px;height:64px;background:#007680;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff}.profile-info h4{font-size:1.1rem;font-weight:700;color:#1a202c;margin:0 0 4px}.profile-info p{font-size:.9rem;color:#6b7280;margin:0 0 8px}.member-since{font-size:.8rem;color:#9ca3af}.profile-stats{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.stat-item{padding:8px 0}.stat-label{color:#4a5568}.favorite-genres{margin-bottom:20px}.genres-label{font-weight:500;color:#4a5568;display:block;margin-bottom:8px}.genres-list{gap:8px}.genre-tag{background:#e0e7ff;color:#3730a3;padding:4px 12px;border-radius:16px;font-size:.8rem}.edit-profile-btn{width:100%;background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;border:none;padding:12px 20px;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease}.edit-profile-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(102,126,234,.4)}.settings-list{display:flex;flex-direction:column;gap:16px}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #e2e8f0}.setting-item:last-child{border-bottom:none}.setting-info{display:flex;flex-direction:column;gap:4px}.setting-title{font-weight:600;color:#1a202c}.setting-description{font-size:.8rem;color:#6b7280}.toggle-switch{position:relative;display:inline-block;width:50px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:24px}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;border-radius:50%}input:checked+.slider{background-color:#dc3c41}input:checked+.slider:before{transform:translateX(26px)}.security-actions{display:flex;flex-direction:column;gap:12px}.security-btn{width:100%;background:#f8fafc;color:#374151;border:1px solid #e2e8f0;padding:12px 16px;border-radius:12px;font-weight:500;cursor:pointer;transition:all .2s ease;text-align:left}.security-btn:hover{background:#f1f5f9;border-color:#cbd5e1}.security-btn.danger{background:#fef2f2;color:#dc2626;border-color:#fecaca}.security-btn.danger:hover{background:#fee2e2;border-color:#fca5a5}.favorites-section{padding:0 20px;margin-bottom:80px}.favorites-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));grid-gap:30px;gap:30px;max-width:1200px;margin:0 auto}.favorites-card{background:#fff;border-radius:20px;padding:24px;box-shadow:0 8px 32px rgba(0,0,0,.08);border:1px solid #e2e8f0}.favorites-card h3{font-size:1.25rem;font-weight:700;color:#1a202c;margin:0 0 8px}.section-description{font-size:.9rem;color:#6b7280;margin:0 0 20px}.books-list{display:flex;flex-direction:column;gap:16px}.book-item{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid #e2e8f0;border-radius:12px;transition:all .2s ease}.book-item:hover{border-color:#cbd5e1;box-shadow:0 4px 12px rgba(0,0,0,.05)}.book-item.purchased{border-color:#10b981;background:#f0fdf4}.book-item.wishlist{border-color:#f59e0b;background:#fffbeb}.book-cover-small{position:relative;width:60px;height:80px;border-radius:8px;overflow:hidden}.book-cover-small img{width:100%;height:100%;object-fit:cover}.purchased-badge{background:#10b981;font-weight:700}.purchased-badge,.wishlist-badge{position:absolute;top:4px;right:4px;color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.wishlist-badge{background:#f59e0b}.book-details{flex:1 1;display:flex;flex-direction:column;gap:4px}.book-details .book-title{font-size:1rem;font-weight:600;color:#1a202c;margin:0}.book-details .book-author{font-size:.8rem;color:#6b7280;margin:0}.added-date{font-size:.7rem;color:#9ca3af}.book-price{font-size:.9rem;font-weight:600;color:#1a202c}.book-actions{flex-direction:column;gap:8px}.buy-btn,.read-btn{background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease;text-decoration:none;text-align:center}.buy-btn:hover,.read-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,.3)}.remove-btn{background:#f3f4f6;color:#6b7280;border:none;padding:6px 12px;border-radius:8px;font-size:.8rem;cursor:pointer;transition:all .2s ease}.remove-btn:hover{background:#e5e7eb;color:#374151}.logout-section{padding:0 20px;margin-bottom:80px}.logout-card{max-width:600px;margin:0 auto;background:#fff;border-radius:20px;padding:40px;box-shadow:0 8px 32px rgba(0,0,0,.08);border:1px solid #e2e8f0;text-align:center}.logout-icon{font-size:4rem;margin-bottom:20px}.logout-card h3{font-size:1.5rem;font-weight:700;color:#1a202c;margin:0 0 16px}.logout-card p{font-size:1rem;color:#4a5568;margin:0 0 20px}.logout-info{text-align:left;margin:0 0 30px;padding:0 20px}.logout-info li{font-size:.9rem;color:#4a5568;margin-bottom:8px}.logout-actions{display:flex;gap:16px;justify-content:center;margin-bottom:30px}.confirm-logout-btn{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:none;padding:12px 24px;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease}.confirm-logout-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(220,38,38,.4)}.cancel-btn{background:#f3f4f6;color:#374151;border:1px solid #e2e8f0;padding:12px 24px;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none}.cancel-btn:hover{background:#e5e7eb;transform:translateY(-2px)}.logout-alternatives{border-top:1px solid #e2e8f0;padding-top:20px}.logout-alternatives h4{font-size:1rem;font-weight:600;color:#1a202c;margin:0 0 16px}.alternative-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.alt-btn{background:#f8fafc;color:#374151;border:1px solid #e2e8f0;padding:8px 16px;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none}.alt-btn:hover{background:#f1f5f9;border-color:#cbd5e1;transform:translateY(-1px)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-width:500px;width:90%;max-height:80vh;overflow-y:auto;animation:modalSlideIn .3s ease}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 0;border-bottom:1px solid #e2e8f0;margin-bottom:24px}.modal-header h3{font-size:1.25rem;font-weight:700;color:#1a202c;margin:0}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:4px;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-btn:hover{background:#f3f4f6;color:#374151}.modal-body{padding:0 24px}.modal-footer{display:flex;gap:12px;justify-content:flex-end;padding:24px;border-top:1px solid #e2e8f0;margin-top:24px}.form-group{margin-bottom:20px}.form-group label{margin-bottom:8px}.form-group input,.form-group select{width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;transition:all .2s ease;background:#fff}.form-group input:focus,.form-group select:focus{outline:none;border-color:#dc3c41;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.form-group input:disabled{background:#f9fafb;color:#6b7280;cursor:not-allowed}.genres-selection{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));grid-gap:12px;gap:12px;margin-top:8px}.genre-checkbox{display:flex;align-items:center;gap:8px;padding:8px 12px;border:2px solid #e2e8f0;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff}.genre-checkbox:hover{border-color:#cbd5e1;background:#f8fafc}.genre-checkbox input[type=checkbox]{width:auto;margin:0}.genre-checkbox input[type=checkbox]:checked+span{font-weight:600;color:#dc3c41}.genre-checkbox:has(input[type=checkbox]:checked){border-color:#dc3c41;background:#e0e7ff}.btn-primary{background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;border:none;padding:12px 24px;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(102,126,234,.4)}.btn-secondary{background:#f3f4f6;color:#374151;border:1px solid #e2e8f0;padding:12px 24px;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-secondary:hover{background:#e5e7eb;border-color:#cbd5e1}.btn-danger{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:none;padding:12px 24px;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(220,38,38,.4)}.filters-section{gap:2rem;margin-bottom:2rem;padding:1.5rem;background:#f8fafc;border-radius:16px;border:1px solid #e2e8f0;flex-wrap:wrap}.filter-group{display:flex;flex-direction:column;gap:.5rem;min-width:150px}.filter-group label{font-weight:600;color:#374151;font-size:.9rem}.filter-select{padding:.75rem 1rem;border:2px solid #e2e8f0;border-radius:12px;background:#fff;font-size:.9rem;cursor:pointer;transition:all .2s ease}.filter-select:focus{outline:none;border-color:#dc3c41;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.filter-results{margin-left:auto;font-size:.9rem;color:#6b7280;font-weight:500}.book-meta{display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}.book-category{background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;text-transform:uppercase;letter-spacing:.5px}.book-age-group,.book-category{padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600}.book-age-group{background:#e0e7ff;color:#3730a3}@media (max-width:768px){.filters-section{flex-direction:column;align-items:stretch;gap:1rem}.filter-group{min-width:auto}.filter-results{margin-left:0;text-align:center}.book-meta{justify-content:center}}.admin-login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#dc3c41,#c83237);padding:2rem}.admin-login-card{background:#fff;border-radius:20px;padding:3rem;box-shadow:0 20px 60px rgba(0,0,0,.3);max-width:450px;width:100%;text-align:center}.login-header{margin-bottom:2rem}.admin-logo{width:80px;height:80px;margin:0 auto 1rem;border-radius:50%;overflow:hidden;border:4px solid #dc3c41}.admin-logo img{width:100%;height:100%;object-fit:cover}.login-header h1{font-size:1.8rem;font-weight:700;color:#1a202c;margin:0 0 .5rem}.login-header h2{font-size:1.2rem;color:#4a5568;margin:0;font-weight:500}.login-form{text-align:left}.login-form .form-group{margin-bottom:1.5rem}.login-form label{display:block;margin-bottom:.5rem;font-weight:600;color:#374151}.login-form input{width:100%;padding:1rem;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;transition:all .2s ease}.login-form input:focus{outline:none;border-color:#dc3c41;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.login-btn{width:100%;background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;border:none;padding:1rem 2rem;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-bottom:1.5rem}.login-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(102,126,234,.4)}.login-btn:disabled{opacity:.7;cursor:not-allowed}.error-message{background:#fef2f2;margin-bottom:1rem}.demo-credentials{background:#f8fafc;padding:1.5rem;border-radius:12px;border:1px solid #e2e8f0}.demo-credentials h3{font-size:1rem;font-weight:600;color:#374151;margin:0 0 1rem}.demo-credentials p{margin:.5rem 0;font-size:.9rem;color:#6b7280}.admin-dashboard{min-height:100vh;background:#f8fafc}.admin-header{background:#fff;border-bottom:1px solid #e2e8f0;padding:1rem 2rem;justify-content:space-between;box-shadow:0 1px 3px rgba(0,0,0,.1)}.admin-header,.header-left{display:flex;align-items:center}.header-left{gap:1rem}.header-logo{width:40px;height:40px;border-radius:50%}.header-left h1{font-size:1.5rem;font-weight:700;color:#1a202c;margin:0}.header-right{display:flex;align-items:center;gap:1rem}.admin-welcome{font-weight:500;color:#4a5568}.logout-btn{background:#f3f4f6;color:#374151;border:1px solid #e2e8f0;padding:.5rem 1rem;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s ease}.logout-btn:hover{background:#e5e7eb;border-color:#cbd5e1}.admin-nav{background:#fff;border-bottom:1px solid #e2e8f0;padding:0 2rem;display:flex;gap:0}.nav-item{padding:1rem 1.5rem;text-decoration:none;color:#6b7280;font-weight:500;border-bottom:3px solid transparent;transition:all .2s ease}.nav-item:hover{color:#374151;background:#f8fafc}.nav-item.active{color:#dc3c41;border-bottom-color:#dc3c41;background:#f0f4ff}.admin-content{padding:2rem;max-width:1400px;margin:0 auto}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.page-header h2{font-size:2rem;font-weight:700;color:#1a202c;margin:0}.add-btn{background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease}.add-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(102,126,234,.4)}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:1.5rem;gap:1.5rem;margin-bottom:2rem}.stat-card{background:#fff;padding:1.5rem;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.05);border:1px solid #e2e8f0;gap:1rem}.stat-card,.stat-icon{display:flex;align-items:center}.stat-icon{font-size:2rem;width:60px;height:60px;justify-content:center;background:linear-gradient(135deg,#dc3c41,#c83237);border-radius:12px}.stat-info h3{font-size:2rem;font-weight:700;color:#1a202c;margin:0 0 .25rem}.stat-info p{color:#6b7280;margin:0;font-weight:500}.charts-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));grid-gap:1.5rem;gap:1.5rem;margin-bottom:2rem}.chart-card{box-shadow:0 4px 12px rgba(0,0,0,.05);overflow:hidden}.chart-header{padding:1.5rem;border-bottom:1px solid #e2e8f0}.chart-header h3{color:#1a202c}.chart-content{padding:1.5rem}.popular-book-item{gap:1rem;margin-bottom:1rem;padding:.75rem;background:#f8fafc;border-radius:8px}.book-rank,.popular-book-item{display:flex;align-items:center}.book-rank{background:#dc3c41;color:#fff;width:30px;height:30px;border-radius:50%;justify-content:center;font-weight:700;font-size:.9rem}.book-info h4{font-size:1rem;font-weight:600;color:#1a202c;margin:0 0 .25rem}.book-stats{display:flex;gap:1rem;font-size:.8rem;color:#6b7280}.activity-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid #e2e8f0}.activity-item:last-child{border-bottom:none}.activity-content{font-size:.9rem;color:#374151}.activity-time{font-size:.8rem;color:#6b7280}.quick-actions{background:#fff;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.05);border:1px solid #e2e8f0;padding:1.5rem}.quick-actions h3{font-size:1.25rem;font-weight:700;color:#1a202c;margin:0 0 1rem}.action-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:1rem;gap:1rem}.action-btn{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;text-decoration:none;color:#374151;font-weight:500;transition:all .2s ease}.action-btn:hover{background:#e0e7ff;border-color:#dc3c41;color:#dc3c41}.btn-icon{font-size:1.2rem}.books-table-container,.games-table-container,.users-table-container{background:#fff;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.05);border:1px solid #e2e8f0;overflow:hidden;margin-bottom:2rem}.books-table,.games-table,.users-table{width:100%;border-collapse:collapse}.books-table th,.games-table th,.users-table th{background:#f8fafc;padding:1rem;text-align:left;font-weight:600;color:#374151;border-bottom:1px solid #e2e8f0}.books-table td,.games-table td,.users-table td{padding:1rem;border-bottom:1px solid #e2e8f0;vertical-align:middle}.book-thumbnail{width:50px;height:65px;object-fit:cover;border-radius:6px}.book-title-cell{display:flex;flex-direction:column;gap:.25rem}.age-group{font-size:.8rem;color:#6b7280}.category-badge{background:#e0e7ff;color:#3730a3;padding:.25rem .75rem;border-radius:12px;font-size:.8rem;font-weight:600}.price-cell{display:flex;flex-direction:column;gap:.25rem}.current-price{font-weight:600;color:#1a202c}.original-price{text-decoration:line-through}.original-price,.stats-cell{font-size:.8rem;color:#6b7280}.stats-cell{display:flex;flex-direction:column;gap:.25rem}.status-btn{padding:.5rem 1rem;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease}.status-btn.active{background:#d1fae5;color:#065f46}.status-btn.inactive{background:#fef3c7;color:#92400e}.action-buttons{display:flex;gap:.5rem}.delete-btn,.edit-btn,.play-btn,.view-btn{padding:.5rem;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.edit-btn{background:#e0e7ff;color:#3730a3}.delete-btn{background:#fef2f2;color:#dc2626}.view-btn{background:#f0fdf4;color:#166534}.play-btn{background:linear-gradient(135deg,#dc3c41,#c83237)}.delete-btn:hover,.edit-btn:hover,.play-btn:hover,.view-btn:hover{transform:scale(1.1)}.user-stats{display:flex;gap:1rem}.stat-item{background:#f8fafc;padding:.5rem 1rem;border-radius:8px;font-size:.9rem;color:#6b7280}.filters-section{display:flex;gap:1rem;margin-bottom:1.5rem;align-items:center}.search-box input{padding:.75rem 1rem;border:2px solid #e2e8f0;border-radius:8px;width:300px}.user-info{gap:.75rem}.user-avatar,.user-info{display:flex;align-items:center}.user-avatar{width:40px;height:40px;background:#007680;color:#fff;border-radius:50%;justify-content:center;font-weight:700}.user-details{display:flex;flex-direction:column;gap:.25rem}.user-details span{font-size:.8rem;color:#6b7280}.stat-badge{background:#e0e7ff;color:#3730a3;padding:.25rem .5rem;border-radius:6px;font-size:.8rem;font-weight:600}.genres-list{display:flex;flex-wrap:wrap;gap:.25rem}.genre-tag{background:#f0fdf4;color:#166534;padding:.25rem .5rem;border-radius:6px;font-size:.7rem;font-weight:500}.game-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:1rem;gap:1rem;margin-bottom:2rem}.game-info{display:flex;flex-direction:column;gap:.5rem}.game-description{font-size:.8rem;color:#6b7280;margin:0}.book-badge{background:#fef3c7;color:#92400e}.book-badge,.difficulty-badge{padding:.25rem .75rem;border-radius:12px;font-size:.8rem;font-weight:600}.difficulty-badge.kolay{background:#d1fae5;color:#065f46}.difficulty-badge.orta{background:#fef3c7;color:#92400e}.difficulty-badge.zor{background:#fef2f2;color:#dc2626}.game-stats{flex-direction:column;gap:.25rem}.report-controls{display:flex;gap:1rem;align-items:center}.period-select{padding:.75rem 1rem;border:2px solid #e2e8f0;border-radius:8px;background:#fff}.generate-btn{background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.generate-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(102,126,234,.4)}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:1.5rem;gap:1.5rem;margin-bottom:2rem}.metric-card{box-shadow:0 4px 12px rgba(0,0,0,.05);gap:1rem}.metric-card,.metric-icon{display:flex;align-items:center}.metric-icon{font-size:2rem;width:60px;height:60px;justify-content:center;background:linear-gradient(135deg,#dc3c41,#c83237);border-radius:12px}.metric-info h3{color:#1a202c;margin:0 0 .25rem}.metric-info p{color:#6b7280;margin:0 0 .25rem}.metric-change{font-size:.8rem}.chart-item{gap:1rem;margin-bottom:1rem;padding:.75rem;background:#f8fafc;border-radius:8px}.chart-item,.item-rank{display:flex;align-items:center}.item-rank{background:#dc3c41;color:#fff;width:30px;height:30px;border-radius:50%;justify-content:center;font-weight:700;font-size:.9rem}.item-info h4{font-size:1rem;font-weight:600;color:#1a202c;margin:0 0 .25rem}.item-stats{display:flex;gap:1rem;font-size:.8rem;color:#6b7280}.item-bar{flex:1 1;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,#dc3c41,#c83237);border-radius:4px;transition:width .3s ease}.growth-chart{display:flex;align-items:end;gap:1rem;height:200px;padding:1rem 0}.growth-bar{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:1 1}.bar{background:linear-gradient(180deg,#dc3c41,#c83237);border-radius:4px 4px 0 0;min-height:20px;width:100%;transition:height .3s ease}.bar-label{font-size:.8rem;color:#6b7280;font-weight:500}.bar-value{font-size:.9rem;color:#374151;font-weight:600}.game-item{gap:1rem;margin-bottom:1rem;padding:.75rem;background:#f8fafc;border-radius:8px}.game-item,.game-rank{display:flex;align-items:center}.game-rank{background:#dc3c41;color:#fff;width:30px;height:30px;border-radius:50%;justify-content:center;font-weight:700;font-size:.9rem}.game-info h4{font-size:1rem;font-weight:600;color:#1a202c;margin:0 0 .25rem}.game-stats{font-size:.8rem;color:#6b7280}.score-bar{flex:1 1;background:#e2e8f0}.score-fill{background:linear-gradient(90deg,#10b981,#059669);border-radius:4px}.category-item{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;padding:.75rem;background:#f8fafc;border-radius:8px}.category-info{min-width:120px}.category-info h4{font-size:1rem;font-weight:600;color:#1a202c;margin:0 0 .25rem}.category-info span{font-size:.8rem;color:#6b7280}.category-bar{flex:1 1;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden}.category-fill{height:100%;background:linear-gradient(90deg,#f59e0b,#d97706);border-radius:4px;transition:width .3s ease}.category-percentage{min-width:40px;text-align:right;font-weight:600;color:#374151}.engagement-section{background:#fff;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.05);border:1px solid #e2e8f0;padding:1.5rem;margin-bottom:2rem}.engagement-section h3{font-size:1.25rem;font-weight:700;color:#1a202c;margin:0 0 1rem}.engagement-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:1rem;gap:1rem}.engagement-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:#f8fafc;border-radius:12px}.engagement-icon{font-size:1.5rem;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#dc3c41,#c83237);border-radius:10px}.engagement-info h4{font-size:1rem;font-weight:600;color:#1a202c;margin:0 0 .25rem}.engagement-info p{font-size:1.25rem;font-weight:700;color:#374151;margin:0}.export-section{background:#fff;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.05);border:1px solid #e2e8f0;padding:1.5rem}.export-section h3{font-size:1.25rem;font-weight:700;color:#1a202c;margin:0 0 1rem}.export-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:1rem;gap:1rem}.export-btn{background:#f8fafc;color:#374151;border:1px solid #e2e8f0;padding:1rem;border-radius:12px;font-weight:500;transition:all .2s ease;text-align:center}.export-btn:hover{background:#e0e7ff;border-color:#dc3c41;color:#dc3c41}@media (max-width:768px){.admin-content{padding:1rem}.page-header{flex-direction:column;gap:1rem;align-items:stretch}.action-buttons,.charts-section,.metrics-grid,.stats-grid{grid-template-columns:1fr}.admin-nav{overflow-x:auto;padding:0 1rem}.nav-item{white-space:nowrap}.books-table-container,.games-table-container,.users-table-container{overflow-x:auto}.filters-section{flex-direction:column;align-items:stretch}.search-box input{width:100%}}.game-section{padding:2rem;max-width:1200px;margin:0 auto}.game-controls{justify-content:space-between;margin-bottom:2rem;padding:1rem;background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.05);border:1px solid #e2e8f0}.game-status{display:flex;flex-direction:column;gap:.5rem}.turn-label{font-weight:600;color:#374151;font-size:1.1rem}.game-message{color:#6b7280;font-size:.9rem}.control-buttons{display:flex;gap:1rem;align-items:center}.difficulty-select{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem;color:#374151}.difficulty-select select{padding:.5rem}.difficulty-select select,.mute-btn,.reset-btn{border:1px solid #d1d5db;border-radius:6px;background:#fff}.mute-btn,.reset-btn{padding:.5rem 1rem;cursor:pointer;transition:all .2s ease;font-size:.9rem}.mute-btn:hover,.reset-btn:hover{background:#f3f4f6;border-color:#9ca3af}.game-board-container{display:flex;justify-content:center;margin-bottom:2rem}.game-board{display:grid;grid-template-columns:repeat(8,60px);grid-template-rows:repeat(8,60px);grid-gap:2px;gap:2px;background:#8b4513;padding:10px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15)}.board-cell{background:#f0d9b5;border:1px solid #d4af37;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;position:relative}.board-cell:hover{background:#e6d3a3;transform:scale(1.05)}.board-cell.selected{background:#fbbf24;box-shadow:0 0 0 3px #f59e0b}.game-piece{font-size:2rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;animation:pieceAppear .3s ease}@keyframes pieceAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.game-sidebar{display:grid;grid-template-columns:1fr 1fr;grid-gap:2rem;gap:2rem;max-width:800px;margin:0 auto}.game-rules{background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.05);border:1px solid #e2e8f0}.game-rules h3{font-size:1.25rem;font-weight:700;color:#1a202c;margin:0 0 1rem}.game-rules p{color:#4a5568;margin-bottom:1rem;line-height:1.5}.game-rules ul{list-style:none;padding:0;margin:0}.game-rules li{padding:.5rem 0;color:#6b7280;border-bottom:1px solid #e2e8f0}.game-rules li:last-child{border-bottom:none}.score-panel{border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.05);border:1px solid #e2e8f0}.score-panel h3{font-size:1.25rem;font-weight:700;color:#1a202c;margin:0 0 1rem}.score-item{padding:.75rem 0;border-bottom:1px solid #e2e8f0}.score-item:last-child{border-bottom:none}.score-item span{font-weight:600;color:#dc3c41;font-size:1.1rem}.game-over-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{padding:3rem;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:modalSlideIn .3s ease}.modal-content h2{font-size:2rem;font-weight:700;color:#1a202c;margin:0 0 1rem}.modal-content p{font-size:1.1rem;color:#4a5568;margin:0 0 2rem;line-height:1.5}.modal-buttons{display:flex;gap:1rem;justify-content:center}.back-to-book-btn,.play-again-btn{padding:1rem 2rem;border-radius:12px;font-weight:600;text-decoration:none;transition:all .3s ease;cursor:pointer;border:none;font-size:1rem}.play-again-btn{background:linear-gradient(135deg,#dc3c41,#c83237)}.play-again-btn:hover{box-shadow:0 8px 20px rgba(102,126,234,.4)}.back-to-book-btn{background:#f3f4f6;color:#374151;border:1px solid #e2e8f0}.back-to-book-btn:hover{background:#e5e7eb;border-color:#cbd5e1}@media (max-width:768px){.game-controls{flex-direction:column;gap:1rem;align-items:stretch}.control-buttons{justify-content:center;flex-wrap:wrap}.game-board{grid-template-columns:repeat(8,45px);grid-template-rows:repeat(8,45px)}.game-piece{font-size:1.5rem}.game-sidebar{grid-template-columns:1fr;gap:1rem}.modal-content{padding:2rem}.modal-buttons{flex-direction:column}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:1rem}.loading-spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top-color:#dc3c41;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.file-upload-area{border:2px dashed #d1d5db;border-radius:12px;padding:2rem;text-align:center;transition:all .3s ease;cursor:pointer;position:relative;background:#f9fafb}.file-upload-area:hover{border-color:#dc3c41;background:#f0f4ff}.file-upload-area.drag-active{border-color:#dc3c41;background:#e0e7ff;transform:scale(1.02)}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:1rem}.upload-icon{font-size:3rem;opacity:.6}.upload-placeholder p{color:#6b7280;font-size:1rem;margin:0}.file-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.cover-preview{position:relative;display:inline-block}.cover-preview img{max-width:200px;max-height:250px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.remove-cover{position:absolute;top:-10px;right:-10px;background:#ef4444;color:#fff;border:none;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.remove-cover:hover{background:#dc2626;transform:scale(1.1)}.admin-nav .nav-item{position:relative;transition:all .3s ease}.admin-nav .nav-item:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:3px;background:linear-gradient(135deg,#dc3c41,#c83237);transition:width .3s ease}.admin-nav .nav-item.active:after,.admin-nav .nav-item:hover:after{width:100%}.admin-nav .nav-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.2)}.delete-btn,.view-btn{padding:.5rem;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:1rem}.view-btn{background:#e0f2fe;color:#0277bd}.view-btn:hover{background:#b3e5fc;transform:scale(1.1)}.delete-btn{background:#ffebee;color:#c62828}.delete-btn:hover{background:#ffcdd2;transform:scale(1.1)}.export-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s ease;display:flex;align-items:center;gap:.5rem}.export-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,185,129,.4)}.export-btn:active{transform:translateY(0)}.chart-card{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,.08);border:1px solid #e2e8f0;transition:all .3s ease}.chart-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.12)}.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #f1f5f9}.chart-header h3{font-size:1.25rem;font-weight:700;color:#1e293b;margin:0}.chart-period{background:#f1f5f9;color:#64748b;padding:.25rem .75rem;border-radius:20px;font-size:.875rem;font-weight:500}.metric-card{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,.08);border:1px solid #e2e8f0;transition:all .3s ease;position:relative;overflow:hidden}.metric-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(135deg,#dc3c41,#c83237)}.metric-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.12)}.metric-icon{font-size:2.5rem;margin-bottom:1rem;opacity:.8}.metric-info h3{font-size:2rem;font-weight:700;color:#1e293b;margin:0 0 .5rem}.metric-info p{color:#64748b;font-size:.875rem;margin:0 0 .5rem;font-weight:500}.metric-change{color:#10b981;font-size:.75rem;font-weight:600;background:#ecfdf5;padding:.25rem .5rem;border-radius:12px;display:inline-block}@media (max-width:768px){.file-upload-area{padding:1rem}.cover-preview img{max-width:150px;max-height:200px}.chart-header{flex-direction:column;gap:1rem;align-items:flex-start}.metric-card{padding:1rem}.metric-info h3{font-size:1.5rem}}.auth-section{padding:2rem;min-height:80vh;display:flex;align-items:center;justify-content:center}.auth-container{width:100%;max-width:400px}.auth-card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 8px 32px rgba(0,0,0,.1);border:1px solid #e2e8f0}.auth-header{text-align:center;margin-bottom:2rem}.auth-header h3{font-size:1.5rem;font-weight:700;color:#1a202c;margin:0 0 .5rem}.auth-header p{color:#6b7280;margin:0}.auth-form{gap:1.5rem}.auth-form,.form-group{display:flex;flex-direction:column}.form-group{gap:.5rem}.form-group label{font-weight:600;color:#374151;font-size:.875rem}.form-group input{padding:.75rem;border:1px solid #d1d5db;border-radius:8px;font-size:1rem;transition:all .2s ease}.form-group input:focus{outline:none;border-color:#dc3c41;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.auth-btn{background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:.5rem}.auth-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(102,126,234,.4)}.auth-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.error-message{background:#fee2e2;color:#dc2626;padding:.75rem;border-radius:8px;font-size:.875rem;border:1px solid #fecaca}.auth-footer{text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #e2e8f0}.auth-footer p{color:#6b7280;margin:0}.auth-footer a{color:#dc3c41;text-decoration:none;font-weight:600}.auth-footer a:hover{text-decoration:underline}.demo-credentials{margin-top:2rem;padding-top:1.5rem;border-top:1px solid #e2e8f0}.demo-credentials h4{font-size:.875rem;font-weight:600;color:#6b7280;margin:0 0 1rem}.demo-list{display:flex;flex-direction:column;gap:.5rem}.demo-item{background:#f8fafc;padding:.5rem .75rem;border-radius:6px;font-size:.75rem;color:#4a5568;border:1px solid #e2e8f0}.demo-item strong{color:#2d3748}.user-dropdown{position:relative}.dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.15);border:1px solid #e2e8f0;min-width:280px;z-index:1000;overflow:hidden;animation:dropdownSlideIn .2s ease}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;color:#374151;text-decoration:none;transition:all .2s ease;border:none;background:none;width:100%;text-align:left;cursor:pointer}.dropdown-item:hover{background:#f8fafc}.dropdown-item.logout{color:#dc2626}.dropdown-item.logout:hover{background:#fef2f2}@media (max-width:768px){.auth-section{padding:1rem}.auth-card{padding:1.5rem}.dropdown-menu{min-width:250px;right:-20px}.hero-content h1{font-size:2.5rem}.hero-content p{font-size:1.1rem}.section-header h2{font-size:2rem}.books-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.book-cover{height:180px}}@media (max-width:480px){.hero-section{padding:60px 0}.hero-content h1{font-size:2rem}.books-grid{grid-template-columns:1fr;gap:16px}.book-info{padding:20px}}.game-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0 20px;padding:20px;background:linear-gradient(135deg,hsla(0,0%,100%,.95),rgba(248,250,252,.95));border:2px solid hsla(0,0%,100%,.3);border-radius:20px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 8px 32px rgba(0,0,0,.15)}.status{display:flex;flex-direction:column;gap:10px;flex:1 1}.turn-label{font-size:20px;font-weight:700;color:#1a202c;text-shadow:0 1px 2px hsla(0,0%,100%,.8)}.game-message{font-size:16px;font-weight:600;color:#2d3748;min-height:24px;padding:8px 12px;background:hsla(0,0%,100%,.7);border-radius:12px;border-left:4px solid var(--primary);text-shadow:0 1px 2px hsla(0,0%,100%,.9)}.game-controls{gap:12px;align-items:center}.control-btn{width:48px;height:48px;border:none;border-radius:12px;background:var(--primary);color:#fff;font-size:20px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15)}.control-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.2)}.control-btn:active{transform:translateY(0)}.mute-btn[aria-pressed=true]{background:var(--muted);color:#fff}.new-game-btn{background:var(--green)}.board-scene{display:grid;grid-template-columns:min(82vmin,640px) 1fr;grid-gap:24px;gap:24px;align-items:start}.forest-bg{position:relative;width:min(82vmin,640px);height:calc(min(82vmin,640px) + 90px);background:url(/img/arka%20plan.jpg) 50%/cover;border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.2);flex-direction:column;justify-content:flex-start;padding-top:20px;overflow:hidden}.board-frame,.forest-bg{display:flex;align-items:center}.board-frame{width:calc(min(82vmin,640px) - 40px);aspect-ratio:1/1;padding:12px;background:rgba(107,143,71,.4);border-radius:18px;box-shadow:inset 0 0 0 8px rgba(84,114,55,.5);justify-content:center}.board{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:12px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.2);background:hsla(0,0%,100%,.15);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);position:relative}.board,.square{width:100%;height:100%;display:grid}.square{place-items:center;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;transition:all .2s ease}.square:hover{background:hsla(0,0%,100%,.1)!important}.square.light{background:hsla(88,58%,90%,.7)}.square.dark{background:hsla(95,51%,77%,.7)}.square.highlight{outline:4px solid var(--sky);outline-offset:-4px;box-shadow:0 0 0 2px rgba(126,211,255,.3)}.square.capture{outline:4px solid var(--pink);outline-offset:-4px;box-shadow:0 0 0 2px rgba(255,137,193,.3)}.square.from{outline:4px solid var(--green);outline-offset:-4px;box-shadow:0 0 0 2px rgba(121,209,107,.3)}.piece{font-size:calc(var(--square, 64px) * .8);line-height:1;transition:transform .22s ease,filter .22s ease}@keyframes hop{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-20%) scale(1.08)}to{transform:translateY(0) scale(1)}}.hop{animation:hop .28s ease}.file-labels{position:absolute;bottom:-24px;left:0;right:0;display:grid;grid-template-columns:repeat(8,1fr);pointer-events:none}.file-label{text-align:center;font-size:13px;font-weight:700;color:#2d3748;text-shadow:2px 2px 4px hsla(0,0%,100%,.9)}.rank-labels{position:absolute;left:-24px;top:0;bottom:0;display:grid;grid-template-rows:repeat(8,1fr);pointer-events:none}.rank-label{display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#2d3748;text-shadow:2px 2px 4px hsla(0,0%,100%,.9)}.sidebar{display:flex;flex-direction:column;gap:20px}.game-info{background:linear-gradient(135deg,hsla(0,0%,100%,.95),rgba(248,250,252,.95));padding:20px;border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.12);border:2px solid hsla(0,0%,100%,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.game-info h3{margin:0 0 12px;font-size:18px;color:#1a202c;font-weight:700;text-shadow:0 1px 2px hsla(0,0%,100%,.8)}.game-info p{margin:0;font-size:15px;color:#4a5568;line-height:1.6;font-weight:500}.score-card{background:linear-gradient(135deg,hsla(0,0%,100%,.95),rgba(248,250,252,.95));padding:20px;border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.12);border:2px solid hsla(0,0%,100%,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.score-card h4{margin:0 0 16px;font-size:18px;color:#1a202c;font-weight:700;text-shadow:0 1px 2px hsla(0,0%,100%,.8)}.score-item{margin-bottom:12px;font-size:15px;padding:8px 12px;background:hsla(0,0%,100%,.5);border-radius:10px;border:1px solid rgba(0,0,0,.05)}.score-value{color:var(--primary);font-size:16px;text-shadow:0 1px 2px hsla(0,0%,100%,.8)}.score-value.best{color:var(--green);font-size:18px}.game-over-card{background:linear-gradient(135deg,#ff6b6b,#ee5a24,#ff9ff3);color:#fff;padding:24px;border-radius:20px;box-shadow:0 12px 40px rgba(0,0,0,.25);text-align:center;border:3px solid hsla(0,0%,100%,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.game-over-card h4{margin:0 0 16px;font-size:22px;font-weight:800;text-shadow:0 2px 4px rgba(0,0,0,.3)}.game-over-card p{margin:0 0 20px;font-weight:600;opacity:.95;line-height:1.5}.game-over-card p,.play-again-btn{font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.2)}.play-again-btn{background:hsla(0,0%,100%,.25);border:3px solid hsla(0,0%,100%,.4);padding:12px 24px;border-radius:16px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.2)}.play-again-btn:hover{background:hsla(0,0%,100%,.35);transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.3)}.vault-bg{position:relative;background:linear-gradient(135deg,#2c3e50,#34495e);border-radius:20px;padding:20px;box-shadow:0 8px 32px rgba(0,0,0,.3);overflow:hidden}.vault-bg:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url("/img/WhatsApp Görsel 2025-09-24 saat 16.54.58_f5c34773.jpg") 50%/cover;opacity:.3;z-index:0}.vault-bg .board-frame{position:relative;z-index:1}.vault-elements{position:absolute;top:20px;right:20px;z-index:2;display:flex;flex-direction:column;gap:10px}.safe{font-size:24px;animation:bounce 2s infinite}.camera{font-size:20px;animation:blink 3s infinite}.piece.thief{animation:thief-move .3s ease-in-out}.piece.police{animation:police-move .3s ease-in-out}@keyframes thief-move{0%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.1) rotate(5deg)}to{transform:scale(1) rotate(0deg)}}@keyframes police-move{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.vault-bg .square.light{background:rgba(236,240,241,.8);border:1px solid rgba(52,73,94,.3)}.vault-bg .square.dark{background:rgba(52,73,94,.8);border:1px solid rgba(236,240,241,.3)}.vault-bg .square.capture{background:linear-gradient(135deg,#e74c3c,#c0392b);box-shadow:0 0 20px rgba(231,76,60,.6)}.vault-bg .square.highlight{background:linear-gradient(135deg,#f39c12,#e67e22);box-shadow:0 0 15px rgba(243,156,18,.4)}.vault-bg .square.from{background:linear-gradient(135deg,#3498db,#2980b9);box-shadow:0 0 15px rgba(52,152,219,.5)}.rain-container{position:fixed;top:0;left:0;width:100vw;height:100vh;margin:0;padding:0;overflow:hidden;background:linear-gradient(180deg,#07131c,#305472);z-index:1}.rain-container:after,.rain-container:before{content:"HOVER SCREEN TO CHANGE WIND SPEED";font-family:Arial,Helvetica,serif;font-size:12px;position:absolute;width:100%;text-align:center;top:18px;color:hsla(0,0%,100%,.25);z-index:-1}.rain-container:after{content:"CLICK & HOLD TO CREATE LIGHTNING";top:auto;bottom:18px}.rain-container:active:after,.rain-container:active:before{color:hsla(0,0%,100%,0);transition:all .5s ease 0s}.rain{position:absolute;width:120vw;height:100vh;cursor:pointer;z-index:0;left:-10vw}.rain .left,.rain .right{width:20vw;height:100vh;left:10vw;position:absolute;box-sizing:border-box;z-index:2}.rain .right{left:auto;right:10vw}.rain .right:after{content:"▲ \A ▼";position:fixed;text-indent:1px;left:calc(50% - 30px);top:45px;color:hsla(0,0%,100%,.5);font-size:20px;border:2px dashed hsla(0,0%,100%,.2);border-radius:100%;width:60px;height:60px;box-sizing:border-box;padding:13px 18px;text-align:center;line-height:15px;transition:all .5s ease 0s;white-space:pre-wrap}.rain .right:hover:after{transform:rotate(-22deg);transition:all .5s ease 0s}.rain .right:hover~.drop{--angle:75deg}.rain .left:hover~.drop{--angle:105deg}.rain .left:hover~.right:after{transform:rotate(22deg);transition:all .5s ease 0s}.rain .right.center{right:30vw}.rain .right.center:after{display:none}.rain .right.center:hover~.drop{--angle:85deg}.rain .right.center:hover~.right:after{transform:rotate(-12deg);transition:all .5s ease 0s}.rain .left.center{left:30vw}.rain .left.center:hover~.drop{--angle:95deg}.rain .left.center:hover~.right:after{transform:rotate(12deg);transition:all .5s ease 0s}.rain:active{cursor:none;animation:lightning .1s linear 0s 2,lightning .15s ease-out .25s 1}.rain:active .right:after,.rain:active:after{opacity:0;transition:all .5s ease 0s}.rain:after{content:"↯";position:fixed;left:calc(50% - 30px);bottom:45px;color:hsla(0,0%,100%,.5);font-size:35px;border:2px dashed hsla(0,0%,100%,.2);border-radius:100%;width:60px;height:60px;box-sizing:border-box;padding:13px 18px;text-align:center;line-height:30px;transition:all .5s ease 0s;white-space:pre-wrap}.drop{border:.25vmin solid transparent;border-bottom-color:#abc2e9;position:absolute;top:-5vmin;--angle:91deg;opacity:.8;animation:fall linear infinite}.drop:nth-child(5){opacity:.1;left:10vw;border-left-width:2vmin;animation:fall-1 .15s ease-in -.5s infinite}.drop:nth-child(6){opacity:.2;left:20vw;border-left-width:3vmin;animation:fall-2 .3s ease-in -1s infinite}.drop:nth-child(7){opacity:.3;left:30vw;border-left-width:4vmin;animation:fall-3 .45s ease-in -1.5s infinite}.drop:nth-child(8){opacity:.4;left:40vw;border-left-width:5vmin;animation:fall-4 .6s ease-in -2s infinite}.drop:nth-child(9){opacity:.5;left:50vw;border-left-width:6vmin;animation:fall-5 .75s ease-in -2.5s infinite}.drop:nth-child(10){opacity:.6;left:60vw;border-left-width:7vmin;animation:fall-6 .9s ease-in -3s infinite}.drop:nth-child(11){opacity:.7;left:70vw;border-left-width:8vmin;animation:fall-7 1.05s ease-in -3.5s infinite}.drop:nth-child(12){opacity:.8;left:80vw;border-left-width:9vmin;animation:fall-8 1.2s ease-in -4s infinite}.drop:nth-child(13){opacity:.9;left:90vw;border-left-width:10vmin;animation:fall-9 1.35s ease-in -4.5s infinite}.drop:nth-child(14){opacity:.1;left:100vw;border-left-width:11vmin;animation:fall-10 1.5s ease-in -5s infinite}.drop:nth-child(n+15){opacity:calc(.1 + (var(--i, 0) * .01));left:calc(var(--i, 0) * .2vw);border-left-width:calc(1vmin + (var(--i, 0) * .1vmin));animation:fall-general calc(.1s + (var(--i, 0) * .01s)) calc(-.1s - (var(--i, 0) * .01s)) ease-in infinite}@keyframes fall-general{0%{transform:rotate(var(--angle)) translateX(0)}to{transform:rotate(var(--angle)) translateX(calc(100vh + 5vmin))}}.book-info-section{display:grid;grid-template-columns:300px 1fr;grid-gap:32px;gap:32px;align-items:start;margin:32px 0;padding:24px;background:linear-gradient(135deg,rgba(135,206,250,.95),rgba(173,216,230,.95));border-radius:24px;box-shadow:0 12px 40px rgba(0,0,0,.1);border:2px solid hsla(0,0%,100%,.3)}.book-cover-large{text-align:center;padding:20px}.book-cover-image{width:200px;height:280px;object-fit:cover;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.2);margin-bottom:16px;transition:transform .3s ease}.book-cover-image:hover{transform:scale(1.05)}.weather-icon{font-size:80px;margin-bottom:16px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.book-cover-large h3{font-size:24px;margin:0 0 8px;color:#1a202c;font-weight:800}.book-cover-large .author{font-size:16px;margin:0 0 16px;color:#4a5568;font-weight:600}.book-description p{font-size:15px;margin:0 0 20px;color:#2d3748;line-height:1.6}.games-section{margin:32px 0}.games-section h2{font-size:24px;margin:0 0 24px;color:#1a202c;font-weight:700;text-align:center}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-gap:20px;gap:20px;margin-top:24px}.game-card{background:linear-gradient(135deg,hsla(0,0%,100%,.95),rgba(248,250,252,.95));padding:24px;border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.1);border:2px solid hsla(0,0%,100%,.3);text-align:center;transition:all .3s ease;position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(135,206,250,.1),rgba(173,216,230,.1));opacity:0;transition:opacity .3s ease;z-index:0}.game-card:hover:before{opacity:1}.game-card:hover{transform:translateY(-8px);box-shadow:0 16px 48px rgba(0,0,0,.15)}.game-card>*{position:relative;z-index:1}.game-icon{font-size:48px;margin-bottom:16px;display:block}.game-card h3{font-size:20px;margin:0 0 12px;color:#1a202c;font-weight:700}.game-card p{font-size:14px;margin:0 0 20px;color:#4a5568;line-height:1.5}.play-btn{display:inline-block;background:linear-gradient(135deg,#4facfe,#00f2fe);padding:12px 24px;border-radius:12px;font-weight:600;transition:all .3s ease;box-shadow:0 4px 12px rgba(79,172,254,.3);border:2px solid hsla(0,0%,100%,.2)}.play-btn,.play-btn:hover{color:#fff;text-decoration:none}.play-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(79,172,254,.4)}.rain-game-scene{display:grid;grid-template-columns:1fr 300px;grid-gap:24px;gap:24px;margin:20px 0}.sky-background{position:relative;background:linear-gradient(180deg,#87ceeb,#98d8e8 50%,#b0e0e6);border-radius:20px;padding:20px;box-shadow:0 8px 32px rgba(0,0,0,.2);overflow:hidden;min-height:500px}.clouds{top:20px;left:0;right:0;height:80px;z-index:1}.cloud,.clouds{position:absolute}.cloud{font-size:60px;animation:float 4s ease-in-out infinite}.cloud-1{left:5%;animation-delay:0s}.cloud-2{left:25%;animation-delay:.5s}.cloud-3{left:50%;animation-delay:1s}.cloud-4{left:75%;animation-delay:1.5s}.cloud-5{right:15%;animation-delay:2s}.cloud-6{right:5%;animation-delay:2.5s}.game-area{position:relative;width:100%;height:400px;margin-top:100px;border:2px dashed hsla(0,0%,100%,.5);border-radius:12px;background:hsla(0,0%,100%,.1)}.water-drop{position:absolute;font-size:24px;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:all .3s ease;z-index:2}.water-drop:not(.falling):not(.collected):hover{transform:scale(1.2);cursor:-webkit-grab;cursor:grab}.water-drop.falling{animation:fall 2s ease-in forwards}.water-drop.collected{opacity:.3;transform:scale(.8)}@keyframes fall{0%{transform:translateY(0) rotate(0deg)}to{transform:translateY(300px) rotate(1turn)}}.ground{position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(180deg,#8b4513,sienna);border-radius:0 0 10px 10px;display:flex;align-items:center;justify-content:center;z-index:3}.ground-text{color:#fff;font-weight:700;font-size:18px;text-shadow:0 2px 4px rgba(0,0,0,.5)}.score-animation{position:absolute;color:gold;font-weight:700;font-size:20px;text-shadow:0 2px 4px rgba(0,0,0,.8);animation:scorePop 1s ease-out forwards;pointer-events:none;z-index:10}@keyframes scorePop{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-50px) scale(1.2)}}.water-cycle-scene{display:grid;grid-template-columns:1fr 300px;grid-gap:24px;gap:24px;margin:20px 0}.cycle-background{background:url(/img/yağmur\ döngüsü.png) 50%/cover;border-radius:20px;padding:20px;box-shadow:0 8px 32px rgba(0,0,0,.2);min-height:500px;position:relative;overflow:hidden;border:3px solid hsla(0,0%,100%,.3)}.cycle-background:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:hsla(0,0%,100%,.1);border-radius:17px;z-index:1}.cycle-game-area{position:relative;height:450px;background:hsla(0,0%,100%,.05);border-radius:12px;overflow:hidden;z-index:2}.interactive-sun{position:absolute;top:20px;left:20px;width:100px;height:100px;background:radial-gradient(circle,rgba(255,255,0,.3),rgba(255,165,0,.2));border-radius:50%;border:3px solid gold;box-shadow:0 4px 12px rgba(255,215,0,.5);cursor:pointer;transition:all .3s ease;z-index:3}.interactive-sun:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(255,215,0,.7)}.interactive-cloud{position:absolute;top:30px;left:50%;transform:translateX(-50%);width:150px;height:80px;background:hsla(0,0%,100%,.4);border-radius:20px;border:3px solid #87ceeb;box-shadow:0 4px 12px rgba(135,206,235,.5);cursor:pointer;transition:all .3s ease;z-index:3}.interactive-cloud:hover{transform:translateX(-50%) scale(1.05);box-shadow:0 6px 20px rgba(135,206,235,.7)}.interactive-ground{position:absolute;bottom:10px;left:15%;transform:translateX(-50%);width:180px;height:60px;background:linear-gradient(180deg,rgba(30,144,255,.7),rgba(0,100,200,.8));border-radius:20px;border:3px solid #1e90ff;box-shadow:0 4px 12px rgba(30,144,255,.5);cursor:pointer;transition:all .3s ease;z-index:3}.interactive-ground:hover{transform:translateX(-50%) scale(1.05);box-shadow:0 6px 20px rgba(30,144,255,.7)}.water-particle{position:absolute;font-size:28px;cursor:-webkit-grab;cursor:grab;transition:all .3s ease;z-index:4;-webkit-user-select:none;-moz-user-select:none;user-select:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.water-particle:hover{transform:scale(1.3)}.water-particle.animating{animation:bounce .6s ease-in-out}.water-particle.liquid{color:#4a90e2;text-shadow:0 0 8px rgba(74,144,226,.5)}.water-particle.vapor{color:#e0e0e0;opacity:.8;text-shadow:0 0 8px hsla(0,0%,88%,.5)}.water-particle.cloud{color:#87ceeb;text-shadow:0 0 8px rgba(135,206,235,.5)}.step-indicators{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:8px;z-index:5}.step-indicator{display:flex;align-items:center;gap:8px;padding:8px 12px;background:hsla(0,0%,100%,.9);border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:all .3s ease;border:2px solid transparent}.step-indicator.active{background:rgba(76,175,80,.9);transform:scale(1.05);box-shadow:0 4px 12px rgba(76,175,80,.4);border-color:#4caf50}.step-icon{font-size:16px}.step-text{font-size:12px}.cycle-info{background:linear-gradient(135deg,rgba(79,172,254,.95),rgba(0,242,254,.95));padding:20px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:2px solid hsla(0,0%,100%,.3);margin-bottom:20px}.cycle-info h3{font-size:18px;margin:0 0 12px;color:#1a202c;font-weight:700}.cycle-info p{font-size:14px;margin:0 0 16px;color:#2d3748;line-height:1.5}.cycle-steps{flex-direction:column}.cycle-steps,.step{display:flex;gap:12px}.step{align-items:center;padding:12px;background:hsla(0,0%,100%,.8);border-radius:8px;transition:all .3s ease}.step.active{background:rgba(76,175,80,.8);transform:scale(1.05);box-shadow:0 4px 12px rgba(76,175,80,.3)}.step-icon{font-size:20px}.step-text{font-size:14px;font-weight:600;color:#1a202c}.cycle-stats{background:linear-gradient(135deg,rgba(255,193,7,.95),rgba(255,152,0,.95));padding:20px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:2px solid hsla(0,0%,100%,.3);margin-bottom:20px}.cycle-stats h4{font-size:16px;margin:0 0 12px;color:#1a202c;font-weight:700}.stat-item{margin-bottom:8px;font-size:14px}.stat-value{font-weight:700;color:#1a202c;background:hsla(0,0%,100%,.8);padding:4px 8px;border-radius:4px}.cycle-tips{background:linear-gradient(135deg,rgba(255,193,7,.95),rgba(255,152,0,.95));padding:20px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:2px solid hsla(0,0%,100%,.3)}.cycle-tips h4{font-size:16px;margin:0 0 12px;color:#1a202c;font-weight:700}.cycle-tips ul{font-size:12px;color:#2d3748;line-height:1.5;margin:0;padding-left:16px}.cycle-tips li{margin-bottom:6px}.wind-game-scene{display:grid;grid-template-columns:1fr 300px;grid-gap:24px;gap:24px;margin:20px 0}.wind-compass{background:#e5e5e5;border-radius:20px;padding:20px;box-shadow:0 8px 32px rgba(0,0,0,.2);min-height:500px;flex-direction:column}.wind-compass,.wind-video-container{position:relative;display:flex;align-items:center;justify-content:center}.wind-video-container{height:300px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.3);margin-bottom:20px}.wind-video,.wind-video-container{width:100%;border-radius:16px;background-color:#e5e5e5!important;background:#e5e5e5!important}.wind-video{height:100%;object-fit:cover;transition:transform .5s ease;transform-origin:center;filter:brightness(.77) contrast(1.47) saturate(.33)}.wind-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.1);border-radius:16px;padding:20px}.compass-center{position:relative;background:rgba(0,0,0,.7);border-radius:12px;padding:12px 20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid hsla(0,0%,100%,.3)}.wind-strength{color:#fff;font-size:12px;font-weight:600;margin-top:4px;text-shadow:0 1px 2px rgba(0,0,0,.7)}.compass-label{color:#fff;font-weight:700;font-size:16px;text-shadow:0 2px 4px rgba(0,0,0,.7);margin-bottom:8px}.compass-directions{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:12px;gap:12px;width:100%;max-width:400px}.direction-btn{background:linear-gradient(135deg,hsla(0,0%,100%,.9),rgba(248,250,252,.9));border:2px solid rgba(59,130,246,.3);border-radius:12px;padding:16px 12px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.direction-btn:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.15);border-color:rgba(59,130,246,.6)}.direction-btn:disabled{cursor:not-allowed;opacity:.7}.direction-btn.selected{transform:translateY(-4px)}.direction-btn.correct,.direction-btn.selected{background:linear-gradient(135deg,#10b981,#059669);border-color:#10b981;color:#fff}.direction-btn.correct{animation:pulse .6s ease}.direction-btn.wrong{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#ef4444;color:#fff;animation:shake .6s ease}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.direction-emoji{font-size:24px;display:block}.direction-name{font-size:12px;font-weight:600;text-align:center}.wind-info{background:linear-gradient(135deg,rgba(135,206,250,.95),rgba(173,216,230,.95));padding:20px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:2px solid hsla(0,0%,100%,.3);margin-top:20px}.wind-info h4{font-size:16px;margin:0 0 12px;color:#1a202c;font-weight:700}.wind-info p{font-size:14px;margin:0;color:#4a5568;line-height:1.5}.rainbow-game-scene{display:grid;grid-template-columns:1fr 300px;grid-gap:24px;gap:24px;margin:20px 0}.rainbow-area{background:linear-gradient(135deg,#ffe4e1,#f0f8ff);border-radius:20px;padding:30px;box-shadow:0 8px 32px rgba(0,0,0,.2);min-height:500px}.rainbow-display{margin-bottom:30px}.rainbow-display h3{font-size:20px;margin:0 0 20px;color:#1a202c;font-weight:700;text-align:center}.rainbow-slots{gap:8px;flex-wrap:wrap}.rainbow-slot,.rainbow-slots{display:flex;justify-content:center}.rainbow-slot{position:relative;width:80px;height:100px;background:hsla(0,0%,100%,.7);border:2px dashed #ccc;border-radius:12px;flex-direction:column;align-items:center;transition:all .3s ease}.rainbow-slot:hover{border-color:#4facfe;background:rgba(79,172,254,.1)}.selected-color{width:100%;height:100%;background:linear-gradient(135deg,hsla(0,0%,100%,.9),rgba(248,250,252,.9));border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.1)}.selected-color:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(0,0,0,.15)}.color-emoji{font-size:24px;display:block;margin-bottom:4px}.color-name{font-size:10px;font-weight:600;text-align:center;color:#1a202c}.slot-number{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:#666;background:hsla(0,0%,100%,.8);padding:2px 6px;border-radius:4px}.color-palette h3{font-size:18px;margin:0 0 16px;color:#1a202c;font-weight:700;text-align:center}.color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));grid-gap:12px;gap:12px}.color-btn{background:linear-gradient(135deg,hsla(0,0%,100%,.9),rgba(248,250,252,.9));border:2px solid rgba(0,0,0,.1);border-radius:12px;padding:16px 12px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);color:#1a202c}.color-btn:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.15);border-color:rgba(79,172,254,.6)}.color-btn:disabled{cursor:not-allowed;opacity:.5;transform:none}.color-btn.selected{background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(5,150,105,.2));border-color:#10b981;transform:translateY(-4px);box-shadow:0 8px 24px rgba(16,185,129,.3)}.rainbow-info{background:linear-gradient(135deg,hsla(6,100%,94%,.95),rgba(240,248,255,.95));padding:20px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:2px solid hsla(0,0%,100%,.3);margin-top:20px}.rainbow-info h4{font-size:16px;margin:0 0 12px;color:#1a202c;font-weight:700}.rainbow-info p{font-size:14px;margin:0;color:#4a5568;line-height:1.5}.help-btn{background:linear-gradient(135deg,gold,orange)!important;border-color:gold!important;color:#1a202c!important;font-weight:700}.help-btn:hover:not(:disabled){background:linear-gradient(135deg,orange,#ff8c00)!important;transform:translateY(-2px)}.help-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.help-btn.used{background:linear-gradient(135deg,#4caf50,#45a049)!important;border-color:#4caf50!important}.storm-game-scene{display:grid;grid-template-columns:1fr;grid-gap:24px;gap:24px;margin:20px 0}@media (max-width:768px){.storm-game-scene{grid-template-columns:1fr;gap:16px}}.storm-simulator{background:linear-gradient(135deg,#2c3e50,#34495e);border-radius:20px;padding:30px;box-shadow:0 8px 32px rgba(0,0,0,.3);min-height:500px;display:grid;grid-template-columns:1fr 1fr 300px;grid-gap:30px;gap:30px}@media (max-width:768px){.storm-simulator{grid-template-columns:1fr;gap:20px;padding:20px}}.weather-controls h3{font-size:20px;margin:0 0 20px;color:#fff;font-weight:700;text-align:center}.element-control{margin-bottom:24px;background:hsla(0,0%,100%,.1);padding:16px;border-radius:12px;border:1px solid hsla(0,0%,100%,.2)}.element-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}.element-emoji{font-size:24px}.element-name{font-size:16px;font-weight:600;color:#fff;flex:1 1}.element-value{font-size:16px;font-weight:700;color:gold;background:rgba(0,0,0,.3);padding:4px 8px;border-radius:6px}.element-slider{width:100%;height:8px;background:hsla(0,0%,100%,.2);border-radius:4px;outline:none;cursor:pointer}.element-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:gold;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3)}.element-slider::-moz-range-thumb{width:20px;height:20px;background:gold;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px rgba(0,0,0,.3)}.element-range{display:flex;justify-content:space-between;font-size:12px;color:hsla(0,0%,100%,.7);margin-top:8px}.create-storm-btn{width:100%;background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;border:none;padding:16px;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px hsla(0,100%,71%,.3);border:2px solid hsla(0,0%,100%,.2)}.create-storm-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px hsla(0,100%,71%,.4)}.create-storm-btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.target-storm h3{font-size:20px;margin:0 0 20px;color:#fff;font-weight:700;text-align:center}.target-values{background:hsla(0,0%,100%,.1);padding:20px;border-radius:12px;border:1px solid hsla(0,0%,100%,.2)}.target-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid hsla(0,0%,100%,.1)}.target-item:last-child{border-bottom:none}.target-item span:first-child{color:#fff;font-weight:600}.target-item span:last-child{color:gold;font-weight:700;background:rgba(0,0,0,.3);padding:4px 8px;border-radius:6px}.storm-info{background:linear-gradient(135deg,rgba(44,62,80,.95),rgba(52,73,94,.95));padding:20px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.3);border:2px solid hsla(0,0%,100%,.2);margin-top:20px}.storm-info h4{font-size:16px;margin:0 0 12px;color:#fff;font-weight:700}.storm-info p{font-size:14px;margin:0;color:hsla(0,0%,100%,.8);line-height:1.5}@supports (background:paint(something)){@property --angle{syntax:"<angle>";inherits:false;initial-value:91deg}}.village-simulation{margin:20px 0;background:hsla(0,0%,100%,.1);padding:20px;border-radius:12px;border:1px solid hsla(0,0%,100%,.2);overflow:hidden;width:100%;grid-column:1/-1}.game-info-section{margin:20px 0;display:grid;grid-template-columns:1fr 350px;grid-gap:24px;gap:24px}@media (max-width:768px){.game-info-section{grid-template-columns:1fr;gap:16px}}.village-simulation h3{font-size:18px;margin:0 0 16px;color:#fff;font-weight:700;text-align:center}.village-scene{position:relative;height:400px;border-radius:12px;overflow:hidden;margin-bottom:16px;background:linear-gradient(180deg,#684e7d,#ff2f72,#fa724a,#f6b417,#f6b417,#f6b417);width:2000px;min-width:2000px}.center{text-align:center}.background{position:relative;width:100%;height:100%;overflow:hidden}.mountainOne{top:80px;left:50px;opacity:.5}.mountainOne,.mountainTwo{position:absolute;width:0;height:0;border-left:150px solid transparent;border-right:150px solid transparent;border-bottom:150px solid #684e7d}.mountainTwo{top:60px;left:250px;opacity:.4}.mountainThree{top:70px;left:450px;border-bottom:150px solid #684e7d;opacity:.5}.mountainFour,.mountainThree{position:absolute;width:0;height:0;border-left:150px solid transparent;border-right:150px solid transparent}.mountainFour{top:90px;left:650px;border-bottom:200px solid #684e7d;opacity:.4}.mountainFive{top:65px;left:850px;border-bottom:150px solid #684e7d}.mountainFive,.mountainSix{position:absolute;width:0;height:0;border-left:150px solid transparent;border-right:150px solid transparent;opacity:.5}.mountainSix{top:90px;left:1050px}.mountainSeven,.mountainSix{border-bottom:200px solid #684e7d}.mountainSeven{position:absolute;top:80px;left:1250px;width:0;height:0;border-left:150px solid transparent;border-right:150px solid transparent;opacity:.6}.hillOne{top:120px;left:100px;height:150px;border-radius:150px/75px;opacity:.8}.hillOne,.hillTwo{position:absolute;width:300px;background:#684e7d}.hillTwo{top:160px;left:0}.hillThree,.hillTwo{height:120px;border-radius:150px/60px;opacity:.9}.hillThree{position:absolute;top:150px;left:350px;width:300px;background:#684e7d}.hillFour{top:130px;left:750px;width:350px;border-radius:175px/75px}.hillFive,.hillFour{position:absolute;height:150px;background:#684e7d;opacity:.8}.hillFive{top:140px;left:-100px;width:300px;border-radius:150px/75px}.hillSix{top:150px;left:1150px;height:120px;border-radius:150px/60px;opacity:.9}.hillSeven,.hillSix{position:absolute;width:300px;background:#684e7d}.hillSeven{top:140px;left:1400px;height:150px;border-radius:150px/75px;opacity:.8}.bigRoof,.roof{width:0;height:0;border-left:60px solid transparent;border-right:60px solid transparent;border-bottom:38px solid #1a0f2e;top:-35px;transform:translateZ(0);margin:0;padding:0}.bigRoof,.building-roof,.roof{position:absolute;left:0;z-index:10}.building-roof{width:120px;height:8px;background:#0a0500;top:-8px;border-radius:0}.house{height:80px}.bigHouse,.house{width:120px;background:linear-gradient(-180deg,#362744,#21182d);position:relative;transition:all .3s ease}.bigHouse{height:120px}.building{width:120px;height:160px;background:linear-gradient(-180deg,#362744,#21182d);position:relative;transition:all .3s ease}.storm-intensity-2 .bigHouse,.storm-intensity-2 .building,.storm-intensity-2 .house{animation:shake .5s ease-in-out infinite alternate}.storm-intensity-3 .bigHouse,.storm-intensity-3 .building,.storm-intensity-3 .house{animation:shake .3s ease-in-out infinite alternate}.storm-intensity-4 .bigHouse,.storm-intensity-4 .building,.storm-intensity-4 .house{animation:shake .2s ease-in-out infinite alternate}.storm-intensity-5 .bigHouse,.storm-intensity-5 .building,.storm-intensity-5 .house{animation:shake .1s ease-in-out infinite alternate}.door{width:14px;height:20px;background-color:#110a00;left:53px;bottom:0}.door,.door-knob{position:absolute}.door-knob{width:2px;height:2px;background:#ffc96d;right:2px;bottom:10px;border-radius:50px}.window-left{left:14px}.window-left,.window-right{width:14px;height:18px;background-color:#110a00;position:absolute;bottom:8px}.window-right{right:14px}.window-left-two{left:14px}.window-left-two,.window-right-two{width:14px;height:18px;background-color:#110a00;position:absolute;bottom:42px}.window-right-two{right:14px}.window-center-two{width:14px;height:18px;background-color:#110a00;position:absolute;left:53px;bottom:42px}.window-left-three{left:14px}.window-left-three,.window-right-three{width:14px;height:18px;background-color:#110a00;position:absolute;bottom:76px}.window-right-three{right:14px}.window-center-three{width:14px;height:18px;background-color:#110a00;position:absolute;left:53px;bottom:76px}.window-left-four{left:14px}.window-left-four,.window-right-four{width:14px;height:18px;background-color:#110a00;position:absolute;bottom:110px}.window-right-four{right:14px}.window-center-four{width:14px;height:18px;background-color:#110a00;position:absolute;left:53px;bottom:110px}.window-pane-one{left:1px}.window-pane-one,.window-pane-two{width:3px;height:4px;background:linear-gradient(170deg,#aacfe5,#799fbc);position:absolute;top:1px}.window-pane-two{right:1px}.window-pane-three{right:1px}.window-pane-four,.window-pane-three{width:3px;height:4px;background:linear-gradient(170deg,#aacfe5,#799fbc);position:absolute;bottom:1px}.window-pane-four{left:1px}.houseWrapOne{position:absolute;left:50px;top:170px}.houseWrapTwo{position:absolute;left:200px;top:130px}.houseWrapThree{position:absolute;left:350px;top:120px}.houseWrapFour{position:absolute;left:500px;top:170px}.houseWrapFive{position:absolute;left:650px;top:130px}.houseWrapSix{position:absolute;left:800px;top:120px}.houseWrapSeven{position:absolute;left:950px;top:170px}.houseWrapEight{position:absolute;left:1100px;top:130px}.sidewalk{height:15px;background:linear-gradient(-170deg,#666,#888);top:250px}.sidewalk,.sidewalkEdge{width:100%;position:absolute}.sidewalkEdge{height:6px;background:linear-gradient(-170deg,#444,#666);top:265px}.sidewalk2{height:40px;background:linear-gradient(-170deg,#666,#888);top:400px}.grass,.sidewalk2{width:100%;position:absolute}.grass{height:100px;background-color:#144419;top:440px}.street{width:100%;height:120px;background:linear-gradient(-170deg,#000,#222);position:absolute;top:271px}.streetDashOne{left:150px}.streetDashOne,.streetDashTwo{top:50px;position:absolute;width:80px;height:3px;transform:skew(40deg);background-color:#f2c73c}.streetDashTwo{left:450px}.streetDashThree{left:750px}.streetDashFour,.streetDashThree{top:50px;position:absolute;width:80px;height:3px;transform:skew(40deg);background-color:#f2c73c}.streetDashFour{left:1050px}.houseShadowOne{left:103px}.houseShadowOne,.houseShadowTwo{position:absolute;width:60px;height:15px;transform:skew(40deg);background:linear-gradient(-170deg,#555,#777)}.houseShadowTwo{left:303px}.houseShadowThree{left:503px}.houseShadowFour,.houseShadowThree{position:absolute;width:60px;height:15px;transform:skew(40deg);background:linear-gradient(-170deg,#555,#777)}.houseShadowFour{left:703px}.houseShadowFive{left:903px}.houseShadowFive,.houseShadowSix{position:absolute;width:60px;height:15px;transform:skew(40deg);background:linear-gradient(-170deg,#555,#777)}.houseShadowSix{left:1103px}.houseShadowSeven{left:1303px}.houseShadowEight,.houseShadowSeven{position:absolute;width:60px;height:15px;transform:skew(40deg);background:linear-gradient(-170deg,#555,#777)}.houseShadowEight{left:1503px}.weather-effects{z-index:10}.rain-drops,.weather-effects{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.rain-drops{z-index:5}.rain-drop{border:.25vmin solid transparent;border-bottom-color:#abc2e9;position:absolute;top:-5vmin;--angle:91deg;opacity:.8;animation:fall linear infinite}.rain-drop:first-child{opacity:.1;left:10vw;border-left-width:2vmin;animation:fall-1 .15s ease-in -.5s infinite}.rain-drop:nth-child(2){opacity:.2;left:20vw;border-left-width:3vmin;animation:fall-2 .3s ease-in -1s infinite}.rain-drop:nth-child(3){opacity:.3;left:30vw;border-left-width:4vmin;animation:fall-3 .45s ease-in -1.5s infinite}.rain-drop:nth-child(4){opacity:.4;left:40vw;border-left-width:5vmin;animation:fall-4 .6s ease-in -2s infinite}.rain-drop:nth-child(5){opacity:.5;left:50vw;border-left-width:6vmin;animation:fall-5 .75s ease-in -2.5s infinite}.rain-drop:nth-child(6){opacity:.6;left:60vw;border-left-width:7vmin;animation:fall-6 .9s ease-in -3s infinite}.rain-drop:nth-child(7){opacity:.7;left:70vw;border-left-width:8vmin;animation:fall-7 1.05s ease-in -3.5s infinite}.rain-drop:nth-child(8){opacity:.8;left:80vw;border-left-width:9vmin;animation:fall-8 1.2s ease-in -4s infinite}.rain-drop:nth-child(9){opacity:.9;left:90vw;border-left-width:10vmin;animation:fall-9 1.35s ease-in -4.5s infinite}.rain-drop:nth-child(10){opacity:.1;left:100vw;border-left-width:11vmin;animation:fall-10 1.5s ease-in -5s infinite}@keyframes fall-1{0%{transform:rotate(var(--angle)) translateX(0)}to{transform:rotate(var(--angle)) translateX(calc(100vh + 5vmin))}}@keyframes fall-2{0%{transform:rotate(var(--angle)) translateX(0)}to{transform:rotate(var(--angle)) translateX(calc(100vh + 5vmin))}}@keyframes fall-3{0%{transform:rotate(var(--angle)) translateX(0)}to{transform:rotate(var(--angle)) translateX(calc(100vh + 5vmin))}}@keyframes fall-4{0%{transform:rotate(var(--angle)) translateX(0)}to{transform:rotate(var(--angle)) translateX(calc(100vh + 5vmin))}}@keyframes fall-5{0%{transform:rotate(var(--angle)) translateX(0)}to{transform:rotate(var(--angle)) translateX(calc(100vh + 5vmin))}}@keyframes fall-6{0%{transform:rotate(var(--angle)) translateX(0)}to{transform:rotate(var(--angle)) translateX(calc(100vh + 5vmin))}}@keyframes fall-7{0%{transform:rotate(var(--angle)) translateX(0)}to{transform:rotate(var(--angle)) translateX(calc(100vh + 5vmin))}}@keyframes fall-8{0%{transform:rotate(var(--angle)) translateX(0)}to{transform:rotate(var(--angle)) translateX(calc(100vh + 5vmin))}}@keyframes fall-9{0%{transform:rotate(var(--angle)) translateX(0)}to{transform:rotate(var(--angle)) translateX(calc(100vh + 5vmin))}}@keyframes fall-10{0%{transform:rotate(var(--angle)) translateX(0)}to{transform:rotate(var(--angle)) translateX(calc(100vh + 5vmin))}}.lightning{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:4px;height:60px;background:linear-gradient(180deg,gold,orange);animation:lightning .3s ease-in-out infinite alternate;box-shadow:0 0 20px gold}@keyframes lightning{0%{opacity:0;transform:translateX(-50%) scaleY(.5)}to{opacity:1;transform:translateX(-50%) scaleY(1)}}.weather-effects .container{overflow:hidden}.weather-effects .container,.weather-effects canvas{height:100%;width:100%;position:absolute;top:0;left:0;pointer-events:none}#canvas3{z-index:15}#canvas2{z-index:20}#canvas1{z-index:25}.strong-wind{position:absolute;top:30%;left:0;right:0;height:3px;background:hsla(0,0%,100%,.8);animation:wind .2s linear infinite;box-shadow:0 0 10px hsla(0,0%,100%,.5)}@keyframes wind{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.storm-description{text-align:center;color:#fff;font-weight:600;font-size:14px;background:rgba(0,0,0,.3);padding:8px;border-radius:8px}.storm-intensity-2 .leaves{animation:sway 1s ease-in-out infinite alternate}.storm-intensity-3 .leaves{animation:sway .5s ease-in-out infinite alternate}.storm-intensity-4 .leaves{animation:sway .3s ease-in-out infinite alternate}.storm-intensity-3 .house{animation:shake .8s ease-in-out infinite}.storm-intensity-4 .house{animation:shake .4s ease-in-out infinite}.storm-intensity-2 .person{animation:walk 2s ease-in-out infinite}.storm-intensity-3 .person{animation:run 1s ease-in-out infinite}.storm-intensity-4 .person{animation:hide .5s ease-in-out infinite}.storm-intensity-2 .sky-gradient{background:linear-gradient(180deg,#b0c4de,#d3d3d3)}.storm-intensity-3 .sky-gradient{background:linear-gradient(180deg,#708090,#a9a9a9)}.storm-intensity-4 .sky-gradient{background:linear-gradient(180deg,#2f4f4f,#696969)}@keyframes sway{0%{transform:rotate(-5deg)}to{transform:rotate(5deg)}}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}@keyframes walk{0%,to{transform:translateX(0)}50%{transform:translateX(10px)}}@keyframes run{0%,to{transform:translateX(0)}50%{transform:translateX(15px)}}@keyframes hide{0%{opacity:1}to{opacity:.3}}.thermometer-game-scene{display:grid;grid-template-columns:1fr 300px;grid-gap:24px;gap:24px;margin:20px 0}.thermometer-area{background:linear-gradient(135deg,#ffe4e1,#f0f8ff);border-radius:20px;padding:30px;box-shadow:0 8px 32px rgba(0,0,0,.2);min-height:500px;display:flex;flex-direction:column;gap:30px}.thermometer-container{display:flex;align-items:center;gap:30px;justify-content:center;max-width:600px;margin:0 auto}.weather-scenario h3{font-size:20px;margin:0 0 20px;color:#1a202c;font-weight:700;text-align:center}.scenario-card{background:linear-gradient(135deg,hsla(0,0%,100%,.9),rgba(248,250,252,.9));padding:24px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:2px solid rgba(79,172,254,.2);text-align:center}.scenario-emoji{font-size:48px;margin-bottom:16px;display:block}.scenario-name{font-size:20px;font-weight:700;color:#1a202c;margin-bottom:8px}.scenario-description{font-size:14px;color:#4a5568;margin-bottom:16px;line-height:1.5}.target-temp{font-size:18px;font-weight:700;color:#ff6b6b;background:hsla(0,100%,71%,.1);padding:8px 16px;border-radius:8px;display:inline-block}.scenario-target-temp{margin:1rem 0;text-align:center}.target-temp-info{display:inline-flex;align-items:center;gap:.5rem;background:rgba(59,130,246,.1);border:2px solid #3b82f6;border-radius:12px;padding:12px 20px;box-shadow:0 4px 6px rgba(59,130,246,.1)}.target-temp-label{font-size:16px;font-weight:600;color:#1e40af}.target-temp-value{font-size:20px;font-weight:700;color:#3b82f6;background:rgba(59,130,246,.1);padding:4px 12px;border-radius:8px;border:1px solid #3b82f6}.check-temp-btn.target-matched{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:2px solid #10b981;box-shadow:0 4px 12px rgba(16,185,129,.3);transform:scale(1.05);transition:all .3s ease}.check-temp-btn.target-matched:hover{background:linear-gradient(135deg,#059669,#047857);transform:scale(1.08)}.thermometer-container h3{font-size:20px;margin:0 0 20px;color:#1a202c;font-weight:700;text-align:center}.thermometer{position:relative;width:60px;height:300px;margin:0 auto 30px;background:linear-gradient(180deg,#e5e7eb,#f3f4f6);border-radius:30px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:3px solid #d1d5db}.thermometer-body{position:relative;width:100%;height:250px;background:hsla(0,0%,100%,.8);border-radius:27px 27px 0 0;overflow:hidden}.mercury{bottom:0;left:0;right:0;background:linear-gradient(180deg,#ff6b6b,#ff4500);border-radius:0 0 24px 24px;box-shadow:0 2px 8px hsla(0,100%,71%,.3)}.mercury,.thermometer-bulb{position:absolute;transition:all .3s ease}.thermometer-bulb{bottom:-20px;left:50%;transform:translateX(-50%);width:80px;height:80px;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}.temp-emoji{font-size:24px}.temperature-control{text-align:center}.temp-display{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px;background:hsla(0,0%,100%,.8);padding:16px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.1)}.temp-value{font-size:24px;font-weight:700;color:#1a202c}.temp-slider-container{position:relative;margin-bottom:20px}.temp-slider{width:100%;height:12px;background:linear-gradient(90deg,#87ceeb,#98fb98 25%,gold 50%,orange 75%,#ff4500);border-radius:6px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.temp-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3);border:3px solid #4facfe}.temp-slider::-moz-range-thumb{width:24px;height:24px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3);border:3px solid #4facfe}.temp-labels{display:flex;justify-content:space-between;font-size:12px;color:#666;margin-top:8px}.check-temp-btn{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border:none;padding:12px 24px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px rgba(79,172,254,.3)}.check-temp-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(79,172,254,.4)}.check-temp-btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.temperature-info{background:linear-gradient(135deg,hsla(6,100%,94%,.95),rgba(240,248,255,.95));padding:20px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:2px solid hsla(0,0%,100%,.3);margin-top:20px}.temperature-info h4{font-size:16px;margin:0 0 12px;color:#1a202c;font-weight:700}.temperature-info p{font-size:14px;margin:0;color:#4a5568;line-height:1.5}.person-simulation{margin-top:20px;background:hsla(0,0%,100%,.1);padding:20px;border-radius:12px;border:1px solid hsla(0,0%,100%,.2)}.person-simulation h3{font-size:18px;margin:0 0 16px;color:#1a202c;font-weight:700;text-align:center}.person-scene{background:linear-gradient(135deg,#ffe4e1,#f0f8ff);border-radius:12px;padding:20px;text-align:center}.person-outfit{margin-bottom:16px}.person-emoji{font-size:60px;margin-bottom:8px;display:block;animation:bounce 2s ease-in-out infinite;transition:all .3s ease}.person-emoji.cold{animation:bounce 1.5s ease-in-out infinite;color:#4a90e2}.person-emoji.warm{animation:bounce 2s ease-in-out infinite;color:#f5a623}.person-emoji.hot{animation:bounce 1s ease-in-out infinite;color:#e74c3c}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.outfit-description{font-size:16px;font-weight:600;color:#1a202c;margin-bottom:8px}.outfit-category{font-size:14px;font-weight:500;color:#4a5568;margin-bottom:12px;padding:4px 8px;background:hsla(0,0%,100%,.5);border-radius:6px;display:inline-block}.temperature-feedback{background:hsla(0,0%,100%,.8);padding:12px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1)}.feedback-text{font-size:14px;font-weight:600;color:#2d3748;line-height:1.4;margin-bottom:8px}.temperature-tip{font-size:12px;color:#666;font-style:italic;background:rgba(79,172,254,.1);padding:6px;border-radius:4px;border-left:3px solid #4facfe}.book-icon{font-size:48px;margin-bottom:16px;display:block;text-align:center}.experiment-icon{font-size:80px;margin-bottom:16px;animation:float 3s ease-in-out infinite}.experiments-section{margin:32px 0}.experiments-section h2{font-size:24px;margin:0 0 24px;color:#1a202c;font-weight:700;text-align:center}.experiments-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-gap:20px;gap:20px;margin-top:24px}.experiment-card{background:linear-gradient(135deg,hsla(0,0%,100%,.95),rgba(248,250,252,.95));padding:24px;border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.1);border:2px solid hsla(0,0%,100%,.3);text-align:center;transition:all .3s ease;position:relative;overflow:hidden}.experiment-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,193,7,.1),rgba(255,152,0,.1));opacity:0;transition:opacity .3s ease;z-index:0}.experiment-card:hover:before{opacity:1}.experiment-card:hover{transform:translateY(-8px);box-shadow:0 16px 48px rgba(0,0,0,.15)}.experiment-card>*{position:relative;z-index:1}.experiment-card .experiment-icon{font-size:48px;margin-bottom:16px;display:block}.experiment-card h3{font-size:20px;margin:0 0 12px;color:#1a202c;font-weight:700}.experiment-card p{font-size:14px;margin:0 0 20px;color:#4a5568;line-height:1.5}.real-experiment-scene{display:grid;grid-template-columns:1fr 300px;grid-gap:24px;gap:24px;margin:20px 0}.simulation-area{height:100px}.string-line{left:10px;right:10px;background:#8b4513;border-radius:1px}.balloon-simulator{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;transition:left .1s ease;z-index:2}.launch-btn{background:linear-gradient(135deg,#ff6b6b,#ee5a24);box-shadow:0 4px 12px hsla(0,100%,71%,.3)}.launch-btn:hover:not(:disabled){box-shadow:0 6px 20px hsla(0,100%,71%,.4)}.progress-card{background:linear-gradient(135deg,rgba(255,193,7,.95),rgba(255,152,0,.95));padding:20px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:2px solid hsla(0,0%,100%,.3);margin-bottom:20px}.progress-card h4{font-size:16px;margin:0 0 12px;color:#1a202c;font-weight:700}.progress-bar{width:100%;height:12px;background:rgba(0,0,0,.1);border-radius:6px;overflow:hidden;margin-bottom:8px}.progress-fill{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);transition:width .3s ease;border-radius:6px}.progress-text{font-size:12px;font-weight:600;color:#1a202c}.safety-tips{background:linear-gradient(135deg,rgba(255,193,7,.95),rgba(255,152,0,.95));padding:20px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:2px solid hsla(0,0%,100%,.3)}.safety-tips h4{font-size:16px;margin:0 0 12px;color:#1a202c;font-weight:700}.safety-tips ul{font-size:12px;color:#2d3748;line-height:1.5;margin:0;padding-left:16px}.safety-tips li{margin-bottom:6px}.alternative-materials{margin-top:20px;padding:20px;background:linear-gradient(135deg,rgba(255,248,220,.9),rgba(255,239,186,.9));border-radius:16px;border:2px solid rgba(255,193,7,.3)}.alternative-materials h4{color:#b8860b;font-size:18px;margin:0 0 16px;font-weight:700;text-align:center}.alternatives-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-gap:16px;gap:16px}.alternative-item{background:hsla(0,0%,100%,.8);border-radius:12px;padding:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:2px solid rgba(255,193,7,.2);transition:all .3s ease}.alternative-item:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15);border-color:rgba(255,193,7,.4)}.alternative-icon{font-size:24px;margin-bottom:12px;text-align:center}.alternative-content strong{color:#b8860b;font-size:14px;display:block;margin-bottom:8px}.alternative-content ul{margin:0;padding-left:16px}.alternative-content li{color:#5d4e37;font-size:13px;margin-bottom:4px;line-height:1.4}.real-ship-experiment-scene{display:grid;grid-template-columns:1fr 300px;grid-gap:24px;gap:24px;margin:20px 0}.experiment-area{background:linear-gradient(135deg,#87ceeb,#b0e0e6);border-radius:20px;padding:30px;box-shadow:0 8px 32px rgba(0,0,0,.2);min-height:600px}.materials-section{margin-bottom:30px}.materials-section h3{font-size:20px;margin:0 0 20px;color:#1a202c;font-weight:700;text-align:center}.materials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));grid-gap:16px;gap:16px;margin-bottom:20px}.material-item{background:hsla(0,0%,100%,.8);padding:16px;border-radius:12px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:all .3s ease}.material-item:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.15)}.material-icon{font-size:32px;margin-bottom:8px;display:block}.material-item span{font-size:12px;font-weight:600;color:#1a202c}.steps-section h3{font-size:20px;margin:0 0 20px;color:#1a202c;font-weight:700;text-align:center}.steps-container{display:flex;flex-direction:column;gap:16px}.step-card{background:hsla(0,0%,100%,.9);padding:20px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:2px solid hsla(0,0%,100%,.3);transition:all .3s ease;position:relative}.step-card.completed{border-color:#4caf50;background:linear-gradient(135deg,rgba(76,175,80,.1),rgba(139,195,74,.1))}.step-card.current{border-color:#4facfe;background:linear-gradient(135deg,rgba(79,172,254,.1),rgba(0,242,254,.1));transform:scale(1.02)}.step-number{position:absolute;top:-10px;left:20px;background:#4facfe;color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}.step-content{margin-left:20px}.step-content h4{font-size:16px;margin:0 0 8px;color:#1a202c;font-weight:700}.step-content p{font-size:14px;margin:0 0 12px;color:#4a5568;line-height:1.5}.step-materials{font-size:12px;color:#666;margin-bottom:12px;background:rgba(0,0,0,.05);padding:6px 8px;border-radius:4px}.complete-btn{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px rgba(79,172,254,.3)}.complete-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 16px rgba(79,172,254,.4)}.complete-btn:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.simulation-section{margin-top:30px;padding:20px;background:hsla(0,0%,100%,.3);border-radius:12px}.simulation-section h3{font-size:18px;margin:0 0 16px;color:#1a202c;font-weight:700;text-align:center}.simulation-area{height:150px;background:hsla(0,0%,100%,.5);padding:20px}.simulation-area,.water-tank{position:relative;border-radius:8px}.water-tank{height:100px;background:linear-gradient(180deg,#87ceeb,#4682b4);overflow:hidden;border:2px solid #2e8b57}.water-level{bottom:0;background:linear-gradient(180deg,#00bfff,#1e90ff);border-radius:0 0 6px 6px}.water-level,.water-waves{position:absolute;left:0;right:0}.water-waves{top:0;height:15px;background:repeating-linear-gradient(90deg,transparent,transparent 8px,hsla(0,0%,100%,.3) 0,hsla(0,0%,100%,.3) 16px);animation:waves 2s linear infinite}@keyframes waves{0%{transform:translateX(0)}to{transform:translateX(16px)}}.ship-simulator{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;transition:left .1s ease;z-index:2}.launch-btn{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border:none;padding:12px 24px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px rgba(79,172,254,.3);margin-top:20px;width:100%}.launch-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(79,172,254,.4)}.launch-btn:disabled{cursor:not-allowed;opacity:.6}.video-section{margin:20px 0;background:linear-gradient(135deg,rgba(79,172,254,.1),rgba(0,242,254,.1));border-radius:20px;padding:30px;box-shadow:0 8px 32px rgba(0,0,0,.1)}.video-container{max-width:800px;margin:0 auto}.video-container h3{font-size:24px;margin:0 0 20px;color:#1a202c;font-weight:700;text-align:center}.video-player{background:hsla(0,0%,100%,.9);border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.15);border:2px solid hsla(0,0%,100%,.3)}.weather-video{width:100%;height:300px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.2);background:#000}.video-info{margin-top:20px;padding:20px;background:linear-gradient(135deg,rgba(255,193,7,.95),rgba(255,152,0,.95));border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);border:2px solid hsla(0,0%,100%,.3)}.video-info h4{font-size:18px;margin:0 0 12px;color:#1a202c;font-weight:700}.video-info p{font-size:14px;margin:0;color:#2d3748;line-height:1.6}.multiple-choice-options{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px;margin:20px 0;width:100%}@media (max-width:768px){.multiple-choice-options{grid-template-columns:1fr;gap:12px}}.option-card{background:linear-gradient(135deg,hsla(0,0%,100%,.9),rgba(248,250,252,.9));border:2px solid rgba(59,130,246,.3);border-radius:16px;padding:20px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);text-align:left}.option-card:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.15);border-color:rgba(59,130,246,.6)}.option-card:disabled{cursor:not-allowed;opacity:.7}.option-card.selected{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(37,99,235,.2));border-color:#3b82f6;transform:translateY(-4px);box-shadow:0 8px 24px rgba(59,130,246,.3)}.option-card.correct{background:linear-gradient(135deg,#10b981,#059669);border-color:#10b981;color:#fff;transform:translateY(-4px);box-shadow:0 8px 24px rgba(16,185,129,.4)}.option-card.wrong{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#ef4444;color:#fff;transform:translateY(-4px);box-shadow:0 8px 24px rgba(239,68,68,.4)}.option-emoji{font-size:48px;display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:hsla(0,0%,100%,.8);border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.1)}.option-content{flex:1 1}.option-name{font-size:20px;font-weight:700;margin-bottom:8px;color:#1a202c}.option-description{font-size:14px;color:#4a5568;margin-bottom:12px;line-height:1.4}.option-details{display:flex;gap:16px;align-items:center}.temperature{font-size:14px;font-weight:600;color:#3b82f6;background:rgba(59,130,246,.1);padding:4px 8px;border-radius:8px}.clothing{font-size:24px}.next-round-section{text-align:center;margin-top:30px}.next-round-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:12px;padding:16px 32px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px rgba(16,185,129,.3)}.next-round-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,185,129,.4)}@media (max-width:900px){.board-scene{grid-template-columns:1fr};.game-top{flex-direction:column;gap:12px};.video-container h3{font-size:20px};.weather-video{height:200px}}.frame *{position:absolute}.frame{border:none;position:relative;width:400px;height:250px;overflow:visible;background:none;transform:scale(1);transform-origin:center center}.jake{position:absolute;left:75px;bottom:0;width:40px;height:60px}.jake .leftArm{transform-origin:right center;z-index:20;width:25px;height:52px;left:-20px;top:20px}.jake .leftArm .harm{background:#fec715;width:6px;height:15px;top:18px;right:3px;border-left:2px solid #000;border-right:2px solid #000;transform:rotate(85deg)}.jake .leftArm .harm:first-child:after{content:"";display:block;position:absolute;width:10px;height:5px;background:#fec715;left:-5px;top:15px;transform:rotate(3deg);z-index:-1;border-bottom:2px solid #000;border-right:2px solid #000;border-radius:0 0 74px 0}.jake .leftArm .harm+.harm{transform:rotate(0);height:23px;left:0;top:0}.jake .leftArm .harm+.harm:after{display:none}.jake .hand,.jake .hand:after,.jake .hand:before{position:absolute;top:-1px;border:2px solid #000;border-bottom:0;border-radius:3px 3px 0 0;left:0;width:1px;background:#fec715;height:5px}.jake .hand:after,.jake .hand:before{content:"";display:block;position:absolute;top:-1px}.jake .hand:before{left:1px}.jake .hand:after{left:3px}.jake .rightArm{width:10px;border-right:2px solid #000;height:42px;right:-3px;top:31px;transform:rotate(5deg);border-radius:0 14px 0 0/31px;z-index:10;background:#fec715}.jake .rightArm .hand{left:8px;top:39px!important;transform:rotate(180deg)}.jake .body{z-index:12;background:#fec715;width:63px;height:78px;border-radius:29px 29px 26px 22px;border:2px solid #000;position:relative}.jake .body:after{content:"";display:block;position:absolute;width:5px;height:7px;background:#fec715;right:-1px;top:34px}.jake .body .ear{border-left:2px solid #000;border-right:2px solid #000;border-bottom:2px solid #000;width:5px;height:8px;border-radius:0 0 26px 26px;transform:rotate(13deg);top:19px;left:-1px}.jake .body .eye{width:13px;height:13px;border:3px solid #000;border-right-width:1px;left:11px;top:7px;border-radius:50%;background:#fff}.jake .body .eye+.eye{left:45px;top:6px}.jake .body .nose{background:#fec715;border:2px solid #000;width:26px;height:18px;border-radius:18px 15px 5px 5px;border-bottom:0;left:24px;top:11px}.jake .body .nose:after,.jake .body .nose:before{content:"";display:block;position:absolute;border-bottom:2px solid #000;width:8px;height:5px;top:13px;border-radius:50%}.jake .body .nose:after{left:18px}.jake .body .nose .snout{left:9px;top:4px;width:9px;height:6px;border-radius:50%;background:#000}.jake .body .nose .mouth{width:5px;border-left:1px solid #000;border-right:1px solid #000;height:5px;top:-3px;left:10px;transform:rotatex(12deg) translatey(10px) translatex(1px)}.jake .body .nose .mouth:after{content:"";display:block;position:absolute;border-bottom:2px solid #000;width:13px;height:5px;top:10px;transform:rotatex(-10deg) translatey(-10px) translatex(-4px) scale(.4);border-radius:50%}.jake .leg{z-index:20;border-left:2px solid #000;border-right:2px solid #000;width:5px;height:31px;background:#fec715;top:78px;left:13px;transform:rotate(3deg)}.jake .leg .foot{background:#fec715;width:9px;height:6px;border:2px solid #000;border-left:0;left:1px;transform:rotate(50deg);bottom:-5px;border-radius:0 10px 10px 0}.jake .leg+.leg{left:45px;top:77px;transform:rotate(0deg)}.finn{position:absolute;left:175px;bottom:0;width:35px;height:70px}.finn .head{left:1px;z-index:20}.finn .head .cap{background:red;width:59px;border-top:2px solid #000;top:10px;height:42px;background:#fff;border-radius:50% 50% 50% 50%/20% 15% 85% 80%}.finn .head .cap:before{top:0;right:0;bottom:0;border-bottom:2px solid #000;border-radius:50% 50% 50% 50%/90% 90% 10% 10%}.finn .head .cap:after,.finn .head .cap:before{content:"";display:block;background:#fff;position:absolute;left:0}.finn .head .cap:after{top:3px;right:-1px;bottom:4px;border-left:2px solid #000;border-right:2px solid #000}.finn .head .cap .ear{background:#fff;width:10px;height:15px;border:2px solid #000;border-radius:50%;top:-6px;left:0}.finn .head .cap .ear:after{content:"";display:block;position:absolute;width:13px;height:15px;top:6px;background:#fff;left:0}.finn .head .cap .ear+.ear{left:48px;top:-8px}.finn .head .cap .ear+.ear:after{top:8px;left:-2px}.finn .head .face{background:#fad5c2;width:40px;height:32px;border-radius:50%;border:2px solid #000;left:13px;top:13px}.finn .head .face .eye{width:4px;height:6px;background:#000;border-radius:50%;left:10px;top:10px}.finn .head .face .eye+.eye{left:26px;top:10px}.finn .head .face .mouth{left:16px;top:18px;width:8px;height:6px;border-radius:0 0 8px 8px;border:2px solid #000;border-top:none}.finn .head .face .mouth:before{content:"";display:block;background:#fad5c2;width:12px;height:8px;top:-2px;left:-2px;position:absolute}.finn .leftArm{transform-origin:21px 5px;z-index:10;top:50px;left:-10px;transform-origin:top bottom;transform:rotate(15deg)}.finn .leftArm .shirt{z-index:15;left:3px;top:1px;height:6px;width:15px;background:#00b2ec;border:2px solid #000;border-right:0}.finn .leftArm .elbow{z-index:5;background:linear-gradient(61deg,#fad5c2 34%,transparent 0);height:63px;width:42px;left:-21px;top:-55px;border-left:2px solid #000;border-bottom:2px solid #000;border-radius:50% 100%}.finn .leftArm .elbow:after,.finn .leftArm .elbow:before{content:"";display:block;position:absolute;width:63px;height:42px;border-radius:50% 100%;transform:rotate(65deg);left:-5px;top:4px;background:transparent;border-bottom:2px solid #000}.finn .leftArm .elbow:after{border:0;width:26px;height:42px;border-radius:0;left:-5px;top:-9px}.finn .leftArm .elbow:before{background:linear-gradient(50deg,transparent 60%,transparent 0)}.finn .rightArm{left:55px;transform-origin:left top;transform:rotate(-10deg);top:51px;width:8px;height:52px}.finn .rightArm .elbow{z-index:10;background:#fad5c2;width:15px;height:52px;border-radius:100%;border:2px solid #000;top:10px;left:-10px;transform:rotate(10deg)}.finn .rightArm .elbow:after{content:"";position:absolute;background:transparent;top:-5px;border-right:2px solid #000;border-radius:100%;left:-7px;width:15px;height:61px}.finn .rightArm .hand{top:48px;left:-7px;transform:rotate(202deg);width:7px}.finn .rightArm .shirt{z-index:20;width:6px;height:21px;border:2px solid #000;background:#00b2ec}.finn .hand{z-index:30;width:6px;border-left:2px solid #000;border-right:2px solid #000;height:15px;background:#fad5c2;transform:rotate(-10deg);left:-22px;top:-39px}.finn .hand .finger,.finn .hand .finger:after,.finn .hand .finger:before{transform:rotate(10deg);transform-origin:bottom left;width:1px;height:5px;border:2px solid #000;border-bottom:0;top:-5px;left:-1px;background:#fad5c2;border-radius:50% 50% 0 0}.finn .hand .finger:after,.finn .hand .finger:before{transform:rotate(-5deg);content:"";display:block;position:absolute;left:1px;top:-1px}.finn .hand .finger:after{left:3px}.finn .strap{width:26px;height:26px;z-index:20;border-radius:45%;top:42px;left:-18px;border-right:2px solid #000;overflow:hidden}.finn .strap:after{width:8px;background:linear-gradient(180deg,#b9fc92 50%,#50c818 0);height:26px;right:0}.finn .strap:after,.finn .strap:before{content:"";display:block;position:absolute}.finn .strap:before{width:11px;height:18px;right:7px;border-radius:50%;z-index:10;top:5px;border-right:2px solid #000}.finn .backpackBot{z-index:1;width:63px;height:63px;left:-15px;top:32px;border:2px solid #000;border-radius:50%;background:linear-gradient(-6deg,#50c818 57%,#b9fc92 0)}.finn .backpackBot:before{content:"";display:block;position:absolute;top:13px;left:-1px;transform:rotate(-5deg);border-bottom:2px solid #000;width:18px;height:15px;border-radius:3px}.finn .backpackLeft{z-index:3;width:21px;height:26px;right:-2px;top:39px;border:2px solid #000;border-radius:100% 50%;background:linear-gradient(180deg,#b9fc92 50%,#50c818 0)}.finn .body{z-index:4;background:#00b2ec;width:57px;height:50px;top:42px;left:1px;border:2px solid #000;z-index:10px}.finn .body:before{content:"";position:absolute;border-bottom:2px solid #000;width:100%;height:52px;bottom:-6px;background:#00b2ec;border-radius:50% 50% 50% 50%/90% 90% 10% 10%;z-index:10}.finn .body:after{content:"";display:block;width:60px;left:-2px;border:2px solid #000;height:18px;background:#0557ab;position:absolute;bottom:-18px;z-index:5;border-radius:20% 20% 50% 50%}.finn .leg{z-index:25;width:7px;height:63px;border:2px solid #000;background:#fad5c2;top:102px;left:7px;transform:rotate(2deg)}.finn .leg:before{top:-1px;left:-5px;width:10px;height:23px;border:2px solid #000;border-top:0}.finn .leg:after,.finn .leg:before{content:"";position:absolute;display:block;background:#0557ab}.finn .leg:after{width:15px;height:7px;top:-5px}.finn .leg+.leg{left:53px;transform:rotate(0)}.finn .leg+.leg:before{left:-3px;top:-3px;width:8px}.finn .leg+.leg:after{left:-15px;top:-6px}.finn .leg+.leg .sock{top:50px}.finn .leg .sock{z-index:15;width:12px;height:8px;background:#fff;border:2px solid #000;top:53px;left:-5px;border-radius:50%}.finn .leg .sock:after,.finn .leg .sock:before{width:5px;height:5px;content:"";display:block;background:#fad5c2;position:absolute;left:3px;top:-1px}.finn .leg .sock:after{border:2px solid #000;border-top:0;border-radius:0 100% 50% 50%/55% 55% 45% 45%}.finn .leg .sock:before{z-index:20;left:4px;height:10px;top:-8px}.finn .leg .foot{z-index:14;height:15px;width:7px;background:#000;left:-1px;bottom:-10px}.finn .leg .foot:after{content:"";display:block;position:absolute;width:13px;height:9px;background:#000;bottom:0;transform-origin:bottom left;transform:rotate(45deg);border-radius:0 100% 28% 72%/100% 55% 45% 0}.bmo{position:absolute;left:275px;bottom:0;width:30px;height:40px}.bmo .body{border:2px solid #000;width:34px;right:0;top:5px;transform:skewY(-3deg);height:51px;border-radius:3px;background:#0ab2a3;z-index:12}.bmo .body .face{width:27px;height:19px;right:2px;top:3px;border-radius:2px;background:#c5e2d0;border:2px solid #000}.bmo .body .face .eye{width:2px;height:5px;background:#000;left:7px;top:4px;border-radius:50%}.bmo .body .face .eye+.eye{left:21px}.bmo .body .face .mouth{width:7px;height:5px;border-bottom:2px solid #000;border-radius:50%;left:12px;top:7px}.bmo .body .disk,.bmo .body .disk2,.bmo .body .disk3{width:18px;height:2px;background:#000;top:26px;left:5px}.bmo .body .disk2,.bmo .body .disk3{top:45px;width:6px;border-radius:3px}.bmo .body .disk3{left:13px}.bmo .body .power{width:1px;height:1px;border-radius:50%;border:2px solid #000;background:#555;right:3px;top:25px}.bmo .body .cross{background:#f5d310;width:1px;height:6px;border:2px solid #000;top:31px;left:8px;box-shadow:-1px 0 1px #000}.bmo .body .cross:after,.bmo .body .cross:before{content:"";display:block;position:absolute;background:#f5d310}.bmo .body .cross:before{width:6px;height:1px;border:2px solid #000;left:-3px;top:1px;box-shadow:-1px 0 1px #000}.bmo .body .cross:after{width:1px;height:5px;left:0;top:1px}.bmo .body .triangle{width:0;height:0;border:3px solid transparent;border-bottom:4px solid #74cae5;right:6px;top:31px}.bmo .body .triangle:before{content:"";display:block;position:absolute;border:3px solid transparent;border-bottom:5px solid #000;left:-3px;top:-4px;z-index:-1}.bmo .body .circleGreen,.bmo .body .circleRed{width:3px;height:3px;background:#5cba48;border:1px solid #000;border-radius:50%;right:1px;top:37px}.bmo .body .circleRed{background:#e11d65;width:7px;height:7px;right:4px;top:39px}.bmo .bodyLeft{z-index:11;width:15px;height:49px;background:#4295a3;right:33px;top:9px;transform-origin:top right;transform:skewY(18deg);border-radius:3px 0 0 3px;border:2px solid #000;border-top:0}.bmo .bodyLeft .sigle{width:26px;height:15px;z-index:100;transform:rotate(90deg);left:-7px;top:24px;font-family:Fredoka One,cursive;font-size:11px}.bmo .bodyLeft .sigle:after{content:"";display:block;position:absolute;width:8px;height:9px;background:#000;border-radius:40% 100%;left:19px;top:2px}.bmo .bodyLeft .dot{width:1px;height:1px;background:#000;border-radius:50%;left:10px;top:10px}.bmo .bodyLeft .dot:nth-child(2){left:6px}.bmo .bodyLeft .dot:nth-child(3){left:3px}.bmo .bodyLeft .dot:nth-child(4){left:5px;top:7px}.bmo .bodyLeft .dot:nth-child(5){left:8px;top:7px}.bmo .bodyLeft .dot:nth-child(6){left:5px;top:13px}.bmo .bodyLeft .dot:nth-child(7){left:8px;top:13px}.bmo .bodyTop{width:32px;height:15px;background:#7ac6c6;right:18px;top:1px;transform-origin:top left;z-index:10;border-radius:6px 0 0 0;border-top:2px solid #000;border-left:2px solid #000}.bmo .bodyTop:after{content:"";display:block;position:absolute;width:5px;height:17px;background:#7ac6c6;left:25px;border-right:2px solid #000;top:-1px;transform-origin:top right;transform:rotate(-79deg)}.bmo .hand{width:3px;height:9px;background:#7ac6c6;border:2px solid #000;border-bottom:0;border-radius:1px 1px 0 0}.bmo .hand:before{content:"";display:block;position:absolute;border-left:1px solid #000;border-bottom-width:1px;border-right:1px solid #000;border-top-width:1px;width:1px;left:1px;height:3px}.bmo>.hand{right:0;transform:rotate(175deg);bottom:7px}.bmo .leg{z-index:0;border-left:2px solid #000;border-right:2px solid #000;width:5px;height:15px;background:#507786;top:50px;left:8px}.bmo .leg:after{content:"";display:block;position:absolute;width:3px;height:4px;background:#507786;top:8px;left:0}.bmo .leg .foot{background:#507786;width:8px;height:4px;border:2px solid #000;left:-1px;transform:rotate(10deg);bottom:-3px;border-radius:21px 15px}.bmo .leg+.leg{left:16px;top:48px;transform:rotate(0deg)}.bmo .arm{z-index:20;width:10px;height:3px;left:3px;border:2px solid #000;border-left:0;background:#7ac6c6;top:45px;transform:rotate(-8deg);transform-origin:center right;border-radius:0 3px 3px 0}.bmo .arm:after,.bmo .arm:before{content:"";display:block;position:absolute;width:8px;height:8px}.bmo .arm:before{background:linear-gradient(0,#7ac6c6 50%,transparent 0);border-bottom:2px solid #000;border-radius:50%;left:-3px;top:-5px;transform:rotate(45deg)}.bmo .arm:after{background:#7ac6c6;border-left:2px solid #000;border-right:2px solid #000;width:3px;top:-8px;left:-3px;transform:rotate(4deg);transform-origin:center 8px}.bmo .arm .hand{top:-16px;left:-3px;height:8px;transform:rotate(5deg);transform-origin:center 16px}.storm-intensity-1 .bmo,.storm-intensity-1 .finn,.storm-intensity-1 .jake{animation:none}.storm-intensity-2 .bmo,.storm-intensity-2 .finn,.storm-intensity-2 .jake{animation:gentle-sway 2s ease-in-out infinite}.storm-intensity-3 .bmo,.storm-intensity-3 .finn,.storm-intensity-3 .jake{animation:strong-sway 1s ease-in-out infinite}.storm-intensity-4 .bmo,.storm-intensity-4 .finn,.storm-intensity-4 .jake{animation:violent-sway .5s ease-in-out infinite}@keyframes wave{0%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}to{transform:rotate(-20deg)}}@keyframes gentle-sway{0%,to{transform:translateX(0) rotate(0deg)}50%{transform:translateX(2px) rotate(1deg)}}@keyframes strong-sway{0%,to{transform:translateX(0) rotate(0deg)}50%{transform:translateX(5px) rotate(3deg)}}@keyframes violent-sway{0%,to{transform:translateX(0) rotate(0deg)}50%{transform:translateX(8px) rotate(5deg)}}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.3}}.jake .leftArm{animation:wave 1.5s ease-in-out infinite}.bmo .body .power{animation:blink 2s infinite}.jake .leftArm{animation:Wave .3s ease-in-out infinite}.finn .leftArm{animation:Wave 3s ease-in-out infinite}.bmo .arm .hand,.bmo .arm:after{animation:Wave .8s ease-in-out infinite}.jake .eye{transform-origin:bottom center;animation:Blink 4s infinite}.finn .eye{animation:Blink 7s infinite}.bmo .eye,.finn .eye{transform-origin:center center}.bmo .eye{animation:Blink 1s infinite}@keyframes Wave{0%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}to{transform:rotate(-10deg)}}@keyframes Blink{39%{transform:scaley(1)}40%{transform:scaley(.5)}41%{transform:scaley(1)}60%{transform:scaley(1)}61%{transform:scaley(.5)}62%{transform:scaley(1)}}.bridge-animation-container{width:100%;height:150px;border-radius:16px;overflow:hidden;margin:0;background:linear-gradient(180deg,#87ceeb 0,#228b22);position:relative;display:flex;align-items:center;justify-content:center}:root{--tb-size:8em;--tb-width:calc(var(--tb-size) * 3);--tb-color-main:#fff;--tb-color-detail:#c2eff5;--tb-speed:60s}@keyframes clockwise{to{transform:rotate(60deg)}}@keyframes counterclockwise{to{transform:rotate(-60deg)}}.towerbridge{position:relative;width:var(--tb-width);height:var(--tb-size);border-bottom:calc(var(--tb-size) / 20) solid var(--tb-color-detail);box-shadow:0 calc(var(--tb-size) / 5) #ccc}.towerbridge:after,.towerbridge:before{content:"";position:absolute;top:calc(var(--tb-size) * 3 / 5);margin:auto;width:var(--tb-size);height:calc(var(--tb-size) * 6 / 10);border-top:calc(var(--tb-size) / 20) solid var(--tb-color-detail);z-index:-1}.towerbridge:before{left:calc(var(--tb-width) / 16);transform:rotate(-45deg)}.towerbridge:after{right:calc(var(--tb-width) / 16);transform:rotate(45deg)}.tower--left,.tower--right{position:absolute;bottom:0;background:var(--tb-color-main);width:calc(var(--tb-size) / 5);height:calc(var(--tb-size) * 3 / 4)}.tower--left{right:calc(var(--tb-width) * 2 / 3)}.tower--right{left:calc(var(--tb-width) * 2 / 3)}.tower--left:before,.tower--right:before{content:"";position:absolute;right:0;bottom:100%;left:0;margin:0 auto;width:0;height:0;border-left:calc(var(--tb-size) / 15) solid transparent;border-right:calc(var(--tb-size) / 15) solid transparent;border-bottom:calc(var(--tb-size) / 3) solid var(--tb-color-main)}.tower--left:after,.tower--right:after{content:"";position:absolute;top:calc(var(--tb-size) / -8);left:calc(var(--tb-size) / -60);width:calc(var(--tb-size) / 20);height:calc(var(--tb-size) / 4);border-radius:50%;background:var(--tb-color-main);box-shadow:calc(var(--tb-size) / 5 - var(--tb-size) / 50) 0 0 var(--tb-color-main);z-index:100}.tb__parts{position:absolute;right:0;bottom:0;left:0;margin:auto;width:var(--tb-size);height:calc(var(--tb-size) * 6 / 10);border-top:calc(var(--tb-size) / 20) solid var(--tb-color-detail);box-shadow:0 calc(var(--tb-size) / 5) #ccc}.tb__parts:after,.tb__parts:before{content:"";position:absolute;bottom:calc(var(--tb-size) / -20);width:calc(var(--tb-size) / 2);height:calc(var(--tb-size) / 20);background:var(--tb-color-detail)}.tb__parts:before{left:0;transform-origin:0 50%;transform:rotate(0deg)}.tb__parts:after,.tb__parts:before{transition:transform 2s ease-in-out}.tb__parts:after{right:0;transform-origin:100% 50%;transform:rotate(0deg)}.tb__parts.animate:before{animation:counterclockwise 5s ease-in-out infinite alternate}.tb__parts.animate:after{animation:clockwise 5s ease-in-out infinite alternate}.balloon-animation-container{width:100%;height:150px;border-radius:16px;overflow:hidden;margin:0;background:linear-gradient(180deg,#87ceeb 0,#e0f6ff);position:relative;display:flex;align-items:center;justify-content:center}.chair{height:40px;z-index:2}.chair,.chair-seat{position:absolute;bottom:20px;width:30px}.chair-seat{left:0;height:8px;box-shadow:1px 1px 3px rgba(0,0,0,.3)}.chair-back,.chair-seat{background:linear-gradient(45deg,#8b4513,sienna);border-radius:2px}.chair-back{bottom:28px;right:0;width:6px;box-shadow:1px 1px 2px rgba(0,0,0,.3)}.chair-back,.chair-legs{position:absolute;height:20px}.chair-legs{bottom:0;left:0;width:30px}.leg{position:absolute;width:3px;height:20px;background:linear-gradient(180deg,#654321,#8b4513);border-radius:1px}.leg-1{left:3px}.leg-2{right:3px}.leg-3{left:3px}.leg-3,.leg-4{top:8px;height:12px}.leg-4{right:3px}.chair:before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:4px;height:4px;background:#654321;border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,.3)}.left-chair{left:50px;transform:scaleX(-1) translateY(-10px)}.right-chair{right:50px;transform:translateY(-10px)}.string-line{left:50px;right:50px;background:linear-gradient(90deg,#8b4513,sienna,#8b4513);z-index:1;box-shadow:0 1px 2px rgba(0,0,0,.2)}.string-line,.string-line:before{position:absolute;top:50%;height:2px}.string-line:before{left:-50px;background:linear-gradient(90deg,transparent,#8b4513)}.string-line:after,.string-line:before{content:"";transform:translateY(-50%);width:15px}.string-line:after{position:absolute;right:-50px;top:50%;height:2px;background:linear-gradient(270deg,transparent,#8b4513)}.balloon-with-mouse{position:absolute;top:50%;transform:translateY(-50%);z-index:3;transition:left .1s linear;left:50px}.balloon{font-size:2rem;text-shadow:2px 2px 4px rgba(0,0,0,.3);animation:balloonFloat .5s ease-in-out infinite alternate}.mouse{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:1.2rem;animation:mouseWave .3s ease-in-out infinite alternate;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.3));z-index:4}@keyframes balloonFloat{0%{transform:translateY(0)}to{transform:translateY(-3px)}}@keyframes mouseWave{0%{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(5deg)}}.simulation-section{padding:0;background:#f8f9fa;border-radius:16px;margin:1rem 0;box-shadow:0 2px 8px rgba(0,0,0,.1)}.ship-animation-container{width:100%;height:150px;border-radius:16px;overflow:hidden;margin:0;background:#008ce6;position:relative}.simulation-wrapper{padding:1rem;background:#f8f9fa;border-radius:16px;margin:1rem}.simulation-area{padding:0}.simulation-area .launch-btn{margin:1rem;width:calc(100% - 2rem);padding:12px 24px;font-size:1.1rem;font-weight:600}.ship-animation{position:absolute;width:100%;height:100%;stroke-linecap:round;stroke-linejoin:round;background:#008ce6}.waveSurface{stroke:#00a0e6;stroke-miterlimit:3;stroke-width:8px;fill:none}.waveBody{fill:url(#grad1);opacity:.96}#boat{fill:#643232;stroke:#461e1e;stroke-width:2.4px}#ship{visibility:visible}.pattern1{animation:waveMove1 3s linear infinite}.pattern2{animation:waveMove2 3s linear infinite reverse}.pattern3{animation:waveMove3 2s linear infinite}#shipMasterPosition{animation:shipRock 2s ease-in-out infinite}#shipTranslation{animation:shipTranslation 3s ease-in-out infinite}@keyframes waveMove1{0%{transform:translateX(0) translateY(0)}25%{transform:translateX(-25px) translateY(-3px)}50%{transform:translateX(-50px) translateY(0)}75%{transform:translateX(-75px) translateY(2px)}to{transform:translateX(-100px) translateY(0)}}@keyframes waveMove2{0%{transform:translateX(0) translateY(2px)}25%{transform:translateX(25px) translateY(0)}50%{transform:translateX(50px) translateY(-2px)}75%{transform:translateX(75px) translateY(1px)}to{transform:translateX(100px) translateY(2px)}}@keyframes waveMove3{0%{transform:translateX(0) translateY(0)}50%{transform:translateX(-12px) translateY(-1px)}to{transform:translateX(-25px) translateY(0)}}@keyframes shipRock{0%,to{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-3px) rotate(1deg)}50%{transform:translateY(0) rotate(0deg)}75%{transform:translateY(2px) rotate(-1deg)}}@keyframes shipTranslation{0%,to{transform:translateX(0) translateY(0)}50%{transform:translateX(4px) translateY(-2px)}}.map-creation-section{grid-template-columns:300px 1fr 250px;padding:2rem;background:linear-gradient(135deg,#f8f9fa,#e9ecef);min-height:80vh}.map-tools{background:#fff;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);height:-moz-fit-content;height:fit-content}.tool-selection{grid-template-columns:1fr 1fr;margin-bottom:1rem}.tool-btn{border:2px solid #e9ecef;border-radius:12px}.tool-btn:hover{box-shadow:0 4px 8px rgba(0,123,255,.2)}.tool-btn.selected{background:#e7f3ff;box-shadow:0 4px 12px rgba(0,123,255,.3)}.tool-icon{font-size:1.5rem}.tool-label{font-size:.75rem;font-weight:600;color:#333}.map-actions{margin-top:1rem}.action-btn{width:100%;padding:.75rem;background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.action-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(40,167,69,.3)}.map-canvas-container{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.1);text-align:center}.map-canvas{border:2px solid #dee2e6;cursor:crosshair}.canvas-instruction{margin-top:1rem;font-style:italic}.score-panel{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.1);height:-moz-fit-content;height:fit-content}.score-grid{display:grid;grid-gap:1rem;gap:1rem}.score-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:#f8f9fa;border-radius:8px;border-left:4px solid #007bff}.score-item.total{background:linear-gradient(135deg,#ffc107,#ff8c00);color:#fff;font-weight:700;border-left:none}.score-label{font-weight:600}.score-value{font-size:1.25rem;font-weight:700;color:#007bff}.score-item.total .score-value{color:#fff}.score-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:16px;padding:2rem;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;text-align:center}.final-scores h3{color:#333;margin-bottom:1rem}.score-breakdown{margin:1rem 0}.score-row{display:flex;justify-content:space-between;align-items:center;margin:.5rem 0;padding:.5rem;background:#f8f9fa;border-radius:6px}.score-bar{width:100px;height:8px;background:#e9ecef;border-radius:4px;overflow:hidden;margin-left:1rem}.score-fill{height:100%;background:linear-gradient(90deg,#28a745,#20c997);transition:width .3s ease}.total-score{margin-top:1.5rem;padding-top:1.5rem;border-top:2px solid #e9ecef}.score-message{margin-top:.5rem}.modal-btn{margin-top:1rem;padding:.75rem 2rem;background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.modal-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,123,255,.3)}.backpack-section{display:grid;grid-template-columns:300px 1fr 250px;grid-gap:2rem;gap:2rem;padding:2rem;background:linear-gradient(135deg,#f8f9fa,#e9ecef);min-height:80vh}.user-info{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.1);height:-moz-fit-content;height:fit-content}.weight-selector{margin-top:1rem}.weight-slider{width:100%;margin:.5rem 0}.weight-info{font-size:.9rem;color:#6c757d;margin-top:.5rem}.backpack-container{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.1)}.backpack-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.weight-status{display:flex;align-items:center;gap:1rem}.weight-bar{width:200px;height:20px;background:#e9ecef;border-radius:10px;overflow:hidden}.weight-fill{height:100%;transition:width .3s ease;border-radius:10px}.weight-text{font-weight:600;color:#333}.backpack-area{border:3px solid #6c757d;border-radius:12px;padding:1rem;background:#f8f9fa}.backpack-layers{display:flex;flex-direction:column;gap:1rem}.layer{border:2px dashed #dee2e6;border-radius:8px;padding:1rem;min-height:80px}.layer h4{margin:0 0 .5rem;font-size:.9rem;color:#6c757d}.layer-items{display:flex;gap:.5rem;flex-wrap:wrap;min-height:40px}.packed-item{display:flex;flex-direction:column;align-items:center;padding:.5rem;border-radius:6px;background:#fff;border:2px solid;min-width:60px}.packed-item.light{border-color:#28a745;background:#d4edda}.packed-item.medium{border-color:#ffc107;background:#fff3cd}.packed-item.heavy{border-color:#dc3545;background:#f8d7da}.item-icon{font-size:1.5rem;margin-bottom:.25rem}.item-weight{font-size:.7rem;font-weight:600;color:#333}.backpack-actions{margin-top:1rem;text-align:center}.finish-btn{padding:.75rem 2rem;background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.finish-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px rgba(40,167,69,.3)}.finish-btn:disabled{background:#6c757d;cursor:not-allowed}.items-selection{background:#fff;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);height:-moz-fit-content;height:fit-content;max-height:400px;overflow-y:auto;padding:1.5rem 10px 1.5rem 1.5rem}.items-selection::-webkit-scrollbar{width:8px}.items-selection::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.items-selection::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.items-selection::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:.75rem;gap:.75rem;margin-top:1rem}.item-card{border:2px solid #e9ecef;border-radius:12px;padding:1rem;text-align:center;cursor:pointer;transition:all .3s ease;background:#fff;position:relative}.item-card:hover{border-color:#007bff;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,123,255,.2)}.item-card.selected{border-color:#28a745;background:#d4edda;box-shadow:0 4px 12px rgba(40,167,69,.3)}.item-card.essential{border-color:#ffc107}.item-card .item-icon{font-size:2rem;margin-bottom:.5rem}.item-name{font-weight:600;margin-bottom:.25rem;font-size:.9rem}.item-weight{color:#6c757d;font-size:.8rem;margin-bottom:.25rem}.item-category{font-size:.7rem;color:#6c757d;text-transform:capitalize}.essential-badge{position:absolute;top:-8px;right:-8px;background:#ffc107;color:#333;font-size:.7rem;padding:.25rem .5rem;border-radius:12px;font-weight:600}.progress-panel{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.1);height:-moz-fit-content;height:fit-content}.progress-items{margin-top:1rem}.progress-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:#f8f9fa;border-radius:8px;margin-bottom:.5rem;border-left:4px solid #007bff}.progress-item .success{color:#28a745;font-weight:600}.progress-item .error{color:#dc3545;font-weight:600}.result-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000}.result-details{margin:1rem 0}.score-display{margin-bottom:1.5rem}.score-display h3{color:#007bff;margin-bottom:.5rem}.score-message{font-size:1.1rem;padding:1rem;background:#e7f3ff;border-radius:8px;border-left:4px solid #007bff}.result-breakdown{margin:1rem 0;padding:1rem;background:#f8f9fa;border-radius:8px}.breakdown-item{display:flex;justify-content:space-between;margin:.5rem 0;padding:.5rem;background:#fff;border-radius:6px}.advice{margin-top:1.5rem;padding:1rem;background:#fff3cd;border-radius:8px;border-left:4px solid #ffc107}.advice h4{margin-bottom:.5rem;color:#856404}.advice ul{margin:0;padding-left:1.5rem;color:#856404}.advice li{margin:.25rem 0}.card-actions{display:flex;gap:.5rem;margin-top:1rem}.card-actions .cta{flex:1 1;text-align:center;padding:.5rem;font-size:.9rem}.page-number{font-size:.75rem;font-weight:500;color:#666;background:#f0f0f0;padding:.25rem .5rem;border-radius:12px;margin-left:.5rem;white-space:nowrap}.book-page{max-width:1200px;margin:0 auto;padding:2rem}.book-header{display:flex;gap:3rem;margin-bottom:3rem;align-items:flex-start}.book-cover-large img{width:300px;height:400px;object-fit:cover;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15)}.book-details h1{font-size:2.5rem;margin-bottom:.5rem;color:#2c3e50}.book-details .author{font-size:1.2rem;color:#7f8c8d;margin-bottom:1.5rem;font-style:italic}.book-description{margin-bottom:2rem;line-height:1.6}.book-description p{margin-bottom:1rem;color:#34495e}.interactive-section{background:#fff;border-radius:16px;padding:2.5rem;margin-bottom:2rem;box-shadow:0 4px 12px rgba(0,0,0,.1);border:2px solid #ecf0f1}.interactive-section h2{font-size:2rem;color:#2c3e50;margin-bottom:1.5rem;border-bottom:3px solid #3498db;padding-bottom:.5rem}.interactive-section p{color:#7f8c8d;line-height:1.6;margin-bottom:1.5rem}.cta-button{display:inline-block;background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;padding:1rem 2rem;border-radius:12px;text-decoration:none;font-weight:600;font-size:1.1rem;transition:all .3s ease;box-shadow:0 4px 12px rgba(52,152,219,.3)}.cta-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(52,152,219,.4);background:linear-gradient(135deg,#2980b9,#1f5f8b)}.glossary-section{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;padding:2rem;margin:2rem 0}.glossary-section h3{color:#2c3e50;margin-bottom:1.5rem;font-size:1.5rem}.glossary-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-gap:1.5rem;gap:1.5rem}.glossary-item{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.1);border-left:4px solid #3498db}.glossary-item h4{color:#2c3e50;margin-bottom:.5rem;font-size:1.2rem;font-weight:600}.glossary-item p{color:#7f8c8d;line-height:1.5;margin:0}.matching-game-section{background:linear-gradient(135deg,#e8f5e8,#d4edda);border-radius:12px;padding:2rem;margin:2rem 0;text-align:center}.matching-game-section h3{color:#2c3e50;margin-bottom:1rem;font-size:1.5rem}.matching-game-section p{color:#7f8c8d;margin-bottom:1.5rem}.game-placeholder{background:#fff;border:2px dashed #28a745;border-radius:12px;padding:3rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.game-icon{font-size:3rem}.game-placeholder p{color:#2c3e50;font-weight:600;margin:0}.coming-soon{background:linear-gradient(135deg,#28a745,#20c997);color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:500}.book-actions{display:flex;gap:1rem;justify-content:center;margin-top:3rem;padding-top:2rem;border-top:2px solid #ecf0f1}@media (max-width:768px){.book-header{flex-direction:column;gap:2rem;text-align:center}.book-cover-large img{width:250px;height:350px}.interactive-section{padding:1.5rem}.glossary-items{grid-template-columns:1fr}.book-actions{flex-direction:column;align-items:center}}.matching-game-page{max-width:1200px;margin:0 auto;padding:1rem;min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);overflow-x:hidden}.topic-selection{background:#fff;border-radius:16px;padding:3rem;box-shadow:0 8px 24px rgba(0,0,0,.1);text-align:center}.topic-selection h2{color:#2c3e50;margin-bottom:2rem;font-size:2rem}.topics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));grid-gap:2rem;gap:2rem;margin-top:2rem}.topic-card{background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;border-radius:16px;padding:2rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px rgba(102,126,234,.3);border:3px solid transparent}.topic-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(102,126,234,.4);border-color:#3498db}.topic-card h3{font-size:1.3rem;margin-bottom:1rem;font-weight:600;line-height:1.3}.topic-card p{margin-bottom:1.5rem;line-height:1.5;opacity:.9}.topic-words-count{background:hsla(0,0%,100%,.2);padding:.5rem 1rem;border-radius:20px;display:inline-block;font-weight:600;font-size:.9rem}.selected-topic-info{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-radius:16px;padding:2rem;margin-bottom:2rem;text-align:center;border:2px solid #2196f3}.selected-topic-info h2{color:#1976d2;margin-bottom:1rem;font-size:1.8rem}.selected-topic-info p{color:#1565c0;line-height:1.6;margin:0}.start-actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.back-to-topics-btn{background:linear-gradient(135deg,#6c757d,#5a6268);color:#fff;border:none;padding:.6rem 1rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block;font-size:.9rem}.back-to-topics-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px hsla(208,7%,46%,.3)}.game-header{background:#fff;border-radius:16px;padding:1.5rem;margin-bottom:1rem;box-shadow:0 8px 24px rgba(0,0,0,.1);display:flex;justify-content:space-between;align-items:center}.game-title h1{color:#2c3e50;margin-bottom:.5rem;font-size:1.5rem}.game-title p{color:#7f8c8d;margin:0}.game-stats{display:flex;gap:1rem}.stat-item{text-align:center}.stat-label{display:block;color:#7f8c8d;font-size:.9rem;margin-bottom:.25rem}.stat-value{display:block;color:#2c3e50;font-size:1.2rem}.game-start{background:#fff;border-radius:16px;padding:3rem;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.1)}.start-content h2{color:#2c3e50;margin-bottom:2rem;font-size:2rem}.instructions{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:1.5rem;gap:1.5rem;margin:2rem 0}.instruction-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:#f8f9fa;border-radius:12px;text-align:left}.instruction-icon{font-size:1.5rem;flex-shrink:0}.instruction-item p{color:#2c3e50;margin:0;font-weight:500}.start-btn{background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;padding:1rem 2rem;border-radius:12px;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px rgba(40,167,69,.3)}.start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(40,167,69,.4)}.game-completed{background:#fff;border-radius:16px;padding:3rem;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.1)}.completion-content h2{color:#28a745;margin-bottom:2rem;font-size:2rem}.final-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:1.5rem;gap:1.5rem;margin:2rem 0}.final-stat{background:#f8f9fa;padding:1.5rem;border-radius:12px}.final-label{display:block;color:#7f8c8d;font-size:.9rem;margin-bottom:.5rem}.final-value{display:block;color:#2c3e50;font-size:1.8rem;font-weight:600}.score-message{background:linear-gradient(135deg,#e8f5e8,#d4edda);padding:1.5rem;border-radius:12px;margin:2rem 0}.score-message p{color:#2c3e50;font-size:1.1rem;font-weight:500;margin:0}.completion-actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.play-again-btn{background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;padding:1rem 2rem;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease}.play-again-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(40,167,69,.3)}.back-to-book-btn{background:linear-gradient(135deg,#6c757d,#5a6268);color:#fff;text-decoration:none;padding:1rem 2rem;border-radius:12px;font-weight:600;transition:all .3s ease}.back-to-book-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px hsla(208,7%,46%,.3)}.game-area{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 8px 24px rgba(0,0,0,.1);max-height:80vh;overflow-y:auto}.game-columns{display:grid;grid-template-columns:1fr 1fr;grid-gap:2rem;gap:2rem;margin-bottom:2rem}.definitions-column h3,.terms-column h3{color:#2c3e50;margin-bottom:1rem;text-align:center;font-size:1.3rem}.definitions-list,.terms-list{display:flex;flex-direction:column;gap:1rem}.definition-card,.term-card{background:#f8f9fa;border:2px solid #e9ecef;border-radius:12px;padding:1rem;cursor:pointer;transition:all .3s ease;position:relative;min-height:60px;max-height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden}.definition-card:hover,.term-card:hover{border-color:#3498db;transform:translateY(-2px);box-shadow:0 4px 12px rgba(52,152,219,.2)}.definition-card.selected,.term-card.selected{border-color:#3498db;background:#e3f2fd;transform:translateY(-2px);box-shadow:0 4px 12px rgba(52,152,219,.3)}.definition-card.matched,.term-card.matched{border-color:#28a745;background:#e8f5e8;cursor:default}.definition-card.matched:hover,.term-card.matched:hover{transform:none;box-shadow:none}.definition-text,.term-text{color:#2c3e50;font-weight:600;text-align:center;line-height:1.3;font-size:.9rem;word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.match-indicator{position:absolute;top:.5rem;right:.5rem;font-size:1.2rem}.game-controls{display:flex;gap:.5rem;justify-content:center;padding-top:1rem;border-top:2px solid #ecf0f1;flex-wrap:wrap}.reset-btn{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;border:none;padding:.6rem 1rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.9rem}.reset-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(220,53,69,.3)}.back-btn{background:linear-gradient(135deg,#6c757d,#5a6268);color:#fff;text-decoration:none;padding:.6rem 1rem;border-radius:8px;font-weight:600;transition:all .3s ease;font-size:.9rem}.back-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px hsla(208,7%,46%,.3)}@media (max-width:768px){.matching-game-page{padding:.5rem}.game-header{flex-direction:column;gap:1.5rem;text-align:center}.game-stats{justify-content:center}.game-columns{grid-template-columns:1fr}.game-area{max-height:70vh;padding:1rem}.instructions{grid-template-columns:1fr}.completion-actions,.game-controls{flex-direction:column;align-items:center}.topics-grid{grid-template-columns:1fr}.topic-card{padding:1.5rem}.topic-card h3{font-size:1.1rem}.start-actions{flex-direction:column;align-items:center}.selected-topic-info{padding:1.5rem}.selected-topic-info h2{font-size:1.5rem}.game-title h1{font-size:1.2rem}.stat-value{font-size:1rem}}.map-creation-section{display:grid;grid-template-columns:1fr 2fr 1fr;grid-gap:2rem;gap:2rem;margin:2rem 0}.player-stats{background:#f8f9fa;padding:1.5rem;border-radius:12px;border:2px solid #e9ecef}.player-stats h3{margin-bottom:1rem;color:#495057}.stats-grid{display:grid;grid-gap:.75rem;gap:.75rem;margin-bottom:1rem}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:#fff;border-radius:6px;border:1px solid #dee2e6}.stat-label{font-weight:500;color:#495057}.stat-value{font-weight:600;color:#007bff}.visited-places{margin-top:1rem;padding-top:1rem;border-top:1px solid #dee2e6}.places-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.visited-place{background:#d4edda;color:#155724;padding:.25rem .5rem;border-radius:4px;font-size:.8rem}.distance-input{margin:1rem 0;padding:1rem;background:#fff;border-radius:8px;border:1px solid #dee2e6}.distance-input label{display:block;margin-bottom:.5rem;font-weight:500;color:#495057}.distance-input-row{display:flex;gap:.5rem;align-items:center}.distance-input-field{flex:1 1}.clear-distance-btn,.distance-input-field{padding:.5rem;border:1px solid #ced4da;border-radius:4px;font-size:.9rem}.clear-distance-btn{background:#fff;cursor:pointer;transition:all .2s ease}.clear-distance-btn:hover{background:#f8f9fa;border-color:#adb5bd}.distance-input small{display:block;margin-top:.25rem;color:#6c757d;font-size:.8rem}.map-tools{background:#f8f9fa;padding:1.5rem;border-radius:12px;border:2px solid #e9ecef}.map-tools h3{margin-bottom:1rem;color:#495057}.tool-selection{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));grid-gap:.5rem;gap:.5rem;max-height:300px;overflow-y:auto;padding-right:8px}.tool-selection::-webkit-scrollbar{width:6px}.tool-selection::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.tool-selection::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.tool-selection::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.tool-btn{display:flex;flex-direction:column;align-items:center;padding:.75rem;border:2px solid #dee2e6;border-radius:8px;background:#fff;cursor:pointer;transition:all .3s ease}.tool-btn:hover{border-color:#007bff;transform:translateY(-2px)}.tool-btn.selected{border-color:#007bff;background:#e3f2fd}.tool-icon{font-size:1.2rem;margin-bottom:.25rem}.tool-label{font-size:.7rem;font-weight:500;color:#495057;text-align:center}.map-canvas-container{display:flex;flex-direction:column;align-items:center}.map-canvas-container h3{margin-bottom:1rem;color:#495057}.map-canvas{border:2px solid #333;border-radius:8px;background:#f8f9fa}.canvas-instruction{margin-top:.5rem;font-size:.9rem;color:#6c757d;text-align:center}.places-list-container{grid-column:1/-1;background:#f8f9fa;padding:1.5rem;border-radius:12px;border:2px solid #e9ecef}.places-list-container h3{margin-bottom:1rem;color:#495057}.places-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:1rem;gap:1rem}.place-card{display:flex;align-items:center;gap:1rem;padding:1rem;background:#fff;border-radius:8px;border:2px solid #dee2e6;transition:all .3s ease}.place-card.visited{border-color:#28a745;background:#f8fff9}.place-icon{font-size:2rem}.place-info{flex:1 1}.place-info h4{margin:0 0 .25rem;color:#495057}.place-info p{margin:0;font-size:.8rem;color:#6c757d}.distance-info{color:#28a745!important;font-weight:500}.visit-btn{padding:.5rem 1rem;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:all .3s ease}.visit-btn:not(.visited){background:#007bff;color:#fff}.visit-btn:not(.visited):hover{background:#0056b3}.visit-btn.visited{background:#28a745;color:#fff;cursor:not-allowed}.diary-section{grid-column:1/-1;background:#fff3cd;padding:2rem;border-radius:12px;border:2px solid #ffeaa7;margin-top:2rem}.diary-section h3{margin-bottom:1.5rem;color:#856404}.diary-form{background:#fff;padding:1.5rem;border-radius:8px;margin-bottom:2rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#495057}.form-group textarea{width:100%;padding:.75rem;border:1px solid #ced4da;border-radius:6px;font-family:inherit;resize:vertical}.add-entry-btn{padding:.75rem 1.5rem;background:#ffc107;color:#212529;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:background .3s ease}.add-entry-btn:hover{background:#e0a800}.diary-entries{background:#fff;padding:1.5rem;border-radius:8px}.diary-entries h4{margin-bottom:1rem;color:#495057}.no-entries{text-align:center;color:#6c757d;font-style:italic}.diary-entry{border:1px solid #dee2e6;border-radius:8px;padding:1rem;margin-bottom:1rem;background:#f8f9fa}.entry-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid #dee2e6}.entry-date{font-weight:600;color:#495057}.entry-steps{color:#007bff;font-weight:500}.entry-learnings,.entry-notes,.entry-places{margin-bottom:.75rem}.entry-learnings strong,.entry-notes strong,.entry-places strong{color:#495057}.entry-places-list{margin-top:.25rem}.entry-place{display:block;color:#6c757d;font-size:.9rem;margin-bottom:.25rem}.entry-learnings p,.entry-notes p{margin:.25rem 0 0;color:#495057;line-height:1.4}.key-section{background:linear-gradient(135deg,#f8fafc,#e2e8f0);padding:40px 20px;margin:20px 0}.key-container{max-width:500px;margin:0 auto;background:#fff;padding:30px;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.1);text-align:center}.key-container h3{color:#1f2937;margin-bottom:15px;font-size:1.5rem}.key-container p{color:#6b7280;margin-bottom:25px}.key-input-group{display:flex;gap:10px;margin-bottom:20px}.key-input{flex:1 1;padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:1rem;transition:border-color .3s ease}.key-input:focus{outline:none;border-color:#dc3c41}.key-button{background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.key-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px rgba(102,126,234,.4)}.key-button:disabled{opacity:.6;cursor:not-allowed}.verification-message{padding:12px 16px;border-radius:8px;font-weight:500;margin-top:15px}.verification-message.success{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}.verification-message.error{background:#fee2e2;color:#dc2626;border:1px solid #fecaca}.login-prompt{background:linear-gradient(135deg,#f8fafc,#e2e8f0);padding:40px 20px;margin:20px 0}.login-container{max-width:400px;margin:0 auto;background:#fff;padding:30px;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.1);text-align:center}.login-container h3{color:#1f2937;margin-bottom:15px;font-size:1.5rem}.login-container p{color:#6b7280;margin-bottom:25px}.login-button{background:linear-gradient(135deg,#dc3c41,#c83237);color:#fff;text-decoration:none;padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:600;display:inline-block;transition:all .3s ease}.login-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(205,23,25,.4)}.footer-bottom{margin-top:20px;padding:20px 0;border-top:1px solid #e5e7eb}.footer-branding{display:flex;align-items:center;justify-content:space-between;width:100%}.footer-left{flex:1 1;text-align:left}.footer-left small{font-size:.9rem;color:#6b7280;font-weight:500}.footer-center{flex:1 1;text-align:center}.footer-right{flex:1 1;text-align:right}.odtu-logo{height:50px;width:auto;opacity:.8;transition:opacity .3s ease}.odtu-logo:hover{opacity:1}@media (max-width:768px){.footer-branding{flex-direction:column;gap:20px;text-align:center}.footer-center,.footer-left,.footer-right{flex:none;text-align:center}.odtu-logo{height:40px}}