/* =============================================================================
 * SymFlappy slot — the small collapsible "while you wait" card.
 * Only the OUTER card is styled here; both games are Shadow-DOM isolated.
 * Dark, marble-and-gold, unobtrusive — it sits quietly over lobby content.
 *
 * Structure (built by js/flappy-slot.js):
 *   .sym-flappy-card
 *     .sym-flappy-head   title + collapse toggle
 *     .sym-flappy-tabs   the two games — «εναλλασσόμενη επιλογή»
 *     .sym-flappy-body   the active <flappy-waiting-game>/<dromos-waiting-game>
 * ========================================================================== */
.sym-flappy-card {
  width: 246px;
  max-width: 100%;
  margin: 14px auto 0;
  border-radius: 13px;
  overflow: hidden;
  background: rgba(10, 13, 20, 0.94);
  border: 1px solid rgba(214, 166, 74, 0.24);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  font-family: "Alegreya Sans", "Trebuchet MS", system-ui, sans-serif;
  color: #f1e4c2;
  -webkit-user-select: none;
  user-select: none;
}

.sym-flappy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(214, 166, 74, 0.10), rgba(214, 166, 74, 0.02));
  border-bottom: 1px solid rgba(214, 166, 74, 0.16);
}

.sym-flappy-title {
  font-family: "Alegreya", Georgia, serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.2;
  color: #e8c877;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sym-flappy-toggle {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(214, 166, 74, 0.24);
  border-radius: 6px;
  background: rgba(214, 166, 74, 0.08);
  color: #e8c877;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sym-flappy-toggle:hover { background: rgba(214, 166, 74, 0.22); }
.sym-flappy-toggle:focus-visible,
.sym-flappy-tab:focus-visible { outline: 2px solid #f1e4c2; outline-offset: 2px; }

/* ---- the choice between the two games ------------------------------------ */
.sym-flappy-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 6px 0;
}

.sym-flappy-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 4px;
  border: 1px solid rgba(214, 166, 74, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #b6a888;
  font-family: "Alegreya Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sym-flappy-tab:hover { background: rgba(214, 166, 74, 0.12); color: #f1e4c2; }
.sym-flappy-tab.is-on {
  background: linear-gradient(180deg, rgba(232, 200, 119, 0.24), rgba(214, 166, 74, 0.10));
  border-color: rgba(232, 200, 119, 0.55);
  color: #f7ecd2;
}
.sym-flappy-tab__i { font-size: 12px; line-height: 1; flex: 0 0 auto; }
.sym-flappy-tab__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sym-flappy-body {
  width: 234px;
  max-width: 100%;
  /* «Ο Αετός» flies up a portrait sky: 420:640 → ~234 × 357 */
  aspect-ratio: 420 / 640;
  margin: 7px auto 8px;
  display: block;
}

/* «Ο Δρόμος» runs across, so its card is wider and its stage landscape.
   The class is set by js/flappy-slot.js on every switch. */
.sym-flappy-card.is-dromos { width: 340px; }
.sym-flappy-card.is-dromos .sym-flappy-body {
  width: 328px;
  aspect-ratio: 420 / 300;   /* ~328 × 234 */
}

/* Collapsed: keep the header strip only. The game element is DETACHED by the
   slot manager at the same time, so nothing keeps animating behind this. */
.sym-flappy-card.is-collapsed .sym-flappy-body,
.sym-flappy-card.is-collapsed .sym-flappy-tabs { display: none; }

/* Small phones: the popup must never push the lobby sideways. */
@media (max-width: 600px) {
  .sym-flappy-card { width: min(246px, calc(100vw - 28px)); }
  .sym-flappy-card.is-dromos { width: min(340px, calc(100vw - 20px)); }
  .sym-flappy-body,
  .sym-flappy-card.is-dromos .sym-flappy-body { width: 100%; }
}

/* Short viewports (phone landscape): cap the STAGE WIDTH so aspect-ratio
   derives a height that still fits — never override the ratio itself, or the
   canvas stretches. 0.656 = 420/640, 1.4 = 420/300. */
@media (max-height: 620px) {
  .sym-flappy-body { max-width: min(100%, calc((100vh - 180px) * 0.656)); }
  .sym-flappy-card.is-dromos .sym-flappy-body { max-width: min(100%, calc((100vh - 180px) * 1.4)); }
}

/* prefers-reduced-motion: the card arrives without the lobby's pop animation
   (games/live-arena/live-arena-lobby.css) and nothing here transitions. */
@media (prefers-reduced-motion: reduce) {
  .sym-flappy-card { animation: none !important; }
  .sym-flappy-toggle,
  .sym-flappy-tab { transition: none; }
}