/* =========================
   LAYOUT – STRUKTURA
   ========================= */

/*
  Ten plik odpowiada WYŁĄCZNIE za układ:
  - flexy
  - kolumny
  - sekcje
  - rozmieszczenie bloków
  Styl wizualny jest w app.css
*/

/* =========================
   EKRAN GŁÓWNY
   ========================= */

.app {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* =========================
   KONTENERY TREŚCI
   ========================= */

.content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* =========================
   SEKCJE / EKRANY
   ========================= */

.screen {
  width: 100%;
}

/* =========================
   FORMULARZE / BLOKI
   ========================= */

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 2px solid #000;
  border-radius: 8px;
}

/* =========================
   LISTY
   ========================= */

.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.list-item {
  padding: 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

/* =========================
   MAPA – STRUKTURA
   ========================= */

/*
  Właściwe pozycjonowanie mapy jest w app.css.
  Tutaj NIE MA:
  - wysokości
  - overflow
  - scale
*/

.map-screen {
  padding: 0;
}

/* =========================
   PANEL MAPY (JEŚLI JEST UŻYWANY)
   ========================= */

#map-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 72px;
  background: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 16px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
  z-index: 20;
}

#map-panel.hidden {
  display: none;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
}

.panel-close {
  background: none;
  border: none;
  font-size: 24px;
}

/* =========================
   CERTYFIKAT – UKŁAD
   ========================= */

.cert-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* =========================
   POMOC / OPISY
   ========================= */

.text-block {
  line-height: 1.6;
}

/* =========================
   RESPONSYWNOŚĆ
   ========================= */

@media (min-width: 768px) {
  .cert-grid:not(#certGrid) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.atut{width: 10%;}
.atuter{width: 40%; align-items: center; display: block; margin: 0 auto 3px;}

.contener{background: #FFF; margin-bottom:10px; padding: 15px; border:1px solid #F28C18;}
.topnumber{text-align: center; margin:25px; font-size:3em!important;font-family: inherit;}



/* kliknięcie */
.bottom-btn:active {
    background: #ffd39c;
}
.place-illustration {
    width: 70%;
    max-width: 260px;
    display: block;
    margin: 20px auto;
}

.place-text {
    font-size: 1.2rem;
    text-align: center;
    margin: 20px 0;
}
.place-text-mini{
    font-size: 0.9rem!important;
    text-align: center;
    margin: 20px 0;
}

.input-large {
    width: 30%;
	height:40px;
    font-size: 1.4rem;
    padding: 12px 16px;
    margin: 10px auto 20px;
    display: block;
    border-radius: 12px;
    border: 2px solid #ffd39c;
	text-align:center;
}

#placeError {
    margin-top: 15px;
    text-align: center;
}
/* Pomarańczowy okrąg */
.circle-input {
    width: 180px;
    height: 180px;
    border: 6px solid #F28C18;
    border-radius: 50%;
    background: #fffaf2;
    box-shadow: inset 0 2px 10px rgba(91, 67, 39, 0.12);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.circle-input input {
    width: 90%;
    height: 90%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 48px;
    text-align: center;
    color: #F28C18;
    font-weight: bold;
}

.circle-input img {
    width: 100%;
    height: 100%;
    opacity: 0.7;
    border-radius: 50%;
}

h2 span {font-size:24px;}

.title {
  text-align: left;
  margin-bottom: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-wrap {
  position: relative;
  z-index: 1;
}

.hero-img {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  display: block;
}

/* BOX NA WIERZCHU */
.boxinfo {
  position: relative;
  z-index: 2;
  margin-top: -60px; /* 👈 KLUCZ */
  background: #F9F3DC;
  border: 3px solid #B27D31;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}
@media (max-width: 400px) {
  .boxinfo {
    margin-top: -40px;
  }
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:active {
  opacity: 0.7;
}

.lead {
  margin-bottom: 16px;
}

.poem {
  margin: 20px 0;
  margin-left:20px;
  padding-left: 3px;
  border-left: 2px solid #B27D31;
  font-style: italic;
}

.poem p {
  margin-bottom: 10px;
}

.hint {
  margin: 16px 0 24px;
  font-weight: 500;
}

.start-screen {
  padding: 0 !important;
  background: #000;
}

.start-hero {
  position: relative;
  aspect-ratio: 3000 / 2130;
  height: auto;
  overflow: visible;
  margin: 0;
}

.start-bg {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}


.start-buttons {
  margin-top: 16px;
  padding: 0 16px;
}

.start-text {
  padding: 26px;
}

.reset-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

/* czerwony przycisk */
.danger-circle {
  width: 140px;
  height: 140px;
  border-radius: 100%!important;

  background: linear-gradient(#ff1a1a, #b30000);
  color: #fff;

  font-weight: 700;
  font-size: 18px;

  border: none;
}

/* klik */
.danger-circle:active {
  transform: scale(0.95);
}