/* game/wall.css
 * The wall, the archive, the FX canvas anchor, footer/status controls, and
 * install / share overlays. Split from game.css to stay under the per file
 * line cap; loaded as a second stylesheet after game.css, shares its tokens.
 */

/* ---------------- Wall ---------------- */

.lmi-wall-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.lmi-wall-header h2 { margin: 0; font-size: 1.3rem; }

.lmi-guest-chip {
  font: 700 12px/1 "Space Mono", ui-monospace, Menlo, monospace;
  color: var(--lindy-chartreuse);
  background: rgba(198, 245, 66, 0.1);
  border: 1px solid rgba(198, 245, 66, 0.35);
  border-radius: 999px;
  padding: 7px 12px;
}

.lmi-wall-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wall-item {
  position: relative;
  padding: 14px 14px 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.wall-item[data-rank="1"] {
  border-color: rgba(217, 164, 65, 0.5);
  background: linear-gradient(160deg, rgba(217, 164, 65, 0.14), rgba(255, 255, 255, 0.03));
}

.wall-item__rank {
  font: 900 12px/1 "Space Mono", ui-monospace, Menlo, monospace;
  color: var(--lmi-brass);
}

.wall-item__line {
  margin: 8px 0;
  font-size: 14.5px;
  font-style: italic;
  color: var(--lmi-cream);
  line-height: 1.5;
}

.wall-item__meta {
  display: flex;
  gap: 8px;
  align-items: center;
}

.wall-item__verdict {
  font: 800 10px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 999px;
}

.wall-item__verdict[data-verdict="in"] {
  color: var(--lindy-black);
  background: var(--lindy-chartreuse);
}

.wall-item__votes {
  font: 600 11px/1 system-ui, sans-serif;
  color: rgba(245, 245, 240, 0.5);
}

.wall-item__vote-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  appearance: none;
  border: 1px solid rgba(198, 245, 66, 0.4);
  background: rgba(198, 245, 66, 0.08);
  color: var(--lindy-chartreuse);
  border-radius: 999px;
  padding: 6px 14px;
  font: 700 11px/1 system-ui, sans-serif;
  cursor: pointer;
}

.wall-item__vote-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.wall-item.is-voted .wall-item__vote-btn {
  background: var(--lindy-chartreuse);
  color: var(--lindy-black);
}

.lmi-wall-empty {
  text-align: center;
  color: rgba(245, 245, 240, 0.5);
  padding: 30px 10px;
  font-size: 13.5px;
}

/* ---------------- Archive ---------------- */

.lmi-archive-list {
  display: grid;
  gap: 8px;
}

.archive-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--lmi-cream);
  cursor: pointer;
}

.archive-item:hover { border-color: rgba(198, 245, 66, 0.4); }

.archive-item__day {
  font: 800 10px/1 "Space Mono", ui-monospace, Menlo, monospace;
  color: var(--lmi-brass);
  letter-spacing: 0.05em;
}

.archive-item__title { font-size: 14px; }

.archive-detail {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(217, 164, 65, 0.25);
}

.archive-detail h3 { margin: 0 0 8px; font-size: 1.1rem; }
.archive-detail__setting { font-size: 13px; color: rgba(245, 245, 240, 0.65); line-height: 1.5; }
.archive-detail__doorman { font: 700 12px/1 system-ui, sans-serif; color: var(--lmi-brass); margin: 10px 0; }
.archive-detail__winners { margin: 10px 0 0; padding-left: 18px; }
.archive-detail__winners li { font-size: 13px; margin-bottom: 6px; color: rgba(245, 245, 240, 0.8); }
.archive-detail__empty { font-size: 12.5px; color: rgba(245, 245, 240, 0.45); }

/* ---------------- FX canvas ---------------- */

.fx-canvas {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

/* ---------------- Footer / status / controls ---------------- */

.lmi-footer {
  padding: 10px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lmi-status {
  font-size: 12.5px;
  color: rgba(245, 245, 240, 0.55);
  text-align: center;
  min-height: 1.4em;
}

.lmi-control-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.lmi-control-buttons button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--lmi-cream);
  border-radius: 999px;
  padding: 9px 16px;
  font: 700 12px/1 system-ui, sans-serif;
  cursor: pointer;
}

/* ---------------- Install / share overlays ---------------- */

.lmi-install {
  appearance: none;
  cursor: pointer;
  border: 0;
  background: var(--lindy-chartreuse);
  color: var(--lindy-black);
  font: 700 12px/1 system-ui, sans-serif;
  padding: 9px 13px;
  border-radius: 999px;
  display: none;
  align-items: center;
  gap: 6px;
}

.lmi-install.show { display: inline-flex; }

.lmi-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 4, 8, 0.72);
  backdrop-filter: blur(4px);
}

.lmi-overlay.show { display: flex; }

.lmi-overlay .panel {
  background: #150c1a;
  border: 1px solid rgba(217, 164, 65, 0.3);
  border-radius: 18px;
  max-width: 380px;
  width: 100%;
  padding: 26px 24px;
  color: var(--lmi-cream);
  box-shadow: 0 30px 80px -30px #000;
}

.lmi-overlay h3 { margin: 0 0 10px; font-size: 1.15rem; }
.lmi-overlay p, .lmi-overlay li { color: rgba(245, 245, 240, 0.7); font-size: 14px; line-height: 1.55; }
.lmi-overlay ol { margin: 12px 0; padding-left: 20px; }
.lmi-overlay .preview { width: 100%; border-radius: 12px; margin: 4px 0 14px; display: block; }
.lmi-overlay .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.lmi-overlay .acts a, .lmi-overlay .acts button {
  flex: 1; min-width: 130px; text-align: center; text-decoration: none; cursor: pointer;
  font: 700 13px/1 system-ui, sans-serif; padding: 12px 14px; border-radius: 11px; border: 0;
}
.lmi-overlay .acts .primary { background: var(--lindy-chartreuse); color: var(--lindy-black); }
.lmi-overlay .acts .ghost { background: transparent; color: var(--lmi-cream); border: 1px solid rgba(255, 255, 255, 0.3); }
.lmi-overlay .close { margin-top: 14px; width: 100%; background: none; border: 0; color: rgba(245, 245, 240, 0.5); font: 600 12px system-ui; cursor: pointer; }

/* ---------------- Responsive ---------------- */

/* The studio chip (top left) and coin HUD (top right) from lindy-studio.js
   and lindy-coin.js are position: fixed overlays outside our own DOM flow.
   Below 480px they visually crowd our topbar, so we drop our own brand mark
   and nav underneath them instead of fighting for the same row. */
@media (max-width: 480px) {
  .lmi-shell { padding-top: 46px; }
  .lmi-topbar { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .lmi-brand { order: 1; }
  .lmi-nav { order: 2; width: 100%; justify-content: center; }
  .lmi-install { order: 3; }
}

@media (max-width: 380px) {
  .lmi-door-title { font-size: 1.05rem; }
  .lmi-verdict-headline { font-size: 2.1rem; }
  .lmi-nav button { padding: 8px 10px; font-size: 11px; }
}

@media (min-width: 640px) {
  .lmi-shell { max-width: 560px; }
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .lmi-neon-title { animation: none; }
  .lmi-verdict-panel[data-verdict="in"] .lmi-verdict-headline,
  .lmi-verdict-panel[data-verdict="denied"] .lmi-verdict-headline {
    animation: none;
  }
}