/* Fixed right-side info rail — Rashid & Tibiadrome live widgets.
   Floats over the empty right margin next to the centered .container,
   identical pattern to tools-rail on the left. Hidden below 1100px so
   it never overlaps the main content. */

.info-rail {
  /* Same counter-zoom as the tools rail; see tools-rail.css. The origin is
     the top-right corner because that is the edge this one is anchored to, so
     it shrinks inwards and its 24px gap from the window edge is kept. Its
     height is content-driven, so unlike the other rail it needs no
     compensation. */
  transform: scale(var(--rail-k, 1));
  transform-origin: 100% 0;

  position: fixed;
  top: 90px;
  right: 24px;
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9000;
}

/* ── Individual widget card ── */
.info-widget {
  background: rgba(22, 17, 33, 0.88);
  border: 1px solid rgba(123, 44, 191, 0.28);
  border-radius: 12px;
  padding: 12px 16px 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.2s ease;
}

.info-widget:hover {
  border-color: rgba(199, 125, 255, 0.45);
}

/* Widget section header (e.g. "RASHID", "TIBIADROME") */
.info-widget-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #9b72cf;
  margin-bottom: 10px;
}

/* Row with icon + main text */
.info-widget-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-widget-icon {
  width: 37px;
  height: 37px;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Larger variant — used for Rashid */
.info-widget-icon--lg {
  width: 61px;
  height: 61px;
  margin-top: -6px;
}

/* Main value text (city name, countdown) */
.info-widget-value {
  font-size: 17px;
  font-weight: 700;
  color: #e4e4e4;
  line-height: 1.2;
}

/* Clickable mapper link — city name & world quest title */
.info-widget-link {
  text-decoration: none;
  color: #e4e4e4;
  transition: color 0.15s ease;
}

.info-widget-link:hover {
  color: #c77dff;
}

/* Sub-label (rotation number, days left, etc.) */
.info-widget-sub {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #9b72cf;
  padding-left: 47px; /* aligns under text (37px icon + 10px gap) */
}

/* Collapsed: icons only, the same idea as the tools rail. The widgets keep
   their icon so the rail stays a recognisable column of three rather than an
   anonymous strip, and everything that needs width goes. */
.info-rail.collapsed {
  width: 60px;
}

.info-rail.collapsed .info-widget-label,
.info-rail.collapsed .info-widget-value,
.info-rail.collapsed .info-widget-sub,
.info-rail.collapsed .info-event-title,
.info-rail.collapsed .info-event-status {
  display: none;
}

.info-rail.collapsed .info-widget,
.info-rail.collapsed .info-event-box {
  padding: 10px 0;
}

.info-rail.collapsed .info-widget-row {
  justify-content: center;
  gap: 0;
}

/* The toggle sits above the widgets, on the rail's own right edge, so it stays
   under the thumb whichever width the rail is at. */
/* Same colours and size as .tools-rail-toggle, deliberately. It was drawn
   fainter -- a 35% border on a translucent fill -- and at 21px, which is what
   30px becomes once --rail-k scales it at high zoom, it read as no button at
   all. Two controls that do the same thing should look the same. */
.info-rail-toggle {
  align-self: flex-end;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1a1622;
  border: 1px solid #7b2cbf;
  color: #c77dff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.info-rail-toggle:hover {
  background: #2a1f3d;
}

.info-rail.collapsed .info-rail-toggle .arrow {
  transform: rotate(180deg);
}

/* Phones do not lose it either. There is no margin to float over at this
   width, so it becomes a drawer -- the same answer as the tools rail, and
   entering from the right because that is the side it belongs to. It used to
   be `display: none` here, which took Rashid, the Tibiadrome timer and the
   event schedule off every phone. */
@media (max-width: 820px) {
  .info-rail {
    display: flex;

    /* Overrides the desktop scale(): a drawer slides, it does not shrink. */
    transform: translateX(100%);
    transform-origin: 100% 0;
    transition: transform 0.25s ease;

    top: 0;
    right: 0;
    height: 100%;
    width: min(260px, 82vw);
    padding: 12px;
    gap: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #171320;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 10050;              /* over the header, which is 10000 */
  }

  .info-rail.drawer-open {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.65);
  }

  /* The collapsed width never applies in drawer mode -- the drawer is either
     off screen or showing everything -- but the class can survive from a wider
     layout, so it is neutralised rather than trusted not to appear. */
  .info-rail.collapsed { width: min(260px, 82vw); }

  .info-rail.collapsed .info-widget-label,
  .info-rail.collapsed .info-widget-value,
  .info-rail.collapsed .info-widget-sub,
  .info-rail.collapsed .info-event-title,
  .info-rail.collapsed .info-event-status { display: initial; }

  .info-rail.collapsed .info-widget,
  .info-rail.collapsed .info-event-box { padding: 12px 16px 14px; }

  .info-rail.collapsed .info-widget-row {
    justify-content: flex-start;
    gap: 10px;
  }
}

/* The opener. Bottom right, mirroring the tools launcher on the left so the
   two read as a pair and neither sits under the other's thumb. */
.info-rail-launcher {
  display: none;
  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(199, 125, 255, 0.45);
  background: linear-gradient(145deg, #4b2a72, #2b1a44);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  color: #e9d4ff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 10040;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.info-rail-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10045;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.info-rail-backdrop.visible { opacity: 1; }

@media (max-width: 820px) {
  .info-rail-launcher { display: flex; }
  .info-rail-backdrop.shown { display: block; }

  body.info-drawer-open { overflow: hidden; }
}

/* ── World Event widget variants ── */

/* Active event: warm accent (amber glow) */
.info-widget--event-active {
  border-color: rgba(255, 180, 50, 0.35);
}

.info-widget--event-active .info-widget-label {
  color: #ffb432;
}

.info-widget--event-active .info-widget-sub--event {
  color: #ffb432;
}

/* Upcoming event: keep default purple muted style */
.info-widget--event-upcoming .info-widget-label {
  color: #9b72cf;
}

.info-widget--event-upcoming .info-widget-sub--event {
  color: #9b72cf;
}

/* Event name font size */
.info-widget-value--event {
  font-size: 16px;
  line-height: 1.3;
}

/* Individual Event Box Enclosures (Official Tibia Colors) */
.info-event-box {
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 8px;
  box-sizing: border-box;
}

.info-event-box-red {
  background: rgba(122, 27, 52, 0.45);
  border: 1px solid rgba(160, 40, 70, 0.75);
}

.info-event-box-blue {
  background: rgba(36, 101, 123, 0.45);
  border: 1px solid rgba(52, 140, 170, 0.75);
}

.info-event-box + .info-event-box {
  margin-top: 8px;
}

.info-event-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.info-event-status {
  font-size: 11px;
  font-weight: 700;
  margin-top: 3px;
  letter-spacing: 0.3px;
}

.info-event-status-active {
  color: #ffb432;
  font-weight: 800;
}

.info-event-status-upcoming {
  color: #b3a0d0;
}