/* Melatonin. Everything scoped under .mel-*. */

.mel-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* the glow of melatonin in a head; JS sets its size and opacity */
.mel-bead { position: absolute; width: 20px; height: 20px; border-radius: 50%; z-index: 3; pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, var(--violet-bright) 38%, rgba(123, 92, 253, 0) 72%);
  box-shadow: 0 0 18px 8px rgba(169, 155, 255, .55); transform: translate(-50%, -50%) scale(.45); opacity: .12;
  transition: opacity .5s, transform .5s, left .4s, top .4s; }

/* the bedroom */
.mel-room { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 6px; }
.mel-bed { position: relative; width: 100%; aspect-ratio: 340 / 224; border-radius: 16px; overflow: hidden; background: #2A2F4A; }
.mel-win { position: absolute; left: 37%; top: 6%; width: 26%; height: 34%; border-radius: 6px; overflow: hidden; border: 4px solid #4A4F6E; }
.mel-sky { position: absolute; inset: 0; background: #7EC8F2; }
.mel-stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.mel-stars circle { fill: #fff; }
.mel-moon { fill: #F4ECD2; }
.mel-bar1, .mel-bar2 { position: absolute; background: #4A4F6E; }
.mel-bar1 { left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; }
.mel-bar2 { top: 50%; left: 0; right: 0; height: 3px; margin-top: -1.5px; }
.mel-clock { position: absolute; right: 4%; top: 7%; z-index: 4; font: 700 20px var(--mono); color: var(--text); }
.mel-girl { position: absolute; left: 1%; bottom: 3%; width: 80%; }
.mel-girl img { display: block; width: 100%; height: auto; transition: opacity .4s; }
/* sitting up, laid over the sleeper so the beds line up */
.mel-girl .mel-up { position: absolute; left: 1.56%; bottom: 16.71%; width: 97.66%; opacity: 0; }
.mel-room.mel-s-up .mel-up { opacity: 1; }
.mel-room.mel-s-up .mel-girl img:first-child { opacity: 0; }
.mel-pl { position: absolute; left: 3%; top: 6%; z-index: 4; white-space: nowrap; padding: 2px 7px; border-radius: 999px; font: 700 12px var(--sans); color: #fff; background: var(--violet-deep); opacity: 0; transition: opacity .4s; }
.mel-pl::after { content: ''; position: absolute; left: 40px; bottom: -7px; border: 4px solid transparent; border-top: 7px solid var(--violet-deep); border-bottom: 0; }
.mel-room.mel-s-named .mel-pl { opacity: 1; }
.mel-room.mel-s-up .mel-pl { opacity: 0; }
.mel-lamp { position: absolute; right: 4%; bottom: 4%; width: 13%; height: auto; overflow: visible; }
.mel-shade { fill: #6E6960; transition: fill .25s; }
.mel-pole { fill: #6E6960; }
.mel-room.mel-s-lit .mel-shade { fill: var(--gold); }
.mel-dim { position: absolute; inset: 0; z-index: 2; background: #070A1E; opacity: 0; pointer-events: none; }
.mel-warm { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle at 90% 30%, rgba(252, 192, 80, .5), rgba(252, 192, 80, .12) 55%, rgba(252, 192, 80, 0) 80%); }
.mel-room.mel-s-lit .mel-warm { opacity: 1; }

.mel-chart { display: block; width: 100%; height: auto; overflow: visible; }
.mel-yl { font: 700 17px var(--sans); fill: var(--violet-bright); }
.mel-band { fill: rgba(252, 192, 80, .28); }
.mel-ax { stroke: var(--line-strong); stroke-width: 1.5; }
.mel-tk { font: 600 16px var(--sans); fill: var(--dim); }
.mel-area { fill: rgba(123, 92, 253, .32); }
.mel-line { fill: none; stroke: var(--violet-bright); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.mel-dot { fill: var(--violet-bright); stroke: #fff; stroke-width: 2; }

/* two side by side: her and the rat, or two beds */
.mel-pair { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mel-time { font: 700 20px var(--mono); color: var(--text); }
.mel-two { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.mel-who { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 10px; border-radius: 16px;
  background: linear-gradient(180deg, #0B1030, #161A2E); border: 1px solid var(--line); }
.mel-who b { font: 700 15px var(--sans); color: var(--text); margin-top: 4px; }
.mel-st { font: 600 13px var(--sans); color: var(--dim); }
.mel-pic { position: relative; width: 100%; height: 118px; display: flex; align-items: center; justify-content: center; }
.mel-pic img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.mel-ratc .mel-pic img { height: 100%; }
/* the bead is placed on the picture, which is centred in .mel-pic: its box is the image's */
.mel-her .mel-pic, .mel-rc .mel-pic { height: auto; min-height: 96px; }
.mel-ratc .mel-pic { width: auto; aspect-ratio: 609 / 640; height: 118px; }
.mel-tag { position: absolute; left: 50%; top: -6px; transform: translate(-50%, 4px); z-index: 4; white-space: nowrap; padding: 3px 8px; border-radius: 999px;
  font: 700 12px var(--sans); color: #fff; background: var(--violet-deep); opacity: 0; transition: opacity .35s, transform .35s; }
.mel-pair.mel-s-on .mel-st { color: var(--violet-bright); font-weight: 700; }

/* the race */
.mel-race .mel-who { transition: border-color .3s; }
.mel-race .mel-pic img { filter: brightness(.75); }
.mel-z { position: absolute; right: 8%; top: 0; font: 800 18px var(--sans); color: var(--violet-bright); opacity: 0; transition: opacity .3s, transform .6s; transform: translateY(6px); }
.mel-who.mel-s-zz .mel-z { opacity: 1; transform: translateY(-4px); }
.mel-who.mel-s-zz { border-color: var(--violet-bright); }
.mel-who.mel-s-zz .mel-st { color: var(--violet-bright); }
.mel-ex { font: 600 13px var(--sans); color: var(--dim); }

/* the sheep's year */
.mel-field { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.mel-mo { font: 700 20px var(--mono); color: var(--text); text-align: center; }
.mel-strip { position: relative; height: 30px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #8ED2F6, #7EC8F2); }
.mel-nb { position: absolute; top: 0; bottom: 0; background: #0B1030; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.mel-ticks { display: flex; justify-content: space-between; font: 600 12px var(--sans); color: var(--dim); }
.mel-mrow { position: relative; height: 16px; margin-top: 4px; border-radius: 8px; background: rgba(169, 155, 255, .1); }
.mel-mb { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, var(--violet), var(--violet-bright)); box-shadow: 0 0 12px rgba(169, 155, 255, .5); }
.mel-ml { display: flex; justify-content: space-between; font: 700 13px var(--sans); color: var(--violet-bright); }
.mel-mh { color: var(--text); }
.mel-ewe { position: relative; align-self: center; width: 160px; margin-top: 6px; }
.mel-ewe img { display: block; width: 100%; height: auto; }
/* behind the ear, where real implants go, clear of the pineal bead */
.mel-implant { position: absolute; left: 49%; top: 28%; width: 16px; height: 7px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 8px rgba(252, 192, 80, .8); opacity: 0; z-index: 4; }
.mel-field.mel-s-imp .mel-implant { opacity: 1; }
.mel-il { position: absolute; right: 58%; top: 10%; z-index: 4; padding: 3px 8px; border-radius: 10px; text-align: center; white-space: nowrap;
  font: 700 12px/1.2 var(--sans); color: #2A1A00; background: var(--gold); opacity: 0; transition: opacity .35s; }
.mel-il::after { content: ''; position: absolute; right: -11px; bottom: 6px; border: 4px solid transparent; border-left: 7px solid var(--gold); }
.mel-field.mel-s-imp .mel-il { opacity: 1; }
.mel-field.mel-s-mate .mel-il { opacity: 0; }
.mel-field .mel-tag { top: -4px; background: var(--gold-deep); }
.mel-field.mel-s-mate .mel-tag { opacity: 1; transform: translate(-50%, 0); }

@media (max-height: 700px) {
  .mel-pair, .mel-field { max-width: 300px; }
  .mel-bed { aspect-ratio: 340 / 212; }
  .mel-pic { height: 96px; }
  .mel-ratc .mel-pic { height: 96px; }
  .mel-ewe { width: 140px; }
}