/* ==========================
   MY LOVEJOY PROFILE TEASER
   ========================== */

.member-main-title { width:min(100%,620px); margin:0 0 5px; }
.profile-coming-heading { width:min(100%,500px); margin:0 0 7px; }
.profile-future-heading { width:min(100%,610px); margin:0 0 8px; }
.profile-quiz-heading { width:min(100%,700px); margin:0 0 8px; }
.profile-worm-heading { width:min(100%,460px); margin:0 0 8px; }

.coming-soon-card,
.future-card,
.profile-chaos-quiz,
.glitterworm-card,
.client-profile-page .comments-card { margin-top:12px; }

.coming-soon-body {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:15px;
  align-items:start;
}
.coming-soon-body h2 { font-size:.92rem !important; }
.fake-login-preview {
  padding:9px;
  border:1px solid var(--navy);
  background:#fff;
  box-shadow:4px 4px 0 var(--pink);
}
.fake-login-top {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin:-9px -9px 9px;
  padding:6px 8px;
  background:var(--navy);
  color:var(--cream);
  font:900 .5rem "Courier New",monospace;
}
.fake-login-top span:last-child { color:var(--pink); }
.fake-login-preview label { display:grid; gap:3px; margin-bottom:7px; }
.fake-login-preview label span { color:var(--pink); font-size:.52rem; font-weight:900; }
.fake-login-preview input {
  width:100%;
  padding:8px;
  border:1px solid #ccbdb1;
  background:#f3eee9;
  color:#8a7d73;
  font:.58rem Verdana,Arial,sans-serif;
}
.fake-login-preview button {
  width:100%;
  padding:8px;
  border:1px solid #bfb1a7;
  background:#e4ddd7;
  color:#8d8177;
  font:900 .58rem Verdana,Arial,sans-serif;
}
.fake-login-preview small {
  display:block;
  margin-top:6px;
  color:rgba(17,17,17,.5);
  font-size:.47rem;
  line-height:1.35;
}

.future-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}
.future-grid article {
  min-height:145px;
  padding:10px;
  border:1px solid var(--navy);
  background:#fff;
}
.future-grid article>span { display:block; color:var(--pink); font-size:1.1rem; margin-bottom:3px; }
.future-grid strong { color:var(--pink); font-size:.64rem; }
.future-grid p { margin:5px 0 0 !important; font-size:.54rem !important; line-height:1.42; }

.chaos-intro-copy { max-width:730px; font-size:.7rem !important; line-height:1.5; }
.chaos-question { font-size:.91rem !important; line-height:1.35; max-width:800px; }
.chaos-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:10px;
}
.chaos-option {
  min-height:86px;
  padding:10px;
  border:1px solid var(--navy);
  background:#fff;
  color:var(--navy);
  text-align:left;
  font:700 .59rem Verdana,Arial,sans-serif;
  line-height:1.42;
  cursor:pointer;
}
.chaos-option:hover,
.chaos-option.is-selected {
  background:#ffe4f0;
  box-shadow:inset 0 0 0 2px var(--pink);
}
.chaos-result h2 { color:var(--pink) !important; font-size:1.15rem !important; }
.chaos-result>p { max-width:780px; font-size:.76rem !important; line-height:1.55; }
.chaos-footnote { color:var(--pink); font-size:.57rem !important; font-weight:900; }

.glitterworm-intro { font-size:.68rem !important; line-height:1.45; }
.glitterworm-layout {
  display:grid;
  grid-template-columns:minmax(0,560px) minmax(210px,1fr);
  gap:14px;
  align-items:start;
}
.glitterworm-machine {
  padding:9px;
  border:1px solid var(--navy);
  background:#111;
  box-shadow:5px 5px 0 var(--pink);
}
.glitterworm-hud {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  padding:7px;
  border:1px solid var(--cream);
  border-bottom:0;
  background:#07182c;
  color:var(--cream);
  font:700 .51rem "Courier New",monospace;
}
.glitterworm-hud b { color:var(--pink); }
.glitterworm-screen {
  position:relative;
  border:1px solid var(--cream);
  background:#07182c;
}
.glitterworm-screen canvas {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  background:#07182c;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.glitterworm-overlay {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  padding:20px;
  background:rgba(7,24,44,.84);
  color:var(--cream);
  text-align:center;
}
.glitterworm-overlay[hidden] { display:none; }
.glitterworm-overlay strong { color:var(--pink); font:900 1.05rem "Courier New",monospace; }
.glitterworm-overlay span { max-width:270px; opacity:.76; font:.5rem "Courier New",monospace; line-height:1.4; }
.glitterworm-overlay button {
  padding:8px 10px;
  border:1px solid var(--cream);
  background:var(--pink);
  color:var(--navy);
  font:900 .58rem Verdana,Arial,sans-serif;
}

.worm-desktop-controls {
  display:grid;
  place-items:center;
  gap:5px;
  margin-top:8px;
}
.worm-desktop-controls>button { width:32%; }
.worm-desktop-controls>div { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.worm-desktop-controls button {
  min-height:43px;
  border:1px solid var(--cream);
  background:#07182c;
  color:var(--cream);
  font-weight:900;
}
.worm-desktop-controls button:hover { background:var(--pink); color:var(--navy); }
.worm-side { display:grid; gap:8px; }

@media(max-width:820px){
  .coming-soon-body,
  .glitterworm-layout { grid-template-columns:1fr; }
  .future-grid { grid-template-columns:1fr 1fr; }
  .worm-side { grid-template-columns:1fr 1fr 1fr; }
}

@media(max-width:560px){
  .member-main-title,
  .profile-coming-heading,
  .profile-future-heading,
  .profile-quiz-heading,
  .profile-worm-heading { width:100%; }
  .future-grid { grid-template-columns:1fr 1fr; }
  .future-grid article { min-height:130px; }
  .chaos-options { grid-template-columns:1fr; }
  .worm-side { grid-template-columns:1fr; }
  .worm-desktop-controls { display:none; }
  .glitterworm-screen::after {
    content:"swipe to steer the sparkly worm";
    display:block;
    padding:6px 8px;
    border-top:1px solid rgba(255,248,236,.28);
    background:#07182c;
    color:rgba(255,248,236,.72);
    text-align:center;
    font:700 .47rem "Courier New",monospace;
  }
}