:root {
  --bg:#0c0d0f; --fg:#f5f7fa; --muted:#a9b3bd; --card:#15181c; --accent:#c8a46a;
  --btn:#c8a46a; --btnText:#0b0b0c;
  --btnAlt:#5cc17a;
  --danger:  #e53935;  /* red (wrong)   */
  --success: #43a047;  /* green (right) */
  --info:    #1e88e5;  /* blue (unknown)*/
  --info-teal: #00897b;
  --popup-bg:rgba(17,24,39,.92);
}
* { box-sizing: border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; }
.view { display:none; height:100%; }
.view.active { display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.7rem 1rem; background:linear-gradient(135deg,#565d63,#2f3438); border-bottom:1px solid #222; }
.topbar h1 { margin:0; font-size:1rem; }
button { font:inherit; cursor:pointer; }
.ghost { background:transparent; color:var(--fg); border:1px solid #3a3f45; padding:.4rem .6rem; border-radius:.5rem; }
.top-actions { display:flex; align-items:center; gap:.5rem; }
.lang-btn {
  background:#222; color:#fff; border:1px solid #3a3f45;
  padding:.35rem .5rem; border-radius:.5rem; font-weight:700; line-height:1;
}
.home .hero { background:transparent; display:grid; place-items:center; }
.hero-inner { backdrop-filter:blur(2px); background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); padding:1rem; border-radius:1rem; width:min(720px,92vw); margin-top:1rem; }
.subtitle { opacity:.9; margin:.2rem 0 1rem; }
.logos { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:.75rem; }
.logos img { height:40px; }
.home-buttons { display:grid; grid-template-columns:1fr; gap:.6rem; }
.route-btn { background:var(--btn); color:var(--btnText); border:none; border-radius:.6rem; padding:.9rem 1rem; font-weight:700; text-align:center; }
/* Match hero-inner’s horizontal padding so Results aligns with route rows */
.home-cta {
  width: min(720px, 92vw);
  margin: 0 auto 1rem auto;
  padding: .75rem 1rem 0;   /* top .75rem, left/right 1rem, bottom 0 */
}
.results-btn { width:100%; background:var(--btnAlt); color:var(--btnText); border:none; border-radius:.6rem; padding:.9rem 1rem; font-weight:800; text-align:center; }
.home-sections { padding:1rem; display:grid; gap:1rem; }
.card { background:var(--card); border:1px solid #222; border-radius:.8rem; padding:.8rem; }
#map { flex:1; min-height:0; }
/* --- Stabilize HUD buttons in bottom-right --- */
/* Lock HUD to bottom-right and decouple item widths from the label */
.hud{
  position: fixed;
  bottom: 12px;
  right: 12px;
  display: grid;            /* grid avoids stretch side-effects */
  justify-items: end;       /* right-align each child */
  row-gap: 8px;
  z-index: 10;
  pointer-events: none;     /* map stays clickable except on items below */
}

/* Make only the children clickable */
.hud > *{ pointer-events: auto; }

/* Fix button size so label width can't resize them */
.hud > button{
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  white-space: nowrap;
  margin: 0;
}

/* Keep explicit order (optional, but helps stability) */
#btn-center       { order: 0; }
#btn-route-bounds { order: 1; }
#btn-rotate-reset { order: 2; }
#btn-style        { order: 3; }
.notify             { order: 4; }

.hud-label { background:var(--card); color:var(--fg); border:1px solid #333; border-radius:.6rem; padding:.25rem .5rem; text-align:center; font-size:.8rem; opacity:.95; }
dialog { border:1px solid #2b2f36; background:var(--popup-bg); color:var(--fg); border-radius:.8rem; padding:0; max-width:520px; width:calc(100% - 2rem); }
.dlg-head { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; border-bottom:1px solid #2b2f36; }
.dlg-head .x { background:transparent; border:none; color:var(--fg); font-size:1rem; }
.dlg-body { padding:1rem; }
.options { display:grid; gap:.5rem; padding:1rem; }
.options button { text-align:left; padding:.6rem .7rem; background:#111827; border:1px solid #20242b; color:var(--fg); border-radius:.5rem; }
.results { padding:1rem; display:grid; gap:.75rem; }
.user-marker { width:32px; height:32px; position:relative; transform-origin:50% 50%; }
.user-inner svg { width:100%; height:100%; fill:#60a5fa; stroke:#fff; stroke-width:1.5; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.cp{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  color: #fff;                  /* white symbol */
  font-weight: 700;
  font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,.35);
  user-select: none;
}
/* Inner sign */
.cp-icon{
  display: inline-block;   
  line-height: 1;
  font-size: 16px;
  transform: translateY(-1px);  /* optical centering */
  transform-origin: center center;  /* important for scaling */
  transition: transform 120ms ease;
  pointer-events: none;
}
.info {
  width: 28px;               /* match .cp size */
  height: 28px;              /* match .cp size */
  border-radius: 6px;        /* square with slight rounding */
  background: var(--info-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,.35);
  user-select: none;
}

.info .cp-icon{
  line-height: 1;
  font-size: 16px;
  transform: translateY(-1px);
  pointer-events: none;
}
.muted { opacity:.8; }
.maplibregl-popup-content { background:#0f1115; color:#fff; border:1px solid #333; border-radius:.5rem; }
.maplibregl-popup-tip { border-top-color:#0f1115 !important; }
.toast { position:fixed; bottom:12px; left:12px; right:12px; background:#111; color:#fff; border:1px solid #333; padding:10px; border-radius:8px; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,.35); font-size:14px; }
.disabled { opacity:.5; pointer-events:none; }
.hidden { display:none !important; }
.top-actions { display:flex; align-items:center; gap:.5rem; }

/* --- Button system (keeps current sizes; just visuals) --- */
.btn {
  --btn-bg: var(--btn, #c8a46a);
  --btn-fg: var(--btnText, #0b0b0c);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: none;
  border-radius: .6rem;
  padding: .55rem .9rem;         /* does not force width/height */
  font-weight: 700;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn--primary {
  --btn-bg: var(--btnAlt, #5cc17a); /* same hue family as Results */
  --btn-fg: var(--btnText, #0b0b0c);
}
.btn--accent {
  --btn-bg: #2c3440;  /* matches your topbar/card tones */
  --btn-fg: #fff;
  border: 1px solid #3a4450;
}

/* Route complete: floating, non-blocking overlay */
.finish {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;       /* full viewport */
  display: flex;
  align-items: center;
  justify-content: center;                     /* center the card */
  padding: 1rem;
  background: transparent;                     /* ← remove the gray layer */
  z-index: 20;
  pointer-events: none;                        /* let map receive clicks */
}
.finish.hidden { display: none; }

.finish > div {
  position: relative;    
  width: min(520px, 92vw);
  background: #1f2937;
  border: 1px solid #334155;
  border-radius: 1rem;
  padding: 1.1rem 1rem 1rem;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  animation: pop-in .22s ease-out;
  pointer-events: auto;                        /* the card is clickable */
}

/* keep the celebrate/icon and pop-in keyframes you already have */


.finish .celebrate {
  display: grid;
  place-items: center;
  margin-bottom: .4rem;
}
.finish .celebrate svg {
  width: 64px; height: 64px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.finish #finish-title {
  display: block;
  font-size: 1.25rem;
  margin: .2rem 0 .6rem;
}

.finish #btn-finish-to-home {
  margin-top: .2rem;
}

/* Close button on big panel */
.finish .finish-x {
  position: absolute;
  right: .5rem; top: .5rem;
  background: transparent; border: 0;
  color: #cbd5e1; font-size: 20px; line-height: 1;
  cursor: pointer;
}
.finish .finish-x:hover { color: #fff; }

/* Small variation for buttons (keeps your btn system) */
.btn--sm { padding: .35rem .6rem; font-weight: 700; }

/* Mini completion banner at bottom */
.finish-mini {
  position: fixed;
  left: 50%; bottom: 1rem;
  transform: translateX(-50%);
  background: #1f2937;
  border: 1px solid #334155;
  border-radius: .75rem;
  padding: .45rem .6rem;
  display: flex; align-items: center; gap: .5rem;
  z-index: 12;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.finish-mini.hidden { display: none; }

.finish-mini .mini-x {
  background: transparent; border: 0;
  color: #cbd5e1; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 .25rem;
}
.finish-mini .mini-x:hover { color: #fff; }

/* tiny entrance */
@keyframes pop-in {
  from { transform: translateY(6px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* Disabled buttons: clear visual difference */
.btn[disabled],
.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
  pointer-events: none;           /* no hover/active */
}

/* Optional: slightly mute primary when disabled (keeps contrast good) */
.btn--primary[disabled],
.btn--primary:disabled {
  --btn-bg: #a0c7b1;              /* muted green */
  --btn-fg: #0b0b0c;
}

/* Optional: slightly mute accent when disabled (if you ever disable it) */
.btn--accent[disabled],
.btn--accent:disabled {
  --btn-bg: #3a4450;
  --btn-fg: #dfe6ee;
}

/* Top-right × for dialogs (info + question for consistency) */
.dlg-x{
  position:absolute; right:.5rem; top:.5rem;
  background:transparent; border:0; color:#cbd5e1;
  font-size:20px; line-height:1; cursor:pointer;
}
.dlg-x:hover{ color:#fff; }

/* Info dialog title spacing */
#info-title {
  margin: .8rem .8rem .4rem;  /* top/right/left/bottom */
  line-height: 1.25;
}

#route-info-title {
  margin: .8rem .8rem .4rem;
  line-height: 1.25;
}

/* Route info dialog body spacing (text from routes.xx.json -> "info") */
#route-info-body{
  padding: 0.8rem 0.8rem 0.9rem; /* left/right margins + bottom space */
}

/* Make paragraph spacing consistent inside the route info dialog */
#route-info-body p{
  margin: 0;
  line-height: 1.4;
}

/* Info dialog: single-flow layout where image floats right and text wraps */
.info-flow { position: relative;
  padding: 0.8rem;
 }

/* Base card look for the media block */
.info-media{
  margin: 0 0 0.6rem 0.8rem;   /* top 0, right 0.8, bottom 0.6, left 0.8 */
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: .5rem;
  overflow: hidden;
}

/* Float the image so text wraps around it */
.info-media.float-right{
  float: right;
  width: min(40%, 320px);      /* responsive: max ~40% or 320px */
  margin: 0 0 .5rem .8rem;     /* gap to the left/bottom */
}

/* Natural image height for proper wrap (no fixed 220px) */
.info-media img{
  display:block;
  width:100%;
  height:auto;                 /* ← important: let it size naturally */
  background:#0b1220;          /* backdrop while loading / placeholder */
}

/* Optional caption */
.info-media figcaption{
  padding:.4rem .6rem; 
  font-size:.875rem;
}

/* Keep your existing text spacing */
.info-text {
  text-align: justify;
  padding: 0.4rem 0.2rem;   /* inner breathing room */
}
.info-text p{ margin: .25rem 0 .5rem; }

/* Clear the float so the container grows to include the image */
.clearfix { clear: both; }

/* On narrow screens, stack image above text (no float) */
@media (max-width: 720px){
  .info-media.float-right{
    float: none;
    width: 100%;
    margin: 0 0 .6rem 0;
  }
}

/* Center-on-me button SVG fit (icon-only button) */
#btn-center svg{
  width: 20px; height: 20px; display:block;
}

/* Center-on-me: fixed size + visible icon */
#btn-center {
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;   /* prevent resize */
  display: grid; place-items: center;
  background: rgba(31, 41, 55, .92);   /* dark slate, semi-opaque */
  color: #fff;                         /* SVG uses currentColor, so icon is white */
  border: 1px solid #334155;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  padding: 0;
  cursor: pointer;
}
#btn-center:hover { filter: brightness(1.06); }
#btn-center:active { transform: translateY(1px); }
#btn-center:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Row that holds [Route Button] [ ℹ ] */
/* Make all route rows uniform */
/* Route rows as a 2-column grid: [main button][ℹ 44px] */
.route-row {
  display: grid;
  grid-template-columns: 1fr 44px;  /* left grows, right fixed to ℹ size */
  gap: .5rem;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;                   /* center the row block */
  align-items: stretch;
}

/* Results button should take both columns (same total width as [Route + ℹ]) */
.route-row .results-btn {
  grid-column: 1 / -1;
}

/* Route button stretches to fill leftover space */
.route-row .route-btn {
  flex: 1;                  /* take all remaining space */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}


/* Route button: keep your existing styles; this only lets us place a ✓ inside neatly */
.route-btn {
  display: flex; 
  align-items: center; 
  justify-content: space-between; /* text on left, ✓ on right */
  gap: .5rem;
}

/* ✓ done badge inside the route button */
.route-done-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px; height: 24px;
  padding: 0 .25rem;
  border-radius: .5rem;
  background: var(--success, #43a047);
  color: #0b0b0c;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* Square teal ℹ — same look as map info marker */
.route-info-btn {
  width: 44px; /* square width; height matches row via align-items:stretch */
  border-radius: 8px;
  background: var(--info-teal, #00897b);
  color: #fff;
  border: 1px solid #2d615a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  cursor: pointer;
}
.route-info-btn:hover { filter: brightness(1.05); }
.route-info-btn:active { transform: translateY(1px); }

#btn-route-bounds,
#btn-rotate-reset,
#btn-style{
  width: 44px; height: 44px; min-width:44px; min-height:44px;
  display:grid; place-items:center;
  padding:0;
  /* (optional) same background/border as center */
  background: rgba(31,41,55,.92);
  color: #fff;
  border: 1px solid #334155;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
#btn-route-bounds svg,
#btn-rotate-reset svg,
#btn-style svg{ width:20px; height:20px; display:block; }

/* Flag strip in the header */
#lang-switcher { display:flex; align-items:center; gap:.35rem; }
#lang-switcher button {
  background: transparent;
  border: 1px solid #3a3f45;
  padding: 2px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 0;
}
#lang-switcher img {
  width: 22px;
  height: 16px;
  display:block;
  border-radius: 3px;
}
#lang-switcher button.active {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
}

/* (Optional) hide the emoji fallback on narrow screens, keep flags only */
@media (min-width: 380px) {
  .lang-btn { display: none; }
}

/* Full landing view background (covers Route + Results sections) */
#view-home{
  min-height: 100vh; /* ensure it fills the screen */
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("Images/background.png"); /* keep the exact 'Images' case */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- Sound/Vibration mini panel --- */
.notify{
  background: rgba(31,41,55,.92);
  color: #fff;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 6px 8px;
  display: grid;
  gap: 6px;
  z-index: 11;            /* above the map, below finish banners */
  pointer-events: auto;   /* clickable (your .hud sets pointer-events: none) */
}

.notify-row{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1;
}

.notify-row input{
  width: 16px; height: 16px;
}

/* --- Landing page funding footer (logos + reference) --- */
.home-footer{
  margin-top: auto;              /* pushes footer to bottom when content is short */
  padding: 16px 0 20px;
}

.home-footer-inner{
  width: min(720px, 92vw);
  margin: 0 auto;
  padding: 0 16px;               /* side margins so it doesn’t touch edges */
  text-align: center;
}

.home-footer-logos{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 12px;
}

.home-footer-text{
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0.9;
}