/* static/solar-system/style.css */

/* This page is meant to be a fullscreen, non-scrolling experience — the
   base site stylesheet allows vertical overflow (other pages need it),
   so override it here specifically. Without this, any element that adds
   height on top of .solar-stage's own 100vh (like the fixed top nav used
   to, before this fix) makes the whole page scrollable, which in turn can
   push position:fixed UI out of view depending on browser/scroll quirks. */
html, body{
  height: 100%;
  overflow: hidden;
}

/* =====================================================
   Stage + Canvas
===================================================== */
.solar-stage{
  position: relative;
  min-height: 100vh;
  z-index: 100;                 /* above .bg */
  overflow: hidden;
}

/* The WebGL canvas container */
#solar-canvas-wrap{
  position: absolute;
  inset: 0;
}

/* Slight vignette */
.solar-stage::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,0.35) 100%);
}

/* =====================================================
   HUD
===================================================== */
.solar-hud{
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  z-index: 1100;
  pointer-events: none; /* let canvas get mouse events, enable on inner cards */
}

.solar-hud .hud-card{
  pointer-events: auto;
  background: rgba(10, 14, 22, 0.40);
  border: 1px solid rgba(120,180,255,0.08);
  border-radius:0;
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 8px 40px rgba(3,6,12,0.55), inset 0 1px 0 rgba(255,255,255,0.02);
  overflow: hidden;
  position: relative;
  z-index: 1000;
}

.solar-hud .hud-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background: linear-gradient(90deg,
    rgba(80,160,255,0.22),
    rgba(160,90,255,0.22),
    rgba(255,110,200,0.18)
  );
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border-radius:0;
  padding: 2px;
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: 0.9;
}

.hud-inner{
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud-title{
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #e9f7ff;
  font-size: 13px;
  text-transform: uppercase;
  opacity: 0.9;
}

.hud-spacer{ flex: 1; }

/* Small controls */
.hud-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  color: #cfe7ff;
  opacity: 0.9;
}
.hud-toggle input{
  width: 16px;
  height: 16px;
}

/* =====================================================
   Side panel (focus / info / controls)
===================================================== */
.solar-panel{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 280px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  z-index: 1000;
  background: linear-gradient(
    180deg,
    rgba(18, 22, 45, 0.92),
    rgba(10, 12, 28, 0.92)
  );

  border: 1px solid rgba(120, 140, 255, 0.25);
  border-radius:0;

  padding: 14px 16px;
  box-shadow:
    0 20px 40px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.05) inset;

  backdrop-filter: blur(10px);
  margin: 5% 0.75% 0 0;
}

.solar-panel p{
  margin: 6px 0;
  font-size: 13px;
  line-height: 1.35;
  white-space: pre-line;
  color: #cfd6ff;
}

.solar-panel .panel-body{
  padding: 14px;
}

.panel-heading{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.panel-heading h2{
  font-size: 14px;
  letter-spacing: .4px;
  color: #e9f7ff;
}

.panel-meta{
  font-size: 12px;
  color: #cfe7ff;
  opacity: 0.8;
  line-height: 1.35;
}

/* Actions under focus UI — LEFT aligned */
.panel-actions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  justify-content: flex-start; /* ⬅ left */
  flex-wrap: wrap;
}
.panel-actions .btn{
  width: auto;
}

