/*
 * The hourly rain, docked to the top left.
 *
 * Loaded on every page, alongside mm2chat.css.
 *
 * Unlike the chat, this does not reserve a layout column and does not reflow
 * the page. It sits in the corner over the header. That is a real difference
 * and it is deliberate: the chat is a conversation you read for minutes, so it
 * gets a column and the page makes room. The rain is a number and a button, and
 * a site-wide reflow to accommodate it would move every game on the site for a
 * widget most people will glance at once.
 *
 * The one concession is the z-index and the offset: below the header's own
 * stacking so it never covers a control, above the page so it is always
 * visible.
 */

/*
 * The header is made room for the widget rather than being covered by it.
 *
 * This started as a plain `position: fixed` panel in the corner, and it covered
 * the first link on every page: the site logo on the game pages, the home link,
 * "← All battles" on the battle page. All three are navigation, and a widget
 * that hides navigation is worse than no widget.
 *
 * Reserving the space in the header, rather than measuring where the header
 * ends and dropping below it, is deliberate. Header heights differ per page -
 * 36px on the battle page, 95px on the game pages, 142px on cases - and the
 * battle page's logo sits *below* its header element entirely. Any fixed offset
 * is wrong on at least one page, and a JavaScript measurement of "where does the
 * header end" is a guess that rots the first time a header changes. One rule
 * that reserves the space is correct on all of them, and needs nothing kept in
 * step with fifteen different stylesheets.
 *
 * Only the header reflows. The page body does not, so no game on the site
 * moves.
 */
:root {
  --mm2rain-w: 232px;
  --mm2rain-closed-w: 132px;
}

body.mm2rain-on .navbar,
body.mm2rain-on header.top,
body.mm2rain-on header {
  padding-left: calc(var(--mm2rain-w) + 36px);
  transition: padding-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

body.mm2rain-on.mm2rain-collapsed .navbar,
body.mm2rain-on.mm2rain-collapsed header.top,
body.mm2rain-on.mm2rain-collapsed header {
  padding-left: calc(var(--mm2rain-closed-w) + 36px);
}

.mm2rain {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 115;
  width: var(--mm2rain-w);
  background: #111827;
  border: 1px solid #1e293b;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  font-size: 0.82rem;
  color: #cbd5e1;
  overflow: hidden;
}

/* Collapsed: the head row stays, so it can be reopened. */
.mm2rain-closed .mm2rain-body {
  display: none;
}

.mm2rain-closed {
  width: var(--mm2rain-closed-w);
}

/* ── head ──────────────────────────────────────────────────────────── */
.mm2rain-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: #0f172a;
  border-bottom: 1px solid #1e293b;
}

.mm2rain-closed .mm2rain-head {
  border-bottom: none;
}

.mm2rain-title {
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.6px;
  color: #e2e8f0;
}

.mm2rain-toggle {
  background: transparent;
  border: 0;
  color: #64748b;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
}

.mm2rain-toggle:hover {
  color: #e2e8f0;
  background: #1e293b;
}

/* ── body ──────────────────────────────────────────────────────────── */
.mm2rain-body {
  padding: 10px;
}

.mm2rain-pot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.mm2rain-pot-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #64748b;
}

.mm2rain-pot-value {
  font-size: 1.06rem;
  font-weight: 900;
  color: #f0c040;
  font-variant-numeric: tabular-nums;
}

/* The pot is at the floor and the hour is up: this drop will actually pay. */
.mm2rain-pot-value.mm2rain-ready {
  color: #4ade80;
}

/* ── progress toward the floor ─────────────────────────────────────── */
.mm2rain-bar {
  height: 6px;
  border-radius: 3px;
  background: #1e293b;
  overflow: hidden;
}

.mm2rain-bar-fill {
  height: 100%;
  width: 0;
  background: #3b82f6;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.mm2rain-bar-full .mm2rain-bar-fill {
  background: #4ade80;
}

.mm2rain-bar-note {
  margin-top: 4px;
  font-size: 0.62rem;
  color: #64748b;
  text-align: right;
}

/* ── timer + joiners ───────────────────────────────────────────────── */
.mm2rain-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0;
  font-size: 0.7rem;
}

.mm2rain-timer {
  color: #4a90d9;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mm2rain-timer.mm2rain-due {
  color: #4ade80;
}

.mm2rain-joined {
  color: #64748b;
}

/* ── the button ────────────────────────────────────────────────────── */
.mm2rain-join {
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: #3b82f6;
  color: #06121f;
  font-weight: 800;
  font-size: 0.76rem;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.mm2rain-join:hover:not(:disabled) {
  filter: brightness(1.1);
}

.mm2rain-join:active:not(:disabled) {
  transform: translateY(1px);
}

.mm2rain-join:disabled {
  cursor: default;
}

.mm2rain-join.mm2rain-joined-btn {
  background: #14532d;
  color: #86efac;
}

.mm2rain-note {
  margin-top: 6px;
  font-size: 0.64rem;
  line-height: 1.35;
  color: #64748b;
  min-height: 0;
}

.mm2rain-note.mm2rain-good {
  color: #4ade80;
}

.mm2rain-note.mm2rain-warn {
  color: #fbbf24;
}

/*
 * On a phone the panel would cover most of the top of the page, so it starts
 * collapsed there. Still on every page, still with the pot showing on tap -
 * which is the thing that makes it a pot and not a decoration.
 */
@media (max-width: 560px) {
  :root {
    --mm2rain-w: 168px;
    --mm2rain-closed-w: 116px;
  }

  .mm2rain {
    top: 8px;
    left: 8px;
  }
}