/* Dreams. Everything scoped under .drm-*. */

.drm-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.drm-hero { position: relative; }
.drm-hero img { display: block; width: 210px; max-width: 100%; max-height: 22vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 14px 22px rgba(123, 92, 253, .3)); }
.drm-hero.small img { width: 250px; max-height: 26vh; }
.drm-hero.big img { width: 280px; max-height: 34vh; }
.drm-hero.tiny img { width: 150px; max-height: 15vh; }
.drm-ring { position: absolute; right: -6px; top: 0; padding: 3px 9px; border-radius: 99px; background: var(--gold); color: #2a1a00; font: 800 12px var(--sans); letter-spacing: .06em; animation: drm-buzz .35s ease-in-out 6 alternate; }
@keyframes drm-buzz { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* the dream cloud */
.drm-cloud { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 340px; padding: 12px; border-radius: 26px;
  background: radial-gradient(ellipse at 50% 40%, rgba(160, 130, 255, .32), rgba(123, 92, 253, .1) 70%); }
.drm-chip { min-height: 46px; padding: 6px 8px; border-radius: 16px; border: 1.5px solid rgba(190, 170, 255, .55); background: rgba(40, 26, 90, .65); color: var(--text); font: 700 13px/1.2 var(--sans); cursor: pointer;
  transition: opacity .9s ease, filter .9s ease, transform .9s ease; }
.drm-chip.gone { opacity: 0; filter: blur(8px); transform: scale(.92); pointer-events: none; }
.drm-chip.saved { opacity: .25; transform: scale(.94); border-style: dashed; }
.drm-notes { width: 100%; max-width: 340px; min-height: 58px; padding: 8px 12px; border-radius: 14px; background: #f6f1e4; color: #2b2340; }
.drm-notes b { font: 800 12px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #8a7a5a; }
.drm-list { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; }
.drm-note { font: 600 13px/1.3 var(--sans); animation: drm-in .35s ease both; }
@keyframes drm-in { from { opacity: 0; transform: translateY(-6px); } }

/* behind closed eyes */
.drm-dark { position: relative; width: 100%; max-width: 320px; height: 230px; border-radius: 22px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #241a4a, #0c0820 75%); }
.drm-lids { position: absolute; left: 0; right: 0; top: 10px; display: flex; justify-content: center; gap: 46px; z-index: 2; }
.drm-lids i { width: 70px; height: 18px; border-bottom: 4px solid rgba(233, 184, 146, .8); border-radius: 0 0 40px 40px; }
.drm-cap { position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px; padding: 2px 10px; border-radius: 99px; background: rgba(12, 8, 32, .85); white-space: nowrap; text-align: center; font: 700 12px var(--sans); color: var(--dim); z-index: 2; }
.drm-tet { position: absolute; top: -40px; width: 64px; height: 32px; animation: drm-drop linear infinite; opacity: .9; }
.drm-tet b { position: absolute; width: 15px; height: 15px; border-radius: 3px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
@keyframes drm-drop { from { transform: translateY(0); } to { transform: translateY(290px); } }

/* the lab readout */
.drm-read { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 330px; }
.drm-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); }
.drm-row span { display: flex; flex-direction: column; }
.drm-row b { font: 700 14px var(--sans); color: var(--text); }
.drm-row em { font: 600 12px var(--sans); font-style: normal; color: var(--dim); }
.drm-tr { position: relative; height: 34px; overflow: hidden; display: flex; width: 100%; }
.drm-tr svg { flex: 0 0 100%; height: 100%; animation: drm-scroll 4s linear infinite; }
.drm-tr path { fill: none; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.drm-row.brain path { stroke: var(--violet-bright); }
.drm-row.mus path { stroke: var(--dim); }
.drm-row.eyes path { stroke: var(--gold); }
@keyframes drm-scroll { to { transform: translateX(-100%); } }

/* the face and the live eye trace */
.drm-face { width: 100%; max-width: 230px; }
.drm-pil { fill: #c9cce6; }
.drm-hair { fill: #5a3a26; }
.drm-nose, .drm-mouth { fill: none; stroke: #b07650; stroke-width: 3; stroke-linecap: round; }
.drm-padx { fill: #f4f4f8; stroke: #9aa0bd; stroke-width: 1.5; }
.drm-wire { fill: none; stroke: #9aa0bd; stroke-width: 2; }
.drm-face svg { display: block; width: 100%; height: auto; }
.drm-skin { fill: #E9B892; }
.drm-lidf { fill: #DDA67E; }
.drm-bulge { fill: #F6CDA9; transition: transform .18s ease-out; transform-box: fill-box; }
.drm-lash { fill: none; stroke: #4A2C1C; stroke-width: 3; stroke-linecap: round; }
.drm-live { width: 100%; max-width: 330px; padding: 8px 12px 6px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line); }
.drm-lbl { display: flex; justify-content: space-between; align-items: center; }
.drm-lbl b { font: 700 14px var(--sans); color: var(--text); }
.drm-stamp { font: 700 12px var(--sans); font-style: normal; color: var(--dim); }
.drm-stamp.on { color: #2a1a00; background: var(--gold); padding: 2px 8px; border-radius: 99px; }
.drm-big { display: block; width: 100%; height: auto; max-height: 80px; }
.drm-mid { stroke: rgba(255, 255, 255, .1); stroke-width: 1; fill: none; }
.drm-pen { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.drm-lrs { position: relative; height: 18px; }
.drm-lrs span { position: absolute; top: 0; transform: translateX(-50%); font: 800 13px var(--sans); color: var(--gold); }
.drm-pad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 330px; }
.drm-look { min-height: 56px; border-radius: 16px; background: var(--raised); border: 1.5px solid var(--line-strong); color: var(--text); font: 700 16px var(--sans); cursor: pointer; }
.drm-look:active { transform: scale(.97); }
.drm-look:disabled { opacity: .5; }

/* the question */
.drm-q { display: flex; flex-direction: column; align-items: center; padding: 8px 16px; border-radius: 16px; background: rgba(123, 92, 253, .18); border: 1px solid rgba(160, 130, 255, .4); }
.drm-q span { font: 700 12px var(--sans); color: var(--dim); letter-spacing: .05em; text-transform: uppercase; }
.drm-q b { font: 700 18px var(--sans); color: var(--text); }

@media (max-height: 700px) {
  .drm-hero img { max-height: 15vh; }
  .drm-hero.small img { max-height: 17vh; }
  .drm-hero.tiny { display: none; }
  .drm-row { padding: 3px 10px; }
  .drm-tr { height: 28px; }
  .drm-chip { min-height: 44px; font-size: 12.5px; }
  .drm-cloud { padding: 8px; gap: 6px; }
  .drm-notes { min-height: 50px; padding: 6px 12px; }
  .drm-sc { gap: 8px; }
  .drm-dark { height: 190px; }
  .drm-face { max-width: 170px; }
  .drm-hero.big img { max-height: 26vh; }
}