/* The living room's box (owner: living): the key to the hand colours on the 3D keys, shown under the list only
   while a piece plays. Loaded after house.css. Every rule is scoped to #living-room so it cannot reach other rooms. */
#living-room .hands { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 12px 4px 2px; font-size: .8125rem; color: var(--ink-2); }
#living-room .hands[hidden] { display: none; }
#living-room .hands span { display: inline-flex; align-items: center; gap: 6px; }
/* the swatches match the key tints in js/world/living.js (HAND); decoration next to their words */
#living-room .hands b { width: 16px; height: 9px; border-radius: 2px; display: inline-block; box-shadow: 0 0 0 1px rgb(255 255 255 / .18); }
#living-room .hands .l b { background: #4f8fe0; }
#living-room .hands .r b { background: #f2a62a; }
/* the key is for the 3D keys: the stacked no-WebGL page has no piano to colour */
.no-webgl #living-room .hands { display: none; }

/* laptop screens up to 860 px tall (1280x800, 1366x768, a 1440x900 screen under its browser bar): a tighter
   header so the current piece's card and five more rows fit the box (the stacked page keeps its own layout) */
@media (min-aspect-ratio: 4/5) and (min-width: 761px) and (min-height: 501px) and (max-height: 860px) {
  :root:not(.no-webgl) #living-room .panel { padding-top: 16px; padding-bottom: 10px; }
  :root:not(.no-webgl) #living-room .box__head { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  :root:not(.no-webgl) #living-room .cover { width: 72px; height: 72px; }
  :root:not(.no-webgl) #living-room .lede { margin-top: 10px; font-size: .84rem; line-height: 1.4; }
  :root:not(.no-webgl) #living-room .tracks { margin-top: 10px; padding-top: 6px; }
  :root:not(.no-webgl) #living-room .row__line { min-height: 52px; padding-block: 4px; }
}