/* The lobby and winner buttons: "B+ light pixel" from
   docs/superpowers/specs/assets/2026-10-05-lobby-mockup.html. Luckiest Guy
   for the logo, mode names, chips and PLAY; Press Start 2P for labels. */
#lobby, #winner { position: fixed; color: #fffbeb; user-select: none; font-family: 'Luckiest Guy', 'Arial Black', sans-serif; }
#lobby { inset: 0; display: flex; align-items: center; justify-content: center; }
#winner { left: 0; right: 0; bottom: 12vh; display: flex; justify-content: center; align-items: center; gap: 3vw; font-size: 3vw; }
#lobby[hidden], #winner[hidden] { display: none; }
/* The deployed commit, small in the bottom-right corner on every screen. */
#version { position: fixed; right: 1vw; bottom: 0.8vh; font-family: 'Press Start 2P', monospace; font-size: max(9px, 0.6vw);
  color: rgba(255,251,235,0.55); text-shadow: 1px 1px 0 #1a1033; pointer-events: none; user-select: none; }
.lobby-stage { position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; container-type: size; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; padding: 5.2cqw 5cqw 0; gap: 2.6cqh; }
.pixel, .hud, .mode small, .row, .bars > span, .foot .chip, .panel p, .press, .info { font-family: 'Press Start 2P', monospace; font-weight: 400; }
.o { text-shadow: 0.25cqw 0.25cqw 0 #1a1033, -0.25cqw 0.25cqw 0 #1a1033, 0.25cqw -0.25cqw 0 #1a1033, -0.25cqw -0.25cqw 0 #1a1033, 0 0.6cqw 0 #1a1033; }
#winner .o { text-shadow: 3px 3px 0 #1a1033, -3px 3px 0 #1a1033, 3px -3px 0 #1a1033, -3px -3px 0 #1a1033, 0 7px 0 #1a1033; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { transform: scale(1.05); } }

.hud { position: absolute; top: 3cqh; left: 4cqw; right: 4cqw; display: flex; justify-content: space-between; font-size: 0.95cqw; color: #ff5fa8; }
.hud b { color: #fffbeb; font-weight: 400; }
.logo { font-size: 5.4cqw; line-height: 0.95; text-align: center; transform: rotate(-3deg); }
.logo span { display: block; color: #ffd23f; font-size: 0.62em; }

.modes { display: flex; gap: 3cqw; width: 100%; justify-content: center; }
.mode { position: relative; flex: 0 0 27%; padding: 2cqh 1cqw 1.6cqh; text-align: center; cursor: pointer; border-radius: 1.5cqw;
  background: linear-gradient(#2a1a66, #160d3d); border: 0.4cqw solid #1a1033; box-shadow: 0 0.7cqw 0 #1a1033, inset 0 0 0 0.25cqw #6c4cff; font-size: 2.5cqw; }
.mode.on { background: linear-gradient(#ff5fa8, #e0287a); box-shadow: 0 0.7cqw 0 #1a1033, inset 0 0 0 0.25cqw #ffd0e6, 0 0 3cqw rgba(255,61,154,.7); animation: pulse 1.2s ease-in-out infinite; }
.mode.on::before { content: '\25B6'; position: absolute; left: -11%; top: 50%; transform: translateY(-50%); font-family: 'Press Start 2P', monospace;
  font-size: 2cqw; color: #ffd23f; text-shadow: 0.25cqw 0.25cqw 0 #1a1033; animation: blink .8s steps(1) infinite; }
.mode small { display: block; font-size: 0.75cqw; margin-top: 1cqh; line-height: 1.5; text-shadow: 2px 2px 0 #1a1033; }
.info { position: absolute; top: -1.2cqw; right: -1.2cqw; width: 2.6cqw; height: 2.6cqw; background: #ffd23f; border: 0.3cqw solid #1a1033;
  color: #1a1033; font-size: 1cqw; display: flex; align-items: center; justify-content: center; cursor: pointer; text-shadow: none; }

/* The (?) beside a bar's name sits inline, not in a tile's corner. */
.info.barinfo { position: relative; top: auto; right: auto; display: inline-flex; vertical-align: middle; margin-left: 0.6cqw;
  width: 1.8cqw; height: 1.8cqw; font-size: 0.8cqw; border-width: 0.2cqw; cursor: pointer; }
.opts { min-height: 9cqh; display: flex; align-items: center; }
.row { display: none; gap: 0.8cqw; align-items: center; font-size: 1cqw; }
.row.show { display: flex; }
.row .gap { margin-left: 1.2cqw; }
.chip { position: relative; padding: 0.5cqw 1.2cqw 0.2cqw; border-radius: 1cqw; background: #160d3d; border: 0.3cqw solid #1a1033;
  box-shadow: 0 0.35cqw 0 #1a1033, inset 0 0 0 0.15cqw #6c4cff; cursor: pointer; font-family: 'Luckiest Guy', sans-serif; font-size: 1.7cqw;
  text-shadow: 2px 2px 0 #1a1033, -2px 2px 0 #1a1033, 2px -2px 0 #1a1033, -2px -2px 0 #1a1033; }
.chip.on { background: #ffd23f; color: #1a1033; text-shadow: none; box-shadow: 0 0.35cqw 0 #1a1033; }

.bars { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 1.6cqh 1.6cqw; align-items: center; width: 74%; font-size: 1cqw; }
.bar { display: flex; gap: 0.35cqw; cursor: pointer; padding: 0.4cqw; background: #1a1033; }
.bar i { position: relative; flex: 1; height: 1.5cqw; background: #2e2266; }
.bar i.f { background: #3ddc97; box-shadow: inset 0 -0.4cqw 0 #1fa267, inset 0 0.3cqw 0 #8affc4; }
.bar i.f.hot { background: #ff5f5f; box-shadow: inset 0 -0.4cqw 0 #c42f2f, inset 0 0.3cqw 0 #ffb0b0; }

.foot { display: flex; width: 74%; align-items: center; gap: 1.2cqw; }
.foot .chip { font-size: 0.9cqw; padding: 0.7cqw 1cqw; }
.startwrap { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 0.7cqw; }
.start { position: relative; font-size: 3.4cqw; padding: 1.2cqw 3.6cqw 0.6cqw; border-radius: 1.7cqw; cursor: pointer;
  background: linear-gradient(#5dffa0, #1fb865); border: 0.4cqw solid #1a1033; box-shadow: 0 0.8cqw 0 #1a1033, 0 0 2.5cqw rgba(61,220,151,.6); animation: pulse 1s ease-in-out infinite; }
#winner .start { font-size: 4vw; padding: 1.2vw 3.6vw 0.6vw; border-radius: 1.7vw; border-width: 5px; }
#winner .chip { font-size: 2.4vw; padding: 0.8vw 2vw 0.4vw; }
/* The key list along the bottom, so the keys are known before playing. */
/* In the lobby's flow at the bottom (not pinned over it), so however tall the
   text renders it never covers the buttons; touch screens have no keys. */
.keys { margin-top: auto; margin-bottom: 3cqh; width: 90cqw; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqh 2cqw;
  font-family: 'Press Start 2P', monospace; font-size: 0.7cqw; line-height: 1.4; color: #cfd3ff; text-shadow: 2px 2px 0 #1a1033;
  background: rgba(12,7,32,0.82); padding: 1.4cqh 1.6cqw; border-radius: 1cqw; }
@media (hover: none) and (pointer: coarse) { .keys { display: none; } }
.keys b { color: #ffd23f; font-weight: 400; margin-right: 0.5cqw; }
.press { font-size: 0.9cqw; animation: blink 1s steps(1) infinite; }

.panel { position: absolute; inset: 14% 20%; border-radius: 2cqw; background: linear-gradient(#2a1a66, #160d3d); border: 0.5cqw solid #1a1033;
  box-shadow: 0 0.9cqw 0 #1a1033, inset 0 0 0 0.35cqw #ffd23f; padding: 3cqh 4cqw; display: none; flex-direction: column; gap: 1.5cqh; z-index: 2; }
.panel.show { display: flex; }
.panel h3 { margin: 0; font-size: 3cqw; font-weight: 400; color: #ffd23f; }
.panel p { margin: 0; font-size: 1.05cqw; line-height: 2; }
.panel .x { margin-top: auto; align-self: flex-end; }

/* Camera trouble: a banner over the bars until the page gets a picture. */
.alert { position: absolute; left: 22%; right: 22%; top: 44%; display: none; flex-direction: column; gap: 1.2cqh; padding: 2.4cqh 3cqw;
  border-radius: 1.6cqw; background: rgba(12,7,32,0.94); border: 0.4cqw solid #1a1033; box-shadow: inset 0 0 0 0.3cqw #ff5f5f, 0 0.8cqw 0 #1a1033; z-index: 1; }
.alert.show { display: flex; }
.alert h3 { margin: 0; font-size: 2.6cqw; font-weight: 400; color: #ff5f5f; }
.alert p { margin: 0; font-family: 'Press Start 2P', monospace; font-size: 1cqw; line-height: 2; }

/* The hand-hover ring: a yellow arc that grows with --fill (0..1). */
.hv::after { content: ''; position: absolute; inset: -0.6cqw; border-radius: 1.6cqw; pointer-events: none; padding: 0.4cqw;
  background: conic-gradient(#ffd23f calc(var(--fill, 0) * 1turn), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: calc(var(--fill, 0) * 100); }
#winner .hv::after { inset: -8px; border-radius: 20px; padding: 6px; }
.bar i.hv::after { inset: -0.25cqw; border-radius: 0; padding: 0.2cqw; }