:root{--bg-color: #F4E8D1;--primary-dark: #2C4C3B;--accent-brown: #8B5A2B;--gold-glow: #D4AF37;--text-main: #3E2723;--card-bg: rgba(255, 253, 245, .9)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Georgia,Times New Roman,serif;background-color:var(--bg-color);background-image:radial-gradient(circle at 50% 50%,transparent 20%,rgba(139,90,43,.08) 100%),linear-gradient(45deg,rgba(44,76,59,.04) 25%,transparent 25%,transparent 75%,rgba(44,76,59,.04) 75%,rgba(44,76,59,.04)),linear-gradient(45deg,rgba(44,76,59,.04) 25%,transparent 25%,transparent 75%,rgba(44,76,59,.04) 75%,rgba(44,76,59,.04));background-size:100% 100%,40px 40px,40px 40px;background-position:0 0,0 0,20px 20px;color:var(--text-main);overflow-x:hidden}.app-container{min-height:100vh;display:flex;flex-direction:column;position:relative}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:15px 25px;background:#f4e8d1d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:2px dashed var(--accent-brown);position:sticky;top:0;z-index:50;box-shadow:0 4px 15px #0000000d}.brand{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:700;color:var(--primary-dark)}.brand-icon{color:var(--accent-brown)}.cloud-status{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--accent-brown);font-weight:700;background:#8b5a2b1a;padding:6px 12px;border-radius:20px}.cloud-status .icon{width:18px;height:18px}.cloud-status .spin{animation:spin 2s linear infinite}.cloud-status .error{color:#d32f2f}.toast{position:fixed;top:80px;left:50%;transform:translate(-50%);background:var(--primary-dark);color:#fff;padding:12px 24px;border-radius:30px;box-shadow:0 8px 20px #0003;z-index:100;font-size:1rem;font-weight:700;border:1px solid var(--gold-glow)}.view{flex:1;padding:30px;display:flex;flex-direction:column;max-width:1200px;margin:0 auto;width:100%}.start-view{align-items:center;justify-content:center;text-align:center}.title-box h1{font-size:4rem;color:var(--primary-dark);text-shadow:3px 3px 0px var(--gold-glow);margin-bottom:15px;letter-spacing:3px}.title-box p{font-size:1.3rem;color:var(--accent-brown);font-style:italic}.hero-graphic{display:flex;gap:20px;margin:50px 0;height:150px;width:300px;justify-content:center;animation:float 4s ease-in-out infinite}.hero-graphic .dino-svg{width:120px;height:120px}.start-btn{background:var(--primary-dark);color:#fff;border:2px solid var(--gold-glow);border-radius:40px;padding:18px 50px;font-size:1.3rem;font-weight:700;cursor:pointer;box-shadow:0 8px 0 var(--accent-brown);transition:all .15s;font-family:inherit;letter-spacing:1px}.start-btn:active{box-shadow:0 2px 0 var(--accent-brown);transform:translateY(6px)}.explore-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px;padding-bottom:15px;border-bottom:3px solid var(--accent-brown)}.explore-header h2{color:var(--primary-dark);font-size:2.5rem;letter-spacing:1px}.progress-bar-container{width:250px;background:var(--card-bg);padding:10px;border-radius:12px;border:1px solid var(--accent-brown)}.progress-text{display:flex;align-items:center;gap:8px;font-size:1rem;color:var(--accent-brown);margin-bottom:8px;font-weight:700}.progress-track{height:12px;background:#8b5a2b26;border-radius:6px;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;background:linear-gradient(90deg,var(--gold-glow),#FFD700);transition:width .8s cubic-bezier(.4,0,.2,1)}.main-content{display:flex;gap:30px;flex:1}.dino-grid{flex:3;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:25px;align-content:start}.sidebar{flex:1;min-width:280px;background:var(--card-bg);border:2px solid var(--accent-brown);border-radius:16px;padding:20px;box-shadow:6px 6px #8b5a2b26;max-height:calc(100vh - 200px);overflow-y:auto}.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-track{background:#8b5a2b1a;border-radius:4px}.sidebar::-webkit-scrollbar-thumb{background:var(--accent-brown);border-radius:4px}.sidebar-header{display:flex;align-items:center;gap:12px;color:var(--primary-dark);margin-bottom:20px;border-bottom:2px dashed var(--accent-brown);padding-bottom:15px}.sidebar-header h3{font-size:1.3rem}.discovery-list{list-style:none}.discovery-list li{display:flex;align-items:center;gap:10px;padding:12px 0;font-size:1rem;color:var(--text-main);border-bottom:1px solid rgba(139,90,43,.1);font-weight:500}.bullet{width:10px;height:10px;background:var(--gold-glow);border-radius:50%;display:inline-block;box-shadow:0 0 5px var(--gold-glow)}.dino-card{background:var(--card-bg);border:2px solid var(--accent-brown);border-radius:16px;cursor:pointer;overflow:hidden;box-shadow:4px 4px #8b5a2b26;transition:all .3s ease;position:relative}.card-inner{padding:15px;display:flex;flex-direction:column;height:100%}.img-container{height:160px;background:#2c4c3b0d;border-radius:12px;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;margin-bottom:15px;border:1px solid rgba(139,90,43,.1)}.dino-svg{width:80%;height:80%;transition:all .3s ease}.locked .dino-svg{filter:grayscale(100%) brightness(.5)}.question-mark{position:absolute;font-size:4rem;font-weight:700;color:var(--primary-dark);opacity:.3;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.card-info{text-align:center}.card-info h3{font-size:1.4rem;color:var(--primary-dark);margin-bottom:8px;font-weight:700}.dino-title{font-size:.85rem;padding:4px 12px;border-radius:12px;font-weight:700;display:inline-block}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#2c4c3bcc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:200}.detail-modal{background:var(--bg-color);border:4px solid var(--accent-brown);border-radius:24px;width:92%;max-width:800px;box-shadow:0 25px 50px #00000080;position:relative;overflow:hidden;display:flex;flex-direction:column}@media (min-width: 768px){.detail-modal{flex-direction:row;min-height:450px}}.close-btn{position:absolute;top:20px;right:20px;background:var(--card-bg);border:2px solid var(--accent-brown);border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:10;color:var(--primary-dark);transition:transform .2s,background .2s}.close-btn:hover{transform:rotate(90deg);background:var(--bg-color)}.modal-content{display:flex;flex-direction:column;width:100%}@media (min-width: 768px){.modal-content{flex-direction:row}}.modal-visual{flex:1;position:relative;min-height:300px;display:flex;justify-content:center;align-items:center;border-bottom:4px solid var(--accent-brown)}@media (min-width: 768px){.modal-visual{border-bottom:none;border-right:4px solid var(--accent-brown)}}.detail-svg-wrapper{width:70%;height:70%;z-index:2;display:flex;justify-content:center;align-items:center}.detail-svg-wrapper .dino-svg{width:100%;height:100%;filter:drop-shadow(0 15px 25px rgba(0,0,0,.4))!important}.ambient-glow{position:absolute;width:200px;height:200px;opacity:.4;z-index:1;filter:blur(20px)}.modal-info{flex:1.2;padding:40px;background:var(--card-bg);display:flex;flex-direction:column;justify-content:center}.modal-info h2{font-size:3rem;margin-bottom:10px;text-shadow:1px 1px 0 rgba(0,0,0,.1)}.tagline{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:25px;font-size:1.1rem;color:var(--text-main)}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:25px}.stat-item{background:#8b5a2b0f;padding:15px;border-radius:12px;border-left:4px solid var(--accent-brown)}.stat-item.full-width{grid-column:1 / -1}.stat-item .label{display:block;font-size:.9rem;color:var(--accent-brown);margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}.stat-item .value{font-weight:700;color:var(--primary-dark);font-size:1.1rem}.fun-fact{padding:20px;border-radius:12px;display:flex;gap:15px;align-items:flex-start;border:2px dashed}.fact-icon{flex-shrink:0;margin-top:2px}.fun-fact p{font-size:1.05rem;line-height:1.6;color:var(--text-main);font-weight:500}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 900px){.main-content{flex-direction:column}.sidebar{max-height:350px}.title-box h1{font-size:3rem}}