/* game/game.css
 * LET ME IN: home screen, the door scene, spotlight, plead form, and verdict
 * stamps. The theatrical CSS silhouette art lives here too. Studio identity
 * stays black plus chartreuse (#C6F542) at the frame; the game's own palette
 * (deep velvet plum, warm brass, neon pink) lives inside the scene per the
 * brand law. Wall, archive, footer, and overlays continue in wall.css to
 * keep both files under the per file line cap.
 */

:root {
  --lindy-chartreuse: #c6f542;
  --lindy-black: #0a0a0a;
  --lmi-plum: #1c0f22;
  --lmi-plum-deep: #0e0812;
  --lmi-brass: #d9a441;
  --lmi-neon-pink: #ff3f8e;
  --lmi-crimson: #c42a2a;
  --lmi-cream: #f5f5f0;
  --lmi-radius: 20px;
  --lmi-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--lindy-black);
  color: var(--lmi-cream);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

button { font-family: inherit; }

.lmi-shell {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------------- Top bar ---------------- */

.lmi-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 10px;
}

.lmi-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lmi-brand__mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lindy-chartreuse);
  box-shadow: 0 0 12px rgba(198, 245, 66, 0.7);
}

.lmi-brand h1 {
  font-size: 1.05rem;
  margin: 0;
  letter-spacing: -0.01em;
}

.lmi-nav {
  display: flex;
  gap: 6px;
}

.lmi-nav button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--lmi-cream);
  border-radius: 999px;
  padding: 8px 12px;
  font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s var(--lmi-ease), border-color 0.2s var(--lmi-ease);
}

.lmi-nav button[aria-current="true"] {
  background: var(--lindy-chartreuse);
  color: var(--lindy-black);
  border-color: var(--lindy-chartreuse);
}

.lmi-nav button:hover { border-color: rgba(198, 245, 66, 0.5); }

/* ---------------- Screens ---------------- */

.lmi-screen {
  flex: 1;
  padding: 8px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lmi-screen[hidden] { display: none; }

/* ---------------- Home ---------------- */

.lmi-home-hero {
  padding: 28px 22px;
  border-radius: var(--lmi-radius);
  background: linear-gradient(160deg, var(--lmi-plum), var(--lmi-plum-deep));
  border: 1px solid rgba(217, 164, 65, 0.25);
  position: relative;
  overflow: hidden;
}

.lmi-home-hero::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 220px;
  background: radial-gradient(ellipse at center, rgba(255, 63, 142, 0.28), transparent 70%);
  pointer-events: none;
}

.lmi-home-hero h2 {
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  position: relative;
}

.lmi-home-hero p {
  margin: 0 0 20px;
  color: rgba(245, 245, 240, 0.72);
  line-height: 1.5;
  position: relative;
  max-width: 40ch;
}

.lmi-button {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  font: 800 14px/1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.2s var(--lmi-ease), box-shadow 0.2s var(--lmi-ease);
}

.lmi-button--primary {
  background: var(--lindy-chartreuse);
  color: var(--lindy-black);
  box-shadow: 0 10px 28px -10px rgba(198, 245, 66, 0.6);
}

.lmi-button--primary:hover { transform: translateY(-2px); }

.lmi-button--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--lmi-cream);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.lmi-button--ghost:hover { border-color: rgba(198, 245, 66, 0.5); }

.lmi-how {
  display: grid;
  gap: 10px;
}

.lmi-how__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.lmi-how__num {
  font: 900 13px/1 "Space Mono", ui-monospace, Menlo, monospace;
  color: var(--lindy-chartreuse);
  flex: 0 0 auto;
  padding-top: 2px;
}

.lmi-how__item p { margin: 0; color: rgba(245, 245, 240, 0.75); font-size: 13.5px; line-height: 1.5; }

/* ---------------- Door scene ---------------- */

