/* "While you were away" — what the island did in your absence.

   Shown once on arrival, and only when there is something to say. It is a
   card in the corner rather than a modal over the world: this is news worth
   reading, not a door you have to close before you can play. */

#away {
  position:fixed; left:12px; top:56px; z-index:6;
  width:min(320px, calc(100vw - 24px));
  background:rgba(12,20,28,.72); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12); border-radius:10px;
  padding:12px 14px 13px;
  font-size:12px; line-height:1.55;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  animation:awayIn .32s ease-out both;
}
#away[hidden] { display:none !important; }

@keyframes awayIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce) { #away { animation:none; } }

#away h2 {
  font-size:11px; text-transform:uppercase; letter-spacing:.14em;
  opacity:.55; font-weight:600; margin:0 0 2px;
}
#away .gap { color:#8fd6a8; font-weight:600; font-size:15px; margin-bottom:9px; }

#away section { margin-top:9px; }
#away section h3 {
  font-size:10px; text-transform:uppercase; letter-spacing:.12em;
  opacity:.45; font-weight:600; margin:0 0 3px;
}
#away ul { list-style:none; margin:0; padding:0; }
#away li { opacity:.9; padding:1px 0 1px 12px; position:relative; }
#away li::before {
  content:""; position:absolute; left:2px; top:.62em;
  width:4px; height:4px; border-radius:50%; background:#8fd6a8; opacity:.65;
}

/* Dismiss. Deliberately a real target rather than a 12px × — this gets tapped
   on a phone, in the corner, with a thumb. */
#awayClose {
  margin-top:11px; width:100%; padding:7px 10px;
  font:inherit; font-size:12px; color:inherit;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:7px; cursor:pointer;
  transition:background .12s, border-color .12s;
}
#awayClose:hover { background:rgba(143,214,168,.16); border-color:rgba(143,214,168,.5); }
#awayClose:active { transform:translateY(1px); }