/* IKnowABot — iPhone shell face mods
   Land Before Time on VHS (first edition) freference plate
   1988 Don Bluth / late-80s home-tape climate ONLY
   NOT RS3 · NOT Anachronia · NOT game dinosaurs · not a store */

.iphone-mod-dock {
  max-width: var(--max, 960px);
  margin: 0 auto 1rem;
  padding: 0 1rem 0.25rem;
}

.iphone-mod-title {
  margin: 0.15rem 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4vw, 1.55rem);
  letter-spacing: 0.03em;
}

.iphone-mod-lede {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 48ch;
  line-height: 1.4;
}

.iphone-mod-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.iphone-mod-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.iphone-mod-chip:hover {
  border-color: color-mix(in srgb, #c9a227 50%, var(--border));
}

.iphone-mod-chip.is-on,
.iphone-mod-chip[aria-pressed="true"] {
  background: linear-gradient(105deg, #3d5c3a, #1a2a18);
  color: #e8f5d8;
  border-color: #7a9a4a;
  box-shadow: 0 0 0 1px rgba(122, 154, 74, 0.35);
}

/* —— shell mod attribute —— */
.iphone-shell[data-mod="lbt-vhs"] .iphone-bezel {
  background: linear-gradient(160deg, #4a3a28 0%, #1c1410 45%, #0a0806 100%);
  box-shadow:
    0 0 0 1px rgba(232, 196, 120, 0.12) inset,
    0 18px 50px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(180, 120, 40, 0.15);
}

.iphone-shell[data-mod="lbt-vhs"] .iphone-screen {
  background: #120e0a;
}

.iphone-shell[data-mod="lbt-vhs"] .iphone-status {
  color: #f0e0c0;
}

.iphone-shell[data-mod="lbt-vhs"] .iphone-model-chip {
  opacity: 0.9;
  color: #e8c878;
}

.iphone-shell[data-mod="lbt-vhs"] .iphone-home-bar {
  background: rgba(232, 200, 120, 0.35);
}

/* LBT face */
.iphone-app-lbt {
  position: relative;
  gap: 0.45rem !important;
  overflow: hidden;
}

.iphone-app-lbt[hidden] {
  display: none !important;
}

.lbt-deck-tag {
  margin: 0.15rem 0 0;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 200, 120, 0.75);
}

.lbt-title {
  color: #f5e6c0 !important;
  text-shadow: 0 0 18px rgba(200, 140, 40, 0.35);
  font-size: 1.15rem !important;
  line-height: 1.15;
}

.lbt-sub {
  color: rgba(240, 220, 180, 0.55) !important;
  font-size: 0.72rem !important;
}

/* VHS scanlines + tracking */
.vhs-scan {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.45;
}

.vhs-tracking {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  height: 18%;
  top: -20%;
  z-index: 5;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    transparent
  );
  animation: vhs-track 4.5s linear infinite;
}

.iphone-app-lbt.is-playing .vhs-tracking {
  animation-duration: 2.2s;
}

.iphone-app-lbt.is-ff .vhs-tracking {
  animation-duration: 0.55s;
  opacity: 0.85;
}

@keyframes vhs-track {
  from { top: -25%; }
  to { top: 110%; }
}

@media (prefers-reduced-motion: reduce) {
  .vhs-tracking,
  .vhs-reel,
  .lbt-herd .lbt-critter {
    animation: none !important;
  }
}

/* sleeve art — abstract freference, not official cover */
.vhs-sleeve {
  display: grid;
  grid-template-columns: 1fr 1.6rem;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(232, 200, 120, 0.28);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  min-height: 9.5rem;
}

.vhs-sleeve-art {
  position: relative;
  background: linear-gradient(180deg, #5a8ab8 0%, #7eb0d0 28%, #c4a060 55%, #8a6040 78%, #3a2818 100%);
  min-height: 9.5rem;
  overflow: hidden;
}

.lbt-sky {
  position: absolute;
  inset: 0 0 45% 0;
  background:
    radial-gradient(ellipse 40% 30% at 75% 25%, rgba(255, 220, 140, 0.55), transparent 60%),
    linear-gradient(180deg, #3a6a98, #7aafd0);
}

.lbt-mesa {
  position: absolute;
  bottom: 18%;
  left: -5%;
  right: -5%;
  height: 42%;
  background:
    linear-gradient(165deg, transparent 20%, #a87840 20%, #8a5830 55%, #5a3820 100%);
  clip-path: polygon(0 40%, 12% 20%, 22% 35%, 38% 10%, 55% 30%, 70% 8%, 88% 28%, 100% 15%, 100% 100%, 0 100%);
}

.lbt-path {
  position: absolute;
  bottom: 8%;
  left: 20%;
  right: 20%;
  height: 14%;
  background: linear-gradient(90deg, transparent, #c4a070 20%, #d4b888 50%, #c4a070 80%, transparent);
  border-radius: 40%;
  opacity: 0.85;
}

/* cartoon kids on the path — soft Bluth-era pastels, NOT game-dino silhouettes */
.lbt-herd {
  position: absolute;
  bottom: 12%;
  left: 14%;
  right: 14%;
  height: 26%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.2rem;
  filter: drop-shadow(0 1px 1px rgba(40, 24, 12, 0.25));
}

.lbt-critter {
  display: block;
  position: relative;
  border-radius: 55% 55% 40% 40%;
  opacity: 0.95;
}

/* long-neck kid — warm taupe, soft cartoon (not Anachronia grey) */
.lbt-long {
  width: 17%;
  height: 72%;
  background: linear-gradient(180deg, #c4a882, #a88860);
  border-radius: 50% 50% 42% 42%;
}
.lbt-long::before {
  content: "";
  position: absolute;
  top: -28%;
  left: 48%;
  width: 42%;
  height: 48%;
  background: linear-gradient(180deg, #c4a882, #b89870);
  border-radius: 60% 50% 45% 50%;
  transform: rotate(18deg);
}
.lbt-long::after {
  content: "";
  position: absolute;
  top: 18%;
  left: 22%;
  width: 18%;
  height: 18%;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}

/* three-horn kid — soft violet-grey cartoon */
.lbt-tri {
  width: 15%;
  height: 58%;
  background: linear-gradient(180deg, #9a9ab8, #6a6a8a);
  border-radius: 48% 48% 38% 38%;
}
.lbt-tri::after {
  content: "";
  position: absolute;
  top: -14%;
  left: 28%;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 7px solid #8a8aa8;
  filter: drop-shadow(4px 2px 0 #8a8aa8) drop-shadow(-3px 3px 0 #8a8aa8);
}

/* club-tail kid — soft gold-ochre (not combat spike) */
.lbt-spike {
  width: 15%;
  height: 52%;
  background: linear-gradient(180deg, #e0c060, #c4a040);
  border-radius: 50% 50% 40% 40%;
}
.lbt-spike::before {
  content: "";
  position: absolute;
  right: -18%;
  bottom: 12%;
  width: 38%;
  height: 28%;
  background: #d4b050;
  border-radius: 40% 50% 50% 40%;
}
.lbt-spike::after {
  content: "";
  position: absolute;
  top: 22%;
  left: 28%;
  width: 16%;
  height: 16%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

/* flyer kid — soft peach, tiny wings (cartoon, not boss pet) */
.lbt-fly {
  width: 13%;
  height: 38%;
  align-self: flex-start;
  margin-top: 6%;
  background: linear-gradient(180deg, #f0b898, #d48868);
  border-radius: 50%;
}
.lbt-fly::before {
  content: "";
  position: absolute;
  width: 150%;
  height: 36%;
  left: -25%;
  top: 28%;
  background: rgba(240, 184, 152, 0.55);
  border-radius: 50%;
}
.lbt-fly::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 28%;
  width: 14%;
  height: 14%;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}

/* duck-bill kid — soft sage green */
.lbt-leaf {
  width: 15%;
  height: 50%;
  background: linear-gradient(180deg, #88b878, #5a9050);
  border-radius: 50% 50% 40% 40%;
}
.lbt-leaf::before {
  content: "";
  position: absolute;
  top: 8%;
  left: -12%;
  width: 48%;
  height: 28%;
  background: #78a868;
  border-radius: 50% 40% 50% 40%;
}
.lbt-leaf::after {
  content: "";
  position: absolute;
  top: 24%;
  left: 30%;
  width: 16%;
  height: 16%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.iphone-app-lbt.is-playing .lbt-herd .lbt-critter {
  animation: lbt-walk 1.1s ease-in-out infinite alternate;
}
.iphone-app-lbt.is-playing .lbt-critter:nth-child(2) { animation-delay: 0.1s; }
.iphone-app-lbt.is-playing .lbt-critter:nth-child(3) { animation-delay: 0.2s; }
.iphone-app-lbt.is-playing .lbt-critter:nth-child(4) { animation-delay: 0.05s; }
.iphone-app-lbt.is-playing .lbt-critter:nth-child(5) { animation-delay: 0.15s; }

@keyframes lbt-walk {
  from { transform: translateY(0); }
  to { transform: translateY(-2px) translateX(1px); }
}

.lbt-sleeve-word {
  position: absolute;
  bottom: 0.35rem;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: rgba(255, 245, 220, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.vhs-spine {
  background: linear-gradient(180deg, #2a2018, #1a1410);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.35rem 0.1rem;
  border-left: 1px solid rgba(232, 200, 120, 0.2);
}

.vhs-spine-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #e8c878;
}

.vhs-spine-ed {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(232, 200, 120, 0.55);
}

/* cassette body */
.vhs-cassette {
  background: linear-gradient(180deg, #2c2c2e, #141416);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.45rem 0.5rem 0.5rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.vhs-window {
  position: relative;
  height: 2.4rem;
  border-radius: 4px;
  background: #0a0a0c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;
}

.vhs-reel {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  border: 3px solid #3a3a3c;
  background:
    radial-gradient(circle at center, #1a1a1c 28%, transparent 29%),
    repeating-conic-gradient(from 0deg, #2a2a2c 0 12deg, #3a3a3c 12deg 24deg);
  box-shadow: 0 0 0 1px #0a0a0a;
}

.iphone-app-lbt.is-playing .vhs-reel {
  animation: reel-spin 1.8s linear infinite;
}
.iphone-app-lbt.is-playing .vhs-reel-r {
  animation-duration: 1.6s;
  animation-direction: reverse;
}
.iphone-app-lbt.is-ff .vhs-reel {
  animation-duration: 0.35s;
}

@keyframes reel-spin {
  to { transform: rotate(360deg); }
}

.vhs-tape-band {
  position: absolute;
  left: 22%;
  right: 22%;
  height: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #1a1a1c, #4a3020, #1a1a1c);
  opacity: 0.7;
}

.vhs-label {
  margin-top: 0.4rem;
  padding: 0.35rem 0.4rem;
  border-radius: 3px;
  background: linear-gradient(180deg, #f5ecd4, #e0d0a8);
  color: #1a1410;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  border: 1px solid #c4b080;
}

.vhs-label-main {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.vhs-label-sub {
  font-size: 0.55rem;
  font-weight: 700;
  color: #4a3820;
}

.vhs-label-meta {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6a5840;
}

.lbt-interject {
  background: rgba(122, 154, 74, 0.12) !important;
  border-color: rgba(122, 154, 74, 0.4) !important;
}

.lbt-interject .interject-amp {
  color: #c9a227 !important;
}

.lbt-interject .interject-two {
  color: #e8f5d8 !important;
}

.lbt-alias {
  color: rgba(240, 220, 180, 0.55) !important;
}

.lbt-alias code {
  color: #e8c878 !important;
}

.lbt-controls {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  flex-wrap: wrap;
}

.lbt-btn {
  appearance: none;
  border: 1px solid rgba(232, 200, 120, 0.35);
  background: #1a1410;
  color: #f0e0c0;
  font-family: ui-monospace, monospace;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
}

.lbt-btn:hover {
  border-color: #e8c878;
  background: #2a2018;
}

.lbt-btn.is-on {
  background: #3d5c3a;
  border-color: #7a9a4a;
  color: #e8f5d8;
}

.lbt-wait {
  color: rgba(232, 200, 120, 0.8) !important;
  font-size: 0.75rem !important;
}

/* index plate */
.aim-card.lbt-vhs-plate {
  border-color: color-mix(in srgb, #c9a227 40%, var(--border));
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%, color-mix(in srgb, #5a8ab8 18%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 100%, color-mix(in srgb, #8a5830 16%, transparent), transparent 50%),
    var(--bg-elevated);
}

.lbt-vhs-hero {
  margin: 0.2rem 0 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.lbt-vhs-word {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4.5vw, 1.7rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #e8c878;
  text-shadow: 0 0 16px rgba(200, 140, 40, 0.3);
}

.lbt-vhs-ed {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.lbt-vhs-doors {
  margin: 0 0 0.75rem;
  padding: 0 0 0 1.15rem;
  text-align: left;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

.lbt-vhs-doors em {
  font-style: normal;
  font-weight: 800;
  color: #e8c878;
}

.asap-chip-lbt {
  color: #1a1410 !important;
  background: linear-gradient(105deg, #7eb0d0, #e8c878 55%, #8a5830) !important;
  border: none !important;
  font-weight: 800;
}