/* =====================================================
   Planet labels (HTML overlay)
===================================================== */
.planet-label{
  position: absolute;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
  background: rgba(15, 20, 35, 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(130, 160, 255, 0.25);
  border-radius:0;

  color: #e9ecff;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 6px 14px rgba(0,0,0,0.45);

  pointer-events: auto;
  cursor: pointer;
  user-select: none;

  transform: translate(-50%, -140%);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
}

.planet-label:hover,
.planet-label:focus-visible{
  background: rgba(35, 45, 80, 0.85);
  border-color: rgba(140, 170, 255, 0.6);
  transform: translate(-50%, -160%) scale(1.05);
  outline: none;
}

/* Hide labels cleanly */
.planet-label[style*="display: none"]{
  pointer-events: none;
}

/* Planet labels always on top of moons */
.planet-label.kind-planet{ z-index: 2; }
.planet-label.kind-moon{   z-index: 1; }

/* =====================================================
   Accessibility
===================================================== */
:focus-visible{
  outline: 2px solid rgba(140, 170, 255, 0.7);
  outline-offset: 2px;
}

/* =====================================================
   Modals
===================================================== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index: 1000;
  pointer-events: auto;
}
.modal.is-open{ display:block; }

.modal__backdrop{
  pointer-events: auto;
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}

.modal__panel{
  position:relative;
  width:min(720px, calc(100vw - 36px));
  max-height: min(80vh, 760px);
  overflow:auto;
  margin: 10vh auto 0;
  border-radius:0;
  background:rgba(10,14,22,0.88);
  border:1px solid rgba(120,180,255,0.12);
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px) saturate(130%);
  pointer-events: auto;
}
.modal__panel--wide{
  width:min(920px, calc(100vw - 32px));
}

.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-bottom:1px solid rgba(120,180,255,0.10);
}

.modal__title{
  font-weight:850;
  letter-spacing:.3px;
}

.modal__body{
  padding:14px 14px 16px;
  font-size:13px;
  color:#e6f0ff;
  opacity:.95;
  line-height:1.55;
}
.modal__body ul{
  margin:8px 0 0 18px;
}

.hud-note{
  font-size:12px;
  opacity:.75;
}

/* =====================================================
   VIEW CONTROLS (bottom-center)
===================================================== */

.view-controls{
  position: fixed;
  left: 50%;
  bottom: calc(var(--hud-height, 110px) + 26px);
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  gap: 10px;
}

.view-controls .btn{
  width: auto;
  padding: 10px 20px;
  font-size: 0.85rem;
}

@media (max-width: 600px){
  .view-controls{
    bottom: calc(var(--pad) + var(--safe-b) + var(--hud-height, 140px) + 10px);
  }

  .view-controls .btn{
    padding: 9px 14px;
    font-size: 0.8rem;
  }
}

/* =====================================================
   FAB stack + Disclaimer button
===================================================== */
.fab-stack{
  position:fixed;
  left:16px;
  bottom: calc(var(--hud-height, 110px) + 26px);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:50;
}

.disclaimer-fab{
  width:44px;
  height:44px;
  border-radius:0;
  border:1px solid rgba(140,200,255,0.18);
  background:rgba(10,12,16,0.55);
  color:#eaf6ff;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(80,140,255,0.14);
  font-size:18px;
  display:grid;
  place-items:center;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.disclaimer-fab:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 40px rgba(120,160,255,0.22);
  border-color:rgba(180,120,255,0.28);
}

/* =====================================================
   Journal block (side panel)
===================================================== */
.journal-block{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(120,180,255,0.10);
}

.journal-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.journal-title{
  font-size:12px;
  letter-spacing:.35px;
  text-transform:uppercase;
  color:#e9f7ff;
  opacity:.95;
  font-weight:800;
}

.journal-status{
  font-size:12px;
  color:#cfe7ff;
  opacity:.75;
  white-space:nowrap;
}

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

.journal-item{
  padding:10px 10px;
  border-radius:0;
  background:rgba(10,14,22,0.35);
  border:1px solid rgba(120,180,255,0.10);
}

.journal-item__title{
  font-size:13px;
  font-weight:800;
  color:#e9ecff;
  margin-bottom:4px;
}

.journal-item__meta{
  font-size:12px;
  opacity:.75;
  color:#cfe7ff;
  margin-bottom:6px;
}

.journal-item__body{
  font-size:13px;
  line-height:1.35;
  color:#cfd6ff;
  white-space:pre-line;
}

.journal-empty{
  font-size:12px;
  opacity:.75;
  color:#cfe7ff;
  padding:8px 0;
}

/* Journal items clickable */
.journal-item--btn{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.journal-item--btn:focus{
  outline:2px solid rgba(120,180,255,0.35);
  outline-offset:2px;
  border-radius:0;
}

/* Modal journal list tweaks */
.journal-list--modal .journal-item{
  padding:12px 12px;
}

/* Journal entry view */
.journal-entry__meta{
  font-size:12px;
  opacity:.85;
  white-space:pre-wrap;
  margin-bottom:12px;
}
.journal-entry__body{
  white-space:pre-wrap;
  line-height:1.45;
}
.journal-entry__snap{
  margin-top:14px;
  padding:12px;
  border-radius:0;
  background:rgba(10,16,24,0.55);
  border:1px solid rgba(120,180,255,0.10);
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  white-space:pre-wrap;
  overflow:auto;
  max-height:240px;
}
.journal-entry__images{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
}
.journal-img{
  display:block;
  border-radius:0;
  overflow:hidden;
  border:1px solid rgba(120,180,255,0.10);
  background:rgba(0,0,0,0.18);
}
.journal-img img{
  display:block;
  width:100%;
  height:120px;
  object-fit:cover;
}

/* Journal editor form */
.journal-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.journal-form__row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.journal-form__label{
  font-size:12px;
  color:#cfe7ff;
  opacity:.9;
}
.journal-form__input,
.journal-form__textarea{
  width:100%;
  border-radius:0;
  border:1px solid rgba(120,180,255,0.14);
  background:rgba(10,16,24,0.45);
  color:#eaf4ff;
  padding:10px 12px;
  font-size:14px;
}
.journal-form__textarea{
  resize:vertical;
  min-height:140px;
}
.journal-form__hint{
  font-size:12px;
  opacity:.75;
}
.journal-form__context{
  font-size:12px;
  opacity:.9;
  padding:8px 10px;
  border-radius:0;
  border:1px solid rgba(120,180,255,0.12);
  background:rgba(10,16,24,0.35);
  display:inline-block;
  width:fit-content;
}
.journal-form__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

/* =====================================================
   Mobile layout (single, unified ruleset)
===================================================== */
@media (max-width: 820px){

  :root{
    --safe-b: env(safe-area-inset-bottom, 0px);
    --pad: 12px;     /* outer padding */
    --fab-h: 52px;   /* approx height of FAB row */
    --fab-gap: 12px; /* space between panel and FAB row */
  }

  /* HUD becomes single column */
  .solar-hud{
    grid-template-columns: 1fr;
  }

  /* Use real visible viewport on mobile (browser bars) */
  .solar-stage{
    min-height: 100dvh;
  }

  /* Panel = bottom sheet above FAB row */
  .solar-panel{
    margin: 0;

    left: var(--pad);
    right: var(--pad);
    top: auto;
    width: auto;

    bottom: calc(var(--pad) + var(--safe-b) + var(--fab-h) + var(--fab-gap));

    max-height: calc(
      100dvh
      - var(--pad)
      - (var(--pad) + var(--safe-b) + var(--fab-h) + var(--fab-gap))
    );

    border-radius:0;
    padding: 0;
    overflow: hidden; /* inner scroll only */
  }

  .solar-panel .panel-body{
    padding: 12px 12px 10px;
    overflow: auto;
    max-height: 100%;
  }

  /* Reduce journal clutter on mobile: show only first 2 items */
  .journal-list .journal-item:nth-child(n+3){
    display: none;
  }

  /* Actions: LEFT aligned, not sticky */
  .panel-actions{
    position: relative;
    margin-top: 10px;
    padding: 0;
    justify-content: flex-start;
    gap: 8px;
  }
  .panel-actions .btn{
    flex: 0 0 auto;
  }

  /* FAB row becomes horizontal and hugs bottom */
  .fab-stack{
    position: fixed;
    left: var(--pad);
    right: var(--pad);
    bottom: calc(var(--pad) + var(--safe-b) + var(--hud-height, 140px) + 10px);

    max-width: 420px;
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    z-index: 200;
  }

  /* Ensure children don’t escape with fixed positioning */
  .fab-stack > *{
    position: static;
    inset: auto;
  }
}

/* =====================================================
   TOP NAV
===================================================== */

.solar-topnav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(10, 14, 22, 0.55);
  border-bottom: 1px solid rgba(120,180,255,0.1);
  backdrop-filter: blur(10px) saturate(120%);
}

.solar-topnav__brand{
  font-weight: 800;
  color: #eaf6ff;
  text-decoration: none;
  font-size: 0.95rem;
}

.solar-topnav__links{
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.9rem;
}

.solar-topnav__links a{
  color: #cfe7ff;
  text-decoration: none;
  opacity: 0.85;
}

.solar-topnav__links a:hover{
  opacity: 1;
  text-decoration: underline;
}

.solar-topnav__hello{
  color: #cfe7ff;
  opacity: 0.7;
  font-size: 0.85rem;
}

/* =====================================================
   WELCOME OVERLAY
===================================================== */

.welcome-overlay{
  position: absolute;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at center, rgba(5,8,14,0.55) 0%, rgba(5,8,14,0.85) 100%);
  transition: opacity .3s ease, visibility .3s ease;
}

