*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: system-ui, -apple-system, sans-serif;
      display: flex;
      flex-direction: column;
      height: 100dvh;
      overflow: hidden;
      background: #0f0f1a;
      color: #e0e0e0;
    }

    /* ── Header ── */
    header {
      background: #1a1a2e;
      border-bottom: 1px solid #2a2a4a;
      padding: 0 12px;
      height: 52px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      z-index: 1000;
    }
    header h1 {
      font-size: 0.95rem; font-weight: 700; color: #fff;
      white-space: nowrap; letter-spacing: 0.02em; flex-shrink: 0;
    }

    /* Settings pill */
    .settings-pill {
      display: flex; align-items: center; gap: 6px;
      padding: 5px 10px; border-radius: 20px;
      background: #12122a; border: 1px solid #333;
      color: #ccc; font-size: 0.75rem; cursor: pointer;
      white-space: nowrap; flex-shrink: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis;
      transition: border-color 0.15s;
    }
    .settings-pill:hover { border-color: #6ab0f5; color: #eee; }
    .settings-pill .pill-icon { font-size: 0.85rem; flex-shrink: 0; }

    .header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; flex-wrap: nowrap; }
    .btn-logout { flex-shrink: 0; }
    .btn-logout { background: transparent; border: 1px solid #444; color: #aaa; padding: 5px 9px; font-size: 1rem; line-height: 1; }
    .btn-logout:hover { border-color: #e55; color: #e55; }
    .coins-badge { color: #f0c040; font-size: 0.78rem; padding: 4px 7px; background: rgba(240,192,64,0.08); border: 1px solid rgba(240,192,64,0.3); border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
    .coins-badge.gems-clickable { cursor: pointer; }
    .btn-profile { background: none; border: 1px solid #444; border-radius: 50%; width: 32px; height: 32px; font-size: 1rem; cursor: pointer; color: #ccc; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .btn-profile:hover { background: #1e1e3a; border-color: #6ab0f5; }
    .quizzes-dropdown { position: relative; display: none; }
    .quizzes-dropdown.visible { display: block; }
    .quizzes-btn { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; padding: 5px 9px; background: #1e1e3a; color: #ccc; border: 1px solid #444; border-radius: 4px; cursor: pointer; white-space: nowrap; }
    .quizzes-btn:hover { border-color: #6ab0f5; color: #eee; }
    .quizzes-btn-label { display: inline; }
    .quizzes-menu { position: absolute; right: 0; top: calc(100% + 4px); background: #1a1a2e; border: 1px solid #333; border-radius: 6px; min-width: 180px; z-index: 2000; box-shadow: 0 4px 16px rgba(0,0,0,.4); display: none; }
    .quizzes-menu.open { display: block; }
    .quizzes-menu-item { padding: 8px 12px; font-size: 0.78rem; color: #ccc; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .quizzes-menu-item:hover { background: #2a2a4a; color: #fff; }
    @media (max-width: 480px) { .quizzes-btn-label { display: none; } #pillLabel { display: none; } }

    .btn {
      padding: 6px 14px; border: none; border-radius: 7px; cursor: pointer;
      font-size: 0.8rem; font-weight: 600; transition: opacity 0.15s, transform 0.1s;
      white-space: nowrap;
    }
    .btn:active { transform: scale(0.97); }
    .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
    .btn-primary  { background: #e94560; color: #fff; }
    .btn-secondary { background: #2a2a4a; color: #ccc; border: 1px solid #333; }
    .btn-quiz     { background: #7a5c2e; color: #fff8ee; }
    .btn-icon     { padding: 6px 10px; font-size: 1rem; }

    /* ── Map area ── */
    .map-wrap {
      position: relative;
      flex: 1;
      min-height: 0;
      transition: flex 0.25s ease;
    }
    #map { width: 100%; height: 100%; }

    /* When quiz is open: shrink map to fixed strip, quiz flows below */
    body.quiz-open {
      overflow: hidden;
    }
    body.quiz-open .map-wrap {
      flex: 0 0 38vh;
      min-height: 38vh;
    }

    /* ── Auth overlay ── */
    #auth-overlay {
      position: fixed; inset: 0;
      background: #0f0f1a;
      display: flex; align-items: center; justify-content: center;
      z-index: 9999;
    }
    #auth-overlay.hidden { display: none; }

    .auth-card {
      background: #1a1a2e;
      border: 1px solid #2a2a4a;
      border-radius: 12px;
      padding: 32px 28px;
      width: 100%; max-width: 360px;
    }
    .auth-card h2 {
      color: #fff; font-size: 1.25rem; font-weight: 700;
      margin-bottom: 6px; text-align: center;
    }
    .auth-card .subtitle {
      color: #888; font-size: 0.8rem; text-align: center; margin-bottom: 24px;
    }
    .auth-tabs {
      display: flex; margin-bottom: 20px;
      border-bottom: 1px solid #2a2a4a;
    }
    .auth-tab {
      flex: 1; padding: 8px; text-align: center;
      color: #888; font-size: 0.85rem; cursor: pointer;
      border-bottom: 2px solid transparent; margin-bottom: -1px;
      transition: color 0.15s, border-color 0.15s;
    }
    .auth-tab.active { color: #6ab0f5; border-bottom-color: #6ab0f5; }

    .auth-input {
      width: 100%; padding: 9px 12px; margin-bottom: 12px;
      background: #12122a; border: 1px solid #333; border-radius: 6px;
      color: #e0e0e0; font-size: 0.875rem; outline: none;
    }
    .auth-input:focus { border-color: #6ab0f5; }
    .auth-input::placeholder { color: #555; }
    .city-wrap { position: relative; margin-bottom: 12px; }
    .city-wrap .auth-input { margin-bottom: 0; }
    .city-drop {
      position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 9999;
      background: #1e1e3a; border: 1px solid #3a3a5a; border-radius: 6px;
      max-height: 200px; overflow-y: auto; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.5);
    }
    .city-drop.open { display: block; }
    .city-opt {
      padding: 8px 12px; font-size: 0.85rem; color: #ccc; cursor: pointer;
      border-bottom: 1px solid #2a2a4a;
    }
    .city-opt:last-child { border-bottom: none; }
    .city-opt:hover, .city-opt.active { background: #2a2a5a; color: #fff; }

    .auth-btn {
      width: 100%; padding: 10px; border: none; border-radius: 6px;
      background: #6ab0f5; color: #0f0f1a; font-size: 0.875rem;
      font-weight: 700; cursor: pointer; transition: background 0.15s;
      margin-top: 4px;
    }
    .auth-btn:hover { background: #8ec5ff; }
    .auth-btn:disabled { background: #333; color: #666; cursor: default; }

    .auth-btn-google {
      width: 100%; padding: 9px; border: 1px solid #444; border-radius: 6px;
      background: transparent; color: #ccc; font-size: 0.85rem;
      cursor: pointer; margin-top: 10px; transition: border-color 0.15s;
    }
    .auth-btn-google:hover { border-color: #888; color: #fff; }

    .auth-error {
      background: rgba(233,69,96,0.15); border: 1px solid rgba(233,69,96,0.4);
      color: #f08; border-radius: 6px; padding: 8px 10px;
      font-size: 0.8rem; margin-bottom: 10px;
    }
    .auth-info {
      background: rgba(106,176,245,0.1); border: 1px solid rgba(106,176,245,0.3);
      color: #6ab0f5; border-radius: 6px; padding: 8px 10px;
      font-size: 0.8rem; margin-bottom: 10px;
    }
    .auth-divider {
      text-align: center; color: #555; font-size: 0.75rem; margin: 12px 0;
    }

    .auth-spinner {
      width: 36px; height: 36px;
      border: 3px solid #2a2a4a;
      border-top-color: #6ab0f5;
      border-radius: 50%;
      animation: auth-spin 0.75s linear infinite;
      margin: 0 auto 14px;
    }
    @keyframes auth-spin { to { transform: rotate(360deg); } }
    #auth-boot-loading { text-align: center; padding: 16px 0 8px; color: #888; font-size: .85rem; }

    /* ── Toast notifications ── */
    #notifyContainer {
      position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
      z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 8px;
      pointer-events: none;
    }
    .toast {
      pointer-events: auto;
      min-width: 260px; max-width: 420px;
      padding: 11px 16px; border-radius: 6px;
      font-size: 0.85rem; line-height: 1.45; color: #fff;
      box-shadow: 0 4px 18px rgba(0,0,0,0.45);
      display: flex; align-items: flex-start; gap: 10px;
      animation: toastIn 0.2s ease;
      cursor: pointer;
    }
    @keyframes toastIn {
      from { opacity: 0; transform: translateY(-10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .toast.info    { background: #1e3a5f; border-left: 4px solid #4a9eff; }
    .toast.success { background: #1a3d2e; border-left: 4px solid #4caf50; }
    .toast.warning { background: #3d2e0a; border-left: 4px solid #f0c040; color: #f5e0a0; }
    .toast.error   { background: #3d1010; border-left: 4px solid #e94560; }
    .toast-icon    { flex-shrink: 0; font-size: 1rem; margin-top: 1px; }
    .toast-close   { margin-left: auto; flex-shrink: 0; opacity: 0.6; font-size: 1rem; line-height: 1; }
    .toast-close:hover { opacity: 1; }

    /* Spinner */
    .poll-spinner {
      display: inline-block; width: 11px; height: 11px;
      border: 2px solid #333; border-top-color: #e94560; border-radius: 50%;
      animation: spin 0.8s linear infinite; margin-right: 5px; vertical-align: middle;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Add node FAB ── */
    .fab-add-node {
      position: fixed; bottom: 88px; right: 16px; z-index: 900;
      width: 48px; height: 48px; border-radius: 50%;
      background: #e94560; border: none; color: #fff;
      font-size: 1.5rem; line-height: 1; cursor: pointer;
      box-shadow: 0 4px 16px rgba(233,69,96,0.4);
      display: none; align-items: center; justify-content: center;
    }
    .fab-add-node:hover { background: #c73450; }
    .fab-add-node.visible { display: flex; }

    /* ── User submit modal ── */
    #submitNodeModal .modal-card { max-width: 420px; max-height: 90vh; overflow-y: auto; }
    .submit-field { margin-bottom: 14px; }
    .submit-field label { display: block; font-size: 0.75rem; color: #999; margin-bottom: 5px; }
    .submit-field input[type=text],
    .submit-field textarea {
      width: 100%; padding: 8px 10px; box-sizing: border-box;
      background: #12122a; border: 1px solid #333; border-radius: 8px;
      color: #eee; font-size: 0.85rem; resize: vertical;
    }
    .submit-field textarea { min-height: 72px; }
    .submit-upload-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .submit-upload-row .btn { font-size: 0.78rem; padding: 6px 10px; }
    .submit-upload-status { font-size: 0.72rem; color: #6ab0f5; }
    .qa-pair { display: flex; gap: 6px; margin-bottom: 8px; align-items: flex-start; }
    .qa-pair input { flex: 1; padding: 7px 9px; background: #12122a; border: 1px solid #333;
                     border-radius: 8px; color: #eee; font-size: 0.82rem; }
    .qa-pair .qa-remove { background: none; border: none; color: #555; cursor: pointer;
                          font-size: 1.1rem; padding: 6px 4px; flex-shrink: 0; }
    .qa-pair .qa-remove:hover { color: #e55; }
    .btn-add-qa { font-size: 0.78rem; color: #6ab0f5; background: none; border: 1px solid #334;
                  border-radius: 8px; padding: 5px 10px; cursor: pointer; }
    .btn-add-qa:hover { border-color: #6ab0f5; }
    .submit-success { text-align: center; padding: 20px 0; color: #6ab0f5; font-size: 0.9rem; }
    .audio-rec-btn { position: relative; }
    .audio-rec-btn.recording { background: #e94560 !important; animation: pulse 1s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }

    /* ── Settings modal ── */
    .modal-overlay {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .modal-overlay.open { display: flex; }

    .modal-card {
      background: #13131f;
      border: 1px solid #2a2a4a;
      border-radius: 14px;
      padding: 20px;
      width: 100%;
      max-width: 360px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    }
    .modal-card h3 {
      font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: #6ab0f5; margin-bottom: 16px;
    }
    .modal-close {
      float: right; background: none; border: none; color: #666;
      font-size: 1.2rem; cursor: pointer; line-height: 1; margin-top: -2px;
    }
    .modal-close:hover { color: #ccc; }
    .route-card {
      background: #1e1e3a; border: 1px solid #2a2a4a; border-radius: 8px;
      padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
    }
    .route-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #111122; margin-bottom: 4px; }
    .route-card-name { font-weight: 600; font-size: 0.95rem; color: #e0e0ff; }
    .route-card-meta { font-size: 0.78rem; color: #888; }
    .route-card-desc { font-size: 0.82rem; color: #aaa; }
    .route-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
    .route-card-price { font-size: 0.82rem; color: #f0c040; font-weight: 700; }
    .route-card-btn {
      background: #4a7fd4; color: #fff; border: none; border-radius: 6px;
      padding: 6px 14px; font-size: 0.82rem; cursor: pointer;
    }
    .route-card-btn:hover { background: #5a8fe4; }
    .coat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:3px; width:72px; height:72px; border-radius:6px; overflow:hidden; border:2px solid #333; flex-shrink:0; }
    .coat-part { background:#1e1e3a; position:relative; overflow:hidden; }
    .coat-part img { position:absolute; object-fit:cover; }
    .coat-part.owned img { opacity:1; }
    .coat-part:not(.owned) img { opacity:0; }
    .coat-part:not(.owned)::after { content:''; position:absolute; inset:0; background:#1a1a2e; }
    .coat-label { font-size:.65rem; color:#888; text-align:center; margin-top:4px; text-transform:capitalize; }
    .coat-item { display:flex; flex-direction:column; align-items:center; }
    .city-pill { background:#1e2a3a; border:1px solid #2a4a6a; border-radius:12px; padding:3px 10px; font-size:.78rem; color:#6ab0f5; }

    .setting-row {
      display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
    }
    .setting-row label {
      font-size: 0.78rem; color: #999; width: 90px; flex-shrink: 0;
    }
    .setting-row select,
    .setting-row input[type=number] {
      flex: 1; padding: 7px 10px;
      background: #12122a; border: 1px solid #333; border-radius: 8px;
      color: #eee; font-size: 0.85rem;
    }
    .setting-row .unit {
      font-size: 0.75rem; color: #666; flex-shrink: 0;
    }

    .modal-footer {
      margin-top: 16px;
      display: flex; justify-content: flex-end;
    }

    /* ── Leaflet marker styles ── */
    .map-pin-start { background: #4caf50; }
    .map-pin-end   { background: #e94560; }

    /* ── Inline quiz section ── */
    #quizSection {
      display: none;
      flex: 1;
      min-height: 0;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      background: #f5f0e8; color: #1a1208;
      font-family: Georgia, 'Times New Roman', serif;
    }
    body.quiz-open #quizSection {
      display: block;
    }
    .quiz-page { max-width: 760px; margin: 0 auto; padding: 32px 20px; }
    .quiz-cover { text-align: center; padding: 40px 24px 32px; border-bottom: 3px double #7a5c2e; margin-bottom: 36px; }
    .quiz-cover .eyebrow { font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: #7a5c2e; margin-bottom: 12px; }
    .quiz-cover h2 { font-size: 1.6rem; font-weight: bold; color: #1a1208; margin-bottom: 10px; }
    .quiz-cover .route-info { display: inline-block; border: 1px solid #7a5c2e; padding: 6px 16px; font-size: 0.82rem; color: #5a4020; border-radius: 3px; background: #fff8ee; }
    .quiz-station { margin-bottom: 44px; }
    .quiz-station-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
    .quiz-station-num { background: #7a5c2e; color: #fff8ee; font-size: 0.7rem; font-weight: bold; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 12px; border-radius: 2px; }
    .quiz-station-loc { font-size: 0.76rem; color: #7a5c2e; font-style: italic; margin-bottom: 14px; }
    .quiz-hr { border: none; border-top: 2px solid #c9a96e; margin: 32px 0 24px; }
    .quiz-task-box { background: #fff8ee; border: 1px solid #c9a96e; border-radius: 4px; padding: 14px 18px; margin-top: 12px; }
    .quiz-task-label { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: #7a5c2e; font-weight: bold; margin-bottom: 8px; }
    .quiz-task-q { font-size: 0.98rem; font-weight: bold; color: #1a1208; margin-bottom: 14px; line-height: 1.5; }
    .quiz-answer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
    .quiz-letter-cells { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
    .quiz-cell {
      width: 32px; height: 38px; text-align: center;
      font-size: 1rem; font-family: Georgia, serif; font-weight: bold;
      border: 2px solid #7a5c2e; border-radius: 4px; background: #fff;
      color: #1a1208; text-transform: uppercase; padding: 0;
    }
    .quiz-cell:focus { outline: none; border-color: #1a1208; background: #fff8ee; }
    .quiz-cell.prefilled { background: #fff8ee; color: #7a5c2e; border-color: #c9a96e; cursor: default; }
    .quiz-cell-space { width: 10px; display: inline-block; }
    .quiz-cell-literal { width: 18px; height: 38px; text-align: center; line-height: 38px; font-size: 1rem; font-family: Georgia, serif; font-weight: bold; color: #7a5c2e; display: inline-block; }
    .quiz-check-btn { padding: 6px 14px; background: #7a5c2e; color: #fff8ee; border: none; border-radius: 4px; cursor: pointer; font-size: 0.8rem; font-family: Georgia, serif; font-weight: bold; }
    .quiz-check-btn:hover { background: #5a3c1e; }
    .quiz-rotate-btn { background: none; border: 1px solid #c9a96e; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: 1rem; color: #7a5c2e; line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .quiz-rotate-btn:hover { background: #f5e9d0; }
    .quiz-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
    .quiz-choice-label { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #c9a96e; border-radius: 4px; cursor: pointer; font-size: 0.92rem; color: #1a1208; background: #fffdf7; transition: background 0.15s; }
    .quiz-choice-label:hover { background: #f5e9d0; }
    .quiz-choice-label input[type="radio"] { accent-color: #7a5c2e; width: 16px; height: 16px; flex-shrink: 0; }

    /* ── Toast notifications ── */
    #notifyContainer { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
    .toast { min-width: 260px; max-width: 420px; padding: 11px 16px; border-radius: 6px; font-size: 0.82rem; line-height: 1.45; color: #e0e0e0; box-shadow: 0 4px 18px rgba(0,0,0,0.5); pointer-events: auto; animation: toastIn 0.2s ease; }
    .toast.info    { background: #1e3a5f; border-left: 4px solid #4a9eff; }
    .toast.success { background: #1a3d2e; border-left: 4px solid #4caf50; }
    .toast.warning { background: #3d2e0a; border-left: 4px solid #f0c040; color: #f5e0a0; }
    .toast.error   { background: #3d1010; border-left: 4px solid #e94560; color: #f5c0c0; }
    @keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
    .quiz-feedback { margin-top: 8px; padding: 6px 10px; border-radius: 3px; font-size: 0.85rem; display: none; }
    .quiz-feedback.correct { background: #d4edda; color: #155724; display: block; }
    .quiz-feedback.wrong   { background: #f8d7da; color: #721c24; display: block; }
    .quiz-footer { margin-top: 36px; padding-top: 14px; border-top: 1px solid #c9a96e; text-align: center; font-size: 0.72rem; color: #9a7c50; font-style: italic; }
    .quiz-gps-lock { background: #fff8ee; border: 1px dashed #c9a96e; border-radius: 4px; padding: 20px 18px; margin-top: 12px; text-align: center; color: #7a5c2e; font-size: 0.88rem; line-height: 1.6; }
    .quiz-gps-lock .gps-icon { font-size: 1.8rem; display: block; margin-bottom: 6px; }
    .quiz-gps-dist { font-size: 0.78rem; color: #9a7c50; margin-top: 4px; }
    .unlock-btn { margin-top: 14px; padding: 9px 28px; background: #4a7c3f; color: #fff; border: none; border-radius: 4px; font-size: 0.88rem; font-family: Georgia, serif; font-weight: bold; letter-spacing: 0.04em; cursor: pointer; transition: background 0.2s, transform 0.1s; }
    .unlock-btn:disabled { background: #b0a090; cursor: not-allowed; }
    .unlock-btn:not(:disabled):hover { background: #355a2e; }
    .unlock-btn:not(:disabled):active { transform: scale(0.96); }
    .quiz-riddle-hint { margin-top: 6px; font-size: 0.8rem; color: #7c4a1e; font-style: italic; }
    .quiz-riddle-reveal { text-align: center; margin-top: 14px; }
    .riddle-btn { padding: 10px 32px; background: #7c4a1e; color: #fff; border: none; border-radius: 4px; font-size: 0.92rem; font-family: Georgia, serif; font-weight: bold; letter-spacing: 0.06em; cursor: pointer; transition: background 0.2s, transform 0.1s; }
    .riddle-btn:hover { background: #5a3210; }
    .riddle-btn:active { transform: scale(0.96); }
    @keyframes unlockPop { 0%{opacity:0;transform:scale(0.93)} 60%{transform:scale(1.03)} 100%{opacity:1;transform:scale(1)} }
    .unlock-reveal { animation: unlockPop 0.35s ease both; }
    .quiz-finish-btn { padding: 10px 28px; background: #4a7c3f; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; font-family: Georgia, serif; font-weight: bold; letter-spacing: 0.05em; }
    .quiz-finish-btn:hover { background: #355a2e; }
    .quiz-finish-btn:disabled { background: #9a9a9a; cursor: default; }
    .quiz-vote-row { display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:8px; border-top:1px solid #e8d8b8; }
    .quiz-vote-btn { background:none; border:1px solid #c9a96e; border-radius:4px; padding:3px 10px; cursor:pointer; font-size:0.8rem; color:#7a5c2e; transition:background 0.1s; }
    .quiz-vote-btn:hover { background:#f5e9d0; }
    .quiz-vote-btn.voted { background:#f5e9d0; font-weight:bold; }
    .quiz-report-btn { margin-left:auto; background:none; border:none; cursor:pointer; font-size:0.75rem; color:#b0906a; padding:2px 4px; opacity:0.7; }
    .quiz-report-btn:hover { opacity:1; color:#7a3010; }
    /* Feedback modal */
    #feedbackOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:9000; align-items:center; justify-content:center; }
    #feedbackOverlay.open { display:flex; }
    #feedbackBox { background:#1a1a2e; border:1px solid #3a2e1e; border-radius:8px; padding:24px; width:min(90vw,420px); display:flex; flex-direction:column; gap:12px; }
    #feedbackBox h3 { margin:0; color:#e0d5c5; font-size:1rem; font-family:Georgia,serif; }
    #feedbackContext { font-size:0.8rem; color:#a09070; font-style:italic; }
    #feedbackText { width:100%; box-sizing:border-box; height:110px; border-radius:4px; border:1px solid #4a3a2a; background:#111122; color:#e0d5c5; padding:8px; font-size:0.88rem; font-family:Georgia,serif; resize:vertical; }
    #feedbackText:focus { outline:none; border-color:#7a5c2e; }
    #feedbackActions { display:flex; gap:10px; justify-content:flex-end; }
    #feedbackStatus { font-size:0.8rem; color:#a0b080; min-height:1em; }
    .quiz-vote-count { font-size:0.75rem; color:#9a7c50; }

    /* ── Print ── */
    @media print {
      header, .map-wrap { display: none !important; }
      body { height: auto; overflow: visible; background: white; }
      #quizSection { overflow: visible !important; }
      .quiz-check-btn, .quiz-feedback { display: none !important; }
    }

    /* ── Mobile tweaks ── */
    @media (max-width: 480px) {
      .btn { padding: 6px 10px; font-size: 0.75rem; }
      header h1 { font-size: 1.1rem; }
      .settings-pill { font-size: 0.7rem; padding: 4px 8px; }
    }

    /* ── Leaflet attribution ── */
    .leaflet-control-attribution { display: none !important; }

    /* ── Profile modal sections ── */
    .profile-section { margin-top: 16px; }
    .profile-section-title { font-size: .78rem; color: #888; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
    .profile-section-body { font-size: .85rem; color: #ccc; }
    .profile-cities-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .profile-coats-list { display: flex; flex-wrap: wrap; gap: 14px; }

    /* ── Profile modal card size ── */
    .modal-card--profile { max-width: 480px; max-height: 90vh; overflow-y: auto; }

    /* ── Featured routes modal card size ── */
    .modal-card--featured { max-width: 480px; width: 92%; }

    /* ── Gem store ── */
    .gem-store-notice { color: #999; font-size: 0.82rem; margin-top: 8px; }
    .gem-store-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
    .gem-store-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #12122a; border: 1px solid #333; border-radius: 10px; }
    .gem-store-item-info { flex: 1; }
    .gem-store-item-title { color: #fff; font-weight: 700; font-size: 0.9rem; }
    .gem-store-item-desc { color: #999; font-size: 0.78rem; margin-top: 4px; }

    /* ── Featured routes list ── */
    .featured-routes-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

    /* ── Hint text (settings rows) ── */
    .hint-text { font-size: 0.75rem; color: #9a7c50; }

    /* ── Optional label hint ── */
    .label-optional { color: #555; font-size: 0.7rem; }

    /* ── Submit success message ── */
    .submit-success-note { font-size: 0.8rem; color: #999; }

    /* ── Welcome heading ── */
    .welcome-heading { margin-bottom: 6px; }

    /* ── Confirm form subtitle ── */
    .confirm-subtitle { margin-bottom: 16px; }

    /* ── Profile rating / unlocked city fallback ── */
    .profile-empty { color: #555; font-size: .82rem; }

    /* ── Leaderboard table ── */
    .leaderboard-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
    .leaderboard-row { color: #bbb; }
    .leaderboard-row--me { color: #6ab0f5; font-weight: 700; }
    .leaderboard-cell-rank { padding: 2px 6px 2px 0; width: 24px; }
    .leaderboard-cell-name { padding: 2px 0; }
    .leaderboard-cell-score { padding: 2px 0 2px 8px; text-align: right; color: #888; }
    .leaderboard-ellipsis { color: #555; }
    .leaderboard-ellipsis td { padding: 2px 0; font-size: .7rem; }

    /* ── nimda badge ── */
    .nimda-badge { position: fixed; bottom: 60px; left: 12px; z-index: 9999; background: #e94560; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; cursor: pointer; letter-spacing: 0.08em; }

    /* ── Loot layer ── */
    .loot-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }

    /* ── Profile overlay ── */
    .profile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9000; align-items: center; justify-content: center; }

    /* ── Auth card narrow (profile overlay) ── */
    .auth-card--narrow { max-width: 340px; width: 92%; }

    /* ── Welcome heading ── */
    .welcome-heading { margin-bottom: 6px; }

    /* ── Profile section spacing with coat bottom margin ── */
    .profile-section--coat { margin-bottom: 8px; }

    /* ── Confirm subtitle spacing ── */
    .confirm-subtitle { margin-bottom: 16px; }

    /* ── Coat of arms complete ── */
    .coat-grid--complete { border-color: #6ab0f5; box-shadow: 0 0 8px rgba(106,176,245,.4); }

    /* ── City popup ── */
    .city-popup { min-width: 180px; }
    .city-popup-title { font-weight: 700; margin-bottom: 8px; }
    .city-popup-btn { width: 100%; }
    .city-popup-btn--target { margin-bottom: 8px; }

    /* ── Station context text ── */
    .station-context { font-size: 0.88rem; color: #5a4020; font-style: italic; margin-bottom: 10px; line-height: 1.5; }
    .station-no-info { font-size: 0.88rem; color: #9a7c50; }

    /* ── Hidden place station ── */
    .hidden-place-num { background: #4a3070; }
    .hidden-place-hint { font-size: 0.88rem; color: #5a4020; font-style: italic; margin-bottom: 12px; line-height: 1.5; }
    .hidden-place-input { width: 100%; max-width: 300px; font-size: 0.95rem; padding: 6px 10px; border-radius: 4px; border: 1px solid #4a3a2a; background: #1a1a2e; color: #e0d5c5; }
    .hidden-place-answer-row { flex-wrap: wrap; gap: 8px; }
    .hidden-place-context { margin-top: 10px; font-size: 0.88rem; color: #5a4020; font-style: italic; line-height: 1.5; background: #fff3e0; border-left: 3px solid #c9a96e; padding: 8px 12px; border-radius: 2px; }

    /* ── Final quiz station ── */
    .final-quiz-num { background: #2e6b2e; }
    .final-quiz-hint { font-size: 0.88rem; color: #5a4020; font-style: italic; margin-bottom: 12px; line-height: 1.5; }
    .final-quiz-question { margin-bottom: 12px; }
    .final-quiz-input { width: 100%; max-width: 300px; font-size: 0.95rem; padding: 6px 10px; border-radius: 4px; border: 1px solid #4a3a2a; background: #1a1a2e; color: #e0d5c5; }
    .final-quiz-check-row { margin-top: 10px; }

    /* ── Finish quiz button container ── */
    .quiz-finish-row { text-align: center; margin: 28px 0 8px; }

    /* ── Vote row label ── */
    .vote-helpful-label { font-size: 0.75rem; color: #9a7c50; }

    /* ── Loading state ── */
    .loading-text { color: #666; font-size: 0.85rem; }
    .loading-error { color: #c55; font-size: 0.85rem; }
    .gem-error-text { color: #f08; font-size: 0.82rem; }
    .gem-empty-text { color: #999; font-size: 0.82rem; }