/* WalkWicklow — in-field walk PWA styles */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100vh; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: #F4EFE0; color: #1B3A2D; }
body { display: flex; flex-direction: column; }

.bar { background: #2E4A3A; color: #F4EFE0; padding: .8rem 1rem; display: flex; align-items: center; gap: .8rem; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.bar h1 { margin: 0; font: 600 1rem/1.2 Georgia, serif; flex: 1; }
.bar .gold { color: #B89A4F; font-style: italic; font-size: .85rem; }
.bar .back { color: #F4EFE0; text-decoration: none; font-size: .9rem; padding: .4rem .6rem; border: 1px solid rgba(244,239,224,.3); border-radius: 4px; }

#map { flex: 1; min-height: 50vh; background: #C8C2A8; }

.player { background: #FFFFFF; padding: .9rem 1rem 1.2rem; border-top: 2px solid #B89A4F; box-shadow: 0 -4px 14px rgba(0,0,0,.08); }
.player__chapter-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; font: 700 .7rem/1 sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6B6B5C; }
.player__chapter-meta strong { color: #B89A4F; }
.player__title { font: 600 1.1rem/1.25 Georgia, serif; color: #1B3A2D; margin: 0 0 .3rem; }
.player__intro { color: #6B6B5C; font-size: .82rem; margin: 0 0 .9rem; line-height: 1.4; }
.player__controls { display: flex; align-items: center; gap: .6rem; }
.player__btn { background: #2E4A3A; color: #F4EFE0; border: 0; border-radius: 999px; width: 56px; height: 56px; font-size: 1.5rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.player__btn--ghost { background: transparent; color: #6B6B5C; border: 1px solid #DDD3C2; width: 44px; height: 44px; font-size: 1.05rem; }
.player__btn:active { transform: scale(.95); }
.player__progress { flex: 1; }
.player__bar { height: 6px; background: #EDE5D8; border-radius: 999px; overflow: hidden; }
.player__bar-fill { height: 100%; background: linear-gradient(90deg, #2E4A3A, #B89A4F); width: 0%; transition: width .3s; }
.player__time { display: flex; justify-content: space-between; font: 500 .72rem/1 monospace; color: #6B6B5C; margin-top: .3rem; }

.dist-banner { background: #B89A4F; color: #1B3A2D; padding: .55rem 1rem; font: 700 .85rem/1 sans-serif; text-align: center; }
.dist-banner.is-near { background: #1B3A2D; color: #B89A4F; }

.start-overlay { position: fixed; inset: 0; background: rgba(20,36,28,.96); color: #F4EFE0; display: flex; align-items: center; justify-content: center; z-index: 999; padding: 2rem; }
.start-overlay__inner { max-width: 420px; text-align: center; }
.start-overlay h2 { font: 600 1.5rem/1.2 Georgia, serif; color: #B89A4F; margin: 0 0 .5rem; }
.start-overlay p { font-size: .95rem; line-height: 1.55; margin: 0 0 1.4rem; }
.start-overlay button { background: #B89A4F; color: #1B3A2D; border: 0; padding: 1rem 2rem; font: 700 1rem/1 sans-serif; text-transform: uppercase; letter-spacing: .08em; border-radius: 999px; cursor: pointer; width: 100%; }
.start-overlay__note { font-size: .78rem; color: #C8C2A8; margin-top: 1rem; }

.toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: #2E4A3A; color: #F4EFE0; padding: .8rem 1.2rem; border-radius: 8px; font: 600 .9rem/1.3 sans-serif; max-width: 90%; box-shadow: 0 4px 14px rgba(0,0,0,.2); z-index: 100; opacity: 0; transition: opacity .3s; pointer-events: none; }
.toast.is-visible { opacity: 1; }

.you-marker { width: 18px; height: 18px; background: #B89A4F; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(184,154,79,.4); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(184,154,79,.4); } 50% { box-shadow: 0 0 0 12px rgba(184,154,79,0); } }
.wp-marker { background: #2E4A3A; color: #B89A4F; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #B89A4F; display: flex; align-items: center; justify-content: center; font: 700 .85rem/1 sans-serif; }
.wp-marker.is-played { opacity: .5; }
