/* Nostalgia. Everything scoped under .no-*. */

.no-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.no-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the word */
.no-name { position: relative; display: grid; place-items: center; min-height: 150px; width: 100%; }
.no-name .tiles { display: flex; align-items: center; gap: 10px; transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
.no-t { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 120px; min-height: 76px; justify-content: center; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 2px dashed var(--violet-bright); color: inherit; font: inherit; cursor: pointer; transition: border-color .2s; }
.no-t.open { border-style: solid; border-color: var(--gold-deep); }
.no-t b { font-family: var(--serif); font-size: 26px; font-weight: 700; color: #fff; }
.no-t i { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-bright); }
.no-t.open i { color: var(--gold); }
.no-name .plus { font-size: 22px; font-weight: 800; color: var(--gold); }
.no-name .no-w { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; opacity: 0; transform: scale(.8); transition: opacity .4s .25s, transform .5s .25s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.no-name .no-w b { font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--gold); text-shadow: 0 0 24px rgba(252,192,80,.45); }
.no-name .no-w i { font-style: normal; font-size: 14px; font-weight: 700; color: var(--dim); }
.no-name.no-both { display: flex; flex-direction: column; gap: 18px; }
.no-both .no-t { cursor: default; }
.no-both .no-w { position: static; opacity: 1; transform: none; }

/* the floor */
.no-floor { display: grid; gap: 8px; }
.no-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 15px)); gap: 5px; justify-content: center; }
.no-grid i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--raised); transition: background .2s; }
.no-grid i.you { box-shadow: inset 0 0 0 2px var(--violet-bright); }
.no-grid i.on { background: var(--gold); }
.no-key { display: flex; gap: 14px; justify-content: center; min-height: 16px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.no-key .y { color: var(--violet-bright); } .no-key .g { color: var(--gold); }

/* three memories */
.no-mems { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.no-mem { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: #F4EEE2; color: #1B1A22; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.no-mem b { font: 700 16px var(--serif); }
.no-mem span { font-size: 13px; color: #5A5446; line-height: 1.3; }

/* the thermostat */
.no-th { --glow: 0; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.no-top { display: flex; align-items: center; justify-content: center; gap: 14px; height: 104px; }
.no-rm { height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(123,92,253,.3)); }
.no-card { position: relative; height: 100%; aspect-ratio: 1.15; padding: 5px 5px 0; border-radius: 6px; background: #F4EEE2; transform: rotate(-3deg); display: flex; flex-direction: column; opacity: calc(.35 + .65 * var(--glow)); filter: grayscale(calc(1 - var(--glow))); box-shadow: 0 0 calc(28px * var(--glow)) rgba(252,192,80,calc(.7 * var(--glow))); transition: opacity .5s, filter .5s, box-shadow .5s; }
.no-card img { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: 3px; background: #2a2340; }
.no-card span { font: 700 12px var(--sans); color: #3A3428; text-align: center; padding: 3px 0 4px; line-height: 1.1; }
.no-q { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 6px; background: var(--raised); color: var(--violet-bright); font: 700 34px var(--serif); opacity: 0; transition: opacity .4s; pointer-events: none; }
.no-th.hid .no-q { opacity: 1; }
.no-g .gt { height: 12px; position: relative; overflow: visible; }
.no-g .gt i { position: relative; z-index: 1; }
.no-in .gt i { background: #7FB7FF; }
.no-he .gt i { background: var(--gold); }
.no-he .gl span { color: var(--gold); }
.no-out.bad .gt i { background: #FF8A8A; }
.no-usual, .no-ghost { position: absolute; top: -4px; bottom: -4px; width: 0; z-index: 2; }
.no-usual { border-left: 2px solid rgba(234,227,215,.7); }
.no-ghost { border-left: 2px dashed #FF8A8A; opacity: 0; transition: left .45s, opacity .3s; }
.no-ghost.on { opacity: 1; }
.no-steps { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.no-steps span { font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: var(--raised); color: var(--faint); transition: background .3s, color .3s; }
.no-steps span.lit { background: rgba(252,192,80,.16); color: var(--gold); }
.no-steps i { font-style: normal; color: var(--faint); font-weight: 800; }

@media (max-height: 700px) {
  .no-name { min-height: 120px; }
  .no-name .no-w b { font-size: 34px; }
  .no-grid { grid-template-columns: repeat(10, minmax(0, 13px)); gap: 4px; }
  .no-top { height: 72px; }
  .no-th { gap: 6px; }
  .no-mem { padding: 7px 12px; }
}