/* css/stele.css — cerul pe tot ecranul.
 *
 * Pagina asta e făcută întâi pentru telefon, ținut în mână, noaptea, afară. De aici
 * vin toate hotărârile: fundal aproape negru ca să nu-ți strice ochii obișnuiți cu
 * întunericul, scris puțin și mare, butoane pe care le nimerești cu degetul fără să
 * te uiți, și nicio pată albă mare nicăieri.
 */

.stele-body {
    background: #03060f;
    color: #dbe6ff;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

/* Cerul stă lipit de fereastră, sub antet. `dvh` ține pasul cu bara browserului
   care se ascunde la derulare pe telefon — cu `vh` rămânea o dungă goală jos. */
.stele-scena {
    position: relative;
    width: 100%;
    height: 68vh;
    height: 68dvh;
    min-height: 340px;
    background: #03060f;
    overflow: hidden;
}

#stele-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
}

#stele-canvas:active {
    cursor: grabbing;
}

/* Cruciulița din mijloc: reperul după care spunem „ce e în fața ta". */
.stele-tinta {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border: 1px solid rgba(140, 200, 255, 0.35);
    border-radius: 50%;
    pointer-events: none;
}

.stele-tinta::before,
.stele-tinta::after {
    content: "";
    position: absolute;
    background: rgba(140, 200, 255, 0.35);
}

.stele-tinta::before {
    left: 50%;
    top: -10px;
    bottom: -10px;
    width: 1px;
    margin-left: -0.5px;
}

.stele-tinta::after {
    top: 50%;
    left: -10px;
    right: -10px;
    height: 1px;
    margin-top: -0.5px;
}

/* ── Bara de sus: încotro privești și cât e ceasul ── */
.stele-bara {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #9fd6ff;
    background: linear-gradient(to bottom, rgba(3, 6, 15, 0.85), rgba(3, 6, 15, 0));
    pointer-events: none;
}

#stele-ceas {
    color: #dbe6ff;
    font-variant-numeric: tabular-nums;
}

/* ── Mesajele scurte, la mijloc-jos ── */
.stele-mesaj {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%) translateY(0.5rem);
    max-width: min(92%, 30rem);
    margin: 0;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: rgba(8, 16, 34, 0.92);
    border: 1px solid rgba(120, 170, 255, 0.25);
    font-size: 0.86rem;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.stele-mesaj.se-vede {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Ecranul de început ── */
.stele-start {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    text-align: center;
    background: radial-gradient(ellipse at 50% 30%, #101f45 0%, #050a18 60%, #02040b 100%);
}

.stele-start h2 {
    font-size: clamp(1.4rem, 5vw, 2rem);
    font-weight: 800;
    margin: 0;
    color: #ffffff;
}

.stele-start p {
    max-width: 34rem;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #b8c9ea;
}

.stele-btn-mare {
    margin-top: 0.5rem;
    padding: 0.85rem 2.2rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #2b5cff, #7b3cff);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 30px rgba(43, 92, 255, 0.35);
}

.stele-btn-mare:active {
    transform: translateY(1px);
}

/* ── Panoul de sub cer ── */
.stele-panou {
    padding: 1rem 0.9rem 2.5rem;
    max-width: 46rem;
    margin: 0 auto;
}

.stele-stare {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.8rem;
    padding: 0.7rem 0.9rem;
    border-radius: 14px;
    background: rgba(14, 24, 48, 0.75);
    border: 1px solid rgba(90, 130, 210, 0.22);
    margin-bottom: 0.85rem;
}

#stele-loc {
    font-weight: 700;
    color: #ffffff;
    font-size: 0.95rem;
}

#stele-loc.e-aproximativ {
    color: #ffc94a;
}

#stele-precizie {
    width: 100%;
    margin: 0;
    font-size: 0.82rem;
    color: #ffc94a;
}

#stele-precizie.e-bun {
    color: #6ee7a8;
}

