/* The attacks globe (/ataques/): the Earth fills the screen under the bar, and the words sit over it on wide screens
   and under it on narrow ones. The rest (bar, fonts, colours, buttons) comes from site.css. */
  body.globe-page { background: #020407; }
  body.globe-page::after { content: none; }                 /* no CRT scanlines over the satellite pictures */
  .g-main { position: relative; }
  .g-stage {
    position: relative; overflow: hidden;
    height: calc(100vh - 3.1rem); height: calc(100dvh - 3.1rem); min-height: 26rem;
    background: radial-gradient(ellipse at 60% 50%, #07101a 0%, #020407 60%);
  }
  .g-stage canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; touch-action: none; cursor: grab; }
  .g-stage canvas:active { cursor: grabbing; }
  .g-stage.is-ready canvas { opacity: 1; }
  .g-loading { position: absolute; left: 0; right: 0; top: 48%; text-align: center; color: var(--dim); font-size: .9rem; }
  .g-stage.is-ready .g-loading, .no-gl .g-loading { display: none; }
  .g-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .g-label {
    position: absolute; left: 0; top: 0; margin: -.5rem 0 0 .55rem; white-space: nowrap;
    font: 400 .74rem/1 var(--mono); color: #f4f7f5; text-shadow: 0 0 3px #000, 0 0 6px #000, 0 0 1px #000;
    transition: opacity .25s linear;
  }

  /* the words: a dark glass panel over the globe */
  .g-panel {
    position: absolute; z-index: 2; top: 1.1rem; left: var(--gutter); width: min(25rem, 34vw);
    max-height: calc(100% - 2.2rem); overflow: auto; overscroll-behavior: contain;
    padding: .95rem 1.1rem 1.1rem; background: rgba(3, 7, 9, .74); border: 1px solid rgba(114, 213, 242, .16);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .g-title { margin: .25rem 0 .2rem; font: 700 clamp(1.15rem, 2vw, 1.45rem)/1.3 var(--mono); color: var(--green); }
  .g-when { color: var(--fg); font-size: .88rem; }
  .g-msg { margin-top: .7rem; color: var(--amber); font-size: .88rem; }
  .g-list-title { margin-top: .9rem; color: var(--green); font-size: .88rem; }
  .g-list { list-style: none; margin: .35rem 0 0; padding: 0; border-top: 1px dashed var(--line); counter-reset: g; }
  .g-list li { display: grid; grid-template-columns: 3.6ch minmax(0, 1fr); gap: 0 .8ch; align-items: center; border-bottom: 1px dashed var(--line); counter-increment: g; font-size: .88rem; }
  .g-list li::before { content: "[" counter(g) "]"; color: var(--dim); }
  .g-pair {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .8ch; align-items: baseline; width: 100%; min-height: 2.4rem;
    padding: .3rem .2rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  }
  .g-pair:hover, .g-pair[aria-pressed="true"] { background: rgba(255, 198, 92, .09); }
  .g-pair[aria-pressed="true"] .g-v { color: var(--amber); }
  .g-c-o { color: var(--amber); }
  .g-c-t { color: var(--red); }
  .g-v { color: var(--fg); white-space: nowrap; }
  .g-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6ch; margin-top: .7rem; color: var(--dim); font-size: .8rem; }
  .g-key { display: inline-block; width: .62rem; height: .62rem; border-radius: 50%; }
  .g-key-o { background: var(--amber); }
  .g-key-t { margin-left: 1.4ch; box-shadow: inset 0 0 0 2px var(--red); }
  .g-cap, .g-hint { margin-top: .55rem; color: var(--dim); font-size: .8rem; line-height: 1.6; }
  .g-actions { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: .7rem 0 0 -.6rem; }
  .g-src { margin-top: .6rem; color: var(--dim); font-size: .74rem; line-height: 1.6; }

  /* narrow screens: the globe first, the words under it */
  @media (max-width: 860px) {
    .g-stage { height: min(82vh, 112vw); min-height: 20rem; }
    .g-panel { position: static; width: auto; max-height: none; margin: 0 var(--gutter) 2.5rem; padding: 1rem 0 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  }
  /* without WebGL: no stage, only the words */
  .no-gl .g-stage { display: none; }
  .no-gl .g-panel { position: static; width: auto; max-width: 40rem; max-height: none; margin: 1.5rem var(--gutter) 3rem; }