:root{--bg-page: #f4f7f5;--bg-page-gradient: radial-gradient(circle at 50% 10%, #ffffff 0%, #edf3ef 55%, #e2ece6 100%);--bg-card: rgba(255, 255, 255, .94);--bg-card-border: rgba(11, 79, 48, .16);--bg-card-border-gold: rgba(200, 150, 38, .35);--klok-green: #0b4f30;--klok-green-bright: #006837;--klok-green-dark: #073822;--klok-green-gradient: linear-gradient(135deg, #006837 0%, #0b4f30 60%, #073822 100%);--klok-gold: #c89626;--klok-gold-light: #e5b342;--klok-gold-gradient: linear-gradient(135deg, #f7e089 0%, #c89626 60%, #9e7116 100%);--text-main: #0f1c15;--text-muted: #526359;--text-green: #0b4f30;--text-gold: #9e7116;--font-serif: "Cinzel", "Georgia", serif;--font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--radius-lg: 20px;--radius-md: 14px;--shadow-soft: 0 8px 24px rgba(11, 79, 48, .08);--shadow-card: 0 4px 20px rgba(0, 0, 0, .06);--shadow-green-glow: 0 0 25px rgba(0, 104, 55, .35);--shadow-gold-glow: 0 0 25px rgba(200, 150, 38, .35)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}body{background-color:var(--bg-page);background-image:var(--bg-page-gradient);color:var(--text-main);font-family:var(--font-sans);min-height:100vh;min-height:-webkit-fill-available;display:flex;flex-direction:column;align-items:center;overflow-x:hidden;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(rgba(11,79,48,.05) 1px,transparent 0);background-size:24px 24px;pointer-events:none;z-index:1}.app-container{width:100%;max-width:480px;padding:18px 20px 40px;display:flex;flex-direction:column;align-items:center;gap:20px;z-index:2;position:relative}.app-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1.5px solid rgba(11,79,48,.15)}.brand-badge{display:flex;align-items:center;gap:10px}.brand-title{font-family:var(--font-serif);font-size:1.25rem;font-weight:800;letter-spacing:1.5px;color:var(--klok-green);text-transform:uppercase}.header-actions{display:flex;gap:10px}.icon-btn{background:#fff;border:1.5px solid var(--bg-card-border);color:var(--klok-green);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.15rem;transition:all .2s ease;box-shadow:0 2px 8px #0000000f}.icon-btn:hover,.icon-btn:active{background:var(--klok-green);color:#fff;transform:scale(1.06);border-color:var(--klok-gold);box-shadow:0 4px 14px #0b4f3040}.icon-btn.muted{opacity:.45;filter:grayscale(.8)}.brewery-pill-container{width:100%;display:flex;background:#fff;border:1.5px solid rgba(11,79,48,.2);border-radius:30px;padding:4px;gap:4px;box-shadow:var(--shadow-card)}.brewery-tab{flex:1;padding:10px 14px;border-radius:24px;border:none;background:transparent;color:var(--text-muted);font-family:var(--font-serif);font-size:.85rem;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:all .25s ease;display:flex;align-items:center;justify-content:center;gap:6px}.brewery-tab.active{background:var(--klok-green-gradient);color:#fff;font-weight:800;box-shadow:0 2px 10px #0b4f3059;border:1px solid var(--klok-gold-light)}.compass-stage{position:relative;width:320px;height:320px;margin:10px 0 15px;display:flex;align-items:center;justify-content:center}@media (min-width: 400px){.compass-stage{width:340px;height:340px}}.target-aura{position:absolute;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(11,79,48,.2) 0%,rgba(200,150,38,.15) 50%,transparent 70%);opacity:0;transform:scale(.85);transition:all .4s ease;pointer-events:none;z-index:1}.target-aura.locked{opacity:1;transform:scale(1.15);animation:pulseAura 1.4s infinite alternate ease-in-out}@keyframes pulseAura{0%{transform:scale(1.08);opacity:.7;filter:drop-shadow(0 0 15px #006837)}to{transform:scale(1.22);opacity:1;filter:drop-shadow(0 0 35px #c89626)}}.compass-dial{position:absolute;width:100%;height:100%;border-radius:50%;border:3.5px solid var(--klok-gold);box-shadow:inset 0 0 25px #0b4f3014,0 8px 30px #0b4f301f;background:radial-gradient(circle,#fff,#f6f9f7 70%,#e9f2ec);z-index:2;transition:transform .15s cubic-bezier(.2,.9,.3,1)}.cardinal-label{position:absolute;font-family:var(--font-serif);font-weight:800;font-size:.95rem;color:var(--klok-green);text-shadow:0 1px 2px rgba(255,255,255,.8);transform:translate(-50%,-50%)}.cardinal-label.north{top:18px;left:50%;color:var(--klok-green-bright);font-size:1.2rem;font-weight:900}.cardinal-label.east{top:50%;right:12px;transform:translate(50%,-50%)}.cardinal-label.south{bottom:8px;left:50%}.cardinal-label.west{top:50%;left:18px}.pointer-container{position:absolute;width:100%;height:100%;z-index:4;pointer-events:none;transition:transform .12s cubic-bezier(.2,.9,.3,1)}.pointer-arrow{position:absolute;top:-12px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 4px 12px rgba(11,79,48,.4))}.pointer-head{width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:34px solid var(--klok-green-bright);filter:drop-shadow(0 0 6px rgba(11,79,48,.6));position:relative}.pointer-head:after{content:"";position:absolute;top:10px;left:-8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:18px solid var(--klok-gold)}.pointer-tail{width:4px;height:16px;background:var(--klok-green-gradient);border-radius:2px}.center-emblem{position:absolute;width:210px;height:210px;z-index:5;border-radius:50%;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 24px #0b4f302e}.center-emblem:active{transform:scale(.94)}.center-emblem img,.center-emblem svg{width:100%;height:100%;display:block}.target-status-pill{position:absolute;bottom:-15px;background:#fff;border:1.5px solid var(--klok-green);border-radius:20px;padding:7px 18px;font-family:var(--font-serif);font-size:.85rem;font-weight:800;letter-spacing:1px;color:var(--klok-green);box-shadow:0 4px 16px #0000001a;z-index:6;display:flex;align-items:center;gap:8px;transition:all .3s ease}.target-status-pill.locked{background:var(--klok-green-gradient);color:#fff;border-color:var(--klok-gold-light);box-shadow:0 0 20px #00683780;transform:scale(1.05)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--klok-green-bright);box-shadow:0 0 6px var(--klok-green-bright)}.target-status-pill.locked .status-dot{background:var(--klok-gold-light);box-shadow:0 0 8px #fff;animation:blink .8s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.stats-grid{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:10px}.stat-card{background:var(--bg-card);border:1.5px solid var(--bg-card-border);border-radius:var(--radius-md);padding:16px 14px;display:flex;flex-direction:column;gap:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden;box-shadow:var(--shadow-card)}.stat-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--klok-green-gradient)}.stat-label{font-size:.74rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:700;display:flex;align-items:center;gap:5px}.stat-value{font-size:1.35rem;font-weight:800;color:var(--klok-green);font-family:var(--font-sans)}.stat-value.gold{color:var(--klok-green-bright)}.stat-sub{font-size:.78rem;color:var(--text-muted)}.lore-card{width:100%;background:#fff;border:1.5px solid var(--bg-card-border-gold);border-radius:var(--radius-md);padding:16px;display:flex;flex-direction:column;gap:8px;position:relative;cursor:pointer;transition:border-color .2s ease,transform .2s ease;box-shadow:var(--shadow-card)}.lore-card:hover{border-color:var(--klok-gold);transform:translateY(-2px)}.lore-header{display:flex;justify-content:space-between;align-items:center}.lore-title{font-family:var(--font-serif);font-size:.82rem;font-weight:800;letter-spacing:1px;color:var(--klok-green);text-transform:uppercase;display:flex;align-items:center;gap:6px}.lore-quote{font-style:italic;font-size:.94rem;line-height:1.45;color:var(--text-main)}.temp-gauge-card{width:100%;background:var(--bg-card);border:1.5px solid var(--bg-card-border);border-radius:var(--radius-md);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-card)}.temp-info{display:flex;flex-direction:column;gap:2px}.temp-title{font-size:.74rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:700}.temp-status{font-family:var(--font-serif);font-weight:700;font-size:.95rem;color:var(--klok-green)}.temp-badge{background:var(--klok-gold-gradient);border:1px solid var(--klok-gold);padding:6px 14px;border-radius:10px;font-size:1.15rem;font-weight:800;color:#120305;display:flex;align-items:center;gap:6px;box-shadow:0 2px 10px #c8962640}.travel-strip{width:100%;display:flex;justify-content:space-around;background:#fff;border:1.5px solid var(--bg-card-border);border-radius:var(--radius-md);padding:12px 10px;box-shadow:var(--shadow-card)}.travel-item{display:flex;flex-direction:column;align-items:center;gap:3px}.travel-icon{font-size:1.1rem}.travel-time{font-size:.88rem;font-weight:700;color:var(--klok-green)}.travel-label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;font-weight:600}.simulator-panel{width:100%;background:#fff;border:1.5px dashed var(--klok-gold);border-radius:var(--radius-md);padding:12px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-card)}@media (hover: none) and (pointer: coarse),(max-width: 600px){.simulator-panel{display:none!important}}.sim-header{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--text-muted);font-weight:600}.sim-slider-container{display:flex;align-items:center;gap:10px}.sim-slider{flex:1;-webkit-appearance:none;height:6px;border-radius:3px;background:#0b4f3026;outline:none}.sim-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--klok-green-bright);cursor:pointer;box-shadow:0 0 8px #0b4f3066}.modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0b1c1499;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;transition:opacity .3s ease}.modal-backdrop.hidden{opacity:0;pointer-events:none}.permission-modal{width:100%;max-width:380px;background:#fff;border:2px solid var(--klok-gold);border-radius:var(--radius-lg);padding:26px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;box-shadow:0 10px 40px #0003,0 0 25px #c8962633}.modal-crest{width:90px;height:90px}.modal-title{font-family:var(--font-serif);font-size:1.35rem;font-weight:800;letter-spacing:1px;color:var(--klok-green)}.modal-desc{font-size:.9rem;color:var(--text-muted);line-height:1.45}.btn-primary{width:100%;padding:14px 20px;border-radius:30px;border:none;background:var(--klok-green-gradient);color:#fff;font-family:var(--font-serif);font-size:1rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 16px #0b4f3059;border:1px solid var(--klok-gold-light);transition:all .2s ease}.btn-primary:active{transform:scale(.97)}.btn-secondary{background:transparent;border:none;color:var(--text-muted);font-size:.82rem;text-decoration:underline;cursor:pointer;padding:4px}.toast-msg{position:fixed;top:24px;background:#fff;border:1.5px solid var(--klok-green);color:var(--klok-green);padding:10px 22px;border-radius:30px;font-size:.85rem;font-weight:700;box-shadow:0 8px 25px #0000001f;z-index:200;transform:translateY(-80px);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.toast-msg.show{transform:translateY(0);opacity:1}.app-footer{margin-top:15px;text-align:center;font-size:.75rem;color:var(--text-muted);display:flex;flex-direction:column;gap:4px}