/* 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; }

/* three rooms */
.no-rooms { width: 100%; max-width: 340px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.no-rt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); text-align: center; }
.no-rt b { font-size: 14px; }
.no-tm { width: 16px; height: 70px; border-radius: 999px; background: var(--raised); position: relative; overflow: hidden; }
.no-tm i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 999px; }
.no-rt.c .no-tm i { height: 22%; background: #7FB7FF; }
.no-rt.n .no-tm i { height: 50%; background: #C9C3B8; }
.no-rt.h .no-tm i { height: 82%; background: #FF8A5C; }
.no-nv { font-style: normal; font: 600 13px var(--mono); color: var(--dim); min-height: 18px; }
.no-rooms.lit .no-rt.c { border-color: var(--gold); box-shadow: 0 0 16px rgba(252,192,80,.3); }
.no-rooms.lit .no-rt.c .no-nv { color: var(--gold); }

/* ice water */
.no-ice { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.no-bowl { position: relative; width: 150px; height: 80px; border-radius: 0 0 75px 75px; background: linear-gradient(180deg, rgba(127,183,255,.35), rgba(127,183,255,.6)); border: 2px solid #9CC8FF; border-top: 0; }
.no-bowl i { position: absolute; width: 18px; height: 18px; border-radius: 4px; background: rgba(255,255,255,.7); top: 10px; }
.no-bowl i:nth-child(2) { left: 24px; transform: rotate(12deg); } .no-bowl i:nth-child(3) { left: 70px; top: 22px; transform: rotate(-20deg); } .no-bowl i:nth-child(4) { left: 108px; transform: rotate(30deg); }
.no-lanes { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.no-ln { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 8px; }
.no-ln span { font-size: 13px; font-weight: 700; color: var(--dim); }
.no-ln b { height: 12px; border-radius: 999px; background: var(--raised); position: relative; overflow: hidden; }
.no-ln b::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.no-ln.a b::after { background: #8A8FA8; }
.no-ln.n b::after { background: var(--gold); }
.no-ice.go .no-ln.a b::after { width: 45%; }
.no-ice.go .no-ln.n b::after { width: 78%; }

@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; }
  .no-tm { height: 54px; }
}