:root { --p: #27ae60; --s: #2980b9; --a: #f1c40f; --t: #2c3e50; --bg: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
* { box-sizing: border-box; }
body { font-family: 'Nunito', sans-serif; background: var(--bg); margin: 0; padding: 0; display: flex; width: 100vw; height: 100vh; overflow: hidden; color: var(--t); }

#loginScreen, .modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; z-index:9999; display:flex; justify-content:center; align-items:center; }
#loginScreen { background:rgba(44,62,80,0.98); }
.modal-overlay { background:rgba(0,0,0,0.8); display: none; }

.login-box, .popup-box { background:white; border-radius:20px; box-shadow:0 20px 50px rgba(0,0,0,0.5); }
.login-box { width:400px; padding:40px; text-align:center; }
.popup-box { width:90%; max-width:700px; max-height:85vh; overflow-y:auto; padding:30px; position:relative; }

.login-input, .class-select { width:100%; padding:12px; margin-bottom:15px; border-radius:8px; border:1px solid #ccc; font-size:1rem; }
.btn-start, .btn-main { background: linear-gradient(45deg, var(--p), #2ecc71); color:white; border:none; padding:12px; border-radius:12px; font-size:1.2rem; width:100%; font-weight:bold; cursor:pointer; }
.btn-main { margin-top:15px; font-size:1.1rem; }

.app-container { display: flex; width: 100%; height: 100%; }
.sidebar { width:260px; background:rgba(255,255,255,0.95); display:flex; flex-direction:column; padding:15px; border-right:1px solid rgba(0,0,0,0.1); z-index:20; flex-shrink:0; }
.logo-area img { max-width:100px; border-radius:10px; display:block; margin:0 auto 10px; }
.player-card { background:linear-gradient(135deg, #3498db, #8e44ad); color:white; padding:12px; border-radius:12px; text-align:center; margin-bottom:10px; }
.xp-bar { background:rgba(0,0,0,0.3); height:6px; border-radius:10px; margin:5px 0; overflow:hidden; }
.xp-fill { background:var(--a); width:0%; height:100%; transition:width 0.5s; }
.badges-list { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; overflow-y:auto; flex:1; padding:5px 0; }
.mini-badge { width:30px; height:30px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; opacity:0.3; filter:grayscale(1); border:1px solid #ddd; }
.mini-badge.unlocked { opacity:1; filter:grayscale(0); border-color:var(--a); transform:scale(1.1); }
.btn-doc { background:white; border:2px solid #333; padding:8px; border-radius:8px; font-weight:bold; margin-bottom:10px; width:100%; cursor:pointer; }

.main-content { flex:1; position:relative; overflow: hidden; }
#dashboardView { position:absolute; top:0; left:0; width:100%; height:100%; padding:30px; overflow-y:auto; background:var(--bg); z-index:10; }
.section-title { font-size:1.5rem; border-bottom:2px solid rgba(0,0,0,0.1); padding-bottom:10px; margin-bottom:20px; font-weight:800; }
.trips-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px; padding-bottom:50px; }
.trip-card { background:rgba(255,255,255,0.9); border-radius:15px; overflow:hidden; cursor:pointer; transition:transform 0.2s; box-shadow:0 4px 10px rgba(0,0,0,0.05); }
.trip-card:hover { transform:translateY(-5px); background:white; box-shadow:0 10px 20px rgba(0,0,0,0.1); }
.trip-card.completed .trip-cover { background:linear-gradient(45deg, #00b894, #55efc4); }
.trip-card.passion { border-top:5px solid #9b59b6; }
.trip-cover { height:75px; background:linear-gradient(45deg, #ff9ff3, #feca57); display:flex; justify-content:center; align-items:center; font-size:2rem; }
.trip-body { padding:15px; } .trip-dest { font-weight:800; font-size:1rem; display:block; }

#missionView { display:none; width:100%; height:100%; flex-direction:row; }
.mission-diary { width:450px; background:white; padding:20px; overflow-y:auto; border-right:1px solid #ccc; display:flex; flex-direction:column; gap:12px; z-index:5; flex-shrink:0; }
.top-bar { display:flex; align-items:center; gap:10px; border-bottom:1px solid #eee; padding-bottom:10px; }
.back-btn { background:#eee; border:none; width:35px; height:35px; border-radius:50%; font-size:1.2rem; cursor:pointer; }
.info-card { background:#e3f2fd; border-left:4px solid var(--s); padding:10px; border-radius:8px; }
.landmark-btn { background:white; padding:10px; border-radius:6px; cursor:pointer; border:1px solid #b3e5fc; font-weight:bold; color:var(--t); display:flex; justify-content:space-between; margin-top:5px; }
.landmark-btn:hover { background:#d1ecf1; }
.input-row { display:flex; gap:10px; } .input-group { flex:1; }
.input-group label { display:block; font-size:0.75rem; font-weight:800; color:#777; margin-bottom:3px; text-transform:uppercase; }
.input-group input, textarea { width:100%; padding:10px; border:1px solid #ccc; border-radius:6px; font-family:inherit; font-size:0.95rem; background:#f9f9f9; }
.checklist-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:6px; background:#f8f9fa; padding:8px; border-radius:8px; border:1px solid #eee; }
.check-item { display:flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:700; color:#000; cursor:pointer; padding:4px; background:white; border:1px solid #ddd; border-radius:4px; }
.check-item input { margin:0; width:16px; height:16px; }
.mission-map { flex:1; height:100%; position:relative; background:#eee; }
iframe.map-frame { width:100%; height:100%; border:0; display:block; }
.map-label { position:absolute; bottom:20px; left:20px; background:rgba(255,255,255,0.9); padding:6px 12px; border-radius:20px; font-weight:bold; pointer-events:none; }

.popup-close { position:absolute; top:15px; right:20px; font-size:2rem; cursor:pointer; color:#999; }
.popup-header { font-size:1.8rem; color:var(--s); border-bottom:2px solid #eee; padding-bottom:10px; margin-top:0; }
.popup-text { font-size:1.1rem; line-height:1.6; text-align:justify; color:#333; }
.sector-box { background:#f8f9fa; border-left:4px solid var(--a); padding:10px; margin:15px 0; font-size:0.95rem; }
.recipe-box { background:#fff3e0; border:1px solid #ffe0b2; padding:15px; border-radius:10px; margin-top:15px; }
.recipe-title { color:#d35400; font-weight:bold; font-size:1.2rem; display:flex; align-items:center; gap:8px; }