/* css/gravitatie.css — Gravitație: real-time 3D Sun + Earth. Dark-space stage + HUD. */

#grav-stage {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
    background: radial-gradient(ellipse at 50% 40%, #0a1030 0%, #04050c 70%, #010103 100%);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(120, 150, 220, 0.18);
    touch-action: none;
    user-select: none;
}
#grav-stage:fullscreen { max-width: none; border-radius: 0; aspect-ratio: auto; }
#grav-canvas { display: block; width: 100%; height: 100%; }

/* live info (top-left) */
#grav-info {
    position: absolute; top: 10px; left: 10px; z-index: 5;
    background: rgba(6, 10, 22, 0.72); backdrop-filter: blur(3px);
    border: 1px solid rgba(120, 150, 220, 0.25); border-radius: 10px;
    padding: 0.55rem 0.7rem; color: #dfe7f5; text-align: left;
    max-width: min(70vw, 340px); pointer-events: none;
}
.grav-clock { font-weight: 800; font-size: 0.98rem; color: #fff; letter-spacing: 0.02em; }
.grav-local { font-size: 0.72rem; color: #9fb0cc; margin-bottom: 0.35rem; }
.grav-rows { display: grid; grid-template-columns: 1fr; gap: 2px; font-size: 0.8rem; }
.grav-rows > div { display: flex; align-items: center; gap: 7px; }
.grav-rows i { width: 16px; text-align: center; color: #ffcf6b; opacity: 0.9; font-size: 0.78rem; }
.grav-note { margin-top: 0.45rem; font-size: 0.66rem; color: #8ea3c4; line-height: 1.3; }

/* top-right buttons */
.grav-btn {
    position: absolute; right: 10px; z-index: 6; pointer-events: auto;
    width: 42px; height: 42px; border: 0; border-radius: 9px;
    background: rgba(10, 16, 34, 0.7); color: #dfe7f5; font-size: 1rem; cursor: pointer;
    border: 1px solid rgba(120, 150, 220, 0.25);
}
.grav-btn:active { transform: scale(0.92); }
.grav-btn.is-active { background: rgba(58, 130, 246, 0.85); color: #fff; border-color: transparent; }
#btn-grav-fs { top: 10px; }
#btn-grav-hud { top: 60px; }
#btn-grav-follow { top: 110px; }
#btn-grav-orbit { top: 160px; }
#btn-grav-dist { top: 210px; }
#btn-grav-compare { top: 260px; }
#btn-grav-sound { top: 310px; }
#btn-grav-earthcircle { top: 260px; }

/* Main eye button → hide/show ALL panels (only the eye stays). */
#grav-stage.grav-hud-hidden #grav-info,
#grav-stage.grav-hud-hidden #grav-controls,
#grav-stage.grav-hud-hidden #grav-surface,
#grav-stage.grav-hud-hidden #grav-hint,
#grav-stage.grav-hud-hidden #grav-pick,
#grav-stage.grav-hud-hidden .grav-attrib,
#grav-stage.grav-hud-hidden .grav-btn:not(#btn-grav-hud) { display: none !important; }

/* Per-panel visible/invisible eye at the bottom-right of every HUD panel/group. */
.grav-panel-tgl { border: 0; border-radius: 6px; background: rgba(20, 30, 56, 0.92); color: #cdd8ee; font-size: 0.6rem;
    line-height: 1; padding: 0; width: 20px; height: 20px; cursor: pointer; pointer-events: auto; z-index: 8;
    flex: 0 0 auto; align-self: flex-end; margin-left: auto; }   /* margin-auto → pinned right; stays pressable when collapsed */
.grav-search { border: 0; border-radius: 7px; padding: 0.28rem 0.5rem; background: rgba(20, 30, 56, 0.9); color: #dbe4f4; font-size: 0.76rem; width: 8.5rem; max-width: 42vw; }
.grav-search::placeholder { color: #7f92b4; }

/* Big Bang cinematic overlays */
#grav-stage.grav-cosmic-on #grav-info,
#grav-stage.grav-cosmic-on #grav-controls,
#grav-stage.grav-cosmic-on #grav-hint,
#grav-stage.grav-cosmic-on .grav-btn:not(#btn-grav-sound) { display: none !important; }
#grav-stage.grav-cosmic-on #grav-cosmic { display: flex; }
#grav-stage.grav-compare-on #grav-info,
#grav-stage.grav-compare-on #grav-controls,
#grav-stage.grav-compare-on #grav-hint,
#grav-stage.grav-compare-on #btn-grav-follow,
#grav-stage.grav-compare-on #btn-grav-orbit,
#grav-stage.grav-compare-on #btn-grav-dist { display: none !important; }
#grav-stage.grav-compare-on #btn-grav-compare { left: 10px; right: auto; top: 10px; }
#grav-stage.grav-compare-on #btn-grav-sound { left: 10px; right: auto; top: 60px; }
#grav-compare-nav { position: absolute; top: 10px; left: 50%; z-index: 8; display: none; align-items: stretch; transform: translateX(-50%);
    max-width: calc(100% - 84px); background: rgba(6, 10, 22, 0.86); border: 1px solid rgba(120, 150, 220, 0.3); border-radius: 8px; overflow: hidden; }
#grav-stage.grav-compare-on #grav-compare-nav { display: flex; }
.grav-compare-readout { display: flex; flex-direction: column; justify-content: center; min-width: 190px; max-width: min(42vw, 310px); padding: 0.32rem 0.65rem; color: #eaf2ff; text-align: center; }
.grav-compare-readout strong { overflow: hidden; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.grav-compare-readout span { overflow: hidden; color: #9fb8db; font-size: 0.66rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.grav-compare-icon { width: 35px; border: 0; border-left: 1px solid rgba(120, 150, 220, 0.22); background: rgba(20, 30, 56, 0.92); color: #dbe4f4; cursor: pointer; }
.grav-compare-icon:first-child { border-left: 0; border-right: 1px solid rgba(120, 150, 220, 0.22); }
.grav-compare-icon:hover { background: rgba(58, 130, 246, 0.85); color: #fff; }
#grav-flash { position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at 50% 48%, #ffffff, #ffffff 42%, rgba(255, 244, 224, 0.92) 100%); }
#grav-creation { position: absolute; inset: 0; z-index: 22; pointer-events: none; opacity: 0; display: flex; align-items: center; justify-content: center; }
#grav-creation svg { width: min(72%, 540px); height: auto; filter: drop-shadow(0 0 18px rgba(255, 214, 140, 0.55)); }
#grav-cosmic { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 21; display: none;
    align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: 94%;
    background: rgba(6, 10, 22, 0.82); border: 1px solid rgba(120, 150, 220, 0.3); border-radius: 12px; padding: 7px 14px; }
.grav-cosmic-cap { color: #eaf2ff; font-weight: 700; font-size: 0.9rem; }
.grav-panel-tgl:hover { background: rgba(48, 66, 112, 0.98); }
/* collapsed: hide everything in the panel except its own eye (so it can be reopened). */
.grav-collapsed > *:not(.grav-panel-tgl) { display: none !important; }
.grav-grp.grav-collapsed { padding: 4px; gap: 0; min-width: 0; }
#grav-surface.grav-collapsed { padding: 4px 6px; gap: 0; }
/* info panel is an absolutely-positioned block → pin its eye to the corner + reserve space for it */
#grav-info { padding-bottom: 1.5rem; }
#grav-info .grav-panel-tgl { position: absolute; right: 5px; bottom: 5px; }
#grav-info.grav-collapsed { width: 30px; height: 30px; padding: 4px; min-width: 0; overflow: hidden; }

/* bottom controls */
#grav-controls {
    position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 6;
    display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center;
    max-width: 96%;
}
.grav-grp { display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
    background: rgba(6, 10, 22, 0.68); border: 1px solid rgba(120, 150, 220, 0.22);
    border-radius: 10px; padding: 5px 8px; }
.grav-grp-lbl { font-size: 0.68rem; color: #9fb0cc; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 2px; }
.grav-vbtn, .grav-tbtn {
    border: 0; border-radius: 7px; padding: 0.28rem 0.6rem; cursor: pointer;
    background: rgba(30, 42, 74, 0.9); color: #dbe4f4; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}
.grav-vbtn:hover, .grav-tbtn:hover { background: rgba(48, 66, 112, 0.95); }
.grav-vbtn:active, .grav-tbtn:active { transform: scale(0.95); }
.grav-vbtn.is-active, .grav-tbtn.is-active { background: #3a82f6; color: #fff; }
.grav-context-hidden { display: none !important; }
.grav-planet-picker { position: relative; }
.grav-planet-chevron { margin-left: 0.2rem; font-size: 0.65em; transition: transform 0.16s ease; }
.grav-planet-picker.is-open .grav-planet-chevron { transform: rotate(180deg); }
.grav-planet-menu { display: none; position: absolute; z-index: 12; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
    grid-template-columns: repeat(2, max-content); gap: 4px; min-width: 190px; padding: 6px;
    background: rgba(6, 10, 22, 0.96); border: 1px solid rgba(120, 150, 220, 0.38); border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.48); }
.grav-planet-picker.is-open .grav-planet-menu { display: grid; }
.grav-planet-item { border: 0; border-radius: 5px; padding: 0.32rem 0.48rem; text-align: left; cursor: pointer;
    background: rgba(30, 42, 74, 0.9); color: #dbe4f4; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.grav-planet-item:hover, .grav-planet-item.is-active { background: #3a82f6; color: #fff; }
.grav-planet-hide { grid-column: 1 / -1; text-align: center; }
.grav-tbtn--act { background: rgba(60, 74, 110, 0.9); }
.grav-tbtn--act.is-active { background: #e8a33d; color: #2a1c05; }

#grav-hint {
    position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%); z-index: 4;
    font-size: 0.7rem; color: #7f92b4; background: rgba(4, 6, 14, 0.45); padding: 2px 10px; border-radius: 999px;
    pointer-events: none; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis;
}
.grav-attrib { position: absolute; right: 8px; bottom: 6px; font-size: 0.6rem; color: rgba(180, 195, 225, 0.5); z-index: 4; pointer-events: none; }

/* Big distance info panel — opened by tapping the floating distance label in space mode. */
#grav-dist-modal { display: none; position: absolute; inset: 0; z-index: 26; align-items: center; justify-content: center;
    background: rgba(4, 6, 14, 0.72); backdrop-filter: blur(2px); }
#grav-dist-modal.on { display: flex; }
#grav-body-modal { display: none; position: absolute; inset: 0; z-index: 27; align-items: center; justify-content: center;
    background: rgba(4, 6, 14, 0.72); backdrop-filter: blur(2px); }
#grav-body-modal.on { display: flex; }
.grav-body-card { position: relative; width: min(420px, 90vw); padding: 1.5rem 2rem 1.4rem;
    background: linear-gradient(180deg, rgba(16, 22, 44, 0.98), rgba(8, 12, 26, 0.98));
    border: 1px solid rgba(120, 150, 220, 0.35); border-radius: 12px; text-align: left;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); }
.grav-body-title { color: #eaf2ff; font-weight: 800; font-size: 1.5rem; padding-right: 2rem; }
.grav-body-subtitle { color: #9fc7ff; font-size: 0.82rem; margin: 0.15rem 0 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.grav-body-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid rgba(120, 150, 220, 0.2); }
.grav-body-facts > div { display: flex; flex-direction: column; gap: 0.16rem; min-height: 58px; padding: 0.55rem 0.65rem; background: rgba(30, 42, 74, 0.45); }
.grav-body-facts span { color: #91a4c6; font-size: 0.67rem; }
.grav-body-facts strong { color: #e7efff; font-size: 0.82rem; line-height: 1.25; }
.grav-body-note { color: #b8c7df; font-size: 0.8rem; line-height: 1.35; margin-top: 0.9rem; }
.grav-dist-card { position: relative; max-width: 90vw; padding: 1.5rem 2rem 1.7rem;
    background: linear-gradient(180deg, rgba(16, 22, 44, 0.98), rgba(8, 12, 26, 0.98));
    border: 1px solid rgba(120, 150, 220, 0.35); border-radius: 16px; text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); }
.grav-dist-title { color: #eaf2ff; font-weight: 800; font-size: 1.15rem; margin-bottom: 0.3rem; }
.grav-dist-big { color: #ffe6b0; font-weight: 800; font-size: clamp(1.8rem, 6vw, 3.1rem); line-height: 1.1; margin: 0.3rem 0; }
.grav-dist-sub { color: #a9d4ff; font-size: 0.92rem; font-weight: 600; }
.grav-dist-sub2 { color: #8ea3c4; font-size: 0.78rem; margin-top: 0.4rem; }
.grav-dist-close { position: absolute; top: 8px; right: 10px; border: 0; border-radius: 8px; width: 30px; height: 30px;
    background: rgba(30, 42, 74, 0.9); color: #dbe4f4; font-size: 0.95rem; cursor: pointer; }
.grav-dist-close:hover { background: rgba(48, 66, 112, 0.98); }

/* Compare-2 result panel — reuses the .grav-dist-* card styling (same "big info card" look). */
#grav-pair-modal { display: none; position: absolute; inset: 0; z-index: 28; align-items: center; justify-content: center;
    background: rgba(4, 6, 14, 0.72); backdrop-filter: blur(2px); }
#grav-pair-modal.on { display: flex; }
#grav-pair-a, #grav-pair-b { display: block; margin-top: 0.15rem; }
.grav-compare-icon.is-active { background: rgba(58, 130, 246, 0.85); color: #fff; }

/* click-to-identify tooltip (name of a star / Sun / Moon) in the sky view */
#grav-pick { position: absolute; z-index: 8; transform: translate(-50%, -150%); pointer-events: none;
    background: rgba(10, 16, 34, 0.92); color: #fff; border: 1px solid rgba(150, 180, 240, 0.55); border-radius: 8px;
    padding: 3px 9px; font-size: 0.82rem; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity 0.15s; }
#grav-pick.on { opacity: 1; }

/* screen-centre transparent targeting reticle (planetarium sky mode) */
#grav-reticle {
    display: none; position: absolute; z-index: 9; pointer-events: none;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 260px; height: 260px;
}
#grav-reticle.on { display: block; }
/* belt-and-braces: the targeting circle belongs ONLY to the surface sky view — never in space, whatever the JS state */
#grav-stage:not(.grav-surface-on) #grav-reticle { display: none !important; }
.grav-reticle-ring {
    position: absolute; inset: 0;
    border: 2px solid rgba(90, 169, 255, 0.55);
    border-radius: 50%;
    box-shadow: 0 0 18px 4px rgba(90, 169, 255, 0.18), inset 0 0 18px 4px rgba(90, 169, 255, 0.08);
    background: radial-gradient(circle, rgba(90, 169, 255, 0.06) 0%, rgba(90, 169, 255, 0.02) 60%, transparent 100%);
    animation: grav-reticle-spin 12s linear infinite;
}
.grav-reticle-ring::before, .grav-reticle-ring::after {
    content: ""; position: absolute; background: rgba(90, 169, 255, 0.5);
}
/* horizontal crosshair ticks */
.grav-reticle-ring::before {
    width: 14px; height: 1.5px; top: 50%; left: -1px; transform: translateY(-50%);
    box-shadow: 246px 0 0 0 rgba(90, 169, 255, 0.5);
}
/* vertical crosshair ticks */
.grav-reticle-ring::after {
    width: 1.5px; height: 14px; left: 50%; top: -1px; transform: translateX(-50%);
    box-shadow: 0 246px 0 0 rgba(90, 169, 255, 0.5);
}
@keyframes grav-reticle-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* per-object name tag revealed by tapping the reticle — one per star/body found inside the ring,
   floated directly ABOVE that object's own screen position (same idea as the direct-tap tooltip). */
#grav-reticle-hits { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.grav-reticle-hit {
    position: absolute; transform: translate(-50%, -140%); pointer-events: none;
    background: rgba(10, 16, 34, 0.92); color: #a9d4ff; border: 1px solid rgba(90, 169, 255, 0.5);
    border-radius: 7px; padding: 2px 9px; font-size: 0.78rem; font-weight: 700;
    white-space: nowrap; opacity: 0; transition: opacity 0.2s;
}
.grav-reticle-hit.on { opacity: 1; }
.grav-reticle-hit--constellation { color: #ffe5a6; border-color: rgba(255, 208, 110, 0.72); font-size: 0.86rem;
    box-shadow: 0 0 14px rgba(255, 197, 86, 0.24); }

/* planetarium: location pickers + surface bar */
.grav-select { border: 0; border-radius: 7px; padding: 0.28rem 0.5rem; background: rgba(30, 42, 74, 0.9); color: #dbe4f4; font-size: 0.78rem; font-weight: 600; }
.grav-hint-inline { font-size: 0.68rem; color: #9fb0cc; }
#grav-surface { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 7; display: none;
    align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: 94%;
    background: rgba(6, 10, 22, 0.82); border: 1px solid rgba(120, 150, 220, 0.28); border-radius: 12px; padding: 6px 12px; }
#grav-stage.grav-surface-on #grav-surface { display: flex; }
#grav-stage.grav-surface-on .grav-space-only { display: none !important; }
#grav-stage:not(.grav-surface-on) .grav-surface-only { display: none !important; }   /* the reticle only makes sense standing on Earth */
.grav-back { border: 0; border-radius: 8px; padding: 0.3rem 0.75rem; background: #3a82f6; color: #fff; font-weight: 700; font-size: 0.8rem; cursor: pointer; pointer-events: auto; }
.grav-back:active { transform: scale(0.95); }
.grav-surface-info { color: #eaf2ff; font-weight: 700; font-size: 0.85rem; display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.grav-site-time { font-weight: 500; font-size: 0.72rem; color: #a9bcda; }
.grav-surface-tip { font-size: 0.66rem; color: #8ea3c4; }
.grav-surface-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.grav-sbtn { border: 0; border-radius: 7px; padding: 0.28rem 0.55rem; background: rgba(30, 42, 74, 0.92); color: #dbe4f4; font-size: 0.76rem; font-weight: 600; cursor: pointer; pointer-events: auto; white-space: nowrap; }
.grav-sbtn:hover { background: rgba(48, 66, 112, 0.98); }
.grav-sbtn:active { transform: scale(0.95); }
.grav-sbtn.is-active { background: #3a82f6; color: #fff; }

@media (max-width: 620px) {
    #grav-stage { aspect-ratio: 3 / 4; }
    .grav-surface-tip { display: none; }
    #grav-surface { top: 8px; gap: 8px; }
    .grav-clock { font-size: 0.86rem; }
    .grav-rows { font-size: 0.74rem; }
    #grav-hint { display: none; }
    #grav-controls { bottom: 8px; gap: 6px; }
    .grav-vbtn, .grav-tbtn { font-size: 0.72rem; padding: 0.26rem 0.5rem; }
    .grav-btn { width: 38px; height: 38px; }
    #btn-grav-hud { top: 54px; }
    #btn-grav-follow { top: 98px; }
    #btn-grav-orbit { top: 142px; }
    #btn-grav-dist { top: 186px; }
    #btn-grav-compare { top: 230px; }
    #btn-grav-sound { top: 274px; }
    #btn-grav-earthcircle { top: 230px; }
    #grav-compare-nav { left: calc(50% + 8px); max-width: calc(100% - 110px); }
    .grav-compare-readout { min-width: 108px; max-width: 32vw; }
    .grav-compare-icon { width: 32px; }
}