/* The first-win page: the look at the piano from the plan. Felt ground,
   ivory type, and brass for one thing only — the chord to play now. Found
   chords turn verdigris; everything secondary is sage. */
:root {
  --felt: #102019; --felt-2: #172a22; --felt-3: #1c2b25;
  --ivory: #EEE6D2; --sage: #93A89D; --brass: #D2A94E; --verdigris: #4FBF9F;
  --stand: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --lyric: Literata, Georgia, serif;
}
* { box-sizing: border-box; }
/* Anything styled with a display (buttons, the win box) must still hide. */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--felt); color: var(--ivory); font-family: var(--stand); }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
a { color: var(--ivory); }
button, a { font: inherit; }
:focus-visible { outline: 3px solid var(--ivory); outline-offset: 3px; border-radius: 6px; }

.top { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }
.brand { font-weight: 700; font-size: 1.1rem; letter-spacing: .01em; }
.signin { color: var(--sage); text-decoration: none; padding: 8px 4px; }
.signin:hover { color: var(--ivory); }

.stage { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px 16px;
  display: grid; gap: 18px; grid-template-columns: 1fr; align-content: start; }
.intro h1 { margin: 8px 0 6px; font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.1; }
.lede { margin: 0; color: var(--sage); font-size: 1.05rem; max-width: 56ch; }

.song { background: var(--felt-2); border-radius: 14px; padding: 18px 20px 14px; }
.song-meta { display: flex; justify-content: space-between; color: var(--sage); font-size: .9rem; margin-bottom: 10px; }
.line { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--lyric); font-size: clamp(1.4rem, 3.4vw, 2.2rem); }
.seg { display: inline-grid; grid-template-rows: auto auto; }
.lyric { white-space: pre; }
.chord { font-family: var(--stand); font-weight: 700; font-size: .78em; min-height: 1.5em; line-height: 1.5em; color: var(--ivory); }
.chord.hidden { width: 2.4em; border: 3px dashed var(--brass); border-radius: 8px; color: var(--brass);
  text-align: center; background: rgba(210, 169, 78, .08); }
.chord.found { color: var(--verdigris); border: 0; background: none; width: auto; }
.chord.found .num { font-size: .6em; color: var(--sage); margin-left: .3em; font-weight: 400; }
.credit { margin: 10px 0 0; color: var(--sage); font-size: .8rem; }

.panel { display: grid; gap: 8px; align-content: start; }
.step { margin: 0; font-size: 1.15rem; line-height: 1.4; }
.feedback { margin: 0; min-height: 1.4em; color: var(--ivory); font-weight: 700; }
.hint { margin: 0; min-height: 1.2em; color: var(--sage); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.btn { min-height: 56px; padding: 0 22px; border-radius: 12px; border: 2px solid var(--sage); background: var(--felt-3);
  color: var(--ivory); cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; text-decoration: none; }
.btn:hover { border-color: var(--ivory); }
.btn.ghost { background: transparent; }
.btn.primary { background: var(--verdigris); border-color: var(--verdigris); color: var(--felt); }
.btn[disabled] { opacity: .5; cursor: default; }
.win { display: grid; gap: 10px; margin-top: 8px; padding: 16px; border-radius: 14px; background: var(--felt-2); border: 2px solid var(--verdigris); }
.win-line { margin: 0; font-size: 1.15rem; }
.small { margin: 0; color: var(--sage); font-size: .9rem; }
.status { margin: 0; color: var(--sage); font-size: .85rem; min-height: 1.2em; }

/* The keys: big enough for a finger on a tablet on the music rest. */
.keys-wrap { overflow-x: auto; padding-bottom: 4px; }
.keys { position: relative; height: clamp(150px, 28vh, 230px); min-width: 560px; user-select: none; touch-action: manipulation; }
@media (max-width: 640px) { .keys { min-width: 0; height: 180px; } }
.key { position: absolute; top: 0; border: 0; padding: 0; cursor: pointer; }
.key.white { height: 100%; background: var(--ivory); border-radius: 0 0 8px 8px; box-shadow: inset -1px 0 0 #b9b19c; }
.key.black { height: 62%; background: #0a1410; border-radius: 0 0 6px 6px; z-index: 2; box-shadow: 0 2px 0 #000; }
.key .lbl { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: .72rem; color: #56636f; pointer-events: none; }
.key.down.white { background: var(--sage); }
.key.down.black { background: var(--sage); }
.key.found.white, .key.found.black { background: var(--verdigris); }

/* A tablet on the stand: the song and the panel side by side above the keys. */
@media (min-width: 900px) and (orientation: landscape) {
  .stage { grid-template-columns: 1.3fr 1fr; }
  .intro, .keys-wrap { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .chord.hidden.listening { animation: glow 1.4s ease-in-out infinite; }
  @keyframes glow { 50% { background: rgba(210, 169, 78, .22); } }
}