.welcome-overlay--hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.welcome-card{
  max-width: 480px;
  width: 100%;
  padding: 36px;
  text-align: center;
  background: rgba(10, 14, 22, 0.75);
  border: 1px solid rgba(120,180,255,0.15);
  border-radius: 0;
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 20px 60px rgba(3,6,12,0.6);
}

.welcome-title{
  font-size: 1.4rem;
  font-weight: 800;
  color: #eaf6ff;
  margin-bottom: 14px;
}

.welcome-sub{
  color: #cfe7ff;
  opacity: 0.8;
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 24px;
}

.welcome-launch{
  width: 100%;
  padding: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}

.welcome-account-row{
  font-size: 0.85rem;
  color: #cfe7ff;
  opacity: 0.75;
}

.welcome-account-row a{
  color: #8ec8ff;
  text-decoration: underline;
}

@media (max-width: 600px){
  .solar-topnav{
    padding: 12px 14px;
  }

  .solar-topnav__links{
    gap: 10px;
    font-size: 0.82rem;
  }

  .solar-topnav__hello{
    display: none;
  }

  .welcome-card{
    padding: 26px;
  }
}

/* =====================================================
   MY JOURNAL PANEL (per-body)
===================================================== */

.bottom-right-stack{
  position: fixed;
  right: 16px;
  bottom: calc(var(--hud-height, 110px) + 26px);
  z-index: 1250;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
  max-height: calc(100vh - var(--hud-height, 110px) - 60px);
}

