/*
 * F4F Gallery proposals: what this page adds to the displays page chrome (../displays/page.css):
 * the speech bubble / placard over the stage, the "how you play it" list and the inspect sheet.
 */
.card .card__why-line { margin: 0 0 12px; padding: 8px 10px; border-radius: 10px; background: var(--soft-peach); font-size: 14.5px; }
.how { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; }
.how li { padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px rgba(38, 52, 69, 0.08); }
.how span { display: block; font: 700 11px/1.3 var(--body-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--secondary-color); }

/* ---------- bubble: a placard, a wing card or Ines speaking, pinned over a point in the room ---------- */
.bubble {
  position: absolute; z-index: 2; width: max-content; max-width: min(300px, 70%); margin: 0; padding: 10px 12px 11px; border-radius: 12px;
  transform: translate(-50%, calc(-100% - 12px)); background: #fff; color: #0E0E10; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  font: 500 13px/1.45 var(--body-font);
}
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.bubble[hidden] { display: none; }
.bubble__title { display: block; margin-bottom: 2px; font: 700 14px/1.25 var(--body-font); color: #0E0E10; }
.bubble__text { margin: 0; }
.bubble__link { display: inline-block; margin-top: 6px; font-weight: 700; color: #1479A8; }
.bubble__link[hidden] { display: none; }
.bubble__link:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; border-radius: 4px; }

/* ---------- inspect sheet ---------- */
.ins__note { margin: 12px 0 0 !important; font-size: 13px !important; color: var(--badge-color); }
.ins__link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; padding: 10px 18px; border-radius: 999px;
  background: #0E0E10; color: #fff; font: 700 14px/1.2 var(--body-font); text-decoration: none;
}
.ins__link:hover { background: #1479A8; }
.ins__link:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }

.tool[hidden] { display: none; }
.tool--use { background: var(--dark-navy); color: #fff; box-shadow: none; }
.tool--use kbd { background: var(--primary-yellow); }
.toolbar + .toolbar { margin-top: 0; }

@media (max-width: 640px) {
  .bubble { max-width: 82%; font-size: 12.5px; }
}