/* Extracted styles from index.html for maintainability and markdown theming */

html, body { height: 100%; margin: 0; background: #0c0c0c; color: #eee; font: 14px/1.3 'Source Code Pro', monospace; }
#app { position: fixed; inset: 0; }

/* Tooltip */
#tooltip { position: fixed; pointer-events: none; z-index: 20; padding: 6px 8px; background: rgba(0,0,0,.65); color: #fff; border-radius: 6px; transform: translate(10px,10px); opacity: 0; transition: opacity .12s ease; white-space: nowrap; font-weight: 600; font-size: 13px; border: 1px solid rgba(255,255,255,.08); }

/* Lat/Lon HUD */
#latlon { position: fixed; right: 12px; bottom: 12px; z-index: 10000; padding: 6px 8px; border-radius: 8px; background: #0d0d0d; color: #fff; border: 1px solid rgba(255,150,0,.45); font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .2px; }

/* Rotation hint */
#rotate-hint { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); color: #cfcfcf; font: 13px/1.3 'Source Code Pro', monospace; opacity: 0.9; pointer-events: none; }

/* Top HUD panels */
#hud-left, #hud-right { position: fixed; top: 12px; z-index: 10000; max-width: 34vw; }
#hud-left { left: 12px; } #hud-right { right: 12px; }
.hud-panel { padding: 10px 12px; border-radius: 10px; background: #0d0d0d; color: #fff; border: 1px solid var(--accent, rgba(255,150,0,.45)); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.hud-title { color: #cfcfcf; font-weight: 700; margin-bottom: 6px; font-size: 13px; }
.hud-body { font-size: 13px; line-height: 1.35; }

/* CSS2D overlay */
.labels { position: absolute; inset: 0; pointer-events: none; }

/* Marker wrapper */
.marker { position: relative; width: 0; height: 0; pointer-events: none; }

/* Bubble */
.bubble { position: absolute; left: 0; top: 0; box-sizing: border-box; background: #111; color: #fff; border: 2px solid var(--accent, #ff9600); border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.4); pointer-events: auto; opacity: .98; will-change: transform, width, height, opacity; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease; z-index: 1; --bubble-shift: 10px; }
.bubble--mini { padding: 8px 10px; font-size: 15px; transform: translate(-50%, -12px); }
.bubble--expanded { padding: 10px 12px; font-size: 14px; }
/* Add space between title and scrollable content only when expanded */
.bubble--expanded .bubble__inner { margin-top: 10px; }
.bubble .back-btn, .bubble .close-btn { position: absolute; top: 4px; right: 6px; background: none; border: none; color: #aaa; font-size: 14px; cursor: pointer; }
.bubble .back-btn:hover, .bubble .close-btn:hover { color: #fff; }
.bubble .back-btn { right: 26px; }

/* Centered overlay bubble */
.centered-bubble { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); z-index: 9999; overflow: hidden; }
.centered-bubble .bubble__inner { overscroll-behavior: contain; scrollbar-gutter: stable both-edges; padding-right: 5px; }
.centered-bubble .bubble__inner { scrollbar-width: thin; scrollbar-color: var(--accent, #ff9600) transparent; }
.centered-bubble .bubble__inner::-webkit-scrollbar { width: 10px; }
.centered-bubble .bubble__inner::-webkit-scrollbar-track { background: transparent; border-radius: 8px; }
.centered-bubble .bubble__inner::-webkit-scrollbar-thumb { background-color: var(--accent, #ff9600); border-radius: 8px; border: 2px solid rgba(0,0,0,0.25); }
.centered-bubble .bubble__inner:hover::-webkit-scrollbar-thumb { background-color: var(--accent, #ff9600); }

/* Markdown rendering defaults */
.centered-bubble .body { color: #e5e5e5; }
.centered-bubble .body h1, .centered-bubble .body h2, .centered-bubble .body h3, .centered-bubble .body h4 { color: #fff; margin: 0.6em 0 0.35em; line-height: 1.2; }
.centered-bubble .body p { margin: 0.5em 0; }
.centered-bubble .body pre { background: #0d0d0d; padding: 10px; border-radius: 8px; overflow: auto; border: 1px solid rgba(255,255,255,.08); }
.centered-bubble .body code { background: rgba(255,255,255,.06); padding: 1px 4px; border-radius: 4px; }
.centered-bubble .body a { color: #ff9600; text-decoration: none; }
.centered-bubble .body a:hover { text-decoration: underline; }

/* Images inside bubbles should be responsive */
.bubble img { max-width: 100%; height: auto; }

/* Blog index list styling */
.centered-bubble .blog-list { list-style: none; margin: 0; padding-left: 0; }
.centered-bubble .blog-list li { margin: 6px 0; }
.centered-bubble .blog-list a { font-size: 15px; color: #ff9600; text-decoration: none; }
.centered-bubble .blog-list a:hover { text-decoration: underline; }
.centered-bubble .blog-list .date { color: #cfcfcf; font-family: 'Source Code Pro', monospace; margin-right: 8px; }

.centered-bubble .press-list { list-style: none; margin: 0; padding-left: 0; }
.centered-bubble .press-list li { margin: 6px 0; }
.centered-bubble .press-list a { font-size: 15px; color: #ff9600; text-decoration: none; }
.centered-bubble .press-list a:hover { text-decoration: underline; }
.centered-bubble .press-list .date { color: #cfcfcf; font-family: 'Source Code Pro', monospace; margin-right: 8px; }