.lmi-door-scene {
  position: relative;
  border-radius: var(--lmi-radius);
  overflow: hidden;
  min-height: 62vh;
  background: radial-gradient(ellipse at 50% 20%, #2a1830, var(--lmi-plum-deep) 70%);
  border: 1px solid rgba(217, 164, 65, 0.2);
  display: flex;
  flex-direction: column;
  padding: 20px 18px 24px;
  isolation: isolate;
}

.lmi-door-scene__badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.lmi-day-chip {
  font: 800 11px/1 "Space Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  color: var(--lmi-brass);
  background: rgba(217, 164, 65, 0.14);
  border: 1px solid rgba(217, 164, 65, 0.4);
  border-radius: 999px;
  padding: 6px 12px;
}

.lmi-offline-badge {
  font: 700 10px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.6);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 5px 10px;
}

.lmi-neon-title {
  font: 900 clamp(1.3rem, 6vw, 1.9rem) system-ui, sans-serif;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--lmi-neon-pink);
  text-shadow: 0 0 12px rgba(255, 63, 142, 0.75), 0 0 30px rgba(255, 63, 142, 0.35);
  margin: 6px 0 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .lmi-neon-title { animation: neonFlicker 5s infinite; }
}

@keyframes neonFlicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.6; }
  94% { opacity: 1; }
  95% { opacity: 0.7; }
  96% { opacity: 1; }
}

.lmi-door-visual {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 220px;
  margin: 10px 0;
}

/* The door itself, CSS drawn: frame + panel + rope + doorman silhouette. */

.lmi-door {
  position: relative;
  width: 62%;
  max-width: 220px;
  aspect-ratio: 3 / 5;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #3a2418, #201206);
  border: 4px solid #17100a;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7), inset 0 0 0 2px rgba(217, 164, 65, 0.25);
}

.lmi-door::before {
  content: "";
  position: absolute;
  inset: 14% 12%;
  border: 2px solid rgba(217, 164, 65, 0.3);
  border-radius: 6px;
}

.lmi-door__knob {
  position: absolute;
  right: 10%;
  top: 52%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lmi-brass);
  box-shadow: 0 0 8px rgba(217, 164, 65, 0.6);
}

.lmi-rope {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7a1e1e, var(--lmi-crimson), #7a1e1e);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.lmi-rope::before, .lmi-rope::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 6px;
  height: 26px;
  background: #4a3520;
  border-radius: 2px;
}

.lmi-rope::before { left: -4px; }
.lmi-rope::after { right: -4px; }

.lmi-doorman-silhouette {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: 46%;
  max-width: 150px;
  aspect-ratio: 2 / 3;
  z-index: 2;
}

.lmi-doorman-silhouette__body {
  position: absolute;
  inset: 18% 0 0;
  background: #0a0508;
  border-radius: 50% 50% 20% 20% / 40% 40% 12% 12%;
}

.lmi-doorman-silhouette__head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0a0508;
}

.lmi-doorman-silhouette__glasses {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;
  height: 14%;
  background: var(--lindy-chartreuse);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(198, 245, 66, 0.6);
}

.lmi-doorman-portrait {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 160px;
  border-radius: 12px;
  z-index: 2;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.7);
}

.lmi-doorman-portrait[hidden], .lmi-doorman-silhouette[hidden] { display: none; }

.lmi-door-meta {
  text-align: center;
  margin-top: 6px;
}

.lmi-door-title {
  font-size: clamp(1.1rem, 4.5vw, 1.35rem);
  margin: 0 0 4px;
  color: var(--lmi-cream);
}

.lmi-door-setting {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(245, 245, 240, 0.62);
}

.lmi-doorman-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 12px;
  border: 1px solid rgba(217, 164, 65, 0.2);
  text-align: left;
}

.lmi-doorman-name {
  font: 800 11px/1 "Space Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0.06em;
  color: var(--lmi-brass);
  text-transform: uppercase;
}

.lmi-doorman-greeting {
  margin: 4px 0 0;
  font-style: italic;
  color: rgba(245, 245, 240, 0.85);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------------- Spotlight moment ---------------- */

.lmi-door-scene.is-spotlit .lmi-door-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -20%;
  transform: translateX(-50%);
  width: 60%;
  height: 140%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 244, 200, 0.22), transparent 65%);
  pointer-events: none;
  z-index: 1;
}

