/* THE PIANO SALOON (js/saloon.js, 2026-09-03): the linear ladder in front of
   the open world. Lamplight and dark wood — it is a room in 1830s Vienna —
   but the layout is a LIST, not a place: every piece is one press away and
   nothing here has to be walked to. */
#saloon-screen { padding: 0; align-items: stretch; justify-content: stretch;
  background: radial-gradient(ellipse at 50% 0%, #2e2216 0%, #1a1410 55%, #0c0a08 100%); }
.sal-wrap { flex: 1; overflow-y: auto; padding: 26px 20px 60px; }
.sal-inner { max-width: 720px; margin: 0 auto; }
.sal-head { text-align: center; margin-bottom: 22px; }
.sal-head h1 { font-family: "EB Garamond", Palatino, Georgia, serif; font-size: 34px;
  margin: 0 0 6px; color: #f3dfae; letter-spacing: .02em; }
.sal-head p { margin: 0; color: #c3b192; font-size: 14.5px; }

.sal-rival { border: 1px solid #4a3a26; border-radius: 10px; margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(60,44,28,.55), rgba(26,20,16,.55)); overflow: hidden; }
.sal-rival.now { border-color: #b98a3e; box-shadow: 0 0 0 1px rgba(185,138,62,.25), 0 8px 26px rgba(0,0,0,.4); }
.sal-rival.done { opacity: .78; }
.sal-rival.locked { opacity: .5; }
.sal-rival header { display: flex; align-items: center; gap: 13px; padding: 13px 15px; }
.sal-face { width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 2px solid #7d5f37; background: #221a12; flex: none; }
.sal-rival.locked .sal-face { filter: grayscale(1) brightness(.7); }
.sal-who { flex: 1; min-width: 0; }
.sal-who b { display: block; color: #f3dfae; font-size: 17px; }
.sal-who i { display: block; color: #b7a586; font-size: 13px; font-style: italic; margin-top: 2px; }
.sal-lv { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  color: #e0bd76; background: rgba(224,189,118,.14); border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
.sal-score { font-size: 17px; font-weight: 800; color: #e0bd76; flex: none; min-width: 34px; text-align: right; }
.sal-rival.done .sal-score { color: #7dffb2; }

.sal-pieces { list-style: none; margin: 0; padding: 0 15px 13px; display: flex;
  flex-direction: column; gap: 7px; }
.sal-pieces li { display: flex; align-items: center; gap: 12px; padding: 9px 11px;
  border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.06); }
.sal-pieces li.won { background: rgba(125,255,178,.07); border-color: rgba(125,255,178,.2); }
.sal-n { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; background: rgba(224,189,118,.18); color: #e0bd76; }
.sal-pieces li.won .sal-n { background: rgba(125,255,178,.18); color: #7dffb2; }
.sal-t { flex: 1; min-width: 0; }
.sal-t b { display: block; color: #f0e6d2; font-size: 15px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sal-t i { display: block; color: #a2937a; font-size: 12px; font-style: normal; }
.sal-play { flex: none; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 8px 16px; border-radius: 8px; border: 1px solid #b98a3e; color: #1a1410;
  background: linear-gradient(180deg, #f0c979, #c99a45); }
.sal-play:hover { background: linear-gradient(180deg, #ffdb92, #dcaa50); }
.sal-pieces li.won .sal-play { background: none; color: #b7a586; border-color: #4a3a26; }

.sal-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
#saloon-world { width: 100%; }

/* the fork at the end of onboarding */
#sal-choice .sal-cards { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  max-width: 660px; }
.sal-card { flex: 1 1 260px; max-width: 300px; cursor: pointer; text-align: left; font: inherit;
  border: 1px solid #4a3a26; border-radius: 12px; padding: 18px 18px 16px; color: #f0e6d2;
  background: linear-gradient(180deg, rgba(60,44,28,.6), rgba(26,20,16,.6)); }
.sal-card:hover { border-color: #b98a3e; background: linear-gradient(180deg, rgba(80,58,34,.7), rgba(34,26,18,.7)); }
.sal-card .sal-ico { font-size: 30px; display: block; margin-bottom: 8px; }
.sal-card b { display: block; font-size: 18px; color: #f3dfae; margin-bottom: 5px;
  font-family: "EB Garamond", Palatino, Georgia, serif; }
.sal-card span.sal-d { display: block; font-size: 13.5px; color: #b7a586; line-height: 1.45; }
@media (max-width: 560px) {
  .sal-head h1 { font-size: 27px; }
  .sal-pieces li { flex-wrap: wrap; }
  .sal-play { width: 100%; }
}
/* the keyboard filter (js/keysize.js): a piece the player's keys cannot
   reach is walked past for free, the zone boards' rule */
.sal-pieces li.skipped { opacity: .75; border-style: dashed; }
.sal-pieces li.skipped .sal-n { background: rgba(52,211,255,.14); color: var(--cyan); }
.sal-pieces li.skipped .sal-play { background: none; color: #b7a586; border-color: #4a3a26; }