/* A sim's landing page (index.html for Theatre of Blood, tfa/index.html
   for The Fractured Archive), built from the trainers' settings panel:
   panels with a hairline and soft shadow, cards inside them, display-face
   headings, bordered buttons. The rooms are the shared room picker in its
   cards layout (shared/js/room-picker.js); <body data-sim> says whose. */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  min-height: 100vh;
  padding: 56px 24px 40px;
  background:
    radial-gradient(70% 45% at 50% -8%, rgba(168, 50, 60, 0.10), transparent 70%),
    var(--ground);
  color: var(--bone);
  font-family: var(--font-ui);
  line-height: 1.5;
}
.page { max-width: 1080px; margin: 0 auto; }

/* ---- Title ---- */
.hero { margin-bottom: 28px; padding: 0 4px; }
h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.005em;
}
h1 em { font-style: normal; color: var(--blood); }
.subtitle { margin-top: 8px; color: var(--dim); font-size: 0.92rem; }

/* ---- Panels (the settings panel's look) ---- */
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.panel + .panel { margin-top: 18px; }
.panel-head {
  padding: 22px 22px 14px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
}
.panel-body { padding: 0 22px 22px; }

/* The rooms panel is the deeper well the portraits sit in */
.rooms-panel {
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(168, 50, 60, 0.06), transparent 70%),
    var(--panel-solid);
}

/* Four rooms a row where they fit (ToB's eight in two rows), two on
   tablets, one on phones. The Archive is a route: two doors a row, its
   first and last fights across both (rooms.js `wide`). */
#rooms .rp--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-sim="tfa"] #rooms .rp--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { #rooms .rp--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #rooms .rp--cards, [data-sim="tfa"] #rooms .rp--cards { grid-template-columns: minmax(0, 1fr); } }

/* ---- The vote under an unreleased room ---- */
.vote-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.vote-btn,
.feedback-submit {
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--dim);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.vote-btn:hover,
.feedback-submit:hover {
  color: var(--bone);
  border-color: var(--dim);
  background: rgba(214, 208, 198, 0.07);
}
.vote-btn.voted { color: var(--faint); border-color: var(--line); background: none; cursor: default; pointer-events: none; }

/* ---- Feedback ---- */
.feedback-panel .panel-body { max-width: 640px; }
.feedback-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.feedback-form textarea {
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.25);
  color: var(--bone);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  resize: vertical;
  transition: border-color 0.15s;
}
.feedback-form textarea:focus { outline: none; border-color: var(--dim); }
.feedback-form textarea::placeholder { color: var(--faint); }
.feedback-actions { display: flex; align-items: center; gap: 12px; }
.feedback-submit:disabled { border-color: var(--line); color: var(--faint); background: none; cursor: default; }
.feedback-status { font-size: 0.78rem; color: var(--dim); }

/* ---- Footer ---- */
.legal {
  margin-top: 28px;
  padding: 0 4px;
  color: var(--faint);
  font-size: 0.72rem;
  line-height: 1.55;
  max-width: 60ch;
}
.legal + .legal { margin-top: 6px; }

@media (max-width: 600px) {
  body { padding: 32px 12px 32px; }
  .panel-head { padding: 18px 16px 12px; font-size: 1.4rem; }
  .panel-body { padding: 0 12px 14px; }
}
@media (hover: hover) {
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .panel { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  }
}