/* Tiny Room Stylist: email gate. Everything is scoped under .trs-gate so it cannot leak into the game or the site. */
.trs-gate {
  --tg-cream: #F4EDE2; --tg-paper: #FBF8F3; --tg-line: #DCD0BE; --tg-ink: #2B2620; --tg-muted: #6B5F52;
  --tg-clay: #C4744A; --tg-clay-d: #9C5430; --tg-brass: #C9A15A;
  box-sizing: border-box;
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.25rem 1.1rem 1.4rem;
  background: var(--tg-paper);
  color: var(--tg-ink);
  border: 1px solid var(--tg-line);
  border-radius: 20px;
  font: 400 1rem/1.5 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-align: left;
}
.trs-gate *, .trs-gate *::before, .trs-gate *::after { box-sizing: border-box; }
.trs-gate .tg-title {
  margin: 0 0 .4rem;
  font: 600 1.55rem/1.2 'Fraunces', Georgia, 'Times New Roman', serif;
  color: var(--tg-ink);
}
.trs-gate .tg-title:focus { outline: none; }
.trs-gate .tg-lead { margin: 0 0 1rem; color: var(--tg-muted); font-size: .98rem; }
.trs-gate .tg-label { display: block; margin: 0 0 .35rem; font-weight: 700; font-size: .9rem; }
.trs-gate .tg-row { display: flex; flex-direction: column; gap: .6rem; }
.trs-gate .tg-input {
  width: 100%; min-height: 48px;
  font: inherit; font-size: 1rem;   /* 16px stops iOS zooming on focus */
  padding: .7rem 1rem;
  color: var(--tg-ink); background: #fff;
  border: 1px solid var(--tg-line); border-radius: 999px;
}
.trs-gate .tg-input:focus { outline: 3px solid var(--tg-clay); outline-offset: 1px; border-color: var(--tg-clay); }
.trs-gate .btn, .trs-gate .tg-btn, .trs-gate .tg-retry {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: 48px;
  padding: .75rem 1.5rem;
  font: 700 .98rem/1.2 'DM Sans', system-ui, sans-serif;
  color: #fff; background: var(--tg-clay);
  border: 2px solid var(--tg-clay); border-radius: 999px;
  cursor: pointer; text-decoration: none;
  transition: background .15s, transform .15s;
}
.trs-gate .btn:hover { background: var(--tg-clay-d); border-color: var(--tg-clay-d); }
.trs-gate .btn:focus-visible { outline: 3px solid var(--tg-brass); outline-offset: 2px; }
.trs-gate .btn[disabled] { opacity: .7; cursor: wait; }
.trs-gate .tg-retry { margin-top: .6rem; background: transparent; color: var(--tg-clay-d); border-color: var(--tg-clay); }
.trs-gate .tg-retry:hover { color: #fff; }
.trs-gate .tg-retry[hidden] { display: none; }
.trs-gate .tg-opt {
  display: flex; gap: .7rem; align-items: flex-start;
  min-height: 48px; padding: .5rem 0;
  margin-top: .5rem;
  font-size: .9rem; line-height: 1.4; color: var(--tg-muted); cursor: pointer;
}
.trs-gate .tg-opt input { flex: none; width: 24px; height: 24px; margin: .05rem 0 0; accent-color: var(--tg-clay); }
.trs-gate .tg-msg { margin: .4rem 0 0; min-height: 0; color: #9E3B22; font-weight: 500; font-size: .92rem; }
.trs-gate .tg-msg:empty { margin: 0; }
.trs-gate .tg-small { margin: .8rem 0 0; font-size: .8rem; color: var(--tg-muted); }
.trs-gate .tg-small a { color: var(--tg-clay-d); }
.trs-gate .tg-checking, .trs-gate .tg-done { margin: 0; padding: .6rem 0; color: var(--tg-muted); }
.trs-gate .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
@media (min-width: 30rem) {
  .trs-gate { padding: 1.6rem 1.6rem 1.7rem; }
  .trs-gate .tg-row { flex-direction: row; }
  .trs-gate .tg-input { flex: 1 1 14rem; min-width: 0; }
  .trs-gate .tg-btn { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .trs-gate .btn { transition: none; } }

/* the "made real" picture: Build Pack pages on the left, the paper room on the right */
.tg-pic{position:relative;margin:0 0 1rem;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#E6D9C4;box-shadow:0 6px 18px rgba(42,30,23,.12)}
.tg-pic img{display:block;width:100%;height:100%;object-fit:cover}
.tg-tag{position:absolute;bottom:8px;padding:.25rem .65rem;border-radius:999px;background:rgba(251,248,243,.92);color:#2B2620;font:700 .72rem/1.2 "DM Sans",system-ui,sans-serif;letter-spacing:.04em;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.tg-tag.l{left:8px}.tg-tag.r{right:8px}