@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323:wght@400&display=swap";:root{--bg:#0a0e0a;--surface:#121a12;--surface2:#1a2a1a;--border:#2d4a2d;--green:#00e676;--green-dim:#4caf50;--amber:#ffca28;--red:#ef5350;--text:#e8f5e9;--text-dim:#81c784;--font-pixel:"Press Start 2P", monospace;--font-retro:"VT323", monospace;--header-h:52px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font-retro);font-size:16px;overflow-x:hidden}.site-header{height:var(--header-h);background:var(--surface);border-bottom:2px solid var(--border);z-index:100;align-items:center;gap:16px;padding:0 16px;display:flex;position:fixed;top:0;left:0;right:0}.header-left{flex:none;align-items:center;gap:8px;display:flex}.header-logo{font-size:20px}.header-title{font-family:var(--font-pixel);color:var(--green);letter-spacing:1px;white-space:nowrap;font-size:10px}.header-center{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.header-progress{font-family:var(--font-pixel);color:var(--green);white-space:nowrap;font-size:9px}.progress-bar-wrap{background:var(--surface2);border:1px solid var(--border);border-radius:4px;flex:1;height:8px;overflow:hidden}.progress-bar-fill{background:var(--green);min-width:0;height:100%;transition:width .4s}.header-right{flex:none;align-items:center;gap:8px;display:flex}.header-theme-btn{font-family:var(--font-pixel);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;background:0 0;padding:4px 8px;font-size:13px;line-height:1;transition:border-color .15s,color .15s}.header-theme-btn:hover{border-color:var(--green-dim);color:var(--green)}.header-btn{font-family:var(--font-pixel);border:2px solid var(--green);color:var(--green);cursor:pointer;letter-spacing:1px;background:0 0;padding:8px 12px;font-size:8px;transition:background .15s,color .15s}.header-btn:hover{background:var(--green);color:var(--bg)}.tracker-desktop{height:calc(100vh - var(--header-h));margin-top:var(--header-h);display:flex}.map-fullscreen{flex:1;min-width:0}.parks-overlay-panel{background:var(--surface);border-left:2px solid var(--border);width:320px;min-width:320px;height:100%;overflow-y:auto}.tracker-mobile{margin-top:var(--header-h);display:none}@media (width<=768px){.tracker-desktop{display:none}.tracker-mobile{height:calc(100vh - var(--header-h));flex-direction:column;display:flex}}.mobile-map-wrap{z-index:1;flex-shrink:0;height:240px;position:relative}.mobile-list-wrap{background:var(--surface);border-top:2px solid var(--border);z-index:1;flex:1;position:relative;overflow-y:auto}.site-bg{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.desert-bg{background:#7ec8e3}.night-bg{background:#0b1527}@keyframes floatCloud{0%{transform:translate(110vw)}to{transform:translate(-300px)}}@keyframes floatStar{0%{transform:translate(110vw)}to{transform:translate(-10px)}}.site-header,.parks-overlay-panel,.mobile-list-wrap{z-index:1;position:relative}.home-page{background:var(--bg);justify-content:center;align-items:center;min-height:100vh;display:flex}.home-content{text-align:center;padding:32px}.home-emblem{margin-bottom:24px;font-size:64px;display:block}.home-title{font-family:var(--font-pixel);color:var(--green);letter-spacing:3px;margin-bottom:12px;font-size:clamp(14px,3vw,22px)}.home-subtitle{font-family:var(--font-retro);color:var(--text-dim);margin-bottom:40px;font-size:22px}.home-buttons{flex-direction:column;align-items:center;gap:16px;display:flex}.home-btn{font-family:var(--font-pixel);cursor:pointer;letter-spacing:1px;border:2px solid;padding:14px 24px;font-size:9px;transition:background .15s,color .15s}.home-btn.primary{background:var(--green);color:var(--bg);border-color:var(--green)}.home-btn.primary:hover{color:var(--green);background:0 0}.home-btn.secondary{color:var(--text-dim);border-color:var(--border);background:0 0}.home-btn.secondary:hover{border-color:var(--text-dim);color:var(--text)}.region-list{padding:8px}.filter-tabs{border:2px solid var(--border);margin-bottom:12px;display:flex}.filter-tab{font-family:var(--font-pixel);color:var(--text-dim);cursor:pointer;letter-spacing:.5px;background:0 0;border:none;flex:1;padding:8px 4px;font-size:7px;transition:background .15s,color .15s}.filter-tab.active{background:var(--green);color:var(--bg)}.filter-tab:not(.active):hover{background:var(--surface2)}.region-section{margin-bottom:12px}.region-header{background:var(--surface2);border:1px solid var(--border);cursor:pointer;width:100%;font-family:var(--font-pixel);color:var(--green-dim);letter-spacing:.5px;align-items:center;gap:6px;padding:6px 8px;font-size:7px;display:flex}.region-header:hover{border-color:var(--green-dim)}.region-name{text-align:left;flex:1}.region-count{color:var(--text-dim)}.region-toggle{font-size:8px}.park-grid{flex-wrap:wrap;gap:6px;width:fit-content;padding:8px 4px;display:flex}.park-grid.collapsed{visibility:hidden;height:0;padding:0;overflow:hidden}.visited-grid{flex-wrap:wrap;gap:8px;padding:4px;display:flex}.no-visited-msg,.no-logs-msg{font-family:var(--font-retro);color:var(--text-dim);text-align:center;padding:20px 12px;font-size:16px}.park-card-badge{cursor:pointer;text-align:center;width:68px;transition:transform .12s}.park-card-badge:hover{transform:scale(1.06)}.park-card-badge.active .badge-inner{box-shadow:0 0 0 2px var(--green)}.badge-inner{border-radius:4px;justify-content:center;align-items:center;width:60px;height:60px;margin:0 auto 4px;display:flex;position:relative;overflow:hidden}.unvisited .badge-inner{filter:grayscale(85%)opacity(.4)}.badge-code{font-family:var(--font-pixel);color:#fffffff2;text-shadow:0 1px 3px #000c;letter-spacing:.5px;font-size:8px;line-height:1.4}.badge-date-stamp{font-family:var(--font-retro);color:#fff;letter-spacing:1px;white-space:nowrap;text-shadow:0 0 6px #000,0 0 3px #000;pointer-events:none;background:#0000002e;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex;position:absolute;inset:0;transform:rotate(-28deg)}.badge-multi{font-family:var(--font-pixel);color:var(--amber);background:#000000b3;border-radius:2px;padding:1px 2px;font-size:6px;position:absolute;top:1px;right:1px}.badge-name{font-family:var(--font-pixel);color:var(--text);word-break:break-word;margin-bottom:1px;font-size:5px;line-height:1.4}.badge-state{font-family:var(--font-retro);color:var(--text-dim);font-size:13px}.modal-overlay{z-index:200;background:#000000bf;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-box{background:var(--surface);border:2px solid var(--border);border-radius:4px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto}.modal-header-band{justify-content:center;align-items:center;height:80px;display:flex;position:relative}.modal-header-badge{justify-content:center;align-items:center;display:flex}.modal-badge-code{font-family:var(--font-pixel);color:#fffffff2;text-shadow:0 2px 6px #0009;letter-spacing:2px;font-size:16px}.modal-close{font-family:var(--font-pixel);color:#fff;cursor:pointer;background:#0006;border:none;padding:4px 6px;font-size:10px;position:absolute;top:10px;right:12px}.modal-close:hover{background:#000000b3}.modal-body{padding:16px}.modal-park-name{font-family:var(--font-pixel);color:var(--green);letter-spacing:1px;margin-bottom:6px;font-size:12px}.modal-meta{font-family:var(--font-retro);color:var(--text-dim);margin-bottom:10px;font-size:18px}.modal-meta-dot{margin:0 6px}.modal-fun-fact{font-family:var(--font-retro);color:var(--text-dim);background:var(--surface2);border-left:3px solid var(--green-dim);align-items:flex-start;gap:8px;margin-bottom:12px;padding:8px 10px;font-size:16px;display:flex}.fun-fact-icon{flex-shrink:0}.modal-divider{background:var(--border);height:1px;margin:12px 0}.modal-tabs{border:1px solid var(--border);margin-bottom:12px;display:flex}.modal-tab{font-family:var(--font-pixel);color:var(--text-dim);cursor:pointer;letter-spacing:.5px;background:0 0;border:none;flex:1;padding:8px 4px;font-size:7px;transition:background .15s,color .15s}.modal-tab.active{background:var(--green);color:var(--bg)}.modal-tab:not(.active):hover{background:var(--surface2)}.log-list{flex-direction:column;gap:8px;margin-bottom:12px;display:flex}.log-entry{background:var(--surface2);border:1px solid var(--border);border-radius:2px;padding:10px}.log-entry-top{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.log-date{font-family:var(--font-retro);color:var(--green);font-size:17px}.log-trail-name{font-family:var(--font-pixel);color:var(--text);word-break:break-word;flex:1;font-size:8px}.log-miles{font-family:var(--font-retro);color:var(--amber);white-space:nowrap;font-size:17px}.log-with{font-family:var(--font-retro);color:var(--text-dim);font-size:16px}.log-notes{font-family:var(--font-retro);color:var(--text-dim);margin-top:4px;font-size:15px;line-height:1.4}.log-actions{flex-shrink:0;gap:4px;margin-left:auto;display:flex}.btn-edit,.btn-remove{font-family:var(--font-pixel);border:1px solid var(--border);cursor:pointer;background:0 0;padding:3px 6px;font-size:9px;transition:background .12s}.btn-edit{color:var(--green-dim)}.btn-edit:hover{background:var(--surface)}.btn-remove{color:var(--red)}.btn-remove:hover{background:#ef53501a}.log-form{flex-direction:column;gap:10px;display:flex}.field-row{gap:10px;display:flex}.field-group{flex-direction:column;flex:1;gap:4px;display:flex}.field-group.field-small{flex:0 0 90px}.field-group label{font-family:var(--font-pixel);color:var(--text-dim);letter-spacing:.5px;font-size:7px}.field-group input,.field-group textarea{font-family:var(--font-retro);background:var(--surface2);border:1px solid var(--border);color:var(--text);resize:vertical;border-radius:2px;outline:none;padding:6px 8px;font-size:16px}.field-group input:focus,.field-group textarea:focus{border-color:var(--green-dim)}.form-actions{gap:8px;display:flex}.btn-save,.btn-cancel{font-family:var(--font-pixel);cursor:pointer;letter-spacing:.5px;border:2px solid;padding:8px 14px;font-size:7px}.btn-save{background:var(--green);color:var(--bg);border-color:var(--green)}.btn-save:hover{color:var(--green);background:0 0}.btn-cancel{color:var(--text-dim);border-color:var(--border);background:0 0}.btn-cancel:hover{border-color:var(--text-dim);color:var(--text)}.add-log-btn{font-family:var(--font-pixel);border:2px dashed var(--border);width:100%;color:var(--green-dim);cursor:pointer;letter-spacing:.5px;background:0 0;padding:10px;font-size:7px;transition:border-color .15s,color .15s}.add-log-btn:hover{border-color:var(--green);color:var(--green)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--surface)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--green-dim)}