.my-journal-panel{
  width: min(340px, calc(100vw - 40px));
  max-height: 50vh;
  display: flex;
  flex-direction: column;
  background: rgba(10, 14, 22, 0.75);
  border: 1px solid rgba(120,180,255,0.15);
  border-radius: 0;
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 20px 60px rgba(3,6,12,0.6);
}

.my-journal-panel--hidden{
  display: none;
}

.my-journal-panel__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(120,180,255,0.1);
  font-weight: 700;
  font-size: 0.92rem;
  color: #eaf6ff;
}

.my-journal-panel__header button{
  background: none;
  border: none;
  color: #eaf6ff;
  font-size: 1.3rem;
  cursor: pointer;
  opacity: 0.7;
  line-height: 1;
}

.my-journal-panel__header button:hover{
  opacity: 1;
}

.my-journal-panel__list{
  overflow-y: auto;
  padding: 12px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.my-journal-entry{
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 12px;
}

.my-journal-entry img{
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  margin-bottom: 8px;
  display: block;
}

.my-journal-entry__title{
  font-weight: 700;
  font-size: 0.88rem;
  color: #eaf6ff;
  margin-bottom: 4px;
}

.my-journal-entry__body{
  font-size: 0.82rem;
  color: #cfe7ff;
  opacity: 0.8;
  line-height: 1.5;
}

.my-journal-empty{
  text-align: center;
  opacity: 0.6;
  font-size: 0.85rem;
  padding: 20px 0;
}

.my-journal-panel__footer{
  padding: 12px 16px;
  border-top: 1px solid rgba(120,180,255,0.1);
}

@media (max-width: 600px){
  .my-journal-panel{
    width: auto;
    max-height: 44vh;
  }
}

/* =====================================================
   BODY INFO & COMMUNITY PANEL
   Positioned to always clear My Journal even fully expanded
   (that panel's bottom:90px + max-height:60vh, plus a gap).
===================================================== */

.body-info-panel{
  width: min(340px, calc(100vw - 40px));
  max-height: 34vh;
  overflow-y: auto;
  padding: 16px;
  background: rgba(10, 14, 22, 0.7);
  border: 1px solid rgba(120,180,255,0.12);
  border-radius: 0;
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 16px 50px rgba(3,6,12,0.5);
}

.body-info-panel__header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.body-info-panel__header span:first-child{
  font-weight: 800;
  color: #eaf6ff;
  font-size: 1rem;
}

.body-info-panel__type{
  font-size: 0.72rem;
  opacity: 0.65;
  color: #cfe7ff;
  white-space: nowrap;
}

.body-scan{
  margin-bottom: 16px;
}

.body-scan--active{
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(120,180,255,0.1);
}

.scan-meter{
  margin-bottom: 12px;
}

.scan-meter__label{
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #cfe7ff;
  opacity: 0.7;
  margin-bottom: 5px;
}

.scan-meter__value{
  font-weight: 700;
  opacity: 0.9;
  text-transform: none;
  letter-spacing: normal;
}

.scan-meter__track{
  position: relative;
  height: 6px;
  background: rgba(120,180,255,0.08);
  border: 1px solid rgba(120,180,255,0.15);
  overflow: hidden;
}

.scan-meter__fill{
  position: relative;
  height: 100%;
  background: linear-gradient(90deg, rgba(80,160,255,0.9), rgba(160,90,255,0.9));
  box-shadow: 0 0 8px rgba(120,180,255,0.6);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  animation: scanPulse 2.4s ease-in-out infinite;
}

.scan-meter__fill::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  width: 40%;
  animation: scanSweep 1.8s linear infinite;
}