.lmi-door-scene.is-spotlit .lmi-doorman-line,
.lmi-door-scene.is-spotlit .lmi-door-setting {
  opacity: 0.5;
}

.lmi-plead-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lmi-plead-input-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lmi-plead-input {
  flex: 1;
  appearance: none;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--lmi-cream);
  padding: 13px 14px;
  font: 500 15px/1.3 system-ui, sans-serif;
  transition: border-color 0.2s var(--lmi-ease), background 0.2s var(--lmi-ease);
}

.lmi-plead-input:focus {
  outline: none;
  border-color: var(--lindy-chartreuse);
  background: rgba(198, 245, 66, 0.06);
}

.lmi-plead-input:disabled { opacity: 0.5; }

.lmi-plead-submit {
  flex: 0 0 auto;
}

.lmi-plead-meta {
  display: flex;
  justify-content: space-between;
  font: 600 11px/1 "Space Mono", ui-monospace, Menlo, monospace;
  color: rgba(245, 245, 240, 0.45);
  padding: 0 2px;
}

.lmi-char-count[data-low="true"] { color: var(--lmi-neon-pink); }

/* ---------------- Verdict stage ---------------- */

.lmi-verdict-panel {
  border-radius: var(--lmi-radius);
  padding: 26px 20px 24px;
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  border: 1px solid rgba(217, 164, 65, 0.2);
  overflow: hidden;
}

.lmi-verdict-panel[data-verdict="in"] {
  background: radial-gradient(ellipse at 50% 0%, rgba(198, 245, 66, 0.16), var(--lmi-plum-deep) 70%);
}

.lmi-verdict-panel[data-verdict="denied"] {
  background: radial-gradient(ellipse at 50% 0%, rgba(196, 42, 42, 0.18), var(--lmi-plum-deep) 70%);
}

.lmi-verdict-headline {
  font: 950 clamp(2.4rem, 14vw, 3.4rem) system-ui, sans-serif;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  transform: rotate(-4deg);
}

.lmi-verdict-panel[data-verdict="in"] .lmi-verdict-headline {
  color: var(--lindy-chartreuse);
  text-shadow: 0 0 30px rgba(198, 245, 66, 0.5);
}

.lmi-verdict-panel[data-verdict="denied"] .lmi-verdict-headline {
  color: var(--lmi-crimson);
  border: 6px solid var(--lmi-crimson);
  border-radius: 10px;
  padding: 2px 20px;
  text-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
  .lmi-verdict-panel[data-verdict="in"] .lmi-verdict-headline {
    animation: verdictPop 0.5s var(--lmi-ease);
  }
  .lmi-verdict-panel[data-verdict="denied"] .lmi-verdict-headline {
    animation: stampDown 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

@keyframes verdictPop {
  0% { transform: rotate(-4deg) scale(0.4); opacity: 0; }
  60% { transform: rotate(-4deg) scale(1.12); }
  100% { transform: rotate(-4deg) scale(1); opacity: 1; }
}

@keyframes stampDown {
  0% { transform: rotate(-4deg) scale(2.6); opacity: 0; }
  70% { opacity: 1; }
  100% { transform: rotate(-4deg) scale(1); opacity: 1; }
}

.lmi-verdict-line {
  font-size: 15px;
  font-style: italic;
  color: rgba(245, 245, 240, 0.85);
  margin: 4px 0 16px;
  max-width: 34ch;
}

.lmi-verdict-reply-box {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid rgba(217, 164, 65, 0.2);
  max-width: 38ch;
  margin-bottom: 6px;
}

.lmi-verdict-doorman {
  display: block;
  font: 800 11px/1 "Space Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0.06em;
  color: var(--lmi-brass);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.lmi-verdict-reply {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--lmi-cream);
  min-height: 3.2em;
}

.lmi-verdict-offline {
  font: 700 10px/1 system-ui, sans-serif;
  color: rgba(245, 245, 240, 0.5);
  margin: 6px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lmi-coin-reward {
  font: 800 12px/1 "Space Mono", ui-monospace, Menlo, monospace;
  color: var(--lindy-chartreuse);
  margin: 8px 0 4px;
}

.lmi-verdict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}