/* Rail Dash — only what is specific to this game.
   Shared chrome: /games/game-shell.css */

.hud .buff { color: #ff7a59; font-weight: 700; min-width: 70px; }

.keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin: 14px 0 2px;
  font-size: 12px;
  color: var(--fg-dim);
}
.keys span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

@media (max-width: 620px) {
  .hud .buff { min-width: 0; }
  .keys { font-size: 11px; gap: 6px 10px; }
}

.skins {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0 2px;
}
.skins .skin {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f1230;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  color: var(--fg-dim);
  cursor: pointer;
  text-align: left;
}
.skins .skin b { display: block; font-size: 13px; color: var(--fg); }
.skins .skin i { font-size: 11px; font-style: normal; }
.skins .skin.on { border-color: var(--accent); }
.skins .chip { width: 14px; height: 14px; border-radius: 4px; flex: none; }
@media (max-width: 620px) {
  .skins { grid-template-columns: 1fr; gap: 6px; }
}

/* the look switcher: a setting, so it sits in the bar with the others */
.skinmenu > summary { white-space: nowrap; }
.skinmenu > summary b { font-weight: 600; }
/* The switch sits at the right end of the bar, so its panel hangs from the
   right edge; anchored left it ran off the screen on a phone. */
#skin-list { min-width: 8.5rem; left: auto; right: 0; }
#skin-list button {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: none; border: 0; font: inherit; color: inherit;
  padding: .45rem .6rem; cursor: pointer; text-align: left; border-radius: .35rem;
}
#skin-list button:hover { background: rgba(255,255,255,.08); }
#skin-list button[aria-current="true"] { color: #fff; background: rgba(255,255,255,.12); }
#skin-list .chip {
  width: .7rem; height: .7rem; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
}

/* On a phone the bar carries four controls. The word "Look:" is the first thing
   to go; the current look's name stays, because that is what identifies it. */
@media (max-width: 620px) {
  .skinmenu > summary .lbl { display: none; }
}