@keyframes scanPulse{
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

@keyframes scanSweep{
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.body-info-panel__facts{
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.body-info-panel__facts li{
  font-size: 0.82rem;
  color: #cfe7ff;
  opacity: 0.85;
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}

.body-info-panel__facts li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: rgba(140,200,255,0.7);
}

.body-info-panel__community-header{
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #cfe7ff;
  opacity: 0.6;
  border-top: 1px solid rgba(120,180,255,0.1);
  padding-top: 12px;
  margin-bottom: 8px;
}

.community-entry__author{
  font-size: 0.75rem;
  opacity: 0.55;
  font-style: italic;
}

@media (max-width: 600px){
  .bottom-right-stack{
    left: var(--pad);
    right: var(--pad);
    bottom: calc(var(--pad) + var(--safe-b) + var(--hud-height, 140px) + 10px);
    align-items: stretch;
  }

  .body-info-panel{
    width: auto;
    max-height: 24vh;
  }
}

/* =====================================================
   ENTRY DETAIL MODAL
===================================================== */

.entry-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.entry-modal--open{
  display: flex;
}

.entry-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(3,6,12,0.7);
  backdrop-filter: blur(4px);
}

.entry-modal__box{
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: 30px;
  background: rgba(10, 14, 22, 0.9);
  border: 1px solid rgba(120,180,255,0.18);
  border-radius: 0;
  box-shadow: 0 30px 80px rgba(3,6,12,0.7);
}

.entry-modal__close{
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  color: #eaf6ff;
  font-size: 1.6rem;
  cursor: pointer;
  opacity: 0.7;
  line-height: 1;
}

.entry-modal__close:hover{
  opacity: 1;
}

.entry-modal__image{
  display: none;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: #000;
  margin-bottom: 18px;
}

.entry-modal__box h2{
  color: #eaf6ff;
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.entry-modal__meta{
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
  opacity: 0.6;
  color: #cfe7ff;
  margin-bottom: 18px;
}

.entry-modal__body{
  color: #cfe7ff;
  opacity: 0.88;
  font-size: 0.92rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* =====================================================
   Scan overlay
===================================================== */
.scan-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes scanPulse {
  0%   { transform: translate(-50%,-50%) scale(0.3); opacity: 0.9; }
  100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
}

.scan-ring{
  position: absolute;
  top: 50%; left: 50%;
  width: 110px; height: 110px;
  border: 2px solid rgba(0, 230, 255, 0.85);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0.3);
  opacity: 0;
  pointer-events: none;
}

.scan-active .scan-ring{
  animation: scanPulse 1.6s ease-out infinite;
}

.scan-label{
  position: absolute;
  bottom: calc(50% - 90px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(0,230,255,0.9);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}

.scan-active .scan-label{
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* =====================================================
   Scan toast
===================================================== */
.scan-toast{
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,200,220,0.15);
  border: 1px solid rgba(0,220,240,0.4);
  color: #7ff0ff;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1300;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.scan-toast--show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =====================================================
   Portrait orientation overlay (mobile)
===================================================== */
.portrait-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #cfe7ff;
  font-size: 1.2rem;
  line-height: 1.8;
  pointer-events: all;
}

@media (max-width: 768px) and (orientation: portrait){
  .portrait-overlay{ display: flex; }
}

/* =====================================================
   Virtual joystick (mobile)
===================================================== */
.joystick-zone{
  display: none; /* shown only on touch devices */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 160px;
  height: 160px;
  z-index: 1050;
  pointer-events: auto;
}

@media (pointer: coarse){
  .joystick-zone{ display: block; }
}

.joystick-base{
  position: fixed;
  width: 88px; height: 88px;
  border: 2px solid rgba(0,200,255,0.35);
  border-radius: 50%;
  background: rgba(0,30,60,0.35);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.joystick-thumb{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,200,255,0.55);
  border: 2px solid rgba(0,220,255,0.7);
  pointer-events: none;
}