html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    /* Puhelimet (etenkin iOS Safari) zoomaavat koko sivua automaattisesti kun
       tekstikenttä saa fokuksen, JOS sen fonttikoko on alle 16px. Tämä sääntö
       varmistaa ettei se koskaan tapahdu - kartta ei siis "jää jumiin" zoomiin
       kun täytät esim. kentän lisäyslomaketta. */
    input, textarea, select {
      font-size: 16px;
    }
    #map {
      width: 100%;
      height: 100vh;
    }
    /* Oma koripallomerkki: CSS-taustakuva pienelle div-elementille */
    .court-marker {
      width: 36px;
      height: 36px;
      background-color: #f97316;
      border-radius: 50%;
      border: 3px solid white;
      box-shadow: 0 1px 4px rgba(0,0,0,0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
    }

    /* Bottom sheet: vedettävä korkeus, sisältö scrollattava kun laajennettu */
    #bottom-sheet {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background: white;
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
      transform: translateY(100%);
      transition: transform 0.25s ease-out, height 0.2s ease-out;
      z-index: 10;
      font-family: sans-serif;

      height: 42vh;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      touch-action: none; /* raahaus toimii nyt mistä tahansa kohdasta sheetiä */
    }
    #bottom-sheet.visible {
      transform: translateY(0);
    }

    #sheet-drag-handle {
      width: 40px;
      height: 5px;
      background: #ccc;
      border-radius: 3px;
      margin: 10px auto 4px;
      cursor: grab;
      touch-action: none;
      flex-shrink: 0;
    }

    #sheet-close {
      position: absolute;
      top: 12px;
      right: 16px;
      border: none;
      background: none;
      font-size: 22px;
      cursor: pointer;
      color: #888;
      z-index: 1;
    }

    #sheet-scroll-content {
      overflow: hidden; /* ei erillistä scrollauspalkkia - sheetin raahaus itsessään paljastaa sisällön */
      flex: 1;
      padding: 4px 24px 28px;
    }

    /* MOBIILI (oletus): lohkot allekkain: nimi -> arviot/tykkäykset -> kuvaus -> kuvat -> kommentit */
    .sheet-block-name {
      text-align: center;
      margin-bottom: 4px;
    }
    #sheet-peek-area {
      touch-action: none;
    }
    #sheet-name {
      margin: 0 0 8px 0;
      font-size: 20px;
    }
    .sheet-block-stats {
      text-align: center;
      margin-bottom: 10px;
    }
    .sheet-block-description {
      margin-bottom: 10px;
      text-align: center;
      color: #666;
    }
    #sheet-description {
      margin: 0;
    }
    .sheet-block-images {
      margin-bottom: 16px;
      display: flex; /* aina näkyvissä DOM:issa - sheetin korkeus säätelee kuinka paljon siitä paljastuu */
      flex-direction: column;
      align-items: center;
    }
    .sheet-block-comments {
      text-align: left;
    }
    .sheet-block-comments h3 {
      font-size: 14px;
      color: #888;
      margin: 0 0 6px 0;
    }
    #comment-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    #comment-list li {
      padding: 8px 0;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      color: #444;
    }

    /* TIETOKONE: Grid kahteen palstaan, nimi yllä molempien yli */
    @media (min-width: 700px) {
      /* Sisältö näkyy nyt samassa pystyjärjestyksessä kuin puhelimessa - ei Grid-rinnakkaisasettelua.
         Sen sijaan itse sheet muuttuu kelluvaksi, keskitetyksi kortiksi ettei se venyisi
         rumasti koko näytön levyiseksi isolla ruudulla. */
      #bottom-sheet {
        left: 0;
        right: 0;
        width: 420px;
        max-width: 90vw;
        margin: 0 auto;
        bottom: 24px;
        border-radius: 20px; /* pyöristys nyt joka kulmasta, koska ei enää kiinni näytön alareunassa */
      }
    }
    #image-row {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
    }
    .sheet-image {
      width: 110px;
      height: 90px;
      object-fit: cover;
      border-radius: 8px;
    }
    #image-next {
      border: none;
      background: #f3f4f6;
      border-radius: 20px;
      padding: 6px 14px;
      cursor: pointer;
      font-size: 13px;
      color: #333;
    }
    #image-next:hover {
      background: #e5e7eb;
    }

    /* "+ Lisää kenttä" -nappi - sijoittelu tulee nyt #top-bar:lta */
    #add-court-btn {
      background: white;
      border: none;
      border-radius: 24px;
      padding: 10px 18px;
      font-size: 14px;
      font-weight: bold;
      box-shadow: 0 1px 6px rgba(0,0,0,0.3);
      cursor: pointer;
      font-family: sans-serif;
      flex-shrink: 0; /* ei kutistu vaikka auth-panel veisi tilaa */
    }
    #add-court-btn:hover {
      background: #f3f4f6;
    }

    /* Ohjebanneri, näkyy vain kun lisäystila on päällä */
    #add-instructions {
      display: none; /* piilossa oletuksena */
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      background: #111827;
      color: white;
      padding: 8px 16px;
      border-radius: 20px;
      font-family: sans-serif;
      font-size: 13px;
      z-index: 10;
    }
    #add-instructions.visible {
      display: block;
    }

    /* Lomake uuden kentän tiedoille, keskellä ruutua */
    #add-form {
      display: none; /* piilossa oletuksena */
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      border-radius: 16px;
      box-shadow: 0 2px 16px rgba(0,0,0,0.3);
      padding: 24px;
      width: 280px;
      font-family: sans-serif;
      z-index: 20;
    }
    #add-form.visible {
      display: block;
    }
    #add-form h2 {
      margin: 0 0 16px 0;
      font-size: 18px;
      text-align: center;
    }
    #add-form label {
      display: block;
      font-size: 13px;
      color: #444;
      margin-bottom: 12px;
    }
    #add-form input,
    #add-form select,
    #add-form textarea {
      display: block;
      width: 100%;
      margin-top: 4px;
      padding: 6px 8px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-family: sans-serif;
    }
    .form-buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
    }
    .form-buttons button {
      border: none;
      border-radius: 20px;
      padding: 8px 16px;
      cursor: pointer;
      font-size: 13px;
    }
    #form-cancel {
      background: #f3f4f6;
      color: #333;
    }
    #form-save {
      background: #f97316;
      color: white;
      font-weight: bold;
    }

    /* Yläpalkki: kirjautumisnappi + lisää-nappi samassa flex-rivissä. Korkea z-index,
       jotta molemmat pysyvät näkyvissä alla avautuvan dropdownin päällä. */
    #top-bar {
      position: fixed;
      top: 16px;
      left: 16px;
      right: 16px;
      z-index: 11;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 10px;
    }

    /* Pieni "Kirjaudu"-nappi - muuttuu sähköpostiksi kirjautumisen jälkeen */
    #auth-toggle-btn {
      background: white;
      border: none;
      border-radius: 24px;
      padding: 10px 18px;
      font-size: 14px;
      font-weight: bold;
      box-shadow: 0 1px 6px rgba(0,0,0,0.3);
      cursor: pointer;
      font-family: sans-serif;
    }
    #auth-toggle-btn:hover {
      background: #f3f4f6;
    }

    /* Alas avautuva kirjautumispalkki: matalampi z-index kuin #top-bar,
       joten kirjaudu- ja lisää-napit jäävät näkyviin sen päälle */
    #auth-dropdown {
      display: none;
      position: fixed;
      top: 66px; /* juuri #top-bar-rivin alapuolella */
      left: 16px;
      right: 16px;
      z-index: 9;
      background: white;
      border-radius: 12px;
      padding: 10px 14px;
      box-shadow: 0 1px 6px rgba(0,0,0,0.3);
      font-family: sans-serif;
      font-size: 13px;
    }
    #auth-dropdown.open {
      display: block;
    }
    #auth-logged-out {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    #auth-dropdown input {
      width: 140px;
      padding: 4px 6px;
      border: 1px solid #ccc;
      border-radius: 6px;
    }
    #auth-dropdown button {
      border: none;
      background: #f3f4f6;
      border-radius: 12px;
      padding: 5px 10px;
      cursor: pointer;
      font-size: 12px;
    }

    @media (max-width: 480px) {
      #auth-dropdown input {
        width: calc(50% - 3px);
      }
    }

    /* Muokkaa- ja Arvioi-napit bottom sheetin sisällä */
    #sheet-edit,
    #sheet-rate-btn {
      margin-top: 8px;
      margin-right: 6px;
      border: none;
      background: #f3f4f6;
      border-radius: 16px;
      padding: 6px 14px;
      cursor: pointer;
      font-size: 13px;
    }

    /* Arvosana ja tykkäys vierekkäin samalla rivillä */
    .stats-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 8px 0;
    }

    /* Tähtiwidget: harmaat tähdet taustalla, keltaiset tähdet päällä leikattuna prosentin mukaan (mahdollistaa puolikkaat tähdet) */
    .star-rating-widget {
      position: relative;
      display: inline-block;
      font-size: 18px;
      line-height: 1;
    }
    .stars-bg {
      color: #ddd;
    }
    .stars-fg {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      white-space: nowrap;
      color: #facc15;
      width: 0%; /* JS asettaa tämän prosentin keskiarvon mukaan */
    }
    #sheet-avg-count {
      font-size: 13px;
      color: #888;
    }
    #sheet-like-btn {
      border: none;
      background: none;
      font-size: 20px;
      cursor: pointer;
      color: #999;
      padding: 0;
      margin-left: 6px;
    }
    #sheet-like-btn.liked {
      color: #ef4444;
    }
    #sheet-like-count {
      font-size: 14px;
      color: #444;
    }

    /* Arvio-lomake, samantyylinen kuin add-form */
    #rate-form {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      border-radius: 16px;
      box-shadow: 0 2px 16px rgba(0,0,0,0.3);
      padding: 24px;
      width: 260px;
      font-family: sans-serif;
      z-index: 20;
      text-align: center;
    }
    #rate-form.visible {
      display: block;
    }
    #rate-form h2 {
      margin: 0 0 12px 0;
      font-size: 18px;
    }
    #rate-stars {
      margin-bottom: 14px;
    }
    #rate-stars .star-btn {
      cursor: pointer;
      font-size: 30px;
      color: #ccc;
      margin: 0 3px;
      user-select: none;
    }
    #rate-stars .star-btn.active {
      color: #facc15;
    }
    #rate-form label {
      display: block;
      font-size: 13px;
      color: #444;
      margin-bottom: 12px;
      text-align: left;
    }
    #rate-form textarea {
      display: block;
      width: 100%;
      margin-top: 4px;
      padding: 6px 8px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-family: sans-serif;
    }