.stele-butoane {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.stele-btn {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0.5rem 0.95rem;
    border-radius: 12px;
    border: 1px solid rgba(120, 170, 255, 0.3);
    background: rgba(18, 30, 58, 0.9);
    color: #dbe6ff;
    font-size: 0.88rem;
    font-weight: 700;
}

.stele-btn.is-active {
    background: linear-gradient(135deg, #2b5cff, #7b3cff);
    border-color: transparent;
    color: #fff;
}

.stele-btn:disabled {
    opacity: 0.55;
}

#stele-oras {
    flex: 1 1 10rem;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(120, 170, 255, 0.3);
    background: rgba(18, 30, 58, 0.9);
    color: #dbe6ff;
    font-size: 0.88rem;
}

/* ── Numele a ceea ce privești ──
   Sub cruciuliță, la mijlocul ecranului. E lucrul pentru care există aplicația, deci
   are voie să fie cel mai citeț text de pe ecran — dar nu un dreptunghi luminos care
   să-ți strice ochii obișnuiți cu întunericul. */
.stele-identificat {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    max-width: min(90%, 26rem);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.stele-identificat.se-vede {
    opacity: 1;
}

.stele-id-nume {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
    /* Contur, nu fundal: peste stele se citește oricum, iar un dreptunghi ar acoperi
       tocmai cerul pe care te uiți. */
    text-shadow: 0 0 3px #03060f, 0 0 8px #03060f, 0 1px 2px #000;
}

.stele-id-nume.e-fara-nume {
    font-size: 0.98rem;
    font-weight: 700;
    color: #b9cbea;
}

/* Numele din popor — „Luceafărul de seară", „Carul Mare". Scris cu galben cald și
   cursiv, ca să se vadă că e alt fel de nume decât cel din cataloage. */
.stele-id-popular {
    font-size: 0.9rem;
    font-weight: 700;
    font-style: italic;
    color: #ffd98a;
    text-shadow: 0 0 3px #03060f, 0 0 8px #03060f;
}

.stele-id-popular[hidden] {
    display: none;
}

.stele-id-amanunt {
    font-size: 0.78rem;
    color: #9fd6ff;
    text-shadow: 0 0 3px #03060f, 0 0 8px #03060f;
}

/* ── Butoanele de peste cer ──
   Pe marginea din dreapta, la mijlocul înălțimii: acolo cade degetul mare când ții
   telefonul ridicat, și — mai important — acolo nu se calcă cu nimic. Jos nu merge:
   rândul de butoane de sub cer se rupe pe două linii pe ecran îngust, iar lista de
   orașe ajunge fix peste butonul de ieșire din ecranul întreg. Sus nu merge nici
   atât, că e ceasul. */
.stele-unelte {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 6;
}

.stele-unealta {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 14px;
    border: 1px solid rgba(120, 170, 255, 0.28);
    background: rgba(8, 16, 34, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #cfe0ff;
    font-size: 1rem;
}

.stele-unealta.is-active {
    background: linear-gradient(135deg, #2b5cff, #7b3cff);
    border-color: transparent;
    color: #fff;
}

/* `.stele-unelte` e un rând flex, iar copiii lui sunt tot flex — deci `hidden`
   singur n-ar ascunde nimic fără rândul ăsta. */
.stele-unealta[hidden] {
    display: none;
}

/* ── Pe tot ecranul ──────────────────────────────────────────────────────────
   Afară, noaptea, tot ce nu e cer e în plus. Antetul, subsolul și lămuririle se
   dau la o parte, cerul ia toată fereastra, iar jos rămân doar butoanele cu care
   chiar ai treabă. Clasa se pune pe <body>, nu pe scenă, fiindcă ecranul întreg
   e cerut pentru toată pagina — altfel ferestrele de dialog ar rămâne pe dinafară.

   Antetul nu se ascunde după `#header-placeholder`: `include.js` scoate locșorul
   acela din pagină și pune markup-ul adevărat în loc, deci id-ul nu mai există. */
body.stele-pe-ecran #mainNav,
body.stele-pe-ecran .footer,
body.stele-pe-ecran .stele-stare,
body.stele-pe-ecran .stele-nesigur,
body.stele-pe-ecran .stele-calibrare,
body.stele-pe-ecran #stele-rezumat,
body.stele-pe-ecran .stele-lista,
body.stele-pe-ecran .stele-ajutor {
    display: none !important;
}

body.stele-pe-ecran {
    overflow: hidden;
}

/* Ferestrele de dialog, deasupra cerului — aceeași poveste ca la remi și biliard:
   Bootstrap le pune la 1055, iar cerul pe tot ecranul stă la 1400. */
.stele-body .modal {
    z-index: 2000;
}

.stele-body .modal-backdrop {
    z-index: 1990;
}

body.stele-pe-ecran .stele-scena {
    position: fixed;
    inset: 0;
    z-index: 1400;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}

/* Butoanele rămân, dar plutesc peste cer, în josul ecranului. Sunt aceleași
   butoane din panou — nu le facem încă o dată, doar le mutăm. */
body.stele-pe-ecran .stele-panou {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1401;
    padding: 0 0.7rem calc(0.7rem + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(3, 6, 15, 0.9), rgba(3, 6, 15, 0));
    pointer-events: none;
}

body.stele-pe-ecran .stele-butoane {
    margin: 0;
    pointer-events: auto;
}

body.stele-pe-ecran .stele-mesaj {
    bottom: 5rem;
}

/* Avertismentul pentru legătura nesigură (http). Portocaliu, nu roșu: nu e o
   stricăciune, doar o regulă a browserului — jumătate din aplicație merge oricum. */
.stele-nesigur {
    padding: 0.8rem 1rem;
    margin-bottom: 0.9rem;
    border-radius: 14px;
    background: rgba(60, 42, 10, 0.55);
    border: 1px solid rgba(255, 201, 74, 0.3);
    font-size: 0.84rem;
    line-height: 1.5;
    color: #ffdf9a;
}

.stele-nesigur p + p {
    margin-top: 0.5rem;
}

.stele-nesigur code {
    color: #ffe9b8;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.05rem 0.35rem;
    border-radius: 5px;
}

/* Potrivirea nordului, pentru telefoanele fără busolă adevărată. */
.stele-calibrare {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.9rem;
    border-radius: 12px;
    background: rgba(60, 42, 10, 0.6);
    border: 1px solid rgba(255, 201, 74, 0.3);
    font-size: 0.82rem;
    color: #ffdf9a;
}

.stele-calibrare button {
    min-width: 44px;
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 201, 74, 0.4);
    background: rgba(0, 0, 0, 0.25);
    color: #ffdf9a;
    font-weight: 800;
}

/* ── Lista corpurilor ── */
#stele-rezumat {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: #93a6cc;
}

.stele-lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
}

@media (min-width: 30rem) {
    .stele-lista {
        grid-template-columns: 1fr 1fr;
    }
}

.stele-rand {
    display: grid;
    grid-template-columns: 1.8rem 1fr auto;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 46px;
    padding: 0.45rem 0.7rem;
    border-radius: 12px;
    border: 1px solid rgba(90, 130, 210, 0.16);
    background: rgba(10, 18, 38, 0.7);
    color: #8ea3c9;
    text-align: left;
    font-size: 0.86rem;
}

/* Ce e deasupra orizontului chiar acum se vede limpede; restul rămâne stins, dar
   tot acolo — omul a cerut să le vadă și pe cele din spate și de sub picioare. */
.stele-rand.e-sus {
    color: #dbe6ff;
    border-color: rgba(120, 200, 255, 0.35);
    background: rgba(16, 32, 66, 0.85);
}

.stele-semn {
    font-size: 1.25rem;
    line-height: 1;
    text-align: center;
}

.stele-nume {
    font-weight: 700;
}

.stele-unde {
    font-size: 0.78rem;
    color: #7f93ba;
    text-align: right;
}

.stele-rand.e-sus .stele-unde {
    color: #9fd6ff;
}

.stele-ajutor {
    margin-top: 1.2rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: rgba(10, 18, 38, 0.6);
    border: 1px solid rgba(90, 130, 210, 0.16);
    font-size: 0.84rem;
    line-height: 1.55;
    color: #a9bcdd;
}

.stele-ajutor h3 {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.5rem;
}

.stele-ajutor ul {
    margin: 0;
    padding-left: 1.1rem;
}

.stele-ajutor li + li {
    margin-top: 0.35rem;
}

.stele-fara-3d {
    margin: 2rem auto;
    max-width: 34rem;
    padding: 1rem;
    border-radius: 14px;
    background: rgba(60, 20, 20, 0.6);
    border: 1px solid rgba(255, 120, 120, 0.3);
    text-align: center;
}

/* Cu telefonul care urmărește mișcarea, degetul nu mai are ce trage pe cer. */
body.stele-giro #stele-canvas {
    cursor: default;
}

@media (min-width: 62rem) {
    .stele-scena {
        height: 72vh;
        height: 72dvh;
    }
}